Merge remote-tracking branch 'origin/28433-internationalise-cycle-analytics-page' into js-translations

177 files changed, 2855 insertions, 2388 deletions

diff --git a/app/assets/images/ci_favicons/icon_status_canceled.ico b/app/assets/images/ci_favicons/favicon_status_canceled.ico
index 5a19458f2a2..5a19458f2a2 100755
--- a/app/assets/images/ci_favicons/icon_status_canceled.ico
+++ b/app/assets/images/ci_favicons/favicon_status_canceled.ico
diff --git a/app/assets/images/ci_favicons/icon_status_created.ico b/app/assets/images/ci_favicons/favicon_status_created.ico
index 4dca9640cb3..4dca9640cb3 100755
--- a/app/assets/images/ci_favicons/icon_status_created.ico
+++ b/app/assets/images/ci_favicons/favicon_status_created.ico
diff --git a/app/assets/images/ci_favicons/icon_status_failed.ico b/app/assets/images/ci_favicons/favicon_status_failed.ico
index c961ff9a69b..c961ff9a69b 100755
--- a/app/assets/images/ci_favicons/icon_status_failed.ico
+++ b/app/assets/images/ci_favicons/favicon_status_failed.ico
diff --git a/app/assets/images/ci_favicons/icon_status_manual.ico b/app/assets/images/ci_favicons/favicon_status_manual.ico
index 5fbbc99ea7c..5fbbc99ea7c 100755
--- a/app/assets/images/ci_favicons/icon_status_manual.ico
+++ b/app/assets/images/ci_favicons/favicon_status_manual.ico
diff --git a/app/assets/images/ci_favicons/icon_status_not_found.ico b/app/assets/images/ci_favicons/favicon_status_not_found.ico
index 21afa9c72e6..21afa9c72e6 100755
--- a/app/assets/images/ci_favicons/icon_status_not_found.ico
+++ b/app/assets/images/ci_favicons/favicon_status_not_found.ico
diff --git a/app/assets/images/ci_favicons/icon_status_pending.ico b/app/assets/images/ci_favicons/favicon_status_pending.ico
index 8be32dab85a..8be32dab85a 100755
--- a/app/assets/images/ci_favicons/icon_status_pending.ico
+++ b/app/assets/images/ci_favicons/favicon_status_pending.ico
diff --git a/app/assets/images/ci_favicons/icon_status_running.ico b/app/assets/images/ci_favicons/favicon_status_running.ico
index f328ff1a5ed..f328ff1a5ed 100755
--- a/app/assets/images/ci_favicons/icon_status_running.ico
+++ b/app/assets/images/ci_favicons/favicon_status_running.ico
diff --git a/app/assets/images/ci_favicons/icon_status_skipped.ico b/app/assets/images/ci_favicons/favicon_status_skipped.ico
index b4394e1b4af..b4394e1b4af 100755
--- a/app/assets/images/ci_favicons/icon_status_skipped.ico
+++ b/app/assets/images/ci_favicons/favicon_status_skipped.ico
diff --git a/app/assets/images/ci_favicons/icon_status_success.ico b/app/assets/images/ci_favicons/favicon_status_success.ico
index 4f436c95242..4f436c95242 100755
--- a/app/assets/images/ci_favicons/icon_status_success.ico
+++ b/app/assets/images/ci_favicons/favicon_status_success.ico
diff --git a/app/assets/images/ci_favicons/icon_status_warning.ico b/app/assets/images/ci_favicons/favicon_status_warning.ico
index 805cc20cdec..805cc20cdec 100755
--- a/app/assets/images/ci_favicons/icon_status_warning.ico
+++ b/app/assets/images/ci_favicons/favicon_status_warning.ico
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index ce426741637..f93208944a1 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -1,3 +1,5 @@
+/* global Flash */
+
 import Cookies from 'js-cookie';
 
 import emojiMap from 'emojis/digests.json';
@@ -6,6 +8,7 @@ import { glEmojiTag } from './behaviors/gl_emoji';
 import isEmojiNameValid from './behaviors/gl_emoji/is_emoji_name_valid';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
+const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
 const requestAnimationFrame = window.requestAnimationFrame ||
   window.webkitRequestAnimationFrame ||
   window.mozRequestAnimationFrame ||
@@ -103,8 +106,9 @@ function AwardsHandler() {
     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');
-    return this.addAward(this.getVotesBlock(), this.getAwardUrl(), emoji);
+    this.addAward(this.getVotesBlock(), this.getAwardUrl(), emoji);
   });
 }
 
@@ -124,16 +128,18 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
   }
 
   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');
-      $('#emoji_search').blur();
+      $('.js-emoji-menu-search').blur();
     } else {
       $addBtn.addClass('is-active');
       this.positionMenu($menu, $addBtn);
       $menu.addClass('is-visible');
-      $('#emoji_search').focus();
+      $('.js-emoji-menu-search').focus();
     }
   } else {
     $addBtn.addClass('is-loading is-active');
@@ -143,10 +149,12 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
       this.positionMenu($createdMenu, $addBtn);
       return setTimeout(() => {
         $createdMenu.addClass('is-visible');
-        $('#emoji_search').focus();
+        $('.js-emoji-menu-search').focus();
       }, 200);
     });
   }
+
+  $thumbsBtn.toggleClass('disabled', $userAuthored);
 };
 
 // Create the emoji menu with the first category of emojis.
@@ -174,7 +182,7 @@ AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) {
 
   const emojiMenuMarkup = `
     <div class="emoji-menu">
-      <input type="text" name="emoji_search" id="emoji_search" value="" class="emoji-search search-input form-control" placeholder="Search emoji" />
+      <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}
@@ -259,7 +267,8 @@ AwardsHandler.prototype.addAward = function addAward(
   callback,
 ) {
   const normalizedEmoji = this.normalizeEmojiName(emoji);
-  this.postEmoji(awardUrl, normalizedEmoji, () => {
+  const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
+  this.postEmoji($emojiButton, awardUrl, normalizedEmoji, () => {
     this.addAwardToEmojiBar(votesBlock, normalizedEmoji, checkMutuality);
     return typeof callback === 'function' ? callback() : undefined;
   });
@@ -324,6 +333,10 @@ AwardsHandler.prototype.isActive = function isActive($emojiButton) {
   return $emojiButton.hasClass('active');
 };
 
+AwardsHandler.prototype.isUserAuthored = function 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);
@@ -428,20 +441,35 @@ AwardsHandler.prototype.createEmoji = function createEmoji(votesBlock, emoji) {
   });
 };
 
-AwardsHandler.prototype.postEmoji = function postEmoji(awardUrl, emoji, callback) {
-  return $.post(awardUrl, {
-    name: emoji,
-  }, (data) => {
-    if (data.ok) {
-      callback();
-    }
-  });
+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.'));
+  }
 };
 
 AwardsHandler.prototype.findEmojiIcon = function 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);
+};
+
 AwardsHandler.prototype.scrollToAwards = function scrollToAwards() {
   const options = {
     scrollTop: $('.awards').offset().top - 110,
@@ -474,24 +502,41 @@ AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmoj
 };
 
 AwardsHandler.prototype.setupSearch = function setupSearch() {
-  this.registerEventListener('on', $('input.emoji-search'), 'input', (e) => {
+  const $search = $('.js-emoji-menu-search');
+
+  this.registerEventListener('on', $search, 'input', (e) => {
     const term = $(e.target).val().trim();
-    // 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.searchEmojis(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();
+    this.searchEmojis(term);
+  });
+
+  const $menu = $('.emoji-menu');
+  this.registerEventListener('on', $menu, transitionEndEventString, (e) => {
+    if (e.target === e.currentTarget) {
+      // Clear the search
+      this.searchEmojis('');
     }
   });
 };
 
 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();
+  }
+};
+
+AwardsHandler.prototype.findMatchingEmojiElements = function findMatchingEmojiElements(term) {
   const safeTerm = term.toLowerCase();
 
   const namesMatchingAlias = [];
diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js
index 4c9ad128e6c..77e92ff8caf 100644
--- a/app/assets/javascripts/behaviors/toggler_behavior.js
+++ b/app/assets/javascripts/behaviors/toggler_behavior.js
@@ -22,6 +22,7 @@ $(() => {
   }
 
   $('body').on('click', '.js-toggle-button', function toggleButton(e) {
+    e.target.classList.toggle('open');
     toggleContainer($(this).closest('.js-toggle-container'));
 
     const targetTag = e.currentTarget.tagName.toLowerCase();
diff --git a/app/assets/javascripts/blob/blob_file_dropzone.js b/app/assets/javascripts/blob/blob_file_dropzone.js
index c9fe23aec75..4568b86f298 100644
--- a/app/assets/javascripts/blob/blob_file_dropzone.js
+++ b/app/assets/javascripts/blob/blob_file_dropzone.js
@@ -35,7 +35,7 @@ export default class BlobFileDropzone {
           this.removeFile(file);
         });
         this.on('sending', function (file, xhr, formData) {
-          formData.append('target_branch', form.find('input[name="target_branch"]').val());
+          formData.append('branch_name', form.find('input[name="branch_name"]').val());
           formData.append('create_merge_request', form.find('.js-create-merge-request').val());
           formData.append('commit_message', form.find('.js-commit-message').val());
         });
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index 91e5fb2a666..f2b79a88a4a 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -3,6 +3,8 @@
 /* global ListLabel */
 import queryData from '../utils/query_data';
 
+const PER_PAGE = 20;
+
 class List {
   constructor (obj) {
     this.id = obj.id;
@@ -58,7 +60,9 @@ class List {
 
   nextPage () {
     if (this.issuesSize > this.issues.length) {
-      this.page += 1;
+      if (this.issues.length / PER_PAGE >= 1) {
+        this.page += 1;
+      }
 
       return this.getIssues(false);
     }
@@ -145,10 +149,7 @@ class List {
   }
 
   updateIssueLabel(issue, listFrom, moveBeforeIid, moveAfterIid) {
-    gl.boardService.moveIssue(issue.id, listFrom.id, this.id, moveBeforeIid, moveAfterIid)
-      .then(() => {
-        listFrom.getIssues(false);
-      });
+    gl.boardService.moveIssue(issue.id, listFrom.id, this.id, moveBeforeIid, moveAfterIid);
   }
 
   findIssue (id) {
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index 0aad95c2fe3..97f279e4be4 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -2,6 +2,8 @@
 consistent-return, prefer-rest-params */
 /* global Breakpoints */
 
+import { bytesToKiB } from './lib/utils/number_utils';
+
 const bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; };
 const AUTO_SCROLL_OFFSET = 75;
 const DOWN_BUILD_TRACE = '#down-build-trace';
@@ -20,6 +22,7 @@ window.Build = (function () {
     this.state = this.options.logState;
     this.buildStage = this.options.buildStage;
     this.$document = $(document);
+    this.logBytes = 0;
 
     this.updateDropdown = bind(this.updateDropdown, this);
 
@@ -98,15 +101,22 @@ window.Build = (function () {
 
         if (log.append) {
           $buildContainer.append(log.html);
+          this.logBytes += log.size;
         } else {
           $buildContainer.html(log.html);
-          if (log.truncated) {
-            $('.js-truncated-info-size').html(` ${log.size} `);
-            this.$truncatedInfo.removeClass('hidden');
-            this.initAffixTruncatedInfo();
-          } else {
-            this.$truncatedInfo.addClass('hidden');
-          }
+          this.logBytes = log.size;
+        }
+
+        // if the incremental sum of logBytes we received is less than the total
+        // we need to show a message warning the user about that.
+        if (this.logBytes < log.total) {
+          // size is in bytes, we need to calculate KiB
+          const size = bytesToKiB(this.logBytes);
+          $('.js-truncated-info-size').html(`${size}`);
+          this.$truncatedInfo.removeClass('hidden');
+          this.initAffixTruncatedInfo();
+        } else {
+          this.$truncatedInfo.addClass('hidden');
         }
 
         this.checkAutoscroll();
diff --git a/app/assets/javascripts/ci_status_icons.js b/app/assets/javascripts/ci_status_icons.js
new file mode 100644
index 00000000000..f16616873b2
--- /dev/null
+++ b/app/assets/javascripts/ci_status_icons.js
@@ -0,0 +1,34 @@
+import CANCELED_SVG from 'icons/_icon_status_canceled_borderless.svg';
+import CREATED_SVG from 'icons/_icon_status_created_borderless.svg';
+import FAILED_SVG from 'icons/_icon_status_failed_borderless.svg';
+import MANUAL_SVG from 'icons/_icon_status_manual_borderless.svg';
+import PENDING_SVG from 'icons/_icon_status_pending_borderless.svg';
+import RUNNING_SVG from 'icons/_icon_status_running_borderless.svg';
+import SKIPPED_SVG from 'icons/_icon_status_skipped_borderless.svg';
+import SUCCESS_SVG from 'icons/_icon_status_success_borderless.svg';
+import WARNING_SVG from 'icons/_icon_status_warning_borderless.svg';
+
+const StatusIconEntityMap = {
+  icon_status_canceled: CANCELED_SVG,
+  icon_status_created: CREATED_SVG,
+  icon_status_failed: FAILED_SVG,
+  icon_status_manual: MANUAL_SVG,
+  icon_status_pending: PENDING_SVG,
+  icon_status_running: RUNNING_SVG,
+  icon_status_skipped: SKIPPED_SVG,
+  icon_status_success: SUCCESS_SVG,
+  icon_status_warning: WARNING_SVG,
+};
+
+export {
+  CANCELED_SVG,
+  CREATED_SVG,
+  FAILED_SVG,
+  MANUAL_SVG,
+  PENDING_SVG,
+  RUNNING_SVG,
+  SKIPPED_SVG,
+  SUCCESS_SVG,
+  WARNING_SVG,
+  StatusIconEntityMap as default,
+};
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index 1d16c64e07e..7438faeadf4 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -1,11 +1,11 @@
 import Vue from 'vue';
 import Visibility from 'visibilityjs';
 import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
-import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
-import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
-import eventHub from '../../vue_pipelines_index/event_hub';
-import EmptyState from '../../vue_pipelines_index/components/empty_state.vue';
-import ErrorState from '../../vue_pipelines_index/components/error_state.vue';
+import PipelinesService from '../../pipelines/services/pipelines_service';
+import PipelineStore from '../../pipelines/stores/pipelines_store';
+import eventHub from '../../pipelines/event_hub';
+import EmptyState from '../../pipelines/components/empty_state.vue';
+import ErrorState from '../../pipelines/components/error_state.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 import Poll from '../../lib/utils/poll';
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 95257e58e6b..c8e53cb554e 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -128,7 +128,7 @@ $(() => {
       },
       dismissOverviewDialog() {
         this.isOverviewDialogDismissed = true;
-        Cookies.set(OVERVIEW_DIALOG_COOKIE, '1');
+        Cookies.set(OVERVIEW_DIALOG_COOKIE, '1', { expires: 365 });
       },
     },
   });
diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
index eb76b7d15fd..aed7cac4e62 100644
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
@@ -3,65 +3,63 @@
 
 import Vue from 'vue';
 
-(() => {
-  const CommentAndResolveBtn = Vue.extend({
-    props: {
-      discussionId: String,
+const CommentAndResolveBtn = Vue.extend({
+  props: {
+    discussionId: String,
+  },
+  data() {
+    return {
+      textareaIsEmpty: true,
+      discussion: {},
+    };
+  },
+  computed: {
+    showButton: function () {
+      if (this.discussion) {
+        return this.discussion.isResolvable();
+      } else {
+        return false;
+      }
     },
-    data() {
-      return {
-        textareaIsEmpty: true,
-        discussion: {},
-      };
+    isDiscussionResolved: function () {
+      return this.discussion.isResolved();
     },
-    computed: {
-      showButton: function () {
-        if (this.discussion) {
-          return this.discussion.isResolvable();
+    buttonText: function () {
+      if (this.isDiscussionResolved) {
+        if (this.textareaIsEmpty) {
+          return "Unresolve discussion";
         } else {
-          return false;
+          return "Comment & unresolve discussion";
         }
-      },
-      isDiscussionResolved: function () {
-        return this.discussion.isResolved();
-      },
-      buttonText: function () {
-        if (this.isDiscussionResolved) {
-          if (this.textareaIsEmpty) {
-            return "Unresolve discussion";
-          } else {
-            return "Comment & unresolve discussion";
-          }
+      } else {
+        if (this.textareaIsEmpty) {
+          return "Resolve discussion";
         } else {
-          if (this.textareaIsEmpty) {
-            return "Resolve discussion";
-          } else {
-            return "Comment & resolve discussion";
-          }
+          return "Comment & resolve discussion";
         }
       }
-    },
-    created() {
-      if (this.discussionId) {
-        this.discussion = CommentsStore.state[this.discussionId];
-      }
-    },
-    mounted: function () {
-      if (!this.discussionId) return;
+    }
+  },
+  created() {
+    if (this.discussionId) {
+      this.discussion = CommentsStore.state[this.discussionId];
+    }
+  },
+  mounted: function () {
+    if (!this.discussionId) return;
 
-      const $textarea = $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`);
-      this.textareaIsEmpty = $textarea.val() === '';
+    const $textarea = $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`);
+    this.textareaIsEmpty = $textarea.val() === '';
 
-      $textarea.on('input.comment-and-resolve-btn', () => {
-        this.textareaIsEmpty = $textarea.val() === '';
-      });
-    },
-    destroyed: function () {
-      if (!this.discussionId) return;
+    $textarea.on('input.comment-and-resolve-btn', () => {
+      this.textareaIsEmpty = $textarea.val() === '';
+    });
+  },
+  destroyed: function () {
+    if (!this.discussionId) return;
 
-      $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`).off('input.comment-and-resolve-btn');
-    }
-  });
+    $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`).off('input.comment-and-resolve-btn');
+  }
+});
 
-  Vue.component('comment-and-resolve-btn', CommentAndResolveBtn);
-})(window);
+Vue.component('comment-and-resolve-btn', CommentAndResolveBtn);
diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
index 0297add94d5..f3a688fbf2f 100644
--- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
+++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
@@ -4,155 +4,153 @@
 import Vue from 'vue';
 import collapseIcon from '../icons/collapse_icon.svg';
 
-(() => {
-  const DiffNoteAvatars = Vue.extend({
-    props: ['discussionId'],
-    data() {
-      return {
-        isVisible: false,
-        lineType: '',
-        storeState: CommentsStore.state,
-        shownAvatars: 3,
-        collapseIcon,
-      };
-    },
-    template: `
-      <div class="diff-comment-avatar-holders"
-        v-show="notesCount !== 0">
-        <div v-if="!isVisible">
-          <img v-for="note in notesSubset"
-            class="avatar diff-comment-avatar has-tooltip js-diff-comment-avatar"
-            width="19"
-            height="19"
-            role="button"
-            data-container="body"
-            data-placement="top"
-            data-html="true"
-            :data-line-type="lineType"
-            :title="note.authorName + ': ' + note.noteTruncated"
-            :src="note.authorAvatar"
-            @click="clickedAvatar($event)" />
-          <span v-if="notesCount > shownAvatars"
-            class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
-            data-container="body"
-            data-placement="top"
-            ref="extraComments"
-            role="button"
-            :data-line-type="lineType"
-            :title="extraNotesTitle"
-            @click="clickedAvatar($event)">{{ moreText }}</span>
-        </div>
-        <button class="diff-notes-collapse js-diff-comment-avatar"
-          type="button"
-          aria-label="Show comments"
+const DiffNoteAvatars = Vue.extend({
+  props: ['discussionId'],
+  data() {
+    return {
+      isVisible: false,
+      lineType: '',
+      storeState: CommentsStore.state,
+      shownAvatars: 3,
+      collapseIcon,
+    };
+  },
+  template: `
+    <div class="diff-comment-avatar-holders"
+      v-show="notesCount !== 0">
+      <div v-if="!isVisible">
+        <img v-for="note in notesSubset"
+          class="avatar diff-comment-avatar has-tooltip js-diff-comment-avatar"
+          width="19"
+          height="19"
+          role="button"
+          data-container="body"
+          data-placement="top"
+          data-html="true"
+          :data-line-type="lineType"
+          :title="note.authorName + ': ' + note.noteTruncated"
+          :src="note.authorAvatar"
+          @click="clickedAvatar($event)" />
+        <span v-if="notesCount > shownAvatars"
+          class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
+          data-container="body"
+          data-placement="top"
+          ref="extraComments"
+          role="button"
           :data-line-type="lineType"
-          @click="clickedAvatar($event)"
-          v-if="isVisible"
-          v-html="collapseIcon">
-        </button>
+          :title="extraNotesTitle"
+          @click="clickedAvatar($event)">{{ moreText }}</span>
       </div>
-    `,
-    mounted() {
+      <button class="diff-notes-collapse js-diff-comment-avatar"
+        type="button"
+        aria-label="Show comments"
+        :data-line-type="lineType"
+        @click="clickedAvatar($event)"
+        v-if="isVisible"
+        v-html="collapseIcon">
+      </button>
+    </div>
+  `,
+  mounted() {
+    this.$nextTick(() => {
+      this.addNoCommentClass();
+      this.setDiscussionVisible();
+
+      this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new';
+    });
+
+    $(document).on('toggle.comments', () => {
       this.$nextTick(() => {
-        this.addNoCommentClass();
         this.setDiscussionVisible();
-
-        this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new';
       });
-
-      $(document).on('toggle.comments', () => {
+    });
+  },
+  destroyed() {
+    $(document).off('toggle.comments');
+  },
+  watch: {
+    storeState: {
+      handler() {
         this.$nextTick(() => {
-          this.setDiscussionVisible();
+          $('.has-tooltip', this.$el).tooltip('fixTitle');
+
+          // We need to add/remove a class to an element that is outside the Vue instance
+          this.addNoCommentClass();
         });
-      });
-    },
-    destroyed() {
-      $(document).off('toggle.comments');
-    },
-    watch: {
-      storeState: {
-        handler() {
-          this.$nextTick(() => {
-            $('.has-tooltip', this.$el).tooltip('fixTitle');
-
-            // We need to add/remove a class to an element that is outside the Vue instance
-            this.addNoCommentClass();
-          });
-        },
-        deep: true,
       },
+      deep: true,
     },
-    computed: {
-      notesSubset() {
-        let notes = [];
-
-        if (this.discussion) {
-          notes = Object.keys(this.discussion.notes)
-            .slice(0, this.shownAvatars)
-            .map(noteId => this.discussion.notes[noteId]);
-        }
-
-        return notes;
-      },
-      extraNotesTitle() {
-        if (this.discussion) {
-          const extra = this.discussion.notesCount() - this.shownAvatars;
+  },
+  computed: {
+    notesSubset() {
+      let notes = [];
+
+      if (this.discussion) {
+        notes = Object.keys(this.discussion.notes)
+          .slice(0, this.shownAvatars)
+          .map(noteId => this.discussion.notes[noteId]);
+      }
+
+      return notes;
+    },
+    extraNotesTitle() {
+      if (this.discussion) {
+        const extra = this.discussion.notesCount() - this.shownAvatars;
 
-          return `${extra} more comment${extra > 1 ? 's' : ''}`;
-        }
+        return `${extra} more comment${extra > 1 ? 's' : ''}`;
+      }
 
-        return '';
-      },
-      discussion() {
-        return this.storeState[this.discussionId];
-      },
-      notesCount() {
-        if (this.discussion) {
-          return this.discussion.notesCount();
-        }
+      return '';
+    },
+    discussion() {
+      return this.storeState[this.discussionId];
+    },
+    notesCount() {
+      if (this.discussion) {
+        return this.discussion.notesCount();
+      }
 
-        return 0;
-      },
-      moreText() {
-        const plusSign = this.notesCount < 100 ? '+' : '';
+      return 0;
+    },
+    moreText() {
+      const plusSign = this.notesCount < 100 ? '+' : '';
 
-        return `${plusSign}${this.notesCount - this.shownAvatars}`;
-      },
+      return `${plusSign}${this.notesCount - this.shownAvatars}`;
     },
-    methods: {
-      clickedAvatar(e) {
-        notes.addDiffNote(e);
+  },
+  methods: {
+    clickedAvatar(e) {
+      notes.addDiffNote(e);
 
-        // Toggle the active state of the toggle all button
-        this.toggleDiscussionsToggleState();
+      // Toggle the active state of the toggle all button
+      this.toggleDiscussionsToggleState();
 
-        this.$nextTick(() => {
-          this.setDiscussionVisible();
+      this.$nextTick(() => {
+        this.setDiscussionVisible();
 
-          $('.has-tooltip', this.$el).tooltip('fixTitle');
-          $('.has-tooltip', this.$el).tooltip('hide');
-        });
-      },
-      addNoCommentClass() {
-        const notesCount = this.notesCount;
+        $('.has-tooltip', this.$el).tooltip('fixTitle');
+        $('.has-tooltip', this.$el).tooltip('hide');
+      });
+    },
+    addNoCommentClass() {
+      const notesCount = this.notesCount;
 
-        $(this.$el).closest('.js-avatar-container')
-          .toggleClass('js-no-comment-btn', notesCount > 0)
-          .nextUntil('.js-avatar-container')
-          .toggleClass('js-no-comment-btn', notesCount > 0);
-      },
-      toggleDiscussionsToggleState() {
-        const $notesHolders = $(this.$el).closest('.code').find('.notes_holder');
-        const $visibleNotesHolders = $notesHolders.filter(':visible');
-        const $toggleDiffCommentsBtn = $(this.$el).closest('.diff-file').find('.js-toggle-diff-comments');
+      $(this.$el).closest('.js-avatar-container')
+        .toggleClass('js-no-comment-btn', notesCount > 0)
+        .nextUntil('.js-avatar-container')
+        .toggleClass('js-no-comment-btn', notesCount > 0);
+    },
+    toggleDiscussionsToggleState() {
+      const $notesHolders = $(this.$el).closest('.code').find('.notes_holder');
+      const $visibleNotesHolders = $notesHolders.filter(':visible');
+      const $toggleDiffCommentsBtn = $(this.$el).closest('.diff-file').find('.js-toggle-diff-comments');
 
-        $toggleDiffCommentsBtn.toggleClass('active', $notesHolders.length === $visibleNotesHolders.length);
-      },
-      setDiscussionVisible() {
-        this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(':visible');
-      },
+      $toggleDiffCommentsBtn.toggleClass('active', $notesHolders.length === $visibleNotesHolders.length);
+    },
+    setDiscussionVisible() {
+      this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(':visible');
     },
-  });
+  },
+});
 
-  Vue.component('diff-note-avatars', DiffNoteAvatars);
-})();
+Vue.component('diff-note-avatars', DiffNoteAvatars);
diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
index 8edc45130fc..8a0fd3bb4a7 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
@@ -4,192 +4,190 @@
 
 import Vue from 'vue';
 
-(() => {
-  const JumpToDiscussion = Vue.extend({
-    mixins: [DiscussionMixins],
-    props: {
-      discussionId: String
+const JumpToDiscussion = Vue.extend({
+  mixins: [DiscussionMixins],
+  props: {
+    discussionId: String
+  },
+  data: function () {
+    return {
+      discussions: CommentsStore.state,
+      discussion: {},
+    };
+  },
+  computed: {
+    allResolved: function () {
+      return this.unresolvedDiscussionCount === 0;
     },
-    data: function () {
-      return {
-        discussions: CommentsStore.state,
-        discussion: {},
-      };
-    },
-    computed: {
-      allResolved: function () {
-        return this.unresolvedDiscussionCount === 0;
-      },
-      showButton: function () {
-        if (this.discussionId) {
-          if (this.unresolvedDiscussionCount > 1) {
-            return true;
-          } else {
-            return this.discussionId !== this.lastResolvedId;
-          }
+    showButton: function () {
+      if (this.discussionId) {
+        if (this.unresolvedDiscussionCount > 1) {
+          return true;
         } else {
-          return this.unresolvedDiscussionCount >= 1;
+          return this.discussionId !== this.lastResolvedId;
         }
-      },
-      lastResolvedId: function () {
-        let lastId;
-        for (const discussionId in this.discussions) {
-          const discussion = this.discussions[discussionId];
-
-          if (!discussion.isResolved()) {
-            lastId = discussion.id;
-          }
-        }
-        return lastId;
+      } else {
+        return this.unresolvedDiscussionCount >= 1;
       }
     },
-    methods: {
-      jumpToNextUnresolvedDiscussion: function () {
-        let discussionsSelector;
-        let discussionIdsInScope;
-        let firstUnresolvedDiscussionId;
-        let nextUnresolvedDiscussionId;
-        let activeTab = window.mrTabs.currentAction;
-        let hasDiscussionsToJumpTo = true;
-        let jumpToFirstDiscussion = !this.discussionId;
-
-        const discussionIdsForElements = function(elements) {
-          return elements.map(function() {
-            return $(this).attr('data-discussion-id');
-          }).toArray();
-        };
-
-        const discussions = this.discussions;
-
-        if (activeTab === 'diffs') {
-          discussionsSelector = '.diffs .notes[data-discussion-id]';
-          discussionIdsInScope = discussionIdsForElements($(discussionsSelector));
-
-          let unresolvedDiscussionCount = 0;
-
-          for (let i = 0; i < discussionIdsInScope.length; i += 1) {
-            const discussionId = discussionIdsInScope[i];
-            const discussion = discussions[discussionId];
-            if (discussion && !discussion.isResolved()) {
-              unresolvedDiscussionCount += 1;
-            }
-          }
+    lastResolvedId: function () {
+      let lastId;
+      for (const discussionId in this.discussions) {
+        const discussion = this.discussions[discussionId];
 
-          if (this.discussionId && !this.discussion.isResolved()) {
-            // If this is the last unresolved discussion on the diffs tab,
-            // there are no discussions to jump to.
-            if (unresolvedDiscussionCount === 1) {
-              hasDiscussionsToJumpTo = false;
-            }
-          } else {
-            // If there are no unresolved discussions on the diffs tab at all,
-            // there are no discussions to jump to.
-            if (unresolvedDiscussionCount === 0) {
-              hasDiscussionsToJumpTo = false;
-            }
-          }
-        } else if (activeTab !== 'notes') {
-          // If we are on the commits or builds tabs,
-          // there are no discussions to jump to.
-          hasDiscussionsToJumpTo = false;
+        if (!discussion.isResolved()) {
+          lastId = discussion.id;
         }
+      }
+      return lastId;
+    }
+  },
+  methods: {
+    jumpToNextUnresolvedDiscussion: function () {
+      let discussionsSelector;
+      let discussionIdsInScope;
+      let firstUnresolvedDiscussionId;
+      let nextUnresolvedDiscussionId;
+      let activeTab = window.mrTabs.currentAction;
+      let hasDiscussionsToJumpTo = true;
+      let jumpToFirstDiscussion = !this.discussionId;
+
+      const discussionIdsForElements = function(elements) {
+        return elements.map(function() {
+          return $(this).attr('data-discussion-id');
+        }).toArray();
+      };
 
-        if (!hasDiscussionsToJumpTo) {
-          // If there are no discussions to jump to on the current page,
-          // switch to the notes tab and jump to the first disucssion there.
-          window.mrTabs.activateTab('notes');
-          activeTab = 'notes';
-          jumpToFirstDiscussion = true;
-        }
+      const discussions = this.discussions;
 
-        if (activeTab === 'notes') {
-          discussionsSelector = '.discussion[data-discussion-id]';
-          discussionIdsInScope = discussionIdsForElements($(discussionsSelector));
-        }
+      if (activeTab === 'diffs') {
+        discussionsSelector = '.diffs .notes[data-discussion-id]';
+        discussionIdsInScope = discussionIdsForElements($(discussionsSelector));
+
+        let unresolvedDiscussionCount = 0;
 
-        let currentDiscussionFound = false;
         for (let i = 0; i < discussionIdsInScope.length; i += 1) {
           const discussionId = discussionIdsInScope[i];
           const discussion = discussions[discussionId];
+          if (discussion && !discussion.isResolved()) {
+            unresolvedDiscussionCount += 1;
+          }
+        }
 
-          if (!discussion) {
-            // Discussions for comments on commits in this MR don't have a resolved status.
-            continue;
+        if (this.discussionId && !this.discussion.isResolved()) {
+          // If this is the last unresolved discussion on the diffs tab,
+          // there are no discussions to jump to.
+          if (unresolvedDiscussionCount === 1) {
+            hasDiscussionsToJumpTo = false;
+          }
+        } else {
+          // If there are no unresolved discussions on the diffs tab at all,
+          // there are no discussions to jump to.
+          if (unresolvedDiscussionCount === 0) {
+            hasDiscussionsToJumpTo = false;
           }
+        }
+      } else if (activeTab !== 'notes') {
+        // If we are on the commits or builds tabs,
+        // there are no discussions to jump to.
+        hasDiscussionsToJumpTo = false;
+      }
 
-          if (!firstUnresolvedDiscussionId && !discussion.isResolved()) {
-            firstUnresolvedDiscussionId = discussionId;
+      if (!hasDiscussionsToJumpTo) {
+        // If there are no discussions to jump to on the current page,
+        // switch to the notes tab and jump to the first disucssion there.
+        window.mrTabs.activateTab('notes');
+        activeTab = 'notes';
+        jumpToFirstDiscussion = true;
+      }
 
-            if (jumpToFirstDiscussion) {
-              break;
-            }
+      if (activeTab === 'notes') {
+        discussionsSelector = '.discussion[data-discussion-id]';
+        discussionIdsInScope = discussionIdsForElements($(discussionsSelector));
+      }
+
+      let currentDiscussionFound = false;
+      for (let i = 0; i < discussionIdsInScope.length; i += 1) {
+        const discussionId = discussionIdsInScope[i];
+        const discussion = discussions[discussionId];
+
+        if (!discussion) {
+          // Discussions for comments on commits in this MR don't have a resolved status.
+          continue;
+        }
+
+        if (!firstUnresolvedDiscussionId && !discussion.isResolved()) {
+          firstUnresolvedDiscussionId = discussionId;
+
+          if (jumpToFirstDiscussion) {
+            break;
           }
+        }
 
-          if (!jumpToFirstDiscussion) {
-            if (currentDiscussionFound) {
-              if (!discussion.isResolved()) {
-                nextUnresolvedDiscussionId = discussionId;
-                break;
-              }
-              else {
-                continue;
-              }
+        if (!jumpToFirstDiscussion) {
+          if (currentDiscussionFound) {
+            if (!discussion.isResolved()) {
+              nextUnresolvedDiscussionId = discussionId;
+              break;
             }
-
-            if (discussionId === this.discussionId) {
-              currentDiscussionFound = true;
+            else {
+              continue;
             }
           }
+
+          if (discussionId === this.discussionId) {
+            currentDiscussionFound = true;
+          }
         }
+      }
 
-        nextUnresolvedDiscussionId = nextUnresolvedDiscussionId || firstUnresolvedDiscussionId;
+      nextUnresolvedDiscussionId = nextUnresolvedDiscussionId || firstUnresolvedDiscussionId;
 
-        if (!nextUnresolvedDiscussionId) {
-          return;
-        }
+      if (!nextUnresolvedDiscussionId) {
+        return;
+      }
 
-        let $target = $(`${discussionsSelector}[data-discussion-id="${nextUnresolvedDiscussionId}"]`);
+      let $target = $(`${discussionsSelector}[data-discussion-id="${nextUnresolvedDiscussionId}"]`);
 
-        if (activeTab === 'notes') {
-          $target = $target.closest('.note-discussion');
+      if (activeTab === 'notes') {
+        $target = $target.closest('.note-discussion');
 
-          // If the next discussion is closed, toggle it open.
-          if ($target.find('.js-toggle-content').is(':hidden')) {
-            $target.find('.js-toggle-button i').trigger('click');
+        // If the next discussion is closed, toggle it open.
+        if ($target.find('.js-toggle-content').is(':hidden')) {
+          $target.find('.js-toggle-button i').trigger('click');
+        }
+      } else if (activeTab === 'diffs') {
+        // Resolved discussions are hidden in the diffs tab by default.
+        // If they are marked unresolved on the notes tab, they will still be hidden on the diffs tab.
+        // When jumping between unresolved discussions on the diffs tab, we show them.
+        $target.closest(".content").show();
+
+        $target = $target.closest("tr.notes_holder");
+        $target.show();
+
+        // If we are on the diffs tab, we don't scroll to the discussion itself, but to
+        // 4 diff lines above it: the line the discussion was in response to + 3 context
+        let prevEl;
+        for (let i = 0; i < 4; i += 1) {
+          prevEl = $target.prev();
+
+          // If the discussion doesn't have 4 lines above it, we'll have to do with fewer.
+          if (!prevEl.hasClass("line_holder")) {
+            break;
           }
-        } else if (activeTab === 'diffs') {
-          // Resolved discussions are hidden in the diffs tab by default.
-          // If they are marked unresolved on the notes tab, they will still be hidden on the diffs tab.
-          // When jumping between unresolved discussions on the diffs tab, we show them.
-          $target.closest(".content").show();
-
-          $target = $target.closest("tr.notes_holder");
-          $target.show();
-
-          // If we are on the diffs tab, we don't scroll to the discussion itself, but to
-          // 4 diff lines above it: the line the discussion was in response to + 3 context
-          let prevEl;
-          for (let i = 0; i < 4; i += 1) {
-            prevEl = $target.prev();
-
-            // If the discussion doesn't have 4 lines above it, we'll have to do with fewer.
-            if (!prevEl.hasClass("line_holder")) {
-              break;
-            }
 
-            $target = prevEl;
-          }
+          $target = prevEl;
         }
-
-        $.scrollTo($target, {
-          offset: 0
-        });
       }
-    },
-    created() {
-      this.discussion = this.discussions[this.discussionId];
-    },
-  });
 
-  Vue.component('jump-to-discussion', JumpToDiscussion);
-})();
+      $.scrollTo($target, {
+        offset: 0
+      });
+    }
+  },
+  created() {
+    this.discussion = this.discussions[this.discussionId];
+  },
+});
+
+Vue.component('jump-to-discussion', JumpToDiscussion);
diff --git a/app/assets/javascripts/diff_notes/components/new_issue_for_discussion.js b/app/assets/javascripts/diff_notes/components/new_issue_for_discussion.js
index 8eb0e10b832..e0c09aa0eee 100644
--- a/app/assets/javascripts/diff_notes/components/new_issue_for_discussion.js
+++ b/app/assets/javascripts/diff_notes/components/new_issue_for_discussion.js
@@ -2,29 +2,27 @@
 
 import Vue from 'vue';
 
-(() => {
-  const NewIssueForDiscussion = Vue.extend({
-    props: {
-      discussionId: {
-        type: String,
-        required: true,
-      },
+const NewIssueForDiscussion = Vue.extend({
+  props: {
+    discussionId: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        discussions: CommentsStore.state,
-      };
+  },
+  data() {
+    return {
+      discussions: CommentsStore.state,
+    };
+  },
+  computed: {
+    discussion() {
+      return this.discussions[this.discussionId];
     },
-    computed: {
-      discussion() {
-        return this.discussions[this.discussionId];
-      },
-      showButton() {
-        if (this.discussion) return !this.discussion.isResolved();
-        return false;
-      },
+    showButton() {
+      if (this.discussion) return !this.discussion.isResolved();
+      return false;
     },
-  });
+  },
+});
 
-  Vue.component('new-issue-for-discussion-btn', NewIssueForDiscussion);
-})();
+Vue.component('new-issue-for-discussion-btn', NewIssueForDiscussion);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js
index 312f38ce241..8fafd13c6c2 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js
@@ -5,117 +5,115 @@
 
 import Vue from 'vue';
 
-(() => {
-  const ResolveBtn = Vue.extend({
-    props: {
-      noteId: Number,
-      discussionId: String,
-      resolved: Boolean,
-      canResolve: Boolean,
-      resolvedBy: String,
-      authorName: String,
-      authorAvatar: String,
-      noteTruncated: String,
+const ResolveBtn = Vue.extend({
+  props: {
+    noteId: Number,
+    discussionId: String,
+    resolved: Boolean,
+    canResolve: Boolean,
+    resolvedBy: String,
+    authorName: String,
+    authorAvatar: String,
+    noteTruncated: String,
+  },
+  data: function () {
+    return {
+      discussions: CommentsStore.state,
+      loading: false
+    };
+  },
+  watch: {
+    'discussions': {
+      handler: 'updateTooltip',
+      deep: true
+    }
+  },
+  computed: {
+    discussion: function () {
+      return this.discussions[this.discussionId];
     },
-    data: function () {
-      return {
-        discussions: CommentsStore.state,
-        loading: false,
-        note: {},
-      };
+    note: function () {
+      return this.discussion ? this.discussion.getNote(this.noteId) : {};
     },
-    watch: {
-      'discussions': {
-        handler: 'updateTooltip',
-        deep: true
+    buttonText: function () {
+      if (this.isResolved) {
+        return `Resolved by ${this.resolvedByName}`;
+      } else if (this.canResolve) {
+        return 'Mark as resolved';
+      } else {
+        return 'Unable to resolve';
       }
     },
-    computed: {
-      discussion: function () {
-        return this.discussions[this.discussionId];
-      },
-      buttonText: function () {
-        if (this.isResolved) {
-          return `Resolved by ${this.resolvedByName}`;
-        } else if (this.canResolve) {
-          return 'Mark as resolved';
-        } else {
-          return 'Unable to resolve';
-        }
-      },
-      isResolved: function () {
-        if (this.note) {
-          return this.note.resolved;
-        } else {
-          return false;
-        }
-      },
-      resolvedByName: function () {
-        return this.note.resolved_by;
-      },
+    isResolved: function () {
+      if (this.note) {
+        return this.note.resolved;
+      } else {
+        return false;
+      }
+    },
+    resolvedByName: function () {
+      return this.note.resolved_by;
     },
-    methods: {
-      updateTooltip: function () {
-        this.$nextTick(() => {
-          $(this.$refs.button)
-            .tooltip('hide')
-            .tooltip('fixTitle');
-        });
-      },
-      resolve: function () {
-        if (!this.canResolve) return;
+  },
+  methods: {
+    updateTooltip: function () {
+      this.$nextTick(() => {
+        $(this.$refs.button)
+          .tooltip('hide')
+          .tooltip('fixTitle');
+      });
+    },
+    resolve: function () {
+      if (!this.canResolve) return;
 
-        let promise;
-        this.loading = true;
+      let promise;
+      this.loading = true;
 
-        if (this.isResolved) {
-          promise = ResolveService
-            .unresolve(this.noteId);
-        } else {
-          promise = ResolveService
-            .resolve(this.noteId);
-        }
+      if (this.isResolved) {
+        promise = ResolveService
+          .unresolve(this.noteId);
+      } else {
+        promise = ResolveService
+          .resolve(this.noteId);
+      }
 
-        promise.then((response) => {
-          this.loading = false;
+      promise.then((response) => {
+        this.loading = false;
 
-          if (response.status === 200) {
-            const data = response.json();
-            const resolved_by = data ? data.resolved_by : null;
+        if (response.status === 200) {
+          const data = response.json();
+          const resolved_by = data ? data.resolved_by : null;
 
-            CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
-            this.discussion.updateHeadline(data);
-          } else {
-            new Flash('An error occurred when trying to resolve a comment. Please try again.', 'alert');
-          }
+          CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
+          this.discussion.updateHeadline(data);
+        } else {
+          new Flash('An error occurred when trying to resolve a comment. Please try again.', 'alert');
+        }
 
-          this.updateTooltip();
-        });
-      }
-    },
-    mounted: function () {
-      $(this.$refs.button).tooltip({
-        container: 'body'
+        this.updateTooltip();
       });
-    },
-    beforeDestroy: function () {
-      CommentsStore.delete(this.discussionId, this.noteId);
-    },
-    created: function () {
-      CommentsStore.create({
-        discussionId: this.discussionId,
-        noteId: this.noteId,
-        canResolve: this.canResolve,
-        resolved: this.resolved,
-        resolvedBy: this.resolvedBy,
-        authorName: this.authorName,
-        authorAvatar: this.authorAvatar,
-        noteTruncated: this.noteTruncated,
-      });
-
-      this.note = this.discussion.getNote(this.noteId);
     }
-  });
+  },
+  mounted: function () {
+    $(this.$refs.button).tooltip({
+      container: 'body'
+    });
+  },
+  beforeDestroy: function () {
+    CommentsStore.delete(this.discussionId, this.noteId);
+  },
+  created: function () {
+    CommentsStore.create({
+      discussionId: this.discussionId,
+      noteId: this.noteId,
+      canResolve: this.canResolve,
+      resolved: this.resolved,
+      resolvedBy: this.resolvedBy,
+      authorName: this.authorName,
+      authorAvatar: this.authorAvatar,
+      noteTruncated: this.noteTruncated,
+    });
+  }
+});
 
-  Vue.component('resolve-btn', ResolveBtn);
-})();
+Vue.component('resolve-btn', ResolveBtn);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js b/app/assets/javascripts/diff_notes/components/resolve_count.js
index 27147ac6b5c..96e5a440357 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js
@@ -4,24 +4,22 @@
 
 import Vue from 'vue';
 
-((w) => {
-  w.ResolveCount = Vue.extend({
-    mixins: [DiscussionMixins],
-    props: {
-      loggedOut: Boolean
+window.ResolveCount = Vue.extend({
+  mixins: [DiscussionMixins],
+  props: {
+    loggedOut: Boolean
+  },
+  data: function () {
+    return {
+      discussions: CommentsStore.state
+    };
+  },
+  computed: {
+    allResolved: function () {
+      return this.resolvedDiscussionCount === this.discussionCount;
     },
-    data: function () {
-      return {
-        discussions: CommentsStore.state
-      };
-    },
-    computed: {
-      allResolved: function () {
-        return this.resolvedDiscussionCount === this.discussionCount;
-      },
-      resolvedCountText() {
-        return this.discussionCount === 1 ? 'discussion' : 'discussions';
-      }
+    resolvedCountText() {
+      return this.discussionCount === 1 ? 'discussion' : 'discussions';
     }
-  });
-})(window);
+  }
+});
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
index a964b7d0c6b..6a036e96171 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
@@ -4,59 +4,57 @@
 
 import Vue from 'vue';
 
-(() => {
-  const ResolveDiscussionBtn = Vue.extend({
-    props: {
-      discussionId: String,
-      mergeRequestId: Number,
-      canResolve: Boolean,
-    },
-    data: function() {
-      return {
-        discussion: {},
-      };
+const ResolveDiscussionBtn = Vue.extend({
+  props: {
+    discussionId: String,
+    mergeRequestId: Number,
+    canResolve: Boolean,
+  },
+  data: function() {
+    return {
+      discussion: {},
+    };
+  },
+  computed: {
+    showButton: function () {
+      if (this.discussion) {
+        return this.discussion.isResolvable();
+      } else {
+        return false;
+      }
     },
-    computed: {
-      showButton: function () {
-        if (this.discussion) {
-          return this.discussion.isResolvable();
-        } else {
-          return false;
-        }
-      },
-      isDiscussionResolved: function () {
-        if (this.discussion) {
-          return this.discussion.isResolved();
-        } else {
-          return false;
-        }
-      },
-      buttonText: function () {
-        if (this.isDiscussionResolved) {
-          return "Unresolve discussion";
-        } else {
-          return "Resolve discussion";
-        }
-      },
-      loading: function () {
-        if (this.discussion) {
-          return this.discussion.loading;
-        } else {
-          return false;
-        }
+    isDiscussionResolved: function () {
+      if (this.discussion) {
+        return this.discussion.isResolved();
+      } else {
+        return false;
       }
     },
-    methods: {
-      resolve: function () {
-        ResolveService.toggleResolveForDiscussion(this.mergeRequestId, this.discussionId);
+    buttonText: function () {
+      if (this.isDiscussionResolved) {
+        return "Unresolve discussion";
+      } else {
+        return "Resolve discussion";
       }
     },
-    created: function () {
-      CommentsStore.createDiscussion(this.discussionId, this.canResolve);
-
-      this.discussion = CommentsStore.state[this.discussionId];
+    loading: function () {
+      if (this.discussion) {
+        return this.discussion.loading;
+      } else {
+        return false;
+      }
+    }
+  },
+  methods: {
+    resolve: function () {
+      ResolveService.toggleResolveForDiscussion(this.mergeRequestId, this.discussionId);
     }
-  });
+  },
+  created: function () {
+    CommentsStore.createDiscussion(this.discussionId, this.canResolve);
+
+    this.discussion = CommentsStore.state[this.discussionId];
+  }
+});
 
-  Vue.component('resolve-discussion-btn', ResolveDiscussionBtn);
-})();
+Vue.component('resolve-discussion-btn', ResolveDiscussionBtn);
diff --git a/app/assets/javascripts/diff_notes/mixins/discussion.js b/app/assets/javascripts/diff_notes/mixins/discussion.js
index 3c08c222f46..36c4abf02cf 100644
--- a/app/assets/javascripts/diff_notes/mixins/discussion.js
+++ b/app/assets/javascripts/diff_notes/mixins/discussion.js
@@ -1,37 +1,35 @@
 /* eslint-disable object-shorthand, func-names, guard-for-in, no-restricted-syntax, comma-dangle, no-param-reassign, max-len */
 
-((w) => {
-  w.DiscussionMixins = {
-    computed: {
-      discussionCount: function () {
-        return Object.keys(this.discussions).length;
-      },
-      resolvedDiscussionCount: function () {
-        let resolvedCount = 0;
+window.DiscussionMixins = {
+  computed: {
+    discussionCount: function () {
+      return Object.keys(this.discussions).length;
+    },
+    resolvedDiscussionCount: function () {
+      let resolvedCount = 0;
 
-        for (const discussionId in this.discussions) {
-          const discussion = this.discussions[discussionId];
+      for (const discussionId in this.discussions) {
+        const discussion = this.discussions[discussionId];
 
-          if (discussion.isResolved()) {
-            resolvedCount += 1;
-          }
+        if (discussion.isResolved()) {
+          resolvedCount += 1;
         }
+      }
 
-        return resolvedCount;
-      },
-      unresolvedDiscussionCount: function () {
-        let unresolvedCount = 0;
+      return resolvedCount;
+    },
+    unresolvedDiscussionCount: function () {
+      let unresolvedCount = 0;
 
-        for (const discussionId in this.discussions) {
-          const discussion = this.discussions[discussionId];
+      for (const discussionId in this.discussions) {
+        const discussion = this.discussions[discussionId];
 
-          if (!discussion.isResolved()) {
-            unresolvedCount += 1;
-          }
+        if (!discussion.isResolved()) {
+          unresolvedCount += 1;
         }
-
-        return unresolvedCount;
       }
+
+      return unresolvedCount;
     }
-  };
-})(window);
+  }
+};
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js b/app/assets/javascripts/diff_notes/services/resolve.js
index bfa4fc9037a..e1e2e3e93f9 100644
--- a/app/assets/javascripts/diff_notes/services/resolve.js
+++ b/app/assets/javascripts/diff_notes/services/resolve.js
@@ -9,76 +9,74 @@ require('../../vue_shared/vue_resource_interceptor');
 
 Vue.use(VueResource);
 
-(() => {
-  window.gl = window.gl || {};
+window.gl = window.gl || {};
 
-  class ResolveServiceClass {
-    constructor(root) {
-      this.noteResource = Vue.resource(`${root}/notes{/noteId}/resolve`);
-      this.discussionResource = Vue.resource(`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve`);
-    }
-
-    resolve(noteId) {
-      return this.noteResource.save({ noteId }, {});
-    }
+class ResolveServiceClass {
+  constructor(root) {
+    this.noteResource = Vue.resource(`${root}/notes{/noteId}/resolve`);
+    this.discussionResource = Vue.resource(`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve`);
+  }
 
-    unresolve(noteId) {
-      return this.noteResource.delete({ noteId }, {});
-    }
+  resolve(noteId) {
+    return this.noteResource.save({ noteId }, {});
+  }
 
-    toggleResolveForDiscussion(mergeRequestId, discussionId) {
-      const discussion = CommentsStore.state[discussionId];
-      const isResolved = discussion.isResolved();
-      let promise;
+  unresolve(noteId) {
+    return this.noteResource.delete({ noteId }, {});
+  }
 
-      if (isResolved) {
-        promise = this.unResolveAll(mergeRequestId, discussionId);
-      } else {
-        promise = this.resolveAll(mergeRequestId, discussionId);
-      }
+  toggleResolveForDiscussion(mergeRequestId, discussionId) {
+    const discussion = CommentsStore.state[discussionId];
+    const isResolved = discussion.isResolved();
+    let promise;
 
-      promise.then((response) => {
-        discussion.loading = false;
+    if (isResolved) {
+      promise = this.unResolveAll(mergeRequestId, discussionId);
+    } else {
+      promise = this.resolveAll(mergeRequestId, discussionId);
+    }
 
-        if (response.status === 200) {
-          const data = response.json();
-          const resolved_by = data ? data.resolved_by : null;
+    promise.then((response) => {
+      discussion.loading = false;
 
-          if (isResolved) {
-            discussion.unResolveAllNotes();
-          } else {
-            discussion.resolveAllNotes(resolved_by);
-          }
+      if (response.status === 200) {
+        const data = response.json();
+        const resolved_by = data ? data.resolved_by : null;
 
-          discussion.updateHeadline(data);
+        if (isResolved) {
+          discussion.unResolveAllNotes();
         } else {
-          new Flash('An error occurred when trying to resolve a discussion. Please try again.', 'alert');
+          discussion.resolveAllNotes(resolved_by);
         }
-      });
-    }
 
-    resolveAll(mergeRequestId, discussionId) {
-      const discussion = CommentsStore.state[discussionId];
+        discussion.updateHeadline(data);
+      } else {
+        new Flash('An error occurred when trying to resolve a discussion. Please try again.', 'alert');
+      }
+    });
+  }
 
-      discussion.loading = true;
+  resolveAll(mergeRequestId, discussionId) {
+    const discussion = CommentsStore.state[discussionId];
 
-      return this.discussionResource.save({
-        mergeRequestId,
-        discussionId
-      }, {});
-    }
+    discussion.loading = true;
+
+    return this.discussionResource.save({
+      mergeRequestId,
+      discussionId
+    }, {});
+  }
 
-    unResolveAll(mergeRequestId, discussionId) {
-      const discussion = CommentsStore.state[discussionId];
+  unResolveAll(mergeRequestId, discussionId) {
+    const discussion = CommentsStore.state[discussionId];
 
-      discussion.loading = true;
+    discussion.loading = true;
 
-      return this.discussionResource.delete({
-        mergeRequestId,
-        discussionId
-      }, {});
-    }
+    return this.discussionResource.delete({
+      mergeRequestId,
+      discussionId
+    }, {});
   }
+}
 
-  gl.DiffNotesResolveServiceClass = ResolveServiceClass;
-})();
+gl.DiffNotesResolveServiceClass = ResolveServiceClass;
diff --git a/app/assets/javascripts/diff_notes/stores/comments.js b/app/assets/javascripts/diff_notes/stores/comments.js
index e6cbda56c91..d802db7d3af 100644
--- a/app/assets/javascripts/diff_notes/stores/comments.js
+++ b/app/assets/javascripts/diff_notes/stores/comments.js
@@ -3,56 +3,54 @@
 
 import Vue from 'vue';
 
-((w) => {
-  w.CommentsStore = {
-    state: {},
-    get: function (discussionId, noteId) {
-      return this.state[discussionId].getNote(noteId);
-    },
-    createDiscussion: function (discussionId, canResolve) {
-      let discussion = this.state[discussionId];
-      if (!this.state[discussionId]) {
-        discussion = new DiscussionModel(discussionId);
-        Vue.set(this.state, discussionId, discussion);
-      }
+window.CommentsStore = {
+  state: {},
+  get: function (discussionId, noteId) {
+    return this.state[discussionId].getNote(noteId);
+  },
+  createDiscussion: function (discussionId, canResolve) {
+    let discussion = this.state[discussionId];
+    if (!this.state[discussionId]) {
+      discussion = new DiscussionModel(discussionId);
+      Vue.set(this.state, discussionId, discussion);
+    }
 
-      if (canResolve !== undefined) {
-        discussion.canResolve = canResolve;
-      }
+    if (canResolve !== undefined) {
+      discussion.canResolve = canResolve;
+    }
 
-      return discussion;
-    },
-    create: function (noteObj) {
-      const discussion = this.createDiscussion(noteObj.discussionId);
+    return discussion;
+  },
+  create: function (noteObj) {
+    const discussion = this.createDiscussion(noteObj.discussionId);
+
+    discussion.createNote(noteObj);
+  },
+  update: function (discussionId, noteId, resolved, resolved_by) {
+    const discussion = this.state[discussionId];
+    const note = discussion.getNote(noteId);
+    note.resolved = resolved;
+    note.resolved_by = resolved_by;
+  },
+  delete: function (discussionId, noteId) {
+    const discussion = this.state[discussionId];
+    discussion.deleteNote(noteId);
+
+    if (discussion.notesCount() === 0) {
+      Vue.delete(this.state, discussionId);
+    }
+  },
+  unresolvedDiscussionIds: function () {
+    const ids = [];
 
-      discussion.createNote(noteObj);
-    },
-    update: function (discussionId, noteId, resolved, resolved_by) {
-      const discussion = this.state[discussionId];
-      const note = discussion.getNote(noteId);
-      note.resolved = resolved;
-      note.resolved_by = resolved_by;
-    },
-    delete: function (discussionId, noteId) {
+    for (const discussionId in this.state) {
       const discussion = this.state[discussionId];
-      discussion.deleteNote(noteId);
 
-      if (discussion.notesCount() === 0) {
-        Vue.delete(this.state, discussionId);
+      if (!discussion.isResolved()) {
+        ids.push(discussion.id);
       }
-    },
-    unresolvedDiscussionIds: function () {
-      const ids = [];
-
-      for (const discussionId in this.state) {
-        const discussion = this.state[discussionId];
-
-        if (!discussion.isResolved()) {
-          ids.push(discussion.id);
-        }
-      }
-
-      return ids;
     }
-  };
-})(window);
+
+    return ids;
+  }
+};
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index f277e1dddc7..02a7df9b2a0 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -33,6 +33,7 @@
 /* global Labels */
 /* global Shortcuts */
 /* global Sidebar */
+/* global ShortcutsWiki */
 
 import Issue from './issue';
 
@@ -46,6 +47,7 @@ import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
 import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
+import ShortcutsWiki from './shortcuts_wiki';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -148,13 +150,13 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:milestones:new':
         case 'projects:milestones:edit':
         case 'projects:milestones:update':
+        case 'groups:milestones:new':
+        case 'groups:milestones:edit':
+        case 'groups:milestones:update':
           new ZenMode();
           new gl.DueDateSelectors();
           new gl.GLForm($('.milestone-form'));
           break;
-        case 'groups:milestones:new':
-          new ZenMode();
-          break;
         case 'projects:compare:show':
           new gl.Diff();
           break;
@@ -365,6 +367,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'admin':
           new Admin();
           switch (path[1]) {
+            case 'cohorts':
+              new gl.UsagePing();
+              break;
             case 'groups':
               new UsersSelect();
               break;
@@ -416,7 +421,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
               break;
             case 'wikis':
               new gl.Wikis();
-              shortcut_handler = new ShortcutsNavigation();
+              shortcut_handler = new ShortcutsWiki();
               new ZenMode();
               new gl.GLForm($('.wiki-form'));
               break;
diff --git a/app/assets/javascripts/droplab/constants.js b/app/assets/javascripts/droplab/constants.js
index a23d914772a..8883ed9aa14 100644
--- a/app/assets/javascripts/droplab/constants.js
+++ b/app/assets/javascripts/droplab/constants.js
@@ -2,10 +2,12 @@ const DATA_TRIGGER = 'data-dropdown-trigger';
 const DATA_DROPDOWN = 'data-dropdown';
 const SELECTED_CLASS = 'droplab-item-selected';
 const ACTIVE_CLASS = 'droplab-item-active';
+const IGNORE_CLASS = 'droplab-item-ignore';
 
 export {
   DATA_TRIGGER,
   DATA_DROPDOWN,
   SELECTED_CLASS,
   ACTIVE_CLASS,
+  IGNORE_CLASS,
 };
diff --git a/app/assets/javascripts/droplab/drop_down.js b/app/assets/javascripts/droplab/drop_down.js
index 9588921ebcd..1fb4d63923c 100644
--- a/app/assets/javascripts/droplab/drop_down.js
+++ b/app/assets/javascripts/droplab/drop_down.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 
 import utils from './utils';
-import { SELECTED_CLASS } from './constants';
+import { SELECTED_CLASS, IGNORE_CLASS } from './constants';
 
 var DropDown = function(list) {
   this.currentIndex = 0;
@@ -36,6 +36,7 @@ Object.assign(DropDown.prototype, {
 
   clickEvent: function(e) {
     if (e.target.tagName === 'UL') return;
+    if (e.target.classList.contains(IGNORE_CLASS)) return;
 
     var selected = utils.closest(e.target, 'LI');
     if (!selected) return;
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index f2963a5eb19..b70d242269d 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -38,6 +38,9 @@ window.DropzoneInput = (function() {
       "opacity": 0,
       "display": "none"
     });
+
+    if (!project_uploads_path) return;
+
     dropzone = form_dropzone.dropzone({
       url: project_uploads_path,
       dictDefaultMessage: "",
@@ -66,7 +69,10 @@ window.DropzoneInput = (function() {
         form_textarea.focus();
       },
       success: function(header, response) {
-        pasteText(response.link.markdown);
+        const processingFileCount = this.getQueuedFiles().length + this.getUploadingFiles().length;
+        const shouldPad = processingFileCount >= 1;
+
+        pasteText(response.link.markdown, shouldPad);
       },
       error: function(temp) {
         var checkIfMsgExists, errorAlert;
@@ -123,16 +129,19 @@ window.DropzoneInput = (function() {
       }
       return false;
     };
-    pasteText = function(text) {
+    pasteText = function(text, shouldPad) {
       var afterSelection, beforeSelection, caretEnd, caretStart, textEnd;
-      var formattedText = text + "\n\n";
-      caretStart = $(child)[0].selectionStart;
-      caretEnd = $(child)[0].selectionEnd;
+      var formattedText = text;
+      if (shouldPad) formattedText += "\n\n";
+      const textarea = child.get(0);
+      caretStart = textarea.selectionStart;
+      caretEnd = textarea.selectionEnd;
       textEnd = $(child).val().length;
       beforeSelection = $(child).val().substring(0, caretStart);
       afterSelection = $(child).val().substring(caretEnd, textEnd);
       $(child).val(beforeSelection + formattedText + afterSelection);
-      child.get(0).setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
+      textarea.setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
+      textarea.style.height = `${textarea.scrollHeight}px`;
       return form_textarea.trigger("input");
     };
     getFilename = function(e) {
@@ -176,7 +185,7 @@ window.DropzoneInput = (function() {
     };
     insertToTextArea = function(filename, url) {
       return $(child).val(function(index, val) {
-        return val.replace("{{" + filename + "}}", url + "\n");
+        return val.replace("{{" + filename + "}}", url);
       });
     };
     appendToTextArea = function(url) {
@@ -211,6 +220,7 @@ window.DropzoneInput = (function() {
     form.find(".markdown-selector").click(function(e) {
       e.preventDefault();
       $(this).closest('.gfm-form').find('.div-dropzone').click();
+      form_textarea.focus();
     });
   }
 
diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
index 1418e8d86ee..313e78e573a 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js
+++ b/app/assets/javascripts/environments/components/environment_actions.js
@@ -35,6 +35,8 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
+      $(this.$refs.tooltip).tooltip('destroy');
+
       this.service.postAction(endpoint)
       .then(() => {
         this.isLoading = false;
@@ -62,6 +64,7 @@ export default {
         class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
         data-container="body"
         data-toggle="dropdown"
+        ref="tooltip"
         :title="title"
         :aria-label="title"
         :disabled="isLoading">
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.js b/app/assets/javascripts/environments/components/environment_monitoring.js
index 064e2fc7434..8c37dd76ae7 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.js
+++ b/app/assets/javascripts/environments/components/environment_monitoring.js
@@ -21,7 +21,6 @@ export default {
       class="btn monitoring-url has-tooltip"
       data-container="body"
       :href="monitoringUrl"
-      target="_blank"
       rel="noopener noreferrer nofollow"
       :title="title"
       :aria-label="title">
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js b/app/assets/javascripts/environments/components/environment_rollback.js
index baa15d9e5b5..7cbfb651525 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.js
+++ b/app/assets/javascripts/environments/components/environment_rollback.js
@@ -36,6 +36,8 @@ export default {
     onClick() {
       this.isLoading = true;
 
+      $(this.$el).tooltip('destroy');
+
       this.service.postAction(this.retryUrl)
       .then(() => {
         this.isLoading = false;
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.js
index 47102692024..9e5465c1785 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ b/app/assets/javascripts/environments/components/environment_stop.js
@@ -36,6 +36,8 @@ export default {
       if (confirm('Are you sure you want to stop this environment?')) {
         this.isLoading = true;
 
+        $(this.$el).tooltip('destroy');
+
         this.service.postAction(this.retryUrl)
         .then(() => {
           this.isLoading = false;
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 381c40c03d8..3e7a892756c 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -2,82 +2,80 @@ import Filter from '~/droplab/plugins/filter';
 
 require('./filtered_search_dropdown');
 
-(() => {
-  class DropdownHint extends gl.FilteredSearchDropdown {
-    constructor(droplab, dropdown, input, filter) {
-      super(droplab, dropdown, input, filter);
-      this.config = {
-        Filter: {
-          template: 'hint',
-          filterFunction: gl.DropdownUtils.filterHint.bind(null, input),
-        },
-      };
-    }
-
-    itemClicked(e) {
-      const { selected } = e.detail;
+class DropdownHint extends gl.FilteredSearchDropdown {
+  constructor(droplab, dropdown, input, filter) {
+    super(droplab, dropdown, input, filter);
+    this.config = {
+      Filter: {
+        template: 'hint',
+        filterFunction: gl.DropdownUtils.filterHint.bind(null, input),
+      },
+    };
+  }
 
-      if (selected.tagName === 'LI') {
-        if (selected.hasAttribute('data-value')) {
-          this.dismissDropdown();
-        } else if (selected.getAttribute('data-action') === 'submit') {
-          this.dismissDropdown();
-          this.dispatchFormSubmitEvent();
-        } else {
-          const token = selected.querySelector('.js-filter-hint').innerText.trim();
-          const tag = selected.querySelector('.js-filter-tag').innerText.trim();
+  itemClicked(e) {
+    const { selected } = e.detail;
 
-          if (tag.length) {
-            // Get previous input values in the input field and convert them into visual tokens
-            const previousInputValues = this.input.value.split(' ');
-            const searchTerms = [];
+    if (selected.tagName === 'LI') {
+      if (selected.hasAttribute('data-value')) {
+        this.dismissDropdown();
+      } else if (selected.getAttribute('data-action') === 'submit') {
+        this.dismissDropdown();
+        this.dispatchFormSubmitEvent();
+      } else {
+        const token = selected.querySelector('.js-filter-hint').innerText.trim();
+        const tag = selected.querySelector('.js-filter-tag').innerText.trim();
 
-            previousInputValues.forEach((value, index) => {
-              searchTerms.push(value);
+        if (tag.length) {
+          // Get previous input values in the input field and convert them into visual tokens
+          const previousInputValues = this.input.value.split(' ');
+          const searchTerms = [];
 
-              if (index === previousInputValues.length - 1
-                && token.indexOf(value.toLowerCase()) !== -1) {
-                searchTerms.pop();
-              }
-            });
+          previousInputValues.forEach((value, index) => {
+            searchTerms.push(value);
 
-            if (searchTerms.length > 0) {
-              gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms.join(' '));
+            if (index === previousInputValues.length - 1
+              && token.indexOf(value.toLowerCase()) !== -1) {
+              searchTerms.pop();
             }
+          });
 
-            gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''), '', false, this.container);
+          if (searchTerms.length > 0) {
+            gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms.join(' '));
           }
-          this.dismissDropdown();
-          this.dispatchInputEvent();
+
+          gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''), '', false, this.container);
         }
+        this.dismissDropdown();
+        this.dispatchInputEvent();
       }
     }
+  }
 
-    renderContent() {
-      const dropdownData = [];
+  renderContent() {
+    const dropdownData = [];
 
-      [].forEach.call(this.input.closest('.filtered-search-box-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
-        const { icon, hint, tag, type } = dropdownMenu.dataset;
-        if (icon && hint && tag) {
-          dropdownData.push(
-            Object.assign({
-              icon: `fa-${icon}`,
-              hint,
-              tag: `&lt;${tag}&gt;`,
-            }, type && { type }),
-          );
-        }
-      });
+    [].forEach.call(this.input.closest('.filtered-search-box-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
+      const { icon, hint, tag, type } = dropdownMenu.dataset;
+      if (icon && hint && tag) {
+        dropdownData.push(
+          Object.assign({
+            icon: `fa-${icon}`,
+            hint,
+            tag: `&lt;${tag}&gt;`,
+          }, type && { type }),
+        );
+      }
+    });
 
-      this.droplab.changeHookList(this.hookId, this.dropdown, [Filter], this.config);
-      this.droplab.setData(this.hookId, dropdownData);
-    }
+    this.droplab.changeHookList(this.hookId, this.dropdown, [Filter], this.config);
+    this.droplab.setData(this.hookId, dropdownData);
+  }
 
-    init() {
-      this.droplab.addHook(this.input, this.dropdown, [Filter], this.config).init();
-    }
+  init() {
+    this.droplab.addHook(this.input, this.dropdown, [Filter], this.config).init();
   }
+}
 
-  window.gl = window.gl || {};
-  gl.DropdownHint = DropdownHint;
-})();
+window.gl = window.gl || {};
+gl.DropdownHint = DropdownHint;
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
index 6296965b911..982dc4b61be 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -5,48 +5,46 @@ import Filter from '~/droplab/plugins/filter';
 
 require('./filtered_search_dropdown');
 
-(() => {
-  class DropdownNonUser extends gl.FilteredSearchDropdown {
-    constructor(droplab, dropdown, input, filter, endpoint, symbol) {
-      super(droplab, dropdown, input, filter);
-      this.symbol = symbol;
-      this.config = {
-        Ajax: {
-          endpoint,
-          method: 'setData',
-          loadingTemplate: this.loadingTemplate,
-          onError() {
-            /* eslint-disable no-new */
-            new Flash('An error occured fetching the dropdown data.');
-            /* eslint-enable no-new */
-          },
+class DropdownNonUser extends gl.FilteredSearchDropdown {
+  constructor(droplab, dropdown, input, filter, endpoint, symbol) {
+    super(droplab, dropdown, input, filter);
+    this.symbol = symbol;
+    this.config = {
+      Ajax: {
+        endpoint,
+        method: 'setData',
+        loadingTemplate: this.loadingTemplate,
+        onError() {
+          /* eslint-disable no-new */
+          new Flash('An error occured fetching the dropdown data.');
+          /* eslint-enable no-new */
         },
-        Filter: {
-          filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol, input),
-          template: 'title',
-        },
-      };
-    }
+      },
+      Filter: {
+        filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol, input),
+        template: 'title',
+      },
+    };
+  }
 
-    itemClicked(e) {
-      super.itemClicked(e, (selected) => {
-        const title = selected.querySelector('.js-data-value').innerText.trim();
-        return `${this.symbol}${gl.DropdownUtils.getEscapedText(title)}`;
-      });
-    }
+  itemClicked(e) {
+    super.itemClicked(e, (selected) => {
+      const title = selected.querySelector('.js-data-value').innerText.trim();
+      return `${this.symbol}${gl.DropdownUtils.getEscapedText(title)}`;
+    });
+  }
 
-    renderContent(forceShowList = false) {
-      this.droplab
-        .changeHookList(this.hookId, this.dropdown, [Ajax, Filter], this.config);
-      super.renderContent(forceShowList);
-    }
+  renderContent(forceShowList = false) {
+    this.droplab
+      .changeHookList(this.hookId, this.dropdown, [Ajax, Filter], this.config);
+    super.renderContent(forceShowList);
+  }
 
-    init() {
-      this.droplab
-        .addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
-    }
+  init() {
+    this.droplab
+      .addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
   }
+}
 
-  window.gl = window.gl || {};
-  gl.DropdownNonUser = DropdownNonUser;
-})();
+window.gl = window.gl || {};
+gl.DropdownNonUser = DropdownNonUser;
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index 38b5d315bcf..74cec3d75fe 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -4,69 +4,67 @@ import AjaxFilter from '~/droplab/plugins/ajax_filter';
 
 require('./filtered_search_dropdown');
 
-(() => {
-  class DropdownUser extends gl.FilteredSearchDropdown {
-    constructor(droplab, dropdown, input, filter) {
-      super(droplab, dropdown, input, filter);
-      this.config = {
-        AjaxFilter: {
-          endpoint: `${gon.relative_url_root || ''}/autocomplete/users.json`,
-          searchKey: 'search',
-          params: {
-            per_page: 20,
-            active: true,
-            project_id: this.getProjectId(),
-            current_user: true,
-          },
-          searchValueFunction: this.getSearchInput.bind(this),
-          loadingTemplate: this.loadingTemplate,
-          onError() {
-            /* eslint-disable no-new */
-            new Flash('An error occured fetching the dropdown data.');
-            /* eslint-enable no-new */
-          },
+class DropdownUser extends gl.FilteredSearchDropdown {
+  constructor(droplab, dropdown, input, filter) {
+    super(droplab, dropdown, input, filter);
+    this.config = {
+      AjaxFilter: {
+        endpoint: `${gon.relative_url_root || ''}/autocomplete/users.json`,
+        searchKey: 'search',
+        params: {
+          per_page: 20,
+          active: true,
+          project_id: this.getProjectId(),
+          current_user: true,
         },
-      };
-    }
-
-    itemClicked(e) {
-      super.itemClicked(e,
-        selected => selected.querySelector('.dropdown-light-content').innerText.trim());
-    }
-
-    renderContent(forceShowList = false) {
-      this.droplab.changeHookList(this.hookId, this.dropdown, [AjaxFilter], this.config);
-      super.renderContent(forceShowList);
-    }
+        searchValueFunction: this.getSearchInput.bind(this),
+        loadingTemplate: this.loadingTemplate,
+        onError() {
+          /* eslint-disable no-new */
+          new Flash('An error occured fetching the dropdown data.');
+          /* eslint-enable no-new */
+        },
+      },
+    };
+  }
 
-    getProjectId() {
-      return this.input.getAttribute('data-project-id');
-    }
+  itemClicked(e) {
+    super.itemClicked(e,
+      selected => selected.querySelector('.dropdown-light-content').innerText.trim());
+  }
 
-    getSearchInput() {
-      const query = gl.DropdownUtils.getSearchInput(this.input);
-      const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
+  renderContent(forceShowList = false) {
+    this.droplab.changeHookList(this.hookId, this.dropdown, [AjaxFilter], this.config);
+    super.renderContent(forceShowList);
+  }
 
-      let value = lastToken || '';
+  getProjectId() {
+    return this.input.getAttribute('data-project-id');
+  }
 
-      if (value[0] === '@') {
-        value = value.slice(1);
-      }
+  getSearchInput() {
+    const query = gl.DropdownUtils.getSearchInput(this.input);
+    const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
 
-      // Removes the first character if it is a quotation so that we can search
-      // with multiple words
-      if (value[0] === '"' || value[0] === '\'') {
-        value = value.slice(1);
-      }
+    let value = lastToken || '';
 
-      return value;
+    if (value[0] === '@') {
+      value = value.slice(1);
     }
 
-    init() {
-      this.droplab.addHook(this.input, this.dropdown, [AjaxFilter], this.config).init();
+    // Removes the first character if it is a quotation so that we can search
+    // with multiple words
+    if (value[0] === '"' || value[0] === '\'') {
+      value = value.slice(1);
     }
+
+    return value;
+  }
+
+  init() {
+    this.droplab.addHook(this.input, this.dropdown, [AjaxFilter], this.config).init();
   }
+}
 
-  window.gl = window.gl || {};
-  gl.DropdownUser = DropdownUser;
-})();
+window.gl = window.gl || {};
+gl.DropdownUser = DropdownUser;
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index 6c5c20447f7..bc7c1dffece 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -1,183 +1,181 @@
 import FilteredSearchContainer from './container';
 
-(() => {
-  class DropdownUtils {
-    static getEscapedText(text) {
-      let escapedText = text;
-      const hasSpace = text.indexOf(' ') !== -1;
-      const hasDoubleQuote = text.indexOf('"') !== -1;
-
-      // Encapsulate value with quotes if it has spaces
-      // Known side effect: values's with both single and double quotes
-      // won't escape properly
-      if (hasSpace) {
-        if (hasDoubleQuote) {
-          escapedText = `'${text}'`;
-        } else {
-          // Encapsulate singleQuotes or if it hasSpace
-          escapedText = `"${text}"`;
-        }
+class DropdownUtils {
+  static getEscapedText(text) {
+    let escapedText = text;
+    const hasSpace = text.indexOf(' ') !== -1;
+    const hasDoubleQuote = text.indexOf('"') !== -1;
+
+    // Encapsulate value with quotes if it has spaces
+    // Known side effect: values's with both single and double quotes
+    // won't escape properly
+    if (hasSpace) {
+      if (hasDoubleQuote) {
+        escapedText = `'${text}'`;
+      } else {
+        // Encapsulate singleQuotes or if it hasSpace
+        escapedText = `"${text}"`;
       }
-
-      return escapedText;
     }
 
-    static filterWithSymbol(filterSymbol, input, item) {
-      const updatedItem = item;
-      const searchInput = gl.DropdownUtils.getSearchInput(input);
+    return escapedText;
+  }
+
+  static filterWithSymbol(filterSymbol, input, item) {
+    const updatedItem = item;
+    const searchInput = gl.DropdownUtils.getSearchInput(input);
 
-      const title = updatedItem.title.toLowerCase();
-      let value = searchInput.toLowerCase();
-      let symbol = '';
+    const title = updatedItem.title.toLowerCase();
+    let value = searchInput.toLowerCase();
+    let symbol = '';
 
-      // Remove the symbol for filter
-      if (value[0] === filterSymbol) {
-        symbol = value[0];
-        value = value.slice(1);
-      }
+    // Remove the symbol for filter
+    if (value[0] === filterSymbol) {
+      symbol = value[0];
+      value = value.slice(1);
+    }
 
-      // Removes the first character if it is a quotation so that we can search
-      // with multiple words
-      if ((value[0] === '"' || value[0] === '\'') && title.indexOf(' ') !== -1) {
-        value = value.slice(1);
-      }
+    // Removes the first character if it is a quotation so that we can search
+    // with multiple words
+    if ((value[0] === '"' || value[0] === '\'') && title.indexOf(' ') !== -1) {
+      value = value.slice(1);
+    }
+
+    // Eg. filterSymbol = ~ for labels
+    const matchWithoutSymbol = symbol === filterSymbol && title.indexOf(value) !== -1;
+    const match = title.indexOf(`${symbol}${value}`) !== -1;
 
-      // Eg. filterSymbol = ~ for labels
-      const matchWithoutSymbol = symbol === filterSymbol && title.indexOf(value) !== -1;
-      const match = title.indexOf(`${symbol}${value}`) !== -1;
+    updatedItem.droplab_hidden = !match && !matchWithoutSymbol;
 
-      updatedItem.droplab_hidden = !match && !matchWithoutSymbol;
+    return updatedItem;
+  }
 
-      return updatedItem;
+  static filterHint(input, item) {
+    const updatedItem = item;
+    const searchInput = gl.DropdownUtils.getSearchQuery(input);
+    const { lastToken, tokens } = gl.FilteredSearchTokenizer.processTokens(searchInput);
+    const lastKey = lastToken.key || lastToken || '';
+    const allowMultiple = item.type === 'array';
+    const itemInExistingTokens = tokens.some(t => t.key === item.hint);
+
+    if (!allowMultiple && itemInExistingTokens) {
+      updatedItem.droplab_hidden = true;
+    } else if (!lastKey || searchInput.split('').last() === ' ') {
+      updatedItem.droplab_hidden = false;
+    } else if (lastKey) {
+      const split = lastKey.split(':');
+      const tokenName = split[0].split(' ').last();
+
+      const match = updatedItem.hint.indexOf(tokenName.toLowerCase()) === -1;
+      updatedItem.droplab_hidden = tokenName ? match : false;
     }
 
-    static filterHint(input, item) {
-      const updatedItem = item;
-      const searchInput = gl.DropdownUtils.getSearchQuery(input);
-      const { lastToken, tokens } = gl.FilteredSearchTokenizer.processTokens(searchInput);
-      const lastKey = lastToken.key || lastToken || '';
-      const allowMultiple = item.type === 'array';
-      const itemInExistingTokens = tokens.some(t => t.key === item.hint);
-
-      if (!allowMultiple && itemInExistingTokens) {
-        updatedItem.droplab_hidden = true;
-      } else if (!lastKey || searchInput.split('').last() === ' ') {
-        updatedItem.droplab_hidden = false;
-      } else if (lastKey) {
-        const split = lastKey.split(':');
-        const tokenName = split[0].split(' ').last();
-
-        const match = updatedItem.hint.indexOf(tokenName.toLowerCase()) === -1;
-        updatedItem.droplab_hidden = tokenName ? match : false;
-      }
+    return updatedItem;
+  }
+
+  static setDataValueIfSelected(filter, selected) {
+    const dataValue = selected.getAttribute('data-value');
 
-      return updatedItem;
+    if (dataValue) {
+      gl.FilteredSearchDropdownManager.addWordToInput(filter, dataValue, true);
     }
 
-    static setDataValueIfSelected(filter, selected) {
-      const dataValue = selected.getAttribute('data-value');
+    // Return boolean based on whether it was set
+    return dataValue !== null;
+  }
 
-      if (dataValue) {
-        gl.FilteredSearchDropdownManager.addWordToInput(filter, dataValue, true);
-      }
+  // Determines the full search query (visual tokens + input)
+  static getSearchQuery(untilInput = false) {
+    const container = FilteredSearchContainer.container;
+    const tokens = [].slice.call(container.querySelectorAll('.tokens-container li'));
+    const values = [];
 
-      // Return boolean based on whether it was set
-      return dataValue !== null;
+    if (untilInput) {
+      const inputIndex = _.findIndex(tokens, t => t.classList.contains('input-token'));
+      // Add one to include input-token to the tokens array
+      tokens.splice(inputIndex + 1);
     }
 
-    // Determines the full search query (visual tokens + input)
-    static getSearchQuery(untilInput = false) {
-      const container = FilteredSearchContainer.container;
-      const tokens = [].slice.call(container.querySelectorAll('.tokens-container li'));
-      const values = [];
+    tokens.forEach((token) => {
+      if (token.classList.contains('js-visual-token')) {
+        const name = token.querySelector('.name');
+        const value = token.querySelector('.value');
+        const symbol = value && value.dataset.symbol ? value.dataset.symbol : '';
+        let valueText = '';
 
-      if (untilInput) {
-        const inputIndex = _.findIndex(tokens, t => t.classList.contains('input-token'));
-        // Add one to include input-token to the tokens array
-        tokens.splice(inputIndex + 1);
-      }
+        if (value && value.innerText) {
+          valueText = value.innerText;
+        }
 
-      tokens.forEach((token) => {
-        if (token.classList.contains('js-visual-token')) {
-          const name = token.querySelector('.name');
-          const value = token.querySelector('.value');
-          const symbol = value && value.dataset.symbol ? value.dataset.symbol : '';
-          let valueText = '';
-
-          if (value && value.innerText) {
-            valueText = value.innerText;
-          }
-
-          if (token.className.indexOf('filtered-search-token') !== -1) {
-            values.push(`${name.innerText.toLowerCase()}:${symbol}${valueText}`);
-          } else {
-            values.push(name.innerText);
-          }
-        } else if (token.classList.contains('input-token')) {
-          const { isLastVisualTokenValid } =
-            gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
-
-          const input = FilteredSearchContainer.container.querySelector('.filtered-search');
-          const inputValue = input && input.value;
-
-          if (isLastVisualTokenValid) {
-            values.push(inputValue);
-          } else {
-            const previous = values.pop();
-            values.push(`${previous}${inputValue}`);
-          }
+        if (token.className.indexOf('filtered-search-token') !== -1) {
+          values.push(`${name.innerText.toLowerCase()}:${symbol}${valueText}`);
+        } else {
+          values.push(name.innerText);
         }
-      });
+      } else if (token.classList.contains('input-token')) {
+        const { isLastVisualTokenValid } =
+          gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
-      return values
-        .map(value => value.trim())
-        .join(' ');
-    }
+        const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+        const inputValue = input && input.value;
 
-    static getSearchInput(filteredSearchInput) {
-      const inputValue = filteredSearchInput.value;
-      const { right } = gl.DropdownUtils.getInputSelectionPosition(filteredSearchInput);
+        if (isLastVisualTokenValid) {
+          values.push(inputValue);
+        } else {
+          const previous = values.pop();
+          values.push(`${previous}${inputValue}`);
+        }
+      }
+    });
 
-      return inputValue.slice(0, right);
-    }
+    return values
+      .map(value => value.trim())
+      .join(' ');
+  }
 
-    static getInputSelectionPosition(input) {
-      const selectionStart = input.selectionStart;
-      let inputValue = input.value;
-      // Replace all spaces inside quote marks with underscores
-      // (will continue to match entire string until an end quote is found if any)
-      // This helps with matching the beginning & end of a token:key
-      inputValue = inputValue.replace(/(('[^']*'{0,1})|("[^"]*"{0,1})|:\s+)/g, str => str.replace(/\s/g, '_'));
-
-      // Get the right position for the word selected
-      // Regex matches first space
-      let right = inputValue.slice(selectionStart).search(/\s/);
-
-      if (right >= 0) {
-        right += selectionStart;
-      } else if (right < 0) {
-        right = inputValue.length;
-      }
+  static getSearchInput(filteredSearchInput) {
+    const inputValue = filteredSearchInput.value;
+    const { right } = gl.DropdownUtils.getInputSelectionPosition(filteredSearchInput);
 
-      // Get the left position for the word selected
-      // Regex matches last non-whitespace character
-      let left = inputValue.slice(0, right).search(/\S+$/);
+    return inputValue.slice(0, right);
+  }
 
-      if (selectionStart === 0) {
-        left = 0;
-      } else if (selectionStart === inputValue.length && left < 0) {
-        left = inputValue.length;
-      } else if (left < 0) {
-        left = selectionStart;
-      }
+  static getInputSelectionPosition(input) {
+    const selectionStart = input.selectionStart;
+    let inputValue = input.value;
+    // Replace all spaces inside quote marks with underscores
+    // (will continue to match entire string until an end quote is found if any)
+    // This helps with matching the beginning & end of a token:key
+    inputValue = inputValue.replace(/(('[^']*'{0,1})|("[^"]*"{0,1})|:\s+)/g, str => str.replace(/\s/g, '_'));
+
+    // Get the right position for the word selected
+    // Regex matches first space
+    let right = inputValue.slice(selectionStart).search(/\s/);
+
+    if (right >= 0) {
+      right += selectionStart;
+    } else if (right < 0) {
+      right = inputValue.length;
+    }
+
+    // Get the left position for the word selected
+    // Regex matches last non-whitespace character
+    let left = inputValue.slice(0, right).search(/\S+$/);
 
-      return {
-        left,
-        right,
-      };
+    if (selectionStart === 0) {
+      left = 0;
+    } else if (selectionStart === inputValue.length && left < 0) {
+      left = inputValue.length;
+    } else if (left < 0) {
+      left = selectionStart;
     }
+
+    return {
+      left,
+      right,
+    };
   }
+}
 
-  window.gl = window.gl || {};
-  gl.DropdownUtils = DropdownUtils;
-})();
+window.gl = window.gl || {};
+gl.DropdownUtils = DropdownUtils;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
index d58eeeebf81..4209ca0d6e2 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
@@ -1,124 +1,122 @@
-(() => {
-  const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
-
-  class FilteredSearchDropdown {
-    constructor(droplab, dropdown, input, filter) {
-      this.droplab = droplab;
-      this.hookId = input && input.id;
-      this.input = input;
-      this.filter = filter;
-      this.dropdown = dropdown;
-      this.loadingTemplate = `<div class="filter-dropdown-loading">
-        <i class="fa fa-spinner fa-spin"></i>
-      </div>`;
-      this.bindEvents();
-    }
-
-    bindEvents() {
-      this.itemClickedWrapper = this.itemClicked.bind(this);
-      this.dropdown.addEventListener('click.dl', this.itemClickedWrapper);
-    }
+const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
+
+class FilteredSearchDropdown {
+  constructor(droplab, dropdown, input, filter) {
+    this.droplab = droplab;
+    this.hookId = input && input.id;
+    this.input = input;
+    this.filter = filter;
+    this.dropdown = dropdown;
+    this.loadingTemplate = `<div class="filter-dropdown-loading">
+      <i class="fa fa-spinner fa-spin"></i>
+    </div>`;
+    this.bindEvents();
+  }
 
-    unbindEvents() {
-      this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper);
-    }
+  bindEvents() {
+    this.itemClickedWrapper = this.itemClicked.bind(this);
+    this.dropdown.addEventListener('click.dl', this.itemClickedWrapper);
+  }
 
-    getCurrentHook() {
-      return this.droplab.hooks.filter(h => h.id === this.hookId)[0] || null;
-    }
+  unbindEvents() {
+    this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper);
+  }
 
-    itemClicked(e, getValueFunction) {
-      const { selected } = e.detail;
+  getCurrentHook() {
+    return this.droplab.hooks.filter(h => h.id === this.hookId)[0] || null;
+  }
 
-      if (selected.tagName === 'LI' && selected.innerHTML) {
-        const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(this.filter, selected);
+  itemClicked(e, getValueFunction) {
+    const { selected } = e.detail;
 
-        if (!dataValueSet) {
-          const value = getValueFunction(selected);
-          gl.FilteredSearchDropdownManager.addWordToInput(this.filter, value, true);
-        }
+    if (selected.tagName === 'LI' && selected.innerHTML) {
+      const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(this.filter, selected);
 
-        this.resetFilters();
-        this.dismissDropdown();
-        this.dispatchInputEvent();
+      if (!dataValueSet) {
+        const value = getValueFunction(selected);
+        gl.FilteredSearchDropdownManager.addWordToInput(this.filter, value, true);
       }
-    }
 
-    setAsDropdown() {
-      this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.dropdown.id}`);
+      this.resetFilters();
+      this.dismissDropdown();
+      this.dispatchInputEvent();
     }
+  }
 
-    setOffset(offset = 0) {
-      if (window.innerWidth > 480) {
-        this.dropdown.style.left = `${offset}px`;
-      } else {
-        this.dropdown.style.left = '0px';
-      }
+  setAsDropdown() {
+    this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.dropdown.id}`);
+  }
+
+  setOffset(offset = 0) {
+    if (window.innerWidth > 480) {
+      this.dropdown.style.left = `${offset}px`;
+    } else {
+      this.dropdown.style.left = '0px';
     }
+  }
 
-    renderContent(forceShowList = false) {
-      const currentHook = this.getCurrentHook();
-      if (forceShowList && currentHook && currentHook.list.hidden) {
-        currentHook.list.show();
-      }
+  renderContent(forceShowList = false) {
+    const currentHook = this.getCurrentHook();
+    if (forceShowList && currentHook && currentHook.list.hidden) {
+      currentHook.list.show();
     }
+  }
 
-    render(forceRenderContent = false, forceShowList = false) {
-      this.setAsDropdown();
+  render(forceRenderContent = false, forceShowList = false) {
+    this.setAsDropdown();
 
-      const currentHook = this.getCurrentHook();
-      const firstTimeInitialized = currentHook === null;
+    const currentHook = this.getCurrentHook();
+    const firstTimeInitialized = currentHook === null;
 
-      if (firstTimeInitialized || forceRenderContent) {
-        this.renderContent(forceShowList);
-      } else if (currentHook.list.list.id !== this.dropdown.id) {
-        this.renderContent(forceShowList);
-      }
+    if (firstTimeInitialized || forceRenderContent) {
+      this.renderContent(forceShowList);
+    } else if (currentHook.list.list.id !== this.dropdown.id) {
+      this.renderContent(forceShowList);
     }
+  }
 
-    dismissDropdown() {
-      // Focusing on the input will dismiss dropdown
-      // (default droplab functionality)
-      this.input.focus();
-    }
+  dismissDropdown() {
+    // Focusing on the input will dismiss dropdown
+    // (default droplab functionality)
+    this.input.focus();
+  }
 
-    dispatchInputEvent() {
-      // Propogate input change to FilteredSearchDropdownManager
-      // so that it can determine which dropdowns to open
-      this.input.dispatchEvent(new CustomEvent('input', {
-        bubbles: true,
-        cancelable: true,
-      }));
-    }
+  dispatchInputEvent() {
+    // Propogate input change to FilteredSearchDropdownManager
+    // so that it can determine which dropdowns to open
+    this.input.dispatchEvent(new CustomEvent('input', {
+      bubbles: true,
+      cancelable: true,
+    }));
+  }
 
-    dispatchFormSubmitEvent() {
-      // dispatchEvent() is necessary as form.submit() does not
-      // trigger event handlers
-      this.input.form.dispatchEvent(new Event('submit'));
-    }
+  dispatchFormSubmitEvent() {
+    // dispatchEvent() is necessary as form.submit() does not
+    // trigger event handlers
+    this.input.form.dispatchEvent(new Event('submit'));
+  }
 
-    hideDropdown() {
-      const currentHook = this.getCurrentHook();
-      if (currentHook) {
-        currentHook.list.hide();
-      }
+  hideDropdown() {
+    const currentHook = this.getCurrentHook();
+    if (currentHook) {
+      currentHook.list.hide();
     }
+  }
 
-    resetFilters() {
-      const hook = this.getCurrentHook();
-
-      if (hook) {
-        const data = hook.list.data || [];
-        const results = data.map((o) => {
-          const updated = o;
-          updated.droplab_hidden = false;
-          return updated;
-        });
-        hook.list.render(results);
-      }
+  resetFilters() {
+    const hook = this.getCurrentHook();
+
+    if (hook) {
+      const data = hook.list.data || [];
+      const results = data.map((o) => {
+        const updated = o;
+        updated.droplab_hidden = false;
+        return updated;
+      });
+      hook.list.render(results);
     }
   }
+}
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchDropdown = FilteredSearchDropdown;
-})();
+window.gl = window.gl || {};
+gl.FilteredSearchDropdown = FilteredSearchDropdown;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
index ec481b9ef97..49a6cd1ac77 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -1,191 +1,189 @@
 import DropLab from '~/droplab/drop_lab';
 import FilteredSearchContainer from './container';
 
-(() => {
-  class FilteredSearchDropdownManager {
-    constructor(baseEndpoint = '', page) {
-      this.container = FilteredSearchContainer.container;
-      this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
-      this.tokenizer = gl.FilteredSearchTokenizer;
-      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
-      this.filteredSearchInput = this.container.querySelector('.filtered-search');
-      this.page = page;
-
-      this.setupMapping();
-
-      this.cleanupWrapper = this.cleanup.bind(this);
-      document.addEventListener('beforeunload', this.cleanupWrapper);
+class FilteredSearchDropdownManager {
+  constructor(baseEndpoint = '', page) {
+    this.container = FilteredSearchContainer.container;
+    this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
+    this.tokenizer = gl.FilteredSearchTokenizer;
+    this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
+    this.filteredSearchInput = this.container.querySelector('.filtered-search');
+    this.page = page;
+
+    this.setupMapping();
+
+    this.cleanupWrapper = this.cleanup.bind(this);
+    document.addEventListener('beforeunload', this.cleanupWrapper);
+  }
+
+  cleanup() {
+    if (this.droplab) {
+      this.droplab.destroy();
+      this.droplab = null;
     }
 
-    cleanup() {
-      if (this.droplab) {
-        this.droplab.destroy();
-        this.droplab = null;
-      }
+    this.setupMapping();
 
-      this.setupMapping();
+    document.removeEventListener('beforeunload', this.cleanupWrapper);
+  }
 
-      document.removeEventListener('beforeunload', this.cleanupWrapper);
-    }
+  setupMapping() {
+    this.mapping = {
+      author: {
+        reference: null,
+        gl: 'DropdownUser',
+        element: this.container.querySelector('#js-dropdown-author'),
+      },
+      assignee: {
+        reference: null,
+        gl: 'DropdownUser',
+        element: this.container.querySelector('#js-dropdown-assignee'),
+      },
+      milestone: {
+        reference: null,
+        gl: 'DropdownNonUser',
+        extraArguments: [`${this.baseEndpoint}/milestones.json`, '%'],
+        element: this.container.querySelector('#js-dropdown-milestone'),
+      },
+      label: {
+        reference: null,
+        gl: 'DropdownNonUser',
+        extraArguments: [`${this.baseEndpoint}/labels.json`, '~'],
+        element: this.container.querySelector('#js-dropdown-label'),
+      },
+      hint: {
+        reference: null,
+        gl: 'DropdownHint',
+        element: this.container.querySelector('#js-dropdown-hint'),
+      },
+    };
+  }
 
-    setupMapping() {
-      this.mapping = {
-        author: {
-          reference: null,
-          gl: 'DropdownUser',
-          element: this.container.querySelector('#js-dropdown-author'),
-        },
-        assignee: {
-          reference: null,
-          gl: 'DropdownUser',
-          element: this.container.querySelector('#js-dropdown-assignee'),
-        },
-        milestone: {
-          reference: null,
-          gl: 'DropdownNonUser',
-          extraArguments: [`${this.baseEndpoint}/milestones.json`, '%'],
-          element: this.container.querySelector('#js-dropdown-milestone'),
-        },
-        label: {
-          reference: null,
-          gl: 'DropdownNonUser',
-          extraArguments: [`${this.baseEndpoint}/labels.json`, '~'],
-          element: this.container.querySelector('#js-dropdown-label'),
-        },
-        hint: {
-          reference: null,
-          gl: 'DropdownHint',
-          element: this.container.querySelector('#js-dropdown-hint'),
-        },
-      };
+  static addWordToInput(tokenName, tokenValue = '', clicked = false) {
+    const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+
+    gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
+    input.value = '';
+
+    if (clicked) {
+      gl.FilteredSearchVisualTokens.moveInputToTheRight();
     }
+  }
 
-    static addWordToInput(tokenName, tokenValue = '', clicked = false) {
-      const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+  updateCurrentDropdownOffset() {
+    this.updateDropdownOffset(this.currentDropdown);
+  }
 
-      gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
-      input.value = '';
+  updateDropdownOffset(key) {
+    // Always align dropdown with the input field
+    let offset = this.filteredSearchInput.getBoundingClientRect().left - this.container.querySelector('.scroll-container').getBoundingClientRect().left;
 
-      if (clicked) {
-        gl.FilteredSearchVisualTokens.moveInputToTheRight();
-      }
-    }
+    const maxInputWidth = 240;
+    const currentDropdownWidth = this.mapping[key].element.clientWidth || maxInputWidth;
 
-    updateCurrentDropdownOffset() {
-      this.updateDropdownOffset(this.currentDropdown);
+    // Make sure offset never exceeds the input container
+    const offsetMaxWidth = this.container.querySelector('.scroll-container').clientWidth - currentDropdownWidth;
+    if (offsetMaxWidth < offset) {
+      offset = offsetMaxWidth;
     }
 
-    updateDropdownOffset(key) {
-      // Always align dropdown with the input field
-      let offset = this.filteredSearchInput.getBoundingClientRect().left - this.container.querySelector('.scroll-container').getBoundingClientRect().left;
+    this.mapping[key].reference.setOffset(offset);
+  }
 
-      const maxInputWidth = 240;
-      const currentDropdownWidth = this.mapping[key].element.clientWidth || maxInputWidth;
+  load(key, firstLoad = false) {
+    const mappingKey = this.mapping[key];
+    const glClass = mappingKey.gl;
+    const element = mappingKey.element;
+    let forceShowList = false;
 
-      // Make sure offset never exceeds the input container
-      const offsetMaxWidth = this.container.querySelector('.scroll-container').clientWidth - currentDropdownWidth;
-      if (offsetMaxWidth < offset) {
-        offset = offsetMaxWidth;
-      }
+    if (!mappingKey.reference) {
+      const dl = this.droplab;
+      const defaultArguments = [null, dl, element, this.filteredSearchInput, key];
+      const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
 
-      this.mapping[key].reference.setOffset(offset);
+      // Passing glArguments to `new gl[glClass](<arguments>)`
+      mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
     }
 
-    load(key, firstLoad = false) {
-      const mappingKey = this.mapping[key];
-      const glClass = mappingKey.gl;
-      const element = mappingKey.element;
-      let forceShowList = false;
-
-      if (!mappingKey.reference) {
-        const dl = this.droplab;
-        const defaultArguments = [null, dl, element, this.filteredSearchInput, key];
-        const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
+    if (firstLoad) {
+      mappingKey.reference.init();
+    }
 
-        // Passing glArguments to `new gl[glClass](<arguments>)`
-        mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
-      }
+    if (this.currentDropdown === 'hint') {
+      // Force the dropdown to show if it was clicked from the hint dropdown
+      forceShowList = true;
+    }
 
-      if (firstLoad) {
-        mappingKey.reference.init();
-      }
+    this.updateDropdownOffset(key);
+    mappingKey.reference.render(firstLoad, forceShowList);
 
-      if (this.currentDropdown === 'hint') {
-        // Force the dropdown to show if it was clicked from the hint dropdown
-        forceShowList = true;
-      }
+    this.currentDropdown = key;
+  }
 
-      this.updateDropdownOffset(key);
-      mappingKey.reference.render(firstLoad, forceShowList);
+  loadDropdown(dropdownName = '') {
+    let firstLoad = false;
 
-      this.currentDropdown = key;
+    if (!this.droplab) {
+      firstLoad = true;
+      this.droplab = new DropLab();
     }
 
-    loadDropdown(dropdownName = '') {
-      let firstLoad = false;
+    const match = this.filteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
+    const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key
+      && this.mapping[match.key];
+    const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
 
-      if (!this.droplab) {
-        firstLoad = true;
-        this.droplab = new DropLab();
-      }
+    if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
+      const key = match && match.key ? match.key : 'hint';
+      this.load(key, firstLoad);
+    }
+  }
 
-      const match = this.filteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
-      const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key
-        && this.mapping[match.key];
-      const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
+  setDropdown() {
+    const query = gl.DropdownUtils.getSearchQuery(true);
+    const { lastToken, searchToken } = this.tokenizer.processTokens(query);
 
-      if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
-        const key = match && match.key ? match.key : 'hint';
-        this.load(key, firstLoad);
-      }
+    if (this.currentDropdown) {
+      this.updateCurrentDropdownOffset();
     }
 
-    setDropdown() {
-      const query = gl.DropdownUtils.getSearchQuery(true);
-      const { lastToken, searchToken } = this.tokenizer.processTokens(query);
-
-      if (this.currentDropdown) {
-        this.updateCurrentDropdownOffset();
-      }
-
-      if (lastToken === searchToken && lastToken !== null) {
-        // Token is not fully initialized yet because it has no value
-        // Eg. token = 'label:'
-
-        const split = lastToken.split(':');
-        const dropdownName = split[0].split(' ').last();
-        this.loadDropdown(split.length > 1 ? dropdownName : '');
-      } else if (lastToken) {
-        // Token has been initialized into an object because it has a value
-        this.loadDropdown(lastToken.key);
-      } else {
-        this.loadDropdown('hint');
-      }
+    if (lastToken === searchToken && lastToken !== null) {
+      // Token is not fully initialized yet because it has no value
+      // Eg. token = 'label:'
+
+      const split = lastToken.split(':');
+      const dropdownName = split[0].split(' ').last();
+      this.loadDropdown(split.length > 1 ? dropdownName : '');
+    } else if (lastToken) {
+      // Token has been initialized into an object because it has a value
+      this.loadDropdown(lastToken.key);
+    } else {
+      this.loadDropdown('hint');
     }
+  }
 
-    resetDropdowns() {
-      if (!this.currentDropdown) {
-        return;
-      }
+  resetDropdowns() {
+    if (!this.currentDropdown) {
+      return;
+    }
 
-      // Force current dropdown to hide
-      this.mapping[this.currentDropdown].reference.hideDropdown();
+    // Force current dropdown to hide
+    this.mapping[this.currentDropdown].reference.hideDropdown();
 
-      // Re-Load dropdown
-      this.setDropdown();
+    // Re-Load dropdown
+    this.setDropdown();
 
-      // Reset filters for current dropdown
-      this.mapping[this.currentDropdown].reference.resetFilters();
+    // Reset filters for current dropdown
+    this.mapping[this.currentDropdown].reference.resetFilters();
 
-      // Reposition dropdown so that it is aligned with cursor
-      this.updateDropdownOffset(this.currentDropdown);
-    }
+    // Reposition dropdown so that it is aligned with cursor
+    this.updateDropdownOffset(this.currentDropdown);
+  }
 
-    destroyDroplab() {
-      this.droplab.destroy();
-    }
+  destroyDroplab() {
+    this.droplab.destroy();
   }
+}
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;
-})();
+window.gl = window.gl || {};
+gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index b93a8f1d322..a5eb33dd9de 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -6,489 +6,487 @@ import RecentSearchesStore from './stores/recent_searches_store';
 import RecentSearchesService from './services/recent_searches_service';
 import eventHub from './event_hub';
 
-(() => {
-  class FilteredSearchManager {
-    constructor(page) {
-      this.container = FilteredSearchContainer.container;
-      this.filteredSearchInput = this.container.querySelector('.filtered-search');
-      this.filteredSearchInputForm = this.filteredSearchInput.form;
-      this.clearSearchButton = this.container.querySelector('.clear-search');
-      this.tokensContainer = this.container.querySelector('.tokens-container');
-      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
-
-      this.recentSearchesStore = new RecentSearchesStore();
-      let recentSearchesKey = 'issue-recent-searches';
-      if (page === 'merge_requests') {
-        recentSearchesKey = 'merge-request-recent-searches';
-      }
-      this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
-
-      // Fetch recent searches from localStorage
-      this.fetchingRecentSearchesPromise = this.recentSearchesService.fetch()
-        .catch(() => {
-          // eslint-disable-next-line no-new
-          new Flash('An error occured while parsing recent searches');
-          // Gracefully fail to empty array
-          return [];
-        })
-        .then((searches) => {
-          // 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(
-            this.recentSearchesStore.state.recentSearches.concat(searches),
-          );
-          this.recentSearchesService.save(resultantSearches);
-        });
-
-      if (this.filteredSearchInput) {
-        this.tokenizer = gl.FilteredSearchTokenizer;
-        this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
-
-        this.recentSearchesRoot = new RecentSearchesRoot(
-          this.recentSearchesStore,
-          this.recentSearchesService,
-          document.querySelector('.js-filtered-search-history-dropdown'),
+class FilteredSearchManager {
+  constructor(page) {
+    this.container = FilteredSearchContainer.container;
+    this.filteredSearchInput = this.container.querySelector('.filtered-search');
+    this.filteredSearchInputForm = this.filteredSearchInput.form;
+    this.clearSearchButton = this.container.querySelector('.clear-search');
+    this.tokensContainer = this.container.querySelector('.tokens-container');
+    this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
+
+    this.recentSearchesStore = new RecentSearchesStore();
+    let recentSearchesKey = 'issue-recent-searches';
+    if (page === 'merge_requests') {
+      recentSearchesKey = 'merge-request-recent-searches';
+    }
+    this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
+
+    // Fetch recent searches from localStorage
+    this.fetchingRecentSearchesPromise = this.recentSearchesService.fetch()
+      .catch(() => {
+        // eslint-disable-next-line no-new
+        new Flash('An error occured while parsing recent searches');
+        // Gracefully fail to empty array
+        return [];
+      })
+      .then((searches) => {
+        // 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(
+          this.recentSearchesStore.state.recentSearches.concat(searches),
         );
-        this.recentSearchesRoot.init();
+        this.recentSearchesService.save(resultantSearches);
+      });
 
-        this.bindEvents();
-        this.loadSearchParamsFromURL();
-        this.dropdownManager.setDropdown();
+    if (this.filteredSearchInput) {
+      this.tokenizer = gl.FilteredSearchTokenizer;
+      this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
 
-        this.cleanupWrapper = this.cleanup.bind(this);
-        document.addEventListener('beforeunload', this.cleanupWrapper);
-      }
-    }
+      this.recentSearchesRoot = new RecentSearchesRoot(
+        this.recentSearchesStore,
+        this.recentSearchesService,
+        document.querySelector('.js-filtered-search-history-dropdown'),
+      );
+      this.recentSearchesRoot.init();
 
-    cleanup() {
-      this.unbindEvents();
-      document.removeEventListener('beforeunload', this.cleanupWrapper);
+      this.bindEvents();
+      this.loadSearchParamsFromURL();
+      this.dropdownManager.setDropdown();
 
-      if (this.recentSearchesRoot) {
-        this.recentSearchesRoot.destroy();
-      }
+      this.cleanupWrapper = this.cleanup.bind(this);
+      document.addEventListener('beforeunload', this.cleanupWrapper);
     }
+  }
 
-    bindEvents() {
-      this.handleFormSubmit = this.handleFormSubmit.bind(this);
-      this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
-      this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this);
-      this.handleInputPlaceholderWrapper = this.handleInputPlaceholder.bind(this);
-      this.handleInputVisualTokenWrapper = this.handleInputVisualToken.bind(this);
-      this.checkForEnterWrapper = this.checkForEnter.bind(this);
-      this.onClearSearchWrapper = this.onClearSearch.bind(this);
-      this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
-      this.removeSelectedTokenWrapper = this.removeSelectedToken.bind(this);
-      this.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
-      this.editTokenWrapper = this.editToken.bind(this);
-      this.tokenChange = this.tokenChange.bind(this);
-      this.addInputContainerFocusWrapper = this.addInputContainerFocus.bind(this);
-      this.removeInputContainerFocusWrapper = this.removeInputContainerFocus.bind(this);
-      this.onrecentSearchesItemSelectedWrapper = this.onrecentSearchesItemSelected.bind(this);
-
-      this.filteredSearchInputForm.addEventListener('submit', this.handleFormSubmit);
-      this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
-      this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
-      this.filteredSearchInput.addEventListener('input', this.handleInputPlaceholderWrapper);
-      this.filteredSearchInput.addEventListener('input', this.handleInputVisualTokenWrapper);
-      this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
-      this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
-      this.filteredSearchInput.addEventListener('click', this.tokenChange);
-      this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
-      this.filteredSearchInput.addEventListener('focus', this.addInputContainerFocusWrapper);
-      this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
-      this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
-      this.clearSearchButton.addEventListener('click', this.onClearSearchWrapper);
-      document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
-      document.addEventListener('click', this.unselectEditTokensWrapper);
-      document.addEventListener('click', this.removeInputContainerFocusWrapper);
-      document.addEventListener('keydown', this.removeSelectedTokenWrapper);
-      eventHub.$on('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
-    }
+  cleanup() {
+    this.unbindEvents();
+    document.removeEventListener('beforeunload', this.cleanupWrapper);
 
-    unbindEvents() {
-      this.filteredSearchInputForm.removeEventListener('submit', this.handleFormSubmit);
-      this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
-      this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
-      this.filteredSearchInput.removeEventListener('input', this.handleInputPlaceholderWrapper);
-      this.filteredSearchInput.removeEventListener('input', this.handleInputVisualTokenWrapper);
-      this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
-      this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
-      this.filteredSearchInput.removeEventListener('click', this.tokenChange);
-      this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
-      this.filteredSearchInput.removeEventListener('focus', this.addInputContainerFocusWrapper);
-      this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
-      this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
-      this.clearSearchButton.removeEventListener('click', this.onClearSearchWrapper);
-      document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
-      document.removeEventListener('click', this.unselectEditTokensWrapper);
-      document.removeEventListener('click', this.removeInputContainerFocusWrapper);
-      document.removeEventListener('keydown', this.removeSelectedTokenWrapper);
-      eventHub.$off('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
+    if (this.recentSearchesRoot) {
+      this.recentSearchesRoot.destroy();
     }
+  }
 
-    checkForBackspace(e) {
-      // 8 = Backspace Key
-      // 46 = Delete Key
-      if (e.keyCode === 8 || e.keyCode === 46) {
-        const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+  bindEvents() {
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+    this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
+    this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this);
+    this.handleInputPlaceholderWrapper = this.handleInputPlaceholder.bind(this);
+    this.handleInputVisualTokenWrapper = this.handleInputVisualToken.bind(this);
+    this.checkForEnterWrapper = this.checkForEnter.bind(this);
+    this.onClearSearchWrapper = this.onClearSearch.bind(this);
+    this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
+    this.removeSelectedTokenWrapper = this.removeSelectedToken.bind(this);
+    this.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
+    this.editTokenWrapper = this.editToken.bind(this);
+    this.tokenChange = this.tokenChange.bind(this);
+    this.addInputContainerFocusWrapper = this.addInputContainerFocus.bind(this);
+    this.removeInputContainerFocusWrapper = this.removeInputContainerFocus.bind(this);
+    this.onrecentSearchesItemSelectedWrapper = this.onrecentSearchesItemSelected.bind(this);
+
+    this.filteredSearchInputForm.addEventListener('submit', this.handleFormSubmit);
+    this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
+    this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
+    this.filteredSearchInput.addEventListener('input', this.handleInputPlaceholderWrapper);
+    this.filteredSearchInput.addEventListener('input', this.handleInputVisualTokenWrapper);
+    this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
+    this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
+    this.filteredSearchInput.addEventListener('click', this.tokenChange);
+    this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
+    this.filteredSearchInput.addEventListener('focus', this.addInputContainerFocusWrapper);
+    this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
+    this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
+    this.clearSearchButton.addEventListener('click', this.onClearSearchWrapper);
+    document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
+    document.addEventListener('click', this.unselectEditTokensWrapper);
+    document.addEventListener('click', this.removeInputContainerFocusWrapper);
+    document.addEventListener('keydown', this.removeSelectedTokenWrapper);
+    eventHub.$on('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
+  }
 
-        if (this.filteredSearchInput.value === '' && lastVisualToken) {
-          this.filteredSearchInput.value = gl.FilteredSearchVisualTokens.getLastTokenPartial();
-          gl.FilteredSearchVisualTokens.removeLastTokenPartial();
-        }
+  unbindEvents() {
+    this.filteredSearchInputForm.removeEventListener('submit', this.handleFormSubmit);
+    this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
+    this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
+    this.filteredSearchInput.removeEventListener('input', this.handleInputPlaceholderWrapper);
+    this.filteredSearchInput.removeEventListener('input', this.handleInputVisualTokenWrapper);
+    this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
+    this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
+    this.filteredSearchInput.removeEventListener('click', this.tokenChange);
+    this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
+    this.filteredSearchInput.removeEventListener('focus', this.addInputContainerFocusWrapper);
+    this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
+    this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
+    this.clearSearchButton.removeEventListener('click', this.onClearSearchWrapper);
+    document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
+    document.removeEventListener('click', this.unselectEditTokensWrapper);
+    document.removeEventListener('click', this.removeInputContainerFocusWrapper);
+    document.removeEventListener('keydown', this.removeSelectedTokenWrapper);
+    eventHub.$off('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
+  }
+
+  checkForBackspace(e) {
+    // 8 = Backspace Key
+    // 46 = Delete Key
+    if (e.keyCode === 8 || e.keyCode === 46) {
+      const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
-        // Reposition dropdown so that it is aligned with cursor
-        this.dropdownManager.updateCurrentDropdownOffset();
+      if (this.filteredSearchInput.value === '' && lastVisualToken) {
+        this.filteredSearchInput.value = gl.FilteredSearchVisualTokens.getLastTokenPartial();
+        gl.FilteredSearchVisualTokens.removeLastTokenPartial();
       }
-    }
 
-    checkForEnter(e) {
-      if (e.keyCode === 38 || e.keyCode === 40) {
-        const selectionStart = this.filteredSearchInput.selectionStart;
+      // Reposition dropdown so that it is aligned with cursor
+      this.dropdownManager.updateCurrentDropdownOffset();
+    }
+  }
 
-        e.preventDefault();
-        this.filteredSearchInput.setSelectionRange(selectionStart, selectionStart);
-      }
+  checkForEnter(e) {
+    if (e.keyCode === 38 || e.keyCode === 40) {
+      const selectionStart = this.filteredSearchInput.selectionStart;
 
-      if (e.keyCode === 13) {
-        const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
-        const dropdownEl = dropdown.element;
-        const activeElements = dropdownEl.querySelectorAll('.droplab-item-active');
+      e.preventDefault();
+      this.filteredSearchInput.setSelectionRange(selectionStart, selectionStart);
+    }
 
-        e.preventDefault();
+    if (e.keyCode === 13) {
+      const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
+      const dropdownEl = dropdown.element;
+      const activeElements = dropdownEl.querySelectorAll('.droplab-item-active');
 
-        if (!activeElements.length) {
-          if (this.isHandledAsync) {
-            e.stopImmediatePropagation();
+      e.preventDefault();
 
-            this.filteredSearchInput.blur();
-            this.dropdownManager.resetDropdowns();
-          } else {
-            // Prevent droplab from opening dropdown
-            this.dropdownManager.destroyDroplab();
-          }
+      if (!activeElements.length) {
+        if (this.isHandledAsync) {
+          e.stopImmediatePropagation();
 
-          this.search();
+          this.filteredSearchInput.blur();
+          this.dropdownManager.resetDropdowns();
+        } else {
+          // Prevent droplab from opening dropdown
+          this.dropdownManager.destroyDroplab();
         }
+
+        this.search();
       }
     }
+  }
 
-    addInputContainerFocus() {
-      const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
+  addInputContainerFocus() {
+    const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
 
-      if (inputContainer) {
-        inputContainer.classList.add('focus');
-      }
+    if (inputContainer) {
+      inputContainer.classList.add('focus');
     }
+  }
 
-    removeInputContainerFocus(e) {
-      const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
-      const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
-      const isElementInDynamicFilterDropdown = e.target.closest('.filter-dropdown') !== null;
-      const isElementInStaticFilterDropdown = e.target.closest('ul[data-dropdown]') !== null;
+  removeInputContainerFocus(e) {
+    const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
+    const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
+    const isElementInDynamicFilterDropdown = e.target.closest('.filter-dropdown') !== null;
+    const isElementInStaticFilterDropdown = e.target.closest('ul[data-dropdown]') !== null;
 
-      if (!isElementInFilteredSearch && !isElementInDynamicFilterDropdown &&
-        !isElementInStaticFilterDropdown && inputContainer) {
-        inputContainer.classList.remove('focus');
-      }
+    if (!isElementInFilteredSearch && !isElementInDynamicFilterDropdown &&
+      !isElementInStaticFilterDropdown && inputContainer) {
+      inputContainer.classList.remove('focus');
     }
+  }
 
-    static selectToken(e) {
-      const button = e.target.closest('.selectable');
+  static selectToken(e) {
+    const button = e.target.closest('.selectable');
 
-      if (button) {
-        e.preventDefault();
-        e.stopPropagation();
-        gl.FilteredSearchVisualTokens.selectToken(button);
-      }
+    if (button) {
+      e.preventDefault();
+      e.stopPropagation();
+      gl.FilteredSearchVisualTokens.selectToken(button);
     }
+  }
 
-    unselectEditTokens(e) {
-      const inputContainer = this.container.querySelector('.filtered-search-box');
-      const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
-      const isElementInFilterDropdown = e.target.closest('.filter-dropdown') !== null;
-      const isElementTokensContainer = e.target.classList.contains('tokens-container');
+  unselectEditTokens(e) {
+    const inputContainer = this.container.querySelector('.filtered-search-box');
+    const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
+    const isElementInFilterDropdown = e.target.closest('.filter-dropdown') !== null;
+    const isElementTokensContainer = e.target.classList.contains('tokens-container');
 
-      if ((!isElementInFilteredSearch && !isElementInFilterDropdown) || isElementTokensContainer) {
-        gl.FilteredSearchVisualTokens.moveInputToTheRight();
-        this.dropdownManager.resetDropdowns();
-      }
+    if ((!isElementInFilteredSearch && !isElementInFilterDropdown) || isElementTokensContainer) {
+      gl.FilteredSearchVisualTokens.moveInputToTheRight();
+      this.dropdownManager.resetDropdowns();
     }
+  }
 
-    editToken(e) {
-      const token = e.target.closest('.js-visual-token');
+  editToken(e) {
+    const token = e.target.closest('.js-visual-token');
 
-      if (token) {
-        gl.FilteredSearchVisualTokens.editToken(token);
-        this.tokenChange();
-      }
+    if (token) {
+      gl.FilteredSearchVisualTokens.editToken(token);
+      this.tokenChange();
     }
+  }
 
-    toggleClearSearchButton() {
-      const query = gl.DropdownUtils.getSearchQuery();
-      const hidden = 'hidden';
-      const hasHidden = this.clearSearchButton.classList.contains(hidden);
+  toggleClearSearchButton() {
+    const query = gl.DropdownUtils.getSearchQuery();
+    const hidden = 'hidden';
+    const hasHidden = this.clearSearchButton.classList.contains(hidden);
 
-      if (query.length === 0 && !hasHidden) {
-        this.clearSearchButton.classList.add(hidden);
-      } else if (query.length && hasHidden) {
-        this.clearSearchButton.classList.remove(hidden);
-      }
+    if (query.length === 0 && !hasHidden) {
+      this.clearSearchButton.classList.add(hidden);
+    } else if (query.length && hasHidden) {
+      this.clearSearchButton.classList.remove(hidden);
     }
+  }
 
-    handleInputPlaceholder() {
-      const query = gl.DropdownUtils.getSearchQuery();
-      const placeholder = 'Search or filter results...';
-      const currentPlaceholder = this.filteredSearchInput.placeholder;
+  handleInputPlaceholder() {
+    const query = gl.DropdownUtils.getSearchQuery();
+    const placeholder = 'Search or filter results...';
+    const currentPlaceholder = this.filteredSearchInput.placeholder;
 
-      if (query.length === 0 && currentPlaceholder !== placeholder) {
-        this.filteredSearchInput.placeholder = placeholder;
-      } else if (query.length > 0 && currentPlaceholder !== '') {
-        this.filteredSearchInput.placeholder = '';
-      }
+    if (query.length === 0 && currentPlaceholder !== placeholder) {
+      this.filteredSearchInput.placeholder = placeholder;
+    } else if (query.length > 0 && currentPlaceholder !== '') {
+      this.filteredSearchInput.placeholder = '';
     }
+  }
 
-    removeSelectedToken(e) {
-      // 8 = Backspace Key
-      // 46 = Delete Key
-      if (e.keyCode === 8 || e.keyCode === 46) {
-        gl.FilteredSearchVisualTokens.removeSelectedToken();
-        this.handleInputPlaceholder();
-        this.toggleClearSearchButton();
-      }
+  removeSelectedToken(e) {
+    // 8 = Backspace Key
+    // 46 = Delete Key
+    if (e.keyCode === 8 || e.keyCode === 46) {
+      gl.FilteredSearchVisualTokens.removeSelectedToken();
+      this.handleInputPlaceholder();
+      this.toggleClearSearchButton();
     }
+  }
 
-    onClearSearch(e) {
-      e.preventDefault();
-      this.clearSearch();
-    }
+  onClearSearch(e) {
+    e.preventDefault();
+    this.clearSearch();
+  }
 
-    clearSearch() {
-      this.filteredSearchInput.value = '';
+  clearSearch() {
+    this.filteredSearchInput.value = '';
 
-      const removeElements = [];
+    const removeElements = [];
 
-      [].forEach.call(this.tokensContainer.children, (t) => {
-        if (t.classList.contains('js-visual-token')) {
-          removeElements.push(t);
-        }
-      });
+    [].forEach.call(this.tokensContainer.children, (t) => {
+      if (t.classList.contains('js-visual-token')) {
+        removeElements.push(t);
+      }
+    });
 
-      removeElements.forEach((el) => {
-        el.parentElement.removeChild(el);
-      });
+    removeElements.forEach((el) => {
+      el.parentElement.removeChild(el);
+    });
 
-      this.clearSearchButton.classList.add('hidden');
-      this.handleInputPlaceholder();
+    this.clearSearchButton.classList.add('hidden');
+    this.handleInputPlaceholder();
 
-      this.dropdownManager.resetDropdowns();
+    this.dropdownManager.resetDropdowns();
 
-      if (this.isHandledAsync) {
-        this.search();
-      }
+    if (this.isHandledAsync) {
+      this.search();
     }
+  }
 
-    handleInputVisualToken() {
-      const input = this.filteredSearchInput;
-      const { tokens, searchToken }
-        = gl.FilteredSearchTokenizer.processTokens(input.value);
-      const { isLastVisualTokenValid }
-        = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
-
-      if (isLastVisualTokenValid) {
-        tokens.forEach((t) => {
-          input.value = input.value.replace(`${t.key}:${t.symbol}${t.value}`, '');
-          gl.FilteredSearchVisualTokens.addFilterVisualToken(t.key, `${t.symbol}${t.value}`);
-        });
-
-        const fragments = searchToken.split(':');
-        if (fragments.length > 1) {
-          const inputValues = fragments[0].split(' ');
-          const tokenKey = inputValues.last();
-
-          if (inputValues.length > 1) {
-            inputValues.pop();
-            const searchTerms = inputValues.join(' ');
-
-            input.value = input.value.replace(searchTerms, '');
-            gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms);
-          }
+  handleInputVisualToken() {
+    const input = this.filteredSearchInput;
+    const { tokens, searchToken }
+      = gl.FilteredSearchTokenizer.processTokens(input.value);
+    const { isLastVisualTokenValid }
+      = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+    if (isLastVisualTokenValid) {
+      tokens.forEach((t) => {
+        input.value = input.value.replace(`${t.key}:${t.symbol}${t.value}`, '');
+        gl.FilteredSearchVisualTokens.addFilterVisualToken(t.key, `${t.symbol}${t.value}`);
+      });
 
-          gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenKey);
-          input.value = input.value.replace(`${tokenKey}:`, '');
-        }
-      } else {
-        // Keep listening to token until we determine that the user is done typing the token value
-        const valueCompletedRegex = /([~%@]{0,1}".+")|([~%@]{0,1}'.+')|^((?![~%@]')(?![~%@]")(?!')(?!")).*/g;
+      const fragments = searchToken.split(':');
+      if (fragments.length > 1) {
+        const inputValues = fragments[0].split(' ');
+        const tokenKey = inputValues.last();
 
-        if (searchToken.match(valueCompletedRegex) && input.value[input.value.length - 1] === ' ') {
-          gl.FilteredSearchVisualTokens.addFilterVisualToken(searchToken);
+        if (inputValues.length > 1) {
+          inputValues.pop();
+          const searchTerms = inputValues.join(' ');
 
-          // Trim the last space as seen in the if statement above
-          input.value = input.value.replace(searchToken, '').trim();
+          input.value = input.value.replace(searchTerms, '');
+          gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms);
         }
+
+        gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenKey);
+        input.value = input.value.replace(`${tokenKey}:`, '');
       }
-    }
+    } else {
+      // Keep listening to token until we determine that the user is done typing the token value
+      const valueCompletedRegex = /([~%@]{0,1}".+")|([~%@]{0,1}'.+')|^((?![~%@]')(?![~%@]")(?!')(?!")).*/g;
 
-    handleFormSubmit(e) {
-      e.preventDefault();
-      this.search();
-    }
+      if (searchToken.match(valueCompletedRegex) && input.value[input.value.length - 1] === ' ') {
+        gl.FilteredSearchVisualTokens.addFilterVisualToken(searchToken);
 
-    saveCurrentSearchQuery() {
-      // Don't save before we have fetched the already saved searches
-      this.fetchingRecentSearchesPromise.then(() => {
-        const searchQuery = gl.DropdownUtils.getSearchQuery();
-        if (searchQuery.length > 0) {
-          const resultantSearches = this.recentSearchesStore.addRecentSearch(searchQuery);
-          this.recentSearchesService.save(resultantSearches);
-        }
-      });
+        // Trim the last space as seen in the if statement above
+        input.value = input.value.replace(searchToken, '').trim();
+      }
     }
+  }
 
-    loadSearchParamsFromURL() {
-      const params = gl.utils.getUrlParamsArray();
-      const usernameParams = this.getUsernameParams();
-      let hasFilteredSearch = false;
+  handleFormSubmit(e) {
+    e.preventDefault();
+    this.search();
+  }
 
-      params.forEach((p) => {
-        const split = p.split('=');
-        const keyParam = decodeURIComponent(split[0]);
-        const value = split[1];
+  saveCurrentSearchQuery() {
+    // Don't save before we have fetched the already saved searches
+    this.fetchingRecentSearchesPromise.then(() => {
+      const searchQuery = gl.DropdownUtils.getSearchQuery();
+      if (searchQuery.length > 0) {
+        const resultantSearches = this.recentSearchesStore.addRecentSearch(searchQuery);
+        this.recentSearchesService.save(resultantSearches);
+      }
+    });
+  }
 
-        // Check if it matches edge conditions listed in this.filteredSearchTokenKeys
-        const condition = this.filteredSearchTokenKeys.searchByConditionUrl(p);
+  loadSearchParamsFromURL() {
+    const params = gl.utils.getUrlParamsArray();
+    const usernameParams = this.getUsernameParams();
+    let hasFilteredSearch = false;
 
-        if (condition) {
-          hasFilteredSearch = true;
-          gl.FilteredSearchVisualTokens.addFilterVisualToken(condition.tokenKey, condition.value);
-        } else {
-          // Sanitize value since URL converts spaces into +
-          // Replace before decode so that we know what was originally + versus the encoded +
-          const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value;
-          const match = this.filteredSearchTokenKeys.searchByKeyParam(keyParam);
-
-          if (match) {
-            const indexOf = keyParam.indexOf('_');
-            const sanitizedKey = indexOf !== -1 ? keyParam.slice(0, keyParam.indexOf('_')) : keyParam;
-            const symbol = match.symbol;
-            let quotationsToUse = '';
-
-            if (sanitizedValue.indexOf(' ') !== -1) {
-              // Prefer ", but use ' if required
-              quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\'';
-            }
+    params.forEach((p) => {
+      const split = p.split('=');
+      const keyParam = decodeURIComponent(split[0]);
+      const value = split[1];
+
+      // Check if it matches edge conditions listed in this.filteredSearchTokenKeys
+      const condition = this.filteredSearchTokenKeys.searchByConditionUrl(p);
 
+      if (condition) {
+        hasFilteredSearch = true;
+        gl.FilteredSearchVisualTokens.addFilterVisualToken(condition.tokenKey, condition.value);
+      } else {
+        // Sanitize value since URL converts spaces into +
+        // Replace before decode so that we know what was originally + versus the encoded +
+        const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value;
+        const match = this.filteredSearchTokenKeys.searchByKeyParam(keyParam);
+
+        if (match) {
+          const indexOf = keyParam.indexOf('_');
+          const sanitizedKey = indexOf !== -1 ? keyParam.slice(0, keyParam.indexOf('_')) : keyParam;
+          const symbol = match.symbol;
+          let quotationsToUse = '';
+
+          if (sanitizedValue.indexOf(' ') !== -1) {
+            // Prefer ", but use ' if required
+            quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\'';
+          }
+
+          hasFilteredSearch = true;
+          gl.FilteredSearchVisualTokens.addFilterVisualToken(sanitizedKey, `${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
+        } else if (!match && keyParam === 'assignee_id') {
+          const id = parseInt(value, 10);
+          if (usernameParams[id]) {
             hasFilteredSearch = true;
-            gl.FilteredSearchVisualTokens.addFilterVisualToken(sanitizedKey, `${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
-          } else if (!match && keyParam === 'assignee_id') {
-            const id = parseInt(value, 10);
-            if (usernameParams[id]) {
-              hasFilteredSearch = true;
-              gl.FilteredSearchVisualTokens.addFilterVisualToken('assignee', `@${usernameParams[id]}`);
-            }
-          } else if (!match && keyParam === 'author_id') {
-            const id = parseInt(value, 10);
-            if (usernameParams[id]) {
-              hasFilteredSearch = true;
-              gl.FilteredSearchVisualTokens.addFilterVisualToken('author', `@${usernameParams[id]}`);
-            }
-          } else if (!match && keyParam === 'search') {
+            gl.FilteredSearchVisualTokens.addFilterVisualToken('assignee', `@${usernameParams[id]}`);
+          }
+        } else if (!match && keyParam === 'author_id') {
+          const id = parseInt(value, 10);
+          if (usernameParams[id]) {
             hasFilteredSearch = true;
-            this.filteredSearchInput.value = sanitizedValue;
+            gl.FilteredSearchVisualTokens.addFilterVisualToken('author', `@${usernameParams[id]}`);
           }
+        } else if (!match && keyParam === 'search') {
+          hasFilteredSearch = true;
+          this.filteredSearchInput.value = sanitizedValue;
         }
-      });
+      }
+    });
 
-      this.saveCurrentSearchQuery();
+    this.saveCurrentSearchQuery();
 
-      if (hasFilteredSearch) {
-        this.clearSearchButton.classList.remove('hidden');
-        this.handleInputPlaceholder();
-      }
+    if (hasFilteredSearch) {
+      this.clearSearchButton.classList.remove('hidden');
+      this.handleInputPlaceholder();
     }
+  }
 
-    search() {
-      const paths = [];
-      const searchQuery = gl.DropdownUtils.getSearchQuery();
-
-      this.saveCurrentSearchQuery();
+  search() {
+    const paths = [];
+    const searchQuery = gl.DropdownUtils.getSearchQuery();
 
-      const { tokens, searchToken }
-        = this.tokenizer.processTokens(searchQuery);
-      const currentState = gl.utils.getParameterByName('state') || 'opened';
-      paths.push(`state=${currentState}`);
+    this.saveCurrentSearchQuery();
 
-      tokens.forEach((token) => {
-        const condition = this.filteredSearchTokenKeys
-          .searchByConditionKeyValue(token.key, token.value.toLowerCase());
-        const { param } = this.filteredSearchTokenKeys.searchByKey(token.key) || {};
-        const keyParam = param ? `${token.key}_${param}` : token.key;
-        let tokenPath = '';
+    const { tokens, searchToken }
+      = this.tokenizer.processTokens(searchQuery);
+    const currentState = gl.utils.getParameterByName('state') || 'opened';
+    paths.push(`state=${currentState}`);
 
-        if (condition) {
-          tokenPath = condition.url;
-        } else {
-          let tokenValue = token.value;
+    tokens.forEach((token) => {
+      const condition = this.filteredSearchTokenKeys
+        .searchByConditionKeyValue(token.key, token.value.toLowerCase());
+      const { param } = this.filteredSearchTokenKeys.searchByKey(token.key) || {};
+      const keyParam = param ? `${token.key}_${param}` : token.key;
+      let tokenPath = '';
 
-          if ((tokenValue[0] === '\'' && tokenValue[tokenValue.length - 1] === '\'') ||
-            (tokenValue[0] === '"' && tokenValue[tokenValue.length - 1] === '"')) {
-            tokenValue = tokenValue.slice(1, tokenValue.length - 1);
-          }
+      if (condition) {
+        tokenPath = condition.url;
+      } else {
+        let tokenValue = token.value;
 
-          tokenPath = `${keyParam}=${encodeURIComponent(tokenValue)}`;
+        if ((tokenValue[0] === '\'' && tokenValue[tokenValue.length - 1] === '\'') ||
+          (tokenValue[0] === '"' && tokenValue[tokenValue.length - 1] === '"')) {
+          tokenValue = tokenValue.slice(1, tokenValue.length - 1);
         }
 
-        paths.push(tokenPath);
-      });
-
-      if (searchToken) {
-        const sanitized = searchToken.split(' ').map(t => encodeURIComponent(t)).join('+');
-        paths.push(`search=${sanitized}`);
+        tokenPath = `${keyParam}=${encodeURIComponent(tokenValue)}`;
       }
 
-      const parameterizedUrl = `?scope=all&utf8=%E2%9C%93&${paths.join('&')}`;
+      paths.push(tokenPath);
+    });
 
-      if (this.updateObject) {
-        this.updateObject(parameterizedUrl);
-      } else {
-        gl.utils.visitUrl(parameterizedUrl);
-      }
+    if (searchToken) {
+      const sanitized = searchToken.split(' ').map(t => encodeURIComponent(t)).join('+');
+      paths.push(`search=${sanitized}`);
     }
 
-    getUsernameParams() {
-      const usernamesById = {};
-      try {
-        const attribute = this.filteredSearchInput.getAttribute('data-username-params');
-        JSON.parse(attribute).forEach((user) => {
-          usernamesById[user.id] = user.username;
-        });
-      } catch (e) {
-        // do nothing
-      }
-      return usernamesById;
+    const parameterizedUrl = `?scope=all&utf8=%E2%9C%93&${paths.join('&')}`;
+
+    if (this.updateObject) {
+      this.updateObject(parameterizedUrl);
+    } else {
+      gl.utils.visitUrl(parameterizedUrl);
     }
+  }
 
-    tokenChange() {
-      const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
+  getUsernameParams() {
+    const usernamesById = {};
+    try {
+      const attribute = this.filteredSearchInput.getAttribute('data-username-params');
+      JSON.parse(attribute).forEach((user) => {
+        usernamesById[user.id] = user.username;
+      });
+    } catch (e) {
+      // do nothing
+    }
+    return usernamesById;
+  }
 
-      if (dropdown) {
-        const currentDropdownRef = dropdown.reference;
+  tokenChange() {
+    const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
 
-        this.setDropdownWrapper();
-        currentDropdownRef.dispatchInputEvent();
-      }
-    }
+    if (dropdown) {
+      const currentDropdownRef = dropdown.reference;
 
-    onrecentSearchesItemSelected(text) {
-      this.clearSearch();
-      this.filteredSearchInput.value = text;
-      this.filteredSearchInput.dispatchEvent(new CustomEvent('input'));
-      this.search();
+      this.setDropdownWrapper();
+      currentDropdownRef.dispatchInputEvent();
     }
   }
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchManager = FilteredSearchManager;
-})();
+  onrecentSearchesItemSelected(text) {
+    this.clearSearch();
+    this.filteredSearchInput.value = text;
+    this.filteredSearchInput.dispatchEvent(new CustomEvent('input'));
+    this.search();
+  }
+}
+
+window.gl = window.gl || {};
+gl.FilteredSearchManager = FilteredSearchManager;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js
index 6d5df86f2a5..1abad9d1b73 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js
@@ -1,100 +1,98 @@
-(() => {
-  const tokenKeys = [{
-    key: 'author',
-    type: 'string',
-    param: 'username',
-    symbol: '@',
-  }, {
-    key: 'assignee',
-    type: 'string',
-    param: 'username',
-    symbol: '@',
-  }, {
-    key: 'milestone',
-    type: 'string',
-    param: 'title',
-    symbol: '%',
-  }, {
-    key: 'label',
-    type: 'array',
-    param: 'name[]',
-    symbol: '~',
-  }];
+const tokenKeys = [{
+  key: 'author',
+  type: 'string',
+  param: 'username',
+  symbol: '@',
+}, {
+  key: 'assignee',
+  type: 'string',
+  param: 'username',
+  symbol: '@',
+}, {
+  key: 'milestone',
+  type: 'string',
+  param: 'title',
+  symbol: '%',
+}, {
+  key: 'label',
+  type: 'array',
+  param: 'name[]',
+  symbol: '~',
+}];
 
-  const alternativeTokenKeys = [{
-    key: 'label',
-    type: 'string',
-    param: 'name',
-    symbol: '~',
-  }];
+const alternativeTokenKeys = [{
+  key: 'label',
+  type: 'string',
+  param: 'name',
+  symbol: '~',
+}];
 
-  const tokenKeysWithAlternative = tokenKeys.concat(alternativeTokenKeys);
+const tokenKeysWithAlternative = tokenKeys.concat(alternativeTokenKeys);
 
-  const conditions = [{
-    url: 'assignee_id=0',
-    tokenKey: 'assignee',
-    value: 'none',
-  }, {
-    url: 'milestone_title=No+Milestone',
-    tokenKey: 'milestone',
-    value: 'none',
-  }, {
-    url: 'milestone_title=%23upcoming',
-    tokenKey: 'milestone',
-    value: 'upcoming',
-  }, {
-    url: 'milestone_title=%23started',
-    tokenKey: 'milestone',
-    value: 'started',
-  }, {
-    url: 'label_name[]=No+Label',
-    tokenKey: 'label',
-    value: 'none',
-  }];
+const conditions = [{
+  url: 'assignee_id=0',
+  tokenKey: 'assignee',
+  value: 'none',
+}, {
+  url: 'milestone_title=No+Milestone',
+  tokenKey: 'milestone',
+  value: 'none',
+}, {
+  url: 'milestone_title=%23upcoming',
+  tokenKey: 'milestone',
+  value: 'upcoming',
+}, {
+  url: 'milestone_title=%23started',
+  tokenKey: 'milestone',
+  value: 'started',
+}, {
+  url: 'label_name[]=No+Label',
+  tokenKey: 'label',
+  value: 'none',
+}];
 
-  class FilteredSearchTokenKeys {
-    static get() {
-      return tokenKeys;
-    }
+class FilteredSearchTokenKeys {
+  static get() {
+    return tokenKeys;
+  }
 
-    static getAlternatives() {
-      return alternativeTokenKeys;
-    }
+  static getAlternatives() {
+    return alternativeTokenKeys;
+  }
 
-    static getConditions() {
-      return conditions;
-    }
+  static getConditions() {
+    return conditions;
+  }
 
-    static searchByKey(key) {
-      return tokenKeys.find(tokenKey => tokenKey.key === key) || null;
-    }
+  static searchByKey(key) {
+    return tokenKeys.find(tokenKey => tokenKey.key === key) || null;
+  }
 
-    static searchBySymbol(symbol) {
-      return tokenKeys.find(tokenKey => tokenKey.symbol === symbol) || null;
-    }
+  static searchBySymbol(symbol) {
+    return tokenKeys.find(tokenKey => tokenKey.symbol === symbol) || null;
+  }
 
-    static searchByKeyParam(keyParam) {
-      return tokenKeysWithAlternative.find((tokenKey) => {
-        let tokenKeyParam = tokenKey.key;
+  static searchByKeyParam(keyParam) {
+    return tokenKeysWithAlternative.find((tokenKey) => {
+      let tokenKeyParam = tokenKey.key;
 
-        if (tokenKey.param) {
-          tokenKeyParam += `_${tokenKey.param}`;
-        }
+      if (tokenKey.param) {
+        tokenKeyParam += `_${tokenKey.param}`;
+      }
 
-        return keyParam === tokenKeyParam;
-      }) || null;
-    }
+      return keyParam === tokenKeyParam;
+    }) || null;
+  }
 
-    static searchByConditionUrl(url) {
-      return conditions.find(condition => condition.url === url) || null;
-    }
+  static searchByConditionUrl(url) {
+    return conditions.find(condition => condition.url === url) || null;
+  }
 
-    static searchByConditionKeyValue(key, value) {
-      return conditions
-        .find(condition => condition.tokenKey === key && condition.value === value) || null;
-    }
+  static searchByConditionKeyValue(key, value) {
+    return conditions
+      .find(condition => condition.tokenKey === key && condition.value === value) || null;
   }
+}
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchTokenKeys = FilteredSearchTokenKeys;
-})();
+window.gl = window.gl || {};
+gl.FilteredSearchTokenKeys = FilteredSearchTokenKeys;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
index a2729dc0e95..2808e4b238a 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
@@ -1,58 +1,56 @@
 require('./filtered_search_token_keys');
 
-(() => {
-  class FilteredSearchTokenizer {
-    static processTokens(input) {
-      const allowedKeys = gl.FilteredSearchTokenKeys.get().map(i => i.key);
-      // Regex extracts `(token):(symbol)(value)`
-      // Values that start with a double quote must end in a double quote (same for single)
-      const tokenRegex = new RegExp(`(${allowedKeys.join('|')}):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\\S+))`, 'g');
-      const tokens = [];
-      const tokenIndexes = []; // stores key+value for simple search
-      let lastToken = null;
-      const searchToken = input.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => {
-        let tokenValue = v1 || v2 || v3;
-        let tokenSymbol = symbol;
-        let tokenIndex = '';
-
-        if (tokenValue === '~' || tokenValue === '%' || tokenValue === '@') {
-          tokenSymbol = tokenValue;
-          tokenValue = '';
-        }
-
-        tokenIndex = `${key}:${tokenValue}`;
-
-        // Prevent adding duplicates
-        if (tokenIndexes.indexOf(tokenIndex) === -1) {
-          tokenIndexes.push(tokenIndex);
-
-          tokens.push({
-            key,
-            value: tokenValue || '',
-            symbol: tokenSymbol || '',
-          });
-        }
-
-        return '';
-      }).replace(/\s{2,}/g, ' ').trim() || '';
-
-      if (tokens.length > 0) {
-        const last = tokens[tokens.length - 1];
-        const lastString = `${last.key}:${last.symbol}${last.value}`;
-        lastToken = input.lastIndexOf(lastString) ===
-          input.length - lastString.length ? last : searchToken;
-      } else {
-        lastToken = searchToken;
+class FilteredSearchTokenizer {
+  static processTokens(input) {
+    const allowedKeys = gl.FilteredSearchTokenKeys.get().map(i => i.key);
+    // Regex extracts `(token):(symbol)(value)`
+    // Values that start with a double quote must end in a double quote (same for single)
+    const tokenRegex = new RegExp(`(${allowedKeys.join('|')}):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\\S+))`, 'g');
+    const tokens = [];
+    const tokenIndexes = []; // stores key+value for simple search
+    let lastToken = null;
+    const searchToken = input.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => {
+      let tokenValue = v1 || v2 || v3;
+      let tokenSymbol = symbol;
+      let tokenIndex = '';
+
+      if (tokenValue === '~' || tokenValue === '%' || tokenValue === '@') {
+        tokenSymbol = tokenValue;
+        tokenValue = '';
       }
 
-      return {
-        tokens,
-        lastToken,
-        searchToken,
-      };
+      tokenIndex = `${key}:${tokenValue}`;
+
+      // Prevent adding duplicates
+      if (tokenIndexes.indexOf(tokenIndex) === -1) {
+        tokenIndexes.push(tokenIndex);
+
+        tokens.push({
+          key,
+          value: tokenValue || '',
+          symbol: tokenSymbol || '',
+        });
+      }
+
+      return '';
+    }).replace(/\s{2,}/g, ' ').trim() || '';
+
+    if (tokens.length > 0) {
+      const last = tokens[tokens.length - 1];
+      const lastString = `${last.key}:${last.symbol}${last.value}`;
+      lastToken = input.lastIndexOf(lastString) ===
+        input.length - lastString.length ? last : searchToken;
+    } else {
+      lastToken = searchToken;
     }
+
+    return {
+      tokens,
+      lastToken,
+      searchToken,
+    };
   }
+}
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchTokenizer = FilteredSearchTokenizer;
-})();
+window.gl = window.gl || {};
+gl.FilteredSearchTokenizer = FilteredSearchTokenizer;
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index b6ce8e83729..4d491e70d83 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -1,26 +1,20 @@
 import Vue from 'vue';
-import IssueTitle from './issue_title';
+import IssueTitle from './issue_title.vue';
 import '../vue_shared/vue_resource_interceptor';
 
-const vueOptions = () => ({
-  el: '.issue-title-entrypoint',
-  components: {
-    IssueTitle,
-  },
-  data() {
-    const issueTitleData = document.querySelector('.issue-title-data').dataset;
+(() => {
+  const issueTitleData = document.querySelector('.issue-title-data').dataset;
+  const { initialTitle, endpoint } = issueTitleData;
 
-    return {
-      initialTitle: issueTitleData.initialTitle,
-      endpoint: issueTitleData.endpoint,
-    };
-  },
-  template: `
-    <IssueTitle
-      :initialTitle="initialTitle"
-      :endpoint="endpoint"
-    />
-  `,
-});
+  const vm = new Vue({
+    el: '.issue-title-entrypoint',
+    render: createElement => createElement(IssueTitle, {
+      props: {
+        initialTitle,
+        endpoint,
+      },
+    }),
+  });
 
-(() => new Vue(vueOptions()))();
+  return vm;
+})();
diff --git a/app/assets/javascripts/issue_show/issue_title.js b/app/assets/javascripts/issue_show/issue_title.vue
index 1184c8956dc..ba54178a310 100644
--- a/app/assets/javascripts/issue_show/issue_title.js
+++ b/app/assets/javascripts/issue_show/issue_title.vue
@@ -1,3 +1,4 @@
+<script>
 import Visibility from 'visibilityjs';
 import Poll from './../lib/utils/poll';
 import Service from './services/index';
@@ -72,7 +73,9 @@ export default {
   created() {
     this.fetch();
   },
-  template: `
-    <h2 class='title' v-html='title'></h2>
-  `,
 };
+</script>
+
+<template>
+  <h2 class="title" v-html="title"></h2>
+</template>
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index e1e6ca25446..01c4b9821d3 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -47,6 +47,10 @@
       }
     };
 
+    gl.utils.updateTooltipTitle = function($tooltipEl, newTitle) {
+      return $tooltipEl.attr('title', newTitle).tooltip('fixTitle');
+    };
+
     w.gl.utils.disableButtonIfEmptyField = function(field_selector, button_selector, event_name) {
       event_name = event_name || 'input';
       var closest_submit, field, that;
@@ -364,9 +368,9 @@
       });
     };
 
-    w.gl.utils.setFavicon = (iconName) => {
-      if (faviconEl && iconName) {
-        faviconEl.setAttribute('href', `/assets/${iconName}.ico`);
+    w.gl.utils.setFavicon = (faviconPath) => {
+      if (faviconEl && faviconPath) {
+        faviconEl.setAttribute('href', faviconPath);
       }
     };
 
@@ -381,8 +385,8 @@
         url: pageUrl,
         dataType: 'json',
         success: function(data) {
-          if (data && data.icon) {
-            gl.utils.setFavicon(`ci_favicons/${data.icon}`);
+          if (data && data.favicon) {
+            gl.utils.setFavicon(data.favicon);
           } else {
             gl.utils.resetFavicon();
           }
diff --git a/app/assets/javascripts/lib/utils/constants.js b/app/assets/javascripts/lib/utils/constants.js
new file mode 100644
index 00000000000..1e96c7ab5cd
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/constants.js
@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export const BYTES_IN_KIB = 1024;
diff --git a/app/assets/javascripts/lib/utils/number_utils.js b/app/assets/javascripts/lib/utils/number_utils.js
index e2bf69ee52e..f1b07408671 100644
--- a/app/assets/javascripts/lib/utils/number_utils.js
+++ b/app/assets/javascripts/lib/utils/number_utils.js
@@ -1,4 +1,4 @@
-/* eslint-disable import/prefer-default-export */
+import { BYTES_IN_KIB } from './constants';
 
 /**
  * Function that allows a number with an X amount of decimals
@@ -32,3 +32,13 @@ export function formatRelevantDigits(number) {
   }
   return formattedNumber;
 }
+
+/**
+ * Utility function that calculates KiB of the given bytes.
+ *
+ * @param  {Number} number bytes
+ * @return {Number}        KiB
+ */
+export function bytesToKiB(number) {
+  return number / BYTES_IN_KIB;
+}
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index c50ec24c818..be3c2c9fbb1 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -165,6 +165,7 @@ import './syntax_highlight';
 import './task_list';
 import './todos';
 import './tree';
+import './usage_ping';
 import './user';
 import './user_tabs';
 import './username_validator';
@@ -210,6 +211,14 @@ $(function () {
     }
   });
 
+  if (bootstrapBreakpoint === 'xs') {
+    const $rightSidebar = $('aside.right-sidebar, .page-with-sidebar');
+
+    $rightSidebar
+      .removeClass('right-sidebar-expanded')
+      .addClass('right-sidebar-collapsed');
+  }
+
   // prevent default action for disabled buttons
   $('.btn').click(function(e) {
     if ($(this).hasClass('disabled')) {
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 15f7a813626..974fb0d83da 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -308,8 +308,10 @@ require('./task_list');
 
       if (this.isNewNote(note)) {
         this.note_ids.push(note.id);
-        $notesList = $('ul.main-notes-list');
-        $notesList.append(note.html).syntaxHighlight();
+
+        $notesList = window.$('ul.main-notes-list');
+        Notes.animateAppendNote(note.html, $notesList);
+
         // Update datetime format on the recent note
         gl.utils.localTimeAgo($notesList.find("#note_" + note.id + " .js-timeago"), false);
         this.collapseLongCommitList();
@@ -348,7 +350,7 @@ require('./task_list');
       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='" + note.discussion_id + "']");
+      discussionContainer = window.$(`.notes[data-discussion-id="${note.discussion_id}"]`);
       if (!discussionContainer.length) {
         discussionContainer = form.closest('.discussion').find('.notes');
       }
@@ -370,14 +372,13 @@ require('./task_list');
             row.find(contentContainerClass + ' .content').append($notes.closest('.content').children());
           }
         }
-
         // Init discussion on 'Discussion' page if it is merge request page
-        if ($('body').attr('data-page').indexOf('projects:merge_request') === 0 || !note.diff_discussion_html) {
-          $('ul.main-notes-list').append($(note.discussion_html).renderGFM());
+        if (window.$('body').attr('data-page').indexOf('projects:merge_request') === 0 || !note.diff_discussion_html) {
+          Notes.animateAppendNote(note.discussion_html, window.$('ul.main-notes-list'));
         }
       } else {
         // append new note to all matching discussions
-        discussionContainer.append($(note.html).renderGFM());
+        Notes.animateAppendNote(note.html, discussionContainer);
       }
 
       if (typeof gl.diffNotesCompileComponents !== 'undefined' && note.discussion_resolvable) {
@@ -1063,6 +1064,13 @@ require('./task_list');
       return $form;
     };
 
+    Notes.animateAppendNote = function(noteHTML, $notesList) {
+      const $note = window.$(noteHTML);
+
+      $note.addClass('fade-in').renderGFM();
+      $notesList.append($note);
+    };
+
     return Notes;
   })();
 }).call(window);
diff --git a/app/assets/javascripts/vue_pipelines_index/components/async_button.vue b/app/assets/javascripts/pipelines/components/async_button.vue
index 11da6e908b7..d1c60b570de 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
+++ b/app/assets/javascripts/pipelines/components/async_button.vue
@@ -65,6 +65,8 @@ export default {
     makeRequest() {
       this.isLoading = true;
 
+      $(this.$el).tooltip('destroy');
+
       this.service.postAction(this.endpoint)
         .then(() => {
           this.isLoading = false;
@@ -88,9 +90,13 @@ export default {
     :aria-label="title"
     data-container="body"
     data-placement="top"
-    :disabled="isLoading"
-  >
-    <i :class="iconClass" aria-hidden="true"></i>
-    <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading"></i>
+    :disabled="isLoading">
+    <i
+      :class="iconClass"
+      aria-hidden="true" />
+    <i
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true"
+      v-if="isLoading" />
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_pipelines_index/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index ba158bc4a1e..ba158bc4a1e 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
diff --git a/app/assets/javascripts/vue_pipelines_index/components/error_state.vue b/app/assets/javascripts/pipelines/components/error_state.vue
index 90cee68163e..90cee68163e 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/error_state.vue
+++ b/app/assets/javascripts/pipelines/components/error_state.vue
diff --git a/app/assets/javascripts/vue_pipelines_index/components/nav_controls.js b/app/assets/javascripts/pipelines/components/nav_controls.js
index 6aa10531034..6aa10531034 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/nav_controls.js
+++ b/app/assets/javascripts/pipelines/components/nav_controls.js
diff --git a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js b/app/assets/javascripts/pipelines/components/navigation_tabs.js
index 1626ae17a30..1626ae17a30 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js
+++ b/app/assets/javascripts/pipelines/components/navigation_tabs.js
diff --git a/app/assets/javascripts/vue_pipelines_index/components/pipeline_url.js b/app/assets/javascripts/pipelines/components/pipeline_url.js
index 4e183d5c8ec..4e183d5c8ec 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/pipeline_url.js
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.js
diff --git a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js b/app/assets/javascripts/pipelines/components/pipelines_actions.js
index 12d80768646..ffda18d2e0f 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.js
@@ -28,6 +28,8 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
+      $(this.$refs.tooltip).tooltip('destroy');
+
       this.service.postAction(endpoint)
       .then(() => {
         this.isLoading = false;
@@ -57,6 +59,7 @@ export default {
         data-toggle="dropdown"
         data-placement="top"
         aria-label="Manual job"
+        ref="tooltip"
         :disabled="isLoading">
         ${playIconSvg}
         <i
diff --git a/app/assets/javascripts/vue_pipelines_index/components/pipelines_artifacts.js b/app/assets/javascripts/pipelines/components/pipelines_artifacts.js
index f18e2dfadaf..f18e2dfadaf 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/pipelines_artifacts.js
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.js
diff --git a/app/assets/javascripts/vue_pipelines_index/components/stage.js b/app/assets/javascripts/pipelines/components/stage.js
index a2c29002707..b8cc3630611 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/stage.js
+++ b/app/assets/javascripts/pipelines/components/stage.js
@@ -1,32 +1,11 @@
 /* global Flash */
-import canceledSvg from 'icons/_icon_status_canceled_borderless.svg';
-import createdSvg from 'icons/_icon_status_created_borderless.svg';
-import failedSvg from 'icons/_icon_status_failed_borderless.svg';
-import manualSvg from 'icons/_icon_status_manual_borderless.svg';
-import pendingSvg from 'icons/_icon_status_pending_borderless.svg';
-import runningSvg from 'icons/_icon_status_running_borderless.svg';
-import skippedSvg from 'icons/_icon_status_skipped_borderless.svg';
-import successSvg from 'icons/_icon_status_success_borderless.svg';
-import warningSvg from 'icons/_icon_status_warning_borderless.svg';
+import StatusIconEntityMap from '../../ci_status_icons';
 
 export default {
   data() {
-    const svgsDictionary = {
-      icon_status_canceled: canceledSvg,
-      icon_status_created: createdSvg,
-      icon_status_failed: failedSvg,
-      icon_status_manual: manualSvg,
-      icon_status_pending: pendingSvg,
-      icon_status_running: runningSvg,
-      icon_status_skipped: skippedSvg,
-      icon_status_success: successSvg,
-      icon_status_warning: warningSvg,
-    };
-
     return {
       builds: '',
       spinner: '<span class="fa fa-spinner fa-spin"></span>',
-      svg: svgsDictionary[this.stage.status.icon],
     };
   },
 
@@ -89,6 +68,9 @@ export default {
     triggerButtonClass() {
       return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
     },
+    svgHTML() {
+      return StatusIconEntityMap[this.stage.status.icon];
+    },
   },
   template: `
     <div>
@@ -100,7 +82,7 @@ export default {
         data-toggle="dropdown"
         type="button"
         :aria-label="stage.title">
-        <span v-html="svg" aria-hidden="true"></span>
+        <span v-html="svgHTML" aria-hidden="true"></span>
         <i class="fa fa-caret-down" aria-hidden="true"></i>
       </button>
       <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
diff --git a/app/assets/javascripts/vue_pipelines_index/components/status.js b/app/assets/javascripts/pipelines/components/status.js
index 21a281af438..21a281af438 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/status.js
+++ b/app/assets/javascripts/pipelines/components/status.js
diff --git a/app/assets/javascripts/vue_pipelines_index/components/time_ago.js b/app/assets/javascripts/pipelines/components/time_ago.js
index 498d0715f54..498d0715f54 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/time_ago.js
+++ b/app/assets/javascripts/pipelines/components/time_ago.js
diff --git a/app/assets/javascripts/vue_pipelines_index/event_hub.js b/app/assets/javascripts/pipelines/event_hub.js
index 0948c2e5352..0948c2e5352 100644
--- a/app/assets/javascripts/vue_pipelines_index/event_hub.js
+++ b/app/assets/javascripts/pipelines/event_hub.js
diff --git a/app/assets/javascripts/vue_pipelines_index/index.js b/app/assets/javascripts/pipelines/index.js
index 48f9181a8d9..48f9181a8d9 100644
--- a/app/assets/javascripts/vue_pipelines_index/index.js
+++ b/app/assets/javascripts/pipelines/index.js
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js
index 6eea4812f33..6eea4812f33 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/pipelines/pipelines.js
diff --git a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js b/app/assets/javascripts/pipelines/services/pipelines_service.js
index 255cd513490..255cd513490 100644
--- a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
+++ b/app/assets/javascripts/pipelines/services/pipelines_service.js
diff --git a/app/assets/javascripts/vue_pipelines_index/stores/pipelines_store.js b/app/assets/javascripts/pipelines/stores/pipelines_store.js
index 377ec8ba2cc..377ec8ba2cc 100644
--- a/app/assets/javascripts/vue_pipelines_index/stores/pipelines_store.js
+++ b/app/assets/javascripts/pipelines/stores/pipelines_store.js
diff --git a/app/assets/javascripts/shortcuts_wiki.js b/app/assets/javascripts/shortcuts_wiki.js
new file mode 100644
index 00000000000..8a075062a48
--- /dev/null
+++ b/app/assets/javascripts/shortcuts_wiki.js
@@ -0,0 +1,16 @@
+/* eslint-disable class-methods-use-this */
+/* global Mousetrap */
+/* global ShortcutsNavigation */
+
+import findAndFollowLink from './shortcuts_dashboard_navigation';
+
+export default class ShortcutsWiki extends ShortcutsNavigation {
+  constructor() {
+    super();
+    Mousetrap.bind('e', this.editWiki);
+  }
+
+  editWiki() {
+    findAndFollowLink('.js-wiki-edit');
+  }
+}
diff --git a/app/assets/javascripts/usage_ping.js b/app/assets/javascripts/usage_ping.js
new file mode 100644
index 00000000000..fd3af7d7ab6
--- /dev/null
+++ b/app/assets/javascripts/usage_ping.js
@@ -0,0 +1,15 @@
+function UsagePing() {
+  const usageDataUrl = $('.usage-data').data('endpoint');
+
+  $.ajax({
+    type: 'GET',
+    url: usageDataUrl,
+    dataType: 'html',
+    success(html) {
+      $('.usage-data').html(html);
+    },
+  });
+}
+
+window.gl = window.gl || {};
+window.gl.UsagePing = UsagePing;
diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index fa078b48bf8..b9d57cbcad4 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -18,7 +18,7 @@ export default class UserCallout {
   dismissCallout(e) {
     const $currentTarget = $(e.currentTarget);
 
-    Cookies.set(USER_CALLOUT_COOKIE, 'true');
+    Cookies.set(USER_CALLOUT_COOKIE, 'true', { expires: 365 });
 
     if ($currentTarget.hasClass('close')) {
       this.userCalloutBody.remove();
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
index 8ebe12cb1c5..62b7131de51 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -1,12 +1,12 @@
 /* eslint-disable no-param-reassign */
 
-import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button.vue';
-import PipelinesActionsComponent from '../../vue_pipelines_index/components/pipelines_actions';
-import PipelinesArtifactsComponent from '../../vue_pipelines_index/components/pipelines_artifacts';
-import PipelinesStatusComponent from '../../vue_pipelines_index/components/status';
-import PipelinesStageComponent from '../../vue_pipelines_index/components/stage';
-import PipelinesUrlComponent from '../../vue_pipelines_index/components/pipeline_url';
-import PipelinesTimeagoComponent from '../../vue_pipelines_index/components/time_ago';
+import AsyncButtonComponent from '../../pipelines/components/async_button.vue';
+import PipelinesActionsComponent from '../../pipelines/components/pipelines_actions';
+import PipelinesArtifactsComponent from '../../pipelines/components/pipelines_artifacts';
+import PipelinesStatusComponent from '../../pipelines/components/status';
+import PipelinesStageComponent from '../../pipelines/components/stage';
+import PipelinesUrlComponent from '../../pipelines/components/pipeline_url';
+import PipelinesTimeagoComponent from '../../pipelines/components/time_ago';
 import CommitComponent from './commit';
 
 /**
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 90935b9616b..7c50b80fd2b 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -145,3 +145,17 @@ a {
 .dropdown-menu-nav a {
   transition: none;
 }
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn $fade-in-duration 1;
+}
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index b849cc2d853..f614f262316 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -38,6 +38,15 @@
     height: 300px;
     overflow-y: scroll;
   }
+
+  .disabled {
+    cursor: default;
+    opacity: 0.5;
+
+    &:hover {
+      transform: none;
+    }
+  }
 }
 
 .emoji-search {
@@ -154,6 +163,17 @@
     }
   }
 
+  &.user-authored {
+    cursor: default;
+    opacity: 0.65;
+
+    &:hover,
+    &:active {
+      background-color: $white-light;
+      border-color: $border-color;
+    }
+  }
+
   &.btn {
     &:focus {
       outline: 0;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 2c33b235980..0fd7203e72b 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -40,6 +40,10 @@
   line-height: 24px;
 }
 
+.bold {
+  font-weight: 600;
+}
+
 .tab-content {
   overflow: visible;
 }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 7767826b033..b87e712c763 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -564,3 +564,7 @@
     color: $gl-text-color-secondary;
   }
 }
+
+.droplab-item-ignore {
+  pointer-events: none;
+}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index abb092623c0..0077ea41d3b 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -155,7 +155,7 @@ header {
 
     .header-logo {
       display: inline-block;
-      margin: 0 7px 0 2px;
+      margin: 0 12px 0 2px;
       position: relative;
       top: 10px;
       transition-duration: .3s;
@@ -186,7 +186,7 @@ header {
       display: flex;
       align-items: flex-start;
       flex: 1 1 auto;
-      padding-top: (($header-height - 19) / 2);
+      padding-top: 14px;
       overflow: hidden;
     }
 
@@ -331,6 +331,14 @@ header {
   .dropdown-menu-nav {
     min-width: 140px;
     margin-top: -5px;
+
+    .current-user {
+      padding: 5px 18px;
+
+      .user-name {
+        display: block;
+      }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 20ef9a774e4..3ef6ec3f912 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -458,6 +458,11 @@ $label-remove-border: rgba(0, 0, 0, .1);
 $label-border-radius: 100px;
 
 /*
+* Animation
+*/
+$fade-in-duration: 200ms;
+
+/*
 * Lint
 */
 $lint-incorrect-color: $red-500;
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 144adbcdaef..411f1c4442b 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -61,8 +61,9 @@
   .truncated-info {
     text-align: center;
     border-bottom: 1px solid;
-    background-color: $black-transparent;
+    background-color: $black;
     height: 45px;
+    padding: 15px;
 
     &.affix {
       top: 0;
@@ -87,6 +88,16 @@
       right: 5px;
       left: 5px;
     }
+
+    .truncated-info-size {
+      margin: 0 5px;
+    }
+
+    .raw-link {
+      color: inherit;
+      margin-left: 5px;
+      text-decoration: underline;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 0dad91ba128..9e3142c8aa3 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -135,7 +135,7 @@
 
 .text-expander {
   display: inline-block;
-  background: $gray-light;
+  background: $white-light;
   color: $gl-text-color-secondary;
   padding: 0 5px;
   cursor: pointer;
@@ -146,6 +146,11 @@
   line-height: $gl-font-size;
   outline: none;
 
+  &.open {
+    background: $gray-light;
+    box-shadow: inset 0 0 2px rgba($black, 0.2);
+  }
+
   &:hover {
     background-color: darken($gray-light, 10%);
     text-decoration: none;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 1aa1079903c..1b4694377b3 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -106,6 +106,10 @@
         span {
           white-space: pre-wrap;
         }
+
+        .line {
+          word-wrap: break-word;
+        }
       }
     }
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 0bca3e93e4c..8d3d1a72b9b 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -210,10 +210,6 @@
       }
     }
 
-    .bold {
-      font-weight: 600;
-    }
-
     .light {
       font-weight: normal;
     }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index c78fb8ede79..2ea2ff8362b 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -123,6 +123,9 @@ ul.notes {
     }
 
     .note-emoji-button {
+      position: relative;
+      line-height: 1;
+
       .fa-spinner {
         display: none;
       }
@@ -352,6 +355,15 @@ ul.notes {
   font-size: 14px;
 }
 
+.note-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.note-header-info {
+  min-width: 0;
+}
+
 .note-headline-light {
   display: inline;
 
@@ -371,21 +383,27 @@ ul.notes {
   }
 }
 
+.note-headline-meta {
+  display: inline-block;
+  white-space: nowrap;
+}
+
 /**
  * Actions for Discussions/Notes
  */
 
-.discussion-actions,
-.note-actions {
+.discussion-actions {
   float: right;
   margin-left: 10px;
   color: $gray-darkest;
 }
 
 .note-actions {
-  position: absolute;
-  right: 0;
-  top: 0;
+  flex-shrink: 0;
+  // For PhantomJS that does not support flex
+  float: right;
+  margin-left: 10px;
+  color: $gray-darkest;
 
   .note-action-button {
     margin-left: 8px;
@@ -428,7 +446,8 @@ ul.notes {
   .award-control-icon-positive,
   .award-control-icon-super-positive {
     position: absolute;
-    margin-left: -20px;
+    top: 0;
+    left: 0;
     opacity: 0;
   }
 
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8c6dd392865..fe084eb9397 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -289,8 +289,12 @@ table.u2f-registrations {
   margin: 0 auto;
 
   .bordered-box {
-    border: 1px solid $border-color;
+    border: 1px solid $blue-300;
     border-radius: $border-radius-default;
+    background-color: $blue-25;
+    position: relative;
+    display: flex;
+    justify-content: center;
   }
 
   .landing {
@@ -298,28 +302,59 @@ table.u2f-registrations {
     margin-bottom: $gl-padding;
 
     .close {
-      margin-right: 20px;
-    }
+      position: absolute;
+      right: 20px;
+      opacity: 1;
+
+      .dismiss-icon {
+        float: right;
+        cursor: pointer;
+        color: $blue-300;
+      }
 
-    .dismiss-icon {
-      float: right;
-      cursor: pointer;
-      color: $cycle-analytics-dismiss-icon-color;
+      &:hover {
+        background-color: transparent;
+        border: 0;
+
+        .dismiss-icon {
+          color: $blue-400;
+        }
+      }
     }
 
     .svg-container {
-      text-align: center;
+      margin-right: 30px;
+      display: inline-block;
 
       svg {
-        width: 136px;
-        height: 136px;
+        height: 110px;
+        vertical-align: top;
       }
     }
+
+    .user-callout-copy {
+      display: inline-block;
+      vertical-align: top;
+    }
   }
 
   @media(max-width: $screen-xs-max) {
-    .inner-content {
-      padding-left: 30px;
+    text-align: center;
+
+    .bordered-box {
+      display: block;
+    }
+
+    .landing {
+      .svg-container,
+      .user-callout-copy {
+        margin: 0;
+        display: block;
+
+        svg {
+          height: 75px;
+        }
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 717ebb44a23..28a8f9cb335 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -596,6 +596,10 @@ pre.light-well {
 
   .avatar-container {
     align-self: flex-start;
+
+    > a {
+      width: 100%;
+    }
   }
 
   .project-details {
@@ -929,27 +933,23 @@ pre.light-well {
   }
 
   .variable-key {
-    width: 300px;
-    max-width: 300px;
+    max-width: 120px;
     overflow: hidden;
     word-wrap: break-word;
-
-    // override bootstrap
-    white-space: normal!important;
-
-    @media (max-width: $screen-sm-max) {
-      width: 150px;
-      max-width: 150px;
-    }
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   .variable-value {
-    @media(max-width: $screen-xs-max) {
-      width: 150px;
-      max-width: 150px;
-      overflow: hidden;
-      word-wrap: break-word;
-    }
+    max-width: 150px;
+    overflow: hidden;
+    word-wrap: break-word;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .variable-menu {
+    text-align: right;
   }
 }
 
diff --git a/app/controllers/admin/application_settings_controller.rb b/app/controllers/admin/application_settings_controller.rb
index 515d8e1523b..643993d035e 100644
--- a/app/controllers/admin/application_settings_controller.rb
+++ b/app/controllers/admin/application_settings_controller.rb
@@ -17,6 +17,18 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
     end
   end
 
+  def usage_data
+    respond_to do |format|
+      format.html do
+        usage_data = Gitlab::UsageData.data
+        usage_data_json = params[:pretty] ? JSON.pretty_generate(usage_data) : usage_data.to_json
+
+        render html: Gitlab::Highlight.highlight('payload.json', usage_data_json)
+      end
+      format.json { render json: Gitlab::UsageData.to_json }
+    end
+  end
+
   def reset_runners_token
     @application_setting.reset_runners_registration_token!
     flash[:notice] = 'New runners registration token has been generated!'
@@ -135,6 +147,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
       :version_check_enabled,
       :terminal_max_session_time,
       :polling_interval_multiplier,
+      :usage_ping_enabled,
 
       disabled_oauth_sign_in_sources: [],
       import_sources: [],
diff --git a/app/controllers/admin/cohorts_controller.rb b/app/controllers/admin/cohorts_controller.rb
new file mode 100644
index 00000000000..9b77c554908
--- /dev/null
+++ b/app/controllers/admin/cohorts_controller.rb
@@ -0,0 +1,11 @@
+class Admin::CohortsController < Admin::ApplicationController
+  def index
+    if current_application_settings.usage_ping_enabled
+      cohorts_results = Rails.cache.fetch('cohorts', expires_in: 1.day) do
+        CohortsService.new.execute
+      end
+
+      @cohorts = CohortsSerializer.new.represent(cohorts_results)
+    end
+  end
+end
diff --git a/app/controllers/admin/spam_logs_controller.rb b/app/controllers/admin/spam_logs_controller.rb
index 2abfa22712d..1d66955bb71 100644
--- a/app/controllers/admin/spam_logs_controller.rb
+++ b/app/controllers/admin/spam_logs_controller.rb
@@ -7,7 +7,7 @@ class Admin::SpamLogsController < Admin::ApplicationController
     spam_log = SpamLog.find(params[:id])
 
     if params[:remove_user]
-      spam_log.remove_user
+      spam_log.remove_user(deleted_by: current_user)
       redirect_to admin_spam_logs_path, notice: "User #{spam_log.user.username} was successfully removed."
     else
       spam_log.destroy
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 5a3bd4040cc..0af05992cce 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -269,6 +269,7 @@ class ApplicationController < ActionController::Base
   def set_locale
     requested_locale = current_user&.preferred_language || request.env['HTTP_ACCEPT_LANGUAGE'] || I18n.default_locale
     locale = FastGettext.set_locale(requested_locale)
+
     I18n.locale = locale
   end
 end
diff --git a/app/controllers/concerns/creates_commit.rb b/app/controllers/concerns/creates_commit.rb
index 9ac8197e45a..183eb00ef67 100644
--- a/app/controllers/concerns/creates_commit.rb
+++ b/app/controllers/concerns/creates_commit.rb
@@ -1,17 +1,29 @@
 module CreatesCommit
   extend ActiveSupport::Concern
 
+  def set_start_branch_to_branch_name
+    branch_exists = @repository.find_branch(@branch_name)
+    @start_branch = @branch_name if branch_exists
+  end
+
   def create_commit(service, success_path:, failure_path:, failure_view: nil, success_notice: nil)
-    set_commit_variables
+    if can?(current_user, :push_code, @project)
+      @project_to_commit_into = @project
+      @branch_name ||= @ref
+    else
+      @project_to_commit_into = current_user.fork_of(@project)
+      @branch_name ||= @project_to_commit_into.repository.next_branch('patch')
+    end
+
+    @start_branch ||= @ref || @branch_name
 
     commit_params = @commit_params.merge(
-      start_project: @mr_target_project,
-      start_branch: @mr_target_branch,
-      target_branch: @mr_source_branch
+      start_project: @project,
+      start_branch: @start_branch,
+      branch_name: @branch_name
     )
 
-    result = service.new(
-      @mr_source_project, current_user, commit_params).execute
+    result = service.new(@project_to_commit_into, current_user, commit_params).execute
 
     if result[:status] == :success
       update_flash_notice(success_notice)
@@ -72,30 +84,30 @@ module CreatesCommit
 
   def new_merge_request_path
     new_namespace_project_merge_request_path(
-      @mr_source_project.namespace,
-      @mr_source_project,
+      @project_to_commit_into.namespace,
+      @project_to_commit_into,
       merge_request: {
-        source_project_id: @mr_source_project.id,
-        target_project_id: @mr_target_project.id,
-        source_branch: @mr_source_branch,
-        target_branch: @mr_target_branch
+        source_project_id: @project_to_commit_into.id,
+        target_project_id: @project.id,
+        source_branch: @branch_name,
+        target_branch: @start_branch
       }
     )
   end
 
   def existing_merge_request_path
-    namespace_project_merge_request_path(@mr_target_project.namespace, @mr_target_project, @merge_request)
+    namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
   end
 
   def merge_request_exists?
     return @merge_request if defined?(@merge_request)
 
-    @merge_request = MergeRequestsFinder.new(current_user, project_id: @mr_target_project.id).execute.opened.
-      find_by(source_branch: @mr_source_branch, target_branch: @mr_target_branch, source_project_id: @mr_source_project)
+    @merge_request = MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.
+      find_by(source_project_id: @project_to_commit_into, source_branch: @branch_name, target_branch: @start_branch)
   end
 
   def different_project?
-    @mr_source_project != @mr_target_project
+    @project_to_commit_into != @project
   end
 
   def create_merge_request?
@@ -103,22 +115,6 @@ module CreatesCommit
     # as the target branch in the same project,
     # we don't want to create a merge request.
     params[:create_merge_request].present? &&
-      (different_project? || @mr_target_branch != @mr_source_branch)
-  end
-
-  def set_commit_variables
-    if can?(current_user, :push_code, @project)
-      @mr_source_project = @project
-      @target_branch ||= @ref
-    else
-      @mr_source_project = current_user.fork_of(@project)
-      @target_branch ||= @mr_source_project.repository.next_branch('patch')
-    end
-
-    # Merge request to this project
-    @mr_target_project = @project
-    @mr_target_branch ||= @ref || @target_branch
-
-    @mr_source_branch = @target_branch
+      (different_project? || @start_branch != @branch_name)
   end
 end
diff --git a/app/controllers/projects/application_controller.rb b/app/controllers/projects/application_controller.rb
index f1a93ccb3ad..e2f81b09adc 100644
--- a/app/controllers/projects/application_controller.rb
+++ b/app/controllers/projects/application_controller.rb
@@ -89,9 +89,4 @@ class Projects::ApplicationController < ApplicationController
   def builds_enabled
     return render_404 unless @project.feature_available?(:builds, current_user)
   end
-
-  def update_ref
-    branch_exists = @repository.find_branch(@target_branch)
-    @ref = @target_branch if branch_exists
-  end
 end
diff --git a/app/controllers/projects/blob_controller.rb b/app/controllers/projects/blob_controller.rb
index 73706bf8dae..9fce1db6742 100644
--- a/app/controllers/projects/blob_controller.rb
+++ b/app/controllers/projects/blob_controller.rb
@@ -25,10 +25,10 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def create
-    update_ref
+    set_start_branch_to_branch_name
 
     create_commit(Files::CreateService, success_notice: "The file has been successfully created.",
-                                        success_path: -> { namespace_project_blob_path(@project.namespace, @project, File.join(@target_branch, @file_path)) },
+                                        success_path: -> { namespace_project_blob_path(@project.namespace, @project, File.join(@branch_name, @file_path)) },
                                         failure_view: :new,
                                         failure_path: namespace_project_new_blob_path(@project.namespace, @project, @ref))
   end
@@ -69,10 +69,10 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def destroy
-    create_commit(Files::DestroyService, success_notice: "The file has been successfully deleted.",
-                                         success_path: -> { namespace_project_tree_path(@project.namespace, @project, @target_branch) },
-                                         failure_view: :show,
-                                         failure_path: namespace_project_blob_path(@project.namespace, @project, @id))
+    create_commit(Files::DeleteService, success_notice: "The file has been successfully deleted.",
+                                        success_path: -> { namespace_project_tree_path(@project.namespace, @project, @branch_name) },
+                                        failure_view: :show,
+                                        failure_path: namespace_project_blob_path(@project.namespace, @project, @id))
   end
 
   def diff
@@ -127,16 +127,16 @@ class Projects::BlobController < Projects::ApplicationController
 
   def after_edit_path
     from_merge_request = MergeRequestsFinder.new(current_user, project_id: @project.id).execute.find_by(iid: params[:from_merge_request_iid])
-    if from_merge_request && @target_branch == @ref
+    if from_merge_request && @branch_name == @ref
       diffs_namespace_project_merge_request_path(from_merge_request.target_project.namespace, from_merge_request.target_project, from_merge_request) +
         "##{hexdigest(@path)}"
     else
-      namespace_project_blob_path(@project.namespace, @project, File.join(@target_branch, @path))
+      namespace_project_blob_path(@project.namespace, @project, File.join(@branch_name, @path))
     end
   end
 
   def editor_variables
-    @target_branch = params[:target_branch]
+    @branch_name = params[:branch_name]
 
     @file_path =
       if action_name.to_s == 'create'
diff --git a/app/controllers/projects/commit_controller.rb b/app/controllers/projects/commit_controller.rb
index d25bbddd1bb..2b5f0383ac1 100644
--- a/app/controllers/projects/commit_controller.rb
+++ b/app/controllers/projects/commit_controller.rb
@@ -56,9 +56,7 @@ class Projects::CommitController < Projects::ApplicationController
 
     return render_404 if @start_branch.blank?
 
-    @target_branch = create_new_branch? ? @commit.revert_branch_name : @start_branch
-
-    @mr_target_branch = @start_branch
+    @branch_name = create_new_branch? ? @commit.revert_branch_name : @start_branch
 
     create_commit(Commits::RevertService, success_notice: "The #{@commit.change_type_title(current_user)} has been successfully reverted.",
                                           success_path: -> { successful_change_path }, failure_path: failed_change_path)
@@ -69,9 +67,7 @@ class Projects::CommitController < Projects::ApplicationController
 
     return render_404 if @start_branch.blank?
 
-    @target_branch = create_new_branch? ? @commit.cherry_pick_branch_name : @start_branch
-
-    @mr_target_branch = @start_branch
+    @branch_name = create_new_branch? ? @commit.cherry_pick_branch_name : @start_branch
 
     create_commit(Commits::CherryPickService, success_notice: "The #{@commit.change_type_title(current_user)} has been successfully cherry-picked.",
                                               success_path: -> { successful_change_path }, failure_path: failed_change_path)
@@ -84,7 +80,7 @@ class Projects::CommitController < Projects::ApplicationController
   end
 
   def successful_change_path
-    referenced_merge_request_url || namespace_project_commits_url(@project.namespace, @project, @target_branch)
+    referenced_merge_request_url || namespace_project_commits_url(@project.namespace, @project, @branch_name)
   end
 
   def failed_change_path
diff --git a/app/controllers/projects/git_http_controller.rb b/app/controllers/projects/git_http_controller.rb
index 37f6f637ff0..10adddb4636 100644
--- a/app/controllers/projects/git_http_controller.rb
+++ b/app/controllers/projects/git_http_controller.rb
@@ -5,6 +5,8 @@ class Projects::GitHttpController < Projects::GitHttpClientController
   # GET /foo/bar.git/info/refs?service=git-receive-pack (git push)
   def info_refs
     if upload_pack? && upload_pack_allowed?
+      log_user_activity
+
       render_ok
     elsif receive_pack? && receive_pack_allowed?
       render_ok
@@ -106,4 +108,8 @@ class Projects::GitHttpController < Projects::GitHttpClientController
   def access_klass
     @access_klass ||= wiki? ? Gitlab::GitAccessWiki : Gitlab::GitAccess
   end
+
+  def log_user_activity
+    Users::ActivityService.new(user, 'pull').execute
+  end
 end
diff --git a/app/controllers/projects/tree_controller.rb b/app/controllers/projects/tree_controller.rb
index 637b61504d8..5e2182c883e 100644
--- a/app/controllers/projects/tree_controller.rb
+++ b/app/controllers/projects/tree_controller.rb
@@ -34,16 +34,16 @@ class Projects::TreeController < Projects::ApplicationController
   def create_dir
     return render_404 unless @commit_params.values.all?
 
-    update_ref
+    set_start_branch_to_branch_name
     create_commit(Files::CreateDirService,  success_notice: "The directory has been successfully created.",
-                                            success_path: namespace_project_tree_path(@project.namespace, @project, File.join(@target_branch, @dir_name)),
+                                            success_path: namespace_project_tree_path(@project.namespace, @project, File.join(@branch_name, @dir_name)),
                                             failure_path: namespace_project_tree_path(@project.namespace, @project, @ref))
   end
 
   private
 
   def assign_dir_vars
-    @target_branch = params[:target_branch]
+    @branch_name = params[:branch_name]
 
     @dir_name = File.join(@path, params[:dir_name])
     @commit_params = {
diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
index d3091a4f8e9..8c6ba4915cd 100644
--- a/app/controllers/sessions_controller.rb
+++ b/app/controllers/sessions_controller.rb
@@ -35,6 +35,7 @@ class SessionsController < Devise::SessionsController
       # hide the signed-in notification
       flash[:notice] = nil
       log_audit_event(current_user, with: authentication_method)
+      log_user_activity(current_user)
     end
   end
 
@@ -123,6 +124,10 @@ class SessionsController < Devise::SessionsController
       for_authentication.security_event
   end
 
+  def log_user_activity(user)
+    Users::ActivityService.new(user, 'login').execute
+  end
+
   def load_recaptcha
     Gitlab::Recaptcha.load_configurations!
   end
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 6c3f3a61e0a..4b3ab03a69c 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -34,7 +34,7 @@ module BlobHelper
     if !on_top_of_branch?(project, ref)
       button_tag 'Edit', class: "#{common_classes} disabled has-tooltip", title: "You can only edit files when you are on a branch", data: { container: 'body' }
     # This condition applies to anonymous or users who can edit directly
-    elsif !current_user || (current_user && can_edit_blob?(blob, project, ref))
+    elsif !current_user || (current_user && can_modify_blob?(blob, project, ref))
       link_to 'Edit', edit_path(project, ref, path, options), class: "#{common_classes} btn-sm"
     elsif current_user && can?(current_user, :fork_project, project)
       button_tag 'Edit', class: "#{common_classes} js-edit-blob-link-fork-toggler"
@@ -52,7 +52,7 @@ module BlobHelper
       button_tag label, class: "btn btn-#{btn_class} disabled has-tooltip", title: "You can only #{action} files when you are on a branch", data: { container: 'body' }
     elsif blob.lfs_pointer?
       button_tag label, class: "btn btn-#{btn_class} disabled has-tooltip", title: "It is not possible to #{action} files that are stored in LFS using the web interface", data: { container: 'body' }
-    elsif can_edit_blob?(blob, project, ref)
+    elsif can_modify_blob?(blob, project, ref)
       button_tag label, class: "btn btn-#{btn_class}", 'data-target' => "#modal-#{modal_type}-blob", 'data-toggle' => 'modal'
     elsif can?(current_user, :fork_project, project)
       continue_params = {
@@ -90,7 +90,7 @@ module BlobHelper
     )
   end
 
-  def can_edit_blob?(blob, project = @project, ref = @ref)
+  def can_modify_blob?(blob, project = @project, ref = @ref)
     !blob.lfs_pointer? && can_edit_tree?(project, ref)
   end
 
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 6978b0c89fd..82288f1da35 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -110,6 +110,14 @@ module IssuesHelper
     end
   end
 
+  def award_user_authored_class(award)
+    if award == 'thumbsdown' || award == 'thumbsup'
+      'user-authored js-user-authored'
+    else
+      ''
+    end
+  end
+
   def awards_sort(awards)
     awards.sort_by do |award, notes|
       if award == "thumbsup"
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 6b9e4267281..5f97e6114ea 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -24,7 +24,7 @@ module ProjectsHelper
 
     return "(deleted)" unless author
 
-    author_html =  ""
+    author_html = ""
 
     # Build avatar image tag
     author_html << image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]} #{opts[:avatar_class] if opts[:avatar_class]}", alt: '') if opts[:avatar]
@@ -45,7 +45,7 @@ module ProjectsHelper
       link_to(author_html, user_path(author), class: "author_link #{"#{opts[:extra_class]}" if opts[:extra_class]} #{"#{opts[:mobile_classes]}" if opts[:mobile_classes]}").html_safe
     else
       title = opts[:title].sub(":name", sanitize(author.name))
-      link_to(author_html, user_path(author), class: "author_link has-tooltip", title: title, data: { container: 'body' } ).html_safe
+      link_to(author_html, user_path(author), class: "author_link has-tooltip", title: title, data: { container: 'body' }).html_safe
     end
   end
 
@@ -272,14 +272,14 @@ module ProjectsHelper
     end
   end
 
-  def add_special_file_path(project, file_name:, commit_message: nil, target_branch: nil, context: nil)
+  def add_special_file_path(project, file_name:, commit_message: nil, branch_name: nil, context: nil)
     namespace_project_new_blob_path(
       project.namespace,
       project,
       project.default_branch || 'master',
       file_name:      file_name,
       commit_message: commit_message || "Add #{file_name.downcase}",
-      target_branch: target_branch,
+      branch_name: branch_name,
       context: context
     )
   end
@@ -430,13 +430,22 @@ module ProjectsHelper
   end
 
   def visibility_select_options(project, selected_level)
-    levels_options_array = Gitlab::VisibilityLevel.values.map do |level|
-      [
+    level_options = Gitlab::VisibilityLevel.values.each_with_object([]) do |level, level_options|
+      next if restricted_levels.include?(level)
+
+      level_options << [
         visibility_level_label(level),
         { data: { description: visibility_level_description(level, project) } },
         level
       ]
     end
-    options_for_select(levels_options_array, selected_level)
+
+    options_for_select(level_options, selected_level)
+  end
+
+  def restricted_levels
+    return [] if current_user.admin?
+
+    current_application_settings.restricted_visibility_levels || []
   end
 end
diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb
index 8c02b4061ca..979264c9421 100644
--- a/app/helpers/snippets_helper.rb
+++ b/app/helpers/snippets_helper.rb
@@ -42,7 +42,7 @@ module SnippetsHelper
         0,
         lined_content.size,
         surrounding_lines
-      ) if line.include?(query)
+      ) if line.downcase.include?(query.downcase)
     end
 
     used_lines.uniq.sort
diff --git a/app/helpers/sorting_helper.rb b/app/helpers/sorting_helper.rb
index 3a5d1b97c36..2fda98cae90 100644
--- a/app/helpers/sorting_helper.rb
+++ b/app/helpers/sorting_helper.rb
@@ -62,6 +62,14 @@ module SortingHelper
     }
   end
 
+  def branches_sort_options_hash
+    {
+      sort_value_name => sort_title_name,
+      sort_value_recently_updated => sort_title_recently_updated,
+      sort_value_oldest_updated => sort_title_oldest_updated
+    }
+  end
+
   def sort_title_priority
     'Priority'
   end
diff --git a/app/helpers/tree_helper.rb b/app/helpers/tree_helper.rb
index 4a76c679bad..f1dab60524e 100644
--- a/app/helpers/tree_helper.rb
+++ b/app/helpers/tree_helper.rb
@@ -35,7 +35,7 @@ module TreeHelper
   end
 
   def on_top_of_branch?(project = @project, ref = @ref)
-    project.repository.branch_names.include?(ref)
+    project.repository.branch_exists?(ref)
   end
 
   def can_edit_tree?(project = nil, ref = nil)
diff --git a/app/models/abuse_report.rb b/app/models/abuse_report.rb
index 2340453831e..0d7c2d20029 100644
--- a/app/models/abuse_report.rb
+++ b/app/models/abuse_report.rb
@@ -16,7 +16,7 @@ class AbuseReport < ActiveRecord::Base
 
   def remove_user(deleted_by:)
     user.block
-    DeleteUserWorker.perform_async(deleted_by.id, user.id, delete_solo_owned_groups: true)
+    DeleteUserWorker.perform_async(deleted_by.id, user.id, delete_solo_owned_groups: true, hard_delete: true)
   end
 
   def notify
diff --git a/app/models/application_setting.rb b/app/models/application_setting.rb
index 2961e16f5e0..dd1a6922968 100644
--- a/app/models/application_setting.rb
+++ b/app/models/application_setting.rb
@@ -238,7 +238,8 @@ class ApplicationSetting < ActiveRecord::Base
       terminal_max_session_time: 0,
       two_factor_grace_period: 48,
       user_default_external: false,
-      polling_interval_multiplier: 1
+      polling_interval_multiplier: 1,
+      usage_ping_enabled: true
     }
   end
 
diff --git a/app/models/concerns/issuable.rb b/app/models/concerns/issuable.rb
index 3d2258d5e3e..26dbf4d9570 100644
--- a/app/models/concerns/issuable.rb
+++ b/app/models/concerns/issuable.rb
@@ -23,7 +23,7 @@ module Issuable
 
   included do
     cache_markdown_field :title, pipeline: :single_line
-    cache_markdown_field :description
+    cache_markdown_field :description, issuable_state_filter_enabled: true
 
     belongs_to :author, class_name: "User"
     belongs_to :assignee, class_name: "User"
diff --git a/app/models/identity.rb b/app/models/identity.rb
index 3bacc450e6e..920a25932b4 100644
--- a/app/models/identity.rb
+++ b/app/models/identity.rb
@@ -7,6 +7,8 @@ class Identity < ActiveRecord::Base
   validates :extern_uid, allow_blank: true, uniqueness: { scope: :provider }
   validates :user_id, uniqueness: { scope: :provider }
 
+  scope :with_extern_uid, ->(provider, extern_uid) { where(extern_uid: extern_uid, provider: provider) }
+
   def ldap?
     provider.starts_with?('ldap')
   end
diff --git a/app/models/note.rb b/app/models/note.rb
index 630d0adbece..e720bfba030 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -16,7 +16,7 @@ class Note < ActiveRecord::Base
 
   ignore_column :original_discussion_id
 
-  cache_markdown_field :note, pipeline: :note
+  cache_markdown_field :note, pipeline: :note, issuable_state_filter_enabled: true
 
   # Attribute containing rendered and redacted Markdown as generated by
   # Banzai::ObjectRenderer.
diff --git a/app/models/project_services/chat_notification_service.rb b/app/models/project_services/chat_notification_service.rb
index fa782c6fbb7..f2dfb87dbda 100644
--- a/app/models/project_services/chat_notification_service.rb
+++ b/app/models/project_services/chat_notification_service.rb
@@ -22,7 +22,7 @@ class ChatNotificationService < Service
   end
 
   def can_test?
-    valid?
+    super && valid?
   end
 
   def self.supported_events
diff --git a/app/models/repository.rb b/app/models/repository.rb
index 2b11ed6128e..7bb874d7744 100644
--- a/app/models/repository.rb
+++ b/app/models/repository.rb
@@ -19,7 +19,7 @@ class Repository
   #
   # For example, for entry `:readme` there's a method called `readme` which
   # stores its data in the `readme` cache key.
-  CACHED_METHODS = %i(size commit_count readme version contribution_guide
+  CACHED_METHODS = %i(size commit_count readme contribution_guide
                       changelog license_blob license_key gitignore koding_yml
                       gitlab_ci_yml branch_names tag_names branch_count
                       tag_count avatar exists? empty? root_ref).freeze
@@ -32,7 +32,6 @@ class Repository
     changelog: :changelog,
     license: %i(license_blob license_key),
     contributing: :contribution_guide,
-    version: :version,
     gitignore: :gitignore,
     koding: :koding_yml,
     gitlab_ci: :gitlab_ci_yml,
@@ -109,7 +108,7 @@ class Repository
       offset: offset,
       after: after,
       before: before,
-      follow: path.present?,
+      follow: Array(path).length == 1,
       skip_merges: skip_merges
     }
 
@@ -530,11 +529,6 @@ class Repository
   end
   cache_method :readme
 
-  def version
-    file_on_head(:version)
-  end
-  cache_method :version
-
   def contribution_guide
     file_on_head(:contributing)
   end
diff --git a/app/models/spam_log.rb b/app/models/spam_log.rb
index 3b8b9833565..dd21ee15c6c 100644
--- a/app/models/spam_log.rb
+++ b/app/models/spam_log.rb
@@ -3,9 +3,9 @@ class SpamLog < ActiveRecord::Base
 
   validates :user, presence: true
 
-  def remove_user
+  def remove_user(deleted_by:)
     user.block
-    user.destroy
+    DeleteUserWorker.perform_async(deleted_by.id, user.id, delete_solo_owned_groups: true, hard_delete: true)
   end
 
   def text
diff --git a/app/models/user.rb b/app/models/user.rb
index 457ba05fb04..2d85bf8df26 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -197,7 +197,7 @@ class User < ActiveRecord::Base
   scope :admins, -> { where(admin: true) }
   scope :blocked, -> { with_states(:blocked, :ldap_blocked) }
   scope :external, -> { where(external: true) }
-  scope :active, -> { with_state(:active) }
+  scope :active, -> { with_state(:active).non_internal }
   scope :not_in_project, ->(project) { project.users.present? ? where("id not in (:ids)", ids: project.users.map(&:id) ) : all }
   scope :without_projects, -> { where('id NOT IN (SELECT DISTINCT(user_id) FROM members WHERE user_id IS NOT NULL AND requested_at IS NULL)') }
   scope :todo_authors, ->(user_id, state) { where(id: Todo.where(user_id: user_id, state: state).select(:author_id)) }
diff --git a/app/serializers/cohort_activity_month_entity.rb b/app/serializers/cohort_activity_month_entity.rb
new file mode 100644
index 00000000000..e6788a8b596
--- /dev/null
+++ b/app/serializers/cohort_activity_month_entity.rb
@@ -0,0 +1,11 @@
+class CohortActivityMonthEntity < Grape::Entity
+  include ActionView::Helpers::NumberHelper
+
+  expose :total do |cohort_activity_month|
+    number_with_delimiter(cohort_activity_month[:total])
+  end
+
+  expose :percentage do |cohort_activity_month|
+    number_to_percentage(cohort_activity_month[:percentage], precision: 0)
+  end
+end
diff --git a/app/serializers/cohort_entity.rb b/app/serializers/cohort_entity.rb
new file mode 100644
index 00000000000..7cdba5b0484
--- /dev/null
+++ b/app/serializers/cohort_entity.rb
@@ -0,0 +1,17 @@
+class CohortEntity < Grape::Entity
+  include ActionView::Helpers::NumberHelper
+
+  expose :registration_month do |cohort|
+    cohort[:registration_month].strftime('%b %Y')
+  end
+
+  expose :total do |cohort|
+    number_with_delimiter(cohort[:total])
+  end
+
+  expose :inactive do |cohort|
+    number_with_delimiter(cohort[:inactive])
+  end
+
+  expose :activity_months, using: CohortActivityMonthEntity
+end
diff --git a/app/serializers/cohorts_entity.rb b/app/serializers/cohorts_entity.rb
new file mode 100644
index 00000000000..98f5995ba6f
--- /dev/null
+++ b/app/serializers/cohorts_entity.rb
@@ -0,0 +1,4 @@
+class CohortsEntity < Grape::Entity
+  expose :months_included
+  expose :cohorts, using: CohortEntity
+end
diff --git a/app/serializers/cohorts_serializer.rb b/app/serializers/cohorts_serializer.rb
new file mode 100644
index 00000000000..fe9367b13d8
--- /dev/null
+++ b/app/serializers/cohorts_serializer.rb
@@ -0,0 +1,3 @@
+class CohortsSerializer < AnalyticsGenericSerializer
+  entity CohortsEntity
+end
diff --git a/app/serializers/status_entity.rb b/app/serializers/status_entity.rb
index dfd9d1584a1..944472f3e51 100644
--- a/app/serializers/status_entity.rb
+++ b/app/serializers/status_entity.rb
@@ -1,8 +1,12 @@
 class StatusEntity < Grape::Entity
   include RequestAwareEntity
 
-  expose :icon, :favicon, :text, :label, :group
+  expose :icon, :text, :label, :group
 
   expose :has_details?, as: :has_details
   expose :details_path
+
+  expose :favicon do |status|
+    ActionController::Base.helpers.image_path(File.join('ci_favicons', "#{status.favicon}.ico"))
+  end
 end
diff --git a/app/services/cohorts_service.rb b/app/services/cohorts_service.rb
new file mode 100644
index 00000000000..6781533af28
--- /dev/null
+++ b/app/services/cohorts_service.rb
@@ -0,0 +1,100 @@
+class CohortsService
+  MONTHS_INCLUDED = 12
+
+  def execute
+    {
+      months_included: MONTHS_INCLUDED,
+      cohorts: cohorts
+    }
+  end
+
+  # Get an array of hashes that looks like:
+  #
+  #     [
+  #       {
+  #         registration_month: Date.new(2017, 3),
+  #         activity_months: [3, 2, 1],
+  #         total: 3
+  #         inactive: 0
+  #      },
+  #      etc.
+  #
+  # The `months` array is always from oldest to newest, so it's always
+  # non-strictly decreasing from left to right.
+  def cohorts
+    months = Array.new(MONTHS_INCLUDED) { |i| i.months.ago.beginning_of_month.to_date }
+
+    Array.new(MONTHS_INCLUDED) do
+      registration_month = months.last
+      activity_months = running_totals(months, registration_month)
+
+      # Even if no users registered in this month, we always want to have a
+      # value to fill in the table.
+      inactive = counts_by_month[[registration_month, nil]].to_i
+
+      months.pop
+
+      {
+        registration_month: registration_month,
+        activity_months: activity_months,
+        total: activity_months.first[:total],
+        inactive: inactive
+      }
+    end
+  end
+
+  private
+
+  # Calculate a running sum of active users, so users active in later months
+  # count as active in this month, too. Start with the most recent month first,
+  # for calculating the running totals, and then reverse for displaying in the
+  # table.
+  #
+  # Each month has a total, and a percentage of the overall total, as keys.
+  def running_totals(all_months, registration_month)
+    month_totals =
+      all_months
+        .map { |activity_month| counts_by_month[[registration_month, activity_month]] }
+        .reduce([]) { |result, total| result << result.last.to_i + total.to_i }
+        .reverse
+
+    overall_total = month_totals.first
+
+    month_totals.map do |total|
+      { total: total, percentage: total.zero? ? 0 : 100 * total / overall_total }
+    end
+  end
+
+  # Get a hash that looks like:
+  #
+  #     {
+  #       [created_at_month, last_activity_on_month] => count,
+  #       [created_at_month, last_activity_on_month_2] => count_2,
+  #       # etc.
+  #     }
+  #
+  # created_at_month can never be nil, but last_activity_on_month can (when a
+  # user has never logged in, just been created). This covers the last
+  # MONTHS_INCLUDED months.
+  def counts_by_month
+    @counts_by_month ||=
+      begin
+        created_at_month = column_to_date('created_at')
+        last_activity_on_month = column_to_date('last_activity_on')
+
+        User
+          .where('created_at > ?', MONTHS_INCLUDED.months.ago.end_of_month)
+          .group(created_at_month, last_activity_on_month)
+          .reorder("#{created_at_month} ASC", "#{last_activity_on_month} ASC")
+          .count
+      end
+  end
+
+  def column_to_date(column)
+    if Gitlab::Database.postgresql?
+      "CAST(DATE_TRUNC('month', #{column}) AS date)"
+    else
+      "STR_TO_DATE(DATE_FORMAT(#{column}, '%Y-%m-01'), '%Y-%m-%d')"
+    end
+  end
+end
diff --git a/app/services/commits/change_service.rb b/app/services/commits/change_service.rb
index 1297a792259..a48d6a976f0 100644
--- a/app/services/commits/change_service.rb
+++ b/app/services/commits/change_service.rb
@@ -1,69 +1,27 @@
 module Commits
-  class ChangeService < ::BaseService
-    ValidationError = Class.new(StandardError)
-    ChangeError = Class.new(StandardError)
+  class ChangeService < Commits::CreateService
+    def initialize(*args)
+      super
 
-    def execute
-      @start_project = params[:start_project] || @project
-      @start_branch = params[:start_branch]
-      @target_branch = params[:target_branch]
       @commit = params[:commit]
-
-      check_push_permissions
-
-      commit
-    rescue Repository::CommitError, Gitlab::Git::Repository::InvalidBlobName, GitHooksService::PreReceiveError,
-           ValidationError, ChangeError => ex
-      error(ex.message)
     end
 
     private
 
-    def commit
-      raise NotImplementedError
-    end
-
     def commit_change(action)
       raise NotImplementedError unless repository.respond_to?(action)
 
-      validate_target_branch if different_branch?
-
       repository.public_send(
         action,
         current_user,
         @commit,
-        @target_branch,
+        @branch_name,
         start_project: @start_project,
         start_branch_name: @start_branch)
-
-      success
     rescue Repository::CreateTreeError
       error_msg = "Sorry, we cannot #{action.to_s.dasherize} this #{@commit.change_type_title(current_user)} automatically.
-                     A #{action.to_s.dasherize} may have already been performed with this #{@commit.change_type_title(current_user)}, or a more recent commit may have updated some of its content."
+                   This #{@commit.change_type_title(current_user)} may already have been #{action.to_s.dasherize}ed, or a more recent commit may have updated some of its content."
       raise ChangeError, error_msg
     end
-
-    def check_push_permissions
-      allowed = ::Gitlab::UserAccess.new(current_user, project: project).can_push_to_branch?(@target_branch)
-
-      unless allowed
-        raise ValidationError.new('You are not allowed to push into this branch')
-      end
-
-      true
-    end
-
-    def validate_target_branch
-      result = ValidateNewBranchService.new(@project, current_user)
-        .execute(@target_branch)
-
-      if result[:status] == :error
-        raise ChangeError, "There was an error creating the source branch: #{result[:message]}"
-      end
-    end
-
-    def different_branch?
-      @start_branch != @target_branch || @start_project != @project
-    end
   end
 end
diff --git a/app/services/commits/cherry_pick_service.rb b/app/services/commits/cherry_pick_service.rb
index 605cca36f9c..320e229560d 100644
--- a/app/services/commits/cherry_pick_service.rb
+++ b/app/services/commits/cherry_pick_service.rb
@@ -1,6 +1,6 @@
 module Commits
   class CherryPickService < ChangeService
-    def commit
+    def create_commit!
       commit_change(:cherry_pick)
     end
   end
diff --git a/app/services/commits/create_service.rb b/app/services/commits/create_service.rb
new file mode 100644
index 00000000000..c58f04a252b
--- /dev/null
+++ b/app/services/commits/create_service.rb
@@ -0,0 +1,74 @@
+module Commits
+  class CreateService < ::BaseService
+    ValidationError = Class.new(StandardError)
+    ChangeError = Class.new(StandardError)
+
+    def initialize(*args)
+      super
+
+      @start_project = params[:start_project] || @project
+      @start_branch = params[:start_branch]
+      @branch_name = params[:branch_name]
+    end
+
+    def execute
+      validate!
+
+      new_commit = create_commit!
+
+      success(result: new_commit)
+    rescue ValidationError, ChangeError, Gitlab::Git::Index::IndexError, Repository::CommitError, GitHooksService::PreReceiveError => ex
+      error(ex.message)
+    end
+
+    private
+
+    def create_commit!
+      raise NotImplementedError
+    end
+
+    def raise_error(message)
+      raise ValidationError, message
+    end
+
+    def different_branch?
+      @start_branch != @branch_name || @start_project != @project
+    end
+
+    def validate!
+      validate_permissions!
+      validate_on_branch!
+      validate_branch_existance!
+
+      validate_new_branch_name! if different_branch?
+    end
+
+    def validate_permissions!
+      allowed = ::Gitlab::UserAccess.new(current_user, project: project).can_push_to_branch?(@branch_name)
+
+      unless allowed
+        raise_error("You are not allowed to push into this branch")
+      end
+    end
+
+    def validate_on_branch!
+      if !@start_project.empty_repo? && !@start_project.repository.branch_exists?(@start_branch)
+        raise_error('You can only create or edit files when you are on a branch')
+      end
+    end
+
+    def validate_branch_existance!
+      if !project.empty_repo? && different_branch? && repository.branch_exists?(@branch_name)
+        raise_error("A branch called '#{@branch_name}' already exists. Switch to that branch in order to make changes")
+      end
+    end
+
+    def validate_new_branch_name!
+      result = ValidateNewBranchService.new(project, current_user).execute(@branch_name)
+
+      if result[:status] == :error
+        raise_error("Something went wrong when we tried to create '#{@branch_name}' for you: #{result[:message]}")
+      end
+    end
+  end
+end
diff --git a/app/services/commits/revert_service.rb b/app/services/commits/revert_service.rb
index addd55cb32f..dc27399e047 100644
--- a/app/services/commits/revert_service.rb
+++ b/app/services/commits/revert_service.rb
@@ -1,6 +1,6 @@
 module Commits
   class RevertService < ChangeService
-    def commit
+    def create_commit!
       commit_change(:revert)
     end
   end
diff --git a/app/services/delete_merged_branches_service.rb b/app/services/delete_merged_branches_service.rb
index 1b5623baebe..3b611588466 100644
--- a/app/services/delete_merged_branches_service.rb
+++ b/app/services/delete_merged_branches_service.rb
@@ -8,9 +8,20 @@ class DeleteMergedBranchesService < BaseService
 
     branches = project.repository.branch_names
     branches = branches.select { |branch| project.repository.merged_to_root_ref?(branch) }
+    # Prevent deletion of branches relevant to open merge requests
+    branches -= merge_request_branch_names
 
     branches.each do |branch|
       DeleteBranchService.new(project, current_user).execute(branch)
     end
   end
+
+  private
+
+  def merge_request_branch_names
+    # reorder(nil) is necessary for SELECT DISTINCT because default scope adds an ORDER BY
+    source_names = project.origin_merge_requests.opened.reorder(nil).uniq.pluck(:source_branch)
+    target_names = project.merge_requests.opened.reorder(nil).uniq.pluck(:target_branch)
+    (source_names + target_names).uniq
+  end
 end
diff --git a/app/services/event_create_service.rb b/app/services/event_create_service.rb
index e24cc66e0fe..0f3a485a3fd 100644
--- a/app/services/event_create_service.rb
+++ b/app/services/event_create_service.rb
@@ -72,6 +72,8 @@ class EventCreateService
 
   def push(project, current_user, push_data)
     create_event(project, current_user, Event::PUSHED, data: push_data)
+
+    Users::ActivityService.new(current_user, 'push').execute
   end
 
   private
diff --git a/app/services/files/base_service.rb b/app/services/files/base_service.rb
index c8a60422bf4..38231f66009 100644
--- a/app/services/files/base_service.rb
+++ b/app/services/files/base_service.rb
@@ -1,79 +1,17 @@
 module Files
-  class BaseService < ::BaseService
-    ValidationError = Class.new(StandardError)
-
-    def execute
-      @start_project = params[:start_project] || @project
-      @start_branch = params[:start_branch]
-      @target_branch = params[:target_branch]
+  class BaseService < Commits::CreateService
+    def initialize(*args)
+      super
 
+      @author_email = params[:author_email]
+      @author_name = params[:author_name]
       @commit_message = params[:commit_message]
-      @file_path      = params[:file_path]
-      @previous_path  = params[:previous_path]
-      @file_content   = if params[:file_content_encoding] == 'base64'
-                          Base64.decode64(params[:file_content])
-                        else
-                          params[:file_content]
-                        end
-      @last_commit_sha = params[:last_commit_sha]
-      @author_email    = params[:author_email]
-      @author_name     = params[:author_name]
-
-      # Validate parameters
-      validate
-
-      # Create new branch if it different from start_branch
-      validate_target_branch if different_branch?
-
-      result = commit
-      if result
-        success(result: result)
-      else
-        error('Something went wrong. Your changes were not committed')
-      end
-    rescue Repository::CommitError, Gitlab::Git::Repository::InvalidBlobName, GitHooksService::PreReceiveError, ValidationError => ex
-      error(ex.message)
-    end
-
-    private
-
-    def different_branch?
-      @start_branch != @target_branch || @start_project != @project
-    end
-
-    def file_has_changed?
-      return false unless @last_commit_sha && last_commit
-
-      @last_commit_sha != last_commit.sha
-    end
-
-    def raise_error(message)
-      raise ValidationError.new(message)
-    end
-
-    def validate
-      allowed = ::Gitlab::UserAccess.new(current_user, project: project).can_push_to_branch?(@target_branch)
-
-      unless allowed
-        raise_error("You are not allowed to push into this branch")
-      end
-
-      if !@start_project.empty_repo? && !@start_project.repository.branch_exists?(@start_branch)
-        raise ValidationError, 'You can only create or edit files when you are on a branch'
-      end
-
-      if !project.empty_repo? && different_branch? && repository.branch_exists?(@branch_name)
-        raise ValidationError, "A branch called #{@branch_name} already exists. Switch to that branch in order to make changes"
-      end
-    end
 
-    def validate_target_branch
-      result = ValidateNewBranchService.new(project, current_user).
-        execute(@target_branch)
+      @file_path = params[:file_path]
+      @previous_path = params[:previous_path]
 
-      if result[:status] == :error
-        raise_error("Something went wrong when we tried to create #{@target_branch} for you: #{result[:message]}")
-      end
+      @file_content = params[:file_content]
+      @file_content = Base64.decode64(@file_content) if params[:file_content_encoding] == 'base64'
     end
   end
 end
diff --git a/app/services/files/create_dir_service.rb b/app/services/files/create_dir_service.rb
index 083ffdc634c..8ecac6115bd 100644
--- a/app/services/files/create_dir_service.rb
+++ b/app/services/files/create_dir_service.rb
@@ -1,26 +1,15 @@
 module Files
   class CreateDirService < Files::BaseService
-    def commit
+    def create_commit!
       repository.create_dir(
         current_user,
         @file_path,
         message: @commit_message,
-        branch_name: @target_branch,
+        branch_name: @branch_name,
         author_email: @author_email,
         author_name: @author_name,
         start_project: @start_project,
         start_branch_name: @start_branch)
     end
-
-    def validate
-      super
-
-      unless @file_path =~ Gitlab::Regex.file_path_regex
-        raise_error(
-          'Your changes could not be committed, because the file path ' +
-          Gitlab::Regex.file_path_regex_message
-        )
-      end
-    end
   end
 end
diff --git a/app/services/files/create_service.rb b/app/services/files/create_service.rb
index 65b5537fb68..00a8dcf0934 100644
--- a/app/services/files/create_service.rb
+++ b/app/services/files/create_service.rb
@@ -1,48 +1,16 @@
 module Files
   class CreateService < Files::BaseService
-    def commit
+    def create_commit!
       repository.create_file(
         current_user,
         @file_path,
         @file_content,
         message: @commit_message,
-        branch_name: @target_branch,
+        branch_name: @branch_name,
         author_email: @author_email,
         author_name: @author_name,
         start_project: @start_project,
         start_branch_name: @start_branch)
     end
-
-    def validate
-      super
-
-      if @file_content.nil?
-        raise_error("You must provide content.")
-      end
-
-      if @file_path =~ Gitlab::Regex.directory_traversal_regex
-        raise_error(
-          'Your changes could not be committed, because the file name ' +
-          Gitlab::Regex.directory_traversal_regex_message
-        )
-      end
-
-      unless @file_path =~ Gitlab::Regex.file_path_regex
-        raise_error(
-          'Your changes could not be committed, because the file name ' +
-          Gitlab::Regex.file_path_regex_message
-        )
-      end
-
-      unless project.empty_repo?
-        @file_path.slice!(0) if @file_path.start_with?('/')
-
-        blob = repository.blob_at_branch(@start_branch, @file_path)
-
-        if blob
-          raise_error('Your changes could not be committed because a file with the same name already exists')
-        end
-      end
-    end
   end
 end
diff --git a/app/services/files/destroy_service.rb b/app/services/files/delete_service.rb
index e294659bc98..7952e5c95d4 100644
--- a/app/services/files/destroy_service.rb
+++ b/app/services/files/delete_service.rb
@@ -1,11 +1,11 @@
 module Files
-  class DestroyService < Files::BaseService
-    def commit
+  class DeleteService < Files::BaseService
+    def create_commit!
       repository.delete_file(
         current_user,
         @file_path,
         message: @commit_message,
-        branch_name: @target_branch,
+        branch_name: @branch_name,
         author_email: @author_email,
         author_name: @author_name,
         start_project: @start_project,
diff --git a/app/services/files/multi_service.rb b/app/services/files/multi_service.rb
index 700f9f4f6f0..bfacc462847 100644
--- a/app/services/files/multi_service.rb
+++ b/app/services/files/multi_service.rb
@@ -1,14 +1,10 @@
 module Files
   class MultiService < Files::BaseService
-    FileChangedError = Class.new(StandardError)
-
-    ACTIONS = %w[create update delete move].freeze
-
-    def commit
+    def create_commit!
       repository.multi_action(
         user: current_user,
         message: @commit_message,
-        branch_name: @target_branch,
+        branch_name: @branch_name,
         actions: params[:actions],
         author_email: @author_email,
         author_name: @author_name,
@@ -19,122 +15,17 @@ module Files
 
     private
 
-    def validate
+    def validate!
       super
 
-      params[:actions].each_with_index do |action, index|
-        if ACTIONS.include?(action[:action].to_s)
-          action[:action] = action[:action].to_sym
-        else
-          raise_error("Unknown action type `#{action[:action]}`.")
-        end
-
-        unless action[:file_path].present?
-          raise_error("You must specify a file_path.")
-        end
-
-        action[:file_path].slice!(0) if action[:file_path] && action[:file_path].start_with?('/')
-        action[:previous_path].slice!(0) if action[:previous_path] && action[:previous_path].start_with?('/')
-
-        regex_check(action[:file_path])
-        regex_check(action[:previous_path]) if action[:previous_path]
-
-        if project.empty_repo? && action[:action] != :create
-          raise_error("No files to #{action[:action]}.")
-        end
-
-        validate_file_exists(action)
-
-        case action[:action]
-        when :create
-          validate_create(action)
-        when :update
-          validate_update(action)
-        when :delete
-          validate_delete(action)
-        when :move
-          validate_move(action, index)
-        end
-      end
-    end
-
-    def validate_file_exists(action)
-      return if action[:action] == :create
-
-      file_path = action[:file_path]
-      file_path = action[:previous_path] if action[:action] == :move
-
-      blob = repository.blob_at_branch(params[:branch], file_path)
-
-      unless blob
-        raise_error("File to be #{action[:action]}d `#{file_path}` does not exist.")
+      params[:actions].each do |action|
+        validate_action!(action)
       end
     end
 
-    def last_commit
-      Gitlab::Git::Commit.last_for_path(repository, @start_branch, @file_path)
-    end
-
-    def regex_check(file)
-      if file =~ Gitlab::Regex.directory_traversal_regex
-        raise_error(
-          'Your changes could not be committed, because the file name, `' +
-          file +
-          '` ' +
-          Gitlab::Regex.directory_traversal_regex_message
-        )
-      end
-
-      unless file =~ Gitlab::Regex.file_path_regex
-        raise_error(
-          'Your changes could not be committed, because the file name, `' +
-          file +
-          '` ' +
-          Gitlab::Regex.file_path_regex_message
-        )
-      end
-    end
-
-    def validate_create(action)
-      return if project.empty_repo?
-
-      if repository.blob_at_branch(params[:branch], action[:file_path])
-        raise_error("Your changes could not be committed because a file with the name `#{action[:file_path]}` already exists.")
-      end
-
-      if action[:content].nil?
-        raise_error("You must provide content.")
-      end
-    end
-
-    def validate_update(action)
-      if action[:content].nil?
-        raise_error("You must provide content.")
-      end
-
-      if file_has_changed?
-        raise FileChangedError.new("You are attempting to update a file `#{action[:file_path]}` that has changed since you started editing it.")
-      end
-    end
-
-    def validate_delete(action)
-    end
-
-    def validate_move(action, index)
-      if action[:previous_path].nil?
-        raise_error("You must supply the original file path when moving file `#{action[:file_path]}`.")
-      end
-
-      blob = repository.blob_at_branch(params[:branch], action[:file_path])
-
-      if blob
-        raise_error("Move destination `#{action[:file_path]}` already exists.")
-      end
-
-      if action[:content].nil?
-        blob = repository.blob_at_branch(params[:branch], action[:previous_path])
-        blob.load_all_data!(repository) if blob.truncated?
-        params[:actions][index][:content] = blob.data
+    def validate_action!(action)
+      unless Gitlab::Git::Index::ACTIONS.include?(action[:action].to_s)
+        raise_error("Unknown action '#{action[:action]}'")
       end
     end
   end
diff --git a/app/services/files/update_service.rb b/app/services/files/update_service.rb
index fbbab97632e..f23a9f6d57c 100644
--- a/app/services/files/update_service.rb
+++ b/app/services/files/update_service.rb
@@ -2,10 +2,16 @@ module Files
   class UpdateService < Files::BaseService
     FileChangedError = Class.new(StandardError)
 
-    def commit
+    def initialize(*args)
+      super
+
+      @last_commit_sha = params[:last_commit_sha]
+    end
+
+    def create_commit!
       repository.update_file(current_user, @file_path, @file_content,
                              message: @commit_message,
-                             branch_name: @target_branch,
+                             branch_name: @branch_name,
                              previous_path: @previous_path,
                              author_email: @author_email,
                              author_name: @author_name,
@@ -15,21 +21,23 @@ module Files
 
     private
 
-    def validate
-      super
-
-      if @file_content.nil?
-        raise_error("You must provide content.")
-      end
+    def file_has_changed?
+      return false unless @last_commit_sha && last_commit
 
-      if file_has_changed?
-        raise FileChangedError.new("You are attempting to update a file that has changed since you started editing it.")
-      end
+      @last_commit_sha != last_commit.sha
     end
 
     def last_commit
       @last_commit ||= Gitlab::Git::Commit.
         last_for_path(@start_project.repository, @start_branch, @file_path)
     end
+
+    def validate!
+      super
+
+      if file_has_changed?
+        raise FileChangedError, "You are attempting to update a file that has changed since you started editing it."
+      end
+    end
   end
 end
diff --git a/app/services/projects/import_service.rb b/app/services/projects/import_service.rb
index 4c72d5e117d..eea17e24903 100644
--- a/app/services/projects/import_service.rb
+++ b/app/services/projects/import_service.rb
@@ -59,7 +59,6 @@ module Projects
       project.repository.add_remote(project.import_type, project.import_url)
       project.repository.set_remote_as_mirror(project.import_type)
       project.repository.fetch_remote(project.import_type, forced: true)
-      project.repository.remove_remote(project.import_type)
     end
 
     def import_data
diff --git a/app/services/search/global_service.rb b/app/services/search/global_service.rb
index 8409b592b72..ff188102b62 100644
--- a/app/services/search/global_service.rb
+++ b/app/services/search/global_service.rb
@@ -7,16 +7,13 @@ module Search
     end
 
     def execute
-      group = Group.find_by(id: params[:group_id]) if params[:group_id].present?
-      projects = ProjectsFinder.new(current_user: current_user).execute
-
-      if group
-        projects = projects.inside_path(group.full_path)
-      end
-
       Gitlab::SearchResults.new(current_user, projects, params[:search])
     end
 
+    def projects
+      @projects ||= ProjectsFinder.new(current_user: current_user).execute
+    end
+
     def scope
       @scope ||= begin
         allowed_scopes = %w[issues merge_requests milestones]
diff --git a/app/services/search/group_service.rb b/app/services/search/group_service.rb
new file mode 100644
index 00000000000..29478e3251f
--- /dev/null
+++ b/app/services/search/group_service.rb
@@ -0,0 +1,18 @@
+module Search
+  class GroupService < Search::GlobalService
+    attr_accessor :group
+
+    def initialize(user, group, params)
+      super(user, params)
+
+      @group = group
+    end
+
+    def projects
+      return Project.none unless group
+      return @projects if defined? @projects
+
+      @projects = super.inside_path(group.full_path)
+    end
+  end
+end
diff --git a/app/services/search_service.rb b/app/services/search_service.rb
index 8d46a8dab3e..22736c71725 100644
--- a/app/services/search_service.rb
+++ b/app/services/search_service.rb
@@ -54,6 +54,8 @@ class SearchService
         Search::ProjectService.new(project, current_user, params)
       elsif show_snippets?
         Search::SnippetService.new(current_user, params)
+      elsif group
+        Search::GroupService.new(current_user, group, params)
       else
         Search::GlobalService.new(current_user, params)
       end
diff --git a/app/services/users/activity_service.rb b/app/services/users/activity_service.rb
new file mode 100644
index 00000000000..facf21a7f5c
--- /dev/null
+++ b/app/services/users/activity_service.rb
@@ -0,0 +1,22 @@
+module Users
+  class ActivityService
+    def initialize(author, activity)
+      @author = author.respond_to?(:user) ? author.user : author
+      @activity = activity
+    end
+
+    def execute
+      return unless @author && @author.is_a?(User)
+
+      record_activity
+    end
+
+    private
+
+    def record_activity
+      Gitlab::UserActivities.record(@author.id)
+
+      Rails.logger.debug("Recorded activity: #{@activity} for User ID: #{@author.id} (username: #{@author.username}")
+    end
+  end
+end
diff --git a/app/services/users/destroy_service.rb b/app/services/users/destroy_service.rb
index ba58b174cc0..9eb6a600f6b 100644
--- a/app/services/users/destroy_service.rb
+++ b/app/services/users/destroy_service.rb
@@ -26,7 +26,7 @@ module Users
         ::Projects::DestroyService.new(project, current_user, skip_repo: true).execute
       end
 
-      MigrateToGhostUserService.new(user).execute
+      MigrateToGhostUserService.new(user).execute unless options[:hard_delete]
 
       # Destroy the namespace after destroying the user since certain methods may depend on the namespace existing
       namespace = user.namespace
diff --git a/app/services/validate_new_branch_service.rb b/app/services/validate_new_branch_service.rb
index 2f61be184ce..d232e85cd33 100644
--- a/app/services/validate_new_branch_service.rb
+++ b/app/services/validate_new_branch_service.rb
@@ -8,10 +8,7 @@ class ValidateNewBranchService < BaseService
       return error('Branch name is invalid')
     end
 
-    repository = project.repository
-    existing_branch = repository.find_branch(branch_name)
-
-    if existing_branch
+    if project.repository.branch_exists?(branch_name)
       return error('Branch already exists')
     end
 
diff --git a/app/views/admin/application_settings/_form.html.haml b/app/views/admin/application_settings/_form.html.haml
index f4ba44096d3..0dc1103eece 100644
--- a/app/views/admin/application_settings/_form.html.haml
+++ b/app/views/admin/application_settings/_form.html.haml
@@ -477,7 +477,7 @@
           diagrams in Asciidoc documents using an external PlantUML service.
 
   %fieldset
-    %legend Usage statistics
+    %legend#usage-statistics Usage statistics
     .form-group
       .col-sm-offset-2.col-sm-10
         .checkbox
@@ -486,6 +486,19 @@
             Version check enabled
           .help-block
             Let GitLab inform you when an update is available.
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :usage_ping_enabled do
+            = f.check_box :usage_ping_enabled
+            Usage ping enabled
+            = link_to icon('question-circle'), help_page_path("user/admin_area/settings/usage_statistics", anchor: "usage-data")
+          .help-block
+            Every week GitLab will report license usage back to GitLab, Inc.
+            Disable this option if you do not want this to occur. To see the
+            JSON payload that will be sent, visit the
+            = succeed '.' do
+              = link_to "Cohorts page", admin_cohorts_path(anchor: 'usage-ping')
 
   %fieldset
     %legend Email
diff --git a/app/views/admin/cohorts/_cohorts_table.html.haml b/app/views/admin/cohorts/_cohorts_table.html.haml
new file mode 100644
index 00000000000..701a4e62b39
--- /dev/null
+++ b/app/views/admin/cohorts/_cohorts_table.html.haml
@@ -0,0 +1,28 @@
+.bs-callout.clearfix
+  %p
+    User cohorts are shown for the last #{@cohorts[:months_included]}
+    months. Only users with activity are counted in the cohort total; inactive
+    users are counted separately.
+    = link_to icon('question-circle'), help_page_path('user/admin_area/user_cohorts', anchor: 'cohorts'), title: 'About this feature', target: '_blank'
+
+.table-holder
+  %table.table
+    %thead
+      %tr
+        %th Registration month
+        %th Inactive users
+        %th Cohort total
+        - @cohorts[:months_included].times do |i|
+          %th Month #{i}
+    %tbody
+      - @cohorts[:cohorts].each do |cohort|
+        %tr
+          %td= cohort[:registration_month]
+          %td= cohort[:inactive]
+          %td= cohort[:total]
+          - cohort[:activity_months].each do |activity_month|
+            %td
+              - next if cohort[:total] == '0'
+              = activity_month[:percentage]
+              %br
+              = activity_month[:total]
diff --git a/app/views/admin/cohorts/_usage_ping.html.haml b/app/views/admin/cohorts/_usage_ping.html.haml
new file mode 100644
index 00000000000..73aa95d84f1
--- /dev/null
+++ b/app/views/admin/cohorts/_usage_ping.html.haml
@@ -0,0 +1,10 @@
+%h2#usage-ping Usage ping
+
+.bs-callout.clearfix
+  %p
+    User cohorts are shown because the usage ping is enabled. The data sent with
+    this is shown below. To disable this, visit
+    = succeed '.' do
+      = link_to 'application settings', admin_application_settings_path(anchor: 'usage-statistics')
+
+%pre.usage-data.js-syntax-highlight.code.highlight{ data: { endpoint: usage_data_admin_application_settings_path(format: :html, pretty: true) } }
diff --git a/app/views/admin/cohorts/index.html.haml b/app/views/admin/cohorts/index.html.haml
new file mode 100644
index 00000000000..46fe12a5a99
--- /dev/null
+++ b/app/views/admin/cohorts/index.html.haml
@@ -0,0 +1,16 @@
+- @no_container = true
+= render "admin/dashboard/head"
+
+%div{ class: container_class }
+  - if @cohorts
+    = render 'cohorts_table'
+    = render 'usage_ping'
+  - else
+    .bs-callout.bs-callout-warning.clearfix
+      %p
+        User cohorts are only shown when the
+        = link_to 'usage ping', help_page_path('user/admin_area/usage_statistics'), target: '_blank'
+        is enabled. To enable it and see user cohorts,
+        visit
+        = succeed '.' do
+          = link_to 'application settings', admin_application_settings_path(anchor: 'usage-statistics')
diff --git a/app/views/admin/dashboard/_head.html.haml b/app/views/admin/dashboard/_head.html.haml
index 7893c1dee97..163bd5662b0 100644
--- a/app/views/admin/dashboard/_head.html.haml
+++ b/app/views/admin/dashboard/_head.html.haml
@@ -27,3 +27,7 @@
           = link_to admin_runners_path, title: 'Runners' do
             %span
               Runners
+        = nav_link path: 'cohorts#index' do
+          = link_to admin_cohorts_path, title: 'Cohorts' do
+            %span
+              Cohorts
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index 3ca45fbf751..9aabfb49a29 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -1,8 +1,9 @@
 - grouped_emojis = awardable.grouped_awards(with_thumbs: inline)
+- user_authored = awardable.user_authored?(current_user)
 .awards.js-awards-block{ class: ("hidden" if !inline && grouped_emojis.empty?), data: { award_url: toggle_award_url(awardable) } }
   - awards_sort(grouped_emojis).each do |emoji, awards|
     %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button",
-      class: (award_state_class(awards, current_user)),
+      class: [(award_state_class(awards, current_user)), (award_user_authored_class(emoji) if user_authored)],
       data: { placement: "bottom", title: award_user_list(awards, current_user) } }
       = emoji_icon(emoji)
       %span.award-control-text.js-counter
@@ -12,6 +13,7 @@
     .award-menu-holder.js-award-holder
       %button.btn.award-control.has-tooltip.js-add-award{ type: 'button',
         'aria-label': 'Add emoji',
+        class: ("js-user-authored" if user_authored),
         data: { title: 'Add emoji', placement: "bottom" } }
         %span{ class: "award-control-icon award-control-icon-neutral" }= custom_icon('emoji_slightly_smiling_face')
         %span{ class: "award-control-icon award-control-icon-positive" }= custom_icon('emoji_smiley')
diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml
index 700c5e61a14..ea8bbe92d86 100644
--- a/app/views/help/_shortcuts.html.haml
+++ b/app/views/help/_shortcuts.html.haml
@@ -318,3 +318,11 @@
                   %td.shortcut
                     .key l
                   %td Change Label
+              %tbody.hidden-shortcut.wiki{ style: 'display:none' }
+                %tr
+                  %th
+                  %th Wiki pages
+                %tr
+                  %td.shortcut
+                    .key e
+                  %td Edit wiki page
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index a9893dea68f..66f75f1c2bf 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -67,6 +67,11 @@
                 = icon('caret-down')
               .dropdown-menu-nav.dropdown-menu-align-right
                 %ul
+                  %li.current-user
+                    .user-name.bold
+                      = current_user.name
+                    @#{current_user.username}
+                  %li.divider
                   %li
                     = link_to "Profile", current_user, class: 'profile-link', aria: { label: "Profile" }, data: { user: current_user.username }
                   %li
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index e34cddeb3e2..37429c7cfc0 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -11,13 +11,13 @@
           Project
 
     - if project_nav_tab? :files
-      = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file commit commits compare repositories tags branches releases graphs network)) do
+      = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file commit commits compare projects/repositories tags branches releases graphs network)) do
         = link_to project_files_path(@project), title: 'Repository',  class: 'shortcuts-tree' do
           %span
             Repository
 
     - if project_nav_tab? :container_registry
-      = nav_link(controller: %w(container_registry)) do
+      = nav_link(controller: %w[projects/registry/repositories]) do
         = link_to project_container_registry_path(@project), title: 'Container Registry', class: 'shortcuts-container-registry' do
           %span
             Registry
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index d8ef64ceb72..9846f01603f 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -74,7 +74,7 @@
         %span.help-block This email will be displayed on your public profile.
       .form-group
         = f.label :preferred_language, class: "label-light"
-        = f.select :preferred_language, Gitlab::I18n::AVAILABLE_LANGUAGES.map { |lang| [_(lang[0]), lang[1]] },
+        = f.select :preferred_language, Gitlab::I18n::AVAILABLE_LANGUAGES.map { |value, label| [_(label), value] },
           {}, class: "select2"
       .form-group
         = f.label :skype, class: "label-light"
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index 4b26f944733..4af62461151 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -9,7 +9,7 @@
   - if @conflict
     .alert.alert-danger
       Someone edited the file the same time you did. Please check out
-      = link_to "the file", namespace_project_blob_path(@project.namespace, @project, tree_join(@target_branch, @file_path)), target: "_blank", rel: 'noopener noreferrer'
+      = link_to "the file", namespace_project_blob_path(@project.namespace, @project, tree_join(@branch_name, @file_path)), target: "_blank", rel: 'noopener noreferrer'
       and make sure your changes will not unintentionally remove theirs.
   .editor-title-row
     %h3.page-title.blob-edit-page-title
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index b6738c3380f..b9b3f3ec7a3 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/app/views/projects/blob/show.html.haml
@@ -8,7 +8,7 @@
   #tree-holder.tree-holder
     = render 'blob', blob: @blob
 
-  - if can_edit_blob?(@blob)
+  - if can_modify_blob?(@blob)
     = render 'projects/blob/remove'
 
     - title = "Replace #{@blob.name}"
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index bd1f2d96f56..91b86280e4c 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -15,16 +15,14 @@
       .dropdown.inline>
         %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
           %span.light
-            = projects_sort_options_hash[@sort]
+            = branches_sort_options_hash[@sort]
           = icon('chevron-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
-          %li
-            = link_to filter_branches_path(sort: sort_value_name) do
-              = sort_title_name
-            = link_to filter_branches_path(sort: sort_value_recently_updated) do
-              = sort_title_recently_updated
-            = link_to filter_branches_path(sort: sort_value_oldest_updated) do
-              = sort_title_oldest_updated
+        %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+          %li.dropdown-header
+            Sort by
+          - branches_sort_options_hash.each do |value, title|
+            %li
+              = link_to title, filter_branches_path(sort: value), class: ("is-active" if @sort == value)
 
       - if can? current_user, :push_code, @project
         = link_to namespace_project_merged_branches_path(@project.namespace, @project), class: 'btn btn-inverted btn-remove has-tooltip', title: "Delete all branches that are merged into '#{@project.repository.root_ref}'", method: :delete, data: { confirm: "Deleting the merged branches cannot be undone. Are you sure?", container: 'body' } do
diff --git a/app/views/projects/builds/show.html.haml b/app/views/projects/builds/show.html.haml
index 0faad57a312..7cb2ec83cc7 100644
--- a/app/views/projects/builds/show.html.haml
+++ b/app/views/projects/builds/show.html.haml
@@ -71,11 +71,11 @@
                   = custom_icon('scroll_down_hover_active')
         #up-build-trace
         %pre.build-trace#build-trace
-          .js-truncated-info.truncated-info.hidden
-            %span<
-              Showing last
-              %span.js-truncated-info-size><
-              KiB of log
+          .js-truncated-info.truncated-info.hidden<
+            Showing last
+            %span.js-truncated-info-size.truncated-info-size><
+            KiB of log -
+            %a.js-raw-link.raw-link{ :href => raw_namespace_project_build_path(@project.namespace, @project, @build) }>< Complete Raw
           %code.bash.js-build-output
           .build-loader-animation.js-build-refresh
 
diff --git a/app/views/projects/diffs/_content.html.haml b/app/views/projects/diffs/_content.html.haml
index 5c38b5ad9c0..438a98c3e95 100644
--- a/app/views/projects/diffs/_content.html.haml
+++ b/app/views/projects/diffs/_content.html.haml
@@ -4,7 +4,7 @@
   - if diff_file.too_large?
     .nothing-here-block This diff could not be displayed because it is too large.
   - elsif blob.only_display_raw?
-    .nothing-here-block This file is too large to display.
+    .nothing-here-block The file could not be displayed because it is too large.
   - elsif blob_text_viewable?(blob)
     - if !project.repository.diffable?(blob)
       .nothing-here-block This diff was suppressed by a .gitattributes entry.
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
index 2e54af698aa..766f119116f 100644
--- a/app/views/projects/environments/metrics.html.haml
+++ b/app/views/projects/environments/metrics.html.haml
@@ -13,9 +13,6 @@
           Environment:
           = link_to @environment.name, environment_path(@environment)
 
-      .col-sm-6
-        .nav-controls
-          = render 'projects/deployments/actions', deployment: @environment.last_deployment
   .prometheus-state
     .js-getting-started.hidden
       .row
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 885795ccb5c..fcbd8829595 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -79,4 +79,5 @@
 
 = render 'shared/issuable/sidebar', issuable: @issue
 
+= page_specific_javascript_bundle_tag('common_vue')
 = page_specific_javascript_bundle_tag('issue_show')
diff --git a/app/views/projects/merge_requests/_new_submit.html.haml b/app/views/projects/merge_requests/_new_submit.html.haml
index 03069804c86..da79ca2ee75 100644
--- a/app/views/projects/merge_requests/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/_new_submit.html.haml
@@ -46,7 +46,7 @@
         -# This tab is always loaded via AJAX
       - if @pipelines.any?
         #pipelines.pipelines.tab-pane
-          = render 'projects/merge_requests/show/pipelines', endpoint: url_for(params.merge(format: :json))
+          = render 'projects/merge_requests/show/pipelines', endpoint: url_for(params.merge(format: :json)), disable_initialization: true
 
   .mr-loading-status
     = spinner
diff --git a/app/views/projects/merge_requests/show/_pipelines.html.haml b/app/views/projects/merge_requests/show/_pipelines.html.haml
index de4aa255bbd..2f1dbe87619 100644
--- a/app/views/projects/merge_requests/show/_pipelines.html.haml
+++ b/app/views/projects/merge_requests/show/_pipelines.html.haml
@@ -1,3 +1,4 @@
 - endpoint_path = local_assigns[:endpoint] || pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request, format: :json)
+- disable_initialization = local_assigns.fetch(:disable_initialization, false)
 
-= render 'projects/commit/pipelines_list', endpoint: endpoint_path
+= render 'projects/commit/pipelines_list', endpoint: endpoint_path, disable_initialization: disable_initialization
diff --git a/app/views/projects/notes/_comment_button.html.haml b/app/views/projects/notes/_comment_button.html.haml
index 6bb55f04b6e..29cf5825292 100644
--- a/app/views/projects/notes/_comment_button.html.haml
+++ b/app/views/projects/notes/_comment_button.html.haml
@@ -16,7 +16,7 @@
             %p
               Add a general comment to this #{noteable_name}.
 
-      %li.divider
+      %li.divider.droplab-item-ignore
 
       %li#discussion{ data: { value: 'DiscussionNote', 'submit-text' => 'Start discussion', 'close-text' => "Start discussion & close #{noteable_name}", 'reopen-text' => "Start discussion & reopen #{noteable_name}" } }
         %a{ href: '#' }
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index 1f021ad77e5..7cf604bb772 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -12,19 +12,21 @@
           = image_tag avatar_icon(note.author), alt: '', class: 'avatar s40'
     .timeline-content
       .note-header
-        %a.visible-xs{ href: user_path(note.author) }
-          = note.author.to_reference
-        = link_to_member(note.project, note.author, avatar: false, extra_class: 'hidden-xs')
-        .note-headline-light
-          %span.hidden-xs
-            = note.author.to_reference
-          - unless note.system
-            commented
-          - if note.system
-            %span.system-note-message
-              = note.redacted_note_html
-          %a{ href: "##{dom_id(note)}" }
-            = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
+        .note-header-info
+          %a{ href: user_path(note.author) }
+            %span.hidden-xs
+              = sanitize(note.author.name)
+            %span.note-headline-light
+              = note.author.to_reference
+          %span.note-headline-light
+            %span.note-headline-meta
+              - unless note.system
+                commented
+              - if note.system
+                %span.system-note-message
+                  = note.redacted_note_html
+              %a{ href: "##{dom_id(note)}" }
+                = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
         - unless note.system?
           .note-actions
             - access = note_max_access_for_user(note)
@@ -59,7 +61,8 @@
 
             - if current_user
               - if note.emoji_awardable?
-                = link_to '#', title: 'Award Emoji', class: 'note-action-button note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do
+                - user_authored = note.user_authored?(current_user)
+                = link_to '#', title: 'Award Emoji', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored}", data: { position: 'right' } do
                   = icon('spinner spin')
                   %span{ class: "link-highlight award-control-icon-neutral" }= custom_icon('emoji_slightly_smiling_face')
                   %span{ class: "link-highlight award-control-icon-positive" }= custom_icon('emoji_smiley')
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 3d73284699f..38237d2d97d 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -17,4 +17,4 @@
   "ci-lint-path" => ci_lint_path } }
 
 = page_specific_javascript_bundle_tag('common_vue')
-= page_specific_javascript_bundle_tag('vue_pipelines')
+= page_specific_javascript_bundle_tag('pipelines')
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index fd7bd21677c..d6c4195e2d0 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -70,7 +70,7 @@
             = link_to 'Set up Koding', add_koding_stack_path(@project)
         - if @repository.gitlab_ci_yml.blank? && @project.deployment_service.present?
           %li.missing
-            = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml', commit_message: 'Set up auto deploy', target_branch: 'auto-deploy', context: 'autodeploy') do
+            = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml', commit_message: 'Set up auto deploy', branch_name: 'auto-deploy', context: 'autodeploy') do
               Set up auto deploy
 
   - if @repository.commit
diff --git a/app/views/projects/snippets/edit.html.haml b/app/views/projects/snippets/edit.html.haml
index fb39028529d..24b92094b7d 100644
--- a/app/views/projects/snippets/edit.html.haml
+++ b/app/views/projects/snippets/edit.html.haml
@@ -1,4 +1,4 @@
-- page_title "Edit", @snippet.title, "Snippets"
+- page_title "Edit", "#{@snippet.title} (#{@snippet.to_reference})", "Snippets"
 
 %h3.page-title
   Edit Snippet
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index e35385f4cab..7c6be003d4c 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -1,4 +1,4 @@
-- page_title @snippet.title, "Snippets"
+- page_title "#{@snippet.title} (#{@snippet.to_reference})", "Snippets"
 
 = render 'shared/snippets/header'
 
diff --git a/app/views/projects/variables/_table.html.haml b/app/views/projects/variables/_table.html.haml
index c7cebf45160..0ce597dcf21 100644
--- a/app/views/projects/variables/_table.html.haml
+++ b/app/views/projects/variables/_table.html.haml
@@ -14,7 +14,7 @@
           %tr
             %td.variable-key= variable.key
             %td.variable-value{ "data-value" => variable.value }******
-            %td
+            %td.variable-menu
               = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-edit" do
                 %span.sr-only
                   Update
diff --git a/app/views/projects/wikis/_main_links.html.haml b/app/views/projects/wikis/_main_links.html.haml
index 86178257af8..6a578dbf640 100644
--- a/app/views/projects/wikis/_main_links.html.haml
+++ b/app/views/projects/wikis/_main_links.html.haml
@@ -5,5 +5,5 @@
   = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
     Page history
   - if can?(current_user, :create_wiki, @project) && @page.latest?
-    = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn" do
+    = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn js-wiki-edit" do
       Edit
diff --git a/app/views/search/results/_issue.html.haml b/app/views/search/results/_issue.html.haml
index e010f21de5a..fc4385865a4 100644
--- a/app/views/search/results/_issue.html.haml
+++ b/app/views/search/results/_issue.html.haml
@@ -3,6 +3,8 @@
     = confidential_icon(issue)
     = link_to [issue.project.namespace.becomes(Namespace), issue.project, issue] do
       %span.term.str-truncated= issue.title
+    - if issue.closed?
+      %span.label.label-danger.prepend-left-5 Closed
     .pull-right ##{issue.iid}
   - if issue.description.present?
     .description.term
@@ -10,6 +12,3 @@
         = search_md_sanitize(issue, :description)
   %span.light
     #{issue.project.name_with_namespace}
-  - if issue.closed?
-    .pull-right
-      %span.label.label-danger Closed
diff --git a/app/views/search/results/_merge_request.html.haml b/app/views/search/results/_merge_request.html.haml
index 2e6adf3027c..9b583285d02 100644
--- a/app/views/search/results/_merge_request.html.haml
+++ b/app/views/search/results/_merge_request.html.haml
@@ -2,6 +2,10 @@
   %h4
     = link_to [merge_request.target_project.namespace.becomes(Namespace), merge_request.target_project, merge_request] do
       %span.term.str-truncated= merge_request.title
+    - if merge_request.merged?
+      %span.label.label-primary.prepend-left-5 Merged
+    - elsif merge_request.closed?
+      %span.label.label-danger.prepend-left-5 Closed
     .pull-right= merge_request.to_reference
   - if merge_request.description.present?
     .description.term
@@ -9,8 +13,3 @@
         = search_md_sanitize(merge_request, :description)
   %span.light
     #{merge_request.project.name_with_namespace}
-  .pull-right
-    - if merge_request.merged?
-      %span.label.label-primary Merged
-    - elsif merge_request.closed?
-      %span.label.label-danger Closed
diff --git a/app/views/shared/_branch_switcher.html.haml b/app/views/shared/_branch_switcher.html.haml
index 7799aff6b5b..69e3f3042a9 100644
--- a/app/views/shared/_branch_switcher.html.haml
+++ b/app/views/shared/_branch_switcher.html.haml
@@ -1,8 +1,8 @@
-- dropdown_toggle_text = @target_branch || tree_edit_branch
-= hidden_field_tag 'target_branch', dropdown_toggle_text
+- dropdown_toggle_text = @branch_name || tree_edit_branch
+= hidden_field_tag 'branch_name', dropdown_toggle_text
 
 .dropdown
-  = dropdown_toggle dropdown_toggle_text, { toggle: 'dropdown', selected: dropdown_toggle_text, field_name: 'target_branch', form_id: '.js-edit-blob-form', refs_url: namespace_project_branches_path(@project.namespace, @project) }, { toggle_class: 'js-project-branches-dropdown js-target-branch' }
+  = dropdown_toggle dropdown_toggle_text, { toggle: 'dropdown', selected: dropdown_toggle_text, field_name: 'branch_name', form_id: '.js-edit-blob-form', refs_url: namespace_project_branches_path(@project.namespace, @project) }, { toggle_class: 'js-project-branches-dropdown js-target-branch' }
   .dropdown-menu.dropdown-menu-selectable.dropdown-menu-paging.dropdown-menu-branches
     = render partial: 'shared/projects/blob/branch_page_default'
     = render partial: 'shared/projects/blob/branch_page_create'
diff --git a/app/views/shared/_new_commit_form.html.haml b/app/views/shared/_new_commit_form.html.haml
index 3ac5e15d1c4..0b37fe3013b 100644
--- a/app/views/shared/_new_commit_form.html.haml
+++ b/app/views/shared/_new_commit_form.html.haml
@@ -1,11 +1,11 @@
 = render 'shared/commit_message_container', placeholder: placeholder
 
 - if @project.empty_repo?
-  = hidden_field_tag 'target_branch', @ref
+  = hidden_field_tag 'branch_name', @ref
 - else
   - if can?(current_user, :push_code, @project)
     .form-group.branch
-      = label_tag 'target_branch', 'Target branch', class: 'control-label'
+      = label_tag 'branch_name', 'Target branch', class: 'control-label'
       .col-sm-10
         = render 'shared/branch_switcher'
 
@@ -16,7 +16,7 @@
               = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request', id: "create_merge_request-#{nonce}"
               Start a <strong>new merge request</strong> with these changes
   - else
-    = hidden_field_tag 'target_branch', @target_branch || tree_edit_branch
+    = hidden_field_tag 'branch_name', @branch_name || tree_edit_branch
     = hidden_field_tag 'create_merge_request', 1
 
   = hidden_field_tag 'original_branch', @ref, class: 'js-original-branch'
diff --git a/app/views/shared/_user_callout.html.haml b/app/views/shared/_user_callout.html.haml
index 8f1293adcb1..8308baa7829 100644
--- a/app/views/shared/_user_callout.html.haml
+++ b/app/views/shared/_user_callout.html.haml
@@ -3,12 +3,11 @@
     %button.btn.btn-default.close.js-close-callout{ type: 'button',
       'aria-label' => 'Dismiss customize experience box' }
       = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
-    .row
-      .col-sm-3.col-xs-12.svg-container
-        = custom_icon('icon_customization')
-      .col-sm-8.col-xs-12.inner-content
-        %h4
-          Customize your experience
-        %p
-          Change syntax themes, default project pages, and more in preferences.
-        = link_to 'Check it out', profile_preferences_path, class: 'btn btn-default js-close-callout'
+    .svg-container
+      = custom_icon('icon_customization')
+    .user-callout-copy
+      %h4
+        Customize your experience
+      %p
+        Change syntax themes, default project pages, and more in preferences.
+      = link_to 'Check it out', profile_preferences_path, class: 'btn btn-primary js-close-callout'
diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml
index 09f946f1d88..b361ec86ced 100644
--- a/app/views/shared/groups/_group.html.haml
+++ b/app/views/shared/groups/_group.html.haml
@@ -27,7 +27,8 @@
       = visibility_level_icon(group.visibility_level, fw: false)
 
   .avatar-container.s40
-    = image_tag group_icon(group), class: "avatar s40 hidden-xs"
+    = link_to group do
+      = image_tag group_icon(group), class: "avatar s40 hidden-xs"
   .title
     = link_to group_name, group, class: 'group-name'
 
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index b447996a8ab..f1350169bbe 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -12,13 +12,14 @@
             class: "check_all_issues left"
       .issues-other-filters.filtered-search-wrapper
         .filtered-search-box
-          = dropdown_tag(content_tag(:i, '', class: 'fa fa-history'),
-            options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
-            toggle_class: "filtered-search-history-dropdown-toggle-button",
-            dropdown_class: "filtered-search-history-dropdown",
-            content_class: "filtered-search-history-dropdown-content",
-            title: "Recent searches" }) do
-            .js-filtered-search-history-dropdown
+          - if type != :boards_modal && type != :boards
+            = dropdown_tag(content_tag(:i, '', class: 'fa fa-history'),
+              options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
+              toggle_class: "filtered-search-history-dropdown-toggle-button",
+              dropdown_class: "filtered-search-history-dropdown",
+              content_class: "filtered-search-history-dropdown-content",
+              title: "Recent searches" }) do
+              .js-filtered-search-history-dropdown
           .filtered-search-box-input-container
             .scroll-container
               %ul.tokens-container.list-unstyled
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 761f0b606b5..c3b40433c9a 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -12,10 +12,11 @@
   = cache(cache_key) do
     - if avatar
       .avatar-container.s40
-        - if use_creator_avatar
-          = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
-        - else
-          = project_icon(project, alt: '', class: 'avatar project-avatar s40')
+        = link_to project_path(project), class: dom_class(project) do
+          - if use_creator_avatar
+            = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
+          - else
+            = project_icon(project, alt: '', class: 'avatar project-avatar s40')
     .project-details
       %h3.prepend-top-0.append-bottom-0
         = link_to project_path(project), class: dom_class(project) do
diff --git a/app/views/snippets/edit.html.haml b/app/views/snippets/edit.html.haml
index 915bf98eb3e..18ebeb78f87 100644
--- a/app/views/snippets/edit.html.haml
+++ b/app/views/snippets/edit.html.haml
@@ -1,4 +1,4 @@
-- page_title "Edit", @snippet.title, "Snippets"
+- page_title "Edit", "#{@snippet.title} (#{@snippet.to_reference})", "Snippets"
 %h3.page-title
   Edit Snippet
 %hr
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index da9fb755a36..e5711ca79c7 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -1,4 +1,4 @@
-- page_title @snippet.title, "Snippets"
+- page_title "#{@snippet.title} (#{@snippet.to_reference})", "Snippets"
 
 = render 'shared/snippets/header'
 
diff --git a/app/workers/gitlab_usage_ping_worker.rb b/app/workers/gitlab_usage_ping_worker.rb
new file mode 100644
index 00000000000..2f02235b0ac
--- /dev/null
+++ b/app/workers/gitlab_usage_ping_worker.rb
@@ -0,0 +1,31 @@
+class GitlabUsagePingWorker
+  LEASE_TIMEOUT = 86400
+
+  include Sidekiq::Worker
+  include CronjobQueue
+  include HTTParty
+
+  def perform
+    return unless current_application_settings.usage_ping_enabled
+
+    # Multiple Sidekiq workers could run this. We should only do this at most once a day.
+    return unless try_obtain_lease
+
+    begin
+      HTTParty.post(url,
+                    body: Gitlab::UsageData.to_json(force_refresh: true),
+                    headers: { 'Content-type' => 'application/json' }
+                   )
+    rescue HTTParty::Error => e
+      Rails.logger.info "Unable to contact GitLab, Inc.: #{e}"
+    end
+  end
+
+  def try_obtain_lease
+    Gitlab::ExclusiveLease.new('gitlab_usage_ping_worker:ping', timeout: LEASE_TIMEOUT).try_obtain
+  end
+
+  def url
+    'https://version.gitlab.com/usage_data'
+  end
+end
diff --git a/app/workers/schedule_update_user_activity_worker.rb b/app/workers/schedule_update_user_activity_worker.rb
new file mode 100644
index 00000000000..6c2c3e437f3
--- /dev/null
+++ b/app/workers/schedule_update_user_activity_worker.rb
@@ -0,0 +1,10 @@
+class ScheduleUpdateUserActivityWorker
+  include Sidekiq::Worker
+  include CronjobQueue
+
+  def perform(batch_size = 500)
+    Gitlab::UserActivities.new.each_slice(batch_size) do |batch|
+      UpdateUserActivityWorker.perform_async(Hash[batch])
+    end
+  end
+end
diff --git a/app/workers/system_hook_worker.rb b/app/workers/system_hook_worker.rb
index baf2f12eeac..55d4e7d6dab 100644
--- a/app/workers/system_hook_worker.rb
+++ b/app/workers/system_hook_worker.rb
@@ -2,6 +2,8 @@ class SystemHookWorker
   include Sidekiq::Worker
   include DedicatedSidekiqQueue
 
+  sidekiq_options retry: 4
+
   def perform(hook_id, data, hook_name)
     SystemHook.find(hook_id).execute(data, hook_name)
   end
diff --git a/app/workers/update_user_activity_worker.rb b/app/workers/update_user_activity_worker.rb
new file mode 100644
index 00000000000..b3c2f13aa33
--- /dev/null
+++ b/app/workers/update_user_activity_worker.rb
@@ -0,0 +1,26 @@
+class UpdateUserActivityWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  def perform(pairs)
+    pairs = cast_data(pairs)
+    ids = pairs.keys
+    conditions = 'WHEN id = ? THEN ? ' * ids.length
+
+    User.where(id: ids).
+      update_all([
+        "last_activity_on = CASE #{conditions} ELSE last_activity_on END",
+        *pairs.to_a.flatten
+      ])
+
+    Gitlab::UserActivities.new.delete(*ids)
+  end
+
+  private
+
+  def cast_data(pairs)
+    pairs.each_with_object({}) do |(key, value), new_pairs|
+      new_pairs[key.to_i] = Time.at(value.to_i).to_s(:db)
+    end
+  end
+end