Skip to content

Add drag-and-drop reordering for schema form arrays#20223

Merged
desertaxle merged 2 commits intomainfrom
ui-v2/schema-form-drag-drop-arrays
Jan 14, 2026
Merged

Add drag-and-drop reordering for schema form arrays#20223
desertaxle merged 2 commits intomainfrom
ui-v2/schema-form-drag-drop-arrays

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Jan 14, 2026

This PR replaces the up/down button approach with drag-and-drop reordering for array items in the schema form using the @dnd-kit library. Array items now display a visible drag handle (GripVertical icon) that allows users to reorder items by dragging. The existing move up/down menu options are preserved as a fallback for accessibility.

Key implementation details:

  • Prefix items (tuples) are excluded from drag-and-drop - they remain fixed in position with no drag handle
  • Keyboard navigation is supported via KeyboardSensor with sortable keyboard coordinates
  • Drag handle uses semantic color tokens (text-muted-foreground) for dark mode support
  • Items show reduced opacity (0.5) while being dragged

Related to #15512

Test Coverage

Added comprehensive test coverage including:

  • Snapshot tests for arrays with drag handles visible
  • Snapshot tests verifying prefix items have no drag handles
  • Behavioral tests for move up/down menu options
  • Test verifying prefix items cannot be moved

Note: The tests cover the menu-based reordering and DOM structure. Manual verification is still recommended for the actual drag-and-drop interaction.

Visual Verification

Verified in Storybook that drag handles appear correctly for regular array items and are absent for prefix items:

Regular array items with drag handles:
Array with drag handles

Prefix items without drag handles:
Prefix items without drag handles

Checklist

  • This pull request references any related issue by including "closes <link to issue>"
  • If this pull request adds new functionality, it includes unit tests that cover the changes
  • If this pull request removes docs files, it includes redirect settings in mint.json.
  • If this pull request adds functions or classes, it includes helpful docstrings.

Human Review Checklist

  • Verify drag-and-drop works correctly in the browser for regular array items
  • Verify prefix items (tuples) cannot be dragged and have no drag handle
  • Verify keyboard navigation works for reordering (Tab to drag handle, then arrow keys)
  • Verify move up/down menu options still function correctly
  • Check drag handle appearance in both light and dark mode

Requested by: @desertaxle
Link to Devin run: https://app.devin.ai/sessions/313e0a45d63a4af09c979a1f22eff8fd

Co-Authored-By: alex.s@prefect.io <ajstreed1@gmail.com>
@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@github-actions github-actions bot added enhancement An improvement of an existing feature ui-replatform Related to the React UI rewrite labels Jan 14, 2026
- Add snapshot tests for arrays with drag handles visible
- Add snapshot tests for prefixItems without drag handles
- Add behavioral tests for move up/down menu options
- Add test verifying prefix items cannot be moved

Co-Authored-By: alex.s@prefect.io <ajstreed1@gmail.com>
@desertaxle desertaxle merged commit 6433e85 into main Jan 14, 2026
15 checks passed
@desertaxle desertaxle deleted the ui-v2/schema-form-drag-drop-arrays branch January 14, 2026 17:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement An improvement of an existing feature ui-replatform Related to the React UI rewrite

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant