@finos/legend-application-studio 18.0.1 → 18.1.0

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

@@ -42,9 +42,17 @@ import {
   ArchiveIcon,
   Dialog,
   Panel,
+  PanelForm,
+  PanelSection,
+  PanelFormTextEditor,
+  CheckSquareIcon,
+  SquareIcon,
+  ExclamationTriangleIcon,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import {
+  type Platform,
+  PlatformConfiguration,
   ProjectDependency,
   type ProjectConfiguration,
 } from '@finos/legend-server-sdlc';
@@ -52,7 +60,9 @@ import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   ActionAlertActionType,
   ActionAlertType,
+  DocumentationPreview,
   EDITOR_LANGUAGE,
+  LEGEND_APPLICATION_DOCUMENTATION_KEY,
   TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
@@ -97,20 +107,6 @@ const ProjectStructureEditor = observer(
       latestVersion &&
       (latestVersion.version > projectConfig.projectStructureVersion.version ||
         latestProjectExtensionVersion > currentProjectExtensionVersion);
-    const changeGroupId: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      if (!isReadOnly) {
-        projectConfig.setGroupId(event.target.value);
-      }
-    };
-    const changeArtifactId: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      if (!isReadOnly) {
-        projectConfig.setArtifactId(event.target.value);
-      }
-    };
     const updateVersion = (): void => {
       flowResult(
         editorStore.projectConfigurationEditorState.updateToLatestStructure(),
@@ -151,43 +147,32 @@ const ProjectStructureEditor = observer(
             </button>
           )}
         </div>
-        <div className="panel__content__form">
-          <div className="panel__content__form__section">
-            <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>
-            <input
-              className="panel__content__form__section__input"
-              spellCheck={false}
-              disabled={isReadOnly}
+
+        <PanelForm>
+          <PanelSection>
+            <PanelFormTextEditor
+              isReadOnly={isReadOnly}
               value={projectConfig.groupId}
-              onChange={changeGroupId}
+              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 ?? '')
+              }
             />
-          </div>
-        </div>
-        <div className="panel__content__form">
-          <div className="panel__content__form__section">
-            <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
-            </div>
-            <input
-              className="panel__content__form__section__input"
-              spellCheck={false}
-              disabled={isReadOnly}
+            <PanelFormTextEditor
+              isReadOnly={isReadOnly}
               value={projectConfig.artifactId}
-              onChange={changeArtifactId}
+              name="Artifact ID"
+              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 ?? '')
+              }
             />
-          </div>
-        </div>
+          </PanelSection>
+        </PanelForm>
       </div>
     );
   },
@@ -228,32 +213,29 @@ const ProjectDependencyInfoModal = observer(
             <div className="modal__title">{prettyCONSTName(type)}</div>
           </div>
           <div className="modal__body">
-            <div className="panel__content">
-              {type === DEPENDENCY_INFO_TYPE.TREE ? (
-                <TextInputEditor
-                  inputValue={getDependencyTreeStringFromInfo(info)}
-                  isReadOnly={true}
-                  language={EDITOR_LANGUAGE.TEXT}
-                  showMiniMap={true}
-                />
-              ) : (
-                <TextInputEditor
-                  inputValue={getConflictsString(info)}
-                  isReadOnly={true}
-                  language={EDITOR_LANGUAGE.TEXT}
-                  showMiniMap={true}
-                />
-              )}
-            </div>
-
-            <div className="modal__footer">
-              <button
-                className="btn modal__footer__close-btn"
-                onClick={closeModal}
-              >
-                Close
-              </button>
-            </div>
+            {type === DEPENDENCY_INFO_TYPE.DEPENDENCY_TREE ? (
+              <TextInputEditor
+                inputValue={getDependencyTreeStringFromInfo(info)}
+                isReadOnly={true}
+                language={EDITOR_LANGUAGE.TEXT}
+                showMiniMap={true}
+              />
+            ) : (
+              <TextInputEditor
+                inputValue={getConflictsString(info)}
+                isReadOnly={true}
+                language={EDITOR_LANGUAGE.TEXT}
+                showMiniMap={true}
+              />
+            )}
+          </div>
+          <div className="modal__footer">
+            <button
+              className="btn modal__footer__close-btn"
+              onClick={closeModal}
+            >
+              Close
+            </button>
           </div>
         </div>
       </Dialog>
@@ -350,7 +332,7 @@ const ProjectDependencyEditor = observer(
           projectDependency.versionId === MASTER_SNAPSHOT_ALIAS
             ? SNAPSHOT_VERSION_ALIAS
             : projectDependency.versionId;
-        applicationStore.navigator.openNewWindow(
+        applicationStore.navigator.visitAddress(
           `${
             applicationStore.config.baseUrl
           }view/archive/${generateGAVCoordinates(
@@ -365,8 +347,8 @@ const ProjectDependencyEditor = observer(
     // In the future, the studio instance may be part of the project data
     const openProject = (): void => {
       if (projectDependencyData) {
-        applicationStore.navigator.openNewWindow(
-          applicationStore.navigator.generateLocation(
+        applicationStore.navigator.visitAddress(
+          applicationStore.navigator.generateAddress(
             generateViewProjectRoute(projectDependencyData.projectId),
           ),
         );
@@ -419,7 +401,7 @@ const ProjectDependencyEditor = observer(
           }
           onClick={openProject}
           tabIndex={-1}
-          title={'Open Project'}
+          title="Open Project"
         >
           <ExternalLinkSquareIcon />
         </button>
@@ -432,7 +414,7 @@ const ProjectDependencyEditor = observer(
           }
           onClick={openProjectinArchive}
           tabIndex={-1}
-          title={'Open Project in archive'}
+          title="Open Project in archive"
         >
           <ArchiveIcon />
         </button>
@@ -441,7 +423,7 @@ const ProjectDependencyEditor = observer(
           disabled={isReadOnly}
           onClick={deleteValue}
           tabIndex={-1}
-          title={'Close'}
+          title="Close"
         >
           <TimesIcon />
         </button>
@@ -450,13 +432,190 @@ const ProjectDependencyEditor = observer(
   },
 );
 
+const PlatformDependencyViewer = observer(
+  (props: {
+    platform: PlatformConfiguration;
+    isDefault: boolean;
+    isLatestVersion?: boolean | undefined;
+  }) => {
+    const { platform, isDefault, isLatestVersion } = props;
+
+    return (
+      <div className="platform-configurations-editor__dependency">
+        <div className="platform-configurations-editor__dependency__label">
+          <div className="platform-configurations-editor__dependency__label__status">
+            {isDefault && (
+              <CheckCircleIcon
+                className="platform-configurations-editor__dependency__label__status--default"
+                title="Platform version is up to date"
+              />
+            )}
+            {isLatestVersion !== undefined &&
+              (isLatestVersion ? (
+                <CheckCircleIcon
+                  className="platform-configurations-editor__dependency__label__status--up-to-date"
+                  title="Platform version is up to date"
+                />
+              ) : (
+                <ExclamationTriangleIcon
+                  className="platform-configurations-editor__dependency__label__status--outdated"
+                  title="Platform version is outdated"
+                />
+              ))}
+          </div>
+          <div className="platform-configurations-editor__dependency__label__text">
+            {platform.name}
+          </div>
+          <div
+            className={clsx(
+              'platform-configurations-editor__dependency__label__version',
+            )}
+          >
+            {platform.version}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+const ProjectPlatformVersionEditor = observer(
+  (props: { projectConfig: ProjectConfiguration; isReadOnly: boolean }) => {
+    const { projectConfig, isReadOnly } = props;
+    const editorStore = useEditorStore();
+
+    const convertPlatformtoPlatformConfiguration = (
+      platforms: Platform[] | undefined,
+    ): PlatformConfiguration[] | undefined => {
+      if (platforms) {
+        return platforms.map(
+          (platform) =>
+            new PlatformConfiguration(platform.name, platform.platformVersion),
+        );
+      } else {
+        return undefined;
+      }
+    };
+
+    const platformConfigurations = projectConfig.platformConfigurations;
+    const defaultPlatforms = convertPlatformtoPlatformConfiguration(
+      editorStore.sdlcServerClient.platforms,
+    );
+    const isUpToDate = platformConfigurations?.every(
+      (conf) =>
+        defaultPlatforms?.find((p) => p.name === conf.name)?.version ===
+        conf.version,
+    );
+    const updateLatestToLatestVersion = (): void => {
+      if (platformConfigurations && defaultPlatforms) {
+        projectConfig.setPlatformConfigurations(
+          platformConfigurations.map((conf) => {
+            const matchingPlatformConfig = defaultPlatforms.find(
+              (p) => p.name === conf.name,
+            );
+            if (matchingPlatformConfig) {
+              return matchingPlatformConfig;
+            }
+            return conf;
+          }),
+        );
+      }
+    };
+
+    const toggleOverridePlatformConfigurations = (): void => {
+      if (!projectConfig.platformConfigurations) {
+        projectConfig.setPlatformConfigurations(defaultPlatforms);
+      } else {
+        projectConfig.setPlatformConfigurations(undefined);
+      }
+    };
+
+    return (
+      <Panel>
+        <PanelForm>
+          <DocumentationPreview
+            text="By default, your project will use the latest platform
+              dependencies' versions (e.g. engine, sdlc, etc.) in the pipeline.
+              This might be undesirable when you want to produce stable
+              artifacts; in this case, you can freeze the platform dependencies'
+              versions"
+            documentationKey={
+              LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_WHEN_TO_CONFIGURE_PLATFORM_VERSIONS
+            }
+          />
+          <div className="platform-configurations-editor__dependencies">
+            <div className="platform-configurations-editor__dependencies__header">
+              <div className="platform-configurations-editor__dependencies__header__left">
+                <div
+                  className="platform-configurations-editor__toggler"
+                  onClick={toggleOverridePlatformConfigurations}
+                >
+                  <button
+                    className={clsx(
+                      'platform-configurations-editor__toggler__btn',
+                      {
+                        'platform-configurations-editor__toggler__btn--toggled':
+                          Boolean(platformConfigurations),
+                      },
+                    )}
+                    disabled={isReadOnly}
+                    tabIndex={-1}
+                  >
+                    {platformConfigurations ? (
+                      <CheckSquareIcon />
+                    ) : (
+                      <SquareIcon />
+                    )}
+                  </button>
+                  <div className="platform-configurations-editor__toggler__prompt">
+                    {`Override platform dependencies' versions`}
+                  </div>
+                </div>
+              </div>
+              {platformConfigurations && !isUpToDate && (
+                <div className="platform-configurations-editor__dependencies__header__right">
+                  <button
+                    className="btn btn--dark"
+                    tabIndex={-1}
+                    onClick={updateLatestToLatestVersion}
+                  >
+                    Update to the current latest platform version
+                  </button>
+                </div>
+              )}
+            </div>
+            <div className="platform-configurations-editor__dependencies__content">
+              {!platformConfigurations &&
+                defaultPlatforms?.map((p) => (
+                  <PlatformDependencyViewer
+                    key={p.name}
+                    isDefault={true}
+                    platform={p}
+                  />
+                ))}
+              {platformConfigurations?.map((p) => (
+                <PlatformDependencyViewer
+                  key={p.name}
+                  platform={p}
+                  isDefault={false}
+                  isLatestVersion={isUpToDate}
+                />
+              ))}
+            </div>
+          </div>
+        </PanelForm>
+      </Panel>
+    );
+  },
+);
+
 const ProjectDependencyActions = observer(
   (props: { config: ProjectConfigurationEditorState }) => {
     const { config } = props;
     const hasConflicts = config.dependencyInfo?.conflicts.length;
     const viewTree = (): void => {
       if (config.dependencyInfo) {
-        config.setDependencyInfoModal(DEPENDENCY_INFO_TYPE.TREE);
+        config.setDependencyInfoModal(DEPENDENCY_INFO_TYPE.DEPENDENCY_TREE);
       }
     };
     const viewConflict = (): void => {
@@ -467,11 +626,11 @@ const ProjectDependencyActions = observer(
     return (
       <div className="project-dependency-editor__info">
         <button
-          className="project-dependency-editor__tree-btn"
+          className="btn btn--dark"
           tabIndex={-1}
           onClick={viewTree}
           disabled={!config.dependencyInfo}
-          title={`View dependency tree`}
+          title="View dependency tree"
         >
           View Dependency Tree
         </button>
@@ -484,7 +643,7 @@ const ProjectDependencyActions = observer(
             disabled={
               !config.dependencyInfo || !config.dependencyInfo.conflicts.length
             }
-            title={`View any conflcits in your dependencies`}
+            title="View any conflcits in your dependencies"
           >
             View Conflicts
           </button>
@@ -506,6 +665,7 @@ export const ProjectConfigurationEditor = observer(() => {
   const tabs = [
     CONFIGURATION_EDITOR_TAB.PROJECT_STRUCTURE,
     CONFIGURATION_EDITOR_TAB.PROJECT_DEPENDENCIES,
+    CONFIGURATION_EDITOR_TAB.PLATFORM_CONFIGURATIONS,
   ];
   const changeTab =
     (tab: CONFIGURATION_EDITOR_TAB): (() => void) =>
@@ -553,7 +713,7 @@ export const ProjectConfigurationEditor = observer(() => {
   const disableAddButton =
     selectedTab === CONFIGURATION_EDITOR_TAB.PROJECT_STRUCTURE || isReadOnly;
   const updateConfigs = (): void => {
-    if (editorStore.hasUnpushedChanges) {
+    if (editorStore.localChangesState.hasUnpushedChanges) {
       editorStore.setActionAlertInfo({
         message: 'You have unpushed changes',
         prompt:
@@ -566,7 +726,6 @@ export const ProjectConfigurationEditor = observer(() => {
             label: 'Proceed to update project dependencies',
             type: ActionAlertActionType.PROCEED_WITH_CAUTION,
             handler: (): void => {
-              editorStore.setIgnoreNavigationBlocking(true);
               flowResult(configState.updateConfigs()).catch(
                 applicationStore.alertUnhandledError,
               );
@@ -680,7 +839,12 @@ export const ProjectConfigurationEditor = observer(() => {
               )}
             </div>
           )}
-
+          {selectedTab === CONFIGURATION_EDITOR_TAB.PLATFORM_CONFIGURATIONS && (
+            <ProjectPlatformVersionEditor
+              projectConfig={currentProjectConfiguration}
+              isReadOnly={isReadOnly}
+            />
+          )}
           {configState.dependencyInfo &&
             configState.dependencyInfoModalType && (
               <ProjectDependencyInfoModal

package/src/components/editor/edit-panel/service-editor/ServiceEditor.tsx

@@ -45,7 +45,7 @@ import {
   service_setDocumentation,
   service_setPattern,
   service_updateOwner,
-} from '../../../../stores/graphModifier/DSL_Service_GraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DSL_Service_GraphModifierHelper.js';
 import { validate_ServicePattern } from '@finos/legend-graph';
 import { ServiceTestableEditor } from './testable/ServiceTestableEditor.js';
 import { useApplicationNavigationContext } from '@finos/legend-application';
@@ -218,7 +218,7 @@ const ServiceGeneralEditor = observer(() => {
                     className="service-editor__pattern__parameter__action"
                     disabled={isReadOnly}
                     onClick={removePatternParameter(parameter)}
-                    title={'Remove parameter'}
+                    title="Remove parameter"
                     tabIndex={-1}
                   >
                     <TimesIcon />

package/src/components/editor/edit-panel/service-editor/ServiceExecutionEditor.tsx

@@ -272,7 +272,7 @@ const PureExecutionContextConfigurationEditor = observer(
                 className="btn--dark btn--sm service-execution-editor__configuration__item__btn"
                 onClick={visitMapping}
                 tabIndex={-1}
-                title={'See mapping'}
+                title="See mapping"
               >
                 <LongArrowRightIcon />
               </button>
@@ -307,7 +307,7 @@ const PureExecutionContextConfigurationEditor = observer(
                   className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
                   onClick={visitRuntime}
                   tabIndex={-1}
-                  title={'See runtime'}
+                  title="See runtime"
                 >
                   <LongArrowRightIcon />
                 </button>
@@ -355,7 +355,7 @@ export const ChangeExecutionModal = observer(
             spellCheck={false}
             value={keyValue}
             onChange={onChange}
-            placeholder={`Multi Execution Key Name`}
+            placeholder="Multi Execution Key Name"
             validationErrorMessage={validationMessage}
           />
         );
@@ -579,7 +579,7 @@ export const NewExecutionParameterModal = observer(
               spellCheck={false}
               value={keyValue}
               onChange={onChange}
-              placeholder={`Key execution name`}
+              placeholder="Key execution name"
               validationErrorMessage={validationMessage}
             />
           </div>

package/src/components/editor/edit-panel/service-editor/ServiceExecutionQueryEditor.tsx

@@ -42,7 +42,6 @@ import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   EDITOR_LANGUAGE,
   ExecutionPlanViewer,
-  LambdaParameterValuesEditor,
   useApplicationStore,
 } from '@finos/legend-application';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
@@ -55,6 +54,7 @@ import {
 import {
   type QueryBuilderState,
   ServiceQueryBuilderState,
+  LambdaParameterValuesEditor,
 } from '@finos/legend-query-builder';
 
 const ServiceExecutionResultViewer = observer(
@@ -466,6 +466,9 @@ export const ServiceExecutionQueryEditor = observer(
             .showModal && (
             <LambdaParameterValuesEditor
               graph={executionState.editorStore.graphManagerState.graph}
+              observerContext={
+                executionState.editorStore.changeDetectionState.observerContext
+              }
               lambdaParametersState={executionState.parameterState}
             />
           )}

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestableEditor.tsx

@@ -30,7 +30,7 @@ import type { ServiceTestSuite } from '@finos/legend-graph';
 import { ServiceTestDataEditor } from './ServiceTestDataEditor.js';
 import { ServiceTestsEditor } from './ServiceTestsEditor.js';
 import { forwardRef, useState } from 'react';
-import { testSuite_setId } from '../../../../../stores/graphModifier/Testable_GraphModifierHelper.js';
+import { testSuite_setId } from '../../../../../stores/shared/modifier/Testable_GraphModifierHelper.js';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import type {
   ServiceTestableState,

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestsEditor.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BasicValueSpecificationEditor } from '@finos/legend-application';
+
 import {
   ContextMenu,
   PlusIcon,
@@ -36,6 +36,7 @@ import {
   TimesIcon,
 } from '@finos/legend-art';
 import { type ValueSpecification, PRIMITIVE_TYPE } from '@finos/legend-graph';
+import { BasicValueSpecificationEditor } from '@finos/legend-query-builder';
 import {
   filterByType,
   guaranteeNonNullable,
@@ -55,7 +56,7 @@ import type { TestAssertionEditorState } from '../../../../../stores/editor-stat
 import {
   atomicTest_setId,
   testAssertion_setId,
-} from '../../../../../stores/graphModifier/Testable_GraphModifierHelper.js';
+} from '../../../../../stores/shared/modifier/Testable_GraphModifierHelper.js';
 import {
   getTestableResultFromTestResult,
   TESTABLE_RESULT,
@@ -233,6 +234,9 @@ const ServiceTestParameterEditor = observer(
               paramState.updateValueSpecification(val);
             }}
             graph={setupState.editorStore.graphManagerState.graph}
+            obseverContext={
+              setupState.editorStore.changeDetectionState.observerContext
+            }
             typeCheckOption={{
               expectedType:
                 paramState.varExpression.genericType?.value.rawType ??

package/src/components/editor/edit-panel/testable/TestAssertionEditor.tsx

@@ -40,7 +40,7 @@ import {
   type TestAssertionEditorState,
   type TestAssertionState,
 } from '../../../../stores/editor-state/element-editor-state/testable/TestAssertionState.js';
-import { externalFormatData_setData } from '../../../../stores/graphModifier/DSL_Data_GraphModifierHelper.js';
+import { externalFormatData_setData } from '../../../../stores/shared/modifier/DSL_Data_GraphModifierHelper.js';
 import { TESTABLE_RESULT } from '../../../../stores/sidebar-state/testable/GlobalTestRunnerState.js';
 import { JsonDiffView } from '../../../shared/DiffView.js';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
@@ -72,7 +72,7 @@ const EqualToJsonAsssertionEditor = observer(
               disabled={testAssertionEditorState.testState.isReadOnly}
               tabIndex={-1}
               onClick={formatExpectedResultJSONString}
-              title={'Format JSON (Alt + Shift + F)'}
+              title="Format JSON (Alt + Shift + F)"
             >
               <WrenchIcon />
             </button>

package/src/components/editor/edit-panel/uml-editor/AssociationEditor.tsx

@@ -83,7 +83,7 @@ import {
   annotatedElement_addStereotype,
   annotatedElement_deleteTaggedValue,
   association_changePropertyType,
-} from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
@@ -201,7 +201,7 @@ const AssociationPropertyBasicEditor = observer(
             value={property.name}
             spellCheck={false}
             onChange={changeValue}
-            placeholder={`Property name`}
+            placeholder="Property name"
             validationErrorMessage={
               isPropertyDuplicated(property) ? 'Duplicated property' : undefined
             }
@@ -213,7 +213,7 @@ const AssociationPropertyBasicEditor = observer(
             options={propertyTypeOptions}
             onChange={changePropertyType}
             value={selectedPropertyType}
-            placeholder={'Choose a data type or enumeration'}
+            placeholder="Choose a type..."
             filterOption={filterOption}
           />
         )}
@@ -249,7 +249,7 @@ const AssociationPropertyBasicEditor = observer(
                 className="property-basic-editor__type__visit-btn"
                 onClick={openElement}
                 tabIndex={-1}
-                title={'Visit element'}
+                title="Visit element"
               >
                 <ArrowCircleRightIcon />
               </button>
@@ -281,7 +281,7 @@ const AssociationPropertyBasicEditor = observer(
                 className="property-basic-editor__type__visit-btn"
                 onClick={openElement}
                 tabIndex={-1}
-                title={'Visit element'}
+                title="Visit element"
               >
                 <ArrowCircleRightIcon />
               </button>
@@ -309,7 +309,7 @@ const AssociationPropertyBasicEditor = observer(
           className="uml-element-editor__basic__detail-btn"
           onClick={selectProperty}
           tabIndex={-1}
-          title={'See detail'}
+          title="See detail"
         >
           <LongArrowRightIcon />
         </button>