Update issue order in store upon reorder success

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;
   }