Allow commenting to resolved non-diff discussions_acet-fix-unable-to-reply-resolved-nondiff-discussion

3 files changed, 56 insertions, 3 deletions

diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index f6842fa240e..29740ddf6ae 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -68,7 +68,7 @@ export default {
       isReplying: false,
       isResolving: false,
       resolveAsThread: true,
-      isRepliesCollapsed: (!this.discussion.diff_discussion && this.discussion.resolved) || false,
+      isRepliesToggledByUser: false,
     };
   },
   computed: {
@@ -189,6 +189,15 @@ export default {
 
       return isExpanded || this.alwaysExpanded || isResolvedNonDiffDiscussion;
     },
+    isRepliesCollapsed() {
+      const { discussion, isRepliesToggledByUser } = this;
+      const { resolved, notes } = discussion;
+      const hasReplies = notes.length > 1;
+
+      return (
+        (!discussion.diff_discussion && resolved && hasReplies && !isRepliesToggledByUser) || false
+      );
+    },
   },
   watch: {
     isReplying() {
@@ -233,7 +242,7 @@ export default {
       this.toggleDiscussion({ discussionId: this.discussion.id });
     },
     toggleReplies() {
-      this.isRepliesCollapsed = !this.isRepliesCollapsed;
+      this.isRepliesToggledByUser = !this.isRepliesToggledByUser;
     },
     showReplyForm() {
       this.isReplying = true;
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
index e9d05c5cdcd..72a8ff28466 100644
--- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -42,7 +42,7 @@ export default {
 </script>
 
 <template>
-  <li :class="className" class="replies-toggle">
+  <li :class="className" class="replies-toggle js-toggle-replies">
     <template v-if="collapsed">
       <icon name="chevron-right" @click.native="toggle" />
       <div>
diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js
index 81cb3e1f74d..4b4403689d9 100644
--- a/spec/javascripts/notes/components/noteable_discussion_spec.js
+++ b/spec/javascripts/notes/components/noteable_discussion_spec.js
@@ -6,6 +6,7 @@ import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
 import mockDiffFile from '../../diffs/mock_data/diff_file';
 
 const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
+const diffDiscussionFixture = 'merge_requests/diff_discussion.json';
 
 describe('noteable_discussion component', () => {
   const Component = Vue.extend(noteableDiscussion);
@@ -115,6 +116,49 @@ describe('noteable_discussion component', () => {
           .catch(done.fail);
       });
     });
+
+    describe('isRepliesCollapsed', () => {
+      it('should return false for diff discussions', done => {
+        const diffDiscussion = getJSONFixture(diffDiscussionFixture)[0];
+        vm.$store.dispatch('setInitialNotes', [diffDiscussion]);
+
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.isRepliesCollapsed).toEqual(false);
+            expect(vm.$el.querySelector('.js-toggle-replies')).not.toBeNull();
+            expect(vm.$el.querySelector('.discussion-reply-holder')).not.toBeNull();
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('should return false if discussion does not have a reply', () => {
+        const discussion = { ...discussionMock, resolved: true };
+        discussion.notes = discussion.notes.slice(0, 1);
+        const noRepliesVm = new Component({
+          store,
+          propsData: { discussion },
+        }).$mount();
+
+        expect(noRepliesVm.isRepliesCollapsed).toEqual(false);
+        expect(noRepliesVm.$el.querySelector('.js-toggle-replies')).toBeNull();
+        expect(vm.$el.querySelector('.discussion-reply-holder')).not.toBeNull();
+        noRepliesVm.$destroy();
+      });
+
+      it('should return true for resolved non-diff discussion which has replies', () => {
+        const discussion = { ...discussionMock, resolved: true };
+        const resolvedDiscussionVm = new Component({
+          store,
+          propsData: { discussion },
+        }).$mount();
+
+        expect(resolvedDiscussionVm.isRepliesCollapsed).toEqual(true);
+        expect(resolvedDiscussionVm.$el.querySelector('.js-toggle-replies')).not.toBeNull();
+        expect(vm.$el.querySelector('.discussion-reply-holder')).not.toBeNull();
+        resolvedDiscussionVm.$destroy();
+      });
+    });
   });
 
   describe('methods', () => {