Commit fe58a584 authored by Miguel Rincon's avatar Miguel Rincon

Merge branch '341359-dast-view-scans-create-scan-link' into 'master'

Add on-demands scans index page header

See merge request gitlab-org/gitlab!72180
parents cd60a5bf bab7124d
<script>
import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
import { s__ } from '~/locale';
import { HELP_PAGE_PATH } from '../constants';
export default {
HELP_PAGE_PATH,
components: {
GlEmptyState,
GlSprintf,
GlLink,
},
inject: ['newDastScanPath', 'helpPagePath', 'emptyStateSvgPath'],
inject: ['newDastScanPath', 'emptyStateSvgPath'],
props: {
title: {
type: String,
......@@ -19,7 +21,7 @@ export default {
type: String,
required: false,
default: s__(
'OnDemandScans|On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Lean more%{learnMoreLinkEnd}.',
'OnDemandScans|On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Learn more%{learnMoreLinkEnd}.',
),
},
noPrimaryButton: {
......@@ -54,7 +56,7 @@ export default {
<template #description>
<gl-sprintf :message="text">
<template #learnMoreLink="{ content }">
<gl-link :href="helpPagePath">{{ content }}</gl-link>
<gl-link :href="$options.HELP_PAGE_PATH">{{ content }}</gl-link>
</template>
</gl-sprintf>
</template>
......
<script>
import { GlTabs } from '@gitlab/ui';
import { GlButton, GlLink, GlSprintf, GlTabs } from '@gitlab/ui';
import { s__ } from '~/locale';
import ConfigurationPageLayout from 'ee/security_configuration/components/configuration_page_layout.vue';
import { HELP_PAGE_PATH } from '../constants';
import AllTab from './tabs/all.vue';
import RunningTab from './tabs/running.vue';
import FinishedTab from './tabs/finished.vue';
......@@ -23,14 +26,20 @@ const TABS = {
export default {
TABS,
HELP_PAGE_PATH,
components: {
GlButton,
GlLink,
GlSprintf,
GlTabs,
ConfigurationPageLayout,
AllTab,
RunningTab,
FinishedTab,
ScheduledTab,
EmptyState,
},
inject: ['newDastScanPath'],
data() {
return {
activeTabIndex: 0,
......@@ -57,12 +66,43 @@ export default {
this.activeTabIndex = tabIndex;
}
},
i18n: {
title: s__('OnDemandScans|On-demand scans'),
newScanButtonLabel: s__('OnDemandScans|New DAST scan'),
description: s__(
'OnDemandScans|On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Learn more%{learnMoreLinkEnd}.',
),
},
};
</script>
<template>
<gl-tabs v-if="hasData" v-model="activeTab">
<component :is="tab.component" v-for="(tab, key) in $options.TABS" :key="key" :item-count="0" />
</gl-tabs>
<configuration-page-layout v-if="hasData">
<template #heading>
{{ $options.i18n.title }}
</template>
<template #actions>
<gl-button variant="confirm" :href="newDastScanPath" data-testid="new-scan-link">
{{ $options.i18n.newScanButtonLabel }}
</gl-button>
</template>
<template #description>
<gl-sprintf :message="$options.i18n.description">
<template #learnMoreLink="{ content }">
<gl-link :href="$options.HELP_PAGE_PATH" data-testid="help-page-link">{{
content
}}</gl-link>
</template>
</gl-sprintf>
</template>
<gl-tabs v-model="activeTab">
<component
:is="tab.component"
v-for="(tab, key) in $options.TABS"
:key="key"
:item-count="0"
/>
</gl-tabs>
</configuration-page-layout>
<empty-state v-else />
</template>
import { helpPagePath } from '~/helpers/help_page_helper';
export const HELP_PAGE_PATH = helpPagePath('user/application_security/dast/index', {
anchor: 'on-demand-scans',
});
......@@ -8,14 +8,13 @@ export default () => {
return null;
}
const { newDastScanPath, helpPagePath, emptyStateSvgPath } = el.dataset;
const { newDastScanPath, emptyStateSvgPath } = el.dataset;
return new Vue({
el,
router: createRouter(),
provide: {
newDastScanPath,
helpPagePath,
emptyStateSvgPath,
},
render(h) {
......
......@@ -37,6 +37,7 @@ import {
SCANNER_PROFILES_QUERY,
SITE_PROFILES_QUERY,
} from '../settings';
import { HELP_PAGE_PATH } from '../../on_demand_scans/constants';
import ProfileConflictAlert from './profile_selector/profile_conflict_alert.vue';
import ScannerProfileSelector from './profile_selector/scanner_profile_selector.vue';
import SiteProfileSelector from './profile_selector/site_profile_selector.vue';
......@@ -68,6 +69,7 @@ export default {
enabledRefTypes: [REF_TYPE_BRANCHES],
saveAndRunScanBtnId: 'scan-submit-button',
saveScanBtnId: 'scan-save-button',
helpPagePath: HELP_PAGE_PATH,
components: {
RefSelector,
ProfileConflictAlert,
......@@ -104,7 +106,7 @@ export default {
SITE_PROFILES_QUERY,
),
},
inject: ['projectPath', 'helpPagePath', 'profilesLibraryPath'],
inject: ['projectPath', 'profilesLibraryPath'],
props: {
defaultBranch: {
type: String,
......@@ -346,7 +348,7 @@ export default {
"
>
<template #learnMoreLink="{ content }">
<gl-link :href="helpPagePath">
<gl-link :href="$options.helpPagePath" data-testid="help-page-link">
{{ content }}
</gl-link>
</template>
......
......@@ -16,7 +16,6 @@ export default () => {
siteProfilesLibraryPath,
newSiteProfilePath,
newScannerProfilePath,
helpPagePath,
} = el.dataset;
const dastScan = el.dataset.dastScan ? JSON.parse(el.dataset.dastScan) : null;
const timezones = JSON.parse(el.dataset.timezones);
......@@ -26,7 +25,6 @@ export default () => {
apolloProvider,
provide: {
projectPath,
helpPagePath,
profilesLibraryPath,
scannerProfilesLibraryPath,
siteProfilesLibraryPath,
......
<template>
<article>
<slot name="alert"></slot>
<header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
<h4>
<slot name="heading"></slot>
</h4>
<p>
<slot name="description"></slot>
</p>
<header
class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between"
>
<div>
<h4 class="gl-mt-0">
<slot name="heading"></slot>
</h4>
<p>
<slot name="description"></slot>
</p>
</div>
<div>
<slot name="actions"></slot>
</div>
</header>
<slot></slot>
</article>
......
......@@ -2,14 +2,14 @@
module Projects::OnDemandScansHelper
def on_demand_scans_data(project)
base_data.merge({
{
'new-dast-scan-path' => new_project_on_demand_scan_path(project),
'empty-state-svg-path' => image_path('illustrations/empty-state/ondemand-scan-empty.svg')
})
}
end
def on_demand_scans_form_data(project)
base_data.merge({
{
'default-branch' => project.default_branch,
'project-path' => project.path_with_namespace,
'profiles-library-path' => project_security_configuration_dast_scans_path(project),
......@@ -18,14 +18,6 @@ module Projects::OnDemandScansHelper
'new-scanner-profile-path' => new_project_security_configuration_dast_scans_dast_scanner_profile_path(project),
'new-site-profile-path' => new_project_security_configuration_dast_scans_dast_site_profile_path(project),
'timezones' => timezone_data(format: :full).to_json
})
end
private
def base_data
{
'help-page-path' => help_page_path('user/application_security/dast/index', anchor: 'on-demand-scans')
}
end
end
......@@ -35,9 +35,9 @@ exports[`EmptyState renders properly 1`] = `
On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects.
<a
class="gl-link"
href="/help/page/path"
href="/help/user/application_security/dast/index#on-demand-scans"
>
Lean more
Learn more
</a>
.
</p>
......
......@@ -15,7 +15,6 @@ describe('EmptyState', () => {
wrapper = mount(EmptyState, {
provide: {
newDastScanPath: '/on_demand_scans/new',
helpPagePath: '/help/page/path',
emptyStateSvgPath: '/empty/state/svg/path',
},
propsData,
......
import { shallowMount } from '@vue/test-utils';
import { GlTabs } from '@gitlab/ui';
import { GlTabs, GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import OnDemandScans from 'ee/on_demand_scans/components/on_demand_scans.vue';
import ConfigurationPageLayout from 'ee/security_configuration/components/configuration_page_layout.vue';
import { createRouter } from 'ee/on_demand_scans/router';
import AllTab from 'ee/on_demand_scans/components/tabs/all.vue';
import RunningTab from 'ee/on_demand_scans/components/tabs/running.vue';
......@@ -12,7 +13,12 @@ describe('OnDemandScans', () => {
let wrapper;
let router;
// Props
const newDastScanPath = '/on_demand_scans/new';
// Finders
const findNewScanLink = () => wrapper.findByTestId('new-scan-link');
const findHelpPageLink = () => wrapper.findByTestId('help-page-link');
const findTabs = () => wrapper.findComponent(GlTabs);
const findAllTab = () => wrapper.findComponent(AllTab);
const findRunningTab = () => wrapper.findComponent(RunningTab);
......@@ -21,8 +27,15 @@ describe('OnDemandScans', () => {
const findEmptyState = () => wrapper.findComponent(EmptyState);
const createComponent = () => {
wrapper = shallowMount(OnDemandScans, {
wrapper = shallowMountExtended(OnDemandScans, {
router,
provide: {
newDastScanPath,
},
stubs: {
ConfigurationPageLayout,
GlSprintf,
},
});
};
......@@ -46,6 +59,22 @@ describe('OnDemandScans', () => {
wrapper.setData({ hasData: true });
});
it('renders a link to the docs', () => {
const link = findHelpPageLink();
expect(link.exists()).toBe(true);
expect(link.attributes('href')).toBe(
'/help/user/application_security/dast/index#on-demand-scans',
);
});
it('renders a link to create a new scan', () => {
const link = findNewScanLink();
expect(link.exists()).toBe(true);
expect(link.attributes('href')).toBe(newDastScanPath);
});
it('renders the tabs if there is data', async () => {
expect(findAllTab().exists()).toBe(true);
expect(findRunningTab().exists()).toBe(true);
......
......@@ -21,7 +21,6 @@ import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
import * as responses from '../mocks/apollo_mocks';
import { scannerProfiles, siteProfiles } from '../mocks/mock_data';
const helpPagePath = '/application_security/dast/index#on-demand-scans';
const dastSiteValidationDocsPath = '/application_security/dast/index#dast-site-validation';
const projectPath = 'group/project';
const defaultBranch = 'main';
......@@ -68,6 +67,7 @@ describe('OnDemandScansForm', () => {
const findForm = () => wrapper.find(GlForm);
const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
const findHelpPageLink = () => findByTestId('help-page-link');
const findNameInput = () => findByTestId('dast-scan-name-input');
const findBranchInput = () => findByTestId('dast-scan-branch-input');
const findDescriptionInput = () => findByTestId('dast-scan-description-input');
......@@ -156,7 +156,6 @@ describe('OnDemandScansForm', () => {
mocks: defaultMocks,
provide: {
projectPath,
helpPagePath,
profilesLibraryPath,
scannerProfilesLibraryPath,
siteProfilesLibraryPath,
......@@ -210,6 +209,16 @@ describe('OnDemandScansForm', () => {
expect(wrapper.findComponent(ScanSchedule).exists()).toBe(true);
});
it('renders a link to the docs', () => {
createComponent();
const link = findHelpPageLink();
expect(link.exists()).toBe(true);
expect(link.attributes('href')).toBe(
'/help/user/application_security/dast/index#on-demand-scans',
);
});
it('populates the branch input with the default branch', () => {
createComponent();
......
......@@ -4,15 +4,23 @@ exports[`Security Configuration Page Layout component matches the snapshot 1`] =
<article>
Page alert
<header
class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between"
>
<h4>
Page title
</h4>
<div>
<h4
class="gl-mt-0"
>
Page title
</h4>
<p>
Scanner description
</p>
</div>
<p>
Scanner description
</p>
<div>
Action
</div>
</header>
<div>
......
......@@ -9,6 +9,7 @@ describe('Security Configuration Page Layout component', () => {
slots: {
alert: 'Page alert',
heading: 'Page title',
actions: 'Action',
description: 'Scanner description',
default: '<div>form</div>',
},
......
......@@ -9,7 +9,6 @@ RSpec.describe Projects::OnDemandScansHelper do
it 'returns proper data' do
expect(helper.on_demand_scans_data(project)).to match(
'new-dast-scan-path' => "/#{project.full_path}/-/on_demand_scans/new",
'help-page-path' => "/help/user/application_security/dast/index#on-demand-scans",
'empty-state-svg-path' => match_asset_path('/assets/illustrations/empty-state/ondemand-scan-empty.svg')
)
end
......@@ -26,7 +25,6 @@ RSpec.describe Projects::OnDemandScansHelper do
it 'returns proper data' do
expect(helper.on_demand_scans_form_data(project)).to match(
'help-page-path' => "/help/user/application_security/dast/index#on-demand-scans",
'default-branch' => "default-branch",
'project-path' => "foo/bar",
'profiles-library-path' => "/#{project.full_path}/-/security/configuration/dast_scans",
......
......@@ -11,8 +11,4 @@ RSpec.describe "projects/on_demand_scans/index", type: :view do
it 'renders Vue app root' do
expect(rendered).to have_selector('#js-on-demand-scans')
end
it 'passes on-demand scans docs page URL' do
expect(rendered).to include '/help/user/application_security/dast/index#on-demand-scans'
end
end
......@@ -23802,7 +23802,7 @@ msgstr ""
msgid "OnDemandScans|On-demand scans"
msgstr ""
msgid "OnDemandScans|On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Lean more%{learnMoreLinkEnd}."
msgid "OnDemandScans|On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Learn more%{learnMoreLinkEnd}."
msgstr ""
msgid "OnDemandScans|On-demand scans run outside the DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Learn more%{learnMoreLinkEnd}"
......
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