@finos/legend-application-studio 28.8.0 → 28.10.0

package/src/components/editor/editor-group/GrammarTextEditor.tsx

@@ -828,7 +828,7 @@ export const GrammarTextEditor = observer(() => {
       }
     }
     // Disable editing if user is in viewer mode
-    editor.updateOptions({ readOnly: editorStore.isInViewerMode });
+    editor.updateOptions({ readOnly: editorStore.editorMode.disableEditing });
 
     // hover
     hoverProviderDisposer.current?.dispose();

package/src/components/editor/editor-group/connection-editor/DatabaseBuilderWizard.tsx

@@ -127,6 +127,138 @@ const QueryBuilderGridResult = observer(
   },
 );
 
+export const DatabaseBuilderModalContent = observer(
+  (props: { databaseBuilderState: DatabaseBuilderWizardState }) => {
+    const { databaseBuilderState } = props;
+    const applicationStore = useApplicationStore();
+    const schemaExplorerState = databaseBuilderState.schemaExplorerState;
+    const isCreatingNewDatabase = schemaExplorerState.isCreatingNewDatabase;
+    const elementAlreadyExistsMessage =
+      isCreatingNewDatabase &&
+      databaseBuilderState.editorStore.graphManagerState.graph.allElements
+        .map((s) => s.path)
+        .includes(schemaExplorerState.targetDatabasePath)
+        ? 'Element with same path already exists'
+        : undefined;
+
+    const isExecutingAction =
+      schemaExplorerState.isGeneratingDatabase ||
+      schemaExplorerState.isUpdatingDatabase;
+
+    const onTargetPathChange: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      schemaExplorerState.setTargetDatabasePath(event.target.value);
+    };
+
+    useEffect(() => {
+      flowResult(schemaExplorerState.fetchDatabaseMetadata()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, schemaExplorerState]);
+
+    useConditionedApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATABASE_BUILDER,
+      databaseBuilderState.showModal,
+    );
+
+    return (
+      <ModalBody className="database-builder__content">
+        <PanelLoadingIndicator isLoading={isExecutingAction} />
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel size={450}>
+            <ResizablePanelGroup>
+              <ResizablePanel>
+                <div className="database-builder__config">
+                  <PanelHeader title="schema explorer" />
+                  <PanelContent className="database-builder__config__content">
+                    {schemaExplorerState.treeData && (
+                      <DatabaseSchemaExplorer
+                        treeData={schemaExplorerState.treeData}
+                        isReadOnly={false}
+                        schemaExplorerState={
+                          databaseBuilderState.schemaExplorerState
+                        }
+                      />
+                    )}
+                  </PanelContent>
+                </div>
+              </ResizablePanel>
+              <ResizablePanelSplitter>
+                <ResizablePanelSplitterLine
+                  color={'var(--color-dark-grey-250)'}
+                />
+              </ResizablePanelSplitter>
+              <ResizablePanel>
+                <div className="database-builder__config">
+                  <PanelHeader title="preview" />
+                  <PanelContent className="database-builder__config__content">
+                    {databaseBuilderState.schemaExplorerState.previewer && (
+                      <QueryBuilderGridResult
+                        executionResult={
+                          databaseBuilderState.schemaExplorerState.previewer
+                        }
+                      />
+                    )}
+                  </PanelContent>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
+          <ResizablePanelSplitter />
+          <ResizablePanel>
+            <Panel className="database-builder__model">
+              <PanelHeader title="database model" />
+              <PanelContent>
+                <div className="database-builder__modeler">
+                  <div className="panel__content__form__section database-builder__modeler__path">
+                    <div className="panel__content__form__section__header__label">
+                      Target Database Path
+                    </div>
+                    <InputWithInlineValidation
+                      className="panel__content__form__section__input"
+                      spellCheck={false}
+                      onChange={onTargetPathChange}
+                      disabled={
+                        schemaExplorerState.makeTargetDatabasePathEditable
+                          ? false
+                          : !isCreatingNewDatabase
+                      }
+                      value={
+                        schemaExplorerState.makeTargetDatabasePathEditable ||
+                        isCreatingNewDatabase
+                          ? schemaExplorerState.targetDatabasePath
+                          : schemaExplorerState.database.path
+                      }
+                      error={elementAlreadyExistsMessage}
+                      showEditableIcon={true}
+                    />
+                  </div>
+                  <div className="database-builder__modeler__preview">
+                    <div className="database-builder__modeler__preview__header">
+                      readonly
+                    </div>
+                    {databaseBuilderState.databaseGrammarCode && (
+                      <CodeEditor
+                        language={CODE_EDITOR_LANGUAGE.PURE}
+                        inputValue={databaseBuilderState.databaseGrammarCode}
+                        isReadOnly={true}
+                      />
+                    )}
+                    {!databaseBuilderState.databaseGrammarCode && (
+                      <BlankPanelContent>No database preview</BlankPanelContent>
+                    )}
+                  </div>
+                </div>
+              </PanelContent>
+            </Panel>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ModalBody>
+    );
+  },
+);
+
 export const DatabaseBuilderWizard = observer(
   (props: {
     databaseBuilderState: DatabaseBuilderWizardState;
@@ -147,11 +279,6 @@ export const DatabaseBuilderWizard = observer(
     const preview = applicationStore.guardUnhandledError(() =>
       flowResult(databaseBuilderState.previewDatabaseModel()),
     );
-    const onTargetPathChange: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      schemaExplorerState.setTargetDatabasePath(event.target.value);
-    };
     const updateDatabase = applicationStore.guardUnhandledError(() =>
       flowResult(databaseBuilderState.updateDatabase()),
     );
@@ -166,17 +293,6 @@ export const DatabaseBuilderWizard = observer(
       schemaExplorerState.isUpdatingDatabase ||
       schemaExplorerState.previewDataState.isInProgress;
 
-    useEffect(() => {
-      flowResult(schemaExplorerState.fetchDatabaseMetadata()).catch(
-        applicationStore.alertUnhandledError,
-      );
-    }, [applicationStore, schemaExplorerState]);
-
-    useConditionedApplicationNavigationContext(
-      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATABASE_BUILDER,
-      databaseBuilderState.showModal,
-    );
-
     return (
       <Dialog
         open={databaseBuilderState.showModal}
@@ -201,93 +317,9 @@ export const DatabaseBuilderWizard = observer(
               </button>
             </ModalHeaderActions>
           </ModalHeader>
-          <ModalBody className="database-builder__content">
-            <PanelLoadingIndicator isLoading={isExecutingAction} />
-            <ResizablePanelGroup orientation="vertical">
-              <ResizablePanel size={450}>
-                <ResizablePanelGroup>
-                  <ResizablePanel>
-                    <div className="database-builder__config">
-                      <PanelHeader title="schema explorer" />
-                      <PanelContent className="database-builder__config__content">
-                        {schemaExplorerState.treeData && (
-                          <DatabaseSchemaExplorer
-                            treeData={schemaExplorerState.treeData}
-                            isReadOnly={false}
-                            schemaExplorerState={
-                              databaseBuilderState.schemaExplorerState
-                            }
-                          />
-                        )}
-                      </PanelContent>
-                    </div>
-                  </ResizablePanel>
-                  <ResizablePanelSplitter>
-                    <ResizablePanelSplitterLine
-                      color={'var(--color-dark-grey-250)'}
-                    />
-                  </ResizablePanelSplitter>
-                  <ResizablePanel>
-                    <div className="database-builder__config">
-                      <PanelHeader title="preview" />
-                      <PanelContent className="database-builder__config__content">
-                        {databaseBuilderState.schemaExplorerState.previewer && (
-                          <QueryBuilderGridResult
-                            executionResult={
-                              databaseBuilderState.schemaExplorerState.previewer
-                            }
-                          />
-                        )}
-                      </PanelContent>
-                    </div>
-                  </ResizablePanel>
-                </ResizablePanelGroup>
-              </ResizablePanel>
-              <ResizablePanelSplitter />
-              <ResizablePanel>
-                <Panel className="database-builder__model">
-                  <PanelHeader title="database model" />
-                  <PanelContent>
-                    <div className="database-builder__modeler">
-                      <div className="panel__content__form__section database-builder__modeler__path">
-                        <div className="panel__content__form__section__header__label">
-                          Target Database Path
-                        </div>
-                        <InputWithInlineValidation
-                          className="panel__content__form__section__input"
-                          spellCheck={false}
-                          onChange={onTargetPathChange}
-                          disabled={!isCreatingNewDatabase}
-                          value={
-                            isCreatingNewDatabase
-                              ? schemaExplorerState.targetDatabasePath
-                              : schemaExplorerState.database.path
-                          }
-                          error={elementAlreadyExistsMessage}
-                        />
-                      </div>
-                      <div className="database-builder__modeler__preview">
-                        {databaseBuilderState.databaseGrammarCode && (
-                          <CodeEditor
-                            language={CODE_EDITOR_LANGUAGE.PURE}
-                            inputValue={
-                              databaseBuilderState.databaseGrammarCode
-                            }
-                            isReadOnly={true}
-                          />
-                        )}
-                        {!databaseBuilderState.databaseGrammarCode && (
-                          <BlankPanelContent>
-                            No database preview
-                          </BlankPanelContent>
-                        )}
-                      </div>
-                    </div>
-                  </PanelContent>
-                </Panel>
-              </ResizablePanel>
-            </ResizablePanelGroup>
-          </ModalBody>
+          <DatabaseBuilderModalContent
+            databaseBuilderState={databaseBuilderState}
+          />
           <ModalFooter>
             <ModalFooterButton
               className="database-builder__action--btn"

package/src/components/editor/editor-group/connection-editor/DatabaseModelBuilder.tsx

@@ -50,6 +50,95 @@ import {
 import { debounce, noop } from '@finos/legend-shared';
 import { isValidPath } from '@finos/legend-graph';
 
+export const DatabaseModelPackageInput = observer(
+  (props: { databaseModelBuilderState: DatabaseModelBuilderState }) => {
+    const { databaseModelBuilderState } = props;
+
+    const applicationStore = useApplicationStore();
+    const debouncedRegenerate = useMemo(
+      () =>
+        debounce(
+          () => flowResult(databaseModelBuilderState.previewDatabaseModels()),
+          500,
+        ),
+      [databaseModelBuilderState],
+    );
+
+    const changeTargetPackage: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      databaseModelBuilderState.setTargetPackage(event.target.value);
+      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
+    };
+
+    const targetPackageValidationMessage =
+      !databaseModelBuilderState.targetPackage
+        ? `Target package path can't be empty`
+        : !isValidPath(databaseModelBuilderState.targetPackage)
+        ? 'Invalid target package path'
+        : undefined;
+
+    return (
+      <div className="panel__content__form__section">
+        <div className="panel__content__form__section__header__label">
+          Target Package
+        </div>
+        <div className="panel__content__form__section__header__prompt">
+          Target Package of Mapping and Models Generated
+        </div>
+        <InputWithInlineValidation
+          className="query-builder__variables__variable__name__input input-group__input"
+          spellCheck={false}
+          value={databaseModelBuilderState.targetPackage}
+          onChange={changeTargetPackage}
+          placeholder="Target package path"
+          error={targetPackageValidationMessage}
+          showEditableIcon={true}
+        />
+      </div>
+    );
+  },
+);
+
+export const DatabaseModelPreviewEditor = observer(
+  (props: {
+    databaseModelBuilderState: DatabaseModelBuilderState;
+    grammarCode: string;
+  }) => {
+    const { databaseModelBuilderState, grammarCode } = props;
+
+    const isExecutingAction =
+      databaseModelBuilderState.generatingModelState.isInProgress ||
+      databaseModelBuilderState.saveModelState.isInProgress;
+
+    return (
+      <Panel className="database-builder__model">
+        <PanelHeader title="database model" />
+        <PanelContent>
+          <PanelLoadingIndicator isLoading={isExecutingAction} />
+          <div className="database-builder__modeler">
+            <div className="database-builder__modeler__preview">
+              <div className="database-builder__modeler__preview__header">
+                readonly
+              </div>
+              {databaseModelBuilderState.generatedGrammarCode && (
+                <CodeEditor
+                  language={CODE_EDITOR_LANGUAGE.PURE}
+                  inputValue={grammarCode}
+                  isReadOnly={true}
+                />
+              )}
+              {!databaseModelBuilderState.generatedGrammarCode && (
+                <BlankPanelContent>No model preview</BlankPanelContent>
+              )}
+            </div>
+          </div>
+        </PanelContent>
+      </Panel>
+    );
+  },
+);
+
 export const DatabaseModelBuilder = observer(
   (props: {
     databaseModelBuilderState: DatabaseModelBuilderState;
@@ -66,6 +155,7 @@ export const DatabaseModelBuilder = observer(
         ),
       [databaseModelBuilderState],
     );
+
     const preview = (): void => {
       debouncedRegenerate.cancel();
       debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
@@ -78,19 +168,6 @@ export const DatabaseModelBuilder = observer(
       databaseModelBuilderState.close();
     };
 
-    const targetPackageValidationMessage =
-      !databaseModelBuilderState.targetPackage
-        ? `Target package path can't be empty`
-        : !isValidPath(databaseModelBuilderState.targetPackage)
-        ? 'Invalid target package path'
-        : undefined;
-
-    const changeTargetPackage: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      databaseModelBuilderState.setTargetPackage(event.target.value);
-      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
-    };
     const isExecutingAction =
       databaseModelBuilderState.generatingModelState.isInProgress ||
       databaseModelBuilderState.saveModelState.isInProgress;
@@ -136,51 +213,18 @@ export const DatabaseModelBuilder = observer(
                 <div className="database-builder__config">
                   <PanelHeader title="schema explorer" />
                   <PanelContent className="database-builder__config__content">
-                    <div className="panel__content__form__section">
-                      <div className="panel__content__form__section__header__label">
-                        {'Target Package'}
-                      </div>
-                      <div className="panel__content__form__section__header__prompt">
-                        {'Target Package of Mapping and Models Generated'}
-                      </div>
-                      <InputWithInlineValidation
-                        className="query-builder__variables__variable__name__input input-group__input"
-                        spellCheck={false}
-                        value={databaseModelBuilderState.targetPackage}
-                        onChange={changeTargetPackage}
-                        placeholder="Target package path"
-                        error={targetPackageValidationMessage}
-                      />
-                    </div>
+                    <DatabaseModelPackageInput
+                      databaseModelBuilderState={databaseModelBuilderState}
+                    />
                   </PanelContent>
                 </div>
               </ResizablePanel>
               <ResizablePanelSplitter />
               <ResizablePanel>
-                <Panel className="database-builder__model">
-                  <PanelHeader title="database model" />
-                  <PanelContent>
-                    <PanelLoadingIndicator isLoading={isExecutingAction} />
-                    <div className="database-builder__modeler">
-                      <div className="database-builder__modeler__preview">
-                        {databaseModelBuilderState.generatedGrammarCode && (
-                          <CodeEditor
-                            language={CODE_EDITOR_LANGUAGE.PURE}
-                            inputValue={
-                              databaseModelBuilderState.generatedGrammarCode
-                            }
-                            isReadOnly={true}
-                          />
-                        )}
-                        {!databaseModelBuilderState.generatedGrammarCode && (
-                          <BlankPanelContent>
-                            No model preview
-                          </BlankPanelContent>
-                        )}
-                      </div>
-                    </div>
-                  </PanelContent>
-                </Panel>
+                <DatabaseModelPreviewEditor
+                  databaseModelBuilderState={databaseModelBuilderState}
+                  grammarCode={databaseModelBuilderState.generatedGrammarCode}
+                />
               </ResizablePanel>
             </ResizablePanelGroup>
           </ModalBody>

package/src/components/editor/editor-group/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -1567,12 +1567,13 @@ const renderAuthenticationStrategyEditor = (
   }
 };
 
-const RelationalConnectionGeneralEditor = observer(
+export const RelationalConnectionGeneralEditor = observer(
   (props: {
     connectionValueState: RelationalDatabaseConnectionValueState;
     isReadOnly: boolean;
+    hideHeader?: boolean;
   }) => {
-    const { connectionValueState, isReadOnly } = props;
+    const { connectionValueState, isReadOnly, hideHeader } = props;
     const connection = connectionValueState.connection;
     const editorStore = useEditorStore();
     const plugins = editorStore.pluginManager.getApplicationPlugins();
@@ -1692,7 +1693,7 @@ const RelationalConnectionGeneralEditor = observer(
         <ResizablePanelGroup orientation="horizontal">
           <ResizablePanel size={200} minSize={15}>
             <Panel>
-              <PanelHeader title="general"></PanelHeader>
+              {!hideHeader && <PanelHeader title="general"></PanelHeader>}
               <PanelContent className="relational-connection-editor__general">
                 <PanelFormSection>
                   <div className="panel__content__form__section__header__label">