Convert to ES6 class

1 files changed, 51 insertions, 55 deletions

diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index 57ea2f52814..10da3783123 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -1,55 +1,51 @@
-/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
-/* global ProtectedBranchDropdown */
-
-(global => {
-  global.gl = global.gl || {};
-
-  gl.ProtectedBranchCreate = class {
-    constructor() {
-      this.$wrap = this.$form = $('#new_protected_branch');
-      this.buildDropdowns();
-    }
-
-    buildDropdowns() {
-      const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
-      const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
-
-      // Cache callback
-      this.onSelectCallback = this.onSelect.bind(this);
-
-      // Allowed to Merge dropdown
-      new gl.ProtectedBranchAccessDropdown({
-        $dropdown: $allowedToMergeDropdown,
-        data: gon.merge_access_levels,
-        onSelect: this.onSelectCallback
-      });
-
-      // Allowed to Push dropdown
-      new gl.ProtectedBranchAccessDropdown({
-        $dropdown: $allowedToPushDropdown,
-        data: gon.push_access_levels,
-        onSelect: this.onSelectCallback
-      });
-
-      // Select default
-      $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
-      $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
-
-      // Protected branch dropdown
-      new ProtectedBranchDropdown({
-        $dropdown: this.$wrap.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]"]');
-
-      this.$form.find('input[type="submit"]').attr('disabled', !($branchInput.val() && $allowedToMergeInput.length && $allowedToPushInput.length));
-    }
-  };
-})(window);
+import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
+import ProtectedBranchDropdown from './protected_branch_dropdown';
+
+export default class ProtectedBranchCreate {
+  constructor() {
+    this.$form = $('.js-new-protected-branch');
+    this.buildDropdowns();
+  }
+
+  buildDropdowns() {
+    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
+    this.protectedBranchMergeAccessDropdown = new ProtectedBranchAccessDropdown({
+      $dropdown: $allowedToMergeDropdown,
+      data: gon.merge_access_levels,
+      onSelect: this.onSelectCallback,
+    });
+
+    // Allowed to Push dropdown
+    this.protectedBranchPushAccessDropdown = new ProtectedBranchAccessDropdown({
+      $dropdown: $allowedToPushDropdown,
+      data: gon.push_access_levels,
+      onSelect: this.onSelectCallback,
+    });
+
+    // Select default
+    $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
+    $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
+
+    // Protected branch dropdown
+    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.$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));
+  }
+}