fix(ui): fix types

Author: prymitive

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

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 
-import Select from "react-select";
+import Select, { OnChangeValue } from "react-select";
 
 import type { OptionT } from "Common/Select";
 import type { Settings, CollapseStateT } from "Stores/Settings";
@@ -41,10 +41,10 @@ const AlertGroupCollapseConfiguration: FC<{
         classNamePrefix="react-select"
         instanceId="configuration-collapse"
         defaultValue={valueToOption(
-          settingsStore.alertGroupConfig.config.defaultCollapseState,
+          settingsStore.alertGroupConfig.config.defaultCollapseState
         )}
         options={Object.values(settingsStore.alertGroupConfig.options)}
-        onChange={(option) =>
+        onChange={(option: OnChangeValue<OptionT, false>) =>
           onCollapseChange((option as OptionT).value as CollapseStateT)
         }
         hideSelectedOptions

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

@@ -8,6 +8,7 @@ import type { Settings } from "Stores/Settings";
 import { ThemeContext } from "Components/Theme";
 import { AnimatedMenu } from "Components/Select";
 import { NewLabelName, StringToOption, OptionT } from "Common/Select";
+import { OnChangeValue } from "react-select";
 
 const disabledLabel = "Disable multi-grid";
 
@@ -29,7 +30,7 @@ const GridLabelName: FC<{
   settingsStore: Settings;
 }> = ({ settingsStore }) => {
   const { response } = useFetchGet<string[]>(
-    FormatBackendURI(`labelNames.json`),
+    FormatBackendURI(`labelNames.json`)
   );
 
   const context = React.useContext(ThemeContext);
@@ -54,7 +55,7 @@ const GridLabelName: FC<{
             ]
           : staticValues
       }
-      onChange={(option) => {
+      onChange={(option: OnChangeValue<OptionT, false>) => {
         settingsStore.multiGridConfig.setGridLabel((option as OptionT).value);
       }}
       components={{ Menu: AnimatedMenu }}

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

@@ -10,12 +10,13 @@ import { useFetchGet } from "Hooks/useFetchGet";
 import { ThemeContext } from "Components/Theme";
 import { AnimatedMenu } from "Components/Select";
 import { NewLabelName, StringToOption } from "Common/Select";
+import { OnChangeValue } from "react-select";
 
 const SortLabelName: FC<{
   settingsStore: Settings;
 }> = ({ settingsStore }) => {
   const { response } = useFetchGet<string[]>(
-    FormatBackendURI(`labelNames.json`),
+    FormatBackendURI(`labelNames.json`)
   );
 
   if (!settingsStore.gridConfig.config.sortLabel) {
@@ -31,14 +32,14 @@ const SortLabelName: FC<{
       instanceId="configuration-sort-label"
       formatCreateLabel={NewLabelName}
       defaultValue={StringToOption(
-        settingsStore.gridConfig.config.sortLabel as string,
+        settingsStore.gridConfig.config.sortLabel as string
       )}
       options={
         response ? response.map((value: string) => StringToOption(value)) : []
       }
-      onChange={(option) => {
+      onChange={(option: OnChangeValue<OptionT, false>) => {
         settingsStore.gridConfig.setSortLabel(
-          (option as OptionT).value as string,
+          (option as OptionT).value as string
         );
       }}
       components={{ Menu: AnimatedMenu }}

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

@@ -9,13 +9,14 @@ import { ValidationError } from "Components/ValidationError";
 import { ThemeContext } from "Components/Theme";
 import { AnimatedMenu } from "Components/Select";
 import { NewLabelName, OptionT, StringToOption } from "Common/Select";
+import { OnChangeValue } from "react-select";
 
 const LabelNameInput: FC<{
   matcher: MatcherWithIDT;
   isValid: boolean;
 }> = ({ matcher, isValid }) => {
   const { response } = useFetchGet<string[]>(
-    FormatBackendURI(`labelNames.json`),
+    FormatBackendURI(`labelNames.json`)
   );
 
   const context = React.useContext(ThemeContext);
@@ -31,7 +32,7 @@ const LabelNameInput: FC<{
         response ? response.map((value: string) => StringToOption(value)) : []
       }
       placeholder={isValid ? "Label name" : <ValidationError />}
-      onChange={(option) => {
+      onChange={(option: OnChangeValue<OptionT, false>) => {
         matcher.name = (option as OptionT).value;
       }}
       hideSelectedOptions