Refactor compnent to not use gl-avatar

- gl-avatar features were not needed to display a letter
- use span instead
- update tests

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

@@ -6,7 +6,7 @@ import {
 } from 'ee/security_dashboard/store/modules/vulnerable_projects/constants';
 
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlAvatar, GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 
 import { Accordion, AccordionItem } from 'ee/vue_shared/components/accordion';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -30,7 +30,7 @@ export default {
     },
   },
   accordionItemsContentMaxHeight: '445px',
-  components: { Accordion, AccordionItem, GlLink, GlAvatar, Icon },
+  components: { Accordion, AccordionItem, GlLink, Icon },
   directives: {
     'gl-tooltip': GlTooltipDirective,
   },
@@ -58,7 +58,7 @@ export default {
       return projects && projects.length < 1;
     },
     cssForSeverityGroup({ type }) {
-      return [...this.$options.css.severityGroups[type], 'bg-transparent'];
+      return this.$options.css.severityGroups[type];
     },
     cssForMostSevereVulnerability({ level }) {
       return this.$options.css.severityLevels[level] || [];
@@ -100,15 +100,14 @@ export default {
         >
           <template #title="{ isExpanded, isDisabled }"
             ><h5 class="d-flex align-items-center font-weight-normal p-0 m-0">
-              <gl-avatar
+              <span
                 v-gl-tooltip
                 :title="severityGroup.description"
-                :entity-name="severityGroup.type"
-                shape="circle"
-                :size="32"
-                class="mr-2 border-0 font-weight-bold"
+                class="font-weight-bold mr-3 gl-font-size-16"
                 :class="cssForSeverityGroup(severityGroup)"
-              />
+              >
+                {{ severityGroup.type }}
+              </span>
               <span :class="{ 'font-weight-bold': isExpanded, 'text-secondary': isDisabled }">
                 {{ n__('%d project', '%d projects', severityGroup.projects.length) }}
               </span>

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

 import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
 
-import { GlAvatar, GlLink } from '@gitlab/ui';
+import { GlLink } from '@gitlab/ui';
 
 import { trimText } from 'helpers/text_helper';
 
 import { Accordion, AccordionItem } from 'ee/vue_shared/components/accordion';
 import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
+import { severityGroupTypes } from 'ee/security_dashboard/store/modules/vulnerable_projects/constants';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -24,13 +25,11 @@ describe('Vulnerability Severity component', () => {
     mostSevereVulnerability: { level: 'qux', count: 10 },
   });
 
-  const getMockSeverityGroups = ({ projects = [] } = {}) => ({
-    A: { type: 'A', projects },
-    B: { type: 'B', projects },
-    D: { type: 'D', projects },
-    E: { type: 'E', projects },
-    F: { type: 'F', projects },
-  });
+  const getMockSeverityGroups = ({ projects = [] } = {}) =>
+    Object.keys(severityGroupTypes).reduce((acc, curr) => {
+      acc[curr] = { type: curr, projects };
+      return acc;
+    }, {});
 
   const factory = () => {
     const state = {
@@ -71,8 +70,7 @@ describe('Vulnerability Severity component', () => {
   const accordion = () => wrapper.find(Accordion);
   const accordionItems = () => wrapper.findAll(AccordionItem);
   const firstAccordionItem = () => accordionItems().at(0);
-  const accordionItemForSeverityGroup = groupName =>
-    wrapper.find({ ref: `accordionItem${groupName}` });
+
   const hasAccordionItemForEachSeverityLevel = () =>
     expect(accordionItems().length).toBe(Object.keys(getMockSeverityGroups()).length);
 
@@ -111,6 +109,9 @@ describe('Vulnerability Severity component', () => {
   });
 
   describe('when the data has loaded', () => {
+    it('matches snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
     it('contains an accordion', () => {
       expect(accordion().exists()).toBe(true);
     });
@@ -135,14 +136,6 @@ describe('Vulnerability Severity component', () => {
       });
     });
 
-    it.each(['A', 'B', 'D', 'E', 'F'])('contains an avatar for severity group: "%s"', groupName => {
-      expect(
-        accordionItemForSeverityGroup(groupName)
-          .find(GlAvatar)
-          .props('entityName'),
-      ).toBe(groupName);
-    });
-
     it('links to a given project', () => {
       const mockProject = getMockProject();
       store.state.vulnerableProjects.projects = [mockProject];