Changed the tracking event to contain invalid character

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

@@ -60,10 +60,7 @@ export default {
   data() {
     return {
       isTipDismissed: Cookies.get(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true',
-      isValidationErrorEventSent: {
-        displaysMaskedError: false,
-        displaysVariableReferenceError: false,
-      },
+      validationErrorEventProperty: '',
     };
   },
   computed: {
@@ -162,7 +159,6 @@ export default {
         this.trackVariableValidationErrors();
       },
       deep: true,
-      immediate: true,
     },
   },
   methods: {
@@ -213,23 +209,24 @@ export default {
       }
     },
     trackVariableValidationErrors() {
-      if (this.displayMaskedError && !this.isValidationErrorEventSent.displaysMaskedError) {
-        this.track(EVENT_ACTION, { property: 'displaysMaskedError' });
-        this.isValidationErrorEventSent.displaysMaskedError = true;
-      }
-      if (
-        this.containsVariableReference &&
-        !this.isValidationErrorEventSent.displaysVariableReferenceError
-      ) {
-        this.track(EVENT_ACTION, { property: 'displaysVariableReferenceError' });
-        this.isValidationErrorEventSent.displaysVariableReferenceError = true;
+      if (this.variable.secret_value?.length && !this.validationErrorEventProperty) {
+        if (this.displayMaskedError && this.maskableRegex?.length) {
+          const supportedChars = this.maskableRegex.replace('^', '').replace(/{(\d,)}\$/, '');
+          const regex = new RegExp(supportedChars, 'g');
+
+          const error = this.variable.secret_value.replace(regex, '');
+
+          this.track(EVENT_ACTION, { property: error });
+          this.validationErrorEventProperty = error;
+        }
+        if (this.containsVariableReference) {
+          this.track(EVENT_ACTION, { property: '$' });
+          this.validationErrorEventProperty = '$';
+        }
       }
     },
     resetValidationErrorEvents() {
-      this.isValidationErrorEventSent = {
-        displaysMaskedError: false,
-        displaysVariableReferenceError: false,
-      };
+      this.validationErrorEventProperty = '';
     },
   },
 };

spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js

@@ -17,8 +17,10 @@ describe('Ci variable modal', () => {
   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: {
@@ -247,7 +249,7 @@ describe('Ci variable modal', () => {
       it('sends the correct tracking event', () => {
         expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTION, {
           label: EVENT_LABEL,
-          property: 'displaysMaskedError',
+          property: ';',
         });
       });
     });
@@ -264,7 +266,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', () => {