Update hide labels from issue board cards

This commit fixes comments given on a merge request

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

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

app/assets/stylesheets/pages/boards.scss

@@ -546,9 +546,12 @@
   cursor: help;
 }
 
-.boards-labels-toggle-wrapper {
-  display: flex;
-  align-items: center;
+.board-labels-toggle-wrapper {
+  /**
+   * Make the wrapper the same height as a button so it aligns properly when the
+   * filtered-search-box input element increases in size on Linux smaller breakpoints
+   */
+  height: 34px;
 
   label {
     font-weight: $gl-font-weight-normal;

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

@@ -147,7 +147,7 @@
 
           %button.clear-search.hidden{ type: 'button' }
             = icon('times')
-        #boards-labels-toggle
+        #js-board-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

@@ -10,7 +10,7 @@ export default {
   ...actionsCE,
 
   toggleShowLabels({ commit }) {
-    commit(types.TOGGLE_SHOW_LABELS);
+    commit(types.TOGGLE_LABELS);
   },
 
   fetchAllBoards: () => {

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

@@ -11,4 +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';
+export const TOGGLE_LABELS = 'TOGGLE_LABELS';

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

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

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

@@ -7,17 +7,21 @@ import store from '~/boards/stores';
 
 export default () =>
   new Vue({
-    el: document.getElementById('boards-labels-toggle'),
+    el: document.getElementById('js-board-labels-toggle'),
     components: {
       GlToggle,
     },
     store,
-    data: {
-      toggleLabel: __('Show labels'),
-    },
     computed: {
       ...mapState(['isShowingLabels']),
-      ...mapGetters(['getSnowplowLabelToggleState']),
+      ...mapGetters(['getLabelToggleState']),
+
+      toggleOnLabel() {
+        return __('Showing all labels');
+      },
+      toggleOffLabel() {
+        return __('Hiding all labels');
+      },
     },
     methods: {
       ...mapActions(['toggleShowLabels']),
@@ -27,21 +31,21 @@ export default () =>
 
         Tracking.event(document.body.dataset.page, 'toggle', {
           label: 'show_labels',
-          property: this.getSnowplowLabelToggleState,
+          property: this.getLabelToggleState,
         });
       },
     },
     template: `
-      <div class="boards-labels-toggle-wrapper prepend-left-10">
-        <span id="boards-labels-toggle-text">
-          {{toggleLabel}}
+      <div class="board-labels-toggle-wrapper d-flex align-items-center prepend-left-10">
+        <span id="board-labels-toggle-text">
+          {{ __('Show labels') }}
         </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"
+          :label-on="toggleOnLabel"
+          :label-off="toggleOffLabel"
+          aria-describedby="board-labels-toggle-text"
           data-qa-selector="show_labels_toggle"
           @change="onToggle"
         />

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

@@ -9,19 +9,12 @@ const expectNotImplemented = action => {
 };
 
 describe('toggleShowLabels', () => {
-  it('should commit mutation TOGGLE_SHOW_LABELS', done => {
+  it('should commit mutation TOGGLE_LABELS', done => {
     const state = {
       isShowingLabels: true,
     };
 
-    testAction(
-      actions.toggleShowLabels,
-      null,
-      state,
-      [{ type: types.TOGGLE_SHOW_LABELS }],
-      [],
-      done,
-    );
+    testAction(actions.toggleShowLabels, null, state, [{ type: types.TOGGLE_LABELS }], [], done);
   });
 });
 

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

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

locale/gitlab.pot

@@ -8593,6 +8593,9 @@ msgstr[1] ""
 msgid "Hide values"
 msgstr ""
 
+msgid "Hiding all labels"
+msgstr ""
+
 msgid "Highest number of requests per minute for each raw path, default to 300. To disable throttling set to 0."
 msgstr ""
 
@@ -15050,9 +15053,6 @@ msgstr ""
 msgid "Show file browser"
 msgstr ""
 
-msgid "Show labels"
-msgstr ""
-
 msgid "Show latest version"
 msgstr ""
 
@@ -15082,6 +15082,9 @@ msgstr ""
 msgid "Showing all issues"
 msgstr ""
 
+msgid "Showing all labels"
+msgstr ""
+
 msgid "Showing last %{size} of log -"
 msgstr ""
 

spec/frontend/boards/stores/getters_spec.js

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