From 799bc9b844fb3e3cd4909450b638545cf97dac0b Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Tue, 26 Feb 2019 13:39:59 +0100
Subject: [PATCH 1/6] Rename initialDiscussion to firstNote in
 NoteableDiscussion

(cherry picked from commit e9d1393e8d68134e51819c72524cc84265a0acf8)
---
 .../notes/components/noteable_discussion.vue       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 9b34c80c78bda9..e6abe233e49137 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -106,7 +106,7 @@ export default {
       'showJumpToNextDiscussion',
     ]),
     author() {
-      return this.initialDiscussion.author;
+      return this.firstNote.author;
     },
     canReply() {
       return this.getNoteableData.current_user.can_create_note;
@@ -117,7 +117,7 @@ export default {
     hasReplies() {
       return this.discussion.notes.length > 1;
     },
-    initialDiscussion() {
+    firstNote() {
       return this.discussion.notes.slice(0, 1)[0];
     },
     replies() {
@@ -247,7 +247,7 @@ export default {
       if (this.isReplying) {
         this.$nextTick(() => {
           // Pass an extra key to separate reply and note edit forms
-          this.initAutoSave({ ...this.initialDiscussion, ...this.discussion }, ['Reply']);
+          this.initAutoSave({ ...this.firstNote, ...this.discussion }, ['Reply']);
         });
       } else {
         this.disposeAutoSave();
@@ -390,8 +390,8 @@ Please check your network connection and try again.`;
           <div class="timeline-content">
             <note-header
               :author="author"
-              :created-at="initialDiscussion.created_at"
-              :note-id="initialDiscussion.id"
+              :created-at="firstNote.created_at"
+              :note-id="firstNote.id"
               :include-toggle="true"
               :expanded="discussion.expanded"
               @toggleHandler="toggleDiscussionHandler"
@@ -424,8 +424,8 @@ Please check your network connection and try again.`;
               <ul class="notes">
                 <template v-if="shouldGroupReplies">
                   <component
-                    :is="componentName(initialDiscussion)"
-                    :note="componentData(initialDiscussion)"
+                    :is="componentName(firstNote)"
+                    :note="componentData(firstNote)"
                     :line="line"
                     :commit="commit"
                     :help-page-path="helpPagePath"
-- 
GitLab


From 11b94a366e081b90c6ca742f683f7ae782f69835 Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Tue, 26 Feb 2019 15:02:17 +0100
Subject: [PATCH 2/6] Add autosave utilities

(cherry picked from commit c75da766ae53eea50682f64c7101f8b77fb31a1c)
---
 app/assets/javascripts/lib/utils/autosave.js | 27 +++++++++
 spec/frontend/lib/utils/autosave_spec.js     | 64 ++++++++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 app/assets/javascripts/lib/utils/autosave.js
 create mode 100644 spec/frontend/lib/utils/autosave_spec.js

diff --git a/app/assets/javascripts/lib/utils/autosave.js b/app/assets/javascripts/lib/utils/autosave.js
new file mode 100644
index 00000000000000..551035024a9b81
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/autosave.js
@@ -0,0 +1,27 @@
+export const clearDraft = autosaveKey => {
+  try {
+    window.localStorage.removeItem(`autosave/${autosaveKey}`);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+};
+
+export const getDraft = autosaveKey => {
+  try {
+    return window.localStorage.getItem(`autosave/${autosaveKey}`);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    return null;
+  }
+};
+
+export const updateDraft = (autosaveKey, text) => {
+  try {
+    window.localStorage.setItem(`autosave/${autosaveKey}`, text);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+};
diff --git a/spec/frontend/lib/utils/autosave_spec.js b/spec/frontend/lib/utils/autosave_spec.js
new file mode 100644
index 00000000000000..12e97f6cdec927
--- /dev/null
+++ b/spec/frontend/lib/utils/autosave_spec.js
@@ -0,0 +1,64 @@
+import { clearDraft, getDraft, updateDraft } from '~/lib/utils/autosave';
+
+describe('autosave utils', () => {
+  const autosaveKey = 'dummy-autosave-key';
+  const text = 'some dummy text';
+
+  describe('clearDraft', () => {
+    beforeEach(() => {
+      localStorage.setItem(`autosave/${autosaveKey}`, text);
+    });
+
+    afterEach(() => {
+      localStorage.removeItem(`autosave/${autosaveKey}`);
+    });
+
+    it('removes the draft from localStorage', () => {
+      clearDraft(autosaveKey);
+
+      expect(localStorage.getItem(`autosave/${autosaveKey}`)).toBe(null);
+    });
+  });
+
+  describe('getDraft', () => {
+    beforeEach(() => {
+      localStorage.setItem(`autosave/${autosaveKey}`, text);
+    });
+
+    afterEach(() => {
+      localStorage.removeItem(`autosave/${autosaveKey}`);
+    });
+
+    it('returns the draft from localStorage', () => {
+      const result = getDraft(autosaveKey);
+
+      expect(result).toBe(text);
+    });
+
+    it('returns null if no entry exists in localStorage', () => {
+      localStorage.removeItem(`autosave/${autosaveKey}`);
+
+      const result = getDraft(autosaveKey);
+
+      expect(result).toBe(null);
+    });
+  });
+
+  describe('updateDraft', () => {
+    beforeEach(() => {
+      localStorage.setItem(`autosave/${autosaveKey}`, text);
+    });
+
+    afterEach(() => {
+      localStorage.removeItem(`autosave/${autosaveKey}`);
+    });
+
+    it('removes the draft from localStorage', () => {
+      const newText = 'new text';
+
+      updateDraft(autosaveKey, newText);
+
+      expect(localStorage.getItem(`autosave/${autosaveKey}`)).toBe(newText);
+    });
+  });
+});
-- 
GitLab


From 44840a175b4576b57ee2877633390b493d4357b9 Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Tue, 26 Feb 2019 15:02:58 +0100
Subject: [PATCH 3/6] Use autosave utilities in NoteForm component

(cherry picked from commit 4e98b78672fdd90822dde1c4c3fd4765ef14b864)

Conflicts:
	app/assets/javascripts/notes/components/note_form.vue
---
 .../notes/components/note_form.vue            | 21 ++++-
 .../notes/components/note_form_spec.js        | 94 +++++++++++++++++--
 2 files changed, 106 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 750feb07564b80..e5db1648fa0268 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -7,6 +7,7 @@ import markdownField from '../../vue_shared/components/markdown/field.vue';
 import issuableStateMixin from '../mixins/issuable_state';
 import resolvable from '../mixins/resolvable';
 import { __ } from '~/locale';
+import { getDraft, updateDraft } from '~/lib/utils/autosave';
 import noteFormMixin from 'ee/batch_comments/mixins/note_form';
 
 export default {
@@ -66,10 +67,21 @@ export default {
       required: false,
       default: '',
     },
+    autosaveKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
+    let updatedNoteBody = this.noteBody;
+
+    if (!updatedNoteBody && this.autosaveKey) {
+      updatedNoteBody = getDraft(this.autosaveKey) || '';
+    }
+
     return {
-      updatedNoteBody: this.noteBody,
+      updatedNoteBody,
       conflictWhileEditing: false,
       isSubmitting: false,
       isResolving: this.resolveDiscussion,
@@ -186,6 +198,12 @@ export default {
       // Sends information about confirm message and if the textarea has changed
       this.$emit('cancelForm', shouldConfirm, this.noteBody !== this.updatedNoteBody);
     },
+    onInput() {
+      if (this.autosaveKey) {
+        const { autosaveKey, updatedNoteBody: text } = this;
+        updateDraft(autosaveKey, text);
+      }
+    },
   },
 };
 </script>
@@ -229,6 +247,7 @@ export default {
           @keydown.ctrl.enter="handleKeySubmit()"
           @keydown.up="editMyLastNote()"
           @keydown.esc="cancelHandler(true)"
+          @input="onInput"
         ></textarea>
       </markdown-field>
       <div class="note-form-actions clearfix">
diff --git a/spec/javascripts/notes/components/note_form_spec.js b/spec/javascripts/notes/components/note_form_spec.js
index 7cc324cfe44fe5..c48f81881055ff 100644
--- a/spec/javascripts/notes/components/note_form_spec.js
+++ b/spec/javascripts/notes/components/note_form_spec.js
@@ -5,11 +5,33 @@ import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { noteableDataMock, notesDataMock } from '../mock_data';
 
 describe('issue_note_form component', () => {
+  const dummyAutosaveKey = 'some-autosave-key';
+  const dummyDraft = 'dummy draft content';
+
   let store;
   let wrapper;
   let props;
 
+  const createComponentWrapper = () => {
+    const localVue = createLocalVue();
+    return shallowMount(NoteForm, {
+      store,
+      propsData: props,
+      // see https://gitlab.com/gitlab-org/gitlab-ce/issues/56317 for the following
+      localVue,
+      sync: false,
+    });
+  };
+
   beforeEach(() => {
+    spyOnDependency(NoteForm, 'getDraft').and.callFake(key => {
+      if (key === dummyAutosaveKey) {
+        return dummyDraft;
+      }
+
+      return null;
+    });
+
     store = createStore();
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
@@ -20,14 +42,7 @@ describe('issue_note_form component', () => {
       noteId: '545',
     };
 
-    const localVue = createLocalVue();
-    wrapper = shallowMount(NoteForm, {
-      store,
-      propsData: props,
-      // see https://gitlab.com/gitlab-org/gitlab-ce/issues/56317 for the following
-      localVue,
-      sync: false,
-    });
+    wrapper = createComponentWrapper();
   });
 
   afterEach(() => {
@@ -181,4 +196,67 @@ describe('issue_note_form component', () => {
       });
     });
   });
+
+  describe('with autosaveKey', () => {
+    beforeEach(() => {
+      wrapper.destroy();
+    });
+
+    describe('with draft', () => {
+      beforeEach(done => {
+        Object.assign(props, {
+          noteBody: '',
+          autosaveKey: dummyAutosaveKey,
+        });
+        wrapper = createComponentWrapper();
+
+        wrapper.vm
+          .$nextTick()
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('displays the draft in textarea', () => {
+        const textarea = wrapper.find('textarea');
+
+        expect(textarea.element.value).toBe(dummyDraft);
+      });
+    });
+
+    describe('without draft', () => {
+      beforeEach(done => {
+        Object.assign(props, {
+          noteBody: '',
+          autosaveKey: 'some key without draft',
+        });
+        wrapper = createComponentWrapper();
+
+        wrapper.vm
+          .$nextTick()
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('leaves the textarea empty', () => {
+        const textarea = wrapper.find('textarea');
+
+        expect(textarea.element.value).toBe('');
+      });
+    });
+
+    it('updates the draft if textarea content changes', () => {
+      const updateDraftSpy = spyOnDependency(NoteForm, 'updateDraft').and.stub();
+      Object.assign(props, {
+        noteBody: '',
+        autosaveKey: dummyAutosaveKey,
+      });
+      wrapper = createComponentWrapper();
+      const textarea = wrapper.find('textarea');
+      const dummyContent = 'some new content';
+
+      textarea.setValue(dummyContent);
+
+      expect(updateDraftSpy).toHaveBeenCalledWith(dummyAutosaveKey, dummyContent);
+    });
+  });
 });
-- 
GitLab


From 2b3b660dc281d92fcf00d41062125a06cb479c48 Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Tue, 26 Feb 2019 19:03:00 +0100
Subject: [PATCH 4/6] Validate NoteForm props in noteable_discussion_spec.js

(cherry picked from commit e8c0f2708226d5779fba470f0deaa8e5f3151583)
---
 .../notes/components/noteable_discussion_spec.js    | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js
index 2b93fb9fb45ca8..bd94dfb9285bee 100644
--- a/spec/javascripts/notes/components/noteable_discussion_spec.js
+++ b/spec/javascripts/notes/components/noteable_discussion_spec.js
@@ -3,6 +3,7 @@ import createStore from '~/notes/stores';
 import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
+import NoteForm from '~/notes/components/note_form.vue';
 import '~/behaviors/markdown/render_gfm';
 import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
 import mockDiffFile from '../../diffs/mock_data/diff_file';
@@ -72,7 +73,17 @@ describe('noteable_discussion component', () => {
         .then(() => wrapper.vm.$nextTick())
         .then(() => {
           expect(wrapper.vm.isReplying).toEqual(true);
-          expect(wrapper.vm.$refs.noteForm).not.toBeNull();
+
+          const noteForm = wrapper.find(NoteForm);
+
+          expect(noteForm.exists()).toBe(true);
+
+          const noteFormProps = noteForm.props();
+
+          expect(noteFormProps.discussion).toBe(discussionMock);
+          expect(noteFormProps.isEditing).toBe(false);
+          expect(noteFormProps.line).toBe(null);
+          expect(noteFormProps.saveButtonTitle).toBe('Comment');
         })
         .then(done)
         .catch(done.fail);
-- 
GitLab


From 2a44a1bba677284ae80f6e612b9237071811573e Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Mon, 4 Mar 2019 22:00:18 +0100
Subject: [PATCH 5/6] Pass autosaveKey from NoteableDiscussion to NoteForm

(cherry picked from commit a862585cd81bf6f6045b6cbac4ef8f0d368b72c6)
---
 app/assets/javascripts/lib/utils/autosave.js                 | 5 +++++
 .../javascripts/notes/components/noteable_discussion.vue     | 5 +++++
 changelogs/unreleased/winh-toggle-comment-draft.yml          | 5 +++++
 .../javascripts/notes/components/noteable_discussion_spec.js | 1 +
 4 files changed, 16 insertions(+)
 create mode 100644 changelogs/unreleased/winh-toggle-comment-draft.yml

diff --git a/app/assets/javascripts/lib/utils/autosave.js b/app/assets/javascripts/lib/utils/autosave.js
index 551035024a9b81..023c336db02f4d 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 e6abe233e49137..c4baec19f57d71 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;
     },
@@ -517,6 +521,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 00000000000000..6b4aad55a052c5
--- /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 bd94dfb9285bee..3304c79cdb7a2c 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);
-- 
GitLab


From c54fe028b8ec86ad5ebd44fd67ee9408fdf3c9d2 Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Mon, 4 Mar 2019 22:00:45 +0100
Subject: [PATCH 6/6] Remove autosave logic from NoteableDiscussion component

(cherry picked from commit 22f7f67e1fd46ea41a82f384abafc65bcc27b858)
---
 .../notes/components/noteable_discussion.vue  | 21 ++++---------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index c4baec19f57d71..7df08c850b4f26 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -4,7 +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 { clearDraft, 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';
@@ -22,7 +22,6 @@ import noteForm from './note_form.vue';
 import diffWithNote from './diff_with_note.vue';
 import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
 import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
-import autosave from '../mixins/autosave';
 import noteable from '../mixins/noteable';
 import resolvable from '../mixins/resolvable';
 import discussionNavigation from '../mixins/discussion_navigation';
@@ -55,7 +54,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [autosave, noteable, resolvable, discussionNavigation, diffLineNoteFormMixin],
+  mixins: [noteable, resolvable, discussionNavigation, diffLineNoteFormMixin],
   props: {
     discussion: {
       type: Object,
@@ -246,18 +245,6 @@ export default {
       return !this.discussionResolved && this.discussion.resolve_with_issue_path;
     },
   },
-  watch: {
-    isReplying() {
-      if (this.isReplying) {
-        this.$nextTick(() => {
-          // Pass an extra key to separate reply and note edit forms
-          this.initAutoSave({ ...this.firstNote, ...this.discussion }, ['Reply']);
-        });
-      } else {
-        this.disposeAutoSave();
-      }
-    },
-  },
   created() {
     eventHub.$on('startReplying', this.onStartReplying);
   },
@@ -316,7 +303,7 @@ export default {
       }
 
       this.isReplying = false;
-      this.resetAutoSave();
+      clearDraft(this.autosaveKey);
     },
     saveReply(noteText, form, callback) {
       const postData = {
@@ -342,7 +329,7 @@ export default {
       this.isReplying = false;
       this.saveNote(replyData)
         .then(() => {
-          this.resetAutoSave();
+          clearDraft(this.autosaveKey);
           callback();
         })
         .catch(err => {
-- 
GitLab