Merge remote-tracking branch 'origin/main' into beta-releases

mongodb-js · Nov 30, 2023 · d07248c · d07248c
2 parents b151ff6 + 93f6efc
commit d07248c
Show file tree

Hide file tree

Showing 35 changed files with 1,502 additions and 105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-app-stores/src/stores/instance-store.ts b/packages/compass-app-stores/src/stores/instance-store.ts
@@ -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 }) => {

diff --git a/packages/compass-collection/src/modules/tabs.ts b/packages/compass-collection/src/modules/tabs.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;
diff --git a/packages/compass-collection/src/stores/tabs.spec.ts b/packages/compass-collection/src/stores/tabs.spec.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',

diff --git a/packages/compass-collection/src/stores/tabs.ts b/packages/compass-collection/src/stores/tabs.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.
        */

diff --git a/packages/compass-components/src/hooks/use-toast.tsx b/packages/compass-components/src/hooks/use-toast.tsx
@@ -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;
 }

diff --git a/packages/compass-crud/src/components/bulk-update-dialog.spec.tsx b/packages/compass-crud/src/components/bulk-update-dialog.spec.tsx
@@ -90,6 +90,11 @@ describe('BulkUpdateDialog Component', function () {
     expect(screen.getByRole('button', { name: 'Update 1 document' })).to.exist;
   });
 
+  it('renders the empty state if the count is 0', function () {
+    renderBulkUpdateDialog({ count: 0 });
+    expect(screen.getByTestId('bulk-update-preview-empty-state')).to.exist;
+  });
+
   it('resets if the modal is re-opened', async function () {
     // initial open
     const { rerender } = renderBulkUpdateDialog({ isOpen: true });

diff --git a/packages/compass-crud/src/components/bulk-update-dialog.tsx b/packages/compass-crud/src/components/bulk-update-dialog.tsx
@@ -32,6 +32,7 @@ import Document from './document';
 import type { BSONObject } from '../stores/crud-store';
 
 import { ReadonlyFilter } from './readonly-filter';
+import { DocumentIcon } from '@mongodb-js/compass-components';
 
 const columnsStyles = css({
   marginTop: spacing[4],
@@ -225,6 +226,88 @@ const InlineSaveQueryModal: React.FunctionComponent<
   );
 };
 
+const previewZeroStateIconStyles = css({
+  margin: 'auto',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacing[2],
+  alignItems: 'center',
+});
+
+const previewNoResultsLabel = css({
+  color: palette.green.dark2,
+});
+
+const previewZeroStateDescriptionStyles = css({
+  textAlign: 'center',
+  margin: 0,
+});
+
+export type BulkUpdatePreviewProps = {
+  count?: number;
+  preview: UpdatePreview;
+};
+
+const BulkUpdatePreview: React.FunctionComponent<BulkUpdatePreviewProps> = ({
+  count,
+  preview,
+}) => {
+  const previewDocuments = useMemo(() => {
+    return preview.changes.map(
+      (change) => new HadronDocument(change.after as Record<string, unknown>)
+    );
+  }, [preview]);
+
+  // show a preview for the edge case where the count is undefined, not the
+  // empty state
+  if (count === 0) {
+    return (
+      <div
+        className={updatePreviewStyles}
+        data-testid="bulk-update-preview-empty-state"
+      >
+        <Label htmlFor="bulk-update-preview">
+          Preview{' '}
+          <Description className={previewDescriptionStyles}>
+            (sample of {preview.changes.length} document
+            {preview.changes.length === 1 ? '' : 's'})
+          </Description>
+        </Label>
+        <div className={previewZeroStateIconStyles}>
+          <DocumentIcon />
+          <b className={previewNoResultsLabel}>No results</b>
+          <p className={previewZeroStateDescriptionStyles}>
+            Try modifying your query to get results.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={previewStyles}>
+      <Label htmlFor="bulk-update-preview">
+        Preview{' '}
+        <Description className={previewDescriptionStyles}>
+          (sample of {preview.changes.length} document
+          {preview.changes.length === 1 ? '' : 's'})
+        </Description>
+      </Label>
+      <div className={updatePreviewStyles}>
+        {previewDocuments.map((doc: HadronDocument, index: number) => {
+          return (
+            <UpdatePreviewDocument
+              key={`change=${index}`}
+              data-testid="bulk-update-preview-document"
+              doc={doc}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
 export type BulkUpdateDialogProps = {
   isOpen: boolean;
   ns: string;
@@ -261,12 +344,6 @@ export default function BulkUpdateDialog({
   const [text, setText] = useState(updateText);
   const wasOpen = usePrevious(isOpen);
 
-  const previewDocuments = useMemo(() => {
-    return preview.changes.map(
-      (change) => new HadronDocument(change.after as Record<string, unknown>)
-    );
-  }, [preview]);
-
   const onChangeText = (value: string) => {
     setText(value);
     updateBulkUpdatePreview(value);
@@ -376,26 +453,7 @@ export default function BulkUpdateDialog({
             </div>
           </div>
           {enablePreview && (
-            <div className={previewStyles}>
-              <Label htmlFor="bulk-update-preview">
-                Preview{' '}
-                <Description className={previewDescriptionStyles}>
-                  (sample of {preview.changes.length} document
-                  {preview.changes.length === 1 ? '' : 's'})
-                </Description>
-              </Label>
-              <div className={updatePreviewStyles}>
-                {previewDocuments.map((doc: HadronDocument, index: number) => {
-                  return (
-                    <UpdatePreviewDocument
-                      key={`change=${index}`}
-                      data-testid="bulk-update-preview-document"
-                      doc={doc}
-                    />
-                  );
-                })}
-              </div>
-            </div>
+            <BulkUpdatePreview count={count} preview={preview} />
           )}
         </div>
       </ModalBody>

diff --git a/packages/compass-databases-navigation/package.json b/packages/compass-databases-navigation/package.json
@@ -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"
   },

diff --git a/packages/compass-databases-navigation/src/collection-item.tsx b/packages/compass-databases-navigation/src/collection-item.tsx
@@ -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

diff --git a/packages/compass-databases-navigation/src/constants.tsx b/packages/compass-databases-navigation/src/constants.tsx
@@ -19,4 +19,5 @@ export type Actions =
   | 'drop-collection'
   | 'open-in-new-tab'
   | 'duplicate-view'
-  | 'modify-view';
+  | 'modify-view'
+  | 'rename-collection';