Commit 3c698738 authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch '213743-display-comment-icon-on-vulnerability-list' into 'master'

Display comment icon on vulnerability list

See merge request gitlab-org/gitlab!35863
parents 9d2f691a 66407fc9
<script>
import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
export default {
components: {
GlIcon,
GlLink,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
vulnerability: {
type: Object,
required: true,
},
},
};
</script>
<template>
<gl-link
v-gl-tooltip="s__('Vulnerability|Comments')"
:href="vulnerability.vulnerabilityPath"
:data-testid="`vulnerability-comments-${vulnerability.id}`"
class="gl-display-inline-flex gl-align-items-center gl-ml-3 gl-flex-shrink-0 gl-text-black-normal"
>
<gl-icon name="comment" />
</gl-link>
</template>
......@@ -5,6 +5,7 @@ import RemediatedBadge from './remediated_badge.vue';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
import SelectionSummary from 'ee/security_dashboard/components/selection_summary.vue';
import IssueLink from './issue_link.vue';
import VulnerabilityCommentIcon from 'ee/security_dashboard/components/vulnerability_comment_icon.vue';
import { VULNERABILITIES_PER_PAGE } from '../constants';
import convertReportType from 'ee/vue_shared/security_reports/store/utils/convert_report_type';
......@@ -20,6 +21,7 @@ export default {
RemediatedBadge,
SelectionSummary,
SeverityBadge,
VulnerabilityCommentIcon,
},
props: {
dashboardDocumentation: {
......@@ -165,6 +167,9 @@ export default {
issue(item) {
return item.issueLinks?.nodes[0]?.issue;
},
hasComments(item) {
return item.userNotesCount > 0;
},
useConvertReportType(reportType) {
return convertReportType(reportType);
},
......@@ -217,7 +222,9 @@ export default {
</template>
<template #cell(title)="{ item }">
<div class="d-flex flex-column flex-sm-row align-items-end align-items-sm-start">
<div
class="gl-display-flex gl-flex-direction-column flex-sm-row gl-align-items-end align-items-sm-center"
>
<gl-link
class="text-body js-description"
:href="item.vulnerabilityPath"
......@@ -227,6 +234,7 @@ export default {
{{ item.title }}
</gl-link>
<issue-link v-if="issue(item)" :issue="issue(item)" />
<vulnerability-comment-icon v-if="hasComments(item)" :vulnerability="item" />
</div>
<div
v-if="item.location"
......
......@@ -4,6 +4,7 @@ fragment Vulnerability on Vulnerability {
state
severity
vulnerabilityPath
userNotesCount
issueLinks(linkType: CREATED) {
nodes {
issue {
......
---
title: Display comment icon on vulnerability list in Security Dashboard
merge_request: 35863
author:
type: added
......@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
import { GlEmptyState, GlSkeletonLoading } from '@gitlab/ui';
import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
import SelectionSummary from 'ee/security_dashboard/components/selection_summary.vue';
import VulnerabilityCommentIcon from 'ee/security_dashboard/components/vulnerability_comment_icon.vue';
import VulnerabilityList from 'ee/vulnerabilities/components/vulnerability_list.vue';
import { generateVulnerabilities, vulnerabilities } from './mock_data';
......@@ -31,6 +32,7 @@ describe('Vulnerability list component', () => {
const findCell = label => wrapper.find(`.js-${label}`);
const findRow = (index = 0) => wrapper.findAll('tbody tr').at(index);
const findSelectionSummary = () => wrapper.find(SelectionSummary);
const findRowVulnerabilityCommentIcon = row => findRow(row).find(VulnerabilityCommentIcon);
const findDataCell = label => wrapper.find(`[data-testid="${label}"]`);
const findDataCells = label => wrapper.findAll(`[data-testid="${label}"]`);
......@@ -213,6 +215,24 @@ describe('Vulnerability list component', () => {
});
});
describe('when has comments', () => {
let newVulnerabilities;
beforeEach(() => {
newVulnerabilities = generateVulnerabilities();
newVulnerabilities[0].userNotesCount = 1;
wrapper = createWrapper({ props: { vulnerabilities: newVulnerabilities } });
});
it('should render the comments badge on the first vulnerability', () => {
expect(findRowVulnerabilityCommentIcon(0).exists()).toBe(true);
});
it('should not render the comments badge on the second vulnerability', () => {
expect(findRowVulnerabilityCommentIcon(1).exists()).toBe(false);
});
});
describe('when a vulnerability is resolved on the default branch', () => {
let newVulnerabilities;
......
......@@ -25647,6 +25647,9 @@ msgstr ""
msgid "Vulnerability|Class"
msgstr ""
msgid "Vulnerability|Comments"
msgstr ""
msgid "Vulnerability|Crash Address"
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