Add ability to reorder issues in epic

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

@@ -162,7 +162,7 @@ export default {
       v-tooltip
       ref="removeButton"
       type="button"
-      class="js-issue-token-remove-button"
+      class="js-issue-token-remove-button flex-right sortable-hidden"
       :class="{
         'issue-token-remove-button': isCondensed,
         'btn btn-default': !isCondensed

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

@@ -7,7 +7,6 @@ import addIssuableForm from './add_issuable_form.vue';
 
 export default {
   name: 'RelatedIssuesBlock',
-
   props: {
     isFetching: {
       type: Boolean,
@@ -29,6 +28,11 @@ export default {
       required: false,
       default: false,
     },
+    canReorder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isFormVisible: {
       type: Boolean,
       required: false,
@@ -60,17 +64,14 @@ export default {
       default: 'Related issues',
     },
   },
-
   directives: {
     tooltip,
   },
-
   components: {
     loadingIcon,
     addIssuableForm,
     issueToken,
   },
-
   computed: {
     hasRelatedIssues() {
       return this.relatedIssues.length > 0;
@@ -88,11 +89,23 @@ export default {
       return this.helpPath.length > 0;
     },
   },
-
   methods: {
     toggleAddRelatedIssuesForm() {
       eventHub.$emit('toggleAddRelatedIssuesForm');
     },
+    reordered(event) {
+      console.log(event);
+    },
+  },
+  mounted() {
+    if (this.canReorder) {
+      this.sortable = Sortable.create(this.$refs.list, {
+        animation: 200,
+        ghostClass: 'is-ghost',
+        chosenClass: "sortable-chosen",
+        onEnd: this.reordered,
+      });
+    }
   },
 };
 </script>
@@ -161,11 +174,15 @@ export default {
             label="Fetching related issues" />
         </div>
         <ul
-          class="flex-list content-list issuable-list">
+          ref="list"
+          class="flex-list content-list issuable-list"
+        >
           <li
             :key="issue.id"
             v-for="issue in relatedIssues"
-            class="js-related-issues-token-list-item">
+            class="js-related-issues-token-list-item"
+            :class="{ 'is-dragging': canReorder }"
+          >
             <issue-token
               event-namespace="relatedIssue"
               :id-key="issue.id"

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

@@ -45,6 +45,11 @@ export default {
       required: false,
       default: false,
     },
+    canReorder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     helpPath: {
       type: String,
       required: false,
@@ -228,6 +233,7 @@ export default {
     :is-submitting="isSubmitting"
     :related-issues="state.relatedIssues"
     :can-admin="canAdmin"
+    :can-reorder="canReorder"
     :pending-references="state.pendingReferences"
     :is-form-visible="isFormVisible"
     :input-value="inputValue"

app/assets/stylesheets/framework.scss

@@ -59,3 +59,4 @@
 @import "framework/memory_graph";
 @import "framework/responsive_tables";
 @import "framework/stacked-progress-bar";
+@import "framework/sortable";

app/assets/stylesheets/framework/sortable.scss

+.sortable-chosen .sortable-hidden {
+  display: none;
+}

app/assets/stylesheets/pages/issuable.scss

@@ -664,7 +664,6 @@
       padding-right: $gl-padding;
 
       .issue-main-info {
-        flex: 1 auto;
         margin-right: 10px;
         min-width: 0;
       }

ee/app/assets/javascripts/epics/epic_show/components/epic_show_app.vue

@@ -140,6 +140,7 @@
       <related-issues-root
         :endpoint="issueLinksEndpoint"
         :can-admin="canAdmin"
+        :can-reorder="canAdmin"
         :allow-auto-complete="false"
         title="Issues"
       />