EnxDev opened a new pull request, #41879: URL: https://github.com/apache/superset/pull/41879
### SUMMARY This PR completes the `react-dnd` → `@dnd-kit` migration for the Explore chart builder by restoring the drag preview when dragging metrics or columns from the **Datasource** panel into Explore controls. Unlike `react-dnd`, `@dnd-kit` does not provide a native drag preview. Although `ExploreDndContext` already tracked the active drag item, it never rendered a `DragOverlay`, resulting in no visible item following the cursor during external drags. This PR adds a `DragOverlay` that displays the dragged item while dragging from the Datasource panel: * Columns render using `StyledColumnOption`. * Metrics render using `StyledMetricOption`. The overlay is styled to match the lifted datasource row (background, border radius, drag handle, and subtle elevation). The source row remains faded during the drag, while the overlay stays fully opaque. Reordering items within Explore controls is intentionally unchanged—those drags do not create an overlay, so the existing behavior is preserved. This was likely introduced by https://github.com/apache/superset/pull/37880 during the `react-dnd` → `@dnd-kit` migration. ### BEFORE / AFTER **Before** * Dragging a metric or column showed no visual preview. * The source row faded, but nothing followed the cursor. https://github.com/user-attachments/assets/ffe20d25-2d5b-40a1-bcd1-f95c2838e4bf **After** * A drag preview displaying the item name and type follows the cursor throughout the drag operation. https://github.com/user-attachments/assets/af313788-b112-43de-a7d4-eb84e230ffe8 ### TESTING 1. Open any chart in Explore. 2. Drag a metric or column from the Datasource panel into a control (Metrics, Dimensions, Filters, etc.). 3. Verify the drag preview follows the cursor. 4. Drop the item and verify the existing drop behavior is unchanged. 5. Verify reordering items already inside a control still works as before. **Automated tests** ```bash npm run test -- src/explore/components/ExploreContainer/ExploreDndContext.test.tsx ``` All tests pass (**9/9**). ### ADDITIONAL INFORMATION * [ ] Has associated issue * [ ] Required feature flags * [x] Changes UI * [ ] Includes DB migration * [ ] Introduces new feature or API * [ ] Removes existing feature or API -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
