Automatic merge of gitlab-org/gitlab master

app/assets/javascripts/security_configuration/constants.js

@@ -3,3 +3,4 @@ export const TRACK_TOGGLE_TRAINING_PROVIDER_LABEL = 'update_security_training_pr
 export const TRACK_CLICK_TRAINING_LINK = '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';

app/assets/stylesheets/startup/startup-dark.scss

@@ -1786,7 +1786,6 @@ body.gl-dark {
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
-  --black-normal: #fafafa;
   --svg-status-bg: #333;
 }
 .nav-sidebar li a {
@@ -2017,7 +2016,6 @@ body.gl-dark {
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
-  --black-normal: #fafafa;
   --svg-status-bg: #333;
 }
 .tab-width-8 {

app/assets/stylesheets/themes/_dark.scss

@@ -199,7 +199,6 @@ body.gl-dark {
 
   --white: #{$white};
   --black: #{$black};
-  --black-normal: #{$black-normal};
 
   --svg-status-bg: #{$white};
 

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

@@ -6,7 +6,10 @@ import securityTrainingProvidersQuery from '~/security_configuration/graphql/sec
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import axios from '~/lib/utils/axios_utils';
 import Tracking from '~/tracking';
-import { TRACK_CLICK_TRAINING_LINK } from '~/security_configuration/constants';
+import {
+  TRACK_CLICK_TRAINING_LINK,
+  TRACK_TRAINING_LOADED_ACTION,
+} from '~/security_configuration/constants';
 import { SUPPORTED_IDENTIFIER_TYPES } from '../constants';
 
 export const i18n = {
@@ -115,6 +118,7 @@ export default {
         const {
           data: { url },
         } = await axios.get(path, { params });
+        this.triggerMetric(TRACK_TRAINING_LOADED_ACTION);
         this.training = { name, url };
       } catch {
         this.hasError = true;
@@ -123,10 +127,13 @@ export default {
       }
     },
     clickTrainingLink() {
+      this.triggerMetric(TRACK_CLICK_TRAINING_LINK);
+    },
+    triggerMetric(action) {
       const { name } = this.supportedIdentifier;
       const { id } = mockProvider;
 
-      this.track(TRACK_CLICK_TRAINING_LINK, {
+      this.track(action, {
         label: `vendor_${id}`,
         property: name,
       });

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -1786,7 +1786,6 @@ body.gl-dark {
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
-  --black-normal: #fafafa;
   --svg-status-bg: #333;
 }
 .nav-sidebar li a {
@@ -2017,7 +2016,6 @@ body.gl-dark {
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
-  --black-normal: #fafafa;
   --svg-status-bg: #333;
 }
 .tab-width-8 {

ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js

@@ -14,7 +14,10 @@ import VulnerabilityTraining, {
 import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { SUPPORTED_IDENTIFIER_TYPES } from 'ee/vulnerabilities/constants';
-import { TRACK_CLICK_TRAINING_LINK } from '~/security_configuration/constants';
+import {
+  TRACK_CLICK_TRAINING_LINK,
+  TRACK_TRAINING_LOADED_ACTION,
+} from '~/security_configuration/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
@@ -204,21 +207,38 @@ describe('VulnerabilityTraining component', () => {
   describe('metrics', () => {
     let trackingSpy;
 
-    afterEach(() => {
-      unmockTracking();
-    });
-
-    it('tracks when a training link gets clicked', async () => {
+    beforeEach(async () => {
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
       await mockTrainingSuccess();
       createComponent();
-      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
       await waitForQueryToBeLoaded();
-      await findTrainingItemLink().vm.$emit('click');
+    });
 
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, TRACK_CLICK_TRAINING_LINK, {
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    const expectedTrackingOptions = {
       property: defaultProps.identifiers[0].name,
       label: `vendor_${mockProvider.id}`,
+    };
+
+    it('tracks when the training link gets loaded', () => {
+      expect(trackingSpy).toHaveBeenCalledWith(
+        undefined,
+        TRACK_TRAINING_LOADED_ACTION,
+        expectedTrackingOptions,
+      );
     });
+
+    it('tracks when a training link gets clicked', async () => {
+      await findTrainingItemLink().vm.$emit('click');
+
+      expect(trackingSpy).toHaveBeenCalledWith(
+        undefined,
+        TRACK_CLICK_TRAINING_LINK,
+        expectedTrackingOptions,
+      );
     });
   });