Update layout and JS for create protected branch.

Also updates protect branch list

8 files changed, 191 insertions, 143 deletions

diff --git a/app/assets/javascripts/allowed_to_merge_select.js.es6 b/app/assets/javascripts/allowed_to_merge_select.js.es6
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/app/assets/javascripts/allowed_to_merge_select.js.es6
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 9e6901962c6..ca4593d87a7 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -173,8 +173,7 @@
           new Search();
           break;
         case 'projects:protected_branches:index':
-          new ProtectedBranchesAccessSelect($(".new_protected_branch"), false, true);
-          new ProtectedBranchesAccessSelect($(".protected-branches-list"), true, false);
+          new CreateProtectedBranch();
           break;
       }
       switch (path.first()) {
diff --git a/app/assets/javascripts/protect_branch.js.es6 b/app/assets/javascripts/protect_branch.js.es6
new file mode 100644
index 00000000000..be987adc4a7
--- /dev/null
+++ b/app/assets/javascripts/protect_branch.js.es6
@@ -0,0 +1,84 @@
+class ProtectedBranchesAccessDropdown {
+  constructor(options) {
+    const { $dropdown, data, onSelect } = options;
+
+    $dropdown.glDropdown({
+      data: data,
+      selectable: true,
+      fieldName: $dropdown.data('field-name'),
+      toggleLabel(item) {
+        return item.text;
+      },
+      clicked(item, $el, e) {
+        e.preventDefault();
+        onSelect();
+      }
+    });
+  }
+}
+
+class AllowedToMergeDropdowns {
+  constructor (options) {
+    const { $dropdowns, onSelect } = options;
+
+    $dropdowns.each((i, el) => {
+      new ProtectedBranchesAccessDropdown({
+        $dropdown: $(el),
+        data: gon.merge_access_levels,
+        onSelect: onSelect
+      });
+    });
+  }
+}
+
+class AllowedToPushSelects {
+  constructor (options) {
+    const { $dropdowns, onSelect } = options;
+
+    $dropdowns.each((i, el) => {
+      new ProtectedBranchesAccessDropdown({
+        $dropdown: $(el),
+        data: gon.push_access_levels,
+        onSelect: onSelect
+      });
+    });
+  }
+}
+
+class CreateProtectedBranch {
+  constructor() {
+    this.$wrap = this.$form = $('#new_protected_branch');
+    this.buildDropdowns();
+  }
+
+  buildDropdowns() {
+    // Allowed to Merge dropdowns
+    new AllowedToMergeDropdowns({
+      $dropdowns: this.$wrap.find('.js-allowed-to-merge'),
+      onSelect: this.onSelect.bind(this)
+    });
+
+    // Allowed to Push dropdowns
+    new AllowedToPushSelects({
+      $dropdowns: this.$wrap.find('.js-allowed-to-push'),
+      onSelect: this.onSelect.bind(this)
+    });
+
+    new ProtectedBranchSelects({
+      $dropdowns: this.$wrap.find('.js-protected-branch-select'),
+      onSelect: this.onSelect.bind(this)
+    });
+  }
+
+  // This will run after clicked callback
+  onSelect() {
+    // Enable submit button
+    const $branchInput = this.$wrap.find('input[name="protected_branch[name]"]');
+    const $allowedToMergeInput = this.$wrap.find('input[name="protected_branch[merge_access_level_attributes][access_level]"]');
+    const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_level_attributes][access_level]"]');
+
+    if ($branchInput.val() && $allowedToMergeInput.val() && $allowedToPushInput.val()){
+      this.$form.find('[type="submit"]').removeAttr('disabled');
+    }
+  }
+}
diff --git a/app/assets/javascripts/protected_branch_select.js b/app/assets/javascripts/protected_branch_select.js
deleted file mode 100644
index 3a47fc972dc..00000000000
--- a/app/assets/javascripts/protected_branch_select.js
+++ /dev/null
@@ -1,72 +0,0 @@
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.ProtectedBranchSelect = (function() {
-    function ProtectedBranchSelect(currentProject) {
-      this.toggleCreateNewButton = bind(this.toggleCreateNewButton, this);
-      this.getProtectedBranches = bind(this.getProtectedBranches, this);
-      $('.dropdown-footer').hide();
-      this.dropdown = $('.js-protected-branch-select').glDropdown({
-        data: this.getProtectedBranches,
-        filterable: true,
-        remote: false,
-        search: {
-          fields: ['title']
-        },
-        selectable: true,
-        toggleLabel: function(selected) {
-          if (selected && 'id' in selected) {
-            return selected.title;
-          } else {
-            return 'Protected Branch';
-          }
-        },
-        fieldName: 'protected_branch[name]',
-        text: function(protected_branch) {
-          return _.escape(protected_branch.title);
-        },
-        id: function(protected_branch) {
-          return _.escape(protected_branch.id);
-        },
-        onFilter: this.toggleCreateNewButton,
-        clicked: function() {
-          return $('.protect-branch-btn').attr('disabled', false);
-        }
-      });
-      $('.create-new-protected-branch').on('click', (function(_this) {
-        return function(event) {
-          _this.dropdown.data('glDropdown').remote.execute();
-          return _this.dropdown.data('glDropdown').selectRowAtIndex(event, 0);
-        };
-      })(this));
-    }
-
-    ProtectedBranchSelect.prototype.getProtectedBranches = function(term, callback) {
-      if (this.selectedBranch) {
-        return callback(gon.open_branches.concat(this.selectedBranch));
-      } else {
-        return callback(gon.open_branches);
-      }
-    };
-
-    ProtectedBranchSelect.prototype.toggleCreateNewButton = function(branchName) {
-      this.selectedBranch = {
-        title: branchName,
-        id: branchName,
-        text: branchName
-      };
-      if (branchName === '') {
-        $('.protected-branch-select-footer-list').addClass('hidden');
-        return $('.dropdown-footer').hide();
-      } else {
-        $('.create-new-protected-branch').text("Create Protected Branch: " + branchName);
-        $('.protected-branch-select-footer-list').removeClass('hidden');
-        return $('.dropdown-footer').show();
-      }
-    };
-
-    return ProtectedBranchSelect;
-
-  })();
-
-}).call(this);
diff --git a/app/assets/javascripts/protected_branch_select.js.es6 b/app/assets/javascripts/protected_branch_select.js.es6
new file mode 100644
index 00000000000..9a259a473ae
--- /dev/null
+++ b/app/assets/javascripts/protected_branch_select.js.es6
@@ -0,0 +1,88 @@
+class ProtectedBranchSelect {
+  constructor(options) {
+    this.onSelect = options.onSelect;
+    this.$dropdown = options.$dropdown;
+    this.$dropdownContainer = this.$dropdown.parent();
+    this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
+    this.$protectedBranch = this.$dropdownContainer.find('.create-new-protected-branch');
+
+    this.buildDropdown();
+    this.bindEvents();
+
+    // Hide footer
+    this.$dropdownFooter.addClass('hidden');
+  }
+
+  buildDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.getProtectedBranches.bind(this),
+      filterable: true,
+      remote: false,
+      search: {
+        fields: ['title']
+      },
+      selectable: true,
+      toggleLabel(selected) {
+        return (selected && 'id' in selected) ? selected.title : 'Protected Branch';
+      },
+      fieldName: 'protected_branch[name]',
+      text(protected_branch) {
+        return _.escape(protected_branch.title);
+      },
+      id(protected_branch) {
+        return _.escape(protected_branch.id);
+      },
+      onFilter: this.toggleCreateNewButton.bind(this),
+      clicked: (item, $el, e) => {
+        e.preventDefault();
+        this.onSelect();
+      }
+    });
+  }
+
+  bindEvents() {
+    this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
+  }
+
+  onClickCreateWildcard(e) {
+    this.$dropdown.data('glDropdown').remote.execute();
+    this.$dropdown.data('glDropdown').selectRowAtIndex(e, 0);
+  }
+
+  getProtectedBranches(term, callback) {
+    if (this.selectedBranch) {
+      callback(gon.open_branches.concat(this.selectedBranch));
+    } else {
+      callback(gon.open_branches);
+    }
+  }
+
+  toggleCreateNewButton(branchName) {
+    this.selectedBranch = {
+      title: branchName,
+      id: branchName,
+      text: branchName
+    };
+
+    if (branchName) {
+      this.$dropdownContainer
+        .find('.create-new-protected-branch')
+        .html(`Create wildcard <code>${branchName}</code>`);
+    }
+
+    this.$dropdownFooter.toggleClass('hidden', !branchName);
+  }
+}
+
+class ProtectedBranchSelects {
+  constructor(options) {
+    const { $dropdowns, onSelect } = options;
+
+    $dropdowns.each((i, el) => {
+      new ProtectedBranchSelect({
+        $dropdown: $(el),
+        onSelect: onSelect
+      });
+    });
+  }
+ }
diff --git a/app/assets/javascripts/protected_branches_access_select.js.es6 b/app/assets/javascripts/protected_branches_access_select.js.es6
deleted file mode 100644
index e98312bbf37..00000000000
--- a/app/assets/javascripts/protected_branches_access_select.js.es6
+++ /dev/null
@@ -1,63 +0,0 @@
-class ProtectedBranchesAccessSelect {
-  constructor(container, saveOnSelect, selectDefault) {
-    this.container = container;
-    this.saveOnSelect = saveOnSelect;
-
-    this.container.find(".allowed-to-merge").each((i, element) => {
-      var fieldName = $(element).data('field-name');
-      var dropdown = $(element).glDropdown({
-        data: gon.merge_access_levels,
-        selectable: true,
-        fieldName: fieldName,
-        clicked: _.chain(this.onSelect).partial(element).bind(this).value()
-      });
-
-      if (selectDefault) {
-        dropdown.data('glDropdown').selectRowAtIndex(document.createEvent("Event"), 0);
-      }
-    });
-
-
-    this.container.find(".allowed-to-push").each((i, element) => {
-      var fieldName = $(element).data('field-name');
-      var dropdown = $(element).glDropdown({
-        data: gon.push_access_levels,
-        selectable: true,
-        fieldName: fieldName,
-        clicked: _.chain(this.onSelect).partial(element).bind(this).value()
-      });
-
-      if (selectDefault) {
-        dropdown.data('glDropdown').selectRowAtIndex(document.createEvent("Event"), 0);
-      }
-    });
-  }
-
-  onSelect(dropdown, selected, element, e) {
-    $(dropdown).find('.dropdown-toggle-text').text(selected.text);
-    if (this.saveOnSelect) {
-      return $.ajax({
-        type: "POST",
-        url: $(dropdown).data('url'),
-        dataType: "json",
-        data: {
-          _method: 'PATCH',
-          id: $(dropdown).data('id'),
-          protected_branch: {
-            ["" + ($(dropdown).data('type')) + "_attributes"]: {
-              "access_level": selected.id
-            }
-          }
-        },
-        success: function() {
-          var row;
-          row = $(e.target);
-          return row.closest('tr').effect('highlight');
-        },
-        error: function() {
-          return new Flash("Failed to update branch!", "alert");
-        }
-      });
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index c54eb0d6479..e8eafa15899 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -72,6 +72,14 @@
   &.large {
     width: 200px;
   }
+
+  &.wide {
+    width: 100%;
+
+    + .dropdown-select {
+      width: 100%;
+    }
+  }
 }
 
 .dropdown-menu,
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index d91c8e61165..63ac471b356 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -656,13 +656,9 @@ pre.light-well {
 }
 
 .new_protected_branch {
-  .dropdown {
-    display: inline;
-    margin-left: 15px;
-  }
-
   label {
-    min-width: 120px;
+    margin-top: 6px;
+    font-weight: normal;
   }
 }
 
@@ -678,6 +674,14 @@ pre.light-well {
       font-weight: 600;
     }
   }
+
+  &.table-bordered {
+    border-radius: 1px;
+
+    th:not(:last-child), td:not(:last-child) {
+      border-right: solid 1px transparent;
+    }
+  }
 }
 
 .custom-notifications-form {