feat: disable the update preview when transactions are not supported COMPASS-7449 (#5152)

* disable the update preview when transactions are not supported

* lint

* fix initial state test

Author: lerouxb

packages/compass-crud/src/components/bulk-update-dialog.spec.tsx

@@ -23,6 +23,7 @@ function renderBulkUpdateDialog(
           },
         ],
       }}
+      enablePreview={true}
       closeBulkUpdateDialog={() => {}}
       updateBulkUpdatePreview={() => {}}
       runBulkUpdate={() => {}}
@@ -156,9 +157,37 @@ describe('BulkUpdateDialog Component', function () {
     expect(onCloseSpy).to.have.been.calledOnce;
   });
 
-  it('runs the update when the update button is clicked', function () {
+  it('runs the update when the update button is clicked (preview supported)', function () {
     const onUpdateSpy = sinon.spy();
-    renderBulkUpdateDialog({ runBulkUpdate: onUpdateSpy, count: 60 });
+    renderBulkUpdateDialog({
+      enablePreview: true,
+      runBulkUpdate: onUpdateSpy,
+      count: 60,
+    });
+
+    // has a preview
+    expect(
+      screen.getAllByTestId('bulk-update-preview-document')
+    ).to.have.lengthOf(1);
+
+    userEvent.click(
+      screen.getByRole('button', { name: 'Update 60 documents' })
+    );
+    expect(onUpdateSpy).to.have.been.calledOnce;
+  });
+
+  it('runs the update when the update button is clicked (preview unsupported)', function () {
+    const onUpdateSpy = sinon.spy();
+    renderBulkUpdateDialog({
+      enablePreview: false,
+      runBulkUpdate: onUpdateSpy,
+      count: 60,
+    });
+
+    // does not render a preview
+    expect(
+      screen.queryAllByTestId('bulk-update-preview-document')
+    ).to.have.lengthOf(0);
 
     userEvent.click(
       screen.getByRole('button', { name: 'Update 60 documents' })

packages/compass-crud/src/components/bulk-update-dialog.tsx

@@ -234,6 +234,7 @@ export type BulkUpdateDialogProps = {
   preview: UpdatePreview;
   syntaxError?: Error & { loc?: { index: number } };
   serverError?: Error;
+  enablePreview?: boolean;
   closeBulkUpdateDialog: () => void;
   updateBulkUpdatePreview: (updateText: string) => void;
   runBulkUpdate: () => void;
@@ -249,6 +250,7 @@ export default function BulkUpdateDialog({
   preview,
   syntaxError,
   serverError,
+  enablePreview = false,
   closeBulkUpdateDialog,
   updateBulkUpdatePreview,
   runBulkUpdate,
@@ -311,13 +313,13 @@ export default function BulkUpdateDialog({
     <Modal
       open={isOpen}
       setOpen={closeBulkUpdateDialog}
-      size="large"
+      size={enablePreview ? 'large' : 'default'}
       data-testid="bulk-update-dialog"
       initialFocus={`#${bulkUpdateUpdateId} .cm-content`}
     >
       <ModalHeader title={modalTitleAndButtonText} subtitle={ns} />
       <ModalBody>
-        <div className={columnsStyles}>
+        <div className={enablePreview ? columnsStyles : undefined}>
           <div className={queryStyles}>
             <div className={queryFieldStyles}>
               <ReadonlyFilter
@@ -373,26 +375,28 @@ export default function BulkUpdateDialog({
               </KeylineCard>
             </div>
           </div>
-          <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}
-                  />
-                );
-              })}
+          {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>
-          </div>
+          )}
         </div>
       </ModalBody>
       <ModalFooter className={modalFooterToolbarSpacingStyles}>

packages/compass-crud/src/components/document-list.tsx

@@ -107,6 +107,7 @@ export type DocumentListProps = {
   darkMode?: boolean;
   isCollectionScan?: boolean;
   isSearchIndexesSupported: boolean;
+  isUpdatePreviewSupported: boolean;
   query: QueryState;
 } & Omit<DocumentListViewProps, 'className'> &
   Omit<DocumentTableViewProps, 'className'> &
@@ -279,6 +280,7 @@ class DocumentList extends React.Component<DocumentListProps> {
         ns={this.props.ns}
         filter={this.props.query.filter}
         count={this.props.count}
+        enablePreview={this.props.isUpdatePreviewSupported}
         {...this.props.bulkUpdate}
         closeBulkUpdateDialog={this.props.closeBulkUpdateDialog}
         updateBulkUpdatePreview={this.props.updateBulkUpdatePreview}
@@ -564,6 +566,7 @@ DocumentList.propTypes = {
   darkMode: PropTypes.bool,
   isCollectionScan: PropTypes.bool,
   isSearchIndexesSupported: PropTypes.bool,
+  isUpdatePreviewSupported: PropTypes.bool,
 };
 
 DocumentList.defaultProps = {