Add compliance framework label to compliance dashboard

- Add compliance framework to serialising entity
- Create a new shared compliance framework label component
- Updated the compliance dashboard to show it on the merge request item
- Updated spec tests

Changelog: added
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/64283
EE: true

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/merge_request.vue

 <script>
 import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import ComplianceFrameworkLabel from 'ee/vue_shared/components/compliance_framework_label/compliance_framework_label.vue';
 
 import { s__ } from '~/locale';
 
 export default {
   components: {
+    ComplianceFrameworkLabel,
     GlAvatar,
     GlAvatarLink,
   },
@@ -14,6 +16,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    complianceFramework() {
+      return this.mergeRequest.compliance_management_framework;
+    },
+  },
   strings: {
     createdBy: s__('ComplianceDashboard|created by:'),
   },
@@ -49,5 +56,13 @@ export default {
         <span>{{ mergeRequest.author.name }}</span>
       </gl-avatar-link>
     </span>
+    <div>
+      <compliance-framework-label
+        v-if="complianceFramework"
+        :name="complianceFramework.name"
+        :color="complianceFramework.color"
+        :description="complianceFramework.description"
+      />
+    </div>
   </div>
 </template>

ee/app/assets/javascripts/vue_shared/components/compliance_framework_label/compliance_framework_label.vue

+<script>
+import { GlLabel } from '@gitlab/ui';
+import { validateHexColor } from '~/lib/utils/color_utils';
+
+export default {
+  components: {
+    GlLabel,
+  },
+  props: {
+    color: {
+      type: String,
+      required: true,
+      validator: (color) => validateHexColor(color),
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-label size="sm" :background-color="color" :title="name" :description="description" />
+</template>

ee/app/finders/merge_requests_compliance_finder.rb

@@ -66,7 +66,7 @@ class MergeRequestsComplianceFinder < MergeRequestsFinder
       :approved_by_users,
       :metrics,
       source_project: :route,
-      target_project: :namespace,
+      target_project: [:namespace, :compliance_management_framework],
       head_pipeline: [project: :project_feature]
     ]
   end

ee/app/serializers/merge_request_compliance_entity.rb

@@ -30,6 +30,7 @@ class MergeRequestComplianceEntity < Grape::Entity
   expose :target_branch_uri, if: -> (merge_request) { merge_request.target_branch_exists? }
   expose :source_branch
   expose :source_branch_uri, if: -> (merge_request) { merge_request.source_branch_exists? }
+  expose :compliance_management_framework
 
   private
 
@@ -65,4 +66,8 @@ class MergeRequestComplianceEntity < Grape::Entity
   def source_branch_uri
     project_ref_path(merge_request.project, merge_request.source_branch)
   end
+
+  def compliance_management_framework
+    merge_request.project&.compliance_management_framework
+  end
 end

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/merge_request_spec.js.snap

@@ -48,5 +48,13 @@ exports[`MergeRequest component when there is a merge request matches the snapsh
       </span>
     </gl-avatar-link-stub>
   </span>
+   
+  <div>
+    <compliance-framework-label-stub
+      color="#009966"
+      description="General Data Protection Regulation"
+      name="GDPR"
+    />
+  </div>
 </div>
 `;

ee/spec/frontend/compliance_dashboard/components/merge_requests/merge_request_spec.js

@@ -2,12 +2,15 @@ import { GlAvatarLink, GlAvatar } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 import MergeRequest from 'ee/compliance_dashboard/components/merge_requests/merge_request.vue';
+import ComplianceFrameworkLabel from 'ee/vue_shared/components/compliance_framework_label/compliance_framework_label.vue';
+import { complianceFramework } from 'ee_jest/vue_shared/components/compliance_framework_label/mock_data';
 import { createMergeRequest } from '../../mock_data';
 
 describe('MergeRequest component', () => {
   let wrapper;
 
   const findAuthorAvatarLink = () => wrapper.find('.issuable-authored').find(GlAvatarLink);
+  const findComplianceFrameworkLabel = () => wrapper.findComponent(ComplianceFrameworkLabel);
 
   const createComponent = (mergeRequest) => {
     return shallowMount(MergeRequest, {
@@ -28,7 +31,11 @@ describe('MergeRequest component', () => {
   });
 
   describe('when there is a merge request', () => {
-    const mergeRequest = createMergeRequest();
+    const mergeRequest = createMergeRequest({
+      props: {
+        compliance_management_framework: complianceFramework,
+      },
+    });
 
     beforeEach(() => {
       wrapper = createComponent(mergeRequest);
@@ -53,5 +60,27 @@ describe('MergeRequest component', () => {
     it('renders the author name', () => {
       expect(findAuthorAvatarLink().text()).toEqual(mergeRequest.author.name);
     });
+
+    it('renders the compliance framework label', () => {
+      const { color, description, name } = complianceFramework;
+
+      expect(findComplianceFrameworkLabel().props()).toStrictEqual({
+        color,
+        description,
+        name,
+      });
+    });
+  });
+
+  describe('when there is a merge request without a compliance framework', () => {
+    const mergeRequest = createMergeRequest();
+
+    beforeEach(() => {
+      wrapper = createComponent(mergeRequest);
+    });
+
+    it('does not render the compliance framework label', () => {
+      expect(findComplianceFrameworkLabel().exists()).toBe(false);
+    });
   });
 });

ee/spec/frontend/vue_shared/components/compliance_framework_label/compliance_framework_label_spec.js

+import { GlLabel } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import ComplianceFrameworkLabel from 'ee/vue_shared/components/compliance_framework_label/compliance_framework_label.vue';
+import { complianceFramework } from './mock_data';
+
+describe('ComplianceFrameworkLabel component', () => {
+  let wrapper;
+  const propsData = { ...complianceFramework };
+
+  const findLabel = () => wrapper.findComponent(GlLabel);
+
+  beforeEach(() => {
+    wrapper = shallowMount(ComplianceFrameworkLabel, {
+      propsData,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('has the correct props', () => {
+    const { color: backgroundColor, description, name: title } = propsData;
+
+    expect(findLabel().props()).toMatchObject({
+      backgroundColor,
+      description,
+      size: 'sm',
+      title,
+    });
+  });
+});

ee/spec/frontend/vue_shared/components/compliance_framework_label/mock_data.js

+export const complianceFramework = {
+  color: '#009966',
+  description: 'General Data Protection Regulation',
+  name: 'GDPR',
+};

ee/spec/serializers/merge_request_compliance_entity_spec.rb

@@ -29,7 +29,8 @@ RSpec.describe MergeRequestComplianceEntity do
         :target_branch,
         :target_branch_uri,
         :source_branch,
-        :source_branch_uri
+        :source_branch_uri,
+        :compliance_management_framework
       )
     end