Merge branch 'swimlanes/fix-grabbing-cursor' into 'master'

Swimlanes - Fix grabbing cursor on drag

See merge request gitlab-org/gitlab!46938

ee/app/assets/javascripts/boards/components/issues_lane_list.vue

@@ -103,7 +103,11 @@ export default {
     showIssue(issue) {
       this.setActiveId({ id: issue.id, sidebarType: ISSUABLE });
     },
+    handleDragOnStart() {
+      document.body.classList.add('is-dragging');
+    },
     handleDragOnEnd(params) {
+      document.body.classList.remove('is-dragging');
       const { newIndex, oldIndex, from, to, item } = params;
       const { issueId, issueIid, issuePath } = item.dataset;
       const { children } = to;
@@ -163,6 +167,8 @@ export default {
         v-if="list.isExpanded"
         v-bind="treeRootOptions"
         class="board-cell gl-p-2 gl-m-0 gl-h-full"
+        data-testid="tree-root-wrapper"
+        @start="handleDragOnStart"
         @end="handleDragOnEnd"
       >
         <board-card-layout

ee/spec/frontend/boards/components/issues_lane_list_spec.js

@@ -55,6 +55,7 @@ describe('IssuesLaneList', () => {
         list,
         issues: mockIssues,
         disabled: false,
+        canAdminList: true,
       },
     });
   };
@@ -96,4 +97,52 @@ describe('IssuesLaneList', () => {
       expect(wrapper.findAll(BoardCard)).toHaveLength(0);
     });
   });
+
+  describe('drag & drop issue', () => {
+    beforeEach(() => {
+      const defaultStore = createStore();
+      store = {
+        ...defaultStore,
+        state: {
+          ...defaultStore.state,
+          canAdminEpic: true,
+        },
+      };
+
+      createComponent();
+    });
+
+    describe('handleDragOnStart', () => {
+      it('adds a class `is-dragging` to document body', () => {
+        expect(document.body.classList.contains('is-dragging')).toBe(false);
+
+        wrapper.find(`[data-testid="tree-root-wrapper"]`).vm.$emit('start');
+
+        expect(document.body.classList.contains('is-dragging')).toBe(true);
+      });
+    });
+
+    describe('handleDragOnEnd', () => {
+      it('removes class `is-dragging` from document body', () => {
+        jest.spyOn(wrapper.vm, 'moveIssue').mockImplementation(() => {});
+        document.body.classList.add('is-dragging');
+
+        wrapper.find(`[data-testid="tree-root-wrapper"]`).vm.$emit('end', {
+          oldIndex: 1,
+          newIndex: 0,
+          item: {
+            dataset: {
+              issueId: mockIssues[0].id,
+              issueIid: mockIssues[0].iid,
+              issuePath: mockIssues[0].referencePath,
+            },
+          },
+          to: { children: [], dataset: { listId: 'gid://gitlab/List/1' } },
+          from: { dataset: { listId: 'gid://gitlab/List/2' } },
+        });
+
+        expect(document.body.classList.contains('is-dragging')).toBe(false);
+      });
+    });
+  });
 });