Merge branch '199126-update-project-security-status-area' into 'master'

Add new text colors and update severity colors

See merge request gitlab-org/gitlab!28303

app/assets/stylesheets/utilities.scss

@@ -76,10 +76,16 @@
 .gl-bg-green-100 { @include gl-bg-green-100;}
 
 .gl-text-blue-500 { @include gl-text-blue-500; }
+.gl-text-gray-500 { @include gl-text-gray-500; }
 .gl-text-gray-700 { @include gl-text-gray-700; }
 .gl-text-gray-900 { @include gl-text-gray-900; }
 .gl-text-red-700 { @include gl-text-red-700; }
+.gl-text-red-900 { @include gl-text-red-900; }
+.gl-text-orange-400 { @include gl-text-orange-400; }
+.gl-text-orange-500 { @include gl-text-orange-500; }
+.gl-text-orange-600 { @include gl-text-orange-600; }
 .gl-text-orange-700 { @include gl-text-orange-700; }
+.gl-text-green-500 { @include gl-text-green-500; }
 .gl-text-green-700 { @include gl-text-green-700; }
 
 .gl-align-items-center { @include gl-align-items-center; }

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';
@@ -14,23 +14,23 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   css: {
     severityGroups: {
-      [severityGroupTypes.F]: ['gl-bg-red-100', 'gl-text-red-700'],
-      [severityGroupTypes.D]: ['gl-bg-orange-100', 'gl-text-orange-700'],
-      [severityGroupTypes.C]: ['gl-bg-purple-light', 'gl-text-purple'],
-      [severityGroupTypes.B]: ['gl-bg-gray-100', 'gl-text-gray-800'],
-      [severityGroupTypes.A]: ['gl-bg-green-100', 'gl-text-green-700'],
+      [severityGroupTypes.F]: 'gl-text-red-900',
+      [severityGroupTypes.D]: 'gl-text-red-700',
+      [severityGroupTypes.C]: 'gl-text-orange-600',
+      [severityGroupTypes.B]: 'gl-text-orange-400',
+      [severityGroupTypes.A]: 'gl-text-green-500',
     },
     severityLevels: {
-      [severityLevels.CRITICAL]: ['gl-text-red-700'],
-      [severityLevels.HIGH]: ['gl-text-orange-700'],
-      [severityLevels.UNKNOWN]: ['gl-text-gray-800'],
-      [severityLevels.MEDIUM]: ['gl-text-purple'],
-      [severityLevels.LOW]: ['gl-text-gray-800'],
-      [severityLevels.NONE]: ['gl-text-green-700'],
+      [severityLevels.CRITICAL]: 'gl-text-red-900',
+      [severityLevels.HIGH]: 'gl-text-red-700',
+      [severityLevels.UNKNOWN]: 'gl-text-gray-500',
+      [severityLevels.MEDIUM]: 'gl-text-orange-600',
+      [severityLevels.LOW]: 'gl-text-orange-500',
+      [severityLevels.NONE]: 'gl-text-green-500',
     },
   },
   accordionItemsContentMaxHeight: '445px',
-  components: { Accordion, AccordionItem, GlLink, GlAvatar, Icon },
+  components: { Accordion, AccordionItem, GlLink, Icon },
   directives: {
     'gl-tooltip': GlTooltipDirective,
   },
@@ -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];