Use gl-badge for vulnerability states

- Add changelog

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

 <script>
-import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlBadge } from '@gitlab/ui';
 import Api from 'ee/api';
 import { CancelToken } from 'axios';
 import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
@@ -20,6 +20,7 @@ export default {
   components: {
     GlLoadingIcon,
     GlButton,
+    GlBadge,
     ResolutionAlert,
     VulnerabilityStateDropdown,
     SplitButton,
@@ -46,7 +47,16 @@ export default {
     };
   },
 
+  badgeVariants: {
+    confirmed: 'danger',
+    resolved: 'success',
+    detected: 'warning',
+  },
+
   computed: {
+    stateVariant() {
+      return this.$options.badgeVariants[this.vulnerability.state] || 'neutral';
+    },
     actionButtons() {
       const buttons = [];
 
@@ -81,10 +91,6 @@ export default {
         this.hasRemediation
       );
     },
-    statusBoxStyle() {
-      // Get the badge variant based on the vulnerability state, defaulting to 'expired'.
-      return VULNERABILITY_STATE_OBJECTS[this.vulnerability.state]?.statusBoxStyle || 'expired';
-    },
     showResolutionAlert() {
       return (
         this.vulnerability.resolved_on_default_branch &&
@@ -224,15 +230,9 @@ export default {
     <div class="detail-page-header">
       <div class="detail-page-header-body align-items-center">
         <gl-loading-icon v-if="isLoadingVulnerability" class="mr-2" />
-        <span
-          v-else
-          ref="badge"
-          :class="
-            `text-capitalize align-self-center issuable-status-box status-box status-box-${statusBoxStyle}`
-          "
-        >
+        <gl-badge v-else class="gl-mr-4 text-capitalize" :variant="stateVariant">
           {{ vulnerability.state }}
-        </span>
+        </gl-badge>
 
         <status-description
           class="issuable-meta"

ee/app/assets/javascripts/vulnerabilities/constants.js

@@ -4,21 +4,18 @@ export const VULNERABILITY_STATE_OBJECTS = {
   dismissed: {
     action: 'dismiss',
     state: 'dismissed',
-    statusBoxStyle: 'upcoming',
     displayName: s__('Dismiss'),
     description: s__('VulnerabilityManagement|Will not fix or a false-positive'),
   },
   confirmed: {
     action: 'confirm',
     state: 'confirmed',
-    statusBoxStyle: 'closed',
     displayName: s__('Confirm'),
     description: s__('VulnerabilityManagement|A true-positive and will fix'),
   },
   resolved: {
     action: 'resolve',
     state: 'resolved',
-    statusBoxStyle: 'open',
     displayName: s__('Resolve'),
     description: s__('VulnerabilityManagement|Verified as fixed or mitigated'),
   },

ee/changelogs/unreleased/218485-use-the-badge.yml

+---
+title: Use gl-badge for vulnerability states
+merge_request: 43253
+author:
+type: changed

ee/spec/frontend/vulnerabilities/header_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlBadge } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
@@ -69,7 +69,7 @@ describe('Vulnerability Header', () => {
 
   const findGlButton = () => wrapper.find(GlButton);
   const findSplitButton = () => wrapper.find(SplitButton);
-  const findBadge = () => wrapper.find({ ref: 'badge' });
+  const findBadge = () => wrapper.find(GlBadge);
   const findResolutionAlert = () => wrapper.find(ResolutionAlert);
   const findStatusDescription = () => wrapper.find(StatusDescription);
 
@@ -78,6 +78,9 @@ describe('Vulnerability Header', () => {
       propsData: {
         initialVulnerability: { ...defaultVulnerability, ...vulnerability },
       },
+      stubs: {
+        GlBadge,
+      },
     });
   };
 
@@ -107,7 +110,7 @@ describe('Vulnerability Header', () => {
     });
 
     it('when the vulnerability state dropdown emits a change event, the state badge updates', () => {
-      const newState = 'dismiss';
+      const newState = 'dismissed';
       mockAxios.onPost().reply(201, { state: newState });
       expect(findBadge().text()).not.toBe(newState);
 
@@ -121,7 +124,7 @@ describe('Vulnerability Header', () => {
     });
 
     it('when the vulnerability state dropdown emits a change event, the vulnerabilities event bus event is emitted with the proper event', () => {
-      const newState = 'dismiss';
+      const newState = 'dismissed';
       mockAxios.onPost().reply(201, { state: newState });
       expect(findBadge().text()).not.toBe(newState);
 
@@ -253,12 +256,19 @@ describe('Vulnerability Header', () => {
   });
 
   describe('state badge', () => {
-    it.each(vulnerabilityStateEntries)(
+    const badgeVariants = {
+      confirmed: 'danger',
+      resolved: 'success',
+      detected: 'warning',
+      dismissed: 'neutral',
+    };
+
+    it.each(Object.entries(badgeVariants))(
       'the vulnerability state badge has the correct style for the %s state',
-      (state, stateObject) => {
+      (state, variant) => {
         createWrapper({ state });
 
-        expect(findBadge().classes()).toContain(`status-box-${stateObject.statusBoxStyle}`);
+        expect(findBadge().props('variant')).toBe(variant);
         expect(findBadge().text()).toBe(state);
       },
     );