Skip to content

feat(designer-v2): Multi-node selection, hotkey improvements#9231

Open
rllyy97 wants to merge 24 commits into
mainfrom
rllyy97/designer-v2-multi-selection
Open

feat(designer-v2): Multi-node selection, hotkey improvements#9231
rllyy97 wants to merge 24 commits into
mainfrom
rllyy97/designer-v2-multi-selection

Conversation

@rllyy97
Copy link
Copy Markdown
Contributor

@rllyy97 rllyy97 commented Jun 1, 2026 •
edited
Loading

Commit Type

  • feature - New functionality
  • fix - Bug fix
  • refactor - Code restructuring without behavior change
  • perf - Performance improvement
  • docs - Documentation update
  • test - Test-related changes
  • chore - Maintenance/tooling

Risk Level

  • Low - Minor changes, limited scope
  • Medium - Moderate changes, some user impact
  • High - Major changes, significant user/system impact

Changes are specific to DesignerV2, and are utilizing mostly existing pre-exisisting workflow modification functions.

What & Why

Adds multi-node selection capabilities to the designer-v2 canvas, enabling users to select multiple workflow actions and perform batch operations on them.

Key features:

  • Marquee (box) selection via Shift+drag to select groups of nodes
  • Ctrl/Cmd+click to toggle individual nodes in/out of the selection
  • Multi-select panel showing the list of selected nodes with a count badge, Delete and Group (wrap-in-scope) actions
  • Batch delete with a confirmation modal listing all selected nodes and their downstream impact
  • Wrap-in-scope to group selected contiguous nodes into a Scope, Switch (Condition), or Do Until block (with validation for contiguous selection)
  • Multi-node copy/paste that preserves internal graph structure (edges between copied nodes) via topological sort during paste
  • Visual feedback — selected node cards, edges, and source handle dots all highlight blue during multi-selection
  • Bulk context menu (right-click on selected nodes) with Copy, Cut, Delete, and Group options
  • Keyboard shortcuts — Ctrl+A (select all), Escape (clear selection), Delete/Backspace (batch delete), Ctrl+C/X (copy/cut)

Impact of Change

  • Users: Users of the designer-v2 canvas can now efficiently select and manipulate multiple workflow actions at once, significantly improving the editing experience for large workflows.
  • Developers: New Redux state (selectedNodeIds in panel slice), new selectors (useIsNodeInMultiSelection, useSelectedNodeIds), new thunks (copyOperations, cutOperations, wrapSelectedNodesInScope), and new utility module (multiselect.ts).
  • System: No performance concerns — selection state is lightweight. useMemo ensures React Flow node stamping is efficient. No new dependencies added.

Test Plan

  • Unit tests added/updated
  • E2E tests added/updated
  • Manual testing completed
  • Tested in:
    • Standalone designer (pnpm run start)
    • Tested single-node, multi-node (sequential, parallel, branching), scope nodes, and mixed selections
    • Tested copy/paste of multi-node selections preserving graph structure
    • Tested wrap-in-scope validation (contiguous vs non-contiguous)
    • Tested delete confirmation modal with downstream dependency warnings

New test files:

  • panelSlice.multiselect.spec.ts — Redux multi-select state management (toggle, set, clear, single-select clears multi)
  • wrapNodesInScope.spec.ts — Wrap-in-scope reducer logic (re-parenting, runAfter rewiring)
  • multiselect.spec.ts — Contiguity validation, wrappable node filtering, scope type utilities

Contributors

Screenshots/Videos

image image image image image

@rllyy97
feat(designer-v2): add multi-node selection with batch delete and wra…
f8c5206 
…p-in-scope

Implement first-pass multi-selection in the DesignerV2 workflow editor:

- Shift-click toggles nodes in a selection set (OperationCardNode, ScopeCardNode).
- Box/marquee selection re-enabled in DesignerReactFlow (selectionOnDrag,
  SelectionMode.Partial, panOnDrag mouse buttons), filtered to operation/scope nodes.
- panelSlice tracks canonical selectedNodeIds; reconciles to selectedNodeId (1) and
  alternateSelectedNode (2, side-by-side) for the existing single/dual panels.
- New MultiSelectPanel (>2 selected) lists nodes with a batch Delete action.
- Wrap-in-scope actions (Scope, Condition) shown when selected nodes are on the same
  graph level and contiguous/connected, via canWrapSelectedNodes contiguity analysis.
- New deleteOperations batch thunk, wrapSelectedNodesInScope thunk, and
  wrapNodesInScope workflow reducer for graph restructuring + runAfter rewiring.

Adds unit tests for the multiselect contiguity utils and panelSlice selection reducers.
Switch/Agent wrap types are intentionally deferred for this first pass.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings June 1, 2026 19:42
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 1, 2026 •
edited
Loading

🤖 AI PR Validation Report

PR Review Results

Thank you for your submission! Here's detailed feedback on your PR title and body compliance:

✅ PR Title

  • Current: feat(designer-v2): Multi-node selection, hotkey improvements
  • Issue: None. The title is specific, descriptive, and matches the scope of the changes.
  • Recommendation: No change needed.

✅ Commit Type

  • Properly selected (feature).
  • Only one commit type is selected, which is correct.

⚠️ Risk Level

  • The PR body marks risk as Medium, and the repository label is risk:medium, so they match.
  • Advised risk is higher: Based on the diff, this is a broad, workflow-editing change that touches selection logic, copy/cut/paste, delete flows, wrapping/grouping behavior, keyboard shortcuts, panel rendering, and multiple UI surfaces. I would advise High risk rather than Medium.
  • Recommendation: Update the PR body risk selection to High to better reflect the scope and user impact.

✅ What & Why

  • Current: Clear, detailed explanation of multi-node selection, hotkeys, panel behavior, and batch operations.
  • Issue: None.
  • Recommendation: No change needed.

⚠️ Impact of Change

  • The section is present and gives a solid overview.
  • Recommendation: Consider explicitly mentioning the broad UI and workflow-state surface area affected, since the diff spans canvas interactions, panel state, contextual menus, deletion, copy/cut/paste, and wrapping logic.
    • Users: Good as written; could also mention right-click bulk actions and box selection.
    • Developers: Good as written; could mention new multi-select panel / delete modal and React Flow selection plumbing.
    • System: Good as written; if you keep Medium risk, add a note acknowledging that the change is broader than a typical medium-scope UI tweak.

✅ Test Plan

  • Unit tests are added/updated in the diff, which satisfies the test-plan requirement.
  • Manual testing is also documented clearly.
  • No E2E tests are required because unit tests are present.

✅ Contributors

  • Blank, but this is allowed and does not fail the PR.
  • Recommendation: Optional: add contributors if PMs/designers/copilot helped shape the feature.

✅ Screenshots/Videos

  • Present and appropriate for a visual/UI-heavy change.
  • No issue.

Summary Table

Section Status Recommendation
Title ✅
Commit Type ✅
Risk Level ⚠️ Update to High
What & Why ✅
Impact of Change ⚠️ Mention broader UI/workflow surface area
Test Plan ✅
Contributors ✅ Optional add credit
Screenshots/Videos ✅

The PR passes review, but I advise raising the risk level from Medium to High based on the breadth and impact of the changes. Please update the PR body accordingly if you want the submitted risk to match the diff.

Last updated: Fri, 05 Jun 2026 05:04:32 GMT

Copilot AI reviewed Jun 1, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds first-pass multi-node selection support to DesignerV2, including a new multi-select details panel, batch delete, and “wrap in scope/condition” operations that restructure the workflow graph.

Changes:

  • Introduces canonical multi-selection state in the panel slice (selectedNodeIds) with reconciliation back to existing 1-node / 2-node panel behavior.
  • Re-enables ReactFlow box selection and wires selection events + shift-click toggling into Redux selection state.
  • Adds multi-select utilities + tests, plus new wrap-in-scope thunk/reducer and batch delete thunk.

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
Localize/lang/strings.json Adds new localized strings for multi-select panel and wrap actions.
libs/designer-v2/src/lib/ui/panel/panelRoot.tsx Routes Operation panel rendering to MultiSelectPanel when >2 nodes are selected.
libs/designer-v2/src/lib/ui/panel/multiSelectPanel/multiSelectPanel.tsx New multi-select panel UI with selected list, wrap actions, and batch delete.
libs/designer-v2/src/lib/ui/panel/multiSelectPanel/multiSelectPanel.styles.ts Fluent v9 makeStyles styling for MultiSelectPanel.
libs/designer-v2/src/lib/ui/DesignerReactFlow.tsx Re-enables marquee selection and syncs selection changes into Redux.
libs/designer-v2/src/lib/ui/CustomNodes/ScopeCardNode.tsx Adds shift-click toggling and multi-select highlighting for scope nodes.
libs/designer-v2/src/lib/ui/CustomNodes/OperationCardNode.tsx Adds shift-click toggling and multi-select highlighting for operation nodes.
libs/designer-v2/src/lib/ui/CustomNodes/components/card/actionCard.tsx Forwards MouseEvent through onClick to enable shift-click detection upstream.
libs/designer-v2/src/lib/core/utils/multiselect.ts Adds utilities to validate same-graph contiguous chain selection for wrap eligibility.
libs/designer-v2/src/lib/core/utils/test/multiselect.spec.ts Adds unit tests for multiselect chain/graph eligibility logic.
libs/designer-v2/src/lib/core/state/workflow/workflowSlice.ts Adds workflow reducer to wrap selected nodes into a new scope/condition container.
libs/designer-v2/src/lib/core/state/panel/panelTypes.ts Adds selectedNodeIds to operation panel state.
libs/designer-v2/src/lib/core/state/panel/panelSlice.ts Adds set/toggle selection reducers and reconciliation to existing panel selection model.
libs/designer-v2/src/lib/core/state/panel/panelSelectors.ts Adds selectors for selectedNodeIds, multi-select membership, and wrap eligibility.
libs/designer-v2/src/lib/core/state/panel/test/panelSlice.multiselect.spec.ts Adds tests validating selection reconciliation behavior for 0/1/2/>2 selections.
libs/designer-v2/src/lib/core/actions/bjsworkflow/wrapInScope.ts Adds thunk to create a new scope/condition and move selected nodes inside it.
libs/designer-v2/src/lib/core/actions/bjsworkflow/delete.ts Adds batch delete thunk for deleting multiple selected nodes.

Comment thread libs/designer-v2/src/lib/ui/panel/multiSelectPanel/multiSelectPanel.tsx
Comment thread libs/designer-v2/src/lib/ui/panel/multiSelectPanel/multiSelectPanel.tsx
Comment thread libs/designer-v2/src/lib/core/actions/bjsworkflow/delete.ts
Comment thread libs/designer-v2/src/lib/ui/panel/multiSelectPanel/multiSelectPanel.tsx Outdated
Comment thread libs/designer-v2/src/lib/core/actions/bjsworkflow/wrapInScope.ts
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 1, 2026 •
edited
Loading

📊 Coverage check completed. See workflow run for details.

rllyy97 and others added 3 commits June 1, 2026 14:54
@rllyy97
fix(designer-v2): restore left-drag panning, move box-select to shift…
b546d92 
…+drag

The multi-select feature swapped left-click drag from panning to marquee
selection, which regressed the default canvas pan gesture. Restore panOnDrag
to all buttons (left/middle/right) and gate the selection box behind the
Shift key via react-flow's selectionKeyCode, matching react-flow defaults.
Drop Shift from multiSelectionKeyCode so it no longer conflicts with the
shift-click node toggle.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@rllyy97
fix(designer-v2): refine multi-select panel UX
d5ca518 
- Commit box/marquee selection only on release instead of continuously
  during drag, so the panel no longer re-renders while dragging.
- Gate the multi-select Delete action behind a confirmation dialog
  instead of deleting immediately.
- Verified wrap-in-Condition nests the selected nodes in the true block.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@rllyy97
fix(designer-v2): wrap-in-Condition places nodes in true branch
296f70f 
When wrapping selected nodes in a Condition, the first moved node is now
chained off the subgraph header (Condition-actions-#subgraph) so ELK lays
it out inside the 'true' branch (below the header) instead of beside the
true/false branch labels. Adds a reducer regression test covering the
header->first-node edge for both Condition and Scope wraps.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@rllyy97
feat(designer-v2): list actions in multi-delete confirmation dialog
e9afe07 
The delete confirmation dialog now lists each selected action (icon +
display name) so users can see exactly what will be removed before
confirming.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
rllyy97 and others added 3 commits June 1, 2026 16:06
@rllyy97
feat(designer-v2): bulk context menu, shared multi-delete modal, mult…
28ede90 
…i-copy, selection box styling

- Add right-click bulk context menu (Delete/Copy N actions) when right-clicking a node that is part of a multi-selection
- Extract a shared redux-driven MultiSelectDeleteModal (rendered at Designer level) so the delete confirmation with action list works from both the multi-select panel and the canvas context menu
- Add copyOperations thunk that writes a multi-node clipboard payload; handle isMultiNode paste (reverse, sequential) in dropzone and EdgeContextualMenu
- Style the selection box: 8px border-radius + 8px padding

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@rllyy97
fix(designer-v2): full-encasement marquee, reset stale selection, ref…
c781a4a 
…ine box styling

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@rllyy97
feat(designer-v2): add multi-selection hotkeys and fix marquee select…
7607ecf 
…ion race

- Add Delete/Backspace, Ctrl+D (duplicate), and Ctrl+A (select all) hotkeys
- Ctrl/Meta-click behaves like Shift-click for multi-select
- Ctrl+A includes triggers via useAllSelectableNodeIds
- Fix marquee selection randomly committing no nodes by committing from
  whichever of onSelectionEnd/onSelectionChange fires last, with empty-guard
  and dedupe to avoid echo loops
- Guard multi-select panel against Escape clearing selection on delete dialog

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
rllyy97 and others added 7 commits June 2, 2026 11:44
@rllyy97
Reuse PanelHeader for multi-select with count badge icon
f2872cd 
Replaces the bespoke header in MultiSelectPanelBody with the shared PanelHeader component so the multi-select drawer matches the chrome of every other panel. Adds a customIcon prop on PanelHeader and renders a primary-background count badge in its place. Overflow (...) button now hides automatically when headerItems is empty. PanelContainer customContent path lets the multi-select panel reuse the same Drawer infrastructure (mountNode, resize, position) instead of a one-off Drawer.

Also folds in the shift-click-to-deselect fix (stopPropagation on modifier-key clicks in OperationCardNode and ScopeCardNode so React Flow's own shift-select logic doesn't clobber our toggle reducer), removes the FocusTrapZone wrapper that was swallowing canvas clicks while the panel was open, and keeps the existing delete-modal Escape guard.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@rllyy97
fix(designer-v2): add panel border to multi-select layout
9c7e7cd 
The msla-panel-layout div needs the msla-panel-border-selected class to render the panel chrome (background + border) — without it the multi-select content floats over the canvas with no visible drawer frame.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@rllyy97
fix(designer-v2): multi-select panel width + selection rect pointer e…
1738eba 
…vents

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@rllyy97
feat(designer-v2): multi-node selection UX improvements
0e092f2 
- Add Ctrl+C/X canvas-level hotkeys for copy/cut operations
- Convert paste option to split button (inline paste + parallel submenu)
- Fix panel width: 480px single/multi-select, 680px dual-view
- Fix NodeDetailsPanel overrideWidth initialization
- Fix chevron click closing edge menu via stopPropagation
@rllyy97
feat(designer-v2): overlay panel with animated canvas shift
3c6b885 
- Switch Drawer from type='inline' to type='overlay' so panel floats over canvas
- Add PanelViewportShift component that detects when selected node is behind panel
- Animate canvas translation (300ms) to keep selected node visible
- Reverse the shift when panel closes
- Re-apply Ctrl+C hotkey for copy, split button paste, panel width fixes
@rllyy97
More changes relating to the multi-select functionality
0d7b3f8
@rllyy97
Change parallel paste text to "Paste as parallel branch"
3d46006
@rllyy97 rllyy97 changed the title feat(designer-v2): multi-node selection with batch delete and wrap-in-scope feat(designer-v2): Multi-node selection, hotkey improvements Jun 4, 2026
@rllyy97 rllyy97 added the risk:high High risk change requiring careful review label Jun 4, 2026
@rllyy97 rllyy97 added risk:medium Medium risk change with potential impact needs-pr-update and removed risk:high High risk change requiring careful review pr-validated labels Jun 4, 2026
@rllyy97 rllyy97 enabled auto-merge (squash) June 4, 2026 20:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@ccastrotrejo ccastrotrejo ccastrotrejo approved these changes

Assignees

No one assigned

Labels

pr-validated risk:medium Medium risk change with potential impact

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@rllyy97 @ccastrotrejo