Merge branch '334524-improve-error-field-description-for-invite-a-group-modal' into 'master'

Remove error description from invite group modal

See merge request gitlab-org/gitlab!66542

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

@@ -111,6 +111,7 @@ export default {
       data-testid="group-select-dropdown"
       :text="selectedGroupName"
       block
+      toggle-class="gl-mb-2"
       menu-class="gl-w-full!"
     >
       <gl-search-box-by-type

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

@@ -149,6 +149,13 @@ export default {
 
       return this.selectedAreasOfFocus;
     },
+    errorFieldDescription() {
+      if (this.inviteeType === 'group') {
+        return '';
+      }
+
+      return this.$options.labels[this.inviteeType].placeHolder;
+    },
   },
   mounted() {
     eventHub.$on('openModal', (options) => {
@@ -179,6 +186,7 @@ export default {
       tracking.event(eventName);
     },
     closeModal() {
+      this.resetFields();
       this.$refs.modal.hide();
     },
     sendInvite() {
@@ -349,6 +357,8 @@ export default {
     :title="$options.labels[inviteeType].modalTitle"
     :header-close-label="$options.labels.headerCloseLabel"
     @hidden="resetFields"
+    @close="resetFields"
+    @hide="resetFields"
   >
     <div>
       <p ref="introText">
@@ -360,10 +370,9 @@ export default {
       </p>
 
       <gl-form-group
-        class="gl-mt-2"
         :invalid-feedback="invalidFeedbackMessage"
         :state="validationState"
-        :description="$options.labels[inviteeType].placeHolder"
+        :description="errorFieldDescription"
         data-testid="members-form-group"
       >
         <label :id="$options.membersTokenSelectLabelId" class="col-form-label">{{
@@ -372,6 +381,7 @@ export default {
         <members-token-select
           v-if="!isInviteGroup"
           v-model="newUsersToInvite"
+          class="gl-mb-2"
           :validation-state="validationState"
           :aria-labelledby="$options.membersTokenSelectLabelId"
           @clear="handleMembersTokenSelectClear"
@@ -381,10 +391,11 @@ export default {
           v-model="groupToBeSharedWith"
           :groups-filter="groupSelectFilter"
           :parent-group-id="groupSelectParentId"
+          @input="handleMembersTokenSelectClear"
         />
       </gl-form-group>
 
-      <label class="gl-mt-3">{{ $options.labels.accessLevel }}</label>
+      <label class="gl-font-weight-bold">{{ $options.labels.accessLevel }}</label>
       <div class="gl-mt-2 gl-w-half gl-xs-w-full">
         <gl-dropdown
           class="gl-shadow-none gl-w-full"

spec/frontend/invite_members/components/invite_members_modal_spec.js

@@ -83,7 +83,7 @@ const createComponent = (data = {}, props = {}) => {
       GlDropdownItem: true,
       GlSprintf,
       GlFormGroup: stubComponent(GlFormGroup, {
-        props: ['state', 'invalidFeedback'],
+        props: ['state', 'invalidFeedback', 'description'],
       }),
     },
   });
@@ -125,8 +125,10 @@ describe('InviteMembersModal', () => {
   const findCancelButton = () => wrapper.findByTestId('cancel-button');
   const findInviteButton = () => wrapper.findByTestId('invite-button');
   const clickInviteButton = () => findInviteButton().vm.$emit('click');
+  const clickCancelButton = () => findCancelButton().vm.$emit('click');
   const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
   const membersFormGroupInvalidFeedback = () => findMembersFormGroup().props('invalidFeedback');
+  const membersFormGroupDescription = () => findMembersFormGroup().props('description');
   const findMembersSelect = () => wrapper.findComponent(MembersTokenSelect);
   const findAreaofFocusCheckBoxGroup = () => wrapper.findComponent(GlFormCheckboxGroup);
 
@@ -189,13 +191,14 @@ describe('InviteMembersModal', () => {
     });
   });
 
-  describe('displaying the correct introText', () => {
+  describe('displaying the correct introText and form group description', () => {
     describe('when inviting to a project', () => {
       describe('when inviting members', () => {
         it('includes the correct invitee, type, and formatted name', () => {
           createInviteMembersToProjectWrapper();
 
           expect(findIntroText()).toBe("You're inviting members to the test name project.");
+          expect(membersFormGroupDescription()).toBe('Select members or type email addresses');
         });
       });
 
@@ -204,6 +207,7 @@ describe('InviteMembersModal', () => {
           createInviteGroupToProjectWrapper();
 
           expect(findIntroText()).toBe("You're inviting a group to the test name project.");
+          expect(membersFormGroupDescription()).toBe('');
         });
       });
     });
@@ -214,6 +218,7 @@ describe('InviteMembersModal', () => {
           createInviteMembersToGroupWrapper();
 
           expect(findIntroText()).toBe("You're inviting members to the test name group.");
+          expect(membersFormGroupDescription()).toBe('Select members or type email addresses');
         });
       });
 
@@ -222,6 +227,7 @@ describe('InviteMembersModal', () => {
           createInviteGroupToGroupWrapper();
 
           expect(findIntroText()).toBe("You're inviting a group to the test name group.");
+          expect(membersFormGroupDescription()).toBe('');
         });
       });
     });
@@ -321,6 +327,50 @@ describe('InviteMembersModal', () => {
           expect(findInviteButton().props('loading')).toBe(false);
         });
 
+        describe('clearing the invalid state and message', () => {
+          beforeEach(async () => {
+            mockMembersApi(httpStatus.CONFLICT, membersApiResponse.MEMBER_ALREADY_EXISTS);
+
+            clickInviteButton();
+
+            await waitForPromises();
+          });
+
+          it('clears the error when the list of members to invite is cleared', async () => {
+            expect(membersFormGroupInvalidFeedback()).toBe('Member already exists');
+            expect(findMembersFormGroup().props('state')).toBe(false);
+            expect(findMembersSelect().props('validationState')).toBe(false);
+
+            findMembersSelect().vm.$emit('clear');
+
+            await wrapper.vm.$nextTick();
+
+            expect(membersFormGroupInvalidFeedback()).toBe('');
+            expect(findMembersFormGroup().props('state')).not.toBe(false);
+            expect(findMembersSelect().props('validationState')).not.toBe(false);
+          });
+
+          it('clears the error when the cancel button is clicked', async () => {
+            clickCancelButton();
+
+            await wrapper.vm.$nextTick();
+
+            expect(membersFormGroupInvalidFeedback()).toBe('');
+            expect(findMembersFormGroup().props('state')).not.toBe(false);
+            expect(findMembersSelect().props('validationState')).not.toBe(false);
+          });
+
+          it('clears the error when the modal is hidden', async () => {
+            wrapper.findComponent(GlModal).vm.$emit('hide');
+
+            await wrapper.vm.$nextTick();
+
+            expect(membersFormGroupInvalidFeedback()).toBe('');
+            expect(findMembersFormGroup().props('state')).not.toBe(false);
+            expect(findMembersSelect().props('validationState')).not.toBe(false);
+          });
+        });
+
         it('clears the invalid state and message once the list of members to invite is cleared', async () => {
           mockMembersApi(httpStatus.CONFLICT, membersApiResponse.MEMBER_ALREADY_EXISTS);
 
@@ -627,9 +677,9 @@ describe('InviteMembersModal', () => {
 
       describe('when sharing the group fails', () => {
         beforeEach(() => {
-          createComponent({ groupToBeSharedWith: sharedGroup });
+          createInviteGroupToGroupWrapper();
 
-          wrapper.setData({ inviteeType: 'group' });
+          wrapper.setData({ groupToBeSharedWith: sharedGroup });
           wrapper.vm.$toast = { show: jest.fn() };
 
           jest
@@ -641,6 +691,7 @@ describe('InviteMembersModal', () => {
 
         it('displays the generic error message', () => {
           expect(membersFormGroupInvalidFeedback()).toBe('Something went wrong');
+          expect(membersFormGroupDescription()).toBe('');
         });
       });
     });