Add a delay before expanding epic

Adds a momentary delay before expanding an epic with
children when user tries to drag over an item.

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

@@ -2,7 +2,7 @@
 import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 
-import { ChildType } from '../constants';
+import { ChildType, EXPAND_DELAY } from '../constants';
 import TreeDragAndDropMixin from '../mixins/tree_dd_mixin';
 
 export default {
@@ -24,6 +24,8 @@ export default {
   data() {
     return {
       fetchInProgress: false,
+      currentClientX: 0,
+      currentClientY: 0,
     };
   },
   computed: {
@@ -48,13 +50,34 @@ export default {
           this.fetchInProgress = false;
         });
     },
-    onMove(e) {
+    onMove(e, originalEvent) {
       const item = e.relatedContext.element;
-      if (item?.type === ChildType.Epic)
-        this.toggleItem({
-          parentItem: item,
-          isDragging: true,
-        });
+      const { clientX, clientY } = originalEvent;
+
+      // Cache current cursor position
+      this.currentClientX = clientX;
+      this.currentClientY = clientY;
+
+      // Check if current item is an Epic, and has any children.
+      if (item?.type === ChildType.Epic && (item.hasChildren || item.hasIssues)) {
+        const { top, left } = originalEvent.target.getBoundingClientRect();
+
+        // Check if user has paused cursor on top of current item's boundary
+        if (clientY >= top && clientX >= left) {
+          // Wait for moment before expanding the epic
+          this.toggleTimer = setTimeout(() => {
+            // Ensure that current cursor position is still within item's boundary
+            if (this.currentClientX === clientX && this.currentClientY === clientY) {
+              this.toggleItem({
+                parentItem: item,
+                isDragging: true,
+              });
+            }
+          }, EXPAND_DELAY);
+        } else {
+          clearTimeout(this.toggleTimer);
+        }
+      }
     },
   },
 };

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

@@ -41,6 +41,8 @@ export const OVERFLOW_AFTER = 5;
 
 export const SEARCH_DEBOUNCE = 500;
 
+export const EXPAND_DELAY = 1000;
+
 export const itemRemoveModalId = 'item-remove-confirmation';
 
 export const treeItemChevronBtnClassName = 'btn-tree-item-chevron';

ee/changelogs/unreleased/323866-delay-expanding-epic-during-drag-drop.yml

+---
+title: Add a delay before expanding epic within tree during drag and drop
+merge_request: 58282
+author:
+type: changed

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

@@ -377,26 +377,67 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('onMove', () => {
-        it('calls toggleItem action if move event finds epic element', () => {
-          jest.spyOn(wrapper.vm, 'toggleItem').mockImplementation(() => {});
-          const evt = {
+        let mockEvt;
+        let mockOriginalEvt;
+
+        beforeEach(() => {
+          mockEvt = {
             relatedContext: {
               element: mockParentItem,
             },
           };
-          wrapper.vm.onMove(evt);
+          mockOriginalEvt = {
+            clientX: 10,
+            clientY: 10,
+            target: {
+              getBoundingClientRect() {
+                return {
+                  top: 5,
+                  left: 5,
+                };
+              },
+            },
+          };
+        });
+
+        it('calls toggleItem action after a delay if move event finds epic with children and mouse cursor is over it', () => {
+          jest.spyOn(wrapper.vm, 'toggleItem').mockImplementation(() => {});
+          wrapper.vm.onMove(mockEvt, mockOriginalEvt);
+
+          jest.runAllTimers();
 
           expect(wrapper.vm.toggleItem).toHaveBeenCalled();
         });
 
-        it(' does not call toggleItem action if move event does not find epic element', () => {
+        it('does not call toggleItem action if move event does not find epic with children', () => {
           jest.spyOn(wrapper.vm, 'toggleItem').mockImplementation(() => {});
-          const evt = {
+          mockEvt = {
             relatedContext: {
               element: mockIssue2,
             },
           };
-          wrapper.vm.onMove(evt);
+          mockOriginalEvt = {
+            clientX: 10,
+            clientY: 10,
+          };
+
+          wrapper.vm.onMove(mockEvt, mockOriginalEvt);
+
+          expect(wrapper.vm.toggleItem).not.toHaveBeenCalled();
+        });
+
+        it('does not call toggleItem action if move event no longer have cursor over an epic with children', () => {
+          jest.spyOn(wrapper.vm, 'toggleItem').mockImplementation(() => {});
+
+          wrapper.vm.onMove(mockEvt, mockOriginalEvt);
+
+          // Simulate cursor movement.
+          wrapper.setData({
+            currentClientX: 10,
+            currentClientY: 20,
+          });
+
+          jest.runAllTimers();
 
           expect(wrapper.vm.toggleItem).not.toHaveBeenCalled();
         });

ee/spec/frontend/related_items_tree/mock_data.js

@@ -18,6 +18,8 @@ export const mockParentItem = {
   title: 'Some sample epic',
   reference: 'gitlab-org&1',
   type: 'Epic',
+  hasChildren: true,
+  hasIssues: true,
   userPermissions: {
     adminEpic: true,
     createEpic: true,