Commit deb0d988 authored by David O'Regan's avatar David O'Regan

Merge branch 'ss/add-loading-state-to-assignee-header' into 'master'

Add loading spinner to assignee header

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