From b2dccf502115ab1742204c26f2b082eded9c31ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 16 Aug 2018 17:46:56 +0100
Subject: [PATCH] fix(ui): fix missing observer decorator on silence modal

---
 .../SilenceModal/SilenceModalContent.js       | 76 ++++++++++---------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/ui/src/Components/SilenceModal/SilenceModalContent.js b/ui/src/Components/SilenceModal/SilenceModalContent.js
index ec7611237..59295e369 100644
--- a/ui/src/Components/SilenceModal/SilenceModalContent.js
+++ b/ui/src/Components/SilenceModal/SilenceModalContent.js
@@ -2,48 +2,54 @@ import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 
+import { observer } from "mobx-react";
+
 import { SilenceForm } from "./SilenceForm";
 import { SilenceSubmitController } from "./SilenceSubmitController";
 
-class SilenceModalContent extends Component {
-  static propTypes = {
-    alertStore: PropTypes.object.isRequired,
-    silenceFormStore: PropTypes.object.isRequired
-  };
+const SilenceModalContent = observer(
+  class SilenceModalContent extends Component {
+    static propTypes = {
+      alertStore: PropTypes.object.isRequired,
+      silenceFormStore: PropTypes.object.isRequired
+    };
 
-  render() {
-    const { alertStore, silenceFormStore } = this.props;
+    render() {
+      const { alertStore, silenceFormStore } = this.props;
 
-    return ReactDOM.createPortal(
-      <div className="modal d-block bg-primary-transparent-80" role="dialog">
-        <div className="modal-dialog modal-lg" role="document">
-          <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}
-              >
-                <span className="align-middle">&times;</span>
-              </button>
-            </div>
-            <div className="modal-body">
-              {silenceFormStore.data.inProgress ? (
-                <SilenceSubmitController silenceFormStore={silenceFormStore} />
-              ) : (
-                <SilenceForm
-                  alertStore={alertStore}
-                  silenceFormStore={silenceFormStore}
-                />
-              )}
+      return ReactDOM.createPortal(
+        <div className="modal d-block bg-primary-transparent-80" role="dialog">
+          <div className="modal-dialog modal-lg" role="document">
+            <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}
+                >
+                  <span className="align-middle">&times;</span>
+                </button>
+              </div>
+              <div className="modal-body">
+                {silenceFormStore.data.inProgress ? (
+                  <SilenceSubmitController
+                    silenceFormStore={silenceFormStore}
+                  />
+                ) : (
+                  <SilenceForm
+                    alertStore={alertStore}
+                    silenceFormStore={silenceFormStore}
+                  />
+                )}
+              </div>
             </div>
           </div>
-        </div>
-      </div>,
-      document.body
-    );
+        </div>,
+        document.body
+      );
+    }
   }
-}
+);
 
 export { SilenceModalContent };