fix(ui): rewrite more components with hooks

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

@@ -34,6 +34,7 @@ beforeEach(() => {
 afterEach(() => {
   jest.restoreAllMocks();
   fetchMock.reset();
+  document.body.className = "";
 });
 
 const MountedMainModal = () => {
@@ -111,8 +112,12 @@ describe("<MainModal />", () => {
   it("'modal-open' class is removed from body node after modal is hidden", () => {
     const tree = MountedMainModal();
     const toggle = tree.find(".nav-link");
+
     toggle.simulate("click");
+    expect(document.body.className.split(" ")).toContain("modal-open");
+
     toggle.simulate("click");
+    act(() => jest.runOnlyPendingTimers());
     expect(document.body.className.split(" ")).not.toContain("modal-open");
   });
 

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

@@ -52,10 +52,10 @@ afterEach(() => {
   useFetchGet.mockReset();
   useFetchDelete.mockReset();
   clear();
+  document.body.className = "";
 });
 
 const MockOnHide = jest.fn();
-const MockOnModalExit = jest.fn();
 
 const MountedDeleteSilence = () => {
   return mount(
@@ -64,7 +64,6 @@ const MountedDeleteSilence = () => {
       silenceFormStore={silenceFormStore}
       cluster={cluster}
       silence={silence}
-      onModalExit={MockOnModalExit}
     />
   );
 };
@@ -100,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", () => {
@@ -112,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,11 +1,8 @@
-import React, { Component } from "react";
+import React, { useRef, useEffect } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
-import { observable } from "mobx";
-
-import { disableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 
 import { HotKeys } from "react-hotkeys";
 
@@ -14,105 +11,66 @@ import {
   MountModalBackdrop,
 } from "Components/Animations/MountModal";
 
-const Modal = observer(
-  class Modal extends Component {
-    static propTypes = {
-      size: PropTypes.oneOf(["lg", "xl"]),
-      isOpen: PropTypes.bool.isRequired,
-      isUpper: PropTypes.bool,
-      toggleOpen: PropTypes.func.isRequired,
-      children: PropTypes.node.isRequired,
-    };
-    static defaultProps = {
-      size: "lg",
-      isUpper: false,
-    };
+const ModalInner = ({ size, isUpper, toggleOpen, children }) => {
+  const ref = useRef(null);
 
-    constructor(props) {
-      super(props);
-      this.modalRef = React.createRef();
-      this.HotKeysRef = React.createRef();
-      this.lastIsOpen = observable.box(false);
-    }
+  useEffect(() => {
+    document.body.classList.add("modal-open");
+    disableBodyScroll(ref.current);
 
-    toggleBodyClass = (isOpen) => {
-      document.body.classList.toggle("modal-open", isOpen);
-      if (isOpen) {
-        this.HotKeysRef.current.focus();
-        disableBodyScroll(this.modalRef.current);
-      } else {
-        clearAllBodyScrollLocks();
-      }
-      this.lastIsOpen.set(isOpen);
+    let modal = ref.current;
+    return () => {
+      if (!isUpper) document.body.classList.remove("modal-open");
+      enableBodyScroll(modal);
     };
+  }, [isUpper]);
 
-    componentDidMount() {
-      const { isOpen } = this.props;
-      if (isOpen) {
-        this.toggleBodyClass(isOpen);
-      }
-    }
-
-    componentDidUpdate() {
-      const { isOpen } = this.props;
-      // we shouldn't update if modal is hidden and was hidden previously
-      // which can happen when the button gets re-rendered
-      if (this.lastIsOpen.get() === true || isOpen === true) {
-        this.toggleBodyClass(isOpen);
-      }
-    }
-
-    componentWillUnmount() {
-      const { isOpen } = this.props;
-
-      if (isOpen) {
-        this.toggleBodyClass(false);
-      }
-    }
-
-    render() {
-      const {
-        size,
-        isOpen,
-        isUpper,
-        toggleOpen,
-        children,
-        ...props
-      } = this.props;
+  return (
+    <HotKeys
+      innerRef={(r) => r && r.focus()}
+      keyMap={{ CLOSE: "Escape" }}
+      handlers={{ CLOSE: toggleOpen }}
+      className="modal-open"
+    >
+      <div ref={ref} className="modal d-block" role="dialog">
+        <div
+          className={`modal-dialog modal-${size} ${
+            isUpper ? "modal-upper shadow" : ""
+          }`}
+          role="document"
+        >
+          <div className="modal-content">{children}</div>
+        </div>
+      </div>
+    </HotKeys>
+  );
+};
 
-      return ReactDOM.createPortal(
-        <React.Fragment>
-          <MountModal
-            in={isOpen}
-            unmountOnExit
-            className="modal-open"
-            {...props}
-          >
-            <HotKeys
-              innerRef={this.HotKeysRef}
-              keyMap={{ CLOSE: "Escape" }}
-              handlers={{ CLOSE: toggleOpen }}
-            >
-              <div ref={this.modalRef} className="modal d-block" role="dialog">
-                <div
-                  className={`modal-dialog modal-${size} ${
-                    isUpper && "modal-upper shadow"
-                  }`}
-                  role="document"
-                >
-                  <div className="modal-content">{children}</div>
-                </div>
-              </div>
-            </HotKeys>
-          </MountModal>
-          <MountModalBackdrop in={isOpen} unmountOnExit>
-            <div className="modal-backdrop d-block" />
-          </MountModalBackdrop>
-        </React.Fragment>,
-        document.body
-      );
-    }
-  }
-);
+const Modal = ({ size, isOpen, isUpper, toggleOpen, children, ...props }) => {
+  return ReactDOM.createPortal(
+    <React.Fragment>
+      <MountModal in={isOpen} unmountOnExit {...props}>
+        <ModalInner size={size} isUpper={isUpper} toggleOpen={toggleOpen}>
+          {children}
+        </ModalInner>
+      </MountModal>
+      <MountModalBackdrop in={isOpen} unmountOnExit>
+        <div className="modal-backdrop d-block" />
+      </MountModalBackdrop>
+    </React.Fragment>,
+    document.body
+  );
+};
+Modal.propTypes = {
+  size: PropTypes.oneOf(["lg", "xl"]),
+  isOpen: PropTypes.bool.isRequired,
+  isUpper: PropTypes.bool,
+  toggleOpen: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+};
+Modal.defaultProps = {
+  size: "lg",
+  isUpper: false,
+};
 
 export { Modal };