@finos/legend-application-studio 26.1.6 → 26.1.8

package/src/components/LegendStudioWebApplication.tsx

@@ -37,6 +37,7 @@ import {
   generateExtensionUrlPattern,
   Route,
   Switch,
+  type TEMPORARY__ReactRouterComponentType,
 } from '@finos/legend-application/browser';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../__lib__/LegendStudioDocumentation.js';
 
@@ -127,7 +128,10 @@ export const LegendStudioWebApplicationRouter = observer(() => {
                     LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN.VIEW_BY_GAV,
                     LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN.VIEW_BY_GAV_ENTITY,
                   ]}
-                  component={ProjectViewer}
+                  component={
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    ProjectViewer as TEMPORARY__ReactRouterComponentType
+                  }
                 />
                 <Route>
                   <NotFoundPage />
@@ -148,12 +152,18 @@ export const LegendStudioWebApplicationRouter = observer(() => {
                     LEGEND_STUDIO_ROUTE_PATTERN.VIEW_BY_REVISION_ENTITY,
                     LEGEND_STUDIO_ROUTE_PATTERN.VIEW_BY_VERSION_ENTITY,
                   ]}
-                  component={ProjectViewer}
+                  component={
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    ProjectViewer as TEMPORARY__ReactRouterComponentType
+                  }
                 />
                 <Route
                   exact={true}
                   path={LEGEND_STUDIO_ROUTE_PATTERN.REVIEW}
-                  component={WorkspaceReview}
+                  component={
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    WorkspaceReview as TEMPORARY__ReactRouterComponentType
+                  }
                 />
                 <Route
                   exact={true}
@@ -164,7 +174,10 @@ export const LegendStudioWebApplicationRouter = observer(() => {
                     LEGEND_STUDIO_ROUTE_PATTERN.EDIT_WORKSPACE,
                     LEGEND_STUDIO_ROUTE_PATTERN.EDIT_WORKSPACE_ENTITY,
                   ]}
-                  component={Editor}
+                  component={
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    Editor as TEMPORARY__ReactRouterComponentType
+                  }
                 />
                 <Route
                   exact={true}
@@ -174,7 +187,10 @@ export const LegendStudioWebApplicationRouter = observer(() => {
                     LEGEND_STUDIO_ROUTE_PATTERN.SETUP_WORKSPACE,
                     LEGEND_STUDIO_ROUTE_PATTERN.SETUP_GROUP_WORKSPACE,
                   ]}
-                  component={WorkspaceSetup}
+                  component={
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    WorkspaceSetup as TEMPORARY__ReactRouterComponentType
+                  }
                 />
                 {extraApplicationPageEntries.map((entry) => (
                   <Route
@@ -183,7 +199,10 @@ export const LegendStudioWebApplicationRouter = observer(() => {
                     path={entry.addressPatterns.map(
                       generateExtensionUrlPattern,
                     )}
-                    component={entry.renderer as React.ComponentType<unknown>}
+                    component={
+                      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                      entry.renderer as TEMPORARY__ReactRouterComponentType
+                    }
                   />
                 ))}
                 <Route>

package/src/components/editor/ActivityBar.tsx

@@ -117,7 +117,7 @@ export const ActivityBarMenu: React.FC = () => {
                 disabled={!appDocUrl}
                 onClick={goToDocumentation}
               >
-                See Documentation
+                Documentation
               </MenuContentItem>
               {docLinks?.map((entry) => (
                 <MenuContentItem
@@ -256,7 +256,7 @@ export const ActivityBar = observer(() => {
         icon: <FileTrayIcon className="activity-bar__explorer-icon" />,
       },
       !editorStore.isInConflictResolutionMode && {
-        mode: ACTIVITY_MODE.GLOBAL_TEST_RUNNER,
+        mode: ACTIVITY_MODE.TEST_RUNNER,
         title: 'Test Runner',
         icon: <FlaskIcon />,
       },

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

@@ -294,22 +294,17 @@ const ModelGenerationSpecifications = observer(
     );
     return (
       <Panel>
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">Model Generations</div>
-          </div>
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
+        <PanelHeader title="Model Generations">
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
               onClick={addModelGeneration}
               disabled={!modelGenerationElementsInGraph.length}
-              tabIndex={-1}
               title="Add File Generation"
             >
               <PlusIcon />
-            </button>
-          </div>
-        </div>
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
         <PanelContent>
           <PanelDropZone
             isDragOver={isDragOver}

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

@@ -17,7 +17,13 @@
 import { observer } from 'mobx-react-lite';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { INTERNAL__UnknownFunctionActivatorEdtiorState } from '../../../stores/editor/editor-state/element-editor-state/INTERNAL__UnknownFunctionActivatorEditorState.js';
-import { ArrowRightIcon, BlankPanelContent, Panel } from '@finos/legend-art';
+import {
+  ArrowRightIcon,
+  BlankPanelContent,
+  Panel,
+  PanelContent,
+  PanelHeader,
+} from '@finos/legend-art';
 import { useApplicationStore } from '@finos/legend-application';
 import { flowResult } from 'mobx';
 import { ProtocolValueBuilder } from './ProtocolValueBuilder.js';
@@ -59,14 +65,8 @@ export const INTERNAL__UnknownFunctionActivatorEdtior = observer(() => {
   return (
     <div className="function-activator-editor">
       <Panel>
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">
-              function activator
-            </div>
-          </div>
-        </div>
-        <div className="panel__content">
+        <PanelHeader title="function activator" />
+        <PanelContent>
           <div className="function-activator-editor__content">
             {valueBuilderState && (
               <>
@@ -135,7 +135,7 @@ export const INTERNAL__UnknownFunctionActivatorEdtior = observer(() => {
               Publish to Sandbox
             </button>
           </div>
-        </div>
+        </PanelContent>
       </Panel>
     </div>
   );

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

@@ -36,6 +36,9 @@ import {
   PanelLoadingIndicator,
   clsx,
   Button,
+  Panel,
+  PanelHeader,
+  PanelContent,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
@@ -98,10 +101,10 @@ const ExternalFormatModelImporterEditor = observer(
       );
     };
     return (
-      <div className="panel schema-set-panel">
-        <div className="panel__content model-loader">
+      <Panel className="schema-set-panel">
+        <PanelContent className="model-loader">
           <PanelLoadingIndicator isLoading={isFetchingDescriptions} />
-          <div className="panel__header">
+          <PanelHeader>
             <div className="uml-element-editor__tabs">
               {Object.values(SCHEMA_SET_TAB_TYPE).map((tab) => (
                 <div
@@ -116,9 +119,8 @@ const ExternalFormatModelImporterEditor = observer(
                 </div>
               ))}
             </div>
-          </div>
-
-          <div className="panel__content file-generation-editor__content">
+          </PanelHeader>
+          <PanelContent className="file-generation-editor__content">
             {currentTab === SCHEMA_SET_TAB_TYPE.SCHEMAS && (
               <SchemaSetGeneralEditor
                 schemaSetEditorState={schemaSetEditorState}
@@ -128,9 +130,9 @@ const ExternalFormatModelImporterEditor = observer(
 
             {currentTab === SCHEMA_SET_TAB_TYPE.GENERATE_MODEL &&
               renderMainEditPanel()}
-          </div>
-        </div>
-      </div>
+          </PanelContent>
+        </PanelContent>
+      </Panel>
     );
   },
 );
@@ -195,7 +197,7 @@ export const ModelImporter = observer(() => {
       const updateModel = (val: string): void =>
         modelImportEditorState.setModelText(val);
       return (
-        <div className="panel__content model-loader__editor">
+        <PanelContent className="model-loader__editor">
           <CodeEditor
             language={
               modelImportEditorState.nativeType ===
@@ -206,7 +208,7 @@ export const ModelImporter = observer(() => {
             inputValue={modelImportEditorState.modelText}
             updateInput={updateModel}
           />
-        </div>
+        </PanelContent>
       );
     } else if (
       modelImportEditorState instanceof ExternalFormatModelImporterState
@@ -221,8 +223,8 @@ export const ModelImporter = observer(() => {
   };
 
   return (
-    <div className="panel model-loader">
-      <div className="panel__header model-loader__header">
+    <Panel className="model-loader">
+      <PanelHeader className="model-loader__header">
         <div className="model-loader__header__configs">
           <DropdownMenu
             className="model-loader__header__configs__type"
@@ -339,9 +341,9 @@ export const ModelImporter = observer(() => {
             text="Load"
           />
         </div>
-      </div>
+      </PanelHeader>
 
       {renderModelImporterEditor()}
-    </div>
+    </Panel>
   );
 });

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>