feat: Using the AtlasUserData class to demo save user data project COMPASS-9565

package.json

@@ -132,5 +132,8 @@
     "@leafygreen-ui/text-area": "^10.0.2",
     "@leafygreen-ui/card": "^12.0.2",
     "@leafygreen-ui/logo": "^10.0.2"
+  },
+  "dependencies": {
+    "@leafygreen-ui/avatar": "^3.1.0"
   }
 }

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

@@ -78,6 +78,16 @@ export class AtlasService {
     // https://github.com/10gen/mms/blob/9f858bb987aac6aa80acfb86492dd74c89cbb862/client/packages/project/common/ajaxPrefilter.ts#L34-L49
     return this.cloudEndpoint(path);
   }
+  tempEndpoint(path?: string): string {
+    return `https://cluster-connection.cloud-dev.mongodb.com${normalizePath(
+      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)}`;
   }
@@ -91,13 +101,14 @@ export class AtlasService {
       { url }
     );
     try {
+      const headers = {
+        ...this.options?.defaultHeaders,
+        ...(shouldAddCSRFHeaders(init?.method) && getCSRFHeaders()),
+        ...init?.headers,
+      };
       const res = await fetch(url, {
         ...init,
-        headers: {
-          ...this.options?.defaultHeaders,
-          ...(shouldAddCSRFHeaders(init?.method) && getCSRFHeaders()),
-          ...init?.headers,
-        },
+        headers,
       });
       this.logger.log.info(
         this.logger.mongoLogId(1_001_000_309),

packages/atlas-service/src/provider.tsx

@@ -48,7 +48,7 @@ export const AtlasServiceProvider: React.FC<{
   );
 });
 
-function useAtlasServiceContext(): AtlasService {
+export function useAtlasServiceContext(): AtlasService {
   const service = useContext(AtlasServiceContext);
   if (!service) {
     throw new Error('No AtlasService available in this context');

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { usePreference } from 'compass-preferences-model/provider';
 import { Button, Icon, css, spacing } from '@mongodb-js/compass-components';
 import { exportToLanguage } from '../../../modules/export-to-language';
 import { SaveMenu } from './pipeline-menus';
@@ -49,7 +50,10 @@ export const PipelineSettings: React.FunctionComponent<
 }) => {
   // TODO: remove direct check for storage existing, breaks single source of
   // truth rule and exposes services to UI, this breaks the rules for locators
-  const enableSavedAggregationsQueries = !!usePipelineStorage();
+  const pipelineStorageAvailable = !!usePipelineStorage();
+  const isMyQueriesEnabled = usePreference('enableMyQueries');
+  const enableSavedAggregationsQueries =
+    pipelineStorageAvailable && isMyQueriesEnabled;
   const isPipelineNameDisplayed =
     !editViewName && !!enableSavedAggregationsQueries;
 

packages/compass-data-modeling/src/services/data-model-storage-electron.tsx

@@ -11,6 +11,7 @@ class DataModelStorageElectron implements DataModelStorage {
   private readonly userData: FileUserData<
     typeof MongoDBDataModelDescriptionSchema
   >;
+
   constructor(basePath?: string) {
     this.userData = new FileUserData(
       MongoDBDataModelDescriptionSchema,
@@ -20,12 +21,15 @@ class DataModelStorageElectron implements DataModelStorage {
       }
     );
   }
+
   save(description: MongoDBDataModelDescription) {
     return this.userData.write(description.id, description);
   }
+
   delete(id: MongoDBDataModelDescription['id']) {
     return this.userData.delete(id);
   }
+
   async loadAll(): Promise<MongoDBDataModelDescription[]> {
     try {
       const res = await this.userData.readAll();
@@ -34,6 +38,7 @@ class DataModelStorageElectron implements DataModelStorage {
       return [];
     }
   }
+
   async load(id: string): Promise<MongoDBDataModelDescription | null> {
     return (
       (await this.loadAll()).find((item) => {

packages/compass-preferences-model/src/preferences-schema.tsx

@@ -92,6 +92,7 @@ export type UserConfigurablePreferences = PermanentFeatureFlags &
     enableExplainPlan: boolean;
     enableAtlasSearchIndexes: boolean;
     enableImportExport: boolean;
+    enableMyQueries: boolean;
     enableAggregationBuilderRunPipeline: boolean;
     enableAggregationBuilderExtraOptions: boolean;
     enableGenAISampleDocumentPassing: boolean;
@@ -1019,6 +1020,17 @@ export const storedUserPreferencesProps: Required<{
     validator: z.boolean().default(true),
     type: 'boolean',
   },
+  enableMyQueries: {
+    ui: true,
+    cli: true,
+    global: true,
+    description: {
+      short:
+        'Enable My Queries feature to save and manage favorite queries and aggregations',
+    },
+    validator: z.boolean().default(true),
+    type: 'boolean',
+  },
 
   inferNamespacesFromPrivileges: {
     ui: true,

packages/compass-preferences-model/src/react.ts

@@ -126,3 +126,17 @@ export function withPreferences<
     return createElement(component, { ...prefs, ...props });
   };
 }
+
+/**
+ * Hook to check if the My Queries Data Explorer feature is enabled.
+ * This controls access to:
+ * - Saved queries and aggregations
+ * - Recent queries autocomplete
+ * - Favorite queries/aggregations
+ */
+export function useMyQueriesFeature(): boolean {
+  const enableMyQueries = usePreference('enableMyQueries');
+
+  // Default to true to match the preference schema default
+  return enableMyQueries ?? true;
+}

packages/compass-query-bar/src/components/query-bar.tsx

@@ -14,7 +14,10 @@ import {
   createAIPlaceholderHTMLPlaceholder,
 } from '@mongodb-js/compass-generative-ai';
 import { connect } from '../stores/context';
-import { useIsAIFeatureEnabled } from 'compass-preferences-model/provider';
+import {
+  useIsAIFeatureEnabled,
+  usePreference,
+} from 'compass-preferences-model/provider';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 import {
@@ -202,8 +205,11 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
 
   const favoriteQueryStorageAvailable = !!useFavoriteQueryStorageAccess();
   const recentQueryStorageAvailable = !!useRecentQueryStorageAccess();
+  const isMyQueriesEnabled = usePreference('enableMyQueries');
   const enableSavedAggregationsQueries =
-    favoriteQueryStorageAvailable && recentQueryStorageAvailable;
+    favoriteQueryStorageAvailable &&
+    recentQueryStorageAvailable &&
+    isMyQueriesEnabled;
 
   return (
     <form

packages/compass-query-bar/src/stores/query-bar-reducer.ts

@@ -268,9 +268,20 @@ export const fetchRecents = (): QueryBarThunkAction<
   return async (
     dispatch,
     _getState,
-    { recentQueryStorage, logger: { debug } }
+    { recentQueryStorage, logger: { debug }, preferences }
   ) => {
     try {
+      // Check if My Queries feature is enabled
+      const isMyQueriesEnabled = preferences.getPreferences().enableMyQueries;
+      if (!isMyQueriesEnabled) {
+        // If feature is disabled, dispatch empty array
+        dispatch({
+          type: QueryBarActions.RecentQueriesFetched,
+          recents: [],
+        });
+        return;
+      }
+
       const {
         queryBar: { namespace },
       } = _getState();
@@ -286,7 +297,14 @@ export const fetchRecents = (): QueryBarThunkAction<
 };
 
 export const fetchSavedQueries = (): QueryBarThunkAction<void> => {
-  return (dispatch) => {
+  return (dispatch, _getState, { preferences }) => {
+    // Check if My Queries feature is enabled
+    const isMyQueriesEnabled = preferences.getPreferences().enableMyQueries;
+    if (!isMyQueriesEnabled) {
+      // If feature is disabled, don't fetch anything
+      return;
+    }
+
     void dispatch(fetchRecents());
     void dispatch(fetchFavorites());
   };
@@ -303,9 +321,20 @@ export const fetchFavorites = (): QueryBarThunkAction<
   return async (
     dispatch,
     _getState,
-    { favoriteQueryStorage, logger: { debug } }
+    { favoriteQueryStorage, logger: { debug }, preferences }
   ) => {
     try {
+      // Check if My Queries feature is enabled
+      const isMyQueriesEnabled = preferences.getPreferences().enableMyQueries;
+      if (!isMyQueriesEnabled) {
+        // If feature is disabled, dispatch empty array
+        dispatch({
+          type: QueryBarActions.FavoriteQueriesFetched,
+          favorites: [],
+        });
+        return;
+      }
+
       const {
         queryBar: { namespace },
       } = _getState();
@@ -356,10 +385,7 @@ export const saveRecentAsFavorite = (
       };
 
       // add it in the favorite
-      await favoriteQueryStorage?.updateAttributes(
-        favoriteQuery._id,
-        favoriteQuery
-      );
+      await favoriteQueryStorage?.saveQuery(favoriteQuery, favoriteQuery._id);
 
       // update favorites
       void dispatch(fetchFavorites());

packages/compass-sidebar/src/components/multiple-connections/navigation/navigation.tsx

@@ -11,7 +11,7 @@ import {
   useOpenWorkspace,
   useWorkspacePlugins,
 } from '@mongodb-js/compass-workspaces/provider';
-import { usePreference } from 'compass-preferences-model/provider';
+import { usePreference, useMyQueriesFeature } from 'compass-preferences-model/provider';
 import React from 'react';
 
 const navigationItem = css({
@@ -102,9 +102,10 @@ export function Navigation({
   const { openMyQueriesWorkspace, openDataModelingWorkspace } =
     useOpenWorkspace();
   const isDataModelingEnabled = usePreference('enableDataModeling');
+  const isMyQueriesEnabled = useMyQueriesFeature();
   return (
     <div>
-      {hasWorkspacePlugin('My Queries') && (
+      {hasWorkspacePlugin('My Queries') && isMyQueriesEnabled && (
         <NavigationItem
           onClick={openMyQueriesWorkspace}
           glyph="CurlyBraces"

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

@@ -2,13 +2,14 @@ import fs from 'fs/promises';
 import os from 'os';
 import path from 'path';
 import { expect } from 'chai';
+import { z, type ZodError } from 'zod';
+import sinon from 'sinon';
+
 import {
-  FileUserData,
   AtlasUserData,
+  FileUserData,
   type FileUserDataOptions,
 } from './user-data';
-import { z, type ZodError } from 'zod';
-import sinon from 'sinon';
 
 type ValidatorOptions = {
   allowUnknownProps?: boolean;
@@ -362,9 +363,9 @@ describe('AtlasUserData', function () {
     orgId = 'test-org',
     projectId = 'test-proj',
     type:
-      | 'RecentQueries'
-      | 'FavoriteQueries'
-      | 'SavedPipelines' = 'FavoriteQueries'
+      | 'recentQueries'
+      | 'favoriteQueries'
+      | 'favoriteAggregations' = 'favoriteQueries'
   ) => {
     return new AtlasUserData(getTestSchema(validatorOpts), type, {
       orgId,
@@ -404,12 +405,13 @@ describe('AtlasUserData', function () {
       expect(options.headers['Content-Type']).to.equal('application/json');
 
       const body = JSON.parse(options.body as string);
-      expect(body.id).to.equal('test-id');
-      expect(body.projectId).to.equal('test-proj');
       expect(body.data).to.be.a('string');
       expect(JSON.parse(body.data as string)).to.deep.equal({ name: 'VSCode' });
       expect(body.createdAt).to.be.a('string');
       expect(new Date(body.createdAt as string)).to.be.instanceOf(Date);
+      // id and projectId should not be in the body (they're in the URL path)
+      expect(body.id).to.be.undefined;
+      expect(body.projectId).to.be.undefined;
     });
 
     it('returns false when authenticatedFetch throws an error', async function () {
@@ -461,6 +463,7 @@ describe('AtlasUserData', function () {
       const [, options] = authenticatedFetchStub.firstCall.args;
       const body = JSON.parse(options.body as string);
       expect(body.data).to.equal('custom:{"name":"Custom"}');
+      expect(body.createdAt).to.be.a('string');
     });
   });
 
@@ -767,25 +770,27 @@ describe('AtlasUserData', function () {
       await userData.updateAttributes('test-id', { name: 'Updated' });
 
       const [, putOptions] = authenticatedFetchStub.secondCall.args;
-      expect(putOptions.body as string).to.equal(
+      const body = JSON.parse(putOptions.body as string);
+      expect(body.data).to.equal(
         'custom:{"name":"Updated","hasDarkMode":true,"hasWebSupport":false}'
       );
+      expect(body.createdAt).to.be.a('string');
     });
   });
 
   context('AtlasUserData urls', function () {
     it('constructs URL correctly for write operation', async function () {
       authenticatedFetchStub.resolves(mockResponse({}));
       getResourceUrlStub.resolves(
-        'cluster-connection.cloud.mongodb.com/FavoriteQueries/custom-org/custom-proj'
+        'cluster-connection.cloud.mongodb.com/favoriteQueries/custom-org/custom-proj/test-id'
       );
 
       const userData = getAtlasUserData({}, 'custom-org', 'custom-proj');
       await userData.write('test-id', { name: 'Test' });
 
       const [url] = authenticatedFetchStub.firstCall.args;
       expect(url).to.equal(
-        'cluster-connection.cloud.mongodb.com/FavoriteQueries/custom-org/custom-proj'
+        'cluster-connection.cloud.mongodb.com/favoriteQueries/custom-org/custom-proj/test-id'
       );
     });