Epic tree move child with drag and drop

- Move epic or issue to epic with children
- Move epic or issue to epic with no children

doc/api/graphql/reference/gitlab_schema.graphql

@@ -3361,7 +3361,7 @@ input EpicTreeNodeFieldsInputType {
   """
   The id of the epic_issue or issue that the actual epic or issue is switched with
   """
-  adjacentReferenceId: ID!
+  adjacentReferenceId: ID
 
   """
   The id of the epic_issue or epic that is being moved

doc/api/graphql/reference/gitlab_schema.json

@@ -9668,13 +9668,9 @@
               "name": "adjacentReferenceId",
               "description": "The id of the epic_issue or issue that the actual epic or issue is switched with",
               "type": {
-                "kind": "NON_NULL",
-                "name": null,
-                "ofType": {
                 "kind": "SCALAR",
                 "name": "ID",
                 "ofType": null
-                }
               },
               "defaultValue": null
             },

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

@@ -112,9 +112,9 @@ export default {
       />
     </div>
     <tree-root
-      v-if="itemExpanded"
+      v-if="item.type === $options.ChildType.Epic"
       :parent-item="item"
-      :children="children[itemReference]"
+      :children="children[itemReference] || []"
       class="sub-tree-root"
     />
   </li>

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

@@ -34,7 +34,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['fetchNextPageItems', 'reorderItem']),
+    ...mapActions(['fetchNextPageItems', 'reorderItem', 'moveItem']),
     handleShowMoreClick() {
       this.fetchInProgress = true;
       this.fetchNextPageItems({

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

@@ -12,10 +12,11 @@ export default {
       const options = {
         ...defaultSortableConfig,
         fallbackOnBody: false,
-        group: this.parentItem.reference,
+        group: 'sortable-container',
         tag: 'ul',
         'ghost-class': 'tree-item-drag-active',
         'data-parent-reference': this.parentItem.reference,
+        'data-parent-id': this.parentItem.id,
         value: this.children,
         // This filters out/ignores all the chevron buttons (used for
         // expanding and collapsing epic tree items) so the drag action
@@ -104,15 +105,17 @@ export default {
      *
      * @param {object} event Object representing drag end event.
      */
-    handleDragOnEnd({ oldIndex, newIndex }) {
+    handleDragOnEnd(params) {
+      const { oldIndex, newIndex, from, to } = params;
       document.body.classList.remove('is-dragging');
 
+      const targetItem = this.children[oldIndex];
+
+      if (from === to) {
         // If both old and new index of target are same,
         // nothing was moved, we do an early return.
         if (oldIndex === newIndex) return;
 
-      const targetItem = this.children[oldIndex];
-
         this.reorderItem({
           treeReorderMutation: this.getTreeReorderMutation({ oldIndex, newIndex, targetItem }),
           parentItem: this.parentItem,
@@ -120,6 +123,15 @@ export default {
           oldIndex,
           newIndex,
         });
+      } else {
+        this.moveItem({
+          oldParentItem: this.parentItem,
+          newParentItem: to.dataset,
+          targetItem,
+          oldIndex,
+          newIndex,
+        });
+      }
     },
   },
 };

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

@@ -12,7 +12,7 @@ import httpStatusCodes from '~/lib/utils/http_status';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 import { processQueryResponse, formatChildItem, gqClient } from '../utils/epic_utils';
-import { ChildType, ChildState } from '../constants';
+import { ChildType, ChildState, idProp, relativePositions } from '../constants';
 
 import epicChildren from '../queries/epicChildren.query.graphql';
 import epicChildReorder from '../queries/epicChildReorder.mutation.graphql';
@@ -454,6 +454,84 @@ export const reorderItem = (
     });
 };
 
+export const receiveMoveItemFailure = ({ commit }, data) => {
+  commit(types.MOVE_ITEM_FAILURE, data);
+  flash(s__('Epics|Something went wrong while moving item.'));
+};
+
+export const moveItem = (
+  { dispatch, commit, state },
+  { oldParentItem, newParentItem, targetItem, oldIndex, newIndex },
+) => {
+  let adjacentItem;
+  let adjacentReferenceId;
+  let relativePosition = relativePositions.After;
+
+  let isFirstChild = false;
+  const newParentChildren = state.children[newParentItem.parentReference];
+
+  if (newParentChildren !== undefined) {
+    adjacentItem = newParentChildren[newIndex];
+    if (adjacentItem === undefined) {
+      adjacentItem = newParentChildren[newParentChildren.length - 1];
+      relativePosition = relativePositions.Before;
+    }
+    adjacentReferenceId = adjacentItem[idProp[adjacentItem.type]];
+  } else {
+    isFirstChild = true;
+    relativePosition = relativePositions.Before;
+  }
+
+  commit(types.MOVE_ITEM, {
+    oldParentItem,
+    newParentItem,
+    targetItem,
+    oldIndex,
+    newIndex,
+    isFirstChild,
+  });
+
+  return gqClient
+    .mutate({
+      mutation: epicChildReorder,
+      variables: {
+        epicTreeReorderInput: {
+          baseEpicId: oldParentItem.id,
+          moved: {
+            id: targetItem[idProp[targetItem.type]],
+            adjacentReferenceId,
+            relativePosition,
+            newParentId: newParentItem.parentId,
+          },
+        },
+      },
+    })
+    .then(({ data }) => {
+      // Mutation was unsuccessful;
+      // revert to original order and show flash error
+      if (data.epicTreeReorder.errors.length) {
+        dispatch('receiveMoveItemFailure', {
+          oldParentItem,
+          newParentItem,
+          targetItem,
+          newIndex,
+          oldIndex,
+        });
+      }
+    })
+    .catch(() => {
+      // Mutation was unsuccessful;
+      // revert to original order and show flash error
+      dispatch('receiveMoveItemFailure', {
+        oldParentItem,
+        newParentItem,
+        targetItem,
+        newIndex,
+        oldIndex,
+      });
+    });
+};
+
 export const receiveCreateIssueSuccess = ({ commit }) =>
   commit(types.RECEIVE_CREATE_ITEM_SUCCESS, { insertAt: 0, items: [] });
 export const receiveCreateIssueFailure = ({ commit }) => {

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

@@ -41,6 +41,9 @@ export const RECEIVE_CREATE_ITEM_FAILURE = 'RECEIVE_CREATE_ITEM_FAILURE';
 
 export const REORDER_ITEM = 'REORDER_ITEM';
 
+export const MOVE_ITEM = 'MOVE_ITEM';
+export const MOVE_ITEM_FAILURE = 'MOVE_ITEM_FAILURE';
+
 export const SET_PROJECTS = 'SET_PROJECTS';
 export const REQUEST_PROJECTS = 'REQUEST_PROJECTS';
 export const RECIEVE_PROJECTS_SUCCESS = 'RECIEVE_PROJECTS_SUCCESS';

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

@@ -214,6 +214,31 @@ export default {
     state.children[parentItem.reference].splice(newIndex, 0, targetItem);
   },
 
+  [types.MOVE_ITEM](
+    state,
+    { oldParentItem, newParentItem, targetItem, oldIndex, newIndex, isFirstChild },
+  ) {
+    // Remove from old position in previous parent
+    state.children[oldParentItem.reference].splice(oldIndex, 1);
+
+    // Insert at new position in new parent
+    if (isFirstChild) {
+      Vue.set(state.children, newParentItem.parentReference, [targetItem]);
+    } else {
+      state.children[newParentItem.parentReference].splice(newIndex, 0, targetItem);
+    }
+  },
+  [types.MOVE_ITEM_FAILURE](
+    state,
+    { oldParentItem, newParentItem, targetItem, oldIndex, newIndex },
+  ) {
+    // Remove from new position in new parent
+    state.children[newParentItem.parentReference].splice(newIndex, 1);
+
+    // Insert at old position in old parent
+    state.children[oldParentItem.reference].splice(oldIndex, 0, targetItem);
+  },
+
   [types.REQUEST_PROJECTS](state) {
     state.projectsFetchInProgress = true;
   },

ee/app/graphql/types/epic_tree/epic_tree_node_input_type.rb

@@ -14,7 +14,7 @@ module Types
 
       argument :adjacent_reference_id,
                GraphQL::ID_TYPE,
-               required: true,
+               required: false,
                description: 'The id of the epic_issue or issue that the actual epic or issue is switched with'
 
       argument :relative_position,

ee/app/services/epics/tree_reorder_service.rb

@@ -42,7 +42,12 @@ module Epics
     end
 
     def move!
+      if adjacent_reference
         moving_object.move_between(before_object, after_object)
+      else
+        moving_object.move_to_start
+      end
+
       moving_object.save!(touch: false)
     end
 
@@ -59,18 +64,22 @@ module Epics
     end
 
     def validate_objects
+      if adjacent_reference
         return 'Relative position is not valid.' unless valid_relative_position?
 
         unless supported_type?(moving_object) && supported_type?(adjacent_reference)
           return 'Only epics and epic_issues are supported.'
         end
+      end
 
       return 'You don\'t have permissions to move the objects.' unless authorized?
 
+      if adjacent_reference
         if different_epic_parent?
           return "The sibling object's parent must match the #{new_parent ? "new" : "current"} parent epic."
         end
       end
+    end
 
     def valid_relative_position?
       %w(before after).include?(params[:relative_position])
@@ -90,7 +99,10 @@ module Epics
 
     def authorized?
       return false unless can?(current_user, :admin_epic, base_epic.group)
+
+      if adjacent_reference
         return false unless can?(current_user, :admin_epic, adjacent_reference_group)
+      end
 
       if new_parent
         return false unless can?(current_user, :admin_epic, new_parent.group)
@@ -116,6 +128,8 @@ module Epics
     end
 
     def adjacent_reference
+      return unless params[:adjacent_reference_id]
+
       @adjacent_reference ||= find_object(params[:adjacent_reference_id])&.sync
     end
 

ee/changelogs/unreleased/33039-allow-changing-item-parent-epic-using-drag-and-drop-interaction.yml

+---
+title: Epic tree move child with drag and drop
+merge_request: 28629
+author:
+type: added

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

@@ -114,10 +114,11 @@ describe('RelatedItemsTree', () => {
                   fallbackClass: 'is-dragging',
                   fallbackOnBody: false,
                   ghostClass: 'is-ghost',
-                  group: mockParentItem.reference,
+                  group: 'sortable-container',
                   tag: 'ul',
                   'ghost-class': 'tree-item-drag-active',
                   'data-parent-reference': mockParentItem.reference,
+                  'data-parent-id': mockParentItem.id,
                   value: wrapper.vm.children,
                   filter: `.${treeItemChevronBtnClassName}`,
                 }),
@@ -270,12 +271,15 @@ describe('RelatedItemsTree', () => {
               expect(document.body.classList.contains('is-dragging')).toBe(false);
             });
 
+            describe('origin parent is destination parent', () => {
               it('does not call `reorderItem` action when newIndex is same as oldIndex', () => {
                 jest.spyOn(wrapper.vm, 'reorderItem').mockImplementation(() => {});
 
                 wrapper.vm.handleDragOnEnd({
                   oldIndex: 0,
                   newIndex: 0,
+                  from: wrapper.element,
+                  to: wrapper.element,
                 });
 
                 expect(wrapper.vm.reorderItem).not.toHaveBeenCalled();
@@ -287,6 +291,8 @@ describe('RelatedItemsTree', () => {
                 wrapper.vm.handleDragOnEnd({
                   oldIndex: 1,
                   newIndex: 0,
+                  from: wrapper.element,
+                  to: wrapper.element,
                 });
 
                 expect(wrapper.vm.reorderItem).toHaveBeenCalledWith(
@@ -300,6 +306,30 @@ describe('RelatedItemsTree', () => {
                 );
               });
             });
+
+            describe('origin parent is different than destination parent', () => {
+              it('calls `moveItem`', () => {
+                jest.spyOn(wrapper.vm, 'moveItem').mockImplementation(() => {});
+
+                wrapper.vm.handleDragOnEnd({
+                  oldIndex: 1,
+                  newIndex: 0,
+                  from: wrapper.element,
+                  to: wrapper.find('li:first-child .sub-tree-root'),
+                });
+
+                expect(wrapper.vm.moveItem).toHaveBeenCalledWith(
+                  expect.objectContaining({
+                    oldParentItem: wrapper.vm.parentItem,
+                    newParentItem: wrapper.find('li:first-child .sub-tree-root').dataset,
+                    targetItem: wrapper.vm.children[1],
+                    oldIndex: 1,
+                    newIndex: 0,
+                  }),
+                );
+              });
+            });
+          });
         });
       });
     });

ee/spec/frontend/related_items_tree/mock_data.js

@@ -33,6 +33,30 @@ export const mockParentItem = {
   },
 };
 
+export const mockParentItem2 = {
+  id: 'gid://gitlab/Epic/43',
+  iid: 2,
+  fullPath: 'gitlab-org',
+  title: 'Some sample epic 2',
+  reference: 'gitlab-org&2',
+  parentReference: 'gitlab-org&2',
+  userPermissions: {
+    adminEpic: true,
+    createEpic: true,
+  },
+  descendantCounts: {
+    openedEpics: 1,
+    closedEpics: 1,
+    openedIssues: 1,
+    closedIssues: 1,
+  },
+  healthStatus: {
+    issuesOnTrack: 1,
+    issuesAtRisk: 0,
+    issuesNeedingAttention: 1,
+  },
+};
+
 export const mockEpic1 = {
   id: 'gid://gitlab/Epic/4',
   iid: '4',

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

@@ -19,6 +19,7 @@ import { TEST_HOST } from 'spec/test_constants';
 import {
   mockInitialConfig,
   mockParentItem,
+  mockParentItem2,
   mockQueryResponse,
   mockEpicTreeReorderInput,
   mockReorderMutationResponse,
@@ -1265,6 +1266,199 @@ describe('RelatedItemTree', () => {
         });
       });
 
+      describe('receiveMoveItemFailure', () => {
+        it('should revert moved item back to its original position ion its original parent via MOVE_ITEM_FAILURE mutation', () => {
+          testAction(
+            actions.receiveMoveItemFailure,
+            {},
+            {},
+            [{ type: types.MOVE_ITEM_FAILURE, payload: {} }],
+            [],
+          );
+        });
+
+        it('should show flash error with message "Something went wrong while ordering item."', () => {
+          const message = 'Something went wrong while moving item.';
+          actions.receiveMoveItemFailure(
+            {
+              commit: () => {},
+            },
+            {
+              message,
+            },
+          );
+
+          expect(createFlash).toHaveBeenCalledWith(message);
+        });
+      });
+
+      describe('moveItem', () => {
+        beforeAll(() => {
+          state.children[mockParentItem2.parentReference] = [];
+        });
+
+        it('should perform MOVE_ITEM mutation with isFirstChild to true if parent has no children before request and do nothing on request success', () => {
+          jest.spyOn(epicUtils.gqClient, 'mutate').mockReturnValue(
+            Promise.resolve({
+              data: mockReorderMutationResponse,
+            }),
+          );
+
+          testAction(
+            actions.moveItem,
+            {
+              oldParentItem: mockParentItem,
+              newParentItem: mockParentItem2,
+              targetItem: mockItems[1],
+              newIndex: 1,
+              oldIndex: 0,
+            },
+            state,
+            [
+              {
+                type: types.MOVE_ITEM,
+                payload: {
+                  oldParentItem: mockParentItem,
+                  newParentItem: mockParentItem2,
+                  targetItem: mockItems[1],
+                  newIndex: 1,
+                  oldIndex: 0,
+                  isFirstChild: true,
+                },
+              },
+            ],
+            [],
+          );
+        });
+
+        it('should perform MOVE_ITEM mutation with isFirstChild to false if parent has children before request and do nothing on request success', () => {
+          jest.spyOn(epicUtils.gqClient, 'mutate').mockReturnValue(
+            Promise.resolve({
+              data: mockReorderMutationResponse,
+            }),
+          );
+
+          state.children[mockParentItem2.parentReference] = [{ id: '33' }];
+
+          testAction(
+            actions.moveItem,
+            {
+              oldParentItem: mockParentItem,
+              newParentItem: mockParentItem2,
+              targetItem: mockItems[1],
+              newIndex: 1,
+              oldIndex: 0,
+            },
+            state,
+            [
+              {
+                type: types.MOVE_ITEM,
+                payload: {
+                  oldParentItem: mockParentItem,
+                  newParentItem: mockParentItem2,
+                  targetItem: mockItems[1],
+                  newIndex: 1,
+                  oldIndex: 0,
+                  isFirstChild: false,
+                },
+              },
+            ],
+            [],
+          );
+        });
+
+        it('should perform MOVE_ITEM mutation before request and dispatch `receiveReorderItemFailure` when request response has errors on request success', () => {
+          jest.spyOn(epicUtils.gqClient, 'mutate').mockReturnValue(
+            Promise.resolve({
+              data: {
+                epicTreeReorder: {
+                  ...mockReorderMutationResponse.epicTreeReorder,
+                  errors: [{ foo: 'bar' }],
+                },
+              },
+            }),
+          );
+
+          testAction(
+            actions.moveItem,
+            {
+              oldParentItem: mockParentItem,
+              newParentItem: mockParentItem2,
+              targetItem: mockItems[1],
+              newIndex: 1,
+              oldIndex: 0,
+            },
+            state,
+            [
+              {
+                type: types.MOVE_ITEM,
+                payload: {
+                  oldParentItem: mockParentItem,
+                  newParentItem: mockParentItem2,
+                  targetItem: mockItems[1],
+                  newIndex: 1,
+                  oldIndex: 0,
+                  isFirstChild: true,
+                },
+              },
+            ],
+            [
+              {
+                type: 'receiveMoveItemFailure',
+                payload: {
+                  oldParentItem: mockParentItem,
+                  newParentItem: mockParentItem2,
+                  targetItem: mockItems[1],
+                  newIndex: 1,
+                  oldIndex: 0,
+                },
+              },
+            ],
+          );
+        });
+
+        it('should perform MOVE_ITEM mutation before request and dispatch `receiveReorderItemFailure` on request failure', () => {
+          jest.spyOn(epicUtils.gqClient, 'mutate').mockReturnValue(Promise.reject());
+
+          testAction(
+            actions.moveItem,
+            {
+              oldParentItem: mockParentItem,
+              newParentItem: mockParentItem2,
+              targetItem: mockItems[1],
+              newIndex: 1,
+              oldIndex: 0,
+            },
+            state,
+            [
+              {
+                type: types.MOVE_ITEM,
+                payload: {
+                  oldParentItem: mockParentItem,
+                  newParentItem: mockParentItem2,
+                  targetItem: mockItems[1],
+                  newIndex: 1,
+                  oldIndex: 0,
+                  isFirstChild: true,
+                },
+              },
+            ],
+            [
+              {
+                type: 'receiveMoveItemFailure',
+                payload: {
+                  oldParentItem: mockParentItem,
+                  newParentItem: mockParentItem2,
+                  targetItem: mockItems[1],
+                  newIndex: 1,
+                  oldIndex: 0,
+                },
+              },
+            ],
+          );
+        });
+      });
+
       describe('receiveCreateIssueSuccess', () => {
         it('should set `state.itemCreateInProgress` & `state.itemsFetchResultEmpty` to false', () => {
           testAction(

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

@@ -545,7 +545,7 @@ describe('RelatedItemsTree', () => {
       });
 
       describe(types.REORDER_ITEM, () => {
-        it('should reorder an item within children of provided parent based on provided indices', () => {
+        it('should reorder an item within children of provided parent based on provided indexes', () => {
           state.parentItem = { reference: '&1' };
           state.children[state.parentItem.reference] = ['foo', 'bar'];
 
@@ -564,6 +564,90 @@ describe('RelatedItemsTree', () => {
         });
       });
 
+      describe(types.MOVE_ITEM, () => {
+        it('should move an item from one parent to another with children based on provided indexes', () => {
+          const newParentItem = {
+            parentReference: '&2',
+          };
+          state.parentItem = { reference: '&1' };
+          state.children[state.parentItem.reference] = ['foo', 'bar'];
+          state.children[newParentItem.parentReference] = ['baz'];
+
+          mutations[types.MOVE_ITEM](state, {
+            oldParentItem: {
+              reference: '&1',
+            },
+            newParentItem,
+            targetItem: 'bar',
+            oldIndex: 1,
+            newIndex: 0,
+            isFirstChild: false,
+          });
+
+          expect(state.children[state.parentItem.reference]).toEqual(
+            expect.arrayContaining(['foo']),
+          );
+          expect(state.children[newParentItem.parentReference]).toEqual(
+            expect.arrayContaining(['bar', 'baz']),
+          );
+        });
+
+        it('should move an item from one parent to another without children based on provided indexes', () => {
+          const newParentItem = {
+            parentReference: '&2',
+          };
+          state.parentItem = { reference: '&1' };
+          state.children[state.parentItem.reference] = ['foo', 'bar'];
+
+          mutations[types.MOVE_ITEM](state, {
+            oldParentItem: {
+              reference: '&1',
+            },
+            newParentItem,
+            targetItem: 'bar',
+            oldIndex: 1,
+            newIndex: 0,
+            isFirstChild: true,
+          });
+
+          expect(state.children[state.parentItem.reference]).toEqual(
+            expect.arrayContaining(['foo']),
+          );
+          expect(state.children[newParentItem.parentReference]).toEqual(
+            expect.arrayContaining(['bar']),
+          );
+        });
+      });
+
+      describe(types.MOVE_ITEM_FAILURE, () => {
+        it('should move an item from one parent to another with children based on provided indexes', () => {
+          const newParentItem = {
+            parentReference: '&2',
+          };
+          state.parentItem = { reference: '&1' };
+          state.children[state.parentItem.reference] = ['foo'];
+          state.children[newParentItem.parentReference] = ['bar', 'baz'];
+
+          mutations[types.MOVE_ITEM_FAILURE](state, {
+            oldParentItem: {
+              reference: '&1',
+            },
+            newParentItem,
+            targetItem: 'bar',
+            oldIndex: 1,
+            newIndex: 0,
+            isFirstChild: false,
+          });
+
+          expect(state.children[state.parentItem.reference]).toEqual(
+            expect.arrayContaining(['foo', 'bar']),
+          );
+          expect(state.children[newParentItem.parentReference]).toEqual(
+            expect.arrayContaining(['baz']),
+          );
+        });
+      });
+
       describe(types.REQUEST_PROJECTS, () => {
         it('should set `projectsFetchInProgress` to true within state', () => {
           mutations[types.REQUEST_PROJECTS](state);

ee/spec/services/epics/tree_reorder_service_spec.rb

@@ -93,9 +93,18 @@ describe Epics::TreeReorderService do
 
           context 'when no object to switch is provided' do
             let(:adjacent_reference_id) { nil }
+            let(:new_parent_id) { GitlabSchema.id_from_object(epic) }
+
+            before do
+              tree_object_2.update(epic: epic1)
+            end
 
-            it 'raises an error' do
-              expect { subject }.to raise_error(Gitlab::Graphql::Errors::ArgumentError)
+            # it 'raises an error' do
+            #   expect { subject }.to raise_error(Gitlab::Graphql::Errors::ArgumentError)
+            # end
+
+            it 'updates the parent' do
+              expect { subject }.to change { tree_object_2.reload.epic }.from(epic1).to(epic)
             end
           end
 

locale/gitlab.pot

@@ -8276,6 +8276,9 @@ msgstr ""
 msgid "Epics|Something went wrong while fetching group epics."
 msgstr ""
 
+msgid "Epics|Something went wrong while moving item."
+msgstr ""
+
 msgid "Epics|Something went wrong while ordering item."
 msgstr ""