Merge branch 'refactor-main-js' into 'master'

Refactor main.js content

See merge request gitlab-org/gitlab-ce!19783

app/assets/javascripts/behaviors/index.js

 import './autosize';
 import './bind_in_out';
 import './markdown/render_gfm';
+import initGFMInput from './markdown/gfm_auto_complete';
 import initCopyAsGFM from './markdown/copy_as_gfm';
 import initCopyToClipboard from './copy_to_clipboard';
 import './details_behavior';
 import installGlEmojiElement from './gl_emoji';
 import './quick_submit';
 import './requires_input';
+import initPageShortcuts from './shortcuts';
 import './toggler_behavior';
-import '../preview_markdown';
+import './preview_markdown';
 
 installGlEmojiElement();
+initGFMInput();
 initCopyAsGFM();
 initCopyToClipboard();
+initPageShortcuts();

app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js

+import $ from 'jquery';
+import { convertPermissionToBoolean } from '~/lib/utils/common_utils';
+import GfmAutoComplete from '~/gfm_auto_complete';
+
+export default function initGFMInput() {
+  $('.js-gfm-input:not(.js-vue-textarea)').each((i, el) => {
+    const gfm = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
+    const enableGFM = convertPermissionToBoolean(el.dataset.supportsAutocomplete);
+
+    gfm.setup($(el), {
+      emojis: true,
+      members: enableGFM,
+      issues: enableGFM,
+      milestones: enableGFM,
+      mergeRequests: enableGFM,
+      labels: enableGFM,
+    });
+  });
+}

app/assets/javascripts/dispatcher.js → app/assets/javascripts/behaviors/shortcuts.js

-/* eslint-disable consistent-return, no-new */
+import Shortcuts from './shortcuts/shortcuts';
 
-import $ from 'jquery';
-import GfmAutoComplete from './gfm_auto_complete';
-import { convertPermissionToBoolean } from './lib/utils/common_utils';
-import GlFieldErrors from './gl_field_errors';
-import Shortcuts from './shortcuts';
-import SearchAutocomplete from './search_autocomplete';
-import performanceBar from './performance_bar';
-
-function initSearch() {
-  // Only when search form is present
-  if ($('.search').length) {
-    return new SearchAutocomplete();
-  }
-}
-
-function initFieldErrors() {
-  $('.gl-show-field-errors').each((i, form) => {
-    new GlFieldErrors(form);
-  });
-}
-
-function initPageShortcuts(page) {
+export default function initPageShortcuts() {
+  const { page } = document.body.dataset;
   const pagesWithCustomShortcuts = [
     'projects:activity',
     'projects:artifacts:browse',
@@ -46,44 +26,10 @@ function initPageShortcuts(page) {
     'groups:show',
   ];
 
-  if (pagesWithCustomShortcuts.indexOf(page) === -1) {
-    new Shortcuts();
-  }
-}
-
-function initGFMInput() {
-  $('.js-gfm-input:not(.js-vue-textarea)').each((i, el) => {
-    const gfm = new GfmAutoComplete(
-      gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources,
-    );
-    const enableGFM = convertPermissionToBoolean(
-      el.dataset.supportsAutocomplete,
-    );
-    gfm.setup($(el), {
-      emojis: true,
-      members: enableGFM,
-      issues: enableGFM,
-      milestones: enableGFM,
-      mergeRequests: enableGFM,
-      labels: enableGFM,
-    });
-  });
-}
-
-function initPerformanceBar() {
-  if (document.querySelector('#js-peek')) {
-    performanceBar({ container: '#js-peek' });
+  // the pages above have their own shortcuts sub-classes instantiated elsewhere
+  // TODO: replace this whitelist with something more automated/maintainable
+  if (page && !pagesWithCustomShortcuts.includes(page)) {
+    return new Shortcuts();
   }
+  return false;
 }
-
-export default () => {
-  initSearch();
-  initFieldErrors();
-
-  const page = $('body').attr('data-page');
-  if (page) {
-    initPageShortcuts(page);
-    initGFMInput();
-    initPerformanceBar();
-  }
-};

app/assets/javascripts/shortcuts.js → app/assets/javascripts/behaviors/shortcuts/shortcuts.js

 import $ from 'jquery';
 import Cookies from 'js-cookie';
 import Mousetrap from 'mousetrap';
-import axios from './lib/utils/axios_utils';
-import { refreshCurrentPage, visitUrl } from './lib/utils/url_utility';
-import findAndFollowLink from './shortcuts_dashboard_navigation';
+import axios from '../../lib/utils/axios_utils';
+import { refreshCurrentPage, visitUrl } from '../../lib/utils/url_utility';
+import findAndFollowLink from '../../lib/utils/navigation_utility';
 
 const defaultStopCallback = Mousetrap.stopCallback;
 Mousetrap.stopCallback = (e, element, combo) => {

app/assets/javascripts/shortcuts_blob.js → app/assets/javascripts/behaviors/shortcuts/shortcuts_blob.js

 import Mousetrap from 'mousetrap';
-import { getLocationHash, visitUrl } from './lib/utils/url_utility';
+import { getLocationHash, visitUrl } from '../../lib/utils/url_utility';
 import Shortcuts from './shortcuts';
 
 const defaults = {

app/assets/javascripts/shortcuts_issuable.js → app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js

 import $ from 'jquery';
 import Mousetrap from 'mousetrap';
 import _ from 'underscore';
-import Sidebar from './right_sidebar';
+import Sidebar from '../../right_sidebar';
 import Shortcuts from './shortcuts';
-import { CopyAsGFM } from './behaviors/markdown/copy_as_gfm';
+import { CopyAsGFM } from '../markdown/copy_as_gfm';
 
 export default class ShortcutsIssuable extends Shortcuts {
   constructor(isMergeRequest) {

app/assets/javascripts/shortcuts_navigation.js → app/assets/javascripts/behaviors/shortcuts/shortcuts_navigation.js

 import Mousetrap from 'mousetrap';
-import findAndFollowLink from './shortcuts_dashboard_navigation';
+import findAndFollowLink from '../../lib/utils/navigation_utility';
 import Shortcuts from './shortcuts';
 
 export default class ShortcutsNavigation extends Shortcuts {

app/assets/javascripts/shortcuts_wiki.js → app/assets/javascripts/behaviors/shortcuts/shortcuts_wiki.js

 import Mousetrap from 'mousetrap';
 import ShortcutsNavigation from './shortcuts_navigation';
-import findAndFollowLink from './shortcuts_dashboard_navigation';
+import findAndFollowLink from '../../lib/utils/navigation_utility';
 
 export default class ShortcutsWiki extends ShortcutsNavigation {
   constructor() {

app/assets/javascripts/commons/polyfills.js

@@ -14,10 +14,10 @@ import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 
 // Browser polyfills
-import 'classlist-polyfill';
 import 'formdata-polyfill';
 import './polyfills/custom_event';
 import './polyfills/element';
 import './polyfills/event';
 import './polyfills/nodelist';
 import './polyfills/request_idle_callback';
+import './polyfills/svg';

app/assets/javascripts/commons/polyfills/element.js

-Element.prototype.closest = Element.prototype.closest ||
+// polyfill Element.classList and DOMTokenList with classList.js
+import 'classlist-polyfill';
+
+Element.prototype.closest =
+  Element.prototype.closest ||
   function closest(selector, selectedElement = this) {
     if (!selectedElement) return null;
-    return selectedElement.matches(selector) ?
-      selectedElement :
-      Element.prototype.closest(selector, selectedElement.parentElement);
+    return selectedElement.matches(selector)
+      ? selectedElement
+      : Element.prototype.closest(selector, selectedElement.parentElement);
   };
 
-Element.prototype.matches = Element.prototype.matches ||
+Element.prototype.matches =
+  Element.prototype.matches ||
   Element.prototype.matchesSelector ||
   Element.prototype.mozMatchesSelector ||
   Element.prototype.msMatchesSelector ||
@@ -15,13 +20,15 @@ Element.prototype.matches = Element.prototype.matches ||
   function matches(selector) {
     const elms = (this.document || this.ownerDocument).querySelectorAll(selector);
     let i = elms.length - 1;
-    while (i >= 0 && elms.item(i) !== this) { i -= 1; }
+    while (i >= 0 && elms.item(i) !== this) {
+      i -= 1;
+    }
     return i > -1;
   };
 
 // From the polyfill on MDN, https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove#Polyfill
-((arr) => {
-  arr.forEach((item) => {
+(arr => {
+  arr.forEach(item => {
     if (Object.prototype.hasOwnProperty.call(item, 'remove')) {
       return;
     }

app/assets/javascripts/commons/polyfills/svg.js

+import svg4everybody from 'svg4everybody';
+
+// polyfill support for external SVG file references via <use xlink:href>
+// @see https://css-tricks.com/svg-use-external-source/
+svg4everybody();

app/assets/javascripts/dropzone_input.js

 import $ from 'jquery';
 import Dropzone from 'dropzone';
 import _ from 'underscore';
-import './preview_markdown';
+import './behaviors/preview_markdown';
 import csrf from './lib/utils/csrf';
 import axios from './lib/utils/axios_utils';
 

app/assets/javascripts/shortcuts_dashboard_navigation.js → app/assets/javascripts/lib/utils/navigation_utility.js

-import { visitUrl } from './lib/utils/url_utility';
+import { visitUrl } from './url_utility';
 
 /**
  * Helper function that finds the href of the fiven selector and updates the location.

app/assets/javascripts/main.js

@@ -2,7 +2,6 @@
 
 import jQuery from 'jquery';
 import Cookies from 'js-cookie';
-import svg4everybody from 'svg4everybody';
 
 // bootstrap webpack, common libs, polyfills, and behaviors
 import './webpack';
@@ -25,11 +24,12 @@ import initLayoutNav from './layout_nav';
 import './feature_highlight/feature_highlight_options';
 import LazyLoader from './lazy_loader';
 import initLogoAnimation from './logo';
-import './milestone_select';
 import './frequent_items';
 import initBreadcrumbs from './breadcrumb';
-import initDispatcher from './dispatcher';
 import initUsagePingConsent from './usage_ping_consent';
+import initPerformanceBar from './performance_bar';
+import initSearchAutocomplete from './search_autocomplete';
+import GlFieldErrors from './gl_field_errors';
 
 // expose jQuery as global (TODO: remove these)
 window.jQuery = jQuery;
@@ -41,8 +41,6 @@ if (process.env.NODE_ENV !== 'production' && gon && gon.test_env) {
   import(/* webpackMode: "eager" */ './test_utils/');
 }
 
-svg4everybody();
-
 document.addEventListener('beforeunload', () => {
   // Unbind scroll events
   $(document).off('scroll');
@@ -81,6 +79,9 @@ document.addEventListener('DOMContentLoaded', () => {
   initLogoAnimation();
   initUsagePingConsent();
 
+  if (document.querySelector('.search')) initSearchAutocomplete();
+  if (document.querySelector('#js-peek')) initPerformanceBar({ container: '#js-peek' });
+
   // Set the default path for all cookies to GitLab's root directory
   Cookies.defaults.path = gon.relative_url_root || '/';
 
@@ -270,5 +271,6 @@ document.addEventListener('DOMContentLoaded', () => {
       });
   }
 
-  initDispatcher();
+  // initialize field errors
+  $('.gl-show-field-errors').each((i, form) => new GlFieldErrors(form));
 });

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

 import UsersSelect from '~/users_select';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import initBoards from '~/boards';
 
 document.addEventListener('DOMContentLoaded', () => {

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

@@ -6,7 +6,7 @@ import NewGroupChild from '~/groups/new_group_child';
 import notificationsDropdown from '~/notifications_dropdown';
 import NotificationsForm from '~/notifications_form';
 import ProjectsList from '~/projects_list';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import GroupTabs from './group_tabs';
 
 document.addEventListener('DOMContentLoaded', () => {

app/assets/javascripts/pages/projects/activity/index.js

 import Activities from '~/activities';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 
 document.addEventListener('DOMContentLoaded', () => {
   new Activities(); // eslint-disable-line no-new

app/assets/javascripts/pages/projects/artifacts/browse/index.js

 import BuildArtifacts from '~/build_artifacts';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ShortcutsNavigation(); // eslint-disable-line no-new

app/assets/javascripts/pages/projects/artifacts/file/index.js

 import BlobViewer from '~/blob/viewer/index';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ShortcutsNavigation(); // eslint-disable-line no-new

app/assets/javascripts/pages/projects/boards/index.js

 import UsersSelect from '~/users_select';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import initBoards from '~/boards';
 
 document.addEventListener('DOMContentLoaded', () => {

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

@@ -3,7 +3,7 @@
 import $ from 'jquery';
 import Diff from '~/diff';
 import ZenMode from '~/zen_mode';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
 import initNotes from '~/init_notes';
 import initChangesDropdown from '~/init_changes_dropdown';

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

 import CommitsList from '~/commits';
 import GpgBadges from '~/gpg_badges';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 
 document.addEventListener('DOMContentLoaded', () => {
   new CommitsList(document.querySelector('.js-project-commits-show').dataset.commitsLimit); // eslint-disable-line no-new

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

 import $ from 'jquery';
 import ProjectFindFile from '~/project_find_file';
-import ShortcutsFindFile from '~/shortcuts_find_file';
+import ShortcutsFindFile from '~/behaviors/shortcuts/shortcuts_find_file';
 
 document.addEventListener('DOMContentLoaded', () => {
   const findElement = document.querySelector('.js-file-finder');

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

 import initDismissableCallout from '~/dismissable_callout';
 import initGkeDropdowns from '~/projects/gke_cluster_dropdowns';
 import Project from './project';
-import ShortcutsNavigation from '../../shortcuts_navigation';
+import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation';
 
 document.addEventListener('DOMContentLoaded', () => {
   const { page } = document.body.dataset;

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

 import LineHighlighter from '~/line_highlighter';
 import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
-import ShortcutsNavigation from '~/shortcuts_navigation';
-import ShortcutsBlob from '~/shortcuts_blob';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
+import ShortcutsBlob from '~/behaviors/shortcuts/shortcuts_blob';
 import BlobForkSuggestion from '~/blob/blob_fork_suggestion';
 import initBlobBundle from '~/blob_edit/blob_bundle';
 

app/assets/javascripts/pages/projects/issues/form.js

@@ -5,7 +5,7 @@ import GLForm from '~/gl_form';
 import IssuableForm from '~/issuable_form';
 import LabelsSelect from '~/labels_select';
 import MilestoneSelect from '~/milestone_select';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
 
 export default () => {

app/assets/javascripts/pages/projects/issues/index/index.js

 /* eslint-disable no-new */
 
 import IssuableIndex from '~/issuable_index';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import UsersSelect from '~/users_select';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';

app/assets/javascripts/pages/projects/issues/show.js

 import initIssuableSidebar from '~/init_issuable_sidebar';
 import Issue from '~/issue';
-import ShortcutsIssuable from '~/shortcuts_issuable';
+import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import ZenMode from '~/zen_mode';
 import '~/notes/index';
 import '~/issue_show/index';

app/assets/javascripts/pages/projects/merge_requests/index/index.js

 import IssuableIndex from '~/issuable_index';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import UsersSelect from '~/users_select';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';

app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js

@@ -2,7 +2,7 @@
 
 import $ from 'jquery';
 import Diff from '~/diff';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import GLForm from '~/gl_form';
 import IssuableForm from '~/issuable_form';
 import LabelsSelect from '~/labels_select';

app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js

 import ZenMode from '~/zen_mode';
 import initIssuableSidebar from '~/init_issuable_sidebar';
-import ShortcutsIssuable from '~/shortcuts_issuable';
+import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import howToMerge from '~/how_to_merge';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';

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

 import $ from 'jquery';
-import ShortcutsNetwork from '../../../../shortcuts_network';
+import ShortcutsNetwork from '~/behaviors/shortcuts/shortcuts_network';
 import Network from '../network';
 
 document.addEventListener('DOMContentLoaded', () => {

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

 import $ from 'jquery';
 import initBlob from '~/blob_edit/blob_bundle';
-import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import NotificationsForm from '~/notifications_form';
 import UserCallout from '~/user_callout';
 import TreeView from '~/tree';

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

@@ -4,7 +4,7 @@ import initBlob from '~/blob_edit/blob_bundle';
 import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import GpgBadges from '~/gpg_badges';
 import TreeView from '../../../../tree';
-import ShortcutsNavigation from '../../../../shortcuts_navigation';
+import ShortcutsNavigation from '../../../../behaviors/shortcuts/shortcuts_navigation';
 import BlobViewer from '../../../../blob/viewer';
 import NewCommitForm from '../../../../new_commit_form';
 import { ajaxGet } from '../../../../lib/utils/common_utils';

app/assets/javascripts/pages/projects/wikis/index.js

@@ -2,8 +2,8 @@ import $ from 'jquery';
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
 import csrf from '~/lib/utils/csrf';
+import ShortcutsWiki from '~/behaviors/shortcuts/shortcuts_wiki';
 import Wikis from './wikis';
-import ShortcutsWiki from '../../../shortcuts_wiki';
 import ZenMode from '../../../zen_mode';
 import GLForm from '../../../gl_form';
 import deleteWikiModal from './components/delete_wiki_modal.vue';

app/assets/javascripts/search_autocomplete.js

@@ -68,7 +68,7 @@ function setSearchOptions() {
   }
 }
 
-export default class SearchAutocomplete {
+export class SearchAutocomplete {
   constructor({ wrap, optsEl, autocompletePath, projectId, projectRef } = {}) {
     setSearchOptions();
     this.bindEventContext();
@@ -499,3 +499,7 @@ export default class SearchAutocomplete {
     this.dropdownMenu.toggleClass('fade-out', !this.isScrolledUp());
   }
 }
+
+export default function initSearchAutocomplete(opts) {
+  return new SearchAutocomplete(opts);
+}

spec/javascripts/shortcuts_issuable_spec.js → spec/javascripts/behaviors/shortcuts/shortcuts_issuable_spec.js

 import $ from 'jquery';
 import initCopyAsGFM from '~/behaviors/markdown/copy_as_gfm';
-import ShortcutsIssuable from '~/shortcuts_issuable';
+import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 
 initCopyAsGFM();
 

spec/javascripts/shortcuts_dashboard_navigation_spec.js → spec/javascripts/lib/utils/navigation_utility_spec.js

-import findAndFollowLink from '~/shortcuts_dashboard_navigation';
+import findAndFollowLink from '~/lib/utils/navigation_utility';
 
 describe('findAndFollowLink', () => {
   it('visits a link when the selector exists', () => {

spec/javascripts/search_autocomplete_spec.js

@@ -2,7 +2,7 @@
 
 import $ from 'jquery';
 import '~/gl_dropdown';
-import SearchAutocomplete from '~/search_autocomplete';
+import initSearchAutocomplete from '~/search_autocomplete';
 import '~/lib/utils/common_utils';
 
 describe('Search autocomplete dropdown', () => {
@@ -132,7 +132,7 @@ describe('Search autocomplete dropdown', () => {
     window.gon.current_user_id = userId;
     window.gon.current_username = userName;
 
-    return (widget = new SearchAutocomplete());
+    return (widget = initSearchAutocomplete());
   });
 
   afterEach(function() {

spec/javascripts/shortcuts_spec.js

 import $ from 'jquery';
-import Shortcuts from '~/shortcuts';
+import Shortcuts from '~/behaviors/shortcuts/shortcuts';
 
 describe('Shortcuts', () => {
   const fixtureName = 'snippets/show.html.raw';