feat(ui): animate dropdown menus

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js

@@ -16,6 +16,7 @@ import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
 import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
 
 import { FetchPauser } from "Components/FetchPauser";
+import { DropdownSlide } from "Components/Animations/DropdownSlide";
 
 const onSilenceClick = (silenceFormStore, group, alert) => {
   silenceFormStore.data.resetProgress();
@@ -127,7 +128,7 @@ const AlertMenu = observer(
               </span>
             )}
           </Reference>
-          {this.collapse.value ? null : (
+          <DropdownSlide in={!this.collapse.value} unmountOnExit>
             <Popper
               placement="bottom-start"
               modifiers={{
@@ -149,7 +150,7 @@ const AlertMenu = observer(
                 />
               )}
             </Popper>
-          )}
+          </DropdownSlide>
         </Manager>
       );
     }

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js

@@ -16,6 +16,7 @@ import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
 
 import { FormatAPIFilterQuery } from "Stores/AlertStore";
 import { QueryOperators, StaticLabels, FormatQuery } from "Common/Query";
+import { DropdownSlide } from "Components/Animations/DropdownSlide";
 import { FetchPauser } from "Components/FetchPauser";
 
 const onSilenceClick = (silenceFormStore, group) => {
@@ -123,7 +124,7 @@ const GroupMenu = observer(
               </a>
             )}
           </Reference>
-          {this.collapse.value ? null : (
+          <DropdownSlide in={!this.collapse.value} unmountOnExit>
             <Popper
               placement="bottom-start"
               modifiers={{
@@ -146,7 +147,7 @@ const GroupMenu = observer(
                 />
               )}
             </Popper>
-          )}
+          </DropdownSlide>
         </Manager>
       );
     }

ui/src/Components/NavBar/FilterInput/History.js

@@ -19,6 +19,7 @@ import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
+import { DropdownSlide } from "Components/Animations/DropdownSlide";
 import { HistoryLabel } from "Components/Labels/HistoryLabel";
 
 import "./History.css";
@@ -249,7 +250,7 @@ const History = observer(
               </button>
             )}
           </Reference>
-          {this.collapse.value ? null : (
+          <DropdownSlide in={!this.collapse.value} unmountOnExit>
             <Popper
               modifiers={{
                 arrow: { enabled: false }
@@ -270,7 +271,7 @@ const History = observer(
                 />
               )}
             </Popper>
-          )}
+          </DropdownSlide>
         </Manager>
       );
     }