Refactor of Protected Branch Edit List

4 files changed, 79 insertions, 10 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)
+      });
+    });
+  }
+}
diff --git a/app/views/projects/protected_branches/_protected_branch.html.haml b/app/views/projects/protected_branches/_protected_branch.html.haml
index 986d591b764..5af4052de2f 100644
--- a/app/views/projects/protected_branches/_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_protected_branch.html.haml
@@ -1,5 +1,4 @@
-- url = namespace_project_protected_branch_path(@project.namespace, @project, protected_branch)
-%tr
+%tr.js-protected-branch-edit-form{ data: { url: namespace_project_protected_branch_path(@project.namespace, @project, protected_branch), branch_id: protected_branch.id } }
   %td
     = protected_branch.name
     - if @project.root_ref?(protected_branch.name)
@@ -16,14 +15,14 @@
         (branch was removed from repository)
   %td
     = hidden_field_tag "allowed_to_merge_#{protected_branch.id}", protected_branch.merge_access_level.access_level
-    = dropdown_tag(protected_branch.merge_access_level.humanize,
-                   options: { toggle_class: 'allowed-to-merge', dropdown_class: 'dropdown-menu-selectable merge',
-                   data: { field_name: "allowed_to_merge_#{protected_branch.id}", url: url, id: protected_branch.id, type: "merge_access_level" }})
+    = dropdown_tag( (protected_branch.merge_access_level.humanize || 'Select') ,
+                   options: { toggle_class: 'js-allowed-to-merge', dropdown_class: 'dropdown-menu-selectable',
+                   data: { field_name: "allowed_to_merge_#{protected_branch.id}" }})
   %td
     = hidden_field_tag "allowed_to_push_#{protected_branch.id}", protected_branch.push_access_level.access_level
-    = dropdown_tag(protected_branch.push_access_level.humanize,
-                   options: { toggle_class: 'allowed-to-push', dropdown_class: 'dropdown-menu-selectable push',
-                   data: { field_name: "allowed_to_push_#{protected_branch.id}", url: url, id: protected_branch.id, type: "push_access_level" }})
+    = dropdown_tag( (protected_branch.push_access_level.humanize || 'Select') ,
+                   options: { toggle_class: 'js-allowed-to-push', dropdown_class: 'dropdown-menu-selectable',
+                   data: { field_name: "allowed_to_push_#{protected_branch.id}" }})
   - if can_admin_project
     %td
       = link_to 'Unprotect', [@project.namespace.becomes(Namespace), @project, protected_branch], data: { confirm: 'Branch will be writable for developers. Are you sure?' }, method: :delete, class: 'btn btn-warning'