Pass autosaveKey from NoteableDiscussion to NoteForm

4 files changed, 16 insertions, 0 deletions

diff --git a/app/assets/javascripts/lib/utils/autosave.js b/app/assets/javascripts/lib/utils/autosave.js
index 551035024a9..023c336db02 100644
--- a/app/assets/javascripts/lib/utils/autosave.js
+++ b/app/assets/javascripts/lib/utils/autosave.js
@@ -1,3 +1,5 @@
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+
 export const clearDraft = autosaveKey => {
   try {
     window.localStorage.removeItem(`autosave/${autosaveKey}`);
@@ -25,3 +27,6 @@ export const updateDraft = (autosaveKey, text) => {
     console.error(e);
   }
 };
+
+export const getDiscussionReplyKey = (noteableType, discussionId) =>
+  ['Note', capitalizeFirstCharacter(noteableType), discussionId, 'Reply'].join('/');
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index fd3cc859545..22103001e02 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -4,6 +4,7 @@ import { mapActions, mapGetters } from 'vuex';
 import { GlTooltipDirective } from '@gitlab/ui';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__, __, sprintf } from '~/locale';
+import { getDiscussionReplyKey } from '~/lib/utils/autosave';
 import systemNote from '~/vue_shared/components/notes/system_note.vue';
 import icon from '~/vue_shared/components/icon.vue';
 import diffLineNoteFormMixin from 'ee_else_ce/notes/mixins/diff_line_note_form';
@@ -108,6 +109,9 @@ export default {
     author() {
       return this.firstNote.author;
     },
+    autosaveKey() {
+      return getDiscussionReplyKey(this.firstNote.noteable_type, this.discussion.id);
+    },
     canReply() {
       return this.getNoteableData.current_user.can_create_note;
     },
@@ -512,6 +516,7 @@ Please check your network connection and try again.`;
                   :is-editing="false"
                   :line="diffLine"
                   save-button-title="Comment"
+                  :autosave-key="autosaveKey"
                   @handleFormUpdateAddToReview="addReplyToReview"
                   @handleFormUpdate="saveReply"
                   @cancelForm="cancelReplyForm"
diff --git a/changelogs/unreleased/winh-toggle-comment-draft.yml b/changelogs/unreleased/winh-toggle-comment-draft.yml
new file mode 100644
index 00000000000..6b4aad55a05
--- /dev/null
+++ b/changelogs/unreleased/winh-toggle-comment-draft.yml
@@ -0,0 +1,5 @@
+---
+title: Display draft when toggling replies
+merge_request: 25563
+author:
+type: fixed
diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js
index bd94dfb9285..3304c79cdb7 100644
--- a/spec/javascripts/notes/components/noteable_discussion_spec.js
+++ b/spec/javascripts/notes/components/noteable_discussion_spec.js
@@ -84,6 +84,7 @@ describe('noteable_discussion component', () => {
           expect(noteFormProps.isEditing).toBe(false);
           expect(noteFormProps.line).toBe(null);
           expect(noteFormProps.saveButtonTitle).toBe('Comment');
+          expect(noteFormProps.autosaveKey).toBe(`Note/Issue/${discussionMock.id}/Reply`);
         })
         .then(done)
         .catch(done.fail);