feat(crud): Bulk update empty state COMPASS-7473 (mongodb-js#5170)

* chore: zero state * chore: add loading * chore: fix some design inconsistencies * remove loading state, add test * don't clear the previews * whitespace --------- Co-authored-by: Kevin Mas Ruiz <[email protected]>
kp-forks · Nov 29, 2023 · d51a2c0 · d51a2c0
1 parent d3d1c1d
commit d51a2c0
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 26 deletions.
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>