Merge branch 'issue-boards-dragging-fix' into 'master'

Fixed dragging issues on issue boards

## What does this MR do?

This fixes a few issues all at once:

- Fixes an issue when dragging an issue to a list but actually removes another issue from the original list
- Fixes an issue that caused the issue card to be appended to the bottom of the list
- Fixes an issue when dragging an issue would actually open up the sidebar

## What are the relevant issue numbers?

Closes #24654

See merge request !7701

app/assets/javascripts/boards/components/board_card.js.es6

@@ -54,6 +54,9 @@
       mouseDown () {
         this.showDetail = true;
       },
+      mouseMove() {
+        this.showDetail = false;
+      },
       showIssue (e) {
         const targetTagName = e.target.tagName.toLowerCase();
 

app/assets/javascripts/boards/components/board_list.js.es6

@@ -94,12 +94,10 @@
           gl.issueBoards.onStart();
         },
         onAdd: (e) => {
-          // Add the element back to original list to allow Vue to handle DOM updates
+          gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
-          e.from.appendChild(e.item);
 
           this.$nextTick(() => {
-            // Update the issues once we know the element has been moved
+            e.item.remove();
-            gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
           });
         },
       });

app/views/projects/boards/components/_board_list.html.haml

@@ -35,7 +35,7 @@
       ":issue" => "issue",
       ":issue-link-base" => "issueLinkBase",
       ":disabled" => "disabled",
-      "key" => "id" }
+      ":key" => "issue.id" }
     %li.board-list-count.text-center{ "v-if" => "showCount" }
       = icon("spinner spin", "v-show" => "list.loadingMore" )
       %span{ "v-if" => "list.issues.length === list.issuesSize" }

app/views/projects/boards/components/_card.html.haml

@@ -1,6 +1,7 @@
 %li.card{ ":class" => '{ "user-can-drag": !disabled && issue.id, "is-disabled": disabled || !issue.id, "is-active": issueDetailVisible }',
   ":index" => "index",
   "@mousedown" => "mouseDown",
+  "@mousemove" => "mouseMove",
   "@mouseup" => "showIssue($event)" }
   %h4.card-title
     = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")

changelogs/unreleased/issue-boards-dragging-fix.yml

@@ -0,0 +1,4 @@
+---
+title: Fixed issue boards dragging card removing random issues
+merge_request: 
+author: