Update injected props

Use injection instead of props because the data needs
to be used in grandchildren components.

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

@@ -25,7 +25,7 @@ export default {
       variables() {
         return {
           fullPath: this.projectFullPath,
-          pipelineIid: this.pipelineIid,
+          pipelineIid: this.pipeline.iid,
         };
       },
       update(data) {
@@ -34,31 +34,12 @@ export default {
       },
     },
   },
+  inject: ['projectFullPath', 'pipeline', 'dashboardDocumentation', 'emptyStateSvgPath'],
   props: {
-    dashboardDocumentation: {
-      type: String,
-      required: true,
-    },
-    emptyStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    pipelineId: {
-      type: Number,
-      required: true,
-    },
-    pipelineIid: {
-      type: Number,
-      required: true,
-    },
     projectId: {
       type: Number,
       required: true,
     },
-    sourceBranch: {
-      type: String,
-      required: true,
-    },
     vulnerabilitiesEndpoint: {
       type: String,
       required: true,
@@ -67,16 +48,6 @@ export default {
       type: Object,
       required: true,
     },
-    projectFullPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    pipelineJobsPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   computed: {
     shouldShowGraphqlVulnerabilityReport() {
@@ -95,8 +66,8 @@ export default {
     },
   },
   created() {
-    this.setSourceBranch(this.sourceBranch);
-    this.setPipelineJobsPath(this.pipelineJobsPath);
+    this.setSourceBranch(this.pipeline.sourceBranch);
+    this.setPipelineJobsPath(this.pipeline.jobsPath);
     this.setProjectId(this.projectId);
   },
   methods: {
@@ -117,7 +88,7 @@ export default {
       v-if="!shouldShowGraphqlVulnerabilityReport"
       :vulnerabilities-endpoint="vulnerabilitiesEndpoint"
       :lock-to-project="{ id: projectId }"
-      :pipeline-id="pipelineId"
+      :pipeline-id="pipeline.id"
       :loading-error-illustrations="loadingErrorIllustrations"
       :security-report-summary="securityReportSummary"
     >

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

@@ -39,20 +39,22 @@ export default () => {
     }),
     provide: {
       dashboardType: DASHBOARD_TYPES.PIPELINE,
+      projectFullPath,
+      dashboardDocumentation,
+      emptyStateSvgPath,
+      pipeline: {
+        id: parseInt(pipelineId, 10),
+        iid: parseInt(pipelineIid, 10),
+        jobsPath: pipelineJobsPath,
+        sourceBranch,
+      },
     },
     render(createElement) {
       return createElement(PipelineSecurityDashboard, {
         props: {
           projectId: parseInt(projectId, 10),
-          pipelineId: parseInt(pipelineId, 10),
-          pipelineIid: parseInt(pipelineIid, 10),
           vulnerabilitiesEndpoint,
-          sourceBranch,
-          dashboardDocumentation,
-          emptyStateSvgPath,
           loadingErrorIllustrations,
-          projectFullPath,
-          pipelineJobsPath,
         },
       });
     },

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

@@ -15,6 +15,7 @@ const pipelineId = 1234;
 const pipelineIid = 4321;
 const projectId = 5678;
 const sourceBranch = 'feature-branch-1';
+const jobsPath = 'my-jobs-path';
 const vulnerabilitiesEndpoint = '/vulnerabilities';
 const loadingErrorIllustrations = {
   401: '/401.svg',
@@ -28,7 +29,7 @@ describe('Pipeline Security Dashboard component', () => {
   const findSecurityDashboard = () => wrapper.findComponent(SecurityDashboard);
   const findVulnerabilityReport = () => wrapper.findComponent(VulnerabilityReport);
 
-  const factory = (options) => {
+  const factory = ({ data, stubs, provide } = {}) => {
     store = new Vuex.Store({
       modules: {
         vulnerabilities: {
@@ -51,21 +52,28 @@ describe('Pipeline Security Dashboard component', () => {
     wrapper = shallowMount(PipelineSecurityDashboard, {
       localVue,
       store,
-      propsData: {
-        dashboardDocumentation,
+      provide: {
+        projectFullPath: 'my-path',
         emptyStateSvgPath,
-        pipelineId,
-        pipelineIid,
+        dashboardDocumentation,
+        pipeline: {
+          id: pipelineId,
+          iid: pipelineIid,
+          jobsPath,
+          sourceBranch,
+        },
+        ...provide,
+      },
+      propsData: {
         projectId,
-        sourceBranch,
         vulnerabilitiesEndpoint,
         loadingErrorIllustrations,
       },
-      ...options,
+      stubs,
       data() {
         return {
           securityReportSummary: {},
-          ...options?.data,
+          ...data,
         };
       },
     });
@@ -83,7 +91,7 @@ describe('Pipeline Security Dashboard component', () => {
     it('dispatches the expected actions', () => {
       expect(store.dispatch.mock.calls).toEqual([
         ['vulnerabilities/setSourceBranch', sourceBranch],
-        ['pipelineJobs/setPipelineJobsPath', ''],
+        ['pipelineJobs/setPipelineJobsPath', jobsPath],
         ['pipelineJobs/setProjectId', 5678],
       ]);
     });