Add compliance framework labels to group-level project list

Problem to solve

As shown by the screenshot below, compliance frameworks (custom or otherwise) are not displayed at the group-level list of projects. We should add them here, and anywhere else that they are missing.

Proposal

With groupcompliance focusing on compliance framework labels which belong to namespaces/groups, we should consider making it clear which frameworks a project has assigned to it at the group-level.

Add the compliance framework assigned to a project as a label.

I attempted to quickly fix this, but realised it's a Vue application and so had no idea what to do! It'll require frontend engineering attention.

Implementation plan

For future me: the projects listing is currently using HAML and we build the pill with the following:

# ee/app/views/compliance_management/compliance_framework/_compliance_framework_badge.html.haml

%span.badge.compliance-framework-pill.ml-2.has-tooltip{ style: "background-color: #{framework.color}", data: { container: 'body' }, title: framework.description }
    = framework.name

frontend - 1

1. Update ee/app/serializers/ee/group_child_entity.rb to include the compliance framework details (name, description and color) if the group has a framework associated
2. Update tests for the entity
3. Update app/assets/javascripts/groups/components/group_item.vue:163 to show the framework in pill form (with tooltip) if the group has a framework associated
   • Use the shared ComplianceFramework.vue component which will be created in #215051 (closed)
4. Update tests for the group item

Product Tier

GitLab Premium