Add latest changes from gitlab-org/gitlab@master

6 files changed, 253 insertions, 131 deletions

diff --git a/spec/frontend/experimentation/utils_spec.js b/spec/frontend/experimentation/utils_spec.js
index 6ed7aa6665c..0d663fd055e 100644
--- a/spec/frontend/experimentation/utils_spec.js
+++ b/spec/frontend/experimentation/utils_spec.js
@@ -99,12 +99,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 }) => {
diff --git a/spec/frontend/invite_members/components/invite_members_modal_spec.js b/spec/frontend/invite_members/components/invite_members_modal_spec.js
index 5be79004640..24df424b40b 100644
--- a/spec/frontend/invite_members/components/invite_members_modal_spec.js
+++ b/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' });
 
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
index 3e371a8765f..1586aded6e6 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
+++ b/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>
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
index 882d233a239..f7b2154a935 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
@@ -1,4 +1,7 @@
 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();
+    });
+  });
 });
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js
index 7e97a539a99..7e71622770f 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js
@@ -1,20 +1,35 @@
-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%');
+    });
+  });
 });
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js b/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js
index 8d6ac737db8..1e633cb7cf5 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js
+++ b/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',
+};