Allow setting "Allowed To Push/Merge" while creating a protected branch.

1. Reuse the same dropdown component that we used for updating these
   settings (`ProtectedBranchesAccessSelect`). Have it accept options
   for the parent container (so we can control the elements it sees) and
   whether or not to save changes via AJAX (we need this for update, but
   not create).

2. Change the "Developers" option to "Developers + Masters", which is
   clearer.

3. Remove `developers_can_push` and `developers_can_merge` from the
   model, since they're not needed anymore.

app/assets/javascripts/protected_branches_access_select.js.coffee

 class @ProtectedBranchesAccessSelect
-  constructor: () ->
-    $(".allowed-to-merge").each (i, element) =>
+  constructor: (@container, @saveOnSelect) ->
+    @container.find(".allowed-to-merge").each (i, element) =>
       fieldName = $(element).data('field-name')
       $(element).glDropdown
-        data: [{id: 'developers', text: 'Developers'}, {id: 'masters', text: 'Masters'}]
+        data: [{id: 'developers', text: 'Developers + Masters'}, {id: 'masters', text: 'Masters'}]
         selectable: true
         fieldName: fieldName
         clicked: _.partial(@onSelect, element)
 
-    $(".allowed-to-push").each (i, element) =>
+    @container.find(".allowed-to-push").each (i, element) =>
       fieldName = $(element).data('field-name')
       $(element).glDropdown
         data: [{id: 'no_one', text: 'No one'},
-               {id: 'developers', text: 'Developers'},
+               {id: 'developers', text: 'Developers + Masters'},
                {id: 'masters', text: 'Masters'}]
         selectable: true
         fieldName: fieldName
@@ -21,6 +21,7 @@ class @ProtectedBranchesAccessSelect
 
   onSelect: (dropdown, selected, element, e) =>
     $(dropdown).find('.dropdown-toggle-text').text(selected.text)
+    if @saveOnSelect
       $.ajax
         type: "PATCH"
         url: $(dropdown).data('url')

app/assets/stylesheets/pages/projects.scss

@@ -661,6 +661,17 @@ pre.light-well {
   }
 }
 
+.new_protected_branch {
+  .dropdown {
+    display: inline;
+    margin-left: 15px;
+  }
+
+  label {
+    min-width: 120px;
+  }
+}
+
 .protected-branches-list {
   a {
     color: $gl-gray;

app/models/protected_branch.rb

@@ -12,12 +12,12 @@ class ProtectedBranch < ActiveRecord::Base
     project.commit(self.name)
   end
 
-  def developers_can_push
-    self.push_access_level && self.push_access_level.developers?
+  def allowed_to_push
+    self.push_access_level && self.push_access_level.access_level
   end
 
-  def developers_can_merge
-    self.merge_access_level && self.merge_access_level.developers?
+  def allowed_to_merge
+    self.merge_access_level && self.merge_access_level.access_level
   end
 
   # Returns all protected branches that match the given branch name.

app/views/projects/protected_branches/_branches_list.html.haml

@@ -26,4 +26,4 @@
   = paginate @protected_branches, theme: 'gitlab'
 
 :javascript
-  new ProtectedBranchesAccessSelect();
+  new ProtectedBranchesAccessSelect($(".protected-branches-list"), true);

app/views/projects/protected_branches/_protected_branch.html.haml

@@ -15,11 +15,11 @@
       - else
         (branch was removed from repository)
   %td
-    = hidden_field_tag "allowed_to_merge_#{branch.id}", branch.merge_access_level.access_level
-    = dropdown_tag(branch.merge_access_level.access_level.humanize, options: { title: "Allowed To Merge", toggle_class: 'allowed-to-merge', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "allowed_to_merge_#{branch.id}", url: @url, id: branch.id, type: "allowed_to_merge" }})
+    = hidden_field_tag "allowed_to_merge_#{protected_branch.id}", protected_branch.merge_access_level.access_level
+    = dropdown_tag(protected_branch.merge_access_level.access_level.humanize, options: { title: "Allowed To Merge", toggle_class: 'allowed-to-merge', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "allowed_to_merge_#{protected_branch.id}", url: url, id: protected_branch.id, type: "allowed_to_merge" }})
   %td
-    = hidden_field_tag "allowed_to_push_#{branch.id}", branch.push_access_level.access_level
-    = dropdown_tag(branch.push_access_level.access_level.humanize, options: { title: "Allowed To Push", toggle_class: 'allowed-to-push', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "allowed_to_push_#{branch.id}", url: @url, id: branch.id, type: "allowed_to_push" }})
+    = hidden_field_tag "allowed_to_push_#{protected_branch.id}", protected_branch.push_access_level.access_level
+    = dropdown_tag(protected_branch.push_access_level.access_level.humanize, options: { title: "Allowed To Push", toggle_class: 'allowed-to-push', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "allowed_to_push_#{protected_branch.id}", url: url, id: protected_branch.id, type: "allowed_to_push" }})
   - 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"

app/views/projects/protected_branches/index.html.haml

@@ -32,19 +32,28 @@
             are supported.
 
         .form-group
-          = f.check_box :developers_can_push, class: "pull-left"
-          .prepend-left-20
-            = f.label :developers_can_push, "Developers can push", class: "label-light append-bottom-0"
-            %p.light.append-bottom-0
-              Allow developers to push to this branch
+          .prepend-left-10
+            = f.hidden_field :allowed_to_merge
+            = f.label :allowed_to_merge, "Allowed to Merge: ", 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[allowed_to_merge]" }})
 
         .form-group
-          = f.check_box :developers_can_merge, class: "pull-left"
-          .prepend-left-20
-            = f.label :developers_can_merge, "Developers can merge", class: "label-light append-bottom-0"
-            %p.light.append-bottom-0
-              Allow developers to accept merge requests to this branch
+          .prepend-left-10
+            = f.hidden_field :allowed_to_push
+            = f.label :allowed_to_push, "Allowed to Push: ", 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[allowed_to_push]" }})
+
+
         = f.submit "Protect", class: "btn-create btn protect-branch-btn", disabled: true
 
     %hr
     = render "branches_list"
+
+:javascript
+  new ProtectedBranchesAccessSelect($(".new_protected_branch"), false);