Add cta-click tracking to sec training promo

This commit adds tracking to the cta-button of the
security training promotion banner.

app/assets/javascripts/security_configuration/constants.js

@@ -4,3 +4,5 @@ export const TRACK_CLICK_TRAINING_LINK_ACTION = 'click_security_training_link';
 export const TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION = 'click_link';
 export const TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL = 'security_training_provider';
 export const TRACK_TRAINING_LOADED_ACTION = 'security_training_link_loaded';
+export const TRACK_PROMOTION_BANNER_CTA_CLICK_ACTION = 'click_button';
+export const TRACK_PROMOTION_BANNER_CTA_CLICK_LABEL = 'security_training_promotion_cta';

ee/app/assets/javascripts/security_dashboard/components/shared/security_training_promo.vue

@@ -2,12 +2,18 @@
 import { GlBanner } from '@gitlab/ui';
 import { __ } from '~/locale';
 import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+import Tracking from '~/tracking';
+import {
+  TRACK_PROMOTION_BANNER_CTA_CLICK_ACTION,
+  TRACK_PROMOTION_BANNER_CTA_CLICK_LABEL,
+} from '~/security_configuration/constants';
 
 export default {
   components: {
     GlBanner,
     UserCalloutDismisser,
   },
+  mixins: [Tracking.mixin()],
   inject: ['securityConfigurationPath'],
   i18n: {
     title: __('Reduce risk and triage fewer vulnerabilities with security training'),
@@ -21,6 +27,13 @@ export default {
       return `${this.securityConfigurationPath}?tab=vulnerability-management`;
     },
   },
+  methods: {
+    trackCTAClick() {
+      this.track(TRACK_PROMOTION_BANNER_CTA_CLICK_ACTION, {
+        label: TRACK_PROMOTION_BANNER_CTA_CLICK_LABEL,
+      });
+    },
+  },
 };
 </script>
 
@@ -33,6 +46,7 @@ export default {
         :button-text="$options.i18n.buttonText"
         :button-link="buttonLink"
         variant="introduction"
+        @primary="trackCTAClick"
         @close="dismiss"
       >
         <p>{{ $options.i18n.content }}</p>

ee/spec/frontend/security_dashboard/components/shared/security_training_promo_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlBanner } from '@gitlab/ui';
 import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import SecurityTrainingPromo from 'ee/security_dashboard/components/shared/security_training_promo.vue';
+import {
+  TRACK_PROMOTION_BANNER_CTA_CLICK_ACTION,
+  TRACK_PROMOTION_BANNER_CTA_CLICK_LABEL,
+} from '~/security_configuration/constants';
 
 const SECURITY_CONFIGURATION_PATH = 'foo/bar';
 const VULNERABILITY_MANAGEMENT_TAB_NAME = 'vulnerability-management';
@@ -69,4 +74,27 @@ describe('Security training promo component', () => {
       expect(findBanner().exists()).toBe(false);
     });
   });
+
+  describe('metrics', () => {
+    let trackingSpy;
+
+    beforeEach(async () => {
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      wrapper = createWrapper();
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('tracks clicks on the CTA button', () => {
+      expect(trackingSpy).not.toHaveBeenCalled();
+
+      findBanner().vm.$emit('primary');
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, TRACK_PROMOTION_BANNER_CTA_CLICK_ACTION, {
+        label: TRACK_PROMOTION_BANNER_CTA_CLICK_LABEL,
+      });
+    });
+  });
 });