Add module-name component for generic security reports

* Add component
* Add unit tests

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

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

@@ -7,6 +7,7 @@ export const REPORT_TYPES = {
   namedList: 'named-list',
   text: 'text',
   value: 'value',
+  moduleLocation: 'module-location',
 };
 
 const REPORT_TYPE_TO_COMPONENT_MAP = {
@@ -16,6 +17,7 @@ const REPORT_TYPE_TO_COMPONENT_MAP = {
   [REPORT_TYPES.namedList]: () => import('./named_list.vue'),
   [REPORT_TYPES.text]: () => import('./value.vue'),
   [REPORT_TYPES.value]: () => import('./value.vue'),
+  [REPORT_TYPES.moduleLocation]: () => import('./module_location.vue'),
 };
 
 export const getComponentNameForType = (reportType) =>

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

+<script>
+export default {
+  inheritAttrs: false,
+  props: {
+    moduleName: {
+      type: String,
+      required: true,
+    },
+    offset: {
+      type: Number,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <span>{{ moduleName }}:{{ offset }}</span>
+</template>

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

@@ -25,6 +25,10 @@ const TEST_DATA = {
     name: 'some-numeric-field',
     value: 15,
   },
+  [REPORT_TYPES.moduleName]: {
+    'module-name': 'foo.c',
+    offset: 15,
+  },
 };
 
 describe('ee/vulnerabilities/components/generic_report/report_item.vue', () => {

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

+import { shallowMount } from '@vue/test-utils';
+import ModuleLocation from 'ee/vulnerabilities/components/generic_report/types/module_location.vue';
+
+describe('ee/vulnerabilities/components/generic_report/types/module_location.vue', () => {
+  let wrapper;
+
+  describe.each`
+    moduleName  | offset | value
+    ${'foo.c'}  | ${4}   | ${'foo.c:4'}
+    ${'bar.go'} | ${2}   | ${'bar.go:2'}
+  `('with value of type "$fieldType"', ({ moduleName, offset, value }) => {
+    const createWrapper = () => {
+      return shallowMount(ModuleLocation, {
+        propsData: {
+          type: 'module-location',
+          moduleName,
+          offset,
+        },
+      });
+    };
+
+    beforeEach(() => {
+      wrapper = createWrapper();
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it(`renders ${moduleName} module`, () => {
+      expect(wrapper.text()).toBe(value.toString());
+    });
+  });
+});