FE: Disable "Unprotect" button when policy is in place

Why are we doing this work

• disable Unprotect protected branch option in the Merge Request Settings (/-/settings/repository#ProtectedBranches)

Relevant links

• More discussion on the design at #387048[Protected_branch.png]

Non-functional requirements

• Documentation:
• Feature flag:
• Testing:

Implementation plan

• frontend update app/views/protected_branches/shared/_protected_branch.html.haml to disable Unprotect button if a policy is preventing it
• frontend add popover guiding the user
  • title: Security policy overwrites this setting
  • desc: This can't be change because one or more security policy is overwritten this setting. You can change the settings in security policies. Learn more. where security policies links to the project's /-/security/policies and Learn more. links to https://docs.gitlab.com/ee/user/application_security/policies/scan-result-policies.html

Something like the below

diff --git a/app/views/protected_branches/shared/_protected_branch.html.haml b/app/views/protected_branches/shared/_protected_branch.html.haml
index 93c84e67d817..593439f6a213 100644
--- a/app/views/protected_branches/shared/_protected_branch.html.haml
+++ b/app/views/protected_branches/shared/_protected_branch.html.haml
@@ -1,6 +1,10 @@
 - can_admin_entity = protected_branch_can_admin_entity?(protected_branch_entity)
 - url = protected_branch_path_by_entity(protected_branch, protected_branch_entity)
 - protected_branch_test_type = protected_branch.project_level? ? 'project-level' : 'group-level'
+- security_policies_url = help_page_path('subscriptions/self_managed/index', anchor: 'billable-users')
+- security_policies_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer nofollow">'.html_safe % { url: security_policies_url }
+- learn_more_url = help_page_path('subscriptions/self_managed/index', anchor: 'billable-users')
+- learn_more_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer nofollow">'.html_safe % { url: learn_more_url }
 
 %tr.js-protected-branch-edit-form{ data: { url: url, testid: 'protected-branch', test_type: protected_branch_test_type } }
   %td{ class: 'gl-vertical-align-middle!', data: { label: s_("ProtectedBranch|Branch") } }
@@ -27,4 +31,12 @@
         %span.has-tooltip{ data: { container: 'body' }, title: s_('ProtectedBranch|Inherited - This setting can be changed at the group level'), 'aria-hidden': 'true' }
           = sprite_icon 'lock'
       - else
-        = link_button_to s_('ProtectedBranch|Unprotect'), [protected_branch_entity, protected_branch, { update_section: 'js-protected-branches-settings' }], disabled: local_assigns[:disabled], aria: { label: s_('ProtectedBranch|Unprotect branch') }, data: { confirm: s_('ProtectedBranch|Branch will be writable for developers. Are you sure?'), confirm_btn_variant: 'danger' }, method: :delete, variant: :danger, category: :secondary, size: :small
+        = link_button_to s_('ProtectedBranch|Unprotect'),
+          [protected_branch_entity, protected_branch, { update_section: 'js-protected-branches-settings' }],
+          disabled: local_assigns[:disabled],
+          aria: { label: s_('ProtectedBranch|Unprotect branch') },
+          data: { confirm: s_('ProtectedBranch|Branch will be writable for developers. Are you sure?'), confirm_btn_variant: 'danger', container: "body", toggle: "popover", placement: "top", html: "true", trigger: "focus", content: s_("SecurityOrchestration|This can't be change because one or more security policy is overwritten this setting. You can change the settings in %{security_policies_link_start}security policies%{security_policies_link_end}. %{learn_more_link_start}Learn more%{learn_more_link_end}.").html_safe % { security_policies_link_start: security_policies_link_start, security_policies_link_end: '</a>'.html_safe, learn_more_link_start: learn_more_link_start, learn_more_link_end: '</a>'.html_safe } },
+          method: :delete,
+          variant: :danger,
+          category: :secondary,
+          size: :small

Verification steps

1. Upload a GitLab Ultimate license
2. Navigate to a project => Settings => Repository => Protected Branches (/-/settings/repository)
3. Protect a branch. Verify it can be unprotected
4. Navigate to the project => Secure => Policies => New policy => Scan Result Policy
5. Add a policy with the setting Block users from unprotecting branches selected
6. Navigate to the project => Settings => Repository => Protected Branches (/-/settings/repository)
7. Verify the Unprotect button is disabled and has a popover