gchq · ARADDCC002 · Feb 28, 2024 · Feb 20, 2024 · Feb 21, 2024 · Feb 21, 2024
diff --git a/README.md b/README.md
@@ -246,4 +246,4 @@ information.
 [issues-url]: https://github.com/gchq/bailo/issues
 [license-shield]: https://img.shields.io/github/license/gchq/bailo.svg?style=for-the-badge
 [license-url]: https://github.com/gchq/bailo/blob/main/public/LICENSE.txt
-[product-screenshot]: frontend/public/docs/bailo_product_screenshot.png
+[product-screenshot]: frontend/public/images/bailo-marketplace.png
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -22,8 +22,8 @@ import Link from 'next/link'
 import React, { ChangeEvent, Fragment, useCallback, useState } from 'react'
 import ChipSelector from 'src/common/ChipSelector'
 import EmptyBlob from 'src/common/EmptyBlob'
-import MultipleErrorWrapper from 'src/errors/MultipleErrorWrapper'
 import useDebounce from 'src/hooks/useDebounce'
+import MessageAlert from 'src/MessageAlert'
 import Wrapper from 'src/Wrapper'
 
 interface KeyAndLabel {
@@ -76,11 +76,6 @@ function Marketplace() {
     e.preventDefault()
   }
 
-  const error = MultipleErrorWrapper(`Unable to load marketplace page`, {
-    isModelsError,
-  })
-  if (error) return error
-
   return (
     <Container maxWidth='xl'>
       <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
@@ -195,6 +190,44 @@ function Marketplace() {
           </Paper>
         </Box>
       </Stack>
+      <Box sx={{ width: '100%' }}>
+        <Paper sx={{ py: 2, px: 4 }}>
+          <Box sx={{ mb: 2, borderBottom: 1, borderColor: 'divider' }} data-test='indexPageTabs'>
+            <Tabs value={'bailo'} indicatorColor='secondary'>
+              <Tab label={`Models ${models ? `(${models.length})` : ''}`} value='bailo' />
+            </Tabs>
+          </Box>
+          <div data-test='modelListBox'>
+            {isModelsError && <MessageAlert message={isModelsError.info.message} severity='error' />}
+            {models.length === 0 && <EmptyBlob data-test='emptyModelListBlob' text='No models here' />}
+            {models.map((model, index) => {
+              return (
+                <Fragment key={model.id}>
+                  <Link style={{ textDecoration: 'none' }} href={`model/${model.id}`} passHref>
+                    <MuiLink
+                      variant='h5'
+                      sx={{ fontWeight: '500', textDecoration: 'none', color: theme.palette.primary.main }}
+                    >
+                      {model.name}
+                    </MuiLink>
+                  </Link>
+                  <Typography variant='body1' sx={{ marginBottom: 2 }}>
+                    {model.description}
+                  </Typography>
+                  <Stack direction='row' spacing={1} sx={{ marginBottom: 2 }}>
+                    {model.tags.map((tag) => (
+                      <Chip color='secondary' key={`chip-${tag}`} label={tag} size='small' variant='outlined' />
+                    ))}
+                  </Stack>
+                  {index !== models.length - 1 && (
+                    <Box sx={{ borderBottom: 1, borderColor: 'divider', marginBottom: 2 }} />
+                  )}
+                </Fragment>
+              )
+            })}
+          </div>
+        </Paper>
+      </Box>
     </Container>
   )
 }
diff --git a/frontend/src/MessageAlert.tsx b/frontend/src/MessageAlert.tsx
@@ -22,6 +22,7 @@ type MessageAlertProps = {
   message?: string
   severity?: AlertProps['severity']
   'data-test'?: string
+  slimView?: boolean
 } & PartialMessageAlertProps
 
 export default function MessageAlert({
@@ -30,6 +31,7 @@ export default function MessageAlert({
   linkText,
   href,
   'data-test': dataTest,
+  slimView = false,
 }: MessageAlertProps) {
   const alertRef = useRef<HTMLDivElement>(null)
   const [showContactMessage, setShowContactMessage] = useState(false)
@@ -55,7 +57,12 @@ export default function MessageAlert({
   if (!message) return null
 
   return (
-    <Alert severity={severity} sx={{ mb: 2, mt: 2 }} ref={alertRef} data-test={dataTest}>
+    <Alert
+      severity={severity}
+      sx={{ mb: 2, mt: 2, maxHeight: slimView ? '70px' : 'none', maxWidth: slimView ? '250px' : 'none' }}
+      ref={alertRef}
+      data-test={dataTest}
+    >
       <Stack spacing={1}>
         <Stack direction='row' spacing={1} alignItems='center'>
           <Typography>{message}</Typography>
@@ -73,7 +80,7 @@ export default function MessageAlert({
           )}
         </Stack>
         <Typography>{!!(href && linkText) && <Link href={href}>{linkText}</Link>}</Typography>
-        {severity === 'error' && (
+        {severity === 'error' && !slimView && (
           <>
             <div>
               <Button

diff --git a/frontend/src/model/accessRequests/AccessRequestDisplay.tsx b/frontend/src/model/accessRequests/AccessRequestDisplay.tsx
@@ -1,5 +1,5 @@
 import CommentIcon from '@mui/icons-material/ChatBubble'
-import { Card, Divider, Grid, Stack, Typography } from '@mui/material'
+import { Card, Grid, Stack, Typography } from '@mui/material'
 import { groupBy } from 'lodash-es'
 import { useEffect, useState } from 'react'
 import UserDisplay from 'src/common/UserDisplay'
@@ -101,8 +101,7 @@ export default function AccessRequestDisplay({ accessRequest }: AccessRequestDis
                 </Grid>
               </Card>
             </Stack>
-            {reviewsWithLatestResponses.length > 0 && <Divider sx={{ my: 2 }} />}
-            <Stack direction='row' justifyContent='space-between' spacing={2}>
+            <Stack direction='row' justifyContent='space-between' spacing={2} sx={{ pt: 2 }}>
               <ReviewDisplay reviews={reviewsWithLatestResponses} />
               {accessRequest.comments.length > 0 && (
                 <Stack direction='row' spacing={1}>

diff --git a/frontend/src/model/releases/ReleaseDisplay.tsx b/frontend/src/model/releases/ReleaseDisplay.tsx
@@ -156,7 +156,7 @@ export default function ReleaseDisplay({
                   ))}
                 </>
               )}
-              {(reviewsWithLatestResponses.length > 0 || release.comments.length > 0) && <Divider sx={{ my: 2 }} />}
+              {(reviewsWithLatestResponses.length > 0 || release.comments.length > 0) && <Divider />}
               <Stack direction='row' justifyContent='space-between' spacing={2}>
                 <div>
                   <ReviewDisplay reviews={reviewsWithLatestResponses} />

diff --git a/frontend/src/wrapper/ModelSearchField.tsx b/frontend/src/wrapper/ModelSearchField.tsx
@@ -3,6 +3,7 @@ import { Box, InputBase, List, ListItemButton, ListItemText, Popover, Stack } fr
 import { alpha, styled, useTheme } from '@mui/material/styles'
 import { useListModels } from 'actions/model'
 import { ChangeEvent, useMemo, useState } from 'react'
+import EmptyBlob from 'src/common/EmptyBlob'
 import Loading from 'src/common/Loading'
 import useDebounce from 'src/hooks/useDebounce'
 import Link from 'src/Link'
@@ -82,7 +83,7 @@ export default function ModelSearchField() {
   }
 
   if (isModelsError) {
-    return <MessageAlert message={isModelsError.info.message} severity='error' />
+    return <MessageAlert message={isModelsError.info.message} severity='error' slimView />
   }
 
   return (
@@ -105,14 +106,14 @@ export default function ModelSearchField() {
           anchorEl={anchorEl}
           disableAutoFocus
           disableEnforceFocus
-          sx={{ maxHeight: '400px' }}
+          sx={{ maxHeight: '400px', minWidth: '272px' }}
           anchorOrigin={{
             vertical: 'bottom',
             horizontal: 'center',
           }}
           transformOrigin={{
             vertical: 'top',
-            horizontal: 'center',
+            horizontal: 152,
           }}
         >
           {isModelsLoading && <Loading />}
@@ -121,6 +122,11 @@ export default function ModelSearchField() {
               {modelList}
             </List>
           )}
+          {!isModelsLoading && modelList.length === 0 && (
+            <Box sx={{ p: 4, minWidth: '272px' }}>
+              <EmptyBlob text='No models found' />
+            </Box>
+          )}
         </Popover>
       )}
     </Stack>

diff --git a/frontend/src/wrapper/TopNavigation.tsx b/frontend/src/wrapper/TopNavigation.tsx
@@ -111,108 +111,115 @@ export default function TopNavigation({ drawerOpen = false, pageTopStyling = {},
           pr: '24px', // keep right padding when drawer closed
         }}
       >
-        {!isSmOrLarger && (
-          <Box>
-            <IconButton onClick={handleNavMenuClicked}>
-              <MenuIcon sx={{ color: theme.palette.topNavigation.main }} />
-            </IconButton>
-            <Menu anchorEl={navbarAnchorEl} open={navbarMenuOpen} onClose={() => setNavbarAnchorEl(null)}>
-              <Link href='/model/new'>
-                <MenuItem>
-                  <ListItemIcon>
-                    <Add fontSize='small' />
-                  </ListItemIcon>
-                  <ListItemText>Add new model</ListItemText>
-                </MenuItem>
-              </Link>
-              <Divider />
-              <Tooltip title='This feature has been temporarily disabled'>
-                <span>
-                  <MenuItem disabled data-test='toggleDarkMode'>
+        <Stack direction='row' justifyContent='space-between' alignItems='center' sx={{ width: '100%' }}>
+          {!isSmOrLarger && (
+            <Box>
+              <IconButton onClick={handleNavMenuClicked}>
+                <MenuIcon sx={{ color: theme.palette.topNavigation.main }} />
+              </IconButton>
+              <Menu anchorEl={navbarAnchorEl} open={navbarMenuOpen} onClose={() => setNavbarAnchorEl(null)}>
+                <Link href='/model/new'>
+                  <MenuItem>
                     <ListItemIcon>
-                      <DarkModeIcon fontSize='small' />
+                      <Add fontSize='small' />
                     </ListItemIcon>
-                    <Switch size='small' checked={isDarkMode} onChange={toggleDarkMode} />
+                    <ListItemText>Add new model</ListItemText>
                   </MenuItem>
-                </span>
-              </Tooltip>
-              <Link href='/api/logout' color='inherit' underline='none'>
-                <MenuItem data-test='logoutLink'>
-                  <ListItemIcon>
-                    <LogoutIcon fontSize='small' />
-                  </ListItemIcon>
-                  <ListItemText>Sign Out</ListItemText>
-                </MenuItem>
-              </Link>
-            </Menu>
-          </Box>
-        )}
-        <Box sx={{ flexGrow: 1, ml: 2, cursor: 'pointer' }}>
-          <Link href='/' color='inherit' underline='none' style={{ color: 'inherit', textDecoration: 'inherit' }}>
+                </Link>
+                <Divider />
+                <Tooltip title='This feature has been temporarily disabled'>
+                  <span>
+                    <MenuItem disabled data-test='toggleDarkMode'>
+                      <ListItemIcon>
+                        <DarkModeIcon fontSize='small' />
+                      </ListItemIcon>
+                      <Switch size='small' checked={isDarkMode} onChange={toggleDarkMode} />
+                    </MenuItem>
+                  </span>
+                </Tooltip>
+                <Link href='/api/logout' color='inherit' underline='none'>
+                  <MenuItem data-test='logoutLink'>
+                    <ListItemIcon>
+                      <LogoutIcon fontSize='small' />
+                    </ListItemIcon>
+                    <ListItemText>Sign Out</ListItemText>
+                  </MenuItem>
+                </Link>
+              </Menu>
+            </Box>
+          )}
+          {/* <Box sx={{ flexGrow: 1, ml: 2, width: 'fit-content' }}> */}
+          <Link
+            href='/'
+            color='inherit'
+            underline='none'
+            style={{ color: 'inherit', textDecoration: 'inherit', cursor: 'pointer' }}
+          >
             <Stack justifyContent='center' alignItems='left'>
               <Image src={bailoLogo} alt='bailo logo' width={142} height={60} />
             </Stack>
           </Link>
-        </Box>
-        {isSmOrLarger && (
-          <Box>
-            <Stack direction='row' spacing={2} justifyContent='center' alignItems='center'>
-              <ExpandableButton
-                label='Add Model'
-                icon={<Add />}
-                onClick={() => handleNewModelClicked()}
-                ariaLabel='Add a new model'
-                height='40px'
-              />
-              <ModelSearchField />
-              {currentUser ? (
-                <>
-                  <IconButton onClick={handleUserMenuClicked} data-test='userMenuButton'>
-                    <UserAvatar entity={{ kind: EntityKind.USER, id: currentUser.dn }} size='chip' />
-                  </IconButton>
-                  <Menu anchorEl={userMenuAnchorEl} open={actionOpen} onClose={handleMenuClose}>
-                    <MenuList>
-                      {/* TODO - currently breaks v1. Re-add when v2 is fully adopted */}
-                      <Tooltip title='This feature has been temporarily disabled'>
-                        <span>
-                          <MenuItem disabled data-test='toggleDarkMode'>
+          {/* </Box> */}
+          {isSmOrLarger && (
+            <Box>
+              <Stack direction='row' spacing={2} justifyContent='center' alignItems='center'>
+                <ExpandableButton
+                  label='Add Model'
+                  icon={<Add />}
+                  onClick={() => handleNewModelClicked()}
+                  ariaLabel='Add a new model'
+                  height='40px'
+                />
+                <ModelSearchField />
+                {currentUser ? (
+                  <>
+                    <IconButton onClick={handleUserMenuClicked} data-test='userMenuButton'>
+                      <UserAvatar entity={{ kind: EntityKind.USER, id: currentUser.dn }} size='chip' />
+                    </IconButton>
+                    <Menu anchorEl={userMenuAnchorEl} open={actionOpen} onClose={handleMenuClose}>
+                      <MenuList>
+                        {/* TODO - currently breaks v1. Re-add when v2 is fully adopted */}
+                        <Tooltip title='This feature has been temporarily disabled'>
+                          <span>
+                            <MenuItem disabled data-test='toggleDarkMode'>
+                              <ListItemIcon>
+                                <DarkModeIcon fontSize='small' />
+                              </ListItemIcon>
+                              <Switch
+                                size='small'
+                                checked={localStorage.getItem('dark_mode_enabled') === 'true'}
+                                onChange={toggleDarkMode}
+                                inputProps={{ 'aria-label': 'controlled' }}
+                              />
+                            </MenuItem>
+                          </span>
+                        </Tooltip>
+                        <Link href='/settings' color='inherit' underline='none'>
+                          <MenuItem data-test='settingsLink'>
                             <ListItemIcon>
-                              <DarkModeIcon fontSize='small' />
+                              <Settings fontSize='small' />
                             </ListItemIcon>
-                            <Switch
-                              size='small'
-                              checked={localStorage.getItem('dark_mode_enabled') === 'true'}
-                              onChange={toggleDarkMode}
-                              inputProps={{ 'aria-label': 'controlled' }}
-                            />
+                            <ListItemText>Settings</ListItemText>
                           </MenuItem>
-                        </span>
-                      </Tooltip>
-                      <Link href='/settings' color='inherit' underline='none'>
-                        <MenuItem data-test='settingsLink'>
-                          <ListItemIcon>
-                            <Settings fontSize='small' />
-                          </ListItemIcon>
-                          <ListItemText>Settings</ListItemText>
-                        </MenuItem>
-                      </Link>
-                      <Link href='/api/logout' color='inherit' underline='none'>
-                        <MenuItem data-test='logoutLink'>
-                          <ListItemIcon>
-                            <LogoutIcon fontSize='small' />
-                          </ListItemIcon>
-                          <ListItemText>Sign Out</ListItemText>
-                        </MenuItem>
-                      </Link>
-                    </MenuList>
-                  </Menu>
-                </>
-              ) : (
-                <Typography variant='caption'>Loading...</Typography>
-              )}
-            </Stack>
-          </Box>
-        )}
+                        </Link>
+                        <Link href='/api/logout' color='inherit' underline='none'>
+                          <MenuItem data-test='logoutLink'>
+                            <ListItemIcon>
+                              <LogoutIcon fontSize='small' />
+                            </ListItemIcon>
+                            <ListItemText>Sign Out</ListItemText>
+                          </MenuItem>
+                        </Link>
+                      </MenuList>
+                    </Menu>
+                  </>
+                ) : (
+                  <Typography variant='caption'>Loading...</Typography>
+                )}
+              </Stack>
+            </Box>
+          )}
+        </Stack>
       </Toolbar>
     </AppBar>
   )