Merge branch...

Merge branch '327380-fe-generic-report-schema-render-table-type-on-vulnerability-details-page' into 'master'

Generic Report Schema: Render 'table' type on vulnerability details page

See merge request gitlab-org/gitlab!62546

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,
+    },
+  },
+};
+</script>
+<template>
+  <gl-table
+    :fields="header"
+    :items="rows"
+    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/app/assets/javascripts/vulnerabilities/components/generic_report/types/utils.js

@@ -18,13 +18,21 @@ const isSupportedType = ({ type }) => Object.values(REPORT_TYPES).includes(type)
 const isOfType = (typeToCheck) => ({ type }) => type === typeToCheck;
 
 /**
- * Check if the given report is of type list
+ * Check if the given report is of type 'list'
  *
  * @param {{ type: string } } reportItem
  * @returns boolean
  */
 export const isOfTypeList = isOfType(REPORT_TYPES.list);
 
+/**
+ * Check if the given report is of type 'table'
+ *
+ * @param {{ type: string } } reportItem
+ * @returns boolean
+ */
+const isOfTypeTable = isOfType(REPORT_TYPES.table);
+
 /**
  * Check if the given report is of type named-list
  *
@@ -122,6 +130,40 @@ const transformItemsIntoArray = (items) => {
   return Object.entries(items).map(([label, value]) => ({ ...value, label }));
 };
 
+/**
+ * Takes a report item's entry and transforms each item of type `table` in the following ways:
+ *
+ * 1. Adds a index-based key to each header-item (eg.: ` { key: column_0, ...headerData }`)
+ * 2. Transforms each item within the `rows` array into an object where each item's key corresponds
+ *    to it's header's key
+ *    (e.g: `rows: [
+ *      [{ column_0: {...cellData }}]
+ *    ]`)
+ *
+ *  This prepares the data to be rendered into a table.
+ *
+ * @param [String, {*}] report entry
+ * @returns [String, {*}]
+ */
+const transformTableItems = ([label, item]) => {
+  const newItem = isOfTypeTable(item)
+    ? {
+        ...item,
+        header: item.header.map((headerItem, index) => ({
+          ...headerItem,
+          key: `column_${index}`,
+        })),
+        rows: item.rows.map((row) => {
+          const getCellEntry = (cell, index) => [`column_${index}`, cell];
+          // transforms the array into an object with `column_N` as keys
+          return Object.fromEntries(row.map(getCellEntry));
+        }),
+      }
+    : item;
+
+  return [label, newItem];
+};
+
 /**
  * Takes a vulnerabilities details object - containing generic report data
  * Returns a copy of the report data with the following items being filtered:
@@ -143,6 +185,7 @@ export const filterTypesAndLimitListDepth = (data, { maxDepth = 5 } = {}) => {
       flow([
         filterNestedListsItems(filterCriteria),
         overEveryNamedListItem(flow([filterTypesAndLimitListDepth, transformItemsIntoArray])),
+        transformTableItems,
       ]),
     );
 

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: [{ key: 'column_1', type: REPORT_TYPES.text, value: 'foo ' }],
+  rows: [
+    {
+      column_1: { 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].column_1,
+    );
+  });
+});

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

@@ -49,6 +49,19 @@ const TEST_DATA = {
       unsupported: { type: MOCK_REPORT_TYPE_UNSUPPORTED },
     },
   },
+  table: {
+    type: REPORT_TYPES.table,
+    header: [
+      { type: REPORT_TYPES.text, value: 'foo ' },
+      { type: REPORT_TYPES.text, value: 'bar ' },
+    ],
+    rows: [
+      [
+        { type: REPORT_TYPES.text, value: 'foo' },
+        { type: REPORT_TYPES.text, value: 'bar' },
+      ],
+    ],
+  },
 };
 
 describe('ee/vulnerabilities/components/generic_report/types/utils', () => {
@@ -94,5 +107,20 @@ describe('ee/vulnerabilities/components/generic_report/types/utils', () => {
         ]);
       });
     });
+
+    describe('with tables', () => {
+      const filteredData = filterTypesAndLimitListDepth(TEST_DATA);
+
+      it('adds a key to each header item', () => {
+        expect(filteredData.table.header).toMatchObject([{ key: 'column_0' }, { key: 'column_1' }]);
+      });
+
+      it(`transforms the "rows" array into an object with it's keys corresponding to the header keys`, () => {
+        expect(filteredData.table.rows[0]).toMatchObject({
+          column_0: TEST_DATA.table.rows[0][0],
+          column_1: TEST_DATA.table.rows[0][1],
+        });
+      });
+    });
   });
 });