feat(compass-web): disable search indexes via preferences COMPASS-7595 (#5533)

mabaasit · web-flow · commit 87a791a3bdae · 2024-03-05T00:08:43.000+01:00
* add banner

* hardcode link
diff --git a/packages/compass-components/src/components/breadcrumb.tsx b/packages/compass-components/src/components/breadcrumb.tsx
@@ -66,6 +66,7 @@ export const Breadcrumbs = ({
         if (isLast) {
           return (
             <Body
+              key={item.name}
               className={cx(
                 textStyles,
                 darkMode ? lastItemStylesDark : lastItemStylesLight
diff --git a/packages/compass-e2e-tests/tests/search-indexes.test.ts b/packages/compass-e2e-tests/tests/search-indexes.test.ts
@@ -161,9 +161,7 @@ describe.skip('Search Indexes', function () {
     if (!serverSatisfies('>= 4.1.11')) {
       this.skip();
     }
-    compass = await init(this.test?.fullTitle(), {
-      extraSpawnArgs: ['--enableAtlasSearchIndexManagement'],
-    });
+    compass = await init(this.test?.fullTitle());
     browser = compass.browser;
   });
 
diff --git a/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.spec.tsx b/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.spec.tsx
@@ -47,7 +47,6 @@ describe('IndexesToolbar Component', function () {
     describe('with atlas search index management is disabled', function () {
       beforeEach(async function () {
         await preferences.savePreferences({
-          enableAtlasSearchIndexManagement: false,
           showInsights: true,
         });
 
@@ -65,7 +64,6 @@ describe('IndexesToolbar Component', function () {
       describe('when cluster has Atlas Search available', function () {
         beforeEach(async function () {
           await preferences.savePreferences({
-            enableAtlasSearchIndexManagement: true,
             showInsights: true,
           });
 
@@ -91,7 +89,6 @@ describe('IndexesToolbar Component', function () {
       describe('when cluster does not support Atlas Search', function () {
         beforeEach(async function () {
           await preferences.savePreferences({
-            enableAtlasSearchIndexManagement: true,
             showInsights: true,
           });
 
@@ -172,12 +169,6 @@ describe('IndexesToolbar Component', function () {
   });
 
   describe('allows creating of indexes', function () {
-    beforeEach(async function () {
-      await preferences.savePreferences({
-        enableAtlasSearchIndexManagement: true,
-      });
-    });
-
     context('when search indexes is not supported', function () {
       it('calls onCreateRegularIndex when index button is clicked', function () {
         const onCreateRegularIndexSpy = sinon.spy();
@@ -298,7 +289,6 @@ describe('IndexesToolbar Component', function () {
 
     beforeEach(async function () {
       await preferences.savePreferences({
-        enableAtlasSearchIndexManagement: true,
         showInsights: true,
       });
 
diff --git a/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx b/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx
@@ -30,10 +30,6 @@ import { showCreateModal as onCreateRegularIndex } from '../../modules/regular-i
 import type { IndexView } from '../../modules/index-view';
 import { changeIndexView } from '../../modules/index-view';
 
-const containerStyles = css({
-  margin: `${spacing[3]}px 0`,
-});
-
 const toolbarButtonsContainer = css({
   display: 'flex',
   flexDirection: 'row',
@@ -46,7 +42,6 @@ const alignSelfEndStyles = css({
   marginLeft: 'auto',
 });
 
-const errorStyles = css({ marginTop: spacing[2] });
 const spinnerStyles = css({ marginRight: spacing[2] });
 
 const createIndexButtonContainerStyles = css({
@@ -87,10 +82,7 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
   onChangeIndexView,
   readOnly, // preferences readOnly.
 }) => {
-  const isSearchManagementActive = usePreference(
-    'enableAtlasSearchIndexManagement'
-  );
-
+  const isSearchManagementActive = usePreference('enableAtlasSearchIndexes');
   const showInsights = usePreference('showInsights') && !errorMessage;
   const showCreateIndexButton = !isReadonlyView && !readOnly && !errorMessage;
   const refreshButtonIcon = isRefreshing ? (
@@ -102,7 +94,7 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
   );
 
   return (
-    <div className={containerStyles} data-testid="indexes-toolbar-container">
+    <div data-testid="indexes-toolbar-container">
       {!isReadonlyView && (
         <div data-testid="indexes-toolbar">
           <div className={toolbarButtonsContainer}>
@@ -210,13 +202,10 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
       )}
       {isReadonlyView ? (
         <WarningSummary
-          className={errorStyles}
           warnings={['Readonly views may not contain indexes.']}
         />
       ) : (
-        !!errorMessage && (
-          <ErrorSummary className={errorStyles} errors={[errorMessage]} />
-        )
+        !!errorMessage && <ErrorSummary errors={[errorMessage]} />
       )}
     </div>
   );
diff --git a/packages/compass-indexes/src/components/indexes/indexes.tsx b/packages/compass-indexes/src/components/indexes/indexes.tsx
@@ -1,6 +1,12 @@
 import React, { useCallback, useEffect } from 'react';
 import { connect } from 'react-redux';
-import { css, spacing } from '@mongodb-js/compass-components';
+import {
+  Banner,
+  Body,
+  Link,
+  css,
+  spacing,
+} from '@mongodb-js/compass-components';
 
 import IndexesToolbar from '../indexes-toolbar/indexes-toolbar';
 import RegularIndexesTable from '../regular-indexes-table/regular-indexes-table';
@@ -17,19 +23,33 @@ import {
   UpdateSearchIndexModal,
 } from '../search-indexes-modals';
 import type { IndexView } from '../../modules/index-view';
+import { usePreference } from 'compass-preferences-model/provider';
 
 // This constant is used as a trigger to show an insight whenever number of
 // indexes in a collection is more than what is specified here.
 const IDEAL_NUMBER_OF_MAX_INDEXES = 10;
 
 const containerStyles = css({
   margin: spacing[3],
-  marginTop: 0,
+  gap: spacing[3],
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
 });
 
+const AtlasIndexesBanner = () => {
+  return (
+    <Banner variant="info">
+      <Body weight="medium">Looking for search indexes?</Body>
+      These indexes can be created and viewed under{' '}
+      <Link href={'#/clusters/atlasSearch'} target="_blank" hideExternalIcon>
+        Atlas Search
+      </Link>
+      .
+    </Banner>
+  );
+};
+
 type IndexesProps = {
   isReadonlyView?: boolean;
   regularIndexes: Pick<
@@ -88,6 +108,8 @@ export function Indexes({
     loadIndexes();
   }, [loadIndexes]);
 
+  const enableAtlasSearchIndexes = usePreference('enableAtlasSearchIndexes');
+
   return (
     <div className={containerStyles}>
       <IndexesToolbar
@@ -96,6 +118,7 @@ export function Indexes({
         isRefreshing={isRefreshing}
         onRefreshIndexes={onRefreshIndexes}
       />
+      {!isReadonlyView && !enableAtlasSearchIndexes && <AtlasIndexesBanner />}
       {!isReadonlyView && currentIndexesView === 'regular-indexes' && (
         <RegularIndexesTable />
       )}
diff --git a/packages/compass-preferences-model/src/feature-flags.ts b/packages/compass-preferences-model/src/feature-flags.ts
@@ -17,7 +17,6 @@ export type FeatureFlags = {
   enableOidc: boolean; // Not capitalized "OIDC" for spawn arg casing.
   newExplainPlan: boolean;
   showInsights: boolean;
-  enableAtlasSearchIndexManagement: boolean;
   enableBulkUpdateOperations: boolean;
   enableBulkDeleteOperations: boolean;
   enableRenameCollectionModal: boolean;
@@ -54,17 +53,6 @@ export const featureFlags: Required<{
     },
   },
 
-  /**
-   * Feature flag for Atlas Search Index Management.
-   * Epic: COMPASS-6599
-   */
-  enableAtlasSearchIndexManagement: {
-    stage: 'released',
-    description: {
-      short: 'Enable Atlas Search Index management.',
-      long: 'Allows listing, creating, updating and deleting Atlas Search indexes.',
-    },
-  },
   /**
    * Feature flag bulk updates
    * Epic: COMPASS-6671
diff --git a/packages/compass-preferences-model/src/preferences-schema.ts b/packages/compass-preferences-model/src/preferences-schema.ts
@@ -50,6 +50,7 @@ export type UserConfigurablePreferences = PermanentFeatureFlags &
     // Features that are enabled by default in Compass, but are disabled in Data
     // Explorer
     enableExplainPlan: boolean;
+    enableAtlasSearchIndexes: boolean;
     enableImportExport: boolean;
     enableAggregationBuilderRunPipeline: boolean;
     enableAggregationBuilderExtraOptions: boolean;
@@ -646,6 +647,17 @@ export const storedUserPreferencesProps: Required<{
     type: 'string',
   },
 
+  enableAtlasSearchIndexes: {
+    ui: true,
+    cli: true,
+    global: true,
+    description: {
+      short: 'Enable Atlas Search Indexes',
+    },
+    validator: z.boolean().default(true),
+    type: 'boolean',
+  },
+
   enableImportExport: {
     ui: true,
     cli: true,
diff --git a/packages/compass-web/src/index.tsx b/packages/compass-web/src/index.tsx
@@ -153,6 +153,7 @@ const CompassWeb = ({
       enableExplainPlan: true,
       enableAggregationBuilderRunPipeline: true,
       enableAggregationBuilderExtraOptions: true,
+      enableAtlasSearchIndexes: false,
       enableImportExport: false,
       enableGenAIFeatures: false,
       cloudFeatureRolloutAccess: {
