Add latest changes from gitlab-org/gitlab@13-2-stable-ee

2 files changed, 57 insertions, 38 deletions

diff --git a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
index a9034b81d2f..69953fb5e03 100644
--- a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
+++ b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
@@ -2,32 +2,30 @@
 
 exports[`Expiration Policy Form renders 1`] = `
 <div
-  class="lh-2"
+  class="gl-line-height-20"
 >
   <gl-form-group-stub
     id="expiration-policy-toggle-group"
-    label="Expiration policy:"
+    label="Cleanup policy:"
     label-align="right"
     label-cols="3"
     label-for="expiration-policy-toggle"
   >
     <div
-      class="d-flex align-items-start"
+      class="gl-display-flex"
     >
       <gl-toggle-stub
         id="expiration-policy-toggle"
-        labeloff="Toggle Status: OFF"
-        labelon="Toggle Status: ON"
-        labelposition="hidden"
+        labelposition="top"
       />
        
       <span
-        class="mb-2 ml-1 lh-2"
+        class="gl-mb-3 gl-ml-3 gl-line-height-20"
       >
-        Docker tag expiration policy is 
         <strong>
-          disabled
+          Disabled
         </strong>
+         - Tags matching the patterns defined below will be scheduled for deletion
       </span>
     </div>
   </gl-form-group-stub>
@@ -116,7 +114,6 @@ exports[`Expiration Policy Form renders 1`] = `
    
   <gl-form-group-stub
     id="expiration-policy-name-matching-group"
-    invalid-feedback="The value of this input should be less than 255 characters"
     label-align="right"
     label-cols="3"
     label-for="expiration-policy-name-matching"
@@ -125,6 +122,7 @@ exports[`Expiration Policy Form renders 1`] = `
     <gl-form-textarea-stub
       disabled="true"
       id="expiration-policy-name-matching"
+      noresize="true"
       placeholder=".*"
       trim=""
       value=""
@@ -132,7 +130,6 @@ exports[`Expiration Policy Form renders 1`] = `
   </gl-form-group-stub>
   <gl-form-group-stub
     id="expiration-policy-keep-name-group"
-    invalid-feedback="The value of this input should be less than 255 characters"
     label-align="right"
     label-cols="3"
     label-for="expiration-policy-keep-name"
@@ -141,6 +138,7 @@ exports[`Expiration Policy Form renders 1`] = `
     <gl-form-textarea-stub
       disabled="true"
       id="expiration-policy-keep-name"
+      noresize="true"
       placeholder=""
       trim=""
       value=""
diff --git a/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js b/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js
index 4825351a6d3..ee765ffd1c0 100644
--- a/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js
+++ b/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js
@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { GlSprintf } from '@gitlab/ui';
 import component from '~/registry/shared/components/expiration_policy_fields.vue';
 
-import { NAME_REGEX_LENGTH } from '~/registry/shared/constants';
+import { NAME_REGEX_LENGTH, ENABLED_TEXT, DISABLED_TEXT } from '~/registry/shared/constants';
 import { formOptions } from '../mock_data';
 
 describe('Expiration Policy Form', () => {
@@ -94,7 +94,9 @@ describe('Expiration Policy Form', () => {
           : 'input';
         element.vm.$emit(modelUpdateEvent, value);
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.emitted('input')).toEqual([[{ [modelName]: value }]]);
+          expect(wrapper.emitted('input')).toEqual([
+            [{ newValue: { [modelName]: value }, modified: modelName }],
+          ]);
         });
       });
 
@@ -126,42 +128,61 @@ describe('Expiration Policy Form', () => {
   });
 
   describe.each`
-    modelName            | elementName        | stateVariable
-    ${'name_regex'}      | ${'name-matching'} | ${'nameRegexState'}
-    ${'name_regex_keep'} | ${'keep-name'}     | ${'nameKeepRegexState'}
-  `('regex textarea validation', ({ modelName, elementName, stateVariable }) => {
-    describe(`when name regex is longer than ${NAME_REGEX_LENGTH}`, () => {
-      const invalidString = new Array(NAME_REGEX_LENGTH + 2).join(',');
-
-      beforeEach(() => {
-        mountComponent({ value: { [modelName]: invalidString } });
+    modelName            | elementName
+    ${'name_regex'}      | ${'name-matching'}
+    ${'name_regex_keep'} | ${'keep-name'}
+  `('regex textarea validation', ({ modelName, elementName }) => {
+    const invalidString = new Array(NAME_REGEX_LENGTH + 2).join(',');
+
+    describe('when apiError contains an error message', () => {
+      const errorMessage = 'something went wrong';
+
+      it('shows the error message on the relevant field', () => {
+        mountComponent({ apiErrors: { [modelName]: errorMessage } });
+        expect(findFormGroup(elementName).attributes('invalid-feedback')).toBe(errorMessage);
       });
 
-      it(`${stateVariable} is false`, () => {
-        expect(wrapper.vm.textAreaState[stateVariable]).toBe(false);
-      });
-
-      it('emit the @invalidated event', () => {
-        expect(wrapper.emitted('invalidated')).toBeTruthy();
+      it('gives precedence to API errors compared to local ones', () => {
+        mountComponent({
+          apiErrors: { [modelName]: errorMessage },
+          value: { [modelName]: invalidString },
+        });
+        expect(findFormGroup(elementName).attributes('invalid-feedback')).toBe(errorMessage);
       });
     });
 
-    it('if the user did not type validation is null', () => {
-      mountComponent({ value: { [modelName]: '' } });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.textAreaState[stateVariable]).toBe(null);
+    describe('when apiErrors is empty', () => {
+      it('if the user did not type validation is null', async () => {
+        mountComponent({ value: { [modelName]: '' } });
+        expect(findFormGroup(elementName).attributes('state')).toBeUndefined();
         expect(wrapper.emitted('validated')).toBeTruthy();
       });
-    });
 
-    it(`if the user typed and is less than ${NAME_REGEX_LENGTH} state is true`, () => {
-      mountComponent({ value: { [modelName]: 'foo' } });
-      return wrapper.vm.$nextTick().then(() => {
+      it(`if the user typed and is less than ${NAME_REGEX_LENGTH} state is true`, () => {
+        mountComponent({ value: { [modelName]: 'foo' } });
+
         const formGroup = findFormGroup(elementName);
         const formElement = findFormElements(elementName, formGroup);
         expect(formGroup.attributes('state')).toBeTruthy();
         expect(formElement.attributes('state')).toBeTruthy();
       });
+
+      describe(`when name regex is longer than ${NAME_REGEX_LENGTH}`, () => {
+        beforeEach(() => {
+          mountComponent({ value: { [modelName]: invalidString } });
+        });
+
+        it('textAreaValidation state is false', () => {
+          expect(findFormGroup(elementName).attributes('state')).toBeUndefined();
+          // we are forced to check the model attribute because falsy attrs are all casted to undefined in attrs
+          // while in this case false shows an error and null instead shows nothing.
+          expect(wrapper.vm.textAreaValidation[modelName].state).toBe(false);
+        });
+
+        it('emit the @invalidated event', () => {
+          expect(wrapper.emitted('invalidated')).toBeTruthy();
+        });
+      });
     });
   });
 
@@ -169,13 +190,13 @@ describe('Expiration Policy Form', () => {
     it('toggleDescriptionText show disabled when settings.enabled is false', () => {
       mountComponent();
       const toggleHelpText = findFormGroup('toggle').find('span');
-      expect(toggleHelpText.html()).toContain('disabled');
+      expect(toggleHelpText.html()).toContain(DISABLED_TEXT);
     });
 
     it('toggleDescriptionText show enabled when settings.enabled is true', () => {
       mountComponent({ value: { enabled: true } });
       const toggleHelpText = findFormGroup('toggle').find('span');
-      expect(toggleHelpText.html()).toContain('enabled');
+      expect(toggleHelpText.html()).toContain(ENABLED_TEXT);
     });
   });
 });