migrate mui from v6 to v7

package.json

@@ -52,12 +52,10 @@
     "@lezer/highlight": "1.2.1",
     "@lezer/lr": "1.4.2",
     "@material/material-color-utilities": "0.3.0",
-    "@mui/icons-material": "5.16.7",
-    "@mui/lab": "5.0.0-alpha.170",
-    "@mui/material": "5.16.7",
-    "@mui/styles": "5.16.7",
-    "@mui/system": "5.16.7",
-    "@mui/x-data-grid": "6.20.4",
+    "@mui/icons-material": "7.3.10",
+    "@mui/material": "7.3.10",
+    "@mui/system": "7.3.10",
+    "@mui/x-data-grid": "7.29.12",
     "@playwright/test": "1.55.1",
     "@storybook/addon-links": "9.1.8",
     "@storybook/react-vite": "9.1.8",
@@ -153,6 +151,9 @@
     "wonka": "6.3.5",
     "wouter": "3.7.1"
   },
+  "overrides": {
+    "react-is": "^18.3.1"
+  },
   "msw": {
     "workerDirectory": ".storybook/static"
   }

search/render.go

@@ -41,7 +41,7 @@ func Helpers() template.FuncMap {
 				if i > 0 {
 					buf.WriteString(" OR ")
 				}
-				buf.WriteString(fmt.Sprintf("to_tsvector('english', replace(lower(%s), '.', ' ')) @@ plainto_tsquery('english', replace(lower(:%s),'.',' '))", columnName, argName))
+				fmt.Fprintf(&buf, "to_tsvector('english', replace(lower(%s), '.', ' ')) @@ plainto_tsquery('english', replace(lower(:%s),'.',' '))", columnName, argName)
 			}
 
 			buf.WriteRune(')')

web/src/app/admin/AdminAPIKeys.tsx

@@ -1,8 +1,6 @@
 import React, { Suspense, useMemo, useState } from 'react'
-import { Button, Card, Grid, Typography } from '@mui/material'
+import { Box, Button, Card, Grid, Typography } from '@mui/material'
 import { Add } from '@mui/icons-material'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
 import { gql, useQuery } from 'urql'
 import { DateTime } from 'luxon'
 import AdminAPIKeysDrawer from './admin-api-keys/AdminAPIKeyDrawer'
@@ -33,26 +31,7 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => ({
-  buttons: {
-    'margin-bottom': '15px',
-  },
-  containerDefault: {
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '100%',
-      transition: `max-width ${theme.transitions.duration.leavingScreen}ms ease`,
-    },
-  },
-  containerSelected: {
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '70%',
-      transition: `max-width ${theme.transitions.duration.enteringScreen}ms ease`,
-    },
-  },
-}))
-
 export default function AdminAPIKeys(): React.JSX.Element {
-  const classes = useStyles()
   const [selectedAPIKey, setSelectedAPIKey] = useState<GQLAPIKey | null>(null)
   const [createDialog, setCreateDialog] = useState<boolean>(false)
   const [createFromID, setCreateFromID] = useState('')
@@ -135,11 +114,7 @@ export default function AdminAPIKeys(): React.JSX.Element {
       ),
       secondaryAction: (
         <Grid container>
-          <Grid
-            item
-            xs={12}
-            sx={{ display: 'flex', justifyContent: 'flex-end' }}
-          >
+          <Grid size={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Typography
               gutterBottom
               variant='subtitle2'
@@ -154,11 +129,7 @@ export default function AdminAPIKeys(): React.JSX.Element {
               )}
             </Typography>
           </Grid>
-          <Grid
-            item
-            xs={12}
-            sx={{ display: 'flex', justifyContent: 'flex-end' }}
-          >
+          <Grid size={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
             <OtherActions
               actions={[
                 {
@@ -225,16 +196,28 @@ export default function AdminAPIKeys(): React.JSX.Element {
           />
         )}
       </Suspense>
-      <div
-        className={
-          selectedAPIKey ? classes.containerSelected : classes.containerDefault
+      <Box
+        sx={(theme) =>
+          selectedAPIKey
+            ? {
+                [theme.breakpoints.up('md')]: {
+                  maxWidth: '70%',
+                  transition: `max-width ${theme.transitions.duration.enteringScreen}ms ease`,
+                },
+              }
+            : {
+                [theme.breakpoints.up('md')]: {
+                  maxWidth: '100%',
+                  transition: `max-width ${theme.transitions.duration.leavingScreen}ms ease`,
+                },
+              }
         }
       >
         <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <Button
             data-cy='new'
             variant='contained'
-            className={classes.buttons}
+            sx={{ mb: '15px' }}
             onClick={() => setCreateDialog(true)}
             startIcon={<Add />}
           >
@@ -244,7 +227,7 @@ export default function AdminAPIKeys(): React.JSX.Element {
         <Card sx={{ width: '100%', padding: '0px' }}>
           <FlatList emptyMessage='No Results' items={items} />
         </Card>
-      </div>
+      </Box>
     </React.Fragment>
   )
 }

web/src/app/admin/AdminConfig.tsx

@@ -5,8 +5,7 @@ import ButtonGroup from '@mui/material/ButtonGroup'
 import Divider from '@mui/material/Divider'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
+import { SxProps, Theme } from '@mui/material/styles'
 import _, { startCase, isEmpty, uniq, chain } from 'lodash'
 import AdminSection from './AdminSection'
 import AdminDialog from './AdminDialog'
@@ -43,31 +42,25 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => ({
+const classes = {
   accordionDetails: {
     padding: 0,
     display: 'block',
   },
-  form: {
-    width: '100%',
-  },
-  saveDisabled: {
-    color: 'rgba(255, 255, 255, 0.5)',
-  },
   heading: {
     fontSize: '1.1rem',
     flexBasis: '33.33%',
     flexShrink: 0,
   },
-  secondaryHeading: {
+  secondaryHeading: (theme: Theme) => ({
     fontSize: theme.typography.pxToRem(15),
     color: theme.palette.text.secondary,
     flexGrow: 1,
-  },
+  }),
   changeChip: {
     justifyContent: 'flex-end',
   },
-}))
+} satisfies Record<string, SxProps<Theme>>
 
 interface ConfigValues {
   [id: string]: string
@@ -82,7 +75,6 @@ function formatHeading(s = ''): string {
 }
 
 export default function AdminConfig(): React.JSX.Element {
-  const classes = useStyles()
   const [confirm, setConfirm] = useState(false)
   const [values, setValues] = useState({})
   const [section, setSection] = useState(false as false | string)
@@ -135,7 +127,7 @@ export default function AdminConfig(): React.JSX.Element {
 
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12} container justifyContent='flex-end'>
+      <Grid size={12} container justifyContent='flex-end'>
         <ButtonGroup variant='outlined'>
           <Button
             data-cy='reset'
@@ -165,7 +157,7 @@ export default function AdminConfig(): React.JSX.Element {
         />
       )}
 
-      <Grid item xs={12}>
+      <Grid size={12}>
         {groups.map((groupID: string, index: number) => (
           <Accordion
             key={groupID}
@@ -181,17 +173,17 @@ export default function AdminConfig(): React.JSX.Element {
               <Typography
                 component='h2'
                 variant='subtitle1'
-                className={classes.heading}
+                sx={classes.heading}
               >
                 {formatHeading(groupID)}
               </Typography>
-              <Typography className={classes.secondaryHeading}>
+              <Typography sx={classes.secondaryHeading}>
                 {hasEnable(groupID) &&
                   (isEnabled(groupID) ? 'Enabled' : 'Disabled')}
               </Typography>
               {(changeCount(groupID) && (
                 <Chip
-                  className={classes.changeChip}
+                  sx={classes.changeChip}
                   size='small'
                   label={`${changeCount(groupID)} unsaved change${
                     changeCount(groupID) === 1 ? '' : 's'
@@ -204,10 +196,10 @@ export default function AdminConfig(): React.JSX.Element {
             <AccordionDetails
               id={`accordion-sect-${groupID}`}
               aria-labelledby={`accordion-${groupID}`}
-              className={classes.accordionDetails}
+              sx={classes.accordionDetails}
               role='region'
             >
-              <Form className={classes.form}>
+              <Form style={{ width: '100%' }}>
                 <AdminSection
                   value={values}
                   onChange={(id: string, value: null | string) =>

web/src/app/admin/AdminFieldComponents.tsx

@@ -57,7 +57,7 @@ export const StringListInput = (props: InputProps): React.JSX.Element => {
   return (
     <Grid container spacing={1}>
       {value.map((val, idx) => (
-        <Grid key={idx} item xs={12}>
+        <Grid size={12} key={idx}>
           <StringInput
             type={props.type}
             value={val}

web/src/app/admin/AdminLimits.tsx

@@ -4,8 +4,7 @@ import Button from '@mui/material/Button'
 import ButtonGroup from '@mui/material/ButtonGroup'
 import Card from '@mui/material/Card'
 import Grid from '@mui/material/Grid'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
+import Box from '@mui/material/Box'
 import { startCase, isEmpty } from 'lodash'
 import AdminDialog from './AdminDialog'
 import { Form } from '../forms'
@@ -29,31 +28,11 @@ const mutation = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => ({
-  actionsContainer: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-  gridContainer: {
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '65%',
-    },
-  },
-  groupTitle: {
-    fontSize: '1.1rem',
-  },
-  pageContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-  },
-}))
-
 interface LimitsValues {
   [id: string]: string
 }
 
 export default function AdminLimits(): React.JSX.Element {
-  const classes = useStyles()
   const [confirm, setConfirm] = useState(false)
   const [values, setValues] = useState({})
 
@@ -80,9 +59,15 @@ export default function AdminLimits(): React.JSX.Element {
   }
 
   return (
-    <div className={classes.pageContainer}>
-      <Grid container spacing={2} className={classes.gridContainer}>
-        <Grid item xs={12} className={classes.actionsContainer}>
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+      <Grid
+        container
+        spacing={2}
+        sx={(theme) => ({
+          [theme.breakpoints.up('md')]: { maxWidth: '65%' },
+        })}
+      >
+        <Grid size={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
           <ButtonGroup variant='outlined'>
             <Button
               data-cy='reset'
@@ -114,7 +99,7 @@ export default function AdminLimits(): React.JSX.Element {
           />
         )}
 
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Form>
             <Card>
               <AdminSection
@@ -138,6 +123,6 @@ export default function AdminLimits(): React.JSX.Element {
           </Form>
         </Grid>
       </Grid>
-    </div>
+    </Box>
   )
 }

web/src/app/admin/AdminMaint.tsx

@@ -60,7 +60,7 @@ type AdminMaintToolProps = {
 
 function AdminMaintTool(props: AdminMaintToolProps): React.ReactNode {
   return (
-    <Grid item xs={12} xl={6}>
+    <Grid size={{ xs: 12, xl: 6 }}>
       <Card>
         <CardHeader title={props.name} />
         <CardContent>

web/src/app/admin/AdminNumberLookup.tsx

@@ -100,7 +100,7 @@ export default function AdminNumberLookup(): React.JSX.Element {
         <Card>
           <CardContent>
             <Grid container spacing={2}>
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <TelTextField
                   onChange={(e) => {
                     setNumber(e.target.value)