Merge branch '348592-create-metrics-for-enable-training-cta' into 'master'

Track clicks on security training promotion banner CTA

See merge request gitlab-org/gitlab!82584

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,13 +2,19 @@
 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,
   },
-  inject: ['securityConfigurationPath'],
+  mixins: [Tracking.mixin()],
+  inject: ['securityConfigurationPath', 'projectFullPath'],
   i18n: {
     title: __('Reduce risk and triage fewer vulnerabilities with security training'),
     buttonText: __('Enable security training'),
@@ -21,6 +27,14 @@ 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,
+        property: this.projectFullPath,
+      });
+    },
+  },
 };
 </script>
 
@@ -33,6 +47,7 @@ export default {
         :button-text="$options.i18n.buttonText"
         :button-link="buttonLink"
         variant="introduction"
+        @primary="trackCTAClick"
         @close="dismiss"
       >
         <p>{{ $options.i18n.content }}</p>

ee/app/assets/javascripts/security_dashboard/security_dashboard_init.js

@@ -33,6 +33,7 @@ export default (el, dashboardType) => {
     dashboardDocumentation: el.dataset.dashboardDocumentation,
     emptyStateSvgPath: el.dataset.emptyStateSvgPath,
     groupFullPath: el.dataset.groupFullPath,
+    projectFullPath: el.dataset.projectFullPath,
     securityConfigurationPath: el.dataset.securityConfigurationPath,
     surveyRequestSvgPath: el.dataset.surveyRequestSvgPath,
     securityDashboardHelpPath: el.dataset.securityDashboardHelpPath,

ee/spec/frontend/security_dashboard/components/project/project_security_dashboard_spec.js

@@ -55,6 +55,7 @@ describe('Project Security Dashboard component', () => {
       provide: {
         // To be consumed by SecurityDashboardLayout
         sbomSurveySvgPath: '/',
+        projectFullPath: 'namespace/project',
         glFeatures: {
           secureVulnerabilityTraining: secureVulnerabilityTrainingEnabled,
         },

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';
+const PROJECT_FULL_PATH = 'namespace/project';
 
 describe('Security training promo component', () => {
   let wrapper;
@@ -13,6 +19,7 @@ describe('Security training promo component', () => {
   const createWrapper = ({ shouldShowCallout = true } = {}) =>
     shallowMount(SecurityTrainingPromo, {
       provide: {
+        projectFullPath: PROJECT_FULL_PATH,
         securityConfigurationPath: SECURITY_CONFIGURATION_PATH,
       },
       stubs: {
@@ -69,4 +76,28 @@ 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,
+        property: PROJECT_FULL_PATH,
+      });
+    });
+  });
 });