Render table types on generic vulnerability report

This commit adds the capability to render `table` types on the
generic vulnerability report section. It will show up on both the
pipeline tab and vulnerability report.

Changelog: added
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/62546
EE: true

ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_section.vue

@@ -61,7 +61,7 @@ export default {
       <div class="generic-report-container" data-testid="reports">
         <template v-for="[label, item] in detailsEntries">
           <div :key="label" class="generic-report-row" :data-testid="`report-row-${label}`">
-            <strong class="generic-report-column">{{ item.name }}</strong>
+            <strong class="generic-report-column">{{ item.name || label }}</strong>
             <div class="generic-report-column" data-testid="reportContent">
               <report-item :item="item" :data-testid="`report-item-${label}`" />
             </div>

ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/constants.js

@@ -9,6 +9,7 @@ export const REPORT_TYPES = {
   value: 'value',
   moduleLocation: 'module-location',
   fileLocation: 'file-location',
+  table: 'table',
 };
 
 const REPORT_TYPE_TO_COMPONENT_MAP = {
@@ -20,6 +21,7 @@ const REPORT_TYPE_TO_COMPONENT_MAP = {
   [REPORT_TYPES.value]: () => import('./value.vue'),
   [REPORT_TYPES.moduleLocation]: () => import('./module_location.vue'),
   [REPORT_TYPES.fileLocation]: () => import('./file_location.vue'),
+  [REPORT_TYPES.table]: () => import('./table.vue'),
 };
 
 export const getComponentNameForType = (reportType) =>

ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/table.vue

+<script>
+import { GlTable } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlTable,
+    ReportItem: () => import('../report_item.vue'),
+  },
+  inheritAttrs: false,
+  props: {
+    header: {
+      type: Array,
+      required: true,
+    },
+    rows: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    fields() {
+      const addKey = (headerItem, index) => ({
+        ...headerItem,
+        key: this.getKeyForIndex(index),
+      });
+
+      return this.header.map(addKey);
+    },
+    items() {
+      const getCellEntry = (cell, index) => [this.getKeyForIndex(index), cell];
+      const cellsArrayToObject = (cells) => Object.fromEntries(cells.map(getCellEntry));
+
+      return this.rows.map(cellsArrayToObject);
+    },
+  },
+  methods: {
+    getKeyForIndex(index) {
+      return `column_${index}`;
+    },
+  },
+};
+</script>
+<template>
+  <gl-table
+    :items="items"
+    :fields="fields"
+    bordered
+    borderless
+    thead-class="gl-border-t-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
+  >
+    <template #head()="data">
+      <report-item :item="data.field" />
+    </template>
+    <template #cell()="data">
+      <report-item :item="data.value" />
+    </template>
+  </gl-table>
+</template>

ee/spec/frontend/vulnerabilities/generic_report/report_section_spec.js

@@ -16,10 +16,15 @@ const TEST_DATA = {
       type: REPORT_TYPES.url,
       href: 'http://bar.com',
     },
+    three: {
+      type: REPORT_TYPES.table,
+      header: [],
+      rows: [],
+    },
   },
   unsupportedTypes: {
-    three: {
-      name: 'three',
+    four: {
+      name: 'four',
       type: 'not-supported',
     },
   },
@@ -32,7 +37,7 @@ describe('ee/vulnerabilities/components/generic_report/report_section.vue', () =
     extendedWrapper(
       mount(ReportSection, {
         propsData: {
-          details: { ...TEST_DATA.supportedTypes },
+          details: { ...TEST_DATA.supportedTypes, ...TEST_DATA.unsupportedTypes },
         },
         ...options,
       }),

ee/spec/frontend/vulnerabilities/generic_report/types/table_spec.js

+import { GlTable } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import ReportItem from 'ee/vulnerabilities/components/generic_report/report_item.vue';
+import { REPORT_TYPES } from 'ee/vulnerabilities/components/generic_report/types/constants';
+import Table from 'ee/vulnerabilities/components/generic_report/types/table.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+
+const TEST_DATA = {
+  header: [{ type: REPORT_TYPES.text, value: 'foo ' }],
+  rows: [[{ type: REPORT_TYPES.url, href: 'bar' }]],
+};
+
+describe('ee/vulnerabilities/components/generic_report/types/table.vue', () => {
+  let wrapper;
+
+  const createWrapper = () => {
+    return extendedWrapper(
+      mount(Table, {
+        propsData: {
+          ...TEST_DATA,
+        },
+        stubs: {
+          'report-item': ReportItem,
+        },
+      }),
+    );
+  };
+
+  const findTable = () => wrapper.findComponent(GlTable);
+  const findTableHead = () => wrapper.find('thead');
+  const findTableBody = () => wrapper.find('tbody');
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a table', () => {
+    expect(findTable().exists()).toBe(true);
+  });
+
+  it('renders a table header containing the given report type', () => {
+    expect(findTableHead().findComponent(ReportItem).props('item')).toMatchObject(
+      TEST_DATA.header[0],
+    );
+  });
+
+  it('renders a table cell containing the given report type', () => {
+    expect(findTableBody().findComponent(ReportItem).props('item')).toMatchObject(
+      TEST_DATA.rows[0][0],
+    );
+  });
+});