Fixed diff rendering causing a duplicate key warning

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

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,
               };

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) {

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);
     });
   });