Commit 6d79bfc1 authored by Savas Vedova's avatar Savas Vedova

Move the remediated badge to the activity column

- Update tests
- Update translations
- Add changelog
parent f73bb238
...@@ -164,6 +164,12 @@ export default { ...@@ -164,6 +164,12 @@ export default {
thClass: 'scanner', thClass: 'scanner',
tdClass: 'scanner', tdClass: 'scanner',
}, },
{
key: 'activity',
label: s__('Vulnerability|Activity'),
thClass: 'gl-text-right',
tdClass: 'gl-text-right',
},
]; ];
if (this.shouldShowSelection) { if (this.shouldShowSelection) {
...@@ -363,7 +369,6 @@ export default { ...@@ -363,7 +369,6 @@ export default {
</gl-link> </gl-link>
<issue-link v-if="issue(item)" :issue="issue(item)" /> <issue-link v-if="issue(item)" :issue="issue(item)" />
<vulnerability-comment-icon v-if="hasComments(item)" :vulnerability="item" /> <vulnerability-comment-icon v-if="hasComments(item)" :vulnerability="item" />
<remediated-badge v-if="item.resolvedOnDefaultBranch" class="gl-ml-3" />
</div> </div>
<div <div
v-if="item.location" v-if="item.location"
...@@ -409,6 +414,10 @@ export default { ...@@ -409,6 +414,10 @@ export default {
</div> </div>
</template> </template>
<template #cell(activity)="{ item }">
<remediated-badge v-if="item.resolvedOnDefaultBranch" class="gl-ml-3" />
</template>
<template #table-busy> <template #table-busy>
<gl-skeleton-loading <gl-skeleton-loading
v-for="n in $options.VULNERABILITIES_PER_PAGE" v-for="n in $options.VULNERABILITIES_PER_PAGE"
......
<script> <script>
import { GlDeprecatedBadge as GlBadge, GlPopover } from '@gitlab/ui'; import { GlIcon, GlPopover } from '@gitlab/ui';
export default { export default {
name: 'RemediatedBadge',
components: { components: {
GlBadge, GlIcon,
GlPopover, GlPopover,
}, },
}; };
</script> </script>
<template> <template>
<div class="d-inline-block"> <div class="gl-display-inline-block">
<gl-badge ref="badge" variant="info">{{ __('Remediated: needs review') }}</gl-badge> <span class="gl-display-inline-block gl-rounded-lg gl-bg-blue-200 gl-text-blue-500 gl-px-3">
<gl-icon ref="badge" name="admin" />
</span>
<gl-popover <gl-popover
ref="popover" ref="popover"
:content=" :content="
......
---
title: Move the remediated badge to the activity column
merge_request: 42599
author:
type: changed
...@@ -16,6 +16,7 @@ export const generateVulnerabilities = () => [ ...@@ -16,6 +16,7 @@ export const generateVulnerabilities = () => [
severity: 'critical', severity: 'critical',
state: 'dismissed', state: 'dismissed',
reportType: 'SAST', reportType: 'SAST',
resolvedOnDefaultBranch: true,
location: { location: {
image: image:
'registry.gitlab.com/groulot/container-scanning-test/master:5f21de6956aee99ddb68ae49498662d9872f50ff', 'registry.gitlab.com/groulot/container-scanning-test/master:5f21de6956aee99ddb68ae49498662d9872f50ff',
......
...@@ -42,6 +42,7 @@ describe('Vulnerability list component', () => { ...@@ -42,6 +42,7 @@ describe('Vulnerability list component', () => {
const findSortableColumn = () => wrapper.find('[aria-sort="descending"]'); const findSortableColumn = () => wrapper.find('[aria-sort="descending"]');
const findCell = label => wrapper.find(`.js-${label}`); const findCell = label => wrapper.find(`.js-${label}`);
const findRow = (index = 0) => wrapper.findAll('tbody tr').at(index); const findRow = (index = 0) => wrapper.findAll('tbody tr').at(index);
const findRemediatedBadge = () => wrapper.find(RemediatedBadge);
const findSecurityScannerAlert = () => wrapper.find(SecurityScannerAlert); const findSecurityScannerAlert = () => wrapper.find(SecurityScannerAlert);
const findDismissalButton = () => findSecurityScannerAlert().find('button[aria-label="Dismiss"]'); const findDismissalButton = () => findSecurityScannerAlert().find('button[aria-label="Dismiss"]');
const findSelectionSummary = () => wrapper.find(SelectionSummary); const findSelectionSummary = () => wrapper.find(SelectionSummary);
...@@ -83,10 +84,13 @@ describe('Vulnerability list component', () => { ...@@ -83,10 +84,13 @@ describe('Vulnerability list component', () => {
it('should correctly render the description', () => { it('should correctly render the description', () => {
const cell = findCell('description'); const cell = findCell('description');
expect(cell.text()).toBe(newVulnerabilities[0].title); expect(cell.text()).toBe(newVulnerabilities[0].title);
}); });
it('should display the remediated badge', () => {
expect(findRemediatedBadge().exists()).toBe(true);
});
it('should correctly render the identifier cell', () => { it('should correctly render the identifier cell', () => {
const identifiers = findDataCells('vulnerability-identifier'); const identifiers = findDataCells('vulnerability-identifier');
const extraIdentifierCounts = findDataCells('vulnerability-more-identifiers'); const extraIdentifierCounts = findDataCells('vulnerability-more-identifiers');
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDeprecatedBadge as GlBadge, GlPopover } from '@gitlab/ui'; import { GlIcon, GlPopover } from '@gitlab/ui';
import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue'; import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
const POPOVER_TITLE = 'Vulnerability remediated. Review before resolving.'; const POPOVER_TITLE = 'Vulnerability remediated. Review before resolving.';
...@@ -9,6 +9,8 @@ const POPOVER_CONTENT = ...@@ -9,6 +9,8 @@ const POPOVER_CONTENT =
describe('Remediated badge component', () => { describe('Remediated badge component', () => {
let wrapper; let wrapper;
const findIcon = () => wrapper.find(GlIcon);
const createWrapper = () => { const createWrapper = () => {
return shallowMount(RemediatedBadge); return shallowMount(RemediatedBadge);
}; };
...@@ -19,11 +21,13 @@ describe('Remediated badge component', () => { ...@@ -19,11 +21,13 @@ describe('Remediated badge component', () => {
afterEach(() => wrapper.destroy()); afterEach(() => wrapper.destroy());
it('should display the correct icon', () => {
expect(findIcon().props('name')).toBe('admin');
});
it('should link the badge and the popover', () => { it('should link the badge and the popover', () => {
const badge = wrapper.find(GlBadge);
const { popover } = wrapper.vm.$refs; const { popover } = wrapper.vm.$refs;
expect(popover.$attrs.target()).toEqual(findIcon().element);
expect(popover.$attrs.target()).toEqual(badge.element);
}); });
it('should pass down the data to the popover', () => { it('should pass down the data to the popover', () => {
......
...@@ -21049,9 +21049,6 @@ msgstr "" ...@@ -21049,9 +21049,6 @@ msgstr ""
msgid "Release|Something went wrong while saving the release details" msgid "Release|Something went wrong while saving the release details"
msgstr "" msgstr ""
msgid "Remediated: needs review"
msgstr ""
msgid "Remediations" msgid "Remediations"
msgstr "" msgstr ""
...@@ -28320,6 +28317,9 @@ msgstr "" ...@@ -28320,6 +28317,9 @@ msgstr ""
msgid "Vulnerability|%{scannerName} (version %{scannerVersion})" msgid "Vulnerability|%{scannerName} (version %{scannerVersion})"
msgstr "" msgstr ""
msgid "Vulnerability|Activity"
msgstr ""
msgid "Vulnerability|Class" msgid "Vulnerability|Class"
msgstr "" msgstr ""
......
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