Add latest changes from gitlab-org/gitlab@master

3 files changed, 57 insertions, 7 deletions

diff --git a/spec/frontend/invite_members/components/invite_members_modal_spec.js b/spec/frontend/invite_members/components/invite_members_modal_spec.js
index 045a454e63a..2058784b033 100644
--- a/spec/frontend/invite_members/components/invite_members_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js
@@ -1,4 +1,4 @@
-import { GlLink, GlModal, GlSprintf, GlFormGroup } from '@gitlab/ui';
+import { GlLink, GlModal, GlSprintf, GlFormGroup, GlCollapse, GlIcon } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import { stubComponent } from 'helpers/stub_component';
@@ -18,6 +18,7 @@ import {
   MEMBERS_PLACEHOLDER_DISABLED,
   MEMBERS_TO_PROJECT_CELEBRATE_INTRO_TEXT,
   LEARN_GITLAB,
+  EXPANDED_ERRORS,
 } from '~/invite_members/constants';
 import eventHub from '~/invite_members/event_hub';
 import ContentTransition from '~/vue_shared/components/content_transition.vue';
@@ -36,6 +37,7 @@ import {
   user3,
   user4,
   user5,
+  user6,
   GlEmoji,
 } from '../mock_data/member_modal';
 
@@ -95,9 +97,12 @@ describe('InviteMembersModal', () => {
   const findBase = () => wrapper.findComponent(InviteModalBase);
   const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
   const findMemberErrorAlert = () => wrapper.findByTestId('alert-member-error');
+  const findMoreInviteErrorsButton = () => wrapper.findByTestId('accordion-button');
+  const findAccordion = () => wrapper.findComponent(GlCollapse);
+  const findErrorsIcon = () => wrapper.findComponent(GlIcon);
   const findMemberErrorMessage = (element) =>
-    `${Object.keys(invitationsApiResponse.MULTIPLE_RESTRICTED.message)[element]}: ${
-      Object.values(invitationsApiResponse.MULTIPLE_RESTRICTED.message)[element]
+    `${Object.keys(invitationsApiResponse.EXPANDED_RESTRICTED.message)[element]}: ${
+      Object.values(invitationsApiResponse.EXPANDED_RESTRICTED.message)[element]
     }`;
   const emitEventFromModal = (eventName) => () =>
     findModal().vm.$emit(eventName, { preventDefault: jest.fn() });
@@ -666,8 +671,8 @@ describe('InviteMembersModal', () => {
         it('displays errors for multiple and allows clearing', async () => {
           createInviteMembersToGroupWrapper();
 
-          await triggerMembersTokenSelect([user3, user4, user5]);
-          mockInvitationsApi(httpStatus.CREATED, invitationsApiResponse.MULTIPLE_RESTRICTED);
+          await triggerMembersTokenSelect([user3, user4, user5, user6]);
+          mockInvitationsApi(httpStatus.CREATED, invitationsApiResponse.EXPANDED_RESTRICTED);
 
           clickInviteButton();
 
@@ -675,19 +680,44 @@ describe('InviteMembersModal', () => {
 
           expect(findMemberErrorAlert().exists()).toBe(true);
           expect(findMemberErrorAlert().props('title')).toContain(
-            "The following 3 members couldn't be invited",
+            "The following 4 members couldn't be invited",
           );
           expect(findMemberErrorAlert().text()).toContain(findMemberErrorMessage(0));
           expect(findMemberErrorAlert().text()).toContain(findMemberErrorMessage(1));
           expect(findMemberErrorAlert().text()).toContain(findMemberErrorMessage(2));
+          expect(findMemberErrorAlert().text()).toContain(findMemberErrorMessage(3));
+          expect(findAccordion().exists()).toBe(true);
+          expect(findMoreInviteErrorsButton().text()).toContain('Show more (2)');
+          expect(findErrorsIcon().attributes('class')).not.toContain('gl-rotate-180');
+          expect(findAccordion().attributes('visible')).toBeUndefined();
+
+          await findMoreInviteErrorsButton().vm.$emit('click');
+
+          expect(findMoreInviteErrorsButton().text()).toContain(EXPANDED_ERRORS);
+          expect(findErrorsIcon().attributes('class')).toContain('gl-rotate-180');
+          expect(findAccordion().attributes('visible')).toBeDefined();
+
+          await findMoreInviteErrorsButton().vm.$emit('click');
+
+          expect(findMoreInviteErrorsButton().text()).toContain('Show more (2)');
+          expect(findAccordion().attributes('visible')).toBeUndefined();
 
           await removeMembersToken(user3);
 
+          expect(findMoreInviteErrorsButton().text()).toContain('Show more (1)');
           expect(findMemberErrorAlert().props('title')).toContain(
-            "The following 2 members couldn't be invited",
+            "The following 3 members couldn't be invited",
           );
           expect(findMemberErrorAlert().text()).not.toContain(findMemberErrorMessage(0));
 
+          await removeMembersToken(user6);
+
+          expect(findMoreInviteErrorsButton().exists()).toBe(false);
+          expect(findMemberErrorAlert().props('title')).toContain(
+            "The following 2 members couldn't be invited",
+          );
+          expect(findMemberErrorAlert().text()).not.toContain(findMemberErrorMessage(2));
+
           await removeMembersToken(user4);
 
           expect(findMemberErrorAlert().props('title')).toContain(
diff --git a/spec/frontend/invite_members/mock_data/api_responses.js b/spec/frontend/invite_members/mock_data/api_responses.js
index 4ad3b6aeb66..6fe06decb6b 100644
--- a/spec/frontend/invite_members/mock_data/api_responses.js
+++ b/spec/frontend/invite_members/mock_data/api_responses.js
@@ -26,6 +26,20 @@ const MULTIPLE_RESTRICTED = {
   status: 'error',
 };
 
+const EXPANDED_RESTRICTED = {
+  message: {
+    'email@example.com':
+      "The member's email address is not allowed for this project. Go to the Admin area > Sign-up restrictions, and check Allowed domains for sign-ups.",
+    'email4@example.com':
+      "The member's email address is not allowed for this project. Go to the Admin area > Sign-up restrictions, and check the Domain denylist.",
+    'email5@example.com':
+      "The member's email address is not allowed for this project. Go to the Admin area > Sign-up restrictions, and check the Domain denylist.",
+    root:
+      "The member's email address is not allowed for this project. Go to the Admin area > Sign-up restrictions, and check Allowed domains for sign-ups.",
+  },
+  status: 'error',
+};
+
 const EMAIL_TAKEN = {
   message: {
     'email@example.org': "The member's email address has already been taken",
@@ -41,4 +55,5 @@ export const invitationsApiResponse = {
   EMAIL_RESTRICTED,
   MULTIPLE_RESTRICTED,
   EMAIL_TAKEN,
+  EXPANDED_RESTRICTED,
 };
diff --git a/spec/frontend/invite_members/mock_data/member_modal.js b/spec/frontend/invite_members/mock_data/member_modal.js
index 7d675b6206c..4f4e9345e46 100644
--- a/spec/frontend/invite_members/mock_data/member_modal.js
+++ b/spec/frontend/invite_members/mock_data/member_modal.js
@@ -39,5 +39,10 @@ export const user5 = {
   name: 'root',
   avatar_url: '',
 };
+export const user6 = {
+  id: 'user-defined-token3',
+  name: 'email5@example.com',
+  avatar_url: '',
+};
 
 export const GlEmoji = { template: '<img/>' };