@finos/legend-application-studio 22.6.0 → 23.0.0

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

@@ -53,7 +53,7 @@ import {
 } from '@finos/legend-application';
 import { ProjectDependencyEditor } from './ProjectDependencyEditor.js';
 import type { ProjectData } from '@finos/legend-server-depot';
-import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../stores/LegendStudioDocumentation.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../application/LegendStudioDocumentation.js';
 
 const ProjectStructureEditor = observer(
   (props: { projectConfig: ProjectConfiguration; isReadOnly: boolean }) => {
@@ -138,7 +138,7 @@ const ProjectStructureEditor = observer(
               pipeline and published to an artifact repository
             </div>
             <PanelListItem>
-              <div className="input-group">
+              <div className="input-group project-configuration-editor__input">
                 <input
                   className={clsx(
                     'input input--dark input-group__input panel__content__form__section__input input--full',
@@ -172,7 +172,7 @@ const ProjectStructureEditor = observer(
               published to an artifact repository
             </div>
             <PanelListItem>
-              <div className="input-group">
+              <div className="input-group project-configuration-editor__input">
                 <input
                   className={clsx(
                     'input input--dark input-group__input panel__content__form__section__input input--full',

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

@@ -79,12 +79,12 @@ import {
   ProjectDependencyTreeNodeData,
   type ProjectDependencyEditorState,
 } from '../../../../stores/editor-state/project-configuration-editor-state/ProjectDependencyEditorState.js';
-import { LEGEND_STUDIO_APP_EVENT } from '../../../../stores/LegendStudioAppEvent.js';
+import { LEGEND_STUDIO_APP_EVENT } from '../../../../application/LegendStudioEvent.js';
 import {
   generateViewProjectByGAVRoute,
   generateViewProjectRoute,
   generateViewVersionRoute,
-} from '../../../../stores/LegendStudioRouter.js';
+} from '../../../../application/LegendStudioNavigation.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 

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

@@ -53,7 +53,7 @@ import {
   useApplicationStore,
 } from '@finos/legend-application';
 import { validate_ServicePattern } from '@finos/legend-graph';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
 import { ServiceTestableEditor } from './testable/ServiceTestableEditor.js';
 import { flowResult } from 'mobx';
 
@@ -400,7 +400,7 @@ const ServiceGeneralEditor = observer(() => {
                     disabled={isReadOnly}
                     darkMode={
                       !applicationStore.layoutService
-                        .TEMPORARY__isLightThemeEnabled
+                        .TEMPORARY__isLightColorThemeEnabled
                     }
                     onInputChange={onSearchTextChange}
                     onChange={onUserOptionChange}

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

@@ -120,7 +120,7 @@ const PureExecutionContextConfigurationEditor = observer(
       }
     };
     const visitMapping = (): void =>
-      editorStore.tabManagerState.openElementEditor(mapping);
+      editorStore.graphEditorMode.openElement(mapping);
     // runtime
     const runtime = executionContext.runtime;
     const isRuntimePointer = runtime instanceof RuntimePointer;
@@ -201,7 +201,7 @@ const PureExecutionContextConfigurationEditor = observer(
     };
     const visitRuntime = (): void => {
       if (runtime instanceof RuntimePointer) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           runtime.packageableRuntime.value,
         );
       }

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

@@ -71,7 +71,6 @@ import { useLegendStudioApplicationStore } from '../../../LegendStudioBaseStoreP
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { SNAPSHOT_VERSION_ALIAS } from '@finos/legend-server-depot';
 import type { ProjectGAVCoordinates } from '@finos/legend-storage';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
 
 const ServiceExecutionResultViewer = observer(
   (props: { executionState: ServicePureExecutionState }) => {
@@ -341,8 +340,6 @@ export const ServiceExecutionQueryEditor = observer(
                 disableCompile: isStubbed_RawLambda(
                   executionState.queryState.query,
                 ),
-                applicationContext:
-                  LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MAPPING_TEST_EDITOR,
               }),
             );
             executionState.setOpeningQueryEditor(false);

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestableEditor.tsx

@@ -40,7 +40,7 @@ import type {
   ServiceTestSuiteState,
 } from '../../../../../stores/editor-state/element-editor-state/service/testable/ServiceTestableState.js';
 import { useApplicationNavigationContext } from '@finos/legend-application';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../../application/LegendStudioApplicationNavigationContext.js';
 
 export const ServiceTestSuiteEditor = observer(
   (props: { serviceTestSuiteState: ServiceTestSuiteState }) => {

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

@@ -95,7 +95,7 @@ import {
   type PackageableElementOption,
   LEGEND_APPLICATION_DOCUMENTATION_KEY,
 } from '@finos/legend-application';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
 
 const AssociationPropertyBasicEditor = observer(
   (props: {
@@ -205,7 +205,7 @@ const AssociationPropertyBasicEditor = observer(
     // Other
     const openElement = (): void => {
       if (!(propertyType instanceof PrimitiveType)) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           propertyType instanceof Unit ? propertyType.measure : propertyType,
         );
       }

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

@@ -131,7 +131,7 @@ import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
 } from '../../../../stores/shared/ModelClassifierUtils.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';
 
 type ClassPropertyDragSource = {
@@ -272,7 +272,7 @@ const PropertyBasicEditor = observer(
     // Other
     const openElement = (): void => {
       if (!(propertyType instanceof PrimitiveType)) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           propertyType instanceof Unit ? propertyType.measure : propertyType,
         );
       }
@@ -280,7 +280,7 @@ const PropertyBasicEditor = observer(
     // NOTE: for now we do not allow directly modifying inherited and associated properties,
     // we would make the user go to the supertype or the association where the property comes from
     const visitOwner = (): void =>
-      editorStore.tabManagerState.openElementEditor(property._OWNER);
+      editorStore.graphEditorMode.openElement(property._OWNER);
 
     return (
       <div ref={ref} className="property-basic-editor__container">
@@ -629,13 +629,13 @@ const DerivedPropertyBasicEditor = observer(
       );
     const openElement = (): void => {
       if (!(propertyType instanceof PrimitiveType)) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           propertyType instanceof Unit ? propertyType.measure : propertyType,
         );
       }
     };
     const visitOwner = (): void =>
-      editorStore.tabManagerState.openElementEditor(derivedProperty._OWNER);
+      editorStore.graphEditorMode.openElement(derivedProperty._OWNER);
     const remove = applicationStore.guardUnhandledError(async () => {
       await flowResult(dpState.convertLambdaObjectToGrammarString(false));
       deleteDerivedProperty();
@@ -919,7 +919,7 @@ const ConstraintEditor = observer(
       deleteConstraint();
     });
     const visitOwner = (): void =>
-      editorStore.tabManagerState.openElementEditor(constraint._OWNER);
+      editorStore.graphEditorMode.openElement(constraint._OWNER);
 
     return (
       <div ref={ref} className="constraint-editor__container">
@@ -1075,7 +1075,7 @@ const SuperTypeEditor = observer(
     const changeType = (val: PackageableElementOption<Class>): void =>
       setGenericTypeReferenceValue(superType, new GenericType(val.value));
     const visitDerivationSource = (): void =>
-      editorStore.tabManagerState.openElementEditor(rawType);
+      editorStore.graphEditorMode.openElement(rawType);
 
     return (
       <div ref={ref} className="super-type-editor__container">
@@ -1674,7 +1674,7 @@ export const ClassFormEditor = observer(
       : undefined;
     const visitGenerationParentElement = (): void => {
       if (generationParentElement) {
-        editorStore.tabManagerState.openElementEditor(generationParentElement);
+        editorStore.graphEditorMode.openElement(generationParentElement);
       }
     };
 

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

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

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

@@ -84,7 +84,7 @@ import {
   enum_swapValues,
 } from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import { useApplicationNavigationContext } from '@finos/legend-application';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
 
 type EnumValueDragSource = {
   enumValue: Enum;
@@ -534,7 +534,7 @@ export const EnumerationEditor = observer(
       : undefined;
     const visitGenerationParentElement = (): void => {
       if (generationParentElement) {
-        editorStore.tabManagerState.openElementEditor(generationParentElement);
+        editorStore.graphEditorMode.openElement(generationParentElement);
       }
     };
 

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

@@ -52,7 +52,7 @@ import {
   profile_swapStereotypes,
 } from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import { useApplicationNavigationContext } from '@finos/legend-application';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
 import { useRef, useCallback } from 'react';
 import { useDrop, useDrag } from 'react-dnd';
 

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

@@ -107,7 +107,7 @@ export const StereotypeSelector = observer(
       }
     };
     const visitProfile = (): void =>
-      editorStore.tabManagerState.openElementEditor(selectedProfile.value);
+      editorStore.graphEditorMode.openElement(selectedProfile.value);
     // Stereotype
     const stereotypeOptions = selectedProfile.value.p_stereotypes.map((st) => ({
       label: st.value,

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

@@ -113,7 +113,7 @@ export const TaggedValueEditor = observer(
       }
     };
     const visitProfile = (): void =>
-      editorStore.tabManagerState.openElementEditor(selectedProfile.value);
+      editorStore.graphEditorMode.openElement(selectedProfile.value);
     // Tag
     const tagOptions = selectedProfile.value.p_tags.map((tag) => ({
       label: tag.value,

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

@@ -296,6 +296,10 @@ const NewConnectionDriverEditor = observer(() => {
   let storeOptions: { label: string; value?: Store | undefined }[] = [
     { label: 'ModelStore', value: undefined },
   ];
+  // TODO: we should think more about this and filter the store by the connection type
+  // or think about a way to completely revamp this workflow, maybe to let people select
+  // the store first and then the type of the connection
+  // See
   storeOptions = storeOptions.concat(
     editorStore.graphManagerState.usableStores
       .map(buildElementOption)

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

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

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

@@ -52,6 +52,7 @@ import { useEffect } from 'react';
 import { EntityChangeConflictEditorState } from '../../../stores/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.js';
 import { EntityChangeConflictSideBarItem } from '../edit-panel/diff-editor/EntityChangeConflictEditor.js';
 import { FormLocalChangesState } from '../../../stores/sidebar-state/LocalChangesState.js';
+import { GRAPH_EDITOR_MODE } from '../../../stores/EditorConfig.js';
 
 const PatchLoader = observer(() => {
   const editorStore = useEditorStore();
@@ -76,12 +77,7 @@ const PatchLoader = observer(() => {
         <ModalBody>
           <PanelLoadingIndicator isLoading={patchState.isLoadingChanges} />
           <div>
-            <input
-              id="upload-file"
-              type="file"
-              name="myFiles"
-              onChange={onChange}
-            />
+            <input type="file" name="myFiles" onChange={onChange} />
           </div>
           {Boolean(patchState.overiddingChanges.length) && (
             <div className="panel__content__form__section">
@@ -143,7 +139,7 @@ export const LocalChanges = observer(() => {
     localChangesState.downloadLocalChanges();
   const uploadPatchChanges = (): void =>
     localChangesState.patchLoaderState.openModal(
-      editorStore.graphState.computeLocalEntityChanges(),
+      editorStore.localChangesState.computeLocalEntityChanges(),
     );
   const pushLocalChanges = applicationStore.guardUnhandledError(() =>
     flowResult(localChangesState.pushLocalChanges()),
@@ -244,7 +240,7 @@ export const LocalChanges = observer(() => {
               isDispatchingAction ||
               editorStore.workspaceUpdaterState.isUpdatingWorkspace ||
               !editorStore.changeDetectionState.initState.hasSucceeded ||
-              !editorStore.isInFormMode
+              editorStore.graphEditorMode.mode !== GRAPH_EDITOR_MODE.FORM
             }
             tabIndex={-1}
             title="Upload local entity changes"

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

@@ -46,7 +46,7 @@ import {
   generateDependencyDashboardRoute,
   generateViewProjectByGAVRoute,
   generateViewVersionRoute,
-} from '../../../stores/LegendStudioRouter.js';
+} from '../../../application/LegendStudioNavigation.js';
 
 const ProjectDependantEditor = observer(
   (props: { dependant: ProjectVersionPlatformDependency }) => {

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

@@ -44,7 +44,7 @@ import {
   generateViewProjectRoute,
   generateViewVersionRoute,
   generateReviewRoute,
-} from '../../../stores/LegendStudioRouter.js';
+} from '../../../application/LegendStudioNavigation.js';
 import { flowResult } from 'mobx';
 import {
   type Workspace,

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

@@ -30,7 +30,7 @@ import {
   PanelContent,
 } from '@finos/legend-art';
 import { ACTIVITY_MODE } from '../../../stores/EditorConfig.js';
-import { generateReviewRoute } from '../../../stores/LegendStudioRouter.js';
+import { generateReviewRoute } from '../../../application/LegendStudioNavigation.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
 import { flowResult } from 'mobx';
 import type { EntityDiff } from '@finos/legend-server-sdlc';

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

@@ -32,7 +32,7 @@ import {
 } from '@finos/legend-art';
 import { EntityChangeConflictSideBarItem } from '../../editor/edit-panel/diff-editor/EntityChangeConflictEditor.js';
 import { EntityChangeConflictEditorState } from '../../../stores/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.js';
-import { generateReviewRoute } from '../../../stores/LegendStudioRouter.js';
+import { generateReviewRoute } from '../../../application/LegendStudioNavigation.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
 import { flowResult } from 'mobx';
 import type {

package/src/components/project-viewer/ProjectViewer.tsx

@@ -19,7 +19,7 @@ import { observer } from 'mobx-react-lite';
 import { EditPanel } from '../editor/edit-panel/EditPanel.js';
 import { GrammarTextEditor } from '../editor/edit-panel/GrammarTextEditor.js';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
-import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
+import { ACTIVITY_MODE, GRAPH_EDITOR_MODE } from '../../stores/EditorConfig.js';
 import {
   type ResizablePanelHandlerProps,
   clsx,
@@ -43,7 +43,7 @@ import {
 import {
   type ViewerPathParams,
   generateSetupRoute,
-} from '../../stores/LegendStudioRouter.js';
+} from '../../application/LegendStudioNavigation.js';
 import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
 import { flowResult } from 'mobx';
 import {
@@ -143,7 +143,8 @@ const ProjectViewerStatusBar = observer(() => {
             'editor__status-bar__action editor__status-bar__action__toggler',
             {
               'editor__status-bar__action__toggler--active':
-                editorStore.isInGrammarTextMode,
+                editorStore.graphEditorMode.mode ===
+                GRAPH_EDITOR_MODE.GRAMMAR_TEXT,
             },
           )}
           onClick={handleTextModeClick}
@@ -329,8 +330,10 @@ export const ProjectViewer = withEditorStore(
                       {...sideBarCollapsiblePanelGroupProps.remainingPanel}
                       minSize={300}
                     >
-                      {editorStore.isInFormMode && <EditPanel />}
-                      {editorStore.isInGrammarTextMode && <GrammarTextEditor />}
+                      {editorStore.graphEditorMode.mode ===
+                        GRAPH_EDITOR_MODE.FORM && <EditPanel />}
+                      {editorStore.graphEditorMode.mode ===
+                        GRAPH_EDITOR_MODE.GRAMMAR_TEXT && <GrammarTextEditor />}
                     </ResizablePanel>
                   </ResizablePanelGroup>
                 </div>

package/src/components/shared/ProjectSelectorUtils.tsx

@@ -22,7 +22,7 @@ import {
 } from '@finos/legend-art';
 import type { Project } from '@finos/legend-server-sdlc';
 import type { LegendStudioApplicationStore } from '../../stores/LegendStudioBaseStore.js';
-import { generateViewProjectRoute } from '../../stores/LegendStudioRouter.js';
+import { generateViewProjectRoute } from '../../application/LegendStudioNavigation.js';
 import type { ProjectConfigurationStatus } from '../../stores/workspace-setup/ProjectConfigurationStatus.js';
 
 export interface ProjectOption {

package/src/components/workspace-review/WorkspaceReview.tsx

@@ -40,7 +40,7 @@ import {
 import {
   type ReviewPathParams,
   generateSetupRoute,
-} from '../../stores/LegendStudioRouter.js';
+} from '../../application/LegendStudioNavigation.js';
 import { flowResult } from 'mobx';
 import {
   useEditorStore,

package/src/components/workspace-setup/CreateProjectModal.tsx

@@ -38,8 +38,8 @@ import {
   DocumentationLink,
   useConditionedApplicationNavigationContext,
 } from '@finos/legend-application';
-import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../stores/LegendStudioDocumentation.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../application/LegendStudioDocumentation.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../application/LegendStudioApplicationNavigationContext.js';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
 import { useWorkspaceSetupStore } from './WorkspaceSetup.js';
 

package/src/components/workspace-setup/CreateWorkspaceModal.tsx

@@ -32,7 +32,7 @@ import {
   useApplicationStore,
   DocumentationLink,
 } from '@finos/legend-application';
-import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../stores/LegendStudioDocumentation.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../application/LegendStudioDocumentation.js';
 import { useWorkspaceSetupStore } from './WorkspaceSetup.js';
 
 export const CreateWorkspaceModal = observer(

package/src/components/workspace-setup/WorkspaceSetup.tsx

@@ -30,18 +30,18 @@ import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
 import {
   type SetupPathParams,
   generateEditorRoute,
-  LEGEND_STUDIO_PATH_PARAM_TOKEN,
-} from '../../stores/LegendStudioRouter.js';
+  LEGEND_STUDIO_ROUTE_PATTERN_TOKEN,
+} from '../../application/LegendStudioNavigation.js';
 import { flowResult } from 'mobx';
 import {
   DocumentationLink,
   useApplicationNavigationContext,
   useParams,
 } from '@finos/legend-application';
-import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../stores/LegendStudioDocumentation.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../application/LegendStudioDocumentation.js';
 import { CreateProjectModal } from './CreateProjectModal.js';
 import { ActivityBarMenu } from '../editor/ActivityBar.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../application/LegendStudioApplicationNavigationContext.js';
 import { CreateWorkspaceModal } from './CreateWorkspaceModal.js';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
 import {
@@ -95,10 +95,10 @@ const withWorkspaceSetupStore = (WrappedComponent: React.FC): React.FC =>
 export const WorkspaceSetup = withWorkspaceSetupStore(
   observer(() => {
     const params = useParams<SetupPathParams>();
-    const projectId = params[LEGEND_STUDIO_PATH_PARAM_TOKEN.PROJECT_ID];
-    const workspaceId = params[LEGEND_STUDIO_PATH_PARAM_TOKEN.WORKSPACE_ID];
+    const projectId = params[LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.PROJECT_ID];
+    const workspaceId = params[LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.WORKSPACE_ID];
     const groupWorkspaceId =
-      params[LEGEND_STUDIO_PATH_PARAM_TOKEN.GROUP_WORKSPACE_ID];
+      params[LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.GROUP_WORKSPACE_ID];
     const setupStore = useWorkspaceSetupStore();
     const applicationStore = useLegendStudioApplicationStore();
     const [projectSearchText, setProjectSearchText] = useState('');

package/src/index.ts

@@ -15,13 +15,16 @@
  */
 
 // application
-export * from './components/LegendStudioBaseStoreProvider.js';
-export * from './stores/LegendStudioBaseStore.js';
 export * from './application/LegendStudio.js';
 export * from './application/LegendStudioApplicationConfig.js';
 export * from './application/LegendStudioPluginManager.js';
-export * from './stores/LegendStudioAppEvent.js';
-export { queryClass } from './components/editor/edit-panel/uml-editor/ClassQueryBuilder.js';
+export * from './application/LegendStudioEvent.js';
+export {
+  generateEditorRoute,
+  generateReviewRoute,
+} from './application/LegendStudioNavigation.js';
+export { useLegendStudioApplicationStore } from './components/LegendStudioBaseStoreProvider.js';
+export type { LegendStudioApplicationStore } from './stores/LegendStudioBaseStore.js';
 
 // stores
 export * from './stores/LegendStudioApplicationPlugin.js';
@@ -55,8 +58,8 @@ export * from './stores/shared/modifier/DSL_Generation_GraphModifierHelper.js';
 export * from './stores/shared/modifier/DSL_Service_GraphModifierHelper.js';
 
 // components
+export { queryClass } from './components/editor/edit-panel/uml-editor/ClassQueryBuilder.js';
 export * from './components/editor/EditorStoreProvider.js';
-export * from './stores/LegendStudioRouter.js';
 export { ActivityBarMenu } from './components/editor/ActivityBar.js';
 export * from './components/shared/ProjectSelectorUtils.js';
 export * from './components/shared/WorkspaceSelectorUtils.js';
@@ -93,6 +96,7 @@ export { getElementIcon } from './components/shared/ElementIconUtils.js';
  */
 
 export * from './stores/DSL_Generation_LegendStudioApplicationPlugin_Extension.js';
+export * from './stores/STO_ProjectOverview_LegendStudioApplicationPlugin_Extension.js';
 export * from './stores/STO_Relational_LegendStudioApplicationPlugin_Extension.js';
 
 export { MINIMUM_SERVICE_OWNERS } from './stores/editor-state/element-editor-state/service/ServiceEditorState.js';