Use props instead of gl global for diff endpoints

Rather than the GroupedSecurityReportsApp digging into the global
`gl.mrWidgetData` for the security report comparison paths, it's more
elegant to expose the paths on the MR widget store and provide them as
props to the component.

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -349,6 +349,12 @@ export default {
         :mr-state="mr.state"
         :target-branch-tree-path="mr.targetBranchTreePath"
         :new-pipeline-path="mr.newPipelinePath"
+        :container-scanning-comparison-path="mr.containerScanningComparisonPath"
+        :coverage-fuzzing-comparison-path="mr.coverageFuzzingComparisonPath"
+        :dast-comparison-path="mr.dastComparisonPath"
+        :dependency-scanning-comparison-path="mr.dependencyScanningComparisonPath"
+        :sast-comparison-path="mr.sastComparisonPath"
+        :secret-scanning-comparison-path="mr.secretScanningComparisonPath"
         class="js-security-widget"
       />
       <mr-widget-licenses

ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -50,6 +50,19 @@ export default class MergeRequestStore extends CEMergeRequestStore {
     super.setData(data, isRebased);
   }
 
+  setPaths(data) {
+    // Paths are set on the first load of the page and not auto-refreshed
+    super.setPaths(data);
+
+    // Security scan diff paths
+    this.containerScanningComparisonPath = data.container_scanning_comparison_path;
+    this.coverageFuzzingComparisonPath = data.coverage_fuzzing_comparison_path;
+    this.dastComparisonPath = data.dast_comparison_path;
+    this.dependencyScanningComparisonPath = data.dependency_scanning_comparison_path;
+    this.sastComparisonPath = data.sast_comparison_path;
+    this.secretScanningComparisonPath = data.secret_scanning_comparison_path;
+  }
+
   initGeo(data) {
     this.isGeoSecondaryNode = this.isGeoSecondaryNode || data.is_geo_secondary_node;
     this.geoSecondaryHelpPath = this.geoSecondaryHelpPath || data.geo_secondary_help_path;

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

@@ -190,6 +190,36 @@ export default {
       type: String,
       required: true,
     },
+    containerScanningComparisonPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    coverageFuzzingComparisonPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    dastComparisonPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    dependencyScanningComparisonPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    sastComparisonPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    secretScanningComparisonPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   componentNames,
   computed: {
@@ -305,44 +335,33 @@ export default {
     this.setPipelineId(this.pipelineId);
     this.setPipelineJobsId(this.pipelineId);
 
-    const sastDiffEndpoint = gl?.mrWidgetData?.sast_comparison_path;
-
-    if (sastDiffEndpoint && this.hasSastReports) {
-      this.setSastDiffEndpoint(sastDiffEndpoint);
+    if (this.sastComparisonPath && this.hasSastReports) {
+      this.setSastDiffEndpoint(this.sastComparisonPath);
       this.fetchSastDiff();
     }
 
-    const containerScanningDiffEndpoint = gl?.mrWidgetData?.container_scanning_comparison_path;
-
-    if (containerScanningDiffEndpoint && this.hasContainerScanningReports) {
-      this.setContainerScanningDiffEndpoint(containerScanningDiffEndpoint);
+    if (this.containerScanningComparisonPath && this.hasContainerScanningReports) {
+      this.setContainerScanningDiffEndpoint(this.containerScanningComparisonPath);
       this.fetchContainerScanningDiff();
     }
 
-    const dastDiffEndpoint = gl?.mrWidgetData?.dast_comparison_path;
-
-    if (dastDiffEndpoint && this.hasDastReports) {
-      this.setDastDiffEndpoint(dastDiffEndpoint);
+    if (this.dastComparisonPath && this.hasDastReports) {
+      this.setDastDiffEndpoint(this.dastComparisonPath);
       this.fetchDastDiff();
     }
 
-    const dependencyScanningDiffEndpoint = gl?.mrWidgetData?.dependency_scanning_comparison_path;
-
-    if (dependencyScanningDiffEndpoint && this.hasDependencyScanningReports) {
-      this.setDependencyScanningDiffEndpoint(dependencyScanningDiffEndpoint);
+    if (this.dependencyScanningComparisonPath && this.hasDependencyScanningReports) {
+      this.setDependencyScanningDiffEndpoint(this.dependencyScanningComparisonPath);
       this.fetchDependencyScanningDiff();
     }
 
-    const secretDetectionDiffEndpoint = gl?.mrWidgetData?.secret_scanning_comparison_path;
-    if (secretDetectionDiffEndpoint && this.hasSecretDetectionReports) {
-      this.setSecretDetectionDiffEndpoint(secretDetectionDiffEndpoint);
+    if (this.secretScanningComparisonPath && this.hasSecretDetectionReports) {
+      this.setSecretDetectionDiffEndpoint(this.secretScanningComparisonPath);
       this.fetchSecretDetectionDiff();
     }
 
-    const coverageFuzzingDiffEndpoint = gl?.mrWidgetData?.coverage_fuzzing_comparison_path;
-
-    if (coverageFuzzingDiffEndpoint && this.hasCoverageFuzzingReports) {
-      this.setCoverageFuzzingDiffEndpoint(coverageFuzzingDiffEndpoint);
+    if (this.coverageFuzzingComparisonPath && this.hasCoverageFuzzingReports) {
+      this.setCoverageFuzzingDiffEndpoint(this.coverageFuzzingComparisonPath);
       this.fetchCoverageFuzzingDiff();
       this.fetchPipelineJobs();
     }

ee/spec/frontend/vue_shared/security_reports/grouped_security_reports_app_spec.js

@@ -54,6 +54,12 @@ describe('Grouped security reports app', () => {
     pipelineId: 123,
     projectId: 321,
     projectFullPath: 'path',
+    containerScanningComparisonPath: CONTAINER_SCANNING_DIFF_ENDPOINT,
+    coverageFuzzingComparisonPath: COVERAGE_FUZZING_DIFF_ENDPOINT,
+    dastComparisonPath: DAST_DIFF_ENDPOINT,
+    dependencyScanningComparisonPath: DEPENDENCY_SCANNING_DIFF_ENDPOINT,
+    sastComparisonPath: SAST_DIFF_ENDPOINT,
+    secretScanningComparisonPath: SECRET_DETECTION_DIFF_ENDPOINT,
   };
 
   const defaultDastSummary = {
@@ -112,16 +118,6 @@ describe('Grouped security reports app', () => {
       },
     };
 
-    beforeEach(() => {
-      gl.mrWidgetData = gl.mrWidgetData || {};
-      gl.mrWidgetData.container_scanning_comparison_path = CONTAINER_SCANNING_DIFF_ENDPOINT;
-      gl.mrWidgetData.dependency_scanning_comparison_path = DEPENDENCY_SCANNING_DIFF_ENDPOINT;
-      gl.mrWidgetData.dast_comparison_path = DAST_DIFF_ENDPOINT;
-      gl.mrWidgetData.sast_comparison_path = SAST_DIFF_ENDPOINT;
-      gl.mrWidgetData.secret_scanning_comparison_path = SECRET_DETECTION_DIFF_ENDPOINT;
-      gl.mrWidgetData.coverage_fuzzing_comparison_path = COVERAGE_FUZZING_DIFF_ENDPOINT;
-    });
-
     describe('with error', () => {
       beforeEach(() => {
         mock.onGet(CONTAINER_SCANNING_DIFF_ENDPOINT).reply(500);
@@ -394,41 +390,32 @@ describe('Grouped security reports app', () => {
   });
 
   describe('coverage fuzzing reports', () => {
-    describe.each([true, false])(
-      'given coverage fuzzing comparison endpoint is /fuzzing and featureEnabled is %s',
-      shouldShowFuzzing => {
-        beforeEach(() => {
-          gl.mrWidgetData = gl.mrWidgetData || {};
-          gl.mrWidgetData.coverage_fuzzing_comparison_path = '/fuzzing';
-
-          createWrapper(
-            {
-              ...props,
-              enabledReports: {
-                coverageFuzzing: true,
-              },
-            },
-            {},
-            {
-              glFeatures: { coverageFuzzingMrWidget: shouldShowFuzzing },
+    describe.each([true, false])('given featureEnabled is %s', shouldShowFuzzing => {
+      beforeEach(() => {
+        createWrapper(
+          {
+            ...props,
+            enabledReports: {
+              coverageFuzzing: true,
             },
-          );
-        });
+          },
+          {},
+          {
+            glFeatures: { coverageFuzzingMrWidget: shouldShowFuzzing },
+          },
+        );
+      });
 
-        it(`${shouldShowFuzzing ? 'renders' : 'does not render'}`, () => {
-          expect(wrapper.find('[data-qa-selector="coverage_fuzzing_report"]').exists()).toBe(
-            shouldShowFuzzing,
-          );
-        });
-      },
-    );
+      it(`${shouldShowFuzzing ? 'renders' : 'does not render'}`, () => {
+        expect(wrapper.find('[data-qa-selector="coverage_fuzzing_report"]').exists()).toBe(
+          shouldShowFuzzing,
+        );
+      });
+    });
   });
 
   describe('container scanning reports', () => {
     beforeEach(() => {
-      gl.mrWidgetData = gl.mrWidgetData || {};
-      gl.mrWidgetData.container_scanning_comparison_path = CONTAINER_SCANNING_DIFF_ENDPOINT;
-
       mock.onGet(CONTAINER_SCANNING_DIFF_ENDPOINT).reply(200, containerScanningDiffSuccessMock);
 
       createWrapper({
@@ -456,9 +443,6 @@ describe('Grouped security reports app', () => {
 
   describe('dependency scanning reports', () => {
     beforeEach(() => {
-      gl.mrWidgetData = gl.mrWidgetData || {};
-      gl.mrWidgetData.dependency_scanning_comparison_path = DEPENDENCY_SCANNING_DIFF_ENDPOINT;
-
       mock.onGet(DEPENDENCY_SCANNING_DIFF_ENDPOINT).reply(200, dependencyScanningDiffSuccessMock);
 
       createWrapper({
@@ -486,9 +470,6 @@ describe('Grouped security reports app', () => {
 
   describe('dast reports', () => {
     beforeEach(() => {
-      gl.mrWidgetData = gl.mrWidgetData || {};
-      gl.mrWidgetData.dast_comparison_path = DAST_DIFF_ENDPOINT;
-
       mock.onGet(DAST_DIFF_ENDPOINT).reply(200, {
         ...dastDiffSuccessMock,
         base_report_out_of_date: true,
@@ -562,9 +543,6 @@ describe('Grouped security reports app', () => {
 
   describe('secret scanning reports', () => {
     const initSecretScan = (isEnabled = true) => {
-      gl.mrWidgetData = gl.mrWidgetData || {};
-      gl.mrWidgetData.secret_scanning_comparison_path = SECRET_DETECTION_DIFF_ENDPOINT;
-
       mock.onGet(SECRET_DETECTION_DIFF_ENDPOINT).reply(200, secretScanningDiffSuccessMock);
 
       createWrapper({
@@ -615,9 +593,6 @@ describe('Grouped security reports app', () => {
 
   describe('sast reports', () => {
     beforeEach(() => {
-      gl.mrWidgetData = gl.mrWidgetData || {};
-      gl.mrWidgetData.sast_comparison_path = SAST_DIFF_ENDPOINT;
-
       mock.onGet(SAST_DIFF_ENDPOINT).reply(200, { ...sastDiffSuccessMock });
 
       createWrapper({
@@ -643,9 +618,6 @@ describe('Grouped security reports app', () => {
 
   describe('Out of date report', () => {
     const createComponent = (extraProp, done) => {
-      gl.mrWidgetData = gl.mrWidgetData || {};
-      gl.mrWidgetData.sast_comparison_path = SAST_DIFF_ENDPOINT;
-
       mock
         .onGet(SAST_DIFF_ENDPOINT)
         .reply(200, { ...sastDiffSuccessMock, base_report_out_of_date: true });