Merge branch 'ss/fix-sidebar-issue-on-epic-boards' into 'master'

Resolve sidebar opening on click of label

See merge request gitlab-org/gitlab!60327

app/assets/javascripts/boards/components/board_card.vue

@@ -46,7 +46,7 @@ export default {
     ...mapActions(['toggleBoardItemMultiSelection', 'toggleBoardItem']),
     toggleIssue(e) {
       // Don't do anything if this happened on a no trigger element
-      if (e.target.classList.contains('js-no-trigger')) return;
+      if (e.target.closest('.js-no-trigger')) return;
 
       const isMultiSelect = e.ctrlKey || e.metaKey;
       if (isMultiSelect) {

app/assets/javascripts/boards/components/board_card_inner.vue

@@ -190,6 +190,7 @@ export default {
       <template v-for="label in orderedLabels">
         <gl-label
           :key="label.id"
+          class="js-no-trigger"
           :background-color="label.color"
           :title="label.title"
           :description="label.description"

changelogs/unreleased/ss-fix-sidebar-issue-on-epic-boards.yml

+---
+title: Fix bug when board card label is clicked
+merge_request: 60327
+author:
+type: fixed

spec/frontend/boards/components/board_card_spec.js

-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlLabel } from '@gitlab/ui';
+import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 
 import BoardCard from '~/boards/components/board_card.vue';
@@ -18,6 +19,7 @@ describe('Board card', () => {
     mockActions = {
       toggleBoardItem: jest.fn(),
       toggleBoardItemMultiSelection: jest.fn(),
+      performSearch: jest.fn(),
     };
 
     store = new Vuex.Store({
@@ -35,12 +37,15 @@ describe('Board card', () => {
   };
 
   // this particular mount component needs to be used after the root beforeEach because it depends on list being initialized
-  const mountComponent = ({ propsData = {}, provide = {} } = {}) => {
-    wrapper = shallowMount(BoardCard, {
+  const mountComponent = ({
+    propsData = {},
+    provide = {},
+    mountFn = shallowMount,
+    stubs = { BoardCardInner },
+  } = {}) => {
+    wrapper = mountFn(BoardCard, {
       localVue,
-      stubs: {
-        BoardCardInner,
-      },
+      stubs,
       store,
       propsData: {
         list: mockLabelList,
@@ -74,6 +79,17 @@ describe('Board card', () => {
     store = null;
   });
 
+  describe('when GlLabel is clicked in BoardCardInner', () => {
+    it('doesnt call toggleBoardItem', () => {
+      createStore({ initialState: { isShowingLabels: true } });
+      mountComponent({ mountFn: mount, stubs: {} });
+
+      wrapper.find(GlLabel).trigger('mouseup');
+
+      expect(mockActions.toggleBoardItem).toHaveBeenCalledTimes(0);
+    });
+  });
+
   describe.each`
     isSwimlanesOn
     ${true}       | ${false}