Add line number to SAST and Secret Detection

- based on the what the location object has, create the location
  line for the vulnerability
- modify/add tests

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_list.vue

 <script>
-import { s__, __ } from '~/locale';
+import { s__, __, sprintf } from '~/locale';
 import { GlEmptyState, GlFormCheckbox, GlLink, GlSkeletonLoading, GlTable } from '@gitlab/ui';
 import RemediatedBadge from './remediated_badge.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
@@ -133,6 +133,19 @@ export default {
     },
   },
   methods: {
+    createLocationString(location) {
+      const { image, file, startLine } = location;
+
+      if (image) {
+        return image;
+      }
+
+      if (file && startLine) {
+        return sprintf(__('%{file} (line: %{startLine})'), { file, startLine });
+      }
+
+      return file;
+    },
     deselectAllVulnerabilities() {
       this.selectedVulnerabilities = {};
     },
@@ -245,7 +258,7 @@ export default {
             {{ item.project.nameWithNamespace }}
           </div>
           <div v-if="shouldShowVulnerabilityPath(item)" class="monospace">
-            {{ item.location.image || item.location.file }}
+            {{ createLocationString(item.location) }}
           </div>
         </div>
         <remediated-badge v-if="item.resolved_on_default_branch" class="ml-2" />

ee/app/assets/javascripts/vulnerabilities/graphql/vulnerability.fragment.graphql

@@ -24,9 +24,11 @@ fragment Vulnerability on Vulnerability {
     }
     ... on VulnerabilityLocationSast {
       file
+      startLine
     }
     ... on VulnerabilityLocationSecretDetection {
       file
+      startLine
     }
   }
   project {

ee/changelogs/unreleased/210327-add-line-number.yml

+---
+title: Add line number to SAST and Secret Detection
+merge_request: 35536
+author:
+type: changed

ee/spec/frontend/vulnerabilities/mock_data.js

@@ -21,6 +21,7 @@ export const generateVulnerabilities = () => [
     reportType: 'DEPENDENCY_SCANNING',
     location: {
       file: 'src/main/java/com/gitlab/security_products/tests/App.java',
+      startLine: '1337',
     },
     project: {
       nameWithNamespace: 'Administrator / Vulnerability reports',
@@ -33,7 +34,7 @@ export const generateVulnerabilities = () => [
     state: 'opened',
     reportType: 'CUSTOM_SCANNER_WITHOUT_TRANSLATION',
     location: {
-      file: 'yarn.lock',
+      file: 'src/main/java/com/gitlab/security_products/tests/App.java',
     },
     project: {
       nameWithNamespace: 'Mixed Vulnerabilities / Dependency List Test 01',
@@ -48,7 +49,7 @@ export const generateVulnerabilities = () => [
       file: 'yarn.lock',
     },
     project: {
-      nameWithNamespace: 'Mixed Vulnerabilities / Dependency List Test 01',
+      nameWithNamespace: 'Mixed Vulnerabilities / Rails App',
     },
   },
 ];

ee/spec/frontend/vulnerabilities/vulnerability_list_spec.js

@@ -127,6 +127,12 @@ describe('Vulnerability list component', () => {
         'Administrator / Vulnerability reports',
       );
       expect(findDataCell(`location-${newVulnerabilities[1].id}`).text()).toContain(
+        'src/main/java/com/gitlab/security_products/tests/App.java (line: 1337)',
+      );
+      expect(findDataCell(`location-${newVulnerabilities[2].id}`).text()).toContain(
+        'Mixed Vulnerabilities / Dependency List Test 01',
+      );
+      expect(findDataCell(`location-${newVulnerabilities[2].id}`).text()).toContain(
         'src/main/java/com/gitlab/security_products/tests/App.java',
       );
     });

locale/gitlab.pot

@@ -367,6 +367,9 @@ msgstr ""
 msgid "%{filePath} deleted"
 msgstr ""
 
+msgid "%{file} (line: %{startLine})"
+msgstr ""
+
 msgid "%{firstLabel} +%{labelCount} more"
 msgstr ""