Export and use Notes ES module

5 files changed, 14 insertions, 8 deletions

diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
index 06ce84d7599..300b02da663 100644
--- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
+++ b/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();
diff --git a/app/assets/javascripts/init_notes.js b/app/assets/javascripts/init_notes.js
index 3a8b4360cb6..882aedfcc76 100644
--- a/app/assets/javascripts/init_notes.js
+++ b/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);
 };
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index ae3f76873cf..63f2a65700c 100644
--- a/app/assets/javascripts/main.js
+++ b/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';
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index cacca35ca98..acfc62fe5cb 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/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,
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 042fe44e1c6..a2b8e6f6495 100644
--- a/app/assets/javascripts/notes.js
+++ b/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);