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

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

@@ -8,12 +8,12 @@ import {
   InteractivePopover,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
+import { usePreference } from 'compass-preferences-model/provider';
 
 import PipelineStages from './pipeline-stages';
 import PipelineActions from './pipeline-actions';
 import SavedPipelines from '../../saved-pipelines/saved-pipelines';
 import type { RootState } from '../../../modules';
-import { usePipelineStorage } from '@mongodb-js/my-queries-storage/provider';
 
 const containerStyles = css({
   display: 'flex',
@@ -110,9 +110,7 @@ export const PipelineHeader: React.FunctionComponent<PipelineHeaderProps> = ({
   isOptionsVisible,
   isOpenPipelineVisible,
 }) => {
-  // 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 isSavingAggregationsEnabled = !!usePipelineStorage();
+  const isSavingAggregationsEnabled = usePreference('enableMyQueries');
   return (
     <div className={containerStyles} data-testid="pipeline-header">
       {isOpenPipelineVisible && isSavingAggregationsEnabled && (

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Button, Icon, css, spacing } from '@mongodb-js/compass-components';
+import { Button, css, Icon, spacing } from '@mongodb-js/compass-components';
 import { exportToLanguage } from '../../../modules/export-to-language';
 import { SaveMenu } from './pipeline-menus';
 import PipelineName from './pipeline-name';
@@ -10,7 +10,8 @@ import { getIsPipelineInvalidFromBuilderState } from '../../../modules/pipeline-
 import { confirmNewPipeline } from '../../../modules/is-new-pipeline-confirm';
 import { hiddenOnNarrowPipelineToolbarStyles } from '../pipeline-toolbar-container';
 import ModifySourceBanner from '../../modify-source-banner';
-import { usePipelineStorage } from '@mongodb-js/my-queries-storage/provider';
+
+import { usePreference } from 'compass-preferences-model/provider';
 
 const containerStyles = css({
   display: 'flex',
@@ -47,9 +48,7 @@ export const PipelineSettings: React.FunctionComponent<
   onExportToLanguage,
   onCreateNewPipeline,
 }) => {
-  // 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 enableSavedAggregationsQueries = usePreference('enableMyQueries');
   const isPipelineNameDisplayed =
     !editViewName && !!enableSavedAggregationsQueries;
 

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/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;
@@ -851,6 +852,18 @@ export const storedUserPreferencesProps: Required<{
     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',
+  },
+
   enableAggregationBuilderRunPipeline: {
     ui: true,
     cli: 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-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/package.json

@@ -89,6 +89,7 @@
     "@mongodb-js/compass-indexes": "^5.71.1",
     "@mongodb-js/compass-logging": "^1.7.13",
     "@mongodb-js/compass-query-bar": "^8.73.1",
+    "@mongodb-js/compass-saved-aggregations-queries": "^1.72.1",
     "@mongodb-js/compass-schema": "^6.73.1",
     "@mongodb-js/compass-schema-validation": "^6.72.1",
     "@mongodb-js/compass-sidebar": "^5.72.1",
@@ -100,6 +101,7 @@
     "@mongodb-js/devtools-proxy-support": "^0.5.2",
     "@mongodb-js/eslint-config-compass": "^1.4.8",
     "@mongodb-js/mocha-config-compass": "^1.7.1",
+    "@mongodb-js/my-queries-storage": "^0.39.1",
     "@mongodb-js/prettier-config-compass": "^1.2.8",
     "@mongodb-js/testing-library-compass": "^1.3.11",
     "@mongodb-js/tsconfig-compass": "^1.2.10",

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

@@ -15,17 +15,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';
@@ -40,13 +43,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';
@@ -55,13 +53,14 @@ 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 { CompassAssistantProvider } from '@mongodb-js/compass-assistant';
 import { CompassAssistantDrawerWithConnections } from './compass-assistant-drawer';
 import { APP_NAMES_FOR_PROMPT } from '@mongodb-js/compass-assistant';
@@ -188,6 +187,7 @@ function CompassWorkspace({
         CollectionsWorkspaceTab,
         CollectionWorkspace,
         DataModelingWorkspace,
+        MyQueriesWorkspace,
       ]}
     >
       <CollectionTabsProvider
@@ -287,6 +287,7 @@ const CompassWeb = ({
     onDebug,
   });
   const preferencesAccess = useCompassWebPreferences(initialPreferences);
+  // TODO (COMPASS-9565): My Queries feature flag will be used to conditionally provide storage providers
   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

@@ -1,7 +1,10 @@
-import { UUID, EJSON } from 'bson';
-import { type z } from '@mongodb-js/compass-user-data';
-import { type IUserData, FileUserData } from '@mongodb-js/compass-user-data';
-import { RecentQuerySchema, FavoriteQuerySchema } from './query-storage-schema';
+import { EJSON, UUID } from 'bson';
+import {
+  FileUserData,
+  type IUserData,
+  type z,
+} from '@mongodb-js/compass-user-data';
+import { FavoriteQuerySchema, RecentQuerySchema } from './query-storage-schema';
 import type { FavoriteQueryStorage, RecentQueryStorage } from './query-storage';
 
 export type QueryStorageOptions = {
@@ -10,12 +13,14 @@ export type QueryStorageOptions = {
 
 export abstract class CompassQueryStorage<TSchema extends z.Schema> {
   protected readonly userData: IUserData<TSchema>;
+
   constructor(
     schemaValidator: TSchema,
     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
+    // TODO(COMPASS-9565): 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),