From bd8290d93e4a0669a78c23cecdd1f5d2164d19cf Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jschatz@gitlab.com>
Date: Wed, 21 Feb 2018 20:22:56 +0000
Subject: Rest of Dispatcher Refactor

---
 app/assets/javascripts/blob_edit/blob_bundle.js    |  4 +-
 .../javascripts/boards/filtered_search_boards.js   |  3 +-
 app/assets/javascripts/dispatcher.js               |  5 --
 app/assets/javascripts/docs/docs_bundle.js         |  7 +--
 .../components/recent_searches_dropdown_content.js |  3 +-
 .../javascripts/filtered_search/dropdown_emoji.js  | 10 ++--
 .../javascripts/filtered_search/dropdown_hint.js   | 16 ++---
 .../filtered_search/dropdown_non_user.js           | 12 ++--
 .../javascripts/filtered_search/dropdown_user.js   | 13 ++---
 .../javascripts/filtered_search/dropdown_utils.js  | 20 +++----
 .../filtered_search/filtered_search_dropdown.js    | 12 ++--
 .../filtered_search_dropdown_manager.js            | 40 +++++++------
 .../filtered_search/filtered_search_manager.js     | 68 ++++++++++++----------
 .../filtered_search/filtered_search_tokenizer.js   |  5 +-
 .../filtered_search_visual_tokens.js               | 22 ++++---
 app/assets/javascripts/help/help.js                | 12 ++--
 .../pages/dashboard/groups/index/index.js          |  6 +-
 app/assets/javascripts/pages/groups/show/index.js  |  2 +-
 app/assets/javascripts/pages/help/index.js         |  3 -
 app/assets/javascripts/pages/help/index/index.js   |  7 +++
 app/assets/javascripts/pages/help/show/index.js    |  3 +
 app/assets/javascripts/pages/help/ui/index.js      |  3 +
 .../pages/import/gitlab_projects/new/index.js      |  3 +
 .../pages/profiles/accounts/show/index.js          |  3 +
 .../javascripts/pages/projects/blob/edit/index.js  |  3 +
 .../javascripts/pages/projects/blob/new/index.js   |  3 +
 app/assets/javascripts/pages/projects/init_blob.js |  3 +
 .../javascripts/pages/projects/tree/show/index.js  |  2 +
 .../pages/search/init_filtered_search.js           | 15 +----
 app/assets/javascripts/profile/account/index.js    | 48 +++++++--------
 .../projects/project_import_gitlab_project.js      |  8 +--
 app/assets/javascripts/search_autocomplete.js      |  1 +
 app/assets/javascripts/ui_development_kit.js       |  4 +-
 app/views/groups/issues.html.haml                  |  1 -
 app/views/groups/merge_requests.html.haml          |  1 -
 app/views/help/index.html.haml                     |  2 -
 app/views/help/show.html.haml                      |  2 -
 app/views/import/gitlab_projects/new.html.haml     |  2 -
 app/views/profiles/accounts/show.html.haml         |  3 -
 app/views/projects/blob/_upload.html.haml          |  2 +-
 app/views/projects/blob/edit.html.haml             |  1 -
 app/views/projects/blob/new.html.haml              |  1 -
 app/views/projects/blob/show.html.haml             |  4 --
 app/views/projects/merge_requests/index.html.haml  |  1 -
 app/views/shared/boards/_show.html.haml            |  1 -
 45 files changed, 188 insertions(+), 202 deletions(-)
 delete mode 100644 app/assets/javascripts/pages/help/index.js
 create mode 100644 app/assets/javascripts/pages/help/index/index.js
 create mode 100644 app/assets/javascripts/pages/help/show/index.js
 create mode 100644 app/assets/javascripts/pages/help/ui/index.js
 create mode 100644 app/assets/javascripts/pages/import/gitlab_projects/new/index.js
 create mode 100644 app/assets/javascripts/pages/profiles/accounts/show/index.js
 create mode 100644 app/assets/javascripts/pages/projects/blob/edit/index.js
 create mode 100644 app/assets/javascripts/pages/projects/blob/new/index.js

(limited to 'app')

diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index 116e85ffdf9..931ed042dfd 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/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);
   }
-});
+};
diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js
index 184665f395c..0df1f7a6f82 100644
--- a/app/assets/javascripts/boards/filtered_search_boards.js
+++ b/app/assets/javascripts/boards/filtered_search_boards.js
@@ -1,7 +1,8 @@
 /* eslint-disable class-methods-use-this */
 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('boards');
 
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index a0a2a30d4ca..adfb11cb3c7 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -174,11 +174,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)
diff --git a/app/assets/javascripts/docs/docs_bundle.js b/app/assets/javascripts/docs/docs_bundle.js
index a32bd6d0fc7..897439f56b0 100644
--- a/app/assets/javascripts/docs/docs_bundle.js
+++ b/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);
-
+};
diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
index c51d4b056af..b693084e434 100644
--- a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
+++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
@@ -1,4 +1,5 @@
 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}:`,
diff --git a/app/assets/javascripts/filtered_search/dropdown_emoji.js b/app/assets/javascripts/filtered_search/dropdown_emoji.js
index a6cc079d720..5ddd0e5e690 100644
--- a/app/assets/javascripts/filtered_search/dropdown_emoji.js
+++ b/app/assets/javascripts/filtered_search/dropdown_emoji.js
@@ -1,9 +1,10 @@
 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;
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 23040cd9eb8..184b34b7b5e 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -1,14 +1,17 @@
 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;
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
index 788fb1dc614..2ffda7e2037 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -1,9 +1,10 @@
 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;
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index a9e2b65def0..22421fc4868 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -1,9 +1,11 @@
 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);
@@ -56,8 +58,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 || '';
 
@@ -78,6 +80,3 @@ class DropdownUser extends gl.FilteredSearchDropdown {
     this.droplab.addHook(this.input, this.dropdown, [AjaxFilter], this.config).init();
   }
 }
-
-window.gl = window.gl || {};
-gl.DropdownUser = DropdownUser;
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index cf8a9b0402b..9bc36c1f9b6 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -1,7 +1,10 @@
 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;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
index 9e9a9ef74be..cfdd3380fc7 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
@@ -1,6 +1,9 @@
+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();
@@ -117,6 +120,3 @@ class FilteredSearchDropdown {
     }
   }
 }
-
-window.gl = window.gl || {};
-gl.FilteredSearchDropdown = FilteredSearchDropdown;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
index b2add862051..c64553a1b92 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -1,13 +1,20 @@
 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;
 
@@ -33,24 +40,24 @@ 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'),
       },
       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`,
           symbol: '%',
@@ -59,17 +66,17 @@ class FilteredSearchDropdownManager {
       },
       label: {
         reference: null,
-        gl: 'DropdownNonUser',
+        gl: DropdownNonUser,
         extraArguments: {
           endpoint: `${this.baseEndpoint}/labels.json`,
           symbol: '~',
-          preprocessing: gl.DropdownUtils.duplicateLabelPreprocessing,
+          preprocessing: DropdownUtils.duplicateLabelPreprocessing,
         },
         element: this.container.querySelector('#js-dropdown-label'),
       },
       'my-reaction': {
         reference: null,
-        gl: 'DropdownEmoji',
+        gl: DropdownEmoji,
         element: this.container.querySelector('#js-dropdown-my-reaction'),
       },
     };
@@ -86,11 +93,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();
     }
   }
 
@@ -131,9 +138,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) {
@@ -171,7 +178,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());
 
@@ -216,6 +223,3 @@ class FilteredSearchDropdownManager {
     this.droplab.destroy();
   }
 }
-
-window.gl = window.gl || {};
-gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 532a5fe1090..e294b629bd0 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -1,15 +1,23 @@
 import _ from 'underscore';
+import {
+  getParameterByName,
+  getUrlParamsArray,
+} from '~/lib/utils/common_utils';
 import { visitUrl } from '../lib/utils/url_utility';
 import Flash from '../flash';
 import FilteredSearchContainer from './container';
-import RecentSearchesRoot from './recent_searches_root';
 import FilteredSearchTokenKeys from './filtered_search_token_keys';
+import RecentSearchesRoot from './recent_searches_root';
 import RecentSearchesStore from './stores/recent_searches_store';
 import RecentSearchesService from './services/recent_searches_service';
 import eventHub from './event_hub';
 import { addClassIfElementExists } from '../lib/utils/dom_utils';
+import FilteredSearchTokenizer from './filtered_search_tokenizer';
+import FilteredSearchDropdownManager from './filtered_search_dropdown_manager';
+import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
+import DropdownUtils from './dropdown_utils';
 
-class FilteredSearchManager {
+export default class FilteredSearchManager {
   constructor({
     page,
     filteredSearchTokenKeys = FilteredSearchTokenKeys,
@@ -66,8 +74,8 @@ class FilteredSearchManager {
       });
 
     if (this.filteredSearchInput) {
-      this.tokenizer = gl.FilteredSearchTokenizer;
-      this.dropdownManager = new gl.FilteredSearchDropdownManager(
+      this.tokenizer = FilteredSearchTokenizer;
+      this.dropdownManager = new FilteredSearchDropdownManager(
         this.filteredSearchInput.getAttribute('data-base-endpoint') || '',
         this.tokenizer,
         this.page,
@@ -85,7 +93,6 @@ class FilteredSearchManager {
       this.bindEvents();
       this.loadSearchParamsFromURL();
       this.dropdownManager.setDropdown();
-
       this.cleanupWrapper = this.cleanup.bind(this);
       document.addEventListener('beforeunload', this.cleanupWrapper);
     }
@@ -197,8 +204,8 @@ class FilteredSearchManager {
       // 8 = Backspace Key
       // 46 = Delete Key
       if (e.keyCode === 8 || e.keyCode === 46) {
-        const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
-        const { tokenName, tokenValue } = gl.DropdownUtils.getVisualTokenValues(lastVisualToken);
+        const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+        const { tokenName, tokenValue } = DropdownUtils.getVisualTokenValues(lastVisualToken);
         const canEdit = tokenName && this.canEdit && this.canEdit(tokenName, tokenValue);
 
         if (this.filteredSearchInput.value === '' && lastVisualToken && canEdit) {
@@ -206,8 +213,8 @@ class FilteredSearchManager {
 
           if (backspaceCount === 2) {
             backspaceCount = 0;
-            this.filteredSearchInput.value = gl.FilteredSearchVisualTokens.getLastTokenPartial();
-            gl.FilteredSearchVisualTokens.removeLastTokenPartial();
+            this.filteredSearchInput.value = FilteredSearchVisualTokens.getLastTokenPartial();
+            FilteredSearchVisualTokens.removeLastTokenPartial();
           }
         }
 
@@ -275,7 +282,7 @@ class FilteredSearchManager {
       e.stopImmediatePropagation();
 
       const button = e.target.closest('.selectable');
-      gl.FilteredSearchVisualTokens.selectToken(button, true);
+      FilteredSearchVisualTokens.selectToken(button, true);
       this.removeSelectedToken();
     }
   }
@@ -287,7 +294,7 @@ class FilteredSearchManager {
     const isElementTokensContainer = e.target.classList.contains('tokens-container');
 
     if ((!isElementInFilteredSearch && !isElementInFilterDropdown) || isElementTokensContainer) {
-      gl.FilteredSearchVisualTokens.moveInputToTheRight();
+      FilteredSearchVisualTokens.moveInputToTheRight();
       this.dropdownManager.resetDropdowns();
     }
   }
@@ -300,13 +307,13 @@ class FilteredSearchManager {
     if (token && canEdit) {
       e.preventDefault();
       e.stopPropagation();
-      gl.FilteredSearchVisualTokens.editToken(token);
+      FilteredSearchVisualTokens.editToken(token);
       this.tokenChange();
     }
   }
 
   toggleClearSearchButton() {
-    const query = gl.DropdownUtils.getSearchQuery();
+    const query = DropdownUtils.getSearchQuery();
     const hidden = 'hidden';
     const hasHidden = this.clearSearchButton.classList.contains(hidden);
 
@@ -318,7 +325,7 @@ class FilteredSearchManager {
   }
 
   handleInputPlaceholder() {
-    const query = gl.DropdownUtils.getSearchQuery();
+    const query = DropdownUtils.getSearchQuery();
     const placeholder = 'Search or filter results...';
     const currentPlaceholder = this.filteredSearchInput.placeholder;
 
@@ -338,7 +345,7 @@ class FilteredSearchManager {
   }
 
   removeSelectedToken() {
-    gl.FilteredSearchVisualTokens.removeSelectedToken();
+    FilteredSearchVisualTokens.removeSelectedToken();
     this.handleInputPlaceholder();
     this.toggleClearSearchButton();
     this.dropdownManager.updateCurrentDropdownOffset();
@@ -358,7 +365,7 @@ class FilteredSearchManager {
       let canClearToken = t.classList.contains('js-visual-token');
 
       if (canClearToken) {
-        const { tokenName, tokenValue } = gl.DropdownUtils.getVisualTokenValues(t);
+        const { tokenName, tokenValue } = DropdownUtils.getVisualTokenValues(t);
         canClearToken = this.canEdit && this.canEdit(tokenName, tokenValue);
       }
 
@@ -386,12 +393,12 @@ class FilteredSearchManager {
     const { tokens, searchToken }
       = this.tokenizer.processTokens(input.value, this.filteredSearchTokenKeys.getKeys());
     const { isLastVisualTokenValid }
-      = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+      = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
     if (isLastVisualTokenValid) {
       tokens.forEach((t) => {
         input.value = input.value.replace(`${t.key}:${t.symbol}${t.value}`, '');
-        gl.FilteredSearchVisualTokens.addFilterVisualToken(t.key, `${t.symbol}${t.value}`);
+        FilteredSearchVisualTokens.addFilterVisualToken(t.key, `${t.symbol}${t.value}`);
       });
 
       const fragments = searchToken.split(':');
@@ -404,10 +411,10 @@ class FilteredSearchManager {
           const searchTerms = inputValues.join(' ');
 
           input.value = input.value.replace(searchTerms, '');
-          gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms);
+          FilteredSearchVisualTokens.addSearchVisualToken(searchTerms);
         }
 
-        gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenKey);
+        FilteredSearchVisualTokens.addFilterVisualToken(tokenKey);
         input.value = input.value.replace(`${tokenKey}:`, '');
       }
     } else {
@@ -415,7 +422,7 @@ class FilteredSearchManager {
       const valueCompletedRegex = /([~%@]{0,1}".+")|([~%@]{0,1}'.+')|^((?![~%@]')(?![~%@]")(?!')(?!")).*/g;
 
       if (searchToken.match(valueCompletedRegex) && input.value[input.value.length - 1] === ' ') {
-        gl.FilteredSearchVisualTokens.addFilterVisualToken(searchToken);
+        FilteredSearchVisualTokens.addFilterVisualToken(searchToken);
 
         // Trim the last space as seen in the if statement above
         input.value = input.value.replace(searchToken, '').trim();
@@ -431,7 +438,7 @@ class FilteredSearchManager {
   saveCurrentSearchQuery() {
     // Don't save before we have fetched the already saved searches
     this.fetchingRecentSearchesPromise.then(() => {
-      const searchQuery = gl.DropdownUtils.getSearchQuery();
+      const searchQuery = DropdownUtils.getSearchQuery();
       if (searchQuery.length > 0) {
         const resultantSearches = this.recentSearchesStore.addRecentSearch(searchQuery);
         this.recentSearchesService.save(resultantSearches);
@@ -447,7 +454,7 @@ class FilteredSearchManager {
   }
 
   loadSearchParamsFromURL() {
-    const urlParams = gl.utils.getUrlParamsArray();
+    const urlParams = getUrlParamsArray();
     const params = this.getAllParams(urlParams);
     const usernameParams = this.getUsernameParams();
     let hasFilteredSearch = false;
@@ -463,7 +470,7 @@ class FilteredSearchManager {
       if (condition) {
         hasFilteredSearch = true;
         const canEdit = this.canEdit && this.canEdit(condition.tokenKey);
-        gl.FilteredSearchVisualTokens.addFilterVisualToken(
+        FilteredSearchVisualTokens.addFilterVisualToken(
           condition.tokenKey,
           condition.value,
           canEdit,
@@ -492,7 +499,7 @@ class FilteredSearchManager {
 
           hasFilteredSearch = true;
           const canEdit = this.canEdit && this.canEdit(sanitizedKey, sanitizedValue);
-          gl.FilteredSearchVisualTokens.addFilterVisualToken(
+          FilteredSearchVisualTokens.addFilterVisualToken(
             sanitizedKey,
             `${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`,
             canEdit,
@@ -503,7 +510,7 @@ class FilteredSearchManager {
             hasFilteredSearch = true;
             const tokenName = 'assignee';
             const canEdit = this.canEdit && this.canEdit(tokenName);
-            gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, `@${usernameParams[id]}`, canEdit);
+            FilteredSearchVisualTokens.addFilterVisualToken(tokenName, `@${usernameParams[id]}`, canEdit);
           }
         } else if (!match && keyParam === 'author_id') {
           const id = parseInt(value, 10);
@@ -511,7 +518,7 @@ class FilteredSearchManager {
             hasFilteredSearch = true;
             const tokenName = 'author';
             const canEdit = this.canEdit && this.canEdit(tokenName);
-            gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, `@${usernameParams[id]}`, canEdit);
+            FilteredSearchVisualTokens.addFilterVisualToken(tokenName, `@${usernameParams[id]}`, canEdit);
           }
         } else if (!match && keyParam === 'search') {
           hasFilteredSearch = true;
@@ -543,13 +550,13 @@ class FilteredSearchManager {
 
   search(state = null) {
     const paths = [];
-    const searchQuery = gl.DropdownUtils.getSearchQuery();
+    const searchQuery = DropdownUtils.getSearchQuery();
 
     this.saveCurrentSearchQuery();
 
     const { tokens, searchToken }
       = this.tokenizer.processTokens(searchQuery, this.filteredSearchTokenKeys.getKeys());
-    const currentState = state || gl.utils.getParameterByName('state') || 'opened';
+    const currentState = state || getParameterByName('state') || 'opened';
     paths.push(`state=${currentState}`);
 
     tokens.forEach((token) => {
@@ -628,6 +635,3 @@ class FilteredSearchManager {
     return true;
   }
 }
-
-window.gl = window.gl || {};
-gl.FilteredSearchManager = FilteredSearchManager;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
index f2e66503e5e..d75610f6d68 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
@@ -1,6 +1,6 @@
 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;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
index 2e859d2de3a..a19bb882410 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/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;
diff --git a/app/assets/javascripts/help/help.js b/app/assets/javascripts/help/help.js
index 4a22ebf187d..d02477b19a2 100644
--- a/app/assets/javascripts/help/help.js
+++ b/app/assets/javascripts/help/help.js
@@ -1,6 +1,8 @@
 // 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());
+  }
+};
diff --git a/app/assets/javascripts/pages/dashboard/groups/index/index.js b/app/assets/javascripts/pages/dashboard/groups/index/index.js
index 8a2aae706c0..9f235ed6a98 100644
--- a/app/assets/javascripts/pages/dashboard/groups/index/index.js
+++ b/app/assets/javascripts/pages/dashboard/groups/index/index.js
@@ -1,5 +1,3 @@
-import initGroupsList from '../../../../groups';
+import initGroupsList from '~/groups';
 
-export default () => {
-  initGroupsList();
-};
+export default initGroupsList;
diff --git a/app/assets/javascripts/pages/groups/show/index.js b/app/assets/javascripts/pages/groups/show/index.js
index 5c763986da3..d7b35d2b26b 100644
--- a/app/assets/javascripts/pages/groups/show/index.js
+++ b/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');
diff --git a/app/assets/javascripts/pages/help/index.js b/app/assets/javascripts/pages/help/index.js
deleted file mode 100644
index 4cf8afc4b7e..00000000000
--- a/app/assets/javascripts/pages/help/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import VersionCheckImage from '../../version_check_image';
-
-export default () => VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
diff --git a/app/assets/javascripts/pages/help/index/index.js b/app/assets/javascripts/pages/help/index/index.js
new file mode 100644
index 00000000000..05c81fc618b
--- /dev/null
+++ b/app/assets/javascripts/pages/help/index/index.js
@@ -0,0 +1,7 @@
+import VersionCheckImage from '~/version_check_image';
+import docs from '~/docs/docs_bundle';
+
+document.addEventListener('DOMContentLoaded', () => {
+  docs();
+  VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
+});
diff --git a/app/assets/javascripts/pages/help/show/index.js b/app/assets/javascripts/pages/help/show/index.js
new file mode 100644
index 00000000000..ec426a850b6
--- /dev/null
+++ b/app/assets/javascripts/pages/help/show/index.js
@@ -0,0 +1,3 @@
+import initHelp from '~/help/help';
+
+document.addEventListener('DOMContentLoaded', initHelp);
diff --git a/app/assets/javascripts/pages/help/ui/index.js b/app/assets/javascripts/pages/help/ui/index.js
new file mode 100644
index 00000000000..709ca2f3828
--- /dev/null
+++ b/app/assets/javascripts/pages/help/ui/index.js
@@ -0,0 +1,3 @@
+import initUIKit from '~/ui_development_kit';
+
+document.addEventListener('DOMContentLoaded', initUIKit);
diff --git a/app/assets/javascripts/pages/import/gitlab_projects/new/index.js b/app/assets/javascripts/pages/import/gitlab_projects/new/index.js
new file mode 100644
index 00000000000..bb86f72b95b
--- /dev/null
+++ b/app/assets/javascripts/pages/import/gitlab_projects/new/index.js
@@ -0,0 +1,3 @@
+import initGitLabImportProject from '~/projects/project_import_gitlab_project';
+
+document.addEventListener('DOMContentLoaded', initGitLabImportProject);
diff --git a/app/assets/javascripts/pages/profiles/accounts/show/index.js b/app/assets/javascripts/pages/profiles/accounts/show/index.js
new file mode 100644
index 00000000000..96c3d725780
--- /dev/null
+++ b/app/assets/javascripts/pages/profiles/accounts/show/index.js
@@ -0,0 +1,3 @@
+import initProfileAccount from '~/profile/account';
+
+document.addEventListener('DOMContentLoaded', initProfileAccount);
diff --git a/app/assets/javascripts/pages/projects/blob/edit/index.js b/app/assets/javascripts/pages/projects/blob/edit/index.js
new file mode 100644
index 00000000000..189053f3ed7
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/blob/edit/index.js
@@ -0,0 +1,3 @@
+import initBlobBundle from '~/blob_edit/blob_bundle';
+
+document.addEventListener('DOMContentLoaded', initBlobBundle);
diff --git a/app/assets/javascripts/pages/projects/blob/new/index.js b/app/assets/javascripts/pages/projects/blob/new/index.js
new file mode 100644
index 00000000000..189053f3ed7
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/blob/new/index.js
@@ -0,0 +1,3 @@
+import initBlobBundle from '~/blob_edit/blob_bundle';
+
+document.addEventListener('DOMContentLoaded', initBlobBundle);
diff --git a/app/assets/javascripts/pages/projects/init_blob.js b/app/assets/javascripts/pages/projects/init_blob.js
index 26f0ad46114..82143fa875a 100644
--- a/app/assets/javascripts/pages/projects/init_blob.js
+++ b/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();
 };
diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js
index cba57058380..f36a7a7139b 100644
--- a/app/assets/javascripts/pages/projects/tree/show/index.js
+++ b/app/assets/javascripts/pages/projects/tree/show/index.js
@@ -1,4 +1,5 @@
 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';
@@ -14,6 +15,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) {
diff --git a/app/assets/javascripts/pages/search/init_filtered_search.js b/app/assets/javascripts/pages/search/init_filtered_search.js
index 82ea239bcff..de8d4168d71 100644
--- a/app/assets/javascripts/pages/search/init_filtered_search.js
+++ b/app/assets/javascripts/pages/search/init_filtered_search.js
@@ -1,18 +1,9 @@
-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 }) => {
-  const filteredSearchEnabled = gl.FilteredSearchManager && document.querySelector('.filtered-search');
+  const filteredSearchEnabled = FilteredSearchManager && document.querySelector('.filtered-search');
   if (filteredSearchEnabled) {
-    const filteredSearchManager = new gl.FilteredSearchManager({ page });
+    const filteredSearchManager = new FilteredSearchManager({ page });
     filteredSearchManager.setup();
   }
 };
diff --git a/app/assets/javascripts/profile/account/index.js b/app/assets/javascripts/profile/account/index.js
index a93bc935dd0..84049a1f0b7 100644
--- a/app/assets/javascripts/profile/account/index.js
+++ b/app/assets/javascripts/profile/account/index.js
@@ -1,29 +1,29 @@
 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,
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/projects/project_import_gitlab_project.js b/app/assets/javascripts/projects/project_import_gitlab_project.js
index cec6f0dd5a3..d2c7d77bb2d 100644
--- a/app/assets/javascripts/projects/project_import_gitlab_project.js
+++ b/app/assets/javascripts/projects/project_import_gitlab_project.js
@@ -1,14 +1,8 @@
 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,
-};
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 78815422d5f..fdfa4f28aba 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -1,5 +1,6 @@
 /* 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';
 
 /**
diff --git a/app/assets/javascripts/ui_development_kit.js b/app/assets/javascripts/ui_development_kit.js
index f503076715c..78dda172ee6 100644
--- a/app/assets/javascripts/ui_development_kit.js
+++ b/app/assets/javascripts/ui_development_kit.js
@@ -1,6 +1,6 @@
 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),
   });
-});
+};
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index 00909982d59..f2ae7c52031 100644
--- a/app/views/groups/issues.html.haml
+++ b/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'
 
 - if group_issues_exists
   .top-area
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index 694292aa7c1..046b92bd9fb 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/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
diff --git a/app/views/help/index.html.haml b/app/views/help/index.html.haml
index 63811ea1c81..bf2725dc328 100644
--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
@@ -1,5 +1,3 @@
-= webpack_bundle_tag 'docs'
-
 %div
 - if Gitlab::CurrentSettings.help_page_text.present?
   = markdown_field(Gitlab::CurrentSettings.current_application_settings, :help_page_text)
diff --git a/app/views/help/show.html.haml b/app/views/help/show.html.haml
index d6789baea28..c07c148a12a 100644
--- a/app/views/help/show.html.haml
+++ b/app/views/help/show.html.haml
@@ -1,5 +1,3 @@
-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag 'help'
 - page_title @path.split("/").reverse.map(&:humanize)
 .documentation.wiki.prepend-top-default
   = markdown @markdown
diff --git a/app/views/import/gitlab_projects/new.html.haml b/app/views/import/gitlab_projects/new.html.haml
index 5d68e1e2156..df5841d1911 100644
--- a/app/views/import/gitlab_projects/new.html.haml
+++ b/app/views/import/gitlab_projects/new.html.haml
@@ -1,7 +1,5 @@
 - 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')
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 79e197ad08b..0f849f6f8b7 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/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')
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index 16c56ea604a..b3afd16f900 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/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" } &times;
         %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
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index 60bd1c2528a..9d90251ab66 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/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
diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml
index 4e4288390f5..fa091d8f6ef 100644
--- a/app/views/projects/blob/new.html.haml
+++ b/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
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index 2ed454131af..efb8175398b 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/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'
 
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 640d2791dc1..720ba236434 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/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'
diff --git a/app/views/shared/boards/_show.html.haml b/app/views/shared/boards/_show.html.haml
index ee8ad8e3999..a10fc42b82d 100644
--- a/app/views/shared/boards/_show.html.haml
+++ b/app/views/shared/boards/_show.html.haml
@@ -6,7 +6,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"
-- 
cgit v1.2.3