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

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();

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

app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js

@@ -12,5 +12,6 @@ document.addEventListener('DOMContentLoaded', () => {
     saveButton: variableListEl.querySelector('.js-ci-variables-save-button'),
     errorBox: variableListEl.querySelector('.js-ci-variable-error-box'),
     saveEndpoint: variableListEl.dataset.saveEndpoint,
+    maskableRegex: variableListEl.dataset.maskableRegex,
   });
 });

app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js

@@ -21,6 +21,7 @@ document.addEventListener('DOMContentLoaded', () => {
     saveButton: variableListEl.querySelector('.js-ci-variables-save-button'),
     errorBox: variableListEl.querySelector('.js-ci-variable-error-box'),
     saveEndpoint: variableListEl.dataset.saveEndpoint,
+    maskableRegex: variableListEl.dataset.maskableRegex,
   });
   // hide extra auto devops settings based checkbox state

app/views/ci/variables/_index.html.haml

@@ -6,7 +6,7 @@
     = s_('Environment variables are configured by your administrator to be %{link_start}protected%{link_end} by default').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 .row
-  .col-lg-12.js-ci-variable-list-section{ data: { save_endpoint: save_endpoint } }
+  .col-lg-12.js-ci-variable-list-section{ data: { save_endpoint: save_endpoint, maskable_regex: ci_variable_maskable_regex } }
     .hide.alert.alert-danger.js-ci-variable-error-box
     %ul.ci-variable-list