Merge branch 'boards-issue-sorting' into 'master'

Fixed issue boards issue sorting when dragging issue into list

## What does this MR do?

Currently it just appends the new issue to the end of list & then sorts by priority which can cause some strange effects. For example if you drag the issue to the top of the list & then vue re-renders, the issue actually goes to the bottom.

This changes that by adding the issue at the specific index.

## Screenshots (if relevant)

![boards-sorting](/uploads/9aa4a0cb5e0be79e7d24ab2b6abb0bbb/boards-sorting.gif)

See merge request !7734

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

@@ -88,13 +88,13 @@
           const card = this.$refs.issue[e.oldIndex];
 
           card.showDetail = false;
-          Store.moving.issue = card.issue;
           Store.moving.list = card.list;
+          Store.moving.issue = Store.moving.list.findIssue(+e.item.dataset.issueId);
 
           gl.issueBoards.onStart();
         },
         onAdd: (e) => {
-          gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
+          gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue, e.newIndex);
 
           this.$nextTick(() => {
             e.item.remove();

app/assets/javascripts/boards/models/list.js.es6

@@ -106,9 +106,13 @@ class List {
     });
   }
 
-  addIssue (issue, listFrom) {
+  addIssue (issue, listFrom, newIndex) {
     if (!this.findIssue(issue.id)) {
+      if (newIndex !== undefined) {
+        this.issues.splice(newIndex, 0, issue);
+      } else {
         this.issues.push(issue);
+      }
 
       if (this.label) {
         issue.addLabel(this.label);

app/assets/javascripts/boards/stores/boards_store.js.es6

@@ -89,14 +89,14 @@
       });
       listFrom.update();
     },
-    moveIssueToList (listFrom, listTo, issue) {
+    moveIssueToList (listFrom, listTo, issue, newIndex) {
       const issueTo = listTo.findIssue(issue.id),
             issueLists = issue.getLists(),
             listLabels = issueLists.map( listIssue => listIssue.label );
 
       // Add to new lists issues if it doesn't already exist
       if (!issueTo) {
-        listTo.addIssue(issue, listFrom);
+        listTo.addIssue(issue, listFrom, newIndex);
       }
 
       if (listTo.type === 'done' && listFrom.type !== 'backlog') {

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

 %li.card{ ":class" => '{ "user-can-drag": !disabled && issue.id, "is-disabled": disabled || !issue.id, "is-active": issueDetailVisible }',
   ":index" => "index",
+  ":data-issue-id" => "issue.id",
   "@mousedown" => "mouseDown",
   "@mousemove" => "mouseMove",
   "@mouseup" => "showIssue($event)" }

changelogs/unreleased/boards-issue-sorting.yml

+---
+title: Fixed issue boards issue sorting when dragging issue into list
+merge_request: 
+author: