Fixes as per feedback

app/assets/javascripts/protected_tags/index.js

-export { default as ProtectedTagAccessDropdown } from './protected_tag_access_dropdown';
 export { default as ProtectedTagCreate } from './protected_tag_create';
-export { default as ProtectedTagDropdown } from './protected_tag_dropdown';
-export { default as ProtectedTagEdit } from './protected_tag_edit';
 export { default as ProtectedTagEditList } from './protected_tag_edit_list';

app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js

@@ -11,8 +11,8 @@ export default class ProtectedTagAccessDropdown {
       selectable: true,
       inputId: this.options.$dropdown.data('input-id'),
       fieldName: this.options.$dropdown.data('field-name'),
-      toggleLabel(item, el) {
-        if (el.is('.is-active')) {
+      toggleLabel(item, $el) {
+        if ($el.is('.is-active')) {
           return item.text;
         }
         return 'Select';

app/assets/javascripts/protected_tags/protected_tag_create.js

@@ -3,7 +3,7 @@ import ProtectedTagDropdown from './protected_tag_dropdown';
 
 export default class ProtectedTagCreate {
   constructor() {
-    this.$form = $('.new_protected_tag');
+    this.$form = $('.js-new-protected-tag');
     this.buildDropdowns();
   }
 
@@ -34,7 +34,7 @@ export default class ProtectedTagCreate {
   onSelect() {
     // Enable submit button
     const $tagInput = this.$form.find('input[name="protected_tag[name]"]');
-    const $allowedToCreateInput = this.$form.find('input[name="protected_tag[create_access_levels_attributes][0][access_level]"]');
+    const $allowedToCreateInput = this.$form.find('#create_access_levels_attributes');
 
     this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length));
   }

app/assets/javascripts/protected_tags/protected_tag_dropdown.js

@@ -50,9 +50,10 @@ export default class ProtectedTagDropdown {
     this.$protectedTag.on('click', this.onClickCreateWildcard.bind(this));
   }
 
-  onClickCreateWildcard() {
+  onClickCreateWildcard(e) {
     this.$dropdown.data('glDropdown').remote.execute();
     this.$dropdown.data('glDropdown').selectRowAtIndex();
+    e.preventDefault();
   }
 
   getProtectedTags(term, callback) {

app/assets/javascripts/protected_tags/protected_tag_edit.js

@@ -6,7 +6,8 @@ import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
 export default class ProtectedTagEdit {
   constructor(options) {
     this.$wrap = options.$wrap;
-    this.$allowedToCreateDropdown = this.$wrap.find('.js-allowed-to-create');
+    this.$allowedToCreateDropdownButton = this.$wrap.find('.js-allowed-to-create');
+    this.onSelectCallback = this.onSelect.bind(this);
 
     this.buildDropdowns();
   }
@@ -14,19 +15,19 @@ export default class ProtectedTagEdit {
   buildDropdowns() {
     // Allowed to create dropdown
     this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({
-      $dropdown: this.$allowedToCreateDropdown,
+      $dropdown: this.$allowedToCreateDropdownButton,
       data: gon.create_access_levels,
-      onSelect: this.onSelect.bind(this),
+      onSelect: this.onSelectCallback,
     });
   }
 
   onSelect() {
-    const $allowedToCreateInput = this.$wrap.find(`input[name="${this.$allowedToCreateDropdown.data('fieldName')}"]`);
+    const $allowedToCreateInput = this.$wrap.find(`input[name="${this.$allowedToCreateDropdownButton.data('fieldName')}"]`);
 
     // Do not update if one dropdown has not selected any option
     if (!$allowedToCreateInput.length) return;
 
-    this.$allowedToCreateDropdown.disable();
+    this.$allowedToCreateDropdownButton.disable();
 
     $.ajax({
       type: 'POST',
@@ -36,17 +37,16 @@ export default class ProtectedTagEdit {
         _method: 'PATCH',
         protected_tag: {
           create_access_levels_attributes: [{
-            id: this.$allowedToCreateDropdown.data('access-level-id'),
+            id: this.$allowedToCreateDropdownButton.data('access-level-id'),
             access_level: $allowedToCreateInput.val(),
           }],
         },
       },
       error() {
-        $.scrollTo(0);
         new Flash('Failed to update tag!');
       },
     }).always(() => {
-      this.$allowedToCreateDropdown.enable();
+      this.$allowedToCreateDropdownButton.enable();
     });
   }
 }

app/assets/javascripts/protected_tags/protected_tag_edit_list.js

+/* eslint-disable no-new */
+
 import ProtectedTagEdit from './protected_tag_edit';
 
 export default class ProtectedTagEditList {
   constructor() {
     this.$wrap = $('.protected-tags-list');
-    this.protectedTagList = [];
     this.initEditForm();
   }
 
   initEditForm() {
     this.$wrap.find('.js-protected-tag-edit-form').each((i, el) => {
-      this.protectedTagList[i] = new ProtectedTagEdit({
+      new ProtectedTagEdit({
         $wrap: $(el),
       });
     });

app/assets/stylesheets/pages/projects.scss

@@ -779,7 +779,8 @@ pre.light-well {
 
 .protected-tags-list {
   .dropdown-menu-toggle {
-    width: 300px;
+    width: 100%;
+    max-width: 300px;
   }
 }
 

app/views/projects/protected_tags/_create_protected_tag.html.haml

-= form_for [@project.namespace.becomes(Namespace), @project, @protected_tag], html: { class: 'new_protected_tag' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @protected_tag], html: { class: 'js-new-protected-tag' } do |f|
   .panel.panel-default
     .panel-heading
       %h3.panel-title