@finos/legend-application-studio 26.1.6 → 26.1.8

package/src/components/editor/editor-group/project-configuration-editor/ProjectConfigurationEditor.tsx

@@ -33,6 +33,14 @@ import {
   ExclamationTriangleIcon,
   PanelFormSection,
   PanelListItem,
+  Button,
+  PencilEditIcon,
+  PanelDivider,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  PanelContent,
+  PanelHeader,
+  PanelContentLists,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import {
@@ -96,7 +104,7 @@ const ProjectStructureEditor = observer(
     };
 
     return (
-      <div className="panel__content__lists">
+      <PanelContentLists>
         <div className="project-configuration-editor__project__structure__version">
           <div className="project-configuration-editor__project__structure__version__label">
             <div className="project-configuration-editor__project__structure__version__label__status">
@@ -194,7 +202,7 @@ const ProjectStructureEditor = observer(
             </PanelListItem>
           </PanelFormSection>
         </PanelForm>
-      </div>
+      </PanelContentLists>
     );
   },
 );
@@ -246,10 +254,36 @@ const PlatformDependencyViewer = observer(
   },
 );
 
+const PlatformDependencyEditor = observer(
+  (props: { platform: PlatformConfiguration }) => {
+    const { platform } = props;
+
+    return (
+      <div className="platform-configurations-editor__dependency">
+        <div className="platform-configurations-editor__dependency__label">
+          <div className="platform-configurations-editor__dependency__label__status"></div>
+          <div className="platform-configurations-editor__dependency__label__text">
+            {platform.name}
+          </div>
+          <input
+            className="input input--dark"
+            onChange={(event) => {
+              platform.setVersion(event.target.value);
+            }}
+            value={platform.version}
+            spellCheck={false}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
 const ProjectPlatformVersionEditor = observer(
   (props: { projectConfig: ProjectConfiguration; isReadOnly: boolean }) => {
     const { projectConfig, isReadOnly } = props;
     const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
 
     const convertPlatformtoPlatformConfiguration = (
       platforms: Platform[] | undefined,
@@ -297,6 +331,34 @@ const ProjectPlatformVersionEditor = observer(
       }
     };
 
+    const toggleManualOverwrite = (): void => {
+      if (!editorStore.projectConfigurationEditorState.manualOverwrite) {
+        applicationStore.alertService.setActionAlertInfo({
+          message:
+            'Clicking this will allow you to not just override and freeze platform versions but to input custom platform versions you would like manually and is not usually recommended except to temporarily unblock your project',
+          prompt: 'Do you want to proceed?',
+          type: ActionAlertType.CAUTION,
+          actions: [
+            {
+              label: 'Continue',
+              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+              handler: (): void =>
+                editorStore.projectConfigurationEditorState.setManualOverwrite(
+                  true,
+                ),
+            },
+            {
+              label: 'Cancel',
+              type: ActionAlertActionType.PROCEED,
+              default: true,
+            },
+          ],
+        });
+      } else {
+        editorStore.projectConfigurationEditorState.setManualOverwrite(false);
+      }
+    };
+
     return (
       <Panel>
         <PanelForm>
@@ -339,35 +401,108 @@ const ProjectPlatformVersionEditor = observer(
                   </div>
                 </div>
               </div>
-              {platformConfigurations && !isUpToDate && (
-                <div className="platform-configurations-editor__dependencies__header__right">
-                  <button
-                    className="btn btn--dark"
-                    tabIndex={-1}
-                    onClick={updateLatestToLatestVersion}
+
+              <div className="platform-configurations-editor__dependencies__header__right">
+                <PanelListItem>
+                  {platformConfigurations &&
+                    !isUpToDate &&
+                    !editorStore.projectConfigurationEditorState
+                      .manualOverwrite && (
+                      <div>
+                        <button
+                          className="btn btn--dark"
+                          tabIndex={-1}
+                          onClick={updateLatestToLatestVersion}
+                        >
+                          Update to the current latest platform version
+                        </button>
+                      </div>
+                    )}
+                  <Button
+                    className={clsx(
+                      'project-configuration-editor__manual-btn',
+                      {
+                        'project-configuration-editor__manual-btn--active':
+                          editorStore.projectConfigurationEditorState
+                            .manualOverwrite,
+                      },
+                    )}
+                    title="Manually overwrite platform configurations"
+                    disabled={isReadOnly}
+                    onClick={toggleManualOverwrite}
                   >
-                    Update to the current latest platform version
-                  </button>
-                </div>
-              )}
+                    <PencilEditIcon />
+                  </Button>
+                </PanelListItem>
+              </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}
-                />
-              ))}
+              {editorStore.projectConfigurationEditorState.manualOverwrite ? (
+                <>
+                  {!platformConfigurations &&
+                    defaultPlatforms?.map((p) => (
+                      <PlatformDependencyEditor key={p.name} platform={p} />
+                    ))}
+                  {platformConfigurations?.map((p) => (
+                    <PlatformDependencyEditor key={p.name} platform={p} />
+                  ))}
+
+                  <PanelDivider />
+                  <PanelListItem>
+                    <Button
+                      className="project-configuration-editor__manual-overwrite-btn"
+                      disabled={isReadOnly}
+                      onClick={() => {
+                        editorStore.projectConfigurationEditorState.setManualOverwrite(
+                          false,
+                        );
+                      }}
+                      title="Cancel manual override"
+                      text="Cancel"
+                    />
+
+                    <Button
+                      className="project-configuration-editor__manual-overwrite-btn"
+                      disabled={isReadOnly}
+                      onClick={() => {
+                        if (!platformConfigurations) {
+                          projectConfig.setPlatformConfigurations(
+                            defaultPlatforms,
+                          );
+                        } else {
+                          projectConfig.setPlatformConfigurations(
+                            platformConfigurations,
+                          );
+                        }
+
+                        editorStore.projectConfigurationEditorState.setManualOverwrite(
+                          false,
+                        );
+                      }}
+                      text="Manual override"
+                    />
+                  </PanelListItem>
+                </>
+              ) : (
+                <>
+                  {!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>
@@ -532,7 +667,7 @@ export const ProjectConfigurationEditor = observer(() => {
   return (
     <div className="project-configuration-editor">
       <Panel>
-        <div className="panel__header">
+        <PanelHeader>
           <div className="panel__header__title">
             <div className="panel__header__title__label">
               project configuration
@@ -555,8 +690,8 @@ export const ProjectConfigurationEditor = observer(() => {
           >
             Update
           </button>
-        </div>
-        <div className="panel__header project-configuration-editor__tabs__header">
+        </PanelHeader>
+        <PanelHeader className="project-configuration-editor__tabs__header">
           <div className="project-configuration-editor__tabs">
             {tabs.map((tab) => (
               <button
@@ -571,19 +706,17 @@ export const ProjectConfigurationEditor = observer(() => {
               </button>
             ))}
           </div>
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
               disabled={disableAddButton}
-              tabIndex={-1}
               onClick={addValue}
               title={addButtonTitle}
             >
               <PlusIcon />
-            </button>
-          </div>
-        </div>
-        <div className="panel__content project-configuration-editor__content">
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
+        <PanelContent className="project-configuration-editor__content">
           {selectedTab === CONFIGURATION_EDITOR_TAB.PROJECT_STRUCTURE && (
             <ProjectStructureEditor
               projectConfig={currentProjectConfiguration}
@@ -599,7 +732,7 @@ export const ProjectConfigurationEditor = observer(() => {
               isReadOnly={isReadOnly}
             />
           )}
-        </div>
+        </PanelContent>
       </Panel>
     </div>
   );

package/src/components/editor/editor-group/project-configuration-editor/ProjectDependencyEditor.tsx

@@ -53,6 +53,7 @@ import {
   PanelHeader,
   PanelHeaderActions,
   PanelHeaderActionItem,
+  PanelContentLists,
 } from '@finos/legend-art';
 import {
   MASTER_SNAPSHOT_ALIAS,
@@ -552,30 +553,25 @@ const ProjectDependencyConflictViewer = observer(
     }, [dependencyEditorState, hasConflict]);
 
     return (
-      <div className="panel project-dependency-explorer">
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">conflicts</div>
-          </div>
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
+      <Panel className="project-dependency-explorer">
+        <PanelHeader title="conflicts">
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
+              title="Collapse Tree"
               disabled={!hasConflict || !dependencyEditorState.conflictStates}
               onClick={collapseTree}
-              tabIndex={-1}
             >
-              <CompressIcon title="Collapse Tree" />
-            </button>
-            <button
-              className="panel__header__action"
+              <CompressIcon />
+            </PanelHeaderActionItem>
+            <PanelHeaderActionItem
+              title="Expand All Conflict Paths"
               disabled={!hasConflict || !dependencyEditorState.conflictStates}
               onClick={expandAllNodes}
-              tabIndex={-1}
             >
-              <ExpandAllIcon title="Expand All Conflict Paths" />
-            </button>
-          </div>
-        </div>
+              <ExpandAllIcon />
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
         <div className="project-dependency-explorer__content">
           {hasConflict && dependencyEditorState.conflictStates && (
             <div>
@@ -592,7 +588,7 @@ const ProjectDependencyConflictViewer = observer(
           )}
           {!hasConflict && <BlankPanelContent>No Conflicts</BlankPanelContent>}
         </div>
-      </div>
+      </Panel>
     );
   },
 );
@@ -1002,7 +998,7 @@ export const ProjectDependencyEditor = observer(() => {
     dependencyEditorState.fetchingDependencyInfoState.isInProgress;
 
   return (
-    <div className="panel__content__lists">
+    <PanelContentLists>
       <PanelLoadingIndicator isLoading={isLoading} />
       {isLoading && (
         <div className="project-dependency-editor__progress-msg">
@@ -1031,6 +1027,6 @@ export const ProjectDependencyEditor = observer(() => {
           dependencyEditorState={dependencyEditorState}
         />
       )}
-    </div>
+    </PanelContentLists>
   );
 });

package/src/components/editor/editor-group/service-editor/BulkServiceRegistrationEditor.tsx

@@ -22,6 +22,10 @@ import {
   SquareIcon,
   PanelLoadingIndicator,
   PanelFormBooleanField,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  PanelHeader,
+  PanelContent,
 } from '@finos/legend-art';
 import { prettyCONSTName } from '@finos/legend-shared';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
@@ -161,30 +165,25 @@ export const BulkServiceRegistrationEditor = observer(() => {
       data-testid={LEGEND_STUDIO_TEST_ID.SERVICE_REGISTRATION_EDITOR}
       className="service-registration-editor"
     >
-      <div className="panel__header">
-        <div className="panel__header__title">
-          <div className="panel__header__title__label">Register Service</div>
-        </div>
-        <div className="panel__header__actions">
-          <div className="panel__header__action">
-            <button
-              className="btn--dark model-loader__header__load-btn"
-              onClick={registerService}
-              disabled={disableRegistration}
-              title="Register Service"
-            >
-              Register
-            </button>
-          </div>
-        </div>
-      </div>
+      <PanelHeader title="Register Service">
+        <PanelHeaderActions>
+          <PanelHeaderActionItem
+            className="btn--dark model-loader__header__load-btn"
+            onClick={registerService}
+            disabled={disableRegistration}
+            title="Register Service"
+          >
+            Register
+          </PanelHeaderActionItem>
+        </PanelHeaderActions>
+      </PanelHeader>
       <PanelLoadingIndicator
         isLoading={
           globalBulkServiceRegistrationState.serviceConfigState
             .registrationState.isInProgress
         }
       />
-      <div className="panel__content">
+      <PanelContent>
         <div className="panel__content__form">
           {globalBulkServiceRegistrationState.serviceConfigState
             .registrationState.message && (
@@ -305,7 +304,7 @@ export const BulkServiceRegistrationEditor = observer(() => {
             />
           </div>
         </div>
-      </div>
+      </PanelContent>
     </div>
   );
 });

package/src/components/editor/editor-group/service-editor/ServiceEditor.tsx

@@ -31,6 +31,7 @@ import {
   PanelForm,
   CustomSelectorInput,
   PanelFormValidatedTextField,
+  PanelContentLists,
 } from '@finos/legend-art';
 import { debounce, prettyCONSTName } from '@finos/legend-shared';
 import { ServiceExecutionEditor } from './ServiceExecutionEditor.js';
@@ -197,7 +198,7 @@ const ServiceGeneralEditor = observer(() => {
   }, [serviceState]);
 
   return (
-    <div className="panel__content__lists service-editor__general">
+    <PanelContentLists className="service-editor__general">
       <PanelForm>
         <PanelFormValidatedTextField
           ref={patternRef}
@@ -436,7 +437,7 @@ const ServiceGeneralEditor = observer(() => {
           </div>
         </div>
       </PanelForm>
-    </div>
+    </PanelContentLists>
   );
 });
 

package/src/components/editor/editor-group/service-editor/ServiceExecutionEditor.tsx

@@ -58,6 +58,9 @@ import {
   Panel,
   PanelContent,
   ModalTitle,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  PanelHeader,
 } from '@finos/legend-art';
 import { ServiceExecutionQueryEditor } from './ServiceExecutionQueryEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -680,24 +683,22 @@ const MultiPureExecutionEditor = observer(
               </div>
             </div>
             <div className="service-multi-execution-editor__panel">
-              <div className="panel__header">
+              <PanelHeader>
                 <div className="panel__header__title">
                   <div className="panel__header__title__content">
                     Execution Contexts
                   </div>
                 </div>
-                <div className="panel__header__actions">
-                  <button
-                    className="panel__header__action"
+                <PanelHeaderActions>
+                  <PanelHeaderActionItem
                     disabled={multiExecutionState.serviceEditorState.isReadOnly}
                     onClick={addExecutionKey}
-                    tabIndex={-1}
                     title="Add an execution context"
                   >
                     <PlusIcon />
-                  </button>
-                </div>
-              </div>
+                  </PanelHeaderActionItem>
+                </PanelHeaderActions>
+              </PanelHeader>
 
               {multiExecution.executionParameters.map((executionParameter) => (
                 <KeyExecutionItem

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

@@ -26,6 +26,10 @@ import {
   MenuContent,
   MenuContentItem,
   BlankPanelContent,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  Panel,
+  PanelHeader,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import type { ServiceTestSuite } from '@finos/legend-graph';
@@ -113,10 +117,10 @@ export const ServiceTestableEditor = observer(
     );
 
     return (
-      <div className="service-test-suite-editor panel">
-        <div className="panel__header">
+      <Panel className="service-test-suite-editor">
+        <PanelHeader>
           {service.tests.length ? (
-            <div className="panel__header service-test-suite-editor__header service-test-suite-editor__header--with-tabs">
+            <PanelHeader className="service-test-suite-editor__header service-test-suite-editor__header--with-tabs">
               <div className="uml-element-editor__tabs">
                 {service.tests.map((suite) => (
                   <div
@@ -141,22 +145,17 @@ export const ServiceTestableEditor = observer(
                   </div>
                 ))}
               </div>
-            </div>
+            </PanelHeader>
           ) : (
             <div></div>
           )}
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
-              tabIndex={-1}
-              onClick={addSuite}
-              title="Add Service Suite"
-            >
+          <PanelHeaderActions>
+            <PanelHeaderActionItem onClick={addSuite} title="Add Service Suite">
               <PlusIcon />
-            </button>
-          </div>
-        </div>
-        <div className="service-test-suite-editor panel">
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
+        <Panel className="service-test-suite-editor">
           {serviceTestableState.selectedSuiteState && (
             <ServiceTestSuiteEditor
               serviceTestSuiteState={serviceTestableState.selectedSuiteState}
@@ -181,8 +180,8 @@ export const ServiceTestableEditor = observer(
               setValue={renameSuite}
             />
           )}
-        </div>
-      </div>
+        </Panel>
+      </Panel>
     );
   },
 );

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

@@ -87,6 +87,7 @@ import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
+import { LEGEND_STUDIO_TEST_ID } from '../../../../../__lib__/LegendStudioTesting.js';
 
 export const NewParameterModal = observer(
   (props: { setupState: ServiceTestSetupState; isReadOnly: boolean }) => {
@@ -391,7 +392,10 @@ const ServiceTestSetupEditor = observer(
     }, [setupState]);
 
     return (
-      <div className="panel service-test-editor">
+      <div
+        data-testid={LEGEND_STUDIO_TEST_ID.SERVICE_TEST_EDITOR__SETUP}
+        className="panel service-test-editor"
+      >
         <div className="panel__header">
           <div className="service-test-suite-editor__header__title">
             <div className="service-test-suite-editor__header__title__label">
@@ -460,7 +464,12 @@ const ServiceTestSetupEditor = observer(
               <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
             </ResizablePanelSplitter>
             <ResizablePanel minSize={56}>
-              <div className="service-test-data-editor panel">
+              <div
+                data-testid={
+                  LEGEND_STUDIO_TEST_ID.SERVICE_TEST_EDITOR__SETUP__PARAMETERS
+                }
+                className="service-test-data-editor panel"
+              >
                 <div className="service-test-suite-editor__header">
                   <div className="service-test-suite-editor__header__title">
                     <div className="service-test-suite-editor__header__title__label">
@@ -783,7 +792,10 @@ export const ServiceTestsEditor = observer(
     const renameTest = (val: string): void =>
       atomicTest_setId(guaranteeNonNullable(suiteState.testToRename), val);
     return (
-      <div className="panel service-test-editor">
+      <div
+        data-testid={LEGEND_STUDIO_TEST_ID.SERVICE_TEST_EDITOR}
+        className="panel service-test-editor"
+      >
         <div className="service-test-suite-editor__header">
           <div className="service-test-suite-editor__header__title">
             <div className="service-test-suite-editor__header__title__label service-test-suite-editor__header__title__label--tests">

package/src/components/editor/editor-group/testable/TestableSharedComponents.tsx

@@ -29,6 +29,7 @@ import {
   PanelContent,
   PanelFormTextField,
   PanelHeader,
+  PanelHeaderActions,
   PanelLoadingIndicator,
   RefreshIcon,
   WrenchIcon,
@@ -306,12 +307,9 @@ const TestAssertionResultViewer = observer(
 
     return (
       <>
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">result</div>
-          </div>
-          <div className="panel__header__actions"></div>
-        </div>
+        <PanelHeader title="result">
+          <PanelHeaderActions />
+        </PanelHeader>
         <PanelContent className="testable-test-assertion-result__content">
           <div
             className={clsx('testable-test-assertion-result__summary', {