Commit 7d318866 authored by Scott Stern's avatar Scott Stern Committed by David O'Regan

Add loading spinner to assignee header

parent 1a633aa5
<script>
import { mapActions, mapGetters } from 'vuex';
import { mapActions, mapGetters, mapState } from 'vuex';
import { cloneDeep } from 'lodash';
import {
GlDropdownItem,
......@@ -75,6 +75,7 @@ export default {
},
computed: {
...mapGetters(['activeIssue']),
...mapState(['isSettingAssignees']),
assigneeText() {
return n__('Assignee', '%d Assignees', this.selected.length);
},
......@@ -131,7 +132,7 @@ export default {
</script>
<template>
<board-editable-item :title="assigneeText" @close="saveAssignees">
<board-editable-item :loading="isSettingAssignees" :title="assigneeText" @close="saveAssignees">
<template #collapsed>
<issuable-assignees :users="selected" @assign-self="assignSelf" />
</template>
......
......@@ -320,6 +320,8 @@ export default {
},
setAssignees: ({ commit, getters }, assigneeUsernames) => {
commit(types.SET_ASSIGNEE_LOADING, true);
return gqlClient
.mutate({
mutation: updateAssignees,
......@@ -339,6 +341,9 @@ export default {
});
return nodes;
})
.finally(() => {
commit(types.SET_ASSIGNEE_LOADING, false);
});
},
......
......@@ -34,4 +34,5 @@ export const SET_CURRENT_PAGE = 'SET_CURRENT_PAGE';
export const TOGGLE_EMPTY_STATE = 'TOGGLE_EMPTY_STATE';
export const SET_ACTIVE_ID = 'SET_ACTIVE_ID';
export const UPDATE_ISSUE_BY_ID = 'UPDATE_ISSUE_BY_ID';
export const SET_ASSIGNEE_LOADING = 'SET_ASSIGNEE_LOADING';
export const RESET_ISSUES = 'RESET_ISSUES';
......@@ -143,6 +143,10 @@ export default {
Vue.set(state.issues[issueId], prop, value);
},
[mutationTypes.SET_ASSIGNEE_LOADING](state, isLoading) {
state.isSettingAssignees = isLoading;
},
[mutationTypes.REQUEST_ADD_ISSUE]: () => {
notImplemented();
},
......
......@@ -11,6 +11,7 @@ export default () => ({
boardLists: {},
listsFlags: {},
issuesByListId: {},
isSettingAssignees: false,
pageInfoByListId: {},
issues: {},
filterParams: {},
......
---
title: Add loading state to assignees header
merge_request: 48392
author:
type: added
---
title: Add loading state to assignees dropdown
title: Add loading state to boards assignees header dropdown
merge_request: 47848
author:
type: added
......@@ -37,7 +37,7 @@ describe('BoardCardAssigneeDropdown', () => {
data() {
return {
search,
selected: store.getters.activeIssue.assignees,
selected: [],
participants,
};
},
......@@ -63,14 +63,13 @@ describe('BoardCardAssigneeDropdown', () => {
[getIssueParticipants, getIssueParticipantsSpy],
[searchUsers, getSearchUsersSpy],
]);
wrapper = mount(BoardAssigneeDropdown, {
localVue,
apolloProvider: fakeApollo,
data() {
return {
search,
selected: store.getters.activeIssue.assignees,
selected: [],
participants,
};
},
......@@ -369,4 +368,18 @@ describe('BoardCardAssigneeDropdown', () => {
expect(findByText(currentUser.username).exists()).toBe(true);
});
});
describe('when setting an assignee', () => {
beforeEach(() => {
createComponent();
});
it('passes loading state from Vuex to BoardEditableItem', async () => {
store.state.isSettingAssignees = true;
await wrapper.vm.$nextTick();
expect(wrapper.find(BoardEditableItem).props('loading')).toBe(true);
});
});
});
......@@ -690,10 +690,18 @@ describe('setAssignees', () => {
{},
{ activeIssue: { iid, referencePath: refPath }, commit: () => {} },
[
{
type: 'SET_ASSIGNEE_LOADING',
payload: true,
},
{
type: 'UPDATE_ISSUE_BY_ID',
payload: { prop: 'assignees', issueId: undefined, value: [node] },
},
{
type: 'SET_ASSIGNEE_LOADING',
payload: false,
},
],
[],
done,
......
......@@ -516,6 +516,14 @@ describe('Board Store Mutations', () => {
});
});
describe('SET_ASSIGNEE_LOADING', () => {
it('sets isSettingAssignees to the value passed', () => {
mutations.SET_ASSIGNEE_LOADING(state, true);
expect(state.isSettingAssignees).toBe(true);
});
});
describe('SET_CURRENT_PAGE', () => {
expectNotImplemented(mutations.SET_CURRENT_PAGE);
});
......
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