chore(my-queries): make feature flag ready for saving user data COMPASS-9657

packages/compass-preferences-model/src/compass-web-preferences-access.ts

@@ -18,6 +18,7 @@ const editablePreferences: (keyof UserPreferences)[] = [
   'enableGenAIFeaturesAtlasOrg',
   'enableGenAIFeaturesAtlasProject',
   'enableDataModeling',
+  'enableMyQueries',
 ];
 
 export class CompassWebPreferencesAccess implements PreferencesAccess {

packages/compass-preferences-model/src/feature-flags.ts

@@ -24,6 +24,7 @@ export type FeatureFlags = {
   showDisabledConnections: boolean;
   enableGlobalWrites: boolean;
   enableDataModeling: boolean;
+  enableMyQueries: boolean;
   enableIndexesGuidanceExp: boolean;
   showIndexesGuidanceVariant: boolean;
   enableContextMenus: boolean;
@@ -126,6 +127,16 @@ export const featureFlags: Required<{
     },
   },
 
+  /**
+   * Enable My Queries feature in Data Explorer
+   */
+  enableMyQueries: {
+    stage: 'development',
+    description: {
+      short: 'Save and manage favorite queries and aggregations',
+    },
+  },
+
   /**
    * Feature flags for Early Journey Indexes Guidance & Awareness  | Jira Epic: CLOUDP-239367
    * These are passed from MMS and not editable by user

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-sidebar/src/components/multiple-connections/navigation/navigation.tsx

@@ -102,9 +102,10 @@ export function Navigation({
   const { openMyQueriesWorkspace, openDataModelingWorkspace } =
     useOpenWorkspace();
   const isDataModelingEnabled = usePreference('enableDataModeling');
+  const isMyQueriesEnabled = usePreference('enableMyQueries');
   return (
     <div>
-      {hasWorkspacePlugin('My Queries') && (
+      {hasWorkspacePlugin('My Queries') && isMyQueriesEnabled && (
         <NavigationItem
           onClick={openMyQueriesWorkspace}
           glyph="CurlyBraces"

packages/compass-web/sandbox/index.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useLayoutEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import {
-  resetGlobalCSS,
-  css,
   Body,
+  css,
   openToast,
+  resetGlobalCSS,
 } from '@mongodb-js/compass-components';
 import type { AllPreferences } from 'compass-preferences-model';
 import { CompassWeb } from '../src/index';
@@ -137,6 +137,7 @@ const App = () => {
                 isAtlas && !!enableGenAIFeaturesAtlasOrg,
               optInGenAIFeatures: isAtlas && !!optInGenAIFeatures,
               enableDataModeling: true,
+              enableMyQueries: true,
             }}
             onTrack={sandboxTelemetry.track}
             onDebug={sandboxLogger.debug}

packages/compass-web/src/entrypoint.tsx

@@ -11,17 +11,20 @@ import WorkspacesPlugin, {
   WorkspacesProvider,
 } from '@mongodb-js/compass-workspaces';
 import {
-  DatabasesWorkspaceTab,
   CollectionsWorkspaceTab,
+  CreateNamespacePlugin,
+  DatabasesWorkspaceTab,
+  DropNamespacePlugin,
+  RenameCollectionPlugin,
 } from '@mongodb-js/compass-databases-collections';
 import { CompassComponentsProvider, css } from '@mongodb-js/compass-components';
 import {
-  WorkspaceTab as CollectionWorkspace,
   CollectionTabsProvider,
+  WorkspaceTab as CollectionWorkspace,
 } from '@mongodb-js/compass-collection';
 import {
-  CompassSidebarPlugin,
   AtlasClusterConnectionsOnlyProvider,
+  CompassSidebarPlugin,
 } from '@mongodb-js/compass-sidebar';
 import CompassQueryBarPlugin from '@mongodb-js/compass-query-bar';
 import { CompassDocumentsPlugin } from '@mongodb-js/compass-crud';
@@ -36,13 +39,8 @@ import { CompassGlobalWritesPlugin } from '@mongodb-js/compass-global-writes';
 import { CompassGenerativeAIPlugin } from '@mongodb-js/compass-generative-ai';
 import ExplainPlanCollectionTabModal from '@mongodb-js/compass-explain-plan';
 import ExportToLanguageCollectionTabModal from '@mongodb-js/compass-export-to-language';
-import {
-  CreateNamespacePlugin,
-  DropNamespacePlugin,
-  RenameCollectionPlugin,
-} from '@mongodb-js/compass-databases-collections';
-import { PreferencesProvider } from 'compass-preferences-model/provider';
 import type { AllPreferences } from 'compass-preferences-model/provider';
+import { PreferencesProvider } from 'compass-preferences-model/provider';
 import FieldStorePlugin from '@mongodb-js/compass-field-store';
 import { AtlasServiceProvider } from '@mongodb-js/atlas-service/provider';
 import { AtlasAiServiceProvider } from '@mongodb-js/compass-generative-ai/provider';
@@ -51,13 +49,20 @@ import { TelemetryProvider } from '@mongodb-js/compass-telemetry/provider';
 import CompassConnections from '@mongodb-js/compass-connections';
 import { AtlasCloudConnectionStorageProvider } from './connection-storage';
 import { AtlasCloudAuthServiceProvider } from './atlas-auth-service';
-import type { LogFunction, DebugFunction } from './logger';
+import type { DebugFunction, LogFunction } from './logger';
 import { useCompassWebLogger } from './logger';
 import { type TelemetryServiceOptions } from '@mongodb-js/compass-telemetry';
 import { WebWorkspaceTab as WelcomeWorkspaceTab } from '@mongodb-js/compass-welcome';
 import { useCompassWebPreferences } from './preferences';
 import { DataModelingWorkspaceTab as DataModelingWorkspace } from '@mongodb-js/compass-data-modeling';
 import { DataModelStorageServiceProviderInMemory } from '@mongodb-js/compass-data-modeling/web';
+import { WorkspaceTab as MyQueriesWorkspace } from '@mongodb-js/compass-saved-aggregations-queries';
+import {
+  FavoriteQueryStorageProvider,
+  RecentQueryStorageProvider,
+  compassFavoriteQueryStorageAccess,
+  compassRecentQueryStorageAccess,
+} from '@mongodb-js/my-queries-storage';
 import {
   CompassAssistantDrawer,
   CompassAssistantProvider,
@@ -175,61 +180,66 @@ function CompassWorkspace({
   onOpenConnectViaModal,
 }: CompassWorkspaceProps) {
   return (
-    <WorkspacesProvider
-      value={[
-        WelcomeWorkspaceTab,
-        DatabasesWorkspaceTab,
-        CollectionsWorkspaceTab,
-        CollectionWorkspace,
-        DataModelingWorkspace,
-      ]}
-    >
-      <CollectionTabsProvider
-        queryBar={CompassQueryBarPlugin}
-        tabs={[
-          CompassDocumentsPlugin,
-          CompassAggregationsPlugin,
-          CompassSchemaPlugin,
-          CompassIndexesPlugin,
-          CompassSchemaValidationPlugin,
-          CompassGlobalWritesPlugin,
-        ]}
-        modals={[
-          ExplainPlanCollectionTabModal,
-          ExportToLanguageCollectionTabModal,
-        ]}
-      >
-        <div
-          data-testid="compass-web-connected"
-          className={connectedContainerStyles}
+    <FavoriteQueryStorageProvider value={compassFavoriteQueryStorageAccess}>
+      <RecentQueryStorageProvider value={compassRecentQueryStorageAccess}>
+        <WorkspacesProvider
+          value={[
+            WelcomeWorkspaceTab,
+            DatabasesWorkspaceTab,
+            CollectionsWorkspaceTab,
+            CollectionWorkspace,
+            DataModelingWorkspace,
+            MyQueriesWorkspace,
+          ]}
         >
-          <WorkspacesPlugin
-            initialWorkspaceTabs={initialWorkspaceTabs}
-            openOnEmptyWorkspace={{ type: 'Welcome' }}
-            onActiveWorkspaceTabChange={onActiveWorkspaceTabChange}
-            renderSidebar={() => {
-              return (
-                <CompassSidebarPlugin
-                  onOpenConnectViaModal={onOpenConnectViaModal}
-                  isCompassWeb={true}
-                ></CompassSidebarPlugin>
-              );
-            }}
-            renderModals={() => {
-              return (
-                <>
-                  <CreateViewPlugin></CreateViewPlugin>
-                  <CreateNamespacePlugin></CreateNamespacePlugin>
-                  <DropNamespacePlugin></DropNamespacePlugin>
-                  <RenameCollectionPlugin></RenameCollectionPlugin>
-                  <CompassAssistantDrawer />
-                </>
-              );
-            }}
-          ></WorkspacesPlugin>
-        </div>
-      </CollectionTabsProvider>
-    </WorkspacesProvider>
+          <CollectionTabsProvider
+            queryBar={CompassQueryBarPlugin}
+            tabs={[
+              CompassDocumentsPlugin,
+              CompassAggregationsPlugin,
+              CompassSchemaPlugin,
+              CompassIndexesPlugin,
+              CompassSchemaValidationPlugin,
+              CompassGlobalWritesPlugin,
+            ]}
+            modals={[
+              ExplainPlanCollectionTabModal,
+              ExportToLanguageCollectionTabModal,
+            ]}
+          >
+            <div
+              data-testid="compass-web-connected"
+              className={connectedContainerStyles}
+            >
+              <WorkspacesPlugin
+                initialWorkspaceTabs={initialWorkspaceTabs}
+                openOnEmptyWorkspace={{ type: 'Welcome' }}
+                onActiveWorkspaceTabChange={onActiveWorkspaceTabChange}
+                renderSidebar={() => {
+                  return (
+                    <CompassSidebarPlugin
+                      onOpenConnectViaModal={onOpenConnectViaModal}
+                      isCompassWeb={true}
+                    ></CompassSidebarPlugin>
+                  );
+                }}
+                renderModals={() => {
+                  return (
+                    <>
+                      <CreateViewPlugin></CreateViewPlugin>
+                      <CreateNamespacePlugin></CreateNamespacePlugin>
+                      <DropNamespacePlugin></DropNamespacePlugin>
+                      <RenameCollectionPlugin></RenameCollectionPlugin>
+                      <CompassAssistantDrawer />
+                    </>
+                  );
+                }}
+              ></WorkspacesPlugin>
+            </div>
+          </CollectionTabsProvider>
+        </WorkspacesProvider>
+      </RecentQueryStorageProvider>
+    </FavoriteQueryStorageProvider>
   );
 }
 
@@ -280,6 +290,7 @@ const CompassWeb = ({
     onDebug,
   });
   const preferencesAccess = useCompassWebPreferences(initialPreferences);
+  // TODO: My Queries feature flag will be used to conditionally provide storage providers in COMPASS-9565
   const initialWorkspaceRef = useRef(initialWorkspace);
   const initialWorkspaceTabsRef = useRef(
     initialWorkspaceRef.current ? [initialWorkspaceRef.current] : []

packages/compass-web/src/preferences.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import type { AllPreferences } from 'compass-preferences-model/provider';
 import { CompassWebPreferencesAccess } from 'compass-preferences-model/provider';
 
@@ -47,6 +47,7 @@ export function useCompassWebPreferences(
       enableGenAISampleDocumentPassingOnAtlasProject: false,
       enableGenAIFeaturesAtlasOrg: false,
       enablePerformanceAdvisorBanner: true,
+      enableMyQueries: false,
       cloudFeatureRolloutAccess: {
         GEN_AI_COMPASS: false,
       },

packages/my-queries-storage/src/compass-query-storage.ts

@@ -15,7 +15,8 @@ export abstract class CompassQueryStorage<TSchema extends z.Schema> {
     protected readonly folder: string,
     protected readonly options: QueryStorageOptions
   ) {
-    // TODO: logic for whether we're in compass web or compass desktop
+    // Simple implementation - use FileUserData for now
+    // The use-atlas-user-data branch will add proper Atlas integration
     this.userData = new FileUserData(schemaValidator, folder, {
       basePath: options.basepath,
       serialize: (content) => EJSON.stringify(content, undefined, 2),

packages/my-queries-storage/src/index.ts

@@ -15,6 +15,13 @@ export {
 } from './compass-query-storage';
 export type { RecentQuery, FavoriteQuery } from './query-storage-schema';
 
+// Export providers for use in applications
+export {
+  FavoriteQueryStorageProvider,
+  RecentQueryStorageProvider,
+  PipelineStorageProvider,
+} from './provider';
+
 // These are exported to aid in testing
 export const compassFavoriteQueryStorageAccess: FavoriteQueryStorageAccess = {
   getStorage() {