Commit 1c296a63 authored by Savas Vedova's avatar Savas Vedova

Merge branch '355514-add-submit-vuln-button' into 'master'

Add Submit Vulnerability button to empty page

See merge request gitlab-org/gitlab!83597
parents f0941b9c 1e725971
<script>
import { GlEmptyState } from '@gitlab/ui';
import { GlEmptyState, GlButton } from '@gitlab/ui';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { s__, __ } from '~/locale';
export default {
components: {
GlEmptyState,
GlButton,
},
mixins: [glFeatureFlagsMixin()],
inject: [
'emptyStateSvgPath',
'securityConfigurationPath',
'securityDashboardHelpPath',
'newVulnerabilityPath',
'canAdminVulnerability',
],
computed: {
shouldShowNewVulnerabilityButton() {
return (
this.glFeatures.newVulnerabilityForm &&
Boolean(this.newVulnerabilityPath) &&
this.canAdminVulnerability
);
},
},
inject: ['emptyStateSvgPath', 'securityConfigurationPath', 'securityDashboardHelpPath'],
i18n: {
title: s__('SecurityReports|Monitor vulnerabilities in your project'),
submitVulnerability: s__('SecurityReports|Submit vulnerability'),
description: s__(
'SecurityReports|Manage and track vulnerabilities identified in your project. Vulnerabilities are shown here when security testing is configured.',
),
......@@ -19,13 +38,20 @@ export default {
</script>
<template>
<gl-empty-state
:title="$options.i18n.title"
:svg-path="emptyStateSvgPath"
:description="$options.i18n.description"
:primary-button-text="$options.i18n.primaryButtonText"
:primary-button-link="securityConfigurationPath"
:secondary-button-text="$options.i18n.secondaryButtonText"
:secondary-button-link="securityDashboardHelpPath"
/>
<div>
<div v-if="shouldShowNewVulnerabilityButton" class="gl-my-4 gl-text-right">
<gl-button :href="newVulnerabilityPath" class="gl-ml-auto" icon="plus">
{{ $options.i18n.submitVulnerability }}
</gl-button>
</div>
<gl-empty-state
:title="$options.i18n.title"
:svg-path="emptyStateSvgPath"
:description="$options.i18n.description"
:primary-button-text="$options.i18n.primaryButtonText"
:primary-button-link="securityConfigurationPath"
:secondary-button-text="$options.i18n.secondaryButtonText"
:secondary-button-link="securityDashboardHelpPath"
/>
</div>
</template>
......@@ -181,7 +181,9 @@ module EE
no_vulnerabilities_svg_path: image_path('illustrations/issues.svg'),
dashboard_documentation: help_page_path('user/application_security/security_dashboard/index'),
project_full_path: project.full_path,
security_configuration_path: project_security_configuration_path(@project)
security_configuration_path: project_security_configuration_path(@project),
can_admin_vulnerability: can?(current_user, :admin_vulnerability, project).to_s,
new_vulnerability_path: new_project_security_vulnerability_path(@project)
}.merge!(security_dashboard_pipeline_data(project))
else
{
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Project report not configured component matches snapshot 1`] = `"<gl-empty-state-stub title=\\"Monitor vulnerabilities in your project\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in your project. Vulnerabilities are shown here when security testing is configured.\\" primarybuttonlink=\\"/configuration\\" primarybuttontext=\\"Configure security testing\\" secondarybuttonlink=\\"/help\\" secondarybuttontext=\\"Learn more\\" invertindarkmode=\\"true\\"></gl-empty-state-stub>"`;
exports[`Project report not configured component when button is shown matches the snapshot 1`] = `
"<div>
<div class=\\"gl-my-4 gl-text-right\\">
<gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"plus\\" buttontextclasses=\\"\\" href=\\"/vulnerability/new\\" class=\\"gl-ml-auto\\">
Submit vulnerability
</gl-button-stub>
</div>
<gl-empty-state-stub title=\\"Monitor vulnerabilities in your project\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in your project. Vulnerabilities are shown here when security testing is configured.\\" primarybuttonlink=\\"/configuration\\" primarybuttontext=\\"Configure security testing\\" secondarybuttonlink=\\"/help\\" secondarybuttontext=\\"Learn more\\" invertindarkmode=\\"true\\"></gl-empty-state-stub>
</div>"
`;
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import ReportNotConfiguredProject from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_project.vue';
......@@ -6,22 +7,50 @@ describe('Project report not configured component', () => {
const emptyStateSvgPath = '/placeholder.svg';
const securityConfigurationPath = '/configuration';
const securityDashboardHelpPath = '/help';
const newVulnerabilityPath = '/vulnerability/new';
const createComponent = () => {
const findButton = () => wrapper.findComponent(GlButton);
const createComponent = ({ provide } = {}) => {
wrapper = shallowMount(ReportNotConfiguredProject, {
provide: {
emptyStateSvgPath,
securityConfigurationPath,
securityDashboardHelpPath,
newVulnerabilityPath,
...provide,
},
});
};
beforeEach(() => {
createComponent();
describe.each`
provide | expectedShow
${{ newVulnerabilityPath: '', canAdminVulnerability: true, glFeatures: { newVulnerabilityForm: true } }} | ${false}
${{ newVulnerabilityPath, canAdminVulnerability: false, glFeatures: { newVulnerabilityForm: true } }} | ${false}
${{ newVulnerabilityPath, canAdminVulnerability: true, glFeatures: { newVulnerabilityForm: false } }} | ${false}
${{ newVulnerabilityPath, canAdminVulnerability: true, glFeatures: { newVulnerabilityForm: true } }} | ${true}
`('should display or hide the button based on the condition', ({ provide, expectedShow }) => {
beforeEach(() => {
createComponent({ provide });
});
it(`shows the button: ${expectedShow}`, () => {
expect(findButton().exists()).toBe(expectedShow);
});
});
it('matches snapshot', () => {
expect(wrapper.html()).toMatchSnapshot();
describe('when button is shown', () => {
beforeEach(() => {
createComponent({
provide: {
canAdminVulnerability: true,
glFeatures: { newVulnerabilityForm: true },
},
});
});
it('matches the snapshot', () => {
expect(wrapper.html()).toMatchSnapshot();
});
});
});
......@@ -197,7 +197,9 @@ RSpec.describe ProjectsHelper do
project_full_path: project.full_path,
no_vulnerabilities_svg_path: start_with('/assets/illustrations/issues-'),
dashboard_documentation: '/help/user/application_security/security_dashboard/index',
security_configuration_path: end_with('/configuration')
security_configuration_path: end_with('/configuration'),
can_admin_vulnerability: 'true',
new_vulnerability_path: end_with('/security/vulnerabilities/new')
}
end
......
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