diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue index ea80496c3f5a6d590d6eafd2fcfbae5b0ce7fb26..aee61a5b2a59cb33e97a8a8db0005f31fd9f93f9 100644 --- a/app/assets/javascripts/boards/components/board_card_inner.vue +++ b/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> diff --git a/spec/frontend/boards/board_card_inner_spec.js b/spec/frontend/boards/board_card_inner_spec.js index 6de549718d91235ee92463b2261a9cf5e11b6f26..677978d31cafa79f69cc869f79708370d8157bb1 100644 --- a/spec/frontend/boards/board_card_inner_spec.js +++ b/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', + ); }); }); });