chore(databases-collections): add UI for rename collection warning COMPASS-7664 (#5458)

Author: baileympearson

package-lock.json

@@ -11,8 +11,6 @@ import type { CompassBrowser } from '../helpers/compass-browser';
 import { createBlankCollection, dropDatabase } from '../helpers/insert-data';
 import * as Selectors from '../helpers/selectors';
 
-import { setTimeout } from 'timers/promises';
-import { saveAggregationPipeline } from '../helpers/commands/save-aggregation-pipeline';
 import { setFeature } from '../helpers/commands';
 const initialName = 'numbers';
 const newName = 'renamed';
@@ -276,128 +274,4 @@ describe('Collection Rename Modal', () => {
       expect(await modal.collectionNameInput.getValue()).to.equal(initialName);
     });
   });
-
-  describe('saved aggregations', () => {
-    beforeEach(
-      'navigate to aggregations tab and save pipeline on test collection',
-      async () => {
-        // Some tests navigate away from the numbers collection aggregations tab
-        await browser.navigateToCollectionTab(
-          'rename-collection',
-          'numbers',
-          'Aggregations'
-        );
-        // Get us back to the empty stage every time. Also test the Create New
-        // Pipeline flow while at it.
-        await browser.clickVisible(Selectors.CreateNewPipelineButton);
-
-        await browser.clickVisible(Selectors.AddStageButton);
-        await browser.$(Selectors.stageEditor(0)).waitForDisplayed();
-        // sanity check to make sure there's only one stage
-        const stageContainers = await browser.$$(Selectors.StageCard);
-        expect(stageContainers).to.have.lengthOf(1);
-
-        await saveAggregationPipeline(browser, 'my-aggregation', [
-          { $match: `{ name: 'john' }` },
-        ]);
-      }
-    );
-
-    // functionality not implemented and tests failing
-    it.skip('preserves a saved aggregation for a namespace when a collection is renamed', async () => {
-      // open the rename collection modal
-      await browser.hover(
-        Selectors.sidebarCollection(databaseName, initialName)
-      );
-      await browser.clickVisible(Selectors.CollectionShowActionsButton);
-      await browser.clickVisible(Selectors.RenameCollectionButton);
-      await renameCollectionSuccessFlow(browser, newName);
-
-      // confirm the saved aggregation is still present for the newly renamed namespace
-      await browser.navigateToCollectionTab(
-        'rename-collection',
-        newName,
-        'Aggregations'
-      );
-
-      await browser.waitForAnimations(
-        Selectors.AggregationOpenSavedPipelinesButton
-      );
-      await browser.clickVisible(Selectors.AggregationOpenSavedPipelinesButton);
-      await browser.waitForAnimations(
-        Selectors.AggregationSavedPipelinesPopover
-      );
-      await browser
-        .$(Selectors.AggregationSavedPipelineCard('my-aggregation'))
-        .waitForDisplayed();
-    });
-  });
-
-  describe('saved queries', () => {
-    beforeEach('navigate to documents tab and save a query', async () => {
-      // set guide cue to not show up
-      await browser.execute((key) => {
-        localStorage.setItem(key, 'true');
-      }, 'has_seen_stage_wizard_guide_cue');
-
-      const favoriteQueryName = 'list of numbers greater than 10 - query';
-
-      // Run a query
-      await browser.navigateToCollectionTab(
-        'rename-collection',
-        'numbers',
-        'Documents'
-      );
-
-      await browser.runFindOperation('Documents', `{i: {$gt: 10}}`, {
-        limit: '10',
-      });
-      await browser.clickVisible(Selectors.QueryBarHistoryButton);
-
-      // Wait for the popover to show
-      const history = await browser.$(Selectors.QueryBarHistory);
-      await history.waitForDisplayed();
-
-      // wait for the recent item to show.
-      const recentCard = await browser.$(Selectors.QueryHistoryRecentItem);
-      await recentCard.waitForDisplayed();
-
-      // Save the ran query
-      await browser.hover(Selectors.QueryHistoryRecentItem);
-      await browser.clickVisible(Selectors.QueryHistoryFavoriteAnItemButton);
-      await browser.setValueVisible(
-        Selectors.QueryHistoryFavoriteItemNameField,
-        favoriteQueryName
-      );
-      await browser.clickVisible(Selectors.QueryHistorySaveFavoriteItemButton);
-    });
-
-    // functionality not implemented and tests failing
-    it.skip('preserves a saved query for a namespace when a collection is renamed', async () => {
-      // open the rename collection modal
-      await browser.hover(
-        Selectors.sidebarCollection(databaseName, initialName)
-      );
-      await browser.clickVisible(Selectors.CollectionShowActionsButton);
-      await browser.clickVisible(Selectors.RenameCollectionButton);
-      await renameCollectionSuccessFlow(browser, newName);
-      await browser.navigateToCollectionTab(
-        'rename-collection',
-        newName,
-        'Documents'
-      );
-
-      await browser.clickVisible(Selectors.QueryBarHistoryButton);
-
-      // Wait for the popover to show
-      const history = await browser.$(Selectors.QueryBarHistory);
-      await history.waitForDisplayed();
-
-      await browser.clickVisible(Selectors.QueryHistoryFavoritesButton);
-
-      await browser.$(Selectors.QueryHistoryFavoriteItem).waitForDisplayed();
-
-      await setTimeout(3000);
-    });
-  });
 });

packages/compass-e2e-tests/tests/collection-rename.test.ts

@@ -53,6 +53,7 @@
     "@mongodb-js/compass-logging": "^1.2.12",
     "@mongodb-js/compass-workspaces": "^0.4.4",
     "@mongodb-js/databases-collections-list": "^1.22.4",
+    "@mongodb-js/my-queries-storage": "^0.4.3",
     "compass-preferences-model": "^2.17.4",
     "hadron-app-registry": "^9.1.6",
     "mongodb-data-service": "^22.17.4",
@@ -94,6 +95,7 @@
     "@mongodb-js/compass-logging": "^1.2.12",
     "@mongodb-js/compass-workspaces": "^0.4.4",
     "@mongodb-js/databases-collections-list": "^1.22.4",
+    "@mongodb-js/my-queries-storage": "^0.4.3",
     "compass-preferences-model": "^2.17.4",
     "hadron-app-registry": "^9.1.6",
     "mongodb-data-service": "^22.17.4"

packages/databases-collections/package.json

@@ -1,12 +1,18 @@
 import React from 'react';
 import Sinon from 'sinon';
 import { expect } from 'chai';
-import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import {
+  render,
+  screen,
+  cleanup,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
 
 import { RenameCollectionPlugin } from '../..';
 import AppRegistry from 'hadron-app-registry';
 
-describe('CreateCollectionModal [Component]', function () {
+describe('RenameCollectionModal [Component]', function () {
   const sandbox = Sinon.createSandbox();
   const appRegistry = sandbox.spy(new AppRegistry());
   const dataService = {
@@ -21,18 +27,30 @@ describe('CreateCollectionModal [Component]', function () {
       },
     },
   };
+  const favoriteQueries = {
+    getStorage: () => ({
+      loadAll: sandbox.stub().resolves([]),
+    }),
+  };
+  const pipelineStorage = {
+    loadAll: sandbox.stub().resolves([]),
+  };
   context('when the modal is visible', function () {
-    beforeEach(function () {
+    beforeEach(async function () {
       const Plugin = RenameCollectionPlugin.withMockServices({
         globalAppRegistry: appRegistry,
         dataService,
         instance: instanceModel as any,
+        queryStorage: favoriteQueries as any,
+        pipelineStorage: pipelineStorage as any,
       });
       render(<Plugin> </Plugin>);
       appRegistry.emit('open-rename-collection', {
         database: 'foo',
         collection: 'bar',
       });
+
+      await waitFor(() => screen.getByText('Rename collection'));
     });
 
     afterEach(function () {
@@ -109,6 +127,62 @@ describe('CreateCollectionModal [Component]', function () {
         const submitButton = screen.getByTestId('submit-button');
         expect(submitButton.textContent).to.equal('Yes, rename collection');
       });
+
+      it('displays the "unsaved queries / aggregations" may be lost warning', function () {
+        const renameCollectionWarningBanner = screen.getByTestId(
+          'rename-collection-modal-warning'
+        );
+        expect(renameCollectionWarningBanner.textContent).to.include(
+          'Renaming collection will result in loss of any unsaved queries, filters or aggregation pipeline.'
+        );
+      });
+
+      describe('when the user has no saved aggregations or queries for the old namespace', function () {
+        it('does not display the saved queries and aggregations warning', () => {
+          const renameCollectionWarningBanner = screen.getByTestId(
+            'rename-collection-modal-warning'
+          );
+          expect(renameCollectionWarningBanner.textContent).not.to.include(
+            'Additionally, any saved queries or aggregations targeting this collection will need to be remapped to the new namespace.'
+          );
+        });
+      });
+
+      describe('when the user has saved aggregations or queries for the old namespace', function () {
+        beforeEach(async function () {
+          cleanup();
+          pipelineStorage.loadAll.resolves([{ namespace: 'foo.bar' }]);
+          const Plugin = RenameCollectionPlugin.withMockServices({
+            globalAppRegistry: appRegistry,
+            dataService,
+            instance: instanceModel as any,
+            queryStorage: favoriteQueries as any,
+            pipelineStorage: pipelineStorage as any,
+          });
+          render(<Plugin> </Plugin>);
+          appRegistry.emit('open-rename-collection', {
+            database: 'foo',
+            collection: 'bar',
+          });
+
+          await waitFor(() => screen.getByText('Rename collection'));
+
+          const submitButton = screen.getByTestId('submit-button');
+          const input = screen.getByTestId('rename-collection-name-input');
+          fireEvent.change(input, { target: { value: 'baz' } });
+          fireEvent.click(submitButton);
+
+          expect(screen.getByTestId('rename-collection-modal')).to.exist;
+        });
+        it('does not display the saved queries and aggregations warning', () => {
+          const renameCollectionWarningBanner = screen.getByTestId(
+            'rename-collection-modal-warning'
+          );
+          expect(renameCollectionWarningBanner.textContent).to.include(
+            'Additionally, any saved queries or aggregations targeting this collection will need to be remapped to the new namespace.'
+          );
+        });
+      });
     });
   });
 });

packages/databases-collections/src/components/rename-collection-modal/rename-collection-modal.spec.tsx

@@ -24,6 +24,7 @@ export interface RenameCollectionModalProps {
   initialCollectionName: string;
   collections: { name: string }[];
   isRunning: boolean;
+  areSavedQueriesAndAggregationsImpacted: boolean;
   hideModal: () => void;
   renameCollection: (newCollectionName: string) => void;
   clearError: () => void;
@@ -37,11 +38,42 @@ const progressContainerStyles = css({
 
 type ModalState = 'input-form' | 'confirmation-screen';
 
+const bannerTextStyles = css({
+  marginTop: 0,
+  marginBottom: 0,
+  '&:not(:last-child)': {
+    marginBottom: spacing[2],
+  },
+});
+function ConfirmationModalContent({
+  areSavedQueriesAndAggregationsImpacted,
+}: {
+  areSavedQueriesAndAggregationsImpacted: boolean;
+}) {
+  return (
+    <Banner variant="warning" data-testid="rename-collection-modal-warning">
+      <p className={bannerTextStyles}>
+        Renaming collection will result in loss of any unsaved queries, filters
+        or aggregation pipeline.
+      </p>
+      {areSavedQueriesAndAggregationsImpacted && (
+        <p className={bannerTextStyles}>
+          <b>
+            Additionally, any saved queries or aggregations targeting this
+            collection will need to be remapped to the new namespace.
+          </b>
+        </p>
+      )}
+    </Banner>
+  );
+}
+
 function RenameCollectionModal({
   isVisible,
   error,
   initialCollectionName,
   collections,
+  areSavedQueriesAndAggregationsImpacted,
   isRunning,
   hideModal,
   renameCollection,
@@ -147,10 +179,11 @@ function RenameCollectionModal({
         </Banner>
       )}
       {modalState === 'confirmation-screen' && (
-        <Banner variant="info" data-testid="rename-collection-modal-warning">
-          Renaming collection will result in loss of any unsaved queries,
-          filters or aggregation pipeline
-        </Banner>
+        <ConfirmationModalContent
+          areSavedQueriesAndAggregationsImpacted={
+            areSavedQueriesAndAggregationsImpacted
+          }
+        />
       )}
       {isRunning && (
         <Body className={progressContainerStyles}>

packages/databases-collections/src/components/rename-collection-modal/rename-collection-modal.tsx

@@ -17,6 +17,10 @@ import MappedRenameCollectionModal from './components/rename-collection-modal/re
 import { activateRenameCollectionPlugin } from './stores/rename-collection';
 import type { WorkspaceComponent } from '@mongodb-js/compass-workspaces';
 import { workspacesServiceLocator } from '@mongodb-js/compass-workspaces/provider';
+import {
+  favoriteQueryStorageAccessLocator,
+  pipelineStorageLocator,
+} from '@mongodb-js/my-queries-storage/provider';
 
 export const CollectionsWorkspaceTab: WorkspaceComponent<'Collections'> = {
   name: 'Collections' as const,
@@ -68,5 +72,7 @@ export const RenameCollectionPlugin = registerHadronPlugin(
     dataService:
       dataServiceLocator as typeof dataServiceLocator<'renameCollection'>,
     instance: mongoDBInstanceLocator,
+    queryStorage: favoriteQueryStorageAccessLocator,
+    pipelineStorage: pipelineStorageLocator,
   }
 );