fix(ui): upgrade react to v19

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

@@ -25,16 +25,26 @@ const AlertGroupConfiguration: FC<{
         values={defaultRenderCount}
         onChange={(values) => setDefaultRenderCount(values)}
         onFinalChange={(values) => onChangeComplete(values[0])}
-        renderTrack={({ props, children }) => (
-          <div className="input-range-track" {...props}>
-            {children}
-          </div>
-        )}
-        renderThumb={({ props }) => (
-          <div className="input-range-thumb" {...props}>
-            {defaultRenderCount}
-          </div>
-        )}
+        renderTrack={({ props, children }) => {
+          const { key, ...restProps } = props as typeof props & {
+            key?: string;
+          };
+          return (
+            <div key={key} className="input-range-track" {...restProps}>
+              {children}
+            </div>
+          );
+        }}
+        renderThumb={({ props }) => {
+          const { key, ...restProps } = props as typeof props & {
+            key?: string;
+          };
+          return (
+            <div key={key} className="input-range-thumb" {...restProps}>
+              {defaultRenderCount}
+            </div>
+          );
+        }}
       />
     </div>
   );

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

@@ -1,4 +1,7 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { act } from "react";
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { Settings } from "Stores/Settings";
 import { AlertGroupTitleBarColor } from "./AlertGroupTitleBarColor";
@@ -14,33 +17,43 @@ const renderConfiguration = () => {
 
 describe("<AlertGroupTitleBarColor />", () => {
   it("matches snapshot with default values", () => {
+    // Verifies component renders correctly with default settings
     const { asFragment } = renderConfiguration();
     expect(asFragment()).toMatchSnapshot();
   });
 
   it("colorTitleBar is 'false' by default", () => {
+    // Verifies default value of colorTitleBar setting
     expect(settingsStore.alertGroupConfig.config.colorTitleBar).toBe(false);
   });
 
   it("unchecking the checkbox sets stored colorTitleBar value to 'false'", async () => {
+    // Verifies clicking checkbox when checked sets store value to false
+    const user = userEvent.setup();
     renderConfiguration();
     const checkbox = screen.getByRole("checkbox");
 
-    settingsStore.alertGroupConfig.setColorTitleBar(true);
+    act(() => {
+      settingsStore.alertGroupConfig.setColorTitleBar(true);
+    });
     expect(settingsStore.alertGroupConfig.config.colorTitleBar).toBe(true);
-    fireEvent.click(checkbox);
+    await user.click(checkbox);
     await waitFor(() => {
       expect(settingsStore.alertGroupConfig.config.colorTitleBar).toBe(false);
     });
   });
 
   it("checking the checkbox sets stored colorTitleBar value to 'true'", async () => {
+    // Verifies clicking checkbox when unchecked sets store value to true
+    const user = userEvent.setup();
     renderConfiguration();
     const checkbox = screen.getByRole("checkbox");
 
-    settingsStore.alertGroupConfig.setColorTitleBar(false);
+    act(() => {
+      settingsStore.alertGroupConfig.setColorTitleBar(false);
+    });
     expect(settingsStore.alertGroupConfig.config.colorTitleBar).toBe(false);
-    fireEvent.click(checkbox);
+    await user.click(checkbox);
     await waitFor(() => {
       expect(settingsStore.alertGroupConfig.config.colorTitleBar).toBe(true);
     });

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

@@ -27,16 +27,26 @@ const AlertGroupWidthConfiguration: FC<{
         values={groupWidth}
         onChange={(values) => setGroupWidth(values)}
         onFinalChange={(values) => onChangeComplete(values[0])}
-        renderTrack={({ props, children }) => (
-          <div className="input-range-track" {...props}>
-            {children}
-          </div>
-        )}
-        renderThumb={({ props }) => (
-          <div className="input-range-thumb" {...props}>
-            {groupWidth}
-          </div>
-        )}
+        renderTrack={({ props, children }) => {
+          const { key, ...restProps } = props as typeof props & {
+            key?: string;
+          };
+          return (
+            <div key={key} className="input-range-track" {...restProps}>
+              {children}
+            </div>
+          );
+        }}
+        renderThumb={({ props }) => {
+          const { key, ...restProps } = props as typeof props & {
+            key?: string;
+          };
+          return (
+            <div key={key} className="input-range-thumb" {...restProps}>
+              {groupWidth}
+            </div>
+          );
+        }}
       />
     </div>
   );

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

@@ -25,16 +25,26 @@ const FetchConfiguration: FC<{
         values={fetchInterval}
         onChange={(values) => setFetchInterval(values)}
         onFinalChange={(values) => onChangeComplete(values[0])}
-        renderTrack={({ props, children }) => (
-          <div className="input-range-track" {...props}>
-            {children}
-          </div>
-        )}
-        renderThumb={({ props }) => (
-          <div className="input-range-thumb" {...props}>
-            {fetchInterval}s
-          </div>
-        )}
+        renderTrack={({ props, children }) => {
+          const { key, ...restProps } = props as typeof props & {
+            key?: string;
+          };
+          return (
+            <div key={key} className="input-range-track" {...restProps}>
+              {children}
+            </div>
+          );
+        }}
+        renderThumb={({ props }) => {
+          const { key, ...restProps } = props as typeof props & {
+            key?: string;
+          };
+          return (
+            <div key={key} className="input-range-thumb" {...restProps}>
+              {fetchInterval}s
+            </div>
+          );
+        }}
       />
     </div>
   );

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

@@ -1,4 +1,7 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { act } from "react";
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { Settings } from "Stores/Settings";
 import { FilterBarConfiguration } from "./FilterBarConfiguration";
@@ -14,28 +17,35 @@ const renderConfiguration = () => {
 
 describe("<FilterBarConfiguration />", () => {
   it("matches snapshot with default values", () => {
+    // Verifies component renders correctly with default settings
     const { asFragment } = renderConfiguration();
     expect(asFragment()).toMatchSnapshot();
   });
 
   it("unchecking the checkbox sets stored autohide value to 'false'", async () => {
+    // Verifies clicking checkbox when checked sets store value to false
+    const user = userEvent.setup();
     renderConfiguration();
     const checkbox = screen.getByRole("checkbox");
 
     expect(settingsStore.filterBarConfig.config.autohide).toBe(true);
-    fireEvent.click(checkbox);
+    await user.click(checkbox);
     await waitFor(() => {
       expect(settingsStore.filterBarConfig.config.autohide).toBe(false);
     });
   });
 
   it("checking the checkbox sets stored autohide value to 'true'", async () => {
+    // Verifies clicking checkbox when unchecked sets store value to true
+    const user = userEvent.setup();
     renderConfiguration();
     const checkbox = screen.getByRole("checkbox");
 
-    settingsStore.filterBarConfig.setAutohide(false);
+    act(() => {
+      settingsStore.filterBarConfig.setAutohide(false);
+    });
     expect(settingsStore.filterBarConfig.config.autohide).toBe(false);
-    fireEvent.click(checkbox);
+    await user.click(checkbox);
     await waitFor(() => {
       expect(settingsStore.filterBarConfig.config.autohide).toBe(true);
     });