Draft: Add minimum coverage threshold to Coverage-Check approval rule (Frontend)
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:
- Backend - Database, service logic, REST API, GraphQL (!224343 (closed))
- Frontend (this MR) - Settings UI, MR widget feedback, blockage reason display
- Documentation (!224375 (closed))
Problem
After the backend added coverage_minimum_threshold and blockage_reason in !224343 (closed), there is no way for users to:
- Configure the threshold in the UI
- 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
- #6284
- !224343 (closed) (Backend MR)
Screenshots or screen recordings
| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
- Apply backend changes from !224343 (closed)
- Create a Coverage-Check approval rule with a threshold via Settings > Merge requests > Approval rules
- Create a MR with a pipeline that has coverage below the threshold
- 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
blockageReasonisnull, nothing is displayed. - No new API calls introduced. Uses existing GraphQL fields added in !224343 (closed).
-
All user-facing strings are internationalized with
s__(),__(), andsprintf. - 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



