Merge branch '32359-fix-epics-tree-items-ordering' into 'master'

Fix sort ordering logic for Epics Tree

Closes #32359

See merge request gitlab-org/gitlab!17340

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

@@ -43,17 +43,17 @@ export default {
         (!isEpic && newIndex > currentItemIssuesBeginAtIndex)
       ) {
         // We set `adjacentReferenceId` to the item ID that's _above_ the target items new position.
-        // And since adjacent item is above, we set `relativePosition` to `above`.
+        // And since adjacent item is above, we set `relativePosition` to `Before`.
         adjacentReferenceId = children[newIndex - 1][idPropVal];
-        relativePosition = relativePositions.After;
+        relativePosition = relativePositions.Before;
       } else {
         // We set `adjacentReferenceId` to the item ID that's on top of the list (either Epics or Issues)
-        // And since adjacent item is below, we set `relativePosition` to `below`.
+        // And since adjacent item is below, we set `relativePosition` to `After`.
         adjacentReferenceId =
           children[isEpic ? currentItemEpicsBeginAtIndex : currentItemIssuesBeginAtIndex][
             idPropVal
           ];
-        relativePosition = relativePositions.Before;
+        relativePosition = relativePositions.After;
       }
 
       return {

ee/app/assets/javascripts/related_items_tree/utils/epic_utils.js

@@ -14,7 +14,7 @@ export const gqClient = createGqClient();
  * @param {cbject} childA
  * @param {object} childB
  */
-export const sortChildren = (childA, childB) => childB.relativePosition - childA.relativePosition;
+export const sortChildren = (childA, childB) => childA.relativePosition - childB.relativePosition;
 
 /**
  * Returns formatted child item to include additional

ee/spec/frontend/related_items_tree/utils/epic_utils_spec.js

@@ -12,6 +12,37 @@ jest.mock('~/lib/graphql', () => jest.fn());
 
 describe('RelatedItemsTree', () => {
   describe('epicUtils', () => {
+    describe('sortChildren', () => {
+      const paramA = {};
+      const paramB = {};
+
+      beforeEach(() => {
+        paramA.relativePosition = -1;
+        paramB.relativePosition = -1;
+      });
+
+      it('returns non-zero positive integer when paramA.relativePosition is greater than paramB.relativePosition', () => {
+        paramA.relativePosition = 10;
+        paramB.relativePosition = 5;
+
+        expect(epicUtils.sortChildren(paramA, paramB) > -1).toBe(true);
+      });
+
+      it('returns non-zero negative integer when paramA.relativePosition is smaller than paramB.relativePosition', () => {
+        paramA.relativePosition = 5;
+        paramB.relativePosition = 10;
+
+        expect(epicUtils.sortChildren(paramA, paramB) < 0).toBe(true);
+      });
+
+      it('returns zero when paramA.relativePosition is same as paramB.relativePosition', () => {
+        paramA.relativePosition = 5;
+        paramB.relativePosition = 5;
+
+        expect(epicUtils.sortChildren(paramA, paramB)).toBe(0);
+      });
+    });
+
     describe('formatChildItem', () => {
       it('returns new object from provided item object with pathIdSeparator assigned', () => {
         const item = {

ee/spec/javascripts/related_items_tree/components/tree_root_spec.js

@@ -109,7 +109,7 @@ describe('RelatedItemsTree', () => {
                 jasmine.objectContaining({
                   id: targetItem.id,
                   adjacentReferenceId: mockEpic1.id,
-                  relativePosition: 'before',
+                  relativePosition: 'after',
                 }),
               );
             });
@@ -127,7 +127,7 @@ describe('RelatedItemsTree', () => {
                 jasmine.objectContaining({
                   id: targetItem.id,
                   adjacentReferenceId: mockEpic1.id,
-                  relativePosition: 'after',
+                  relativePosition: 'before',
                 }),
               );
             });
@@ -145,7 +145,7 @@ describe('RelatedItemsTree', () => {
                 jasmine.objectContaining({
                   id: targetItem.epicIssueId,
                   adjacentReferenceId: mockIssue1.epicIssueId,
-                  relativePosition: 'before',
+                  relativePosition: 'after',
                 }),
               );
             });
@@ -163,7 +163,7 @@ describe('RelatedItemsTree', () => {
                 jasmine.objectContaining({
                   id: targetItem.epicIssueId,
                   adjacentReferenceId: mockIssue1.epicIssueId,
-                  relativePosition: 'after',
+                  relativePosition: 'before',
                 }),
               );
             });