refactor(Filter components): migrate from react-dnd to dnd-kit by LevisNgigi · Pull Request #37445 · apache/superset

LevisNgigi · 2026-01-26T11:37:48Z

SUMMARY

This PR migrates DraggableFilter and related components from react-dnd to dnd-kit, replacing an unmaintained dependency with a modern, hooks-based drag-and-drop solution while preserving existing behavior.
The migration maintains container-level dragging, supports same-list reordering, and enables cross-list drag-and-drop via a shared DndContext.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE:

2026-01-25.10-23-59.mp4

AFTER:

2026-01-26.09-13-46.mp4

TESTING INSTRUCTIONS

1)Open a dashboard .
2)Open the Filter Configuration / Customization sidebar.
3)Verify that filters can be:
4)Dragged to reorder within the same list
5)Dragged without interfering with Delete and Undo actions
6)Verify cross-list drag-and-drop behavior for dividers works as before.
7)Confirm that drag interactions work seamlessly.

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

bito-code-review · 2026-01-26T11:37:59Z

Code Review Agent Run #82a83f

Actionable Suggestions - 0

Additional Suggestions - 8

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.test.tsx - 7
- Test asserts rendering, not behavior · Line 56-72
  
  This test claims to verify 'identifies divider items correctly' but only checks rendering with `toBeInTheDocument()`. Per BITO.md rule [6262], tests should assert actual behavior logic, not just component presence. The component's divider identification affects internal data passed to @dnd-kit but isn't tested here, risking undetected bugs in divider detection.
- Test asserts rendering, not behavior · Line 74-90
  
  Similar to the divider test, this only checks rendering despite claiming to test 'identifies non-divider items correctly'. BITO.md [6262] requires asserting the actual identification logic rather than just presence.
- Test asserts rendering, not behavior · Line 92-107
  
  Test name suggests testing cross-list drop logic but only verifies rendering. BITO.md [6262] mandates testing claimed behavior, not just component display.
- Test asserts rendering, not behavior · Line 110-125
  
  Only checks rendering despite test name implying customization divider logic testing. Violates BITO.md [6262] requirement for behavior assertion.
- Test asserts rendering, not behavior · Line 128-144
  
  Test name suggests testing same-list drop logic but only verifies rendering. BITO.md [6262] requires testing the claimed drop behavior.
- Test asserts rendering, not behavior · Line 146-162
  
  Only checks rendering despite implying cross-list drop logic testing. Violates BITO.md [6262] behavior assertion requirement.
- Test asserts rendering, not behavior · Line 213-229
  
  Test claims to test 'detects cross-list drop correctly' but only checks rendering. BITO.md [6262] requires validating the detection logic.
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx - 1
- Test asserts rendering, not behavior · Line 69-79
  
  The 'drag and drop' test now only checks element presence, not behavior. Given useDnd: true in render, it should assert the onRearrange callback fires on drag events.

Review Details

Files reviewed - 7 · Commit Range: 3bfc337..68cd764
- superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.nativeFilters.test.ts
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.test.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ItemTitleContainer.tsx
Files skipped - 0
Tools
- Eslint (Linter) - ✔︎ Successful
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

AI Code Review powered by

bito-code-review · 2026-01-26T13:41:24Z

Code Review Agent Run #799355

Actionable Suggestions - 0

Review Details

Files reviewed - 8 · Commit Range: b11c181..7b312a7
- superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.nativeFilters.test.ts
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.test.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ItemTitleContainer.tsx
Files skipped - 0
Tools
- Eslint (Linter) - ✔︎ Successful
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

AI Code Review powered by

msyavuz · 2026-01-29T09:46:29Z

I tested manually (videos are not playing) and cross list divider d&d does not work. Should it?

LevisNgigi · 2026-01-29T10:02:49Z

I tested manually (videos are not playing) and cross list divider d&d does not work. Should it?

In the Filters and Config Modal? Below is the video.

2026-01-29.12-59-26.mp4

msyavuz · 2026-01-30T11:51:25Z

I think it might work but the dropping takes a while:

2026-01-30_14-40-43.mp4

netlify · 2026-02-04T09:06:50Z

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	`3f92d30`
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/69830ae55303b800087aea93
😎 Deploy Preview	https://deploy-preview-37445--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-02-04T09:10:01Z

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	`aba104b`
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/69830bc5f9e31e0008641e13
😎 Deploy Preview	https://deploy-preview-37445--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

LevisNgigi · 2026-02-04T09:28:18Z

I think it might work but the dropping takes a while:

2026-01-30_14-40-43.mp4

Thank you. I updated the logic, tested locally and works fine now.

bito-code-review · 2026-02-04T10:07:49Z

Code Review Agent Run #d5aba5

Actionable Suggestions - 0

Review Details

Files reviewed - 8 · Commit Range: 7b312a7..aba104b
- superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.nativeFilters.test.ts
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.test.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx
- superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ItemTitleContainer.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

AI Code Review powered by

github-actions · 2026-02-04T21:32:46Z

⚠️ DEPRECATED WORKFLOW ⚠️

@EnxDev This workflow is deprecated! Please use the new Superset Showtime system instead:

Replace "testenv-up" label with "🎪 trigger-start"
Better reliability and easier management
See https://github.com/mistercrunch/superset-showtime for details

Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2026-02-04T21:42:28Z

@EnxDev Ephemeral environment spinning up at http://44.251.101.214:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

LevisNgigi added 6 commits January 26, 2026 14:32

fix tests

68cd764

update-filter-name

3bfc337

migrate-draggable-filter

a5eaa97

migrate-draggable-filter

8be022a

migrate-draggable-filter

345bb4e

migrate-draggable-filter

b11c181

LevisNgigi requested review from betodealmeida, eschutho, geido, mistercrunch, rusackas and sadpandajoe as code owners January 26, 2026 11:37

pull-request-size bot added the size/XL label Jan 26, 2026

dosubot bot added change:frontend Requires changing the frontend dashboard:editmode Related to te Dashboard edit mode labels Jan 26, 2026

LevisNgigi added 2 commits January 26, 2026 15:39

fix tests

53d9441

fix tests

7b312a7

LevisNgigi requested review from kgabryje, michael-s-molina and villebro as code owners February 4, 2026 09:01

github-actions bot added i18n Namespace | Anything related to localization doc Namespace | Anything related to documentation plugins dependencies:npm packages labels Feb 4, 2026

fix-divider

aba104b

LevisNgigi force-pushed the use-dnd-kit branch from 3f92d30 to aba104b Compare February 4, 2026 09:05

github-actions bot removed i18n Namespace | Anything related to localization doc Namespace | Anything related to documentation plugins dependencies:npm packages labels Feb 4, 2026

EnxDev added the testenv-up label Feb 4, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(Filter components): migrate from react-dnd to dnd-kit#37445

refactor(Filter components): migrate from react-dnd to dnd-kit#37445
LevisNgigi wants to merge 9 commits intoapache:masterfrom
LevisNgigi:use-dnd-kit

LevisNgigi commented Jan 26, 2026

Uh oh!