Add project compliance labels to the Compliance Dashboard

What does this MR do?

This MR adds a new shared Vue component to render compliance framework badges.

The new component is then added to the compliance dashboard to render the compliance framework applied to each MR. The serializer passes the data to the frontend to consume.

Screenshots (strongly suggested)

Lighter label	Darker label

Database

One preload query is added by the finder. See this discussion for the query and details.

Does this MR meet the acceptance criteria?

Conformity

• I have included changelog trailers, or none are needed. (Does this MR need a changelog?)
• I have added/updated documentation, or it's not needed. (Is documentation required?)
• I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?)
• I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?)
• I have self-reviewed this MR per code review guidelines.
• This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines)
• I have followed the style guides.
• This change is backwards compatible across updates, or this does not apply.

Availability and Testing

1. Go to [GDK_HOST]/groups/[GROUP]/-/edit#js-compliance-frameworks-settings and create a compliance framework label
2. Go to [GDK_HOST]/[GROUP]/[PROJECT]/edit and add your framework to the project
3. Create a merge request in the project
4. Go to [GDK_HOST]/groups/[GROUP]/-/security/compliance_dashboard and check the label appears

• I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.)
• I have tested this MR in all supported browsers, or it's not needed.
• I have informed the Infrastructure department of a default or new setting change per definition of done, or it's not needed.

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

• [-] Label as security and @ mention @gitlab-com/gl-security/appsec
• [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• [-] Security reports checked/validated by a reviewer from the AppSec team

Related to #215051 (closed)

changed milestone to %14.1

added Category:Compliance Management Enterprise Edition GitLab Ultimate Next Up UI polish backend devopsmanage frontend groupcompliance priority2 sectiondev typefeature workflowready for development labels

assigned to @rob.hunt

marked this merge request as ready

changed title from Resolve "Add project compliance labels to the Compliance Dashboard" to Add project compliance labels to the Compliance Dashboard

changed the description

removed workflowready for development label

mentioned in commit ef0bd91f

added 38 commits

• 3d0122af...fbcaaccb - 37 commits from branch master
• ef0bd91f - Add compliance framework badge to compliance dashboard

Compare with previous version

marked the checklist item I have included changelog trailers, or none are needed. (Does this MR need a changelog?) as completed

marked the checklist item I have added/updated documentation, or it's not needed. (Is documentation required?) as completed

marked the checklist item I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?) as completed

marked the checklist item I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?) as completed

marked the checklist item I have self-reviewed this MR per code review guidelines. as completed

marked the checklist item This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines) as completed

marked the checklist item I have followed the style guides. as completed

marked the checklist item This change is backwards compatible across updates, or this does not apply. as completed

marked the checklist item I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.) as completed

marked the checklist item I have tested this MR in all supported browsers, or it's not needed. as completed

marked the checklist item I have informed the Infrastructure department of a default or new setting change per definition of done, or it's not needed. as completed