@finos/legend-application-studio 22.4.8 → 22.6.0

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

@@ -80,6 +80,7 @@ import {
   RedshiftDatasourceSpecification,
   PackageableElementExplicitReference,
   MapperPostProcessor,
+  SpannerDatasourceSpecification,
 } from '@finos/legend-graph';
 import type { LegendStudioApplicationPlugin } from '../../../../stores/LegendStudioApplicationPlugin.js';
 import type { STO_Relational_LegendStudioApplicationPlugin_Extension } from '../../../../stores/STO_Relational_LegendStudioApplicationPlugin_Extension.js';
@@ -132,6 +133,11 @@ import {
   snowflakePublicAuthenticationStrategy_setPassPhraseVaultReference,
   snowflakePublicAuthenticationStrategy_setPrivateKeyVaultReference,
   snowflakePublicAuthenticationStrategy_setPublicUserName,
+  spannerDatasourceSpecification_setDatabaseId,
+  spannerDatasourceSpecification_setProxyHost,
+  spannerDatasourceSpecification_setInstanceId,
+  spannerDatasourceSpecification_setProxyPort,
+  spannerDatasourceSpecification_setProjectId,
   staticDatasourceSpecification_setDatabaseName,
   staticDatasourceSpecification_setHost,
   staticDatasourceSpecification_setPort,
@@ -621,6 +627,70 @@ const BigQueryDatasourceSpecificationEditor = observer(
   },
 );
 
+const SpannerDatasourceSpecificationEditor = observer(
+  (props: {
+    sourceSpec: SpannerDatasourceSpecification;
+    isReadOnly: boolean;
+  }) => {
+    const { sourceSpec, isReadOnly } = props;
+    return (
+      <>
+        <PanelFormTextField
+          isReadOnly={isReadOnly}
+          value={sourceSpec.projectId}
+          name="project id"
+          prompt="Your Google Cloud Platform (GCP) project identifier"
+          update={(value: string | undefined): void =>
+            spannerDatasourceSpecification_setProjectId(sourceSpec, value ?? '')
+          }
+        />
+        <PanelFormTextField
+          isReadOnly={isReadOnly}
+          value={sourceSpec.instanceId}
+          name="instance id"
+          prompt="Spanner instance identifier in Google Cloud Platform (GCP)"
+          update={(value: string | undefined): void =>
+            spannerDatasourceSpecification_setInstanceId(
+              sourceSpec,
+              value ?? '',
+            )
+          }
+        />
+        <PanelFormTextField
+          isReadOnly={isReadOnly}
+          value={sourceSpec.databaseId}
+          name="database id"
+          prompt="Spanner database identifier"
+          update={(value: string | undefined): void =>
+            spannerDatasourceSpecification_setDatabaseId(
+              sourceSpec,
+              value ?? '',
+            )
+          }
+        />
+        <PanelFormTextField
+          isReadOnly={isReadOnly}
+          value={sourceSpec.proxyHost}
+          name="proxyHost"
+          prompt="Specifies the connection host. Leave blank to use GCP defaults"
+          update={(value: string | undefined): void =>
+            spannerDatasourceSpecification_setProxyHost(sourceSpec, value ?? '')
+          }
+        />
+        <PanelFormTextField
+          isReadOnly={isReadOnly}
+          value={sourceSpec.proxyPort}
+          name="proxyPort"
+          prompt="Specifies the connection port. Leave blank to use GCP defaults"
+          update={(value: string | undefined): void =>
+            spannerDatasourceSpecification_setProxyPort(sourceSpec, value ?? '')
+          }
+        />
+      </>
+    );
+  },
+);
+
 // auth strategy
 
 const DelegatedKerberosAuthenticationStrategyEditor = observer(
@@ -1230,6 +1300,13 @@ const renderDatasourceSpecificationEditor = (
         isReadOnly={isReadOnly}
       />
     );
+  } else if (sourceSpec instanceof SpannerDatasourceSpecification) {
+    return (
+      <SpannerDatasourceSpecificationEditor
+        sourceSpec={sourceSpec}
+        isReadOnly={isReadOnly}
+      />
+    );
   } else {
     const extraDatasourceSpecificationEditorRenderers = plugins.flatMap(
       (plugin) =>
@@ -1324,7 +1401,6 @@ const renderAuthenticationStrategyEditor = (
     return null;
   }
 };
-
 const RelationalConnectionGeneralEditor = observer(
   (props: {
     connectionValueState: RelationalDatabaseConnectionValueState;

package/src/components/editor/edit-panel/mapping-editor/InstanceSetImplementationEditor.tsx

@@ -125,7 +125,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
         if (!embeddedSetImpls.length) {
           setSourceElementForSourceSelectorModal(null);
         } else {
-          applicationStore.setActionAlertInfo({
+          applicationStore.alertService.setActionAlertInfo({
             message: CHANGING_SOURCE_ON_EMBEDDED,
             actions: [
               {
@@ -164,7 +164,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
         } else if (droppedPackagableElement instanceof FlatData) {
           const allRecordTypes = getAllRecordTypes(droppedPackagableElement);
           if (allRecordTypes.length === 0) {
-            applicationStore.notifyWarning(
+            applicationStore.notificationService.notifyWarning(
               `Source flat-data store '${droppedPackagableElement.path}' must have at least one action`,
             );
             return;
@@ -184,7 +184,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
             (schema.tables as (Table | View)[]).concat(schema.views),
           );
           if (relations.length === 0) {
-            applicationStore.notifyWarning(
+            applicationStore.notificationService.notifyWarning(
               `Source database '${droppedPackagableElement.path}' must have at least one table or view`,
             );
             return;
@@ -218,7 +218,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
           if (!embeddedSetImpls.length) {
             changeClassMappingSourceDriver(droppedPackagableElement);
           } else {
-            applicationStore.setActionAlertInfo({
+            applicationStore.alertService.setActionAlertInfo({
               message: CHANGING_SOURCE_ON_EMBEDDED,
               actions: [
                 {

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionBuilder.tsx

@@ -215,7 +215,7 @@ const MappingExecutionQueryEditor = observer(
                         await flowResult(
                           executionState.queryState.updateLamba(rawLambda),
                         );
-                        applicationStore.notifySuccess(
+                        applicationStore.notificationService.notifySuccess(
                           `Mapping execution query is updated`,
                         );
                         embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
@@ -223,7 +223,7 @@ const MappingExecutionQueryEditor = observer(
                         );
                       } catch (error) {
                         assertErrorThrown(error);
-                        applicationStore.notifyError(
+                        applicationStore.notificationService.notifyError(
                           `Can't save query: ${error.message}`,
                         );
                       }
@@ -288,7 +288,7 @@ const MappingExecutionQueryEditor = observer(
             MappingExecutionEmptyInputDataState
           ) {
             if (setImplementation instanceof OperationSetImplementation) {
-              applicationStore.notifyWarning(
+              applicationStore.notificationService.notifyWarning(
                 `Can't auto-generate input data for operation class mapping. Please pick a concrete class mapping instead`,
               );
             } else {
@@ -301,7 +301,7 @@ const MappingExecutionQueryEditor = observer(
               );
             }
           } else {
-            applicationStore.setActionAlertInfo({
+            applicationStore.alertService.setActionAlertInfo({
               message: 'Mapping execution input data is already set',
               prompt: 'Do you want to regenerate the input data?',
               type: ActionAlertType.CAUTION,

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionQueryBuilder.tsx

@@ -68,9 +68,13 @@ const MappingExecutionQueryBuilderSetupPanelContent = observer(
                 disabled={true}
                 options={[]}
                 value={selectedMappingOption}
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
                 formatOptionLabel={getPackageableElementOptionFormatter({
-                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  darkMode:
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightThemeEnabled,
                   graph: editorStore.graphManagerState.graph,
                 })}
               />

package/src/components/editor/edit-panel/mapping-editor/MappingTestEditor.tsx

@@ -138,7 +138,7 @@ const MappingTestQueryEditor = observer(
                         await flowResult(
                           testState.queryState.updateLamba(rawLambda),
                         );
-                        applicationStore.notifySuccess(
+                        applicationStore.notificationService.notifySuccess(
                           `Mapping test query is updated`,
                         );
                         embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
@@ -146,7 +146,7 @@ const MappingTestQueryEditor = observer(
                         );
                       } catch (error) {
                         assertErrorThrown(error);
-                        applicationStore.notifyError(
+                        applicationStore.notificationService.notifyError(
                           `Can't save query: ${error.message}`,
                         );
                       }
@@ -198,7 +198,7 @@ const MappingTestQueryEditor = observer(
 
         // Attempt to generate data for input data panel as we pick the class mapping
         if (setImplementation) {
-          applicationStore.setActionAlertInfo({
+          applicationStore.alertService.setActionAlertInfo({
             message: 'Mapping test input data is already set',
             prompt: 'Do you want to regenerate the input data?',
             type: ActionAlertType.CAUTION,

package/src/components/editor/edit-panel/mapping-editor/PropertyMappingsEditor.tsx

@@ -239,7 +239,7 @@ export const PropertyMappingEditor = observer(
             mappingEditorState.openMappingElement(embedded, true);
           }
         } else {
-          applicationStore.notifyWarning(
+          applicationStore.notificationService.notifyWarning(
             `Can't visit mapping element for type '${propertyRawType.name}'`,
           );
         }

package/src/components/editor/edit-panel/project-configuration-editor/ProjectConfigurationEditor.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useEffect } from 'react';
-import { prettyCONSTName } from '@finos/legend-shared';
+import { isNonNullable, prettyCONSTName } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
 import {
   ProjectConfigurationEditorState,
@@ -28,10 +28,11 @@ import {
   ExclamationCircleIcon,
   Panel,
   PanelForm,
-  PanelFormTextField,
   CheckSquareIcon,
   SquareIcon,
   ExclamationTriangleIcon,
+  PanelFormSection,
+  PanelListItem,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import {
@@ -42,12 +43,17 @@ import {
 } from '@finos/legend-server-sdlc';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
+  ActionAlertActionType,
+  ActionAlertType,
+  DocumentationLink,
   DocumentationPreview,
   LEGEND_APPLICATION_DOCUMENTATION_KEY,
+  shouldDisplayVirtualAssistantDocumentationEntry,
   useApplicationStore,
 } from '@finos/legend-application';
 import { ProjectDependencyEditor } from './ProjectDependencyEditor.js';
 import type { ProjectData } from '@finos/legend-server-depot';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../stores/LegendStudioDocumentation.js';
 
 const ProjectStructureEditor = observer(
   (props: { projectConfig: ProjectConfiguration; isReadOnly: boolean }) => {
@@ -63,12 +69,31 @@ const ProjectStructureEditor = observer(
       latestVersion &&
       (latestVersion.version > projectConfig.projectStructureVersion.version ||
         latestProjectExtensionVersion > currentProjectExtensionVersion);
+    const isGroupIdChanged =
+      editorStore.projectConfigurationEditorState.isGroupIdChanged;
+    const isArtifactIdChanged =
+      editorStore.projectConfigurationEditorState.isArtifactIdChanged;
+
     const updateVersion = (): void => {
       flowResult(
         editorStore.projectConfigurationEditorState.updateToLatestStructure(),
       ).catch(applicationStore.alertUnhandledError);
     };
 
+    const changeGroupId: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      const stringValue = event.target.value;
+      projectConfig.setGroupId(stringValue);
+    };
+
+    const changeArtifactId: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      const stringValue = event.target.value;
+      projectConfig.setArtifactId(stringValue);
+    };
+
     return (
       <div className="panel__content__lists">
         <div className="project-configuration-editor__project__structure__version">
@@ -104,27 +129,72 @@ const ProjectStructureEditor = observer(
         </div>
 
         <PanelForm>
-          <PanelFormTextField
-            isReadOnly={isReadOnly}
-            value={projectConfig.groupId}
-            name="Group ID"
-            prompt="The domain for artifacts generated as part of the project build
-              pipeline and published to an artifact repository"
-            update={(value: string | undefined): void =>
-              projectConfig.setGroupId(value ?? '')
-            }
-          />
-          <PanelFormTextField
-            isReadOnly={isReadOnly}
-            value={projectConfig.artifactId}
-            name="Artifact ID"
-            prompt="The identifier (within the domain specified by group ID) for
+          <PanelFormSection>
+            <div className="panel__content__form__section__header__label">
+              Group ID
+            </div>
+            <div className="panel__content__form__section__header__prompt">
+              The domain for artifacts generated as part of the project build
+              pipeline and published to an artifact repository
+            </div>
+            <PanelListItem>
+              <div className="input-group">
+                <input
+                  className={clsx(
+                    'input input--dark input-group__input panel__content__form__section__input input--full',
+                    { 'input--caution': isGroupIdChanged },
+                  )}
+                  title="Group ID"
+                  spellCheck={false}
+                  disabled={isReadOnly}
+                  value={projectConfig.groupId}
+                  onChange={changeGroupId}
+                />
+
+                {isGroupIdChanged && (
+                  <DocumentationLink
+                    className="panel__content__form__section__list__item__edit project-configuration-editor__documentation-btn"
+                    documentationKey={
+                      LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_UPDATE_PROJECT_GAV_COORDINATES
+                    }
+                  />
+                )}
+              </div>
+            </PanelListItem>
+          </PanelFormSection>
+          <PanelFormSection>
+            <div className="panel__content__form__section__header__label">
+              Artifact ID
+            </div>
+            <div className="panel__content__form__section__header__prompt">
+              The identifier (within the domain specified by group ID) for
               artifacts generated as part of the project build pipeline and
-              published to an artifact repository"
-            update={(value: string | undefined): void =>
-              projectConfig.setArtifactId(value ?? '')
-            }
-          />
+              published to an artifact repository
+            </div>
+            <PanelListItem>
+              <div className="input-group">
+                <input
+                  className={clsx(
+                    'input input--dark input-group__input panel__content__form__section__input input--full',
+                    { 'input--caution': isArtifactIdChanged },
+                  )}
+                  title="Artifact ID"
+                  spellCheck={false}
+                  disabled={isReadOnly}
+                  value={projectConfig.artifactId}
+                  onChange={changeArtifactId}
+                />
+                {isArtifactIdChanged && (
+                  <DocumentationLink
+                    className="panel__content__form__section__list__item__edit project-configuration-editor__documentation-btn"
+                    documentationKey={
+                      LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_UPDATE_PROJECT_GAV_COORDINATES
+                    }
+                  />
+                )}
+              </div>
+            </PanelListItem>
+          </PanelFormSection>
         </PanelForm>
       </div>
     );
@@ -359,13 +429,81 @@ export const ProjectConfigurationEditor = observer(() => {
   };
   const disableAddButton =
     selectedTab !== CONFIGURATION_EDITOR_TAB.PROJECT_DEPENDENCIES || isReadOnly;
-  const updateConfigs = (): void => {
-    editorStore.localChangesState.alertUnsavedChanges((): void => {
-      flowResult(configState.updateConfigs()).catch(
-        applicationStore.alertUnhandledError,
+
+  const updateGavConfigs = (): void => {
+    const documentationEntry =
+      applicationStore.documentationService.getDocEntry(
+        LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_UPDATE_PROJECT_GAV_COORDINATES,
       );
+
+    editorStore.applicationStore.alertService.setActionAlertInfo({
+      message:
+        'Please be cautious that modifying group ID or artifact ID (GAV coordinates) can potentially have a big downstream impact. Be aware that the project will lose all previous versions; also, any dependant projects can break too if the coordinates are not changed in a controlled way.',
+      type: ActionAlertType.STANDARD,
+      prompt: documentationEntry
+        ? 'Please see the instructions for more guidance'
+        : undefined,
+      actions: [
+        {
+          label: (
+            <>
+              Acknowledge and Proceed
+              <DocumentationLink
+                className="panel__content__form__section__list__item__edit project-configuration-editor__documentation-btn"
+                documentationKey={
+                  LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_UPDATE_PROJECT_GAV_COORDINATES
+                }
+              />
+            </>
+          ),
+          type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+          handler: (): void => {
+            editorStore.localChangesState.alertUnsavedChanges((): void => {
+              flowResult(configState.updateConfigs()).catch(
+                applicationStore.alertUnhandledError,
+              );
+            });
+          },
+        },
+        documentationEntry && {
+          label: 'View Instructions',
+          default: true,
+          type: ActionAlertActionType.PROCEED,
+          handler: (): void => {
+            if (
+              shouldDisplayVirtualAssistantDocumentationEntry(
+                documentationEntry,
+              )
+            ) {
+              applicationStore.assistantService.openDocumentationEntry(
+                documentationEntry._documentationKey,
+              );
+            } else if (documentationEntry.url) {
+              applicationStore.navigationService.navigator.visitAddress(
+                documentationEntry.url,
+              );
+            }
+          },
+        },
+        {
+          label: 'Cancel',
+          type: ActionAlertActionType.PROCEED,
+        },
+      ].filter(isNonNullable),
     });
   };
+
+  const updateConfigs = (): void => {
+    if (configState.isArtifactIdChanged || configState.isGroupIdChanged) {
+      updateGavConfigs();
+    } else {
+      editorStore.localChangesState.alertUnsavedChanges((): void => {
+        flowResult(configState.updateConfigs()).catch(
+          applicationStore.alertUnhandledError,
+        );
+      });
+    }
+  };
   useEffect(() => {
     if (
       configState.projectConfiguration &&

package/src/components/editor/edit-panel/project-configuration-editor/ProjectDependencyEditor.tsx

@@ -213,14 +213,18 @@ const DependencyTreeNodeContextMenu = observer(
     const viewProjectUrl = getViewProjectUrl();
 
     const viewProject = (): void => {
-      applicationStore.navigator.visitAddress(
-        applicationStore.navigator.generateAddress(viewProjectUrl),
+      applicationStore.navigationService.navigator.visitAddress(
+        applicationStore.navigationService.navigator.generateAddress(
+          viewProjectUrl,
+        ),
       );
     };
     const viewSDLCProject = (): void => {
       if (sdlcProjectUrl) {
-        applicationStore.navigator.visitAddress(
-          applicationStore.navigator.generateAddress(sdlcProjectUrl),
+        applicationStore.navigationService.navigator.visitAddress(
+          applicationStore.navigationService.navigator.generateAddress(
+            sdlcProjectUrl,
+          ),
         );
       }
     };
@@ -818,7 +822,7 @@ const ProjectVersionDependencyEditor = observer(
           );
         } catch (error) {
           assertErrorThrown(error);
-          applicationStore.log.error(
+          applicationStore.logService.error(
             LogEvent.create(LEGEND_STUDIO_APP_EVENT.SDLC_MANAGER_FAILURE),
             error,
           );
@@ -827,8 +831,8 @@ const ProjectVersionDependencyEditor = observer(
     };
     const viewProject = (): void => {
       if (!projectDependency.isLegacyDependency) {
-        applicationStore.navigator.visitAddress(
-          applicationStore.navigator.generateAddress(
+        applicationStore.navigationService.navigator.visitAddress(
+          applicationStore.navigationService.navigator.generateAddress(
             generateViewProjectByGAVRoute(
               guaranteeNonNullable(projectDependency.groupId),
               guaranteeNonNullable(projectDependency.artifactId),
@@ -844,8 +848,8 @@ const ProjectVersionDependencyEditor = observer(
     // In the future, the studio instance may be part of the project data
     const viewSDLCProject = (): void => {
       if (projectDependencyData) {
-        applicationStore.navigator.visitAddress(
-          applicationStore.navigator.generateAddress(
+        applicationStore.navigationService.navigator.visitAddress(
+          applicationStore.navigationService.navigator.generateAddress(
             generateViewVersionRoute(projectDependencyData.projectId, version),
           ),
         );