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 {
} 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/__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 { 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