diff --git a/packages/compass-crud/src/components/bulk-update-dialog.spec.tsx b/packages/compass-crud/src/components/bulk-update-dialog.spec.tsx index b309be52583..680f63c9db3 100644 --- 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 index 691623ee85e..338f0eea893 100644 --- 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 = ({ + count, + preview, +}) => { + const previewDocuments = useMemo(() => { + return preview.changes.map( + (change) => new HadronDocument(change.after as Record) + ); + }, [preview]); + + // show a preview for the edge case where the count is undefined, not the + // empty state + if (count === 0) { + return ( +
+ +
+ + No results +

+ Try modifying your query to get results. +

+
+
+ ); + } + + return ( +
+ +
+ {previewDocuments.map((doc: HadronDocument, index: number) => { + return ( + + ); + })} +
+
+ ); +}; + 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) - ); - }, [preview]); - const onChangeText = (value: string) => { setText(value); updateBulkUpdatePreview(value); @@ -376,26 +453,7 @@ export default function BulkUpdateDialog({ {enablePreview && ( -
- -
- {previewDocuments.map((doc: HadronDocument, index: number) => { - return ( - - ); - })} -
-
+ )}