Enable right-click context menu with delete option for REST tree nodes

[PVinaches]

Please describe the feature that you want to propose

Story

As a Kaoto user managing REST DSL configurations,
I need to right-click on REST tree nodes to access a delete option,
So that I can quickly delete REST configurations, services, or methods without using the toolbar menu.

Context

Currently, users can only delete REST tree items through the RestTreeToolbar's Actions menu. The REST tree uses Carbon components (TreeView and TreeNode from @carbon/react). The application has existing context menu implementations in other pages using PatternFly components. This task requires evaluating whether to use Carbon components (to match the tree) or PatternFly components (to match existing context menus) for consistency and best user experience.

Acceptance Criteria

1. Context Menu Trigger

   • Right-clicking on any REST tree node opens a context menu
   • Context menu appears at the cursor position
   • Only one context menu can be open at a time
   • Clicking outside the context menu closes it
   • Pressing Escape key closes the context menu

2. Delete Option Available

   • Context menu displays a "Delete" option with a trash icon
   • Delete option is styled as a danger action (red/destructive styling)
   • Clicking "Delete" removes the selected REST entity or method
   • After deletion, the context menu closes automatically

3. Context Menu Behavior

   • Context menu works for all tree node types:
     • REST Configuration nodes
     • REST Service nodes (parent nodes)
     • REST Method nodes (child nodes with badges)
   • Right-clicking a node selects it before showing the context menu
   • Context menu positioning adjusts if near screen edges

4. Visual Consistency

   • Context menu styling is consistent with the application's design system
   • Delete option uses TrashCan icon from @carbon/icons-react
   • Menu appearance matches either Carbon or PatternFly patterns based on evaluation
   • Context menu overlays the tree without modifying Carbon TreeNode internals

5. Integration with Existing Functionality

   • Delete action uses the existing onDelete handler from RestDslEditorPage
   • Toolbar delete button and context menu delete option work identically
   • No regression in existing toolbar functionality
   • Tree selection state updates correctly after deletion
   • Carbon TreeNode component remains unmodified

Technical Implementation Notes

Component Library Evaluation Task:

• Evaluate Carbon components (@carbon/react) for context menu implementation
• Review existing PatternFly context menu implementations in the codebase (e.g., visualization canvas nodes)
• Consider trade-offs:
  • Carbon: Matches the tree component library, maintains page consistency
  • PatternFly: Matches existing context menus in other pages, maintains app-wide consistency
• Document the rationale for component library selection in implementation
• Ensure chosen approach provides best user experience and maintainability

Approach: Wrapper Component Pattern

• Create a wrapper around the TreeView that captures right-click events
• Use event delegation to detect which tree node was right-clicked
• Position context menu absolutely at cursor coordinates
• Use selected component library (Carbon or PatternFly) for menu implementation
• Import TrashCan icon from @carbon/icons-react
• Use React state to manage context menu open/close and position
• Handle click outside and Escape key to close menu
• Prevent default browser context menu with event.preventDefault()

Implementation Strategy:

1. Research and evaluate component library options
2. Wrap TreeView in a container with onContextMenu handler
3. Use event.target to identify which TreeNode was clicked
4. Extract entityId and modelPath from the clicked node's ID
5. Display selected context menu component positioned at cursor location
6. Context menu contains delete action that calls onDelete prop

Files to Modify

• packages/ui/src/pages/RestDslEditor/components/RestTree.tsx (add wrapper and context menu logic)
• packages/ui/src/pages/RestDslEditor/components/RestTree.scss (context menu positioning styles if needed)

Edge Cases to Handle

• Context menu closes when clicking outside
• Context menu closes when pressing Escape key
• Context menu closes after delete action completes
• Right-clicking already selected node shows context menu without re-selecting
• Context menu doesn't appear if tree is empty
• Menu positioning adjusts near viewport edges
• Only one context menu open at a time (close previous if opening new one)
• Correctly identify which node was right-clicked using DOM traversal
• Handle right-clicks on node labels, icons, and badges

Definition of Done

• Evaluate Carbon vs PatternFly components for context menu implementation
• Document rationale for component library selection
• Right-click on REST tree nodes opens context menu
• Context menu uses selected component library (Carbon or PatternFly)
• Delete option uses TrashCan icon from @carbon/icons-react
• Delete option removes the selected entity/method
• Context menu closes on outside click, Escape key, or after delete
• Visual styling is consistent with application design system
• Works for all node types (configuration, service, method)
• Carbon TreeNode component remains unmodified (wrapper pattern used)
• Unit tests added for context menu functionality
• Manual testing confirms all interactions work correctly
• No regression in existing toolbar delete functionality
• Code review completed and approved