@finos/legend-application-studio 28.5.2 → 28.5.4

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

@@ -111,6 +111,7 @@ import {
   runtime_deleteIdentifiedConnection,
 } from '../../../stores/graph-modifier/DSL_Mapping_GraphModifierHelper.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../__lib__/LegendStudioApplicationNavigationContext.js';
+import { CUSTOM_LABEL } from '../../../stores/editor/NewElementState.js';
 
 const getConnectionTooltipText = (
   connection: Connection,
@@ -379,7 +380,7 @@ const RuntimeExplorer = observer(
     const runtimeName =
       runtime instanceof RuntimePointer
         ? runtime.packageableRuntime.value.name
-        : '(custom)';
+        : CUSTOM_LABEL;
     // explorer tree data
     const treeData = runtimeEditorState.explorerTreeData;
     const onNodeSelect = (node: RuntimeExplorerTreeNodeData): void =>
@@ -494,7 +495,7 @@ const IdentifiedConnectionEditor = observer(
       <div className="runtime-connection-editor__connection-option--custom">
         <CogIcon />
         <div className="runtime-connection-editor__connection-option--custom__label">
-          (custom)
+          {CUSTOM_LABEL}
         </div>
       </div>
     );

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

@@ -147,8 +147,8 @@ export const DatabaseBuilderWizard = observer(
                 <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="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>
@@ -165,7 +165,7 @@ export const DatabaseBuilderWizard = observer(
                           error={elementAlreadyExistsMessage}
                         />
                       </div>
-                      <div className="database-builder__modeller__preview">
+                      <div className="database-builder__modeler__preview">
                         {databaseBuilderState.databaseGrammarCode && (
                           <CodeEditor
                             language={CODE_EDITOR_LANGUAGE.PURE}

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

@@ -19,6 +19,7 @@ import type { DatabaseModelBuilderState } from '../../../../stores/editor/editor
 import {
   BlankPanelContent,
   Dialog,
+  InputWithInlineValidation,
   Modal,
   ModalBody,
   ModalFooter,
@@ -32,6 +33,7 @@ import {
   PanelLoadingIndicator,
   ResizablePanel,
   ResizablePanelGroup,
+  ResizablePanelSplitter,
   TimesIcon,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
@@ -40,12 +42,13 @@ import {
   useConditionedApplicationNavigationContext,
 } from '@finos/legend-application';
 import { flowResult } from 'mobx';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
-import { noop } from '@finos/legend-shared';
+import { debounce, noop } from '@finos/legend-shared';
+import { isValidPath } from '@finos/legend-graph';
 
 export const DatabaseModelBuilder = observer(
   (props: {
@@ -55,9 +58,19 @@ export const DatabaseModelBuilder = observer(
     const { databaseModelBuilderState, isReadOnly } = props;
 
     const applicationStore = useApplicationStore();
-    const preview = applicationStore.guardUnhandledError(() =>
-      flowResult(databaseModelBuilderState.previewDatabaseModels()),
+    const debouncedRegenerate = useMemo(
+      () =>
+        debounce(
+          () => flowResult(databaseModelBuilderState.previewDatabaseModels()),
+          500,
+        ),
+      [databaseModelBuilderState],
     );
+    const preview = (): void => {
+      debouncedRegenerate.cancel();
+      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
+    };
+
     const saveModels = applicationStore.guardUnhandledError(() =>
       flowResult(databaseModelBuilderState.saveModels()),
     );
@@ -65,6 +78,19 @@ 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;
@@ -105,14 +131,38 @@ export const DatabaseModelBuilder = observer(
             </ModalHeaderActions>
           </ModalHeader>
           <ModalBody className="database-builder__content">
-            <PanelLoadingIndicator isLoading={isExecutingAction} />
             <ResizablePanelGroup orientation="vertical">
+              <ResizablePanel size={450}>
+                <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>
+                  </PanelContent>
+                </div>
+              </ResizablePanel>
+              <ResizablePanelSplitter />
               <ResizablePanel>
                 <Panel className="database-builder__model">
                   <PanelHeader title="database model" />
                   <PanelContent>
-                    <div className="database-builder__modeller">
-                      <div className="database-builder__modeller__preview">
+                    <PanelLoadingIndicator isLoading={isExecutingAction} />
+                    <div className="database-builder__modeler">
+                      <div className="database-builder__modeler__preview">
                         {databaseModelBuilderState.generatedGrammarCode && (
                           <CodeEditor
                             language={CODE_EDITOR_LANGUAGE.PURE}

package/src/components/editor/editor-group/service-editor/ServiceExecutionEditor.tsx

@@ -79,6 +79,7 @@ import {
   buildElementOption,
   type PackageableElementOption,
 } from '@finos/legend-lego/graph-editor';
+import { CUSTOM_LABEL } from '../../../../stores/editor/NewElementState.js';
 
 const PureExecutionContextConfigurationEditor = observer(
   (props: {
@@ -132,7 +133,7 @@ const PureExecutionContextConfigurationEditor = observer(
       <div className="service-execution-editor__configuration__runtime-option--custom">
         <CogIcon />
         <div className="service-execution-editor__configuration__runtime-option--custom__label">
-          (custom)
+          {CUSTOM_LABEL}
         </div>
       </div>
     );

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

@@ -26,10 +26,15 @@ import {
   NewDataElementDriver,
   NewServiceDriver,
   CONNECTION_TYPE,
+  type RuntimeOption,
 } from '../../../stores/editor/NewElementState.js';
 import { Dialog, compareLabelFn, CustomSelectorInput } from '@finos/legend-art';
 import type { EditorStore } from '../../../stores/editor/EditorStore.js';
-import { prettyCONSTName, toTitleCase } from '@finos/legend-shared';
+import {
+  guaranteeNonNullable,
+  prettyCONSTName,
+  toTitleCase,
+} from '@finos/legend-shared';
 import type { DSL_LegendStudioApplicationPlugin_Extension } from '../../../stores/LegendStudioApplicationPlugin.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import {
@@ -347,10 +352,16 @@ const NewConnectionDriverEditor = observer(() => {
 
 const NewServiceDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const runtimeSelectorPlaceholder = 'Choose a compatible runtime...';
   const newServiceDriver =
     editorStore.newElementState.getNewElementDriver(NewServiceDriver);
+  // runtime
+  const onRuntimeChange = (val: RuntimeOption | null): void => {
+    if (val) {
+      newServiceDriver.setRuntimeOption(val);
+    }
+  };
   // mapping
-  const currentMappingOption = newServiceDriver.mappingOption;
   const mappingOptions =
     editorStore.graphManagerState.usableMappings.map(buildElementOption);
   const onMappingChange = (
@@ -361,17 +372,40 @@ const NewServiceDriverEditor = observer(() => {
     } else {
       newServiceDriver.setMappingOption(val);
     }
+    //reset runtime
+    newServiceDriver.setRuntimeOption(
+      guaranteeNonNullable(newServiceDriver.runtimeOptions[0]),
+    );
   };
+
   return (
-    <div className="explorer__new-element-modal__driver">
-      <CustomSelectorInput
-        className="explorer__new-element-modal__driver__dropdown"
-        options={mappingOptions}
-        onChange={onMappingChange}
-        value={currentMappingOption}
-        darkMode={true}
-      />
-    </div>
+    <>
+      <div className="panel__content__form__section__header__label">
+        Mapping
+      </div>
+      <div className="explorer__new-element-modal__driver">
+        <CustomSelectorInput
+          className="explorer__new-element-modal__driver__dropdown"
+          options={mappingOptions}
+          onChange={onMappingChange}
+          value={newServiceDriver.mappingOption}
+          darkMode={true}
+        />
+      </div>
+      <div className="panel__content__form__section__header__label">
+        Runtime
+      </div>
+      <div className="explorer__new-element-modal__driver">
+        <CustomSelectorInput
+          className="explorer__new-element-modal__driver__dropdown"
+          options={newServiceDriver.runtimeOptions}
+          onChange={onRuntimeChange}
+          value={newServiceDriver.runtimeOption}
+          darkMode={true}
+          placeholder={runtimeSelectorPlaceholder}
+        />
+      </div>
+    </>
   );
 });
 

package/src/stores/editor/NewElementState.ts

@@ -80,6 +80,7 @@ import {
   ConnectionPointer,
   IdentifiedConnection,
   generateIdentifiedConnectionId,
+  getMappingCompatibleRuntimes,
 } from '@finos/legend-graph';
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import {
@@ -105,6 +106,13 @@ import {
 import { EmbeddedDataType } from './editor-state/ExternalFormatState.js';
 import { createEmbeddedData } from './editor-state/element-editor-state/data/EmbeddedDataState.js';
 
+export const CUSTOM_LABEL = '(custom)';
+
+export type RuntimeOption = {
+  label: string;
+  value: PackageableRuntime | undefined;
+};
+
 export const resolvePackageAndElementName = (
   _package: Package,
   isPackageRoot: boolean,
@@ -471,23 +479,53 @@ export class NewPackageableConnectionDriver extends NewElementDriver<Packageable
 
 export class NewServiceDriver extends NewElementDriver<Service> {
   mappingOption?: PackageableElementOption<Mapping> | undefined;
+  runtimeOption: RuntimeOption;
   constructor(editorStore: EditorStore) {
     super(editorStore);
 
     makeObservable(this, {
       mappingOption: observable,
+      runtimeOption: observable,
       setMappingOption: action,
+      setRuntimeOption: action,
+      runtimeOptions: computed,
       isValid: computed,
       createElement: action,
     });
     this.mappingOption =
       editorStore.graphManagerState.usableMappings.map(buildElementOption)[0];
+    this.runtimeOption = guaranteeNonNullable(this.runtimeOptions[0]);
   }
 
   setMappingOption(val: PackageableElementOption<Mapping> | undefined): void {
     this.mappingOption = val;
   }
 
+  setRuntimeOption(val: RuntimeOption): void {
+    this.runtimeOption = val;
+  }
+
+  get compatibleMappingRuntimes(): PackageableRuntime[] {
+    return this.mappingOption?.value
+      ? getMappingCompatibleRuntimes(
+          this.mappingOption.value,
+          this.editorStore.graphManagerState.usableRuntimes,
+        )
+      : [];
+  }
+
+  get runtimeOptions(): RuntimeOption[] {
+    return [
+      ...this.compatibleMappingRuntimes.map((runtime) =>
+        buildElementOption(runtime),
+      ),
+      {
+        label: CUSTOM_LABEL,
+        value: undefined,
+      },
+    ];
+  }
+
   get isValid(): boolean {
     return Boolean(this.mappingOption);
   }
@@ -497,13 +535,9 @@ export class NewServiceDriver extends NewElementDriver<Service> {
     const _mapping = mappingOption.value;
     const mapping = PackageableElementExplicitReference.create(_mapping);
     const service = new Service(name);
-    const runtimes = this.editorStore.graphManagerState.usableRuntimes;
-    const compatibleRuntimes = runtimes.filter((runtime) =>
-      runtime.runtimeValue.mappings.map((m) => m.value).includes(_mapping),
-    );
     let runtimeValue: Runtime;
-    if (compatibleRuntimes.length) {
-      runtimeValue = (compatibleRuntimes[0] as PackageableRuntime).runtimeValue;
+    if (this.runtimeOption.value) {
+      runtimeValue = this.runtimeOption.value.runtimeValue;
     } else {
       const engineRuntime = new EngineRuntime();
       runtime_addMapping(engineRuntime, mapping);

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

@@ -219,6 +219,7 @@ export abstract class ElementEditorState extends EditorState {
               this.element,
             ),
           ],
+          { pretty: true },
         )) as string;
       this.setTextContent(grammar);
     } catch (error) {

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

@@ -75,6 +75,7 @@ import {
   runtime_deleteIdentifiedConnection,
   runtime_deleteMapping,
 } from '../../../graph-modifier/DSL_Mapping_GraphModifierHelper.js';
+import { CUSTOM_LABEL } from '../../NewElementState.js';
 
 export const getClassMappingStore = (
   setImplementation: SetImplementation,
@@ -276,7 +277,7 @@ export const getRuntimeExplorerTreeData = (
     label:
       runtime instanceof RuntimePointer
         ? runtime.packageableRuntime.value.name
-        : '(custom)',
+        : CUSTOM_LABEL,
     isOpen: true,
     childrenIds: [] as string[],
   };

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

@@ -78,6 +78,7 @@ export class DatabaseBuilderWizardState {
               this.schemaExplorerState.generateDatabase(),
             )) as Entity,
           ],
+          { pretty: true },
         )) as string,
       );
     } catch (error) {

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

@@ -28,6 +28,8 @@ import type { EditorStore } from '../../../EditorStore.js';
 import type { Database } from '@finos/legend-graph';
 import { EntityChangeType, type EntityChange } from '@finos/legend-server-sdlc';
 
+export const GENERATED = 'generated';
+
 export class DatabaseModelBuilderState {
   readonly editorStore: EditorStore;
   readonly database: Database;
@@ -38,6 +40,7 @@ export class DatabaseModelBuilderState {
   showModal = false;
   generatedGrammarCode = '';
   entities: Entity[] | undefined;
+  targetPackage: string;
 
   constructor(
     editorStore: EditorStore,
@@ -49,16 +52,19 @@ export class DatabaseModelBuilderState {
       generatedGrammarCode: observable,
       generatingModelState: observable,
       saveModelState: observable,
+      targetPackage: observable,
       close: action,
       setShowModal: action,
       setEntities: action,
       setDatabaseGrammarCode: action,
+      setTargetPackage: action,
       saveModels: flow,
       previewDatabaseModels: flow,
     });
     this.editorStore = editorStore;
     this.database = database;
     this.isReadOnly = isReadOnly;
+    this.targetPackage = database.package?.path ?? GENERATED;
   }
 
   setShowModal(val: boolean): void {
@@ -78,14 +84,18 @@ export class DatabaseModelBuilderState {
     this.editorStore.explorerTreeState.setDatabaseModelBuilderState(undefined);
   }
 
+  setTargetPackage(val: string): void {
+    this.targetPackage = val;
+  }
+
   *previewDatabaseModels(): GeneratorFn<void> {
     try {
       this.generatingModelState.isInProgress;
       this.entities = [];
-      this.setDatabaseGrammarCode('');
       const entities =
         (yield this.editorStore.graphManagerState.graphManager.generateModelsFromDatabaseSpecification(
           this.database.path,
+          this.targetPackage,
           this.editorStore.graphManagerState.graph,
         )) as Entity[];
 
@@ -93,6 +103,7 @@ export class DatabaseModelBuilderState {
       this.setDatabaseGrammarCode(
         (yield this.editorStore.graphManagerState.graphManager.entitiesToPureCode(
           entities,
+          { pretty: true },
         )) as string,
       );
     } catch (error) {

package/src/stores/editor/editor-state/element-editor-state/service/testable/ServiceTestDataState.ts

@@ -52,6 +52,7 @@ import {
   RowIdentifier,
   ColumnValuePair,
   TablePtr,
+  getAllIncludedDatabases,
 } from '@finos/legend-graph';
 import {
   type GeneratorFn,
@@ -65,6 +66,7 @@ import {
   assertType,
   assertTrue,
   uuid,
+  uniq,
 } from '@finos/legend-shared';
 import { action, flow, flowResult, makeObservable, observable } from 'mobx';
 import type { EditorStore } from '../../../../EditorStore.js';
@@ -363,18 +365,19 @@ export class ConnectionTestDataState {
   }
 
   getAvailableTables(): Table[] {
-    const runtime =
-      this.testDataState.testSuiteState.testableState.serviceEditorState
-        .executionState.serviceExecutionParameters?.runtime;
-    if (runtime instanceof RuntimePointer) {
-      const db =
-        runtime.packageableRuntime.value.runtimeValue.connections[0]?.store
-          .value;
-      if (db instanceof Database) {
-        return db.schemas.flatMap((schema) => schema.tables);
-      }
-    }
-    return [];
+    const databases = uniq(
+      this.getAllIdentifiedConnections()
+        .map((idCon) => idCon.connection)
+        .flatMap((_c) => _c.store.value)
+        .filter(filterByType(Database))
+        .map((db) => Array.from(getAllIncludedDatabases(db)))
+        .flat(),
+    );
+    return uniq(
+      databases
+        .flatMap((_db) => _db.schemas)
+        .flatMap((schema) => schema.tables),
+    );
   }
 
   setUseSharedModal(val: boolean): void {

package/src/stores/editor/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.ts

@@ -426,6 +426,7 @@ export class EntityChangeConflictEditorState extends EntityDiffViewerState {
       const elementGrammar =
         (yield this.editorStore.graphManagerState.graphManager.entitiesToPureCode(
           [entity],
+          { pretty: true },
         )) as string;
       return elementGrammar;
     }

package/src/stores/editor/editor-state/entity-diff-editor-state/EntityDiffViewState.ts

@@ -202,6 +202,7 @@ export class EntityDiffViewState extends EntityDiffViewerState {
         const elementGrammar =
           (yield this.editorStore.graphManagerState.graphManager.entitiesToPureCode(
             [this.fromEntity],
+            { pretty: true },
           )) as string;
         this.setFromGrammarText(elementGrammar);
       } catch (error) {
@@ -225,6 +226,7 @@ export class EntityDiffViewState extends EntityDiffViewerState {
         const elementGrammar =
           (yield this.editorStore.graphManagerState.graphManager.entitiesToPureCode(
             [this.toEntity],
+            { pretty: true },
           )) as string;
         this.setToGrammarText(elementGrammar);
       } catch (error) {