Add latest changes from gitlab-org/gitlab@master

1 files changed, 51 insertions, 10 deletions

diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index ad2fdb4fd40..cab3c7fff85 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -1,16 +1,20 @@
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { GlCard, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import {
   UPDATE_SETTINGS_ERROR_MESSAGE,
   UPDATE_SETTINGS_SUCCESS_MESSAGE,
 } from '../../shared/constants';
 import { mapComputed } from '~/vuex_shared/bindings';
-import ExpirationPolicyForm from '../../shared/components/expiration_policy_form.vue';
+import ExpirationPolicyFields from '../../shared/components/expiration_policy_fields.vue';
 
 export default {
   components: {
-    ExpirationPolicyForm,
+    GlCard,
+    GlButton,
+    GlLoadingIcon,
+    ExpirationPolicyFields,
   },
   mixins: [Tracking.mixin()],
   labelsConfig: {
@@ -22,12 +26,19 @@ export default {
       tracking: {
         label: 'docker_container_retention_and_expiration_policies',
       },
+      formIsValid: true,
     };
   },
   computed: {
     ...mapState(['formOptions', 'isLoading']),
     ...mapGetters({ isEdited: 'getIsEdited' }),
     ...mapComputed([{ key: 'settings', getter: 'getSettings' }], 'updateSettings'),
+    isSubmitButtonDisabled() {
+      return !this.formIsValid || this.isLoading;
+    },
+    isCancelButtonDisabled() {
+      return !this.isEdited || this.isLoading;
+    },
   },
   methods: {
     ...mapActions(['resetSettings', 'saveSettings']),
@@ -46,12 +57,42 @@ export default {
 </script>
 
 <template>
-  <expiration-policy-form
-    v-model="settings"
-    :form-options="formOptions"
-    :is-loading="isLoading"
-    :disable-cancel-button="!isEdited"
-    @submit="submit"
-    @reset="reset"
-  />
+  <form ref="form-element" @submit.prevent="submit" @reset.prevent="reset">
+    <gl-card>
+      <template #header>
+        {{ s__('ContainerRegistry|Tag expiration policy') }}
+      </template>
+      <template #default>
+        <expiration-policy-fields
+          v-model="settings"
+          :form-options="formOptions"
+          :is-loading="isLoading"
+          @validated="formIsValid = true"
+          @invalidated="formIsValid = false"
+        />
+      </template>
+      <template #footer>
+        <div class="d-flex justify-content-end">
+          <gl-button
+            ref="cancel-button"
+            type="reset"
+            class="mr-2 d-block"
+            :disabled="isCancelButtonDisabled"
+          >
+            {{ __('Cancel') }}
+          </gl-button>
+          <gl-button
+            ref="save-button"
+            type="submit"
+            :disabled="isSubmitButtonDisabled"
+            variant="success"
+            class="d-flex justify-content-center align-items-center js-no-auto-disable"
+          >
+            {{ __('Save expiration policy') }}
+            <gl-loading-icon v-if="isLoading" class="ml-2" />
+          </gl-button>
+        </div>
+      </template>
+    </gl-card>
+  </form>
 </template>