Convert AbuseReports class to a module

app/assets/javascripts/abuse_reports.js

 const MAX_MESSAGE_LENGTH = 500;
 const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
-class AbuseReports {
+export default class AbuseReports {
   constructor() {
     $(MESSAGE_CELL_SELECTOR).each(this.truncateLongMessage);
     $(document)
@@ -32,6 +32,3 @@ class AbuseReports {
     }
   }
 }
-
-window.gl = window.gl || {};
-window.gl.AbuseReports = AbuseReports;

app/assets/javascripts/dispatcher.js

@@ -76,6 +76,7 @@ import initProjectVisibilitySelector from './project_visibility';
 import GpgBadges from './gpg_badges';
 import UserFeatureHelper from './helpers/user_feature_helper';
 import initChangesDropdown from './init_changes_dropdown';
+import AbuseReports from './abuse_reports';
 import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
 (function() {
@@ -557,7 +558,7 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
                   new Labels();
               }
             case 'abuse_reports':
-              new gl.AbuseReports();
+              new AbuseReports();
               break;
           }
           break;

app/assets/javascripts/main.js

@@ -57,7 +57,6 @@ import './u2f/register';
 import './u2f/util';
 // everything else
-import './abuse_reports';
 import './activities';
 import './admin';
 import './ajax_loading_spinner';

spec/javascripts/abuse_reports_spec.js

 import '~/lib/utils/text_utility';
-import '~/abuse_reports';
-
-((global) => {
-  describe('Abuse Reports', () => {
-    const FIXTURE = 'abuse_reports/abuse_reports_list.html.raw';
-    const MAX_MESSAGE_LENGTH = 500;
-
-    let $messages;
-
-    const assertMaxLength = $message => expect($message.text().length).toEqual(MAX_MESSAGE_LENGTH);
-    const findMessage = searchText => $messages.filter(
-      (index, element) => element.innerText.indexOf(searchText) > -1,
-    ).first();
-
-    preloadFixtures(FIXTURE);
-
-    beforeEach(function () {
-      loadFixtures(FIXTURE);
-      this.abuseReports = new global.AbuseReports();
-      $messages = $('.abuse-reports .message');
-    });
-
-    it('should truncate long messages', () => {
-      const $longMessage = findMessage('LONG MESSAGE');
-      expect($longMessage.data('original-message')).toEqual(jasmine.anything());
-      assertMaxLength($longMessage);
-    });
-
-    it('should not truncate short messages', () => {
-      const $shortMessage = findMessage('SHORT MESSAGE');
-      expect($shortMessage.data('original-message')).not.toEqual(jasmine.anything());
-    });
-
-    it('should allow clicking a truncated message to expand and collapse the full message', () => {
-      const $longMessage = findMessage('LONG MESSAGE');
-      $longMessage.click();
-      expect($longMessage.data('original-message').length).toEqual($longMessage.text().length);
-      $longMessage.click();
-      assertMaxLength($longMessage);
-    });
+import AbuseReports from '~/abuse_reports';
+
+describe('Abuse Reports', () => {
+  const FIXTURE = 'abuse_reports/abuse_reports_list.html.raw';
+  const MAX_MESSAGE_LENGTH = 500;
+
+  let $messages;
+
+  const assertMaxLength = $message => expect($message.text().length).toEqual(MAX_MESSAGE_LENGTH);
+  const findMessage = searchText => $messages.filter(
+    (index, element) => element.innerText.indexOf(searchText) > -1,
+  ).first();
+
+  preloadFixtures(FIXTURE);
+
+  beforeEach(function () {
+    loadFixtures(FIXTURE);
+    this.abuseReports = new AbuseReports();
+    $messages = $('.abuse-reports .message');
+  });
+
+  it('should truncate long messages', () => {
+    const $longMessage = findMessage('LONG MESSAGE');
+    expect($longMessage.data('original-message')).toEqual(jasmine.anything());
+    assertMaxLength($longMessage);
+  });
+
+  it('should not truncate short messages', () => {
+    const $shortMessage = findMessage('SHORT MESSAGE');
+    expect($shortMessage.data('original-message')).not.toEqual(jasmine.anything());
+  });
+
+  it('should allow clicking a truncated message to expand and collapse the full message', () => {
+    const $longMessage = findMessage('LONG MESSAGE');
+    $longMessage.click();
+    expect($longMessage.data('original-message').length).toEqual($longMessage.text().length);
+    $longMessage.click();
+    assertMaxLength($longMessage);
   });
-})(window.gl);
+});