1 files changed, 37 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>