Move masked variable regex warning to help text

In the variable settings modal, instead of making the warning bold when masked is checked show help text next to the variable value input Changelog: changed

Move masked variable regex warning to help text
In the variable settings modal, instead of making the warning bold when masked is checked show help text next to the variable value input Changelog: changed
851d2c80 · Miranda Fluharty · 475fa4e8 · 851d2c80 · 851d2c80 · 851d2c80
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue
@@ -190,6 +190,9 @@ export default {
    variableValidationState() {
      return this.variable.value === '' || (this.tokenValidationState && this.maskedState);
    },
+    variableValueHelpText() {
+      return this.variable.masked ? __('Must meet regular expression requirements.') : '';
+    },
  },
  watch: {
    variable: {
@@ -324,6 +327,7 @@ export default {
        :label="__('Value')"
        label-for="ci-variable-value"
        :state="variableValidationState"
+        :description="variableValueHelpText"
        :invalid-feedback="variableValidationFeedback"
      >
        <gl-form-textarea
@@ -424,13 +428,7 @@ export default {
          {{ __('Mask variable') }}
          <p class="gl-mt-2 text-secondary">
            {{ __('Variable will be masked in job logs.') }}
-            <span
-              :class="{
-                'bold text-plain': displayMaskedError,
-              }"
-            >
-              {{ __('Requires values to meet regular expression requirements.') }}</span
-            >
+            {{ __('Requires values to meet regular expression requirements.') }}
            <gl-link target="_blank" :href="maskedEnvironmentVariablesLink">{{
              __('Learn more.')
            }}</gl-link>

--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -29443,6 +29443,9 @@ msgstr ""
 msgid "Must be 90 days or more."
 msgstr ""
  
+msgid "Must meet regular expression requirements."
+msgstr ""
+
 msgid "My awesome group"
 msgstr ""
  
--- a/spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js
@@ -459,6 +459,7 @@ describe('Ci variable modal', () => {

  describe('Validations', () => {
    const maskError = 'This variable can not be masked.';
+    const helpText = 'Must meet regular expression requirements.';

    describe('when the variable is raw', () => {
      const [variable] = mockVariables;
@@ -488,6 +489,10 @@ describe('Ci variable modal', () => {

        expect(findModal().text()).toContain(maskError);
      });
+
+      it('does not show the masked variable help text', () => {
+        expect(findModal().text()).not.toContain(helpText);
+      });
    });

    describe('when the mask state is invalid', () => {
@@ -510,8 +515,9 @@ describe('Ci variable modal', () => {
        expect(findAddorUpdateButton().attributes('disabled')).toBeDefined();
      });

-      it('shows the correct error text', () => {
+      it('shows the correct error text and help text', () => {
        expect(findModal().text()).toContain(maskError);
+        expect(findModal().text()).toContain(helpText);
      });

      it('sends the correct tracking event', () => {
@@ -578,6 +584,10 @@ describe('Ci variable modal', () => {
        });
      });

+      it('shows the help text', () => {
+        expect(findModal().text()).toContain(helpText);
+      });
+
      it('does not disable the submit button', () => {
        expect(findAddorUpdateButton().attributes('disabled')).toBeUndefined();
      });