Merge branch...

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

Show generic 'code' type on vuln details

See merge request gitlab-org/gitlab!62861

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

+<script>
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+
+export default {
+  components: {
+    CodeBlock,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <code-block :code="value" />
+</template>

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

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

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

@@ -6,24 +6,25 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 const TEST_DATA = {
   supportedTypes: {
-    one: {
-      name: 'one',
+    url: {
+      name: 'url',
       type: REPORT_TYPES.url,
       href: 'http://foo.com',
     },
-    two: {
-      name: 'two',
-      type: REPORT_TYPES.url,
-      href: 'http://bar.com',
-    },
-    three: {
+    table: {
+      name: 'table',
       type: REPORT_TYPES.table,
       header: [],
       rows: [],
     },
+    code: {
+      name: 'code',
+      type: REPORT_TYPES.code,
+      value: '<h1>Foo</h1>',
+    },
   },
   unsupportedTypes: {
-    four: {
+    unsupported: {
       name: 'four',
       type: 'not-supported',
     },

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

+import { shallowMount } from '@vue/test-utils';
+import Code from 'ee/vulnerabilities/components/generic_report/types/code.vue';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+
+const TEST_DATA = {
+  value: '<h1>Foo</h1>',
+};
+
+describe('ee/vulnerabilities/components/generic_report/types/code.vue', () => {
+  let wrapper;
+
+  const createWrapper = () => {
+    return shallowMount(Code, {
+      propsData: {
+        ...TEST_DATA,
+      },
+    });
+  };
+
+  const findCodeBlock = () => wrapper.findComponent(CodeBlock);
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a code-block', () => {
+    expect(findCodeBlock().exists()).toBe(true);
+  });
+
+  it('passes the given value to the code-block component', () => {
+    expect(findCodeBlock().props('code')).toBe(TEST_DATA.value);
+  });
+});