Add latest changes from gitlab-org/gitlab@master

2 files changed, 60 insertions, 3 deletions

diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index 54ce736e26b..a768cd833ad 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -1,10 +1,13 @@
 <script>
+import Draggable from 'vuedraggable';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { sortBy } from 'lodash';
 import { GlAlert } from '@gitlab/ui';
 import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
 import BoardColumnNew from './board_column_new.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import defaultSortableConfig from '~/sortable/sortable_config';
+import { sortableEnd, sortableStart } from '~/boards/mixins/sortable_default_options';
 
 export default {
   components: {
@@ -36,6 +39,25 @@ export default {
         ? sortBy([...Object.values(this.boardLists)], 'position')
         : this.lists;
     },
+    canDragColumns() {
+      return this.glFeatures.graphqlBoardLists && this.canAdminList;
+    },
+    boardColumnWrapper() {
+      return this.canDragColumns ? Draggable : 'div';
+    },
+    draggableOptions() {
+      const options = {
+        ...defaultSortableConfig,
+        disabled: this.disabled,
+        draggable: '.is-draggable',
+        fallbackOnBody: false,
+        group: 'boards-list',
+        tag: 'div',
+        value: this.lists,
+      };
+
+      return this.canDragColumns ? options : {};
+    },
   },
   mounted() {
     if (this.glFeatures.graphqlBoardLists) {
@@ -43,7 +65,26 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['showPromotionList']),
+    ...mapActions(['moveList', 'showPromotionList']),
+    handleDragOnStart() {
+      sortableStart();
+    },
+
+    handleDragOnEnd(params) {
+      sortableEnd();
+
+      const { item, newIndex, oldIndex, to } = params;
+
+      const listId = item.dataset.id;
+      const replacedListId = to.children[newIndex].dataset.id;
+
+      this.moveList({
+        listId,
+        replacedListId,
+        newIndex,
+        adjustmentValue: newIndex < oldIndex ? 1 : -1,
+      });
+    },
   },
 };
 </script>
@@ -53,16 +94,28 @@ export default {
     <gl-alert v-if="error" variant="danger" :dismissible="false">
       {{ error }}
     </gl-alert>
-    <div v-if="!isSwimlanesOn" class="boards-list gl-w-full gl-py-5 gl-px-3 gl-white-space-nowrap">
+    <component
+      :is="boardColumnWrapper"
+      v-if="!isSwimlanesOn"
+      ref="list"
+      v-bind="draggableOptions"
+      class="boards-list gl-w-full gl-py-5 gl-px-3 gl-white-space-nowrap"
+      data-qa-selector="boards_list"
+      @start="handleDragOnStart"
+      @end="handleDragOnEnd"
+    >
       <board-column
         v-for="list in boardListsToUse"
         :key="list.id"
         ref="board"
         :can-admin-list="canAdminList"
+        :class="{
+          'is-draggable': !list.preset,
+        }"
         :list="list"
         :disabled="disabled"
       />
-    </div>
+    </component>
 
     <template v-else>
       <epics-swimlanes
diff --git a/app/assets/javascripts/boards/stores/actions.js b/app/assets/javascripts/boards/stores/actions.js
index 00c64bff74e..2b6d606c56e 100644
--- a/app/assets/javascripts/boards/stores/actions.js
+++ b/app/assets/javascripts/boards/stores/actions.js
@@ -180,6 +180,10 @@ export default {
     { state, commit, dispatch },
     { listId, replacedListId, newIndex, adjustmentValue },
   ) => {
+    if (listId === replacedListId) {
+      return;
+    }
+
     const { boardLists } = state;
     const backupList = { ...boardLists };
     const movedList = boardLists[listId];