fix(crud): don't render the Save button if there is no favourite quer…

…y storage COMPASS-7679 (#5511) don't render the Save button if there is no favourite query storage
mongodb-js · Mar 1, 2024 · 569128a · 569128a
1 parent 0481310
commit 569128a
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 22 deletions.
diff --git a/packages/compass-crud/src/components/bulk-update-modal.spec.tsx b/packages/compass-crud/src/components/bulk-update-modal.spec.tsx
@@ -5,31 +5,36 @@ import { render, screen, cleanup, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BulkUpdateModal from './bulk-update-modal';
 
+import { FavoriteQueryStorageProvider } from '@mongodb-js/my-queries-storage/provider';
+import { compassFavoriteQueryStorageAccess } from '@mongodb-js/my-queries-storage';
+
 function renderBulkUpdateModal(
   props?: Partial<React.ComponentProps<typeof BulkUpdateModal>>
 ) {
   return render(
-    <BulkUpdateModal
-      isOpen={true}
-      ns="mydb.mycoll"
-      filter={{ a: 1 }}
-      count={0}
-      updateText="{ $set: {} }"
-      preview={{
-        changes: [
-          {
-            before: { foo: 1 },
-            after: { foo: 1 },
-          },
-        ],
-      }}
-      enablePreview={true}
-      closeBulkUpdateModal={() => {}}
-      updateBulkUpdatePreview={() => {}}
-      runBulkUpdate={() => {}}
-      saveUpdateQuery={() => {}}
-      {...props}
-    />
+    <FavoriteQueryStorageProvider value={compassFavoriteQueryStorageAccess}>
+      <BulkUpdateModal
+        isOpen={true}
+        ns="mydb.mycoll"
+        filter={{ a: 1 }}
+        count={0}
+        updateText="{ $set: {} }"
+        preview={{
+          changes: [
+            {
+              before: { foo: 1 },
+              after: { foo: 1 },
+            },
+          ],
+        }}
+        enablePreview={true}
+        closeBulkUpdateModal={() => {}}
+        updateBulkUpdatePreview={() => {}}
+        runBulkUpdate={() => {}}
+        saveUpdateQuery={() => {}}
+        {...props}
+      />
+    </FavoriteQueryStorageProvider>
   );
 }
 
@@ -213,4 +218,31 @@ describe('BulkUpdateModal Component', function () {
     userEvent.click(screen.getByTestId('inline-save-query-modal-submit'));
     expect(saveUpdateQuerySpy).to.have.been.calledOnceWith('MySavedQuery');
   });
+
+  it('does not render the Save button if there is no saved ', function () {
+    render(
+      <BulkUpdateModal
+        isOpen={true}
+        ns="mydb.mycoll"
+        filter={{ a: 1 }}
+        count={0}
+        updateText="{ $set: {} }"
+        preview={{
+          changes: [
+            {
+              before: { foo: 1 },
+              after: { foo: 1 },
+            },
+          ],
+        }}
+        enablePreview={true}
+        closeBulkUpdateModal={() => {}}
+        updateBulkUpdatePreview={() => {}}
+        runBulkUpdate={() => {}}
+        saveUpdateQuery={() => {}}
+      />
+    );
+
+    expect(screen.queryByTestId('inline-save-query-modal-opener')).to.not.exist;
+  });
 });
diff --git a/packages/compass-crud/src/components/bulk-update-modal.tsx b/packages/compass-crud/src/components/bulk-update-modal.tsx
@@ -33,6 +33,8 @@ import type { BSONObject } from '../stores/crud-store';
 import { ChangeView } from './change-view';
 import { ReadonlyFilter } from './readonly-filter';
 
+import { useFavoriteQueryStorageAccess } from '@mongodb-js/my-queries-storage/provider';
+
 const modalContentStyles = css({
   width: '100%',
   maxWidth: '1280px',
@@ -393,6 +395,8 @@ export default function BulkUpdateModal({
   const bulkUpdateUpdateId = useId();
   const disabled = !!(syntaxError || serverError);
 
+  const favoriteQueryStorageAvailable = !!useFavoriteQueryStorageAccess();
+
   return (
     <Modal
       open={isOpen}
@@ -464,7 +468,12 @@ export default function BulkUpdateModal({
       </ModalBody>
       <ModalFooter className={modalFooterToolbarSpacingStyles}>
         <div className={modalFooterAdditionalActionsStyles}>
-          <InlineSaveQueryModal disabled={disabled} onSave={saveUpdateQuery} />
+          {favoriteQueryStorageAvailable && (
+            <InlineSaveQueryModal
+              disabled={disabled}
+              onSave={saveUpdateQuery}
+            />
+          )}
         </div>
         <div className={modalFooterFormActionsStyles}>
           <Button