Merge branch...

Merge branch '333583-add-loading-state-to-invite-modal-for-when-invite-button-is-clicked' into 'master'

Add loading state to invite members button

See merge request gitlab-org/gitlab!67081

app/assets/javascripts/invite_members/components/invite_members_modal.vue

@@ -86,6 +86,7 @@ export default {
       groupToBeSharedWith: {},
       source: 'unknown',
       invalidFeedbackMessage: '',
+      isLoading: false,
     };
   },
   computed: {
@@ -169,6 +170,7 @@ export default {
       }
     },
     resetFields() {
+      this.isLoading = false;
       this.selectedAccessLevel = this.defaultAccessLevel;
       this.selectedDate = undefined;
       this.newUsersToInvite = [];
@@ -189,6 +191,7 @@ export default {
     },
     submitInviteMembers() {
       this.invalidFeedbackMessage = '';
+      this.isLoading = true;
 
       const [usersToInviteByEmail, usersToAddById] = this.partitionNewUsersToInvite();
       const promises = [];
@@ -247,12 +250,14 @@ export default {
       }
 
       this.invalidFeedbackMessage = message;
+      this.isLoading = false;
     },
     showToastMessageSuccess() {
       this.$toast.show(this.$options.labels.toastMessageSuccessful, this.toastOptions);
       this.closeModal();
     },
     showInvalidFeedbackMessage(response) {
+      this.isLoading = false;
       this.invalidFeedbackMessage =
         responseMessageFromError(response) || this.$options.labels.invalidFeedbackMessageDefault;
     },
@@ -405,6 +410,7 @@ export default {
         <div class="gl-mr-3"></div>
         <gl-button
           :disabled="inviteDisabled"
+          :loading="isLoading"
           variant="success"
           data-qa-selector="invite_button"
           data-testid="invite-button"

spec/frontend/invite_members/components/invite_members_modal_spec.js

@@ -137,6 +137,10 @@ describe('InviteMembersModal', () => {
       expect(findInviteButton().text()).toBe('Invite');
     });
 
+    it('renders the Invite button modal without isLoading', () => {
+      expect(findInviteButton().props('loading')).toBe(false);
+    });
+
     describe('rendering the access levels dropdown', () => {
       it('sets the default dropdown text to the default access level name', () => {
         expect(findDropdown().attributes('text')).toBe('Guest');
@@ -230,6 +234,16 @@ describe('InviteMembersModal', () => {
           clickInviteButton();
         });
 
+        it('sets isLoading on the Invite button when it is clicked', () => {
+          expect(findInviteButton().props('loading')).toBe(true);
+        });
+
+        it('removes isLoading from the Invite button when request completes', async () => {
+          await waitForPromises();
+
+          expect(findInviteButton().props('loading')).toBe(false);
+        });
+
         it('calls Api addGroupMembersByUserId with the correct params', async () => {
           await waitForPromises;
 
@@ -260,6 +274,7 @@ describe('InviteMembersModal', () => {
           expect(membersFormGroupInvalidFeedback()).toBe('Member already exists');
           expect(findMembersFormGroup().props('state')).toBe(false);
           expect(findMembersSelect().props('validationState')).toBe(false);
+          expect(findInviteButton().props('loading')).toBe(false);
         });
 
         it('clears the invalid state and message once the list of members to invite is cleared', async () => {
@@ -272,6 +287,7 @@ describe('InviteMembersModal', () => {
           expect(membersFormGroupInvalidFeedback()).toBe('Member already exists');
           expect(findMembersFormGroup().props('state')).toBe(false);
           expect(findMembersSelect().props('validationState')).toBe(false);
+          expect(findInviteButton().props('loading')).toBe(false);
 
           findMembersSelect().vm.$emit('clear');
 
@@ -280,6 +296,7 @@ describe('InviteMembersModal', () => {
           expect(membersFormGroupInvalidFeedback()).toBe('');
           expect(findMembersFormGroup().props('state')).not.toBe(false);
           expect(findMembersSelect().props('validationState')).not.toBe(false);
+          expect(findInviteButton().props('loading')).toBe(false);
         });
 
         it('displays the generic error for http server error', async () => {
@@ -375,6 +392,7 @@ describe('InviteMembersModal', () => {
 
           expect(membersFormGroupInvalidFeedback()).toBe(expectedSyntaxError);
           expect(findMembersSelect().props('validationState')).toBe(false);
+          expect(findInviteButton().props('loading')).toBe(false);
         });
 
         it('displays the restricted email error when restricted email is invited', async () => {
@@ -386,6 +404,7 @@ describe('InviteMembersModal', () => {
 
           expect(membersFormGroupInvalidFeedback()).toContain(expectedEmailRestrictedError);
           expect(findMembersSelect().props('validationState')).toBe(false);
+          expect(findInviteButton().props('loading')).toBe(false);
         });
 
         it('displays the successful toast message when email has already been invited', async () => {