fix(ui): silence form needs to be reset every time it's hidden

ui/src/Components/SilenceModal/SilenceModalContent.js

@@ -14,7 +14,8 @@ const SilenceModalContent = observer(
     static propTypes = {
       alertStore: PropTypes.object.isRequired,
       silenceFormStore: PropTypes.object.isRequired,
-      settingsStore: PropTypes.object.isRequired
+      settingsStore: PropTypes.object.isRequired,
+      onHide: PropTypes.func.isRequired
     };
 
     componentDidMount() {
@@ -26,7 +27,12 @@ const SilenceModalContent = observer(
     }
 
     render() {
-      const { alertStore, silenceFormStore, settingsStore } = this.props;
+      const {
+        alertStore,
+        silenceFormStore,
+        settingsStore,
+        onHide
+      } = this.props;
 
       return ReactDOM.createPortal(
         <div className="modal d-block bg-primary-transparent-80" role="dialog">
@@ -34,11 +40,7 @@ const SilenceModalContent = observer(
             <div className="modal-content">
               <div className="modal-header">
                 <h5 className="modal-title">Add new silence</h5>
-                <button
-                  type="button"
-                  className="close"
-                  onClick={silenceFormStore.toggle.hide}
-                >
+                <button type="button" className="close" onClick={onHide}>
                   <span className="align-middle">&times;</span>
                 </button>
               </div>

ui/src/Components/SilenceModal/index.js

@@ -18,6 +18,18 @@ const SilenceModal = observer(
       settingsStore: PropTypes.object.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();
+      }
+    };
+
     componentDidUpdate() {
       const { silenceFormStore } = this.props;
 
@@ -37,10 +49,7 @@ const SilenceModal = observer(
       return (
         <React.Fragment>
           <li className="nav-item">
-            <a
-              className="nav-link cursor-pointer"
-              onClick={silenceFormStore.toggle.toggle}
-            >
+            <a className="nav-link cursor-pointer" onClick={this.toggleModal}>
               <FontAwesomeIcon icon={faBellSlash} />
             </a>
           </li>
@@ -49,6 +58,7 @@ const SilenceModal = observer(
               alertStore={alertStore}
               silenceFormStore={silenceFormStore}
               settingsStore={settingsStore}
+              onHide={this.toggleModal}
             />
           ) : null}
         </React.Fragment>

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

@@ -93,4 +93,13 @@ describe("<SilenceModal />", () => {
     tree.unmount();
     expect(document.body.className.split(" ")).not.toContain("modal-open");
   });
+
+  it("inProgress is set to false after modal is hidden", () => {
+    silenceFormStore.toggle.visible = true;
+    const tree = MountedSilenceModal();
+    silenceFormStore.data.inProgress = true;
+    const toggle = tree.find("button.close");
+    toggle.simulate("click");
+    expect(silenceFormStore.data.inProgress).toBe(false);
+  });
 });