Export JS classes as modules

#38869

app/assets/javascripts/activities.js

 /* eslint-disable no-param-reassign, class-methods-use-this */
-/* global Pager */
 
 import Cookies from 'js-cookie';
+import Pager from './pager';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 
 export default class Activities {

app/assets/javascripts/commits.js

 /* eslint-disable func-names, wrap-iife, consistent-return,
   no-return-assign, no-param-reassign, one-var-declaration-per-line, no-unused-vars,
   prefer-template, object-shorthand, prefer-arrow-callback */
-/* global Pager */
 
 import { pluralize } from './lib/utils/text_utility';
 import { localTimeAgo } from './lib/utils/datetime_utility';
+import Pager from './pager';
 
 export default (function () {
   const CommitsList = {};

app/assets/javascripts/dispatcher.js

@@ -7,8 +7,8 @@ import IssuableForm from './issuable_form';
 import LabelsSelect from './labels_select';
 /* global MilestoneSelect */
 import NewBranchForm from './new_branch_form';
-/* global NotificationsForm */
-/* global NotificationsDropdown */
+import NotificationsForm from './notifications_form';
+import notificationsDropdown from './notifications_dropdown';
 import groupAvatar from './group_avatar';
 import GroupLabelSubscription from './group_label_subscription';
 /* global LineHighlighter */
@@ -414,7 +414,7 @@ import Activities from './activities';
           const newGroupChildWrapper = document.querySelector('.js-new-project-subgroup');
           shortcut_handler = new ShortcutsNavigation();
           new NotificationsForm();
-          new NotificationsDropdown();
+          notificationsDropdown();
           new ProjectsList();
 
           if (newGroupChildWrapper) {
@@ -617,7 +617,7 @@ import Activities from './activities';
           break;
         case 'profiles':
           new NotificationsForm();
-          new NotificationsDropdown();
+          notificationsDropdown();
           break;
         case 'projects':
           new Project();
@@ -640,7 +640,7 @@ import Activities from './activities';
             case 'show':
               new Star();
               new ProjectNew();
-              new NotificationsDropdown();
+              notificationsDropdown();
               break;
             case 'wikis':
               new Wikis();

app/assets/javascripts/main.js

@@ -34,16 +34,11 @@ import { getLocationHash, visitUrl } from './lib/utils/url_utility';
 import './behaviors/';
 
 // everything else
-import './activities';
-import './admin';
 import loadAwardsHandler from './awards_handler';
 import bp from './breakpoints';
 import './confirm_danger_modal';
 import Flash, { removeFlashClickListener } from './flash';
 import './gl_dropdown';
-import './gl_field_error';
-import './gl_field_errors';
-import './gl_form';
 import initTodoToggle from './header';
 import initImporterStatus from './importer_status';
 import './layout_nav';
@@ -54,11 +49,7 @@ import './merge_request';
 import './merge_request_tabs';
 import './milestone_select';
 import './notes';
-import './notifications_dropdown';
-import './notifications_form';
-import './pager';
 import './preview_markdown';
-import './project_import';
 import './projects_dropdown';
 import './render_gfm';
 import './right_sidebar';

app/assets/javascripts/merge_request.js

@@ -3,7 +3,7 @@
 
 import 'vendor/jquery.waitforimages';
 import TaskList from './task_list';
-import './merge_request_tabs';
+import MergeRequestTabs from './merge_request_tabs';
 import IssuablesHelper from './helpers/issuables_helper';
 import { addDelimiter } from './lib/utils/text_utility';
 
@@ -51,7 +51,7 @@ import { addDelimiter } from './lib/utils/text_utility';
       if (window.mrTabs) {
         window.mrTabs.unbindEvents();
       }
-      window.mrTabs = new gl.MergeRequestTabs(this.opts);
+      window.mrTabs = new MergeRequestTabs(this.opts);
     };
 
     MergeRequest.prototype.showAllCommits = function() {

app/assets/javascripts/merge_request_tabs.js

@@ -63,387 +63,382 @@ import syntaxHighlight from './syntax_highlight';
 //
 /* eslint-enable max-len */
 
-(() => {
-  // Store the `location` object, allowing for easier stubbing in tests
-  let location = window.location;
-
-  class MergeRequestTabs {
-
-    constructor({ action, setUrl, stubLocation } = {}) {
-      const mergeRequestTabs = document.querySelector('.js-tabs-affix');
-      const navbar = document.querySelector('.navbar-gitlab');
-      const paddingTop = 16;
-
-      this.diffsLoaded = false;
-      this.pipelinesLoaded = false;
-      this.commitsLoaded = false;
-      this.fixedLayoutPref = null;
-
-      this.setUrl = setUrl !== undefined ? setUrl : true;
-      this.setCurrentAction = this.setCurrentAction.bind(this);
-      this.tabShown = this.tabShown.bind(this);
-      this.showTab = this.showTab.bind(this);
-      this.stickyTop = navbar ? navbar.offsetHeight - paddingTop : 0;
-
-      if (mergeRequestTabs) {
-        this.stickyTop += mergeRequestTabs.offsetHeight;
-      }
+// Store the `location` object, allowing for easier stubbing in tests
+let location = window.location;
 
-      if (stubLocation) {
-        location = stubLocation;
-      }
+export default class MergeRequestTabs {
 
-      this.bindEvents();
-      this.activateTab(action);
-      this.initAffix();
-    }
+  constructor({ action, setUrl, stubLocation } = {}) {
+    const mergeRequestTabs = document.querySelector('.js-tabs-affix');
+    const navbar = document.querySelector('.navbar-gitlab');
+    const paddingTop = 16;
 
-    bindEvents() {
-      $(document)
-        .on('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
-        .on('click', '.js-show-tab', this.showTab);
+    this.diffsLoaded = false;
+    this.pipelinesLoaded = false;
+    this.commitsLoaded = false;
+    this.fixedLayoutPref = null;
 
-      $('.merge-request-tabs a[data-toggle="tab"]')
-        .on('click', this.clickTab);
-    }
+    this.setUrl = setUrl !== undefined ? setUrl : true;
+    this.setCurrentAction = this.setCurrentAction.bind(this);
+    this.tabShown = this.tabShown.bind(this);
+    this.showTab = this.showTab.bind(this);
+    this.stickyTop = navbar ? navbar.offsetHeight - paddingTop : 0;
 
-    // Used in tests
-    unbindEvents() {
-      $(document)
-        .off('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
-        .off('click', '.js-show-tab', this.showTab);
+    if (mergeRequestTabs) {
+      this.stickyTop += mergeRequestTabs.offsetHeight;
+    }
 
-      $('.merge-request-tabs a[data-toggle="tab"]')
-        .off('click', this.clickTab);
+    if (stubLocation) {
+      location = stubLocation;
     }
 
-    destroyPipelinesView() {
-      if (this.commitPipelinesTable) {
-        this.commitPipelinesTable.$destroy();
-        this.commitPipelinesTable = null;
+    this.bindEvents();
+    this.activateTab(action);
+    this.initAffix();
+  }
 
-        document.querySelector('#commit-pipeline-table-view').innerHTML = '';
-      }
-    }
+  bindEvents() {
+    $(document)
+      .on('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
+      .on('click', '.js-show-tab', this.showTab);
 
-    showTab(e) {
-      e.preventDefault();
-      this.activateTab($(e.target).data('action'));
-    }
+    $('.merge-request-tabs a[data-toggle="tab"]')
+      .on('click', this.clickTab);
+  }
 
-    clickTab(e) {
-      if (e.currentTarget && isMetaClick(e)) {
-        const targetLink = e.currentTarget.getAttribute('href');
-        e.stopImmediatePropagation();
-        e.preventDefault();
-        window.open(targetLink, '_blank');
-      }
+  // Used in tests
+  unbindEvents() {
+    $(document)
+      .off('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
+      .off('click', '.js-show-tab', this.showTab);
+
+    $('.merge-request-tabs a[data-toggle="tab"]')
+      .off('click', this.clickTab);
+  }
+
+  destroyPipelinesView() {
+    if (this.commitPipelinesTable) {
+      this.commitPipelinesTable.$destroy();
+      this.commitPipelinesTable = null;
+
+      document.querySelector('#commit-pipeline-table-view').innerHTML = '';
     }
+  }
 
-    tabShown(e) {
-      const $target = $(e.target);
-      const action = $target.data('action');
+  showTab(e) {
+    e.preventDefault();
+    this.activateTab($(e.target).data('action'));
+  }
 
-      if (action === 'commits') {
-        this.loadCommits($target.attr('href'));
-        this.expandView();
-        this.resetViewContainer();
-        this.destroyPipelinesView();
-      } else if (this.isDiffAction(action)) {
-        this.loadDiff($target.attr('href'));
-        if (bp.getBreakpointSize() !== 'lg') {
-          this.shrinkView();
-        }
-        if (this.diffViewType() === 'parallel') {
-          this.expandViewContainer();
-        }
-        this.destroyPipelinesView();
-      } else if (action === 'pipelines') {
-        this.resetViewContainer();
-        this.mountPipelinesView();
-      } else {
-        if (bp.getBreakpointSize() !== 'xs') {
-          this.expandView();
-        }
-        this.resetViewContainer();
-        this.destroyPipelinesView();
+  clickTab(e) {
+    if (e.currentTarget && isMetaClick(e)) {
+      const targetLink = e.currentTarget.getAttribute('href');
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      window.open(targetLink, '_blank');
+    }
+  }
 
-        initDiscussionTab();
+  tabShown(e) {
+    const $target = $(e.target);
+    const action = $target.data('action');
+
+    if (action === 'commits') {
+      this.loadCommits($target.attr('href'));
+      this.expandView();
+      this.resetViewContainer();
+      this.destroyPipelinesView();
+    } else if (this.isDiffAction(action)) {
+      this.loadDiff($target.attr('href'));
+      if (bp.getBreakpointSize() !== 'lg') {
+        this.shrinkView();
       }
-      if (this.setUrl) {
-        this.setCurrentAction(action);
+      if (this.diffViewType() === 'parallel') {
+        this.expandViewContainer();
       }
+      this.destroyPipelinesView();
+    } else if (action === 'pipelines') {
+      this.resetViewContainer();
+      this.mountPipelinesView();
+    } else {
+      if (bp.getBreakpointSize() !== 'xs') {
+        this.expandView();
+      }
+      this.resetViewContainer();
+      this.destroyPipelinesView();
+
+      initDiscussionTab();
+    }
+    if (this.setUrl) {
+      this.setCurrentAction(action);
     }
+  }
 
-    scrollToElement(container) {
-      if (location.hash) {
-        const offset = 0 - (
-          $('.navbar-gitlab').outerHeight() +
-          $('.js-tabs-affix').outerHeight()
-        );
-        const $el = $(`${container} ${location.hash}:not(.match)`);
-        if ($el.length) {
-          $.scrollTo($el[0], { offset });
-        }
+  scrollToElement(container) {
+    if (location.hash) {
+      const offset = 0 - (
+        $('.navbar-gitlab').outerHeight() +
+        $('.js-tabs-affix').outerHeight()
+      );
+      const $el = $(`${container} ${location.hash}:not(.match)`);
+      if ($el.length) {
+        $.scrollTo($el[0], { offset });
       }
     }
+  }
+
+  // Activate a tab based on the current action
+  activateTab(action) {
+    // important note: the .tab('show') method triggers 'shown.bs.tab' event itself
+    $(`.merge-request-tabs a[data-action='${action}']`).tab('show');
+  }
 
-    // Activate a tab based on the current action
-    activateTab(action) {
-      // important note: the .tab('show') method triggers 'shown.bs.tab' event itself
-      $(`.merge-request-tabs a[data-action='${action}']`).tab('show');
+  // Replaces the current Merge Request-specific action in the URL with a new one
+  //
+  // If the action is "notes", the URL is reset to the standard
+  // `MergeRequests#show` route.
+  //
+  // Examples:
+  //
+  //   location.pathname # => "/namespace/project/merge_requests/1"
+  //   setCurrentAction('diffs')
+  //   location.pathname # => "/namespace/project/merge_requests/1/diffs"
+  //
+  //   location.pathname # => "/namespace/project/merge_requests/1/diffs"
+  //   setCurrentAction('show')
+  //   location.pathname # => "/namespace/project/merge_requests/1"
+  //
+  //   location.pathname # => "/namespace/project/merge_requests/1/diffs"
+  //   setCurrentAction('commits')
+  //   location.pathname # => "/namespace/project/merge_requests/1/commits"
+  //
+  // Returns the new URL String
+  setCurrentAction(action) {
+    this.currentAction = action;
+
+    // Remove a trailing '/commits' '/diffs' '/pipelines'
+    let newState = location.pathname.replace(/\/(commits|diffs|pipelines)(\.html)?\/?$/, '');
+
+    // Append the new action if we're on a tab other than 'notes'
+    if (this.currentAction !== 'show' && this.currentAction !== 'new') {
+      newState += `/${this.currentAction}`;
     }
 
-    // Replaces the current Merge Request-specific action in the URL with a new one
-    //
-    // If the action is "notes", the URL is reset to the standard
-    // `MergeRequests#show` route.
-    //
-    // Examples:
-    //
-    //   location.pathname # => "/namespace/project/merge_requests/1"
-    //   setCurrentAction('diffs')
-    //   location.pathname # => "/namespace/project/merge_requests/1/diffs"
-    //
-    //   location.pathname # => "/namespace/project/merge_requests/1/diffs"
-    //   setCurrentAction('show')
-    //   location.pathname # => "/namespace/project/merge_requests/1"
-    //
-    //   location.pathname # => "/namespace/project/merge_requests/1/diffs"
-    //   setCurrentAction('commits')
-    //   location.pathname # => "/namespace/project/merge_requests/1/commits"
-    //
-    // Returns the new URL String
-    setCurrentAction(action) {
-      this.currentAction = action;
+    // Ensure parameters and hash come along for the ride
+    newState += location.search + location.hash;
 
-      // Remove a trailing '/commits' '/diffs' '/pipelines'
-      let newState = location.pathname.replace(/\/(commits|diffs|pipelines)(\.html)?\/?$/, '');
+    // TODO: Consider refactoring in light of turbolinks removal.
 
-      // Append the new action if we're on a tab other than 'notes'
-      if (this.currentAction !== 'show' && this.currentAction !== 'new') {
-        newState += `/${this.currentAction}`;
-      }
+    // Replace the current history state with the new one without breaking
+    // Turbolinks' history.
+    //
+    // See https://github.com/rails/turbolinks/issues/363
+    window.history.replaceState({
+      url: newState,
+    }, document.title, newState);
 
-      // Ensure parameters and hash come along for the ride
-      newState += location.search + location.hash;
+    return newState;
+  }
 
-      // TODO: Consider refactoring in light of turbolinks removal.
+  loadCommits(source) {
+    if (this.commitsLoaded) {
+      return;
+    }
+    this.ajaxGet({
+      url: `${source}.json`,
+      success: (data) => {
+        document.querySelector('div#commits').innerHTML = data.html;
+        localTimeAgo($('.js-timeago', 'div#commits'));
+        this.commitsLoaded = true;
+        this.scrollToElement('#commits');
+      },
+    });
+  }
 
-      // Replace the current history state with the new one without breaking
-      // Turbolinks' history.
-      //
-      // See https://github.com/rails/turbolinks/issues/363
-      window.history.replaceState({
-        url: newState,
-      }, document.title, newState);
+  mountPipelinesView() {
+    const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
+    const CommitPipelinesTable = gl.CommitPipelinesTable;
+    this.commitPipelinesTable = new CommitPipelinesTable({
+      propsData: {
+        endpoint: pipelineTableViewEl.dataset.endpoint,
+        helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
+        emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
+        errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
+        autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
+      },
+    }).$mount();
+
+    // $mount(el) replaces the el with the new rendered component. We need it in order to mount
+    // it everytime this tab is clicked - https://vuejs.org/v2/api/#vm-mount
+    pipelineTableViewEl.appendChild(this.commitPipelinesTable.$el);
+  }
 
-      return newState;
+  loadDiff(source) {
+    if (this.diffsLoaded) {
+      document.dispatchEvent(new CustomEvent('scroll'));
+      return;
     }
 
-    loadCommits(source) {
-      if (this.commitsLoaded) {
-        return;
-      }
-      this.ajaxGet({
-        url: `${source}.json`,
-        success: (data) => {
-          document.querySelector('div#commits').innerHTML = data.html;
-          localTimeAgo($('.js-timeago', 'div#commits'));
-          this.commitsLoaded = true;
-          this.scrollToElement('#commits');
-        },
-      });
-    }
+    // We extract pathname for the current Changes tab anchor href
+    // some pages like MergeRequestsController#new has query parameters on that anchor
+    const urlPathname = parseUrlPathname(source);
 
-    mountPipelinesView() {
-      const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-      const CommitPipelinesTable = gl.CommitPipelinesTable;
-      this.commitPipelinesTable = new CommitPipelinesTable({
-        propsData: {
-          endpoint: pipelineTableViewEl.dataset.endpoint,
-          helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
-          emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
-          errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
-          autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
-        },
-      }).$mount();
+    this.ajaxGet({
+      url: `${urlPathname}.json${location.search}`,
+      success: (data) => {
+        const $container = $('#diffs');
+        $container.html(data.html);
 
-      // $mount(el) replaces the el with the new rendered component. We need it in order to mount
-      // it everytime this tab is clicked - https://vuejs.org/v2/api/#vm-mount
-      pipelineTableViewEl.appendChild(this.commitPipelinesTable.$el);
-    }
+        initChangesDropdown(this.stickyTop);
 
-    loadDiff(source) {
-      if (this.diffsLoaded) {
-        document.dispatchEvent(new CustomEvent('scroll'));
-        return;
-      }
+        if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+          gl.diffNotesCompileComponents();
+        }
+
+        localTimeAgo($('.js-timeago', 'div#diffs'));
+        syntaxHighlight($('#diffs .js-syntax-highlight'));
 
-      // We extract pathname for the current Changes tab anchor href
-      // some pages like MergeRequestsController#new has query parameters on that anchor
-      const urlPathname = parseUrlPathname(source);
-
-      this.ajaxGet({
-        url: `${urlPathname}.json${location.search}`,
-        success: (data) => {
-          const $container = $('#diffs');
-          $container.html(data.html);
-
-          initChangesDropdown(this.stickyTop);
-
-          if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-            gl.diffNotesCompileComponents();
-          }
-
-          localTimeAgo($('.js-timeago', 'div#diffs'));
-          syntaxHighlight($('#diffs .js-syntax-highlight'));
-
-          if (this.diffViewType() === 'parallel' && this.isDiffAction(this.currentAction)) {
-            this.expandViewContainer();
-          }
-          this.diffsLoaded = true;
-
-          new Diff();
-          this.scrollToElement('#diffs');
-
-          $('.diff-file').each((i, el) => {
-            new BlobForkSuggestion({
-              openButtons: $(el).find('.js-edit-blob-link-fork-toggler'),
-              forkButtons: $(el).find('.js-fork-suggestion-button'),
-              cancelButtons: $(el).find('.js-cancel-fork-suggestion-button'),
-              suggestionSections: $(el).find('.js-file-fork-suggestion-section'),
-              actionTextPieces: $(el).find('.js-file-fork-suggestion-section-action'),
-            })
-              .init();
+        if (this.diffViewType() === 'parallel' && this.isDiffAction(this.currentAction)) {
+          this.expandViewContainer();
+        }
+        this.diffsLoaded = true;
+
+        new Diff();
+        this.scrollToElement('#diffs');
+
+        $('.diff-file').each((i, el) => {
+          new BlobForkSuggestion({
+            openButtons: $(el).find('.js-edit-blob-link-fork-toggler'),
+            forkButtons: $(el).find('.js-fork-suggestion-button'),
+            cancelButtons: $(el).find('.js-cancel-fork-suggestion-button'),
+            suggestionSections: $(el).find('.js-file-fork-suggestion-section'),
+            actionTextPieces: $(el).find('.js-file-fork-suggestion-section-action'),
+          })
+            .init();
+        });
+
+        // Scroll any linked note into view
+        // Similar to `toggler_behavior` in the discussion tab
+        const hash = getLocationHash();
+        const anchor = hash && $container.find(`.note[id="${hash}"]`);
+        if (anchor && anchor.length > 0) {
+          const notesContent = anchor.closest('.notes_content');
+          const lineType = notesContent.hasClass('new') ? 'new' : 'old';
+          notes.toggleDiffNote({
+            target: anchor,
+            lineType,
+            forceShow: true,
           });
+          anchor[0].scrollIntoView();
+          handleLocationHash();
+          // We have multiple elements on the page with `#note_xxx`
+          // (discussion and diff tabs) and `:target` only applies to the first
+          anchor.addClass('target');
+        }
+      },
+    });
+  }
 
-          // Scroll any linked note into view
-          // Similar to `toggler_behavior` in the discussion tab
-          const hash = getLocationHash();
-          const anchor = hash && $container.find(`.note[id="${hash}"]`);
-          if (anchor && anchor.length > 0) {
-            const notesContent = anchor.closest('.notes_content');
-            const lineType = notesContent.hasClass('new') ? 'new' : 'old';
-            notes.toggleDiffNote({
-              target: anchor,
-              lineType,
-              forceShow: true,
-            });
-            anchor[0].scrollIntoView();
-            handleLocationHash();
-            // We have multiple elements on the page with `#note_xxx`
-            // (discussion and diff tabs) and `:target` only applies to the first
-            anchor.addClass('target');
-          }
-        },
-      });
-    }
+  // Show or hide the loading spinner
+  //
+  // status - Boolean, true to show, false to hide
+  toggleLoading(status) {
+    $('.mr-loading-status .loading').toggle(status);
+  }
 
-    // Show or hide the loading spinner
-    //
-    // status - Boolean, true to show, false to hide
-    toggleLoading(status) {
-      $('.mr-loading-status .loading').toggle(status);
-    }
+  ajaxGet(options) {
+    const defaults = {
+      beforeSend: () => this.toggleLoading(true),
+      error: () => new Flash('An error occurred while fetching this tab.', 'alert'),
+      complete: () => this.toggleLoading(false),
+      dataType: 'json',
+      type: 'GET',
+    };
+    $.ajax($.extend({}, defaults, options));
+  }
 
-    ajaxGet(options) {
-      const defaults = {
-        beforeSend: () => this.toggleLoading(true),
-        error: () => new Flash('An error occurred while fetching this tab.', 'alert'),
-        complete: () => this.toggleLoading(false),
-        dataType: 'json',
-        type: 'GET',
-      };
-      $.ajax($.extend({}, defaults, options));
-    }
+  diffViewType() {
+    return $('.inline-parallel-buttons a.active').data('view-type');
+  }
 
-    diffViewType() {
-      return $('.inline-parallel-buttons a.active').data('view-type');
-    }
+  isDiffAction(action) {
+    return action === 'diffs' || action === 'new/diffs';
+  }
 
-    isDiffAction(action) {
-      return action === 'diffs' || action === 'new/diffs';
+  expandViewContainer() {
+    const $wrapper = $('.content-wrapper .container-fluid').not('.breadcrumbs');
+    if (this.fixedLayoutPref === null) {
+      this.fixedLayoutPref = $wrapper.hasClass('container-limited');
     }
+    $wrapper.removeClass('container-limited');
+  }
 
-    expandViewContainer() {
-      const $wrapper = $('.content-wrapper .container-fluid').not('.breadcrumbs');
-      if (this.fixedLayoutPref === null) {
-        this.fixedLayoutPref = $wrapper.hasClass('container-limited');
-      }
-      $wrapper.removeClass('container-limited');
+  resetViewContainer() {
+    if (this.fixedLayoutPref !== null) {
+      $('.content-wrapper .container-fluid')
+        .toggleClass('container-limited', this.fixedLayoutPref);
     }
+  }
 
-    resetViewContainer() {
-      if (this.fixedLayoutPref !== null) {
-        $('.content-wrapper .container-fluid')
-          .toggleClass('container-limited', this.fixedLayoutPref);
-      }
-    }
+  shrinkView() {
+    const $gutterIcon = $('.js-sidebar-toggle i:visible');
 
-    shrinkView() {
-      const $gutterIcon = $('.js-sidebar-toggle i:visible');
+    // Wait until listeners are set
+    setTimeout(() => {
+      // Only when sidebar is expanded
+      if ($gutterIcon.is('.fa-angle-double-right')) {
+        $gutterIcon.closest('a').trigger('click', [true]);
+      }
+    }, 0);
+  }
 
-      // Wait until listeners are set
-      setTimeout(() => {
-        // Only when sidebar is expanded
-        if ($gutterIcon.is('.fa-angle-double-right')) {
-          $gutterIcon.closest('a').trigger('click', [true]);
-        }
-      }, 0);
+  // Expand the issuable sidebar unless the user explicitly collapsed it
+  expandView() {
+    if (Cookies.get('collapsed_gutter') === 'true') {
+      return;
     }
+    const $gutterIcon = $('.js-sidebar-toggle i:visible');
 
-    // Expand the issuable sidebar unless the user explicitly collapsed it
-    expandView() {
-      if (Cookies.get('collapsed_gutter') === 'true') {
-        return;
+    // Wait until listeners are set
+    setTimeout(() => {
+      // Only when sidebar is collapsed
+      if ($gutterIcon.is('.fa-angle-double-left')) {
+        $gutterIcon.closest('a').trigger('click', [true]);
       }
-      const $gutterIcon = $('.js-sidebar-toggle i:visible');
+    }, 0);
+  }
 
-      // Wait until listeners are set
-      setTimeout(() => {
-        // Only when sidebar is collapsed
-        if ($gutterIcon.is('.fa-angle-double-left')) {
-          $gutterIcon.closest('a').trigger('click', [true]);
-        }
-      }, 0);
-    }
+  initAffix() {
+    const $tabs = $('.js-tabs-affix');
+    const $fixedNav = $('.navbar-gitlab');
+
+    // Screen space on small screens is usually very sparse
+    // So we dont affix the tabs on these
+    if (bp.getBreakpointSize() === 'xs' || !$tabs.length) return;
+
+    /**
+      If the browser does not support position sticky, it returns the position as static.
+      If the browser does support sticky, then we allow the browser to handle it, if not
+      then we default back to Bootstraps affix
+    **/
+    if ($tabs.css('position') !== 'static') return;
+
+    const $diffTabs = $('#diff-notes-app');
+
+    $tabs.off('affix.bs.affix affix-top.bs.affix')
+      .affix({
+        offset: {
+          top: () => (
+            $diffTabs.offset().top - $tabs.height() - $fixedNav.height()
+          ),
+        },
+      })
+      .on('affix.bs.affix', () => $diffTabs.css({ marginTop: $tabs.height() }))
+      .on('affix-top.bs.affix', () => $diffTabs.css({ marginTop: '' }));
 
-    initAffix() {
-      const $tabs = $('.js-tabs-affix');
-      const $fixedNav = $('.navbar-gitlab');
-
-      // Screen space on small screens is usually very sparse
-      // So we dont affix the tabs on these
-      if (bp.getBreakpointSize() === 'xs' || !$tabs.length) return;
-
-      /**
-        If the browser does not support position sticky, it returns the position as static.
-        If the browser does support sticky, then we allow the browser to handle it, if not
-        then we default back to Bootstraps affix
-      **/
-      if ($tabs.css('position') !== 'static') return;
-
-      const $diffTabs = $('#diff-notes-app');
-
-      $tabs.off('affix.bs.affix affix-top.bs.affix')
-        .affix({
-          offset: {
-            top: () => (
-              $diffTabs.offset().top - $tabs.height() - $fixedNav.height()
-            ),
-          },
-        })
-        .on('affix.bs.affix', () => $diffTabs.css({ marginTop: $tabs.height() }))
-        .on('affix-top.bs.affix', () => $diffTabs.css({ marginTop: '' }));
-
-      // Fix bug when reloading the page already scrolling
-      if ($tabs.hasClass('affix')) {
-        $tabs.trigger('affix.bs.affix');
-      }
+    // Fix bug when reloading the page already scrolling
+    if ($tabs.hasClass('affix')) {
+      $tabs.trigger('affix.bs.affix');
     }
   }
-
-  window.gl = window.gl || {};
-  window.gl.MergeRequestTabs = MergeRequestTabs;
-})();
+}

app/assets/javascripts/notifications_dropdown.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, consistent-return, prefer-arrow-callback, no-else-return, max-len */
 import Flash from './flash';
 
-(function() {
-  this.NotificationsDropdown = (function() {
-    function NotificationsDropdown() {
-      $(document).off('click', '.update-notification').on('click', '.update-notification', function(e) {
-        var form, label, notificationLevel;
-        e.preventDefault();
-        if ($(this).is('.is-active') && $(this).data('notification-level') === 'custom') {
-          return;
-        }
-        notificationLevel = $(this).data('notification-level');
-        label = $(this).data('notification-title');
-        form = $(this).parents('.notification-form:first');
-        form.find('.js-notification-loading').toggleClass('fa-bell fa-spin fa-spinner');
-        form.find('#notification_setting_level').val(notificationLevel);
-        return form.submit();
-      });
-      $(document).off('ajax:success', '.notification-form').on('ajax:success', '.notification-form', function(e, data) {
-        if (data.saved) {
-          return $(e.currentTarget).closest('.js-notification-dropdown').replaceWith(data.html);
-        } else {
-          return new Flash('Failed to save new settings', 'alert');
-        }
-      });
+export default function notificationsDropdown() {
+  $(document).on('click', '.update-notification', function updateNotificationCallback(e) {
+    e.preventDefault();
+    if ($(this).is('.is-active') && $(this).data('notification-level') === 'custom') {
+      return;
     }
 
-    return NotificationsDropdown;
-  })();
-}).call(window);
+    const notificationLevel = $(this).data('notification-level');
+    const form = $(this).parents('.notification-form:first');
+
+    form.find('.js-notification-loading').toggleClass('fa-bell fa-spin fa-spinner');
+    form.find('#notification_setting_level').val(notificationLevel);
+    form.submit();
+  });
+
+  $(document).on('ajax:success', '.notification-form', (e, data) => {
+    if (data.saved) {
+      $(e.currentTarget).closest('.js-notification-dropdown').replaceWith(data.html);
+    } else {
+      Flash('Failed to save new settings', 'alert');
+    }
+  });
+}

app/assets/javascripts/notifications_form.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, one-var-declaration-per-line, newline-per-chained-call, comma-dangle, consistent-return, prefer-arrow-callback, max-len */
-(function() {
-  this.NotificationsForm = (function() {
-    function NotificationsForm() {
-      this.toggleCheckbox = this.toggleCheckbox.bind(this);
-      this.removeEventListeners();
-      this.initEventListeners();
-    }
+export default class NotificationsForm {
+  constructor() {
+    this.toggleCheckbox = this.toggleCheckbox.bind(this);
+    this.initEventListeners();
+  }
 
-    NotificationsForm.prototype.removeEventListeners = function() {
-      return $(document).off('change', '.js-custom-notification-event');
-    };
+  initEventListeners() {
+    $(document).on('change', '.js-custom-notification-event', this.toggleCheckbox);
+  }
 
-    NotificationsForm.prototype.initEventListeners = function() {
-      return $(document).on('change', '.js-custom-notification-event', this.toggleCheckbox);
-    };
+  toggleCheckbox(e) {
+    const $checkbox = $(e.currentTarget);
+    const $parent = $checkbox.closest('.checkbox');
 
-    NotificationsForm.prototype.toggleCheckbox = function(e) {
-      var $checkbox, $parent;
-      $checkbox = $(e.currentTarget);
-      $parent = $checkbox.closest('.checkbox');
-      return this.saveEvent($checkbox, $parent);
-    };
+    this.saveEvent($checkbox, $parent);
+  }
 
-    NotificationsForm.prototype.showCheckboxLoadingSpinner = function($parent) {
-      return $parent.addClass('is-loading').find('.custom-notification-event-loading').removeClass('fa-check').addClass('fa-spin fa-spinner').removeClass('is-done');
-    };
+  // eslint-disable-next-line class-methods-use-this
+  showCheckboxLoadingSpinner($parent) {
+    $parent.addClass('is-loading')
+      .find('.custom-notification-event-loading')
+      .removeClass('fa-check')
+      .addClass('fa-spin fa-spinner')
+      .removeClass('is-done');
+  }
 
-    NotificationsForm.prototype.saveEvent = function($checkbox, $parent) {
-      var form;
-      form = $parent.parents('form:first');
-      return $.ajax({
-        url: form.attr('action'),
-        method: form.attr('method'),
-        dataType: 'json',
-        data: form.serialize(),
-        beforeSend: (function(_this) {
-          return function() {
-            return _this.showCheckboxLoadingSpinner($parent);
-          };
-        })(this)
-      }).done(function(data) {
-        $checkbox.enable();
-        if (data.saved) {
-          $parent.find('.custom-notification-event-loading').toggleClass('fa-spin fa-spinner fa-check is-done');
-          return setTimeout(function() {
-            return $parent.removeClass('is-loading').find('.custom-notification-event-loading').toggleClass('fa-spin fa-spinner fa-check is-done');
-          }, 2000);
-        }
-      });
-    };
+  saveEvent($checkbox, $parent) {
+    const form = $parent.parents('form:first');
 
-    return NotificationsForm;
-  })();
-}).call(window);
+    return $.ajax({
+      url: form.attr('action'),
+      method: form.attr('method'),
+      dataType: 'json',
+      data: form.serialize(),
+      beforeSend: () => {
+        this.showCheckboxLoadingSpinner($parent);
+      },
+    }).done((data) => {
+      $checkbox.enable();
+      if (data.saved) {
+        $parent.find('.custom-notification-event-loading').toggleClass('fa-spin fa-spinner fa-check is-done');
+        setTimeout(() => {
+          $parent.removeClass('is-loading')
+            .find('.custom-notification-event-loading')
+            .toggleClass('fa-spin fa-spinner fa-check is-done');
+        }, 2000);
+      }
+    });
+  }
+}

app/assets/javascripts/pager.js

 import { getParameterByName } from '~/lib/utils/common_utils';
 import { removeParams } from './lib/utils/url_utility';
 
-(() => {
-  const ENDLESS_SCROLL_BOTTOM_PX = 400;
-  const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
+const ENDLESS_SCROLL_BOTTOM_PX = 400;
+const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
 
-  const Pager = {
-    init(limit = 0, preload = false, disable = false, prepareData = $.noop, callback = $.noop) {
-      this.url = $('.content_list').data('href') || removeParams(['limit', 'offset']);
-      this.limit = limit;
-      this.offset = parseInt(getParameterByName('offset'), 10) || this.limit;
-      this.disable = disable;
-      this.prepareData = prepareData;
-      this.callback = callback;
-      this.loading = $('.loading').first();
-      if (preload) {
-        this.offset = 0;
-        this.getOld();
-      }
-      this.initLoadMore();
-    },
+export default {
+  init(limit = 0, preload = false, disable = false, prepareData = $.noop, callback = $.noop) {
+    this.url = $('.content_list').data('href') || removeParams(['limit', 'offset']);
+    this.limit = limit;
+    this.offset = parseInt(getParameterByName('offset'), 10) || this.limit;
+    this.disable = disable;
+    this.prepareData = prepareData;
+    this.callback = callback;
+    this.loading = $('.loading').first();
+    if (preload) {
+      this.offset = 0;
+      this.getOld();
+    }
+    this.initLoadMore();
+  },
 
-    getOld() {
-      this.loading.show();
-      $.ajax({
-        type: 'GET',
-        url: this.url,
-        data: `limit=${this.limit}&offset=${this.offset}`,
-        dataType: 'json',
-        error: () => this.loading.hide(),
-        success: (data) => {
-          this.append(data.count, this.prepareData(data.html));
-          this.callback();
+  getOld() {
+    this.loading.show();
+    $.ajax({
+      type: 'GET',
+      url: this.url,
+      data: `limit=${this.limit}&offset=${this.offset}`,
+      dataType: 'json',
+      error: () => this.loading.hide(),
+      success: (data) => {
+        this.append(data.count, this.prepareData(data.html));
+        this.callback();
 
-          // keep loading until we've filled the viewport height
-          if (!this.disable && !this.isScrollable()) {
-            this.getOld();
-          } else {
-            this.loading.hide();
-          }
-        },
-      });
-    },
+        // keep loading until we've filled the viewport height
+        if (!this.disable && !this.isScrollable()) {
+          this.getOld();
+        } else {
+          this.loading.hide();
+        }
+      },
+    });
+  },
 
-    append(count, html) {
-      $('.content_list').append(html);
-      if (count > 0) {
-        this.offset += count;
-      } else {
-        this.disable = true;
-      }
-    },
+  append(count, html) {
+    $('.content_list').append(html);
+    if (count > 0) {
+      this.offset += count;
+    } else {
+      this.disable = true;
+    }
+  },
 
-    isScrollable() {
-      const $w = $(window);
-      return $(document).height() > $w.height() + $w.scrollTop() + ENDLESS_SCROLL_BOTTOM_PX;
-    },
+  isScrollable() {
+    const $w = $(window);
+    return $(document).height() > $w.height() + $w.scrollTop() + ENDLESS_SCROLL_BOTTOM_PX;
+  },
 
-    initLoadMore() {
-      $(document).unbind('scroll');
-      $(document).endlessScroll({
-        bottomPixels: ENDLESS_SCROLL_BOTTOM_PX,
-        fireDelay: ENDLESS_SCROLL_FIRE_DELAY_MS,
-        fireOnce: true,
-        ceaseFire: () => this.disable === true,
-        callback: () => {
-          if (!this.loading.is(':visible')) {
-            this.loading.show();
-            this.getOld();
-          }
-        },
-      });
-    },
-  };
-
-  window.Pager = Pager;
-})();
+  initLoadMore() {
+    $(document).unbind('scroll');
+    $(document).endlessScroll({
+      bottomPixels: ENDLESS_SCROLL_BOTTOM_PX,
+      fireDelay: ENDLESS_SCROLL_FIRE_DELAY_MS,
+      fireOnce: true,
+      ceaseFire: () => this.disable === true,
+      callback: () => {
+        if (!this.loading.is(':visible')) {
+          this.loading.show();
+          this.getOld();
+        }
+      },
+    });
+  },
+};

spec/javascripts/activities_spec.js

 /* eslint-disable no-unused-expressions, no-prototype-builtins, no-new, no-shadow, max-len */
 
 import 'vendor/jquery.endless-scroll';
-import '~/pager';
 import Activities from '~/activities';
 
 (() => {

spec/javascripts/commits_spec.js

 import 'vendor/jquery.endless-scroll';
-import '~/pager';
 import CommitsList from '~/commits';
 
 describe('Commits List', () => {

spec/javascripts/merge_request_tabs_spec.js

@@ -2,7 +2,7 @@
 /* global Notes */
 
 import * as urlUtils from '~/lib/utils/url_utility';
-import '~/merge_request_tabs';
+import MergeRequestTabs from '~/merge_request_tabs';
 import '~/commit/pipelines/pipelines_bundle';
 import '~/breakpoints';
 import '~/lib/utils/common_utils';
@@ -32,7 +32,7 @@ import 'vendor/jquery.scrollTo';
     );
 
     beforeEach(function () {
-      this.class = new gl.MergeRequestTabs({ stubLocation: stubLocation });
+      this.class = new MergeRequestTabs({ stubLocation: stubLocation });
       setLocation();
 
       this.spies = {

spec/javascripts/pager_spec.js

 /* global fixture */
 
 import * as utils from '~/lib/utils/url_utility';
-import '~/pager';
+import Pager from '~/pager';
 
 describe('pager', () => {
-  const Pager = window.Pager;
-
-  it('is defined on window', () => {
-    expect(window.Pager).toBeDefined();
-  });
-
   describe('init', () => {
     const originalHref = window.location.href;