@finos/legend-application-studio 13.1.2 → 14.0.0

package/src/components/editor/edit-panel/external-format-editor/SchemaSetModelGenerationEditor.tsx

@@ -0,0 +1,226 @@
+/**
+ * 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 { type GenerationProperty, isValidFullPath } from '@finos/legend-graph';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useMemo } from 'react';
+import type { SchemaSetModelGenerationState } from '../../../../stores/editor-state/element-editor-state/external-format/SchemaSetEditorState.js';
+import { debounce } from '@finos/legend-shared';
+import {
+  clsx,
+  InputWithInlineValidation,
+  PanelLoadingIndicator,
+  RefreshIcon,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+} from '@finos/legend-art';
+import { GenerationPropertyEditor } from '../element-generation-editor/FileGenerationEditor.js';
+import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
+import { EDITOR_LANGUAGE } from '@finos/legend-application';
+
+enum HIDDEN_CONFIGURATION_PROPERTIES {
+  FORMAT = 'format',
+}
+
+export const SchemaSetModelGenerationEditor = observer(
+  (props: {
+    modelGenerationState: SchemaSetModelGenerationState;
+    isReadOnly: boolean;
+  }) => {
+    const { modelGenerationState, isReadOnly } = props;
+    const applicationStore = modelGenerationState.editorStore.applicationStore;
+    const format = modelGenerationState.schemaSet.format;
+    const description = modelGenerationState.description;
+    const properties = description?.modelGenerationProperties ?? [];
+    const debouncedRegenerate = useMemo(
+      () =>
+        debounce(() => flowResult(modelGenerationState.generateModel()), 500),
+      [modelGenerationState],
+    );
+    const update = (
+      generationProperty: GenerationProperty,
+      newValue: object,
+    ): void => {
+      debouncedRegenerate.cancel();
+      modelGenerationState.updateGenerationParameters(
+        generationProperty,
+        newValue,
+      );
+      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
+    };
+    const regenerate = (): void => {
+      modelGenerationState.generateModel();
+    };
+    const getConfigValue = (name: string): unknown | undefined =>
+      modelGenerationState.getConfigValue(name);
+    const targetBindingPathValidationMessage =
+      Boolean(modelGenerationState.targetBinding) &&
+      !isValidFullPath(modelGenerationState.targetBinding)
+        ? 'Invalid target binding path'
+        : undefined;
+
+    const changeTargetBindingPath: React.ChangeEventHandler<
+      HTMLInputElement
+    > = (event) => {
+      modelGenerationState.setTargetBindingPath(event.target.value);
+      if (
+        !modelGenerationState.targetBinding ||
+        (modelGenerationState.targetBinding &&
+          isValidFullPath(modelGenerationState.targetBinding))
+      ) {
+        modelGenerationState.handleTargetBindingPathChange();
+        debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
+      }
+    };
+    const importGeneratedElements = (): void => {
+      modelGenerationState.importGeneratedModelsIntoGraph();
+    };
+
+    return (
+      <div className="panel__content file-generation-editor__content">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel size={250} minSize={50}>
+            <div className="panel file-generation-editor__configuration">
+              <div className="panel__header">
+                <div className="panel__header__title">
+                  <div className="panel__header__title__label">{`${format} configuration`}</div>
+                </div>
+                <div className="panel__header__actions">
+                  <button
+                    className="panel__header__action file-generation-editor__configuration__reset-btn"
+                    tabIndex={-1}
+                    disabled={isReadOnly || !properties.length}
+                    onClick={regenerate}
+                    title={'Reset to default configuration'}
+                  >
+                    <RefreshIcon />
+                  </button>
+                </div>
+              </div>
+              <div className="panel__content">
+                <div className="file-generation-editor__configuration__content">
+                  <div className="panel__content__form__section">
+                    <div className="panel__content__form__section__header__label">
+                      {'Target Binding Path'}
+                    </div>
+                    <div className="panel__content__form__section__header__prompt">
+                      {
+                        'If path is provided, a binding will be generated alongside the models. The binding will ensure the schema and models are compatible through compile time validations.'
+                      }
+                    </div>
+                    <InputWithInlineValidation
+                      className="query-builder__parameters__parameter__name__input input-group__input"
+                      spellCheck={false}
+                      value={modelGenerationState.targetBinding}
+                      onChange={changeTargetBindingPath}
+                      placeholder={`Target binding path`}
+                      validationErrorMessage={
+                        targetBindingPathValidationMessage
+                      }
+                    />
+                  </div>
+
+                  {modelGenerationState.modelGenerationProperties
+                    .filter(
+                      (property) =>
+                        !Object.values(
+                          HIDDEN_CONFIGURATION_PROPERTIES,
+                        ).includes(
+                          property.name as HIDDEN_CONFIGURATION_PROPERTIES,
+                        ),
+                    )
+                    .map((abstractGenerationProperty) => (
+                      <GenerationPropertyEditor
+                        key={abstractGenerationProperty.name}
+                        update={update}
+                        isReadOnly={isReadOnly}
+                        getConfigValue={getConfigValue}
+                        property={abstractGenerationProperty}
+                      />
+                    ))}
+                </div>
+              </div>
+            </div>
+          </ResizablePanel>
+          <ResizablePanelSplitter>
+            <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+          </ResizablePanelSplitter>
+          <ResizablePanel>
+            <div className="panel generation-result-viewer__file">
+              <div className="panel__header">
+                <div className="panel__header__title">
+                  <div className="panel__header__title__label">result</div>
+                </div>
+                <div className="panel__header__actions">
+                  <button
+                    className={clsx(
+                      'panel__header__action  generation-result-viewer__regenerate-btn',
+                      {
+                        ' generation-result-viewer__regenerate-btn--loading':
+                          modelGenerationState.generatingModelsState
+                            .isInProgress ||
+                          modelGenerationState.importGeneratedElementsState
+                            .isInProgress,
+                      },
+                    )}
+                    tabIndex={-1}
+                    disabled={
+                      modelGenerationState.generatingModelsState.isInProgress ||
+                      modelGenerationState.importGeneratedElementsState
+                        .isInProgress
+                    }
+                    onClick={regenerate}
+                    title={'Re-generate'}
+                  >
+                    <RefreshIcon />
+                  </button>
+                  {!modelGenerationState.isolatedGraph && (
+                    <button
+                      className="btn--dark model-loader__header__load-btn"
+                      onClick={importGeneratedElements}
+                      disabled={modelGenerationState.generationValue === ''}
+                      tabIndex={-1}
+                      title="Import generated elements"
+                    >
+                      Import
+                    </button>
+                  )}
+                </div>
+              </div>
+              <div className="panel__content">
+                <PanelLoadingIndicator
+                  isLoading={
+                    modelGenerationState.generatingModelsState.isInProgress ||
+                    modelGenerationState.importGeneratedElementsState
+                      .isInProgress
+                  }
+                />
+                <StudioTextInputEditor
+                  inputValue={modelGenerationState.generationValue}
+                  isReadOnly={true}
+                  language={EDITOR_LANGUAGE.PURE}
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+);

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

@@ -483,8 +483,8 @@ const ExplorerDropdownMenu = observer(() => {
 const ExplorerTrees = observer(() => {
   const editorStore = useEditorStore();
   const { isInGrammarTextMode, isInViewerMode } = editorStore;
-  const openModelLoader = (): void =>
-    editorStore.openSingletonEditorState(editorStore.modelLoaderState);
+  const openModelImport = (): void =>
+    editorStore.openSingletonEditorState(editorStore.modelImporterState);
   const graph = editorStore.graphManagerState.graph;
   // Explorer tree
   const treeData = editorStore.explorerTreeState.getTreeData();
@@ -661,9 +661,9 @@ const ExplorerTrees = observer(() => {
               </div>
               <button
                 className="btn--dark explorer__content--empty__btn"
-                onClick={openModelLoader}
+                onClick={openModelImport}
               >
-                Open Model Loader
+                Open Model Importer
               </button>
             </div>
           )}
@@ -688,8 +688,8 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
     });
     editorStore.explorerTreeState.setTreeData({ ...treeData });
   };
-  const showModelLoader = (): void =>
-    editorStore.openState(editorStore.modelLoaderState);
+  const showModelImporter = (): void =>
+    editorStore.openState(editorStore.modelImporterState);
 
   return (
     <div className="panel__header__actions">
@@ -697,8 +697,8 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
         <button
           className="panel__header__action"
           disabled={disabled}
-          title="Open Model Loader (F2)"
-          onClick={showModelLoader}
+          title="Open Model Importer (F2)"
+          onClick={showModelImporter}
         >
           <FileImportIcon />
         </button>

package/src/stores/EditorGraphState.ts

@@ -35,7 +35,7 @@ import {
 import type { EditorStore } from './EditorStore.js';
 import { ElementEditorState } from './editor-state/element-editor-state/ElementEditorState.js';
 import { GraphGenerationState } from './editor-state/GraphGenerationState.js';
-import { MODEL_UPDATER_INPUT_TYPE } from './editor-state/ModelLoaderState.js';
+import { MODEL_IMPORT_NATIVE_INPUT_TYPE } from './editor-state/ModelImporterState.js';
 import type { DSL_LegendStudioApplicationPlugin_Extension } from './LegendStudioApplicationPlugin.js';
 import type { Entity } from '@finos/legend-storage';
 import {
@@ -303,8 +303,8 @@ export class EditorGraphState {
         );
         this.editorStore.setCurrentEditorState(projectConfigurationEditorState);
       } else if (error instanceof GraphDataDeserializationError) {
-        // if something goes wrong with de-serialization, redirect to model loader to fix
-        this.redirectToModelLoaderForDebugging(error);
+        // if something goes wrong with de-serialization, redirect to model importer to fix
+        this.redirectToModelImporterForDebugging(error);
       } else if (error instanceof NetworkClientError) {
         this.editorStore.graphManagerState.graphBuildState.fail();
         this.editorStore.applicationStore.notifyWarning(
@@ -332,8 +332,8 @@ export class EditorGraphState {
             error2,
           );
           if (error2 instanceof NetworkClientError) {
-            // in case the server cannot even transform the JSON due to corrupted protocol, we can redirect to model loader
-            this.redirectToModelLoaderForDebugging(error2);
+            // in case the server cannot even transform the JSON due to corrupted protocol, we can redirect to model importer
+            this.redirectToModelImporterForDebugging(error2);
             return {
               status: GraphBuilderStatus.FAILED,
               error: error2,
@@ -361,7 +361,7 @@ export class EditorGraphState {
     }
   }
 
-  private redirectToModelLoaderForDebugging(error: Error): void {
+  private redirectToModelImporterForDebugging(error: Error): void {
     if (this.editorStore.isInConflictResolutionMode) {
       this.editorStore.setBlockingAlert({
         message: `Can't de-serialize graph model from entities`,
@@ -370,14 +370,15 @@ export class EditorGraphState {
       return;
     }
     this.editorStore.applicationStore.notifyWarning(
-      `Can't de-serialize graph model from entities. Redirected to model loader for debugging. Error: ${error.message}`,
-    );
-    this.editorStore.modelLoaderState.setCurrentModelLoadType(
-      MODEL_UPDATER_INPUT_TYPE.ENTITIES,
+      `Can't de-serialize graph model from entities. Redirected to model importer for debugging. Error: ${error.message}`,
     );
+    const nativeImporterState =
+      this.editorStore.modelImporterState.setNativeImportType(
+        MODEL_IMPORT_NATIVE_INPUT_TYPE.ENTITIES,
+      );
     // Making an async call
-    this.editorStore.modelLoaderState.loadCurrentProjectEntities();
-    this.editorStore.openState(this.editorStore.modelLoaderState);
+    nativeImporterState.loadCurrentProjectEntities();
+    this.editorStore.openState(this.editorStore.modelImporterState);
   }
 
   /**

package/src/stores/EditorStore.ts

@@ -59,7 +59,7 @@ import {
 import { UMLEditorState } from './editor-state/element-editor-state/UMLEditorState.js';
 import { ServiceEditorState } from './editor-state/element-editor-state/service/ServiceEditorState.js';
 import { EditorSDLCState } from './EditorSDLCState.js';
-import { ModelLoaderState } from './editor-state/ModelLoaderState.js';
+import { ModelImporterState } from './editor-state/ModelImporterState.js';
 import type { EditorState } from './editor-state/EditorState.js';
 import { EntityDiffViewState } from './editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { FunctionEditorState } from './editor-state/element-editor-state/FunctionEditorState.js';
@@ -186,7 +186,7 @@ export class EditorStore {
   graphManagerState: GraphManagerState;
   changeDetectionState: ChangeDetectionState;
   grammarTextEditorState: GrammarTextEditorState;
-  modelLoaderState: ModelLoaderState;
+  modelImporterState: ModelImporterState;
   projectConfigurationEditorState: ProjectConfigurationEditorState;
   projectOverviewState: ProjectOverviewState;
   workspaceWorkflowManagerState: WorkspaceWorkflowManagerState;
@@ -315,7 +315,7 @@ export class EditorStore {
     this.newElementState = new NewElementState(this);
     // special (singleton) editors
     this.grammarTextEditorState = new GrammarTextEditorState(this);
-    this.modelLoaderState = new ModelLoaderState(this);
+    this.modelImporterState = new ModelImporterState(this);
     this.projectConfigurationEditorState = new ProjectConfigurationEditorState(
       this,
       this.sdlcState,
@@ -375,7 +375,7 @@ export class EditorStore {
         LEGEND_STUDIO_HOTKEY.TOGGLE_MODEL_LOADER,
         [LEGEND_STUDIO_HOTKEY_MAP.TOGGLE_MODEL_LOADER],
         this.createGlobalHotKeyAction(() =>
-          this.openState(this.modelLoaderState),
+          this.openState(this.modelImporterState),
         ),
       ),
       new HotkeyConfiguration(
@@ -736,7 +736,6 @@ export class EditorStore {
       this.projectConfigurationEditorState.fetchLatestProjectStructureVersion(),
       this.graphState.graphGenerationState.fetchAvailableFileGenerationDescriptions(),
       this.graphState.graphGenerationState.externalFormatState.fetchExternalFormatsDescriptions(),
-      this.modelLoaderState.fetchAvailableModelImportDescriptions(),
       this.sdlcState.fetchProjectVersions(),
     ]);
   }
@@ -775,7 +774,6 @@ export class EditorStore {
       this.projectConfigurationEditorState.fetchLatestProjectStructureVersion(),
       this.graphState.graphGenerationState.fetchAvailableFileGenerationDescriptions(),
       this.graphState.graphGenerationState.externalFormatState.fetchExternalFormatsDescriptions(),
-      this.modelLoaderState.fetchAvailableModelImportDescriptions(),
       this.sdlcState.fetchProjectVersions(),
     ]);
   }
@@ -959,8 +957,8 @@ export class EditorStore {
       this.openEntityChangeConflict(editorState);
     } else if (editorState instanceof FileGenerationViewerState) {
       this.openGeneratedFile(editorState.generatedFile);
-    } else if (editorState === this.modelLoaderState) {
-      this.openSingletonEditorState(this.modelLoaderState);
+    } else if (editorState === this.modelImporterState) {
+      this.openSingletonEditorState(this.modelImporterState);
     } else if (editorState === this.projectConfigurationEditorState) {
       this.openSingletonEditorState(this.projectConfigurationEditorState);
     } else {
@@ -1008,7 +1006,7 @@ export class EditorStore {
    * This method helps open editor that only exists one instance at at time such as model-loader, project config, settings ...
    */
   openSingletonEditorState(
-    singularEditorState: ModelLoaderState | ProjectConfigurationEditorState,
+    singularEditorState: ModelImporterState | ProjectConfigurationEditorState,
   ): void {
     const existingEditorState = this.openedEditorStates.find(
       (e) => e === singularEditorState,

package/src/stores/LegendStudioApplicationPlugin.ts

@@ -49,12 +49,12 @@ export type ClassPreviewRenderer = (
   _class: Class,
 ) => React.ReactNode | undefined;
 
-export type ModelLoaderExtensionConfiguration = {
+export type ModelImporterExtensionConfiguration = {
   key: string;
   label?: string | undefined;
   allowHardReplace?: boolean;
   // TODO: document about this behavior better, right now the behavior is not well
-  // structured yet, also, model loader seems rather fragmented at the moment
+  // structured yet, also, model importer seems rather fragmented at the moment
   load: (editorStore: EditorStore) => Promise<void>;
   renderer: (editorStore: EditorStore) => React.ReactNode | undefined;
 };
@@ -98,9 +98,9 @@ export abstract class LegendStudioApplicationPlugin extends LegendApplicationPlu
   getExtraEditorExtensionComponentRendererConfigurations?(): EditorExtensionComponentRendererConfiguration[];
 
   /**
-   * Get the list of extension configurations for model loader.
+   * Get the list of extension configurations for model importer.
    */
-  getExtraModelLoaderExtensionConfigurations?(): ModelLoaderExtensionConfiguration[];
+  getExtraModelImporterExtensionConfigurations?(): ModelImporterExtensionConfiguration[];
 
   /**
    * Get the list of extension for testables

package/src/stores/editor-state/ExternalFormatState.ts

@@ -18,7 +18,6 @@ import type { ExternalFormatDescription } from '@finos/legend-graph';
 import {
   type GeneratorFn,
   assertErrorThrown,
-  guaranteeNonNullable,
   LogEvent,
   ActionState,
 } from '@finos/legend-shared';
@@ -58,12 +57,22 @@ export class ExternalFormatState {
   }
 
   get formatTypeOptions(): ExternalFormatTypeOption[] {
-    return this.externalFormatsDescriptions.map((e) => ({
-      value: e.name,
-      label: e.name,
+    return this.externalFormatsDescriptions.map((types) => ({
+      value: types.name,
+      label: types.name,
     }));
   }
 
+  get formatContentTypes(): string[] {
+    return this.externalFormatsDescriptions.map((e) => e.contentTypes).flat();
+  }
+
+  get externalFormatDescriptionsWithModelGenerationSupport(): ExternalFormatDescription[] {
+    return this.externalFormatsDescriptions.filter(
+      (d) => d.supportsModelGeneration,
+    );
+  }
+
   getFormatTypeForContentType(contentType: string): string | undefined {
     return this.externalFormatsDescriptions.find(
       (externalFormatDescription) =>
@@ -71,10 +80,6 @@ export class ExternalFormatState {
     )?.name;
   }
 
-  get formatContentTypes(): string[] {
-    return this.externalFormatsDescriptions.map((e) => e.contentTypes).flat();
-  }
-
   setExternalFormatsDescriptions(
     externalFormatsDescriptions: ExternalFormatDescription[],
   ): void {
@@ -99,9 +104,7 @@ export class ExternalFormatState {
     }
   }
 
-  getTypeDescription(type: string): ExternalFormatDescription {
-    return guaranteeNonNullable(
-      this.externalFormatsDescriptions.find((e) => e.name === type),
-    );
+  getTypeDescription(type: string): ExternalFormatDescription | undefined {
+    return this.externalFormatsDescriptions.find((e) => e.name === type);
   }
 }