Merge branch '35532-fix-epics-reorder' into 'master'

Fix moving items down in the epic tree

Closes #35532

See merge request gitlab-org/gitlab!19639

ee/app/assets/javascripts/related_items_tree/components/tree_root.vue

@@ -2,7 +2,6 @@
 import { mapState, mapActions } from 'vuex';
 import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 
-import { ChildType } from '../constants';
 import TreeDragAndDropMixin from '../mixins/tree_dd_mixin';
 
 export default {
@@ -28,9 +27,6 @@ export default {
   },
   computed: {
     ...mapState(['childrenFlags', 'userSignedIn']),
-    currentItemIssuesBeginAtIndex() {
-      return this.children.findIndex(item => item.type === ChildType.Issue);
-    },
     hasMoreChildren() {
       const flags = this.childrenFlags[this.parentItem.reference];
 

ee/app/assets/javascripts/related_items_tree/mixins/tree_dd_mixin.js

@@ -48,7 +48,7 @@ export default {
      * @param {number} object.newIndex new position of target item
      * @param {object} object.targetItem target item object
      */
-    getTreeReorderMutation({ newIndex, targetItem }) {
+    getTreeReorderMutation({ oldIndex, newIndex, targetItem }) {
       let relativePosition;
 
       // adjacentReference is always the item that's at the position
@@ -65,10 +65,14 @@ export default {
         // Adjacent reference will be the one which is currently at the bottom,
         // and it's relative position with respect to target's new position is `before`.
         relativePosition = relativePositions.Before;
-      } else {
+      } else if (oldIndex < newIndex) {
         // If newIndex is neither top nor bottom, it was moved somewhere in the middle.
         // Adjacent reference will be the one which currently at that position,
-        // and it's relative postion with respect to target's new position is `after`.
+
+        // when the item is moved down, the newIndex is before the adjacent reference.
+        relativePosition = relativePositions.Before;
+      } else {
+        // when the item is moved up, the newIndex is after the adjacent reference.
         relativePosition = relativePositions.After;
       }
 
@@ -106,7 +110,7 @@ export default {
       const targetItem = this.children[oldIndex];
 
       this.reorderItem({
-        treeReorderMutation: this.getTreeReorderMutation({ newIndex, targetItem }),
+        treeReorderMutation: this.getTreeReorderMutation({ oldIndex, newIndex, targetItem }),
         parentItem: this.parentItem,
         targetItem,
         oldIndex,

ee/app/assets/javascripts/related_items_tree/store/actions.js

@@ -286,7 +286,7 @@ export const receiveAddItemSuccess = ({ dispatch, commit, getters }, { rawItems
   });
 
   commit(types.RECEIVE_ADD_ITEM_SUCCESS, {
-    insertAt: getters.isEpic ? 0 : getters.issuesBeginAtIndex,
+    insertAt: 0,
     items,
   });
 
@@ -342,7 +342,7 @@ export const receiveCreateItemSuccess = ({ state, commit, dispatch, getters }, {
   });
 
   commit(types.RECEIVE_CREATE_ITEM_SUCCESS, {
-    insertAt: getters.issuesBeginAtIndex > 0 ? getters.issuesBeginAtIndex - 1 : 0,
+    insertAt: 0,
     item,
   });
 

ee/app/assets/javascripts/related_items_tree/store/getters.js

@@ -23,9 +23,6 @@ export const headerItems = state => [
   },
 ];
 
-export const issuesBeginAtIndex = (state, getters) =>
-  getters.directChildren.findIndex(item => item.type === ChildType.Issue);
-
 export const itemAutoCompleteSources = (state, getters) => {
   if (getters.isEpic) {
     return state.autoCompleteEpics ? getters.autoCompleteSources : {};

ee/spec/frontend/related_items_tree/store/getters_spec.js

@@ -5,12 +5,7 @@ import createDefaultState from 'ee/related_items_tree/store/state';
 import { issuableTypesMap } from 'ee/related_issues/constants';
 import { ChildType } from 'ee/related_items_tree/constants';
 
-import {
-  mockEpic1,
-  mockEpic2,
-  mockIssue1,
-  mockIssue2,
-} from '../../../javascripts/related_items_tree/mock_data';
+import { mockEpic1, mockEpic2 } from '../../../javascripts/related_items_tree/mock_data';
 
 window.gl = window.gl || {};
 
@@ -19,19 +14,11 @@ describe('RelatedItemsTree', () => {
     describe('getters', () => {
       const { GfmAutoComplete } = gl;
       let state;
-      let mockGetters;
 
       beforeAll(() => {
         gl.GfmAutoComplete = {
           dataSources: 'foo/bar',
         };
-
-        mockGetters = {
-          directChildren: [mockEpic1, mockEpic2, mockIssue1, mockIssue2].map(item => ({
-            ...item,
-            type: item.reference.indexOf('&') > -1 ? ChildType.Epic : ChildType.Issue,
-          })),
-        };
       });
 
       beforeEach(() => {
@@ -103,12 +90,6 @@ describe('RelatedItemsTree', () => {
         });
       });
 
-      describe('issuesBeginAtIndex', () => {
-        it('returns number representing index at which Issues begin in direct children array', () => {
-          expect(getters.issuesBeginAtIndex(state, mockGetters)).toBe(2);
-        });
-      });
-
       describe('itemAutoCompleteSources', () => {
         it('returns autoCompleteSources value when `issuableType` is set to `Epic` and `autoCompleteEpics` is true', () => {
           const mockGetter = {

ee/spec/javascripts/related_items_tree/store/actions_spec.js

@@ -801,7 +801,6 @@ describe('RelatedItemTree', () => {
 
       describe('receiveAddItemSuccess', () => {
         it('should set `state.itemAddInProgress` to false and dispatches actions `setPendingReferences`, `setItemInputValue` and `toggleAddItemForm`', done => {
-          state.epicsBeginAtIndex = 0;
           state.issuableType = issuableTypesMap.EPIC;
           state.isEpic = true;
 
@@ -972,7 +971,6 @@ describe('RelatedItemTree', () => {
             reference: `${mockEpics[0].group.fullPath}${mockEpics[0].reference}`,
             pathIdSeparator: PathIdSeparator.Epic,
           });
-          state.epicsBeginAtIndex = 0;
           state.parentItem = {
             fullPath: createdEpic.group.fullPath,
           };