Merge pull request #140 from prymitive/fix-silence-for-hide

fix(ui): fix silence form reset callbacks

ui/src/Components/Modal/index.js

@@ -42,11 +42,11 @@ const Modal = observer(
     }
 
     render() {
-      const { isOpen, children } = this.props;
+      const { isOpen, children, ...props } = this.props;
 
       return ReactDOM.createPortal(
         <React.Fragment>
-          <MountModal in={isOpen} unmountOnExit>
+          <MountModal in={isOpen} unmountOnExit {...props}>
             <div className="modal d-block" role="dialog">
               <div className="modal-dialog modal-lg" role="document">
                 <div className="modal-content">{children}</div>

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

@@ -28,4 +28,15 @@ describe("<Modal />", () => {
     tree.unmount();
     expect(document.body.className.split(" ")).not.toContain("modal-open");
   });
+
+  it("passes extra props down to the MountModal animation component", () => {
+    const onExited = jest.fn();
+    const tree = mount(
+      <Modal isOpen={true} onExited={onExited}>
+        <div />
+      </Modal>
+    );
+    const mountModal = tree.find("MountModal");
+    expect(mountModal.props().onExited).toBe(onExited);
+  });
 });

ui/src/Components/SilenceModal/index.js

@@ -23,18 +23,6 @@ const SilenceModal = observer(
       settingsStore: PropTypes.instanceOf(Settings).isRequired
     };
 
-    toggleModal = () => {
-      const { silenceFormStore } = this.props;
-
-      silenceFormStore.toggle.toggle();
-      if (silenceFormStore.toggle.visible === false) {
-        // need to reset progress if we're hiding modal
-        // SilenceSubmitProgress sends a fetch on mount which would result in
-        // duplicate silences if we didn't reset state of the form on destroy
-        silenceFormStore.data.resetProgress();
-      }
-    };
-
     render() {
       const { alertStore, silenceFormStore, settingsStore } = this.props;
 
@@ -44,18 +32,21 @@ const SilenceModal = observer(
             <TooltipWrapper title="Add new silence">
               <span
                 className="nav-link cursor-pointer"
-                onClick={this.toggleModal}
+                onClick={silenceFormStore.toggle.toggle}
               >
                 <FontAwesomeIcon icon={faBellSlash} />
               </span>
             </TooltipWrapper>
           </li>
-          <Modal isOpen={silenceFormStore.toggle.visible}>
+          <Modal
+            isOpen={silenceFormStore.toggle.visible}
+            onExited={silenceFormStore.data.resetProgress}
+          >
             <SilenceModalContent
               alertStore={alertStore}
               silenceFormStore={silenceFormStore}
               settingsStore={settingsStore}
-              onHide={this.toggleModal}
+              onHide={silenceFormStore.toggle.hide}
             />
           </Modal>
         </React.Fragment>

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

@@ -4,7 +4,7 @@ import { mount } from "enzyme";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
-import { SilenceFormStore } from "Stores/SilenceFormStore";
+import { SilenceFormStore, SilenceFormStage } from "Stores/SilenceFormStore";
 import { SilenceModal } from ".";
 
 let alertStore;
@@ -77,6 +77,24 @@ describe("<SilenceModal />", () => {
     expect(tree.find("SilenceModalContent")).toHaveLength(0);
   });
 
+  it("resets progress on hide", () => {
+    const tree = MountedSilenceModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+
+    // mark form as dirty, resetProgress() should change this value to false
+    silenceFormStore.data.wasValidated = true;
+
+    // click to hide
+    toggle.simulate("click");
+    // wait for animation to finish
+    jest.runOnlyPendingTimers();
+    tree.update();
+    // form should be reset
+    expect(silenceFormStore.data.currentStage).toBe(SilenceFormStage.UserInput);
+    expect(silenceFormStore.data.wasValidated).toBe(false);
+  });
+
   it("'modal-open' class is appended to body node when modal is visible", () => {
     const tree = MountedSilenceModal();
     const toggle = tree.find(".nav-link");