Commit 979e8155 authored by Florie Guibert's avatar Florie Guibert Committed by Simon Knox

Boards - Fetch labels using VueX

When adding a list to a board, fetch labels using VueX and GraphQL
parent d3e005ac
......@@ -51,16 +51,27 @@ export default function initNewListDropdown() {
initDeprecatedJQueryDropdown($dropdownToggle, {
data(term, callback) {
axios
.get($dropdownToggle.attr('data-list-labels-path'))
.then(({ data }) => callback(data))
.catch(() => {
$dropdownToggle.data('bs.dropdown').hide();
flash(__('Error fetching labels.'));
});
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(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,
......
......@@ -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: (
......
......@@ -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';
......
......@@ -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) => {
......
......@@ -14,6 +14,7 @@ export default () => ({
issues: {},
filterParams: {},
boardConfig: {},
labels: [],
groupProjects: [],
groupProjectsFlags: {
isLoading: false,
......
......@@ -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 ""
......
......@@ -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 = {
......
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);
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment