Loading
Apply the prototype's layout to the policy editor
What does this MR do and why?
This merge request refreshes the visual design of the policy editor interface. Key changes include:
- The policy name and description fields are extracted into their own reusable component, making the header cleaner and easier to maintain.
- Step navigation controls and the enforcement mode selector are moved into a dedicated controls component, simplifying the main wizard layout.
- The enforcement mode options (Enforce, Warn, Audit) now include descriptive text explaining what each mode does, and their icons are updated to clearer status-style icons.
- Various styling tweaks improve spacing, typography, and visual consistency throughout — for example, borders are more subtle, text weights are adjusted, and icon containers are given a rounded background.
- The expand/collapse toggle on policy entries is removed, so configuration fields are always visible rather than hidden behind a button click.
- The bottom action bar (Cancel/Back/Next buttons) is now sticky, staying visible at the bottom of the screen as the user scrolls through the policy canvas.
- Segment button selection now uses the standard library "selected" treatment instead of custom border styling.
Fourth MR of the chain from https://gitlab.com/gitlab-org/gitlab/-/issues/607341:
- !248392 (merged) — catalog categories
- !248394 (merged) — building blocks
- !247891 (merged) — the Build policy step (this MR's target; retargets to
masteras the chain merges) - This MR — prototype styling
References
Screenshots or screen recordings
UI change — screenshots required. TODO before marking ready:
| Before | After |
|---|---|
![]() |
![]() |
![]() |
How to set up and validate locally
The Policy Store is behind a flag and a two-level experiment opt-in:
-
Enable the feature flag:
Feature.enable(:security_policies_v2) -
Enable the instance setting:
ApplicationSetting.current.update!(policy_store_experiment_enabled: true) -
Enable it for a top-level group with an Ultimate licence:
Group.find_by_full_path('your-group').namespace_settings.update!(policy_store_experiment_enabled: true) -
Go to Group → Secure → Policy Store, then New policy.
-
On Build policy: pick the Deployment trigger, then a rule or two, then an action. Check that
- selecting a second trigger replaces the first
- each selected entry expands into its own config form
- the Rego rule is pre-filled with the deployment gate template and Browse templates works
- values survive clicking Next to Scope and Back again
yarn jest ee/spec/frontend/policy_storeMR 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.
Edited by Artur Fedorov


