chore(web): move all routing logic from mms to compass-web COMPASS-10320

.evergreen/functions.yml

@@ -808,6 +808,7 @@ functions:
           npm run --unsafe-perm --workspace compass-e2e-tests test-ci -- -- web \
             --test-atlas-cloud \
             --test-filter="time-to-first-query" \
+            --test-filter="routing" \
             --test-filter="atlas-cloud/**/*"
 
   test-connectivity:

packages/compass-e2e-tests/tests/routing.test.ts

@@ -0,0 +1,107 @@
+import { expect } from 'chai';
+import type { Compass } from '../helpers/compass';
+import { cleanup, init, screenshotIfFailed } from '../helpers/compass';
+import type { CompassBrowser } from '../helpers/compass-browser';
+import { createNumbersCollection } from '../helpers/mongo-clients';
+import {
+  getDefaultConnectionNames,
+  isTestingDesktop,
+} from '../helpers/test-runner-context';
+
+describe('routing', function () {
+  let compass: Compass;
+  let browser: CompassBrowser;
+
+  before(async function () {
+    if (isTestingDesktop()) {
+      this.skip();
+    }
+    compass = await init(this.test?.fullTitle());
+    browser = compass.browser;
+    await browser.setupDefaultConnections();
+  });
+
+  beforeEach(async function () {
+    await createNumbersCollection();
+    await browser.connectToDefaults();
+  });
+
+  after(async function () {
+    await cleanup(compass);
+  });
+
+  afterEach(async function () {
+    await browser.closeWorkspaceTabs();
+    await browser.disconnectAll();
+    await screenshotIfFailed(compass, this.currentTest);
+  });
+
+  async function getCurrentUrl() {
+    return new URL(await browser.getUrl());
+  }
+
+  describe('when navigating inside compass-web', function () {
+    it('changes url according to the current active tab', async function () {
+      expect((await getCurrentUrl()).hash).to.match(/^#\/explorer\/?$/);
+
+      await browser.navigateToDatabaseCollectionsTab(
+        getDefaultConnectionNames(0),
+        'test'
+      );
+      expect((await getCurrentUrl()).hash).to.match(/^#\/explorer\/.+?\/test$/);
+
+      await browser.navigateToCollectionTab(
+        getDefaultConnectionNames(0),
+        'test',
+        'numbers'
+      );
+      expect((await getCurrentUrl()).hash).to.match(
+        /^#\/explorer\/.+?\/test\/numbers\/find$/
+      );
+
+      await browser.navigateToCollectionTab(
+        getDefaultConnectionNames(0),
+        'test',
+        'numbers',
+        'Aggregations'
+      );
+      expect((await getCurrentUrl()).hash).to.match(
+        /^#\/explorer\/.+?\/test\/numbers\/aggregation$/
+      );
+
+      await browser.navigateToCollectionTab(
+        getDefaultConnectionNames(0),
+        'test',
+        'numbers',
+        'Schema'
+      );
+      expect((await getCurrentUrl()).hash).to.match(
+        /^#\/explorer\/.+?\/test\/numbers\/schema$/
+      );
+
+      await browser.navigateToCollectionTab(
+        getDefaultConnectionNames(0),
+        'test',
+        'numbers',
+        'Indexes'
+      );
+      expect((await getCurrentUrl()).hash).to.match(
+        /^#\/explorer\/.+?\/test\/numbers\/indexes$/
+      );
+
+      await browser.navigateToCollectionTab(
+        getDefaultConnectionNames(0),
+        'test',
+        'numbers',
+        'Validation'
+      );
+      expect((await getCurrentUrl()).hash).to.match(
+        /^#\/explorer\/.+?\/test\/numbers\/validation$/
+      );
+
+      await browser.closeWorkspaceTabs();
+
+      expect((await getCurrentUrl()).hash).to.match(/^#\/explorer\/?$/);
+    });
+  });
+});

packages/compass-web/package.json

@@ -100,7 +100,6 @@
     "@mongodb-js/compass-user-data": "^0.18.0",
     "@mongodb-js/compass-welcome": "^0.99.0",
     "@mongodb-js/compass-workspaces": "^0.82.0",
-    "@mongodb-js/workspace-info": "^1.7.0",
     "@mongodb-js/connection-info": "^0.27.2",
     "@mongodb-js/connection-storage": "^0.74.0",
     "@mongodb-js/devtools-proxy-support": "^0.7.6",
@@ -111,6 +110,7 @@
     "@mongodb-js/testing-library-compass": "^1.5.4",
     "@mongodb-js/tsconfig-compass": "^1.2.14",
     "@mongodb-js/webpack-config-compass": "^1.12.3",
+    "@mongodb-js/workspace-info": "^1.7.0",
     "@types/chai": "^4.2.21",
     "@types/chai-dom": "^0.0.10",
     "@types/express-http-proxy": "^1.6.6",
@@ -129,11 +129,13 @@
     "depcheck": "^1.4.1",
     "dns-query": "^0.11.2",
     "events": "^3.3.0",
+    "history": "^5.3.0",
     "is-ip": "^5.0.1",
     "mocha": "^10.2.0",
     "mongodb": "^7.1.1",
     "mongodb-data-service": "^22.39.2",
     "mongodb-log-writer": "^2.3.4",
+    "mongodb-mcp-server": "1.6.1-prerelease.2",
     "mongodb-ns": "^3.0.1",
     "nyc": "^15.1.0",
     "os-browserify": "^0.3.0",
@@ -145,7 +147,6 @@
     "util": "^0.12.5",
     "vm-browserify": "^1.1.2",
     "whatwg-url": "14.0.0",
-    "ws": "^8.16.0",
-    "mongodb-mcp-server": "1.6.1-prerelease.2"
+    "ws": "^8.16.0"
   }
 }

packages/compass-web/sandbox/index.tsx

@@ -9,6 +9,9 @@ import {
 } from '@mongodb-js/compass-components';
 import type * as CompassWebModule from '../src';
 import { OpenInAtlasToast } from './open-in-atlas-toast';
+import { createHashHistory } from 'history';
+
+const hashHistory = createHashHistory();
 
 Object.assign(globalThis, {
   __compassWebSharedRuntime: {
@@ -21,6 +24,8 @@ Object.assign(globalThis, {
   // imports added directly to the compass-web build, there is no way to
   // activate this otherwise
   __compassWebEnableSandboxStorage: true,
+  // For testing purposes to programmatically trigger navigation
+  hashHistory,
 });
 
 const sandboxContainerStyles = css({
@@ -53,24 +58,16 @@ const App = () => {
     return null;
   }
 
-  const { CompassWeb, getRouteFromWorkspaceTab, getWorkspaceTabFromRoute } =
-    compassWebModule;
+  const { CompassWeb } = compassWebModule;
 
   return (
     <CompassComponentsProvider>
       <Body as="div" className={sandboxContainerStyles}>
         <CompassWeb
           orgId=""
           projectId=""
-          initialWorkspace={
-            getWorkspaceTabFromRoute(window.location.pathname) ?? undefined
-          }
-          onActiveWorkspaceTabChange={(tab) => {
-            const newPath = getRouteFromWorkspaceTab(tab);
-            window.history.replaceState(null, '', newPath);
-          }}
-          // Some overrides for the default compass-web preferences to enable the
-          // features that would be disabled by default otherwise
+          // Some overrides for the default compass-web preferences to enable
+          // the features that would be disabled by default otherwise
           initialPreferences={{
             enableExportSchema: true,
             enablePerformanceAdvisorBanner: false,
@@ -87,6 +84,7 @@ const App = () => {
             enableDataModelingCollapse: true,
             enableMyQueries: false,
           }}
+          history={hashHistory}
         ></CompassWeb>
         <OpenInAtlasToast></OpenInAtlasToast>
       </Body>

packages/compass-web/src/entrypoint.spec.tsx

@@ -69,8 +69,6 @@ describe('CompassWeb', function () {
         <CompassWeb
           orgId=""
           projectId=""
-          initialWorkspace={undefined as any}
-          onActiveWorkspaceTabChange={() => {}}
           onTrack={onTrackSpy}
           {...props}
           initialPreferences={{

packages/compass-web/src/entrypoint.tsx

@@ -6,12 +6,7 @@ import AppRegistry, {
 import type { AtlasClusterMetadata } from '@mongodb-js/connection-info';
 import { useConnectionActions } from '@mongodb-js/compass-connections/provider';
 import { CompassInstanceStorePlugin } from '@mongodb-js/compass-app-stores';
-import type {
-  CollectionTabInfo,
-  WorkspaceTab,
-} from '@mongodb-js/workspace-info';
 import WorkspacesPlugin, {
-  type OpenWorkspaceOptions,
   WorkspacesProvider,
   WorkspacesStorageServiceProviderWeb,
 } from '@mongodb-js/compass-workspaces';
@@ -102,6 +97,8 @@ import { CompassAssistantProvider } from '@mongodb-js/compass-assistant';
 import { CompassAssistantDrawerWithConnections } from './compass-assistant-drawer';
 import { APP_NAMES_FOR_PROMPT } from '@mongodb-js/compass-assistant';
 import { assertsUserDataType } from '@mongodb-js/compass-user-data';
+import { useSyncHistory } from './use-sync-history';
+import type { History } from './use-sync-history';
 
 const WithAtlasProviders: React.FC<{ children: React.ReactNode }> = ({
   children,
@@ -240,33 +237,6 @@ export type CompassWebProps = {
    */
   darkMode?: boolean;
 
-  /**
-   * Optional. If passed, compass-web will try to find connection info with that
-   * id in connection storage and pass it as autoconnect info to the
-   * compass-connections
-   */
-  initialAutoconnectId?: string;
-  /**
-   * Optional. If passed, compass-web will open provided workspace right away.
-   * If workspace requires active connection, the connectionId from the
-   * workspace will be used for the autoconnect info getter. In that case
-   * connectionId from the workspace takes precedence over
-   * `initialAutoconnectId`
-   */
-  initialWorkspace?: OpenWorkspaceOptions;
-
-  /**
-   * Callback prop called when current active workspace changes. Can be used to
-   * communicate current workspace back to the parent component for example to
-   * sync router with the current active workspace
-   */
-  onActiveWorkspaceTabChange: <WS extends WorkspaceTab>(
-    ws: WS | null,
-    collectionInfo: WS extends { type: 'Collection' }
-      ? CollectionTabInfo | null
-      : never
-  ) => void;
-
   /**
    * Set of initial preferences to override default values
    */
@@ -301,11 +271,15 @@ export type CompassWebProps = {
   onOpenConnectViaModal?: (atlasMetadata?: AtlasClusterMetadata) => void;
 
   /**
-   * Callback that will get passed another callback function that, when called,
-   * would return back true or false depending on whether or not tabs can be
-   * safely closed without losing any important unsaved changes
+   * A "react-router"-like history instance to be used to manipulate the current
+   * route state. Optional, if not provided, no router handling logic will apply
+   */
+  history?: History;
+  /**
+   * Optional prefix to take into consideration when parsing current route
+   * (default: "explorer")
    */
-  onBeforeUnloadCallbackRequest?: (canCloseCallback: () => boolean) => void;
+  historyRoutePrefix?: string;
 };
 
 function CompassWorkspace({
@@ -487,16 +461,14 @@ const CompassWeb = ({
   orgId,
   projectId,
   darkMode,
-  initialAutoconnectId,
-  initialWorkspace: _initialWorkspace,
-  onActiveWorkspaceTabChange,
   initialPreferences,
   atlasCloudFeatureFlags,
   onLog,
   onDebug,
   onTrack,
   onOpenConnectViaModal,
-  onBeforeUnloadCallbackRequest,
+  history,
+  historyRoutePrefix,
 }: CompassWebProps) => {
   const appRegistry = useInitialValue(new AppRegistry());
   const preferencesAccess = useCompassWebPreferences(
@@ -511,16 +483,12 @@ const CompassWeb = ({
       preferences: preferencesAccess,
     });
 
-  // TODO (COMPASS-9565): My Queries feature flag will be used to conditionally provide storage providers
-  const initialWorkspace = useInitialValue(_initialWorkspace);
-  const initialWorkspaceTabs = useInitialValue(() =>
-    initialWorkspace ? [initialWorkspace] : []
-  );
-
-  const autoconnectId =
-    initialWorkspace && 'connectionId' in initialWorkspace
-      ? initialWorkspace.connectionId
-      : initialAutoconnectId ?? undefined;
+  const {
+    initialWorkspaceTabs,
+    autoconnectId,
+    onActiveWorkspaceTabChange,
+    onBeforeUnloadCallbackRequest,
+  } = useSyncHistory(history, historyRoutePrefix);
 
   return (
     <GlobalAppRegistryProvider value={appRegistry}>

packages/compass-web/src/index.tsx

@@ -1,8 +1,5 @@
 export { CompassWeb } from './entrypoint';
 export type { CompassWebProps } from './entrypoint';
-export * from './url-builder';
-export type { WorkspaceTab } from '@mongodb-js/workspace-info';
-export type { OpenWorkspaceOptions } from '@mongodb-js/compass-workspaces';
 export {
   CompassExperimentationProvider,
   ExperimentTestNames,

packages/compass-web/src/url-builder.ts

@@ -49,7 +49,6 @@ function getRouteFromCollectionSubTab(subTab: CollectionSubtab): string {
   }
 }
 
-/** @public */
 export function getWorkspaceTabFromRoute(
   route: string
 ): OpenWorkspaceOptions | null {
@@ -86,7 +85,6 @@ function buildAbsoluteURL(...parts: string[]) {
   );
 }
 
-/** @public */
 export function getRouteFromWorkspaceTab(tab: WorkspaceTab | null) {
   let route: string;
   switch (tab?.type) {