Merge branch '51606-expanding-a-diff-while-having-an-open-comment-form-will-always-scroll-down-to-the-comment' into 'master'

Resolve "Expanding a diff while having an open comment form will always scroll down to the comment"

Closes #51606

See merge request gitlab-org/gitlab-ce!23849

5 files changed, 37 insertions, 5 deletions

diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index 9310e2b7ca9..e781397214d 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -49,7 +49,7 @@ export default {
           :is-bottom="index + 1 === diffLinesLength"
         />
         <inline-diff-comment-row
-          :key="`icr-${index}`"
+          :key="`icr-${line.line_code || index}`"
           :diff-file-hash="diffFile.file_hash"
           :line="line"
           :help-page-path="helpPagePath"
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index e6bc0daebb3..1bf693380db 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -43,14 +43,14 @@ export default {
       <tbody>
         <template v-for="(line, index) in diffLines">
           <parallel-diff-table-row
-            :key="index"
+            :key="line.line_code"
             :file-hash="diffFile.file_hash"
             :context-lines-path="diffFile.context_lines_path"
             :line="line"
             :is-bottom="index + 1 === diffLinesLength"
           />
           <parallel-diff-comment-row
-            :key="`dcr-${index}`"
+            :key="`dcr-${line.line_code || index}`"
             :line="line"
             :diff-file-hash="diffFile.file_hash"
             :line-index="index"
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index cbaa0e26395..2fe20551642 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -196,6 +196,15 @@ export function trimFirstCharOfLineContent(line = {}) {
   return parsedLine;
 }
 
+function getLineCode({ left, right }, index) {
+  if (left && left.line_code) {
+    return left.line_code;
+  } else if (right && right.line_code) {
+    return right.line_code;
+  }
+  return index;
+}
+
 // This prepares and optimizes the incoming diff data from the server
 // by setting up incremental rendering and removing unneeded data
 export function prepareDiffData(diffData) {
@@ -208,6 +217,8 @@ export function prepareDiffData(diffData) {
       const linesLength = file.parallel_diff_lines.length;
       for (let u = 0; u < linesLength; u += 1) {
         const line = file.parallel_diff_lines[u];
+
+        line.line_code = getLineCode(line, u);
         if (line.left) {
           line.left = trimFirstCharOfLineContent(line.left);
           line.left.hasForm = false;
diff --git a/changelogs/unreleased/51606-expanding-a-diff-while-having-an-open-comment-form-will-always-scroll-down-to-the-comment.yml b/changelogs/unreleased/51606-expanding-a-diff-while-having-an-open-comment-form-will-always-scroll-down-to-the-comment.yml
new file mode 100644
index 00000000000..a845234b42f
--- /dev/null
+++ b/changelogs/unreleased/51606-expanding-a-diff-while-having-an-open-comment-form-will-always-scroll-down-to-the-comment.yml
@@ -0,0 +1,5 @@
+---
+title: Stop autofocusing on diff comment after initial mount
+merge_request: 23849
+author:
+type: fixed
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index f096638e3d6..4268634d302 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -294,10 +294,14 @@ describe('DiffsStoreUtils', () => {
   });
 
   describe('prepareDiffData', () => {
-    it('sets the renderIt and collapsed attribute on files', () => {
-      const preparedDiff = { diff_files: [getDiffFileMock()] };
+    let preparedDiff;
+
+    beforeEach(() => {
+      preparedDiff = { diff_files: [getDiffFileMock()] };
       utils.prepareDiffData(preparedDiff);
+    });
 
+    it('sets the renderIt and collapsed attribute on files', () => {
       const firstParallelDiffLine = preparedDiff.diff_files[0].parallel_diff_lines[2];
 
       expect(firstParallelDiffLine.left.discussions.length).toBe(0);
@@ -323,6 +327,18 @@ describe('DiffsStoreUtils', () => {
       expect(preparedDiff.diff_files[0].renderIt).toBeTruthy();
       expect(preparedDiff.diff_files[0].collapsed).toBeFalsy();
     });
+
+    it('adds line_code to all lines', () => {
+      expect(
+        preparedDiff.diff_files[0].parallel_diff_lines.filter(line => !line.line_code),
+      ).toHaveLength(0);
+    });
+
+    it('uses right line code if left has none', () => {
+      const firstLine = preparedDiff.diff_files[0].parallel_diff_lines[0];
+
+      expect(firstLine.line_code).toEqual(firstLine.right.line_code);
+    });
   });
 
   describe('isDiscussionApplicableToLine', () => {