Edit Branch Rules: Add branch rule

Description

As part of the MVC &8075 (closed) for editing branch rules, we need to implement the ability to create/add a new branch rule.

When creating a new branch rule, the user needs to specify the branch name or pattern.

Scope

Creating a branch rule for a branch name/pattern. In the backend this is actually a ProtectedBranch record.

Branch rules typically are associated with a ProtectedBranch which connects ApprovalMergeRequestRule, {Push,Merge,Unprotect}AccessLevel, and MergeRequest::ExternalStatusCheck.

There is also a case where a branch rule will not have ProtectedBranch record when either

1. A ApprovalMergeRequestRule is configured for all branches or all protected branches.
2. A MergeRequest::ExternalStatusCheck is configured for all branches.

These two cases are outside of the scope of this issue

Implementation plan

backend

• Create a `CreateBranchRule` GraphQL mutation (#431910 - closed)
• Create a `editBranchRule` mutation (#431918 - closed)

Mockups & behaviour

Figma

• From branch rules list and "Add branch rule" is clicked:
  • Menu option for creating branch rule with branch name/pattern
    • Related to this are the options Handle "All branches" and "All protected branches" (#388129 - closed)
  • Display "Create branch rule" modal
  • Behaviour should be similar to the current protected branch experience
• Create wildcard option should only appear if the user adds an asterik * in the input field
  • This would help resolve When protecting a branch, clicking 'Create wild... (#340071 - closed)
• Clicking on "Create and continue to edit" navigates the user to "Edit branch rule" page
• Clicking on "Edit" on "Branch name or pattern"
  • Display "Update branch name or pattern" modal
• When name is updated, display toast with message "Branch rule updated"

Description	Mockup
Branch list
Create branch rule modal
Wildcard detected
Edit branch rule page (toast)
Update branch name or pattern modal