@finos/legend-application-studio 22.6.0 → 23.0.0

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

@@ -41,7 +41,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 +251,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 +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 = () => {

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

@@ -90,7 +90,6 @@ import {
 } from '../../../../stores/shared/modifier/STO_Relational_GraphModifierHelper.js';
 import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 import type { QueryBuilderState } from '@finos/legend-query-builder';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
 
 interface ClassMappingSelectOption {
   label: string;
@@ -193,9 +192,9 @@ const MappingExecutionQueryEditor = observer(
           embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
             setupQueryBuilderState: (): QueryBuilderState => {
               const queryBuilderState = new MappingExecutionQueryBuilderState(
-                executionState.mappingEditorState.mapping,
                 embeddedQueryBuilderState.editorStore.applicationStore,
                 embeddedQueryBuilderState.editorStore.graphManagerState,
+                executionState.mappingEditorState.mapping,
               );
               queryBuilderState.initializeWithQuery(
                 executionState.queryState.query,
@@ -244,8 +243,6 @@ const MappingExecutionQueryEditor = observer(
             disableCompile: isStubbed_RawLambda(
               executionState.queryState.query,
             ),
-            applicationContext:
-              LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MAPPING_EXECUTION_EDITOR,
           }),
         );
       },

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

@@ -69,12 +69,13 @@ const MappingExecutionQueryBuilderSetupPanelContent = observer(
                 options={[]}
                 value={selectedMappingOption}
                 darkMode={
-                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
                 }
                 formatOptionLabel={getPackageableElementOptionFormatter({
                   darkMode:
                     !applicationStore.layoutService
-                      .TEMPORARY__isLightThemeEnabled,
+                      .TEMPORARY__isLightColorThemeEnabled,
                   graph: editorStore.graphManagerState.graph,
                 })}
               />

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

@@ -465,7 +465,7 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
     : undefined;
   const visitGenerationParentElement = (): void => {
     if (generationParentElement) {
-      editorStore.tabManagerState.openElementEditor(generationParentElement);
+      editorStore.graphEditorMode.openElement(generationParentElement);
     }
   };
   // explorer tree data

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

@@ -96,7 +96,6 @@ import {
   QueryBuilderTextEditorMode,
 } from '@finos/legend-query-builder';
 import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
 
 const MappingTestQueryEditor = observer(
   (props: { testState: MappingTestState; isReadOnly: boolean }) => {
@@ -113,9 +112,9 @@ const MappingTestQueryEditor = observer(
           embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
             setupQueryBuilderState: (): QueryBuilderState => {
               const queryBuilderState = new MappingExecutionQueryBuilderState(
-                testState.mappingEditorState.mapping,
                 embeddedQueryBuilderState.editorStore.applicationStore,
                 embeddedQueryBuilderState.editorStore.graphManagerState,
+                testState.mappingEditorState.mapping,
               );
               queryBuilderState.initializeWithQuery(testState.queryState.query);
               if (openInTextMode) {
@@ -166,8 +165,6 @@ const MappingTestQueryEditor = observer(
               },
             ],
             disableCompile: isStubbed_RawLambda(testState.queryState.query),
-            applicationContext:
-              LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MAPPING_TEST_EDITOR,
           }),
         );
       });

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

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

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

@@ -193,7 +193,7 @@ export const PropertyMappingEditor = observer(
             const parent = rootMappingElement._PARENT;
             if (parent !== mappingEditorState.element) {
               // TODO: think more about this flow. Right now we open the mapping element in the parent mapping
-              editorStore.tabManagerState.openElementEditor(parent);
+              editorStore.graphEditorMode.openElement(parent);
               editorStore.tabManagerState
                 .getCurrentEditorState(MappingEditorState)
                 .openMappingElement(rootMappingElement, false);