1 files changed, 32 insertions, 0 deletions
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"