Merge branch 'es-class-syntax' into 'master'

Refactor several javascript files to ES module syntax

See merge request !12683

25 files changed, 81 insertions, 128 deletions

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 1be9df19c81..6a008112203 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -2,6 +2,7 @@
 
 import './lib/utils/url_utility';
 import FilesCommentButton from './files_comment_button';
+import SingleFileDiff from './single_file_diff';
 
 const UNFOLD_COUNT = 20;
 let isBound = false;
@@ -10,7 +11,11 @@ class Diff {
   constructor() {
     const $diffFile = $('.files .diff-file');
 
-    $diffFile.singleFileDiff();
+    $diffFile.each((index, file) => {
+      if (!$.data(file, 'singleFileDiff')) {
+        $.data(file, 'singleFileDiff', new SingleFileDiff(file));
+      }
+    });
 
     FilesCommentButton.init($diffFile);
 
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 81267c68cfc..8f716696605 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -1,17 +1,13 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
-/* global UsernameValidator */
-/* global ActiveTabMemoizer */
 /* global ShortcutsNavigation */
 /* global IssuableIndex */
 /* global ShortcutsIssuable */
-/* global ZenMode */
 /* global Milestone */
 /* global IssuableForm */
 /* global LabelsSelect */
 /* global MilestoneSelect */
 /* global Commit */
 /* global NotificationsForm */
-/* global TreeView */
 /* global NotificationsDropdown */
 /* global GroupAvatar */
 /* global LineHighlighter */
@@ -25,7 +21,6 @@
 /* global ProjectAvatar */
 /* global CompareAutocomplete */
 /* global ProjectNew */
-/* global Star */
 /* global ProjectShow */
 /* global Labels */
 /* global Shortcuts */
@@ -54,6 +49,15 @@ import UsersSelect from './users_select';
 import RefSelectDropdown from './ref_select_dropdown';
 import GfmAutoComplete from './gfm_auto_complete';
 import ShortcutsBlob from './shortcuts_blob';
+import SigninTabsMemoizer from './signin_tabs_memoizer';
+import Star from './star';
+import Todos from './todos';
+import TreeView from './tree';
+import UsagePing from './usage_ping';
+import UsernameValidator from './username_validator';
+import VersionCheckImage from './version_check_image';
+import Wikis from './wikis';
+import ZenMode from './zen_mode';
 import initSettingsPanels from './settings_panels';
 import initExperimentalFlags from './experimental_flags';
 import OAuthRememberMe from './oauth_remember_me';
@@ -128,7 +132,7 @@ import PerformanceBar from './performance_bar';
           break;
         case 'sessions:new':
           new UsernameValidator();
-          new ActiveTabMemoizer();
+          new SigninTabsMemoizer();
           new OAuthRememberMe({ container: $(".omniauth-container") }).bindEvents();
           break;
         case 'projects:boards:show':
@@ -164,7 +168,7 @@ import PerformanceBar from './performance_bar';
           new UsersSelect();
           break;
         case 'dashboard:todos:index':
-          new gl.Todos();
+          new Todos();
           break;
         case 'dashboard:projects:index':
         case 'dashboard:projects:starred':
@@ -380,7 +384,7 @@ import PerformanceBar from './performance_bar';
           new BlobViewer();
           break;
         case 'help:index':
-          gl.VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
+          VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
           break;
         case 'search:show':
           new Search();
@@ -433,7 +437,7 @@ import PerformanceBar from './performance_bar';
           new Admin();
           switch (path[1]) {
             case 'cohorts':
-              new gl.UsagePing();
+              new UsagePing();
               break;
             case 'groups':
               new UsersSelect();
@@ -485,7 +489,7 @@ import PerformanceBar from './performance_bar';
               new NotificationsDropdown();
               break;
             case 'wikis':
-              new gl.Wikis();
+              new Wikis();
               shortcut_handler = new ShortcutsWiki();
               new ZenMode();
               new gl.GLForm($('.wiki-form'), true);
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index 92f6f0d4117..9ac1325fc95 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -1,12 +1,12 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, quotes, object-shorthand, no-unused-vars, comma-dangle, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, max-len */
 /* global GitLab */
-/* global ZenMode */
 /* global Autosave */
 /* global dateFormat */
 /* global Pikaday */
 
 import UsersSelect from './users_select';
 import GfmAutoComplete from './gfm_auto_complete';
+import ZenMode from './zen_mode';
 
 (function() {
   this.IssuableForm = (function() {
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 0860e237ce1..7490cd31f58 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -4,13 +4,13 @@
 import 'vendor/jquery.waitforimages';
 import '~/lib/utils/text_utility';
 import './flash';
-import './task_list';
+import TaskList from './task_list';
 import CreateMergeRequestDropdown from './create_merge_request_dropdown';
 
 class Issue {
   constructor() {
     if ($('a.btn-close').length) {
-      this.taskList = new gl.TaskList({
+      this.taskList = new TaskList({
         dataType: 'issue',
         fieldName: 'description',
         selector: '.detail-page-description',
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 43db66c8e08..48bad8f1e68 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -1,5 +1,6 @@
 <script>
   import animateMixin from '../mixins/animate';
+  import TaskList from '../../task_list';
 
   export default {
     mixins: [animateMixin],
@@ -46,7 +47,7 @@
 
         if (this.canUpdate) {
           // eslint-disable-next-line no-new
-          new gl.TaskList({
+          new TaskList({
             dataType: 'issue',
             fieldName: 'description',
             selector: '.detail-page-description',
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index fe752d95b90..892b3fab1c6 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -143,26 +143,13 @@ import './render_math';
 import './right_sidebar';
 import './search';
 import './search_autocomplete';
-import './signin_tabs_memoizer';
-import './single_file_diff';
 import './smart_interval';
 import './snippets_list';
 import './star';
 import './subscription';
 import './subscription_select';
 import './syntax_highlight';
-import './task_list';
-import './todos';
-import './tree';
-import './usage_ping';
 import './user';
-import './user_tabs';
-import './username_validator';
-import './users_select';
-import './version_check_image';
-import './visibility_select';
-import './wikis';
-import './zen_mode';
 
 // eslint-disable-next-line global-require, import/no-commonjs
 if (process.env.NODE_ENV !== 'production') require('./test_utils/');
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index f93feeec1c2..7ba9efc5387 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -2,7 +2,7 @@
 /* global MergeRequestTabs */
 
 import 'vendor/jquery.waitforimages';
-import './task_list';
+import TaskList from './task_list';
 import './merge_request_tabs';
 
 (function() {
@@ -25,7 +25,7 @@ import './merge_request_tabs';
       this.initMRBtnListeners();
       this.initCommitMessageListeners();
       if ($("a.btn-close").length) {
-        this.taskList = new gl.TaskList({
+        this.taskList = new TaskList({
           dataType: 'merge_request',
           fieldName: 'description',
           selector: '.detail-page-description',
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 555b8c8a65c..1a68c5bca00 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -21,7 +21,7 @@ import CommentTypeToggle from './comment_type_toggle';
 import loadAwardsHandler from './awards_handler';
 import './autosave';
 import './dropzone_input';
-import './task_list';
+import TaskList from './task_list';
 
 window.autosize = autosize;
 window.Dropzone = Dropzone;
@@ -71,7 +71,7 @@ export default class Notes {
     this.addBinding();
     this.setPollingInterval();
     this.setupMainTargetNoteForm();
-    this.taskList = new gl.TaskList({
+    this.taskList = new TaskList({
       dataType: 'note',
       fieldName: 'note',
       selector: '.notes'
diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js
index c0f757269cb..fd89a1a85c3 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -1,5 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-vars, one-var, no-underscore-dangle, prefer-template, no-else-return, prefer-arrow-callback, max-len */
 
+import VisibilitySelect from './visibility_select';
+
 function highlightChanges($elm) {
   $elm.addClass('highlight-changes');
   setTimeout(() => $elm.removeClass('highlight-changes'), 10);
@@ -30,7 +32,7 @@ function highlightChanges($elm) {
     ProjectNew.prototype.initVisibilitySelect = function() {
       const visibilityContainer = document.querySelector('.js-visibility-select');
       if (!visibilityContainer) return;
-      const visibilitySelect = new gl.VisibilitySelect(visibilityContainer);
+      const visibilitySelect = new VisibilitySelect(visibilityContainer);
       visibilitySelect.init();
 
       const $visibilitySelect = $(visibilityContainer).find('select');
diff --git a/app/assets/javascripts/signin_tabs_memoizer.js b/app/assets/javascripts/signin_tabs_memoizer.js
index 3997a695d15..20255398047 100644
--- a/app/assets/javascripts/signin_tabs_memoizer.js
+++ b/app/assets/javascripts/signin_tabs_memoizer.js
@@ -6,7 +6,7 @@ import AccessorUtilities from './lib/utils/accessor';
  * Memorize the last selected tab after reloading a page.
  * Does that setting the current selected tab in the localStorage
  */
-class ActiveTabMemoizer {
+export default class SigninTabsMemoizer {
   constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
     this.currentTabKey = currentTabKey;
     this.tabSelector = tabSelector;
@@ -51,5 +51,3 @@ class ActiveTabMemoizer {
     return window.localStorage.getItem(this.currentTabKey);
   }
 }
-
-window.ActiveTabMemoizer = ActiveTabMemoizer;
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 00d04ce0c33..4505a79a2df 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -2,18 +2,13 @@
 
 import FilesCommentButton from './files_comment_button';
 
-window.SingleFileDiff = (function() {
-  var COLLAPSED_HTML, ERROR_HTML, LOADING_HTML, WRAPPER;
+const WRAPPER = '<div class="diff-content"></div>';
+const LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>';
+const ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>';
+const COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <a class="click-to-expand">Click to expand it.</a></div>';
 
-  WRAPPER = '<div class="diff-content"></div>';
-
-  LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>';
-
-  ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>';
-
-  COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <a class="click-to-expand">Click to expand it.</a></div>';
-
-  function SingleFileDiff(file) {
+export default class SingleFileDiff {
+  constructor(file) {
     this.file = file;
     this.toggleDiff = this.toggleDiff.bind(this);
     this.content = $('.diff-content', this.file);
@@ -37,7 +32,7 @@ window.SingleFileDiff = (function() {
     }).bind(this));
   }
 
-  SingleFileDiff.prototype.toggleDiff = function($target, cb) {
+  toggleDiff($target, cb) {
     if (!$target.hasClass('js-file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return;
     this.isOpen = !this.isOpen;
     if (!this.isOpen && !this.hasError) {
@@ -58,9 +53,9 @@ window.SingleFileDiff = (function() {
       this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
       return this.getContentHTML(cb);
     }
-  };
+  }
 
-  SingleFileDiff.prototype.getContentHTML = function(cb) {
+  getContentHTML(cb) {
     this.collapsedContent.hide();
     this.loadingContent.show();
     $.get(this.diffForPath, (function(_this) {
@@ -84,15 +79,5 @@ window.SingleFileDiff = (function() {
         if (cb) cb();
       };
     })(this));
-  };
-
-  return SingleFileDiff;
-})();
-
-$.fn.singleFileDiff = function() {
-  return this.each(function() {
-    if (!$.data(this, 'singleFileDiff')) {
-      return $.data(this, 'singleFileDiff', new window.SingleFileDiff(this));
-    }
-  });
-};
+  }
+}
diff --git a/app/assets/javascripts/snippets_list.js b/app/assets/javascripts/snippets_list.js
index da7b9e08447..3b6d999b1c3 100644
--- a/app/assets/javascripts/snippets_list.js
+++ b/app/assets/javascripts/snippets_list.js
@@ -1,9 +1,9 @@
-/* eslint-disable arrow-parens, no-param-reassign, space-before-function-paren, func-names, no-var, max-len */
-
-window.gl.SnippetsList = function() {
-  var $holder = $('.snippets-list-holder');
+function SnippetsList() {
+  const $holder = $('.snippets-list-holder');
 
   $holder.find('.pagination').on('ajax:success', (e, data) => {
     $holder.replaceWith(data.html);
   });
-};
+}
+
+window.gl.SnippetsList = SnippetsList;
diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js
index 840ae1edd9d..6d38124f1c1 100644
--- a/app/assets/javascripts/star.js
+++ b/app/assets/javascripts/star.js
@@ -1,8 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-unused-vars, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, no-new, max-len */
 /* global Flash */
 
-window.Star = (function() {
-  function Star() {
+export default class Star {
+  constructor() {
     $('.project-home-panel .toggle-star').on('ajax:success', function(e, data, status, xhr) {
       var $starIcon, $starSpan, $this, toggleStar;
       $this = $(this);
@@ -23,6 +23,4 @@ window.Star = (function() {
       new Flash('Star toggle failed. Try again later.', 'alert');
     });
   }
-
-  return Star;
-})();
+}
diff --git a/app/assets/javascripts/subscription_select.js b/app/assets/javascripts/subscription_select.js
index a48434181b6..37e39ce5477 100644
--- a/app/assets/javascripts/subscription_select.js
+++ b/app/assets/javascripts/subscription_select.js
@@ -1,7 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, object-shorthand, no-unused-vars, no-shadow, one-var, one-var-declaration-per-line, comma-dangle, max-len */
 
-window.SubscriptionSelect = (function() {
-  function SubscriptionSelect() {
+class SubscriptionSelect {
+  constructor() {
     $('.js-subscription-event').each(function(i, el) {
       var fieldName;
       fieldName = $(el).data("field-name");
@@ -28,6 +28,6 @@ window.SubscriptionSelect = (function() {
       });
     });
   }
+}
 
-  return SubscriptionSelect;
-})();
+window.SubscriptionSelect = SubscriptionSelect;
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index 419c458ff34..c39f569da5e 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -2,7 +2,7 @@
 
 import 'deckar01-task_list';
 
-class TaskList {
+export default class TaskList {
   constructor(options = {}) {
     this.selector = options.selector;
     this.dataType = options.dataType;
@@ -48,6 +48,3 @@ class TaskList {
     });
   }
 }
-
-window.gl = window.gl || {};
-window.gl.TaskList = TaskList;
diff --git a/app/assets/javascripts/todos.js b/app/assets/javascripts/todos.js
index 7230946b484..cd305631c10 100644
--- a/app/assets/javascripts/todos.js
+++ b/app/assets/javascripts/todos.js
@@ -2,7 +2,7 @@
 
 import UsersSelect from './users_select';
 
-class Todos {
+export default class Todos {
   constructor() {
     this.initFilters();
     this.bindEvents();
@@ -159,6 +159,3 @@ class Todos {
     }
   }
 }
-
-window.gl = window.gl || {};
-gl.Todos = Todos;
diff --git a/app/assets/javascripts/tree.js b/app/assets/javascripts/tree.js
index 77ae6109bc6..7777ed1c3dc 100644
--- a/app/assets/javascripts/tree.js
+++ b/app/assets/javascripts/tree.js
@@ -1,7 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, quotes, consistent-return, no-var, one-var, one-var-declaration-per-line, no-else-return, prefer-arrow-callback, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, quotes, consistent-return, no-var, one-var, one-var-declaration-per-line, no-else-return, prefer-arrow-callback, class-methods-use-this */
 
-window.TreeView = (function() {
-  function TreeView() {
+export default class TreeView {
+  constructor() {
     this.initKeyNav();
     // Code browser tree slider
     // Make the entire tree-item row clickable, but not if clicking another link (like a commit message)
@@ -22,7 +22,7 @@ window.TreeView = (function() {
     $('span.log_loading:first').removeClass('hide');
   }
 
-  TreeView.prototype.initKeyNav = function() {
+  initKeyNav() {
     var li, liSelected;
     li = $("tr.tree-item");
     liSelected = null;
@@ -60,7 +60,5 @@ window.TreeView = (function() {
         }
       }
     });
-  };
-
-  return TreeView;
-})();
+  }
+}
diff --git a/app/assets/javascripts/usage_ping.js b/app/assets/javascripts/usage_ping.js
index fd3af7d7ab6..2389056bd02 100644
--- a/app/assets/javascripts/usage_ping.js
+++ b/app/assets/javascripts/usage_ping.js
@@ -1,4 +1,4 @@
-function UsagePing() {
+export default function UsagePing() {
   const usageDataUrl = $('.usage-data').data('endpoint');
 
   $.ajax({
@@ -10,6 +10,3 @@ function UsagePing() {
     },
   });
 }
-
-window.gl = window.gl || {};
-window.gl.UsagePing = UsagePing;
diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js
index 3ab9ef5408e..9ef94ac7616 100644
--- a/app/assets/javascripts/user.js
+++ b/app/assets/javascripts/user.js
@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this, comma-dangle, arrow-parens, no-param-reassign */
 
 import Cookies from 'js-cookie';
+import UserTabs from './user_tabs';
 
 class User {
   constructor({ action }) {
@@ -17,7 +18,7 @@ class User {
   }
 
   initTabs() {
-    return new window.gl.UserTabs({
+    return new UserTabs({
       parentEl: '.user-profile',
       action: this.action
     });
diff --git a/app/assets/javascripts/user_tabs.js b/app/assets/javascripts/user_tabs.js
index be70f4cb4e2..f8e23c8624d 100644
--- a/app/assets/javascripts/user_tabs.js
+++ b/app/assets/javascripts/user_tabs.js
@@ -60,7 +60,7 @@ content on the Users#show page.
    </div>
 */
 
-class UserTabs {
+export default class UserTabs {
   constructor ({ defaultAction, action, parentEl }) {
     this.loaded = {};
     this.defaultAction = defaultAction || 'activity';
@@ -171,6 +171,3 @@ class UserTabs {
     return this.$parentEl.find('.nav-links .active a').data('action');
   }
 }
-
-window.gl = window.gl || {};
-window.gl.UserTabs = UserTabs;
diff --git a/app/assets/javascripts/username_validator.js b/app/assets/javascripts/username_validator.js
index abe6c30f4f3..a348d69153c 100644
--- a/app/assets/javascripts/username_validator.js
+++ b/app/assets/javascripts/username_validator.js
@@ -8,7 +8,7 @@ const successMessageSelector = '.username .validation-success';
 const pendingMessageSelector = '.username .validation-pending';
 const invalidMessageSelector = '.username .gl-field-error';
 
-class UsernameValidator {
+export default class UsernameValidator {
   constructor() {
     this.inputElement = $('#new_user_username');
     this.inputDomElement = this.inputElement.get(0);
@@ -129,5 +129,3 @@ class UsernameValidator {
     $inputErrorMessage.show();
   }
 }
-
-window.UsernameValidator = UsernameValidator;
diff --git a/app/assets/javascripts/version_check_image.js b/app/assets/javascripts/version_check_image.js
index 88ba991af47..ec515e892c6 100644
--- a/app/assets/javascripts/version_check_image.js
+++ b/app/assets/javascripts/version_check_image.js
@@ -3,6 +3,3 @@ export default class VersionCheckImage {
     imageElement.off('error').on('error', () => imageElement.hide());
   }
 }
-
-window.gl = window.gl || {};
-gl.VersionCheckImage = VersionCheckImage;
diff --git a/app/assets/javascripts/visibility_select.js b/app/assets/javascripts/visibility_select.js
index b6bbbaa0936..0c928d0d5f6 100644
--- a/app/assets/javascripts/visibility_select.js
+++ b/app/assets/javascripts/visibility_select.js
@@ -1,4 +1,4 @@
-class VisibilitySelect {
+export default class VisibilitySelect {
   constructor(container) {
     if (!container) throw new Error('VisibilitySelect requires a container element as argument 1');
     this.container = container;
@@ -19,6 +19,3 @@ class VisibilitySelect {
     this.helpBlock.textContent = this.select.querySelector('option:checked').dataset.description;
   }
 }
-
-window.gl = window.gl || {};
-window.gl.VisibilitySelect = VisibilitySelect;
diff --git a/app/assets/javascripts/wikis.js b/app/assets/javascripts/wikis.js
index 03d183ebd84..00676bcb0b3 100644
--- a/app/assets/javascripts/wikis.js
+++ b/app/assets/javascripts/wikis.js
@@ -1,10 +1,9 @@
-/* eslint-disable no-param-reassign */
 /* global Breakpoints */
 
 import 'vendor/jquery.nicescroll';
 import './breakpoints';
 
-class Wikis {
+export default class Wikis {
   constructor() {
     this.bp = Breakpoints.get();
     this.sidebarEl = document.querySelector('.js-wiki-sidebar');
@@ -63,6 +62,3 @@ class Wikis {
     }
   }
 }
-
-window.gl = window.gl || {};
-window.gl.Wikis = Wikis;
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index 08f80735e93..99c7644e4d9 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, consistent-return, camelcase, comma-dangle, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, consistent-return, camelcase, comma-dangle, max-len, class-methods-use-this */
 /* global Mousetrap */
 
 // Zen Mode (full screen) textarea
@@ -35,8 +35,8 @@ window.Dropzone = Dropzone;
 // **Target** a.js-zen-leave
 //
 
-window.ZenMode = (function() {
-  function ZenMode() {
+export default class ZenMode {
+  constructor() {
     this.active_backdrop = null;
     this.active_textarea = null;
     $(document).on('click', '.js-zen-enter', function(e) {
@@ -66,7 +66,7 @@ window.ZenMode = (function() {
     });
   }
 
-  ZenMode.prototype.enter = function(backdrop) {
+  enter(backdrop) {
     Mousetrap.pause();
     this.active_backdrop = $(backdrop);
     this.active_backdrop.addClass('fullscreen');
@@ -74,9 +74,9 @@ window.ZenMode = (function() {
     // Prevent a user-resized textarea from persisting to fullscreen
     this.active_textarea.removeAttr('style');
     return this.active_textarea.focus();
-  };
+  }
 
-  ZenMode.prototype.exit = function() {
+  exit() {
     if (this.active_textarea) {
       Mousetrap.unpause();
       this.active_textarea.closest('.zen-backdrop').removeClass('fullscreen');
@@ -85,13 +85,11 @@ window.ZenMode = (function() {
       this.active_backdrop = null;
       return Dropzone.forElement('.div-dropzone').enable();
     }
-  };
+  }
 
-  ZenMode.prototype.scrollTo = function(zen_area) {
+  scrollTo(zen_area) {
     return $.scrollTo(zen_area, 0, {
       offset: -150
     });
-  };
-
-  return ZenMode;
-})();
+  }
+}