Extract toggleFilter() into issue boards store

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

@@ -6,7 +6,6 @@ import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-import eventHub from '../eventhub';
 import IssueDueDate from './issue_due_date.vue';
 import IssueTimeEstimate from './issue_time_estimate.vue';
 import boardsStore from '../stores/boards_store';
@@ -136,23 +135,7 @@ export default {
       const labelTitle = encodeURIComponent(label.title);
       const filter = `label_name[]=${labelTitle}`;
 
-      this.applyFilter(filter);
-    },
-    applyFilter(filter) {
-      const filterPath = boardsStore.filter.path.split('&');
-      const filterIndex = filterPath.indexOf(filter);
-
-      if (filterIndex === -1) {
-        filterPath.push(filter);
-      } else {
-        filterPath.splice(filterIndex, 1);
-      }
-
-      boardsStore.filter.path = filterPath.join('&');
-
-      boardsStore.updateFiltersUrl();
-
-      eventHub.$emit('updateTokens');
+      boardsStore.toggleFilter(filter);
     },
     labelStyle(label) {
       return {

app/assets/javascripts/boards/stores/boards_store.js

@@ -8,6 +8,7 @@ import Cookies from 'js-cookie';
 import BoardsStoreEE from 'ee_else_ce/boards/stores/boards_store_ee';
 import { getUrlParamsArray, parseBoolean } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
+import eventHub from '../eventhub';
 
 const boardsStore = {
   disabled: false,
@@ -188,6 +189,24 @@ const boardsStore = {
   findListByLabelId(id) {
     return this.state.lists.find(list => list.type === 'label' && list.label.id === id);
   },
+
+  toggleFilter(filter) {
+    const filterPath = this.filter.path.split('&');
+    const filterIndex = filterPath.indexOf(filter);
+
+    if (filterIndex === -1) {
+      filterPath.push(filter);
+    } else {
+      filterPath.splice(filterIndex, 1);
+    }
+
+    this.filter.path = filterPath.join('&');
+
+    this.updateFiltersUrl();
+
+    eventHub.$emit('updateTokens');
+  },
+
   updateFiltersUrl() {
     window.history.pushState(null, null, `?${this.filter.path}`);
   },

spec/javascripts/boards/boards_store_spec.js

@@ -12,6 +12,7 @@ import '~/boards/models/issue';
 import '~/boards/models/list';
 import '~/boards/services/board_service';
 import boardsStore from '~/boards/stores/boards_store';
+import eventHub from '~/boards/eventhub';
 import { listObj, listObjDuplicate, boardsMockInterceptor, mockBoardService } from './mock_data';
 
 describe('Store', () => {
@@ -53,6 +54,39 @@ describe('Store', () => {
     });
   });
 
+  describe('toggleFilter', () => {
+    const dummyFilter = 'x=42';
+    let updateTokensSpy;
+
+    beforeEach(() => {
+      updateTokensSpy = jasmine.createSpy('updateTokens');
+      eventHub.$once('updateTokens', updateTokensSpy);
+
+      // prevent using window.history
+      spyOn(boardsStore, 'updateFiltersUrl').and.callFake(() => {});
+    });
+
+    it('adds the filter if it is not present', () => {
+      boardsStore.filter.path = 'something';
+
+      boardsStore.toggleFilter(dummyFilter);
+
+      expect(boardsStore.filter.path).toEqual(`something&${dummyFilter}`);
+      expect(updateTokensSpy).toHaveBeenCalled();
+      expect(boardsStore.updateFiltersUrl).toHaveBeenCalled();
+    });
+
+    it('removes the filter if it is present', () => {
+      boardsStore.filter.path = `something&${dummyFilter}`;
+
+      boardsStore.toggleFilter(dummyFilter);
+
+      expect(boardsStore.filter.path).toEqual('something');
+      expect(updateTokensSpy).toHaveBeenCalled();
+      expect(boardsStore.updateFiltersUrl).toHaveBeenCalled();
+    });
+  });
+
   describe('lists', () => {
     it('creates new list without persisting to DB', () => {
       boardsStore.addList(listObj);