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,11 +63,10 @@ import syntaxHighlight from './syntax_highlight';
 //
 /* eslint-enable max-len */
 
-(() => {
-  // Store the `location` object, allowing for easier stubbing in tests
-  let location = window.location;
+// Store the `location` object, allowing for easier stubbing in tests
+let location = window.location;
 
-  class MergeRequestTabs {
+export default class MergeRequestTabs {
 
   constructor({ action, setUrl, stubLocation } = {}) {
     const mergeRequestTabs = document.querySelector('.js-tabs-affix');
@@ -442,8 +441,4 @@ import syntaxHighlight from './syntax_highlight';
       $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;
+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;
     }
-        notificationLevel = $(this).data('notification-level');
-        label = $(this).data('notification-title');
-        form = $(this).parents('.notification-form:first');
+
+    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);
-        return form.submit();
+    form.submit();
   });
-      $(document).off('ajax:success', '.notification-form').on('ajax:success', '.notification-form', function(e, data) {
+
+  $(document).on('ajax:success', '.notification-form', (e, data) => {
     if (data.saved) {
-          return $(e.currentTarget).closest('.js-notification-dropdown').replaceWith(data.html);
+      $(e.currentTarget).closest('.js-notification-dropdown').replaceWith(data.html);
     } else {
-          return new Flash('Failed to save new settings', 'alert');
+      Flash('Failed to save new settings', 'alert');
     }
   });
-    }
-
-    return NotificationsDropdown;
-  })();
-}).call(window);
+}

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() {
+export default class NotificationsForm {
+  constructor() {
     this.toggleCheckbox = this.toggleCheckbox.bind(this);
-      this.removeEventListeners();
     this.initEventListeners();
   }
 
-    NotificationsForm.prototype.removeEventListeners = function() {
-      return $(document).off('change', '.js-custom-notification-event');
-    };
+  initEventListeners() {
+    $(document).on('change', '.js-custom-notification-event', this.toggleCheckbox);
+  }
+
+  toggleCheckbox(e) {
+    const $checkbox = $(e.currentTarget);
+    const $parent = $checkbox.closest('.checkbox');
 
-    NotificationsForm.prototype.initEventListeners = function() {
-      return $(document).on('change', '.js-custom-notification-event', this.toggleCheckbox);
-    };
+    this.saveEvent($checkbox, $parent);
+  }
 
-    NotificationsForm.prototype.toggleCheckbox = function(e) {
-      var $checkbox, $parent;
-      $checkbox = $(e.currentTarget);
-      $parent = $checkbox.closest('.checkbox');
-      return this.saveEvent($checkbox, $parent);
-    };
+  // 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.showCheckboxLoadingSpinner = function($parent) {
-      return $parent.addClass('is-loading').find('.custom-notification-event-loading').removeClass('fa-check').addClass('fa-spin fa-spinner').removeClass('is-done');
-    };
+  saveEvent($checkbox, $parent) {
+    const form = $parent.parents('form:first');
 
-    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) {
+      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');
-          return setTimeout(function() {
-            return $parent.removeClass('is-loading').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);
       }
     });
-    };
-
-    return NotificationsForm;
-  })();
-}).call(window);
+  }
+}

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 = {
+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;
@@ -72,7 +71,4 @@ import { removeParams } from './lib/utils/url_utility';
       },
     });
   },
-  };
-
-  window.Pager = Pager;
-})();
+};

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;