6 files changed, 37 insertions, 11 deletions
diff --git a/app/views/projects/protected_branches/shared/_index.html.haml b/app/views/projects/protected_branches/_index.html.haml
index 348fe227f49..348fe227f49 100644
--- a/app/views/projects/protected_branches/shared/_index.html.haml
+++ b/app/views/projects/protected_branches/_index.html.haml
diff --git a/app/views/projects/protected_branches/_update_protected_branch.html.haml b/app/views/projects/protected_branches/_update_protected_branch.html.haml
index 74bfaa9ff80..3e00c0820d7 100644
--- a/app/views/projects/protected_branches/_update_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_update_protected_branch.html.haml
@@ -1,10 +1,16 @@
+- merge_access_level = protected_branch.merge_access_levels.first
+- push_access_level = protected_branch.push_access_levels.first
+
 %td
-  = hidden_field_tag "allowed_to_merge_#{protected_branch.id}", protected_branch.merge_access_levels.first.access_level
-  = dropdown_tag( (protected_branch.merge_access_levels.first.humanize || 'Select') ,
-                 options: { toggle_class: 'js-allowed-to-merge qa-allowed-to-merge', dropdown_class: 'dropdown-menu-selectable js-allowed-to-merge-container capitalize-header',
-                 data: { field_name: "allowed_to_merge_#{protected_branch.id}", access_level_id: protected_branch.merge_access_levels.first.id }})
+  = render 'projects/settings/access_level_dropdown',
+    verb: 'merge',
+    protected_ref: protected_branch,
+    access_level: merge_access_level,
+    extra_toggle_classes: %w[qa-allowed-to-merge]
+
 %td
-  = hidden_field_tag "allowed_to_push_#{protected_branch.id}", protected_branch.push_access_levels.first.access_level
-  = dropdown_tag( (protected_branch.push_access_levels.first.humanize || 'Select') ,
-                 options: { toggle_class: 'js-allowed-to-push', dropdown_class: 'dropdown-menu-selectable js-allowed-to-push-container capitalize-header',
-                 data: { field_name: "allowed_to_push_#{protected_branch.id}", access_level_id: protected_branch.push_access_levels.first.id }})
+  = render 'projects/settings/access_level_dropdown',
+    verb: 'push',
+    protected_ref: protected_branch,
+    access_level: push_access_level,
+    extra_toggle_classes: %w[qa-allowed-to-push]
diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/_index.html.haml
index 8ba8d05c93d..8ba8d05c93d 100644
--- a/app/views/projects/protected_tags/shared/_index.html.haml
+++ b/app/views/projects/protected_tags/_index.html.haml
diff --git a/app/views/projects/settings/_access_level_dropdown.html.haml b/app/views/projects/settings/_access_level_dropdown.html.haml
new file mode 100644
index 00000000000..3467e5133d3
--- /dev/null
+++ b/app/views/projects/settings/_access_level_dropdown.html.haml
@@ -0,0 +1,20 @@
+- verb = local_assigns.fetch(:verb)
+- protected_ref = local_assigns.fetch(:protected_ref)
+- access_level = local_assigns.fetch(:access_level)
+- disabled = local_assigns.fetch(:disabled, false)
+- filter = local_assigns.fetch(:filter, false)
+- extra_toggle_classes = local_assigns.fetch(:extra_toggle_classes, [])
+- extra_dropdown_classes = local_assigns.fetch(:extra_dropdown_classes, [])
+- preselected_items = local_assigns.fetch(:preselected_items, nil)
+- default_label = s_('RepositorySettingsAccessLevel|Select')
+
+= hidden_field_tag "allowed_to_#{verb}_#{protected_ref.id}", access_level
+= dropdown_tag((access_level&.humanize || default_label),
+                options: { toggle_class: %W[js-allowed-to-#{verb}].concat(extra_toggle_classes).join(' '),
+                  disabled: disabled,
+                  dropdown_class: %W[dropdown-menu-selectable js-allowed-to-#{verb}-container capitalize-header].concat(extra_dropdown_classes).join(' '),
+                  filter: filter,
+                  data: { field_name: "allowed_to_#{verb}_#{protected_ref.id}",
+                    default_label: default_label,
+                    access_level_id: access_level&.id,
+                    preselected_items: preselected_items } })
diff --git a/app/views/projects/settings/repository/_protected_refs.html.haml b/app/views/projects/settings/repository/_protected_refs.html.haml
index 660a6df2f14..bcf6f737348 100644
--- a/app/views/projects/settings/repository/_protected_refs.html.haml
+++ b/app/views/projects/settings/repository/_protected_refs.html.haml
@@ -1,4 +1,4 @@
 - project = local_assigns.fetch(:project)
 
-= render 'projects/protected_branches/shared/index'
-= render 'projects/protected_tags/shared/index'
+= render 'projects/protected_branches/index'
+= render 'projects/protected_tags/index'
diff --git a/qa/qa/page/project/settings/repository.rb b/qa/qa/page/project/settings/repository.rb
index 1ed5f455a85..b675f0e287e 100644
--- a/qa/qa/page/project/settings/repository.rb
+++ b/qa/qa/page/project/settings/repository.rb
@@ -9,7 +9,7 @@ module QA
             element :deploy_keys_settings
           end
 
-          view 'app/views/projects/protected_branches/shared/_index.html.haml' do
+          view 'app/views/projects/protected_branches/_index.html.haml' do
             element :protected_branches_settings
           end