refactor: update Grid and slots usage due to deprecated APIs in mui v6

Author: OliverDudgeon

src/components/DataTable/DataTable.tsx

@@ -263,23 +263,28 @@ export const DataTable = <Data extends Record<string, any>>(props: DataTableProp
   const tableContents = (
     <>
       {!!ToolbarChild || !!enableSearch ? (
-        <Toolbar sx={theme => ({
-          pt: 2,
-          alignItems: "flex-start",
-          gap: theme.spacing(1)
-        })}>
+        <Toolbar
+          sx={(theme) => ({
+            pt: 2,
+            alignItems: "flex-start",
+            gap: theme.spacing(1),
+          })}
+        >
           {ToolbarChild}
           {!!enableSearch && (
             <TextField
-              inputProps={{ "aria-label": "search" }}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <SearchRoundedIcon />
-                  </InputAdornment>
-                ),
-              }}
               placeholder="Search..."
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchRoundedIcon />
+                    </InputAdornment>
+                  ),
+                },
+
+                htmlInput: { "aria-label": "search" },
+              }}
               sx={{ ml: "auto" }}
               value={globalFilter || ""}
               onChange={(event) => setGlobalFilter(event.target.value)}

src/components/FileSelector/FileListItem.tsx

@@ -6,7 +6,6 @@ import {
   ListItem,
   ListItemButton,
   ListItemIcon,
-  ListItemSecondaryAction,
   ListItemText,
   Tooltip,
 } from "@mui/material";
@@ -67,7 +66,7 @@ export const FileListItem = ({
 }: FileListItemProps) => {
   const labelId = `file-${fullPath}`;
 
-  const listItemConent = (
+  const listItemContent = (
     <>
       {!!onSelect && (
         <ListItemIcon>
@@ -86,23 +85,16 @@ export const FileListItem = ({
       <Tooltip title={title}>
         <ListItemText id={labelId} primary={title} primaryTypographyProps={{ noWrap: true }} />
       </Tooltip>
-      <ListItemSecondaryAction>
-        <FavouriteButton
-          fullPath={fullPath}
-          mimeType={mimeType}
-          projectId={projectId}
-          type={type}
-        />
-      </ListItemSecondaryAction>
+      <FavouriteButton fullPath={fullPath} mimeType={mimeType} projectId={projectId} type={type} />
     </>
   );
   if (onClick) {
     return (
       <ListItemButton key={fullPath} onClick={onClick}>
-        {listItemConent}
+        {listItemContent}
       </ListItemButton>
     );
   }
 
-  return <ListItem key={fullPath}>{listItemConent}</ListItem>;
+  return <ListItem key={fullPath}>{listItemContent}</ListItem>;
 };

src/components/SearchTextField.tsx

@@ -8,12 +8,14 @@ export const SearchTextField = (TextFieldProps: TextFieldProps) => (
   <TextField
     label="Search"
     {...TextFieldProps}
-    InputProps={{
-      endAdornment: (
-        <InputAdornment position="end">
-          <SearchRoundedIcon />
-        </InputAdornment>
-      ),
+    slotProps={{
+      input: {
+        endAdornment: (
+          <InputAdornment position="end">
+            <SearchRoundedIcon />
+          </InputAdornment>
+        ),
+      },
     }}
   />
 );

src/components/instances/JobDetails/JobDetails.tsx

@@ -2,7 +2,7 @@ import { type InstanceGetResponse, type InstanceSummary } from "@squonk/data-man
 import { useGetJob } from "@squonk/data-manager-client/job";
 
 import { WorkOutlineRounded as WorkOutlineRoundedIcon } from "@mui/icons-material";
-import { Alert, Grid, ListItem, ListItemIcon, ListItemText } from "@mui/material";
+import { Alert, Grid2 as Grid, ListItem, ListItemIcon, ListItemText } from "@mui/material";
 
 import { usePolledGetInstance } from "../../../hooks/usePolledGetInstance";
 import { getErrorMessage } from "../../../utils/next/orvalError";
@@ -59,13 +59,13 @@ export const JobDetails = ({ instanceId, jobId }: JobDetailsProps) => {
       </HorizontalList>
 
       <Grid container>
-        <Grid item sm={6} xs={12}>
+        <Grid size={{ sm: 6, xs: 12 }}>
           <PageSection level={3} title="Inputs">
             <JobInputSection instance={instance} />
           </PageSection>
         </Grid>
 
-        <Grid item sm={6} xs={12}>
+        <Grid size={{ sm: 6, xs: 12 }}>
           <PageSection level={3} title="Outputs">
             <JobOutputSection instance={instance} />
           </PageSection>

src/components/legal/CookiesBanner.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Container, Grid, Link } from "@mui/material";
+import { Box, Button, Container, Grid2 as Grid, Link } from "@mui/material";
 
 import { useCookieConsent } from "../../state/cookieConsent";
 
@@ -28,12 +28,12 @@ export const CookiesBanner = () => {
     >
       <Container>
         <Grid container alignItems="center">
-          <Grid item xs={10}>
+          <Grid size={{ xs: 10 }}>
             Squonk Data Manager uses cookies for authentication. Some anonymous usage data is
             collected by <Link href="https://sentry.io/">Sentry</Link> to improve how this site
             functions.
           </Grid>
-          <Grid item>
+          <Grid>
             <Button variant="contained" onClick={handleConsent}>
               I understand
             </Button>

src/components/projects/ProjectSelection.tsx

@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material";
+import { Grid2 as Grid } from "@mui/material";
 
 import { SelectOrganisation } from "../userContext/SelectOrganisation";
 import { SelectProject } from "../userContext/SelectProject";
@@ -7,13 +7,13 @@ import { SelectUnit } from "../userContext/SelectUnit";
 export const ProjectSelection = () => {
   return (
     <Grid container spacing={1}>
-      <Grid container item alignItems="baseline" sm={6}>
+      <Grid container alignItems="baseline" size={{ sm: 6 }}>
         <SelectOrganisation />
       </Grid>
-      <Grid container item alignItems="baseline" sm={6}>
+      <Grid container alignItems="baseline" size={{ sm: 6 }}>
         <SelectUnit userFilter={["none"]} />
       </Grid>
-      <Grid container item alignItems="baseline" sm={12}>
+      <Grid container alignItems="baseline" size={{ sm: 12 }}>
         <SelectProject size="medium" />
       </Grid>
     </Grid>

src/components/runCards/ApplicationCard/ApplicationModal.tsx

@@ -4,7 +4,7 @@ import { type ApplicationSummary, type DmError } from "@squonk/data-manager-clie
 import { useGetApplication } from "@squonk/data-manager-client/application";
 import { getGetInstancesQueryKey, useCreateInstance } from "@squonk/data-manager-client/instance";
 
-import { Grid, MenuItem, TextField } from "@mui/material";
+import { Grid2 as Grid, MenuItem, TextField } from "@mui/material";
 import Form from "@rjsf/mui";
 import validator from "@rjsf/validator-ajv8";
 import { useQueryClient } from "@tanstack/react-query";
@@ -95,7 +95,7 @@ export const ApplicationModal = ({
         <CenterLoader />
       ) : (
         <Grid container spacing={1}>
-          <Grid item xs={12}>
+          <Grid size={{ xs: 12 }}>
             <TextField
               fullWidth
               label="Instance Name"
@@ -106,7 +106,7 @@ export const ApplicationModal = ({
 
           <DebugCheckbox value={debug} onChange={(debug) => setDebug(debug)} />
 
-          <Grid item xs={12}>
+          <Grid size={{ xs: 12 }}>
             <TextField
               fullWidth
               select
@@ -122,7 +122,7 @@ export const ApplicationModal = ({
             </TextField>
           </Grid>
 
-          <Grid item xs={12}>
+          <Grid size={{ xs: 12 }}>
             <Form
               liveValidate
               noHtml5Validate

src/components/runCards/JobCard/JobInputFields.tsx

@@ -1,6 +1,6 @@
 import { type Dispatch, type ReactNode, type SetStateAction, useState } from "react";
 
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 
 import { type ProjectId } from "../../../hooks/projectHooks";
 import { FILE_PROTOCOL, removeFileProtocolFromInputData } from "../../../utils/app/urls";
@@ -156,7 +156,7 @@ interface InputSectionProps {
 export const InputSection = ({ children, title, required, error }: InputSectionProps) => {
   return (
     // Expect a grid container in the parent component
-    <Grid item xs={12}>
+    <Grid size={{ xs: 12 }}>
       <Typography
         component="h4"
         sx={{ color: error ? (theme) => theme.palette.error.main : undefined }}

src/components/runCards/JobCard/JobModal.tsx

@@ -9,7 +9,7 @@ import {
 import { getGetInstancesQueryKey, useCreateInstance } from "@squonk/data-manager-client/instance";
 import { useGetJob } from "@squonk/data-manager-client/job";
 
-import { Box, Grid, TextField, Typography } from "@mui/material";
+import { Box, Grid2 as Grid, TextField, Typography } from "@mui/material";
 import { type FormProps } from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import { useQueryClient } from "@tanstack/react-query";
@@ -196,7 +196,7 @@ export const JobModal = ({
             <Grid container spacing={2}>
               {!!job.variables.inputs && (
                 <>
-                  <Grid item xs={12}>
+                  <Grid size={{ xs: 12 }}>
                     <Typography component="h3" fontWeight="bold" variant="subtitle1">
                       Inputs
                     </Typography>
@@ -211,7 +211,7 @@ export const JobModal = ({
                 </>
               )}
 
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 {!!job.variables.options && (
                   <>
                     <Typography component="h3" fontWeight="bold" variant="subtitle1">

src/components/runCards/TestJob/TestJobCard.tsx

@@ -1,7 +1,7 @@
 import { type JobSummary } from "@squonk/data-manager-client";
 import { getGetJobQueryKey } from "@squonk/data-manager-client/job";
 
-import { Grid } from "@mui/material";
+import { Grid2 as Grid } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 
 import {
@@ -23,7 +23,7 @@ export const TestJobCard = () => {
   queryClient.setQueryData(getGetJobQueryKey(TEST_JOB_ID), testJob.detail);
 
   return (
-    <Grid item key={job.id} md={3} sm={6} xs={12}>
+    <Grid key={job.id} size={{ md: 3, sm: 6, xs: 12 }}>
       <JobCard
         disabled={!hasPermission}
         job={job as JobSummary} // assertion needed as JSON loader doesn't use string literal types