Fixed diff rendering causing a duplicate key warning

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

3 files changed, 25 insertions, 9 deletions

diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index 7bbafe66199..5a27388863c 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -144,6 +144,7 @@ export default {
 
             if (left || right) {
               return {
+                ...line,
                 left: line.left ? mapDiscussions(line.left) : null,
                 right: line.right ? mapDiscussions(line.right, () => !left) : null,
               };
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index effb6202327..062024b8cdd 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -161,6 +161,7 @@ export function addContextLines(options) {
   const normalizedParallelLines = contextLines.map(line => ({
     left: line,
     right: line,
+    line_code: line.line_code,
   }));
 
   if (options.bottom) {
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index c5e413a29d8..baf6e111f9f 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -14,7 +14,7 @@ import { MERGE_REQUEST_NOTEABLE_TYPE } from '~/notes/constants';
 import diffFileMockData from '../mock_data/diff_file';
 import { noteableDataMock } from '../../notes/mock_data';
 
-const getDiffFileMock = () => Object.assign({}, diffFileMockData);
+const getDiffFileMock = () => JSON.parse(JSON.stringify(diffFileMockData));
 
 describe('DiffsStoreUtils', () => {
   describe('findDiffFile', () => {
@@ -80,30 +80,44 @@ describe('DiffsStoreUtils', () => {
   });
 
   describe('addContextLines', () => {
-    it('should add context lines properly with bottom parameter', () => {
+    it('should add context lines', () => {
       const diffFile = getDiffFileMock();
       const inlineLines = diffFile.highlighted_diff_lines;
       const parallelLines = diffFile.parallel_diff_lines;
       const lineNumbers = { oldLineNumber: 3, newLineNumber: 5 };
-      const contextLines = [{ lineNumber: 42 }];
-      const options = { inlineLines, parallelLines, contextLines, lineNumbers, bottom: true };
+      const contextLines = [{ lineNumber: 42, line_code: '123' }];
+      const options = { inlineLines, parallelLines, contextLines, lineNumbers };
       const inlineIndex = utils.findIndexInInlineLines(inlineLines, lineNumbers);
       const parallelIndex = utils.findIndexInParallelLines(parallelLines, lineNumbers);
       const normalizedParallelLine = {
         left: options.contextLines[0],
         right: options.contextLines[0],
+        line_code: '123',
       };
 
       utils.addContextLines(options);
 
-      expect(inlineLines[inlineLines.length - 1]).toEqual(contextLines[0]);
-      expect(parallelLines[parallelLines.length - 1]).toEqual(normalizedParallelLine);
+      expect(inlineLines[inlineIndex]).toEqual(contextLines[0]);
+      expect(parallelLines[parallelIndex]).toEqual(normalizedParallelLine);
+    });
+
+    it('should add context lines properly with bottom parameter', () => {
+      const diffFile = getDiffFileMock();
+      const inlineLines = diffFile.highlighted_diff_lines;
+      const parallelLines = diffFile.parallel_diff_lines;
+      const lineNumbers = { oldLineNumber: 3, newLineNumber: 5 };
+      const contextLines = [{ lineNumber: 42, line_code: '123' }];
+      const options = { inlineLines, parallelLines, contextLines, lineNumbers, bottom: true };
+      const normalizedParallelLine = {
+        left: options.contextLines[0],
+        right: options.contextLines[0],
+        line_code: '123',
+      };
 
-      delete options.bottom;
       utils.addContextLines(options);
 
-      expect(inlineLines[inlineIndex]).toEqual(contextLines[0]);
-      expect(parallelLines[parallelIndex]).toEqual(normalizedParallelLine);
+      expect(inlineLines[inlineLines.length - 1]).toEqual(contextLines[0]);
+      expect(parallelLines[parallelLines.length - 1]).toEqual(normalizedParallelLine);
     });
   });