Add latest changes from gitlab-org/gitlab@master

4 files changed, 63 insertions, 39 deletions

diff --git a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
index ca495cd2eca..7530c1dfcaf 100644
--- a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
+++ b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
@@ -1,20 +1,17 @@
 <script>
-import { mapState, mapActions } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { mapActions } from 'vuex';
+import { FETCH_SETTINGS_ERROR_MESSAGE } from '../constants';
+
 import SettingsForm from './settings_form.vue';
 
 export default {
   components: {
-    GlLoadingIcon,
     SettingsForm,
   },
-  computed: {
-    ...mapState({
-      isLoading: 'isLoading',
-    }),
-  },
   mounted() {
-    this.fetchSettings();
+    this.fetchSettings().catch(() =>
+      this.$toast.show(FETCH_SETTINGS_ERROR_MESSAGE, { type: 'error' }),
+    );
   },
   methods: {
     ...mapActions(['fetchSettings']),
@@ -37,7 +34,6 @@ export default {
         }}
       </li>
     </ul>
-    <gl-loading-icon v-if="isLoading" ref="loading-icon" size="xl" />
-    <settings-form v-else ref="settings-form" />
+    <settings-form ref="settings-form" />
   </div>
 </template>
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index 457bf35daab..b713cfe2e34 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -1,8 +1,20 @@
 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea, GlButton, GlCard } from '@gitlab/ui';
+import {
+  GlFormGroup,
+  GlToggle,
+  GlFormSelect,
+  GlFormTextarea,
+  GlButton,
+  GlCard,
+  GlLoadingIcon,
+} from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
-import { NAME_REGEX_LENGTH } from '../constants';
+import {
+  NAME_REGEX_LENGTH,
+  UPDATE_SETTINGS_ERROR_MESSAGE,
+  UPDATE_SETTINGS_SUCCESS_MESSAGE,
+} from '../constants';
 import { mapComputed } from '~/vuex_shared/bindings';
 
 export default {
@@ -13,13 +25,14 @@ export default {
     GlFormTextarea,
     GlButton,
     GlCard,
+    GlLoadingIcon,
   },
   labelsConfig: {
     cols: 3,
     align: 'right',
   },
   computed: {
-    ...mapState(['formOptions']),
+    ...mapState(['formOptions', 'isLoading']),
     ...mapComputed(
       [
         'enabled',
@@ -64,15 +77,26 @@ export default {
     formIsInvalid() {
       return this.nameRegexState === false;
     },
+    isFormElementDisabled() {
+      return !this.enabled || this.isLoading;
+    },
+    isSubmitButtonDisabled() {
+      return this.formIsInvalid || this.isLoading;
+    },
   },
   methods: {
     ...mapActions(['resetSettings', 'saveSettings']),
+    submit() {
+      this.saveSettings()
+        .then(() => this.$toast.show(UPDATE_SETTINGS_SUCCESS_MESSAGE, { type: 'success' }))
+        .catch(() => this.$toast.show(UPDATE_SETTINGS_ERROR_MESSAGE, { type: 'error' }));
+    },
   },
 };
 </script>
 
 <template>
-  <form ref="form-element" @submit.prevent="saveSettings" @reset.prevent="resetSettings">
+  <form ref="form-element" @submit.prevent="submit" @reset.prevent="resetSettings">
     <gl-card>
       <template #header>
         {{ s__('ContainerRegistry|Tag expiration policy') }}
@@ -86,7 +110,7 @@ export default {
           :label="s__('ContainerRegistry|Expiration policy:')"
         >
           <div class="d-flex align-items-start">
-            <gl-toggle id="expiration-policy-toggle" v-model="enabled" />
+            <gl-toggle id="expiration-policy-toggle" v-model="enabled" :disabled="isLoading" />
             <span class="mb-2 ml-1 lh-2" v-html="toggleDescriptionText"></span>
           </div>
         </gl-form-group>
@@ -98,7 +122,11 @@ export default {
           label-for="expiration-policy-interval"
           :label="s__('ContainerRegistry|Expiration interval:')"
         >
-          <gl-form-select id="expiration-policy-interval" v-model="older_than" :disabled="!enabled">
+          <gl-form-select
+            id="expiration-policy-interval"
+            v-model="older_than"
+            :disabled="isFormElementDisabled"
+          >
             <option v-for="option in formOptions.olderThan" :key="option.key" :value="option.key">
               {{ option.label }}
             </option>
@@ -112,7 +140,11 @@ export default {
           label-for="expiration-policy-schedule"
           :label="s__('ContainerRegistry|Expiration schedule:')"
         >
-          <gl-form-select id="expiration-policy-schedule" v-model="cadence" :disabled="!enabled">
+          <gl-form-select
+            id="expiration-policy-schedule"
+            v-model="cadence"
+            :disabled="isFormElementDisabled"
+          >
             <option v-for="option in formOptions.cadence" :key="option.key" :value="option.key">
               {{ option.label }}
             </option>
@@ -126,7 +158,11 @@ export default {
           label-for="expiration-policy-latest"
           :label="s__('ContainerRegistry|Number of tags to retain:')"
         >
-          <gl-form-select id="expiration-policy-latest" v-model="keep_n" :disabled="!enabled">
+          <gl-form-select
+            id="expiration-policy-latest"
+            v-model="keep_n"
+            :disabled="isFormElementDisabled"
+          >
             <option v-for="option in formOptions.keepN" :key="option.key" :value="option.key">
               {{ option.label }}
             </option>
@@ -149,7 +185,7 @@ export default {
             v-model="name_regex"
             :placeholder="nameRegexPlaceholder"
             :state="nameRegexState"
-            :disabled="!enabled"
+            :disabled="isFormElementDisabled"
             trim
           />
           <template #description>
@@ -159,17 +195,18 @@ export default {
       </template>
       <template #footer>
         <div class="d-flex justify-content-end">
-          <gl-button ref="cancel-button" type="reset" class="mr-2 d-block">{{
-            __('Cancel')
-          }}</gl-button>
+          <gl-button ref="cancel-button" type="reset" class="mr-2 d-block" :disabled="isLoading">
+            {{ __('Cancel') }}
+          </gl-button>
           <gl-button
             ref="save-button"
             type="submit"
-            :disabled="formIsInvalid"
+            :disabled="isSubmitButtonDisabled"
             variant="success"
-            class="d-block"
+            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>
diff --git a/app/assets/javascripts/registry/settings/registry_settings_bundle.js b/app/assets/javascripts/registry/settings/registry_settings_bundle.js
index 927b6059884..6ae1dbb72c4 100644
--- a/app/assets/javascripts/registry/settings/registry_settings_bundle.js
+++ b/app/assets/javascripts/registry/settings/registry_settings_bundle.js
@@ -1,8 +1,10 @@
 import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
 import Translate from '~/vue_shared/translate';
 import store from './store/';
 import RegistrySettingsApp from './components/registry_settings_app.vue';
 
+Vue.use(GlToast);
 Vue.use(Translate);
 
 export default () => {
diff --git a/app/assets/javascripts/registry/settings/store/actions.js b/app/assets/javascripts/registry/settings/store/actions.js
index 5e46d564121..21a2008fef6 100644
--- a/app/assets/javascripts/registry/settings/store/actions.js
+++ b/app/assets/javascripts/registry/settings/store/actions.js
@@ -1,18 +1,10 @@
 import Api from '~/api';
-import createFlash from '~/flash';
-import {
-  FETCH_SETTINGS_ERROR_MESSAGE,
-  UPDATE_SETTINGS_ERROR_MESSAGE,
-  UPDATE_SETTINGS_SUCCESS_MESSAGE,
-} from '../constants';
 import * as types from './mutation_types';
 
 export const setInitialState = ({ commit }, data) => commit(types.SET_INITIAL_STATE, data);
 export const updateSettings = ({ commit }, data) => commit(types.UPDATE_SETTINGS, data);
 export const toggleLoading = ({ commit }) => commit(types.TOGGLE_LOADING);
 export const receiveSettingsSuccess = ({ commit }, data = {}) => commit(types.SET_SETTINGS, data);
-export const receiveSettingsError = () => createFlash(FETCH_SETTINGS_ERROR_MESSAGE);
-export const updateSettingsError = () => createFlash(UPDATE_SETTINGS_ERROR_MESSAGE);
 export const resetSettings = ({ commit }) => commit(types.RESET_SETTINGS);
 
 export const fetchSettings = ({ dispatch, state }) => {
@@ -21,7 +13,6 @@ export const fetchSettings = ({ dispatch, state }) => {
     .then(({ data: { container_expiration_policy } }) =>
       dispatch('receiveSettingsSuccess', container_expiration_policy),
     )
-    .catch(() => dispatch('receiveSettingsError'))
     .finally(() => dispatch('toggleLoading'));
 };
 
@@ -30,11 +21,9 @@ export const saveSettings = ({ dispatch, state }) => {
   return Api.updateProject(state.projectId, {
     container_expiration_policy_attributes: state.settings,
   })
-    .then(({ data: { container_expiration_policy } }) => {
-      dispatch('receiveSettingsSuccess', container_expiration_policy);
-      createFlash(UPDATE_SETTINGS_SUCCESS_MESSAGE, 'success');
-    })
-    .catch(() => dispatch('updateSettingsError'))
+    .then(({ data: { container_expiration_policy } }) =>
+      dispatch('receiveSettingsSuccess', container_expiration_policy),
+    )
     .finally(() => dispatch('toggleLoading'));
 };