ENG-3680: migrate admin-ui drag-and-drop from react-dnd to dnd-kit#8169
Merged
Conversation
Standardize on @dnd-kit across admin-ui to drop the second drag library, remove the root <DndProvider>, get keyboard-accessible reorder, and delete the jest.mock("react-dnd", ...) workarounds carried in 5 test files.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Dependency ReviewThe following issues were found:
Snapshot WarningsEnsure that dependencies are being submitted on PR branches and consider enabling retry-on-snapshot-warnings. See the documentation for more information and troubleshooting advice. Scanned Files
|
|
gilluminate
requested review from
jpople,
lucanovera and
speaker-ender
and removed request for
a team,
jpople and
lucanovera
speaker-ender
approved these changes
May 15, 2026
Contributor
speaker-ender
left a comment
speaker-ender
left a comment
There was a problem hiding this comment.
Tested and functions as intended. Code looks good as well
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket ENG-3680
Description Of Changes
Standardizes admin-ui drag-and-drop on
@dnd-kit/*, dropping the second drag library (react-dnd+react-dnd-html5-backend) and removing the root<DndProvider>wrapper that came with it. This also gets us keyboard-accessible reorder (Tab → Space → Arrow keys → Space) on the two existing drag-and-drop spots — column-settings reordering and the access-policies row reordering — whichreact-dnddidn't provide. Thejest.mock("react-dnd", ...)blocks scattered across test files (workarounds forreact-dnd's ESM parse issues under Jest) are deleted;dnd-kitdoesn't have that problem.The reorder UX is preserved end-to-end: column-settings still drags by the handle and reorders the visible list; the access-policies table still does its two-phase "update local order on hover, fire
onReorderAPI only on drop / revert on cancel" flow, just routed through<DndContext>'sonDragOver/onDragEnd/onDragCancelinstead ofreact-dnd'suseDrag/useDrop.Code Changes
clients/admin-ui/package.json+clients/package-lock.json— added@dnd-kit/core,@dnd-kit/sortable,@dnd-kit/utilities; removedreact-dndandreact-dnd-html5-backend.clients/admin-ui/src/pages/_app.tsx— dropped the root<DndProvider backend={HTML5Backend}>wrapper and its imports.dnd-kitis context-per-<DndContext>, no global provider needed.clients/admin-ui/src/features/common/table/column-settings/DraggableColumnListItem.tsx— rewrote withuseSortable({ id }). The drag handle gets the sensorattributes/listenersso only the icon initiates drag (preserves the existing UX where the row is the visual hover target but only the icon is grabbable).clients/admin-ui/src/features/common/table/column-settings/DraggableColumnList.tsx— wraps the list in<DndContext>(withPointerSensor+KeyboardSensorusingsortableKeyboardCoordinates) and<SortableContext>(verticalListSortingStrategy).useEditableColumnsis now id-based:moveColumn(activeId, overId)does anarrayMovekeyed on the column ids that dnd-kit hands back, andsetColumnVisible(id, isVisible)matches by id rather than index.clients/admin-ui/src/features/access-policies/PoliciesTable.tsx— replaced the local<DndProvider>+DraggableRowwith a single<DndContext>around the table and aSortableRowslotted in viacomponents.body.row.onDragOverupdates the local visible order usingarrayMove(one source of truth for the row order during drag),onDragEndfires the API only if the position actually changed, andonDragCancelresets the visual state.clients/admin-ui/cypress/e2e/datamap-report.cy.ts— split the existing "should reorder columns" test into two cases — via mouse drag (cypress-real-eventsrealMouseDown+ 20 smallrealMouseMove(0, -10)steps +realMouseUp+ drop-animation wait +realClickon save) and via keyboard (focus the handle →Space→ArrowUp× 2 →Space). Both share pre-save modal-order and post-save table-order + reload-persistence assertions.jest.mock("react-dnd", () => ({ useDrag, useDrop, DndProvider }))blocks:src/features/privacy-requests/events-and-logs/__tests__/EventLog.test.tsxsrc/features/connector-templates/__tests__/SaaSVersionModal.test.tsxsrc/features/integrations/__tests__/VersionHistoryTab.test.tsxsrc/features/integrations/configure-tasks/components/__tests__/PrivacyRequestFieldPicker.test.tsxsrc/features/common/dataset/__tests__/DatasetReferencePicker.test.tsx__tests__/features/common/form/LlmModelSelector.test.tsx__tests__/features/asset-reporting/AssetReportingPage.test.tsx__tests__/features/asset-reporting/AssetReportingTable.test.tsxSteps to Confirm
The two production drag-and-drop spots are column-settings (inside the Data map report's "Edit columns" modal) and the access-policies row table.
Pre-Merge Checklist
CHANGELOG.mdupdatedmaindowngrade()migration is correct and works