@finos/legend-application-studio 26.1.7 → 26.1.9

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', {
@@ -499,12 +497,12 @@ export const TestAssertionEditor = observer(
           </div>
         </div>
         <div className="testable-test-assertion-editor__content">
-          {selectedTab === TEST_ASSERTION_TAB.ASSERTION_SETUP && (
+          {selectedTab === TEST_ASSERTION_TAB.SETUP && (
             <div className="testable-test-assertion-editor__setup">
               {renderContent(testAssertionState.assertionState)}
             </div>
           )}
-          {selectedTab === TEST_ASSERTION_TAB.ASSERTION_RESULT && (
+          {selectedTab === TEST_ASSERTION_TAB.RESULT && (
             <TestAssertionResultViewer
               testAssertionEditorState={testAssertionState}
             />

package/src/components/editor/editor-group/uml-editor/AssociationEditor.tsx

@@ -45,6 +45,7 @@ import {
   Panel,
   InfoCircleIcon,
   PanelHeader,
+  PanelContentLists,
 } from '@finos/legend-art';
 import { getElementIcon } from '../../../ElementIconUtils.js';
 import { prettyCONSTName, guaranteeType } from '@finos/legend-shared';
@@ -562,7 +563,7 @@ export const AssociationEditor = observer(
                 })}
               >
                 {selectedTab === UML_EDITOR_TAB.PROPERTIES && (
-                  <div className="panel__content__lists">
+                  <PanelContentLists>
                     <AssociationPropertyBasicEditor
                       association={association}
                       property={getFirstAssociatedProperty(association)}
@@ -579,14 +580,14 @@ export const AssociationEditor = observer(
                       )}
                       isReadOnly={isReadOnly}
                     />
-                  </div>
+                  </PanelContentLists>
                 )}
                 {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
                   <PanelDropZone
                     isDragOver={isTaggedValueDragOver && !isReadOnly}
                     dropTargetConnector={dropTaggedValueRef}
                   >
-                    <div className="panel__content__lists">
+                    <PanelContentLists>
                       <TaggedValueDragPreviewLayer />
                       {association.taggedValues.map((taggedValue) => (
                         <TaggedValueEditor
@@ -597,7 +598,7 @@ export const AssociationEditor = observer(
                           isReadOnly={isReadOnly}
                         />
                       ))}
-                    </div>
+                    </PanelContentLists>
                   </PanelDropZone>
                 )}
                 {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
@@ -605,7 +606,7 @@ export const AssociationEditor = observer(
                     isDragOver={isStereotypeDragOver && !isReadOnly}
                     dropTargetConnector={dropStereotypeRef}
                   >
-                    <div className="panel__content__lists">
+                    <PanelContentLists>
                       <StereotypeDragPreviewLayer />
                       {association.stereotypes.map((stereotype) => (
                         <StereotypeSelector
@@ -616,7 +617,7 @@ export const AssociationEditor = observer(
                           isReadOnly={isReadOnly}
                         />
                       ))}
-                    </div>
+                    </PanelContentLists>
                   </PanelDropZone>
                 )}
               </div>

package/src/components/editor/editor-group/uml-editor/ClassEditor.tsx

@@ -46,6 +46,7 @@ import {
   PanelDropZone,
   Panel,
   PanelDnDEntry,
+  PanelContentLists,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
 import { PropertyEditor } from './PropertyEditor.js';
@@ -1216,7 +1217,7 @@ const PropertiesEditor = observer(
         isDragOver={isPropertyDragOver && !isReadOnly}
         dropTargetConnector={dropPropertyRef}
       >
-        <div className="panel__content__lists">
+        <PanelContentLists>
           <DragPreviewLayer
             labelGetter={(item: ClassPropertyDragSource): string =>
               item.property.name === '' ? '(unknown)' : item.property.name
@@ -1233,7 +1234,7 @@ const PropertiesEditor = observer(
               isReadOnly={isReadOnly}
             />
           ))}
-        </div>
+        </PanelContentLists>
       </PanelDropZone>
     );
   },
@@ -1299,7 +1300,7 @@ const DerviedPropertiesEditor = observer(
         isDragOver={isDerivedPropertyDragOver && !isReadOnly}
         dropTargetConnector={dropDerivedPropertyRef}
       >
-        <div className="panel__content__lists">
+        <PanelContentLists>
           <DragPreviewLayer
             labelGetter={(item: ClassDerivedPropertyDragSource): string =>
               item.derivedProperty.name === ''
@@ -1323,7 +1324,7 @@ const DerviedPropertiesEditor = observer(
                 isReadOnly={isReadOnly}
               />
             ))}
-        </div>
+        </PanelContentLists>
       </PanelDropZone>
     );
   },
@@ -1350,7 +1351,7 @@ const ConstraintsEditor = observer(
     );
 
     return (
-      <div className="panel__content__lists">
+      <PanelContentLists>
         <DragPreviewLayer
           labelGetter={(item: ClassConstraintDragSource): string =>
             item.constraint.name === '' ? '(unknown)' : item.constraint.name
@@ -1372,7 +1373,7 @@ const ConstraintsEditor = observer(
               isReadOnly={isReadOnly}
             />
           ))}
-      </div>
+      </PanelContentLists>
     );
   },
 );
@@ -1441,7 +1442,7 @@ const SupertypesEditor = observer(
         isDragOver={isSuperTypeDragOver && !isReadOnly}
         dropTargetConnector={dropSuperTypeRef}
       >
-        <div className="panel__content__lists">
+        <PanelContentLists>
           <DragPreviewLayer
             labelGetter={(item: ClassSuperTypeDragSource): string =>
               item.superType.value.rawType.name
@@ -1457,7 +1458,7 @@ const SupertypesEditor = observer(
               isReadOnly={isReadOnly}
             />
           ))}
-        </div>
+        </PanelContentLists>
       </PanelDropZone>
     );
   },
@@ -1504,7 +1505,7 @@ const TaggedValuesEditor = observer(
         isDragOver={isTaggedValueDragOver && !isReadOnly}
         dropTargetConnector={dropTaggedValueRef}
       >
-        <div className="panel__content__lists">
+        <PanelContentLists>
           <TaggedValueDragPreviewLayer />
           {_class.taggedValues.map((taggedValue) => (
             <TaggedValueEditor
@@ -1515,7 +1516,7 @@ const TaggedValuesEditor = observer(
               isReadOnly={isReadOnly}
             />
           ))}
-        </div>
+        </PanelContentLists>
       </PanelDropZone>
     );
   },
@@ -1564,7 +1565,7 @@ const StereotypesEditor = observer(
         isDragOver={isStereotypeDragOver && !isReadOnly}
         dropTargetConnector={dropStereotypeRef}
       >
-        <div className="panel__content__lists">
+        <PanelContentLists>
           <StereotypeDragPreviewLayer />
           {_class.stereotypes.map((stereotype) => (
             <StereotypeSelector
@@ -1575,7 +1576,7 @@ const StereotypesEditor = observer(
               isReadOnly={isReadOnly}
             />
           ))}
-        </div>
+        </PanelContentLists>
       </PanelDropZone>
     );
   },

package/src/components/editor/editor-group/uml-editor/EnumerationEditor.tsx

@@ -49,6 +49,10 @@ import {
   Panel,
   PanelContent,
   PanelDnDEntry,
+  PanelHeader,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  PanelContentLists,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
 import {
@@ -307,7 +311,7 @@ const EnumEditor = observer(
     return (
       <div className="uml-element-editor enum-editor">
         <div data-testid={LEGEND_STUDIO_TEST_ID.PANEL} className="panel">
-          <div className="panel__header">
+          <PanelHeader>
             <div className="panel__header__title">
               {isReadOnly && (
                 <div className="uml-element-editor__header__lock">
@@ -317,17 +321,12 @@ const EnumEditor = observer(
               <div className="panel__header__title__label">enum</div>
               <div className="panel__header__title__content">{_enum.name}</div>
             </div>
-            <div className="panel__header__actions">
-              <button
-                className="panel__header__action"
-                onClick={deselectValue}
-                tabIndex={-1}
-                title="Close"
-              >
+            <PanelHeaderActions>
+              <PanelHeaderActionItem onClick={deselectValue} title="Close">
                 <TimesIcon />
-              </button>
-            </div>
-          </div>
+              </PanelHeaderActionItem>
+            </PanelHeaderActions>
+          </PanelHeader>
           <div
             data-testid={LEGEND_STUDIO_TEST_ID.UML_ELEMENT_EDITOR__TABS_HEADER}
             className="panel__header uml-element-editor__tabs__header"
@@ -345,17 +344,15 @@ const EnumEditor = observer(
                 </div>
               ))}
             </div>
-            <div className="panel__header__actions">
-              <button
-                className="panel__header__action"
+            <PanelHeaderActions>
+              <PanelHeaderActionItem
                 disabled={isReadOnly}
                 onClick={addValue}
-                tabIndex={-1}
                 title={addButtonTitle}
               >
                 <PlusIcon />
-              </button>
-            </div>
+              </PanelHeaderActionItem>
+            </PanelHeaderActions>
           </div>
           <PanelContent>
             {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
@@ -363,7 +360,7 @@ const EnumEditor = observer(
                 isDragOver={isTaggedValueDragOver && !isReadOnly}
                 dropTargetConnector={dropTaggedValueRef}
               >
-                <div className="panel__content__lists">
+                <PanelContentLists>
                   <TaggedValueDragPreviewLayer />
                   {_enum.taggedValues.map((taggedValue) => (
                     <TaggedValueEditor
@@ -374,7 +371,7 @@ const EnumEditor = observer(
                       isReadOnly={isReadOnly}
                     />
                   ))}
-                </div>
+                </PanelContentLists>
               </PanelDropZone>
             )}
             {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
@@ -382,7 +379,7 @@ const EnumEditor = observer(
                 isDragOver={isStereotypeDragOver && !isReadOnly}
                 dropTargetConnector={dropStereotypeRef}
               >
-                <div className="panel__content__lists">
+                <PanelContentLists>
                   <StereotypeDragPreviewLayer />
                   {_enum.stereotypes.map((stereotype) => (
                     <StereotypeSelector
@@ -393,7 +390,7 @@ const EnumEditor = observer(
                       isReadOnly={isReadOnly}
                     />
                   ))}
-                </div>
+                </PanelContentLists>
               </PanelDropZone>
             )}
           </PanelContent>
@@ -631,7 +628,7 @@ export const EnumerationEditor = observer(
               </div>
               <PanelContent>
                 {selectedTab === UML_EDITOR_TAB.ENUM_VALUES && (
-                  <div className="panel__content__lists">
+                  <PanelContentLists>
                     <DragPreviewLayer
                       labelGetter={(item: EnumValueDragSource): string =>
                         item.enumValue.name === ''
@@ -649,14 +646,14 @@ export const EnumerationEditor = observer(
                         isReadOnly={isReadOnly}
                       />
                     ))}
-                  </div>
+                  </PanelContentLists>
                 )}
                 {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
                   <PanelDropZone
                     isDragOver={isTaggedValueDragOver && !isReadOnly}
                     dropTargetConnector={dropTaggedValueRef}
                   >
-                    <div className="panel__content__lists">
+                    <PanelContentLists>
                       <TaggedValueDragPreviewLayer />
                       {enumeration.taggedValues.map((taggedValue) => (
                         <TaggedValueEditor
@@ -667,7 +664,7 @@ export const EnumerationEditor = observer(
                           isReadOnly={isReadOnly}
                         />
                       ))}
-                    </div>
+                    </PanelContentLists>
                   </PanelDropZone>
                 )}
                 {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
@@ -675,7 +672,7 @@ export const EnumerationEditor = observer(
                     isDragOver={isStereotypeDragOver && !isReadOnly}
                     dropTargetConnector={dropStereotypeRef}
                   >
-                    <div className="panel__content__lists">
+                    <PanelContentLists>
                       <StereotypeDragPreviewLayer />
                       {enumeration.stereotypes.map((stereotype) => (
                         <StereotypeSelector
@@ -686,7 +683,7 @@ export const EnumerationEditor = observer(
                           isReadOnly={isReadOnly}
                         />
                       ))}
-                    </div>
+                    </PanelContentLists>
                   </PanelDropZone>
                 )}
               </PanelContent>

package/src/components/editor/editor-group/uml-editor/ProfileEditor.tsx

@@ -32,6 +32,7 @@ import {
   Panel,
   PanelContent,
   PanelDnDEntry,
+  PanelContentLists,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -355,7 +356,7 @@ export const ProfileEditor = observer((props: { profile: Profile }) => {
         </div>
         <PanelContent>
           {selectedTab === UML_EDITOR_TAB.TAGS && (
-            <div className="panel__content__lists">
+            <PanelContentLists>
               <DragPreviewLayer
                 labelGetter={(item: TagDragSource): string =>
                   item.tag.value === '' ? '(unknown)' : item.tag.value
@@ -371,10 +372,10 @@ export const ProfileEditor = observer((props: { profile: Profile }) => {
                   isReadOnly={isReadOnly}
                 />
               ))}
-            </div>
+            </PanelContentLists>
           )}
           {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
-            <div className="panel__content__lists">
+            <PanelContentLists>
               <DragPreviewLayer
                 labelGetter={(item: StereotypeDragSource): string =>
                   item.stereotype.value === ''
@@ -392,7 +393,7 @@ export const ProfileEditor = observer((props: { profile: Profile }) => {
                   isReadOnly={isReadOnly}
                 />
               ))}
-            </div>
+            </PanelContentLists>
           )}
         </PanelContent>
       </Panel>

package/src/components/editor/editor-group/uml-editor/PropertyEditor.tsx

@@ -27,6 +27,7 @@ import {
   CustomSelectorInput,
   LockIcon,
   PanelContent,
+  PanelContentLists,
   PanelDropZone,
   PanelForm,
   PanelFormSection,
@@ -280,7 +281,7 @@ export const PropertyEditor = observer(
                 isDragOver={isTaggedValueDragOver && !isReadOnly}
                 dropTargetConnector={dropTaggedValueRef}
               >
-                <div className="panel__content__lists">
+                <PanelContentLists>
                   <TaggedValueDragPreviewLayer />
                   {property.taggedValues.map((taggedValue) => (
                     <TaggedValueEditor
@@ -291,7 +292,7 @@ export const PropertyEditor = observer(
                       isReadOnly={isReadOnly}
                     />
                   ))}
-                </div>
+                </PanelContentLists>
               </PanelDropZone>
             )}
             {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
@@ -299,7 +300,7 @@ export const PropertyEditor = observer(
                 isDragOver={isStereotypeDragOver && !isReadOnly}
                 dropTargetConnector={dropStereotypeRef}
               >
-                <div className="panel__content__lists">
+                <PanelContentLists>
                   <StereotypeDragPreviewLayer />
                   {property.stereotypes.map((stereotype) => (
                     <StereotypeSelector
@@ -310,7 +311,7 @@ export const PropertyEditor = observer(
                       isReadOnly={isReadOnly}
                     />
                   ))}
-                </div>
+                </PanelContentLists>
               </PanelDropZone>
             )}
           </PanelContent>

package/src/components/editor/side-bar/SideBar.tsx

@@ -53,7 +53,7 @@ export const SideBar = observer(() => {
             workflowManagerState={editorStore.workspaceWorkflowManagerState}
           />
         );
-      case ACTIVITY_MODE.GLOBAL_TEST_RUNNER:
+      case ACTIVITY_MODE.TEST_RUNNER:
         return (
           <GlobalTestRunner
             globalTestRunnerState={editorStore.globalTestRunnerState}

package/src/components/editor/side-bar/testable/GlobalTestRunner.tsx

@@ -58,7 +58,7 @@ import {
 } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useEffect, useState } from 'react';
-import { GLOBAL_TEST_RUNNER_TABS } from '../../../../stores/editor/EditorConfig.js';
+import { TEST_RUNNER_TABS } from '../../../../stores/editor/EditorConfig.js';
 import {
   type TestableExplorerTreeNodeData,
   type GlobalTestRunnerState,
@@ -429,7 +429,7 @@ export const GlobalTestRunner = observer(
     const editorStore = useEditorStore();
     const globalTestRunnerState = props.globalTestRunnerState;
     const isDispatchingAction = globalTestRunnerState.isDispatchingAction;
-    const testRunnerTabs = (Object.values(GLOBAL_TEST_RUNNER_TABS) as string[])
+    const testRunnerTabs = (Object.values(TEST_RUNNER_TABS) as string[])
       .concat(
         editorStore.pluginManager
           .getApplicationPlugins()
@@ -443,7 +443,7 @@ export const GlobalTestRunner = observer(
       }));
 
     const [selectedTab, setSelectedTab] = useState(
-      GLOBAL_TEST_RUNNER_TABS.GLOBAL_TEST_RUNNER.valueOf(),
+      TEST_RUNNER_TABS.TEST_RUNNER.valueOf(),
     );
 
     const changeTab = (tab: string): void => {
@@ -496,10 +496,10 @@ export const GlobalTestRunner = observer(
     const reset = (): void => globalTestRunnerState.init(true);
 
     const renderTestRunnerTab = (): React.ReactNode => {
-      if (selectedTab === GLOBAL_TEST_RUNNER_TABS.GLOBAL_TEST_RUNNER) {
+      if (selectedTab === TEST_RUNNER_TABS.TEST_RUNNER) {
         return (
           <div
-            data-testid={LEGEND_STUDIO_TEST_ID.GLOBAL_TEST_RUNNER}
+            data-testid={LEGEND_STUDIO_TEST_ID.TEST_RUNNER}
             className="panel global-test-runner"
           >
             <PanelHeader className="panel__header side-bar__header">
@@ -535,6 +535,19 @@ export const GlobalTestRunner = observer(
                 </button>
               </div>
             </PanelHeader>
+            <div className="panel__header__tabs panel__header__test__runner__tabs">
+              {testRunnerTabs.map((tab) => (
+                <div
+                  key={tab.value}
+                  onClick={() => changeTab(tab.value)}
+                  className={clsx('panel__header__tab', {
+                    ['panel__header__tab--active']: tab.value === selectedTab,
+                  })}
+                >
+                  {toTitleCase(prettyCONSTName(tab.value))}
+                </div>
+              ))}
+            </div>
             <PanelContent className="side-bar__content">
               <PanelLoadingIndicator isLoading={isDispatchingAction} />
               <Panel className="side-bar__panel">
@@ -587,21 +600,6 @@ export const GlobalTestRunner = observer(
 
     return (
       <Panel>
-        <div className="panel__header panel__header--dark">
-          <div className="panel__header__tabs">
-            {testRunnerTabs.map((tab) => (
-              <div
-                key={tab.value}
-                onClick={() => changeTab(tab.value)}
-                className={clsx('panel__header__tab', {
-                  ['panel__header__tab--active']: tab.value === selectedTab,
-                })}
-              >
-                {toTitleCase(prettyCONSTName(tab.value))}
-              </div>
-            ))}
-          </div>
-        </div>
         <PanelContent>{renderTestRunnerTab()}</PanelContent>
       </Panel>
     );

package/src/stores/editor/EditorConfig.ts

@@ -21,8 +21,8 @@ export enum EDITOR_MODE {
   VIEWER = 'VIEWER',
 }
 
-export enum GLOBAL_TEST_RUNNER_TABS {
-  GLOBAL_TEST_RUNNER = 'Global Test Runner',
+export enum TEST_RUNNER_TABS {
+  TEST_RUNNER = 'Test Runner',
 }
 
 export enum ACTIVITY_MODE {
@@ -35,7 +35,7 @@ export enum ACTIVITY_MODE {
   REVIEW = 'REVIEW',
   PROJECT_OVERVIEW = 'PROJECT_OVERVIEW',
   WORKFLOW_MANAGER = 'WORKFLOW_MANAGER',
-  GLOBAL_TEST_RUNNER = 'GLOBAL_TEST_RUNNER',
+  TEST_RUNNER = 'TEST_RUNNER',
   REGISTER_SERVICES = 'REGISTER_SERVICES',
 }
 

package/src/stores/editor/EditorStore.ts

@@ -56,16 +56,15 @@ import {
   AssertionError,
   guaranteeType,
   type Clazz,
-  returnUndefOnError,
-  downloadFileUsingDataURI,
-  formatDate,
-  ContentType,
 } from '@finos/legend-shared';
 import { EditorSDLCState } from './EditorSDLCState.js';
 import { ModelImporterState } from './editor-state/ModelImporterState.js';
 import { ProjectConfigurationEditorState } from './editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js';
 import type { ElementFileGenerationState } from './editor-state/element-editor-state/ElementFileGenerationState.js';
-import { DevToolPanelState } from './panel-group/DevToolPanelState.js';
+import {
+  DevToolPanelState,
+  payloadDebugger,
+} from './panel-group/DevToolPanelState.js';
 import {
   generateEditorRoute,
   generateSetupRoute,
@@ -89,7 +88,6 @@ import {
   ActionAlertType,
   APPLICATION_EVENT,
   DEFAULT_TAB_SIZE,
-  DEFAULT_DATE_TIME_FORMAT,
 } from '@finos/legend-application';
 import { LEGEND_STUDIO_APP_EVENT } from '../../__lib__/LegendStudioEvent.js';
 import type { EditorMode } from './EditorMode.js';
@@ -668,23 +666,7 @@ export class EditorStore implements CommandRegistrar {
             baseUrl: this.applicationStore.config.engineServerUrl,
             queryBaseUrl: this.applicationStore.config.engineQueryServerUrl,
             enableCompression: true,
-            payloadDebugger: (payload: unknown, identifier: string) => {
-              const content =
-                returnUndefOnError(() =>
-                  JSON.stringify(payload, undefined, 2),
-                ) ??
-                returnUndefOnError(() => `${payload}`) ??
-                '';
-              // TODO: we can also copy the debug content to clipboard
-              downloadFileUsingDataURI(
-                `PAYLOAD_DEBUG__${identifier}__${formatDate(
-                  new Date(Date.now()),
-                  DEFAULT_DATE_TIME_FORMAT,
-                )}.json`,
-                content,
-                ContentType.TEXT_PLAIN,
-              );
-            },
+            payloadDebugger,
           },
         },
         {