Merge branch '230381-use-gl-badge' into 'master'

Use gl-badge instead of custom styles

See merge request gitlab-org/gitlab!43030

ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue

 <script>
-import { GlIcon, GlPopover } from '@gitlab/ui';
+import { GlIcon, GlPopover, GlBadge } from '@gitlab/ui';
 
 export default {
   components: {
     GlIcon,
     GlPopover,
+    GlBadge,
   },
 };
 </script>
 
 <template>
   <div class="gl-display-inline-block">
-    <span class="gl-display-inline-block gl-rounded-lg gl-bg-blue-200 gl-text-blue-500 gl-px-3">
-      <gl-icon ref="badge" name="admin" />
-    </span>
+    <gl-badge ref="badge" variant="info">
+      <gl-icon name="admin" />
+    </gl-badge>
     <gl-popover
       ref="popover"
       :content="

ee/spec/frontend/vulnerabilities/remediated_badge_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlIcon, GlPopover } from '@gitlab/ui';
+import { GlIcon, GlPopover, GlBadge } from '@gitlab/ui';
 import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
 
 const POPOVER_TITLE = 'Vulnerability remediated. Review before resolving.';
@@ -10,6 +10,7 @@ describe('Remediated badge component', () => {
   let wrapper;
 
   const findIcon = () => wrapper.find(GlIcon);
+  const findBadge = () => wrapper.find(GlBadge);
 
   const createWrapper = () => {
     return shallowMount(RemediatedBadge);
@@ -27,7 +28,7 @@ describe('Remediated badge component', () => {
 
   it('should link the badge and the popover', () => {
     const { popover } = wrapper.vm.$refs;
-    expect(popover.$attrs.target()).toEqual(findIcon().element);
+    expect(popover.$attrs.target()).toEqual(findBadge().element);
   });
 
   it('should pass down the data to the popover', () => {