Skip to content

G
gitlab-ce
Commit 44fcb4ee authored by Alexander Turinske's avatar Alexander Turinske
Browse files
Options

Refactor compnent to not use gl-avatar 

- gl-avatar features were not needed to display a letter
- use span instead
- update tests
parent fb236051
Show whitespace changes
Inline Side-by-side
Showing with 436 additions and 27 deletions
ee/app/assets/javascripts/security_dashboard/components/vulnerability_severity.vue
View file @ 44fcb4ee
...@@ -6,7 +6,7 @@ import { ...@@ -6,7 +6,7 @@ import {
} from 'ee/security_dashboard/store/modules/vulnerable_projects/constants'; } from 'ee/security_dashboard/store/modules/vulnerable_projects/constants';
import { mapActions, mapGetters, mapState } from 'vuex'; 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 { Accordion, AccordionItem } from 'ee/vue_shared/components/accordion';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
}, },
}, },
accordionItemsContentMaxHeight: '445px', accordionItemsContentMaxHeight: '445px',
components: { Accordion, AccordionItem, GlLink, GlAvatar, Icon }, components: { Accordion, AccordionItem, GlLink, Icon },
directives: { directives: {
'gl-tooltip': GlTooltipDirective, 'gl-tooltip': GlTooltipDirective,
}, },
...@@ -58,7 +58,7 @@ export default { ...@@ -58,7 +58,7 @@ export default {
return projects && projects.length < 1; return projects && projects.length < 1;
}, },
cssForSeverityGroup({ type }) { cssForSeverityGroup({ type }) {
return [...this.$options.css.severityGroups[type], 'bg-transparent']; return this.$options.css.severityGroups[type];
}, },
cssForMostSevereVulnerability({ level }) { cssForMostSevereVulnerability({ level }) {
return this.$options.css.severityLevels[level] || []; return this.$options.css.severityLevels[level] || [];
...@@ -100,15 +100,14 @@ export default { ...@@ -100,15 +100,14 @@ export default {
> >
<template #title="{ isExpanded, isDisabled }" <template #title="{ isExpanded, isDisabled }"
><h5 class="d-flex align-items-center font-weight-normal p-0 m-0"> ><h5 class="d-flex align-items-center font-weight-normal p-0 m-0">
<gl-avatar <span
v-gl-tooltip v-gl-tooltip
:title="severityGroup.description" :title="severityGroup.description"
:entity-name="severityGroup.type" class="font-weight-bold mr-3 gl-font-size-16"
shape="circle"
:size="32"
class="mr-2 border-0 font-weight-bold"
:class="cssForSeverityGroup(severityGroup)" :class="cssForSeverityGroup(severityGroup)"
/> >
{{ severityGroup.type }}
</span>
<span :class="{ 'font-weight-bold': isExpanded, 'text-secondary': isDisabled }"> <span :class="{ 'font-weight-bold': isExpanded, 'text-secondary': isDisabled }">
{{ n__('%d project', '%d projects', severityGroup.projects.length) }} {{ n__('%d project', '%d projects', severityGroup.projects.length) }}
</span> </span>
......
ee/spec/frontend/security_dashboard/components/__snapshots__/vulnerability_severity_spec.js.snap 0 → 100644
View file @ 44fcb4ee
// 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="gl-text-red-900 font-weight-bold mr-3 gl-font-size-16"
>
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="gl-text-red-700 font-weight-bold mr-3 gl-font-size-16"
>
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="gl-text-orange-600 font-weight-bold mr-3 gl-font-size-16"
>
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="gl-text-orange-400 font-weight-bold mr-3 gl-font-size-16"
>
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="gl-text-green-500 font-weight-bold mr-3 gl-font-size-16"
>
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 @ 44fcb4ee
import Vuex from 'vuex'; import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils'; 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 { trimText } from 'helpers/text_helper';
import { Accordion, AccordionItem } from 'ee/vue_shared/components/accordion'; import { Accordion, AccordionItem } from 'ee/vue_shared/components/accordion';
import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue'; import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
import { severityGroupTypes } from 'ee/security_dashboard/store/modules/vulnerable_projects/constants';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -24,13 +25,11 @@ describe('Vulnerability Severity component', () => { ...@@ -24,13 +25,11 @@ describe('Vulnerability Severity component', () => {
mostSevereVulnerability: { level: 'qux', count: 10 }, mostSevereVulnerability: { level: 'qux', count: 10 },
}); });
const getMockSeverityGroups = ({ projects = [] } = {}) => ({ const getMockSeverityGroups = ({ projects = [] } = {}) =>
A: { type: 'A', projects }, Object.keys(severityGroupTypes).reduce((acc, curr) => {
B: { type: 'B', projects }, acc[curr] = { type: curr, projects };
D: { type: 'D', projects }, return acc;
E: { type: 'E', projects }, }, {});
F: { type: 'F', projects },
});
const factory = () => { const factory = () => {
const state = { const state = {
...@@ -71,8 +70,7 @@ describe('Vulnerability Severity component', () => { ...@@ -71,8 +70,7 @@ describe('Vulnerability Severity component', () => {
const accordion = () => wrapper.find(Accordion); const accordion = () => wrapper.find(Accordion);
const accordionItems = () => wrapper.findAll(AccordionItem); const accordionItems = () => wrapper.findAll(AccordionItem);
const firstAccordionItem = () => accordionItems().at(0); const firstAccordionItem = () => accordionItems().at(0);
const accordionItemForSeverityGroup = groupName =>
wrapper.find({ ref: `accordionItem${groupName}` });
const hasAccordionItemForEachSeverityLevel = () => const hasAccordionItemForEachSeverityLevel = () =>
expect(accordionItems().length).toBe(Object.keys(getMockSeverityGroups()).length); expect(accordionItems().length).toBe(Object.keys(getMockSeverityGroups()).length);
...@@ -111,6 +109,9 @@ describe('Vulnerability Severity component', () => { ...@@ -111,6 +109,9 @@ describe('Vulnerability Severity component', () => {
}); });
describe('when the data has loaded', () => { describe('when the data has loaded', () => {
it('matches snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('contains an accordion', () => { it('contains an accordion', () => {
expect(accordion().exists()).toBe(true); expect(accordion().exists()).toBe(true);
}); });
...@@ -135,14 +136,6 @@ describe('Vulnerability Severity component', () => { ...@@ -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', () => { it('links to a given project', () => {
const mockProject = getMockProject(); const mockProject = getMockProject();
store.state.vulnerableProjects.projects = [mockProject]; 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