Refactor of Protected Branch Edit List

3 files changed, 72 insertions, 2 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index ca4593d87a7..6a153978cf2 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -173,7 +173,8 @@
           new Search();
           break;
         case 'projects:protected_branches:index':
-          new CreateProtectedBranch();
+          new ProtectedBranchCreate();
+          new ProtectedBranchEditList();
           break;
       }
       switch (path.first()) {
diff --git a/app/assets/javascripts/protect_branch.js.es6 b/app/assets/javascripts/protect_branch_create.js.es6
index be987adc4a7..830cc0beb73 100644
--- a/app/assets/javascripts/protect_branch.js.es6
+++ b/app/assets/javascripts/protect_branch_create.js.es6
@@ -45,7 +45,7 @@ class AllowedToPushSelects {
   }
 }
 
-class CreateProtectedBranch {
+class ProtectedBranchCreate {
   constructor() {
     this.$wrap = this.$form = $('#new_protected_branch');
     this.buildDropdowns();
diff --git a/app/assets/javascripts/protect_branch_edit.js.es6 b/app/assets/javascripts/protect_branch_edit.js.es6
new file mode 100644
index 00000000000..b8ba22a1d6c
--- /dev/null
+++ b/app/assets/javascripts/protect_branch_edit.js.es6
@@ -0,0 +1,69 @@
+class ProtectedBranchEdit {
+  constructor(options) {
+    this.$wrap = options.$wrap;
+    this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
+    this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+
+    this.buildDropdowns();
+  }
+
+  buildDropdowns() {
+
+    // Allowed to merge dropdown
+    new ProtectedBranchesAccessDropdown({
+      $dropdown: this.$allowedToMergeDropdown,
+      data: gon.merge_access_levels,
+      onSelect: this.onSelect.bind(this)
+    });
+
+    // Allowed to push dropdown
+    new ProtectedBranchesAccessDropdown({
+      $dropdown: this.$allowedToPushDropdown,
+      data: gon.push_access_levels,
+      onSelect: this.onSelect.bind(this)
+    });
+  }
+
+  onSelect() {
+    const $allowedToMergeInput = $(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
+    const $allowedToPushInput = $(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
+
+    $.ajax({
+      type: 'POST',
+      url: this.$wrap.data('url'),
+      dataType: 'json',
+      data: {
+        _method: 'PATCH',
+        id: this.$wrap.data('banchId'),
+        protected_branch: {
+          merge_access_level_attributes: {
+            access_level: $allowedToMergeInput.val()
+          },
+          push_access_level_attributes: {
+            access_level: $allowedToPushInput.val()
+          }
+        }
+      },
+      success: () => {
+        this.$wrap.effect('highlight');
+      },
+      error: function() {
+        $.scrollTo(0);
+        new Flash('Failed to update branch!');
+      }
+    });
+  }
+}
+
+class ProtectedBranchEditList {
+  constructor() {
+    this.$wrap = $('.protected-branches-list');
+
+    // Build edit forms
+    this.$wrap.find('.js-protected-branch-edit-form').each((i, el) => {
+      new ProtectedBranchEdit({
+        $wrap: $(el)
+      });
+    });
+  }
+}