1 files changed, 24 insertions, 38 deletions

diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index fc51998935d..a3d664a738f 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 { 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';
@@ -21,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';
@@ -54,7 +54,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [autosave, noteable, resolvable, discussionNavigation, diffLineNoteFormMixin],
+  mixins: [noteable, resolvable, discussionNavigation, diffLineNoteFormMixin],
   props: {
     discussion: {
       type: Object,
@@ -87,13 +87,10 @@ export default {
     },
   },
   data() {
-    const { diff_discussion: isDiffDiscussion, resolved } = this.discussion;
-
     return {
       isReplying: false,
       isResolving: false,
       resolveAsThread: true,
-      isRepliesCollapsed: Boolean(!isDiffDiscussion && resolved),
     };
   },
   computed: {
@@ -106,7 +103,10 @@ export default {
       'showJumpToNextDiscussion',
     ]),
     author() {
-      return this.initialDiscussion.author;
+      return this.firstNote.author;
+    },
+    autosaveKey() {
+      return getDiscussionReplyKey(this.firstNote.noteable_type, this.discussion.id);
     },
     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() {
@@ -175,11 +175,11 @@ export default {
 
       return '';
     },
-    shouldShowDiscussions() {
-      const { expanded, resolved } = this.discussion;
-      const isResolvedNonDiffDiscussion = !this.discussion.diff_discussion && resolved;
-
-      return expanded || this.alwaysExpanded || isResolvedNonDiffDiscussion;
+    isExpanded() {
+      return this.discussion.expanded || this.alwaysExpanded;
+    },
+    shouldHideDiscussionBody() {
+      return this.shouldRenderDiffs && !this.isExpanded;
     },
     actionText() {
       const linkStart = `<a href="${_.escape(this.discussion.discussion_path)}">`;
@@ -242,18 +242,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.initialDiscussion, ...this.discussion }, ['Reply']);
-        });
-      } else {
-        this.disposeAutoSave();
-      }
-    },
-  },
   created() {
     eventHub.$on('startReplying', this.onStartReplying);
   },
@@ -291,9 +279,6 @@ export default {
     toggleDiscussionHandler() {
       this.toggleDiscussion({ discussionId: this.discussion.id });
     },
-    toggleReplies() {
-      this.isRepliesCollapsed = !this.isRepliesCollapsed;
-    },
     showReplyForm() {
       this.isReplying = true;
     },
@@ -312,7 +297,7 @@ export default {
       }
 
       this.isReplying = false;
-      this.resetAutoSave();
+      clearDraft(this.autosaveKey);
     },
     saveReply(noteText, form, callback) {
       const postData = {
@@ -338,7 +323,7 @@ export default {
       this.isReplying = false;
       this.saveNote(replyData)
         .then(() => {
-          this.resetAutoSave();
+          clearDraft(this.autosaveKey);
           callback();
         })
         .catch(err => {
@@ -390,8 +375,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"
@@ -414,7 +399,7 @@ Please check your network connection and try again.`;
             />
           </div>
         </div>
-        <div v-if="shouldShowDiscussions" class="discussion-body">
+        <div v-if="!shouldHideDiscussionBody" class="discussion-body">
           <component
             :is="wrapperComponent"
             v-bind="wrapperComponentProps"
@@ -424,8 +409,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"
@@ -445,11 +430,11 @@ Please check your network connection and try again.`;
                   </component>
                   <toggle-replies-widget
                     v-if="hasReplies"
-                    :collapsed="isRepliesCollapsed"
+                    :collapsed="!isExpanded"
                     :replies="replies"
-                    @toggle="toggleReplies"
+                    @toggle="toggleDiscussionHandler"
                   />
-                  <template v-if="!isRepliesCollapsed">
+                  <template v-if="isExpanded">
                     <component
                       :is="componentName(note)"
                       v-for="note in replies"
@@ -476,7 +461,7 @@ Please check your network connection and try again.`;
                 </template>
               </ul>
               <div
-                v-if="!isRepliesCollapsed || !hasReplies"
+                v-if="isExpanded || !hasReplies"
                 :class="{ 'is-replying': isReplying }"
                 class="discussion-reply-holder"
               >
@@ -512,6 +497,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"