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> <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'; import { s__, __ } from '~/locale';
export default { export default {
components: { components: {
GlEmptyState, 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: { i18n: {
title: s__('SecurityReports|Monitor vulnerabilities in your project'), title: s__('SecurityReports|Monitor vulnerabilities in your project'),
submitVulnerability: s__('SecurityReports|Submit vulnerability'),
description: s__( description: s__(
'SecurityReports|Manage and track vulnerabilities identified in your project. Vulnerabilities are shown here when security testing is configured.', 'SecurityReports|Manage and track vulnerabilities identified in your project. Vulnerabilities are shown here when security testing is configured.',
), ),
...@@ -19,6 +38,12 @@ export default { ...@@ -19,6 +38,12 @@ export default {
</script> </script>
<template> <template>
<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 <gl-empty-state
:title="$options.i18n.title" :title="$options.i18n.title"
:svg-path="emptyStateSvgPath" :svg-path="emptyStateSvgPath"
...@@ -28,4 +53,5 @@ export default { ...@@ -28,4 +53,5 @@ export default {
:secondary-button-text="$options.i18n.secondaryButtonText" :secondary-button-text="$options.i18n.secondaryButtonText"
:secondary-button-link="securityDashboardHelpPath" :secondary-button-link="securityDashboardHelpPath"
/> />
</div>
</template> </template>
...@@ -181,7 +181,9 @@ module EE ...@@ -181,7 +181,9 @@ module EE
no_vulnerabilities_svg_path: image_path('illustrations/issues.svg'), no_vulnerabilities_svg_path: image_path('illustrations/issues.svg'),
dashboard_documentation: help_page_path('user/application_security/security_dashboard/index'), dashboard_documentation: help_page_path('user/application_security/security_dashboard/index'),
project_full_path: project.full_path, 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)) }.merge!(security_dashboard_pipeline_data(project))
else else
{ {
......
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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 { shallowMount } from '@vue/test-utils';
import ReportNotConfiguredProject from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_project.vue'; 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', () => { ...@@ -6,22 +7,50 @@ describe('Project report not configured component', () => {
const emptyStateSvgPath = '/placeholder.svg'; const emptyStateSvgPath = '/placeholder.svg';
const securityConfigurationPath = '/configuration'; const securityConfigurationPath = '/configuration';
const securityDashboardHelpPath = '/help'; const securityDashboardHelpPath = '/help';
const newVulnerabilityPath = '/vulnerability/new';
const createComponent = () => { const findButton = () => wrapper.findComponent(GlButton);
const createComponent = ({ provide } = {}) => {
wrapper = shallowMount(ReportNotConfiguredProject, { wrapper = shallowMount(ReportNotConfiguredProject, {
provide: { provide: {
emptyStateSvgPath, emptyStateSvgPath,
securityConfigurationPath, securityConfigurationPath,
securityDashboardHelpPath, securityDashboardHelpPath,
newVulnerabilityPath,
...provide,
}, },
}); });
}; };
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(() => { beforeEach(() => {
createComponent(); createComponent({ provide });
});
it(`shows the button: ${expectedShow}`, () => {
expect(findButton().exists()).toBe(expectedShow);
});
}); });
it('matches snapshot', () => { describe('when button is shown', () => {
beforeEach(() => {
createComponent({
provide: {
canAdminVulnerability: true,
glFeatures: { newVulnerabilityForm: true },
},
});
});
it('matches the snapshot', () => {
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
});
}); });
...@@ -197,7 +197,9 @@ RSpec.describe ProjectsHelper do ...@@ -197,7 +197,9 @@ RSpec.describe ProjectsHelper do
project_full_path: project.full_path, project_full_path: project.full_path,
no_vulnerabilities_svg_path: start_with('/assets/illustrations/issues-'), no_vulnerabilities_svg_path: start_with('/assets/illustrations/issues-'),
dashboard_documentation: '/help/user/application_security/security_dashboard/index', 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 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