@finos/legend-application-studio 22.6.0 → 23.0.1

package/src/components/editor/ActivityBar.tsx

@@ -15,8 +15,11 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { ACTIVITY_MODE, AUX_PANEL_MODE } from '../../stores/EditorConfig.js';
-import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
+import {
+  ACTIVITY_MODE,
+  AUX_PANEL_MODE,
+} from '../../stores/editor/EditorConfig.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../application/LegendStudioTesting.js';
 import {
   clsx,
   DropdownMenu,
@@ -41,7 +44,7 @@ import { useEditorStore } from './EditorStoreProvider.js';
 import { forwardRef, useState } from 'react';
 import { VIRTUAL_ASSISTANT_TAB } from '@finos/legend-application';
 import { LegendStudioAppInfo } from '../LegendStudioAppInfo.js';
-import { generateSetupRoute } from '../../stores/LegendStudioRouter.js';
+import { generateSetupRoute } from '../../application/LegendStudioNavigation.js';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
 
 const SettingsMenu = observer(
@@ -251,11 +254,6 @@ export const ActivityBar = observer(() => {
       title: 'Test Runner',
       icon: <FlaskIcon />,
     },
-    !editorStore.isInConflictResolutionMode && {
-      mode: ACTIVITY_MODE.REGISTER_SERVICES,
-      title: 'Register Service',
-      icon: <RobotIcon />,
-    },
     !editorStore.isInConflictResolutionMode && {
       mode: ACTIVITY_MODE.LOCAL_CHANGES,
       title: 'Local Changes (Ctrl + Shift + G)',
@@ -324,6 +322,11 @@ export const ActivityBar = observer(() => {
       title: 'Workflow Manager',
       icon: <WrenchIcon />,
     },
+    !editorStore.isInConflictResolutionMode && {
+      mode: ACTIVITY_MODE.REGISTER_SERVICES,
+      title: 'Register Service',
+      icon: <RobotIcon />,
+    },
   ].filter((activity): activity is ActivityDisplay => Boolean(activity));
 
   return (

package/src/components/editor/Editor.tsx

@@ -31,7 +31,7 @@ import { EditPanel, EditPanelSplashScreen } from './edit-panel/EditPanel.js';
 import { GrammarTextEditor } from './edit-panel/GrammarTextEditor.js';
 import { StatusBar } from './StatusBar.js';
 import { ActivityBar } from './ActivityBar.js';
-import type { WorkspaceEditorPathParams } from '../../stores/LegendStudioRouter.js';
+import type { WorkspaceEditorPathParams } from '../../application/LegendStudioNavigation.js';
 import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
 import { guaranteeNonNullable, isNonNullable } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
@@ -46,8 +46,9 @@ import {
 } from '@finos/legend-application';
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { WorkspaceSyncConflictResolver } from './side-bar/WorkspaceSyncConflictResolver.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../application/LegendStudioApplicationNavigationContext.js';
 import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
+import { GRAPH_EDITOR_MODE } from '../../stores/editor/EditorConfig.js';
 
 export const Editor = withEditorStore(
   observer(() => {
@@ -204,10 +205,13 @@ export const Editor = withEditorStore(
                           : {})}
                       >
                         {(isResolvingConflicts || editable) &&
-                          editorStore.isInFormMode && <EditPanel />}
-                        {editable && editorStore.isInGrammarTextMode && (
-                          <GrammarTextEditor />
-                        )}
+                          editorStore.graphEditorMode.mode ===
+                            GRAPH_EDITOR_MODE.FORM && <EditPanel />}
+                        {editable &&
+                          editorStore.graphEditorMode.mode ===
+                            GRAPH_EDITOR_MODE.GRAMMAR_TEXT && (
+                            <GrammarTextEditor />
+                          )}
                         {!editable && <EditPanelSplashScreen />}
                       </ResizablePanel>
                       <ResizablePanelSplitter>

package/src/components/editor/EditorStoreProvider.tsx

@@ -16,12 +16,11 @@
 
 import { createContext, useContext } from 'react';
 import { useLocalObservable } from 'mobx-react-lite';
-import { EditorStore } from '../../stores/EditorStore.js';
+import { EditorStore } from '../../stores/editor/EditorStore.js';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useSDLCServerClient } from '@finos/legend-server-sdlc';
 import { useDepotServerClient } from '@finos/legend-server-depot';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
-import { useGraphManagerState } from '@finos/legend-graph';
 
 const EditorStoreContext = createContext<EditorStore | undefined>(undefined);
 
@@ -31,15 +30,9 @@ export const EditorStoreProvider: React.FC<{
   const applicationStore = useLegendStudioApplicationStore();
   const sdlcServerClient = useSDLCServerClient();
   const depotServerClient = useDepotServerClient();
-  const graphManagerState = useGraphManagerState();
   const store = useLocalObservable(
     () =>
-      new EditorStore(
-        applicationStore,
-        sdlcServerClient,
-        depotServerClient,
-        graphManagerState,
-      ),
+      new EditorStore(applicationStore, sdlcServerClient, depotServerClient),
   );
   return (
     <EditorStoreContext.Provider value={store}>

package/src/components/editor/StatusBar.tsx

@@ -29,12 +29,16 @@ import {
   ErrorIcon,
   WarningIcon,
 } from '@finos/legend-art';
-import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
-import { ACTIVITY_MODE, AUX_PANEL_MODE } from '../../stores/EditorConfig.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../application/LegendStudioTesting.js';
+import {
+  ACTIVITY_MODE,
+  AUX_PANEL_MODE,
+  GRAPH_EDITOR_MODE,
+} from '../../stores/editor/EditorConfig.js';
 import {
   generateSetupRoute,
   type WorkspaceEditorPathParams,
-} from '../../stores/LegendStudioRouter.js';
+} from '../../application/LegendStudioNavigation.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from './EditorStoreProvider.js';
 import { WorkspaceType } from '@finos/legend-server-sdlc';
@@ -136,12 +140,8 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
   const handleTextModeClick = applicationStore.guardUnhandledError(() =>
     flowResult(editorStore.toggleTextMode()),
   );
-  const compile = applicationStore.guardUnhandledError(
-    editorStore.isInGrammarTextMode
-      ? () => flowResult(editorStore.graphState.globalCompileInTextMode())
-      : async () => {
-          await flowResult(editorStore.graphState.globalCompileInFormMode());
-        },
+  const compile = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.graphEditorMode.globalCompile()),
   );
   const generate = applicationStore.guardUnhandledError(() =>
     flowResult(editorStore.graphState.graphGenerationState.globalGenerate()),
@@ -380,7 +380,8 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
             'editor__status-bar__action editor__status-bar__action__toggler',
             {
               'editor__status-bar__action editor__status-bar__action__toggler--active':
-                editorStore.isInGrammarTextMode,
+                editorStore.graphEditorMode.mode ===
+                GRAPH_EDITOR_MODE.GRAMMAR_TEXT,
             },
           )}
           disabled={actionsDisabled}

package/src/components/editor/aux-panel/AuxiliaryPanel.tsx

@@ -28,7 +28,7 @@ import {
   PanelHeaderActionItem,
 } from '@finos/legend-art';
 import { Console } from './Console.js';
-import { AUX_PANEL_MODE } from '../../../stores/EditorConfig.js';
+import { AUX_PANEL_MODE } from '../../../stores/editor/EditorConfig.js';
 import { isNonNullable } from '@finos/legend-shared';
 import { DevTool } from './DevTool.js';
 import { useEditorStore } from '../EditorStoreProvider.js';

package/src/components/editor/aux-panel/DevTool.tsx

@@ -24,7 +24,7 @@ import {
 import { isValidUrl } from '@finos/legend-shared';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { observe_TEMPORARY__AbstractEngineConfig } from '@finos/legend-graph';
-import { LEGEND_STUDIO_SETTINGS_KEY } from '../../../stores/LegendStudioStorage.js';
+import { LEGEND_STUDIO_SETTING_KEY } from '../../../application/LegendStudioSetting.js';
 
 export const DevTool = observer(() => {
   const editorStore = useEditorStore();
@@ -45,8 +45,8 @@ export const DevTool = observer(() => {
     editorStore.graphState.setEnableStrictMode(
       !editorStore.graphState.enableStrictMode,
     );
-    editorStore.applicationStore.storageService.settingsStore.persist(
-      LEGEND_STUDIO_SETTINGS_KEY.EDITOR_STRICT_MODE,
+    editorStore.applicationStore.settingService.persistValue(
+      LEGEND_STUDIO_SETTING_KEY.EDITOR_STRICT_MODE,
       editorStore.graphState.enableStrictMode,
     );
   };

package/src/components/editor/aux-panel/Problems.tsx

@@ -24,22 +24,16 @@ import {
   WarningIcon,
 } from '@finos/legend-art';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import type { Problem } from '../../../stores/EditorGraphState.js';
+import type { Problem } from '../../../stores/editor/EditorGraphState.js';
 import { CompilationWarning, EngineError } from '@finos/legend-graph';
+import { GRAPH_EDITOR_MODE } from '../../../stores/editor/EditorConfig.js';
 
 const ProblemItem = observer((props: { problem: Problem }) => {
   const { problem } = props;
   const editorStore = useEditorStore();
   const isStale = editorStore.graphState.areProblemsStale;
-  const goToSource = (): void => {
-    // NOTE: in text mode, we allow click to go to position even when the problems might already be stale
-    if (editorStore.isInGrammarTextMode && problem.sourceInformation) {
-      editorStore.grammarTextEditorState.setForcedCursorPosition({
-        lineNumber: problem.sourceInformation.startLine,
-        column: problem.sourceInformation.startColumn,
-      });
-    }
-  };
+  const goToSource = (): void =>
+    editorStore.graphEditorMode.goToProblem(problem);
 
   return (
     <PanelListItem>
@@ -64,7 +58,8 @@ const ProblemItem = observer((props: { problem: Problem }) => {
         </div>
         {problem.sourceInformation && (
           <div className="auxiliary-panel__problem__source">
-            {editorStore.isInGrammarTextMode &&
+            {editorStore.graphEditorMode.mode ===
+              GRAPH_EDITOR_MODE.GRAMMAR_TEXT &&
               `[Ln ${problem.sourceInformation.startLine}, Col ${problem.sourceInformation.startColumn}]`}
           </div>
         )}

package/src/components/editor/command-center/ProjectSearchCommand.tsx

@@ -76,10 +76,7 @@ export const ProjectSearchCommand = observer(() => {
       closeModal();
       // NOTE: since it takes time to close the modal, this will prevent any auto-focus effort when we open a new element
       // to fail as the focus is still trapped in this modal, we need to use `setTimeout` here
-      setTimeout(
-        () => editorStore.tabManagerState.openElementEditor(val.value),
-        0,
-      );
+      setTimeout(() => editorStore.graphEditorMode.openElement(val.value), 0);
     }
   };
   const handleEnter = (): void => {

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

@@ -27,49 +27,49 @@ import {
 } from '@finos/legend-art';
 import { MappingEditor } from './mapping-editor/MappingEditor.js';
 import { UMLEditor } from './uml-editor/UMLEditor.js';
-import { MappingEditorState } from '../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
-import { UMLEditorState } from '../../../stores/editor-state/element-editor-state/UMLEditorState.js';
+import { MappingEditorState } from '../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
+import { UMLEditorState } from '../../../stores/editor/editor-state/element-editor-state/UMLEditorState.js';
 import {
   ElementEditorState,
   ELEMENT_GENERATION_MODE,
   ExternalFormatElementGenerationViewModeState,
   FileGenerationViewModeState,
-} from '../../../stores/editor-state/element-editor-state/ElementEditorState.js';
-import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
-import { ELEMENT_NATIVE_VIEW_MODE } from '../../../stores/EditorConfig.js';
+} from '../../../stores/editor/editor-state/element-editor-state/ElementEditorState.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../application/LegendStudioTesting.js';
+import { ELEMENT_NATIVE_VIEW_MODE } from '../../../stores/editor/EditorConfig.js';
 import {
   DIFF_VIEW_MODE,
   EntityDiffViewState,
-} from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
+} from '../../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { EntityDiffView } from '../../editor/edit-panel/diff-editor/EntityDiffView.js';
 import { ModelImporter } from './ModelImporter.js';
-import { ModelImporterState } from '../../../stores/editor-state/ModelImporterState.js';
-import { FunctionEditorState } from '../../../stores/editor-state/element-editor-state/FunctionEditorState.js';
-import { ServiceEditorState } from '../../../stores/editor-state/element-editor-state/service/ServiceEditorState.js';
-import { ProjectConfigurationEditorState } from '../../../stores/editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js';
+import { ModelImporterState } from '../../../stores/editor/editor-state/ModelImporterState.js';
+import { FunctionEditorState } from '../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
+import { ServiceEditorState } from '../../../stores/editor/editor-state/element-editor-state/service/ServiceEditorState.js';
+import { ProjectConfigurationEditorState } from '../../../stores/editor/editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js';
 import { ProjectConfigurationEditor } from '../../editor/edit-panel/project-configuration-editor/ProjectConfigurationEditor.js';
 import { ElementGenerationEditor } from './element-generation-editor/ElementGenerationEditor.js';
 import { FunctionEditor } from './FunctionEditor.js';
 import { ElementNativeView } from './element-generation-editor/ElementNativeView.js';
 import { ServiceEditor } from './service-editor/ServiceEditor.js';
 import { PackageableRuntimeEditor } from './RuntimeEditor.js';
-import { PackageableRuntimeEditorState } from '../../../stores/editor-state/element-editor-state/RuntimeEditorState.js';
-import { PackageableConnectionEditorState } from '../../../stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
+import { PackageableRuntimeEditorState } from '../../../stores/editor/editor-state/element-editor-state/RuntimeEditorState.js';
+import { PackageableConnectionEditorState } from '../../../stores/editor/editor-state/element-editor-state/connection/ConnectionEditorState.js';
 import { PackageableConnectionEditor } from './connection-editor/ConnectionEditor.js';
-import { FileGenerationEditorState } from '../../../stores/editor-state/element-editor-state/FileGenerationEditorState.js';
+import { FileGenerationEditorState } from '../../../stores/editor/editor-state/element-editor-state/FileGenerationEditorState.js';
 import { FileGenerationEditor } from './element-generation-editor/FileGenerationEditor.js';
-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 { EntityChangeConflictEditor } from './diff-editor/EntityChangeConflictEditor.js';
-import { UnsupportedElementEditorState } from '../../../stores/editor-state/UnsupportedElementEditorState.js';
+import { UnsupportedElementEditorState } from '../../../stores/editor/editor-state/UnsupportedElementEditorState.js';
 import { UnsupportedElementEditor } from './UnsupportedElementEditor.js';
-import { getPrettyLabelForRevision } from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffEditorState.js';
-import { GenerationSpecificationEditorState } from '../../../stores/editor-state/GenerationSpecificationEditorState.js';
+import { getPrettyLabelForRevision } from '../../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffEditorState.js';
+import { GenerationSpecificationEditorState } from '../../../stores/editor/editor-state/GenerationSpecificationEditorState.js';
 import { GenerationSpecificationEditor } from './GenerationSpecificationEditor.js';
-import { FileGenerationViewerState } from '../../../stores/editor-state/FileGenerationViewerState.js';
+import { FileGenerationViewerState } from '../../../stores/editor/editor-state/FileGenerationViewerState.js';
 import { FileGenerationViewer } from '../../editor/edit-panel/FileGenerationViewer.js';
 import type { DSL_LegendStudioApplicationPlugin_Extension } from '../../../stores/LegendStudioApplicationPlugin.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import { PackageableDataEditorState } from '../../../stores/editor-state/element-editor-state/data/DataEditorState.js';
+import { PackageableDataEditorState } from '../../../stores/editor/editor-state/element-editor-state/data/DataEditorState.js';
 import { DataElementEditor } from './data-editor/DataElementEditor.js';
 import { TabManager, type TabState } from '@finos/legend-application';
 import { ElementXTGenerationEditor } from './element-generation-editor/ElementXTGenerationEditor.js';

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

@@ -19,7 +19,7 @@ import {
   FileGenerationViewerState,
   getTextContent,
   getEditorLanguageForFormat,
-} from '../../../stores/editor-state/FileGenerationViewerState.js';
+} from '../../../stores/editor/editor-state/FileGenerationViewerState.js';
 import {
   LockIcon,
   FireIcon,
@@ -43,7 +43,7 @@ export const FileGenerationViewer = observer(() => {
       )
     : undefined;
   const visitFileGeneration = (fg: FileGenerationSpecification): void =>
-    editorStore.tabManagerState.openElementEditor(fg);
+    editorStore.graphEditorMode.openElement(fg);
 
   return (
     <div className="file-generation-viewer">

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

@@ -19,12 +19,12 @@ import { observer } from 'mobx-react-lite';
 import {
   FunctionEditorState,
   FUNCTION_SPEC_TAB,
-} from '../../../stores/editor-state/element-editor-state/FunctionEditorState.js';
+} from '../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
 import {
   CORE_DND_TYPE,
   type UMLEditorElementDropTarget,
   type ElementDragSource,
-} from '../../../stores/shared/DnDUtils.js';
+} from '../../../stores/editor/shared/DnDUtils.js';
 import {
   assertErrorThrown,
   prettyCONSTName,
@@ -46,7 +46,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,
@@ -99,16 +99,16 @@ import {
   annotatedElement_deleteStereotype,
   annotatedElement_deleteTaggedValue,
   function_swapParameters,
-} from '../../../stores/shared/modifier/DomainGraphModifierHelper.js';
+} from '../../../stores/editor/shared/modifier/DomainGraphModifierHelper.js';
 import {
   rawVariableExpression_setMultiplicity,
   rawVariableExpression_setName,
   rawVariableExpression_setType,
-} from '../../../stores/shared/modifier/RawValueSpecificationGraphModifierHelper.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
+} from '../../../stores/editor/shared/modifier/RawValueSpecificationGraphModifierHelper.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../application/LegendStudioApplicationNavigationContext.js';
 import { LambdaEditor } from '@finos/legend-query-builder';
-import type { EditorStore } from '../../../stores/EditorStore.js';
-import { graph_renameElement } from '../../../stores/shared/modifier/GraphModifierHelper.js';
+import type { EditorStore } from '../../../stores/editor/EditorStore.js';
+import { graph_renameElement } from '../../../stores/editor/shared/modifier/GraphModifierHelper.js';
 
 enum FUNCTION_PARAMETER_TYPE {
   CLASS = 'CLASS',
@@ -201,7 +201,7 @@ const ParameterBasicEditor = observer(
     };
     const openElement = (): void => {
       if (!(paramType instanceof PrimitiveType)) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           paramType instanceof Unit ? paramType.measure : paramType,
         );
       }
@@ -456,7 +456,7 @@ const ReturnTypeEditor = observer(
 
     const openElement = (): void => {
       if (!(returnType.value instanceof PrimitiveType)) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           returnType.value instanceof Unit
             ? returnType.value.measure
             : returnType.value,

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

@@ -21,7 +21,7 @@ import {
   type GenerationSpecNodeDragSource,
   type GenerationSpecNodeDropTarget,
   type GenerationTreeNodeState,
-} from '../../../stores/editor-state/GenerationSpecificationEditorState.js';
+} from '../../../stores/editor/editor-state/GenerationSpecificationEditorState.js';
 import { type DropTargetMonitor, useDrag, useDrop } from 'react-dnd';
 import { getElementIcon } from '../../shared/ElementIconUtils.js';
 import {
@@ -49,9 +49,9 @@ import {
   CORE_DND_TYPE,
   type ElementDragSource,
   type FileGenerationSourceDropTarget,
-} from '../../../stores/shared/DnDUtils.js';
+} from '../../../stores/editor/shared/DnDUtils.js';
 import { getNullableFirstElement } from '@finos/legend-shared';
-import type { DSL_Generation_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSL_Generation_LegendStudioApplicationPlugin_Extension.js';
+import type { DSL_Generation_LegendStudioApplicationPlugin_Extension } from '../../../stores/extensions/DSL_Generation_LegendStudioApplicationPlugin_Extension.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import {
@@ -67,12 +67,12 @@ import {
   useApplicationStore,
   type PackageableElementOption,
 } from '@finos/legend-application';
-import { packageableElementReference_setValue } from '../../../stores/shared/modifier/DomainGraphModifierHelper.js';
+import { packageableElementReference_setValue } from '../../../stores/editor/shared/modifier/DomainGraphModifierHelper.js';
 import {
   generationSpecification_addFileGeneration,
   generationSpecification_deleteFileGeneration,
   generationSpecification_setId,
-} from '../../../stores/shared/modifier/DSL_Generation_GraphModifierHelper.js';
+} from '../../../stores/editor/shared/modifier/DSL_Generation_GraphModifierHelper.js';
 
 const GENERATION_SPEC_NODE_DND_TYPE = 'GENERATION_SPEC_NODE';
 
@@ -99,7 +99,7 @@ const ModelGenerationItem = observer(
     const deleteNode = (): void =>
       specState.deleteGenerationTreeNode(generationTreeNode);
     const visitModelGeneration = (): void =>
-      editorStore.tabManagerState.openElementEditor(modelGeneration);
+      editorStore.graphEditorMode.openElement(modelGeneration);
     // generation id
     const isUnique =
       specState.spec.generationNodes.filter(
@@ -368,7 +368,7 @@ const FileGenerationItem = observer(
         fileGeneraitonRef,
       );
     const visitFileGen = (): void =>
-      editorStore.tabManagerState.openElementEditor(fileGeneration);
+      editorStore.graphEditorMode.openElement(fileGeneration);
     return (
       <div className="generation-spec-file-generation-editor__item">
         <div className="btn--sm generation-spec-file-generation-editor__item__label">

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

@@ -56,7 +56,7 @@ import {
 import {
   type ElementDragSource,
   CORE_DND_TYPE,
-} from '../../../stores/shared/DnDUtils.js';
+} from '../../../stores/editor/shared/DnDUtils.js';
 import { useDrop } from 'react-dnd';
 import type { DSL_LegendStudioApplicationPlugin_Extension } from '../../../stores/LegendStudioApplicationPlugin.js';
 import { flowResult } from 'mobx';
@@ -72,8 +72,8 @@ import {
   PURE_ELEMENT_NAME,
   PURE_PARSER,
 } from '@finos/legend-graph';
-import type { EditorStore } from '../../../stores/EditorStore.js';
-import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../stores/LegendStudioDocumentation.js';
+import type { EditorStore } from '../../../stores/editor/EditorStore.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../application/LegendStudioDocumentation.js';
 import {
   BLANK_CLASS_SNIPPET,
   CLASS_WITH_CONSTRAINT_SNIPPET,
@@ -104,12 +104,13 @@ import {
   MAPPING_WITH_RELATIONAL_CLASS_MAPPING_SNIPPET,
   POST_PROCESSOR_RELATIONAL_DATABASE_CONNECTION_SNIPPET,
   createConnectionSnippetWithPostProcessorSuggestionSnippet,
-} from '../../../stores/LegendStudioCodeSnippets.js';
-import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
-import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
-import type { STO_Relational_LegendStudioApplicationPlugin_Extension } from '../../../stores/STO_Relational_LegendStudioApplicationPlugin_Extension.js';
-import { LEGEND_STUDIO_SETTINGS_KEY } from '../../../stores/LegendStudioStorage.js';
+} from '../../../application/LegendStudioCodeSnippet.js';
+import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../stores/extensions/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../application/LegendStudioApplicationNavigationContext.js';
+import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../stores/extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
+import type { STO_Relational_LegendStudioApplicationPlugin_Extension } from '../../../stores/extensions/STO_Relational_LegendStudioApplicationPlugin_Extension.js';
+import { LEGEND_STUDIO_SETTING_KEY } from '../../../application/LegendStudioSetting.js';
+import { GraphEditGrammarModeState } from '../../../stores/editor/GraphEditGrammarModeState.js';
 
 export const GrammarTextEditorHeaderTabContextMenu = observer(
   forwardRef<HTMLDivElement, { children?: React.ReactNode }>(
@@ -684,7 +685,9 @@ export const GrammarTextEditor = observer(() => {
   >();
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
-  const grammarTextEditorState = editorStore.grammarTextEditorState;
+  const grammarTextEditorState = editorStore.getGraphEditorMode(
+    GraphEditGrammarModeState,
+  ).grammarTextEditorState;
   const currentElementLabelRegexString =
     grammarTextEditorState.currentElementLabelRegexString;
   const error = editorStore.graphState.error;
@@ -701,8 +704,8 @@ export const GrammarTextEditor = observer(() => {
 
   const toggleWordWrap = (): void => {
     grammarTextEditorState.setWrapText(!grammarTextEditorState.wrapText);
-    editorStore.applicationStore.storageService.settingsStore.persist(
-      LEGEND_STUDIO_SETTINGS_KEY.EDITOR_WRAP_TEXT,
+    editorStore.applicationStore.settingService.persistValue(
+      LEGEND_STUDIO_SETTING_KEY.EDITOR_WRAP_TEXT,
       grammarTextEditorState.wrapText,
     );
   };
@@ -1043,7 +1046,9 @@ export const GrammarTextEditor = observer(() => {
           <div className="edit-panel__text-mode__tab">
             <button
               className="edit-panel__text-mode__tab__label"
-              disabled={editorStore.graphState.isApplicationLeavingTextMode}
+              disabled={
+                editorStore.graphState.isApplicationLeavingGraphEditMode
+              }
               onClick={leaveTextMode}
               tabIndex={-1}
               title="Click to exit text mode and go back to form mode"

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

@@ -22,7 +22,7 @@ import {
   MODEL_IMPORT_NATIVE_INPUT_TYPE,
   NativeModelImporterEditorState,
   ExternalFormatModelImporterState,
-} from '../../../stores/editor-state/ModelImporterState.js';
+} from '../../../stores/editor/editor-state/ModelImporterState.js';
 import { prettyCONSTName } from '@finos/legend-shared';
 import {
   DropdownMenu,
@@ -45,8 +45,8 @@ import {
   TextInputEditor,
 } from '@finos/legend-application';
 import type { ModelImporterExtensionConfiguration } from '../../../stores/LegendStudioApplicationPlugin.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
-import { SCHEMA_SET_TAB_TYPE } from '../../../stores/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../application/LegendStudioApplicationNavigationContext.js';
+import { SCHEMA_SET_TAB_TYPE } from '../../../stores/editor/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
 import { SchemaSetModelGenerationEditor } from './external-format-editor/DSL_ExternalFormat_SchemaSetModelGenerationEditor.js';
 import { SchemaSetGeneralEditor } from './external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.js';
 

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

@@ -23,8 +23,8 @@ import {
   IdentifiedConnectionsEditorTabState,
   IdentifiedConnectionsPerClassEditorTabState,
   IdentifiedConnectionsPerStoreEditorTabState,
-} from '../../../stores/editor-state/element-editor-state/RuntimeEditorState.js';
-import type { EditorStore } from '../../../stores/EditorStore.js';
+} from '../../../stores/editor/editor-state/element-editor-state/RuntimeEditorState.js';
+import type { EditorStore } from '../../../stores/editor/EditorStore.js';
 import {
   clsx,
   Dialog,
@@ -64,20 +64,20 @@ import {
   Modal,
 } from '@finos/legend-art';
 import { getElementIcon } from '../../shared/ElementIconUtils.js';
-import type { RuntimeExplorerTreeNodeData } from '../../../stores/shared/TreeUtils.js';
+import type { RuntimeExplorerTreeNodeData } from '../../../stores/editor/shared/TreeUtils.js';
 import { ConnectionEditor } from './connection-editor/ConnectionEditor.js';
 import {
   type UMLEditorElementDropTarget,
   CORE_DND_TYPE,
   ElementDragSource,
-} from '../../../stores/shared/DnDUtils.js';
+} from '../../../stores/editor/shared/DnDUtils.js';
 import { useDrop } from 'react-dnd';
 import {
   assertErrorThrown,
   guaranteeType,
   UnsupportedOperationError,
 } from '@finos/legend-shared';
-import type { ConnectionEditorState } from '../../../stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
+import type { ConnectionEditorState } from '../../../stores/editor/editor-state/element-editor-state/connection/ConnectionEditorState.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import {
   type PackageableElementReference,
@@ -105,12 +105,12 @@ import {
   buildElementOption,
   type PackageableElementOption,
 } from '@finos/legend-application';
-import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
+import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../stores/extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import {
   runtime_addIdentifiedConnection,
   runtime_deleteIdentifiedConnection,
-} from '../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
+} from '../../../stores/editor/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../application/LegendStudioApplicationNavigationContext.js';
 
 const getConnectionTooltipText = (
   connection: Connection,
@@ -580,7 +580,7 @@ const IdentifiedConnectionEditor = observer(
     };
     const visitConnection = (): void => {
       if (identifiedConnection.connection instanceof ConnectionPointer) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           identifiedConnection.connection.packageableConnection.value,
         );
       }
@@ -844,7 +844,7 @@ const RuntimeMappingEditor = observer(
     const deleteMapping = (): void =>
       runtimeEditorState.deleteMapping(mappingRef);
     const visitMapping = (): void =>
-      editorStore.tabManagerState.openElementEditor(mappingRef.value);
+      editorStore.graphEditorMode.openElement(mappingRef.value);
 
     return (
       <div className="panel__content__form__section__list__item--customized runtime-mapping-editor">

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

@@ -16,7 +16,7 @@
 
 import { observer } from 'mobx-react-lite';
 import { BlankPanelContent, LockIcon, Panel } from '@finos/legend-art';
-import { UnsupportedElementEditorState } from '../../../stores/editor-state/UnsupportedElementEditorState.js';
+import { UnsupportedElementEditorState } from '../../../stores/editor/editor-state/UnsupportedElementEditorState.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';