Add latest changes from gitlab-org/gitlab@master

4 files changed, 55 insertions, 0 deletions

diff --git a/app/assets/javascripts/invite_members/components/invite_group_notification.vue b/app/assets/javascripts/invite_members/components/invite_group_notification.vue
new file mode 100644
index 00000000000..767675cc64c
--- /dev/null
+++ b/app/assets/javascripts/invite_members/components/invite_group_notification.vue
@@ -0,0 +1,37 @@
+<script>
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { GROUP_MODAL_ALERT_BODY } from '../constants';
+
+const SHARE_GROUP_LINK =
+  'https://docs.gitlab.com/ee/user/group/manage.html#share-a-group-with-another-group';
+
+export default {
+  SHARE_GROUP_LINK,
+  name: 'InviteGroupNotification',
+  components: { GlAlert, GlSprintf, GlLink },
+  inject: ['freeUsersLimit'],
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    body: GROUP_MODAL_ALERT_BODY,
+  },
+};
+</script>
+
+<template>
+  <gl-alert variant="warning" :dismissible="false">
+    <gl-sprintf :message="$options.i18n.body">
+      <template #link="{ content }">
+        <gl-link :href="$options.SHARE_GROUP_LINK" target="_blank" class="gl-label-link">{{
+          content
+        }}</gl-link>
+      </template>
+
+      <template #count>{{ freeUsersLimit }}</template>
+    </gl-sprintf>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/invite_members/components/invite_groups_modal.vue b/app/assets/javascripts/invite_members/components/invite_groups_modal.vue
index 81f2b34d303..ceb8e569d3f 100644
--- a/app/assets/javascripts/invite_members/components/invite_groups_modal.vue
+++ b/app/assets/javascripts/invite_members/components/invite_groups_modal.vue
@@ -7,12 +7,14 @@ import { GROUP_FILTERS, GROUP_MODAL_LABELS } from '../constants';
 import eventHub from '../event_hub';
 import { getInvalidFeedbackMessage } from '../utils/get_invalid_feedback_message';
 import GroupSelect from './group_select.vue';
+import InviteGroupNotification from './invite_group_notification.vue';
 
 export default {
   name: 'InviteMembersModal',
   components: {
     GroupSelect,
     InviteModalBase,
+    InviteGroupNotification,
   },
   props: {
     id: {
@@ -61,6 +63,10 @@ export default {
       type: Array,
       required: true,
     },
+    freeUserCapEnabled: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -163,6 +169,10 @@ export default {
     @reset="resetFields"
     @submit="sendInvite"
   >
+    <template #alert>
+      <invite-group-notification v-if="freeUserCapEnabled" :name="name" />
+    </template>
+
     <template #select>
       <group-select
         v-model="groupToBeSharedWith"
diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js
index de7b1019782..29889f47fe1 100644
--- a/app/assets/javascripts/invite_members/constants.js
+++ b/app/assets/javascripts/invite_members/constants.js
@@ -57,6 +57,10 @@ export const GROUP_MODAL_TO_PROJECT_DEFAULT_INTRO_TEXT = s__(
   "InviteMembersModal|You're inviting a group to the %{strongStart}%{name}%{strongEnd} project.",
 );
 
+export const GROUP_MODAL_ALERT_BODY = s__(
+  'InviteMembersModal| Inviting a group %{linkStart}adds its members to your group%{linkEnd}, including members who join after the invite. This might put your group over the free %{count} user limit.',
+);
+
 export const GROUP_SEARCH_FIELD = s__('InviteMembersModal|Select a group to invite');
 export const GROUP_PLACEHOLDER = s__('InviteMembersModal|Search for a group to invite');
 
diff --git a/app/assets/javascripts/invite_members/init_invite_groups_modal.js b/app/assets/javascripts/invite_members/init_invite_groups_modal.js
index be1576ad0b0..320e53d3e3c 100644
--- a/app/assets/javascripts/invite_members/init_invite_groups_modal.js
+++ b/app/assets/javascripts/invite_members/init_invite_groups_modal.js
@@ -28,6 +28,9 @@ export default function initInviteGroupsModal() {
 
   return new Vue({
     el,
+    provide: {
+      freeUsersLimit: parseInt(el.dataset.freeUsersLimit, 10),
+    },
     render: (createElement) =>
       createElement(InviteGroupsModal, {
         props: {
@@ -38,6 +41,7 @@ export default function initInviteGroupsModal() {
           groupSelectFilter: el.dataset.groupsFilter,
           groupSelectParentId: parseInt(el.dataset.parentId, 10),
           invalidGroups: JSON.parse(el.dataset.invalidGroups || '[]'),
+          freeUserCapEnabled: parseBoolean(el.dataset.freeUserCapEnabled),
         },
       }),
   });