@finos/legend-application-studio 28.9.0 → 28.10.1

package/src/components/editor/side-bar/end-to-end-workflow/EndToEndWorkflows.tsx

@@ -0,0 +1,102 @@
+/**
+ * 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 {
+  PanelContent,
+  PURE_ConnectionIcon,
+  PURE_UnknownElementTypeIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { type GlobalEndToEndWorkflowState } from '../../../../stores/editor/sidebar-state/end-to-end-workflow/GlobalEndToEndFlowState.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
+import { END_TO_END_WORKFLOWS } from '../../../../stores/editor/editor-state/end-to-end-workflow-state/EndToEndWorkflowEditorState.js';
+import { prettyCONSTName } from '@finos/legend-shared';
+
+export const getWorkflowIcon = (currentFlow: string): React.ReactNode => {
+  if (currentFlow === END_TO_END_WORKFLOWS.CREATE_QUERY_FROM_CONNECTION) {
+    return (
+      <div
+        title="Create Query From Connection"
+        className="icon icon--connection color--connection"
+      >
+        <PURE_ConnectionIcon />
+      </div>
+    );
+  } else {
+    return (
+      <div title="Query From Workflow" className="icon">
+        <PURE_UnknownElementTypeIcon />
+      </div>
+    );
+  }
+};
+
+export const EndToEndWorkflow = observer(
+  (props: { globalEndToEndWorkflowState: GlobalEndToEndWorkflowState }) => {
+    const { globalEndToEndWorkflowState } = props;
+
+    const openWorkflow = (
+      event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+      flow: string,
+    ): void => {
+      event.stopPropagation();
+      event.preventDefault();
+      globalEndToEndWorkflowState.visitWorkflow(flow);
+    };
+
+    const endToEndWorkflow = (): React.ReactNode => (
+      <>
+        {Object.values(END_TO_END_WORKFLOWS).map((flow) => (
+          <div className="side-bar__panel__item" key={flow}>
+            <div
+              className="end-to-end-workflow__container"
+              onClick={(event) => {
+                openWorkflow(event, flow);
+              }}
+            >
+              <div className="end-to-end-workflow__container__icon">
+                {getWorkflowIcon(flow)}
+              </div>
+              <div className="end-to-end-workflow__container__name">
+                {prettyCONSTName(flow)}
+              </div>
+            </div>
+          </div>
+        ))}
+      </>
+    );
+
+    return (
+      <div
+        data-testid={LEGEND_STUDIO_TEST_ID.END_TO_END_WORKFLOW}
+        className="panel"
+      >
+        <div className="panel__header side-bar__header">
+          <div className="panel__header__title">
+            <div className="panel__header__title__content side-bar__header__title__content">
+              Guided End to End Workflows
+            </div>
+          </div>
+        </div>
+        <div className="panel__content side-bar__content">
+          <div className="panel side-bar__panel">
+            <PanelContent>{endToEndWorkflow()}</PanelContent>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/stores/ShowcaseManagerState.ts

@@ -39,6 +39,7 @@ import {
 } from '@finos/legend-application';
 import type { TreeData, TreeNodeData } from '@finos/legend-art';
 import { DIRECTORY_PATH_DELIMITER } from '@finos/legend-graph';
+import { SHOWCASE_MANAGER_VIRTUAL_ASSISTANT_TAB_KEY } from '../components/extensions/Core_LegendStudioApplicationPlugin.js';
 
 export enum SHOWCASE_MANAGER_VIEW {
   EXPLORER = 'EXPLORER',
@@ -307,7 +308,9 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
     this.initState.inProgress();
 
     try {
-      this.showcases = (yield this.client.getShowcases()) as ShowcaseMetadata[];
+      this.showcases = (
+        (yield this.client.getShowcases()) as ShowcaseMetadata[]
+      ).filter((showcase) => !showcase.development);
       this.explorerTreeData = buildShowcasesExplorerTreeData(this.showcases);
       // expand all the root nodes by default
       this.explorerTreeData.rootIds.forEach((rootId) => {
@@ -372,3 +375,18 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
     }
   }
 }
+
+export const openShowcaseManager = (
+  applicationStore: LegendStudioApplicationStore,
+): void => {
+  const showcaseManagerState =
+    ShowcaseManagerState.retrieveNullableState(applicationStore);
+  if (showcaseManagerState?.isEnabled) {
+    applicationStore.assistantService.setIsHidden(false);
+    applicationStore.assistantService.setIsOpen(true);
+    applicationStore.assistantService.setIsPanelMaximized(true);
+    applicationStore.assistantService.setSelectedTab(
+      SHOWCASE_MANAGER_VIRTUAL_ASSISTANT_TAB_KEY,
+    );
+  }
+};

package/src/stores/editor/EditorConfig.ts

@@ -37,6 +37,9 @@ export enum ACTIVITY_MODE {
   WORKFLOW_MANAGER = 'WORKFLOW_MANAGER',
   TEST_RUNNER = 'TEST_RUNNER',
   REGISTER_SERVICES = 'REGISTER_SERVICES',
+}
+
+export enum USER_JOURNEYS {
   END_TO_END_WORKFLOWS = 'END_TO_END_WORKFLOWS',
 }
 

package/src/stores/editor/EditorStore.ts

@@ -108,6 +108,8 @@ import { GraphEditGrammarModeState } from './GraphEditGrammarModeState.js';
 import { GlobalBulkServiceRegistrationState } from './sidebar-state/BulkServiceRegistrationState.js';
 import { SQLPlaygroundPanelState } from './panel-group/SQLPlaygroundPanelState.js';
 import type { QuickInputState } from './QuickInputState.js';
+import { GlobalEndToEndWorkflowState } from './sidebar-state/end-to-end-workflow/GlobalEndToEndFlowState.js';
+import { openShowcaseManager } from '../ShowcaseManagerState.js';
 
 export abstract class EditorExtensionState {
   /**
@@ -162,6 +164,7 @@ export class EditorStore implements CommandRegistrar {
   localChangesState: LocalChangesState;
   conflictResolutionState: WorkspaceUpdateConflictResolutionState;
   globalBulkServiceRegistrationState: GlobalBulkServiceRegistrationState;
+  globalEndToEndWorkflowState: GlobalEndToEndWorkflowState;
   devToolState: DevToolPanelState;
   sqlPlaygroundState: SQLPlaygroundPanelState;
 
@@ -210,6 +213,7 @@ export class EditorStore implements CommandRegistrar {
       quickInputState: observable,
 
       isInViewerMode: computed,
+      disableGraphEditing: computed,
       isInConflictResolutionMode: computed,
       isInitialized: computed,
 
@@ -257,6 +261,7 @@ export class EditorStore implements CommandRegistrar {
       this,
       this.sdlcState,
     );
+    this.globalEndToEndWorkflowState = new GlobalEndToEndWorkflowState(this);
     this.workspaceWorkflowManagerState = new WorkspaceWorkflowManagerState(
       this,
       this.sdlcState,
@@ -314,6 +319,10 @@ export class EditorStore implements CommandRegistrar {
     return this.mode === EDITOR_MODE.VIEWER;
   }
 
+  get disableGraphEditing(): boolean {
+    return this.isInViewerMode && this.editorMode.disableEditing;
+  }
+
   get isInConflictResolutionMode(): boolean {
     return this.mode === EDITOR_MODE.CONFLICT_RESOLUTION;
   }
@@ -413,6 +422,18 @@ export class EditorStore implements CommandRegistrar {
         );
       },
     });
+    this.applicationStore.commandService.registerCommand({
+      key: LEGEND_STUDIO_COMMAND_KEY.OPEN_SHOWCASES,
+      trigger: this.createEditorCommandTrigger(
+        () =>
+          this.isInitialized &&
+          (!this.isInConflictResolutionMode ||
+            this.conflictResolutionState.hasResolvedAllConflicts),
+      ),
+      action: () => {
+        openShowcaseManager(this.applicationStore);
+      },
+    });
     this.applicationStore.commandService.registerCommand({
       key: LEGEND_STUDIO_COMMAND_KEY.TOGGLE_MODEL_LOADER,
       trigger: this.createEditorCommandTrigger(() => !this.isInViewerMode),

package/src/stores/editor/ExplorerTreeState.ts

@@ -203,6 +203,7 @@ export class ExplorerTreeState {
       this.editorStore,
       val,
       isReadOnly,
+      this.editorStore.graphManagerState.graph,
     );
     dbBuilderState.setShowModal(true);
     this.setDatabaseModelBuilderState(dbBuilderState);

package/src/stores/editor/GraphEditGrammarModeState.ts

@@ -20,13 +20,13 @@ import {
 } from '@finos/legend-application';
 import {
   type PackageableElement,
-  GRAPH_MANAGER_EVENT,
+  type SourceInformation,
   type TextCompilationResult,
+  type GraphManagerOperationReport,
+  GRAPH_MANAGER_EVENT,
   EngineError,
   GraphBuilderError,
-  type GraphManagerOperationReport,
   reportGraphAnalytics,
-  type SourceInformation,
 } from '@finos/legend-graph';
 import {
   type GeneratorFn,

package/src/stores/editor/NewElementState.ts

@@ -317,7 +317,7 @@ export class NewFlatDataConnectionDriver extends NewConnectionValueDriver<FlatDa
   }
 }
 
-const DEFAULT_H2_SQL =
+export const DEFAULT_H2_SQL =
   '-- loads sample data for getting started. See https://github.com/pthom/northwind_psql for more info\n call loadNorthwindData()';
 export class NewRelationalDatabaseConnectionDriver extends NewConnectionValueDriver<RelationalDatabaseConnection> {
   constructor(editorStore: EditorStore) {

package/src/stores/editor/editor-state/element-editor-state/ElementEditorState.ts

@@ -121,7 +121,8 @@ export abstract class ElementEditorState extends EditorState {
     });
 
     this.element = element;
-    this.isReadOnly = isElementReadOnly(element) || editorStore.isInViewerMode;
+    this.isReadOnly =
+      isElementReadOnly(element) || editorStore.disableGraphEditing;
   }
 
   get label(): string {

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

@@ -72,6 +72,9 @@ import {
   EngineRuntime,
   StoreConnections,
   IdentifiedConnection,
+  getOrCreateGraphPackage,
+  extractElementNameFromPath,
+  extractPackagePathFromPath,
 } from '@finos/legend-graph';
 import { GraphEditFormModeState } from '../../../GraphEditFormModeState.js';
 import { connection_setStore } from '../../../../graph-modifier/DSL_Mapping_GraphModifierHelper.js';
@@ -301,13 +304,14 @@ export interface DatabaseExplorerTreeData
   database: Database;
 }
 
-const DEFAULT_DATABASE_PATH = 'store::MyDatabase';
+export const DEFAULT_DATABASE_PATH = 'store::MyDatabase';
 
 export class DatabaseSchemaExplorerState {
   readonly editorStore: EditorStore;
   readonly connection: RelationalDatabaseConnection;
-  readonly database: Database;
+  database: Database;
   targetDatabasePath: string;
+  makeTargetDatabasePathEditable?: boolean;
 
   isGeneratingDatabase = false;
   isUpdatingDatabase = false;
@@ -322,20 +326,24 @@ export class DatabaseSchemaExplorerState {
     makeObservable(this, {
       isGeneratingDatabase: observable,
       isUpdatingDatabase: observable,
+      database: observable,
       treeData: observable,
       targetDatabasePath: observable,
       previewer: observable,
       previewDataState: observable,
+      makeTargetDatabasePathEditable: observable,
       isCreatingNewDatabase: computed,
       resolveDatabasePackageAndName: computed,
       setTreeData: action,
       setTargetDatabasePath: action,
+      setMakeTargetDatabasePathEditable: action,
       onNodeSelect: flow,
       fetchDatabaseMetadata: flow,
       fetchSchemaMetadata: flow,
       fetchTableMetadata: flow,
       generateDatabase: flow,
       updateDatabase: flow,
+      updateDatabaseAndGraph: flow,
       previewData: flow,
     });
 
@@ -349,8 +357,12 @@ export class DatabaseSchemaExplorerState {
     return isStubbed_PackageableElement(this.connection.store.value);
   }
 
+  setMakeTargetDatabasePathEditable(val: boolean): void {
+    this.makeTargetDatabasePathEditable = val;
+  }
+
   get resolveDatabasePackageAndName(): [string, string] {
-    if (!this.isCreatingNewDatabase) {
+    if (!this.isCreatingNewDatabase && !this.makeTargetDatabasePathEditable) {
       return [
         guaranteeNonNullable(this.database.package).path,
         this.database.name,
@@ -799,61 +811,77 @@ export class DatabaseSchemaExplorerState {
     }
   }
 
-  *updateDatabase(): GeneratorFn<void> {
+  // this method just updates database
+  *updateDatabase(): GeneratorFn<Database> {
+    this.isUpdatingDatabase = true;
+    const graph = this.editorStore.graphManagerState.createNewGraph();
+    (yield this.editorStore.graphManagerState.graphManager.buildGraph(
+      graph,
+      [(yield flowResult(this.generateDatabase())) as Entity],
+      ActionState.create(),
+    )) as Entity[];
+    const database = getNonNullableEntry(
+      graph.ownDatabases,
+      0,
+      'Expected one database to be generated from input',
+    );
+    // remove undefined schemas
+    const schemas = Array.from(
+      guaranteeNonNullable(this.treeData).nodes.values(),
+    )
+      .map((schemaNode) => {
+        if (schemaNode instanceof DatabaseSchemaExplorerTreeSchemaNodeData) {
+          return schemaNode.schema;
+        }
+        return undefined;
+      })
+      .filter(isNonNullable);
+
+    // update this.database packge and name
+    this.database.package = getOrCreateGraphPackage(
+      graph,
+      extractPackagePathFromPath(this.targetDatabasePath),
+      undefined,
+    );
+    this.database.name = extractElementNameFromPath(this.targetDatabasePath);
+    this.database.schemas = this.database.schemas.filter((schema) => {
+      if (
+        schemas.find((item) => item.name === schema.name) &&
+        !database.schemas.find((s) => s.name === schema.name)
+      ) {
+        return false;
+      }
+      return true;
+    });
+    // update existing schemas
+    database.schemas.forEach((schema) => {
+      (schema as Writable<Schema>)._OWNER = this.database;
+      const currentSchemaIndex = this.database.schemas.findIndex(
+        (item) => item.name === schema.name,
+      );
+      if (currentSchemaIndex !== -1) {
+        this.database.schemas[currentSchemaIndex] = schema;
+      } else {
+        this.database.schemas.push(schema);
+      }
+    });
+    this.isUpdatingDatabase = false;
+    return database;
+  }
+
+  // this method updates database and add database to the graph
+  *updateDatabaseAndGraph(): GeneratorFn<void> {
     if (!this.treeData) {
       return;
     }
-
     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,
-        [(yield flowResult(this.generateDatabase())) as Entity],
-        ActionState.create(),
-      )) as Entity[];
-      const database = getNonNullableEntry(
-        graph.ownDatabases,
-        0,
-        'Expected one database to be generated from input',
-      );
-
-      // remove undefined schemas
-      const schemas = Array.from(this.treeData.nodes.values())
-        .map((schemaNode) => {
-          if (schemaNode instanceof DatabaseSchemaExplorerTreeSchemaNodeData) {
-            return schemaNode.schema;
-          }
-          return undefined;
-        })
-        .filter(isNonNullable);
-      this.database.schemas = this.database.schemas.filter((schema) => {
-        if (
-          schemas.find((item) => item.name === schema.name) &&
-          !database.schemas.find((s) => s.name === schema.name)
-        ) {
-          return false;
-        }
-        return true;
-      });
-
-      // update existing schemas
-      database.schemas.forEach((schema) => {
-        (schema as Writable<Schema>)._OWNER = this.database;
-        const currentSchemaIndex = this.database.schemas.findIndex(
-          (item) => item.name === schema.name,
-        );
-        if (currentSchemaIndex !== -1) {
-          this.database.schemas[currentSchemaIndex] = schema;
-        } else {
-          this.database.schemas.push(schema);
-        }
-      });
+      this.isUpdatingDatabase = true;
+      const database = (yield flowResult(this.updateDatabase())) as Database;
       if (createDatabase) {
         connection_setStore(
           this.connection,

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

@@ -95,8 +95,7 @@ export class DatabaseBuilderWizardState {
     if (!this.schemaExplorerState.treeData) {
       return;
     }
-
-    yield flowResult(this.schemaExplorerState.updateDatabase());
+    yield flowResult(this.schemaExplorerState.updateDatabaseAndGraph());
     this.setShowModal(false);
   }
 }

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

@@ -25,7 +25,11 @@ 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 Database, DEFAULT_GENERATION_PACKAGE } from '@finos/legend-graph';
+import {
+  type Database,
+  type PureModel,
+  DEFAULT_GENERATION_PACKAGE,
+} from '@finos/legend-graph';
 import { EntityChangeType, type EntityChange } from '@finos/legend-server-sdlc';
 
 export class DatabaseModelBuilderState {
@@ -39,16 +43,19 @@ export class DatabaseModelBuilderState {
   generatedGrammarCode = '';
   entities: Entity[] | undefined;
   targetPackage: string;
+  graph: PureModel;
 
   constructor(
     editorStore: EditorStore,
     database: Database,
     isReadOnly: boolean,
+    graph: PureModel,
   ) {
     makeObservable(this, {
       showModal: observable,
       generatedGrammarCode: observable,
       generatingModelState: observable,
+      graph: observable,
       saveModelState: observable,
       targetPackage: observable,
       close: action,
@@ -63,6 +70,7 @@ export class DatabaseModelBuilderState {
     this.database = database;
     this.isReadOnly = isReadOnly;
     this.targetPackage = database.package?.path ?? DEFAULT_GENERATION_PACKAGE;
+    this.graph = graph;
   }
 
   setShowModal(val: boolean): void {
@@ -88,13 +96,13 @@ export class DatabaseModelBuilderState {
 
   *previewDatabaseModels(): GeneratorFn<void> {
     try {
-      this.generatingModelState.isInProgress;
+      this.generatingModelState.inProgress();
       this.entities = [];
       const entities =
         (yield this.editorStore.graphManagerState.graphManager.generateModelsFromDatabaseSpecification(
           this.database.path,
           this.targetPackage,
-          this.editorStore.graphManagerState.graph,
+          this.graph,
         )) as Entity[];
       this.setEntities(entities);
       this.setDatabaseGrammarCode(
@@ -122,11 +130,7 @@ export class DatabaseModelBuilderState {
       const newEntities: EntityChange[] = [];
       for (const entity of entities) {
         let entityChangeType: EntityChangeType;
-        if (
-          this.editorStore.graphManagerState.graph.getNullableElement(
-            entity.path,
-          ) === undefined
-        ) {
+        if (this.graph.getNullableElement(entity.path) === undefined) {
           entityChangeType = EntityChangeType.CREATE;
         } else {
           entityChangeType = EntityChangeType.MODIFY;

package/src/stores/editor/editor-state/end-to-end-workflow-state/EndToEndWorkflowEditorState.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { EditorState } from '../../editor-state/EditorState.js';
+
+export enum END_TO_END_WORKFLOWS {
+  CREATE_QUERY_FROM_CONNECTION = 'CREATE_QUERY_FROM_CONNECTION',
+}
+
+export abstract class EndToEndWorkflowEditorState extends EditorState {}