1 files changed, 24 insertions, 16 deletions
diff --git a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
index 1d4bb8a13d6..678882a8d2c 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
@@ -1,6 +1,12 @@
-/* eslint-disable comma-dangle, no-unused-vars */
+import _ from 'underscore';
 
-class ProtectedBranchDropdown {
+export default class ProtectedBranchDropdown {
+  /**
+   * @param {Object} options containing
+   *                         `$dropdown` target element
+   *                          `onSelect` event callback
+   * $dropdown must be an element created using `dropdown_branch()` rails helper
+   */
   constructor(options) {
     this.onSelect = options.onSelect;
     this.$dropdown = options.$dropdown;
@@ -12,7 +18,7 @@ class ProtectedBranchDropdown {
     this.bindEvents();
 
     // Hide footer
-    this.$dropdownFooter.addClass('hidden');
+    this.toggleFooter(true);
   }
 
   buildDropdown() {
@@ -21,7 +27,7 @@ class ProtectedBranchDropdown {
       filterable: true,
       remote: false,
       search: {
-        fields: ['title']
+        fields: ['title'],
       },
       selectable: true,
       toggleLabel(selected) {
@@ -35,10 +41,10 @@ class ProtectedBranchDropdown {
         return _.escape(protectedBranch.id);
       },
       onFilter: this.toggleCreateNewButton.bind(this),
-      clicked: (item, $el, e) => {
-        e.preventDefault();
+      clicked: (options) => {
+        options.e.preventDefault();
         this.onSelect();
-      }
+      },
     });
   }
 
@@ -63,20 +69,22 @@ class ProtectedBranchDropdown {
   }
 
   toggleCreateNewButton(branchName) {
-    this.selectedBranch = {
-      title: branchName,
-      id: branchName,
-      text: branchName
-    };
-
     if (branchName) {
+      this.selectedBranch = {
+        title: branchName,
+        id: branchName,
+        text: branchName,
+      };
+
       this.$dropdownContainer
         .find('.js-create-new-protected-branch code')
         .text(branchName);
     }
 
-    this.$dropdownFooter.toggleClass('hidden', !branchName);
+    this.toggleFooter(!branchName);
   }
-}
 
-window.ProtectedBranchDropdown = ProtectedBranchDropdown;
+  toggleFooter(toggleState) {
+    this.$dropdownFooter.toggleClass('hidden', toggleState);
+  }
+}