LanguageServer and Bool Arguments Fixes

src/components/Arguments/index.tsx

@@ -288,7 +288,10 @@ const Arguments: React.FC<ArgumentsProps> = (props) => {
     // Map values to strings that will be passed to backend
     const args:any = list.map((arg, index) => {
       const { type } = arg;
-      const value = fixed[index]
+      const fixedValue = fixed[index]
+
+      // We need to keep Bool values as boolean and not string
+      const value = type === "Bool" ? fixedValue === "true" : fixed[index]
 
       // If we have a complex type - return value formatted by language server
       if ( isComplexType(type)){

src/components/CadenceEditor.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+const { MonacoServices } = require('monaco-languageclient/lib/monaco-services');
+
 import configureCadence, { CADENCE_LANGUAGE_ID } from 'util/cadence';
 import {
   CadenceCheckCompleted,
   CadenceLanguageServer,
   Callbacks,
 } from 'util/language-server';
 import { createCadenceLanguageClient } from 'util/language-client';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import { EntityType } from 'providers/Project';
 import Arguments from 'components/Arguments';
 import { Argument } from 'components/Arguments/types';
@@ -23,20 +25,21 @@ import {
   MonacoLanguageClient,
   ExecuteCommandRequest,
 } from 'monaco-languageclient';
-
-const { MonacoServices } = require('monaco-languageclient/lib/monaco-services');
+import { WithShowProps } from "containers/Editor/components";
 
 const blink = keyframes`
   50% {
     opacity: 0.5;
   }
 `;
 
-const EditorContainer = styled.div`
+const EditorContainer = styled.div<WithShowProps>`
   width: 100%;
   height: 100%;
   position: relative;
 
+  display: ${({ show }) => (show ? 'block' : 'none')};
+
   .drag-box {
     width: fit-content;
     height: fit-content;
@@ -112,6 +115,7 @@ type CodeGetter = (index: number) => string | undefined;
 type CadenceEditorProps = {
   code: string;
   mount: string;
+  show: boolean;
   onChange: any;
   activeId: string;
   type: EntityType;
@@ -136,6 +140,7 @@ class CadenceEditor extends React.Component<
   constructor(props: {
     code: string;
     mount: string;
+    show: boolean;
     onChange: any;
     activeId: string;
     type: EntityType;
@@ -183,15 +188,12 @@ class CadenceEditor extends React.Component<
     this.editor.focus();
 
     if (this.props.activeId && !this.callbacks) {
-      const getCode = (index: number) =>
-        this.props.getCode(index)
+      const getCode = (index: number) => this.props.getCode(index);
       await this.loadLanguageServer(getCode);
     }
   }
 
-  private async loadLanguageServer(
-    getCode: CodeGetter,
-  ) {
+  private async loadLanguageServer(getCode: CodeGetter) {
     this.callbacks = {
       // The actual callback will be set as soon as the language server is initialized
       toServer: null,
@@ -439,7 +441,7 @@ class CadenceEditor extends React.Component<
   }
 
   render() {
-    const { type, code } = this.props;
+    const { type, code, show } = this.props;
 
     /// Get a list of args from language server
     const { activeId } = this.props;
@@ -455,7 +457,7 @@ class CadenceEditor extends React.Component<
       info: [],
     };
     return (
-      <EditorContainer id={this.props.mount}>
+      <EditorContainer id={this.props.mount} show={show}>
         <Arguments
           type={type}
           list={list}

src/containers/Editor/components.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { Flex, Button, Box, Divider } from 'theme-ui';
+import { Flex, Button, Box /*Divider*/ } from 'theme-ui';
 import styled from '@emotion/styled';
 import { FaShareSquare } from 'react-icons/fa';
 import { motion } from 'framer-motion';
 import useClipboard from 'react-use-clipboard';
+import { Divider } from 'theme-ui';
 
 import { Main as MainRoot } from 'layout/Main';
 import { Editor as EditorRoot } from 'layout/Editor';
@@ -30,6 +31,10 @@ import {
 } from 'components/Arguments/SingleArgument/styles';
 import { Markdown } from 'components/Markdown';
 
+export interface WithShowProps {
+  show: boolean;
+}
+
 const Header: React.FC = ({ children }) => {
   return (
     <motion.div>
@@ -154,7 +159,8 @@ function getActiveId(project: Project, active: ActiveEditor): string {
   }
 }
 
-const ProjectInfoContainer = styled.div`
+const ProjectInfoContainer = styled.div<WithShowProps>`
+  display: ${({ show }) => (show ? 'block' : 'none')};
   margin: 0.2rem 1rem 0rem 1rem;
   min-width: 500px;
   margin-top: 1rem;
@@ -230,15 +236,15 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
   }
 
   const isReadmeEditor = active.type === 4;
-  const isCodeEditor = !isReadmeEditor;
 
   return (
     <MainRoot>
-      {isReadmeEditor &&
-        (project.parentId && !project.persist ? (
-          <EditorRoot>
-            <EditorTitle type={active.type} />
-            <ProjectInfoContainer>
+      <EditorRoot>
+        <EditorTitle type={active.type} />
+        {/* This is Project Info Block */}
+        <ProjectInfoContainer show={isReadmeEditor}>
+          {project.parentId && !project.persist ? (
+            <>
               <ProjectHeading>{title}</ProjectHeading>
               <Divider
                 sx={{ marginX: '1.0rem', marginY: '1.0rem', opacity: '0.3' }}
@@ -250,12 +256,9 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
               <ReadmeHtmlContainer>
                 <Markdown content={readme}></Markdown>
               </ReadmeHtmlContainer>
-            </ProjectInfoContainer>
-          </EditorRoot>
-        ) : (
-          <EditorRoot>
-            <EditorTitle type={active.type} />
-            <ProjectInfoContainer>
+            </>
+          ) : (
+            <>
               <InputBlock mb={'12px'}>
                 <Label>Title</Label>
                 <Input
@@ -284,25 +287,21 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
                   updateProject(title, description, readme);
                 }}
               />
-            </ProjectInfoContainer>
-          </EditorRoot>
-        ))}
-      {isCodeEditor && (
-        <>
-          <EditorTitle type={active.type} />
-          <EditorRoot>
-            <CadenceEditor
-              type={active.type}
-              activeId={activeId}
-              code={code}
-              mount="cadenceEditor"
-              onChange={(code: string, _: any) => onEditorChange(code)}
-              getCode={getCode}
-            />
-          </EditorRoot>
-          <BottomBarContainer active={active} />
-        </>
-      )}
+            </>
+          )}
+        </ProjectInfoContainer>
+        {/* This is Cadence Editor */}
+        <CadenceEditor
+          type={active.type}
+          activeId={activeId}
+          code={code}
+          mount="cadenceEditor"
+          onChange={(code: string, _: any) => onEditorChange(code)}
+          getCode={getCode}
+          show={!isReadmeEditor}
+        />
+      </EditorRoot>
+      <BottomBarContainer active={active} />
     </MainRoot>
   );
 };