Implement MR diff notes autosave feature.acet-mr-diffs-autosave

3 files changed, 41 insertions, 2 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,
       });
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index 1a7478b307e..d314f08e60e 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -7,6 +7,7 @@ export const CONTEXT_LINE_TYPE = 'context';
 export const EMPTY_CELL_TYPE = 'empty-cell';
 export const COMMENT_FORM_TYPE = 'commentForm';
 export const DIFF_NOTE_TYPE = 'DiffNote';
+export const NOTE_TYPE = 'Note';
 export const NEW_LINE_TYPE = 'new';
 export const OLD_LINE_TYPE = 'old';
 export const TEXT_DIFF_POSITION_TYPE = 'text';
diff --git a/spec/javascripts/diffs/components/diff_line_note_form_spec.js b/spec/javascripts/diffs/components/diff_line_note_form_spec.js
index 724d1948214..81cd4f9769a 100644
--- a/spec/javascripts/diffs/components/diff_line_note_form_spec.js
+++ b/spec/javascripts/diffs/components/diff_line_note_form_spec.js
@@ -19,7 +19,15 @@ describe('DiffLineNoteForm', () => {
       diffLines,
       line: diffLines[0],
       noteTargetLine: diffLines[0],
-    }).$mount();
+    });
+
+    Object.defineProperty(component, 'isLoggedIn', {
+      get() {
+        return true;
+      },
+    });
+
+    component.$mount();
   });
 
   describe('methods', () => {
@@ -56,6 +64,15 @@ describe('DiffLineNoteForm', () => {
     });
   });
 
+  describe('mounted', () => {
+    it('should init autosave', () => {
+      const key = 'autosave/Note/issue///DiffNote//1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1';
+
+      expect(component.autosave).toBeDefined();
+      expect(component.autosave.key).toEqual(key);
+    });
+  });
+
   describe('template', () => {
     it('should have note form', () => {
       const { $el } = component;