@finos/legend-application-studio 18.0.1 → 18.1.0

package/src/components/LegendStudioApplication.tsx

@@ -15,7 +15,6 @@
  */
 
 import { useEffect } from 'react';
-import { Switch, Route } from 'react-router';
 import { WorkspaceSetup } from './workspace-setup/WorkspaceSetup.js';
 import { Editor } from './editor/Editor.js';
 import { WorkspaceReview } from './workspace-review/WorkspaceReview.js';
@@ -41,6 +40,8 @@ import { GraphManagerStateProvider } from '@finos/legend-graph';
 import {
   generateExtensionUrlPattern,
   LegendApplicationComponentFrameworkProvider,
+  Route,
+  Switch,
   useApplicationStore,
   VirtualAssistant,
 } from '@finos/legend-application';
@@ -50,7 +51,7 @@ import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../stores/LegendStudioDocumenta
 const LegendStudioNotFoundRouteScreen = observer(() => {
   const applicationStore = useApplicationStore();
 
-  const currentPath = applicationStore.navigator.getCurrentLocationPath();
+  const currentPath = applicationStore.navigator.getCurrentLocation();
 
   const documentation = applicationStore.documentationService.getDocEntry(
     LEGEND_STUDIO_DOCUMENTATION_KEY.NOT_FOUND_HELP,
@@ -86,7 +87,7 @@ const LegendStudioNotFoundRouteScreen = observer(() => {
           <div className="not-found-screen__text-content__detail">
             The requested URL
             <span className="not-found-screen__text-content__detail__url">
-              {applicationStore.navigator.generateLocation(currentPath)}
+              {applicationStore.navigator.generateAddress(currentPath)}
             </span>
             was not found in the application
           </div>

package/src/components/editor/ActivityBar.tsx

@@ -87,15 +87,13 @@ export const ActivityBarMenu: React.FC = () => {
   // documentation
   const goToDocumentation = (): void => {
     if (appDocUrl) {
-      applicationStore.navigator.openNewWindow(appDocUrl);
+      applicationStore.navigator.visitAddress(appDocUrl);
     }
   };
   // go to setup page
-  const goToSetupPage = (): void =>
-    applicationStore.navigator.openNewWindow(
-      applicationStore.navigator.generateLocation(
-        generateSetupRoute(undefined),
-      ),
+  const goToWorkspaceSetup = (): void =>
+    applicationStore.navigator.visitAddress(
+      applicationStore.navigator.generateAddress(generateSetupRoute(undefined)),
     );
   // help
   const openHelp = (): void => {
@@ -142,9 +140,9 @@ export const ActivityBarMenu: React.FC = () => {
             <MenuContentDivider />
             <MenuContentItem
               className="app__header__menu__item"
-              onClick={goToSetupPage}
+              onClick={goToWorkspaceSetup}
             >
-              Back to Setup
+              Back to workspace setup
             </MenuContentItem>
           </MenuContent>
         }

package/src/components/editor/Editor.tsx

@@ -14,20 +14,17 @@
  * limitations under the License.
  */
 
-import { Fragment, useState, useEffect, useCallback } from 'react';
+import { Fragment, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import { useResizeDetector } from 'react-resize-detector';
-import type { Location } from 'history';
 import {
   type ResizablePanelHandlerProps,
-  Backdrop,
   buildReactHotkeysConfiguration,
   getControlledResizablePanelProps,
   ResizablePanel,
   ResizablePanelGroup,
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
-  useStateWithCallback,
+  useResizeDetector,
 } from '@finos/legend-art';
 import { AuxiliaryPanel } from './aux-panel/AuxiliaryPanel.js';
 import { SideBar } from './side-bar/SideBar.js';
@@ -36,7 +33,6 @@ import { GlobalHotKeys } from 'react-hotkeys';
 import { GrammarTextEditor } from './edit-panel/GrammarTextEditor.js';
 import { StatusBar } from './StatusBar.js';
 import { ActivityBar } from './ActivityBar.js';
-import { useParams, Prompt } from 'react-router';
 import type {
   EditorPathParams,
   GroupEditorPathParams,
@@ -46,10 +42,9 @@ import { isNonNullable } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { useEditorStore, withEditorStore } from './EditorStoreProvider.js';
 import {
-  ActionAlertType,
-  ActionAlertActionType,
   useApplicationStore,
   useApplicationNavigationContext,
+  useParams,
 } from '@finos/legend-application';
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { WorkspaceSyncConflictResolver } from './side-bar/WorkspaceSyncConflictResolver.js';
@@ -120,111 +115,85 @@ export const Editor = withEditorStore(
       ).catch(applicationStore.alertUnhandledError);
     }, [editorStore, applicationStore, projectId, workspaceId, workspaceType]);
 
-    // Browser Navigation Blocking (reload, close tab, go to another URL)
-    // NOTE: there is no way to customize the alert message for now since Chrome removed support for it
-    // See https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility
-    // There is also no way to customize this modal style-wise so we would only be able to do so for route navigation blocking
-    // See https://medium.com/@jozollo/blocking-navigation-with-react-router-v4-a3f2e359d096
     useEffect(() => {
-      const onUnload = (event: BeforeUnloadEvent): void => {
-        /**
-         * NOTE: one subtle trick here. Since we have to use `useEffect` to set the event listener for `beforeunload` event,
-         * we have to be be careful, if we extract `editorStore.ignoreNavigationBlock` out to a variable such as `ignoreNavigationBlock`
-         * and then make this `useEffect` be called in response to that, there is a chance that if we set `editorStore.ignoreNavigationBlock`
-         * to `true` and then go on to call systematic refresh (i.e. `window.location.reload()`) immediately, the event listener on window will
-         * become stale and still show the blocking popup.
-         *
-         * This is almost guaranteed to happen as `useEffect` occurs after rendering, and thus will defnitely be called after the immediate
-         * `window.location.reload()`. As such, the best way is instead of expecting `useEffect` to watch out for the change in `ignoreNavigationBlock`
-         * we will access the value of `ignoreNavigationBlock` in the body of the `onUnload` function to make it more dynamic. This ensures the
-         * event listener will never go stale
-         */
-        const showAlert =
+      applicationStore.navigator.blockPlatformNavigation([
+        (): boolean =>
           editorStore.isInConflictResolutionMode ||
-          editorStore.hasUnpushedChanges;
-        if (!editorStore.ignoreNavigationBlocking && showAlert) {
-          event.returnValue = '';
-        }
+          editorStore.localChangesState.hasUnpushedChanges,
+      ]);
+      return (): void => {
+        applicationStore.navigator.unblockPlatformNavigation();
       };
-      window.removeEventListener('beforeunload', onUnload);
-      window.addEventListener('beforeunload', onUnload);
-      return (): void => window.removeEventListener('beforeunload', onUnload);
-    }, [editorStore]);
+    }, [editorStore, applicationStore]);
 
     // Route Navigation Blocking
     // See https://medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39
-    const [blockedLocation, setBlockedLocation] = useState<
-      Location | undefined
-    >();
-    const retryBlockedLocation = useCallback(
-      (allowedNavigation: boolean): void => {
-        if (allowedNavigation && blockedLocation) {
-          applicationStore.navigator.goTo(blockedLocation.pathname);
-        }
-      },
-      [blockedLocation, applicationStore],
-    );
-    // NOTE: we have to use `useStateWithCallback` here because we want to guarantee that we call `history.push(blockedLocation.pathname)`
-    // after confirmedAllowNavigation is flipped, otherwise we would end up in the `false` case of handleBlockedNavigation again!
-    // Another way to go about this is to use `setTimeout(() => history.push(...), 0)` but it can potentially be more error-prone
-    // See https://www.robinwieruch.de/react-usestate-callback
-    const [confirmedAllowNavigation, setConfirmedAllowNavigation] =
-      useStateWithCallback<boolean>(false, retryBlockedLocation);
-    const onNavigationChangeIndicator = Boolean(
-      editorStore.changeDetectionState.workspaceLocalLatestRevisionState.changes
-        .length,
-    );
-    const handleRouteNavigationBlocking = (nextLocation: Location): boolean => {
-      // NOTE: as long as we're in conflict resolution, we want this block to be present
-      const showAlert =
-        editorStore.isInConflictResolutionMode ||
-        editorStore.hasUnpushedChanges;
-      if (
-        !editorStore.ignoreNavigationBlocking &&
-        !confirmedAllowNavigation &&
-        showAlert
-      ) {
-        editorStore.setActionAlertInfo({
-          message: editorStore.isInConflictResolutionMode
-            ? 'You have not accepted the conflict resolution, the current resolution will be discarded. Leave anyway?'
-            : 'You have unpushed changes. Leave anyway?',
-          type: ActionAlertType.CAUTION,
-          onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
-          onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
-          actions: [
-            {
-              label: 'Leave this page',
-              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-              handler: (): void => setConfirmedAllowNavigation(true),
-            },
-            {
-              label: 'Stay on this page',
-              type: ActionAlertActionType.PROCEED,
-              default: true,
-              handler: (): void => setBlockedLocation(undefined),
-            },
-          ],
-        });
-        setBlockedLocation(nextLocation);
-        return false;
-      }
-      // Reset the confirm flag and the blocked location here
-      setBlockedLocation(undefined);
-      setConfirmedAllowNavigation(false);
-      return true;
-    };
+    // const [blockedLocation, setBlockedLocation] = useState<
+    //   Location | undefined
+    // >();
+    // const retryBlockedLocation = useCallback(
+    //   (allowedNavigation: boolean): void => {
+    //     if (allowedNavigation && blockedLocation) {
+    //       applicationStore.navigator.goToLocation(blockedLocation.pathname);
+    //     }
+    //   },
+    //   [blockedLocation, applicationStore],
+    // );
+    // // NOTE: we have to use `useStateWithCallback` here because we want to guarantee that we call `history.push(blockedLocation.pathname)`
+    // // after confirmedAllowNavigation is flipped, otherwise we would end up in the `false` case of handleBlockedNavigation again!
+    // // Another way to go about this is to use `setTimeout(() => history.push(...), 0)` but it can potentially be more error-prone
+    // // See https://www.robinwieruch.de/react-usestate-callback
+    // const [confirmedAllowNavigation, setConfirmedAllowNavigation] =
+    //   useStateWithCallback<boolean>(false, retryBlockedLocation);
+    // const onNavigationChangeIndicator = Boolean(
+    //   editorStore.changeDetectionState.workspaceLocalLatestRevisionState.changes
+    //     .length,
+    // );
+    // const handleRouteNavigationBlocking = (nextLocation: Location): boolean => {
+    //   // NOTE: as long as we're in conflict resolution, we want this block to be present
+    //   const showAlert =
+    //     editorStore.isInConflictResolutionMode ||
+    //     editorStore.hasUnpushedChanges;
+    //   if (
+    //     !editorStore.ignoreNavigationBlocking &&
+    //     !confirmedAllowNavigation &&
+    //     showAlert
+    //   ) {
+    //     editorStore.setActionAlertInfo({
+    //       message: editorStore.isInConflictResolutionMode
+    //         ? 'You have not accepted the conflict resolution, the current resolution will be discarded. Leave anyway?'
+    //         : 'You have unpushed changes. Leave anyway?',
+    //       type: ActionAlertType.CAUTION,
+    //       onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
+    //       onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
+    //       actions: [
+    //         {
+    //           label: 'Leave this page',
+    //           type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+    //           handler: (): void => setConfirmedAllowNavigation(true),
+    //         },
+    //         {
+    //           label: 'Stay on this page',
+    //           type: ActionAlertActionType.PROCEED,
+    //           default: true,
+    //           handler: (): void => setBlockedLocation(undefined),
+    //         },
+    //       ],
+    //     });
+    //     setBlockedLocation(nextLocation);
+    //     return false;
+    //   }
+    //   // Reset the confirm flag and the blocked location here
+    //   setBlockedLocation(undefined);
+    //   setConfirmedAllowNavigation(false);
+    //   return true;
+    // };
     const editable =
       editorStore.graphManagerState.graphBuildState.hasCompleted &&
       editorStore.isInitialized;
     const isResolvingConflicts =
       editorStore.isInConflictResolutionMode &&
       !editorStore.conflictResolutionState.hasResolvedAllConflicts;
-    const promptComponent = (
-      <Prompt
-        when={onNavigationChangeIndicator}
-        message={handleRouteNavigationBlocking}
-      />
-    );
 
     useApplicationNavigationContext(
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EDITOR,
@@ -233,7 +202,6 @@ export const Editor = withEditorStore(
     return (
       <div className="app__page">
         <div className="editor">
-          {promptComponent}
           <GlobalHotKeys
             keyMap={hotkeyMapping}
             handlers={hotkeyHandlers}
@@ -241,7 +209,6 @@ export const Editor = withEditorStore(
           >
             <div className="editor__body">
               <ActivityBar />
-              <Backdrop className="backdrop" open={editorStore.backdrop} />
               <div ref={ref} className="editor__content-container">
                 <div className="editor__content">
                   <ResizablePanelGroup orientation="vertical">

package/src/components/editor/StatusBar.tsx

@@ -15,8 +15,6 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { useParams } from 'react-router';
-import { Link } from 'react-router-dom';
 import {
   clsx,
   HammerIcon,
@@ -40,6 +38,7 @@ import { flowResult } from 'mobx';
 import { useEditorStore } from './EditorStoreProvider.js';
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
+import { useParams } from '@finos/legend-application';
 
 export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
   const { actionsDisabled } = props;
@@ -151,19 +150,31 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
           <div className="editor__status-bar__workspace__icon">
             <CodeBranchIcon />
           </div>
-          <div className="editor__status-bar__workspace__project">
-            <Link to={generateSetupRoute(projectId)}>
-              {currentProject?.name ?? 'unknown'}
-            </Link>
-          </div>
+          <button
+            className="editor__status-bar__workspace__project"
+            title="Go back to workspace setup using the specified project"
+            tabIndex={-1}
+            onClick={(): void =>
+              applicationStore.navigator.goToLocation(
+                generateSetupRoute(projectId),
+              )
+            }
+          >
+            {currentProject?.name ?? 'unknown'}
+          </button>
           /
-          <div className="editor__status-bar__workspace__workspace">
-            <Link
-              to={generateSetupRoute(projectId, workspaceId, workspaceType)}
-            >
-              {workspaceId}
-            </Link>
-          </div>
+          <button
+            className="editor__status-bar__workspace__workspace"
+            title="Go back to workspace setup using the specified workspace"
+            tabIndex={-1}
+            onClick={(): void =>
+              applicationStore.navigator.goToLocation(
+                generateSetupRoute(projectId, workspaceId, workspaceType),
+              )
+            }
+          >
+            {workspaceId}
+          </button>
           {workspaceOutOfSync && (
             <button
               className="editor__status-bar__workspace__status"

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

@@ -106,7 +106,7 @@ export const AuxiliaryPanel = observer(() => {
             className="auxiliary-panel__header__action"
             onClick={toggleExpandAuxPanel}
             tabIndex={-1}
-            title={'Toggle expand/collapse'}
+            title="Toggle expand/collapse"
           >
             {editorStore.auxPanelDisplayState.isMaximized ? (
               <ChevronDownIcon />
@@ -118,7 +118,7 @@ export const AuxiliaryPanel = observer(() => {
             className="auxiliary-panel__header__action"
             onClick={closePanel}
             tabIndex={-1}
-            title={'Close'}
+            title="Close"
           >
             <XIcon />
           </button>

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

@@ -25,6 +25,7 @@ import {
   TimesIcon,
   PlusIcon,
   ArrowsAltHIcon,
+  useResizeDetector,
 } from '@finos/legend-art';
 import { MappingEditor } from './mapping-editor/MappingEditor.js';
 import { UMLEditor } from './uml-editor/UMLEditor.js';
@@ -33,7 +34,6 @@ import { UMLEditorState } from '../../../stores/editor-state/element-editor-stat
 import { ElementEditorState } from '../../../stores/editor-state/element-editor-state/ElementEditorState.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
 import { ELEMENT_NATIVE_VIEW_MODE } from '../../../stores/EditorConfig.js';
-import { useResizeDetector } from 'react-resize-detector';
 import type { EditorState } from '../../../stores/editor-state/EditorState.js';
 import {
   DIFF_VIEW_MODE,
@@ -429,7 +429,7 @@ export const EditPanel = observer(() => {
                   className="edit-panel__header__tab__close-btn"
                   onClick={closeTab(editorState)}
                   tabIndex={-1}
-                  title={'Close'}
+                  title="Close"
                 >
                   <TimesIcon />
                 </button>

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

@@ -94,12 +94,12 @@ import {
   annotatedElement_deleteStereotype,
   annotatedElement_deleteTaggedValue,
   function_swapParameters,
-} from '../../../stores/graphModifier/DomainGraphModifierHelper.js';
+} from '../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import {
   rawVariableExpression_setMultiplicity,
   rawVariableExpression_setName,
   rawVariableExpression_setType,
-} from '../../../stores/graphModifier/ValueSpecificationGraphModifierHelper.js';
+} from '../../../stores/shared/modifier/RawValueSpecificationGraphModifierHelper.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
 
 enum FUNCTION_PARAMETER_TYPE {
@@ -267,7 +267,7 @@ const ParameterBasicEditor = observer(
               value={parameter.name}
               spellCheck={false}
               onChange={changeValue}
-              placeholder={`Parameter name`}
+              placeholder="Parameter name"
             />
             {!isReadOnly && isEditingType && (
               <CustomSelectorInput
@@ -275,7 +275,7 @@ const ParameterBasicEditor = observer(
                 options={typeOptions}
                 onChange={changeType}
                 value={selectedType}
-                placeholder={'Choose a data type or enumeration'}
+                placeholder="Choose a type..."
                 filterOption={filterOption}
               />
             )}
@@ -311,7 +311,7 @@ const ParameterBasicEditor = observer(
                     className="property-basic-editor__type__visit-btn"
                     onClick={openElement}
                     tabIndex={-1}
-                    title={'Visit element'}
+                    title="Visit element"
                   >
                     <ArrowCircleRightIcon />
                   </button>
@@ -343,7 +343,7 @@ const ParameterBasicEditor = observer(
                     className="property-basic-editor__type__visit-btn"
                     onClick={openElement}
                     tabIndex={-1}
-                    title={'Visit element'}
+                    title="Visit element"
                   >
                     <ArrowCircleRightIcon />
                   </button>
@@ -375,7 +375,7 @@ const ParameterBasicEditor = observer(
                 disabled={isReadOnly}
                 onClick={deleteParameter}
                 tabIndex={-1}
-                title={'Remove'}
+                title="Remove"
               >
                 <TimesIcon />
               </button>
@@ -469,7 +469,7 @@ const ReturnTypeEditor = observer(
             options={typeOptions}
             onChange={changeType}
             value={selectedType}
-            placeholder={'Choose a data type or enumeration'}
+            placeholder="Choose a type..."
             filterOption={filterOption}
           />
         )}
@@ -505,7 +505,7 @@ const ReturnTypeEditor = observer(
                 className="property-basic-editor__type__visit-btn"
                 onClick={openElement}
                 tabIndex={-1}
-                title={'Visit element'}
+                title="Visit element"
               >
                 <ArrowCircleRightIcon />
               </button>
@@ -537,7 +537,7 @@ const ReturnTypeEditor = observer(
                 className="property-basic-editor__type__visit-btn"
                 onClick={openElement}
                 tabIndex={-1}
-                title={'Visit element'}
+                title="Visit element"
               >
                 <ArrowCircleRightIcon />
               </button>
@@ -637,7 +637,7 @@ export const FunctionMainEditor = observer(
               disabled={isReadOnly}
               onClick={addParameter}
               tabIndex={-1}
-              title={'Add Parameter'}
+              title="Add Parameter"
             >
               <PlusIcon />
             </button>
@@ -686,7 +686,7 @@ export const FunctionMainEditor = observer(
             })}
           >
             <StudioLambdaEditor
-              className={'function-editor__element__lambda-editor'}
+              className="function-editor__element__lambda-editor"
               disabled={
                 lambdaEditorState.isConvertingFunctionBodyToString || isReadOnly
               }

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

@@ -67,12 +67,12 @@ import {
   useApplicationStore,
   type PackageableElementOption,
 } from '@finos/legend-application';
-import { packageableElementReference_setValue } from '../../../stores/graphModifier/DomainGraphModifierHelper.js';
+import { packageableElementReference_setValue } from '../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import {
   generationSpecification_addFileGeneration,
   generationSpecification_deleteFileGeneration,
   generationSpecification_setId,
-} from '../../../stores/graphModifier/DSL_Generation_GraphModifierHelper.js';
+} from '../../../stores/shared/modifier/DSL_Generation_GraphModifierHelper.js';
 
 const GENERATION_SPEC_NODE_DND_TYPE = 'GENERATION_SPEC_NODE';
 
@@ -207,7 +207,7 @@ const ModelGenerationItem = observer(
             className="btn--dark btn--sm"
             onClick={visitModelGeneration}
             tabIndex={-1}
-            title={'See mapping'}
+            title="See mapping"
           >
             <LongArrowRightIcon />
           </button>
@@ -215,7 +215,7 @@ const ModelGenerationItem = observer(
             className="generation-spec-model-generation-editor__item__remove-btn"
             onClick={deleteNode}
             tabIndex={-1}
-            title={'Remove'}
+            title="Remove"
           >
             <TimesIcon />
           </button>
@@ -384,7 +384,7 @@ const FileGenerationItem = observer(
           className="btn--dark btn--sm"
           onClick={visitFileGen}
           tabIndex={-1}
-          title={'See mapping'}
+          title="See mapping"
         >
           <LongArrowRightIcon />
         </button>
@@ -392,7 +392,7 @@ const FileGenerationItem = observer(
           className="generation-spec-file-generation-editor__item__remove-btn"
           onClick={deleteColumnSort}
           tabIndex={-1}
-          title={'Remove'}
+          title="Remove"
         >
           <TimesIcon />
         </button>
@@ -542,7 +542,7 @@ export const GenerationSpecificationEditor = observer(() => {
               )}
               tabIndex={-1}
               onClick={generate}
-              title={'Generate'}
+              title="Generate"
             >
               <FireIcon />
             </button>

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

@@ -37,6 +37,7 @@ import {
   MoreHorizontalIcon,
   HackerIcon,
   PanelContent,
+  useResizeDetector,
 } from '@finos/legend-art';
 import {
   TAB_SIZE,
@@ -46,7 +47,6 @@ import {
   type DocumentationEntry,
   useApplicationNavigationContext,
 } from '@finos/legend-application';
-import { useResizeDetector } from 'react-resize-detector';
 import {
   type ElementDragSource,
   CORE_DND_TYPE,

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

@@ -151,7 +151,7 @@ export const ModelImporter = observer(() => {
   const label = modelImporterState.modelImportEditorState.label;
   const modelImportEditorState = modelImporterState.modelImportEditorState;
   const loadModel = (): void => {
-    if (editorStore.hasUnpushedChanges) {
+    if (editorStore.localChangesState.hasUnpushedChanges) {
       editorStore.setActionAlertInfo({
         message: 'You have unpushed changes',
         prompt:
@@ -164,10 +164,9 @@ export const ModelImporter = observer(() => {
             label: 'Proceed to load model',
             type: ActionAlertActionType.PROCEED_WITH_CAUTION,
             handler: (): void => {
-              editorStore.setIgnoreNavigationBlocking(true);
-              flowResult(
-                modelImporterState.modelImportEditorState.loadModel(),
-              ).catch(applicationStore.alertUnhandledError);
+              modelImporterState.modelImportEditorState
+                .loadModel()
+                .catch(applicationStore.alertUnhandledError);
             },
           },
           {
@@ -178,9 +177,9 @@ export const ModelImporter = observer(() => {
         ],
       });
     } else {
-      flowResult(modelImporterState.modelImportEditorState.loadModel()).catch(
-        applicationStore.alertUnhandledError,
-      );
+      modelImporterState.modelImportEditorState
+        .loadModel()
+        .catch(applicationStore.alertUnhandledError);
     }
   };
   useApplicationNavigationContext(

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

@@ -104,7 +104,7 @@ import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../
 import {
   runtime_addIdentifiedConnection,
   runtime_deleteIdentifiedConnection,
-} from '../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
+} from '../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
 
 const getConnectionTooltipText = (
@@ -607,7 +607,7 @@ const IdentifiedConnectionEditor = observer(
                   className="btn--dark btn--sm runtime-connection-editor__connection-option__visit-btn"
                   onClick={visitConnection}
                   tabIndex={-1}
-                  title={'See connection'}
+                  title="See connection"
                 >
                   <LongArrowRightIcon />
                 </button>

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

@@ -32,7 +32,7 @@ import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../
 import {
   modelConnection_setClass,
   modelConnection_setUrl,
-} from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import {
   buildElementOption,
   useApplicationNavigationContext,