Merge branch '4587-fix-epic-issues-reordering' into 'master'

Fix reordering of items when moved to top or bottom

Closes #4587

See merge request gitlab-org/gitlab-ee!4050

app/assets/javascripts/issuable/related_issues/components/related_issues_block.vue

@@ -103,13 +103,38 @@ export default {
     toggleAddRelatedIssuesForm() {
       eventHub.$emit('toggleAddRelatedIssuesForm');
     },
+    getBeforeAfterId(newIndex, lastIndex) {
+      let beforeId = null;
+      let afterId = null;
+
+      if (newIndex === 0) {
+        // newIndex is 0, item was moved to top => send only afterId
+        afterId = this.relatedIssues[newIndex].epic_issue_id;
+      } else if (newIndex === lastIndex) {
+        // newIndex is lastIndex, item was moved to bottom => send only beforeId
+        beforeId = this.relatedIssues[newIndex].epic_issue_id;
+      } else {
+        // leave default
+        beforeId = this.relatedIssues[newIndex - 1].epic_issue_id;
+        afterId = this.relatedIssues[newIndex].epic_issue_id;
+      }
+
+      return {
+        beforeId,
+        afterId,
+      };
+    },
     reordered(event) {
       this.removeDraggingCursor();
+      const {
+        beforeId,
+        afterId,
+      } = this.getBeforeAfterId(event.newIndex, this.relatedIssues.length - 1);
 
       this.$emit('saveReorder', {
         issueId: parseInt(event.item.dataset.key, 10),
-        beforeId: this.relatedIssues[event.newIndex - 1].epic_issue_id,
-        afterId: this.relatedIssues[event.newIndex].epic_issue_id,
+        afterId,
+        beforeId,
       });
     },
     addDraggingCursor() {

changelogs/unreleased-ee/4587-fix-epic-issues-reordering.yml

+---
+title: Fix reordering of items when moved to top or bottom
+merge_request: 4050
+author:
+type: fixed

spec/javascripts/issuable/related_issues/components/related_issues_block_spec.js

@@ -4,6 +4,7 @@ import relatedIssuesBlock from '~/issuable/related_issues/components/related_iss
 
 const issuable1 = {
   id: 200,
+  epic_issue_id: 1,
   reference: 'foo/bar#123',
   displayReference: '#123',
   title: 'some title',
@@ -13,6 +14,7 @@ const issuable1 = {
 
 const issuable2 = {
   id: 201,
+  epic_issue_id: 2,
   reference: 'foo/bar#124',
   displayReference: '#124',
   title: 'some other thing',
@@ -20,6 +22,26 @@ const issuable2 = {
   state: 'opened',
 };
 
+const issuable3 = {
+  id: 202,
+  epic_issue_id: 3,
+  reference: 'foo/bar#125',
+  displayReference: '#125',
+  title: 'some other other thing',
+  path: '/foo/bar/issues/125',
+  state: 'opened',
+};
+
+const issuable4 = {
+  id: 203,
+  epic_issue_id: 4,
+  reference: 'foo/bar#126',
+  displayReference: '#126',
+  title: 'some other other other thing',
+  path: '/foo/bar/issues/126',
+  state: 'opened',
+};
+
 describe('RelatedIssuesBlock', () => {
   let RelatedIssuesBlock;
   let vm;
@@ -123,6 +145,9 @@ describe('RelatedIssuesBlock', () => {
         propsData: {
           relatedIssues: [
             issuable1,
+            issuable2,
+            issuable3,
+            issuable4,
           ],
         },
       }).$mount();
@@ -134,6 +159,24 @@ describe('RelatedIssuesBlock', () => {
       eventHub.$off('toggleAddRelatedIssuesForm', toggleAddRelatedIssuesFormSpy);
     });
 
+    it('reorder item correctly when an item is moved to the top', () => {
+      const beforeAfterIds = vm.getBeforeAfterId(0, 3);
+      expect(beforeAfterIds.beforeId).toBeNull();
+      expect(beforeAfterIds.afterId).toBe(1);
+    });
+
+    it('reorder item correctly when an item is moved to the bottom', () => {
+      const beforeAfterIds = vm.getBeforeAfterId(3, 3);
+      expect(beforeAfterIds.beforeId).toBe(4);
+      expect(beforeAfterIds.afterId).toBeNull();
+    });
+
+    it('reorder item correctly when an item is moved somewhere in the middle', () => {
+      const beforeAfterIds = vm.getBeforeAfterId(2, 3);
+      expect(beforeAfterIds.beforeId).toBe(2);
+      expect(beforeAfterIds.afterId).toBe(3);
+    });
+
     it('when expanding add related issue form', () => {
       expect(toggleAddRelatedIssuesFormSpy).not.toHaveBeenCalled();
       vm.toggleAddRelatedIssuesForm();