@finos/legend-application-studio 20.1.2 → 20.2.0

package/src/components/editor/edit-panel/RuntimeEditor.tsx

@@ -447,11 +447,7 @@ const RuntimeExplorer = observer(
             <div className="panel__header__title__content">{runtimeName}</div>
           </div>
         </div>
-        <ContextMenu
-          className="panel__content"
-          disabled={true}
-          menuProps={{ elevation: 7 }}
-        >
+        <div className="panel__content">
           <PanelDropZone
             dropTargetConnector={dropRuntimeSubElementRef}
             isDragOver={isRuntimeSubElementDragOver}
@@ -472,7 +468,7 @@ const RuntimeExplorer = observer(
               />
             </div>
           </PanelDropZone>
-        </ContextMenu>
+        </div>
       </div>
     );
   },
@@ -584,7 +580,7 @@ const IdentifiedConnectionEditor = observer(
     };
     const visitConnection = (): void => {
       if (identifiedConnection.connection instanceof ConnectionPointer) {
-        editorStore.openElement(
+        editorStore.tabManagerState.openElementEditor(
           identifiedConnection.connection.packageableConnection.value,
         );
       }
@@ -847,7 +843,8 @@ const RuntimeMappingEditor = observer(
       runtimeEditorState.changeMapping(mappingRef, val.value);
     const deleteMapping = (): void =>
       runtimeEditorState.deleteMapping(mappingRef);
-    const visitMapping = (): void => editorStore.openElement(mappingRef.value);
+    const visitMapping = (): void =>
+      editorStore.tabManagerState.openElementEditor(mappingRef.value);
 
     return (
       <div className="panel__content__form__section__list__item--customized runtime-mapping-editor">
@@ -1046,7 +1043,7 @@ export const RuntimeEditor = observer(
 
 export const PackageableRuntimeEditor = observer(() => {
   const editorStore = useEditorStore();
-  const editorState = editorStore.getCurrentEditorState(
+  const editorState = editorStore.tabManagerState.getCurrentEditorState(
     PackageableRuntimeEditorState,
   );
   const isReadOnly = editorState.isReadOnly;

package/src/components/editor/edit-panel/UnsupportedElementEditor.tsx

@@ -51,9 +51,10 @@ export const UnsupportedEditorPanel = observer(
 // NOTE: this editor can be used for any element supported via text mode but no editor has been built
 export const UnsupportedElementEditor = observer(() => {
   const editorStore = useEditorStore();
-  const unsupportedElementEditorState = editorStore.getCurrentEditorState(
-    UnsupportedElementEditorState,
-  );
+  const unsupportedElementEditorState =
+    editorStore.tabManagerState.getCurrentEditorState(
+      UnsupportedElementEditorState,
+    );
   const element = unsupportedElementEditorState.element;
   const isReadOnly = unsupportedElementEditorState.isReadOnly;
 

package/src/components/editor/edit-panel/connection-editor/ConnectionEditor.tsx

@@ -183,7 +183,7 @@ export const ConnectionEditor = observer(
 
 export const PackageableConnectionEditor = observer(() => {
   const editorStore = useEditorStore();
-  const editorState = editorStore.getCurrentEditorState(
+  const editorState = editorStore.tabManagerState.getCurrentEditorState(
     PackageableConnectionEditorState,
   );
   const isReadOnly = editorState.isReadOnly;

package/src/components/editor/edit-panel/data-editor/DataElementEditor.tsx

@@ -68,7 +68,7 @@ import {
   externalFormatData_setContentType,
   externalFormatData_setData,
 } from '../../../../stores/shared/modifier/DSL_Data_GraphModifierHelper.js';
-import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
+import { getEditorLanguageForFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
 import type { ExternalFormatDataState } from '../../../../stores/editor-state/element-editor-state/data/EmbeddedDataState.js';
 import { renderEmbeddedDataEditor } from './EmbeddedDataEditor.js';
 import {
@@ -102,7 +102,7 @@ export const ExternalFormatDataEditor = observer(
         externalFormatDataState.embeddedData,
         val,
       );
-    const language = getEditorLanguageFromFormat(
+    const language = getEditorLanguageForFormat(
       editorStore.graphState.graphGenerationState.externalFormatState.getFormatTypeForContentType(
         externalFormatDataState.embeddedData.contentType,
       ),
@@ -185,7 +185,7 @@ export const EmbeddedDataEditor = observer(
 export const DataElementEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
-  const editorState = editorStore.getCurrentEditorState(
+  const editorState = editorStore.tabManagerState.getCurrentEditorState(
     PackageableDataEditorState,
   );
   const dataElement = editorState.data;

package/src/components/editor/edit-panel/data-editor/EmbeddedDataEditor.tsx

@@ -37,7 +37,7 @@ import {
   externalFormatData_setData,
 } from '../../../../stores/shared/modifier/DSL_Data_GraphModifierHelper.js';
 import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
-import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
+import { getEditorLanguageForFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
 import {
   type EmbeddedDataState,
   DataElementReferenceState,
@@ -71,7 +71,7 @@ export const ExternalFormatDataEditor = observer(
         externalFormatDataState.embeddedData,
         val,
       );
-    const language = getEditorLanguageFromFormat(
+    const language = getEditorLanguageForFormat(
       editorStore.graphState.graphGenerationState.externalFormatState.getFormatTypeForContentType(
         externalFormatDataState.embeddedData.contentType,
       ),
@@ -167,7 +167,8 @@ export const DataElementReferenceDataEditor = observer(
         dataElementReferenceState.setDataElement(val.value);
       }
     };
-    const visitData = (): void => editorStore.openElement(dataElement);
+    const visitData = (): void =>
+      editorStore.tabManagerState.openElementEditor(dataElement);
     return (
       <div className="panel data-element-reference-editor">
         <div className="data-element-reference-editor__header">

package/src/components/editor/edit-panel/diff-editor/EntityDiffView.tsx

@@ -98,7 +98,7 @@ export const EntityDiffView = observer(
     } = diffEditorState;
     const goToElement = (): void => {
       if (diffEditorState.element) {
-        editorStore.openElement(diffEditorState.element);
+        editorStore.tabManagerState.openElementEditor(diffEditorState.element);
       }
     };
 

package/src/components/editor/edit-panel/element-generation-editor/FileGenerationEditor.tsx

@@ -21,7 +21,7 @@ import { getElementIcon } from '../../../shared/ElementIconUtils.js';
 import { useDrop } from 'react-dnd';
 import {
   getTextContent,
-  getEditorLanguageFromFormat,
+  getEditorLanguageForFormat,
 } from '../../../../stores/editor-state/FileGenerationViewerState.js';
 import { FileGenerationEditorState } from '../../../../stores/editor-state/element-editor-state/FileGenerationEditorState.js';
 import {
@@ -323,7 +323,7 @@ export const GenerationResultViewer = observer(
                 <TextInputEditor
                   inputValue={getTextContent(fileNode.content, fileNode.format)}
                   isReadOnly={true}
-                  language={getEditorLanguageFromFormat(fileNode.format)}
+                  language={getEditorLanguageForFormat(fileNode.format)}
                 />
               )}
               {!(fileNode instanceof GenerationFile) && (
@@ -1438,9 +1438,10 @@ export const FileGenerationConfigurationEditor = observer(
 
 export const FileGenerationEditor = observer(() => {
   const editorStore = useEditorStore();
-  const fileGenerationEditorState = editorStore.getCurrentEditorState(
-    FileGenerationEditorState,
-  );
+  const fileGenerationEditorState =
+    editorStore.tabManagerState.getCurrentEditorState(
+      FileGenerationEditorState,
+    );
   const fileGeneration = fileGenerationEditorState.fileGeneration;
   const isReadOnly = fileGenerationEditorState.isReadOnly;
 

package/src/components/editor/edit-panel/external-format-editor/DSL_ExternalFormat_BindingElementEditor.tsx

@@ -289,7 +289,8 @@ const BindingGeneralEditor = observer(
 
 export const BindingEditor = observer(() => {
   const editorStore = useEditorStore();
-  const editorState = editorStore.getCurrentEditorState(BindingEditorState);
+  const editorState =
+    editorStore.tabManagerState.getCurrentEditorState(BindingEditorState);
   const binding = editorState.binding;
   const modelUnit = binding.modelUnit;
   const isReadOnly = editorState.isReadOnly;

package/src/components/editor/edit-panel/external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.tsx

@@ -45,7 +45,7 @@ import {
   SCHEMA_SET_TAB_TYPE,
 } from '../../../../stores/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
 import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
-import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
+import { getEditorLanguageForFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
 import { guaranteeNonNullable, prettyCONSTName } from '@finos/legend-shared';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -207,7 +207,7 @@ export const SchemaSetGeneralEditor = observer(
       schemaSetEditorState.schemaSetModelGenerationState.description;
     // TEMPROARY engine api should return `fileformat`.
     const language = description
-      ? getEditorLanguageFromFormat(description.name)
+      ? getEditorLanguageForFormat(description.name)
       : EDITOR_LANGUAGE.TEXT;
     const changeState =
       (schema: Schema): (() => void) =>
@@ -371,7 +371,7 @@ export const SchemaSetGeneralEditor = observer(
 export const SchemaSetEditor = observer(() => {
   const editorStore = useEditorStore();
   const schemaSetEditorState =
-    editorStore.getCurrentEditorState(SchemaSetEditorState);
+    editorStore.tabManagerState.getCurrentEditorState(SchemaSetEditorState);
   const isReadOnly = schemaSetEditorState.isReadOnly;
   const schemaSet = schemaSetEditorState.schemaSet;
   const currentTab = schemaSetEditorState.selectedTab;

package/src/components/editor/edit-panel/mapping-editor/ClassMappingEditor.tsx

@@ -92,7 +92,7 @@ export const ClassMappingEditor = observer(
     const { setImplementation, isReadOnly } = props;
     const editorStore = useEditorStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const _class = setImplementation.class;
     // ID
     const isDefaultId =

package/src/components/editor/edit-panel/mapping-editor/EnumerationMappingEditor.tsx

@@ -198,7 +198,7 @@ export const SourceValueInput = observer(
     const handleDrop = useCallback(
       (item: TransformDropTarget): void => {
         if (!isReadOnly) {
-          if (item instanceof TypeDragSource) {
+          if (item instanceof TypeDragSource && item.data) {
             updateSourceValue(value + item.data.label);
           }
         }
@@ -344,7 +344,7 @@ export const EnumerationMappingEditor = observer(
     const { enumerationMapping, isReadOnly } = props;
     const editorStore = useEditorStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const enumeration = enumerationMapping.enumeration;
     // ID
     const showId =

package/src/components/editor/edit-panel/mapping-editor/FlatDataPropertyMappingEditor.tsx

@@ -113,7 +113,7 @@ const EnumerationPropertyMappingEditor = observer(
       props;
     const editorStore = useEditorStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const propertyMapping = guaranteeType(
       propertyMappingState.propertyMapping,
       FlatDataPropertyMapping,

package/src/components/editor/edit-panel/mapping-editor/InstanceSetImplementationEditor.tsx

@@ -99,7 +99,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const instanceSetImplementationState =
       mappingEditorState.currentTabState instanceof MappingElementState
         ? mappingEditorState.currentTabState
@@ -437,7 +437,7 @@ export const InstanceSetImplementationEditor = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const [sortByRequired, setSortByRequired] = useState(true);
     const instanceSetImplementationState = guaranteeNonNullable(
       mappingEditorState.currentTabState instanceof

package/src/components/editor/edit-panel/mapping-editor/MappingEditor.tsx

@@ -38,7 +38,6 @@ import {
 import { ClassMappingEditor } from './ClassMappingEditor.js';
 import { EnumerationMappingEditor } from './EnumerationMappingEditor.js';
 import {
-  type MappingEditorTabState,
   type MappingElement,
   MappingEditorState,
   getMappingElementTarget,
@@ -68,6 +67,7 @@ import {
   useApplicationStore,
 } from '@finos/legend-application';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import type { MappingEditorTabState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingTabManagerState.js';
 
 export const MappingEditorSplashScreen: React.FC = () => {
   const logoWidth = 280;
@@ -103,7 +103,7 @@ const MappingEditorHeaderTabContextMenu = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const close = applicationStore.guardUnhandledError(() =>
       flowResult(mappingEditorState.closeTab(tabState)),
     );
@@ -156,7 +156,7 @@ export const MappingEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
   const mappingEditorState =
-    editorStore.getCurrentEditorState(MappingEditorState);
+    editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
   const isReadOnly = mappingEditorState.isReadOnly;
   const currentTabState = mappingEditorState.currentTabState;
   const renderActiveMappingElementTab = (): React.ReactNode => {

package/src/components/editor/edit-panel/mapping-editor/MappingExplorer.tsx

@@ -82,7 +82,7 @@ export const MappingExplorerContextMenu = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const currentMappingElement =
       mappingEditorState.currentTabState instanceof MappingElementState
         ? mappingEditorState.currentTabState.mappingElement
@@ -232,7 +232,7 @@ export const MappingElementExplorer = observer(
     const { mappingElement, openNewMapingModal, isReadOnly } = props;
     const editorStore = useEditorStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const currentMappingElement =
       mappingEditorState.currentTabState instanceof MappingElementState
         ? mappingEditorState.currentTabState.mappingElement
@@ -321,7 +321,7 @@ const MappingElementTreeNodeContainer = observer(
     const mappingElement = node.mappingElement;
     const editorStore = useEditorStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const currentMappingElement =
       mappingEditorState.currentTabState instanceof MappingElementState
         ? mappingEditorState.currentTabState.mappingElement
@@ -429,7 +429,7 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
   const { isReadOnly } = props;
   const editorStore = useEditorStore();
   const mappingEditorState =
-    editorStore.getCurrentEditorState(MappingEditorState);
+    editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
   const mapping = mappingEditorState.mapping;
   const mappingElements = getAllMappingElements(mapping).sort((a, b) =>
     getMappingIdentitySortString(a, getMappingElementTarget(a)).localeCompare(
@@ -483,7 +483,7 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
     : undefined;
   const visitGenerationParentElement = (): void => {
     if (generationParentElement) {
-      editorStore.openElement(generationParentElement);
+      editorStore.tabManagerState.openElementEditor(generationParentElement);
     }
   };
   // explorer tree data

package/src/components/editor/edit-panel/mapping-editor/MappingTestsExplorer.tsx

@@ -22,7 +22,6 @@ import {
   MAPPING_TEST_EDITOR_TAB_TYPE,
   TEST_RESULT,
 } from '../../../../stores/editor-state/element-editor-state/mapping/MappingTestState.js';
-import { MappingEditorState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import {
   clsx,
   ContextMenu,
@@ -49,6 +48,7 @@ import { Randomizer } from '@finos/legend-shared';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';
 import { SetImplementation } from '@finos/legend-graph';
+import { MappingEditorState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
 
 const addTestPromps = [
   `Let's add some test!`,
@@ -221,7 +221,7 @@ export const MappingTestExplorer = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const openTest = applicationStore.guardUnhandledError(() =>
       flowResult(mappingEditorState.openTest(testState.test)),
     );
@@ -312,7 +312,7 @@ export const MappingTestsExplorer = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const runAllTests = applicationStore.guardUnhandledError(() =>
       flowResult(mappingEditorState.runTests()),
     );

package/src/components/editor/edit-panel/mapping-editor/NewMappingElementModal.tsx

@@ -58,7 +58,7 @@ interface ClassMappingSubTypeOption {
 export const NewMappingElementModal = observer(() => {
   const editorStore = useEditorStore();
   const mappingEditorState =
-    editorStore.getCurrentEditorState(MappingEditorState);
+    editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
   const spec = mappingEditorState.newMappingElementSpec;
 
   // ID

package/src/components/editor/edit-panel/mapping-editor/OperationSetImplementationEditor.tsx

@@ -72,7 +72,7 @@ export const OperationSetImplementationEditor = observer(
     const { setImplementation, isReadOnly } = props;
     const editorStore = useEditorStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const mapping = mappingEditorState.mapping;
     // Parameters
     const setImplementationOptions = getClassMappingsByClass(
@@ -169,8 +169,8 @@ export const OperationSetImplementationEditor = observer(
         const parent = param.setImplementation.value._PARENT;
         // TODO: think more about this flow. Right now we open the mapping element in the parent mapping
         if (parent !== mappingEditorState.element) {
-          editorStore.openElement(parent);
-          editorStore
+          editorStore.tabManagerState.openElementEditor(parent);
+          editorStore.tabManagerState
             .getCurrentEditorState(MappingEditorState)
             .openMappingElement(param.setImplementation.value, false);
         } else {

package/src/components/editor/edit-panel/mapping-editor/PropertyMappingsEditor.tsx

@@ -150,7 +150,7 @@ export const PropertyMappingEditor = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const propertyRawType = property.genericType.value.rawType;
     const propertyBasicType = getClassPropertyType(propertyRawType);
     const isEmbedded = instanceSetImplementation._isEmbedded;
@@ -193,8 +193,8 @@ export const PropertyMappingEditor = observer(
             const parent = rootMappingElement._PARENT;
             if (parent !== mappingEditorState.element) {
               // TODO: think more about this flow. Right now we open the mapping element in the parent mapping
-              editorStore.openElement(parent);
-              editorStore
+              editorStore.tabManagerState.openElementEditor(parent);
+              editorStore.tabManagerState
                 .getCurrentEditorState(MappingEditorState)
                 .openMappingElement(rootMappingElement, false);
             }

package/src/components/editor/edit-panel/mapping-editor/PurePropertyMappingEditor.tsx

@@ -67,7 +67,9 @@ const SimplePropertyMappingEditor = observer(
     const propertyMapping = propertyMappingState.propertyMapping;
     const expectedType =
       propertyMapping.property.value.genericType.value.rawType;
-    const canDrop = dragItem && dragItem.data.type === expectedType;
+
+    const canDrop = dragItem?.data?.type === expectedType;
+
     const onExpectedTypeLabelSelect = (): void =>
       propertyMappingState.instanceSetImplementationState.setSelectedType(
         expectedType,
@@ -117,7 +119,7 @@ const EnumerationPropertyMappingEditor = observer(
     } = props;
     const editorStore = useEditorStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const propertyMapping = propertyMappingState.propertyMapping;
     const enumeration = getRawGenericType(
       propertyMapping.property.value.genericType.value,
@@ -183,9 +185,9 @@ const EnumerationPropertyMappingEditor = observer(
     // NOTE: when we drag enum, we should highlight if the enumeration where that enum is part of matches
     const canDrop =
       dragItem &&
-      ((dragItem.data.type && dragItem.data.type === expectedType) ||
+      ((dragItem.data?.type && dragItem.data.type === expectedType) ||
         (dragItemType === CORE_DND_TYPE.TYPE_TREE_ENUM &&
-          dragItem.data.parent === expectedType));
+          dragItem.data?.parent === expectedType));
 
     return (
       <div className="property-mapping-editor__entry__container">
@@ -239,7 +241,7 @@ const ClassPropertyMappingEditor = observer(
     const { propertyMappingState, drop, dragItem, transformProps } = props;
     const editorStore = useEditorStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const propertyMapping = propertyMappingState.propertyMapping;
     const isDefaultId =
       propertyMapping.targetSetImplementation?.value.id.isDefault;
@@ -271,7 +273,8 @@ const ClassPropertyMappingEditor = observer(
       }
     };
     // Drag and Drop
-    const canDrop = dragItem?.data.type && dragItem.data.type === expectedType;
+
+    const canDrop = dragItem?.data?.type && dragItem.data.type === expectedType;
 
     return (
       <div className="property-mapping-editor__entry__container">
@@ -333,10 +336,12 @@ export const PurePropertyMappingEditor = observer(
             // if the dragged node is enum, when dropped, we want to have it as a constant
             let toAppend = '';
             if (dropType === CORE_DND_TYPE.TYPE_TREE_ENUM) {
-              toAppend = `${dropItem.data.parent.path}.${dropItem.data.label}`;
+              toAppend = `${dropItem.data?.parent.path}.${dropItem.data?.label}`;
             } else {
-              toAppend = dropItem.data.id;
-              if (dropItem.data.property instanceof DerivedProperty) {
+              if (dropItem.data?.id) {
+                toAppend = dropItem.data.id;
+              }
+              if (dropItem.data?.property instanceof DerivedProperty) {
                 toAppend += '()';
               }
             }

package/src/components/editor/edit-panel/mapping-editor/relational/RelationalPropertyMappingEditor.tsx

@@ -91,7 +91,7 @@ const EnumerationPropertyMappingEditor = observer(
     const { propertyMappingState, drop, transformProps, isReadOnly } = props;
     const editorStore = useEditorStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const propertyMapping = guaranteeType(
       propertyMappingState.propertyMapping,
       RelationalPropertyMapping,
@@ -195,7 +195,7 @@ const ClassPropertyMappingEditor = observer(
     const { propertyMappingState, drop, transformProps } = props;
     const editorStore = useEditorStore();
     const mappingEditorState =
-      editorStore.getCurrentEditorState(MappingEditorState);
+      editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
     const propertyMapping = propertyMappingState.propertyMapping;
     const isDefaultId =
       propertyMapping.targetSetImplementation?.value.id.isDefault;

package/src/components/editor/edit-panel/project-configuration-editor/ProjectConfigurationEditor.tsx

@@ -661,7 +661,7 @@ const ProjectDependencyActions = observer(
 export const ProjectConfigurationEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
-  const configState = editorStore.getCurrentEditorState(
+  const configState = editorStore.tabManagerState.getCurrentEditorState(
     ProjectConfigurationEditorState,
   );
   const sdlcState = editorStore.sdlcState;

package/src/components/editor/edit-panel/service-editor/ServiceEditor.tsx

@@ -57,7 +57,8 @@ import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../st
 
 const ServiceGeneralEditor = observer(() => {
   const editorStore = useEditorStore();
-  const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
+  const serviceState =
+    editorStore.tabManagerState.getCurrentEditorState(ServiceEditorState);
   const service = serviceState.service;
   const isReadOnly = serviceState.isReadOnly;
   // Pattern
@@ -401,7 +402,8 @@ const ServiceGeneralEditor = observer(() => {
 export const ServiceEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
-  const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
+  const serviceState =
+    editorStore.tabManagerState.getCurrentEditorState(ServiceEditorState);
   const service = serviceState.service;
   const isReadOnly = serviceState.isReadOnly;
   // Tab

package/src/components/editor/edit-panel/service-editor/ServiceExecutionEditor.tsx

@@ -64,6 +64,7 @@ import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   type KeyedExecutionParameter,
   type Runtime,
+  type ServiceTest,
   Mapping,
   RuntimePointer,
   PackageableRuntime,
@@ -84,7 +85,8 @@ const PureExecutionContextConfigurationEditor = observer(
     const { executionContextState, pureExecutionState } = props;
     const executionContext = executionContextState.executionContext;
     const editorStore = useEditorStore();
-    const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
+    const serviceState =
+      editorStore.tabManagerState.getCurrentEditorState(ServiceEditorState);
     const isReadOnly = serviceState.isReadOnly;
     // mapping
     // TODO: this is not generic error handling, as there could be other problems
@@ -118,7 +120,8 @@ const PureExecutionContextConfigurationEditor = observer(
         pureExecutionState.autoSelectRuntimeOnMappingChange(val.value);
       }
     };
-    const visitMapping = (): void => editorStore.openElement(mapping);
+    const visitMapping = (): void =>
+      editorStore.tabManagerState.openElementEditor(mapping);
     // runtime
     const runtime = executionContext.runtime;
     const isRuntimePointer = runtime instanceof RuntimePointer;
@@ -199,7 +202,9 @@ const PureExecutionContextConfigurationEditor = observer(
     };
     const visitRuntime = (): void => {
       if (runtime instanceof RuntimePointer) {
-        editorStore.openElement(runtime.packageableRuntime.value);
+        editorStore.tabManagerState.openElementEditor(
+          runtime.packageableRuntime.value,
+        );
       }
     };
     const openRuntimeEditor = (): void =>
@@ -773,6 +778,10 @@ const ServicePureExecutionEditor = observer(
       servicePureExecutionState instanceof MultiServicePureExecutionState;
     const showChangeExecutionModal = (): void => {
       if (servicePureExecutionState instanceof MultiServicePureExecutionState) {
+        servicePureExecutionState.serviceEditorState.service.tests.forEach(
+          (suite) =>
+            suite.tests.forEach((st) => ((st as ServiceTest).keys = [])),
+        );
         servicePureExecutionState.setSingleExecutionKey(
           servicePureExecutionState.execution.executionParameters[0],
         );
@@ -873,7 +882,8 @@ const ServicePureExecutionEditor = observer(
 
 export const ServiceExecutionEditor = observer(() => {
   const editorStore = useEditorStore();
-  const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
+  const serviceState =
+    editorStore.tabManagerState.getCurrentEditorState(ServiceEditorState);
   const executionState = serviceState.executionState;
   const isReadOnly = serviceState.isReadOnly;
   if (executionState instanceof ServicePureExecutionState) {

package/src/components/editor/edit-panel/service-editor/ServiceRegistrationEditor.tsx

@@ -34,7 +34,8 @@ import { useApplicationStore } from '@finos/legend-application';
 export const ServiceRegistrationEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
-  const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
+  const serviceState =
+    editorStore.tabManagerState.getCurrentEditorState(ServiceEditorState);
   const registrationState = serviceState.registrationState;
 
   // env & execution server