Export and use Notes ES module

app/assets/javascripts/diff_notes/components/diff_note_avatars.js

@@ -1,8 +1,8 @@
 /* global CommentsStore */
-/* global notes */
 
 import Vue from 'vue';
 import collapseIcon from '../icons/collapse_icon.svg';
+import Notes from '../../notes';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const DiffNoteAvatars = Vue.extend({
@@ -129,7 +129,7 @@ const DiffNoteAvatars = Vue.extend({
   },
   methods: {
     clickedAvatar(e) {
-      notes.onAddDiffNote(e);
+      Notes.instance.onAddDiffNote(e);
 
       // Toggle the active state of the toggle all button
       this.toggleDiscussionsToggleState();

app/assets/javascripts/init_notes.js

@@ -1,4 +1,4 @@
-/* global Notes */
+import Notes from './notes';
 
 export default () => {
   const dataEl = document.querySelector('.js-notes-data');
@@ -10,5 +10,7 @@ export default () => {
     autocomplete,
   } = JSON.parse(dataEl.innerHTML);
 
-  window.notes = new Notes(notesUrl, notesIds, now, diffView, autocomplete);
+  // Create a singleton so that we don't need to assign
+  // into the window object, we can just access the current isntance with Notes.instance
+  Notes.initialize(notesUrl, notesIds, now, diffView, autocomplete);
 };

app/assets/javascripts/main.js

@@ -46,9 +46,7 @@ import LazyLoader from './lazy_loader';
 import './line_highlighter';
 import initLogoAnimation from './logo';
 import './merge_request';
-import './merge_request_tabs';
 import './milestone_select';
-import './notes';
 import './preview_markdown';
 import './projects_dropdown';
 import './render_gfm';

app/assets/javascripts/merge_request_tabs.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-new, class-methods-use-this */
-/* global notes */
 
 import Cookies from 'js-cookie';
 import Flash from './flash';
@@ -16,6 +15,7 @@ import initDiscussionTab from './image_diff/init_discussion_tab';
 import Diff from './diff';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import syntaxHighlight from './syntax_highlight';
+import Notes from './notes';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -324,7 +324,7 @@ export default class MergeRequestTabs {
         if (anchor && anchor.length > 0) {
           const notesContent = anchor.closest('.notes_content');
           const lineType = notesContent.hasClass('new') ? 'new' : 'old';
-          notes.toggleDiffNote({
+          Notes.instance.toggleDiffNote({
             target: anchor,
             lineType,
             forceShow: true,

app/assets/javascripts/notes.js

@@ -37,6 +37,12 @@ const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
 const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
 
 export default class Notes {
+  static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
+    if (!this.instance) {
+      this.instance = new Notes(notes_url, note_ids, last_fetched_at, view, enableGFM);
+    }
+  }
+
   constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
     this.updateTargetButtons = this.updateTargetButtons.bind(this);
     this.updateComment = this.updateComment.bind(this);

spec/javascripts/merge_request_notes_spec.js

@@ -1,11 +1,9 @@
-/* global Notes */
-
 import 'autosize';
 import '~/gl_form';
 import '~/lib/utils/text_utility';
 import '~/render_gfm';
 import '~/render_math';
-import '~/notes';
+import Notes from '~/notes';
 
 const upArrowKeyCode = 38;
 

spec/javascripts/merge_request_tabs_spec.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-var, comma-dangle, object-shorthand */
-/* global Notes */
 
 import * as urlUtils from '~/lib/utils/url_utility';
 import MergeRequestTabs from '~/merge_request_tabs';
@@ -7,7 +6,7 @@ import '~/commit/pipelines/pipelines_bundle';
 import '~/breakpoints';
 import '~/lib/utils/common_utils';
 import Diff from '~/diff';
-import '~/notes';
+import Notes from '~/notes';
 import 'vendor/jquery.scrollTo';
 
 (function () {
@@ -279,8 +278,8 @@ import 'vendor/jquery.scrollTo';
         loadFixtures('merge_requests/diff_comment.html.raw');
         $('body').attr('data-page', 'projects:merge_requests:show');
         window.gl.ImageFile = () => {};
-        window.notes = new Notes('', []);
-        spyOn(window.notes, 'toggleDiffNote').and.callThrough();
+        Notes.initialize('', []);
+        spyOn(Notes.instance, 'toggleDiffNote').and.callThrough();
       });
 
       afterEach(() => {
@@ -338,7 +337,7 @@ import 'vendor/jquery.scrollTo';
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
             expect(noteId.length).toBeGreaterThan(0);
-            expect(window.notes.toggleDiffNote).toHaveBeenCalledWith({
+            expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
               target: jasmine.any(Object),
               lineType: 'old',
               forceShow: true,
@@ -349,7 +348,7 @@ import 'vendor/jquery.scrollTo';
             spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
-            expect(window.notes.toggleDiffNote).not.toHaveBeenCalled();
+            expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
           });
         });
 
@@ -359,7 +358,7 @@ import 'vendor/jquery.scrollTo';
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
             expect(noteLineNumId.length).toBeGreaterThan(0);
-            expect(window.notes.toggleDiffNote).not.toHaveBeenCalled();
+            expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
           });
         });
       });
@@ -393,7 +392,7 @@ import 'vendor/jquery.scrollTo';
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
             expect(noteId.length).toBeGreaterThan(0);
-            expect(window.notes.toggleDiffNote).toHaveBeenCalledWith({
+            expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
               target: jasmine.any(Object),
               lineType: 'new',
               forceShow: true,
@@ -404,7 +403,7 @@ import 'vendor/jquery.scrollTo';
             spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
-            expect(window.notes.toggleDiffNote).not.toHaveBeenCalled();
+            expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
           });
         });
 
@@ -414,7 +413,7 @@ import 'vendor/jquery.scrollTo';
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
             expect(noteLineNumId.length).toBeGreaterThan(0);
-            expect(window.notes.toggleDiffNote).not.toHaveBeenCalled();
+            expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
           });
         });
       });

spec/javascripts/notes_spec.js

@@ -1,12 +1,10 @@
 /* eslint-disable space-before-function-paren, no-unused-expressions, no-var, object-shorthand, comma-dangle, max-len */
-/* global Notes */
-
 import * as urlUtils from '~/lib/utils/url_utility';
 import 'autosize';
 import '~/gl_form';
 import '~/lib/utils/text_utility';
 import '~/render_gfm';
-import '~/notes';
+import Notes from '~/notes';
 
 (function() {
   window.gon || (window.gon = {});