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

Refactor Notes into ES class syntax

See merge request !12254

app/assets/javascripts/notes.js

@@ -4,7 +4,7 @@ no-unused-expressions, quotes, max-len, one-var, one-var-declaration-per-line,
 default-case, prefer-template, consistent-return, no-alert, no-return-assign,
 no-param-reassign, prefer-arrow-callback, no-else-return, comma-dangle, no-new,
 brace-style, no-lonely-if, vars-on-top, no-unused-vars, no-sequences, no-shadow,
-newline-per-chained-call, no-useless-escape */
+newline-per-chained-call, no-useless-escape, class-methods-use-this */
 /* global Flash */
 /* global Autosave */
 /* global ResolveService */
@@ -25,18 +25,15 @@ import './task_list';
 window.autosize = autosize;
 window.Dropzone = Dropzone;
 
-const normalizeNewlines = function(str) {
+function normalizeNewlines(str) {
   return str.replace(/\r\n/g, '\n');
-};
+}
 
-(function() {
-  this.Notes = (function() {
-    const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
-    const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
+const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
+const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
 
-    Notes.interval = null;
-
-    function Notes(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
+export default class Notes {
+  constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
     this.updateTargetButtons = this.updateTargetButtons.bind(this);
     this.updateComment = this.updateComment.bind(this);
     this.visibilityChange = this.visibilityChange.bind(this);
@@ -88,11 +85,11 @@ const normalizeNewlines = function(str) {
     }
   }
 
-    Notes.prototype.setViewType = function(view) {
+  setViewType(view) {
     this.view = Cookies.get('diff_view') || view;
-    };
+  }
 
-    Notes.prototype.addBinding = function() {
+  addBinding() {
     // Edit note link
     $(document).on('click', '.js-note-edit', this.showEditForm.bind(this));
     $(document).on('click', '.note-edit-cancel', this.cancelEdit);
@@ -131,9 +128,9 @@ const normalizeNewlines = function(str) {
     $(document).on('keydown', '.js-note-text', this.keydownNoteText);
     // When the URL fragment/hash has changed, `#note_xxx`
     return $(window).on('hashchange', this.onHashChange);
-    };
+  }
 
-    Notes.prototype.cleanBinding = function() {
+  cleanBinding() {
     $(document).off('click', '.js-note-edit');
     $(document).off('click', '.note-edit-cancel');
     $(document).off('click', '.js-note-delete');
@@ -152,9 +149,9 @@ const normalizeNewlines = function(str) {
     $(document).off('ajax:success', '.js-discussion-note-form');
     $(document).off('ajax:complete', '.js-main-target-form');
     $(window).off('hashchange', this.onHashChange);
-    };
+  }
 
-    Notes.initCommentTypeToggle = function (form) {
+  static initCommentTypeToggle(form) {
     const dropdownTrigger = form.querySelector('.js-comment-type-dropdown .dropdown-toggle');
     const dropdownList = form.querySelector('.js-comment-type-dropdown .dropdown-menu');
     const noteTypeInput = form.querySelector('#note_type');
@@ -172,9 +169,9 @@ const normalizeNewlines = function(str) {
     });
 
     commentTypeToggle.initDroplab();
-    };
+  }
 
-    Notes.prototype.keydownNoteText = function(e) {
+  keydownNoteText(e) {
     var $textarea, discussionNoteForm, editNote, myLastNote, myLastNoteEditBtn, newText, originalText;
     if (gl.utils.isMetaKey(e)) {
       return;
@@ -217,24 +214,26 @@ const normalizeNewlines = function(str) {
           return this.removeNoteEditForm(editNote);
         }
     }
-    };
+  }
 
-    Notes.prototype.initRefresh = function() {
+  initRefresh() {
+    if (Notes.interval) {
       clearInterval(Notes.interval);
+    }
     return Notes.interval = setInterval((function(_this) {
       return function() {
         return _this.refresh();
       };
     })(this), this.pollingInterval);
-    };
+  }
 
-    Notes.prototype.refresh = function() {
+  refresh() {
     if (!document.hidden) {
       return this.getContent();
     }
-    };
+  }
 
-    Notes.prototype.getContent = function() {
+  getContent() {
     if (this.refreshing) {
       return;
     }
@@ -259,18 +258,17 @@ const normalizeNewlines = function(str) {
         return _this.refreshing = false;
       };
     })(this));
-    };
-
-    /*
-    Increase @pollingInterval up to 120 seconds on every function call,
-    if `shouldReset` has a truthy value, 'null' or 'undefined' the variable
-    will reset to @basePollingInterval.
+  }
 
-    Note: this function is used to gradually increase the polling interval
-    if there aren't new notes coming from the server
+  /**
+   * Increase @pollingInterval up to 120 seconds on every function call,
+   * if `shouldReset` has a truthy value, 'null' or 'undefined' the variable
+   * will reset to @basePollingInterval.
+   *
+   * Note: this function is used to gradually increase the polling interval
+   * if there aren't new notes coming from the server
    */
-
-    Notes.prototype.setPollingInterval = function(shouldReset) {
+  setPollingInterval(shouldReset) {
     var nthInterval;
     if (shouldReset == null) {
       shouldReset = true;
@@ -282,9 +280,9 @@ const normalizeNewlines = function(str) {
       this.pollingInterval *= 2;
     }
     return this.initRefresh();
-    };
+  }
 
-    Notes.prototype.handleQuickActions = function(noteEntity) {
+  handleQuickActions(noteEntity) {
     var votesBlock;
     if (noteEntity.commands_changes) {
       if ('merge' in noteEntity.commands_changes) {
@@ -297,9 +295,9 @@ const normalizeNewlines = function(str) {
         return gl.awardsHandler.scrollToAwards();
       }
     }
-    };
+  }
 
-    Notes.prototype.setupNewNote = function($note) {
+  setupNewNote($note) {
     // Update datetime format on the recent note
     gl.utils.localTimeAgo($note.find('.js-timeago'), false);
 
@@ -310,30 +308,29 @@ const normalizeNewlines = function(str) {
     // The `:target` selector does not re-evaluate after we replace element in the DOM
     Notes.updateNoteTargetSelector($note);
     this.$noteToCleanHighlight = $note;
-    };
+  }
 
-    Notes.prototype.onHashChange = function() {
+  onHashChange() {
     if (this.$noteToCleanHighlight) {
       Notes.updateNoteTargetSelector(this.$noteToCleanHighlight);
     }
 
     this.$noteToCleanHighlight = null;
-    };
+  }
 
-    Notes.updateNoteTargetSelector = function($note) {
+  static updateNoteTargetSelector($note) {
     const hash = gl.utils.getLocationHash();
     // Needs to be an explicit true/false for the jQuery `toggleClass(force)`
     const addTargetClass = Boolean(hash && $note.filter(`#${hash}`).length > 0);
     $note.toggleClass('target', addTargetClass);
-    };
-
-    /*
-    Render note in main comments area.
+  }
 
-    Note: for rendering inline notes use renderDiscussionNote
+  /**
+   * Render note in main comments area.
+   *
+   * Note: for rendering inline notes use renderDiscussionNote
    */
-
-    Notes.prototype.renderNote = function(noteEntity, $form, $notesList = $('.main-notes-list')) {
+  renderNote(noteEntity, $form, $notesList = $('.main-notes-list')) {
     if (noteEntity.discussion_html) {
       return this.renderDiscussionNote(noteEntity, $form);
     }
@@ -384,19 +381,18 @@ const normalizeNewlines = function(str) {
         this.setupNewNote($updatedNote);
       }
     }
-    };
+  }
 
-    Notes.prototype.isParallelView = function() {
+  isParallelView() {
     return Cookies.get('diff_view') === 'parallel';
-    };
-
-    /*
-    Render note in discussion area.
+  }
 
-    Note: for rendering inline notes use renderDiscussionNote
+  /**
+   * Render note in discussion area.
+   *
+   * Note: for rendering inline notes use renderDiscussionNote
    */
-
-    Notes.prototype.renderDiscussionNote = function(noteEntity, $form) {
+  renderDiscussionNote(noteEntity, $form) {
     var discussionContainer, form, row, lineType, diffAvatarContainer;
     if (!Notes.isNewNote(noteEntity, this.note_ids)) {
       return;
@@ -447,16 +443,16 @@ const normalizeNewlines = function(str) {
     gl.utils.localTimeAgo($('.js-timeago'), false);
     Notes.checkMergeRequestStatus();
     return this.updateNotesCount(1);
-    };
+  }
 
-    Notes.prototype.getLineHolder = function(changesDiscussionContainer) {
+  getLineHolder(changesDiscussionContainer) {
     return $(changesDiscussionContainer).closest('.notes_holder')
       .prevAll('.line_holder')
       .first()
       .get(0);
-    };
+  }
 
-    Notes.prototype.renderDiscussionAvatar = function(diffAvatarContainer, noteEntity) {
+  renderDiscussionAvatar(diffAvatarContainer, noteEntity) {
     var commentButton = diffAvatarContainer.find('.js-add-diff-note-button');
     var avatarHolder = diffAvatarContainer.find('.diff-comment-avatar-holders');
 
@@ -472,17 +468,16 @@ const normalizeNewlines = function(str) {
     if (commentButton.length) {
       commentButton.remove();
     }
-    };
-
-    /*
-    Called in response the main target form has been successfully submitted.
+  }
 
-    Removes any errors.
-    Resets text and preview.
-    Resets buttons.
+  /**
+   * Called in response the main target form has been successfully submitted.
+   *
+   * Removes any errors.
+   * Resets text and preview.
+   * Resets buttons.
    */
-
-    Notes.prototype.resetMainTargetForm = function(e) {
+  resetMainTargetForm(e) {
     var form;
     form = $('.js-main-target-form');
     // remove validation errors
@@ -497,21 +492,20 @@ const normalizeNewlines = function(str) {
     form.find('.js-autosize')[0].dispatchEvent(event);
 
     this.updateTargetButtons(e);
-    };
+  }
 
-    Notes.prototype.reenableTargetFormSubmitButton = function() {
+  reenableTargetFormSubmitButton() {
     var form;
     form = $('.js-main-target-form');
     return form.find('.js-note-text').trigger('input');
-    };
-
-    /*
-    Shows the main form and does some setup on it.
+  }
 
-    Sets some hidden fields in the form.
+  /**
+   * Shows the main form and does some setup on it.
+   *
+   * Sets some hidden fields in the form.
    */
-
-    Notes.prototype.setupMainTargetNoteForm = function() {
+  setupMainTargetNoteForm() {
     var form;
     // find the form
     form = $('.js-new-note-form');
@@ -532,18 +526,17 @@ const normalizeNewlines = function(str) {
     if (form.length) {
       Notes.initCommentTypeToggle(form.get(0));
     }
-    };
-
-    /*
-    General note form setup.
+  }
 
-    deactivates the submit button when text is empty
-    hides the preview button when text is empty
-    setup GFM auto complete
-    show the form
+  /**
+   * General note form setup.
+   *
+   * deactivates the submit button when text is empty
+   * hides the preview button when text is empty
+   * setup GFM auto complete
+   * show the form
    */
-
-    Notes.prototype.setupNoteForm = function(form) {
+  setupNoteForm(form) {
     var textarea, key;
     new gl.GLForm(form, this.enableGFM);
     textarea = form.find('.js-note-text');
@@ -562,19 +555,18 @@ const normalizeNewlines = function(str) {
       form.find('#note_position').val()
     ];
     return new Autosave(textarea, key);
-    };
-
-    /*
-    Called in response to the new note form being submitted
+  }
 
-    Adds new note to list.
+  /**
+   * Called in response to the new note form being submitted
+   *
+   * Adds new note to list.
    */
-
-    Notes.prototype.addNote = function($form, note) {
+  addNote($form, note) {
     return this.renderNote(note);
-    };
+  }
 
-    Notes.prototype.addNoteError = function($form) {
+  addNoteError($form) {
     let formParentTimeline;
     if ($form.hasClass('js-main-target-form')) {
       formParentTimeline = $form.parents('.timeline');
@@ -582,17 +574,18 @@ const normalizeNewlines = function(str) {
       formParentTimeline = $form.closest('.discussion-notes').find('.notes');
     }
     return this.addFlash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline);
-    };
-
-    Notes.prototype.updateNoteError = $parentTimeline => new Flash('Your comment could not be updated! Please check your network connection and try again.');
+  }
 
-    /*
-    Called in response to the new note form being submitted
+  updateNoteError($parentTimeline) {
+    new Flash('Your comment could not be updated! Please check your network connection and try again.');
+  }
 
-    Adds new note to list.
+  /**
+   * Called in response to the new note form being submitted
+   *
+   * Adds new note to list.
    */
-
-    Notes.prototype.addDiscussionNote = function($form, note, isNewDiffComment) {
+  addDiscussionNote($form, note, isNewDiffComment) {
     if ($form.attr('data-resolve-all') != null) {
       var projectPath = $form.data('project-path');
       var discussionId = $form.data('discussion-id');
@@ -608,15 +601,14 @@ const normalizeNewlines = function(str) {
     if (isNewDiffComment) {
       this.removeDiscussionNoteForm($form);
     }
-    };
-
-    /*
-    Called in response to the edit note form being submitted
+  }
 
-    Updates the current note field.
+  /**
+   * Called in response to the edit note form being submitted
+   *
+   * Updates the current note field.
    */
-
-    Notes.prototype.updateNote = function(noteEntity, $targetNote) {
+  updateNote(noteEntity, $targetNote) {
     var $noteEntityEl, $note_li;
     // Convert returned HTML to a jQuery object so we can modify it further
     $noteEntityEl = $(noteEntity.html);
@@ -632,9 +624,9 @@ const normalizeNewlines = function(str) {
     if (typeof gl.diffNotesCompileComponents !== 'undefined') {
       gl.diffNotesCompileComponents();
     }
-    };
+  }
 
-    Notes.prototype.checkContentToAllowEditing = function($el) {
+  checkContentToAllowEditing($el) {
     var initialContent = $el.find('.original-note-content').text().trim();
     var currentContent = $el.find('.js-note-text').val();
     var isAllowed = true;
@@ -655,15 +647,15 @@ const normalizeNewlines = function(str) {
     }
 
     return isAllowed;
-    };
-
-    /*
-    Called in response to clicking the edit note link
+  }
 
-    Replaces the note text with the note edit form
-    Adds a data attribute to the form with the original content of the note for cancellations
+  /**
+   * Called in response to clicking the edit note link
+   *
+   * Replaces the note text with the note edit form
+   * Adds a data attribute to the form with the original content of the note for cancellations
    */
-    Notes.prototype.showEditForm = function(e, scrollTo, myLastNote) {
+  showEditForm(e, scrollTo, myLastNote) {
     e.preventDefault();
 
     var $target = $(e.target);
@@ -683,15 +675,14 @@ const normalizeNewlines = function(str) {
     $editForm.addClass('current-note-edit-form');
     $note.addClass('is-editing');
     this.putEditFormInPlace($target);
-    };
-
-    /*
-    Called in response to clicking the edit note link
+  }
 
-    Hides edit form and restores the original note text to the editor textarea.
+  /**
+   * Called in response to clicking the edit note link
+   *
+   * Hides edit form and restores the original note text to the editor textarea.
    */
-
-    Notes.prototype.cancelEdit = function(e) {
+  cancelEdit(e) {
     e.preventDefault();
     const $target = $(e.target);
     const $note = $target.closest('.note');
@@ -710,9 +701,9 @@ const normalizeNewlines = function(str) {
       $note.find('.js-finish-edit-warning').hide();
       this.removeNoteEditForm($note);
     }
-    };
+  }
 
-    Notes.prototype.revertNoteEditForm = function($target) {
+  revertNoteEditForm($target) {
     $target = $target || $('.note.is-editing:visible');
     var selector = this.getEditFormSelector($target);
     var $editForm = $(selector);
@@ -720,9 +711,9 @@ const normalizeNewlines = function(str) {
     $editForm.insertBefore('.notes-form');
     $editForm.find('.js-comment-save-button').enable();
     $editForm.find('.js-finish-edit-warning').hide();
-    };
+  }
 
-    Notes.prototype.getEditFormSelector = function($el) {
+  getEditFormSelector($el) {
     var selector = '.note-edit-form:not(.mr-note-edit-form)';
 
     if ($el.parents('#diffs').length) {
@@ -730,25 +721,24 @@ const normalizeNewlines = function(str) {
     }
 
     return selector;
-    };
+  }
 
-    Notes.prototype.removeNoteEditForm = function($note) {
+  removeNoteEditForm($note) {
     var form = $note.find('.current-note-edit-form');
     $note.removeClass('is-editing');
     form.removeClass('current-note-edit-form');
     form.find('.js-finish-edit-warning').hide();
     // Replace markdown textarea text with original note text.
     return form.find('.js-note-text').val(form.find('form.edit-note').data('original-note'));
-    };
-
-    /*
-    Called in response to deleting a note of any kind.
+  }
 
-    Removes the actual note from view.
-    Removes the whole discussion if the last note is being removed.
+  /**
+   * Called in response to deleting a note of any kind.
+   *
+   * Removes the actual note from view.
+   * Removes the whole discussion if the last note is being removed.
    */
-
-    Notes.prototype.removeNote = function(e) {
+  removeNote(e) {
     var noteElId, noteId, dataNoteId, $note, lineHolder;
     $note = $(e.currentTarget).closest('.note');
     noteElId = $note.attr('id');
@@ -792,34 +782,32 @@ const normalizeNewlines = function(str) {
 
     Notes.checkMergeRequestStatus();
     return this.updateNotesCount(-1);
-    };
-
-    /*
-    Called in response to clicking the delete attachment link
+  }
 
-    Removes the attachment wrapper view, including image tag if it exists
-    Resets the note editing form
+  /**
+   * Called in response to clicking the delete attachment link
+   *
+   * Removes the attachment wrapper view, including image tag if it exists
+   * Resets the note editing form
    */
-
-    Notes.prototype.removeAttachment = function() {
+  removeAttachment() {
     const $note = $(this).closest('.note');
     $note.find('.note-attachment').remove();
     $note.find('.note-body > .note-text').show();
     $note.find('.note-header').show();
     return $note.find('.current-note-edit-form').remove();
-    };
-
-    /*
-    Called when clicking on the "reply" button for a diff line.
+  }
 
-    Shows the note form below the notes.
+  /**
+   * Called when clicking on the "reply" button for a diff line.
+   *
+   * Shows the note form below the notes.
    */
-
-    Notes.prototype.onReplyToDiscussionNote = function(e) {
+  onReplyToDiscussionNote(e) {
     this.replyToDiscussionNote(e.target);
-    };
+  }
 
-    Notes.prototype.replyToDiscussionNote = function(target) {
+  replyToDiscussionNote(target) {
     var form, replyLink;
     form = this.cleanForm(this.formClone.clone());
     replyLink = $(target).closest('.js-discussion-reply-button');
@@ -830,17 +818,16 @@ const normalizeNewlines = function(str) {
       .after(form);
     // show the form
     return this.setupDiscussionNoteForm(replyLink, form);
-    };
-
-    /*
-    Shows the diff or discussion form and does some setup on it.
-
-    Sets some hidden fields in the form.
+  }
 
-    Note: dataHolder must have the "discussionId" and "lineCode" data attributes set.
+  /**
+   * Shows the diff or discussion form and does some setup on it.
+   *
+   * Sets some hidden fields in the form.
+   *
+   * Note: dataHolder must have the "discussionId" and "lineCode" data attributes set.
    */
-
-    Notes.prototype.setupDiscussionNoteForm = function(dataHolder, form) {
+  setupDiscussionNoteForm(dataHolder, form) {
     // setup note target
     var discussionID = dataHolder.data('discussionId');
 
@@ -883,16 +870,15 @@ const normalizeNewlines = function(str) {
     form
       .find('.js-comment-resolve-button')
       .attr('data-discussion-id', discussionID);
-    };
-
-    /*
-    Called when clicking on the "add a comment" button on the side of a diff line.
+  }
 
-    Inserts a temporary row for the form below the line.
-    Sets up the form and shows it.
+  /**
+   * Called when clicking on the "add a comment" button on the side of a diff line.
+   *
+   * Inserts a temporary row for the form below the line.
+   * Sets up the form and shows it.
    */
-
-    Notes.prototype.onAddDiffNote = function(e) {
+  onAddDiffNote(e) {
     e.preventDefault();
     const link = e.currentTarget || e.target;
     const $link = $(link);
@@ -902,9 +888,9 @@ const normalizeNewlines = function(str) {
       lineType: link.dataset.lineType,
       showReplyInput
     });
-    };
+  }
 
-    Notes.prototype.toggleDiffNote = function({
+  toggleDiffNote({
     target,
     lineType,
     forceShow,
@@ -968,16 +954,15 @@ const normalizeNewlines = function(str) {
       // show the form
       return this.setupDiscussionNoteForm($link, newForm);
     }
-    };
-
-    /*
-    Called in response to "cancel" on a diff note form.
+  }
 
-    Shows the reply button again.
-    Removes the form and if necessary it's temporary row.
+  /**
+   * Called in response to "cancel" on a diff note form.
+   *
+   * Shows the reply button again.
+   * Removes the form and if necessary it's temporary row.
    */
-
-    Notes.prototype.removeDiscussionNoteForm = function(form) {
+  removeDiscussionNoteForm(form) {
     var glForm, row;
     row = form.closest('tr');
     glForm = form.data('gl-form');
@@ -994,38 +979,36 @@ const normalizeNewlines = function(str) {
       // only remove the form
       return form.remove();
     }
-    };
+  }
 
-    Notes.prototype.cancelDiscussionForm = function(e) {
+  cancelDiscussionForm(e) {
     var form;
     e.preventDefault();
     form = $(e.target).closest('.js-discussion-note-form');
     return this.removeDiscussionNoteForm(form);
-    };
-
-    /*
-    Called after an attachment file has been selected.
+  }
 
-    Updates the file name for the selected attachment.
+  /**
+   * Called after an attachment file has been selected.
+   *
+   * Updates the file name for the selected attachment.
    */
-
-    Notes.prototype.updateFormAttachment = function() {
+  updateFormAttachment() {
     var filename, form;
     form = $(this).closest('form');
     // get only the basename
     filename = $(this).val().replace(/^.*[\\\/]/, '');
     return form.find('.js-attachment-filename').text(filename);
-    };
+  }
 
-    /*
-    Called when the tab visibility changes
+  /**
+   * Called when the tab visibility changes
    */
-
-    Notes.prototype.visibilityChange = function() {
+  visibilityChange() {
     return this.refresh();
-    };
+  }
 
-    Notes.prototype.updateTargetButtons = function(e) {
+  updateTargetButtons(e) {
     var closebtn, closetext, discardbtn, form, reopenbtn, reopentext, textarea;
     textarea = $(e.target);
     form = textarea.parents('form');
@@ -1070,9 +1053,9 @@ const normalizeNewlines = function(str) {
         return discardbtn.hide();
       }
     }
-    };
+  }
 
-    Notes.prototype.putEditFormInPlace = function($el) {
+  putEditFormInPlace($el) {
     var $editForm = $(this.getEditFormSelector($el));
     var $note = $el.closest('.note');
 
@@ -1094,9 +1077,9 @@ const normalizeNewlines = function(str) {
     $editForm.find('.js-note-text').focus().val(originalContent);
     $editForm.find('.js-md-write-button').trigger('click');
     $editForm.find('.referenced-users').hide();
-    };
+  }
 
-    Notes.prototype.putConflictEditWarningInPlace = function(noteEntity, $note) {
+  putConflictEditWarningInPlace(noteEntity, $note) {
     if ($note.find('.js-conflict-edit-warning').length === 0) {
       const $alert = $(`<div class="js-conflict-edit-warning alert alert-danger">
         This comment has changed since you started editing, please review the
@@ -1107,26 +1090,26 @@ const normalizeNewlines = function(str) {
       </div>`);
       $alert.insertAfter($note.find('.note-text'));
     }
-    };
+  }
 
-    Notes.prototype.updateNotesCount = function(updateCount) {
+  updateNotesCount(updateCount) {
     return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
-    };
+  }
 
-    Notes.prototype.toggleCommitList = function(e) {
+  toggleCommitList(e) {
     const $element = $(e.currentTarget);
     const $closestSystemCommitList = $element.siblings('.system-note-commit-list');
 
     $element.find('.fa').toggleClass('fa-angle-down').toggleClass('fa-angle-up');
     $closestSystemCommitList.toggleClass('hide-shade');
-    };
+  }
 
   /**
-    Scans system notes with `ul` elements in system note body
-    then collapse long commit list pushed by user to make it less
-    intrusive.
+   * Scans system notes with `ul` elements in system note body
+   * then collapse long commit list pushed by user to make it less
+   * intrusive.
    */
-    Notes.prototype.collapseLongCommitList = function() {
+  collapseLongCommitList() {
     const systemNotes = $('#notes-list').find('li.system-note').has('ul');
 
     $.each(systemNotes, function(index, systemNote) {
@@ -1142,20 +1125,20 @@ const normalizeNewlines = function(str) {
         $systemNote.find('.note-text').addClass('system-note-commit-list hide-shade');
       }
     });
-    };
+  }
 
-    Notes.prototype.addFlash = function(...flashParams) {
+  addFlash(...flashParams) {
     this.flashInstance = new Flash(...flashParams);
-    };
+  }
 
-    Notes.prototype.clearFlash = function() {
+  clearFlash() {
     if (this.flashInstance && this.flashInstance.flashContainer) {
       this.flashInstance.flashContainer.hide();
       this.flashInstance = null;
     }
-    };
+  }
 
-    Notes.prototype.cleanForm = function($form) {
+  cleanForm($form) {
     // Remove JS classes that are not needed here
     $form
       .find('.js-comment-type-dropdown')
@@ -1167,78 +1150,78 @@ const normalizeNewlines = function(str) {
       .remove();
 
     return $form;
-    };
+  }
 
   /**
    * Check if note does not exists on page
    */
-    Notes.isNewNote = function(noteEntity, noteIds) {
+  static isNewNote(noteEntity, noteIds) {
     return $.inArray(noteEntity.id, noteIds) === -1;
-    };
+  }
 
   /**
    * Check if $note already contains the `noteEntity` content
    */
-    Notes.isUpdatedNote = function(noteEntity, $note) {
+  static isUpdatedNote(noteEntity, $note) {
     // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
     const sanitizedNoteEntityText = normalizeNewlines(noteEntity.note.trim());
     const currentNoteText = normalizeNewlines(
       $note.find('.original-note-content').first().text().trim()
     );
     return sanitizedNoteEntityText !== currentNoteText;
-    };
+  }
 
-    Notes.checkMergeRequestStatus = function() {
+  static checkMergeRequestStatus() {
     if (gl.utils.getPagePath(1) === 'merge_requests') {
       gl.mrWidget.checkStatus();
     }
-    };
+  }
 
-    Notes.animateAppendNote = function(noteHtml, $notesList) {
+  static animateAppendNote(noteHtml, $notesList) {
     const $note = $(noteHtml);
 
     $note.addClass('fade-in-full').renderGFM();
     $notesList.append($note);
     return $note;
-    };
+  }
 
-    Notes.animateUpdateNote = function(noteHtml, $note) {
+  static animateUpdateNote(noteHtml, $note) {
     const $updatedNote = $(noteHtml);
 
     $updatedNote.addClass('fade-in').renderGFM();
     $note.replaceWith($updatedNote);
     return $updatedNote;
-    };
+  }
 
   /**
    * Get data from Form attributes to use for saving/submitting comment.
    */
-    Notes.prototype.getFormData = function($form) {
+  getFormData($form) {
     return {
       formData: $form.serialize(),
       formContent: _.escape($form.find('.js-note-text').val()),
       formAction: $form.attr('action'),
     };
-    };
+  }
 
   /**
    * Identify if comment has any quick actions
    */
-    Notes.prototype.hasQuickActions = function(formContent) {
+  hasQuickActions(formContent) {
     return REGEX_QUICK_ACTIONS.test(formContent);
-    };
+  }
 
   /**
    * Remove quick actions and leave comment with pure message
    */
-    Notes.prototype.stripQuickActions = function(formContent) {
+  stripQuickActions(formContent) {
     return formContent.replace(REGEX_QUICK_ACTIONS, '').trim();
-    };
+  }
 
   /**
    * Gets appropriate description from quick actions found in provided `formContent`
    */
-    Notes.prototype.getQuickActionDescription = function (formContent, availableQuickActions = []) {
+  getQuickActionDescription(formContent, availableQuickActions = []) {
     let tempFormContent;
 
     // Identify executed quick actions from `formContent`
@@ -1259,7 +1242,7 @@ const normalizeNewlines = function(str) {
     }
 
     return tempFormContent;
-    };
+  }
 
   /**
    * Create placeholder note DOM element populated with comment body
@@ -1267,7 +1250,7 @@ const normalizeNewlines = function(str) {
    * Once comment is _actually_ posted on server, we will have final element
    * in response that we will show in place of this temporary element.
    */
-    Notes.prototype.createPlaceholderNote = function ({ formContent, uniqueId, isDiscussionNote, currentUsername, currentUserFullname, currentUserAvatar }) {
+  createPlaceholderNote({ formContent, uniqueId, isDiscussionNote, currentUsername, currentUserFullname, currentUserAvatar }) {
     const discussionClass = isDiscussionNote ? 'discussion' : '';
     const $tempNote = $(
       `<li id="${uniqueId}" class="note being-posted fade-in-half timeline-entry">
@@ -1297,12 +1280,12 @@ const normalizeNewlines = function(str) {
     );
 
     return $tempNote;
-    };
+  }
 
   /**
    * Create Placeholder System Note DOM element populated with quick action description
    */
-    Notes.prototype.createPlaceholderSystemNote = function ({ formContent, uniqueId }) {
+  createPlaceholderSystemNote({ formContent, uniqueId }) {
     const $tempNote = $(
       `<li id="${uniqueId}" class="note system-note timeline-entry being-posted fade-in-half">
          <div class="timeline-entry-inner">
@@ -1314,7 +1297,7 @@ const normalizeNewlines = function(str) {
     );
 
     return $tempNote;
-    };
+  }
 
   /**
    * This method does following tasks step-by-step whenever a new comment
@@ -1335,7 +1318,7 @@ const normalizeNewlines = function(str) {
    *        1. Remove placeholder element
    *        2. Show error Flash message about failure
    */
-    Notes.prototype.postComment = function(e) {
+  postComment(e) {
     e.preventDefault();
 
     // Get Form metadata
@@ -1471,7 +1454,7 @@ const normalizeNewlines = function(str) {
       });
 
     return $closeBtn.text($closeBtn.data('original-text'));
-    };
+  }
 
   /**
    * This method does following tasks step-by-step whenever an existing comment
@@ -1486,7 +1469,7 @@ const normalizeNewlines = function(str) {
    *        1. Revert Note element to original content
    *        2. Show error Flash message about failure
    */
-    Notes.prototype.updateComment = function(e) {
+  updateComment(e) {
     e.preventDefault();
 
     // Get Form metadata
@@ -1524,8 +1507,7 @@ const normalizeNewlines = function(str) {
       });
 
     return $closeBtn.text($closeBtn.data('original-text'));
-    };
+  }
+}
 
-    return Notes;
-  })();
-}).call(window);
+window.Notes = Notes;