feat: add search history for search page #749
Conversation
🦋 Changeset detectedLatest commit: b524242 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
- save search history for search page - record number limit to 10 - add search history relate function - support both sql and lucene search - test ref: hdx-1565
LYHuang
force-pushed
the
mh/hdx-1565-save-search-history
branch
from
b7ea626 to
1e6ba3b
Compare
| @@ -149,6 +200,7 @@ export default function SQLInlineEditor({ | |||
|
|
|||
| const updateAutocompleteColumns = useCallback( | |||
| (viewRef: EditorView) => { | |||
| const currentText = viewRef.state.doc.toString(); | |||
There was a problem hiding this comment.
Just a note (and this is probably fine for now, but just calling it out). If a user were to search for a value while in other places in the app (see screenshot), that particular search doesn't show up in the search history. I think it's natural given that we are only capturing true user input, but I wanted to call it out so it's known.
There was a problem hiding this comment.
good call, I will make a ticket for this.
| } | ||
| }; | ||
| return [queryHistory, setQueryHistory] as const; | ||
| } |
There was a problem hiding this comment.
nit: this can be simplified to
const setQueryHistory = (query: string) => {
try {
const trimmed = query.trim();
if (!type || !trimmed) return;
const deduped = [trimmed, ...queryHistory.filter(q => q !== trimmed)];
const limited = deduped.slice(0, QUERY_LOCAL_STORAGE.LIMIT);
_setQueryHistory(limited);
} catch (e) {
console.log(`Failed to cache query history: ${e.message}`);
}
};
There was a problem hiding this comment.
yeah, good call, I don't have to dedupe whole localStorage.
| value.length === 0 && | ||
| queryHistoryType && | ||
| queryHistoryList.length > 0 && ( | ||
| <div className="border-top border-dark fs-8 py-2"> |
There was a problem hiding this comment.
nit: for readability and transparency, you could make this a var
const shouldShowSearchHistory = value.length === 0 && queryHistoryType && queryHistoryList.length > 0;
| onClick={() => { | ||
| onSelectSearchHistory(value); | ||
| }} | ||
| > |
There was a problem hiding this comment.
I know this seems minor, but I think we should be using actual buttons here instead of a div role="button" . The reason has to do with enhanced accessibility and tabbability in the UI.
{queryHistoryList.map(({ value, label }, i) => (
<UnstyledButton
key={value}
className={clsx(
'd-block w-100 text-start text-muted fw-normal px-3 py-2 fs-8',
selectedQueryHistoryIndex === i && 'bg-hdx-dark'
)}
onMouseOver={() => setSelectedQueryHistoryIndex(i)}
onClick={() => onSelectSearchHistory(value)}
>
<span className="me-1 text-truncate">{label}</span>
</UnstyledButton>
))}
There was a problem hiding this comment.
Sure thing, and thanks for the example, learn a lot from it.
| @@ -213,6 +274,9 @@ export default function AutocompleteInput({ | |||
| suggestedProperties[selectedAutocompleteIndex].value, | |||
| ); | |||
| } else { | |||
| if (queryHistoryType) { | |||
| setQueryHistory(value); | |||
| } | |||
| onSubmit?.(); | |||
| } | |||
| } | |||
There was a problem hiding this comment.
Just a heads up. In a separate PR, I will add icons for these as part of the larger story for adding icons next to items in the dropdown.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Screen.Recording.2025-04-14.at.4.55.34.AM.mov
ref: hdx-1565