Search: show Docs icon for standalone docs pages in search results#34311
Open
mixelburg wants to merge 1 commit intostorybookjs:nextfrom
Open
Search: show Docs icon for standalone docs pages in search results#34311mixelburg wants to merge 1 commit intostorybookjs:nextfrom
mixelburg wants to merge 1 commit intostorybookjs:nextfrom
Conversation
Standalone MDX docs pages (e.g. Configure.mdx) were being shown with the Component icon in search results. The root cause: transformStoryIndexToStoriesHash creates an intermediate 'component' entry as the parent of the docs entry. When both entries matched a search query, the component entry won the deduplication filter (by scoring higher), blocking the docs entry via the parent-ID check. The fix skips docs-only component entries (those whose children are exclusively docs entries) so their docs child passes through the filter instead, correctly rendering with the Docs (document) icon. Also adds a SearchingDocPage story to prevent regression.
Contributor
📝 WalkthroughWalkthroughThis PR updates search results filtering logic to exclude components whose children are exclusively docs entries, preventing docs-only items from appearing in results. The Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/core/src/manager/components/sidebar/Search.tsx`:
- Around line 225-231: The docs-only guard in Search.tsx incorrectly treats an
empty children array as docs-only because item.children.every(...) is true for
[]; update the condition in the component filtering block (the if that checks
item.type === 'component' and 'children' in item) to require a non-empty
children array (e.g., item.children.length > 0) before evaluating
dataset.hash[item.refId]?.index and index[childId]?.type === 'docs', so only
components with at least one child are considered for the docs-only exclusion.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 4ea928ea-ca99-4a02-a781-d859823e8ab5
📒 Files selected for processing (2)
code/core/src/manager/components/sidebar/Search.tsxcode/core/src/manager/components/sidebar/SearchResults.stories.tsx
Comment on lines
+225
to
+231
| // Skip docs-only components so their docs child can show the Docs icon instead | ||
| if (item.type === 'component' && 'children' in item && Array.isArray(item.children)) { | ||
| const index = dataset.hash[item.refId]?.index; | ||
| if (index && item.children.every((childId) => index[childId]?.type === 'docs')) { | ||
| return false; | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
Guard the docs-only check against empty children.
At Line 228, item.children.every(...) is vacuously true for [], so a component with zero children would be filtered out even though it is not “docs-only.” Add a non-empty guard.
💡 Suggested patch
- if (index && item.children.every((childId) => index[childId]?.type === 'docs')) {
+ if (
+ index &&
+ item.children.length > 0 &&
+ item.children.every((childId) => index[childId]?.type === 'docs')
+ ) {
return false;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| // Skip docs-only components so their docs child can show the Docs icon instead | |
| if (item.type === 'component' && 'children' in item && Array.isArray(item.children)) { | |
| const index = dataset.hash[item.refId]?.index; | |
| if (index && item.children.every((childId) => index[childId]?.type === 'docs')) { | |
| return false; | |
| } | |
| } | |
| // Skip docs-only components so their docs child can show the Docs icon instead | |
| if (item.type === 'component' && 'children' in item && Array.isArray(item.children)) { | |
| const index = dataset.hash[item.refId]?.index; | |
| if ( | |
| index && | |
| item.children.length > 0 && | |
| item.children.every((childId) => index[childId]?.type === 'docs') | |
| ) { | |
| return false; | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/core/src/manager/components/sidebar/Search.tsx` around lines 225 - 231,
The docs-only guard in Search.tsx incorrectly treats an empty children array as
docs-only because item.children.every(...) is true for []; update the condition
in the component filtering block (the if that checks item.type === 'component'
and 'children' in item) to require a non-empty children array (e.g.,
item.children.length > 0) before evaluating dataset.hash[item.refId]?.index and
index[childId]?.type === 'docs', so only components with at least one child are
considered for the docs-only exclusion.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #34288
What I did
Standalone MDX docs pages (e.g.
Configure.mdx, any page without<Meta of={SomeComponent} />) were showing the Component icon in search results instead of the Docs icon.Root cause:
transformStoryIndexToStoriesHashcreates an intermediatetype: 'component'parent entry for docs pages that stand alone (not attached to a component). When a user searched for such a page, Fuse.js matched both the parent component entry and the docs entry. The deduplication filter passed the component entry first (better score / processed first), then blocked the docs entry because its parent ID was already inresultIds.Fix: In
getResults, before adding acomponententry toresultIds, check if all its children aredocsentries. If so, skip the component entry entirely — the docs child then passes through the filter and is rendered with the correct Docs (document) icon.Also adds a
SearchingDocPagestory inSearchResults.stories.tsxto provide visual regression coverage for this case.Checklist for Contributors
Testing
Manual testing
To reproduce before this fix: in a default Storybook sandbox (react-vite/default-ts), search for "Configure your". The result shows a Component icon. After the fix, it shows the Docs icon.
Summary by CodeRabbit
Bug Fixes
Tests