Add file-location component for generic security reports

Changelog: added
MR:
EE: true

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

@@ -8,6 +8,7 @@ export const REPORT_TYPES = {
   text: 'text',
   value: 'value',
   moduleLocation: 'module-location',
+  fileLocation: 'file-location',
 };
 
 const REPORT_TYPE_TO_COMPONENT_MAP = {
@@ -18,6 +19,7 @@ const REPORT_TYPE_TO_COMPONENT_MAP = {
   [REPORT_TYPES.text]: () => import('./value.vue'),
   [REPORT_TYPES.value]: () => import('./value.vue'),
   [REPORT_TYPES.moduleLocation]: () => import('./module_location.vue'),
+  [REPORT_TYPES.fileLocation]: () => import('./file_location.vue'),
 };
 
 export const getComponentNameForType = (reportType) =>

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

+<script>
+export default {
+  inheritAttrs: false,
+  props: {
+    fileName: {
+      type: String,
+      required: true,
+    },
+    lineStart: {
+      type: Number,
+      required: true,
+    },
+    lineEnd: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    lineStr() {
+      return this.lineEnd ? `${this.lineStart}-${this.lineEnd}` : this.lineStart;
+    },
+  },
+};
+</script>
+<template>
+  <span>{{ fileName }}:{{ lineStr }}</span>
+</template>

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

@@ -26,9 +26,14 @@ const TEST_DATA = {
     value: 15,
   },
   [REPORT_TYPES.moduleName]: {
-    'module-name': 'foo.c',
+    moduleName: 'foo.c',
     offset: 15,
   },
+  [REPORT_TYPES.fileLocation]: {
+    fileName: 'index.js',
+    lineStart: '1',
+    lineEnd: '2',
+  },
 };
 
 describe('ee/vulnerabilities/components/generic_report/report_item.vue', () => {

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

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