Rest of Dispatcher Refactor (EE)

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -4,7 +4,7 @@ import NewCommitForm from '../new_commit_form';
 import EditBlob from './edit_blob';
 import BlobFileDropzone from '../blob/blob_file_dropzone';
 
-$(() => {
+export default () => {
   const editBlobForm = $('.js-edit-blob-form');
   const uploadBlobForm = $('.js-upload-blob-form');
   const deleteBlobForm = $('.js-delete-blob-form');
@@ -34,4 +34,4 @@ $(() => {
   if (deleteBlobForm.length) {
     new NewCommitForm(deleteBlobForm);
   }
-});
+};

app/assets/javascripts/boards/filtered_search_boards.js

 /* eslint-disable class-methods-use-this */
 import FilteredSearchTokenKeysIssues from 'ee/filtered_search/filtered_search_token_keys_issues';
 import FilteredSearchContainer from '../filtered_search/container';
+import FilteredSearchManager from '../filtered_search/filtered_search_manager';
 
-export default class FilteredSearchBoards extends gl.FilteredSearchManager {
+export default class FilteredSearchBoards extends FilteredSearchManager {
   constructor(store, updateUrl = false, cantEdit = []) {
     super({
       page: 'boards',

app/assets/javascripts/dispatcher.js

@@ -179,11 +179,6 @@ var Dispatcher;
             .catch(fail);
           shortcut_handler = true;
           break;
-        case 'help:index':
-          import('./pages/help')
-            .then(callDefault)
-            .catch(fail);
-          break;
         case 'search:show':
           import('./pages/search/show')
             .then(callDefault)

app/assets/javascripts/docs/docs_bundle.js

@@ -4,10 +4,7 @@ function addMousetrapClick(el, key) {
   el.addEventListener('click', () => Mousetrap.trigger(key));
 }
 
-function domContentLoaded() {
+export default () => {
   addMousetrapClick(document.querySelector('.js-trigger-shortcut'), '?');
   addMousetrapClick(document.querySelector('.js-trigger-search-bar'), 's');
-}
-
-document.addEventListener('DOMContentLoaded', domContentLoaded);
-
+};

app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js

 import eventHub from '../event_hub';
+import FilteredSearchTokenizer from '../filtered_search_tokenizer';
 
 export default {
   name: 'RecentSearchesDropdownContent',
@@ -23,7 +24,7 @@ export default {
     processedItems() {
       return this.items.map((item) => {
         const { tokens, searchToken }
-          = gl.FilteredSearchTokenizer.processTokens(item, this.allowedKeys);
+          = FilteredSearchTokenizer.processTokens(item, this.allowedKeys);
 
         const resultantTokens = tokens.map(token => ({
           prefix: `${token.key}:`,

app/assets/javascripts/filtered_search/dropdown_emoji.js

 import Flash from '../flash';
 import Ajax from '../droplab/plugins/ajax';
 import Filter from '../droplab/plugins/filter';
-import './filtered_search_dropdown';
+import FilteredSearchDropdown from './filtered_search_dropdown';
+import DropdownUtils from './dropdown_utils';
 
-class DropdownEmoji extends gl.FilteredSearchDropdown {
+export default class DropdownEmoji extends FilteredSearchDropdown {
   constructor(options = {}) {
     super(options);
     this.config = {
@@ -49,7 +50,7 @@ class DropdownEmoji extends gl.FilteredSearchDropdown {
   itemClicked(e) {
     super.itemClicked(e, (selected) => {
       const name = selected.querySelector('.js-data-value').innerText.trim();
-      return gl.DropdownUtils.getEscapedText(name);
+      return DropdownUtils.getEscapedText(name);
     });
   }
 
@@ -76,6 +77,3 @@ class DropdownEmoji extends gl.FilteredSearchDropdown {
       .addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
   }
 }
-
-window.gl = window.gl || {};
-gl.DropdownEmoji = DropdownEmoji;

app/assets/javascripts/filtered_search/dropdown_hint.js

 import Filter from '~/droplab/plugins/filter';
-import './filtered_search_dropdown';
+import FilteredSearchDropdown from './filtered_search_dropdown';
+import DropdownUtils from './dropdown_utils';
+import FilteredSearchDropdownManager from './filtered_search_dropdown_manager';
+import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
 
-class DropdownHint extends gl.FilteredSearchDropdown {
+export default class DropdownHint extends FilteredSearchDropdown {
   constructor(options = {}) {
     const { input, tokenKeys } = options;
     super(options);
     this.config = {
       Filter: {
         template: 'hint',
-        filterFunction: gl.DropdownUtils.filterHint.bind(null, {
+        filterFunction: DropdownUtils.filterHint.bind(null, {
           input,
           allowedKeys: tokenKeys.getKeys(),
         }),
@@ -45,10 +48,10 @@ class DropdownHint extends gl.FilteredSearchDropdown {
           });
 
           if (searchTerms.length > 0) {
-            gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms.join(' '));
+            FilteredSearchVisualTokens.addSearchVisualToken(searchTerms.join(' '));
           }
 
-          gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''), '', false, this.container);
+          FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''), '', false, this.container);
         }
         this.dismissDropdown();
         this.dispatchInputEvent();
@@ -73,6 +76,3 @@ class DropdownHint extends gl.FilteredSearchDropdown {
     this.droplab.addHook(this.input, this.dropdown, [Filter], this.config).init();
   }
 }
-
-window.gl = window.gl || {};
-gl.DropdownHint = DropdownHint;

app/assets/javascripts/filtered_search/dropdown_non_user.js

 import Flash from '../flash';
 import Ajax from '../droplab/plugins/ajax';
 import Filter from '../droplab/plugins/filter';
-import './filtered_search_dropdown';
+import FilteredSearchDropdown from './filtered_search_dropdown';
+import DropdownUtils from './dropdown_utils';
 
-class DropdownNonUser extends gl.FilteredSearchDropdown {
+export default class DropdownNonUser extends FilteredSearchDropdown {
   constructor(options = {}) {
     const { input, endpoint, symbol, preprocessing } = options;
     super(options);
@@ -21,7 +22,7 @@ class DropdownNonUser extends gl.FilteredSearchDropdown {
         },
       },
       Filter: {
-        filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol, input),
+        filterFunction: DropdownUtils.filterWithSymbol.bind(null, this.symbol, input),
         template: 'title',
       },
     };
@@ -30,7 +31,7 @@ class DropdownNonUser extends gl.FilteredSearchDropdown {
   itemClicked(e) {
     super.itemClicked(e, (selected) => {
       const title = selected.querySelector('.js-data-value').innerText.trim();
-      return `${this.symbol}${gl.DropdownUtils.getEscapedText(title)}`;
+      return `${this.symbol}${DropdownUtils.getEscapedText(title)}`;
     });
   }
 
@@ -45,6 +46,3 @@ class DropdownNonUser extends gl.FilteredSearchDropdown {
       .addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
   }
 }
-
-window.gl = window.gl || {};
-gl.DropdownNonUser = DropdownNonUser;

app/assets/javascripts/filtered_search/dropdown_user.js

 import Flash from '../flash';
 import AjaxFilter from '../droplab/plugins/ajax_filter';
-import './filtered_search_dropdown';
+import FilteredSearchDropdown from './filtered_search_dropdown';
 import { addClassIfElementExists } from '../lib/utils/dom_utils';
+import DropdownUtils from './dropdown_utils';
+import FilteredSearchTokenizer from './filtered_search_tokenizer';
 
-class DropdownUser extends gl.FilteredSearchDropdown {
+export default class DropdownUser extends FilteredSearchDropdown {
   constructor(options = {}) {
     const { tokenKeys } = options;
     super(options);
@@ -70,8 +72,8 @@ class DropdownUser extends gl.FilteredSearchDropdown {
   }
 
   getSearchInput() {
-    const query = gl.DropdownUtils.getSearchInput(this.input);
-    const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query, this.tokenKeys.get());
+    const query = DropdownUtils.getSearchInput(this.input);
+    const { lastToken } = FilteredSearchTokenizer.processTokens(query, this.tokenKeys.get());
 
     let value = lastToken || '';
 
@@ -92,6 +94,3 @@ class DropdownUser extends gl.FilteredSearchDropdown {
     this.droplab.addHook(this.input, this.dropdown, [AjaxFilter], this.config).init();
   }
 }
-
-window.gl = window.gl || {};
-gl.DropdownUser = DropdownUser;

app/assets/javascripts/filtered_search/dropdown_utils.js

 import _ from 'underscore';
 import FilteredSearchContainer from './container';
+import FilteredSearchTokenizer from './filtered_search_tokenizer';
+import FilteredSearchDropdownManager from './filtered_search_dropdown_manager';
+import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
 
-class DropdownUtils {
+export default class DropdownUtils {
   static getEscapedText(text) {
     let escapedText = text;
     const hasSpace = text.indexOf(' ') !== -1;
@@ -24,7 +27,7 @@ class DropdownUtils {
 
   static filterWithSymbol(filterSymbol, input, item) {
     const updatedItem = item;
-    const searchInput = gl.DropdownUtils.getSearchInput(input);
+    const searchInput = DropdownUtils.getSearchInput(input);
 
     const title = updatedItem.title.toLowerCase();
     let value = searchInput.toLowerCase();
@@ -114,9 +117,9 @@ class DropdownUtils {
   static filterHint(config, item) {
     const { input, allowedKeys } = config;
     const updatedItem = item;
-    const searchInput = gl.DropdownUtils.getSearchQuery(input);
+    const searchInput = DropdownUtils.getSearchQuery(input);
     const { lastToken, tokens } =
-      gl.FilteredSearchTokenizer.processTokens(searchInput, allowedKeys);
+      FilteredSearchTokenizer.processTokens(searchInput, allowedKeys);
     const lastKey = lastToken.key || lastToken || '';
     const allowMultiple = item.type === 'array';
     const itemInExistingTokens = tokens.some(t => t.key === item.hint);
@@ -140,7 +143,7 @@ class DropdownUtils {
     const dataValue = selected.getAttribute('data-value');
 
     if (dataValue) {
-      gl.FilteredSearchDropdownManager.addWordToInput(filter, dataValue, true);
+      FilteredSearchDropdownManager.addWordToInput(filter, dataValue, true);
     }
 
     // Return boolean based on whether it was set
@@ -190,7 +193,7 @@ class DropdownUtils {
         }
       } else if (token.classList.contains('input-token')) {
         const { isLastVisualTokenValid } =
-          gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+          FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
         const input = FilteredSearchContainer.container.querySelector('.filtered-search');
         const inputValue = input && input.value;
@@ -211,7 +214,7 @@ class DropdownUtils {
 
   static getSearchInput(filteredSearchInput) {
     const inputValue = filteredSearchInput.value;
-    const { right } = gl.DropdownUtils.getInputSelectionPosition(filteredSearchInput);
+    const { right } = DropdownUtils.getInputSelectionPosition(filteredSearchInput);
 
     return inputValue.slice(0, right);
   }
@@ -252,6 +255,3 @@ class DropdownUtils {
     };
   }
 }
-
-window.gl = window.gl || {};
-gl.DropdownUtils = DropdownUtils;

app/assets/javascripts/filtered_search/filtered_search_dropdown.js

+import DropdownUtils from './dropdown_utils';
+import FilteredSearchDropdownManager from './filtered_search_dropdown_manager';
+
 const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
 
-class FilteredSearchDropdown {
+export default class FilteredSearchDropdown {
   constructor({ droplab, dropdown, input, filter }) {
     this.droplab = droplab;
     this.hookId = input && input.id;
@@ -30,11 +33,11 @@ class FilteredSearchDropdown {
     const { selected } = e.detail;
 
     if (selected.tagName === 'LI' && selected.innerHTML) {
-      const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(this.filter, selected);
+      const dataValueSet = DropdownUtils.setDataValueIfSelected(this.filter, selected);
 
       if (!dataValueSet) {
         const value = getValueFunction(selected);
-        gl.FilteredSearchDropdownManager.addWordToInput(this.filter, value, true);
+        FilteredSearchDropdownManager.addWordToInput(this.filter, value, true);
       }
 
       this.resetFilters();
@@ -120,6 +123,3 @@ class FilteredSearchDropdown {
     }
   }
 }
-
-window.gl = window.gl || {};
-gl.FilteredSearchDropdown = FilteredSearchDropdown;

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

 import _ from 'underscore';
 import DropLab from '~/droplab/drop_lab';
 import FilteredSearchContainer from './container';
-
-class FilteredSearchDropdownManager {
+import FilteredSearchTokenKeys from './filtered_search_token_keys';
+import DropdownUtils from './dropdown_utils';
+import DropdownHint from './dropdown_hint';
+import DropdownEmoji from './dropdown_emoji';
+import DropdownNonUser from './dropdown_non_user';
+import DropdownUser from './dropdown_user';
+import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
+
+export default class FilteredSearchDropdownManager {
   constructor(baseEndpoint = '', tokenizer, page, isGroup, filteredSearchTokenKeys) {
     this.container = FilteredSearchContainer.container;
     this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
     this.tokenizer = tokenizer;
-    this.filteredSearchTokenKeys = filteredSearchTokenKeys;
+    this.filteredSearchTokenKeys = filteredSearchTokenKeys || FilteredSearchTokenKeys;
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
     this.page = page;
     this.groupsOnly = page === 'boards' && isGroup;
@@ -34,34 +41,34 @@ class FilteredSearchDropdownManager {
     const allowedMappings = {
       hint: {
         reference: null,
-        gl: 'DropdownHint',
+        gl: DropdownHint,
         element: this.container.querySelector('#js-dropdown-hint'),
       },
     };
     const availableMappings = {
       author: {
         reference: null,
-        gl: 'DropdownUser',
+        gl: DropdownUser,
         element: this.container.querySelector('#js-dropdown-author'),
       },
       label: {
         reference: null,
-        gl: 'DropdownNonUser',
+        gl: DropdownNonUser,
         extraArguments: {
           endpoint: `${this.baseEndpoint}/labels.json${this.groupsOnly ? '?only_group_labels=true' : ''}`,
           symbol: '~',
-          preprocessing: gl.DropdownUtils.duplicateLabelPreprocessing,
+          preprocessing: DropdownUtils.duplicateLabelPreprocessing,
         },
         element: this.container.querySelector('#js-dropdown-label'),
       },
       assignee: {
         reference: null,
-        gl: 'DropdownUser',
+        gl: DropdownUser,
         element: this.container.querySelector('#js-dropdown-assignee'),
       },
       milestone: {
         reference: null,
-        gl: 'DropdownNonUser',
+        gl: DropdownNonUser,
         extraArguments: {
           endpoint: `${this.baseEndpoint}/milestones.json${this.groupsOnly ? '?only_group_milestones=true' : ''}`,
           symbol: '%',
@@ -70,12 +77,12 @@ class FilteredSearchDropdownManager {
       },
       'my-reaction': {
         reference: null,
-        gl: 'DropdownEmoji',
+        gl: DropdownEmoji,
         element: this.container.querySelector('#js-dropdown-my-reaction'),
       },
       weight: {
         reference: null,
-        gl: 'DropdownNonUser',
+        gl: DropdownNonUser,
         element: this.container.querySelector('#js-dropdown-weight'),
       },
     };
@@ -92,11 +99,11 @@ class FilteredSearchDropdownManager {
   static addWordToInput(tokenName, tokenValue = '', clicked = false) {
     const input = FilteredSearchContainer.container.querySelector('.filtered-search');
 
-    gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
+    FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
     input.value = '';
 
     if (clicked) {
-      gl.FilteredSearchVisualTokens.moveInputToTheRight();
+      FilteredSearchVisualTokens.moveInputToTheRight();
     }
   }
 
@@ -137,9 +144,9 @@ class FilteredSearchDropdownManager {
       const extraArguments = mappingKey.extraArguments || {};
       const glArguments = Object.assign({}, defaultArguments, extraArguments);
 
-      // Passing glArguments to `new gl[glClass](<arguments>)`
+      // Passing glArguments to `new glClass(<arguments>)`
       mappingKey.reference =
-        new (Function.prototype.bind.apply(gl[glClass], [null, glArguments]))();
+        new (Function.prototype.bind.apply(glClass, [null, glArguments]))();
     }
 
     if (firstLoad) {
@@ -177,7 +184,7 @@ class FilteredSearchDropdownManager {
   }
 
   setDropdown() {
-    const query = gl.DropdownUtils.getSearchQuery(true);
+    const query = DropdownUtils.getSearchQuery(true);
     const { lastToken, searchToken } =
       this.tokenizer.processTokens(query, this.filteredSearchTokenKeys.getKeys());
 
@@ -222,6 +229,3 @@ class FilteredSearchDropdownManager {
     this.droplab.destroy();
   }
 }
-
-window.gl = window.gl || {};
-gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;

app/assets/javascripts/filtered_search/filtered_search_tokenizer.js

 import './filtered_search_token_keys';
 
-class FilteredSearchTokenizer {
+export default class FilteredSearchTokenizer {
   static processTokens(input, allowedKeys) {
     // Regex extracts `(token):(symbol)(value)`
     // Values that start with a double quote must end in a double quote (same for single)
@@ -50,6 +50,3 @@ class FilteredSearchTokenizer {
     };
   }
 }
-
-window.gl = window.gl || {};
-gl.FilteredSearchTokenizer = FilteredSearchTokenizer;

app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js

@@ -3,8 +3,9 @@ import AjaxCache from '../lib/utils/ajax_cache';
 import Flash from '../flash';
 import FilteredSearchContainer from './container';
 import UsersCache from '../lib/utils/users_cache';
+import DropdownUtils from './dropdown_utils';
 
-class FilteredSearchVisualTokens {
+export default class FilteredSearchVisualTokens {
   static getLastVisualTokenBeforeInput() {
     const inputLi = FilteredSearchContainer.container.querySelector('.input-token');
     const lastVisualToken = inputLi && inputLi.previousElementSibling;
@@ -74,7 +75,7 @@ class FilteredSearchVisualTokens {
     let processed = labels;
 
     if (!labels.preprocessed) {
-      processed = gl.DropdownUtils.duplicateLabelPreprocessing(labels);
+      processed = DropdownUtils.duplicateLabelPreprocessing(labels);
       AjaxCache.override(labelsEndpoint, processed);
       processed.preprocessed = true;
     }
@@ -90,7 +91,7 @@ class FilteredSearchVisualTokens {
     return AjaxCache.retrieve(labelsEndpoint)
       .then(FilteredSearchVisualTokens.preprocessLabel.bind(null, labelsEndpoint))
       .then((labels) => {
-        const matchingLabel = (labels || []).find(label => `~${gl.DropdownUtils.getEscapedText(label.title)}` === tokenValue);
+        const matchingLabel = (labels || []).find(label => `~${DropdownUtils.getEscapedText(label.title)}` === tokenValue);
 
         if (!matchingLabel) {
           return;
@@ -259,11 +260,11 @@ class FilteredSearchVisualTokens {
   static tokenizeInput() {
     const input = FilteredSearchContainer.container.querySelector('.filtered-search');
     const { isLastVisualTokenValid } =
-      gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+      FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
     if (input.value) {
       if (isLastVisualTokenValid) {
-        gl.FilteredSearchVisualTokens.addSearchVisualToken(input.value);
+        FilteredSearchVisualTokens.addSearchVisualToken(input.value);
       } else {
         FilteredSearchVisualTokens.addValueToPreviousVisualTokenElement(input.value);
       }
@@ -324,12 +325,12 @@ class FilteredSearchVisualTokens {
 
     if (!tokenContainer.lastElementChild.isEqualNode(inputLi)) {
       const { isLastVisualTokenValid } =
-        gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+        FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
       if (!isLastVisualTokenValid) {
-        const lastPartial = gl.FilteredSearchVisualTokens.getLastTokenPartial();
-        gl.FilteredSearchVisualTokens.removeLastTokenPartial();
-        gl.FilteredSearchVisualTokens.addSearchVisualToken(lastPartial);
+        const lastPartial = FilteredSearchVisualTokens.getLastTokenPartial();
+        FilteredSearchVisualTokens.removeLastTokenPartial();
+        FilteredSearchVisualTokens.addSearchVisualToken(lastPartial);
       }
 
       tokenContainer.removeChild(inputLi);
@@ -337,6 +338,3 @@ class FilteredSearchVisualTokens {
     }
   }
 }
-
-window.gl = window.gl || {};
-gl.FilteredSearchVisualTokens = FilteredSearchVisualTokens;

app/assets/javascripts/help/help.js

 // We will render the icons list here
-if ($('#user-content-gitlab-icons').length > 0) {
-  const $iconsHeader = $('#user-content-gitlab-icons');
-  const $iconsList = $('<div id="iconsList">ICONS</div>');
-  $($iconsList).insertAfter($iconsHeader.parent());
-}
+export default () => {
+  if ($('#user-content-gitlab-icons').length > 0) {
+    const $iconsHeader = $('#user-content-gitlab-icons');
+    const $iconsList = $('<div id="iconsList">ICONS</div>');
+    $($iconsList).insertAfter($iconsHeader.parent());
+  }
+};

app/assets/javascripts/pages/dashboard/groups/index/index.js

-import initGroupsList from '../../../../groups';
+import initGroupsList from '~/groups';
 
-export default () => {
-  initGroupsList();
-};
+export default initGroupsList;

app/assets/javascripts/pages/groups/show/index.js

@@ -5,7 +5,7 @@ import notificationsDropdown from '~/notifications_dropdown';
 import NotificationsForm from '~/notifications_form';
 import ProjectsList from '~/projects_list';
 import ShortcutsNavigation from '~/shortcuts_navigation';
-import initGroupsList from '../../../groups';
+import initGroupsList from '~/groups';
 
 document.addEventListener('DOMContentLoaded', () => {
   const newGroupChildWrapper = document.querySelector('.js-new-project-subgroup');

app/assets/javascripts/pages/help/index.js

-import VersionCheckImage from '../../version_check_image';
-
-export default () => VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));

app/assets/javascripts/pages/help/index/index.js

+import VersionCheckImage from '~/version_check_image';
+import docs from '~/docs/docs_bundle';
+
+document.addEventListener('DOMContentLoaded', () => {
+  docs();
+  VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
+});

app/assets/javascripts/pages/help/show/index.js

+import initHelp from '~/help/help';
+
+document.addEventListener('DOMContentLoaded', initHelp);

app/assets/javascripts/pages/help/ui/index.js

+import initUIKit from '~/ui_development_kit';
+
+document.addEventListener('DOMContentLoaded', initUIKit);

app/assets/javascripts/pages/import/gitlab_projects/new/index.js

+import initGitLabImportProject from '~/projects/project_import_gitlab_project';
+
+document.addEventListener('DOMContentLoaded', initGitLabImportProject);

app/assets/javascripts/pages/profiles/accounts/show/index.js

+import initProfileAccount from '~/profile/account';
+
+document.addEventListener('DOMContentLoaded', initProfileAccount);

app/assets/javascripts/pages/projects/blob/edit/index.js

+import initBlobBundle from '~/blob_edit/blob_bundle';
+
+document.addEventListener('DOMContentLoaded', initBlobBundle);

app/assets/javascripts/pages/projects/blob/new/index.js

+import initBlobBundle from '~/blob_edit/blob_bundle';
+
+document.addEventListener('DOMContentLoaded', initBlobBundle);

app/assets/javascripts/pages/projects/init_blob.js

@@ -3,6 +3,7 @@ import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
 import ShortcutsNavigation from '~/shortcuts_navigation';
 import ShortcutsBlob from '~/shortcuts_blob';
 import BlobForkSuggestion from '~/blob/blob_fork_suggestion';
+import initBlobBundle from '~/blob_edit/blob_bundle';
 
 export default () => {
   new LineHighlighter(); // eslint-disable-line no-new
@@ -30,4 +31,6 @@ export default () => {
     suggestionSections: document.querySelectorAll('.js-file-fork-suggestion-section'),
     actionTextPieces: document.querySelectorAll('.js-file-fork-suggestion-section-action'),
   }).init();
+
+  initBlobBundle();
 };

app/assets/javascripts/pages/projects/tree/show/index.js

 import initPathLocks from 'ee/path_locks';
 import Vue from 'vue';
+import initBlob from '~/blob_edit/blob_bundle';
 import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import TreeView from '../../../../tree';
 import ShortcutsNavigation from '../../../../shortcuts_navigation';
@@ -15,6 +16,7 @@ export default () => {
   $('#tree-slider').waitForImages(() =>
     ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath));
 
+  initBlob();
   const commitPipelineStatusEl = document.querySelector('.js-commit-pipeline-status');
   const statusLink = document.querySelector('.commit-actions .ci-status-link');
   if (statusLink != null) {

app/assets/javascripts/pages/search/init_filtered_search.js

-import '~/filtered_search/dropdown_emoji';
-import '~/filtered_search/dropdown_hint';
-import '~/filtered_search/dropdown_non_user';
-import '~/filtered_search/dropdown_user';
-import '~/filtered_search/dropdown_utils';
-import '~/filtered_search/filtered_search_dropdown_manager';
-import '~/filtered_search/filtered_search_dropdown';
-import '~/filtered_search/filtered_search_manager';
-import '~/filtered_search/filtered_search_tokenizer';
-import '~/filtered_search/filtered_search_visual_tokens';
+import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
 
 export default ({ page, filteredSearchTokenKeys, stateFiltersSelector }) => {
-  const filteredSearchEnabled = gl.FilteredSearchManager && document.querySelector('.filtered-search');
+  const filteredSearchEnabled = FilteredSearchManager && document.querySelector('.filtered-search');
   if (filteredSearchEnabled) {
-    const filteredSearchManager = new gl.FilteredSearchManager({
+    const filteredSearchManager = new FilteredSearchManager({
       page,
       filteredSearchTokenKeys,
       stateFiltersSelector,

app/assets/javascripts/profile/account/index.js

 import Vue from 'vue';
-
 import Translate from '~/vue_shared/translate';
-
 import deleteAccountModal from './components/delete_account_modal.vue';
 
-Vue.use(Translate);
+export default () => {
+  Vue.use(Translate);
 
-const deleteAccountButton = document.getElementById('delete-account-button');
-const deleteAccountModalEl = document.getElementById('delete-account-modal');
-// eslint-disable-next-line no-new
-new Vue({
-  el: deleteAccountModalEl,
-  components: {
-    deleteAccountModal,
-  },
-  mounted() {
-    deleteAccountButton.classList.remove('disabled');
-  },
-  render(createElement) {
-    return createElement('delete-account-modal', {
-      props: {
-        actionUrl: deleteAccountModalEl.dataset.actionUrl,
-        confirmWithPassword: !!deleteAccountModalEl.dataset.confirmWithPassword,
-        username: deleteAccountModalEl.dataset.username,
-      },
-    });
-  },
-});
+  const deleteAccountButton = document.getElementById('delete-account-button');
+  const deleteAccountModalEl = document.getElementById('delete-account-modal');
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: deleteAccountModalEl,
+    components: {
+      deleteAccountModal,
+    },
+    mounted() {
+      deleteAccountButton.classList.remove('disabled');
+    },
+    render(createElement) {
+      return createElement('delete-account-modal', {
+        props: {
+          actionUrl: deleteAccountModalEl.dataset.actionUrl,
+          confirmWithPassword: !!deleteAccountModalEl.dataset.confirmWithPassword,
+          username: deleteAccountModalEl.dataset.username,
+        },
+      });
+    },
+  });
+};

app/assets/javascripts/projects/project_import_gitlab_project.js

 import { getParameterValues } from '../lib/utils/url_utility';
 
-const bindEvents = () => {
+export default () => {
   const path = getParameterValues('path')[0];
 
   // get the path url and append it in the inputS
   $('.js-path-name').val(path);
 };
-
-document.addEventListener('DOMContentLoaded', bindEvents);
-
-export default {
-  bindEvents,
-};

app/assets/javascripts/search_autocomplete.js

 /* eslint-disable no-return-assign, one-var, no-var, no-underscore-dangle, one-var-declaration-per-line, no-unused-vars, no-cond-assign, consistent-return, object-shorthand, prefer-arrow-callback, func-names, space-before-function-paren, prefer-template, quotes, class-methods-use-this, no-sequences, wrap-iife, no-lonely-if, no-else-return, no-param-reassign, vars-on-top, max-len */
 import axios from './lib/utils/axios_utils';
+import DropdownUtils from './filtered_search/dropdown_utils';
 import { isInGroupsPage, isInProjectPage, getGroupSlug, getProjectSlug } from './lib/utils/common_utils';
 
 /**

app/assets/javascripts/service_desk_issues/filtered_search.js

 /* eslint-disable class-methods-use-this */
 import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
+import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
 
 const AUTHOR_PARAM_KEY = 'author_username';
 
-export default class FilteredSearchServiceDesk extends gl.FilteredSearchManager {
+export default class FilteredSearchServiceDesk extends FilteredSearchManager {
   constructor(supportBotData) {
     super({
       page: 'service_desk',

app/assets/javascripts/ui_development_kit.js

 import Api from './api';
 
-document.addEventListener('DOMContentLoaded', () => {
+export default () => {
   $('#js-project-dropdown').glDropdown({
     data: (term, callback) => {
       Api.projects(term, {
@@ -19,4 +19,4 @@ document.addEventListener('DOMContentLoaded', () => {
     id: data => data.id,
     isSelected: data => (data.id === 2),
   });
-});
+};

app/views/groups/issues.html.haml

@@ -5,7 +5,6 @@
 
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag 'common_vue'
-  = webpack_bundle_tag 'filtered_search'
   = webpack_bundle_tag 'issues'
 
 - if group_issues_exists

app/views/groups/merge_requests.html.haml

@@ -2,7 +2,6 @@
 
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag 'common_vue'
-  = webpack_bundle_tag 'filtered_search'
 
 - if @group_merge_requests.empty?
   = render 'shared/empty_states/merge_requests', project_select_button: true

app/views/help/index.html.haml

-= webpack_bundle_tag 'docs'
-
 %div
 - if Gitlab::CurrentSettings.help_page_text.present?
   = markdown(Gitlab::CurrentSettings.help_page_text)

app/views/help/show.html.haml

-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag 'help'
 - page_title @path.split("/").reverse.map(&:humanize)
 .documentation.wiki.prepend-top-default
   = markdown @markdown

app/views/import/gitlab_projects/new.html.haml

 - page_title "GitLab Import"
 - header_title "Projects", root_path
-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag 'project_import_gl'
 
 %h3.page-title
   = icon('gitlab')

app/views/profiles/accounts/show.html.haml

@@ -102,6 +102,3 @@
         %p
           = s_("Profiles|You don't have access to delete this user.")
 .append-bottom-default
-
-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag('account')

app/views/projects/blob/_upload.html.haml

@@ -2,7 +2,7 @@
   .modal-dialog.modal-lg
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title= title
       .modal-body
         = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form form-horizontal', data: { method: method } do

app/views/projects/blob/edit.html.haml

@@ -3,7 +3,6 @@
 - page_title "Edit", @blob.path, @ref
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
-  = webpack_bundle_tag('blob')
 
 %div{ class: container_class }
   - if @conflict

app/views/projects/blob/new.html.haml

@@ -2,7 +2,6 @@
 - page_title "New File", @path.presence, @ref
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
-  = webpack_bundle_tag('blob')
 .editor-title-row
   %h3.page-title.blob-new-page-title
     New file

app/views/projects/blob/show.html.haml

@@ -3,10 +3,6 @@
 
 - page_title @blob.path, @ref
 
-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag 'blob'
-
-
 %div{ class: container_class }
   = render 'projects/last_push'
 

app/views/projects/merge_requests/index.html.haml

@@ -8,7 +8,6 @@
 
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag 'common_vue'
-  = webpack_bundle_tag 'filtered_search'
 
 %div{ class: container_class }
   = render 'projects/last_push'

app/views/shared/boards/_show.html.haml

@@ -8,7 +8,6 @@
 
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag 'common_vue'
-  = webpack_bundle_tag 'filtered_search'
   = webpack_bundle_tag 'boards'
 
   %script#js-board-template{ type: "text/x-template" }= render "shared/boards/components/board"

config/karma.config.js

@@ -24,7 +24,7 @@ module.exports = function(config) {
 
   var karmaConfig = {
     basePath: ROOT_PATH,
-    browsers: ['ChromeHeadlessCustom'],
+    browsers:  ['ChromeHeadlessCustom'],
     customLaunchers: {
       ChromeHeadlessCustom: {
         base: 'ChromeHeadless',

config/webpack.config.js

@@ -48,7 +48,6 @@ var config = {
   },
   context: path.join(ROOT_PATH, 'app/assets/javascripts'),
   entry: {
-    account:              './profile/account/index.js',
     add_gitlab_slack_application: './add_gitlab_slack_application/index.js',
     balsamiq_viewer:      './blob/balsamiq_viewer.js',
     blob:                 './blob_edit/blob_bundle.js',
@@ -59,7 +58,6 @@ var config = {
     cycle_analytics:      './cycle_analytics/cycle_analytics_bundle.js',
     commit_pipelines:     './commit/pipelines/pipelines_bundle.js',
     deploy_keys:          './deploy_keys/index.js',
-    docs:                 './docs/docs_bundle.js',
     diff_notes:           './diff_notes/diff_notes_bundle.js',
     environments:         './environments/environments_bundle.js',
     environments_folder:  './environments/folder/environments_folder_bundle.js',

ee/app/assets/javascripts/pages/groups/epics/index/index.js

+import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
 import FilteredSearchTokenKeysEpics from 'ee/filtered_search/filtered_search_token_keys_epics';
 
 export default () => {
-  const filteredSearchEnabled = gl.FilteredSearchManager && document.querySelector('.filtered-search');
+  const filteredSearchEnabled = FilteredSearchManager && document.querySelector('.filtered-search');
   if (filteredSearchEnabled) {
-    const filteredSearchManager = new gl.FilteredSearchManager({
+    const filteredSearchManager = new FilteredSearchManager({
       page: 'epics',
       filteredSearchTokenKeys: FilteredSearchTokenKeysEpics,
       stateFiltersSelector: '.epics-state-filters',

spec/javascripts/filtered_search/dropdown_user_spec.js

-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';
 
@@ -10,18 +9,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 +28,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 +38,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 +62,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 +83,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,
       });

spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js

-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');
 

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('');
     });
   });
 

spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js

 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');

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) => {

spec/javascripts/projects/project_import_gitlab_project_spec.js

@@ -10,7 +10,7 @@ describe('Import Gitlab project', () => {
       <input class="js-path-name" />
     `);
 
-    projectImportGitlab.bindEvents();
+    projectImportGitlab();
   });
 
   afterEach(() => {