Protected branches mismatch between /projects/:id/approval_rules API and Web UI

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Summary

Our create project-level rule API endpoint accepts an array of protected_branch_ids to apply the rule to. However, Web UI doesn't allow the same and won't display several branches. It will only display:

• The approvals list only shows the first protected branch in the array.
• The update modal only shows the last protected branch as selected.

Clicking update on the update modal does not override the protected branches array. Only selecting a branch will.

What is the current bug behaviour?

Multiple protected branches selected through API for approval rule are not visible in Web UI. Plus, there is no ability to select multiple branches through UI.

What is the expected correct behaviour?

We should make sure that multiple branches selected through API are adequately displayed in Web Ui. Additionally, there should be a way to select multiple protected branches through UI as well.

Output of checks

This bug happens on GitLab.com

Screenshots

List	Update form (with debug render)

How to recreated

1. Create a project MR approval rule with multiple protected branches using the API.
2. View the Project settings > Merge request > Merge request approvals.
3. Observe that only one branch is listed.
4. Click on Edit.
5. Observe that only one branch is selected.

Example branch array for http://localhost:3000/gitlab-org/gitlab-shell:

Click to expand

[
  { "id": 10, "name": "master", "push_access_levels": [], "merge_access_levels": [], "allow_force_push": false, "unprotect_access_levels": [], "code_owner_approval_required": false },
  { "id": 2, "name": "main", "push_access_levels": [ { "access_level": 40, "access_level_description": "Maintainers", "user_id": null, "group_id": null } ], "merge_access_levels": [ { "access_level": 40, "access_level_description": "Maintainers", "user_id": null, "group_id": null } ], "allow_force_push": false, "unprotect_access_levels": [], "code_owner_approval_required": false }
]

Proposal

• Update the ProjectRules component to show multiple branches names.
  • Due to the limited column space consider only displaying one branch name with a badge count or ellipses for the remaining branches.
• Update the protected_branches_selector.vue component to show multiple branches as selected.
  • Note! This is also proposed in related issue [Bug] The project status checks setting fronten... (#376192 - closed)
• Update the strings from Target branch and Select branch to Target branches and Select branches.
  • Note! This is also proposed in related issue [Bug] The project status checks setting fronten... (#376192 - closed)

Additional considerations

• This form is also used by license compliance. Thus this feature should also be verified when updating the form.
• This form is also used in merge request > approval rules, however the approvals branch(es) isn't applicable on merge requests UI.

Implementation plan

Todov