@finos/legend-application-studio 26.1.7 → 26.1.9

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