Fixed resolved discussions not toggling expanded

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

3 files changed, 41 insertions, 7 deletions

diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index 2c04bfea122..16bb54be126 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -214,12 +214,7 @@ export default {
 
   [types.SET_DISCUSSION_DIFF_LINES](state, { discussionId, diffLines }) {
     const discussion = utils.findNoteObjectById(state.discussions, discussionId);
-    const index = state.discussions.indexOf(discussion);
 
-    const discussionWithDiffLines = Object.assign({}, discussion, {
-      truncated_diff_lines: diffLines,
-    });
-
-    state.discussions.splice(index, 1, discussionWithDiffLines);
+    discussion.truncated_diff_lines = diffLines;
   },
 };
diff --git a/changelogs/unreleased/mr-fixed-expanded-state-not-working.yml b/changelogs/unreleased/mr-fixed-expanded-state-not-working.yml
new file mode 100644
index 00000000000..b8bf8306546
--- /dev/null
+++ b/changelogs/unreleased/mr-fixed-expanded-state-not-working.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed resolved discussions not toggling expanded state on changes tab
+merge_request: 21676
+author:
+type: fixed
diff --git a/spec/javascripts/notes/stores/mutation_spec.js b/spec/javascripts/notes/stores/mutation_spec.js
index a15ff1a5888..6b7f61468d5 100644
--- a/spec/javascripts/notes/stores/mutation_spec.js
+++ b/spec/javascripts/notes/stores/mutation_spec.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import mutations from '~/notes/stores/mutations';
 import {
   note,
@@ -333,7 +334,7 @@ describe('Notes Store mutations', () => {
     });
   });
 
-  describe('SET_NOTES_FETCHING_STATE', () => {
+  describe('SET_NOTES_FETCHED_STATE', () => {
     it('should set the given state', () => {
       const state = {
         isNotesFetched: false,
@@ -343,4 +344,37 @@ describe('Notes Store mutations', () => {
       expect(state.isNotesFetched).toEqual(true);
     });
   });
+
+  describe('SET_DISCUSSION_DIFF_LINES', () => {
+    it('sets truncated_diff_lines', () => {
+      const state = {
+        discussions: [
+          {
+            id: 1,
+          },
+        ],
+      };
+
+      mutations.SET_DISCUSSION_DIFF_LINES(state, { discussionId: 1, diffLines: ['test'] });
+
+      expect(state.discussions[0].truncated_diff_lines).toEqual(['test']);
+    });
+
+    it('keeps reactivity of discussion', () => {
+      const state = {};
+      Vue.set(state, 'discussions', [
+        {
+          id: 1,
+          expanded: false,
+        },
+      ]);
+      const discussion = state.discussions[0];
+
+      mutations.SET_DISCUSSION_DIFF_LINES(state, { discussionId: 1, diffLines: ['test'] });
+
+      discussion.expanded = true;
+
+      expect(state.discussions[0].expanded).toBe(true);
+    });
+  });
 });