2 files changed, 18 insertions, 8 deletions
diff --git a/app/views/projects/protected_branches/_dropdown.html.haml b/app/views/projects/protected_branches/_dropdown.html.haml
new file mode 100644
index 00000000000..b803d932e67
--- /dev/null
+++ b/app/views/projects/protected_branches/_dropdown.html.haml
@@ -0,0 +1,17 @@
+= f.hidden_field(:name)
+
+= dropdown_tag("Protected Branch",
+               options: { title: "Pick protected branch", toggle_class: 'js-protected-branch-select js-filter-submit',
+                          filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search protected branches",
+                          footer_content: true,
+                          data: { show_no: true, show_any: true, show_upcoming: true,
+                                  selected: params[:protected_branch_name],
+                                  project_id: @project.try(:id) } }) do
+
+  %ul.dropdown-footer-list.hidden.protected-branch-select-footer-list
+    %li
+      = link_to '#', title: "New Protected Branch", class: "create-new-protected-branch" do
+        Create new
+
+:javascript
+  new ProtectedBranchSelect();
diff --git a/app/views/projects/protected_branches/index.html.haml b/app/views/projects/protected_branches/index.html.haml
index 684cb175e68..5669713d9a1 100644
--- a/app/views/projects/protected_branches/index.html.haml
+++ b/app/views/projects/protected_branches/index.html.haml
@@ -21,7 +21,7 @@
 
         .form-group
           = f.label :name, "Branch", class: "label-light"
-          = f.text_field(:name)
+          = render partial: "dropdown", locals: { f: f }
           %p.help-block
             = link_to "Wildcards", help_page_path(category: 'workflow', file: 'protected_branches', format: 'md', anchor: "wildcard-protected-branches")
             such as
@@ -39,10 +39,3 @@
         = f.submit "Protect", class: "btn-create btn protect-branch-btn", disabled: true
     %hr
     = render "branches_list"
-
-:javascript
-  $("#protected_branch_name").select2({
-    placeholder: "Select branch",
-    createSearchChoice: function(term) { return { id: term, text: term }; },
-    data: gon.open_branches
-  })