Merge branch 'track-celebration-for-suggest-pipeline' into 'master'

Add tracking on modal show for pipeline success

Closes gitlab-org/growth/product#297

See merge request gitlab-org/gitlab!28364

app/assets/javascripts/blob/pipeline_tour_success_modal.vue

@@ -3,6 +3,9 @@ import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
 import Cookies from 'js-cookie';
 import { glEmojiTag } from '~/emoji';
+import Tracking from '~/tracking';
+
+const trackingMixin = Tracking.mixin();
 
 export default {
   beginnerLink:
@@ -23,6 +26,7 @@ export default {
     GlSprintf,
     GlLink,
   },
+  mixins: [trackingMixin],
   props: {
     goToPipelinesPath: {
       type: String,
@@ -32,8 +36,21 @@ export default {
       type: String,
       required: true,
     },
+    humanAccess: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      tracking: {
+        label: 'congratulate_first_pipeline',
+        property: this.humanAccess,
+      },
+    };
   },
   mounted() {
+    this.track();
     this.disableModalFromRenderingAgain();
   },
   methods: {

app/assets/javascripts/pages/projects/blob/show/index.js

@@ -45,12 +45,13 @@ document.addEventListener('DOMContentLoaded', () => {
       new Vue({
         el: successPipelineEl,
         render(createElement) {
-          const { commitCookie, pipelinesPath: goToPipelinesPath } = this.$el.dataset;
+          const { commitCookie, goToPipelinesPath, humanAccess } = this.$el.dataset;
 
           return createElement(PipelineTourSuccessModal, {
             props: {
               goToPipelinesPath,
               commitCookie,
+              humanAccess,
             },
           });
         },

app/views/projects/blob/_pipeline_tour_success.html.haml

-.js-success-pipeline-modal{ 'data-commit-cookie': suggest_pipeline_commit_cookie_name, 'data-pipelines-path': project_pipelines_path(@project) }
+.js-success-pipeline-modal{ data: { 'commit-cookie': suggest_pipeline_commit_cookie_name,
+  'go-to-pipelines-path': project_pipelines_path(@project),
+  'human-access': @project.team.human_max_access(current_user&.id) } }

spec/frontend/blob/pipeline_tour_success_mock_data.js

+const modalProps = {
+  goToPipelinesPath: 'some_pipeline_path',
+  commitCookie: 'some_cookie',
+  humanAccess: 'maintainer',
+};
+
+export default modalProps;

spec/frontend/blob/pipeline_tour_success_spec.js → spec/frontend/blob/pipeline_tour_success_modal_spec.js

@@ -2,19 +2,20 @@ import pipelineTourSuccess from '~/blob/pipeline_tour_success_modal.vue';
 import { shallowMount } from '@vue/test-utils';
 import Cookies from 'js-cookie';
 import { GlSprintf, GlModal } from '@gitlab/ui';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import modalProps from './pipeline_tour_success_mock_data';
 
 describe('PipelineTourSuccessModal', () => {
   let wrapper;
   let cookieSpy;
-  const goToPipelinesPath = 'some_pipeline_path';
-  const commitCookie = 'some_cookie';
+  let trackingSpy;
 
   beforeEach(() => {
+    document.body.dataset.page = 'projects:blob:show';
+
+    trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
     wrapper = shallowMount(pipelineTourSuccess, {
-      propsData: {
-        goToPipelinesPath,
-        commitCookie,
-      },
+      propsData: modalProps,
     });
 
     cookieSpy = jest.spyOn(Cookies, 'remove');
@@ -22,6 +23,7 @@ describe('PipelineTourSuccessModal', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    unmockTracking();
   });
 
   it('has expected structure', () => {
@@ -35,6 +37,15 @@ describe('PipelineTourSuccessModal', () => {
   it('calls to remove cookie', () => {
     wrapper.vm.disableModalFromRenderingAgain();
 
-    expect(cookieSpy).toHaveBeenCalledWith(commitCookie);
+    expect(cookieSpy).toHaveBeenCalledWith(modalProps.commitCookie);
+  });
+
+  describe('tracking', () => {
+    it('send event for basic view of popover', () => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, undefined, {
+        label: 'congratulate_first_pipeline',
+        property: modalProps.humanAccess,
+      });
+    });
   });
 });