Create layout for new vulnerability details

What does this MR do and why?

Adds the page layout for the redesigned vulnerability details page, behind the new vulnerability_details_enrichment feature flag (wip, default off).

When the flag is enabled, the vulnerability details route renders a new layout component with four regions (header, tabs, main, sidebar) and a responsive grid that stacks the sidebar below the main column under the lg breakpoint.

When the flag is disabled, the current vulnerability details page renders.

The scope is intentionally small: this is the layout only. The slots render placeholder text for now; follow-up MRs port the header, tabs, main content, and sidebar into the new layout.

References

  • Issue: #599150
  • Feature flag: vulnerability_details_enrichment

Screenshots or screen recordings

Before After
Screenshot_2026-05-07_at_10.55.57 Screenshot_2026-05-07_at_10.55.23

How to set up and validate locally

  1. Enable the feature flag at http://gdk.test:3000/rails/features/vulnerability_details_enrichment
  2. Visit any vulnerability details page, for example http://gdk.test:3000/<group>/<project>/-/security/vulnerabilities/<id>.
  3. Confirm the new layout renders with the four placeholder regions (header, tabs, main, sidebar).
  4. Resize the viewport below the lg breakpoint and confirm the sidebar stacks below the main column.
  5. Disable the flag and confirm the current page renders.

You can also view the layout in isolation via Storybook: yarn storybook -> ee/vulnerabilities/vulnerability_details_enrichment/layout.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #599150

Edited by David Pisek

Merge request reports

Loading