1 files changed, 49 insertions, 4 deletions

diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
index 95afcb6bda8..42c40cda601 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
@@ -1,18 +1,21 @@
 <script>
-import { GlProgressBar, GlSprintf } from '@gitlab/ui';
+import { GlProgressBar, GlSprintf, GlAlert } from '@gitlab/ui';
 import eventHub from '~/invite_members/event_hub';
 import { s__ } from '~/locale';
 import { ACTION_LABELS, ACTION_SECTIONS } from '../constants';
 import LearnGitlabSectionCard from './learn_gitlab_section_card.vue';
 
 export default {
-  components: { GlProgressBar, GlSprintf, LearnGitlabSectionCard },
+  components: { GlProgressBar, GlSprintf, GlAlert, LearnGitlabSectionCard },
   i18n: {
     title: s__('LearnGitLab|Learn GitLab'),
     description: s__(
       'LearnGitLab|Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project.',
     ),
     percentageCompleted: s__(`LearnGitLab|%{percentage}%{percentSymbol} completed`),
+    successfulInvitations: s__(
+      "LearnGitLab|Your team is growing! You've successfully invited new team members to the %{projectName} project.",
+    ),
   },
   props: {
     actions: {
@@ -28,12 +31,22 @@ export default {
       required: false,
       default: false,
     },
+    project: {
+      required: true,
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      showSuccessfulInvitationsAlert: false,
+      actionsData: this.actions,
+    };
   },
   maxValue: Object.keys(ACTION_LABELS).length,
   actionSections: Object.keys(ACTION_SECTIONS),
   computed: {
     progressValue() {
-      return Object.values(this.actions).filter((a) => a.completed).length;
+      return Object.values(this.actionsData).filter((a) => a.completed).length;
     },
     progressPercentage() {
       return Math.round((this.progressValue / this.$options.maxValue) * 100);
@@ -43,14 +56,23 @@ export default {
     if (this.inviteMembersOpen) {
       this.openInviteMembersModal('celebrate');
     }
+
+    eventHub.$on('showSuccessfulInvitationsAlert', this.handleShowSuccessfulInvitationsAlert);
+  },
+  beforeDestroy() {
+    eventHub.$off('showSuccessfulInvitationsAlert', this.handleShowSuccessfulInvitationsAlert);
   },
   methods: {
     openInviteMembersModal(mode) {
       eventHub.$emit('openModal', { mode, inviteeType: 'members', source: 'learn-gitlab' });
     },
+    handleShowSuccessfulInvitationsAlert() {
+      this.showSuccessfulInvitationsAlert = true;
+      this.markActionAsCompleted('userAdded');
+    },
     actionsFor(section) {
       const actions = Object.fromEntries(
-        Object.entries(this.actions).filter(
+        Object.entries(this.actionsData).filter(
           ([action]) => ACTION_LABELS[action].section === section,
         ),
       );
@@ -59,11 +81,34 @@ export default {
     svgFor(section) {
       return this.sections[section].svg;
     },
+    markActionAsCompleted(completedAction) {
+      Object.keys(this.actionsData).forEach((action) => {
+        if (action === completedAction) {
+          this.actionsData[action].completed = true;
+          this.modifySidebarPercentage();
+        }
+      });
+    },
+    modifySidebarPercentage() {
+      const el = document.querySelector('.sidebar-top-level-items .active .count');
+      el.textContent = `${this.progressPercentage}%`;
+    },
   },
 };
 </script>
 <template>
   <div>
+    <gl-alert
+      v-if="showSuccessfulInvitationsAlert"
+      class="gl-mt-5"
+      @dismiss="showSuccessfulInvitationsAlert = false"
+    >
+      <gl-sprintf :message="$options.i18n.successfulInvitations">
+        <template #projectName>
+          <strong>{{ project.name }}</strong>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
     <div class="row">
       <div class="gl-mb-7 gl-ml-5">
         <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>