Upsell the GitLab Terraform feature - tracking

app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue

@@ -3,6 +3,10 @@ import { GlBanner } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { setCookie } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+import { EVENT_LABEL, DISMISS_EVENT, CLICK_EVENT } from '../constants';
+
+const trackingMixin = Tracking.mixin({ label: EVENT_LABEL });
 
 export default {
   name: 'TerraformNotification',
@@ -16,6 +20,7 @@ export default {
   components: {
     GlBanner,
   },
+  mixins: [trackingMixin],
   inject: ['terraformImagePath', 'bannerDismissedKey'],
   data() {
     return {
@@ -31,6 +36,10 @@ export default {
     handleClose() {
       setCookie(this.bannerDismissedKey, true);
       this.isVisible = false;
+      this.track(DISMISS_EVENT);
+    },
+    buttonClick() {
+      this.track(CLICK_EVENT);
     },
   },
 };
@@ -43,6 +52,7 @@ export default {
       :button-link="docsUrl"
       :svg-path="terraformImagePath"
       variant="promotion"
+      @primary="buttonClick"
       @close="handleClose"
     >
       <p>{{ $options.i18n.description }}</p>

app/assets/javascripts/projects/terraform_notification/constants.js

+export const EVENT_LABEL = 'terraform_banner';
+export const DISMISS_EVENT = 'dismiss_banner';
+export const CLICK_EVENT = 'click_button';

spec/frontend/projects/terraform_notification/terraform_notification_spec.js

 import { GlBanner } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { setCookie, parseBoolean } from '~/lib/utils/common_utils';
 import TerraformNotification from '~/projects/terraform_notification/components/terraform_notification.vue';
+import {
+  EVENT_LABEL,
+  DISMISS_EVENT,
+  CLICK_EVENT,
+} from '~/projects/terraform_notification/constants';
 
 jest.mock('~/lib/utils/common_utils');
 
@@ -10,6 +16,7 @@ const bannerDismissedKey = 'terraform_notification_dismissed';
 
 describe('TerraformNotificationBanner', () => {
   let wrapper;
+  let trackingSpy;
 
   const provideData = {
     terraformImagePath,
@@ -22,11 +29,13 @@ describe('TerraformNotificationBanner', () => {
       provide: provideData,
       stubs: { GlBanner },
     });
+    trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
   });
 
   afterEach(() => {
     wrapper.destroy();
     parseBoolean.mockReturnValue(false);
+    unmockTracking();
   });
 
   describe('when the dismiss cookie is not set', () => {
@@ -44,8 +53,26 @@ describe('TerraformNotificationBanner', () => {
       expect(setCookie).toHaveBeenCalledWith(bannerDismissedKey, true);
     });
 
+    it('should send the dismiss event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, DISMISS_EVENT, {
+        label: EVENT_LABEL,
+      });
+    });
+
     it('should remove the banner', () => {
       expect(findBanner().exists()).toBe(false);
     });
   });
+
+  describe('when docs link is clicked', () => {
+    beforeEach(async () => {
+      await findBanner().vm.$emit('primary');
+    });
+
+    it('should send button click event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, CLICK_EVENT, {
+        label: EVENT_LABEL,
+      });
+    });
+  });
 });