FIX: delay custom section reorder (#20799)

Reorder should start after 300ms.
In addition, pointer events should be blocked to not open link after reorder is finished.

app/assets/javascripts/discourse/app/components/sidebar/section.hbs

@@ -1,6 +1,6 @@
 {{#if this.displaySection}}
   <div
-    class={{concat "sidebar-section-wrapper sidebar-section" @class}}
+    class={{concat-class "sidebar-section-wrapper sidebar-section" @class}}
     data-section-name={{@sectionName}}
   >
     <div class="sidebar-section-header-wrapper sidebar-row">

app/assets/javascripts/discourse/app/components/sidebar/user/section-link.js

@@ -1,6 +1,7 @@
 import { tracked } from "@glimmer/tracking";
 import { bind } from "discourse-common/utils/decorators";
 import RouteInfoHelper from "discourse/lib/sidebar/route-info-helper";
+import discourseLater from "discourse-common/lib/later";
 
 export default class SectionLink {
   @tracked linkDragCss;
@@ -22,8 +23,22 @@ export default class SectionLink {
   }
 
   @bind
-  didStartDrag(e) {
-    this.mouseY = e.screenY;
+  didStartDrag(event) {
+    // 0 represents left button of the mouse
+    if (event.button === 0) {
+      this.willDrag = true;
+      discourseLater(() => {
+        this.delayedStart(event);
+      }, 300);
+    }
+  }
+  delayedStart(event) {
+    if (this.willDrag) {
+      this.mouseY = event.y;
+      this.linkDragCss = "drag";
+      this.section.disable();
+      this.drag = true;
+    }
   }
 
   @bind
@@ -32,11 +47,16 @@ export default class SectionLink {
     this.mouseY = null;
     this.section.enable();
     this.section.reorder();
+    this.willDrag = false;
+    this.drag = false;
   }
 
   @bind
-  dragMove(e) {
-    const currentMouseY = e.screenY;
+  dragMove(event) {
+    if (!this.drag) {
+      return;
+    }
+    const currentMouseY = event.y;
     const distance = currentMouseY - this.mouseY;
     if (!this.linkHeight) {
       this.linkHeight = document.getElementsByClassName(
@@ -55,7 +75,5 @@ export default class SectionLink {
         this.mouseY = currentMouseY;
       }
     }
-    this.linkDragCss = "drag";
-    this.section.disable();
   }
 }

app/assets/javascripts/discourse/app/modifiers/draggable.js

@@ -22,6 +22,9 @@ export default class DraggableModifier extends Modifier {
     this.element.addEventListener("mousedown", this.dragMove, {
       passive: false,
     });
+    this.element.addEventListener("dragenter", this.dragMove, {
+      passive: false,
+    });
   }
 
   @bind
@@ -38,6 +41,7 @@ export default class DraggableModifier extends Modifier {
       // Register a global event to capture mouse moves when element 'clicked'.
       document.addEventListener("touchmove", this.drag, { passive: false });
       document.addEventListener("mousemove", this.drag, { passive: false });
+      document.addEventListener("dragover", this.drag, { passive: false });
       document.body.classList.add("dragging");
 
       // On leaving click, stop moving.
@@ -47,6 +51,9 @@ export default class DraggableModifier extends Modifier {
       document.addEventListener("mouseup", this.didEndDrag, {
         passive: false,
       });
+      document.addEventListener("drop", this.didEndDrag, {
+        passive: false,
+      });
     }
   }
 
@@ -64,6 +71,7 @@ export default class DraggableModifier extends Modifier {
 
       document.removeEventListener("touchmove", this.drag);
       document.removeEventListener("mousemove", this.drag);
+      document.removeEventListener("dragover", this.drag);
 
       document.body.classList.remove("dragging");
       this.hasStarted = false;
@@ -73,10 +81,13 @@ export default class DraggableModifier extends Modifier {
   cleanup() {
     document.removeEventListener("touchstart", this.dragMove);
     document.removeEventListener("mousedown", this.dragMove);
+    document.removeEventListener("dragenter", this.dragMove);
     document.removeEventListener("touchend", this.didEndDrag);
     document.removeEventListener("mouseup", this.didEndDrag);
+    document.removeEventListener("drop", this.didEndDrag);
     document.removeEventListener("mousemove", this.drag);
     document.removeEventListener("touchmove", this.drag);
+    document.removeEventListener("dragover", this.drag);
     document.body.classList.remove("dragging");
   }
 }

app/assets/stylesheets/common/base/sidebar-custom-section.scss

@@ -16,6 +16,9 @@
   }
 
   .sidebar-section-wrapper.disabled {
+    a {
+      pointer-events: none;
+    }
     .sidebar-section-link-wrapper {
       .sidebar-section-link-prefix.icon,
       .sidebar-section-link {

spec/system/custom_sidebar_sections_spec.rb

@@ -116,7 +116,7 @@ describe "Custom sidebar sections", type: :system, js: true do
 
     tags_link = find(".sidebar-section-link-sidebar-tags")
     categories_link = find(".sidebar-section-link-sidebar-categories")
-    tags_link.drag_to(categories_link)
+    tags_link.drag_to(categories_link, html5: true, delay: 0.4)
 
     within(".sidebar-custom-sections .sidebar-section-link-wrapper:nth-child(1)") do
       expect(page).to have_css(".sidebar-section-link-sidebar-categories")