Add latest changes from gitlab-org/gitlab@master

3 files changed, 43 insertions, 4 deletions

diff --git a/app/assets/javascripts/invite_members/components/invite_members_modal.vue b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
index fbb547c28ff..fa1aa6b0d88 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
@@ -18,8 +18,6 @@ import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import { n__, sprintf } from '~/locale';
 import {
-  CLOSE_TO_LIMIT_VARIANT,
-  REACHED_LIMIT_VARIANT,
   USERS_FILTER_ALL,
   INVITE_MEMBERS_FOR_TASK,
   MEMBER_MODAL_LABELS,
@@ -189,10 +187,10 @@ export default {
       return this.source === LEARN_GITLAB;
     },
     showUserLimitNotification() {
-      return this.usersLimitDataset.reachedLimit || this.usersLimitDataset.closeToDashboardLimit;
+      return !isEmpty(this.usersLimitDataset.alertVariant);
     },
     limitVariant() {
-      return this.usersLimitDataset.reachedLimit ? REACHED_LIMIT_VARIANT : CLOSE_TO_LIMIT_VARIANT;
+      return this.usersLimitDataset.alertVariant;
     },
     errorList() {
       return Object.entries(this.invalidMembers).map(([member, error]) => {
@@ -479,6 +477,7 @@ export default {
         </gl-alert>
         <user-limit-notification
           v-else-if="showUserLimitNotification"
+          class="gl-mb-5"
           :limit-variant="limitVariant"
           :users-limit-dataset="usersLimitDataset"
         />
diff --git a/app/assets/javascripts/invite_members/components/user_limit_notification.vue b/app/assets/javascripts/invite_members/components/user_limit_notification.vue
index 515dd3de319..1d061a4b81e 100644
--- a/app/assets/javascripts/invite_members/components/user_limit_notification.vue
+++ b/app/assets/javascripts/invite_members/components/user_limit_notification.vue
@@ -1,14 +1,18 @@
 <script>
 import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
 import { n__, sprintf } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 import {
+  INFO_ALERT_TITLE,
   WARNING_ALERT_TITLE,
   DANGER_ALERT_TITLE,
   REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE,
   REACHED_LIMIT_VARIANT,
   CLOSE_TO_LIMIT_MESSAGE,
   CLOSE_TO_LIMIT_VARIANT,
+  NOTIFICATION_LIMIT_MESSAGE,
+  NOTIFICATION_LIMIT_VARIANT,
 } from '../constants';
 
 export default {
@@ -28,6 +32,15 @@ export default {
   computed: {
     limitAttributes() {
       return {
+        [NOTIFICATION_LIMIT_VARIANT]: {
+          variant: 'info',
+          title: this.notificationTitle(
+            INFO_ALERT_TITLE,
+            this.name,
+            this.usersLimitDataset.freeUsersLimit,
+          ),
+          message: this.message(NOTIFICATION_LIMIT_MESSAGE, this.usersLimitDataset.freeUsersLimit),
+        },
         [CLOSE_TO_LIMIT_VARIANT]: {
           variant: 'warning',
           title: this.title(WARNING_ALERT_TITLE, this.usersLimitDataset.remainingSeats),
@@ -42,6 +55,13 @@ export default {
     },
   },
   methods: {
+    notificationTitle(titleTemplate, namespaceName, dashboardLimit) {
+      return sprintf(titleTemplate, {
+        namespaceName,
+        dashboardLimit,
+      });
+    },
+
     title(titleTemplate, count) {
       return sprintf(titleTemplate, {
         count,
@@ -49,7 +69,14 @@ export default {
         name: this.name,
       });
     },
+
+    message(messageTemplate, dashboardLimit) {
+      return sprintf(messageTemplate, {
+        dashboardLimit,
+      });
+    },
   },
+  freeUserLimitHelpPath: helpPagePath('user/free_user_limit'),
 };
 </script>
 
@@ -60,6 +87,11 @@ export default {
     :title="limitAttributes[limitVariant].title"
   >
     <gl-sprintf :message="limitAttributes[limitVariant].message">
+      <template #freeUserLimitLink="{ content }">
+        <gl-link :href="$options.freeUserLimitHelpPath" class="gl-label-link">{{
+          content
+        }}</gl-link>
+      </template>
       <template #trialLink="{ content }">
         <gl-link
           :href="usersLimitDataset.newTrialRegistrationPath"
diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js
index a894eb24d38..24f339491e0 100644
--- a/app/assets/javascripts/invite_members/constants.js
+++ b/app/assets/javascripts/invite_members/constants.js
@@ -139,6 +139,9 @@ export const GROUP_MODAL_LABELS = {
 export const LEARN_GITLAB = 'learn_gitlab';
 export const ON_SHOW_TRACK_LABEL = 'over_limit_modal_viewed';
 
+export const INFO_ALERT_TITLE = s__(
+  'InviteMembersModal|Your namespace %{namespaceName} is over the %{dashboardLimit} user limit.',
+);
 export const WARNING_ALERT_TITLE = s__(
   'InviteMembersModal|You only have space for %{count} more %{members} in %{name}',
 );
@@ -148,6 +151,7 @@ export const DANGER_ALERT_TITLE = s__(
 
 export const REACHED_LIMIT_VARIANT = 'reached';
 export const CLOSE_TO_LIMIT_VARIANT = 'close';
+export const NOTIFICATION_LIMIT_VARIANT = 'notification';
 
 export const REACHED_LIMIT_MESSAGE = s__(
   'InviteMembersModal|To invite new users to this namespace, you must remove existing users. You can still add existing namespace users.',
@@ -162,3 +166,7 @@ export const REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE = REACHED_LIMIT_MESSAGE.co
 export const CLOSE_TO_LIMIT_MESSAGE = s__(
   'InviteMembersModal|To get more members an owner of the group can %{trialLinkStart}start a trial%{trialLinkEnd} or %{upgradeLinkStart}upgrade%{upgradeLinkEnd} to a paid tier.',
 );
+
+export const NOTIFICATION_LIMIT_MESSAGE = s__(
+  'InviteMembersModal|GitLab will enforce this limit in the future. If you are over %{dashboardLimit} users when enforcement begins, your namespace will be placed in a %{freeUserLimitLinkStart}read-only state%{freeUserLimitLinkEnd}. To avoid being placed in a read-only state, reduce your namespace to %{dashboardLimit} users or less, or purchase a paid tier.',
+);