@finos/legend-application-studio 26.1.7 → 26.1.8

package/src/components/editor/editor-group/mapping-editor/MappingExecutionBuilder.tsx

@@ -43,6 +43,10 @@ import {
   Modal,
   ModalTitle,
   clsx,
+  PanelHeaderActionItem,
+  PanelHeader,
+  PanelHeaderActions,
+  Panel,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -371,30 +375,20 @@ const MappingExecutionQueryEditor = observer(
     );
 
     return (
-      <div className="panel mapping-execution-builder__query-panel">
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">query</div>
-          </div>
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
-              tabIndex={-1}
+      <Panel className="mapping-execution-builder__query-panel">
+        <PanelHeader title="query">
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
               onClick={editWithQueryBuilder}
               title="Edit query..."
             >
               <PencilIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              tabIndex={-1}
-              onClick={clearQuery}
-              title="Clear query"
-            >
+            </PanelHeaderActionItem>
+            <PanelHeaderActionItem onClick={clearQuery} title="Clear query">
               <TimesIcon />
-            </button>
-          </div>
-        </div>
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
         {!isStubbed_RawLambda(queryState.query) && (
           <PanelContent>
             <div className="mapping-execution-builder__query-panel__query">
@@ -430,7 +424,7 @@ const MappingExecutionQueryEditor = observer(
             changeClassMapping={changeClassMapping}
           />
         )}
-      </div>
+      </Panel>
     );
   },
 );
@@ -446,13 +440,13 @@ export const MappingExecutionObjectInputDataBuilder = observer(
       objectInputData_setData(inputDataState.inputData, val);
 
     return (
-      <div className="panel__content mapping-execution-builder__input-data-panel__content">
+      <PanelContent className="mapping-execution-builder__input-data-panel__content">
         <CodeEditor
           language={CODE_EDITOR_LANGUAGE.JSON}
           inputValue={inputDataState.inputData.data}
           updateInput={updateInput}
         />
-      </div>
+      </PanelContent>
     );
   },
 );
@@ -466,13 +460,13 @@ export const MappingExecutionFlatDataInputDataBuilder = observer(
       flatData_setData(inputDataState.inputData, val);
 
     return (
-      <div className="panel__content mapping-execution-builder__input-data-panel__content">
+      <PanelContent className="mapping-execution-builder__input-data-panel__content">
         <CodeEditor
           language={CODE_EDITOR_LANGUAGE.TEXT}
           inputValue={inputDataState.inputData.data}
           updateInput={updateInput}
         />
-      </div>
+      </PanelContent>
     );
   },
 );
@@ -489,7 +483,7 @@ export const MappingExecutionRelationalInputDataBuilder = observer(
       relationalInputData_setData(inputDataState.inputData, val);
 
     return (
-      <div className="panel__content mapping-execution-builder__input-data-panel__content">
+      <PanelContent className="mapping-execution-builder__input-data-panel__content">
         <CodeEditor
           language={getRelationalInputTestDataEditorLanguage(
             inputDataState.inputData.inputType,
@@ -497,7 +491,7 @@ export const MappingExecutionRelationalInputDataBuilder = observer(
           inputValue={inputDataState.inputData.data}
           updateInput={updateInput}
         />
-      </div>
+      </PanelContent>
     );
   },
 );
@@ -536,7 +530,7 @@ export const MappingExecutionEmptyInputDataBuilder = observer(
     );
 
     return (
-      <div className="panel__content">
+      <PanelContent>
         <PanelDropZone dropTargetConnector={dropRef} isDragOver={isDragOver}>
           <BlankPanelPlaceholder
             text="Choose a class mapping"
@@ -546,7 +540,7 @@ export const MappingExecutionEmptyInputDataBuilder = observer(
             isDropZoneActive={canDrop}
           />
         </PanelDropZone>
-      </div>
+      </PanelContent>
     );
   },
 );
@@ -859,20 +853,16 @@ export const MappingExecutionBuilder = observer(
               <ResizablePanelSplitterLine color="var(--color-dark-grey-50)" />
             </ResizablePanelSplitter>
             <ResizablePanel minSize={28}>
-              <div className="panel mapping-execution-builder__result-panel">
-                <div className="panel__header">
-                  <div className="panel__header__title">
-                    <div className="panel__header__title__label">result</div>
-                  </div>
-                </div>
-                <div className="panel__content mapping-execution-builder__result-panel__content">
+              <Panel className="mapping-execution-builder__result-panel">
+                <PanelHeader title="result" />
+                <PanelContent className="mapping-execution-builder__result-panel__content">
                   <CodeEditor
                     inputValue={executionResultText ?? ''}
                     isReadOnly={true}
                     language={CODE_EDITOR_LANGUAGE.JSON}
                   />
-                </div>
-              </div>
+                </PanelContent>
+              </Panel>
             </ResizablePanel>
           </ResizablePanelGroup>
         </div>

package/src/components/editor/editor-group/mapping-editor/MappingTestsExplorer.tsx

@@ -39,6 +39,7 @@ import {
   BlankPanelPlaceholder,
   MenuContent,
   MenuContentItem,
+  Panel,
 } from '@finos/legend-art';
 import {
   type MappingElementDragSource,
@@ -382,7 +383,7 @@ export const MappingTestsExplorer = observer(
     );
 
     return (
-      <div className="panel mapping-test-explorer">
+      <Panel className="mapping-test-explorer">
         <div className="panel__header" title={testReportSummary}>
           <div className="mapping-test-explorer__header__info">
             <div className="panel__header__title">
@@ -496,7 +497,7 @@ export const MappingTestsExplorer = observer(
             changeClassMapping={changeClassMapping}
           />
         )}
-      </div>
+      </Panel>
     );
   },
 );

package/src/components/editor/editor-group/mapping-editor/OperationSetImplementationEditor.tsx

@@ -26,6 +26,9 @@ import {
   PanelDropZone,
   Panel,
   PanelContent,
+  PanelHeaderActions,
+  PanelHeader,
+  PanelHeaderActionItem,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
@@ -198,25 +201,23 @@ export const OperationSetImplementationEditor = observer(
     return (
       <div className="mapping-element-editor__content">
         <Panel>
-          <div className="panel__header">
+          <PanelHeader>
             <div className="panel__header__title">
               <div className="panel__header__title__content">PARAMETERS</div>
             </div>
-            <div className="panel__header__actions">
-              <button
-                className="panel__header__action"
+            <PanelHeaderActions>
+              <PanelHeaderActionItem
                 disabled={
                   isReadOnly ||
                   setImplementation.operation === OperationType.INHERITANCE
                 }
                 onClick={addParameter}
-                tabIndex={-1}
                 title="Add parameter"
               >
                 <PlusIcon />
-              </button>
-            </div>
-          </div>
+              </PanelHeaderActionItem>
+            </PanelHeaderActions>
+          </PanelHeader>
           <PanelDropZone
             isDragOver={isDragOver && !isReadOnly}
             dropTargetConnector={dropRef}

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

@@ -36,6 +36,11 @@ import {
   Button,
   PencilEditIcon,
   PanelDivider,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  PanelContent,
+  PanelHeader,
+  PanelContentLists,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import {
@@ -99,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">
@@ -197,7 +202,7 @@ const ProjectStructureEditor = observer(
             </PanelListItem>
           </PanelFormSection>
         </PanelForm>
-      </div>
+      </PanelContentLists>
     );
   },
 );
@@ -662,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
@@ -685,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
@@ -701,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}
@@ -729,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/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', {

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>