@finos/legend-application-studio 28.2.3 → 28.2.4

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

@@ -18,8 +18,6 @@ import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import {
   type RelationalDatabaseConnectionValueState,
-  CORE_AUTHENTICATION_STRATEGY_TYPE,
-  CORE_DATASOURCE_SPEC_TYPE,
   RELATIONAL_DATABASE_TAB_TYPE,
   POST_PROCESSOR_TYPE,
 } from '../../../../stores/editor/editor-state/element-editor-state/connection/ConnectionEditorState.js';
@@ -61,6 +59,8 @@ import {
   type RelationalDatabaseConnection,
   type Store,
   type PostProcessor,
+  type DatasourceSpecification,
+  type AuthenticationStrategy,
   DatabaseType,
   DelegatedKerberosAuthenticationStrategy,
   OAuthAuthenticationStrategy,
@@ -165,6 +165,7 @@ import {
 import { MapperPostProcessorEditor } from './post-processor-editor/MapperPostProcessorEditor.js';
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 import type { MapperPostProcessorEditorState } from '../../../../stores/editor/editor-state/element-editor-state/connection/PostProcessorEditorState.js';
+import { prettyCONSTName, uniq } from '@finos/legend-shared';
 
 const LocalH2DatasourceSpecificationEditor = observer(
   (props: {
@@ -1575,43 +1576,58 @@ const RelationalConnectionGeneralEditor = observer(
     const connection = connectionValueState.connection;
     const editorStore = useEditorStore();
     const plugins = editorStore.pluginManager.getApplicationPlugins();
+    const databseTypeConfigs =
+      connectionValueState.editorStore.graphState
+        .relationalDatabseTypeConfigurations;
+    const availableDbTypes = databseTypeConfigs
+      ? // Currently H2 Flow is not returned in relational configs. We will remove this once it is properly returned as a supported flow in engine
+        uniq([DatabaseType.H2, ...databseTypeConfigs.map((e) => e.type)])
+      : Object.values(DatabaseType);
 
-    // database type
-    const typeOptions = Object.values(DatabaseType).map((type) => ({
-      value: type,
-      label: type,
+    const dbTypes = availableDbTypes.map((dbType) => ({
+      value: dbType,
+      label: dbType,
     }));
-    const selectedType = {
+
+    const selectedDbType = {
       value: connection.type,
       label: connection.type,
     };
+
     const onTypeChange = (
       val: { label: string; value: string } | null,
     ): void => {
       dBConnection_setType(connection, val?.value ?? DatabaseType.H2);
+      if (connectionValueState.selectedValidDatasources[0]) {
+        connectionValueState.changeDatasourceSpec(
+          connectionValueState.selectedValidDatasources[0],
+        );
+      }
+      if (connectionValueState.selectedValidAuthenticationStrategies[0]) {
+        connectionValueState.changeAuthenticationStrategy(
+          connectionValueState.selectedValidAuthenticationStrategies[0],
+        );
+      }
     };
 
     // source spec type
-    const sourceSpecOptions = (
-      Object.values(CORE_DATASOURCE_SPEC_TYPE) as string[]
-    )
-      .concat(
-        plugins.flatMap(
-          (plugin) =>
-            (
-              plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
-            ).getExtraDatasourceSpecificationTypes?.() ?? [],
-        ),
-      )
-      .map((type) => ({
+    const sourceSpecOptions = connectionValueState.selectedValidDatasources.map(
+      (type) => ({
         value: type,
-        label: type,
-      }));
-    const selectedSourceSpec = {
-      label:
-        connectionValueState.selectedDatasourceSpecificationType ?? 'Unknown',
-      value: connectionValueState.selectedDatasourceSpecificationType,
-    };
+        label: prettyCONSTName(type),
+      }),
+    );
+
+    const selectedSourceSpec = (
+      spec: DatasourceSpecification,
+    ): { label: string; value: string | undefined } => ({
+      label: prettyCONSTName(
+        connectionValueState.selectedDatasourceSpecificationType(spec) ??
+          'Unknown',
+      ),
+      value: connectionValueState.selectedDatasourceSpecificationType(spec),
+    });
+
     const onSourceSpecChange = (
       val: { label: string; value: string | undefined } | null,
     ): void => {
@@ -1621,26 +1637,24 @@ const RelationalConnectionGeneralEditor = observer(
     };
 
     // auth type
-    const authOptions = (
-      Object.values(CORE_AUTHENTICATION_STRATEGY_TYPE) as string[]
-    )
-      .concat(
-        plugins.flatMap(
-          (plugin) =>
-            (
-              plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
-            ).getExtraAuthenticationStrategyTypes?.() ?? [],
-        ),
-      )
-      .map((type) => ({
-        value: type,
-        label: type,
-      }));
-    const selectedAuth = {
-      label:
-        connectionValueState.selectedAuthenticationStrategyType ?? 'Unknown',
-      value: connectionValueState.selectedAuthenticationStrategyType,
-    };
+    const authOptions =
+      connectionValueState.selectedValidAuthenticationStrategies.map(
+        (type) => ({
+          value: type,
+          label: prettyCONSTName(type),
+        }),
+      );
+
+    const selectedAuth = (
+      auth: AuthenticationStrategy,
+    ): { label: string; value: string | undefined } => ({
+      label: prettyCONSTName(
+        connectionValueState.selectedAuthenticationStrategyType(auth) ??
+          'Unknown',
+      ),
+      value: connectionValueState.selectedAuthenticationStrategyType(auth),
+    });
+
     const onAuthStrategyChange = (
       val: { label: string; value: string | undefined } | null,
     ): void => {
@@ -1661,9 +1675,9 @@ const RelationalConnectionGeneralEditor = observer(
                   Database Type
                 </div>
                 <CustomSelectorInput
-                  options={typeOptions}
+                  options={dbTypes}
                   onChange={onTypeChange}
-                  value={selectedType}
+                  value={selectedDbType}
                   darkMode={true}
                 />
               </PanelFormSection>
@@ -1685,9 +1699,9 @@ const RelationalConnectionGeneralEditor = observer(
                     Database Type
                   </div>
                   <CustomSelectorInput
-                    options={typeOptions}
+                    options={dbTypes}
                     onChange={onTypeChange}
-                    value={selectedType}
+                    value={selectedDbType}
                     darkMode={true}
                   />
                 </PanelFormSection>
@@ -1712,13 +1726,20 @@ const RelationalConnectionGeneralEditor = observer(
                     <PanelHeader title="datasource specification"></PanelHeader>
                     <PanelContent className="relational-connection-editor__auth__content">
                       <PanelFormSection>
-                        <div className="panel__content__form__section__header__label">
-                          Datasource
+                        <div style={{ width: '100%' }}>
+                          <div
+                            style={{ display: 'inline-block', width: '10px' }}
+                            className="panel__content__form__section__header__label"
+                          >
+                            Datasource
+                          </div>
                         </div>
                         <CustomSelectorInput
                           options={sourceSpecOptions}
                           onChange={onSourceSpecChange}
-                          value={selectedSourceSpec}
+                          value={selectedSourceSpec(
+                            connection.datasourceSpecification,
+                          )}
                           darkMode={true}
                         />
                       </PanelFormSection>
@@ -1739,13 +1760,20 @@ const RelationalConnectionGeneralEditor = observer(
                     <PanelHeader title="authentication strategy"></PanelHeader>
                     <PanelContent className="relational-connection-editor__source__content">
                       <PanelFormSection>
-                        <div className="panel__content__form__section__header__label">
-                          Authentication
+                        <div style={{ width: '100%' }}>
+                          <div
+                            style={{ display: 'inline-block', width: '10px' }}
+                            className="panel__content__form__section__header__label"
+                          >
+                            Authentication
+                          </div>
                         </div>
                         <CustomSelectorInput
                           options={authOptions}
                           onChange={onAuthStrategyChange}
-                          value={selectedAuth}
+                          value={selectedAuth(
+                            connection.authenticationStrategy,
+                          )}
                           darkMode={true}
                         />
                       </PanelFormSection>

package/src/components/editor/editor-group/service-editor/testable/ServiceTestDataEditor.tsx

@@ -615,10 +615,24 @@ export const ServiceTestDataEditor = observer(
               tooltipText="Click to add connection test data"
             />
           )}
+          <PanelLoadingIndicator
+            isLoading={
+              Boolean(
+                testDataState.selectedDataState?.generatingTestDataState
+                  .isInProgress,
+              ) ||
+              Boolean(
+                testDataState.selectedDataState?.generateSchemaQueryState
+                  .isInProgress,
+              )
+            }
+          />
           {hideExplorer && selectedDataState ? (
-            <ConnectionTestDataEditor
-              connectionTestDataState={selectedDataState}
-            />
+            <>
+              <ConnectionTestDataEditor
+                connectionTestDataState={selectedDataState}
+              />
+            </>
           ) : (
             <ResizablePanelGroup orientation="vertical">
               <ResizablePanel minSize={100}>
@@ -661,18 +675,6 @@ export const ServiceTestDataEditor = observer(
                 <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
               </ResizablePanelSplitter>
               <ResizablePanel minSize={600}>
-                <PanelLoadingIndicator
-                  isLoading={
-                    Boolean(
-                      testDataState.selectedDataState?.generatingTestDataState
-                        .isInProgress,
-                    ) ||
-                    Boolean(
-                      testDataState.selectedDataState?.generateSchemaQueryState
-                        .isInProgress,
-                    )
-                  }
-                />
                 {testDataState.selectedDataState && (
                   <ConnectionTestDataEditor
                     connectionTestDataState={testDataState.selectedDataState}

package/src/stores/editor/EditorGraphState.ts

@@ -86,6 +86,7 @@ import {
   createGraphBuilderReport,
   ExecutionEnvironmentInstance,
   type FunctionActivatorConfiguration,
+  type RelationalDatabaseTypeConfiguration,
 } from '@finos/legend-graph';
 import { CONFIGURATION_EDITOR_TAB } from './editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js';
 import { PACKAGEABLE_ELEMENT_TYPE } from './utils/ModelClassifierUtils.js';
@@ -126,6 +127,9 @@ export class EditorGraphState {
   isUpdatingApplication = false; // including graph update and async operations such as change detection
 
   functionActivatorConfigurations: FunctionActivatorConfiguration[] = [];
+  relationalDatabseTypeConfigurations:
+    | RelationalDatabaseTypeConfiguration[]
+    | undefined;
 
   warnings: CompilationWarning[] = [];
   error: EngineError | undefined;
@@ -151,12 +155,14 @@ export class EditorGraphState {
       warnings: observable,
       error: observable,
       enableStrictMode: observable,
+      relationalDatabseTypeConfigurations: observable,
       problems: computed,
       areProblemsStale: computed,
       isApplicationUpdateOperationIsRunning: computed,
       clearProblems: action,
       setEnableStrictMode: action,
       setMostRecentCompilationGraphHash: action,
+      fetchAvailableRelationalDatabseTypeConfigurations: flow,
       fetchAvailableFunctionActivatorConfigurations: flow,
       buildGraph: flow,
       loadEntityChangesToGraph: flow,
@@ -289,6 +295,30 @@ export class EditorGraphState {
     }
   }
 
+  *fetchAvailableRelationalDatabseTypeConfigurations(): GeneratorFn<void> {
+    try {
+      this.relationalDatabseTypeConfigurations =
+        (yield this.editorStore.graphManagerState.graphManager.getAvailableRelationalDatabaseTypeConfigurations()) as
+          | RelationalDatabaseTypeConfiguration[]
+          | undefined;
+    } catch (error) {
+      assertErrorThrown(error);
+      this.editorStore.applicationStore.logService.error(
+        LogEvent.create(LEGEND_STUDIO_APP_EVENT.GENERIC_FAILURE),
+        error,
+      );
+      this.editorStore.applicationStore.notificationService.notifyError(error);
+    }
+  }
+
+  findRelationalDatabaseTypeConfiguration(
+    type: string,
+  ): RelationalDatabaseTypeConfiguration | undefined {
+    return this.relationalDatabseTypeConfigurations?.find(
+      (aFlow) => aFlow.type === type,
+    );
+  }
+
   *buildGraph(entities: Entity[]): GeneratorFn<GraphBuilderResult> {
     try {
       this.isInitializingGraph = true;

package/src/stores/editor/EditorStore.ts

@@ -277,7 +277,6 @@ export class EditorStore implements CommandRegistrar {
       this,
       this.sdlcState,
     );
-
     // extensions
     this.extensionStates = this.pluginManager
       .getApplicationPlugins()
@@ -727,6 +726,7 @@ export class EditorStore implements CommandRegistrar {
       this.graphState.graphGenerationState.globalFileGenerationState.fetchAvailableFileGenerationDescriptions(),
       this.graphState.graphGenerationState.externalFormatState.fetchExternalFormatDescriptions(),
       this.graphState.fetchAvailableFunctionActivatorConfigurations(),
+      this.graphState.fetchAvailableRelationalDatabseTypeConfigurations(),
       this.sdlcState.fetchProjectVersions(),
       this.sdlcState.fetchPublishedProjectVersions(),
     ]);
@@ -768,6 +768,7 @@ export class EditorStore implements CommandRegistrar {
       this.graphState.graphGenerationState.globalFileGenerationState.fetchAvailableFileGenerationDescriptions(),
       this.graphState.graphGenerationState.externalFormatState.fetchExternalFormatDescriptions(),
       this.graphState.fetchAvailableFunctionActivatorConfigurations(),
+      this.graphState.fetchAvailableRelationalDatabseTypeConfigurations(),
       this.sdlcState.fetchProjectVersions(),
       this.sdlcState.fetchPublishedProjectVersions(),
     ]);

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

@@ -27,7 +27,6 @@ import {
   type PackageableElement,
   type Connection,
   type ValidationIssue,
-  type AuthenticationStrategy,
   type DatasourceSpecification,
   PackageableConnection,
   JsonModelConnection,
@@ -57,6 +56,7 @@ import {
   isStubbed_PackageableElement,
   type PostProcessor,
   MapperPostProcessor,
+  type AuthenticationStrategy,
 } from '@finos/legend-graph';
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import {
@@ -87,15 +87,16 @@ export enum RELATIONAL_DATABASE_TAB_TYPE {
   POST_PROCESSORS = 'Post Processors',
 }
 
+// Please do not change these values unless they change in the backend
 export enum CORE_DATASOURCE_SPEC_TYPE {
-  STATIC = 'Static',
-  H2_LOCAL = 'H2 Local',
-  H2_EMBEDDED = 'H2 Embedded',
-  DATABRICKS = 'Databricks',
-  SNOWFLAKE = 'Snowflake',
-  REDSHIFT = 'Redshift',
-  BIGQUERY = 'Big Query',
-  SPANNER = 'Spanner',
+  STATIC = 'static',
+  H2_LOCAL = 'h2Local',
+  H2_EMBEDDED = 'h2Embedded',
+  DATABRICKS = 'databricks',
+  SNOWFLAKE = 'snowflake',
+  REDSHIFT = 'redshift',
+  BIGQUERY = 'bigQuery',
+  SPANNER = 'spanner',
   TRINO = 'Trino',
 }
 
@@ -103,17 +104,18 @@ export enum POST_PROCESSOR_TYPE {
   MAPPER = 'Mapper',
 }
 
+// Please do not change these values unless they change in the backend
 export enum CORE_AUTHENTICATION_STRATEGY_TYPE {
-  DELEGATED_KERBEROS = 'Delegated Kerberos',
-  H2_DEFAULT = 'H2 Default',
-  SNOWFLAKE_PUBLIC = 'Snowflake Public',
-  GCP_APPLICATION_DEFAULT_CREDENTIALS = 'GCP Application Default Credentials',
-  API_TOKEN = 'API Token',
-  OAUTH = 'OAuth',
-  USERNAME_PASSWORD = 'Username Password',
-  GCP_WORKLOAD_IDENTITY_FEDERATION = 'GCP Workload Identity Federation',
-  MIDDLE_TIER_USERNAME_PASSWORD = 'Middle-tier Username Password',
-  TRINO_DELEGATED_KERBEROS = 'Trino Delegated Kerberos',
+  DELEGATED_KERBEROS = 'delegatedKerberos',
+  H2_DEFAULT = 'h2Default',
+  SNOWFLAKE_PUBLIC = 'snowflakePublic',
+  GCP_APPLICATION_DEFAULT_CREDENTIALS = 'gcpApplicationDefaultCredentials',
+  API_TOKEN = 'apiToken',
+  OAUTH = 'oauth',
+  USERNAME_PASSWORD = 'userNamePassword',
+  GCP_WORKLOAD_IDENTITY_FEDERATION = 'gcpWorkloadIdentityFederation',
+  MIDDLE_TIER_USERNAME_PASSWORD = 'middleTierUserNamePassword',
+  TRINO_DELEGATED_KERBEROS = 'TrinoDelegatedKerberosAuth',
 }
 
 export class RelationalDatabaseConnectionValueState extends ConnectionValueState {
@@ -121,7 +123,6 @@ export class RelationalDatabaseConnectionValueState extends ConnectionValueState
   localMode = false;
   selectedTab = RELATIONAL_DATABASE_TAB_TYPE.GENERAL;
   postProcessorState: PostProcessorEditorState | undefined;
-
   constructor(
     editorStore: EditorStore,
     connection: RelationalDatabaseConnection,
@@ -131,13 +132,12 @@ export class RelationalDatabaseConnectionValueState extends ConnectionValueState
       localMode: observable,
       selectedTab: observable,
       postProcessorState: observable,
-      selectedDatasourceSpecificationType: computed,
-      selectedAuthenticationStrategyType: computed,
+      selectedValidDatasources: computed,
+      connection: observable,
       setLocalMode: action,
       setSelectedTab: action,
       selectPostProcessor: action,
     });
-
     this.connection = connection;
   }
 
@@ -188,8 +188,9 @@ export class RelationalDatabaseConnectionValueState extends ConnectionValueState
     return `${this.connection.type} connection`;
   }
 
-  get selectedDatasourceSpecificationType(): string | undefined {
-    const spec = this.connection.datasourceSpecification;
+  selectedDatasourceSpecificationType(
+    spec: DatasourceSpecification,
+  ): string | undefined {
     if (spec instanceof StaticDatasourceSpecification) {
       return CORE_DATASOURCE_SPEC_TYPE.STATIC;
     } else if (spec instanceof EmbeddedH2DatasourceSpecification) {
@@ -227,6 +228,42 @@ export class RelationalDatabaseConnectionValueState extends ConnectionValueState
     return undefined;
   }
 
+  get selectedValidDatasources(): string[] {
+    return (
+      this.editorStore.graphState.findRelationalDatabaseTypeConfiguration(
+        this.connection.type,
+      )?.compatibleDataSources ??
+      (Object.values(CORE_DATASOURCE_SPEC_TYPE) as string[]).concat(
+        this.editorStore.pluginManager
+          .getApplicationPlugins()
+          .flatMap(
+            (plugin) =>
+              (
+                plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
+              ).getExtraDatasourceSpecificationTypes?.() ?? [],
+          ),
+      )
+    );
+  }
+
+  get selectedValidAuthenticationStrategies(): string[] {
+    return (
+      this.editorStore.graphState.findRelationalDatabaseTypeConfiguration(
+        this.connection.type,
+      )?.compatibleAuthStrategies ??
+      (Object.values(CORE_AUTHENTICATION_STRATEGY_TYPE) as string[]).concat(
+        this.editorStore.pluginManager
+          .getApplicationPlugins()
+          .flatMap(
+            (plugin) =>
+              (
+                plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
+              ).getExtraAuthenticationStrategyTypes?.() ?? [],
+          ),
+      )
+    );
+  }
+
   changeDatasourceSpec(type: string): void {
     const observerContext =
       this.editorStore.changeDetectionState.observerContext;
@@ -314,8 +351,9 @@ export class RelationalDatabaseConnectionValueState extends ConnectionValueState
     );
   }
 
-  get selectedAuthenticationStrategyType(): string | undefined {
-    const auth = this.connection.authenticationStrategy;
+  selectedAuthenticationStrategyType(
+    auth: AuthenticationStrategy,
+  ): string | undefined {
     if (auth instanceof DelegatedKerberosAuthenticationStrategy) {
       return CORE_AUTHENTICATION_STRATEGY_TYPE.DELEGATED_KERBEROS;
     } else if (auth instanceof DefaultH2AuthenticationStrategy) {