Merge branch '346395-add-snowplow-metrics-for-failing-masked-variable-validation' into 'master'

Add snowplow metrics for failing masked variable validation

See merge request gitlab-org/gitlab!75255

app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue

@@ -17,6 +17,7 @@ import {
 import Cookies from 'js-cookie';
 import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
+import Tracking from '~/tracking';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { mapComputed } from '~/vuex_shared/bindings';
 import {
@@ -25,10 +26,14 @@ import {
   AWS_TIP_DISMISSED_COOKIE_NAME,
   AWS_TIP_MESSAGE,
   CONTAINS_VARIABLE_REFERENCE_MESSAGE,
+  EVENT_LABEL,
+  EVENT_ACTION,
 } from '../constants';
 import CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
 import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens';
 
+const trackingMixin = Tracking.mixin({ label: EVENT_LABEL });
+
 export default {
   modalId: ADD_CI_VARIABLE_MODAL_ID,
   tokens: awsTokens,
@@ -51,10 +56,11 @@ export default {
     GlModal,
     GlSprintf,
   },
-  mixins: [glFeatureFlagsMixin()],
+  mixins: [glFeatureFlagsMixin(), trackingMixin],
   data() {
     return {
       isTipDismissed: Cookies.get(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true',
+      validationErrorEventProperty: '',
     };
   },
   computed: {
@@ -147,6 +153,14 @@ export default {
       return this.variable.secret_value === '' || (this.tokenValidationState && this.maskedState);
     },
   },
+  watch: {
+    variable: {
+      handler() {
+        this.trackVariableValidationErrors();
+      },
+      deep: true,
+    },
+  },
   methods: {
     ...mapActions([
       'addVariable',
@@ -179,6 +193,7 @@ export default {
 
       this.clearModal();
       this.resetSelectedEnvironment();
+      this.resetValidationErrorEvents();
     },
     updateOrAddVariable() {
       if (this.variableBeingEdited) {
@@ -193,6 +208,31 @@ export default {
         this.setVariableProtected();
       }
     },
+    trackVariableValidationErrors() {
+      const property = this.getTrackingErrorProperty();
+      if (!this.validationErrorEventProperty && property) {
+        this.track(EVENT_ACTION, { property });
+        this.validationErrorEventProperty = property;
+      }
+    },
+    getTrackingErrorProperty() {
+      let property;
+      if (this.variable.secret_value?.length && !property) {
+        if (this.displayMaskedError && this.maskableRegex?.length) {
+          const supportedChars = this.maskableRegex.replace('^', '').replace(/{(\d,)}\$/, '');
+          const regex = new RegExp(supportedChars, 'g');
+          property = this.variable.secret_value.replace(regex, '');
+        }
+        if (this.containsVariableReference) {
+          property = '$';
+        }
+      }
+
+      return property;
+    },
+    resetValidationErrorEvents() {
+      this.validationErrorEventProperty = '';
+    },
   },
 };
 </script>

app/assets/javascripts/ci_variable_list/constants.js

@@ -19,6 +19,9 @@ export const AWS_TIP_MESSAGE = __(
   '%{deployLinkStart}Use a template to deploy to ECS%{deployLinkEnd}, or use a docker image to %{commandsLinkStart}run AWS commands in GitLab CI/CD%{commandsLinkEnd}.',
 );
 
+export const EVENT_LABEL = 'ci_variable_modal';
+export const EVENT_ACTION = 'validation_error';
+
 // AWS TOKEN CONSTANTS
 export const AWS_ACCESS_KEY_ID = 'AWS_ACCESS_KEY_ID';
 export const AWS_DEFAULT_REGION = 'AWS_DEFAULT_REGION';

spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js

 import { GlButton, GlFormInput } from '@gitlab/ui';
 import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { mockTracking } from 'helpers/tracking_helper';
 import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
 import CiVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue';
-import { AWS_ACCESS_KEY_ID } from '~/ci_variable_list/constants';
+import { AWS_ACCESS_KEY_ID, EVENT_LABEL, EVENT_ACTION } from '~/ci_variable_list/constants';
 import createStore from '~/ci_variable_list/store';
 import mockData from '../services/mock_data';
 import ModalStub from '../stubs';
@@ -14,9 +15,12 @@ localVue.use(Vuex);
 describe('Ci variable modal', () => {
   let wrapper;
   let store;
+  let trackingSpy;
+
+  const maskableRegex = '^[a-zA-Z0-9_+=/@:.~-]{8,}$';
 
   const createComponent = (method, options = {}) => {
-    store = createStore({ isGroup: options.isGroup });
+    store = createStore({ maskableRegex, isGroup: options.isGroup });
     wrapper = method(CiVariableModal, {
       attachTo: document.body,
       stubs: {
@@ -138,6 +142,7 @@ describe('Ci variable modal', () => {
       };
       createComponent(mount);
       store.state.variable = invalidKeyVariable;
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
     });
 
     it(`${rendered ? 'renders' : 'does not render'} the variable reference warning`, () => {
@@ -226,6 +231,7 @@ describe('Ci variable modal', () => {
         };
         createComponent(mount);
         store.state.variable = invalidMaskVariable;
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
       });
 
       it('disables the submit button', () => {
@@ -235,6 +241,50 @@ describe('Ci variable modal', () => {
       it('shows the correct error text', () => {
         expect(findModal().text()).toContain(maskError);
       });
+
+      it('sends the correct tracking event', () => {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTION, {
+          label: EVENT_LABEL,
+          property: ';',
+        });
+      });
+    });
+
+    describe.each`
+      value                  | secret                | masked   | eventSent | trackingErrorProperty
+      ${'value'}             | ${'secretValue'}      | ${false} | ${0}      | ${null}
+      ${'shortMasked'}       | ${'short'}            | ${true}  | ${0}      | ${null}
+      ${'withDollar$Sign'}   | ${'dollar$ign'}       | ${false} | ${1}      | ${'$'}
+      ${'withDollar$Sign'}   | ${'dollar$ign'}       | ${true}  | ${1}      | ${'$'}
+      ${'unsupported'}       | ${'unsupported|char'} | ${true}  | ${1}      | ${'|'}
+      ${'unsupportedMasked'} | ${'unsupported|char'} | ${false} | ${0}      | ${null}
+    `('Adding a new variable', ({ value, secret, masked, eventSent, trackingErrorProperty }) => {
+      beforeEach(() => {
+        const [variable] = mockData.mockVariables;
+        const invalidKeyVariable = {
+          ...variable,
+          key: 'key',
+          value,
+          secret_value: secret,
+          masked,
+        };
+        createComponent(mount);
+        store.state.variable = invalidKeyVariable;
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      });
+
+      it(`${
+        eventSent > 0 ? 'sends the correct' : 'does not send the'
+      } variable validation tracking event`, () => {
+        expect(trackingSpy).toHaveBeenCalledTimes(eventSent);
+
+        if (eventSent > 0) {
+          expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTION, {
+            label: EVENT_LABEL,
+            property: trackingErrorProperty,
+          });
+        }
+      });
     });
 
     describe('when both states are valid', () => {
@@ -249,7 +299,6 @@ describe('Ci variable modal', () => {
         };
         createComponent(mount);
         store.state.variable = validMaskandKeyVariable;
-        store.state.maskableRegex = /^[a-zA-Z0-9_+=/@:.~-]{8,}$/;
       });
 
       it('does not disable the submit button', () => {