feat(compass-aggregations): add confirm banner for edit pipeline and new banners COMPASS-9700 (#7198)

* add confirmation banner

* add version incompatible banner

* add disabled tooltip

* fix incorrect readonly

* add tests

* add missing default params

* move isPipelineSearchQueryable into compass-utils and update dependencies

* add mongodb to dependencies in compass-utils

* make isSearchPipelineQueryable true for not read only views

* fix update-view.spec.ts

* add negative test case

* remove async

* just introduce new function to return whether has search indexes

* remove compass-utils dep

* remove compass utils changes and cleanup

* update lock file

* fix accidental remove

* fix stage.spec.ts

* return false instead of errror

* check 8.0+

* fix test

* update package-lock

Author: DarshanaVenkatesh

package-lock.json

@@ -72,7 +72,7 @@
     "@mongodb-js/compass-utils": "^0.9.10",
     "@mongodb-js/compass-workspaces": "^0.51.0",
     "@mongodb-js/explain-plan-helper": "^1.4.17",
-    "@mongodb-js/mongodb-constants": "^0.12.2",
+    "@mongodb-js/mongodb-constants": "^0.14.0",
     "@mongodb-js/my-queries-storage": "^0.37.0",
     "@mongodb-js/shell-bson-parser": "^1.2.0",
     "bson": "^6.10.4",

packages/compass-aggregations/package.json

@@ -123,4 +123,26 @@ export const createSearchIndex = (): PipelineBuilderThunkAction<void> => {
   };
 };
 
+/**
+ * Checks whether a namespace has existing search indexes
+ *
+ * @param namespace - collection/view namespace
+ * @param dataService - dataService instance
+ * @returns whether namespace has existing search indexes
+ */
+export const namespaceHasSearchIndexes = async (
+  namespace: string,
+  dataService: { getSearchIndexes?: (ns: string) => Promise<SearchIndex[]> }
+): Promise<boolean> => {
+  try {
+    if (!dataService.getSearchIndexes) {
+      throw new Error('Cannot get search indexes in this environment');
+    }
+    const indexes = await dataService.getSearchIndexes(namespace);
+    return indexes.length > 0;
+  } catch {
+    return false;
+  }
+};
+
 export default reducer;

packages/compass-aggregations/src/modules/search-indexes.ts

@@ -10,6 +10,10 @@ import {
 } from '@mongodb-js/compass-connections/provider';
 import { createDefaultConnectionInfo } from '@mongodb-js/testing-library-compass';
 
+// Importing this to stub showConfirmation
+import * as updateViewSlice from './update-view';
+import * as searchIndexesSlice from './search-indexes';
+
 const TEST_CONNECTION_INFO = { ...createDefaultConnectionInfo(), title: '' };
 
 describe('update-view module', function () {
@@ -48,10 +52,20 @@ describe('update-view module', function () {
     let stateMock: any;
     let getStateMock: () => any;
     let updateCollectionFake = sinon.fake();
+    let showConfirmationStub: sinon.SinonStub;
+    let namespaceHasSearchIndexesStub: sinon.SinonStub;
 
-    beforeEach(async function () {
+    beforeEach(function () {
       dispatchFake = sinon.fake();
       updateCollectionFake = sinon.fake.resolves(undefined);
+      showConfirmationStub = sinon
+        .stub(updateViewSlice, 'showConfirmation')
+        .resolves(true);
+
+      namespaceHasSearchIndexesStub = sinon
+        .stub(searchIndexesSlice, 'namespaceHasSearchIndexes')
+        .resolves(true);
+
       stateMock = {
         pipelineBuilder: { pipelineMode: 'builder-ui' },
         focusMode: { isEnabled: false },
@@ -62,20 +76,57 @@ describe('update-view module', function () {
             updateCollection: updateCollectionFake,
           },
         },
+        serverVersion: '8.1.0',
       };
       getStateMock = () => stateMock;
+    });
 
+    afterEach(function () {
+      showConfirmationStub.restore();
+      namespaceHasSearchIndexesStub.restore();
+    });
+
+    it('first it calls to dismiss any existing error', async function () {
       const runUpdateView = updateView();
       await runUpdateView(dispatchFake, getStateMock, thunkArg as any);
-    });
 
-    it('first it calls to dismiss any existing error', function () {
       expect(dispatchFake.firstCall.args[0]).to.deep.equal({
         type: 'aggregations/update-view/DISMISS_VIEW_UPDATE_ERROR',
       });
     });
 
-    it('calls the data service to update the view for the provided ns', function () {
+    it('does not shows confirmation banner if search indexes are not present', async function () {
+      namespaceHasSearchIndexesStub.resolves(false);
+      const runUpdateView = updateView();
+      await runUpdateView(dispatchFake, getStateMock, thunkArg as any);
+
+      expect(showConfirmationStub.calledOnce).to.be.false;
+    });
+
+    it('shows confirmation banner when search indexes are present', async function () {
+      const runUpdateView = updateView();
+      await runUpdateView(dispatchFake, getStateMock, thunkArg as any);
+
+      expect(showConfirmationStub.calledOnce).to.be.true;
+      expect(showConfirmationStub.firstCall.args[0]).to.deep.include({
+        title: `Are you sure you want to update the view?`,
+        buttonText: 'Update',
+      });
+    });
+
+    it('does not update view if not confirmed', async function () {
+      showConfirmationStub.resolves(false);
+
+      const runUpdateView = updateView();
+      await runUpdateView(dispatchFake, getStateMock, thunkArg as any);
+
+      expect(updateCollectionFake.calledOnce).to.be.false;
+    });
+
+    it('calls the data service to update the view for the provided ns', async function () {
+      const runUpdateView = updateView();
+      await runUpdateView(dispatchFake, getStateMock, thunkArg as any);
+
       expect(updateCollectionFake.firstCall.args[0]).to.equal('aa.bb');
       expect(updateCollectionFake.firstCall.args[1]).to.deep.equal({
         viewOn: 'bb',

packages/compass-aggregations/src/modules/update-view.spec.ts

@@ -8,6 +8,9 @@ import {
 import type { PipelineBuilderThunkAction } from '.';
 import { isAction } from '../utils/is-action';
 import type { AnyAction } from 'redux';
+import { showConfirmation as showConfirmationModal } from '@mongodb-js/compass-components';
+import { namespaceHasSearchIndexes } from './search-indexes';
+import { VIEW_PIPELINE_UTILS } from '@mongodb-js/mongodb-constants';
 
 export type UpdateViewState = null | string;
 
@@ -73,6 +76,8 @@ export const dismissViewError = (): DismissViewUpdateErrorAction => ({
   type: DISMISS_VIEW_UPDATE_ERROR,
 });
 
+//Exporting this for test only to stub it and set its value
+export const showConfirmation = showConfirmationModal;
 /**
  * Updates a view.
  *
@@ -96,6 +101,7 @@ export const updateView = (): PipelineBuilderThunkAction<Promise<void>> => {
     const state = getState();
     const ds = state.dataService.dataService;
     const viewNamespace = state.editViewName;
+    const serverVersion = state.serverVersion;
 
     if (!viewNamespace) {
       return;
@@ -107,6 +113,30 @@ export const updateView = (): PipelineBuilderThunkAction<Promise<void>> => {
       getState(),
       pipelineBuilder
     );
+
+    if (
+      VIEW_PIPELINE_UTILS.isVersionSearchCompatibleForViewsDataExplorer(
+        serverVersion
+      ) &&
+      ds &&
+      (await namespaceHasSearchIndexes(viewNamespace, ds))
+    ) {
+      const pipelineIsSearchQueryable =
+        VIEW_PIPELINE_UTILS.isPipelineSearchQueryable(viewPipeline);
+      const confirmed = await showConfirmation({
+        title: `Are you sure you want to update the view?`,
+        description: pipelineIsSearchQueryable
+          ? 'There are search indexes created on this view. Updating the view will result in an index rebuild, which will consume additional resources on your cluster.'
+          : 'This update will make the view incompatible with search indexes and will cause all search indexes to fail. Only views containing $addFields, $set or $match stages with the $expr operator are compatible with search indexes.',
+        buttonText: 'Update',
+        variant: pipelineIsSearchQueryable ? 'primary' : 'danger',
+      });
+
+      if (!confirmed) {
+        return;
+      }
+    }
+
     const options = {
       viewOn: toNS(state.namespace).collection,
       pipeline: viewPipeline,

packages/compass-aggregations/src/modules/update-view.ts

@@ -66,6 +66,24 @@ describe('utils', function () {
         expect(searchMeta.length).to.be.equal(1);
       });
 
+      it('returns $search stage for a view', function () {
+        const search = filterStageOperators({
+          ...filter,
+          sourceName: 'simple.sample',
+        }).filter((o) => o.name === '$search');
+
+        expect(search.length).to.be.equal(1);
+      });
+
+      it('returns $searchMeta stage for a view', function () {
+        const searchMeta = filterStageOperators({
+          ...filter,
+          sourceName: 'simple.sample',
+        }).filter((o) => o.name === '$searchMeta');
+
+        expect(searchMeta.length).to.be.equal(1);
+      });
+
       // $documents only works for db.aggregate, not coll.aggregate
       it('does not return $documents stage for a regular collection', function () {
         const documents = filterStageOperators({ ...filter }).filter(
@@ -97,17 +115,6 @@ describe('utils', function () {
 
         expect(searchStages.length).to.be.equal(0);
       });
-
-      it('does not return full-text search stages for views', function () {
-        const searchStages = filterStageOperators({
-          ...filter,
-          sourceName: 'simple.sample',
-        }).filter((o) =>
-          ['$search', '$searchMeta', '$documents'].includes(o.name)
-        );
-
-        expect(searchStages.length).to.be.equal(0);
-      });
     });
 
     context('when on-prem', function () {

packages/compass-aggregations/src/utils/stage.spec.ts

@@ -56,7 +56,7 @@
     "@mongodb-js/compass-telemetry": "^1.13.0",
     "@mongodb-js/compass-workspaces": "^0.51.0",
     "@mongodb-js/connection-info": "^0.17.1",
-    "@mongodb-js/mongodb-constants": "^0.12.2",
+    "@mongodb-js/mongodb-constants": "^0.14.0",
     "compass-preferences-model": "^2.50.0",
     "hadron-document": "^8.9.5",
     "mongodb": "^6.17.0",

packages/compass-collection/package.json

@@ -73,7 +73,7 @@
     "@codemirror/view": "^6.38.0",
     "@lezer/highlight": "^1.2.1",
     "@mongodb-js/compass-components": "^1.48.0",
-    "@mongodb-js/mongodb-constants": "^0.12.2",
+    "@mongodb-js/mongodb-constants": "^0.14.0",
     "mongodb-query-parser": "^4.3.0",
     "polished": "^4.2.2",
     "prettier": "^2.7.1",

packages/compass-editor/package.json

@@ -76,7 +76,7 @@
     "@mongodb-js/compass-logging": "^1.7.11",
     "@mongodb-js/compass-telemetry": "^1.13.0",
     "@mongodb-js/compass-workspaces": "^0.51.0",
-    "@mongodb-js/mongodb-constants": "^0.12.2",
+    "@mongodb-js/mongodb-constants": "^0.14.0",
     "@mongodb-js/shell-bson-parser": "^1.2.0",
     "@mongodb-js/connection-info": "^0.17.1",
     "bson": "^6.10.4",

packages/compass-indexes/package.json

@@ -13,6 +13,7 @@ import { IndexesToolbar } from './indexes-toolbar';
 import type { PreferencesAccess } from 'compass-preferences-model';
 import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
 import { PreferencesProvider } from 'compass-preferences-model/provider';
+import type { Document } from 'mongodb';
 
 describe('IndexesToolbar Component', function () {
   before(cleanup);
@@ -39,6 +40,7 @@ describe('IndexesToolbar Component', function () {
           onRefreshIndexes={() => {}}
           isSearchIndexesSupported={false}
           isRefreshing={false}
+          collectionStats={{ index_count: 0, index_size: 0, pipeline: [] }}
           onIndexViewChanged={() => {}}
           onCreateRegularIndexClick={() => {}}
           onCreateSearchIndexClick={() => {}}
@@ -153,10 +155,38 @@ describe('IndexesToolbar Component', function () {
         expect(screen.getByText('Create Search Index')).to.be.visible;
       });
 
-      it('should not render the refresh button', function () {
+      it('should render the refresh button', function () {
         expect(screen.queryByText('Refresh')).to.be.visible;
       });
     });
+
+    describe('and pipeline is not queryable', function () {
+      it('should disable the create search index button', function () {
+        const pipelineMock: Document[] = [
+          { $project: { newField: 'testValue' } },
+        ];
+        const mockCollectionStats = {
+          index_count: 0,
+          index_size: 0,
+          pipeline: pipelineMock,
+        };
+
+        renderIndexesToolbar({
+          isReadonlyView: true,
+          serverVersion: '8.1.0',
+          indexView: 'search-indexes',
+          collectionStats: mockCollectionStats,
+        });
+
+        expect(screen.getByText('Create Search Index')).to.be.visible;
+        expect(
+          screen
+            .getByText('Create Search Index')
+            .closest('button')
+            ?.getAttribute('aria-disabled')
+        ).to.equal('true');
+      });
+    });
   });
 
   describe('when it is preferences ReadOnly', function () {