Hide labels from issue board cards

This commit creates a toggle button on the Issue Boards page which
shows and hides all labels on the page

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

 <script>
 import _ from 'underscore';
+import { mapState } from 'vuex';
 import { GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -63,6 +64,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(['isShowingLabels']),
     numberOverLimit() {
       return this.issue.assignees.length - this.limitBeforeCounter;
     },
@@ -92,7 +94,7 @@ export default {
       return false;
     },
     showLabelFooter() {
-      return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
+      return this.isShowingLabels && this.issue.labels.find(this.showLabel);
     },
     issueReferencePath() {
       const { referencePath, groupId } = this.issue;

app/assets/javascripts/boards/index.js

@@ -13,6 +13,7 @@ import 'ee_else_ce/boards/models/issue';
 import 'ee_else_ce/boards/models/list';
 import '~/boards/models/milestone';
 import '~/boards/models/project';
+import store from '~/boards/stores';
 import boardsStore from '~/boards/stores/boards_store';
 import ModalStore from '~/boards/stores/modal_store';
 import BoardService from 'ee_else_ce/boards/services/board_service';
@@ -29,6 +30,7 @@ import {
 } from '~/lib/utils/common_utils';
 import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
 import toggleFocusMode from 'ee_else_ce/boards/toggle_focus';
+import toggleLabels from 'ee_else_ce/boards/toggle_labels';
 import {
   setPromotionState,
   setWeigthFetchingState,
@@ -67,6 +69,7 @@ export default () => {
       BoardSidebar,
       BoardAddIssuesModal,
     },
+    store,
     data: {
       state: boardsStore.state,
       loading: true,
@@ -314,5 +317,6 @@ export default () => {
   }
 
   toggleFocusMode(ModalStore, boardsStore, $boardApp);
+  toggleLabels();
   mountMultipleBoardsSwitcher();
 };

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

+export default {
+  getSnowplowLabelToggleState: state => (state.isShowingLabels ? 'on' : 'off'),
+};

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

 import Vue from 'vue';
 import Vuex from 'vuex';
 import state from 'ee_else_ce/boards/stores/state';
+import getters from 'ee_else_ce/boards/stores/getters';
 import actions from 'ee_else_ce/boards/stores/actions';
 import mutations from 'ee_else_ce/boards/stores/mutations';
 
 Vue.use(Vuex);
 
-export default () =>
+export const createStore = () =>
   new Vuex.Store({
     state,
+    getters,
     actions,
     mutations,
   });
+
+export default createStore();

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

 export default () => ({
-  // ...
+  isShowingLabels: true,
 });

app/assets/javascripts/boards/toggle_labels.js

+export default () => {};

app/assets/stylesheets/pages/boards.scss

@@ -545,3 +545,17 @@
 .board-issue-path.js-show-tooltip {
   cursor: help;
 }
+
+.boards-labels-toggle-wrapper {
+  display: flex;
+  align-items: center;
+
+  label {
+    font-weight: $gl-font-weight-normal;
+    margin-bottom: 0;
+  }
+
+  @include media-breakpoint-down(sm) {
+    margin-bottom: 10px;
+  }
+}

app/views/shared/issuable/_search_bar.html.haml

@@ -147,6 +147,7 @@
 
           %button.clear-search.hidden{ type: 'button' }
             = icon('times')
+        #boards-labels-toggle
         .filter-dropdown-container.d-flex.flex-column.flex-md-row
           - if type == :boards
             .js-board-config{ data: { can_admin_list: user_can_admin_list, has_scope: board.scoped? } }

ee/app/assets/javascripts/boards/stores/actions.js

 import actionsCE from '~/boards/stores/actions';
+import * as types from './mutation_types';
 
 const notImplemented = () => {
   /* eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings */
@@ -8,6 +9,10 @@ const notImplemented = () => {
 export default {
   ...actionsCE,
 
+  toggleShowLabels({ commit }) {
+    commit(types.TOGGLE_SHOW_LABELS);
+  },
+
   fetchAllBoards: () => {
     notImplemented();
   },

ee/app/assets/javascripts/boards/stores/getters.js

+import gettersCE from '~/boards/stores/getters';
+
+export default {
+  ...gettersCE,
+};

ee/app/assets/javascripts/boards/stores/mutation_types.js

@@ -11,3 +11,4 @@ export const REQUEST_REMOVE_BOARD = 'REQUEST_REMOVE_BOARD';
 export const RECEIVE_REMOVE_BOARD_SUCCESS = 'RECEIVE_REMOVE_BOARD_SUCCESS';
 export const RECEIVE_REMOVE_BOARD_ERROR = 'RECEIVE_REMOVE_BOARD_ERROR';
 export const TOGGLE_PROMOTION_STATE = 'TOGGLE_PROMOTION_STATE';
+export const TOGGLE_SHOW_LABELS = 'TOGGLE_SHOW_LABELS';

ee/app/assets/javascripts/boards/stores/mutations.js

@@ -6,6 +6,12 @@ const notImplemented = () => {
 };
 
 export default {
+  [mutationTypes.TOGGLE_SHOW_LABELS]: state => {
+    Object.assign(state, {
+      isShowingLabels: !state.isShowingLabels,
+    });
+  },
+
   [mutationTypes.REQUEST_AVAILABLE_BOARDS]: () => {
     notImplemented();
   },

ee/app/assets/javascripts/boards/toggle_labels.js

+import Vue from 'vue';
+import { mapState, mapGetters, mapActions } from 'vuex';
+import { GlToggle } from '@gitlab/ui';
+import { __ } from '~/locale';
+import Tracking from '~/tracking';
+import store from '~/boards/stores';
+
+export default () =>
+  new Vue({
+    el: document.getElementById('boards-labels-toggle'),
+    components: {
+      GlToggle,
+    },
+    store,
+    data: {
+      toggleLabel: __('Show labels'),
+    },
+    computed: {
+      ...mapState(['isShowingLabels']),
+      ...mapGetters(['getSnowplowLabelToggleState']),
+    },
+    methods: {
+      ...mapActions(['toggleShowLabels']),
+
+      onToggle() {
+        this.toggleShowLabels();
+
+        Tracking.event(document.body.dataset.page, 'toggle', {
+          label: 'show_labels',
+          property: this.getSnowplowLabelToggleState,
+        });
+      },
+    },
+    template: `
+      <div class="boards-labels-toggle-wrapper prepend-left-10">
+        <span id="boards-labels-toggle-text">
+          {{toggleLabel}}
+        </span>
+        <gl-toggle
+          :value="isShowingLabels"
+          class="prepend-left-10"
+          label-on="Showing all labels"
+          label-off="Hiding all labels"
+          aria-describedby="boards-labels-toggle-text"
+          data-qa-selector="show_labels_toggle"
+          @change="onToggle"
+        />
+      </div>
+    `,
+  });

ee/changelogs/unreleased/9838-hide-labels-from-issue-board-cards.yml

+---
+title: Hide labels from issue board cards
+merge_request: 18533
+author:
+type: added

ee/spec/frontend/boards/issue_card_spec.js

@@ -3,14 +3,16 @@ import ListLabel from '~/boards/models/label';
 import IssueCardInner from '~/boards/components/issue_card_inner.vue';
 import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue';
 import ListIssueEE from 'ee/boards/models/issue';
+import defaultStore from '~/boards/stores';
 
 describe('Issue card component', () => {
   let wrapper;
   let issue;
   let list;
 
-  const createComponent = (props = {}) => {
+  const createComponent = (props = {}, store = defaultStore) => {
     wrapper = mount(IssueCardInner, {
+      store,
       propsData: {
         list,
         issue,
@@ -87,6 +89,19 @@ describe('Issue card component', () => {
       expect(wrapper.findAll('.badge').length).toBe(3);
       expect(wrapper.text()).toContain(title);
     });
+
+    it('shows no labels when the isShowingLabels state is false', () => {
+      const store = {
+        ...defaultStore,
+        state: {
+          ...defaultStore.state,
+          isShowingLabels: false,
+        },
+      };
+      createComponent({}, store);
+
+      expect(wrapper.findAll('.board-card-labels').length).toBe(0);
+    });
   });
 
   describe('weight', () => {

ee/spec/frontend/boards/stores/actions_spec.js

 import actions from 'ee/boards/stores/actions';
+import * as types from 'ee/boards/stores/mutation_types';
+import testAction from 'helpers/vuex_action_helper';
 
 const expectNotImplemented = action => {
   it('is not implemented', () => {
@@ -6,6 +8,23 @@ const expectNotImplemented = action => {
   });
 };
 
+describe('toggleShowLabels', () => {
+  it('should commit mutation TOGGLE_SHOW_LABELS', done => {
+    const state = {
+      isShowingLabels: true,
+    };
+
+    testAction(
+      actions.toggleShowLabels,
+      null,
+      state,
+      [{ type: types.TOGGLE_SHOW_LABELS }],
+      [],
+      done,
+    );
+  });
+});
+
 describe('fetchAllBoards', () => {
   expectNotImplemented(actions.fetchAllBoards);
 });

ee/spec/frontend/boards/stores/mutations_spec.js

@@ -6,6 +6,28 @@ const expectNotImplemented = action => {
   });
 };
 
+describe('TOGGLE_SHOW_LABELS', () => {
+  it('toggles isShowingLabels from true to false', () => {
+    const state = {
+      isShowingLabels: true,
+    };
+
+    mutations.TOGGLE_SHOW_LABELS(state);
+
+    expect(state.isShowingLabels).toBe(false);
+  });
+
+  it('toggles isShowingLabels from false to true', () => {
+    const state = {
+      isShowingLabels: false,
+    };
+
+    mutations.TOGGLE_SHOW_LABELS(state);
+
+    expect(state.isShowingLabels).toBe(true);
+  });
+});
+
 describe('REQUEST_AVAILABLE_BOARDS', () => {
   expectNotImplemented(mutations.REQUEST_AVAILABLE_BOARDS);
 });

locale/gitlab.pot

@@ -15050,6 +15050,9 @@ msgstr ""
 msgid "Show file browser"
 msgstr ""
 
+msgid "Show labels"
+msgstr ""
+
 msgid "Show latest version"
 msgstr ""
 

spec/frontend/boards/stores/getters_spec.js

+import getters from '~/boards/stores/getters';
+
+describe('Boards - Getters', () => {
+  describe('getSnowplowLabelToggleState', () => {
+    it('should return "on" when isShowingLabels is true', () => {
+      const state = {
+        isShowingLabels: true,
+      };
+
+      expect(getters.getSnowplowLabelToggleState(state)).toBe('on');
+    });
+
+    it('should return "off" when isShowingLabels is false', () => {
+      const state = {
+        isShowingLabels: false,
+      };
+
+      expect(getters.getSnowplowLabelToggleState(state)).toBe('off');
+    });
+  });
+});

spec/javascripts/boards/board_card_spec.js

@@ -10,6 +10,7 @@ import eventHub from '~/boards/eventhub';
 import '~/boards/models/label';
 import '~/boards/models/assignee';
 import '~/boards/models/list';
+import store from '~/boards/stores';
 import boardsStore from '~/boards/stores/boards_store';
 import boardCard from '~/boards/components/board_card.vue';
 import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
@@ -40,6 +41,7 @@ describe('Board card', () => {
       list.issues[0].labels.push(label1);
 
       vm = new BoardCardComp({
+        store,
         propsData: {
           list,
           issue: list.issues[0],

spec/javascripts/boards/board_list_common_spec.js

@@ -10,6 +10,7 @@ import BoardList from '~/boards/components/board_list.vue';
 import '~/boards/models/issue';
 import '~/boards/models/list';
 import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
+import store from '~/boards/stores';
 import boardsStore from '~/boards/stores/boards_store';
 
 window.Sortable = Sortable;
@@ -39,6 +40,7 @@ export default function createComponent({ done, listIssueProps = {}, componentPr
 
   const component = new BoardListComp({
     el,
+    store,
     propsData: {
       disabled: false,
       list,

spec/javascripts/boards/issue_card_spec.js

@@ -10,6 +10,7 @@ import '~/boards/models/issue';
 import '~/boards/models/list';
 import IssueCardInner from '~/boards/components/issue_card_inner.vue';
 import { listObj } from './mock_data';
+import store from '~/boards/stores';
 
 describe('Issue card component', () => {
   const user = new ListAssignee({
@@ -50,6 +51,7 @@ describe('Issue card component', () => {
 
     component = new Vue({
       el: document.querySelector('.test-container'),
+      store,
       components: {
         'issue-card': IssueCardInner,
       },