Create protected branches bundle

6 files changed, 241 insertions, 0 deletions

diff --git a/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js.es6
new file mode 100644
index 00000000000..7aeb5f92514
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js.es6
@@ -0,0 +1,28 @@
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchAccessDropdown = class {
+    constructor(options) {
+      const { $dropdown, data, onSelect } = options;
+
+      $dropdown.glDropdown({
+        data: data,
+        selectable: true,
+        inputId: $dropdown.data('input-id'),
+        fieldName: $dropdown.data('field-name'),
+        toggleLabel(item, el) {
+          if (el.is('.is-active')) {
+            return item.text;
+          } else {
+            return 'Select';
+          }
+        },
+        clicked(item, $el, e) {
+          e.preventDefault();
+          onSelect();
+        }
+      });
+    }
+  }
+
+})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_create.js.es6
new file mode 100644
index 00000000000..46beca469b9
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js.es6
@@ -0,0 +1,54 @@
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchCreate = class {
+    constructor() {
+      this.$wrap = this.$form = $('#new_protected_branch');
+      this.buildDropdowns();
+    }
+
+    buildDropdowns() {
+      const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
+      const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+
+      // Cache callback
+      this.onSelectCallback = this.onSelect.bind(this);
+
+      // Allowed to Merge dropdown
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: $allowedToMergeDropdown,
+        data: gon.merge_access_levels,
+        onSelect: this.onSelectCallback
+      });
+
+      // Allowed to Push dropdown
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: $allowedToPushDropdown,
+        data: gon.push_access_levels,
+        onSelect: this.onSelectCallback
+      });
+
+      // Select default
+      $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
+      $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
+
+      // Protected branch dropdown
+      new ProtectedBranchDropdown({
+        $dropdown: this.$wrap.find('.js-protected-branch-select'),
+        onSelect: this.onSelectCallback
+      });
+    }
+
+    // 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_levels_attributes][0][access_level]"]');
+      const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_levels_attributes][0][access_level]"]');
+
+      this.$form.find('input[type="submit"]').attr('disabled', !($branchInput.val() && $allowedToMergeInput.length && $allowedToPushInput.length));
+    }
+  }
+
+})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6
new file mode 100644
index 00000000000..983322cbecc
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6
@@ -0,0 +1,76 @@
+class ProtectedBranchDropdown {
+  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(protectedBranch) {
+        return _.escape(protectedBranch.title);
+      },
+      id(protectedBranch) {
+        return _.escape(protectedBranch.id);
+      },
+      onFilter: this.toggleCreateNewButton.bind(this),
+      clicked: (item, $el, e) => {
+        e.preventDefault();
+        this.onSelect();
+      }
+    });
+  }
+
+  bindEvents() {
+    this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
+  }
+
+  onClickCreateWildcard() {
+    // Refresh the dropdown's data, which ends up calling `getProtectedBranches`
+    this.$dropdown.data('glDropdown').remote.execute();
+    this.$dropdown.data('glDropdown').selectRowAtIndex(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 code')
+        .text(branchName);
+    }
+
+    this.$dropdownFooter.toggleClass('hidden', !branchName);
+  }
+}
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6
new file mode 100644
index 00000000000..15a6dca2875
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6
@@ -0,0 +1,65 @@
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchEdit = class {
+    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 gl.ProtectedBranchAccessDropdown({
+        $dropdown: this.$allowedToMergeDropdown,
+        data: gon.merge_access_levels,
+        onSelect: this.onSelect.bind(this)
+      });
+
+      // Allowed to push dropdown
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: this.$allowedToPushDropdown,
+        data: gon.push_access_levels,
+        onSelect: this.onSelect.bind(this)
+      });
+    }
+
+    onSelect() {
+      const $allowedToMergeInput = this.$wrap.find(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
+      const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
+
+      // Do not update if one dropdown has not selected any option
+      if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return; 
+
+      $.ajax({
+        type: 'POST',
+        url: this.$wrap.data('url'),
+        dataType: 'json',
+        data: {
+          _method: 'PATCH',
+          protected_branch: {
+            merge_access_levels_attributes: [{
+              id: this.$allowedToMergeDropdown.data('access-level-id'),
+              access_level: $allowedToMergeInput.val()
+            }],
+            push_access_levels_attributes: [{
+              id: this.$allowedToPushDropdown.data('access-level-id'),
+              access_level: $allowedToPushInput.val()
+            }]
+          }
+        },
+        success: () => {
+          this.$wrap.effect('highlight');
+        },
+        error() {
+          $.scrollTo(0);
+          new Flash('Failed to update branch!');
+        }
+      });
+    }
+  }
+
+})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit_list.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_edit_list.js.es6
new file mode 100644
index 00000000000..9ff0fd12c76
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit_list.js.es6
@@ -0,0 +1,17 @@
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchEditList = class {
+    constructor() {
+      this.$wrap = $('.protected-branches-list');
+
+      // Build edit forms
+      this.$wrap.find('.js-protected-branch-edit-form').each((i, el) => {
+        new gl.ProtectedBranchEdit({
+          $wrap: $(el)
+        });
+      });
+    }
+  }
+
+})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branches_bundle.js b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
new file mode 100644
index 00000000000..15b3affd469
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
@@ -0,0 +1 @@
+/*= require_tree . */