Add tracking on modal show for pipeline success

- needed for feature to be complete.

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,11 +36,29 @@ export default {
       type: String,
       required: true,
     },
+    humanAccess: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      tracking: {
+        label: 'congratulate_first_pipeline',
+        property: this.humanAccess,
+      },
+    };
   },
   mounted() {
+    this.trackOnShow();
     this.disableModalFromRenderingAgain();
   },
   methods: {
+    trackOnShow() {
+      if (!this.popoverDismissed) {
+        this.track();
+      }
+    },
     disableModalFromRenderingAgain() {
       Cookies.remove(this.commitCookie);
     },

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

@@ -2,19 +2,16 @@ 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';
 
   beforeEach(() => {
     wrapper = shallowMount(pipelineTourSuccess, {
-      propsData: {
-        goToPipelinesPath,
-        commitCookie,
-      },
+      propsData: modalProps,
     });
 
     cookieSpy = jest.spyOn(Cookies, 'remove');
@@ -35,6 +32,29 @@ describe('PipelineTourSuccessModal', () => {
   it('calls to remove cookie', () => {
     wrapper.vm.disableModalFromRenderingAgain();
 
-    expect(cookieSpy).toHaveBeenCalledWith(commitCookie);
+    expect(cookieSpy).toHaveBeenCalledWith(modalProps.commitCookie);
+  });
+
+  describe('tracking', () => {
+    let trackingSpy;
+
+    beforeEach(() => {
+      trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('send event for basic view of popover', () => {
+      document.body.dataset.page = 'projects:blob:show';
+
+      wrapper.vm.trackOnShow();
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, undefined, {
+        label: 'congratulate_first_pipeline',
+        property: modalProps.humanAccess,
+      });
+    });
   });
 });