Prevent duplication when adding a new access level

[ci skip]

app/assets/javascripts/protected_branch_access_dropdown.js.es6

@@ -39,7 +39,7 @@
           self.inputCount++;
 
           if (onSelect) {
-            onSelect();
+            onSelect(item, $el);
           } 
         }
       });

app/assets/javascripts/protected_branch_edit.js.es6

@@ -11,78 +11,48 @@
       this.$allowedToPushDropdownWrap = this.$allowedToPushDropdown.parents().eq(1);
 
       this.buildDropdowns();
+
+      // Save initial state
+      this.state = {
+        merge: this.getMergeAccessLevelsAttributes(),
+        push: this.getPushAccessLevelsAttributes()
+      };
     }
 
     buildDropdowns() {
       // Allowed to merge dropdown
       new gl.allowedToMergeDropdown({
         $dropdown: this.$allowedToMergeDropdown,
-        onSelect: this.onSelect.bind(this),
-        onHide: this.onHide.bind(this),
+        onSelect: this.onSelectOption.bind(this),
+        onHide: this.onDropdownHide.bind(this),
       });
 
       // Allowed to push dropdown
       new gl.allowedToPushDropdown({
         $dropdown: this.$allowedToPushDropdown,
-        onSelect: this.onSelect.bind(this),
-        onHide: this.onHide.bind(this)
+        onSelect: this.onSelectOption.bind(this),
+        onHide: this.onDropdownHide.bind(this)
       });
     }
 
-    onSelect() {
+    onSelectOption(item, $el) {
       this.hasChanges = true;
     }
 
-    onHide() {
-      if (!this.hasChanges) {
-        return;
-      }
+    onDropdownHide() {
+      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
-          });
-        }
-      });
+      this.updatePermissions();
+    }
 
-      $pushInputs.map((i, el) => {
-        const $el = $(el);
-        const type = $el.data('type');
-        const value = $el.val();
+    updatePermissions() {
 
+      let merge = this.consolidateMergeData();
+      let push = this.getPushAccessLevelsAttributes();
 
-        if (type === 'role') {
-          push_access_levels_attributes.push({
-            access_level: value
-          });
-        } else if (type === 'user') {
-          push_access_levels_attributes.push({
-            user_id: value
-          });
-        }
-      });
-
-      $.ajax({
+      return $.ajax({
         type: 'POST',
         url: this.$wrap.data('url'),
         dataType: 'json',
@@ -90,13 +60,28 @@
           _method: 'PATCH',
           id: this.$wrap.data('banchId'),
           protected_branch: {
-            merge_access_levels_attributes,
-            push_access_levels_attributes
+            merge_access_levels_attributes: merge,
+            push_access_levels_attributes: push
           }
         },
-        success: () => {
+        success: (response) => {
           this.$wrap.effect('highlight');
           this.hasChanges = false;
+
+          // Update State
+          this.state.merge = response.merge_access_levels.map((access) => {
+            if (access.user_id) {
+              return {
+                id: access.id,
+                user_id: access.user_id,
+              };
+            } else {
+              return {
+                id: access.id,
+                access_level: access.access_level,
+              };
+            }
+          });
         },
         error() {
           $.scrollTo(0);
@@ -104,6 +89,94 @@
         }
       });
     }
+
+    consolidateMergeData() {
+      // State takes precedence
+      let mergeData = [];
+      let mergeInputsData = this.getMergeAccessLevelsAttributes()
+
+      for (var i = 0; i < mergeInputsData.length; i++) {
+        let inState;
+        let adding;
+        var userId = parseInt(mergeInputsData[i].user_id);
+
+        if (userId) {
+          adding = 'user';
+          inState = _.findWhere(this.state.merge, {user_id: userId});
+        } else {
+          adding = 'role';
+          inState = _.findWhere(this.state.merge, {access_level: parseInt(mergeInputsData[i].access_level)});
+        }
+
+
+        if (inState) {
+          mergeData.push(inState);
+        } else {
+          if (adding === 'user') {
+            mergeData.push({
+              user_id: parseInt(mergeInputsData[i].user_id)
+            });
+          } else if (adding === 'role') {
+            mergeData.push({
+              access_level: parseInt(mergeInputsData[i].access_level)
+            });
+          }
+
+        }
+      }
+
+      return mergeData;
+    }
+
+    getMergeAccessLevelsAttributes() {
+      let accessLevels = [];
+
+      this.$allowedToMergeDropdownWrap
+        .find('input[name^="protected_branch[merge_access_levels_attributes]"]')
+        .map((i, el) => {
+          const $el = $(el);
+          const type = $el.data('type');
+          const value = parseInt($el.val());
+          const id = parseInt($el.data('id'));
+          let obj = {};
+
+          if (type === 'role') {
+            obj.access_level = value
+          } else if (type === 'user') {
+            obj.user_id = value;
+          }
+
+          if (id) obj.id = id;
+
+          accessLevels.push(obj);
+        });
+
+      return accessLevels;
+    }
+
+    getPushAccessLevelsAttributes() {
+      let accessLevels = [];
+
+      this.$allowedToPushDropdownWrap
+        .find('input[name^="protected_branch[push_access_levels_attributes]"]')
+        .map((i, el) => {
+          const $el = $(el);
+          const type = $el.data('type');
+          const value = $el.val();
+
+          if (type === 'role') {
+            accessLevels.push({
+              access_level: value
+            });
+          } else if (type === 'user') {
+            accessLevels.push({
+              user_id: value
+            });
+          }
+        });
+
+      return accessLevels;
+    }
   }
 
 })(window);

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

@@ -11,7 +11,7 @@
       - fieldKey = 'access_level'
       - value = level.access_level
     %input{ type: 'hidden', name: "protected_branch[#{input_basic_name}][#{i}][#{fieldKey}]",
-                            value: value, data: { type: level.type } }
+                            value: value, data: { type: level.type, id: level.id } }
   
   - dropdownLabel = [pluralize(access_by_type[:role], 'role'), pluralize(access_by_type[:user], 'user')].to_sentence