Merge branch 'fix-protected-branch-ui-and-specs' into '8-11-stable-ee'

Fix broken specs and UI for protected branches.

The dropdowns were not using the proper css classes and the specs were not working because they were not testing it as a multi-select dropdown

#### Before

![Screen_Shot_2016-08-21_at_12.55.20_PM](/uploads/c89080942b41182194cd94a948fc4d0a/Screen_Shot_2016-08-21_at_12.55.20_PM.png)

#### After

![Screen_Shot_2016-08-21_at_12.54.19_PM](/uploads/f72c1828a87bc994e5f1f020bbe2c029/Screen_Shot_2016-08-21_at_12.54.19_PM.png)

See merge request !676

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

@@ -24,16 +24,16 @@
           .col-md-10
             .merge_access_levels-container
               = dropdown_tag('Select',
-                             options: { toggle_class: 'js-allowed-to-merge wide',
-                             data: { field_name: 'protected_branch[merge_access_levels_attributes][0][access_level]', input_id: 'merge_access_levels_attributes' }})
+                             options: { toggle_class: 'js-allowed-to-merge js-multiselect wide', dropdown_class: 'dropdown-menu-user dropdown-menu-selectable', filter: true,
+                             data: { input_id: 'merge_access_levels_attributes', default_label: 'Select' } })
         .form-group
           %label.col-md-2.text-right{ for: 'push_access_levels_attributes' }
             Allowed to push:
           .col-md-10
             .push_access_levels-container
               = dropdown_tag('Select',
-                             options: { toggle_class: 'js-allowed-to-push wide',
-                             data: { field_name: 'protected_branch[push_access_levels_attributes][0][access_level]', input_id: 'push_access_levels_attributes' }})
+                             options: { toggle_class: 'js-allowed-to-push js-multiselect wide', dropdown_class: 'dropdown-menu-user dropdown-menu-selectable', filter: true,
+                             data: { input_id: 'push_access_levels_attributes', default_label: 'Select' } })
 
     .panel-footer
       = f.submit 'Protect', class: 'btn-create btn', disabled: true

spec/features/protected_branches/access_control_ee_spec.rb

@@ -9,10 +9,10 @@ RSpec.shared_examples "protected branches > access control > EE" do
       roles = access_level_class.human_access_levels
 
       visit namespace_project_protected_branches_path(project.namespace, project)
-      set_protected_branch_name('master')
 
-      users.each { |user| set_allowed_to(git_operation, user.name) }
-      roles.each { |(_, access_type_name)| set_allowed_to(git_operation, access_type_name) }
+      set_protected_branch_name('master')
+      set_allowed_to(git_operation, users.map(&:name))
+      set_allowed_to(git_operation, roles.values)
       set_allowed_to(other_git_operation)
 
       click_on "Protect"
@@ -35,8 +35,8 @@ RSpec.shared_examples "protected branches > access control > EE" do
       click_on "Protect"
 
       within(".js-protected-branch-edit-form") do
-        users.each { |user| set_allowed_to(git_operation, user.name) }
-        roles.each { |(_, access_type_name)| set_allowed_to(git_operation, access_type_name) }
+        set_allowed_to(git_operation, users.map(&:name))
+        set_allowed_to(git_operation, roles.values)
       end
 
       wait_for_ajax

spec/features/protected_branches_spec.rb

@@ -12,7 +12,9 @@ feature 'Projected Branches', feature: true, js: true do
   def set_allowed_to(operation, option = 'Masters')
     find(".js-allowed-to-#{operation}").click
     wait_for_ajax
-    click_on option
+
+    Array(option).each { |opt| click_on(opt) }
+
     find(".js-allowed-to-#{operation}").click # needed to submit form in some cases
   end