Make "show labels" toggle persist with localStorage

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/34728

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

@@ -63,8 +63,8 @@ const fetchEpics = ({ endpoints }) => {
 export default {
   ...actionsCE,
 
-  toggleShowLabels({ commit }) {
-    commit(types.TOGGLE_LABELS);
+  setShowLabels({ commit }, val) {
+    commit(types.SET_SHOW_LABELS, val);
   },
 
   setActiveListId({ commit }, listId) {

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

@@ -11,9 +11,9 @@ 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_LABELS = 'TOGGLE_LABELS';
 export const TOGGLE_EPICS_SWIMLANES = 'TOGGLE_EPICS_SWIMLANES';
 export const RECEIVE_SWIMLANES_SUCCESS = 'RECEIVE_SWIMLANES_SUCCESS';
 export const RECEIVE_SWIMLANES_FAILURE = 'RECEIVE_SWIMLANES_FAILURE';
 export const RECEIVE_EPICS_SUCCESS = 'RECEIVE_EPICS_SUCCESS';
 export const SET_ACTIVE_LIST_ID = 'SET_ACTIVE_LIST_ID';
+export const SET_SHOW_LABELS = 'SET_SHOW_LABELS';

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

@@ -8,8 +8,8 @@ const notImplemented = () => {
 
 export default {
   ...mutationsCE,
-  [mutationTypes.TOGGLE_LABELS]: state => {
-    state.isShowingLabels = !state.isShowingLabels;
+  [mutationTypes.SET_SHOW_LABELS]: (state, val) => {
+    state.isShowingLabels = val;
   },
   [mutationTypes.SET_ACTIVE_LIST_ID]: (state, id) => {
     state.activeListId = id;

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

@@ -3,12 +3,14 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 import { GlToggle } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import store from '~/boards/stores';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
 export default () =>
   new Vue({
     el: document.getElementById('js-board-labels-toggle'),
     components: {
       GlToggle,
+      LocalStorageSync,
     },
     store,
     computed: {
@@ -16,19 +18,24 @@ export default () =>
       ...mapGetters(['getLabelToggleState']),
     },
     methods: {
-      ...mapActions(['toggleShowLabels']),
+      ...mapActions(['setShowLabels']),
 
-      onToggle() {
-        this.toggleShowLabels();
+      onToggle(val) {
+        this.setShowLabels(val);
 
         Tracking.event(document.body.dataset.page, 'toggle', {
           label: 'show_labels',
           property: this.getLabelToggleState,
         });
       },
+
+      onStorageUpdate(val) {
+        this.setShowLabels(JSON.parse(val));
+      },
     },
     template: `
       <div class="board-labels-toggle-wrapper d-flex align-items-center prepend-left-10">
+        <local-storage-sync storage-key="gl-show-board-labels" :value="JSON.stringify(isShowingLabels)" @input="onStorageUpdate" />
         <gl-toggle
           :value="isShowingLabels"
           label="Show labels"

ee/changelogs/unreleased/jl-sticky-label-toggle.yml

+---
+title: Update the "show labels" toggle on boards to persist using localStorage
+merge_request: 34728
+author:
+type: changed

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

@@ -13,13 +13,20 @@ const expectNotImplemented = action => {
   });
 };
 
-describe('toggleShowLabels', () => {
-  it('should commit mutation TOGGLE_LABELS', done => {
+describe('setShowLabels', () => {
+  it('should commit mutation SET_SHOW_LABELS', done => {
     const state = {
       isShowingLabels: true,
     };
 
-    testAction(actions.toggleShowLabels, null, state, [{ type: types.TOGGLE_LABELS }], [], done);
+    testAction(
+      actions.setShowLabels,
+      false,
+      state,
+      [{ type: types.SET_SHOW_LABELS, payload: false }],
+      [],
+      done,
+    );
   });
 });
 

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

@@ -8,26 +8,16 @@ const expectNotImplemented = action => {
   });
 };
 
-describe('TOGGLE_LABELS', () => {
-  it('toggles isShowingLabels from true to false', () => {
+describe('SET_SHOW_LABELS', () => {
+  it('updates isShowingLabels', () => {
     const state = {
       isShowingLabels: true,
     };
 
-    mutations.TOGGLE_LABELS(state);
+    mutations.SET_SHOW_LABELS(state, false);
 
     expect(state.isShowingLabels).toBe(false);
   });
-
-  it('toggles isShowingLabels from false to true', () => {
-    const state = {
-      isShowingLabels: false,
-    };
-
-    mutations.TOGGLE_LABELS(state);
-
-    expect(state.isShowingLabels).toBe(true);
-  });
 });
 
 describe('SET_ACTIVE_LIST_ID', () => {