Extend `ProtectedRefDropdown` class

2 files changed, 24 insertions, 159 deletions

diff --git a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
index 129feb4ca82..55f046b81b8 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
@@ -1,85 +1,18 @@
-export default class ProtectedBranchDropdown {
+import { ProtectedRefDropdown } from '../protected_refs';
+
+export default class ProtectedBranchDropdown extends ProtectedRefDropdown {
   /**
-   * @param {Object} options containing
-   *                         `$dropdown` target element
-   *                          `onSelect` event callback
-   * $dropdown must be an element created using `dropdown_tag()` rails helper
+   * @param {Object} options matching ProtectedRefDropdown's constructor.
    */
   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('.js-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: (options) => {
-        const { $el, e } = options;
-        e.preventDefault();
-        this.onSelect();
-      },
+    const $dropdownContainer = options.$dropdown.parent();
+
+    super(options, {
+      $dropdownFooter: $dropdownContainer.find('.dropdown-footer'),
+      $createNewProtectedRef: $dropdownContainer.find('.js-create-new-protected-branch'),
+      protectedRefFieldName: 'protected_branch[name]',
+      dropdownLabel: 'Protected Branch',
+      protectedRefsList: gon.open_branches,
     });
   }
-
-  bindEvents() {
-    this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
-  }
-
-  onClickCreateWildcard(e) {
-    e.preventDefault();
-
-    // Refresh the dropdown's data, which ends up calling `getProtectedBranches`
-    this.$dropdown.data('glDropdown').remote.execute();
-    this.$dropdown.data('glDropdown').selectRowAtIndex();
-  }
-
-  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('.js-create-new-protected-branch code')
-        .text(branchName);
-    }
-
-    this.$dropdownFooter.toggleClass('hidden', !branchName);
-  }
 }
diff --git a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
index 068e9698e1d..dde4dae9752 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
@@ -1,86 +1,18 @@
-export default class ProtectedTagDropdown {
+import { ProtectedRefDropdown } from '../protected_refs';
+
+export default class ProtectedTagDropdown extends ProtectedRefDropdown {
   /**
-   * @param {Object} options containing
-   *                         `$dropdown` target element
-   *                          `onSelect` event callback
-   * $dropdown must be an element created using `dropdown_tag()` rails helper
+   * @param {Object} options matching ProtectedRefDropdown's constructor.
    */
   constructor(options) {
-    this.onSelect = options.onSelect;
-    this.$dropdown = options.$dropdown;
-    this.$dropdownContainer = this.$dropdown.parent();
-    this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
-    this.$protectedTag = this.$dropdownContainer.find('.create-new-protected-tag');
-
-    this.buildDropdown();
-    this.bindEvents();
-
-    // Hide footer
-    this.toggleFooter(true);
-  }
-
-  buildDropdown() {
-    this.$dropdown.glDropdown({
-      data: this.getProtectedTags.bind(this),
-      filterable: true,
-      remote: false,
-      search: {
-        fields: ['title'],
-      },
-      selectable: true,
-      toggleLabel(selected) {
-        return (selected && 'id' in selected) ? selected.title : 'Protected Tag';
-      },
-      fieldName: 'protected_tag[name]',
-      text(protectedTag) {
-        return _.escape(protectedTag.title);
-      },
-      id(protectedTag) {
-        return _.escape(protectedTag.id);
-      },
-      onFilter: this.toggleCreateNewButton.bind(this),
-      clicked: (options) => {
-        options.e.preventDefault();
-        this.onSelect();
-      },
+    const $dropdownContainer = options.$dropdown.parent();
+
+    super(options, {
+      $dropdownFooter: $dropdownContainer.find('.dropdown-footer'),
+      $createNewProtectedRef: $dropdownContainer.find('.create-new-protected-tag'),
+      protectedRefFieldName: 'protected_tag[name]',
+      dropdownLabel: 'Protected Tag',
+      protectedRefsList: gon.open_tags,
     });
   }
-
-  bindEvents() {
-    this.$protectedTag.on('click', this.onClickCreateWildcard.bind(this));
-  }
-
-  onClickCreateWildcard(e) {
-    this.$dropdown.data('glDropdown').remote.execute();
-    this.$dropdown.data('glDropdown').selectRowAtIndex();
-    e.preventDefault();
-  }
-
-  getProtectedTags(term, callback) {
-    if (this.selectedTag) {
-      callback(gon.open_tags.concat(this.selectedTag));
-    } else {
-      callback(gon.open_tags);
-    }
-  }
-
-  toggleCreateNewButton(tagName) {
-    if (tagName) {
-      this.selectedTag = {
-        title: tagName,
-        id: tagName,
-        text: tagName,
-      };
-
-      this.$dropdownContainer
-        .find('.create-new-protected-tag code')
-        .text(tagName);
-    }
-
-    this.toggleFooter(!tagName);
-  }
-
-  toggleFooter(toggleState) {
-    this.$dropdownFooter.toggleClass('hidden', toggleState);
-  }
 }