[Bug] The project merge request approvals setting frontend does not support multiple protected branches

Problem description

The project setting > merge requests > merge request approvals frontend does not support multiple protected branches, however the API does which creates a confusing user experience. It's possible to create / update a status check with multiple branches using the API while the frontend will only display a single branch:

• 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.

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 approval.
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

Todo