chore(ui): add UI animations to react-select menus

ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx

@@ -6,6 +6,7 @@ import Select from "react-select";
 
 import { OptionT } from "Common/Select";
 import { Settings, CollapseStateT } from "Stores/Settings";
+import { AnimatedMenu } from "Components/Select";
 import { ThemeContext } from "Components/Theme";
 
 const AlertGroupCollapseConfiguration: FC<{
@@ -46,6 +47,7 @@ const AlertGroupCollapseConfiguration: FC<{
           onCollapseChange((option as OptionT).value as CollapseStateT)
         }
         hideSelectedOptions
+        components={{ Menu: AnimatedMenu }}
       />
     </div>
   );

ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.tsx

@@ -7,6 +7,7 @@ import Select from "react-select";
 import { Settings, SortOrderT } from "Stores/Settings";
 import { OptionT } from "Common/Select";
 import { ThemeContext } from "Components/Theme";
+import { AnimatedMenu } from "Components/Select";
 import { SortLabelName } from "./SortLabelName";
 
 const AlertGroupSortConfiguration: FC<{
@@ -56,6 +57,7 @@ const AlertGroupSortConfiguration: FC<{
               onSortOrderChange((option as OptionT).value as SortOrderT)
             }
             hideSelectedOptions
+            components={{ Menu: AnimatedMenu }}
           />
         </div>
         {settingsStore.gridConfig.config.sortOrder ===

ui/src/Components/MainModal/Configuration/GridLabelName.tsx

@@ -6,6 +6,7 @@ import { useFetchGet } from "Hooks/useFetchGet";
 import { FormatBackendURI } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { ThemeContext } from "Components/Theme";
+import { AnimatedMenu } from "Components/Select";
 import { NewLabelName, StringToOption, OptionT } from "Common/Select";
 
 const disabledLabel = "Disable multi-grid";
@@ -55,6 +56,7 @@ const GridLabelName: FC<{
       onChange={(option) => {
         settingsStore.multiGridConfig.setGridLabel((option as OptionT).value);
       }}
+      components={{ Menu: AnimatedMenu }}
     />
   );
 };

ui/src/Components/MainModal/Configuration/SortLabelName.tsx

@@ -8,6 +8,7 @@ import { FormatBackendURI } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { useFetchGet } from "Hooks/useFetchGet";
 import { ThemeContext } from "Components/Theme";
+import { AnimatedMenu } from "Components/Select";
 import { NewLabelName, StringToOption } from "Common/Select";
 
 const SortLabelName: FC<{
@@ -37,6 +38,7 @@ const SortLabelName: FC<{
         settingsStore.gridConfig.config.sortLabel = (option as OptionT)
           .value as string;
       }}
+      components={{ Menu: AnimatedMenu }}
     />
   );
 };

ui/src/Components/MainModal/Configuration/ThemeConfiguration.tsx

@@ -6,6 +6,7 @@ import Select from "react-select";
 
 import { OptionT } from "Common/Select";
 import { Settings, ThemeT } from "Stores/Settings";
+import { AnimatedMenu } from "Components/Select";
 import { ThemeContext } from "Components/Theme";
 
 const ThemeConfiguration: FC<{
@@ -42,6 +43,7 @@ const ThemeConfiguration: FC<{
         options={Object.values(settingsStore.themeConfig.options)}
         onChange={(option) => onChange((option as OptionT).value as ThemeT)}
         hideSelectedOptions
+        components={{ Menu: AnimatedMenu }}
       />
     </div>
   );

ui/src/Components/Select/index.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react";
+
+import { components, MenuProps } from "react-select";
+
+import { DropdownSlide } from "Components/Animations/DropdownSlide";
+import { OptionT, MultiValueOptionT } from "Common/Select";
+
+export const AnimatedMenu: FC<MenuProps<OptionT, false>> = (props) => {
+  return (
+    <DropdownSlide in unmountOnExit>
+      <components.Menu {...props}>{props.children}</components.Menu>
+    </DropdownSlide>
+  );
+};
+
+export const AnimatedMultiMenu: FC<MenuProps<MultiValueOptionT, true>> = (
+  props
+) => {
+  return (
+    <DropdownSlide in unmountOnExit>
+      <components.Menu {...props}>{props.children}</components.Menu>
+    </DropdownSlide>
+  );
+};

ui/src/Components/SilenceModal/AlertManagerInput/index.tsx

@@ -12,6 +12,7 @@ import {
 } from "Stores/SilenceFormStore";
 import { MultiValueOptionT } from "Common/Select";
 import { ThemeContext } from "Components/Theme";
+import { AnimatedMultiMenu } from "Components/Select";
 import { ValidationError } from "Components/ValidationError";
 
 const AlertManagerInput: FC<{
@@ -74,6 +75,7 @@ const AlertManagerInput: FC<{
         silenceFormStore.data.setAlertmanagers(newValue as MultiValueOptionT[]);
       }}
       isDisabled={silenceFormStore.data.silenceID !== null}
+      components={{ Menu: AnimatedMultiMenu }}
     />
   );
 });

ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.tsx

@@ -7,6 +7,7 @@ import { MatcherWithIDT } from "Stores/SilenceFormStore";
 import { useFetchGet } from "Hooks/useFetchGet";
 import { ValidationError } from "Components/ValidationError";
 import { ThemeContext } from "Components/Theme";
+import { AnimatedMenu } from "Components/Select";
 import { NewLabelName, OptionT, StringToOption } from "Common/Select";
 
 const LabelNameInput: FC<{
@@ -34,6 +35,7 @@ const LabelNameInput: FC<{
         matcher.name = (option as OptionT).value;
       }}
       hideSelectedOptions
+      components={{ Menu: AnimatedMenu }}
     />
   );
 };

ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.tsx

@@ -16,6 +16,7 @@ import { hashObject } from "Common/Hash";
 import { NewLabelValue, OptionT, StringToOption } from "Common/Select";
 import { ValidationError } from "Components/ValidationError";
 import { ThemeContext } from "Components/Theme";
+import { AnimatedMultiMenu } from "Components/Select";
 import { MatchCounter } from "./MatchCounter";
 
 const GenerateHashFromMatchers = (
@@ -110,6 +111,7 @@ const LabelValueInput: FC<{
           ValueContainerProps<OptionT, true>
         >,
         Placeholder: Placeholder,
+        Menu: AnimatedMultiMenu,
       }}
       silenceFormStore={silenceFormStore}
       matcher={matcher}

ui/src/Styles/Components/DropdownSlide.scss

@@ -2,29 +2,26 @@ $duration: 0.15s;
 
 .components-animation-slide-enter,
 .components-animation-slide-appear {
-  opacity: 0.1;
-  transform: scaleY(0);
-  transform-origin: top;
+  opacity: 0;
+  transform: scale(0.95) translateY(-0.25em);
 }
 .components-animation-slide-enter-active,
 .components-animation-slide-appear-active {
   opacity: 1;
-  transform: scaleY(1);
-  transform-origin: top;
-  transition-property: transform, opacity;
+  transform: scale(1) translateY(0);
+  transition-property: transform;
   transition-duration: $duration;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: ease-out;
 }
 
 .components-animation-slide-exit {
-  transform: scaleY(1);
   opacity: 1;
+  transform: scale(1) translateY(0);
 }
 .components-animation-slide-exit-active {
-  opacity: 0.1;
-  transform-origin: top;
-  transform: scaleY(0);
-  transition-property: transform, opacity;
+  opacity: 0;
+  transform: scale(0.95) translateY(-0.25em);
+  transition-property: opacity, transform;
   transition-duration: $duration;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: ease-out;
 }