Commit d86e25c5 authored by Martin Wortschack's avatar Martin Wortschack

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

Generate illustrations URLs in the backend

See merge request gitlab-org/gitlab!25375
parents c9608bda b3bbdc78
......@@ -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,
},
});
},
......
......@@ -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>
......
......@@ -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>
......@@ -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
......
......@@ -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
......
---
title: Generate illustrations URLs in the backend
merge_request: 25375
author:
type: fixed
......@@ -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",
}
`;
......@@ -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,
},
});
};
......
......@@ -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,
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment