1 files changed, 28 insertions, 2 deletions
diff --git a/app/assets/javascripts/issuable_list/components/issuable_list_root.vue b/app/assets/javascripts/issuable_list/components/issuable_list_root.vue
index 40b0fcbb8c6..6b95c3a578e 100644
--- a/app/assets/javascripts/issuable_list/components/issuable_list_root.vue
+++ b/app/assets/javascripts/issuable_list/components/issuable_list_root.vue
@@ -10,7 +10,14 @@ import IssuableBulkEditSidebar from './issuable_bulk_edit_sidebar.vue';
 import IssuableItem from './issuable_item.vue';
 import IssuableTabs from './issuable_tabs.vue';
 
+const VueDraggable = () => import('vuedraggable');
+
 export default {
+  vueDraggableAttributes: {
+    animation: 200,
+    ghostClass: 'gl-visibility-hidden',
+    tag: 'ul',
+  },
   components: {
     GlSkeletonLoading,
     IssuableTabs,
@@ -18,6 +25,7 @@ export default {
     IssuableItem,
     IssuableBulkEditSidebar,
     GlPagination,
+    VueDraggable,
   },
   props: {
     namespace: {
@@ -127,6 +135,11 @@ export default {
       required: false,
       default: null,
     },
+    isManualOrdering: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -159,6 +172,9 @@ export default {
         return acc;
       }, []);
     },
+    issuablesWrapper() {
+      return this.isManualOrdering ? VueDraggable : 'ul';
+    },
   },
   watch: {
     issuables(list) {
@@ -202,11 +218,16 @@ export default {
     },
     handleIssuableCheckedInput(issuable, value) {
       this.checkedIssuables[this.issuableId(issuable)].checked = value;
+      this.$emit('update-legacy-bulk-edit');
     },
     handleAllIssuablesCheckedInput(value) {
       Object.keys(this.checkedIssuables).forEach((issuableId) => {
         this.checkedIssuables[issuableId].checked = value;
       });
+      this.$emit('update-legacy-bulk-edit');
+    },
+    handleVueDraggableUpdate({ newIndex, oldIndex }) {
+      this.$emit('reorder', { newIndex, oldIndex });
     },
   },
 };
@@ -253,13 +274,18 @@ export default {
           <gl-skeleton-loading />
         </li>
       </ul>
-      <ul
+      <component
+        :is="issuablesWrapper"
         v-if="!issuablesLoading && issuables.length"
         class="content-list issuable-list issues-list"
+        :class="{ 'manual-ordering': isManualOrdering }"
+        v-bind="$options.vueDraggableAttributes"
+        @update="handleVueDraggableUpdate"
       >
         <issuable-item
           v-for="issuable in issuables"
           :key="issuableId(issuable)"
+          :class="{ 'gl-cursor-grab': isManualOrdering }"
           :issuable-symbol="issuableSymbol"
           :issuable="issuable"
           :enable-label-permalinks="enableLabelPermalinks"
@@ -284,7 +310,7 @@ export default {
             <slot name="statistics" :issuable="issuable"></slot>
           </template>
         </issuable-item>
-      </ul>
+      </component>
       <slot v-if="!issuablesLoading && !issuables.length" name="empty-state"></slot>
       <gl-pagination
         v-if="showPaginationControls"