Bugfix/model form and files display

frontend/pages/beta/model/new.tsx

@@ -14,7 +14,7 @@ import {
 } from '@mui/material'
 import { postModel } from 'actions/model'
 import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { FormEvent, useState } from 'react'
 import MessageAlert from 'src/MessageAlert'
 import ModelDescriptionInput from 'src/model/beta/ModelDescriptionInput'
 import ModelNameInput from 'src/model/beta/ModelNameInput'
@@ -35,10 +35,11 @@ export default function NewModel() {
   const router = useRouter()
   const formValid = modelName && description
 
-  async function onSubmit(event) {
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setLoading(true)
     setErrorMessage('')
+
     const formData: ModelForm = {
       name: modelName,
       teamId: team?.id ?? 'Uncategorised',
@@ -49,10 +50,9 @@ export default function NewModel() {
 
     if (!response.ok) {
       const error = await getErrorMessage(response)
-
+      setLoading(false)
       return setErrorMessage(error)
     }
-    setLoading(false)
 
     const data = await response.json()
     router.push(`/beta/model/${data.model.id}`)
@@ -97,7 +97,7 @@ export default function NewModel() {
             Create a new model
           </Typography>
           <Typography>A model repository contains all files, history and information related to a model.</Typography>
-          <Box component='form' sx={{ mt: 4 }} onSubmit={onSubmit}>
+          <Box component='form' sx={{ mt: 4 }} onSubmit={handleSubmit}>
             <Stack divider={<Divider orientation='vertical' flexItem />} spacing={2}>
               <>
                 <Typography component='h2' variant='h6'>

frontend/src/common/MultiFileInputFileDisplay.tsx

@@ -1,4 +1,4 @@
-import { Chip, Grid, TextField } from '@mui/material'
+import { Chip, Grid, TextField, Tooltip } from '@mui/material'
 import { ChangeEvent, useCallback, useState } from 'react'
 import { FileWithMetadata } from 'types/interfaces'
 
@@ -22,12 +22,14 @@ export default function MultiFileInputFileDisplay({ file, handleDelete, onChange
   return (
     <Grid container spacing={1} alignItems='center'>
       <Grid item xs={4}>
-        <Chip
-          color='primary'
-          label={file.name}
-          onDelete={() => handleDelete(file)}
-          sx={{ width: '100%', justifyContent: 'space-between' }}
-        />
+        <Tooltip title={file.name}>
+          <Chip
+            color='primary'
+            label={file.name}
+            onDelete={() => handleDelete(file)}
+            sx={{ width: '100%', justifyContent: 'space-between' }}
+          />
+        </Tooltip>
       </Grid>
       <Grid item xs={8}>
         <TextField

frontend/src/model/beta/releases/ReleaseDisplay.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Card, Divider, Stack, Tooltip, Typography } from '@mui/material'
+import { Box, Button, Card, Divider, Grid, Stack, Tooltip, Typography } from '@mui/material'
 import { useGetUiConfig } from 'actions/uiConfig'
 import { useRouter } from 'next/router'
 import prettyBytes from 'pretty-bytes'
@@ -111,22 +111,22 @@ export default function ReleaseDisplay({
                 <>
                   <Typography fontWeight='bold'>Artefacts</Typography>
                   {release.files.map((file) => (
-                    <Stack
-                      key={file._id}
-                      direction={{ sm: 'row', xs: 'column' }}
-                      justifyContent='space-between'
-                      alignItems='center'
-                      spacing={1}
-                    >
-                      <Tooltip title={file.name}>
-                        <Link href={`/api/v2/model/${model.id}/file/${file._id}/download`}>
-                          <Typography noWrap textOverflow='ellipsis'>
-                            {file.name}
-                          </Typography>
-                        </Link>
-                      </Tooltip>
-                      <Typography variant='caption'>{prettyBytes(file.size)}</Typography>
-                    </Stack>
+                    <div key={file._id}>
+                      <Grid container spacing={1} alignItems='center'>
+                        <Grid item xs>
+                          <Tooltip title={file.name}>
+                            <Link href={`/api/v2/model/${model.id}/file/${file._id}/download`}>
+                              <Typography noWrap textOverflow='ellipsis' display='inline'>
+                                {file.name}
+                              </Typography>
+                            </Link>
+                          </Tooltip>
+                        </Grid>
+                        <Grid item xs={1} textAlign='right'>
+                          <Typography variant='caption'>{prettyBytes(file.size)}</Typography>
+                        </Grid>
+                      </Grid>
+                    </div>
                   ))}
                 </>
               )}