@finos/legend-application-studio 28.1.2 → 28.1.4

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

@@ -33,6 +33,7 @@ import {
   BlankPanelContent,
   PanelHeader,
   Panel,
+  InputWithInlineValidation,
 } from '@finos/legend-art';
 import { useEffect } from 'react';
 import { noop } from '@finos/legend-shared';
@@ -56,10 +57,24 @@ export const DatabaseBuilderWizard = observer(
   }) => {
     const { databaseBuilderState, isReadOnly } = props;
     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 applicationStore = useApplicationStore();
     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()),
     );
@@ -131,18 +146,23 @@ export const DatabaseBuilderWizard = observer(
               <ResizablePanel>
                 <Panel className="database-builder__model">
                   <PanelHeader title="database model" />
-
                   <PanelContent>
                     <div className="database-builder__modeller">
                       <div className="panel__content__form__section database-builder__modeller__path">
                         <div className="panel__content__form__section__header__label">
                           Target Database Path
                         </div>
-                        <input
+                        <InputWithInlineValidation
                           className="panel__content__form__section__input"
                           spellCheck={false}
-                          disabled={true}
-                          value={schemaExplorerState.database.path}
+                          onChange={onTargetPathChange}
+                          disabled={!isCreatingNewDatabase}
+                          value={
+                            isCreatingNewDatabase
+                              ? schemaExplorerState.targetDatabasePath
+                              : schemaExplorerState.database.path
+                          }
+                          error={elementAlreadyExistsMessage}
                         />
                       </div>
                       <div className="database-builder__modeller__preview">
@@ -178,7 +198,11 @@ export const DatabaseBuilderWizard = observer(
             </ModalFooterButton>
             <ModalFooterButton
               className="database-builder__action--btn"
-              disabled={isReadOnly || isExecutingAction}
+              disabled={
+                isReadOnly ||
+                isExecutingAction ||
+                Boolean(elementAlreadyExistsMessage)
+              }
               onClick={updateDatabase}
             >
               Update Database

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

@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import type { DatabaseModelBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/connection/DatabaseModelBuilderState.js';
+import {
+  BlankPanelContent,
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+  ModalHeaderActions,
+  ModalTitle,
+  Panel,
+  PanelContent,
+  PanelHeader,
+  PanelLoadingIndicator,
+  ResizablePanel,
+  ResizablePanelGroup,
+  TimesIcon,
+} from '@finos/legend-art';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
+import {
+  useApplicationStore,
+  useConditionedApplicationNavigationContext,
+} from '@finos/legend-application';
+import { flowResult } from 'mobx';
+import { useEffect } from 'react';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CodeEditor,
+} from '@finos/legend-lego/code-editor';
+import { noop } from '@finos/legend-shared';
+
+export const DatabaseModelBuilder = observer(
+  (props: {
+    databaseModelBuilderState: DatabaseModelBuilderState;
+    isReadOnly: boolean;
+  }) => {
+    const { databaseModelBuilderState, isReadOnly } = props;
+
+    const applicationStore = useApplicationStore();
+    const preview = applicationStore.guardUnhandledError(() =>
+      flowResult(databaseModelBuilderState.previewDatabaseModels()),
+    );
+    const saveModels = applicationStore.guardUnhandledError(() =>
+      flowResult(databaseModelBuilderState.saveModels()),
+    );
+    const closeModal = (): void => {
+      databaseModelBuilderState.close();
+    };
+
+    const isExecutingAction =
+      databaseModelBuilderState.generatingModelState.isInProgress ||
+      databaseModelBuilderState.saveModelState.isInProgress;
+
+    useEffect(() => {
+      flowResult(databaseModelBuilderState.previewDatabaseModels()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, databaseModelBuilderState]);
+
+    useConditionedApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATABASE_MODEL_BUILDER,
+      databaseModelBuilderState.showModal,
+    );
+
+    return (
+      <Dialog
+        open={databaseModelBuilderState.showModal}
+        classes={{ container: 'search-modal__container' }}
+        onClose={noop}
+        PaperProps={{
+          classes: {
+            root: 'search-modal__inner-container database-builder__container',
+          },
+        }}
+      >
+        <Modal darkMode={true} className="database-builder">
+          <ModalHeader>
+            <ModalTitle title="Database Model Builder" />
+            <ModalHeaderActions>
+              <button
+                className="modal__header__action"
+                tabIndex={-1}
+                onClick={closeModal}
+              >
+                <TimesIcon />
+              </button>
+            </ModalHeaderActions>
+          </ModalHeader>
+          <ModalBody className="database-builder__content">
+            <PanelLoadingIndicator isLoading={isExecutingAction} />
+            <ResizablePanelGroup orientation="vertical">
+              <ResizablePanel>
+                <Panel className="database-builder__model">
+                  <PanelHeader title="database model" />
+                  <PanelContent>
+                    <div className="database-builder__modeller">
+                      <div className="database-builder__modeller__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>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              className="database-builder__action--btn"
+              disabled={isReadOnly || isExecutingAction}
+              onClick={preview}
+              title="Preview models..."
+            >
+              Preview
+            </ModalFooterButton>
+            <ModalFooterButton
+              className="database-builder__action--btn"
+              disabled={isReadOnly || isExecutingAction}
+              onClick={saveModels}
+            >
+              Save Models
+            </ModalFooterButton>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/components/editor/editor-group/mapping-editor/MappingTestsExplorer.tsx

@@ -296,20 +296,24 @@ export const MappingTestsExplorer = observer(
       flowResult(mappingEditorState.runTests()),
     );
     // all test run report summary
-    const numberOfTests = mappingEditorState.mappingTestStates.length;
-    const numberOfTestsPassed = mappingEditorState.mappingTestStates.filter(
-      (testState) => testState.result === TEST_RESULT.PASSED,
-    ).length;
-    const numberOfTestsFailed = mappingEditorState.mappingTestStates.filter(
-      (testState) =>
-        testState.result === TEST_RESULT.FAILED ||
-        testState.result === TEST_RESULT.ERROR,
-    ).length;
-    const numberOfTestSkipped = mappingEditorState.mappingTestStates.filter(
-      (testState) => testState.isSkipped,
-    ).length;
+    const numberOfTests =
+      mappingEditorState.DEPRECATED_mappingTestStates.length;
+    const numberOfTestsPassed =
+      mappingEditorState.DEPRECATED_mappingTestStates.filter(
+        (testState) => testState.result === TEST_RESULT.PASSED,
+      ).length;
+    const numberOfTestsFailed =
+      mappingEditorState.DEPRECATED_mappingTestStates.filter(
+        (testState) =>
+          testState.result === TEST_RESULT.FAILED ||
+          testState.result === TEST_RESULT.ERROR,
+      ).length;
+    const numberOfTestSkipped =
+      mappingEditorState.DEPRECATED_mappingTestStates.filter(
+        (testState) => testState.isSkipped,
+      ).length;
     const percentageTestRun = Math.floor(
-      (mappingEditorState.mappingTestStates.filter(
+      (mappingEditorState.DEPRECATED_mappingTestStates.filter(
         (testState) => testState.result !== TEST_RESULT.NONE,
       ).length /
         numberOfTests) *
@@ -425,7 +429,7 @@ export const MappingTestsExplorer = observer(
                 className="panel__header__action"
                 onClick={runAllTests}
                 disabled={
-                  !mappingEditorState.mappingTestStates.length ||
+                  !mappingEditorState.DEPRECATED_mappingTestStates.length ||
                   mappingEditorState.isRunningAllTests
                 }
                 tabIndex={-1}
@@ -462,31 +466,36 @@ export const MappingTestsExplorer = observer(
             dropTargetConnector={dropRef}
           >
             <div className="mapping-test-explorer__content">
-              {Boolean(mappingEditorState.mappingTestStates.length) &&
-                mappingEditorState.mappingTestStates
-                  .slice()
-                  .map((testState) => (
+              {Boolean(
+                mappingEditorState.DEPRECATED_mappingTestStates.length,
+              ) &&
+                mappingEditorState.DEPRECATED_mappingTestStates.slice().map(
+                  (testState) => (
                     <MappingTestExplorer
                       key={testState.test._UUID}
                       testState={testState}
                       isReadOnly={isReadOnly}
                     />
-                  ))}
-              {!isReadOnly && !mappingEditorState.mappingTestStates.length && (
-                <BlankPanelPlaceholder
-                  text={
-                    new Randomizer().getRandomItemInCollection(addTestPromps) ??
-                    addTestPromps[0] ??
-                    'Add a mapping test'
-                  }
-                  onClick={showClassMappingSelectorModal}
-                  clickActionType="add"
-                  tooltipText="Drop a mapping element to start testing"
-                  isDropZoneActive={isDragOver && !isReadOnly}
-                  disabled={isReadOnly}
-                  previewText="No test"
-                />
-              )}
+                  ),
+                )}
+              {!isReadOnly &&
+                !mappingEditorState.DEPRECATED_mappingTestStates.length && (
+                  <BlankPanelPlaceholder
+                    text={
+                      new Randomizer().getRandomItemInCollection(
+                        addTestPromps,
+                      ) ??
+                      addTestPromps[0] ??
+                      'Add a mapping test'
+                    }
+                    onClick={showClassMappingSelectorModal}
+                    clickActionType="add"
+                    tooltipText="Drop a mapping element to start testing"
+                    isDropZoneActive={isDragOver && !isReadOnly}
+                    disabled={isReadOnly}
+                    previewText="No test"
+                  />
+                )}
             </div>
           </PanelDropZone>
         </ContextMenu>

package/src/components/editor/side-bar/Explorer.tsx

@@ -140,6 +140,7 @@ import {
 } from '@finos/legend-lego/code-editor';
 import { DatabaseBuilderWizard } from '../editor-group/connection-editor/DatabaseBuilderWizard.js';
 import { FunctionEditorState } from '../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
+import { DatabaseModelBuilder } from '../editor-group/connection-editor/DatabaseModelBuilder.js';
 
 const ElementRenamer = observer(() => {
   const editorStore = useEditorStore();
@@ -457,8 +458,9 @@ const isRelationalDatabaseConnection = (
   val instanceof PackageableConnection &&
   val.connectionValue instanceof RelationalDatabaseConnection;
 
-const isRelationalDatabase = (val: PackageableElement | undefined): boolean =>
-  val instanceof Database;
+const isRelationalDatabase = (
+  val: PackageableElement | undefined,
+): Database | undefined => (val instanceof Database ? val : undefined);
 
 const ExplorerContextMenu = observer(
   forwardRef<
@@ -533,27 +535,22 @@ const ExplorerContextMenu = observer(
     );
     const generateModelsFromDatabaseSpecification =
       editorStore.applicationStore.guardUnhandledError(async () => {
-        if (isRelationalDatabase(node?.packageableElement)) {
-          const databasePath = guaranteeNonEmptyString(
-            node?.packageableElement.path,
-          );
-          const graph = editorStore.graphManagerState.graph;
-          if (graph.getDatabase(databasePath).joins.length === 0) {
+        const database = isRelationalDatabase(node?.packageableElement);
+        if (database) {
+          if (database.joins.length === 0) {
             applicationStore.alertService.setActionAlertInfo({
               message:
-                'You are attempting to generate models but have defined no joins. Are you sure you wish to proceed?',
+                'You are attempting to build models but have defined no joins. Are you sure you wish to proceed?',
               type: ActionAlertType.CAUTION,
               actions: [
                 {
                   label: 'Proceed',
                   type: ActionAlertActionType.PROCEED_WITH_CAUTION,
                   handler: () => {
-                    flowResult(
-                      editorStore.explorerTreeState.generateModelsFromDatabaseSpecification(
-                        databasePath,
-                        graph,
-                      ),
-                    ).catch(applicationStore.alertUnhandledError);
+                    editorStore.explorerTreeState.buildDatabaseModels(
+                      database,
+                      editorStore.isInViewerMode,
+                    );
                   },
                 },
                 {
@@ -564,9 +561,9 @@ const ExplorerContextMenu = observer(
               ],
             });
           } else {
-            editorStore.explorerTreeState.generateModelsFromDatabaseSpecification(
-              databasePath,
-              graph,
+            editorStore.explorerTreeState.buildDatabaseModels(
+              database,
+              editorStore.isInViewerMode,
             );
           }
         }
@@ -863,7 +860,7 @@ const ExplorerContextMenu = observer(
         {isRelationalDatabase(node.packageableElement) && (
           <>
             <MenuContentItem onClick={generateModelsFromDatabaseSpecification}>
-              Generate Models
+              Build Models
             </MenuContentItem>
             <MenuContentDivider />
           </>
@@ -1157,7 +1154,6 @@ const ExplorerTrees = observer(() => {
     getTreeChildNodes(editorStore, node, dependencyTreeData, true);
   const showPackageTrees =
     treeData.nodes.size || graph.dependencyManager.hasDependencies;
-
   return (
     <ContextMenu
       className="explorer__content"
@@ -1191,6 +1187,14 @@ const ExplorerTrees = observer(() => {
                   isReadOnly={false}
                 />
               )}
+              {editorStore.explorerTreeState.databaseModelBuilderState && (
+                <DatabaseModelBuilder
+                  databaseModelBuilderState={
+                    editorStore.explorerTreeState.databaseModelBuilderState
+                  }
+                  isReadOnly={false}
+                />
+              )}
               {editorStore.projectConfigurationEditorState
                 .projectConfiguration && <ProjectConfig />}
               {/* SYSTEM TREE */}

package/src/stores/editor/ExplorerTreeState.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { action, observable, makeObservable, flow, flowResult } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 import type { EditorStore } from './EditorStore.js';
 import {
   LogEvent,
@@ -23,8 +23,6 @@ import {
   UnsupportedOperationError,
   guaranteeNonNullable,
   ActionState,
-  type GeneratorFn,
-  assertErrorThrown,
 } from '@finos/legend-shared';
 import {
   getDependenciesPackableElementTreeData,
@@ -51,12 +49,11 @@ import {
   isDependencyElement,
   type Class,
   type RelationalDatabaseConnection,
-  type PureModel,
+  type Database,
 } from '@finos/legend-graph';
 import { APPLICATION_EVENT } from '@finos/legend-application';
 import { DatabaseBuilderWizardState } from './editor-state/element-editor-state/connection/DatabaseBuilderWizardState.js';
-import type { Entity } from '@finos/legend-storage';
-import { EntityChangeType, type EntityChange } from '@finos/legend-server-sdlc';
+import { DatabaseModelBuilderState } from './editor-state/element-editor-state/connection/DatabaseModelBuilderState.js';
 
 export enum ExplorerTreeRootPackageLabel {
   FILE_GENERATION = 'generated-files',
@@ -81,6 +78,7 @@ export class ExplorerTreeState {
   elementToRename?: PackageableElement | undefined;
   classToGenerateSampleData?: Class | undefined;
   databaseBuilderState: DatabaseBuilderWizardState | undefined;
+  databaseModelBuilderState: DatabaseModelBuilderState | undefined;
 
   constructor(editorStore: EditorStore) {
     makeObservable(this, {
@@ -94,6 +92,7 @@ export class ExplorerTreeState {
       elementToRename: observable,
       classToGenerateSampleData: observable,
       databaseBuilderState: observable,
+      databaseModelBuilderState: observable,
       setTreeData: action,
       setGenerationTreeData: action,
       setSystemTreeData: action,
@@ -106,13 +105,13 @@ export class ExplorerTreeState {
       build: action,
       buildImmutableModelTrees: action,
       buildTreeInTextMode: action,
+      buildDatabaseModels: action,
       openExplorerTreeNodes: action,
       reprocess: action,
       buildDatabase: action,
       setDatabaseBuilderState: action,
       onTreeNodeSelect: action,
       openNode: action,
-      generateModelsFromDatabaseSpecification: flow,
     });
 
     this.editorStore = editorStore;
@@ -194,49 +193,19 @@ export class ExplorerTreeState {
     dbBuilderState.setShowModal(true);
     this.setDatabaseBuilderState(dbBuilderState);
   }
-
-  *generateModelsFromDatabaseSpecification(
-    databasePath: string,
-    graph: PureModel,
-  ): GeneratorFn<void> {
-    try {
-      const entities =
-        (yield this.editorStore.graphManagerState.graphManager.generateModelsFromDatabaseSpecification(
-          databasePath,
-          graph,
-        )) as Entity[];
-      const newEntities: EntityChange[] = [];
-      for (const entity of entities) {
-        let entityChangeType: EntityChangeType;
-        if (graph.getNullableElement(entity.path) === undefined) {
-          entityChangeType = EntityChangeType.CREATE;
-        } else {
-          entityChangeType = EntityChangeType.MODIFY;
-        }
-        newEntities.push({
-          type: entityChangeType,
-          entityPath: entity.path,
-          content: entity.content,
-        });
-      }
-      yield flowResult(
-        this.editorStore.graphState.loadEntityChangesToGraph(
-          newEntities,
-          undefined,
-        ),
-      );
-      this.editorStore.applicationStore.notificationService.notifySuccess(
-        'Generated models successfully!',
-      );
-    } catch (error) {
-      assertErrorThrown(error);
-      this.editorStore.applicationStore.logService.error(
-        LogEvent.create(LEGEND_STUDIO_APP_EVENT.GENERATION_FAILURE),
-        error,
-      );
-      this.editorStore.applicationStore.notificationService.notifyError(error);
-      throw error;
-    }
+  setDatabaseModelBuilderState(
+    val: DatabaseModelBuilderState | undefined,
+  ): void {
+    this.databaseModelBuilderState = val;
+  }
+  buildDatabaseModels(val: Database, isReadOnly: boolean): void {
+    const dbBuilderState = new DatabaseModelBuilderState(
+      this.editorStore,
+      val,
+      isReadOnly,
+    );
+    dbBuilderState.setShowModal(true);
+    this.setDatabaseModelBuilderState(dbBuilderState);
   }
 
   setSelectedNode(node: PackageTreeNodeData | undefined): void {