Merge branch...

Merge branch '337422-on-issue-boards-the-list-of-active-labels-in-labels-dropdown-is-not-updated-when-clicking-on' into 'master'

Fix setting active labels in the dropdown on board sidebar

See merge request gitlab-org/gitlab!67322

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue

@@ -142,6 +142,7 @@ export default {
       this.setInitialState({
         selectedLabels,
       });
+      setTimeout(() => this.updateLabelsSetState(), 100);
     },
     showDropdownContents(showDropdownContents) {
       this.setContentIsOnViewport(showDropdownContents);
@@ -184,7 +185,7 @@ export default {
     document.removeEventListener('click', this.handleDocumentClick);
   },
   methods: {
-    ...mapActions(['setInitialState', 'toggleDropdownContents']),
+    ...mapActions(['setInitialState', 'toggleDropdownContents', 'updateLabelsSetState']),
     /**
      * This method differentiates between
      * dispatched actions and calls necessary method.

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js

@@ -65,3 +65,5 @@ export const createLabel = ({ state, dispatch }, label) => {
 
 export const updateSelectedLabels = ({ commit }, labels) =>
   commit(types.UPDATE_SELECTED_LABELS, { labels });
+
+export const updateLabelsSetState = ({ commit }) => commit(types.UPDATE_LABELS_SET_STATE);

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutation_types.js

@@ -18,3 +18,5 @@ export const TOGGLE_DROPDOWN_CONTENTS = 'TOGGLE_DROPDOWN_CONTENTS';
 export const UPDATE_SELECTED_LABELS = 'UPDATE_SELECTED_LABELS';
 
 export const TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW = 'TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW';
+
+export const UPDATE_LABELS_SET_STATE = 'UPDATE_LABELS_SET_STATE';

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js

@@ -34,16 +34,12 @@ export default {
     // Iterate over every label and add a `set` prop
     // to determine whether it is already a part of
     // selectedLabels array.
-    const selectedLabelIds = state.selectedLabels.map((label) => label.id);
     state.labelsFetchInProgress = false;
     state.labelsFetched = true;
-    state.labels = labels.reduce((allLabels, label) => {
-      allLabels.push({
-        ...label,
-        set: selectedLabelIds.includes(label.id),
-      });
-      return allLabels;
-    }, []);
+    state.labels = labels.map((label) => ({
+      ...label,
+      set: state.selectedLabels.some((selectedLabel) => selectedLabel.id === label.id),
+    }));
   },
   [types.RECEIVE_SET_LABELS_FAILURE](state) {
     state.labelsFetchInProgress = false;
@@ -80,4 +76,11 @@ export default {
       }
     }
   },
+
+  [types.UPDATE_LABELS_SET_STATE](state) {
+    state.labels = state.labels.map((label) => ({
+      ...label,
+      set: state.selectedLabels.some((selectedLabel) => selectedLabel.id === label.id),
+    }));
+  },
 };

spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js

@@ -238,4 +238,14 @@ describe('LabelsSelectRoot', () => {
 
     expect(store.dispatch).not.toHaveBeenCalled();
   });
+
+  it('calls updateLabelsSetState after selected labels were updated', async () => {
+    createComponent();
+
+    jest.spyOn(store, 'dispatch').mockResolvedValue();
+    await wrapper.setProps({ selectedLabels: [] });
+    jest.advanceTimersByTime(100);
+
+    expect(store.dispatch).toHaveBeenCalledWith('updateLabelsSetState');
+  });
 });

spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js

@@ -264,4 +264,16 @@ describe('LabelsSelect Actions', () => {
       );
     });
   });
+
+  describe('updateLabelsSetState', () => {
+    it('updates labels `set` state to match `selectedLabels`', () => {
+      testAction(
+        actions.updateLabelsSetState,
+        {},
+        state,
+        [{ type: types.UPDATE_LABELS_SET_STATE }],
+        [],
+      );
+    });
+  });
 });

spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js

@@ -197,4 +197,26 @@ describe('LabelsSelect Mutations', () => {
       });
     });
   });
+
+  describe(`${types.UPDATE_LABELS_SET_STATE}`, () => {
+    it('updates labels `set` state to match selected labels', () => {
+      const state = {
+        labels: [
+          { id: 1, title: 'scoped::test', set: false },
+          { id: 2, set: true, title: 'scoped::one', touched: true },
+          { id: 3, title: '' },
+          { id: 4, title: '' },
+        ],
+        selectedLabels: [{ id: 1 }, { id: 3 }],
+      };
+      mutations[types.UPDATE_LABELS_SET_STATE](state);
+
+      expect(state.labels).toEqual([
+        { id: 1, title: 'scoped::test', set: true },
+        { id: 2, set: false, title: 'scoped::one', touched: true },
+        { id: 3, title: '', set: true },
+        { id: 4, title: '', set: false },
+      ]);
+    });
+  });
 });