@finos/legend-application-studio 20.1.2 → 20.2.0

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestsEditor.tsx

@@ -35,7 +35,11 @@ import {
   RefreshIcon,
   TimesIcon,
 } from '@finos/legend-art';
-import { type ValueSpecification, PrimitiveType } from '@finos/legend-graph';
+import {
+  type ValueSpecification,
+  PrimitiveType,
+  PureMultiExecution,
+} from '@finos/legend-graph';
 import { BasicValueSpecificationEditor } from '@finos/legend-query-builder';
 import {
   filterByType,
@@ -47,9 +51,10 @@ import { observer } from 'mobx-react-lite';
 import { forwardRef, useEffect, useState } from 'react';
 import type { ServiceTestSuiteState } from '../../../../../stores/editor-state/element-editor-state/service/testable/ServiceTestableState.js';
 import {
-  ServiceValueSpecificationTestParameterState,
+  type KeyOption,
   type ServiceTestSetupState,
   type ServiceTestState,
+  ServiceValueSpecificationTestParameterState,
 } from '../../../../../stores/editor-state/element-editor-state/service/testable/ServiceTestEditorState.js';
 import { TESTABLE_TEST_TAB } from '../../../../../stores/editor-state/element-editor-state/testable/TestableEditorState.js';
 import type { TestAssertionEditorState } from '../../../../../stores/editor-state/element-editor-state/testable/TestAssertionState.js';
@@ -276,15 +281,25 @@ const ServiceTestSetupEditor = observer(
     const format = test.serializationFormat;
     const selectedSerializationFormat = setupState.getSelectedFormatOption();
     const options = setupState.options;
+    const keyOptions = setupState.keyOptions;
+    const [selectedKeys, setSelectedKeys] = useState<KeyOption[]>(
+      setupState.getSelectedKeyOptions(),
+    );
     const isReadOnly =
       serviceTestState.suiteState.testableState.serviceEditorState.isReadOnly;
-    const onChange = (val: { label: string; value: string } | null): void => {
+    const onSerializationFormatChange = (
+      val: { label: string; value: string } | null,
+    ): void => {
       if (val === null) {
         setupState.changeSerializationFormat(undefined);
       } else if (val.value !== format) {
         setupState.changeSerializationFormat(val.value);
       }
     };
+    const onKeyOptionChange = (val: KeyOption[]): void => {
+      setupState.addServiceTestAssertKeys(val.map((op) => op.value));
+      setSelectedKeys(val);
+    };
     const addParameter = (): void => {
       setupState.setShowNewParameterModal(true);
     };
@@ -307,27 +322,27 @@ const ServiceTestSetupEditor = observer(
         </div>
         <div className="service-test-editor__content">
           <ResizablePanelGroup orientation="horizontal">
-            <ResizablePanel size={200} minSize={28}>
+            <ResizablePanel size={230} minSize={28}>
               <div className="service-test-data-editor panel">
                 <div className="service-test-suite-editor__header">
                   <div className="service-test-suite-editor__header__title">
                     <div className="service-test-suite-editor__header__title__label">
-                      serialization
+                      configuration
                     </div>
                   </div>
                 </div>
-                <div className="service-test-editor__setup__serialization">
+                <div className="service-test-editor__setup__configuration">
                   <div className="panel__content__form__section">
                     <div className="panel__content__form__section__header__label">
                       Serialization Format
                     </div>
                     <div className="panel__content__form__section__header__prompt">
-                      format to serialize execution result
+                      Format to serialize execution result
                     </div>
                     <CustomSelectorInput
                       className="panel__content__form__section__dropdown"
                       options={options}
-                      onChange={onChange}
+                      onChange={onSerializationFormatChange}
                       value={selectedSerializationFormat}
                       isClearable={true}
                       escapeClearsValue={true}
@@ -335,6 +350,30 @@ const ServiceTestSetupEditor = observer(
                       disable={isReadOnly}
                     />
                   </div>
+                  {setupState.testState.testable.execution instanceof
+                    PureMultiExecution && (
+                    <div className="panel__content__form__section">
+                      <div className="panel__content__form__section__header__label">
+                        Keys
+                      </div>
+                      <div className="panel__content__form__section__header__prompt">
+                        Specify keys for each test to run assertions against
+                        selected env keys
+                      </div>
+                      <CustomSelectorInput
+                        className="panel__content__form__section__dropdown"
+                        options={keyOptions}
+                        onChange={onKeyOptionChange}
+                        value={selectedKeys}
+                        isClearable={true}
+                        escapeClearsValue={true}
+                        darkMode={true}
+                        isMulti={true}
+                        disable={isReadOnly}
+                        placeholder={'Choose keys...'}
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
             </ResizablePanel>

package/src/components/editor/edit-panel/uml-editor/AssociationEditor.tsx

@@ -186,7 +186,7 @@ const AssociationPropertyBasicEditor = observer(
     // Other
     const openElement = (): void => {
       if (!(propertyType instanceof PrimitiveType)) {
-        editorStore.openElement(
+        editorStore.tabManagerState.openElementEditor(
           propertyType instanceof Unit ? propertyType.measure : propertyType,
         );
       }
@@ -322,7 +322,8 @@ export const AssociationEditor = observer(
   (props: { association: Association }) => {
     const { association } = props;
     const editorStore = useEditorStore();
-    const editorState = editorStore.getCurrentEditorState(UMLEditorState);
+    const editorState =
+      editorStore.tabManagerState.getCurrentEditorState(UMLEditorState);
     const isReadOnly = editorState.isReadOnly;
     // Selected property
     const [selectedProperty, setSelectedProperty] = useState<

package/src/components/editor/edit-panel/uml-editor/ClassEditor.tsx

@@ -272,14 +272,15 @@ const PropertyBasicEditor = observer(
     // Other
     const openElement = (): void => {
       if (!(propertyType instanceof PrimitiveType)) {
-        editorStore.openElement(
+        editorStore.tabManagerState.openElementEditor(
           propertyType instanceof Unit ? propertyType.measure : propertyType,
         );
       }
     };
     // NOTE: for now we do not allow directly modifying inherited and associated properties,
     // we would make the user go to the supertype or the association where the property comes from
-    const visitOwner = (): void => editorStore.openElement(property._OWNER);
+    const visitOwner = (): void =>
+      editorStore.tabManagerState.openElementEditor(property._OWNER);
 
     return (
       <div ref={ref} className="property-basic-editor__container">
@@ -626,13 +627,13 @@ const DerivedPropertyBasicEditor = observer(
       );
     const openElement = (): void => {
       if (!(propertyType instanceof PrimitiveType)) {
-        editorStore.openElement(
+        editorStore.tabManagerState.openElementEditor(
           propertyType instanceof Unit ? propertyType.measure : propertyType,
         );
       }
     };
     const visitOwner = (): void =>
-      editorStore.openElement(derivedProperty._OWNER);
+      editorStore.tabManagerState.openElementEditor(derivedProperty._OWNER);
     const remove = applicationStore.guardUnhandledError(async () => {
       await flowResult(dpState.convertLambdaObjectToGrammarString(false));
       deleteDerivedProperty();
@@ -913,7 +914,8 @@ const ConstraintEditor = observer(
       );
       deleteConstraint();
     });
-    const visitOwner = (): void => editorStore.openElement(constraint._OWNER);
+    const visitOwner = (): void =>
+      editorStore.tabManagerState.openElementEditor(constraint._OWNER);
 
     return (
       <div ref={ref} className="constraint-editor__container">
@@ -1068,7 +1070,8 @@ const SuperTypeEditor = observer(
     const selectedType = { value: rawType, label: rawType.name };
     const changeType = (val: PackageableElementOption<Class>): void =>
       setGenericTypeReferenceValue(superType, new GenericType(val.value));
-    const visitDerivationSource = (): void => editorStore.openElement(rawType);
+    const visitDerivationSource = (): void =>
+      editorStore.tabManagerState.openElementEditor(rawType);
 
     return (
       <div ref={ref} className="super-type-editor__container">
@@ -1665,7 +1668,7 @@ export const ClassFormEditor = observer(
       : undefined;
     const visitGenerationParentElement = (): void => {
       if (generationParentElement) {
-        editorStore.openElement(generationParentElement);
+        editorStore.tabManagerState.openElementEditor(generationParentElement);
       }
     };
 
@@ -1834,7 +1837,8 @@ export const ClassFormEditor = observer(
 export const ClassEditor = observer((props: { _class: Class }) => {
   const { _class } = props;
   const editorStore = useEditorStore();
-  const editorState = editorStore.getCurrentEditorState(ClassEditorState);
+  const editorState =
+    editorStore.tabManagerState.getCurrentEditorState(ClassEditorState);
 
   const classPreviewRenderers = editorStore.pluginManager
     .getApplicationPlugins()

package/src/components/editor/edit-panel/uml-editor/EnumerationEditor.tsx

@@ -397,7 +397,8 @@ export const EnumerationEditor = observer(
   (props: { enumeration: Enumeration }) => {
     const { enumeration } = props;
     const editorStore = useEditorStore();
-    const editorState = editorStore.getCurrentEditorState(UMLEditorState);
+    const editorState =
+      editorStore.tabManagerState.getCurrentEditorState(UMLEditorState);
     const isReadOnly = editorState.isReadOnly;
     // Selected enum value
     const [selectedEnum, setSelectedEnum] = useState<Enum | undefined>();
@@ -533,7 +534,7 @@ export const EnumerationEditor = observer(
       : undefined;
     const visitGenerationParentElement = (): void => {
       if (generationParentElement) {
-        editorStore.openElement(generationParentElement);
+        editorStore.tabManagerState.openElementEditor(generationParentElement);
       }
     };
 

package/src/components/editor/edit-panel/uml-editor/ProfileEditor.tsx

@@ -250,7 +250,8 @@ const StereotypeBasicEditor = observer(
 export const ProfileEditor = observer((props: { profile: Profile }) => {
   const { profile } = props;
   const editorStore = useEditorStore();
-  const editorState = editorStore.getCurrentEditorState(UMLEditorState);
+  const editorState =
+    editorStore.tabManagerState.getCurrentEditorState(UMLEditorState);
   const isReadOnly = editorState.isReadOnly;
   // Tab
   const selectedTab = editorState.selectedTab;

package/src/components/editor/edit-panel/uml-editor/StereotypeSelector.tsx

@@ -107,7 +107,7 @@ export const StereotypeSelector = observer(
       }
     };
     const visitProfile = (): void =>
-      editorStore.openElement(selectedProfile.value);
+      editorStore.tabManagerState.openElementEditor(selectedProfile.value);
     // Stereotype
     const stereotypeOptions = selectedProfile.value.p_stereotypes.map((st) => ({
       label: st.value,

package/src/components/editor/edit-panel/uml-editor/TaggedValueEditor.tsx

@@ -113,7 +113,7 @@ export const TaggedValueEditor = observer(
       }
     };
     const visitProfile = (): void =>
-      editorStore.openElement(selectedProfile.value);
+      editorStore.tabManagerState.openElementEditor(selectedProfile.value);
     // Tag
     const tagOptions = selectedProfile.value.p_tags.map((tag) => ({
       label: tag.value,

package/src/components/editor/edit-panel/uml-editor/UMLEditor.tsx

@@ -25,7 +25,8 @@ import { Class, Enumeration, Association, Profile } from '@finos/legend-graph';
 
 export const UMLEditor = observer(() => {
   const editorStore = useEditorStore();
-  const umlEditorState = editorStore.getCurrentEditorState(UMLEditorState);
+  const umlEditorState =
+    editorStore.tabManagerState.getCurrentEditorState(UMLEditorState);
   const currentElement = umlEditorState.element;
 
   return (

package/src/components/editor/side-bar/Explorer.tsx

@@ -349,11 +349,11 @@ const ExplorerContextMenu = observer(
 const ProjectConfig = observer(() => {
   const editorStore = useEditorStore();
   const openConfigurationEditor = (): void =>
-    editorStore.openSingletonEditorState(
+    editorStore.tabManagerState.openTab(
       editorStore.projectConfigurationEditorState,
     );
   const isSelected =
-    editorStore.currentEditorState ===
+    editorStore.tabManagerState.currentTab ===
       editorStore.projectConfigurationEditorState &&
     // if we select non-element like packages, we need to deselect project configuration
     // so maybe a good TODO is to move this to explorer tree state
@@ -528,7 +528,7 @@ const ExplorerTrees = observer(() => {
   const editorStore = useEditorStore();
   const { isInGrammarTextMode, isInViewerMode } = editorStore;
   const openModelImport = (): void =>
-    editorStore.openSingletonEditorState(editorStore.modelImporterState);
+    editorStore.tabManagerState.openTab(editorStore.modelImporterState);
   const graph = editorStore.graphManagerState.graph;
   // Explorer tree
   const treeData = editorStore.explorerTreeState.getTreeData();
@@ -733,9 +733,9 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
     editorStore.explorerTreeState.setTreeData({ ...treeData });
   };
   const showModelImporter = (): void =>
-    editorStore.openState(editorStore.modelImporterState);
+    editorStore.tabManagerState.openTab(editorStore.modelImporterState);
   const openConfigurationEditor = (): void =>
-    editorStore.openSingletonEditorState(
+    editorStore.tabManagerState.openTab(
       editorStore.projectConfigurationEditorState,
     );
 

package/src/components/editor/side-bar/LocalChanges.tsx

@@ -163,11 +163,11 @@ export const LocalChanges = observer(() => {
     localChangesState.workspaceSyncState.pullChangesState.isInProgress ||
     localChangesState.refreshWorkspaceSyncStatusState.isInProgress;
   // Changes
-  const currentEditorState = editorStore.currentEditorState;
+  const currentTabState = editorStore.tabManagerState.currentTab;
   const isSelectedDiff = (diff: EntityDiff): boolean =>
-    currentEditorState instanceof EntityDiffViewState &&
-    diff.oldPath === currentEditorState.fromEntityPath &&
-    diff.newPath === currentEditorState.toEntityPath;
+    currentTabState instanceof EntityDiffViewState &&
+    diff.oldPath === currentTabState.fromEntityPath &&
+    diff.newPath === currentTabState.toEntityPath;
   const changes =
     editorStore.changeDetectionState.workspaceLocalLatestRevisionState.changes;
   const openChange =
@@ -178,8 +178,8 @@ export const LocalChanges = observer(() => {
   const conflicts =
     editorStore.changeDetectionState.potentialWorkspacePullConflicts;
   const isSelectedConflict = (conflict: EntityChangeConflict): boolean =>
-    currentEditorState instanceof EntityChangeConflictEditorState &&
-    conflict.entityPath === currentEditorState.entityPath;
+    currentTabState instanceof EntityChangeConflictEditorState &&
+    conflict.entityPath === currentTabState.entityPath;
   const openPotentialConflict =
     (conflict: EntityChangeConflict): (() => void) =>
     (): void =>

package/src/components/editor/side-bar/WorkspaceReview.tsx

@@ -42,12 +42,12 @@ import { formatDistanceToNow } from '@finos/legend-shared';
 export const WorkspaceReviewDiffs = observer(() => {
   const editorStore = useEditorStore();
   const workspaceReviewState = editorStore.workspaceReviewState;
-  const currentEditorState = editorStore.currentEditorState;
+  const currentTabState = editorStore.tabManagerState.currentTab;
   const changes = editorStore.changeDetectionState.aggregatedWorkspaceChanges;
   const isSelectedDiff = (diff: EntityDiff): boolean =>
-    currentEditorState instanceof EntityDiffViewState &&
-    diff.oldPath === currentEditorState.fromEntityPath &&
-    diff.newPath === currentEditorState.toEntityPath;
+    currentTabState instanceof EntityDiffViewState &&
+    diff.oldPath === currentTabState.fromEntityPath &&
+    diff.newPath === currentTabState.toEntityPath;
   const openChange =
     (diff: EntityDiff): (() => void) =>
     (): void =>

package/src/components/editor/side-bar/WorkspaceSyncConflictResolver.tsx

@@ -41,7 +41,7 @@ import {
   EntityChangeConflictSideBarItem,
 } from '../edit-panel/diff-editor/EntityChangeConflictEditor.js';
 import { EntityChangeConflictEditorState } from '../../../stores/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.js';
-import type { EntityDiffEditorState } from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffEditorState.js';
+import type { EntityDiffViewerState } from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffEditorState.js';
 import {
   EntityDiffSideBarItem,
   EntityDiffView,
@@ -70,18 +70,18 @@ export const WorkspaceSyncConflictResolver = observer(() => {
     currentDiffEditorState instanceof EntityChangeConflictEditorState &&
     conflict.entityPath === currentDiffEditorState.entityPath;
   const closeTabOnMiddleClick =
-    (conflictState: EntityDiffEditorState): React.MouseEventHandler =>
+    (conflictState: EntityDiffViewerState): React.MouseEventHandler =>
     (event): void => {
       if (event.nativeEvent.button === 1) {
         updateConflictState.closeConflict(conflictState);
       }
     };
   const closeTab =
-    (conflictState: EntityDiffEditorState): React.MouseEventHandler =>
+    (conflictState: EntityDiffViewerState): React.MouseEventHandler =>
     (event): void =>
       updateConflictState.closeConflict(conflictState);
   const openTab =
-    (conflictState: EntityDiffEditorState): (() => void) =>
+    (conflictState: EntityDiffViewerState): (() => void) =>
     (): void =>
       updateConflictState.openState(conflictState);
   const isSelectedDiff = (diff: EntityDiff): boolean =>
@@ -215,9 +215,9 @@ export const WorkspaceSyncConflictResolver = observer(() => {
                             className="workspace-sync-conflict-resolver__header__tab__label"
                             tabIndex={-1}
                             onClick={openTab(mergedState)}
-                            title={mergedState.headerName}
+                            title={mergedState.label}
                           >
-                            {mergedState.headerName}
+                            {mergedState.label}
                           </button>
                           <button
                             className="workspace-sync-conflict-resolver__header__tab__close-btn"

package/src/components/editor/side-bar/WorkspaceUpdateConflictResolver.tsx

@@ -42,7 +42,7 @@ export const WorkspaceUpdateConflictResolver = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
   const sdlcState = editorStore.sdlcState;
-  const currentEditorState = editorStore.currentEditorState;
+  const currentTabState = editorStore.tabManagerState.currentTab;
   const conflictResolutionState = editorStore.conflictResolutionState;
   // Actions
   const isRunningTask =
@@ -66,8 +66,8 @@ export const WorkspaceUpdateConflictResolver = observer(() => {
   // Conflicts
   const conflicts = conflictResolutionState.conflicts;
   const isSelectedConflict = (conflict: EntityChangeConflict): boolean =>
-    currentEditorState instanceof EntityChangeConflictEditorState &&
-    conflict.entityPath === currentEditorState.entityPath;
+    currentTabState instanceof EntityChangeConflictEditorState &&
+    conflict.entityPath === currentTabState.entityPath;
   const openConflict =
     (conflict: EntityChangeConflict): (() => void) =>
     (): void =>
@@ -79,9 +79,9 @@ export const WorkspaceUpdateConflictResolver = observer(() => {
     (): void =>
       conflictResolutionState.openConflictResolutionChange(diff);
   const isSelectedDiff = (diff: EntityDiff): boolean =>
-    currentEditorState instanceof EntityDiffViewState &&
-    diff.oldPath === currentEditorState.fromEntityPath &&
-    diff.newPath === currentEditorState.toEntityPath;
+    currentTabState instanceof EntityDiffViewState &&
+    diff.oldPath === currentTabState.fromEntityPath &&
+    diff.newPath === currentTabState.toEntityPath;
 
   return (
     <div className="panel conflict-resolution">

package/src/components/editor/side-bar/WorkspaceUpdater.tsx

@@ -47,7 +47,7 @@ export const WorkspaceUpdater = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useLegendStudioApplicationStore();
   const sdlcState = editorStore.sdlcState;
-  const currentEditorState = editorStore.currentEditorState;
+  const currentTabState = editorStore.tabManagerState.currentTab;
   const workspaceUpdaterState = editorStore.workspaceUpdaterState;
   // Actions
   const updateWorkspace = (): void => {
@@ -68,8 +68,8 @@ export const WorkspaceUpdater = observer(() => {
   const conflicts =
     editorStore.changeDetectionState.potentialWorkspaceUpdateConflicts;
   const isSelectedConflict = (conflict: EntityChangeConflict): boolean =>
-    currentEditorState instanceof EntityChangeConflictEditorState &&
-    conflict.entityPath === currentEditorState.entityPath;
+    currentTabState instanceof EntityChangeConflictEditorState &&
+    conflict.entityPath === currentTabState.entityPath;
   const openPotentialConflict =
     (conflict: EntityChangeConflict): (() => void) =>
     (): void =>
@@ -84,9 +84,9 @@ export const WorkspaceUpdater = observer(() => {
         .includes(change.entityPath),
   );
   const isSelectedDiff = (diff: EntityDiff): boolean =>
-    currentEditorState instanceof EntityDiffViewState &&
-    diff.oldPath === currentEditorState.fromEntityPath &&
-    diff.newPath === currentEditorState.toEntityPath;
+    currentTabState instanceof EntityDiffViewState &&
+    diff.oldPath === currentTabState.fromEntityPath &&
+    diff.newPath === currentTabState.toEntityPath;
   const openChange =
     (diff: EntityDiff): (() => void) =>
     (): void =>

package/src/components/workspace-review/WorkspaceReviewPanel.tsx

@@ -39,10 +39,9 @@ const WorkspaceReviewPanelHeaderTabContextMenu = observer(
   >(function ReviewPanelHeaderTabContextMenu(props, ref) {
     const { editorState } = props;
     const editorStore = useEditorStore();
-    const close = (): void => editorStore.closeState(editorState);
-    const closeOthers = (): void =>
-      editorStore.closeAllOtherStates(editorState);
-    const closeAll = (): void => editorStore.closeAllStates();
+    const close = (): void => editorStore.tabManagerState.closeTab(editorState);
+    const closeOthers = (): void => editorStore.tabManagerState.closeAllTabs();
+    const closeAll = (): void => editorStore.tabManagerState.closeAllTabs();
 
     return (
       <div
@@ -57,7 +56,7 @@ const WorkspaceReviewPanelHeaderTabContextMenu = observer(
         </button>
         <button
           className="workspace-review-panel__header__tab__context-menu__item"
-          disabled={editorStore.openedEditorStates.length < 2}
+          disabled={editorStore.tabManagerState.tabs.length < 2}
           onClick={closeOthers}
         >
           Close Others
@@ -75,48 +74,45 @@ const WorkspaceReviewPanelHeaderTabContextMenu = observer(
 
 export const WorkspaceReviewPanel = observer(() => {
   const editorStore = useEditorStore();
-  const currentEditorState =
-    editorStore.currentEditorState instanceof EntityDiffViewState
-      ? editorStore.currentEditorState
+  const currentTabState =
+    editorStore.tabManagerState.currentTab instanceof EntityDiffViewState
+      ? editorStore.tabManagerState.currentTab
       : undefined;
-  const openedEditorStates = editorStore.openedEditorStates.filter(
+  const openedTabStates = editorStore.tabManagerState.tabs.filter(
     filterByType(EntityDiffViewState),
   );
   const closeTab =
     (diffState: EditorState): React.MouseEventHandler =>
     (event): void =>
-      editorStore.closeState(diffState);
+      editorStore.tabManagerState.closeTab(diffState);
   const closeTabOnMiddleClick =
     (editorState: EditorState): React.MouseEventHandler =>
     (event): void => {
       if (event.nativeEvent.button === 1) {
-        editorStore.closeState(editorState);
+        editorStore.tabManagerState.closeTab(editorState);
       }
     };
   const switchTab =
     (editorState: EditorState): (() => void) =>
     (): void =>
-      editorStore.openState(editorState);
+      editorStore.tabManagerState.openTab(editorState);
   const switchViewMode =
     (mode: DIFF_VIEW_MODE): (() => void) =>
     (): void =>
-      currentEditorState?.setDiffMode(mode);
+      currentTabState?.setDiffMode(mode);
 
-  if (!currentEditorState) {
+  if (!currentTabState) {
     return <WorkspaceReviewPanelSplashScreen />;
   }
   return (
     <div className="panel workspace-review-panel">
-      <ContextMenu
-        className="panel__header workspace-review-panel__header"
-        disabled={true}
-      >
+      <div className="panel__header workspace-review-panel__header">
         <div className="workspace-review-panel__header__tabs">
-          {openedEditorStates.map((editorState) => (
+          {openedTabStates.map((editorState) => (
             <div
               className={clsx('workspace-review-panel__header__tab', {
                 'workspace-review-panel__header__tab--active':
-                  editorState === currentEditorState,
+                  editorState === currentTabState,
               })}
               key={editorState.uuid}
               onMouseUp={closeTabOnMiddleClick(editorState)}
@@ -134,7 +130,7 @@ export const WorkspaceReviewPanel = observer(() => {
                   tabIndex={-1}
                   onClick={switchTab(editorState)}
                 >
-                  {editorState.headerName}
+                  {editorState.label}
                 </button>
                 <button
                   className="workspace-review-panel__header__tab__close-btn"
@@ -173,13 +169,13 @@ export const WorkspaceReviewPanel = observer(() => {
             }}
           >
             <div className="workspace-review-panel__element-view__type__label">
-              {currentEditorState.diffMode}
+              {currentTabState.diffMode}
             </div>
           </DropdownMenu>
         </div>
-      </ContextMenu>
+      </div>
       <div className="panel__content workspace-review-panel__content">
-        <EntityDiffView entityDiffViewState={currentEditorState} />
+        <EntityDiffView entityDiffViewState={currentTabState} />
       </div>
     </div>
   );

package/src/components/workspace-review/WorkspaceReviewSideBar.tsx

@@ -100,11 +100,11 @@ export const WorkspaceReviewSideBar = observer(() => {
   );
   // Changes
   const changes = editorStore.changeDetectionState.aggregatedWorkspaceChanges;
-  const currentEditorState = editorStore.currentEditorState;
+  const currentTabState = editorStore.tabManagerState.currentTab;
   const isSelectedDiff = (diff: EntityDiff): boolean =>
-    currentEditorState instanceof EntityDiffViewState &&
-    diff.oldPath === currentEditorState.fromEntityPath &&
-    diff.newPath === currentEditorState.toEntityPath;
+    currentTabState instanceof EntityDiffViewState &&
+    diff.oldPath === currentTabState.fromEntityPath &&
+    diff.newPath === currentTabState.toEntityPath;
   const openChange =
     (diff: EntityDiff): (() => void) =>
     (): void =>

package/src/index.ts

@@ -25,6 +25,7 @@ export { queryClass } from './components/editor/edit-panel/uml-editor/ClassQuery
 
 // stores
 export * from './stores/LegendStudioApplicationPlugin.js';
+export * from './stores/EditorTabManagerState.js';
 export * from './stores/EditorStore.js';
 export * from './stores/EditorConfig.js';
 export * from './stores/editor-state/ModelImporterState.js';