Skip to content

Add on-demands scans index page header

What does this MR do and why?

This leverages the ConfigurationPageLayout component to add a header to the on-demand scans index page. The header contains a help text and a link to the on-demands scans form. To make room for the link, ConfigurationPageLayout has been extended with a new actions slot.

Screenshots or screen recordings

Before After
Screen_Shot_2021-10-12_at_10.25.53_AM Screen_Shot_2021-10-12_at_10.33.03_AM

How to set up and validate locally

The app currently assumes that there is no pipeline to show and renders an empty state instead of the tabs. To get the tabs to show up, an internal property needs to be changed manually. This will of course not be needed anymore once the app fetches actual data from the API.

  1. Enable the index page.

    Feature.enable(:dast_view_scans)
  2. Force the app to show the tabs instead of the empty state by applying the following patch:

    diff --git a/ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue b/ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue
    index dbc206b83ae..1d963dec35e 100644
    --- a/ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue
    +++ b/ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue
    @@ -41,7 +41,7 @@ export default {
       data() {
         return {
           activeTabIndex: 0,
    -      hasData: false,
    +      hasData: true,
         };
       },
       computed: {
    

    To apply the patch, copy the whole code block and run pbpaste | git apply in the gitlab/ directory.

  3. Visit the index page at /:namespace/:project/-/on_demand_scans.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #341359 (closed)

Edited by Miguel Rincon

Merge request reports