Update security dashboard scanner columns

- update display values to be human readable
- add utility function to convert report types
- add additional tests
- update changelog

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

@@ -6,6 +6,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import VulnerabilityActionButtons from './vulnerability_action_buttons.vue';
 import VulnerabilityIssueLink from './vulnerability_issue_link.vue';
 import { DASHBOARD_TYPES } from '../store/constants';
+import convertReportType from 'ee/vue_shared/security_reports/store/utils/convert_report_type';
 import getPrimaryIdentifier from 'ee/vue_shared/security_reports/store/utils/get_primary_identifier';
 
 export default {
@@ -47,10 +48,6 @@ export default {
       }
       return location && (location.image || location.file || location.path);
     },
-    vulnerabilityScanner() {
-      const { scanner } = this.vulnerability;
-      return scanner?.name;
-    },
     isDismissed() {
       return Boolean(this.vulnerability.dismissal_feedback);
     },
@@ -70,6 +67,9 @@ export default {
     isSelected() {
       return Boolean(this.selectedVulnerabilities[this.vulnerability.id]);
     },
+    useConvertReportType() {
+      return convertReportType(this.vulnerability.report_type);
+    },
   },
   methods: {
     ...mapActions('vulnerabilities', ['openModal', 'selectVulnerability', 'deselectVulnerability']),
@@ -152,8 +152,8 @@ export default {
 
     <div class="table-section section-15">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Scanner') }}</div>
-      <div class="table-mobile-content">
-        {{ vulnerabilityScanner }}
+      <div class="table-mobile-content text-capitalize">
+        {{ useConvertReportType }}
       </div>
     </div>
 

ee/app/assets/javascripts/vue_shared/security_reports/store/utils/convert_report_type.js

+import { REPORT_TYPES } from 'ee/security_dashboard/store/constants';
+
+/**
+ * Takes the report type, that is not human-readable and converts it to be human-readable
+ * @param {string} reportType that is not human-readable
+ * @returns {string} the conversion from REPORT_TYPES or a lowercase version without '_' in it to
+ *                   be paired with the CSS class `text-capitalize`
+ */
+const convertReportType = reportType => {
+  if (!reportType) return '';
+  const lowerCaseType = reportType.toLowerCase();
+  return REPORT_TYPES[lowerCaseType] || lowerCaseType.split('_').join(' ');
+};
+
+export default convertReportType;

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

@@ -6,6 +6,7 @@ import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_ba
 import SelectionSummary from 'ee/security_dashboard/components/selection_summary.vue';
 import IssueLink from './issue_link.vue';
 import { VULNERABILITIES_PER_PAGE } from '../constants';
+import convertReportType from 'ee/vue_shared/security_reports/store/utils/convert_report_type';
 
 export default {
   name: 'VulnerabilityList',
@@ -156,6 +157,9 @@ export default {
     issue(item) {
       return item.issueLinks?.nodes[0]?.issue;
     },
+    useConvertReportType(reportType) {
+      return convertReportType(reportType);
+    },
   },
   VULNERABILITIES_PER_PAGE,
 };
@@ -230,7 +234,9 @@ export default {
       </template>
 
       <template #cell(reportType)="{ item }">
-        <span class="text-capitalize js-reportType">{{ item.reportType }}</span>
+        <span class="text-capitalize js-reportType">{{
+          useConvertReportType(item.reportType)
+        }}</span>
       </template>
 
       <template #table-busy>

ee/changelogs/unreleased/add-scanner-name-to-row.yml

 ---
-title: Add scanner name to vulnerability row
-merge_request: 31775
+title: Add scanner type to vulnerability row
+merge_request: 35150
 author:
 type: changed

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

@@ -81,12 +81,12 @@ describe('Security Dashboard Table Row', () => {
       expect(findContent(2).text()).toContain(vulnerability.identifiers[0].name);
     });
 
-    it('should render the scanner name', () => {
+    it('should render the report type', () => {
       expect(
         findContent(2)
           .text()
           .toLowerCase(),
-      ).toContain(wrapper.props().vulnerability.scanner.name.toLowerCase());
+      ).toContain(wrapper.props().vulnerability.report_type.toLowerCase());
     });
 
     describe('the project name', () => {

ee/spec/frontend/vue_shared/security_reports/store/utils_spec.js

@@ -5,6 +5,7 @@ import {
   countVulnerabilities,
   groupedReportText,
 } from 'ee/vue_shared/security_reports/store/utils';
+import convertReportType from 'ee/vue_shared/security_reports/store/utils/convert_report_type';
 import filterByKey from 'ee/vue_shared/security_reports/store/utils/filter_by_key';
 import getFileLocation from 'ee/vue_shared/security_reports/store/utils/get_file_location';
 import {
@@ -44,6 +45,20 @@ describe('security reports utils', () => {
     });
   });
 
+  describe('convertReportType', () => {
+    it.each([
+      ['sast', 'SAST'],
+      ['dependency_scanning', 'Dependency Scanning'],
+      ['CONTAINER_SCANNING', 'Container Scanning'],
+      ['CUSTOM_SCANNER', 'custom scanner'],
+      ['mast', 'mast'],
+      ['TAST', 'tast'],
+      [undefined, ''],
+    ])('converts the report type "%s" to the human-readable string "%s"', (input, output) => {
+      expect(convertReportType(input)).toEqual(output);
+    });
+  });
+
   describe('filterByKey', () => {
     it('filters the array with the provided key', () => {
       const array1 = [{ id: '1234' }, { id: 'abg543' }, { id: '214swfA' }];

ee/spec/frontend/vulnerabilities/mock_data.js

 export const generateVulnerabilities = () => [
   {
     id: 'id_0',
-    title: 'Vulnerability 1',
+    title: 'Vulnerability 0',
     severity: 'critical',
     state: 'dismissed',
-    reportType: 'sast',
+    reportType: 'SAST',
     location: {
       image:
         'registry.gitlab.com/groulot/container-scanning-test/master:5f21de6956aee99ddb68ae49498662d9872f50ff',
@@ -15,10 +15,10 @@ export const generateVulnerabilities = () => [
   },
   {
     id: 'id_1',
-    title: 'Vulnerability 2',
+    title: 'Vulnerability 1',
     severity: 'high',
     state: 'opened',
-    reportType: 'sast',
+    reportType: 'DEPENDENCY_SCANNING',
     location: {
       file: 'src/main/java/com/gitlab/security_products/tests/App.java',
     },
@@ -26,6 +26,31 @@ export const generateVulnerabilities = () => [
       nameWithNamespace: 'Administrator / Vulnerability reports',
     },
   },
+  {
+    id: 'id_2',
+    title: 'Vulnerability 2',
+    severity: 'high',
+    state: 'opened',
+    reportType: 'CUSTOM_SCANNER_WITHOUT_TRANSLATION',
+    location: {
+      file: 'yarn.lock',
+    },
+    project: {
+      nameWithNamespace: 'Mixed Vulnerabilities / Dependency List Test 01',
+    },
+  },
+  {
+    id: 'id_3',
+    title: 'Vulnerability 3',
+    severity: 'high',
+    state: 'opened',
+    location: {
+      file: 'yarn.lock',
+    },
+    project: {
+      nameWithNamespace: 'Mixed Vulnerabilities / Dependency List Test 01',
+    },
+  },
 ];
 
 export const vulnerabilities = generateVulnerabilities();

ee/spec/frontend/vulnerabilities/vulnerability_list_spec.js

@@ -29,6 +29,7 @@ describe('Vulnerability list component', () => {
   };
 
   const findCell = label => wrapper.find(`.js-${label}`);
+  const findCells = label => wrapper.findAll(`.js-${label}`);
   const findRow = (index = 0) => wrapper.findAll('tbody tr').at(index);
   const findSelectionSummary = () => wrapper.find(SelectionSummary);
   const findCheckAllCheckboxCell = () => wrapper.find('thead tr th');
@@ -64,8 +65,11 @@ describe('Vulnerability list component', () => {
     });
 
     it('should correctly render the scanner type', () => {
-      const cell = findCell('reportType');
-      expect(cell.text().toLowerCase()).toBe(newVulnerabilities[0].reportType);
+      const cells = findCells('reportType');
+      expect(cells.wrappers[0].text()).toBe('SAST');
+      expect(cells.wrappers[1].text()).toBe('Dependency Scanning');
+      expect(cells.wrappers[2].text()).toBe('custom scanner without translation');
+      expect(cells.wrappers[3].text()).toBe('');
     });
 
     it('should correctly render the description', () => {