Fix class names and move each class to its own file

app/assets/javascripts/allowed_to_merge_dropdowns.js.es6

+class AllowedToMergeDropdowns {
+  constructor (options) {
+    const { $dropdowns, onSelect } = options;
+
+    $dropdowns.each((i, el) => {
+      new ProtectedBranchAccessDropdown({
+        $dropdown: $(el),
+        data: gon.merge_access_levels,
+        onSelect: onSelect
+      });
+    });
+  }
+}

app/assets/javascripts/allowed_to_push_dropdowns.js.es6

+class AllowedToPushDropdowns {
+  constructor (options) {
+    const { $dropdowns, onSelect } = options;
+
+    $dropdowns.each((i, el) => {
+      new ProtectedBranchAccessDropdown({
+        $dropdown: $(el),
+        data: gon.push_access_levels,
+        onSelect: onSelect
+      });
+    });
+  }
+}
\ No newline at end of file

app/assets/javascripts/protected_branch_access_dropdown.js.es6

+class ProtectedBranchAccessDropdown {
+  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();
+      }
+    });
+  }
+}

app/assets/javascripts/protect_branch_create.js.es6 → app/assets/javascripts/protected_branch_create.js.es6

-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 ProtectedBranchCreate {
   constructor() {
     this.$wrap = this.$form = $('#new_protected_branch');
@@ -59,12 +12,12 @@ class ProtectedBranchCreate {
     });
 
     // Allowed to Push dropdowns
-    new AllowedToPushSelects({
+    new AllowedToPushDropdowns({
       $dropdowns: this.$wrap.find('.js-allowed-to-push'),
       onSelect: this.onSelect.bind(this)
     });
 
-    new ProtectedBranchSelects({
+    new ProtectedBranchDropdowns({
       $dropdowns: this.$wrap.find('.js-protected-branch-select'),
       onSelect: this.onSelect.bind(this)
     });

app/assets/javascripts/protect_branch_edit.js.es6 → app/assets/javascripts/protected_branch_edit.js.es6

@@ -10,14 +10,14 @@ class ProtectedBranchEdit {
   buildDropdowns() {
 
     // Allowed to merge dropdown
-    new ProtectedBranchesAccessDropdown({
+    new ProtectedBranchAccessDropdown({
       $dropdown: this.$allowedToMergeDropdown,
       data: gon.merge_access_levels,
       onSelect: this.onSelect.bind(this)
     });
 
     // Allowed to push dropdown
-    new ProtectedBranchesAccessDropdown({
+    new ProtectedBranchAccessDropdown({
       $dropdown: this.$allowedToPushDropdown,
       data: gon.push_access_levels,
       onSelect: this.onSelect.bind(this)
@@ -47,23 +47,10 @@ class ProtectedBranchEdit {
       success: () => {
         this.$wrap.effect('highlight');
       },
-      error: function() {
+      error() {
         $.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)
-      });
-    });
-  }
-}

app/assets/javascripts/protected_branch_edit_list.js.es6

+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)
+      });
+    });
+  }
+}

app/assets/javascripts/protected_branch_select.js.es6

-class ProtectedBranchSelect {
+class ProtectedBranchDropdown {
   constructor(options) {
     this.onSelect = options.onSelect;
     this.$dropdown = options.$dropdown;
@@ -74,12 +74,12 @@ class ProtectedBranchSelect {
   }
 }
 
-class ProtectedBranchSelects {
+class ProtectedBranchDropdowns {
   constructor(options) {
     const { $dropdowns, onSelect } = options;
 
     $dropdowns.each((i, el) => {
-      new ProtectedBranchSelect({
+      new ProtectedBranchDropdown({
         $dropdown: $(el),
         onSelect: onSelect
       });

app/assets/stylesheets/pages/projects.scss

@@ -675,7 +675,14 @@ pre.light-well {
     }
   }
 
-  &.table-bordered {
+  .settings-message {
+    margin: 0;
+    border-radius: 0 0 1px 1px;
+    padding: 20px 0;
+    border: none;
+  }
+
+  .table-bordered {
     border-radius: 1px;
 
     th:not(:last-child), td:not(:last-child) {

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

-.panel.panel-default
+.panel.panel-default.protected-branches-list
   - if @protected_branches.empty?
+    .panel-heading
+      %b Protected branch (#{@protected_branches.size})
     %p.settings-message.text-center
-      No branches are protected, protect a branch with the form above.
+      There are currently no protected braches, protect a branch with the form above.
   - else
     - can_admin_project = can?(current_user, :admin_project, @project)
 
-    %table.table.protected-branches-list.table-bordered
+    %table.table.table-bordered
       %colgroup
-        %col{ width: "20%" }
-        %col{ width: "30%" }
         %col{ width: "25%" }
+        %col{ width: "30%" }
         %col{ width: "25%" }
+        %col{ width: "20%" }
       %thead
         %tr
           %th Protected branch (#{@protected_branches.size})