Add detected column to vulnerability list

- Update tests
- Add changelog

app/assets/stylesheets/framework/tables.scss

@@ -193,6 +193,10 @@ table {
       }
     }
 
+    .detected {
+      width: 9%;
+    }
+
     .status {
       width: 8%;
     }
@@ -202,7 +206,7 @@ table {
     }
 
     .identifier {
-      width: 12%;
+      width: 16%;
     }
 
     .scanner {

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

@@ -3,14 +3,14 @@ import { difference } from 'lodash';
 import {
   GlFormCheckbox,
   GlLink,
-  GlDeprecatedSkeletonLoading as GlSkeletonLoading,
   GlSprintf,
   GlTable,
+  GlSkeletonLoading,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
 import FiltersProducedNoResults from 'ee/security_dashboard/components/empty_states/filters_produced_no_results.vue';
 import DashboardHasNoVulnerabilities from 'ee/security_dashboard/components/empty_states/dashboard_has_no_vulnerabilities.vue';
-
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import VulnerabilityCommentIcon from 'ee/security_dashboard/components/vulnerability_comment_icon.vue';
 import IssueLink from 'ee/vulnerabilities/components/issue_link.vue';
@@ -18,6 +18,7 @@ import convertReportType from 'ee/vue_shared/security_reports/store/utils/conver
 import getPrimaryIdentifier from 'ee/vue_shared/security_reports/store/utils/get_primary_identifier';
 import SecurityScannerAlert from './security_scanner_alert.vue';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import { formatDate } from '~/lib/utils/datetime_utility';
 import { s__, __, sprintf } from '~/locale';
 import SelectionSummary from './selection_summary.vue';
 import { VULNERABILITIES_PER_PAGE } from '../store/constants';
@@ -43,6 +44,9 @@ export default {
     FiltersProducedNoResults,
     DashboardHasNoVulnerabilities,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     filters: {
       type: Object,
@@ -129,6 +133,12 @@ export default {
     },
     fields() {
       const baseFields = [
+        {
+          key: 'detected',
+          label: s__('Vulnerability|Detected'),
+          thClass: 'detected',
+          tdClass: 'detected',
+        },
         {
           key: 'state',
           label: s__('Vulnerability|Status'),
@@ -257,6 +267,12 @@ export default {
     issue(item) {
       return item.issueLinks?.nodes[0]?.issue;
     },
+    formatDate(item) {
+      return formatDate(item.detectedAt, 'yyyy-mm-dd');
+    },
+    formatDateTooltip(item) {
+      return formatDate(item.detectedAt);
+    },
     hasComments(item) {
       return item.userNotesCount > 0;
     },
@@ -320,6 +336,12 @@ export default {
         />
       </template>
 
+      <template #cell(detected)="{ item }">
+        <time v-gl-tooltip :data-testid="`detected-${item.id}`" :title="formatDateTooltip(item)">
+          {{ formatDate(item) }}
+        </time>
+      </template>
+
       <template #cell(state)="{ item }">
         <span class="text-capitalize js-status">{{ item.state.toLowerCase() }}</span>
       </template>

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

@@ -3,6 +3,7 @@ fragment Vulnerability on Vulnerability {
   title
   state
   severity
+  detectedAt
   vulnerabilityPath
   resolvedOnDefaultBranch
   userNotesCount

ee/changelogs/unreleased/230380-add-detected-column.yml

+---
+title: Add detected column with timestamp on security dashboards
+merge_request: 41092
+author:
+type: added

ee/spec/frontend/security_dashboard/components/mock_data.js

 export const generateVulnerabilities = () => [
   {
     id: 'id_0',
+    detectedAt: '2020-07-29T15:36:54Z',
     identifiers: [
       {
         externalType: 'cve',
@@ -28,6 +29,7 @@ export const generateVulnerabilities = () => [
   },
   {
     id: 'id_1',
+    detectedAt: '2020-07-22T19:31:24Z',
     identifiers: [
       {
         externalType: 'gemnasium',
@@ -51,6 +53,7 @@ export const generateVulnerabilities = () => [
   },
   {
     id: 'id_2',
+    detectedAt: '2020-08-22T20:00:12Z',
     identifiers: [],
     title: 'Vulnerability 2',
     severity: 'high',

ee/spec/frontend/security_dashboard/components/vulnerability_list_spec.js

@@ -199,6 +199,13 @@ describe('Vulnerability list component', () => {
       expect(cellText).toEqual(location.image);
     });
 
+    it('should display the detected time', () => {
+      const { id } = newVulnerabilities[1];
+      const cell = findDataCell(`detected-${id}`);
+      expect(cell.text()).toEqual(`2020-07-22`);
+      expect(cell.attributes('title')).toEqual('Jul 22, 2020 7:31pm GMT+0000');
+    });
+
     it('should display the vulnerability locations for code', () => {
       const { id, project, location } = newVulnerabilities[1];
       const cellText = findCellText(`location-${id}`);

locale/gitlab.pot

@@ -27738,6 +27738,9 @@ msgstr ""
 msgid "Vulnerability|Description"
 msgstr ""
 
+msgid "Vulnerability|Detected"
+msgstr ""
+
 msgid "Vulnerability|Evidence"
 msgstr ""