Add commit type to generic security reports

This commit adds a Vue component that renders `commit` types
for the generic security reports sections
(vulnerability details and pipeline view).

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

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

+<script>
+import { GlLink } from '@gitlab/ui';
+import { isRootRelative } from '~/lib/utils/url_utility';
+
+export default {
+  components: {
+    GlLink,
+  },
+  inject: ['projectFullPath'],
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    commitPath() {
+      const { projectFullPath, value } = this;
+      // this ensures an absolute path, as `projectFullPath` can be relative in some cases (e.g.: pipeline security tab)
+      const absoluteProjectPath = isRootRelative(projectFullPath)
+        ? projectFullPath
+        : `/${projectFullPath}`;
+
+      return `${absoluteProjectPath}/-/commit/${value}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-link :href="commitPath">{{ value }}</gl-link>
+</template>

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

@@ -12,6 +12,7 @@ export const REPORT_TYPES = {
   table: 'table',
   code: 'code',
   markdown: 'markdown',
+  commit: 'commit',
 };
 
 const REPORT_TYPE_TO_COMPONENT_MAP = {
@@ -26,6 +27,7 @@ const REPORT_TYPE_TO_COMPONENT_MAP = {
   [REPORT_TYPES.table]: () => import('./table.vue'),
   [REPORT_TYPES.code]: () => import('./code.vue'),
   [REPORT_TYPES.markdown]: () => import('./markdown.vue'),
+  [REPORT_TYPES.commit]: () => import('./commit.vue'),
 };
 
 export const getComponentNameForType = (reportType) =>

ee/app/assets/javascripts/vulnerabilities/vulnerabilities_init.js

@@ -19,6 +19,7 @@ export default (el) => {
       reportType: vulnerability.reportType,
       newIssueUrl: vulnerability.newIssueUrl,
       projectFingerprint: vulnerability.projectFingerprint,
+      projectFullPath: vulnerability.project?.fullPath,
       vulnerabilityId: vulnerability.id,
       issueTrackingHelpPath: vulnerability.issueTrackingHelpPath,
       permissionsHelpPath: vulnerability.permissionsHelpPath,

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

+import { GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Url from 'ee/vulnerabilities/components/generic_report/types/commit.vue';
+
+const TEST_DATA = {
+  value: '24922148',
+};
+
+describe('ee/vulnerabilities/components/generic_report/types/commit.vue', () => {
+  let wrapper;
+
+  const createWrapper = ({ provide } = {}) => {
+    return shallowMount(Url, {
+      propsData: {
+        ...TEST_DATA,
+      },
+      provide: {
+        projectFullPath: '',
+        ...provide,
+      },
+    });
+  };
+
+  const findLink = () => wrapper.findComponent(GlLink);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each(['/foo/bar', 'foo/bar'])(
+    'given `projectFullPath` is "%s" it links links to the absolute path of the commit',
+    (projectFullPath) => {
+      const absoluteCommitPath = `/foo/bar/-/commit/${TEST_DATA.value}`;
+
+      wrapper = createWrapper({ provide: { projectFullPath } });
+
+      expect(findLink().attributes('href')).toBe(absoluteCommitPath);
+    },
+  );
+
+  it('shows the value as the link-text', () => {
+    wrapper = createWrapper();
+
+    expect(findLink().text()).toBe(TEST_DATA.value);
+  });
+});