fix(ui): migrate react-popper to v2

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",

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",

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

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

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}