Merge commit 'abc61f260074663e5711d3814d9b7d301d07a259' into 9-3-stable

283 files changed, 7783 insertions, 4045 deletions

diff --git a/app/assets/images/i2p-step.svg b/app/assets/images/i2p-step.svg
new file mode 100644
index 00000000000..8886092ed82
--- /dev/null
+++ b/app/assets/images/i2p-step.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 120" enable-background="new 0 0 12 120">
+  <path d="m12 6c0-3.309-2.691-6-6-6s-6 2.691-6 6c0 2.967 2.167 5.431 5 5.91v108.09h2v-108.09c2.833-.479 5-2.943 5-5.91m-6 4c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4"/>
+</svg>
diff --git a/app/assets/javascripts/activities.js b/app/assets/javascripts/activities.js
index d816df831eb..5d060165f4b 100644
--- a/app/assets/javascripts/activities.js
+++ b/app/assets/javascripts/activities.js
@@ -5,7 +5,8 @@ import Cookies from 'js-cookie';
 
 class Activities {
   constructor() {
-    Pager.init(20, true, false, this.updateTooltips);
+    Pager.init(20, true, false, data => data, this.updateTooltips);
+
     $('.event-filter-link').on('click', (e) => {
       e.preventDefault();
       this.toggleFilter(e.currentTarget);
@@ -19,7 +20,7 @@ class Activities {
 
   reloadActivities() {
     $('.content_list').html('');
-    Pager.init(20, true, false, this.updateTooltips);
+    Pager.init(20, true, false, data => data, this.updateTooltips);
   }
 
   toggleFilter(sender) {
diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index e5f36c84987..6680834a8d1 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -1,148 +1,175 @@
-/* eslint-disable func-names, space-before-function-paren, quotes, object-shorthand, camelcase, no-var, comma-dangle, prefer-arrow-callback, quote-props, no-param-reassign, max-len */
-
-var Api = {
-  groupsPath: "/api/:version/groups.json",
-  groupPath: "/api/:version/groups/:id.json",
-  namespacesPath: "/api/:version/namespaces.json",
-  groupProjectsPath: "/api/:version/groups/:id/projects.json",
-  projectsPath: "/api/:version/projects.json?simple=true",
-  labelsPath: "/:namespace_path/:project_path/labels",
-  licensePath: "/api/:version/templates/licenses/:key",
-  gitignorePath: "/api/:version/templates/gitignores/:key",
-  gitlabCiYmlPath: "/api/:version/templates/gitlab_ci_ymls/:key",
-  dockerfilePath: "/api/:version/templates/dockerfiles/:key",
-  issuableTemplatePath: "/:namespace_path/:project_path/templates/:type/:key",
-  group: function(group_id, callback) {
-    var url = Api.buildUrl(Api.groupPath)
-      .replace(':id', group_id);
+import $ from 'jquery';
+
+const Api = {
+  groupsPath: '/api/:version/groups.json',
+  groupPath: '/api/:version/groups/:id.json',
+  namespacesPath: '/api/:version/namespaces.json',
+  groupProjectsPath: '/api/:version/groups/:id/projects.json',
+  projectsPath: '/api/:version/projects.json?simple=true',
+  labelsPath: '/:namespace_path/:project_path/labels',
+  licensePath: '/api/:version/templates/licenses/:key',
+  gitignorePath: '/api/:version/templates/gitignores/:key',
+  gitlabCiYmlPath: '/api/:version/templates/gitlab_ci_ymls/:key',
+  dockerfilePath: '/api/:version/templates/dockerfiles/:key',
+  issuableTemplatePath: '/:namespace_path/:project_path/templates/:type/:key',
+  usersPath: '/api/:version/users.json',
+
+  group(groupId, callback) {
+    const url = Api.buildUrl(Api.groupPath)
+      .replace(':id', groupId);
     return $.ajax({
-      url: url,
-      dataType: "json"
-    }).done(function(group) {
-      return callback(group);
-    });
+      url,
+      dataType: 'json',
+    })
+      .done(group => callback(group));
   },
+
   // Return groups list. Filtered by query
-  groups: function(query, options, callback) {
-    var url = Api.buildUrl(Api.groupsPath);
+  groups(query, options, callback) {
+    const url = Api.buildUrl(Api.groupsPath);
     return $.ajax({
-      url: url,
-      data: $.extend({
+      url,
+      data: Object.assign({
         search: query,
-        per_page: 20
+        per_page: 20,
       }, options),
-      dataType: "json"
-    }).done(function(groups) {
-      return callback(groups);
-    });
+      dataType: 'json',
+    })
+      .done(groups => callback(groups));
   },
+
   // Return namespaces list. Filtered by query
-  namespaces: function(query, callback) {
-    var url = Api.buildUrl(Api.namespacesPath);
+  namespaces(query, callback) {
+    const url = Api.buildUrl(Api.namespacesPath);
     return $.ajax({
-      url: url,
+      url,
       data: {
         search: query,
-        per_page: 20
+        per_page: 20,
       },
-      dataType: "json"
-    }).done(function(namespaces) {
-      return callback(namespaces);
-    });
+      dataType: 'json',
+    }).done(namespaces => callback(namespaces));
   },
+
   // Return projects list. Filtered by query
-  projects: function(query, options, callback) {
-    var url = Api.buildUrl(Api.projectsPath);
+  projects(query, options, callback) {
+    const url = Api.buildUrl(Api.projectsPath);
     return $.ajax({
-      url: url,
-      data: $.extend({
+      url,
+      data: Object.assign({
         search: query,
         per_page: 20,
-        membership: true
+        membership: true,
       }, options),
-      dataType: "json"
-    }).done(function(projects) {
-      return callback(projects);
-    });
+      dataType: 'json',
+    })
+      .done(projects => callback(projects));
   },
-  newLabel: function(namespace_path, project_path, data, callback) {
-    var url = Api.buildUrl(Api.labelsPath)
-      .replace(':namespace_path', namespace_path)
-      .replace(':project_path', project_path);
+
+  newLabel(namespacePath, projectPath, data, callback) {
+    const url = Api.buildUrl(Api.labelsPath)
+      .replace(':namespace_path', namespacePath)
+      .replace(':project_path', projectPath);
     return $.ajax({
-      url: url,
-      type: "POST",
-      data: { 'label': data },
-      dataType: "json"
-    }).done(function(label) {
-      return callback(label);
-    }).error(function(message) {
-      return callback(message.responseJSON);
-    });
+      url,
+      type: 'POST',
+      data: { label: data },
+      dataType: 'json',
+    })
+      .done(label => callback(label))
+      .error(message => callback(message.responseJSON));
   },
+
   // Return group projects list. Filtered by query
-  groupProjects: function(group_id, query, callback) {
-    var url = Api.buildUrl(Api.groupProjectsPath)
-      .replace(':id', group_id);
+  groupProjects(groupId, query, callback) {
+    const url = Api.buildUrl(Api.groupProjectsPath)
+      .replace(':id', groupId);
     return $.ajax({
-      url: url,
+      url,
       data: {
         search: query,
-        per_page: 20
+        per_page: 20,
       },
-      dataType: "json"
-    }).done(function(projects) {
-      return callback(projects);
-    });
+      dataType: 'json',
+    })
+      .done(projects => callback(projects));
   },
+
   // Return text for a specific license
-  licenseText: function(key, data, callback) {
-    var url = Api.buildUrl(Api.licensePath)
+  licenseText(key, data, callback) {
+    const url = Api.buildUrl(Api.licensePath)
       .replace(':key', key);
     return $.ajax({
-      url: url,
-      data: data
-    }).done(function(license) {
-      return callback(license);
-    });
+      url,
+      data,
+    })
+      .done(license => callback(license));
   },
-  gitignoreText: function(key, callback) {
-    var url = Api.buildUrl(Api.gitignorePath)
+
+  gitignoreText(key, callback) {
+    const url = Api.buildUrl(Api.gitignorePath)
       .replace(':key', key);
-    return $.get(url, function(gitignore) {
-      return callback(gitignore);
-    });
+    return $.get(url, gitignore => callback(gitignore));
   },
-  gitlabCiYml: function(key, callback) {
-    var url = Api.buildUrl(Api.gitlabCiYmlPath)
+
+  gitlabCiYml(key, callback) {
+    const url = Api.buildUrl(Api.gitlabCiYmlPath)
       .replace(':key', key);
-    return $.get(url, function(file) {
-      return callback(file);
-    });
+    return $.get(url, file => callback(file));
   },
-  dockerfileYml: function(key, callback) {
-    var url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
+
+  dockerfileYml(key, callback) {
+    const url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
     $.get(url, callback);
   },
-  issueTemplate: function(namespacePath, projectPath, key, type, callback) {
-    var url = Api.buildUrl(Api.issuableTemplatePath)
+
+  issueTemplate(namespacePath, projectPath, key, type, callback) {
+    const url = Api.buildUrl(Api.issuableTemplatePath)
       .replace(':key', key)
       .replace(':type', type)
       .replace(':project_path', projectPath)
       .replace(':namespace_path', namespacePath);
     $.ajax({
-      url: url,
-      dataType: 'json'
-    }).done(function(file) {
-      callback(null, file);
-    }).error(callback);
+      url,
+      dataType: 'json',
+    })
+      .done(file => callback(null, file))
+      .error(callback);
   },
-  buildUrl: function(url) {
+
+  users(query, options) {
+    const url = Api.buildUrl(this.usersPath);
+    return Api.wrapAjaxCall({
+      url,
+      data: Object.assign({
+        search: query,
+        per_page: 20,
+      }, options),
+      dataType: 'json',
+    });
+  },
+
+  buildUrl(url) {
+    let urlRoot = '';
     if (gon.relative_url_root != null) {
-      url = gon.relative_url_root + url;
+      urlRoot = gon.relative_url_root;
     }
-    return url.replace(':version', gon.api_version);
-  }
+    return urlRoot + url.replace(':version', gon.api_version);
+  },
+
+  wrapAjaxCall(options) {
+    return new Promise((resolve, reject) => {
+      // jQuery 2 is not Promises/A+ compatible (missing catch)
+      $.ajax(options) // eslint-disable-line promise/catch-or-return
+      .then(data => resolve(data),
+        (jqXHR, textStatus, errorThrown) => {
+          const error = new Error(`${options.url}: ${errorThrown}`);
+          error.textStatus = textStatus;
+          reject(error);
+        },
+      );
+    });
+  },
 };
 
-window.Api = Api;
+export default Api;
diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
index 23d91fdb259..36ce4fddb72 100644
--- a/app/assets/javascripts/behaviors/gl_emoji.js
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -88,6 +88,7 @@ function installGlEmojiElement() {
     const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
 
     if (
+      emojiUnicode &&
       isEmojiUnicode &&
       !isEmojiUnicodeSupported(generatedUnicodeSupportMap, emojiUnicode, unicodeVersion)
     ) {
diff --git a/app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js b/app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js
index 20ab2d7e827..4f8884d05ac 100644
--- a/app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js
+++ b/app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js
@@ -28,7 +28,8 @@ function isSkinToneComboEmoji(emojiUnicode) {
 // doesn't support the skin tone versions of horse racing
 const horseRacingCodePoint = 127943;// parseInt('1F3C7', 16)
 function isHorceRacingSkinToneComboEmoji(emojiUnicode) {
-  return Array.from(emojiUnicode)[0].codePointAt(0) === horseRacingCodePoint &&
+  const firstCharacter = Array.from(emojiUnicode)[0];
+  return firstCharacter && firstCharacter.codePointAt(0) === horseRacingCodePoint &&
     isSkinToneComboEmoji(emojiUnicode);
 }
 
diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
index cdbfe36ca1c..c17877a276d 100644
--- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
@@ -1,5 +1,3 @@
-/* global Flash */
-
 import sqljs from 'sql.js';
 import { template as _template } from 'underscore';
 
@@ -15,19 +13,27 @@ const PREVIEW_TEMPLATE = _template(`
 class BalsamiqViewer {
   constructor(viewer) {
     this.viewer = viewer;
-    this.endpoint = this.viewer.dataset.endpoint;
   }
 
-  loadFile() {
-    const xhr = new XMLHttpRequest();
+  loadFile(endpoint) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+
+      xhr.open('GET', endpoint, true);
+      xhr.responseType = 'arraybuffer';
+      xhr.onload = loadEvent => this.fileLoaded(loadEvent, resolve, reject);
+      xhr.onerror = reject;
+
+      xhr.send();
+    });
+  }
 
-    xhr.open('GET', this.endpoint, true);
-    xhr.responseType = 'arraybuffer';
+  fileLoaded(loadEvent, resolve, reject) {
+    if (loadEvent.target.status !== 200) return reject();
 
-    xhr.onload = this.renderFile.bind(this);
-    xhr.onerror = BalsamiqViewer.onError;
+    this.renderFile(loadEvent);
 
-    xhr.send();
+    return resolve();
   }
 
   renderFile(loadEvent) {
@@ -103,12 +109,6 @@ class BalsamiqViewer {
   static parseTitle(resource) {
     return JSON.parse(resource.values[0][2]).name;
   }
-
-  static onError() {
-    const flash = new Flash('Balsamiq file could not be loaded.');
-
-    return flash;
-  }
 }
 
 export default BalsamiqViewer;
diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js
index 1dacf84470f..8641a6fdae6 100644
--- a/app/assets/javascripts/blob/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq_viewer.js
@@ -1,6 +1,22 @@
+/* global Flash */
+
 import BalsamiqViewer from './balsamiq/balsamiq_viewer';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const balsamiqViewer = new BalsamiqViewer(document.getElementById('js-balsamiq-viewer'));
-  balsamiqViewer.loadFile();
-});
+function onError() {
+  const flash = new window.Flash('Balsamiq file could not be loaded.');
+
+  return flash;
+}
+
+function loadBalsamiqFile() {
+  const viewer = document.getElementById('js-balsamiq-viewer');
+
+  if (!(viewer instanceof Element)) return;
+
+  const endpoint = viewer.dataset.endpoint;
+
+  const balsamiqViewer = new BalsamiqViewer(viewer);
+  balsamiqViewer.loadFile(endpoint).catch(onError);
+}
+
+$(loadBalsamiqFile);
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js
index ab5b3751c4e..5ae30990aea 100644
--- a/app/assets/javascripts/blob/file_template_selector.js
+++ b/app/assets/javascripts/blob/file_template_selector.js
@@ -1,5 +1,3 @@
-/* global Api */
-
 export default class FileTemplateSelector {
   constructor(mediator) {
     this.mediator = mediator;
@@ -65,4 +63,3 @@ export default class FileTemplateSelector {
     this.reportSelection(opts);
   }
 }
-
diff --git a/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js b/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js
index f2f81af137b..9c41e429c8d 100644
--- a/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js
@@ -1,4 +1,4 @@
-/* global Api */
+import Api from '../../api';
 
 import FileTemplateSelector from '../file_template_selector';
 
diff --git a/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js b/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js
index 3cb7b960aaa..45fb614fe00 100644
--- a/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js
@@ -1,4 +1,4 @@
-/* global Api */
+import Api from '../../api';
 
 import FileTemplateSelector from '../file_template_selector';
 
diff --git a/app/assets/javascripts/blob/template_selectors/gitignore_selector.js b/app/assets/javascripts/blob/template_selectors/gitignore_selector.js
index 7efda8e7f50..a894953cc86 100644
--- a/app/assets/javascripts/blob/template_selectors/gitignore_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/gitignore_selector.js
@@ -1,4 +1,4 @@
-/* global Api */
+import Api from '../../api';
 
 import FileTemplateSelector from '../file_template_selector';
 
diff --git a/app/assets/javascripts/blob/template_selectors/license_selector.js b/app/assets/javascripts/blob/template_selectors/license_selector.js
index 1d757332f6c..b7c4da0f62e 100644
--- a/app/assets/javascripts/blob/template_selectors/license_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/license_selector.js
@@ -1,4 +1,4 @@
-/* global Api */
+import Api from '../../api';
 
 import FileTemplateSelector from '../file_template_selector';
 
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index d06387c0f4d..187fab084fd 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -1,17 +1,38 @@
 /* global Flash */
 export default class BlobViewer {
   constructor() {
+    BlobViewer.initAuxiliaryViewer();
+
+    this.initMainViewers();
+  }
+
+  static initAuxiliaryViewer() {
+    const auxiliaryViewer = document.querySelector('.blob-viewer[data-type="auxiliary"]');
+    if (!auxiliaryViewer) return;
+
+    BlobViewer.loadViewer(auxiliaryViewer);
+  }
+
+  initMainViewers() {
+    this.$fileHolder = $('.file-holder');
+    if (!this.$fileHolder.length) return;
+
     this.switcher = document.querySelector('.js-blob-viewer-switcher');
     this.switcherBtns = document.querySelectorAll('.js-blob-viewer-switch-btn');
     this.copySourceBtn = document.querySelector('.js-copy-blob-source-btn');
-    this.simpleViewer = document.querySelector('.blob-viewer[data-type="simple"]');
-    this.richViewer = document.querySelector('.blob-viewer[data-type="rich"]');
-    this.$fileHolder = $('.file-holder');
 
-    let initialViewerName = document.querySelector('.blob-viewer:not(.hidden)').getAttribute('data-type');
+    this.simpleViewer = this.$fileHolder[0].querySelector('.blob-viewer[data-type="simple"]');
+    this.richViewer = this.$fileHolder[0].querySelector('.blob-viewer[data-type="rich"]');
 
     this.initBindings();
 
+    this.switchToInitialViewer();
+  }
+
+  switchToInitialViewer() {
+    const initialViewer = this.$fileHolder[0].querySelector('.blob-viewer:not(.hidden)');
+    let initialViewerName = initialViewer.getAttribute('data-type');
+
     if (this.switcher && location.hash.indexOf('#L') === 0) {
       initialViewerName = 'simple';
     }
@@ -61,41 +82,13 @@ export default class BlobViewer {
     $(this.copySourceBtn).tooltip('fixTitle');
   }
 
-  loadViewer(viewerParam) {
-    const viewer = viewerParam;
-    const url = viewer.getAttribute('data-url');
-
-    if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
-      return;
-    }
-
-    viewer.setAttribute('data-loading', 'true');
-
-    $.ajax({
-      url,
-      dataType: 'JSON',
-    })
-    .fail(() => new Flash('Error loading source view'))
-    .done((data) => {
-      viewer.innerHTML = data.html;
-      $(viewer).syntaxHighlight();
-
-      viewer.setAttribute('data-loaded', 'true');
-
-      this.$fileHolder.trigger('highlight:line');
-      gl.utils.handleLocationHash();
-
-      this.toggleCopyButtonState();
-    });
-  }
-
   switchToViewer(name) {
-    const newViewer = document.querySelector(`.blob-viewer[data-type='${name}']`);
+    const newViewer = this.$fileHolder[0].querySelector(`.blob-viewer[data-type='${name}']`);
     if (this.activeViewer === newViewer) return;
 
     const oldButton = document.querySelector('.js-blob-viewer-switch-btn.active');
     const newButton = document.querySelector(`.js-blob-viewer-switch-btn[data-viewer='${name}']`);
-    const oldViewer = document.querySelector(`.blob-viewer:not([data-type='${name}'])`);
+    const oldViewer = this.$fileHolder[0].querySelector(`.blob-viewer:not([data-type='${name}'])`);
 
     if (oldButton) {
       oldButton.classList.remove('active');
@@ -116,6 +109,41 @@ export default class BlobViewer {
 
     this.toggleCopyButtonState();
 
-    this.loadViewer(newViewer);
+    BlobViewer.loadViewer(newViewer)
+    .then((viewer) => {
+      $(viewer).renderGFM();
+
+      this.$fileHolder.trigger('highlight:line');
+      gl.utils.handleLocationHash();
+
+      this.toggleCopyButtonState();
+    })
+    .catch(() => new Flash('Error loading viewer'));
+  }
+
+  static loadViewer(viewerParam) {
+    const viewer = viewerParam;
+    const url = viewer.getAttribute('data-url');
+
+    return new Promise((resolve, reject) => {
+      if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
+        resolve(viewer);
+        return;
+      }
+
+      viewer.setAttribute('data-loading', 'true');
+
+      $.ajax({
+        url,
+        dataType: 'JSON',
+      })
+      .fail(reject)
+      .done((data) => {
+        viewer.innerHTML = data.html;
+        viewer.setAttribute('data-loaded', 'true');
+
+        resolve(viewer);
+      });
+    });
   }
 }
diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index 88eb4251339..b94009ee76b 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -6,23 +6,22 @@ import Vue from 'vue';
 import VueResource from 'vue-resource';
 import FilteredSearchBoards from './filtered_search_boards';
 import eventHub from './eventhub';
-
-require('./models/issue');
-require('./models/label');
-require('./models/list');
-require('./models/milestone');
-require('./models/assignee');
-require('./stores/boards_store');
-require('./stores/modal_store');
-require('./services/board_service');
-require('./mixins/modal_mixins');
-require('./mixins/sortable_default_options');
-require('./filters/due_date_filters');
-require('./components/board');
-require('./components/board_sidebar');
-require('./components/new_list_dropdown');
-require('./components/modal/index');
-require('../vue_shared/vue_resource_interceptor');
+import './models/issue';
+import './models/label';
+import './models/list';
+import './models/milestone';
+import './models/assignee';
+import './stores/boards_store';
+import './stores/modal_store';
+import './services/board_service';
+import './mixins/modal_mixins';
+import './mixins/sortable_default_options';
+import './filters/due_date_filters';
+import './components/board';
+import './components/board_sidebar';
+import './components/new_list_dropdown';
+import './components/modal/index';
+import '../vue_shared/vue_resource_interceptor';
 
 Vue.use(VueResource);
 
@@ -71,6 +70,7 @@ $(() => {
       gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId);
 
       this.filterManager = new FilteredSearchBoards(Store.filter, true);
+      this.filterManager.setup();
 
       // Listen for updateTokens event
       eventHub.$on('updateTokens', this.updateTokens);
@@ -88,6 +88,8 @@ $(() => {
             if (list.type === 'closed') {
               list.position = Infinity;
               list.label = { description: 'Shows all closed issues. Moving an issue to this list closes it' };
+            } else if (list.type === 'backlog') {
+              list.position = -1;
             }
           });
 
@@ -128,7 +130,7 @@ $(() => {
     },
     computed: {
       disabled() {
-        return !this.store.lists.filter(list => list.type !== 'blank' && list.type !== 'done').length;
+        return !this.store.lists.filter(list => !list.preset).length;
       },
       tooltipTitle() {
         if (this.disabled) {
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 0d23bdeeb99..adb7360327c 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -1,11 +1,10 @@
 /* eslint-disable comma-dangle, space-before-function-paren, one-var */
 /* global Sortable */
 import Vue from 'vue';
+import AccessorUtilities from '../../lib/utils/accessor';
 import boardList from './board_list';
 import boardBlankState from './board_blank_state';
-
-require('./board_delete');
-require('./board_list');
+import './board_delete';
 
 const Store = gl.issueBoards.BoardsStore;
 
@@ -24,6 +23,10 @@ gl.issueBoards.Board = Vue.extend({
     disabled: Boolean,
     issueLinkBase: String,
     rootPath: String,
+    boardId: {
+      type: String,
+      required: true,
+    },
   },
   data () {
     return {
@@ -80,7 +83,16 @@ gl.issueBoards.Board = Vue.extend({
   methods: {
     showNewIssueForm() {
       this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
-    }
+    },
+    toggleExpanded(e) {
+      if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) {
+        this.list.isExpanded = !this.list.isExpanded;
+
+        if (AccessorUtilities.isLocalStorageAccessSafe()) {
+          localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded);
+        }
+      }
+    },
   },
   mounted () {
     this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
@@ -104,4 +116,11 @@ gl.issueBoards.Board = Vue.extend({
 
     this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
   },
+  created() {
+    if (this.list.isExpandable && AccessorUtilities.isLocalStorageAccessSafe()) {
+      const isCollapsed = localStorage.getItem(`boards.${this.boardId}.${this.list.type}.expanded`) === 'false';
+
+      this.list.isExpanded = !isCollapsed;
+    }
+  },
 });
diff --git a/app/assets/javascripts/boards/components/board_card.js b/app/assets/javascripts/boards/components/board_card.js
index f591134c548..079fb6438b9 100644
--- a/app/assets/javascripts/boards/components/board_card.js
+++ b/app/assets/javascripts/boards/components/board_card.js
@@ -1,4 +1,4 @@
-require('./issue_card_inner');
+import './issue_card_inner';
 
 const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/boards/components/board_list.js b/app/assets/javascripts/boards/components/board_list.js
index 49a775002c3..bebca17fb1e 100644
--- a/app/assets/javascripts/boards/components/board_list.js
+++ b/app/assets/javascripts/boards/components/board_list.js
@@ -2,6 +2,7 @@
 import boardNewIssue from './board_new_issue';
 import boardCard from './board_card';
 import eventHub from '../eventhub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
 const Store = gl.issueBoards.BoardsStore;
 
@@ -44,6 +45,7 @@ export default {
   components: {
     boardCard,
     boardNewIssue,
+    loadingIcon,
   },
   methods: {
     listHeight() {
@@ -55,6 +57,9 @@ export default {
     scrollTop() {
       return this.$refs.list.scrollTop + this.listHeight();
     },
+    scrollToTop() {
+      this.$refs.list.scrollTop = 0;
+    },
     loadNextPage() {
       const getIssues = this.list.nextPage();
       const loadingDone = () => {
@@ -106,6 +111,7 @@ export default {
   },
   created() {
     eventHub.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
+    eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop);
   },
   mounted() {
     const options = gl.issueBoards.getBoardSortableDefaultOptions({
@@ -148,6 +154,7 @@ export default {
   },
   beforeDestroy() {
     eventHub.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
+    eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop);
     this.$refs.list.removeEventListener('scroll', this.onScroll);
   },
   template: `
@@ -156,14 +163,13 @@ export default {
         class="board-list-loading text-center"
         aria-label="Loading issues"
         v-if="loading">
-        <i
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true">
-        </i>
+        <loading-icon />
       </div>
-      <board-new-issue
-        :list="list"
-        v-if="list.type !== 'closed' && showIssueForm"/>
+      <transition name="slide-down">
+        <board-new-issue
+          :list="list"
+          v-if="list.type !== 'closed' && showIssueForm"/>
+      </transition>
       <ul
         class="board-list"
         v-show="!loading"
@@ -184,12 +190,12 @@ export default {
           class="board-list-count text-center"
           v-if="showCount"
           data-id="-1">
-          <i
-            class="fa fa-spinner fa-spin"
-            aria-label="Loading more issues"
-            aria-hidden="true"
-            v-show="list.loadingMore">
-          </i>
+
+          <loading-icon
+            v-show="list.loadingMore"
+            label="Loading more issues"
+            />
+
           <span v-if="list.issues.length === list.issuesSize">
             Showing all issues
           </span>
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js b/app/assets/javascripts/boards/components/board_new_issue.js
index 1ce95b62138..b1c47b09c35 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js
+++ b/app/assets/javascripts/boards/components/board_new_issue.js
@@ -48,6 +48,7 @@ export default {
           this.error = true;
         });
 
+      eventHub.$emit(`scroll-board-list-${this.list.id}`);
       this.cancel();
     },
     cancel() {
@@ -75,6 +76,7 @@ export default {
           type="text"
           v-model="title"
           ref="input"
+          autocomplete="off"
           :id="list.id + '-title'" />
         <div class="clearfix prepend-top-10">
           <button class="btn btn-success pull-left"
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 60b58b6fd41..386102032cb 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -7,11 +7,9 @@
 
 import Vue from 'vue';
 import eventHub from '../../sidebar/event_hub';
-
 import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
 import Assignees from '../../sidebar/components/assignees/assignees';
-
-require('./sidebar/remove_issue');
+import './sidebar/remove_issue';
 
 const Store = gl.issueBoards.BoardsStore;
 
@@ -36,6 +34,9 @@ gl.issueBoards.BoardSidebar = Vue.extend({
     },
     assigneeId() {
       return this.issue.assignee ? this.issue.assignee.id : 0;
+    },
+    milestoneTitle() {
+      return this.issue.milestone ? this.issue.milestone.title : 'No Milestone';
     }
   },
   watch: {
@@ -62,18 +63,6 @@ gl.issueBoards.BoardSidebar = Vue.extend({
       },
       deep: true
     },
-    issue () {
-      if (this.showSidebar) {
-        this.$nextTick(() => {
-          $('.right-sidebar').getNiceScroll(0).doScrollTop(0, 0);
-          $('.right-sidebar').getNiceScroll().resize();
-        });
-      }
-
-      this.issue = this.detail.issue;
-      this.list = this.detail.list;
-    },
-    deep: true
   },
   methods: {
     closeSidebar () {
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index 710207db0c7..daef01bc93d 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../eventhub';
 
 const Store = gl.issueBoards.BoardsStore;
@@ -38,6 +39,9 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       maxCounter: 99,
     };
   },
+  components: {
+    userAvatarLink,
+  },
   computed: {
     numberOverLimit() {
       return this.issue.assignees.length - this.limitBeforeCounter;
@@ -146,23 +150,17 @@ gl.issueBoards.IssueCardInner = Vue.extend({
           </span>
         </h4>
         <div class="card-assignee">
-          <a
-            class="has-tooltip js-no-trigger"
-            :href="assigneeUrl(assignee)"
-            :title="assigneeUrlTitle(assignee)"
+          <user-avatar-link
             v-for="(assignee, index) in issue.assignees"
+            :key="assignee.id"
             v-if="shouldRenderAssignee(index)"
-            data-container="body"
-            data-placement="bottom"
-          >
-            <img
-              class="avatar avatar-inline s20"
-              :src="assignee.avatar"
-              width="20"
-              height="20"
-              :alt="avatarUrlTitle(assignee)"
-            />
-          </a>
+            class="js-no-trigger"
+            :link-href="assigneeUrl(assignee)"
+            :img-alt="avatarUrlTitle(assignee)"
+            :img-src="assignee.avatar"
+            :tooltip-text="assigneeUrlTitle(assignee)"
+            tooltip-placement="bottom"
+          />
           <span
             class="avatar-counter has-tooltip"
             :title="assigneeCounterTooltip"
diff --git a/app/assets/javascripts/boards/components/modal/filters.js b/app/assets/javascripts/boards/components/modal/filters.js
index b214b5a7199..56a0fde5a91 100644
--- a/app/assets/javascripts/boards/components/modal/filters.js
+++ b/app/assets/javascripts/boards/components/modal/filters.js
@@ -13,6 +13,7 @@ export default {
     FilteredSearchContainer.container = this.$el;
 
     this.filteredSearch = new FilteredSearchBoards(this.store);
+    this.filteredSearch.setup();
     this.filteredSearch.removeTokens();
     this.filteredSearch.handleInputPlaceholder();
     this.filteredSearch.toggleClearSearchButton();
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js
index ccd270b27da..478a1335b2b 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.js
@@ -2,8 +2,7 @@
 /* global Flash */
 
 import Vue from 'vue';
-
-require('./lists_dropdown');
+import './lists_dropdown';
 
 const ModalStore = gl.issueBoards.ModalStore;
 
@@ -27,7 +26,8 @@ gl.issueBoards.ModalFooter = Vue.extend({
   },
   methods: {
     addIssues() {
-      const list = this.modal.selectedList || this.state.lists[0];
+      const firstListIndex = 1;
+      const list = this.modal.selectedList || this.state.lists[firstListIndex];
       const selectedIssues = ModalStore.getSelectedIssues();
       const issueIds = selectedIssues.map(issue => issue.globalId);
 
diff --git a/app/assets/javascripts/boards/components/modal/header.js b/app/assets/javascripts/boards/components/modal/header.js
index e2b3f9ae7e2..31f59d295bf 100644
--- a/app/assets/javascripts/boards/components/modal/header.js
+++ b/app/assets/javascripts/boards/components/modal/header.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import modalFilters from './filters';
-
-require('./tabs');
+import './tabs';
 
 const ModalStore = gl.issueBoards.ModalStore;
 
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index a61cc7954a1..6356c266ee2 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -2,11 +2,11 @@
 
 import Vue from 'vue';
 import queryData from '../../utils/query_data';
-
-require('./header');
-require('./list');
-require('./footer');
-require('./empty_state');
+import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import './header';
+import './list';
+import './footer';
+import './empty_state';
 
 const ModalStore = gl.issueBoards.ModalStore;
 
@@ -137,6 +137,7 @@ gl.issueBoards.IssuesModal = Vue.extend({
     'modal-list': gl.issueBoards.ModalList,
     'modal-footer': gl.issueBoards.ModalFooter,
     'empty-state': gl.issueBoards.ModalEmptyState,
+    loadingIcon,
   },
   template: `
     <div
@@ -161,7 +162,7 @@ gl.issueBoards.IssuesModal = Vue.extend({
           class="add-issues-list text-center"
           v-if="loading || filterLoading">
           <div class="add-issues-list-loading">
-            <i class="fa fa-spinner fa-spin"></i>
+            <loading-icon />
           </div>
         </section>
         <modal-footer></modal-footer>
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js b/app/assets/javascripts/boards/components/modal/lists_dropdown.js
index 8cd15df90fa..4684ea76647 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js
@@ -11,7 +11,7 @@ gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
   },
   computed: {
     selected() {
-      return this.modal.selectedList || this.state.lists[0];
+      return this.modal.selectedList || this.state.lists[1];
     },
   },
   destroyed() {
diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js
index 1264280284c..b37698fe9ca 100644
--- a/app/assets/javascripts/boards/filtered_search_boards.js
+++ b/app/assets/javascripts/boards/filtered_search_boards.js
@@ -2,7 +2,7 @@
 import FilteredSearchContainer from '../filtered_search/container';
 
 export default class FilteredSearchBoards extends gl.FilteredSearchManager {
-  constructor(store, updateUrl = false) {
+  constructor(store, updateUrl = false, cantEdit = []) {
     super('boards');
 
     this.store = store;
@@ -11,6 +11,8 @@ export default class FilteredSearchBoards extends gl.FilteredSearchManager {
     // Issue boards is slightly different, we handle all the requests async
     // instead or reloading the page, we just re-fire the list ajax requests
     this.isHandledAsync = true;
+
+    this.cantEdit = cantEdit;
   }
 
   updateObject(path) {
@@ -40,4 +42,8 @@ export default class FilteredSearchBoards extends gl.FilteredSearchManager {
     // Get the placeholder back if search is empty
     this.filteredSearchInput.dispatchEvent(new Event('input'));
   }
+
+  canEdit(tokenName) {
+    return this.cantEdit.indexOf(tokenName) === -1;
+  }
 }
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index 90561d0f7a8..548de1a4c52 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -12,7 +12,9 @@ class List {
     this.position = obj.position;
     this.title = obj.title;
     this.type = obj.list_type;
-    this.preset = ['closed', 'blank'].indexOf(this.type) > -1;
+    this.preset = ['backlog', 'closed', 'blank'].indexOf(this.type) > -1;
+    this.isExpandable = ['backlog', 'closed'].indexOf(this.type) > -1;
+    this.isExpanded = true;
     this.page = 1;
     this.loading = true;
     this.loadingMore = false;
@@ -103,13 +105,19 @@ class List {
   }
 
   newIssue (issue) {
-    this.addIssue(issue);
+    this.addIssue(issue, null, 0);
     this.issuesSize += 1;
 
     return gl.boardService.newIssue(this.id, issue)
       .then((resp) => {
         const data = resp.json();
         issue.id = data.iid;
+      })
+      .then(() => {
+        if (this.issuesSize > 1) {
+          const moveBeforeIid = this.issues[1].id;
+          gl.boardService.moveIssue(issue.id, null, null, null, moveBeforeIid);
+        }
       });
   }
 
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index ad9997ac334..1e12d4ca415 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -22,6 +22,7 @@ gl.issueBoards.BoardsStore = {
   create () {
     this.state.lists = [];
     this.filter.path = gl.utils.getUrlParamsArray().join('&');
+    this.detail = { issue: {} };
   },
   addList (listObj, defaultAvatar) {
     const list = new List(listObj, defaultAvatar);
@@ -31,10 +32,14 @@ gl.issueBoards.BoardsStore = {
   },
   new (listObj) {
     const list = this.addList(listObj);
+    const backlogList = this.findList('type', 'backlog', 'backlog');
 
     list
       .save()
       .then(() => {
+        // Remove any new issues from the backlog
+        // as they will be visible in the new list
+        list.issues.forEach(backlogList.removeIssue.bind(backlogList));
         this.state.lists = _.sortBy(this.state.lists, 'position');
       })
       .catch(() => {
@@ -47,7 +52,7 @@ gl.issueBoards.BoardsStore = {
   },
   shouldAddBlankState () {
     // Decide whether to add the blank state
-    return !(this.state.lists.filter(list => list.type !== 'closed')[0]);
+    return !(this.state.lists.filter(list => list.type !== 'backlog' && list.type !== 'closed')[0]);
   },
   addBlankState () {
     if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
@@ -100,7 +105,7 @@ gl.issueBoards.BoardsStore = {
       issueTo.removeLabel(listFrom.label);
     }
 
-    if (listTo.type === 'closed') {
+    if (listTo.type === 'closed' && listFrom.type !== 'backlog') {
       issueLists.forEach((list) => {
         list.removeIssue(issue);
       });
diff --git a/app/assets/javascripts/branches/branches_delete_modal.js b/app/assets/javascripts/branches/branches_delete_modal.js
new file mode 100644
index 00000000000..af8bcdc1794
--- /dev/null
+++ b/app/assets/javascripts/branches/branches_delete_modal.js
@@ -0,0 +1,36 @@
+const MODAL_SELECTOR = '#modal-delete-branch';
+
+class DeleteModal {
+  constructor() {
+    this.$modal = $(MODAL_SELECTOR);
+    this.$toggleBtns = $(`[data-target="${MODAL_SELECTOR}"]`);
+    this.$branchName = $('.js-branch-name', this.$modal);
+    this.$confirmInput = $('.js-delete-branch-input', this.$modal);
+    this.$deleteBtn = $('.js-delete-branch', this.$modal);
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    this.$toggleBtns.on('click', this.setModalData.bind(this));
+    this.$confirmInput.on('input', this.setDeleteDisabled.bind(this));
+  }
+
+  setModalData(e) {
+    this.branchName = e.currentTarget.dataset.branchName || '';
+    this.deletePath = e.currentTarget.dataset.deletePath || '';
+    this.updateModal();
+  }
+
+  setDeleteDisabled(e) {
+    this.$deleteBtn.attr('disabled', e.currentTarget.value !== this.branchName);
+  }
+
+  updateModal() {
+    this.$branchName.text(this.branchName);
+    this.$confirmInput.val('');
+    this.$deleteBtn.attr('href', this.deletePath);
+    this.$deleteBtn.attr('disabled', true);
+  }
+}
+
+export default DeleteModal;
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index 97f279e4be4..072a899e9f2 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -2,15 +2,11 @@
 consistent-return, prefer-rest-params */
 /* global Breakpoints */
 
+import _ from 'underscore';
 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';
-
 window.Build = (function () {
   Build.timeout = null;
-
   Build.state = null;
 
   function Build(options) {
@@ -23,21 +19,22 @@ window.Build = (function () {
     this.buildStage = this.options.buildStage;
     this.$document = $(document);
     this.logBytes = 0;
+    this.scrollOffsetPadding = 30;
 
-    this.updateDropdown = bind(this.updateDropdown, this);
+    this.updateDropdown = this.updateDropdown.bind(this);
+    this.getBuildTrace = this.getBuildTrace.bind(this);
+    this.scrollToBottom = this.scrollToBottom.bind(this);
 
     this.$body = $('body');
     this.$buildTrace = $('#build-trace');
-    this.$autoScrollContainer = $('.autoscroll-container');
-    this.$autoScrollStatus = $('#autoscroll-status');
-    this.$autoScrollStatusText = this.$autoScrollStatus.find('.status-text');
-    this.$upBuildTrace = $('#up-build-trace');
-    this.$downBuildTrace = $(DOWN_BUILD_TRACE);
-    this.$scrollTopBtn = $('#scroll-top');
-    this.$scrollBottomBtn = $('#scroll-bottom');
     this.$buildRefreshAnimation = $('.js-build-refresh');
-    this.$buildScroll = $('#js-build-scroll');
     this.$truncatedInfo = $('.js-truncated-info');
+    this.$buildTraceOutput = $('.js-build-output');
+    this.$scrollContainer = $('.js-scroll-container');
+
+    // Scroll controllers
+    this.$scrollTopBtn = $('.js-scroll-up');
+    this.$scrollBottomBtn = $('.js-scroll-down');
 
     clearTimeout(Build.timeout);
     // Init breakpoint checker
@@ -56,54 +53,149 @@ window.Build = (function () {
       .off('click', '.stage-item')
       .on('click', '.stage-item', this.updateDropdown);
 
-    this.$document.on('scroll', this.initScrollMonitor.bind(this));
+    // add event listeners to the scroll buttons
+    this.$scrollTopBtn
+      .off('click')
+      .on('click', this.scrollToTop.bind(this));
+
+    this.$scrollBottomBtn
+      .off('click')
+      .on('click', this.scrollToBottom.bind(this));
 
     $(window)
       .off('resize.build')
-      .on('resize.build', this.sidebarOnResize.bind(this));
-
-    $('a', this.$buildScroll)
-      .off('click.stepTrace')
-      .on('click.stepTrace', this.stepTrace);
+      .on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
 
     this.updateArtifactRemoveDate();
-    this.initScrollButtonAffix();
-    this.invokeBuildTrace();
+
+    // eslint-disable-next-line
+    this.getBuildTrace()
+      .then(() => this.makeTraceScrollable())
+      .then(() => this.scrollToBottom());
+
+    this.verifyTopPosition();
   }
 
+  Build.prototype.makeTraceScrollable = function () {
+    this.$scrollContainer.niceScroll({
+      cursorcolor: '#fff',
+      cursoropacitymin: 1,
+      cursorwidth: '3px',
+      railpadding: { top: 5, bottom: 5, right: 5 },
+    });
+
+    this.$scrollContainer.on('scroll', _.throttle(this.toggleScroll.bind(this), 100));
+
+    this.toggleScroll();
+  };
+
+  Build.prototype.canScroll = function () {
+    return (this.$scrollContainer.prop('scrollHeight') - this.scrollOffsetPadding) > this.$scrollContainer.height();
+  };
+
+  /**
+   * |                          | Up       | Down     |
+   * |--------------------------|----------|----------|
+   * | on scroll bottom         | active   | disabled |
+   * | on scroll top            | disabled | active   |
+   * | no scroll                | disabled | disabled |
+   * | on.('scroll') is on top  | disabled | active   |
+   * | on('scroll) is on bottom | active   | disabled |
+   *
+   */
+  Build.prototype.toggleScroll = function () {
+    const bottomScroll = this.$scrollContainer.scrollTop() +
+      this.scrollOffsetPadding +
+      this.$scrollContainer.height();
+
+    if (this.canScroll()) {
+      if (this.$scrollContainer.scrollTop() === 0) {
+        this.toggleDisableButton(this.$scrollTopBtn, true);
+        this.toggleDisableButton(this.$scrollBottomBtn, false);
+      } else if (bottomScroll === this.$scrollContainer.prop('scrollHeight')) {
+        this.toggleDisableButton(this.$scrollTopBtn, false);
+        this.toggleDisableButton(this.$scrollBottomBtn, true);
+      } else {
+        this.toggleDisableButton(this.$scrollTopBtn, false);
+        this.toggleDisableButton(this.$scrollBottomBtn, false);
+      }
+    }
+  };
+
+  Build.prototype.scrollToTop = function () {
+    this.$scrollContainer.getNiceScroll(0).doScrollTop(0);
+    this.toggleScroll();
+  };
+
+  Build.prototype.scrollToBottom = function () {
+    this.$scrollContainer.getNiceScroll(0).doScrollTo(this.$scrollContainer.prop('scrollHeight'));
+    this.toggleScroll();
+  };
+
+  Build.prototype.toggleDisableButton = function ($button, disable) {
+    if (disable && $button.prop('disabled')) return;
+    $button.prop('disabled', disable);
+  };
+
+  Build.prototype.toggleScrollAnimation = function (toggle) {
+    this.$scrollBottomBtn.toggleClass('animate', toggle);
+  };
+
+  /**
+   * Build trace top position depends on the space ocupied by the elments rendered before
+   */
+  Build.prototype.verifyTopPosition = function () {
+    const $buildPage = $('.build-page');
+
+    const $header = $('.build-header', $buildPage);
+    const $runnersStuck = $('.js-build-stuck', $buildPage);
+    const $startsEnvironment = $('.js-environment-container', $buildPage);
+    const $erased = $('.js-build-erased', $buildPage);
+
+    let topPostion = 168;
+
+    if ($header) {
+      topPostion += $header.outerHeight();
+    }
+
+    if ($runnersStuck) {
+      topPostion += $runnersStuck.outerHeight();
+    }
+
+    if ($startsEnvironment) {
+      topPostion += $startsEnvironment.outerHeight();
+    }
+
+    if ($erased) {
+      topPostion += $erased.outerHeight() + 10;
+    }
+
+    this.$buildTrace.css({
+      top: topPostion,
+    });
+  };
+
   Build.prototype.initSidebar = function () {
     this.$sidebar = $('.js-build-sidebar');
     this.$sidebar.niceScroll();
-    this.$document
-      .off('click', '.js-sidebar-build-toggle')
-      .on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
-  };
-
-  Build.prototype.invokeBuildTrace = function () {
-    return this.getBuildTrace();
   };
 
   Build.prototype.getBuildTrace = function () {
     return $.ajax({
       url: `${this.pageUrl}/trace.json`,
-      dataType: 'json',
-      data: {
-        state: this.state,
-      },
-      success: ((log) => {
-        const $buildContainer = $('.js-build-output');
-
+      data: this.state,
+    })
+      .done((log) => {
         gl.utils.setCiStatusFavicon(`${this.pageUrl}/status.json`);
-
         if (log.state) {
           this.state = log.state;
         }
 
         if (log.append) {
-          $buildContainer.append(log.html);
+          this.$buildTraceOutput.append(log.html);
           this.logBytes += log.size;
         } else {
-          $buildContainer.html(log.html);
+          this.$buildTraceOutput.html(log.html);
           this.logBytes = log.size;
         }
 
@@ -114,141 +206,30 @@ window.Build = (function () {
           const size = bytesToKiB(this.logBytes);
           $('.js-truncated-info-size').html(`${size}`);
           this.$truncatedInfo.removeClass('hidden');
-          this.initAffixTruncatedInfo();
         } else {
           this.$truncatedInfo.addClass('hidden');
         }
 
-        this.checkAutoscroll();
-
         if (!log.complete) {
+          this.toggleScrollAnimation(true);
+
           Build.timeout = setTimeout(() => {
-            this.invokeBuildTrace();
+            //eslint-disable-next-line
+            this.getBuildTrace()
+              .then(() => this.scrollToBottom());
           }, 4000);
         } else {
           this.$buildRefreshAnimation.remove();
+          this.toggleScrollAnimation(false);
         }
 
         if (log.status !== this.buildStatus) {
-          let pageUrl = this.pageUrl;
-
-          if (this.$autoScrollStatus.data('state') === 'enabled') {
-            pageUrl += DOWN_BUILD_TRACE;
-          }
-
-          gl.utils.visitUrl(pageUrl);
+          gl.utils.visitUrl(this.pageUrl);
         }
-      }),
-      error: () => {
+      })
+      .fail(() => {
         this.$buildRefreshAnimation.remove();
-        return this.initScrollMonitor();
-      },
-    });
-  };
-
-  Build.prototype.checkAutoscroll = function () {
-    if (this.$autoScrollStatus.data('state') === 'enabled') {
-      return $('html,body').scrollTop(this.$buildTrace.height());
-    }
-
-    // Handle a situation where user started new build
-    // but never scrolled a page
-    if (!this.$scrollTopBtn.is(':visible') &&
-        !this.$scrollBottomBtn.is(':visible') &&
-        !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
-      this.$scrollBottomBtn.show();
-    }
-  };
-
-  Build.prototype.initScrollButtonAffix = function () {
-    // Hide everything initially
-    this.$scrollTopBtn.hide();
-    this.$scrollBottomBtn.hide();
-    this.$autoScrollContainer.hide();
-  };
-
-  // Page scroll listener to detect if user has scrolling page
-  // and handle following cases
-  // 1) User is at Top of Build Log;
-  //      - Hide Top Arrow button
-  //      - Show Bottom Arrow button
-  //      - Disable Autoscroll and hide indicator (when build is running)
-  // 2) User is at Bottom of Build Log;
-  //      - Show Top Arrow button
-  //      - Hide Bottom Arrow button
-  //      - Enable Autoscroll and show indicator (when build is running)
-  // 3) User is somewhere in middle of Build Log;
-  //      - Show Top Arrow button
-  //      - Show Bottom Arrow button
-  //      - Disable Autoscroll and hide indicator (when build is running)
-  Build.prototype.initScrollMonitor = function () {
-    if (!gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
-      !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
-      // User is somewhere in middle of Build Log
-
-      this.$scrollTopBtn.show();
-
-      if (this.buildStatus === 'success' || this.buildStatus === 'failed') { // Check if Build is completed
-        this.$scrollBottomBtn.show();
-      } else if (this.$buildRefreshAnimation.is(':visible') &&
-        !gl.utils.isInViewport(this.$buildRefreshAnimation.get(0))) {
-        this.$scrollBottomBtn.show();
-      } else {
-        this.$scrollBottomBtn.hide();
-      }
-
-      // Hide Autoscroll Status Indicator
-      if (this.$scrollBottomBtn.is(':visible')) {
-        this.$autoScrollContainer.hide();
-        this.$autoScrollStatusText.removeClass('animate');
-      } else {
-        this.$autoScrollContainer.css({
-          top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET,
-        }).show();
-        this.$autoScrollStatusText.addClass('animate');
-      }
-    } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
-      !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
-      // User is at Top of Build Log
-
-      this.$scrollTopBtn.hide();
-      this.$scrollBottomBtn.show();
-
-      this.$autoScrollContainer.hide();
-      this.$autoScrollStatusText.removeClass('animate');
-    } else if ((!gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
-      gl.utils.isInViewport(this.$downBuildTrace.get(0))) ||
-      (this.$buildRefreshAnimation.is(':visible') &&
-      gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)))) {
-      // User is at Bottom of Build Log
-
-      this.$scrollTopBtn.show();
-      this.$scrollBottomBtn.hide();
-
-      // Show and Reposition Autoscroll Status Indicator
-      this.$autoScrollContainer.css({
-        top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET,
-      }).show();
-      this.$autoScrollStatusText.addClass('animate');
-    } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
-      gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
-      // Build Log height is small
-
-      this.$scrollTopBtn.hide();
-      this.$scrollBottomBtn.hide();
-
-      // Hide Autoscroll Status Indicator
-      this.$autoScrollContainer.hide();
-      this.$autoScrollStatusText.removeClass('animate');
-    }
-
-    if (this.buildStatus === 'running' || this.buildStatus === 'pending') {
-      // Check if Refresh Animation is in Viewport and enable Autoscroll, disable otherwise.
-      this.$autoScrollStatus.data(
-        'state',
-        gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)) ? 'enabled' : 'disabled',
-      );
-    }
+      });
   };
 
   Build.prototype.shouldHideSidebarForViewport = function () {
@@ -257,18 +238,24 @@ window.Build = (function () {
   };
 
   Build.prototype.toggleSidebar = function (shouldHide) {
-    const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
+    const shouldShow = !shouldHide;
 
-    this.$buildScroll.toggleClass('sidebar-expanded', shouldShow)
-      .toggleClass('sidebar-collapsed', shouldHide);
-    this.$truncatedInfo.toggleClass('sidebar-expanded', shouldShow)
+    this.$buildTrace
+      .toggleClass('sidebar-expanded', shouldShow)
       .toggleClass('sidebar-collapsed', shouldHide);
-    this.$sidebar.toggleClass('right-sidebar-expanded', shouldShow)
+    this.$sidebar
+      .toggleClass('right-sidebar-expanded', shouldShow)
       .toggleClass('right-sidebar-collapsed', shouldHide);
   };
 
   Build.prototype.sidebarOnResize = function () {
     this.toggleSidebar(this.shouldHideSidebarForViewport());
+
+    this.verifyTopPosition();
+
+    if (this.$scrollContainer.getNiceScroll(0)) {
+      this.toggleScroll();
+    }
   };
 
   Build.prototype.sidebarOnClick = function () {
@@ -301,24 +288,5 @@ window.Build = (function () {
     this.populateJobs(stage);
   };
 
-  Build.prototype.stepTrace = function (e) {
-    e.preventDefault();
-
-    const $currentTarget = $(e.currentTarget);
-    $.scrollTo($currentTarget.attr('href'), {
-      offset: 0,
-    });
-  };
-
-  Build.prototype.initAffixTruncatedInfo = function () {
-    const offsetTop = this.$buildTrace.offset().top;
-
-    this.$truncatedInfo.affix({
-      offset: {
-        top: offsetTop,
-      },
-    });
-  };
-
   return Build;
 })();
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index ad9c600b499..082fbafb740 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -1,11 +1,12 @@
 import Vue from 'vue';
 import Visibility from 'visibilityjs';
-import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
+import pipelinesTableComponent from '../../vue_shared/components/pipelines_table';
 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 emptyState from '../../pipelines/components/empty_state.vue';
+import errorState from '../../pipelines/components/error_state.vue';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 import Poll from '../../lib/utils/poll';
@@ -17,16 +18,15 @@ import Poll from '../../lib/utils/poll';
  * We need a store to store the received environemnts.
  * We need a service to communicate with the server.
  *
- * Necessary SVG in the table are provided as props. This should be refactored
- * as soon as we have Webpack and can load them directly into JS files.
  */
 
 export default Vue.component('pipelines-table', {
 
   components: {
-    'pipelines-table-component': PipelinesTableComponent,
-    'error-state': ErrorState,
-    'empty-state': EmptyState,
+    pipelinesTableComponent,
+    errorState,
+    emptyState,
+    loadingIcon,
   },
 
   /**
@@ -47,6 +47,7 @@ export default Vue.component('pipelines-table', {
       hasError: false,
       isMakingRequest: false,
       updateGraphDropdown: false,
+      hasMadeRequest: false,
     };
   },
 
@@ -55,9 +56,15 @@ export default Vue.component('pipelines-table', {
       return this.hasError && !this.isLoading;
     },
 
+    /**
+     * Empty state is only rendered if after the first request we receive no pipelines.
+     *
+     * @return {Boolean}
+     */
     shouldRenderEmptyState() {
       return !this.state.pipelines.length &&
         !this.isLoading &&
+        this.hasMadeRequest &&
         !this.hasError;
     },
 
@@ -94,6 +101,10 @@ export default Vue.component('pipelines-table', {
     if (!Visibility.hidden()) {
       this.isLoading = true;
       this.poll.makeRequest();
+    } else {
+      // If tab is not visible we need to make the first request so we don't show the empty
+      // state without knowing if there are any pipelines
+      this.fetchPipelines();
     }
 
     Visibility.change(() => {
@@ -107,7 +118,7 @@ export default Vue.component('pipelines-table', {
     eventHub.$on('refreshPipelines', this.fetchPipelines);
   },
 
-  beforeDestroyed() {
+  beforeDestroy() {
     eventHub.$off('refreshPipelines');
   },
 
@@ -127,6 +138,8 @@ export default Vue.component('pipelines-table', {
     successCallback(resp) {
       const response = resp.json();
 
+      this.hasMadeRequest = true;
+
       // depending of the endpoint the response can either bring a `pipelines` key or not.
       const pipelines = response.pipelines || response;
       this.store.storePipelines(pipelines);
@@ -151,13 +164,12 @@ export default Vue.component('pipelines-table', {
 
   template: `
     <div class="content-list pipelines">
-      <div
-        class="realtime-loading"
-        v-if="isLoading">
-        <i
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true" />
-      </div>
+
+      <loading-icon
+        label="Loading pipelines"
+        size="3"
+        v-if="isLoading"
+        />
 
       <empty-state
         v-if="shouldRenderEmptyState"
diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js
index e3f9eaaf39c..2b0bf49cf92 100644
--- a/app/assets/javascripts/commits.js
+++ b/app/assets/javascripts/commits.js
@@ -7,6 +7,8 @@ window.CommitsList = (function() {
   CommitsList.timer = null;
 
   CommitsList.init = function(limit) {
+    this.$contentList = $('.content_list');
+
     $("body").on("click", ".day-commits-table li.commit", function(e) {
       if (e.target.nodeName !== "A") {
         location.href = $(this).attr("url");
@@ -14,9 +16,9 @@ window.CommitsList = (function() {
         return false;
       }
     });
-    Pager.init(limit, false, false, function() {
-      gl.utils.localTimeAgo($('.js-timeago'));
-    });
+
+    Pager.init(limit, false, false, this.processCommits);
+
     this.content = $("#commits-list");
     this.searchField = $("#commits-search");
     this.lastSearch = this.searchField.val();
@@ -62,5 +64,34 @@ window.CommitsList = (function() {
     });
   };
 
+  // Prepare loaded data.
+  CommitsList.processCommits = (data) => {
+    let processedData = data;
+    const $processedData = $(processedData);
+    const $commitsHeadersLast = CommitsList.$contentList.find('li.js-commit-header').last();
+    const lastShownDay = $commitsHeadersLast.data('day');
+    const $loadedCommitsHeadersFirst = $processedData.filter('li.js-commit-header').first();
+    const loadedShownDayFirst = $loadedCommitsHeadersFirst.data('day');
+    let commitsCount;
+
+    // If commits headers show the same date,
+    // remove the last header and change the previous one.
+    if (lastShownDay === loadedShownDayFirst) {
+      // Last shown commits count under the last commits header.
+      commitsCount = $commitsHeadersLast.nextUntil('li.js-commit-header').find('li.commit').length;
+
+      // Remove duplicate of commits header.
+      processedData = $processedData.not(`li.js-commit-header[data-day="${loadedShownDayFirst}"]`);
+
+      // Update commits count in the previous commits header.
+      commitsCount += Number($(processedData).nextUntil('li.js-commit-header').first().find('li.commit').length);
+      $commitsHeadersLast.find('span.commits-count').text(`${commitsCount} ${gl.text.pluralize('commit', commitsCount)}`);
+    }
+
+    gl.utils.localTimeAgo($processedData.find('.js-timeago'));
+
+    return processedData;
+  };
+
   return CommitsList;
 })();
diff --git a/app/assets/javascripts/copy_as_gfm.js b/app/assets/javascripts/copy_as_gfm.js
index 570799c030e..ba9d9a3e1f7 100644
--- a/app/assets/javascripts/copy_as_gfm.js
+++ b/app/assets/javascripts/copy_as_gfm.js
@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this, object-shorthand, no-unused-vars, no-use-before-define, no-new, max-len, no-restricted-syntax, guard-for-in, no-continue */
 
-require('./lib/utils/common_utils');
+import './lib/utils/common_utils';
 
 const gfmRules = {
   // The filters referenced in lib/banzai/pipeline/gfm_pipeline.rb convert
@@ -18,12 +18,12 @@ const gfmRules = {
     },
   },
   TaskListFilter: {
-    'input[type=checkbox].task-list-item-checkbox'(el, text) {
+    'input[type=checkbox].task-list-item-checkbox'(el) {
       return `[${el.checked ? 'x' : ' '}]`;
     },
   },
   ReferenceFilter: {
-    '.tooltip'(el, text) {
+    '.tooltip'(el) {
       return '';
     },
     'a.gfm:not([data-link=true])'(el, text) {
@@ -39,15 +39,15 @@ const gfmRules = {
     },
   },
   TableOfContentsFilter: {
-    'ul.section-nav'(el, text) {
+    'ul.section-nav'(el) {
       return '[[_TOC_]]';
     },
   },
   EmojiFilter: {
-    'img.emoji'(el, text) {
+    'img.emoji'(el) {
       return el.getAttribute('alt');
     },
-    'gl-emoji'(el, text) {
+    'gl-emoji'(el) {
       return `:${el.getAttribute('data-name')}:`;
     },
   },
@@ -57,13 +57,13 @@ const gfmRules = {
     },
   },
   VideoLinkFilter: {
-    '.video-container'(el, text) {
+    '.video-container'(el) {
       const videoEl = el.querySelector('video');
       if (!videoEl) return false;
 
       return CopyAsGFM.nodeToGFM(videoEl);
     },
-    'video'(el, text) {
+    'video'(el) {
       return `![${el.dataset.title}](${el.getAttribute('src')})`;
     },
   },
@@ -74,19 +74,19 @@ const gfmRules = {
     'code.code.math[data-math-style=inline]'(el, text) {
       return `$\`${text}\`$`;
     },
-    'span.katex-display span.katex-mathml'(el, text) {
+    'span.katex-display span.katex-mathml'(el) {
       const mathAnnotation = el.querySelector('annotation[encoding="application/x-tex"]');
       if (!mathAnnotation) return false;
 
       return `\`\`\`math\n${CopyAsGFM.nodeToGFM(mathAnnotation)}\n\`\`\``;
     },
-    'span.katex-mathml'(el, text) {
+    'span.katex-mathml'(el) {
       const mathAnnotation = el.querySelector('annotation[encoding="application/x-tex"]');
       if (!mathAnnotation) return false;
 
       return `$\`${CopyAsGFM.nodeToGFM(mathAnnotation)}\`$`;
     },
-    'span.katex-html'(el, text) {
+    'span.katex-html'(el) {
       // We don't want to include the content of this element in the copied text.
       return '';
     },
@@ -95,7 +95,7 @@ const gfmRules = {
     },
   },
   SanitizationFilter: {
-    'a[name]:not([href]):empty'(el, text) {
+    'a[name]:not([href]):empty'(el) {
       return el.outerHTML;
     },
     'dl'(el, text) {
@@ -143,7 +143,7 @@ const gfmRules = {
     },
   },
   MarkdownFilter: {
-    'br'(el, text) {
+    'br'(el) {
       // Two spaces at the end of a line are turned into a BR
       return '  ';
     },
@@ -162,7 +162,7 @@ const gfmRules = {
     'blockquote'(el, text) {
       return text.trim().split('\n').map(s => `> ${s}`.trim()).join('\n');
     },
-    'img'(el, text) {
+    'img'(el) {
       return `![${el.getAttribute('alt')}](${el.getAttribute('src')})`;
     },
     'a.anchor'(el, text) {
@@ -222,10 +222,10 @@ const gfmRules = {
     'sup'(el, text) {
       return `^${text}`;
     },
-    'hr'(el, text) {
+    'hr'(el) {
       return '-----';
     },
-    'table'(el, text) {
+    'table'(el) {
       const theadEl = el.querySelector('thead');
       const tbodyEl = el.querySelector('tbody');
       if (!theadEl || !tbodyEl) return false;
@@ -233,11 +233,11 @@ const gfmRules = {
       const theadText = CopyAsGFM.nodeToGFM(theadEl);
       const tbodyText = CopyAsGFM.nodeToGFM(tbodyEl);
 
-      return theadText + tbodyText;
+      return [theadText, tbodyText].join('\n');
     },
     'thead'(el, text) {
       const cells = _.map(el.querySelectorAll('th'), (cell) => {
-        let chars = CopyAsGFM.nodeToGFM(cell).trim().length + 2;
+        let chars = CopyAsGFM.nodeToGFM(cell).length + 2;
 
         let before = '';
         let after = '';
@@ -262,10 +262,15 @@ const gfmRules = {
         return before + middle + after;
       });
 
-      return `${text}|${cells.join('|')}|`;
+      const separatorRow = `|${cells.join('|')}|`;
+
+      return [text, separatorRow].join('\n');
     },
-    'tr'(el, text) {
-      const cells = _.map(el.querySelectorAll('td, th'), cell => CopyAsGFM.nodeToGFM(cell).trim());
+    'tr'(el) {
+      const cellEls = el.querySelectorAll('td, th');
+      if (cellEls.length === 0) return false;
+
+      const cells = _.map(cellEls, cell => CopyAsGFM.nodeToGFM(cell));
       return `| ${cells.join(' | ')} |`;
     },
   },
@@ -273,12 +278,12 @@ const gfmRules = {
 
 class CopyAsGFM {
   constructor() {
-    $(document).on('copy', '.md, .wiki', (e) => { this.copyAsGFM(e, CopyAsGFM.transformGFMSelection); });
-    $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', (e) => { this.copyAsGFM(e, CopyAsGFM.transformCodeSelection); });
-    $(document).on('paste', '.js-gfm-input', this.pasteGFM.bind(this));
+    $(document).on('copy', '.md, .wiki', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection); });
+    $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection); });
+    $(document).on('paste', '.js-gfm-input', CopyAsGFM.pasteGFM);
   }
 
-  copyAsGFM(e, transformer) {
+  static copyAsGFM(e, transformer) {
     const clipboardData = e.originalEvent.clipboardData;
     if (!clipboardData) return;
 
@@ -292,26 +297,59 @@ class CopyAsGFM {
     e.stopPropagation();
 
     clipboardData.setData('text/plain', el.textContent);
-    clipboardData.setData('text/x-gfm', CopyAsGFM.nodeToGFM(el));
+    clipboardData.setData('text/x-gfm', this.nodeToGFM(el));
   }
 
-  pasteGFM(e) {
+  static pasteGFM(e) {
     const clipboardData = e.originalEvent.clipboardData;
     if (!clipboardData) return;
 
+    const text = clipboardData.getData('text/plain');
     const gfm = clipboardData.getData('text/x-gfm');
     if (!gfm) return;
 
     e.preventDefault();
 
-    window.gl.utils.insertText(e.target, gfm);
+    window.gl.utils.insertText(e.target, (textBefore, textAfter) => {
+      // If the text before the cursor contains an odd number of backticks,
+      // we are either inside an inline code span that starts with 1 backtick
+      // or a code block that starts with 3 backticks.
+      // This logic still holds when there are one or more _closed_ code spans
+      // or blocks that will have 2 or 6 backticks.
+      // This will break down when the actual code block contains an uneven
+      // number of backticks, but this is a rare edge case.
+      const backtickMatch = textBefore.match(/`/g);
+      const insideCodeBlock = backtickMatch && (backtickMatch.length % 2) === 1;
+
+      if (insideCodeBlock) {
+        return text;
+      }
+
+      return gfm;
+    });
   }
 
   static transformGFMSelection(documentFragment) {
-    // If the documentFragment contains more than just Markdown, don't copy as GFM.
-    if (documentFragment.querySelector('.md, .wiki')) return null;
+    const gfmEls = documentFragment.querySelectorAll('.md, .wiki');
+    switch (gfmEls.length) {
+      case 0: {
+        return documentFragment;
+      }
+      case 1: {
+        return gfmEls[0];
+      }
+      default: {
+        const allGfmEl = document.createElement('div');
+
+        for (let i = 0; i < gfmEls.length; i += 1) {
+          const lineEl = gfmEls[i];
+          allGfmEl.appendChild(lineEl);
+          allGfmEl.appendChild(document.createTextNode('\n\n'));
+        }
 
-    return documentFragment;
+        return allGfmEl;
+      }
+    }
   }
 
   static transformCodeSelection(documentFragment) {
@@ -343,7 +381,7 @@ class CopyAsGFM {
     return codeEl;
   }
 
-  static nodeToGFM(node) {
+  static nodeToGFM(node, respectWhitespaceParam = false) {
     if (node.nodeType === Node.COMMENT_NODE) {
       return '';
     }
@@ -352,7 +390,9 @@ class CopyAsGFM {
       return node.textContent;
     }
 
-    const text = this.innerGFM(node);
+    const respectWhitespace = respectWhitespaceParam || (node.nodeName === 'PRE' || node.nodeName === 'CODE');
+
+    const text = this.innerGFM(node, respectWhitespace);
 
     if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
       return text;
@@ -366,7 +406,17 @@ class CopyAsGFM {
 
         if (!window.gl.utils.nodeMatchesSelector(node, selector)) continue;
 
-        const result = func(node, text);
+        let result;
+        if (func.length === 2) {
+          // if `func` takes 2 arguments, it depends on text.
+          // if there is no text, we don't need to generate GFM for this node.
+          if (text.length === 0) continue;
+
+          result = func(node, text);
+        } else {
+          result = func(node);
+        }
+
         if (result === false) continue;
 
         return result;
@@ -376,7 +426,7 @@ class CopyAsGFM {
     return text;
   }
 
-  static innerGFM(parentNode) {
+  static innerGFM(parentNode, respectWhitespace = false) {
     const nodes = parentNode.childNodes;
 
     const clonedParentNode = parentNode.cloneNode(true);
@@ -386,13 +436,19 @@ class CopyAsGFM {
       const node = nodes[i];
       const clonedNode = clonedNodes[i];
 
-      const text = this.nodeToGFM(node);
+      const text = this.nodeToGFM(node, respectWhitespace);
 
       // `clonedNode.replaceWith(text)` is not yet widely supported
       clonedNode.parentNode.replaceChild(document.createTextNode(text), clonedNode);
     }
 
-    return clonedParentNode.innerText || clonedParentNode.textContent;
+    let nodeText = clonedParentNode.innerText || clonedParentNode.textContent;
+
+    if (!respectWhitespace) {
+      nodeText = nodeText.trim();
+    }
+
+    return nodeText;
   }
 }
 
diff --git a/app/assets/javascripts/create_label.js b/app/assets/javascripts/create_label.js
index 121d64db789..907b468e576 100644
--- a/app/assets/javascripts/create_label.js
+++ b/app/assets/javascripts/create_label.js
@@ -1,5 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-param-reassign, wrap-iife, max-len */
-/* global Api */
+import Api from './api';
 
 class CreateLabelDropdown {
   constructor ($el, namespacePath, projectPath) {
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
index e9a30476945..7c32a38fbe7 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
 
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +11,9 @@ global.cycleAnalytics.StageCodeComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +23,8 @@ global.cycleAnalytics.StageCodeComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="mergeRequest in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="mergeRequest.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="mergeRequest.author.avatarUrl"/>
             <h5 class="item-title merge-merquest-title">
               <a :href="mergeRequest.url">
                 {{ mergeRequest.title }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
index 3626a9ce943..5f4a0ac8590 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
-
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +10,9 @@ global.cycleAnalytics.StageIssueComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +22,8 @@ global.cycleAnalytics.StageIssueComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="issue in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="issue.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="issue.author.avatarUrl"/>
             <h5 class="item-title issue-title">
               <a class="issue-title" :href="issue.url">
                 {{ issue.title }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
index c99bb8e9a13..11fee5410d9 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 import iconCommit from '../svg/icon_commit.svg';
 
 const global = window.gl || (window.gl = {});
@@ -10,11 +11,12 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
-
+  components: {
+    userAvatarImage,
+  },
   data() {
     return { iconCommit };
   },
-
   template: `
     <div>
       <div class="events-description">
@@ -24,7 +26,8 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="commit in items" class="stage-event-item">
           <div class="item-details item-conmmit-component">
-            <img class="avatar" :src="commit.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="commit.author.avatarUrl"/>
             <h5 class="item-title commit-title">
               <a :href="commit.commitUrl">
                 {{ commit.title }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
index 779458578ab..b7ba9360f70 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
-
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +10,9 @@ global.cycleAnalytics.StageProductionComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +22,8 @@ global.cycleAnalytics.StageProductionComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="issue in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="issue.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="issue.author.avatarUrl"/>
             <h5 class="item-title issue-title">
               <a class="issue-title" :href="issue.url">
                 {{ issue.title }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
index 2b00593561f..f41a0d0e4ff 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
-
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +10,9 @@ global.cycleAnalytics.StageReviewComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +22,8 @@ global.cycleAnalytics.StageReviewComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="mergeRequest in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="mergeRequest.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="mergeRequest.author.avatarUrl"/>
             <h5 class="item-title merge-merquest-title">
               <a :href="mergeRequest.url">
                 {{ mergeRequest.title }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
index acbde35eb55..d7c906c9d39 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 import iconBranch from '../svg/icon_branch.svg';
 
 const global = window.gl || (window.gl = {});
@@ -13,6 +14,9 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
   data() {
     return { iconBranch };
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -22,13 +26,14 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="build in items" class="stage-event-item item-build-component">
           <div class="item-details">
-            <img class="avatar" :src="build.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="build.author.avatarUrl"/>
             <h5 class="item-title">
               <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
               <i class="fa fa-code-fork"></i>
-              <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+              <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
               <span class="icon-branch">${iconBranch}</span>
-              <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
             </h5>
             <span>
               <a :href="build.url" class="build-date">{{ build.date }}</a>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js
index e306026429e..78cc97eea0b 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js
@@ -29,9 +29,9 @@ global.cycleAnalytics.StageTestComponent = Vue.extend({
               &middot;
               <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
               <i class="fa fa-code-fork"></i>
-              <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+              <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
               <span class="icon-branch">${iconBranch}</span>
-              <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
             </h5>
             <span>
               <a :href="build.url" class="issue-date">
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index c8e53cb554e..44791a93936 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -4,18 +4,16 @@ import Vue from 'vue';
 import Cookies from 'js-cookie';
 import Translate from '../vue_shared/translate';
 import LimitWarningComponent from './components/limit_warning_component';
-
-require('./components/stage_code_component');
-require('./components/stage_issue_component');
-require('./components/stage_plan_component');
-require('./components/stage_production_component');
-require('./components/stage_review_component');
-require('./components/stage_staging_component');
-require('./components/stage_test_component');
-require('./components/total_time_component');
-require('./cycle_analytics_service');
-require('./cycle_analytics_store');
-require('./default_event_objects');
+import './components/stage_code_component';
+import './components/stage_issue_component';
+import './components/stage_plan_component';
+import './components/stage_production_component';
+import './components/stage_review_component';
+import './components/stage_staging_component';
+import './components/stage_test_component';
+import './components/total_time_component';
+import './cycle_analytics_service';
+import './cycle_analytics_store';
 
 Vue.use(Translate);
 
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
index 50bd394e90e..991f8c1f6fd 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-param-reassign */
-import { __ } from '../locale';
 
-require('../lib/utils/text_utility');
-const DEFAULT_EVENT_OBJECTS = require('./default_event_objects');
+import { __ } from '../locale';
+import '../lib/utils/text_utility';
+import DEFAULT_EVENT_OBJECTS from './default_event_objects';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
diff --git a/app/assets/javascripts/cycle_analytics/default_event_objects.js b/app/assets/javascripts/cycle_analytics/default_event_objects.js
index cfaf9835bf8..57f9019d2f8 100644
--- a/app/assets/javascripts/cycle_analytics/default_event_objects.js
+++ b/app/assets/javascripts/cycle_analytics/default_event_objects.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   issue: {
     created_at: '',
     url: '',
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue
index 3ff3a9d977e..3f993213dd0 100644
--- a/app/assets/javascripts/deploy_keys/components/action_btn.vue
+++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue
@@ -1,5 +1,6 @@
 <script>
   import eventHub from '../eventhub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
   export default {
     data() {
@@ -22,6 +23,11 @@
         default: 'btn-default',
       },
     },
+
+    components: {
+      loadingIcon,
+    },
+
     methods: {
       doAction() {
         this.isLoading = true;
@@ -44,11 +50,6 @@
     :disabled="isLoading"
     @click="doAction">
     {{ text }}
-    <i
-      v-if="isLoading"
-      class="fa fa-spinner fa-spin"
-      aria-hidden="true"
-      aria-label="Loading">
-    </i>
+    <loading-icon v-if="isLoading" />
   </button>
 </template>
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index 7315a9e11cb..a663e30dfd0 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -4,6 +4,7 @@
   import DeployKeysService from '../service';
   import DeployKeysStore from '../store';
   import keysPanel from './keys_panel.vue';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
   export default {
     data() {
@@ -28,6 +29,7 @@
     },
     components: {
       keysPanel,
+      loadingIcon,
     },
     methods: {
       fetchKeys() {
@@ -73,30 +75,32 @@
 </script>
 
 <template>
-  <div class="col-lg-9 col-lg-offset-3 append-bottom-default deploy-keys">
-    <div
-      class="text-center"
-      v-if="isLoading && !hasKeys">
-      <i
-        class="fa fa-spinner fa-spin fa-2x"
-        aria-hidden="true"
-        aria-label="Loading deploy keys">
-      </i>
-    </div>
+  <div class="append-bottom-default deploy-keys">
+    <loading-icon
+      v-if="isLoading && !hasKeys"
+      size="2"
+      label="Loading deploy keys"
+    />
     <div v-else-if="hasKeys">
       <keys-panel
         title="Enabled deploy keys for this project"
         :keys="keys.enabled_keys"
-        :store="store" />
+        :store="store"
+        :endpoint="endpoint"
+      />
       <keys-panel
         title="Deploy keys from projects you have access to"
         :keys="keys.available_project_keys"
-        :store="store" />
+        :store="store"
+        :endpoint="endpoint"
+      />
       <keys-panel
         v-if="keys.public_keys.length"
         title="Public deploy keys available to any project"
         :keys="keys.public_keys"
-        :store="store" />
+        :store="store"
+        :endpoint="endpoint"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue
index 0a06a481b96..904f7f64fa8 100644
--- a/app/assets/javascripts/deploy_keys/components/key.vue
+++ b/app/assets/javascripts/deploy_keys/components/key.vue
@@ -11,6 +11,10 @@
         type: Object,
         required: true,
       },
+      endpoint: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       actionBtn,
@@ -19,6 +23,9 @@
       timeagoDate() {
         return gl.utils.getTimeago().format(this.deployKey.created_at);
       },
+      editDeployKeyPath() {
+        return `${this.endpoint}/${this.deployKey.id}/edit`;
+      },
     },
     methods: {
       isEnabled(id) {
@@ -33,7 +40,8 @@
     <div class="pull-left append-right-10 hidden-xs">
       <i
         aria-hidden="true"
-        class="fa fa-key key-icon">
+        class="fa fa-key key-icon"
+      >
       </i>
     </div>
     <div class="deploy-key-content key-list-item-info">
@@ -45,7 +53,8 @@
       </div>
       <div
         v-if="deployKey.can_push"
-        class="write-access-allowed">
+        class="write-access-allowed"
+      >
         Write access allowed
       </div>
     </div>
@@ -53,7 +62,8 @@
       <a
         v-for="project in deployKey.projects"
         class="label deploy-project-label"
-        :href="project.full_path">
+        :href="project.full_path"
+      >
         {{ project.full_name }}
       </a>
     </div>
@@ -61,20 +71,30 @@
       <span class="key-created-at">
         created {{ timeagoDate }}
       </span>
+      <a
+        v-if="deployKey.can_edit"
+        class="btn btn-small"
+        :href="editDeployKeyPath"
+      >
+        Edit
+      </a>
       <action-btn
         v-if="!isEnabled(deployKey.id)"
         :deploy-key="deployKey"
-        type="enable"/>
+        type="enable"
+      />
       <action-btn
         v-else-if="deployKey.destroyed_when_orphaned && deployKey.almost_orphaned"
         :deploy-key="deployKey"
         btn-css-class="btn-warning"
-        type="remove" />
+        type="remove"
+      />
       <action-btn
         v-else
         :deploy-key="deployKey"
         btn-css-class="btn-warning"
-        type="disable" />
+        type="disable"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/deploy_keys/components/keys_panel.vue b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
index eccc470578b..9e6fb244af6 100644
--- a/app/assets/javascripts/deploy_keys/components/keys_panel.vue
+++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
@@ -20,6 +20,10 @@
         type: Object,
         required: true,
       },
+      endpoint: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       key,
@@ -34,18 +38,22 @@
       ({{ keys.length }})
     </h5>
     <ul class="well-list"
-      v-if="keys.length">
+      v-if="keys.length"
+    >
       <li
         v-for="deployKey in keys"
         :key="deployKey.id">
         <key
           :deploy-key="deployKey"
-          :store="store" />
+          :store="store"
+          :endpoint="endpoint"
+        />
       </li>
     </ul>
     <div
       class="settings-message text-center"
-      v-else-if="showHelpBox">
+      v-else-if="showHelpBox"
+    >
       No deploy keys found. Create one with the form above.
     </div>
   </div>
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 5aa3eb46a69..725ec7b9c70 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
 
-require('./lib/utils/url_utility');
+import './lib/utils/url_utility';
 
 const UNFOLD_COUNT = 20;
 let isBound = false;
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 5f533b5761c..517bdb6be09 100644
--- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
+++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
@@ -3,6 +3,7 @@
 
 import Vue from 'vue';
 import collapseIcon from '../icons/collapse_icon.svg';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const DiffNoteAvatars = Vue.extend({
   props: ['discussionId'],
@@ -15,22 +16,24 @@ const DiffNoteAvatars = Vue.extend({
       collapseIcon,
     };
   },
+  components: {
+    userAvatarImage,
+  },
   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"
+        <!-- FIXME: Pass an alt attribute here for accessibility -->
+        <user-avatar-image
+          v-for="note in notesSubset"
+          class="diff-comment-avatar js-diff-comment-avatar"
+          @click.native="clickedAvatar($event)"
+          :img-src="note.authorAvatar"
+          :tooltip-text="getTooltipText(note)"
           :data-line-type="lineType"
-          :title="note.authorName + ': ' + note.noteTruncated"
-          :src="note.authorAvatar"
-          @click="clickedAvatar($event)" />
+          :size="19"
+          data-html="true"
+        />
         <span v-if="notesCount > shownAvatars"
           class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
           data-container="body"
@@ -150,6 +153,9 @@ const DiffNoteAvatars = Vue.extend({
     setDiscussionVisible() {
       this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(':visible');
     },
+    getTooltipText(note) {
+      return `${note.authorName}: ${note.noteTruncated}`;
+    },
   },
 });
 
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 8a0fd3bb4a7..37ddca29e71 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
@@ -16,6 +16,13 @@ const JumpToDiscussion = Vue.extend({
     };
   },
   computed: {
+    buttonText: function () {
+      if (this.discussionId) {
+        return 'Jump to next unresolved discussion';
+      } else {
+        return 'Jump to first unresolved discussion';
+      }
+    },
     allResolved: function () {
       return this.unresolvedDiscussionCount === 0;
     },
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
index fdd27534e0e..a2d33b0936e 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
@@ -2,19 +2,18 @@
 /* global ResolveCount */
 
 import Vue from 'vue';
-
-require('./models/discussion');
-require('./models/note');
-require('./stores/comments');
-require('./services/resolve');
-require('./mixins/discussion');
-require('./components/comment_resolve_btn');
-require('./components/jump_to_discussion');
-require('./components/resolve_btn');
-require('./components/resolve_count');
-require('./components/resolve_discussion_btn');
-require('./components/diff_note_avatars');
-require('./components/new_issue_for_discussion');
+import './models/discussion';
+import './models/note';
+import './stores/comments';
+import './services/resolve';
+import './mixins/discussion';
+import './components/comment_resolve_btn';
+import './components/jump_to_discussion';
+import './components/resolve_btn';
+import './components/resolve_count';
+import './components/resolve_discussion_btn';
+import './components/diff_note_avatars';
+import './components/new_issue_for_discussion';
 
 $(() => {
   const projectPath = document.querySelector('.merge-request').dataset.projectPath;
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js b/app/assets/javascripts/diff_notes/services/resolve.js
index ba4f6d36fcb..807ab11d292 100644
--- a/app/assets/javascripts/diff_notes/services/resolve.js
+++ b/app/assets/javascripts/diff_notes/services/resolve.js
@@ -3,11 +3,7 @@
 /* global CommentsStore */
 
 import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-require('../../vue_shared/vue_resource_interceptor');
-
-Vue.use(VueResource);
+import '../../vue_shared/vue_resource_interceptor';
 
 window.gl = window.gl || {};
 
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index a2b2ddfefc8..0c420c12345 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -3,7 +3,7 @@
 /* global ActiveTabMemoizer */
 /* global ShortcutsNavigation */
 /* global Build */
-/* global Issuable */
+/* global IssuableIndex */
 /* global ShortcutsIssuable */
 /* global ZenMode */
 /* global Milestone */
@@ -14,7 +14,6 @@
 /* global NotificationsForm */
 /* global TreeView */
 /* global NotificationsDropdown */
-/* global UsersSelect */
 /* global GroupAvatar */
 /* global LineHighlighter */
 /* global ProjectFork */
@@ -35,12 +34,13 @@
 /* global ShortcutsWiki */
 
 import Issue from './issue';
-
 import BindInOut from './behaviors/bind_in_out';
+import DeleteModal from './branches/branches_delete_modal';
 import Group from './group';
 import GroupName from './group_name';
 import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
+import setupProjectEdit from './project_edit';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
 import Landing from './landing';
@@ -51,9 +51,11 @@ import ShortcutsWiki from './shortcuts_wiki';
 import Pipelines from './pipelines';
 import BlobViewer from './blob/viewer/index';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
+import UsersSelect from './users_select';
 import RefSelectDropdown from './ref_select_dropdown';
-
-const ShortcutsBlob = require('./shortcuts_blob');
+import GfmAutoComplete from './gfm_auto_complete';
+import ShortcutsBlob from './shortcuts_blob';
+import initSettingsPanels from './settings_panels';
 
 (function() {
   var Dispatcher;
@@ -78,6 +80,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
       path = page.split(':');
       shortcut_handler = null;
 
+      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
+
       function initBlob() {
         new LineHighlighter();
 
@@ -113,20 +117,22 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:boards:show':
         case 'projects:boards:index':
           shortcut_handler = new ShortcutsNavigation();
+          new UsersSelect();
           break;
-        case 'projects:builds:show':
+        case 'projects:jobs:show':
           new Build();
           break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
-          if (gl.FilteredSearchManager) {
-            new gl.FilteredSearchManager(page === 'projects:issues:index' ? 'issues' : 'merge_requests');
+          if (gl.FilteredSearchManager && document.querySelector('.filtered-search')) {
+            const filteredSearchManager = new gl.FilteredSearchManager(page === 'projects:issues:index' ? 'issues' : 'merge_requests');
+            filteredSearchManager.setup();
           }
-          Issuable.init();
-          new gl.IssuableBulkActions({
-            prefixId: page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_',
-          });
+          const pagePrefix = page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_';
+          IssuableIndex.init(pagePrefix);
+
           shortcut_handler = new ShortcutsNavigation();
+          new UsersSelect();
           break;
         case 'projects:issues:show':
           new Issue();
@@ -139,6 +145,10 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new Milestone();
           new Sidebar();
           break;
+        case 'groups:issues':
+        case 'groups:merge_requests':
+          new UsersSelect();
+          break;
         case 'dashboard:todos:index':
           new gl.Todos();
           break;
@@ -180,6 +190,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
           break;
         case 'projects:branches:index':
           gl.AjaxLoadingSpinner.init();
+          new DeleteModal();
           break;
         case 'projects:issues:new':
         case 'projects:issues:edit':
@@ -207,6 +218,16 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new gl.GLForm($('.tag-form'));
           new RefSelectDropdown($('.js-branch-select'), window.gl.availableRefs);
           break;
+        case 'projects:snippets:new':
+        case 'projects:snippets:edit':
+        case 'projects:snippets:create':
+        case 'projects:snippets:update':
+        case 'snippets:new':
+        case 'snippets:edit':
+        case 'snippets:create':
+        case 'snippets:update':
+          new gl.GLForm($('.snippet-form'));
+          break;
         case 'projects:releases:edit':
           new ZenMode();
           new gl.GLForm($('.release-form'));
@@ -223,6 +244,10 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'dashboard:activity':
           new gl.Activities();
           break;
+        case 'dashboard:issues':
+        case 'dashboard:merge_requests':
+          new UsersSelect();
+          break;
         case 'projects:commit:show':
           new Commit();
           new gl.Diff();
@@ -247,6 +272,12 @@ const ShortcutsBlob = require('./shortcuts_blob');
           if ($('#tree-slider').length) {
             new TreeView();
           }
+          if ($('.blob-viewer').length) {
+            new BlobViewer();
+          }
+          break;
+        case 'projects:edit':
+          setupProjectEdit();
           break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':
@@ -300,6 +331,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:tree:show':
           shortcut_handler = new ShortcutsNavigation();
           new TreeView();
+          new BlobViewer();
           gl.TargetBranchDropDown.bootstrap();
           break;
         case 'projects:find_file:show':
@@ -360,6 +392,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
           // Initialize Protected Tag Settings
           new ProtectedTagCreate();
           new ProtectedTagEditList();
+          // Initialize expandable settings panels
+          initSettingsPanels();
           break;
         case 'projects:ci_cd:show':
           new gl.ProjectVariables();
@@ -371,10 +405,16 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'users:show':
           new UserCallout();
           break;
+        case 'admin:conversational_development_index:show':
+          new UserCallout();
+          break;
         case 'snippets:show':
           new LineHighlighter();
           new BlobViewer();
           break;
+        case 'import:fogbugz:new_user_map':
+          new UsersSelect();
+          break;
       }
       switch (path.first()) {
         case 'sessions':
diff --git a/app/assets/javascripts/droplab/drop_down.js b/app/assets/javascripts/droplab/drop_down.js
index de3927d683c..70cd337fb8a 100644
--- a/app/assets/javascripts/droplab/drop_down.js
+++ b/app/assets/javascripts/droplab/drop_down.js
@@ -1,44 +1,42 @@
-/* eslint-disable */
-
 import utils from './utils';
 import { SELECTED_CLASS, IGNORE_CLASS } from './constants';
 
-var DropDown = function(list) {
-  this.currentIndex = 0;
-  this.hidden = true;
-  this.list = typeof list === 'string' ? document.querySelector(list) : list;
-  this.items = [];
+class DropDown {
+  constructor(list) {
+    this.currentIndex = 0;
+    this.hidden = true;
+    this.list = typeof list === 'string' ? document.querySelector(list) : list;
+    this.items = [];
 
-  this.eventWrapper = {};
+    this.eventWrapper = {};
 
-  this.getItems();
-  this.initTemplateString();
-  this.addEvents();
+    this.getItems();
+    this.initTemplateString();
+    this.addEvents();
 
-  this.initialState = list.innerHTML;
-};
+    this.initialState = list.innerHTML;
+  }
 
-Object.assign(DropDown.prototype, {
-  getItems: function() {
+  getItems() {
     this.items = [].slice.call(this.list.querySelectorAll('li'));
     return this.items;
-  },
+  }
 
-  initTemplateString: function() {
-    var items = this.items || this.getItems();
+  initTemplateString() {
+    const items = this.items || this.getItems();
 
-    var templateString = '';
+    let templateString = '';
     if (items.length > 0) templateString = items[items.length - 1].outerHTML;
     this.templateString = templateString;
 
     return this.templateString;
-  },
+  }
 
-  clickEvent: function(e) {
+  clickEvent(e) {
     if (e.target.tagName === 'UL') return;
     if (e.target.classList.contains(IGNORE_CLASS)) return;
 
-    var selected = utils.closest(e.target, 'LI');
+    const selected = utils.closest(e.target, 'LI');
     if (!selected) return;
 
     this.addSelectedClass(selected);
@@ -46,95 +44,95 @@ Object.assign(DropDown.prototype, {
     e.preventDefault();
     this.hide();
 
-    var listEvent = new CustomEvent('click.dl', {
+    const listEvent = new CustomEvent('click.dl', {
       detail: {
         list: this,
-        selected: selected,
+        selected,
         data: e.target.dataset,
       },
     });
     this.list.dispatchEvent(listEvent);
-  },
+  }
 
-  addSelectedClass: function (selected) {
+  addSelectedClass(selected) {
     this.removeSelectedClasses();
     selected.classList.add(SELECTED_CLASS);
-  },
+  }
 
-  removeSelectedClasses: function () {
+  removeSelectedClasses() {
     const items = this.items || this.getItems();
 
     items.forEach(item => item.classList.remove(SELECTED_CLASS));
-  },
+  }
 
-  addEvents: function() {
-    this.eventWrapper.clickEvent = this.clickEvent.bind(this)
+  addEvents() {
+    this.eventWrapper.clickEvent = this.clickEvent.bind(this);
     this.list.addEventListener('click', this.eventWrapper.clickEvent);
-  },
-
-  toggle: function() {
-    this.hidden ? this.show() : this.hide();
-  },
+  }
 
-  setData: function(data) {
+  setData(data) {
     this.data = data;
     this.render(data);
-  },
+  }
 
-  addData: function(data) {
+  addData(data) {
     this.data = (this.data || []).concat(data);
     this.render(this.data);
-  },
+  }
 
-  render: function(data) {
+  render(data) {
     const children = data ? data.map(this.renderChildren.bind(this)) : [];
     const renderableList = this.list.querySelector('ul[data-dynamic]') || this.list;
 
     renderableList.innerHTML = children.join('');
-  },
+  }
 
-  renderChildren: function(data) {
-    var html = utils.template(this.templateString, data);
-    var template = document.createElement('div');
+  renderChildren(data) {
+    const html = utils.template(this.templateString, data);
+    const template = document.createElement('div');
 
     template.innerHTML = html;
-    this.setImagesSrc(template);
+    DropDown.setImagesSrc(template);
     template.firstChild.style.display = data.droplab_hidden ? 'none' : 'block';
 
     return template.firstChild.outerHTML;
-  },
-
-  setImagesSrc: function(template) {
-    const images = [].slice.call(template.querySelectorAll('img[data-src]'));
-
-    images.forEach((image) => {
-      image.src = image.getAttribute('data-src');
-      image.removeAttribute('data-src');
-    });
-  },
+  }
 
-  show: function() {
+  show() {
     if (!this.hidden) return;
     this.list.style.display = 'block';
     this.currentIndex = 0;
     this.hidden = false;
-  },
+  }
 
-  hide: function() {
+  hide() {
     if (this.hidden) return;
     this.list.style.display = 'none';
     this.currentIndex = 0;
     this.hidden = true;
-  },
+  }
 
-  toggle: function () {
-    this.hidden ? this.show() : this.hide();
-  },
+  toggle() {
+    if (this.hidden) return this.show();
 
-  destroy: function() {
+    return this.hide();
+  }
+
+  destroy() {
     this.hide();
     this.list.removeEventListener('click', this.eventWrapper.clickEvent);
   }
-});
+
+  static setImagesSrc(template) {
+    const images = [...template.querySelectorAll('img[data-src]')];
+
+    images.forEach((image) => {
+      const img = image;
+
+      img.src = img.getAttribute('data-src');
+      img.removeAttribute('data-src');
+    });
+  }
+}
 
 export default DropDown;
diff --git a/app/assets/javascripts/droplab/drop_lab.js b/app/assets/javascripts/droplab/drop_lab.js
index 6eb9f314af7..2a02ede72bf 100644
--- a/app/assets/javascripts/droplab/drop_lab.js
+++ b/app/assets/javascripts/droplab/drop_lab.js
@@ -1,99 +1,99 @@
-/* eslint-disable */
-
 import HookButton from './hook_button';
 import HookInput from './hook_input';
 import utils from './utils';
 import Keyboard from './keyboard';
 import { DATA_TRIGGER } from './constants';
 
-var DropLab = function() {
-  this.ready = false;
-  this.hooks = [];
-  this.queuedData = [];
-  this.config = {};
+class DropLab {
+  constructor() {
+    this.ready = false;
+    this.hooks = [];
+    this.queuedData = [];
+    this.config = {};
 
-  this.eventWrapper = {};
-};
+    this.eventWrapper = {};
+  }
 
-Object.assign(DropLab.prototype, {
-  loadStatic: function(){
-    var dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`));
+  loadStatic() {
+    const dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`));
     this.addHooks(dropdownTriggers);
-  },
+  }
 
-  addData: function () {
-    var args = [].slice.apply(arguments);
-    this.applyArgs(args, '_addData');
-  },
+  addData(...args) {
+    this.applyArgs(args, 'processAddData');
+  }
 
-  setData: function() {
-    var args = [].slice.apply(arguments);
-    this.applyArgs(args, '_setData');
-  },
+  setData(...args) {
+    this.applyArgs(args, 'processSetData');
+  }
 
-  destroy: function() {
+  destroy() {
     this.hooks.forEach(hook => hook.destroy());
     this.hooks = [];
     this.removeEvents();
-  },
+  }
 
-  applyArgs: function(args, methodName) {
-    if (this.ready) return this[methodName].apply(this, args);
+  applyArgs(args, methodName) {
+    if (this.ready) return this[methodName](...args);
 
     this.queuedData = this.queuedData || [];
     this.queuedData.push(args);
-  },
 
-  _addData: function(trigger, data) {
-    this._processData(trigger, data, 'addData');
-  },
+    return this.ready;
+  }
+
+  processAddData(trigger, data) {
+    this.processData(trigger, data, 'addData');
+  }
 
-  _setData: function(trigger, data) {
-    this._processData(trigger, data, 'setData');
-  },
+  processSetData(trigger, data) {
+    this.processData(trigger, data, 'setData');
+  }
 
-  _processData: function(trigger, data, methodName) {
+  processData(trigger, data, methodName) {
     this.hooks.forEach((hook) => {
       if (Array.isArray(trigger)) hook.list[methodName](trigger);
 
       if (hook.trigger.id === trigger) hook.list[methodName](data);
     });
-  },
+  }
 
-  addEvents: function() {
-    this.eventWrapper.documentClicked = this.documentClicked.bind(this)
+  addEvents() {
+    this.eventWrapper.documentClicked = this.documentClicked.bind(this);
     document.addEventListener('click', this.eventWrapper.documentClicked);
-  },
+  }
 
-  documentClicked: function(e) {
+  documentClicked(e) {
     let thisTag = e.target;
 
     if (thisTag.tagName !== 'UL') thisTag = utils.closest(thisTag, 'UL');
-    if (utils.isDropDownParts(thisTag, this.hooks) || utils.isDropDownParts(e.target, this.hooks)) return;
+    if (utils.isDropDownParts(thisTag, this.hooks)) return;
+    if (utils.isDropDownParts(e.target, this.hooks)) return;
 
     this.hooks.forEach(hook => hook.list.hide());
-  },
+  }
 
-  removeEvents: function(){
+  removeEvents() {
     document.removeEventListener('click', this.eventWrapper.documentClicked);
-  },
-
-  changeHookList: function(trigger, list, plugins, config) {
-    const availableTrigger =  typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
+  }
 
+  changeHookList(trigger, list, plugins, config) {
+    const availableTrigger = typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
 
     this.hooks.forEach((hook, i) => {
-      hook.list.list.dataset.dropdownActive = false;
+      const aHook = hook;
+
+      aHook.list.list.dataset.dropdownActive = false;
 
-      if (hook.trigger !== availableTrigger) return;
+      if (aHook.trigger !== availableTrigger) return;
 
-      hook.destroy();
+      aHook.destroy();
       this.hooks.splice(i, 1);
       this.addHook(availableTrigger, list, plugins, config);
     });
-  },
+  }
 
-  addHook: function(hook, list, plugins, config) {
+  addHook(hook, list, plugins, config) {
     const availableHook = typeof hook === 'string' ? document.querySelector(hook) : hook;
     let availableList;
 
@@ -111,18 +111,18 @@ Object.assign(DropLab.prototype, {
     this.hooks.push(new HookObject(availableHook, availableList, plugins, config));
 
     return this;
-  },
+  }
 
-  addHooks: function(hooks, plugins, config) {
+  addHooks(hooks, plugins, config) {
     hooks.forEach(hook => this.addHook(hook, null, plugins, config));
     return this;
-  },
+  }
 
-  setConfig: function(obj){
+  setConfig(obj) {
     this.config = obj;
-  },
+  }
 
-  fireReady: function() {
+  fireReady() {
     const readyEvent = new CustomEvent('ready.dl', {
       detail: {
         dropdown: this,
@@ -131,10 +131,14 @@ Object.assign(DropLab.prototype, {
     document.dispatchEvent(readyEvent);
 
     this.ready = true;
-  },
+  }
 
-  init: function (hook, list, plugins, config) {
-    hook ? this.addHook(hook, list, plugins, config) : this.loadStatic();
+  init(hook, list, plugins, config) {
+    if (hook) {
+      this.addHook(hook, list, plugins, config);
+    } else {
+      this.loadStatic();
+    }
 
     this.addEvents();
 
@@ -146,7 +150,7 @@ Object.assign(DropLab.prototype, {
     this.queuedData = [];
 
     return this;
-  },
-});
+  }
+}
 
 export default DropLab;
diff --git a/app/assets/javascripts/droplab/hook.js b/app/assets/javascripts/droplab/hook.js
index 2f840083571..cf78165b0d8 100644
--- a/app/assets/javascripts/droplab/hook.js
+++ b/app/assets/javascripts/droplab/hook.js
@@ -1,22 +1,15 @@
-/* eslint-disable */
-
 import DropDown from './drop_down';
 
-var Hook = function(trigger, list, plugins, config){
-  this.trigger = trigger;
-  this.list = new DropDown(list);
-  this.type = 'Hook';
-  this.event = 'click';
-  this.plugins = plugins || [];
-  this.config = config || {};
-  this.id = trigger.id;
-};
-
-Object.assign(Hook.prototype, {
-
-  addEvents: function(){},
-
-  constructor: Hook,
-});
+class Hook {
+  constructor(trigger, list, plugins, config) {
+    this.trigger = trigger;
+    this.list = new DropDown(list);
+    this.type = 'Hook';
+    this.event = 'click';
+    this.plugins = plugins || [];
+    this.config = config || {};
+    this.id = trigger.id;
+  }
+}
 
 export default Hook;
diff --git a/app/assets/javascripts/droplab/hook_button.js b/app/assets/javascripts/droplab/hook_button.js
index be8aead1303..af45eba74e7 100644
--- a/app/assets/javascripts/droplab/hook_button.js
+++ b/app/assets/javascripts/droplab/hook_button.js
@@ -1,65 +1,58 @@
-/* eslint-disable */
-
 import Hook from './hook';
 
-var HookButton = function(trigger, list, plugins, config) {
-  Hook.call(this, trigger, list, plugins, config);
-
-  this.type = 'button';
-  this.event = 'click';
+class HookButton extends Hook {
+  constructor(trigger, list, plugins, config) {
+    super(trigger, list, plugins, config);
 
-  this.eventWrapper = {};
+    this.type = 'button';
+    this.event = 'click';
 
-  this.addEvents();
-  this.addPlugins();
-};
+    this.eventWrapper = {};
 
-HookButton.prototype = Object.create(Hook.prototype);
+    this.addEvents();
+    this.addPlugins();
+  }
 
-Object.assign(HookButton.prototype, {
-  addPlugins: function() {
+  addPlugins() {
     this.plugins.forEach(plugin => plugin.init(this));
-  },
+  }
 
-  clicked: function(e){
-    var buttonEvent = new CustomEvent('click.dl', {
+  clicked(e) {
+    const buttonEvent = new CustomEvent('click.dl', {
       detail: {
         hook: this,
       },
       bubbles: true,
-      cancelable: true
+      cancelable: true,
     });
     e.target.dispatchEvent(buttonEvent);
 
     this.list.toggle();
-  },
+  }
 
-  addEvents: function(){
+  addEvents() {
     this.eventWrapper.clicked = this.clicked.bind(this);
     this.trigger.addEventListener('click', this.eventWrapper.clicked);
-  },
+  }
 
-  removeEvents: function(){
+  removeEvents() {
     this.trigger.removeEventListener('click', this.eventWrapper.clicked);
-  },
+  }
 
-  restoreInitialState: function() {
+  restoreInitialState() {
     this.list.list.innerHTML = this.list.initialState;
-  },
+  }
 
-  removePlugins: function() {
+  removePlugins() {
     this.plugins.forEach(plugin => plugin.destroy());
-  },
+  }
 
-  destroy: function() {
+  destroy() {
     this.restoreInitialState();
 
     this.removeEvents();
     this.removePlugins();
-  },
-
-  constructor: HookButton,
-});
-
+  }
+}
 
 export default HookButton;
diff --git a/app/assets/javascripts/droplab/hook_input.js b/app/assets/javascripts/droplab/hook_input.js
index 05082334045..19131a64f2c 100644
--- a/app/assets/javascripts/droplab/hook_input.js
+++ b/app/assets/javascripts/droplab/hook_input.js
@@ -1,25 +1,23 @@
-/* eslint-disable */
-
 import Hook from './hook';
 
-var HookInput = function(trigger, list, plugins, config) {
-  Hook.call(this, trigger, list, plugins, config);
+class HookInput extends Hook {
+  constructor(trigger, list, plugins, config) {
+    super(trigger, list, plugins, config);
 
-  this.type = 'input';
-  this.event = 'input';
+    this.type = 'input';
+    this.event = 'input';
 
-  this.eventWrapper = {};
+    this.eventWrapper = {};
 
-  this.addEvents();
-  this.addPlugins();
-};
+    this.addEvents();
+    this.addPlugins();
+  }
 
-Object.assign(HookInput.prototype, {
-  addPlugins: function() {
+  addPlugins() {
     this.plugins.forEach(plugin => plugin.init(this));
-  },
+  }
 
-  addEvents: function(){
+  addEvents() {
     this.eventWrapper.mousedown = this.mousedown.bind(this);
     this.eventWrapper.input = this.input.bind(this);
     this.eventWrapper.keyup = this.keyup.bind(this);
@@ -29,19 +27,19 @@ Object.assign(HookInput.prototype, {
     this.trigger.addEventListener('input', this.eventWrapper.input);
     this.trigger.addEventListener('keyup', this.eventWrapper.keyup);
     this.trigger.addEventListener('keydown', this.eventWrapper.keydown);
-  },
+  }
 
-  removeEvents: function() {
+  removeEvents() {
     this.hasRemovedEvents = true;
 
     this.trigger.removeEventListener('mousedown', this.eventWrapper.mousedown);
     this.trigger.removeEventListener('input', this.eventWrapper.input);
     this.trigger.removeEventListener('keyup', this.eventWrapper.keyup);
     this.trigger.removeEventListener('keydown', this.eventWrapper.keydown);
-  },
+  }
 
-  input: function(e) {
-    if(this.hasRemovedEvents) return;
+  input(e) {
+    if (this.hasRemovedEvents) return;
 
     this.list.show();
 
@@ -51,12 +49,12 @@ Object.assign(HookInput.prototype, {
         text: e.target.value,
       },
       bubbles: true,
-      cancelable: true
+      cancelable: true,
     });
     e.target.dispatchEvent(inputEvent);
-  },
+  }
 
-  mousedown: function(e) {
+  mousedown(e) {
     if (this.hasRemovedEvents) return;
 
     const mouseEvent = new CustomEvent('mousedown.dl', {
@@ -68,21 +66,21 @@ Object.assign(HookInput.prototype, {
       cancelable: true,
     });
     e.target.dispatchEvent(mouseEvent);
-  },
+  }
 
-  keyup: function(e) {
+  keyup(e) {
     if (this.hasRemovedEvents) return;
 
     this.keyEvent(e, 'keyup.dl');
-  },
+  }
 
-  keydown: function(e) {
+  keydown(e) {
     if (this.hasRemovedEvents) return;
 
     this.keyEvent(e, 'keydown.dl');
-  },
+  }
 
-  keyEvent: function(e, eventName) {
+  keyEvent(e, eventName) {
     this.list.show();
 
     const keyEvent = new CustomEvent(eventName, {
@@ -96,17 +94,17 @@ Object.assign(HookInput.prototype, {
       cancelable: true,
     });
     e.target.dispatchEvent(keyEvent);
-  },
+  }
 
-  restoreInitialState: function() {
+  restoreInitialState() {
     this.list.list.innerHTML = this.list.initialState;
-  },
+  }
 
-  removePlugins: function() {
+  removePlugins() {
     this.plugins.forEach(plugin => plugin.destroy());
-  },
+  }
 
-  destroy: function() {
+  destroy() {
     this.restoreInitialState();
 
     this.removeEvents();
@@ -114,6 +112,6 @@ Object.assign(HookInput.prototype, {
 
     this.list.destroy();
   }
-});
+}
 
 export default HookInput;
diff --git a/app/assets/javascripts/droplab/keyboard.js b/app/assets/javascripts/droplab/keyboard.js
index 36740a430e1..02f1b805ce4 100644
--- a/app/assets/javascripts/droplab/keyboard.js
+++ b/app/assets/javascripts/droplab/keyboard.js
@@ -8,7 +8,7 @@ const Keyboard = function () {
   var isUpArrow = false;
   var isDownArrow = false;
   var removeHighlight = function removeHighlight(list) {
-    var itemElements = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider)'), 0);
+    var itemElements = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider):not(.hidden)'), 0);
     var listItems = [];
     for(var i = 0; i < itemElements.length; i++) {
       var listItem = itemElements[i];
diff --git a/app/assets/javascripts/droplab/plugins/ajax.js b/app/assets/javascripts/droplab/plugins/ajax.js
index 12afe53ed76..c0da5866139 100644
--- a/app/assets/javascripts/droplab/plugins/ajax.js
+++ b/app/assets/javascripts/droplab/plugins/ajax.js
@@ -1,25 +1,8 @@
 /* eslint-disable */
 
+import AjaxCache from '~/lib/utils/ajax_cache';
+
 const Ajax = {
-  _loadUrlData: function _loadUrlData(url) {
-    var self = this;
-    return new Promise(function(resolve, reject) {
-      var xhr = new XMLHttpRequest;
-      xhr.open('GET', url, true);
-      xhr.onreadystatechange = function () {
-        if(xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
-            var data = JSON.parse(xhr.responseText);
-            self.cache[url] = data;
-            return resolve(data);
-          } else {
-            return reject([xhr.responseText, xhr.status]);
-          }
-        }
-      };
-      xhr.send();
-    });
-  },
   _loadData: function _loadData(data, config, self) {
     if (config.loadingTemplate) {
       var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
@@ -31,7 +14,6 @@ const Ajax = {
   init: function init(hook) {
     var self = this;
     self.destroyed = false;
-    self.cache = self.cache || {};
     var config = hook.config.Ajax;
     this.hook = hook;
     if (!config || !config.endpoint || !config.method) {
@@ -48,14 +30,10 @@ const Ajax = {
       this.listTemplate = dynamicList.outerHTML;
       dynamicList.outerHTML = loadingTemplate.outerHTML;
     }
-    if (self.cache[config.endpoint]) {
-      self._loadData(self.cache[config.endpoint], config, self);
-    } else {
-      this._loadUrlData(config.endpoint)
-        .then(function(d) {
-          self._loadData(d, config, self);
-        }, config.onError).catch(config.onError);
-    }
+
+    AjaxCache.retrieve(config.endpoint)
+      .then((data) => self._loadData(data, config, self))
+      .catch(config.onError);
   },
   destroy: function() {
     this.destroyed = true;
diff --git a/app/assets/javascripts/droplab/plugins/ajax_filter.js b/app/assets/javascripts/droplab/plugins/ajax_filter.js
index cfd7e2ca189..1db20227a16 100644
--- a/app/assets/javascripts/droplab/plugins/ajax_filter.js
+++ b/app/assets/javascripts/droplab/plugins/ajax_filter.js
@@ -1,4 +1,5 @@
 /* eslint-disable */
+import AjaxCache from '../../lib/utils/ajax_cache';
 
 const AjaxFilter = {
   init: function(hook) {
@@ -58,50 +59,27 @@ const AjaxFilter = {
     this.loading = true;
     var params = config.params || {};
     params[config.searchKey] = searchValue;
-    var self = this;
-    self.cache = self.cache || {};
     var url = config.endpoint + this.buildParams(params);
-    var urlCachedData = self.cache[url];
-    if (urlCachedData) {
-      self._loadData(urlCachedData, config, self);
-    } else {
-      this._loadUrlData(url)
-        .then(function(data) {
-          self._loadData(data, config, self);
-        }, config.onError).catch(config.onError);
-    }
-  },
-
-  _loadUrlData: function _loadUrlData(url) {
-    var self = this;
-    return new Promise(function(resolve, reject) {
-      var xhr = new XMLHttpRequest;
-      xhr.open('GET', url, true);
-      xhr.onreadystatechange = function () {
-        if(xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
-            var data = JSON.parse(xhr.responseText);
-            self.cache[url] = data;
-            return resolve(data);
-          } else {
-            return reject([xhr.responseText, xhr.status]);
-          }
+    return AjaxCache.retrieve(url)
+      .then((data) => {
+        this._loadData(data, config);
+        if (config.onLoadingFinished) {
+          config.onLoadingFinished(data);
         }
-      };
-      xhr.send();
-    });
+      })
+      .catch(config.onError);
   },
 
-  _loadData: function _loadData(data, config, self) {
-    const list = self.hook.list;
+  _loadData(data, config) {
+    const list = this.hook.list;
     if (config.loadingTemplate && list.data === undefined ||
       list.data.length === 0) {
       const dataLoadingTemplate = list.list.querySelector('[data-loading-template]');
       if (dataLoadingTemplate) {
-        dataLoadingTemplate.outerHTML = self.listTemplate;
+        dataLoadingTemplate.outerHTML = this.listTemplate;
       }
     }
-    if (!self.destroyed) {
+    if (!this.destroyed) {
       var hookListChildren = list.list.children;
       var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
       if (onlyDynamicList && data.length === 0) {
@@ -109,7 +87,7 @@ const AjaxFilter = {
       }
       list.setData.call(list, data);
     }
-    self.notLoading();
+    this.notLoading();
     list.currentIndex = 0;
   },
 
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index b3a76fbb43e..98ddcc20036 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -1,108 +1,159 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, one-var, no-var, one-var-declaration-per-line, no-unused-vars, camelcase, quotes, no-useless-concat, prefer-template, quote-props, comma-dangle, object-shorthand, consistent-return, prefer-arrow-callback */
 /* global Dropzone */
 
-require('./preview_markdown');
+import './preview_markdown';
 
 window.DropzoneInput = (function() {
   function DropzoneInput(form) {
-    var $mdArea, alertAttr, alertClass, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divAlert, divHover, divSpinner, dropzone, form_dropzone, form_textarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, max_file_size, pasteText, uploads_path, showError, showSpinner, uploadFile, uploadProgress;
+    var updateAttachingMessage, $attachingFileMessage, $mdArea, $attachButton, $cancelButton, $retryLink, $uploadingErrorContainer, $uploadingErrorMessage, $uploadProgress, $uploadingProgressContainer, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divHover, divSpinner, dropzone, $formDropzone, formTextarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, maxFileSize, pasteText, uploadsPath, showError, showSpinner, uploadFile, addFileToForm;
     Dropzone.autoDiscover = false;
-    alertClass = "alert alert-danger alert-dismissable div-dropzone-alert";
-    alertAttr = "class=\"close\" data-dismiss=\"alert\"" + "aria-hidden=\"true\"";
-    divHover = "<div class=\"div-dropzone-hover\"></div>";
-    divSpinner = "<div class=\"div-dropzone-spinner\"></div>";
-    divAlert = "<div class=\"" + alertClass + "\"></div>";
-    iconPaperclip = "<i class=\"fa fa-paperclip div-dropzone-icon\"></i>";
-    iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>";
-    uploadProgress = $("<div class=\"div-dropzone-progress\"></div>");
-    btnAlert = "<button type=\"button\"" + alertAttr + ">&times;</button>";
-    uploads_path = window.uploads_path || null;
-    max_file_size = gon.max_file_size || 10;
-    form_textarea = $(form).find(".js-gfm-input");
-    form_textarea.wrap("<div class=\"div-dropzone\"></div>");
-    form_textarea.on('paste', (function(_this) {
+    divHover = '<div class="div-dropzone-hover"></div>';
+    iconPaperclip = '<i class="fa fa-paperclip div-dropzone-icon"></i>';
+    $attachButton = form.find('.button-attach-file');
+    $attachingFileMessage = form.find('.attaching-file-message');
+    $cancelButton = form.find('.button-cancel-uploading-files');
+    $retryLink = form.find('.retry-uploading-link');
+    $uploadProgress = form.find('.uploading-progress');
+    $uploadingErrorContainer = form.find('.uploading-error-container');
+    $uploadingErrorMessage = form.find('.uploading-error-message');
+    $uploadingProgressContainer = form.find('.uploading-progress-container');
+    uploadsPath = window.uploads_path || null;
+    maxFileSize = gon.max_file_size || 10;
+    formTextarea = form.find('.js-gfm-input');
+    formTextarea.wrap('<div class="div-dropzone"></div>');
+    formTextarea.on('paste', (function(_this) {
       return function(event) {
         return handlePaste(event);
       };
     })(this));
-    $mdArea = $(form_textarea).closest('.md-area');
-    $(form).setupMarkdownPreview();
-    form_dropzone = $(form).find('.div-dropzone');
-    form_dropzone.parent().addClass("div-dropzone-wrapper");
-    form_dropzone.append(divHover);
-    form_dropzone.find(".div-dropzone-hover").append(iconPaperclip);
-    form_dropzone.append(divSpinner);
-    form_dropzone.find(".div-dropzone-spinner").append(iconSpinner);
-    form_dropzone.find(".div-dropzone-spinner").append(uploadProgress);
-    form_dropzone.find(".div-dropzone-spinner").css({
-      "opacity": 0,
-      "display": "none"
-    });
 
-    if (!uploads_path) return;
+    // Add dropzone area to the form.
+    $mdArea = formTextarea.closest('.md-area');
+    form.setupMarkdownPreview();
+    $formDropzone = form.find('.div-dropzone');
+    $formDropzone.parent().addClass('div-dropzone-wrapper');
+    $formDropzone.append(divHover);
+    $formDropzone.find('.div-dropzone-hover').append(iconPaperclip);
+
+    if (!uploadsPath) return;
 
-    dropzone = form_dropzone.dropzone({
-      url: uploads_path,
-      dictDefaultMessage: "",
+    dropzone = $formDropzone.dropzone({
+      url: uploadsPath,
+      dictDefaultMessage: '',
       clickable: true,
-      paramName: "file",
-      maxFilesize: max_file_size,
+      paramName: 'file',
+      maxFilesize: maxFileSize,
       uploadMultiple: false,
       headers: {
-        "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
+        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
       },
       previewContainer: false,
       processing: function() {
-        return $(".div-dropzone-alert").alert("close");
+        return $('.div-dropzone-alert').alert('close');
       },
       dragover: function() {
         $mdArea.addClass('is-dropzone-hover');
-        form.find(".div-dropzone-hover").css("opacity", 0.7);
+        form.find('.div-dropzone-hover').css('opacity', 0.7);
       },
       dragleave: function() {
         $mdArea.removeClass('is-dropzone-hover');
-        form.find(".div-dropzone-hover").css("opacity", 0);
+        form.find('.div-dropzone-hover').css('opacity', 0);
       },
       drop: function() {
         $mdArea.removeClass('is-dropzone-hover');
-        form.find(".div-dropzone-hover").css("opacity", 0);
-        form_textarea.focus();
+        form.find('.div-dropzone-hover').css('opacity', 0);
+        formTextarea.focus();
       },
       success: function(header, response) {
         const processingFileCount = this.getQueuedFiles().length + this.getUploadingFiles().length;
         const shouldPad = processingFileCount >= 1;
 
         pasteText(response.link.markdown, shouldPad);
+        // Show 'Attach a file' link only when all files have been uploaded.
+        if (!processingFileCount) $attachButton.removeClass('hide');
+        addFileToForm(response.link.url);
       },
-      error: function(temp) {
-        var checkIfMsgExists, errorAlert;
-        errorAlert = $(form).find('.error-alert');
-        checkIfMsgExists = errorAlert.children().length;
-        if (checkIfMsgExists === 0) {
-          errorAlert.append(divAlert);
-          $(".div-dropzone-alert").append(btnAlert + "Attaching the file failed.");
-        }
+      error: function(file, errorMessage = 'Attaching the file failed.', xhr) {
+        // If 'error' event is fired by dropzone, the second parameter is error message.
+        // If the 'errorMessage' parameter is empty, the default error message is set.
+        // If the 'error' event is fired by backend (xhr) error response, the third parameter is
+        // xhr object (xhr.responseText is error message).
+        // On error we hide the 'Attach' and 'Cancel' buttons
+        // and show an error.
+
+        // If there's xhr error message, let's show it instead of dropzone's one.
+        const message = xhr ? xhr.responseText : errorMessage;
+
+        $uploadingErrorContainer.removeClass('hide');
+        $uploadingErrorMessage.html(message);
+        $attachButton.addClass('hide');
+        $cancelButton.addClass('hide');
       },
       totaluploadprogress: function(totalUploadProgress) {
-        uploadProgress.text(Math.round(totalUploadProgress) + "%");
+        updateAttachingMessage(this.files, $attachingFileMessage);
+        $uploadProgress.text(Math.round(totalUploadProgress) + '%');
+      },
+      sending: function(file) {
+        // DOM elements already exist.
+        // Instead of dynamically generating them,
+        // we just either hide or show them.
+        $attachButton.addClass('hide');
+        $uploadingErrorContainer.addClass('hide');
+        $uploadingProgressContainer.removeClass('hide');
+        $cancelButton.removeClass('hide');
       },
-      sending: function() {
-        form_dropzone.find(".div-dropzone-spinner").css({
-          "opacity": 0.7,
-          "display": "inherit"
-        });
+      removedfile: function() {
+        $attachButton.removeClass('hide');
+        $cancelButton.addClass('hide');
+        $uploadingProgressContainer.addClass('hide');
+        $uploadingErrorContainer.addClass('hide');
       },
       queuecomplete: function() {
-        uploadProgress.text("");
-        $(".dz-preview").remove();
-        $(".markdown-area").trigger("input");
-        $(".div-dropzone-spinner").css({
-          "opacity": 0,
-          "display": "none"
-        });
+        $('.dz-preview').remove();
+        $('.markdown-area').trigger('input');
+
+        $uploadingProgressContainer.addClass('hide');
+        $cancelButton.addClass('hide');
       }
     });
-    child = $(dropzone[0]).children("textarea");
+
+    child = $(dropzone[0]).children('textarea');
+
+    // removeAllFiles(true) stops uploading files (if any)
+    // and remove them from dropzone files queue.
+    $cancelButton.on('click', (e) => {
+      const target = e.target.closest('form').querySelector('.div-dropzone');
+
+      e.preventDefault();
+      e.stopPropagation();
+      Dropzone.forElement(target).removeAllFiles(true);
+    });
+
+    // If 'error' event is fired, we store a failed files,
+    // clear dropzone files queue, change status of failed files to undefined,
+    // and add that files to the dropzone files queue again.
+    // addFile() adds file to dropzone files queue and upload it.
+    $retryLink.on('click', (e) => {
+      const dropzoneInstance = Dropzone.forElement(e.target.closest('form').querySelector('.div-dropzone'));
+      const failedFiles = dropzoneInstance.files;
+
+      e.preventDefault();
+
+      // 'true' parameter of removeAllFiles() cancels uploading of files that are being uploaded at the moment.
+      dropzoneInstance.removeAllFiles(true);
+
+      failedFiles.map((failedFile, i) => {
+        const file = failedFile;
+
+        if (file.status === Dropzone.ERROR) {
+          file.status = undefined;
+          file.accepted = undefined;
+        }
+
+        return dropzoneInstance.addFile(file);
+      });
+    });
+
     handlePaste = function(event) {
       var filename, image, pasteEvent, text;
       pasteEvent = event.originalEvent;
@@ -110,25 +161,27 @@ window.DropzoneInput = (function() {
         image = isImage(pasteEvent);
         if (image) {
           event.preventDefault();
-          filename = getFilename(pasteEvent) || "image.png";
-          text = "{{" + filename + "}}";
+          filename = getFilename(pasteEvent) || 'image.png';
+          text = `{{${filename}}}`;
           pasteText(text);
           return uploadFile(image.getAsFile(), filename);
         }
       }
     };
+
     isImage = function(data) {
       var i, item;
       i = 0;
       while (i < data.clipboardData.items.length) {
         item = data.clipboardData.items[i];
-        if (item.type.indexOf("image") !== -1) {
+        if (item.type.indexOf('image') !== -1) {
           return item;
         }
         i += 1;
       }
       return false;
     };
+
     pasteText = function(text, shouldPad) {
       var afterSelection, beforeSelection, caretEnd, caretStart, textEnd;
       var formattedText = text;
@@ -142,31 +195,38 @@ window.DropzoneInput = (function() {
       $(child).val(beforeSelection + formattedText + afterSelection);
       textarea.setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
       textarea.style.height = `${textarea.scrollHeight}px`;
-      return form_textarea.trigger("input");
+      formTextarea.get(0).dispatchEvent(new Event('input'));
+      return formTextarea.trigger('input');
     };
+
+    addFileToForm = function(path) {
+      $(form).append('<input type="hidden" name="files[]" value="' + _.escape(path) + '">');
+    };
+
     getFilename = function(e) {
       var value;
       if (window.clipboardData && window.clipboardData.getData) {
-        value = window.clipboardData.getData("Text");
+        value = window.clipboardData.getData('Text');
       } else if (e.clipboardData && e.clipboardData.getData) {
-        value = e.clipboardData.getData("text/plain");
+        value = e.clipboardData.getData('text/plain');
       }
       value = value.split("\r");
       return value.first();
     };
+
     uploadFile = function(item, filename) {
       var formData;
       formData = new FormData();
-      formData.append("file", item, filename);
+      formData.append('file', item, filename);
       return $.ajax({
-        url: uploads_path,
-        type: "POST",
+        url: uploadsPath,
+        type: 'POST',
         data: formData,
-        dataType: "json",
+        dataType: 'json',
         processData: false,
         contentType: false,
         headers: {
-          "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
+          'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
         },
         beforeSend: function() {
           showSpinner();
@@ -183,44 +243,54 @@ window.DropzoneInput = (function() {
         }
       });
     };
+
+    updateAttachingMessage = (files, messageContainer) => {
+      let attachingMessage;
+      const filesCount = files.filter(function(file) {
+        return file.status === 'uploading' ||
+               file.status === 'queued';
+      }).length;
+
+      // Dinamycally change uploading files text depending on files number in
+      // dropzone files queue.
+      if (filesCount > 1) {
+        attachingMessage = 'Attaching ' + filesCount + ' files -';
+      } else {
+        attachingMessage = 'Attaching a file -';
+      }
+
+      messageContainer.text(attachingMessage);
+    };
+
     insertToTextArea = function(filename, url) {
       return $(child).val(function(index, val) {
-        return val.replace("{{" + filename + "}}", url);
+        return val.replace(`{{${filename}}}`, url);
       });
     };
+
     appendToTextArea = function(url) {
       return $(child).val(function(index, val) {
         return val + url + "\n";
       });
     };
+
     showSpinner = function(e) {
-      return form.find(".div-dropzone-spinner").css({
-        "opacity": 0.7,
-        "display": "inherit"
-      });
+      return $uploadingProgressContainer.removeClass('hide');
     };
+
     closeSpinner = function() {
-      return form.find(".div-dropzone-spinner").css({
-        "opacity": 0,
-        "display": "none"
-      });
+      return $uploadingProgressContainer.addClass('hide');
     };
+
     showError = function(message) {
-      var checkIfMsgExists, errorAlert;
-      errorAlert = $(form).find('.error-alert');
-      checkIfMsgExists = errorAlert.children().length;
-      if (checkIfMsgExists === 0) {
-        errorAlert.append(divAlert);
-        return $(".div-dropzone-alert").append(btnAlert + message);
-      }
+      $uploadingErrorContainer.removeClass('hide');
+      $uploadingErrorMessage.html(message);
     };
-    closeAlertMessage = function() {
-      return form.find(".div-dropzone-alert").alert("close");
-    };
-    form.find(".markdown-selector").click(function(e) {
+
+    form.find('.markdown-selector').click(function(e) {
       e.preventDefault();
       $(this).closest('.gfm-form').find('.div-dropzone').click();
-      form_textarea.focus();
+      formTextarea.focus();
     });
   }
 
diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue
index e0088d496eb..8120ef182d4 100644
--- a/app/assets/javascripts/environments/components/environment.vue
+++ b/app/assets/javascripts/environments/components/environment.vue
@@ -1,19 +1,28 @@
 <script>
 /* global Flash */
+import Visibility from 'visibilityjs';
 import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from './environments_table.vue';
+import environmentTable from './environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
-import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import tablePagination from '../../vue_shared/components/table_pagination.vue';
 import '../../lib/utils/common_utils';
 import eventHub from '../event_hub';
+import Poll from '../../lib/utils/poll';
+import environmentsMixin from '../mixins/environments_mixin';
 
 export default {
 
   components: {
-    'environment-table': EnvironmentTable,
-    'table-pagination': TablePaginationComponent,
+    environmentTable,
+    tablePagination,
+    loadingIcon,
   },
 
+  mixins: [
+    environmentsMixin,
+  ],
+
   data() {
     const environmentsData = document.querySelector('#environments-list-view').dataset;
     const store = new EnvironmentsStore();
@@ -33,6 +42,7 @@ export default {
       projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath,
       newEnvironmentPath: environmentsData.newEnvironmentPath,
       helpPagePath: environmentsData.helpPagePath,
+      isMakingRequest: false,
 
       // Pagination Properties,
       paginationInformation: {},
@@ -63,17 +73,43 @@ export default {
    * Toggles loading property.
    */
   created() {
+    const scope = gl.utils.getParameterByName('scope') || this.visibility;
+    const page = gl.utils.getParameterByName('page') || this.pageNumber;
+
     this.service = new EnvironmentsService(this.endpoint);
 
-    this.fetchEnvironments();
+    const poll = new Poll({
+      resource: this.service,
+      method: 'get',
+      data: { scope, page },
+      successCallback: this.successCallback,
+      errorCallback: this.errorCallback,
+      notificationCallback: (isMakingRequest) => {
+        this.isMakingRequest = isMakingRequest;
+
+        // We need to verify if any folder is open to also fecth it
+        this.openFolders = this.store.getOpenFolders();
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      this.isLoading = true;
+      poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        poll.restart();
+      } else {
+        poll.stop();
+      }
+    });
 
-    eventHub.$on('refreshEnvironments', this.fetchEnvironments);
     eventHub.$on('toggleFolder', this.toggleFolder);
     eventHub.$on('postAction', this.postAction);
   },
 
-  beforeDestroyed() {
-    eventHub.$off('refreshEnvironments');
+  beforeDestroy() {
     eventHub.$off('toggleFolder');
     eventHub.$off('postAction');
   },
@@ -102,29 +138,13 @@ export default {
 
     fetchEnvironments() {
       const scope = gl.utils.getParameterByName('scope') || this.visibility;
-      const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+      const page = gl.utils.getParameterByName('page') || this.pageNumber;
 
       this.isLoading = true;
 
-      return this.service.get(scope, pageNumber)
-        .then(resp => ({
-          headers: resp.headers,
-          body: resp.json(),
-        }))
-        .then((response) => {
-          this.store.storeAvailableCount(response.body.available_count);
-          this.store.storeStoppedCount(response.body.stopped_count);
-          this.store.storeEnvironments(response.body.environments);
-          this.store.setPagination(response.headers);
-        })
-        .then(() => {
-          this.isLoading = false;
-        })
-        .catch(() => {
-          this.isLoading = false;
-          // eslint-disable-next-line no-new
-          new Flash('An error occurred while fetching the environments.');
-        });
+      return this.service.get({ scope, page })
+        .then(this.successCallback)
+        .catch(this.errorCallback);
     },
 
     fetchChildEnvironments(folder, folderUrl) {
@@ -144,9 +164,34 @@ export default {
     },
 
     postAction(endpoint) {
-      this.service.postAction(endpoint)
-        .then(() => this.fetchEnvironments())
-        .catch(() => new Flash('An error occured while making the request.'));
+      if (!this.isMakingRequest) {
+        this.isLoading = true;
+
+        this.service.postAction(endpoint)
+          .then(() => this.fetchEnvironments())
+          .catch(() => new Flash('An error occured while making the request.'));
+      }
+    },
+
+    successCallback(resp) {
+      this.saveData(resp);
+
+      // If folders are open while polling we need to open them again
+      if (this.openFolders.length) {
+        this.openFolders.map((folder) => {
+          // TODO - Move this to the backend
+          const folderUrl = `${window.location.pathname}/folders/${folder.folderName}`;
+
+          this.store.updateFolder(folder, 'isOpen', true);
+          return this.fetchChildEnvironments(folder, folderUrl);
+        });
+      }
+    },
+
+    errorCallback() {
+      this.isLoading = false;
+      // eslint-disable-next-line no-new
+      new Flash('An error occurred while fetching the environments.');
     },
   },
 };
@@ -185,15 +230,12 @@ export default {
       </div>
     </div>
 
-    <div class="content-list environments-container">
-      <div
-          class="environments-list-loading text-center"
-          v-if="isLoading">
-
-        <i
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true" />
-      </div>
+    <div class="environments-container">
+      <loading-icon
+        label="Loading environments"
+        size="3"
+        v-if="isLoading"
+        />
 
       <div
         class="blank-state blank-state-no-icon"
@@ -213,7 +255,7 @@ export default {
           v-if="canCreateEnvironmentParsed"
           :href="newEnvironmentPath"
           class="btn btn-create js-new-environment-button">
-          New Environment
+          New environment
         </a>
       </div>
 
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 63bffe8a998..a2448520a5f 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -1,6 +1,7 @@
 <script>
 import playIconSvg from 'icons/_icon_play.svg';
 import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
 export default {
   props: {
@@ -11,6 +12,10 @@ export default {
     },
   },
 
+  components: {
+    loadingIcon,
+  },
+
   data() {
     return {
       playIconSvg,
@@ -61,10 +66,7 @@ export default {
         <i
           class="fa fa-caret-down"
           aria-hidden="true"/>
-        <i
-          v-if="isLoading"
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true"/>
+        <loading-icon v-if="isLoading" />
       </span>
     </button>
 
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 0ffe9ea17fa..de2269118cd 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,5 +1,7 @@
 <script>
 import Timeago from 'timeago.js';
+import _ from 'underscore';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import '../../lib/utils/text_utility';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
@@ -19,6 +21,7 @@ const timeagoInstance = new Timeago();
 
 export default {
   components: {
+    userAvatarLink,
     'commit-component': CommitComponent,
     'actions-component': ActionsComponent,
     'external-url-component': ExternalUrlComponent,
@@ -59,7 +62,7 @@ export default {
     hasLastDeploymentKey() {
       if (this.model &&
         this.model.last_deployment &&
-        !this.$options.isObjectEmpty(this.model.last_deployment)) {
+        !_.isEmpty(this.model.last_deployment)) {
         return true;
       }
       return false;
@@ -310,8 +313,8 @@ export default {
      */
     deploymentHasUser() {
       return this.model &&
-        !this.$options.isObjectEmpty(this.model.last_deployment) &&
-        !this.$options.isObjectEmpty(this.model.last_deployment.user);
+        !_.isEmpty(this.model.last_deployment) &&
+        !_.isEmpty(this.model.last_deployment.user);
     },
 
     /**
@@ -322,8 +325,8 @@ export default {
      */
     deploymentUser() {
       if (this.model &&
-        !this.$options.isObjectEmpty(this.model.last_deployment) &&
-        !this.$options.isObjectEmpty(this.model.last_deployment.user)) {
+        !_.isEmpty(this.model.last_deployment) &&
+        !_.isEmpty(this.model.last_deployment.user)) {
         return this.model.last_deployment.user;
       }
       return {};
@@ -338,8 +341,8 @@ export default {
      */
     shouldRenderBuildName() {
       return !this.model.isFolder &&
-        !this.$options.isObjectEmpty(this.model.last_deployment) &&
-        !this.$options.isObjectEmpty(this.model.last_deployment.deployable);
+        !_.isEmpty(this.model.last_deployment) &&
+        !_.isEmpty(this.model.last_deployment.deployable);
     },
 
     /**
@@ -380,7 +383,7 @@ export default {
      */
     shouldRenderDeploymentID() {
       return !this.model.isFolder &&
-        !this.$options.isObjectEmpty(this.model.last_deployment) &&
+        !_.isEmpty(this.model.last_deployment) &&
         this.model.last_deployment.iid !== undefined;
     },
 
@@ -410,21 +413,6 @@ export default {
     },
   },
 
-  /**
-   * Helper to verify if certain given object are empty.
-   * Should be replaced by lodash _.isEmpty - https://lodash.com/docs/4.17.2#isEmpty
-   * @param  {Object} object
-   * @returns {Bollean}
-   */
-  isObjectEmpty(object) {
-    for (const key in object) { // eslint-disable-line
-      if (hasOwnProperty.call(object, key)) {
-        return false;
-      }
-    }
-    return true;
-  },
-
   methods: {
     onClickFolder() {
       eventHub.$emit('toggleFolder', this.model, this.folderUrl);
@@ -433,14 +421,21 @@ export default {
 };
 </script>
 <template>
-  <tr :class="{ 'js-child-row': model.isChildren }">
-    <td>
+  <div
+    :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }"
+    role="row">
+    <div class="table-section section-10" role="gridcell">
+      <div
+        v-if="!model.isFolder"
+        class="table-mobile-header"
+        role="rowheader">
+        Environment
+      </div>
       <a
         v-if="!model.isFolder"
-        class="environment-name"
-        :class="{ 'prepend-left-default': model.isChildren }"
+        class="environment-name flex-truncate-parent table-mobile-content"
         :href="environmentPath">
-        {{model.name}}
+        <span class="flex-truncate-child">{{model.name}}</span>
       </a>
       <span
         v-else
@@ -473,40 +468,44 @@ export default {
           {{model.size}}
         </span>
       </span>
-    </td>
+    </div>
 
-    <td class="deployment-column">
+    <div class="table-section section-10 deployment-column hidden-xs hidden-sm" role="gridcell">
       <span v-if="shouldRenderDeploymentID">
         {{deploymentInternalId}}
       </span>
 
       <span v-if="!model.isFolder && deploymentHasUser">
         by
-        <a
-          :href="deploymentUser.web_url"
-          class="js-deploy-user-container">
-          <img
-            class="avatar has-tooltip s20"
-            :src="deploymentUser.avatar_url"
-            :alt="userImageAltDescription"
-            :title="deploymentUser.username" />
-        </a>
+        <user-avatar-link
+          class="js-deploy-user-container"
+          :link-href="deploymentUser.web_url"
+          :img-src="deploymentUser.avatar_url"
+          :img-alt="userImageAltDescription"
+          :tooltip-text="deploymentUser.username"
+        />
       </span>
-    </td>
+    </div>
 
-    <td class="environments-build-cell">
+    <div class="table-section section-15 hidden-xs hidden-sm" role="gridcell">
       <a
         v-if="shouldRenderBuildName"
         class="build-link"
         :href="buildPath">
         {{buildName}}
       </a>
-    </td>
+    </div>
 
-    <td>
+    <div class="table-section section-25" role="gridcell">
+      <div
+        v-if="!model.isFolder"
+        role="rowheader"
+        class="table-mobile-header">
+        Commit
+      </div>
       <div
         v-if="!model.isFolder && hasLastDeploymentKey"
-        class="js-commit-component">
+        class="js-commit-component table-mobile-content">
         <commit-component
           :tag="commitTag"
           :commit-ref="commitRef"
@@ -515,25 +514,31 @@ export default {
           :title="commitTitle"
           :author="commitAuthor"/>
       </div>
-      <p
+      <div
         v-if="!model.isFolder && !hasLastDeploymentKey"
-        class="commit-title">
+        class="commit-title table-mobile-content">
         No deployments yet
-      </p>
-    </td>
+      </div>
+    </div>
 
-    <td>
+    <div class="table-section section-10" role="gridcell">
+      <div
+        v-if="!model.isFolder"
+        role="rowheader"
+        class="table-mobile-header">
+        Updated
+      </div>
       <span
         v-if="!model.isFolder && canShowDate"
-        class="environment-created-date-timeago">
+        class="environment-created-date-timeago table-mobile-content">
         {{createdDate}}
       </span>
-    </td>
+    </div>
 
-    <td class="environments-actions">
+    <div class="table-section section-30 environments-actions table-button-footer" role="gridcell">
       <div
         v-if="!model.isFolder"
-        class="btn-group pull-right"
+        class="btn-group environment-action-buttons"
         role="group">
 
         <actions-component
@@ -567,6 +572,6 @@ export default {
           :retry-url="retryUrl"
           />
       </div>
-    </td>
-  </tr>
+    </div>
+  </div>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 79c019b3491..07cf92281a0 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -19,7 +19,7 @@ export default {
 </script>
 <template>
   <a
-    class="btn monitoring-url has-tooltip"
+    class="btn monitoring-url has-tooltip hidden-xs hidden-sm"
     data-container="body"
     rel="noopener noreferrer nofollow"
     :href="monitoringUrl"
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 44b8730fd09..49dba38edfb 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -6,6 +6,7 @@
  * Makes a post request when the button is clicked.
  */
 import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
 export default {
   props: {
@@ -20,6 +21,10 @@ export default {
     },
   },
 
+  components: {
+    loadingIcon,
+  },
+
   data() {
     return {
       isLoading: false,
@@ -38,7 +43,7 @@ export default {
 <template>
   <button
     type="button"
-    class="btn"
+    class="btn hidden-xs hidden-sm"
     @click="onClick"
     :disabled="isLoading">
 
@@ -49,9 +54,6 @@ export default {
       Rollback
     </span>
 
-    <i
-      v-if="isLoading"
-      class="fa fa-spinner fa-spin"
-      aria-hidden="true" />
+    <loading-icon v-if="isLoading" />
   </button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index f483ea7e937..091c543860b 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -4,6 +4,7 @@
  * Used in environments table.
  */
 import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
 export default {
   props: {
@@ -19,6 +20,10 @@ export default {
     };
   },
 
+  components: {
+    loadingIcon,
+  },
+
   computed: {
     title() {
       return 'Stop';
@@ -42,7 +47,7 @@ export default {
 <template>
   <button
     type="button"
-    class="btn stop-env-link has-tooltip"
+    class="btn stop-env-link has-tooltip hidden-xs hidden-sm"
     data-container="body"
     @click="onClick"
     :disabled="isLoading"
@@ -51,9 +56,6 @@ export default {
     <i
       class="fa fa-stop stop-env-icon"
       aria-hidden="true" />
-    <i
-      v-if="isLoading"
-      class="fa fa-spinner fa-spin"
-      aria-hidden="true" />
+    <loading-icon v-if="isLoading" />
   </button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
index c8c1f17d4d8..1ca65a79951 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.vue
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -29,7 +29,7 @@ export default {
 </script>
 <template>
   <a
-    class="btn terminal-button has-tooltip"
+    class="btn terminal-button has-tooltip hidden-xs hidden-sm"
     data-container="body"
     :title="title"
     :aria-label="title"
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 15eedaf76e1..b1fd9db650b 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -3,10 +3,12 @@
  * Render environments table.
  */
 import EnvironmentTableRowComponent from './environment_item.vue';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
 export default {
   components: {
     'environment-item': EnvironmentTableRowComponent,
+    loadingIcon,
   },
 
   props: {
@@ -43,70 +45,59 @@ export default {
 };
 </script>
 <template>
-  <table class="table ci-table">
-    <thead>
-      <tr>
-        <th class="environments-name">
-          Environment
-        </th>
-        <th class="environments-deploy">
-          Last deployment
-        </th>
-        <th class="environments-build">
-          Job
-        </th>
-        <th class="environments-commit">
-          Commit
-        </th>
-        <th class="environments-date">
-          Updated
-        </th>
-        <th class="environments-actions"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <template
-        v-for="model in environments"
-        v-bind:model="model">
-        <tr
-          is="environment-item"
-          :model="model"
-          :can-create-deployment="canCreateDeployment"
-          :can-read-environment="canReadEnvironment"
-          />
+  <div class="ci-table" role="grid">
+    <div class="gl-responsive-table-row table-row-header" role="row">
+      <div class="table-section section-10 environments-name" role="columnheader">
+        Environment
+      </div>
+      <div class="table-section section-10 environments-deploy" role="columnheader">
+        Deployment
+      </div>
+      <div class="table-section section-15 environments-build" role="columnheader">
+        Job
+      </div>
+      <div class="table-section section-25 environments-commit" role="columnheader">
+        Commit
+      </div>
+      <div class="table-section section-10 environments-date" role="columnheader">
+        Updated
+      </div>
+    </div>
+    <template
+      v-for="model in environments"
+      v-bind:model="model">
+      <div
+        is="environment-item"
+        :model="model"
+        :can-create-deployment="canCreateDeployment"
+        :can-read-environment="canReadEnvironment"
+        />
 
-        <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
-          <tr v-if="isLoadingFolderContent">
-            <td colspan="6" class="text-center">
-              <i
-                class="fa fa-spin fa-spinner fa-2x"
-                aria-hidden="true" />
-            </td>
-          </tr>
+      <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
+        <div v-if="isLoadingFolderContent">
+          <loading-icon size="2" />
+        </div>
 
-          <template v-else>
-            <tr
-              is="environment-item"
-              v-for="children in model.children"
-              :model="children"
-              :can-create-deployment="canCreateDeployment"
-              :can-read-environment="canReadEnvironment"
-              />
+        <template v-else>
+          <div
+            is="environment-item"
+            v-for="children in model.children"
+            :model="children"
+            :can-create-deployment="canCreateDeployment"
+            :can-read-environment="canReadEnvironment"
+            />
 
-            <tr>
-              <td
-                colspan="6"
-                class="text-center">
-                <a
-                  :href="folderUrl(model)"
-                  class="btn btn-default">
-                  Show all
-                </a>
-              </td>
-            </tr>
-          </template>
+          <div>
+            <div class="text-center prepend-top-10">
+              <a
+                :href="folderUrl(model)"
+                class="btn btn-default">
+                Show all
+              </a>
+            </div>
+          </div>
         </template>
       </template>
-    </tbody>
-  </table>
+    </template>
+  </div>
 </template>
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index f4a0c390c91..925503a01c4 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -1,18 +1,27 @@
 <script>
 /* global Flash */
+import Visibility from 'visibilityjs';
 import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from '../components/environments_table.vue';
+import environmentTable from '../components/environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
-import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import tablePagination from '../../vue_shared/components/table_pagination.vue';
+import Poll from '../../lib/utils/poll';
+import eventHub from '../event_hub';
+import environmentsMixin from '../mixins/environments_mixin';
 import '../../lib/utils/common_utils';
-import '../../vue_shared/vue_resource_interceptor';
 
 export default {
   components: {
-    'environment-table': EnvironmentTable,
-    'table-pagination': TablePaginationComponent,
+    environmentTable,
+    tablePagination,
+    loadingIcon,
   },
 
+  mixins: [
+    environmentsMixin,
+  ],
+
   data() {
     const environmentsData = document.querySelector('#environments-folder-list-view').dataset;
     const store = new EnvironmentsStore();
@@ -74,33 +83,39 @@ export default {
    */
   created() {
     const scope = gl.utils.getParameterByName('scope') || this.visibility;
-    const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
-
-    const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
-
-    this.service = new EnvironmentsService(endpoint);
-
-    this.isLoading = true;
-
-    return this.service.get()
-      .then(resp => ({
-        headers: resp.headers,
-        body: resp.json(),
-      }))
-      .then((response) => {
-        this.store.storeAvailableCount(response.body.available_count);
-        this.store.storeStoppedCount(response.body.stopped_count);
-        this.store.storeEnvironments(response.body.environments);
-        this.store.setPagination(response.headers);
-      })
-      .then(() => {
-        this.isLoading = false;
-      })
-      .catch(() => {
-        this.isLoading = false;
-        // eslint-disable-next-line no-new
-        new Flash('An error occurred while fetching the environments.', 'alert');
-      });
+    const page = gl.utils.getParameterByName('page') || this.pageNumber;
+
+    this.service = new EnvironmentsService(this.endpoint);
+
+    const poll = new Poll({
+      resource: this.service,
+      method: 'get',
+      data: { scope, page },
+      successCallback: this.successCallback,
+      errorCallback: this.errorCallback,
+      notificationCallback: (isMakingRequest) => {
+        this.isMakingRequest = isMakingRequest;
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      this.isLoading = true;
+      poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        poll.restart();
+      } else {
+        poll.stop();
+      }
+    });
+
+    eventHub.$on('postAction', this.postAction);
+  },
+
+  beforeDestroyed() {
+    eventHub.$off('postAction');
   },
 
   methods: {
@@ -115,6 +130,37 @@ export default {
       gl.utils.visitUrl(param);
       return param;
     },
+
+    fetchEnvironments() {
+      const scope = gl.utils.getParameterByName('scope') || this.visibility;
+      const page = gl.utils.getParameterByName('page') || this.pageNumber;
+
+      this.isLoading = true;
+
+      return this.service.get({ scope, page })
+        .then(this.successCallback)
+        .catch(this.errorCallback);
+    },
+
+    successCallback(resp) {
+      this.saveData(resp);
+    },
+
+    errorCallback() {
+      this.isLoading = false;
+      // eslint-disable-next-line no-new
+      new Flash('An error occurred while fetching the environments.');
+    },
+
+    postAction(endpoint) {
+      if (!this.isMakingRequest) {
+        this.isLoading = true;
+
+        this.service.postAction(endpoint)
+          .then(() => this.fetchEnvironments())
+          .catch(() => new Flash('An error occured while making the request.'));
+      }
+    },
   },
 };
 </script>
@@ -153,13 +199,12 @@ export default {
     </div>
 
     <div class="environments-container">
-      <div
-        class="environments-list-loading text-center"
-        v-if="isLoading">
-        <i
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true"/>
-      </div>
+
+      <loading-icon
+        label="Loading environments"
+        v-if="isLoading"
+        size="3"
+        />
 
       <div
         class="table-holder"
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
new file mode 100644
index 00000000000..25b24fbd6dc
--- /dev/null
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -0,0 +1,17 @@
+export default {
+  methods: {
+    saveData(resp) {
+      const response = {
+        headers: resp.headers,
+        body: resp.json(),
+      };
+
+      this.isLoading = false;
+
+      this.store.storeAvailableCount(response.body.available_count);
+      this.store.storeStoppedCount(response.body.stopped_count);
+      this.store.storeEnvironments(response.body.environments);
+      this.store.setPagination(response.headers);
+    },
+  },
+};
diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
index 8adb53ea86d..03ab74b3338 100644
--- a/app/assets/javascripts/environments/services/environments_service.js
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -10,7 +10,8 @@ export default class EnvironmentsService {
     this.folderResults = 3;
   }
 
-  get(scope, page) {
+  get(options = {}) {
+    const { scope, page } = options;
     return this.environments.get({ scope, page });
   }
 
diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js
index 158e7922e3c..8a2f6a473de 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js
+++ b/app/assets/javascripts/environments/stores/environments_store.js
@@ -153,4 +153,10 @@ export default class EnvironmentsStore {
     return updatedEnvironments;
   }
 
+  getOpenFolders() {
+    const environments = this.state.environments;
+
+    return environments.filter(env => env.isFolder && env.isOpen);
+  }
+
 }
diff --git a/app/assets/javascripts/files_comment_button.js b/app/assets/javascripts/files_comment_button.js
index 59d6508fc02..534e651b030 100644
--- a/app/assets/javascripts/files_comment_button.js
+++ b/app/assets/javascripts/files_comment_button.js
@@ -3,7 +3,6 @@
 /* global notes */
 
 let $commentButtonTemplate;
-var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
 window.FilesCommentButton = (function() {
   var COMMENT_BUTTON_CLASS, EMPTY_CELL_CLASS, LINE_COLUMN_CLASSES, LINE_CONTENT_CLASS, LINE_HOLDER_CLASS, LINE_NUMBER_CLASS, OLD_LINE_CLASS, TEXT_FILE_SELECTOR, UNFOLDABLE_LINE_CLASS;
@@ -27,8 +26,8 @@ window.FilesCommentButton = (function() {
   TEXT_FILE_SELECTOR = '.text-file';
 
   function FilesCommentButton(filesContainerElement) {
-    this.render = bind(this.render, this);
-    this.hideButton = bind(this.hideButton, this);
+    this.render = this.render.bind(this);
+    this.hideButton = this.hideButton.bind(this);
     this.isParallelView = notes.isParallelView();
     filesContainerElement.on('mouseover', LINE_COLUMN_CLASSES, this.render)
       .on('mouseleave', LINE_COLUMN_CLASSES, this.hideButton);
diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
index 15052dbd362..c51d4b056af 100644
--- a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
+++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
@@ -13,13 +13,17 @@ export default {
       required: false,
       default: true,
     },
+    allowedKeys: {
+      type: Array,
+      required: true,
+    },
   },
 
   computed: {
     processedItems() {
       return this.items.map((item) => {
         const { tokens, searchToken }
-          = gl.FilteredSearchTokenizer.processTokens(item);
+          = gl.FilteredSearchTokenizer.processTokens(item, this.allowedKeys);
 
         const resultantTokens = tokens.map(token => ({
           prefix: `${token.key}:`,
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 5e9434fd48f..2af242a69df 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -1,16 +1,19 @@
 import Filter from '~/droplab/plugins/filter';
-
-require('./filtered_search_dropdown');
+import './filtered_search_dropdown';
 
 class DropdownHint extends gl.FilteredSearchDropdown {
-  constructor(droplab, dropdown, input, filter) {
+  constructor(droplab, dropdown, input, tokenKeys, filter) {
     super(droplab, dropdown, input, filter);
     this.config = {
       Filter: {
         template: 'hint',
-        filterFunction: gl.DropdownUtils.filterHint.bind(null, input),
+        filterFunction: gl.DropdownUtils.filterHint.bind(null, {
+          input,
+          allowedKeys: tokenKeys.getKeys(),
+        }),
       },
     };
+    this.tokenKeys = tokenKeys;
   }
 
   itemClicked(e) {
@@ -53,20 +56,13 @@ class DropdownHint extends gl.FilteredSearchDropdown {
   }
 
   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: `<${tag}>`,
-          }, type && { type }),
-        );
-      }
-    });
+    const dropdownData = gl.FilteredSearchTokenKeys.get()
+      .map(tokenKey => ({
+        icon: `fa-${tokenKey.icon}`,
+        hint: tokenKey.key,
+        tag: `<${tokenKey.symbol}${tokenKey.key}>`,
+        type: tokenKey.type,
+      }));
 
     this.droplab.changeHookList(this.hookId, this.dropdown, [Filter], this.config);
     this.droplab.setData(this.hookId, dropdownData);
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
index 982dc4b61be..34a9e34070c 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -2,11 +2,10 @@
 
 import Ajax from '~/droplab/plugins/ajax';
 import Filter from '~/droplab/plugins/filter';
-
-require('./filtered_search_dropdown');
+import './filtered_search_dropdown';
 
 class DropdownNonUser extends gl.FilteredSearchDropdown {
-  constructor(droplab, dropdown, input, filter, endpoint, symbol) {
+  constructor(droplab, dropdown, input, tokenKeys, filter, endpoint, symbol) {
     super(droplab, dropdown, input, filter);
     this.symbol = symbol;
     this.config = {
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index 74cec3d75fe..65c1b2050ac 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -1,11 +1,10 @@
 /* global Flash */
 
 import AjaxFilter from '~/droplab/plugins/ajax_filter';
-
-require('./filtered_search_dropdown');
+import './filtered_search_dropdown';
 
 class DropdownUser extends gl.FilteredSearchDropdown {
-  constructor(droplab, dropdown, input, filter) {
+  constructor(droplab, dropdown, input, tokenKeys, filter) {
     super(droplab, dropdown, input, filter);
     this.config = {
       AjaxFilter: {
@@ -19,6 +18,9 @@ class DropdownUser extends gl.FilteredSearchDropdown {
         },
         searchValueFunction: this.getSearchInput.bind(this),
         loadingTemplate: this.loadingTemplate,
+        onLoadingFinished: () => {
+          this.hideCurrentUser();
+        },
         onError() {
           /* eslint-disable no-new */
           new Flash('An error occured fetching the dropdown data.');
@@ -26,6 +28,12 @@ class DropdownUser extends gl.FilteredSearchDropdown {
         },
       },
     };
+    this.tokenKeys = tokenKeys;
+  }
+
+  hideCurrentUser() {
+    const currenUserItem = this.dropdown.querySelector('.js-current-user');
+    currenUserItem.classList.add('hidden');
   }
 
   itemClicked(e) {
@@ -44,7 +52,7 @@ class DropdownUser extends gl.FilteredSearchDropdown {
 
   getSearchInput() {
     const query = gl.DropdownUtils.getSearchInput(this.input);
-    const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
+    const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query, this.tokenKeys.get());
 
     let value = lastToken || '';
 
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index bc7c1dffece..ef8fe071012 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -50,10 +50,12 @@ class DropdownUtils {
     return updatedItem;
   }
 
-  static filterHint(input, item) {
+  static filterHint(config, item) {
+    const { input, allowedKeys } = config;
     const updatedItem = item;
     const searchInput = gl.DropdownUtils.getSearchQuery(input);
-    const { lastToken, tokens } = gl.FilteredSearchTokenizer.processTokens(searchInput);
+    const { lastToken, tokens } =
+      gl.FilteredSearchTokenizer.processTokens(searchInput, allowedKeys);
     const lastKey = lastToken.key || lastToken || '';
     const allowMultiple = item.type === 'array';
     const itemInExistingTokens = tokens.some(t => t.key === item.hint);
@@ -100,10 +102,13 @@ class DropdownUtils {
       if (token.classList.contains('js-visual-token')) {
         const name = token.querySelector('.name');
         const value = token.querySelector('.value');
+        const valueContainer = token.querySelector('.value-container');
         const symbol = value && value.dataset.symbol ? value.dataset.symbol : '';
         let valueText = '';
 
-        if (value && value.innerText) {
+        if (valueContainer && valueContainer.dataset.originalValue) {
+          valueText = valueContainer.dataset.originalValue;
+        } else if (value && value.innerText) {
           valueText = value.innerText;
         }
 
diff --git a/app/assets/javascripts/filtered_search/filtered_search_bundle.js b/app/assets/javascripts/filtered_search/filtered_search_bundle.js
index 856eb6590ee..132b6fe698a 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_bundle.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_bundle.js
@@ -1,10 +1,10 @@
-require('./dropdown_hint');
-require('./dropdown_non_user');
-require('./dropdown_user');
-require('./dropdown_utils');
-require('./filtered_search_dropdown_manager');
-require('./filtered_search_dropdown');
-require('./filtered_search_manager');
-require('./filtered_search_token_keys');
-require('./filtered_search_tokenizer');
-require('./filtered_search_visual_tokens');
+import './dropdown_hint';
+import './dropdown_non_user';
+import './dropdown_user';
+import './dropdown_utils';
+import './filtered_search_token_keys';
+import './filtered_search_dropdown_manager';
+import './filtered_search_dropdown';
+import './filtered_search_manager';
+import './filtered_search_tokenizer';
+import './filtered_search_visual_tokens';
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 49a6cd1ac77..6bc6bc43f51 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -2,10 +2,10 @@ import DropLab from '~/droplab/drop_lab';
 import FilteredSearchContainer from './container';
 
 class FilteredSearchDropdownManager {
-  constructor(baseEndpoint = '', page) {
+  constructor(baseEndpoint = '', tokenizer, page) {
     this.container = FilteredSearchContainer.container;
     this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
-    this.tokenizer = gl.FilteredSearchTokenizer;
+    this.tokenizer = tokenizer;
     this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
     this.page = page;
@@ -98,7 +98,8 @@ class FilteredSearchDropdownManager {
 
     if (!mappingKey.reference) {
       const dl = this.droplab;
-      const defaultArguments = [null, dl, element, this.filteredSearchInput, key];
+      const defaultArguments =
+        [null, dl, element, this.filteredSearchInput, this.filteredSearchTokenKeys, key];
       const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
 
       // Passing glArguments to `new gl[glClass](<arguments>)`
@@ -141,7 +142,8 @@ class FilteredSearchDropdownManager {
 
   setDropdown() {
     const query = gl.DropdownUtils.getSearchQuery(true);
-    const { lastToken, searchToken } = this.tokenizer.processTokens(query);
+    const { lastToken, searchToken } =
+      this.tokenizer.processTokens(query, this.filteredSearchTokenKeys.getKeys());
 
     if (this.currentDropdown) {
       this.updateCurrentDropdownOffset();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 9fea563370f..8f547bd8f1f 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -6,6 +6,7 @@ import eventHub from './event_hub';
 
 class FilteredSearchManager {
   constructor(page) {
+    this.page = page;
     this.container = FilteredSearchContainer.container;
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
     this.filteredSearchInputForm = this.filteredSearchInput.form;
@@ -15,13 +16,20 @@ class FilteredSearchManager {
 
     this.recentSearchesStore = new RecentSearchesStore({
       isLocalStorageAvailable: RecentSearchesService.isAvailable(),
+      allowedKeys: this.filteredSearchTokenKeys.getKeys(),
     });
-    let recentSearchesKey = 'issue-recent-searches';
-    if (page === 'merge_requests') {
-      recentSearchesKey = 'merge-request-recent-searches';
+    this.searchHistoryDropdownElement = document.querySelector('.js-filtered-search-history-dropdown');
+    const projectPath = this.searchHistoryDropdownElement ?
+      this.searchHistoryDropdownElement.dataset.projectFullPath : 'project';
+    let recentSearchesPagePrefix = 'issue-recent-searches';
+    if (this.page === 'merge_requests') {
+      recentSearchesPagePrefix = 'merge-request-recent-searches';
     }
+    const recentSearchesKey = `${projectPath}-${recentSearchesPagePrefix}`;
     this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
+  }
 
+  setup() {
     // Fetch recent searches from localStorage
     this.fetchingRecentSearchesPromise = this.recentSearchesService.fetch()
       .catch((error) => {
@@ -42,12 +50,12 @@ class FilteredSearchManager {
 
     if (this.filteredSearchInput) {
       this.tokenizer = gl.FilteredSearchTokenizer;
-      this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
+      this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', this.tokenizer, this.page);
 
       this.recentSearchesRoot = new RecentSearchesRoot(
         this.recentSearchesStore,
         this.recentSearchesService,
-        document.querySelector('.js-filtered-search-history-dropdown'),
+        this.searchHistoryDropdownElement,
       );
       this.recentSearchesRoot.init();
 
@@ -69,6 +77,41 @@ class FilteredSearchManager {
     }
   }
 
+  bindStateEvents() {
+    this.stateFilters = document.querySelector('.container-fluid .issues-state-filters');
+
+    if (this.stateFilters) {
+      this.searchStateWrapper = this.searchState.bind(this);
+
+      this.stateFilters.querySelector('[data-state="opened"]')
+        .addEventListener('click', this.searchStateWrapper);
+      this.stateFilters.querySelector('[data-state="closed"]')
+        .addEventListener('click', this.searchStateWrapper);
+      this.stateFilters.querySelector('[data-state="all"]')
+        .addEventListener('click', this.searchStateWrapper);
+
+      this.mergedState = this.stateFilters.querySelector('[data-state="merged"]');
+      if (this.mergedState) {
+        this.mergedState.addEventListener('click', this.searchStateWrapper);
+      }
+    }
+  }
+
+  unbindStateEvents() {
+    if (this.stateFilters) {
+      this.stateFilters.querySelector('[data-state="opened"]')
+        .removeEventListener('click', this.searchStateWrapper);
+      this.stateFilters.querySelector('[data-state="closed"]')
+        .removeEventListener('click', this.searchStateWrapper);
+      this.stateFilters.querySelector('[data-state="all"]')
+        .removeEventListener('click', this.searchStateWrapper);
+
+      if (this.mergedState) {
+        this.mergedState.removeEventListener('click', this.searchStateWrapper);
+      }
+    }
+  }
+
   bindEvents() {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
@@ -97,15 +140,15 @@ class FilteredSearchManager {
     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('click', this.removeTokenWrapper);
-    this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
+    this.tokensContainer.addEventListener('click', 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.removeSelectedTokenKeydownWrapper);
     eventHub.$on('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
+
+    this.bindStateEvents();
   }
 
   unbindEvents() {
@@ -119,15 +162,15 @@ class FilteredSearchManager {
     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('click', this.removeTokenWrapper);
-    this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
+    this.tokensContainer.removeEventListener('click', 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.removeSelectedTokenKeydownWrapper);
     eventHub.$off('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
+
+    this.unbindStateEvents();
   }
 
   checkForBackspace(e) {
@@ -136,7 +179,9 @@ class FilteredSearchManager {
     if (e.keyCode === 8 || e.keyCode === 46) {
       const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
-      if (this.filteredSearchInput.value === '' && lastVisualToken) {
+      const sanitizedTokenName = lastVisualToken && lastVisualToken.querySelector('.name').textContent.trim();
+      const canEdit = sanitizedTokenName && this.canEdit && this.canEdit(sanitizedTokenName);
+      if (this.filteredSearchInput.value === '' && lastVisualToken && canEdit) {
         this.filteredSearchInput.value = gl.FilteredSearchVisualTokens.getLastTokenPartial();
         gl.FilteredSearchVisualTokens.removeLastTokenPartial();
       }
@@ -197,23 +242,13 @@ class FilteredSearchManager {
     }
   }
 
-  static selectToken(e) {
-    const button = e.target.closest('.selectable');
-    const removeButtonSelected = e.target.closest('.remove-token');
-
-    if (!removeButtonSelected && button) {
-      e.preventDefault();
-      e.stopPropagation();
-      gl.FilteredSearchVisualTokens.selectToken(button);
-    }
-  }
-
   removeToken(e) {
     const removeButtonSelected = e.target.closest('.remove-token');
 
     if (removeButtonSelected) {
       e.preventDefault();
-      e.stopPropagation();
+      // Prevent editToken from being triggered after token is removed
+      e.stopImmediatePropagation();
 
       const button = e.target.closest('.selectable');
       gl.FilteredSearchVisualTokens.selectToken(button, true);
@@ -235,8 +270,12 @@ class FilteredSearchManager {
 
   editToken(e) {
     const token = e.target.closest('.js-visual-token');
+    const sanitizedTokenName = token && token.querySelector('.name').textContent.trim();
+    const canEdit = this.canEdit && this.canEdit(sanitizedTokenName);
 
-    if (token) {
+    if (token && canEdit) {
+      e.preventDefault();
+      e.stopPropagation();
       gl.FilteredSearchVisualTokens.editToken(token);
       this.tokenChange();
     }
@@ -314,7 +353,7 @@ class FilteredSearchManager {
   handleInputVisualToken() {
     const input = this.filteredSearchInput;
     const { tokens, searchToken }
-      = gl.FilteredSearchTokenizer.processTokens(input.value);
+      = this.tokenizer.processTokens(input.value, this.filteredSearchTokenKeys.getKeys());
     const { isLastVisualTokenValid }
       = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
@@ -386,7 +425,12 @@ class FilteredSearchManager {
 
       if (condition) {
         hasFilteredSearch = true;
-        gl.FilteredSearchVisualTokens.addFilterVisualToken(condition.tokenKey, condition.value);
+        const canEdit = this.canEdit && this.canEdit(condition.tokenKey);
+        gl.FilteredSearchVisualTokens.addFilterVisualToken(
+          condition.tokenKey,
+          condition.value,
+          canEdit,
+        );
       } else {
         // Sanitize value since URL converts spaces into +
         // Replace before decode so that we know what was originally + versus the encoded +
@@ -405,18 +449,27 @@ class FilteredSearchManager {
           }
 
           hasFilteredSearch = true;
-          gl.FilteredSearchVisualTokens.addFilterVisualToken(sanitizedKey, `${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
+          const canEdit = this.canEdit && this.canEdit(sanitizedKey);
+          gl.FilteredSearchVisualTokens.addFilterVisualToken(
+            sanitizedKey,
+            `${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`,
+            canEdit,
+          );
         } else if (!match && keyParam === 'assignee_id') {
           const id = parseInt(value, 10);
           if (usernameParams[id]) {
             hasFilteredSearch = true;
-            gl.FilteredSearchVisualTokens.addFilterVisualToken('assignee', `@${usernameParams[id]}`);
+            const tokenName = 'assignee';
+            const canEdit = this.canEdit && this.canEdit(tokenName);
+            gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, `@${usernameParams[id]}`, canEdit);
           }
         } else if (!match && keyParam === 'author_id') {
           const id = parseInt(value, 10);
           if (usernameParams[id]) {
             hasFilteredSearch = true;
-            gl.FilteredSearchVisualTokens.addFilterVisualToken('author', `@${usernameParams[id]}`);
+            const tokenName = 'author';
+            const canEdit = this.canEdit && this.canEdit(tokenName);
+            gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, `@${usernameParams[id]}`, canEdit);
           }
         } else if (!match && keyParam === 'search') {
           hasFilteredSearch = true;
@@ -433,15 +486,27 @@ class FilteredSearchManager {
     }
   }
 
-  search() {
+  searchState(e) {
+    const target = e.currentTarget;
+    // remove focus outline after click
+    target.blur();
+
+    const state = target.dataset && target.dataset.state;
+
+    if (state) {
+      this.search(state);
+    }
+  }
+
+  search(state = null) {
     const paths = [];
     const searchQuery = gl.DropdownUtils.getSearchQuery();
 
     this.saveCurrentSearchQuery();
 
     const { tokens, searchToken }
-      = this.tokenizer.processTokens(searchQuery);
-    const currentState = gl.utils.getParameterByName('state') || 'opened';
+      = this.tokenizer.processTokens(searchQuery, this.filteredSearchTokenKeys.getKeys());
+    const currentState = state || gl.utils.getParameterByName('state') || 'opened';
     paths.push(`state=${currentState}`);
 
     tokens.forEach((token) => {
@@ -511,6 +576,11 @@ class FilteredSearchManager {
     this.filteredSearchInput.dispatchEvent(new CustomEvent('input'));
     this.search();
   }
+
+  // eslint-disable-next-line class-methods-use-this
+  canEdit() {
+    return true;
+  }
 }
 
 window.gl = window.gl || {};
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 1abad9d1b73..025d4d8795b 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js
@@ -3,21 +3,25 @@ const tokenKeys = [{
   type: 'string',
   param: 'username',
   symbol: '@',
+  icon: 'pencil',
 }, {
   key: 'assignee',
   type: 'string',
   param: 'username',
   symbol: '@',
+  icon: 'user',
 }, {
   key: 'milestone',
   type: 'string',
   param: 'title',
   symbol: '%',
+  icon: 'clock-o',
 }, {
   key: 'label',
   type: 'array',
   param: 'name[]',
   symbol: '~',
+  icon: 'tag',
 }];
 
 const alternativeTokenKeys = [{
@@ -56,6 +60,10 @@ class FilteredSearchTokenKeys {
     return tokenKeys;
   }
 
+  static getKeys() {
+    return tokenKeys.map(i => i.key);
+  }
+
   static getAlternatives() {
     return alternativeTokenKeys;
   }
diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
index 2808e4b238a..f2e66503e5e 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
@@ -1,8 +1,7 @@
-require('./filtered_search_token_keys');
+import './filtered_search_token_keys';
 
 class FilteredSearchTokenizer {
-  static processTokens(input) {
-    const allowedKeys = gl.FilteredSearchTokenKeys.get().map(i => i.key);
+  static processTokens(input, allowedKeys) {
     // 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');
diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
index f3003b86493..e9278140af0 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -1,6 +1,7 @@
-import AjaxCache from '~/lib/utils/ajax_cache';
-import '~/flash'; /* global Flash */
+import AjaxCache from '../lib/utils/ajax_cache';
+import '../flash'; /* global Flash */
 import FilteredSearchContainer from './container';
+import UsersCache from '../lib/utils/users_cache';
 
 class FilteredSearchVisualTokens {
   static getLastVisualTokenBeforeInput() {
@@ -36,15 +37,22 @@ class FilteredSearchVisualTokens {
     }
   }
 
-  static createVisualTokenElementHTML() {
+  static createVisualTokenElementHTML(canEdit = true) {
+    let removeTokenMarkup = '';
+    if (canEdit) {
+      removeTokenMarkup = `
+        <div class="remove-token" role="button">
+          <i class="fa fa-close"></i>
+        </div>
+      `;
+    }
+
     return `
       <div class="selectable" role="button">
         <div class="name"></div>
         <div class="value-container">
           <div class="value"></div>
-          <div class="remove-token" role="button">
-            <i class="fa fa-close"></i>
-          </div>
+          ${removeTokenMarkup}
         </div>
       </div>
     `;
@@ -75,22 +83,52 @@ class FilteredSearchVisualTokens {
     .catch(() => new Flash('An error occurred while fetching label colors.'));
   }
 
+  static updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) {
+    if (tokenValue === 'none') {
+      return Promise.resolve();
+    }
+
+    const username = tokenValue.replace(/^@/, '');
+    return UsersCache.retrieve(username)
+      .then((user) => {
+        if (!user) {
+          return;
+        }
+
+        /* eslint-disable no-param-reassign */
+        tokenValueContainer.dataset.originalValue = tokenValue;
+        tokenValueElement.innerHTML = `
+          <img class="avatar s20" src="${user.avatar_url}" alt="${user.name}'s avatar">
+          ${user.name}
+        `;
+        /* eslint-enable no-param-reassign */
+      })
+      // ignore error and leave username in the search bar
+      .catch(() => { });
+  }
+
   static renderVisualTokenValue(parentElement, tokenName, tokenValue) {
     const tokenValueContainer = parentElement.querySelector('.value-container');
-    tokenValueContainer.querySelector('.value').innerText = tokenValue;
+    const tokenValueElement = tokenValueContainer.querySelector('.value');
+    tokenValueElement.innerText = tokenValue;
 
-    if (tokenName.toLowerCase() === 'label') {
+    const tokenType = tokenName.toLowerCase();
+    if (tokenType === 'label') {
       FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue);
+    } else if ((tokenType === 'author') || (tokenType === 'assignee')) {
+      FilteredSearchVisualTokens.updateUserTokenAppearance(
+        tokenValueContainer, tokenValueElement, tokenValue,
+      );
     }
   }
 
-  static addVisualTokenElement(name, value, isSearchTerm) {
+  static addVisualTokenElement(name, value, isSearchTerm, canEdit) {
     const li = document.createElement('li');
     li.classList.add('js-visual-token');
     li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
 
     if (value) {
-      li.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML();
+      li.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML(canEdit);
       FilteredSearchVisualTokens.renderVisualTokenValue(li, name, value);
     } else {
       li.innerHTML = '<div class="name"></div>';
@@ -114,20 +152,20 @@ class FilteredSearchVisualTokens {
     }
   }
 
-  static addFilterVisualToken(tokenName, tokenValue) {
+  static addFilterVisualToken(tokenName, tokenValue, canEdit) {
     const { lastVisualToken, isLastVisualTokenValid }
       = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
     const addVisualTokenElement = FilteredSearchVisualTokens.addVisualTokenElement;
 
     if (isLastVisualTokenValid) {
-      addVisualTokenElement(tokenName, tokenValue, false);
+      addVisualTokenElement(tokenName, tokenValue, false, canEdit);
     } else {
       const previousTokenName = lastVisualToken.querySelector('.name').innerText;
       const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
       tokensContainer.removeChild(lastVisualToken);
 
       const value = tokenValue || tokenName;
-      addVisualTokenElement(previousTokenName, value, false);
+      addVisualTokenElement(previousTokenName, value, false, canEdit);
     }
   }
 
@@ -146,6 +184,12 @@ class FilteredSearchVisualTokens {
 
     if (!lastVisualToken) return '';
 
+    const valueContainer = lastVisualToken.querySelector('.value-container');
+    const originalValue = valueContainer && valueContainer.dataset.originalValue;
+    if (originalValue) {
+      return originalValue;
+    }
+
     const value = lastVisualToken.querySelector('.value');
     const name = lastVisualToken.querySelector('.name');
 
@@ -198,17 +242,28 @@ class FilteredSearchVisualTokens {
     const inputLi = input.parentElement;
     tokenContainer.replaceChild(inputLi, token);
 
-    const name = token.querySelector('.name');
-    const value = token.querySelector('.value');
+    const nameElement = token.querySelector('.name');
+    let value;
 
-    if (token.classList.contains('filtered-search-token') && value) {
-      FilteredSearchVisualTokens.addFilterVisualToken(name.innerText);
-      input.value = value.innerText;
-    } else {
-      // token is a search term
-      input.value = name.innerText;
+    if (token.classList.contains('filtered-search-token')) {
+      FilteredSearchVisualTokens.addFilterVisualToken(nameElement.innerText);
+
+      const valueContainerElement = token.querySelector('.value-container');
+      value = valueContainerElement.dataset.originalValue;
+
+      if (!value) {
+        const valueElement = valueContainerElement.querySelector('.value');
+        value = valueElement.innerText;
+      }
+    }
+
+    // token is a search term
+    if (!value) {
+      value = nameElement.innerText;
     }
 
+    input.value = value;
+
     // Opens dropdown
     const inputEvent = new Event('input');
     input.dispatchEvent(inputEvent);
diff --git a/app/assets/javascripts/filtered_search/recent_searches_root.js b/app/assets/javascripts/filtered_search/recent_searches_root.js
index b2e6f63aacf..27e49d4fb96 100644
--- a/app/assets/javascripts/filtered_search/recent_searches_root.js
+++ b/app/assets/javascripts/filtered_search/recent_searches_root.js
@@ -37,6 +37,7 @@ class RecentSearchesRoot {
         <recent-searches-dropdown-content
           :items="recentSearches"
           :is-local-storage-available="isLocalStorageAvailable"
+          :allowed-keys="allowedKeys"
           />
       `,
       components: {
diff --git a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
index 066be69766a..aaa0c349d93 100644
--- a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
+++ b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
@@ -1,9 +1,11 @@
 import _ from 'underscore';
 
 class RecentSearchesStore {
-  constructor(initialState = {}) {
+  constructor(initialState = {}, allowedKeys) {
     this.state = Object.assign({
+      isLocalStorageAvailable: true,
       recentSearches: [],
+      allowedKeys,
     }, initialState);
   }
 
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index eec30624ff2..ccff8f0ace7 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -7,8 +7,21 @@ window.Flash = (function() {
     return $(this).fadeOut();
   };
 
-  function Flash(message, type, parent) {
-    var flash, textDiv;
+  /**
+   * Flash banner supports different types of Flash configurations
+   * along with ability to provide actionConfig which can be used to show
+   * additional action or link on banner next to message
+   *
+   * @param {String} message Flash message
+   * @param {String} type Type of Flash, it can be `notice` or `alert` (default)
+   * @param {Object} parent Reference to Parent element under which Flash needs to appear
+   * @param {Object} actionConfig Map of config to show action on banner
+   *    @param {String} href URL to which action link should point (default '#')
+   *    @param {String} title Title of action
+   *    @param {Function} clickHandler Method to call when action is clicked on
+   */
+  function Flash(message, type, parent, actionConfig) {
+    var flash, textDiv, actionLink;
     if (type == null) {
       type = 'alert';
     }
@@ -30,6 +43,23 @@ window.Flash = (function() {
       text: message
     });
     textDiv.appendTo(flash);
+
+    if (actionConfig) {
+      const actionLinkConfig = {
+        class: 'flash-action',
+        href: actionConfig.href || '#',
+        text: actionConfig.title
+      };
+
+      if (!actionConfig.href) {
+        actionLinkConfig.role = 'button';
+      }
+
+      actionLink = $('<a/>', actionLinkConfig);
+
+      actionLink.appendTo(flash);
+      this.flashContainer.on('click', '.flash-action', actionConfig.clickHandler);
+    }
     if (this.flashContainer.parent().hasClass('content-wrapper')) {
       textDiv.addClass('container-fluid container-limited');
     }
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index f1b99023c72..401dec1a370 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -1,119 +1,34 @@
-/* eslint-disable func-names, space-before-function-paren, no-template-curly-in-string, comma-dangle, object-shorthand, quotes, dot-notation, no-else-return, one-var, no-var, no-underscore-dangle, one-var-declaration-per-line, no-param-reassign, no-useless-escape, prefer-template, consistent-return, wrap-iife, prefer-arrow-callback, camelcase, no-unused-vars, no-useless-return, vars-on-top, max-len */
-
 import emojiMap from 'emojis/digests.json';
 import emojiAliases from 'emojis/aliases.json';
 import { glEmojiTag } from '~/behaviors/gl_emoji';
 import glRegexp from '~/lib/utils/regexp';
-
-// Creates the variables for setting up GFM auto-completion
-window.gl = window.gl || {};
+import AjaxCache from '~/lib/utils/ajax_cache';
 
 function sanitize(str) {
   return str.replace(/<(?:.|\n)*?>/gm, '');
 }
 
-window.gl.GfmAutoComplete = {
-  dataSources: {},
-  defaultLoadingData: ['loading'],
-  cachedData: {},
-  isLoadingData: {},
-  atTypeMap: {
-    ':': 'emojis',
-    '@': 'members',
-    '#': 'issues',
-    '!': 'mergeRequests',
-    '~': 'labels',
-    '%': 'milestones',
-    '/': 'commands'
-  },
-  // Emoji
-  Emoji: {
-    templateFunction: function(name) {
-      return `<li>
-        ${name} ${glEmojiTag(name)}
-      </li>
-      `;
-    }
-  },
-  // Team Members
-  Members: {
-    template: '<li>${avatarTag} ${username} <small>${title}</small></li>'
-  },
-  Labels: {
-    template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>'
-  },
-  // Issues and MergeRequests
-  Issues: {
-    template: '<li><small>${id}</small> ${title}</li>'
-  },
-  // Milestones
-  Milestones: {
-    template: '<li>${title}</li>'
-  },
-  Loading: {
-    template: '<li style="pointer-events: none;"><i class="fa fa-spinner fa-spin"></i> Loading...</li>'
-  },
-  DefaultOptions: {
-    sorter: function(query, items, searchKey) {
-      this.setting.highlightFirst = this.setting.alwaysHighlightFirst || query.length > 0;
-      if (gl.GfmAutoComplete.isLoading(items)) {
-        this.setting.highlightFirst = false;
-        return items;
-      }
-      return $.fn.atwho["default"].callbacks.sorter(query, items, searchKey);
-    },
-    filter: function(query, data, searchKey) {
-      if (gl.GfmAutoComplete.isLoading(data)) {
-        gl.GfmAutoComplete.fetchData(this.$inputor, this.at);
-        return data;
-      } else {
-        return $.fn.atwho["default"].callbacks.filter(query, data, searchKey);
-      }
-    },
-    beforeInsert: function(value) {
-      if (value && !this.setting.skipSpecialCharacterTest) {
-        var withoutAt = value.substring(1);
-        if (withoutAt && /[^\w\d]/.test(withoutAt)) value = value.charAt() + '"' + withoutAt + '"';
-      }
-      return value;
-    },
-    matcher: function (flag, subtext) {
-      // The below is taken from At.js source
-      // Tweaked to commands to start without a space only if char before is a non-word character
-      // https://github.com/ichord/At.js
-      var _a, _y, regexp, match, atSymbolsWithBar, atSymbolsWithoutBar;
-      atSymbolsWithBar = Object.keys(this.app.controllers).join('|');
-      atSymbolsWithoutBar = Object.keys(this.app.controllers).join('');
-      subtext = subtext.split(/\s+/g).pop();
-      flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-
-      _a = decodeURI("%C3%80");
-      _y = decodeURI("%C3%BF");
-
-      regexp = new RegExp("^(?:\\B|[^a-zA-Z0-9_" + atSymbolsWithoutBar + "]|\\s)" + flag + "(?!" + atSymbolsWithBar + ")((?:[A-Za-z" + _a + "-" + _y + "0-9_\'\.\+\-]|[^\\x00-\\x7a])*)$", 'gi');
-
-      match = regexp.exec(subtext);
+class GfmAutoComplete {
+  constructor(dataSources) {
+    this.dataSources = dataSources || {};
+    this.cachedData = {};
+    this.isLoadingData = {};
+  }
 
-      if (match) {
-        return match[1];
-      } else {
-        return null;
-      }
-    }
-  },
-  setup: function(input, enableMap = {
+  setup(input, enableMap = {
     emojis: true,
     members: true,
     issues: true,
     milestones: true,
     mergeRequests: true,
-    labels: true
+    labels: true,
   }) {
     // Add GFM auto-completion to all input fields, that accept GFM input.
     this.input = input || $('.js-gfm-input');
     this.enableMap = enableMap;
     this.setupLifecycle();
-  },
+  }
+
   setupLifecycle() {
     this.input.each((i, input) => {
       const $input = $(input);
@@ -121,10 +36,11 @@ window.gl.GfmAutoComplete = {
       // This triggers at.js again
       // Needed for slash commands with suffixes (ex: /label ~)
       $input.on('inserted-commands.atwho', $input.trigger.bind($input, 'keyup'));
+      $input.on('clear-commands-cache.atwho', () => this.clearCache());
     });
-  },
+  }
 
-  setupAtWho: function($input) {
+  setupAtWho($input) {
     if (this.enableMap.emojis) this.setupEmoji($input);
     if (this.enableMap.members) this.setupMembers($input);
     if (this.enableMap.issues) this.setupIssues($input);
@@ -138,10 +54,11 @@ window.gl.GfmAutoComplete = {
       alias: 'commands',
       searchKey: 'search',
       skipSpecialCharacterTest: true,
-      data: this.defaultLoadingData,
-      displayTpl: function(value) {
-        if (this.isLoading(value)) return this.Loading.template;
-        var tpl = '<li>/${name}';
+      data: GfmAutoComplete.defaultLoadingData,
+      displayTpl(value) {
+        if (GfmAutoComplete.isLoading(value)) return GfmAutoComplete.Loading.template;
+        // eslint-disable-next-line no-template-curly-in-string
+        let tpl = '<li>/${name}';
         if (value.aliases.length > 0) {
           tpl += ' <small>(or /<%- aliases.join(", /") %>)</small>';
         }
@@ -153,105 +70,106 @@ window.gl.GfmAutoComplete = {
         }
         tpl += '</li>';
         return _.template(tpl)(value);
-      }.bind(this),
-      insertTpl: function(value) {
-        var tpl = "/${name} ";
-        var reference_prefix = null;
+      },
+      insertTpl(value) {
+        // eslint-disable-next-line no-template-curly-in-string
+        let tpl = '/${name} ';
+        let referencePrefix = null;
         if (value.params.length > 0) {
-          reference_prefix = value.params[0][0];
-          if (/^[@%~]/.test(reference_prefix)) {
-            tpl += '<%- reference_prefix %>';
+          referencePrefix = value.params[0][0];
+          if (/^[@%~]/.test(referencePrefix)) {
+            tpl += '<%- referencePrefix %>';
           }
         }
-        return _.template(tpl)({ reference_prefix: reference_prefix });
+        return _.template(tpl)({ referencePrefix });
       },
       suffix: '',
       callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        filter: this.DefaultOptions.filter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        beforeSave: function(commands) {
-          if (gl.GfmAutoComplete.isLoading(commands)) return commands;
-          return $.map(commands, function(c) {
-            var search = c.name;
+        ...this.getDefaultCallbacks(),
+        beforeSave(commands) {
+          if (GfmAutoComplete.isLoading(commands)) return commands;
+          return $.map(commands, (c) => {
+            let search = c.name;
             if (c.aliases.length > 0) {
-              search = search + " " + c.aliases.join(" ");
+              search = `${search} ${c.aliases.join(' ')}`;
             }
             return {
               name: c.name,
               aliases: c.aliases,
               params: c.params,
               description: c.description,
-              search: search
+              search,
             };
           });
         },
-        matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
-          var regexp = /(?:^|\n)\/([A-Za-z_]*)$/gi;
-          var match = regexp.exec(subtext);
+        matcher(flag, subtext) {
+          const regexp = /(?:^|\n)\/([A-Za-z_]*)$/gi;
+          const match = regexp.exec(subtext);
           if (match) {
             return match[1];
-          } else {
-            return null;
           }
-        }
-      }
+          return null;
+        },
+      },
     });
-    return;
-  },
+  }
 
   setupEmoji($input) {
     // Emoji
     $input.atwho({
       at: ':',
-      displayTpl: function(value) {
-        return value && value.name ? this.Emoji.templateFunction(value.name) : this.Loading.template;
-      }.bind(this),
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value && value.name) {
+          tmpl = GfmAutoComplete.Emoji.templateFunction(value.name);
+        }
+        return tmpl;
+      },
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: ':${name}:',
       skipSpecialCharacterTest: true,
-      data: this.defaultLoadingData,
+      data: GfmAutoComplete.defaultLoadingData,
       callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        filter: this.DefaultOptions.filter,
-
-        matcher: (flag, subtext) => {
+        ...this.getDefaultCallbacks(),
+        matcher(flag, subtext) {
           const relevantText = subtext.trim().split(/\s/).pop();
           const regexp = new RegExp(`(?:[^${glRegexp.unicodeLetters}0-9:]|\n|^):([^:]*)$`, 'gi');
           const match = regexp.exec(relevantText);
 
           return match && match.length ? match[1] : null;
-        }
-      }
+        },
+      },
     });
-  },
+  }
 
   setupMembers($input) {
     // Team Members
     $input.atwho({
       at: '@',
-      displayTpl: function(value) {
-        return value.username != null ? this.Members.template : this.Loading.template;
-      }.bind(this),
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.username != null) {
+          tmpl = GfmAutoComplete.Members.template;
+        }
+        return tmpl;
+      },
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${username}',
       searchKey: 'search',
       alwaysHighlightFirst: true,
       skipSpecialCharacterTest: true,
-      data: this.defaultLoadingData,
+      data: GfmAutoComplete.defaultLoadingData,
       callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        filter: this.DefaultOptions.filter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        matcher: this.DefaultOptions.matcher,
-        beforeSave: function(members) {
-          return $.map(members, function(m) {
+        ...this.getDefaultCallbacks(),
+        beforeSave(members) {
+          return $.map(members, (m) => {
             let title = '';
             if (m.username == null) {
               return m;
             }
             title = m.name;
             if (m.count) {
-              title += " (" + m.count + ")";
+              title += ` (${m.count})`;
             }
 
             const autoCompleteAvatar = m.avatar_url || m.username.charAt(0).toUpperCase();
@@ -262,173 +180,278 @@ window.gl.GfmAutoComplete = {
               username: m.username,
               avatarTag: autoCompleteAvatar.length === 1 ? txtAvatar : imgAvatar,
               title: sanitize(title),
-              search: sanitize(m.username + " " + m.name)
+              search: sanitize(`${m.username} ${m.name}`),
             };
           });
-        }
-      }
+        },
+      },
     });
-  },
+  }
 
   setupIssues($input) {
     $input.atwho({
       at: '#',
       alias: 'issues',
       searchKey: 'search',
-      displayTpl: function(value) {
-        return value.title != null ? this.Issues.template : this.Loading.template;
-      }.bind(this),
-      data: this.defaultLoadingData,
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.title != null) {
+          tmpl = GfmAutoComplete.Issues.template;
+        }
+        return tmpl;
+      },
+      data: GfmAutoComplete.defaultLoadingData,
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${id}',
       callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        filter: this.DefaultOptions.filter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        matcher: this.DefaultOptions.matcher,
-        beforeSave: function(issues) {
-          return $.map(issues, function(i) {
+        ...this.getDefaultCallbacks(),
+        beforeSave(issues) {
+          return $.map(issues, (i) => {
             if (i.title == null) {
               return i;
             }
             return {
               id: i.iid,
               title: sanitize(i.title),
-              search: i.iid + " " + i.title
+              search: `${i.iid} ${i.title}`,
             };
           });
-        }
-      }
+        },
+      },
     });
-  },
+  }
 
   setupMilestones($input) {
     $input.atwho({
       at: '%',
       alias: 'milestones',
       searchKey: 'search',
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${title}',
-      displayTpl: function(value) {
-        return value.title != null ? this.Milestones.template : this.Loading.template;
-      }.bind(this),
-      data: this.defaultLoadingData,
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.title != null) {
+          tmpl = GfmAutoComplete.Milestones.template;
+        }
+        return tmpl;
+      },
+      data: GfmAutoComplete.defaultLoadingData,
       callbacks: {
-        matcher: this.DefaultOptions.matcher,
-        sorter: this.DefaultOptions.sorter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        filter: this.DefaultOptions.filter,
-        beforeSave: function(milestones) {
-          return $.map(milestones, function(m) {
+        ...this.getDefaultCallbacks(),
+        beforeSave(milestones) {
+          return $.map(milestones, (m) => {
             if (m.title == null) {
               return m;
             }
             return {
               id: m.iid,
               title: sanitize(m.title),
-              search: "" + m.title
+              search: m.title,
             };
           });
-        }
-      }
+        },
+      },
     });
-  },
+  }
 
   setupMergeRequests($input) {
     $input.atwho({
       at: '!',
       alias: 'mergerequests',
       searchKey: 'search',
-      displayTpl: function(value) {
-        return value.title != null ? this.Issues.template : this.Loading.template;
-      }.bind(this),
-      data: this.defaultLoadingData,
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.title != null) {
+          tmpl = GfmAutoComplete.Issues.template;
+        }
+        return tmpl;
+      },
+      data: GfmAutoComplete.defaultLoadingData,
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${id}',
       callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        filter: this.DefaultOptions.filter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        matcher: this.DefaultOptions.matcher,
-        beforeSave: function(merges) {
-          return $.map(merges, function(m) {
+        ...this.getDefaultCallbacks(),
+        beforeSave(merges) {
+          return $.map(merges, (m) => {
             if (m.title == null) {
               return m;
             }
             return {
               id: m.iid,
               title: sanitize(m.title),
-              search: m.iid + " " + m.title
+              search: `${m.iid} ${m.title}`,
             };
           });
-        }
-      }
+        },
+      },
     });
-  },
+  }
 
   setupLabels($input) {
     $input.atwho({
       at: '~',
       alias: 'labels',
       searchKey: 'search',
-      data: this.defaultLoadingData,
-      displayTpl: function(value) {
-        return this.isLoading(value) ? this.Loading.template : this.Labels.template;
-      }.bind(this),
+      data: GfmAutoComplete.defaultLoadingData,
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Labels.template;
+        if (GfmAutoComplete.isLoading(value)) {
+          tmpl = GfmAutoComplete.Loading.template;
+        }
+        return tmpl;
+      },
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${title}',
       callbacks: {
-        matcher: this.DefaultOptions.matcher,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        filter: this.DefaultOptions.filter,
-        sorter: this.DefaultOptions.sorter,
-        beforeSave: function(merges) {
-          if (gl.GfmAutoComplete.isLoading(merges)) return merges;
-          var sanitizeLabelTitle;
-          sanitizeLabelTitle = function(title) {
-            if (/[\w\?&]+\s+[\w\?&]+/g.test(title)) {
-              return "\"" + (sanitize(title)) + "\"";
-            } else {
-              return sanitize(title);
-            }
-          };
-          return $.map(merges, function(m) {
-            return {
-              title: sanitize(m.title),
-              color: m.color,
-              search: "" + m.title
-            };
-          });
-        }
-      }
+        ...this.getDefaultCallbacks(),
+        beforeSave(merges) {
+          if (GfmAutoComplete.isLoading(merges)) return merges;
+          return $.map(merges, m => ({
+            title: sanitize(m.title),
+            color: m.color,
+            search: m.title,
+          }));
+        },
+      },
     });
-  },
+  }
+
+  getDefaultCallbacks() {
+    const fetchData = this.fetchData.bind(this);
+
+    return {
+      sorter(query, items, searchKey) {
+        this.setting.highlightFirst = this.setting.alwaysHighlightFirst || query.length > 0;
+        if (GfmAutoComplete.isLoading(items)) {
+          this.setting.highlightFirst = false;
+          return items;
+        }
+        return $.fn.atwho.default.callbacks.sorter(query, items, searchKey);
+      },
+      filter(query, data, searchKey) {
+        if (GfmAutoComplete.isLoading(data)) {
+          fetchData(this.$inputor, this.at);
+          return data;
+        }
+        return $.fn.atwho.default.callbacks.filter(query, data, searchKey);
+      },
+      beforeInsert(value) {
+        let resultantValue = value;
+        if (value && !this.setting.skipSpecialCharacterTest) {
+          const withoutAt = value.substring(1);
+          if (withoutAt && /[^\w\d]/.test(withoutAt)) {
+            resultantValue = `${value.charAt()}"${withoutAt}"`;
+          }
+        }
+        return resultantValue;
+      },
+      matcher(flag, subtext) {
+        // The below is taken from At.js source
+        // Tweaked to commands to start without a space only if char before is a non-word character
+        // https://github.com/ichord/At.js
+        const atSymbolsWithBar = Object.keys(this.app.controllers).join('|');
+        const atSymbolsWithoutBar = Object.keys(this.app.controllers).join('');
+        const targetSubtext = subtext.split(/\s+/g).pop();
+        const resultantFlag = flag.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
 
-  fetchData: function($input, at) {
+        const accentAChar = decodeURI('%C3%80');
+        const accentYChar = decodeURI('%C3%BF');
+
+        const regexp = new RegExp(`^(?:\\B|[^a-zA-Z0-9_${atSymbolsWithoutBar}]|\\s)${resultantFlag}(?!${atSymbolsWithBar})((?:[A-Za-z${accentAChar}-${accentYChar}0-9_'.+-]|[^\\x00-\\x7a])*)$`, 'gi');
+
+        const match = regexp.exec(targetSubtext);
+
+        if (match) {
+          return match[1];
+        }
+        return null;
+      },
+    };
+  }
+
+  fetchData($input, at) {
     if (this.isLoadingData[at]) return;
     this.isLoadingData[at] = true;
     if (this.cachedData[at]) {
       this.loadData($input, at, this.cachedData[at]);
-    } else if (this.atTypeMap[at] === 'emojis') {
+    } else if (GfmAutoComplete.atTypeMap[at] === 'emojis') {
       this.loadData($input, at, Object.keys(emojiMap).concat(Object.keys(emojiAliases)));
     } else {
-      $.getJSON(this.dataSources[this.atTypeMap[at]], (data) => {
-        this.loadData($input, at, data);
-      }).fail(() => { this.isLoadingData[at] = false; });
+      AjaxCache.retrieve(this.dataSources[GfmAutoComplete.atTypeMap[at]], true)
+        .then((data) => {
+          this.loadData($input, at, data);
+        })
+        .catch(() => { this.isLoadingData[at] = false; });
     }
-  },
-  loadData: function($input, at, data) {
+  }
+
+  loadData($input, at, data) {
     this.isLoadingData[at] = false;
     this.cachedData[at] = data;
     $input.atwho('load', at, data);
     // This trigger at.js again
     // otherwise we would be stuck with loading until the user types
     return $input.trigger('keyup');
-  },
-  isLoading(data) {
-    var dataToInspect = data;
+  }
+
+  clearCache() {
+    this.cachedData = {};
+  }
+
+  static isLoading(data) {
+    let dataToInspect = data;
     if (data && data.length > 0) {
       dataToInspect = data[0];
     }
 
-    var loadingState = this.defaultLoadingData[0];
+    const loadingState = GfmAutoComplete.defaultLoadingData[0];
     return dataToInspect &&
       (dataToInspect === loadingState || dataToInspect.name === loadingState);
   }
+}
+
+GfmAutoComplete.defaultLoadingData = ['loading'];
+
+GfmAutoComplete.atTypeMap = {
+  ':': 'emojis',
+  '@': 'members',
+  '#': 'issues',
+  '!': 'mergeRequests',
+  '~': 'labels',
+  '%': 'milestones',
+  '/': 'commands',
+};
+
+// Emoji
+GfmAutoComplete.Emoji = {
+  templateFunction(name) {
+    return `<li>
+      ${name} ${glEmojiTag(name)}
+    </li>
+    `;
+  },
+};
+// Team Members
+GfmAutoComplete.Members = {
+  // eslint-disable-next-line no-template-curly-in-string
+  template: '<li>${avatarTag} ${username} <small>${title}</small></li>',
+};
+GfmAutoComplete.Labels = {
+  // eslint-disable-next-line no-template-curly-in-string
+  template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>',
+};
+// Issues and MergeRequests
+GfmAutoComplete.Issues = {
+  // eslint-disable-next-line no-template-curly-in-string
+  template: '<li><small>${id}</small> ${title}</li>',
 };
+// Milestones
+GfmAutoComplete.Milestones = {
+  // eslint-disable-next-line no-template-curly-in-string
+  template: '<li>${title}</li>',
+};
+GfmAutoComplete.Loading = {
+  template: '<li style="pointer-events: none;"><i class="fa fa-spinner fa-spin"></i> Loading...</li>',
+};
+
+export default GfmAutoComplete;
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 6227722b99b..d34561e5512 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -1,9 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, prefer-rest-params, max-len, vars-on-top, wrap-iife, no-unused-vars, quotes, no-shadow, no-cond-assign, prefer-arrow-callback, no-return-assign, no-else-return, camelcase, comma-dangle, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, prefer-template, no-param-reassign, no-loop-func, no-mixed-operators */
 /* global fuzzaldrinPlus */
+import { isObject } from './lib/utils/type_utility';
 
-var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote,
-  bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
-  indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i += 1) { if (i in this && this[i] === item) return i; } return -1; };
+var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote;
 
 GitLabDropdownFilter = (function() {
   var ARROW_KEY_CODES, BLUR_KEYCODES, HAS_VALUE_CLASS;
@@ -95,7 +94,7 @@ GitLabDropdownFilter = (function() {
           //     { prop: 'def' }
           //   ]
           // }
-          if (gl.utils.isObject(data)) {
+          if (isObject(data)) {
             results = {};
             for (key in data) {
               group = data[key];
@@ -213,10 +212,10 @@ GitLabDropdown = (function() {
     var searchFields, selector, self;
     this.el = el1;
     this.options = options;
-    this.updateLabel = bind(this.updateLabel, this);
-    this.hidden = bind(this.hidden, this);
-    this.opened = bind(this.opened, this);
-    this.shouldPropagate = bind(this.shouldPropagate, this);
+    this.updateLabel = this.updateLabel.bind(this);
+    this.hidden = this.hidden.bind(this);
+    this.opened = this.opened.bind(this);
+    this.shouldPropagate = this.shouldPropagate.bind(this);
     self = this;
     selector = $(this.el).data("target");
     this.dropdown = selector != null ? $(selector) : $(this.el).parent();
@@ -398,7 +397,7 @@ GitLabDropdown = (function() {
       html = [this.noResults()];
     } else {
       // Handle array groups
-      if (gl.utils.isObject(data)) {
+      if (isObject(data)) {
         html = [];
         for (name in data) {
           groupData = data[name];
@@ -469,8 +468,8 @@ GitLabDropdown = (function() {
 
     // Process the data to make sure rendered data
     // matches the correct layout
-    if (this.fullData && hasMultiSelect && this.options.processData) {
-      const inputValue = this.filterInput.val();
+    const inputValue = this.filterInput.val();
+    if (this.fullData && hasMultiSelect && this.options.processData && inputValue.length === 0) {
       this.options.processData.call(this.options, inputValue, this.filteredFullData(), this.parseData.bind(this));
     }
 
@@ -632,8 +631,8 @@ GitLabDropdown = (function() {
   };
 
   GitLabDropdown.prototype.highlightTextMatches = function(text, term) {
-    var occurrences;
-    occurrences = fuzzaldrinPlus.match(text, term);
+    const occurrences = fuzzaldrinPlus.match(text, term);
+    const indexOf = [].indexOf;
     return text.split('').map(function(character, i) {
       if (indexOf.call(occurrences, i) !== -1) {
         return "<b>" + character + "</b>";
@@ -741,6 +740,12 @@ GitLabDropdown = (function() {
       $input.attr('id', this.options.inputId);
     }
 
+    if (this.options.multiSelect) {
+      Object.keys(selectedObject).forEach((attribute) => {
+        $input.attr(`data-${attribute}`, selectedObject[attribute]);
+      });
+    }
+
     if (this.options.inputMeta) {
       $input.attr('data-meta', selectedObject[this.options.inputMeta]);
     }
diff --git a/app/assets/javascripts/gl_field_errors.js b/app/assets/javascripts/gl_field_errors.js
index ca3cec07a88..4bef60264bb 100644
--- a/app/assets/javascripts/gl_field_errors.js
+++ b/app/assets/javascripts/gl_field_errors.js
@@ -1,6 +1,6 @@
 /* eslint-disable comma-dangle, class-methods-use-this, max-len, space-before-function-paren, arrow-parens, no-param-reassign */
 
-require('./gl_field_error');
+import './gl_field_error';
 
 const customValidationFlag = 'gl-field-error-ignore';
 
@@ -31,9 +31,13 @@ class GlFieldErrors {
    * and prevents disabling of invalid submit button by application.js */
 
   catchInvalidFormSubmit (event) {
-    if (!event.currentTarget.checkValidity()) {
-      event.preventDefault();
-      event.stopPropagation();
+    const $form = $(event.currentTarget);
+
+    if (!$form.attr('novalidate')) {
+      if (!event.currentTarget.checkValidity()) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
     }
   }
 
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index ff06092e4d6..dc9f114af99 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -3,11 +3,14 @@
 /* global DropzoneInput */
 /* global autosize */
 
+import GfmAutoComplete from './gfm_auto_complete';
+
 window.gl = window.gl || {};
 
-function GLForm(form) {
+function GLForm(form, enableGFM = false) {
   this.form = form;
   this.textarea = this.form.find('textarea.js-gfm-input');
+  this.enableGFM = enableGFM;
   // Before we start, we should clean up any previous data for this form
   this.destroy();
   // Setup the form
@@ -30,8 +33,14 @@ GLForm.prototype.setupForm = function() {
     this.form.addClass('gfm-form');
     // remove notify commit author checkbox for non-commit notes
     gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
-
-    gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
+    new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup(this.form.find('.js-gfm-input'), {
+      emojis: true,
+      members: this.enableGFM,
+      issues: this.enableGFM,
+      milestones: this.enableGFM,
+      mergeRequests: this.enableGFM,
+      labels: this.enableGFM,
+    });
     new DropzoneInput(this.form);
     autosize(this.textarea);
   }
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
index 521bc77db66..0deb27e522b 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
@@ -2,7 +2,6 @@
 
 import d3 from 'd3';
 
-const bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 const extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 const hasProp = {}.hasOwnProperty;
 
@@ -95,7 +94,7 @@ export const ContributorsMasterGraph = (function(superClass) {
 
   function ContributorsMasterGraph(data1) {
     this.data = data1;
-    this.update_content = bind(this.update_content, this);
+    this.update_content = this.update_content.bind(this);
     this.width = $('.content').width() - 70;
     this.height = 200;
     this.x = null;
diff --git a/app/assets/javascripts/group_name.js b/app/assets/javascripts/group_name.js
index 62675d7e67e..462d792b8d5 100644
--- a/app/assets/javascripts/group_name.js
+++ b/app/assets/javascripts/group_name.js
@@ -44,18 +44,18 @@ export default class GroupName {
   showToggle() {
     this.title.classList.add('wrap');
     this.toggle.classList.remove('hidden');
-    if (this.isHidden) this.groupTitle.classList.add('is-hidden');
+    if (this.isHidden) this.groupTitle.classList.add('hidden');
   }
 
   hideToggle() {
     this.title.classList.remove('wrap');
     this.toggle.classList.add('hidden');
-    if (this.isHidden) this.groupTitle.classList.remove('is-hidden');
+    if (this.isHidden) this.groupTitle.classList.remove('hidden');
   }
 
   toggleGroups() {
     this.isHidden = !this.isHidden;
-    this.groupTitle.classList.toggle('is-hidden');
+    this.groupTitle.classList.toggle('hidden');
   }
 
   render() {
diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js
index acfa4bd4c6b..b5975295329 100644
--- a/app/assets/javascripts/groups_select.js
+++ b/app/assets/javascripts/groups_select.js
@@ -3,7 +3,7 @@
                   prefer-arrow-callback, comma-dangle, consistent-return, yoda,
                   prefer-rest-params, prefer-spread, no-unused-vars, prefer-template,
                   promise/catch-or-return */
-/* global Api */
+import Api from './api';
 
 var slice = [].slice;
 
diff --git a/app/assets/javascripts/importer_status.js b/app/assets/javascripts/importer_status.js
index 34e4a257ff9..5b4ca94ed30 100644
--- a/app/assets/javascripts/importer_status.js
+++ b/app/assets/javascripts/importer_status.js
@@ -56,6 +56,8 @@
               if (job.import_status === 'finished') {
                 job_item.removeClass("active").addClass("success");
                 return status_field.html('<span><i class="fa fa-check"></i> done</span>');
+              } else if (job.import_status === 'scheduled') {
+                return status_field.html("<i class='fa fa-spinner fa-spin'></i> scheduled");
               } else if (job.import_status === 'started') {
                 return status_field.html("<i class='fa fa-spinner fa-spin'></i> started");
               } else {
diff --git a/app/assets/javascripts/integrations/index.js b/app/assets/javascripts/integrations/index.js
new file mode 100644
index 00000000000..10fe6bac0e8
--- /dev/null
+++ b/app/assets/javascripts/integrations/index.js
@@ -0,0 +1,7 @@
+/* eslint-disable no-new */
+import IntegrationSettingsForm from './integration_settings_form';
+
+$(() => {
+  const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
+  integrationSettingsForm.init();
+});
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
new file mode 100644
index 00000000000..ddd3a6aab99
--- /dev/null
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -0,0 +1,123 @@
+/* global Flash */
+
+export default class IntegrationSettingsForm {
+  constructor(formSelector) {
+    this.$form = $(formSelector);
+
+    // Form Metadata
+    this.canTestService = this.$form.data('can-test');
+    this.testEndPoint = this.$form.data('test-url');
+
+    // Form Child Elements
+    this.$serviceToggle = this.$form.find('#service_active');
+    this.$submitBtn = this.$form.find('button[type="submit"]');
+    this.$submitBtnLoader = this.$submitBtn.find('.js-btn-spinner');
+    this.$submitBtnLabel = this.$submitBtn.find('.js-btn-label');
+  }
+
+  init() {
+    // Initialize View
+    this.toggleServiceState(this.$serviceToggle.is(':checked'));
+
+    // Bind Event Listeners
+    this.$serviceToggle.on('change', e => this.handleServiceToggle(e));
+    this.$submitBtn.on('click', e => this.handleSettingsSave(e));
+  }
+
+  handleSettingsSave(e) {
+    // Check if Service is marked active, as if not marked active,
+    // We can skip testing it and directly go ahead to allow form to
+    // be submitted
+    if (!this.$serviceToggle.is(':checked')) {
+      return;
+    }
+
+    // Service was marked active so now we check;
+    // 1) If form contents are valid
+    // 2) If this service can be tested
+    // If both conditions are true, we override form submission
+    // and test the service using provided configuration.
+    if (this.$form.get(0).checkValidity() && this.canTestService) {
+      e.preventDefault();
+      this.testSettings(this.$form.serialize());
+    }
+  }
+
+  handleServiceToggle(e) {
+    this.toggleServiceState($(e.currentTarget).is(':checked'));
+  }
+
+  /**
+   * Change Form's validation enforcement based on service status (active/inactive)
+   */
+  toggleServiceState(serviceActive) {
+    this.toggleSubmitBtnLabel(serviceActive);
+    if (serviceActive) {
+      this.$form.removeAttr('novalidate');
+    } else if (!this.$form.attr('novalidate')) {
+      this.$form.attr('novalidate', 'novalidate');
+    }
+  }
+
+  /**
+   * Toggle Submit button label based on Integration status and ability to test service
+   */
+  toggleSubmitBtnLabel(serviceActive) {
+    let btnLabel = 'Save changes';
+
+    if (serviceActive && this.canTestService) {
+      btnLabel = 'Test settings and save changes';
+    }
+
+    this.$submitBtnLabel.text(btnLabel);
+  }
+
+  /**
+   * Toggle Submit button state based on provided boolean value of `saveTestActive`
+   * When enabled, it does two things, and reverts back when disabled
+   *
+   * 1. It shows load spinner on submit button
+   * 2. Makes submit button disabled
+   */
+  toggleSubmitBtnState(saveTestActive) {
+    if (saveTestActive) {
+      this.$submitBtn.disable();
+      this.$submitBtnLoader.removeClass('hidden');
+    } else {
+      this.$submitBtn.enable();
+      this.$submitBtnLoader.addClass('hidden');
+    }
+  }
+
+  /* eslint-disable promise/catch-or-return, no-new */
+  /**
+   * Test Integration config
+   */
+  testSettings(formData) {
+    this.toggleSubmitBtnState(true);
+    $.ajax({
+      type: 'PUT',
+      url: this.testEndPoint,
+      data: formData,
+    })
+    .done((res) => {
+      if (res.error) {
+        new Flash(res.message, null, null, {
+          title: 'Save anyway',
+          clickHandler: (e) => {
+            e.preventDefault();
+            this.$form.submit();
+          },
+        });
+      } else {
+        this.$form.submit();
+      }
+    })
+    .fail(() => {
+      new Flash('Something went wrong on our end.');
+    })
+    .always(() => {
+      this.toggleSubmitBtnState(false);
+    });
+  }
+}
diff --git a/app/assets/javascripts/issuable_bulk_update_actions.js b/app/assets/javascripts/issuable_bulk_update_actions.js
new file mode 100644
index 00000000000..e46c0e90255
--- /dev/null
+++ b/app/assets/javascripts/issuable_bulk_update_actions.js
@@ -0,0 +1,159 @@
+/* eslint-disable comma-dangle, quotes, consistent-return, func-names, array-callback-return, space-before-function-paren, prefer-arrow-callback, max-len, no-unused-expressions, no-sequences, no-underscore-dangle, no-unused-vars, no-param-reassign */
+/* global IssuableIndex */
+/* global Flash */
+
+export default {
+  init({ container, form, issues, prefixId } = {}) {
+    this.prefixId = prefixId || 'issue_';
+    this.form = form || this.getElement('.bulk-update');
+    this.$labelDropdown = this.form.find('.js-label-select');
+    this.issues = issues || this.getElement('.issues-list .issue');
+    this.willUpdateLabels = false;
+    this.bindEvents();
+  },
+
+  bindEvents() {
+    return this.form.off('submit').on('submit', this.onFormSubmit.bind(this));
+  },
+
+  onFormSubmit(e) {
+    e.preventDefault();
+    return this.submit();
+  },
+
+  submit() {
+    const _this = this;
+    const xhr = $.ajax({
+      url: this.form.attr('action'),
+      method: this.form.attr('method'),
+      dataType: 'JSON',
+      data: this.getFormDataAsObject()
+    });
+    xhr.done(() => window.location.reload());
+    xhr.fail(() => this.onFormSubmitFailure());
+  },
+
+  onFormSubmitFailure() {
+    this.form.find('[type="submit"]').enable();
+    return new Flash("Issue update failed");
+  },
+
+  getSelectedIssues() {
+    return this.issues.has('.selected_issue:checked');
+  },
+
+  getLabelsFromSelection() {
+    const labels = [];
+    this.getSelectedIssues().map(function() {
+      const labelsData = $(this).data('labels');
+      if (labelsData) {
+        return labelsData.map(function(labelId) {
+          if (labels.indexOf(labelId) === -1) {
+            return labels.push(labelId);
+          }
+        });
+      }
+    });
+    return labels;
+  },
+
+  /**
+   * Will return only labels that were marked previously and the user has unmarked
+   * @return {Array} Label IDs
+   */
+
+  getUnmarkedIndeterminedLabels() {
+    const result = [];
+    const labelsToKeep = this.$labelDropdown.data('indeterminate');
+
+    this.getLabelsFromSelection().forEach((id) => {
+      if (labelsToKeep.indexOf(id) === -1) {
+        result.push(id);
+      }
+    });
+
+    return result;
+  },
+
+  /**
+   * Simple form serialization, it will return just what we need
+   * Returns key/value pairs from form data
+   */
+
+  getFormDataAsObject() {
+    const formData = {
+      update: {
+        state_event: this.form.find('input[name="update[state_event]"]').val(),
+        // For Merge Requests
+        assignee_id: this.form.find('input[name="update[assignee_id]"]').val(),
+        // For Issues
+        assignee_ids: [this.form.find('input[name="update[assignee_ids][]"]').val()],
+        milestone_id: this.form.find('input[name="update[milestone_id]"]').val(),
+        issuable_ids: this.form.find('input[name="update[issuable_ids]"]').val(),
+        subscription_event: this.form.find('input[name="update[subscription_event]"]').val(),
+        add_label_ids: [],
+        remove_label_ids: []
+      }
+    };
+    if (this.willUpdateLabels) {
+      formData.update.add_label_ids = this.$labelDropdown.data('marked');
+      formData.update.remove_label_ids = this.$labelDropdown.data('unmarked');
+    }
+    return formData;
+  },
+
+  setOriginalDropdownData() {
+    const $labelSelect = $('.bulk-update .js-label-select');
+    $labelSelect.data('common', this.getOriginalCommonIds());
+    $labelSelect.data('marked', this.getOriginalMarkedIds());
+    $labelSelect.data('indeterminate', this.getOriginalIndeterminateIds());
+  },
+
+  // From issuable's initial bulk selection
+  getOriginalCommonIds() {
+    const labelIds = [];
+
+    this.getElement('.selected_issue:checked').each((i, el) => {
+      labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
+    });
+    return _.intersection.apply(this, labelIds);
+  },
+
+  // From issuable's initial bulk selection
+  getOriginalMarkedIds() {
+    const labelIds = [];
+    this.getElement('.selected_issue:checked').each((i, el) => {
+      labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
+    });
+    return _.intersection.apply(this, labelIds);
+  },
+
+  // From issuable's initial bulk selection
+  getOriginalIndeterminateIds() {
+    const uniqueIds = [];
+    const labelIds = [];
+    let issuableLabels = [];
+
+    // Collect unique label IDs for all checked issues
+    this.getElement('.selected_issue:checked').each((i, el) => {
+      issuableLabels = this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels');
+      issuableLabels.forEach((labelId) => {
+        // Store unique IDs
+        if (uniqueIds.indexOf(labelId) === -1) {
+          uniqueIds.push(labelId);
+        }
+      });
+      // Store array of IDs per issuable
+      labelIds.push(issuableLabels);
+    });
+    // Add uniqueIds to add it as argument for _.intersection
+    labelIds.unshift(uniqueIds);
+    // Return IDs that are present but not in all selected issueables
+    return _.difference(uniqueIds, _.intersection.apply(this, labelIds));
+  },
+
+  getElement(selector) {
+    this.scopeEl = this.scopeEl || $('.content');
+    return this.scopeEl.find(selector);
+  },
+};
diff --git a/app/assets/javascripts/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable_bulk_update_sidebar.js
new file mode 100644
index 00000000000..84bd2e092e6
--- /dev/null
+++ b/app/assets/javascripts/issuable_bulk_update_sidebar.js
@@ -0,0 +1,165 @@
+/* eslint-disable class-methods-use-this, no-new */
+/* global LabelsSelect */
+/* global MilestoneSelect */
+/* global IssueStatusSelect */
+/* global SubscriptionSelect */
+
+import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
+
+const HIDDEN_CLASS = 'hidden';
+const DISABLED_CONTENT_CLASS = 'disabled-content';
+const SIDEBAR_EXPANDED_CLASS = 'right-sidebar-expanded issuable-bulk-update-sidebar';
+const SIDEBAR_COLLAPSED_CLASS = 'right-sidebar-collapsed issuable-bulk-update-sidebar';
+
+export default class IssuableBulkUpdateSidebar {
+  constructor() {
+    this.initDomElements();
+    this.bindEvents();
+    this.initDropdowns();
+    this.setupBulkUpdateActions();
+  }
+
+  initDomElements() {
+    this.$page = $('.page-with-sidebar');
+    this.$sidebar = $('.right-sidebar');
+    this.$bulkEditCancelBtn = $('.js-bulk-update-menu-hide');
+    this.$bulkEditSubmitBtn = $('.update-selected-issues');
+    this.$bulkUpdateEnableBtn = $('.js-bulk-update-toggle');
+    this.$otherFilters = $('.issues-other-filters');
+    this.$checkAllContainer = $('.check-all-holder');
+    this.$issueChecks = $('.issue-check');
+    this.$issuesList = $('.selected_issue');
+    this.$issuableIdsInput = $('#update_issuable_ids');
+  }
+
+  bindEvents() {
+    this.$bulkUpdateEnableBtn.on('click', e => this.toggleBulkEdit(e, true));
+    this.$bulkEditCancelBtn.on('click', e => this.toggleBulkEdit(e, false));
+    this.$checkAllContainer.on('click', e => this.selectAll(e));
+    this.$issuesList.on('change', () => this.updateFormState());
+    this.$bulkEditSubmitBtn.on('click', () => this.prepForSubmit());
+    this.$checkAllContainer.on('click', () => this.updateFormState());
+  }
+
+  initDropdowns() {
+    new LabelsSelect();
+    new MilestoneSelect();
+    new IssueStatusSelect();
+    new SubscriptionSelect();
+  }
+
+  getNavHeight() {
+    const navbarHeight = $('.navbar-gitlab').outerHeight();
+    const layoutNavHeight = $('.layout-nav').outerHeight();
+    const subNavScroll = $('.sub-nav-scroll').outerHeight();
+    return navbarHeight + layoutNavHeight + subNavScroll;
+  }
+
+  initSidebar() {
+    if (!this.navHeight) {
+      this.navHeight = this.getNavHeight();
+    }
+
+    if (!this.sidebarInitialized) {
+      $(document).off('scroll').on('scroll', _.throttle(this.setSidebarHeight, 10).bind(this));
+      $(window).off('resize').on('resize', _.throttle(this.setSidebarHeight, 10).bind(this));
+      this.sidebarInitialized = true;
+    }
+  }
+
+  setupBulkUpdateActions() {
+    IssuableBulkUpdateActions.setOriginalDropdownData();
+  }
+
+  updateFormState() {
+    const noCheckedIssues = !$('.selected_issue:checked').length;
+
+    this.toggleSubmitButtonDisabled(noCheckedIssues);
+    this.updateSelectedIssuableIds();
+
+    IssuableBulkUpdateActions.setOriginalDropdownData();
+  }
+
+  prepForSubmit() {
+    // if submit button is disabled, submission is blocked. This ensures we disable after
+    // form submission is carried out
+    setTimeout(() => this.$bulkEditSubmitBtn.disable());
+    this.updateSelectedIssuableIds();
+  }
+
+  toggleBulkEdit(e, enable) {
+    e.preventDefault();
+
+    this.toggleSidebarDisplay(enable);
+    this.toggleBulkEditButtonDisabled(enable);
+    this.toggleOtherFiltersDisabled(enable);
+    this.toggleCheckboxDisplay(enable);
+
+    if (enable) {
+      this.initSidebar();
+    }
+  }
+
+  updateSelectedIssuableIds() {
+    this.$issuableIdsInput.val(IssuableBulkUpdateSidebar.getCheckedIssueIds());
+  }
+
+  selectAll() {
+    const checkAllButtonState = this.$checkAllContainer.find('input').prop('checked');
+
+    this.$issuesList.prop('checked', checkAllButtonState);
+  }
+
+  toggleSidebarDisplay(show) {
+    this.$page.toggleClass(SIDEBAR_EXPANDED_CLASS, show);
+    this.$page.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
+    this.$sidebar.toggleClass(SIDEBAR_EXPANDED_CLASS, show);
+    this.$sidebar.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
+  }
+
+  toggleBulkEditButtonDisabled(disable) {
+    if (disable) {
+      this.$bulkUpdateEnableBtn.disable();
+    } else {
+      this.$bulkUpdateEnableBtn.enable();
+    }
+  }
+
+  toggleCheckboxDisplay(show) {
+    this.$checkAllContainer.toggleClass(HIDDEN_CLASS, !show);
+    this.$issueChecks.toggleClass(HIDDEN_CLASS, !show);
+  }
+
+  toggleOtherFiltersDisabled(disable) {
+    this.$otherFilters.toggleClass(DISABLED_CONTENT_CLASS, disable);
+  }
+
+  toggleSubmitButtonDisabled(disable) {
+    if (disable) {
+      this.$bulkEditSubmitBtn.disable();
+    } else {
+      this.$bulkEditSubmitBtn.enable();
+    }
+  }
+  // loosely based on method of the same name in right_sidebar.js
+  setSidebarHeight() {
+    const currentScrollDepth = window.pageYOffset || 0;
+    const diff = this.navHeight - currentScrollDepth;
+
+    if (diff > 0) {
+      this.$sidebar.outerHeight(window.innerHeight - diff);
+    } else {
+      this.$sidebar.outerHeight('100%');
+    }
+  }
+
+  static getCheckedIssueIds() {
+    const $checkedIssues = $('.selected_issue:checked');
+
+    if ($checkedIssues.length > 0) {
+      return $.map($checkedIssues, value => $(value).data('id'));
+    }
+
+    return [];
+  }
+}
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index 834b98e8601..a4d7bf096ef 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -1,8 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, comma-dangle, quotes, prefer-arrow-callback, consistent-return, one-var, no-var, one-var-declaration-per-line, no-underscore-dangle, max-len */
-/* global UsersSelect */
 /* global bp */
 
 import Cookies from 'js-cookie';
+import UsersSelect from './users_select';
 
 (function() {
   this.IssuableContext = (function() {
@@ -47,7 +47,6 @@ import Cookies from 'js-cookie';
           Cookies.set('collapsed_gutter', true);
         }
       });
-      $(".right-sidebar").niceScroll();
     }
 
     IssuableContext.prototype.initParticipants = function() {
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index 687c2bb6110..92f6f0d4117 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -1,14 +1,14 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, quotes, object-shorthand, no-unused-vars, comma-dangle, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, max-len */
 /* global GitLab */
-/* global UsersSelect */
 /* global ZenMode */
 /* global Autosave */
 /* global dateFormat */
 /* global Pikaday */
 
-(function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
+import UsersSelect from './users_select';
+import GfmAutoComplete from './gfm_auto_complete';
 
+(function() {
   this.IssuableForm = (function() {
     IssuableForm.prototype.issueMoveConfirmMsg = 'Are you sure you want to move this issue to another project?';
 
@@ -17,11 +17,11 @@
     function IssuableForm(form) {
       var $issuableDueDate, calendar;
       this.form = form;
-      this.toggleWip = bind(this.toggleWip, this);
-      this.renderWipExplanation = bind(this.renderWipExplanation, this);
-      this.resetAutosave = bind(this.resetAutosave, this);
-      this.handleSubmit = bind(this.handleSubmit, this);
-      gl.GfmAutoComplete.setup();
+      this.toggleWip = this.toggleWip.bind(this);
+      this.renderWipExplanation = this.renderWipExplanation.bind(this);
+      this.resetAutosave = this.resetAutosave.bind(this);
+      this.handleSubmit = this.handleSubmit.bind(this);
+      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
       new UsersSelect();
       new ZenMode();
       this.titleField = this.form.find("input[name*='[title]']");
diff --git a/app/assets/javascripts/issuable.js b/app/assets/javascripts/issuable_index.js
index 3bfce32768a..5c96646def8 100644
--- a/app/assets/javascripts/issuable.js
+++ b/app/assets/javascripts/issuable_index.js
@@ -1,30 +1,33 @@
 /* eslint-disable no-param-reassign, func-names, no-var, camelcase, no-unused-vars, object-shorthand, space-before-function-paren, no-return-assign, comma-dangle, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, wrap-iife, max-len */
-/* global Issuable */
+/* global IssuableIndex */
+
+import IssuableBulkUpdateSidebar from './issuable_bulk_update_sidebar';
+import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
 
 ((global) => {
   var issuable_created;
 
   issuable_created = false;
 
-  global.Issuable = {
-    init: function() {
-      Issuable.initTemplates();
-      Issuable.initSearch();
-      Issuable.initChecks();
-      Issuable.initResetFilters();
-      Issuable.resetIncomingEmailToken();
-      return Issuable.initLabelFilterRemove();
+  global.IssuableIndex = {
+    init: function(pagePrefix) {
+      IssuableIndex.initTemplates();
+      IssuableIndex.initSearch();
+      IssuableIndex.initBulkUpdate(pagePrefix);
+      IssuableIndex.initResetFilters();
+      IssuableIndex.resetIncomingEmailToken();
+      IssuableIndex.initLabelFilterRemove();
     },
     initTemplates: function() {
-      return Issuable.labelRow = _.template('<% _.each(labels, function(label){ %> <span class="label-row btn-group" role="group" aria-label="<%- label.title %>" style="color: <%- label.text_color %>;"> <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%- label.color %>;" title="<%- label.description %>" data-container="body"> <%- label.title %> </a> <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%- label.color %>;" data-label="<%- label.title %>"> <i class="fa fa-times"></i> </button> </span> <% }); %>');
+      return IssuableIndex.labelRow = _.template('<% _.each(labels, function(label){ %> <span class="label-row btn-group" role="group" aria-label="<%- label.title %>" style="color: <%- label.text_color %>;"> <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%- label.color %>;" title="<%- label.description %>" data-container="body"> <%- label.title %> </a> <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%- label.color %>;" data-label="<%- label.title %>"> <i class="fa fa-times"></i> </button> </span> <% }); %>');
     },
     initSearch: function() {
       const $searchInput = $('#issuable_search');
 
-      Issuable.initSearchState($searchInput);
+      IssuableIndex.initSearchState($searchInput);
 
       // `immediate` param set to false debounces on the `trailing` edge, lets user finish typing
-      const debouncedExecSearch = _.debounce(Issuable.executeSearch, 1000, false);
+      const debouncedExecSearch = _.debounce(IssuableIndex.executeSearch, 1000, false);
 
       $searchInput.off('keyup').on('keyup', debouncedExecSearch);
 
@@ -37,16 +40,16 @@
     initSearchState: function($searchInput) {
       const currentSearchVal = $searchInput.val();
 
-      Issuable.searchState = {
+      IssuableIndex.searchState = {
         elem: $searchInput,
         current: currentSearchVal
       };
 
-      Issuable.maybeFocusOnSearch();
+      IssuableIndex.maybeFocusOnSearch();
     },
     accessSearchPristine: function(set) {
       // store reference to previous value to prevent search on non-mutating keyup
-      const state = Issuable.searchState;
+      const state = IssuableIndex.searchState;
       const currentSearchVal = state.elem.val();
 
       if (set) {
@@ -56,10 +59,10 @@
       }
     },
     maybeFocusOnSearch: function() {
-      const currentSearchVal = Issuable.searchState.current;
+      const currentSearchVal = IssuableIndex.searchState.current;
       if (currentSearchVal && currentSearchVal !== '') {
         const queryLength = currentSearchVal.length;
-        const $searchInput = Issuable.searchState.elem;
+        const $searchInput = IssuableIndex.searchState.elem;
 
       /* The following ensures that the cursor is initially placed at
         * the end of search input when focus is applied. It accounts
@@ -80,7 +83,7 @@
       const $searchValue = $search.val();
       const $filtersForm = $('.js-filter-form');
       const $input = $(`input[name='${$searchName}']`, $filtersForm);
-      const isPristine = Issuable.accessSearchPristine();
+      const isPristine = IssuableIndex.accessSearchPristine();
 
       if (isPristine) {
         return;
@@ -92,7 +95,7 @@
         $input.val($searchValue);
       }
 
-      Issuable.filterResults($filtersForm);
+      IssuableIndex.filterResults($filtersForm);
     },
     initLabelFilterRemove: function() {
       return $(document).off('click', '.js-label-filter-remove').on('click', '.js-label-filter-remove', function(e) {
@@ -103,7 +106,7 @@
           return this.value === $button.data('label');
         }).remove();
         // Submit the form to get new data
-        Issuable.filterResults($('.filter-form'));
+        IssuableIndex.filterResults($('.filter-form'));
       });
     },
     filterResults: (function(_this) {
@@ -132,38 +135,18 @@
         gl.utils.visitUrl(baseIssuesUrl);
       });
     },
-    initChecks: function() {
-      this.issuableBulkActions = $('.bulk-update').data('bulkActions');
-      $('.check_all_issues').off('click').on('click', function() {
-        $('.selected_issue').prop('checked', this.checked);
-        return Issuable.checkChanged();
-      });
-      return $('.selected_issue').off('change').on('change', Issuable.checkChanged.bind(this));
-    },
-    checkChanged: function() {
-      const $checkedIssues = $('.selected_issue:checked');
-      const $updateIssuesIds = $('#update_issuable_ids');
-      const $issuesOtherFilters = $('.issues-other-filters');
-      const $issuesBulkUpdate = $('.issues_bulk_update');
-
-      this.issuableBulkActions.willUpdateLabels = false;
-      this.issuableBulkActions.setOriginalDropdownData();
-
-      if ($checkedIssues.length > 0) {
-        const ids = $.map($checkedIssues, function(value) {
-          return $(value).data('id');
+    initBulkUpdate: function(pagePrefix) {
+      const userCanBulkUpdate = $('.issues-bulk-update').length > 0;
+      const alreadyInitialized = !!this.bulkUpdateSidebar;
+
+      if (userCanBulkUpdate && !alreadyInitialized) {
+        IssuableBulkUpdateActions.init({
+          prefixId: pagePrefix,
         });
-        $updateIssuesIds.val(ids);
-        $issuesOtherFilters.hide();
-        $issuesBulkUpdate.show();
-      } else {
-        $updateIssuesIds.val([]);
-        $issuesBulkUpdate.hide();
-        $issuesOtherFilters.show();
+
+        this.bulkUpdateSidebar = new IssuableBulkUpdateSidebar();
       }
-      return true;
     },
-
     resetIncomingEmailToken: function() {
       $('.incoming-email-token-reset').on('click', function(e) {
         e.preventDefault();
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 694c6177a07..0860e237ce1 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -1,11 +1,11 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
- /* global Flash */
-import CreateMergeRequestDropdown from './create_merge_request_dropdown';
+/* global Flash */
 
-require('./flash');
-require('~/lib/utils/text_utility');
-require('vendor/jquery.waitforimages');
-require('./task_list');
+import 'vendor/jquery.waitforimages';
+import '~/lib/utils/text_utility';
+import './flash';
+import './task_list';
+import CreateMergeRequestDropdown from './create_merge_request_dropdown';
 
 class Issue {
   constructor() {
diff --git a/app/assets/javascripts/issue_show/actions/tasks.js b/app/assets/javascripts/issue_show/actions/tasks.js
deleted file mode 100644
index 0740a9f559c..00000000000
--- a/app/assets/javascripts/issue_show/actions/tasks.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export default (newStateData, tasks) => {
-  const $tasks = $('#task_status');
-  const $tasksShort = $('#task_status_short');
-  const $issueableHeader = $('.issuable-header');
-  const tasksStates = { newState: null, currentState: null };
-
-  if ($tasks.length === 0) {
-    if (!(newStateData.task_status.indexOf('0 of 0') === 0)) {
-      $issueableHeader.append(`<span id="task_status">${newStateData.task_status}</span>`);
-    } else {
-      $issueableHeader.append('<span id="task_status"></span>');
-    }
-  } else {
-    tasksStates.newState = newStateData.task_status.indexOf('0 of 0') === 0;
-    tasksStates.currentState = tasks.indexOf('0 of 0') === 0;
-  }
-
-  if ($tasks.length !== 0 && !tasksStates.newState) {
-    $tasks.text(newStateData.task_status);
-    $tasksShort.text(newStateData.task_status);
-  } else if (tasksStates.currentState) {
-    $issueableHeader.append(`<span id="task_status">${newStateData.task_status}</span>`);
-  } else if (tasksStates.newState) {
-    $tasks.remove();
-    $tasksShort.remove();
-  }
-};
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
new file mode 100644
index 00000000000..e14414d3f68
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -0,0 +1,273 @@
+<script>
+/* global Flash */
+import Visibility from 'visibilityjs';
+import Poll from '../../lib/utils/poll';
+import eventHub from '../event_hub';
+import Service from '../services/index';
+import Store from '../stores';
+import titleComponent from './title.vue';
+import descriptionComponent from './description.vue';
+import editedComponent from './edited.vue';
+import formComponent from './form.vue';
+import '../../lib/utils/url_utility';
+
+export default {
+  props: {
+    endpoint: {
+      required: true,
+      type: String,
+    },
+    canMove: {
+      required: true,
+      type: Boolean,
+    },
+    canUpdate: {
+      required: true,
+      type: Boolean,
+    },
+    canDestroy: {
+      required: true,
+      type: Boolean,
+    },
+    issuableRef: {
+      type: String,
+      required: true,
+    },
+    initialTitleHtml: {
+      type: String,
+      required: true,
+    },
+    initialTitleText: {
+      type: String,
+      required: true,
+    },
+    initialDescriptionHtml: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    initialDescriptionText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedAt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedByName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedByPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    issuableTemplates: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isConfidential: {
+      type: Boolean,
+      required: true,
+    },
+    markdownPreviewUrl: {
+      type: String,
+      required: true,
+    },
+    markdownDocs: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    projectNamespace: {
+      type: String,
+      required: true,
+    },
+    projectsAutocompleteUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    const store = new Store({
+      titleHtml: this.initialTitleHtml,
+      titleText: this.initialTitleText,
+      descriptionHtml: this.initialDescriptionHtml,
+      descriptionText: this.initialDescriptionText,
+      updatedAt: this.updatedAt,
+      updatedByName: this.updatedByName,
+      updatedByPath: this.updatedByPath,
+    });
+
+    return {
+      store,
+      state: store.state,
+      showForm: false,
+    };
+  },
+  computed: {
+    formState() {
+      return this.store.formState;
+    },
+    hasUpdated() {
+      return !!this.state.updatedAt;
+    },
+  },
+  components: {
+    descriptionComponent,
+    titleComponent,
+    editedComponent,
+    formComponent,
+  },
+  methods: {
+    openForm() {
+      if (!this.showForm) {
+        this.showForm = true;
+        this.store.setFormState({
+          title: this.state.titleText,
+          confidential: this.isConfidential,
+          description: this.state.descriptionText,
+          lockedWarningVisible: false,
+          move_to_project_id: 0,
+          updateLoading: false,
+        });
+      }
+    },
+    closeForm() {
+      this.showForm = false;
+    },
+    updateIssuable() {
+      const canPostUpdate = this.store.formState.move_to_project_id !== 0 ?
+        confirm('Are you sure you want to move this issue to another project?') : true; // eslint-disable-line no-alert
+
+      if (!canPostUpdate) {
+        this.store.setFormState({
+          updateLoading: false,
+        });
+        return;
+      }
+
+      this.service.updateIssuable(this.store.formState)
+        .then(res => res.json())
+        .then((data) => {
+          if (location.pathname !== data.web_url) {
+            gl.utils.visitUrl(data.web_url);
+          } else if (data.confidential !== this.isConfidential) {
+            gl.utils.visitUrl(location.pathname);
+          }
+
+          return this.service.getData();
+        })
+        .then(res => res.json())
+        .then((data) => {
+          this.store.updateState(data);
+          eventHub.$emit('close.form');
+        })
+        .catch(() => {
+          eventHub.$emit('close.form');
+          return new Flash('Error updating issue');
+        });
+    },
+    deleteIssuable() {
+      this.service.deleteIssuable()
+        .then(res => res.json())
+        .then((data) => {
+          // Stop the poll so we don't get 404's with the issue not existing
+          this.poll.stop();
+
+          gl.utils.visitUrl(data.web_url);
+        })
+        .catch(() => {
+          eventHub.$emit('close.form');
+          return new Flash('Error deleting issue');
+        });
+    },
+  },
+  created() {
+    this.service = new Service(this.endpoint);
+    this.poll = new Poll({
+      resource: this.service,
+      method: 'getData',
+      successCallback: (res) => {
+        const data = res.json();
+        const shouldUpdate = this.store.stateShouldUpdate(data);
+
+        this.store.updateState(data);
+
+        if (this.showForm && (shouldUpdate.title || shouldUpdate.description)) {
+          this.store.formState.lockedWarningVisible = true;
+        }
+      },
+      errorCallback(err) {
+        throw new Error(err);
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      this.poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        this.poll.restart();
+      } else {
+        this.poll.stop();
+      }
+    });
+
+    eventHub.$on('delete.issuable', this.deleteIssuable);
+    eventHub.$on('update.issuable', this.updateIssuable);
+    eventHub.$on('close.form', this.closeForm);
+    eventHub.$on('open.form', this.openForm);
+  },
+  beforeDestroy() {
+    eventHub.$off('delete.issuable', this.deleteIssuable);
+    eventHub.$off('update.issuable', this.updateIssuable);
+    eventHub.$off('close.form', this.closeForm);
+    eventHub.$off('open.form', this.openForm);
+  },
+};
+</script>
+
+<template>
+  <div>
+    <form-component
+      v-if="canUpdate && showForm"
+      :form-state="formState"
+      :can-move="canMove"
+      :can-destroy="canDestroy"
+      :issuable-templates="issuableTemplates"
+      :markdown-docs="markdownDocs"
+      :markdown-preview-url="markdownPreviewUrl"
+      :project-path="projectPath"
+      :project-namespace="projectNamespace"
+      :projects-autocomplete-url="projectsAutocompleteUrl"
+    />
+    <div v-else>
+      <title-component
+        :issuable-ref="issuableRef"
+        :title-html="state.titleHtml"
+        :title-text="state.titleText" />
+      <description-component
+        v-if="state.descriptionHtml"
+        :can-update="canUpdate"
+        :description-html="state.descriptionHtml"
+        :description-text="state.descriptionText"
+        :updated-at="state.updatedAt"
+        :task-status="state.taskStatus" />
+      <edited-component
+        v-if="hasUpdated"
+        :updated-at="state.updatedAt"
+        :updated-by-name="state.updatedByName"
+        :updated-by-path="state.updatedByPath" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
new file mode 100644
index 00000000000..5ae617356e0
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -0,0 +1,96 @@
+<script>
+  import animateMixin from '../mixins/animate';
+
+  export default {
+    mixins: [animateMixin],
+    props: {
+      canUpdate: {
+        type: Boolean,
+        required: true,
+      },
+      descriptionHtml: {
+        type: String,
+        required: true,
+      },
+      descriptionText: {
+        type: String,
+        required: true,
+      },
+      taskStatus: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        preAnimation: false,
+        pulseAnimation: false,
+      };
+    },
+    watch: {
+      descriptionHtml() {
+        this.animateChange();
+
+        this.$nextTick(() => {
+          this.renderGFM();
+        });
+      },
+      taskStatus() {
+        const taskRegexMatches = this.taskStatus.match(/(\d+) of (\d+)/);
+        const $issuableHeader = $('.issuable-meta');
+        const $tasks = $('#task_status', $issuableHeader);
+        const $tasksShort = $('#task_status_short', $issuableHeader);
+
+        if (taskRegexMatches) {
+          $tasks.text(this.taskStatus);
+          $tasksShort.text(`${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`);
+        } else {
+          $tasks.text('');
+          $tasksShort.text('');
+        }
+      },
+    },
+    methods: {
+      renderGFM() {
+        $(this.$refs['gfm-entry-content']).renderGFM();
+
+        if (this.canUpdate) {
+          // eslint-disable-next-line no-new
+          new gl.TaskList({
+            dataType: 'issue',
+            fieldName: 'description',
+            selector: '.detail-page-description',
+          });
+        }
+      },
+    },
+    mounted() {
+      this.renderGFM();
+    },
+  };
+</script>
+
+<template>
+  <div
+    v-if="descriptionHtml"
+    class="description"
+    :class="{
+      'js-task-list-container': canUpdate
+    }">
+    <div
+      class="wiki"
+      :class="{
+        'issue-realtime-pre-pulse': preAnimation,
+        'issue-realtime-trigger-pulse': pulseAnimation
+      }"
+      v-html="descriptionHtml"
+      ref="gfm-content">
+    </div>
+    <textarea
+      class="hidden js-task-list-field"
+      v-if="descriptionText"
+      v-model="descriptionText">
+    </textarea>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
new file mode 100644
index 00000000000..8c81575fe6f
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -0,0 +1,79 @@
+<script>
+  import updateMixin from '../mixins/update';
+  import eventHub from '../event_hub';
+
+  export default {
+    mixins: [updateMixin],
+    props: {
+      canDestroy: {
+        type: Boolean,
+        required: true,
+      },
+      formState: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        deleteLoading: false,
+      };
+    },
+    computed: {
+      isSubmitEnabled() {
+        return this.formState.title.trim() !== '';
+      },
+    },
+    methods: {
+      closeForm() {
+        eventHub.$emit('close.form');
+      },
+      deleteIssuable() {
+        // eslint-disable-next-line no-alert
+        if (confirm('Issue will be removed! Are you sure?')) {
+          this.deleteLoading = true;
+
+          eventHub.$emit('delete.issuable');
+        }
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="prepend-top-default append-bottom-default clearfix">
+    <button
+      class="btn btn-save pull-left"
+      :class="{ disabled: formState.updateLoading || !isSubmitEnabled }"
+      type="submit"
+      :disabled="formState.updateLoading || !isSubmitEnabled"
+      @click.prevent="updateIssuable">
+      Save changes
+      <i
+        class="fa fa-spinner fa-spin"
+        aria-hidden="true"
+        v-if="formState.updateLoading">
+      </i>
+    </button>
+    <button
+      class="btn btn-default pull-right"
+      type="button"
+      @click="closeForm">
+      Cancel
+    </button>
+    <button
+      v-if="canDestroy"
+      class="btn btn-danger pull-right append-right-default"
+      :class="{ disabled: deleteLoading }"
+      type="button"
+      :disabled="deleteLoading"
+      @click="deleteIssuable">
+      Delete
+      <i
+        class="fa fa-spinner fa-spin"
+        aria-hidden="true"
+        v-if="deleteLoading">
+      </i>
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue
index f5038e55c09..d59e6d11032 100644
--- a/app/assets/javascripts/issue_show/components/edited.vue
+++ b/app/assets/javascripts/issue_show/components/edited.vue
@@ -53,3 +53,4 @@ export default {
     </span>
   </small>
 </template>
+
diff --git a/app/assets/javascripts/issue_show/components/fields/confidential_checkbox.vue b/app/assets/javascripts/issue_show/components/fields/confidential_checkbox.vue
new file mode 100644
index 00000000000..a0ff08e9111
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/fields/confidential_checkbox.vue
@@ -0,0 +1,23 @@
+<script>
+  export default {
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <fieldset class="checkbox">
+    <label for="issue-confidential">
+      <input
+        type="checkbox"
+        value="1"
+        id="issue-confidential"
+        v-model="formState.confidential" />
+      This issue is confidential and should only be visible to team members with at least Reporter access.
+    </label>
+  </fieldset>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
new file mode 100644
index 00000000000..30a1be5cb50
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -0,0 +1,54 @@
+<script>
+  /* global Flash */
+  import updateMixin from '../../mixins/update';
+  import markdownField from '../../../vue_shared/components/markdown/field.vue';
+
+  export default {
+    mixins: [updateMixin],
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+      markdownPreviewUrl: {
+        type: String,
+        required: true,
+      },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+    },
+    components: {
+      markdownField,
+    },
+    mounted() {
+      this.$refs.textarea.focus();
+    },
+  };
+</script>
+
+<template>
+  <div class="common-note-form">
+    <label
+      class="sr-only"
+      for="issue-description">
+      Description
+    </label>
+    <markdown-field
+      :markdown-preview-url="markdownPreviewUrl"
+      :markdown-docs="markdownDocs">
+      <textarea
+        id="issue-description"
+        class="note-textarea js-gfm-input js-autosize markdown-area"
+        data-supports-slash-commands="false"
+        aria-label="Description"
+        v-model="formState.description"
+        ref="textarea"
+        slot="textarea"
+        placeholder="Write a comment or drag your files here..."
+        @keydown.meta.enter="updateIssuable">
+      </textarea>
+    </markdown-field>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue
new file mode 100644
index 00000000000..1c40b286513
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue
@@ -0,0 +1,111 @@
+<script>
+  export default {
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+      issuableTemplates: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      projectPath: {
+        type: String,
+        required: true,
+      },
+      projectNamespace: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      issuableTemplatesJson() {
+        return JSON.stringify(this.issuableTemplates);
+      },
+    },
+    mounted() {
+      // Create the editor for the template
+      const editor = document.querySelector('.detail-page-description .note-textarea') || {};
+      editor.setValue = (val) => {
+        this.formState.description = val;
+      };
+      editor.getValue = () => this.formState.description;
+
+      this.issuableTemplate = new gl.IssuableTemplateSelectors({
+        $dropdowns: $(this.$refs.toggle),
+        editor,
+      });
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="dropdown js-issuable-selector-wrap"
+    data-issuable-type="issue">
+    <button
+      class="dropdown-menu-toggle js-issuable-selector"
+      type="button"
+      ref="toggle"
+      data-field-name="issuable_template"
+      data-selected="null"
+      data-toggle="dropdown"
+      :data-namespace-path="projectNamespace"
+      :data-project-path="projectPath"
+      :data-data="issuableTemplatesJson">
+      <span class="dropdown-toggle-text">
+        Choose a template
+      </span>
+      <i
+        aria-hidden="true"
+        class="fa fa-chevron-down">
+      </i>
+    </button>
+    <div class="dropdown-menu dropdown-select">
+      <div class="dropdown-title">
+        Choose a template
+        <button
+          class="dropdown-title-button dropdown-menu-close"
+          aria-label="Close"
+          type="button">
+          <i
+            aria-hidden="true"
+            class="fa fa-times dropdown-menu-close-icon">
+          </i>
+        </button>
+      </div>
+      <div class="dropdown-input">
+        <input
+          type="search"
+          class="dropdown-input-field"
+          placeholder="Filter"
+          autocomplete="off" />
+        <i
+          aria-hidden="true"
+          class="fa fa-search dropdown-input-search">
+        </i>
+        <i
+          role="button"
+          aria-label="Clear templates search input"
+          class="fa fa-times dropdown-input-clear js-dropdown-input-clear">
+        </i>
+      </div>
+      <div class="dropdown-content"></div>
+      <div class="dropdown-footer">
+        <ul class="dropdown-footer-list">
+          <li>
+            <a class="no-template">
+              No template
+            </a>
+          </li>
+          <li>
+            <a class="reset-template">
+              Reset template
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/fields/project_move.vue b/app/assets/javascripts/issue_show/components/fields/project_move.vue
new file mode 100644
index 00000000000..f811fb0de24
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/fields/project_move.vue
@@ -0,0 +1,83 @@
+<script>
+  import tooltipMixin from '../../../vue_shared/mixins/tooltip';
+
+  export default {
+    mixins: [
+      tooltipMixin,
+    ],
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+      projectsAutocompleteUrl: {
+        type: String,
+        required: true,
+      },
+    },
+    mounted() {
+      const $moveDropdown = $(this.$refs['move-dropdown']);
+
+      $moveDropdown.select2({
+        ajax: {
+          url: this.projectsAutocompleteUrl,
+          quietMillis: 125,
+          data(term, page, context) {
+            return {
+              search: term,
+              offset_id: context,
+            };
+          },
+          results(data) {
+            const more = data.length >= 50;
+            const context = data[data.length - 1] ? data[data.length - 1].id : null;
+
+            return {
+              results: data,
+              more,
+              context,
+            };
+          },
+        },
+        formatResult(project) {
+          return project.name_with_namespace;
+        },
+        formatSelection(project) {
+          return project.name_with_namespace;
+        },
+      })
+      .on('change', (e) => {
+        this.formState.move_to_project_id = parseInt(e.target.value, 10);
+      });
+    },
+    beforeDestroy() {
+      $(this.$refs['move-dropdown']).select2('destroy');
+    },
+  };
+</script>
+
+<template>
+  <fieldset>
+    <label
+      for="issuable-move"
+      class="sr-only">
+      Move
+    </label>
+    <div class="issuable-form-select-holder append-right-5">
+      <input
+        ref="move-dropdown"
+        type="hidden"
+        id="issuable-move"
+        data-placeholder="Move to a different project" />
+    </div>
+    <span
+      data-placement="auto top"
+      title="Moving an issue will copy the discussion to a different project and close it here. All participants will be notified of the new location."
+      ref="tooltip">
+      <i
+        class="fa fa-question-circle"
+        aria-hidden="true">
+      </i>
+    </span>
+  </fieldset>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
new file mode 100644
index 00000000000..6556bf117e2
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -0,0 +1,31 @@
+<script>
+  import updateMixin from '../../mixins/update';
+
+  export default {
+    mixins: [updateMixin],
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <fieldset>
+    <label
+      class="sr-only"
+      for="issue-title">
+      Title
+    </label>
+    <input
+      id="issue-title"
+      class="form-control"
+      type="text"
+      placeholder="Issue title"
+      aria-label="Issue title"
+      v-model="formState.title"
+      @keydown.meta.enter="updateIssuable" />
+  </fieldset>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
new file mode 100644
index 00000000000..76ec3dc9a5d
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -0,0 +1,104 @@
+<script>
+  import lockedWarning from './locked_warning.vue';
+  import titleField from './fields/title.vue';
+  import descriptionField from './fields/description.vue';
+  import editActions from './edit_actions.vue';
+  import descriptionTemplate from './fields/description_template.vue';
+  import projectMove from './fields/project_move.vue';
+  import confidentialCheckbox from './fields/confidential_checkbox.vue';
+
+  export default {
+    props: {
+      canMove: {
+        type: Boolean,
+        required: true,
+      },
+      canDestroy: {
+        type: Boolean,
+        required: true,
+      },
+      formState: {
+        type: Object,
+        required: true,
+      },
+      issuableTemplates: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      markdownPreviewUrl: {
+        type: String,
+        required: true,
+      },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+      projectPath: {
+        type: String,
+        required: true,
+      },
+      projectNamespace: {
+        type: String,
+        required: true,
+      },
+      projectsAutocompleteUrl: {
+        type: String,
+        required: true,
+      },
+    },
+    components: {
+      lockedWarning,
+      titleField,
+      descriptionField,
+      descriptionTemplate,
+      editActions,
+      projectMove,
+      confidentialCheckbox,
+    },
+    computed: {
+      hasIssuableTemplates() {
+        return this.issuableTemplates.length;
+      },
+    },
+  };
+</script>
+
+<template>
+  <form>
+    <locked-warning v-if="formState.lockedWarningVisible" />
+    <div class="row">
+      <div
+        class="col-sm-4 col-lg-3"
+        v-if="hasIssuableTemplates">
+        <description-template
+          :form-state="formState"
+          :issuable-templates="issuableTemplates"
+          :project-path="projectPath"
+          :project-namespace="projectNamespace" />
+      </div>
+      <div
+        :class="{
+          'col-sm-8 col-lg-9': hasIssuableTemplates,
+          'col-xs-12': !hasIssuableTemplates,
+        }">
+        <title-field
+          :form-state="formState"
+          :issuable-templates="issuableTemplates" />
+      </div>
+    </div>
+    <description-field
+      :form-state="formState"
+      :markdown-preview-url="markdownPreviewUrl"
+      :markdown-docs="markdownDocs" />
+    <confidential-checkbox
+      :form-state="formState" />
+    <project-move
+      v-if="canMove"
+      :form-state="formState"
+      :projects-autocomplete-url="projectsAutocompleteUrl" />
+    <edit-actions
+      :form-state="formState"
+      :can-destroy="canDestroy" />
+  </form>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/locked_warning.vue b/app/assets/javascripts/issue_show/components/locked_warning.vue
new file mode 100644
index 00000000000..1c2789f154a
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/locked_warning.vue
@@ -0,0 +1,20 @@
+<script>
+  export default {
+    computed: {
+      currentPath() {
+        return location.pathname;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="alert alert-danger">
+    Someone edited the issue at the same time you did. Please check out
+    <a
+      :href="currentPath"
+      target="_blank"
+      rel="nofollow">the issue</a>
+    and make sure your changes will not unintentionally remove theirs.
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
new file mode 100644
index 00000000000..a9dabd4cff1
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -0,0 +1,53 @@
+<script>
+  import animateMixin from '../mixins/animate';
+
+  export default {
+    mixins: [animateMixin],
+    data() {
+      return {
+        preAnimation: false,
+        pulseAnimation: false,
+        titleEl: document.querySelector('title'),
+      };
+    },
+    props: {
+      issuableRef: {
+        type: String,
+        required: true,
+      },
+      titleHtml: {
+        type: String,
+        required: true,
+      },
+      titleText: {
+        type: String,
+        required: true,
+      },
+    },
+    watch: {
+      titleHtml() {
+        this.setPageTitle();
+        this.animateChange();
+      },
+    },
+    methods: {
+      setPageTitle() {
+        const currentPageTitleScope = this.titleEl.innerText.split('·');
+        currentPageTitleScope[0] = `${this.titleText} (${this.issuableRef}) `;
+        this.titleEl.textContent = currentPageTitleScope.join('·');
+      },
+    },
+  };
+</script>
+
+<template>
+  <h2
+    class="title"
+    :class="{
+      'issue-realtime-pre-pulse': preAnimation,
+      'issue-realtime-trigger-pulse': pulseAnimation
+    }"
+    v-html="titleHtml"
+  >
+  </h2>
+</template>
diff --git a/app/assets/javascripts/issue_show/event_hub.js b/app/assets/javascripts/issue_show/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/issue_show/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index 3401fc8d83b..14b2a1e18e9 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -1,25 +1,52 @@
 import Vue from 'vue';
-import IssueTitle from './issue_title_description.vue';
+import eventHub from './event_hub';
+import issuableApp from './components/app.vue';
 import '../vue_shared/vue_resource_interceptor';
 
-(() => {
-  const issueTitleData = document.querySelector('.issue-title-data').dataset;
-  const initialTitle = document.querySelector('.js-issue-title').innerHTML;
-  const initialDescription = document.querySelector('.js-issue-description');
-  const { canUpdateTasksClass, endpoint, isEdited } = issueTitleData;
+document.addEventListener('DOMContentLoaded', () => {
+  const initialDataEl = document.getElementById('js-issuable-app-initial-data');
+  const initialData = JSON.parse(initialDataEl.innerHTML.replace(/&quot;/g, '"'));
 
-  const vm = new Vue({
-    el: '.issue-title-entrypoint',
-    render: createElement => createElement(IssueTitle, {
-      props: {
-        canUpdateTasksClass,
-        endpoint,
-        isEdited,
-        initialTitle,
-        initialDescription: initialDescription ? initialDescription.innerHTML : '',
-      },
-    }),
+  $('.issuable-edit').on('click', (e) => {
+    e.preventDefault();
+
+    eventHub.$emit('open.form');
   });
 
-  return vm;
-})();
+  return new Vue({
+    el: document.getElementById('js-issuable-app'),
+    components: {
+      issuableApp,
+    },
+    data() {
+      return {
+        ...initialData,
+      };
+    },
+    render(createElement) {
+      return createElement('issuable-app', {
+        props: {
+          canUpdate: this.canUpdate,
+          canDestroy: this.canDestroy,
+          canMove: this.canMove,
+          endpoint: this.endpoint,
+          issuableRef: this.issuableRef,
+          initialTitleHtml: this.initialTitleHtml,
+          initialTitleText: this.initialTitleText,
+          initialDescriptionHtml: this.initialDescriptionHtml,
+          initialDescriptionText: this.initialDescriptionText,
+          issuableTemplates: this.issuableTemplates,
+          isConfidential: this.isConfidential,
+          markdownPreviewUrl: this.markdownPreviewUrl,
+          markdownDocs: this.markdownDocs,
+          projectPath: this.projectPath,
+          projectNamespace: this.projectNamespace,
+          projectsAutocompleteUrl: this.projectsAutocompleteUrl,
+          updatedAt: this.updatedAt,
+          updatedByName: this.updatedByName,
+          updatedByPath: this.updatedByPath,
+        },
+      });
+    },
+  });
+});
diff --git a/app/assets/javascripts/issue_show/mixins/animate.js b/app/assets/javascripts/issue_show/mixins/animate.js
new file mode 100644
index 00000000000..4816393da1f
--- /dev/null
+++ b/app/assets/javascripts/issue_show/mixins/animate.js
@@ -0,0 +1,13 @@
+export default {
+  methods: {
+    animateChange() {
+      this.preAnimation = true;
+      this.pulseAnimation = false;
+
+      setTimeout(() => {
+        this.preAnimation = false;
+        this.pulseAnimation = true;
+      });
+    },
+  },
+};
diff --git a/app/assets/javascripts/issue_show/mixins/update.js b/app/assets/javascripts/issue_show/mixins/update.js
new file mode 100644
index 00000000000..72be65b426f
--- /dev/null
+++ b/app/assets/javascripts/issue_show/mixins/update.js
@@ -0,0 +1,10 @@
+import eventHub from '../event_hub';
+
+export default {
+  methods: {
+    updateIssuable() {
+      this.formState.updateLoading = true;
+      eventHub.$emit('update.issuable');
+    },
+  },
+};
diff --git a/app/assets/javascripts/issue_show/services/index.js b/app/assets/javascripts/issue_show/services/index.js
index c4ab0b1e07a..6f0fd0b1768 100644
--- a/app/assets/javascripts/issue_show/services/index.js
+++ b/app/assets/javascripts/issue_show/services/index.js
@@ -1,10 +1,29 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
 export default class Service {
-  constructor(resource, endpoint) {
-    this.resource = resource;
+  constructor(endpoint) {
     this.endpoint = endpoint;
+
+    this.resource = Vue.resource(`${this.endpoint}.json`, {}, {
+      realtimeChanges: {
+        method: 'GET',
+        url: `${this.endpoint}/realtime_changes`,
+      },
+    });
+  }
+
+  getData() {
+    return this.resource.realtimeChanges();
+  }
+
+  deleteIssuable() {
+    return this.resource.delete();
   }
 
-  getTitle() {
-    return this.resource.get(this.endpoint);
+  updateIssuable(data) {
+    return this.resource.update(data);
   }
 }
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
new file mode 100644
index 00000000000..27c2d349f52
--- /dev/null
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -0,0 +1,52 @@
+export default class Store {
+  constructor({
+    titleHtml,
+    titleText,
+    descriptionHtml,
+    descriptionText,
+    updatedAt,
+    updatedByName,
+    updatedByPath,
+  }) {
+    this.state = {
+      titleHtml,
+      titleText,
+      descriptionHtml,
+      descriptionText,
+      taskStatus: '',
+      updatedAt,
+      updatedByName,
+      updatedByPath,
+    };
+    this.formState = {
+      title: '',
+      confidential: false,
+      description: '',
+      lockedWarningVisible: false,
+      move_to_project_id: 0,
+      updateLoading: false,
+    };
+  }
+
+  updateState(data) {
+    this.state.titleHtml = data.title;
+    this.state.titleText = data.title_text;
+    this.state.descriptionHtml = data.description;
+    this.state.descriptionText = data.description_text;
+    this.state.taskStatus = data.task_status;
+    this.state.updatedAt = data.updated_at;
+    this.state.updatedByName = data.updated_by_name;
+    this.state.updatedByPath = data.updated_by_path;
+  }
+
+  stateShouldUpdate(data) {
+    return {
+      title: this.state.titleText !== data.title_text,
+      description: this.state.descriptionText !== data.description_text,
+    };
+  }
+
+  setFormState(state) {
+    this.formState = Object.assign(this.formState, state);
+  }
+}
diff --git a/app/assets/javascripts/issues_bulk_assignment.js b/app/assets/javascripts/issues_bulk_assignment.js
deleted file mode 100644
index fee3429e2b8..00000000000
--- a/app/assets/javascripts/issues_bulk_assignment.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/* eslint-disable comma-dangle, quotes, consistent-return, func-names, array-callback-return, space-before-function-paren, prefer-arrow-callback, max-len, no-unused-expressions, no-sequences, no-underscore-dangle, no-unused-vars, no-param-reassign */
-/* global Issuable */
-/* global Flash */
-
-((global) => {
-  class IssuableBulkActions {
-    constructor({ container, form, issues, prefixId } = {}) {
-      this.prefixId = prefixId || 'issue_';
-      this.form = form || this.getElement('.bulk-update');
-      this.$labelDropdown = this.form.find('.js-label-select');
-      this.issues = issues || this.getElement('.issues-list .issue');
-      this.form.data('bulkActions', this);
-      this.willUpdateLabels = false;
-      this.bindEvents();
-      // Fixes bulk-assign not working when navigating through pages
-      Issuable.initChecks();
-    }
-
-    bindEvents() {
-      return this.form.off('submit').on('submit', this.onFormSubmit.bind(this));
-    }
-
-    onFormSubmit(e) {
-      e.preventDefault();
-      return this.submit();
-    }
-
-    submit() {
-      const _this = this;
-      const xhr = $.ajax({
-        url: this.form.attr('action'),
-        method: this.form.attr('method'),
-        dataType: 'JSON',
-        data: this.getFormDataAsObject()
-      });
-      xhr.done(() => window.location.reload());
-      xhr.fail(() => new Flash("Issue update failed"));
-      return xhr.always(this.onFormSubmitAlways.bind(this));
-    }
-
-    onFormSubmitAlways() {
-      return this.form.find('[type="submit"]').enable();
-    }
-
-    getSelectedIssues() {
-      return this.issues.has('.selected_issue:checked');
-    }
-
-    getLabelsFromSelection() {
-      const labels = [];
-      this.getSelectedIssues().map(function() {
-        const labelsData = $(this).data('labels');
-        if (labelsData) {
-          return labelsData.map(function(labelId) {
-            if (labels.indexOf(labelId) === -1) {
-              return labels.push(labelId);
-            }
-          });
-        }
-      });
-      return labels;
-    }
-
-    /**
-     * Will return only labels that were marked previously and the user has unmarked
-     * @return {Array} Label IDs
-     */
-
-    getUnmarkedIndeterminedLabels() {
-      const result = [];
-      const labelsToKeep = this.$labelDropdown.data('indeterminate');
-
-      this.getLabelsFromSelection().forEach((id) => {
-        if (labelsToKeep.indexOf(id) === -1) {
-          result.push(id);
-        }
-      });
-
-      return result;
-    }
-
-    /**
-     * Simple form serialization, it will return just what we need
-     * Returns key/value pairs from form data
-     */
-
-    getFormDataAsObject() {
-      const formData = {
-        update: {
-          state_event: this.form.find('input[name="update[state_event]"]').val(),
-          // For Merge Requests
-          assignee_id: this.form.find('input[name="update[assignee_id]"]').val(),
-          // For Issues
-          assignee_ids: [this.form.find('input[name="update[assignee_ids][]"]').val()],
-          milestone_id: this.form.find('input[name="update[milestone_id]"]').val(),
-          issuable_ids: this.form.find('input[name="update[issuable_ids]"]').val(),
-          subscription_event: this.form.find('input[name="update[subscription_event]"]').val(),
-          add_label_ids: [],
-          remove_label_ids: []
-        }
-      };
-      if (this.willUpdateLabels) {
-        formData.update.add_label_ids = this.$labelDropdown.data('marked');
-        formData.update.remove_label_ids = this.$labelDropdown.data('unmarked');
-      }
-      return formData;
-    }
-
-    setOriginalDropdownData() {
-      const $labelSelect = $('.bulk-update .js-label-select');
-      $labelSelect.data('common', this.getOriginalCommonIds());
-      $labelSelect.data('marked', this.getOriginalMarkedIds());
-      $labelSelect.data('indeterminate', this.getOriginalIndeterminateIds());
-    }
-
-    // From issuable's initial bulk selection
-    getOriginalCommonIds() {
-      const labelIds = [];
-
-      this.getElement('.selected_issue:checked').each((i, el) => {
-        labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
-      });
-      return _.intersection.apply(this, labelIds);
-    }
-
-    // From issuable's initial bulk selection
-    getOriginalMarkedIds() {
-      const labelIds = [];
-      this.getElement('.selected_issue:checked').each((i, el) => {
-        labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
-      });
-      return _.intersection.apply(this, labelIds);
-    }
-
-    // From issuable's initial bulk selection
-    getOriginalIndeterminateIds() {
-      const uniqueIds = [];
-      const labelIds = [];
-      let issuableLabels = [];
-
-      // Collect unique label IDs for all checked issues
-      this.getElement('.selected_issue:checked').each((i, el) => {
-        issuableLabels = this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels');
-        issuableLabels.forEach((labelId) => {
-          // Store unique IDs
-          if (uniqueIds.indexOf(labelId) === -1) {
-            uniqueIds.push(labelId);
-          }
-        });
-        // Store array of IDs per issuable
-        labelIds.push(issuableLabels);
-      });
-      // Add uniqueIds to add it as argument for _.intersection
-      labelIds.unshift(uniqueIds);
-      // Return IDs that are present but not in all selected issueables
-      return _.difference(uniqueIds, _.intersection.apply(this, labelIds));
-    }
-
-    getElement(selector) {
-      this.scopeEl = this.scopeEl || $('.content');
-      return this.scopeEl.find(selector);
-    }
-  }
-
-  global.IssuableBulkActions = IssuableBulkActions;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/labels.js b/app/assets/javascripts/labels.js
index 17a3fc1b1e4..03dd61b4263 100644
--- a/app/assets/javascripts/labels.js
+++ b/app/assets/javascripts/labels.js
@@ -1,11 +1,9 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, vars-on-top, no-unused-vars, max-len */
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.Labels = (function() {
     function Labels() {
-      this.setSuggestedColor = bind(this.setSuggestedColor, this);
-      this.updateColorPreview = bind(this.updateColorPreview, this);
+      this.setSuggestedColor = this.setSuggestedColor.bind(this);
+      this.updateColorPreview = this.updateColorPreview.bind(this);
       var form;
       form = $('.label-form');
       this.cleanBinding();
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index ac5ce84e31b..8d7d3d73571 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -2,6 +2,8 @@
 /* global Issuable */
 /* global ListLabel */
 
+import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
+
 (function() {
   this.LabelsSelect = (function() {
     function LabelsSelect(els) {
@@ -430,20 +432,15 @@
       if ($('.selected_issue:checked').length) {
         return;
       }
-      return $('.issues_bulk_update .labels-filter .dropdown-toggle-text').text('Label');
+      return $('.issues-bulk-update .labels-filter .dropdown-toggle-text').text('Label');
     };
 
     LabelsSelect.prototype.enableBulkLabelDropdown = function() {
-      var issuableBulkActions;
-      if ($('.selected_issue:checked').length) {
-        issuableBulkActions = $('.bulk-update').data('bulkActions');
-        return issuableBulkActions.willUpdateLabels = true;
-      }
+      IssuableBulkUpdateActions.willUpdateLabels = true;
     };
 
     LabelsSelect.prototype.setDropdownData = function($dropdown, isMarking, value) {
       var i, markedIds, unmarkedIds, indeterminateIds;
-      var issuableBulkActions = $('.bulk-update').data('bulkActions');
 
       markedIds = $dropdown.data('marked') || [];
       unmarkedIds = $dropdown.data('unmarked') || [];
@@ -469,13 +466,13 @@
         }
 
         // If an indeterminate item is being unmarked
-        if (issuableBulkActions.getOriginalIndeterminateIds().indexOf(value) > -1) {
+        if (IssuableBulkUpdateActions.getOriginalIndeterminateIds().indexOf(value) > -1) {
           unmarkedIds.push(value);
         }
 
         // If a marked item is being unmarked
         // (a marked item could also be a label that is present in all selection)
-        if (issuableBulkActions.getOriginalCommonIds().indexOf(value) > -1) {
+        if (IssuableBulkUpdateActions.getOriginalCommonIds().indexOf(value) > -1) {
           unmarkedIds.push(value);
         }
       }
diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index a5f99bcdd8f..71064ccc539 100644
--- a/app/assets/javascripts/layout_nav.js
+++ b/app/assets/javascripts/layout_nav.js
@@ -1,4 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */
+import _ from 'underscore';
 
 (function() {
   var hideEndFade;
@@ -45,4 +46,13 @@
       }
     });
   });
+
+  function applyScrollNavClass() {
+    const scrollOpacityHeight = 40;
+    $('.navbar-border').css('opacity', Math.min($(window).scrollTop() / scrollOpacityHeight, 1));
+  }
+
+  $(() => {
+    $(window).on('scroll', _.throttle(applyScrollNavClass, 100));
+  });
 }).call(window);
diff --git a/app/assets/javascripts/lib/utils/ajax_cache.js b/app/assets/javascripts/lib/utils/ajax_cache.js
index d99eefb5089..7477b5a5214 100644
--- a/app/assets/javascripts/lib/utils/ajax_cache.js
+++ b/app/assets/javascripts/lib/utils/ajax_cache.js
@@ -1,32 +1,44 @@
-const AjaxCache = {
-  internalStorage: { },
-  get(endpoint) {
-    return this.internalStorage[endpoint];
-  },
-  hasData(endpoint) {
-    return Object.prototype.hasOwnProperty.call(this.internalStorage, endpoint);
-  },
-  purge(endpoint) {
-    delete this.internalStorage[endpoint];
-  },
-  retrieve(endpoint) {
-    if (AjaxCache.hasData(endpoint)) {
-      return Promise.resolve(AjaxCache.get(endpoint));
+import Cache from './cache';
+
+class AjaxCache extends Cache {
+  constructor() {
+    super();
+    this.pendingRequests = { };
+  }
+
+  retrieve(endpoint, forceRetrieve) {
+    if (this.hasData(endpoint) && !forceRetrieve) {
+      return Promise.resolve(this.get(endpoint));
+    }
+
+    let pendingRequest = this.pendingRequests[endpoint];
+
+    if (!pendingRequest) {
+      pendingRequest = new Promise((resolve, reject) => {
+        // jQuery 2 is not Promises/A+ compatible (missing catch)
+        $.ajax(endpoint) // eslint-disable-line promise/catch-or-return
+        .then(data => resolve(data),
+          (jqXHR, textStatus, errorThrown) => {
+            const error = new Error(`${endpoint}: ${errorThrown}`);
+            error.textStatus = textStatus;
+            reject(error);
+          },
+        );
+      })
+      .then((data) => {
+        this.internalStorage[endpoint] = data;
+        delete this.pendingRequests[endpoint];
+      })
+      .catch((error) => {
+        delete this.pendingRequests[endpoint];
+        throw error;
+      });
+
+      this.pendingRequests[endpoint] = pendingRequest;
     }
 
-    return new Promise((resolve, reject) => {
-      $.ajax(endpoint) // eslint-disable-line promise/catch-or-return
-      .then(data => resolve(data),
-        (jqXHR, textStatus, errorThrown) => {
-          const error = new Error(`${endpoint}: ${errorThrown}`);
-          error.textStatus = textStatus;
-          reject(error);
-        },
-      );
-    })
-    .then((data) => { this.internalStorage[endpoint] = data; })
-    .then(() => AjaxCache.get(endpoint));
-  },
-};
+    return pendingRequest.then(() => this.get(endpoint));
+  }
+}
 
-export default AjaxCache;
+export default new AjaxCache();
diff --git a/app/assets/javascripts/lib/utils/cache.js b/app/assets/javascripts/lib/utils/cache.js
new file mode 100644
index 00000000000..3141f1eeafc
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/cache.js
@@ -0,0 +1,19 @@
+class Cache {
+  constructor() {
+    this.internalStorage = { };
+  }
+
+  get(key) {
+    return this.internalStorage[key];
+  }
+
+  hasData(key) {
+    return Object.prototype.hasOwnProperty.call(this.internalStorage, key);
+  }
+
+  remove(key) {
+    delete this.internalStorage[key];
+  }
+}
+
+export default Cache;
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 2f682fbd2fb..a537267643e 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -135,7 +135,10 @@
     gl.utils.getUrlParamsArray = function () {
       // We can trust that each param has one & since values containing & will be encoded
       // Remove the first character of search as it is always ?
-      return window.location.search.slice(1).split('&');
+      return window.location.search.slice(1).split('&').map((param) => {
+        const split = param.split('=');
+        return [decodeURI(split[0]), split[1]].join('=');
+      });
     };
 
     gl.utils.isMetaKey = function(e) {
@@ -195,10 +198,12 @@
 
       const textBefore = value.substring(0, selectionStart);
       const textAfter = value.substring(selectionEnd, value.length);
-      const newText = textBefore + text + textAfter;
+
+      const insertedText = text instanceof Function ? text(textBefore, textAfter) : text;
+      const newText = textBefore + insertedText + textAfter;
 
       target.value = newText;
-      target.selectionStart = target.selectionEnd = selectionStart + text.length;
+      target.selectionStart = target.selectionEnd = selectionStart + insertedText.length;
 
       // Trigger autosave
       $(target).trigger('input');
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 82dcbdc26c8..40eadd9396c 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -1,9 +1,15 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, comma-dangle, no-unused-expressions, prefer-template, max-len */
-/* global timeago */
-/* global dateFormat */
 
-window.timeago = require('timeago.js');
-window.dateFormat = require('vendor/date.format');
+import timeago from 'timeago.js';
+import dateFormat from 'vendor/date.format';
+
+import {
+  lang,
+  s__,
+} from '../../locale';
+
+window.timeago = timeago;
+window.dateFormat = dateFormat;
 
 (function() {
   (function(w) {
@@ -47,26 +53,45 @@ window.dateFormat = require('vendor/date.format');
       var locale;
 
       if (!timeagoInstance) {
+        const localeRemaining = function(number, index) {
+          return [
+            [s__('Timeago|less than a minute ago'), s__('Timeago|a while')],
+            [s__('Timeago|less than a minute ago'), s__('Timeago|%s seconds remaining')],
+            [s__('Timeago|about a minute ago'), s__('Timeago|1 minute remaining')],
+            [s__('Timeago|%s minutes ago'), s__('Timeago|%s minutes remaining')],
+            [s__('Timeago|about an hour ago'), s__('Timeago|1 hour remaining')],
+            [s__('Timeago|about %s hours ago'), s__('Timeago|%s hours remaining')],
+            [s__('Timeago|a day ago'), s__('Timeago|1 day remaining')],
+            [s__('Timeago|%s days ago'), s__('Timeago|%s days remaining')],
+            [s__('Timeago|a week ago'), s__('Timeago|1 week remaining')],
+            [s__('Timeago|%s weeks ago'), s__('Timeago|%s weeks remaining')],
+            [s__('Timeago|a month ago'), s__('Timeago|1 month remaining')],
+            [s__('Timeago|%s months ago'), s__('Timeago|%s months remaining')],
+            [s__('Timeago|a year ago'), s__('Timeago|1 year remaining')],
+            [s__('Timeago|%s years ago'), s__('Timeago|%s years remaining')]
+          ][index];
+        };
         locale = function(number, index) {
           return [
-            ['less than a minute ago', 'a while'],
-            ['less than a minute ago', 'in %s seconds'],
-            ['about a minute ago', 'in 1 minute'],
-            ['%s minutes ago', 'in %s minutes'],
-            ['about an hour ago', 'in 1 hour'],
-            ['about %s hours ago', 'in %s hours'],
-            ['a day ago', 'in 1 day'],
-            ['%s days ago', 'in %s days'],
-            ['a week ago', 'in 1 week'],
-            ['%s weeks ago', 'in %s weeks'],
-            ['a month ago', 'in 1 month'],
-            ['%s months ago', 'in %s months'],
-            ['a year ago', 'in 1 year'],
-            ['%s years ago', 'in %s years']
+            [s__('Timeago|less than a minute ago'), s__('Timeago|a while')],
+            [s__('Timeago|less than a minute ago'), s__('Timeago|in %s seconds')],
+            [s__('Timeago|about a minute ago'), s__('Timeago|in 1 minute')],
+            [s__('Timeago|%s minutes ago'), s__('Timeago|in %s minutes')],
+            [s__('Timeago|about an hour ago'), s__('Timeago|in 1 hour')],
+            [s__('Timeago|about %s hours ago'), s__('Timeago|in %s hours')],
+            [s__('Timeago|a day ago'), s__('Timeago|in 1 day')],
+            [s__('Timeago|%s days ago'), s__('Timeago|in %s days')],
+            [s__('Timeago|a week ago'), s__('Timeago|in 1 week')],
+            [s__('Timeago|%s weeks ago'), s__('Timeago|in %s weeks')],
+            [s__('Timeago|a month ago'), s__('Timeago|in 1 month')],
+            [s__('Timeago|%s months ago'), s__('Timeago|in %s months')],
+            [s__('Timeago|a year ago'), s__('Timeago|in 1 year')],
+            [s__('Timeago|%s years ago'), s__('Timeago|in %s years')]
           ][index];
         };
 
-        timeago.register('gl_en', locale);
+        timeago.register(lang, locale);
+        timeago.register(`${lang}-remaining`, localeRemaining);
         timeagoInstance = timeago();
       }
 
@@ -78,13 +103,11 @@ window.dateFormat = require('vendor/date.format');
       if (!time) {
         return '';
       }
-      suffix || (suffix = 'remaining');
-      expiredLabel || (expiredLabel = 'Past due');
-      timefor = gl.utils.getTimeago().format(time).replace('in', '');
-      if (timefor.indexOf('ago') > -1) {
+      if (new Date(time) < new Date()) {
+        expiredLabel || (expiredLabel = s__('Timeago|Past due'));
         timefor = expiredLabel;
       } else {
-        timefor = timefor.trim() + ' ' + suffix;
+        timefor = gl.utils.getTimeago().format(time, `${lang}-remaining`).trim();
       }
       return timefor;
     };
@@ -101,8 +124,7 @@ window.dateFormat = require('vendor/date.format');
     };
 
     w.gl.utils.updateTimeagoText = function(el) {
-      const timeago = gl.utils.getTimeago();
-      const formattedDate = timeago.format(el.getAttribute('datetime'), 'gl_en');
+      const formattedDate = gl.utils.getTimeago().format(el.getAttribute('datetime'), lang);
 
       if (el.textContent !== formattedDate) {
         el.textContent = formattedDate;
diff --git a/app/assets/javascripts/lib/utils/http_status.js b/app/assets/javascripts/lib/utils/http_status.js
index bc109a69c20..415e50f32ae 100644
--- a/app/assets/javascripts/lib/utils/http_status.js
+++ b/app/assets/javascripts/lib/utils/http_status.js
@@ -2,9 +2,7 @@
  * exports HTTP status codes
  */
 
-const statusCodes = {
+export default {
   NO_CONTENT: 204,
   OK: 200,
 };
-
-module.exports = statusCodes;
diff --git a/app/assets/javascripts/lib/utils/notify.js b/app/assets/javascripts/lib/utils/notify.js
index 66f39122a66..973d6119158 100644
--- a/app/assets/javascripts/lib/utils/notify.js
+++ b/app/assets/javascripts/lib/utils/notify.js
@@ -1,47 +1,48 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, consistent-return, prefer-arrow-callback, no-return-assign, object-shorthand, comma-dangle, no-param-reassign, max-len */
 
-(function() {
-  (function(w) {
-    var notificationGranted, notifyMe, notifyPermissions;
-    notificationGranted = function(message, opts, onclick) {
-      var notification;
-      notification = new Notification(message, opts);
-      setTimeout(function() {
-        return notification.close();
-      // Hide the notification after X amount of seconds
-      }, 8000);
-      if (onclick) {
-        return notification.onclick = onclick;
-      }
-    };
-    notifyPermissions = function() {
-      if ('Notification' in window) {
-        return Notification.requestPermission();
-      }
-    };
-    notifyMe = function(message, body, icon, onclick) {
-      var opts;
-      opts = {
-        body: body,
-        icon: icon
-      };
-      // Let's check if the browser supports notifications
-      if (!('Notification' in window)) {
+function notificationGranted(message, opts, onclick) {
+  var notification;
+  notification = new Notification(message, opts);
+  setTimeout(function() {
+    // Hide the notification after X amount of seconds
+    return notification.close();
+  }, 8000);
+
+  return notification.onclick = onclick || notification.close;
+}
 
-      // do nothing
-      } else if (Notification.permission === 'granted') {
-        // If it's okay let's create a notification
+function notifyPermissions() {
+  if ('Notification' in window) {
+    return Notification.requestPermission();
+  }
+}
+
+function notifyMe(message, body, icon, onclick) {
+  var opts;
+  opts = {
+    body: body,
+    icon: icon
+  };
+  // Let's check if the browser supports notifications
+  if (!('Notification' in window)) {
+    // do nothing
+  } else if (Notification.permission === 'granted') {
+    // If it's okay let's create a notification
+    return notificationGranted(message, opts, onclick);
+  } else if (Notification.permission !== 'denied') {
+    return Notification.requestPermission(function(permission) {
+      // If the user accepts, let's create a notification
+      if (permission === 'granted') {
         return notificationGranted(message, opts, onclick);
-      } else if (Notification.permission !== 'denied') {
-        return Notification.requestPermission(function(permission) {
-          // If the user accepts, let's create a notification
-          if (permission === 'granted') {
-            return notificationGranted(message, opts, onclick);
-          }
-        });
       }
-    };
-    w.notify = notifyMe;
-    return w.notifyPermissions = notifyPermissions;
-  })(window);
-}).call(window);
+    });
+  }
+}
+
+const notify = {
+  notificationGranted,
+  notifyPermissions,
+  notifyMe,
+};
+
+export default notify;
diff --git a/app/assets/javascripts/lib/utils/number_utils.js b/app/assets/javascripts/lib/utils/number_utils.js
index f1b07408671..57394097944 100644
--- a/app/assets/javascripts/lib/utils/number_utils.js
+++ b/app/assets/javascripts/lib/utils/number_utils.js
@@ -42,3 +42,13 @@ export function formatRelevantDigits(number) {
 export function bytesToKiB(number) {
   return number / BYTES_IN_KIB;
 }
+
+/**
+ * Utility function that calculates MiB of the given bytes.
+ *
+ * @param  {Number} number bytes
+ * @return {Number}        MiB
+ */
+export function bytesToMiB(number) {
+  return number / (BYTES_IN_KIB * BYTES_IN_KIB);
+}
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index fecd531328d..601d01e1be1 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -1,5 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, quotes, one-var, one-var-declaration-per-line, operator-assignment, no-else-return, prefer-template, prefer-arrow-callback, no-empty, max-len, consistent-return, no-unused-vars, no-return-assign, max-len, vars-on-top */
-require('vendor/latinise');
+
+import 'vendor/latinise';
 
 var base;
 var w = window;
@@ -169,7 +170,7 @@ gl.text.init = function(form) {
   });
 };
 gl.text.removeListeners = function(form) {
-  return $('.js-md', form).off();
+  return $('.js-md', form).off('click');
 };
 gl.text.humanize = function(string) {
   return string.charAt(0).toUpperCase() + string.replace(/_/g, ' ').slice(1);
diff --git a/app/assets/javascripts/lib/utils/type_utility.js b/app/assets/javascripts/lib/utils/type_utility.js
index db62e0be324..be86f336bcd 100644
--- a/app/assets/javascripts/lib/utils/type_utility.js
+++ b/app/assets/javascripts/lib/utils/type_utility.js
@@ -1,15 +1,2 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, no-return-assign, max-len */
-(function() {
-  (function(w) {
-    var base;
-    if (w.gl == null) {
-      w.gl = {};
-    }
-    if ((base = w.gl).utils == null) {
-      base.utils = {};
-    }
-    return w.gl.utils.isObject = function(obj) {
-      return (obj != null) && (obj.constructor === Object);
-    };
-  })(window);
-}).call(window);
+// eslint-disable-next-line import/prefer-default-export
+export const isObject = obj => obj && obj.constructor === Object;
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index b9d2fc25c39..3328ff9cc23 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -66,7 +66,8 @@ w.gl.utils.removeParamQueryString = function(url, param) {
   })()).join('&');
 };
 w.gl.utils.removeParams = (params) => {
-  const url = new URL(window.location.href);
+  const url = document.createElement('a');
+  url.href = window.location.href;
   params.forEach((param) => {
     url.search = w.gl.utils.removeParamQueryString(url.search, param);
   });
diff --git a/app/assets/javascripts/lib/utils/users_cache.js b/app/assets/javascripts/lib/utils/users_cache.js
new file mode 100644
index 00000000000..88f8a622c00
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/users_cache.js
@@ -0,0 +1,28 @@
+import Api from '../../api';
+import Cache from './cache';
+
+class UsersCache extends Cache {
+  retrieve(username) {
+    if (this.hasData(username)) {
+      return Promise.resolve(this.get(username));
+    }
+
+    return Api.users('', { username })
+      .then((users) => {
+        if (!users.length) {
+          throw new Error(`User "${username}" could not be found!`);
+        }
+
+        if (users.length > 1) {
+          throw new Error(`Expected username "${username}" to be unique!`);
+        }
+
+        const user = users[0];
+        this.internalStorage[username] = user;
+        return user;
+      });
+      // missing catch is intentional, error handling depends on use case
+  }
+}
+
+export default new UsersCache();
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index 3ac6dedf131..7400c22543f 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -4,8 +4,6 @@
 //
 // Handles single- and multi-line selection and highlight for blob views.
 //
-require('vendor/jquery.scrollTo');
-
 //
 // ### Example Markup
 //
@@ -31,8 +29,6 @@ require('vendor/jquery.scrollTo');
 //   </div>
 //
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.LineHighlighter = (function() {
     // CSS class applied to highlighted lines
     LineHighlighter.prototype.highlightClass = 'hll';
@@ -47,9 +43,9 @@ require('vendor/jquery.scrollTo');
         // hash - String URL hash for dependency injection in tests
         hash = location.hash;
       }
-      this.setHash = bind(this.setHash, this);
-      this.highlightLine = bind(this.highlightLine, this);
-      this.clickHandler = bind(this.clickHandler, this);
+      this.setHash = this.setHash.bind(this);
+      this.highlightLine = this.highlightLine.bind(this);
+      this.clickHandler = this.clickHandler.bind(this);
       this.highlightHash = this.highlightHash.bind(this);
       this._hash = hash;
       this.bindEvents();
diff --git a/app/assets/javascripts/locale/de/app.js b/app/assets/javascripts/locale/de/app.js
index 9411f078ecf..960b8e5ecb3 100644
--- a/app/assets/javascripts/locale/de/app.js
+++ b/app/assets/javascripts/locale/de/app.js
@@ -1 +1 @@
-var locales = locales || {}; locales['de'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-05-09 13:44+0200","Language-Team":"German","Language":"de","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","Last-Translator":"","X-Generator":"Poedit 2.0.1","lang":"de","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"ByAuthor|by":["Von"],"Commit":["Commit","Commits"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["Cycle Analytics liefern einen Überblick darüber, wie viel Zeit in Ihrem Projekt von einer Idee bis zum Produktivdeployment vergeht."],"CycleAnalyticsStage|Code":["Code"],"CycleAnalyticsStage|Issue":["Issue"],"CycleAnalyticsStage|Plan":["Planung"],"CycleAnalyticsStage|Production":["Produktiv"],"CycleAnalyticsStage|Review":["Review"],"CycleAnalyticsStage|Staging":["Staging"],"CycleAnalyticsStage|Test":["Test"],"Deploy":["Deployment","Deployments"],"FirstPushedBy|First":["Erster"],"FirstPushedBy|pushed by":["gepusht von"],"From issue creation until deploy to production":["Vom Anlegen des Issues bis zum Produktivdeployment"],"From merge request merge until deploy to production":["Vom Merge Request bis zum Produktivdeployment"],"Introducing Cycle Analytics":["Was sind Cycle Analytics?"],"Last %d day":["Letzter %d Tag","Letzten %d Tage"],"Limited to showing %d event at most":["Eingeschränkt auf maximal %d Ereignis","Eingeschränkt auf maximal %d Ereignisse"],"Median":["Median"],"New Issue":["Neues Issue","Neue Issues"],"Not available":["Nicht verfügbar"],"Not enough data":["Nicht genügend Daten"],"OpenedNDaysAgo|Opened":["Erstellt"],"Pipeline Health":["Pipeline Kennzahlen"],"ProjectLifecycle|Stage":["Phase"],"Read more":["Mehr"],"Related Commits":["Zugehörige Commits"],"Related Deployed Jobs":["Zugehörige Deploymentjobs"],"Related Issues":["Zugehörige Issues"],"Related Jobs":["Zugehörige Jobs"],"Related Merge Requests":["Zugehörige Merge Requests"],"Related Merged Requests":["Zugehörige abgeschlossene Merge Requests"],"Showing %d event":["Zeige %d Ereignis","Zeige %d Ereignisse"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["Die Code-Phase stellt die Zeit vom ersten Commit bis zum Erstellen eines Merge Requests dar. Sobald Sie Ihren ersten Merge Request anlegen, werden dessen Daten automatisch ergänzt."],"The collection of events added to the data gathered for that stage.":["Ereignisse, die für diese Phase ausgewertet wurden."],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["Die Issue-Phase stellt die Zeit vom Anlegen eines Issues bis zum Zuweisen eines Meilensteins oder Hinzufügen zum Issue Board dar. Erstellen Sie einen Issue, damit dessen Daten hier erscheinen."],"The phase of the development lifecycle.":["Die Phase im Entwicklungsprozess."],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["Die Planungsphase stellt die Zeit von der vorherigen Phase bis zum Pushen des ersten Commits dar. Sobald Sie den ersten Commit pushen, werden dessen Daten hier erscheinen."],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["Die Produktiv-Phase stellt die Gesamtzeit vom Anlegen eines Issues bis zum Deployment auf dem Produktivsystem dar. Sobald Sie den vollständigen Entwicklungszyklus von einer Idee bis zum Produktivdeployment durchlaufen haben, erscheinen die zugehörigen Daten hier."],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["Die Review-Phase stellt die Zeit vom Anlegen eines Merge Requests bis zum Mergen dar. Sobald Sie Ihren ersten Merge Request abschließen, werden dessen Daten hier automatisch angezeigt."],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["Die Staging-Phase stellt die Zeit zwischen Mergen eines Merge Requests und dem Produktivdeployment dar. Sobald Sie das erste Produktivdeployment durchgeführt haben, werden dessen Daten hier automatisch angezeigt."],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["Die Test-Phase stellt die Zeit dar, die GitLab CI benötigt um die Pipelines von Merge Requests abzuarbeiten. Sobald die erste Pipeline abgeschlossen ist, werden deren Daten hier automatisch angezeigt."],"The time taken by each data entry gathered by that stage.":["Zeit die für das jeweilige Ereignis in der Phase ermittelt wurde."],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["Der mittlere aller erfassten Werte. Zum Beispiel ist für 3, 5, 9 der Median 5. Bei 3, 5, 7, 8 ist der Median (5+7)/2 = 6."],"Time before an issue gets scheduled":["Zeit bis ein Issue geplant wird"],"Time before an issue starts implementation":["Zeit bis die Implementierung für ein Issue beginnt"],"Time between merge request creation and merge/close":["Zeit zwischen Anlegen und Mergen/Schließen eines Merge Requests"],"Time until first merge request":["Zeit bis zum ersten Merge Request"],"Time|hr":["h","h"],"Time|min":["min","min"],"Time|s":["s"],"Total Time":["Gesamtzeit"],"Total test time for all commits/merges":["Gesamte Testlaufzeit für alle Commits/Merges"],"Want to see the data? Please ask an administrator for access.":["Um diese Daten einsehen zu können, wenden Sie sich bitte an Ihren Administrator."],"We don't have enough data to show this stage.":["Es liegen nicht genügend Daten vor, um diese Phase anzuzeigen."],"You need permission.":["Sie benötigen Zugriffsrechte."],"day":["Tag","Tage"]}}};
\ No newline at end of file
+var locales = locales || {}; locales['de'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-06-07 12:17+0200","Language-Team":"German","Language":"de","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","Last-Translator":"Bob Van Landuyt <bob@gitlab.com>","X-Generator":"Poedit 2.0.2","lang":"de","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"About auto deploy":[""],"Activity":[""],"Add Changelog":[""],"Add Contribution guide":[""],"Add License":[""],"Add an SSH key to your profile to pull or push via SSH.":[""],"Add new directory":[""],"Archived project! Repository is read-only":[""],"Branch":["",""],"Branch <strong>%{branch_name}</strong> was created. To set up auto deploy, choose a GitLab CI Yaml template and commit your changes. %{link_to_autodeploy_doc}":[""],"Branches":[""],"ByAuthor|by":["Von"],"CI configuration":[""],"Changelog":[""],"Charts":[""],"CiStatusLabel|canceled":[""],"CiStatusLabel|created":[""],"CiStatusLabel|failed":[""],"CiStatusLabel|manual action":[""],"CiStatusLabel|passed":[""],"CiStatusLabel|passed with warnings":[""],"CiStatusLabel|pending":[""],"CiStatusLabel|skipped":[""],"CiStatusLabel|waiting for manual action":[""],"CiStatusText|blocked":[""],"CiStatusText|canceled":[""],"CiStatusText|created":[""],"CiStatusText|failed":[""],"CiStatusText|manual":[""],"CiStatusText|passed":[""],"CiStatusText|pending":[""],"CiStatusText|skipped":[""],"CiStatus|running":[""],"Commit":["Commit","Commits"],"CommitMessage|Add %{file_name}":[""],"Commits":["Commits"],"Commits|History":["Commits"],"Compare":[""],"Contribution guide":[""],"Contributors":[""],"Copy URL to clipboard":[""],"Copy commit SHA to clipboard":[""],"Create New Directory":[""],"Create directory":[""],"Create empty bare repository":[""],"Create merge request":[""],"CreateNewFork|Fork":[""],"Custom notification events":[""],"Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notification_link}.":[""],"Cycle Analytics":[""],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["Cycle Analytics liefern einen Überblick darüber, wie viel Zeit in Ihrem Projekt von einer Idee bis zum Produktivdeployment vergeht."],"CycleAnalyticsStage|Code":["Code"],"CycleAnalyticsStage|Issue":["Issue"],"CycleAnalyticsStage|Plan":["Planung"],"CycleAnalyticsStage|Production":["Produktiv"],"CycleAnalyticsStage|Review":["Review"],"CycleAnalyticsStage|Staging":["Staging"],"CycleAnalyticsStage|Test":["Test"],"Deploy":["Deployment","Deployments"],"Directory name":[""],"Don't show again":[""],"Download tar":[""],"Download tar.bz2":[""],"Download tar.gz":[""],"Download zip":[""],"DownloadArtifacts|Download":[""],"DownloadSource|Download":[""],"Files":[""],"Find by path":[""],"Find file":[""],"FirstPushedBy|First":["Erster"],"FirstPushedBy|pushed by":["gepusht von"],"ForkedFromProjectPath|Forked from":[""],"Forks":[""],"From issue creation until deploy to production":["Vom Anlegen des Issues bis zum Produktivdeployment"],"From merge request merge until deploy to production":["Vom Merge Request bis zum Produktivdeployment"],"Go to your fork":[""],"GoToYourFork|Fork":[""],"Home":[""],"Housekeeping successfully started":[""],"Import repository":[""],"Introducing Cycle Analytics":["Was sind Cycle Analytics?"],"LFSStatus|Disabled":[""],"LFSStatus|Enabled":[""],"Last %d day":["Letzter %d Tag","Letzten %d Tage"],"Last Update":[""],"Last commit":[""],"Leave group":[""],"Leave project":[""],"Limited to showing %d event at most":["Eingeschränkt auf maximal %d Ereignis","Eingeschränkt auf maximal %d Ereignisse"],"Median":["Median"],"MissingSSHKeyWarningLink|add an SSH key":[""],"New Issue":["Neues Issue","Neue Issues"],"New branch":[""],"New directory":[""],"New file":[""],"New issue":["Neues Issue"],"New merge request":[""],"New snippet":[""],"New tag":[""],"No repository":[""],"Not available":["Nicht verfügbar"],"Not enough data":["Nicht genügend Daten"],"Notification events":[""],"NotificationEvent|Close issue":[""],"NotificationEvent|Close merge request":[""],"NotificationEvent|Failed pipeline":[""],"NotificationEvent|Merge merge request":[""],"NotificationEvent|New issue":[""],"NotificationEvent|New merge request":[""],"NotificationEvent|New note":[""],"NotificationEvent|Reassign issue":[""],"NotificationEvent|Reassign merge request":[""],"NotificationEvent|Reopen issue":[""],"NotificationEvent|Successful pipeline":[""],"NotificationLevel|Custom":[""],"NotificationLevel|Disabled":[""],"NotificationLevel|Global":[""],"NotificationLevel|On mention":[""],"NotificationLevel|Participate":[""],"NotificationLevel|Watch":[""],"OpenedNDaysAgo|Opened":["Erstellt"],"Pipeline Health":["Pipeline Kennzahlen"],"Project '%{project_name}' queued for deletion.":[""],"Project '%{project_name}' was successfully created.":[""],"Project '%{project_name}' was successfully updated.":[""],"Project '%{project_name}' will be deleted.":[""],"Project access must be granted explicitly to each user.":[""],"Project export could not be deleted.":[""],"Project export has been deleted.":[""],"Project export link has expired. Please generate a new export from your project settings.":[""],"Project export started. A download link will be sent by email.":[""],"Project home":[""],"ProjectFeature|Disabled":[""],"ProjectFeature|Everyone with access":[""],"ProjectFeature|Only team members":[""],"ProjectFileTree|Name":[""],"ProjectLastActivity|Never":[""],"ProjectLifecycle|Stage":["Phase"],"ProjectNetworkGraph|Graph":[""],"Read more":["Mehr"],"Readme":[""],"RefSwitcher|Branches":[""],"RefSwitcher|Tags":[""],"Related Commits":["Zugehörige Commits"],"Related Deployed Jobs":["Zugehörige Deploymentjobs"],"Related Issues":["Zugehörige Issues"],"Related Jobs":["Zugehörige Jobs"],"Related Merge Requests":["Zugehörige Merge Requests"],"Related Merged Requests":["Zugehörige abgeschlossene Merge Requests"],"Remind later":[""],"Remove project":[""],"Request Access":[""],"Search branches and tags":[""],"Select Archive Format":[""],"Set a password on your account to pull or push via %{protocol}":[""],"Set up CI":[""],"Set up Koding":[""],"Set up auto deploy":[""],"SetPasswordToCloneLink|set a password":[""],"Showing %d event":["Zeige %d Ereignis","Zeige %d Ereignisse"],"Source code":[""],"StarProject|Star":[""],"Switch branch/tag":[""],"Tag":["",""],"Tags":[""],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["Die Code-Phase stellt die Zeit vom ersten Commit bis zum Erstellen eines Merge Requests dar. Sobald Sie Ihren ersten Merge Request anlegen, werden dessen Daten automatisch ergänzt."],"The collection of events added to the data gathered for that stage.":["Ereignisse, die für diese Phase ausgewertet wurden."],"The fork relationship has been removed.":[""],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["Die Issue-Phase stellt die Zeit vom Anlegen eines Issues bis zum Zuweisen eines Meilensteins oder Hinzufügen zum Issue Board dar. Erstellen Sie einen Issue, damit dessen Daten hier erscheinen."],"The phase of the development lifecycle.":["Die Phase im Entwicklungsprozess."],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["Die Planungsphase stellt die Zeit von der vorherigen Phase bis zum Pushen des ersten Commits dar. Sobald Sie den ersten Commit pushen, werden dessen Daten hier erscheinen."],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["Die Produktiv-Phase stellt die Gesamtzeit vom Anlegen eines Issues bis zum Deployment auf dem Produktivsystem dar. Sobald Sie den vollständigen Entwicklungszyklus von einer Idee bis zum Produktivdeployment durchlaufen haben, erscheinen die zugehörigen Daten hier."],"The project can be accessed by any logged in user.":[""],"The project can be accessed without any authentication.":[""],"The repository for this project does not exist.":[""],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["Die Review-Phase stellt die Zeit vom Anlegen eines Merge Requests bis zum Mergen dar. Sobald Sie Ihren ersten Merge Request abschließen, werden dessen Daten hier automatisch angezeigt."],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["Die Staging-Phase stellt die Zeit zwischen Mergen eines Merge Requests und dem Produktivdeployment dar. Sobald Sie das erste Produktivdeployment durchgeführt haben, werden dessen Daten hier automatisch angezeigt."],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["Die Test-Phase stellt die Zeit dar, die GitLab CI benötigt um die Pipelines von Merge Requests abzuarbeiten. Sobald die erste Pipeline abgeschlossen ist, werden deren Daten hier automatisch angezeigt."],"The time taken by each data entry gathered by that stage.":["Zeit die für das jeweilige Ereignis in der Phase ermittelt wurde."],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["Der mittlere aller erfassten Werte. Zum Beispiel ist für 3, 5, 9 der Median 5. Bei 3, 5, 7, 8 ist der Median (5+7)/2 = 6."],"This means you can not push code until you create an empty repository or import existing one.":[""],"Time before an issue gets scheduled":["Zeit bis ein Issue geplant wird"],"Time before an issue starts implementation":["Zeit bis die Implementierung für ein Issue beginnt"],"Time between merge request creation and merge/close":["Zeit zwischen Anlegen und Mergen/Schließen eines Merge Requests"],"Time until first merge request":["Zeit bis zum ersten Merge Request"],"Timeago|%s days ago":[""],"Timeago|%s days remaining":[""],"Timeago|%s hours remaining":[""],"Timeago|%s minutes ago":[""],"Timeago|%s minutes remaining":[""],"Timeago|%s months ago":[""],"Timeago|%s months remaining":[""],"Timeago|%s seconds remaining":[""],"Timeago|%s weeks ago":[""],"Timeago|%s weeks remaining":[""],"Timeago|%s years ago":[""],"Timeago|%s years remaining":[""],"Timeago|1 day remaining":[""],"Timeago|1 hour remaining":[""],"Timeago|1 minute remaining":[""],"Timeago|1 month remaining":[""],"Timeago|1 week remaining":[""],"Timeago|1 year remaining":[""],"Timeago|Past due":[""],"Timeago|a day ago":[""],"Timeago|a month ago":[""],"Timeago|a week ago":[""],"Timeago|a while":[""],"Timeago|a year ago":[""],"Timeago|about %s hours ago":[""],"Timeago|about a minute ago":[""],"Timeago|about an hour ago":[""],"Timeago|in %s days":[""],"Timeago|in %s hours":[""],"Timeago|in %s minutes":[""],"Timeago|in %s months":[""],"Timeago|in %s seconds":[""],"Timeago|in %s weeks":[""],"Timeago|in %s years":[""],"Timeago|in 1 day":[""],"Timeago|in 1 hour":[""],"Timeago|in 1 minute":[""],"Timeago|in 1 month":[""],"Timeago|in 1 week":[""],"Timeago|in 1 year":[""],"Timeago|less than a minute ago":[""],"Time|hr":["h","h"],"Time|min":["min","min"],"Time|s":["s"],"Total Time":["Gesamtzeit"],"Total test time for all commits/merges":["Gesamte Testlaufzeit für alle Commits/Merges"],"Unstar":[""],"Upload New File":[""],"Upload file":[""],"Use your global notification setting":[""],"VisibilityLevel|Internal":[""],"VisibilityLevel|Private":[""],"VisibilityLevel|Public":[""],"Want to see the data? Please ask an administrator for access.":["Um diese Daten einsehen zu können, wenden Sie sich bitte an Ihren Administrator."],"We don't have enough data to show this stage.":["Es liegen nicht genügend Daten vor, um diese Phase anzuzeigen."],"Withdraw Access Request":[""],"You are going to remove %{project_name_with_namespace}.\\nRemoved project CANNOT be restored!\\nAre you ABSOLUTELY sure?":[""],"You are going to remove the fork relationship to source project %{forked_from_project}.  Are you ABSOLUTELY sure?":[""],"You are going to transfer %{project_name_with_namespace} to another owner. Are you ABSOLUTELY sure?":[""],"You can only add files when you are on a branch":[""],"You must sign in to star a project":[""],"You need permission.":["Sie benötigen Zugriffsrechte."],"You will not get any notifications via email":[""],"You will only receive notifications for the events you choose":[""],"You will only receive notifications for threads you have participated in":[""],"You will receive notifications for any activity":[""],"You will receive notifications only for comments in which you were @mentioned":[""],"You won't be able to pull or push project code via %{protocol} until you %{set_password_link} on your account":[""],"You won't be able to pull or push project code via SSH until you %{add_ssh_key_link} to your profile":[""],"Your name":[""],"committed":[""],"day":["Tag","Tage"],"notification emails":[""]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/locale/en/app.js b/app/assets/javascripts/locale/en/app.js
index ade9b667b3c..80203308b00 100644
--- a/app/assets/javascripts/locale/en/app.js
+++ b/app/assets/javascripts/locale/en/app.js
@@ -1 +1 @@
-var locales = locales || {}; locales['en'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-04-12 22:36-0500","Last-Translator":"FULL NAME <EMAIL@ADDRESS>","Language-Team":"English","Language":"en","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","lang":"en","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"ByAuthor|by":[""],"Commit":["",""],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":[""],"CycleAnalyticsStage|Code":[""],"CycleAnalyticsStage|Issue":[""],"CycleAnalyticsStage|Plan":[""],"CycleAnalyticsStage|Production":[""],"CycleAnalyticsStage|Review":[""],"CycleAnalyticsStage|Staging":[""],"CycleAnalyticsStage|Test":[""],"Deploy":["",""],"FirstPushedBy|First":[""],"FirstPushedBy|pushed by":[""],"From issue creation until deploy to production":[""],"From merge request merge until deploy to production":[""],"Introducing Cycle Analytics":[""],"Last %d day":["",""],"Limited to showing %d event at most":["",""],"Median":[""],"New Issue":["",""],"Not available":[""],"Not enough data":[""],"OpenedNDaysAgo|Opened":[""],"Pipeline Health":[""],"ProjectLifecycle|Stage":[""],"Read more":[""],"Related Commits":[""],"Related Deployed Jobs":[""],"Related Issues":[""],"Related Jobs":[""],"Related Merge Requests":[""],"Related Merged Requests":[""],"Showing %d event":["",""],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":[""],"The collection of events added to the data gathered for that stage.":[""],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":[""],"The phase of the development lifecycle.":[""],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":[""],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":[""],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":[""],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":[""],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":[""],"The time taken by each data entry gathered by that stage.":[""],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":[""],"Time before an issue gets scheduled":[""],"Time before an issue starts implementation":[""],"Time between merge request creation and merge/close":[""],"Time until first merge request":[""],"Time|hr":["",""],"Time|min":["",""],"Time|s":[""],"Total Time":[""],"Total test time for all commits/merges":[""],"Want to see the data? Please ask an administrator for access.":[""],"We don't have enough data to show this stage.":[""],"You need permission.":[""],"day":["",""]}}};
\ No newline at end of file
+var locales = locales || {}; locales['en'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-06-07 12:14+0200","Language-Team":"English","Language":"en","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","Last-Translator":"Bob Van Landuyt <bob@gitlab.com>","X-Generator":"Poedit 2.0.2","lang":"en","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"About auto deploy":[""],"Activity":[""],"Add Changelog":[""],"Add Contribution guide":[""],"Add License":[""],"Add an SSH key to your profile to pull or push via SSH.":[""],"Add new directory":[""],"Archived project! Repository is read-only":[""],"Branch":["",""],"Branch <strong>%{branch_name}</strong> was created. To set up auto deploy, choose a GitLab CI Yaml template and commit your changes. %{link_to_autodeploy_doc}":[""],"Branches":[""],"ByAuthor|by":[""],"CI configuration":[""],"Changelog":[""],"Charts":[""],"CiStatusLabel|canceled":[""],"CiStatusLabel|created":[""],"CiStatusLabel|failed":[""],"CiStatusLabel|manual action":[""],"CiStatusLabel|passed":[""],"CiStatusLabel|passed with warnings":[""],"CiStatusLabel|pending":[""],"CiStatusLabel|skipped":[""],"CiStatusLabel|waiting for manual action":[""],"CiStatusText|blocked":[""],"CiStatusText|canceled":[""],"CiStatusText|created":[""],"CiStatusText|failed":[""],"CiStatusText|manual":[""],"CiStatusText|passed":[""],"CiStatusText|pending":[""],"CiStatusText|skipped":[""],"CiStatus|running":[""],"Commit":["",""],"CommitMessage|Add %{file_name}":[""],"Commits":[""],"Commits|History":[""],"Compare":[""],"Contribution guide":[""],"Contributors":[""],"Copy URL to clipboard":[""],"Copy commit SHA to clipboard":[""],"Create New Directory":[""],"Create directory":[""],"Create empty bare repository":[""],"Create merge request":[""],"CreateNewFork|Fork":[""],"Custom notification events":[""],"Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notification_link}.":[""],"Cycle Analytics":[""],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":[""],"CycleAnalyticsStage|Code":[""],"CycleAnalyticsStage|Issue":[""],"CycleAnalyticsStage|Plan":[""],"CycleAnalyticsStage|Production":[""],"CycleAnalyticsStage|Review":[""],"CycleAnalyticsStage|Staging":[""],"CycleAnalyticsStage|Test":[""],"Deploy":["",""],"Directory name":[""],"Don't show again":[""],"Download tar":[""],"Download tar.bz2":[""],"Download tar.gz":[""],"Download zip":[""],"DownloadArtifacts|Download":[""],"DownloadSource|Download":[""],"Files":[""],"Find by path":[""],"Find file":[""],"FirstPushedBy|First":[""],"FirstPushedBy|pushed by":[""],"ForkedFromProjectPath|Forked from":[""],"Forks":[""],"From issue creation until deploy to production":[""],"From merge request merge until deploy to production":[""],"Go to your fork":[""],"GoToYourFork|Fork":[""],"Home":[""],"Housekeeping successfully started":[""],"Import repository":[""],"Introducing Cycle Analytics":[""],"LFSStatus|Disabled":[""],"LFSStatus|Enabled":[""],"Last %d day":["",""],"Last Update":[""],"Last commit":[""],"Leave group":[""],"Leave project":[""],"Limited to showing %d event at most":["",""],"Median":[""],"MissingSSHKeyWarningLink|add an SSH key":[""],"New Issue":["",""],"New branch":[""],"New directory":[""],"New file":[""],"New issue":[""],"New merge request":[""],"New snippet":[""],"New tag":[""],"No repository":[""],"Not available":[""],"Not enough data":[""],"Notification events":[""],"NotificationEvent|Close issue":[""],"NotificationEvent|Close merge request":[""],"NotificationEvent|Failed pipeline":[""],"NotificationEvent|Merge merge request":[""],"NotificationEvent|New issue":[""],"NotificationEvent|New merge request":[""],"NotificationEvent|New note":[""],"NotificationEvent|Reassign issue":[""],"NotificationEvent|Reassign merge request":[""],"NotificationEvent|Reopen issue":[""],"NotificationEvent|Successful pipeline":[""],"NotificationLevel|Custom":[""],"NotificationLevel|Disabled":[""],"NotificationLevel|Global":[""],"NotificationLevel|On mention":[""],"NotificationLevel|Participate":[""],"NotificationLevel|Watch":[""],"OpenedNDaysAgo|Opened":[""],"Pipeline Health":[""],"Project '%{project_name}' queued for deletion.":[""],"Project '%{project_name}' was successfully created.":[""],"Project '%{project_name}' was successfully updated.":[""],"Project '%{project_name}' will be deleted.":[""],"Project access must be granted explicitly to each user.":[""],"Project export could not be deleted.":[""],"Project export has been deleted.":[""],"Project export link has expired. Please generate a new export from your project settings.":[""],"Project export started. A download link will be sent by email.":[""],"Project home":[""],"ProjectFeature|Disabled":[""],"ProjectFeature|Everyone with access":[""],"ProjectFeature|Only team members":[""],"ProjectFileTree|Name":[""],"ProjectLastActivity|Never":[""],"ProjectLifecycle|Stage":[""],"ProjectNetworkGraph|Graph":[""],"Read more":[""],"Readme":[""],"RefSwitcher|Branches":[""],"RefSwitcher|Tags":[""],"Related Commits":[""],"Related Deployed Jobs":[""],"Related Issues":[""],"Related Jobs":[""],"Related Merge Requests":[""],"Related Merged Requests":[""],"Remind later":[""],"Remove project":[""],"Request Access":[""],"Search branches and tags":[""],"Select Archive Format":[""],"Set a password on your account to pull or push via %{protocol}":[""],"Set up CI":[""],"Set up Koding":[""],"Set up auto deploy":[""],"SetPasswordToCloneLink|set a password":[""],"Showing %d event":["",""],"Source code":[""],"StarProject|Star":[""],"Switch branch/tag":[""],"Tag":["",""],"Tags":[""],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":[""],"The collection of events added to the data gathered for that stage.":[""],"The fork relationship has been removed.":[""],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":[""],"The phase of the development lifecycle.":[""],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":[""],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":[""],"The project can be accessed by any logged in user.":[""],"The project can be accessed without any authentication.":[""],"The repository for this project does not exist.":[""],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":[""],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":[""],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":[""],"The time taken by each data entry gathered by that stage.":[""],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":[""],"This means you can not push code until you create an empty repository or import existing one.":[""],"Time before an issue gets scheduled":[""],"Time before an issue starts implementation":[""],"Time between merge request creation and merge/close":[""],"Time until first merge request":[""],"Timeago|%s days ago":[""],"Timeago|%s days remaining":[""],"Timeago|%s hours remaining":[""],"Timeago|%s minutes ago":[""],"Timeago|%s minutes remaining":[""],"Timeago|%s months ago":[""],"Timeago|%s months remaining":[""],"Timeago|%s seconds remaining":[""],"Timeago|%s weeks ago":[""],"Timeago|%s weeks remaining":[""],"Timeago|%s years ago":[""],"Timeago|%s years remaining":[""],"Timeago|1 day remaining":[""],"Timeago|1 hour remaining":[""],"Timeago|1 minute remaining":[""],"Timeago|1 month remaining":[""],"Timeago|1 week remaining":[""],"Timeago|1 year remaining":[""],"Timeago|Past due":[""],"Timeago|a day ago":[""],"Timeago|a month ago":[""],"Timeago|a week ago":[""],"Timeago|a while":[""],"Timeago|a year ago":[""],"Timeago|about %s hours ago":[""],"Timeago|about a minute ago":[""],"Timeago|about an hour ago":[""],"Timeago|in %s days":[""],"Timeago|in %s hours":[""],"Timeago|in %s minutes":[""],"Timeago|in %s months":[""],"Timeago|in %s seconds":[""],"Timeago|in %s weeks":[""],"Timeago|in %s years":[""],"Timeago|in 1 day":[""],"Timeago|in 1 hour":[""],"Timeago|in 1 minute":[""],"Timeago|in 1 month":[""],"Timeago|in 1 week":[""],"Timeago|in 1 year":[""],"Timeago|less than a minute ago":[""],"Time|hr":["",""],"Time|min":["",""],"Time|s":[""],"Total Time":[""],"Total test time for all commits/merges":[""],"Unstar":[""],"Upload New File":[""],"Upload file":[""],"Use your global notification setting":[""],"VisibilityLevel|Internal":[""],"VisibilityLevel|Private":[""],"VisibilityLevel|Public":[""],"Want to see the data? Please ask an administrator for access.":[""],"We don't have enough data to show this stage.":[""],"Withdraw Access Request":[""],"You are going to remove %{project_name_with_namespace}.\\nRemoved project CANNOT be restored!\\nAre you ABSOLUTELY sure?":[""],"You are going to remove the fork relationship to source project %{forked_from_project}.  Are you ABSOLUTELY sure?":[""],"You are going to transfer %{project_name_with_namespace} to another owner. Are you ABSOLUTELY sure?":[""],"You can only add files when you are on a branch":[""],"You must sign in to star a project":[""],"You need permission.":[""],"You will not get any notifications via email":[""],"You will only receive notifications for the events you choose":[""],"You will only receive notifications for threads you have participated in":[""],"You will receive notifications for any activity":[""],"You will receive notifications only for comments in which you were @mentioned":[""],"You won't be able to pull or push project code via %{protocol} until you %{set_password_link} on your account":[""],"You won't be able to pull or push project code via SSH until you %{add_ssh_key_link} to your profile":[""],"Your name":[""],"committed":[""],"day":["",""],"notification emails":[""]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/locale/es/app.js b/app/assets/javascripts/locale/es/app.js
index 3dafa21f235..6977625f4d8 100644
--- a/app/assets/javascripts/locale/es/app.js
+++ b/app/assets/javascripts/locale/es/app.js
@@ -1 +1 @@
-var locales = locales || {}; locales['es'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-05-04 19:24-0500","Language-Team":"Spanish","Language":"es","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","Last-Translator":"","X-Generator":"Poedit 2.0.1","lang":"es","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"ByAuthor|by":["por"],"Commit":["Cambio","Cambios"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["Cycle Analytics ofrece una visión general de cuánto tiempo tarda en pasar de idea a producción en su proyecto."],"CycleAnalyticsStage|Code":["Código"],"CycleAnalyticsStage|Issue":["Incidencia"],"CycleAnalyticsStage|Plan":["Planificación"],"CycleAnalyticsStage|Production":["Producción"],"CycleAnalyticsStage|Review":["Revisión"],"CycleAnalyticsStage|Staging":["Puesta en escena"],"CycleAnalyticsStage|Test":["Pruebas"],"Deploy":["Despliegue","Despliegues"],"FirstPushedBy|First":["Primer"],"FirstPushedBy|pushed by":["enviado por"],"From issue creation until deploy to production":["Desde la creación de la incidencia hasta el despliegue a producción"],"From merge request merge until deploy to production":["Desde la integración de la solicitud de fusión hasta el despliegue a producción"],"Introducing Cycle Analytics":["Introducción a Cycle Analytics"],"Last %d day":["Último %d día","Últimos %d días"],"Limited to showing %d event at most":["Limitado a mostrar máximo %d evento","Limitado a mostrar máximo %d eventos"],"Median":["Mediana"],"New Issue":["Nueva incidencia","Nuevas incidencias"],"Not available":["No disponible"],"Not enough data":["No hay suficientes datos"],"OpenedNDaysAgo|Opened":["Abierto"],"Pipeline Health":["Estado del Pipeline"],"ProjectLifecycle|Stage":["Etapa"],"Read more":["Leer más"],"Related Commits":["Cambios Relacionados"],"Related Deployed Jobs":["Trabajos Desplegados Relacionados"],"Related Issues":["Incidencias Relacionadas"],"Related Jobs":["Trabajos Relacionados"],"Related Merge Requests":["Solicitudes de fusión Relacionadas"],"Related Merged Requests":["Solicitudes de fusión Relacionadas"],"Showing %d event":["Mostrando %d evento","Mostrando %d eventos"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["La etapa de codificación muestra el tiempo desde el primer cambio hasta la creación de la solicitud de fusión. Los datos serán automáticamente incorporados aquí una vez creada tu primera solicitud de fusión."],"The collection of events added to the data gathered for that stage.":["La colección de eventos agregados a los datos recopilados para esa etapa."],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["La etapa de incidencia muestra el tiempo que toma desde la creación de un tema hasta asignar el tema a un hito, o añadir el tema a una lista en el panel de temas. Empieza a crear temas para ver los datos de esta etapa."],"The phase of the development lifecycle.":["La etapa del ciclo de vida de desarrollo."],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["La etapa de planificación muestra el tiempo desde el paso anterior hasta el envío de tu primera confirmación. Este tiempo se añadirá automáticamente una vez que usted envíe el primer cambio."],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["La etapa de producción muestra el tiempo total que tarda entre la creación de una incidencia y el despliegue del código a producción. Los datos se añadirán automáticamente una vez haya finalizado por completo el ciclo de idea a producción."],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["La etapa de revisión muestra el tiempo desde la creación de la solicitud de fusión hasta que los cambios se fusionaron. Los datos se añadirán automáticamente después de fusionar su primera solicitud de fusión."],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["La etapa de puesta en escena muestra el tiempo entre la fusión y el despliegue de código en el entorno de producción. Los datos se añadirán automáticamente una vez que se despliega a producción por primera vez."],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["La etapa de pruebas muestra el tiempo que GitLab CI toma para ejecutar cada pipeline para la solicitud de fusión relacionada. Los datos se añadirán automáticamente luego de que el primer pipeline termine de ejecutarse."],"The time taken by each data entry gathered by that stage.":["El tiempo utilizado por cada entrada de datos obtenido por esa etapa."],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["El valor en el punto medio de una serie de valores observados. Por ejemplo, entre 3, 5, 9, la mediana es 5. Entre 3, 5, 7, 8, la mediana es (5 + 7) / 2 = 6."],"Time before an issue gets scheduled":["Tiempo antes de que una incidencia sea programada"],"Time before an issue starts implementation":["Tiempo antes de que empieze la implementación de una incidencia"],"Time between merge request creation and merge/close":["Tiempo entre la creación de la solicitud de fusión y la integración o cierre de ésta"],"Time until first merge request":["Tiempo hasta la primera solicitud de fusión"],"Time|hr":["hr","hrs"],"Time|min":["min","mins"],"Time|s":["s"],"Total Time":["Tiempo Total"],"Total test time for all commits/merges":["Tiempo total de pruebas para todos los cambios o integraciones"],"Want to see the data? Please ask an administrator for access.":["¿Quieres ver los datos? Por favor pide acceso al administrador."],"We don't have enough data to show this stage.":["No hay suficientes datos para mostrar en esta etapa."],"You need permission.":["Necesitas permisos."],"day":["día","días"]}}};
\ No newline at end of file
+var locales = locales || {}; locales['es'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-06-07 12:29-0500","Language-Team":"Spanish","Language":"es","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","Last-Translator":"Bob Van Landuyt <bob@gitlab.com>","X-Generator":"Poedit 2.0.2","lang":"es","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"About auto deploy":["Acerca del auto despliegue"],"Activity":["Actividad"],"Add Changelog":["Agregar Changelog"],"Add Contribution guide":["Agregar guía de contribución"],"Add License":["Agregar Licencia"],"Add an SSH key to your profile to pull or push via SSH.":["Agregar una clave SSH a tu perfil para actualizar o enviar a través de SSH."],"Add new directory":["Agregar nuevo directorio"],"Archived project! Repository is read-only":["¡Proyecto archivado! El repositorio es de sólo lectura"],"Branch":["Rama","Ramas"],"Branch <strong>%{branch_name}</strong> was created. To set up auto deploy, choose a GitLab CI Yaml template and commit your changes. %{link_to_autodeploy_doc}":["La rama <strong>%{branch_name}</strong> fue creada. Para configurar el auto despliegue, escoge una plantilla Yaml para GitLab CI y envía tus cambios. %{link_to_autodeploy_doc}"],"Branches":["Ramas"],"ByAuthor|by":["por"],"CI configuration":["Configuración de CI"],"Changelog":["Changelog"],"Charts":["Gráficos"],"CiStatusLabel|canceled":["cancelado"],"CiStatusLabel|created":["creado"],"CiStatusLabel|failed":["fallado"],"CiStatusLabel|manual action":["acción manual"],"CiStatusLabel|passed":["pasó"],"CiStatusLabel|passed with warnings":["pasó con advertencias"],"CiStatusLabel|pending":["pendiente"],"CiStatusLabel|skipped":["omitido"],"CiStatusLabel|waiting for manual action":["esperando acción manual"],"CiStatusText|blocked":["bloqueado"],"CiStatusText|canceled":["cancelado"],"CiStatusText|created":["creado"],"CiStatusText|failed":["fallado"],"CiStatusText|manual":["manual"],"CiStatusText|passed":["pasó"],"CiStatusText|pending":["pendiente"],"CiStatusText|skipped":["omitido"],"CiStatus|running":["en ejecución"],"Commit":["Cambio","Cambios"],"CommitMessage|Add %{file_name}":["Agregar %{file_name}"],"Commits":["Cambios"],"Commits|History":["Historial"],"Compare":["Comparar"],"Contribution guide":["Guía de contribución"],"Contributors":["Contribuidores"],"Copy URL to clipboard":["Copiar URL al portapapeles"],"Copy commit SHA to clipboard":["Copiar SHA del cambio al portapapeles"],"Create New Directory":["Crear Nuevo Directorio"],"Create directory":["Crear directorio"],"Create empty bare repository":["Crear repositorio vacío"],"Create merge request":["Crear solicitud de fusión"],"CreateNewFork|Fork":["Bifurcar"],"Custom notification events":["Eventos de notificaciones personalizadas"],"Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notification_link}.":["Los niveles de notificación personalizados son los mismos que los niveles participantes. Con los niveles de notificación personalizados, también recibirá notificaciones para eventos seleccionados. Para obtener más información, consulte %{notification_link}."],"Cycle Analytics":["Cycle Analytics"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["Cycle Analytics ofrece una visión general de cuánto tiempo tarda en pasar de idea a producción en su proyecto."],"CycleAnalyticsStage|Code":["Código"],"CycleAnalyticsStage|Issue":["Incidencia"],"CycleAnalyticsStage|Plan":["Planificación"],"CycleAnalyticsStage|Production":["Producción"],"CycleAnalyticsStage|Review":["Revisión"],"CycleAnalyticsStage|Staging":["Puesta en escena"],"CycleAnalyticsStage|Test":["Pruebas"],"Deploy":["Despliegue","Despliegues"],"Directory name":["Nombre del directorio"],"Don't show again":["No mostrar de nuevo"],"Download tar":["Descargar tar"],"Download tar.bz2":["Descargar tar.bz2"],"Download tar.gz":["Descargar tar.gz"],"Download zip":["Descargar zip"],"DownloadArtifacts|Download":["Descargar"],"DownloadSource|Download":["Descargar"],"Files":["Archivos"],"Find by path":["Buscar por ruta"],"Find file":["Buscar archivo"],"FirstPushedBy|First":["Primer"],"FirstPushedBy|pushed by":["enviado por"],"ForkedFromProjectPath|Forked from":["Bifurcado de"],"Forks":["Bifurcaciones"],"From issue creation until deploy to production":["Desde la creación de la incidencia hasta el despliegue a producción"],"From merge request merge until deploy to production":["Desde la integración de la solicitud de fusión hasta el despliegue a producción"],"Go to your fork":["Ir a tu bifurcación"],"GoToYourFork|Fork":["Bifurcación"],"Home":["Inicio"],"Housekeeping successfully started":["Servicio de limpieza iniciado con éxito"],"Import repository":["Importar repositorio"],"Introducing Cycle Analytics":["Introducción a Cycle Analytics"],"LFSStatus|Disabled":["Deshabilitado"],"LFSStatus|Enabled":["Habilitado"],"Last %d day":["Último %d día","Últimos %d días"],"Last Update":["Última actualización"],"Last commit":["Último cambio"],"Leave group":["Abandonar grupo"],"Leave project":["Abandonar proyecto"],"Limited to showing %d event at most":["Limitado a mostrar máximo %d evento","Limitado a mostrar máximo %d eventos"],"Median":["Mediana"],"MissingSSHKeyWarningLink|add an SSH key":["agregar una clave SSH"],"New Issue":["Nueva incidencia","Nuevas incidencias"],"New branch":["Nueva rama"],"New directory":["Nuevo directorio"],"New file":["Nuevo archivo"],"New issue":["Nueva incidencia"],"New merge request":["Nueva solicitud de fusión"],"New snippet":["Nuevo fragmento de código"],"New tag":["Nueva etiqueta"],"No repository":["No hay repositorio"],"Not available":["No disponible"],"Not enough data":["No hay suficientes datos"],"Notification events":["Eventos de notificación"],"NotificationEvent|Close issue":["Cerrar incidencia"],"NotificationEvent|Close merge request":["Cerrar solicitud de fusión"],"NotificationEvent|Failed pipeline":["Pipeline fallido"],"NotificationEvent|Merge merge request":["Integrar solicitud de fusión"],"NotificationEvent|New issue":["Nueva incidencia"],"NotificationEvent|New merge request":["Nueva solicitud de fusión"],"NotificationEvent|New note":["Nueva nota"],"NotificationEvent|Reassign issue":["Reasignar incidencia"],"NotificationEvent|Reassign merge request":["Reasignar solicitud de fusión"],"NotificationEvent|Reopen issue":["Reabrir incidencia"],"NotificationEvent|Successful pipeline":["Pipeline exitoso"],"NotificationLevel|Custom":["Personalizado"],"NotificationLevel|Disabled":["Deshabilitado"],"NotificationLevel|Global":["Global"],"NotificationLevel|On mention":["Cuando me mencionan"],"NotificationLevel|Participate":["Participación"],"NotificationLevel|Watch":["Vigilancia"],"OpenedNDaysAgo|Opened":["Abierto"],"Pipeline Health":["Estado del Pipeline"],"Project '%{project_name}' queued for deletion.":["Proyecto ‘%{project_name}’ en cola para eliminación."],"Project '%{project_name}' was successfully created.":["Proyecto ‘%{project_name}’ fue creado satisfactoriamente."],"Project '%{project_name}' was successfully updated.":["Proyecto ‘%{project_name}’ fue actualizado satisfactoriamente."],"Project '%{project_name}' will be deleted.":["Proyecto ‘%{project_name}’ será eliminado."],"Project access must be granted explicitly to each user.":["El acceso al proyecto debe concederse explícitamente a cada usuario."],"Project export could not be deleted.":["No se pudo eliminar la exportación del proyecto."],"Project export has been deleted.":["La exportación del proyecto ha sido eliminada."],"Project export link has expired. Please generate a new export from your project settings.":["El enlace de exportación del proyecto ha caducado. Por favor, genera una nueva exportación desde la configuración del proyecto."],"Project export started. A download link will be sent by email.":["Se inició la exportación del proyecto. Se enviará un enlace de descarga por correo electrónico."],"Project home":["Inicio del proyecto"],"ProjectFeature|Disabled":["Deshabilitada"],"ProjectFeature|Everyone with access":["Todos con acceso"],"ProjectFeature|Only team members":["Solo miembros del equipo"],"ProjectFileTree|Name":["Nombre"],"ProjectLastActivity|Never":["Nunca"],"ProjectLifecycle|Stage":["Etapa"],"ProjectNetworkGraph|Graph":["Historial gráfico"],"Read more":["Leer más"],"Readme":["Readme"],"RefSwitcher|Branches":["Ramas"],"RefSwitcher|Tags":["Etiquetas"],"Related Commits":["Cambios Relacionados"],"Related Deployed Jobs":["Trabajos Desplegados Relacionados"],"Related Issues":["Incidencias Relacionadas"],"Related Jobs":["Trabajos Relacionados"],"Related Merge Requests":["Solicitudes de fusión Relacionadas"],"Related Merged Requests":["Solicitudes de fusión Relacionadas"],"Remind later":["Recordar después"],"Remove project":["Eliminar proyecto"],"Request Access":["Solicitar acceso"],"Search branches and tags":["Buscar ramas y etiquetas"],"Select Archive Format":["Seleccionar formato de archivo"],"Set a password on your account to pull or push via %{protocol}":["Establezca una contraseña en su cuenta para actualizar o enviar a través de% {protocol}"],"Set up CI":["Configurar CI"],"Set up Koding":["Configurar Koding"],"Set up auto deploy":["Configurar auto despliegue"],"SetPasswordToCloneLink|set a password":["establecer una contraseña"],"Showing %d event":["Mostrando %d evento","Mostrando %d eventos"],"Source code":["Código fuente"],"StarProject|Star":["Destacar"],"Switch branch/tag":["Cambiar rama/etiqueta"],"Tag":["Etiqueta","Etiquetas"],"Tags":["Etiquetas"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["La etapa de desarrollo muestra el tiempo desde el primer cambio hasta la creación de la solicitud de fusión. Los datos serán automáticamente incorporados aquí una vez creada tu primera solicitud de fusión."],"The collection of events added to the data gathered for that stage.":["La colección de eventos agregados a los datos recopilados para esa etapa."],"The fork relationship has been removed.":["La relación con la bifurcación se ha eliminado."],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["La etapa de incidencia muestra el tiempo que toma desde la creación de un tema hasta asignar el tema a un hito, o añadir el tema a una lista en el panel de temas. Empieza a crear temas para ver los datos de esta etapa."],"The phase of the development lifecycle.":["La etapa del ciclo de vida de desarrollo."],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["La etapa de planificación muestra el tiempo desde el paso anterior hasta el envío de tu primera confirmación. Este tiempo se añadirá automáticamente una vez que usted envíe el primer cambio."],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["La etapa de producción muestra el tiempo total que tarda entre la creación de una incidencia y el despliegue del código a producción. Los datos se añadirán automáticamente una vez haya finalizado por completo el ciclo de idea a producción."],"The project can be accessed by any logged in user.":["El proyecto puede ser accedido por cualquier usuario conectado."],"The project can be accessed without any authentication.":["El proyecto puede accederse sin ninguna autenticación."],"The repository for this project does not exist.":["El repositorio para este proyecto no existe."],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["La etapa de revisión muestra el tiempo desde la creación de la solicitud de fusión hasta que los cambios se fusionaron. Los datos se añadirán automáticamente después de fusionar su primera solicitud de fusión."],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["La etapa de puesta en escena muestra el tiempo entre la fusión y el despliegue de código en el entorno de producción. Los datos se añadirán automáticamente una vez que se despliega a producción por primera vez."],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["La etapa de pruebas muestra el tiempo que GitLab CI toma para ejecutar cada pipeline para la solicitud de fusión relacionada. Los datos se añadirán automáticamente luego de que el primer pipeline termine de ejecutarse."],"The time taken by each data entry gathered by that stage.":["El tiempo utilizado por cada entrada de datos obtenido por esa etapa."],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["El valor en el punto medio de una serie de valores observados. Por ejemplo, entre 3, 5, 9, la mediana es 5. Entre 3, 5, 7, 8, la mediana es (5 + 7) / 2 = 6."],"This means you can not push code until you create an empty repository or import existing one.":["Esto significa que no puede enviar código hasta que cree un repositorio vacío o importe uno existente."],"Time before an issue gets scheduled":["Tiempo antes de que una incidencia sea programada"],"Time before an issue starts implementation":["Tiempo antes de que empieze la implementación de una incidencia"],"Time between merge request creation and merge/close":["Tiempo entre la creación de la solicitud de fusión y la integración o cierre de ésta"],"Time until first merge request":["Tiempo hasta la primera solicitud de fusión"],"Timeago|%s days ago":["hace %s días"],"Timeago|%s days remaining":["%s días restantes"],"Timeago|%s hours remaining":["%s horas restantes"],"Timeago|%s minutes ago":["hace %s minutos"],"Timeago|%s minutes remaining":["%s minutos restantes"],"Timeago|%s months ago":["hace %s meses"],"Timeago|%s months remaining":["%s meses restantes"],"Timeago|%s seconds remaining":["%s segundos restantes"],"Timeago|%s weeks ago":["hace %s semanas"],"Timeago|%s weeks remaining":["%s semanas restantes"],"Timeago|%s years ago":["hace %s años"],"Timeago|%s years remaining":["%s años restantes"],"Timeago|1 day remaining":["1 día restante"],"Timeago|1 hour remaining":["1 hora restante"],"Timeago|1 minute remaining":["1 minuto restante"],"Timeago|1 month remaining":["1 mes restante"],"Timeago|1 week remaining":["1 semana restante"],"Timeago|1 year remaining":["1 año restante"],"Timeago|Past due":["Atrasado"],"Timeago|a day ago":["hace un día"],"Timeago|a month ago":["hace 1 mes"],"Timeago|a week ago":["hace 1 semana"],"Timeago|a while":["hace un momento"],"Timeago|a year ago":["hace 1 año"],"Timeago|about %s hours ago":["hace alrededor de %s horas"],"Timeago|about a minute ago":["hace alrededor de 1 minuto"],"Timeago|about an hour ago":["hace alrededor de 1 hora"],"Timeago|in %s days":["en %s días"],"Timeago|in %s hours":["en %s horas"],"Timeago|in %s minutes":["en %s minutos"],"Timeago|in %s months":["en %s meses"],"Timeago|in %s seconds":["en %s segundos"],"Timeago|in %s weeks":["en %s semanas"],"Timeago|in %s years":["en %s años"],"Timeago|in 1 day":["en 1 día"],"Timeago|in 1 hour":["en 1 hora"],"Timeago|in 1 minute":["en 1 minuto"],"Timeago|in 1 month":["en 1 mes"],"Timeago|in 1 week":["en 1 semana"],"Timeago|in 1 year":["en 1 año"],"Timeago|less than a minute ago":["hace menos de 1 minuto"],"Time|hr":["hr","hrs"],"Time|min":["min","mins"],"Time|s":["s"],"Total Time":["Tiempo Total"],"Total test time for all commits/merges":["Tiempo total de pruebas para todos los cambios o integraciones"],"Unstar":["No Destacar"],"Upload New File":["Subir nuevo archivo"],"Upload file":["Subir archivo"],"Use your global notification setting":["Utiliza tu configuración de notificación global"],"VisibilityLevel|Internal":["Interno"],"VisibilityLevel|Private":["Privado"],"VisibilityLevel|Public":["Público"],"Want to see the data? Please ask an administrator for access.":["¿Quieres ver los datos? Por favor pide acceso al administrador."],"We don't have enough data to show this stage.":["No hay suficientes datos para mostrar en esta etapa."],"Withdraw Access Request":["Retirar Solicitud de Acceso"],"You are going to remove %{project_name_with_namespace}.\\nRemoved project CANNOT be restored!\\nAre you ABSOLUTELY sure?":["Va a eliminar %{project_name_with_namespace}.\\n¡El proyecto eliminado NO puede ser restaurado!\\n¿Estás TOTALMENTE seguro?"],"You are going to remove the fork relationship to source project %{forked_from_project}.  Are you ABSOLUTELY sure?":["Vas a eliminar el enlace de la bifurcación con el proyecto original %{forked_from_project}. ¿Estás TOTALMENTE seguro?"],"You are going to transfer %{project_name_with_namespace} to another owner. Are you ABSOLUTELY sure?":["Vas a transferir %{project_name_with_namespace} a otro propietario. ¿Estás TOTALMENTE seguro?"],"You can only add files when you are on a branch":["Sólo puede agregar archivos cuando estas en una rama"],"You must sign in to star a project":["Debes iniciar sesión para destacar un proyecto"],"You need permission.":["Necesitas permisos."],"You will not get any notifications via email":["No recibirás ninguna notificación por correo electrónico"],"You will only receive notifications for the events you choose":["Solo recibirás notificaciones de los eventos que elijas"],"You will only receive notifications for threads you have participated in":["Solo recibirás notificaciones de los temas en los que has participado"],"You will receive notifications for any activity":["Recibirás notificaciones para cualquier actividad"],"You will receive notifications only for comments in which you were @mentioned":["Recibirás notificaciones sólo para los comentarios en los que se te mencionó"],"You won't be able to pull or push project code via %{protocol} until you %{set_password_link} on your account":["No podrás actualizar o enviar código al proyecto a través de %{protocol} hasta que %{set_password_link} en tu cuenta"],"You won't be able to pull or push project code via SSH until you %{add_ssh_key_link} to your profile":["No podrás actualizar o enviar código al proyecto a través de SSH hasta que %{add_ssh_key_link} en su perfil"],"Your name":["Tu nombre"],"committed":["cambió"],"day":["día","días"],"notification emails":["correos electrónicos de notificación"]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/locale/zh_CN/app.js b/app/assets/javascripts/locale/zh_CN/app.js
new file mode 100644
index 00000000000..9525bc88190
--- /dev/null
+++ b/app/assets/javascripts/locale/zh_CN/app.js
@@ -0,0 +1 @@
+var locales = locales || {}; locales['zh_CN'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","POT-Creation-Date":"2017-05-04 19:24-0500","PO-Revision-Date":"2017-05-04 19:24-0500","Last-Translator":"HuangTao <htve@outlook.com>, 2017","Language-Team":"Chinese (China) (https://www.transifex.com/gitlab-zh/teams/75177/zh_CN/)","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Language":"zh_CN","Plural-Forms":"nplurals=1; plural=0;","lang":"zh_CN","domain":"app","plural_forms":"nplurals=1; plural=0;"},"ByAuthor|by":["作者:"],"Commit":["提交"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["周期分析概述了项目从想法到产品实现的各阶段所需的时间。"],"CycleAnalyticsStage|Code":["编码"],"CycleAnalyticsStage|Issue":["议题"],"CycleAnalyticsStage|Plan":["计划"],"CycleAnalyticsStage|Production":["生产"],"CycleAnalyticsStage|Review":["评审"],"CycleAnalyticsStage|Staging":["预发布"],"CycleAnalyticsStage|Test":["测试"],"Deploy":["部署"],"FirstPushedBy|First":["首次推送"],"FirstPushedBy|pushed by":["推送者:"],"From issue creation until deploy to production":["从创建议题到部署至生产环境"],"From merge request merge until deploy to production":["从合并请求被合并后到部署至生产环境"],"Introducing Cycle Analytics":["周期分析简介"],"Last %d day":["最后 %d 天"],"Limited to showing %d event at most":["最多显示 %d 个事件"],"Median":["中位数"],"New Issue":["新议题"],"Not available":["数据不足"],"Not enough data":["数据不足"],"OpenedNDaysAgo|Opened":["开始于"],"Pipeline Health":["流水线健康指标"],"ProjectLifecycle|Stage":["项目生命周期"],"Read more":["了解更多"],"Related Commits":["相关的提交"],"Related Deployed Jobs":["相关的部署作业"],"Related Issues":["相关的议题"],"Related Jobs":["相关的作业"],"Related Merge Requests":["相关的合并请求"],"Related Merged Requests":["相关已合并的合并请求"],"Showing %d event":["显示 %d 个事件"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["编码阶段概述了从第一次提交到创建合并请求的时间。创建第一个合并请求后，数据将自动添加到此处。"],"The collection of events added to the data gathered for that stage.":["与该阶段相关的事件。"],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["议题阶段概述了从创建议题到将议题设置里程碑或将议题添加到议题看板的时间。开始创建议题以查看此阶段的数据。"],"The phase of the development lifecycle.":["项目生命周期中的各个阶段。"],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["计划阶段概述了从议题添加到日程后到推送首次提交的时间。当首次推送提交后，数据将自动添加到此处。"],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["生产阶段概述了从创建一个议题到将代码部署到生产环境的总时间。当完成想法到部署生产的循环，数据将自动添加到此处。"],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["评审阶段概述了从创建合并请求到被合并的时间。当创建第一个合并请求后，数据将自动添加到此处。"],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["预发布阶段概述了从合并请求被合并到部署至生产环境的总时间。首次部署到生产环境后，数据将自动添加到此处。"],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["测试阶段概述了GitLab CI为相关合并请求运行每个流水线所需的时间。当第一个流水线运行完成后，数据将自动添加到此处。"],"The time taken by each data entry gathered by that stage.":["该阶段每条数据所花的时间"],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["中位数是一个数列中最中间的值。例如在 3、5、9 之间，中位数是 5。在 3、5、7、8 之间，中位数是 （5 + 7）/ 2 = 6。"],"Time before an issue gets scheduled":["议题被列入日程表的时间"],"Time before an issue starts implementation":["开始进行编码前的时间"],"Time between merge request creation and merge/close":["从创建合并请求到被合并或关闭的时间"],"Time until first merge request":["创建第一个合并请求之前的时间"],"Time|hr":["小时"],"Time|min":["分钟"],"Time|s":["秒"],"Total Time":["总时间"],"Total test time for all commits/merges":["所有提交和合并的总测试时间"],"Want to see the data? Please ask an administrator for access.":["权限不足。如需查看相关数据，请向管理员申请权限。"],"We don't have enough data to show this stage.":["该阶段的数据不足，无法显示。"],"You need permission.":["您需要相关的权限。"],"day":["天"]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/locale/zh_HK/app.js b/app/assets/javascripts/locale/zh_HK/app.js
new file mode 100644
index 00000000000..fd0bcd988c5
--- /dev/null
+++ b/app/assets/javascripts/locale/zh_HK/app.js
@@ -0,0 +1 @@
+var locales = locales || {}; locales['zh_HK'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","POT-Creation-Date":"2017-05-04 19:24-0500","PO-Revision-Date":"2017-05-04 19:24-0500","Last-Translator":"HuangTao <htve@outlook.com>, 2017","Language-Team":"Chinese (Hong Kong) (https://www.transifex.com/gitlab-zh/teams/75177/zh_HK/)","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Language":"zh_HK","Plural-Forms":"nplurals=1; plural=0;","lang":"zh_HK","domain":"app","plural_forms":"nplurals=1; plural=0;"},"ByAuthor|by":["作者:"],"Commit":["提交"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["週期分析概述了項目從想法到產品實現的各階段所需的時間。"],"CycleAnalyticsStage|Code":["編碼"],"CycleAnalyticsStage|Issue":["議題"],"CycleAnalyticsStage|Plan":["計劃"],"CycleAnalyticsStage|Production":["生產"],"CycleAnalyticsStage|Review":["評審"],"CycleAnalyticsStage|Staging":["預發布"],"CycleAnalyticsStage|Test":["測試"],"Deploy":["部署"],"FirstPushedBy|First":["首次推送"],"FirstPushedBy|pushed by":["推送者:"],"From issue creation until deploy to production":["從創建議題到部署到生產環境"],"From merge request merge until deploy to production":["從合併請求的合併到部署至生產環境"],"Introducing Cycle Analytics":["週期分析簡介"],"Last %d day":["最後 %d 天"],"Limited to showing %d event at most":["最多顯示 %d 個事件"],"Median":["中位數"],"New Issue":["新議題"],"Not available":["不可用"],"Not enough data":["數據不足"],"OpenedNDaysAgo|Opened":["開始於"],"Pipeline Health":["流水線健康指標"],"ProjectLifecycle|Stage":["項目生命週期"],"Read more":["了解更多"],"Related Commits":["相關的提交"],"Related Deployed Jobs":["相關的部署作業"],"Related Issues":["相關的議題"],"Related Jobs":["相關的作業"],"Related Merge Requests":["相關的合併請求"],"Related Merged Requests":["相關已合併的合並請求"],"Showing %d event":["顯示 %d 個事件"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["編碼階段概述了從第一次提交到創建合併請求的時間。創建第壹個合並請求後，數據將自動添加到此處。"],"The collection of events added to the data gathered for that stage.":["與該階段相關的事件。"],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["議題階段概述了從創建議題到將議題設置裏程碑或將議題添加到議題看板的時間。創建一個議題後，數據將自動添加到此處。"],"The phase of the development lifecycle.":["項目生命週期中的各個階段。"],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["計劃階段概述了從議題添加到日程後到推送首次提交的時間。當首次推送提交後，數據將自動添加到此處。"],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["生產階段概述了從創建議題到將代碼部署到生產環境的時間。當完成完整的想法到部署生產，數據將自動添加到此處。"],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["評審階段概述了從創建合並請求到合併的時間。當創建第壹個合並請求後，數據將自動添加到此處。"],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["預發布階段概述了合並請求的合併到部署代碼到生產環境的總時間。當首次部署到生產環境後，數據將自動添加到此處。"],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["測試階段概述了GitLab CI為相關合併請求運行每個流水線所需的時間。當第壹個流水線運行完成後，數據將自動添加到此處。"],"The time taken by each data entry gathered by that stage.":["該階段每條數據所花的時間"],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["中位數是一個數列中最中間的值。例如在 3、5、9 之間，中位數是 5。在 3、5、7、8 之間，中位數是 （5 + 7）/ 2 = 6。"],"Time before an issue gets scheduled":["議題被列入日程表的時間"],"Time before an issue starts implementation":["開始進行編碼前的時間"],"Time between merge request creation and merge/close":["從創建合併請求到被合並或關閉的時間"],"Time until first merge request":["創建第壹個合併請求之前的時間"],"Time|hr":["小時"],"Time|min":["分鐘"],"Time|s":["秒"],"Total Time":["總時間"],"Total test time for all commits/merges":["所有提交和合併的總測試時間"],"Want to see the data? Please ask an administrator for access.":["權限不足。如需查看相關數據，請向管理員申請權限。"],"We don't have enough data to show this stage.":["該階段的數據不足，無法顯示。"],"You need permission.":["您需要相關的權限。"],"day":["天"]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/locale/zh_TW/app.js b/app/assets/javascripts/locale/zh_TW/app.js
new file mode 100644
index 00000000000..79904d17bf6
--- /dev/null
+++ b/app/assets/javascripts/locale/zh_TW/app.js
@@ -0,0 +1 @@
+var locales = locales || {}; locales['zh_TW'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","POT-Creation-Date":"2017-05-04 19:24-0500","PO-Revision-Date":"2017-05-04 19:24-0500","Last-Translator":"HuangTao <htve@outlook.com>, 2017","Language-Team":"Chinese (Taiwan) (https://www.transifex.com/gitlab-zh/teams/75177/zh_TW/)","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Language":"zh_TW","Plural-Forms":"nplurals=1; plural=0;","lang":"zh_TW","domain":"app","plural_forms":"nplurals=1; plural=0;"},"ByAuthor|by":["作者:"],"Commit":["送交"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["週期分析概述了你的專案從想法到產品實現，各階段所需的時間。"],"CycleAnalyticsStage|Code":["程式開發"],"CycleAnalyticsStage|Issue":["議題"],"CycleAnalyticsStage|Plan":["計劃"],"CycleAnalyticsStage|Production":["上線"],"CycleAnalyticsStage|Review":["複閱"],"CycleAnalyticsStage|Staging":["預備"],"CycleAnalyticsStage|Test":["測試"],"Deploy":["部署"],"FirstPushedBy|First":["首次推送"],"FirstPushedBy|pushed by":["推送者:"],"From issue creation until deploy to production":["從議題建立至線上部署"],"From merge request merge until deploy to production":["從請求被合併後至線上部署"],"Introducing Cycle Analytics":["週期分析簡介"],"Last %d day":["最後 %d 天"],"Limited to showing %d event at most":["最多顯示 %d 個事件"],"Median":["中位數"],"New Issue":["新議題"],"Not available":["無法使用"],"Not enough data":["資料不足"],"OpenedNDaysAgo|Opened":["開始於"],"Pipeline Health":["流水線健康指標"],"ProjectLifecycle|Stage":["專案生命週期"],"Read more":["了解更多"],"Related Commits":["相關的送交"],"Related Deployed Jobs":["相關的部署作業"],"Related Issues":["相關的議題"],"Related Jobs":["相關的作業"],"Related Merge Requests":["相關的合併請求"],"Related Merged Requests":["相關已合併的請求"],"Showing %d event":["顯示 %d 個事件"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["程式開發階段顯示從第一次送交到建立合併請求的時間。建立第一個合併請求後，資料將自動填入。"],"The collection of events added to the data gathered for that stage.":["與該階段相關的事件。"],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["議題階段顯示從議題建立到設置里程碑、或將該議題加至議題看板的時間。建立第一個議題後，資料將自動填入。"],"The phase of the development lifecycle.":["專案開發生命週期的各個階段。"],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["計劃階段顯示從議題添加到日程後至推送第一個送交的時間。當第一次推送送交後，資料將自動填入。"],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["上線階段顯示從建立一個議題到部署程式至線上的總時間。當完成從想法到產品實現的循環後，資料將自動填入。"],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["複閱階段顯示從合併請求建立後至被合併的時間。當建立第一個合併請求後，資料將自動填入。"],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["預備階段顯示從合併請求被合併後至部署上線的時間。當第一次部署上線後，資料將自動填入。"],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["測試階段顯示相關合併請求的流水線所花的時間。當第一個流水線運作完畢後，資料將自動填入。"],"The time taken by each data entry gathered by that stage.":["每筆該階段相關資料所花的時間。"],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["中位數是一個數列中最中間的值。例如在 3、5、9 之間，中位數是 5。在 3、5、7、8 之間，中位數是 （5 + 7）/ 2 = 6。"],"Time before an issue gets scheduled":["議題被列入日程表的時間"],"Time before an issue starts implementation":["議題等待開始實作的時間"],"Time between merge request creation and merge/close":["合併請求被合併或是關閉的時間"],"Time until first merge request":["第一個合併請求被建立前的時間"],"Time|hr":["小時"],"Time|min":["分鐘"],"Time|s":["秒"],"Total Time":["總時間"],"Total test time for all commits/merges":["所有送交和合併的總測試時間"],"Want to see the data? Please ask an administrator for access.":["權限不足。如需查看相關資料，請向管理員申請權限。"],"We don't have enough data to show this stage.":["因該階段的資料不足而無法顯示相關資訊"],"You need permission.":["您需要相關的權限。"],"day":["天"]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index a07aa047293..fe367d0c42a 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -56,10 +56,8 @@ import './lib/utils/animate';
 import './lib/utils/bootstrap_linked_tabs';
 import './lib/utils/common_utils';
 import './lib/utils/datetime_utility';
-import './lib/utils/notify';
 import './lib/utils/pretty_time';
 import './lib/utils/text_utility';
-import './lib/utils/type_utility';
 import './lib/utils/url_utility';
 
 // u2f
@@ -97,7 +95,6 @@ import './dropzone_input';
 import './due_date_select';
 import './files_comment_button';
 import './flash';
-import './gfm_auto_complete';
 import './gl_dropdown';
 import './gl_field_error';
 import './gl_field_errors';
@@ -107,12 +104,11 @@ import './group_label_subscription';
 import './groups_select';
 import './header';
 import './importer_status';
-import './issuable';
+import './issuable_index';
 import './issuable_context';
 import './issuable_form';
 import './issue';
 import './issue_status_select';
-import './issues_bulk_assignment';
 import './label_manager';
 import './labels';
 import './labels_select';
@@ -172,7 +168,7 @@ import './visibility_select';
 import './wikis';
 import './zen_mode';
 
-// eslint-disable-next-line global-require
+// eslint-disable-next-line global-require, import/no-commonjs
 if (process.env.NODE_ENV !== 'production') require('./test_utils/');
 
 document.addEventListener('beforeunload', function () {
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
index 15992460146..17030c3e4d3 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
@@ -2,14 +2,13 @@
 /* global Flash */
 
 import Vue from 'vue';
-
-require('./merge_conflict_store');
-require('./merge_conflict_service');
-require('./mixins/line_conflict_utils');
-require('./mixins/line_conflict_actions');
-require('./components/diff_file_editor');
-require('./components/inline_conflict_lines');
-require('./components/parallel_conflict_lines');
+import './merge_conflict_store';
+import './merge_conflict_service';
+import './mixins/line_conflict_utils';
+import './mixins/line_conflict_actions';
+import './components/diff_file_editor';
+import './components/inline_conflict_lines';
+import './components/parallel_conflict_lines';
 
 $(() => {
   const INTERACTIVE_RESOLVE_MODE = 'interactive';
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index ed342b9990f..f93feeec1c2 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -1,13 +1,11 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, no-underscore-dangle, one-var, one-var-declaration-per-line, consistent-return, dot-notation, quote-props, comma-dangle, object-shorthand, max-len, prefer-arrow-callback */
 /* global MergeRequestTabs */
 
-require('vendor/jquery.waitforimages');
-require('./task_list');
-require('./merge_request_tabs');
+import 'vendor/jquery.waitforimages';
+import './task_list';
+import './merge_request_tabs';
 
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.MergeRequest = (function() {
     function MergeRequest(opts) {
       // Initialize MergeRequest behavior
@@ -16,7 +14,7 @@ require('./merge_request_tabs');
       //   action - String, current controller action
       //
       this.opts = opts != null ? opts : {};
-      this.submitNoteForm = bind(this.submitNoteForm, this);
+      this.submitNoteForm = this.submitNoteForm.bind(this);
       this.$el = $('.merge-request');
       this.$('.show-all-commits').on('click', (function(_this) {
         return function() {
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index c709730f78f..894ed81b044 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -285,7 +285,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
           // Similar to `toggler_behavior` in the discussion tab
           const hash = window.gl.utils.getLocationHash();
           const anchor = hash && $container.find(`[id="${hash}"]`);
-          if (anchor) {
+          if (anchor && anchor.length > 0) {
             const notesContent = anchor.closest('.notes_content');
             const lineType = notesContent.hasClass('new') ? 'new' : 'old';
             notes.toggleDiffNote({
@@ -373,18 +373,26 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
 
     initAffix() {
       const $tabs = $('.js-tabs-affix');
+      const $fixedNav = $('.navbar-gitlab');
 
       // Screen space on small screens is usually very sparse
       // So we dont affix the tabs on these
       if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
 
+      /**
+        If the browser does not support position sticky, it returns the position as static.
+        If the browser does support sticky, then we allow the browser to handle it, if not
+        then we default back to Bootstraps affix
+      **/
+      if ($tabs.css('position') !== 'static') return;
+
       const $diffTabs = $('#diff-notes-app');
 
       $tabs.off('affix.bs.affix affix-top.bs.affix')
         .affix({
           offset: {
             top: () => (
-              $diffTabs.offset().top - $tabs.height()
+              $diffTabs.offset().top - $tabs.height() - $fixedNav.height()
             ),
           },
         })
diff --git a/app/assets/javascripts/merge_request_widget.js b/app/assets/javascripts/merge_request_widget.js
deleted file mode 100644
index 6f6ae9bde92..00000000000
--- a/app/assets/javascripts/merge_request_widget.js
+++ /dev/null
@@ -1,305 +0,0 @@
-/* eslint-disable max-len, no-var, func-names, space-before-function-paren, vars-on-top, comma-dangle, no-return-assign, consistent-return, no-param-reassign, one-var, one-var-declaration-per-line, quotes, prefer-template, no-else-return, prefer-arrow-callback, no-unused-vars, no-underscore-dangle, no-shadow, no-mixed-operators, camelcase, default-case, wrap-iife */
-/* global notify */
-/* global notifyPermissions */
-/* global merge_request_widget */
-
-import './smart_interval';
-import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
-
-((global) => {
-  var indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i += 1) { if (i in this && this[i] === item) return i; } return -1; };
-
-  const DEPLOYMENT_TEMPLATE = `<div class="mr-widget-heading" id="<%- id %>">
-       <div class="ci_widget ci-success">
-         <%= ci_success_icon %>
-         <span>
-           Deployed to
-           <a href="<%- url %>" target="_blank" rel="noopener noreferrer" class="environment">
-             <%- name %>
-           </a>
-           <span class="js-environment-timeago" data-toggle="tooltip" data-placement="top" data-title="<%- deployed_at_formatted %>">
-             <%- deployed_at %>
-           </span>
-           <a class="js-environment-link" href="<%- external_url %>" target="_blank" rel="noopener noreferrer">
-             <i class="fa fa-external-link"></i>
-             View on <%- external_url_formatted %>
-           </a>
-         </span>
-         <span class="stop-env-container js-stop-env-link">
-          <a href="<%- stop_url %>" class="close-evn-link" data-method="post" rel="nofollow" data-confirm="Are you sure you want to stop this environment?">
-            <i class="fa fa-stop-circle-o"/>
-            Stop environment
-          </a>
-         </span>
-       </div>
-     </div>`;
-
-  global.MergeRequestWidget = (function() {
-    function MergeRequestWidget(opts) {
-      // Initialize MergeRequestWidget behavior
-      //
-      //   check_enable         - Boolean, whether to check automerge status
-      //   merge_check_url      - String, URL to use to check automerge status
-      //   ci_status_url        - String, URL to use to check CI status
-      //   pipeline_status_url  - String, URL to use to get CI status for Favicon
-      //
-      this.opts = opts;
-      this.opts.pipeline_status_url = `${this.opts.pipeline_status_url}.json`;
-      this.$widgetBody = $('.mr-widget-body');
-      $('#modal_merge_info').modal({
-        show: false
-      });
-      this.clearEventListeners();
-      this.addEventListeners();
-      this.getCIStatus(false);
-      this.retrieveSuccessIcon();
-
-      this.initMiniPipelineGraph();
-
-      this.ciStatusInterval = new global.SmartInterval({
-        callback: this.getCIStatus.bind(this, true),
-        startingInterval: 10000,
-        maxInterval: 30000,
-        hiddenInterval: 120000,
-        incrementByFactorOf: 5000,
-      });
-      this.ciEnvironmentStatusInterval = new global.SmartInterval({
-        callback: this.getCIEnvironmentsStatus.bind(this),
-        startingInterval: 30000,
-        maxInterval: 120000,
-        hiddenInterval: 240000,
-        incrementByFactorOf: 15000,
-        immediateExecution: true,
-      });
-
-      notifyPermissions();
-    }
-
-    MergeRequestWidget.prototype.clearEventListeners = function() {
-      return $(document).off('DOMContentLoaded');
-    };
-
-    MergeRequestWidget.prototype.addEventListeners = function() {
-      var allowedPages;
-      allowedPages = ['show', 'commits', 'pipelines', 'changes'];
-      $(document).on('DOMContentLoaded', (function(_this) {
-        return function() {
-          var page;
-          page = $('body').data('page').split(':').last();
-          if (allowedPages.indexOf(page) === -1) {
-            return _this.clearEventListeners();
-          }
-        };
-      })(this));
-    };
-
-    MergeRequestWidget.prototype.retrieveSuccessIcon = function() {
-      const $ciSuccessIcon = $('.js-success-icon');
-      this.$ciSuccessIcon = $ciSuccessIcon.html();
-      $ciSuccessIcon.remove();
-    };
-
-    MergeRequestWidget.prototype.mergeInProgress = function(deleteSourceBranch) {
-      if (deleteSourceBranch == null) {
-        deleteSourceBranch = false;
-      }
-      return $.ajax({
-        type: 'GET',
-        url: $('.merge-request').data('url'),
-        success: (function(_this) {
-          return function(data) {
-            var callback, urlSuffix;
-            if (data.state === "merged") {
-              urlSuffix = deleteSourceBranch ? '?deleted_source_branch=true' : '';
-              return window.location.href = window.location.pathname + urlSuffix;
-            } else if (data.merge_error) {
-              return $('.mr-widget-body').html("<h4>" + data.merge_error + "</h4>");
-            } else {
-              callback = function() {
-                return merge_request_widget.mergeInProgress(deleteSourceBranch);
-              };
-              return setTimeout(callback, 2000);
-            }
-          };
-        })(this),
-        dataType: 'json'
-      });
-    };
-
-    MergeRequestWidget.prototype.cancelPolling = function () {
-      this.ciStatusInterval.cancel();
-      this.ciEnvironmentStatusInterval.cancel();
-    };
-
-    MergeRequestWidget.prototype.getMergeStatus = function() {
-      return $.get(this.opts.merge_check_url, (data) => {
-        var $html = $(data);
-        this.updateMergeButton(this.status, this.hasCi, $html);
-        $('.mr-widget-body').replaceWith($html.find('.mr-widget-body'));
-        $('.mr-widget-footer').replaceWith($html.find('.mr-widget-footer'));
-      });
-    };
-
-    MergeRequestWidget.prototype.ciLabelForStatus = function(status) {
-      switch (status) {
-        case 'success':
-          return 'passed';
-        case 'success_with_warnings':
-          return 'passed with warnings';
-        default:
-          return status;
-      }
-    };
-
-    MergeRequestWidget.prototype.getCIStatus = function(showNotification) {
-      var _this;
-      _this = this;
-      $('.ci-widget-fetching').show();
-      return $.getJSON(this.opts.ci_status_url, (function(_this) {
-        return function(data) {
-          var message, status, title, callback;
-          _this.status = data.status;
-          _this.hasCi = data.has_ci;
-          _this.updateMergeButton(_this.status, _this.hasCi);
-          gl.utils.setCiStatusFavicon(_this.opts.pipeline_status_url);
-          if (data.environments && data.environments.length) _this.renderEnvironments(data.environments);
-          if (data.status !== _this.opts.ci_status ||
-              data.sha !== _this.opts.ci_sha ||
-              data.pipeline !== _this.opts.ci_pipeline) {
-            _this.opts.ci_status = data.status;
-            _this.showCIStatus(data.status);
-            if (data.coverage) {
-              _this.showCICoverage(data.coverage);
-            }
-            if (data.pipeline) {
-              _this.opts.ci_pipeline = data.pipeline;
-              _this.updatePipelineUrls(data.pipeline);
-            }
-            if (data.sha) {
-              _this.opts.ci_sha = data.sha;
-              _this.updateCommitUrls(data.sha);
-            }
-            if (data.status === "success" || data.status === "failed") {
-              callback = function() {
-                return _this.getMergeStatus();
-              };
-              return setTimeout(callback, 2000);
-            }
-            if (showNotification && data.status) {
-              status = _this.ciLabelForStatus(data.status);
-              if (status === "preparing") {
-                title = _this.opts.ci_title.preparing;
-                status = status.charAt(0).toUpperCase() + status.slice(1);
-                message = _this.opts.ci_message.preparing.replace('{{status}}', status);
-              } else {
-                title = _this.opts.ci_title.normal;
-                message = _this.opts.ci_message.normal.replace('{{status}}', status);
-              }
-              title = title.replace('{{status}}', status);
-              message = message.replace('{{sha}}', data.sha);
-              message = message.replace('{{title}}', data.title);
-              notify(title, message, _this.opts.gitlab_icon, function() {
-                this.close();
-              });
-            }
-          }
-        };
-      })(this));
-    };
-
-    MergeRequestWidget.prototype.getCIEnvironmentsStatus = function() {
-      $.getJSON(this.opts.ci_environments_status_url, (environments) => {
-        if (environments && environments.length) this.renderEnvironments(environments);
-      });
-    };
-
-    MergeRequestWidget.prototype.renderEnvironments = function(environments) {
-      for (let i = 0; i < environments.length; i += 1) {
-        const environment = environments[i];
-        if ($(`.mr-state-widget #${environment.id}`).length) return;
-        const $template = $(DEPLOYMENT_TEMPLATE);
-        if (!environment.external_url || !environment.external_url_formatted) $('.js-environment-link', $template).remove();
-
-        if (!environment.stop_url) {
-          $('.js-stop-env-link', $template).remove();
-        }
-
-        if (environment.deployed_at && environment.deployed_at_formatted) {
-          environment.deployed_at = gl.utils.getTimeago().format(environment.deployed_at, 'gl_en') + '.';
-        } else {
-          $('.js-environment-timeago', $template).remove();
-          environment.name += '.';
-        }
-        environment.ci_success_icon = this.$ciSuccessIcon;
-        const templateString = _.unescape($template[0].outerHTML);
-        const template = _.template(templateString)(environment);
-        this.$widgetBody.before(template);
-      }
-    };
-
-    MergeRequestWidget.prototype.showCIStatus = function(state) {
-      var allowed_states;
-      if (state == null) {
-        return;
-      }
-      $('.ci_widget').hide();
-      $('.ci_widget.ci-' + state).show();
-
-      this.initMiniPipelineGraph();
-    };
-
-    MergeRequestWidget.prototype.showCICoverage = function(coverage) {
-      var text = `Coverage ${coverage}%`;
-      return $('.ci_widget:visible .ci-coverage').text(text);
-    };
-
-    MergeRequestWidget.prototype.updateMergeButton = function(state, hasCi, $html) {
-      const allowed_states = ["failed", "canceled", "running", "pending", "success", "success_with_warnings", "skipped", "not_found"];
-      let stateClass = 'btn-danger';
-      if (!hasCi) {
-        stateClass = 'btn-create';
-      } else if (indexOf.call(allowed_states, state) !== -1) {
-        switch (state) {
-          case "failed":
-          case "canceled":
-          case "not_found":
-            stateClass = 'btn-danger';
-            break;
-          case "running":
-            stateClass = 'btn-info';
-            break;
-          case "success":
-          case "success_with_warnings":
-            stateClass = 'btn-create';
-        }
-      } else {
-        $('.ci_widget.ci-error').show();
-        stateClass = 'btn-danger';
-      }
-
-      this.setMergeButtonClass(stateClass, $html);
-    };
-
-    MergeRequestWidget.prototype.setMergeButtonClass = function(css_class, $html = $('.mr-state-widget')) {
-      return $html.find('.js-merge-button').removeClass('btn-danger btn-info btn-create').addClass(css_class);
-    };
-
-    MergeRequestWidget.prototype.updatePipelineUrls = function(id) {
-      const pipelineUrl = this.opts.pipeline_path;
-      $('.pipeline').text(`#${id}`).attr('href', [pipelineUrl, id].join('/'));
-    };
-
-    MergeRequestWidget.prototype.updateCommitUrls = function(id) {
-      const commitsUrl = this.opts.commits_path;
-      $('.js-commit-link').text(id).attr('href', [commitsUrl, id].join('/'));
-    };
-
-    MergeRequestWidget.prototype.initMiniPipelineGraph = function() {
-      new MiniPipelineGraph({
-        container: '.js-pipeline-inline-mr-widget-graph:visible',
-      }).bindEvents();
-    };
-
-    return MergeRequestWidget;
-  })();
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 11e68c0a3be..9d481d7c003 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -18,12 +18,11 @@
       }
 
       $els.each(function(i, dropdown) {
-        var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, showAny, showNo, showUpcoming, showStarted, useId, showMenuAbove;
+        var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, defaultNo, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, selectedMilestoneDefault, showAny, showNo, showUpcoming, showStarted, useId, showMenuAbove;
         $dropdown = $(dropdown);
         projectId = $dropdown.data('project-id');
         milestonesUrl = $dropdown.data('milestones');
         issueUpdateURL = $dropdown.data('issueUpdate');
-        selectedMilestone = $dropdown.data('selected');
         showNo = $dropdown.data('show-no');
         showAny = $dropdown.data('show-any');
         showMenuAbove = $dropdown.data('showMenuAbove');
@@ -31,6 +30,7 @@
         showStarted = $dropdown.data('show-started');
         useId = $dropdown.data('use-id');
         defaultLabel = $dropdown.data('default-label');
+        defaultNo = $dropdown.data('default-no');
         issuableId = $dropdown.data('issuable-id');
         abilityName = $dropdown.data('ability-name');
         $selectbox = $dropdown.closest('.selectbox');
@@ -38,6 +38,9 @@
         $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
         $value = $block.find('.value');
         $loading = $block.find('.block-loading').fadeOut();
+        selectedMilestoneDefault = (showAny ? '' : null);
+        selectedMilestoneDefault = (showNo && defaultNo ? 'No Milestone' : selectedMilestoneDefault);
+        selectedMilestone = $dropdown.data('selected') || selectedMilestoneDefault;
         if (issueUpdateURL) {
           milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
           milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
@@ -86,8 +89,18 @@
               if (showMenuAbove) {
                 $dropdown.data('glDropdown').positionMenuAbove();
               }
+              $(`[data-milestone-id="${selectedMilestone}"] > a`).addClass('is-active');
             });
           },
+          renderRow: function(milestone) {
+            return `
+              <li data-milestone-id="${milestone.name}">
+                <a href='#' class='dropdown-menu-milestone-link'>
+                  ${_.escape(milestone.title)}
+                </a>
+              </li>
+            `;
+          },
           filterable: true,
           search: {
             fields: ['title']
@@ -120,15 +133,24 @@
             // display:block overrides the hide-collapse rule
             return $value.css('display', '');
           },
+          opened: function(e) {
+            const $el = $(e.currentTarget);
+            if ($dropdown.hasClass('js-issue-board-sidebar')) {
+              selectedMilestone = $dropdown[0].dataset.selected || selectedMilestoneDefault;
+            }
+            $('a.is-active', $el).removeClass('is-active');
+            $(`[data-milestone-id="${selectedMilestone}"] > a`, $el).addClass('is-active');
+          },
           vue: $dropdown.hasClass('js-issue-board-sidebar'),
           clicked: function(options) {
             const { $el, e } = options;
             let selected = options.selectedObj;
-
-            var data, isIssueIndex, isMRIndex, page, boardsStore;
+            var data, isIssueIndex, isMRIndex, isSelecting, page, boardsStore;
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';
             isMRIndex = (page === page && page === 'projects:merge_requests:index');
+            isSelecting = (selected.name !== selectedMilestone);
+            selectedMilestone = isSelecting ? selected.name : selectedMilestoneDefault;
             if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
               e.preventDefault();
               return;
@@ -142,16 +164,11 @@
               boardsStore[$dropdown.data('field-name')] = selected.name;
               e.preventDefault();
             } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
-              if (selected.name != null) {
-                selectedMilestone = selected.name;
-              } else {
-                selectedMilestone = '';
-              }
               return Issuable.filterResults($dropdown.closest('form'));
             } else if ($dropdown.hasClass('js-filter-submit')) {
               return $dropdown.closest('form').submit();
             } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-              if (selected.id !== -1) {
+              if (selected.id !== -1 && isSelecting) {
                 gl.issueBoards.boardStoreIssueSet('milestone', new ListMilestone({
                   id: selected.id,
                   title: selected.name
diff --git a/app/assets/javascripts/namespace_select.js b/app/assets/javascripts/namespace_select.js
index 36bc1257cef..5da2db063a4 100644
--- a/app/assets/javascripts/namespace_select.js
+++ b/app/assets/javascripts/namespace_select.js
@@ -1,12 +1,10 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, vars-on-top, one-var-declaration-per-line, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, prefer-arrow-callback, no-param-reassign, no-cond-assign, max-len */
-/* global Api */
+import Api from './api';
 
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   window.NamespaceSelect = (function() {
     function NamespaceSelect(opts) {
-      this.onSelectItem = bind(this.onSelectItem, this);
+      this.onSelectItem = this.onSelectItem.bind(this);
       var fieldName, showAny;
       this.dropdown = opts.dropdown;
       showAny = true;
diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index 4903875dfa0..39fb302b644 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -2,12 +2,9 @@
 import RefSelectDropdown from '~/ref_select_dropdown';
 
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
-    indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i += 1) { if (i in this && this[i] === item) return i; } return -1; };
-
   this.NewBranchForm = (function() {
     function NewBranchForm(form, availableRefs) {
-      this.validate = bind(this.validate, this);
+      this.validate = this.validate.bind(this);
       this.branchNameError = form.find('.js-branch-name-error');
       this.name = form.find('.js-branch-name');
       this.ref = form.find('#ref');
@@ -54,6 +51,8 @@ import RefSelectDropdown from '~/ref_select_dropdown';
 
     NewBranchForm.prototype.validate = function() {
       var errorMessage, errors, formatter, unique, validator;
+      const indexOf = [].indexOf;
+
       this.branchNameError.empty();
       unique = function(values, value) {
         if (indexOf.call(values, value) === -1) {
diff --git a/app/assets/javascripts/new_commit_form.js b/app/assets/javascripts/new_commit_form.js
index ad36f08840d..658879607e2 100644
--- a/app/assets/javascripts/new_commit_form.js
+++ b/app/assets/javascripts/new_commit_form.js
@@ -1,12 +1,10 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-return-assign, max-len */
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.NewCommitForm = (function() {
     function NewCommitForm(form, targetBranchName = 'target_branch') {
       this.form = form;
       this.targetBranchName = targetBranchName;
-      this.renderDestination = bind(this.renderDestination, this);
+      this.renderDestination = this.renderDestination.bind(this);
       this.targetBranchDropdown = form.find('button.js-target-branch');
       this.originalBranch = form.find('.js-original-branch');
       this.createMergeRequest = form.find('.js-create-merge-request');
diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue
index 3e8240d10ec..814d2ea92b4 100644
--- a/app/assets/javascripts/notebook/cells/markdown.vue
+++ b/app/assets/javascripts/notebook/cells/markdown.vue
@@ -30,7 +30,7 @@
     |
     \\s\\$(?!\\$)
   )
-    (.+?)
+    ((.|\\n)+?)
   (
     \\s\\\\end{[a-zA-Z]+}$
     |
@@ -45,15 +45,25 @@
     let inline = false;
 
     if (typeof katex !== 'undefined') {
-      const katexString = text.replace(/\\/g, '\\');
-      const matches = new RegExp(katexRegexString, 'gi').exec(katexString);
+      const katexString = text.replace(/&amp;/g, '&')
+        .replace(/&=&/g, '\\space=\\space')
+        .replace(/<(\/?)em>/g, '_');
+      const regex = new RegExp(katexRegexString, 'gi');
+      const matchLocation = katexString.search(regex);
+      const numberOfMatches = katexString.match(regex);
 
-      if (matches && matches.length > 0) {
-        if (matches[1].trim() === '$' && matches[3].trim() === '$') {
+      if (numberOfMatches && numberOfMatches.length !== 0) {
+        if (matchLocation > 0) {
+          let matches = regex.exec(katexString);
           inline = true;
 
-          text = `${katexString.replace(matches[0], '')} ${katex.renderToString(matches[2])}`;
+          while (matches !== null) {
+            const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, ''));
+            text = `${text.replace(matches[0], ` ${renderedKatex}`)}`;
+            matches = regex.exec(katexString);
+          }
         } else {
+          const matches = regex.exec(katexString);
           text = katex.renderToString(matches[2]);
         }
       }
@@ -79,7 +89,7 @@
     },
     computed: {
       markdown() {
-        return marked(this.cell.source.join(''));
+        return marked(this.cell.source.join('').replace(/\\/g, '\\\\'));
       },
     },
   };
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 8ff25c10157..8bdbbe6612f 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1,4 +1,10 @@
-/* eslint-disable no-restricted-properties, func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, camelcase, no-unused-expressions, quotes, max-len, one-var, one-var-declaration-per-line, default-case, prefer-template, consistent-return, no-alert, no-return-assign, no-param-reassign, prefer-arrow-callback, no-else-return, comma-dangle, no-new, brace-style, no-lonely-if, vars-on-top, no-unused-vars, no-sequences, no-shadow, newline-per-chained-call, no-useless-escape */
+/* eslint-disable no-restricted-properties, func-names, space-before-function-paren,
+no-var, prefer-rest-params, wrap-iife, no-use-before-define, camelcase,
+no-unused-expressions, quotes, max-len, one-var, one-var-declaration-per-line,
+default-case, prefer-template, consistent-return, no-alert, no-return-assign,
+no-param-reassign, prefer-arrow-callback, no-else-return, comma-dangle, no-new,
+brace-style, no-lonely-if, vars-on-top, no-unused-vars, no-sequences, no-shadow,
+newline-per-chained-call, no-useless-escape */
 /* global Flash */
 /* global Autosave */
 /* global ResolveService */
@@ -6,31 +12,31 @@
 
 import $ from 'jquery';
 import Cookies from 'js-cookie';
+import autosize from 'vendor/autosize';
+import Dropzone from 'dropzone';
+import 'vendor/jquery.caret'; // required by jquery.atwho
+import 'vendor/jquery.atwho';
+import AjaxCache from '~/lib/utils/ajax_cache';
 import CommentTypeToggle from './comment_type_toggle';
+import './autosave';
+import './dropzone_input';
+import './task_list';
 
-require('./autosave');
-window.autosize = require('vendor/autosize');
-window.Dropzone = require('dropzone');
-require('./dropzone_input');
-require('./gfm_auto_complete');
-require('vendor/jquery.caret'); // required by jquery.atwho
-require('vendor/jquery.atwho');
-require('./task_list');
+window.autosize = autosize;
+window.Dropzone = Dropzone;
 
 const normalizeNewlines = function(str) {
   return str.replace(/\r\n/g, '\n');
 };
 
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.Notes = (function() {
     const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
     const REGEX_SLASH_COMMANDS = /^\/\w+.*$/gm;
 
     Notes.interval = null;
 
-    function Notes(notes_url, note_ids, last_fetched_at, view) {
+    function Notes(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
       this.updateTargetButtons = this.updateTargetButtons.bind(this);
       this.updateComment = this.updateComment.bind(this);
       this.visibilityChange = this.visibilityChange.bind(this);
@@ -49,14 +55,16 @@ const normalizeNewlines = function(str) {
       this.keydownNoteText = this.keydownNoteText.bind(this);
       this.toggleCommitList = this.toggleCommitList.bind(this);
       this.postComment = this.postComment.bind(this);
+      this.clearFlashWrapper = this.clearFlash.bind(this);
 
       this.notes_url = notes_url;
       this.note_ids = note_ids;
+      this.enableGFM = enableGFM;
       // Used to keep track of updated notes while people are editing things
       this.updatedNotesTrackingMap = {};
       this.last_fetched_at = last_fetched_at;
       this.noteable_url = document.URL;
-      this.notesCountBadge || (this.notesCountBadge = $(".issuable-details").find(".notes-tab .badge"));
+      this.notesCountBadge || (this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge'));
       this.basePollingInterval = 15000;
       this.maxPollingSteps = 4;
 
@@ -85,61 +93,61 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.addBinding = function() {
       // Edit note link
-      $(document).on("click", ".js-note-edit", this.showEditForm.bind(this));
-      $(document).on("click", ".note-edit-cancel", this.cancelEdit);
+      $(document).on('click', '.js-note-edit', this.showEditForm.bind(this));
+      $(document).on('click', '.note-edit-cancel', this.cancelEdit);
       // Reopen and close actions for Issue/MR combined with note form submit
-      $(document).on("click", ".js-comment-submit-button", this.postComment);
-      $(document).on("click", ".js-comment-save-button", this.updateComment);
-      $(document).on("keyup input", ".js-note-text", this.updateTargetButtons);
+      $(document).on('click', '.js-comment-submit-button', this.postComment);
+      $(document).on('click', '.js-comment-save-button', this.updateComment);
+      $(document).on('keyup input', '.js-note-text', this.updateTargetButtons);
       // resolve a discussion
       $(document).on('click', '.js-comment-resolve-button', this.postComment);
       // remove a note (in general)
-      $(document).on("click", ".js-note-delete", this.removeNote);
+      $(document).on('click', '.js-note-delete', this.removeNote);
       // delete note attachment
-      $(document).on("click", ".js-note-attachment-delete", this.removeAttachment);
+      $(document).on('click', '.js-note-attachment-delete', this.removeAttachment);
       // reset main target form when clicking discard
-      $(document).on("click", ".js-note-discard", this.resetMainTargetForm);
+      $(document).on('click', '.js-note-discard', this.resetMainTargetForm);
       // update the file name when an attachment is selected
-      $(document).on("change", ".js-note-attachment-input", this.updateFormAttachment);
+      $(document).on('change', '.js-note-attachment-input', this.updateFormAttachment);
       // reply to diff/discussion notes
-      $(document).on("click", ".js-discussion-reply-button", this.onReplyToDiscussionNote);
+      $(document).on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
       // add diff note
-      $(document).on("click", ".js-add-diff-note-button", this.onAddDiffNote);
+      $(document).on('click', '.js-add-diff-note-button', this.onAddDiffNote);
       // hide diff note form
-      $(document).on("click", ".js-close-discussion-note-form", this.cancelDiscussionForm);
+      $(document).on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm);
       // toggle commit list
-      $(document).on("click", '.system-note-commit-list-toggler', this.toggleCommitList);
+      $(document).on('click', '.system-note-commit-list-toggler', this.toggleCommitList);
       // fetch notes when tab becomes visible
-      $(document).on("visibilitychange", this.visibilityChange);
+      $(document).on('visibilitychange', this.visibilityChange);
       // when issue status changes, we need to refresh data
-      $(document).on("issuable:change", this.refresh);
+      $(document).on('issuable:change', this.refresh);
       // ajax:events that happen on Form when actions like Reopen, Close are performed on Issues and MRs.
-      $(document).on("ajax:success", ".js-main-target-form", this.addNote);
-      $(document).on("ajax:success", ".js-discussion-note-form", this.addDiscussionNote);
-      $(document).on("ajax:success", ".js-main-target-form", this.resetMainTargetForm);
-      $(document).on("ajax:complete", ".js-main-target-form", this.reenableTargetFormSubmitButton);
+      $(document).on('ajax:success', '.js-main-target-form', this.addNote);
+      $(document).on('ajax:success', '.js-discussion-note-form', this.addDiscussionNote);
+      $(document).on('ajax:success', '.js-main-target-form', this.resetMainTargetForm);
+      $(document).on('ajax:complete', '.js-main-target-form', this.reenableTargetFormSubmitButton);
       // when a key is clicked on the notes
-      return $(document).on("keydown", ".js-note-text", this.keydownNoteText);
+      return $(document).on('keydown', '.js-note-text', this.keydownNoteText);
     };
 
     Notes.prototype.cleanBinding = function() {
-      $(document).off("click", ".js-note-edit");
-      $(document).off("click", ".note-edit-cancel");
-      $(document).off("click", ".js-note-delete");
-      $(document).off("click", ".js-note-attachment-delete");
-      $(document).off("click", ".js-discussion-reply-button");
-      $(document).off("click", ".js-add-diff-note-button");
-      $(document).off("visibilitychange");
-      $(document).off("keyup input", ".js-note-text");
-      $(document).off("click", ".js-note-target-reopen");
-      $(document).off("click", ".js-note-target-close");
-      $(document).off("click", ".js-note-discard");
-      $(document).off("keydown", ".js-note-text");
+      $(document).off('click', '.js-note-edit');
+      $(document).off('click', '.note-edit-cancel');
+      $(document).off('click', '.js-note-delete');
+      $(document).off('click', '.js-note-attachment-delete');
+      $(document).off('click', '.js-discussion-reply-button');
+      $(document).off('click', '.js-add-diff-note-button');
+      $(document).off('visibilitychange');
+      $(document).off('keyup input', '.js-note-text');
+      $(document).off('click', '.js-note-target-reopen');
+      $(document).off('click', '.js-note-target-close');
+      $(document).off('click', '.js-note-discard');
+      $(document).off('keydown', '.js-note-text');
       $(document).off('click', '.js-comment-resolve-button');
-      $(document).off("click", '.system-note-commit-list-toggler');
-      $(document).off("ajax:success", ".js-main-target-form");
-      $(document).off("ajax:success", ".js-discussion-note-form");
-      $(document).off("ajax:complete", ".js-main-target-form");
+      $(document).off('click', '.system-note-commit-list-toggler');
+      $(document).off('ajax:success', '.js-main-target-form');
+      $(document).off('ajax:success', '.js-discussion-note-form');
+      $(document).off('ajax:complete', '.js-main-target-form');
     };
 
     Notes.initCommentTypeToggle = function (form) {
@@ -175,7 +183,7 @@ const normalizeNewlines = function(str) {
           if ($textarea.val() !== '') {
             return;
           }
-          myLastNote = $("li.note[data-author-id='" + gon.current_user_id + "'][data-editable]:last");
+          myLastNote = $(`li.note[data-author-id='${gon.current_user_id}'][data-editable]:last`, $textarea.closest('.note, #notes'));
           if (myLastNote.length) {
             myLastNoteEditBtn = myLastNote.find('.js-note-edit');
             return myLastNoteEditBtn.trigger('click', [true, myLastNote]);
@@ -229,8 +237,8 @@ const normalizeNewlines = function(str) {
       this.refreshing = true;
       return $.ajax({
         url: this.notes_url,
-        headers: { "X-Last-Fetched-At": this.last_fetched_at },
-        dataType: "json",
+        headers: { 'X-Last-Fetched-At': this.last_fetched_at },
+        dataType: 'json',
         success: (function(_this) {
           return function(data) {
             var notes;
@@ -301,13 +309,13 @@ const normalizeNewlines = function(str) {
      */
 
     Notes.prototype.renderNote = function(noteEntity, $form, $notesList = $('.main-notes-list')) {
-      if (noteEntity.discussion_html != null) {
+      if (noteEntity.discussion_html) {
         return this.renderDiscussionNote(noteEntity, $form);
       }
 
       if (!noteEntity.valid) {
         if (noteEntity.errors.commands_only) {
-          new Flash(noteEntity.errors.commands_only, 'notice', this.parentTimeline);
+          this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline);
           this.refresh();
         }
         return;
@@ -317,6 +325,9 @@ const normalizeNewlines = function(str) {
       if (Notes.isNewNote(noteEntity, this.note_ids)) {
         this.note_ids.push(noteEntity.id);
 
+        if ($notesList.length) {
+          $notesList.find('.system-note.being-posted').remove();
+        }
         const $newNote = Notes.animateAppendNote(noteEntity.html, $notesList);
 
         this.setupNewNote($newNote);
@@ -366,8 +377,8 @@ const normalizeNewlines = function(str) {
         return;
       }
       this.note_ids.push(noteEntity.id);
-      form = $form || $(".js-discussion-note-form[data-discussion-id='" + noteEntity.discussion_id + "']");
-      row = form.closest("tr");
+      form = $form || $(`.js-discussion-note-form[data-discussion-id="${noteEntity.discussion_id}"]`);
+      row = form.closest('tr');
       lineType = this.isParallelView() ? form.find('#line_type').val() : 'old';
       diffAvatarContainer = row.prevAll('.line_holder').first().find('.js-avatar-container.' + lineType + '_line');
       // is this the first note of discussion?
@@ -384,7 +395,7 @@ const normalizeNewlines = function(str) {
             row.after($discussion);
           } else {
             // Merge new discussion HTML in
-            var $notes = $discussion.find('.notes[data-discussion-id="' + noteEntity.discussion_id + '"]');
+            var $notes = $discussion.find(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
             var contentContainerClass = '.' + $notes.closest('.notes_content')
               .attr('class')
               .split(' ')
@@ -395,7 +406,7 @@ const normalizeNewlines = function(str) {
         }
         // Init discussion on 'Discussion' page if it is merge request page
         const page = $('body').attr('data-page');
-        if ((page && page.indexOf('projects:merge_request') === 0) || !noteEntity.diff_discussion_html) {
+        if ((page && page.indexOf('projects:merge_request') !== -1) || !noteEntity.diff_discussion_html) {
           Notes.animateAppendNote(noteEntity.discussion_html, $('.main-notes-list'));
         }
       } else {
@@ -448,13 +459,13 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.resetMainTargetForm = function(e) {
       var form;
-      form = $(".js-main-target-form");
+      form = $('.js-main-target-form');
       // remove validation errors
-      form.find(".js-errors").remove();
+      form.find('.js-errors').remove();
       // reset text and preview
-      form.find(".js-md-write-button").click();
-      form.find(".js-note-text").val("").trigger("input");
-      form.find(".js-note-text").data("autosave").reset();
+      form.find('.js-md-write-button').click();
+      form.find('.js-note-text').val('').trigger('input');
+      form.find('.js-note-text').data('autosave').reset();
 
       var event = document.createEvent('Event');
       event.initEvent('autosize:update', true, false);
@@ -465,8 +476,8 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.reenableTargetFormSubmitButton = function() {
       var form;
-      form = $(".js-main-target-form");
-      return form.find(".js-note-text").trigger("input");
+      form = $('.js-main-target-form');
+      return form.find('.js-note-text').trigger('input');
     };
 
     /*
@@ -478,18 +489,18 @@ const normalizeNewlines = function(str) {
     Notes.prototype.setupMainTargetNoteForm = function() {
       var form;
       // find the form
-      form = $(".js-new-note-form");
+      form = $('.js-new-note-form');
       // Set a global clone of the form for later cloning
       this.formClone = form.clone();
       // show the form
       this.setupNoteForm(form);
       // fix classes
-      form.removeClass("js-new-note-form");
-      form.addClass("js-main-target-form");
-      form.find("#note_line_code").remove();
-      form.find("#note_position").remove();
-      form.find("#note_type").val('');
-      form.find("#in_reply_to_discussion_id").remove();
+      form.removeClass('js-new-note-form');
+      form.addClass('js-main-target-form');
+      form.find('#note_line_code').remove();
+      form.find('#note_position').remove();
+      form.find('#note_type').val('');
+      form.find('#in_reply_to_discussion_id').remove();
       form.find('.js-comment-resolve-button').closest('comment-and-resolve-btn').remove();
       this.parentTimeline = form.parents('.timeline');
 
@@ -509,21 +520,21 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.setupNoteForm = function(form) {
       var textarea, key;
-      new gl.GLForm(form);
-      textarea = form.find(".js-note-text");
+      new gl.GLForm(form, this.enableGFM);
+      textarea = form.find('.js-note-text');
       key = [
-        "Note",
-        form.find("#note_noteable_type").val(),
-        form.find("#note_noteable_id").val(),
-        form.find("#note_commit_id").val(),
-        form.find("#note_type").val(),
-        form.find("#in_reply_to_discussion_id").val(),
+        'Note',
+        form.find('#note_noteable_type').val(),
+        form.find('#note_noteable_id').val(),
+        form.find('#note_commit_id').val(),
+        form.find('#note_type').val(),
+        form.find('#in_reply_to_discussion_id').val(),
 
         // LegacyDiffNote
-        form.find("#note_line_code").val(),
+        form.find('#note_line_code').val(),
 
         // DiffNote
-        form.find("#note_position").val()
+        form.find('#note_position').val()
       ];
       return new Autosave(textarea, key);
     };
@@ -538,14 +549,14 @@ const normalizeNewlines = function(str) {
       return this.renderNote(note);
     };
 
-    Notes.prototype.addNoteError = ($form) => {
+    Notes.prototype.addNoteError = function($form) {
       let formParentTimeline;
       if ($form.hasClass('js-main-target-form')) {
         formParentTimeline = $form.parents('.timeline');
       } else if ($form.hasClass('js-discussion-note-form')) {
         formParentTimeline = $form.closest('.discussion-notes').find('.notes');
       }
-      return new Flash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline);
+      return this.addFlash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline);
     };
 
     Notes.prototype.updateNoteError = $parentTimeline => new Flash('Your comment could not be updated! Please check your network connection and try again.');
@@ -668,7 +679,8 @@ const normalizeNewlines = function(str) {
         const $newNote = $(this.updatedNotesTrackingMap[noteId].html);
         $note.replaceWith($newNote);
         this.setupNewNote($newNote);
-        this.updatedNotesTrackingMap[noteId] = null;
+        // Now that we have taken care of the update, clear it out
+        delete this.updatedNotesTrackingMap[noteId];
       }
       else {
         $note.find('.js-finish-edit-warning').hide();
@@ -720,14 +732,14 @@ const normalizeNewlines = function(str) {
       lineHolder = $(e.currentTarget).closest('.notes[data-discussion-id]')
         .closest('.notes_holder')
         .prev('.line_holder');
-      $(".note[id='" + noteElId + "']").each((function(_this) {
+      $(`.note[id="${noteElId}"]`).each((function(_this) {
         // A same note appears in the "Discussion" and in the "Changes" tab, we have
-        // to remove all. Using $(".note[id='noteId']") ensure we get all the notes,
-        // where $("#noteId") would return only one.
+        // to remove all. Using $('.note[id='noteId']') ensure we get all the notes,
+        // where $('#noteId') would return only one.
         return function(i, el) {
           var $note, $notes;
           $note = $(el);
-          $notes = $note.closest(".discussion-notes");
+          $notes = $note.closest('.discussion-notes');
 
           if (typeof gl.diffNotesCompileComponents !== 'undefined') {
             if (gl.diffNoteApps[noteElId]) {
@@ -738,11 +750,11 @@ const normalizeNewlines = function(str) {
           $note.remove();
 
           // check if this is the last note for this line
-          if ($notes.find(".note").length === 0) {
-            var notesTr = $notes.closest("tr");
+          if ($notes.find('.note').length === 0) {
+            var notesTr = $notes.closest('tr');
 
             // "Discussions" tab
-            $notes.closest(".timeline-entry").remove();
+            $notes.closest('.timeline-entry').remove();
 
             // The notes tr can contain multiple lists of notes, like on the parallel diff
             if (notesTr.find('.discussion-notes').length > 1) {
@@ -766,11 +778,11 @@ const normalizeNewlines = function(str) {
      */
 
     Notes.prototype.removeAttachment = function() {
-      const $note = $(this).closest(".note");
-      $note.find(".note-attachment").remove();
-      $note.find(".note-body > .note-text").show();
-      $note.find(".note-header").show();
-      return $note.find(".current-note-edit-form").remove();
+      const $note = $(this).closest('.note');
+      $note.find('.note-attachment').remove();
+      $note.find('.note-body > .note-text').show();
+      $note.find('.note-header').show();
+      return $note.find('.current-note-edit-form').remove();
     };
 
     /*
@@ -786,7 +798,7 @@ const normalizeNewlines = function(str) {
     Notes.prototype.replyToDiscussionNote = function(target) {
       var form, replyLink;
       form = this.cleanForm(this.formClone.clone());
-      replyLink = $(target).closest(".js-discussion-reply-button");
+      replyLink = $(target).closest('.js-discussion-reply-button');
       // insert the form after the button
       replyLink
         .closest('.discussion-reply-holder')
@@ -806,26 +818,26 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.setupDiscussionNoteForm = function(dataHolder, form) {
       // setup note target
-      var discussionID = dataHolder.data("discussionId");
+      var discussionID = dataHolder.data('discussionId');
 
       if (discussionID) {
-        form.attr("data-discussion-id", discussionID);
-        form.find("#in_reply_to_discussion_id").val(discussionID);
+        form.attr('data-discussion-id', discussionID);
+        form.find('#in_reply_to_discussion_id').val(discussionID);
       }
 
-      form.attr("data-line-code", dataHolder.data("lineCode"));
-      form.find("#line_type").val(dataHolder.data("lineType"));
+      form.attr('data-line-code', dataHolder.data('lineCode'));
+      form.find('#line_type').val(dataHolder.data('lineType'));
 
-      form.find("#note_noteable_type").val(dataHolder.data("noteableType"));
-      form.find("#note_noteable_id").val(dataHolder.data("noteableId"));
-      form.find("#note_commit_id").val(dataHolder.data("commitId"));
-      form.find("#note_type").val(dataHolder.data("noteType"));
+      form.find('#note_noteable_type').val(dataHolder.data('noteableType'));
+      form.find('#note_noteable_id').val(dataHolder.data('noteableId'));
+      form.find('#note_commit_id').val(dataHolder.data('commitId'));
+      form.find('#note_type').val(dataHolder.data('noteType'));
 
       // LegacyDiffNote
-      form.find("#note_line_code").val(dataHolder.data("lineCode"));
+      form.find('#note_line_code').val(dataHolder.data('lineCode'));
 
       // DiffNote
-      form.find("#note_position").val(dataHolder.attr("data-position"));
+      form.find('#note_position').val(dataHolder.attr('data-position'));
 
       form.find('.js-note-discard').show().removeClass('js-note-discard').addClass('js-close-discussion-note-form').text(form.find('.js-close-discussion-note-form').data('cancel-text'));
       form.find('.js-note-target-close').remove();
@@ -834,7 +846,7 @@ const normalizeNewlines = function(str) {
 
       form
         .removeClass('js-main-target-form')
-        .addClass("discussion-form js-discussion-note-form");
+        .addClass('discussion-form js-discussion-note-form');
 
       if (typeof gl.diffNotesCompileComponents !== 'undefined') {
         var $commentBtn = form.find('comment-and-resolve-btn');
@@ -843,7 +855,7 @@ const normalizeNewlines = function(str) {
         gl.diffNotesCompileComponents();
       }
 
-      form.find(".js-note-text").focus();
+      form.find('.js-note-text').focus();
       form
         .find('.js-comment-resolve-button')
         .attr('data-discussion-id', discussionID);
@@ -876,21 +888,21 @@ const normalizeNewlines = function(str) {
     }) {
       var $link, addForm, hasNotes, newForm, noteForm, replyButton, row, rowCssToAdd, targetContent, isDiffCommentAvatar;
       $link = $(target);
-      row = $link.closest("tr");
+      row = $link.closest('tr');
       const nextRow = row.next();
       let targetRow = row;
       if (nextRow.is('.notes_holder')) {
         targetRow = nextRow;
       }
 
-      hasNotes = targetRow.is(".notes_holder");
+      hasNotes = nextRow.is('.notes_holder');
       addForm = false;
       let lineTypeSelector = '';
-      rowCssToAdd = "<tr class=\"notes_holder js-temp-notes-holder\"><td class=\"notes_line\" colspan=\"2\"></td><td class=\"notes_content\"><div class=\"content\"></div></td></tr>";
+      rowCssToAdd = '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"><div class="content"></div></td></tr>';
       // In parallel view, look inside the correct left/right pane
       if (this.isParallelView()) {
         lineTypeSelector = `.${lineType}`;
-        rowCssToAdd = "<tr class=\"notes_holder js-temp-notes-holder\"><td class=\"notes_line old\"></td><td class=\"notes_content parallel old\"><div class=\"content\"></div></td><td class=\"notes_line new\"></td><td class=\"notes_content parallel new\"><div class=\"content\"></div></td></tr>";
+        rowCssToAdd = '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content"></div></td></tr>';
       }
       const notesContentSelector = `.notes_content${lineTypeSelector} .content`;
       let notesContent = targetRow.find(notesContentSelector);
@@ -900,12 +912,12 @@ const normalizeNewlines = function(str) {
         notesContent = targetRow.find(notesContentSelector);
         if (notesContent.length) {
           notesContent.show();
-          replyButton = notesContent.find(".js-discussion-reply-button:visible");
+          replyButton = notesContent.find('.js-discussion-reply-button:visible');
           if (replyButton.length) {
             this.replyToDiscussionNote(replyButton[0]);
           } else {
             // In parallel view, the form may not be present in one of the panes
-            noteForm = notesContent.find(".js-discussion-note-form");
+            noteForm = notesContent.find('.js-discussion-note-form');
             if (noteForm.length === 0) {
               addForm = true;
             }
@@ -943,15 +955,15 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.removeDiscussionNoteForm = function(form) {
       var glForm, row;
-      row = form.closest("tr");
+      row = form.closest('tr');
       glForm = form.data('gl-form');
       glForm.destroy();
-      form.find(".js-note-text").data("autosave").reset();
+      form.find('.js-note-text').data('autosave').reset();
       // show the reply button (will only work for replies)
       form
         .prev('.discussion-reply-holder')
         .show();
-      if (row.is(".js-temp-notes-holder")) {
+      if (row.is('.js-temp-notes-holder')) {
         // remove temporary row for diff lines
         return row.remove();
       } else {
@@ -963,7 +975,7 @@ const normalizeNewlines = function(str) {
     Notes.prototype.cancelDiscussionForm = function(e) {
       var form;
       e.preventDefault();
-      form = $(e.target).closest(".js-discussion-note-form");
+      form = $(e.target).closest('.js-discussion-note-form');
       return this.removeDiscussionNoteForm(form);
     };
 
@@ -975,10 +987,10 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.updateFormAttachment = function() {
       var filename, form;
-      form = $(this).closest("form");
+      form = $(this).closest('form');
       // get only the basename
-      filename = $(this).val().replace(/^.*[\\\/]/, "");
-      return form.find(".js-attachment-filename").text(filename);
+      filename = $(this).val().replace(/^.*[\\\/]/, '');
+      return form.find('.js-attachment-filename').text(filename);
     };
 
     /*
@@ -1108,6 +1120,17 @@ const normalizeNewlines = function(str) {
       });
     };
 
+    Notes.prototype.addFlash = function(...flashParams) {
+      this.flashInstance = new Flash(...flashParams);
+    };
+
+    Notes.prototype.clearFlash = function() {
+      if (this.flashInstance && this.flashInstance.flashContainer) {
+        this.flashInstance.flashContainer.hide();
+        this.flashInstance = null;
+      }
+    };
+
     Notes.prototype.cleanForm = function($form) {
       // Remove JS classes that are not needed here
       $form
@@ -1169,7 +1192,7 @@ const normalizeNewlines = function(str) {
     Notes.prototype.getFormData = function($form) {
       return {
         formData: $form.serialize(),
-        formContent: $form.find('.js-note-text').val(),
+        formContent: _.escape($form.find('.js-note-text').val()),
         formAction: $form.attr('action'),
       };
     };
@@ -1189,19 +1212,47 @@ const normalizeNewlines = function(str) {
     };
 
     /**
+     * Gets appropriate description from slash commands found in provided `formContent`
+     */
+    Notes.prototype.getSlashCommandDescription = function (formContent, availableSlashCommands = []) {
+      let tempFormContent;
+
+      // Identify executed slash commands from `formContent`
+      const executedCommands = availableSlashCommands.filter((command, index) => {
+        const commandRegex = new RegExp(`/${command.name}`);
+        return commandRegex.test(formContent);
+      });
+
+      if (executedCommands && executedCommands.length) {
+        if (executedCommands.length > 1) {
+          tempFormContent = 'Applying multiple commands';
+        } else {
+          const commandDescription = executedCommands[0].description.toLowerCase();
+          tempFormContent = `Applying command to ${commandDescription}`;
+        }
+      } else {
+        tempFormContent = 'Applying command';
+      }
+
+      return tempFormContent;
+    };
+
+    /**
      * Create placeholder note DOM element populated with comment body
      * that we will show while comment is being posted.
      * Once comment is _actually_ posted on server, we will have final element
      * in response that we will show in place of this temporary element.
      */
-    Notes.prototype.createPlaceholderNote = function({ formContent, uniqueId, isDiscussionNote, currentUsername, currentUserFullname }) {
+    Notes.prototype.createPlaceholderNote = function ({ formContent, uniqueId, isDiscussionNote, currentUsername, currentUserFullname, currentUserAvatar }) {
       const discussionClass = isDiscussionNote ? 'discussion' : '';
       const escapedFormContent = _.escape(formContent);
       const $tempNote = $(
         `<li id="${uniqueId}" class="note being-posted fade-in-half timeline-entry">
            <div class="timeline-entry-inner">
               <div class="timeline-icon">
-                 <a href="/${currentUsername}"><span class="dummy-avatar"></span></a>
+                 <a href="/${currentUsername}">
+                   <img class="avatar s40" src="${currentUserAvatar}">
+                 </a>
               </div>
               <div class="timeline-content ${discussionClass}">
                  <div class="note-header">
@@ -1226,6 +1277,23 @@ const normalizeNewlines = function(str) {
     };
 
     /**
+     * Create Placeholder System Note DOM element populated with slash command description
+     */
+    Notes.prototype.createPlaceholderSystemNote = function ({ formContent, uniqueId }) {
+      const $tempNote = $(
+        `<li id="${uniqueId}" class="note system-note timeline-entry being-posted fade-in-half">
+           <div class="timeline-entry-inner">
+             <div class="timeline-content">
+               <i>${formContent}</i>
+             </div>
+           </div>
+         </li>`
+      );
+
+      return $tempNote;
+    };
+
+    /**
      * This method does following tasks step-by-step whenever a new comment
      * is submitted by user (both main thread comments as well as discussion comments).
      *
@@ -1256,7 +1324,9 @@ const normalizeNewlines = function(str) {
       const isDiscussionForm = $form.hasClass('js-discussion-note-form');
       const isDiscussionResolve = $submitBtn.hasClass('js-comment-resolve-button');
       const { formData, formContent, formAction } = this.getFormData($form);
-      const uniqueId = _.uniqueId('tempNote_');
+      let noteUniqueId;
+      let systemNoteUniqueId;
+      let hasSlashCommands = false;
       let $notesContainer;
       let tempFormContent;
 
@@ -1277,16 +1347,28 @@ const normalizeNewlines = function(str) {
       tempFormContent = formContent;
       if (this.hasSlashCommands(formContent)) {
         tempFormContent = this.stripSlashCommands(formContent);
+        hasSlashCommands = true;
       }
 
+      // Show placeholder note
       if (tempFormContent) {
-        // Show placeholder note
+        noteUniqueId = _.uniqueId('tempNote_');
         $notesContainer.append(this.createPlaceholderNote({
           formContent: tempFormContent,
-          uniqueId,
+          uniqueId: noteUniqueId,
           isDiscussionNote,
           currentUsername: gon.current_username,
           currentUserFullname: gon.current_user_fullname,
+          currentUserAvatar: gon.current_user_avatar_url,
+        }));
+      }
+
+      // Show placeholder system note
+      if (hasSlashCommands) {
+        systemNoteUniqueId = _.uniqueId('tempSystemNote_');
+        $notesContainer.append(this.createPlaceholderSystemNote({
+          formContent: this.getSlashCommandDescription(formContent, AjaxCache.get(gl.GfmAutoComplete.dataSources.commands)),
+          uniqueId: systemNoteUniqueId,
         }));
       }
 
@@ -1304,7 +1386,15 @@ const normalizeNewlines = function(str) {
       gl.utils.ajaxPost(formAction, formData)
         .then((note) => {
           // Submission successful! remove placeholder
-          $notesContainer.find(`#${uniqueId}`).remove();
+          $notesContainer.find(`#${noteUniqueId}`).remove();
+
+          // Reset cached commands list when command is applied
+          if (hasSlashCommands) {
+            $form.find('textarea.js-note-text').trigger('clear-commands-cache.atwho');
+          }
+
+          // Clear previous form errors
+          this.clearFlashWrapper();
 
           // Check if this was discussion comment
           if (isDiscussionForm) {
@@ -1339,7 +1429,11 @@ const normalizeNewlines = function(str) {
           $form.trigger('ajax:success', [note]);
         }).fail(() => {
           // Submission failed, remove placeholder note and show Flash error message
-          $notesContainer.find(`#${uniqueId}`).remove();
+          $notesContainer.find(`#${noteUniqueId}`).remove();
+
+          if (hasSlashCommands) {
+            $notesContainer.find(`#${systemNoteUniqueId}`).remove();
+          }
 
           // Show form again on UI on failure
           if (isDiscussionForm && $notesContainer.length) {
diff --git a/app/assets/javascripts/notifications_form.js b/app/assets/javascripts/notifications_form.js
index 5005af90d48..2ab9c4fed2c 100644
--- a/app/assets/javascripts/notifications_form.js
+++ b/app/assets/javascripts/notifications_form.js
@@ -1,10 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, one-var-declaration-per-line, newline-per-chained-call, comma-dangle, consistent-return, prefer-arrow-callback, max-len */
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.NotificationsForm = (function() {
     function NotificationsForm() {
-      this.toggleCheckbox = bind(this.toggleCheckbox, this);
+      this.toggleCheckbox = this.toggleCheckbox.bind(this);
       this.removeEventListeners();
       this.initEventListeners();
     }
diff --git a/app/assets/javascripts/pager.js b/app/assets/javascripts/pager.js
index 5f6bc902cf8..01110420cca 100644
--- a/app/assets/javascripts/pager.js
+++ b/app/assets/javascripts/pager.js
@@ -1,16 +1,17 @@
-require('~/lib/utils/common_utils');
-require('~/lib/utils/url_utility');
+import '~/lib/utils/common_utils';
+import '~/lib/utils/url_utility';
 
 (() => {
   const ENDLESS_SCROLL_BOTTOM_PX = 400;
   const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
 
   const Pager = {
-    init(limit = 0, preload = false, disable = false, callback = $.noop) {
+    init(limit = 0, preload = false, disable = false, prepareData = $.noop, callback = $.noop) {
       this.url = $('.content_list').data('href') || gl.utils.removeParams(['limit', 'offset']);
       this.limit = limit;
       this.offset = parseInt(gl.utils.getParameterByName('offset'), 10) || this.limit;
       this.disable = disable;
+      this.prepareData = prepareData;
       this.callback = callback;
       this.loading = $('.loading').first();
       if (preload) {
@@ -29,7 +30,7 @@ require('~/lib/utils/url_utility');
         dataType: 'json',
         error: () => this.loading.hide(),
         success: (data) => {
-          this.append(data.count, data.html);
+          this.append(data.count, this.prepareData(data.html));
           this.callback();
 
           // keep loading until we've filled the viewport height
diff --git a/app/assets/javascripts/pipelines/components/async_button.vue b/app/assets/javascripts/pipelines/components/async_button.vue
index d1c60b570de..37a6f02d8fd 100644
--- a/app/assets/javascripts/pipelines/components/async_button.vue
+++ b/app/assets/javascripts/pipelines/components/async_button.vue
@@ -3,6 +3,7 @@
 /* global Flash */
 import '~/flash';
 import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
 export default {
   props: {
@@ -37,6 +38,10 @@ export default {
     },
   },
 
+  components: {
+    loadingIcon,
+  },
+
   data() {
     return {
       isLoading: false,
@@ -94,9 +99,6 @@ export default {
     <i
       :class="iconClass"
       aria-hidden="true" />
-    <i
-      class="fa fa-spinner fa-spin"
-      aria-hidden="true"
-      v-if="isLoading" />
+    <loading-icon v-if="isLoading" />
   </button>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 1f1b99ff401..61cd623dd00 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,68 +1,52 @@
 <script>
-  /* global Flash */
-  import Visibility from 'visibilityjs';
-  import Poll from '../../../lib/utils/poll';
-  import PipelineService from '../../services/pipeline_service';
-  import PipelineStore from '../../stores/pipeline_store';
   import stageColumnComponent from './stage_column_component.vue';
+  import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
   import '../../../flash';
 
   export default {
-    components: {
-      stageColumnComponent,
+    props: {
+      isLoading: {
+        type: Boolean,
+        required: true,
+      },
+      pipeline: {
+        type: Object,
+        required: true,
+      },
     },
 
-    data() {
-      const DOMdata = document.getElementById('js-pipeline-graph-vue').dataset;
-      const store = new PipelineStore();
-
-      return {
-        isLoading: false,
-        endpoint: DOMdata.endpoint,
-        store,
-        state: store.state,
-      };
+    components: {
+      stageColumnComponent,
+      loadingIcon,
     },
 
-    created() {
-      this.service = new PipelineService(this.endpoint);
-
-      const poll = new Poll({
-        resource: this.service,
-        method: 'getPipeline',
-        successCallback: this.successCallback,
-        errorCallback: this.errorCallback,
-      });
-
-      if (!Visibility.hidden()) {
-        this.isLoading = true;
-        poll.makeRequest();
-      }
-
-      Visibility.change(() => {
-        if (!Visibility.hidden()) {
-          poll.restart();
-        } else {
-          poll.stop();
-        }
-      });
+    computed: {
+      graph() {
+        return this.pipeline.details && this.pipeline.details.stages;
+      },
     },
 
     methods: {
-      successCallback(response) {
-        const data = response.json();
-
-        this.isLoading = false;
-        this.store.storeGraph(data.details.stages);
+      capitalizeStageName(name) {
+        return name.charAt(0).toUpperCase() + name.slice(1);
       },
 
-      errorCallback() {
-        this.isLoading = false;
-        return new Flash('An error occurred while fetching the pipeline.');
+      isFirstColumn(index) {
+        return index === 0;
       },
 
-      capitalizeStageName(name) {
-        return name.charAt(0).toUpperCase() + name.slice(1);
+      stageConnectorClass(index, stage) {
+        let className;
+
+        // If it's the first stage column and only has one job
+        if (index === 0 && stage.groups.length === 1) {
+          className = 'no-margin';
+        } else if (index > 0) {
+          // If it is not the first column
+          className = 'left-margin';
+        }
+
+        return className;
       },
 
       isFirstColumn(index) {
@@ -89,18 +73,17 @@
   <div class="build-content middle-block js-pipeline-graph">
     <div class="pipeline-visualization pipeline-graph">
       <div class="text-center">
-        <i
+        <loading-icon
           v-if="isLoading"
-          class="loading-icon fa fa-spin fa-spinner fa-3x"
-          aria-label="Loading"
-          aria-hidden="true" />
+          size="3"
+          />
       </div>
 
       <ul
         v-if="!isLoading"
         class="stage-column-list">
         <stage-column-component
-          v-for="(stage, index) in state.graph"
+          v-for="(stage, index) in graph"
           :title="capitalizeStageName(stage.name)"
           :jobs="stage.groups"
           :key="stage.name"
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
new file mode 100644
index 00000000000..4f6c5c177cf
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -0,0 +1,97 @@
+<script>
+import ciHeader from '../../vue_shared/components/header_ci_component.vue';
+import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+export default {
+  name: 'PipelineHeaderSection',
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  components: {
+    ciHeader,
+    loadingIcon,
+  },
+
+  data() {
+    return {
+      actions: this.getActions(),
+    };
+  },
+
+  computed: {
+    status() {
+      return this.pipeline.details && this.pipeline.details.status;
+    },
+    shouldRenderContent() {
+      return !this.isLoading && Object.keys(this.pipeline).length;
+    },
+  },
+
+  methods: {
+    postAction(action) {
+      const index = this.actions.indexOf(action);
+
+      this.$set(this.actions[index], 'isLoading', true);
+
+      eventHub.$emit('headerPostAction', action);
+    },
+
+    getActions() {
+      const actions = [];
+
+      if (this.pipeline.retry_path) {
+        actions.push({
+          label: 'Retry',
+          path: this.pipeline.retry_path,
+          cssClass: 'js-retry-button btn btn-inverted-secondary',
+          type: 'button',
+          isLoading: false,
+        });
+      }
+
+      if (this.pipeline.cancel_path) {
+        actions.push({
+          label: 'Cancel running',
+          path: this.pipeline.cancel_path,
+          cssClass: 'js-btn-cancel-pipeline btn btn-danger',
+          type: 'button',
+          isLoading: false,
+        });
+      }
+
+      return actions;
+    },
+  },
+
+  watch: {
+    pipeline() {
+      this.actions = this.getActions();
+    },
+  },
+};
+</script>
+<template>
+  <div class="pipeline-header-container">
+    <ci-header
+      v-if="shouldRenderContent"
+      :status="status"
+      item-name="Pipeline"
+      :item-id="pipeline.id"
+      :time="pipeline.created_at"
+      :user="pipeline.user"
+      :actions="actions"
+      @actionClicked="postAction"
+      />
+    <loading-icon
+      v-else
+      size="2"/>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.js b/app/assets/javascripts/pipelines/components/pipeline_url.js
deleted file mode 100644
index 4e183d5c8ec..00000000000
--- a/app/assets/javascripts/pipelines/components/pipeline_url.js
+++ /dev/null
@@ -1,56 +0,0 @@
-export default {
-  props: [
-    'pipeline',
-  ],
-  computed: {
-    user() {
-      return !!this.pipeline.user;
-    },
-  },
-  template: `
-    <td>
-      <a
-        :href="pipeline.path"
-        class="js-pipeline-url-link">
-        <span class="pipeline-id">#{{pipeline.id}}</span>
-      </a>
-      <span>by</span>
-      <a
-        class="js-pipeline-url-user"
-        v-if="user"
-        :href="pipeline.user.web_url">
-        <img
-          v-if="user"
-          class="avatar has-tooltip s20 "
-          :title="pipeline.user.name"
-          data-container="body"
-          :src="pipeline.user.avatar_url"
-        >
-      </a>
-      <span
-        v-if="!user"
-        class="js-pipeline-url-api api monospace">
-        API
-      </span>
-      <span
-        v-if="pipeline.flags.latest"
-        class="js-pipeline-url-lastest label label-success has-tooltip"
-        title="Latest pipeline for this branch"
-        data-original-title="Latest pipeline for this branch">
-        latest
-      </span>
-      <span
-        v-if="pipeline.flags.yaml_errors"
-        class="js-pipeline-url-yaml label label-danger has-tooltip"
-        :title="pipeline.yaml_errors"
-        :data-original-title="pipeline.yaml_errors">
-        yaml invalid
-      </span>
-      <span
-        v-if="pipeline.flags.stuck"
-        class="js-pipeline-url-stuck label label-warning">
-        stuck
-      </span>
-    </td>
-  `,
-};
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
new file mode 100644
index 00000000000..4781a8ff1da
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -0,0 +1,65 @@
+<script>
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import tooltipMixin from '../../vue_shared/mixins/tooltip';
+
+export default {
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    userAvatarLink,
+  },
+  mixins: [
+    tooltipMixin,
+  ],
+  computed: {
+    user() {
+      return this.pipeline.user;
+    },
+  },
+};
+</script>
+<template>
+  <td>
+    <a
+      :href="pipeline.path"
+      class="js-pipeline-url-link">
+      <span class="pipeline-id">#{{pipeline.id}}</span>
+    </a>
+    <span>by</span>
+    <user-avatar-link
+      v-if="user"
+      class="js-pipeline-url-user"
+      :link-href="pipeline.user.path"
+      :img-src="pipeline.user.avatar_url"
+      :tooltip-text="pipeline.user.name"
+    />
+    <span
+      v-if="!user"
+      class="js-pipeline-url-api api">
+      API
+    </span>
+    <span
+      v-if="pipeline.flags.latest"
+      class="js-pipeline-url-lastest label label-success"
+      title="Latest pipeline for this branch"
+      ref="tooltip">
+      latest
+    </span>
+    <span
+      v-if="pipeline.flags.yaml_errors"
+      class="js-pipeline-url-yaml label label-danger"
+      :title="pipeline.yaml_errors"
+      ref="tooltip">
+      yaml invalid
+    </span>
+    <span
+      v-if="pipeline.flags.stuck"
+      class="js-pipeline-url-stuck label label-warning">
+      stuck
+    </span>
+  </td>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.js b/app/assets/javascripts/pipelines/components/pipelines_actions.js
index ffda18d2e0f..b9e066c5db1 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.js
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.js
@@ -3,6 +3,7 @@
 import '~/flash';
 import playIconSvg from 'icons/_icon_play.svg';
 import eventHub from '../event_hub';
+import loadingIconComponent from '../../vue_shared/components/loading_icon.vue';
 
 export default {
   props: {
@@ -17,6 +18,10 @@ export default {
     },
   },
 
+  components: {
+    loadingIconComponent,
+  },
+
   data() {
     return {
       playIconSvg,
@@ -65,10 +70,7 @@ export default {
         <i
           class="fa fa-caret-down"
           aria-hidden="true" />
-        <i
-          v-if="isLoading"
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true" />
+        <loading-icon v-if="isLoading" />
       </button>
 
       <ul class="dropdown-menu dropdown-menu-align-right">
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index 310f44b06df..c05c76c9a64 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -15,6 +15,8 @@
 
 /* global Flash */
 import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import tooltipMixin from '../../vue_shared/mixins/tooltip';
 
 export default {
   props: {
@@ -30,6 +32,10 @@ export default {
     },
   },
 
+  mixins: [
+    tooltipMixin,
+  ],
+
   data() {
     return {
       isLoading: false,
@@ -38,6 +44,10 @@ export default {
     };
   },
 
+  components: {
+    loadingIcon,
+  },
+
   updated() {
     if (this.dropdownContent.length > 0) {
       this.stopDropdownClickPropagation();
@@ -122,9 +132,10 @@ export default {
 <template>
   <div class="dropdown">
     <button
+      ref="tooltip"
       :class="triggerButtonClass"
       @click="onClickStage"
-      class="mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button"
+      class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
       :title="stage.title"
       data-placement="top"
       data-toggle="dropdown"
@@ -153,15 +164,7 @@ export default {
         :class="dropdownClass"
         class="js-builds-dropdown-list scrollable-menu">
 
-        <div
-          class="text-center"
-          v-if="isLoading">
-          <i
-            class="fa fa-spin fa-spinner"
-            aria-hidden="true"
-            aria-label="Loading">
-          </i>
-        </div>
+        <loading-icon v-if="isLoading"/>
 
         <ul
           v-else
diff --git a/app/assets/javascripts/pipelines/graph_bundle.js b/app/assets/javascripts/pipelines/graph_bundle.js
deleted file mode 100644
index b7a6b5d8479..00000000000
--- a/app/assets/javascripts/pipelines/graph_bundle.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Vue from 'vue';
-import pipelineGraph from './components/graph/graph_component.vue';
-
-document.addEventListener('DOMContentLoaded', () => new Vue({
-  el: '#js-pipeline-graph-vue',
-  components: {
-    pipelineGraph,
-  },
-  render: createElement => createElement('pipeline-graph'),
-}));
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
new file mode 100644
index 00000000000..bfc416da50b
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -0,0 +1,70 @@
+/* global Flash */
+
+import Vue from 'vue';
+import PipelinesMediator from './pipeline_details_mediatior';
+import pipelineGraph from './components/graph/graph_component.vue';
+import pipelineHeader from './components/header_component.vue';
+import eventHub from './event_hub';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const dataset = document.querySelector('.js-pipeline-details-vue').dataset;
+
+  const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
+
+  mediator.fetchPipeline();
+
+  // eslint-disable-next-line
+  new Vue({
+    el: '#js-pipeline-graph-vue',
+    data() {
+      return {
+        mediator,
+      };
+    },
+    components: {
+      pipelineGraph,
+    },
+    render(createElement) {
+      return createElement('pipeline-graph', {
+        props: {
+          isLoading: this.mediator.state.isLoading,
+          pipeline: this.mediator.store.state.pipeline,
+        },
+      });
+    },
+  });
+
+  // eslint-disable-next-line
+  new Vue({
+    el: '#js-pipeline-header-vue',
+    data() {
+      return {
+        mediator,
+      };
+    },
+    components: {
+      pipelineHeader,
+    },
+    created() {
+      eventHub.$on('headerPostAction', this.postAction);
+    },
+    beforeDestroy() {
+      eventHub.$off('headerPostAction', this.postAction);
+    },
+    methods: {
+      postAction(action) {
+        this.mediator.service.postAction(action.path)
+          .then(() => this.mediator.refreshPipeline())
+          .catch(() => new Flash('An error occurred while making the request.'));
+      },
+    },
+    render(createElement) {
+      return createElement('pipeline-header', {
+        props: {
+          isLoading: this.mediator.state.isLoading,
+          pipeline: this.mediator.store.state.pipeline,
+        },
+      });
+    },
+  });
+});
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediatior.js b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
new file mode 100644
index 00000000000..82537ea06f5
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
@@ -0,0 +1,59 @@
+/* global Flash */
+
+import Visibility from 'visibilityjs';
+import Poll from '../lib/utils/poll';
+import PipelineStore from './stores/pipeline_store';
+import PipelineService from './services/pipeline_service';
+
+export default class pipelinesMediator {
+  constructor(options = {}) {
+    this.options = options;
+    this.store = new PipelineStore();
+    this.service = new PipelineService(options.endpoint);
+
+    this.state = {};
+    this.state.isLoading = false;
+  }
+
+  fetchPipeline() {
+    this.poll = new Poll({
+      resource: this.service,
+      method: 'getPipeline',
+      successCallback: this.successCallback.bind(this),
+      errorCallback: this.errorCallback.bind(this),
+    });
+
+    if (!Visibility.hidden()) {
+      this.state.isLoading = true;
+      this.poll.makeRequest();
+    } else {
+      this.refreshPipeline();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        this.poll.restart();
+      } else {
+        this.poll.stop();
+      }
+    });
+  }
+
+  successCallback(response) {
+    const data = response.json();
+
+    this.state.isLoading = false;
+    this.store.storePipeline(data);
+  }
+
+  errorCallback() {
+    this.state.isLoading = false;
+    return new Flash('An error occurred while fetching the pipeline.');
+  }
+
+  refreshPipeline() {
+    this.service.getPipeline()
+      .then(response => this.successCallback(response))
+      .catch(() => this.errorCallback());
+  }
+}
diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js
index 934bd7deb31..9f247af1dec 100644
--- a/app/assets/javascripts/pipelines/pipelines.js
+++ b/app/assets/javascripts/pipelines/pipelines.js
@@ -1,12 +1,13 @@
 import Visibility from 'visibilityjs';
 import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
-import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
-import TablePaginationComponent from '../vue_shared/components/table_pagination';
-import EmptyState from './components/empty_state.vue';
-import ErrorState from './components/error_state.vue';
-import NavigationTabs from './components/navigation_tabs';
-import NavigationControls from './components/nav_controls';
+import pipelinesTableComponent from '../vue_shared/components/pipelines_table';
+import tablePagination from '../vue_shared/components/table_pagination.vue';
+import emptyState from './components/empty_state.vue';
+import errorState from './components/error_state.vue';
+import navigationTabs from './components/navigation_tabs';
+import navigationControls from './components/nav_controls';
+import loadingIcon from '../vue_shared/components/loading_icon.vue';
 import Poll from '../lib/utils/poll';
 
 export default {
@@ -18,12 +19,13 @@ export default {
   },
 
   components: {
-    'gl-pagination': TablePaginationComponent,
-    'pipelines-table-component': PipelinesTableComponent,
-    'empty-state': EmptyState,
-    'error-state': ErrorState,
-    'navigation-tabs': NavigationTabs,
-    'navigation-controls': NavigationControls,
+    tablePagination,
+    pipelinesTableComponent,
+    emptyState,
+    errorState,
+    navigationTabs,
+    navigationControls,
+    loadingIcon,
   },
 
   data() {
@@ -50,6 +52,7 @@ export default {
       hasError: false,
       isMakingRequest: false,
       updateGraphDropdown: false,
+      hasMadeRequest: false,
     };
   },
 
@@ -76,6 +79,7 @@ export default {
     shouldRenderEmptyState() {
       return !this.isLoading &&
         !this.hasError &&
+        this.hasMadeRequest &&
         !this.state.pipelines.length &&
         (this.scope === 'all' || this.scope === null);
     },
@@ -148,6 +152,10 @@ export default {
     if (!Visibility.hidden()) {
       this.isLoading = true;
       poll.makeRequest();
+    } else {
+      // If tab is not visible we need to make the first request so we don't show the empty
+      // state without knowing if there are any pipelines
+      this.fetchPipelines();
     }
 
     Visibility.change(() => {
@@ -161,7 +169,7 @@ export default {
     eventHub.$on('refreshPipelines', this.fetchPipelines);
   },
 
-  beforeDestroyed() {
+  beforeDestroy() {
     eventHub.$off('refreshPipelines');
   },
 
@@ -200,6 +208,7 @@ export default {
 
       this.isLoading = false;
       this.updateGraphDropdown = true;
+      this.hasMadeRequest = true;
     },
 
     errorCallback() {
@@ -244,13 +253,11 @@ export default {
 
       <div class="content-list pipelines">
 
-        <div
-          class="realtime-loading"
-          v-if="isLoading">
-          <i
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true" />
-        </div>
+        <loading-icon
+          label="Loading Pipelines"
+          size="3"
+          v-if="isLoading"
+          />
 
         <empty-state
           v-if="shouldRenderEmptyState"
@@ -275,12 +282,13 @@ export default {
             />
         </div>
 
-        <gl-pagination
+        <table-pagination
           v-if="shouldRenderPagination"
           :pagenum="pagenum"
           :change="change"
           :count="state.count.all"
-          :pageInfo="state.pageInfo"/>
+          :pageInfo="state.pageInfo"
+          />
       </div>
     </div>
   `,
diff --git a/app/assets/javascripts/pipelines/services/pipeline_service.js b/app/assets/javascripts/pipelines/services/pipeline_service.js
index f1cc60c1ee0..3e0c52c7726 100644
--- a/app/assets/javascripts/pipelines/services/pipeline_service.js
+++ b/app/assets/javascripts/pipelines/services/pipeline_service.js
@@ -11,4 +11,9 @@ export default class PipelineService {
   getPipeline() {
     return this.pipeline.get();
   }
+
+  // eslint-disable-next-line
+  postAction(endpoint) {
+    return Vue.http.post(`${endpoint}.json`);
+  }
 }
diff --git a/app/assets/javascripts/pipelines/services/pipelines_service.js b/app/assets/javascripts/pipelines/services/pipelines_service.js
index b21f84b4545..e2285494e62 100644
--- a/app/assets/javascripts/pipelines/services/pipelines_service.js
+++ b/app/assets/javascripts/pipelines/services/pipelines_service.js
@@ -33,8 +33,6 @@ export default class PipelinesService {
 
   /**
    * Post request for all pipelines actions.
-   * Endpoint content type needs to be:
-   * `Content-Type:application/x-www-form-urlencoded`
    *
    * @param  {String} endpoint
    * @return {Promise}
diff --git a/app/assets/javascripts/pipelines/stores/pipeline_store.js b/app/assets/javascripts/pipelines/stores/pipeline_store.js
index 86ab50d8f1e..052e34a8aef 100644
--- a/app/assets/javascripts/pipelines/stores/pipeline_store.js
+++ b/app/assets/javascripts/pipelines/stores/pipeline_store.js
@@ -2,10 +2,10 @@ export default class PipelineStore {
   constructor() {
     this.state = {};
 
-    this.state.graph = [];
+    this.state.pipeline = {};
   }
 
-  storeGraph(graph = []) {
-    this.state.graph = graph;
+  storePipeline(pipeline = {}) {
+    this.state.pipeline = pipeline;
   }
 }
diff --git a/app/assets/javascripts/profile/profile_bundle.js b/app/assets/javascripts/profile/profile_bundle.js
index 15d32825583..ff35a9bcb83 100644
--- a/app/assets/javascripts/profile/profile_bundle.js
+++ b/app/assets/javascripts/profile/profile_bundle.js
@@ -1,2 +1,2 @@
-require('./gl_crop');
-require('./profile');
+import './gl_crop';
+import './profile';
diff --git a/app/assets/javascripts/project_edit.js b/app/assets/javascripts/project_edit.js
new file mode 100644
index 00000000000..d7d284b6c86
--- /dev/null
+++ b/app/assets/javascripts/project_edit.js
@@ -0,0 +1,9 @@
+export default function setupProjectEdit() {
+  const $transferForm = $('.js-project-transfer-form');
+  const $selectNamespace = $transferForm.find('.select2');
+
+  $selectNamespace.on('change', () => {
+    $transferForm.find(':submit').prop('disabled', !$selectNamespace.val());
+  });
+  $selectNamespace.trigger('change');
+}
diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index e01668eabef..11f9754780d 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -2,18 +2,16 @@
 /* global fuzzaldrinPlus */
 
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.ProjectFindFile = (function() {
     var highlighter;
 
     function ProjectFindFile(element1, options) {
       this.element = element1;
       this.options = options;
-      this.goToBlob = bind(this.goToBlob, this);
-      this.goToTree = bind(this.goToTree, this);
-      this.selectRowDown = bind(this.selectRowDown, this);
-      this.selectRowUp = bind(this.selectRowUp, this);
+      this.goToBlob = this.goToBlob.bind(this);
+      this.goToTree = this.goToTree.bind(this);
+      this.selectRowDown = this.selectRowDown.bind(this);
+      this.selectRowUp = this.selectRowUp.bind(this);
       this.filePaths = {};
       this.inputElement = this.element.find(".file-finder-input");
       // init event
diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js
index e9927c1bf51..c0f757269cb 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -1,13 +1,17 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-vars, one-var, no-underscore-dangle, prefer-template, no-else-return, prefer-arrow-callback, max-len */
 
-(function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
+function highlightChanges($elm) {
+  $elm.addClass('highlight-changes');
+  setTimeout(() => $elm.removeClass('highlight-changes'), 10);
+}
 
+(function() {
   this.ProjectNew = (function() {
     function ProjectNew() {
-      this.toggleSettings = bind(this.toggleSettings, this);
+      this.toggleSettings = this.toggleSettings.bind(this);
       this.$selects = $('.features select');
       this.$repoSelects = this.$selects.filter('.js-repo-select');
+      this.$projectSelects = this.$selects.not('.js-repo-select');
 
       $('.project-edit-container').on('ajax:before', (function(_this) {
         return function() {
@@ -28,6 +32,42 @@
       if (!visibilityContainer) return;
       const visibilitySelect = new gl.VisibilitySelect(visibilityContainer);
       visibilitySelect.init();
+
+      const $visibilitySelect = $(visibilityContainer).find('select');
+      let projectVisibility = $visibilitySelect.val();
+      const PROJECT_VISIBILITY_PRIVATE = '0';
+
+      $visibilitySelect.on('change', () => {
+        const newProjectVisibility = $visibilitySelect.val();
+
+        if (projectVisibility !== newProjectVisibility) {
+          this.$projectSelects.each((idx, select) => {
+            const $select = $(select);
+            const $options = $select.find('option');
+            const values = $.map($options, e => e.value);
+
+            // if switched to "private", limit visibility options
+            if (newProjectVisibility === PROJECT_VISIBILITY_PRIVATE) {
+              if ($select.val() !== values[0] && $select.val() !== values[1]) {
+                $select.val(values[1]).trigger('change');
+                highlightChanges($select);
+              }
+              $options.slice(2).disable();
+            }
+
+            // if switched from "private", increase visibility for non-disabled options
+            if (projectVisibility === PROJECT_VISIBILITY_PRIVATE) {
+              $options.enable();
+              if ($select.val() !== values[0] && $select.val() !== values[values.length - 1]) {
+                $select.val(values[values.length - 1]).trigger('change');
+                highlightChanges($select);
+              }
+            }
+          });
+
+          projectVisibility = newProjectVisibility;
+        }
+      });
     };
 
     ProjectNew.prototype.toggleSettings = function() {
@@ -58,8 +98,10 @@
 
     ProjectNew.prototype.toggleRepoVisibility = function () {
       var $repoAccessLevel = $('.js-repo-access-level select');
+      var $lfsEnabledOption = $('.js-lfs-enabled select');
       var containerRegistry = document.querySelectorAll('.js-container-registry')[0];
       var containerRegistryCheckbox = document.getElementById('project_container_registry_enabled');
+      var prevSelectedVal = parseInt($repoAccessLevel.val(), 10);
 
       this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
         .nextAll()
@@ -73,29 +115,40 @@
             var $this = $(this);
             var repoSelectVal = parseInt($this.val(), 10);
 
-            $this.find('option').show();
+            $this.find('option').enable();
 
-            if (selectedVal < repoSelectVal) {
-              $this.val(selectedVal);
+            if (selectedVal < repoSelectVal || repoSelectVal === prevSelectedVal) {
+              $this.val(selectedVal).trigger('change');
+              highlightChanges($this);
             }
 
-            $this.find("option[value='" + selectedVal + "']").nextAll().hide();
+            $this.find("option[value='" + selectedVal + "']").nextAll().disable();
           });
 
           if (selectedVal) {
             this.$repoSelects.removeClass('disabled');
 
+            if ($lfsEnabledOption.length) {
+              $lfsEnabledOption.removeClass('disabled');
+              highlightChanges($lfsEnabledOption);
+            }
             if (containerRegistry) {
               containerRegistry.style.display = '';
             }
           } else {
             this.$repoSelects.addClass('disabled');
 
+            if ($lfsEnabledOption.length) {
+              $lfsEnabledOption.val('false').addClass('disabled');
+              highlightChanges($lfsEnabledOption);
+            }
             if (containerRegistry) {
               containerRegistry.style.display = 'none';
               containerRegistryCheckbox.checked = false;
             }
           }
+
+          prevSelectedVal = selectedVal;
         }.bind(this));
     };
 
diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index 3c1c1e7dceb..9896b88d487 100644
--- a/app/assets/javascripts/project_select.js
+++ b/app/assets/javascripts/project_select.js
@@ -1,5 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-var, comma-dangle, object-shorthand, one-var, one-var-declaration-per-line, no-else-return, quotes, max-len */
-/* global Api */
+import Api from './api';
 
 (function() {
   this.ProjectSelect = (function() {
@@ -51,6 +51,9 @@
         this.groupId = $(select).data('group-id');
         this.includeGroups = $(select).data('include-groups');
         this.orderBy = $(select).data('order-by') || 'id';
+        this.withIssuesEnabled = $(select).data('with-issues-enabled');
+        this.withMergeRequestsEnabled = $(select).data('with-merge-requests-enabled');
+
         placeholder = "Search for project";
         if (this.includeGroups) {
           placeholder += " or group";
@@ -84,7 +87,11 @@
               if (_this.groupId) {
                 return Api.groupProjects(_this.groupId, query.term, projectsCallback);
               } else {
-                return Api.projects(query.term, { order_by: _this.orderBy }, projectsCallback);
+                return Api.projects(query.term, {
+                  order_by: _this.orderBy,
+                  with_issues_enabled: _this.withIssuesEnabled,
+                  with_merge_requests_enabled: _this.withMergeRequestsEnabled
+                }, projectsCallback);
               }
             };
           })(this),
diff --git a/app/assets/javascripts/protected_branches/protected_branches_bundle.js b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
index 849c1e31623..874d70a1431 100644
--- a/app/assets/javascripts/protected_branches/protected_branches_bundle.js
+++ b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
@@ -1,5 +1,5 @@
-require('./protected_branch_access_dropdown');
-require('./protected_branch_create');
-require('./protected_branch_dropdown');
-require('./protected_branch_edit');
-require('./protected_branch_edit_list');
+import './protected_branch_access_dropdown';
+import './protected_branch_create';
+import './protected_branch_dropdown';
+import './protected_branch_edit';
+import './protected_branch_edit_list';
diff --git a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
index 068e9698e1d..9d045886262 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
@@ -10,7 +10,7 @@ export default class ProtectedTagDropdown {
     this.$dropdown = options.$dropdown;
     this.$dropdownContainer = this.$dropdown.parent();
     this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
-    this.$protectedTag = this.$dropdownContainer.find('.create-new-protected-tag');
+    this.$protectedTag = this.$dropdownContainer.find('.js-create-new-protected-tag');
 
     this.buildDropdown();
     this.bindEvents();
@@ -73,7 +73,7 @@ export default class ProtectedTagDropdown {
       };
 
       this.$dropdownContainer
-        .find('.create-new-protected-tag code')
+        .find('.js-create-new-protected-tag code')
         .text(tagName);
     }
 
diff --git a/app/assets/javascripts/raven/raven_config.js b/app/assets/javascripts/raven/raven_config.js
index da3fb7a6744..ae54fa5f1a9 100644
--- a/app/assets/javascripts/raven/raven_config.js
+++ b/app/assets/javascripts/raven/raven_config.js
@@ -1,4 +1,5 @@
 import Raven from 'raven-js';
+import $ from 'jquery';
 
 const IGNORE_ERRORS = [
   // Random plugins/extensions
@@ -74,7 +75,7 @@ const RavenConfig = {
   },
 
   bindRavenErrors() {
-    window.$(document).on('ajaxError.raven', this.handleRavenErrors);
+    $(document).on('ajaxError.raven', this.handleRavenErrors);
   },
 
   handleRavenErrors(event, req, config, err) {
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index a9b3de281e1..b71c3097706 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -3,11 +3,9 @@
 import Cookies from 'js-cookie';
 
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.Sidebar = (function() {
     function Sidebar(currentUser) {
-      this.toggleTodo = bind(this.toggleTodo, this);
+      this.toggleTodo = this.toggleTodo.bind(this);
       this.sidebar = $('aside');
       this.removeListeners();
       this.addEventListeners();
diff --git a/app/assets/javascripts/search.js b/app/assets/javascripts/search.js
index 15f5963353a..05caf177aec 100644
--- a/app/assets/javascripts/search.js
+++ b/app/assets/javascripts/search.js
@@ -1,5 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, object-shorthand, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-else-return, max-len */
-/* global Api */
+/* global Flash */
+import Api from './api';
 
 (function() {
   this.Search = (function() {
@@ -7,6 +8,7 @@
       var $groupDropdown, $projectDropdown;
       $groupDropdown = $('.js-search-group-dropdown');
       $projectDropdown = $('.js-search-project-dropdown');
+      this.groupId = $groupDropdown.data('group-id');
       this.eventListeners();
       $groupDropdown.glDropdown({
         selectable: true,
@@ -46,14 +48,18 @@
         search: {
           fields: ['name']
         },
-        data: function(term, callback) {
-          return Api.projects(term, { order_by: 'id' }, function(data) {
-            data.unshift({
-              name_with_namespace: 'Any'
-            });
-            data.splice(1, 0, 'divider');
-            return callback(data);
-          });
+        data: (term, callback) => {
+          this.getProjectsData(term)
+            .then((data) => {
+              data.unshift({
+                name_with_namespace: 'Any'
+              });
+              data.splice(1, 0, 'divider');
+
+              return data;
+            })
+            .then(data => callback(data))
+            .catch(() => new Flash('Error fetching projects'));
         },
         id: function(obj) {
           return obj.id;
@@ -95,6 +101,18 @@
       return $('.js-search-input').val('').trigger('keyup').focus();
     };
 
+    Search.prototype.getProjectsData = function(term) {
+      return new Promise((resolve) => {
+        if (this.groupId) {
+          Api.groupProjects(this.groupId, term, resolve);
+        } else {
+          Api.projects(term, {
+            order_by: 'id',
+          }, resolve);
+        }
+      });
+    };
+
     return Search;
   })();
 }).call(window);
diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
new file mode 100644
index 00000000000..e67f449e1a2
--- /dev/null
+++ b/app/assets/javascripts/settings_panels.js
@@ -0,0 +1,27 @@
+function expandSection($section) {
+  $section.find('.js-settings-toggle').text('Close');
+  $section.find('.settings-content').addClass('expanded').off('scroll').scrollTop(0);
+}
+
+function closeSection($section) {
+  $section.find('.js-settings-toggle').text('Expand');
+  $section.find('.settings-content').removeClass('expanded').on('scroll', () => expandSection($section));
+}
+
+function toggleSection($section) {
+  const $content = $section.find('.settings-content');
+  $content.removeClass('no-animate');
+  if ($content.hasClass('expanded')) {
+    closeSection($section);
+  } else {
+    expandSection($section);
+  }
+}
+
+export default function initSettingsPanels() {
+  $('.settings').each((i, elm) => {
+    const $section = $(elm);
+    $section.on('click', '.js-settings-toggle', () => toggleSection($section));
+    $section.find('.settings-content:not(.expanded)').on('scroll', () => expandSection($section));
+  });
+}
diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index 85659d7fa39..8ac71797c14 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -4,11 +4,9 @@
 import findAndFollowLink from './shortcuts_dashboard_navigation';
 
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.Shortcuts = (function() {
     function Shortcuts(skipResetBindings) {
-      this.onToggleHelp = bind(this.onToggleHelp, this);
+      this.onToggleHelp = this.onToggleHelp.bind(this);
       this.enabledHelp = [];
       if (!skipResetBindings) {
         Mousetrap.reset();
diff --git a/app/assets/javascripts/shortcuts_blob.js b/app/assets/javascripts/shortcuts_blob.js
index bfe90aef71e..ccbf7c59165 100644
--- a/app/assets/javascripts/shortcuts_blob.js
+++ b/app/assets/javascripts/shortcuts_blob.js
@@ -1,14 +1,14 @@
 /* global Mousetrap */
 /* global Shortcuts */
 
-require('./shortcuts');
+import './shortcuts';
 
 const defaults = {
   skipResetBindings: false,
   fileBlobPermalinkUrl: null,
 };
 
-class ShortcutsBlob extends Shortcuts {
+export default class ShortcutsBlob extends Shortcuts {
   constructor(opts) {
     const options = Object.assign({}, defaults, opts);
     super(options.skipResetBindings);
@@ -25,5 +25,3 @@ class ShortcutsBlob extends Shortcuts {
     }
   }
 }
-
-module.exports = ShortcutsBlob;
diff --git a/app/assets/javascripts/shortcuts_find_file.js b/app/assets/javascripts/shortcuts_find_file.js
index a27ac264a5c..b18b6139b35 100644
--- a/app/assets/javascripts/shortcuts_find_file.js
+++ b/app/assets/javascripts/shortcuts_find_file.js
@@ -2,7 +2,7 @@
 /* global Mousetrap */
 /* global ShortcutsNavigation */
 
-require('./shortcuts_navigation');
+import './shortcuts_navigation';
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
diff --git a/app/assets/javascripts/shortcuts_issuable.js b/app/assets/javascripts/shortcuts_issuable.js
index fe58e98cee5..51448252c0f 100644
--- a/app/assets/javascripts/shortcuts_issuable.js
+++ b/app/assets/javascripts/shortcuts_issuable.js
@@ -3,8 +3,8 @@
 /* global ShortcutsNavigation */
 /* global sidebar */
 
-require('mousetrap');
-require('./shortcuts_navigation');
+import 'mousetrap';
+import './shortcuts_navigation';
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -38,7 +38,7 @@ require('./shortcuts_navigation');
     }
 
     ShortcutsIssuable.prototype.replyWithSelectedText = function() {
-      var quote, documentFragment, selected, separator;
+      var quote, documentFragment, el, selected, separator;
       var replyField = $('.js-main-target-form #note_note');
 
       documentFragment = window.gl.utils.getSelectedFragment();
@@ -47,10 +47,8 @@ require('./shortcuts_navigation');
         return;
       }
 
-      // If the documentFragment contains more than just Markdown, don't copy as GFM.
-      if (documentFragment.querySelector('.md, .wiki')) return;
-
-      selected = window.gl.CopyAsGFM.nodeToGFM(documentFragment);
+      el = window.gl.CopyAsGFM.transformGFMSelection(documentFragment.cloneNode(true));
+      selected = window.gl.CopyAsGFM.nodeToGFM(el);
 
       if (selected.trim() === "") {
         return;
@@ -79,7 +77,9 @@ require('./shortcuts_navigation');
     ShortcutsIssuable.prototype.editIssue = function() {
       var $editBtn;
       $editBtn = $('.issuable-edit');
-      return gl.utils.visitUrl($editBtn.attr('href'));
+      // Need to click the element as on issues, editing is inline
+      // on merge request, editing is on a different page
+      $editBtn.get(0).click();
     };
 
     ShortcutsIssuable.prototype.openSidebarDropdown = function(name) {
diff --git a/app/assets/javascripts/shortcuts_navigation.js b/app/assets/javascripts/shortcuts_navigation.js
index c74ab0afd0c..55bae0c08a1 100644
--- a/app/assets/javascripts/shortcuts_navigation.js
+++ b/app/assets/javascripts/shortcuts_navigation.js
@@ -1,9 +1,9 @@
 /* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-arrow-callback, consistent-return, no-return-assign */
 /* global Mousetrap */
 /* global Shortcuts */
-import findAndFollowLink from './shortcuts_dashboard_navigation';
 
-require('./shortcuts');
+import findAndFollowLink from './shortcuts_dashboard_navigation';
+import './shortcuts';
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
diff --git a/app/assets/javascripts/shortcuts_network.js b/app/assets/javascripts/shortcuts_network.js
index 4c2bf8bf001..cc44082efa9 100644
--- a/app/assets/javascripts/shortcuts_network.js
+++ b/app/assets/javascripts/shortcuts_network.js
@@ -2,7 +2,7 @@
 /* global Mousetrap */
 /* global ShortcutsNavigation */
 
-require('./shortcuts_navigation');
+import './shortcuts_navigation';
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 294d087554e..c44892dae3d 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -1,12 +1,10 @@
 /* eslint-disable func-names, prefer-arrow-callback, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, one-var-declaration-per-line, consistent-return, no-param-reassign, max-len */
 
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   window.SingleFileDiff = (function() {
     var COLLAPSED_HTML, ERROR_HTML, LOADING_HTML, WRAPPER;
 
-    WRAPPER = '<div class="diff-content diff-wrap-lines"></div>';
+    WRAPPER = '<div class="diff-content"></div>';
 
     LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>';
 
@@ -16,7 +14,7 @@
 
     function SingleFileDiff(file) {
       this.file = file;
-      this.toggleDiff = bind(this.toggleDiff, this);
+      this.toggleDiff = this.toggleDiff.bind(this);
       this.content = $('.diff-content', this.file);
       this.$toggleIcon = $('.diff-toggle-caret', this.file);
       this.diffForPath = this.content.find('[data-diff-for-path]').data('diff-for-path');
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index b1402c0a880..419c458ff34 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -1,5 +1,6 @@
 /* global Flash */
-require('vendor/task_list');
+
+import 'deckar01-task_list';
 
 class TaskList {
   constructor(options = {}) {
diff --git a/app/assets/javascripts/templates/issuable_template_selector.js b/app/assets/javascripts/templates/issuable_template_selector.js
index e62f429f1ae..9dd14488f22 100644
--- a/app/assets/javascripts/templates/issuable_template_selector.js
+++ b/app/assets/javascripts/templates/issuable_template_selector.js
@@ -1,5 +1,5 @@
 /* eslint-disable comma-dangle, max-len, no-useless-return, no-param-reassign, max-len */
-/* global Api */
+import Api from '../api';
 
 import TemplateSelector from '../blob/template_selector';
 
diff --git a/app/assets/javascripts/terminal/terminal_bundle.js b/app/assets/javascripts/terminal/terminal_bundle.js
index 13cf3a10a38..134522ef961 100644
--- a/app/assets/javascripts/terminal/terminal_bundle.js
+++ b/app/assets/javascripts/terminal/terminal_bundle.js
@@ -1,7 +1,9 @@
-require('vendor/xterm/encoding-indexes.js');
-require('vendor/xterm/encoding.js');
-window.Terminal = require('vendor/xterm/xterm.js');
-require('vendor/xterm/fit.js');
-require('./terminal.js');
+import 'vendor/xterm/encoding-indexes';
+import 'vendor/xterm/encoding';
+import Terminal from 'vendor/xterm/xterm';
+import 'vendor/xterm/fit';
+import './terminal';
+
+window.Terminal = Terminal;
 
 $(() => new gl.Terminal({ selector: '#terminal' }));
diff --git a/app/assets/javascripts/todos.js b/app/assets/javascripts/todos.js
index 8be58023c84..7230946b484 100644
--- a/app/assets/javascripts/todos.js
+++ b/app/assets/javascripts/todos.js
@@ -1,5 +1,6 @@
 /* eslint-disable class-methods-use-this, no-unneeded-ternary, quote-props */
-/* global UsersSelect */
+
+import UsersSelect from './users_select';
 
 class Todos {
   constructor() {
diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js
index 500b78fc5d8..cd5280948fd 100644
--- a/app/assets/javascripts/u2f/authenticate.js
+++ b/app/assets/javascripts/u2f/authenticate.js
@@ -10,18 +10,16 @@
 (function() {
   const global = window.gl || (window.gl = {});
 
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   global.U2FAuthenticate = (function() {
     function U2FAuthenticate(container, form, u2fParams, fallbackButton, fallbackUI) {
       this.container = container;
-      this.renderNotSupported = bind(this.renderNotSupported, this);
-      this.renderAuthenticated = bind(this.renderAuthenticated, this);
-      this.renderError = bind(this.renderError, this);
-      this.renderInProgress = bind(this.renderInProgress, this);
-      this.renderTemplate = bind(this.renderTemplate, this);
-      this.authenticate = bind(this.authenticate, this);
-      this.start = bind(this.start, this);
+      this.renderNotSupported = this.renderNotSupported.bind(this);
+      this.renderAuthenticated = this.renderAuthenticated.bind(this);
+      this.renderError = this.renderError.bind(this);
+      this.renderInProgress = this.renderInProgress.bind(this);
+      this.renderTemplate = this.renderTemplate.bind(this);
+      this.authenticate = this.authenticate.bind(this);
+      this.start = this.start.bind(this);
       this.appId = u2fParams.app_id;
       this.challenge = u2fParams.challenge;
       this.form = form;
diff --git a/app/assets/javascripts/u2f/error.js b/app/assets/javascripts/u2f/error.js
index fd1829efe18..3119b3480c3 100644
--- a/app/assets/javascripts/u2f/error.js
+++ b/app/assets/javascripts/u2f/error.js
@@ -2,12 +2,10 @@
 /* global u2f */
 
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.U2FError = (function() {
     function U2FError(errorCode, u2fFlowType) {
       this.errorCode = errorCode;
-      this.message = bind(this.message, this);
+      this.message = this.message.bind(this);
       this.httpsDisabled = window.location.protocol !== 'https:';
       this.u2fFlowType = u2fFlowType;
     }
diff --git a/app/assets/javascripts/u2f/register.js b/app/assets/javascripts/u2f/register.js
index 17631f2908d..1234d17b8fd 100644
--- a/app/assets/javascripts/u2f/register.js
+++ b/app/assets/javascripts/u2f/register.js
@@ -8,19 +8,17 @@
 // State Flow #1: setup -> in_progress -> registered -> POST to server
 // State Flow #2: setup -> in_progress -> error -> setup
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.U2FRegister = (function() {
     function U2FRegister(container, u2fParams) {
       this.container = container;
-      this.renderNotSupported = bind(this.renderNotSupported, this);
-      this.renderRegistered = bind(this.renderRegistered, this);
-      this.renderError = bind(this.renderError, this);
-      this.renderInProgress = bind(this.renderInProgress, this);
-      this.renderSetup = bind(this.renderSetup, this);
-      this.renderTemplate = bind(this.renderTemplate, this);
-      this.register = bind(this.register, this);
-      this.start = bind(this.start, this);
+      this.renderNotSupported = this.renderNotSupported.bind(this);
+      this.renderRegistered = this.renderRegistered.bind(this);
+      this.renderError = this.renderError.bind(this);
+      this.renderInProgress = this.renderInProgress.bind(this);
+      this.renderSetup = this.renderSetup.bind(this);
+      this.renderTemplate = this.renderTemplate.bind(this);
+      this.register = this.register.bind(this);
+      this.start = this.start.bind(this);
       this.appId = u2fParams.app_id;
       this.registerRequests = u2fParams.register_requests;
       this.signRequests = u2fParams.sign_requests;
diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index b9d57cbcad4..ff2208baeab 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -1,11 +1,10 @@
 import Cookies from 'js-cookie';
 
-const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
-
 export default class UserCallout {
-  constructor() {
-    this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
-    this.userCalloutBody = $('.user-callout');
+  constructor(className = 'user-callout') {
+    this.userCalloutBody = $(`.${className}`);
+    this.cookieName = this.userCalloutBody.data('uid');
+    this.isCalloutDismissed = Cookies.get(this.cookieName);
     this.init();
   }
 
@@ -18,7 +17,7 @@ export default class UserCallout {
   dismissCallout(e) {
     const $currentTarget = $(e.currentTarget);
 
-    Cookies.set(USER_CALLOUT_COOKIE, 'true', { expires: 365 });
+    Cookies.set(this.cookieName, 'true', { expires: 365 });
 
     if ($currentTarget.hasClass('close')) {
       this.userCalloutBody.remove();
diff --git a/app/assets/javascripts/users/calendar.js b/app/assets/javascripts/users/calendar.js
index 32ffa2f0ac0..b11f691e424 100644
--- a/app/assets/javascripts/users/calendar.js
+++ b/app/assets/javascripts/users/calendar.js
@@ -3,12 +3,10 @@
 import d3 from 'd3';
 
 (function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
   this.Calendar = (function() {
     function Calendar(timestamps, calendar_activities_path) {
       this.calendar_activities_path = calendar_activities_path;
-      this.clickDay = bind(this.clickDay, this);
+      this.clickDay = this.clickDay.bind(this);
       this.currentSelectedDate = '';
       this.daySpace = 1;
       this.daySize = 15;
diff --git a/app/assets/javascripts/users/users_bundle.js b/app/assets/javascripts/users/users_bundle.js
index 580e2d84be5..a38ce4eb25e 100644
--- a/app/assets/javascripts/users/users_bundle.js
+++ b/app/assets/javascripts/users/users_bundle.js
@@ -1 +1 @@
-require('./calendar');
+import './calendar';
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 4b4710fafee..b25e638902c 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -5,676 +5,701 @@
 // TODO: remove eventHub hack after code splitting refactor
 window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
 
-(function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
-    slice = [].slice;
-
-  this.UsersSelect = (function() {
-    function UsersSelect(currentUser, els) {
-      var $els;
-      this.users = bind(this.users, this);
-      this.user = bind(this.user, this);
-      this.usersPath = "/autocomplete/users.json";
-      this.userPath = "/autocomplete/users/:id.json";
-      if (currentUser != null) {
-        if (typeof currentUser === 'object') {
-          this.currentUser = currentUser;
-        } else {
-          this.currentUser = JSON.parse(currentUser);
-        }
+function UsersSelect(currentUser, els) {
+  var $els;
+  this.users = this.users.bind(this);
+  this.user = this.user.bind(this);
+  this.usersPath = "/autocomplete/users.json";
+  this.userPath = "/autocomplete/users/:id.json";
+  if (currentUser != null) {
+    if (typeof currentUser === 'object') {
+      this.currentUser = currentUser;
+    } else {
+      this.currentUser = JSON.parse(currentUser);
+    }
+  }
+
+  $els = $(els);
+
+  if (!els) {
+    $els = $('.js-user-search');
+  }
+
+  $els.each((function(_this) {
+    return function(i, dropdown) {
+      var options = {};
+      var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, defaultNullUser, firstUser, issueURL, selectedId, selectedIdDefault, showAnyUser, showNullUser, showMenuAbove;
+      $dropdown = $(dropdown);
+      options.projectId = $dropdown.data('project-id');
+      options.groupId = $dropdown.data('group-id');
+      options.showCurrentUser = $dropdown.data('current-user');
+      options.todoFilter = $dropdown.data('todo-filter');
+      options.todoStateFilter = $dropdown.data('todo-state-filter');
+      options.perPage = $dropdown.data('per-page');
+      showNullUser = $dropdown.data('null-user');
+      defaultNullUser = $dropdown.data('null-user-default');
+      showMenuAbove = $dropdown.data('showMenuAbove');
+      showAnyUser = $dropdown.data('any-user');
+      firstUser = $dropdown.data('first-user');
+      options.authorId = $dropdown.data('author-id');
+      defaultLabel = $dropdown.data('default-label');
+      issueURL = $dropdown.data('issueUpdate');
+      $selectbox = $dropdown.closest('.selectbox');
+      $block = $selectbox.closest('.block');
+      abilityName = $dropdown.data('ability-name');
+      $value = $block.find('.value');
+      $collapsedSidebar = $block.find('.sidebar-collapsed-user');
+      $loading = $block.find('.block-loading').fadeOut();
+      selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
+      selectedId = $dropdown.data('selected');
+
+      if (selectedId === undefined) {
+        selectedId = selectedIdDefault;
       }
 
-      $els = $(els);
+      const assignYourself = function () {
+        const unassignedSelected = $dropdown.closest('.selectbox')
+          .find(`input[name='${$dropdown.data('field-name')}'][value=0]`);
+
+        if (unassignedSelected) {
+          unassignedSelected.remove();
+        }
+
+        // Save current selected user to the DOM
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = $dropdown.data('field-name');
 
-      if (!els) {
-        $els = $('.js-user-search');
+        const currentUserInfo = $dropdown.data('currentUserInfo');
+
+        if (currentUserInfo) {
+          input.value = currentUserInfo.id;
+          input.dataset.meta = currentUserInfo.name;
+        } else if (_this.currentUser) {
+          input.value = _this.currentUser.id;
+        }
+
+        if ($selectbox) {
+          $dropdown.parent().before(input);
+        } else {
+          $dropdown.after(input);
+        }
+      };
+
+      if ($block[0]) {
+        $block[0].addEventListener('assignYourself', assignYourself);
       }
 
-      $els.each((function(_this) {
-        return function(i, dropdown) {
-          var options = {};
-          var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, defaultNullUser, firstUser, issueURL, selectedId, selectedIdDefault, showAnyUser, showNullUser, showMenuAbove;
-          $dropdown = $(dropdown);
-          options.projectId = $dropdown.data('project-id');
-          options.groupId = $dropdown.data('group-id');
-          options.showCurrentUser = $dropdown.data('current-user');
-          options.todoFilter = $dropdown.data('todo-filter');
-          options.todoStateFilter = $dropdown.data('todo-state-filter');
-          showNullUser = $dropdown.data('null-user');
-          defaultNullUser = $dropdown.data('null-user-default');
-          showMenuAbove = $dropdown.data('showMenuAbove');
-          showAnyUser = $dropdown.data('any-user');
-          firstUser = $dropdown.data('first-user');
-          options.authorId = $dropdown.data('author-id');
-          defaultLabel = $dropdown.data('default-label');
-          issueURL = $dropdown.data('issueUpdate');
-          $selectbox = $dropdown.closest('.selectbox');
-          $block = $selectbox.closest('.block');
-          abilityName = $dropdown.data('ability-name');
-          $value = $block.find('.value');
-          $collapsedSidebar = $block.find('.sidebar-collapsed-user');
-          $loading = $block.find('.block-loading').fadeOut();
-          selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
-          selectedId = $dropdown.data('selected');
-
-          if (selectedId === undefined) {
-            selectedId = selectedIdDefault;
+      const getSelectedUserInputs = function() {
+        return $selectbox
+          .find(`input[name="${$dropdown.data('field-name')}"]`);
+      };
+
+      const getSelected = function() {
+        return getSelectedUserInputs()
+          .map((index, input) => parseInt(input.value, 10))
+          .get();
+      };
+
+      const checkMaxSelect = function() {
+        const maxSelect = $dropdown.data('max-select');
+        if (maxSelect) {
+          const selected = getSelected();
+
+          if (selected.length > maxSelect) {
+            const firstSelectedId = selected[0];
+            const firstSelected = $dropdown.closest('.selectbox')
+              .find(`input[name='${$dropdown.data('field-name')}'][value=${firstSelectedId}]`);
+
+            firstSelected.remove();
+            emitSidebarEvent('sidebar.removeAssignee', {
+              id: firstSelectedId,
+            });
           }
+        }
+      };
+
+      const getMultiSelectDropdownTitle = function(selectedUser, isSelected) {
+        const selectedUsers = getSelected()
+          .filter(u => u !== 0);
+
+        const firstUser = getSelectedUserInputs()
+          .map((index, input) => ({
+            name: input.dataset.meta,
+            value: parseInt(input.value, 10),
+          }))
+          .filter(u => u.id !== 0)
+          .get(0);
+
+        if (selectedUsers.length === 0) {
+          return 'Unassigned';
+        } else if (selectedUsers.length === 1) {
+          return firstUser.name;
+        } else if (isSelected) {
+          const otherSelected = selectedUsers.filter(s => s !== selectedUser.id);
+          return `${selectedUser.name} + ${otherSelected.length} more`;
+        } else {
+          return `${firstUser.name} + ${selectedUsers.length - 1} more`;
+        }
+      };
 
-          const assignYourself = function () {
-            const unassignedSelected = $dropdown.closest('.selectbox')
-              .find(`input[name='${$dropdown.data('field-name')}'][value=0]`);
-
-            if (unassignedSelected) {
-              unassignedSelected.remove();
-            }
+      $('.assign-to-me-link').on('click', (e) => {
+        e.preventDefault();
+        $(e.currentTarget).hide();
 
-            // Save current selected user to the DOM
-            const input = document.createElement('input');
-            input.type = 'hidden';
-            input.name = $dropdown.data('field-name');
+        if ($dropdown.data('multiSelect')) {
+          assignYourself();
+          checkMaxSelect();
 
-            const currentUserInfo = $dropdown.data('currentUserInfo');
+          const currentUserInfo = $dropdown.data('currentUserInfo');
+          $dropdown.find('.dropdown-toggle-text').text(getMultiSelectDropdownTitle(currentUserInfo)).removeClass('is-default');
+        } else {
+          const $input = $(`input[name="${$dropdown.data('field-name')}"]`);
+          $input.val(gon.current_user_id);
+          selectedId = $input.val();
+          $dropdown.find('.dropdown-toggle-text').text(gon.current_user_fullname).removeClass('is-default');
+        }
+      });
 
-            if (currentUserInfo) {
-              input.value = currentUserInfo.id;
-              input.dataset.meta = currentUserInfo.name;
-            } else if (_this.currentUser) {
-              input.value = _this.currentUser.id;
-            }
+      $block.on('click', '.js-assign-yourself', (e) => {
+        e.preventDefault();
+        return assignTo(_this.currentUser.id);
+      });
 
-            if ($selectbox) {
-              $dropdown.parent().before(input);
-            } else {
-              $dropdown.after(input);
-            }
-          };
+      assignTo = function(selected) {
+        var data;
+        data = {};
+        data[abilityName] = {};
+        data[abilityName].assignee_id = selected != null ? selected : null;
+        $loading.removeClass('hidden').fadeIn();
+        $dropdown.trigger('loading.gl.dropdown');
+
+        return $.ajax({
+          type: 'PUT',
+          dataType: 'json',
+          url: issueURL,
+          data: data
+        }).done(function(data) {
+          var user;
+          $dropdown.trigger('loaded.gl.dropdown');
+          $loading.fadeOut();
+          if (data.assignee) {
+            user = {
+              name: data.assignee.name,
+              username: data.assignee.username,
+              avatar: data.assignee.avatar_url
+            };
+          } else {
+            user = {
+              name: 'Unassigned',
+              username: '',
+              avatar: ''
+            };
+          }
+          $value.html(assigneeTemplate(user));
+          $collapsedSidebar.attr('title', user.name).tooltip('fixTitle');
+          return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
+        });
+      };
+      collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
+      assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
+      return $dropdown.glDropdown({
+        showMenuAbove: showMenuAbove,
+        data: function(term, callback) {
+          var isAuthorFilter;
+          isAuthorFilter = $('.js-author-search');
+          return _this.users(term, options, function(users) {
+            // GitLabDropdownFilter returns this.instance
+            // GitLabDropdownRemote returns this.options.instance
+            const glDropdown = this.instance || this.options.instance;
+            glDropdown.options.processData(term, users, callback);
+          }.bind(this));
+        },
+        processData: function(term, data, callback) {
+          let users = data;
+
+          // Only show assigned user list when there is no search term
+          if ($dropdown.hasClass('js-multiselect') && term.length === 0) {
+            const selectedInputs = getSelectedUserInputs();
+
+            // Potential duplicate entries when dealing with issue board
+            // because issue board is also managed by vue
+            const selectedUsers = _.uniq(selectedInputs, false, a => a.value)
+              .filter((input) => {
+                const userId = parseInt(input.value, 10);
+                const inUsersArray = users.find(u => u.id === userId);
+
+                return !inUsersArray && userId !== 0;
+              })
+              .map((input) => {
+                const userId = parseInt(input.value, 10);
+                const { avatarUrl, avatar_url, name, username } = input.dataset;
+                return {
+                  avatar_url: avatarUrl || avatar_url,
+                  id: userId,
+                  name,
+                  username,
+                };
+              });
 
-          if ($block[0]) {
-            $block[0].addEventListener('assignYourself', assignYourself);
+            users = data.concat(selectedUsers);
           }
 
-          const getSelectedUserInputs = function() {
-            return $selectbox
-              .find(`input[name="${$dropdown.data('field-name')}"]`);
-          };
-
-          const getSelected = function() {
-            return getSelectedUserInputs()
-              .map((index, input) => parseInt(input.value, 10))
-              .get();
-          };
-
-          const checkMaxSelect = function() {
-            const maxSelect = $dropdown.data('max-select');
-            if (maxSelect) {
-              const selected = getSelected();
-
-              if (selected.length > maxSelect) {
-                const firstSelectedId = selected[0];
-                const firstSelected = $dropdown.closest('.selectbox')
-                  .find(`input[name='${$dropdown.data('field-name')}'][value=${firstSelectedId}]`);
-
-                firstSelected.remove();
-                emitSidebarEvent('sidebar.removeAssignee', {
-                  id: firstSelectedId,
-                });
+          let anyUser;
+          let index;
+          let j;
+          let len;
+          let name;
+          let obj;
+          let showDivider;
+          if (term.length === 0) {
+            showDivider = 0;
+            if (firstUser) {
+              // Move current user to the front of the list
+              for (index = j = 0, len = users.length; j < len; index = (j += 1)) {
+                obj = users[index];
+                if (obj.username === firstUser) {
+                  users.splice(index, 1);
+                  users.unshift(obj);
+                  break;
+                }
               }
             }
-          };
-
-          const getMultiSelectDropdownTitle = function(selectedUser, isSelected) {
-            const selectedUsers = getSelected()
-              .filter(u => u !== 0);
-
-            const firstUser = getSelectedUserInputs()
-              .map((index, input) => ({
-                name: input.dataset.meta,
-                value: parseInt(input.value, 10),
-              }))
-              .filter(u => u.id !== 0)
-              .get(0);
-
-            if (selectedUsers.length === 0) {
-              return 'Unassigned';
-            } else if (selectedUsers.length === 1) {
-              return firstUser.name;
-            } else if (isSelected) {
-              const otherSelected = selectedUsers.filter(s => s !== selectedUser.id);
-              return `${selectedUser.name} + ${otherSelected.length} more`;
-            } else {
-              return `${firstUser.name} + ${selectedUsers.length - 1} more`;
+            if (showNullUser) {
+              showDivider += 1;
+              users.unshift({
+                beforeDivider: true,
+                name: 'Unassigned',
+                id: 0
+              });
+            }
+            if (showAnyUser) {
+              showDivider += 1;
+              name = showAnyUser;
+              if (name === true) {
+                name = 'Any User';
+              }
+              anyUser = {
+                beforeDivider: true,
+                name: name,
+                id: null
+              };
+              users.unshift(anyUser);
             }
-          };
-
-          $('.assign-to-me-link').on('click', (e) => {
-            e.preventDefault();
-            $(e.currentTarget).hide();
-
-            if ($dropdown.data('multiSelect')) {
-              assignYourself();
-              checkMaxSelect();
 
-              const currentUserInfo = $dropdown.data('currentUserInfo');
-              $dropdown.find('.dropdown-toggle-text').text(getMultiSelectDropdownTitle(currentUserInfo)).removeClass('is-default');
-            } else {
-              const $input = $(`input[name="${$dropdown.data('field-name')}"]`);
-              $input.val(gon.current_user_id);
-              selectedId = $input.val();
-              $dropdown.find('.dropdown-toggle-text').text(gon.current_user_fullname).removeClass('is-default');
+            if (showDivider) {
+              users.splice(showDivider, 0, 'divider');
             }
-          });
 
-          $block.on('click', '.js-assign-yourself', (e) => {
-            e.preventDefault();
-            return assignTo(_this.currentUser.id);
-          });
+            if ($dropdown.hasClass('js-multiselect')) {
+              const selected = getSelected().filter(i => i !== 0);
 
-          assignTo = function(selected) {
-            var data;
-            data = {};
-            data[abilityName] = {};
-            data[abilityName].assignee_id = selected != null ? selected : null;
-            $loading.removeClass('hidden').fadeIn();
-            $dropdown.trigger('loading.gl.dropdown');
-
-            return $.ajax({
-              type: 'PUT',
-              dataType: 'json',
-              url: issueURL,
-              data: data
-            }).done(function(data) {
-              var user;
-              $dropdown.trigger('loaded.gl.dropdown');
-              $loading.fadeOut();
-              if (data.assignee) {
-                user = {
-                  name: data.assignee.name,
-                  username: data.assignee.username,
-                  avatar: data.assignee.avatar_url
-                };
-              } else {
-                user = {
-                  name: 'Unassigned',
-                  username: '',
-                  avatar: ''
-                };
-              }
-              $value.html(assigneeTemplate(user));
-              $collapsedSidebar.attr('title', user.name).tooltip('fixTitle');
-              return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
-            });
-          };
-          collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
-          assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
-          return $dropdown.glDropdown({
-            showMenuAbove: showMenuAbove,
-            data: function(term, callback) {
-              var isAuthorFilter;
-              isAuthorFilter = $('.js-author-search');
-              return _this.users(term, options, function(users) {
-                // GitLabDropdownFilter returns this.instance
-                // GitLabDropdownRemote returns this.options.instance
-                const glDropdown = this.instance || this.options.instance;
-                glDropdown.options.processData(term, users, callback);
-              }.bind(this));
-            },
-            processData: function(term, users, callback) {
-              let anyUser;
-              let index;
-              let j;
-              let len;
-              let name;
-              let obj;
-              let showDivider;
-              if (term.length === 0) {
-                showDivider = 0;
-                if (firstUser) {
-                  // Move current user to the front of the list
-                  for (index = j = 0, len = users.length; j < len; index = (j += 1)) {
-                    obj = users[index];
-                    if (obj.username === firstUser) {
-                      users.splice(index, 1);
-                      users.unshift(obj);
-                      break;
-                    }
-                  }
-                }
-                if (showNullUser) {
+              if (selected.length > 0) {
+                if ($dropdown.data('dropdown-header')) {
                   showDivider += 1;
-                  users.unshift({
-                    beforeDivider: true,
-                    name: 'Unassigned',
-                    id: 0
+                  users.splice(showDivider, 0, {
+                    header: $dropdown.data('dropdown-header'),
                   });
                 }
-                if (showAnyUser) {
-                  showDivider += 1;
-                  name = showAnyUser;
-                  if (name === true) {
-                    name = 'Any User';
-                  }
-                  anyUser = {
-                    beforeDivider: true,
-                    name: name,
-                    id: null
-                  };
-                  users.unshift(anyUser);
-                }
 
-                if (showDivider) {
-                  users.splice(showDivider, 0, 'divider');
-                }
+                const selectedUsers = users
+                  .filter(u => selected.indexOf(u.id) !== -1)
+                  .sort((a, b) => a.name > b.name);
 
-                if ($dropdown.hasClass('js-multiselect')) {
-                  const selected = getSelected().filter(i => i !== 0);
+                users = users.filter(u => selected.indexOf(u.id) === -1);
 
-                  if (selected.length > 0) {
-                    if ($dropdown.data('dropdown-header')) {
-                      showDivider += 1;
-                      users.splice(showDivider, 0, {
-                        header: $dropdown.data('dropdown-header'),
-                      });
-                    }
-
-                    const selectedUsers = users
-                      .filter(u => selected.indexOf(u.id) !== -1)
-                      .sort((a, b) => a.name > b.name);
+                selectedUsers.forEach((selectedUser) => {
+                  showDivider += 1;
+                  users.splice(showDivider, 0, selectedUser);
+                });
 
-                    users = users.filter(u => selected.indexOf(u.id) === -1);
+                users.splice(showDivider + 1, 0, 'divider');
+              }
+            }
+          }
 
-                    selectedUsers.forEach((selectedUser) => {
-                      showDivider += 1;
-                      users.splice(showDivider, 0, selectedUser);
-                    });
+          callback(users);
+          if (showMenuAbove) {
+            $dropdown.data('glDropdown').positionMenuAbove();
+          }
+        },
+        filterable: true,
+        filterRemote: true,
+        search: {
+          fields: ['name', 'username']
+        },
+        selectable: true,
+        fieldName: $dropdown.data('field-name'),
+        toggleLabel: function(selected, el, glDropdown) {
+          const inputValue = glDropdown.filterInput.val();
+
+          if (this.multiSelect && inputValue === '') {
+            // Remove non-users from the fullData array
+            const users = glDropdown.filteredFullData();
+            const callback = glDropdown.parseData.bind(glDropdown);
+
+            // Update the data model
+            this.processData(inputValue, users, callback);
+          }
 
-                    users.splice(showDivider + 1, 0, 'divider');
-                  }
-                }
-              }
+          if (this.multiSelect) {
+            return getMultiSelectDropdownTitle(selected, $(el).hasClass('is-active'));
+          }
 
-              callback(users);
-              if (showMenuAbove) {
-                $dropdown.data('glDropdown').positionMenuAbove();
-              }
-            },
-            filterable: true,
-            filterRemote: true,
-            search: {
-              fields: ['name', 'username']
-            },
-            selectable: true,
-            fieldName: $dropdown.data('field-name'),
-            toggleLabel: function(selected, el, glDropdown) {
-              const inputValue = glDropdown.filterInput.val();
-
-              if (this.multiSelect && inputValue === '') {
-                // Remove non-users from the fullData array
-                const users = glDropdown.filteredFullData();
-                const callback = glDropdown.parseData.bind(glDropdown);
-
-                // Update the data model
-                this.processData(inputValue, users, callback);
-              }
+          if (selected && 'id' in selected && $(el).hasClass('is-active')) {
+            $dropdown.find('.dropdown-toggle-text').removeClass('is-default');
+            if (selected.text) {
+              return selected.text;
+            } else {
+              return selected.name;
+            }
+          } else {
+            $dropdown.find('.dropdown-toggle-text').addClass('is-default');
+            return defaultLabel;
+          }
+        },
+        defaultLabel: defaultLabel,
+        hidden: function(e) {
+          if ($dropdown.hasClass('js-multiselect')) {
+            emitSidebarEvent('sidebar.saveAssignees');
+          }
 
-              if (this.multiSelect) {
-                return getMultiSelectDropdownTitle(selected, $(el).hasClass('is-active'));
-              }
+          if (!$dropdown.data('always-show-selectbox')) {
+            $selectbox.hide();
 
-              if (selected && 'id' in selected && $(el).hasClass('is-active')) {
-                $dropdown.find('.dropdown-toggle-text').removeClass('is-default');
-                if (selected.text) {
-                  return selected.text;
-                } else {
-                  return selected.name;
-                }
-              } else {
-                $dropdown.find('.dropdown-toggle-text').addClass('is-default');
-                return defaultLabel;
-              }
-            },
-            defaultLabel: defaultLabel,
-            hidden: function(e) {
-              if ($dropdown.hasClass('js-multiselect')) {
-                emitSidebarEvent('sidebar.saveAssignees');
-              }
+            // Recalculate where .value is because vue might have changed it
+            $block = $selectbox.closest('.block');
+            $value = $block.find('.value');
+            // display:block overrides the hide-collapse rule
+            $value.css('display', '');
+          }
+        },
+        multiSelect: $dropdown.hasClass('js-multiselect'),
+        inputMeta: $dropdown.data('input-meta'),
+        clicked: function(options) {
+          const { $el, e, isMarking } = options;
+          const user = options.selectedObj;
+
+          if ($dropdown.hasClass('js-multiselect')) {
+            const isActive = $el.hasClass('is-active');
+            const previouslySelected = $dropdown.closest('.selectbox')
+                .find("input[name='" + ($dropdown.data('field-name')) + "'][value!=0]");
+
+            // Enables support for limiting the number of users selected
+            // Automatically removes the first on the list if more users are selected
+            checkMaxSelect();
+
+            if (user.beforeDivider && user.name.toLowerCase() === 'unassigned') {
+              // Unassigned selected
+              previouslySelected.each((index, element) => {
+                const id = parseInt(element.value, 10);
+                element.remove();
+              });
+              emitSidebarEvent('sidebar.removeAllAssignees');
+            } else if (isActive) {
+              // user selected
+              emitSidebarEvent('sidebar.addAssignee', user);
 
-              if (!$dropdown.data('always-show-selectbox')) {
-                $selectbox.hide();
+              // Remove unassigned selection (if it was previously selected)
+              const unassignedSelected = $dropdown.closest('.selectbox')
+                .find("input[name='" + ($dropdown.data('field-name')) + "'][value=0]");
 
-                // Recalculate where .value is because vue might have changed it
-                $block = $selectbox.closest('.block');
-                $value = $block.find('.value');
-                // display:block overrides the hide-collapse rule
-                $value.css('display', '');
+              if (unassignedSelected) {
+                unassignedSelected.remove();
+              }
+            } else {
+              if (previouslySelected.length === 0) {
+              // Select unassigned because there is no more selected users
+                this.addInput($dropdown.data('field-name'), 0, {});
               }
-            },
-            multiSelect: $dropdown.hasClass('js-multiselect'),
-            inputMeta: $dropdown.data('input-meta'),
-            clicked: function(options) {
-              const { $el, e, isMarking } = options;
-              const user = options.selectedObj;
-
-              if ($dropdown.hasClass('js-multiselect')) {
-                const isActive = $el.hasClass('is-active');
-                const previouslySelected = $dropdown.closest('.selectbox')
-                    .find("input[name='" + ($dropdown.data('field-name')) + "'][value!=0]");
-
-                // Enables support for limiting the number of users selected
-                // Automatically removes the first on the list if more users are selected
-                checkMaxSelect();
-
-                if (user.beforeDivider && user.name.toLowerCase() === 'unassigned') {
-                  // Unassigned selected
-                  previouslySelected.each((index, element) => {
-                    const id = parseInt(element.value, 10);
-                    element.remove();
-                  });
-                  emitSidebarEvent('sidebar.removeAllAssignees');
-                } else if (isActive) {
-                  // user selected
-                  emitSidebarEvent('sidebar.addAssignee', user);
 
-                  // Remove unassigned selection (if it was previously selected)
-                  const unassignedSelected = $dropdown.closest('.selectbox')
-                    .find("input[name='" + ($dropdown.data('field-name')) + "'][value=0]");
+              // User unselected
+              emitSidebarEvent('sidebar.removeAssignee', user);
+            }
 
-                  if (unassignedSelected) {
-                    unassignedSelected.remove();
-                  }
-                } else {
-                  if (previouslySelected.length === 0) {
-                  // Select unassigned because there is no more selected users
-                    this.addInput($dropdown.data('field-name'), 0, {});
-                  }
+            if (getSelected().find(u => u === gon.current_user_id)) {
+              $('.assign-to-me-link').hide();
+            } else {
+              $('.assign-to-me-link').show();
+            }
+          }
 
-                  // User unselected
-                  emitSidebarEvent('sidebar.removeAssignee', user);
-                }
+          var isIssueIndex, isMRIndex, page, selected;
+          page = $('body').data('page');
+          isIssueIndex = page === 'projects:issues:index';
+          isMRIndex = (page === page && page === 'projects:merge_requests:index');
+          if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
+            e.preventDefault();
 
-                if (getSelected().find(u => u === gon.current_user_id)) {
-                  $('.assign-to-me-link').hide();
-                } else {
-                  $('.assign-to-me-link').show();
-                }
-              }
+            const isSelecting = (user.id !== selectedId);
+            selectedId = isSelecting ? user.id : selectedIdDefault;
 
-              var isIssueIndex, isMRIndex, page, selected;
-              page = $('body').data('page');
-              isIssueIndex = page === 'projects:issues:index';
-              isMRIndex = (page === page && page === 'projects:merge_requests:index');
-              if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
-                e.preventDefault();
+            if (selectedId === gon.current_user_id) {
+              $('.assign-to-me-link').hide();
+            } else {
+              $('.assign-to-me-link').show();
+            }
+            return;
+          }
+          if ($el.closest('.add-issues-modal').length) {
+            gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = user.id;
+          } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
+            return Issuable.filterResults($dropdown.closest('form'));
+          } else if ($dropdown.hasClass('js-filter-submit')) {
+            return $dropdown.closest('form').submit();
+          } else if (!$dropdown.hasClass('js-multiselect')) {
+            selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
+            return assignTo(selected);
+          }
 
-                const isSelecting = (user.id !== selectedId);
-                selectedId = isSelecting ? user.id : selectedIdDefault;
+          // Automatically close dropdown after assignee is selected
+          // since CE has no multiple assignees
+          // EE does not have a max-select
+          if ($dropdown.data('max-select') &&
+              getSelected().length === $dropdown.data('max-select')) {
+            // Close the dropdown
+            $dropdown.dropdown('toggle');
+          }
+        },
+        id: function (user) {
+          return user.id;
+        },
+        opened: function(e) {
+          const $el = $(e.currentTarget);
+          const selected = getSelected();
+          if ($dropdown.hasClass('js-issue-board-sidebar') && selected.length === 0) {
+            this.addInput($dropdown.data('field-name'), 0, {});
+          }
+          $el.find('.is-active').removeClass('is-active');
 
-                if (selectedId === gon.current_user_id) {
-                  $('.assign-to-me-link').hide();
-                } else {
-                  $('.assign-to-me-link').show();
-                }
-                return;
-              }
-              if ($el.closest('.add-issues-modal').length) {
-                gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = user.id;
-              } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
-                return Issuable.filterResults($dropdown.closest('form'));
-              } else if ($dropdown.hasClass('js-filter-submit')) {
-                return $dropdown.closest('form').submit();
-              } else if (!$dropdown.hasClass('js-multiselect')) {
-                selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
-                return assignTo(selected);
-              }
+          function highlightSelected(id) {
+            $el.find(`li[data-user-id="${id}"] .dropdown-menu-user-link`).addClass('is-active');
+          }
 
-              // Automatically close dropdown after assignee is selected
-              // since CE has no multiple assignees
-              // EE does not have a max-select
-              if ($dropdown.data('max-select') &&
-                  getSelected().length === $dropdown.data('max-select')) {
-                // Close the dropdown
-                $dropdown.dropdown('toggle');
-              }
-            },
-            id: function (user) {
-              return user.id;
-            },
-            opened: function(e) {
-              const $el = $(e.currentTarget);
-              const selected = getSelected();
-              if ($dropdown.hasClass('js-issue-board-sidebar') && selected.length === 0) {
-                this.addInput($dropdown.data('field-name'), 0, {});
-              }
-              $el.find('.is-active').removeClass('is-active');
+          if (selected.length > 0) {
+            getSelected().forEach(selectedId => highlightSelected(selectedId));
+          } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
+            highlightSelected(0);
+          } else {
+            highlightSelected(selectedId);
+          }
+        },
+        updateLabel: $dropdown.data('dropdown-title'),
+        renderRow: function(user) {
+          var avatar, img, listClosingTags, listWithName, listWithUserName, username;
+          username = user.username ? "@" + user.username : "";
+          avatar = user.avatar_url ? user.avatar_url : false;
 
-              function highlightSelected(id) {
-                $el.find(`li[data-user-id="${id}"] .dropdown-menu-user-link`).addClass('is-active');
-              }
+          let selected = false;
 
-              if (selected.length > 0) {
-                getSelected().forEach(selectedId => highlightSelected(selectedId));
-              } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-                highlightSelected(0);
-              } else {
-                highlightSelected(selectedId);
-              }
-            },
-            updateLabel: $dropdown.data('dropdown-title'),
-            renderRow: function(user) {
-              var avatar, img, listClosingTags, listWithName, listWithUserName, username;
-              username = user.username ? "@" + user.username : "";
-              avatar = user.avatar_url ? user.avatar_url : false;
+          if (this.multiSelect) {
+            selected = getSelected().find(u => user.id === u);
 
-              let selected = false;
+            const fieldName = this.fieldName;
+            const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");
 
-              if (this.multiSelect) {
-                selected = getSelected().find(u => user.id === u);
+            if (field.length) {
+              selected = true;
+            }
+          } else {
+            selected = user.id === selectedId;
+          }
 
-                const fieldName = this.fieldName;
-                const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");
+          img = "";
+          if (user.beforeDivider != null) {
+            `<li><a href='#' class='${selected === true ? 'is-active' : ''}'>${user.name}</a></li>`;
+          } else {
+            if (avatar) {
+              img = "<img src='" + avatar + "' class='avatar avatar-inline' width='32' />";
+            }
+          }
 
-                if (field.length) {
-                  selected = true;
+          return `
+            <li data-user-id=${user.id}>
+              <a href='#' class='dropdown-menu-user-link ${selected === true ? 'is-active' : ''}'>
+                ${img}
+                <strong class='dropdown-menu-user-full-name'>
+                  ${user.name}
+                </strong>
+                ${username ? `<span class='dropdown-menu-user-username'>${username}</span>` : ''}
+              </a>
+            </li>
+          `;
+        }
+      });
+    };
+  })(this));
+  $('.ajax-users-select').each((function(_this) {
+    return function(i, select) {
+      var firstUser, showAnyUser, showEmailUser, showNullUser;
+      var options = {};
+      options.skipLdap = $(select).hasClass('skip_ldap');
+      options.projectId = $(select).data('project-id');
+      options.groupId = $(select).data('group-id');
+      options.showCurrentUser = $(select).data('current-user');
+      options.pushCodeToProtectedBranches = $(select).data('push-code-to-protected-branches');
+      options.authorId = $(select).data('author-id');
+      options.skipUsers = $(select).data('skip-users');
+      showNullUser = $(select).data('null-user');
+      showAnyUser = $(select).data('any-user');
+      showEmailUser = $(select).data('email-user');
+      firstUser = $(select).data('first-user');
+      return $(select).select2({
+        placeholder: "Search for a user",
+        multiple: $(select).hasClass('multiselect'),
+        minimumInputLength: 0,
+        query: function(query) {
+          return _this.users(query.term, options, function(users) {
+            var anyUser, data, emailUser, index, j, len, name, nullUser, obj, ref;
+            data = {
+              results: users
+            };
+            if (query.term.length === 0) {
+              if (firstUser) {
+                // Move current user to the front of the list
+                ref = data.results;
+                for (index = j = 0, len = ref.length; j < len; index = (j += 1)) {
+                  obj = ref[index];
+                  if (obj.username === firstUser) {
+                    data.results.splice(index, 1);
+                    data.results.unshift(obj);
+                    break;
+                  }
                 }
               } else {
                 selected = user.id === selectedId;
               }
-
-              img = "";
-              if (user.beforeDivider != null) {
-                `<li><a href='#' class='${selected === true ? 'is-active' : ''}'>${user.name}</a></li>`;
-              } else {
-                if (avatar) {
-                  img = "<img src='" + avatar + "' class='avatar avatar-inline' width='32' />";
+              if (showNullUser) {
+                nullUser = {
+                  name: 'Unassigned',
+                  id: 0
+                };
+                data.results.unshift(nullUser);
+              }
+              if (showAnyUser) {
+                name = showAnyUser;
+                if (name === true) {
+                  name = 'Any User';
                 }
+                anyUser = {
+                  name: name,
+                  id: null
+                };
+                data.results.unshift(anyUser);
               }
-
-              return `
-                <li data-user-id=${user.id}>
-                  <a href='#' class='dropdown-menu-user-link ${selected === true ? 'is-active' : ''}'>
-                    ${img}
-                    <strong class='dropdown-menu-user-full-name'>
-                      ${user.name}
-                    </strong>
-                    ${username ? `<span class='dropdown-menu-user-username'>${username}</span>` : ''}
-                  </a>
-                </li>
-              `;
             }
-          });
-        };
-      })(this));
-      $('.ajax-users-select').each((function(_this) {
-        return function(i, select) {
-          var firstUser, showAnyUser, showEmailUser, showNullUser;
-          var options = {};
-          options.skipLdap = $(select).hasClass('skip_ldap');
-          options.projectId = $(select).data('project-id');
-          options.groupId = $(select).data('group-id');
-          options.showCurrentUser = $(select).data('current-user');
-          options.pushCodeToProtectedBranches = $(select).data('push-code-to-protected-branches');
-          options.authorId = $(select).data('author-id');
-          options.skipUsers = $(select).data('skip-users');
-          showNullUser = $(select).data('null-user');
-          showAnyUser = $(select).data('any-user');
-          showEmailUser = $(select).data('email-user');
-          firstUser = $(select).data('first-user');
-          return $(select).select2({
-            placeholder: "Search for a user",
-            multiple: $(select).hasClass('multiselect'),
-            minimumInputLength: 0,
-            query: function(query) {
-              return _this.users(query.term, options, function(users) {
-                var anyUser, data, emailUser, index, j, len, name, nullUser, obj, ref;
-                data = {
-                  results: users
-                };
-                if (query.term.length === 0) {
-                  if (firstUser) {
-                    // Move current user to the front of the list
-                    ref = data.results;
-                    for (index = j = 0, len = ref.length; j < len; index = (j += 1)) {
-                      obj = ref[index];
-                      if (obj.username === firstUser) {
-                        data.results.splice(index, 1);
-                        data.results.unshift(obj);
-                        break;
-                      }
-                    }
-                  }
-                  if (showNullUser) {
-                    nullUser = {
-                      name: 'Unassigned',
-                      id: 0
-                    };
-                    data.results.unshift(nullUser);
-                  }
-                  if (showAnyUser) {
-                    name = showAnyUser;
-                    if (name === true) {
-                      name = 'Any User';
-                    }
-                    anyUser = {
-                      name: name,
-                      id: null
-                    };
-                    data.results.unshift(anyUser);
-                  }
-                }
-                if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
-                  var trimmed = query.term.trim();
-                  emailUser = {
-                    name: "Invite \"" + query.term + "\"",
-                    username: trimmed,
-                    id: trimmed
-                  };
-                  data.results.unshift(emailUser);
-                }
-                return query.callback(data);
-              });
-            },
-            initSelection: function() {
-              var args;
-              args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-              return _this.initSelection.apply(_this, args);
-            },
-            formatResult: function() {
-              var args;
-              args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-              return _this.formatResult.apply(_this, args);
-            },
-            formatSelection: function() {
-              var args;
-              args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-              return _this.formatSelection.apply(_this, args);
-            },
-            dropdownCssClass: "ajax-users-dropdown",
-            // we do not want to escape markup since we are displaying html in results
-            escapeMarkup: function(m) {
-              return m;
+            if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
+              var trimmed = query.term.trim();
+              emailUser = {
+                name: "Invite \"" + query.term + "\"",
+                username: trimmed,
+                id: trimmed
+              };
+              data.results.unshift(emailUser);
             }
+            return query.callback(data);
           });
-        };
-      })(this));
-    }
-
-    UsersSelect.prototype.initSelection = function(element, callback) {
-      var id, nullUser;
-      id = $(element).val();
-      if (id === "0") {
-        nullUser = {
-          name: 'Unassigned'
-        };
-        return callback(nullUser);
-      } else if (id !== "") {
-        return this.user(id, callback);
-      }
-    };
-
-    UsersSelect.prototype.formatResult = function(user) {
-      var avatar;
-      if (user.avatar_url) {
-        avatar = user.avatar_url;
-      } else {
-        avatar = gon.default_avatar_url;
-      }
-      return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar s24' src='" + avatar + "'></div> <div class='user-name'>" + user.name + "</div> <div class='user-username'>" + (user.username || "") + "</div> </div>";
-    };
-
-    UsersSelect.prototype.formatSelection = function(user) {
-      return user.name;
-    };
-
-    UsersSelect.prototype.user = function(user_id, callback) {
-      if (!/^\d+$/.test(user_id)) {
-        return false;
-      }
-
-      var url;
-      url = this.buildUrl(this.userPath);
-      url = url.replace(':id', user_id);
-      return $.ajax({
-        url: url,
-        dataType: "json"
-      }).done(function(user) {
-        return callback(user);
-      });
-    };
-
-    // Return users list. Filtered by query
-    // Only active users retrieved
-    UsersSelect.prototype.users = function(query, options, callback) {
-      var url;
-      url = this.buildUrl(this.usersPath);
-      return $.ajax({
-        url: url,
-        data: {
-          search: query,
-          per_page: 20,
-          active: true,
-          project_id: options.projectId || null,
-          group_id: options.groupId || null,
-          skip_ldap: options.skipLdap || null,
-          todo_filter: options.todoFilter || null,
-          todo_state_filter: options.todoStateFilter || null,
-          current_user: options.showCurrentUser || null,
-          push_code_to_protected_branches: options.pushCodeToProtectedBranches || null,
-          author_id: options.authorId || null,
-          skip_users: options.skipUsers || null
         },
-        dataType: "json"
-      }).done(function(users) {
-        return callback(users);
+        initSelection: function() {
+          var args;
+          args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
+          return _this.initSelection.apply(_this, args);
+        },
+        formatResult: function() {
+          var args;
+          args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
+          return _this.formatResult.apply(_this, args);
+        },
+        formatSelection: function() {
+          var args;
+          args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
+          return _this.formatSelection.apply(_this, args);
+        },
+        dropdownCssClass: "ajax-users-dropdown",
+        // we do not want to escape markup since we are displaying html in results
+        escapeMarkup: function(m) {
+          return m;
+        }
       });
     };
-
-    UsersSelect.prototype.buildUrl = function(url) {
-      if (gon.relative_url_root != null) {
-        url = gon.relative_url_root.replace(/\/$/, '') + url;
-      }
-      return url;
+  })(this));
+}
+
+UsersSelect.prototype.initSelection = function(element, callback) {
+  var id, nullUser;
+  id = $(element).val();
+  if (id === "0") {
+    nullUser = {
+      name: 'Unassigned'
     };
-
-    return UsersSelect;
-  })();
-}).call(window);
+    return callback(nullUser);
+  } else if (id !== "") {
+    return this.user(id, callback);
+  }
+};
+
+UsersSelect.prototype.formatResult = function(user) {
+  var avatar;
+  if (user.avatar_url) {
+    avatar = user.avatar_url;
+  } else {
+    avatar = gon.default_avatar_url;
+  }
+  return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar s24' src='" + avatar + "'></div> <div class='user-name'>" + user.name + "</div> <div class='user-username'>" + (user.username || "") + "</div> </div>";
+};
+
+UsersSelect.prototype.formatSelection = function(user) {
+  return user.name;
+};
+
+UsersSelect.prototype.user = function(user_id, callback) {
+  if (!/^\d+$/.test(user_id)) {
+    return false;
+  }
+
+  var url;
+  url = this.buildUrl(this.userPath);
+  url = url.replace(':id', user_id);
+  return $.ajax({
+    url: url,
+    dataType: "json"
+  }).done(function(user) {
+    return callback(user);
+  });
+};
+
+// Return users list. Filtered by query
+// Only active users retrieved
+UsersSelect.prototype.users = function(query, options, callback) {
+  var url;
+  url = this.buildUrl(this.usersPath);
+  return $.ajax({
+    url: url,
+    data: {
+      search: query,
+      per_page: options.perPage || 20,
+      active: true,
+      project_id: options.projectId || null,
+      group_id: options.groupId || null,
+      skip_ldap: options.skipLdap || null,
+      todo_filter: options.todoFilter || null,
+      todo_state_filter: options.todoStateFilter || null,
+      current_user: options.showCurrentUser || null,
+      push_code_to_protected_branches: options.pushCodeToProtectedBranches || null,
+      author_id: options.authorId || null,
+      skip_users: options.skipUsers || null
+    },
+    dataType: "json"
+  }).done(function(users) {
+    return callback(users);
+  });
+};
+
+UsersSelect.prototype.buildUrl = function(url) {
+  if (gon.relative_url_root != null) {
+    url = gon.relative_url_root.replace(/\/$/, '') + url;
+  }
+  return url;
+};
+
+export default UsersSelect;
diff --git a/app/assets/javascripts/version_check_image.js b/app/assets/javascripts/version_check_image.js
index d4f716acb72..88ba991af47 100644
--- a/app/assets/javascripts/version_check_image.js
+++ b/app/assets/javascripts/version_check_image.js
@@ -1,4 +1,4 @@
-class VersionCheckImage {
+export default class VersionCheckImage {
   static bindErrorEvent(imageElement) {
     imageElement.off('error').on('error', () => imageElement.hide());
   }
@@ -6,5 +6,3 @@ class VersionCheckImage {
 
 window.gl = window.gl || {};
 gl.VersionCheckImage = VersionCheckImage;
-
-module.exports = VersionCheckImage;
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index cfd34970f11..f8b3fb748ae 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -1,4 +1,4 @@
-require('../../lib/utils/text_utility');
+import '../../lib/utils/text_utility';
 
 export default {
   name: 'MRWidgetHeader',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
index 486b13e60af..8155218681c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
@@ -1,4 +1,6 @@
 import statusCodes from '~/lib/utils/http_status';
+import { bytesToMiB } from '~/lib/utils/number_utils';
+
 import MemoryGraph from '../../vue_shared/components/memory_graph';
 import MRWidgetService from '../services/mr_widget_service';
 
@@ -9,8 +11,8 @@ export default {
   },
   data() {
     return {
-      // memoryFrom: 0,
-      // memoryTo: 0,
+      memoryFrom: 0,
+      memoryTo: 0,
       memoryMetrics: [],
       deploymentTime: 0,
       hasMetrics: false,
@@ -35,18 +37,38 @@ export default {
     shouldShowMetricsUnavailable() {
       return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
     },
+    memoryChangeType() {
+      const memoryTo = Number(this.memoryTo);
+      const memoryFrom = Number(this.memoryFrom);
+
+      if (memoryTo > memoryFrom) {
+        return 'increased';
+      } else if (memoryTo < memoryFrom) {
+        return 'decreased';
+      }
+
+      return 'unchanged';
+    },
   },
   methods: {
+    getMegabytes(bytesString) {
+      const valueInBytes = Number(bytesString).toFixed(2);
+      return (bytesToMiB(valueInBytes)).toFixed(2);
+    },
     computeGraphData(metrics, deploymentTime) {
       this.loadingMetrics = false;
-      const { memory_values } = metrics;
-      // if (memory_previous.length > 0) {
-      //   this.memoryFrom = Number(memory_previous[0].value[1]).toFixed(2);
-      // }
-      //
-      // if (memory_current.length > 0) {
-      //   this.memoryTo = Number(memory_current[0].value[1]).toFixed(2);
-      // }
+      const { memory_before, memory_after, memory_values } = metrics;
+
+      // Both `memory_before` and `memory_after` objects
+      // have peculiar structure where accessing only a specific
+      // index yeilds correct value that we can use to show memory delta.
+      if (memory_before.length > 0) {
+        this.memoryFrom = this.getMegabytes(memory_before[0].value[1]);
+      }
+
+      if (memory_after.length > 0) {
+        this.memoryTo = this.getMegabytes(memory_after[0].value[1]);
+      }
 
       if (memory_values.length > 0) {
         this.hasMetrics = true;
@@ -102,7 +124,7 @@ export default {
       <p
         v-if="shouldShowMemoryGraph"
         class="usage-info js-usage-info">
-        Deployment memory usage:
+        Memory usage <b>{{memoryChangeType}}</b> from {{memoryFrom}}MB to {{memoryTo}}MB
       </p>
       <p
         v-if="shouldShowLoadFailure"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
index 281b74f2701..c02e10128e2 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
@@ -54,6 +54,9 @@ export default {
               :href="mr.pipeline.path"
               class="pipeline-id">#{{mr.pipeline.id}}</a>
             {{mr.pipeline.details.status.label}}
+          </span>
+          <span
+            v-if="mr.pipeline.details.stages.length > 0">
             with {{stageText}}
           </span>
           <div class="mr-widget-pipeline-graph">
@@ -70,7 +73,7 @@ export default {
             for
             <a
               :href="mr.pipeline.commit.commit_path"
-              class="monospace js-commit-link">
+              class="commit-sha js-commit-link">
               {{mr.pipeline.commit.short_id}}</a>.
           </span>
           <span
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
index 8c4535f1337..375a382615a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
@@ -1,17 +1,42 @@
+import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
+
 export default {
   name: 'MRWidgetNothingToMerge',
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return { emptyStateSVG };
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        type="button"
-        class="btn btn-success btn-small"
-        disabled="true">
-        Merge
-      </button>
-      <span class="bold">
-        There is nothing to merge from source branch into target branch.
-        Please push new commits or use a different branch.
-      </span>
+    <div class="mr-widget-body empty-state">
+      <div class="row">
+        <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
+          <span v-html="emptyStateSVG"></span>
+        </div>
+        <div class="text col-sm-7 col-sm-pull-5 col-xs-12">
+          <span>
+            Merge requests are a place to propose changes you have made to a project
+            and discuss those changes with others.
+          </span>
+          <p>
+            Interested parties can even contribute by pushing commits if they want to.
+          </p>
+          <p>
+            Currently there are no changes in this merge request's source branch.
+            Please push new commits or use a different branch.
+          </p>
+          <a
+            v-if="mr.newBlobPath"
+            :href="mr.newBlobPath"
+            class="btn btn-inverted btn-save">
+            Create file
+          </a>
+        </div>
+      </div>
     </div>
   `,
 };
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index d866d4e94b0..fcd4fdaf09f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -13,7 +13,7 @@ export default {
   },
   data() {
     return {
-      removeSourceBranch: true,
+      removeSourceBranch: this.mr.shouldRemoveSourceBranch,
       mergeWhenBuildSucceeds: false,
       useCommitMessageWithDescription: false,
       setToMergeWhenPipelineSucceeds: false,
@@ -69,6 +69,9 @@ export default {
         || this.isMakingRequest
         || this.mr.preventMerge);
     },
+    isRemoveSourceBranchButtonDisabled() {
+      return this.isMergeButtonDisabled || !this.mr.canRemoveSourceBranch;
+    },
     shouldShowSquashBeforeMerge() {
       const { commitsCount, enableSquashBeforeMerge } = this.mr;
       return enableSquashBeforeMerge && commitsCount > 1;
@@ -252,8 +255,9 @@ export default {
       <template v-if="isMergeAllowed()">
         <label class="spacing">
           <input
+            id="remove-source-branch-input"
             v-model="removeSourceBranch"
-            :disabled="isMergeButtonDisabled"
+            :disabled="isRemoveSourceBranchButtonDisabled"
             type="checkbox"/> Remove source branch
         </label>
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index bfe30ee4c08..fe5e1bbb55c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -41,3 +41,4 @@ export { default as getStateKey } from './stores/get_state_key';
 export { default as mrWidgetOptions } from './mr_widget_options';
 export { default as stateMaps } from './stores/state_maps';
 export { default as SquashBeforeMerge } from './components/states/mr_widget_squash_before_merge';
+export { default as notify } from '../lib/utils/notify';
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
index cd65ac069c5..43ef468c303 100644
--- a/app/assets/javascripts/vue_merge_request_widget/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -4,6 +4,8 @@ import {
 } from './dependencies';
 
 document.addEventListener('DOMContentLoaded', () => {
+  gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;
+
   const vm = new Vue(mrWidgetOptions);
 
   window.gl.mrWidget = {
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 99600b6664e..2339a00ddd0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -29,6 +29,7 @@ import {
   eventHub,
   stateMaps,
   SquashBeforeMerge,
+  notify,
 } from './dependencies';
 
 export default {
@@ -77,8 +78,10 @@ export default {
       this.service.checkStatus()
         .then(res => res.json())
         .then((res) => {
+          this.handleNotification(res);
           this.mr.setData(res);
           this.setFavicon();
+
           if (cb) {
             cb.call(null, res);
           }
@@ -136,6 +139,15 @@ export default {
           new Flash('Something went wrong. Please try again.'); // eslint-disable-line
         });
     },
+    handleNotification(data) {
+      if (data.ci_status === this.mr.ciStatus) return;
+
+      const label = data.pipeline.details.status.label;
+      const title = `Pipeline ${label}`;
+      const message = `Pipeline ${label} for "${data.title}"`;
+
+      notify.notifyMe(title, message, this.mr.gitlabLogo);
+    },
     resumePolling() {
       this.pollingInterval.resume();
     },
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 1533c857863..69bc1436284 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -5,6 +5,8 @@ export default class MergeRequestStore {
 
   constructor(data) {
     this.sha = data.diff_head_sha;
+    this.gitlabLogo = data.gitlabLogo;
+
     this.setData(data);
   }
 
@@ -50,13 +52,14 @@ export default class MergeRequestStore {
     this.cancelAutoMergePath = data.cancel_merge_when_pipeline_succeeds_path;
     this.removeWIPPath = data.remove_wip_path;
     this.sourceBranchRemoved = !data.source_branch_exists;
-    this.shouldRemoveSourceBranch = (data.merge_params || {}).should_remove_source_branch || false;
+    this.shouldRemoveSourceBranch = data.remove_source_branch || false;
     this.onlyAllowMergeIfPipelineSucceeds = data.only_allow_merge_if_pipeline_succeeds || false;
     this.mergeWhenPipelineSucceeds = data.merge_when_pipeline_succeeds || false;
     this.mergePath = data.merge_path;
     this.statusPath = data.status_path;
     this.emailPatchesPath = data.email_patches_path;
     this.plainDiffPath = data.plain_diff_path;
+    this.newBlobPath = data.new_blob_path;
     this.createIssueToResolveDiscussionsPath = data.create_issue_to_resolve_discussions_path;
     this.mergeCheckPath = data.merge_check_path;
     this.mergeActionsContentPath = data.commit_change_content_path;
diff --git a/app/assets/javascripts/vue_shared/ci_action_icons.js b/app/assets/javascripts/vue_shared/ci_action_icons.js
index ee41dc95beb..b21f0ab49fd 100644
--- a/app/assets/javascripts/vue_shared/ci_action_icons.js
+++ b/app/assets/javascripts/vue_shared/ci_action_icons.js
@@ -3,24 +3,19 @@ import retrySVG from 'icons/_icon_action_retry.svg';
 import playSVG from 'icons/_icon_action_play.svg';
 import stopSVG from 'icons/_icon_action_stop.svg';
 
+/**
+ * For the provided action returns the respective SVG
+ *
+ * @param  {String} action
+ * @return {SVG|String}
+ */
 export default function getActionIcon(action) {
-  let icon;
-  switch (action) {
-    case 'icon_action_cancel':
-      icon = cancelSVG;
-      break;
-    case 'icon_action_retry':
-      icon = retrySVG;
-      break;
-    case 'icon_action_play':
-      icon = playSVG;
-      break;
-    case 'icon_action_stop':
-      icon = stopSVG;
-      break;
-    default:
-      icon = '';
-  }
+  const icons = {
+    icon_action_cancel: cancelSVG,
+    icon_action_play: playSVG,
+    icon_action_retry: retrySVG,
+    icon_action_stop: stopSVG,
+  };
 
-  return icon;
+  return icons[action] || '';
 }
diff --git a/app/assets/javascripts/vue_shared/components/commit.js b/app/assets/javascripts/vue_shared/components/commit.js
index fb68abd95a2..ff5ae28e062 100644
--- a/app/assets/javascripts/vue_shared/components/commit.js
+++ b/app/assets/javascripts/vue_shared/components/commit.js
@@ -1,4 +1,5 @@
 import commitIconSvg from 'icons/_icon_commit.svg';
+import userAvatarLink from './user_avatar/user_avatar_link.vue';
 
 export default {
   props: {
@@ -90,7 +91,7 @@ export default {
     hasAuthor() {
       return this.author &&
         this.author.avatar_url &&
-        this.author.web_url &&
+        this.author.path &&
         this.author.username;
     },
 
@@ -110,6 +111,9 @@ export default {
     return { commitIconSvg };
   },
 
+  components: {
+    userAvatarLink,
+  },
   template: `
     <div class="branch-commit">
 
@@ -119,30 +123,28 @@ export default {
       </div>
 
       <a v-if="hasCommitRef"
-        class="monospace branch-name"
+        class="ref-name"
         :href="commitRef.ref_url">
         {{commitRef.name}}
       </a>
 
       <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
 
-      <a class="commit-id monospace"
+      <a class="commit-sha"
         :href="commitUrl">
         {{shortSha}}
       </a>
 
-      <p class="commit-title">
-        <span v-if="title">
-          <a v-if="hasAuthor"
+      <div class="commit-title flex-truncate-parent">
+        <span v-if="title" class="flex-truncate-child">
+          <user-avatar-link
+            v-if="hasAuthor"
             class="avatar-image-container"
-            :href="author.web_url">
-            <img
-              class="avatar has-tooltip s20"
-              :src="author.avatar_url"
-              :alt="userImageAltDescription"
-              :title="author.username" />
-          </a>
-
+            :link-href="author.path"
+            :img-src="author.avatar_url"
+            :img-alt="userImageAltDescription"
+            :tooltip-text="author.username"
+          />
           <a class="commit-row-message"
             :href="commitUrl">
             {{title}}
@@ -151,7 +153,7 @@ export default {
         <span v-else>
           Cant find HEAD commit for this branch
         </span>
-      </p>
+      </div>
     </div>
   `,
 };
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
new file mode 100644
index 00000000000..fe6d6a792e7
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -0,0 +1,133 @@
+<script>
+import ciIconBadge from './ci_badge_link.vue';
+import loadingIcon from './loading_icon.vue';
+import timeagoTooltip from './time_ago_tooltip.vue';
+import tooltipMixin from '../mixins/tooltip';
+import userAvatarImage from './user_avatar/user_avatar_image.vue';
+
+/**
+ * Renders header component for job and pipeline page based on UI mockups
+ *
+ * Used in:
+ * - job show page
+ * - pipeline show page
+ */
+export default {
+  props: {
+    status: {
+      type: Object,
+      required: true,
+    },
+    itemName: {
+      type: String,
+      required: true,
+    },
+    itemId: {
+      type: Number,
+      required: true,
+    },
+    time: {
+      type: String,
+      required: true,
+    },
+    user: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+
+  mixins: [
+    tooltipMixin,
+  ],
+
+  components: {
+    ciIconBadge,
+    loadingIcon,
+    timeagoTooltip,
+    userAvatarImage,
+  },
+
+  computed: {
+    userAvatarAltText() {
+      return `${this.user.name}'s avatar`;
+    },
+  },
+
+  methods: {
+    onClickAction(action) {
+      this.$emit('actionClicked', action);
+    },
+  },
+};
+</script>
+<template>
+  <header class="page-content-header">
+    <section class="header-main-content">
+
+      <ci-icon-badge :status="status" />
+
+      <strong>
+        {{itemName}} #{{itemId}}
+      </strong>
+
+      triggered
+
+      <timeago-tooltip :time="time" />
+
+      by
+
+      <template v-if="user">
+        <a
+          :href="user.path"
+          :title="user.email"
+          class="js-user-link commit-committer-link"
+          ref="tooltip">
+
+          <user-avatar-image
+            :img-src="user.avatar_url"
+            :img-alt="userAvatarAltText"
+            :tooltip-text="user.name"
+            :img-size="24"
+            />
+
+          {{user.name}}
+        </a>
+      </template>
+    </section>
+
+    <section
+      class="header-action-button nav-controls"
+      v-if="actions.length">
+      <template
+        v-for="action in actions">
+        <a
+          v-if="action.type === 'link'"
+          :href="action.path"
+          :class="action.cssClass">
+          {{action.label}}
+        </a>
+
+        <button
+          v-else="action.type === 'button'"
+          @click="onClickAction(action)"
+          :disabled="action.isLoading"
+          :class="action.cssClass"
+          type="button">
+          {{action.label}}
+
+          <i
+            v-show="action.isLoading"
+            class="fa fa-spin fa-spinner"
+            aria-hidden="true">
+          </i>
+        </button>
+      </template>
+    </section>
+  </header>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/loading_icon.vue b/app/assets/javascripts/vue_shared/components/loading_icon.vue
new file mode 100644
index 00000000000..41b1d0165b0
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/loading_icon.vue
@@ -0,0 +1,33 @@
+<script>
+  export default {
+    props: {
+      label: {
+        type: String,
+        required: false,
+        default: 'Loading',
+      },
+
+      size: {
+        type: String,
+        required: false,
+        default: '1',
+      },
+    },
+
+    computed: {
+      cssClass() {
+        return `fa-${this.size}x`;
+      },
+    },
+  };
+</script>
+<template>
+  <div class="text-center">
+    <i
+      class="fa fa-spin fa-spinner"
+      :class="cssClass"
+      aria-hidden="true"
+      :aria-label="label">
+    </i>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
new file mode 100644
index 00000000000..e6977681e96
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -0,0 +1,107 @@
+<script>
+  /* global Flash */
+  import markdownHeader from './header.vue';
+  import markdownToolbar from './toolbar.vue';
+
+  export default {
+    props: {
+      markdownPreviewUrl: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        markdownPreview: '',
+        markdownPreviewLoading: false,
+        previewMarkdown: false,
+      };
+    },
+    components: {
+      markdownHeader,
+      markdownToolbar,
+    },
+    methods: {
+      toggleMarkdownPreview() {
+        this.previewMarkdown = !this.previewMarkdown;
+
+        if (!this.previewMarkdown) {
+          this.markdownPreview = '';
+        } else {
+          this.markdownPreviewLoading = true;
+          this.$http.post(
+            this.markdownPreviewUrl,
+            {
+              /*
+                Can't use `$refs` as the component is technically in the parent component
+                so we access the VNode & then get the element
+              */
+              text: this.$slots.textarea[0].elm.value,
+            },
+          )
+          .then((res) => {
+            const data = res.json();
+
+            this.markdownPreviewLoading = false;
+            this.markdownPreview = data.body;
+
+            this.$nextTick(() => {
+              $(this.$refs['markdown-preview']).renderGFM();
+            });
+          })
+          .catch(() => new Flash('Error loading markdown preview'));
+        }
+      },
+    },
+    mounted() {
+      /*
+        GLForm class handles all the toolbar buttons
+      */
+      return new gl.GLForm($(this.$refs['gl-form']), true);
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="md-area prepend-top-default append-bottom-default js-vue-markdown-field"
+    ref="gl-form">
+    <markdown-header
+      :preview-markdown="previewMarkdown"
+      @toggle-markdown="toggleMarkdownPreview" />
+    <div
+      class="md-write-holder"
+      v-show="!previewMarkdown">
+      <div class="zen-backdrop">
+        <slot name="textarea"></slot>
+        <a
+          class="zen-control zen-control-leave js-zen-leave"
+          href="#"
+          aria-label="Enter zen mode">
+          <i
+            class="fa fa-compress"
+            aria-hidden="true">
+          </i>
+        </a>
+        <markdown-toolbar
+          :markdown-docs="markdownDocs" />
+      </div>
+    </div>
+    <div
+      class="md md-preview-holder md-preview"
+      v-show="previewMarkdown">
+      <div
+        ref="markdown-preview"
+        v-html="markdownPreview">
+      </div>
+      <span v-if="markdownPreviewLoading">
+        Loading...
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
new file mode 100644
index 00000000000..1a11f493b7f
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -0,0 +1,113 @@
+<script>
+  import tooltipMixin from '../../mixins/tooltip';
+  import toolbarButton from './toolbar_button.vue';
+
+  export default {
+    mixins: [
+      tooltipMixin,
+    ],
+    props: {
+      previewMarkdown: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    components: {
+      toolbarButton,
+    },
+    methods: {
+      toggleMarkdownPreview(e, form) {
+        if (form && !form.find('.js-vue-markdown-field').length) {
+          return;
+        } else if (e.target.blur) {
+          e.target.blur();
+        }
+
+        this.$emit('toggle-markdown');
+      },
+    },
+    mounted() {
+      $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
+      $(document).on('markdown-preview:hide.vue', this.toggleMarkdownPreview);
+    },
+    beforeDestroy() {
+      $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
+      $(document).off('markdown-preview:hide.vue', this.toggleMarkdownPreview);
+    },
+  };
+</script>
+
+<template>
+  <div class="md-header">
+    <ul class="nav-links clearfix">
+      <li :class="{ active: !previewMarkdown }">
+        <a
+          href="#md-write-holder"
+          tabindex="-1"
+          @click.prevent="toggleMarkdownPreview($event)">
+          Write
+        </a>
+      </li>
+      <li :class="{ active: previewMarkdown }">
+        <a
+          href="#md-preview-holder"
+          tabindex="-1"
+          @click.prevent="toggleMarkdownPreview($event)">
+          Preview
+        </a>
+      </li>
+      <li class="pull-right">
+        <div class="toolbar-group">
+          <toolbar-button
+            tag="**"
+            button-title="Add bold text"
+            icon="bold" />
+          <toolbar-button
+            tag="*"
+            button-title="Add italic text"
+            icon="italic" />
+          <toolbar-button
+            tag="> "
+            :prepend="true"
+            button-title="Insert a quote"
+            icon="quote-right" />
+          <toolbar-button
+            tag="`"
+            tag-block="```"
+            button-title="Insert code"
+            icon="code" />
+          <toolbar-button
+            tag="* "
+            :prepend="true"
+            button-title="Add a bullet list"
+            icon="list-ul" />
+          <toolbar-button
+            tag="1. "
+            :prepend="true"
+            button-title="Add a numbered list"
+            icon="list-ol" />
+          <toolbar-button
+            tag="* [ ] "
+            :prepend="true"
+            button-title="Add a task list"
+            icon="check-square-o" />
+        </div>
+        <div class="toolbar-group">
+          <button
+            aria-label="Go full screen"
+            class="toolbar-btn js-zen-enter"
+            data-container="body"
+            tabindex="-1"
+            title="Go full screen"
+            type="button"
+            ref="tooltip">
+            <i
+              aria-hidden="true"
+              class="fa fa-arrows-alt fa-fw">
+            </i>
+          </button>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
new file mode 100644
index 00000000000..93252293ba6
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -0,0 +1,33 @@
+<script>
+  export default {
+    props: {
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="comment-toolbar clearfix">
+    <div class="toolbar-text">
+      <a
+        :href="markdownDocs"
+        target="_blank"
+        tabindex="-1">
+        Markdown is supported
+      </a>
+    </div>
+    <button
+      class="toolbar-button markdown-selector"
+      type="button"
+      tabindex="-1">
+      <i
+        class="fa fa-file-image-o toolbar-button-icon"
+        aria-hidden="true">
+      </i>
+      Attach a file
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
new file mode 100644
index 00000000000..096be507625
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -0,0 +1,58 @@
+<script>
+  import tooltipMixin from '../../mixins/tooltip';
+
+  export default {
+    mixins: [
+      tooltipMixin,
+    ],
+    props: {
+      buttonTitle: {
+        type: String,
+        required: true,
+      },
+      icon: {
+        type: String,
+        required: true,
+      },
+      tag: {
+        type: String,
+        required: true,
+      },
+      tagBlock: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      prepend: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    computed: {
+      iconClass() {
+        return `fa-${this.icon}`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <button
+    type="button"
+    class="toolbar-btn js-md hidden-xs"
+    tabindex="-1"
+    ref="tooltip"
+    data-container="body"
+    :data-md-tag="tag"
+    :data-md-block="tagBlock"
+    :data-md-prepend="prepend"
+    :title="buttonTitle"
+    :aria-label="buttonTitle">
+    <i
+      aria-hidden="true"
+      class="fa fa-fw"
+      :class="iconClass">
+    </i>
+  </button>
+</template>
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 73e70766494..f60f8eeb43d 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -4,7 +4,7 @@ import PipelinesActionsComponent from '../../pipelines/components/pipelines_acti
 import PipelinesArtifactsComponent from '../../pipelines/components/pipelines_artifacts';
 import ciBadge from './ci_badge_link.vue';
 import PipelinesStageComponent from '../../pipelines/components/stage.vue';
-import PipelinesUrlComponent from '../../pipelines/components/pipeline_url';
+import PipelinesUrlComponent from '../../pipelines/components/pipeline_url.vue';
 import PipelinesTimeagoComponent from '../../pipelines/components/time_ago';
 import CommitComponent from './commit';
 
@@ -62,10 +62,12 @@ export default {
     commitAuthor() {
       let commitAuthorInformation;
 
+      if (!this.pipeline || !this.pipeline.commit) {
+        return null;
+      }
+
       // 1. person who is an author of a commit might be a GitLab user
-      if (this.pipeline &&
-        this.pipeline.commit &&
-        this.pipeline.commit.author) {
+      if (this.pipeline.commit.author) {
         // 2. if person who is an author of a commit is a GitLab user
         // he/she can have a GitLab avatar
         if (this.pipeline.commit.author.avatar_url) {
@@ -77,14 +79,11 @@ export default {
             avatar_url: this.pipeline.commit.author_gravatar_url,
           });
         }
-      }
-
-      // 4. If committer is not a GitLab User he/she can have a Gravatar
-      if (this.pipeline &&
-        this.pipeline.commit) {
+        // 4. If committer is not a GitLab User he/she can have a Gravatar
+      } else {
         commitAuthorInformation = {
           avatar_url: this.pipeline.commit.author_gravatar_url,
-          web_url: `mailto:${this.pipeline.commit.author_email}`,
+          path: `mailto:${this.pipeline.commit.author_email}`,
           username: this.pipeline.commit.author_name,
         };
       }
diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.js b/app/assets/javascripts/vue_shared/components/table_pagination.vue
index ebb14912b00..5e7df22dd83 100644
--- a/app/assets/javascripts/vue_shared/components/table_pagination.js
+++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue
@@ -1,3 +1,4 @@
+<script>
 const PAGINATION_UI_BUTTON_LIMIT = 4;
 const UI_LIMIT = 6;
 const SPREAD = '...';
@@ -114,22 +115,23 @@ export default {
       return items;
     },
   },
-  template: `
-    <div class="gl-pagination">
-      <ul class="pagination clearfix">
-        <li v-for='item in getItems'
-          :class='{
-            page: item.page,
-            prev: item.prev,
-            next: item.next,
-            separator: item.separator,
-            active: item.active,
-            disabled: item.disabled
-          }'
-        >
-          <a @click="changePage($event)">{{item.title}}</a>
-        </li>
-      </ul>
-    </div>
-  `,
 };
+</script>
+<template>
+  <div class="gl-pagination">
+    <ul class="pagination clearfix">
+      <li
+        v-for="item in getItems"
+        :class="{
+          page: item.page,
+          prev: item.prev,
+          next: item.next,
+          separator: item.separator,
+          active: item.active,
+          disabled: item.disabled
+        }">
+        <a @click="changePage($event)">{{item.title}}</a>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
index 934e7e8eacb..af2b4c6786e 100644
--- a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
+++ b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
@@ -1,5 +1,6 @@
 <script>
 import tooltipMixin from '../mixins/tooltip';
+import timeagoMixin from '../mixins/timeago';
 import '../../lib/utils/datetime_utility';
 
 /**
@@ -25,42 +26,33 @@ export default {
       default: false,
     },
 
-    htmlClass: {
+    cssClass: {
       type: String,
       required: false,
       default: '',
     },
   },
 
-  mixins: [tooltipMixin],
+  mixins: [
+    tooltipMixin,
+    timeagoMixin,
+  ],
 
   computed: {
-    cssClass() {
+    timeagoCssClass() {
       return this.shortFormat ? 'js-short-timeago' : 'js-timeago';
     },
-
-    tooltipTitle() {
-      return gl.utils.formatDate(this.time);
-    },
-
-    timeFormated() {
-      const timeago = gl.utils.getTimeago();
-
-      return timeago.format(this.time);
-    },
   },
 };
 </script>
-
 <template>
   <time
-    :class="[cssClass, htmlClass]"
+    :class="[timeagoCssClass, cssClass]"
     class="js-timeago js-timeago-render"
-    :title="tooltipTitle"
+    :title="tooltipTitle(time)"
     :data-placement="tooltipPlacement"
     data-container="body"
-    ref="tooltip"
-  >
-    {{timeFormated}}
+    ref="tooltip">
+    {{timeFormated(time)}}
   </time>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
new file mode 100644
index 00000000000..cd6f8c7aee4
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
@@ -0,0 +1,86 @@
+<script>
+
+/* This is a re-usable vue component for rendering a user avatar that
+  does not need to link to the user's profile. The image and an optional
+  tooltip can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-image
+    :img-src="userAvatarSrc"
+    :img-alt="tooltipText"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+import defaultAvatarUrl from 'images/no_avatar.png';
+import TooltipMixin from '../../mixins/tooltip';
+
+export default {
+  name: 'UserAvatarImage',
+  mixins: [TooltipMixin],
+  props: {
+    imgSrc: {
+      type: String,
+      required: false,
+      default: defaultAvatarUrl,
+    },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: 'user avatar',
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+  computed: {
+    tooltipContainer() {
+      return this.tooltipText ? 'body' : null;
+    },
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+    // API response sends null when gravatar is disabled and
+    // we provide an empty string when we use it inside user avatar link.
+    // In both cases we should render the defaultAvatarUrl
+    imageSource() {
+      return this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc;
+    },
+  },
+};
+</script>
+
+<template>
+  <img
+    class="avatar"
+    :class="[avatarSizeClass, cssClasses]"
+    :src="imageSource"
+    :width="size"
+    :height="size"
+    :alt="imgAlt"
+    :data-container="tooltipContainer"
+    :data-placement="tooltipPlacement"
+    :title="tooltipText"
+    ref="tooltip"
+  />
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
new file mode 100644
index 00000000000..95898d54cf7
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
@@ -0,0 +1,80 @@
+<script>
+
+/* This is a re-usable vue component for rendering a user avatar wrapped in
+  a clickable link (likely to the user's profile). The link, image, and
+  tooltip can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-link
+    :link-href="userProfileUrl"
+    :img-src="userAvatarSrc"
+    :img-alt="tooltipText"
+    :img-size="20"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+import userAvatarImage from './user_avatar_image.vue';
+
+export default {
+  name: 'UserAvatarLink',
+  components: {
+    userAvatarImage,
+  },
+  props: {
+    linkHref: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgSrc: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgCssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgSize: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+};
+</script>
+
+<template>
+  <a
+    class="user-avatar-link"
+    :href="linkHref">
+    <user-avatar-image
+      :img-src="imgSrc"
+      :img-alt="imgAlt"
+      :css-classes="imgCssClasses"
+      :size="imgSize"
+      :tooltip-text="tooltipText"
+      :tooltip-placement="tooltipPlacement"
+    />
+  </a>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
new file mode 100644
index 00000000000..d2ff2ac006e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
@@ -0,0 +1,45 @@
+<script>
+
+/* This is a re-usable vue component for rendering a user avatar svg (typically
+  for a blank state). It will receive styles comparable to the user avatar,
+  but no image is loaded, it isn't wrapped in a link, and tooltips aren't supported.
+  The svg and avatar size can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-svg
+    :svg="potentialApproverSvg"
+    :size="20"
+  />
+
+*/
+
+export default {
+  props: {
+    svg: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+  },
+  computed: {
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <svg
+    :class="avatarSizeClass"
+    :height="size"
+    :width="size"
+    v-html="svg">
+  </svg>
+</template>
+
diff --git a/app/assets/javascripts/vue_shared/mixins/timeago.js b/app/assets/javascripts/vue_shared/mixins/timeago.js
new file mode 100644
index 00000000000..20f63ab663c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/mixins/timeago.js
@@ -0,0 +1,18 @@
+import '../../lib/utils/datetime_utility';
+
+/**
+ * Mixin with time ago methods used in some vue components
+ */
+export default {
+  methods: {
+    timeFormated(time) {
+      const timeago = gl.utils.getTimeago();
+
+      return timeago.format(time);
+    },
+
+    tooltipTitle(time) {
+      return gl.utils.formatDate(time);
+    },
+  },
+};
diff --git a/app/assets/javascripts/vue_shared/mixins/tooltip.js b/app/assets/javascripts/vue_shared/mixins/tooltip.js
index 9bb948bff66..995c0c98505 100644
--- a/app/assets/javascripts/vue_shared/mixins/tooltip.js
+++ b/app/assets/javascripts/vue_shared/mixins/tooltip.js
@@ -6,4 +6,8 @@ export default {
   updated() {
     $(this.$refs.tooltip).tooltip('fixTitle');
   },
+
+  beforeDestroy() {
+    $(this.$refs.tooltip).tooltip('destroy');
+  },
 };
diff --git a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
index d5f87588c28..740930dce5b 100644
--- a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
+++ b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
@@ -4,7 +4,7 @@ import VueResource from 'vue-resource';
 Vue.use(VueResource);
 
 // Maintain a global counter for active requests
-// see: spec/support/wait_for_vue_resource.rb
+// see: spec/support/wait_for_requests.rb
 Vue.http.interceptors.push((request, next) => {
   window.activeVueResources = window.activeVueResources || 0;
   window.activeVueResources += 1;
diff --git a/app/assets/javascripts/wikis.js b/app/assets/javascripts/wikis.js
index 75fd1394a03..4194c1bc08d 100644
--- a/app/assets/javascripts/wikis.js
+++ b/app/assets/javascripts/wikis.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-param-reassign */
 /* global Breakpoints */
 
-require('./breakpoints');
-require('vendor/jquery.nicescroll');
+import 'vendor/jquery.nicescroll';
+import './breakpoints';
 
 ((global) => {
   class Wikis {
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index ce626cf7b46..b7fe552dec2 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -1,5 +1,4 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, consistent-return, camelcase, comma-dangle, max-len */
-/* global Dropzone */
 /* global Mousetrap */
 
 // Zen Mode (full screen) textarea
@@ -7,10 +6,12 @@
 /*= provides zen_mode:enter */
 /*= provides zen_mode:leave */
 
-require('vendor/jquery.scrollTo');
-window.Dropzone = require('dropzone');
-require('mousetrap');
-require('mousetrap/plugins/pause/mousetrap-pause');
+import 'vendor/jquery.scrollTo';
+import Dropzone from 'dropzone';
+import 'mousetrap';
+import 'mousetrap/plugins/pause/mousetrap-pause';
+
+window.Dropzone = Dropzone;
 
 //
 // ### Events
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index d2ec1791d2b..9dc9f9a9068 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -34,6 +34,7 @@
 @import "framework/selects.scss";
 @import "framework/sidebar.scss";
 @import "framework/tables.scss";
+@import "framework/notes.scss";
 @import "framework/timeline.scss";
 @import "framework/typography.scss";
 @import "framework/zen.scss";
@@ -48,3 +49,4 @@
 @import "framework/icons.scss";
 @import "framework/snippets.scss";
 @import "framework/memory_graph.scss";
+@import "framework/responsive-tables.scss";
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 91c1ebd5a7d..4ae2b164d2e 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -10,6 +10,8 @@
   border-radius: $avatar_radius;
   border: 1px solid $avatar-border;
   &.s16 { @include avatar-size(16px, 6px); }
+  &.s18 { @include avatar-size(18px, 6px); }
+  &.s19 { @include avatar-size(19px, 6px); }
   &.s20 { @include avatar-size(20px, 7px); }
   &.s24 { @include avatar-size(24px, 8px); }
   &.s26 { @include avatar-size(26px, 8px); }
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 0db3ac1a60e..75907c35b7e 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -10,7 +10,7 @@
   top: 0;
   margin-top: 3px;
   padding: $gl-padding;
-  z-index: 9;
+  z-index: 300;
   width: 300px;
   font-size: 14px;
   background-color: $white-light;
@@ -110,6 +110,7 @@
 .award-control {
   margin: 0 5px 6px 0;
   outline: 0;
+  position: relative;
 
   &.disabled {
     cursor: default;
@@ -227,8 +228,8 @@
   .award-control-icon-positive,
   .award-control-icon-super-positive {
     position: absolute;
-    left: 11px;
-    bottom: 7px;
+    left: 10px;
+    bottom: 6px;
     opacity: 0;
     @include transition(opacity, transform);
   }
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index ac1fc0eb8ae..fefe5575d9b 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -23,7 +23,6 @@
 
 .row-content-block {
   margin-top: 0;
-  margin-bottom: -$gl-padding;
   background-color: $gray-light;
   padding: $gl-padding;
   margin-bottom: 0;
@@ -312,7 +311,7 @@
 }
 
 .empty-state {
-  margin: 100px 0 0;
+  margin: 5% auto 0;
 
   .text-content {
     max-width: 460px;
@@ -335,27 +334,12 @@
   }
 
   .btn {
-    margin: $btn-side-margin $btn-side-margin 0 0;
-  }
-
-  @media(max-width: $screen-xs-max) {
-    margin-top: 50px;
-    text-align: center;
+    margin: $btn-side-margin 5px;
 
-    .btn {
+    @media(max-width: $screen-xs-max) {
       width: 100%;
     }
   }
-
-  @media(min-width: $screen-xs-max) {
-    &.merge-requests .text-content {
-      margin-top: 40px;
-    }
-
-    &.labels .text-content {
-      margin-top: 70px;
-    }
-  }
 }
 
 .flex-container-block {
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 57387b913dc..00c981f64c5 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -445,3 +445,9 @@ table {
     word-wrap: break-word;
   }
 }
+
+.disabled-content {
+  pointer-events: none;
+  opacity: .5;
+}
+
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 5c9b71a452c..17f1dc2f479 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -97,7 +97,7 @@
   .fa-chevron-down {
     font-size: $dropdown-chevron-size;
     position: relative;
-    top: -3px;
+    top: -2px;
     margin-left: 5px;
   }
 
@@ -201,6 +201,11 @@
     width: 100%;
   }
 
+  &.dropdown-open-left {
+    right: 0;
+    left: auto;
+  }
+
   &.is-loading {
     .dropdown-content {
       display: none;
@@ -261,7 +266,14 @@
     text-transform: capitalize;
   }
 
-  .separator + .dropdown-header {
+  .dropdown-bold-header {
+    font-weight: 600;
+    line-height: 22px;
+    padding: 0 16px;
+  }
+
+  .separator + .dropdown-header,
+  .separator + .dropdown-bold-header {
     padding-top: 2px;
   }
 
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index d86ae57cd9a..2d6bc17d4ff 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -1,5 +1,4 @@
 gl-emoji {
-  display: inline-block;
   display: inline-flex;
   vertical-align: middle;
   font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 1dd0e5ab581..d08df05fd6c 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -4,13 +4,14 @@
  */
 .file-holder {
   border: 1px solid $border-color;
+  border-radius: $border-radius-default;
 
   &.file-holder-no-border {
     border: 0;
   }
 
   &.readme-holder {
-    margin: $gl-padding-top 0;
+    margin: $gl-padding 0;
   }
 
   table {
@@ -25,7 +26,7 @@
     text-align: left;
     padding: 10px $gl-padding;
     word-wrap: break-word;
-    border-radius: 3px 3px 0 0;
+    border-radius: $border-radius-default $border-radius-default 0 0;
 
     &.file-title-clear {
       padding-left: 0;
@@ -65,10 +66,10 @@
     &.video {
       background: $file-image-bg;
       text-align: center;
+      padding: 30px;
 
       img,
       video {
-        padding: 20px;
         max-width: 80%;
       }
     }
@@ -84,7 +85,7 @@
     }
 
     /**
-     *  Blame file
+     *  Annotate file
      */
     &.blame {
       table {
@@ -94,9 +95,16 @@
 
       tr {
         border-bottom: 1px solid $blame-border;
+
+        &:last-child {
+          border-bottom: none;
+        }
       }
 
       td {
+        border-top: none;
+        border-bottom: none;
+
         &:first-child {
           border-left: none;
         }
@@ -107,7 +115,7 @@
       }
 
       td.blame-commit {
-        padding: 0 10px;
+        padding: 5px 10px;
         min-width: 400px;
         background: $gray-light;
       }
@@ -246,7 +254,7 @@ span.idiff {
   border-bottom: 1px solid $border-color;
   padding: 5px $gl-padding;
   margin: 0;
-  border-radius: 3px 3px 0 0;
+  border-radius: $border-radius-default $border-radius-default 0 0;
 
   .file-header-content {
     white-space: nowrap;
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index e624d0d951e..cfbaaaa04c7 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -22,12 +22,6 @@
 }
 
 @media (min-width: $screen-sm-min) {
-  .issues_bulk_update {
-    .dropdown-menu-toggle {
-      width: 132px;
-    }
-  }
-
   .filter-item:not(:last-child) {
     margin-right: 6px;
   }
@@ -90,6 +84,7 @@
 .filtered-search-term {
   display: -webkit-flex;
   display: flex;
+  flex-shrink: 0;
   margin-top: 5px;
   margin-bottom: 5px;
 
@@ -104,6 +99,22 @@
     padding: 2px 7px;
   }
 
+  .name {
+    background-color: $filter-name-resting-color;
+    color: $filter-name-text-color;
+    border-radius: 2px 0 0 2px;
+    margin-right: 1px;
+    text-transform: capitalize;
+  }
+
+  .value-container {
+    background-color: $white-normal;
+    color: $filter-value-text-color;
+    border-radius: 0 2px 2px 0;
+    margin-right: 5px;
+    padding-right: 8px;
+  }
+
   .value {
     padding-right: 0;
   }
@@ -111,7 +122,7 @@
   .remove-token {
     display: inline-block;
     padding-left: 4px;
-    padding-right: 8px;
+    padding-right: 0;
 
     .fa-close {
       color: $gl-text-color-secondary;
@@ -131,30 +142,17 @@
       }
     }
   }
+}
 
+.filtered-search-token:hover,
+.filtered-search-token .selected,
+.filtered-search-term .selected {
   .name {
-    background-color: $filter-name-resting-color;
-    color: $filter-name-text-color;
-    border-radius: 2px 0 0 2px;
-    margin-right: 1px;
-    text-transform: capitalize;
+    background-color: $filter-name-selected-color;
   }
 
   .value-container {
-    background-color: $white-normal;
-    color: $filter-value-text-color;
-    border-radius: 0 2px 2px 0;
-    margin-right: 5px;
-  }
-
-  .selected {
-    .name {
-      background-color: $filter-name-selected-color;
-    }
-
-    .value-container {
-      background-color: $filter-value-selected-color;
-    }
+    background-color: $filter-value-selected-color;
   }
 }
 
@@ -238,7 +236,7 @@
     width: 35px;
     background-color: $white-light;
     border: none;
-    position: absolute;
+    position: static;
     right: 0;
     height: 100%;
     outline: none;
@@ -263,7 +261,9 @@
 }
 
 .filtered-search-input-dropdown-menu {
+  max-height: 215px;
   max-width: 280px;
+  overflow: auto;
 
   @media (max-width: $screen-xs-min) {
     width: auto;
@@ -283,17 +283,10 @@
 .filtered-search-history-dropdown-toggle-button {
   flex: 1;
   width: auto;
-  padding-right: 10px;
-
   border-radius: 0;
-  border-top: 0;
-  border-left: 0;
-  border-bottom: 0;
+  border: 0;
   border-right: 1px solid $border-color;
-
   color: $gl-text-color-secondary;
-  line-height: 1;
-
   transition: color 0.1s linear;
 
   &:hover,
@@ -301,6 +294,17 @@
     color: $gl-text-color;
     border-color: $dropdown-input-focus-border;
     outline: none;
+
+    svg {
+      fill: $gl-text-color;
+    }
+  }
+
+  svg {
+    height: 14px;
+    width: 14px;
+    fill: $gl-text-color-secondary;
+    vertical-align: middle;
   }
 
   .dropdown-toggle-text {
@@ -312,11 +316,6 @@
       color: inherit;
     }
   }
-
-  .fa {
-    position: static;
-  }
-
 }
 
 .filtered-search-history-dropdown {
@@ -373,17 +372,6 @@
   padding: 0;
 }
 
-.filter-dropdown {
-  max-height: 215px;
-  overflow: auto;
-}
-
-@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-  .issue-bulk-update-dropdown-toggle {
-    width: 100px;
-  }
-}
-
 @media (max-width: $screen-xs-max) {
   .issues-details-filters {
     padding: 0 0 10px;
@@ -478,4 +466,5 @@
 
 .filter-dropdown-loading {
   padding: 8px 16px;
+  text-align: center;
 }
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index eadb9409fee..38d884bc7eb 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -16,6 +16,22 @@
     @extend .alert;
     @extend .alert-danger;
     margin: 0;
+
+    .flash-text,
+    .flash-action {
+      display: inline-block;
+    }
+
+    a.flash-action {
+      margin-left: 5px;
+      text-decoration: none;
+      font-weight: normal;
+      border-bottom: 1px solid;
+
+      &:hover {
+        border-color: transparent;
+      }
+    }
   }
 
   .flash-notice,
@@ -36,6 +52,10 @@
       border-radius: 0;
     }
   }
+
+  &:empty {
+    margin: 0;
+  }
 }
 
 @media (max-width: $screen-sm-max) {
diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index c0de09f3968..dbdd5a4464b 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/app/assets/stylesheets/framework/gfm.scss
@@ -2,7 +2,7 @@
  * Styles that apply to all GFM related forms.
  */
 
+.gfm-commit,
 .gfm-commit_range {
-  font-family: $monospace_font;
-  font-size: 90%;
+  @extend .commit-sha;
 }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 07566fd8c77..d8645afb7da 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -30,13 +30,27 @@ header {
     background-color: $gray-light;
     border: none;
     border-bottom: 1px solid $border-color;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
 
     @media (max-width: $screen-xs-min) {
       padding: 0 16px;
     }
 
     &.with-horizontal-nav {
-      border-bottom: none;
+      border-bottom: 0;
+
+      .navbar-border {
+        height: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        bottom: -1px;
+        background-color: $border-color;
+        opacity: 0;
+      }
     }
 
     .container-fluid {
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 1b7d4e42258..ef864e8f6a9 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -65,3 +65,7 @@
     text-decoration: none;
   }
 }
+
+.user-avatar-link {
+  text-decoration: none;
+}
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 20c7bc93c28..9e8acf4e73c 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -25,6 +25,10 @@ body {
 
 .content-wrapper {
   padding-bottom: 100px;
+
+  &:not(.page-with-layout-nav) {
+    margin-top: $header-height;
+  }
 }
 
 .container {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index c9a25946ffd..49163653548 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -11,7 +11,6 @@
   > li {
     padding: 10px 15px;
     min-height: 20px;
-    border-bottom: 1px solid $list-border-light;
     border-bottom: 1px solid $list-border;
 
     &::after {
@@ -152,6 +151,7 @@ ul.content-list {
         margin-top: 3px;
         margin-bottom: 4px;
 
+        &.has-tooltip,
         &:last-child {
           margin-right: 0;
 
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index 0140dcf19c3..600a1f53b58 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -29,10 +29,6 @@
     display: none;
   }
 
-  .issues-holder .issue-check {
-    display: none;
-  }
-
   .rss-btn {
     display: none;
   }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index c5460d280ce..3787ef370b2 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -45,7 +45,8 @@
   li {
     display: flex;
 
-    a {
+    a,
+    .btn-link {
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       font-size: 14px;
@@ -67,7 +68,29 @@
       }
     }
 
-    &.active a {
+    .btn-link {
+      padding-top: 16px;
+      padding-left: 15px;
+      padding-right: 15px;
+      border-left: none;
+      border-right: none;
+      border-top: none;
+      border-radius: 0;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: transparent;
+      }
+
+      &:active {
+        outline: 0;
+        box-shadow: none;
+      }
+    }
+
+    &.active a,
+    &.active .btn-link {
       border-bottom: 2px solid $link-underline-blue;
       color: $black;
       font-weight: 600;
@@ -291,6 +314,7 @@
   border-bottom: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
   text-align: center;
+  margin-top: $header-height;
 
   .container-fluid {
     position: relative;
@@ -436,14 +460,14 @@
       top: ($header-height + 1) * 3;
 
       &.affix {
-        top: 0;
+        top: $header-height;
       }
     }
   }
 }
 
-.activities {
-  .nav-block {
+.nav-block {
+  &.activities {
     border-bottom: 1px solid $border-color;
 
     .nav-links {
diff --git a/app/assets/stylesheets/framework/notes.scss b/app/assets/stylesheets/framework/notes.scss
new file mode 100644
index 00000000000..d349e3fad9c
--- /dev/null
+++ b/app/assets/stylesheets/framework/notes.scss
@@ -0,0 +1,14 @@
+@mixin notes-media($condition, $breakpoint-width) {
+  @media (#{$condition}-width: ($breakpoint-width)) {
+    @content;
+  }
+
+  // Diff is side by side
+  .notes_content.parallel & {
+    // We hide at double what we normally hide at because
+    // there are two columns of notes
+    @media (#{$condition}-width: (2 * $breakpoint-width)) {
+      @content;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
new file mode 100644
index 00000000000..f0a4c66aa1a
--- /dev/null
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -0,0 +1,91 @@
+@mixin flex-max-width($max) {
+  flex: 0 0 #{$max + '%'};
+  max-width: #{$max + '%'};
+}
+
+.gl-responsive-table-row {
+  margin-top: 10px;
+  border: 1px solid $border-color;
+
+  @media (min-width: $screen-md-min) {
+    padding: 15px 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    border: none;
+    border-bottom: 1px solid $white-normal;
+  }
+
+  .table-section {
+    white-space: nowrap;
+
+    $section-widths: 10 15 20 25 30 40;
+    @each $width in $section-widths {
+      &.section-#{$width} {
+        flex: 0 0 #{$width + '%'};
+
+        @media (min-width: $screen-md-min) {
+          max-width: #{$width + '%'};
+        }
+      }
+    }
+
+    &:not(.table-button-footer) {
+      @media (max-width: $screen-sm-max) {
+        display: flex;
+        align-self: stretch;
+        padding: 10px;
+        align-items: center;
+        height: 62px;
+
+        &:not(:first-of-type) {
+          border-top: 1px solid $white-normal;
+        }
+      }
+    }
+  }
+}
+
+.table-row-header {
+  font-size: 13px;
+
+  @media (max-width: $screen-sm-max) {
+    display: none;
+  }
+}
+
+.table-mobile-header {
+  color: $gl-text-color-secondary;
+  @include flex-max-width(40);
+
+  @media (min-width: $screen-md-min) {
+    display: none;
+  }
+}
+
+.table-mobile-content {
+  @media (max-width: $screen-sm-max) {
+    @include flex-max-width(60);
+    text-align: right;
+  }
+}
+
+.flex-truncate-parent {
+  display: flex;
+}
+
+.flex-truncate-child {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (min-width: $screen-md-min) {
+    flex: 0 0 90%;
+  }
+
+  .avatar {
+    float: none;
+    margin-right: 4px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 9ab17e67d4c..5ae833cd5f6 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -96,7 +96,6 @@
 
     .select2-search-field input {
       padding: 5px $gl-padding / 2;
-      font-size: 13px;
       height: auto;
       font-family: inherit;
       font-size: inherit;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index cf30c256395..135520e0c07 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -33,7 +33,7 @@
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) {
-    &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper {
+    &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
 
@@ -56,7 +56,7 @@
   z-index: 300;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper {
+    &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
   }
@@ -81,7 +81,43 @@
 
   &.affix {
     position: fixed;
-    top: 0;
+    top: $header-height;
+  }
+
+  &:not(.affix-top) {
+    min-height: 100%;
+  }
+}
+
+@mixin maintain-sidebar-dimensions {
+  display: block;
+  width: $gutter-width;
+  padding: 10px 20px;
+}
+
+.issues-bulk-update.right-sidebar {
+  @include maintain-sidebar-dimensions;
+  transition: right $sidebar-transition-duration;
+  right: -$gutter-width;
+
+  &.right-sidebar-expanded {
+    @include maintain-sidebar-dimensions;
+    right: 0;
+  }
+
+  &.right-sidebar-collapsed {
+    @include maintain-sidebar-dimensions;
+    right: -$gutter-width;
+
+    .block {
+      padding: 16px 0;
+      width: 250px;
+      border-bottom: 1px solid $border-color;
+    }
+  }
+
+  .issuable-sidebar {
+    padding: 0 3px;
   }
 
   &:not(.affix-top) {
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 70db1962228..0d328031dcf 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -3,9 +3,9 @@
   margin: 0;
   padding: 0;
 
-  .note-text {
-    p:last-child {
-      margin-bottom: 0;
+  &::before {
+    @include notes-media('max', $screen-xs-min) {
+      background: none;
     }
   }
 
@@ -29,6 +29,15 @@
 
   .timeline-entry-inner {
     position: relative;
+
+    @include notes-media('max', $screen-xs-min) {
+      .timeline-icon {
+        display: none;
+      }
+
+    .timeline-content {
+      margin-left: 0;
+    }
   }
 
   &:target,
@@ -46,24 +55,6 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
-  .timeline {
-    &::before {
-      background: none;
-    }
-  }
-
-  .timeline-entry .timeline-entry-inner {
-    .timeline-icon {
-      display: none;
-    }
-
-    .timeline-content {
-      margin-left: 0;
-    }
-  }
-}
-
 .discussion .timeline-entry {
   margin: 0;
   border-right: none;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 96d8a812723..785b09e622f 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -21,6 +21,10 @@
     margin-top: 0;
   }
 
+  > :last-child {
+    margin-bottom: 0;
+  }
+
   // Single code lines should wrap
   code {
     font-family: $monospace_font;
@@ -139,6 +143,15 @@
     line-height: 1.6em;
     overflow-x: auto;
     border-radius: 2px;
+
+
+    &.plain-readme {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      font-size: 14px;
+    }
   }
 
   p > code {
@@ -148,7 +161,7 @@
   ul,
   ol {
     padding: 0;
-    margin: 0 0 16px !important;
+    margin: 0 0 16px;
   }
 
   ul:dir(rtl),
@@ -169,14 +182,14 @@
   }
 
   ul.task-list {
-    li.task-list-item {
+    > li.task-list-item {
       list-style-type: none;
       position: relative;
       min-height: 22px;
       padding-left: 28px;
       margin-left: 0 !important;
 
-      input.task-list-item-checkbox {
+      > input.task-list-item-checkbox {
         position: absolute;
         left: 8px;
         top: 5px;
@@ -279,19 +292,6 @@ h6 {
 /** CODE **/
 pre {
   font-family: $monospace_font;
-
-  &.plain-readme {
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-    font-size: 14px;
-  }
-}
-
-.monospace {
-  font-family: $monospace_font;
-  font-size: 90%;
 }
 
 code {
@@ -305,6 +305,24 @@ a > code {
   color: $link-color;
 }
 
+.monospace {
+  font-family: $monospace_font;
+}
+
+.commit-sha,
+.ref-name {
+  @extend .monospace;
+  font-size: 95%;
+}
+
+.git-revision-dropdown-toggle {
+  @extend .monospace;
+}
+
+.git-revision-dropdown .dropdown-content ul li a {
+  @extend .ref-name;
+}
+
 /**
  * Apply Markdown typography
  *
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 4cfa5d718e9..4114a050d9a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -163,7 +163,7 @@ $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: $red-500;
-$border-radius-default: 2px;
+$border-radius-default: 3px;
 $settings-icon-size: 18px;
 $provider-btn-not-active-color: $blue-500;
 $link-underline-blue: $blue-500;
@@ -187,6 +187,7 @@ $divergence-graph-bar-bg: #ccc;
 $divergence-graph-separator-bg: #ccc;
 $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
+$highlight-changes-color: rgb(235, 255, 232);
 
 
 /*
@@ -247,7 +248,6 @@ $dark-diff-match-bg: rgba(255, 255, 255, 0.3);
 $dark-diff-match-color: rgba(255, 255, 255, 0.1);
 $file-mode-changed: #777;
 $file-mode-changed: #777;
-$diff-image-bg: #ddd;
 $diff-image-info-color: grey;
 $diff-swipe-border: #999;
 $diff-view-modes-color: grey;
@@ -294,7 +294,7 @@ $btn-white-active: #848484;
 /*
 * Badges
 */
-$badge-bg: #eee;
+$badge-bg: rgba(0, 0, 0, 0.07);
 $badge-color: $gl-text-color-secondary;
 
 /*
@@ -570,3 +570,10 @@ $filter-value-selected-color: #d7d7d7;
 Animation Functions
 */
 $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1);
+
+/*
+Convdev Index
+*/
+$color-high-score: $green-400;
+$color-average-score: $orange-400;
+$color-low-score: $red-400;
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index 32eb750180f..1c1392f8f67 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -12,10 +12,14 @@
     }
 
     &.branch-info {
-      .monospace,
+      .commit-sha,
       .commit-info {
         margin-left: 4px;
       }
+
+      .ref-name {
+        font-size: 12px;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 09951fe3d3e..6e3829d994f 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -185,6 +185,11 @@ $dark-il: #de935f;
     color: $dark-highlight-color !important;
   }
 
+  // Links to URLs, emails, or dependencies
+  .line a {
+    color: $dark-na;
+  }
+
   .hll { background-color: $dark-hll-bg; }
   .c { color: $dark-c; } /* Comment */
   .err { color: $dark-err; } /* Error */
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index b6a6d298adf..68eb0c7720f 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -185,6 +185,11 @@ $monokai-gi: #a6e22e;
     color: $black !important;
   }
 
+  // Links to URLs, emails, or dependencies
+  .line a {
+    color: $monokai-k;
+  }
+
   .hll { background-color: $monokai-hll; }
   .c { color: $monokai-c; } /* Comment */
   .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index 4f7a50dcb4f..2cc968c32f2 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -188,6 +188,11 @@ $solarized-dark-il: #2aa198;
     background-color: $solarized-dark-highlight !important;
   }
 
+  // Links to URLs, emails, or dependencies
+  .line a {
+    color: $solarized-dark-kd;
+  }
+
   /* Solarized Dark
 
   For use with Jekyll and Pygments
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index 6463fe96c1b..b61b85a2cd1 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -196,6 +196,11 @@ $solarized-light-il: #2aa198;
     background-color: $solarized-light-highlight !important;
   }
 
+  // Links to URLs, emails, or dependencies
+  .line a {
+    color: $solarized-light-kd;
+  }
+
   /* Solarized Light
 
   For use with Jekyll and Pygments
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index ab2018bfbca..1daa10aef24 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -203,6 +203,11 @@ $white-gc-bg: #eaf2f5;
     background-color: $white-highlight !important;
   }
 
+  // Links to URLs, emails, or dependencies
+  .line a {
+    color: $white-nb;
+  }
+
   .hll { background-color: $white-hll-bg; }
   .c { color: $white-c; font-style: italic; }
   .err { color: $white-err; background-color: $white-err-bg; }
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 68d7ab4bf84..740e383dbb5 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -72,7 +72,9 @@
 
   @media (min-width: $screen-sm-min) {
     height: 475px; // Needed for PhantomJS
+    // scss-lint:disable DuplicateProperty
     height: calc(100vh - 222px);
+    // scss-lint:enable DuplicateProperty
     min-height: 475px;
     transition: width .2s;
 
@@ -94,9 +96,51 @@
   @media (min-width: $screen-sm-min) {
     width: 400px;
   }
+
+  &.is-expandable {
+    .board-header {
+      cursor: pointer;
+    }
+  }
+
+  &.is-collapsed {
+    width: 50px;
+
+    .board-header {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    .board-title {
+      position: initial;
+      padding: 0;
+      border-bottom: 0;
+
+      > span {
+        display: block;
+        transform: rotate(90deg) translate(25px, 0);
+      }
+    }
+
+    .board-title-expandable-toggle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -10px;
+    }
+
+    .board-list-component,
+    .board-issue-count-holder {
+      display: none;
+    }
+  }
 }
 
 .board-inner {
+  position: relative;
   height: 100%;
   font-size: $issue-boards-font-size;
   background: $gray-light;
@@ -173,21 +217,53 @@
   }
 }
 
+.slide-down-enter {
+  transform: translateY(-100%);
+}
+
+.slide-down-enter-active {
+  transition: transform $fade-in-duration;
+
+  + .board-list {
+    transform: translateY(-136px);
+    transition: none;
+  }
+}
+
+.slide-down-enter-to {
+  + .board-list {
+    transform: translateY(0);
+    transition: transform $fade-in-duration ease;
+  }
+}
+
+.slide-down-leave {
+  transform: translateY(0);
+}
+
+.slide-down-leave-active {
+  transition: all $fade-in-duration;
+  transform: translateY(-136px);
+
+  + .board-list {
+    transition: transform $fade-in-duration ease;
+    transform: translateY(-136px);
+  }
+}
+
 .board-list-component {
   height: calc(100% - 49px);
+  overflow: hidden;
 }
 
 .board-list {
   height: 100%;
+  width: 100%;
   margin-bottom: 0;
   padding: 5px;
   list-style: none;
   overflow-y: scroll;
   overflow-x: hidden;
-
-  &.is-smaller {
-    height: calc(100% - 136px);
-  }
 }
 
 .board-list-loading {
@@ -349,6 +425,7 @@
 }
 
 .board-new-issue-form {
+  z-index: 1;
   margin: 5px;
 }
 
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 14a62b6cbf0..e35558ad8e8 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -29,129 +29,140 @@
   }
 }
 
-.build-page {
-  pre.trace {
-    background: $builds-trace-bg;
-    color: $white-light;
-    font-family: $monospace_font;
-    white-space: pre-wrap;
-    overflow: auto;
-    overflow-y: hidden;
-    font-size: 12px;
-
-    .fa-spinner {
-      font-size: 24px;
-      margin-left: 20px;
-    }
-  }
-
-  .environment-information {
-    background-color: $gray-light;
-    border: 1px solid $border-color;
-    padding: 12px $gl-padding;
-    border-radius: $border-radius-default;
+@keyframes blinking-scroll-button {
+  0% { opacity: 0.2; }
+  25% { opacity: 0.5; }
+  50% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
 
-    svg {
-      position: relative;
-      top: 1px;
-      margin-right: 5px;
-    }
+.build-page {
+  .sticky {
+    position: absolute;
+    left: 0;
+    right: 0;
   }
 
-  .truncated-info {
-    text-align: center;
-    border-bottom: 1px solid;
-    background-color: $black;
-    height: 45px;
-    padding: 15px;
+  .build-trace-container {
+    position: absolute;
+    top: 225px;
+    left: 15px;
+    bottom: 10px;
+    background: $black;
+    color: $gray-darkest;
+    font-family: $monospace_font;
+    font-size: 12px;
 
-    &.affix {
-      top: 0;
+    &.sidebar-expanded {
+      right: 305px;
     }
 
-    // with sidebar
-    &.affix.sidebar-expanded {
-      right: 312px;
-      left: 22px;
+    &.sidebar-collapsed {
+      right: 16px;
     }
 
-    // without sidebar
-    &.affix.sidebar-collapsed {
-      right: 20px;
-      left: 20px;
+    code {
+      background: $black;
+      color: $gray-darkest;
     }
 
-    &.affix-top {
-      position: absolute;
+    .top-bar {
       top: 0;
-      margin: 0 auto;
-      right: 5px;
-      left: 5px;
-    }
+      height: 35px;
+      display: flex;
+      justify-content: flex-end;
+      border-bottom: 1px outset $white-light;
 
-    .truncated-info-size {
-      margin: 0 5px;
-    }
+      .truncated-info {
+        margin: 0 auto;
+        align-self: center;
 
-    .raw-link {
-      color: inherit;
-      margin-left: 5px;
-      text-decoration: underline;
+        .truncated-info-size {
+          margin: 0 5px;
+        }
+
+        .raw-link {
+          color: inherit;
+          margin-left: 5px;
+          text-decoration: underline;
+        }
+      }
     }
-  }
-}
 
-.scroll-controls {
-  height: 100%;
+    .controllers {
+      display: flex;
+      align-self: center;
+      font-size: 15px;
 
-  .scroll-step {
-    width: 31px;
-    margin: 0 0 0 auto;
-  }
+      svg {
+        height: 15px;
+        display: block;
+        fill: $white-light;
+      }
 
-  .scroll-link,
-  .autoscroll-container {
-    right: 25px;
-    z-index: 1;
-  }
+      a,
+      .btn-scroll {
+        margin: 0 8px;
+        color: $white-light;
+      }
 
-  .scroll-link {
-    position: fixed;
-    display: block;
-    margin-bottom: 10px;
+      .btn-scroll.animate {
+        .first-triangle {
+          animation: blinking-scroll-button 1s ease infinite;
+          animation-delay: .3s;
+        }
 
-    &.scroll-top .gitlab-icon-scroll-up-hover,
-    &.scroll-top:hover .gitlab-icon-scroll-up,
-    &.scroll-bottom .gitlab-icon-scroll-down-hover,
-    &.scroll-bottom:hover .gitlab-icon-scroll-down {
-      display: none;
-    }
+        .second-triangle {
+          animation: blinking-scroll-button 1s ease infinite;
+          animation-delay: .2s;
+        }
 
-    &.scroll-top:hover .gitlab-icon-scroll-up-hover,
-    &.scroll-bottom:hover .gitlab-icon-scroll-down-hover {
-      display: inline-block;
-    }
+        .third-triangle {
+          animation: blinking-scroll-button 1s ease infinite;
+        }
 
-    &.scroll-top {
-      top: 10px;
-    }
+        &:disabled {
+          opacity: 1;
+        }
+      }
 
-    &.scroll-bottom {
-      bottom: -2px;
+      .btn-scroll:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+      }
     }
   }
 
-  .autoscroll-container {
-    position: absolute;
+  .bash {
+    top: 35px;
+    left: 10px;
+    bottom: 0;
+    overflow-y: hidden;
+    padding-bottom: 20px;
+    padding-right: 20px;
   }
 
-  &.sidebar-expanded {
+  .environment-information {
+    background-color: $gray-light;
+    border: 1px solid $border-color;
+    padding: 12px $gl-padding;
+    border-radius: $border-radius-default;
 
-    .scroll-link,
-    .autoscroll-container {
-      right: ($gutter_width + ($gl-padding * 2));
+    svg {
+      position: relative;
+      top: 1px;
+      margin-right: 5px;
     }
   }
+
+  .build-loader-animation {
+    position: relative;
+    width: 6px;
+    height: 6px;
+    margin: auto auto 12px 2px;
+    border-radius: 50%;
+    animation: blinking-dots 1s linear infinite;
+  }
 }
 
 .status-message {
@@ -223,32 +234,6 @@
   }
 }
 
-.build-trace {
-  background: $black;
-  color: $gray-darkest;
-  white-space: pre;
-  overflow-x: auto;
-  font-size: 12px;
-  position: relative;
-
-  .fa-spinner {
-    font-size: 24px;
-  }
-
-  .bash {
-    display: block;
-  }
-
-  .build-loader-animation {
-    position: relative;
-    width: 6px;
-    height: 6px;
-    margin: auto auto 12px 2px;
-    border-radius: 50%;
-    animation: blinking-dots 1s linear infinite;
-  }
-}
-
 .right-sidebar.build-sidebar {
   padding: $gl-padding 0;
 
@@ -390,6 +375,10 @@
   .container-fluid.container-limited {
     max-width: 100%;
   }
+
+  .content-wrapper {
+    padding-bottom: 6px;
+  }
 }
 
 .build-detail-row {
diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss
index 90643832390..7b4eb689f1b 100644
--- a/app/assets/stylesheets/pages/ci_projects.scss
+++ b/app/assets/stylesheets/pages/ci_projects.scss
@@ -36,7 +36,6 @@
     pre.commit-message {
       background: none;
       padding: 0;
-      margin: 0;
       border: none;
       margin: 20px 0;
       border-radius: 0;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 9e3142c8aa3..9db0f2075cb 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -163,7 +163,6 @@
 
 .avatar-cell {
   width: 46px;
-  padding-left: 10px;
 
   img {
     margin-right: 0;
@@ -175,7 +174,6 @@
   justify-content: space-between;
   align-items: flex-start;
   flex-grow: 1;
-  padding-left: 10px;
 
   .merge-request-branches & {
     flex-direction: column;
@@ -208,11 +206,11 @@
       margin-left: $gl-padding;
     }
   }
-}
 
-.commit-short-id {
-  font-family: $monospace_font;
-  font-weight: 600;
+  .commit-sha {
+    font-size: 14px;
+    font-weight: 600;
+  }
 }
 
 .commit,
@@ -230,7 +228,7 @@
     margin: 10px 0;
     background: $gray-light;
     display: none;
-    white-space: pre-line;
+    white-space: pre-wrap;
     word-break: normal;
 
     pre {
@@ -273,7 +271,7 @@
     }
   }
 
-  .commit-id {
+  .commit-sha {
     color: $gl-link-color;
   }
 
diff --git a/app/assets/stylesheets/pages/convdev_index.scss b/app/assets/stylesheets/pages/convdev_index.scss
new file mode 100644
index 00000000000..0413114c279
--- /dev/null
+++ b/app/assets/stylesheets/pages/convdev_index.scss
@@ -0,0 +1,255 @@
+$space-between-cards: 8px;
+
+.convdev-empty svg {
+  margin: 64px auto 32px;
+  max-width: 420px;
+}
+
+.convdev-header {
+  margin-top: $gl-padding;
+  margin-bottom: $gl-padding;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+
+  .convdev-header-title {
+    font-size: 48px;
+    line-height: 1;
+    margin: 0;
+  }
+
+  .convdev-header-subtitle {
+    font-size: 22px;
+    line-height: 1;
+    color: $gl-text-color-secondary;
+    margin-left: 8px;
+    font-weight: 500;
+
+    a {
+      font-size: 18px;
+      color: $gl-text-color-secondary;
+
+      &:hover {
+        color: $blue-500;
+      }
+    }
+  }
+}
+
+.convdev-cards {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.convdev-card-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  text-align: center;
+  width: 50%;
+  border-color: $border-color;
+  margin: 0 0 32px;
+  padding: $space-between-cards / 2;
+  position: relative;
+
+  @media (min-width: $screen-xs-min) {
+    width: percentage(1 / 4);
+  }
+
+  @media (min-width: $screen-sm-min) {
+    width: percentage(1 / 5);
+  }
+
+  @media (min-width: $screen-md-min) {
+    width: percentage(1 / 6);
+  }
+
+  @media (min-width: $screen-lg-min) {
+    width: percentage(1 / 10);
+  }
+}
+
+.convdev-card {
+  border: solid 1px $border-color;
+  border-radius: 3px;
+  border-top-width: 3px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.convdev-card-low {
+  border-top-color: $color-low-score;
+
+  .card-score-big {
+    background-color: $red-25;
+  }
+}
+
+.convdev-card-average {
+  border-top-color: $color-average-score;
+
+  .card-score-big {
+    background-color: $orange-25;
+  }
+}
+
+.convdev-card-high {
+  border-top-color: $color-high-score;
+
+  .card-score-big {
+    background-color: $green-25;
+  }
+}
+
+.convdev-card-title {
+  margin: $gl-padding auto auto;
+  max-width: 100px;
+
+  h3 {
+    font-size: 14px;
+    margin: 0 0 2px;
+  }
+
+  .text-light {
+    font-size: 13px;
+    line-height: 1.25;
+    color: $gl-text-color-secondary;
+  }
+}
+
+.card-scores {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: $gl-padding $gl-btn-padding;
+  line-height: 1;
+}
+
+.card-score {
+  color: $gl-text-color-secondary;
+
+  .card-score-name {
+    font-size: 13px;
+    margin-top: 4px;
+  }
+}
+
+.card-score-value {
+  font-size: 16px;
+  color: $gl-text-color;
+  font-weight: 500;
+}
+
+.card-score-big {
+  border-top: 2px solid $border-color;
+  border-bottom: 1px solid $border-color;
+  font-size: 22px;
+  padding: 10px 0;
+  font-weight: 500;
+}
+
+.card-buttons {
+  display: flex;
+
+  > * {
+    font-size: 16px;
+    color: $gl-text-color-secondary;
+    padding: 10px;
+    flex-grow: 1;
+
+    &:hover {
+      background-color: $border-color;
+      color: $gl-text-color;
+    }
+
+    + * {
+      border-left: solid 1px $border-color;
+    }
+  }
+}
+
+.convdev-steps {
+  margin-top: $gl-padding;
+  height: 1px;
+  min-width: 100%;
+  justify-content: space-around;
+  position: relative;
+  background: $border-color;
+}
+
+.convdev-step {
+  $step-positions: 5% 10% 30% 42% 48% 55% 60% 70% 75% 90%;
+  @each $pos in $step-positions {
+    $i: index($step-positions, $pos);
+
+    &:nth-child(#{$i}) {
+      left: $pos;
+    }
+  }
+
+  position: absolute;
+  transform-origin: 75% 50%;
+  padding: 8px;
+  height: 50px;
+  width: 50px;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: solid 1px $border-color;
+  background: $white-light;
+  transform: translate(-50%, -50%);
+  color: $gl-text-color-secondary;
+  fill: $gl-text-color-secondary;
+  box-shadow: 0 2px 4px $dropdown-shadow-color;
+
+  &:hover {
+    padding: 8px 10px;
+    fill: currentColor;
+    z-index: 100;
+    height: auto;
+    width: auto;
+
+    .convdev-step-title {
+      max-height: 2em;
+      opacity: 1;
+      transition: opacity 0.2s;
+    }
+
+    svg {
+      transform: scale(1.5);
+      margin: $gl-btn-padding;
+    }
+  }
+
+  svg {
+    transition: transform 0.1s;
+    width: 30px;
+    height: 30px;
+    min-height: 30px;
+    min-width: 30px;
+  }
+}
+
+.convdev-step-title {
+  max-height: 0;
+  opacity: 0;
+  text-transform: uppercase;
+  margin: $gl-vert-padding 0 0;
+  text-align: center;
+  font-size: 12px;
+}
+
+.convdev-high-score {
+  color: $color-high-score;
+}
+
+.convdev-average-score {
+  color: $color-average-score;
+}
+
+.convdev-low-score {
+  color: $color-low-score;
+}
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index d29944207c5..7bec4bd5f56 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -387,7 +387,7 @@
         padding: 0 3px 0 0;
       }
 
-      .branch-name {
+      .ref-name {
         color: $black;
         display: inline-block;
         max-width: 180px;
@@ -398,7 +398,7 @@
         vertical-align: top;
       }
 
-      .short-sha {
+      .commit-sha {
         color: $gl-link-color;
         line-height: 1.3;
         vertical-align: top;
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index f3de05aa5f6..3d9eff35583 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -4,11 +4,7 @@
   color: $gl-text-color;
   line-height: 34px;
 
-  .author {
-    color: $gl-text-color;
-  }
-
-  .identifier {
+  a {
     color: $gl-text-color;
   }
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 77f2638683a..b58922626fa 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -1,38 +1,6 @@
 // Common
 .diff-file {
-  border: 1px solid $border-color;
   margin-bottom: $gl-padding;
-  border-radius: 3px;
-
-  .commit-short-id {
-    font-family: $regular_font;
-    font-weight: 400;
-  }
-
-  .diff-header {
-    position: relative;
-    background: $gray-light;
-    border-bottom: 1px solid $border-color;
-    padding: 10px 16px;
-    color: $gl-text-color;
-    z-index: 10;
-    border-radius: 3px 3px 0 0;
-
-    .diff-title {
-      font-family: $monospace_font;
-      word-break: break-all;
-      display: block;
-
-      .file-mode {
-        color: $file-mode-changed;
-      }
-    }
-
-    .commit-short-id {
-      font-family: $monospace_font;
-      font-size: smaller;
-    }
-  }
 
   .file-title,
   .file-title-flex-parent {
@@ -126,7 +94,6 @@
     .old_line,
     .new_line {
       margin: 0;
-      padding: 0;
       border: none;
       padding: 0 5px;
       border-right: 1px solid;
@@ -183,14 +150,10 @@
         }
       }
     }
-
-    .text-file.diff-wrap-lines table .line_holder td span {
-      white-space: pre-wrap;
-    }
   }
 
   .image {
-    background: $diff-image-bg;
+    background: $file-image-bg;
     text-align: center;
     padding: 30px;
 
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 026d35295d7..b24803678ea 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -5,45 +5,13 @@
   }
 }
 
-.environments-list-loading {
-  width: 100%;
-  font-size: 34px;
-}
-
 .environments-folder-name {
   font-weight: normal;
   padding-top: 20px;
 }
 
 .environments-container {
-  .table-holder {
-    width: 100%;
-
-    @media (max-width: $screen-sm-max) {
-      overflow: auto;
-    }
-  }
-
-  .table.ci-table {
-    .environments-actions {
-      min-width: 300px;
-    }
-
-    .environments-commit,
-    .environments-actions {
-      width: 20%;
-    }
-
-    .environments-date {
-      width: 10%;
-    }
-
-    .environments-name,
-    .environments-deploy,
-    .environments-build {
-      width: 15%;
-    }
-
+  .ci-table {
     .deployment-column {
       > span {
         word-break: break-all;
@@ -69,12 +37,12 @@
       }
     }
 
-    .commit-title {
-      margin: 0;
+    .btn .text-center {
+      display: inline;
     }
 
-    .avatar-image-container {
-      text-decoration: none;
+    .commit-title {
+      margin: 0;
     }
 
     .icon-play {
@@ -95,7 +63,7 @@
     }
 
     .build-link,
-    .branch-name {
+    .ref-name {
       color: $gl-text-color;
     }
 
@@ -140,7 +108,7 @@
     }
 
     .branch-commit {
-      .commit-id {
+      .commit-sha {
         margin-right: 0;
       }
     }
@@ -155,6 +123,59 @@
   }
 }
 
+.gl-responsive-table-row {
+  .environments-actions {
+    @media (min-width: $screen-md-min) {
+      text-align: right;
+    }
+
+    @media (max-width: $screen-sm-max) {
+      background-color: $gray-normal;
+      align-self: stretch;
+      border-top: 1px solid $border-color;
+
+      .environment-action-buttons {
+        padding: 10px 5px;
+        display: flex;
+
+        .btn {
+          border-radius: 3px;
+        }
+
+        > .btn-group,
+        > .external-url,
+        > .btn {
+          flex: 1;
+          flex-basis: 28px;
+          margin: 0 5px;
+        }
+
+        .dropdown-new {
+          width: 100%;
+        }
+
+        .dropdown-menu {
+          min-width: initial;
+        }
+      }
+    }
+  }
+
+  .branch-commit {
+    max-width: 100%;
+  }
+}
+
+.folder-row {
+  padding: 15px 0;
+  border-bottom: 1px solid $white-normal;
+
+  @media (max-width: $screen-sm-max) {
+    border-top: 1px solid $white-normal;
+    margin-top: 10px;
+  }
+}
+
 .prometheus-graph {
   text {
     fill: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index f8944e5ce03..a321941e0c9 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -198,8 +198,17 @@
   right: 0;
   transition: width .3s;
   background: $gray-light;
-  padding: 10px 20px;
+  padding: 0 20px;
   z-index: 200;
+  overflow: hidden;
+
+  .issuable-sidebar {
+    width: calc(100% + 100px);
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
 
   &.right-sidebar-expanded {
     width: $gutter_width;
@@ -213,6 +222,10 @@
       }
     }
 
+    .issuable-sidebar-header {
+      padding-top: 10px;
+    }
+
     .assign-yourself .btn-link {
       padding-left: 0;
     }
@@ -266,11 +279,10 @@
     }
 
     width: $gutter_collapsed_width;
-    padding-top: 0;
+    padding: 0;
 
     .block {
       width: $gutter_collapsed_width - 2px;
-      margin-left: -19px;
       padding: 15px 0 0;
       border-bottom: none;
       overflow: hidden;
@@ -419,7 +431,7 @@
 }
 
 .detail-page-description {
-  padding: 16px 0 0;
+  padding: 16px 0;
 
   small {
     color: $gray-darkest;
@@ -429,7 +441,7 @@
 .edited-text {
   color: $gray-darkest;
   display: block;
-  margin: 0 0 16px;
+  margin: 16px 0 0;
 
   .author_link {
     color: $gray-darkest;
@@ -717,3 +729,34 @@
     }
   }
 }
+
+.confidential-issue-warning {
+  background-color: $gl-gray;
+  border-radius: 3px;
+  padding: $gl-btn-padding $gl-padding;
+  margin-top: $gl-padding-top;
+  font-size: 14px;
+  color: $white-light;
+
+  .fa {
+    margin-right: 8px;
+  }
+
+  a {
+    color: $white-light;
+    text-decoration: underline;
+  }
+
+  &.affix {
+    position: static;
+    width: initial;
+
+    @media (min-width: $screen-sm-min) {
+      position: sticky;
+      position: -webkit-sticky;
+      top: 60px;
+      z-index: 200;
+      @include transition(all);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index ad3b6e0344b..702e7662527 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -51,6 +51,7 @@ ul.related-merge-requests > li {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
+  align-items: center;
 
   .merge-request-id {
     flex-shrink: 0;
@@ -59,6 +60,14 @@ ul.related-merge-requests > li {
   .merge-request-info {
     margin-left: 5px;
   }
+
+  .row_title {
+    vertical-align: bottom;
+  }
+
+  gl-emoji {
+    font-size: 1em;
+  }
 }
 
 .merge-requests-title,
@@ -114,7 +123,6 @@ ul.related-merge-requests > li {
 .related-merge-requests {
   .ci-status-link {
     display: block;
-    margin-top: 3px;
     margin-right: 5px;
   }
 
@@ -196,7 +204,6 @@ ul.related-merge-requests > li {
   .dropdown-toggle {
     .fa-caret-down {
       pointer-events: none;
-      margin-left: 0;
       color: inherit;
       margin-left: 0;
     }
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 8dbac76e30a..971d54e7472 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -184,4 +184,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index f747e7b1660..2dc7f73a295 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -132,12 +132,6 @@
       line-height: 16px;
     }
 
-    @media (min-width: $screen-sm-min) {
-      .stage-cell {
-        padding: 0 4px;
-      }
-    }
-
     @media (max-width: $screen-xs-max) {
       order: 1;
       margin-top: $gl-padding-top;
@@ -167,6 +161,34 @@
     text-transform: capitalize;
   }
 
+  .label-branch {
+    @extend .ref-name;
+
+    color: $gl-text-color;
+    font-weight: bold;
+    overflow: hidden;
+    margin: 0 3px;
+    word-break: break-all;
+
+    &.label-truncated {
+      position: relative;
+      display: inline-block;
+      width: 250px;
+      margin-bottom: -3px;
+      white-space: nowrap;
+      text-overflow: clip;
+      line-height: 14px;
+
+      &::after {
+        position: absolute;
+        content: '...';
+        right: 0;
+        font-family: $regular_font;
+        background-color: $gray-light;
+      }
+    }
+  }
+
   .js-deployment-link {
     display: inline-block;
   }
@@ -349,6 +371,22 @@
       margin-top: 10px;
       margin-left: 12px;
     }
+
+    &.empty-state {
+      .artwork {
+        margin-bottom: $gl-padding;
+      }
+
+      .text {
+        span {
+          font-weight: bold;
+        }
+
+        p {
+          margin-top: $gl-padding;
+        }
+      }
+    }
   }
 
   .mr-widget-footer {
@@ -390,34 +428,6 @@
   }
 }
 
-.label-branch {
-  color: $gl-text-color;
-  font-family: $monospace_font;
-  font-weight: bold;
-  overflow: hidden;
-  font-size: 90%;
-  margin: 0 3px;
-  word-break: break-all;
-
-  &.label-truncated {
-    position: relative;
-    display: inline-block;
-    width: 250px;
-    margin-bottom: -3px;
-    white-space: nowrap;
-    text-overflow: clip;
-    line-height: 14px;
-
-    &::after {
-      position: absolute;
-      content: '...';
-      right: 0;
-      font-family: $regular_font;
-      background-color: $gray-light;
-    }
-  }
-}
-
 .commits-empty {
   text-align: center;
 
@@ -510,17 +520,13 @@
       position: absolute;
       border-top: 2px solid $border-color;
       height: 1px;
-      top: 8px;
+      top: 9px;
       width: 8px;
       left: 0;
     }
 
     &:last-child {
       margin-bottom: 0;
-
-      &::before {
-        top: 14px;
-      }
     }
   }
 
@@ -529,7 +535,7 @@
     width: 2px;
     background: $border-color;
     position: absolute;
-    top: -5px;
+    top: -9px;
   }
 }
 
@@ -724,14 +730,18 @@
 }
 
 .merge-request-tabs-holder {
+  top: $header-height;
   z-index: 100;
   background-color: $white-light;
   border-bottom: 1px solid $border-color;
 
+  @media(min-width: $screen-sm-min) {
+    position: sticky;
+    position: -webkit-sticky;
+  }
+
   &.affix {
-    top: 0;
     left: 0;
-    z-index: 10;
     transition: right .15s;
 
     @media (max-width: $screen-xs-max) {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 62f654ed343..aa307414737 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -28,7 +28,7 @@
 .note-edit-form {
   .note-form-actions {
     position: relative;
-    margin: $gl-padding 0;
+    margin: $gl-padding 0 0;
   }
 
   .note-preview-holder {
@@ -103,31 +103,19 @@
   }
 }
 
-.confidential-issue-warning {
-  background-color: $gray-normal;
-  border-radius: 3px;
-  padding: 3px 12px;
-  margin: auto;
-  margin-top: 0;
-  text-align: center;
-  font-size: 12px;
-
-  @media (max-width: $screen-sm-max) {
-    // On smaller devices the warning becomes the fourth item in the list,
-    // rather than centering, and grows to span the full width of the
-    // comment area.
-    order: 4;
-    -webkit-order: 4;
-    margin: 6px auto;
-    width: 100%;
-  }
-}
-
 .discussion-form {
-  padding: $gl-padding-top $gl-padding;
+  padding: $gl-padding-top $gl-padding $gl-padding;
   background-color: $white-light;
 }
 
+.discussion-notes .disabled-comment {
+  padding: 6px 0;
+}
+
+.notes-form > li {
+  border: 0;
+}
+
 .note-edit-form {
   display: none;
   font-size: 14px;
@@ -164,10 +152,6 @@
 
 .discussion-body,
 .diff-file {
-  .notes .note {
-    padding: 10px 15px;
-  }
-
   .discussion-reply-holder {
     background-color: $white-light;
     padding: 10px 16px;
@@ -277,6 +261,7 @@
 .toolbar-text {
   font-size: 14px;
   line-height: 16px;
+  margin-top: 2px;
 
   @media (min-width: $screen-md-min) {
     float: left;
@@ -402,3 +387,45 @@
     }
   }
 }
+
+.uploading-container {
+  float: right;
+
+  @media (max-width: $screen-xs-max) {
+    float: left;
+    margin-top: 5px;
+  }
+}
+
+.uploading-error-icon,
+.uploading-error-message {
+  color: $gl-text-red;
+}
+
+.uploading-error-message {
+  @media (max-width: $screen-xs-max) {
+    &::after {
+      content: "\a";
+      white-space: pre;
+    }
+  }
+}
+
+.uploading-progress {
+  margin-right: 5px;
+}
+
+.attach-new-file,
+.button-attach-file,
+.retry-uploading-link {
+  color: $gl-link-color;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.markdown-selector {
+  color: $gl-link-color;
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 99bcf612e8f..e622e5c3f4b 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -14,24 +14,11 @@ ul.notes {
   margin: 0;
   padding: 0;
 
-  .timeline-icon {
-    float: left;
-
-    svg {
-      width: 16px;
-      height: 16px;
-      fill: $gray-darkest;
-      position: absolute;
-      left: 0;
-      top: 16px;
-    }
-  }
-
   .timeline-content {
     margin-left: 55px;
 
     &.timeline-content-form {
-      @media (max-width: $screen-sm-max) {
+      @include notes-media('max', $screen-sm-max) {
         margin-left: 0;
       }
     }
@@ -51,26 +38,30 @@ ul.notes {
   }
 
   .discussion {
-    overflow: hidden;
     display: block;
     position: relative;
+
+    .diff-content {
+      overflow: visible;
+    }
   }
 
-  .note {
-    padding: $gl-padding $gl-btn-padding 0;
+  > li {
+    padding: $gl-padding $gl-btn-padding;
     display: block;
     position: relative;
     border-bottom: 1px solid $white-normal;
 
+    &:last-child {
+      // Override `.timeline > li:last-child { border-bottom: none; }`
+      border-bottom: 1px solid $white-normal;
+    }
+
     &.being-posted {
       pointer-events: none;
       opacity: 0.5;
 
       .dummy-avatar {
-        display: inline-block;
-        height: 40px;
-        width: 40px;
-        border-radius: 50%;
         background-color: $kdb-border;
         border: 1px solid darken($kdb-border, 25%);
       }
@@ -85,10 +76,6 @@ ul.notes {
       &.timeline-entry {
         padding: $gl-padding 10px;
       }
-
-      .system-note {
-        padding: 0;
-      }
     }
 
     &.is-editing {
@@ -130,13 +117,13 @@ ul.notes {
 
     .note-awards {
       .js-awards-block {
-        margin-bottom: 16px;
+        margin-top: 16px;
       }
     }
 
     .note-header {
 
-      @media (max-width: $screen-xs-min) {
+      @include notes-media('max', $screen-xs-min) {
         .inline {
           display: block;
         }
@@ -165,10 +152,10 @@ ul.notes {
 
   .system-note {
     font-size: 14px;
-    padding: 0;
+    padding-left: 0;
     clear: both;
 
-    @media (min-width: $screen-sm-min) {
+    @include notes-media('min', $screen-sm-min) {
       margin-left: 65px;
     }
 
@@ -202,11 +189,22 @@ ul.notes {
       }
     }
 
-    .timeline-content {
-      padding: 14px 10px;
+    .timeline-icon {
+      float: left;
 
-      @media (min-width: $screen-sm-min) {
-        margin-left: 20px;
+      svg {
+        width: 16px;
+        height: 16px;
+        fill: $gray-darkest;
+        position: absolute;
+        left: 0;
+        top: 2px;
+      }
+    }
+
+    .timeline-content {
+      @include notes-media('min', $screen-sm-min) {
+        margin-left: 30px;
       }
     }
 
@@ -243,11 +241,6 @@ ul.notes {
 
           ul {
             margin: 3px 0 3px 16px !important;
-
-            .gfm-commit {
-              font-family: $monospace_font;
-              font-size: 12px;
-            }
           }
 
           p:first-child {
@@ -289,10 +282,6 @@ ul.notes {
     }
   }
 
-  .diff-header > span {
-    margin-right: 10px;
-  }
-
   .line_content {
     white-space: pre-wrap;
   }
@@ -384,7 +373,7 @@ ul.notes {
   display: flex;
   justify-content: space-between;
 
-  @media (max-width: $screen-xs-max) {
+  @include notes-media('max', $screen-xs-max) {
     flex-flow: row wrap;
   }
 }
@@ -394,10 +383,20 @@ ul.notes {
   padding-bottom: 8px;
 }
 
+.system-note .note-header-info {
+  padding-bottom: 0;
+}
+
+.note-header-author-name {
+  @include notes-media('max', $screen-xs-max) {
+    display: none;
+  }
+}
+
 .note-headline-light {
   display: inline;
 
-  @media (max-width: $screen-xs-min) {
+  @include notes-media('max', $screen-xs-min) {
     display: block;
   }
 }
@@ -439,7 +438,7 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
 
-  @media (max-width: $screen-xs-max) {
+  @include notes-media('max', $screen-xs-max) {
     float: none;
     margin-left: 0;
   }
@@ -447,10 +446,57 @@ ul.notes {
   .note-action-button {
     margin-left: 8px;
   }
+
+  .more-actions-toggle {
+    margin-left: 2px;
+  }
+}
+
+.more-actions {
+  display: inline;
+
+  .tooltip {
+    white-space: nowrap;
+  }
+}
+
+.more-actions-toggle {
+  padding: 0;
+  outline: none;
+
+  &:hover .icon,
+  &:focus .icon {
+    color: $blue-600;
+  }
+
+  .icon {
+    padding: 0 6px;
+  }
+}
+
+.more-actions-dropdown {
+  width: 180px;
+  min-width: 180px;
+  margin-top: $gl-btn-padding;
+
+  li > a,
+  li > .btn {
+    color: $gl-text-color;
+    padding: $gl-btn-padding;
+    width: 100%;
+    text-align: left;
+
+    &:hover,
+    &:focus {
+      color: $gl-text-color;
+      background-color: $blue-25;
+      border-radius: $border-radius-default;
+    }
+  }
 }
 
 .discussion-actions {
-  @media (max-width: $screen-md-max) {
+  @include notes-media('max', $screen-md-max) {
     float: none;
     margin-left: 0;
 
@@ -464,7 +510,7 @@ ul.notes {
   display: inline;
   line-height: 20px;
 
-  @media (min-width: $screen-sm-min) {
+  @include notes-media('min', $screen-sm-min) {
     margin-left: 10px;
     line-height: 24px;
   }
@@ -554,13 +600,13 @@ ul.notes {
   position: relative;
   top: -2px;
   display: inline-block;
-  padding-left: 4px;
-  padding-right: 4px;
+  padding-left: 7px;
+  padding-right: 7px;
   color: $notes-role-color;
   font-size: 12px;
   line-height: 20px;
   border: 1px solid $border-color;
-  border-radius: $border-radius-base;
+  border-radius: $label-border-radius;
 }
 
 
@@ -596,6 +642,22 @@ ul.notes {
   }
 }
 
+.discussion-body,
+.diff-file {
+  .notes .note {
+    padding-left: $gl-padding;
+    padding-right: $gl-padding;
+
+    &.system-note {
+      padding-left: 0;
+
+      @media (min-width: $screen-sm-min) {
+        margin-left: 70px;
+      }
+    }
+  }
+}
+
 .diff-file {
   .is-over {
     .add-diff-note {
@@ -605,17 +667,11 @@ ul.notes {
 }
 
 .disabled-comment {
-  margin-left: -$gl-padding-top;
-  margin-right: -$gl-padding-top;
   background-color: $gray-light;
   border-radius: $border-radius-base;
   border: 1px solid $border-gray-normal;
   color: $note-disabled-comment-color;
-  line-height: 200px;
-
-  .disabled-comment-text {
-    line-height: normal;
-  }
+  padding: 90px 0;
 
   a {
     color: $gl-link-color;
@@ -623,7 +679,7 @@ ul.notes {
 }
 
 .line-resolve-all-container {
-  @media (min-width: $screen-sm-min) {
+  @include notes-media('min', $screen-sm-min) {
     margin-right: 0;
     padding-left: $gl-padding;
   }
@@ -665,7 +721,7 @@ ul.notes {
 .line-resolve-all {
   vertical-align: middle;
   display: inline-block;
-  padding: 6px 10px;
+  padding: 5px 10px 6px;
   background-color: $gray-light;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
@@ -678,6 +734,10 @@ ul.notes {
 
   .line-resolve-btn {
     margin-right: 5px;
+
+    svg {
+      vertical-align: middle;
+    }
   }
 }
 
@@ -714,6 +774,10 @@ ul.notes {
   }
 }
 
+.line-resolve-text {
+  vertical-align: middle;
+}
+
 .discussion-next-btn {
   svg {
     margin: 0;
@@ -730,11 +794,6 @@ ul.notes {
 
 // Merge request notes in diffs
 .diff-file {
-  // Diff is side by side
-  .notes_content.parallel .note-header .note-headline-light {
-    display: block;
-    position: relative;
-  }
   // Diff is inline
   .notes_content .note-header .note-headline-light {
     display: inline-block;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 4304e736b58..58b458cd837 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,10 +1,4 @@
 .pipelines {
-  .realtime-loading {
-    font-size: 40px;
-    text-align: center;
-    margin: 0 auto;
-  }
-
   .stage {
     max-width: 90px;
     width: 90px;
@@ -14,10 +8,6 @@
     white-space: nowrap;
   }
 
-  .empty-state {
-    margin: 5% auto 0;
-  }
-
   .table-holder {
     width: 100%;
 
@@ -98,6 +88,10 @@
         }
       }
 
+      .btn .text-center {
+        display: inline;
+      }
+
       .tooltip {
         white-space: nowrap;
       }
@@ -168,9 +162,13 @@
     float: none;
   }
 
+  .api {
+    @extend .monospace;
+  }
+
   .branch-commit {
 
-    .branch-name {
+    .ref-name {
       font-weight: bold;
       max-width: 120px;
       overflow: hidden;
@@ -192,12 +190,11 @@
       color: $gl-text-color;
     }
 
-    .commit-id {
+    .commit-sha {
       color: $gl-link-color;
     }
 
     .commit-title {
-      margin-top: 4px;
       max-width: 225px;
       overflow: hidden;
       white-space: nowrap;
@@ -230,7 +227,7 @@
   .duration,
   .finished-at {
     color: $gl-text-color-secondary;
-    margin: 4px 0;
+    margin: 0;
     white-space: nowrap;
 
     .fa {
@@ -257,7 +254,7 @@
 
 .stage-cell {
   font-size: 0;
-  padding: 10px 4px;
+  padding: 0 4px;
 
   > .stage-container > div > button > span > svg,
   > .stage-container > button > svg {
@@ -987,3 +984,11 @@
     width: 12px;
   }
 }
+
+.pipeline-header-container {
+  min-height: 55px;
+
+  .text-center {
+    padding-top: 12px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index fe084eb9397..c207159f606 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -287,6 +287,7 @@ table.u2f-registrations {
 
 .user-callout {
   margin: 0 auto;
+  max-width: $screen-lg-min;
 
   .bordered-box {
     border: 1px solid $blue-300;
@@ -295,14 +296,15 @@ table.u2f-registrations {
     position: relative;
     display: flex;
     justify-content: center;
+    align-items: center;
   }
 
   .landing {
-    margin-top: $gl-padding;
-    margin-bottom: $gl-padding;
+    padding: 32px;
 
     .close {
       position: absolute;
+      top: 20px;
       right: 20px;
       opacity: 1;
 
@@ -330,11 +332,20 @@ table.u2f-registrations {
         height: 110px;
         vertical-align: top;
       }
+
+      &.convdev {
+        margin: 0 0 0 30px;
+
+        svg {
+          height: 127px;
+        }
+      }
     }
 
     .user-callout-copy {
       display: inline-block;
       vertical-align: top;
+      max-width: 570px;
     }
   }
 
@@ -348,12 +359,20 @@ table.u2f-registrations {
     .landing {
       .svg-container,
       .user-callout-copy {
-        margin: 0;
+        margin: 0 auto;
         display: block;
 
         svg {
           height: 75px;
         }
+
+        &.convdev {
+          margin: $gl-padding auto 0;
+
+          svg {
+            height: 120px;
+          }
+        }
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c119f0c9b22..a2f781a6a6e 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -29,6 +29,20 @@
     & > .form-group {
       padding-left: 0;
     }
+
+    select option[disabled] {
+      display: none;
+    }
+  }
+
+  select {
+    background: transparent;
+    transition: background 2s ease-out;
+
+    &.highlight-changes {
+      background: $highlight-changes-color;
+      transition: none;
+    }
   }
 
   .help-block {
@@ -247,7 +261,6 @@
       font-size: 13px;
       font-weight: 600;
       line-height: 13px;
-      padding: $gl-vert-padding $gl-padding;
       letter-spacing: .4px;
       padding: 6px 14px;
       text-align: center;
@@ -384,10 +397,6 @@ a.deploy-project-label {
   }
 }
 
-.last-push-widget {
-  margin-top: -1px;
-}
-
 .fork-namespaces {
   .row {
     -webkit-flex-wrap: wrap;
@@ -639,59 +648,6 @@ pre.light-well {
   }
 }
 
-.project-last-commit {
-  background-color: $gray-light;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-base;
-  padding: 12px;
-
-  @media (min-width: $screen-sm-min) {
-    margin-top: $gl-padding;
-  }
-
-  .ci-status {
-    margin-right: $gl-padding;
-  }
-
-  .commit-row-message {
-    color: $gl-text-color;
-  }
-
-  .commit_short_id {
-    margin-right: 5px;
-    color: $gl-link-color;
-    font-weight: 600;
-  }
-
-  .commit-author-link {
-    .commit-author-name {
-      font-weight: 600;
-    }
-  }
-}
-
-.project-show-readme {
-  .row-content-block {
-    background-color: inherit;
-    border: none;
-  }
-
-  .readme-holder {
-    padding: $gl-padding 0;
-    border-top: 0;
-
-    .edit-project-readme {
-      z-index: 2;
-      position: relative;
-    }
-
-    .wiki h1 {
-      border-bottom: none;
-      padding: 0;
-    }
-  }
-}
-
 .git-clone-holder {
   width: 380px;
 
@@ -733,14 +689,16 @@ pre.light-well {
   }
 }
 
-.new_protected_branch {
+.new_protected_branch,
+.new-protected-tag {
   label {
     margin-top: 6px;
     font-weight: normal;
   }
 }
 
-.create-new-protected-branch-button {
+.create-new-protected-branch-button,
+.create-new-protected-tag-button {
   @include dropdown-link;
 
   width: 100%;
@@ -825,7 +783,8 @@ pre.light-well {
 }
 
 .compare-form-group {
-  .dropdown-menu {
+  .dropdown-menu,
+  .inline-input-group {
     width: 100%;
 
     @media (min-width: $screen-sm-min) {
@@ -844,14 +803,6 @@ pre.light-well {
       width: auto;
     }
   }
-
-  .inline-input-group {
-    width: 100%;
-
-    @media (min-width: $screen-sm-min) {
-      width: 250px;
-    }
-  }
 }
 
 .clearable-input {
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 3889deee21a..33b3c083fd2 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -1,3 +1,90 @@
+@keyframes expandMaxHeight {
+  0% {
+    max-height: 0;
+  }
+
+  99% {
+    max-height: 100vh;
+  }
+
+  100% {
+    max-height: none;
+  }
+}
+
+@keyframes collapseMaxHeight {
+  0% {
+    max-height: 100vh;
+  }
+
+  100% {
+    max-height: 0;
+  }
+}
+
+.settings {
+  overflow: hidden;
+  border-bottom: 1px solid $gray-darker;
+
+  &:first-of-type {
+    margin-top: 10px;
+  }
+}
+
+.settings-header {
+  position: relative;
+  padding: 20px 110px 10px 0;
+
+  h4 {
+    margin-top: 0;
+  }
+
+  button {
+    position: absolute;
+    top: 20px;
+    right: 6px;
+    min-width: 80px;
+  }
+}
+
+.settings-content {
+  max-height: 1px;
+  overflow-y: scroll;
+  margin-right: -20px;
+  padding-right: 130px;
+  animation: collapseMaxHeight 300ms ease-out;
+
+  &.expanded {
+    max-height: none;
+    overflow-y: visible;
+    animation: expandMaxHeight 300ms ease-in;
+  }
+
+  &.no-animate {
+    animation: none;
+  }
+
+  @media(max-width: $screen-sm-max) {
+    padding-right: 20px;
+  }
+
+  &::before {
+    content: ' ';
+    display: block;
+    height: 1px;
+    overflow: hidden;
+    margin-bottom: 4px;
+  }
+
+  &::after {
+    content: ' ';
+    display: block;
+    height: 1px;
+    overflow: hidden;
+    margin-top: 20px;
+  }
+}
+
 .settings-list-icon {
   color: $gl-text-color-secondary;
   font-size: $settings-icon-size;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 03c75ce61f5..ab63225147f 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -138,11 +138,12 @@
 
 .blob-commit-info {
   list-style: none;
-  background: $gray-light;
-  padding: 16px 16px 16px 6px;
-  border: 1px solid $border-color;
-  border-bottom: none;
   margin: 0;
+  padding: 0;
+}
+
+.blob-content-holder {
+  margin-top: $gl-padding;
 }
 
 .blob-upload-dropzone-previews {
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index 6cc1cc8e263..136d0c79467 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -28,9 +28,6 @@ nav.navbar-collapse.collapse,
 .profiler-results,
 .tree-ref-holder,
 .tree-holder .breadcrumb,
-.blob-commit-info,
-.file-title,
-.file-holder,
 .nav,
 .btn,
 ul.notes-form,
@@ -43,6 +40,11 @@ ul.notes-form,
   display: none!important;
 }
 
+pre {
+  page-break-before: avoid;
+  page-break-inside: auto;
+}
+
 .page-gutter {
   padding-top: 0;
   padding-left: 0;