[!] upgrade core webui dependencies (#1237)

- bump @mui/* packages to v6
- bump @tanstack/react-query to v5.75.0
- bump eslint to v9 and migrate to flat config format
- bump typescript to v5.7
- update form and resolver libraries

Author: pashagolub

internal/webui/.eslintignore

@@ -0,0 +1,48 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import prettierConfig from "eslint-config-prettier";
+
+export default [
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+    {
+        files: ["**/*.{ts,tsx,jsx}"],
+        plugins: {
+            react: reactPlugin,
+            "react-hooks": reactHooksPlugin,
+        },
+        languageOptions: {
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+        },
+        settings: {
+            react: {
+                version: "detect",
+            },
+        },
+        rules: {
+            ...reactPlugin.configs.recommended.rules,
+            ...reactHooksPlugin.configs.recommended.rules,
+            "react/react-in-jsx-scope": "off",
+            "react-hooks/set-state-in-effect": "off",
+            "react-hooks/immutability": "off",
+        },
+    },
+    prettierConfig,
+    {
+        ignores: [
+            "dist/**",
+            "node_modules/**",
+            "build/**",
+            "internal/serviceWorker.js",
+            "internal/setupTests.ts",
+            "internal/**/__tests__/**",
+            "internal/**/test/**",
+        ],
+    },
+];

internal/webui/eslint.config.mjs

@@ -7,10 +7,9 @@
   "main": "index.js",
   "scripts": {
     "build": "vite build",
-    "lint:cypress": "eslint --no-eslintrc --ext=ts -c cypress/.eslintrc cypress/e2e",
-    "lint:fix": "eslint --ext=jsx,ts,tsx src --fix",
+    "lint:fix": "eslint src --fix",
     "lint:quick": "yarn lint:ts --cache",
-    "lint:ts": "eslint --ext=jsx,ts,tsx src",
+    "lint:ts": "eslint src",
     "preview": "vite preview",
     "start": "vite"
   },
@@ -26,64 +25,50 @@
       "last 1 safari version"
     ]
   },
-  "eslintConfig": {
-    "extends": [
-      "eslint:recommended",
-      "plugin:@typescript-eslint/recommended"
-    ]
-  },
   "resolutions": {
-    "brace-expansion": "^2.0.2",
     "cookie": "^0.7.0",
-    "form-data": "^4.0.0",
-    "on-headers": "^1.1.0",
-    "path-to-regexp": "^0.1.12",
-    "postcss": "^8.4.31",
-    "serialize-javascript": "^6.0.2",
-    "webpack-dev-server": "^5.2.1"
+    "postcss": "^8.4.31"
   },
   "dependencies": {
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@hookform/resolvers": "^3.3.4",
-    "@mui/icons-material": "^5.16.9",
-    "@mui/lab": "^5.0.0-alpha.176",
-    "@mui/material": "^5.16.9",
-    "@mui/system": "^5.16.7",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@hookform/resolvers": "^5.0.1",
+    "@mui/icons-material": "^6.5.0",
+    "@mui/material": "^6.5.0",
+    "@mui/system": "^6.5.0",
     "@mui/x-data-grid": "^7.29.8",
-    "@tanstack/react-query": "^4.24.4",
+    "@tanstack/react-query": "^5.75.0",
     "axios": "^1.13.5",
     "classnames": "^2.5.1",
-    "form-data": "^4.0.4",
-    "moment": "^2.29.4",
+    "form-data": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.1",
+    "react-hook-form": "^7.55.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "6.8.1",
     "react-use-websocket": "^4.5.0",
     "tss-react": "^4.9.6",
-    "typescript": "^4.9.5",
+    "typescript": "^5.7.0",
     "yaml": "^2.4.1",
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@types/eslint": "^8.21.0",
-    "@types/node": "^18.13.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@types/react-router-dom": "^5.3.3",
+    "@eslint/js": "^9.27.0",
+    "@types/node": "^22.15.0",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
     "@vitejs/plugin-react": "^5.1.3",
     "cross-env": "^10.1.0",
-    "eslint": "^8.33.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.0",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.4.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "prettier": "2.8.4",
+    "prettier": "^3.5.0",
+    "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",
     "vite-plugin-svgr": "^4.5.0",
     "vite-tsconfig-paths": "^6.0.5"

internal/webui/package.json

@@ -28,7 +28,7 @@ export const QueryClientProvider = ({ children }: Props) => {
       onSuccess: (_data, _variables, _context, mutation) => {
         callAlert("success", "Success");
         if (mutation.options.mutationKey) {
-          queryClient.invalidateQueries(mutation.options.mutationKey);
+          queryClient.invalidateQueries({ queryKey: mutation.options.mutationKey });
         }
       },
       onError: (error) => {
@@ -43,7 +43,7 @@ export const QueryClientProvider = ({ children }: Props) => {
   });
 
   return (
-    <ClientProvider client={queryClient} contextSharing={true}>
+    <ClientProvider client={queryClient}>
       {children}
     </ClientProvider>
   );

internal/webui/src/QueryClient.tsx

@@ -36,8 +36,8 @@ export const MetricFormDialog = () => {
     [addMetric.isSuccess, editMetric.isSuccess],
   );
   const isLoading = useMemo(
-    () => addMetric.isLoading || editMetric.isLoading,
-    [addMetric.isLoading, editMetric.isLoading],
+    () => addMetric.isPending || editMetric.isPending,
+    [addMetric.isPending, editMetric.isPending],
   );
 
   useEffect(() => {

internal/webui/src/containers/MetricFormDialog/MetricFormDialog.tsx

@@ -31,8 +31,8 @@ export const PresetFormDialog = () => {
     [addPreset.isSuccess, editPreset.isSuccess],
   );
   const isLoading = useMemo(
-    () => addPreset.isLoading || editPreset.isLoading,
-    [addPreset.isLoading, editPreset.isLoading]
+    () => addPreset.isPending || editPreset.isPending,
+    [addPreset.isPending, editPreset.isPending]
   );
 
   useEffect(() => {

internal/webui/src/containers/PresetFormDialog/PresetFormDialog.tsx

@@ -58,8 +58,8 @@ export const SourceFormDialog = () => {
   };
 
   const isLoading = useMemo(
-    () => addSource.isLoading || editSource.isLoading,
-    [addSource.isLoading, editSource.isLoading],
+    () => addSource.isPending || editSource.isPending,
+    [addSource.isPending, editSource.isPending],
   );
 
   return (

internal/webui/src/containers/SourceFormDialog/SourceFormDialog.tsx

@@ -15,7 +15,7 @@ export const TestConnection = ({ ConnStr }: Props) => {
 
   return (
     <Tooltip title="Test connection">
-      <IconButton onClick={handleTestConnection} disabled={testConnection.isLoading}>
+      <IconButton onClick={handleTestConnection} disabled={testConnection.isPending}>
         <CableIcon />
       </IconButton>
     </Tooltip>

internal/webui/src/containers/SourceFormDialog/components/SourceForm/components/TestConnection/TestConnection.tsx

@@ -18,8 +18,6 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
-    //"suppressImplicitAnyIndexErrors": true,
-    "ignoreDeprecations": "5.0",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "skipLibCheck": true,