feat(workspaces): Save and restore tabs COMPASS-9499

packages/atlas-service/src/atlas-service.ts

@@ -78,6 +78,11 @@ export class AtlasService {
     // https://github.com/10gen/mms/blob/9f858bb987aac6aa80acfb86492dd74c89cbb862/client/packages/project/common/ajaxPrefilter.ts#L34-L49
     return this.cloudEndpoint(path);
   }
+  userDataEndpoint(path?: string): string {
+    return `https://cluster-connection.cloud-dev.mongodb.com/userData${normalizePath(
+      path
+    )}`;
+  }
   driverProxyEndpoint(path?: string): string {
     return `${this.config.ccsBaseUrl}${normalizePath(path)}`;
   }

packages/compass-user-data/src/user-data.ts

@@ -10,7 +10,7 @@ const { log, mongoLogId } = createLogger('COMPASS-USER-STORAGE');
 
 type SerializeContent<I> = (content: I) => string;
 type DeserializeContent = (content: string) => unknown;
-type GetResourceUrl = (path?: string) => Promise<string>;
+type GetResourceUrl = (path?: string) => string;
 type AuthenticatedFetch = (
   url: RequestInfo | URL,
   options?: RequestInit
@@ -65,6 +65,7 @@ export abstract class IUserData<T extends z.Schema> {
   abstract write(id: string, content: z.input<T>): Promise<boolean>;
   abstract delete(id: string): Promise<boolean>;
   abstract readAll(options?: ReadOptions): Promise<ReadAllResult<T>>;
+  abstract readOne(id: string, options: ReadOptions): Promise<z.output<T>>;
   abstract updateAttributes(
     id: string,
     data: Partial<z.input<T>>
@@ -295,7 +296,7 @@ export class AtlasUserData<T extends z.Schema> extends IUserData<T> {
   }
 
   async write(id: string, content: z.input<T>): Promise<boolean> {
-    const url = await this.getResourceUrl(
+    const url = this.getResourceUrl(
       `${this.dataType}/${this.orgId}/${this.projectId}`
     );
 
@@ -331,7 +332,7 @@ export class AtlasUserData<T extends z.Schema> extends IUserData<T> {
   }
 
   async delete(id: string): Promise<boolean> {
-    const url = await this.getResourceUrl(
+    const url = this.getResourceUrl(
       `${this.dataType}/${this.orgId}/${this.projectId}/${id}`
     );
 
@@ -361,9 +362,7 @@ export class AtlasUserData<T extends z.Schema> extends IUserData<T> {
     };
     try {
       const response = await this.authenticatedFetch(
-        await this.getResourceUrl(
-          `${this.dataType}/${this.orgId}/${this.projectId}`
-        ),
+        this.getResourceUrl(`${this.dataType}/${this.orgId}/${this.projectId}`),
         {
           method: 'GET',
         }
@@ -396,7 +395,7 @@ export class AtlasUserData<T extends z.Schema> extends IUserData<T> {
       };
 
       await this.authenticatedFetch(
-        await this.getResourceUrl(
+        this.getResourceUrl(
           `${this.dataType}/${this.orgId}/${this.projectId}/${id}`
         ),
         {
@@ -414,7 +413,7 @@ export class AtlasUserData<T extends z.Schema> extends IUserData<T> {
         'Atlas Backend',
         'Error updating data',
         {
-          url: await this.getResourceUrl(
+          url: this.getResourceUrl(
             `${this.dataType}/${this.orgId}/${this.projectId}/${id}`
           ),
           error: (error as Error).message,
@@ -426,7 +425,7 @@ export class AtlasUserData<T extends z.Schema> extends IUserData<T> {
 
   // TODO: change this depending on whether or not updateAttributes can provide all current data
   async readOne(id: string): Promise<z.output<T>> {
-    const url = await this.getResourceUrl(
+    const url = this.getResourceUrl(
       `${this.dataType}/${this.orgId}/${this.projectId}/${id}`
     );
 

packages/compass-web/src/entrypoint.tsx

@@ -7,13 +7,15 @@ import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import { useConnectionActions } from '@mongodb-js/compass-connections/provider';
 import { CompassInstanceStorePlugin } from '@mongodb-js/compass-app-stores';
 import type { OpenWorkspaceOptions } from '@mongodb-js/compass-workspaces';
-import WorkspacesPlugin, {
+import {
+  WorkspacesWebPlugin,
   WorkspacesProvider,
 } from '@mongodb-js/compass-workspaces';
 import {
   DatabasesWorkspaceTab,
   CollectionsWorkspaceTab,
 } from '@mongodb-js/compass-databases-collections';
+import { atlasServiceLocator } from '@mongodb-js/atlas-service/provider';
 import { CompassComponentsProvider, css } from '@mongodb-js/compass-components';
 import {
   WorkspaceTab as CollectionWorkspace,
@@ -62,6 +64,8 @@ import {
   CompassAssistantDrawer,
   CompassAssistantProvider,
 } from '@mongodb-js/compass-assistant';
+import { type IUserData } from '@mongodb-js/compass-user-data';
+import type { WorkspacesStateSchema } from '@mongodb-js/compass-workspaces';
 
 export type TrackFunction = (
   event: string,
@@ -83,13 +87,16 @@ const WithAtlasProviders: React.FC = ({ children }) => {
 };
 
 type CompassWorkspaceProps = Pick<
-  React.ComponentProps<typeof WorkspacesPlugin>,
+  React.ComponentProps<typeof WorkspacesWebPlugin>,
   'initialWorkspaceTabs' | 'onActiveWorkspaceTabChange'
 > &
   Pick<
     React.ComponentProps<typeof CompassSidebarPlugin>,
     'onOpenConnectViaModal'
-  >;
+  > & {
+    orgId: string;
+    projectId: string;
+  };
 
 type CompassWebProps = {
   /**
@@ -132,14 +139,19 @@ type CompassWebProps = {
    * sync router with the current active workspace
    */
   onActiveWorkspaceTabChange: React.ComponentProps<
-    typeof WorkspacesPlugin
+    typeof WorkspacesWebPlugin
   >['onActiveWorkspaceTabChange'];
 
   /**
    * Set of initial preferences to override default values
    */
   initialPreferences?: Partial<AllPreferences>;
 
+  /**
+   * UserData instance to use for persisting workspace state
+   */
+  userData: IUserData<typeof WorkspacesStateSchema>;
+
   /**
    * Callback prop called every time any code inside Compass logs something
    */
@@ -173,7 +185,10 @@ function CompassWorkspace({
   initialWorkspaceTabs,
   onActiveWorkspaceTabChange,
   onOpenConnectViaModal,
+  orgId,
+  projectId,
 }: CompassWorkspaceProps) {
+  const atlasService = atlasServiceLocator();
   return (
     <WorkspacesProvider
       value={[
@@ -203,7 +218,10 @@ function CompassWorkspace({
           data-testid="compass-web-connected"
           className={connectedContainerStyles}
         >
-          <WorkspacesPlugin
+          <WorkspacesWebPlugin
+            orgId={orgId}
+            projectId={projectId}
+            atlasService={atlasService}
             initialWorkspaceTabs={initialWorkspaceTabs}
             openOnEmptyWorkspace={{ type: 'Welcome' }}
             onActiveWorkspaceTabChange={onActiveWorkspaceTabChange}
@@ -226,7 +244,7 @@ function CompassWorkspace({
                 </>
               );
             }}
-          ></WorkspacesPlugin>
+          ></WorkspacesWebPlugin>
         </div>
       </CollectionTabsProvider>
     </WorkspacesProvider>
@@ -419,6 +437,8 @@ const CompassWeb = ({
                             <FieldStorePlugin>
                               <WithConnectionsStore>
                                 <CompassWorkspace
+                                  orgId={orgId}
+                                  projectId={projectId}
                                   initialWorkspaceTabs={
                                     initialWorkspaceTabsRef.current
                                   }

packages/compass-workspaces/src/components/index.tsx

@@ -10,6 +10,7 @@ import type { WorkspaceTab } from '../types';
 import Workspaces from './workspaces';
 import { connect } from '../stores/context';
 import { WorkspacesServiceProvider } from '../provider';
+import type { AtlasService } from '../../../atlas-service/dist/atlas-service';
 
 type WorkspacesWithSidebarProps = {
   /**
@@ -56,6 +57,12 @@ type WorkspacesWithSidebarProps = {
   renderModals?: () => React.ReactElement | null;
 };
 
+type WorkspacesWithSidebarWebProps = WorkspacesWithSidebarProps & {
+  atlasService: AtlasService;
+  orgId: string;
+  projectId: string;
+};
+
 const containerLightThemeStyles = css({
   backgroundColor: palette.white,
   color: palette.gray.dark2,
@@ -100,6 +107,7 @@ const WorkspacesWithSidebar: React.FunctionComponent<
   useEffect(() => {
     onChange.current(activeTab, activeTabCollectionInfo);
   }, [activeTab, activeTabCollectionInfo]);
+
   return (
     <WorkspacesServiceProvider>
       <div
@@ -118,6 +126,28 @@ const WorkspacesWithSidebar: React.FunctionComponent<
   );
 };
 
+const WorkspacesWithSidebarWeb: React.FunctionComponent<
+  WorkspacesWithSidebarWebProps
+> = ({
+  activeTab,
+  activeTabCollectionInfo,
+  openOnEmptyWorkspace,
+  onActiveWorkspaceTabChange,
+  renderSidebar,
+  renderModals,
+}) => {
+  return (
+    <WorkspacesWithSidebar
+      activeTab={activeTab}
+      activeTabCollectionInfo={activeTabCollectionInfo}
+      openOnEmptyWorkspace={openOnEmptyWorkspace}
+      onActiveWorkspaceTabChange={onActiveWorkspaceTabChange}
+      renderSidebar={renderSidebar}
+      renderModals={renderModals}
+    ></WorkspacesWithSidebar>
+  );
+};
+
 export default connect((state: WorkspacesState) => {
   const activeTab = getActiveTab(state);
   return {
@@ -128,3 +158,14 @@ export default connect((state: WorkspacesState) => {
         : null,
   };
 })(WorkspacesWithSidebar);
+
+export const WorkspacesWeb = connect((state: WorkspacesState) => {
+  const activeTab = getActiveTab(state);
+  return {
+    activeTab,
+    activeTabCollectionInfo:
+      activeTab?.type === 'Collection'
+        ? state.collectionInfo[activeTab.namespace]
+        : null,
+  };
+})(WorkspacesWithSidebarWeb);

packages/compass-workspaces/src/components/workspaces.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import {
   DrawerAnchor,
   ErrorBoundary,
   MongoDBLogoMark,
   WorkspaceTabs,
   css,
+  showConfirmation,
   spacing,
   useDarkMode,
   type WorkspaceTabCoreProps,
@@ -33,6 +34,8 @@ import { useLogger } from '@mongodb-js/compass-logging/provider';
 import { connect } from '../stores/context';
 import { WorkspaceTabContextProvider } from './workspace-tab-context-provider';
 import type { WorkspaceTab } from '../types';
+import { useLoadWorkspacesRef, useRestoreSavedWorkspaces } from '../provider';
+import { rest } from 'lodash';
 
 const emptyWorkspaceStyles = css({
   margin: '0 auto',
@@ -111,6 +114,45 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
     onCreateTab(openOnEmptyWorkspace);
   }, [onCreateTab, openOnEmptyWorkspace]);
 
+  const loadWorkspacesRef = useLoadWorkspacesRef();
+  const restoreSavedWorkspaces = useRestoreSavedWorkspaces();
+
+  useEffect(() => {
+    loadWorkspacesRef.current.then(
+      (res) => {
+        if (res !== null) {
+          showConfirmation({
+            title: 'Reopen closed tabs?',
+            description:
+              'Your connection and tabs were closed, this action will reopen your previous session',
+            buttonText: 'Reopen tabs',
+          }).then(
+            (confirm) => {
+              if (confirm) {
+                restoreSavedWorkspaces(res);
+              } else {
+                // User declined to restore previous session, save the current
+                // state to override the previous session
+                restoreSavedWorkspaces([]);
+              }
+            },
+            (err) => {
+              throw err;
+            }
+          );
+        }
+      },
+      (err) => {
+        log.error(
+          mongoLogId(1_001_000_361),
+          'Workspaces',
+          'Failed to load saved workspaces from previous session',
+          { error: err }
+        );
+      }
+    );
+  }, [loadWorkspacesRef, restoreSavedWorkspaces, log, mongoLogId]);
+
   const workspaceTabs = useMemo(() => {
     return tabs.map((tab) => {
       const plugin = getWorkspacePluginByName(tab.type);