1 files changed, 59 insertions, 5 deletions

diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index 76ea489fb86..b37a911a669 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlAlert } from '@gitlab/ui';
 import $ from 'jquery';
 import Autosave from '~/autosave';
 import eventHub from '../event_hub';
@@ -15,6 +16,7 @@ export default {
     descriptionField,
     descriptionTemplate,
     editActions,
+    GlAlert,
   },
   props: {
     canDestroy: {
@@ -69,6 +71,16 @@ export default {
       required: false,
       default: true,
     },
+    initialDescriptionText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      showOutdatedDescriptionWarning: false,
+    };
   },
   computed: {
     hasIssuableTemplates() {
@@ -102,11 +114,17 @@ export default {
         },
       } = this.$refs;
 
-      this.autosaveDescription = new Autosave($(textarea), [
-        document.location.pathname,
-        document.location.search,
-        'description',
-      ]);
+      this.autosaveDescription = new Autosave(
+        $(textarea),
+        [document.location.pathname, document.location.search, 'description'],
+        null,
+        this.formState.lock_version,
+      );
+
+      const savedLockVersion = this.autosaveDescription.getSavedLockVersion();
+
+      this.showOutdatedDescriptionWarning =
+        savedLockVersion && String(this.formState.lock_version) !== savedLockVersion;
 
       this.autosaveTitle = new Autosave($(input), [
         document.location.pathname,
@@ -118,6 +136,27 @@ export default {
       this.autosaveDescription.reset();
       this.autosaveTitle.reset();
     },
+    keepAutosave() {
+      const {
+        description: {
+          $refs: { textarea },
+        },
+      } = this.$refs;
+
+      textarea.focus();
+      this.showOutdatedDescriptionWarning = false;
+    },
+    discardAutosave() {
+      const {
+        description: {
+          $refs: { textarea },
+        },
+      } = this.$refs;
+
+      textarea.value = this.initialDescriptionText;
+      textarea.focus();
+      this.showOutdatedDescriptionWarning = false;
+    },
   },
 };
 </script>
@@ -125,6 +164,21 @@ export default {
 <template>
   <form>
     <locked-warning v-if="showLockedWarning" />
+    <gl-alert
+      v-if="showOutdatedDescriptionWarning"
+      class="gl-mb-5"
+      variant="warning"
+      :primary-button-text="__('Keep')"
+      :secondary-button-text="__('Discard')"
+      :dismissible="false"
+      @primaryAction="keepAutosave"
+      @secondaryAction="discardAutosave"
+      >{{
+        __(
+          'The comment you are editing has been changed by another user. Would you like to keep your changes and overwrite the new description or discard your changes?',
+        )
+      }}</gl-alert
+    >
     <div class="row">
       <div v-if="hasIssuableTemplates" class="col-sm-4 col-lg-3">
         <description-template