Skip to content

Conversation

@Myestery
Copy link
Collaborator

@Myestery Myestery commented Dec 3, 2025

Summary

  • Add NodeContextMenu.vue using PrimeVue ContextMenu component with native submenu support
  • Rename SubmenuPopover.vue to ColorPickerMenu.vue (specialized for color picker)
  • Delete old components: NodeOptions.vue, MenuOptionItem.vue, useSubmenuPositioning.ts
  • Wire up context menu converter in useMoreOptionsMenu.ts
  • Update tests to use hover instead of click for submenus

Dependencies

This PR depends on #7113 - the context menu converter infrastructure PR. It should be merged after that PR.

Benefits

  • Native PrimeVue submenu support with proper keyboard navigation
  • Constrained menu dimensions with overflow scrolling (max-h-[80vh])
  • Cleaner component architecture with ~280 fewer lines of code
  • Better separation: ColorPickerMenu handles only the custom color picker UI

Test plan

  • Typecheck passes
  • Lint passes
  • Knip passes
  • Browser tests for submenu interactions pass
  • Manual testing of node context menu

Screenshots

(Menu UI should look the same, with improved submenu behavior)

┆Issue is synchronized with this Notion page by Unito

Replace custom Popover-based node context menu with PrimeVue ContextMenu:
- Add NodeContextMenu.vue using PrimeVue ContextMenu component
- Rename SubmenuPopover.vue to ColorPickerMenu.vue (specialized for color picker)
- Delete NodeOptions.vue, MenuOptionItem.vue, and useSubmenuPositioning.ts
- Wire up context menu converter in useMoreOptionsMenu.ts
- Update tests to use hover instead of click for submenus

This migration provides:
- Native PrimeVue submenu support with proper keyboard navigation
- Constrained menu dimensions with overflow scrolling
- Cleaner component architecture with less custom code
@dosubot dosubot bot added the size:XXL This PR changes 1000+ lines, ignoring generated files. label Dec 3, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 3, 2025

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/primevue-node-context-menu

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

@github-actions
Copy link

github-actions bot commented Dec 3, 2025

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 12/03/2025, 01:23:41 AM UTC

📈 Summary

  • Total Tests: 497
  • Passed: 486 ✅
  • Failed: 0
  • Flaky: 2 ⚠️
  • Skipped: 9 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 477 / ❌ 0 / ⚠️ 2 / ⏭️ 9
  • chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

@github-actions
Copy link

github-actions bot commented Dec 3, 2025

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 12/03/2025, 01:15:17 AM UTC

🔗 Links


🎉 Your Storybook is ready for review!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XXL This PR changes 1000+ lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants