@finos/legend-application-studio 26.1.6 → 26.1.8

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 &&

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}