Merge branch '328232-use-context-instead-of-props' into 'master'

Use injection over prop injection

See merge request gitlab-org/gitlab!59964

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

@@ -8,13 +8,8 @@ export default {
   components: {
     VulnerabilityCountListLayout,
   },
-  inject: ['dashboardType'],
+  inject: ['dashboardType', 'groupFullPath', 'projectFullPath'],
   props: {
-    fullPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     filters: {
       type: Object,
       required: false,
@@ -31,6 +26,9 @@ export default {
     isLoading() {
       return this.$apollo.queries.vulnerabilitiesCount.loading;
     },
+    fullPath() {
+      return this.groupFullPath || this.projectFullPath;
+    },
   },
   created() {
     eventHub.$on('vulnerabilities-updated', () =>

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

@@ -40,11 +40,9 @@ export default {
   mixins: [glFeatureFlagsMixin()],
   inject: [
     'groupFullPath',
-    'projectFullPath',
     'dashboardType',
     'dashboardDocumentation',
     'autoFixDocumentation',
-    'projectFullPath',
     'pipeline',
   ],
   queries: {
@@ -85,9 +83,6 @@ export default {
     projectsWereFetched() {
       return !this.$apollo.queries.projects?.loading;
     },
-    fullPath() {
-      return this.groupFullPath || this.projectFullPath;
-    },
     isGroup() {
       return this.dashboardType === DASHBOARD_TYPES.GROUP;
     },
@@ -144,7 +139,7 @@ export default {
             <csv-export-button />
           </header>
           <project-pipeline-status v-if="isProject" class="gl-mb-6" :pipeline="pipeline" />
-          <vulnerabilities-count-list :full-path="fullPath" :filters="filters" />
+          <vulnerabilities-count-list :filters="filters" />
         </template>
         <template #sticky>
           <filters :projects="projects" @filterChange="handleFilterChange" />

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

@@ -21,7 +21,12 @@ describe('Vulnerabilities count list component', () => {
     refetchSpy = jest.fn();
 
     return shallowMount(VulnerabilityCountList, {
-      provide: { dashboardType: DASHBOARD_TYPES.PROJECT, ...provide },
+      provide: {
+        dashboardType: DASHBOARD_TYPES.PROJECT,
+        projectFullPath: 'path-to-project',
+        groupFullPath: undefined,
+        ...provide,
+      },
       data: () => data,
       mocks: {
         $apollo: { queries: { vulnerabilitiesCount: { ...query, refetch: refetchSpy } } },
@@ -33,7 +38,7 @@ describe('Vulnerabilities count list component', () => {
     wrapper = shallowMount(VulnerabilityCountList, {
       localVue,
       apolloProvider: createMockApollo([[countQuery, query]]),
-      provide,
+      provide: { projectFullPath: undefined, groupFullPath: undefined, ...provide },
       propsData,
       stubs,
     });
@@ -87,21 +92,21 @@ describe('Vulnerabilities count list component', () => {
   });
 
   describe.each`
-    dashboardType               | fullPath          | expectedContainedQueryVariables
+    dashboardType               | provide                                | expectedContainedQueryVariables
     ${DASHBOARD_TYPES.INSTANCE} | ${undefined}                           | ${{ isInstance: true, isGroup: false, isProject: false }}
-    ${DASHBOARD_TYPES.GROUP}    | ${'group/path'}   | ${{ isInstance: false, isGroup: true, isProject: false }}
-    ${DASHBOARD_TYPES.PROJECT}  | ${'project/path'} | ${{ isInstance: false, isGroup: false, isProject: true }}
+    ${DASHBOARD_TYPES.GROUP}    | ${{ groupFullPath: 'group/path' }}     | ${{ isInstance: false, isGroup: true, isProject: false }}
+    ${DASHBOARD_TYPES.PROJECT}  | ${{ projectFullPath: 'project/path' }} | ${{ isInstance: false, isGroup: false, isProject: true }}
   `(
     'when the dashboard type is $dashboardType',
-    ({ dashboardType, fullPath, expectedContainedQueryVariables }) => {
+    ({ dashboardType, provide, expectedContainedQueryVariables }) => {
       beforeEach(() => {
         const mockResponse = jest
           .fn()
           .mockResolvedValue(mockVulnerabilitySeveritiesGraphQLResponse({ dashboardType }));
 
         createWrapperWithApollo({
-          provide: { dashboardType },
-          propsData: { fullPath, filters: { someFilter: 1 } },
+          provide: { dashboardType, ...provide },
+          propsData: { filters: { someFilter: 1 } },
           query: mockResponse,
           stubs: { VulnerabilityCountListLayout },
         });

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

@@ -165,7 +165,6 @@ describe('Vulnerability Report', () => {
 
     it('displays the vulnerability count list with the correct data', () => {
       expect(findVulnerabilitiesCountList().props()).toEqual({
-        fullPath: 'gitlab-org',
         filters: wrapper.vm.filters,
       });
     });