Skip to content

Edit Branch Rules: UI for Branch protection toggles

Paulina Sedlak-Jakubowska requested to merge 438970-edit-branch-rules-branch-protection-implement-toggles-2 into master

What does this MR do and why?

The code changes update the user interface of the branch rules settings page in GitLab. It introduces a new component called ProtectionToggle, which allows users to easily enable or disable protection rules for branches. The toggle displays an icon (when user cannot edit) and a title indicating the current protection status, and provides a description and a link to relevant documentation when clicked. Additionally, the code refactors the existing force push and code owner approval sections to use the new Protection Toggle component, improving the overall consistency and user experience of the branch rules settings page.

Note: These are only the UI changes. I'll be connecting the toggles to the actual edit action in the following MR. The whole page is behind a feature flag and mark as not ready for production use.

MR acceptance checklist

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

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Context Before After
ff disabled, no protection set before_ff_enabled_false_values after_ff_disabled_false_values
ff disabled, protection set before_ff_enabled_true_values after_ff_disabled_true_values
ff enabled, no protection set, cannot edit before_ff_enabled_false_values after_ff_enabled_can_not_edit_false_values
ff enabled, protection set, cannot edit before_ff_enabled_true_values after_ff_enabled_can_not_edit_true_values
ff enabled, no protection set, can edit n/a after_ff_enabled_canEdit_false_values
ff enabled, protection set, can edit n/a after_ff_enabled_canEdit_true_values

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Open Rails console. In your terminal: rails c
  2. In a project, go to Settings / Repository
  3. Expand Branch rules section.
  4. Choose an existing rule or create one.
  5. Navigate to Branch rule details page.
  6. You should see icons for Allow force push and Requires code owner approval. Their values should match what you have set in Settings / Repository / Protected branches
  7. Enable the feature flag:
Feature.enable(:edit_branch_rules)
  1. Refresh the page.
  2. You should be able to see toggles for Allow force push and Requires code owner approval, though without the actual editing. Their values should match what you have set in Settings / Repository / Protected branches

Related to #438970 (closed)

Edited by Paulina Sedlak-Jakubowska

Merge request reports