refactor(draggable filters): react-dnd to dnd-kit migration for DraggableFilters

[rubaizmomin]

SUMMARY

Since react-dnd is no longer maintained, dnd-kit is being used as a replacement, as it is modern with hooks and is maintained regularly. With dnd-kit, I had two options: either make the dragIcon draggable or make the container draggable. I went with making the container draggable, as this was the previous behaviour.
Making the container draggable came with some challenges, as the container contains a delete button and an undo button (after deletion). These buttons have their listeners, like onClick, which caused an issue as we wrap the whole container with dnd-kit listeners. So, if we click on the delete button, it won't trigger, as all the events are captured by the dnd-kit listener and are never passed down to the delete and undo buttons. So for this, we used sensors to make the draggable action active based on the distance of drag, i.e., move the container by 5 px, to make the draggable action active, which would make the dnd listener catch that event otherwise, the events are passed to delete and undo and work as expected.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE

AFTER

TESTING INSTRUCTIONS

1. Open a dashboard like world bank's data
2. Click on the filter button on the top left
3. Click on settings
4. The left panel is the FilterTitleContainer
5. Create new filters and you can drag and drop

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]

Bito Automatic Review Skipped - Branch Excluded

Bito didn't auto-review because the source or target branch is excluded from automatic reviews.
No action is needed if you didn't intend for the agent to review it. Otherwise, to manually trigger a review, type /review in a comment and save.
You can change the branch exclusion settings here, or contact your Bito workspace admin at [email protected].

[rusackas]

Looks like pre-commit needs to be run, and that will likely clear some of the other CI issues.

Superset uses Git pre-commit hooks courtesy of pre-commit. To install run the following:

pip3 install -r requirements/development.txt
pre-commit install

A series of checks will now run when you make a git commit.

Alternatively it is possible to run pre-commit by running pre-commit manually:

pre-commit run --all-files

[Copilot]

Pull request overview

This PR migrates the DraggableFilters component from the unmaintained react-dnd library to the modern dnd-kit library. The migration updates the drag-and-drop implementation to use hooks-based APIs while maintaining the existing behavior of making the entire container draggable.

Key changes:

• Replaced react-dnd hooks (useDrag, useDrop) with dnd-kit's useSortable hook
• Implemented pointer sensor with 5px activation constraint to prevent conflicts with delete/undo button click handlers
• Updated parent component to use DndContext and SortableContext wrappers

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
FilterTitleContainer.tsx	Wraps filter list with DndContext and SortableContext, adds handleDragEnd handler and sensor configuration
DraggableFilter.tsx	Replaces react-dnd implementation with dnd-kit's useSortable hook, simplifies drag logic

Comments suppressed due to low confidence (1)

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx:166

• The index and onRearrange props are still being passed to DraggableFilter but are no longer used by the component after the dnd-kit migration. Remove these props from the parent component call once the corresponding interface in DraggableFilter.tsx is updated.

          <DraggableFilter
            key={item}
            onRearrange={onRearrange}
            index={index}
            filterIds={[item]}
          >

[Copilot]

Duplicate import of FC from React. Line 19 imports both useRef and FC, while line 21 imports FC again. Remove the duplicate import on line 21 and the unused useRef import from line 19.

[Copilot]

The index and onRearrange props are defined in the interface but are no longer used in the component after migrating to dnd-kit. These should be removed from the interface since the parent component now handles rearrangement through the handleDragEnd function.

Suggested change

	index: number;
	filterIds: string[];
	onRearrange: (dragItemIndex: number, targetIndex: number) => void;
	filterIds: string[];

[Copilot]

Missing semicolon at the end of the return statement. Add a semicolon after the closing parenthesis for consistency with the rest of the codebase.

Suggested change

	)
	);

[rusackas]

Aside from the pre-commit needs, it looks like some of Copilot's notes are pretty sensible. Let us know if you think otherwise.