1 files changed, 36 insertions, 1 deletions
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 2ad4bb1a11a..3be3b9df747 100644
--- a/app/assets/javascripts/invite_members/components/invite_groups_modal.vue
+++ b/app/assets/javascripts/invite_members/components/invite_groups_modal.vue
@@ -6,13 +6,19 @@ import InviteModalBase from 'ee_else_ce/invite_members/components/invite_modal_b
 import { GROUP_FILTERS, GROUP_MODAL_LABELS } from '../constants';
 import eventHub from '../event_hub';
 import { getInvalidFeedbackMessage } from '../utils/get_invalid_feedback_message';
+import {
+  displaySuccessfulInvitationAlert,
+  reloadOnInvitationSuccess,
+} from '../utils/trigger_successful_invite_alert';
 import GroupSelect from './group_select.vue';
+import InviteGroupNotification from './invite_group_notification.vue';
 
 export default {
   name: 'InviteMembersModal',
   components: {
     GroupSelect,
     InviteModalBase,
+    InviteGroupNotification,
   },
   props: {
     id: {
@@ -31,6 +37,10 @@ export default {
       type: String,
       required: true,
     },
+    fullPath: {
+      type: String,
+      required: true,
+    },
     accessLevels: {
       type: Object,
       required: true,
@@ -57,6 +67,15 @@ export default {
       type: Array,
       required: true,
     },
+    freeUserCapEnabled: {
+      type: Boolean,
+      required: true,
+    },
+    reloadPageOnSubmit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -85,6 +104,10 @@ export default {
     },
   },
   mounted() {
+    if (this.reloadPageOnSubmit) {
+      displaySuccessfulInvitationAlert();
+    }
+
     eventHub.$on('openGroupModal', () => {
       this.openModal();
     });
@@ -114,7 +137,7 @@ export default {
         expires_at: expiresAt,
       })
         .then(() => {
-          this.showSuccessMessage();
+          this.onInviteSuccess();
         })
         .catch((e) => {
           this.showInvalidFeedbackMessage(e);
@@ -128,6 +151,13 @@ export default {
       this.isLoading = false;
       this.groupToBeSharedWith = {};
     },
+    onInviteSuccess() {
+      if (this.reloadPageOnSubmit) {
+        reloadOnInvitationSuccess();
+      } else {
+        this.showSuccessMessage();
+      }
+    },
     showSuccessMessage() {
       this.$toast.show(this.$options.labels.toastMessageSuccessful, this.toastOptions);
       this.closeModal();
@@ -155,9 +185,14 @@ export default {
     :root-group-id="rootId"
     :invalid-feedback-message="invalidFeedbackMessage"
     :is-loading="isLoading"
+    :full-path="fullPath"
     @reset="resetFields"
     @submit="sendInvite"
   >
+    <template #alert>
+      <invite-group-notification v-if="freeUserCapEnabled" :name="name" />
+    </template>
+
     <template #select>
       <group-select
         v-model="groupToBeSharedWith"