Be able to update protected branches

[ci skip]

app/assets/javascripts/protected_branch_access_dropdown.js.es6

@@ -3,7 +3,7 @@
 
   gl.ProtectedBranchAccessDropdown = class {
     constructor(options) {
-      const { $dropdown, data, onSelect } = options;
+      const { $dropdown, onSelect, onHide } = options;
       const self = this;
 
       this.$dropdown = $dropdown;
@@ -25,6 +25,10 @@
         hidden() {
           // Here because last selected item is not considered after first close
           this.activeIds = self.getActiveIds();
+
+          if (onHide) {
+            onHide();
+          }
         },
         setActiveIds() {
           // Needed for pre select options
@@ -33,7 +37,10 @@
         clicked(item, $el, e) {
           e.preventDefault();
           self.inputCount++;
-          onSelect();
+
+          if (onSelect) {
+            onSelect();
+          } 
         }
       });
     }

app/assets/javascripts/protected_branch_edit.js.es6

@@ -3,34 +3,85 @@
 
   gl.ProtectedBranchEdit = class {
     constructor(options) {
+      this.hasChanges = false;
       this.$wrap = options.$wrap;
       this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
+      this.$allowedToMergeDropdownWrap = this.$allowedToMergeDropdown.parents().eq(1);
       this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+      this.$allowedToPushDropdownWrap = this.$allowedToPushDropdown.parents().eq(1);
 
       this.buildDropdowns();
     }
 
     buildDropdowns() {
-
       // Allowed to merge dropdown
       new gl.allowedToMergeDropdown({
         $dropdown: this.$allowedToMergeDropdown,
-        data: gon.merge_access_levels,
-        onSelect: this.onSelect.bind(this)
+        onSelect: this.onSelect.bind(this),
+        onHide: this.onHide.bind(this),
       });
 
       // Allowed to push dropdown
       new gl.allowedToPushDropdown({
         $dropdown: this.$allowedToPushDropdown,
-        data: gon.push_access_levels,
-        onSelect: this.onSelect.bind(this)
+        onSelect: this.onSelect.bind(this),
+        onHide: this.onHide.bind(this)
       });
     }
 
     onSelect() {
+      this.hasChanges = true;
+    }
+
+    onHide() {
+      if (!this.hasChanges) {
+        return;
+      }
+
+      this.hasChanges = true;
+
       const $allowedToMergeInput = this.$wrap.find(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
       const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
 
+      let $mergeInputs = this.$allowedToMergeDropdownWrap.find('input[name^="protected_branch[merge_access_levels_attributes]"]')
+      let $pushInputs = this.$allowedToPushDropdownWrap.find('input[name^="protected_branch[push_access_levels_attributes]"]')
+      let merge_access_levels_attributes = [];
+      let push_access_levels_attributes = [];
+
+      $mergeInputs.map((i, el) => {
+        const $el = $(el);
+        const type = $el.data('type');
+        const value = $el.val();
+
+
+        if (type === 'role') {
+          merge_access_levels_attributes.push({
+            access_level: value
+          });
+        } else if (type === 'user') {
+          merge_access_levels_attributes.push({
+            user_id: value
+          });
+        }
+      });
+
+      $pushInputs.map((i, el) => {
+        const $el = $(el);
+        const type = $el.data('type');
+        const value = $el.val();
+
+
+        if (type === 'role') {
+          push_access_levels_attributes.push({
+            access_level: value
+          });
+        } else if (type === 'user') {
+          push_access_levels_attributes.push({
+            user_id: value
+          });
+        }
+      });
+
       $.ajax({
         type: 'POST',
         url: this.$wrap.data('url'),
@@ -39,18 +90,13 @@
           _method: 'PATCH',
           id: this.$wrap.data('banchId'),
           protected_branch: {
-            merge_access_levels_attributes: [{
-              id: this.$allowedToMergeDropdown.data('access-level-id'),
-              access_level: $allowedToMergeInput.val()
-            }],
-            push_access_levels_attributes: [{
-              id: this.$allowedToPushDropdown.data('access-level-id'),
-              access_level: $allowedToPushInput.val()
-            }]
+            merge_access_levels_attributes,
+            push_access_levels_attributes
           }
         },
         success: () => {
           this.$wrap.effect('highlight');
+          this.hasChanges = false;
         },
         error() {
           $.scrollTo(0);

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

@@ -10,4 +10,4 @@
                             value: value, data: { type: level.type } }
 
 = dropdown_tag('Select', options: { toggle_class: "#{toggle_class} js-multiselect", dropdown_class: 'dropdown-menu-user dropdown-menu-selectable', filter: true,
-                                    data: { input_id: input_basic_name, default_label: 'Select' } })
+                                    data: { default_label: 'Select' } })