Add latest changes from gitlab-org/gitlab@master

6 files changed, 81 insertions, 31 deletions

diff --git a/app/assets/javascripts/boards/components/board_card_move_to_position.vue b/app/assets/javascripts/boards/components/board_card_move_to_position.vue
index a0cc3756fc4..ff938219475 100644
--- a/app/assets/javascripts/boards/components/board_card_move_to_position.vue
+++ b/app/assets/javascripts/boards/components/board_card_move_to_position.vue
@@ -48,21 +48,12 @@ export default {
     listHasNextPage() {
       return this.pageInfoByListId[this.list.id]?.hasNextPage;
     },
-    firstItemInListId() {
-      return this.listItems[0]?.id;
-    },
     lengthOfListItemsInBoard() {
       return this.listItems?.length;
     },
-    lastItemInTheListId() {
-      return this.listItems[this.lengthOfListItemsInBoard - 1]?.id;
-    },
     itemIdentifier() {
       return `${this.item.id}-${this.item.iid}-${this.index}`;
     },
-    showMoveToEndOfList() {
-      return !this.listHasNextPage;
-    },
     isFirstItemInList() {
       return this.index === 0;
     },
@@ -80,9 +71,8 @@ export default {
       if (this.isFirstItemInList) {
         return;
       }
-      const moveAfterId = this.firstItemInListId;
       this.moveToPosition({
-        moveAfterId,
+        positionInList: 0,
       });
     },
     moveToEnd() {
@@ -93,20 +83,20 @@ export default {
       if (this.isLastItemInList) {
         return;
       }
-      const moveBeforeId = this.lastItemInTheListId;
       this.moveToPosition({
-        moveBeforeId,
+        positionInList: -1,
       });
     },
-    moveToPosition({ moveAfterId, moveBeforeId }) {
+    moveToPosition({ positionInList }) {
       this.moveItem({
         itemId: this.item.id,
         itemIid: this.item.iid,
         itemPath: this.item.referencePath,
         fromListId: this.list.id,
         toListId: this.list.id,
-        moveAfterId,
-        moveBeforeId,
+        positionInList,
+        atIndex: this.index,
+        allItemsLoadedInList: !this.listHasNextPage,
       });
     },
   },
@@ -117,7 +107,6 @@ export default {
   <gl-dropdown
     ref="dropdown"
     :key="itemIdentifier"
-    data-testid="move-card-dropdown"
     icon="ellipsis_v"
     :text="s__('Boards|Move card')"
     :text-sr-only="true"
@@ -128,14 +117,10 @@ export default {
     @keydown.esc.native="$emit('hide')"
   >
     <div>
-      <gl-dropdown-item data-testid="action-move-to-first" @click.stop="moveToStart">
+      <gl-dropdown-item @click.stop="moveToStart">
         {{ $options.i18n.moveToStartText }}
       </gl-dropdown-item>
-      <gl-dropdown-item
-        v-if="showMoveToEndOfList"
-        data-testid="action-move-to-end"
-        @click.stop="moveToEnd"
-      >
+      <gl-dropdown-item @click.stop="moveToEnd">
         {{ $options.i18n.moveToEndText }}
       </gl-dropdown-item>
     </div>
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 93835519033..edf1a5ee7e6 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -66,7 +66,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['pageInfoByListId', 'listsFlags', 'filterParams']),
+    ...mapState(['pageInfoByListId', 'listsFlags', 'filterParams', 'isUpdateIssueOrderInProgress']),
     ...mapGetters(['isEpicBoard']),
     listItemsCount() {
       return this.isEpicBoard ? this.list.epicsCount : this.boardList?.issuesCount;
@@ -132,6 +132,9 @@ export default {
 
       return this.canMoveIssue ? options : {};
     },
+    disableScrollingWhenMutationInProgress() {
+      return this.hasNextPage && this.isUpdateIssueOrderInProgress;
+    },
   },
   watch: {
     boardItems() {
@@ -285,9 +288,13 @@ export default {
       v-bind="treeRootOptions"
       :data-board="list.id"
       :data-board-type="list.listType"
-      :class="{ 'bg-danger-100': boardItemsSizeExceedsMax }"
+      :class="{
+        'bg-danger-100': boardItemsSizeExceedsMax,
+        'gl-overflow-hidden': disableScrollingWhenMutationInProgress,
+        'gl-overflow-y-auto': !disableScrollingWhenMutationInProgress,
+      }"
       draggable=".board-card"
-      class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-3 gl-pt-0 gl-overflow-y-auto gl-overflow-x-hidden"
+      class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-3 gl-pt-0 gl-overflow-x-hidden"
       data-testid="tree-root-wrapper"
       @start="handleDragOnStart"
       @end="handleDragOnEnd"
diff --git a/app/assets/javascripts/boards/stores/actions.js b/app/assets/javascripts/boards/stores/actions.js
index f84274104b2..c2e346da606 100644
--- a/app/assets/javascripts/boards/stores/actions.js
+++ b/app/assets/javascripts/boards/stores/actions.js
@@ -479,16 +479,25 @@ export default {
       toListId,
       moveBeforeId,
       moveAfterId,
+      positionInList,
+      allItemsLoadedInList,
     } = moveData;
 
     commit(types.REMOVE_BOARD_ITEM_FROM_LIST, { itemId, listId: fromListId });
 
+    if (reordering && !allItemsLoadedInList && positionInList === -1) {
+      return;
+    }
+
     if (reordering) {
       commit(types.ADD_BOARD_ITEM_TO_LIST, {
         itemId,
         listId: toListId,
         moveBeforeId,
         moveAfterId,
+        positionInList,
+        atIndex: originalIndex,
+        allItemsLoadedInList,
       });
 
       return;
@@ -500,6 +509,7 @@ export default {
         listId: toListId,
         moveBeforeId,
         moveAfterId,
+        positionInList,
       });
     }
 
@@ -553,7 +563,15 @@ export default {
 
   updateIssueOrder: async ({ commit, dispatch, state }, { moveData, mutationVariables = {} }) => {
     try {
-      const { itemId, fromListId, toListId, moveBeforeId, moveAfterId, itemNotInToList } = moveData;
+      const {
+        itemId,
+        fromListId,
+        toListId,
+        moveBeforeId,
+        moveAfterId,
+        itemNotInToList,
+        positionInList,
+      } = moveData;
       const {
         fullBoardId,
         filterParams,
@@ -562,6 +580,8 @@ export default {
         },
       } = state;
 
+      commit(types.MUTATE_ISSUE_IN_PROGRESS, true);
+
       const { data } = await gqlClient.mutate({
         mutation: issueMoveListMutation,
         variables: {
@@ -572,6 +592,7 @@ export default {
           toListId: getIdFromGraphQLId(toListId),
           moveBeforeId: moveBeforeId ? getIdFromGraphQLId(moveBeforeId) : undefined,
           moveAfterId: moveAfterId ? getIdFromGraphQLId(moveAfterId) : undefined,
+          positionInList,
           // 'mutationVariables' allows EE code to pass in extra parameters.
           ...mutationVariables,
         },
@@ -643,7 +664,9 @@ export default {
       }
 
       commit(types.MUTATE_ISSUE_SUCCESS, { issue: data.issueMoveList.issue });
+      commit(types.MUTATE_ISSUE_IN_PROGRESS, false);
     } catch {
+      commit(types.MUTATE_ISSUE_IN_PROGRESS, false);
       commit(
         types.SET_ERROR,
         s__('Boards|An error occurred while moving the issue. Please try again.'),
diff --git a/app/assets/javascripts/boards/stores/mutation_types.js b/app/assets/javascripts/boards/stores/mutation_types.js
index 43268f21f96..0e496677b7b 100644
--- a/app/assets/javascripts/boards/stores/mutation_types.js
+++ b/app/assets/javascripts/boards/stores/mutation_types.js
@@ -44,3 +44,4 @@ export const ADD_LIST_TO_HIGHLIGHTED_LISTS = 'ADD_LIST_TO_HIGHLIGHTED_LISTS';
 export const REMOVE_LIST_FROM_HIGHLIGHTED_LISTS = 'REMOVE_LIST_FROM_HIGHLIGHTED_LISTS';
 export const RESET_BOARD_ITEM_SELECTION = 'RESET_BOARD_ITEM_SELECTION';
 export const SET_ERROR = 'SET_ERROR';
+export const MUTATE_ISSUE_IN_PROGRESS = 'MUTATE_ISSUE_IN_PROGRESS';
diff --git a/app/assets/javascripts/boards/stores/mutations.js b/app/assets/javascripts/boards/stores/mutations.js
index 26a98a645b3..44abb2030c7 100644
--- a/app/assets/javascripts/boards/stores/mutations.js
+++ b/app/assets/javascripts/boards/stores/mutations.js
@@ -20,17 +20,28 @@ export const removeItemFromList = ({ state, listId, itemId }) => {
   updateListItemsCount({ state, listId, value: -1 });
 };
 
-export const addItemToList = ({ state, listId, itemId, moveBeforeId, moveAfterId, atIndex }) => {
+export const addItemToList = ({
+  state,
+  listId,
+  itemId,
+  moveBeforeId,
+  moveAfterId,
+  atIndex,
+  positionInList,
+}) => {
   const listIssues = state.boardItemsByListId[listId];
   let newIndex = atIndex || 0;
+  const moveToStartOrLast = positionInList !== undefined;
   if (moveBeforeId) {
     newIndex = listIssues.indexOf(moveBeforeId) + 1;
   } else if (moveAfterId) {
     newIndex = listIssues.indexOf(moveAfterId);
+  } else if (moveToStartOrLast) {
+    newIndex = positionInList === -1 ? listIssues.length : 0;
   }
   listIssues.splice(newIndex, 0, itemId);
   Vue.set(state.boardItemsByListId, listId, listIssues);
-  updateListItemsCount({ state, listId, value: 1 });
+  updateListItemsCount({ state, listId, value: moveToStartOrLast ? 0 : 1 });
 };
 
 export default {
@@ -205,12 +216,34 @@ export default {
     Vue.set(state.boardItems, issue.id, formatIssue(issue));
   },
 
+  [mutationTypes.MUTATE_ISSUE_IN_PROGRESS](state, isLoading) {
+    state.isUpdateIssueOrderInProgress = isLoading;
+  },
+
   [mutationTypes.ADD_BOARD_ITEM_TO_LIST]: (
     state,
-    { itemId, listId, moveBeforeId, moveAfterId, atIndex, inProgress = false },
+    {
+      itemId,
+      listId,
+      moveBeforeId,
+      moveAfterId,
+      atIndex,
+      positionInList,
+      allItemsLoadedInList,
+      inProgress = false,
+    },
   ) => {
     Vue.set(state.listsFlags, listId, { ...state.listsFlags, addItemToListInProgress: inProgress });
-    addItemToList({ state, listId, itemId, moveBeforeId, moveAfterId, atIndex });
+    addItemToList({
+      state,
+      listId,
+      itemId,
+      moveBeforeId,
+      moveAfterId,
+      atIndex,
+      positionInList,
+      allItemsLoadedInList,
+    });
   },
 
   [mutationTypes.REMOVE_BOARD_ITEM_FROM_LIST]: (state, { itemId, listId }) => {
diff --git a/app/assets/javascripts/boards/stores/state.js b/app/assets/javascripts/boards/stores/state.js
index b62c032b921..bf3f777ea7d 100644
--- a/app/assets/javascripts/boards/stores/state.js
+++ b/app/assets/javascripts/boards/stores/state.js
@@ -40,4 +40,5 @@ export default () => ({
   },
   // TODO: remove after ce/ee split of board_content.vue
   isShowingEpicsSwimlanes: false,
+  isUpdateIssueOrderInProgress: false,
 });