Add dependency paths drawer

Add a drawer component to the vulnerability details page to display
dependency paths. Introduce the dependency_paths feature flag.

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/519962

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

+<script>
+import { MountingPortal } from 'portal-vue';
+import { GlButton, GlDrawer } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
+import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
+
+// This is temporary and will be deleted
+// Will be replaced with proper API data once the BE completes
+export const TEST_PATHS = [
+  ['@jest@1.2.3', '@jest-internal-whatever@1.2.3', '@babel/core@7.47.7'],
+  ['@react@0.13.1', '@babel/core@7.47.7'],
+];
+
+export default {
+  name: 'DependencyPathsDrawer',
+  components: {
+    MountingPortal,
+    GlButton,
+    GlDrawer,
+  },
+  data() {
+    return {
+      isDrawerOpen: false,
+    };
+  },
+  methods: {
+    openDrawer() {
+      this.isDrawerOpen = true;
+    },
+    closeDrawer() {
+      this.isDrawerOpen = false;
+    },
+  },
+  i18n: {
+    buttonText: s__('Vulnerability|View dependency paths'),
+    drawerTitle: s__('Vulnerability|Dependency paths'),
+  },
+  getContentWrapperHeight,
+  DRAWER_Z_INDEX,
+  TEST_PATHS,
+};
+</script>
+
+<template>
+  <div>
+    <gl-button size="small" @click="openDrawer">{{ $options.i18n.buttonText }}</gl-button>
+    <!-- Mount GlDrawer outside .md to fix z-index so it shows above navbar.
+     More info: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181949#note_2360144489 -->
+    <mounting-portal mount-to="#js-dependency-paths-drawer-portal">
+      <gl-drawer
+        :header-height="$options.getContentWrapperHeight()"
+        :open="isDrawerOpen"
+        :title="$options.i18n.drawerTitle"
+        :z-index="$options.DRAWER_Z_INDEX"
+        @close="closeDrawer"
+      >
+        <template #title>
+          <h2
+            data-testid="dependency-path-drawer-title"
+            class="gl-my-0 gl-text-size-h2 gl-leading-24"
+          >
+            {{ $options.i18n.drawerTitle }}
+          </h2>
+        </template>
+        <ul class="gl-list-none gl-p-2">
+          <li
+            v-for="(path, index) in $options.TEST_PATHS"
+            :key="index"
+            class="gl-border-b gl-py-5 first:!gl-pt-0"
+          >
+            <div class="">{{ path.join(' / ') }}</div>
+          </li>
+        </ul>
+      </gl-drawer>
+    </mounting-portal>
+  </div>
+</template>

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

@@ -28,6 +28,7 @@ import FalsePositiveAlert from './false_positive_alert.vue';
 import VulnerabilityDetailSection from './vulnerability_detail_section.vue';
 import VulnerabilityTraining from './vulnerability_training.vue';
 import VulnerabilityFileContents from './vulnerability_file_contents.vue';
+import DependencyPathDrawer from './dependency_path_drawer.vue';
 
 // These colors are taken from:
 // https://gitlab.com/gitlab-org/gitlab/-/issues/427441/designs/design_1730952836577.png
@@ -56,6 +57,7 @@ export default {
     GlButton,
     GlLabel,
     HelpPopover,
+    DependencyPathDrawer,
   },
   directives: {
     SafeHtml,
@@ -514,6 +516,7 @@ export default {
             <code-block :code="location.stacktraceSnippet" max-height="225px" />
           </detail-item>
         </ul>
+        <dependency-path-drawer v-if="glFeatures.dependencyPaths" />
       </template>
 
       <gl-button

ee/app/controllers/projects/security/vulnerabilities_controller.rb

@@ -24,6 +24,7 @@ class VulnerabilitiesController < Projects::ApplicationController
       def show
         push_frontend_ability(ability: :explain_vulnerability_with_ai, resource: vulnerability, user: current_user)
         push_frontend_ability(ability: :resolve_vulnerability_with_ai, resource: vulnerability, user: current_user)
+        push_frontend_feature_flag(:dependency_paths, project.group)
 
         pipeline = vulnerability.finding.first_finding_pipeline
         @pipeline = pipeline if can?(current_user, :read_pipeline, pipeline)

ee/app/views/projects/security/vulnerabilities/show.html.haml

@@ -5,4 +5,6 @@
 - add_page_specific_style 'page_bundles/security_dashboard'
 - add_page_specific_style 'page_bundles/merge_request'
 
+#js-dependency-paths-drawer-portal
+
 #js-vulnerability-main{ data: vulnerability_details_app_data(@vulnerability, @pipeline, @project) }

ee/config/feature_flags/gitlab_com_derisk/dependency_paths.yml

+---
+name: dependency_paths
+feature_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/519962
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181949
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/520269
+milestone: '17.10'
+group: group::security insights
+type: gitlab_com_derisk
+default_enabled: false

ee/spec/frontend/vulnerabilities/dependency_path_drawer_spec.js

+import { GlDrawer, GlButton } from '@gitlab/ui';
+import { MountingPortal } from 'portal-vue';
+import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import DependencyPathDrawer from 'ee/vulnerabilities/components/dependency_path_drawer.vue';
+import { RENDER_ALL_SLOTS_TEMPLATE, stubComponent } from 'helpers/stub_component';
+
+jest.mock('~/lib/utils/dom_utils', () => ({ getContentWrapperHeight: jest.fn() }));
+
+describe('Dependency paths drawer component', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(DependencyPathDrawer, {
+      stubs: {
+        GlDrawer: stubComponent(GlDrawer, { template: RENDER_ALL_SLOTS_TEMPLATE }),
+        MountingPortal: stubComponent(MountingPortal),
+      },
+    });
+  };
+
+  const findDrawer = () => wrapper.findComponent(GlDrawer);
+  const findButton = () => wrapper.findComponent(GlButton);
+  const findMountingPortal = () => wrapper.findComponent(MountingPortal);
+
+  it('renders into the mounting portal', () => {
+    createComponent();
+
+    expect(findMountingPortal().attributes()).toMatchObject({
+      'mount-to': '#js-dependency-paths-drawer-portal',
+    });
+  });
+
+  describe('button', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the button', () => {
+      createComponent();
+
+      expect(findButton().props()).toMatchObject({ size: 'small' });
+      expect(findButton().text()).toBe('View dependency paths');
+    });
+
+    it('opens the drawer on click', async () => {
+      expect(findDrawer().props('open')).toBe(false);
+
+      findButton().vm.$emit('click');
+      await nextTick();
+
+      expect(findDrawer().props('open')).toBe(true);
+    });
+  });
+
+  describe('drawer', () => {
+    beforeEach(() => {
+      createComponent();
+      findButton().vm.$emit('click');
+    });
+
+    it('renders the drawer on', () => {
+      expect(findDrawer().props()).toMatchObject(
+        expect.objectContaining({ open: true, zIndex: 252 }),
+      );
+    });
+
+    it('renders the drawer title', () => {
+      expect(wrapper.findByTestId('dependency-path-drawer-title').text()).toBe('Dependency paths');
+    });
+
+    it('closes the drawer on click', async () => {
+      expect(findDrawer().props('open')).toBe(true);
+
+      findDrawer().vm.$emit('close');
+      await nextTick();
+
+      expect(findDrawer().props('open')).toBe(false);
+    });
+  });
+});

locale/gitlab.pot

@@ -64169,6 +64169,9 @@ msgstr ""
 msgid "Vulnerability|Create a merge request to implement this solution, or download and apply the patch manually."
 msgstr ""
+msgid "Vulnerability|Dependency paths"
+msgstr ""
+
 msgid "Vulnerability|Description"
 msgstr ""
@@ -64319,6 +64322,9 @@ msgstr ""
 msgid "Vulnerability|View code flow"
 msgstr ""
+msgid "Vulnerability|View dependency paths"
+msgstr ""
+
 msgid "Vulnerability|View training"
 msgstr ""