1 files changed, 44 insertions, 13 deletions

diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index afd502109bf..f129922c1d2 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -1,13 +1,15 @@
 <script>
+import { get } from 'lodash';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { GlCard, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import Tracking from '~/tracking';
+import { mapComputed } from '~/vuex_shared/bindings';
 import {
   UPDATE_SETTINGS_ERROR_MESSAGE,
   UPDATE_SETTINGS_SUCCESS_MESSAGE,
 } from '../../shared/constants';
-import { mapComputed } from '~/vuex_shared/bindings';
 import ExpirationPolicyFields from '../../shared/components/expiration_policy_fields.vue';
+import { SET_CLEANUP_POLICY_BUTTON, CLEANUP_POLICY_CARD_HEADER } from '../constants';
 
 export default {
   components: {
@@ -21,12 +23,17 @@ export default {
     cols: 3,
     align: 'right',
   },
+  i18n: {
+    CLEANUP_POLICY_CARD_HEADER,
+    SET_CLEANUP_POLICY_BUTTON,
+  },
   data() {
     return {
       tracking: {
         label: 'docker_container_retention_and_expiration_policies',
       },
-      formIsValid: true,
+      fieldsAreValid: true,
+      apiErrors: null,
     };
   },
   computed: {
@@ -34,7 +41,7 @@ export default {
     ...mapGetters({ isEdited: 'getIsEdited' }),
     ...mapComputed([{ key: 'settings', getter: 'getSettings' }], 'updateSettings'),
     isSubmitButtonDisabled() {
-      return !this.formIsValid || this.isLoading;
+      return !this.fieldsAreValid || this.isLoading;
     },
     isCancelButtonDisabled() {
       return !this.isEdited || this.isLoading;
@@ -44,13 +51,35 @@ export default {
     ...mapActions(['resetSettings', 'saveSettings']),
     reset() {
       this.track('reset_form');
+      this.apiErrors = null;
       this.resetSettings();
     },
+    setApiErrors(response) {
+      const messages = get(response, 'data.message', []);
+
+      this.apiErrors = Object.keys(messages).reduce((acc, curr) => {
+        if (curr.startsWith('container_expiration_policy.')) {
+          const key = curr.replace('container_expiration_policy.', '');
+          acc[key] = get(messages, [curr, 0], '');
+        }
+        return acc;
+      }, {});
+    },
     submit() {
       this.track('submit_form');
+      this.apiErrors = null;
       this.saveSettings()
         .then(() => this.$toast.show(UPDATE_SETTINGS_SUCCESS_MESSAGE, { type: 'success' }))
-        .catch(() => this.$toast.show(UPDATE_SETTINGS_ERROR_MESSAGE, { type: 'error' }));
+        .catch(({ response }) => {
+          this.setApiErrors(response);
+          this.$toast.show(UPDATE_SETTINGS_ERROR_MESSAGE, { type: 'error' });
+        });
+    },
+    onModelChange(changePayload) {
+      this.settings = changePayload.newValue;
+      if (this.apiErrors) {
+        this.apiErrors[changePayload.modified] = undefined;
+      }
     },
   },
 };
@@ -60,23 +89,25 @@ export default {
   <form ref="form-element" @submit.prevent="submit" @reset.prevent="reset">
     <gl-card>
       <template #header>
-        {{ s__('ContainerRegistry|Tag expiration policy') }}
+        {{ $options.i18n.CLEANUP_POLICY_CARD_HEADER }}
       </template>
       <template #default>
         <expiration-policy-fields
-          v-model="settings"
+          :value="settings"
           :form-options="formOptions"
           :is-loading="isLoading"
-          @validated="formIsValid = true"
-          @invalidated="formIsValid = false"
+          :api-errors="apiErrors"
+          @validated="fieldsAreValid = true"
+          @invalidated="fieldsAreValid = false"
+          @input="onModelChange"
         />
       </template>
       <template #footer>
-        <div class="d-flex justify-content-end">
+        <div class="gl-display-flex gl-justify-content-end">
           <gl-deprecated-button
             ref="cancel-button"
             type="reset"
-            class="mr-2 d-block"
+            class="gl-mr-3 gl-display-block"
             :disabled="isCancelButtonDisabled"
           >
             {{ __('Cancel') }}
@@ -86,10 +117,10 @@ export default {
             type="submit"
             :disabled="isSubmitButtonDisabled"
             variant="success"
-            class="d-flex justify-content-center align-items-center js-no-auto-disable"
+            class="gl-display-flex gl-justify-content-center gl-align-items-center js-no-auto-disable"
           >
-            {{ __('Save expiration policy') }}
-            <gl-loading-icon v-if="isLoading" class="ml-2" />
+            {{ $options.i18n.SET_CLEANUP_POLICY_BUTTON }}
+            <gl-loading-icon v-if="isLoading" class="gl-ml-3" />
           </gl-deprecated-button>
         </div>
       </template>