@finos/legend-application-studio 26.1.7 → 26.1.8

package/src/components/editor/editor-group/RuntimeEditor.tsx

@@ -62,6 +62,8 @@ import {
   ModalHeaderActions,
   ModalBody,
   Modal,
+  PanelHeaderActions,
+  PanelHeaderActionItem,
 } from '@finos/legend-art';
 import { getElementIcon } from '../../ElementIconUtils.js';
 import type { RuntimeExplorerTreeNodeData } from '../../../stores/editor/utils/TreeUtils.js';
@@ -435,14 +437,11 @@ const RuntimeExplorer = observer(
     }, [runtimeEditorState]);
 
     return (
-      <div className="panel runtime-explorer">
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">runtime</div>
-            <div className="panel__header__title__content">{runtimeName}</div>
-          </div>
-        </div>
-        <div className="panel__content">
+      <Panel className="runtime-explorer">
+        <PanelHeader title="runtime">
+          <div className="panel__header__title__content">{runtimeName}</div>
+        </PanelHeader>
+        <PanelContent>
           <PanelDropZone
             dropTargetConnector={dropRuntimeSubElementRef}
             isDragOver={isRuntimeSubElementDragOver}
@@ -463,8 +462,8 @@ const RuntimeExplorer = observer(
               />
             </div>
           </PanelDropZone>
-        </div>
-      </div>
+        </PanelContent>
+      </Panel>
     );
   },
 );
@@ -686,8 +685,8 @@ const IdentifiedConnectionsPerStoreEditor = observer(
       <div className="runtime-store-connections-editor">
         <ResizablePanelGroup orientation="vertical">
           <ResizablePanel size={300} minSize={300}>
-            <div className="panel runtime-explorer">
-              <div className="panel__header">
+            <Panel className="runtime-explorer">
+              <PanelHeader>
                 {currentRuntimeEditorTabState instanceof
                   IdentifiedConnectionsPerStoreEditorTabState && (
                   <div className="panel__header__title">
@@ -715,18 +714,16 @@ const IdentifiedConnectionsPerStoreEditor = observer(
                     </div>
                   </div>
                 )}
-                <div className="panel__header__actions">
-                  <button
-                    className="panel__header__action"
+                <PanelHeaderActions>
+                  <PanelHeaderActionItem
                     disabled={isReadOnly}
-                    tabIndex={-1}
                     onClick={addNewConnection}
                     title="Add Connection..."
                   >
                     <PlusIcon />
-                  </button>
-                </div>
-              </div>
+                  </PanelHeaderActionItem>
+                </PanelHeaderActions>
+              </PanelHeader>
               <ContextMenu
                 className="panel__content"
                 disabled={isReadOnly}
@@ -776,7 +773,7 @@ const IdentifiedConnectionsPerStoreEditor = observer(
                   )}
                 </PanelDropZone>
               </ContextMenu>
-            </div>
+            </Panel>
           </ResizablePanel>
           <ResizablePanelSplitter>
             <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
@@ -793,13 +790,7 @@ const IdentifiedConnectionsPerStoreEditor = observer(
             )}
             {(!connectionEditorState || !identifiedConnection) && (
               <Panel>
-                <div className="panel__header">
-                  <div className="panel__header__title">
-                    <div className="panel__header__title__label">
-                      runtime connection
-                    </div>
-                  </div>
-                </div>
+                <PanelHeader title="runtime connection" />
                 <PanelContent>
                   <BlankPanelContent>No connection selected</BlankPanelContent>
                 </PanelContent>
@@ -930,7 +921,7 @@ const RuntimeGeneralEditor = observer(
 
     return (
       <div className="panel runtime-explorer">
-        <div className="panel__header"></div>
+        <PanelHeader />
         <PanelContent>
           <PanelDropZone
             dropTargetConnector={dropMappingRef}

package/src/components/editor/editor-group/connection-editor/ConnectionEditor.tsx

@@ -26,7 +26,13 @@ import {
 } from '../../../../stores/editor/editor-state/element-editor-state/connection/ConnectionEditorState.js';
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 import type { Class } from '@finos/legend-graph';
-import { CustomSelectorInput, LockIcon, PanelContent } from '@finos/legend-art';
+import {
+  CustomSelectorInput,
+  LockIcon,
+  Panel,
+  PanelContent,
+  PanelHeader,
+} from '@finos/legend-art';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import {
@@ -168,16 +174,10 @@ export const ConnectionEditor = observer(
       }
     };
     return (
-      <div className="panel connection-editor">
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">
-              {connectionValueState.label()}
-            </div>
-          </div>
-        </div>
+      <Panel className="connection-editor">
+        <PanelHeader title={connectionValueState.label()} />
         <PanelContent>{renderConnectionValueEditor()}</PanelContent>
-      </div>
+      </Panel>
     );
   },
 );

package/src/components/editor/editor-group/connection-editor/DatabaseBuilder.tsx

@@ -42,6 +42,8 @@ import {
   ModalFooterButton,
   BlankPanelContent,
   KeyIcon,
+  PanelHeader,
+  Panel,
 } from '@finos/legend-art';
 import { useEffect } from 'react';
 import {
@@ -311,14 +313,8 @@ export const DatabaseBuilder = observer(
             <ResizablePanelGroup orientation="vertical">
               <ResizablePanel size={450}>
                 <div className="database-builder__config">
-                  <div className="panel__header">
-                    <div className="panel__header__title">
-                      <div className="panel__header__title__label">
-                        schema explorer
-                      </div>
-                    </div>
-                  </div>
-                  <div className="panel__content database-builder__config__content">
+                  <PanelHeader title="schema explorer" />
+                  <PanelContent className="database-builder__config__content">
                     {databaseBuilderState.treeData && (
                       <DatabaseBuilderExplorer
                         treeData={databaseBuilderState.treeData}
@@ -326,19 +322,14 @@ export const DatabaseBuilder = observer(
                         databaseBuilderState={databaseBuilderState}
                       />
                     )}
-                  </div>
+                  </PanelContent>
                 </div>
               </ResizablePanel>
               <ResizablePanelSplitter />
               <ResizablePanel>
-                <div className="panel database-builder__model">
-                  <div className="panel__header">
-                    <div className="panel__header__title">
-                      <div className="panel__header__title__label">
-                        database model
-                      </div>
-                    </div>
-                  </div>
+                <Panel className="database-builder__model">
+                  <PanelHeader title="database model" />
+
                   <PanelContent>
                     <div className="database-builder__modeller">
                       <div className="panel__content__form__section database-builder__modeller__path">
@@ -377,7 +368,7 @@ export const DatabaseBuilder = observer(
                       </div>
                     </div>
                   </PanelContent>
-                </div>
+                </Panel>
               </ResizablePanel>
             </ResizablePanelGroup>
           </ModalBody>

package/src/components/editor/editor-group/data-editor/DataElementEditor.tsx

@@ -29,6 +29,7 @@ import {
   LockIcon,
   MenuContent,
   MenuContentItem,
+  PanelContentLists,
   PanelDropZone,
   PlusIcon,
 } from '@finos/legend-art';
@@ -353,7 +354,7 @@ export const DataElementEditor = observer(() => {
                   isDragOver={isStereotypeDragOver && !isReadOnly}
                   dropTargetConnector={dropStereotypeRef}
                 >
-                  <div className="panel__content__lists">
+                  <PanelContentLists>
                     <StereotypeDragPreviewLayer />
                     {dataElement.stereotypes.map((stereotype) => (
                       <StereotypeSelector
@@ -365,7 +366,7 @@ export const DataElementEditor = observer(() => {
                         darkTheme={true}
                       />
                     ))}
-                  </div>
+                  </PanelContentLists>
                 </PanelDropZone>
               </div>
             </div>
@@ -402,7 +403,7 @@ export const DataElementEditor = observer(() => {
                   isDragOver={isTaggedValueDragOver && !isReadOnly}
                   dropTargetConnector={dropTaggedValueRef}
                 >
-                  <div className="panel__content__lists">
+                  <PanelContentLists>
                     <TaggedValueDragPreviewLayer />
                     {dataElement.taggedValues.map((taggedValue) => (
                       <TaggedValueEditor
@@ -414,7 +415,7 @@ export const DataElementEditor = observer(() => {
                         darkTheme={true}
                       />
                     ))}
-                  </div>
+                  </PanelContentLists>
                 </PanelDropZone>
               </div>
             </div>

package/src/components/editor/editor-group/element-generation-editor/ElementXTGenerationEditor.tsx

@@ -18,6 +18,9 @@ import { useApplicationStore } from '@finos/legend-application';
 import {
   ArrowCircleLeftIcon,
   PanelContent,
+  PanelHeader,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
   RefreshIcon,
   ResizablePanel,
   ResizablePanelGroup,
@@ -83,14 +86,10 @@ export const ExternalFormatGeneratioConfigEditor = observer(
 
     return (
       <div className="panel file-generation-editor__configuration">
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">{`${xtState.description.name} configuration`}</div>
-          </div>
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action file-generation-editor__configuration__reset-btn"
-              tabIndex={-1}
+        <PanelHeader title={`${xtState.description.name} configuration`}>
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
+              className="file-generation-editor__configuration__reset-btn"
               disabled={
                 isReadOnly ||
                 !configSpecification.configurationProperties.length
@@ -99,9 +98,9 @@ export const ExternalFormatGeneratioConfigEditor = observer(
               title="Reset to default configuration"
             >
               <RefreshIcon />
-            </button>
-          </div>
-        </div>
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
         <PanelContent>
           <div className="file-generation-editor__configuration__content">
             <ModelUnitEditor

package/src/components/editor/editor-group/element-generation-editor/FileSystemViewer.tsx

@@ -41,6 +41,10 @@ import {
   FolderIcon,
   FileCodeIcon,
   PanelContent,
+  PanelHeader,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  Panel,
 } from '@finos/legend-art';
 import type { GeneratedFileStructureState } from '../../../../stores/editor/editor-state/FileGenerationState.js';
 import {
@@ -213,29 +217,25 @@ export const FileSystemViewer = observer(
       <ResizablePanelGroup orientation="vertical">
         <ResizablePanel size={250} minSize={250}>
           <div className="generation-result-viewer__side-bar">
-            <div className="panel generation-result-viewer__explorer">
-              <div className="panel__header">
-                <div className="panel__header__title">
-                  <div className="panel__header__title__label">result</div>
-                </div>
-                <div className="panel__header__actions">
-                  <button
+            <Panel className="generation-result-viewer__explorer">
+              <PanelHeader title="result">
+                <PanelHeaderActions>
+                  <PanelHeaderActionItem
                     className={clsx(
-                      'panel__header__action  generation-result-viewer__regenerate-btn',
+                      'generation-result-viewer__regenerate-btn',
                       {
                         ' generation-result-viewer__regenerate-btn--loading':
                           generatedFileState.generatingAction.isInProgress,
                       },
                     )}
-                    tabIndex={-1}
                     disabled={generatedFileState.generatingAction.isInProgress}
                     onClick={regenerate}
                     title="Regenerate"
                   >
                     <RefreshIcon />
-                  </button>
-                </div>
-              </div>
+                  </PanelHeaderActionItem>
+                </PanelHeaderActions>
+              </PanelHeader>
               <PanelContent>
                 <PanelLoadingIndicator
                   isLoading={generatedFileState.generatingAction.isInProgress}
@@ -253,7 +253,7 @@ export const FileSystemViewer = observer(
                   </BlankPanelContent>
                 )}
               </PanelContent>
-            </div>
+            </Panel>
           </div>
         </ResizablePanel>
         <ResizablePanelSplitter>

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_SchemaSetModelGenerationEditor.tsx

@@ -22,7 +22,11 @@ import type { SchemaSetModelGenerationState } from '../../../../stores/editor/ed
 import { debounce } from '@finos/legend-shared';
 import {
   InputWithInlineValidation,
+  Panel,
   PanelContent,
+  PanelHeader,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
   PanelLoadingIndicator,
   RefreshIcon,
   ResizablePanel,
@@ -97,29 +101,22 @@ export const SchemaSetModelGenerationEditor = observer(
     };
 
     return (
-      <div className="panel__content file-generation-editor__content">
+      <PanelContent className="file-generation-editor__content">
         <ResizablePanelGroup orientation="vertical">
           <ResizablePanel size={250} minSize={50}>
-            <div className="panel file-generation-editor__configuration">
-              <div className="panel__header">
-                <div className="panel__header__title">
-                  <div className="panel__header__title__label">{`${format} configuration`}</div>
-                </div>
-                <div className="panel__header__actions">
-                  <div className="panel__header__actions">
-                    <div className="panel__header__actions"></div>
-                    <button
-                      className="panel__header__action file-generation-editor__configuration__reset-btn"
-                      tabIndex={-1}
-                      disabled={isReadOnly || !properties.length}
-                      onClick={resetProperties}
-                      title="Reset to default configuration"
-                    >
-                      <RefreshIcon />
-                    </button>
-                  </div>
-                </div>
-              </div>
+            <Panel className="file-generation-editor__configuration">
+              <PanelHeader title={`${format} configuration`}>
+                <PanelHeaderActions>
+                  <PanelHeaderActionItem
+                    className="file-generation-editor__configuration__reset-btn"
+                    disabled={isReadOnly || !properties.length}
+                    onClick={resetProperties}
+                    title="Reset to default configuration"
+                  >
+                    <RefreshIcon />
+                  </PanelHeaderActionItem>
+                </PanelHeaderActions>
+              </PanelHeader>
               <PanelContent>
                 <div className="file-generation-editor__configuration__content">
                   <div className="panel__content__form__section">
@@ -161,20 +158,17 @@ export const SchemaSetModelGenerationEditor = observer(
                     ))}
                 </div>
               </PanelContent>
-            </div>
+            </Panel>
           </ResizablePanel>
           <ResizablePanelSplitter>
             <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
           </ResizablePanelSplitter>
           <ResizablePanel>
-            <div className="panel generation-result-viewer__file">
-              <div className="panel__header">
-                <div className="panel__header__title">
-                  <div className="panel__header__title__label">result</div>
-                </div>
-                <div className="panel__header__actions">
-                  <button
-                    className="panel__header__action generation-result-viewer__generate-btn"
+            <Panel className="generation-result-viewer__file">
+              <PanelHeader title="result">
+                <PanelHeaderActions>
+                  <PanelHeaderActionItem
+                    className=" generation-result-viewer__generate-btn"
                     onClick={regenerate}
                     disabled={
                       modelGenerationState.generatingModelsState.isInProgress ||
@@ -182,7 +176,6 @@ export const SchemaSetModelGenerationEditor = observer(
                         .isInProgress
                     }
                     title="Regenerate"
-                    tabIndex={-1}
                   >
                     <div className="generation-result-viewer__generate-btn__label">
                       <RefreshIcon className="generation-result-viewer__generate-btn__label__icon" />
@@ -190,7 +183,7 @@ export const SchemaSetModelGenerationEditor = observer(
                         Generate
                       </div>
                     </div>
-                  </button>
+                  </PanelHeaderActionItem>
 
                   {!modelGenerationState.isolatedGraph && (
                     <button
@@ -203,8 +196,8 @@ export const SchemaSetModelGenerationEditor = observer(
                       Import
                     </button>
                   )}
-                </div>
-              </div>
+                </PanelHeaderActions>
+              </PanelHeader>
               <PanelContent>
                 <PanelLoadingIndicator
                   isLoading={
@@ -219,10 +212,10 @@ export const SchemaSetModelGenerationEditor = observer(
                   language={CODE_EDITOR_LANGUAGE.PURE}
                 />
               </PanelContent>
-            </div>
+            </Panel>
           </ResizablePanel>
         </ResizablePanelGroup>
-      </div>
+      </PanelContent>
     );
   },
 );

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

@@ -35,6 +35,9 @@ import {
   PanelContent,
   ModalTitle,
   Modal,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  PanelHeader,
 } from '@finos/legend-art';
 import { MappingEditorState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import { TypeTree } from './TypeTree.js';
@@ -497,25 +500,23 @@ export const EnumerationMappingEditor = observer(
                 data-testid={LEGEND_STUDIO_TEST_ID.SOURCE_PANEL}
                 className="panel source-panel"
               >
-                <div className="panel__header">
+                <PanelHeader>
                   <div className="panel__header__title">
                     <div className="panel__header__title__label">source</div>
                     <div className="panel__header__title__content">
                       {sourceType?.name ?? '(none)'}
                     </div>
                   </div>
-                  <div className="panel__header__actions">
-                    <button
-                      className="panel__header__action"
+                  <PanelHeaderActions>
+                    <PanelHeaderActionItem
                       onClick={showSourceSelectorModal}
                       disabled={isReadOnly}
-                      tabIndex={-1}
                       title="Choose a source..."
                     >
                       <PencilIcon />
-                    </button>
-                  </div>
-                </div>
+                    </PanelHeaderActionItem>
+                  </PanelHeaderActions>
+                </PanelHeader>
                 <PanelContent>
                   <PanelDropZone
                     dropTargetConnector={dropRef}

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

@@ -27,6 +27,9 @@ import {
   PencilEditIcon,
   PanelDropZone,
   PanelContent,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  PanelHeader,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
@@ -301,25 +304,23 @@ export const InstanceSetImplementationSourceExplorer = observer(
             hasParseError,
         })}
       >
-        <div className="panel__header">
+        <PanelHeader>
           <div className="panel__header__title source-panel__header__title">
             <div className="panel__header__title__label">source</div>
             <div className="panel__header__title__content">{sourceLabel}</div>
           </div>
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
               onClick={showSourceSelectorModal}
               disabled={
                 isReadOnly || setImplementation._isEmbedded || isUnsupported
               }
-              tabIndex={-1}
               title="Select Source..."
             >
               <PencilEditIcon />
-            </button>
-          </div>
-        </div>
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
         <PanelContent>
           <PanelDropZone
             dropTargetConnector={dropRef}
@@ -517,13 +518,13 @@ export const InstanceSetImplementationEditor = observer(
             <ResizablePanelGroup orientation="horizontal">
               <ResizablePanel minSize={300}>
                 <div className="panel class-mapping-editor__property-panel">
-                  <div className="panel__header">
+                  <PanelHeader>
                     <div className="panel__header__title">
                       <div className="panel__header__title__content">
                         PROPERTIES
                       </div>
                     </div>
-                    <div className="panel__header__actions">
+                    <PanelHeaderActions>
                       <div className="panel__header__action">
                         <div
                           className={`class-mapping-editor__sort-by-required-btn ${
@@ -537,8 +538,8 @@ export const InstanceSetImplementationEditor = observer(
                           <AsteriskIcon />
                         </div>
                       </div>
-                    </div>
-                  </div>
+                    </PanelHeaderActions>
+                  </PanelHeader>
                   <PanelContent>
                     {!isReadOnly &&
                       !isUnsupported &&