Merge branch '4716-preserve-issue-order' into 'master'

Preserve updated issue order to store when reorder is completed

Closes #4716

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

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

@@ -115,9 +115,12 @@ export default {
     reordered(event) {
       this.removeDraggingCursor();
       const { beforeId, afterId } = this.getBeforeAfterId(event.item);
+      const { oldIndex, newIndex } = event;
 
       this.$emit('saveReorder', {
         issueId: parseInt(event.item.dataset.key, 10),
+        oldIndex,
+        newIndex,
         afterId,
         beforeId,
       });

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

@@ -176,7 +176,7 @@ export default {
           Flash('An error occurred while fetching issues.');
         });
     },
-    saveIssueOrder({ issueId, beforeId, afterId }) {
+    saveIssueOrder({ issueId, beforeId, afterId, oldIndex, newIndex }) {
       const issueToReorder = _.find(this.state.relatedIssues, issue => issue.id === issueId);
 
       if (issueToReorder) {
@@ -184,7 +184,14 @@ export default {
           endpoint: issueToReorder.relation_path,
           move_before_id: beforeId,
           move_after_id: afterId,
-        }).catch(() => {
+        })
+        .then(res => res.json())
+        .then((res) => {
+          if (!res.message) {
+            this.store.updateIssueOrder(oldIndex, newIndex);
+          }
+        })
+        .catch(() => {
           Flash('An error occurred while reordering issues.');
         });
       }

app/assets/javascripts/issuable/related_issues/stores/related_issues_store.js

@@ -16,6 +16,13 @@ class RelatedIssuesStore {
     this.state.relatedIssues = this.state.relatedIssues.filter(issue => issue.id !== idToRemove);
   }
 
+  updateIssueOrder(oldIndex, newIndex) {
+    if (this.state.relatedIssues.length > 0) {
+      const updatedIssue = this.state.relatedIssues.splice(oldIndex, 1)[0];
+      this.state.relatedIssues.splice(newIndex, 0, updatedIssue);
+    }
+  }
+
   setPendingReferences(issues) {
     this.state.pendingReferences = issues;
   }

changelogs/unreleased-ee/4716-preserve-issue-order.yml

+---
+title: Preserve updated issue order to store when reorder is completed
+merge_request: 4278
+author:
+type: fixed

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

@@ -2,55 +2,7 @@ import Vue from 'vue';
 import eventHub from '~/issuable/related_issues/event_hub';
 import relatedIssuesBlock from '~/issuable/related_issues/components/related_issues_block.vue';
 
-const issuable1 = {
-  id: 200,
-  epic_issue_id: 1,
-  reference: 'foo/bar#123',
-  displayReference: '#123',
-  title: 'some title',
-  path: '/foo/bar/issues/123',
-  state: 'opened',
-};
-
-const issuable2 = {
-  id: 201,
-  epic_issue_id: 2,
-  reference: 'foo/bar#124',
-  displayReference: '#124',
-  title: 'some other thing',
-  path: '/foo/bar/issues/124',
-  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',
-};
-
-const issuable5 = {
-  id: 204,
-  epic_issue_id: 5,
-  reference: 'foo/bar#127',
-  displayReference: '#127',
-  title: 'some other other other thing',
-  path: '/foo/bar/issues/127',
-  state: 'opened',
-};
+import { issuable1, issuable2, issuable3, issuable4, issuable5 } from '../mock_data';
 
 describe('RelatedIssuesBlock', () => {
   let RelatedIssuesBlock;

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

@@ -3,29 +3,7 @@ import _ from 'underscore';
 import relatedIssuesRoot from '~/issuable/related_issues/components/related_issues_root.vue';
 import relatedIssuesService from '~/issuable/related_issues/services/related_issues_service';
 
-const defaultProps = {
-  endpoint: '/foo/bar/issues/1/related_issues',
-  currentNamespacePath: 'foo',
-  currentProjectPath: 'bar',
-};
-
-const issuable1 = {
-  id: 200,
-  reference: 'foo/bar#123',
-  title: 'issue1',
-  path: '/foo/bar/issues/123',
-  state: 'opened',
-  relation_path: '/foo/bar/issues/123/related_issues/1',
-};
-
-const issuable2 = {
-  id: 201,
-  reference: 'foo/bar#124',
-  title: 'issue1',
-  path: '/foo/bar/issues/124',
-  state: 'opened',
-  relation_path: '/foo/bar/issues/124/related_issues/1',
-};
+import { defaultProps, issuable1, issuable2 } from '../mock_data';
 
 describe('RelatedIssuesRoot', () => {
   let RelatedIssuesRoot;

spec/javascripts/issuable/related_issues/mock_data.js

+export const defaultProps = {
+  endpoint: '/foo/bar/issues/1/related_issues',
+  currentNamespacePath: 'foo',
+  currentProjectPath: 'bar',
+};
+
+export const issuable1 = {
+  id: 200,
+  epic_issue_id: 1,
+  reference: 'foo/bar#123',
+  displayReference: '#123',
+  title: 'some title',
+  path: '/foo/bar/issues/123',
+  state: 'opened',
+};
+
+export const issuable2 = {
+  id: 201,
+  epic_issue_id: 2,
+  reference: 'foo/bar#124',
+  displayReference: '#124',
+  title: 'some other thing',
+  path: '/foo/bar/issues/124',
+  state: 'opened',
+};
+
+export 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',
+};
+
+export 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',
+};
+
+export const issuable5 = {
+  id: 204,
+  epic_issue_id: 5,
+  reference: 'foo/bar#127',
+  displayReference: '#127',
+  title: 'some other other other thing',
+  path: '/foo/bar/issues/127',
+  state: 'opened',
+};

spec/javascripts/issuable/related_issues/stores/related_issues_store_spec.js

 import RelatedIssuesStore from '~/issuable/related_issues/stores/related_issues_store';
 
-const issuable1 = {
-  id: 200,
-  reference: 'foo/bar#123',
-  title: 'issue1',
-  path: '/foo/bar/issues/123',
-  state: 'opened',
-  relation_path: '/foo/bar/issues/123/related_issues/1',
-};
-
-const issuable2 = {
-  id: 201,
-  reference: 'foo/bar#124',
-  title: 'issue1',
-  path: '/foo/bar/issues/124',
-  state: 'opened',
-  relation_path: '/foo/bar/issues/124/related_issues/1',
-};
+import { issuable1, issuable2, issuable3, issuable4, issuable5 } from '../mock_data';
 
 describe('RelatedIssuesStore', () => {
   let store;
@@ -58,6 +42,17 @@ describe('RelatedIssuesStore', () => {
     });
   });
 
+  describe('updateIssueOrder', () => {
+    it('updates issue order', () => {
+      const relatedIssues = [issuable1, issuable2, issuable3, issuable4, issuable5];
+      store.state.relatedIssues = relatedIssues;
+
+      expect(store.state.relatedIssues[3].id).toBe(issuable4.id);
+      store.updateIssueOrder(3, 0);
+      expect(store.state.relatedIssues[0].id).toBe(issuable4.id);
+    });
+  });
+
   describe('setPendingReferences', () => {
     it('defaults to empty array', () => {
       expect(store.state.pendingReferences).toEqual([]);