Convert to ES6 class

app/assets/javascripts/protected_branches/protected_branch_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.ProtectedBranchAccessDropdown = class {
+export default class ProtectedBranchAccessDropdown {
   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'),
-        toggleLabel(item, el) {
-          if (el.is('.is-active')) {
+      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(opts) {
-          const { e } = opts;
-
-          e.preventDefault();
+      clicked(options) {
+        options.e.preventDefault();
         onSelect();
-        }
+      },
     });
   }
-  };
-})(window);
+}

app/assets/javascripts/protected_branches/protected_branch_create.js

-/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
-/* global ProtectedBranchDropdown */
+import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
+import ProtectedBranchDropdown from './protected_branch_dropdown';
 
-(global => {
-  global.gl = global.gl || {};
-
-  gl.ProtectedBranchCreate = class {
+export default class ProtectedBranchCreate {
   constructor() {
-      this.$wrap = this.$form = $('#new_protected_branch');
+    this.$form = $('.js-new-protected-branch');
     this.buildDropdowns();
   }
 
   buildDropdowns() {
-      const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
-      const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+    const $allowedToMergeDropdown = this.$form.find('.js-allowed-to-merge');
+    const $allowedToPushDropdown = this.$form.find('.js-allowed-to-push');
 
     // Cache callback
     this.onSelectCallback = this.onSelect.bind(this);
 
     // Allowed to Merge dropdown
-      new gl.ProtectedBranchAccessDropdown({
+    this.protectedBranchMergeAccessDropdown = new ProtectedBranchAccessDropdown({
       $dropdown: $allowedToMergeDropdown,
       data: gon.merge_access_levels,
-        onSelect: this.onSelectCallback
+      onSelect: this.onSelectCallback,
     });
 
     // Allowed to Push dropdown
-      new gl.ProtectedBranchAccessDropdown({
+    this.protectedBranchPushAccessDropdown = new ProtectedBranchAccessDropdown({
       $dropdown: $allowedToPushDropdown,
       data: gon.push_access_levels,
-        onSelect: this.onSelectCallback
+      onSelect: this.onSelectCallback,
     });
 
     // Select default
@@ -36,20 +33,19 @@
     $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
 
     // Protected branch dropdown
-      new ProtectedBranchDropdown({
-        $dropdown: this.$wrap.find('.js-protected-branch-select'),
-        onSelect: this.onSelectCallback
+    this.protectedBranchDropdown = new ProtectedBranchDropdown({
+      $dropdown: this.$form.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]"]');
+    const $branchInput = this.$form.find('input[name="protected_branch[name]"]');
+    const $allowedToMergeInput = this.$form.find('input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]');
+    const $allowedToPushInput = this.$form.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);
+}

app/assets/javascripts/protected_branches/protected_branch_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 ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
 
-  gl.ProtectedBranchEdit = class {
+export default class ProtectedBranchEdit {
   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.onSelectCallback = this.onSelect.bind(this);
 
     this.buildDropdowns();
   }
 
   buildDropdowns() {
     // Allowed to merge dropdown
-      new gl.ProtectedBranchAccessDropdown({
+    this.protectedBranchAccessDropdown = new ProtectedBranchAccessDropdown({
       $dropdown: this.$allowedToMergeDropdown,
       data: gon.merge_access_levels,
-        onSelect: this.onSelect.bind(this)
+      onSelect: this.onSelectCallback,
     });
 
     // Allowed to push dropdown
-      new gl.ProtectedBranchAccessDropdown({
+    this.protectedBranchAccessDropdown = new ProtectedBranchAccessDropdown({
       $dropdown: this.$allowedToPushDropdown,
       data: gon.push_access_levels,
-        onSelect: this.onSelect.bind(this)
+      onSelect: this.onSelectCallback,
     });
   }
 
@@ -48,22 +48,21 @@
         protected_branch: {
           merge_access_levels_attributes: [{
             id: this.$allowedToMergeDropdown.data('access-level-id'),
-              access_level: $allowedToMergeInput.val()
+            access_level: $allowedToMergeInput.val(),
           }],
           push_access_levels_attributes: [{
             id: this.$allowedToPushDropdown.data('access-level-id'),
-              access_level: $allowedToPushInput.val()
-            }]
-          }
+            access_level: $allowedToPushInput.val(),
+          }],
+        },
       },
       error() {
         $.scrollTo(0);
-          new Flash('Failed to update branch!');
-        }
+        new Flash('Failed to update branch!', null, $('.js-protected-branches-list'));
+      },
     }).always(() => {
       this.$allowedToMergeDropdown.enable();
       this.$allowedToPushDropdown.enable();
     });
   }
-  };
-})(window);
+}

app/assets/javascripts/protected_branches/protected_branch_edit_list.js

-/* eslint-disable arrow-parens, no-param-reassign, no-new, comma-dangle */
+/* eslint-disable no-new */
 
-(global => {
-  global.gl = global.gl || {};
+import ProtectedBranchEdit from './protected_branch_edit';
 
-  gl.ProtectedBranchEditList = class {
+export default class ProtectedBranchEditList {
   constructor() {
     this.$wrap = $('.protected-branches-list');
+    this.initEditForm();
+  }
 
-      // Build edit forms
+  initEditForm() {
     this.$wrap.find('.js-protected-branch-edit-form').each((i, el) => {
-        new gl.ProtectedBranchEdit({
-          $wrap: $(el)
+      new ProtectedBranchEdit({
+        $wrap: $(el),
       });
     });
   }
-  };
-})(window);
+}