Wrap classes with IIFE and define it inside gl namespace

app/assets/javascripts/dispatcher.js

@@ -173,8 +173,8 @@
           new Search();
           break;
         case 'projects:protected_branches:index':
-          new ProtectedBranchCreate();
-          new ProtectedBranchEditList();
+          new gl.ProtectedBranchCreate();
+          new gl.ProtectedBranchEditList();
           break;
       }
       switch (path.first()) {

app/assets/javascripts/protected_branch_access_dropdown.js.es6

-class ProtectedBranchAccessDropdown {
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchAccessDropdown = class {
     constructor(options) {
       const { $dropdown, data, onSelect } = options;
 
@@ -15,4 +18,6 @@ class ProtectedBranchAccessDropdown {
         }
       });
     }
-}
+  }
+
+})(window);

app/assets/javascripts/protected_branch_create.js.es6

-class ProtectedBranchCreate {
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchCreate = class {
     constructor() {
       this.$wrap = this.$form = $('#new_protected_branch');
       this.buildDropdowns();
@@ -9,7 +12,7 @@ class ProtectedBranchCreate {
       const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
       const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
 
-    new ProtectedBranchAccessDropdown({
+      new gl.ProtectedBranchAccessDropdown({
         $dropdown: $allowedToMergeDropdown,
         data: gon.merge_access_levels,
         onSelect: this.onSelect.bind(this)
@@ -19,7 +22,7 @@ class ProtectedBranchCreate {
       $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
 
       // Allowed to Push dropdown
-    new ProtectedBranchAccessDropdown({
+      new gl.ProtectedBranchAccessDropdown({
         $dropdown: $allowedToPushDropdown,
         data: gon.push_access_levels,
         onSelect: this.onSelect.bind(this)
@@ -46,4 +49,6 @@ class ProtectedBranchCreate {
         this.$form.find('[type="submit"]').removeAttr('disabled');
       }
     }
-}
+  }
+
+})(window);

app/assets/javascripts/protected_branch_edit.js.es6

-class ProtectedBranchEdit {
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchEdit = class {
     constructor(options) {
       this.$wrap = options.$wrap;
       this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
@@ -10,14 +13,14 @@ class ProtectedBranchEdit {
     buildDropdowns() {
 
       // Allowed to merge dropdown
-    new ProtectedBranchAccessDropdown({
+      new gl.ProtectedBranchAccessDropdown({
         $dropdown: this.$allowedToMergeDropdown,
         data: gon.merge_access_levels,
         onSelect: this.onSelect.bind(this)
       });
 
       // Allowed to push dropdown
-    new ProtectedBranchAccessDropdown({
+      new gl.ProtectedBranchAccessDropdown({
         $dropdown: this.$allowedToPushDropdown,
         data: gon.push_access_levels,
         onSelect: this.onSelect.bind(this)
@@ -53,4 +56,6 @@ class ProtectedBranchEdit {
         }
       });
     }
-}
+  }
+
+})(window);

app/assets/javascripts/protected_branch_edit_list.js.es6

-class ProtectedBranchEditList {
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchEditList = class {
     constructor() {
       this.$wrap = $('.protected-branches-list');
 
       // Build edit forms
       this.$wrap.find('.js-protected-branch-edit-form').each((i, el) => {
-      new ProtectedBranchEdit({
+        new gl.ProtectedBranchEdit({
           $wrap: $(el)
         });
       });
     }
-}
+  }
+
+})(window);