Move vulnerability report counts to GlCard

changelogs/unreleased/move-vulnerability-report-to-card.yml

+---
+title: Move vulnerability report counts to GlCard
+merge_request: 52416
+author: Yogi (@yo)
+type: other

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

 <script>
+import { GlCard } from '@gitlab/ui';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 
 export default {
   components: {
+    GlCard,
     SeverityBadge,
   },
   props: {
@@ -24,12 +26,18 @@ export default {
 </script>
 
 <template>
-  <div class="rounded font-weight-bold border">
-    <div class="p-2 bg-gray-light d-flex justify-content-center">
+  <gl-card
+    class="gl-font-weight-bold"
+    header-class="gl-display-flex gl-justify-content-center gl-p-3"
+    body-class="gl-font-size-h2 gl-text-center"
+  >
+    <template #header>
       <severity-badge :severity="severity" />
-    </div>
-    <div ref="body" class="pt-3 pb-3 gl-font-size-h2 text-center">
+    </template>
+    <template #default>
+      <span ref="body">
         <span v-if="isLoading">&mdash;</span> <span v-else>{{ count }}</span>
-    </div>
-  </div>
+      </span>
+    </template>
+  </gl-card>
 </template>

ee/spec/frontend/security_dashboard/components/vulnerability_count_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlCard } from '@gitlab/ui';
 import VulnerabilityCount from 'ee/security_dashboard/components/vulnerability_count.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 
 describe('Vulnerability Count', () => {
   let wrapper;
 
+  const findCard = () => wrapper.findComponent(GlCard);
   const findBadge = () => wrapper.find(SeverityBadge);
   const findBody = () => wrapper.find({ ref: 'body' });
 
-  beforeEach(() => {
+  function mountComponent({ props } = {}) {
     wrapper = shallowMount(VulnerabilityCount, {
       propsData: {
         severity: 'high',
         count: 100,
+        ...props,
       },
     });
+  }
+
+  beforeEach(() => {
+    mountComponent();
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('should render correctly', () => {
+  it('should render correctly with a high severity vulnerability', () => {
     const header = findBadge();
     const body = findBody();
     expect(header.props('severity')).toBe('high');
     expect(body.text()).toBe('100');
   });
+
+  it('should render a card layout with the correct header and body classes', () => {
+    const card = findCard();
+    expect(card.props('headerClass')).toBe('gl-display-flex gl-justify-content-center gl-p-3');
+    expect(card.props('bodyClass')).toBe('gl-font-size-h2 gl-text-center');
+  });
 });