Hide discussion actions when diff_refs dont exist

This fixes a bug where merge requests imported from GitHub
would cause the reply button to throw a JS error
because the discussion has no diff_refs.

Changelog: fixed

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/332574

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -135,6 +135,13 @@ export default {
     resolveWithIssuePath() {
       return !this.discussionResolved ? this.discussion.resolve_with_issue_path : '';
     },
+    canShowReplyActions() {
+      if (this.shouldRenderDiffs && !this.discussion.diff_file.diff_refs) {
+        return false;
+      }
+
+      return true;
+    },
   },
   created() {
     eventHub.$on('startReplying', this.onStartReplying);
@@ -263,7 +270,7 @@ export default {
                   :draft="draftForDiscussion(discussion.reply_id)"
                 />
                 <div
-                  v-else-if="showReplies"
+                  v-else-if="canShowReplyActions && showReplies"
                   :class="{ 'is-replying': isReplying }"
                   class="discussion-reply-holder gl-border-t-0! clearfix"
                 >

spec/frontend/notes/components/noteable_discussion_spec.js

@@ -56,6 +56,18 @@ describe('noteable_discussion component', () => {
     expect(wrapper.find('.discussion-header').exists()).toBe(true);
   });
 
+  it('should hide actions when diff refs do not exists', async () => {
+    const discussion = { ...discussionMock };
+    discussion.diff_file = { ...mockDiffFile, diff_refs: null };
+    discussion.diff_discussion = true;
+    discussion.expanded = false;
+
+    wrapper.setProps({ discussion });
+    await nextTick();
+
+    expect(wrapper.vm.canShowReplyActions).toBe(false);
+  });
+
   describe('actions', () => {
     it('should toggle reply form', async () => {
       await nextTick();