Add click metric for security training link

This adds tracking to capture the click of the security training link
on the vulnerablity details page.

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_training.vue

@@ -5,6 +5,7 @@ import { s__, __ } from '~/locale';
 import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import axios from '~/lib/utils/axios_utils';
+import Tracking from '~/tracking';
 import { SUPPORTED_IDENTIFIER_TYPES } from '../constants';
 
 export const i18n = {
@@ -29,7 +30,7 @@ export default {
     GlIcon,
     GlSkeletonLoader,
   },
-  mixins: [glFeatureFlagsMixin()],
+  mixins: [glFeatureFlagsMixin(), Tracking.mixin()],
   inject: ['projectFullPath'],
   props: {
     identifiers: {
@@ -111,6 +112,17 @@ export default {
         this.isLoading = false;
       }
     },
+    clickTrainingLink() {
+      const { name } = this.supportedIdentifier;
+      const { id } = mockProvider;
+
+      // Follow-up: switch to utilize constants once another MR is merged
+      // https://gitlab.com/gitlab-org/gitlab/-/issues/352915
+      this.track('click_security_training_link', {
+        label: `vendor_${id}`,
+        property: name,
+      });
+    },
   },
 };
 </script>
@@ -129,7 +141,7 @@ export default {
     </div>
     <div v-else>
       <div class="gl-font-weight-bold gl-font-base">{{ training.name }}</div>
-      <gl-link :href="training.url" target="_blank">
+      <gl-link :href="training.url" target="_blank" @click="clickTrainingLink">
         {{ $options.i18n.viewTraining }}
         <gl-icon class="gl-ml-2" name="external-link" :size="12" />
       </gl-link>

ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js

@@ -5,6 +5,7 @@ import * as Sentry from '@sentry/browser';
 import { GlLink, GlIcon, GlSkeletonLoader } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 
 import VulnerabilityTraining, {
   i18n,
@@ -18,7 +19,10 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { securityTrainingProvidersResponse } from 'jest/security_configuration/mock_data';
 
 const defaultProps = {
-  identifiers: [{ externalType: SUPPORTED_IDENTIFIER_TYPES.cwe }, { externalType: 'cve' }],
+  identifiers: [
+    { externalType: SUPPORTED_IDENTIFIER_TYPES.cwe, name: 'CWE-81' },
+    { externalType: 'cve' },
+  ],
 };
 
 const mockSuccessTrainingUrl = 'training/path';
@@ -179,6 +183,29 @@ describe('VulnerabilityTraining component', () => {
     });
   });
 
+  describe('metrics', () => {
+    let trackingSpy;
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('tracks when a training link gets clicked', async () => {
+      await mockTrainingSuccess();
+      createComponent();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      await waitForQueryToBeLoaded();
+      await findTrainingItemLink().vm.$emit('click');
+
+      // Follow-up: switch to utilize constants once another MR is merged
+      // https://gitlab.com/gitlab-org/gitlab/-/issues/352915
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_security_training_link', {
+        property: defaultProps.identifiers[0].name,
+        label: `vendor_${mockProvider.id}`,
+      });
+    });
+  });
+
   describe('when secureVulnerabilityTraining feature flag is disabled', () => {
     it('does not render the VulnerabilityTraining component', () => {
       createComponent({}, { secureVulnerabilityTraining: false });