Pass autosaveKey from NoteableDiscussion to NoteForm

app/assets/javascripts/lib/utils/autosave.js

+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('/');

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"

changelogs/unreleased/winh-toggle-comment-draft.yml

+---
+title: Display draft when toggling replies
+merge_request: 25563
+author:
+type: fixed

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);