Generalize protected branch/tag dropdownsce-backport-generalize-protected-branch-tags-to-create-item-dropdown

Remove duplicate ee code

This was generalized for usage in the new variable table design, see
https://gitlab.com/gitlab-org/gitlab-ce/issues/39118#note_53615249

Conflicts:
	app/assets/stylesheets/pages/projects.scss
	ee/app/assets/javascripts/protected_branches/protected_branch_create.js
	ee/app/assets/javascripts/protected_tags/protected_tag_create.js
	ee/app/views/projects/protected_branches/ee/_dropdown.html.haml

2 files changed, 9 insertions, 90 deletions

diff --git a/app/assets/javascripts/protected_tags/protected_tag_create.js b/app/assets/javascripts/protected_tags/protected_tag_create.js
index 91bd140bd12..d1e4a75c17b 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_create.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_create.js
@@ -1,5 +1,5 @@
 import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
-import ProtectedTagDropdown from './protected_tag_dropdown';
+import CreateItemDropdown from '../create_item_dropdown';
 
 export default class ProtectedTagCreate {
   constructor() {
@@ -24,9 +24,12 @@ export default class ProtectedTagCreate {
     $allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0);
 
     // Protected tag dropdown
-    this.protectedTagDropdown = new ProtectedTagDropdown({
+    this.createItemDropdown = new CreateItemDropdown({
       $dropdown: this.$form.find('.js-protected-tag-select'),
+      defaultToggleLabel: 'Protected Tag',
+      fieldName: 'protected_tag[name]',
       onSelect: this.onSelectCallback,
+      getData: ProtectedTagCreate.getProtectedTags,
     });
   }
 
@@ -38,4 +41,8 @@ export default class ProtectedTagCreate {
 
     this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length));
   }
+
+  static getProtectedTags(term, callback) {
+    callback(gon.open_tags);
+  }
 }
diff --git a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
deleted file mode 100644
index a0224213aa0..00000000000
--- a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import _ from 'underscore';
-
-export default class ProtectedTagDropdown {
-  /**
-   * @param {Object} options containing
-   *                         `$dropdown` target element
-   *                          `onSelect` event callback
-   * $dropdown must be an element created using `dropdown_tag()` rails helper
-   */
-  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('.js-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();
-      },
-    });
-  }
-
-  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('.js-create-new-protected-tag code')
-        .text(tagName);
-    }
-
-    this.toggleFooter(!tagName);
-  }
-
-  toggleFooter(toggleState) {
-    this.$dropdownFooter.toggleClass('hidden', toggleState);
-  }
-}