feat: add drag n drop functionality to section cards

[steff456]

Resolves private ref: BB-8219

This PR,

• Adds an endpoint for reordering the list of sections
• Adds the functionality for drag and drop the sections cards
• Adds new tests for the functionality

Demo

Grabacion.de.pantalla.desde.05-12-23.22.51.02.mp4

Depends on

• feat: course outline section list #12

Testing instructions

• Follow instructions from the readme
• Checkout branch from feat: create DRF endpoint to get course index context openedx/edx-platform#33667 and run make cms-up in devstack.
• Open any course outline by using this url format: http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/outline
• Drag and drop sections among them!

Questions

• I'm unsure if there's any preference on the style of the draggable objects, in the other front end they are using three dots so the users can understand they are able to drag and drop the cards.
• The same question goes for the drag animation, right now it is using the default

[navinkarkera]

@steff456 Even though I like that the custom drag-n-drop implementation, we should probably use something like react-DnD as the current implementation is bit confusing as their is no indication about the drop position and implementing it by hand will require a lot more effort and time. See this example, we want something similar. Also, after dropping an item it should not go back to its original position and wait for the API to complete, instead it should update the UI first and then update the backend via API and if for some reason the API call fails, we display an error message (which is already handled in exception handling).

I'm unsure if there's any preference on the style of the draggable objects, in the other front end they are using three dots so the users can understand they are able to drag and drop the cards.

We don't need to add the three dots as per the new design. The curson already updates as expected so we don't need any changes in UI.

The same question goes for the drag animation, right now it is using the default

We can keep the default animation for now from the example

[steff456]

@navinkarkera I'll modify the implementation to use react-dnd and ping you once it is ready :)

[steff456]

@navinkarkera I just updated to use dnd-react library, I also updated the demo video in the description. With this changes now the UI updates first and then it sends the new order to the backend and now the animation is the same as the example you provided.

Tomorrow I'll work on adding some tests :)

[navinkarkera]

@steff456 Thanks, I just pushed a commit to fix multiple requests on hover issue.

I see ~43 new commits as you seem to have use merge commit instead of rebasing with the base branch. Can you try to create a new branch from the base and cherry pick your and my last commit to cleanup the commit history?

[navinkarkera]

@steff456 Almost there. We have one more issue where if you try to select text via dragging the mouse in title while editing it, it drags the whole section. Maybe this issue can help fixing it: react-dnd/react-dnd#335

[steff456]

@navinkarkera the last commit fixes the text editing issue. Please let me know if there's anything else this PR needs.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (navin/course-outline/section@f181ca1). Click here to learn what that means.

❗ Current head 6760328 differs from pull request most recent head 8371ce1. Consider uploading reports for the commit 8371ce1 to get more accurate results

Additional details and impacted files

@@                       Coverage Diff                       @@
##             navin/course-outline/section      #17   +/-   ##
===============================================================
  Coverage                                ?   87.94%           
===============================================================
  Files                                   ?      482           
  Lines                                   ?     7542           
  Branches                                ?     1603           
===============================================================
  Hits                                    ?     6633           
  Misses                                  ?      880           
  Partials                                ?       29           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[navinkarkera]

@steff456 The functionality now works as expected. We have an issue in firefox where the text inside the form cannot be selected. We can address this in a separate ticket as HTML5 drag n drop has some issues with firefox. For now it looks good.

We should add some tests (probably in CourseOutline.test.jsx) to test ordering when it runs successfully as well as when something goes wrong (restoreCallback).

[steff456]

@navinkarkera now we have tests for the endpoints, as well I rebased this PR with the changes you made recently in your base branch.

Please let me know what else is needed for this PR to be ready!

[steff456]

@navinkarkera I just updated this branch with the latest changes of the base branch. I had to do some modifications for the scroll to work with the drag and drop given that both were using refs and useEffect simultaneously, but everything is working as expected now. The CI failed because of coverage, which I suspect is because of the fork and base branch PR.

Please let me know if there's anything else needed in this PR for merging!

[navinkarkera]

@steff456 The scrolling was not working properly after deleting a section. Also it broke scrolling for subsections.

I pushed a fix such that the page will only scroll if the element is not visible and it will align based on the position of the element in the screen. Now it works for both sections and subsections.

I'll merge this now. Thanks for you work!

[steff456]

Thanks for all the review @navinkarkera! 🎉