fix(ui): update eslint

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

@@ -13,9 +13,9 @@ beforeEach(() => {
 
 const renderConfiguration = () => {
   return render(
-    <ThemeContext.Provider value={MockThemeContext}>
+    <ThemeContext value={MockThemeContext}>
       <AlertGroupCollapseConfiguration settingsStore={settingsStore} />
-    </ThemeContext.Provider>,
+    </ThemeContext>,
   );
 };
 

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

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { use, FC } from "react";
 
 import { observer } from "mobx-react-lite";
 
@@ -32,7 +32,7 @@ const AlertGroupCollapseConfiguration: FC<{
     settingsStore.alertGroupConfig.setDefaultCollapseState(newValue);
   };
 
-  const context = React.useContext(ThemeContext);
+  const context = use(ThemeContext);
 
   return (
     <div className="mb-0">

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

@@ -18,9 +18,9 @@ afterEach(() => {
 
 const renderConfiguration = () => {
   return render(
-    <ThemeContext.Provider value={MockThemeContext}>
+    <ThemeContext value={MockThemeContext}>
       <AlertGroupSortConfiguration settingsStore={settingsStore} />
-    </ThemeContext.Provider>,
+    </ThemeContext>,
   );
 };
 

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

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { use, FC } from "react";
 
 import { observer } from "mobx-react-lite";
 
@@ -43,7 +43,7 @@ const AlertGroupSortConfiguration: FC<{
     settingsStore.gridConfig.config.sortOrder ===
       settingsStore.gridConfig.options.disabled.value;
 
-  const context = React.useContext(ThemeContext);
+  const context = use(ThemeContext);
 
   return (
     <div className="mb-0">

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

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { use, FC } from "react";
 
 import Creatable from "react-select/creatable";
 
@@ -33,7 +33,7 @@ const GridLabelName: FC<{
     FormatBackendURI(`labelNames.json`),
   );
 
-  const context = React.useContext(ThemeContext);
+  const context = use(ThemeContext);
 
   const defaultValue =
     settingsStore.multiGridConfig.config.gridLabel === "@auto"

ui/src/Components/MainModal/Configuration/MultiGridConfiguration.test.tsx

@@ -24,9 +24,9 @@ afterEach(() => {
 
 const renderConfiguration = () => {
   return render(
-    <ThemeContext.Provider value={MockThemeContext}>
+    <ThemeContext value={MockThemeContext}>
       <MultiGridConfiguration settingsStore={settingsStore} />
-    </ThemeContext.Provider>,
+    </ThemeContext>,
   );
 };
 

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

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { use, FC } from "react";
 
 import Creatable from "react-select/creatable";
 
@@ -23,7 +23,7 @@ const SortLabelName: FC<{
     settingsStore.gridConfig.setSortLabel(StaticLabels.AlertName);
   }
 
-  const context = React.useContext(ThemeContext);
+  const context = use(ThemeContext);
 
   return (
     <Creatable

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

@@ -13,9 +13,9 @@ beforeEach(() => {
 
 const renderConfiguration = () => {
   return render(
-    <ThemeContext.Provider value={MockThemeContext}>
+    <ThemeContext value={MockThemeContext}>
       <ThemeConfiguration settingsStore={settingsStore} />
-    </ThemeContext.Provider>,
+    </ThemeContext>,
   );
 };
 

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

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { use, FC } from "react";
 
 import { observer } from "mobx-react-lite";
 
@@ -32,7 +32,7 @@ const ThemeConfiguration: FC<{
     settingsStore.themeConfig.setTheme(newValue);
   };
 
-  const context = React.useContext(ThemeContext);
+  const context = use(ThemeContext);
 
   return (
     <div className="mb-2">

ui/src/Components/MainModal/Configuration/index.test.tsx

@@ -24,9 +24,9 @@ describe("<Configuration />", () => {
   it("matches snapshot", () => {
     const settingsStore = new Settings(null);
     const { asFragment } = render(
-      <ThemeContext.Provider value={MockThemeContext}>
+      <ThemeContext value={MockThemeContext}>
         <Configuration settingsStore={settingsStore} defaultIsOpen={true} />
-      </ThemeContext.Provider>,
+      </ThemeContext>,
     );
     expect(asFragment()).toMatchSnapshot();
   });

ui/src/Components/MainModal/MainModalContent.test.tsx

@@ -29,14 +29,14 @@ afterEach(() => {
 
 const renderModalContent = () => {
   return render(
-    <ThemeContext.Provider value={MockThemeContext}>
+    <ThemeContext value={MockThemeContext}>
       <MainModalContent
         alertStore={alertStore}
         settingsStore={settingsStore}
         onHide={onHide}
         expandAllOptions={true}
       />
-    </ThemeContext.Provider>,
+    </ThemeContext>,
   );
 };
 

ui/src/Components/MainModal/index.test.tsx

@@ -46,9 +46,9 @@ const renderMainModal = async () => {
   let result: ReturnType<typeof render>;
   await act(async () => {
     result = render(
-      <ThemeContext.Provider value={MockThemeContext}>
+      <ThemeContext value={MockThemeContext}>
         <MainModal alertStore={alertStore} settingsStore={settingsStore} />
-      </ThemeContext.Provider>,
+      </ThemeContext>,
     );
   });
   return result!;