Port backlogs drag and drop to Stimulus

Replace the previous Dragula-oriented card/list wiring with Pragmatic
Drag and Drop Stimulus controllers for backlog cards and list targets.

Keep draggable card state client-side, submit moves through the existing
backlogs move endpoints, and tolerate empty drop-target reports by
resolving the element under the pointer.

Render the draggable attribute and Stimulus item id from the server so
Turbo morphs preserve the DnD contract.

Author: myabc

app/components/open_project/common/work_package_card_box_component.rb

@@ -110,13 +110,8 @@ def initialize(work_packages:, project:, container:, current_user: User.current,
         @system_arguments[:data] = merge_data(
           {
             data: {
-              # Sprint historically used "container" alone. The shared box keeps the
-              # first mirror container on the page for now until parent-specific DnD
-              # handling is extracted in follow-up work.
-              generic_drag_and_drop_target: "container mirrorContainer",
-              target_container_accessor: ":scope > ul",
-              target_id: drop_target_id,
-              target_allowed_drag_type: "story"
+              backlogs_target: "list",
+              backlogs_target_id: drop_target_id
             }
           },
           @system_arguments

app/components/open_project/common/work_package_card_component.html.erb

@@ -27,7 +27,11 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++# %>
 
-<%= grid_layout("op-work-package-card", tag: :article) do |grid| %>
+<%= grid_layout(
+      "op-work-package-card",
+      tag: :article,
+      **card_arguments
+    ) do |grid| %>
   <% grid.with_area(:info_line) do %>
     <%= render(WorkPackages::InfoLineComponent.new(work_package:)) %>
   <% end %>

app/components/open_project/common/work_package_card_component.rb

@@ -66,6 +66,30 @@ def row_args
         }
       end
 
+      def card_data
+        base = {
+          controller: "backlogs--story",
+          backlogs__story_id_value: work_package.id,
+          backlogs__story_split_url_value: split_url,
+          backlogs__story_full_url_value: full_url,
+          backlogs__story_selected_class: "Box-row--blue"
+        }
+
+        return base unless draggable?
+
+        base.merge(
+          controller: "#{base[:controller]} backlogs--item",
+          backlogs__item_item_id_value: work_package.id,
+          drop_url:
+        )
+      end
+
+      def card_arguments
+        { data: card_data }.tap do |args|
+          args[:draggable] = true if draggable?
+        end
+      end
+
       private
 
       def story_points
@@ -114,26 +138,8 @@ def row_classes
         )
       end
 
-      # `story` data attrs match the live Stimulus controller and Dragula drag-type;
-      # renaming requires coordinated JS changes (separate PR).
       def row_data
-        base = {
-          story: true,
-          controller: "backlogs--story",
-          backlogs__story_id_value: work_package.id,
-          backlogs__story_split_url_value: split_url,
-          backlogs__story_full_url_value: full_url,
-          backlogs__story_selected_class: "Box-row--blue",
-          test_selector: "work-package-#{work_package.id}"
-        }
-
-        return base unless draggable?
-
-        base.merge(
-          draggable_id: work_package.id,
-          draggable_type: "story",
-          drop_url:
-        )
+        { test_selector: "work-package-#{work_package.id}" }
       end
     end
   end

frontend/src/stimulus/controllers/dynamic/backlogs.controller.ts

@@ -27,35 +27,118 @@
 //++
 
 import { Controller } from '@hotwired/stimulus';
-import { FrameElement } from '@hotwired/turbo';
-import { HalEventsService } from 'core-app/features/hal/services/hal-events.service';
-import { filter, Subscription } from 'rxjs';
+import { FetchRequest } from '@rails/request.js';
+import { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types';
+import { dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { debugLog } from 'core-app/shared/helpers/debug_output';
+
+import {
+  buildMoveFormData,
+  isItemData,
+  resolveFallbackDropTarget,
+  resolveListPreviousItemId,
+  resolveListTargetId,
+  resolvePreviousItemId,
+} from './backlogs/drag-and-drop';
 
 export default class BacklogsController extends Controller<HTMLElement> {
-  private service:HalEventsService|null = null;
-  private subscription:Subscription|null = null;
+  static targets = ['list'];
+
+  declare readonly listTargets:HTMLElement[];
 
-  // eslint-disable-next-line @typescript-eslint/no-misused-promises
-  async connect() {
-    const { services: { halEvents } } = await window.OpenProject.getPluginContext();
+  private cleanupFn?:CleanupFn;
+  private listCleanupFns = new Map<HTMLElement, CleanupFn>();
 
-    this.service = halEvents;
-    this.subscription = this.service.aggregated$('WorkPackage')
-      .pipe(filter((events) => events.some((event) => event.eventType === 'updated')))
-      .subscribe(() => { this.refreshList(); });
+  connect():void {
+    this.cleanupFn = monitorForElements({
+      canMonitor: ({ source }) => isItemData(source.data),
+      onDrop: (args) => {
+        void this.handleDrop(args);
+      },
+    });
   }
 
-  disconnect() {
-    this.subscription?.unsubscribe();
-    this.subscription = null;
-    this.service = null;
+  disconnect():void {
+    this.cleanupFn?.();
+    this.cleanupFn = undefined;
+    this.listCleanupFns.forEach((cleanup) => cleanup());
+    this.listCleanupFns.clear();
   }
 
-  private refreshList() {
-    void this.listElement.reload();
+  listTargetConnected(element:HTMLElement):void {
+    const cleanup = dropTargetForElements({
+      element,
+      canDrop: ({ source }) => isItemData(source.data),
+      getData: () => ({ type: 'list', targetId: resolveListTargetId(element) }),
+      getIsSticky: () => true,
+    });
+
+    this.listCleanupFns.set(element, cleanup);
   }
 
-  private get listElement() {
-    return this.element.querySelector<FrameElement>('#backlogs_container')!;
+  listTargetDisconnected(element:HTMLElement):void {
+    this.listCleanupFns.get(element)?.();
+    this.listCleanupFns.delete(element);
+  }
+
+  private async handleDrop({ location, source }:Parameters<NonNullable<Parameters<typeof monitorForElements>[0]['onDrop']>>[0]) {
+    if (!isItemData(source.data) || !(source.element instanceof HTMLElement)) {
+      return;
+    }
+
+    const dropUrl = source.element.getAttribute('data-drop-url');
+    if (!dropUrl) {
+      return;
+    }
+
+    const targetItem = location.current.dropTargets.find(({ data, element }) => (
+      isItemData(data) && element instanceof HTMLElement
+    ));
+    const fallbackTarget = location.current.dropTargets.length === 0
+      ? resolveFallbackDropTarget({ input: location.current.input, root: this.element })
+      : null;
+    const fallbackItem = fallbackTarget?.isItem ? fallbackTarget : null;
+    const resolvedTargetItem = targetItem ?? fallbackItem;
+    const targetElement = resolvedTargetItem?.element ?? location.current.dropTargets[0]?.element ?? fallbackTarget?.element;
+
+    if (!(targetElement instanceof HTMLElement)) {
+      return;
+    }
+
+    const targetId = resolveListTargetId(targetElement);
+    if (!targetId) {
+      return;
+    }
+
+    const previousItemId = resolvedTargetItem?.element instanceof HTMLElement
+      ? resolvePreviousItemId({
+        sourceItemId: source.data.itemId,
+        targetItem: resolvedTargetItem.element,
+        closestEdge: extractClosestEdge(resolvedTargetItem.data),
+      })
+      : resolveListPreviousItemId({
+        sourceItemId: source.data.itemId,
+        list: targetElement,
+      });
+
+    const request = new FetchRequest(
+      'put',
+      dropUrl,
+      {
+        body: buildMoveFormData({ targetId, previousItemId }),
+        responseKind: 'turbo-stream',
+      },
+    );
+
+    try {
+      const response = await request.perform();
+
+      if (!response.ok) {
+        debugLog(`Failed to move backlogs item: ${response.statusCode}`);
+      }
+    } catch (error) {
+      debugLog('Failed to move backlogs item due to request error', error);
+    }
   }
 }