@finos/legend-application-studio 28.5.3 → 28.5.4

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