Generate illustrations URLs in the backend

Moved the illustrations URLs generation to the backend to prevent an
issue where the frontend helper would be unable to retrieve assets from
the CDN

ee/app/assets/javascripts/pages/projects/pipelines/show/security_report.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import createDashboardStore from 'ee/security_dashboard/store';
 import PipelineSecurityDashboard from 'ee/security_dashboard/components/pipeline_security_dashboard.vue';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+import { LOADING_VULNERABILITIES_ERROR_CODES } from 'ee/security_dashboard/store/modules/vulnerabilities/constants';
 
 const initSecurityDashboardApp = el => {
   const {
@@ -12,8 +13,15 @@ const initSecurityDashboardApp = el => {
     sourceBranch,
     vulnerabilitiesEndpoint,
     vulnerabilityFeedbackHelpPath,
+    emptyStateUnauthorizedSvgPath,
+    emptyStateForbiddenSvgPath,
   } = el.dataset;
 
+  const loadingErrorIllustrations = {
+    [LOADING_VULNERABILITIES_ERROR_CODES.UNAUTHORIZED]: emptyStateUnauthorizedSvgPath,
+    [LOADING_VULNERABILITIES_ERROR_CODES.FORBIDDEN]: emptyStateForbiddenSvgPath,
+  };
+
   return new Vue({
     el,
     store: createDashboardStore({
@@ -29,6 +37,7 @@ const initSecurityDashboardApp = el => {
           sourceBranch,
           dashboardDocumentation,
           emptyStateSvgPath,
+          loadingErrorIllustrations,
         },
       });
     },

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

@@ -55,6 +55,11 @@ export default {
       required: false,
       default: null,
     },
+    loadingErrorIllustrations: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   computed: {
     ...mapState('vulnerabilities', ['modal', 'pageInfo', 'loadingVulnerabilitiesErrorCode']),
@@ -144,6 +149,7 @@ export default {
     <loading-error
       v-if="loadingVulnerabilitiesFailedWithRecognizedErrorCode"
       :error-code="loadingVulnerabilitiesErrorCode"
+      :illustrations="loadingErrorIllustrations"
     />
     <template v-else>
       <header>

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

@@ -2,7 +2,6 @@
 import { GlEmptyState } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import { LOADING_VULNERABILITIES_ERROR_CODES as ERROR_CODES } from '../store/modules/vulnerabilities/constants';
-import { imagePath } from '~/lib/utils/common_utils';
 
 const description = s__(
   'Security Reports|Security reports can only be accessed by authorized users.',
@@ -15,12 +14,10 @@ export default {
       description,
       primaryButtonText: __('Sign in'),
       primaryButtonLink: '/users/sign_in',
-      svgPath: imagePath('illustrations/user-not-logged-in.svg'),
     },
     [ERROR_CODES.FORBIDDEN]: {
       title: s__('Security Reports|You do not have sufficient permissions to access this report'),
       description,
-      svgPath: imagePath('illustrations/lock_promotion.svg'),
     },
   },
   components: {
@@ -32,10 +29,17 @@ export default {
       required: true,
       validator: value => Object.values(ERROR_CODES).includes(value),
     },
+    illustrations: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
 };
 </script>
 
 <template>
-  <gl-empty-state v-bind="$options.emptyStatePropsMap[errorCode]" />
+  <gl-empty-state
+    v-bind="{ ...$options.emptyStatePropsMap[errorCode], svgPath: illustrations[errorCode] }"
+  />
 </template>

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

@@ -38,6 +38,10 @@ export default {
       type: String,
       required: true,
     },
+    loadingErrorIllustrations: {
+      type: Object,
+      required: true,
+    },
   },
   created() {
     this.setSourceBranch(this.sourceBranch);
@@ -54,6 +58,7 @@ export default {
     :vulnerability-feedback-help-path="vulnerabilityFeedbackHelpPath"
     :lock-to-project="{ id: projectId }"
     :pipeline-id="pipelineId"
+    :loading-error-illustrations="loadingErrorIllustrations"
   >
     <template #emptyState>
       <gl-empty-state

ee/app/views/projects/pipelines/_tabs_content.html.haml

@@ -13,7 +13,9 @@
     project_id: project.id,
     source_branch: pipeline.source_ref,
     vulnerabilities_endpoint: vulnerabilities_endpoint_path,
-    vulnerability_feedback_help_path: help_page_path('user/application_security/index') } }
+    vulnerability_feedback_help_path: help_page_path('user/application_security/index'),
+    empty_state_unauthorized_svg_path: image_path('illustrations/user-not-logged-in.svg'),
+    empty_state_forbidden_svg_path: image_path('illustrations/lock_promotion.svg') } }
 
 - if pipeline.expose_license_scanning_data?
   #js-tab-licenses.tab-pane

ee/changelogs/unreleased/pipeline-sd-loading-error-illustrations.yml

+---
+title: Generate illustrations URLs in the backend
+merge_request: 25375
+author:
+type: fixed

ee/spec/frontend/security_dashboard/components/__snapshots__/loading_error_spec.js.snap

@@ -8,7 +8,7 @@ Object {
   "primaryButtonText": "Sign in",
   "secondaryButtonLink": null,
   "secondaryButtonText": null,
-  "svgPath": "/assets/illustrations/user-not-logged-in.svg",
+  "svgPath": "/401.svg",
   "title": "You must sign in as an authorized user to see this report",
 }
 `;
@@ -21,7 +21,7 @@ Object {
   "primaryButtonText": null,
   "secondaryButtonLink": null,
   "secondaryButtonText": null,
-  "svgPath": "/assets/illustrations/lock_promotion.svg",
+  "svgPath": "/403.svg",
   "title": "You do not have sufficient permissions to access this report",
 }
 `;

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

@@ -4,6 +4,11 @@ import { GlEmptyState } from '@gitlab/ui';
 
 import LoadingError from 'ee/security_dashboard/components/loading_error.vue';
 
+const illustrations = {
+  401: '/401.svg',
+  403: '/403.svg',
+};
+
 describe('LoadingError component', () => {
   let wrapper;
 
@@ -11,6 +16,7 @@ describe('LoadingError component', () => {
     wrapper = shallowMount(LoadingError, {
       propsData: {
         errorCode,
+        illustrations,
       },
     });
   };

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

@@ -14,6 +14,10 @@ const projectId = 5678;
 const sourceBranch = 'feature-branch-1';
 const vulnerabilitiesEndpoint = '/vulnerabilities';
 const vulnerabilityFeedbackHelpPath = '/vulnerabilities_feedback_help';
+const loadingErrorIllustrations = {
+  401: '/401.svg',
+  403: '/403.svg',
+};
 
 describe('Pipeline Security Dashboard component', () => {
   let store;
@@ -43,6 +47,7 @@ describe('Pipeline Security Dashboard component', () => {
         sourceBranch,
         vulnerabilitiesEndpoint,
         vulnerabilityFeedbackHelpPath,
+        loadingErrorIllustrations,
       },
       ...options,
     });