Merge branch '352678-create-metrics-for-training-links-clicked-security-config' into 'master'

Track security training provider clicks

See merge request gitlab-org/gitlab!80864

app/assets/javascripts/security_configuration/components/training_provider_list.vue

@@ -6,6 +6,8 @@ import { __ } from '~/locale';
 import {
   TRACK_TOGGLE_TRAINING_PROVIDER_ACTION,
   TRACK_TOGGLE_TRAINING_PROVIDER_LABEL,
+  TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION,
+  TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL,
 } from '~/security_configuration/constants';
 import dismissUserCalloutMutation from '~/graphql_shared/mutations/dismiss_user_callout.mutation.graphql';
 import securityTrainingProvidersQuery from '../graphql/security_training_providers.query.graphql';
@@ -137,6 +139,12 @@ export default {
         },
       });
     },
+    trackProviderLearnMoreClick(providerId) {
+      this.track(TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION, {
+        label: TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL,
+        property: providerId,
+      });
+    },
   },
   i18n,
 };
@@ -172,7 +180,13 @@ export default {
               <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ provider.name }}</h3>
               <p>
                 {{ provider.description }}
-                <gl-link :href="provider.url" target="_blank">{{ __('Learn more.') }}</gl-link>
+                <gl-link
+                  :href="provider.url"
+                  target="_blank"
+                  @click="trackProviderLearnMoreClick(provider.id)"
+                >
+                  {{ __('Learn more.') }}
+                </gl-link>
               </p>
             </div>
           </div>

app/assets/javascripts/security_configuration/constants.js

 export const TRACK_TOGGLE_TRAINING_PROVIDER_ACTION = 'toggle_security_training_provider';
 export const TRACK_TOGGLE_TRAINING_PROVIDER_LABEL = 'update_security_training_provider';
+
+export const TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION = 'click_link';
+export const TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL = 'security_training_provider';

spec/frontend/security_configuration/components/training_provider_list_spec.js

@@ -8,6 +8,8 @@ import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import {
   TRACK_TOGGLE_TRAINING_PROVIDER_ACTION,
   TRACK_TOGGLE_TRAINING_PROVIDER_LABEL,
+  TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION,
+  TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL,
 } from '~/security_configuration/constants';
 import TrainingProviderList from '~/security_configuration/components/training_provider_list.vue';
 import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
@@ -244,6 +246,24 @@ describe('TrainingProviderList component', () => {
           },
         });
       });
+
+      it(`tracks when a provider's "Learn more" link is clicked`, () => {
+        const firstProviderLink = findLinks().at(0);
+        const [{ id: firstProviderId }] = securityTrainingProviders;
+
+        expect(trackingSpy).not.toHaveBeenCalled();
+
+        firstProviderLink.vm.$emit('click');
+
+        expect(trackingSpy).toHaveBeenCalledWith(
+          undefined,
+          TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION,
+          {
+            label: TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL,
+            property: firstProviderId,
+          },
+        );
+      });
     });
   });