1 files changed, 147 insertions, 149 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
index 5fbe0450bb8..49a6cd1ac77 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -1,191 +1,189 @@
-/* global DropLab */
+import DropLab from '~/droplab/drop_lab';
 import FilteredSearchContainer from './container';
 
-(() => {
-  class FilteredSearchDropdownManager {
-    constructor(baseEndpoint = '', page) {
-      this.container = FilteredSearchContainer.container;
-      this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
-      this.tokenizer = gl.FilteredSearchTokenizer;
-      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
-      this.filteredSearchInput = this.container.querySelector('.filtered-search');
-      this.page = page;
+class FilteredSearchDropdownManager {
+  constructor(baseEndpoint = '', page) {
+    this.container = FilteredSearchContainer.container;
+    this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
+    this.tokenizer = gl.FilteredSearchTokenizer;
+    this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
+    this.filteredSearchInput = this.container.querySelector('.filtered-search');
+    this.page = page;
 
-      this.setupMapping();
+    this.setupMapping();
 
-      this.cleanupWrapper = this.cleanup.bind(this);
-      document.addEventListener('beforeunload', this.cleanupWrapper);
+    this.cleanupWrapper = this.cleanup.bind(this);
+    document.addEventListener('beforeunload', this.cleanupWrapper);
+  }
+
+  cleanup() {
+    if (this.droplab) {
+      this.droplab.destroy();
+      this.droplab = null;
     }
 
-    cleanup() {
-      if (this.droplab) {
-        this.droplab.destroy();
-        this.droplab = null;
-      }
+    this.setupMapping();
 
-      this.setupMapping();
+    document.removeEventListener('beforeunload', this.cleanupWrapper);
+  }
 
-      document.removeEventListener('beforeunload', this.cleanupWrapper);
-    }
+  setupMapping() {
+    this.mapping = {
+      author: {
+        reference: null,
+        gl: 'DropdownUser',
+        element: this.container.querySelector('#js-dropdown-author'),
+      },
+      assignee: {
+        reference: null,
+        gl: 'DropdownUser',
+        element: this.container.querySelector('#js-dropdown-assignee'),
+      },
+      milestone: {
+        reference: null,
+        gl: 'DropdownNonUser',
+        extraArguments: [`${this.baseEndpoint}/milestones.json`, '%'],
+        element: this.container.querySelector('#js-dropdown-milestone'),
+      },
+      label: {
+        reference: null,
+        gl: 'DropdownNonUser',
+        extraArguments: [`${this.baseEndpoint}/labels.json`, '~'],
+        element: this.container.querySelector('#js-dropdown-label'),
+      },
+      hint: {
+        reference: null,
+        gl: 'DropdownHint',
+        element: this.container.querySelector('#js-dropdown-hint'),
+      },
+    };
+  }
 
-    setupMapping() {
-      this.mapping = {
-        author: {
-          reference: null,
-          gl: 'DropdownUser',
-          element: this.container.querySelector('#js-dropdown-author'),
-        },
-        assignee: {
-          reference: null,
-          gl: 'DropdownUser',
-          element: this.container.querySelector('#js-dropdown-assignee'),
-        },
-        milestone: {
-          reference: null,
-          gl: 'DropdownNonUser',
-          extraArguments: [`${this.baseEndpoint}/milestones.json`, '%'],
-          element: this.container.querySelector('#js-dropdown-milestone'),
-        },
-        label: {
-          reference: null,
-          gl: 'DropdownNonUser',
-          extraArguments: [`${this.baseEndpoint}/labels.json`, '~'],
-          element: this.container.querySelector('#js-dropdown-label'),
-        },
-        hint: {
-          reference: null,
-          gl: 'DropdownHint',
-          element: this.container.querySelector('#js-dropdown-hint'),
-        },
-      };
+  static addWordToInput(tokenName, tokenValue = '', clicked = false) {
+    const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+
+    gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
+    input.value = '';
+
+    if (clicked) {
+      gl.FilteredSearchVisualTokens.moveInputToTheRight();
     }
+  }
 
-    static addWordToInput(tokenName, tokenValue = '', clicked = false) {
-      const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+  updateCurrentDropdownOffset() {
+    this.updateDropdownOffset(this.currentDropdown);
+  }
 
-      gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
-      input.value = '';
+  updateDropdownOffset(key) {
+    // Always align dropdown with the input field
+    let offset = this.filteredSearchInput.getBoundingClientRect().left - this.container.querySelector('.scroll-container').getBoundingClientRect().left;
 
-      if (clicked) {
-        gl.FilteredSearchVisualTokens.moveInputToTheRight();
-      }
-    }
+    const maxInputWidth = 240;
+    const currentDropdownWidth = this.mapping[key].element.clientWidth || maxInputWidth;
 
-    updateCurrentDropdownOffset() {
-      this.updateDropdownOffset(this.currentDropdown);
+    // Make sure offset never exceeds the input container
+    const offsetMaxWidth = this.container.querySelector('.scroll-container').clientWidth - currentDropdownWidth;
+    if (offsetMaxWidth < offset) {
+      offset = offsetMaxWidth;
     }
 
-    updateDropdownOffset(key) {
-      // Always align dropdown with the input field
-      let offset = this.filteredSearchInput.getBoundingClientRect().left - this.container.querySelector('.scroll-container').getBoundingClientRect().left;
+    this.mapping[key].reference.setOffset(offset);
+  }
 
-      const maxInputWidth = 240;
-      const currentDropdownWidth = this.mapping[key].element.clientWidth || maxInputWidth;
+  load(key, firstLoad = false) {
+    const mappingKey = this.mapping[key];
+    const glClass = mappingKey.gl;
+    const element = mappingKey.element;
+    let forceShowList = false;
 
-      // Make sure offset never exceeds the input container
-      const offsetMaxWidth = this.container.querySelector('.scroll-container').clientWidth - currentDropdownWidth;
-      if (offsetMaxWidth < offset) {
-        offset = offsetMaxWidth;
-      }
+    if (!mappingKey.reference) {
+      const dl = this.droplab;
+      const defaultArguments = [null, dl, element, this.filteredSearchInput, key];
+      const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
 
-      this.mapping[key].reference.setOffset(offset);
+      // Passing glArguments to `new gl[glClass](<arguments>)`
+      mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
     }
 
-    load(key, firstLoad = false) {
-      const mappingKey = this.mapping[key];
-      const glClass = mappingKey.gl;
-      const element = mappingKey.element;
-      let forceShowList = false;
-
-      if (!mappingKey.reference) {
-        const dl = this.droplab;
-        const defaultArguments = [null, dl, element, this.filteredSearchInput, key];
-        const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
+    if (firstLoad) {
+      mappingKey.reference.init();
+    }
 
-        // Passing glArguments to `new gl[glClass](<arguments>)`
-        mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
-      }
+    if (this.currentDropdown === 'hint') {
+      // Force the dropdown to show if it was clicked from the hint dropdown
+      forceShowList = true;
+    }
 
-      if (firstLoad) {
-        mappingKey.reference.init();
-      }
+    this.updateDropdownOffset(key);
+    mappingKey.reference.render(firstLoad, forceShowList);
 
-      if (this.currentDropdown === 'hint') {
-        // Force the dropdown to show if it was clicked from the hint dropdown
-        forceShowList = true;
-      }
+    this.currentDropdown = key;
+  }
 
-      this.updateDropdownOffset(key);
-      mappingKey.reference.render(firstLoad, forceShowList);
+  loadDropdown(dropdownName = '') {
+    let firstLoad = false;
 
-      this.currentDropdown = key;
+    if (!this.droplab) {
+      firstLoad = true;
+      this.droplab = new DropLab();
     }
 
-    loadDropdown(dropdownName = '') {
-      let firstLoad = false;
+    const match = this.filteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
+    const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key
+      && this.mapping[match.key];
+    const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
 
-      if (!this.droplab) {
-        firstLoad = true;
-        this.droplab = new DropLab();
-      }
+    if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
+      const key = match && match.key ? match.key : 'hint';
+      this.load(key, firstLoad);
+    }
+  }
 
-      const match = this.filteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
-      const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key
-        && this.mapping[match.key];
-      const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
+  setDropdown() {
+    const query = gl.DropdownUtils.getSearchQuery(true);
+    const { lastToken, searchToken } = this.tokenizer.processTokens(query);
 
-      if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
-        const key = match && match.key ? match.key : 'hint';
-        this.load(key, firstLoad);
-      }
+    if (this.currentDropdown) {
+      this.updateCurrentDropdownOffset();
     }
 
-    setDropdown() {
-      const query = gl.DropdownUtils.getSearchQuery(true);
-      const { lastToken, searchToken } = this.tokenizer.processTokens(query);
-
-      if (this.currentDropdown) {
-        this.updateCurrentDropdownOffset();
-      }
-
-      if (lastToken === searchToken && lastToken !== null) {
-        // Token is not fully initialized yet because it has no value
-        // Eg. token = 'label:'
-
-        const split = lastToken.split(':');
-        const dropdownName = split[0].split(' ').last();
-        this.loadDropdown(split.length > 1 ? dropdownName : '');
-      } else if (lastToken) {
-        // Token has been initialized into an object because it has a value
-        this.loadDropdown(lastToken.key);
-      } else {
-        this.loadDropdown('hint');
-      }
+    if (lastToken === searchToken && lastToken !== null) {
+      // Token is not fully initialized yet because it has no value
+      // Eg. token = 'label:'
+
+      const split = lastToken.split(':');
+      const dropdownName = split[0].split(' ').last();
+      this.loadDropdown(split.length > 1 ? dropdownName : '');
+    } else if (lastToken) {
+      // Token has been initialized into an object because it has a value
+      this.loadDropdown(lastToken.key);
+    } else {
+      this.loadDropdown('hint');
     }
+  }
 
-    resetDropdowns() {
-      if (!this.currentDropdown) {
-        return;
-      }
+  resetDropdowns() {
+    if (!this.currentDropdown) {
+      return;
+    }
 
-      // Force current dropdown to hide
-      this.mapping[this.currentDropdown].reference.hideDropdown();
+    // Force current dropdown to hide
+    this.mapping[this.currentDropdown].reference.hideDropdown();
 
-      // Re-Load dropdown
-      this.setDropdown();
+    // Re-Load dropdown
+    this.setDropdown();
 
-      // Reset filters for current dropdown
-      this.mapping[this.currentDropdown].reference.resetFilters();
+    // Reset filters for current dropdown
+    this.mapping[this.currentDropdown].reference.resetFilters();
 
-      // Reposition dropdown so that it is aligned with cursor
-      this.updateDropdownOffset(this.currentDropdown);
-    }
+    // Reposition dropdown so that it is aligned with cursor
+    this.updateDropdownOffset(this.currentDropdown);
+  }
 
-    destroyDroplab() {
-      this.droplab.destroy();
-    }
+  destroyDroplab() {
+    this.droplab.destroy();
   }
+}
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;
-})();
+window.gl = window.gl || {};
+gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;