refactor: fix further deprecations in mui v6

Author: OliverDudgeon

src/components/BaseCard.tsx

@@ -85,10 +85,12 @@ export const BaseCard = ({
               {header.avatar?.[0].toUpperCase()}
             </Avatar>
           }
+          slotProps={{
+            subheader: { variant: "subtitle1" },
+            title: { variant: "body1" },
+          }}
           subheader={header.subtitle}
-          subheaderTypographyProps={{ variant: "subtitle1" }}
           title={header.title}
-          titleTypographyProps={{ variant: "body1" }}
         />
       )}
       <CardContent>{children}</CardContent>

src/components/FileSelector/FileListItem.tsx

@@ -83,7 +83,7 @@ export const FileListItem = ({
       )}
       {type.startsWith("dir") && <ListItemIcon>{folderIcon ?? <FolderRoundedIcon />}</ListItemIcon>}
       <Tooltip title={title}>
-        <ListItemText id={labelId} primary={title} primaryTypographyProps={{ noWrap: true }} />
+        <ListItemText id={labelId} primary={title} slotProps={{ primary: { noWrap: true } }} />
       </Tooltip>
       <FavouriteButton fullPath={fullPath} mimeType={mimeType} projectId={projectId} type={type} />
     </>

src/components/instances/JobDetails/ExitCodeFromTask.tsx

@@ -8,8 +8,15 @@ export interface ExitCodeFromTaskProps {
 }
 
 export const ExitCodeFromTask = ({ taskId }: ExitCodeFromTaskProps) => {
-  const { data } = useGetTask(taskId);
-  const code = data?.exit_code;
+  const { data: code, isLoading } = useGetTask(taskId, undefined, {
+    query: {
+      select: (data) => data.exit_code,
+    },
+  });
+
+  if (code === undefined && !isLoading) {
+    return null;
+  }
 
   return (
     <ListItem>
@@ -18,11 +25,17 @@ export const ExitCodeFromTask = ({ taskId }: ExitCodeFromTaskProps) => {
       </ListItemIcon>
       <ListItemText
         primary="Exit Code"
-        secondary={code}
-        secondaryTypographyProps={{
-          color: code === 0 ? "green" : "error",
-          fontWeight: "bold",
-        }}
+        secondary={isLoading ? "Loading..." : code}
+        slotProps={
+          isLoading
+            ? undefined
+            : {
+                secondary: {
+                  color: code === 0 ? "green" : "error",
+                  fontWeight: "bold",
+                },
+              }
+        }
       />
     </ListItem>
   );

src/components/runCards/InstancesList.tsx

@@ -61,8 +61,8 @@ export const InstancesList = ({ predicate }: InstancesListProps) => {
             <ListItemButton component="a">
               <ListItemText
                 primary={instance.name}
-                primaryTypographyProps={{ variant: "body1" }}
                 secondary={<LocalTime utcTimestamp={instance.launched} />}
+                slotProps={{ primary: { variant: "body1" } }}
               />
             </ListItemButton>
           </A>

src/features/DatasetsTable/DatasetDetails/VersionInfoSection/VersionInfoListItem.tsx

@@ -18,12 +18,7 @@ export const VersionInfoListItem = ({ name, value }: VersionInfoListItemProps) =
   return (
     <ListItem>
       <ListItemText primary={name} />
-      <ListItemText
-        primary={value}
-        primaryTypographyProps={{
-          align: "right",
-        }}
-      />
+      <ListItemText primary={value} slotProps={{ primary: { align: "right" } }} />
     </ListItem>
   );
 };

src/features/DatasetsTable/filters/LabelsFilter.tsx

@@ -92,7 +92,7 @@ export const LabelsFilter = ({ labels, setLabels }: LabelsFilterProps) => {
       value={currentLabel}
       variant="outlined"
       onChange={(event) => setCurrentLabel(event.target.value)}
-      onKeyPress={(event) => addLabelWithKeyboard(event.key)}
+      onKeyUp={(event) => addLabelWithKeyboard(event.key)}
     />
   );
 };