@finos/legend-application-studio 22.5.0 → 23.0.0

package/src/components/Core_LegendStudioApplicationPlugin.tsx

@@ -15,19 +15,22 @@
  */
 
 import {
-  collectContextualDocumnetationEntries,
+  collectContextualDocumentationEntries,
   collectKeyedCommandConfigEntriesFromConfig,
   type KeyedCommandConfigEntry,
   type ContextualDocumentationEntry,
+  type SettingConfigurationEntry,
+  collectSettingConfigurationEntriesFromConfig,
 } from '@finos/legend-application';
 import packageJson from '../../package.json';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../application/LegendStudioApplicationNavigationContext.js';
 import {
   CORE_CONTEXTUAL_DOCUMENTATION_CONFIG,
   LEGEND_STUDIO_DOCUMENTATION_KEY,
-} from '../stores/LegendStudioDocumentation.js';
+} from '../application/LegendStudioDocumentation.js';
 import { LegendStudioApplicationPlugin } from '../stores/LegendStudioApplicationPlugin.js';
-import { LEGEND_STUDIO_COMMAND_CONFIG } from '../stores/LegendStudioCommand.js';
+import { LEGEND_STUDIO_COMMAND_CONFIG } from '../application/LegendStudioCommand.js';
+import { LEGEND_STUDIO_SETTING_CONFIG } from '../application/LegendStudioSetting.js';
 
 export class Core_LegendStudioApplicationPlugin extends LegendStudioApplicationPlugin {
   static NAME = packageJson.extensions.applicationStudioPlugin;
@@ -78,7 +81,7 @@ export class Core_LegendStudioApplicationPlugin extends LegendStudioApplicationP
   }
 
   override getExtraContextualDocumentationEntries(): ContextualDocumentationEntry[] {
-    return collectContextualDocumnetationEntries(
+    return collectContextualDocumentationEntries(
       CORE_CONTEXTUAL_DOCUMENTATION_CONFIG,
     );
   }
@@ -100,4 +103,10 @@ export class Core_LegendStudioApplicationPlugin extends LegendStudioApplicationP
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SERVICE_EDITOR,
     ];
   }
+
+  override getExtraSettingConfigurationEntries(): SettingConfigurationEntry[] {
+    return collectSettingConfigurationEntriesFromConfig(
+      LEGEND_STUDIO_SETTING_CONFIG,
+    );
+  }
 }

package/src/components/EditorComponentTestUtils.tsx

@@ -28,7 +28,7 @@ import { Editor } from './editor/Editor.js';
 import {
   generateEditorRoute,
   LEGEND_STUDIO_ROUTE_PATTERN,
-} from '../stores/LegendStudioRouter.js';
+} from '../application/LegendStudioNavigation.js';
 import {
   createMock,
   createSpy,
@@ -54,8 +54,6 @@ import {
   type GenerationConfigurationDescription,
   type GenerationMode,
   type GraphManagerState,
-  TEST__GraphManagerStateProvider,
-  TEST__getTestGraphManagerState,
   ELEMENT_PATH_DELIMITER,
 } from '@finos/legend-graph';
 import {
@@ -170,8 +168,6 @@ export const TEST__provideMockedEditorStore = (customization?: {
         ),
       customization?.sdlcServerClient ?? TEST__getTestSDLCServerClient(),
       customization?.depotServerClient ?? TEST__getTestDepotServerClient(),
-      customization?.graphManagerState ??
-        TEST__getTestGraphManagerState(customization?.pluginManager),
     );
   const MOCK__EditorStoreProvider = require('./editor/EditorStoreProvider.js'); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
   MOCK__EditorStoreProvider.useEditorStore = createMock();
@@ -362,15 +358,13 @@ export const TEST__setUpEditor = async (
       >
         <TEST__SDLCServerClientProvider>
           <TEST__DepotServerClientProvider>
-            <TEST__GraphManagerStateProvider>
-              <TEST__LegendStudioBaseStoreProvider>
-                <LegendApplicationComponentFrameworkProvider>
-                  <Route path={[LEGEND_STUDIO_ROUTE_PATTERN.EDIT_WORKSPACE]}>
-                    <Editor />
-                  </Route>
-                </LegendApplicationComponentFrameworkProvider>
-              </TEST__LegendStudioBaseStoreProvider>
-            </TEST__GraphManagerStateProvider>
+            <TEST__LegendStudioBaseStoreProvider>
+              <LegendApplicationComponentFrameworkProvider>
+                <Route path={[LEGEND_STUDIO_ROUTE_PATTERN.EDIT_WORKSPACE]}>
+                  <Editor />
+                </Route>
+              </LegendApplicationComponentFrameworkProvider>
+            </TEST__LegendStudioBaseStoreProvider>
           </TEST__DepotServerClientProvider>
         </TEST__SDLCServerClientProvider>
       </TEST__ApplicationStoreProvider>

package/src/components/EmbeddedQueryBuilder.tsx

@@ -34,7 +34,7 @@ import {
   QueryBuilder,
   type QueryBuilderState,
 } from '@finos/legend-query-builder';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../application/LegendStudioApplicationNavigationContext.js';
 import { useEditorStore } from './editor/EditorStoreProvider.js';
 import type { EmbeddedQueryBuilderState } from '../stores/EmbeddedQueryBuilderState.js';
 

package/src/components/LegendStudioAppInfo.tsx

@@ -171,7 +171,6 @@ export const LegendStudioAppInfo: React.FC<{
           `SDLC Server: ${config.sdlcServerUrl}`,
           `Engine Server: ${config.engineServerUrl}`,
           `Depot Server: ${config.depotServerUrl}`,
-          `User Agent: ${window.navigator.userAgent}`,
         ]
           .filter(isNonNullable)
           .join('\n'),

package/src/components/LegendStudioApplication.tsx

@@ -29,8 +29,7 @@ import {
 import {
   LEGEND_STUDIO_ROUTE_PATTERN,
   LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN,
-} from '../stores/LegendStudioRouter.js';
-import type { LegendStudioPluginManager } from '../application/LegendStudioPluginManager.js';
+} from '../application/LegendStudioNavigation.js';
 import { flowResult } from 'mobx';
 import { SDLCServerClientProvider } from '@finos/legend-server-sdlc';
 import { DepotServerClientProvider } from '@finos/legend-server-depot';
@@ -39,7 +38,6 @@ import {
   useLegendStudioApplicationStore,
   useLegendStudioBaseStore,
 } from './LegendStudioBaseStoreProvider.js';
-import { GraphManagerStateProvider } from '@finos/legend-graph';
 import {
   generateExtensionUrlPattern,
   LegendApplicationComponentFrameworkProvider,
@@ -48,7 +46,7 @@ import {
   useApplicationStore,
 } from '@finos/legend-application';
 import type { LegendStudioApplicationConfig } from '../application/LegendStudioApplicationConfig.js';
-import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../stores/LegendStudioDocumentation.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../application/LegendStudioDocumentation.js';
 
 const LegendStudioNotFoundRouteScreen = observer(() => {
   const applicationStore = useApplicationStore();
@@ -117,6 +115,12 @@ export const LegendStudioApplicationRoot = observer(() => {
   const extraApplicationPageEntries = applicationStore.pluginManager
     .getApplicationPlugins()
     .flatMap((plugin) => plugin.getExtraApplicationPageEntries?.() ?? []);
+  const SDLCBypassedPageEntries = extraApplicationPageEntries.filter(
+    (entry) => entry.bypassSDLC,
+  );
+  const SDLCPageEntries = extraApplicationPageEntries.filter(
+    (entry) => !entry.bypassSDLC,
+  );
 
   useEffect(() => {
     flowResult(baseStore.initialize()).catch(
@@ -146,6 +150,14 @@ export const LegendStudioApplicationRoot = observer(() => {
               ]}
               component={ProjectViewer}
             />
+            {SDLCBypassedPageEntries.map((entry) => (
+              <Route
+                key={entry.key}
+                exact={true}
+                path={entry.urlPatterns.map(generateExtensionUrlPattern)}
+                component={entry.renderer as React.ComponentType<unknown>}
+              />
+            ))}
             <Route>
               <LegendStudioNotFoundRouteScreen />
             </Route>
@@ -193,7 +205,7 @@ export const LegendStudioApplicationRoot = observer(() => {
               ]}
               component={WorkspaceSetup}
             />
-            {extraApplicationPageEntries.map((entry) => (
+            {SDLCPageEntries.map((entry) => (
               <Route
                 key={entry.key}
                 exact={true}
@@ -212,12 +224,8 @@ export const LegendStudioApplicationRoot = observer(() => {
 });
 
 export const LegendStudioApplication = observer(
-  (props: {
-    config: LegendStudioApplicationConfig;
-    pluginManager: LegendStudioPluginManager;
-  }) => {
-    const { config, pluginManager } = props;
-    const applicationStore = useApplicationStore();
+  (props: { config: LegendStudioApplicationConfig }) => {
+    const { config } = props;
 
     return (
       <SDLCServerClientProvider
@@ -232,16 +240,11 @@ export const LegendStudioApplication = observer(
             serverUrl: config.depotServerUrl,
           }}
         >
-          <GraphManagerStateProvider
-            pluginManager={pluginManager}
-            logService={applicationStore.logService}
-          >
-            <LegendStudioBaseStoreProvider>
-              <LegendApplicationComponentFrameworkProvider>
-                <LegendStudioApplicationRoot />
-              </LegendApplicationComponentFrameworkProvider>
-            </LegendStudioBaseStoreProvider>
-          </GraphManagerStateProvider>
+          <LegendStudioBaseStoreProvider>
+            <LegendApplicationComponentFrameworkProvider>
+              <LegendStudioApplicationRoot />
+            </LegendApplicationComponentFrameworkProvider>
+          </LegendStudioBaseStoreProvider>
         </DepotServerClientProvider>
       </SDLCServerClientProvider>
     );

package/src/components/editor/ActivityBar.tsx

@@ -35,12 +35,13 @@ import {
   MenuIcon,
   MenuContentDivider,
   FlaskIcon,
+  RobotIcon,
 } from '@finos/legend-art';
 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(
@@ -318,6 +319,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/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

@@ -21,7 +21,6 @@ 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

@@ -30,11 +30,15 @@ import {
   WarningIcon,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
-import { ACTIVITY_MODE, AUX_PANEL_MODE } from '../../stores/EditorConfig.js';
+import {
+  ACTIVITY_MODE,
+  AUX_PANEL_MODE,
+  GRAPH_EDITOR_MODE,
+} from '../../stores/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/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

@@ -26,20 +26,14 @@ import {
 import { useEditorStore } from '../EditorStoreProvider.js';
 import type { Problem } from '../../../stores/EditorGraphState.js';
 import { CompilationWarning, EngineError } from '@finos/legend-graph';
+import { GRAPH_EDITOR_MODE } from '../../../stores/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/FileGenerationViewer.tsx

@@ -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

@@ -105,7 +105,7 @@ import {
   rawVariableExpression_setName,
   rawVariableExpression_setType,
 } from '../../../stores/shared/modifier/RawValueSpecificationGraphModifierHelper.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.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';
@@ -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

@@ -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

@@ -73,7 +73,7 @@ import {
   PURE_PARSER,
 } from '@finos/legend-graph';
 import type { EditorStore } from '../../../stores/EditorStore.js';
-import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../stores/LegendStudioDocumentation.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';
+} from '../../../stores/Core_CodeSnippets.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 { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../application/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';
+import { LEGEND_STUDIO_SETTING_KEY } from '../../../application/LegendStudioSetting.js';
+import { GraphEditGrammarModeState } from '../../../stores/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

@@ -45,7 +45,7 @@ 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 { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../application/LegendStudioApplicationNavigationContext.js';
 import { SCHEMA_SET_TAB_TYPE } from '../../../stores/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

@@ -110,7 +110,7 @@ import {
   runtime_addIdentifiedConnection,
   runtime_deleteIdentifiedConnection,
 } from '../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.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/connection-editor/ConnectionEditor.tsx

@@ -38,7 +38,7 @@ import {
   getPackageableElementOptionFormatter,
   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';
 
 const ModelConnectionEditor = observer(
   (props: {

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

@@ -55,7 +55,7 @@ import {
   renderColumnTypeIcon,
 } from './DatabaseEditorHelper.js';
 import { flowResult } from 'mobx';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
 
 const getNodeIcon = (node: DatabaseBuilderTreeNodeData): React.ReactNode => {
   if (node instanceof SchemaDatabaseBuilderTreeNodeData) {

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

@@ -77,7 +77,7 @@ import {
   useApplicationNavigationContext,
   useApplicationStore,
 } 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';
 
 export const ExternalFormatDataEditor = observer(
   (props: {

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

@@ -168,7 +168,7 @@ export const DataElementReferenceDataEditor = observer(
       }
     };
     const visitData = (): void =>
-      editorStore.tabManagerState.openElementEditor(dataElement);
+      editorStore.graphEditorMode.openElement(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.tabManagerState.openElementEditor(diffEditorState.element);
+        editorStore.graphEditorMode.openElement(diffEditorState.element);
       }
     };
 

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

@@ -91,7 +91,6 @@ const SchemaLoader = observer(
             />
             <div>
               <input
-                id="upload-file"
                 type="file"
                 name="myFiles"
                 onChange={onChange}

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

@@ -68,7 +68,7 @@ import {
   useApplicationNavigationContext,
   useApplicationStore,
 } 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 type { MappingEditorTabState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingTabManagerState.js';
 
 export const MappingEditorSplashScreen: React.FC = () => {