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>