Merge branch 'jdb/fix-comment-highlighting-unified-components' into 'master'

Fix commented line highlighting

See merge request gitlab-org/gitlab!49061

app/assets/javascripts/notes/components/multiline_comment_utils.js

@@ -103,9 +103,15 @@ export function getCommentedLines(selectedCommentPosition, diffLines) {
     };
   }
 
+  const findLineCodeIndex = line => position => {
+    return [position.line_code, position.left?.line_code, position.right?.line_code].includes(
+      line.line_code,
+    );
+  };
+
   const { start, end } = selectedCommentPosition;
-  const startLine = diffLines.findIndex(l => l.line_code === start.line_code);
-  const endLine = diffLines.findIndex(l => l.line_code === end.line_code);
+  const startLine = diffLines.findIndex(findLineCodeIndex(start));
+  const endLine = diffLines.findIndex(findLineCodeIndex(end));
 
   return { startLine, endLine };
 }

changelogs/unreleased/jdb-fix-comment-highlighting-unified-components.yml

+---
+title: Fix comment highlighting for unified diff components
+merge_request: 49061
+author:
+type: fixed

spec/frontend/notes/components/multiline_comment_utils_spec.js

@@ -34,8 +34,17 @@ describe('Multiline comment utilities', () => {
       expect(getSymbol(type)).toEqual(result);
     });
   });
-  describe('getCommentedLines', () => {
-    const diffLines = [{ line_code: '1' }, { line_code: '2' }, { line_code: '3' }];
+  const inlineDiffLines = [{ line_code: '1' }, { line_code: '2' }, { line_code: '3' }];
+  const parallelDiffLines = inlineDiffLines.map(line => ({
+    left: { ...line },
+    right: { ...line },
+  }));
+
+  describe.each`
+    view          | diffLines
+    ${'inline'}   | ${inlineDiffLines}
+    ${'parallel'} | ${parallelDiffLines}
+  `('getCommentedLines $view view', ({ diffLines }) => {
     it('returns a default object when `selectedCommentPosition` is not provided', () => {
       expect(getCommentedLines(undefined, diffLines)).toEqual({ startLine: 4, endLine: 4 });
     });