Display comment icon on vulnerability list

This change introduces comment icon on Vulnerability List if
vulnerability has at least one comment.

ee/app/assets/javascripts/security_dashboard/components/vulnerability_comment_icon.vue

+<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>

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_list.vue

@@ -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"

ee/app/assets/javascripts/vulnerabilities/graphql/vulnerability.fragment.graphql

@@ -4,6 +4,7 @@ fragment Vulnerability on Vulnerability {
   state
   severity
   vulnerabilityPath
+  userNotesCount
   issueLinks(linkType: CREATED) {
     nodes {
       issue {

ee/changelogs/unreleased/213743-display-comment-icon-on-vulnerability-list.yml

+---
+title: Display comment icon on vulnerability list in Security Dashboard
+merge_request: 35863
+author:
+type: added

ee/spec/frontend/vulnerabilities/vulnerability_list_spec.js

@@ -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;
 

locale/gitlab.pot

@@ -25611,6 +25611,9 @@ msgstr ""
 msgid "Vulnerability|Class"
 msgstr ""
 
+msgid "Vulnerability|Comments"
+msgstr ""
+
 msgid "Vulnerability|Crash Address"
 msgstr ""