Add "No One Can Push" to the protected branches UI.

1. Move to dropdowns instead of checkboxes. One each for "Allowed to
   Push" and "Allowed to Merge"

2. Refactor the `ProtectedBranches` coffeescript class into
   `ProtectedBranchesAccessSelect`.

3. Modify the backend to accept the new parameters.

app/assets/javascripts/protected_branches_access_select.js.coffee

+class @ProtectedBranchesAccessSelect
+  constructor: () ->
+    $(".allowed-to-merge").each (i, element) =>
+      fieldName = $(element).data('field-name')
+      $(element).glDropdown
+        data: [{id: 'developers', text: 'Developers'}, {id: 'masters', text: 'Masters'}]
+        selectable: true
+        fieldName: fieldName
+        clicked: _.partial(@onSelect, element)
+
+    $(".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: 'masters', text: 'Masters'}]
+        selectable: true
+        fieldName: fieldName
+        clicked: _.partial(@onSelect, element)
+
+
+  onSelect: (dropdown, selected, element, e) =>
+    $(dropdown).find('.dropdown-toggle-text').text(selected.text)
+    $.ajax
+      type: "PATCH"
+      url: $(dropdown).data('url')
+      dataType: "json"
+      data:
+        id: $(dropdown).data('id')
+        protected_branch:
+          "#{$(dropdown).data('type')}": selected.id
+
+      success: ->
+        row = $(e.target)
+        row.closest('tr').effect('highlight')
+
+      error: ->
+        new Flash("Failed to update branch!", "alert")
+

app/assets/stylesheets/pages/projects.scss

@@ -664,11 +664,14 @@ pre.light-well {
 .protected-branches-list {
   a {
     color: $gl-gray;
-    font-weight: 600;
 
     &:hover {
       color: $gl-link-color;
     }
+
+    &.is-active {
+      font-weight: 600;
+    }
   }
 }
 

app/controllers/projects/protected_branches_controller.rb

@@ -56,7 +56,7 @@ class Projects::ProtectedBranchesController < Projects::ApplicationController
   end
 
   def protected_branch_params
-    params.require(:protected_branch).permit(:name, :developers_can_push, :developers_can_merge)
+    params.require(:protected_branch).permit(:name, :allowed_to_push, :allowed_to_merge)
   end
 
   def load_protected_branches

app/models/protected_branch/push_access_level.rb

 class ProtectedBranch::PushAccessLevel < ActiveRecord::Base
   belongs_to :protected_branch
 
-  enum access_level: [:masters, :developers]
+  enum access_level: [:masters, :developers, :no_one]
 end

app/services/protected_branches/base_service.rb

 module ProtectedBranches
   class BaseService < ::BaseService
     def set_access_levels!
-      if params[:developers_can_push] == '0'
-        @protected_branch.push_access_level.masters!
-      elsif params[:developers_can_push] == '1'
-        @protected_branch.push_access_level.developers!
-      end
-
-      if params[:developers_can_merge] == '0'
+      case params[:allowed_to_merge]
+      when 'masters'
         @protected_branch.merge_access_level.masters!
-      elsif params[:developers_can_merge] == '1'
+      when 'developers'
         @protected_branch.merge_access_level.developers!
       end
+
+      case params[:allowed_to_push]
+      when 'masters'
+        @protected_branch.push_access_level.masters!
+      when 'developers'
+        @protected_branch.push_access_level.developers!
+      when 'no_one'
+        @protected_branch.push_access_level.no_one!
+      end
     end
   end
 end

app/services/protected_branches/create_service.rb

-class ProtectedBranches::CreateService < BaseService
-  attr_reader :protected_branch
+module ProtectedBranches
+  class CreateService < BaseService
+    attr_reader :protected_branch
 
-  def execute
-    ProtectedBranch.transaction do
-      @protected_branch = project.protected_branches.new(name: params[:name])
-      @protected_branch.save!
+    def execute
+      ProtectedBranch.transaction do
+        @protected_branch = project.protected_branches.new(name: params[:name])
+        @protected_branch.save!
 
-      @protected_branch.create_push_access_level!
-      @protected_branch.create_merge_access_level!
+        @protected_branch.create_push_access_level!
+        @protected_branch.create_merge_access_level!
 
-      set_access_levels!
-    end
+        set_access_levels!
+      end
 
-    true
-  rescue ActiveRecord::RecordInvalid
-    false
+      true
+    rescue ActiveRecord::RecordInvalid
+      false
+    end
   end
 end

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

@@ -5,24 +5,25 @@
     No branches are protected, protect a branch with the form above.
 - else
   - can_admin_project = can?(current_user, :admin_project, @project)
-  .table-responsive
-    %table.table.protected-branches-list
-      %colgroup
-        %col{ width: "20%" }
-        %col{ width: "30%" }
-        %col{ width: "25%" }
-        %col{ width: "25%" }
+
+  %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
-          %col
-      %thead
-        %tr
-          %th Protected Branch
-          %th Commit
-          %th Developers Can Push
-          %th Developers Can Merge
-          - if can_admin_project
-            %th
-      %tbody
-        = render partial: @protected_branches, locals: { can_admin_project: can_admin_project }
+          %th
+    %tbody
+      = render partial: @protected_branches, locals: { can_admin_project: can_admin_project }
 
   = paginate @protected_branches, theme: 'gitlab'
+
+:javascript
+  new ProtectedBranchesAccessSelect();

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

@@ -15,9 +15,11 @@
       - else
         (branch was removed from repository)
   %td
-    = check_box_tag("developers_can_push", protected_branch.id, protected_branch.developers_can_push, data: { url: url })
+    = 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" }})
   %td
-    = check_box_tag("developers_can_merge", protected_branch.id, protected_branch.developers_can_merge, data: { url: url })
+    = 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" }})
   - 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"