Open invite members for task modal in Learn GitLab

When clicking the 'Invite your colleagues' link

app/assets/javascripts/experimentation/utils.js

@@ -31,7 +31,7 @@ export function getAllExperimentContexts() {
   return Object.values(getExperimentsData()).map(convertExperimentDataToExperimentContext);
 }
 
-export function isExperimentVariant(experimentName, variantName) {
+export function isExperimentVariant(experimentName, variantName = CANDIDATE_VARIANT) {
   return getExperimentData(experimentName)?.variant === variantName;
 }
 

app/assets/javascripts/invite_members/components/invite_members_modal.vue

@@ -26,6 +26,7 @@ import {
   MEMBER_AREAS_OF_FOCUS,
   INVITE_MEMBERS_FOR_TASK,
   MODAL_LABELS,
+  LEARN_GITLAB,
 } from '../constants';
 import eventHub from '../event_hub';
 import {
@@ -200,7 +201,8 @@ export default {
     },
     tasksToBeDoneEnabled() {
       return (
-        getParameterValues('open_modal')[0] === 'invite_members_for_task' &&
+        (getParameterValues('open_modal')[0] === 'invite_members_for_task' ||
+          this.isOnLearnGitlab) &&
         this.tasksToBeDoneOptions.length
       );
     },
@@ -221,11 +223,18 @@ export default {
         ? this.selectedTaskProject.id
         : '';
     },
+    isOnLearnGitlab() {
+      return this.source === LEARN_GITLAB;
+    },
   },
   mounted() {
     eventHub.$on('openModal', (options) => {
       this.openModal(options);
-      this.trackEvent(MEMBER_AREAS_OF_FOCUS.name, MEMBER_AREAS_OF_FOCUS.view);
+      if (this.isOnLearnGitlab) {
+        this.trackEvent(INVITE_MEMBERS_FOR_TASK.name, this.source);
+      } else {
+        this.trackEvent(MEMBER_AREAS_OF_FOCUS.name, MEMBER_AREAS_OF_FOCUS.view);
+      }
     });
 
     if (this.tasksToBeDoneEnabled) {
@@ -303,7 +312,7 @@ export default {
         : Api.groupShareWithGroup.bind(Api);
 
       apiShareWithGroup(this.id, this.shareWithGroupPostData(this.groupToBeSharedWith.id))
-        .then(this.showToastMessageSuccess)
+        .then(this.showSuccessMessage)
         .catch(this.showInvalidFeedbackMessage);
     },
     submitInviteMembers() {
@@ -332,7 +341,7 @@ export default {
       this.trackinviteMembersForTask();
 
       Promise.all(promises)
-        .then(this.conditionallyShowToastSuccess)
+        .then(this.conditionallyShowSuccessMessage)
         .catch(this.showInvalidFeedbackMessage);
     },
     inviteByEmailPostData(usersToInviteByEmail) {
@@ -364,11 +373,11 @@ export default {
         group_access: this.selectedAccessLevel,
       };
     },
-    conditionallyShowToastSuccess(response) {
+    conditionallyShowSuccessMessage(response) {
       const message = this.unescapeMsg(responseMessageFromSuccess(response));
 
       if (message === '') {
-        this.showToastMessageSuccess();
+        this.showSuccessMessage();
 
         return;
       }
@@ -376,8 +385,12 @@ export default {
       this.invalidFeedbackMessage = message;
       this.isLoading = false;
     },
-    showToastMessageSuccess() {
-      this.$toast.show(this.$options.labels.toastMessageSuccessful, this.toastOptions);
+    showSuccessMessage() {
+      if (this.isOnLearnGitlab) {
+        eventHub.$emit('showSuccessfulInvitationsAlert');
+      } else {
+        this.$toast.show(this.$options.labels.toastMessageSuccessful, this.toastOptions);
+      }
       this.closeModal();
     },
     showInvalidFeedbackMessage(response) {

app/assets/javascripts/invite_members/constants.js

@@ -144,3 +144,5 @@ export const MODAL_LABELS = {
   headerCloseLabel: HEADER_CLOSE_LABEL,
   areasOfFocusLabel: AREAS_OF_FOCUS_LABEL,
 };
+
+export const LEARN_GITLAB = 'learn_gitlab';

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue

 <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>

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue

 <script>
 import { GlLink, GlIcon } from '@gitlab/ui';
+import { isExperimentVariant } from '~/experimentation/utils';
+import eventHub from '~/invite_members/event_hub';
 import { s__ } from '~/locale';
 import { ACTION_LABELS } from '../constants';
 
@@ -24,6 +26,20 @@ export default {
     trialOnly() {
       return ACTION_LABELS[this.action].trialRequired;
     },
+    showInviteModalLink() {
+      return (
+        this.action === 'userAdded' && isExperimentVariant('invite_for_help_continuous_onboarding')
+      );
+    },
+  },
+  methods: {
+    openModal() {
+      eventHub.$emit('openModal', {
+        inviteeType: 'members',
+        source: 'learn_gitlab',
+        tasksToBeDoneEnabled: true,
+      });
+    },
   },
 };
 </script>
@@ -33,18 +49,27 @@ export default {
       <gl-icon name="check-circle-filled" :size="16" data-testid="completed-icon" />
       {{ $options.i18n.ACTION_LABELS[action].title }}
     </span>
-    <span v-else>
-      <gl-link
-        target="_blank"
-        :href="value.url"
-        data-track-action="click_link"
-        :data-track-label="$options.i18n.ACTION_LABELS[action].title"
-        data-track-property="Growth::Conversion::Experiment::LearnGitLab"
-        data-track-experiment="change_continuous_onboarding_link_urls"
-      >
-        {{ $options.i18n.ACTION_LABELS[action].title }}
-      </gl-link>
-    </span>
+    <gl-link
+      v-else-if="showInviteModalLink"
+      data-track-action="click_link"
+      :data-track-label="$options.i18n.ACTION_LABELS[action].title"
+      data-track-property="Growth::Activation::Experiment::InviteForHelpContinuousOnboarding"
+      data-testid="invite-for-help-continuous-onboarding-experiment-link"
+      @click="openModal"
+    >
+      {{ $options.i18n.ACTION_LABELS[action].title }}
+    </gl-link>
+    <gl-link
+      v-else
+      target="_blank"
+      :href="value.url"
+      data-track-action="click_link"
+      :data-track-label="$options.i18n.ACTION_LABELS[action].title"
+      data-track-property="Growth::Conversion::Experiment::LearnGitLab"
+      data-track-experiment="change_continuous_onboarding_link_urls"
+    >
+      {{ $options.i18n.ACTION_LABELS[action].title }}
+    </gl-link>
     <span v-if="trialOnly" class="gl-font-style-italic gl-text-gray-500" data-testid="trial-only">
       - {{ $options.i18n.trialOnly }}
     </span>

app/assets/javascripts/pages/projects/learn_gitlab/index/index.js

@@ -12,17 +12,18 @@ function initLearnGitlab() {
 
   const actions = convertObjectPropsToCamelCase(JSON.parse(el.dataset.actions));
   const sections = convertObjectPropsToCamelCase(JSON.parse(el.dataset.sections));
+  const project = convertObjectPropsToCamelCase(JSON.parse(el.dataset.project));
   const { inviteMembersOpen } = el.dataset;
 
   return new Vue({
     el,
     render(createElement) {
       return createElement(LearnGitlab, {
-        props: { actions, sections, inviteMembersOpen },
+        props: { actions, sections, project, inviteMembersOpen },
       });
     },
   });
 }
 
-initInviteMembersModal();
 initLearnGitlab();
+initInviteMembersModal();

app/controllers/projects/learn_gitlab_controller.rb

@@ -3,6 +3,7 @@
 class Projects::LearnGitlabController < Projects::ApplicationController
   before_action :authenticate_user!
   before_action :check_experiment_enabled?
+  before_action :enable_invite_for_help_continuous_onboarding_experiment
 
   feature_category :users
 
@@ -14,4 +15,13 @@ class Projects::LearnGitlabController < Projects::ApplicationController
   def check_experiment_enabled?
     return access_denied! unless helpers.learn_gitlab_enabled?(project)
   end
+
+  def enable_invite_for_help_continuous_onboarding_experiment
+    return unless current_user.can?(:admin_group_member, project.namespace)
+
+    experiment(:invite_for_help_continuous_onboarding, namespace: project.namespace) do |e|
+      e.candidate {}
+      e.record!
+    end
+  end
 end

app/helpers/invite_members_helper.rb

@@ -42,7 +42,7 @@ module InviteMembersHelper
       e.candidate { dataset.merge!(areas_of_focus_options: member_areas_of_focus_options.to_json, no_selection_areas_of_focus: ['no_selection']) }
     end
 
-    if show_invite_members_for_task?
+    if show_invite_members_for_task?(source)
       dataset.merge!(
         tasks_to_be_done_options: tasks_to_be_done_options.to_json,
         projects: projects_for_source(source).to_json,
@@ -80,10 +80,12 @@ module InviteMembersHelper
     {}
   end
 
-  def show_invite_members_for_task?
-    return unless current_user && experiment(:invite_members_for_task).enabled?
+  def show_invite_members_for_task?(source)
+    return unless current_user
 
-    params[:open_modal] == 'invite_members_for_task'
+    invite_members_for_task_experiment = experiment(:invite_members_for_task).enabled? && params[:open_modal] == 'invite_members_for_task'
+    invite_for_help_continuous_onboarding = source.is_a?(Project) && experiment(:invite_for_help_continuous_onboarding, namespace: source.namespace).variant.name == 'candidate'
+    invite_members_for_task_experiment || invite_for_help_continuous_onboarding
   end
 
   def tasks_to_be_done_options

app/helpers/learn_gitlab_helper.rb

@@ -10,7 +10,8 @@ module LearnGitlabHelper
   def learn_gitlab_data(project)
     {
       actions: onboarding_actions_data(project).to_json,
-      sections: onboarding_sections_data.to_json
+      sections: onboarding_sections_data.to_json,
+      project: onboarding_project_data(project).to_json
     }
   end
 
@@ -56,6 +57,10 @@ module LearnGitlabHelper
     }
   end
 
+  def onboarding_project_data(project)
+    { name: project.name }
+  end
+
   def action_urls
     LearnGitlab::Onboarding::ACTION_ISSUE_IDS.transform_values { |id| project_issue_url(learn_gitlab_project, id) }
       .merge(LearnGitlab::Onboarding::ACTION_DOC_URLS)

app/views/projects/learn_gitlab/index.html.haml

@@ -4,9 +4,10 @@
 - data = learn_gitlab_data(@project)
 - invite_members_open = session.delete(:confetti_post_signup)
 
+= render 'projects/invite_members_modal', project: @project
+
 - experiment(:confetti_post_signup, actor: current_user) do |e|
   - e.control do
     #js-learn-gitlab-app{ data: data }
   - e.candidate do
-    = render 'projects/invite_members_modal', project: @project
     #js-learn-gitlab-app{ data: data.merge(invite_members_open: invite_members_open) }

config/feature_flags/experiment/invite_for_help_continuous_onboarding.yml

+---
+name: invite_for_help_continuous_onboarding
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/73846
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/345708
+milestone: '14.5'
+type: experiment
+group: group::activation
+default_enabled: false

locale/gitlab.pot

@@ -20583,6 +20583,9 @@ msgstr ""
 msgid "LearnGitLab|Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:"
 msgstr ""
 
+msgid "LearnGitLab|Your team is growing! You've successfully invited new team members to the %{projectName} project."
+msgstr ""
+
 msgid "LearnGitlab|Creating your onboarding experience..."
 msgstr ""
 

spec/controllers/projects/learn_gitlab_controller_spec.rb

@@ -5,14 +5,15 @@ require 'spec_helper'
 RSpec.describe Projects::LearnGitlabController do
   describe 'GET #index' do
     let_it_be(:user) { create(:user) }
-    let_it_be(:project) { create(:project, namespace: user.namespace) }
+    let_it_be(:project) { create(:project, namespace: create(:group)) }
 
     let(:learn_gitlab_enabled) { true }
     let(:params) { { namespace_id: project.namespace.to_param, project_id: project } }
 
-    subject { get :index, params: params }
+    subject(:action) { get :index, params: params }
 
     before do
+      project.namespace.add_owner(user)
       allow(controller.helpers).to receive(:learn_gitlab_enabled?).and_return(learn_gitlab_enabled)
     end
 
@@ -32,6 +33,10 @@ RSpec.describe Projects::LearnGitlabController do
 
         it { is_expected.to have_gitlab_http_status(:not_found) }
       end
+
+      it_behaves_like 'tracks assignment and records the subject', :invite_for_help_continuous_onboarding, :namespace do
+        subject { project.namespace }
+      end
     end
   end
 end

spec/frontend/experimentation/utils_spec.js

@@ -89,12 +89,13 @@ describe('experiment Utilities', () => {
 
   describe('isExperimentVariant', () => {
     describe.each`
-      experiment   | variant            | input                            | output
-      ${ABC_KEY}   | ${DEFAULT_VARIANT} | ${[ABC_KEY, DEFAULT_VARIANT]}    | ${true}
-      ${ABC_KEY}   | ${'_variant_name'} | ${[ABC_KEY, '_variant_name']}    | ${true}
-      ${ABC_KEY}   | ${'_variant_name'} | ${[ABC_KEY, '_bogus_name']}      | ${false}
-      ${ABC_KEY}   | ${'_variant_name'} | ${['boguskey', '_variant_name']} | ${false}
-      ${undefined} | ${undefined}       | ${[ABC_KEY, '_variant_name']}    | ${false}
+      experiment   | variant              | input                            | output
+      ${ABC_KEY}   | ${CANDIDATE_VARIANT} | ${[ABC_KEY]}                     | ${true}
+      ${ABC_KEY}   | ${DEFAULT_VARIANT}   | ${[ABC_KEY, DEFAULT_VARIANT]}    | ${true}
+      ${ABC_KEY}   | ${'_variant_name'}   | ${[ABC_KEY, '_variant_name']}    | ${true}
+      ${ABC_KEY}   | ${'_variant_name'}   | ${[ABC_KEY, '_bogus_name']}      | ${false}
+      ${ABC_KEY}   | ${'_variant_name'}   | ${['boguskey', '_variant_name']} | ${false}
+      ${undefined} | ${undefined}         | ${[ABC_KEY, '_variant_name']}    | ${false}
     `(
       'with input=$input, experiment=$experiment, variant=$variant',
       ({ experiment, variant, input, output }) => {

spec/frontend/invite_members/components/invite_members_modal_spec.js

@@ -28,6 +28,7 @@ import {
   MEMBERS_MODAL_DEFAULT_TITLE,
   MEMBERS_PLACEHOLDER,
   MEMBERS_TO_PROJECT_CELEBRATE_INTRO_TEXT,
+  LEARN_GITLAB,
 } from '~/invite_members/constants';
 import eventHub from '~/invite_members/event_hub';
 import axios from '~/lib/utils/axios_utils';
@@ -268,6 +269,14 @@ describe('InviteMembersModal', () => {
 
         expect(findTasksToBeDone().exists()).toBe(false);
       });
+
+      describe('when opened from the Learn GitLab page', () => {
+        it('does render the tasks to be done', () => {
+          setupComponent({ source: LEARN_GITLAB }, {}, []);
+
+          expect(findTasksToBeDone().exists()).toBe(true);
+        });
+      });
     });
 
     describe('rendering the tasks', () => {
@@ -465,7 +474,6 @@ describe('InviteMembersModal', () => {
 
           wrapper.vm.$toast = { show: jest.fn() };
           jest.spyOn(Api, 'addGroupMembersByUserId').mockResolvedValue({ data: postData });
-          jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
         });
 
         it('includes the non-default selected areas of focus', () => {
@@ -492,7 +500,23 @@ describe('InviteMembersModal', () => {
           });
 
           it('displays the successful toastMessage', () => {
-            expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Members were successfully added', {
+              onComplete: expect.any(Function),
+            });
+          });
+        });
+
+        describe('when opened from a Learn GitLab page', () => {
+          it('emits the `showSuccessfulInvitationsAlert` event', async () => {
+            eventHub.$emit('openModal', { inviteeType: 'members', source: LEARN_GITLAB });
+
+            jest.spyOn(eventHub, '$emit').mockImplementation();
+
+            clickInviteButton();
+
+            await waitForPromises();
+
+            expect(eventHub.$emit).toHaveBeenCalledWith('showSuccessfulInvitationsAlert');
           });
         });
       });
@@ -649,7 +673,6 @@ describe('InviteMembersModal', () => {
 
           wrapper.vm.$toast = { show: jest.fn() };
           jest.spyOn(Api, 'inviteGroupMembersByEmail').mockResolvedValue({ data: postData });
-          jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
         });
 
         it('includes the non-default selected areas of focus', () => {
@@ -672,7 +695,9 @@ describe('InviteMembersModal', () => {
           });
 
           it('displays the successful toastMessage', () => {
-            expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Members were successfully added', {
+              onComplete: expect.any(Function),
+            });
           });
         });
       });
@@ -711,13 +736,14 @@ describe('InviteMembersModal', () => {
         it('displays the successful toast message when email has already been invited', async () => {
           mockInvitationsApi(httpStatus.CREATED, invitationsApiResponse.EMAIL_TAKEN);
           wrapper.vm.$toast = { show: jest.fn() };
-          jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
 
           clickInviteButton();
 
           await waitForPromises();
 
-          expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
+          expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Members were successfully added', {
+            onComplete: expect.any(Function),
+          });
           expect(findMembersSelect().props('validationState')).toBe(null);
         });
 
@@ -782,7 +808,6 @@ describe('InviteMembersModal', () => {
           wrapper.vm.$toast = { show: jest.fn() };
           jest.spyOn(Api, 'inviteGroupMembersByEmail').mockResolvedValue({ data: postData });
           jest.spyOn(Api, 'addGroupMembersByUserId').mockResolvedValue({ data: postData });
-          jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
           jest.spyOn(wrapper.vm, 'trackInvite');
         });
 
@@ -800,7 +825,9 @@ describe('InviteMembersModal', () => {
           });
 
           it('displays the successful toastMessage', () => {
-            expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Members were successfully added', {
+              onComplete: expect.any(Function),
+            });
           });
         });
 
@@ -855,7 +882,6 @@ describe('InviteMembersModal', () => {
           wrapper.setData({ inviteeType: 'group' });
           wrapper.vm.$toast = { show: jest.fn() };
           jest.spyOn(Api, 'groupShareWithGroup').mockResolvedValue({ data: groupPostData });
-          jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
 
           clickInviteButton();
         });
@@ -865,7 +891,9 @@ describe('InviteMembersModal', () => {
         });
 
         it('displays the successful toastMessage', () => {
-          expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
+          expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Members were successfully added', {
+            onComplete: expect.any(Function),
+          });
         });
       });
 
@@ -930,6 +958,13 @@ describe('InviteMembersModal', () => {
         expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith(MEMBER_AREAS_OF_FOCUS.view);
       });
 
+      it('tracks the view for learn_gitlab source', () => {
+        eventHub.$emit('openModal', { inviteeType: 'members', source: LEARN_GITLAB });
+
+        expect(ExperimentTracking).toHaveBeenCalledWith(INVITE_MEMBERS_FOR_TASK.name);
+        expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith(LEARN_GITLAB);
+      });
+
       it('tracks the invite for areas_of_focus', () => {
         eventHub.$emit('openModal', { inviteeType: 'members' });
 

spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap

@@ -2,6 +2,8 @@
 
 exports[`Learn GitLab renders correctly 1`] = `
 <div>
+  <!---->
+   
   <div
     class="row"
   >
@@ -131,66 +133,60 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <span>
-              <a
-                class="gl-link"
-                data-track-action="click_link"
-                data-track-experiment="change_continuous_onboarding_link_urls"
-                data-track-label="Set up CI/CD"
-                data-track-property="Growth::Conversion::Experiment::LearnGitLab"
-                href="http://example.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Set up CI/CD
-    
-              </a>
-            </span>
+            <a
+              class="gl-link"
+              data-track-action="click_link"
+              data-track-experiment="change_continuous_onboarding_link_urls"
+              data-track-label="Set up CI/CD"
+              data-track-property="Growth::Conversion::Experiment::LearnGitLab"
+              href="http://example.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              
+    Set up CI/CD
+  
+            </a>
              
             <!---->
           </div>
           <div
             class="gl-mb-4"
           >
-            <span>
-              <a
-                class="gl-link"
-                data-track-action="click_link"
-                data-track-experiment="change_continuous_onboarding_link_urls"
-                data-track-label="Start a free Ultimate trial"
-                data-track-property="Growth::Conversion::Experiment::LearnGitLab"
-                href="http://example.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Start a free Ultimate trial
-    
-              </a>
-            </span>
+            <a
+              class="gl-link"
+              data-track-action="click_link"
+              data-track-experiment="change_continuous_onboarding_link_urls"
+              data-track-label="Start a free Ultimate trial"
+              data-track-property="Growth::Conversion::Experiment::LearnGitLab"
+              href="http://example.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              
+    Start a free Ultimate trial
+  
+            </a>
              
             <!---->
           </div>
           <div
             class="gl-mb-4"
           >
-            <span>
-              <a
-                class="gl-link"
-                data-track-action="click_link"
-                data-track-experiment="change_continuous_onboarding_link_urls"
-                data-track-label="Add code owners"
-                data-track-property="Growth::Conversion::Experiment::LearnGitLab"
-                href="http://example.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Add code owners
-    
-              </a>
-            </span>
+            <a
+              class="gl-link"
+              data-track-action="click_link"
+              data-track-experiment="change_continuous_onboarding_link_urls"
+              data-track-label="Add code owners"
+              data-track-property="Growth::Conversion::Experiment::LearnGitLab"
+              href="http://example.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              
+    Add code owners
+  
+            </a>
              
             <span
               class="gl-font-style-italic gl-text-gray-500"
@@ -204,22 +200,20 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <span>
-              <a
-                class="gl-link"
-                data-track-action="click_link"
-                data-track-experiment="change_continuous_onboarding_link_urls"
-                data-track-label="Add merge request approval"
-                data-track-property="Growth::Conversion::Experiment::LearnGitLab"
-                href="http://example.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Add merge request approval
-    
-              </a>
-            </span>
+            <a
+              class="gl-link"
+              data-track-action="click_link"
+              data-track-experiment="change_continuous_onboarding_link_urls"
+              data-track-label="Add merge request approval"
+              data-track-property="Growth::Conversion::Experiment::LearnGitLab"
+              href="http://example.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              
+    Add merge request approval
+  
+            </a>
              
             <span
               class="gl-font-style-italic gl-text-gray-500"
@@ -269,44 +263,40 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <span>
-              <a
-                class="gl-link"
-                data-track-action="click_link"
-                data-track-experiment="change_continuous_onboarding_link_urls"
-                data-track-label="Create an issue"
-                data-track-property="Growth::Conversion::Experiment::LearnGitLab"
-                href="http://example.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Create an issue
-    
-              </a>
-            </span>
+            <a
+              class="gl-link"
+              data-track-action="click_link"
+              data-track-experiment="change_continuous_onboarding_link_urls"
+              data-track-label="Create an issue"
+              data-track-property="Growth::Conversion::Experiment::LearnGitLab"
+              href="http://example.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              
+    Create an issue
+  
+            </a>
              
             <!---->
           </div>
           <div
             class="gl-mb-4"
           >
-            <span>
-              <a
-                class="gl-link"
-                data-track-action="click_link"
-                data-track-experiment="change_continuous_onboarding_link_urls"
-                data-track-label="Submit a merge request"
-                data-track-property="Growth::Conversion::Experiment::LearnGitLab"
-                href="http://example.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Submit a merge request
-    
-              </a>
-            </span>
+            <a
+              class="gl-link"
+              data-track-action="click_link"
+              data-track-experiment="change_continuous_onboarding_link_urls"
+              data-track-label="Submit a merge request"
+              data-track-property="Growth::Conversion::Experiment::LearnGitLab"
+              href="http://example.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              
+    Submit a merge request
+  
+            </a>
              
             <!---->
           </div>
@@ -349,22 +339,20 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <span>
-              <a
-                class="gl-link"
-                data-track-action="click_link"
-                data-track-experiment="change_continuous_onboarding_link_urls"
-                data-track-label="Run a Security scan using CI/CD"
-                data-track-property="Growth::Conversion::Experiment::LearnGitLab"
-                href="http://example.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Run a Security scan using CI/CD
-    
-              </a>
-            </span>
+            <a
+              class="gl-link"
+              data-track-action="click_link"
+              data-track-experiment="change_continuous_onboarding_link_urls"
+              data-track-label="Run a Security scan using CI/CD"
+              data-track-property="Growth::Conversion::Experiment::LearnGitLab"
+              href="http://example.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              
+    Run a Security scan using CI/CD
+  
+            </a>
              
             <!---->
           </div>

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { stubExperiments } from 'helpers/experimentation_helper';
+import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
+import eventHub from '~/invite_members/event_hub';
 import LearnGitlabSectionLink from '~/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue';
 
 const defaultAction = 'gitWrite';
@@ -23,6 +26,9 @@ describe('Learn GitLab Section Link', () => {
     });
   };
 
+  const openInviteMembesrModalLink = () =>
+    wrapper.find('[data-testid="invite-for-help-continuous-onboarding-experiment-link"]');
+
   it('renders no icon when not completed', () => {
     createWrapper(undefined, { completed: false });
 
@@ -46,4 +52,54 @@ describe('Learn GitLab Section Link', () => {
 
     expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(true);
   });
+
+  describe('rendering a link to open the invite_members modal instead of a regular link', () => {
+    it.each`
+      action           | experimentVariant | showModal
+      ${'userAdded'}   | ${'candidate'}    | ${true}
+      ${'userAdded'}   | ${'control'}      | ${false}
+      ${defaultAction} | ${'candidate'}    | ${false}
+      ${defaultAction} | ${'control'}      | ${false}
+    `(
+      'when the invite_for_help_continuous_onboarding experiment has variant: $experimentVariant and action is $action, the modal link is shown: $showModal',
+      ({ action, experimentVariant, showModal }) => {
+        stubExperiments({ invite_for_help_continuous_onboarding: experimentVariant });
+        createWrapper(action);
+
+        expect(openInviteMembesrModalLink().exists()).toBe(showModal);
+      },
+    );
+  });
+
+  describe('clicking the link to open the invite_members modal', () => {
+    beforeEach(() => {
+      jest.spyOn(eventHub, '$emit').mockImplementation();
+
+      stubExperiments({ invite_for_help_continuous_onboarding: 'candidate' });
+      createWrapper('userAdded');
+    });
+
+    it('calls the eventHub', () => {
+      openInviteMembesrModalLink().vm.$emit('click');
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('openModal', {
+        inviteeType: 'members',
+        source: 'learn_gitlab',
+        tasksToBeDoneEnabled: true,
+      });
+    });
+
+    it('tracks the click', async () => {
+      const trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+
+      triggerEvent(openInviteMembesrModalLink().element);
+
+      expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_link', {
+        label: 'Invite your colleagues',
+        property: 'Growth::Activation::Experiment::InviteForHelpContinuousOnboarding',
+      });
+
+      unmockTracking();
+    });
+  });
 });

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js

-import { GlProgressBar } from '@gitlab/ui';
+import { GlProgressBar, GlAlert } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import LearnGitlab from '~/pages/projects/learn_gitlab/components/learn_gitlab.vue';
 import eventHub from '~/invite_members/event_hub';
-import { testActions, testSections } from './mock_data';
+import { testActions, testSections, testProject } from './mock_data';
 
 describe('Learn GitLab', () => {
   let wrapper;
+  let sidebar;
   let inviteMembersOpen = false;
 
   const createWrapper = () => {
     wrapper = mount(LearnGitlab, {
-      propsData: { actions: testActions, sections: testSections, inviteMembersOpen },
+      propsData: {
+        actions: testActions,
+        sections: testSections,
+        project: testProject,
+        inviteMembersOpen,
+      },
     });
   };
 
   beforeEach(() => {
+    sidebar = document.createElement('div');
+    sidebar.innerHTML = `
+    <div class="sidebar-top-level-items">
+      <div class="active">
+        <div class="count"></div>
+      </div>
+    </div>
+    `;
+    document.body.appendChild(sidebar);
     createWrapper();
   });
 
@@ -22,6 +37,7 @@ describe('Learn GitLab', () => {
     wrapper.destroy();
     wrapper = null;
     inviteMembersOpen = false;
+    sidebar.remove();
   });
 
   it('renders correctly', () => {
@@ -66,4 +82,26 @@ describe('Learn GitLab', () => {
       expect(spy).not.toHaveBeenCalled();
     });
   });
+
+  describe('when the showSuccessfulInvitationsAlert event is fired', () => {
+    const findAlert = () => wrapper.findComponent(GlAlert);
+
+    beforeEach(() => {
+      eventHub.$emit('showSuccessfulInvitationsAlert');
+    });
+
+    it('displays the successful invitations alert', () => {
+      expect(findAlert().exists()).toBe(true);
+    });
+
+    it('displays a message with the project name', () => {
+      expect(findAlert().text()).toBe(
+        "Your team is growing! You've successfully invited new team members to the test-project project.",
+      );
+    });
+
+    it('modifies the sidebar percentage', () => {
+      expect(sidebar.textContent.trim()).toBe('22%');
+    });
+  });
 });

spec/frontend/pages/projects/learn_gitlab/components/mock_data.js

@@ -57,3 +57,7 @@ export const testSections = {
     svg: 'plan.svg',
   },
 };
+
+export const testProject = {
+  name: 'test-project',
+};

spec/helpers/invite_members_helper_spec.rb

@@ -6,6 +6,7 @@ RSpec.describe InviteMembersHelper do
   include Devise::Test::ControllerHelpers
 
   let_it_be(:project) { create(:project) }
+  let_it_be(:group) { create(:group, projects: [project]) }
   let_it_be(:developer) { create(:user, developer_projects: [project]) }
 
   let(:owner) { project.owner }
@@ -64,48 +65,13 @@ RSpec.describe InviteMembersHelper do
     end
 
     context 'tasks_to_be_done' do
-      subject(:output) { helper.common_invite_modal_dataset(source) }
-
-      let_it_be(:source) { project }
-
-      before do
-        stub_experiments(invite_members_for_task: true)
-      end
-
-      context 'when not logged in' do
-        before do
-          allow(helper).to receive(:params).and_return({ open_modal: 'invite_members_for_task' })
-        end
-
-        it "doesn't have the tasks to be done attributes" do
-          expect(output[:tasks_to_be_done_options]).to be_nil
-          expect(output[:projects]).to be_nil
-          expect(output[:new_project_path]).to be_nil
-        end
-      end
-
-      context 'when logged in but the open_modal param is not present' do
-        before do
-          allow(helper).to receive(:current_user).and_return(developer)
-        end
+      using RSpec::Parameterized::TableSyntax
 
-        it "doesn't have the tasks to be done attributes" do
-          expect(output[:tasks_to_be_done_options]).to be_nil
-          expect(output[:projects]).to be_nil
-          expect(output[:new_project_path]).to be_nil
-        end
-      end
-
-      context 'when logged in and the open_modal param is present' do
-        before do
-          allow(helper).to receive(:current_user).and_return(developer)
-          allow(helper).to receive(:params).and_return({ open_modal: 'invite_members_for_task' })
-        end
-
-        context 'for a group' do
-          let_it_be(:source) { create(:group, projects: [project]) }
+      subject(:output) { helper.common_invite_modal_dataset(source) }
 
-          it 'has the expected attributes', :aggregate_failures do
+      shared_examples_for 'including the tasks to be done attributes' do
+        it 'includes the tasks to be done attributes when expected' do
+          if expected?
             expect(output[:tasks_to_be_done_options]).to eq(
               [
                 { value: :code, text: 'Create/import code into a project (repository)' },
@@ -117,24 +83,75 @@ RSpec.describe InviteMembersHelper do
               [{ id: project.id, title: project.title }].to_json
             )
             expect(output[:new_project_path]).to eq(
-              new_project_path(namespace_id: source.id)
+              source.is_a?(Project) ? '' : new_project_path(namespace_id: group.id)
             )
+          else
+            expect(output[:tasks_to_be_done_options]).to be_nil
+            expect(output[:projects]).to be_nil
+            expect(output[:new_project_path]).to be_nil
           end
         end
+      end
 
-        context 'for a project' do
-          it 'has the expected attributes', :aggregate_failures do
-            expect(output[:tasks_to_be_done_options]).to eq(
-              [
-                { value: :code, text: 'Create/import code into a project (repository)' },
-                { value: :ci, text: 'Set up CI/CD pipelines to build, test, deploy, and monitor code' },
-                { value: :issues, text: 'Create/import issues (tickets) to collaborate on ideas and plan work' }
-              ].to_json
-            )
-            expect(output[:projects]).to eq(
-              [{ id: project.id, title: project.title }].to_json
-            )
-            expect(output[:new_project_path]).to eq('')
+      context 'the invite_members_for_task experiment' do
+        where(:invite_members_for_task_enabled?, :open_modal_param_present?, :logged_in?, :expected?) do
+          true  | true  | true  | true
+          true  | true  | false | false
+          true  | false | true  | false
+          true  | false | false | false
+          false | true  | true  | false
+          false | true  | false | false
+          false | false | true  | false
+          false | false | false | false
+        end
+
+        with_them do
+          before do
+            allow(helper).to receive(:current_user).and_return(developer) if logged_in?
+            stub_experiments(invite_members_for_task: true) if invite_members_for_task_enabled?
+            allow(helper).to receive(:params).and_return({ open_modal: 'invite_members_for_task' }) if open_modal_param_present?
+          end
+
+          context 'when the source is a project' do
+            let_it_be(:source) { project }
+
+            it_behaves_like 'including the tasks to be done attributes'
+          end
+
+          context 'when the source is a group' do
+            let_it_be(:source) { group }
+
+            it_behaves_like 'including the tasks to be done attributes'
+          end
+        end
+      end
+
+      context 'the invite_for_help_continuous_onboarding experiment' do
+        where(:invite_for_help_continuous_onboarding?, :logged_in?, :expected?) do
+          true  | true  | true
+          true  | false | false
+          false | true  | false
+          false | false | false
+        end
+
+        with_them do
+          before do
+            allow(helper).to receive(:current_user).and_return(developer) if logged_in?
+            stub_experiments(invite_for_help_continuous_onboarding: :candidate) if invite_for_help_continuous_onboarding?
+          end
+
+          context 'when the source is a project' do
+            let_it_be(:source) { project }
+
+            it_behaves_like 'including the tasks to be done attributes'
+          end
+
+          context 'when the source is a group' do
+            let_it_be(:source) { group }
+
+            let(:expected?) { false }
+
+            it_behaves_like 'including the tasks to be done attributes'
           end
         end
       end

spec/helpers/learn_gitlab_helper_spec.rb

@@ -60,6 +60,7 @@ RSpec.describe LearnGitlabHelper do
 
     let(:onboarding_actions_data) { Gitlab::Json.parse(learn_gitlab_data[:actions]).deep_symbolize_keys }
     let(:onboarding_sections_data) { Gitlab::Json.parse(learn_gitlab_data[:sections]).deep_symbolize_keys }
+    let(:onboarding_project_data) { Gitlab::Json.parse(learn_gitlab_data[:project]).deep_symbolize_keys }
 
     shared_examples 'has all data' do
       it 'has all actions' do
@@ -82,6 +83,11 @@ RSpec.describe LearnGitlabHelper do
         expect(onboarding_sections_data.keys).to contain_exactly(:deploy, :plan, :workspace)
         expect(onboarding_sections_data.values.map { |section| section.keys }).to match_array([[:svg]] * 3)
       end
+
+      it 'has all project data', :aggregate_failures do
+        expect(onboarding_project_data.keys).to contain_exactly(:name)
+        expect(onboarding_project_data.values).to match_array([project.name])
+      end
     end
 
     it_behaves_like 'has all data'