Make code quality badge in diff view link to modal

What does this MR do?

This MR builds off of the code quality badge added to the diff file header in !56710 (merged) to make it open a modal with the details of the new code quality violations introduced by the merge request per file.

This MR is part of the implementation for #267612 (closed), specifically this point:

Link the badge so it navigates to the merge request main page widget in a single click OR open that modal on this page. Dev to decide which is lower level of effort to implement.

💻 Technically, this MR:

• passes the array of code quality violations down to the diff file header (instead of just a boolean)
• passes the name of the file into the code quality badge (so we can use it in the code quality issue body component)
• adds a modal to the code quality badge component for displaying the details when it is clicked
• adds an href="#") to the badge so that it has the correct styling for a clickable element
• uses the existing code quality issue body component to render the issues inside the modal
• adds tests for the code quality badge component to check that the modal opens and passes the data down to the issue body components correctly

⚠ FYI: I started out with the link-to-main-page-widget approach because it sounded easier but I've switched to the open-a-modal-on-this-page approach instead

Make the code quality badge a link to the code quality widget, i.e. when the badge is clicked, navigate to the "Overview" tab of the merge request and scroll so that the widget is in view.

Split off from !56710 (merged), the most recent commit is what this MR does, the rest will be rebase-erased once !56710 (merged) is merged

- [x] rebase after !56710 (merged) is merged
- [ ] in Vue 3 eventhubs are deprecated, try using emits instead

Screenshots

diff file with badge (unchanged)	badge hover (styling, text changed)	modal on badge click (new)

Does this MR meet the acceptance criteria?

Conformity

• 📋 Does this MR need a changelog?
  • I have included a changelog entry.
  • I have not included a changelog entry because this change is behind the feature flag :codequality_mr_diff.
• Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers
• Informed Infrastructure department of a default or new setting change, if applicable per definition of done

app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue

@@ -6,7 +6,7 @@
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ReportLink from '~/reports/components/report_link.vue';
-import { STATUS_SUCCESS } from '~/reports/constants';
+import { STATUS_SUCCESS, STATUS_NEUTRAL } from '~/reports/constants';
 import { SEVERITY_CLASSES, SEVERITY_ICONS } from '../constants';
 
 export default {
@@ -21,7 +21,8 @@ export default {
   props: {
     status: {
       type: String,
-      required: true,
+      required: false,
+      default: STATUS_NEUTRAL,
     },
     issue: {
       type: Object,