Use provide/inject for groupFullPath instead of props

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

@@ -19,11 +19,8 @@ export default {
     GlLoadingIcon,
     VulnerabilitiesCountList,
   },
+  inject: ['groupFullPath'],
   props: {
-    groupFullPath: {
-      type: String,
-      required: true,
-    },
     vulnerabilitiesExportEndpoint: {
       type: String,
       required: true,
@@ -88,7 +85,7 @@ export default {
       <template #sticky>
         <filters :projects="projects" @filterChange="handleFilterChange" />
       </template>
-      <group-security-vulnerabilities :group-full-path="groupFullPath" :filters="filters" />
+      <group-security-vulnerabilities :filters="filters" />
     </security-dashboard-layout>
   </div>
 </template>

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

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

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

@@ -25,9 +25,9 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: ['groupFullPath'],
   props: {
     query: { type: Object, required: true },
-    groupFullPath: { type: String, required: false, default: undefined },
   },
   data() {
     return {

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

@@ -32,6 +32,7 @@ export default {
   directives: {
     'gl-tooltip': GlTooltipDirective,
   },
+  inject: ['groupFullPath'],
   props: {
     helpPagePath: {
       type: String,
@@ -42,11 +43,6 @@ export default {
       type: Object,
       required: true,
     },
-    groupFullPath: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
   },
   data() {
     return {

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

@@ -18,12 +18,7 @@ export default {
     VulnerabilitySeverities,
     VulnerabilityChart,
   },
-  props: {
-    groupFullPath: {
-      type: String,
-      required: true,
-    },
-  },
+  inject: ['groupFullPath'],
   apollo: {
     projects: {
       query: vulnerableProjectsQuery,
@@ -65,11 +60,8 @@ export default {
       <dashboard-not-configured />
     </template>
     <template v-else-if="shouldShowCharts" #default>
-      <vulnerability-chart :query="vulnerabilityHistoryQuery" :group-full-path="groupFullPath" />
-      <vulnerability-severities
-        :query="vulnerabilityGradesQuery"
-        :group-full-path="groupFullPath"
-      />
+      <vulnerability-chart :query="vulnerabilityHistoryQuery" />
+      <vulnerability-severities :query="vulnerabilityGradesQuery" />
     </template>
     <template v-else #loading>
       <gl-loading-icon size="lg" class="gl-mt-6" />

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

@@ -61,6 +61,7 @@ export default (el, dashboardType) => {
     emptyStateSvgPath,
     notEnabledScannersHelpPath,
     noPipelineRunScannersHelpPath,
+    groupFullPath,
     securityConfigurationPath,
     hasVulnerabilities: parseBoolean(hasVulnerabilities),
     scanners: scanners ? JSON.parse(scanners) : [],
@@ -92,7 +93,6 @@ export default (el, dashboardType) => {
     provide.autoFixMrsPath = autoFixMrsPath;
   } else if (dashboardType === DASHBOARD_TYPES.GROUP) {
     component = FirstClassGroupSecurityDashboard;
-    props.groupFullPath = groupFullPath;
   } else if (dashboardType === DASHBOARD_TYPES.INSTANCE) {
     provide.instanceDashboardSettingsPath = instanceDashboardSettingsPath;
     component = FirstClassInstanceSecurityDashboard;

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

@@ -32,6 +32,7 @@ export default (el, dashboardType) => {
   const provide = {
     dashboardDocumentation: el.dataset.dashboardDocumentation,
     emptyStateSvgPath: el.dataset.emptyStateSvgPath,
+    groupFullPath: el.dataset.groupFullPath,
     securityConfigurationPath: el.dataset.securityConfigurationPath,
   };
 

ee/changelogs/unreleased/284471-use-provide-inject-for-group-full-path.yml

+---
+title: Use provide/inject for groupFullPath instead of props
+merge_request: 56472
+author:
+type: other

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

@@ -29,9 +29,9 @@ describe('First Class Group Dashboard Component', () => {
       propsData: {
         dashboardDocumentation,
         emptyStateSvgPath,
-        groupFullPath,
         vulnerabilitiesExportEndpoint,
       },
+      provide: { groupFullPath },
       data,
       stubs: {
         SecurityDashboardLayout,
@@ -66,7 +66,6 @@ describe('First Class Group Dashboard Component', () => {
 
     it('should render correctly', () => {
       expect(findGroupVulnerabilities().props()).toEqual({
-        groupFullPath,
         filters: {},
       });
     });

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

@@ -24,15 +24,13 @@ describe('First Class Group Dashboard Vulnerabilities Component', () => {
 
   const createWrapper = ({ $apollo = apolloMock, stubs } = {}) => {
     return shallowMount(FirstClassGroupVulnerabilities, {
-      propsData: {
-        groupFullPath,
-      },
       stubs,
       mocks: {
         $apollo,
         fetchNextPage: () => {},
       },
       provide: {
+        groupFullPath,
         hasVulnerabilities: true,
         hasJiraVulnerabilitiesIntegrationEnabled: false,
       },

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

@@ -21,10 +21,11 @@ describe('First class vulnerability chart component', () => {
   const findActiveChartButton = () => findChartButtons().find('.selected');
   const find90DaysChartButton = () => findChartButtons().find('[data-days="90"]');
 
-  const createComponent = ({ $apollo, propsData, stubs, data } = {}) => {
+  const createComponent = ({ $apollo, propsData, stubs, data, provide } = {}) => {
     const instance = shallowMount(VulnerabilityChart, {
       $apollo,
       propsData: { query: {}, ...propsData },
+      provide: { groupFullPath: undefined, ...provide },
       stubs: {
         ...stubChildren(VulnerabilityChart),
         ...stubs,
@@ -84,7 +85,7 @@ describe('First class vulnerability chart component', () => {
   describe('when loading the history chart for group level dashboard', () => {
     beforeEach(() => {
       wrapper = createComponent({
-        propsData: { groupFullPath: 'gitlab-org' },
+        provide: { groupFullPath: 'gitlab-org' },
         $apollo: {
           queries: { vulnerabilitiesHistory: { group: responseData } },
         },

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

@@ -33,7 +33,7 @@ describe('Vulnerability Severity component', () => {
     return createMockApollo([...queries]);
   };
 
-  const createComponent = ({ propsData, data, apolloProvider }) => {
+  const createComponent = ({ propsData, data, apolloProvider, provide }) => {
     return shallowMount(VulnerabilitySeverity, {
       localVue,
       apolloProvider,
@@ -42,6 +42,7 @@ describe('Vulnerability Severity component', () => {
         helpPagePath,
         ...propsData,
       },
+      provide: { groupFullPath: undefined, ...provide },
       stubs: {
         Accordion,
         AccordionItem,
@@ -69,7 +70,8 @@ describe('Vulnerability Severity component', () => {
       ]);
 
       wrapper = createComponent({
-        propsData: { groupFullPath: 'gitlab-org', query: groupVulnerabilityGradesQuery },
+        propsData: { query: groupVulnerabilityGradesQuery },
+        provide: { groupFullPath: 'gitlab-org' },
         apolloProvider,
       });
 

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

@@ -41,7 +41,7 @@ describe('Group Security Charts component', () => {
           },
         },
       },
-      propsData: { groupFullPath },
+      provide: { groupFullPath },
       stubs: {
         SecurityChartsLayout,
       },
@@ -100,11 +100,10 @@ describe('Group Security Charts component', () => {
     expect(dashboardNotConfigured.exists()).toBe(false);
     expect(loadingIcon.exists()).toBe(false);
     expect(vulnerabilityChart.exists()).toBe(true);
-    expect(vulnerabilityChart.props()).toEqual({ query: vulnerabilityHistoryQuery, groupFullPath });
+    expect(vulnerabilityChart.props()).toEqual({ query: vulnerabilityHistoryQuery });
     expect(vulnerabilitySeverities.exists()).toBe(true);
     expect(vulnerabilitySeverities.props()).toEqual({
       query: vulnerabilityGradesQuery,
-      groupFullPath,
       helpPagePath: '',
     });
   });