chore: add a button to save an update query from the Bulk Update modal COMPASS-7331 (#5105)

* chore: change to Modal instead of FormModal so the toolbar can be changed

* chore: remove not necessary styles

* chore: add favorite icon to save button

* chore: add update query to saved queries

* chore: implement interactivepopover for the bulk update dialog

* chore: make new hasCustomCloseButton prop optional

* chore: store the query in the favorite storage

* chore: fix card styles

* chore: show all required fields in favorites

* chore: open update modal from favorites

* chore: void promise

* chore: fix linting issues

* chore: add opens in new tab marker to favorite items

* chore: close popover when an update favorite is chosen

* chore: force toasts to be on top of overlays

* chore: show opens in modal marker always

* chore: add test for interactive popover

* chore: fix test related to close button

* chore: fix interactive popover interactions and add test to bulk update dialog

* chore: test save query interaction

* chore: remove .only

* chore: test favorite storage

* chore: test updatemany card

* chore: test query bar changes

* chore: fix linter

* chore: fix some more linting issues

* chore: add dependency to queries storage

* chore: linting

* chore: fix some more linting issues

* chore: fix issues

* chore: minor refactors

* chore: fix linting issues

* chore: allow a custom fallback

* chore: use global app registry for interplugin comms and fix test on update bulk modal

* chore: fix linting complains

* chore: remove comment that is not informative enough

* chore: remove cast to any

* chore: rename trap fallback and use localAppRegistry

* chore: group localAppRegistry events together

* chore: rename close button override prop

* chore: linting issues

* chore: fix linting issues

Author: kmruiz

packages/compass-components/src/components/interactive-popover.spec.tsx

@@ -14,6 +14,8 @@ function renderPopover(
     <InteractivePopover
       className=""
       open={false}
+      hideCloseButton={props?.hideCloseButton}
+      customFocusTrapFallback={`#${innerContentTestId}`}
       setOpen={() => {}}
       trigger={({ onClick, ref, children }) => (
         <>
@@ -29,6 +31,7 @@ function renderPopover(
         <button
           type="button"
           onClick={() => {}}
+          id={innerContentTestId}
           data-testid={innerContentTestId}
         >
           Action Button
@@ -111,4 +114,14 @@ describe('InteractivePopover Component', function () {
     expect(openSpy.calledOnce).to.be.true;
     expect(openSpy.firstCall.firstArg).to.equal(false);
   });
+
+  it('when open with a custom button, the general close button is not visible', function () {
+    renderPopover({
+      open: true,
+      hideCloseButton: true,
+    });
+
+    expect(screen.queryByTestId('interactive-popover-close-button')).to.not
+      .exist;
+  });
 });

packages/compass-components/src/components/interactive-popover.tsx

@@ -50,6 +50,8 @@ type InteractivePopoverProps = {
     ref: React.LegacyRef<HTMLButtonElement>;
     children: React.ReactNode;
   }) => React.ReactElement;
+  hideCloseButton?: boolean;
+  customFocusTrapFallback?: string;
   open: boolean;
   setOpen: (open: boolean) => void;
   /**
@@ -67,6 +69,8 @@ function InteractivePopover({
   className,
   children,
   trigger,
+  hideCloseButton = false,
+  customFocusTrapFallback = undefined,
   open,
   setOpen,
   containedElements = [],
@@ -91,14 +95,27 @@ function InteractivePopover({
     });
   }, [setOpen]);
 
-  const onClickTrigger = useCallback(() => {
-    if (open) {
-      onClose();
-      return;
-    }
+  const onClickTrigger = useCallback(
+    (event) => {
+      if (open) {
+        if (
+          containedElements.some((selector) => {
+            return document
+              .querySelector(selector)
+              ?.contains(event.target as Node);
+          })
+        ) {
+          return;
+        }
+
+        onClose();
+        return;
+      }
 
-    setOpen(!open);
-  }, [open, setOpen, onClose]);
+      setOpen(!open);
+    },
+    [open, setOpen, onClose, containedElements]
+  );
 
   // When the popover is open, close it when an item that isn't the popover
   // is clicked.
@@ -167,7 +184,7 @@ function InteractivePopover({
           focusTrapOptions={{
             clickOutsideDeactivates: true,
             // Tests fail without a fallback. (https://github.com/focus-trap/focus-trap-react/issues/91)
-            fallbackFocus: `#${closeButtonId}`,
+            fallbackFocus: customFocusTrapFallback || `#${closeButtonId}`,
           }}
         >
           <div
@@ -182,19 +199,21 @@ function InteractivePopover({
           >
             {children}
 
-            <IconButton
-              className={cx(closeButtonStyles, closeButtonClassName)}
-              data-testid="interactive-popover-close-button"
-              onClick={(evt) => {
-                evt.stopPropagation();
-                onClose();
-              }}
-              aria-label="Close"
-              id={closeButtonId}
-              ref={closeButtonRef}
-            >
-              <Icon glyph="X" />
-            </IconButton>
+            {!hideCloseButton && (
+              <IconButton
+                className={cx(closeButtonStyles, closeButtonClassName)}
+                data-testid="interactive-popover-close-button"
+                onClick={(evt) => {
+                  evt.stopPropagation();
+                  onClose();
+                }}
+                aria-label="Close"
+                id={closeButtonId}
+                ref={closeButtonRef}
+              >
+                <Icon glyph="X" />
+              </IconButton>
+            )}
           </div>
         </FocusTrap>
       </Popover>

packages/compass-components/src/hooks/use-toast.tsx

@@ -10,6 +10,7 @@ import {
   ToastProvider,
   useToast as useLeafygreenToast,
 } from '../components/leafygreen';
+import { css } from '@leafygreen-ui/emotion';
 
 export type ToastProperties = Pick<
   ToastProps,
@@ -153,6 +154,7 @@ const _ToastArea: React.FunctionComponent = ({ children }) => {
   );
 };
 
+const toastAreaFronLayerStyles = css({ zIndex: 1 });
 const ToastAreaMountedContext = React.createContext(false);
 
 export const ToastArea: React.FunctionComponent = ({ children }) => {
@@ -162,7 +164,7 @@ export const ToastArea: React.FunctionComponent = ({ children }) => {
 
   return (
     <ToastAreaMountedContext.Provider value={true}>
-      <ToastProvider>
+      <ToastProvider portalClassName={toastAreaFronLayerStyles}>
         <_ToastArea>{children}</_ToastArea>
       </ToastProvider>
     </ToastAreaMountedContext.Provider>

packages/compass-crud/package.json

@@ -59,6 +59,7 @@
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-editor": "^0.18.0",
     "@mongodb-js/compass-logging": "^1.2.6",
+    "@mongodb-js/my-queries-storage": "^0.2.1",
     "@mongodb-js/explain-plan-helper": "^1.1.4",
     "bson": "^6.0.0",
     "compass-preferences-model": "^2.15.6",
@@ -108,6 +109,7 @@
     "@mongodb-js/compass-editor": "^0.18.0",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/explain-plan-helper": "^1.1.4",
+    "@mongodb-js/my-queries-storage": "^0.2.1",
     "bson": "^6.0.0",
     "compass-preferences-model": "^2.15.6",
     "hadron-document": "^8.4.3",

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

@@ -26,6 +26,7 @@ function renderBulkUpdateDialog(
       closeBulkUpdateDialog={() => {}}
       updateBulkUpdatePreview={() => {}}
       runBulkUpdate={() => {}}
+      saveUpdateQuery={() => {}}
       {...props}
     />
   );
@@ -60,8 +61,9 @@ describe('BulkUpdateDialog Component', function () {
     ).to.have.lengthOf(1);
 
     // buttons
-    expect(screen.getByRole('button', { name: 'Close' })).to.exist;
-    expect(screen.getByRole('button', { name: 'Update documents' })).to.exist;
+    expect(screen.getByRole('button', { name: 'Cancel' })).to.exist;
+    expect(screen.getByRole('button', { name: 'Update 42 documents' })).to
+      .exist;
   });
 
   it('resets if the modal is re-opened', async function () {
@@ -87,6 +89,7 @@ describe('BulkUpdateDialog Component', function () {
         closeBulkUpdateDialog={() => {}}
         updateBulkUpdatePreview={() => {}}
         runBulkUpdate={() => {}}
+        saveUpdateQuery={() => {}}
       />
     );
 
@@ -109,6 +112,7 @@ describe('BulkUpdateDialog Component', function () {
         closeBulkUpdateDialog={() => {}}
         updateBulkUpdatePreview={() => {}}
         runBulkUpdate={() => {}}
+        saveUpdateQuery={() => {}}
       />
     );
 
@@ -125,15 +129,31 @@ describe('BulkUpdateDialog Component', function () {
     const onCloseSpy = sinon.spy();
     renderBulkUpdateDialog({ closeBulkUpdateDialog: onCloseSpy });
 
-    userEvent.click(screen.getByRole('button', { name: 'Close' }));
+    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(onCloseSpy).to.have.been.calledOnce;
   });
 
   it('runs the update when the update button is clicked', function () {
     const onUpdateSpy = sinon.spy();
-    renderBulkUpdateDialog({ runBulkUpdate: onUpdateSpy });
+    renderBulkUpdateDialog({ runBulkUpdate: onUpdateSpy, count: 60 });
 
-    userEvent.click(screen.getByRole('button', { name: 'Update documents' }));
+    userEvent.click(
+      screen.getByRole('button', { name: 'Update 60 documents' })
+    );
     expect(onUpdateSpy).to.have.been.calledOnce;
   });
+
+  it('saves the query when a name is provided', function () {
+    const saveUpdateQuerySpy = sinon.spy();
+    renderBulkUpdateDialog({ saveUpdateQuery: saveUpdateQuerySpy });
+
+    userEvent.click(screen.getByTestId('inline-save-query-modal-opener'));
+    userEvent.type(
+      screen.getByTestId('inline-save-query-modal-input'),
+      'MySavedQuery'
+    );
+
+    userEvent.click(screen.getByTestId('inline-save-query-modal-submit'));
+    expect(saveUpdateQuerySpy).to.have.been.calledOnceWith('MySavedQuery');
+  });
 });