Merge branch '327382-render-value-type' into 'master'

Add text generic report type

See merge request gitlab-org/gitlab!61727

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

@@ -5,6 +5,8 @@ export const REPORT_TYPES = {
   url: 'url',
   diff: 'diff',
   namedList: 'named-list',
+  text: 'text',
+  value: 'value',
 };
 
 const REPORT_TYPE_TO_COMPONENT_MAP = {
@@ -12,6 +14,8 @@ const REPORT_TYPE_TO_COMPONENT_MAP = {
   [REPORT_TYPES.url]: () => import('./url.vue'),
   [REPORT_TYPES.diff]: () => import('./diff.vue'),
   [REPORT_TYPES.namedList]: () => import('./named_list.vue'),
+  [REPORT_TYPES.text]: () => import('./value.vue'),
+  [REPORT_TYPES.value]: () => import('./value.vue'),
 };
 
 export const getComponentNameForType = (reportType) =>

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

+<script>
+export default {
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, Number, Boolean],
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <span>{{ value }}</span>
+</template>

ee/changelogs/unreleased/327382-render-value-type.yml

+---
+title: Render text and value generic report types on vulnerability report
+merge_request: 61727
+author:
+type: added

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

@@ -17,6 +17,14 @@ const TEST_DATA = {
     before: 'foo',
     after: 'bar',
   },
+  [REPORT_TYPES.text]: {
+    name: 'some-string-field',
+    value: 'some-value',
+  },
+  [REPORT_TYPES.value]: {
+    name: 'some-numeric-field',
+    value: 15,
+  },
 };
 
 describe('ee/vulnerabilities/components/generic_report/report_item.vue', () => {

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

+import { shallowMount } from '@vue/test-utils';
+import Text from 'ee/vulnerabilities/components/generic_report/types/value.vue';
+
+describe('ee/vulnerabilities/components/generic_report/types/value.vue', () => {
+  let wrapper;
+
+  describe.each`
+    field type   | value
+    ${'string'}  | ${'some string'}
+    ${'number'}  | ${8}
+    ${'boolean'} | ${true}
+    ${'boolean'} | ${false}
+  `('with value of type "$fieldType"', ({ fieldType, value }) => {
+    const createWrapper = () => {
+      return shallowMount(Text, {
+        propsData: {
+          type: 'text',
+          name: `${fieldType} field`,
+          value,
+        },
+      });
+    };
+
+    beforeEach(() => {
+      wrapper = createWrapper();
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it(`renders ${fieldType} type`, () => {
+      expect(wrapper.text()).toBe(value.toString());
+    });
+  });
+});