Skip to content

Fix drag and drop list item bugs

Coung Ngo requested to merge cngo-fix-drag-list-item-bugs into master

What does this MR do and why?

This MR fixes a few bugs associated with the issue description list item drag and drop feature in !85936 (merged)

  1. Fix multi-paragraph list items alignment
  2. Fix reordering a multi-paragraph list item
  3. Fix UX issue so the drag icon no longer appears for a single list item
  4. Fix bug so drag and drop only exists on the issue page (and not on the epic page)

Changelog: fixed

Markdown used for testing:
1. asdf

   ![asdf](https://www.gravatar.com/avatar/e36bb240c9ca98c34d9677d6253eb1ad?s=80&d=identicon)

1. zccxv

   indented text

   ```
   const a = 'code';
   const b = a;
   ```

   ```math
   a^2+b^2=c^2
   ```

   > blockquote

   ### header

   ---

   | header | header |
   | ------ | ------ |
   | cell | cell |
   | cell | cell |

   ![Sample Video](img/markdown_video.mp4)

   another paragraph indented

1. labore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minimalabore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minimalabore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minimalabore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minima
   
   labore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minima

   labore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minima labore deleniti nihil eveniet voluptatem ut minima

Screenshots or screen recordings

before after
Screenshot_2022-05-18_at_12.51.01_pm Screenshot_2022-05-18_at_12.48.58_pm
Screenshot_2022-05-18_at_12.51.13_pm Screenshot_2022-05-18_at_12.49.10_pm

Video of reordering multi-paragraph list items (GDK was slow for some reason so it took a while for the issue description to save on reorder)

Screen_Recording_2022-05-19_at_9.14.08_pm

How to set up and validate locally

  1. Visit an issue page such as http://127.0.0.1:3000/h5bp/html5-boilerplate/-/issues/1
  2. Update the issue description to have multi-paragraph list items
  3. Test the MR

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Coung Ngo

Merge request reports