@finos/legend-application-studio 19.1.0 → 20.0.0

package/src/components/editor/edit-panel/GrammarTextEditor.tsx

@@ -23,10 +23,8 @@ import {
 } from 'monaco-editor';
 import {
   ContextMenu,
-  revealError,
-  setErrorMarkers,
   disposeEditor,
-  baseTextEditorSettings,
+  getBaseTextEditorOptions,
   resetLineNumberGutterWidth,
   clsx,
   WordWrapIcon,
@@ -36,6 +34,10 @@ import {
   HackerIcon,
   PanelContent,
   useResizeDetector,
+  setWarningMarkers,
+  clearMarkers,
+  setErrorMarkers,
+  moveCursorToPosition,
 } from '@finos/legend-art';
 import {
   TAB_SIZE,
@@ -779,7 +781,9 @@ export const GrammarTextEditor = observer(() => {
   const grammarTextEditorState = editorStore.grammarTextEditorState;
   const currentElementLabelRegexString =
     grammarTextEditorState.currentElementLabelRegexString;
-  const error = grammarTextEditorState.error;
+  const error = editorStore.graphState.error;
+
+  const forcedCursorPosition = grammarTextEditorState.forcedCursorPosition;
   const value = normalizeLineEnding(grammarTextEditorState.graphGrammarText);
   const textEditorRef = useRef<HTMLDivElement>(null);
   const hoverProviderDisposer = useRef<IDisposable | undefined>(undefined);
@@ -804,15 +808,15 @@ export const GrammarTextEditor = observer(() => {
     if (!editor && textEditorRef.current) {
       const element = textEditorRef.current;
       const _editor = monacoEditorAPI.create(element, {
-        ...baseTextEditorSettings,
+        ...getBaseTextEditorOptions(),
         language: EDITOR_LANGUAGE.PURE,
         theme: EDITOR_THEME.LEGEND,
         renderValidationDecorations: 'on',
       });
       _editor.onDidChangeModelContent(() => {
         grammarTextEditorState.setGraphGrammarText(getEditorValue(_editor));
-        editorStore.graphState.clearCompilationError();
-        // we can technically can reset the current element label regex string here
+        clearMarkers();
+        // NOTE: we can technically can reset the current element label regex string here
         // but if we do that on first load, the cursor will not jump to the current element
         // also, it's better to place that logic in an effect that watches for the regex string
       });
@@ -882,17 +886,42 @@ export const GrammarTextEditor = observer(() => {
     const editorModel = editor.getModel();
     if (editorModel) {
       editorModel.updateOptions({ tabSize: TAB_SIZE });
-      if (error?.sourceInformation) {
-        setErrorMarkers(
+      if (
+        !editorStore.graphState.areProblemsStale &&
+        error?.sourceInformation
+      ) {
+        setErrorMarkers(editorModel, [
+          {
+            message: error.message,
+            startLineNumber: error.sourceInformation.startLine,
+            startColumn: error.sourceInformation.startColumn,
+            endLineNumber: error.sourceInformation.endLine,
+            endColumn: error.sourceInformation.endColumn,
+          },
+        ]);
+      }
+
+      if (
+        !editorStore.graphState.areProblemsStale &&
+        editorStore.graphState.warnings.length
+      ) {
+        setWarningMarkers(
           editorModel,
-          error.message,
-          error.sourceInformation.startLine,
-          error.sourceInformation.startColumn,
-          error.sourceInformation.endLine,
-          error.sourceInformation.endColumn,
+          editorStore.graphState.warnings
+            .map((warning) => {
+              if (!warning.sourceInformation) {
+                return undefined;
+              }
+              return {
+                message: warning.message,
+                startLineNumber: warning.sourceInformation.startLine,
+                startColumn: warning.sourceInformation.startColumn,
+                endLineNumber: warning.sourceInformation.endLine,
+                endColumn: warning.sourceInformation.endColumn,
+              };
+            })
+            .filter(isNonNullable),
         );
-      } else {
-        monacoEditorAPI.setModelMarkers(editorModel, 'Error', []);
       }
     }
     // Disable editing if user is in viewer mode
@@ -1124,28 +1153,11 @@ export const GrammarTextEditor = observer(() => {
       },
     });
 
-  /**
-   * Reveal error has to be in an effect like this because, we want to reveal the error.
-   * For this to happen, the editor needs to gain focus. However, if the user clicks on the
-   * exit hackermode button, the editor loses focus, and the blocking modal pops up. This modal
-   * in turn traps the focus and preventing the editor from gaining the focus to reveal the error.
-   * As such we want to dismiss the modal before revealing the error, however, as of the current flow
-   * dismissing the modal is called when we set the parser/compiler error. So if this logic belongs to
-   * the normal rendering logic, and not an effect, it might happen just when the modal is still present
-   * to make sure the modal is dismissed, we should place this logic in an effect to make sure it happens
-   * slightly later, also it's better to have this as part of an effect in response to change in the errors
-   */
   useEffect(() => {
-    if (editor) {
-      if (error?.sourceInformation) {
-        revealError(
-          editor,
-          error.sourceInformation.startLine,
-          error.sourceInformation.startColumn,
-        );
-      }
+    if (editor && forcedCursorPosition) {
+      moveCursorToPosition(editor, forcedCursorPosition);
     }
-  }, [editor, error, error?.sourceInformation]);
+  }, [editor, forcedCursorPosition]);
 
   /**
    * This effect helps to navigate to the currently selected element in the explorer tree

package/src/components/editor/edit-panel/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -30,7 +30,7 @@ import {
   ErrorIcon,
   PanelHeader,
   PlusIcon,
-  PanelFormTextEditor,
+  PanelFormTextField,
   ContextMenu,
   MenuContent,
   MenuContentItem,
@@ -43,8 +43,7 @@ import {
   Panel,
   Badge,
   PanelListSelectorItemLabel,
-  PanelSection,
-  PanelFormBooleanEditor,
+  PanelFormBooleanField,
   PanelHeaderActions,
 } from '@finos/legend-art';
 import { capitalize, prettyCONSTName } from '@finos/legend-shared';
@@ -182,8 +181,8 @@ const StaticDatasourceSpecificationEditor = observer(
     };
 
     return (
-      <PanelSection>
-        <PanelFormTextEditor
+      <>
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.host}
           name="host"
@@ -200,7 +199,7 @@ const StaticDatasourceSpecificationEditor = observer(
           value={sourceSpec.port}
           onChange={changePort}
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
           name="database"
@@ -211,7 +210,7 @@ const StaticDatasourceSpecificationEditor = observer(
             )
           }
         />
-      </PanelSection>
+      </>
     );
   },
 );
@@ -223,8 +222,8 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
   }) => {
     const { sourceSpec, isReadOnly } = props;
     return (
-      <PanelSection>
-        <PanelFormTextEditor
+      <>
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
           name="database"
@@ -235,7 +234,7 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.directory}
           name="directory"
@@ -246,7 +245,7 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelFormBooleanEditor
+        <PanelFormBooleanField
           isReadOnly={isReadOnly}
           value={sourceSpec.autoServerMode}
           name="auto server mode"
@@ -257,7 +256,7 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
             )
           }
         />
-      </PanelSection>
+      </>
     );
   },
 );
@@ -269,8 +268,8 @@ const DatabricksDatasourceSpecificationEditor = observer(
   }) => {
     const { sourceSpec, isReadOnly } = props;
     return (
-      <PanelSection>
-        <PanelFormTextEditor
+      <>
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.hostname}
           name="hostname"
@@ -281,7 +280,7 @@ const DatabricksDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.port}
           name="port"
@@ -289,7 +288,7 @@ const DatabricksDatasourceSpecificationEditor = observer(
             databricksDatasourceSpecification_setPort(sourceSpec, value ?? '')
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.protocol}
           name="protocol"
@@ -300,7 +299,7 @@ const DatabricksDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.httpPath}
           name="httpPath"
@@ -311,7 +310,7 @@ const DatabricksDatasourceSpecificationEditor = observer(
             )
           }
         />
-      </PanelSection>
+      </>
     );
   },
 );
@@ -323,8 +322,8 @@ const SnowflakeDatasourceSpecificationEditor = observer(
   }) => {
     const { sourceSpec, isReadOnly } = props;
     return (
-      <PanelSection>
-        <PanelFormTextEditor
+      <>
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.accountName}
           name="account"
@@ -332,7 +331,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setAccountName(sourceSpec, value ?? '')
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.region}
           name="region"
@@ -340,7 +339,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setRegion(sourceSpec, value ?? '')
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.warehouseName}
           name="warehouse"
@@ -348,7 +347,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setWarehouseName(sourceSpec, value ?? '')
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
           name="database"
@@ -356,7 +355,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setDatabaseName(sourceSpec, value ?? '')
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.cloudType}
           name="cloud type"
@@ -364,7 +363,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setCloudType(sourceSpec, value)
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyHost}
           name="proxy host"
@@ -372,7 +371,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setProxyHost(sourceSpec, value)
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyPort}
           name="proxy port"
@@ -380,7 +379,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setProxyPort(sourceSpec, value)
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.nonProxyHosts}
           name="non proxy hosts"
@@ -388,7 +387,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setNonProxyHosts(sourceSpec, value)
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.organization}
           name="organization"
@@ -396,7 +395,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setOrganization(sourceSpec, value)
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.accountType}
           name="account type"
@@ -404,7 +403,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setAccountType(sourceSpec, value)
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.role}
           name="role"
@@ -413,7 +412,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
           }
         />
         {/* TODO: we should reconsider adding this field, it's an optional boolean, should we default it to `undefined` when it's `false`?*/}
-        <PanelFormBooleanEditor
+        <PanelFormBooleanField
           isReadOnly={isReadOnly}
           value={sourceSpec.quotedIdentifiersIgnoreCase}
           name="quoted identifiers ignore case"
@@ -425,7 +424,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             )
           }
         />
-      </PanelSection>
+      </>
     );
   },
 );
@@ -441,8 +440,8 @@ const RedshiftDatasourceSpecificationEditor = observer(
       redshiftDatasourceSpecification_setPort(sourceSpec, parseInt(val, 10));
     };
     return (
-      <PanelSection>
-        <PanelFormTextEditor
+      <>
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.host}
           name="host"
@@ -463,7 +462,7 @@ const RedshiftDatasourceSpecificationEditor = observer(
             onChange={changePort}
           />
         </div>
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
           name="database"
@@ -475,7 +474,7 @@ const RedshiftDatasourceSpecificationEditor = observer(
           }
         />
 
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.region}
           name="region"
@@ -483,7 +482,7 @@ const RedshiftDatasourceSpecificationEditor = observer(
             redshiftDatasourceSpecification_setRegion(sourceSpec, value ?? '')
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.clusterID}
           name="cluster"
@@ -494,7 +493,7 @@ const RedshiftDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.endpointURL}
           name="endpointURL"
@@ -505,7 +504,7 @@ const RedshiftDatasourceSpecificationEditor = observer(
             )
           }
         />
-      </PanelSection>
+      </>
     );
   },
 );
@@ -517,8 +516,8 @@ const BigQueryDatasourceSpecificationEditor = observer(
   }) => {
     const { sourceSpec, isReadOnly } = props;
     return (
-      <PanelSection>
-        <PanelFormTextEditor
+      <>
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.projectId}
           name="project id"
@@ -529,7 +528,7 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.defaultDataset}
           name="default dataset"
@@ -540,7 +539,7 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyHost}
           name="proxy host"
@@ -552,7 +551,7 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyPort}
           name="proxy port"
@@ -564,7 +563,7 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-      </PanelSection>
+      </>
     );
   },
 );
@@ -579,7 +578,7 @@ const DelegatedKerberosAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.serverPrincipal}
           name="server principal"
@@ -603,7 +602,7 @@ const ApiTokenAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.apiToken}
           name="apiTokenRef"
@@ -623,8 +622,8 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
   }) => {
     const { authSpec, isReadOnly } = props;
     return (
-      <PanelSection>
-        <PanelFormTextEditor
+      <>
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.privateKeyVaultReference}
           name="private key vault reference"
@@ -635,7 +634,7 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.passPhraseVaultReference}
           name="pass phrase vault reference"
@@ -646,7 +645,7 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.publicUserName}
           name="public user name"
@@ -657,7 +656,7 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
             )
           }
         />
-      </PanelSection>
+      </>
     );
   },
 );
@@ -667,7 +666,7 @@ const OAuthAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.oauthKey}
           name="oauth key"
@@ -675,7 +674,7 @@ const OAuthAuthenticationStrategyEditor = observer(
             oAuthAuthenticationStrategy_setOauthKey(authSpec, value ?? '')
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.scopeName}
           name="scope name"
@@ -696,7 +695,7 @@ const UsernamePasswordAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.baseVaultReference}
           name="base vault reference"
@@ -707,7 +706,7 @@ const UsernamePasswordAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.userNameVaultReference}
           name="user name vault reference"
@@ -718,7 +717,7 @@ const UsernamePasswordAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.passwordVaultReference}
           name="password vault reference"
@@ -742,7 +741,7 @@ const MiddleTierUsernamePasswordAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.vaultReference}
           name="vault reference"
@@ -768,7 +767,7 @@ const GCPWorkloadIdentityFederationAuthenticationStrategyEditor = observer(
     const GCPScopes = authSpec.additionalGcpScopes.join('\n');
     return (
       <>
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={authSpec.serviceAccountEmail}
           name="Service Account Email"
@@ -779,7 +778,7 @@ const GCPWorkloadIdentityFederationAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <PanelFormTextEditor
+        <PanelFormTextField
           isReadOnly={isReadOnly}
           value={GCPScopes}
           name="Additional GCP Scopes"
@@ -1084,6 +1083,7 @@ const PostProcessorRelationalConnectionEditor = observer(
                               title={`Post-Processor ${idx + 1}`}
                             />
                             <Badge
+                              className="badge--right"
                               title={getPostProcessorLabel(postProcessor)}
                             />
                           </PanelListSelectorItem>
@@ -1370,7 +1370,7 @@ const RelationalConnectionGeneralEditor = observer(
                     darkMode={true}
                   />
                 </div>
-                <PanelFormBooleanEditor
+                <PanelFormBooleanField
                   isReadOnly={isReadOnly}
                   value={connection.quoteIdentifiers}
                   name="Quote identifiers"