From 49264170cea8f487f252df858d98a219fecb8567 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 31 Mar 2020 14:08:40 +0100
Subject: [PATCH] fix(ui): migrate react-popper to v2

---
 ui/package-lock.json                                      | 5 +++++
 ui/package.json                                           | 1 +
 .../Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js          | 8 ++++----
 .../Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js    | 8 ++++----
 ui/src/Components/NavBar/FilterInput/History.js           | 6 +-----
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index be7f1d665..1d4dcde0e 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -2549,6 +2549,11 @@
         "slugify": "^1.1.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.1.1.tgz",
+      "integrity": "sha512-sLqWxCzC5/QHLhziXSCAksBxHfOnQlhPRVgPK0egEw+ktWvG75T2k+aYWVjVh9+WKeT3tlG3ZNbZQvZLmfuOIw=="
+    },
     "@reach/router": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.3.tgz",
diff --git a/ui/package.json b/ui/package.json
index 8892f8e6e..6e59ef134 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -10,6 +10,7 @@
     "@fortawesome/free-regular-svg-icons": "5.13.0",
     "@fortawesome/free-solid-svg-icons": "5.13.0",
     "@fortawesome/react-fontawesome": "0.1.9",
+    "@popperjs/core": "2.1.1",
     "@sentry/browser": "5.15.4",
     "@types/jest": "25.1.4",
     "@types/node": "12.12.31",
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
index fc02e1e2d..213e96b5a 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
@@ -159,10 +159,10 @@ const AlertMenu = observer(
           <DropdownSlide in={!this.collapse.value} unmountOnExit>
             <Popper
               placement="bottom-start"
-              modifiers={{
-                arrow: { enabled: false },
-                offset: { offset: "-5px, 0px" },
-              }}
+              modifiers={[
+                { name: "arrow", enabled: false },
+                { name: "offset", options: { offset: "-5px, 0px" } },
+              ]}
             >
               {({ placement, ref, style }) => (
                 <MenuContent
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js
index 13fdb8928..99fea3edf 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js
@@ -157,10 +157,10 @@ const GroupMenu = observer(
           <DropdownSlide in={!this.collapse.value} unmountOnExit>
             <Popper
               placement="bottom-start"
-              modifiers={{
-                arrow: { enabled: false },
-                offset: { offset: "-5px, 0px" },
-              }}
+              modifiers={[
+                { name: "arrow", enabled: false },
+                { name: "offset", options: { offset: "-5px, 0px" } },
+              ]}
             >
               {({ placement, ref, style }) => (
                 <MenuContent
diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index d599734e0..6b49e286e 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/ui/src/Components/NavBar/FilterInput/History.js
@@ -249,11 +249,7 @@ const History = observer(
             )}
           </Reference>
           <DropdownSlide in={!this.collapse.value} unmountOnExit>
-            <Popper
-              modifiers={{
-                arrow: { enabled: false },
-              }}
-            >
+            <Popper modifiers={[{ name: "arrow", enabled: false }]}>
               {({ placement, ref, style }) => (
                 <HistoryMenu
                   popperPlacement={placement}