Send event each time we show pipeline nudge 2

This is the view event for the second and third nudge
steps of the experiment.

app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue

@@ -4,6 +4,9 @@ import Cookies from 'js-cookie';
 import { parseBoolean, scrollToElement } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { glEmojiTag } from '~/emoji';
+import Tracking from '~/tracking';
+
+const trackingMixin = Tracking.mixin();
 
 const popoverStates = {
   suggest_gitlab_ci_yml: {
@@ -27,6 +30,7 @@ export default {
     GlIcon,
     GlButton,
   },
+  mixins: [trackingMixin],
   props: {
     target: {
       type: String,
@@ -40,10 +44,18 @@ export default {
       type: String,
       required: true,
     },
+    humanAccess: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
       popoverDismissed: parseBoolean(Cookies.get(this.dismissKey)),
+      tracking: {
+        label: this.trackLabel,
+        property: this.humanAccess,
+      },
     };
   },
   computed: {
@@ -60,12 +72,17 @@ export default {
   mounted() {
     if (this.trackLabel === 'suggest_commit_first_project_gitlab_ci_yml' && !this.popoverDismissed)
       scrollToElement(document.querySelector(this.target));
+
+    this.trackOnShow();
   },
   methods: {
     onDismiss() {
       this.popoverDismissed = true;
       Cookies.set(this.dismissKey, this.popoverDismissed, { expires: 365 });
     },
+    trackOnShow() {
+      if (!this.popoverDismissed) this.track();
+    },
   },
 };
 </script>

app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js

@@ -10,6 +10,7 @@ export default el =>
           target: el.dataset.target,
           trackLabel: el.dataset.trackLabel,
           dismissKey: el.dataset.dismissKey,
+          humanAccess: el.dataset.humanAccess,
         },
       });
     },

app/helpers/blob_helper.rb

@@ -353,4 +353,8 @@ module BlobHelper
   def suggest_pipeline_commit_cookie_name
     "suggest_gitlab_ci_yml_commit_#{@project.id}"
   end
+
+  def human_access
+    @project.team.human_max_access(current_user&.id).try(:downcase)
+  end
 end

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

@@ -23,7 +23,8 @@
         .js-suggest-gitlab-ci-yml{ data: { toggle: 'popover',
           target: '#gitlab-ci-yml-selector',
           track_label: 'suggest_gitlab_ci_yml',
-          dismiss_key: "suggest_gitlab_ci_yml_#{@project.id}" } }
+          dismiss_key: "suggest_gitlab_ci_yml_#{@project.id}",
+          human_access: human_access } }
 
     .file-buttons
       - if is_markdown

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

@@ -17,4 +17,5 @@
       .js-suggest-gitlab-ci-yml-commit-changes{ data: { toggle: 'popover',
         target: '#commit-changes',
         track_label: 'suggest_commit_first_project_gitlab_ci_yml',
-        dismiss_key: "suggest_commit_first_project_gitlab_ci_yml_#{@project.id}" } }
+        dismiss_key: "suggest_commit_first_project_gitlab_ci_yml_#{@project.id}",
+        human_access: human_access } }

spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js

 import { shallowMount } from '@vue/test-utils';
 import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue';
 import Cookies from 'js-cookie';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import * as utils from '~/lib/utils/common_utils';
 
 jest.mock('~/lib/utils/common_utils', () => ({
@@ -11,6 +12,8 @@ jest.mock('~/lib/utils/common_utils', () => ({
 const target = 'gitlab-ci-yml-selector';
 const dismissKey = 'suggest_gitlab_ci_yml_99';
 const defaultTrackLabel = 'suggest_gitlab_ci_yml';
+const commitTrackLabel = 'suggest_commit_first_project_gitlab_ci_yml';
+const humanAccess = 'owner';
 
 describe('Suggest gitlab-ci.yml Popover', () => {
   let wrapper;
@@ -21,6 +24,7 @@ describe('Suggest gitlab-ci.yml Popover', () => {
         target,
         trackLabel,
         dismissKey,
+        humanAccess,
       },
     });
   }
@@ -50,15 +54,43 @@ describe('Suggest gitlab-ci.yml Popover', () => {
       expect(wrapper.vm.popoverDismissed).toEqual(true);
     });
 
-    beforeEach(() => {
+    afterEach(() => {
       Cookies.remove(dismissKey);
     });
   });
 
+  describe('tracking', () => {
+    let trackingSpy;
+
+    beforeEach(() => {
+      createWrapper(commitTrackLabel);
+      trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('sends a tracking event with the expected properties for the popover being viewed', () => {
+      const expectedCategory = undefined;
+      const expectedAction = undefined;
+      const expectedLabel = 'suggest_commit_first_project_gitlab_ci_yml';
+      const expectedProperty = 'owner';
+
+      document.body.dataset.page = 'projects:blob:new';
+
+      wrapper.vm.trackOnShow();
+
+      expect(trackingSpy).toHaveBeenCalledWith(expectedCategory, expectedAction, {
+        label: expectedLabel,
+        property: expectedProperty,
+      });
+    });
+  });
+
   describe('when the popover is mounted with the trackLabel of the Confirm button popover at the bottom of the page', () => {
     it('calls scrollToElement so that the Confirm button and popover will be in sight', () => {
       const scrollToElementSpy = jest.spyOn(utils, 'scrollToElement');
-      const commitTrackLabel = 'suggest_commit_first_project_gitlab_ci_yml';
 
       createWrapper(commitTrackLabel);