Update frontend dependencies

virtweb_frontend/package.json

@@ -13,7 +13,7 @@
     "@mui/material": "^6.1.6",
     "@mui/x-charts": "^7.22.0",
     "@mui/x-data-grid": "^7.22.0",
-    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/humanize-duration": "^3.27.1",
@@ -32,7 +32,7 @@
     "react-router-dom": "^6.23.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-vnc": "^2.0.2",
-    "typescript": "^4.0.0",
+    "typescript": "^4.9.5",
     "uuid": "^11.0.2",
     "vite": "^5.4.10",
     "vite-tsconfig-paths": "^5.0.1",

virtweb_frontend/src/routes/SysInfoRoute.tsx

@@ -8,7 +8,6 @@ import {
 import Icon from "@mdi/react";
 import {
   Box,
-  Grid,
   LinearProgress,
   Table,
   TableBody,
@@ -17,7 +16,10 @@ import {
   TableRow,
   Typography,
 } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import { PieChart } from "@mui/x-charts";
+import { filesize } from "filesize";
+import humanizeDuration from "humanize-duration";
 import React from "react";
 import {
   DiskInfo,
@@ -28,8 +30,6 @@ import {
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
-import humanizeDuration from "humanize-duration";
-import { filesize } from "filesize";
 
 export function SysInfoRoute(): React.ReactElement {
   const [info, setInfo] = React.useState<ServerSystemInfo>();
@@ -65,7 +65,7 @@ export function SysInfoRouteInner(p: {
     <VirtWebRouteContainer label="Sysinfo">
       <Grid container spacing={2}>
         {/* Memory */}
-        <Grid xs={4}>
+        <Grid size={{ xs: 4 }}>
           <Box flexGrow={1}>
             <Typography style={{ textAlign: "center" }}>Memory</Typography>
             <PieChart
@@ -97,7 +97,7 @@ export function SysInfoRouteInner(p: {
         </Grid>
 
         {/* Disk usage */}
-        <Grid xs={4}>
+        <Grid size={{ xs: 4 }}>
           <Box flexGrow={1}>
             <Typography style={{ textAlign: "center" }}>Disk usage</Typography>
             <PieChart
@@ -125,7 +125,7 @@ export function SysInfoRouteInner(p: {
         </Grid>
 
         {/* CPU usage */}
-        <Grid xs={4}>
+        <Grid size={{ xs: 4 }}>
           <Box flexGrow={1}>
             <Typography style={{ textAlign: "center" }}>CPU usage</Typography>
             <PieChart

virtweb_frontend/src/widgets/BaseLoginPage.tsx

@@ -3,7 +3,7 @@ import Icon from "@mdi/react";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import { Link, Outlet } from "react-router-dom";
@@ -38,10 +38,7 @@ export function BaseLoginPage() {
     <Grid container component="main" sx={{ height: "100vh" }}>
       <CssBaseline />
       <Grid
-        item
+        size={{ xs: false, sm: 4, md: 7 }}
-        xs={false}
-        sm={4}
-        md={7}
         sx={{
           backgroundImage: "url(/login_splash.jpg)",
           backgroundRepeat: "no-repeat",
@@ -53,7 +50,12 @@ export function BaseLoginPage() {
           backgroundPosition: "center",
         }}
       />
-      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+      <Grid
+        size={{ xs: 12, sm: 8, md: 5 }}
+        component={Paper}
+        elevation={6}
+        square
+      >
         <Box
           sx={{
             my: 8,

virtweb_frontend/src/widgets/forms/EditSection.tsx

@@ -1,5 +1,6 @@
-import { Grid, Paper, Typography } from "@mui/material";
+import { Paper, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
+import Grid from "@mui/material/Grid2";
 
 export function EditSection(
   p: {
@@ -9,7 +10,7 @@ export function EditSection(
   } & PropsWithChildren
 ): React.ReactElement {
   return (
-    <Grid item sm={12} md={p.fullWidth ? 12 : 6}>
+    <Grid size={{ sm: 12, md: p.fullWidth ? 12 : 6 }}>
       <Paper style={{ margin: "10px", padding: "10px" }}>
         {(p.title || p.actions) && (
           <span

virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx

@@ -4,7 +4,6 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Avatar,
   Button,
-  Grid,
   IconButton,
   ListItem,
   ListItemAvatar,
@@ -19,6 +18,7 @@ import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { IPInput } from "./IPInput";
 import { MACInput } from "./MACInput";
 import { TextInput } from "./TextInput";
+import Grid from "@mui/material/Grid2";
 
 export function NetDHCPHostReservations(p: {
   editable: boolean;
@@ -39,7 +39,7 @@ export function NetDHCPHostReservations(p: {
     <>
       <Grid container>
         {p.dhcp.hosts.map((h, num) => (
-          <Grid key={num} sm={12} md={6} item style={{ padding: "10px" }}>
+          <Grid key={num} size={{ sm: 12, md: 6 }} style={{ padding: "10px" }}>
             <HostReservationWidget
               key={num}
               {...p}

virtweb_frontend/src/widgets/forms/NetNatConfiguration.tsx

@@ -5,11 +5,11 @@ import {
   Card,
   CardActions,
   CardContent,
-  Grid,
   IconButton,
   Tooltip,
   Typography,
 } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import React, { PropsWithChildren } from "react";
 import { NatEntry } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";
@@ -295,7 +295,7 @@ function NATEntryProp(
   p: PropsWithChildren<{ label?: string }>
 ): React.ReactElement {
   return (
-    <Grid item sm={12} md={6} style={{ padding: "20px" }}>
+    <Grid size={{ sm: 12, md: 6 }} style={{ padding: "20px" }}>
       {p.label && (
         <Typography variant="h6" style={{ marginBottom: "10px" }}>
           {p.label}

virtweb_frontend/src/widgets/forms/VMNetworksList.tsx

@@ -4,13 +4,13 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Avatar,
   Button,
-  Grid,
   IconButton,
   ListItem,
   ListItemAvatar,
   ListItemText,
   Tooltip,
 } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import { NWFilter } from "../../api/NWFilterApi";
 import { NetworkInfo } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";

virtweb_frontend/src/widgets/net/NetworkDetails.tsx

@@ -1,4 +1,5 @@
-import { Button, Checkbox, Grid } from "@mui/material";
+import { Button, Checkbox } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { IpConfig, NetworkApi, NetworkInfo } from "../../api/NetworksApi";

virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx

@@ -1,4 +1,5 @@
-import { Button, Grid } from "@mui/material";
+import { Button } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import React, { ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 import {
@@ -6,6 +7,7 @@ import {
   NWFilterApi,
   NWFilterIsBuiltin,
 } from "../../api/NWFilterApi";
+import { ServerApi } from "../../api/ServerApi";
 import { useAlert } from "../../hooks/providers/AlertDialogProvider";
 import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
@@ -13,12 +15,11 @@ import { AsyncWidget } from "../AsyncWidget";
 import { TabsWidget } from "../TabsWidget";
 import { XMLAsyncWidget } from "../XMLWidget";
 import { EditSection } from "../forms/EditSection";
-import { TextInput } from "../forms/TextInput";
-import { ServerApi } from "../../api/ServerApi";
-import { SelectInput } from "../forms/SelectInput";
 import { NWFSelectReferencedFilters } from "../forms/NWFSelectReferencedFilters";
-import { NWFilterRules } from "../forms/NWFilterRules";
 import { NWFilterPriorityInput } from "../forms/NWFilterPriorityInput";
+import { NWFilterRules } from "../forms/NWFilterRules";
+import { SelectInput } from "../forms/SelectInput";
+import { TextInput } from "../forms/TextInput";
 
 interface DetailsProps {
   nwfilter: NWFilter;

virtweb_frontend/src/widgets/tokens/APITokenDetails.tsx

@@ -1,4 +1,5 @@
-import { Button, Grid } from "@mui/material";
+import { Button } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { NWFilter, NWFilterApi } from "../../api/NWFilterApi";

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -1,4 +1,5 @@
-import { Button, Grid } from "@mui/material";
+import { Button } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { validate as validateUUID } from "uuid";
@@ -12,6 +13,7 @@ import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
 import { AsyncWidget } from "../AsyncWidget";
 import { TabsWidget } from "../TabsWidget";
+import { XMLAsyncWidget } from "../XMLWidget";
 import { CheckboxInput } from "../forms/CheckboxInput";
 import { EditSection } from "../forms/EditSection";
 import { ResAutostartInput } from "../forms/ResAutostartInput";
@@ -21,7 +23,6 @@ import { VMDisksList } from "../forms/VMDisksList";
 import { VMNetworksList } from "../forms/VMNetworksList";
 import { VMSelectIsoInput } from "../forms/VMSelectIsoInput";
 import { VMScreenshot } from "./VMScreenshot";
-import { XMLAsyncWidget } from "../XMLWidget";
 
 interface DetailsProps {
   vm: VMInfo;