Boards - Fetch labels using VueX

When adding a list to a board, fetch labels using VueX and GraphQL

app/assets/javascripts/boards/components/new_list_dropdown.js

@@ -51,16 +51,27 @@ export default function initNewListDropdown() {
 
     initDeprecatedJQueryDropdown($dropdownToggle, {
       data(term, callback) {
+        const reqFailed = () => {
+          $dropdownToggle.data('bs.dropdown').hide();
+          flash(__('Error fetching labels.'));
+        };
+
+        if (store.getters.shouldUseGraphQL) {
+          store
+            .dispatch('fetchLabels')
+            .then((data) => callback(data))
+            .catch(reqFailed);
+        } else {
           axios
             .get($dropdownToggle.attr('data-list-labels-path'))
             .then(({ data }) => callback(data))
-          .catch(() => {
-            $dropdownToggle.data('bs.dropdown').hide();
-            flash(__('Error fetching labels.'));
-          });
+            .catch(reqFailed);
+        }
       },
       renderRow(label) {
-        const active = boardsStore.findListByLabelId(label.id);
+        const active = store.getters.shouldUseGraphQL
+          ? store.getters.getListByLabelId(label.id)
+          : boardsStore.findListByLabelId(label.id);
         const $li = $('<li />');
         const $a = $('<a />', {
           class: active ? `is-active js-board-list-${getIdFromGraphQLId(active.id)}` : '',
@@ -87,7 +98,7 @@ export default function initNewListDropdown() {
         e.preventDefault();
 
         if (shouldCreateListGraphQL(label)) {
-          store.dispatch('createList', { labelId: fullLabelId(label) });
+          store.dispatch('createList', { labelId: label.id });
         } else if (!boardsStore.findListByLabelId(label.id)) {
           boardsStore.new({
             title: label.title,

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

@@ -153,10 +153,10 @@ export default {
         variables,
       })
       .then(({ data }) => {
-        const labels = data[boardType]?.labels;
-        return labels.nodes;
-      })
-      .catch(() => commit(types.RECEIVE_LABELS_FAILURE));
+        const labels = data[boardType]?.labels.nodes;
+        commit(types.RECEIVE_LABELS_SUCCESS, labels);
+        return labels;
+      });
   },
 
   moveList: (

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

@@ -2,7 +2,7 @@ export const SET_INITIAL_BOARD_DATA = 'SET_INITIAL_BOARD_DATA';
 export const SET_FILTERS = 'SET_FILTERS';
 export const CREATE_LIST_SUCCESS = 'CREATE_LIST_SUCCESS';
 export const CREATE_LIST_FAILURE = 'CREATE_LIST_FAILURE';
-export const RECEIVE_LABELS_FAILURE = 'RECEIVE_LABELS_FAILURE';
+export const RECEIVE_LABELS_SUCCESS = 'RECEIVE_LABELS_SUCCESS';
 export const GENERATE_DEFAULT_LISTS_FAILURE = 'GENERATE_DEFAULT_LISTS_FAILURE';
 export const RECEIVE_BOARD_LISTS_SUCCESS = 'RECEIVE_BOARD_LISTS_SUCCESS';
 export const RECEIVE_BOARD_LISTS_FAILURE = 'RECEIVE_BOARD_LISTS_FAILURE';

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

@@ -63,8 +63,8 @@ export default {
     state.error = s__('Boards|An error occurred while creating the list. Please try again.');
   },
 
-  [mutationTypes.RECEIVE_LABELS_FAILURE]: (state) => {
-    state.error = s__('Boards|An error occurred while fetching labels. Please reload the page.');
+  [mutationTypes.RECEIVE_LABELS_SUCCESS]: (state, labels) => {
+    state.labels = labels;
   },
 
   [mutationTypes.GENERATE_DEFAULT_LISTS_FAILURE]: (state) => {

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

@@ -14,6 +14,7 @@ export default () => ({
   issues: {},
   filterParams: {},
   boardConfig: {},
+  labels: [],
   groupProjects: [],
   groupProjectsFlags: {
     isLoading: false,

locale/gitlab.pot

@@ -4597,9 +4597,6 @@ msgstr ""
 msgid "Boards|An error occurred while fetching issues. Please reload the page."
 msgstr ""
 
-msgid "Boards|An error occurred while fetching labels. Please reload the page."
-msgstr ""
-
 msgid "Boards|An error occurred while fetching the board issues. Please reload the page."
 msgstr ""
 

spec/frontend/boards/stores/actions_spec.js

@@ -254,6 +254,27 @@ describe('createList', () => {
   });
 });
 
+describe('fetchLabels', () => {
+  it('should commit mutation RECEIVE_LABELS_SUCCESS on success', async () => {
+    const queryResponse = {
+      data: {
+        group: {
+          labels: {
+            nodes: labels,
+          },
+        },
+      },
+    };
+    jest.spyOn(gqlClient, 'query').mockResolvedValue(queryResponse);
+
+    await testAction({
+      action: actions.fetchLabels,
+      state: { boardType: 'group' },
+      expectedMutations: [{ type: types.RECEIVE_LABELS_SUCCESS, payload: labels }],
+    });
+  });
+});
+
 describe('moveList', () => {
   it('should commit MOVE_LIST mutation and dispatch updateList action', (done) => {
     const initialBoardListsState = {

spec/frontend/boards/stores/mutations_spec.js

 import mutations from '~/boards/stores/mutations';
 import * as types from '~/boards/stores/mutation_types';
 import defaultState from '~/boards/stores/state';
-import { mockLists, rawIssue, mockIssue, mockIssue2, mockGroupProjects } from '../mock_data';
+import {
+  mockLists,
+  rawIssue,
+  mockIssue,
+  mockIssue2,
+  mockGroupProjects,
+  labels,
+} from '../mock_data';
 
 const expectNotImplemented = (action) => {
   it('is not implemented', () => {
@@ -99,13 +106,11 @@ describe('Board Store Mutations', () => {
     });
   });
 
-  describe('RECEIVE_LABELS_FAILURE', () => {
-    it('sets error message', () => {
-      mutations.RECEIVE_LABELS_FAILURE(state);
+  describe('RECEIVE_LABELS_SUCCESS', () => {
+    it('sets labels on state', () => {
+      mutations.RECEIVE_LABELS_SUCCESS(state, labels);
 
-      expect(state.error).toEqual(
-        'An error occurred while fetching labels. Please reload the page.',
-      );
+      expect(state.labels).toEqual(labels);
     });
   });