Skip to content

Improve ConfigurationPageLayout UX

What does this MR do and why?

This improves the ConfigurationPageLayout component to accommodate for a couple UX enhancements in the on-demand scans page:

  • Adds the ability to remove the header's bottom border.
  • Have actions flow below the header on smaller viewports.

Screenshots or screen recordings

Before After
Desktop Screen_Shot_2021-11-01_at_11.35.10_AM Screen_Shot_2021-11-01_at_11.32.42_AM
Mobile Screen_Shot_2021-11-01_at_11.35.00_AM Screen_Shot_2021-11-01_at_11.32.59_AM

How to set up and validate locally

  1. Enable the on-demands scans page.
    Feature.enable(:dast_view_scans)
  2. Visit any project's on-demand scans page such as http://127.0.0.1:3000/groups/flightjs/-/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 #342955 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports