Keep the replies when the user leaves the page

6 files changed, 44 insertions, 20 deletions

diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index cfab6c40b34..6000c56665b 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -2,6 +2,11 @@
 import AccessorUtilities from './lib/utils/accessor';
 
 window.Autosave = (function() {
+  /**
+   *
+   * @param {*} field the textarea
+   * @param {Array} key Array with: ['Note', type, id, ]
+   */
   function Autosave(field, key) {
     this.field = field;
     this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index b7b7140d772..2ef2af5bbac 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -1,5 +1,5 @@
 <script>
-  /* global Flash */
+  /* global Flash, Autosave */
 
   import { mapActions, mapGetters } from 'vuex';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -7,6 +7,7 @@
   import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
   import eventHub from '../event_hub';
   import * as constants from '../constants';
+  import '../../autosave';
 
   export default {
     data() {
@@ -153,15 +154,17 @@
           }
         }
       },
+      initAutoSave() {
+        return new Autosave($(this.$refs.textarea), ['Note', 'Issue', this.getIssueData.id]);
+      },
     },
     mounted() {
-      eventHub.$on('issueStateChanged', (isClosed) => {
+      // jQuery is needed here because it is a custom event being dispatched with jQuery.
+      $(document).on('issuable:change', (e, isClosed) => {
         this.issueState = isClosed ? constants.CLOSED : constants.REOPENED;
       });
-    },
 
-    destroyed() {
-      eventHub.$off('issueStateChanged');
+      this.initAutoSave();
     },
   };
 </script>
diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index d4754178933..7952dfacc13 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -1,5 +1,5 @@
 <script>
-  /* global Flash */
+  /* global Flash, Autosave */
   import { mapActions, mapGetters } from 'vuex';
   import { SYSTEM_NOTE } from '../constants';
   import issueNote from './issue_note.vue';
@@ -11,6 +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';
 
   export default {
     props: {
@@ -107,6 +108,19 @@
           })
           .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) {
+        this.initAutoSave();
+      }
+    },
+    updated() {
+      if (this.isReplying) {
+        this.initAutoSave();
+      }
     },
   };
 </script>
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 05bf1d2bca0..a41d646c033 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -39,7 +39,6 @@
         return {
           'is-editing': this.isEditing,
           'disabled-content': this.isDeleting,
-          //'js-my-note': this.author.id === this.currentUserId,
           target: this.targetNoteHash === this.noteAnchorId,
         };
       },
diff --git a/app/assets/javascripts/notes/components/issue_note_body.vue b/app/assets/javascripts/notes/components/issue_note_body.vue
index 29ac6859840..61990340391 100644
--- a/app/assets/javascripts/notes/components/issue_note_body.vue
+++ b/app/assets/javascripts/notes/components/issue_note_body.vue
@@ -1,8 +1,10 @@
 <script>
+  /* global Autosave */
   import issueNoteEditedText from './issue_note_edited_text.vue';
   import issueNoteAwardsList from './issue_note_awards_list.vue';
   import issueNoteForm from './issue_note_form.vue';
   import TaskList from '../../task_list';
+  import '../../autosave';
 
   export default {
     props: {
@@ -49,13 +51,22 @@
       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();
       this.initTaskList();
+      if (this.isEditing) {
+        this.initAutoSave();
+      }
     },
     updated() {
       this.initTaskList();
+      if (this.isEditing) {
+        this.initAutoSave();
+      }
     },
   };
 </script>
diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue
index 14b7afe1287..4c0351f701b 100644
--- a/app/assets/javascripts/notes/components/issue_notes_app.vue
+++ b/app/assets/javascripts/notes/components/issue_notes_app.vue
@@ -4,7 +4,6 @@
   import { mapGetters, mapActions } from 'vuex';
   import store from '../stores/';
   import * as constants from '../constants';
-  import eventHub from '../event_hub';
   import issueNote from './issue_note.vue';
   import issueDiscussion from './issue_discussion.vue';
   import issueSystemNote from './issue_system_note.vue';
@@ -96,17 +95,6 @@
 
         this.poll();
       },
-      bindEventHubListeners() {
-        this.$el.parentElement.addEventListener('toggleAward', (event) => {
-          const { awardName, noteId } = event.detail;
-          this.actionToggleAward({ awardName, noteId });
-        });
-
-        // JQuery is needed here because it is a custom event being dispatched with jQuery.
-        $(document).on('issuable:change', (e, isClosed) => {
-          eventHub.$emit('issueStateChanged', isClosed);
-        });
-      },
       checkLocationHash() {
         const hash = gl.utils.getLocationHash();
         const $el = $(`#${hash}`);
@@ -125,7 +113,11 @@
     mounted() {
       this.fetchNotes();
       this.initPolling();
-      this.bindEventHubListeners();
+
+      this.$el.parentElement.addEventListener('toggleAward', (event) => {
+        const { awardName, noteId } = event.detail;
+        this.actionToggleAward({ awardName, noteId });
+      });
     },
   };
 </script>