Add text generic report type

Create a generic report type component that renders strings,
numbers and booleans.

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

@@ -5,6 +5,7 @@ export const REPORT_TYPES = {
   url: 'url',
   diff: 'diff',
   namedList: 'named-list',
+  text: 'text',
 };
 
 const REPORT_TYPE_TO_COMPONENT_MAP = {
@@ -12,6 +13,7 @@ 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('./text.vue'),
 };
 
 export const getComponentNameForType = (reportType) =>

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

+<script>
+export default {
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, Number, Boolean],
+      required: true,
+    },
+  },
+  computed: {
+    printValue() {
+      if (typeof this.value === 'boolean') {
+        return this.value ? 'true' : 'false';
+      }
+
+      return this.value;
+    },
+  },
+};
+</script>
+<template>
+  <span>{{ printValue }}</span>
+</template>

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

@@ -33,6 +33,14 @@ export const isOfTypeList = isOfType(REPORT_TYPES.list);
  */
 export const isOfTypeNamedList = isOfType(REPORT_TYPES.namedList);
 
+/**
+ * Check if the given report is of type text
+ *
+ * @param {{ type: string } } reportItem
+ * @returns boolean
+ */
+export const isOfTypeText = isOfType(REPORT_TYPES.text);
+
 /**
  * Check if the current report item is of that list and is not nested deeper than the maximum depth
  *

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

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

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

+import { shallowMount } from '@vue/test-utils';
+import Text from 'ee/vulnerabilities/components/generic_report/types/text.vue';
+
+describe('ee/vulnerabilities/components/generic_report/types/text.vue', () => {
+  let wrapper;
+
+  describe.each`
+    field type   | value            | printValue
+    ${'string'}  | ${'some string'} | ${'some string'}
+    ${'number'}  | ${8}             | ${'8'}
+    ${'boolean'} | ${true}          | ${'true'}
+    ${'boolean'} | ${false}         | ${'false'}
+  `('with data for $card', ({ fieldType, value, printValue }) => {
+    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(printValue);
+    });
+  });
+});