Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bai 1544 show entry kind for all results in top right search #1778

Merged
merged 8 commits into from
Jan 24, 2025
Merged

Bai 1544 show entry kind for all results in top right search #1778

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
04d5558
Grouped entries by kind
IR96334 Jan 10, 2025
631fae1
Added chip to top-right search results
IR96334 Jan 20, 2025
e5ac83a
Fixed padding
IR96334 Jan 21, 2025
0166aaa
Merge branch 'main' into BAI-1544-show-entry-kind-for-all-results-in-…
IR96334 Jan 22, 2025
e4d796a
Merged in main
IR96334 Jan 23, 2025
050c324
Merge branch 'BAI-1544-show-entry-kind-for-all-results-in-top-right-s…
IR96334 Jan 23, 2025
0899fc6
Updated lock file
IR96334 Jan 23, 2025
2884a39
Added margin right to ListItem
IR96334 Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 54 additions & 18 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

48 changes: 28 additions & 20 deletions frontend/src/wrapper/EntrySearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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,
Expand Down Expand Up @@ -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: {
style: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can use sx here instead of style.

whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
color: theme.palette.primary.main,
maxWidth: '400px',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this is set to the same width as the surrounding box, really long names will appear under the entry kind chip. I'd suggest instead of settings this to a specific amount of pixels, giving it a marginRight. If you change style to sx on line 70 you can use mr: 6, which should give enough padding.

},
},
},

secondary: {
style: { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' },
},
}}
/>
</ListItemButton>
secondary: {
style: { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', maxWidth: '400px' },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can use sx here instead of style.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, see my other comment about changing the maxWidth property to be margin instead

},
}}
/>
</ListItemButton>
</ListItem>
</Link>
</Box>
)),
Expand Down
Loading