From ee545f9500d283cd7cb662f0de935b2808f94b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 15 Aug 2018 19:20:31 +0100
Subject: [PATCH] fix(ui): render silence modal on the body using portal

This way modal isn't nested under navbar and doesn't get classes from it
---
 .../SilenceModal/DateTimeSelect/index.js      |  4 +-
 .../SilenceModal/SilenceModalContent.js       | 49 +++++++++++++++++++
 ui/src/Components/SilenceModal/index.js       | 38 ++------------
 3 files changed, 55 insertions(+), 36 deletions(-)
 create mode 100644 ui/src/Components/SilenceModal/SilenceModalContent.js

diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
index 922d0b2a8..a87452add 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
@@ -16,9 +16,7 @@ import "./index.css";
 const Tab = ({ title, active, onClick }) => (
   <li className="nav-item">
     <a
-      className={`nav-link cursor-pointer ${
-        active ? "active text-white" : "text-primary"
-      }`}
+      className={`nav-link cursor-pointer ${active ? "active" : ""}`}
       onClick={onClick}
     >
       {title}
diff --git a/ui/src/Components/SilenceModal/SilenceModalContent.js b/ui/src/Components/SilenceModal/SilenceModalContent.js
new file mode 100644
index 000000000..ec7611237
--- /dev/null
+++ b/ui/src/Components/SilenceModal/SilenceModalContent.js
@@ -0,0 +1,49 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+import { SilenceForm } from "./SilenceForm";
+import { SilenceSubmitController } from "./SilenceSubmitController";
+
+class SilenceModalContent extends Component {
+  static propTypes = {
+    alertStore: PropTypes.object.isRequired,
+    silenceFormStore: PropTypes.object.isRequired
+  };
+
+  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}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>,
+      document.body
+    );
+  }
+}
+
+export { SilenceModalContent };
diff --git a/ui/src/Components/SilenceModal/index.js b/ui/src/Components/SilenceModal/index.js
index 97bbcf590..134840dce 100644
--- a/ui/src/Components/SilenceModal/index.js
+++ b/ui/src/Components/SilenceModal/index.js
@@ -6,8 +6,7 @@ import { observer } from "mobx-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
 
-import { SilenceForm } from "./SilenceForm";
-import { SilenceSubmitController } from "./SilenceSubmitController";
+import { SilenceModalContent } from "./SilenceModalContent";
 
 import "./index.css";
 
@@ -45,37 +44,10 @@ const SilenceModal = observer(
             </a>
           </li>
           {silenceFormStore.toggle.visible ? (
-            <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>
+            <SilenceModalContent
+              alertStore={alertStore}
+              silenceFormStore={silenceFormStore}
+            />
           ) : null}
         </React.Fragment>
       );