Merge branch 'ph/300006/fixDiffsDiscussionWrongSide' into 'master'

Fixes diff discussions not rendering on the correct side

See merge request gitlab-org/gitlab!52579

app/assets/javascripts/diffs/components/diff_row.vue

@@ -111,13 +111,7 @@ export default {
       return { conflict_our: this.line.right?.type === CONFLICT_THEIR };
     },
     shouldRenderCommentButton() {
-      return (
-        this.isLoggedIn &&
-        !this.line.isContextLineLeft &&
-        !this.line.isMetaLineLeft &&
-        !this.line.hasDiscussionsLeft &&
-        !this.line.hasDiscussionsRight
-      );
+      return this.isLoggedIn && !this.line.isContextLineLeft && !this.line.isMetaLineLeft;
     },
     isLeftConflictMarker() {
       return [CONFLICT_MARKER_OUR, CONFLICT_MARKER_THEIR].includes(this.line.left?.type);
@@ -199,7 +193,7 @@ export default {
         >
           <template v-if="!isLeftConflictMarker">
             <span
-              v-if="shouldRenderCommentButton"
+              v-if="shouldRenderCommentButton && !line.hasDiscussionsLeft"
               v-gl-tooltip
               data-testid="leftCommentButton"
               class="add-diff-note tooltip-wrapper"
@@ -301,7 +295,7 @@ export default {
         <div :class="classNameMapCellRight" class="diff-td diff-line-num new_line">
           <template v-if="line.right.type !== $options.CONFLICT_MARKER_THEIR">
             <span
-              v-if="shouldRenderCommentButton"
+              v-if="shouldRenderCommentButton && !line.hasDiscussionsRight"
               v-gl-tooltip
               data-testid="rightCommentButton"
               class="add-diff-note tooltip-wrapper"

app/assets/javascripts/diffs/components/diff_view.vue

@@ -138,16 +138,26 @@ export default {
         :class="line.commentRowClasses"
         class="diff-grid-comments diff-tr notes_holder"
       >
-        <div v-if="line.left" :class="{ parallel: !inline }" class="diff-td notes-content old">
+        <div
+          v-if="line.left || !inline"
+          :class="{ parallel: !inline }"
+          class="diff-td notes-content old"
+        >
           <diff-comment-cell
+            v-if="line.left && (line.left.renderDiscussion || line.left.hasCommentForm)"
             :line="line.left"
             :diff-file-hash="diffFile.file_hash"
             :help-page-path="helpPagePath"
             line-position="left"
           />
         </div>
-        <div v-if="line.right" :class="{ parallel: !inline }" class="diff-td notes-content new">
+        <div
+          v-if="line.right || !inline"
+          :class="{ parallel: !inline }"
+          class="diff-td notes-content new"
+        >
           <diff-comment-cell
+            v-if="line.right && (line.right.renderDiscussion || line.right.hasCommentForm)"
             :line="line.right"
             :diff-file-hash="diffFile.file_hash"
             :line-index="index"

changelogs/unreleased/ph-300006-fixDiffsDiscussionWrongSide.yml

+---
+title: Fix diff discussions rendering on the wrong side
+merge_request: 52579
+author:
+type: fixed

spec/frontend/diffs/components/diff_view_spec.js

@@ -56,11 +56,11 @@ describe('DiffView', () => {
 
   it.each`
     type          | side       | container | sides                                                                                                    | total
-    ${'parallel'} | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {} }, right: { lineDraft: {} } }} | ${2}
-    ${'parallel'} | ${'right'} | ${'.new'} | ${{ left: { lineDraft: {} }, right: { lineDraft: {} } }} | ${2}
-    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {} } }}                           | ${1}
-    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {} } }}                           | ${1}
-    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {} } }}                           | ${1}
+    ${'parallel'} | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {}, renderDiscussion: true }, right: { lineDraft: {}, renderDiscussion: true } }} | ${2}
+    ${'parallel'} | ${'right'} | ${'.new'} | ${{ left: { lineDraft: {}, renderDiscussion: true }, right: { lineDraft: {}, renderDiscussion: true } }} | ${2}
+    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {}, renderDiscussion: true } }}                                                   | ${1}
+    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {}, renderDiscussion: true } }}                                                   | ${1}
+    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {}, renderDiscussion: true } }}                                                   | ${1}
   `(
     'renders a $type comment row with comment cell on $side',
     ({ type, container, sides, total }) => {