Improve dropdown $wrap definition

app/assets/javascripts/protected_branch_access_dropdown.js.es6

@@ -9,7 +9,7 @@
       this.accessLevel = accessLevel;
       this.accessLevelsData = accessLevelsData;
       this.$dropdown = $dropdown;
-      this.$wrap = this.$dropdown.parents().eq(1); // TODO: Find a better way to get the wrap element
+      this.$wrap = this.$dropdown.closest(`.${this.accessLevel}-container`);
       this.usersPath = '/autocomplete/users.json';
       this.inputCount = 0;
       this.defaultLabel = this.$dropdown.data('defaultLabel');

app/assets/javascripts/protected_branch_edit.js.es6

@@ -19,8 +19,8 @@
       this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
       this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
 
-      this.$wraps[ACCESS_LEVELS.MERGE] = this.$allowedToMergeDropdown.parents().eq(1);
-      this.$wraps[ACCESS_LEVELS.PUSH] = this.$allowedToPushDropdown.parents().eq(1);
+      this.$wraps[ACCESS_LEVELS.MERGE] = this.$allowedToMergeDropdown.closest(`.${ACCESS_LEVELS.MERGE}-container`);
+      this.$wraps[ACCESS_LEVELS.PUSH] = this.$allowedToPushDropdown.closest(`.${ACCESS_LEVELS.PUSH}-container`);
 
       this.buildDropdowns();
 

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

 - defaultLabel = 'Select'
 - dropdownLabel = defaultLabel
 
-- if access_levels.present?
+%div{ class: "#{input_basic_name}-container" }
+  - if access_levels.present?
     - access_levels.map.with_index do |level, i|
       - if (level.type == :user)
         - fieldKey = 'user_id' 
@@ -9,10 +10,10 @@
       - else
         - fieldKey = 'access_level'
         - value = level.access_level
-    %input{ type: 'hidden', name: "protected_branch[#{input_basic_name}][#{i}][#{fieldKey}]",
+      %input{ type: 'hidden', name: "protected_branch[#{input_basic_name}_attributes][#{i}][#{fieldKey}]",
                               value: value, data: { type: level.type, id: level.id } }
     
     - dropdownLabel = [pluralize(level_frequencies[:role], 'role'), pluralize(level_frequencies[:user], 'user')].to_sentence
 
-= dropdown_tag(dropdownLabel, options: { toggle_class: "#{toggle_class} js-multiselect", dropdown_class: 'dropdown-menu-user dropdown-menu-selectable', filter: true,
+  = dropdown_tag(dropdownLabel, options: { toggle_class: "#{toggle_class} js-multiselect", dropdown_class: 'dropdown-menu-user dropdown-menu-selectable', filter: true,
                                       data: { default_label: defaultLabel } })

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

@@ -22,6 +22,7 @@
           %label.col-md-2.text-right{ for: 'merge_access_levels_attributes' }
             Allowed to merge:
           .col-md-10
+            .js-allowed-to-merge-container
               = dropdown_tag('Select',
                              options: { toggle_class: 'js-allowed-to-merge wide js-multiselect', dropdown_class: 'dropdown-menu-user dropdown-menu-selectable', filter: true,
                              data: { input_id: 'merge_access_levels_attributes', default_label: 'Select' } })
@@ -29,6 +30,7 @@
           %label.col-md-2.text-right{ for: 'push_access_levels_attributes' }
             Allowed to push:
           .col-md-10
+            .js-allowed-to-push-container
               = dropdown_tag('Select',
                              options: { toggle_class: 'js-allowed-to-push wide js-multiselect', dropdown_class: 'dropdown-menu-user dropdown-menu-selectable', filter: true,
                              data: { input_id: 'push_access_levels_attributes', default_label: 'Select' } })

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

 %td
-  = render partial: 'access_level_dropdown', locals: { protected_branch: protected_branch, access_levels: protected_branch.merge_access_levels, level_frequencies: protected_branch.merge_access_level_frequencies, input_basic_name: 'merge_access_levels_attributes', toggle_class: 'js-allowed-to-merge' }
+  = render partial: 'access_level_dropdown', locals: { protected_branch: protected_branch, access_levels: protected_branch.merge_access_levels, level_frequencies: protected_branch.merge_access_level_frequencies, input_basic_name: 'merge_access_levels', toggle_class: 'js-allowed-to-merge' }
 
 %td
-  = render partial: 'access_level_dropdown', locals: { protected_branch: protected_branch, access_levels: protected_branch.push_access_levels, level_frequencies: protected_branch.push_access_level_frequencies, input_basic_name: 'push_access_levels_attributes', toggle_class: 'js-allowed-to-push' }
+  = render partial: 'access_level_dropdown', locals: { protected_branch: protected_branch, access_levels: protected_branch.push_access_levels, level_frequencies: protected_branch.push_access_level_frequencies, input_basic_name: 'push_access_levels', toggle_class: 'js-allowed-to-push' }