From 985bdee53497fb4940d1759b95acf6b55858e07a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 11 Nov 2024 13:34:26 +0000
Subject: [PATCH] fix(ui): fix types

---
 .../Configuration/AlertGroupCollapseConfiguration.tsx         | 4 ++--
 ui/src/Components/MainModal/Configuration/GridLabelName.tsx   | 3 ++-
 ui/src/Components/MainModal/Configuration/SortLabelName.tsx   | 3 ++-
 .../Components/SilenceModal/SilenceMatch/LabelNameInput.tsx   | 3 ++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx
index 387e976a4..23aed72a8 100644
--- a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx
+++ b/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";
@@ -44,7 +44,7 @@ const AlertGroupCollapseConfiguration: FC<{
           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
diff --git a/ui/src/Components/MainModal/Configuration/GridLabelName.tsx b/ui/src/Components/MainModal/Configuration/GridLabelName.tsx
index b55a9c7f5..48dd8513a 100644
--- a/ui/src/Components/MainModal/Configuration/GridLabelName.tsx
+++ b/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";
 
@@ -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 }}
diff --git a/ui/src/Components/MainModal/Configuration/SortLabelName.tsx b/ui/src/Components/MainModal/Configuration/SortLabelName.tsx
index 711802459..77a5a57d7 100644
--- a/ui/src/Components/MainModal/Configuration/SortLabelName.tsx
+++ b/ui/src/Components/MainModal/Configuration/SortLabelName.tsx
@@ -10,6 +10,7 @@ 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;
@@ -36,7 +37,7 @@ const SortLabelName: FC<{
       options={
         response ? response.map((value: string) => StringToOption(value)) : []
       }
-      onChange={(option) => {
+      onChange={(option: OnChangeValue<OptionT, false>) => {
         settingsStore.gridConfig.setSortLabel(
           (option as OptionT).value as string,
         );
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.tsx b/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.tsx
index a6f053f7d..719f539ae 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.tsx
+++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.tsx
@@ -9,6 +9,7 @@ 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;
@@ -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