Merge branch 'master' into experimental-top-nav

24 files changed, 1954 insertions, 1859 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index adb45b0606d..ebe722061d7 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 /* global Flash */
 
 import Cookies from 'js-cookie';
@@ -68,141 +69,140 @@ function renderCategory(name, emojiList, opts = {}) {
   `;
 }
 
-function AwardsHandler() {
-  this.eventListeners = [];
-  this.aliases = emojiAliases;
-  // If the user shows intent let's pre-build the menu
-  this.registerEventListener('one', $(document), 'mouseenter focus', '.js-add-award', 'mouseenter focus', () => {
-    const $menu = $('.emoji-menu');
-    if ($menu.length === 0) {
-      requestAnimationFrame(() => {
-        this.createEmojiMenu();
-      });
-    }
-    // Prebuild the categoryMap
-    categoryMap = categoryMap || buildCategoryMap();
-  });
-  this.registerEventListener('on', $(document), 'click', '.js-add-award', (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    this.showEmojiMenu($(e.currentTarget));
-  });
+export default class AwardsHandler {
+  constructor() {
+    this.eventListeners = [];
+    this.aliases = emojiAliases;
+    // If the user shows intent let's pre-build the menu
+    this.registerEventListener('one', $(document), 'mouseenter focus', '.js-add-award', 'mouseenter focus', () => {
+      const $menu = $('.emoji-menu');
+      if ($menu.length === 0) {
+        requestAnimationFrame(() => {
+          this.createEmojiMenu();
+        });
+      }
+      // Prebuild the categoryMap
+      categoryMap = categoryMap || buildCategoryMap();
+    });
+    this.registerEventListener('on', $(document), 'click', '.js-add-award', (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this.showEmojiMenu($(e.currentTarget));
+    });
 
-  this.registerEventListener('on', $('html'), 'click', (e) => {
-    const $target = $(e.target);
-    if (!$target.closest('.emoji-menu-content').length) {
-      $('.js-awards-block.current').removeClass('current');
-    }
-    if (!$target.closest('.emoji-menu').length) {
-      if ($('.emoji-menu').is(':visible')) {
-        $('.js-add-award.is-active').removeClass('is-active');
-        $('.emoji-menu').removeClass('is-visible');
+    this.registerEventListener('on', $('html'), 'click', (e) => {
+      const $target = $(e.target);
+      if (!$target.closest('.emoji-menu-content').length) {
+        $('.js-awards-block.current').removeClass('current');
       }
-    }
-  });
-  this.registerEventListener('on', $(document), 'click', '.js-emoji-btn', (e) => {
-    e.preventDefault();
-    const $target = $(e.currentTarget);
-    const $glEmojiElement = $target.find('gl-emoji');
-    const $spriteIconElement = $target.find('.icon');
-    const emoji = ($glEmojiElement.length ? $glEmojiElement : $spriteIconElement).data('name');
-
-    $target.closest('.js-awards-block').addClass('current');
-    this.addAward(this.getVotesBlock(), this.getAwardUrl(), emoji);
-  });
-}
+      if (!$target.closest('.emoji-menu').length) {
+        if ($('.emoji-menu').is(':visible')) {
+          $('.js-add-award.is-active').removeClass('is-active');
+          $('.emoji-menu').removeClass('is-visible');
+        }
+      }
+    });
+    this.registerEventListener('on', $(document), 'click', '.js-emoji-btn', (e) => {
+      e.preventDefault();
+      const $target = $(e.currentTarget);
+      const $glEmojiElement = $target.find('gl-emoji');
+      const $spriteIconElement = $target.find('.icon');
+      const emoji = ($glEmojiElement.length ? $glEmojiElement : $spriteIconElement).data('name');
+
+      $target.closest('.js-awards-block').addClass('current');
+      this.addAward(this.getVotesBlock(), this.getAwardUrl(), emoji);
+    });
+  }
 
-AwardsHandler.prototype.registerEventListener = function registerEventListener(method = 'on', element, ...args) {
-  element[method].call(element, ...args);
-  this.eventListeners.push({
-    element,
-    args,
-  });
-};
+  registerEventListener(method = 'on', element, ...args) {
+    element[method].call(element, ...args);
+    this.eventListeners.push({
+      element,
+      args,
+    });
+  }
 
-AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
-  if ($addBtn.hasClass('js-note-emoji')) {
-    $addBtn.closest('.note').find('.js-awards-block').addClass('current');
-  } else {
-    $addBtn.closest('.js-awards-block').addClass('current');
-  }
-
-  const $menu = $('.emoji-menu');
-  const $thumbsBtn = $menu.find('[data-name="thumbsup"], [data-name="thumbsdown"]').parent();
-  const $userAuthored = this.isUserAuthored($addBtn);
-  if ($menu.length) {
-    if ($menu.is('.is-visible')) {
-      $addBtn.removeClass('is-active');
-      $menu.removeClass('is-visible');
-      $('.js-emoji-menu-search').blur();
+  showEmojiMenu($addBtn) {
+    if ($addBtn.hasClass('js-note-emoji')) {
+      $addBtn.closest('.note').find('.js-awards-block').addClass('current');
     } else {
-      $addBtn.addClass('is-active');
-      this.positionMenu($menu, $addBtn);
-      $menu.addClass('is-visible');
-      $('.js-emoji-menu-search').focus();
+      $addBtn.closest('.js-awards-block').addClass('current');
     }
-  } else {
-    $addBtn.addClass('is-loading is-active');
-    this.createEmojiMenu(() => {
-      const $createdMenu = $('.emoji-menu');
-      $addBtn.removeClass('is-loading');
-      this.positionMenu($createdMenu, $addBtn);
-      return setTimeout(() => {
-        $createdMenu.addClass('is-visible');
+
+    const $menu = $('.emoji-menu');
+    const $thumbsBtn = $menu.find('[data-name="thumbsup"], [data-name="thumbsdown"]').parent();
+    const $userAuthored = this.isUserAuthored($addBtn);
+    if ($menu.length) {
+      if ($menu.is('.is-visible')) {
+        $addBtn.removeClass('is-active');
+        $menu.removeClass('is-visible');
+        $('.js-emoji-menu-search').blur();
+      } else {
+        $addBtn.addClass('is-active');
+        this.positionMenu($menu, $addBtn);
+        $menu.addClass('is-visible');
         $('.js-emoji-menu-search').focus();
-      }, 200);
-    });
+      }
+    } else {
+      $addBtn.addClass('is-loading is-active');
+      this.createEmojiMenu(() => {
+        const $createdMenu = $('.emoji-menu');
+        $addBtn.removeClass('is-loading');
+        this.positionMenu($createdMenu, $addBtn);
+        return setTimeout(() => {
+          $createdMenu.addClass('is-visible');
+          $('.js-emoji-menu-search').focus();
+        }, 200);
+      });
+    }
+
+    $thumbsBtn.toggleClass('disabled', $userAuthored);
   }
 
-  $thumbsBtn.toggleClass('disabled', $userAuthored);
-};
+  // Create the emoji menu with the first category of emojis.
+  // Then render the remaining categories of emojis one by one to avoid jank.
+  createEmojiMenu(callback) {
+    if (this.isCreatingEmojiMenu) {
+      return;
+    }
+    this.isCreatingEmojiMenu = true;
 
-// Create the emoji menu with the first category of emojis.
-// Then render the remaining categories of emojis one by one to avoid jank.
-AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) {
-  if (this.isCreatingEmojiMenu) {
-    return;
-  }
-  this.isCreatingEmojiMenu = true;
-
-  // Render the first category
-  categoryMap = categoryMap || buildCategoryMap();
-  const categoryNameKey = Object.keys(categoryMap)[0];
-  const emojisInCategory = categoryMap[categoryNameKey];
-  const firstCategory = renderCategory(categoryLabelMap[categoryNameKey], emojisInCategory);
-
-  // Render the frequently used
-  const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
-  let frequentlyUsedCatgegory = '';
-  if (frequentlyUsedEmojis.length > 0) {
-    frequentlyUsedCatgegory = renderCategory('Frequently used', frequentlyUsedEmojis, {
-      menuListClass: 'frequent-emojis',
-    });
-  }
+    // Render the first category
+    categoryMap = categoryMap || buildCategoryMap();
+    const categoryNameKey = Object.keys(categoryMap)[0];
+    const emojisInCategory = categoryMap[categoryNameKey];
+    const firstCategory = renderCategory(categoryLabelMap[categoryNameKey], emojisInCategory);
+
+    // Render the frequently used
+    const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
+    let frequentlyUsedCatgegory = '';
+    if (frequentlyUsedEmojis.length > 0) {
+      frequentlyUsedCatgegory = renderCategory('Frequently used', frequentlyUsedEmojis, {
+        menuListClass: 'frequent-emojis',
+      });
+    }
 
-  const emojiMenuMarkup = `
-    <div class="emoji-menu">
-      <input type="text" name="emoji-menu-search" value="" class="js-emoji-menu-search emoji-search search-input form-control" placeholder="Search emoji" />
+    const emojiMenuMarkup = `
+      <div class="emoji-menu">
+        <input type="text" name="emoji-menu-search" value="" class="js-emoji-menu-search emoji-search search-input form-control" placeholder="Search emoji" />
 
-      <div class="emoji-menu-content">
-        ${frequentlyUsedCatgegory}
-        ${firstCategory}
+        <div class="emoji-menu-content">
+          ${frequentlyUsedCatgegory}
+          ${firstCategory}
+        </div>
       </div>
-    </div>
-  `;
+    `;
 
-  document.body.insertAdjacentHTML('beforeend', emojiMenuMarkup);
+    document.body.insertAdjacentHTML('beforeend', emojiMenuMarkup);
 
-  this.addRemainingEmojiMenuCategories();
-  this.setupSearch();
-  if (callback) {
-    callback();
+    this.addRemainingEmojiMenuCategories();
+    this.setupSearch();
+    if (callback) {
+      callback();
+    }
   }
-};
 
-AwardsHandler
-  .prototype
-  .addRemainingEmojiMenuCategories = function addRemainingEmojiMenuCategories() {
+  addRemainingEmojiMenuCategories() {
     if (this.isAddingRemainingEmojiMenuCategories) {
       return;
     }
@@ -243,176 +243,174 @@ AwardsHandler
       emojiContentElement.insertAdjacentHTML('beforeend', '<p>We encountered an error while adding the remaining categories</p>');
       throw new Error(`Error occurred in addRemainingEmojiMenuCategories: ${err.message}`);
     });
-  };
-
-AwardsHandler.prototype.positionMenu = function positionMenu($menu, $addBtn) {
-  const position = $addBtn.data('position');
-  // The menu could potentially be off-screen or in a hidden overflow element
-  // So we position the element absolute in the body
-  const css = {
-    top: `${$addBtn.offset().top + $addBtn.outerHeight()}px`,
-  };
-  if (position === 'right') {
-    css.left = `${($addBtn.offset().left - $menu.outerWidth()) + 20}px`;
-    $menu.addClass('is-aligned-right');
-  } else {
-    css.left = `${$addBtn.offset().left}px`;
-    $menu.removeClass('is-aligned-right');
-  }
-  return $menu.css(css);
-};
-
-AwardsHandler.prototype.addAward = function addAward(
-  votesBlock,
-  awardUrl,
-  emoji,
-  checkMutuality,
-  callback,
-) {
-  const normalizedEmoji = this.normalizeEmojiName(emoji);
-  const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
-  this.postEmoji($emojiButton, awardUrl, normalizedEmoji, () => {
-    this.addAwardToEmojiBar(votesBlock, normalizedEmoji, checkMutuality);
-    return typeof callback === 'function' ? callback() : undefined;
-  });
-  $('.emoji-menu').removeClass('is-visible');
-  $('.js-add-award.is-active').removeClass('is-active');
-};
+  }
 
-AwardsHandler.prototype.addAwardToEmojiBar = function addAwardToEmojiBar(
-  votesBlock,
-  emoji,
-  checkForMutuality,
-) {
-  if (checkForMutuality || checkForMutuality === null) {
-    this.checkMutuality(votesBlock, emoji);
-  }
-  this.addEmojiToFrequentlyUsedList(emoji);
-  const normalizedEmoji = this.normalizeEmojiName(emoji);
-  const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
-  if ($emojiButton.length > 0) {
-    if (this.isActive($emojiButton)) {
-      this.decrementCounter($emojiButton, normalizedEmoji);
+  positionMenu($menu, $addBtn) {
+    const position = $addBtn.data('position');
+    // The menu could potentially be off-screen or in a hidden overflow element
+    // So we position the element absolute in the body
+    const css = {
+      top: `${$addBtn.offset().top + $addBtn.outerHeight()}px`,
+    };
+    if (position === 'right') {
+      css.left = `${($addBtn.offset().left - $menu.outerWidth()) + 20}px`;
+      $menu.addClass('is-aligned-right');
     } else {
-      const counter = $emojiButton.find('.js-counter');
-      counter.text(parseInt(counter.text(), 10) + 1);
-      $emojiButton.addClass('active');
-      this.addYouToUserList(votesBlock, normalizedEmoji);
-      this.animateEmoji($emojiButton);
+      css.left = `${$addBtn.offset().left}px`;
+      $menu.removeClass('is-aligned-right');
     }
-  } else {
-    votesBlock.removeClass('hidden');
-    this.createEmoji(votesBlock, normalizedEmoji);
+    return $menu.css(css);
   }
-};
 
-AwardsHandler.prototype.getVotesBlock = function getVotesBlock() {
-  const currentBlock = $('.js-awards-block.current');
-  let resultantVotesBlock = currentBlock;
-  if (currentBlock.length === 0) {
-    resultantVotesBlock = $('.js-awards-block').eq(0);
+  addAward(
+    votesBlock,
+    awardUrl,
+    emoji,
+    checkMutuality,
+    callback,
+  ) {
+    const normalizedEmoji = this.normalizeEmojiName(emoji);
+    const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
+    this.postEmoji($emojiButton, awardUrl, normalizedEmoji, () => {
+      this.addAwardToEmojiBar(votesBlock, normalizedEmoji, checkMutuality);
+      return typeof callback === 'function' ? callback() : undefined;
+    });
+    $('.emoji-menu').removeClass('is-visible');
+    $('.js-add-award.is-active').removeClass('is-active');
   }
 
-  return resultantVotesBlock;
-};
+  addAwardToEmojiBar(
+    votesBlock,
+    emoji,
+    checkForMutuality,
+  ) {
+    if (checkForMutuality || checkForMutuality === null) {
+      this.checkMutuality(votesBlock, emoji);
+    }
+    this.addEmojiToFrequentlyUsedList(emoji);
+    const normalizedEmoji = this.normalizeEmojiName(emoji);
+    const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
+    if ($emojiButton.length > 0) {
+      if (this.isActive($emojiButton)) {
+        this.decrementCounter($emojiButton, normalizedEmoji);
+      } else {
+        const counter = $emojiButton.find('.js-counter');
+        counter.text(parseInt(counter.text(), 10) + 1);
+        $emojiButton.addClass('active');
+        this.addYouToUserList(votesBlock, normalizedEmoji);
+        this.animateEmoji($emojiButton);
+      }
+    } else {
+      votesBlock.removeClass('hidden');
+      this.createEmoji(votesBlock, normalizedEmoji);
+    }
+  }
 
-AwardsHandler.prototype.getAwardUrl = function getAwardUrl() {
-  return this.getVotesBlock().data('award-url');
-};
+  getVotesBlock() {
+    const currentBlock = $('.js-awards-block.current');
+    let resultantVotesBlock = currentBlock;
+    if (currentBlock.length === 0) {
+      resultantVotesBlock = $('.js-awards-block').eq(0);
+    }
+
+    return resultantVotesBlock;
+  }
 
-AwardsHandler.prototype.checkMutuality = function checkMutuality(votesBlock, emoji) {
-  const awardUrl = this.getAwardUrl();
-  if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
-    const mutualVote = emoji === 'thumbsup' ? 'thumbsdown' : 'thumbsup';
-    const $emojiButton = votesBlock.find(`[data-name="${mutualVote}"]`).parent();
-    const isAlreadyVoted = $emojiButton.hasClass('active');
-    if (isAlreadyVoted) {
-      this.addAward(votesBlock, awardUrl, mutualVote, false);
+  getAwardUrl() {
+    return this.getVotesBlock().data('award-url');
+  }
+
+  checkMutuality(votesBlock, emoji) {
+    const awardUrl = this.getAwardUrl();
+    if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
+      const mutualVote = emoji === 'thumbsup' ? 'thumbsdown' : 'thumbsup';
+      const $emojiButton = votesBlock.find(`[data-name="${mutualVote}"]`).parent();
+      const isAlreadyVoted = $emojiButton.hasClass('active');
+      if (isAlreadyVoted) {
+        this.addAward(votesBlock, awardUrl, mutualVote, false);
+      }
     }
   }
-};
 
-AwardsHandler.prototype.isActive = function isActive($emojiButton) {
-  return $emojiButton.hasClass('active');
-};
+  isActive($emojiButton) {
+    return $emojiButton.hasClass('active');
+  }
 
-AwardsHandler.prototype.isUserAuthored = function isUserAuthored($button) {
-  return $button.hasClass('js-user-authored');
-};
+  isUserAuthored($button) {
+    return $button.hasClass('js-user-authored');
+  }
 
-AwardsHandler.prototype.decrementCounter = function decrementCounter($emojiButton, emoji) {
-  const counter = $('.js-counter', $emojiButton);
-  const counterNumber = parseInt(counter.text(), 10);
-  if (counterNumber > 1) {
-    counter.text(counterNumber - 1);
-    this.removeYouFromUserList($emojiButton);
-  } else if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
-    $emojiButton.tooltip('destroy');
-    counter.text('0');
-    this.removeYouFromUserList($emojiButton);
-    if ($emojiButton.parents('.note').length) {
+  decrementCounter($emojiButton, emoji) {
+    const counter = $('.js-counter', $emojiButton);
+    const counterNumber = parseInt(counter.text(), 10);
+    if (counterNumber > 1) {
+      counter.text(counterNumber - 1);
+      this.removeYouFromUserList($emojiButton);
+    } else if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
+      $emojiButton.tooltip('destroy');
+      counter.text('0');
+      this.removeYouFromUserList($emojiButton);
+      if ($emojiButton.parents('.note').length) {
+        this.removeEmoji($emojiButton);
+      }
+    } else {
       this.removeEmoji($emojiButton);
     }
-  } else {
-    this.removeEmoji($emojiButton);
+    return $emojiButton.removeClass('active');
   }
-  return $emojiButton.removeClass('active');
-};
 
-AwardsHandler.prototype.removeEmoji = function removeEmoji($emojiButton) {
-  $emojiButton.tooltip('destroy');
-  $emojiButton.remove();
-  const $votesBlock = this.getVotesBlock();
-  if ($votesBlock.find('.js-emoji-btn').length === 0) {
-    $votesBlock.addClass('hidden');
+  removeEmoji($emojiButton) {
+    $emojiButton.tooltip('destroy');
+    $emojiButton.remove();
+    const $votesBlock = this.getVotesBlock();
+    if ($votesBlock.find('.js-emoji-btn').length === 0) {
+      $votesBlock.addClass('hidden');
+    }
   }
-};
-
-AwardsHandler.prototype.getAwardTooltip = function getAwardTooltip($awardBlock) {
-  return $awardBlock.attr('data-original-title') || $awardBlock.attr('data-title') || '';
-};
 
-AwardsHandler.prototype.toSentence = function toSentence(list) {
-  let sentence;
-  if (list.length <= 2) {
-    sentence = list.join(' and ');
-  } else {
-    sentence = `${list.slice(0, -1).join(', ')}, and ${list[list.length - 1]}`;
+  getAwardTooltip($awardBlock) {
+    return $awardBlock.attr('data-original-title') || $awardBlock.attr('data-title') || '';
   }
 
-  return sentence;
-};
+  toSentence(list) {
+    let sentence;
+    if (list.length <= 2) {
+      sentence = list.join(' and ');
+    } else {
+      sentence = `${list.slice(0, -1).join(', ')}, and ${list[list.length - 1]}`;
+    }
 
-AwardsHandler.prototype.removeYouFromUserList = function removeYouFromUserList($emojiButton) {
-  const awardBlock = $emojiButton;
-  const originalTitle = this.getAwardTooltip(awardBlock);
-  const authors = originalTitle.split(FROM_SENTENCE_REGEX);
-  authors.splice(authors.indexOf('You'), 1);
-  return awardBlock
-    .closest('.js-emoji-btn')
-    .removeData('title')
-    .removeAttr('data-title')
-    .removeAttr('data-original-title')
-    .attr('title', this.toSentence(authors))
-    .tooltip('fixTitle');
-};
+    return sentence;
+  }
 
-AwardsHandler.prototype.addYouToUserList = function addYouToUserList(votesBlock, emoji) {
-  const awardBlock = this.findEmojiIcon(votesBlock, emoji).parent();
-  const origTitle = this.getAwardTooltip(awardBlock);
-  let users = [];
-  if (origTitle) {
-    users = origTitle.trim().split(FROM_SENTENCE_REGEX);
-  }
-  users.unshift('You');
-  return awardBlock
-    .attr('title', this.toSentence(users))
-    .tooltip('fixTitle');
-};
+  removeYouFromUserList($emojiButton) {
+    const awardBlock = $emojiButton;
+    const originalTitle = this.getAwardTooltip(awardBlock);
+    const authors = originalTitle.split(FROM_SENTENCE_REGEX);
+    authors.splice(authors.indexOf('You'), 1);
+    return awardBlock
+      .closest('.js-emoji-btn')
+      .removeData('title')
+      .removeAttr('data-title')
+      .removeAttr('data-original-title')
+      .attr('title', this.toSentence(authors))
+      .tooltip('fixTitle');
+  }
+
+  addYouToUserList(votesBlock, emoji) {
+    const awardBlock = this.findEmojiIcon(votesBlock, emoji).parent();
+    const origTitle = this.getAwardTooltip(awardBlock);
+    let users = [];
+    if (origTitle) {
+      users = origTitle.trim().split(FROM_SENTENCE_REGEX);
+    }
+    users.unshift('You');
+    return awardBlock
+      .attr('title', this.toSentence(users))
+      .tooltip('fixTitle');
+  }
 
-AwardsHandler
-  .prototype
-  .createAwardButtonForVotesBlock = function createAwardButtonForVotesBlock(votesBlock, emojiName) {
+  createAwardButtonForVotesBlock(votesBlock, emojiName) {
     const buttonHtml = `
       <button class="btn award-control js-emoji-btn has-tooltip active" title="You" data-placement="bottom">
         ${glEmojiTag(emojiName)}
@@ -424,144 +422,141 @@ AwardsHandler
     this.animateEmoji($emojiButton);
     $('.award-control').tooltip();
     votesBlock.removeClass('current');
-  };
+  }
 
-AwardsHandler.prototype.animateEmoji = function animateEmoji($emoji) {
-  const className = 'pulse animated once short';
-  $emoji.addClass(className);
+  animateEmoji($emoji) {
+    const className = 'pulse animated once short';
+    $emoji.addClass(className);
 
-  this.registerEventListener('on', $emoji, animationEndEventString, (e) => {
-    $(e.currentTarget).removeClass(className);
-  });
-};
+    this.registerEventListener('on', $emoji, animationEndEventString, (e) => {
+      $(e.currentTarget).removeClass(className);
+    });
+  }
 
-AwardsHandler.prototype.createEmoji = function createEmoji(votesBlock, emoji) {
-  if ($('.emoji-menu').length) {
-    this.createAwardButtonForVotesBlock(votesBlock, emoji);
+  createEmoji(votesBlock, emoji) {
+    if ($('.emoji-menu').length) {
+      this.createAwardButtonForVotesBlock(votesBlock, emoji);
+    }
+    this.createEmojiMenu(() => {
+      this.createAwardButtonForVotesBlock(votesBlock, emoji);
+    });
   }
-  this.createEmojiMenu(() => {
-    this.createAwardButtonForVotesBlock(votesBlock, emoji);
-  });
-};
 
-AwardsHandler.prototype.postEmoji = function postEmoji($emojiButton, awardUrl, emoji, callback) {
-  if (this.isUserAuthored($emojiButton)) {
-    this.userAuthored($emojiButton);
-  } else {
-    $.post(awardUrl, {
-      name: emoji,
-    }, (data) => {
-      if (data.ok) {
-        callback();
-      }
-    }).fail(() => new Flash('Something went wrong on our end.'));
+  postEmoji($emojiButton, awardUrl, emoji, callback) {
+    if (this.isUserAuthored($emojiButton)) {
+      this.userAuthored($emojiButton);
+    } else {
+      $.post(awardUrl, {
+        name: emoji,
+      }, (data) => {
+        if (data.ok) {
+          callback();
+        }
+      }).fail(() => new Flash('Something went wrong on our end.'));
+    }
   }
-};
 
-AwardsHandler.prototype.findEmojiIcon = function findEmojiIcon(votesBlock, emoji) {
-  return votesBlock.find(`.js-emoji-btn [data-name="${emoji}"]`);
-};
+  findEmojiIcon(votesBlock, emoji) {
+    return votesBlock.find(`.js-emoji-btn [data-name="${emoji}"]`);
+  }
 
-AwardsHandler.prototype.userAuthored = function userAuthored($emojiButton) {
-  const oldTitle = this.getAwardTooltip($emojiButton);
-  const newTitle = 'You cannot vote on your own issue, MR and note';
-  gl.utils.updateTooltipTitle($emojiButton, newTitle).tooltip('show');
-  // Restore tooltip back to award list
-  return setTimeout(() => {
-    $emojiButton.tooltip('hide');
-    gl.utils.updateTooltipTitle($emojiButton, oldTitle);
-  }, 2800);
-};
+  userAuthored($emojiButton) {
+    const oldTitle = this.getAwardTooltip($emojiButton);
+    const newTitle = 'You cannot vote on your own issue, MR and note';
+    gl.utils.updateTooltipTitle($emojiButton, newTitle).tooltip('show');
+    // Restore tooltip back to award list
+    return setTimeout(() => {
+      $emojiButton.tooltip('hide');
+      gl.utils.updateTooltipTitle($emojiButton, oldTitle);
+    }, 2800);
+  }
 
-AwardsHandler.prototype.scrollToAwards = function scrollToAwards() {
-  const options = {
-    scrollTop: $('.awards').offset().top - 110,
-  };
-  return $('body, html').animate(options, 200);
-};
+  scrollToAwards() {
+    const options = {
+      scrollTop: $('.awards').offset().top - 110,
+    };
+    return $('body, html').animate(options, 200);
+  }
 
-AwardsHandler.prototype.normalizeEmojiName = function normalizeEmojiName(emoji) {
-  return Object.prototype.hasOwnProperty.call(this.aliases, emoji) ? this.aliases[emoji] : emoji;
-};
+  normalizeEmojiName(emoji) {
+    return Object.prototype.hasOwnProperty.call(this.aliases, emoji) ? this.aliases[emoji] : emoji;
+  }
 
-AwardsHandler
-  .prototype
-  .addEmojiToFrequentlyUsedList = function addEmojiToFrequentlyUsedList(emoji) {
+  addEmojiToFrequentlyUsedList(emoji) {
     if (isEmojiNameValid(emoji)) {
       this.frequentlyUsedEmojis = _.uniq(this.getFrequentlyUsedEmojis().concat(emoji));
       Cookies.set('frequently_used_emojis', this.frequentlyUsedEmojis.join(','), { expires: 365 });
     }
-  };
-
-AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmojis() {
-  return this.frequentlyUsedEmojis || (() => {
-    const frequentlyUsedEmojis = _.uniq((Cookies.get('frequently_used_emojis') || '').split(','));
-    this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter(
-      inputName => isEmojiNameValid(inputName),
-    );
+  }
 
-    return this.frequentlyUsedEmojis;
-  })();
-};
+  getFrequentlyUsedEmojis() {
+    return this.frequentlyUsedEmojis || (() => {
+      const frequentlyUsedEmojis = _.uniq((Cookies.get('frequently_used_emojis') || '').split(','));
+      this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter(
+        inputName => isEmojiNameValid(inputName),
+      );
 
-AwardsHandler.prototype.setupSearch = function setupSearch() {
-  const $search = $('.js-emoji-menu-search');
+      return this.frequentlyUsedEmojis;
+    })();
+  }
 
-  this.registerEventListener('on', $search, 'input', (e) => {
-    const term = $(e.target).val().trim();
-    this.searchEmojis(term);
-  });
+  setupSearch() {
+    const $search = $('.js-emoji-menu-search');
 
-  const $menu = $('.emoji-menu');
-  this.registerEventListener('on', $menu, transitionEndEventString, (e) => {
-    if (e.target === e.currentTarget) {
-      // Clear the search
-      this.searchEmojis('');
-    }
-  });
-};
+    this.registerEventListener('on', $search, 'input', (e) => {
+      const term = $(e.target).val().trim();
+      this.searchEmojis(term);
+    });
 
-AwardsHandler.prototype.searchEmojis = function searchEmojis(term) {
-  const $search = $('.js-emoji-menu-search');
-  $search.val(term);
-
-  // Clean previous search results
-  $('ul.emoji-menu-search, h5.emoji-search-title').remove();
-  if (term.length > 0) {
-    // Generate a search result block
-    const h5 = $('<h5 class="emoji-search-title"/>').text('Search results');
-    const foundEmojis = this.findMatchingEmojiElements(term).show();
-    const ul = $('<ul>').addClass('emoji-menu-list emoji-menu-search').append(foundEmojis);
-    $('.emoji-menu-content ul, .emoji-menu-content h5').hide();
-    $('.emoji-menu-content').append(h5).append(ul);
-  } else {
-    $('.emoji-menu-content').children().show();
+    const $menu = $('.emoji-menu');
+    this.registerEventListener('on', $menu, transitionEndEventString, (e) => {
+      if (e.target === e.currentTarget) {
+        // Clear the search
+        this.searchEmojis('');
+      }
+    });
   }
-};
-
-AwardsHandler.prototype.findMatchingEmojiElements = function findMatchingEmojiElements(term) {
-  const safeTerm = term.toLowerCase();
 
-  const namesMatchingAlias = [];
-  Object.keys(emojiAliases).forEach((alias) => {
-    if (alias.indexOf(safeTerm) >= 0) {
-      namesMatchingAlias.push(emojiAliases[alias]);
+  searchEmojis(term) {
+    const $search = $('.js-emoji-menu-search');
+    $search.val(term);
+
+    // Clean previous search results
+    $('ul.emoji-menu-search, h5.emoji-search-title').remove();
+    if (term.length > 0) {
+      // Generate a search result block
+      const h5 = $('<h5 class="emoji-search-title"/>').text('Search results');
+      const foundEmojis = this.findMatchingEmojiElements(term).show();
+      const ul = $('<ul>').addClass('emoji-menu-list emoji-menu-search').append(foundEmojis);
+      $('.emoji-menu-content ul, .emoji-menu-content h5').hide();
+      $('.emoji-menu-content').append(h5).append(ul);
+    } else {
+      $('.emoji-menu-content').children().show();
     }
-  });
-  const $matchingElements = namesMatchingAlias.concat(safeTerm)
-    .reduce(
-      ($result, searchTerm) =>
-        $result.add($(`.emoji-menu-list:not(.frequent-emojis) [data-name*="${searchTerm}"]`)),
-      $([]),
-    );
-  return $matchingElements.closest('li').clone();
-};
+  }
 
-AwardsHandler.prototype.destroy = function destroy() {
-  this.eventListeners.forEach((entry) => {
-    entry.element.off.call(entry.element, ...entry.args);
-  });
-  $('.emoji-menu').remove();
-};
+  findMatchingEmojiElements(term) {
+    const safeTerm = term.toLowerCase();
+
+    const namesMatchingAlias = [];
+    Object.keys(emojiAliases).forEach((alias) => {
+      if (alias.indexOf(safeTerm) >= 0) {
+        namesMatchingAlias.push(emojiAliases[alias]);
+      }
+    });
+    const $matchingElements = namesMatchingAlias.concat(safeTerm)
+      .reduce(
+        ($result, searchTerm) =>
+          $result.add($(`.emoji-menu-list:not(.frequent-emojis) [data-name*="${searchTerm}"]`)),
+        $([]),
+      );
+    return $matchingElements.closest('li').clone();
+  }
 
-export default AwardsHandler;
+  destroy() {
+    this.eventListeners.forEach((entry) => {
+      entry.element.off.call(entry.element, ...entry.args);
+    });
+    $('.emoji-menu').remove();
+  }
+}
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js b/app/assets/javascripts/boards/components/board_new_issue.js
index b1c47b09c35..4af8b0c7713 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js
+++ b/app/assets/javascripts/boards/components/board_new_issue.js
@@ -17,7 +17,7 @@ export default {
   methods: {
     submit(e) {
       e.preventDefault();
-      if (this.title.trim() === '') return;
+      if (this.title.trim() === '') return Promise.resolve();
 
       this.error = false;
 
@@ -29,7 +29,10 @@ export default {
         assignees: [],
       });
 
-      this.list.newIssue(issue)
+      eventHub.$emit(`scroll-board-list-${this.list.id}`);
+      this.cancel();
+
+      return this.list.newIssue(issue)
         .then(() => {
           // Need this because our jQuery very kindly disables buttons on ALL form submissions
           $(this.$refs.submitButton).enable();
@@ -47,9 +50,6 @@ export default {
           // Show error message
           this.error = true;
         });
-
-      eventHub.$emit(`scroll-board-list-${this.list.id}`);
-      this.cancel();
     },
     cancel() {
       this.title = '';
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index 548de1a4c52..b4b09b3876e 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -112,8 +112,7 @@ class List {
       .then((resp) => {
         const data = resp.json();
         issue.id = data.iid;
-      })
-      .then(() => {
+
         if (this.issuesSize > 1) {
           const moveBeforeIid = this.issues[1].id;
           gl.boardService.moveIssue(issue.id, null, null, null, moveBeforeIid);
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 809c147bf25..b25113e0fc6 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -403,6 +403,14 @@ export default {
       return '';
     },
 
+    displayEnvironmentActions() {
+      return this.hasManualActions ||
+             this.externalURL ||
+             this.monitoringUrl ||
+             this.hasStopAction ||
+             this.canRetry;
+    },
+
     /**
      * Constructs folder URL based on the current location and the folder id.
      *
@@ -535,9 +543,12 @@ export default {
       </span>
     </div>
 
-    <div class="table-section section-30 table-button-footer" role="gridcell">
+    <div
+      v-if="!model.isFolder && displayEnvironmentActions"
+      class="table-section section-30 table-button-footer"
+      role="gridcell">
+
       <div
-        v-if="!model.isFolder"
         class="btn-group table-action-buttons"
         role="group">
 
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 8f547bd8f1f..1425769d2de 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -40,6 +40,10 @@ class FilteredSearchManager {
         return [];
       })
       .then((searches) => {
+        if (!searches) {
+          return;
+        }
+
         // Put any searches that may have come in before
         // we fetched the saved searches ahead of the already saved ones
         const resultantSearches = this.recentSearchesStore.setRecentSearches(
@@ -487,6 +491,7 @@ class FilteredSearchManager {
   }
 
   searchState(e) {
+    e.preventDefault();
     const target = e.currentTarget;
     // remove focus outline after click
     target.blur();
diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js
index f6dc4290fd5..6eab6083e8f 100644
--- a/app/assets/javascripts/groups/stores/groups_store.js
+++ b/app/assets/javascripts/groups/stores/groups_store.js
@@ -47,8 +47,8 @@ export default class GroupsStore {
 
     // Map groups to an object
     groups.map((group) => {
-      mappedGroups[group.id] = group;
-      mappedGroups[group.id].subGroups = {};
+      mappedGroups[`id${group.id}`] = group;
+      mappedGroups[`id${group.id}`].subGroups = {};
       return group;
     });
 
@@ -56,26 +56,27 @@ export default class GroupsStore {
       const currentGroup = mappedGroups[key];
       if (currentGroup.parentId) {
         // If the group is not at the root level, add it to its parent array of subGroups.
-        const findParentGroup = mappedGroups[currentGroup.parentId];
+        const findParentGroup = mappedGroups[`id${currentGroup.parentId}`];
         if (findParentGroup) {
-          mappedGroups[currentGroup.parentId].subGroups[currentGroup.id] = currentGroup;
-          mappedGroups[currentGroup.parentId].isOpen = true; // Expand group if it has subgroups
+          mappedGroups[`id${currentGroup.parentId}`].subGroups[`id${currentGroup.id}`] = currentGroup;
+          mappedGroups[`id${currentGroup.parentId}`].isOpen = true; // Expand group if it has subgroups
         } else if (parentGroup && parentGroup.id === currentGroup.parentId) {
-          tree[currentGroup.id] = currentGroup;
+          tree[`id${currentGroup.id}`] = currentGroup;
         } else {
-          // Means the groups hast no direct parent.
-          // Save for later processing, we will add them to its corresponding base group
+          // No parent found. We save it for later processing
           orphans.push(currentGroup);
+
+          // Add to tree to preserve original order
+          tree[`id${currentGroup.id}`] = currentGroup;
         }
       } else {
-        // If the group is at the root level, add it to first level elements array.
-        tree[currentGroup.id] = currentGroup;
+        // If the group is at the top level, add it to first level elements array.
+        tree[`id${currentGroup.id}`] = currentGroup;
       }
 
       return key;
     });
 
-    // Hopefully this array will be empty for most cases
     if (orphans.length) {
       orphans.map((orphan) => {
         let found = false;
@@ -83,11 +84,23 @@ export default class GroupsStore {
 
         Object.keys(tree).map((key) => {
           const group = tree[key];
-          if (currentOrphan.fullPath.lastIndexOf(group.fullPath) === 0) {
+
+          if (
+           group &&
+           currentOrphan.fullPath.lastIndexOf(group.fullPath) === 0 &&
+           // Make sure the currently selected orphan is not the same as the group
+           // we are checking here otherwise it will end up in an infinite loop
+           currentOrphan.id !== group.id
+           ) {
             group.subGroups[currentOrphan.id] = currentOrphan;
             group.isOpen = true;
             currentOrphan.isOrphan = true;
             found = true;
+
+            // Delete if group was put at the top level. If not the group will be displayed twice.
+            if (tree[`id${currentOrphan.id}`]) {
+              delete tree[`id${currentOrphan.id}`];
+            }
           }
 
           return key;
@@ -95,7 +108,8 @@ export default class GroupsStore {
 
         if (!found) {
           currentOrphan.isOrphan = true;
-          tree[currentOrphan.id] = currentOrphan;
+
+          tree[`id${currentOrphan.id}`] = currentOrphan;
         }
 
         return orphan;
@@ -140,7 +154,7 @@ export default class GroupsStore {
 
   // eslint-disable-next-line class-methods-use-this
   removeGroup(group, collection) {
-    Vue.delete(collection, group.id);
+    Vue.delete(collection, `id${group.id}`);
   }
 
   // eslint-disable-next-line class-methods-use-this
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 8473a81bc88..3d5fb7f441c 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -204,13 +204,7 @@ export default {
       method: 'getData',
       successCallback: (res) => {
         const data = res.json();
-        const shouldUpdate = this.store.stateShouldUpdate(data);
-
         this.store.updateState(data);
-
-        if (this.showForm && (shouldUpdate.title || shouldUpdate.description)) {
-          this.store.formState.lockedWarningVisible = true;
-        }
       },
       errorCallback(err) {
         throw new Error(err);
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index f2b822f3cbb..0c8bd6f1cc3 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -12,6 +12,10 @@ export default class Store {
   }
 
   updateState(data) {
+    if (this.stateShouldUpdate(data)) {
+      this.formState.lockedWarningVisible = true;
+    }
+
     this.state.titleHtml = data.title;
     this.state.titleText = data.title_text;
     this.state.descriptionHtml = data.description;
@@ -23,10 +27,8 @@ export default class Store {
   }
 
   stateShouldUpdate(data) {
-    return {
-      title: this.state.titleText !== data.title_text,
-      description: this.state.descriptionText !== data.description_text,
-    };
+    return this.state.titleText !== data.title_text ||
+      this.state.descriptionText !== data.description_text;
   }
 
   setFormState(state) {
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 2aca86189fd..122ec138c59 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -86,18 +86,25 @@
       // This is required to handle non-unicode characters in hash
       hash = decodeURIComponent(hash);
 
+      var fixedTabs = document.querySelector('.js-tabs-affix');
+      var fixedNav = document.querySelector('.navbar-gitlab');
+
+      var adjustment = 0;
+      if (fixedNav) adjustment -= fixedNav.offsetHeight;
+
       // scroll to user-generated markdown anchor if we cannot find a match
       if (document.getElementById(hash) === null) {
         var target = document.getElementById('user-content-' + hash);
         if (target && target.scrollIntoView) {
           target.scrollIntoView(true);
+          window.scrollBy(0, adjustment);
         }
       } else {
         // only adjust for fixedTabs when not targeting user-generated content
-        var fixedTabs = document.querySelector('.js-tabs-affix');
         if (fixedTabs) {
-          window.scrollBy(0, -fixedTabs.offsetHeight);
+          adjustment -= fixedTabs.offsetHeight;
         }
+        window.scrollBy(0, adjustment);
       }
     };
 
diff --git a/app/assets/javascripts/locale/es/app.js b/app/assets/javascripts/locale/es/app.js
index eafcd15acf9..8d951928849 100644
--- a/app/assets/javascripts/locale/es/app.js
+++ b/app/assets/javascripts/locale/es/app.js
@@ -1 +1 @@
-var locales = locales || {}; locales['es'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-06-15 21:59-0500","Language-Team":"Spanish","Language":"es","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","Last-Translator":"Bob Van Landuyt <bob@gitlab.com>","X-Generator":"Poedit 2.0.2","POT-Creation-Date":"2017-06-15 21:59-0500","lang":"es","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"%{commit_author_link} committed %{commit_timeago}":["%{commit_author_link} cambió %{commit_timeago}"],"About auto deploy":["Acerca del auto despliegue"],"Active":["Activo"],"Activity":["Actividad"],"Add Changelog":["Agregar Changelog"],"Add Contribution guide":["Agregar guía de contribución"],"Add License":["Agregar Licencia"],"Add an SSH key to your profile to pull or push via SSH.":["Agregar una clave SSH a tu perfil para actualizar o enviar a través de SSH."],"Add new directory":["Agregar nuevo directorio"],"Archived project! Repository is read-only":["¡Proyecto archivado! El repositorio es de solo lectura"],"Are you sure you want to delete this pipeline schedule?":["¿Estás seguro que deseas eliminar esta programación del pipeline?"],"Attach a file by drag &amp; drop or %{upload_link}":["Adjunte un archivo arrastrando &amp; soltando o %{upload_link}"],"Branch":["Rama","Ramas"],"Branch <strong>%{branch_name}</strong> was created. To set up auto deploy, choose a GitLab CI Yaml template and commit your changes. %{link_to_autodeploy_doc}":["La rama <strong>%{branch_name}</strong> fue creada. Para configurar el auto despliegue, escoge una plantilla Yaml para GitLab CI y envía tus cambios. %{link_to_autodeploy_doc}"],"Branches":["Ramas"],"Browse files":["Examinar los archivos"],"ByAuthor|by":["por"],"CI configuration":["Configuración de CI"],"Cancel":["Cancelar"],"ChangeTypeActionLabel|Pick into branch":["Escoger en la rama"],"ChangeTypeActionLabel|Revert in branch":["Revertir en la rama"],"ChangeTypeAction|Cherry-pick":["Cherry-pick"],"ChangeTypeAction|Revert":["Revertir"],"Changelog":["Changelog"],"Charts":["Gráficos"],"Cherry-pick this commit":["Escoger este cambio"],"Cherry-pick this merge request":["Escoger esta solicitud de fusión"],"CiStatusLabel|canceled":["cancelado"],"CiStatusLabel|created":["creado"],"CiStatusLabel|failed":["fallido"],"CiStatusLabel|manual action":["acción manual"],"CiStatusLabel|passed":["pasó"],"CiStatusLabel|passed with warnings":["pasó con advertencias"],"CiStatusLabel|pending":["pendiente"],"CiStatusLabel|skipped":["omitido"],"CiStatusLabel|waiting for manual action":["esperando acción manual"],"CiStatusText|blocked":["bloqueado"],"CiStatusText|canceled":["cancelado"],"CiStatusText|created":["creado"],"CiStatusText|failed":["fallado"],"CiStatusText|manual":["manual"],"CiStatusText|passed":["pasó"],"CiStatusText|pending":["pendiente"],"CiStatusText|skipped":["omitido"],"CiStatus|running":["en ejecución"],"Commit":["Cambio","Cambios"],"Commit message":["Mensaje del cambio"],"CommitBoxTitle|Commit":["Cambio"],"CommitMessage|Add %{file_name}":["Agregar %{file_name}"],"Commits":["Cambios"],"Commits|History":["Historial"],"Committed by":["Enviado por"],"Compare":["Comparar"],"Contribution guide":["Guía de contribución"],"Contributors":["Contribuidores"],"Copy URL to clipboard":["Copiar URL al portapapeles"],"Copy commit SHA to clipboard":["Copiar SHA del cambio al portapapeles"],"Create New Directory":["Crear Nuevo Directorio"],"Create directory":["Crear directorio"],"Create empty bare repository":["Crear repositorio vacío"],"Create merge request":["Crear solicitud de fusión"],"Create new...":["Crear nuevo..."],"CreateNewFork|Fork":["Bifurcar"],"CreateTag|Tag":["Etiqueta"],"Cron Timezone":["Zona horaria del Cron"],"Cron syntax":["Sintaxis de Cron"],"Custom notification events":["Eventos de notificaciones personalizadas"],"Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notification_link}.":["Los niveles de notificación personalizados son los mismos que los niveles participantes. Con los niveles de notificación personalizados, también recibirá notificaciones para eventos seleccionados. Para obtener más información, consulte %{notification_link}."],"Cycle Analytics":["Cycle Analytics"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["Cycle Analytics ofrece una visión general de cuánto tiempo tarda en pasar de idea a producción en su proyecto."],"CycleAnalyticsStage|Code":["Código"],"CycleAnalyticsStage|Issue":["Incidencia"],"CycleAnalyticsStage|Plan":["Planificación"],"CycleAnalyticsStage|Production":["Producción"],"CycleAnalyticsStage|Review":["Revisión"],"CycleAnalyticsStage|Staging":["Puesta en escena"],"CycleAnalyticsStage|Test":["Pruebas"],"Define a custom pattern with cron syntax":["Definir un patrón personalizado con la sintaxis de cron"],"Delete":["Eliminar"],"Deploy":["Despliegue","Despliegues"],"Description":["Descripción"],"Directory name":["Nombre del directorio"],"Don't show again":["No mostrar de nuevo"],"Download":["Descargar"],"Download tar":["Descargar tar"],"Download tar.bz2":["Descargar tar.bz2"],"Download tar.gz":["Descargar tar.gz"],"Download zip":["Descargar zip"],"DownloadArtifacts|Download":["Descargar"],"DownloadCommit|Email Patches":["Parches por correo electrónico"],"DownloadCommit|Plain Diff":["Diferencias en texto plano"],"DownloadSource|Download":["Descargar"],"Edit":["Editar"],"Edit Pipeline Schedule %{id}":["Editar Programación del Pipeline %{id}"],"Every day (at 4:00am)":["Todos los días (a las 4:00 am)"],"Every month (on the 1st at 4:00am)":["Todos los meses (el día 1 a las 4:00 am)"],"Every week (Sundays at 4:00am)":["Todas las semanas (domingos a las 4:00 am)"],"Failed to change the owner":["Error al cambiar el propietario"],"Failed to remove the pipeline schedule":["Error al eliminar la programación del pipeline"],"Files":["Archivos"],"Find by path":["Buscar por ruta"],"Find file":["Buscar archivo"],"FirstPushedBy|First":["Primer"],"FirstPushedBy|pushed by":["enviado por"],"Fork":["Bifurcación","Bifurcaciones"],"ForkedFromProjectPath|Forked from":["Bifurcado de"],"From issue creation until deploy to production":["Desde la creación de la incidencia hasta el despliegue a producción"],"From merge request merge until deploy to production":["Desde la integración de la solicitud de fusión hasta el despliegue a producción"],"Go to your fork":["Ir a tu bifurcación"],"GoToYourFork|Fork":["Bifurcación"],"Home":["Inicio"],"Housekeeping successfully started":["Servicio de limpieza iniciado con éxito"],"Import repository":["Importar repositorio"],"Interval Pattern":["Patrón de intervalo"],"Introducing Cycle Analytics":["Introducción a Cycle Analytics"],"LFSStatus|Disabled":["Deshabilitado"],"LFSStatus|Enabled":["Habilitado"],"Last %d day":["Último %d día","Últimos %d días"],"Last Pipeline":["Último Pipeline"],"Last Update":["Última actualización"],"Last commit":["Último cambio"],"Learn more in the":["Más información en la"],"Learn more in the|pipeline schedules documentation":["documentación sobre la programación de pipelines"],"Leave group":["Abandonar grupo"],"Leave project":["Abandonar proyecto"],"Limited to showing %d event at most":["Limitado a mostrar máximo %d evento","Limitado a mostrar máximo %d eventos"],"Median":["Mediana"],"MissingSSHKeyWarningLink|add an SSH key":["agregar una clave SSH"],"New Issue":["Nueva incidencia","Nuevas incidencias"],"New Pipeline Schedule":["Nueva Programación del Pipeline"],"New branch":["Nueva rama"],"New directory":["Nuevo directorio"],"New file":["Nuevo archivo"],"New issue":["Nueva incidencia"],"New merge request":["Nueva solicitud de fusión"],"New schedule":["Nueva programación"],"New snippet":["Nuevo fragmento de código"],"New tag":["Nueva etiqueta"],"No repository":["No hay repositorio"],"No schedules":["No hay programaciones"],"Not available":["No disponible"],"Not enough data":["No hay suficientes datos"],"Notification events":["Eventos de notificación"],"NotificationEvent|Close issue":["Cerrar incidencia"],"NotificationEvent|Close merge request":["Cerrar solicitud de fusión"],"NotificationEvent|Failed pipeline":["Pipeline fallido"],"NotificationEvent|Merge merge request":["Integrar solicitud de fusión"],"NotificationEvent|New issue":["Nueva incidencia"],"NotificationEvent|New merge request":["Nueva solicitud de fusión"],"NotificationEvent|New note":["Nueva nota"],"NotificationEvent|Reassign issue":["Reasignar incidencia"],"NotificationEvent|Reassign merge request":["Reasignar solicitud de fusión"],"NotificationEvent|Reopen issue":["Reabrir incidencia"],"NotificationEvent|Successful pipeline":["Pipeline exitoso"],"NotificationLevel|Custom":["Personalizado"],"NotificationLevel|Disabled":["Deshabilitado"],"NotificationLevel|Global":["Global"],"NotificationLevel|On mention":["Cuando me mencionan"],"NotificationLevel|Participate":["Participación"],"NotificationLevel|Watch":["Vigilancia"],"OfSearchInADropdown|Filter":["Filtrar"],"OpenedNDaysAgo|Opened":["Abierto"],"Options":["Opciones"],"Owner":["Propietario"],"Pipeline":["Pipeline"],"Pipeline Health":["Estado del Pipeline"],"Pipeline Schedule":["Programación del Pipeline"],"Pipeline Schedules":["Programaciones de los Pipelines"],"PipelineSchedules|Activated":["Activado"],"PipelineSchedules|Active":["Activos"],"PipelineSchedules|All":["Todos"],"PipelineSchedules|Inactive":["Inactivos"],"PipelineSchedules|Next Run":["Próxima Ejecución"],"PipelineSchedules|None":["Ninguno"],"PipelineSchedules|Provide a short description for this pipeline":["Proporcione una breve descripción para este pipeline"],"PipelineSchedules|Take ownership":["Tomar posesión"],"PipelineSchedules|Target":["Destino"],"PipelineSheduleIntervalPattern|Custom":["Personalizado"],"Pipeline|with stage":["con etapa"],"Pipeline|with stages":["con etapas"],"Project '%{project_name}' queued for deletion.":["Proyecto ‘%{project_name}’ en cola para eliminación."],"Project '%{project_name}' was successfully created.":["Proyecto ‘%{project_name}’ fue creado satisfactoriamente."],"Project '%{project_name}' was successfully updated.":["Proyecto ‘%{project_name}’ fue actualizado satisfactoriamente."],"Project '%{project_name}' will be deleted.":["Proyecto ‘%{project_name}’ será eliminado."],"Project access must be granted explicitly to each user.":["El acceso al proyecto debe concederse explícitamente a cada usuario."],"Project export could not be deleted.":["No se pudo eliminar la exportación del proyecto."],"Project export has been deleted.":["La exportación del proyecto ha sido eliminada."],"Project export link has expired. Please generate a new export from your project settings.":["El enlace de exportación del proyecto ha caducado. Por favor, genera una nueva exportación desde la configuración del proyecto."],"Project export started. A download link will be sent by email.":["Se inició la exportación del proyecto. Se enviará un enlace de descarga por correo electrónico."],"Project home":["Inicio del proyecto"],"ProjectFeature|Disabled":["Deshabilitada"],"ProjectFeature|Everyone with access":["Todos con acceso"],"ProjectFeature|Only team members":["Solo miembros del equipo"],"ProjectFileTree|Name":["Nombre"],"ProjectLastActivity|Never":["Nunca"],"ProjectLifecycle|Stage":["Etapa"],"ProjectNetworkGraph|Graph":["Historial gráfico"],"Read more":["Leer más"],"Readme":["Léeme"],"RefSwitcher|Branches":["Ramas"],"RefSwitcher|Tags":["Etiquetas"],"Related Commits":["Cambios Relacionados"],"Related Deployed Jobs":["Trabajos Desplegados Relacionados"],"Related Issues":["Incidencias Relacionadas"],"Related Jobs":["Trabajos Relacionados"],"Related Merge Requests":["Solicitudes de fusión Relacionadas"],"Related Merged Requests":["Solicitudes de fusión Relacionadas"],"Remind later":["Recordar después"],"Remove project":["Eliminar proyecto"],"Request Access":["Solicitar acceso"],"Revert this commit":["Revertir este cambio"],"Revert this merge request":["Revertir esta solicitud de fusión"],"Save pipeline schedule":["Guardar programación del pipeline"],"Schedule a new pipeline":["Programar un nuevo pipeline"],"Scheduling Pipelines":["Programación de Pipelines"],"Search branches and tags":["Buscar ramas y etiquetas"],"Select Archive Format":["Seleccionar formato de archivo"],"Select a timezone":["Selecciona una zona horaria"],"Select target branch":["Selecciona una rama de destino"],"Set a password on your account to pull or push via %{protocol}":["Establezca una contraseña en su cuenta para actualizar o enviar a través de %{protocol}"],"Set up CI":["Configurar CI"],"Set up Koding":["Configurar Koding"],"Set up auto deploy":["Configurar auto despliegue"],"SetPasswordToCloneLink|set a password":["establecer una contraseña"],"Showing %d event":["Mostrando %d evento","Mostrando %d eventos"],"Source code":["Código fuente"],"StarProject|Star":["Destacar"],"Start a %{new_merge_request} with these changes":["Iniciar una %{new_merge_request} con estos cambios"],"Switch branch/tag":["Cambiar rama/etiqueta"],"Tag":["Etiqueta","Etiquetas"],"Tags":["Etiquetas"],"Target Branch":["Rama de destino"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["La etapa de desarrollo muestra el tiempo desde el primer cambio hasta la creación de la solicitud de fusión. Los datos serán automáticamente incorporados aquí una vez creada tu primera solicitud de fusión."],"The collection of events added to the data gathered for that stage.":["La colección de eventos agregados a los datos recopilados para esa etapa."],"The fork relationship has been removed.":["La relación con la bifurcación se ha eliminado."],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["La etapa de incidencia muestra el tiempo que toma desde la creación de un tema hasta asignar el tema a un hito, o añadir el tema a una lista en el panel de temas. Empieza a crear temas para ver los datos de esta etapa."],"The phase of the development lifecycle.":["La etapa del ciclo de vida de desarrollo."],"The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user.":["La programación de pipelines ejecuta pipelines en el futuro, repetidamente, para ramas o etiquetas específicas. Los pipelines programados heredarán acceso limitado al proyecto basado en su usuario asociado."],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["La etapa de planificación muestra el tiempo desde el paso anterior hasta el envío de tu primera confirmación. Este tiempo se añadirá automáticamente una vez que usted envíe el primer cambio."],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["La etapa de producción muestra el tiempo total que tarda entre la creación de una incidencia y el despliegue del código a producción. Los datos se añadirán automáticamente una vez haya finalizado por completo el ciclo de idea a producción."],"The project can be accessed by any logged in user.":["El proyecto puede ser accedido por cualquier usuario conectado."],"The project can be accessed without any authentication.":["El proyecto puede accederse sin ninguna autenticación."],"The repository for this project does not exist.":["El repositorio para este proyecto no existe."],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["La etapa de revisión muestra el tiempo desde la creación de la solicitud de fusión hasta que los cambios se fusionaron. Los datos se añadirán automáticamente después de fusionar su primera solicitud de fusión."],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["La etapa de puesta en escena muestra el tiempo entre la fusión y el despliegue de código en el entorno de producción. Los datos se añadirán automáticamente una vez que se despliega a producción por primera vez."],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["La etapa de pruebas muestra el tiempo que GitLab CI toma para ejecutar cada pipeline para la solicitud de fusión relacionada. Los datos se añadirán automáticamente luego de que el primer pipeline termine de ejecutarse."],"The time taken by each data entry gathered by that stage.":["El tiempo utilizado por cada entrada de datos obtenido por esa etapa."],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["El valor en el punto medio de una serie de valores observados. Por ejemplo, entre 3, 5, 9, la mediana es 5. Entre 3, 5, 7, 8, la mediana es (5 + 7) / 2 = 6."],"This means you can not push code until you create an empty repository or import existing one.":["Esto significa que no puede enviar código hasta que cree un repositorio vacío o importe uno existente."],"Time before an issue gets scheduled":["Tiempo antes de que una incidencia sea programada"],"Time before an issue starts implementation":["Tiempo antes de que empieze la implementación de una incidencia"],"Time between merge request creation and merge/close":["Tiempo entre la creación de la solicitud de fusión y la integración o cierre de ésta"],"Time until first merge request":["Tiempo hasta la primera solicitud de fusión"],"Timeago|%s days ago":["hace %s días"],"Timeago|%s days remaining":["%s días restantes"],"Timeago|%s hours remaining":["%s horas restantes"],"Timeago|%s minutes ago":["hace %s minutos"],"Timeago|%s minutes remaining":["%s minutos restantes"],"Timeago|%s months ago":["hace %s meses"],"Timeago|%s months remaining":["%s meses restantes"],"Timeago|%s seconds remaining":["%s segundos restantes"],"Timeago|%s weeks ago":["hace %s semanas"],"Timeago|%s weeks remaining":["%s semanas restantes"],"Timeago|%s years ago":["hace %s años"],"Timeago|%s years remaining":["%s años restantes"],"Timeago|1 day remaining":["1 día restante"],"Timeago|1 hour remaining":["1 hora restante"],"Timeago|1 minute remaining":["1 minuto restante"],"Timeago|1 month remaining":["1 mes restante"],"Timeago|1 week remaining":["1 semana restante"],"Timeago|1 year remaining":["1 año restante"],"Timeago|Past due":["Atrasado"],"Timeago|a day ago":["hace un día"],"Timeago|a month ago":["hace un mes"],"Timeago|a week ago":["hace una semana"],"Timeago|a while":["hace un momento"],"Timeago|a year ago":["hace un año"],"Timeago|about %s hours ago":["hace alrededor de %s horas"],"Timeago|about a minute ago":["hace alrededor de 1 minuto"],"Timeago|about an hour ago":["hace alrededor de 1 hora"],"Timeago|in %s days":["en %s días"],"Timeago|in %s hours":["en %s horas"],"Timeago|in %s minutes":["en %s minutos"],"Timeago|in %s months":["en %s meses"],"Timeago|in %s seconds":["en %s segundos"],"Timeago|in %s weeks":["en %s semanas"],"Timeago|in %s years":["en %s años"],"Timeago|in 1 day":["en 1 día"],"Timeago|in 1 hour":["en 1 hora"],"Timeago|in 1 minute":["en 1 minuto"],"Timeago|in 1 month":["en 1 mes"],"Timeago|in 1 week":["en 1 semana"],"Timeago|in 1 year":["en 1 año"],"Timeago|less than a minute ago":["hace menos de 1 minuto"],"Time|hr":["hr","hrs"],"Time|min":["min","mins"],"Time|s":["s"],"Total Time":["Tiempo Total"],"Total test time for all commits/merges":["Tiempo total de pruebas para todos los cambios o integraciones"],"Unstar":["No Destacar"],"Upload New File":["Subir nuevo archivo"],"Upload file":["Subir archivo"],"Use your global notification setting":["Utiliza tu configuración de notificación global"],"VisibilityLevel|Internal":["Interno"],"VisibilityLevel|Private":["Privado"],"VisibilityLevel|Public":["Público"],"Want to see the data? Please ask an administrator for access.":["¿Quieres ver los datos? Por favor pide acceso al administrador."],"We don't have enough data to show this stage.":["No hay suficientes datos para mostrar en esta etapa."],"Withdraw Access Request":["Retirar Solicitud de Acceso"],"You are going to remove %{project_name_with_namespace}.\\nRemoved project CANNOT be restored!\\nAre you ABSOLUTELY sure?":["Va a eliminar %{project_name_with_namespace}.\\n¡El proyecto eliminado NO puede ser restaurado!\\n¿Estás TOTALMENTE seguro?"],"You are going to remove the fork relationship to source project %{forked_from_project}. Are you ABSOLUTELY sure?":["Vas a eliminar el enlace de la bifurcación con el proyecto original %{forked_from_project}. ¿Estás TOTALMENTE seguro?"],"You are going to transfer %{project_name_with_namespace} to another owner. Are you ABSOLUTELY sure?":["Vas a transferir %{project_name_with_namespace} a otro propietario. ¿Estás TOTALMENTE seguro?"],"You can only add files when you are on a branch":["Solo puedes agregar archivos cuando estás en una rama"],"You must sign in to star a project":["Debes iniciar sesión para destacar un proyecto"],"You need permission.":["Necesitas permisos."],"You will not get any notifications via email":["No recibirás ninguna notificación por correo electrónico"],"You will only receive notifications for the events you choose":["Solo recibirás notificaciones de los eventos que elijas"],"You will only receive notifications for threads you have participated in":["Solo recibirás notificaciones de los temas en los que has participado"],"You will receive notifications for any activity":["Recibirás notificaciones por cualquier actividad"],"You will receive notifications only for comments in which you were @mentioned":["Recibirás notificaciones solo para los comentarios en los que se te mencionó"],"You won't be able to pull or push project code via %{protocol} until you %{set_password_link} on your account":["No podrás actualizar o enviar código al proyecto a través de %{protocol} hasta que %{set_password_link} en tu cuenta"],"You won't be able to pull or push project code via SSH until you %{add_ssh_key_link} to your profile":["No podrás actualizar o enviar código al proyecto a través de SSH hasta que %{add_ssh_key_link} en su perfil"],"Your name":["Tu nombre"],"day":["día","días"],"new merge request":["nueva solicitud de fusión"],"notification emails":["correos electrónicos de notificación"],"parent":["padre","padres"]}}};
\ No newline at end of file
+var locales = locales || {}; locales['es'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-06-21 12:09-0500","Language-Team":"Spanish","Language":"es","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","Last-Translator":"Bob Van Landuyt <bob@gitlab.com>","X-Generator":"Poedit 2.0.2","lang":"es","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"%d additional commit has been omitted to prevent performance issues.":["%d cambio adicional ha sido omitido para evitar problemas de rendimiento.","%d cambios adicionales han sido omitidos para evitar problemas de rendimiento."],"%d commit":["%d cambio","%d cambios"],"%{commit_author_link} committed %{commit_timeago}":["%{commit_author_link} cambió %{commit_timeago}"],"About auto deploy":["Acerca del auto despliegue"],"Active":["Activo"],"Activity":["Actividad"],"Add Changelog":["Agregar Changelog"],"Add Contribution guide":["Agregar guía de contribución"],"Add License":["Agregar Licencia"],"Add an SSH key to your profile to pull or push via SSH.":["Agregar una clave SSH a tu perfil para actualizar o enviar a través de SSH."],"Add new directory":["Agregar nuevo directorio"],"Archived project! Repository is read-only":["¡Proyecto archivado! El repositorio es de solo lectura"],"Are you sure you want to delete this pipeline schedule?":["¿Estás seguro que deseas eliminar esta programación del pipeline?"],"Attach a file by drag &amp; drop or %{upload_link}":["Adjunte un archivo arrastrando &amp; soltando o %{upload_link}"],"Branch":["Rama","Ramas"],"Branch <strong>%{branch_name}</strong> was created. To set up auto deploy, choose a GitLab CI Yaml template and commit your changes. %{link_to_autodeploy_doc}":["La rama <strong>%{branch_name}</strong> fue creada. Para configurar el auto despliegue, escoge una plantilla Yaml para GitLab CI y envía tus cambios. %{link_to_autodeploy_doc}"],"BranchSwitcherPlaceholder|Search branches":["Buscar ramas"],"BranchSwitcherTitle|Switch branch":["Cambiar rama"],"Branches":["Ramas"],"Browse Directory":["Examinar directorio"],"Browse File":["Examinar archivo"],"Browse Files":["Examinar archivos"],"Browse files":["Examinar archivos"],"ByAuthor|by":["por"],"CI configuration":["Configuración de CI"],"Cancel":["Cancelar"],"ChangeTypeActionLabel|Pick into branch":["Escoger en la rama"],"ChangeTypeActionLabel|Revert in branch":["Revertir en la rama"],"ChangeTypeAction|Cherry-pick":["Cherry-pick"],"ChangeTypeAction|Revert":["Revertir"],"Changelog":["Changelog"],"Charts":["Gráficos"],"Cherry-pick this commit":["Escoger este cambio"],"Cherry-pick this merge request":["Escoger esta solicitud de fusión"],"CiStatusLabel|canceled":["cancelado"],"CiStatusLabel|created":["creado"],"CiStatusLabel|failed":["fallido"],"CiStatusLabel|manual action":["acción manual"],"CiStatusLabel|passed":["pasó"],"CiStatusLabel|passed with warnings":["pasó con advertencias"],"CiStatusLabel|pending":["pendiente"],"CiStatusLabel|skipped":["omitido"],"CiStatusLabel|waiting for manual action":["esperando acción manual"],"CiStatusText|blocked":["bloqueado"],"CiStatusText|canceled":["cancelado"],"CiStatusText|created":["creado"],"CiStatusText|failed":["fallado"],"CiStatusText|manual":["manual"],"CiStatusText|passed":["pasó"],"CiStatusText|pending":["pendiente"],"CiStatusText|skipped":["omitido"],"CiStatus|running":["en ejecución"],"Commit":["Cambio","Cambios"],"Commit message":["Mensaje del cambio"],"CommitBoxTitle|Commit":["Cambio"],"CommitMessage|Add %{file_name}":["Agregar %{file_name}"],"Commits":["Cambios"],"Commits feed":["Feed de cambios"],"Commits|History":["Historial"],"Committed by":["Enviado por"],"Compare":["Comparar"],"Contribution guide":["Guía de contribución"],"Contributors":["Contribuidores"],"Copy URL to clipboard":["Copiar URL al portapapeles"],"Copy commit SHA to clipboard":["Copiar SHA del cambio al portapapeles"],"Create New Directory":["Crear Nuevo Directorio"],"Create directory":["Crear directorio"],"Create empty bare repository":["Crear repositorio vacío"],"Create merge request":["Crear solicitud de fusión"],"Create new...":["Crear nuevo..."],"CreateNewFork|Fork":["Bifurcar"],"CreateTag|Tag":["Etiqueta"],"Cron Timezone":["Zona horaria del Cron"],"Cron syntax":["Sintaxis de Cron"],"Custom notification events":["Eventos de notificaciones personalizadas"],"Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notification_link}.":["Los niveles de notificación personalizados son los mismos que los niveles participantes. Con los niveles de notificación personalizados, también recibirá notificaciones para eventos seleccionados. Para obtener más información, consulte %{notification_link}."],"Cycle Analytics":["Cycle Analytics"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["Cycle Analytics ofrece una visión general de cuánto tiempo tarda en pasar de idea a producción en su proyecto."],"CycleAnalyticsStage|Code":["Código"],"CycleAnalyticsStage|Issue":["Incidencia"],"CycleAnalyticsStage|Plan":["Planificación"],"CycleAnalyticsStage|Production":["Producción"],"CycleAnalyticsStage|Review":["Revisión"],"CycleAnalyticsStage|Staging":["Puesta en escena"],"CycleAnalyticsStage|Test":["Pruebas"],"Define a custom pattern with cron syntax":["Definir un patrón personalizado con la sintaxis de cron"],"Delete":["Eliminar"],"Deploy":["Despliegue","Despliegues"],"Description":["Descripción"],"Directory name":["Nombre del directorio"],"Don't show again":["No mostrar de nuevo"],"Download":["Descargar"],"Download tar":["Descargar tar"],"Download tar.bz2":["Descargar tar.bz2"],"Download tar.gz":["Descargar tar.gz"],"Download zip":["Descargar zip"],"DownloadArtifacts|Download":["Descargar"],"DownloadCommit|Email Patches":["Parches por correo electrónico"],"DownloadCommit|Plain Diff":["Diferencias en texto plano"],"DownloadSource|Download":["Descargar"],"Edit":["Editar"],"Edit Pipeline Schedule %{id}":["Editar Programación del Pipeline %{id}"],"Every day (at 4:00am)":["Todos los días (a las 4:00 am)"],"Every month (on the 1st at 4:00am)":["Todos los meses (el día 1 a las 4:00 am)"],"Every week (Sundays at 4:00am)":["Todas las semanas (domingos a las 4:00 am)"],"Failed to change the owner":["Error al cambiar el propietario"],"Failed to remove the pipeline schedule":["Error al eliminar la programación del pipeline"],"Files":["Archivos"],"Filter by commit message":["Filtrar por mensaje del cambio"],"Find by path":["Buscar por ruta"],"Find file":["Buscar archivo"],"FirstPushedBy|First":["Primer"],"FirstPushedBy|pushed by":["enviado por"],"Fork":["Bifurcación","Bifurcaciones"],"ForkedFromProjectPath|Forked from":["Bifurcado de"],"From issue creation until deploy to production":["Desde la creación de la incidencia hasta el despliegue a producción"],"From merge request merge until deploy to production":["Desde la integración de la solicitud de fusión hasta el despliegue a producción"],"Go to your fork":["Ir a tu bifurcación"],"GoToYourFork|Fork":["Bifurcación"],"Home":["Inicio"],"Housekeeping successfully started":["Servicio de limpieza iniciado con éxito"],"Import repository":["Importar repositorio"],"Interval Pattern":["Patrón de intervalo"],"Introducing Cycle Analytics":["Introducción a Cycle Analytics"],"LFSStatus|Disabled":["Deshabilitado"],"LFSStatus|Enabled":["Habilitado"],"Last %d day":["Último %d día","Últimos %d días"],"Last Pipeline":["Último Pipeline"],"Last Update":["Última actualización"],"Last commit":["Último cambio"],"Learn more in the":["Más información en la"],"Learn more in the|pipeline schedules documentation":["documentación sobre la programación de pipelines"],"Leave group":["Abandonar grupo"],"Leave project":["Abandonar proyecto"],"Limited to showing %d event at most":["Limitado a mostrar máximo %d evento","Limitado a mostrar máximo %d eventos"],"Median":["Mediana"],"MissingSSHKeyWarningLink|add an SSH key":["agregar una clave SSH"],"New Issue":["Nueva incidencia","Nuevas incidencias"],"New Pipeline Schedule":["Nueva Programación del Pipeline"],"New branch":["Nueva rama"],"New directory":["Nuevo directorio"],"New file":["Nuevo archivo"],"New issue":["Nueva incidencia"],"New merge request":["Nueva solicitud de fusión"],"New schedule":["Nueva programación"],"New snippet":["Nuevo fragmento de código"],"New tag":["Nueva etiqueta"],"No repository":["No hay repositorio"],"No schedules":["No hay programaciones"],"Not available":["No disponible"],"Not enough data":["No hay suficientes datos"],"Notification events":["Eventos de notificación"],"NotificationEvent|Close issue":["Cerrar incidencia"],"NotificationEvent|Close merge request":["Cerrar solicitud de fusión"],"NotificationEvent|Failed pipeline":["Pipeline fallido"],"NotificationEvent|Merge merge request":["Integrar solicitud de fusión"],"NotificationEvent|New issue":["Nueva incidencia"],"NotificationEvent|New merge request":["Nueva solicitud de fusión"],"NotificationEvent|New note":["Nueva nota"],"NotificationEvent|Reassign issue":["Reasignar incidencia"],"NotificationEvent|Reassign merge request":["Reasignar solicitud de fusión"],"NotificationEvent|Reopen issue":["Reabrir incidencia"],"NotificationEvent|Successful pipeline":["Pipeline exitoso"],"NotificationLevel|Custom":["Personalizado"],"NotificationLevel|Disabled":["Deshabilitado"],"NotificationLevel|Global":["Global"],"NotificationLevel|On mention":["Cuando me mencionan"],"NotificationLevel|Participate":["Participación"],"NotificationLevel|Watch":["Vigilancia"],"OfSearchInADropdown|Filter":["Filtrar"],"OpenedNDaysAgo|Opened":["Abierto"],"Options":["Opciones"],"Owner":["Propietario"],"Pipeline":["Pipeline"],"Pipeline Health":["Estado del Pipeline"],"Pipeline Schedule":["Programación del Pipeline"],"Pipeline Schedules":["Programaciones de los Pipelines"],"PipelineSchedules|Activated":["Activado"],"PipelineSchedules|Active":["Activos"],"PipelineSchedules|All":["Todos"],"PipelineSchedules|Inactive":["Inactivos"],"PipelineSchedules|Next Run":["Próxima Ejecución"],"PipelineSchedules|None":["Ninguno"],"PipelineSchedules|Provide a short description for this pipeline":["Proporcione una breve descripción para este pipeline"],"PipelineSchedules|Take ownership":["Tomar posesión"],"PipelineSchedules|Target":["Destino"],"PipelineSheduleIntervalPattern|Custom":["Personalizado"],"Pipeline|with stage":["con etapa"],"Pipeline|with stages":["con etapas"],"Project '%{project_name}' queued for deletion.":["Proyecto ‘%{project_name}’ en cola para eliminación."],"Project '%{project_name}' was successfully created.":["Proyecto ‘%{project_name}’ fue creado satisfactoriamente."],"Project '%{project_name}' was successfully updated.":["Proyecto ‘%{project_name}’ fue actualizado satisfactoriamente."],"Project '%{project_name}' will be deleted.":["Proyecto ‘%{project_name}’ será eliminado."],"Project access must be granted explicitly to each user.":["El acceso al proyecto debe concederse explícitamente a cada usuario."],"Project export could not be deleted.":["No se pudo eliminar la exportación del proyecto."],"Project export has been deleted.":["La exportación del proyecto ha sido eliminada."],"Project export link has expired. Please generate a new export from your project settings.":["El enlace de exportación del proyecto ha caducado. Por favor, genera una nueva exportación desde la configuración del proyecto."],"Project export started. A download link will be sent by email.":["Se inició la exportación del proyecto. Se enviará un enlace de descarga por correo electrónico."],"Project home":["Inicio del proyecto"],"ProjectFeature|Disabled":["Deshabilitada"],"ProjectFeature|Everyone with access":["Todos con acceso"],"ProjectFeature|Only team members":["Solo miembros del equipo"],"ProjectFileTree|Name":["Nombre"],"ProjectLastActivity|Never":["Nunca"],"ProjectLifecycle|Stage":["Etapa"],"ProjectNetworkGraph|Graph":["Historial gráfico"],"Read more":["Leer más"],"Readme":["Léeme"],"RefSwitcher|Branches":["Ramas"],"RefSwitcher|Tags":["Etiquetas"],"Related Commits":["Cambios Relacionados"],"Related Deployed Jobs":["Trabajos Desplegados Relacionados"],"Related Issues":["Incidencias Relacionadas"],"Related Jobs":["Trabajos Relacionados"],"Related Merge Requests":["Solicitudes de fusión Relacionadas"],"Related Merged Requests":["Solicitudes de fusión Relacionadas"],"Remind later":["Recordar después"],"Remove project":["Eliminar proyecto"],"Request Access":["Solicitar acceso"],"Revert this commit":["Revertir este cambio"],"Revert this merge request":["Revertir esta solicitud de fusión"],"Save pipeline schedule":["Guardar programación del pipeline"],"Schedule a new pipeline":["Programar un nuevo pipeline"],"Scheduling Pipelines":["Programación de Pipelines"],"Search branches and tags":["Buscar ramas y etiquetas"],"Select Archive Format":["Seleccionar formato de archivo"],"Select a timezone":["Selecciona una zona horaria"],"Select target branch":["Selecciona una rama de destino"],"Set a password on your account to pull or push via %{protocol}":["Establezca una contraseña en su cuenta para actualizar o enviar a través de %{protocol}"],"Set up CI":["Configurar CI"],"Set up Koding":["Configurar Koding"],"Set up auto deploy":["Configurar auto despliegue"],"SetPasswordToCloneLink|set a password":["establecer una contraseña"],"Showing %d event":["Mostrando %d evento","Mostrando %d eventos"],"Source code":["Código fuente"],"StarProject|Star":["Destacar"],"Start a %{new_merge_request} with these changes":["Iniciar una %{new_merge_request} con estos cambios"],"Switch branch/tag":["Cambiar rama/etiqueta"],"Tag":["Etiqueta","Etiquetas"],"Tags":["Etiquetas"],"Target Branch":["Rama de destino"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["La etapa de desarrollo muestra el tiempo desde el primer cambio hasta la creación de la solicitud de fusión. Los datos serán automáticamente incorporados aquí una vez creada tu primera solicitud de fusión."],"The collection of events added to the data gathered for that stage.":["La colección de eventos agregados a los datos recopilados para esa etapa."],"The fork relationship has been removed.":["La relación con la bifurcación se ha eliminado."],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["La etapa de incidencia muestra el tiempo que toma desde la creación de un tema hasta asignar el tema a un hito, o añadir el tema a una lista en el panel de temas. Empieza a crear temas para ver los datos de esta etapa."],"The phase of the development lifecycle.":["La etapa del ciclo de vida de desarrollo."],"The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user.":["La programación de pipelines ejecuta pipelines en el futuro, repetidamente, para ramas o etiquetas específicas. Los pipelines programados heredarán acceso limitado al proyecto basado en su usuario asociado."],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["La etapa de planificación muestra el tiempo desde el paso anterior hasta el envío de tu primera confirmación. Este tiempo se añadirá automáticamente una vez que usted envíe el primer cambio."],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["La etapa de producción muestra el tiempo total que tarda entre la creación de una incidencia y el despliegue del código a producción. Los datos se añadirán automáticamente una vez haya finalizado por completo el ciclo de idea a producción."],"The project can be accessed by any logged in user.":["El proyecto puede ser accedido por cualquier usuario conectado."],"The project can be accessed without any authentication.":["El proyecto puede accederse sin ninguna autenticación."],"The repository for this project does not exist.":["El repositorio para este proyecto no existe."],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["La etapa de revisión muestra el tiempo desde la creación de la solicitud de fusión hasta que los cambios se fusionaron. Los datos se añadirán automáticamente después de fusionar su primera solicitud de fusión."],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["La etapa de puesta en escena muestra el tiempo entre la fusión y el despliegue de código en el entorno de producción. Los datos se añadirán automáticamente una vez que se despliega a producción por primera vez."],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["La etapa de pruebas muestra el tiempo que GitLab CI toma para ejecutar cada pipeline para la solicitud de fusión relacionada. Los datos se añadirán automáticamente luego de que el primer pipeline termine de ejecutarse."],"The time taken by each data entry gathered by that stage.":["El tiempo utilizado por cada entrada de datos obtenido por esa etapa."],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["El valor en el punto medio de una serie de valores observados. Por ejemplo, entre 3, 5, 9, la mediana es 5. Entre 3, 5, 7, 8, la mediana es (5 + 7) / 2 = 6."],"This means you can not push code until you create an empty repository or import existing one.":["Esto significa que no puede enviar código hasta que cree un repositorio vacío o importe uno existente."],"Time before an issue gets scheduled":["Tiempo antes de que una incidencia sea programada"],"Time before an issue starts implementation":["Tiempo antes de que empieze la implementación de una incidencia"],"Time between merge request creation and merge/close":["Tiempo entre la creación de la solicitud de fusión y la integración o cierre de ésta"],"Time until first merge request":["Tiempo hasta la primera solicitud de fusión"],"Timeago|%s days ago":["hace %s días"],"Timeago|%s days remaining":["%s días restantes"],"Timeago|%s hours remaining":["%s horas restantes"],"Timeago|%s minutes ago":["hace %s minutos"],"Timeago|%s minutes remaining":["%s minutos restantes"],"Timeago|%s months ago":["hace %s meses"],"Timeago|%s months remaining":["%s meses restantes"],"Timeago|%s seconds remaining":["%s segundos restantes"],"Timeago|%s weeks ago":["hace %s semanas"],"Timeago|%s weeks remaining":["%s semanas restantes"],"Timeago|%s years ago":["hace %s años"],"Timeago|%s years remaining":["%s años restantes"],"Timeago|1 day remaining":["1 día restante"],"Timeago|1 hour remaining":["1 hora restante"],"Timeago|1 minute remaining":["1 minuto restante"],"Timeago|1 month remaining":["1 mes restante"],"Timeago|1 week remaining":["1 semana restante"],"Timeago|1 year remaining":["1 año restante"],"Timeago|Past due":["Atrasado"],"Timeago|a day ago":["hace un día"],"Timeago|a month ago":["hace un mes"],"Timeago|a week ago":["hace una semana"],"Timeago|a while":["hace un momento"],"Timeago|a year ago":["hace un año"],"Timeago|about %s hours ago":["hace alrededor de %s horas"],"Timeago|about a minute ago":["hace alrededor de 1 minuto"],"Timeago|about an hour ago":["hace alrededor de 1 hora"],"Timeago|in %s days":["en %s días"],"Timeago|in %s hours":["en %s horas"],"Timeago|in %s minutes":["en %s minutos"],"Timeago|in %s months":["en %s meses"],"Timeago|in %s seconds":["en %s segundos"],"Timeago|in %s weeks":["en %s semanas"],"Timeago|in %s years":["en %s años"],"Timeago|in 1 day":["en 1 día"],"Timeago|in 1 hour":["en 1 hora"],"Timeago|in 1 minute":["en 1 minuto"],"Timeago|in 1 month":["en 1 mes"],"Timeago|in 1 week":["en 1 semana"],"Timeago|in 1 year":["en 1 año"],"Timeago|less than a minute ago":["hace menos de 1 minuto"],"Time|hr":["hr","hrs"],"Time|min":["min","mins"],"Time|s":["s"],"Total Time":["Tiempo Total"],"Total test time for all commits/merges":["Tiempo total de pruebas para todos los cambios o integraciones"],"Unstar":["No Destacar"],"Upload New File":["Subir nuevo archivo"],"Upload file":["Subir archivo"],"UploadLink|click to upload":["Hacer clic para subir"],"Use your global notification setting":["Utiliza tu configuración de notificación global"],"View open merge request":["Ver solicitud de fusión abierta"],"VisibilityLevel|Internal":["Interno"],"VisibilityLevel|Private":["Privado"],"VisibilityLevel|Public":["Público"],"Want to see the data? Please ask an administrator for access.":["¿Quieres ver los datos? Por favor pide acceso al administrador."],"We don't have enough data to show this stage.":["No hay suficientes datos para mostrar en esta etapa."],"Withdraw Access Request":["Retirar Solicitud de Acceso"],"You are going to remove %{project_name_with_namespace}.\\nRemoved project CANNOT be restored!\\nAre you ABSOLUTELY sure?":["Va a eliminar %{project_name_with_namespace}.\\n¡El proyecto eliminado NO puede ser restaurado!\\n¿Estás TOTALMENTE seguro?"],"You are going to remove the fork relationship to source project %{forked_from_project}. Are you ABSOLUTELY sure?":["Vas a eliminar el enlace de la bifurcación con el proyecto original %{forked_from_project}. ¿Estás TOTALMENTE seguro?"],"You are going to transfer %{project_name_with_namespace} to another owner. Are you ABSOLUTELY sure?":["Vas a transferir %{project_name_with_namespace} a otro propietario. ¿Estás TOTALMENTE seguro?"],"You can only add files when you are on a branch":["Solo puedes agregar archivos cuando estás en una rama"],"You have reached your project limit":["Has alcanzado el límite de tu proyecto"],"You must sign in to star a project":["Debes iniciar sesión para destacar un proyecto"],"You need permission.":["Necesitas permisos."],"You will not get any notifications via email":["No recibirás ninguna notificación por correo electrónico"],"You will only receive notifications for the events you choose":["Solo recibirás notificaciones de los eventos que elijas"],"You will only receive notifications for threads you have participated in":["Solo recibirás notificaciones de los temas en los que has participado"],"You will receive notifications for any activity":["Recibirás notificaciones por cualquier actividad"],"You will receive notifications only for comments in which you were @mentioned":["Recibirás notificaciones solo para los comentarios en los que se te mencionó"],"You won't be able to pull or push project code via %{protocol} until you %{set_password_link} on your account":["No podrás actualizar o enviar código al proyecto a través de %{protocol} hasta que %{set_password_link} en tu cuenta"],"You won't be able to pull or push project code via SSH until you %{add_ssh_key_link} to your profile":["No podrás actualizar o enviar código al proyecto a través de SSH hasta que %{add_ssh_key_link} en su perfil"],"Your name":["Tu nombre"],"day":["día","días"],"new merge request":["nueva solicitud de fusión"],"notification emails":["correos electrónicos de notificación"],"parent":["padre","padres"]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/locale/zh_CN/app.js b/app/assets/javascripts/locale/zh_CN/app.js
index d1335cfbc0f..9c28e4e4627 100644
--- a/app/assets/javascripts/locale/zh_CN/app.js
+++ b/app/assets/javascripts/locale/zh_CN/app.js
@@ -1 +1 @@
-var locales = locales || {}; locales['zh_CN'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-05-04 19:24-0500","Last-Translator":"HuangTao <htve@outlook.com>, 2017","Language-Team":"Chinese (China) (https://www.transifex.com/gitlab-zh/teams/75177/zh_CN/)","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Language":"zh_CN","Plural-Forms":"nplurals=1; plural=0;","lang":"zh_CN","domain":"app","plural_forms":"nplurals=1; plural=0;"},"Are you sure you want to delete this pipeline schedule?":[""],"ByAuthor|by":["作者:"],"Cancel":[""],"Commit":["提交"],"Cron Timezone":[""],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["周期分析概述了项目从想法到产品实现的各阶段所需的时间。"],"CycleAnalyticsStage|Code":["编码"],"CycleAnalyticsStage|Issue":["议题"],"CycleAnalyticsStage|Plan":["计划"],"CycleAnalyticsStage|Production":["生产"],"CycleAnalyticsStage|Review":["评审"],"CycleAnalyticsStage|Staging":["预发布"],"CycleAnalyticsStage|Test":["测试"],"Delete":[""],"Deploy":["部署"],"Description":[""],"Edit":[""],"Edit Pipeline Schedule %{id}":[""],"Failed to change the owner":[""],"Failed to remove the pipeline schedule":[""],"Filter":[""],"FirstPushedBy|First":["首次推送"],"FirstPushedBy|pushed by":["推送者:"],"From issue creation until deploy to production":["从创建议题到部署至生产环境"],"From merge request merge until deploy to production":["从合并请求被合并后到部署至生产环境"],"Interval Pattern":[""],"Introducing Cycle Analytics":["周期分析简介"],"Last %d day":["最后 %d 天"],"Last Pipeline":[""],"Limited to showing %d event at most":["最多显示 %d 个事件"],"Median":["中位数"],"New Issue":["新议题"],"New Pipeline Schedule":[""],"No schedules":[""],"Not available":["数据不足"],"Not enough data":["数据不足"],"OpenedNDaysAgo|Opened":["开始于"],"Owner":[""],"Pipeline Health":["流水线健康指标"],"Pipeline Schedule":[""],"Pipeline Schedules":[""],"PipelineSchedules|Activated":[""],"PipelineSchedules|Active":[""],"PipelineSchedules|All":[""],"PipelineSchedules|Inactive":[""],"PipelineSchedules|Next Run":[""],"PipelineSchedules|None":[""],"PipelineSchedules|Provide a short description for this pipeline":[""],"PipelineSchedules|Take ownership":[""],"PipelineSchedules|Target":[""],"ProjectLifecycle|Stage":["项目生命周期"],"Read more":["了解更多"],"Related Commits":["相关的提交"],"Related Deployed Jobs":["相关的部署作业"],"Related Issues":["相关的议题"],"Related Jobs":["相关的作业"],"Related Merge Requests":["相关的合并请求"],"Related Merged Requests":["相关已合并的合并请求"],"Save pipeline schedule":[""],"Schedule a new pipeline":[""],"Select a timezone":[""],"Select target branch":[""],"Showing %d event":["显示 %d 个事件"],"Target Branch":[""],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["编码阶段概述了从第一次提交到创建合并请求的时间。创建第一个合并请求后，数据将自动添加到此处。"],"The collection of events added to the data gathered for that stage.":["与该阶段相关的事件。"],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["议题阶段概述了从创建议题到将议题设置里程碑或将议题添加到议题看板的时间。开始创建议题以查看此阶段的数据。"],"The phase of the development lifecycle.":["项目生命周期中的各个阶段。"],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["计划阶段概述了从议题添加到日程后到推送首次提交的时间。当首次推送提交后，数据将自动添加到此处。"],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["生产阶段概述了从创建一个议题到将代码部署到生产环境的总时间。当完成想法到部署生产的循环，数据将自动添加到此处。"],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["评审阶段概述了从创建合并请求到被合并的时间。当创建第一个合并请求后，数据将自动添加到此处。"],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["预发布阶段概述了从合并请求被合并到部署至生产环境的总时间。首次部署到生产环境后，数据将自动添加到此处。"],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["测试阶段概述了GitLab CI为相关合并请求运行每个流水线所需的时间。当第一个流水线运行完成后，数据将自动添加到此处。"],"The time taken by each data entry gathered by that stage.":["该阶段每条数据所花的时间"],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["中位数是一个数列中最中间的值。例如在 3、5、9 之间，中位数是 5。在 3、5、7、8 之间，中位数是 （5 + 7）/ 2 = 6。"],"Time before an issue gets scheduled":["议题被列入日程表的时间"],"Time before an issue starts implementation":["开始进行编码前的时间"],"Time between merge request creation and merge/close":["从创建合并请求到被合并或关闭的时间"],"Time until first merge request":["创建第一个合并请求之前的时间"],"Time|hr":["小时"],"Time|min":["分钟"],"Time|s":["秒"],"Total Time":["总时间"],"Total test time for all commits/merges":["所有提交和合并的总测试时间"],"Want to see the data? Please ask an administrator for access.":["权限不足。如需查看相关数据，请向管理员申请权限。"],"We don't have enough data to show this stage.":["该阶段的数据不足，无法显示。"],"You need permission.":["您需要相关的权限。"],"day":["天"]}}};
\ No newline at end of file
+var locales = locales || {}; locales['zh_CN'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","POT-Creation-Date":"2017-06-15 21:59-0500","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","PO-Revision-Date":"2017-06-19 09:57-0400","Last-Translator":"Huang Tao <htve@outlook.com>","Language-Team":"Chinese (China) (https://translate.zanata.org/project/view/GitLab)","Language":"zh-CN","X-Generator":"Zanata 3.9.6","Plural-Forms":"nplurals=1; plural=0","lang":"zh_CN","domain":"app","plural_forms":"nplurals=1; plural=0"},"%{commit_author_link} committed %{commit_timeago}":["由 %{commit_author_link} 提交于 %{commit_timeago}"],"About auto deploy":["关于自动部署"],"Active":["启用"],"Activity":["活动"],"Add Changelog":["添加更新日志"],"Add Contribution guide":["添加贡献指南"],"Add License":["添加许可证"],"Add an SSH key to your profile to pull or push via SSH.":["新建一个用于推送或拉取的 SSH 秘钥到账号中。"],"Add new directory":["添加目录"],"Archived project! Repository is read-only":["项目已归档！存储库为只读状态"],"Are you sure you want to delete this pipeline schedule?":["确定要删除此流水线计划吗？"],"Attach a file by drag &amp; drop or %{upload_link}":["拖放文件到此处或者 %{upload_link}"],"Branch":["分支"],"Branch <strong>%{branch_name}</strong> was created. To set up auto deploy, choose a GitLab CI Yaml template and commit your changes. %{link_to_autodeploy_doc}":["已创建分支 <strong>%{branch_name}</strong> 。如需设置自动部署， 请选择合适的 GitLab CI Yaml 模板并提交更改。%{link_to_autodeploy_doc}"],"Branches":["分支"],"Browse files":["浏览文件"],"ByAuthor|by":["作者:"],"CI configuration":["CI 配置"],"Cancel":["取消"],"ChangeTypeActionLabel|Pick into branch":["选择分支"],"ChangeTypeActionLabel|Revert in branch":["还原分支"],"ChangeTypeAction|Cherry-pick":["优选"],"ChangeTypeAction|Revert":["还原"],"Changelog":["更新日志"],"Charts":["统计图"],"Cherry-pick this commit":["优选此提交"],"Cherry-pick this merge request":["优选此合并请求"],"CiStatusLabel|canceled":["已取消"],"CiStatusLabel|created":["已创建"],"CiStatusLabel|failed":["已失败"],"CiStatusLabel|manual action":["手动操作"],"CiStatusLabel|passed":["已通过"],"CiStatusLabel|passed with warnings":["已通过但有警告"],"CiStatusLabel|pending":["等待中"],"CiStatusLabel|skipped":["已跳过"],"CiStatusLabel|waiting for manual action":["等待手动操作"],"CiStatusText|blocked":["已阻塞"],"CiStatusText|canceled":["已取消"],"CiStatusText|created":["已创建"],"CiStatusText|failed":["已失败"],"CiStatusText|manual":["手动操作"],"CiStatusText|passed":["已通过"],"CiStatusText|pending":["等待中"],"CiStatusText|skipped":["已跳过"],"CiStatus|running":["运行中"],"Commit":["提交"],"Commit message":["提交信息"],"CommitBoxTitle|Commit":["提交"],"CommitMessage|Add %{file_name}":["添加 %{file_name}"],"Commits":["提交"],"Commits|History":["历史"],"Committed by":["提交者："],"Compare":["比较"],"Contribution guide":["贡献指南"],"Contributors":["贡献者"],"Copy URL to clipboard":["复制 URL 到剪贴板"],"Copy commit SHA to clipboard":["复制提交 SHA 的值到剪贴板"],"Create New Directory":["创建新目录"],"Create directory":["创建目录"],"Create empty bare repository":["创建空的存储库"],"Create merge request":["创建合并请求"],"Create new...":["创建..."],"CreateNewFork|Fork":["派生"],"CreateTag|Tag":["标签"],"Cron Timezone":["Cron 时区"],"Cron syntax":["Cron 语法"],"Custom notification events":["自定义通知事件"],"Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notification_link}.":["自定义通知级别继承自参与级别。使用自定义通知级别，您会收到参与级别及选定事件的通知。想了解更多信息，请查看 %{notification_link}."],"Cycle Analytics":["周期分析"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["周期分析概述了项目从想法到产品实现的各阶段所需的时间。"],"CycleAnalyticsStage|Code":["编码"],"CycleAnalyticsStage|Issue":["议题"],"CycleAnalyticsStage|Plan":["计划"],"CycleAnalyticsStage|Production":["生产"],"CycleAnalyticsStage|Review":["评审"],"CycleAnalyticsStage|Staging":["预发布"],"CycleAnalyticsStage|Test":["测试"],"Define a custom pattern with cron syntax":["使用 Cron 语法定义自定义模式"],"Delete":["删除"],"Deploy":["部署"],"Description":["描述"],"Directory name":["目录名称"],"Don't show again":["不再显示"],"Download":["下载"],"Download tar":["下载 tar"],"Download tar.bz2":["下载 tar.bz2"],"Download tar.gz":["下载 tar.gz"],"Download zip":["下载 zip"],"DownloadArtifacts|Download":["下载"],"DownloadCommit|Email Patches":["电子邮件补丁"],"DownloadCommit|Plain Diff":["差异文件"],"DownloadSource|Download":["下载"],"Edit":["编辑"],"Edit Pipeline Schedule %{id}":["编辑 %{id} 流水线计划"],"Every day (at 4:00am)":["每日执行（凌晨 4 点）"],"Every month (on the 1st at 4:00am)":["每月执行（每月 1 日凌晨 4 点）"],"Every week (Sundays at 4:00am)":["每周执行（周日凌晨 4 点）"],"Failed to change the owner":["无法变更所有者"],"Failed to remove the pipeline schedule":["无法删除流水线计划"],"Files":["文件"],"Find by path":["按路径查找"],"Find file":["查找文件"],"FirstPushedBy|First":["首次推送"],"FirstPushedBy|pushed by":["推送者:"],"Fork":["派生"],"ForkedFromProjectPath|Forked from":["派生自"],"From issue creation until deploy to production":["从创建议题到部署至生产环境"],"From merge request merge until deploy to production":["从合并请求被合并后到部署至生产环境"],"Go to your fork":["跳转到派生项目"],"GoToYourFork|Fork":["跳转到派生项目"],"Home":["首页"],"Housekeeping successfully started":["已开始维护"],"Import repository":["导入存储库"],"Interval Pattern":["循环周期"],"Introducing Cycle Analytics":["周期分析简介"],"LFSStatus|Disabled":["停用"],"LFSStatus|Enabled":["启用"],"Last %d day":["最近 %d 天"],"Last Pipeline":["最新流水线"],"Last Update":["最后更新"],"Last commit":["最后提交"],"Learn more in the":["了解更多"],"Learn more in the|pipeline schedules documentation":["流水线计划文档"],"Leave group":["退出群组"],"Leave project":["退出项目"],"Limited to showing %d event at most":["最多显示 %d 个事件"],"Median":["中位数"],"MissingSSHKeyWarningLink|add an SSH key":["新建 SSH 公钥"],"New Issue":["新建议题"],"New Pipeline Schedule":["创建流水线计划"],"New branch":["新建分支"],"New directory":["新建目录"],"New file":["新建文件"],"New issue":["新建议题"],"New merge request":["新建合并请求"],"New schedule":["新建计划"],"New snippet":["新建代码片段"],"New tag":["新建标签"],"No repository":["没有存储库"],"No schedules":["没有计划"],"Not available":["数据不足"],"Not enough data":["数据不足"],"Notification events":["通知事件"],"NotificationEvent|Close issue":["关闭议题"],"NotificationEvent|Close merge request":["关闭合并请求"],"NotificationEvent|Failed pipeline":["流水线失败"],"NotificationEvent|Merge merge request":["合并请求被合并"],"NotificationEvent|New issue":["新建议题"],"NotificationEvent|New merge request":["新建合并请求"],"NotificationEvent|New note":["新建评论"],"NotificationEvent|Reassign issue":["重新指派议题"],"NotificationEvent|Reassign merge request":["重新指派合并请求"],"NotificationEvent|Reopen issue":["重启议题"],"NotificationEvent|Successful pipeline":["流水线成功完成"],"NotificationLevel|Custom":["自定义"],"NotificationLevel|Disabled":["停用"],"NotificationLevel|Global":["全局"],"NotificationLevel|On mention":["提及"],"NotificationLevel|Participate":["参与"],"NotificationLevel|Watch":["关注"],"OfSearchInADropdown|Filter":["筛选"],"OpenedNDaysAgo|Opened":["开始于"],"Options":["操作"],"Owner":["所有者"],"Pipeline":["流水线"],"Pipeline Health":["流水线健康指标"],"Pipeline Schedule":["流水线计划"],"Pipeline Schedules":["流水线计划"],"PipelineSchedules|Activated":["是否启用"],"PipelineSchedules|Active":["已启用"],"PipelineSchedules|All":["所有"],"PipelineSchedules|Inactive":["未启用"],"PipelineSchedules|Next Run":["下次运行时间"],"PipelineSchedules|None":["无"],"PipelineSchedules|Provide a short description for this pipeline":["为此流水线提供简短描述"],"PipelineSchedules|Take ownership":["取得所有者"],"PipelineSchedules|Target":["目标"],"PipelineSheduleIntervalPattern|Custom":["自定义"],"Pipeline|with stage":["于阶段"],"Pipeline|with stages":["于阶段"],"Project '%{project_name}' queued for deletion.":["项目 '%{project_name}' 已进入删除队列。"],"Project '%{project_name}' was successfully created.":["项目 '%{project_name}' 已创建成功。"],"Project '%{project_name}' was successfully updated.":["项目 '%{project_name}' 已更新完成。"],"Project '%{project_name}' will be deleted.":["项目 '%{project_name}' 将被删除。"],"Project access must be granted explicitly to each user.":["项目访问权限必须明确授权给每个用户。"],"Project export could not be deleted.":["无法删除项目导出。"],"Project export has been deleted.":["项目导出已被删除。"],"Project export link has expired. Please generate a new export from your project settings.":["项目导出链接已过期。请从项目设置中重新生成项目导出。"],"Project export started. A download link will be sent by email.":["项目导出已开始。下载链接将通过电子邮件发送。"],"Project home":["项目首页"],"ProjectFeature|Disabled":["停用"],"ProjectFeature|Everyone with access":["任何对项目有访问权的人"],"ProjectFeature|Only team members":["只限团队成员"],"ProjectFileTree|Name":["名称"],"ProjectLastActivity|Never":["从未"],"ProjectLifecycle|Stage":["阶段"],"ProjectNetworkGraph|Graph":["分支图"],"Read more":["了解更多"],"Readme":["自述文件"],"RefSwitcher|Branches":["分支"],"RefSwitcher|Tags":["标签"],"Related Commits":["相关的提交"],"Related Deployed Jobs":["相关的部署作业"],"Related Issues":["相关的议题"],"Related Jobs":["相关的作业"],"Related Merge Requests":["相关的合并请求"],"Related Merged Requests":["相关已合并的合并请求"],"Remind later":["稍后提醒"],"Remove project":["删除项目"],"Request Access":["申请权限"],"Revert this commit":["还原此提交"],"Revert this merge request":["还原此合并请求"],"Save pipeline schedule":["保存流水线计划"],"Schedule a new pipeline":["新建流水线计划"],"Scheduling Pipelines":["流水线计划"],"Search branches and tags":["搜索分支和标签"],"Select Archive Format":["选择下载格式"],"Select a timezone":["选择时区"],"Select target branch":["选择目标分支"],"Set a password on your account to pull or push via %{protocol}":["为账号创建一个用于推送或拉取的 %{protocol} 密码。"],"Set up CI":["设置 CI"],"Set up Koding":["设置 Koding"],"Set up auto deploy":["设置自动部署"],"SetPasswordToCloneLink|set a password":["设置密码"],"Showing %d event":["显示 %d 个事件"],"Source code":["源代码"],"StarProject|Star":["星标"],"Start a %{new_merge_request} with these changes":["由此更改 %{new_merge_request}"],"Switch branch/tag":["切换分支/标签"],"Tag":["标签"],"Tags":["标签"],"Target Branch":["目标分支"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["编码阶段概述了从第一次提交到创建合并请求的时间。创建第一个合并请求后，数据将自动添加到此处。"],"The collection of events added to the data gathered for that stage.":["与该阶段相关的事件集合。"],"The fork relationship has been removed.":["派生关系已被删除。"],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["议题阶段概述了从创建议题到将议题添加到里程碑或议题看板所花费的时间。创建第一个议题后，数据将自动添加到此处.。"],"The phase of the development lifecycle.":["项目生命周期中的各个阶段。"],"The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user.":["流水线计划会周期性重复运行指定分支或标签的流水线。这些流水线将根据其关联用户继承有限的项目访问权限。"],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["计划阶段概述了从议题添加到日程到推送首次提交的时间。当首次推送提交后，数据将自动添加到此处。"],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["生产阶段概述了从创建一个议题到将代码部署到生产环境的总时间。当完成想法到部署生产的循环，数据将自动添加到此处。"],"The project can be accessed by any logged in user.":["该项目允许已登录的用户访问。"],"The project can be accessed without any authentication.":["该项目允许任何人访问。"],"The repository for this project does not exist.":["此项目的存储库不存在。"],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["评审阶段概述了从创建合并请求到被合并的时间。当创建第一个合并请求后，数据将自动添加到此处。"],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["预发布阶段概述了从合并请求被合并到部署至生产环境的总时间。首次部署到生产环境后，数据将自动添加到此处。"],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["测试阶段概述了 GitLab CI 为相关合并请求运行每个流水线所需的时间。当第一个流水线运行完成后，数据将自动添加到此处。"],"The time taken by each data entry gathered by that stage.":["该阶段每条数据所花的时间"],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["中位数是一个数列中最中间的值。例如在 3、5、9 之间，中位数是 5。在 3、5、7、8 之间，中位数是 （5 + 7）/ 2 = 6。"],"This means you can not push code until you create an empty repository or import existing one.":["在创建一个空的存储库或导入现有存储库之前，将无法推送代码。"],"Time before an issue gets scheduled":["议题被列入日程表的时间"],"Time before an issue starts implementation":["开始进行编码前的时间"],"Time between merge request creation and merge/close":["从创建合并请求到被合并或关闭的时间"],"Time until first merge request":["创建第一个合并请求之前的时间"],"Timeago|%s days ago":[" %s 天前"],"Timeago|%s days remaining":["剩余 %s 天"],"Timeago|%s hours remaining":["剩余 %s 小时"],"Timeago|%s minutes ago":[" %s 分钟前"],"Timeago|%s minutes remaining":["剩余 %s 分钟"],"Timeago|%s months ago":[" %s 个月前"],"Timeago|%s months remaining":["剩余 %s 月"],"Timeago|%s seconds remaining":["剩余 %s 秒"],"Timeago|%s weeks ago":[" %s 星期前"],"Timeago|%s weeks remaining":["剩余 %s 星期"],"Timeago|%s years ago":[" %s 年前"],"Timeago|%s years remaining":["剩余 %s 年"],"Timeago|1 day remaining":["剩余 1 天"],"Timeago|1 hour remaining":["剩余 1 小时"],"Timeago|1 minute remaining":["剩余 1 分钟"],"Timeago|1 month remaining":["剩余 1 个月"],"Timeago|1 week remaining":["剩余 1 星期"],"Timeago|1 year remaining":["剩余 1 年"],"Timeago|Past due":["逾期"],"Timeago|a day ago":[" 1 天前"],"Timeago|a month ago":[" 1 个月前"],"Timeago|a week ago":[" 1 星期前"],"Timeago|a while":["刚刚"],"Timeago|a year ago":[" 1 年前"],"Timeago|about %s hours ago":["约 %s 小时前"],"Timeago|about a minute ago":["约 1 分钟前"],"Timeago|about an hour ago":["约 1 小时前"],"Timeago|in %s days":[" %s 天后"],"Timeago|in %s hours":[" %s 小时后"],"Timeago|in %s minutes":[" %s 分钟后"],"Timeago|in %s months":[" %s 个月后"],"Timeago|in %s seconds":[" %s 秒后"],"Timeago|in %s weeks":[" %s 星期后"],"Timeago|in %s years":[" %s 年后"],"Timeago|in 1 day":[" 1 天后"],"Timeago|in 1 hour":[" 1 小时后"],"Timeago|in 1 minute":[" 1 分钟后"],"Timeago|in 1 month":[" 1 月后"],"Timeago|in 1 week":[" 1 星期后"],"Timeago|in 1 year":[" 1 年后"],"Timeago|less than a minute ago":["不到 1 分钟前"],"Time|hr":["小时"],"Time|min":["分钟"],"Time|s":["秒"],"Total Time":["总时间"],"Total test time for all commits/merges":["所有提交和合并的总测试时间"],"Unstar":["取消星标"],"Upload New File":["上传新文件"],"Upload file":["上传文件"],"Use your global notification setting":["使用全局通知设置"],"VisibilityLevel|Internal":["内部"],"VisibilityLevel|Private":["私有"],"VisibilityLevel|Public":["公开"],"Want to see the data? Please ask an administrator for access.":["权限不足。如需查看相关数据，请向管理员申请权限。"],"We don't have enough data to show this stage.":["该阶段的数据不足，无法显示。"],"Withdraw Access Request":["取消权限申请"],"You are going to remove %{project_name_with_namespace}.\\nRemoved project CANNOT be restored!\\nAre you ABSOLUTELY sure?":["即将要删除 %{project_name_with_namespace}。\\n已删除的项目无法恢复！\\n确定继续吗？"],"You are going to remove the fork relationship to source project %{forked_from_project}. Are you ABSOLUTELY sure?":["即将删除与源项目 %{forked_from_project} 的派生关系。确定继续吗？"],"You are going to transfer %{project_name_with_namespace} to another owner. Are you ABSOLUTELY sure?":["即将 %{project_name_with_namespace} 转移给另一个所有者。确定继续吗？"],"You can only add files when you are on a branch":["只能在分支上添加文件"],"You have reached your project limit":["您已达到项目数量限制"],"You must sign in to star a project":["必须登录才能对项目加星标"],"You need permission.":["需要相关的权限。"],"You will not get any notifications via email":["不会收到任何通知邮件"],"You will only receive notifications for the events you choose":["只接收选择的事件通知"],"You will only receive notifications for threads you have participated in":["只接收参与的主题的通知"],"You will receive notifications for any activity":["接收所有活动的通知"],"You will receive notifications only for comments in which you were @mentioned":["只接收评论中提及(@)您的通知"],"You won't be able to pull or push project code via %{protocol} until you %{set_password_link} on your account":["在账号中 %{set_password_link} 之前将无法通过 %{protocol} 拉取或推送代码。"],"You won't be able to pull or push project code via SSH until you %{add_ssh_key_link} to your profile":["在账号中 %{add_ssh_key_link} 之前将无法通过 SSH 拉取或推送代码。"],"Your name":["您的名字"],"day":["天"],"new merge request":["新建合并请求"],"notification emails":["通知邮件"],"parent":["父级"]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 7bb2236017e..786b6014dc6 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -155,7 +155,10 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
 
     scrollToElement(container) {
       if (location.hash) {
-        const offset = -$('.js-tabs-affix').outerHeight();
+        const offset = 0 - (
+          $('.navbar-gitlab').outerHeight() +
+          $('.js-tabs-affix').outerHeight()
+        );
         const $el = $(`${container} ${location.hash}:not(.match)`);
         if ($el.length) {
           $.scrollTo($el[0], { offset });
@@ -291,7 +294,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
           // Scroll any linked note into view
           // Similar to `toggler_behavior` in the discussion tab
           const hash = window.gl.utils.getLocationHash();
-          const anchor = hash && $container.find(`[id="${hash}"]`);
+          const anchor = hash && $container.find(`.note[id="${hash}"]`);
           if (anchor && anchor.length > 0) {
             const notesContent = anchor.closest('.notes_content');
             const lineType = notesContent.hasClass('new') ? 'new' : 'old';
@@ -301,6 +304,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
               forceShow: true,
             });
             anchor[0].scrollIntoView();
+            window.gl.utils.handleLocationHash();
             // We have multiple elements on the page with `#note_xxx`
             // (discussion and diff tabs) and `:target` only applies to the first
             anchor.addClass('target');
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 624dd336786..b21d7774920 100644
--- a/app/assets/javascripts/notes.js
+++ b/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,1507 +25,1489 @@ 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;
-
-    Notes.interval = null;
-
-    function Notes(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);
-      this.cancelDiscussionForm = this.cancelDiscussionForm.bind(this);
-      this.onAddDiffNote = this.onAddDiffNote.bind(this);
-      this.setupDiscussionNoteForm = this.setupDiscussionNoteForm.bind(this);
-      this.onReplyToDiscussionNote = this.onReplyToDiscussionNote.bind(this);
-      this.removeNote = this.removeNote.bind(this);
-      this.cancelEdit = this.cancelEdit.bind(this);
-      this.updateNote = this.updateNote.bind(this);
-      this.addDiscussionNote = this.addDiscussionNote.bind(this);
-      this.addNoteError = this.addNoteError.bind(this);
-      this.addNote = this.addNote.bind(this);
-      this.resetMainTargetForm = this.resetMainTargetForm.bind(this);
-      this.refresh = this.refresh.bind(this);
-      this.keydownNoteText = this.keydownNoteText.bind(this);
-      this.toggleCommitList = this.toggleCommitList.bind(this);
-      this.postComment = this.postComment.bind(this);
-      this.clearFlashWrapper = this.clearFlash.bind(this);
-      this.onHashChange = this.onHashChange.bind(this);
-
-      this.notes_url = notes_url;
-      this.note_ids = note_ids;
-      this.enableGFM = enableGFM;
-      // Used to keep track of updated notes while people are editing things
-      this.updatedNotesTrackingMap = {};
-      this.last_fetched_at = last_fetched_at;
-      this.noteable_url = document.URL;
-      this.notesCountBadge || (this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge'));
-      this.basePollingInterval = 15000;
-      this.maxPollingSteps = 4;
-
-      this.cleanBinding();
-      this.addBinding();
-      this.setPollingInterval();
-      this.setupMainTargetNoteForm();
-      this.taskList = new gl.TaskList({
-        dataType: 'note',
-        fieldName: 'note',
-        selector: '.notes'
-      });
-      this.collapseLongCommitList();
-      this.setViewType(view);
-
-      // We are in the Merge Requests page so we need another edit form for Changes tab
-      if (gl.utils.getPagePath(1) === 'merge_requests') {
-        $('.note-edit-form').clone()
-          .addClass('mr-note-edit-form').insertAfter('.note-edit-form');
-      }
+}
+
+const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
+const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
+
+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);
+    this.cancelDiscussionForm = this.cancelDiscussionForm.bind(this);
+    this.onAddDiffNote = this.onAddDiffNote.bind(this);
+    this.setupDiscussionNoteForm = this.setupDiscussionNoteForm.bind(this);
+    this.onReplyToDiscussionNote = this.onReplyToDiscussionNote.bind(this);
+    this.removeNote = this.removeNote.bind(this);
+    this.cancelEdit = this.cancelEdit.bind(this);
+    this.updateNote = this.updateNote.bind(this);
+    this.addDiscussionNote = this.addDiscussionNote.bind(this);
+    this.addNoteError = this.addNoteError.bind(this);
+    this.addNote = this.addNote.bind(this);
+    this.resetMainTargetForm = this.resetMainTargetForm.bind(this);
+    this.refresh = this.refresh.bind(this);
+    this.keydownNoteText = this.keydownNoteText.bind(this);
+    this.toggleCommitList = this.toggleCommitList.bind(this);
+    this.postComment = this.postComment.bind(this);
+    this.clearFlashWrapper = this.clearFlash.bind(this);
+    this.onHashChange = this.onHashChange.bind(this);
+
+    this.notes_url = notes_url;
+    this.note_ids = note_ids;
+    this.enableGFM = enableGFM;
+    // Used to keep track of updated notes while people are editing things
+    this.updatedNotesTrackingMap = {};
+    this.last_fetched_at = last_fetched_at;
+    this.noteable_url = document.URL;
+    this.notesCountBadge || (this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge'));
+    this.basePollingInterval = 15000;
+    this.maxPollingSteps = 4;
+
+    this.cleanBinding();
+    this.addBinding();
+    this.setPollingInterval();
+    this.setupMainTargetNoteForm();
+    this.taskList = new gl.TaskList({
+      dataType: 'note',
+      fieldName: 'note',
+      selector: '.notes'
+    });
+    this.collapseLongCommitList();
+    this.setViewType(view);
+
+    // We are in the Merge Requests page so we need another edit form for Changes tab
+    if (gl.utils.getPagePath(1) === 'merge_requests') {
+      $('.note-edit-form').clone()
+        .addClass('mr-note-edit-form').insertAfter('.note-edit-form');
+    }
+  }
+
+  setViewType(view) {
+    this.view = Cookies.get('diff_view') || view;
+  }
+
+  addBinding() {
+    // Edit note link
+    $(document).on('click', '.js-note-edit', this.showEditForm.bind(this));
+    $(document).on('click', '.note-edit-cancel', this.cancelEdit);
+    // Reopen and close actions for Issue/MR combined with note form submit
+    $(document).on('click', '.js-comment-submit-button', this.postComment);
+    $(document).on('click', '.js-comment-save-button', this.updateComment);
+    $(document).on('keyup input', '.js-note-text', this.updateTargetButtons);
+    // resolve a discussion
+    $(document).on('click', '.js-comment-resolve-button', this.postComment);
+    // remove a note (in general)
+    $(document).on('click', '.js-note-delete', this.removeNote);
+    // delete note attachment
+    $(document).on('click', '.js-note-attachment-delete', this.removeAttachment);
+    // reset main target form when clicking discard
+    $(document).on('click', '.js-note-discard', this.resetMainTargetForm);
+    // update the file name when an attachment is selected
+    $(document).on('change', '.js-note-attachment-input', this.updateFormAttachment);
+    // reply to diff/discussion notes
+    $(document).on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
+    // add diff note
+    $(document).on('click', '.js-add-diff-note-button', this.onAddDiffNote);
+    // hide diff note form
+    $(document).on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm);
+    // toggle commit list
+    $(document).on('click', '.system-note-commit-list-toggler', this.toggleCommitList);
+    // fetch notes when tab becomes visible
+    $(document).on('visibilitychange', this.visibilityChange);
+    // when issue status changes, we need to refresh data
+    $(document).on('issuable:change', this.refresh);
+    // ajax:events that happen on Form when actions like Reopen, Close are performed on Issues and MRs.
+    $(document).on('ajax:success', '.js-main-target-form', this.addNote);
+    $(document).on('ajax:success', '.js-discussion-note-form', this.addDiscussionNote);
+    $(document).on('ajax:success', '.js-main-target-form', this.resetMainTargetForm);
+    $(document).on('ajax:complete', '.js-main-target-form', this.reenableTargetFormSubmitButton);
+    // when a key is clicked on the notes
+    $(document).on('keydown', '.js-note-text', this.keydownNoteText);
+    // When the URL fragment/hash has changed, `#note_xxx`
+    return $(window).on('hashchange', this.onHashChange);
+  }
+
+  cleanBinding() {
+    $(document).off('click', '.js-note-edit');
+    $(document).off('click', '.note-edit-cancel');
+    $(document).off('click', '.js-note-delete');
+    $(document).off('click', '.js-note-attachment-delete');
+    $(document).off('click', '.js-discussion-reply-button');
+    $(document).off('click', '.js-add-diff-note-button');
+    $(document).off('visibilitychange');
+    $(document).off('keyup input', '.js-note-text');
+    $(document).off('click', '.js-note-target-reopen');
+    $(document).off('click', '.js-note-target-close');
+    $(document).off('click', '.js-note-discard');
+    $(document).off('keydown', '.js-note-text');
+    $(document).off('click', '.js-comment-resolve-button');
+    $(document).off('click', '.system-note-commit-list-toggler');
+    $(document).off('ajax:success', '.js-main-target-form');
+    $(document).off('ajax:success', '.js-discussion-note-form');
+    $(document).off('ajax:complete', '.js-main-target-form');
+    $(window).off('hashchange', this.onHashChange);
+  }
+
+  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');
+    const submitButton = form.querySelector('.js-comment-type-dropdown .js-comment-submit-button');
+    const closeButton = form.querySelector('.js-note-target-close');
+    const reopenButton = form.querySelector('.js-note-target-reopen');
+
+    const commentTypeToggle = new CommentTypeToggle({
+      dropdownTrigger,
+      dropdownList,
+      noteTypeInput,
+      submitButton,
+      closeButton,
+      reopenButton,
+    });
+
+    commentTypeToggle.initDroplab();
+  }
+
+  keydownNoteText(e) {
+    var $textarea, discussionNoteForm, editNote, myLastNote, myLastNoteEditBtn, newText, originalText;
+    if (gl.utils.isMetaKey(e)) {
+      return;
     }
 
-    Notes.prototype.setViewType = function(view) {
-      this.view = Cookies.get('diff_view') || view;
-    };
-
-    Notes.prototype.addBinding = function() {
-      // Edit note link
-      $(document).on('click', '.js-note-edit', this.showEditForm.bind(this));
-      $(document).on('click', '.note-edit-cancel', this.cancelEdit);
-      // Reopen and close actions for Issue/MR combined with note form submit
-      $(document).on('click', '.js-comment-submit-button', this.postComment);
-      $(document).on('click', '.js-comment-save-button', this.updateComment);
-      $(document).on('keyup input', '.js-note-text', this.updateTargetButtons);
-      // resolve a discussion
-      $(document).on('click', '.js-comment-resolve-button', this.postComment);
-      // remove a note (in general)
-      $(document).on('click', '.js-note-delete', this.removeNote);
-      // delete note attachment
-      $(document).on('click', '.js-note-attachment-delete', this.removeAttachment);
-      // reset main target form when clicking discard
-      $(document).on('click', '.js-note-discard', this.resetMainTargetForm);
-      // update the file name when an attachment is selected
-      $(document).on('change', '.js-note-attachment-input', this.updateFormAttachment);
-      // reply to diff/discussion notes
-      $(document).on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
-      // add diff note
-      $(document).on('click', '.js-add-diff-note-button', this.onAddDiffNote);
-      // hide diff note form
-      $(document).on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm);
-      // toggle commit list
-      $(document).on('click', '.system-note-commit-list-toggler', this.toggleCommitList);
-      // fetch notes when tab becomes visible
-      $(document).on('visibilitychange', this.visibilityChange);
-      // when issue status changes, we need to refresh data
-      $(document).on('issuable:change', this.refresh);
-      // ajax:events that happen on Form when actions like Reopen, Close are performed on Issues and MRs.
-      $(document).on('ajax:success', '.js-main-target-form', this.addNote);
-      $(document).on('ajax:success', '.js-discussion-note-form', this.addDiscussionNote);
-      $(document).on('ajax:success', '.js-main-target-form', this.resetMainTargetForm);
-      $(document).on('ajax:complete', '.js-main-target-form', this.reenableTargetFormSubmitButton);
-      // when a key is clicked on the notes
-      $(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() {
-      $(document).off('click', '.js-note-edit');
-      $(document).off('click', '.note-edit-cancel');
-      $(document).off('click', '.js-note-delete');
-      $(document).off('click', '.js-note-attachment-delete');
-      $(document).off('click', '.js-discussion-reply-button');
-      $(document).off('click', '.js-add-diff-note-button');
-      $(document).off('visibilitychange');
-      $(document).off('keyup input', '.js-note-text');
-      $(document).off('click', '.js-note-target-reopen');
-      $(document).off('click', '.js-note-target-close');
-      $(document).off('click', '.js-note-discard');
-      $(document).off('keydown', '.js-note-text');
-      $(document).off('click', '.js-comment-resolve-button');
-      $(document).off('click', '.system-note-commit-list-toggler');
-      $(document).off('ajax:success', '.js-main-target-form');
-      $(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) {
-      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');
-      const submitButton = form.querySelector('.js-comment-type-dropdown .js-comment-submit-button');
-      const closeButton = form.querySelector('.js-note-target-close');
-      const reopenButton = form.querySelector('.js-note-target-reopen');
-
-      const commentTypeToggle = new CommentTypeToggle({
-        dropdownTrigger,
-        dropdownList,
-        noteTypeInput,
-        submitButton,
-        closeButton,
-        reopenButton,
-      });
-
-      commentTypeToggle.initDroplab();
-    };
-
-    Notes.prototype.keydownNoteText = function(e) {
-      var $textarea, discussionNoteForm, editNote, myLastNote, myLastNoteEditBtn, newText, originalText;
-      if (gl.utils.isMetaKey(e)) {
-        return;
-      }
-
-      $textarea = $(e.target);
-      // Edit previous note when UP arrow is hit
-      switch (e.which) {
-        case 38:
+    $textarea = $(e.target);
+    // Edit previous note when UP arrow is hit
+    switch (e.which) {
+      case 38:
+        if ($textarea.val() !== '') {
+          return;
+        }
+        myLastNote = $(`li.note[data-author-id='${gon.current_user_id}'][data-editable]:last`, $textarea.closest('.note, .notes_holder, #notes'));
+        if (myLastNote.length) {
+          myLastNoteEditBtn = myLastNote.find('.js-note-edit');
+          return myLastNoteEditBtn.trigger('click', [true, myLastNote]);
+        }
+        break;
+      // Cancel creating diff note or editing any note when ESCAPE is hit
+      case 27:
+        discussionNoteForm = $textarea.closest('.js-discussion-note-form');
+        if (discussionNoteForm.length) {
           if ($textarea.val() !== '') {
-            return;
-          }
-          myLastNote = $(`li.note[data-author-id='${gon.current_user_id}'][data-editable]:last`, $textarea.closest('.note, .notes_holder, #notes'));
-          if (myLastNote.length) {
-            myLastNoteEditBtn = myLastNote.find('.js-note-edit');
-            return myLastNoteEditBtn.trigger('click', [true, myLastNote]);
-          }
-          break;
-        // Cancel creating diff note or editing any note when ESCAPE is hit
-        case 27:
-          discussionNoteForm = $textarea.closest('.js-discussion-note-form');
-          if (discussionNoteForm.length) {
-            if ($textarea.val() !== '') {
-              if (!confirm('Are you sure you want to cancel creating this comment?')) {
-                return;
-              }
+            if (!confirm('Are you sure you want to cancel creating this comment?')) {
+              return;
             }
-            this.removeDiscussionNoteForm(discussionNoteForm);
-            return;
           }
-          editNote = $textarea.closest('.note');
-          if (editNote.length) {
-            originalText = $textarea.closest('form').data('original-note');
-            newText = $textarea.val();
-            if (originalText !== newText) {
-              if (!confirm('Are you sure you want to cancel editing this comment?')) {
-                return;
-              }
+          this.removeDiscussionNoteForm(discussionNoteForm);
+          return;
+        }
+        editNote = $textarea.closest('.note');
+        if (editNote.length) {
+          originalText = $textarea.closest('form').data('original-note');
+          newText = $textarea.val();
+          if (originalText !== newText) {
+            if (!confirm('Are you sure you want to cancel editing this comment?')) {
+              return;
             }
-            return this.removeNoteEditForm(editNote);
           }
-      }
-    };
+          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);
-    };
+    }
+    return Notes.interval = setInterval((function(_this) {
+      return function() {
+        return _this.refresh();
+      };
+    })(this), this.pollingInterval);
+  }
 
-    Notes.prototype.refresh = function() {
-      if (!document.hidden) {
-        return this.getContent();
-      }
-    };
+  refresh() {
+    if (!document.hidden) {
+      return this.getContent();
+    }
+  }
 
-    Notes.prototype.getContent = function() {
-      if (this.refreshing) {
-        return;
-      }
-      this.refreshing = true;
-      return $.ajax({
-        url: this.notes_url,
-        headers: { 'X-Last-Fetched-At': this.last_fetched_at },
-        dataType: 'json',
-        success: (function(_this) {
-          return function(data) {
-            var notes;
-            notes = data.notes;
-            _this.last_fetched_at = data.last_fetched_at;
-            _this.setPollingInterval(data.notes.length);
-            return $.each(notes, function(i, note) {
-              _this.renderNote(note);
-            });
-          };
-        })(this)
-      }).always((function(_this) {
-        return function() {
-          return _this.refreshing = false;
+  getContent() {
+    if (this.refreshing) {
+      return;
+    }
+    this.refreshing = true;
+    return $.ajax({
+      url: this.notes_url,
+      headers: { 'X-Last-Fetched-At': this.last_fetched_at },
+      dataType: 'json',
+      success: (function(_this) {
+        return function(data) {
+          var notes;
+          notes = data.notes;
+          _this.last_fetched_at = data.last_fetched_at;
+          _this.setPollingInterval(data.notes.length);
+          return $.each(notes, function(i, note) {
+            _this.renderNote(note);
+          });
         };
-      })(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
-     */
-
-    Notes.prototype.setPollingInterval = function(shouldReset) {
-      var nthInterval;
-      if (shouldReset == null) {
-        shouldReset = true;
-      }
-      nthInterval = this.basePollingInterval * Math.pow(2, this.maxPollingSteps - 1);
-      if (shouldReset) {
-        this.pollingInterval = this.basePollingInterval;
-      } else if (this.pollingInterval < nthInterval) {
-        this.pollingInterval *= 2;
+      })(this)
+    }).always((function(_this) {
+      return function() {
+        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
+   */
+  setPollingInterval(shouldReset) {
+    var nthInterval;
+    if (shouldReset == null) {
+      shouldReset = true;
+    }
+    nthInterval = this.basePollingInterval * Math.pow(2, this.maxPollingSteps - 1);
+    if (shouldReset) {
+      this.pollingInterval = this.basePollingInterval;
+    } else if (this.pollingInterval < nthInterval) {
+      this.pollingInterval *= 2;
+    }
+    return this.initRefresh();
+  }
+
+  handleQuickActions(noteEntity) {
+    var votesBlock;
+    if (noteEntity.commands_changes) {
+      if ('merge' in noteEntity.commands_changes) {
+        Notes.checkMergeRequestStatus();
       }
-      return this.initRefresh();
-    };
-
-    Notes.prototype.handleQuickActions = function(noteEntity) {
-      var votesBlock;
-      if (noteEntity.commands_changes) {
-        if ('merge' in noteEntity.commands_changes) {
-          Notes.checkMergeRequestStatus();
-        }
 
-        if ('emoji_award' in noteEntity.commands_changes) {
-          votesBlock = $('.js-awards-block').eq(0);
-          gl.awardsHandler.addAwardToEmojiBar(votesBlock, noteEntity.commands_changes.emoji_award);
-          return gl.awardsHandler.scrollToAwards();
-        }
+      if ('emoji_award' in noteEntity.commands_changes) {
+        votesBlock = $('.js-awards-block').eq(0);
+        gl.awardsHandler.addAwardToEmojiBar(votesBlock, noteEntity.commands_changes.emoji_award);
+        return gl.awardsHandler.scrollToAwards();
       }
-    };
-
-    Notes.prototype.setupNewNote = function($note) {
-      // Update datetime format on the recent note
-      gl.utils.localTimeAgo($note.find('.js-timeago'), false);
-
-      this.collapseLongCommitList();
-      this.taskList.init();
-
-      // This stops the note highlight, #note_xxx`, from being removed after real time update
-      // The `:target` selector does not re-evaluate after we replace element in the DOM
-      Notes.updateNoteTargetSelector($note);
-      this.$noteToCleanHighlight = $note;
-    };
-
-    Notes.prototype.onHashChange = function() {
-      if (this.$noteToCleanHighlight) {
-        Notes.updateNoteTargetSelector(this.$noteToCleanHighlight);
-      }
-
-      this.$noteToCleanHighlight = null;
-    };
-
-    Notes.updateNoteTargetSelector = function($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
-     */
+  setupNewNote($note) {
+    // Update datetime format on the recent note
+    gl.utils.localTimeAgo($note.find('.js-timeago'), false);
 
-    Notes.prototype.renderNote = function(noteEntity, $form, $notesList = $('.main-notes-list')) {
-      if (noteEntity.discussion_html) {
-        return this.renderDiscussionNote(noteEntity, $form);
-      }
+    this.collapseLongCommitList();
+    this.taskList.init();
 
-      if (!noteEntity.valid) {
-        if (noteEntity.errors.commands_only) {
-          this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline);
-          this.refresh();
-        }
-        return;
-      }
+    // This stops the note highlight, #note_xxx`, from being removed after real time update
+    // The `:target` selector does not re-evaluate after we replace element in the DOM
+    Notes.updateNoteTargetSelector($note);
+    this.$noteToCleanHighlight = $note;
+  }
 
-      const $note = $notesList.find(`#note_${noteEntity.id}`);
-      if (Notes.isNewNote(noteEntity, this.note_ids)) {
-        this.note_ids.push(noteEntity.id);
+  onHashChange() {
+    if (this.$noteToCleanHighlight) {
+      Notes.updateNoteTargetSelector(this.$noteToCleanHighlight);
+    }
 
-        if ($notesList.length) {
-          $notesList.find('.system-note.being-posted').remove();
-        }
-        const $newNote = Notes.animateAppendNote(noteEntity.html, $notesList);
+    this.$noteToCleanHighlight = null;
+  }
+
+  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
+   */
+  renderNote(noteEntity, $form, $notesList = $('.main-notes-list')) {
+    if (noteEntity.discussion_html) {
+      return this.renderDiscussionNote(noteEntity, $form);
+    }
 
-        this.setupNewNote($newNote);
+    if (!noteEntity.valid) {
+      if (noteEntity.errors.commands_only) {
+        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline);
         this.refresh();
-        return this.updateNotesCount(1);
       }
-      // The server can send the same update multiple times so we need to make sure to only update once per actual update.
-      else if (Notes.isUpdatedNote(noteEntity, $note)) {
-        const isEditing = $note.hasClass('is-editing');
-        const initialContent = normalizeNewlines(
-          $note.find('.original-note-content').text().trim()
-        );
-        const $textarea = $note.find('.js-note-text');
-        const currentContent = $textarea.val();
-        // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
-        const sanitizedNoteNote = normalizeNewlines(noteEntity.note);
-        const isTextareaUntouched = currentContent === initialContent || currentContent === sanitizedNoteNote;
-
-        if (isEditing && isTextareaUntouched) {
-          $textarea.val(noteEntity.note);
-          this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
-        }
-        else if (isEditing && !isTextareaUntouched) {
-          this.putConflictEditWarningInPlace(noteEntity, $note);
-          this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
-        }
-        else {
-          const $updatedNote = Notes.animateUpdateNote(noteEntity.html, $note);
-          this.setupNewNote($updatedNote);
-        }
-      }
-    };
-
-    Notes.prototype.isParallelView = function() {
-      return Cookies.get('diff_view') === 'parallel';
-    };
-
-    /*
-    Render note in discussion area.
-
-    Note: for rendering inline notes use renderDiscussionNote
-     */
+      return;
+    }
 
-    Notes.prototype.renderDiscussionNote = function(noteEntity, $form) {
-      var discussionContainer, form, row, lineType, diffAvatarContainer;
-      if (!Notes.isNewNote(noteEntity, this.note_ids)) {
-        return;
-      }
+    const $note = $notesList.find(`#note_${noteEntity.id}`);
+    if (Notes.isNewNote(noteEntity, this.note_ids)) {
       this.note_ids.push(noteEntity.id);
-      form = $form || $(`.js-discussion-note-form[data-discussion-id="${noteEntity.discussion_id}"]`);
-      row = form.closest('tr');
-      lineType = this.isParallelView() ? form.find('#line_type').val() : 'old';
-      diffAvatarContainer = row.prevAll('.line_holder').first().find('.js-avatar-container.' + lineType + '_line');
-      // is this the first note of discussion?
-      discussionContainer = $(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
-      if (!discussionContainer.length) {
-        discussionContainer = form.closest('.discussion').find('.notes');
-      }
-      if (discussionContainer.length === 0) {
-        if (noteEntity.diff_discussion_html) {
-          var $discussion = $(noteEntity.diff_discussion_html).renderGFM();
-
-          if (!this.isParallelView() || row.hasClass('js-temp-notes-holder')) {
-            // insert the note and the reply button after the temp row
-            row.after($discussion);
-          } else {
-            // Merge new discussion HTML in
-            var $notes = $discussion.find(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
-            var contentContainerClass = '.' + $notes.closest('.notes_content')
-              .attr('class')
-              .split(' ')
-              .join('.');
-
-            row.find(contentContainerClass + ' .content').append($notes.closest('.content').children());
-          }
-        }
-        // Init discussion on 'Discussion' page if it is merge request page
-        const page = $('body').attr('data-page');
-        if ((page && page.indexOf('projects:merge_request') !== -1) || !noteEntity.diff_discussion_html) {
-          Notes.animateAppendNote(noteEntity.discussion_html, $('.main-notes-list'));
-        }
-      } else {
-        // append new note to all matching discussions
-        Notes.animateAppendNote(noteEntity.html, discussionContainer);
-      }
 
-      if (typeof gl.diffNotesCompileComponents !== 'undefined' && noteEntity.discussion_resolvable) {
-        gl.diffNotesCompileComponents();
-        this.renderDiscussionAvatar(diffAvatarContainer, noteEntity);
+      if ($notesList.length) {
+        $notesList.find('.system-note.being-posted').remove();
       }
+      const $newNote = Notes.animateAppendNote(noteEntity.html, $notesList);
 
-      gl.utils.localTimeAgo($('.js-timeago'), false);
-      Notes.checkMergeRequestStatus();
+      this.setupNewNote($newNote);
+      this.refresh();
       return this.updateNotesCount(1);
-    };
-
-    Notes.prototype.getLineHolder = function(changesDiscussionContainer) {
-      return $(changesDiscussionContainer).closest('.notes_holder')
-        .prevAll('.line_holder')
-        .first()
-        .get(0);
-    };
-
-    Notes.prototype.renderDiscussionAvatar = function(diffAvatarContainer, noteEntity) {
-      var commentButton = diffAvatarContainer.find('.js-add-diff-note-button');
-      var avatarHolder = diffAvatarContainer.find('.diff-comment-avatar-holders');
-
-      if (!avatarHolder.length) {
-        avatarHolder = document.createElement('diff-note-avatars');
-        avatarHolder.setAttribute('discussion-id', noteEntity.discussion_id);
-
-        diffAvatarContainer.append(avatarHolder);
+    }
+    // The server can send the same update multiple times so we need to make sure to only update once per actual update.
+    else if (Notes.isUpdatedNote(noteEntity, $note)) {
+      const isEditing = $note.hasClass('is-editing');
+      const initialContent = normalizeNewlines(
+        $note.find('.original-note-content').text().trim()
+      );
+      const $textarea = $note.find('.js-note-text');
+      const currentContent = $textarea.val();
+      // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
+      const sanitizedNoteNote = normalizeNewlines(noteEntity.note);
+      const isTextareaUntouched = currentContent === initialContent || currentContent === sanitizedNoteNote;
 
-        gl.diffNotesCompileComponents();
+      if (isEditing && isTextareaUntouched) {
+        $textarea.val(noteEntity.note);
+        this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
       }
-
-      if (commentButton.length) {
-        commentButton.remove();
+      else if (isEditing && !isTextareaUntouched) {
+        this.putConflictEditWarningInPlace(noteEntity, $note);
+        this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
       }
-    };
-
-    /*
-    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) {
-      var form;
-      form = $('.js-main-target-form');
-      // remove validation errors
-      form.find('.js-errors').remove();
-      // reset text and preview
-      form.find('.js-md-write-button').click();
-      form.find('.js-note-text').val('').trigger('input');
-      form.find('.js-note-text').data('autosave').reset();
-
-      var event = document.createEvent('Event');
-      event.initEvent('autosize:update', true, false);
-      form.find('.js-autosize')[0].dispatchEvent(event);
-
-      this.updateTargetButtons(e);
-    };
-
-    Notes.prototype.reenableTargetFormSubmitButton = function() {
-      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.
-     */
-
-    Notes.prototype.setupMainTargetNoteForm = function() {
-      var form;
-      // find the form
-      form = $('.js-new-note-form');
-      // Set a global clone of the form for later cloning
-      this.formClone = form.clone();
-      // show the form
-      this.setupNoteForm(form);
-      // fix classes
-      form.removeClass('js-new-note-form');
-      form.addClass('js-main-target-form');
-      form.find('#note_line_code').remove();
-      form.find('#note_position').remove();
-      form.find('#note_type').val('');
-      form.find('#in_reply_to_discussion_id').remove();
-      form.find('.js-comment-resolve-button').closest('comment-and-resolve-btn').remove();
-      this.parentTimeline = form.parents('.timeline');
-
-      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
-     */
-
-    Notes.prototype.setupNoteForm = function(form) {
-      var textarea, key;
-      new gl.GLForm(form, this.enableGFM);
-      textarea = form.find('.js-note-text');
-      key = [
-        'Note',
-        form.find('#note_noteable_type').val(),
-        form.find('#note_noteable_id').val(),
-        form.find('#note_commit_id').val(),
-        form.find('#note_type').val(),
-        form.find('#in_reply_to_discussion_id').val(),
-
-        // LegacyDiffNote
-        form.find('#note_line_code').val(),
-
-        // DiffNote
-        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.
-     */
-
-    Notes.prototype.addNote = function($form, note) {
-      return this.renderNote(note);
-    };
-
-    Notes.prototype.addNoteError = function($form) {
-      let formParentTimeline;
-      if ($form.hasClass('js-main-target-form')) {
-        formParentTimeline = $form.parents('.timeline');
-      } else if ($form.hasClass('js-discussion-note-form')) {
-        formParentTimeline = $form.closest('.discussion-notes').find('.notes');
+      else {
+        const $updatedNote = Notes.animateUpdateNote(noteEntity.html, $note);
+        this.setupNewNote($updatedNote);
       }
-      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
-
-    Adds new note to list.
-     */
-
-    Notes.prototype.addDiscussionNote = function($form, note, isNewDiffComment) {
-      if ($form.attr('data-resolve-all') != null) {
-        var projectPath = $form.data('project-path');
-        var discussionId = $form.data('discussion-id');
-        var mergeRequestId = $form.data('noteable-iid');
+    }
+  }
+
+  isParallelView() {
+    return Cookies.get('diff_view') === 'parallel';
+  }
+
+  /**
+   * Render note in discussion area.
+   *
+   * Note: for rendering inline notes use renderDiscussionNote
+   */
+  renderDiscussionNote(noteEntity, $form) {
+    var discussionContainer, form, row, lineType, diffAvatarContainer;
+    if (!Notes.isNewNote(noteEntity, this.note_ids)) {
+      return;
+    }
+    this.note_ids.push(noteEntity.id);
+    form = $form || $(`.js-discussion-note-form[data-discussion-id="${noteEntity.discussion_id}"]`);
+    row = form.closest('tr');
+    lineType = this.isParallelView() ? form.find('#line_type').val() : 'old';
+    diffAvatarContainer = row.prevAll('.line_holder').first().find('.js-avatar-container.' + lineType + '_line');
+    // is this the first note of discussion?
+    discussionContainer = $(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
+    if (!discussionContainer.length) {
+      discussionContainer = form.closest('.discussion').find('.notes');
+    }
+    if (discussionContainer.length === 0) {
+      if (noteEntity.diff_discussion_html) {
+        var $discussion = $(noteEntity.diff_discussion_html).renderGFM();
 
-        if (ResolveService != null) {
-          ResolveService.toggleResolveForDiscussion(mergeRequestId, discussionId);
+        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder')) {
+          // insert the note and the reply button after the temp row
+          row.after($discussion);
+        } else {
+          // Merge new discussion HTML in
+          var $notes = $discussion.find(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
+          var contentContainerClass = '.' + $notes.closest('.notes_content')
+            .attr('class')
+            .split(' ')
+            .join('.');
+
+          row.find(contentContainerClass + ' .content').append($notes.closest('.content').children());
         }
       }
-
-      this.renderNote(note, $form);
-      // cleanup after successfully creating a diff/discussion note
-      if (isNewDiffComment) {
-        this.removeDiscussionNoteForm($form);
+      // Init discussion on 'Discussion' page if it is merge request page
+      const page = $('body').attr('data-page');
+      if ((page && page.indexOf('projects:merge_request') !== -1) || !noteEntity.diff_discussion_html) {
+        Notes.animateAppendNote(noteEntity.discussion_html, $('.main-notes-list'));
       }
-    };
+    } else {
+      // append new note to all matching discussions
+      Notes.animateAppendNote(noteEntity.html, discussionContainer);
+    }
 
-    /*
-    Called in response to the edit note form being submitted
+    if (typeof gl.diffNotesCompileComponents !== 'undefined' && noteEntity.discussion_resolvable) {
+      gl.diffNotesCompileComponents();
+      this.renderDiscussionAvatar(diffAvatarContainer, noteEntity);
+    }
 
-    Updates the current note field.
-     */
+    gl.utils.localTimeAgo($('.js-timeago'), false);
+    Notes.checkMergeRequestStatus();
+    return this.updateNotesCount(1);
+  }
 
-    Notes.prototype.updateNote = function(noteEntity, $targetNote) {
-      var $noteEntityEl, $note_li;
-      // Convert returned HTML to a jQuery object so we can modify it further
-      $noteEntityEl = $(noteEntity.html);
-      $noteEntityEl.addClass('fade-in-full');
-      this.revertNoteEditForm($targetNote);
-      $noteEntityEl.renderGFM();
-      // Find the note's `li` element by ID and replace it with the updated HTML
-      $note_li = $('.note-row-' + noteEntity.id);
+  getLineHolder(changesDiscussionContainer) {
+    return $(changesDiscussionContainer).closest('.notes_holder')
+      .prevAll('.line_holder')
+      .first()
+      .get(0);
+  }
 
-      $note_li.replaceWith($noteEntityEl);
-      this.setupNewNote($noteEntityEl);
+  renderDiscussionAvatar(diffAvatarContainer, noteEntity) {
+    var commentButton = diffAvatarContainer.find('.js-add-diff-note-button');
+    var avatarHolder = diffAvatarContainer.find('.diff-comment-avatar-holders');
 
-      if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-        gl.diffNotesCompileComponents();
-      }
-    };
+    if (!avatarHolder.length) {
+      avatarHolder = document.createElement('diff-note-avatars');
+      avatarHolder.setAttribute('discussion-id', noteEntity.discussion_id);
 
-    Notes.prototype.checkContentToAllowEditing = function($el) {
-      var initialContent = $el.find('.original-note-content').text().trim();
-      var currentContent = $el.find('.js-note-text').val();
-      var isAllowed = true;
+      diffAvatarContainer.append(avatarHolder);
 
-      if (currentContent === initialContent) {
-        this.removeNoteEditForm($el);
-      }
-      else {
-        var $buttons = $el.find('.note-form-actions');
-        var isWidgetVisible = gl.utils.isInViewport($el.get(0));
-
-        if (!isWidgetVisible) {
-          gl.utils.scrollToElement($el);
-        }
+      gl.diffNotesCompileComponents();
+    }
 
-        $el.find('.js-finish-edit-warning').show();
-        isAllowed = false;
-      }
+    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.
+   */
+  resetMainTargetForm(e) {
+    var form;
+    form = $('.js-main-target-form');
+    // remove validation errors
+    form.find('.js-errors').remove();
+    // reset text and preview
+    form.find('.js-md-write-button').click();
+    form.find('.js-note-text').val('').trigger('input');
+    form.find('.js-note-text').data('autosave').reset();
+
+    var event = document.createEvent('Event');
+    event.initEvent('autosize:update', true, false);
+    form.find('.js-autosize')[0].dispatchEvent(event);
+
+    this.updateTargetButtons(e);
+  }
+
+  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.
+   */
+  setupMainTargetNoteForm() {
+    var form;
+    // find the form
+    form = $('.js-new-note-form');
+    // Set a global clone of the form for later cloning
+    this.formClone = form.clone();
+    // show the form
+    this.setupNoteForm(form);
+    // fix classes
+    form.removeClass('js-new-note-form');
+    form.addClass('js-main-target-form');
+    form.find('#note_line_code').remove();
+    form.find('#note_position').remove();
+    form.find('#note_type').val('');
+    form.find('#in_reply_to_discussion_id').remove();
+    form.find('.js-comment-resolve-button').closest('comment-and-resolve-btn').remove();
+    this.parentTimeline = form.parents('.timeline');
+
+    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
+   */
+  setupNoteForm(form) {
+    var textarea, key;
+    new gl.GLForm(form, this.enableGFM);
+    textarea = form.find('.js-note-text');
+    key = [
+      'Note',
+      form.find('#note_noteable_type').val(),
+      form.find('#note_noteable_id').val(),
+      form.find('#note_commit_id').val(),
+      form.find('#note_type').val(),
+      form.find('#in_reply_to_discussion_id').val(),
 
-      return isAllowed;
-    };
+      // LegacyDiffNote
+      form.find('#note_line_code').val(),
 
-    /*
-    Called in response to clicking the edit note link
+      // DiffNote
+      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.
+   */
+  addNote($form, note) {
+    return this.renderNote(note);
+  }
+
+  addNoteError($form) {
+    let formParentTimeline;
+    if ($form.hasClass('js-main-target-form')) {
+      formParentTimeline = $form.parents('.timeline');
+    } else if ($form.hasClass('js-discussion-note-form')) {
+      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);
+  }
+
+  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
+   *
+   * Adds new note to list.
+   */
+  addDiscussionNote($form, note, isNewDiffComment) {
+    if ($form.attr('data-resolve-all') != null) {
+      var projectPath = $form.data('project-path');
+      var discussionId = $form.data('discussion-id');
+      var mergeRequestId = $form.data('noteable-iid');
+
+      if (ResolveService != null) {
+        ResolveService.toggleResolveForDiscussion(mergeRequestId, discussionId);
+      }
+    }
 
-    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) {
-      e.preventDefault();
+    this.renderNote(note, $form);
+    // cleanup after successfully creating a diff/discussion note
+    if (isNewDiffComment) {
+      this.removeDiscussionNoteForm($form);
+    }
+  }
+
+  /**
+   * Called in response to the edit note form being submitted
+   *
+   * Updates the current note field.
+   */
+  updateNote(noteEntity, $targetNote) {
+    var $noteEntityEl, $note_li;
+    // Convert returned HTML to a jQuery object so we can modify it further
+    $noteEntityEl = $(noteEntity.html);
+    $noteEntityEl.addClass('fade-in-full');
+    this.revertNoteEditForm($targetNote);
+    $noteEntityEl.renderGFM();
+    // Find the note's `li` element by ID and replace it with the updated HTML
+    $note_li = $('.note-row-' + noteEntity.id);
+
+    $note_li.replaceWith($noteEntityEl);
+    this.setupNewNote($noteEntityEl);
+
+    if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+      gl.diffNotesCompileComponents();
+    }
+  }
 
-      var $target = $(e.target);
-      var $editForm = $(this.getEditFormSelector($target));
-      var $note = $target.closest('.note');
-      var $currentlyEditing = $('.note.is-editing:visible');
+  checkContentToAllowEditing($el) {
+    var initialContent = $el.find('.original-note-content').text().trim();
+    var currentContent = $el.find('.js-note-text').val();
+    var isAllowed = true;
 
-      if ($currentlyEditing.length) {
-        var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing);
+    if (currentContent === initialContent) {
+      this.removeNoteEditForm($el);
+    }
+    else {
+      var $buttons = $el.find('.note-form-actions');
+      var isWidgetVisible = gl.utils.isInViewport($el.get(0));
 
-        if (!isEditAllowed) {
-          return;
-        }
+      if (!isWidgetVisible) {
+        gl.utils.scrollToElement($el);
       }
 
-      $note.find('.js-note-attachment-delete').show();
-      $editForm.addClass('current-note-edit-form');
-      $note.addClass('is-editing');
-      this.putEditFormInPlace($target);
-    };
+      $el.find('.js-finish-edit-warning').show();
+      isAllowed = false;
+    }
 
-    /*
-    Called in response to clicking the edit note link
+    return isAllowed;
+  }
 
-    Hides edit form and restores the original note text to the editor textarea.
-     */
+  /**
+   * 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
+   */
+  showEditForm(e, scrollTo, myLastNote) {
+    e.preventDefault();
 
-    Notes.prototype.cancelEdit = function(e) {
-      e.preventDefault();
-      const $target = $(e.target);
-      const $note = $target.closest('.note');
-      const noteId = $note.attr('data-note-id');
+    var $target = $(e.target);
+    var $editForm = $(this.getEditFormSelector($target));
+    var $note = $target.closest('.note');
+    var $currentlyEditing = $('.note.is-editing:visible');
 
-      this.revertNoteEditForm($target);
+    if ($currentlyEditing.length) {
+      var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing);
 
-      if (this.updatedNotesTrackingMap[noteId]) {
-        const $newNote = $(this.updatedNotesTrackingMap[noteId].html);
-        $note.replaceWith($newNote);
-        this.setupNewNote($newNote);
-        // Now that we have taken care of the update, clear it out
-        delete this.updatedNotesTrackingMap[noteId];
-      }
-      else {
-        $note.find('.js-finish-edit-warning').hide();
-        this.removeNoteEditForm($note);
+      if (!isEditAllowed) {
+        return;
       }
-    };
-
-    Notes.prototype.revertNoteEditForm = function($target) {
-      $target = $target || $('.note.is-editing:visible');
-      var selector = this.getEditFormSelector($target);
-      var $editForm = $(selector);
+    }
 
-      $editForm.insertBefore('.notes-form');
-      $editForm.find('.js-comment-save-button').enable();
-      $editForm.find('.js-finish-edit-warning').hide();
-    };
+    $note.find('.js-note-attachment-delete').show();
+    $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.
+   */
+  cancelEdit(e) {
+    e.preventDefault();
+    const $target = $(e.target);
+    const $note = $target.closest('.note');
+    const noteId = $note.attr('data-note-id');
+
+    this.revertNoteEditForm($target);
+
+    if (this.updatedNotesTrackingMap[noteId]) {
+      const $newNote = $(this.updatedNotesTrackingMap[noteId].html);
+      $note.replaceWith($newNote);
+      this.setupNewNote($newNote);
+      // Now that we have taken care of the update, clear it out
+      delete this.updatedNotesTrackingMap[noteId];
+    }
+    else {
+      $note.find('.js-finish-edit-warning').hide();
+      this.removeNoteEditForm($note);
+    }
+  }
 
-    Notes.prototype.getEditFormSelector = function($el) {
-      var selector = '.note-edit-form:not(.mr-note-edit-form)';
+  revertNoteEditForm($target) {
+    $target = $target || $('.note.is-editing:visible');
+    var selector = this.getEditFormSelector($target);
+    var $editForm = $(selector);
 
-      if ($el.parents('#diffs').length) {
-        selector = '.note-edit-form.mr-note-edit-form';
-      }
+    $editForm.insertBefore('.notes-form');
+    $editForm.find('.js-comment-save-button').enable();
+    $editForm.find('.js-finish-edit-warning').hide();
+  }
 
-      return selector;
-    };
+  getEditFormSelector($el) {
+    var selector = '.note-edit-form:not(.mr-note-edit-form)';
 
-    Notes.prototype.removeNoteEditForm = function($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'));
-    };
+    if ($el.parents('#diffs').length) {
+      selector = '.note-edit-form.mr-note-edit-form';
+    }
 
-    /*
-    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) {
-      var noteElId, noteId, dataNoteId, $note, lineHolder;
-      $note = $(e.currentTarget).closest('.note');
-      noteElId = $note.attr('id');
-      noteId = $note.attr('data-note-id');
-      lineHolder = $(e.currentTarget).closest('.notes[data-discussion-id]')
-        .closest('.notes_holder')
-        .prev('.line_holder');
-      $(`.note[id="${noteElId}"]`).each((function(_this) {
-        // A same note appears in the "Discussion" and in the "Changes" tab, we have
-        // to remove all. Using $('.note[id='noteId']') ensure we get all the notes,
-        // where $('#noteId') would return only one.
-        return function(i, el) {
-          var $note, $notes;
-          $note = $(el);
-          $notes = $note.closest('.discussion-notes');
-
-          if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-            if (gl.diffNoteApps[noteElId]) {
-              gl.diffNoteApps[noteElId].$destroy();
-            }
+    return selector;
+  }
+
+  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.
+   */
+  removeNote(e) {
+    var noteElId, noteId, dataNoteId, $note, lineHolder;
+    $note = $(e.currentTarget).closest('.note');
+    noteElId = $note.attr('id');
+    noteId = $note.attr('data-note-id');
+    lineHolder = $(e.currentTarget).closest('.notes[data-discussion-id]')
+      .closest('.notes_holder')
+      .prev('.line_holder');
+    $(`.note[id="${noteElId}"]`).each((function(_this) {
+      // A same note appears in the "Discussion" and in the "Changes" tab, we have
+      // to remove all. Using $('.note[id='noteId']') ensure we get all the notes,
+      // where $('#noteId') would return only one.
+      return function(i, el) {
+        var $note, $notes;
+        $note = $(el);
+        $notes = $note.closest('.discussion-notes');
+
+        if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+          if (gl.diffNoteApps[noteElId]) {
+            gl.diffNoteApps[noteElId].$destroy();
           }
+        }
 
-          $note.remove();
+        $note.remove();
 
-          // check if this is the last note for this line
-          if ($notes.find('.note').length === 0) {
-            var notesTr = $notes.closest('tr');
+        // check if this is the last note for this line
+        if ($notes.find('.note').length === 0) {
+          var notesTr = $notes.closest('tr');
 
-            // "Discussions" tab
-            $notes.closest('.timeline-entry').remove();
+          // "Discussions" tab
+          $notes.closest('.timeline-entry').remove();
 
-            // The notes tr can contain multiple lists of notes, like on the parallel diff
-            if (notesTr.find('.discussion-notes').length > 1) {
-              $notes.remove();
-            } else {
-              notesTr.remove();
-            }
+          // The notes tr can contain multiple lists of notes, like on the parallel diff
+          if (notesTr.find('.discussion-notes').length > 1) {
+            $notes.remove();
+          } else {
+            notesTr.remove();
           }
-        };
-      })(this));
-
-      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
-     */
+        }
+      };
+    })(this));
+
+    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
+   */
+  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.
+   */
+  onReplyToDiscussionNote(e) {
+    this.replyToDiscussionNote(e.target);
+  }
+
+  replyToDiscussionNote(target) {
+    var form, replyLink;
+    form = this.cleanForm(this.formClone.clone());
+    replyLink = $(target).closest('.js-discussion-reply-button');
+    // insert the form after the button
+    replyLink
+      .closest('.discussion-reply-holder')
+      .hide()
+      .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.
+   */
+  setupDiscussionNoteForm(dataHolder, form) {
+    // setup note target
+    var discussionID = dataHolder.data('discussionId');
+
+    if (discussionID) {
+      form.attr('data-discussion-id', discussionID);
+      form.find('#in_reply_to_discussion_id').val(discussionID);
+    }
 
-    Notes.prototype.removeAttachment = function() {
-      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();
-    };
+    form.attr('data-line-code', dataHolder.data('lineCode'));
+    form.find('#line_type').val(dataHolder.data('lineType'));
 
-    /*
-    Called when clicking on the "reply" button for a diff line.
+    form.find('#note_noteable_type').val(dataHolder.data('noteableType'));
+    form.find('#note_noteable_id').val(dataHolder.data('noteableId'));
+    form.find('#note_commit_id').val(dataHolder.data('commitId'));
+    form.find('#note_type').val(dataHolder.data('noteType'));
 
-    Shows the note form below the notes.
-     */
+    // LegacyDiffNote
+    form.find('#note_line_code').val(dataHolder.data('lineCode'));
 
-    Notes.prototype.onReplyToDiscussionNote = function(e) {
-      this.replyToDiscussionNote(e.target);
-    };
+    // DiffNote
+    form.find('#note_position').val(dataHolder.attr('data-position'));
 
-    Notes.prototype.replyToDiscussionNote = function(target) {
-      var form, replyLink;
-      form = this.cleanForm(this.formClone.clone());
-      replyLink = $(target).closest('.js-discussion-reply-button');
-      // insert the form after the button
-      replyLink
-        .closest('.discussion-reply-holder')
-        .hide()
-        .after(form);
-      // show the form
-      return this.setupDiscussionNoteForm(replyLink, form);
-    };
+    form.find('.js-note-discard').show().removeClass('js-note-discard').addClass('js-close-discussion-note-form').text(form.find('.js-close-discussion-note-form').data('cancel-text'));
+    form.find('.js-note-target-close').remove();
+    form.find('.js-note-new-discussion').remove();
+    this.setupNoteForm(form);
 
-    /*
-    Shows the diff or discussion form and does some setup on it.
+    form
+      .removeClass('js-main-target-form')
+      .addClass('discussion-form js-discussion-note-form');
 
-    Sets some hidden fields in the form.
+    if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+      var $commentBtn = form.find('comment-and-resolve-btn');
+      $commentBtn.attr(':discussion-id', `'${discussionID}'`);
 
-    Note: dataHolder must have the "discussionId" and "lineCode" data attributes set.
-     */
+      gl.diffNotesCompileComponents();
+    }
 
-    Notes.prototype.setupDiscussionNoteForm = function(dataHolder, form) {
-      // setup note target
-      var discussionID = dataHolder.data('discussionId');
+    form.find('.js-note-text').focus();
+    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.
+   */
+  onAddDiffNote(e) {
+    e.preventDefault();
+    const link = e.currentTarget || e.target;
+    const $link = $(link);
+    const showReplyInput = !$link.hasClass('js-diff-comment-avatar');
+    this.toggleDiffNote({
+      target: $link,
+      lineType: link.dataset.lineType,
+      showReplyInput
+    });
+  }
+
+  toggleDiffNote({
+    target,
+    lineType,
+    forceShow,
+    showReplyInput = false,
+  }) {
+    var $link, addForm, hasNotes, newForm, noteForm, replyButton, row, rowCssToAdd, targetContent, isDiffCommentAvatar;
+    $link = $(target);
+    row = $link.closest('tr');
+    const nextRow = row.next();
+    let targetRow = row;
+    if (nextRow.is('.notes_holder')) {
+      targetRow = nextRow;
+    }
 
-      if (discussionID) {
-        form.attr('data-discussion-id', discussionID);
-        form.find('#in_reply_to_discussion_id').val(discussionID);
+    hasNotes = nextRow.is('.notes_holder');
+    addForm = false;
+    let lineTypeSelector = '';
+    rowCssToAdd = '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"><div class="content"></div></td></tr>';
+    // In parallel view, look inside the correct left/right pane
+    if (this.isParallelView()) {
+      lineTypeSelector = `.${lineType}`;
+      rowCssToAdd = '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content"></div></td></tr>';
+    }
+    const notesContentSelector = `.notes_content${lineTypeSelector} .content`;
+    let notesContent = targetRow.find(notesContentSelector);
+
+    if (hasNotes && showReplyInput) {
+      targetRow.show();
+      notesContent = targetRow.find(notesContentSelector);
+      if (notesContent.length) {
+        notesContent.show();
+        replyButton = notesContent.find('.js-discussion-reply-button:visible');
+        if (replyButton.length) {
+          this.replyToDiscussionNote(replyButton[0]);
+        } else {
+          // In parallel view, the form may not be present in one of the panes
+          noteForm = notesContent.find('.js-discussion-note-form');
+          if (noteForm.length === 0) {
+            addForm = true;
+          }
+        }
       }
+    } else if (showReplyInput) {
+      // add a notes row and insert the form
+      row.after(rowCssToAdd);
+      targetRow = row.next();
+      notesContent = targetRow.find(notesContentSelector);
+      addForm = true;
+    } else {
+      const isCurrentlyShown = targetRow.find('.content:not(:empty)').is(':visible');
+      const isForced = forceShow === true || forceShow === false;
+      const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
+
+      targetRow.toggle(showNow);
+      notesContent.toggle(showNow);
+    }
 
-      form.attr('data-line-code', dataHolder.data('lineCode'));
-      form.find('#line_type').val(dataHolder.data('lineType'));
-
-      form.find('#note_noteable_type').val(dataHolder.data('noteableType'));
-      form.find('#note_noteable_id').val(dataHolder.data('noteableId'));
-      form.find('#note_commit_id').val(dataHolder.data('commitId'));
-      form.find('#note_type').val(dataHolder.data('noteType'));
-
-      // LegacyDiffNote
-      form.find('#note_line_code').val(dataHolder.data('lineCode'));
-
-      // DiffNote
-      form.find('#note_position').val(dataHolder.attr('data-position'));
-
-      form.find('.js-note-discard').show().removeClass('js-note-discard').addClass('js-close-discussion-note-form').text(form.find('.js-close-discussion-note-form').data('cancel-text'));
-      form.find('.js-note-target-close').remove();
-      form.find('.js-note-new-discussion').remove();
-      this.setupNoteForm(form);
-
-      form
-        .removeClass('js-main-target-form')
-        .addClass('discussion-form js-discussion-note-form');
-
-      if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-        var $commentBtn = form.find('comment-and-resolve-btn');
-        $commentBtn.attr(':discussion-id', `'${discussionID}'`);
-
-        gl.diffNotesCompileComponents();
+    if (addForm) {
+      newForm = this.cleanForm(this.formClone.clone());
+      newForm.appendTo(notesContent);
+      // 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.
+   */
+  removeDiscussionNoteForm(form) {
+    var glForm, row;
+    row = form.closest('tr');
+    glForm = form.data('gl-form');
+    glForm.destroy();
+    form.find('.js-note-text').data('autosave').reset();
+    // show the reply button (will only work for replies)
+    form
+      .prev('.discussion-reply-holder')
+      .show();
+    if (row.is('.js-temp-notes-holder')) {
+      // remove temporary row for diff lines
+      return row.remove();
+    } else {
+      // only remove the form
+      return form.remove();
+    }
+  }
+
+  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.
+   */
+  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
+   */
+  visibilityChange() {
+    return this.refresh();
+  }
+
+  updateTargetButtons(e) {
+    var closebtn, closetext, discardbtn, form, reopenbtn, reopentext, textarea;
+    textarea = $(e.target);
+    form = textarea.parents('form');
+    reopenbtn = form.find('.js-note-target-reopen');
+    closebtn = form.find('.js-note-target-close');
+    discardbtn = form.find('.js-note-discard');
+
+    if (textarea.val().trim().length > 0) {
+      reopentext = reopenbtn.attr('data-alternative-text');
+      closetext = closebtn.attr('data-alternative-text');
+      if (reopenbtn.text() !== reopentext) {
+        reopenbtn.text(reopentext);
       }
-
-      form.find('.js-note-text').focus();
-      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.
-     */
-
-    Notes.prototype.onAddDiffNote = function(e) {
-      e.preventDefault();
-      const link = e.currentTarget || e.target;
-      const $link = $(link);
-      const showReplyInput = !$link.hasClass('js-diff-comment-avatar');
-      this.toggleDiffNote({
-        target: $link,
-        lineType: link.dataset.lineType,
-        showReplyInput
-      });
-    };
-
-    Notes.prototype.toggleDiffNote = function({
-      target,
-      lineType,
-      forceShow,
-      showReplyInput = false,
-    }) {
-      var $link, addForm, hasNotes, newForm, noteForm, replyButton, row, rowCssToAdd, targetContent, isDiffCommentAvatar;
-      $link = $(target);
-      row = $link.closest('tr');
-      const nextRow = row.next();
-      let targetRow = row;
-      if (nextRow.is('.notes_holder')) {
-        targetRow = nextRow;
+      if (closebtn.text() !== closetext) {
+        closebtn.text(closetext);
       }
-
-      hasNotes = nextRow.is('.notes_holder');
-      addForm = false;
-      let lineTypeSelector = '';
-      rowCssToAdd = '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"><div class="content"></div></td></tr>';
-      // In parallel view, look inside the correct left/right pane
-      if (this.isParallelView()) {
-        lineTypeSelector = `.${lineType}`;
-        rowCssToAdd = '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content"></div></td></tr>';
+      if (reopenbtn.is(':not(.btn-comment-and-reopen)')) {
+        reopenbtn.addClass('btn-comment-and-reopen');
       }
-      const notesContentSelector = `.notes_content${lineTypeSelector} .content`;
-      let notesContent = targetRow.find(notesContentSelector);
-
-      if (hasNotes && showReplyInput) {
-        targetRow.show();
-        notesContent = targetRow.find(notesContentSelector);
-        if (notesContent.length) {
-          notesContent.show();
-          replyButton = notesContent.find('.js-discussion-reply-button:visible');
-          if (replyButton.length) {
-            this.replyToDiscussionNote(replyButton[0]);
-          } else {
-            // In parallel view, the form may not be present in one of the panes
-            noteForm = notesContent.find('.js-discussion-note-form');
-            if (noteForm.length === 0) {
-              addForm = true;
-            }
-          }
-        }
-      } else if (showReplyInput) {
-        // add a notes row and insert the form
-        row.after(rowCssToAdd);
-        targetRow = row.next();
-        notesContent = targetRow.find(notesContentSelector);
-        addForm = true;
-      } else {
-        const isCurrentlyShown = targetRow.find('.content:not(:empty)').is(':visible');
-        const isForced = forceShow === true || forceShow === false;
-        const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
-
-        targetRow.toggle(showNow);
-        notesContent.toggle(showNow);
+      if (closebtn.is(':not(.btn-comment-and-close)')) {
+        closebtn.addClass('btn-comment-and-close');
       }
-
-      if (addForm) {
-        newForm = this.cleanForm(this.formClone.clone());
-        newForm.appendTo(notesContent);
-        // show the form
-        return this.setupDiscussionNoteForm($link, newForm);
+      if (discardbtn.is(':hidden')) {
+        return discardbtn.show();
       }
-    };
-
-    /*
-    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) {
-      var glForm, row;
-      row = form.closest('tr');
-      glForm = form.data('gl-form');
-      glForm.destroy();
-      form.find('.js-note-text').data('autosave').reset();
-      // show the reply button (will only work for replies)
-      form
-        .prev('.discussion-reply-holder')
-        .show();
-      if (row.is('.js-temp-notes-holder')) {
-        // remove temporary row for diff lines
-        return row.remove();
-      } else {
-        // only remove the form
-        return form.remove();
+    } else {
+      reopentext = reopenbtn.data('original-text');
+      closetext = closebtn.data('original-text');
+      if (reopenbtn.text() !== reopentext) {
+        reopenbtn.text(reopentext);
       }
-    };
-
-    Notes.prototype.cancelDiscussionForm = function(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.
-     */
-
-    Notes.prototype.updateFormAttachment = function() {
-      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
-     */
-
-    Notes.prototype.visibilityChange = function() {
-      return this.refresh();
-    };
-
-    Notes.prototype.updateTargetButtons = function(e) {
-      var closebtn, closetext, discardbtn, form, reopenbtn, reopentext, textarea;
-      textarea = $(e.target);
-      form = textarea.parents('form');
-      reopenbtn = form.find('.js-note-target-reopen');
-      closebtn = form.find('.js-note-target-close');
-      discardbtn = form.find('.js-note-discard');
-
-      if (textarea.val().trim().length > 0) {
-        reopentext = reopenbtn.attr('data-alternative-text');
-        closetext = closebtn.attr('data-alternative-text');
-        if (reopenbtn.text() !== reopentext) {
-          reopenbtn.text(reopentext);
-        }
-        if (closebtn.text() !== closetext) {
-          closebtn.text(closetext);
-        }
-        if (reopenbtn.is(':not(.btn-comment-and-reopen)')) {
-          reopenbtn.addClass('btn-comment-and-reopen');
-        }
-        if (closebtn.is(':not(.btn-comment-and-close)')) {
-          closebtn.addClass('btn-comment-and-close');
-        }
-        if (discardbtn.is(':hidden')) {
-          return discardbtn.show();
-        }
-      } else {
-        reopentext = reopenbtn.data('original-text');
-        closetext = closebtn.data('original-text');
-        if (reopenbtn.text() !== reopentext) {
-          reopenbtn.text(reopentext);
-        }
-        if (closebtn.text() !== closetext) {
-          closebtn.text(closetext);
-        }
-        if (reopenbtn.is('.btn-comment-and-reopen')) {
-          reopenbtn.removeClass('btn-comment-and-reopen');
-        }
-        if (closebtn.is('.btn-comment-and-close')) {
-          closebtn.removeClass('btn-comment-and-close');
-        }
-        if (discardbtn.is(':visible')) {
-          return discardbtn.hide();
-        }
+      if (closebtn.text() !== closetext) {
+        closebtn.text(closetext);
       }
-    };
-
-    Notes.prototype.putEditFormInPlace = function($el) {
-      var $editForm = $(this.getEditFormSelector($el));
-      var $note = $el.closest('.note');
-
-      $editForm.insertAfter($note.find('.note-text'));
-
-      var $originalContentEl = $note.find('.original-note-content');
-      var originalContent = $originalContentEl.text().trim();
-      var postUrl = $originalContentEl.data('post-url');
-      var targetId = $originalContentEl.data('target-id');
-      var targetType = $originalContentEl.data('target-type');
-
-      new gl.GLForm($editForm.find('form'), this.enableGFM);
-
-      $editForm.find('form')
-        .attr('action', postUrl)
-        .attr('data-remote', 'true');
-      $editForm.find('.js-form-target-id').val(targetId);
-      $editForm.find('.js-form-target-type').val(targetType);
-      $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) {
-      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
-          <a href="#note_${noteEntity.id}" target="_blank" rel="noopener noreferrer">
-            updated comment
-          </a>
-          to ensure information is not lost
-        </div>`);
-        $alert.insertAfter($note.find('.note-text'));
+      if (reopenbtn.is('.btn-comment-and-reopen')) {
+        reopenbtn.removeClass('btn-comment-and-reopen');
       }
-    };
-
-    Notes.prototype.updateNotesCount = function(updateCount) {
-      return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
-    };
-
-    Notes.prototype.toggleCommitList = function(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.
-     */
-    Notes.prototype.collapseLongCommitList = function() {
-      const systemNotes = $('#notes-list').find('li.system-note').has('ul');
-
-      $.each(systemNotes, function(index, systemNote) {
-        const $systemNote = $(systemNote);
-        const headerMessage = $systemNote.find('.note-text').find('p:first').text().replace(':', '');
-
-        $systemNote.find('.note-header .system-note-message').html(headerMessage);
-
-        if ($systemNote.find('li').length > MAX_VISIBLE_COMMIT_LIST_COUNT) {
-          $systemNote.find('.note-text').addClass('system-note-commit-list');
-          $systemNote.find('.system-note-commit-list-toggler').show();
-        } else {
-          $systemNote.find('.note-text').addClass('system-note-commit-list hide-shade');
-        }
-      });
-    };
-
-    Notes.prototype.addFlash = function(...flashParams) {
-      this.flashInstance = new Flash(...flashParams);
-    };
-
-    Notes.prototype.clearFlash = function() {
-      if (this.flashInstance && this.flashInstance.flashContainer) {
-        this.flashInstance.flashContainer.hide();
-        this.flashInstance = null;
+      if (closebtn.is('.btn-comment-and-close')) {
+        closebtn.removeClass('btn-comment-and-close');
       }
-    };
-
-    Notes.prototype.cleanForm = function($form) {
-      // Remove JS classes that are not needed here
-      $form
-        .find('.js-comment-type-dropdown')
-        .removeClass('btn-group');
-
-      // Remove dropdown
-      $form
-        .find('.dropdown-menu')
-        .remove();
-
-      return $form;
-    };
-
-    /**
-     * Check if note does not exists on page
-     */
-    Notes.isNewNote = function(noteEntity, noteIds) {
-      return $.inArray(noteEntity.id, noteIds) === -1;
-    };
-
-    /**
-     * Check if $note already contains the `noteEntity` content
-     */
-    Notes.isUpdatedNote = function(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() {
-      if (gl.utils.getPagePath(1) === 'merge_requests') {
-        gl.mrWidget.checkStatus();
+      if (discardbtn.is(':visible')) {
+        return discardbtn.hide();
       }
-    };
+    }
+  }
+
+  putEditFormInPlace($el) {
+    var $editForm = $(this.getEditFormSelector($el));
+    var $note = $el.closest('.note');
+
+    $editForm.insertAfter($note.find('.note-text'));
+
+    var $originalContentEl = $note.find('.original-note-content');
+    var originalContent = $originalContentEl.text().trim();
+    var postUrl = $originalContentEl.data('post-url');
+    var targetId = $originalContentEl.data('target-id');
+    var targetType = $originalContentEl.data('target-type');
+
+    new gl.GLForm($editForm.find('form'), this.enableGFM);
+
+    $editForm.find('form')
+      .attr('action', postUrl)
+      .attr('data-remote', 'true');
+    $editForm.find('.js-form-target-id').val(targetId);
+    $editForm.find('.js-form-target-type').val(targetType);
+    $editForm.find('.js-note-text').focus().val(originalContent);
+    $editForm.find('.js-md-write-button').trigger('click');
+    $editForm.find('.referenced-users').hide();
+  }
+
+  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
+        <a href="#note_${noteEntity.id}" target="_blank" rel="noopener noreferrer">
+          updated comment
+        </a>
+        to ensure information is not lost
+      </div>`);
+      $alert.insertAfter($note.find('.note-text'));
+    }
+  }
 
-    Notes.animateAppendNote = function(noteHtml, $notesList) {
-      const $note = $(noteHtml);
+  updateNotesCount(updateCount) {
+    return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
+  }
 
-      $note.addClass('fade-in-full').renderGFM();
-      $notesList.append($note);
-      return $note;
-    };
+  toggleCommitList(e) {
+    const $element = $(e.currentTarget);
+    const $closestSystemCommitList = $element.siblings('.system-note-commit-list');
 
-    Notes.animateUpdateNote = function(noteHtml, $note) {
-      const $updatedNote = $(noteHtml);
+    $element.find('.fa').toggleClass('fa-angle-down').toggleClass('fa-angle-up');
+    $closestSystemCommitList.toggleClass('hide-shade');
+  }
 
-      $updatedNote.addClass('fade-in').renderGFM();
-      $note.replaceWith($updatedNote);
-      return $updatedNote;
-    };
+  /**
+   * Scans system notes with `ul` elements in system note body
+   * then collapse long commit list pushed by user to make it less
+   * intrusive.
+   */
+  collapseLongCommitList() {
+    const systemNotes = $('#notes-list').find('li.system-note').has('ul');
 
-    /**
-     * Get data from Form attributes to use for saving/submitting comment.
-     */
-    Notes.prototype.getFormData = function($form) {
-      return {
-        formData: $form.serialize(),
-        formContent: _.escape($form.find('.js-note-text').val()),
-        formAction: $form.attr('action'),
-      };
-    };
+    $.each(systemNotes, function(index, systemNote) {
+      const $systemNote = $(systemNote);
+      const headerMessage = $systemNote.find('.note-text').find('p:first').text().replace(':', '');
 
-    /**
-     * Identify if comment has any quick actions
-     */
-    Notes.prototype.hasQuickActions = function(formContent) {
-      return REGEX_QUICK_ACTIONS.test(formContent);
-    };
-
-    /**
-     * Remove quick actions and leave comment with pure message
-     */
-    Notes.prototype.stripQuickActions = function(formContent) {
-      return formContent.replace(REGEX_QUICK_ACTIONS, '').trim();
-    };
+      $systemNote.find('.note-header .system-note-message').html(headerMessage);
 
-    /**
-     * Gets appropriate description from quick actions found in provided `formContent`
-     */
-    Notes.prototype.getQuickActionDescription = function (formContent, availableQuickActions = []) {
-      let tempFormContent;
+      if ($systemNote.find('li').length > MAX_VISIBLE_COMMIT_LIST_COUNT) {
+        $systemNote.find('.note-text').addClass('system-note-commit-list');
+        $systemNote.find('.system-note-commit-list-toggler').show();
+      } else {
+        $systemNote.find('.note-text').addClass('system-note-commit-list hide-shade');
+      }
+    });
+  }
 
-      // Identify executed quick actions from `formContent`
-      const executedCommands = availableQuickActions.filter((command, index) => {
-        const commandRegex = new RegExp(`/${command.name}`);
-        return commandRegex.test(formContent);
-      });
+  addFlash(...flashParams) {
+    this.flashInstance = new Flash(...flashParams);
+  }
 
-      if (executedCommands && executedCommands.length) {
-        if (executedCommands.length > 1) {
-          tempFormContent = 'Applying multiple commands';
-        } else {
-          const commandDescription = executedCommands[0].description.toLowerCase();
-          tempFormContent = `Applying command to ${commandDescription}`;
-        }
+  clearFlash() {
+    if (this.flashInstance && this.flashInstance.flashContainer) {
+      this.flashInstance.flashContainer.hide();
+      this.flashInstance = null;
+    }
+  }
+
+  cleanForm($form) {
+    // Remove JS classes that are not needed here
+    $form
+      .find('.js-comment-type-dropdown')
+      .removeClass('btn-group');
+
+    // Remove dropdown
+    $form
+      .find('.dropdown-menu')
+      .remove();
+
+    return $form;
+  }
+
+  /**
+   * Check if note does not exists on page
+   */
+  static isNewNote(noteEntity, noteIds) {
+    return $.inArray(noteEntity.id, noteIds) === -1;
+  }
+
+  /**
+   * Check if $note already contains the `noteEntity` content
+   */
+  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;
+  }
+
+  static checkMergeRequestStatus() {
+    if (gl.utils.getPagePath(1) === 'merge_requests') {
+      gl.mrWidget.checkStatus();
+    }
+  }
+
+  static animateAppendNote(noteHtml, $notesList) {
+    const $note = $(noteHtml);
+
+    $note.addClass('fade-in-full').renderGFM();
+    $notesList.append($note);
+    return $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.
+   */
+  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
+   */
+  hasQuickActions(formContent) {
+    return REGEX_QUICK_ACTIONS.test(formContent);
+  }
+
+  /**
+   * Remove quick actions and leave comment with pure message
+   */
+  stripQuickActions(formContent) {
+    return formContent.replace(REGEX_QUICK_ACTIONS, '').trim();
+  }
+
+  /**
+   * Gets appropriate description from quick actions found in provided `formContent`
+   */
+  getQuickActionDescription(formContent, availableQuickActions = []) {
+    let tempFormContent;
+
+    // Identify executed quick actions from `formContent`
+    const executedCommands = availableQuickActions.filter((command, index) => {
+      const commandRegex = new RegExp(`/${command.name}`);
+      return commandRegex.test(formContent);
+    });
+
+    if (executedCommands && executedCommands.length) {
+      if (executedCommands.length > 1) {
+        tempFormContent = 'Applying multiple commands';
       } else {
-        tempFormContent = 'Applying command';
+        const commandDescription = executedCommands[0].description.toLowerCase();
+        tempFormContent = `Applying command to ${commandDescription}`;
       }
+    } else {
+      tempFormContent = 'Applying command';
+    }
 
-      return tempFormContent;
-    };
-
-    /**
-     * Create placeholder note DOM element populated with comment body
-     * that we will show while comment is being posted.
-     * 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 }) {
-      const discussionClass = isDiscussionNote ? 'discussion' : '';
-      const $tempNote = $(
-        `<li id="${uniqueId}" class="note being-posted fade-in-half timeline-entry">
-           <div class="timeline-entry-inner">
-              <div class="timeline-icon">
-                 <a href="/${currentUsername}">
-                   <img class="avatar s40" src="${currentUserAvatar}">
-                 </a>
-              </div>
-              <div class="timeline-content ${discussionClass}">
-                 <div class="note-header">
-                    <div class="note-header-info">
-                       <a href="/${currentUsername}">
-                         <span class="hidden-xs">${currentUserFullname}</span>
-                         <span class="note-headline-light">@${currentUsername}</span>
-                       </a>
-                    </div>
+    return tempFormContent;
+  }
+
+  /**
+   * Create placeholder note DOM element populated with comment body
+   * that we will show while comment is being posted.
+   * Once comment is _actually_ posted on server, we will have final element
+   * in response that we will show in place of this temporary element.
+   */
+  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">
+         <div class="timeline-entry-inner">
+            <div class="timeline-icon">
+               <a href="/${currentUsername}">
+                 <img class="avatar s40" src="${currentUserAvatar}">
+               </a>
+            </div>
+            <div class="timeline-content ${discussionClass}">
+               <div class="note-header">
+                  <div class="note-header-info">
+                     <a href="/${currentUsername}">
+                       <span class="hidden-xs">${currentUserFullname}</span>
+                       <span class="note-headline-light">@${currentUsername}</span>
+                     </a>
+                  </div>
+               </div>
+               <div class="note-body">
+                 <div class="note-text">
+                   <p>${formContent}</p>
                  </div>
-                 <div class="note-body">
-                   <div class="note-text">
-                     <p>${formContent}</p>
-                   </div>
-                 </div>
-              </div>
+               </div>
+            </div>
+         </div>
+      </li>`
+    );
+
+    return $tempNote;
+  }
+
+  /**
+   * Create Placeholder System Note DOM element populated with quick action description
+   */
+  createPlaceholderSystemNote({ formContent, uniqueId }) {
+    const $tempNote = $(
+      `<li id="${uniqueId}" class="note system-note timeline-entry being-posted fade-in-half">
+         <div class="timeline-entry-inner">
+           <div class="timeline-content">
+             <i>${formContent}</i>
            </div>
-        </li>`
-      );
-
-      return $tempNote;
-    };
-
-    /**
-     * Create Placeholder System Note DOM element populated with quick action description
-     */
-    Notes.prototype.createPlaceholderSystemNote = function ({ formContent, uniqueId }) {
-      const $tempNote = $(
-        `<li id="${uniqueId}" class="note system-note timeline-entry being-posted fade-in-half">
-           <div class="timeline-entry-inner">
-             <div class="timeline-content">
-               <i>${formContent}</i>
-             </div>
-           </div>
-         </li>`
-      );
+         </div>
+       </li>`
+    );
+
+    return $tempNote;
+  }
+
+  /**
+   * This method does following tasks step-by-step whenever a new comment
+   * is submitted by user (both main thread comments as well as discussion comments).
+   *
+   * 1) Get Form metadata
+   * 2) Identify comment type; a) Main thread b) Discussion thread c) Discussion resolve
+   * 3) Build temporary placeholder element (using `createPlaceholderNote`)
+   * 4) Show placeholder note on UI
+   * 5) Perform network request to submit the note using `gl.utils.ajaxPost`
+   *    a) If request is successfully completed
+   *        1. Remove placeholder element
+   *        2. Show submitted Note element
+   *        3. Perform post-submit errands
+   *           a. Mark discussion as resolved if comment submission was for resolve.
+   *           b. Reset comment form to original state.
+   *    b) If request failed
+   *        1. Remove placeholder element
+   *        2. Show error Flash message about failure
+   */
+  postComment(e) {
+    e.preventDefault();
+
+    // Get Form metadata
+    const $submitBtn = $(e.target);
+    let $form = $submitBtn.parents('form');
+    const $closeBtn = $form.find('.js-note-target-close');
+    const isDiscussionNote = $submitBtn.parent().find('li.droplab-item-selected').attr('id') === 'discussion';
+    const isMainForm = $form.hasClass('js-main-target-form');
+    const isDiscussionForm = $form.hasClass('js-discussion-note-form');
+    const isDiscussionResolve = $submitBtn.hasClass('js-comment-resolve-button');
+    const { formData, formContent, formAction } = this.getFormData($form);
+    let noteUniqueId;
+    let systemNoteUniqueId;
+    let hasQuickActions = false;
+    let $notesContainer;
+    let tempFormContent;
+
+    // Get reference to notes container based on type of comment
+    if (isDiscussionForm) {
+      $notesContainer = $form.parent('.discussion-notes').find('.notes');
+    } else if (isMainForm) {
+      $notesContainer = $('ul.main-notes-list');
+    }
 
-      return $tempNote;
-    };
+    // If comment is to resolve discussion, disable submit buttons while
+    // comment posting is finished.
+    if (isDiscussionResolve) {
+      $submitBtn.disable();
+      $form.find('.js-comment-submit-button').disable();
+    }
 
-    /**
-     * This method does following tasks step-by-step whenever a new comment
-     * is submitted by user (both main thread comments as well as discussion comments).
-     *
-     * 1) Get Form metadata
-     * 2) Identify comment type; a) Main thread b) Discussion thread c) Discussion resolve
-     * 3) Build temporary placeholder element (using `createPlaceholderNote`)
-     * 4) Show placeholder note on UI
-     * 5) Perform network request to submit the note using `gl.utils.ajaxPost`
-     *    a) If request is successfully completed
-     *        1. Remove placeholder element
-     *        2. Show submitted Note element
-     *        3. Perform post-submit errands
-     *           a. Mark discussion as resolved if comment submission was for resolve.
-     *           b. Reset comment form to original state.
-     *    b) If request failed
-     *        1. Remove placeholder element
-     *        2. Show error Flash message about failure
-     */
-    Notes.prototype.postComment = function(e) {
-      e.preventDefault();
-
-      // Get Form metadata
-      const $submitBtn = $(e.target);
-      let $form = $submitBtn.parents('form');
-      const $closeBtn = $form.find('.js-note-target-close');
-      const isDiscussionNote = $submitBtn.parent().find('li.droplab-item-selected').attr('id') === 'discussion';
-      const isMainForm = $form.hasClass('js-main-target-form');
-      const isDiscussionForm = $form.hasClass('js-discussion-note-form');
-      const isDiscussionResolve = $submitBtn.hasClass('js-comment-resolve-button');
-      const { formData, formContent, formAction } = this.getFormData($form);
-      let noteUniqueId;
-      let systemNoteUniqueId;
-      let hasQuickActions = false;
-      let $notesContainer;
-      let tempFormContent;
-
-      // Get reference to notes container based on type of comment
-      if (isDiscussionForm) {
-        $notesContainer = $form.parent('.discussion-notes').find('.notes');
-      } else if (isMainForm) {
-        $notesContainer = $('ul.main-notes-list');
-      }
+    tempFormContent = formContent;
+    if (this.hasQuickActions(formContent)) {
+      tempFormContent = this.stripQuickActions(formContent);
+      hasQuickActions = true;
+    }
 
-      // If comment is to resolve discussion, disable submit buttons while
-      // comment posting is finished.
-      if (isDiscussionResolve) {
-        $submitBtn.disable();
-        $form.find('.js-comment-submit-button').disable();
-      }
+    // Show placeholder note
+    if (tempFormContent) {
+      noteUniqueId = _.uniqueId('tempNote_');
+      $notesContainer.append(this.createPlaceholderNote({
+        formContent: tempFormContent,
+        uniqueId: noteUniqueId,
+        isDiscussionNote,
+        currentUsername: gon.current_username,
+        currentUserFullname: gon.current_user_fullname,
+        currentUserAvatar: gon.current_user_avatar_url,
+      }));
+    }
 
-      tempFormContent = formContent;
-      if (this.hasQuickActions(formContent)) {
-        tempFormContent = this.stripQuickActions(formContent);
-        hasQuickActions = true;
-      }
+    // Show placeholder system note
+    if (hasQuickActions) {
+      systemNoteUniqueId = _.uniqueId('tempSystemNote_');
+      $notesContainer.append(this.createPlaceholderSystemNote({
+        formContent: this.getQuickActionDescription(formContent, AjaxCache.get(gl.GfmAutoComplete.dataSources.commands)),
+        uniqueId: systemNoteUniqueId,
+      }));
+    }
 
-      // Show placeholder note
-      if (tempFormContent) {
-        noteUniqueId = _.uniqueId('tempNote_');
-        $notesContainer.append(this.createPlaceholderNote({
-          formContent: tempFormContent,
-          uniqueId: noteUniqueId,
-          isDiscussionNote,
-          currentUsername: gon.current_username,
-          currentUserFullname: gon.current_user_fullname,
-          currentUserAvatar: gon.current_user_avatar_url,
-        }));
+    // Clear the form textarea
+    if ($notesContainer.length) {
+      if (isMainForm) {
+        this.resetMainTargetForm(e);
+      } else if (isDiscussionForm) {
+        this.removeDiscussionNoteForm($form);
       }
+    }
 
-      // Show placeholder system note
-      if (hasQuickActions) {
-        systemNoteUniqueId = _.uniqueId('tempSystemNote_');
-        $notesContainer.append(this.createPlaceholderSystemNote({
-          formContent: this.getQuickActionDescription(formContent, AjaxCache.get(gl.GfmAutoComplete.dataSources.commands)),
-          uniqueId: systemNoteUniqueId,
-        }));
-      }
+    /* eslint-disable promise/catch-or-return */
+    // Make request to submit comment on server
+    gl.utils.ajaxPost(formAction, formData)
+      .then((note) => {
+        // Submission successful! remove placeholder
+        $notesContainer.find(`#${noteUniqueId}`).remove();
 
-      // Clear the form textarea
-      if ($notesContainer.length) {
-        if (isMainForm) {
-          this.resetMainTargetForm(e);
-        } else if (isDiscussionForm) {
-          this.removeDiscussionNoteForm($form);
+        // Reset cached commands list when command is applied
+        if (hasQuickActions) {
+          $form.find('textarea.js-note-text').trigger('clear-commands-cache.atwho');
         }
-      }
-
-      /* eslint-disable promise/catch-or-return */
-      // Make request to submit comment on server
-      gl.utils.ajaxPost(formAction, formData)
-        .then((note) => {
-          // Submission successful! remove placeholder
-          $notesContainer.find(`#${noteUniqueId}`).remove();
 
-          // Reset cached commands list when command is applied
-          if (hasQuickActions) {
-            $form.find('textarea.js-note-text').trigger('clear-commands-cache.atwho');
-          }
-
-          // Clear previous form errors
-          this.clearFlashWrapper();
+        // Clear previous form errors
+        this.clearFlashWrapper();
 
-          // Check if this was discussion comment
-          if (isDiscussionForm) {
-            // Remove flash-container
-            $notesContainer.find('.flash-container').remove();
+        // Check if this was discussion comment
+        if (isDiscussionForm) {
+          // Remove flash-container
+          $notesContainer.find('.flash-container').remove();
 
-            // If comment intends to resolve discussion, do the same.
-            if (isDiscussionResolve) {
-              $form
-                .attr('data-discussion-id', $submitBtn.data('discussion-id'))
-                .attr('data-resolve-all', 'true')
-                .attr('data-project-path', $submitBtn.data('project-path'));
-            }
+          // If comment intends to resolve discussion, do the same.
+          if (isDiscussionResolve) {
+            $form
+              .attr('data-discussion-id', $submitBtn.data('discussion-id'))
+              .attr('data-resolve-all', 'true')
+              .attr('data-project-path', $submitBtn.data('project-path'));
+          }
 
-            // Show final note element on UI
-            this.addDiscussionNote($form, note, $notesContainer.length === 0);
+          // Show final note element on UI
+          this.addDiscussionNote($form, note, $notesContainer.length === 0);
 
-            // append flash-container to the Notes list
-            if ($notesContainer.length) {
-              $notesContainer.append('<div class="flash-container" style="display: none;"></div>');
-            }
-          } else if (isMainForm) { // Check if this was main thread comment
-            // Show final note element on UI and perform form and action buttons cleanup
-            this.addNote($form, note);
-            this.reenableTargetFormSubmitButton(e);
+          // append flash-container to the Notes list
+          if ($notesContainer.length) {
+            $notesContainer.append('<div class="flash-container" style="display: none;"></div>');
           }
+        } else if (isMainForm) { // Check if this was main thread comment
+          // Show final note element on UI and perform form and action buttons cleanup
+          this.addNote($form, note);
+          this.reenableTargetFormSubmitButton(e);
+        }
 
-          if (note.commands_changes) {
-            this.handleQuickActions(note);
-          }
+        if (note.commands_changes) {
+          this.handleQuickActions(note);
+        }
 
-          $form.trigger('ajax:success', [note]);
-        }).fail(() => {
-          // Submission failed, remove placeholder note and show Flash error message
-          $notesContainer.find(`#${noteUniqueId}`).remove();
+        $form.trigger('ajax:success', [note]);
+      }).fail(() => {
+        // Submission failed, remove placeholder note and show Flash error message
+        $notesContainer.find(`#${noteUniqueId}`).remove();
 
-          if (hasQuickActions) {
-            $notesContainer.find(`#${systemNoteUniqueId}`).remove();
-          }
+        if (hasQuickActions) {
+          $notesContainer.find(`#${systemNoteUniqueId}`).remove();
+        }
 
-          // Show form again on UI on failure
-          if (isDiscussionForm && $notesContainer.length) {
-            const replyButton = $notesContainer.parent().find('.js-discussion-reply-button');
-            this.replyToDiscussionNote(replyButton[0]);
-            $form = $notesContainer.parent().find('form');
-          }
+        // Show form again on UI on failure
+        if (isDiscussionForm && $notesContainer.length) {
+          const replyButton = $notesContainer.parent().find('.js-discussion-reply-button');
+          this.replyToDiscussionNote(replyButton[0]);
+          $form = $notesContainer.parent().find('form');
+        }
 
-          $form.find('.js-note-text').val(formContent);
-          this.reenableTargetFormSubmitButton(e);
-          this.addNoteError($form);
-        });
+        $form.find('.js-note-text').val(formContent);
+        this.reenableTargetFormSubmitButton(e);
+        this.addNoteError($form);
+      });
 
-      return $closeBtn.text($closeBtn.data('original-text'));
-    };
+    return $closeBtn.text($closeBtn.data('original-text'));
+  }
+
+  /**
+   * This method does following tasks step-by-step whenever an existing comment
+   * is updated by user (both main thread comments as well as discussion comments).
+   *
+   * 1) Get Form metadata
+   * 2) Update note element with new content
+   * 3) Perform network request to submit the updated note using `gl.utils.ajaxPost`
+   *    a) If request is successfully completed
+   *        1. Show submitted Note element
+   *    b) If request failed
+   *        1. Revert Note element to original content
+   *        2. Show error Flash message about failure
+   */
+  updateComment(e) {
+    e.preventDefault();
+
+    // Get Form metadata
+    const $submitBtn = $(e.target);
+    const $form = $submitBtn.parents('form');
+    const $closeBtn = $form.find('.js-note-target-close');
+    const $editingNote = $form.parents('.note.is-editing');
+    const $noteBody = $editingNote.find('.js-task-list-container');
+    const $noteBodyText = $noteBody.find('.note-text');
+    const { formData, formContent, formAction } = this.getFormData($form);
+
+    // Cache original comment content
+    const cachedNoteBodyText = $noteBodyText.html();
+
+    // Show updated comment content temporarily
+    $noteBodyText.html(_.escape(formContent));
+    $editingNote.removeClass('is-editing fade-in-full').addClass('being-posted fade-in-half');
+    $editingNote.find('.note-headline-meta a').html('<i class="fa fa-spinner fa-spin" aria-label="Comment is being updated" aria-hidden="true"></i>');
+
+    /* eslint-disable promise/catch-or-return */
+    // Make request to update comment on server
+    gl.utils.ajaxPost(formAction, formData)
+      .then((note) => {
+        // Submission successful! render final note element
+        this.updateNote(note, $editingNote);
+      })
+      .fail(() => {
+        // Submission failed, revert back to original note
+        $noteBodyText.html(_.escape(cachedNoteBodyText));
+        $editingNote.removeClass('being-posted fade-in');
+        $editingNote.find('.fa.fa-spinner').remove();
+
+        // Show Flash message about failure
+        this.updateNoteError();
+      });
 
-    /**
-     * This method does following tasks step-by-step whenever an existing comment
-     * is updated by user (both main thread comments as well as discussion comments).
-     *
-     * 1) Get Form metadata
-     * 2) Update note element with new content
-     * 3) Perform network request to submit the updated note using `gl.utils.ajaxPost`
-     *    a) If request is successfully completed
-     *        1. Show submitted Note element
-     *    b) If request failed
-     *        1. Revert Note element to original content
-     *        2. Show error Flash message about failure
-     */
-    Notes.prototype.updateComment = function(e) {
-      e.preventDefault();
-
-      // Get Form metadata
-      const $submitBtn = $(e.target);
-      const $form = $submitBtn.parents('form');
-      const $closeBtn = $form.find('.js-note-target-close');
-      const $editingNote = $form.parents('.note.is-editing');
-      const $noteBody = $editingNote.find('.js-task-list-container');
-      const $noteBodyText = $noteBody.find('.note-text');
-      const { formData, formContent, formAction } = this.getFormData($form);
-
-      // Cache original comment content
-      const cachedNoteBodyText = $noteBodyText.html();
-
-      // Show updated comment content temporarily
-      $noteBodyText.html(_.escape(formContent));
-      $editingNote.removeClass('is-editing fade-in-full').addClass('being-posted fade-in-half');
-      $editingNote.find('.note-headline-meta a').html('<i class="fa fa-spinner fa-spin" aria-label="Comment is being updated" aria-hidden="true"></i>');
-
-      /* eslint-disable promise/catch-or-return */
-      // Make request to update comment on server
-      gl.utils.ajaxPost(formAction, formData)
-        .then((note) => {
-          // Submission successful! render final note element
-          this.updateNote(note, $editingNote);
-        })
-        .fail(() => {
-          // Submission failed, revert back to original note
-          $noteBodyText.html(_.escape(cachedNoteBodyText));
-          $editingNote.removeClass('being-posted fade-in');
-          $editingNote.find('.fa.fa-spinner').remove();
-
-          // Show Flash message about failure
-          this.updateNoteError();
-        });
-
-      return $closeBtn.text($closeBtn.data('original-text'));
-    };
+    return $closeBtn.text($closeBtn.data('original-text'));
+  }
+}
 
-    return Notes;
-  })();
-}).call(window);
+window.Notes = Notes;
diff --git a/app/assets/javascripts/prometheus_metrics/constants.js b/app/assets/javascripts/prometheus_metrics/constants.js
new file mode 100644
index 00000000000..50f1248456e
--- /dev/null
+++ b/app/assets/javascripts/prometheus_metrics/constants.js
@@ -0,0 +1,5 @@
+export default {
+  EMPTY: 'empty',
+  LOADING: 'loading',
+  LIST: 'list',
+};
diff --git a/app/assets/javascripts/prometheus_metrics/index.js b/app/assets/javascripts/prometheus_metrics/index.js
new file mode 100644
index 00000000000..a0c43c5abe1
--- /dev/null
+++ b/app/assets/javascripts/prometheus_metrics/index.js
@@ -0,0 +1,6 @@
+import PrometheusMetrics from './prometheus_metrics';
+
+$(() => {
+  const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
+  prometheusMetrics.loadActiveMetrics();
+});
diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
new file mode 100644
index 00000000000..ef4d6df5138
--- /dev/null
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -0,0 +1,109 @@
+import PANEL_STATE from './constants';
+
+export default class PrometheusMetrics {
+  constructor(wrapperSelector) {
+    this.backOffRequestCounter = 0;
+
+    this.$wrapper = $(wrapperSelector);
+
+    this.$monitoredMetricsPanel = this.$wrapper.find('.js-panel-monitored-metrics');
+    this.$monitoredMetricsCount = this.$monitoredMetricsPanel.find('.js-monitored-count');
+    this.$monitoredMetricsLoading = this.$monitoredMetricsPanel.find('.js-loading-metrics');
+    this.$monitoredMetricsEmpty = this.$monitoredMetricsPanel.find('.js-empty-metrics');
+    this.$monitoredMetricsList = this.$monitoredMetricsPanel.find('.js-metrics-list');
+
+    this.$missingEnvVarPanel = this.$wrapper.find('.js-panel-missing-env-vars');
+    this.$panelToggle = this.$missingEnvVarPanel.find('.js-panel-toggle');
+    this.$missingEnvVarMetricCount = this.$missingEnvVarPanel.find('.js-env-var-count');
+    this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list');
+
+    this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('active-metrics');
+
+    this.$panelToggle.on('click', e => this.handlePanelToggle(e));
+  }
+
+  /* eslint-disable class-methods-use-this */
+  handlePanelToggle(e) {
+    const $toggleBtn = $(e.currentTarget);
+    const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body');
+    $currentPanelBody.toggleClass('hidden');
+    if ($toggleBtn.hasClass('fa-caret-down')) {
+      $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right');
+    } else {
+      $toggleBtn.removeClass('fa-caret-right').addClass('fa-caret-down');
+    }
+  }
+
+  showMonitoringMetricsPanelState(stateName) {
+    switch (stateName) {
+      case PANEL_STATE.LOADING:
+        this.$monitoredMetricsLoading.removeClass('hidden');
+        this.$monitoredMetricsEmpty.addClass('hidden');
+        this.$monitoredMetricsList.addClass('hidden');
+        break;
+      case PANEL_STATE.LIST:
+        this.$monitoredMetricsLoading.addClass('hidden');
+        this.$monitoredMetricsEmpty.addClass('hidden');
+        this.$monitoredMetricsList.removeClass('hidden');
+        break;
+      default:
+        this.$monitoredMetricsLoading.addClass('hidden');
+        this.$monitoredMetricsEmpty.removeClass('hidden');
+        this.$monitoredMetricsList.addClass('hidden');
+        break;
+    }
+  }
+
+  populateActiveMetrics(metrics) {
+    let totalMonitoredMetrics = 0;
+    let totalMissingEnvVarMetrics = 0;
+
+    metrics.forEach((metric) => {
+      this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge">${metric.active_metrics}</span></li>`);
+      totalMonitoredMetrics += metric.active_metrics;
+      if (metric.metrics_missing_requirements > 0) {
+        this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`);
+        totalMissingEnvVarMetrics += 1;
+      }
+    });
+
+    this.$monitoredMetricsCount.text(totalMonitoredMetrics);
+    this.showMonitoringMetricsPanelState(PANEL_STATE.LIST);
+
+    if (totalMissingEnvVarMetrics > 0) {
+      this.$missingEnvVarPanel.removeClass('hidden');
+      this.$missingEnvVarPanel.find('.flash-container').off('click');
+      this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics);
+    }
+  }
+
+  loadActiveMetrics() {
+    this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);
+    gl.utils.backOff((next, stop) => {
+      $.getJSON(this.activeMetricsEndpoint)
+        .done((res) => {
+          if (res && res.success) {
+            stop(res);
+          } else {
+            this.backOffRequestCounter = this.backOffRequestCounter += 1;
+            if (this.backOffRequestCounter < 3) {
+              next();
+            } else {
+              stop(res);
+            }
+          }
+        })
+        .fail(stop);
+    })
+    .then((res) => {
+      if (res && res.data && res.data.length) {
+        this.populateActiveMetrics(res.data);
+      } else {
+        this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
+      }
+    })
+    .catch(() => {
+      this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
+    });
+  }
+}
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index da7c0c5a36c..322162afdb8 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -10,8 +10,6 @@ import Cookies from 'js-cookie';
 
       this.$sidebarInner = this.sidebar.find('.issuable-sidebar');
       this.$navGitlab = $('.navbar-gitlab');
-      this.$layoutNav = $('.layout-nav');
-      this.$subScroll = $('.sub-nav-scroll');
       this.$rightSidebar = $('.js-right-sidebar');
 
       this.removeListeners();
@@ -215,7 +213,7 @@ import Cookies from 'js-cookie';
     };
 
     Sidebar.prototype.setSidebarHeight = function() {
-      const $navHeight = this.$navGitlab.outerHeight() + this.$layoutNav.outerHeight() + (this.$subScroll ? this.$subScroll.outerHeight() : 0);
+      const $navHeight = this.$navGitlab.outerHeight();
       const diff = $navHeight - $(window).scrollTop();
       if (diff > 0) {
         this.$rightSidebar.outerHeight($(window).height() - diff);
diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
index 59ff2a86293..7fa5996d600 100644
--- a/app/assets/javascripts/settings_panels.js
+++ b/app/assets/javascripts/settings_panels.js
@@ -4,7 +4,7 @@ function expandSectionParent($section, $content) {
 }
 
 function expandSection($section) {
-  $section.find('.js-settings-toggle').text('Close');
+  $section.find('.js-settings-toggle').text('Collapse');
 
   const $content = $section.find('.settings-content');
   $content.addClass('expanded').off('scroll.expandSection').scrollTop(0);
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index ec45253e50b..46efdcf4202 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -643,7 +643,7 @@ UsersSelect.prototype.formatResult = function(user) {
   } else {
     avatar = gon.default_avatar_url;
   }
-  return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar s24' src='" + avatar + "'></div> <div class='user-name'>" + user.name + "</div> <div class='user-username'>" + (user.username || "") + "</div> </div>";
+  return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar avatar-inline s32' src='" + avatar + "'></div> <div class='user-name dropdown-menu-user-full-name'>" + user.name + "</div> <div class='user-username dropdown-menu-user-username'>" + ("@" + user.username || "") + "</div> </div>";
 };
 
 UsersSelect.prototype.formatSelection = function(user) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
index 686cb38cbb1..205804670fa 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
@@ -1,63 +1,42 @@
 export default {
   name: 'MRWidgetRelatedLinks',
   props: {
-    isMerged: { type: Boolean, required: true },
     relatedLinks: { type: Object, required: true },
   },
   computed: {
-    // TODO: the following should be handled by i18n
-    closingText() {
-      if (this.isMerged) {
-        return `Closed ${this.issueLabel('closing')}`;
-      }
-
-      return `Closes ${this.issueLabel('closing')}`;
-    },
     hasLinks() {
       const { closing, mentioned, assignToMe } = this.relatedLinks;
       return closing || mentioned || assignToMe;
     },
-    // TODO: the following should be handled by i18n
-    mentionedText() {
-      if (this.isMerged) {
-        if (this.hasMultipleIssues(this.relatedLinks.mentioned)) {
-          return 'are mentioned but were not closed';
-        }
-
-        return 'is mentioned but was not closed';
-      }
-
-      if (this.hasMultipleIssues(this.relatedLinks.mentioned)) {
-        return 'are mentioned but will not be closed';
-      }
-
-      return 'is mentioned but will not be closed';
-    },
   },
   methods: {
     hasMultipleIssues(text) {
-      return /<\/a>,? and <a/.test(text);
+      return !text ? false : text.match(/<\/a> and <a/);
     },
-    // TODO: the following should be handled by i18n
     issueLabel(field) {
       return this.hasMultipleIssues(this.relatedLinks[field]) ? 'issues' : 'issue';
     },
+    verbLabel(field) {
+      return this.hasMultipleIssues(this.relatedLinks[field]) ? 'are' : 'is';
+    },
   },
   template: `
-    <div v-if="hasLinks">
+    <section
+      v-if="hasLinks"
+      class="mr-info-list mr-links">
       <div class="legend"></div>
       <p v-if="relatedLinks.closing">
-        {{closingText}}
+        Closes {{issueLabel('closing')}}
         <span v-html="relatedLinks.closing"></span>.
       </p>
       <p v-if="relatedLinks.mentioned">
         <span class="capitalize">{{issueLabel('mentioned')}}</span>
         <span v-html="relatedLinks.mentioned"></span>
-        {{mentionedText}}
+        {{verbLabel('mentioned')}} mentioned but will not be closed.
       </p>
       <p v-if="relatedLinks.assignToMe">
         <span v-html="relatedLinks.assignToMe"></span>
       </p>
-    </div>
+    </section>
   `,
 };
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
index 9b8eed9016d..c7d32d18141 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
@@ -1,9 +1,7 @@
 /* global Flash */
 
 import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
-import mrWidgetRelatedLinks from '../../components/mr_widget_related_links';
 import eventHub from '../../event_hub';
-import '../../../flash';
 
 export default {
   name: 'MRWidgetMerged',
@@ -13,7 +11,6 @@ export default {
   },
   components: {
     'mr-widget-author-and-time': mrWidgetAuthorTime,
-    'mr-widget-related-links': mrWidgetRelatedLinks,
   },
   data() {
     return {
@@ -21,9 +18,6 @@ export default {
     };
   },
   computed: {
-    shouldRenderRelatedLinks() {
-      return this.mr.relatedLinks && this.mr.isMerged;
-    },
     shouldShowRemoveSourceBranch() {
       const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr;
 
@@ -92,10 +86,6 @@ export default {
             aria-hidden="true" />
           The source branch is being removed.
         </p>
-        <mr-widget-related-links
-          v-if="shouldRenderRelatedLinks"
-          :is-merged="mr.isMerged()"
-          :related-links="mr.relatedLinks" />
       </section>
       <div
         v-if="shouldShowMergedButtons"
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 222d0b7f79e..2339a00ddd0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -48,7 +48,7 @@ export default {
       return stateMaps.stateToComponentMap[this.mr.state];
     },
     shouldRenderMergeHelp() {
-      return !this.mr.isMerged;
+      return stateMaps.statesToShowHelpWidget.indexOf(this.mr.state) > -1;
     },
     shouldRenderPipelines() {
       return Object.keys(this.mr.pipeline).length || this.mr.hasCI;
@@ -238,14 +238,9 @@ export default {
         :is="componentName"
         :mr="mr"
         :service="service" />
-      <section
+      <mr-widget-related-links
         v-if="shouldRenderRelatedLinks"
-        class="mr-info-list mr-links">
-        <div class="legend"></div>
-        <mr-widget-related-links
-          :is-merged="mr.isMerged"
-          :related-links="mr.relatedLinks" />
-      </section>
+        :related-links="mr.relatedLinks" />
       <mr-widget-merge-help v-if="shouldRenderMergeHelp" />
     </div>
   `,
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index ad73efb37e1..69bc1436284 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -1,18 +1,6 @@
 import Timeago from 'timeago.js';
 import { getStateKey } from '../dependencies';
 
-const unmergedStates = [
-  'locked',
-  'conflicts',
-  'workInProgress',
-  'readyToMerge',
-  'checking',
-  'unresolvedDiscussions',
-  'pipelineFailed',
-  'pipelineBlocked',
-  'autoMergeFailed',
-];
-
 export default class MergeRequestStore {
 
   constructor(data) {
@@ -77,7 +65,6 @@ export default class MergeRequestStore {
     this.mergeActionsContentPath = data.commit_change_content_path;
     this.isRemovingSourceBranch = this.isRemovingSourceBranch || false;
     this.isOpen = data.state === 'opened' || data.state === 'reopened' || false;
-    this.isMerged = unmergedStates.indexOf(data.state) === -1;
     this.hasMergeableDiscussionsState = data.mergeable_discussions_state === false;
     this.canRemoveSourceBranch = currentUser.can_remove_source_branch || false;
     this.canMerge = !!data.merge_path;
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
index dd939d98d0f..605dd3a1ff4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
@@ -19,6 +19,19 @@ const stateToComponentMap = {
   shaMismatch: 'mr-widget-sha-mismatch',
 };
 
+const statesToShowHelpWidget = [
+  'locked',
+  'conflicts',
+  'workInProgress',
+  'readyToMerge',
+  'checking',
+  'unresolvedDiscussions',
+  'pipelineFailed',
+  'pipelineBlocked',
+  'autoMergeFailed',
+];
+
 export default {
   stateToComponentMap,
+  statesToShowHelpWidget,
 };