Add link to standalone vulnerabilities page on Dependency List

This commit solves: 321715
It adds a link to the standalone vulnerabilities Page
on the Dependency List.
It is behind a feature flag (standaloneVulnDependencyList)

ee/app/assets/javascripts/dependencies/components/dependency_vulnerability.vue

 <script>
+import { GlLink } from '@gitlab/ui';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   name: 'DependencyVulnerability',
   components: {
     SeverityBadge,
+    GlLink,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     vulnerability: {
       type: Object,
@@ -20,6 +24,11 @@ export default {
     <div class="w-8em flex-shrink-0 text-right mr-3">
       <severity-badge :severity="vulnerability.severity" />
     </div>
-    {{ vulnerability.name }}
+    <gl-link
+      v-if="glFeatures.standaloneVulnDependencyList && vulnerability.url"
+      :href="vulnerability.url"
+      >{{ vulnerability.name }}</gl-link
+    >
+    <span v-else data-testid="vulnerability-name-text">{{ vulnerability.name }}</span>
   </div>
 </template>

ee/app/controllers/projects/dependencies_controller.rb

@@ -6,6 +6,10 @@ module Projects
 
     before_action :authorize_read_dependency_list!
 
+    before_action do
+      push_frontend_feature_flag(:standalone_vuln_dependency_list, project)
+    end
+
     feature_category :dependency_scanning
 
     def index

ee/spec/frontend/dependencies/components/__snapshots__/dependency_vulnerability_spec.js.snap

@@ -11,8 +11,11 @@ exports[`DependencyVulnerability component given an vulnerability matches the sn
       severity="critical"
     />
   </div>
-  
-  Insecure variable usage
-
+   
+  <span
+    data-testid="vulnerability-name-text"
+  >
+    Insecure variable usage
+  </span>
 </div>
 `;

ee/spec/frontend/dependencies/components/dependency_vulnerability_spec.js

+import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import DependencyVulnerability from 'ee/dependencies/components/dependency_vulnerability.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import mockDataVulnerabilities from '../../security_dashboard/store/modules/vulnerabilities/data/mock_data_vulnerabilities';
 
 describe('DependencyVulnerability component', () => {
   let wrapper;
+  const findLink = () => wrapper.findComponent(GlLink);
 
-  const factory = ({ propsData, ...options } = {}) => {
-    wrapper = shallowMount(DependencyVulnerability, {
-      ...options,
-      propsData: { ...propsData },
-    });
+  const factory = ({ propsData, ...options } = {}, standaloneVulnDependencyList = false) => {
+    wrapper = extendedWrapper(
+      shallowMount(DependencyVulnerability, {
+        ...options,
+        propsData: { ...propsData },
+        provide: {
+          glFeatures: {
+            standaloneVulnDependencyList,
+          },
+        },
+      }),
+    );
   };
 
   afterEach(() => {
@@ -36,5 +46,39 @@ describe('DependencyVulnerability component', () => {
       expect(badge.isVisible()).toBe(true);
       expect(badge.props().severity).toEqual(vulnerability.severity);
     });
+
+    it('renders the vulnerability name as text when standaloneVulnerabilityDependencyList Flag is off', () => {
+      const text = wrapper.findByTestId('vulnerability-name-text');
+      expect(text.isVisible()).toBe(true);
+      expect(text.text()).toBe('Insecure variable usage');
+    });
+
+    it("doesn't render link when standaloneVulnerabilityDependencyList Flag is off", () => {
+      const link = findLink();
+      expect(link.exists()).toBe(false);
+    });
+  });
+
+  describe('Feature Flag on', () => {
+    const vulnerability = mockDataVulnerabilities[0];
+    beforeEach(() => {
+      factory(
+        {
+          propsData: {
+            vulnerability,
+          },
+        },
+        true,
+      );
+    });
+
+    it('renders the vulnerability name as Link when standaloneVulnerabilityDependencyList Flag is on', () => {
+      const link = findLink();
+
+      expect(link.exists()).toBe(true);
+      expect(link.element.getAttribute('href')).toBe(
+        '/testgroup/testproject/-/security/vulnerabilities/1',
+      );
+    });
   });
 });

ee/spec/frontend/security_dashboard/store/modules/vulnerabilities/data/mock_data_vulnerabilities.js

@@ -5,6 +5,7 @@ export default [
     name: 'Insecure variable usage',
     severity: 'critical',
     confidence: 'high',
+    url: '/testgroup/testproject/-/security/vulnerabilities/1',
     scanner: {
       external_id: 'find_sec_bugs',
       name: 'Find Security Bugs',
@@ -73,6 +74,7 @@ export default [
     name: 'Insecure variable usage',
     severity: 'critical',
     confidence: 'high',
+    url: '/testgroup/testproject/-/security/vulnerabilities/2',
     scanner: {
       external_id: 'find_sec_bugs',
       name: 'Find Security Bugs',
@@ -127,6 +129,7 @@ export default [
     name: 'Insecure variable usage',
     severity: 'medium',
     confidence: '',
+    url: '/testgroup/testproject/-/security/vulnerabilities/3',
     scanner: {
       external_id: 'find_sec_bugs',
       name: 'Find Security Bugs',
@@ -205,6 +208,7 @@ export default [
     name: 'Insecure variable usage',
     severity: 'high',
     confidence: 'low',
+    url: '/testgroup/testproject/-/security/vulnerabilities/4',
     scanner: {
       external_id: 'find_sec_bugs',
       name: 'Find Security Bugs',
@@ -284,6 +288,7 @@ export default [
       'Remote command execution due to flaw in the include params attribute of URL and Anchor tags for org.apache.struts/struts2core',
     severity: 'low',
     confidence: '',
+    url: '/testgroup/testproject/-/security/vulnerabilities/5',
     scanner: {
       external_id: 'find_sec_bugs',
       name: 'Find Security Bugs',
@@ -386,6 +391,7 @@ export default [
     name: 'Doorkeeper Gem does not revoke token for public clients',
     severity: 'unknown',
     confidence: '',
+    url: '/testgroup/testproject/-/security/vulnerabilities/6',
     scanner: {
       external_id: 'find_sec_bugs',
       name: 'Find Security Bugs',
@@ -440,6 +446,7 @@ export default [
     name: 'Insecure variable usage',
     severity: 'high',
     confidence: 'low',
+    url: '/testgroup/testproject/-/security/vulnerabilities/7',
     scanner: {
       external_id: 'find_sec_bugs',
       name: 'Find Security Bugs',
@@ -518,6 +525,7 @@ export default [
     name: 'CVE-2018-1000001 in glibc',
     severity: 'high',
     confidence: 'unknown',
+    url: '/testgroup/testproject/-/security/vulnerabilities/8',
     scanner: {
       external_id: 'clair',
       name: 'Clair',
@@ -575,6 +583,7 @@ export default [
     name: 'CVE-2018-1000001 in glibc',
     severity: 'high',
     confidence: 'unknown',
+    url: '/testgroup/testproject/-/security/vulnerabilities/9',
     scanner: {
       external_id: 'clair',
       name: 'Clair',