Convert to pure ES6 class

app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js

-/* eslint-disable arrow-parens, no-param-reassign, object-shorthand, no-else-return, comma-dangle, max-len */
-
-(global => {
-  global.gl = global.gl || {};
-
-  gl.ProtectedTagAccessDropdown = class {
+export default class ProtectedTagAccessDropdown {
   constructor(options) {
-      const { $dropdown, data, onSelect } = options;
+    this.options = options;
+    this.initDropdown();
+  }
 
-      $dropdown.glDropdown({
-        data: data,
+  initDropdown() {
+    const { onSelect } = this.options;
+    this.options.$dropdown.glDropdown({
+      data: this.options.data,
       selectable: true,
-        inputId: $dropdown.data('input-id'),
-        fieldName: $dropdown.data('field-name'),
+      inputId: this.options.$dropdown.data('input-id'),
+      fieldName: this.options.$dropdown.data('field-name'),
       toggleLabel(item, el) {
         if (el.is('.is-active')) {
           return item.text;
-          } else {
-            return 'Select';
         }
+        return 'Select';
       },
       clicked(item, $el, e) {
         e.preventDefault();
         onSelect();
-        }
+      },
     });
   }
-  };
-})(window);
+}

app/assets/javascripts/protected_tags/protected_tag_create.js

-/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
-/* global ProtectedTagDropdown */
+import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
+import ProtectedTagDropdown from './protected_tag_dropdown';
 
-(global => {
-  global.gl = global.gl || {};
-
-  gl.ProtectedTagCreate = class {
+export default class ProtectedTagCreate {
   constructor() {
-      this.$wrap = this.$form = $('.new_protected_tag');
+    this.$form = $('.new_protected_tag');
     this.buildDropdowns();
   }
 
   buildDropdowns() {
-      const $allowedToCreateDropdown = this.$wrap.find('.js-allowed-to-create');
+    const $allowedToCreateDropdown = this.$form.find('.js-allowed-to-create');
 
     // Cache callback
     this.onSelectCallback = this.onSelect.bind(this);
 
     // Allowed to Create dropdown
-      new gl.ProtectedTagAccessDropdown({
+    this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({
       $dropdown: $allowedToCreateDropdown,
       data: gon.create_access_levels,
-        onSelect: this.onSelectCallback
+      onSelect: this.onSelectCallback,
     });
 
     // Select default
     $allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0);
 
     // Protected tag dropdown
-      new ProtectedTagDropdown({
-        $dropdown: this.$wrap.find('.js-protected-tag-select'),
-        onSelect: this.onSelectCallback
+    this.protectedTagDropdown = new ProtectedTagDropdown({
+      $dropdown: this.$form.find('.js-protected-tag-select'),
+      onSelect: this.onSelectCallback,
     });
   }
 
   // This will run after clicked callback
   onSelect() {
     // Enable submit button
-      const $tagInput = this.$wrap.find('input[name="protected_tag[name]"]');
-      const $allowedToCreateInput = this.$wrap.find('input[name="protected_tag[create_access_levels_attributes][0][access_level]"]');
+    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]"]');
 
     this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length));
   }
-  };
-})(window);
+}

app/assets/javascripts/protected_tags/protected_tag_dropdown.js

-/* eslint-disable comma-dangle, no-unused-vars */
-
-class ProtectedTagDropdown {
+export default class ProtectedTagDropdown {
   constructor(options) {
     this.onSelect = options.onSelect;
     this.$dropdown = options.$dropdown;
@@ -21,7 +19,7 @@ class ProtectedTagDropdown {
       filterable: true,
       remote: false,
       search: {
-        fields: ['title']
+        fields: ['title'],
       },
       selectable: true,
       toggleLabel(selected) {
@@ -38,7 +36,7 @@ class ProtectedTagDropdown {
       clicked: (item, $el, e) => {
         e.preventDefault();
         this.onSelect();
-      }
+      },
     });
   }
 
@@ -63,7 +61,7 @@ class ProtectedTagDropdown {
     this.selectedTag = {
       title: tagName,
       id: tagName,
-      text: tagName
+      text: tagName,
     };
 
     if (tagName) {
@@ -75,5 +73,3 @@ class ProtectedTagDropdown {
     this.$dropdownFooter.toggleClass('hidden', !tagName);
   }
 }
-
-window.ProtectedTagDropdown = ProtectedTagDropdown;

app/assets/javascripts/protected_tags/protected_tag_edit.js

-/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
+/* eslint-disable no-new */
 /* global Flash */
 
-(global => {
-  global.gl = global.gl || {};
+import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
 
-  gl.ProtectedTagEdit = class {
+export default class ProtectedTagEdit {
   constructor(options) {
     this.$wrap = options.$wrap;
     this.$allowedToCreateDropdown = this.$wrap.find('.js-allowed-to-create');
@@ -14,10 +13,10 @@
 
   buildDropdowns() {
     // Allowed to create dropdown
-      new gl.ProtectedTagAccessDropdown({
+    this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({
       $dropdown: this.$allowedToCreateDropdown,
       data: gon.create_access_levels,
-        onSelect: this.onSelect.bind(this)
+      onSelect: this.onSelect.bind(this),
     });
   }
 
@@ -38,17 +37,16 @@
         protected_tag: {
           create_access_levels_attributes: [{
             id: this.$allowedToCreateDropdown.data('access-level-id'),
-              access_level: $allowedToCreateInput.val()
-            }]
-          }
+            access_level: $allowedToCreateInput.val(),
+          }],
+        },
       },
       error() {
         $.scrollTo(0);
         new Flash('Failed to update tag!');
-        }
+      },
     }).always(() => {
       this.$allowedToCreateDropdown.enable();
     });
   }
-  };
-})(window);
+}

app/assets/javascripts/protected_tags/protected_tag_edit_list.js

-/* eslint-disable arrow-parens, no-param-reassign, no-new, comma-dangle */
+import ProtectedTagEdit from './protected_tag_edit';
 
-(global => {
-  global.gl = global.gl || {};
-
-  gl.ProtectedTagEditList = class {
+export default class ProtectedTagEditList {
   constructor() {
     this.$wrap = $('.protected-tags-list');
+    this.protectedTagList = [];
+    this.initEditForm();
+  }
 
-      // Build edit forms
+  initEditForm() {
     this.$wrap.find('.js-protected-tag-edit-form').each((i, el) => {
-        new gl.ProtectedTagEdit({
-          $wrap: $(el)
+      this.protectedTagList[i] = new ProtectedTagEdit({
+        $wrap: $(el),
       });
     });
   }
-  };
-})(window);
+}