Pass project path via provide/inject

Drop projectFullPath props instead of a provide/inject approach.

ee/app/assets/javascripts/security_dashboard/components/first_class_project_security_dashboard.vue

@@ -9,7 +9,6 @@ import SecurityDashboardLayout from './security_dashboard_layout.vue';
 import VulnerabilitiesCountList from './vulnerability_count_list.vue';
 import Filters from './first_class_vulnerability_filters.vue';
 import CsvExportButton from './csv_export_button.vue';
-import projectAutoFixMrsCountQuery from '../graphql/project_auto_fix_mrs_count.query.graphql';
 
 export const BANNER_COOKIE_KEY = 'hide_vulnerabilities_introduction_banner';
 
@@ -25,22 +24,6 @@ export default {
     Filters,
   },
   mixins: [glFeatureFlagsMixin()],
-  apollo: {
-    autoFixMrsCount: {
-      query: projectAutoFixMrsCountQuery,
-      variables() {
-        return {
-          fullPath: this.projectFullPath,
-        };
-      },
-      update(data) {
-        return data?.project?.mergeRequests?.count || 0;
-      },
-      skip() {
-        return !this.glFeatures.securityAutoFix;
-      },
-    },
-  },
   props: {
     securityDashboardHelpPath: {
       type: String,
@@ -51,11 +34,6 @@ export default {
       required: false,
       default: () => ({}),
     },
-    projectFullPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     hasVulnerabilities: {
       type: Boolean,
       required: false,
@@ -102,15 +80,14 @@ export default {
             <h4 class="flex-grow mt-0 mb-0">{{ __('Vulnerabilities') }}</h4>
             <csv-export-button :vulnerabilities-export-endpoint="vulnerabilitiesExportEndpoint" />
           </div>
-          <project-pipeline-status :pipeline="pipeline" :auto-fix-mrs-count="autoFixMrsCount" />
-          <vulnerabilities-count-list :project-full-path="projectFullPath" :filters="filters" />
+          <project-pipeline-status :pipeline="pipeline" />
+          <vulnerabilities-count-list :filters="filters" />
         </template>
         <template #sticky>
           <filters @filterChange="handleFilterChange" />
         </template>
         <project-vulnerabilities-app
           :dashboard-documentation="dashboardDocumentation"
-          :project-full-path="projectFullPath"
           :filters="filters"
         />
       </security-dashboard-layout>

ee/app/assets/javascripts/security_dashboard/components/project_pipeline_status.vue

@@ -3,6 +3,7 @@ import { GlLink } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import PipelineStatusBadge from './pipeline_status_badge.vue';
+import projectAutoFixMrsCountQuery from '../graphql/project_auto_fix_mrs_count.query.graphql';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
@@ -12,15 +13,26 @@ export default {
     PipelineStatusBadge,
   },
   mixins: [glFeatureFlagsMixin()],
-  inject: ['autoFixMrsPath'],
-  props: {
-    pipeline: { type: Object, required: true },
+  inject: ['projectFullPath', 'autoFixMrsPath'],
+  apollo: {
     autoFixMrsCount: {
-      type: Number,
-      required: false,
-      default: 0,
+      query: projectAutoFixMrsCountQuery,
+      variables() {
+        return {
+          fullPath: this.projectFullPath,
+        };
+      },
+      update(data) {
+        return data?.project?.mergeRequests?.count || 0;
+      },
+      skip() {
+        return !this.glFeatures.securityAutoFix;
+      },
     },
   },
+  props: {
+    pipeline: { type: Object, required: true },
+  },
   computed: {
     shouldShowPipelineStatus() {
       return this.pipeline.createdAt && this.pipeline.id && this.pipeline.path;

ee/app/assets/javascripts/security_dashboard/components/project_vulnerabilities.vue

@@ -16,11 +16,8 @@ export default {
     GlIntersectionObserver,
     VulnerabilityList,
   },
+  inject: ['projectFullPath'],
   props: {
-    projectFullPath: {
-      type: String,
-      required: true,
-    },
     filters: {
       type: Object,
       required: false,

ee/app/assets/javascripts/security_dashboard/components/vulnerability_count_list.vue

@@ -6,11 +6,8 @@ export default {
   components: {
     VulnerabilityCountListLayout,
   },
+  inject: ['projectFullPath'],
   props: {
-    projectFullPath: {
-      type: String,
-      required: true,
-    },
     filters: {
       type: Object,
       required: false,

ee/app/assets/javascripts/security_dashboard/first_class_init.js

@@ -55,7 +55,7 @@ export default (el, dashboardType) => {
       securityBuildsFailedCount: Number(securityBuildsFailedCount),
       securityBuildsFailedPath,
     };
-    props.projectFullPath = el.dataset.projectFullPath;
+    provide.projectFullPath = el.dataset.projectFullPath;
     provide.autoFixDocumentation = el.dataset.autoFixDocumentation;
     provide.autoFixMrsPath = el.dataset.autoFixMrsPath;
   } else if (dashboardType === DASHBOARD_TYPES.GROUP) {

ee/spec/frontend/security_dashboard/components/first_class_project_security_dashboard_spec.js

@@ -19,12 +19,12 @@ const props = {
     id: '214',
     path: '/mixed-vulnerabilities/dependency-list-test-01/-/pipelines/214',
   },
-  projectFullPath: '/group/project',
   securityDashboardHelpPath: '/security/dashboard/help-path',
   vulnerabilitiesExportEndpoint: '/vulnerabilities/exports',
 };
 
 const provide = {
+  projectFullPath: '/group/project',
   dashboardDocumentation: '/help/docs',
   autoFixDocumentation: '/auto/fix/documentation',
   emptyStateSvgPath: '/svgs/empty/svg',
@@ -46,7 +46,7 @@ describe('First class Project Security Dashboard component', () => {
   const findCsvExportButton = () => wrapper.find(CsvExportButton);
   const findAutoFixUserCallout = () => wrapper.find(AutoFixUserCallout);
 
-  const createComponent = (options, data = {}) => {
+  const createComponent = options => {
     wrapper = shallowMount(FirstClassProjectSecurityDashboard, {
       propsData: {
         ...props,
@@ -54,12 +54,6 @@ describe('First class Project Security Dashboard component', () => {
       },
       provide,
       stubs: { SecurityDashboardLayout, GlBanner },
-      data() {
-        return {
-          autoFixMrsCount: 0,
-          ...data,
-        };
-      },
       ...options,
     });
   };
@@ -71,12 +65,10 @@ describe('First class Project Security Dashboard component', () => {
 
   describe('on render when there are vulnerabilities', () => {
     beforeEach(() => {
-      createComponent(
-        {
-          props: { hasVulnerabilities: true },
-        },
-        { filters },
-      );
+      createComponent({
+        props: { hasVulnerabilities: true },
+        data: () => ({ filters }),
+      });
     });
 
     it('should render the vulnerabilities', () => {
@@ -173,14 +165,14 @@ describe('First class Project Security Dashboard component', () => {
 
   describe('with filter data', () => {
     beforeEach(() => {
-      createComponent(
-        {
-          props: {
-            hasVulnerabilities: true,
-          },
+      createComponent({
+        props: {
+          hasVulnerabilities: true,
         },
-        { filters },
-      );
+        data() {
+          return { filters };
+        },
+      });
     });
 
     it('should pass the filter data down to the vulnerabilities', () => {

ee/spec/frontend/security_dashboard/components/project_pipeline_status_spec.js

@@ -31,9 +31,13 @@ describe('Project Pipeline Status Component', () => {
           {
             propsData: DEFAULT_PROPS,
             provide: {
+              projectFullPath: '/group/project',
               glFeatures: { securityAutoFix: true },
               autoFixMrsPath: '/merge_requests?label_name=GitLab-auto-fix',
             },
+            data() {
+              return { autoFixMrsCount: 0 };
+            },
           },
           options,
         ),
@@ -85,8 +89,8 @@ describe('Project Pipeline Status Component', () => {
     describe('when there are auto-fix MRs', () => {
       beforeEach(() => {
         wrapper = createWrapper({
-          propsData: {
-            autoFixMrsCount: 12,
+          data() {
+            return { autoFixMrsCount: 12 };
           },
         });
       });
@@ -103,11 +107,7 @@ describe('Project Pipeline Status Component', () => {
     });
 
     it('does not render the link if there are no open auto-fix MRs', () => {
-      wrapper = createWrapper({
-        propsData: {
-          autoFixMrsCount: 0,
-        },
-      });
+      wrapper = createWrapper();
 
       expect(findAutoFixMrsLink().exists()).toBe(false);
     });

ee/spec/frontend/security_dashboard/components/project_vulnerabilities_spec.js

@@ -12,10 +12,12 @@ describe('Vulnerabilities app component', () => {
 
   const createWrapper = ({ props = {}, $apollo = apolloMock } = {}, options = {}) => {
     wrapper = shallowMount(ProjectVulnerabilitiesApp, {
+      provide: {
+        projectFullPath: '#',
+      },
       propsData: {
         dashboardDocumentation: '#',
         emptyStateSvgPath: '#',
-        projectFullPath: '#',
         ...props,
       },
       mocks: {

ee/spec/frontend/security_dashboard/components/vulnerability_count_list_spec.js

@@ -9,7 +9,7 @@ describe('Vulnerabilities count list component', () => {
 
   const createWrapper = ({ query } = {}) => {
     return shallowMount(VulnerabilityCountList, {
-      propsData: {
+      provide: {
         projectFullPath: '/root/security-project',
       },
       mocks: {