-
-
Notifications
You must be signed in to change notification settings - Fork 9.8k
UI: Improve status handling in sidebar nodes #32965
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.
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
Conversation
📝 WalkthroughWalkthroughContext menu now reads StatusContext to compute per-item status and choose icons differently for leaf (story/docs) vs non-leaf (component/group) nodes. Tree no longer generates status links for non-leaf nodes; status links remain only for leaf items. Changes
Sequence Diagram(s)sequenceDiagram
participant Tree as Tree
participant ContextMenu as ContextMenu
participant StatusCtx as StatusContext
participant UI as FloatingStatusButton
Note over Tree,ContextMenu: User opens context menu for a sidebar node
Tree->>ContextMenu: open(node)
ContextMenu->>StatusCtx: read allStatuses, groupStatus
alt node is leaf (story/docs)
ContextMenu->>StatusCtx: getMostCriticalStatusValue(allStatuses[node.id])
ContextMenu-->>UI: render FloatingStatusButton(status=leafStatus, icon=statusIcon)
else node is non-leaf (component/group)
ContextMenu->>StatusCtx: lookup groupStatus[node.id] or default unknown
ContextMenu-->>UI: render FloatingStatusButton(status=groupStatus, icon=dotOrEllipsis)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
✨ Finishing touches
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Comment |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
code/core/src/manager/components/sidebar/ContextMenu.tsx (1)
126-149: Consider memoizing isLeafNode for stable dependencies.The
isLeafNodevariable is recalculated on every render and used as a dependency in theitemStatususeMemo (line 149), which may cause unnecessary recalculations when other props change butcontext.typeremains the same.- const isLeafNode = context.type === 'story' || context.type === 'docs'; + const isLeafNode = useMemo( + () => context.type === 'story' || context.type === 'docs', + [context.type] + );Note: The defensive check for
!contexton line 130 is unnecessary sincecontextis a required parameter.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/core/src/manager/components/sidebar/ContextMenu.tsx(7 hunks)code/core/src/manager/components/sidebar/Tree.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/core/src/manager/components/sidebar/Tree.tsxcode/core/src/manager/components/sidebar/ContextMenu.tsx
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/core/src/manager/components/sidebar/Tree.tsxcode/core/src/manager/components/sidebar/ContextMenu.tsx
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/core/src/manager/components/sidebar/Tree.tsxcode/core/src/manager/components/sidebar/ContextMenu.tsx
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/manager/components/sidebar/Tree.tsxcode/core/src/manager/components/sidebar/ContextMenu.tsx
🧠 Learnings (3)
📚 Learning: 2025-11-05T09:37:25.903Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.903Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
📚 Learning: 2025-11-05T09:38:47.694Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.694Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
📚 Learning: 2025-11-05T09:36:55.919Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.919Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
🧬 Code graph analysis (1)
code/core/src/manager/components/sidebar/ContextMenu.tsx (4)
code/core/src/shared/status-store/index.ts (1)
StatusValue(9-14)code/core/src/manager/utils/status.tsx (1)
getMostCriticalStatusValue(58-63)code/core/src/manager/components/sidebar/IconSymbols.tsx (1)
UseSymbol(111-159)code/core/src/manager/components/sidebar/Tree.tsx (1)
ExcludesNull(56-56)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Danger JS
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (5)
code/core/src/manager/components/sidebar/Tree.tsx (1)
239-258: LGTM! Dependency array correctly reflects actual usage.The updated dependency array accurately captures the values used in the statusLinks callback, improving memoization precision.
code/core/src/manager/components/sidebar/ContextMenu.tsx (4)
48-48: LGTM! StatusContext integration is correct.The StatusContext usage aligns with the provider setup in Tree.tsx, and the dependency arrays accurately reflect the values used in the callbacks.
Also applies to: 93-93
151-187: LGTM! Status-aware icon rendering logic is correct.The MenuIcon calculation properly differentiates between leaf (story/docs) and non-leaf (component/group) nodes, rendering appropriate icons based on status. The logic aligns with the PR objective to improve status visibility.
212-218: LGTM! Dynamic status rendering correctly implemented.The FloatingStatusButton now uses computed
itemStatusandMenuIcon, and the dependency array on line 218 correctly includes all values used in the returned object.
269-269: Good type safety improvement.Changing from
anytounknownprovides better type safety by requiring proper type narrowing.
|
View your CI Pipeline Execution ↗ for commit 87d93a5
☁️ Nx Cloud last updated this comment at |
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/core/src/manager/components/sidebar/ContextMenu.tsx(7 hunks)code/core/src/manager/components/sidebar/Tree.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- code/core/src/manager/components/sidebar/Tree.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
🧠 Learnings (3)
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
📚 Learning: 2025-11-05T09:36:55.944Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
🧬 Code graph analysis (1)
code/core/src/manager/components/sidebar/ContextMenu.tsx (4)
code/core/src/shared/status-store/index.ts (1)
StatusValue(9-14)code/core/src/manager/utils/status.tsx (1)
getMostCriticalStatusValue(57-62)code/core/src/manager/components/sidebar/IconSymbols.tsx (1)
UseSymbol(111-159)code/core/src/manager/components/sidebar/Tree.tsx (1)
ExcludesNull(56-56)
🔇 Additional comments (9)
code/core/src/manager/components/sidebar/ContextMenu.tsx (9)
2-2: LGTM: Imports added for status handling.The new imports support the status-aware rendering logic introduced in this PR.
Also applies to: 10-10, 22-23, 25-25
48-48: LGTM: StatusContext consumption.The context is properly consumed and provides the necessary status data for both leaf and non-leaf nodes.
93-93: LGTM: Dependency array correctly updated.Including
apiin the dependency array is correct since it's referenced in theopenInEditorcallback.
126-149: LGTM: Status computation logic is well-designed.The distinction between leaf nodes (story/docs) and non-leaf nodes (component/group) is appropriate. The logic correctly:
- Aggregates multiple status values for stories/docs using
getMostCriticalStatusValue- Uses group-level status for components/groups
- Treats success and undefined as unknown for non-leaf nodes to maintain clean UI on hover
212-212: Status prop correctly passed, but incomplete without MenuIcon.The
itemStatusis correctly passed toFloatingStatusButton, but this change alone won't achieve the visual status indication mentioned in the PR objectives. The computedMenuIconmust also be rendered (see previous comment).
220-220: LGTM: Dependency array updated for itemStatus.Including
itemStatusin the dependency array is correct since it's used in the memoized JSX (line 212).
271-271: LGTM: Improved type safety.Changing the type assertion from
anytounknownis a good practice for better type safety.
1-271: Ensure formatting and linting before commit.Per coding guidelines, please run Prettier and ESLint on this file before committing:
- Prettier: Format the file
- ESLint:
yarn lint:js:cmd code/core/src/manager/components/sidebar/ContextMenu.tsx
126-149: Status computation correctly eliminates duplicates through proper node-type distinction.The logic works as follows:
Tree.tsx deduplication (lines 229-246): statusLinks are only generated for leaf nodes (stories/docs). Non-leaf nodes (components/groups) return an empty array, preventing duplicate status items from being added to the context menu.
ContextMenu itemStatus computation (lines 126-149): Correctly distinguishes between node types:
- Leaf nodes: Aggregates all statuses via
Object.values(allStatuses?.[context.id] || {}), selecting the most critical value- Non-leaf nodes: Uses pre-computed
groupStatus, showing a single aggregated status or 'unknown'Result: The context menu receives only leaf-node statusLinks, preventing duplicates. The itemStatus computation properly handles both cases without duplication.
Note: MenuIcon (lines 151-176) is computed but never rendered—the button uses a hardcoded
<EllipsisIcon />instead. Verify whether this is intentional dead code or if the rendering implementation is incomplete.
…om:storybookjs/storybook into yann/improve-sidebar-context-menu-statuses
…om:storybookjs/storybook into yann/improve-sidebar-context-menu-statuses
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
code/core/src/manager/components/sidebar/ContextMenu.tsx (1)
151-187:MenuIconmapping aligns with node type and status; consider reusingisLeafNode(optional)The icon selection logic is consistent with the status model: non‑leaf nodes show a dot for any non‑success/non‑unknown group status and default to ellipsis; leaf nodes get specific symbols for error/warning/success with ellipsis as the fallback, which should satisfy the “keep status icons visible on hover” requirement.
To avoid duplicating the leaf/non‑leaf condition, you could optionally reuse
isLeafNodehere instead of repeatingcontext.type !== 'story' && context.type !== 'docs', but that’s purely a readability tweak and not required for correctness.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/core/src/manager/components/sidebar/ContextMenu.tsx(7 hunks)code/core/src/manager/components/sidebar/Tree.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- code/core/src/manager/components/sidebar/Tree.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use camelCase for variable and function names
Files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Enable TypeScript strict mode
Export functions from modules for testing purposes
Files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
**/*.{ts,tsx,js,jsx,json,html,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx,json,html,mjs}: Use ESLint and Prettier for code style enforcement
Run 'yarn prettier --write ' to format code after making changes
Run 'yarn lint:js:cmd ' to check for ESLint issues after making changes
Files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
code/**/!(*.test).{ts,tsx,js,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
code/**/!(*.test).{ts,tsx,js,mjs}: Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error
Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
🧠 Learnings (5)
📚 Learning: 2025-11-05T09:36:55.944Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
📚 Learning: 2025-11-24T17:49:47.649Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.649Z
Learning: The Storybook repository is a TypeScript/React monorepo with main codebase in 'code/' directory and tooling in 'scripts/' directory
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/core/src/manager/components/sidebar/ContextMenu.tsx
🧬 Code graph analysis (1)
code/core/src/manager/components/sidebar/ContextMenu.tsx (4)
code/core/src/manager/utils/status.tsx (1)
getMostCriticalStatusValue(65-70)code/core/src/components/index.ts (1)
PopoverProvider(71-71)code/core/src/components/components/Popover/PopoverProvider.tsx (1)
PopoverProvider(55-106)code/core/src/manager/components/sidebar/Tree.tsx (1)
ExcludesNull(56-56)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (3)
code/core/src/manager/components/sidebar/ContextMenu.tsx (3)
48-49: StatusContext usage anditemStatusderivation look correct; confirm provider is always presentThe leaf vs non‑leaf status logic is coherent: leaf nodes derive status from
allStatuses[context.id]viagetMostCriticalStatusValue, while components/groups rely ongroupStatus[context.id]and normalize success/undefined tostatus-value:unknown. This matches the intended “only show non‑ellipsis on non‑success group statuses” behavior and should avoid spurious indicators.One thing to double‑check:
const { allStatuses, groupStatus } = useContext(StatusContext);assumesStatusContext’s value is neverundefined. Please confirm the context is always provided (or has a non‑null default like{ allStatuses: {}, groupStatus: {} }) everywhereuseContextMenuis used so we don’t risk a destructuring crash if a provider is missed in the tree.Also applies to: 126-150
207-216: Context menu button now correctly reflects status and usesMenuIconWiring
status={itemStatus}intoFloatingStatusButtonand rendering{MenuIcon}instead of a hardcoded<EllipsisIcon />resolves the earlier gap where the computed icon wasn’t actually shown. The updateduseMemodependencies (itemStatus,MenuIcon) ensure the hover button re-renders when status or icon mapping changes without introducing stale state.Also applies to: 220-220
271-272: Type‑guard cast forfilteris safer withunknownthananyChanging
.filter(Boolean as unknown as ExcludesNull)from anany‑based cast keeps the runtime behavior (filtering out thenullentries produced by the mapper) while better aligning with TypeScript’s strict typing forExcludesNull. This is a good cleanup and should play nicely with strict mode.
Closes #32825
What I did
This PR removes the duplicated element:

Additionally, the status icons are now kept on hover:

Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This pull request has been released as version
0.0.0-pr-32965-sha-87d93a51. Try it out in a new sandbox by runningnpx [email protected] sandboxor in an existing project withnpx [email protected] upgrade.More information
0.0.0-pr-32965-sha-87d93a51yann/improve-sidebar-context-menu-statuses87d93a511764012229)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=32965Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.