Draft: Add minimum coverage threshold to Coverage-Check approval rule (Frontend)

⚠️ This branch is based on the backend branch (6284-enforce-minimum-coverage-threshold-backend). The backend changes visible in the diff are from !224343 (closed) and should be reviewed there. To review only the frontend changes, please look at commits fa6d9b07 onwards, or use the commit-by-commit view. This MR should be merged after !224343 (closed).

What does this MR do and why?

This is MR 2 of 3 implementing the minimum coverage threshold feature for #6284:

  1. Backend - Database, service logic, REST API, GraphQL (!224343 (closed))
  2. Frontend (this MR) - Settings UI, MR widget feedback, blockage reason display
  3. Documentation (!224375 (closed))

Problem

After the backend added coverage_minimum_threshold and blockage_reason in !224343 (closed), there is no way for users to:

  1. Configure the threshold in the UI
  2. See why a Coverage-Check rule is blocking their merge request

Solution

Adds frontend support for the coverage minimum threshold feature:

  • Rule Form: Optional threshold input field (0-100) when creating/editing a Coverage-Check rule
  • Settings Rule List: Displays the configured threshold value under the rule name
  • MR Widget: Shows the blockage reason directly under the rule name in red text
  • MR Widget Popover: Shows the blockage reason in the Coverage-Check help popover

Changes

Area Details
Rule Form coverageMinimumThreshold input field, validation (0-100), conditional visibility for Coverage-Check rules
Settings Rule List Display "Minimum coverage threshold: X%" under rule name in `project_rules.vue`
MR Widget List Display `blockageReason` in red text under rule name in `approvals_list.vue`
MR Widget Popover Pass and display `blockageReason` through `approval_check_rule_popover.vue` and `approval_check_popover.vue`
GraphQL Add blockageReason to merge_request.approval_rule.fragment.graphql and approvals.query.graphql
Rule Description Updated Coverage-Check description to mention threshold capability

References

Screenshots or screen recordings

Before After
image image image image

How to set up and validate locally

  1. Apply backend changes from !224343 (closed)
  2. Create a Coverage-Check approval rule with a threshold via Settings > Merge requests > Approval rules
  3. Create a MR with a pipeline that has coverage below the threshold
  4. Verify:
    • Threshold input appears in rule form for Coverage-Check rules
    • Threshold value is displayed in the settings rule list
    • Blockage reason appears in red in the MR widget
    • Blockage reason appears in the Coverage-Check popover

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.

  • The change is backwards compatible. When blockageReason is null, nothing is displayed.
  • No new API calls introduced. Uses existing GraphQL fields added in !224343 (closed).
  • All user-facing strings are internationalized with s__(), __(), and sprintf.
  • Jest coverage: 7 new rule_form tests, 4 new popover tests (2 approval_check_popover + 2 approval_check_rule_popover), 2 new project_rules tests, 1 new approvals_list test, 1 approvals_spec mock fix.
  • Manually tested in GDK with real pipeline coverage data.
  • Prettier and ESLint pass.

Related to #6284

Edited by Norman Debald

Merge request reports

Loading