@finos/legend-application-studio 22.6.0 → 23.0.1

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

@@ -19,12 +19,12 @@ import { observer } from 'mobx-react-lite';
 import {
   UMLEditorState,
   UML_EDITOR_TAB,
-} from '../../../../stores/editor-state/element-editor-state/UMLEditorState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/UMLEditorState.js';
 import {
   CORE_DND_TYPE,
   type UMLEditorElementDropTarget,
   type ElementDragSource,
-} from '../../../../stores/shared/DnDUtils.js';
+} from '../../../../stores/editor/shared/DnDUtils.js';
 import { useDrop } from 'react-dnd';
 import {
   clsx,
@@ -47,7 +47,7 @@ import {
 } from '@finos/legend-art';
 import { getElementIcon } from '../../../shared/ElementIconUtils.js';
 import { prettyCONSTName, guaranteeType } from '@finos/legend-shared';
-import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import {
   StereotypeDragPreviewLayer,
   StereotypeSelector,
@@ -84,18 +84,18 @@ import {
   annotatedElement_addStereotype,
   annotatedElement_deleteTaggedValue,
   association_changePropertyType,
-} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/DomainGraphModifierHelper.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
-} from '../../../../stores/shared/ModelClassifierUtils.js';
+} from '../../../../stores/editor/shared/ModelClassifierUtils.js';
 import {
   buildElementOption,
   useApplicationNavigationContext,
   type PackageableElementOption,
   LEGEND_APPLICATION_DOCUMENTATION_KEY,
 } from '@finos/legend-application';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
 
 const AssociationPropertyBasicEditor = observer(
   (props: {
@@ -205,7 +205,7 @@ const AssociationPropertyBasicEditor = observer(
     // Other
     const openElement = (): void => {
       if (!(propertyType instanceof PrimitiveType)) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           propertyType instanceof Unit ? propertyType.measure : propertyType,
         );
       }

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

@@ -21,7 +21,7 @@ import {
   CORE_DND_TYPE,
   type ElementDragSource,
   type UMLEditorElementDropTarget,
-} from '../../../../stores/shared/DnDUtils.js';
+} from '../../../../stores/editor/shared/DnDUtils.js';
 import {
   clsx,
   CustomSelectorInput,
@@ -47,7 +47,7 @@ import {
   PanelDropZone,
   Panel,
 } from '@finos/legend-art';
-import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import { PropertyEditor } from './PropertyEditor.js';
 import {
   StereotypeSelector,
@@ -57,8 +57,8 @@ import {
   TaggedValueEditor,
   TaggedValueDragPreviewLayer,
 } from './TaggedValueEditor.js';
-import { UML_EDITOR_TAB } from '../../../../stores/editor-state/element-editor-state/UMLEditorState.js';
-import { ClassEditorState } from '../../../../stores/editor-state/element-editor-state/ClassEditorState.js';
+import { UML_EDITOR_TAB } from '../../../../stores/editor/editor-state/element-editor-state/UMLEditorState.js';
+import { ClassEditorState } from '../../../../stores/editor/editor-state/element-editor-state/ClassEditorState.js';
 import { flowResult } from 'mobx';
 import { type DropTargetMonitor, useDrop, useDrag } from 'react-dnd';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -126,12 +126,12 @@ import {
   class_swapConstraints,
   class_swapSuperTypes,
   setGenericTypeReferenceValue,
-} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/DomainGraphModifierHelper.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
-} from '../../../../stores/shared/ModelClassifierUtils.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+} from '../../../../stores/editor/shared/ModelClassifierUtils.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
 import { LambdaEditor } from '@finos/legend-query-builder';
 
 type ClassPropertyDragSource = {
@@ -272,7 +272,7 @@ const PropertyBasicEditor = observer(
     // Other
     const openElement = (): void => {
       if (!(propertyType instanceof PrimitiveType)) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           propertyType instanceof Unit ? propertyType.measure : propertyType,
         );
       }
@@ -280,7 +280,7 @@ const PropertyBasicEditor = observer(
     // 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.tabManagerState.openElementEditor(property._OWNER);
+      editorStore.graphEditorMode.openElement(property._OWNER);
 
     return (
       <div ref={ref} className="property-basic-editor__container">
@@ -629,13 +629,13 @@ const DerivedPropertyBasicEditor = observer(
       );
     const openElement = (): void => {
       if (!(propertyType instanceof PrimitiveType)) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           propertyType instanceof Unit ? propertyType.measure : propertyType,
         );
       }
     };
     const visitOwner = (): void =>
-      editorStore.tabManagerState.openElementEditor(derivedProperty._OWNER);
+      editorStore.graphEditorMode.openElement(derivedProperty._OWNER);
     const remove = applicationStore.guardUnhandledError(async () => {
       await flowResult(dpState.convertLambdaObjectToGrammarString(false));
       deleteDerivedProperty();
@@ -919,7 +919,7 @@ const ConstraintEditor = observer(
       deleteConstraint();
     });
     const visitOwner = (): void =>
-      editorStore.tabManagerState.openElementEditor(constraint._OWNER);
+      editorStore.graphEditorMode.openElement(constraint._OWNER);
 
     return (
       <div ref={ref} className="constraint-editor__container">
@@ -1075,7 +1075,7 @@ const SuperTypeEditor = observer(
     const changeType = (val: PackageableElementOption<Class>): void =>
       setGenericTypeReferenceValue(superType, new GenericType(val.value));
     const visitDerivationSource = (): void =>
-      editorStore.tabManagerState.openElementEditor(rawType);
+      editorStore.graphEditorMode.openElement(rawType);
 
     return (
       <div ref={ref} className="super-type-editor__container">
@@ -1674,7 +1674,7 @@ export const ClassFormEditor = observer(
       : undefined;
     const visitGenerationParentElement = (): void => {
       if (generationParentElement) {
-        editorStore.tabManagerState.openElementEditor(generationParentElement);
+        editorStore.graphEditorMode.openElement(generationParentElement);
       }
     };
 

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

@@ -28,13 +28,12 @@ import { assertErrorThrown, guaranteeNonNullable } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import type { EditorStore } from '../../../../stores/EditorStore.js';
-import type { EmbeddedQueryBuilderState } from '../../../../stores/EmbeddedQueryBuilderState.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import type { EditorStore } from '../../../../stores/editor/EditorStore.js';
+import type { EmbeddedQueryBuilderState } from '../../../../stores/editor/EmbeddedQueryBuilderState.js';
 import {
   service_initNewService,
   service_setExecution,
-} from '../../../../stores/shared/modifier/DSL_Service_GraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/DSL_Service_GraphModifierHelper.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import { NewServiceModal } from '../service-editor/NewServiceModal.js';
 
@@ -68,7 +67,9 @@ const promoteQueryToService = async (
       ),
       editorStore.changeDetectionState.observerContext,
     );
-    await flowResult(editorStore.addElement(service, packagePath, true));
+    await flowResult(
+      editorStore.graphEditorMode.addElement(service, packagePath, true),
+    );
     await flowResult(
       embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(undefined),
     ).catch(applicationStore.alertUnhandledError);
@@ -157,8 +158,6 @@ export const queryClass = async (
           ),
         },
       ],
-      applicationContext:
-        LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EDITOR,
     }),
   );
 };

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

@@ -19,13 +19,13 @@ import { observer } from 'mobx-react-lite';
 import {
   UMLEditorState,
   UML_EDITOR_TAB,
-} from '../../../../stores/editor-state/element-editor-state/UMLEditorState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/UMLEditorState.js';
 import { useDrag, useDrop } from 'react-dnd';
 import {
   CORE_DND_TYPE,
   type ElementDragSource,
   type UMLEditorElementDropTarget,
-} from '../../../../stores/shared/DnDUtils.js';
+} from '../../../../stores/editor/shared/DnDUtils.js';
 import { prettyCONSTName } from '@finos/legend-shared';
 import {
   BlankPanelContent,
@@ -50,7 +50,7 @@ import {
   Panel,
   PanelContent,
 } from '@finos/legend-art';
-import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import {
   StereotypeDragPreviewLayer,
   StereotypeSelector,
@@ -82,9 +82,9 @@ import {
   enum_deleteValue,
   enum_addValue,
   enum_swapValues,
-} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/DomainGraphModifierHelper.js';
 import { useApplicationNavigationContext } from '@finos/legend-application';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
 
 type EnumValueDragSource = {
   enumValue: Enum;
@@ -534,7 +534,7 @@ export const EnumerationEditor = observer(
       : undefined;
     const visitGenerationParentElement = (): void => {
       if (generationParentElement) {
-        editorStore.tabManagerState.openElementEditor(generationParentElement);
+        editorStore.graphEditorMode.openElement(generationParentElement);
       }
     };
 

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

@@ -18,7 +18,7 @@ import { prettyCONSTName } from '@finos/legend-shared';
 import {
   UMLEditorState,
   UML_EDITOR_TAB,
-} from '../../../../stores/editor-state/element-editor-state/UMLEditorState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/UMLEditorState.js';
 import { observer } from 'mobx-react-lite';
 import {
   clsx,
@@ -33,7 +33,7 @@ import {
   Panel,
   PanelContent,
 } from '@finos/legend-art';
-import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   type Profile,
@@ -50,9 +50,9 @@ import {
   tagStereotype_setValue,
   profile_swapTags,
   profile_swapStereotypes,
-} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/DomainGraphModifierHelper.js';
 import { useApplicationNavigationContext } from '@finos/legend-application';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
 import { useRef, useCallback } from 'react';
 import { useDrop, useDrag } from 'react-dnd';
 

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

@@ -21,7 +21,7 @@ import {
   CORE_DND_TYPE,
   type ElementDragSource,
   type UMLEditorElementDropTarget,
-} from '../../../../stores/shared/DnDUtils.js';
+} from '../../../../stores/editor/shared/DnDUtils.js';
 import {
   clsx,
   CustomSelectorInput,
@@ -41,9 +41,9 @@ import {
   TaggedValueDragPreviewLayer,
   TaggedValueEditor,
 } from './TaggedValueEditor.js';
-import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import { isNonNullable, prettyCONSTName } from '@finos/legend-shared';
-import { UML_EDITOR_TAB } from '../../../../stores/editor-state/element-editor-state/UMLEditorState.js';
+import { UML_EDITOR_TAB } from '../../../../stores/editor/editor-state/element-editor-state/UMLEditorState.js';
 import {
   type AbstractProperty,
   type StereotypeReference,
@@ -63,7 +63,7 @@ import {
   annotatedElement_addStereotype,
   annotatedElement_deleteStereotype,
   property_setAggregationKind,
-} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/DomainGraphModifierHelper.js';
 
 type AggregationKindOption = { label: string; value: AggregationKind };
 const buildAggregationKindOption = (

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

@@ -37,7 +37,7 @@ import {
 import {
   annotatedElement_swapStereotypes,
   stereotypeReference_setValue,
-} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/DomainGraphModifierHelper.js';
 import {
   buildElementOption,
   type PackageableElementOption,
@@ -107,7 +107,7 @@ export const StereotypeSelector = observer(
       }
     };
     const visitProfile = (): void =>
-      editorStore.tabManagerState.openElementEditor(selectedProfile.value);
+      editorStore.graphEditorMode.openElement(selectedProfile.value);
     // Stereotype
     const stereotypeOptions = selectedProfile.value.p_stereotypes.map((st) => ({
       label: st.value,

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

@@ -41,7 +41,7 @@ import {
   taggedValue_setValue,
   taggedValue_setTag,
   annotatedElement_swapTaggedValues,
-} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/DomainGraphModifierHelper.js';
 import {
   buildElementOption,
   type PackageableElementOption,
@@ -113,7 +113,7 @@ export const TaggedValueEditor = observer(
       }
     };
     const visitProfile = (): void =>
-      editorStore.tabManagerState.openElementEditor(selectedProfile.value);
+      editorStore.graphEditorMode.openElement(selectedProfile.value);
     // Tag
     const tagOptions = selectedProfile.value.p_tags.map((tag) => ({
       label: tag.value,

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

@@ -15,7 +15,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { UMLEditorState } from '../../../../stores/editor-state/element-editor-state/UMLEditorState.js';
+import { UMLEditorState } from '../../../../stores/editor/editor-state/element-editor-state/UMLEditorState.js';
 import { ClassEditor } from './ClassEditor.js';
 import { EnumerationEditor } from './EnumerationEditor.js';
 import { AssociationEditor } from './AssociationEditor.js';

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

@@ -15,7 +15,7 @@
  */
 
 import { useRef } from 'react';
-import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../application/LegendStudioTesting.js';
 import { observer } from 'mobx-react-lite';
 import {
   NewPackageableRuntimeDriver,
@@ -28,7 +28,7 @@ import {
   CONNECTION_TYPE,
 } from '../../../stores/editor/NewElementState.js';
 import { Dialog, compareLabelFn, CustomSelectorInput } from '@finos/legend-art';
-import type { EditorStore } from '../../../stores/EditorStore.js';
+import type { EditorStore } from '../../../stores/editor/EditorStore.js';
 import { prettyCONSTName } from '@finos/legend-shared';
 import type { DSL_LegendStudioApplicationPlugin_Extension } from '../../../stores/LegendStudioApplicationPlugin.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
@@ -38,7 +38,7 @@ import {
   type Class,
   ELEMENT_PATH_DELIMITER,
 } from '@finos/legend-graph';
-import type { FileGenerationTypeOption } from '../../../stores/editor-state/GraphGenerationState.js';
+import type { FileGenerationTypeOption } from '../../../stores/editor/editor-state/GraphGenerationState.js';
 import { flowResult } from 'mobx';
 import {
   buildElementOption,
@@ -46,11 +46,11 @@ import {
   useApplicationStore,
   type PackageableElementOption,
 } from '@finos/legend-application';
-import type { EmbeddedDataTypeOption } from '../../../stores/editor-state/element-editor-state/data/DataEditorState.js';
-import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
-import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/shared/ModelClassifierUtils.js';
-import { EmbeddedDataType } from '../../../stores/editor-state/ExternalFormatState.js';
-import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
+import type { EmbeddedDataTypeOption } from '../../../stores/editor/editor-state/element-editor-state/data/DataEditorState.js';
+import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../stores/extensions/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
+import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/editor/shared/ModelClassifierUtils.js';
+import { EmbeddedDataType } from '../../../stores/editor/editor-state/ExternalFormatState.js';
+import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../stores/extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 
 export const getElementTypeLabel = (
   editorStore: EditorStore,
@@ -296,6 +296,10 @@ const NewConnectionDriverEditor = observer(() => {
   let storeOptions: { label: string; value?: Store | undefined }[] = [
     { label: 'ModelStore', value: undefined },
   ];
+  // TODO: we should think more about this and filter the store by the connection type
+  // or think about a way to completely revamp this workflow, maybe to let people select
+  // the store first and then the type of the connection
+  // See
   storeOptions = storeOptions.concat(
     editorStore.graphManagerState.usableStores
       .map(buildElementOption)

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

@@ -60,26 +60,30 @@ import {
   CreateNewElementModal,
 } from './CreateNewElementModal.js';
 import { useDrag } from 'react-dnd';
-import { ElementDragSource } from '../../../stores/shared/DnDUtils.js';
-import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
-import { ACTIVITY_MODE } from '../../../stores/EditorConfig.js';
+import { ElementDragSource } from '../../../stores/editor/shared/DnDUtils.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../application/LegendStudioTesting.js';
+import {
+  ACTIVITY_MODE,
+  GRAPH_EDITOR_MODE,
+} from '../../../stores/editor/EditorConfig.js';
 import {
   generatePackageableElementTreeNodeDataLabel,
   getTreeChildNodes,
-} from '../../../stores/shared/PackageTreeUtils.js';
-import type { PackageTreeNodeData } from '../../../stores/shared/TreeUtils.js';
+} from '../../../stores/editor/shared/PackageTreeUtils.js';
+import type { PackageTreeNodeData } from '../../../stores/editor/shared/TreeUtils.js';
 import {
   type FileSystemTreeNodeData,
   getFileSystemChildNodes,
-} from '../../../stores/shared/FileSystemTreeUtils.js';
+} from '../../../stores/editor/shared/FileSystemTreeUtils.js';
 import { FileSystemTree } from '../edit-panel/element-generation-editor/FileSystemViewer.js';
 import {
   generateViewEntityRoute,
   generateViewProjectByGAVRoute,
-} from '../../../stores/LegendStudioRouter.js';
+} from '../../../application/LegendStudioNavigation.js';
 import {
   guaranteeNonEmptyString,
   guaranteeNonNullable,
+  isNonNullable,
   toTitleCase,
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
@@ -108,10 +112,10 @@ import {
   TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
-import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/shared/ModelClassifierUtils.js';
+import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/editor/shared/ModelClassifierUtils.js';
 import { useLegendStudioApplicationStore } from '../../LegendStudioBaseStoreProvider.js';
 import { queryClass } from '../edit-panel/uml-editor/ClassQueryBuilder.js';
-import { createViewSDLCProjectHandler } from '../../../stores/DependencyProjectViewerHelper.js';
+import { createViewSDLCProjectHandler } from '../../../stores/editor/DependencyProjectViewerHelper.js';
 import {
   MASTER_SNAPSHOT_ALIAS,
   SNAPSHOT_VERSION_ALIAS,
@@ -119,7 +123,7 @@ import {
 import {
   CLASS_MOCK_DATA_GENERATION_FORMAT,
   createMockDataForClassWithFormat,
-} from '../../../stores/shared/MockDataUtils.js';
+} from '../../../stores/editor/shared/MockDataUtils.js';
 
 const ElementRenamer = observer(() => {
   const editorStore = useEditorStore();
@@ -184,7 +188,7 @@ const ElementRenamer = observer(() => {
     if (element && canRenameElement) {
       explorerTreeState.setElementToRename(undefined);
       flowResult(
-        editorStore.renameElement(
+        editorStore.graphEditorMode.renameElement(
           element,
           element instanceof ConcreteFunctionDefinition
             ? path + getFunctionSignature(element)
@@ -450,11 +454,14 @@ const ExplorerContextMenu = observer(
           plugin.getExtraExplorerContextMenuItemRendererConfigurations?.() ??
           [],
       )
-      .map((config) => (
-        <Fragment key={config.key}>
-          {config.renderer(editorStore, node?.packageableElement)}
-        </Fragment>
-      ));
+      .map((config) => {
+        const action = config.renderer(editorStore, node?.packageableElement);
+        if (!action) {
+          return null;
+        }
+        return <Fragment key={config.key}>{action}</Fragment>;
+      })
+      .filter(isNonNullable);
     const projectId = editorStore.sdlcState.currentProject?.projectId;
     const isReadOnly = editorStore.isInViewerMode || Boolean(nodeIsImmutable);
     const isDependencyProjectElement =
@@ -496,9 +503,9 @@ const ExplorerContextMenu = observer(
     );
     const removeElement = (): void => {
       if (node) {
-        flowResult(editorStore.deleteElement(node.packageableElement)).catch(
-          applicationStore.alertUnhandledError,
-        );
+        flowResult(
+          editorStore.graphEditorMode.deleteElement(node.packageableElement),
+        ).catch(applicationStore.alertUnhandledError);
       }
     };
     const renameElement = (): void => {
@@ -916,7 +923,9 @@ const ExplorerDropdownMenu = observer(() => {
 
 const ExplorerTrees = observer(() => {
   const editorStore = useEditorStore();
-  const { isInGrammarTextMode, isInViewerMode } = editorStore;
+  const { isInViewerMode } = editorStore;
+  const isInGrammarTextMode =
+    editorStore.graphEditorMode.mode === GRAPH_EDITOR_MODE.GRAMMAR_TEXT;
   const openModelImport = (): void =>
     editorStore.tabManagerState.openTab(editorStore.modelImporterState);
   const graph = editorStore.graphManagerState.graph;
@@ -1111,7 +1120,8 @@ const ExplorerTrees = observer(() => {
 const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
   const { disabled } = props;
   const editorStore = useEditorStore();
-  const isInGrammarMode = editorStore.isInGrammarTextMode;
+  const isInGrammarMode =
+    editorStore.graphEditorMode.mode === GRAPH_EDITOR_MODE.GRAMMAR_TEXT;
   const showSearchModal = (): void =>
     editorStore.searchElementCommandState.open();
   // Explorer tree
@@ -1198,7 +1208,7 @@ export const Explorer = observer(() => {
   const sdlcState = editorStore.sdlcState;
   const isLoading =
     ((!editorStore.explorerTreeState.buildState.hasCompleted &&
-      !editorStore.isInGrammarTextMode) ||
+      editorStore.graphEditorMode.mode !== GRAPH_EDITOR_MODE.GRAMMAR_TEXT) ||
       editorStore.graphState.isUpdatingGraph) &&
     !editorStore.graphManagerState.graphBuildState.hasFailed;
   const showExplorerTrees =
@@ -1210,7 +1220,7 @@ export const Explorer = observer(() => {
     // don't edit elements that fast in form mode, but this could throw off
     // test runner
     (editorStore.isInViewerMode ||
-      editorStore.isInGrammarTextMode ||
+      editorStore.graphEditorMode.mode === GRAPH_EDITOR_MODE.GRAMMAR_TEXT ||
       editorStore.changeDetectionState.graphObserveState.hasSucceeded);
   // conflict resolution
   const showConflictResolutionContent =

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

@@ -36,22 +36,23 @@ import {
   ModalFooter,
   ModalHeader,
 } from '@finos/legend-art';
-import { EntityDiffViewState } from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
+import { EntityDiffViewState } from '../../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { EntityDiffSideBarItem } from '../../editor/edit-panel/diff-editor/EntityDiffView.js';
-import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../application/LegendStudioTesting.js';
 import { flowResult } from 'mobx';
 import type {
   EntityChange,
   EntityChangeConflict,
   EntityDiff,
 } from '@finos/legend-server-sdlc';
-import { entityDiffSorter } from '../../../stores/EditorSDLCState.js';
+import { entityDiffSorter } from '../../../stores/editor/EditorSDLCState.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';
 import { useEffect } from 'react';
-import { EntityChangeConflictEditorState } from '../../../stores/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.js';
+import { EntityChangeConflictEditorState } from '../../../stores/editor/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.js';
 import { EntityChangeConflictSideBarItem } from '../edit-panel/diff-editor/EntityChangeConflictEditor.js';
-import { FormLocalChangesState } from '../../../stores/sidebar-state/LocalChangesState.js';
+import { FormLocalChangesState } from '../../../stores/editor/sidebar-state/LocalChangesState.js';
+import { GRAPH_EDITOR_MODE } from '../../../stores/editor/EditorConfig.js';
 
 const PatchLoader = observer(() => {
   const editorStore = useEditorStore();
@@ -76,12 +77,7 @@ const PatchLoader = observer(() => {
         <ModalBody>
           <PanelLoadingIndicator isLoading={patchState.isLoadingChanges} />
           <div>
-            <input
-              id="upload-file"
-              type="file"
-              name="myFiles"
-              onChange={onChange}
-            />
+            <input type="file" name="myFiles" onChange={onChange} />
           </div>
           {Boolean(patchState.overiddingChanges.length) && (
             <div className="panel__content__form__section">
@@ -143,7 +139,7 @@ export const LocalChanges = observer(() => {
     localChangesState.downloadLocalChanges();
   const uploadPatchChanges = (): void =>
     localChangesState.patchLoaderState.openModal(
-      editorStore.graphState.computeLocalEntityChanges(),
+      editorStore.localChangesState.computeLocalEntityChanges(),
     );
   const pushLocalChanges = applicationStore.guardUnhandledError(() =>
     flowResult(localChangesState.pushLocalChanges()),
@@ -244,7 +240,7 @@ export const LocalChanges = observer(() => {
               isDispatchingAction ||
               editorStore.workspaceUpdaterState.isUpdatingWorkspace ||
               !editorStore.changeDetectionState.initState.hasSucceeded ||
-              !editorStore.isInFormMode
+              editorStore.graphEditorMode.mode !== GRAPH_EDITOR_MODE.FORM
             }
             tabIndex={-1}
             title="Upload local entity changes"