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 {
-  constructor(options) {
-    const { $dropdown, data, onSelect } = options;
+(global => {
+  global.gl = global.gl || {};
 
-    $dropdown.glDropdown({
-      data: data,
-      selectable: true,
-      fieldName: $dropdown.data('field-name'),
-      toggleLabel(item) {
-        return item.text;
-      },
-      clicked(item, $el, e) {
-        e.preventDefault();
-        onSelect();
-      }
-    });
+  gl.ProtectedBranchAccessDropdown = class {
+    constructor(options) {
+      const { $dropdown, data, onSelect } = options;
+
+      $dropdown.glDropdown({
+        data: data,
+        selectable: true,
+        fieldName: $dropdown.data('field-name'),
+        toggleLabel(item) {
+          return item.text;
+        },
+        clicked(item, $el, e) {
+          e.preventDefault();
+          onSelect();
+        }
+      });
+    }
   }
-}
+
+})(window);

app/assets/javascripts/protected_branch_create.js.es6

-class ProtectedBranchCreate {
-  constructor() {
-    this.$wrap = this.$form = $('#new_protected_branch');
-    this.buildDropdowns();
-  }
+(global => {
+  global.gl = global.gl || {};
 
-  buildDropdowns() {
-    // Allowed to Merge dropdown
-    const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
-    const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
-
-    new ProtectedBranchAccessDropdown({
-      $dropdown: $allowedToMergeDropdown,
-      data: gon.merge_access_levels,
-      onSelect: this.onSelect.bind(this)
-    });
-
-    // Select default
-    $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
-
-    // Allowed to Push dropdown
-    new ProtectedBranchAccessDropdown({
-      $dropdown: $allowedToPushDropdown,
-      data: gon.push_access_levels,
-      onSelect: this.onSelect.bind(this)
-    });
-
-    // Select default
-    $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
-
-    // Protected branch dropdown
-    new ProtectedBranchDropdown({
-      $dropdown: this.$wrap.find('.js-protected-branch-select'),
-      onSelect: this.onSelect.bind(this)
-    });
-  }
+  gl.ProtectedBranchCreate = class {
+    constructor() {
+      this.$wrap = this.$form = $('#new_protected_branch');
+      this.buildDropdowns();
+    }
 
-  // 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_level_attributes][access_level]"]');
-    const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_level_attributes][access_level]"]');
+    buildDropdowns() {
+      // Allowed to Merge dropdown
+      const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
+      const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: $allowedToMergeDropdown,
+        data: gon.merge_access_levels,
+        onSelect: this.onSelect.bind(this)
+      });
+
+      // Select default
+      $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
+
+      // Allowed to Push dropdown
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: $allowedToPushDropdown,
+        data: gon.push_access_levels,
+        onSelect: this.onSelect.bind(this)
+      });
+
+      // Select default
+      $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
+
+      // Protected branch dropdown
+      new ProtectedBranchDropdown({
+        $dropdown: this.$wrap.find('.js-protected-branch-select'),
+        onSelect: this.onSelect.bind(this)
+      });
+    }
+
+    // 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_level_attributes][access_level]"]');
+      const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_level_attributes][access_level]"]');
 
-    if ($branchInput.val() && $allowedToMergeInput.val() && $allowedToPushInput.val()){
-      this.$form.find('[type="submit"]').removeAttr('disabled');
+      if ($branchInput.val() && $allowedToMergeInput.val() && $allowedToPushInput.val()){
+        this.$form.find('[type="submit"]').removeAttr('disabled');
+      }
     }
   }
-}
+
+})(window);

app/assets/javascripts/protected_branch_edit.js.es6

-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');
+(global => {
+  global.gl = global.gl || {};
 
-    this.buildDropdowns();
-  }
+  gl.ProtectedBranchEdit = class {
+    constructor(options) {
+      this.$wrap = options.$wrap;
+      this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
+      this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
 
-  buildDropdowns() {
-
-    // Allowed to merge dropdown
-    new ProtectedBranchAccessDropdown({
-      $dropdown: this.$allowedToMergeDropdown,
-      data: gon.merge_access_levels,
-      onSelect: this.onSelect.bind(this)
-    });
-
-    // Allowed to push dropdown
-    new ProtectedBranchAccessDropdown({
-      $dropdown: this.$allowedToPushDropdown,
-      data: gon.push_access_levels,
-      onSelect: this.onSelect.bind(this)
-    });
-  }
+      this.buildDropdowns();
+    }
+
+    buildDropdowns() {
+
+      // Allowed to merge dropdown
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: this.$allowedToMergeDropdown,
+        data: gon.merge_access_levels,
+        onSelect: this.onSelect.bind(this)
+      });
 
-  onSelect() {
-    const $allowedToMergeInput = $(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
-    const $allowedToPushInput = $(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
-
-    $.ajax({
-      type: 'POST',
-      url: this.$wrap.data('url'),
-      dataType: 'json',
-      data: {
-        _method: 'PATCH',
-        id: this.$wrap.data('banchId'),
-        protected_branch: {
-          merge_access_level_attributes: {
-            access_level: $allowedToMergeInput.val()
-          },
-          push_access_level_attributes: {
-            access_level: $allowedToPushInput.val()
+      // Allowed to push dropdown
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: this.$allowedToPushDropdown,
+        data: gon.push_access_levels,
+        onSelect: this.onSelect.bind(this)
+      });
+    }
+
+    onSelect() {
+      const $allowedToMergeInput = $(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
+      const $allowedToPushInput = $(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
+
+      $.ajax({
+        type: 'POST',
+        url: this.$wrap.data('url'),
+        dataType: 'json',
+        data: {
+          _method: 'PATCH',
+          id: this.$wrap.data('banchId'),
+          protected_branch: {
+            merge_access_level_attributes: {
+              access_level: $allowedToMergeInput.val()
+            },
+            push_access_level_attributes: {
+              access_level: $allowedToPushInput.val()
+            }
           }
+        },
+        success: () => {
+          this.$wrap.effect('highlight');
+        },
+        error() {
+          $.scrollTo(0);
+          new Flash('Failed to update branch!');
         }
-      },
-      success: () => {
-        this.$wrap.effect('highlight');
-      },
-      error() {
-        $.scrollTo(0);
-        new Flash('Failed to update branch!');
-      }
-    });
+      });
+    }
   }
-}
+
+})(window);

app/assets/javascripts/protected_branch_edit_list.js.es6

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