Merge branch '202008-disable-drag-from-epic-tree-dropdown-button' into 'master'

Resolve "Collapsing and expanding already-loaded epics has no click feedback"

See merge request gitlab-org/gitlab!25729

changelogs/unreleased/202008-disable-drag-from-epic-tree-dropdown-button.yml

+---
+title: Disable draggable behavior on the epic tree chevron (collapse/expand) button
+merge_request: 25729
+author:
+type: changed

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

@@ -42,3 +42,5 @@ export const OVERFLOW_AFTER = 5;
 export const SEARCH_DEBOUNCE = 500;
 
 export const itemRemoveModalId = 'item-remove-confirmation';
+
+export const treeItemChevronBtnClassName = 'btn-tree-item-chevron';

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

 import Draggable from 'vuedraggable';
 
 import defaultSortableConfig from '~/sortable/sortable_config';
-import { idProp, relativePositions } from '../constants';
+import { idProp, relativePositions, treeItemChevronBtnClassName } from '../constants';
 
 export default {
   computed: {
@@ -17,6 +17,10 @@ export default {
         'ghost-class': 'tree-item-drag-active',
         'data-parent-reference': this.parentItem.reference,
         value: this.children,
+        // This filters out/ignores all the chevron buttons (used for
+        // expanding and collapsing epic tree items) so the drag action
+        // can only be performed on the actual item card.
+        filter: `.${treeItemChevronBtnClassName}`,
       };
 
       return this.userSignedIn ? options : {};

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

@@ -7,7 +7,7 @@ import TreeRoot from 'ee/related_items_tree/components/tree_root.vue';
 
 import createDefaultStore from 'ee/related_items_tree/store';
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
-import { ChildType } from 'ee/related_items_tree/constants';
+import { ChildType, treeItemChevronBtnClassName } from 'ee/related_items_tree/constants';
 import { PathIdSeparator } from 'ee/related_issues/constants';
 
 import Icon from '~/vue_shared/components/icon.vue';
@@ -142,6 +142,12 @@ describe('RelatedItemsTree', () => {
         expect(chevronButton.attributes('title')).toBe('Collapse');
       });
 
+      it('has the proper class on the expand/collapse button to avoid dragging', () => {
+        const chevronButton = wrapper.find(GlButton);
+
+        expect(chevronButton.attributes('class')).toContain(treeItemChevronBtnClassName);
+      });
+
       it('renders expand/collapse icon', () => {
         const expandedIcon = wrapperExpanded.find(Icon);
         const collapsedIcon = wrapperCollapsed.find(Icon);

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

@@ -7,6 +7,7 @@ import TreeRoot from 'ee/related_items_tree/components/tree_root.vue';
 
 import createDefaultStore from 'ee/related_items_tree/store';
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
+import { treeItemChevronBtnClassName } from 'ee/related_items_tree/constants';
 
 import {
   mockQueryResponse,
@@ -116,6 +117,7 @@ describe('RelatedItemsTree', () => {
                   'ghost-class': 'tree-item-drag-active',
                   'data-parent-reference': mockParentItem.reference,
                   value: wrapper.vm.children,
+                  filter: `.${treeItemChevronBtnClassName}`,
                 }),
               );
             });