From 96acb5bbfe2b3ee456f569381fbe130503ce7420 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 11 Oct 2018 10:25:31 +0100
Subject: [PATCH] fix(ui): fix silence form reset callbacks

resetProgress() should only be called *after* form is hidden, doing it before will cause it to re-render with UserInput stage which will trigger autocomplete requests
---
 ui/src/Components/SilenceModal/index.js      | 21 ++++++--------------
 ui/src/Components/SilenceModal/index.test.js | 20 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/ui/src/Components/SilenceModal/index.js b/ui/src/Components/SilenceModal/index.js
index b70f13809..400a261d2 100644
--- a/ui/src/Components/SilenceModal/index.js
+++ b/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>
diff --git a/ui/src/Components/SilenceModal/index.test.js b/ui/src/Components/SilenceModal/index.test.js
index c2aaef799..0954eb3e0 100644
--- a/ui/src/Components/SilenceModal/index.test.js
+++ b/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");