Add loading spinner to assignee header

app/assets/javascripts/boards/components/board_assignee_dropdown.vue

 <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>

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

@@ -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);
       });
   },
 

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

@@ -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';

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

@@ -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();
   },

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

@@ -11,6 +11,7 @@ export default () => ({
   boardLists: {},
   listsFlags: {},
   issuesByListId: {},
+  isSettingAssignees: false,
   pageInfoByListId: {},
   issues: {},
   filterParams: {},

changelogs/unreleased/ss-add-loading-state-to-assignee-header.yml

+---
+title: Add loading state to assignees header
+merge_request: 48392
+author:
+type: added

changelogs/unreleased/ss-add-loading-to-assignees.yml

 ---
-title: Add loading state to assignees dropdown
+title: Add loading state to boards assignees header dropdown
 merge_request: 47848
 author:
 type: added

spec/frontend/boards/components/board_assignee_dropdown_spec.js

@@ -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);
+    });
+  });
 });

spec/frontend/boards/stores/actions_spec.js

@@ -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,

spec/frontend/boards/stores/mutations_spec.js

@@ -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);
   });