@finos/legend-application-studio 28.1.2 → 28.1.3

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/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 {

package/src/stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderState.ts

@@ -28,8 +28,17 @@ import {
   ActionState,
   getNonNullableEntry,
   guaranteeType,
+  assertNonEmptyString,
+  assertTrue,
 } from '@finos/legend-shared';
-import { observable, action, makeObservable, flow, flowResult } from 'mobx';
+import {
+  observable,
+  action,
+  makeObservable,
+  flow,
+  flowResult,
+  computed,
+} from 'mobx';
 import { LEGEND_STUDIO_APP_EVENT } from '../../../../../__lib__/LegendStudioEvent.js';
 import type { EditorStore } from '../../../EditorStore.js';
 import {
@@ -45,8 +54,12 @@ import {
   getSchema,
   getNullableSchema,
   getNullableTable,
+  isStubbed_PackageableElement,
+  isValidFullPath,
+  PackageableElementExplicitReference,
 } from '@finos/legend-graph';
 import { GraphEditFormModeState } from '../../../GraphEditFormModeState.js';
+import { connection_setStore } from '../../../../graph-modifier/DSL_Mapping_GraphModifierHelper.js';
 
 export abstract class DatabaseSchemaExplorerTreeNodeData
   implements TreeNodeData
@@ -114,10 +127,13 @@ export interface DatabaseExplorerTreeData
   database: Database;
 }
 
+const DEFAULT_DATABASE_PATH = 'store::MyDatabase';
+
 export class DatabaseSchemaExplorerState {
   readonly editorStore: EditorStore;
   readonly connection: RelationalDatabaseConnection;
   readonly database: Database;
+  targetDatabasePath: string;
 
   isGeneratingDatabase = false;
   isUpdatingDatabase = false;
@@ -131,7 +147,11 @@ export class DatabaseSchemaExplorerState {
       isGeneratingDatabase: observable,
       isUpdatingDatabase: observable,
       treeData: observable,
+      targetDatabasePath: observable,
+      isCreatingNewDatabase: computed,
+      resolveDatabasePackageAndName: computed,
       setTreeData: action,
+      setTargetDatabasePath: action,
       onNodeSelect: flow,
       fetchDatabaseMetadata: flow,
       fetchSchemaMetadata: flow,
@@ -143,6 +163,33 @@ export class DatabaseSchemaExplorerState {
     this.connection = connection;
     this.database = guaranteeType(connection.store.value, Database);
     this.editorStore = editorStore;
+    this.targetDatabasePath = DEFAULT_DATABASE_PATH;
+  }
+
+  get isCreatingNewDatabase(): boolean {
+    return isStubbed_PackageableElement(this.connection.store.value);
+  }
+
+  get resolveDatabasePackageAndName(): [string, string] {
+    if (!this.isCreatingNewDatabase) {
+      return [
+        guaranteeNonNullable(this.database.package).path,
+        this.database.name,
+      ];
+    }
+    assertNonEmptyString(this.targetDatabasePath, 'Must specify database path');
+    assertTrue(
+      isValidFullPath(this.targetDatabasePath),
+      'Invalid database path',
+    );
+    return resolvePackagePathAndElementName(
+      this.targetDatabasePath,
+      this.targetDatabasePath,
+    );
+  }
+
+  setTargetDatabasePath(val: string): void {
+    this.targetDatabasePath = val;
   }
 
   setTreeData(builderTreeData?: DatabaseExplorerTreeData): void {
@@ -208,9 +255,10 @@ export class DatabaseSchemaExplorerState {
     try {
       this.isGeneratingDatabase = true;
       const databaseBuilderInput = new DatabaseBuilderInput(this.connection);
+      const [packagePath, name] = this.resolveDatabasePackageAndName;
       databaseBuilderInput.targetDatabase = new TargetDatabase(
-        guaranteeNonNullable(this.database.package).path,
-        this.database.name,
+        packagePath,
+        name,
       );
       databaseBuilderInput.config.maxTables = undefined;
       databaseBuilderInput.config.enrichTables = false;
@@ -266,9 +314,10 @@ export class DatabaseSchemaExplorerState {
 
       const schema = schemaNode.schema;
       const databaseBuilderInput = new DatabaseBuilderInput(this.connection);
+      const [packagePath, name] = this.resolveDatabasePackageAndName;
       databaseBuilderInput.targetDatabase = new TargetDatabase(
-        guaranteeNonNullable(this.database.package).path,
-        this.database.name,
+        packagePath,
+        name,
       );
       databaseBuilderInput.config.maxTables = undefined;
       databaseBuilderInput.config.enrichTables = true;
@@ -328,9 +377,7 @@ export class DatabaseSchemaExplorerState {
       this.isGeneratingDatabase = true;
 
       const databaseBuilderInput = new DatabaseBuilderInput(this.connection);
-      const [packagePath, name] = resolvePackagePathAndElementName(
-        this.database.path,
-      );
+      const [packagePath, name] = this.resolveDatabasePackageAndName;
       databaseBuilderInput.targetDatabase = new TargetDatabase(
         packagePath,
         name,
@@ -414,9 +461,10 @@ export class DatabaseSchemaExplorerState {
 
       const treeData = guaranteeNonNullable(this.treeData);
       const databaseBuilderInput = new DatabaseBuilderInput(this.connection);
+      const [packagePath, name] = this.resolveDatabasePackageAndName;
       databaseBuilderInput.targetDatabase = new TargetDatabase(
-        guaranteeNonNullable(this.database.package).path,
-        this.database.name,
+        packagePath,
+        name,
       );
       const config = databaseBuilderInput.config;
       config.maxTables = undefined;
@@ -472,7 +520,11 @@ export class DatabaseSchemaExplorerState {
 
     try {
       this.isUpdatingDatabase = true;
-
+      const createDatabase =
+        this.isCreatingNewDatabase &&
+        !this.editorStore.graphManagerState.graph.databases.includes(
+          this.database,
+        );
       const graph = this.editorStore.graphManagerState.createNewGraph();
       (yield this.editorStore.graphManagerState.graphManager.buildGraph(
         graph,
@@ -516,7 +568,23 @@ export class DatabaseSchemaExplorerState {
           this.database.schemas.push(schema);
         }
       });
-
+      if (createDatabase) {
+        connection_setStore(
+          this.connection,
+          PackageableElementExplicitReference.create(database),
+        );
+        const packagePath = guaranteeNonNullable(
+          database.package?.name,
+          'Database package is missing',
+        );
+        yield flowResult(
+          this.editorStore.graphEditorMode.addElement(
+            database,
+            packagePath,
+            false,
+          ),
+        );
+      }
       this.editorStore.applicationStore.notificationService.notifySuccess(
         `Database successfully updated`,
       );

package/src/stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderWizardState.ts

@@ -23,8 +23,8 @@ import {
 import { observable, action, makeObservable, flow, flowResult } from 'mobx';
 import { LEGEND_STUDIO_APP_EVENT } from '../../../../../__lib__/LegendStudioEvent.js';
 import type { EditorStore } from '../../../EditorStore.js';
-import { type RelationalDatabaseConnection } from '@finos/legend-graph';
 import { DatabaseSchemaExplorerState } from './DatabaseBuilderState.js';
+import type { RelationalDatabaseConnection } from '@finos/legend-graph';
 
 export class DatabaseBuilderWizardState {
   readonly editorStore: EditorStore;
@@ -70,7 +70,6 @@ export class DatabaseBuilderWizardState {
     if (!this.schemaExplorerState.treeData) {
       return;
     }
-
     try {
       this.setDatabaseGrammarCode(
         (yield this.editorStore.graphManagerState.graphManager.entitiesToPureCode(