Merge branch 'ss/filtered-search-label-select' into 'master'

On click of board cards in filtered search, refresh page

See merge request gitlab-org/gitlab!80238

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

@@ -11,12 +11,10 @@ import { sortBy } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import boardCardInner from 'ee_else_ce/boards/mixins/board_card_inner';
 import { isScopedLabel } from '~/lib/utils/common_utils';
-import { updateHistory } from '~/lib/utils/url_utility';
 import { sprintf, __, n__ } from '~/locale';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import { ListType } from '../constants';
-import eventHub from '../eventhub';
 import BoardBlockedIcon from './board_blocked_icon.vue';
 import IssueDueDate from './issue_due_date.vue';
 import IssueTimeEstimate from './issue_time_estimate.vue';
@@ -176,18 +174,10 @@ export default {
         )
       );
     },
-    filterByLabel(label) {
-      if (!this.updateFilters) return;
+    labelTarget(label) {
       const filterPath = window.location.search ? `${window.location.search}&` : '?';
-      const filter = `label_name[]=${encodeURIComponent(label.title)}`;
-
-      if (!filterPath.includes(filter)) {
-        updateHistory({
-          url: `${filterPath}${filter}`,
-        });
-        this.performSearch();
-        eventHub.$emit('updateTokens');
-      }
+      const value = encodeURIComponent(label.title);
+      return `${filterPath}label_name[]=${value}`;
     },
     showScopedLabel(label) {
       return this.scopedLabelsAvailable && isScopedLabel(label);
@@ -242,7 +232,7 @@ export default {
           :description="label.description"
           size="sm"
           :scoped="showScopedLabel(label)"
-          @click="filterByLabel(label)"
+          :target="labelTarget(label)"
         />
       </template>
     </div>

spec/frontend/boards/board_card_inner_spec.js

@@ -2,15 +2,12 @@ import { GlLabel, GlLoadingIcon, GlTooltip } from '@gitlab/ui';
 import { range } from 'lodash';
 import Vuex from 'vuex';
 import { nextTick } from 'vue';
-import setWindowLocation from 'helpers/set_window_location_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import BoardBlockedIcon from '~/boards/components/board_blocked_icon.vue';
 import BoardCardInner from '~/boards/components/board_card_inner.vue';
 import { issuableTypes } from '~/boards/constants';
-import eventHub from '~/boards/eventhub';
 import defaultStore from '~/boards/stores';
-import { updateHistory } from '~/lib/utils/url_utility';
 import { mockLabelList, mockIssue, mockIssueFullPath } from './mock_data';
 
 jest.mock('~/lib/utils/url_utility');
@@ -54,6 +51,7 @@ describe('Board card component', () => {
       state: {
         ...defaultStore.state,
         issuableType: issuableTypes.issue,
+        isShowingLabels: true,
       },
       getters: {
         isGroupBoard: () => true,
@@ -405,53 +403,12 @@ describe('Board card component', () => {
       expect(wrapper.findAll(GlLabel).length).toBe(1);
       expect(wrapper.text()).not.toContain('closed');
     });
-  });
-
-  describe('filterByLabel method', () => {
-    beforeEach(() => {
-      wrapper.setProps({
-        updateFilters: true,
-      });
-    });
-
-    describe('when selected label is not in the filter', () => {
-      beforeEach(() => {
-        jest.spyOn(wrapper.vm, 'performSearch').mockImplementation(() => {});
-        setWindowLocation('?');
-        wrapper.vm.filterByLabel(label1);
-      });
-
-      it('calls updateHistory', () => {
-        expect(updateHistory).toHaveBeenCalledTimes(1);
-      });
-
-      it('dispatches performSearch vuex action', () => {
-        expect(wrapper.vm.performSearch).toHaveBeenCalledTimes(1);
-      });
-
-      it('emits updateTokens event', () => {
-        expect(eventHub.$emit).toHaveBeenCalledTimes(1);
-        expect(eventHub.$emit).toHaveBeenCalledWith('updateTokens');
-      });
-    });
-
-    describe('when selected label is already in the filter', () => {
-      beforeEach(() => {
-        jest.spyOn(wrapper.vm, 'performSearch').mockImplementation(() => {});
-        setWindowLocation('?label_name[]=testing%20123');
-        wrapper.vm.filterByLabel(label1);
-      });
-
-      it('does not call updateHistory', () => {
-        expect(updateHistory).not.toHaveBeenCalled();
-      });
 
-      it('does not dispatch performSearch vuex action', () => {
-        expect(wrapper.vm.performSearch).not.toHaveBeenCalled();
-      });
-
-      it('does not emit updateTokens event', () => {
-        expect(eventHub.$emit).not.toHaveBeenCalled();
+    describe('when label params arent set', () => {
+      it('passes the right target to GlLabel', () => {
+        expect(wrapper.findAll(GlLabel).at(0).props('target')).toEqual(
+          '?label_name[]=testing%20123',
+        );
       });
     });
   });