Put dependency path behind feature flag

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

@@ -2,6 +2,7 @@
 import { GlIcon, GlLink, GlPopover, GlIntersperse } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import DependencyPathViewer from './dependency_path_viewer.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export const VISIBLE_DEPENDENCY_COUNT = 2;
 
@@ -14,6 +15,7 @@ export default {
     GlPopover,
     GlIntersperse,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     location: {
       type: Object,
@@ -25,7 +27,10 @@ export default {
       return this.location.ancestors || [];
     },
     hasAncestors() {
-      return this.ancestors.length > 0;
+      return this.glFeatures.pathToVulnerableDependency && this.ancestors.length > 0;
+    },
+    isTopLevelDependency() {
+      return this.glFeatures.pathToVulnerableDependency && this.location.top_level;
     },
     visibleDependencies() {
       return this.ancestors.slice(0, VISIBLE_DEPENDENCY_COUNT);
@@ -33,6 +38,9 @@ export default {
     remainingDependenciesCount() {
       return Math.max(0, this.ancestors.length - VISIBLE_DEPENDENCY_COUNT);
     },
+    showMoreLink() {
+      return this.glFeatures.pathToVulnerableDependency && this.remainingDependenciesCount > 0;
+    },
     nMoreMessage() {
       return n__('Dependencies|%d more', 'Dependencies|%d more', this.remainingDependenciesCount);
     },
@@ -48,13 +56,13 @@ export default {
         <gl-icon name="doc-text" class="gl-vertical-align-middle!" />
         {{ location.path }}
       </gl-link>
-      <span v-if="location.top_level">{{ s__('Dependencies|(top level)') }}</span>
+      <span v-if="isTopLevelDependency">{{ s__('Dependencies|(top level)') }}</span>
     </span>
 
     <dependency-path-viewer v-if="hasAncestors" :dependencies="visibleDependencies" />
 
     <!-- We need to put an extra span to avoid separator between link & popover -->
-    <span v-if="remainingDependenciesCount > 0">
+    <span v-if="showMoreLink">
       <gl-link ref="moreLink">{{ nMoreMessage }}</gl-link>
 
       <gl-popover

ee/app/controllers/projects/dependencies_controller.rb

@@ -4,6 +4,10 @@ module Projects
   class DependenciesController < Projects::ApplicationController
     before_action :authorize_read_dependency_list!
 
+    before_action do
+      push_frontend_feature_flag(:path_to_vulnerable_dependency, project)
+    end
+
     def index
       respond_to do |format|
         format.html do

ee/config/feature_flags/development/path_to_vulnerable_dependency.yml

+---
+name: path_to_vulnerable_dependency
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/40627
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/241739
+group: group::composition analysis
+type: development
+default_enabled: false
\ No newline at end of file

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

@@ -10,9 +10,14 @@ describe('Dependency Location component', () => {
 
   const createComponent = ({ propsData, ...options } = {}) => {
     wrapper = shallowMount(DependencyLocation, {
-      ...options,
       propsData: { ...propsData },
       stubs: { GlLink, DependencyPathViewer, GlIntersperse },
+      provide: {
+        glFeatures: {
+          pathToVulnerableDependency: true,
+        },
+      },
+      ...options,
     });
   };
 
@@ -82,4 +87,23 @@ describe('Dependency Location component', () => {
       expect(findPopover().exists()).toBe(false);
     });
   });
+
+  describe('with feature flag off', () => {
+    it.each`
+      name                | location              | path
+      ${'no path'}        | ${Paths.noPath}       | ${'package.json'}
+      ${'top level path'} | ${Paths.topLevelPath} | ${'package.json'}
+      ${'short path'}     | ${Paths.shortPath}    | ${'package.json'}
+      ${'long path'}      | ${Paths.longPath}     | ${'package.json'}
+    `('do not show dependency path for $name', ({ location, path }) => {
+      createComponent({
+        propsData: {
+          location,
+        },
+        provide: { glFeatures: { pathToVulnerableDependency: false } },
+      });
+
+      expect(wrapper.text()).toBe(path);
+    });
+  });
 });