diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue')
-rw-r--r-- | app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue | 57 |
1 files changed, 44 insertions, 13 deletions
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue index 2e85ded8ade..ea7230ae488 100644 --- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue +++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue @@ -1,39 +1,63 @@ <script> import $ from 'jquery'; -import { __ } from '~/locale'; +import { GlLoadingIcon } from '@gitlab/ui'; +import { mapActions } from 'vuex'; +import { __, sprintf } from '../../../locale'; +import { deprecatedCreateFlash as Flash } from '~/flash'; import eventHub from '../../event_hub'; export default { + components: { + GlLoadingIcon, + }, + inject: ['fullPath'], props: { isLocked: { required: true, type: Boolean, }, - - updateLockedAttribute: { + issuableDisplayName: { required: true, - type: Function, + type: String, }, }, - + data() { + return { + isLoading: false, + }; + }, computed: { buttonText() { - return this.isLocked ? __('Unlock') : __('Lock'); - }, + if (this.isLoading) { + return __('Applying'); + } - toggleLock() { - return !this.isLocked; + return this.isLocked ? __('Unlock') : __('Lock'); }, }, - methods: { + ...mapActions(['updateLockedAttribute']), closeForm() { eventHub.$emit('closeLockForm'); $(this.$el).trigger('hidden.gl.dropdown'); }, submitForm() { - this.closeForm(); - this.updateLockedAttribute(this.toggleLock); + this.isLoading = true; + + this.updateLockedAttribute({ + locked: !this.isLocked, + fullPath: this.fullPath, + }) + .catch(() => { + const flashMessage = __( + 'Something went wrong trying to change the locked state of this %{issuableDisplayName}', + ); + Flash(sprintf(flashMessage, { issuableDisplayName: this.issuableDisplayName })); + }) + .finally(() => { + this.closeForm(); + this.isLoading = false; + }); }, }, }; @@ -45,7 +69,14 @@ export default { {{ __('Cancel') }} </button> - <button type="button" class="btn btn-close" @click.prevent="submitForm"> + <button + type="button" + data-testid="lock-toggle" + class="btn btn-close" + :disabled="isLoading" + @click.prevent="submitForm" + > + <gl-loading-icon v-if="isLoading" inline /> {{ buttonText }} </button> </div> |