Update colors and switch filters with counts

Remove most of the custom styling and use predefined classes

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

@@ -159,12 +159,12 @@ export default {
       :illustrations="loadingErrorIllustrations"
     />
     <template v-else>
+      <vulnerability-count-list v-if="shouldShowCountList" />
+
       <header>
         <filters />
       </header>
 
-      <vulnerability-count-list v-if="shouldShowCountList" class="mb-0" />
-
       <div class="row mt-4">
         <article class="col" :class="{ 'col-xl-7': !isLockedToProject }">
           <security-dashboard-table>

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

 <script>
-import { SEVERITY_LEVELS } from '../store/constants';
+import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 
 export default {
-  name: 'VulnerabilityCount',
+  components: {
+    SeverityBadge,
+  },
   props: {
     severity: {
       type: String,
@@ -18,80 +20,16 @@ export default {
       default: false,
     },
   },
-  computed: {
-    className() {
-      return `vulnerability-count-${this.severity}`;
-    },
-    severityTitle() {
-      return SEVERITY_LEVELS[this.severity] || this.severity;
-    },
-  },
 };
 </script>
 
 <template>
-  <div class="vulnerability-count" :class="className">
-    <div class="vulnerability-count-header">{{ severityTitle }}</div>
-    <div class="vulnerability-count-body">
+  <div class="rounded font-weight-bold border">
+    <div class="p-2 bg-gray-light d-flex justify-content-center">
+      <severity-badge :severity="severity" />
+    </div>
+    <div ref="body" class="pt-3 pb-3 gl-font-size-20 text-center">
       <span v-if="isLoading">&mdash;</span> <span v-else>{{ count }}</span>
     </div>
   </div>
 </template>
-
-<style>
-.vulnerability-count {
-  background-color: #fafafa;
-  border-radius: 0.6em;
-  color: #505050;
-  display: block;
-  font-weight: bold;
-  margin-bottom: 1em;
-  overflow: hidden;
-  text-align: center;
-}
-.vulnerability-count-header {
-  background-color: #f2f2f2;
-  display: block;
-  padding: 0.4em;
-  text-transform: capitalize;
-}
-.vulnerability-count-body {
-  display: block;
-  font-size: 2em;
-  padding: 0.8em;
-}
-
-.vulnerability-count-critical {
-  background-color: #fff6f5;
-  color: #c0341e;
-}
-.vulnerability-count-critical .vulnerability-count-header {
-  background-color: #fae5e1;
-}
-
-.vulnerability-count-high {
-  background-color: #fffaf3;
-  color: #de7e00;
-}
-.vulnerability-count-high .vulnerability-count-header {
-  background-color: #fff1de;
-}
-
-.vulnerability-count-medium {
-  background-color: #f9f7fd;
-  color: #6d49cb;
-}
-.vulnerability-count-medium .vulnerability-count-header {
-  background-color: #ede8fb;
-}
-
-.vulnerability-count-unknown {
-  background-color: #ffffff;
-  border: 1px solid;
-  color: #707070;
-}
-.vulnerability-count-unknown .vulnerability-count-header {
-  background-color: #ffffff;
-  border-bottom: 1px solid;
-}
-</style>

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

@@ -6,7 +6,6 @@ import { CRITICAL, HIGH, MEDIUM, LOW } from '../store/modules/vulnerabilities/co
 const SEVERITIES = [CRITICAL, HIGH, MEDIUM, LOW];
 
 export default {
-  name: 'VulnerabilityCountList',
   components: {
     VulnerabilityCount,
   },
@@ -24,7 +23,7 @@ export default {
 </script>
 
 <template>
-  <div class="vulnerabilities-count-list">
+  <div class="vulnerabilities-count-list mb-5 mt-4">
     <div class="flash-container">
       <div v-if="dashboardError" class="flash-alert">
         <div class="flash-text container-fluid container-limited limit-container-width">
@@ -60,12 +59,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style>
-.vulnerabilities-count-list {
-  display: block;
-  padding: 2.5em 0 1.5em;
-  border-bottom: 1px solid #e5e5e5;
-  margin-bottom: 3px;
-}
-</style>

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

-import Vue from 'vue';
-import component from 'ee/security_dashboard/components/vulnerability_count.vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
+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', () => {
-  const Component = Vue.extend(component);
-  let vm;
-  let props;
+  let wrapper;
+
+  const findBadge = () => wrapper.find(SeverityBadge);
+  const findBody = () => wrapper.find({ ref: 'body' });
 
   beforeEach(() => {
-    const severity = 'high';
-    const count = 100;
-    props = { severity, count };
-    vm = mountComponent(Component, props);
+    wrapper = shallowMount(VulnerabilityCount, {
+      propsData: {
+        severity: 'high',
+        count: 100,
+      },
+    });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  it('should render the severity label', () => {
-    const header = vm.$el.querySelector('.vulnerability-count-header');
-
-    expect(header.textContent.toLowerCase()).toMatch(props.severity);
-  });
-
-  it('should render the count', () => {
-    const body = vm.$el.querySelector('.vulnerability-count-body');
-
-    expect(body.textContent).toMatch(props.count.toString());
+  it('should render correctly', () => {
+    const header = findBadge();
+    const body = findBody();
+    expect(header.props('severity')).toBe('high');
+    expect(body.text()).toBe('100');
   });
 });