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?
-  - access_levels.map.with_index do |level, i|
-    - if (level.type == :user)
-      - fieldKey = 'user_id' 
-      - value = level.user_id
-    - else
-      - fieldKey = 'access_level'
-      - value = level.access_level
-    %input{ type: 'hidden', name: "protected_branch[#{input_basic_name}][#{i}][#{fieldKey}]",
-                            value: value, data: { type: level.type, id: level.id } }
-  
-  - dropdownLabel = [pluralize(level_frequencies[:role], 'role'), pluralize(level_frequencies[:user], 'user')].to_sentence
+%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' 
+        - value = level.user_id
+      - else
+        - fieldKey = 'access_level'
+        - value = level.access_level
+      %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,
-                                    data: { default_label: defaultLabel } })
+  = 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,16 +22,18 @@
           %label.col-md-2.text-right{ for: 'merge_access_levels_attributes' }
             Allowed to merge:
           .col-md-10
-            = 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' } })
+            .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' } })
         .form-group
           %label.col-md-2.text-right{ for: 'push_access_levels_attributes' }
             Allowed to push:
           .col-md-10
-            = 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' } })
+            .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' } })
 
     .panel-footer
       = f.submit 'Protect', class: 'btn-create btn', disabled: true

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' }