Merge branch '38869-diff' into 'master'

app/assets/javascripts/diff.js

-/* eslint-disable class-methods-use-this */
-
 import './lib/utils/url_utility';
 import FilesCommentButton from './files_comment_button';
 import SingleFileDiff from './single_file_diff';
@@ -8,7 +6,7 @@ import imageDiffHelper from './image_diff/helpers/index';
 const UNFOLD_COUNT = 20;
 let isBound = false;
 
-class Diff {
+export default class Diff {
   constructor() {
     const $diffFile = $('.files .diff-file');
 
@@ -104,7 +102,7 @@ class Diff {
     }
     this.highlightSelectedLine();
   }
-
+  // eslint-disable-next-line class-methods-use-this
   handleParallelLineDown(e) {
     const line = $(e.currentTarget);
     const table = line.closest('table');
@@ -116,11 +114,11 @@ class Diff {
       table.addClass(`${lineClass}-selected`);
     }
   }
-
+  // eslint-disable-next-line class-methods-use-this
   diffViewType() {
     return $('.inline-parallel-buttons a.active').data('view-type');
   }
-
+  // eslint-disable-next-line class-methods-use-this
   lineNumbers(line) {
     const children = line.find('.diff-line-num').toArray();
     if (children.length !== 2) {
@@ -128,7 +126,7 @@ class Diff {
     }
     return children.map(elm => parseInt($(elm).data('linenumber'), 10) || 0);
   }
-
+  // eslint-disable-next-line class-methods-use-this
   highlightSelectedLine() {
     const hash = gl.utils.getLocationHash();
     const $diffFiles = $('.diff-file');
@@ -141,6 +139,3 @@ class Diff {
     }
   }
 }
-
-window.gl = window.gl || {};
-window.gl.Diff = Diff;

app/assets/javascripts/dispatcher.js

@@ -87,6 +87,7 @@ import U2FAuthenticate from './u2f/authenticate';
 import Members from './members';
 import memberExpirationDate from './member_expiration_date';
 import DueDateSelectors from './due_date_select';
+import Diff from './diff';
 
 (function() {
   var Dispatcher;
@@ -237,7 +238,7 @@ import DueDateSelectors from './due_date_select';
           new GLForm($('.milestone-form'), true);
           break;
         case 'projects:compare:show':
-          new gl.Diff();
+          new Diff();
           initChangesDropdown();
           break;
         case 'projects:branches:new':
@@ -273,7 +274,7 @@ import DueDateSelectors from './due_date_select';
           }
         case 'projects:merge_requests:creations:diffs':
         case 'projects:merge_requests:edit':
-          new gl.Diff();
+          new Diff();
           shortcut_handler = new ShortcutsNavigation();
           new GLForm($('.merge-request-form'), true);
           new IssuableForm($('.merge-request-form'));
@@ -307,7 +308,7 @@ import DueDateSelectors from './due_date_select';
           new GLForm($('.release-form'), true);
           break;
         case 'projects:merge_requests:show':
-          new gl.Diff();
+          new Diff();
           shortcut_handler = new ShortcutsIssuable(true);
           new ZenMode();
 
@@ -323,7 +324,7 @@ import DueDateSelectors from './due_date_select';
           new gl.Activities();
           break;
         case 'projects:commit:show':
-          new gl.Diff();
+          new Diff();
           new ZenMode();
           shortcut_handler = new ShortcutsNavigation();
           new MiniPipelineGraph({

app/assets/javascripts/files_comment_button.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, max-len, one-var, one-var-declaration-per-line, quotes, prefer-template, newline-per-chained-call, comma-dangle, new-cap, no-else-return, consistent-return */
-/* global notes */
-
 /* Developer beware! Do not add logic to showButton or hideButton
  * that will force a reflow. Doing so will create a signficant performance
  * bottleneck for pages with large diffs. For a comprehensive list of what
@@ -20,8 +17,10 @@ const DIFF_EXPANDED_CLASS = 'diff-expanded';
 
 export default {
   init($diffFile) {
-    /* Caching is used only when the following members are *true*. This is because there are likely to be
-     * differently configured versions of diffs in the same session. However if these values are true, they
+    /* Caching is used only when the following members are *true*.
+     * This is because there are likely to be
+     * differently configured versions of diffs in the same session.
+     * However if these values are true, they
      * will be true in all cases */
 
     if (!this.userCanCreateNote) {

app/assets/javascripts/main.js

@@ -50,8 +50,6 @@ import './compare_autocomplete';
 import './confirm_danger_modal';
 import './copy_as_gfm';
 import './copy_to_clipboard';
-import './diff';
-import './files_comment_button';
 import Flash, { removeFlashClickListener } from './flash';
 import './gl_dropdown';
 import './gl_field_error';

app/assets/javascripts/merge_request_tabs.js

@@ -11,8 +11,8 @@ import {
   handleLocationHash,
   isMetaClick,
 } from './lib/utils/common_utils';
-
 import initDiscussionTab from './image_diff/init_discussion_tab';
+import Diff from './diff';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -292,7 +292,7 @@ import initDiscussionTab from './image_diff/init_discussion_tab';
           }
           this.diffsLoaded = true;
 
-          new gl.Diff();
+          new Diff();
           this.scrollToElement('#diffs');
 
           $('.diff-file').each((i, el) => {

spec/javascripts/merge_request_tabs_spec.js

@@ -5,8 +5,7 @@ import '~/merge_request_tabs';
 import '~/commit/pipelines/pipelines_bundle';
 import '~/breakpoints';
 import '~/lib/utils/common_utils';
-import '~/diff';
-import '~/files_comment_button';
+import Diff from '~/diff';
 import '~/notes';
 import 'vendor/jquery.scrollTo';
 
@@ -225,7 +224,7 @@ import 'vendor/jquery.scrollTo';
       describe('with "Side-by-side"/parallel diff view', () => {
         beforeEach(function () {
           this.class.diffViewType = () => 'parallel';
-          gl.Diff.prototype.diffViewType = () => 'parallel';
+          Diff.prototype.diffViewType = () => 'parallel';
         });
 
         it('maintains `container-limited` for pipelines tab', function (done) {