Merge branch 'pipeline-sd-loading-error-illustrations' into 'master'

Generate illustrations URLs in the backend

See merge request gitlab-org/gitlab!25375

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,
     });