[!] upgrade webui to React v19, MUI v9, MUI X Data Grid v9 (#1422)

pashagolub · web-flow · commit 8bc7d06130ec · 2026-06-02T17:00:12.000+02:00
- Bump react/react-dom to 19.2, @mui/* to 9.0.1, x-data-grid to 9.3
 - Fix icon rename: RemoveCircleOutline → RemoveCircleOutlined
 - Migrate componentsProps → slotProps, Box/Typography inline props → sx
 - Replace JSX.Element with React.ReactNode (React 19 global JSX gone)
 - Cast yupResolver to Resolver&lt;T&gt; (@hookform/resolvers v5 inference change)
 - Add showToolbar prop to all DataGrids (v9 no longer infers from slots)
 - Remove dead code: CustomColumnMenu, useGridColumnVisibility, resetColumnSizes
diff --git a/internal/webui/package.json b/internal/webui/package.json
@@ -40,31 +40,31 @@
     "@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",
+    "@mui/icons-material": "^9.0.1",
+    "@mui/material": "^9.0.1",
+    "@mui/system": "^9.0.1",
+    "@mui/x-data-grid": "^9.3.0",
     "@tanstack/react-query": "^5.75.0",
     "axios": "^1.16.0",
     "classnames": "^2.5.1",
     "form-data": "^4.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-hook-form": "^7.55.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.28.1",
     "react-syntax-highlighter": "^16.1.1",
     "react-use-websocket": "^4.5.0",
-    "tss-react": "^4.9.6",
+    "tss-react": "^4.9.21",
     "typescript": "^5.7.0",
     "yaml": "^2.8.3",
     "yup": "^1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",
     "@types/node": "^22.15.0",
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
diff --git a/internal/webui/src/QueryClient.tsx b/internal/webui/src/QueryClient.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { QueryClientProvider as ClientProvider, MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
 import { isUnauthorized } from "api";
 import axios from "axios";
@@ -7,7 +8,7 @@ import { logout } from "queries/Auth";
 import { useAlert } from "utils/AlertContext";
 
 type Props = {
-  children: JSX.Element
+  children: React.ReactNode
 };
 
 export const QueryClientProvider = ({ children }: Props) => {
diff --git a/internal/webui/src/components/Autocomplete/Autocomplete.tsx b/internal/webui/src/components/Autocomplete/Autocomplete.tsx
@@ -46,7 +46,7 @@ export const Autocomplete = (props: Props) => {
       )}
       onChange={(_, value) => field.onChange(value ? value.label : "")}
       loading={loading}
-      componentsProps={{
+      slotProps={{
         popper: {
           modifiers: [
             {
diff --git a/internal/webui/src/components/CustomColumnMenu/CustomColumnMenu.tsx b/internal/webui/src/components/CustomColumnMenu/CustomColumnMenu.tsx
diff --git a/internal/webui/src/components/CustomColumnMenu/index.ts b/internal/webui/src/components/CustomColumnMenu/index.ts
diff --git a/internal/webui/src/components/Error/Error.tsx b/internal/webui/src/components/Error/Error.tsx
@@ -10,7 +10,7 @@ export const Error = ({ message }: Props) => {
 
   return (
     <div className={classes.root}>
-      <Typography variant="h3" fontWeight="bold">Oops!</Typography>
+      <Typography variant="h3" sx={{ fontWeight: "bold" }}>Oops!</Typography>
       <Typography variant="h5">Something went wrong...</Typography>
       <Typography>{message}</Typography>
     </div>
diff --git a/internal/webui/src/containers/MetricFormDialog/MetricFormDialog.tsx b/internal/webui/src/containers/MetricFormDialog/MetricFormDialog.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo } from "react";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import { useMetricFormContext } from "contexts/MetricForm/MetricForm.context";
-import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+import { FormProvider, Resolver, SubmitHandler, useForm } from "react-hook-form";
 import { useFormStyles } from "styles/form";
 import { useAddMetric, useEditMetric } from "queries/Metric";
 import { createMetricRequest, getMetricInitialValues } from "./MetricFormDialog.consts";
@@ -13,7 +13,7 @@ import { MetricFormValues } from "./components/MetricForm/MetricForm.types";
 export const MetricFormDialog = () => {
   const { data, open, handleClose } = useMetricFormContext();
   const formMethods = useForm<MetricFormValues>({
-    resolver: yupResolver(metricFormValuesValidationSchema),
+    resolver: yupResolver(metricFormValuesValidationSchema) as unknown as Resolver<MetricFormValues>,
   });
   const { handleSubmit, reset, setError } = formMethods;
   const { classes } = useFormStyles();
diff --git a/internal/webui/src/containers/PresetFormDialog/PresetFormDialog.tsx b/internal/webui/src/containers/PresetFormDialog/PresetFormDialog.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo } from "react";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import { usePresetFormContext } from "contexts/PresetForm/PresetForm.context";
-import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+import { FormProvider, Resolver, SubmitHandler, useForm } from "react-hook-form";
 import { useFormStyles } from "styles/form";
 import { useAddPreset, useEditPreset } from "queries/Preset";
 import { createPresetRequest, getPresetInitialValues } from "./PresetFormDialog.consts";
@@ -13,7 +13,7 @@ import { PresetFormValues } from "./components/PresetForm/PresetForm.types";
 export const PresetFormDialog = () => {
   const { data, open, handleClose } = usePresetFormContext();
   const formMethods = useForm<PresetFormValues>({
-    resolver: yupResolver(presetFormValuesValidationSchema)
+    resolver: yupResolver(presetFormValuesValidationSchema) as unknown as Resolver<PresetFormValues>
   });
   const { handleSubmit, reset } = formMethods;
   const { classes } = useFormStyles();
diff --git a/internal/webui/src/containers/SourceFormDialog/SourceFormDialog.tsx b/internal/webui/src/containers/SourceFormDialog/SourceFormDialog.tsx
@@ -3,7 +3,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import { useSourceFormContext } from "contexts/SourceForm/SourceForm.context";
 import { SourceFormActions } from "contexts/SourceForm/SourceForm.types";
-import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+import { FormProvider, Resolver, SubmitHandler, useForm } from "react-hook-form";
 import { useFormStyles } from "styles/form";
 import { useAddSource, useEditSource } from "queries/Source";
 import { createSourceRequest, getSourceInitialValues } from "./SourceFormDialog.consts";
@@ -16,7 +16,7 @@ export const SourceFormDialog = () => {
   const [nameOrig, setnameOrig] = useState<string>("");
 
   const formMethods = useForm<SourceFormValues>({
-    resolver: yupResolver(sourceFormValuesValidationSchema),
+    resolver: yupResolver(sourceFormValuesValidationSchema) as unknown as Resolver<SourceFormValues>,
   });
   const { handleSubmit, reset, setValue } = formMethods;
 
diff --git a/internal/webui/src/hooks/useGridColumnVisibility.ts b/internal/webui/src/hooks/useGridColumnVisibility.ts
diff --git a/internal/webui/src/hooks/useGridState.ts b/internal/webui/src/hooks/useGridState.ts
@@ -70,20 +70,6 @@ export const useGridState = (
     });
   }, [saveToStorage]);
 
-  const resetColumnSizes = useCallback(() => {
-    const defaultSizing = columns?.reduce((acc, col) => ({
-      ...acc,
-      [col.field]: col.width || 150
-    }), {});
-
-    setGridState(prev => {
-      const newState = { ...prev, columnSizing: defaultSizing };
-      saveToStorage(newState);
-      return newState;
-    });
-  }, [columns, saveToStorage]);
-
-  // Memoize columns with applied widths so objects are stable between renders
   const columnsWithSizing = useMemo(() => columns?.map(col => ({
     ...col,
     width: gridState.columnSizing[col.field] || col.width || 150
@@ -95,6 +81,5 @@ export const useGridState = (
     columnsWithSizing,
     onColumnVisibilityChange: handleColumnVisibilityChange,
     onColumnWidthChange: handleColumnWidthChange,
-    resetColumnSizes
   };
 };
diff --git a/internal/webui/src/layout/PrivateRoute.tsx b/internal/webui/src/layout/PrivateRoute.tsx
@@ -1,8 +1,9 @@
+import React from "react";
 import { Navigate } from "react-router-dom";
 import { getToken } from "services/Token";
 
 type Props = {
-  children: JSX.Element
+  children: React.ReactNode
 };
 
 export const PrivateRoute = ({ children }: Props) => {
diff --git a/internal/webui/src/pages/LoginPage/LoginPage.tsx b/internal/webui/src/pages/LoginPage/LoginPage.tsx
@@ -40,7 +40,7 @@ export const LoginPage = () => {
   if (isCheckingAuth) {
     return (
       <div className={cx(pageClasses.root, signLoginClasses.root)}>
-        <Box display="flex" flexDirection="column" alignItems="center" gap={2}>
+        <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
           <CircularProgress size={40} />
           <Typography variant="body1">Checking authentication...</Typography>
         </Box>
diff --git a/internal/webui/src/pages/LoginPage/components/LoginForm/LoginForm.tsx b/internal/webui/src/pages/LoginPage/components/LoginForm/LoginForm.tsx
@@ -1,7 +1,7 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Button, FormControl, FormHelperText, InputLabel, OutlinedInput, Typography } from "@mui/material";
 import { PasswordInput } from "components/PasswordInput/PasswordInput";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { Resolver, SubmitHandler, useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { useFormStyles } from "styles/form";
 import { useLogin } from "queries/Auth";
@@ -14,7 +14,7 @@ export const LoginForm = () => {
   const { classes: formClasses } = useFormStyles();
 
   const { register, handleSubmit, formState: { errors } } = useForm<LoginFormValues>({
-    resolver: yupResolver(loginFormValuesValidationSchema),
+    resolver: yupResolver(loginFormValuesValidationSchema) as unknown as Resolver<LoginFormValues>,
   });
 
   const navigate = useNavigate();
diff --git a/internal/webui/src/pages/MetricsPage/components/MetricsGrid/MetricsGrid.tsx b/internal/webui/src/pages/MetricsPage/components/MetricsGrid/MetricsGrid.tsx
@@ -58,6 +58,7 @@ export const MetricsGrid = () => {
           columns={columnsWithSizing}
           rows={rows}
           pageSizeOptions={[]}
+          showToolbar
           slots={{ 
             toolbar: () => <MetricsGridToolbar />
           }}
diff --git a/internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/ListPopUp/ListPopUp.tsx b/internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/ListPopUp/ListPopUp.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import ListAltIcon from '@mui/icons-material/ListAlt';
-import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutlined';
 import { Box, Chip, Dialog, DialogContent, DialogTitle, IconButton, List, ListItem, ListItemText, Tooltip } from "@mui/material";
 
 type Props = {
@@ -50,10 +50,11 @@ export const ListPopUp = ({ title, items }: Props) => {
               <ListItem key={index} divider>
                 <ListItemText 
                   primary={item} 
-                  primaryTypographyProps={{ 
-                    fontFamily: 'monospace',
-                    fontSize: '0.9rem'
-                  }} 
+                  slotProps={{
+                    primary: {
+                      sx: { fontFamily: 'monospace', fontSize: '0.9rem' }
+                    }
+                  }}
                 />
               </ListItem>
             ))}
diff --git a/internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/TextPopUp/TextPopUp.tsx b/internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/TextPopUp/TextPopUp.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import DataObjectIcon from '@mui/icons-material/DataObject';
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
-import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
-import { Box, Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography } from "@mui/material";
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutlined';
+import { Box, Dialog, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
 import ReactMarkdown from 'react-markdown';
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { atomOneLight } from "react-syntax-highlighter/dist/esm/styles/hljs";
diff --git a/internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx b/internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx
@@ -58,6 +58,7 @@ export const PresetsGrid = () => {
           columns={columnsWithSizing}
           rows={rows}
           pageSizeOptions={[]}
+          showToolbar
           slots={{ 
             toolbar: () => <PresetsGridToolbar />
           }}
diff --git a/internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.tsx b/internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.tsx
@@ -51,6 +51,7 @@ export const SourcesGrid = () => {
           columns={columnsWithSizing}
           rows={data ?? []}
           pageSizeOptions={[]}
+          showToolbar
           slots={{ 
             toolbar: () => <SourcesGridToolbar />
           }}
diff --git a/internal/webui/src/utils/AlertContext.tsx b/internal/webui/src/utils/AlertContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useState } from "react";
+import React, { createContext, useCallback, useContext, useState } from "react";
 import { AlertColor, SnackbarCloseReason } from "@mui/material";
 
 export type AlertContextType = {
@@ -10,7 +10,7 @@ export type AlertContextType = {
 };
 
 type AlertProviderProps = {
-  children: JSX.Element;
+  children: React.ReactNode;
 };
 
 export const AlertContext = createContext<AlertContextType | null>(null);
diff --git a/internal/webui/yarn.lock b/internal/webui/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export const Autocomplete = (props: Props) => {`
`46`	`46`	`)}`
`47`	`47`	`onChange={(_, value) => field.onChange(value ? value.label : "")}`
`48`	`48`	`loading={loading}`
`49`		`- componentsProps={{`
	`49`	`+ slotProps={{`
`50`	`50`	`popper: {`
`51`	`51`	`modifiers: [`
`52`	`52`	`{`