Add drag-and-drop reordering for schema form arrays#3
Conversation
Co-Authored-By: alex.s@prefect.io <ajstreed1@gmail.com>
- 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>
📝 WalkthroughWalkthroughThe changes introduce drag-and-drop reordering functionality for array items in schema forms by integrating the Changes
Sequence DiagramsequenceDiagram
actor User
participant List as SchemaFormInputArrayList
participant DndContext as DndContext
participant Sortable as SortableContext
participant Item as SchemaFormInputArrayItem
participant State as Local State
User->>Item: Interact with drag handle
Item->>DndContext: Initiate drag via sensor
DndContext->>Sortable: Register drag event
Sortable->>Item: Apply transform/opacity styles
Item->>User: Show visual feedback
User->>DndContext: Drop item at target position
DndContext->>List: Trigger onDragEnd(event)
List->>State: Calculate new item index
State->>State: Reorder localKeyedValues
State->>List: Update internal order
List->>User: Render reordered list
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
@coderabbitai review |
1 similar comment
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
ui-v2/src/components/schemas/schema-form-input-array-list.tsx (1)
45-149:⚠️ Potential issue | 🟠 MajorFix drag reordering indices and block prefix item movement.
Line 142 calls
moveItem(newIndex, oldIndex), butmoveItem(from, to)expects the dragged item’s index first—this moves the wrong element. Also, without guardingprefixItemsCount, a non-prefix item can be dropped into the prefix range, effectively reordering prefix items.🐛 Proposed fix
function handleDragEnd(event: DragEndEvent) { const { active, over } = event; - if (over && active.id !== over.id) { - const oldIndex = localKeyedValues.findIndex( - (item) => item.key === active.id, - ); - const newIndex = localKeyedValues.findIndex( - (item) => item.key === over.id, - ); - - if (oldIndex !== -1 && newIndex !== -1) { - moveItem(newIndex, oldIndex); - } - } + if (!over || active.id === over.id) return; + + const oldIndex = localKeyedValues.findIndex( + (item) => item.key === active.id, + ); + const newIndex = localKeyedValues.findIndex( + (item) => item.key === over.id, + ); + + if (oldIndex === -1 || newIndex === -1) return; + if (oldIndex < prefixItemsCount || newIndex < prefixItemsCount) return; + + moveItem(oldIndex, newIndex); }
2 participants
Benchmark PR from agentic-review-benchmarks#3
Summary by CodeRabbit
New Features
Tests