UI: Remove duplicate status items in context menu

[Rameshkumar31595]

This PR fixes issue #32825 by deduplicating sidebar context menu links before rendering.
It removes duplicate “status” entries such as “1 story with warnings” while preserving the menu order.
Fixes: #32825

Summary by CodeRabbit

• Bug Fixes
  • Fixed duplicate items appearing in context menus, ensuring each menu option displays only once and providing a cleaner user experience.

[Rameshkumar31595]

Hi everyone

This PR fixes #32825
.

The duplication in the sidebar context menu was caused by repeated status aggregation ... both summary and individual story statuses were being shown.

The fix introduces a deduplication step in ContextMenu.tsx using a Map to filter out repeated link IDs while preserving order.

Verified — duplicate “status” items (e.g. “1 story with warnings”) are now removed.
Implementation follows @dosubot’s earlier analysis.
Builds successfully and maintains the original structure and behavior.

@storybookjs/core kindly requesting review whenever you get a chance and consider merging

Thanks for maintaining this amazing project!

[Rameshkumar31595]

Hi @yannbf
I noticed you’ve been actively reviewing and merging recent PRs — thank you for your time and support! 🙏

This PR (#32901 – remove duplicate status items in context menu) fixes issue #32825, all checks are passing, and it can be cleanly merged.
When you have a moment, could you please review it and consider merging if everything looks good?

Thanks again!

[Rameshkumar31595]

Hi @yannbf
Just a friendly follow-up — this PR (#32901 – remove duplicate status items in context menu) has been open for a few days, all checks are passing, and it can be cleanly merged.
Could you please review it when you get a moment? Thanks again for your time and support!

[coderabbitai]

📝 Walkthrough

Walkthrough

Removed commented-out code rendering shortcuts for a context menu item. Introduced deduplication logic to merge topLinks and links arrays, filtering out duplicate items by id, and updated the tooltip to use the deduplicated result.

Changes

Cohort / File(s)	Summary
Context menu link deduplication code/core/src/manager/components/sidebar/ContextMenu.tsx	Removed inlined commented shortcuts, added deduplication block merging topLinks and links with duplicate removal by id, updated tooltip to render deduplicated links.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Deduplication logic: Verify the duplicate removal by id works correctly and handles edge cases (empty arrays, null/undefined values).
• Tooltip update: Confirm the deduplicated links (uniqueLinks) are properly passed and rendered.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b079045 and 9cc4c76.

📒 Files selected for processing (1)

• code/core/src/manager/components/sidebar/ContextMenu.tsx (3 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 (use yarn 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, 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 (1)

📚 Learning: 2025-09-24T09:39:39.233Z

Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.

Applied to files:

• code/core/src/manager/components/sidebar/ContextMenu.tsx

⏰ 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). (1)

• GitHub Check: normal

🔇 Additional comments (3)

code/core/src/manager/components/sidebar/ContextMenu.tsx (3)

123-127: Deduplication logic correctly addresses duplicate status items.

The Map-based deduplication preserves order and efficiently removes duplicate link IDs from the merged topLinks and links arrays, which aligns with the PR objective.

However, note that providerLinks (calculated at line 104 and recalculated in LiveContextMenu at line 168) are not included in this deduplication. If duplicates can occur between providerLinks and the other links, they won't be caught here.

Please verify that duplicates don't occur between providerLinks and topLinks/links. If they can, consider extending the deduplication logic or documenting why it's not needed.

Additionally, consider expanding the comment to explain what's being deduplicated and why:

-  //  Deduplicate context menu links before rendering
+  // Deduplicate topLinks and links to prevent duplicate status items (e.g., "1 story with warnings")
+  // from appearing in the context menu. Uses Map to preserve order while removing duplicates by id.

---

144-144: Correctly passes deduplicated links to the context menu.

The change from links to uniqueLinks ensures that the deduplicated link list is rendered in the tooltip, which is the core fix for the duplicate status items issue.

---

152-152: Dependency array correctly updated.

The addition of links and topLinks to the dependency array ensures the useMemo recomputes uniqueLinks whenever the input arrays change, which is necessary for the deduplication logic to work correctly.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[storybook-app-bot]

Package Benchmarks

^{Commit: 68212aa, ran on 6 November 2025 at 09:53:44 UTC}

No significant changes detected, all good. 👏

[Rameshkumar31595]

Hi @yannbf
I noticed two checks (lint and e2e-ui-vitest-3) failed, most others passed successfully.
Please let me know if these failures are related to my changes or if a re-run would help. Thanks!

[Sidnioulz]

Hi @Rameshkumar31595,

Thanks for your contribution. I just want to let you know that, in most large FOSS projects, reviews can take weeks to occur because maintainers are extremely busy. The usual response time for Storybook is one to two weeks, and it can climb to a month if some maintainers are sick or if there is an ongoing major release.

By pinging Yann every day, you are generating additional notifications for him, which take him time. But that won't result in a faster review. Yann has many responsibilities in the team and needs to address other tasks with a higher priority. In particular, please do not ping @storybook/core. This generates even more traffic and makes it even more expensive for the core team to review contributions.

It's okay to ask for an update after 4 weeks, but not every day. It's also okay to ask questions about the CI, so I'll be answering that in a bit 😄 If every contributor did this, the entire team would be swamped with emails and unable to get work done. We appreciate your enthusiasm, but the best way you can help us get your contribution in is to be patient. 🙏

---

Now, onto CI. You can click on the CircleCI statuses to check what happened.

The lint error shows your code is not well formatted, so you'll need to run the formatting command (yarn lint:prettier).

The E2E test error is probably related to changes in the context menu. You can run this locally with:

cd test-storybooks/portable-stories-kitchen-sink/react
yarn
yarn run storybook
yarn run playwright-e2e

[Rameshkumar31595]

I am sorry for that , Thanks for teaching me new things 😁.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 68212aa

Command	Status	Duration	Result
nx run-many -t check --parallel=7	✅ Succeeded	4m 56s	View ↗
nx run-many -t build --parallel=3	✅ Succeeded	56s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-11-06 09:57:16 UTC

[yannbf]

Hey there @Rameshkumar31595, thanks a lot for your contribution. Unfortunately, it doesn't really address the original issue. Although we truly appreciate it, as this bug was an internal-qa report from the team where we needed to do more fixes, I went ahead and worked on that in this PR: #32965 which will supersede this one. I'll be closing this PR. Thanks!