Fixed multiple diff line discussions not expanding

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/53600

5 files changed, 51 insertions, 2 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
index b969017a2bb..c850e0ac84f 100644
--- a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
+++ b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
@@ -56,9 +56,12 @@ export default {
       return `${noteData.author.name}: ${note}`;
     },
     toggleDiscussions() {
+      const shouldExpand = this.discussions.some(discussion => !discussion.expanded);
+
       this.discussions.forEach(discussion => {
         this.toggleDiscussion({
           discussionId: discussion.id,
+          shouldExpand,
         });
       });
     },
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index 667c8a97cf3..b75b7525a75 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -178,9 +178,11 @@ export default {
     }
   },
 
-  [types.TOGGLE_DISCUSSION](state, { discussionId }) {
+  [types.TOGGLE_DISCUSSION](state, { discussionId, shouldExpand = null }) {
     const discussion = utils.findNoteObjectById(state.discussions, discussionId);
-    Object.assign(discussion, { expanded: !discussion.expanded });
+    Object.assign(discussion, {
+      expanded: shouldExpand === null ? !discussion.expanded : shouldExpand,
+    });
   },
 
   [types.UPDATE_NOTE](state, note) {
diff --git a/changelogs/unreleased/diff-fix-expanding.yml b/changelogs/unreleased/diff-fix-expanding.yml
new file mode 100644
index 00000000000..8ba7f87addc
--- /dev/null
+++ b/changelogs/unreleased/diff-fix-expanding.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed multiple diff line discussions not expanding
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/diffs/components/diff_gutter_avatars_spec.js b/spec/javascripts/diffs/components/diff_gutter_avatars_spec.js
index ad2605a5c5c..f0f97a9dd34 100644
--- a/spec/javascripts/diffs/components/diff_gutter_avatars_spec.js
+++ b/spec/javascripts/diffs/components/diff_gutter_avatars_spec.js
@@ -89,6 +89,35 @@ describe('DiffGutterAvatars', () => {
         expect(component.discussions[0].expanded).toEqual(false);
         component.$store.dispatch('setInitialNotes', []);
       });
+
+      it('forces expansion of all discussions', () => {
+        spyOn(component.$store, 'dispatch');
+
+        component.discussions[0].expanded = true;
+        component.discussions.push({
+          ...component.discussions[0],
+          id: '123test',
+          expanded: false,
+        });
+
+        component.toggleDiscussions();
+
+        expect(component.$store.dispatch.calls.argsFor(0)).toEqual([
+          'toggleDiscussion',
+          {
+            discussionId: component.discussions[0].id,
+            shouldExpand: true,
+          },
+        ]);
+
+        expect(component.$store.dispatch.calls.argsFor(1)).toEqual([
+          'toggleDiscussion',
+          {
+            discussionId: component.discussions[1].id,
+            shouldExpand: true,
+          },
+        ]);
+      });
     });
   });
 
diff --git a/spec/javascripts/notes/stores/mutation_spec.js b/spec/javascripts/notes/stores/mutation_spec.js
index 1c4449d1055..bca87a53b1a 100644
--- a/spec/javascripts/notes/stores/mutation_spec.js
+++ b/spec/javascripts/notes/stores/mutation_spec.js
@@ -297,6 +297,16 @@ describe('Notes Store mutations', () => {
 
       expect(state.discussions[0].expanded).toEqual(false);
     });
+
+    it('forces a discussions expanded state', () => {
+      const state = {
+        discussions: [{ ...discussionMock, expanded: false }],
+      };
+
+      mutations.TOGGLE_DISCUSSION(state, { discussionId: discussionMock.id, shouldExpand: true });
+
+      expect(state.discussions[0].expanded).toEqual(true);
+    });
   });
 
   describe('UPDATE_NOTE', () => {