From 03bc9922d1e82020785562b43cf4150bd1927803 Mon Sep 17 00:00:00 2001
From: Scott Stern <sstern@gitlab.com>
Date: Mon, 14 Feb 2022 05:34:53 +0000
Subject: [PATCH] On click of board cards in filtered search, refresh page
Changed: fixed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/80238
---
.../boards/components/board_card_inner.vue | 18 ++----
spec/frontend/boards/board_card_inner_spec.js | 55 ++-----------------
2 files changed, 10 insertions(+), 63 deletions(-)
diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue
index ea80496c3f5a..aee61a5b2a59 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 6de549718d91..677978d31caf 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',
+ );
});
});
});
--
GitLab