Use exposed regex for frontend maskable check

Pass string value in through haml template data attribute
Evaluate it into a regex when initiating variable list
Use it to determine whether to show the maskability warning

2 files changed, 13 insertions, 4 deletions

diff --git a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js
index 592e1fd1c31..0bba2a2e160 100644
--- a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js
+++ b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js
@@ -27,15 +27,24 @@ function generateErrorBoxContent(errors) {
 
 // Used for the variable list on CI/CD projects/groups settings page
 export default class AjaxVariableList {
-  constructor({ container, saveButton, errorBox, formField = 'variables', saveEndpoint }) {
+  constructor({
+    container,
+    saveButton,
+    errorBox,
+    formField = 'variables',
+    saveEndpoint,
+    maskableRegex,
+  }) {
     this.container = container;
     this.saveButton = saveButton;
     this.errorBox = errorBox;
     this.saveEndpoint = saveEndpoint;
+    this.maskableRegex = maskableRegex;
 
     this.variableList = new VariableList({
       container: this.container,
       formField,
+      maskableRegex,
     });
 
     this.bindEvents();
diff --git a/app/assets/javascripts/ci_variable_list/ci_variable_list.js b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
index 70335ff5751..0303e4e51dd 100644
--- a/app/assets/javascripts/ci_variable_list/ci_variable_list.js
+++ b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
@@ -16,9 +16,10 @@ function createEnvironmentItem(value) {
 }
 
 export default class VariableList {
-  constructor({ container, formField }) {
+  constructor({ container, formField, maskableRegex }) {
     this.$container = $(container);
     this.formField = formField;
+    this.maskableRegex = new RegExp(maskableRegex);
     this.environmentDropdownMap = new WeakMap();
 
     this.inputMap = {
@@ -196,9 +197,8 @@ export default class VariableList {
   validateMaskability($row) {
     const invalidInputClass = 'gl-field-error-outline';
 
-    const maskableRegex = /^[a-zA-Z0-9_+=/-]{8,}$/; // Eight or more characters, from the Base64 alphabet (RFC4648)
     const variableValue = $row.find(this.inputMap.secret_value.selector).val();
-    const isValueMaskable = maskableRegex.test(variableValue) || variableValue === '';
+    const isValueMaskable = this.maskableRegex.test(variableValue) || variableValue === '';
     const isMaskedChecked = $row.find(this.inputMap.masked.selector).val() === 'true';
 
     // Show a validation error if the user wants to mask an unmaskable variable value