Merge branch 'jlouw-update-compliance-labels-to-use-shared-component' into 'master'

Update compliance labels to use shared component

See merge request gitlab-org/gitlab!90606

app/assets/javascripts/groups/components/group_item.vue

@@ -4,6 +4,7 @@ import {
   GlLoadingIcon,
   GlBadge,
   GlIcon,
+  GlLabel,
   GlTooltipDirective,
   GlSafeHtmlDirective,
 } from '@gitlab/ui';
@@ -28,11 +29,8 @@ export default {
     GlBadge,
     GlLoadingIcon,
     GlIcon,
+    GlLabel,
     UserAccessRoleBadge,
-    ComplianceFrameworkLabel: () =>
-      import(
-        'ee_component/vue_shared/components/compliance_framework_label/compliance_framework_label.vue'
-      ),
     itemCaret,
     itemTypeIcon,
     itemActions,
@@ -184,12 +182,13 @@ export default {
             <user-access-role-badge v-if="group.permission" class="gl-mt-3">
               {{ group.permission }}
             </user-access-role-badge>
-            <compliance-framework-label
+            <gl-label
               v-if="hasComplianceFramework"
               class="gl-mt-3"
-              :name="complianceFramework.name"
-              :color="complianceFramework.color"
+              :title="complianceFramework.name"
+              :background-color="complianceFramework.color"
               :description="complianceFramework.description"
+              size="sm"
             />
           </div>
           <div v-if="group.description" class="description">

ee/app/assets/javascripts/compliance_dashboard/components/drawer_sections/project.vue

 <script>
-import { GlAvatarLabeled, GlAvatarLink } from '@gitlab/ui';
+import { GlAvatarLabeled, GlAvatarLink, GlLabel } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
-import ComplianceFrameworkLabel from 'ee/vue_shared/components/compliance_framework_label/compliance_framework_label.vue';
 import { __ } from '~/locale';
 import { DRAWER_AVATAR_SIZE } from '../../constants';
 import DrawerSectionHeader from '../shared/drawer_section_header.vue';
 
 export default {
   components: {
-    ComplianceFrameworkLabel,
     DrawerSectionHeader,
     GlAvatarLabeled,
     GlAvatarLink,
+    GlLabel,
   },
   props: {
     avatarUrl: {
@@ -57,12 +56,13 @@ export default {
           :src="avatarUrl"
         />
       </gl-avatar-link>
-      <compliance-framework-label
+      <gl-label
         v-if="hasComplianceFramework"
         class="gl-ml-3"
-        :name="complianceFramework.name"
-        :color="complianceFramework.color"
+        :title="complianceFramework.name"
+        :background-color="complianceFramework.color"
         :description="complianceFramework.description"
+        size="sm"
       />
     </div>
   </div>

ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/list_item.vue

 <script>
-import { GlLabel, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective, GlLabel } from '@gitlab/ui';
 import { DELETE_BUTTON_LABEL, EDIT_BUTTON_LABEL } from '../constants';
 
 export default {
@@ -32,11 +32,11 @@ export default {
   >
     <div class="gl-w-quarter gl-mr-3 gl-flex-shrink-0">
       <gl-label
-        :target="framework.editPath"
         :background-color="framework.color"
-        :title="framework.name"
         :description="$options.i18n.editFramework"
         :disabled="loading"
+        :title="framework.name"
+        :target="framework.editPath"
       />
     </div>
     <p class="gl-w-full gl-m-0!" data-testid="compliance-framework-description">

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/spec/frontend/compliance_dashboard/components/drawer_sections/project_spec.js

-import { GlAvatarLabeled, GlAvatarLink } from '@gitlab/ui';
+import { GlAvatarLabeled, GlAvatarLink, GlLabel } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Project from 'ee/compliance_dashboard/components/drawer_sections/project.vue';
 import DrawerSectionHeader from 'ee/compliance_dashboard/components/shared/drawer_section_header.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 { complianceFramework } from '../../mock_data';
 
 describe('Project component', () => {
   let wrapper;
@@ -14,7 +13,7 @@ describe('Project component', () => {
   const findSectionHeader = () => wrapper.findComponent(DrawerSectionHeader);
   const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
   const findAvatarLabel = () => wrapper.findComponent(GlAvatarLabeled);
-  const findComplianceFrameworkLabel = () => wrapper.findComponent(ComplianceFrameworkLabel);
+  const findComplianceFrameworkLabel = () => wrapper.findComponent(GlLabel);
 
   const createComponent = (props) => {
     return shallowMount(Project, {
@@ -86,10 +85,11 @@ describe('Project component', () => {
     it('renders the compliance framework label', () => {
       const { color, description, name } = complianceFramework;
 
-      expect(findComplianceFrameworkLabel().props()).toStrictEqual({
-        color,
+      expect(findComplianceFrameworkLabel().props()).toMatchObject({
+        backgroundColor: color,
         description,
-        name,
+        title: name,
+        size: 'sm',
       });
     });
   });

ee/spec/frontend/compliance_dashboard/mock_data.js

@@ -112,3 +112,9 @@ export const createComplianceViolationsResponse = ({ count = 1, pageInfo = {} }
     },
   },
 });
+
+export const complianceFramework = {
+  color: '#009966',
+  description: 'General Data Protection Regulation',
+  name: 'GDPR',
+};

ee/spec/frontend/groups/components/group_item_spec.js

 import { shallowMount } from '@vue/test-utils';
-import ComplianceFrameworkLabel from 'ee_component/vue_shared/components/compliance_framework_label/compliance_framework_label.vue';
+import { GlLabel } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 import GroupFolder from '~/groups/components/group_folder.vue';
 import GroupItem from '~/groups/components/group_item.vue';
@@ -18,7 +18,7 @@ const createComponent = (props = {}) => {
 describe('GroupItemComponent', () => {
   let wrapper;
 
-  const findComplianceFrameworkLabel = () => wrapper.findComponent(ComplianceFrameworkLabel);
+  const findComplianceFrameworkLabel = () => wrapper.findComponent(GlLabel);
 
   afterEach(() => {
     wrapper.destroy();
@@ -38,10 +38,11 @@ describe('GroupItemComponent', () => {
       wrapper = createComponent({ group: mockChildren[1] });
       await waitForPromises();
 
-      expect(findComplianceFrameworkLabel().props()).toStrictEqual({
-        color,
+      expect(findComplianceFrameworkLabel().props()).toMatchObject({
+        backgroundColor: color,
         description,
-        name,
+        title: name,
+        size: 'sm',
       });
     });
   });

ee/spec/frontend/groups/settings/compliance_frameworks/components/list_item_spec.js

-import { GlLabel } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-
+import { GlLabel } from '@gitlab/ui';
 import ListItem from 'ee/groups/settings/compliance_frameworks/components/list_item.vue';
 import {
   DELETE_BUTTON_LABEL,
@@ -71,6 +70,7 @@ describe('ListItem', () => {
 
     expect(findLabel().props()).toMatchObject({
       title: framework.name,
+      backgroundColor: framework.color,
       target: framework.editPath,
       disabled: false,
       description: 'Edit framework',

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',
-};