Handle autosave reset when form is submitted

app/assets/javascripts/notes/components/issue_discussion.vue

@@ -11,7 +11,7 @@
   import issueNoteForm from './issue_note_form.vue';
   import placeholderNote from './issue_placeholder_note.vue';
   import placeholderSystemNote from './issue_placeholder_system_note.vue';
-  import '../../autosave';
+  import autosave from '../mixins/autosave';;
 
   export default {
     props: {
@@ -36,6 +36,9 @@
       placeholderNote,
       placeholderSystemNote,
     },
+    mixins: [
+      autosave,
+    ],
     computed: {
       ...mapGetters([
         'getIssueData',
@@ -85,6 +88,7 @@
           }
         }
 
+        this.resetAutoSave();
         this.isReplying = false;
       },
       saveReply(noteText) {
@@ -103,12 +107,10 @@
         this.saveNote(replyData)
           .then(() => {
             this.isReplying = false;
+            this.resetAutoSave();
           })
           .catch(() => Flash('Something went wrong while adding your reply. Please try again.'));
       },
-      initAutoSave() {
-        return new Autosave($(this.$refs.noteForm.$refs.textarea), ['Note', 'Issue', this.note.id]);
-      },
     },
     mounted() {
       if (this.isReplying) {
@@ -117,7 +119,11 @@
     },
     updated() {
       if (this.isReplying) {
-        this.initAutoSave();
+        if (!this.autosave) {
+          this.initAutoSave();
+        } else {
+          this.setAutoSave();
+        }
       }
     },
   };

app/assets/javascripts/notes/components/issue_note.vue

@@ -90,6 +90,7 @@
             this.isEditing = false;
             // TODO: this could be moved down, by setting a prop
             $(this.$refs.noteBody.$el).renderGFM();
+            this.$refs.noteBody.resetAutoSave();
           })
           .catch(() => Flash(
             'Something went wrong while editing your comment. Please try again.',
@@ -102,7 +103,7 @@
           // eslint-disable-next-line no-alert
           if (!confirm('Are you sure you want to cancel editing this comment?')) return;
         }
-
+        this.$refs.noteBody.resetAutoSave();
         this.isEditing = false;
       },
     },

app/assets/javascripts/notes/components/issue_note_body.vue

@@ -4,7 +4,7 @@
   import issueNoteAwardsList from './issue_note_awards_list.vue';
   import issueNoteForm from './issue_note_form.vue';
   import TaskList from '../../task_list';
-  import '../../autosave';
+  import autosave from '../mixins/autosave';
 
   export default {
     props: {
@@ -22,6 +22,9 @@
         default: false,
       },
     },
+    mixins: [
+      autosave,
+    ],
     components: {
       issueNoteEditedText,
       issueNoteAwardsList,
@@ -51,9 +54,6 @@
       formCancelHandler(shouldConfirm, isDirty) {
         this.$emit('cancelFormEdition', shouldConfirm, isDirty);
       },
-      initAutoSave() {
-        return new Autosave($(this.$refs.noteForm.$refs.textarea), ['Note', 'Issue', this.note.id]);
-      },
     },
     mounted() {
       this.renderGFM();
@@ -65,7 +65,11 @@
     updated() {
       this.initTaskList();
       if (this.isEditing) {
-        this.initAutoSave();
+        if (!this.autosave) {
+          this.initAutoSave();
+        } else {
+          this.setAutoSave();
+        }
       }
     },
   };

app/assets/javascripts/notes/mixins/autosave.js

+/* globals Autosave */
+import '../../autosave';
+
+export default {
+  methods: {
+    initAutoSave() {
+      this.autosave = new Autosave($(this.$refs.noteForm.$refs.textarea), ['Note', 'Issue', this.note.id]);
+    },
+    resetAutoSave() {
+      this.autosave.reset();
+    },
+    setAutoSave() {
+      this.autosave.save();
+    },
+  },
+};