@finos/legend-application-studio 13.1.1 → 15.0.0

package/src/components/EditorComponentTestUtils.tsx

@@ -50,8 +50,6 @@ import {
   SDLCServerFeaturesConfiguration,
 } from '@finos/legend-server-sdlc';
 import {
-  type ImportConfigurationDescription,
-  type ImportMode,
   type GenerationConfigurationDescription,
   type GenerationMode,
   type GraphManagerState,
@@ -109,20 +107,8 @@ export const TEST_DATA__DefaultSDLCInfo = {
     version: 6,
     extensionVersion: 3,
   },
-  availableSchemaImports: [
-    {
-      label: 'XSD',
-      key: 'Xsd',
-      modelImportMode: 'schemaImport' as ImportMode,
-    },
-  ],
-  availableCodeImports: [
-    {
-      label: 'Java',
-      key: 'java',
-      modelImportMode: 'codeImport' as ImportMode,
-    },
-  ],
+  availableSchemaImports: [],
+  availableCodeImports: [],
   availableSchemaGenerations: [
     {
       label: 'Avro',
@@ -237,7 +223,6 @@ export const TEST__setUpEditor = async (
     projectConfiguration: PlainObject<ProjectConfiguration>;
     latestProjectStructureVersion: PlainObject<ProjectStructureVersion>;
     availableGenerationDescriptions: GenerationConfigurationDescription[];
-    availableImportDescriptions: ImportConfigurationDescription[];
     projects: PlainObject<ProjectData>[];
     projectData: PlainObject<ProjectData>[];
     projectDependency: PlainObject<ProjectVersionEntities>[];
@@ -252,7 +237,6 @@ export const TEST__setUpEditor = async (
     entities,
     latestProjectStructureVersion,
     availableGenerationDescriptions,
-    availableImportDescriptions,
     projectData,
     projects,
     projectDependency,
@@ -322,12 +306,6 @@ export const TEST__setUpEditor = async (
       'getAvailableGenerationConfigurationDescriptions',
     )
     .mockResolvedValue(availableGenerationDescriptions);
-  jest
-    .spyOn(
-      MOCK__editorStore.graphManagerState.graphManager,
-      'getAvailableImportConfigurationDescriptions',
-    )
-    .mockResolvedValue(availableImportDescriptions);
 
   // mock change detections (since we do not test them now)
   MOCK__editorStore.changeDetectionState.workspaceLocalLatestRevisionState.buildEntityHashesIndex =
@@ -422,7 +400,6 @@ export const TEST__setUpEditorWithDefaultSDLCData = (
     projectConfiguration?: PlainObject<ProjectConfiguration>;
     latestProjectStructureVersion?: PlainObject<ProjectStructureVersion>;
     availableGenerationDescriptions?: GenerationConfigurationDescription[];
-    availableImportDescriptions?: ImportConfigurationDescription[];
     projects?: PlainObject<ProjectData>[];
     projectData?: PlainObject<ProjectData>[];
     projectDependency?: PlainObject<ProjectVersionEntities>[];
@@ -441,10 +418,6 @@ export const TEST__setUpEditorWithDefaultSDLCData = (
       ...TEST_DATA__DefaultSDLCInfo.availableSchemaGenerations,
       ...TEST_DATA__DefaultSDLCInfo.availableCodeGenerations,
     ],
-    availableImportDescriptions: [
-      ...TEST_DATA__DefaultSDLCInfo.availableSchemaImports,
-      ...TEST_DATA__DefaultSDLCInfo.availableCodeImports,
-    ],
     projects: [],
     projectData: [],
     projectDependency: [],

package/src/components/LegendStudioApplication.tsx

@@ -119,12 +119,12 @@ export const LegendStudioApplicationRoot = observer(() => {
 
   return (
     <div className="app">
-      {!baseStore.applicationSDLCSetupState.isSDLCAuthorized && (
+      {!baseStore.isSDLCAuthorized && (
         <div className="app__page">
           <PanelLoadingIndicator isLoading={true} />
         </div>
       )}
-      {baseStore.applicationSDLCSetupState.isSDLCAuthorized && (
+      {baseStore.isSDLCAuthorized && (
         <>
           {/* TODO: consider moving this to `LegendApplicationComponentFrameworkProvider` */}
           <VirtualAssistant />

package/src/components/editor/edit-panel/EditPanel.tsx

@@ -40,8 +40,8 @@ import {
   EntityDiffViewState,
 } from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { EntityDiffView } from '../../editor/edit-panel/diff-editor/EntityDiffView.js';
-import { ModelLoader } from '../../editor/edit-panel/ModelLoader.js';
-import { ModelLoaderState } from '../../../stores/editor-state/ModelLoaderState.js';
+import { ModelImporter } from './ModelImporter.js';
+import { ModelImporterState } from '../../../stores/editor-state/ModelImporterState.js';
 import { FunctionEditorState } from '../../../stores/editor-state/element-editor-state/FunctionEditorState.js';
 import { ServiceEditorState } from '../../../stores/editor-state/element-editor-state/service/ServiceEditorState.js';
 import { ProjectConfigurationEditorState } from '../../../stores/editor-state/ProjectConfigurationEditorState.js';
@@ -321,8 +321,8 @@ export const EditPanel = observer(() => {
       );
     } else if (currentEditorState instanceof FileGenerationViewerState) {
       return <FileGenerationViewer key={currentEditorState.uuid} />;
-    } else if (currentEditorState instanceof ModelLoaderState) {
-      return <ModelLoader />;
+    } else if (currentEditorState instanceof ModelImporterState) {
+      return <ModelImporter />;
     } else if (currentEditorState instanceof ProjectConfigurationEditorState) {
       return <ProjectConfigurationEditor />;
     }

package/src/components/editor/edit-panel/ModelImporter.tsx

@@ -0,0 +1,372 @@
+/**
+ * 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 ModelImporterEditorState,
+  ModelImporterState,
+  ExtensionModelImporterEditorState,
+  MODEL_IMPORT_NATIVE_INPUT_TYPE,
+  NativeModelImporterEditorState,
+  ExternalFormatModelImporterState,
+} from '../../../stores/editor-state/ModelImporterState.js';
+import { prettyCONSTName } from '@finos/legend-shared';
+import {
+  DropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  CaretDownIcon,
+  CheckSquareIcon,
+  TruckLoadingIcon,
+  EmptySquareIcon,
+  BlankPanelContent,
+  PanelLoadingIndicator,
+  clsx,
+} from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { useEditorStore } from '../EditorStoreProvider.js';
+import {
+  ActionAlertType,
+  ActionAlertActionType,
+  useApplicationStore,
+  EDITOR_LANGUAGE,
+  useApplicationNavigationContext,
+} from '@finos/legend-application';
+import { StudioTextInputEditor } from '../../shared/StudioTextInputEditor.js';
+import type { ModelImporterExtensionConfiguration } from '../../../stores/LegendStudioApplicationPlugin.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
+import { SCHEMA_SET_TAB_TYPE } from '../../../stores/editor-state/element-editor-state/external-format/SchemaSetEditorState.js';
+import { SchemaSetModelGenerationEditor } from './external-format-editor/SchemaSetModelGenerationEditor.js';
+import { SchemaSetGeneralEditor } from './external-format-editor/SchemaSetElementEditor.js';
+
+const ExternalFormatModelImporterEditor = observer(
+  (props: { externalFormatState: ExternalFormatModelImporterState }) => {
+    const { externalFormatState } = props;
+    const schemaSetEditorState = externalFormatState.schemaSetEditorState;
+    const editorStore = schemaSetEditorState.editorStore;
+    const schemaSet = schemaSetEditorState.schemaSet;
+    const currentTab = schemaSetEditorState.selectedTab;
+    const isFetchingDescriptions =
+      editorStore.graphState.graphGenerationState.externalFormatState
+        .fetchingDescriptionsState.isInProgress;
+    const changeTab =
+      (tab: SCHEMA_SET_TAB_TYPE): (() => void) =>
+      (): void =>
+        schemaSetEditorState.setSelectedTab(tab);
+    const renderMainEditPanel = (): React.ReactNode => {
+      if (isFetchingDescriptions) {
+        return (
+          <BlankPanelContent>Fetching format descriptions</BlankPanelContent>
+        );
+      }
+      if (currentTab === SCHEMA_SET_TAB_TYPE.SCHEMAS) {
+        return (
+          <SchemaSetGeneralEditor
+            schemaSetEditorState={schemaSetEditorState}
+            isReadOnly={false}
+          />
+        );
+      }
+      const supportsModelGeneraiton =
+        schemaSetEditorState.schemaSetModelGenerationState.description
+          ?.supportsModelGeneration;
+      return supportsModelGeneraiton ? (
+        <SchemaSetModelGenerationEditor
+          modelGenerationState={
+            schemaSetEditorState.schemaSetModelGenerationState
+          }
+          isReadOnly={false}
+        />
+      ) : (
+        <BlankPanelContent>
+          Format {schemaSet.format} does not support Model Generation
+        </BlankPanelContent>
+      );
+    };
+    return (
+      <div className="panel schema-set-panel">
+        <div className="panel__content model-loader">
+          <PanelLoadingIndicator isLoading={isFetchingDescriptions} />
+          <div className="panel__header">
+            <div className="uml-element-editor__tabs">
+              {Object.values(SCHEMA_SET_TAB_TYPE).map((tab) => (
+                <div
+                  key={tab}
+                  onClick={changeTab(tab)}
+                  className={clsx('relational-connection-editor__tab', {
+                    'relational-connection-editor__tab--active':
+                      tab === currentTab,
+                  })}
+                >
+                  {prettyCONSTName(tab)}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="panel__content file-generation-editor__content">
+            {currentTab === SCHEMA_SET_TAB_TYPE.SCHEMAS && (
+              <SchemaSetGeneralEditor
+                schemaSetEditorState={schemaSetEditorState}
+                isReadOnly={false}
+              />
+            )}
+
+            {currentTab === SCHEMA_SET_TAB_TYPE.GENERATE_MODEL &&
+              renderMainEditPanel()}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+export const ModelImporter = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const modelImporterState =
+    editorStore.getCurrentEditorState(ModelImporterState);
+  const nativeInputTypes = Object.values(MODEL_IMPORT_NATIVE_INPUT_TYPE);
+  const extraModelImporterExtensionsConfigs =
+    modelImporterState.extensionConfigs;
+  const externalFormatDescriptions =
+    modelImporterState.editorStore.graphState.graphGenerationState
+      .externalFormatState.externalFormatDescriptionsWithModelGenerationSupport;
+  // replace flag
+  const replace = modelImporterState.replace;
+  const toggleReplace = (): void => modelImporterState.setReplaceFlag(!replace);
+  const label = modelImporterState.modelImportEditorState.label;
+  const modelImportEditorState = modelImporterState.modelImportEditorState;
+  const loadModel = (): void => {
+    if (editorStore.hasUnpushedChanges) {
+      editorStore.setActionAlertInfo({
+        message: 'You have unpushed changes',
+        prompt:
+          'This action will discard these changes and refresh the application',
+        type: ActionAlertType.CAUTION,
+        onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
+        onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
+        actions: [
+          {
+            label: 'Proceed to load model',
+            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+            handler: (): void => {
+              editorStore.setIgnoreNavigationBlocking(true);
+              flowResult(
+                modelImporterState.modelImportEditorState.loadModel(),
+              ).catch(applicationStore.alertUnhandledError);
+            },
+          },
+          {
+            label: 'Abort',
+            type: ActionAlertActionType.PROCEED,
+            default: true,
+          },
+        ],
+      });
+    } else {
+      flowResult(modelImporterState.modelImportEditorState.loadModel()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }
+  };
+  useApplicationNavigationContext(
+    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MODEL_LOADER,
+  );
+  const renderExtraActions = (): React.ReactNode => {
+    if (modelImportEditorState instanceof NativeModelImporterEditorState) {
+      // actions
+      const loadCurrentProjectEntities = applicationStore.guardUnhandledError(
+        () => flowResult(modelImportEditorState.loadCurrentProjectEntities()),
+      );
+      return (
+        <button
+          className="model-loader__header__configs__load-project-entities-btn"
+          tabIndex={-1}
+          onClick={loadCurrentProjectEntities}
+          title="Load current project entities"
+        >
+          <TruckLoadingIcon />
+        </button>
+      );
+    }
+    return null;
+  };
+  const renderModelImporterEditor = (): React.ReactNode => {
+    if (modelImportEditorState instanceof ExtensionModelImporterEditorState) {
+      return modelImportEditorState.config.renderer(
+        modelImportEditorState.rendererState,
+      );
+    } else if (
+      modelImportEditorState instanceof NativeModelImporterEditorState
+    ) {
+      const updateModel = (val: string): void =>
+        modelImportEditorState.setModelText(val);
+      return (
+        <div className="panel__content model-loader__editor">
+          <StudioTextInputEditor
+            language={
+              modelImportEditorState.nativeType ===
+              MODEL_IMPORT_NATIVE_INPUT_TYPE.PURE_GRAMMAR
+                ? EDITOR_LANGUAGE.PURE
+                : EDITOR_LANGUAGE.JSON
+            }
+            inputValue={modelImportEditorState.modelText}
+            updateInput={updateModel}
+            showMiniMap={true}
+          />
+        </div>
+      );
+    } else if (
+      modelImportEditorState instanceof ExternalFormatModelImporterState
+    ) {
+      return (
+        <ExternalFormatModelImporterEditor
+          externalFormatState={modelImportEditorState}
+        />
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="panel model-loader">
+      <div className="panel__header model-loader__header">
+        <div className="model-loader__header__configs">
+          <DropdownMenu
+            content={
+              <MenuContent className="model-loader__header__configs__type__menu">
+                <div className="model-loader__header__configs__type-option__group model-loader__header__configs__type-option__group--native">
+                  <div className="model-loader__header__configs__type-option__group__name">
+                    native
+                  </div>
+                  <div className="model-loader__header__configs__type-option__group__options">
+                    {nativeInputTypes.map((inputType) => (
+                      <MenuContentItem
+                        key={inputType}
+                        className="model-loader__header__configs__type-option__group__option"
+                        onClick={(): ModelImporterEditorState =>
+                          modelImporterState.setNativeImportType(inputType)
+                        }
+                      >
+                        {prettyCONSTName(inputType)}
+                      </MenuContentItem>
+                    ))}
+                  </div>
+                </div>
+                {Boolean(externalFormatDescriptions.length) && (
+                  <>
+                    <div className="model-loader__header__configs__type-option__group__separator" />
+                    <div className="model-loader__header__configs__type-option__group model-loader__header__configs__type-option__group--external">
+                      <div className="model-loader__header__configs__type-option__group__name">
+                        external
+                      </div>
+                      <div className="model-loader__header__configs__type-option__group__options">
+                        {externalFormatDescriptions.map((inputType) => (
+                          <MenuContentItem
+                            key={inputType.name}
+                            className="model-loader__header__configs__type-option__group__option"
+                            onClick={() =>
+                              modelImporterState.setExternalFormatImportFormat(
+                                inputType,
+                              )
+                            }
+                          >
+                            {inputType.name}
+                          </MenuContentItem>
+                        ))}
+                      </div>
+                    </div>
+                  </>
+                )}
+                {Boolean(extraModelImporterExtensionsConfigs.length > 0) && (
+                  <>
+                    <div className="model-loader__header__configs__type-option__group__separator" />
+                    <div className="model-loader__header__configs__type-option__group model-loader__header__configs__type-option__group--extension">
+                      <div className="model-loader__header__configs__type-option__group__name">
+                        extensions
+                      </div>
+                      <div className="model-loader__header__configs__type-option__group__options">
+                        {extraModelImporterExtensionsConfigs.map(
+                          (config: ModelImporterExtensionConfiguration) => (
+                            <MenuContentItem
+                              key={config.key}
+                              className="model-loader__header__configs__type-option__group__option"
+                              onClick={() =>
+                                modelImporterState.setModelImporterExtension(
+                                  config,
+                                )
+                              }
+                            >
+                              {config.label ?? prettyCONSTName(config.key)}
+                            </MenuContentItem>
+                          ),
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
+              </MenuContent>
+            }
+            menuProps={{
+              anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+              transformOrigin: { vertical: 'top', horizontal: 'right' },
+            }}
+          >
+            <div className="model-loader__header__configs__type">
+              <div className="model-loader__header__configs__type__label">
+                {prettyCONSTName(label)}
+              </div>
+              <div className="model-loader__header__configs__type__icon">
+                <CaretDownIcon />
+              </div>
+            </div>
+          </DropdownMenu>
+          {modelImportEditorState.allowHardReplace && (
+            <div
+              className="model-loader__header__configs__edit-mode"
+              onClick={toggleReplace}
+            >
+              <div className="model-loader__header__configs__edit-mode__icon">
+                {replace ? <CheckSquareIcon /> : <EmptySquareIcon />}
+              </div>
+              <div className="model-loader__header__configs__edit-mode__label">
+                replace
+              </div>
+            </div>
+          )}
+          {renderExtraActions()}
+        </div>
+        <div className="model-loader__header__action">
+          <button
+            className="btn--dark model-loader__header__load-btn"
+            onClick={loadModel}
+            disabled={
+              modelImportEditorState.loadModelActionState.isInProgress ||
+              modelImportEditorState.isLoadingDisabled
+            }
+            tabIndex={-1}
+            title="Load model"
+          >
+            Load
+          </button>
+        </div>
+      </div>
+
+      {renderModelImporterEditor()}
+    </div>
+  );
+});

package/src/components/editor/edit-panel/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -45,6 +45,7 @@ import {
   ApiTokenAuthenticationStrategy,
   UsernamePasswordAuthenticationStrategy,
   GCPWorkloadIdentityFederationAuthenticationStrategy,
+  MiddleTierUsernamePasswordAuthenticationStrategy,
   EmbeddedH2DatasourceSpecification,
   LocalH2DatasourceSpecification,
   SnowflakeDatasourceSpecification,
@@ -114,6 +115,7 @@ import {
   usernamePasswordAuthenticationStrategy_setUserNameVaultReference,
   gcpWorkloadIdentityFederationAuthenticationStrategy_setServiceAccountEmail,
   gcpWorkloadIdentityFederationAuthenticationStrategy_setAdditionalGcpScopes,
+  middleTierUsernamePasswordAuthenticationStrategy_setVaultReference,
 } from '../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
 
 /**
@@ -1014,6 +1016,31 @@ const UsernamePasswordAuthenticationStrategyEditor = observer(
     );
   },
 );
+// Middle Tier Username Password Authentication Strategy obtains credentials(username and password) from the provided vault reference
+const MiddleTierUsernamePasswordAuthenticationStrategyEditor = observer(
+  (props: {
+    authSpec: MiddleTierUsernamePasswordAuthenticationStrategy;
+    isReadOnly: boolean;
+  }) => {
+    const { authSpec, isReadOnly } = props;
+    return (
+      <>
+        <ConnectionEditor_StringEditor
+          isReadOnly={isReadOnly}
+          value={authSpec.vaultReference}
+          propertyName={'vault reference'}
+          description="Specifies the cred vault reference containing connection credentials"
+          update={(value: string | undefined): void =>
+            middleTierUsernamePasswordAuthenticationStrategy_setVaultReference(
+              authSpec,
+              value ?? '',
+            )
+          }
+        />
+      </>
+    );
+  },
+);
 
 const GCPWorkloadIdentityFederationAuthenticationStrategyEditor = observer(
   (props: {
@@ -1238,6 +1265,15 @@ const renderAuthenticationStrategyEditor = (
         isReadOnly={isReadOnly}
       />
     );
+  } else if (
+    authSpec instanceof MiddleTierUsernamePasswordAuthenticationStrategy
+  ) {
+    return (
+      <MiddleTierUsernamePasswordAuthenticationStrategyEditor
+        authSpec={authSpec}
+        isReadOnly={isReadOnly}
+      />
+    );
   } else if (
     authSpec instanceof GCPWorkloadIdentityFederationAuthenticationStrategy
   ) {