rubaizmomin opened a new pull request, #36778:
URL: https://github.com/apache/superset/pull/36778

   <!---
   Please write the PR title following the conventions at 
https://www.conventionalcommits.org/en/v1.0.0/
   Example:
   fix(dashboard): load charts correctly
   -->
   
   ### 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
   
![before](https://github.com/user-attachments/assets/15428e71-e410-43ba-bde5-242d181774c3)
   AFTER
   
![filterlist](https://github.com/user-attachments/assets/fb2b7b7b-1c61-42cb-8afd-f575d7a57f4d)
   
   ### TESTING INSTRUCTIONS
   <!--- Required! What steps can be taken to manually verify the changes? -->
   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
   <!--- Check any relevant boxes with "x" -->
   <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
   - [ ] Has associated issue: 
   - [ ] Required feature flags:
   - [x] Changes UI
   - [ ] Includes DB Migration (follow approval process in 
[SIP-59](https://github.com/apache/superset/issues/13351))
     - [ ] 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
   


-- 
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]

Reply via email to