Update layout and JS for create protected branch.

Also updates protect branch list

5 files changed, 64 insertions, 68 deletions

diff --git a/app/views/projects/protected_branches/_branches_list.html.haml b/app/views/projects/protected_branches/_branches_list.html.haml
index 0603a014008..dc471f515d4 100644
--- a/app/views/projects/protected_branches/_branches_list.html.haml
+++ b/app/views/projects/protected_branches/_branches_list.html.haml
@@ -1,26 +1,25 @@
-%h5.prepend-top-0
-  Already Protected (#{@protected_branches.size})
-- if @protected_branches.empty?
-  %p.settings-message.text-center
-    No branches are protected, protect a branch with the form above.
-- else
-  - can_admin_project = can?(current_user, :admin_project, @project)
+.panel.panel-default
+  - if @protected_branches.empty?
+    %p.settings-message.text-center
+      No branches are protected, protect a branch with the form above.
+  - else
+    - can_admin_project = can?(current_user, :admin_project, @project)
 
-  %table.table.protected-branches-list
-    %colgroup
-      %col{ width: "20%" }
-      %col{ width: "30%" }
-      %col{ width: "25%" }
-      %col{ width: "25%" }
-    %thead
-      %tr
-        %th Branch
-        %th Last commit
-        %th Allowed to merge
-        %th Allowed to push
-        - if can_admin_project
-          %th
-    %tbody
-      = render partial: @protected_branches, locals: { can_admin_project: can_admin_project }
+    %table.table.protected-branches-list.table-bordered
+      %colgroup
+        %col{ width: "20%" }
+        %col{ width: "30%" }
+        %col{ width: "25%" }
+        %col{ width: "25%" }
+      %thead
+        %tr
+          %th Protected branch (#{@protected_branches.size})
+          %th Last commit
+          %th Allowed to merge
+          %th Allowed to push
+          - if can_admin_project
+            %th
+      %tbody
+        = render partial: @protected_branches, locals: { can_admin_project: can_admin_project }
 
-  = paginate @protected_branches, theme: 'gitlab'
+    = paginate @protected_branches, theme: 'gitlab'
diff --git a/app/views/projects/protected_branches/_create_protected_branch.html.haml b/app/views/projects/protected_branches/_create_protected_branch.html.haml
new file mode 100644
index 00000000000..7006b340b34
--- /dev/null
+++ b/app/views/projects/protected_branches/_create_protected_branch.html.haml
@@ -0,0 +1,34 @@
+= form_for [@project.namespace.becomes(Namespace), @project, @protected_branch] do |f|
+  .panel.panel-default
+    .panel-heading
+      %b Protect a branch
+    .panel-body
+      .form-horizontal
+        .form-group
+          %label.col-md-2.text-right
+            Branch:
+          .col-md-10
+            = render partial: "dropdown", locals: { f: f }
+            .help-block
+              Wildcards such as
+              %code *-stable
+              or
+              %code production/*
+              are supported
+        .form-group
+          %label.col-md-2.text-right
+            Allowed to merge:
+          .col-md-10
+            = dropdown_tag('Select',
+                           options: { toggle_class: 'js-allowed-to-merge wide',
+                           data: { field_name: 'protected_branch[merge_access_level_attributes][access_level]' }})
+        .form-group
+          %label.col-md-2.text-right
+            Allowed to push:
+          .col-md-10
+            = dropdown_tag('Select',
+                           options: { toggle_class: 'js-allowed-to-push wide',
+                           data: { field_name: 'protected_branch[push_access_level_attributes][access_level]' }})
+
+    .panel-footer
+      = f.submit 'Protect', class: 'btn-create btn', disabled: true
diff --git a/app/views/projects/protected_branches/_dropdown.html.haml b/app/views/projects/protected_branches/_dropdown.html.haml
index b803d932e67..1281e6664dd 100644
--- a/app/views/projects/protected_branches/_dropdown.html.haml
+++ b/app/views/projects/protected_branches/_dropdown.html.haml
@@ -1,17 +1,14 @@
 = f.hidden_field(:name)
 
-= dropdown_tag("Protected Branch",
-               options: { title: "Pick protected branch", toggle_class: 'js-protected-branch-select js-filter-submit',
+= dropdown_tag('Select branch or create wildcard',
+               options: { toggle_class: 'js-protected-branch-select js-filter-submit wide',
                           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
+  %ul.dropdown-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/_protected_branch.html.haml b/app/views/projects/protected_branches/_protected_branch.html.haml
index 498e412235e..986d591b764 100644
--- a/app/views/projects/protected_branches/_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_protected_branch.html.haml
@@ -17,13 +17,13 @@
   %td
     = hidden_field_tag "allowed_to_merge_#{protected_branch.id}", protected_branch.merge_access_level.access_level
     = dropdown_tag(protected_branch.merge_access_level.humanize,
-                   options: { title: "Allowed to merge", toggle_class: 'allowed-to-merge', dropdown_class: 'dropdown-menu-selectable merge',
+                   options: { toggle_class: 'allowed-to-merge', dropdown_class: 'dropdown-menu-selectable merge',
                    data: { field_name: "allowed_to_merge_#{protected_branch.id}", url: url, id: protected_branch.id, type: "merge_access_level" }})
   %td
     = hidden_field_tag "allowed_to_push_#{protected_branch.id}", protected_branch.push_access_level.access_level
     = dropdown_tag(protected_branch.push_access_level.humanize,
-                   options: { title: "Allowed to push", toggle_class: 'allowed-to-push', dropdown_class: 'dropdown-menu-selectable push',
+                   options: { toggle_class: 'allowed-to-push', dropdown_class: 'dropdown-menu-selectable push',
                    data: { field_name: "allowed_to_push_#{protected_branch.id}", url: url, id: protected_branch.id, type: "push_access_level" }})
   - if can_admin_project
     %td
-      = link_to 'Unprotect', [@project.namespace.becomes(Namespace), @project, protected_branch], data: { confirm: 'Branch will be writable for developers. Are you sure?' }, method: :delete, class: "btn btn-warning btn-sm pull-right"
+      = link_to 'Unprotect', [@project.namespace.becomes(Namespace), @project, protected_branch], data: { confirm: 'Branch will be writable for developers. Are you sure?' }, method: :delete, class: 'btn btn-warning'
diff --git a/app/views/projects/protected_branches/index.html.haml b/app/views/projects/protected_branches/index.html.haml
index 4efe44c7233..49dcc9a6ba4 100644
--- a/app/views/projects/protected_branches/index.html.haml
+++ b/app/views/projects/protected_branches/index.html.haml
@@ -14,41 +14,7 @@
         %li prevent <strong>anyone</strong> from deleting the branch
       %p.append-bottom-0 Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches"), class: "underlined-link"} and #{link_to "project permissions", help_page_path("user/permissions"), class: "underlined-link"}.
   .col-lg-9
-    %h5.prepend-top-0
-      Protect a branch
     - if can? current_user, :admin_project, @project
-      = form_for [@project.namespace.becomes(Namespace), @project, @protected_branch] do |f|
-        = form_errors(@protected_branch)
+      = render 'create_protected_branch'
 
-        .form-group
-          = f.label :name, "Branch", class: "label-light"
-          = render partial: "dropdown", locals: { f: f }
-          %p.help-block
-            = link_to "Wildcards", help_page_path('user/project/protected_branches', anchor: "wildcard-protected-branches")
-            such as
-            %code *-stable
-            or
-            %code production/*
-            are supported.
-
-        .form-group
-          = hidden_field_tag 'protected_branch[merge_access_level_attributes][access_level]'
-          = label_tag "Allowed to merge: ", nil, class: "label-light append-bottom-0"
-          = dropdown_tag("<Make a selection>",
-                         options: { title: "Allowed to merge", toggle_class: 'allowed-to-merge',
-                                    dropdown_class: 'dropdown-menu-selectable',
-                                    data: { field_name: "protected_branch[merge_access_level_attributes][access_level]" }})
-
-        .form-group
-          = hidden_field_tag 'protected_branch[push_access_level_attributes][access_level]'
-          = label_tag "Allowed to push: ", nil, class: "label-light append-bottom-0"
-          = dropdown_tag("<Make a selection>",
-                         options: { title: "Allowed to push", toggle_class: 'allowed-to-push',
-                                    dropdown_class: 'dropdown-menu-selectable',
-                                    data: { field_name: "protected_branch[push_access_level_attributes][access_level]" }})
-
-
-        = f.submit "Protect", class: "btn-create btn protect-branch-btn", disabled: true
-
-    %hr
     = render "branches_list"