fix(ui): refactor modal isUpper handling

ui/src/Components/ManagedSilence/DeleteSilence.js

@@ -195,7 +195,7 @@ const DeleteSilence = ({
   silenceFormStore,
   cluster,
   silence,
-  onModalExit,
+  isUpper,
 }) => {
   const [visible, setVisible] = useState(false);
 
@@ -220,9 +220,8 @@ const DeleteSilence = ({
       </button>
       <Modal
         isOpen={visible}
-        isUpper={true}
+        isUpper={isUpper}
         toggleOpen={() => setVisible(false)}
-        onExited={onModalExit}
       >
         <DeleteSilenceModalContent
           alertStore={alertStore}
@@ -240,7 +239,10 @@ DeleteSilence.propTypes = {
   silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
   cluster: PropTypes.string.isRequired,
   silence: APISilence.isRequired,
-  onModalExit: PropTypes.func,
+  isUpper: PropTypes.bool,
+};
+DeleteSilence.defaultProps = {
+  isUpper: false,
 };
 
 export {

ui/src/Components/ManagedSilence/DeleteSilence.test.js

@@ -56,7 +56,6 @@ afterEach(() => {
 });
 
 const MockOnHide = jest.fn();
-const MockOnModalExit = jest.fn();
 
 const MountedDeleteSilence = () => {
   return mount(
@@ -65,7 +64,6 @@ const MountedDeleteSilence = () => {
       silenceFormStore={silenceFormStore}
       cluster={cluster}
       silence={silence}
-      onModalExit={MockOnModalExit}
     />
   );
 };
@@ -101,7 +99,8 @@ describe("<DeleteSilence />", () => {
 
     tree.find("button.close").simulate("click");
     act(() => jest.runOnlyPendingTimers());
-    expect(MockOnModalExit).toHaveBeenCalled();
+    tree.update();
+    expect(tree.find(".modal-body")).toHaveLength(0);
   });
 
   it("closes modal on esc button press", () => {
@@ -113,7 +112,8 @@ describe("<DeleteSilence />", () => {
       .find("div.modal")
       .simulate("keyDown", { key: "Escape", keyCode: 27, which: 27 });
     act(() => jest.runOnlyPendingTimers());
-    expect(MockOnModalExit).toHaveBeenCalled();
+    tree.update();
+    expect(tree.find(".modal-body")).toHaveLength(0);
   });
 
   it("button is disabled when all alertmanager instances are read-only", () => {

ui/src/Components/ManagedSilence/SilenceDetails.js

@@ -49,7 +49,7 @@ const SilenceDetails = ({
   silence,
   cluster,
   onEditSilence,
-  onDeleteModalClose,
+  isUpper,
 }) => {
   let isExpired = moment(silence.endsAt) < moment();
   let expiresClass = "";
@@ -173,7 +173,7 @@ const SilenceDetails = ({
                 silenceFormStore={silenceFormStore}
                 cluster={cluster}
                 silence={silence}
-                onModalExit={onDeleteModalClose}
+                isUpper={isUpper}
               />
             )}
           </div>
@@ -187,7 +187,10 @@ SilenceDetails.propTypes = {
   cluster: PropTypes.string.isRequired,
   silence: APISilence.isRequired,
   onEditSilence: PropTypes.func.isRequired,
-  onDeleteModalClose: PropTypes.func,
+  isUpper: PropTypes.bool,
+};
+SilenceDetails.defaultProps = {
+  isUpper: false,
 };
 
 export { SilenceDetails };

ui/src/Components/ManagedSilence/index.js

@@ -24,7 +24,7 @@ const ManagedSilence = ({
   silenceFormStore,
   isOpen,
   onDidUpdate,
-  onDeleteModalClose,
+  isNested,
 }) => {
   useEffect(() => {
     if (onDidUpdate) onDidUpdate();
@@ -66,7 +66,7 @@ const ManagedSilence = ({
               alertStore={alertStore}
               silenceFormStore={silenceFormStore}
               onEditSilence={onEditSilence}
-              onDeleteModalClose={onDeleteModalClose}
+              isUpper={isNested}
             />
           </div>
         ) : null}
@@ -84,9 +84,11 @@ ManagedSilence.propTypes = {
   onDidUpdate: PropTypes.func,
   onDeleteModalClose: PropTypes.func,
   isOpen: PropTypes.bool,
+  isNested: PropTypes.bool,
 };
 ManagedSilence.defaultProps = {
   isOpen: false,
+  isNested: false,
 };
 
 export { ManagedSilence, GetAlertmanager };

ui/src/Components/Modal/index.js

@@ -1,8 +1,8 @@
-import React, { useRef, useEffect, useCallback } from "react";
+import React, { useRef, useEffect } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 
-import { disableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 
 import { HotKeys } from "react-hotkeys";
 
@@ -17,23 +17,13 @@ const ModalInner = ({ size, isUpper, toggleOpen, children }) => {
   useEffect(() => {
     document.body.classList.add("modal-open");
     disableBodyScroll(ref.current);
-    return () => {
-      document.body.classList.remove("modal-open");
-      clearAllBodyScrollLocks();
-    };
-  }, []);
 
-  const onRemount = useCallback(() => {
-    document.body.classList.add("modal-open");
-    disableBodyScroll(ref.current);
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener("remountModal", onRemount);
+    let modal = ref.current;
     return () => {
-      window.removeEventListener("remountModal", onRemount);
+      if (!isUpper) document.body.classList.remove("modal-open");
+      enableBodyScroll(modal);
     };
-  }, [onRemount]);
+  }, [isUpper]);
 
   return (
     <HotKeys

ui/src/Components/Modal/index.test.js

@@ -6,9 +6,9 @@ import { Modal } from ".";
 
 const fakeToggle = jest.fn();
 
-const MountedModal = (isOpen) => {
+const MountedModal = (isOpen, isUpper) => {
   return mount(
-    <Modal isOpen={isOpen} toggleOpen={fakeToggle}>
+    <Modal isOpen={isOpen} isUpper={isUpper || false} toggleOpen={fakeToggle}>
       <div />
     </Modal>
   );
@@ -62,6 +62,22 @@ describe("<Modal />", () => {
     expect(document.body.className.split(" ")).toContain("modal-open");
   });
 
+  it("'modal-open' class is not removed if Modal isUpper=true and is unmounted", () => {
+    const tree = MountedModal(true, true);
+    expect(document.body.className.split(" ")).toContain("modal-open");
+
+    tree.unmount();
+    expect(document.body.className.split(" ")).toContain("modal-open");
+  });
+
+  it("'modal-open' class is not removed if Modal isUpper=true and is updated to be hidden", () => {
+    const tree = MountedModal(true, true);
+    expect(document.body.className.split(" ")).toContain("modal-open");
+
+    tree.setProps({ isOpen: false });
+    expect(document.body.className.split(" ")).toContain("modal-open");
+  });
+
   it("passes extra props down to the MountModal animation component", () => {
     const onExited = jest.fn();
     const tree = mount(

ui/src/Components/SilenceModal/Browser/index.js

@@ -163,7 +163,7 @@ const Browser = ({
                 silence={silence.silence}
                 alertStore={alertStore}
                 silenceFormStore={silenceFormStore}
-                onDeleteModalClose={onDeleteModalClose}
+                isNested={true}
               />
             ))}
           <PageSelect