feat(databases-collections, compass-sidebar): add rename collection flow COMPASS-5704 (#5063)

Author: baileympearson

package-lock.json

@@ -266,6 +266,24 @@ export function createInstanceStore({
   });
   onAppRegistryEvent('refresh-databases', onRefreshDatabases);
 
+  const onCollectionRenamed = voidify(
+    async ({ from, to }: { from: string; to: string }) => {
+      // we must fetch the old collection's metadata before refreshing because refreshing the
+      // collection metadata will remove the old collection from the model.
+      const metadata = await fetchCollectionMetadata(from);
+      appRegistry.emit('refresh-collection-tabs', {
+        metadata,
+        newNamespace: to,
+      });
+      const { database } = toNS(from);
+      await refreshNamespace({
+        ns: to,
+        database,
+      });
+    }
+  );
+  appRegistry.on('collection-renamed', onCollectionRenamed);
+
   // Event emitted when the Collections grid needs to be refreshed
   // with new collections or collection stats for existing ones.
   const onRefreshCollections = voidify(async ({ ns }: { ns: string }) => {

packages/compass-app-stores/src/stores/instance-store.ts

@@ -37,6 +37,7 @@ enum CollectionTabsActions {
   DatabaseDropped = 'compass-collection/DatabaseDropped',
   DataServiceConnected = 'compass-collection/DataServiceConnected',
   DataServiceDisconnected = 'compass-collection/DataServiceDisconnected',
+  CollectionRenamed = 'compass-collection/CollectionRenamed',
 }
 
 type CollectionTabsThunkAction<
@@ -182,6 +183,17 @@ const reducer: Reducer<CollectionTabsState> = (
       tabs: newTabs,
     };
   }
+  if (action.type === CollectionTabsActions.CollectionRenamed) {
+    const { tabs } = action;
+
+    const activeTabIndex = getActiveTabIndex(state);
+    const activeTabId = tabs[activeTabIndex]?.id ?? null;
+    return {
+      ...state,
+      tabs,
+      activeTabId,
+    };
+  }
   return state;
 };
 
@@ -391,4 +403,30 @@ export const dataServiceDisconnected = () => {
   return { type: CollectionTabsActions.DataServiceDisconnected };
 };
 
+export const collectionRenamed = ({
+  from,
+  newNamespace,
+}: {
+  from: CollectionMetadata;
+  newNamespace: string;
+}): CollectionTabsThunkAction<void> => {
+  return (dispatch, getState) => {
+    const tabs = getState().tabs.map((tab) =>
+      tab.namespace === from.namespace
+        ? dispatch(
+            createNewTab({
+              ...from,
+              namespace: newNamespace,
+            })
+          )
+        : tab
+    );
+
+    dispatch({
+      type: CollectionTabsActions.CollectionRenamed,
+      tabs,
+    });
+  };
+};
+
 export default reducer;

packages/compass-collection/src/modules/tabs.ts

@@ -324,6 +324,7 @@ describe('Collection Tabs Store', function () {
         'select-namespace',
         'collection-dropped',
         'database-dropped',
+        'refresh-collection-tabs',
         'data-service-connected',
         'data-service-disconnected',
         'menu-share-schema-json',

packages/compass-collection/src/stores/tabs.spec.ts

@@ -13,8 +13,10 @@ import tabs, {
   getActiveTab,
   dataServiceDisconnected,
   dataServiceConnected,
+  collectionRenamed,
 } from '../modules/tabs';
 import { globalAppRegistry } from 'hadron-app-registry';
+import type { CollectionMetadata } from 'mongodb-collection-model';
 
 type ThunkExtraArg = {
   globalAppRegistry: AppRegistry;
@@ -81,6 +83,24 @@ export function configureStore({
         store.dispatch(databaseDropped(namespace));
       });
 
+      globalAppRegistry.on(
+        'refresh-collection-tabs',
+        ({
+          metadata,
+          newNamespace,
+        }: {
+          metadata: CollectionMetadata;
+          newNamespace: string;
+        }) => {
+          store.dispatch(
+            collectionRenamed({
+              from: metadata,
+              newNamespace,
+            })
+          );
+        }
+      );
+
       /**
        * Set the data service in the store when connected.
        */

packages/compass-collection/src/stores/tabs.ts

@@ -21,7 +21,7 @@ const defaultToastProperties: Partial<ToastProperties> = {
   dismissible: true,
 };
 
-interface ToastActions {
+export interface ToastActions {
   openToast: (id: string, toastProperties: ToastProperties) => void;
   closeToast: (id: string) => void;
 }

packages/compass-components/src/hooks/use-toast.tsx

@@ -51,6 +51,7 @@
   },
   "dependencies": {
     "@mongodb-js/compass-components": "^1.19.0",
+    "compass-preferences-model": "^2.15.6",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6"
   },

packages/compass-databases-navigation/package.json

@@ -21,6 +21,7 @@ import type {
   NamespaceItemProps,
 } from './tree-item';
 import type { Actions } from './constants';
+import { usePreference } from 'compass-preferences-model';
 
 const CollectionIcon: React.FunctionComponent<{
   type: string;
@@ -64,6 +65,10 @@ export const CollectionItem: React.FunctionComponent<
   style,
   onNamespaceAction,
 }) => {
+  const isRenameCollectionEnabled = usePreference(
+    'enableRenameCollectionModal',
+    React
+  );
   const [hoverProps, isHovered] = useHoverState();
 
   const onDefaultAction = useCallback(
@@ -121,16 +126,26 @@ export const CollectionItem: React.FunctionComponent<
           icon: 'Edit',
         }
       );
-    } else {
+
+      return actions;
+    }
+
+    if (type !== 'timeseries' && isRenameCollectionEnabled) {
       actions.push({
-        action: 'drop-collection',
-        label: 'Drop collection',
-        icon: 'Trash',
+        action: 'rename-collection',
+        label: 'Rename collection',
+        icon: 'Edit',
       });
     }
 
+    actions.push({
+      action: 'drop-collection',
+      label: 'Drop collection',
+      icon: 'Trash',
+    });
+
     return actions;
-  }, [type, isReadOnly]);
+  }, [type, isReadOnly, isRenameCollectionEnabled]);
 
   return (
     <ItemContainer

packages/compass-databases-navigation/src/collection-item.tsx

@@ -19,4 +19,5 @@ export type Actions =
   | 'drop-collection'
   | 'open-in-new-tab'
   | 'duplicate-view'
-  | 'modify-view';
+  | 'modify-view'
+  | 'rename-collection';

packages/compass-databases-navigation/src/constants.tsx

@@ -11,6 +11,7 @@ import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
 import Sinon from 'sinon';
 import { DatabasesNavigationTree } from './databases-navigation-tree';
+import preferencesAccess from 'compass-preferences-model';
 
 const databases = [
   {
@@ -42,6 +43,60 @@ const TEST_VIRTUAL_PROPS = {
 describe('DatabasesNavigationTree', function () {
   afterEach(cleanup);
 
+  context('when the rename collection feature flag is enabled', () => {
+    const sandbox = Sinon.createSandbox();
+    before(() => {
+      sandbox.stub(preferencesAccess, 'getPreferences').returns({
+        enableRenameCollectionModal: true,
+      } as any);
+    });
+
+    after(() => sandbox.restore());
+
+    it('shows the Rename Collection action', function () {
+      render(
+        <DatabasesNavigationTree
+          databases={databases}
+          expanded={{ bar: true }}
+          activeNamespace="bar.meow"
+          onDatabaseExpand={() => {}}
+          onNamespaceAction={() => {}}
+          {...TEST_VIRTUAL_PROPS}
+        ></DatabasesNavigationTree>
+      );
+
+      const collection = screen.getByTestId('sidebar-collection-bar.meow');
+      const showActionsButton = within(collection).getByTitle('Show actions');
+
+      expect(within(collection).getByTitle('Show actions')).to.exist;
+
+      userEvent.click(showActionsButton);
+
+      expect(screen.getByText('Rename collection')).to.exist;
+    });
+
+    it('should activate callback with `rename-collection` when corresponding action is clicked', function () {
+      const spy = Sinon.spy();
+      render(
+        <DatabasesNavigationTree
+          databases={databases}
+          expanded={{ bar: true }}
+          activeNamespace="bar.meow"
+          onNamespaceAction={spy}
+          onDatabaseExpand={() => {}}
+          {...TEST_VIRTUAL_PROPS}
+        ></DatabasesNavigationTree>
+      );
+
+      const collection = screen.getByTestId('sidebar-collection-bar.meow');
+
+      userEvent.click(within(collection).getByTitle('Show actions'));
+      userEvent.click(screen.getByText('Rename collection'));
+
+      expect(spy).to.be.calledOnceWithExactly('bar.meow', 'rename-collection');
+    });
+  });
+
   it('should render databases', function () {
     render(
       <DatabasesNavigationTree
@@ -166,6 +221,7 @@ describe('DatabasesNavigationTree', function () {
       userEvent.click(showActionsButton);
 
       expect(screen.getByText('Open in new tab')).to.exist;
+      expect(() => screen.getByText('Rename collection')).to.throw;
       expect(screen.getByText('Drop collection')).to.exist;
     });
 
@@ -192,6 +248,9 @@ describe('DatabasesNavigationTree', function () {
       expect(screen.getByText('Drop view')).to.exist;
       expect(screen.getByText('Duplicate view')).to.exist;
       expect(screen.getByText('Modify view')).to.exist;
+
+      // views cannot be renamed
+      expect(() => screen.getByText('Rename collection')).to.throw;
     });
   });