Update to new severity badge design

https://gitlab.com/gitlab-org/gitlab/issues/199134

ee/app/assets/javascripts/security_dashboard/components/vulnerability_chart.vue

@@ -135,13 +135,7 @@ export default {
       </template>
 
       <template #cell(severityLevel)="{ value }">
-        <div class="gl-font-size-large">
-          <severity-badge
-            :ref="`severityBadge${value}`"
-            :severity="value"
-            class="d-block p-2 text-center"
-          />
-        </div>
+        <severity-badge :ref="`severityBadge${value}`" :severity="value" />
       </template>
       <template #cell(chartData)="{ item }">
         <div class="position-relative h-32-px">

ee/app/assets/javascripts/vue_shared/security_reports/components/severity_badge.vue

 <script>
 import { SEVERITY_LEVELS } from 'ee/security_dashboard/store/constants';
+import { GlIcon } from '@gitlab/ui';
+
+export const CLASS_NAME_MAP = {
+  critical: 'text-danger-800',
+  high: 'text-danger-600',
+  medium: 'text-warning-400',
+  low: 'text-warning-300',
+  info: 'text-primary-400',
+  unknown: 'text-secondary-400',
+};
 
 export default {
   name: 'SeverityBadge',
+  components: {
+    GlIcon,
+  },
   props: {
     severity: {
       type: String,
@@ -10,51 +23,28 @@ export default {
     },
   },
   computed: {
+    hasSeverityBadge() {
+      return Object.keys(CLASS_NAME_MAP).includes(this.severityKey);
+    },
+    severityKey() {
+      return this.severity.toLowerCase();
+    },
     className() {
-      return `severity-badge-${this.severity.toLowerCase()}`;
+      return CLASS_NAME_MAP[this.severityKey];
+    },
+    iconName() {
+      return `severity-${this.severityKey}`;
     },
     severityTitle() {
-      return SEVERITY_LEVELS[this.severity] || this.severity;
+      return SEVERITY_LEVELS[this.severityKey] || this.severity;
     },
   },
 };
 </script>
 
 <template>
-  <div class="severity-badge" :class="className">{{ severityTitle }}</div>
+  <div v-if="hasSeverityBadge" class="severity-badge text-left text-nowrap gl-text-gray-900">
+    <span :class="className"><gl-icon :name="iconName" :size="12" class="append-right-8"/></span
+    >{{ severityTitle }}
+  </div>
 </template>
-
-<style>
-.severity-badge {
-  background-color: #f2f2f2;
-  border-radius: 0.3em;
-  color: #505050;
-  display: inline-block;
-  font-size: 0.9em;
-  font-weight: bold;
-  line-height: 1em;
-  padding: 0.6em 0.4em 0.4em;
-  text-transform: uppercase;
-}
-
-.severity-badge-critical {
-  background-color: #fae5e1;
-  color: #c0341e;
-}
-
-.severity-badge-high {
-  background-color: #fff1de;
-  color: #de7e00;
-}
-
-.severity-badge-medium {
-  background-color: #ede8fb;
-  color: #6d49cb;
-}
-
-.severity-badge-unknown {
-  background-color: #ffffff;
-  border: 1px solid;
-  color: #707070;
-}
-</style>

ee/changelogs/unreleased/199134-update-security-badges.yml

+---
+title: Update to new severity badge design
+merge_request: 25489
+author:
+type: other

ee/spec/frontend/vue_shared/components/security_reports/severity_badge_spec.js

+import { shallowMount } from '@vue/test-utils';
+import SeverityBadge, {
+  CLASS_NAME_MAP,
+} from 'ee/vue_shared/security_reports/components/severity_badge.vue';
+import { GlIcon } from '@gitlab/ui';
+
+describe('Severity Badge', () => {
+  let wrapper;
+
+  const factory = (propsData = {}) =>
+    shallowMount(SeverityBadge, {
+      propsData: { ...propsData },
+    });
+
+  describe.each(Object.keys(CLASS_NAME_MAP))('given a valid severity %s', severity => {
+    const className = CLASS_NAME_MAP[severity];
+
+    it(`renders the component with ${severity} badge`, () => {
+      wrapper = factory({ severity });
+
+      expect(wrapper.find(`.${className}`).exists()).toBe(true);
+    });
+
+    it('renders gl-icon with correct name', () => {
+      wrapper = factory({ severity });
+      const icon = wrapper.find(GlIcon);
+      expect(icon.props('name')).toBe(`severity-${severity}`);
+    });
+
+    it(`renders the component label`, () => {
+      wrapper = factory({ severity });
+
+      expect(wrapper.text()).toMatch(new RegExp(severity, 'i'));
+    });
+  });
+
+  describe.each(['foo', '', ' '])('given an invalid severity "%s"', invalidSeverity => {
+    it(`renders an empty component`, () => {
+      wrapper = factory({ severity: invalidSeverity });
+
+      expect(wrapper.isEmpty()).toBe(true);
+    });
+  });
+});