Merge branch 'jdb/fix-unified-diffs-inline' into 'master'

Fix unified components inline view

See merge request gitlab-org/gitlab!47345

app/assets/javascripts/diffs/store/getters.js

@@ -170,5 +170,8 @@ export const diffLines = state => (file, unifiedDiffComponents) => {
     return null;
   }
 
-  return parallelizeDiffLines(file.highlighted_diff_lines || []);
+  return parallelizeDiffLines(
+    file.highlighted_diff_lines || [],
+    state.diffViewType === INLINE_DIFF_VIEW_TYPE,
+  );
 };

app/assets/javascripts/diffs/store/utils.js

@@ -36,9 +36,12 @@ export const isMeta = line => ['match', 'new-nonewline', 'old-nonewline'].includ
  *
  * @param {Object[]} diffLines - inline diff lines
  *
+ * @param {Boolean} inline - is inline context or not
+ *
  * @returns {Object[]} parallel lines
  */
-export const parallelizeDiffLines = (diffLines = []) => {
+
+export const parallelizeDiffLines = (diffLines, inline) => {
   let freeRightIndex = null;
   const lines = [];
 
@@ -57,7 +60,7 @@ export const parallelizeDiffLines = (diffLines = []) => {
       }
       index += 1;
     } else if (isAdded(line)) {
-      if (freeRightIndex !== null) {
+      if (freeRightIndex !== null && !inline) {
         // If an old line came before this without a line on the right, this
         // line can be put to the right of it.
         lines[freeRightIndex].right = line;

app/assets/stylesheets/framework/diffs.scss

@@ -641,12 +641,12 @@ table.code {
       }
     }
 
-    .diff-grid-left .old:nth-child(2) [data-linenumber],
+    .diff-grid-left .old:nth-child(1) [data-linenumber],
     .diff-grid-right .new:nth-child(2) [data-linenumber] {
       display: inline;
     }
 
-    .diff-grid-left .old:nth-child(3) [data-linenumber],
+    .diff-grid-left .old:nth-child(2) [data-linenumber],
     .diff-grid-right .new:nth-child(1) [data-linenumber] {
       display: none;
     }

changelogs/unreleased/jdb-fix-unified-diffs-inline.yml

+---
+title: Fix unified component inline display
+merge_request: 47345
+author:
+type: fixed

spec/frontend/diffs/store/utils_spec.js

@@ -1221,5 +1221,26 @@ describe('DiffsStoreUtils', () => {
         file.parallel_diff_lines,
       );
     });
+
+    /**
+     * What's going on here?
+     *
+     * The inline version of parallelizeDiffLines simply keeps the difflines
+     * in the same order they are received as opposed to shuffling them
+     * to be "side by side".
+     *
+     * This keeps the underlying data structure the same which simplifies
+     * the components, but keeps the changes grouped together as users
+     * expect when viewing changes inline.
+     */
+    it('converts inline diff lines to inline diff lines with a parallel structure', () => {
+      const file = getDiffFileMock();
+      const files = utils.parallelizeDiffLines(file.highlighted_diff_lines, true);
+
+      expect(files[5].left).toEqual(file.parallel_diff_lines[5].left);
+      expect(files[5].right).toBeNull();
+      expect(files[6].left).toBeNull();
+      expect(files[6].right).toEqual(file.parallel_diff_lines[5].right);
+    });
   });
 });