Add latest changes from gitlab-org/gitlab@master

4 files changed, 78 insertions, 117 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 e9e1fbad07b..47be1933ed7 100644
--- a/spec/frontend/invite_members/components/invite_members_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js
@@ -10,12 +10,12 @@ import InviteMembersModal from '~/invite_members/components/invite_members_modal
 import InviteModalBase from '~/invite_members/components/invite_modal_base.vue';
 import ModalConfetti from '~/invite_members/components/confetti.vue';
 import MembersTokenSelect from '~/invite_members/components/members_token_select.vue';
+import UserLimitNotification from '~/invite_members/components/user_limit_notification.vue';
 import {
   INVITE_MEMBERS_FOR_TASK,
   MEMBERS_MODAL_CELEBRATE_INTRO,
   MEMBERS_MODAL_CELEBRATE_TITLE,
   MEMBERS_PLACEHOLDER,
-  MEMBERS_PLACEHOLDER_DISABLED,
   MEMBERS_TO_PROJECT_CELEBRATE_INTRO_TEXT,
   LEARN_GITLAB,
   EXPANDED_ERRORS,
@@ -31,8 +31,6 @@ import {
   propsData,
   inviteSource,
   newProjectPath,
-  freeUsersLimit,
-  membersCount,
   user1,
   user2,
   user3,
@@ -99,6 +97,7 @@ describe('InviteMembersModal', () => {
   const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
   const findMemberErrorAlert = () => wrapper.findByTestId('alert-member-error');
   const findMoreInviteErrorsButton = () => wrapper.findByTestId('accordion-button');
+  const findUserLimitAlert = () => wrapper.findComponent(UserLimitNotification);
   const findAccordion = () => wrapper.findComponent(GlCollapse);
   const findErrorsIcon = () => wrapper.findComponent(GlIcon);
   const findMemberErrorMessage = (element) =>
@@ -112,7 +111,7 @@ describe('InviteMembersModal', () => {
   const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
   const membersFormGroupInvalidFeedback = () =>
     findMembersFormGroup().attributes('invalid-feedback');
-  const membersFormGroupText = () => findMembersFormGroup().text();
+  const membersFormGroupDescription = () => findMembersFormGroup().attributes('description');
   const findMembersSelect = () => wrapper.findComponent(MembersTokenSelect);
   const findTasksToBeDone = () => wrapper.findByTestId('invite-members-modal-tasks-to-be-done');
   const findTasks = () => wrapper.findByTestId('invite-members-modal-tasks');
@@ -299,19 +298,8 @@ describe('InviteMembersModal', () => {
 
         describe('members form group description', () => {
           it('renders correct description', () => {
-            createInviteMembersToProjectWrapper({ freeUsersLimit, membersCount }, { GlFormGroup });
-            expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER);
-          });
-
-          describe('when reached user limit', () => {
-            it('renders correct description', () => {
-              createInviteMembersToProjectWrapper(
-                { freeUsersLimit, membersCount: 5 },
-                { GlFormGroup },
-              );
-
-              expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER_DISABLED);
-            });
+            createInviteMembersToProjectWrapper({ GlFormGroup });
+            expect(membersFormGroupDescription()).toContain(MEMBERS_PLACEHOLDER);
           });
         });
       });
@@ -339,23 +327,10 @@ describe('InviteMembersModal', () => {
 
         describe('members form group description', () => {
           it('renders correct description', async () => {
-            createInviteMembersToProjectWrapper({ freeUsersLimit, membersCount }, { GlFormGroup });
+            createInviteMembersToProjectWrapper({ GlFormGroup });
             await triggerOpenModal({ mode: 'celebrate' });
 
-            expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER);
-          });
-
-          describe('when reached user limit', () => {
-            it('renders correct description', async () => {
-              createInviteMembersToProjectWrapper(
-                { freeUsersLimit, membersCount: 5 },
-                { GlFormGroup },
-              );
-
-              await triggerOpenModal({ mode: 'celebrate' });
-
-              expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER_DISABLED);
-            });
+            expect(membersFormGroupDescription()).toContain(MEMBERS_PLACEHOLDER);
           });
         });
       });
@@ -370,20 +345,39 @@ describe('InviteMembersModal', () => {
 
       describe('members form group description', () => {
         it('renders correct description', () => {
-          createInviteMembersToGroupWrapper({ freeUsersLimit, membersCount }, { GlFormGroup });
-          expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER);
-        });
-
-        describe('when reached user limit', () => {
-          it('renders correct description', () => {
-            createInviteMembersToGroupWrapper({ freeUsersLimit, membersCount: 5 }, { GlFormGroup });
-            expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER_DISABLED);
-          });
+          createInviteMembersToGroupWrapper({ GlFormGroup });
+          expect(membersFormGroupDescription()).toContain(MEMBERS_PLACEHOLDER);
         });
       });
     });
   });
 
+  describe('rendering the user limit notification', () => {
+    it('shows the user limit notification alert when reached limit', () => {
+      const usersLimitDataset = { reachedLimit: true };
+
+      createInviteMembersToProjectWrapper(usersLimitDataset);
+
+      expect(findUserLimitAlert().exists()).toBe(true);
+    });
+
+    it('shows the user limit notification alert when close to dashboard limit', () => {
+      const usersLimitDataset = { closeToDashboardLimit: true };
+
+      createInviteMembersToProjectWrapper(usersLimitDataset);
+
+      expect(findUserLimitAlert().exists()).toBe(true);
+    });
+
+    it('does not show the user limit notification alert', () => {
+      const usersLimitDataset = {};
+
+      createInviteMembersToProjectWrapper(usersLimitDataset);
+
+      expect(findUserLimitAlert().exists()).toBe(false);
+    });
+  });
+
   describe('submitting the invite form', () => {
     const mockInvitationsApi = (code, data) => {
       mock.onPost(GROUPS_INVITATIONS_PATH).reply(code, data);
diff --git a/spec/frontend/invite_members/components/invite_modal_base_spec.js b/spec/frontend/invite_members/components/invite_modal_base_spec.js
index b55eeb72471..aeead8809fd 100644
--- a/spec/frontend/invite_members/components/invite_modal_base_spec.js
+++ b/spec/frontend/invite_members/components/invite_modal_base_spec.js
@@ -18,10 +18,7 @@ import {
   CANCEL_BUTTON_TEXT,
   INVITE_BUTTON_TEXT_DISABLED,
   INVITE_BUTTON_TEXT,
-  CANCEL_BUTTON_TEXT_DISABLED,
   ON_SHOW_TRACK_LABEL,
-  ON_CLOSE_TRACK_LABEL,
-  ON_SUBMIT_TRACK_LABEL,
 } from '~/invite_members/constants';
 
 import { propsData, membersPath, purchasePath } from '../mock_data/modal_base';
@@ -131,7 +128,9 @@ describe('InviteModalBase', () => {
     it('renders description', () => {
       createComponent({}, { GlFormGroup });
 
-      expect(findMembersFormGroup().text()).toContain(propsData.formGroupDescription);
+      expect(findMembersFormGroup().attributes('description')).toContain(
+        propsData.formGroupDescription,
+      );
     });
 
     describe('when users limit is reached', () => {
@@ -145,30 +144,13 @@ describe('InviteModalBase', () => {
 
       beforeEach(() => {
         createComponent(
-          { usersLimitDataset: { membersPath, purchasePath }, reachedLimit: true },
+          { usersLimitDataset: { membersPath, purchasePath, reachedLimit: true } },
           { GlModal, GlFormGroup },
         );
       });
 
-      it('renders correct blocks', () => {
-        expect(findIcon().exists()).toBe(true);
-        expect(findDisabledInput().exists()).toBe(true);
-        expect(findDropdown().exists()).toBe(false);
-        expect(findDatepicker().exists()).toBe(false);
-      });
-
-      it('renders correct buttons', () => {
-        const cancelButton = findCancelButton();
-        const actionButton = findActionButton();
-
-        expect(cancelButton.attributes('href')).toBe(purchasePath);
-        expect(cancelButton.text()).toBe(CANCEL_BUTTON_TEXT_DISABLED);
-        expect(actionButton.attributes('href')).toBe(membersPath);
-        expect(actionButton.text()).toBe(INVITE_BUTTON_TEXT_DISABLED);
-      });
-
       it('tracks actions', () => {
-        createComponent({ reachedLimit: true }, { GlFormGroup, GlModal });
+        createComponent({ usersLimitDataset: { reachedLimit: true } }, { GlFormGroup, GlModal });
         trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
 
         const modal = wrapper.findComponent(GlModal);
@@ -176,37 +158,20 @@ describe('InviteModalBase', () => {
         modal.vm.$emit('shown');
         expectTracking('render', ON_SHOW_TRACK_LABEL);
 
-        modal.vm.$emit('cancel', { preventDefault: jest.fn() });
-        expectTracking('click_button', ON_CLOSE_TRACK_LABEL);
-
-        modal.vm.$emit('primary', { preventDefault: jest.fn() });
-        expectTracking('click_button', ON_SUBMIT_TRACK_LABEL);
-
         unmockTracking();
       });
-
-      describe('when free user namespace', () => {
-        it('hides cancel button', () => {
-          createComponent(
-            {
-              usersLimitDataset: { membersPath, purchasePath, userNamespace: true },
-              reachedLimit: true,
-            },
-            { GlModal, GlFormGroup },
-          );
-
-          expect(findCancelButton().exists()).toBe(false);
-        });
-      });
     });
 
     describe('when user limit is close on a personal namespace', () => {
       beforeEach(() => {
         createComponent(
           {
-            closeToLimit: true,
-            reachedLimit: false,
-            usersLimitDataset: { membersPath, userNamespace: true },
+            usersLimitDataset: {
+              membersPath,
+              userNamespace: true,
+              closeToDashboardLimit: true,
+              reachedLimit: false,
+            },
           },
           { GlModal, GlFormGroup },
         );
diff --git a/spec/frontend/invite_members/components/user_limit_notification_spec.js b/spec/frontend/invite_members/components/user_limit_notification_spec.js
index 1ff2e86412f..2a780490468 100644
--- a/spec/frontend/invite_members/components/user_limit_notification_spec.js
+++ b/spec/frontend/invite_members/components/user_limit_notification_spec.js
@@ -1,8 +1,8 @@
 import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import UserLimitNotification from '~/invite_members/components/user_limit_notification.vue';
-import { REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE } from '~/invite_members/constants';
-import { freeUsersLimit, membersCount } from '../mock_data/member_modal';
+import { REACHED_LIMIT_VARIANT, CLOSE_TO_LIMIT_VARIANT } from '~/invite_members/constants';
+import { freeUsersLimit, remainingSeats } from '../mock_data/member_modal';
 
 const WARNING_ALERT_TITLE = 'You only have space for 2 more members in name';
 
@@ -10,20 +10,16 @@ describe('UserLimitNotification', () => {
   let wrapper;
 
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findTrialLink = () => wrapper.findByTestId('trial-link');
+  const findUpgradeLink = () => wrapper.findByTestId('upgrade-link');
 
-  const createComponent = (
-    closeToLimit = false,
-    reachedLimit = false,
-    usersLimitDataset = {},
-    props = {},
-  ) => {
+  const createComponent = (limitVariant, usersLimitDataset = {}, props = {}) => {
     wrapper = shallowMountExtended(UserLimitNotification, {
       propsData: {
-        closeToLimit,
-        reachedLimit,
+        limitVariant,
         usersLimitDataset: {
+          remainingSeats,
           freeUsersLimit,
-          membersCount,
           newTrialRegistrationPath: 'newTrialRegistrationPath',
           purchasePath: 'purchasePath',
           ...usersLimitDataset,
@@ -35,40 +31,46 @@ describe('UserLimitNotification', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('when limit is not reached', () => {
-    it('renders empty block', () => {
-      createComponent();
-
-      expect(findAlert().exists()).toBe(false);
-    });
-  });
-
   describe('when close to limit within a group', () => {
     it("renders user's limit notification", () => {
-      createComponent(true, false, { membersCount: 3 });
+      createComponent(CLOSE_TO_LIMIT_VARIANT);
 
       const alert = findAlert();
 
       expect(alert.attributes('title')).toEqual(WARNING_ALERT_TITLE);
 
-      expect(alert.text()).toEqual(
-        'To get more members an owner of the group can start a trial or upgrade to a paid tier.',
-      );
+      expect(alert.text()).toContain('To get more members an owner of the group can');
     });
   });
 
   describe('when limit is reached', () => {
     it("renders user's limit notification", () => {
-      createComponent(true, true);
+      createComponent(REACHED_LIMIT_VARIANT);
 
       const alert = findAlert();
 
       expect(alert.attributes('title')).toEqual("You've reached your 5 members limit for name");
-      expect(alert.text()).toEqual(REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE);
+      expect(alert.text()).toContain(
+        'To invite new users to this namespace, you must remove existing users.',
+      );
     });
   });
+
+  describe('tracking', () => {
+    it.each([CLOSE_TO_LIMIT_VARIANT, REACHED_LIMIT_VARIANT])(
+      `has tracking attributes for %j variant`,
+      (variant) => {
+        createComponent(variant);
+
+        expect(findTrialLink().attributes('data-track-action')).toBe('click_link');
+        expect(findTrialLink().attributes('data-track-label')).toBe(
+          `start_trial_user_limit_notification_${variant}`,
+        );
+        expect(findUpgradeLink().attributes('data-track-action')).toBe('click_link');
+        expect(findUpgradeLink().attributes('data-track-label')).toBe(
+          `upgrade_user_limit_notification_${variant}`,
+        );
+      },
+    );
+  });
 });
diff --git a/spec/frontend/invite_members/mock_data/member_modal.js b/spec/frontend/invite_members/mock_data/member_modal.js
index 4f4e9345e46..59d58f21bb0 100644
--- a/spec/frontend/invite_members/mock_data/member_modal.js
+++ b/spec/frontend/invite_members/mock_data/member_modal.js
@@ -19,7 +19,7 @@ export const propsData = {
 export const inviteSource = 'unknown';
 export const newProjectPath = 'projects/new';
 export const freeUsersLimit = 5;
-export const membersCount = 1;
+export const remainingSeats = 2;
 
 export const user1 = { id: 1, name: 'Name One', username: 'one_1', avatar_url: '' };
 export const user2 = { id: 2, name: 'Name Two', username: 'one_2', avatar_url: '' };