1 files changed, 12 insertions, 1 deletions
diff --git a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue
index 699d1bebea1..5f1808ff4da 100644
--- a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective, GlOutsideDirective as Outside } from '@gitlab/ui';
 import { mapGetters, mapActions } from 'vuex';
 import { __, sprintf } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import createFlash from '~/flash';
 import eventHub from '~/sidebar/event_hub';
+import toast from '~/vue_shared/plugins/global_toast';
 import editForm from './edit_form.vue';
 
 export default {
@@ -27,6 +28,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    Outside,
   },
   mixins: [glFeatureFlagMixin()],
   inject: ['fullPath'],
@@ -84,6 +86,11 @@ export default {
         locked: !this.isLocked,
         fullPath: this.fullPath,
       })
+        .then(() => {
+          if (this.isMergeRequest) {
+            toast(this.isLocked ? __('Merge request locked.') : __('Merge request unlocked.'));
+          }
+        })
         .catch(() => {
           const flashMessage = __(
             'Something went wrong trying to change the locked state of this %{issuableDisplayName}',
@@ -96,6 +103,9 @@ export default {
           this.isLoading = false;
         });
     },
+    closeForm() {
+      this.isLockDialogOpen = false;
+    },
   },
 };
 </script>
@@ -142,6 +152,7 @@ export default {
     <div class="value sidebar-item-value hide-collapsed">
       <edit-form
         v-if="isLockDialogOpen"
+        v-outside="closeForm"
         data-testid="edit-form"
         :is-locked="isLocked"
         :issuable-display-name="issuableDisplayName"