Fix comment button not rendering

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

@@ -199,10 +199,10 @@ export default {
       );
     },
     hasDiscussionsLeft() {
-      return this.line.left.discussions && this.line.left.discussions.length > 0;
+      return this.line.left?.discussions?.length > 0;
     },
     hasDiscussionsRight() {
-      return this.line.right.discussions && this.line.right.discussions.length > 0;
+      return this.line.right?.discussions?.length > 0;
     },
     lineHrefOld() {
       return `#${this.line.left.line_code || ''}`;
@@ -217,14 +217,14 @@ export default {
       );
     },
     isMetaLineLeft() {
-      const { type } = this.line.left;
+      const type = this.line.left?.type;
 
       return (
         type === OLD_NO_NEW_LINE_TYPE || type === NEW_NO_NEW_LINE_TYPE || type === EMPTY_CELL_TYPE
       );
     },
     isMetaLineRight() {
-      const { type } = this.line.right;
+      const type = this.line.right?.type;
 
       return (
         type === OLD_NO_NEW_LINE_TYPE || type === NEW_NO_NEW_LINE_TYPE || type === EMPTY_CELL_TYPE

spec/frontend/diffs/components/parallel_diff_table_row_spec.js

@@ -228,19 +228,20 @@ describe('ParallelDiffTableRow', () => {
       const findNoteButton = () => wrapper.find({ ref: 'addDiffNoteButtonLeft' });
 
       it.each`
-        hover    | userData     | query                | mergeRefHeadComments | expectation
-        ${true}  | ${TEST_USER} | ${'diff_head=false'} | ${false}             | ${true}
-        ${true}  | ${TEST_USER} | ${'diff_head=true'}  | ${true}              | ${true}
-        ${true}  | ${TEST_USER} | ${'diff_head=true'}  | ${false}             | ${false}
-        ${true}  | ${null}      | ${''}                | ${true}              | ${false}
-        ${false} | ${TEST_USER} | ${'diff_head=false'} | ${false}             | ${false}
+        hover    | line                        | userData     | query                | mergeRefHeadComments | expectation
+        ${true}  | ${{}}                       | ${TEST_USER} | ${'diff_head=false'} | ${false}             | ${true}
+        ${true}  | ${{ line: { left: null } }} | ${TEST_USER} | ${'diff_head=false'} | ${false}             | ${false}
+        ${true}  | ${{}}                       | ${TEST_USER} | ${'diff_head=true'}  | ${true}              | ${true}
+        ${true}  | ${{}}                       | ${TEST_USER} | ${'diff_head=true'}  | ${false}             | ${false}
+        ${true}  | ${{}}                       | ${null}      | ${''}                | ${true}              | ${false}
+        ${false} | ${{}}                       | ${TEST_USER} | ${'diff_head=false'} | ${false}             | ${false}
       `(
         'exists is $expectation - with userData ($userData) query ($query)',
-        async ({ hover, userData, query, mergeRefHeadComments, expectation }) => {
+        async ({ hover, line, userData, query, mergeRefHeadComments, expectation }) => {
           store.state.notes.userData = userData;
           gon.features = { mergeRefHeadComments };
           setWindowLocation({ href: `${TEST_HOST}?${query}` });
-          createComponent({}, store);
+          createComponent(line, store);
           if (hover) await wrapper.find('.line_holder').trigger('mouseover');
 
           expect(findNoteButton().exists()).toBe(expectation);