Fix incorrect hiding of inline comment cells

Add tests for parallel and inline comment cell rendering

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

@@ -51,6 +51,14 @@ export default {
       );
     },
   },
+  methods: {
+    showCommentLeft(line) {
+      return !this.inline || line.left;
+    },
+    showCommentRight(line) {
+      return !this.inline || (line.right && !line.left);
+    },
+  },
   userColorScheme: window.gon.user_color_scheme,
 };
 </script>
@@ -93,10 +101,7 @@ export default {
         :class="line.commentRowClasses"
         class="diff-grid-comments diff-tr notes_holder"
       >
-        <div
-          v-if="!inline || (line.left && line.left.discussions.length)"
-          class="diff-td notes-content parallel old"
-        >
+        <div v-if="showCommentLeft(line)" class="diff-td notes-content parallel old">
           <diff-comment-cell
             v-if="line.left"
             :line="line.left"
@@ -106,10 +111,7 @@ export default {
             line-position="left"
           />
         </div>
-        <div
-          v-if="!inline || (line.right && line.right.discussions.length)"
-          class="diff-td notes-content parallel new"
-        >
+        <div v-if="showCommentRight(line)" class="diff-td notes-content parallel new">
           <diff-comment-cell
             v-if="line.right"
             :line="line.right"

changelogs/unreleased/jdb-fix-comment-cell-inline.yml

+---
+title: Fix comment cells not rendering in unified component inline view
+merge_request: 47693
+author:
+type: fixed

spec/frontend/diffs/components/diff_view_spec.js

@@ -49,12 +49,29 @@ describe('DiffView', () => {
     expect(wrapper.find(DiffExpansionCell).exists()).toBe(true);
   });
 
-  it('renders a comment row', () => {
+  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'}   | ${'right'} | ${'.new'} | ${{ right: { lineDraft: {} } }}                          | ${1}
+    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {} }, right: { lineDraft: {} } }} | ${1}
+  `(
+    'renders a $type comment row with comment cell on $side',
+    ({ type, container, sides, total }) => {
       const wrapper = createWrapper({
-      diffLines: [{ renderCommentRow: true, left: { lineDraft: {} } }],
-    });
-    expect(wrapper.find(DiffCommentCell).exists()).toBe(true);
+        diffLines: [{ renderCommentRow: true, ...sides }],
+        inline: type === 'inline',
       });
+      expect(wrapper.findAll(DiffCommentCell).length).toBe(total);
+      expect(
+        wrapper
+          .find(container)
+          .find(DiffCommentCell)
+          .exists(),
+      ).toBe(true);
+    },
+  );
 
   it('renders a draft row', () => {
     const wrapper = createWrapper({