Rest of Dispatcher Refactor

6 files changed, 129 insertions, 132 deletions

diff --git a/spec/javascripts/filtered_search/dropdown_user_spec.js b/spec/javascripts/filtered_search/dropdown_user_spec.js
index f1e6119253e..c37a964975d 100644
--- a/spec/javascripts/filtered_search/dropdown_user_spec.js
+++ b/spec/javascripts/filtered_search/dropdown_user_spec.js
@@ -1,8 +1,6 @@
-import '~/filtered_search/dropdown_utils';
-import '~/filtered_search/filtered_search_tokenizer';
-import '~/filtered_search/filtered_search_dropdown';
-import '~/filtered_search/dropdown_user';
-
+import DropdownUtils from '~/filtered_search/dropdown_utils';
+import DropdownUser from '~/filtered_search/dropdown_user';
+import FilteredSearchTokenizer from '~/filtered_search/filtered_search_tokenizer';
 import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
 
 describe('Dropdown User', () => {
@@ -10,18 +8,18 @@ describe('Dropdown User', () => {
     let dropdownUser;
 
     beforeEach(() => {
-      spyOn(gl.DropdownUser.prototype, 'bindEvents').and.callFake(() => {});
-      spyOn(gl.DropdownUser.prototype, 'getProjectId').and.callFake(() => {});
-      spyOn(gl.DropdownUser.prototype, 'getGroupId').and.callFake(() => {});
-      spyOn(gl.DropdownUtils, 'getSearchInput').and.callFake(() => {});
+      spyOn(DropdownUser.prototype, 'bindEvents').and.callFake(() => {});
+      spyOn(DropdownUser.prototype, 'getProjectId').and.callFake(() => {});
+      spyOn(DropdownUser.prototype, 'getGroupId').and.callFake(() => {});
+      spyOn(DropdownUtils, 'getSearchInput').and.callFake(() => {});
 
-      dropdownUser = new gl.DropdownUser({
+      dropdownUser = new DropdownUser({
         tokenKeys: FilteredSearchTokenKeys,
       });
     });
 
     it('should not return the double quote found in value', () => {
-      spyOn(gl.FilteredSearchTokenizer, 'processTokens').and.returnValue({
+      spyOn(FilteredSearchTokenizer, 'processTokens').and.returnValue({
         lastToken: '"johnny appleseed',
       });
 
@@ -29,7 +27,7 @@ describe('Dropdown User', () => {
     });
 
     it('should not return the single quote found in value', () => {
-      spyOn(gl.FilteredSearchTokenizer, 'processTokens').and.returnValue({
+      spyOn(FilteredSearchTokenizer, 'processTokens').and.returnValue({
         lastToken: '\'larry boy',
       });
 
@@ -39,22 +37,22 @@ describe('Dropdown User', () => {
 
   describe('config AjaxFilter\'s endpoint', () => {
     beforeEach(() => {
-      spyOn(gl.DropdownUser.prototype, 'bindEvents').and.callFake(() => {});
-      spyOn(gl.DropdownUser.prototype, 'getProjectId').and.callFake(() => {});
-      spyOn(gl.DropdownUser.prototype, 'getGroupId').and.callFake(() => {});
+      spyOn(DropdownUser.prototype, 'bindEvents').and.callFake(() => {});
+      spyOn(DropdownUser.prototype, 'getProjectId').and.callFake(() => {});
+      spyOn(DropdownUser.prototype, 'getGroupId').and.callFake(() => {});
     });
 
     it('should return endpoint', () => {
       window.gon = {
         relative_url_root: '',
       };
-      const dropdown = new gl.DropdownUser();
+      const dropdown = new DropdownUser();
 
       expect(dropdown.config.AjaxFilter.endpoint).toBe('/autocomplete/users.json');
     });
 
     it('should return endpoint when relative_url_root is undefined', () => {
-      const dropdown = new gl.DropdownUser();
+      const dropdown = new DropdownUser();
 
       expect(dropdown.config.AjaxFilter.endpoint).toBe('/autocomplete/users.json');
     });
@@ -63,7 +61,7 @@ describe('Dropdown User', () => {
       window.gon = {
         relative_url_root: '/gitlab_directory',
       };
-      const dropdown = new gl.DropdownUser();
+      const dropdown = new DropdownUser();
 
       expect(dropdown.config.AjaxFilter.endpoint).toBe('/gitlab_directory/autocomplete/users.json');
     });
@@ -84,7 +82,7 @@ describe('Dropdown User', () => {
       loadFixtures(fixtureTemplate);
       authorFilterDropdownElement = document.querySelector('#js-dropdown-author');
       const dummyInput = document.createElement('div');
-      dropdown = new gl.DropdownUser({
+      dropdown = new DropdownUser({
         dropdown: authorFilterDropdownElement,
         input: dummyInput,
       });
diff --git a/spec/javascripts/filtered_search/dropdown_utils_spec.js b/spec/javascripts/filtered_search/dropdown_utils_spec.js
index d6e1af105f1..3d6dec19eca 100644
--- a/spec/javascripts/filtered_search/dropdown_utils_spec.js
+++ b/spec/javascripts/filtered_search/dropdown_utils_spec.js
@@ -1,6 +1,5 @@
-import '~/filtered_search/dropdown_utils';
-import '~/filtered_search/filtered_search_tokenizer';
-import '~/filtered_search/filtered_search_dropdown_manager';
+import DropdownUtils from '~/filtered_search/dropdown_utils';
+import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dropdown_manager';
 import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
 import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper';
 
@@ -10,25 +9,25 @@ describe('Dropdown Utils', () => {
 
   describe('getEscapedText', () => {
     it('should return same word when it has no space', () => {
-      const escaped = gl.DropdownUtils.getEscapedText('textWithoutSpace');
+      const escaped = DropdownUtils.getEscapedText('textWithoutSpace');
       expect(escaped).toBe('textWithoutSpace');
     });
 
     it('should escape with double quotes', () => {
-      let escaped = gl.DropdownUtils.getEscapedText('text with space');
+      let escaped = DropdownUtils.getEscapedText('text with space');
       expect(escaped).toBe('"text with space"');
 
-      escaped = gl.DropdownUtils.getEscapedText('won\'t fix');
+      escaped = DropdownUtils.getEscapedText('won\'t fix');
       expect(escaped).toBe('"won\'t fix"');
     });
 
     it('should escape with single quotes', () => {
-      const escaped = gl.DropdownUtils.getEscapedText('won"t fix');
+      const escaped = DropdownUtils.getEscapedText('won"t fix');
       expect(escaped).toBe('\'won"t fix\'');
     });
 
     it('should escape with single quotes by default', () => {
-      const escaped = gl.DropdownUtils.getEscapedText('won"t\' fix');
+      const escaped = DropdownUtils.getEscapedText('won"t\' fix');
       expect(escaped).toBe('\'won"t\' fix\'');
     });
   });
@@ -50,14 +49,14 @@ describe('Dropdown Utils', () => {
     it('should filter without symbol', () => {
       input.value = 'roo';
 
-      const updatedItem = gl.DropdownUtils.filterWithSymbol('@', input, item);
+      const updatedItem = DropdownUtils.filterWithSymbol('@', input, item);
       expect(updatedItem.droplab_hidden).toBe(false);
     });
 
     it('should filter with symbol', () => {
       input.value = '@roo';
 
-      const updatedItem = gl.DropdownUtils.filterWithSymbol('@', input, item);
+      const updatedItem = DropdownUtils.filterWithSymbol('@', input, item);
       expect(updatedItem.droplab_hidden).toBe(false);
     });
 
@@ -69,56 +68,56 @@ describe('Dropdown Utils', () => {
       it('should filter with double quote', () => {
         input.value = '"';
 
-        const updatedItem = gl.DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
+        const updatedItem = DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
         expect(updatedItem.droplab_hidden).toBe(false);
       });
 
       it('should filter with double quote and symbol', () => {
         input.value = '~"';
 
-        const updatedItem = gl.DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
+        const updatedItem = DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
         expect(updatedItem.droplab_hidden).toBe(false);
       });
 
       it('should filter with double quote and multiple words', () => {
         input.value = '"community con';
 
-        const updatedItem = gl.DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
+        const updatedItem = DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
         expect(updatedItem.droplab_hidden).toBe(false);
       });
 
       it('should filter with double quote, symbol and multiple words', () => {
         input.value = '~"community con';
 
-        const updatedItem = gl.DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
+        const updatedItem = DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
         expect(updatedItem.droplab_hidden).toBe(false);
       });
 
       it('should filter with single quote', () => {
         input.value = '\'';
 
-        const updatedItem = gl.DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
+        const updatedItem = DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
         expect(updatedItem.droplab_hidden).toBe(false);
       });
 
       it('should filter with single quote and symbol', () => {
         input.value = '~\'';
 
-        const updatedItem = gl.DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
+        const updatedItem = DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
         expect(updatedItem.droplab_hidden).toBe(false);
       });
 
       it('should filter with single quote and multiple words', () => {
         input.value = '\'community con';
 
-        const updatedItem = gl.DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
+        const updatedItem = DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
         expect(updatedItem.droplab_hidden).toBe(false);
       });
 
       it('should filter with single quote, symbol and multiple words', () => {
         input.value = '~\'community con';
 
-        const updatedItem = gl.DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
+        const updatedItem = DropdownUtils.filterWithSymbol('~', input, multipleWordItem);
         expect(updatedItem.droplab_hidden).toBe(false);
       });
     });
@@ -150,26 +149,26 @@ describe('Dropdown Utils', () => {
 
     it('should filter', () => {
       input.value = 'l';
-      let updatedItem = gl.DropdownUtils.filterHint(config(), {
+      let updatedItem = DropdownUtils.filterHint(config(), {
         hint: 'label',
       });
       expect(updatedItem.droplab_hidden).toBe(false);
 
       input.value = 'o';
-      updatedItem = gl.DropdownUtils.filterHint(config(), {
+      updatedItem = DropdownUtils.filterHint(config(), {
         hint: 'label',
       });
       expect(updatedItem.droplab_hidden).toBe(true);
     });
 
     it('should return droplab_hidden false when item has no hint', () => {
-      const updatedItem = gl.DropdownUtils.filterHint(config(), {}, '');
+      const updatedItem = DropdownUtils.filterHint(config(), {}, '');
       expect(updatedItem.droplab_hidden).toBe(false);
     });
 
     it('should allow multiple if item.type is array', () => {
       input.value = 'label:~first la';
-      const updatedItem = gl.DropdownUtils.filterHint(config(), {
+      const updatedItem = DropdownUtils.filterHint(config(), {
         hint: 'label',
         type: 'array',
       });
@@ -178,12 +177,12 @@ describe('Dropdown Utils', () => {
 
     it('should prevent multiple if item.type is not array', () => {
       input.value = 'milestone:~first mile';
-      let updatedItem = gl.DropdownUtils.filterHint(config(), {
+      let updatedItem = DropdownUtils.filterHint(config(), {
         hint: 'milestone',
       });
       expect(updatedItem.droplab_hidden).toBe(true);
 
-      updatedItem = gl.DropdownUtils.filterHint(config(), {
+      updatedItem = DropdownUtils.filterHint(config(), {
         hint: 'milestone',
         type: 'string',
       });
@@ -205,7 +204,7 @@ describe('Dropdown Utils', () => {
         color: '#000000',
       };
 
-      const updated = gl.DropdownUtils.mergeDuplicateLabels(dataMap, newLabel);
+      const updated = DropdownUtils.mergeDuplicateLabels(dataMap, newLabel);
       expect(updated[newLabel.title]).toEqual(newLabel);
     });
 
@@ -215,36 +214,36 @@ describe('Dropdown Utils', () => {
         color: '#000000',
       };
 
-      const updated = gl.DropdownUtils.mergeDuplicateLabels(dataMap, duplicate);
+      const updated = DropdownUtils.mergeDuplicateLabels(dataMap, duplicate);
       expect(updated.label.multipleColors).toEqual([dataMap.label.color, duplicate.color]);
     });
   });
 
   describe('duplicateLabelColor', () => {
     it('should linear-gradient 2 colors', () => {
-      const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000']);
+      const gradient = DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000']);
       expect(gradient).toEqual('linear-gradient(#FFFFFF 0%, #FFFFFF 50%, #000000 50%, #000000 100%)');
     });
 
     it('should linear-gradient 3 colors', () => {
-      const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333']);
+      const gradient = DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333']);
       expect(gradient).toEqual('linear-gradient(#FFFFFF 0%, #FFFFFF 33%, #000000 33%, #000000 66%, #333333 66%, #333333 100%)');
     });
 
     it('should linear-gradient 4 colors', () => {
-      const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333', '#DDDDDD']);
+      const gradient = DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333', '#DDDDDD']);
       expect(gradient).toEqual('linear-gradient(#FFFFFF 0%, #FFFFFF 25%, #000000 25%, #000000 50%, #333333 50%, #333333 75%, #DDDDDD 75%, #DDDDDD 100%)');
     });
 
     it('should not linear-gradient more than 4 colors', () => {
-      const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333', '#DDDDDD', '#EEEEEE']);
+      const gradient = DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333', '#DDDDDD', '#EEEEEE']);
       expect(gradient.indexOf('#EEEEEE') === -1).toEqual(true);
     });
   });
 
   describe('duplicateLabelPreprocessing', () => {
     it('should set preprocessed to true', () => {
-      const results = gl.DropdownUtils.duplicateLabelPreprocessing([]);
+      const results = DropdownUtils.duplicateLabelPreprocessing([]);
       expect(results.preprocessed).toEqual(true);
     });
 
@@ -256,7 +255,7 @@ describe('Dropdown Utils', () => {
         title: 'label2',
         color: '#000000',
       }];
-      const results = gl.DropdownUtils.duplicateLabelPreprocessing(data);
+      const results = DropdownUtils.duplicateLabelPreprocessing(data);
 
       expect(results.length).toEqual(2);
       expect(results[0]).toEqual(data[0]);
@@ -271,14 +270,14 @@ describe('Dropdown Utils', () => {
         title: 'label',
         color: '#000000',
       }];
-      const results = gl.DropdownUtils.duplicateLabelPreprocessing(data);
+      const results = DropdownUtils.duplicateLabelPreprocessing(data);
 
       it('should merge duplicate labels', () => {
         expect(results.length).toEqual(1);
       });
 
       it('should convert multiple colored labels into linear-gradient', () => {
-        expect(results[0].color).toEqual(gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000']));
+        expect(results[0].color).toEqual(DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000']));
       });
 
       it('should set multiple colored label text color to black', () => {
@@ -289,7 +288,7 @@ describe('Dropdown Utils', () => {
 
   describe('setDataValueIfSelected', () => {
     beforeEach(() => {
-      spyOn(gl.FilteredSearchDropdownManager, 'addWordToInput')
+      spyOn(FilteredSearchDropdownManager, 'addWordToInput')
         .and.callFake(() => {});
     });
 
@@ -298,8 +297,8 @@ describe('Dropdown Utils', () => {
         getAttribute: () => 'value',
       };
 
-      gl.DropdownUtils.setDataValueIfSelected(null, selected);
-      expect(gl.FilteredSearchDropdownManager.addWordToInput.calls.count()).toEqual(1);
+      DropdownUtils.setDataValueIfSelected(null, selected);
+      expect(FilteredSearchDropdownManager.addWordToInput.calls.count()).toEqual(1);
     });
 
     it('returns true when dataValue exists', () => {
@@ -307,7 +306,7 @@ describe('Dropdown Utils', () => {
         getAttribute: () => 'value',
       };
 
-      const result = gl.DropdownUtils.setDataValueIfSelected(null, selected);
+      const result = DropdownUtils.setDataValueIfSelected(null, selected);
       expect(result).toBe(true);
     });
 
@@ -316,7 +315,7 @@ describe('Dropdown Utils', () => {
         getAttribute: () => null,
       };
 
-      const result = gl.DropdownUtils.setDataValueIfSelected(null, selected);
+      const result = DropdownUtils.setDataValueIfSelected(null, selected);
       expect(result).toBe(false);
     });
   });
@@ -326,7 +325,7 @@ describe('Dropdown Utils', () => {
       const value = 'label:none ';
 
       it('should return selectionStart when cursor is at the trailing space', () => {
-        const { left, right } = gl.DropdownUtils.getInputSelectionPosition({
+        const { left, right } = DropdownUtils.getInputSelectionPosition({
           selectionStart: 11,
           value,
         });
@@ -336,7 +335,7 @@ describe('Dropdown Utils', () => {
       });
 
       it('should return input when cursor is at the start of input', () => {
-        const { left, right } = gl.DropdownUtils.getInputSelectionPosition({
+        const { left, right } = DropdownUtils.getInputSelectionPosition({
           selectionStart: 0,
           value,
         });
@@ -346,7 +345,7 @@ describe('Dropdown Utils', () => {
       });
 
       it('should return input when cursor is at the middle of input', () => {
-        const { left, right } = gl.DropdownUtils.getInputSelectionPosition({
+        const { left, right } = DropdownUtils.getInputSelectionPosition({
           selectionStart: 7,
           value,
         });
@@ -356,7 +355,7 @@ describe('Dropdown Utils', () => {
       });
 
       it('should return input when cursor is at the end of input', () => {
-        const { left, right } = gl.DropdownUtils.getInputSelectionPosition({
+        const { left, right } = DropdownUtils.getInputSelectionPosition({
           selectionStart: 10,
           value,
         });
@@ -370,7 +369,7 @@ describe('Dropdown Utils', () => {
       const value = 'label:~"Community Contribution"';
 
       it('should return input when cursor is after the first word', () => {
-        const { left, right } = gl.DropdownUtils.getInputSelectionPosition({
+        const { left, right } = DropdownUtils.getInputSelectionPosition({
           selectionStart: 17,
           value,
         });
@@ -380,7 +379,7 @@ describe('Dropdown Utils', () => {
       });
 
       it('should return input when cursor is before the second word', () => {
-        const { left, right } = gl.DropdownUtils.getInputSelectionPosition({
+        const { left, right } = DropdownUtils.getInputSelectionPosition({
           selectionStart: 18,
           value,
         });
@@ -394,7 +393,7 @@ describe('Dropdown Utils', () => {
       const value = 'label:~"Community Contribution';
 
       it('should return entire input when cursor is at the start of input', () => {
-        const { left, right } = gl.DropdownUtils.getInputSelectionPosition({
+        const { left, right } = DropdownUtils.getInputSelectionPosition({
           selectionStart: 0,
           value,
         });
@@ -404,7 +403,7 @@ describe('Dropdown Utils', () => {
       });
 
       it('should return entire input when cursor is at the end of input', () => {
-        const { left, right } = gl.DropdownUtils.getInputSelectionPosition({
+        const { left, right } = DropdownUtils.getInputSelectionPosition({
           selectionStart: 30,
           value,
         });
@@ -434,7 +433,7 @@ describe('Dropdown Utils', () => {
       const valueContainer = authorToken.querySelector('.value-container');
       valueContainer.dataset.originalValue = originalValue;
 
-      const searchQuery = gl.DropdownUtils.getSearchQuery();
+      const searchQuery = DropdownUtils.getSearchQuery();
 
       expect(searchQuery).toBe(' search term author:original dance');
     });
diff --git a/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js
index 5c7e9115aac..71c14582329 100644
--- a/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js
@@ -1,6 +1,4 @@
-import '~/filtered_search/filtered_search_visual_tokens';
-import '~/filtered_search/filtered_search_tokenizer';
-import '~/filtered_search/filtered_search_dropdown_manager';
+import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dropdown_manager';
 
 describe('Filtered Search Dropdown Manager', () => {
   beforeEach(() => {
@@ -28,7 +26,7 @@ describe('Filtered Search Dropdown Manager', () => {
 
     describe('input has no existing value', () => {
       it('should add just tokenName', () => {
-        gl.FilteredSearchDropdownManager.addWordToInput('milestone');
+        FilteredSearchDropdownManager.addWordToInput('milestone');
 
         const token = document.querySelector('.tokens-container .js-visual-token');
 
@@ -38,7 +36,7 @@ describe('Filtered Search Dropdown Manager', () => {
       });
 
       it('should add tokenName and tokenValue', () => {
-        gl.FilteredSearchDropdownManager.addWordToInput('label');
+        FilteredSearchDropdownManager.addWordToInput('label');
 
         let token = document.querySelector('.tokens-container .js-visual-token');
 
@@ -46,9 +44,9 @@ describe('Filtered Search Dropdown Manager', () => {
         expect(token.querySelector('.name').innerText).toBe('label');
         expect(getInputValue()).toBe('');
 
-        gl.FilteredSearchDropdownManager.addWordToInput('label', 'none');
+        FilteredSearchDropdownManager.addWordToInput('label', 'none');
         // We have to get that reference again
-        // Because gl.FilteredSearchDropdownManager deletes the previous token
+        // Because FilteredSearchDropdownManager deletes the previous token
         token = document.querySelector('.tokens-container .js-visual-token');
 
         expect(token.classList.contains('filtered-search-token')).toEqual(true);
@@ -61,7 +59,7 @@ describe('Filtered Search Dropdown Manager', () => {
     describe('input has existing value', () => {
       it('should be able to just add tokenName', () => {
         setInputValue('a');
-        gl.FilteredSearchDropdownManager.addWordToInput('author');
+        FilteredSearchDropdownManager.addWordToInput('author');
 
         const token = document.querySelector('.tokens-container .js-visual-token');
 
@@ -71,10 +69,10 @@ describe('Filtered Search Dropdown Manager', () => {
       });
 
       it('should replace tokenValue', () => {
-        gl.FilteredSearchDropdownManager.addWordToInput('author');
+        FilteredSearchDropdownManager.addWordToInput('author');
 
         setInputValue('roo');
-        gl.FilteredSearchDropdownManager.addWordToInput(null, '@root');
+        FilteredSearchDropdownManager.addWordToInput(null, '@root');
 
         const token = document.querySelector('.tokens-container .js-visual-token');
 
@@ -85,10 +83,10 @@ describe('Filtered Search Dropdown Manager', () => {
       });
 
       it('should add tokenValues containing spaces', () => {
-        gl.FilteredSearchDropdownManager.addWordToInput('label');
+        FilteredSearchDropdownManager.addWordToInput('label');
 
         setInputValue('"test ');
-        gl.FilteredSearchDropdownManager.addWordToInput('label', '~\'"test me"\'');
+        FilteredSearchDropdownManager.addWordToInput('label', '~\'"test me"\'');
 
         const token = document.querySelector('.tokens-container .js-visual-token');
 
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
index 0ed9a587dc1..95d02974bdc 100644
--- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
@@ -5,9 +5,10 @@ import RecentSearchesServiceError from '~/filtered_search/services/recent_search
 import RecentSearchesRoot from '~/filtered_search/recent_searches_root';
 import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
 import '~/lib/utils/common_utils';
-import '~/filtered_search/filtered_search_tokenizer';
-import '~/filtered_search/filtered_search_dropdown_manager';
-import '~/filtered_search/filtered_search_manager';
+import DropdownUtils from '~/filtered_search/dropdown_utils';
+import FilteredSearchVisualTokens from '~/filtered_search/filtered_search_visual_tokens';
+import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dropdown_manager';
+import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
 import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper';
 
 describe('Filtered Search Manager', () => {
@@ -49,21 +50,21 @@ describe('Filtered Search Manager', () => {
       </div>
     `);
 
-    spyOn(gl.FilteredSearchDropdownManager.prototype, 'setDropdown').and.callFake(() => {});
+    spyOn(FilteredSearchDropdownManager.prototype, 'setDropdown').and.callFake(() => {});
   });
 
   const initializeManager = () => {
     /* eslint-disable jasmine/no-unsafe-spy */
-    spyOn(gl.FilteredSearchManager.prototype, 'loadSearchParamsFromURL').and.callFake(() => {});
-    spyOn(gl.FilteredSearchManager.prototype, 'tokenChange').and.callFake(() => {});
-    spyOn(gl.FilteredSearchDropdownManager.prototype, 'updateDropdownOffset').and.callFake(() => {});
+    spyOn(FilteredSearchManager.prototype, 'loadSearchParamsFromURL').and.callFake(() => {});
+    spyOn(FilteredSearchManager.prototype, 'tokenChange').and.callFake(() => {});
+    spyOn(FilteredSearchDropdownManager.prototype, 'updateDropdownOffset').and.callFake(() => {});
     spyOn(gl.utils, 'getParameterByName').and.returnValue(null);
-    spyOn(gl.FilteredSearchVisualTokens, 'unselectTokens').and.callThrough();
+    spyOn(FilteredSearchVisualTokens, 'unselectTokens').and.callThrough();
     /* eslint-enable jasmine/no-unsafe-spy */
 
     input = document.querySelector('.filtered-search');
     tokensContainer = document.querySelector('.tokens-container');
-    manager = new gl.FilteredSearchManager({ page });
+    manager = new FilteredSearchManager({ page });
     manager.setup();
   };
 
@@ -81,7 +82,7 @@ describe('Filtered Search Manager', () => {
     });
 
     it('should instantiate RecentSearchesStore with isLocalStorageAvailable', () => {
-      manager = new gl.FilteredSearchManager({ page });
+      manager = new FilteredSearchManager({ page });
 
       expect(RecentSearchesService.isAvailable).toHaveBeenCalled();
       expect(recentSearchesStoreSrc.default).toHaveBeenCalledWith({
@@ -93,7 +94,7 @@ describe('Filtered Search Manager', () => {
 
   describe('setup', () => {
     beforeEach(() => {
-      manager = new gl.FilteredSearchManager({ page });
+      manager = new FilteredSearchManager({ page });
     });
 
     it('should not instantiate Flash if an RecentSearchesServiceError is caught', () => {
@@ -108,7 +109,7 @@ describe('Filtered Search Manager', () => {
 
   describe('searchState', () => {
     beforeEach(() => {
-      spyOn(gl.FilteredSearchManager.prototype, 'search').and.callFake(() => {});
+      spyOn(FilteredSearchManager.prototype, 'search').and.callFake(() => {});
       initializeManager();
     });
 
@@ -134,7 +135,7 @@ describe('Filtered Search Manager', () => {
       };
 
       manager.searchState(e);
-      expect(gl.FilteredSearchManager.prototype.search).not.toHaveBeenCalled();
+      expect(FilteredSearchManager.prototype.search).not.toHaveBeenCalled();
     });
 
     it('should call search when there is state', () => {
@@ -149,7 +150,7 @@ describe('Filtered Search Manager', () => {
       };
 
       manager.searchState(e);
-      expect(gl.FilteredSearchManager.prototype.search).toHaveBeenCalledWith('opened');
+      expect(FilteredSearchManager.prototype.search).toHaveBeenCalledWith('opened');
     });
   });
 
@@ -251,44 +252,44 @@ describe('Filtered Search Manager', () => {
       });
 
       it('removes last token', () => {
-        spyOn(gl.FilteredSearchVisualTokens, 'removeLastTokenPartial').and.callThrough();
+        spyOn(FilteredSearchVisualTokens, 'removeLastTokenPartial').and.callThrough();
         dispatchBackspaceEvent(input, 'keyup');
         dispatchBackspaceEvent(input, 'keyup');
 
-        expect(gl.FilteredSearchVisualTokens.removeLastTokenPartial).toHaveBeenCalled();
+        expect(FilteredSearchVisualTokens.removeLastTokenPartial).toHaveBeenCalled();
       });
 
       it('sets the input', () => {
-        spyOn(gl.FilteredSearchVisualTokens, 'getLastTokenPartial').and.callThrough();
+        spyOn(FilteredSearchVisualTokens, 'getLastTokenPartial').and.callThrough();
         dispatchDeleteEvent(input, 'keyup');
         dispatchDeleteEvent(input, 'keyup');
 
-        expect(gl.FilteredSearchVisualTokens.getLastTokenPartial).toHaveBeenCalled();
+        expect(FilteredSearchVisualTokens.getLastTokenPartial).toHaveBeenCalled();
         expect(input.value).toEqual('~bug');
       });
     });
 
     it('does not remove token or change input when there is existing input', () => {
-      spyOn(gl.FilteredSearchVisualTokens, 'removeLastTokenPartial').and.callThrough();
-      spyOn(gl.FilteredSearchVisualTokens, 'getLastTokenPartial').and.callThrough();
+      spyOn(FilteredSearchVisualTokens, 'removeLastTokenPartial').and.callThrough();
+      spyOn(FilteredSearchVisualTokens, 'getLastTokenPartial').and.callThrough();
 
       input.value = 'text';
       dispatchDeleteEvent(input, 'keyup');
 
-      expect(gl.FilteredSearchVisualTokens.removeLastTokenPartial).not.toHaveBeenCalled();
-      expect(gl.FilteredSearchVisualTokens.getLastTokenPartial).not.toHaveBeenCalled();
+      expect(FilteredSearchVisualTokens.removeLastTokenPartial).not.toHaveBeenCalled();
+      expect(FilteredSearchVisualTokens.getLastTokenPartial).not.toHaveBeenCalled();
       expect(input.value).toEqual('text');
     });
 
     it('does not remove previous token on single backspace press', () => {
-      spyOn(gl.FilteredSearchVisualTokens, 'removeLastTokenPartial').and.callThrough();
-      spyOn(gl.FilteredSearchVisualTokens, 'getLastTokenPartial').and.callThrough();
+      spyOn(FilteredSearchVisualTokens, 'removeLastTokenPartial').and.callThrough();
+      spyOn(FilteredSearchVisualTokens, 'getLastTokenPartial').and.callThrough();
 
       input.value = 't';
       dispatchDeleteEvent(input, 'keyup');
 
-      expect(gl.FilteredSearchVisualTokens.removeLastTokenPartial).not.toHaveBeenCalled();
-      expect(gl.FilteredSearchVisualTokens.getLastTokenPartial).not.toHaveBeenCalled();
+      expect(FilteredSearchVisualTokens.removeLastTokenPartial).not.toHaveBeenCalled();
+      expect(FilteredSearchVisualTokens.getLastTokenPartial).not.toHaveBeenCalled();
       expect(input.value).toEqual('t');
     });
   });
@@ -309,7 +310,7 @@ describe('Filtered Search Manager', () => {
 
     describe('unselected token', () => {
       beforeEach(() => {
-        spyOn(gl.FilteredSearchManager.prototype, 'removeSelectedToken').and.callThrough();
+        spyOn(FilteredSearchManager.prototype, 'removeSelectedToken').and.callThrough();
 
         tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(
           FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', 'none'),
@@ -380,16 +381,16 @@ describe('Filtered Search Manager', () => {
 
   describe('removeSelectedToken', () => {
     beforeEach(() => {
-      spyOn(gl.FilteredSearchVisualTokens, 'removeSelectedToken').and.callThrough();
-      spyOn(gl.FilteredSearchManager.prototype, 'handleInputPlaceholder').and.callThrough();
-      spyOn(gl.FilteredSearchManager.prototype, 'toggleClearSearchButton').and.callThrough();
+      spyOn(FilteredSearchVisualTokens, 'removeSelectedToken').and.callThrough();
+      spyOn(FilteredSearchManager.prototype, 'handleInputPlaceholder').and.callThrough();
+      spyOn(FilteredSearchManager.prototype, 'toggleClearSearchButton').and.callThrough();
       initializeManager();
     });
 
     it('calls FilteredSearchVisualTokens.removeSelectedToken', () => {
       manager.removeSelectedToken();
 
-      expect(gl.FilteredSearchVisualTokens.removeSelectedToken).toHaveBeenCalled();
+      expect(FilteredSearchVisualTokens.removeSelectedToken).toHaveBeenCalled();
     });
 
     it('calls handleInputPlaceholder', () => {
@@ -421,12 +422,12 @@ describe('Filtered Search Manager', () => {
       manager.filteredSearchInput.value = inputValue;
       manager.filteredSearchInput.dispatchEvent(new Event('input'));
 
-      expect(gl.DropdownUtils.getSearchQuery()).toEqual(inputValue);
+      expect(DropdownUtils.getSearchQuery()).toEqual(inputValue);
 
       manager.clearSearchButton.click();
 
       expect(manager.filteredSearchInput.value).toEqual('');
-      expect(gl.DropdownUtils.getSearchQuery()).toEqual('');
+      expect(DropdownUtils.getSearchQuery()).toEqual('');
     });
   });
 
diff --git a/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js b/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js
index bf8b66f1110..465f5f79931 100644
--- a/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js
@@ -1,19 +1,19 @@
 import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
-import '~/filtered_search/filtered_search_tokenizer';
+import FilteredSearchTokenizer from '~/filtered_search/filtered_search_tokenizer';
 
 describe('Filtered Search Tokenizer', () => {
   const allowedKeys = FilteredSearchTokenKeys.getKeys();
 
   describe('processTokens', () => {
     it('returns for input containing only search value', () => {
-      const results = gl.FilteredSearchTokenizer.processTokens('searchTerm', allowedKeys);
+      const results = FilteredSearchTokenizer.processTokens('searchTerm', allowedKeys);
       expect(results.searchToken).toBe('searchTerm');
       expect(results.tokens.length).toBe(0);
       expect(results.lastToken).toBe(results.searchToken);
     });
 
     it('returns for input containing only tokens', () => {
-      const results = gl.FilteredSearchTokenizer
+      const results = FilteredSearchTokenizer
         .processTokens('author:@root label:~"Very Important" milestone:%v1.0 assignee:none', allowedKeys);
       expect(results.searchToken).toBe('');
       expect(results.tokens.length).toBe(4);
@@ -37,7 +37,7 @@ describe('Filtered Search Tokenizer', () => {
     });
 
     it('returns for input starting with search value and ending with tokens', () => {
-      const results = gl.FilteredSearchTokenizer
+      const results = FilteredSearchTokenizer
         .processTokens('searchTerm anotherSearchTerm milestone:none', allowedKeys);
       expect(results.searchToken).toBe('searchTerm anotherSearchTerm');
       expect(results.tokens.length).toBe(1);
@@ -48,7 +48,7 @@ describe('Filtered Search Tokenizer', () => {
     });
 
     it('returns for input starting with tokens and ending with search value', () => {
-      const results = gl.FilteredSearchTokenizer
+      const results = FilteredSearchTokenizer
         .processTokens('assignee:@user searchTerm', allowedKeys);
 
       expect(results.searchToken).toBe('searchTerm');
@@ -60,7 +60,7 @@ describe('Filtered Search Tokenizer', () => {
     });
 
     it('returns for input containing search value wrapped between tokens', () => {
-      const results = gl.FilteredSearchTokenizer
+      const results = FilteredSearchTokenizer
         .processTokens('author:@root label:~"Won\'t fix" searchTerm anotherSearchTerm milestone:none', allowedKeys);
 
       expect(results.searchToken).toBe('searchTerm anotherSearchTerm');
@@ -81,7 +81,7 @@ describe('Filtered Search Tokenizer', () => {
     });
 
     it('returns for input containing search value in between tokens', () => {
-      const results = gl.FilteredSearchTokenizer
+      const results = FilteredSearchTokenizer
         .processTokens('author:@root searchTerm assignee:none anotherSearchTerm label:~Doing', allowedKeys);
       expect(results.searchToken).toBe('searchTerm anotherSearchTerm');
       expect(results.tokens.length).toBe(3);
@@ -101,14 +101,14 @@ describe('Filtered Search Tokenizer', () => {
     });
 
     it('returns search value for invalid tokens', () => {
-      const results = gl.FilteredSearchTokenizer.processTokens('fake:token', allowedKeys);
+      const results = FilteredSearchTokenizer.processTokens('fake:token', allowedKeys);
       expect(results.lastToken).toBe('fake:token');
       expect(results.searchToken).toBe('fake:token');
       expect(results.tokens.length).toEqual(0);
     });
 
     it('returns search value and token for mix of valid and invalid tokens', () => {
-      const results = gl.FilteredSearchTokenizer.processTokens('label:real fake:token', allowedKeys);
+      const results = FilteredSearchTokenizer.processTokens('label:real fake:token', allowedKeys);
       expect(results.tokens.length).toEqual(1);
       expect(results.tokens[0].key).toBe('label');
       expect(results.tokens[0].value).toBe('real');
@@ -118,13 +118,13 @@ describe('Filtered Search Tokenizer', () => {
     });
 
     it('returns search value for invalid symbols', () => {
-      const results = gl.FilteredSearchTokenizer.processTokens('std::includes', allowedKeys);
+      const results = FilteredSearchTokenizer.processTokens('std::includes', allowedKeys);
       expect(results.lastToken).toBe('std::includes');
       expect(results.searchToken).toBe('std::includes');
     });
 
     it('removes duplicated values', () => {
-      const results = gl.FilteredSearchTokenizer.processTokens('label:~foo label:~foo', allowedKeys);
+      const results = FilteredSearchTokenizer.processTokens('label:~foo label:~foo', allowedKeys);
       expect(results.tokens.length).toBe(1);
       expect(results.tokens[0].key).toBe('label');
       expect(results.tokens[0].value).toBe('foo');
diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
index 0684c3498a2..f1da5f81c0f 100644
--- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
@@ -2,11 +2,12 @@ import _ from 'underscore';
 import AjaxCache from '~/lib/utils/ajax_cache';
 import UsersCache from '~/lib/utils/users_cache';
 
-import '~/filtered_search/filtered_search_visual_tokens';
+import FilteredSearchVisualTokens from '~/filtered_search/filtered_search_visual_tokens';
+import DropdownUtils from '~/filtered_search//dropdown_utils';
 import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper';
 
 describe('Filtered Search Visual Tokens', () => {
-  const subject = gl.FilteredSearchVisualTokens;
+  const subject = FilteredSearchVisualTokens;
 
   const findElements = (tokenElement) => {
     const tokenNameElement = tokenElement.querySelector('.name');
@@ -860,25 +861,25 @@ describe('Filtered Search Visual Tokens', () => {
     it('does not preprocess more than once', () => {
       let labels = [];
 
-      spyOn(gl.DropdownUtils, 'duplicateLabelPreprocessing').and.callFake(() => []);
+      spyOn(DropdownUtils, 'duplicateLabelPreprocessing').and.callFake(() => []);
 
-      labels = gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, labels);
-      gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, labels);
+      labels = FilteredSearchVisualTokens.preprocessLabel(endpoint, labels);
+      FilteredSearchVisualTokens.preprocessLabel(endpoint, labels);
 
-      expect(gl.DropdownUtils.duplicateLabelPreprocessing.calls.count()).toEqual(1);
+      expect(DropdownUtils.duplicateLabelPreprocessing.calls.count()).toEqual(1);
     });
 
     describe('not preprocessed before', () => {
       it('returns preprocessed labels', () => {
         let labels = [];
         expect(labels.preprocessed).not.toEqual(true);
-        labels = gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, labels);
+        labels = FilteredSearchVisualTokens.preprocessLabel(endpoint, labels);
         expect(labels.preprocessed).toEqual(true);
       });
 
       it('overrides AjaxCache with preprocessed results', () => {
         spyOn(AjaxCache, 'override').and.callFake(() => {});
-        gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, []);
+        FilteredSearchVisualTokens.preprocessLabel(endpoint, []);
         expect(AjaxCache.override.calls.count()).toEqual(1);
       });
     });
@@ -926,7 +927,7 @@ describe('Filtered Search Visual Tokens', () => {
     };
 
     const findLabel = tokenValue => labelData.find(
-      label => tokenValue === `~${gl.DropdownUtils.getEscapedText(label.title)}`,
+      label => tokenValue === `~${DropdownUtils.getEscapedText(label.title)}`,
     );
 
     it('updates the color of a label token', (done) => {