Epic board list reorder

Add ability to reorder lists on epic boards using drag and drop

app/assets/javascripts/boards/components/board_content.vue

@@ -48,7 +48,7 @@ export default {
         : this.lists;
     },
     canDragColumns() {
-      return !this.isEpicBoard && this.glFeatures.graphqlBoardLists && this.canAdminList;
+      return (this.isEpicBoard || this.glFeatures.graphqlBoardLists) && this.canAdminList;
     },
     boardColumnWrapper() {
       return this.canDragColumns ? Draggable : 'div';
@@ -79,8 +79,6 @@ export default {
 
     handleDragOnEnd(params) {
       sortableEnd();
-      if (this.isEpicBoard) return;
-
       const { item, newIndex, oldIndex, to } = params;
 
       const listId = item.dataset.id;

app/assets/javascripts/boards/components/board_list_header.vue

@@ -84,7 +84,7 @@ export default {
       return this.list?.label?.description || this.list?.assignee?.name || this.list.title || '';
     },
     showListHeaderButton() {
-      return !this.disabled && this.listType !== ListType.closed;
+      return !this.disabled && this.listType !== ListType.closed && !this.isEpicBoard;
     },
     showMilestoneListDetails() {
       return this.listType === ListType.milestone && this.list.milestone && this.showListDetails;
@@ -161,7 +161,7 @@ export default {
       const collapsed = !this.list.collapsed;
       this.toggleListCollapsed({ listId: this.list.id, collapsed });
 
-      if (!this.isLoggedIn || this.isEpicBoard) {
+      if (!this.isLoggedIn) {
         this.addToLocalStorage();
       } else {
         this.updateListFunction();

app/assets/javascripts/boards/constants.js

@@ -2,6 +2,7 @@ import { __ } from '~/locale';
 import updateEpicSubscriptionMutation from '~/sidebar/queries/update_epic_subscription.mutation.graphql';
 import updateEpicTitleMutation from '~/sidebar/queries/update_epic_title.mutation.graphql';
 import boardBlockingIssuesQuery from './graphql/board_blocking_issues.query.graphql';
+import updateBoardListMutation from './graphql/board_list_update.mutation.graphql';
 import issueSetSubscriptionMutation from './graphql/issue_set_subscription.mutation.graphql';
 import issueSetTitleMutation from './graphql/issue_set_title.mutation.graphql';
 
@@ -71,6 +72,12 @@ export const blockingIssuablesQueries = {
   },
 };
 
+export const updateListQueries = {
+  [issuableTypes.issue]: {
+    mutation: updateBoardListMutation,
+  },
+};
+
 export const titleQueries = {
   [issuableTypes.issue]: {
     mutation: issueSetTitleMutation,

app/assets/javascripts/boards/stores/actions.js

 import * as Sentry from '@sentry/browser';
+import { updateListQueries } from 'ee_else_ce/boards/constants';
 import createBoardListMutation from 'ee_else_ce/boards/graphql/board_list_create.mutation.graphql';
 import boardListsQuery from 'ee_else_ce/boards/graphql/board_lists.query.graphql';
 import issueMoveListMutation from 'ee_else_ce/boards/graphql/issue_move_list.mutation.graphql';
@@ -31,7 +32,6 @@ import {
 } from '../boards_util';
 import boardLabelsQuery from '../graphql/board_labels.query.graphql';
 import destroyBoardListMutation from '../graphql/board_list_destroy.mutation.graphql';
-import updateBoardListMutation from '../graphql/board_list_update.mutation.graphql';
 import groupProjectsQuery from '../graphql/group_projects.query.graphql';
 import issueCreateMutation from '../graphql/issue_create.mutation.graphql';
 import issueSetDueDateMutation from '../graphql/issue_set_due_date.mutation.graphql';
@@ -238,10 +238,11 @@ export default {
     dispatch('updateList', { listId, position: newPosition, backupList });
   },
 
-  updateList: ({ commit }, { listId, position, collapsed, backupList }) => {
+  updateList: ({ commit, state }, { listId, position, collapsed, backupList }) => {
+    const { issuableType } = state;
     gqlClient
       .mutate({
-        mutation: updateBoardListMutation,
+        mutation: updateListQueries[issuableType].mutation,
         variables: {
           listId,
           position,

app/helpers/boards_helper.rb

@@ -10,7 +10,7 @@ module BoardsHelper
       boards_endpoint: @boards_endpoint,
       lists_endpoint: board_lists_path(board),
       board_id: board.id,
-      disabled: (!can?(current_user, :create_non_backlog_issues, board)).to_s,
+      disabled: disabled?.to_s,
       root_path: root_path,
       full_path: full_path,
       bulk_update_path: @bulk_issues_path,
@@ -101,6 +101,10 @@ module BoardsHelper
     can?(current_user, :admin_issue, current_board_parent)
   end
 
+  def disabled?
+    !can?(current_user, :create_non_backlog_issues, board)
+  end
+
   def board_list_data
     include_descendant_groups = @group&.present?
 

ee/app/assets/javascripts/boards/constants.js

+import { issuableTypes } from '~/boards/constants';
+import updateBoardListMutation from '~/boards/graphql/board_list_update.mutation.graphql';
+
 import { s__ } from '~/locale';
 
+import updateEpicBoardListMutation from './graphql/epic_board_list_update.mutation.graphql';
+
 export const DRAGGABLE_TAG = 'div';
 
 export const EPIC_LANE_BASE_HEIGHT = 40;
@@ -54,6 +59,15 @@ export const ErrorMessages = {
   ),
 };
 
+export const updateListQueries = {
+  [issuableTypes.issue]: {
+    mutation: updateBoardListMutation,
+  },
+  [issuableTypes.epic]: {
+    mutation: updateEpicBoardListMutation,
+  },
+};
+
 export default {
   DRAGGABLE_TAG,
   EpicFilterType,

ee/app/assets/javascripts/boards/graphql/epic_board_list_update.mutation.graphql

+#import "./epic_board_list.fragment.graphql"
+
+mutation UpdateEpicBoardList($listId: BoardsEpicListID!, $position: Int, $collapsed: Boolean) {
+  updateBoardList: updateEpicBoardList(
+    input: { listId: $listId, position: $position, collapsed: $collapsed }
+  ) {
+    list {
+      ...EpicBoardListFragment
+    }
+    errors
+  }
+}

ee/app/helpers/ee/boards_helper.rb

@@ -33,6 +33,7 @@ module EE
         scoped_labels: current_board_parent.feature_available?(:scoped_labels)&.to_s,
         can_update: can_update?.to_s,
         can_admin_list: can_admin_list?.to_s,
+        disabled: disabled?.to_s,
         emails_disabled: current_board_parent.emails_disabled?.to_s
       }
 
@@ -60,6 +61,13 @@ module EE
       super
     end
 
+    override :disabled?
+    def disabled?
+      return false if board.is_a?(::Boards::EpicBoard)
+
+      super
+    end
+
     override :recent_boards_path
     def recent_boards_path
       return recent_group_boards_path(@group) if current_board_parent.is_a?(Group)

ee/spec/features/epic_boards/epic_boards_spec.rb

@@ -96,6 +96,39 @@ RSpec.describe 'epic boards', :js do
       expect(find('.board:nth-child(1)')).not_to have_content(epic3.title)
       expect(find('.board:nth-child(2)')).to have_content(epic3.title)
     end
+
+    context 'lists' do
+      let_it_be(:label_list2) { create(:epic_list, epic_board: epic_board, label: label2, position: 1) }
+
+      it 'changes position of list' do
+        expect(find('.board:nth-child(2)')).to have_content(label.title)
+        expect(find('.board:nth-child(3)')).to have_content(label2.title)
+
+        drag(list_from_index: 2, list_to_index: 1, selector: '.board-header')
+
+        wait_for_all_requests
+
+        expect(find('.board:nth-child(2)')).to have_content(label2.title)
+        expect(find('.board:nth-child(3)')).to have_content(label.title)
+
+        # Make sure list positions are preserved after a reload
+        visit_epic_boards_page
+
+        wait_for_all_requests
+
+        expect(find('.board:nth-child(2)')).to have_content(label2.title)
+        expect(find('.board:nth-child(3)')).to have_content(label.title)
+      end
+
+      it 'dragging does not duplicate list' do
+        selector = '.board:not(.is-ghost) .board-header'
+        expect(page).to have_selector(selector, text: label.title, count: 1)
+
+        drag(list_from_index: 2, list_to_index: 1, selector: '.board-header', perform_drop: false)
+
+        expect(page).to have_selector(selector, text: label.title, count: 1)
+      end
+    end
   end
 
   context 'when user can admin epic boards' do

spec/frontend/boards/stores/actions_spec.js

@@ -459,6 +459,7 @@ describe('updateList', () => {
       boardType: 'group',
       disabled: false,
       boardLists: [{ type: 'closed' }],
+      issuableType: 'issue',
     };
 
     testAction(