feat: support filtering search results by category - #712
Conversation
|
@qiancai is attempting to deploy a commit to the test-vi Team on Vercel. A member of the Team first needs to authorize it. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a search filtering feature for the documentation search page, allowing users to filter search results by category. It adds a new SearchFilterBar component, updates SearchResults and SearchItem to support filter changes, and manages the active filter state in DocSearchTemplate. The feedback suggests making the category chip's interactivity conditional on the presence of the onFilterChange callback, and filtering out categories without valid translation labels before rendering the filter bar to prevent rendering redundant or empty states.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
📝 WalkthroughWalkthroughSearch results now support category filtering. The template derives categories and filtered results, while search components render localized filter chips. Filter state resets across search lifecycle paths, with English, Japanese, and Chinese translations updated. ChangesSearch filtering
Estimated code review effort: 3 (Moderate) | ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/Search/Results.tsx (1)
93-103: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove commented-out dead code.
This block of commented-out JSX appears to be obsolete. Removing it will keep the file clean and improve readability.
♻️ Proposed refactor
- {/* <Typography - variant="body2" - sx={{ - paddingBottom: "2rem", - }} - > - <Trans - i18nKey="search.resultTips.counts" - values={{ data.length }} - /> - </Typography> */}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Search/Results.tsx` around lines 93 - 103, Remove the commented-out JSX block containing Typography and Trans from the Results component, leaving the surrounding live rendering logic unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/Search/Results.tsx`:
- Around line 93-103: Remove the commented-out JSX block containing Typography
and Trans from the Results component, leaving the surrounding live rendering
logic unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1bb4882c-b2ee-43f0-a9e1-8bfe874ad26a
📒 Files selected for processing (4)
locale/en/translation.jsonlocale/zh/translation.jsonsrc/components/Search/Results.tsxsrc/templates/DocSearchTemplate.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/templates/DocSearchTemplate.tsx (1)
99-113: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winPrevent stale searches from replacing the current results.
Overlapping Algolia requests are not sequenced. An older request can resolve after a newer query—or after the query is cleared—and restore stale hits, clear the active filter, and prematurely end loading. Track a request generation or cancel prior requests; invalidate it for the early-return paths too.
Proposed fix
+ const searchRequestId = React.useRef(0); + const execSearch = React.useCallback( (query: string) => { + const requestId = ++searchRequestId.current; const trimmedQuery = query.trim(); // ... index.search(trimmedQuery, { hitsPerPage: 150 }) .then(({ hits }) => { + if (requestId !== searchRequestId.current) return; setResults(hits); setActiveFilter(null); setIsLoading(false); }) .catch((reason: any) => { + if (requestId !== searchRequestId.current) return; console.error(reason); setResults([]); setActiveFilter(null); setIsLoading(false); }); }, [language] ); React.useEffect(() => { // ... if (language === Locale.ja || !query.trim()) { + searchRequestId.current += 1; // clear state return; }Also applies to: 118-135
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/templates/DocSearchTemplate.tsx` around lines 99 - 113, Update the search flow in DocSearchTemplate to sequence or cancel overlapping requests so only the latest query can update results, activeFilter, or loading state. Invalidate the current request generation when the query is cleared or other early-return paths execute, and apply the same guard to both success and catch handlers around index.search.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/templates/DocSearchTemplate.tsx`:
- Around line 55-62: The search filter contract currently tracks only category
presence, so required result counts are missing. In
src/templates/DocSearchTemplate.tsx lines 55-62, replace the category Set
derivation with a category-to-count Map and retain the total result count; in
lines 167-172, pass both values to SearchFilterBar. In
src/components/Search/Results.tsx lines 303-354, update the All and category
chip labels to append the total and corresponding category counts.
---
Outside diff comments:
In `@src/templates/DocSearchTemplate.tsx`:
- Around line 99-113: Update the search flow in DocSearchTemplate to sequence or
cancel overlapping requests so only the latest query can update results,
activeFilter, or loading state. Invalidate the current request generation when
the query is cleared or other early-return paths execute, and apply the same
guard to both success and catch handlers around index.search.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ceef1ee8-d282-4025-a45c-699f288b0b50
📒 Files selected for processing (2)
src/components/Search/Results.tsxsrc/templates/DocSearchTemplate.tsx
2 participants
Summary
Search results can span multiple documentation areas in a single query. Without filtering, users must scan a long mixed list to find hits in the section they care about.
This PR adds category filtering to the on-site search results page, so users can narrow results by documentation category (for example, TiDB Self-Managed, TiDB Cloud, or Developer) and easily return to the complete result set.
Preview
By default, the doc site displays the complete search results. If the results contain at least two categories, the filter bar is displayed.
Users can click a category label to show only results in that category.
What changed
src/templates/DocSearchTemplate.tsx: Track the active category filter, derive the available categories from Algolia results, filter the displayed list client-side, and reset the filter when the query or language changes.src/components/Search/Results.tsx: Add aSearchFilterBarwith an initially selected All chip followed by category chips. Filter state changes are immediate without click or hover animation. The category tags shown beside individual result URLs remain display-only and are not clickable.locale/en/translation.json,locale/zh/translation.json, andlocale/ja/translation.json: Add localized labels for the filter bar and the All-results option.Implementation
resolveSearchCategory()utility (shared/utils/searchCategory.ts) to classify each hit by URL path. No Algolia index or query changes are required.activeFilter === nullas the All-results state, which is selected by default.useMemo. Clicking a category chip applies that category; clicking it again or clicking All clears the filter and restores the complete result set.Test plan
backup) and confirm the filter bar appears with All first, followed by category chips.Summary by CodeRabbit
New Features
Bug Fixes