MUI v9

frontend/eslint.config.mjs

@@ -46,8 +46,8 @@ export default defineConfig([
       'simple-import-sort/exports': 'error',
       'no-duplicate-imports': 'warn',
       'no-console': 'warn',
-      curly: ['error', 'all'],
       'react-hooks/set-state-in-effect': 'off',
+      curly: ['error', 'all'],
     },
   },
   {

frontend/package.json

@@ -20,12 +20,13 @@
     "@fontsource/pacifico": "^5.2.7",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@mui/icons-material": "7.3.9",
-    "@mui/material": "7.3.9",
-    "@mui/material-nextjs": "7.3.9",
+    "@mui/icons-material": "9.0.0",
+    "@mui/material": "9.0.0",
+    "@mui/material-nextjs": "9.0.0",
     "@mui/x-charts": "^9.2.0",
-    "@mui/x-date-pickers": "8.27.2",
+    "@mui/x-date-pickers": "9.0.0",
     "@next/mdx": "^16.2.7",
+    "@next/swc-linux-x64-gnu": "^16.2.6",
     "@next/swc-wasm-nodejs": "16.2.7",
     "@rjsf/core": "6.6.1",
     "@rjsf/mui": "6.6.1",

frontend/pages/404.tsx

@@ -4,16 +4,41 @@ import Link from 'src/Link'
 
 export default function NotFound() {
   return (
-    <Stack sx={{ height: '100vh' }} justifyContent='center' alignItems='center'>
+    <Stack
+      sx={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+      }}
+    >
       <Box sx={{ m: 5, p: 2, width: 'fit-content' }}>
-        <Stack spacing={2} alignItems='center'>
-          <Stack direction='row' justifyContent='center' alignItems='center' spacing={2}>
+        <Stack
+          spacing={2}
+          sx={{
+            alignItems: 'center',
+          }}
+        >
+          <Stack
+            direction='row'
+            spacing={2}
+            sx={{
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
             <SentimentVeryDissatisfied color='secondary' sx={{ fontSize: 75 }} />
             <Typography color='secondary' sx={{ fontSize: 75 }}>
               404
             </Typography>
           </Stack>
-          <Typography component='h3' variant='h5' color='primary' fontWeight='bold'>
+          <Typography
+            component='h3'
+            variant='h5'
+            color='primary'
+            sx={{
+              fontWeight: 'bold',
+            }}
+          >
             {`Hmm... We're having trouble finding this page.`}
           </Typography>
           <Link href='/'>

frontend/pages/entry/new.tsx

@@ -74,7 +74,7 @@ export default function NewEntry() {
           <Paper sx={{ p: 4, mb: 4 }}>
             <Stack spacing={4}>
               <Card sx={{ p: 2 }}>
-                <Typography variant='h6' mb={2} color='primary' fontWeight='bold'>
+                <Typography variant='h6' color='primary' sx={{ fontWeight: 'bold', mb: 2 }}>
                   Models
                 </Typography>
                 <Stack spacing={2} divider={<Divider flexItem />}>
@@ -84,7 +84,7 @@ export default function NewEntry() {
                 </Stack>
               </Card>
               <Card sx={{ p: 2 }}>
-                <Typography variant='h6' mb={2} color='primary' fontWeight='bold'>
+                <Typography variant='h6' color='primary' sx={{ fontWeight: 'bold', mb: 2 }}>
                   Other
                 </Typography>
                 <Stack spacing={2} divider={<Divider flexItem />}>

frontend/pages/index.tsx

@@ -31,7 +31,7 @@ import { useGetPeers, useGetStatus } from 'actions/system'
 import { useGetUiConfig } from 'actions/uiConfig'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
+import React, { ChangeEvent, useCallback, useMemo, useState } from 'react'
 import ChipSelector from 'src/common/ChipSelector'
 import HelpDialog from 'src/common/HelpDialog'
 import Loading from 'src/common/Loading'
@@ -52,16 +52,34 @@ interface KeyAndLabel {
 const defaultRoleOptions: KeyAndLabel[] = [{ key: 'mine', label: 'Any role' }]
 
 export default function Marketplace() {
-  const [filter, setFilter] = useState('')
+  const router = useRouter()
+
+  const {
+    filter: filterFromQuery,
+    peers: peersFromQuery,
+    organisations: organisationsFromQuery,
+    states: statesFromQuery,
+    tags: tagsFromQuery,
+    titleOnly: titleOnlyFromQuery,
+  } = router.query
+
+  function parseQueryArray(value?: string | string[]): string[] {
+    if (!value) {
+      return []
+    }
+    return Array.isArray(value) ? [...value] : [value]
+  }
+
+  const [filter, setFilter] = useState((filterFromQuery as string) || '')
   const [selectedRoles, setSelectedRoles] = useState<string[]>([])
-  const [selectedPeers, setSelectedPeers] = useState<string[]>([])
-  const [selectedOrganisations, setSelectedOrganisations] = useState<string[]>([])
-  const [selectedStates, setSelectedStates] = useState<string[]>([])
-  const [roleOptions, setRoleOptions] = useState<KeyAndLabel[]>(defaultRoleOptions)
+  const [selectedPeers, setSelectedPeers] = useState<string[]>(parseQueryArray(peersFromQuery))
+  const [selectedOrganisations, setSelectedOrganisations] = useState<string[]>(parseQueryArray(organisationsFromQuery))
+  const [selectedStates, setSelectedStates] = useState<string[]>(parseQueryArray(statesFromQuery))
+
   const [selectedTab, setSelectedTab] = useState<EntryKindKeys>(EntryKind.MODEL)
   const [mirroredModelsOnly, setMirroredModelsOnly] = useState(false)
-  const [selectedTags, setSelectedTags] = useState<string[]>([])
-  const [titleOnly, setTitleOnly] = useState(false)
+  const [selectedTags, setSelectedTags] = useState<string[]>(parseQueryArray(tagsFromQuery))
+  const [titleOnly, setTitleOnly] = useState(titleOnlyFromQuery === 'true' ? true : false)
   const debouncedFilter = useDebounce(filter, 250)
 
   const { uiConfig, isUiConfigLoading, isUiConfigError } = useGetUiConfig()
@@ -145,70 +163,16 @@ export default function Marketplace() {
   const { reviewRoles, isReviewRolesLoading, isReviewRolesError } = useGetReviewRoles()
   const { tags, isTagsLoading, isTagsError } = useGetPopularEntryTags()
 
-  const theme = useTheme()
-  const router = useRouter()
-
-  const {
-    filter: filterFromQuery,
-    task: taskFromQuery,
-    peers: peersFromQuery,
-    organisations: organisationsFromQuery,
-    states: statesFromQuery,
-    tags: tagsFromQuery,
-    titleOnly: titleOnlyFromQuery,
-  } = router.query
-
-  useEffect(() => {
-    if (filterFromQuery) {
-      setFilter(filterFromQuery as string)
-    }
-    if (tagsFromQuery) {
-      let tagsAsArray: string[] = []
-      if (typeof tagsFromQuery === 'string') {
-        tagsAsArray.push(tagsFromQuery)
-      } else {
-        tagsAsArray = [...tagsFromQuery]
-      }
-      setSelectedTags([...tagsAsArray])
-    }
-    if (organisationsFromQuery) {
-      let organisationsAsArray: string[] = []
-      if (typeof organisationsFromQuery === 'string') {
-        organisationsAsArray.push(organisationsFromQuery)
-      } else {
-        organisationsAsArray = [...organisationsFromQuery]
-      }
-      setSelectedOrganisations([...organisationsAsArray])
-    }
-    if (statesFromQuery) {
-      let statesAsArray: string[] = []
-      if (typeof statesFromQuery === 'string') {
-        statesAsArray.push(statesFromQuery)
-      } else {
-        statesAsArray = [...statesFromQuery]
-      }
-      setSelectedStates([...statesAsArray])
-    }
+  const roleOptions = useMemo(() => {
+    return [
+      ...defaultRoleOptions,
+      ...reviewRoles.map((role) => {
+        return { key: role.shortName, label: `${role.name}` }
+      }),
+    ]
+  }, [reviewRoles])
 
-    if (peersFromQuery) {
-      let peersAsArray: string[] = []
-      if (typeof peersFromQuery === 'string') {
-        peersAsArray.push(peersFromQuery)
-      } else {
-        peersAsArray = [...peersFromQuery]
-      }
-      setSelectedPeers([...peersAsArray])
-    }
-    setTitleOnly(titleOnlyFromQuery === 'true')
-  }, [
-    filterFromQuery,
-    taskFromQuery,
-    tagsFromQuery,
-    organisationsFromQuery,
-    statesFromQuery,
-    peersFromQuery,
-    titleOnlyFromQuery,
-  ])
+  const theme = useTheme()
 
   const updateQueryParams = useCallback(
     (key: string, value: string | string[]) => {
@@ -328,17 +292,6 @@ export default function Marketplace() {
     return errorMessage
   }, [isMirroredModelsError, isModelsError, isUntrustedModelsError])
 
-  useEffect(() => {
-    if (reviewRoles) {
-      setRoleOptions([
-        ...defaultRoleOptions,
-        ...reviewRoles.map((role) => {
-          return { key: role.shortName, label: `${role.name}` }
-        }),
-      ])
-    }
-  }, [reviewRoles])
-
   if (isReviewRolesLoading || isUiConfigLoading || isTagsLoading || isPeersLoading || isStatusLoading) {
     return <Loading />
   }
@@ -376,8 +329,8 @@ export default function Marketplace() {
               Create
             </Button>
             <Container sx={{ backgroundColor: grey[200], py: 2, borderRadius: '8px' }}>
-              <Stack direction='row' spacing={0.5} marginBottom={2} justifyContent='left' alignItems='center'>
-                <Typography component='h2' variant='h5' fontWeight='bold'>
+              <Stack direction='row' spacing={0.5} sx={{ justifyContent: 'left', alignItems: 'center', mb: 2 }}>
+                <Typography component='h2' variant='h5' sx={{ fontWeight: 'bold' }}>
                   Filters
                 </Typography>
                 <HelpDialog title='Search Information' content={<SearchInfo />} />
@@ -512,7 +465,12 @@ export default function Marketplace() {
                   />
                 </Box>
               </Stack>
-              <Box justifySelf='center' marginTop={1}>
+              <Box
+                sx={{
+                  justifySelf: 'center',
+                  marginTop: 1,
+                }}
+              >
                 <Button onClick={handleResetFilters} startIcon={<RestartAlt />}>
                   Reset filters
                 </Button>

frontend/pages/model/[modelId]/access-request/[accessRequestId].tsx

@@ -93,7 +93,12 @@ export default function AccessRequest() {
                       Back to model
                     </Button>
                   </Link>
-                  <Stack direction='row' alignItems='center'>
+                  <Stack
+                    direction='row'
+                    sx={{
+                      alignItems: 'center',
+                    }}
+                  >
                     <Typography variant='h6' color='primary' component='h1'>
                       {accessRequest ? accessRequest.metadata.overview.name : 'Loading...'}
                     </Typography>

frontend/pages/model/[modelId]/access-request/[accessRequestId]/review.tsx

@@ -115,27 +115,47 @@ export default function AccessRequestReview() {
             />
             <MessageAlert message={errorMessage} severity='error' />
             <Divider />
-            <Stack spacing={1} direction='row' justifyContent='space-between' sx={{ mb: 2 }}>
+            <Stack
+              spacing={1}
+              direction='row'
+              sx={{
+                justifyContent: 'space-between',
+                mb: 2,
+              }}
+            >
               <Typography variant='caption'>
                 Created by {<UserDisplay dn={accessRequest.createdBy} />} on
-                <Typography variant='caption' fontWeight='bold'>
+                <Typography
+                  variant='caption'
+                  sx={{
+                    fontWeight: 'bold',
+                  }}
+                >
                   {` ${formatDateString(accessRequest.createdAt)} `}
                 </Typography>
               </Typography>
               {accessRequest.metadata.overview.endDate && (
                 <Typography variant='caption'>
                   End Date:
-                  <Typography variant='caption' fontWeight='bold' data-test='accessRequestEndDate'>
+                  <Typography
+                    variant='caption'
+                    data-test='accessRequestEndDate'
+                    sx={{
+                      fontWeight: 'bold',
+                    }}
+                  >
                     {` ${formatDateString(accessRequest.metadata.overview.endDate)}`}
                   </Typography>
                 </Typography>
               )}
             </Stack>
             <Stack
               direction={{ sm: 'row', xs: 'column' }}
-              alignItems='flex-end'
-              justifyContent='space-between'
               spacing={4}
+              sx={{
+                alignItems: 'flex-end',
+                justifyContent: 'space-between',
+              }}
             >
               <Card
                 sx={{
@@ -145,7 +165,13 @@ export default function AccessRequestReview() {
                   width: '100%',
                 }}
               >
-                <Typography variant='subtitle2' component='h3' mb={1}>
+                <Typography
+                  variant='subtitle2'
+                  component='h3'
+                  sx={{
+                    mb: 1,
+                  }}
+                >
                   Users
                 </Typography>
                 <Grid container>{accessRequestEntities}</Grid>