Upgrade frontend dependencies (#360)

Signed-off-by: Cintia Sánchez García <[email protected]>

Author: cynthia-sg

web/.env

@@ -0,0 +1 @@
+SASS_SILENCE_DEPRECATIONS=legacy-js-api,import,global-builtin,color-functions,unit

web/eslint.config.js

@@ -6,9 +6,11 @@ import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import tseslint from 'typescript-eslint';
 import globals from "globals";
 
+const tsRecommended = tseslint.plugin.configs['flat/recommended'];
+
 const config = [
   js.configs.recommended,
-  ...tseslint.configs.recommended,
+  ...tsRecommended,
   {
     linterOptions: {
       reportUnusedDisableDirectives: 'error',

web/package.json

@@ -6,42 +6,42 @@
   "type": "module",
   "dependencies": {
     "classnames": "^2.5.1",
-    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.4.2",
+    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.4.5",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
-    "react-router-dom": "^7.3.0",
+    "react-router-dom": "^7.9.2",
     "source-map-explorer": "^2.5.3"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@eslint/js": "^9.20.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@eslint/js": "^9.36.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.15",
-    "@types/node": "^22.13.1",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "eslint": "^9.20.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-prettier": "^5.2.3",
+    "@types/jest": "^30.0.0",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^16.0.0",
-    "postcss": "^8.5.2",
-    "prettier": "^3.5.0",
+    "globals": "^16.4.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
     "react-scripts": "5.0.1",
-    "sass": "^1.84.0",
+    "sass": "^1.93.2",
     "shx": "^0.4.0",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.24.0"
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.1"
   },
   "resolutions": {
-    "react-scripts/**/core-js-pure": "3.41.0"
+    "react-scripts/**/core-js-pure": "3.45.1"
   },
   "scripts": {
     "copy:static": "shx rm -rf src/static && shx mkdir src/static && shx cp -r public/static/* src",

web/src/context/AppContextProvider.tsx

@@ -1,6 +1,6 @@
 import { detectActiveThemeMode, useSystemThemeMode } from 'clo-ui';
 import { isNull } from 'lodash';
-import { createContext, Dispatch, useContext, useEffect, useReducer, useState } from 'react';
+import { createContext, Dispatch, ReactNode, useContext, useEffect, useReducer, useState } from 'react';
 
 import { Prefs, SortBy, SortDirection } from '../types';
 import lsStorage from '../utils/localStoragePreferences';
@@ -10,7 +10,7 @@ interface AppState {
 }
 
 interface Props {
-  children: JSX.Element;
+  children: ReactNode;
 }
 
 const initialState: AppState = {

web/src/layout/navigation/MobileSettings.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { ExternalLink, useOutsideClick } from 'clo-ui';
-import { useRef, useState } from 'react';
+import { RefObject, useRef, useState } from 'react';
 import { BsList } from 'react-icons/bs';
 import { FaGithub } from 'react-icons/fa';
 
@@ -9,8 +9,8 @@ import ThemeMode from './ThemeMode';
 
 const MobileSettings = () => {
   const [visibleDropdown, setVisibleDropdown] = useState(false);
-  const ref = useRef(null);
-  useOutsideClick([ref], visibleDropdown, () => setVisibleDropdown(false));
+  const ref = useRef<HTMLDivElement | null>(null);
+  useOutsideClick([ref as unknown as RefObject<HTMLElement>], visibleDropdown, () => setVisibleDropdown(false));
 
   return (
     <div ref={ref} className="d-flex d-md-none ms-auto position-relative">

web/src/types.ts

@@ -116,6 +116,7 @@ export interface ReconciliationStatus {
 }
 
 export interface SearchTipItem {
-  content: JSX.Element | string;
+  content: ReactNode;
   example: string;
 }
+import { ReactNode } from 'react';