@finos/legend-application-studio 13.1.0 → 14.0.0

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

@@ -0,0 +1,376 @@
+/**
+ * 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 (modelImportEditorState instanceof ExtensionModelImporterEditorState) {
+      modelImportEditorState.extensionConfiguration
+        .load(editorStore)
+        .catch(applicationStore.alertUnhandledError);
+    } else 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.extensionConfiguration.renderer(
+        editorStore,
+      );
+    } 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
   ) {