Merge pull request #1778 from gchq/BAI-1544-show-entry-kind-for-all-r…

…esults-in-top-right-search Bai 1544 show entry kind for all results in top right search
gchq · Jan 24, 2025 · afd3fc8 · afd3fc8
2 parents 78f5b72 + 2884a39
commit afd3fc8
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 38 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/wrapper/EntrySearch.tsx b/frontend/src/wrapper/EntrySearch.tsx
@@ -1,5 +1,5 @@
 import SearchIcon from '@mui/icons-material/Search'
-import { Box, InputBase, List, ListItemButton, ListItemText, Popover, Stack } from '@mui/material'
+import { Box, Chip, InputBase, List, ListItem, ListItemButton, ListItemText, Popover, Stack } from '@mui/material'
 import { alpha, styled, useTheme } from '@mui/material/styles'
 import { useListModels } from 'actions/model'
 import { ChangeEvent, useMemo, useState } from 'react'
@@ -8,6 +8,8 @@ import Loading from 'src/common/Loading'
 import useDebounce from 'src/hooks/useDebounce'
 import Link from 'src/Link'
 import MessageAlert from 'src/MessageAlert'
+import { EntryKindLabel } from 'types/types'
+import { toTitleCase } from 'utils/stringUtils'
 
 const Search = styled('div')(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
@@ -53,28 +55,34 @@ export default function EntrySearch() {
   const modelList = useMemo(
     () =>
       entries.map((entry) => (
-        <Box key={entry.id} sx={{ maxWidth: '300px' }}>
+        <Box key={entry.id} sx={{ maxWidth: '400px' }}>
           <Link href={`/${entry.kind}/${entry.id}`} noLinkStyle>
-            <ListItemButton>
-              <ListItemText
-                primary={entry.name}
-                secondary={entry.description}
-                slotProps={{
-                  primary: {
-                    style: {
-                      whiteSpace: 'nowrap',
-                      textOverflow: 'ellipsis',
-                      overflow: 'hidden',
-                      color: theme.palette.primary.main,
+            <ListItem
+              disablePadding
+              secondaryAction={<Chip label={toTitleCase(EntryKindLabel[entry.kind])} size='small' />}
+            >
+              <ListItemButton>
+                <ListItemText
+                  primary={entry.name}
+                  secondary={entry.description}
+                  slotProps={{
+                    primary: {
+                      sx: {
+                        whiteSpace: 'nowrap',
+                        textOverflow: 'ellipsis',
+                        overflow: 'hidden',
+                        color: theme.palette.primary.main,
+                        mr: 6,
+                      },
                     },
-                  },
 
-                  secondary: {
-                    style: { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' },
-                  },
-                }}
-              />
-            </ListItemButton>
+                    secondary: {
+                      sx: { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', mr: 6 },
+                    },
+                  }}
+                />
+              </ListItemButton>
+            </ListItem>
           </Link>
         </Box>
       )),