Skip to content

G
gitlab-ce
Commit 7b4abf13 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

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
parents 7649d9ee 514f5c40
Hide whitespace changes
Inline Side-by-side
Showing with 452 additions and 37 deletions
app/assets/stylesheets/utilities.scss
View file @ 7b4abf13
......@@ -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
View file @ 7b4abf13
......@@ -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/__snapshots__/vulnerability_severity_spec.js.snap 0 → 100644
View file @ 7b4abf13
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Vulnerability Severity component when the data has loaded matches snapshot 1`] = `
<section
class="js-projects-security-status border rounded"
>
<header
class="border-bottom p-3"
>
<h4
class="my-0"
>
Project security status
<!---->
</h4>
<p
class="text-secondary m-0"
>
Projects are graded based on the highest severity vulnerability present
</p>
</header>
<div
class="px-3"
>
<ul
class="list-group list-group-flush py-2"
>
<li
class="list-group-item p-0"
>
<div
class="d-flex align-items-stretch"
>
<button
aria-controls="gl-accordion-item-content-container-25"
class="btn-transparent border-0 rounded-0 w-100 p-0 text-left cursor-default"
disabled="disabled"
id="gl-accordion-item-trigger-24"
type="button"
>
<div
class="d-flex align-items-center p-2"
>
<svg
aria-hidden="true"
class="mr-2 gl-text-gray-900 s16 ic-angle-right"
>
<use
xlink:href="#angle-right"
/>
</svg>
<span>
<h5
class="d-flex align-items-center font-weight-normal p-0 m-0"
>
<span
class="font-weight-bold mr-3 gl-font-size-16 gl-text-red-900"
>
F
</span>
<span
class="text-secondary"
>
0 projects
</span>
</h5>
</span>
</div>
</button>
</div>
<div
aria-labelledby="gl-accordion-item-trigger-24"
id="gl-accordion-item-content-container-25"
role="region"
style="display: none;"
>
<p
class="m-0 ml-5 pb-1 text-secondary"
>
</p>
<div
style="max-height: 445px; overflow: auto;"
>
<div
class="ml-5 pb-2"
>
<ul
class="list-unstyled py-1"
/>
</div>
</div>
</div>
</li>
<li
class="list-group-item p-0"
>
<div
class="d-flex align-items-stretch"
>
<button
aria-controls="gl-accordion-item-content-container-27"
class="btn-transparent border-0 rounded-0 w-100 p-0 text-left cursor-default"
disabled="disabled"
id="gl-accordion-item-trigger-26"
type="button"
>
<div
class="d-flex align-items-center p-2"
>
<svg
aria-hidden="true"
class="mr-2 gl-text-gray-900 s16 ic-angle-right"
>
<use
xlink:href="#angle-right"
/>
</svg>
<span>
<h5
class="d-flex align-items-center font-weight-normal p-0 m-0"
>
<span
class="font-weight-bold mr-3 gl-font-size-16 gl-text-red-700"
>
D
</span>
<span
class="text-secondary"
>
0 projects
</span>
</h5>
</span>
</div>
</button>
</div>
<div
aria-labelledby="gl-accordion-item-trigger-26"
id="gl-accordion-item-content-container-27"
role="region"
style="display: none;"
>
<p
class="m-0 ml-5 pb-1 text-secondary"
>
</p>
<div
style="max-height: 445px; overflow: auto;"
>
<div
class="ml-5 pb-2"
>
<ul
class="list-unstyled py-1"
/>
</div>
</div>
</div>
</li>
<li
class="list-group-item p-0"
>
<div
class="d-flex align-items-stretch"
>
<button
aria-controls="gl-accordion-item-content-container-29"
class="btn-transparent border-0 rounded-0 w-100 p-0 text-left cursor-default"
disabled="disabled"
id="gl-accordion-item-trigger-28"
type="button"
>
<div
class="d-flex align-items-center p-2"
>
<svg
aria-hidden="true"
class="mr-2 gl-text-gray-900 s16 ic-angle-right"
>
<use
xlink:href="#angle-right"
/>
</svg>
<span>
<h5
class="d-flex align-items-center font-weight-normal p-0 m-0"
>
<span
class="font-weight-bold mr-3 gl-font-size-16 gl-text-orange-600"
>
C
</span>
<span
class="text-secondary"
>
0 projects
</span>
</h5>
</span>
</div>
</button>
</div>
<div
aria-labelledby="gl-accordion-item-trigger-28"
id="gl-accordion-item-content-container-29"
role="region"
style="display: none;"
>
<p
class="m-0 ml-5 pb-1 text-secondary"
>
</p>
<div
style="max-height: 445px; overflow: auto;"
>
<div
class="ml-5 pb-2"
>
<ul
class="list-unstyled py-1"
/>
</div>
</div>
</div>
</li>
<li
class="list-group-item p-0"
>
<div
class="d-flex align-items-stretch"
>
<button
aria-controls="gl-accordion-item-content-container-31"
class="btn-transparent border-0 rounded-0 w-100 p-0 text-left cursor-default"
disabled="disabled"
id="gl-accordion-item-trigger-30"
type="button"
>
<div
class="d-flex align-items-center p-2"
>
<svg
aria-hidden="true"
class="mr-2 gl-text-gray-900 s16 ic-angle-right"
>
<use
xlink:href="#angle-right"
/>
</svg>
<span>
<h5
class="d-flex align-items-center font-weight-normal p-0 m-0"
>
<span
class="font-weight-bold mr-3 gl-font-size-16 gl-text-orange-400"
>
B
</span>
<span
class="text-secondary"
>
0 projects
</span>
</h5>
</span>
</div>
</button>
</div>
<div
aria-labelledby="gl-accordion-item-trigger-30"
id="gl-accordion-item-content-container-31"
role="region"
style="display: none;"
>
<p
class="m-0 ml-5 pb-1 text-secondary"
>
</p>
<div
style="max-height: 445px; overflow: auto;"
>
<div
class="ml-5 pb-2"
>
<ul
class="list-unstyled py-1"
/>
</div>
</div>
</div>
</li>
<li
class="list-group-item p-0"
>
<div
class="d-flex align-items-stretch"
>
<button
aria-controls="gl-accordion-item-content-container-33"
class="btn-transparent border-0 rounded-0 w-100 p-0 text-left cursor-default"
disabled="disabled"
id="gl-accordion-item-trigger-32"
type="button"
>
<div
class="d-flex align-items-center p-2"
>
<svg
aria-hidden="true"
class="mr-2 gl-text-gray-900 s16 ic-angle-right"
>
<use
xlink:href="#angle-right"
/>
</svg>
<span>
<h5
class="d-flex align-items-center font-weight-normal p-0 m-0"
>
<span
class="font-weight-bold mr-3 gl-font-size-16 gl-text-green-500"
>
A
</span>
<span
class="text-secondary"
>
0 projects
</span>
</h5>
</span>
</div>
</button>
</div>
<div
aria-labelledby="gl-accordion-item-trigger-32"
id="gl-accordion-item-content-container-33"
role="region"
style="display: none;"
>
<p
class="m-0 ml-5 pb-1 text-secondary"
>
</p>
<div
style="max-height: 445px; overflow: auto;"
>
<div
class="ml-5 pb-2"
>
<ul
class="list-unstyled py-1"
/>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
`;
ee/spec/frontend/security_dashboard/components/vulnerability_severity_spec.js
View file @ 7b4abf13
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];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7