init

Author: syn-zhu

packages/compass-workspaces/src/index.ts

@@ -20,6 +20,11 @@ import workspacesReducer, {
 import Workspaces from './components';
 import { applyMiddleware, createStore } from 'redux';
 import thunk from 'redux-thunk';
+import {
+  workspacesStateChangeMiddleware,
+  loadWorkspaceStateFromUserData,
+  convertSavedStateToInitialTabs,
+} from './stores/workspaces-middleware';
 import type { MongoDBInstance } from '@mongodb-js/compass-app-stores/provider';
 import { mongoDBInstancesManagerLocator } from '@mongodb-js/compass-app-stores/provider';
 import type Collection from 'mongodb-collection-model';
@@ -66,12 +71,47 @@ export function configureStore(
       collectionInfo: {},
       databaseInfo: {},
     },
-    applyMiddleware(thunk.withExtraArgument(services))
+    applyMiddleware(
+      thunk.withExtraArgument(services),
+      workspacesStateChangeMiddleware
+    )
   );
 
   return store;
 }
 
+/**
+ * Configures the store with optional state restoration from UserData
+ */
+export async function configureStoreWithStateRestoration(
+  initialWorkspaceTabs: OpenWorkspaceOptions[] | undefined | null,
+  services: WorkspacesServices,
+  restoreFromUserData = false
+) {
+  let tabsToUse = initialWorkspaceTabs;
+
+  // If restoration is enabled and no initial tabs provided, try to restore from UserData
+  if (
+    restoreFromUserData &&
+    (!initialWorkspaceTabs || initialWorkspaceTabs.length === 0)
+  ) {
+    try {
+      const savedState = await loadWorkspaceStateFromUserData();
+      if (savedState && savedState.tabs.length > 0) {
+        // Convert saved state back to initial tabs format
+        tabsToUse = convertSavedStateToInitialTabs(
+          savedState
+        ) as OpenWorkspaceOptions[];
+      }
+    } catch (error) {
+      services.logger?.debug('Workspace State Restoration', { error });
+      // Continue with original initialWorkspaceTabs (empty or provided)
+    }
+  }
+
+  return configureStore(tabsToUse, services);
+}
+
 export function activateWorkspacePlugin(
   {
     initialWorkspaceTabs,

packages/compass-workspaces/src/stores/README-middleware.md

@@ -0,0 +1,56 @@
+# Workspaces Middleware
+
+This middleware allows you to perform actions/callbacks whenever the workspaces state changes, such as when tabs are opened, closed, or modified.
+
+## How it works
+
+The middleware intercepts every Redux action and compares the previous and next workspaces state. If the state has actually changed, it calls a single callback function with the new state and the action that caused the change.
+
+## Integration
+
+The middleware is already integrated into the Redux store in `index.ts`:
+
+```typescript
+import { workspacesStateChangeMiddleware } from './stores/workspaces-middleware';
+
+// In configureStore function:
+applyMiddleware(
+  thunk.withExtraArgument(services),
+  workspacesStateChangeMiddleware
+);
+```
+
+## Customization
+
+To implement your custom logic, edit the callback function in `workspaces-middleware.ts`:
+
+```typescript
+function onWorkspacesStateChange(newState: WorkspacesState, action: AnyAction) {
+  // TODO: Implement your callback logic here
+  // You have access to:
+  // - newState: The complete new workspaces state
+  // - action: The Redux action that triggered the change
+}
+```
+
+The callback receives:
+
+- `newState`: The complete new `WorkspacesState` object
+- `action`: The Redux action that caused the state change
+
+## Example Use Cases
+
+- **Save state**: Persist the entire workspaces state to user data
+- **Analytics**: Track workspace usage and state changes
+- **Auto-save**: Save workspace configuration whenever it changes
+- **Window title**: Update browser title based on active tab
+- **URL sync**: Update browser URL to reflect current workspace
+- **Logging**: Log all workspace state changes for debugging
+
+## Guaranteed Behavior
+
+- The callback is **only called when the state actually changes** (strict reference equality check)
+- The callback receives the **complete new state**, so you can access all tabs, active tab, and metadata
+- The callback is called **after** the state has been updated but **before** the action completes
+
+See `workspaces-middleware-example.ts` for detailed implementation examples.

packages/compass-workspaces/src/stores/workspaces-middleware-example.ts

@@ -0,0 +1,95 @@
+/**
+ * EXAMPLE USAGE OF WORKSPACES MIDDLEWARE
+ *
+ * This file shows how you can implement custom logic in the single callback.
+ * You can copy this implementation into the workspaces-middleware.ts file and
+ * customize it for your specific needs.
+ */
+
+import type { AnyAction } from 'redux';
+import type { WorkspacesState } from './workspaces';
+
+/**
+ * Example implementation for the workspaces state change callback
+ */
+function exampleOnWorkspacesStateChange(
+  newState: WorkspacesState,
+  action: AnyAction
+) {
+  // Example: Save the entire state to persistent storage
+  // userDataService.saveWorkspacesState(newState);
+
+  // Example: Send analytics about current workspace state
+  // analyticsService.track('workspaces_state_changed', {
+  //   action_type: action.type,
+  //   total_tabs: newState.tabs.length,
+  //   active_tab_type: getActiveTabType(newState),
+  //   timestamp: new Date().toISOString(),
+  // });
+
+  // Example: Update window title based on active tab
+  updateWindowTitle(newState);
+
+  // Example: Auto-save current workspace configuration
+  // configService.saveWorkspaceLayout(newState);
+
+  // Example: Update browser history or URL based on active tab
+  // updateBrowserState(newState);
+
+  console.log('Workspaces state changed:', {
+    actionType: action.type,
+    totalTabs: newState.tabs.length,
+    activeTabId: newState.activeTabId,
+    activeTabType: getActiveTabType(newState),
+    timestamp: new Date().toISOString(),
+  });
+}
+
+/**
+ * Helper function to get the type of the currently active tab
+ */
+function getActiveTabType(state: WorkspacesState): string | null {
+  const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId);
+  return activeTab?.type || null;
+}
+
+/**
+ * Helper function to update the window title based on the active tab
+ */
+function updateWindowTitle(state: WorkspacesState) {
+  const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId);
+
+  if (!activeTab) {
+    document.title = 'MongoDB Compass';
+    return;
+  }
+
+  const title = getTabTitle(activeTab);
+  document.title = `MongoDB Compass - ${title}`;
+}
+
+/**
+ * Helper function to get a human-readable title for a tab
+ */
+function getTabTitle(tab: WorkspacesState['tabs'][0]): string {
+  switch (tab.type) {
+    case 'Welcome':
+      return 'Welcome';
+    case 'My Queries':
+      return 'My Queries';
+    case 'Shell':
+      return 'Shell';
+    case 'Databases':
+      return 'Databases';
+    case 'Performance':
+      return 'Performance';
+    case 'Collections':
+      return `Collections - ${'namespace' in tab ? tab.namespace : ''}`;
+    case 'Collection':
+      return `${'namespace' in tab ? tab.namespace : ''} - ${
+        'subTab' in tab ? tab.subTab : 'Documents'
+      }`;
+    default:
+      return 'MongoDB Compass';
+  }
+}