feat(schema-hints): Add search functionality to drawer #87201
Conversation
github-actions
bot
added
the
Scope: Frontend
| // Find the last item that fits within the container | ||
| let lastVisibleIndex = | ||
| items.findIndex(item => { | ||
| const itemRect = item.getBoundingClientRect(); | ||
| return itemRect.right > containerRect.right - (seeFullListTagRect?.width ?? 0); | ||
| return itemRect.right > measureDivRect.right - (seeFullListTagRect?.width ?? 0); |
There was a problem hiding this comment.
for some reason i wasn't seeing the see full list option with the new nav expanded so this fixes that
| return sortedHints; | ||
| } | ||
|
|
||
| const searchFor = JSON.stringify(searchQuery) |
There was a problem hiding this comment.
why do we need to do this JSON.stringify here? search input should return the right thing, no?
There was a problem hiding this comment.
ah yes good point. I was trying to ensure that both the options and the search were formatted the same but to your point this is probably not necessary. I'll make that change
| css={css` | ||
| @media (max-width: ${theme.breakpoints.medium}) { | ||
| max-width: 175px; | ||
| } | ||
| `} |
There was a problem hiding this comment.
Do we still need this now that the drawer width is fixed? Also, can this just be a styled component?
There was a problem hiding this comment.
we still need this because the drawer width technically isn't "fixed" it changes with the screen size to be proportional, but yes I'll put this into a styled component instead.
| const hintFieldDefinition = getFieldDefinition( | ||
| hint.key, | ||
| 'span', | ||
| hint.kind | ||
| ); | ||
| const hintType = | ||
| hintFieldDefinition?.valueType === FieldValueType.BOOLEAN | ||
| ? t('boolean') | ||
| : hint.kind === FieldKind.MEASUREMENT | ||
| ? t('number') | ||
| : t('string'); |
There was a problem hiding this comment.
nit: I wonder if we could memoize field definitions and hint types when we build the initial list so we don't have to recompute it on every filter change
I've added a simple search function on the drawer which allows users to search for tags. The search input is invisible until clicked on and the logic resembles the breadcrumbs search logic found here. Here's what it looks like:
Screen.Recording.2025-03-17.at.2.19.09.PM.mov
Closes #87029