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

changed milestone to %13.11

added Category:Code Quality Deliverable FY22Q1 GitLab Ultimate UX devopsverify direction documentation frontend grouppipeline security release post itemin review sectionops typefeature workflowin review + 1 deleted label

added backend label

	2 Messages
	CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, run the following: bin/changelog -m 57791 "Make code quality badge in diff view link to modal" If you want to create a changelog entry for GitLab EE, run the following instead: bin/changelog --ee -m 57791 "Make code quality badge in diff view link to modal" If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.
	We are in the process of rolling out a new workflow for adding changelog entries. This new workflow uses Git commit subjects and Git trailers to generate changelogs. This new approach will soon replace the current YAML based approach. To ease the transition process, we recommend you start using both the old and new approach in parallel. This is not required at this time, but will make it easier to transition to the new approach in the future. To do so, pick the commit that should go in the changelog and add a Changelog trailer to it. For example: This is my commit's subject line This is the optional commit body. Changelog: added The value of the Changelog trailer should be one of the following: added, fixed, changed, deprecated, removed, security, performance, other. For more information, take a look at the following resources: https://gitlab.com/gitlab-com/gl-infra/delivery/-/issues/1564 https://docs.gitlab.com/ee/api/repositories.html#generate-changelog-data If you'd like to see the new approach in action, take a look at the commits in the Omnibus repository.

Reviewer roulette

Changes that require review have been detected! A merge request is normally reviewed by both a reviewer and a maintainer in its primary category (e.g. frontend or backend), and by a maintainer in all other categories.

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

Category	Reviewer	Maintainer
frontend	Scott Stern (@sstern) (UTC-7, 1 hour behind @mfluharty)	Natalia Tepluhina (@ntepluhina) (UTC+2, 8 hours ahead of @mfluharty)

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

mentioned in merge request !56710 (merged)

added 876 commits

• 6a630a77...b5dd8548 - 874 commits from branch master
• 5b9cfd27 - Make the badge a link to the codequality MR widget
• 35864452 - Add MR diff code quality badge link spec

Compare with previous version

changed the description

mentioned in issue #267612 (closed)

changed milestone to %13.12

added missed-deliverable missed:13.11 labels

added 5156 commits

• 35864452...6713248f - 5155 commits from branch master
• 1c5b9969 - Make code quality badge in diff view link to modal

Compare with previous version

marked this merge request as ready

changed title from Draft: Make code quality badge in MR diff a link to the code quality widget to Make code quality badge in MR diff a link to a modal with the details of the code quality issues for that file

changed the description

marked the checklist item Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. as completed

changed the description

added 1 commit

• c72d2f16 - Make code quality badge in diff view link to modal

Compare with previous version

requested review from @pedroms

@pgascouvaillancourt Could you review this please?

requested review from @pgascouvaillancourt

removed review request for @pgascouvaillancourt

mentioned in merge request !58833 (merged)

added 1 commit

• cde0a4e3 - Improvements from feedback

Compare with previous version

approved this merge request

added 1 commit

• 27dc88d0 - Improvements from feedback

Compare with previous version

FYI: I amended the last commit to fix the pipeline failures [1, 2]

changed the description

@shampton Could you do the maintainer review for this please?

requested review from @shampton

approved this merge request

resolved all threads

@mfluharty This looks great! Thanks for putting this together. Happy to approve and set to MWPS.

enabled an automatic merge when the pipeline for 70857ec0 succeeds

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 9c8129b5 and 27dc88d0

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.14 MB	3.14 MB	-	0.0 %
mainChunk	1.9 MB	1.9 MB	-	0.0 %

---

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

changed title from Make code quality badge in MR diff a link to a modal with the details of the code quality issues for that file to Make code quality badge in diff view link to modal

merged

mentioned in commit 1d48e365

added workflowstaging label and removed workflowin review label

added workflowcanary label and removed workflowstaging label

added workflowproduction label and removed workflowcanary label

added releasedcandidate label