1 files changed, 22 insertions, 1 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index 86f5e98194d..e2d8825b2af 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -1,9 +1,12 @@
 <script>
+import $ from 'jquery';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import noteForm from '../../notes/components/note_form.vue';
 import { getNoteFormData } from '../store/utils';
+import Autosave from '../../autosave';
+import { DIFF_NOTE_TYPE, NOTE_TYPE } from '../constants';
 
 export default {
   components: {
@@ -37,11 +40,29 @@ export default {
       noteableData: state => state.notes.noteableData,
       diffViewType: state => state.diffs.diffViewType,
     }),
-    ...mapGetters(['noteableType', 'getNotesDataByProp']),
+    ...mapGetters(['isLoggedIn', 'noteableType', 'getNoteableData', 'getNotesDataByProp']),
+  },
+  mounted() {
+    if (this.isLoggedIn) {
+      const textarea = this.$el.querySelector('.js-note-text');
+      const noteableData = this.getNoteableData;
+      const keys = [
+        NOTE_TYPE,
+        this.noteableType,
+        noteableData.id,
+        noteableData.diff_head_sha,
+        DIFF_NOTE_TYPE,
+        noteableData.source_project_id,
+        this.line.lineCode,
+      ];
+
+      this.autosave = new Autosave($(textarea), keys);
+    }
   },
   methods: {
     ...mapActions(['cancelCommentForm', 'saveNote', 'fetchDiscussions']),
     handleCancelCommentForm() {
+      this.autosave.reset();
       this.cancelCommentForm({
         lineCode: this.line.lineCode,
       });