Commit d733d26c authored by Mark Florian's avatar Mark Florian

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
parents e6cb9f66 752d89fb
......@@ -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"
......
......@@ -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 () => {
......
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