Frontend Implementation of Code Owner Approval

Issue: https://gitlab.com/gitlab-org/gitlab-ee/issues/13251

CE port: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/32845

What does this MR do?

Add Code Owners Approval toggle options to Protect a branch form and Protected branch table.

Form

Table

Note

This feature is only available if the merge request approval settings "require approval from code owners"

Test Case

Code Owner Approval option is only available if Merge request approvals has "require approval from code owners" checked

Check "Require approval from code owners"

• Navigate to the General Settings Page (http://localhost:3001/h5bp/html5-boilerplate/edit)
• Check "Require approval from code owners"
• Visit Repository Settings Page (http://localhost:3001/h5bp/html5-boilerplate/-/settings/repository)
• The Protected Branches:
• Protect a branch Form does have "Require approval from code owners" options
• Protected branch Table does have "Code owner approval" column

Uncheck "Require approval from code owners"

• Navigate to the General Settings Page (http://localhost:3001/h5bp/html5-boilerplate/edit)
• Uncheck "Require approval from code owners"
• Visit Repository Settings Page (http://localhost:3001/h5bp/html5-boilerplate/-/settings/repository)
• The Protected Branches:
• Protect a branch Form does not have "Require approval from code owners" options
• Protected branch Table does not have "Code owner approval" column

Form Create a new Protected Branch with the correct Code Owner Approval state

Create a Protect a branch by filling out the form:

• Branch > Select a branch
• Allowed to merge > Select "Maintainers"
• Allowed to push > Select "No one"
• Require approval from code owners > Toggle true
• The new protected branch has "true" state of Code Owner Approval

Create another Protect a branch:

• Require approval from code owners > Toggle false
• The new protected branch has "false" state of Code Owner Approval

Editing the Protected Branch saves state after refresh

In the Code Owner approval table

• Toggle it to false
• Refresh page
• the state is false
• Toggle it to true
• Refresh page
• the state is true

Screenshots

Does this MR meet the acceptance criteria?

Conformity

• Changelog entry
• Documentation created/updated or follow-up review issue created
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Performance and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team

Closes #13251 (closed)