Merge remote-tracking branch 'origin/master' into 25426-group-dashboard-ui

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

1023 files changed, 19443 insertions, 8343 deletions

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/autosave.js b/app/assets/javascripts/autosave.js
index 8630b18a73f..cfab6c40b34 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -1,8 +1,11 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-param-reassign, quotes, prefer-template, no-var, one-var, no-unused-vars, one-var-declaration-per-line, no-void, consistent-return, no-empty, max-len */
+import AccessorUtilities from './lib/utils/accessor';
 
 window.Autosave = (function() {
   function Autosave(field, key) {
     this.field = field;
+    this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+
     if (key.join != null) {
       key = key.join("/");
     }
@@ -17,16 +20,12 @@ window.Autosave = (function() {
   }
 
   Autosave.prototype.restore = function() {
-    var e, text;
-    if (window.localStorage == null) {
-      return;
-    }
-    try {
-      text = window.localStorage.getItem(this.key);
-    } catch (error) {
-      e = error;
-      return;
-    }
+    var text;
+
+    if (!this.isLocalStorageAvailable) return;
+
+    text = window.localStorage.getItem(this.key);
+
     if ((text != null ? text.length : void 0) > 0) {
       this.field.val(text);
     }
@@ -35,27 +34,22 @@ window.Autosave = (function() {
 
   Autosave.prototype.save = function() {
     var text;
-    if (window.localStorage == null) {
-      return;
-    }
     text = this.field.val();
-    if ((text != null ? text.length : void 0) > 0) {
-      try {
-        return window.localStorage.setItem(this.key, text);
-      } catch (error) {}
-    } else {
-      return this.reset();
+
+    if (this.isLocalStorageAvailable && (text != null ? text.length : void 0) > 0) {
+      return window.localStorage.setItem(this.key, text);
     }
+
+    return this.reset();
   };
 
   Autosave.prototype.reset = function() {
-    if (window.localStorage == null) {
-      return;
-    }
-    try {
-      return window.localStorage.removeItem(this.key);
-    } catch (error) {}
+    if (!this.isLocalStorageAvailable) return;
+
+    return window.localStorage.removeItem(this.key);
   };
 
   return Autosave;
 })();
+
+export default window.Autosave;
diff --git a/app/assets/javascripts/behaviors/gl_emoji/unicode_support_map.js b/app/assets/javascripts/behaviors/gl_emoji/unicode_support_map.js
index aa522e20c36..257df55e54f 100644
--- a/app/assets/javascripts/behaviors/gl_emoji/unicode_support_map.js
+++ b/app/assets/javascripts/behaviors/gl_emoji/unicode_support_map.js
@@ -1,3 +1,5 @@
+import AccessorUtilities from '../../lib/utils/accessor';
+
 const unicodeSupportTestMap = {
   // man, student (emojione does not have any of these yet), http://emojipedia.org/emoji-zwj-sequences/
   // occupationZwj: '\u{1F468}\u{200D}\u{1F393}',
@@ -140,16 +142,25 @@ function generateUnicodeSupportMap(testMap) {
 
 function getUnicodeSupportMap() {
   let unicodeSupportMap;
-  const userAgentFromCache = window.localStorage.getItem('gl-emoji-user-agent');
+  let userAgentFromCache;
+
+  const isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+
+  if (isLocalStorageAvailable) userAgentFromCache = window.localStorage.getItem('gl-emoji-user-agent');
+
   try {
     unicodeSupportMap = JSON.parse(window.localStorage.getItem('gl-emoji-unicode-support-map'));
   } catch (err) {
     // swallow
   }
+
   if (!unicodeSupportMap || userAgentFromCache !== navigator.userAgent) {
     unicodeSupportMap = generateUnicodeSupportMap(unicodeSupportTestMap);
-    window.localStorage.setItem('gl-emoji-user-agent', navigator.userAgent);
-    window.localStorage.setItem('gl-emoji-unicode-support-map', JSON.stringify(unicodeSupportMap));
+
+    if (isLocalStorageAvailable) {
+      window.localStorage.setItem('gl-emoji-user-agent', navigator.userAgent);
+      window.localStorage.setItem('gl-emoji-unicode-support-map', JSON.stringify(unicodeSupportMap));
+    }
   }
 
   return unicodeSupportMap;
diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js
index 3d162b24413..1f9e0448084 100644
--- a/app/assets/javascripts/behaviors/quick_submit.js
+++ b/app/assets/javascripts/behaviors/quick_submit.js
@@ -43,8 +43,8 @@ $(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
   const $submitButton = $form.find('input[type=submit], button[type=submit]');
 
   if (!$submitButton.attr('disabled')) {
+    $submitButton.trigger('click', [e]);
     $submitButton.disable();
-    $form.submit();
   }
 });
 
diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
new file mode 100644
index 00000000000..c17877a276d
--- /dev/null
+++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
@@ -0,0 +1,114 @@
+import sqljs from 'sql.js';
+import { template as _template } from 'underscore';
+
+const PREVIEW_TEMPLATE = _template(`
+  <div class="panel panel-default">
+    <div class="panel-heading"><%- name %></div>
+    <div class="panel-body">
+      <img class="img-thumbnail" src="data:image/png;base64,<%- image %>"/>
+    </div>
+  </div>
+`);
+
+class BalsamiqViewer {
+  constructor(viewer) {
+    this.viewer = viewer;
+  }
+
+  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();
+    });
+  }
+
+  fileLoaded(loadEvent, resolve, reject) {
+    if (loadEvent.target.status !== 200) return reject();
+
+    this.renderFile(loadEvent);
+
+    return resolve();
+  }
+
+  renderFile(loadEvent) {
+    const container = document.createElement('ul');
+
+    this.initDatabase(loadEvent.target.response);
+
+    const previews = this.getPreviews();
+    previews.forEach((preview) => {
+      const renderedPreview = this.renderPreview(preview);
+
+      container.appendChild(renderedPreview);
+    });
+
+    container.classList.add('list-inline');
+    container.classList.add('previews');
+
+    this.viewer.appendChild(container);
+  }
+
+  initDatabase(data) {
+    const previewBinary = new Uint8Array(data);
+
+    this.database = new sqljs.Database(previewBinary);
+  }
+
+  getPreviews() {
+    const thumbnails = this.database.exec('SELECT * FROM thumbnails');
+
+    return thumbnails[0].values.map(BalsamiqViewer.parsePreview);
+  }
+
+  getResource(resourceID) {
+    const resources = this.database.exec(`SELECT * FROM resources WHERE id = '${resourceID}'`);
+
+    return resources[0];
+  }
+
+  renderPreview(preview) {
+    const previewElement = document.createElement('li');
+
+    previewElement.classList.add('preview');
+    previewElement.innerHTML = this.renderTemplate(preview);
+
+    return previewElement;
+  }
+
+  renderTemplate(preview) {
+    const resource = this.getResource(preview.resourceID);
+    const name = BalsamiqViewer.parseTitle(resource);
+    const image = preview.image;
+
+    const template = PREVIEW_TEMPLATE({
+      name,
+      image,
+    });
+
+    return template;
+  }
+
+  static parsePreview(preview) {
+    return JSON.parse(preview[1]);
+  }
+
+  /*
+   * resource = {
+   *   columns: ['ID', 'BRANCHID', 'ATTRIBUTES', 'DATA'],
+   *   values: [['id', 'branchId', 'attributes', 'data']],
+   * }
+   *
+   * 'attributes' being a JSON string containing the `name` property.
+   */
+  static parseTitle(resource) {
+    return JSON.parse(resource.values[0][2]).name;
+  }
+}
+
+export default BalsamiqViewer;
diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js
new file mode 100644
index 00000000000..8641a6fdae6
--- /dev/null
+++ b/app/assets/javascripts/blob/balsamiq_viewer.js
@@ -0,0 +1,22 @@
+/* global Flash */
+
+import BalsamiqViewer from './balsamiq/balsamiq_viewer';
+
+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_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js
index 3062cd51ee3..a20c6ca7a21 100644
--- a/app/assets/javascripts/blob/file_template_mediator.js
+++ b/app/assets/javascripts/blob/file_template_mediator.js
@@ -99,7 +99,7 @@ export default class FileTemplateMediator {
     });
   }
 
-  selectTemplateType(item, el, e) {
+  selectTemplateType(item, e) {
     if (e) {
       e.preventDefault();
     }
@@ -117,6 +117,10 @@ export default class FileTemplateMediator {
     this.cacheToggleText();
   }
 
+  selectTemplateTypeOptions(options) {
+    this.selectTemplateType(options.selectedObj, options.e);
+  }
+
   selectTemplateFile(selector, query, data) {
     selector.renderLoading();
     // in case undo menu is already already there
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js
index 31dd45fac89..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;
@@ -52,9 +50,16 @@ export default class FileTemplateSelector {
       .removeClass('fa-spinner fa-spin');
   }
 
-  reportSelection(query, el, e, data) {
+  reportSelection(options) {
+    const { query, e, data } = options;
     e.preventDefault();
     return this.mediator.selectTemplateFile(this, query, data);
   }
-}
 
+  reportSelectionName(options) {
+    const opts = options;
+    opts.query = options.selectedObj.name;
+
+    this.reportSelection(opts);
+  }
+}
diff --git a/app/assets/javascripts/blob/target_branch_dropdown.js b/app/assets/javascripts/blob/target_branch_dropdown.js
index 216f069ef71..d52d69b1274 100644
--- a/app/assets/javascripts/blob/target_branch_dropdown.js
+++ b/app/assets/javascripts/blob/target_branch_dropdown.js
@@ -37,8 +37,8 @@ class TargetBranchDropDown {
         }
         return SELECT_ITEM_MSG;
       },
-      clicked(item, el, e) {
-        e.preventDefault();
+      clicked(options) {
+        options.e.preventDefault();
         self.onClick.call(self);
       },
       fieldName: self.fieldName,
diff --git a/app/assets/javascripts/blob/template_selector.js b/app/assets/javascripts/blob/template_selector.js
index d7c1c32efbd..888883163c5 100644
--- a/app/assets/javascripts/blob/template_selector.js
+++ b/app/assets/javascripts/blob/template_selector.js
@@ -24,7 +24,7 @@ export default class TemplateSelector {
       search: {
         fields: ['name'],
       },
-      clicked: (item, el, e) => this.fetchFileTemplate(item, el, e),
+      clicked: options => this.fetchFileTemplate(options),
       text: item => item.name,
     });
   }
@@ -51,7 +51,10 @@ export default class TemplateSelector {
     return this.$dropdownContainer.removeClass('hidden');
   }
 
-  fetchFileTemplate(item, el, e) {
+  fetchFileTemplate(options) {
+    const { e } = options;
+    const item = options.selectedObj;
+
     e.preventDefault();
     return this.requestFile(item);
   }
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 935df07677c..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';
 
@@ -25,7 +25,7 @@ export default class BlobCiYamlSelector extends FileTemplateSelector {
       search: {
         fields: ['name'],
       },
-      clicked: (query, el, e) => this.reportSelection(query.name, el, e),
+      clicked: options => this.reportSelectionName(options),
       text: item => item.name,
     });
   }
diff --git a/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js b/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js
index b4b4d09c315..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';
 
@@ -25,7 +25,7 @@ export default class DockerfileSelector extends FileTemplateSelector {
       search: {
         fields: ['name'],
       },
-      clicked: (query, el, e) => this.reportSelection(query.name, el, e),
+      clicked: options => this.reportSelectionName(options),
       text: item => item.name,
     });
   }
diff --git a/app/assets/javascripts/blob/template_selectors/gitignore_selector.js b/app/assets/javascripts/blob/template_selectors/gitignore_selector.js
index aefae54ae71..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';
 
@@ -24,7 +24,7 @@ export default class BlobGitignoreSelector extends FileTemplateSelector {
       search: {
         fields: ['name'],
       },
-      clicked: (query, el, e) => this.reportSelection(query.name, el, e),
+      clicked: options => this.reportSelectionName(options),
       text: item => item.name,
     });
   }
diff --git a/app/assets/javascripts/blob/template_selectors/license_selector.js b/app/assets/javascripts/blob/template_selectors/license_selector.js
index c8abd689ab4..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';
 
@@ -24,13 +24,22 @@ export default class BlobLicenseSelector extends FileTemplateSelector {
       search: {
         fields: ['name'],
       },
-      clicked: (query, el, e) => {
+      clicked: (options) => {
+        const { e } = options;
+        const el = options.$el;
+        const query = options.selectedObj;
+
         const data = {
           project: this.$dropdown.data('project'),
           fullname: this.$dropdown.data('fullname'),
         };
 
-        this.reportSelection(query.id, el, e, data);
+        this.reportSelection({
+          query: query.id,
+          el,
+          e,
+          data,
+        });
       },
       text: item => item.name,
     });
diff --git a/app/assets/javascripts/blob/template_selectors/type_selector.js b/app/assets/javascripts/blob/template_selectors/type_selector.js
index 56f23ef0568..a09381014a7 100644
--- a/app/assets/javascripts/blob/template_selectors/type_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/type_selector.js
@@ -17,7 +17,7 @@ export default class FileTemplateTypeSelector extends FileTemplateSelector {
       filterable: false,
       selectable: true,
       toggleLabel: item => item.name,
-      clicked: (item, el, e) => this.mediator.selectTemplateType(item, el, e),
+      clicked: options => this.mediator.selectTemplateTypeOptions(options),
       text: item => item.name,
     });
   }
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 07d67d49aa5..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';
     }
@@ -29,9 +50,9 @@ export default class BlobViewer {
 
     if (this.copySourceBtn) {
       this.copySourceBtn.addEventListener('click', () => {
-        if (this.copySourceBtn.classList.contains('disabled')) return;
+        if (this.copySourceBtn.classList.contains('disabled')) return this.copySourceBtn.blur();
 
-        this.switchToViewer('simple');
+        return this.switchToViewer('simple');
       });
     }
   }
@@ -61,40 +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');
-
-      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');
@@ -115,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 b6dee8177d2..0e4aa39226b 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/user');
-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);
 
@@ -59,7 +58,8 @@ $(() => {
       issueLinkBase: $boardApp.dataset.issueLinkBase,
       rootPath: $boardApp.dataset.rootPath,
       bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
-      detailIssue: Store.detail
+      detailIssue: Store.detail,
+      defaultAvatar: $boardApp.dataset.defaultAvatar,
     },
     computed: {
       detailIssueVisible () {
@@ -70,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);
@@ -82,7 +83,7 @@ $(() => {
       gl.boardService.all()
         .then((resp) => {
           resp.json().forEach((board) => {
-            const list = Store.addList(board);
+            const list = Store.addList(board, this.defaultAvatar);
 
             if (list.type === 'closed') {
               list.position = Infinity;
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 239eeacf2d7..9ba84489910 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -3,9 +3,7 @@
 import Vue from 'vue';
 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;
 
@@ -35,7 +33,10 @@ gl.issueBoards.Board = Vue.extend({
     filter: {
       handler() {
         this.list.page = 1;
-        this.list.getIssues(true);
+        this.list.getIssues(true)
+          .catch(() => {
+            // TODO: handle request error
+          });
       },
       deep: true,
     },
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js b/app/assets/javascripts/boards/components/board_blank_state.js
index 3fc68457961..870e115bd1a 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.js
+++ b/app/assets/javascripts/boards/components/board_blank_state.js
@@ -70,7 +70,10 @@ export default {
 
             list.id = listObj.id;
             list.label.id = listObj.label.id;
-            list.getIssues();
+            list.getIssues()
+              .catch(() => {
+                // TODO: handle request error
+              });
           });
         })
         .catch(() => {
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 b13386536bf..7ee2696e720 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() {
@@ -90,7 +92,10 @@ export default {
         if (this.scrollHeight() <= this.listHeight() &&
           this.list.issuesSize > this.list.issues.length) {
           this.list.page += 1;
-          this.list.getIssues(false);
+          this.list.getIssues(false)
+            .catch(() => {
+              // TODO: handle request error
+            });
         }
 
         if (this.scrollHeight() > Math.ceil(this.listHeight())) {
@@ -153,10 +158,7 @@ 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"
@@ -181,12 +183,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 0fa85b6fe14..1ce95b62138 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js
+++ b/app/assets/javascripts/boards/components/board_new_issue.js
@@ -26,6 +26,7 @@ export default {
         title: this.title,
         labels,
         subscribed: true,
+        assignees: [],
       });
 
       this.list.newIssue(issue)
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index f0066d4ec5d..386102032cb 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -3,10 +3,13 @@
 /* global MilestoneSelect */
 /* global LabelsSelect */
 /* global Sidebar */
+/* global Flash */
 
 import Vue from 'vue';
-
-require('./sidebar/remove_issue');
+import eventHub from '../../sidebar/event_hub';
+import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
+import Assignees from '../../sidebar/components/assignees/assignees';
+import './sidebar/remove_issue';
 
 const Store = gl.issueBoards.BoardsStore;
 
@@ -22,6 +25,7 @@ gl.issueBoards.BoardSidebar = Vue.extend({
       detail: Store.detail,
       issue: {},
       list: {},
+      loadingAssignees: false,
     };
   },
   computed: {
@@ -30,12 +34,21 @@ 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: {
     detail: {
       handler () {
         if (this.issue.id !== this.detail.issue.id) {
+          $('.block.assignee')
+            .find('input:not(.js-vue)[name="issue[assignee_ids][]"]')
+            .each((i, el) => {
+              $(el).remove();
+            });
+
           $('.js-issue-board-sidebar', this.$el).each((i, el) => {
             $(el).data('glDropdown').clearMenu();
           });
@@ -43,22 +56,59 @@ gl.issueBoards.BoardSidebar = Vue.extend({
 
         this.issue = this.detail.issue;
         this.list = this.detail.list;
+
+        this.$nextTick(() => {
+          this.endpoint = this.$refs.assigneeDropdown.dataset.issueUpdate;
+        });
       },
       deep: true
     },
-    issue () {
-      if (this.showSidebar) {
-        this.$nextTick(() => {
-          $('.right-sidebar').getNiceScroll(0).doScrollTop(0, 0);
-          $('.right-sidebar').getNiceScroll().resize();
-        });
-      }
-    }
   },
   methods: {
     closeSidebar () {
       this.detail.issue = {};
-    }
+    },
+    assignSelf () {
+      // Notify gl dropdown that we are now assigning to current user
+      this.$refs.assigneeBlock.dispatchEvent(new Event('assignYourself'));
+
+      this.addAssignee(this.currentUser);
+      this.saveAssignees();
+    },
+    removeAssignee (a) {
+      gl.issueBoards.BoardsStore.detail.issue.removeAssignee(a);
+    },
+    addAssignee (a) {
+      gl.issueBoards.BoardsStore.detail.issue.addAssignee(a);
+    },
+    removeAllAssignees () {
+      gl.issueBoards.BoardsStore.detail.issue.removeAllAssignees();
+    },
+    saveAssignees () {
+      this.loadingAssignees = true;
+
+      gl.issueBoards.BoardsStore.detail.issue.update(this.endpoint)
+        .then(() => {
+          this.loadingAssignees = false;
+        })
+        .catch(() => {
+          this.loadingAssignees = false;
+          return new Flash('An error occurred while saving assignees');
+        });
+    },
+  },
+  created () {
+    // Get events from glDropdown
+    eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
+    eventHub.$on('sidebar.addAssignee', this.addAssignee);
+    eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);
+    eventHub.$on('sidebar.saveAssignees', this.saveAssignees);
+  },
+  beforeDestroy() {
+    eventHub.$off('sidebar.removeAssignee', this.removeAssignee);
+    eventHub.$off('sidebar.addAssignee', this.addAssignee);
+    eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees);
+    eventHub.$off('sidebar.saveAssignees', this.saveAssignees);
   },
   mounted () {
     new IssuableContext(this.currentUser);
@@ -70,5 +120,7 @@ gl.issueBoards.BoardSidebar = Vue.extend({
   },
   components: {
     removeBtn: gl.issueBoards.RemoveIssueBtn,
+    'assignee-title': AssigneeTitle,
+    assignees: Assignees,
   },
 });
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index fc154ee7b8b..4699ef5a51c 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;
@@ -31,18 +32,39 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       default: false,
     },
   },
+  data() {
+    return {
+      limitBeforeCounter: 3,
+      maxRender: 4,
+      maxCounter: 99,
+    };
+  },
+  components: {
+    userAvatarLink,
+  },
   computed: {
-    cardUrl() {
-      return `${this.issueLinkBase}/${this.issue.id}`;
+    numberOverLimit() {
+      return this.issue.assignees.length - this.limitBeforeCounter;
     },
-    assigneeUrl() {
-      return `${this.rootPath}${this.issue.assignee.username}`;
+    assigneeCounterTooltip() {
+      return `${this.assigneeCounterLabel} more`;
     },
-    assigneeUrlTitle() {
-      return `Assigned to ${this.issue.assignee.name}`;
+    assigneeCounterLabel() {
+      if (this.numberOverLimit > this.maxCounter) {
+        return `${this.maxCounter}+`;
+      }
+
+      return `+${this.numberOverLimit}`;
     },
-    avatarUrlTitle() {
-      return `Avatar for ${this.issue.assignee.name}`;
+    shouldRenderCounter() {
+      if (this.issue.assignees.length <= this.maxRender) {
+        return false;
+      }
+
+      return this.issue.assignees.length > this.numberOverLimit;
+    },
+    cardUrl() {
+      return `${this.issueLinkBase}/${this.issue.id}`;
     },
     issueId() {
       return `#${this.issue.id}`;
@@ -52,6 +74,28 @@ gl.issueBoards.IssueCardInner = Vue.extend({
     },
   },
   methods: {
+    isIndexLessThanlimit(index) {
+      return index < this.limitBeforeCounter;
+    },
+    shouldRenderAssignee(index) {
+      // Eg. maxRender is 4,
+      // Render up to all 4 assignees if there are only 4 assigness
+      // Otherwise render up to the limitBeforeCounter
+      if (this.issue.assignees.length <= this.maxRender) {
+        return index < this.maxRender;
+      }
+
+      return index < this.limitBeforeCounter;
+    },
+    assigneeUrl(assignee) {
+      return `${this.rootPath}${assignee.username}`;
+    },
+    assigneeUrlTitle(assignee) {
+      return `Assigned to ${assignee.name}`;
+    },
+    avatarUrlTitle(assignee) {
+      return `Avatar for ${assignee.name}`;
+    },
     showLabel(label) {
       if (!this.list) return true;
 
@@ -105,25 +149,32 @@ gl.issueBoards.IssueCardInner = Vue.extend({
             {{ issueId }}
           </span>
         </h4>
-        <a
-          class="card-assignee has-tooltip js-no-trigger"
-          :href="assigneeUrl"
-          :title="assigneeUrlTitle"
-          v-if="issue.assignee"
-          data-container="body"
-        >
-          <img
-            class="avatar avatar-inline s20 js-no-trigger"
-            :src="issue.assignee.avatar"
-            width="20"
-            height="20"
-            :alt="avatarUrlTitle"
+        <div class="card-assignee">
+          <user-avatar-link
+            v-for="(assignee, index) in issue.assignees"
+            v-if="shouldRenderAssignee(index)"
+            class="js-no-trigger"
+            :link-href="assigneeUrl(assignee)"
+            :img-alt="avatarUrlTitle(assignee)"
+            :img-src="assignee.avatar"
+            :tooltip-text="assigneeUrlTitle(assignee)"
+            tooltip-placement="bottom"
           />
-        </a>
+          <span
+            class="avatar-counter has-tooltip"
+            :title="assigneeCounterTooltip"
+            v-if="shouldRenderCounter"
+          >
+           {{ assigneeCounterLabel }}
+          </span>
+        </div>
       </div>
-      <div class="card-footer" v-if="showLabelFooter">
+      <div
+        class="card-footer"
+        v-if="showLabelFooter"
+      >
         <button
-          class="label color-label has-tooltip js-no-trigger"
+          class="label color-label has-tooltip"
           v-for="label in issue.labels"
           type="button"
           v-if="showLabel(label)"
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..fe7ab2db85d 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;
 
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 fdab317dc23..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;
 
@@ -108,6 +108,8 @@ gl.issueBoards.IssuesModal = Vue.extend({
         if (!this.issuesCount) {
           this.issuesCount = data.size;
         }
+      }).catch(() => {
+        // TODO: handle request error
       });
     },
   },
@@ -135,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
@@ -159,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/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
index 7e3bb79af1d..f29b6caa1ac 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -52,7 +52,9 @@ gl.issueBoards.newListDropdownInit = () => {
       filterable: true,
       selectable: true,
       multiSelect: true,
-      clicked (label, $el, e) {
+      clicked (options) {
+        const { e } = options;
+        const label = options.selectedObj;
         e.preventDefault();
 
         if (!Store.findList('title', label.title)) {
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/assignee.js b/app/assets/javascripts/boards/models/assignee.js
new file mode 100644
index 00000000000..05dd449e4fd
--- /dev/null
+++ b/app/assets/javascripts/boards/models/assignee.js
@@ -0,0 +1,12 @@
+/* eslint-disable no-unused-vars */
+
+class ListAssignee {
+  constructor(user, defaultAvatar) {
+    this.id = user.id;
+    this.name = user.name;
+    this.username = user.username;
+    this.avatar = user.avatar_url || defaultAvatar;
+  }
+}
+
+window.ListAssignee = ListAssignee;
diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js
index d6175069e37..6c2d8a3781b 100644
--- a/app/assets/javascripts/boards/models/issue.js
+++ b/app/assets/javascripts/boards/models/issue.js
@@ -1,12 +1,12 @@
 /* eslint-disable no-unused-vars, space-before-function-paren, arrow-body-style, arrow-parens, comma-dangle, max-len */
 /* global ListLabel */
 /* global ListMilestone */
-/* global ListUser */
+/* global ListAssignee */
 
 import Vue from 'vue';
 
 class ListIssue {
-  constructor (obj) {
+  constructor (obj, defaultAvatar) {
     this.globalId = obj.id;
     this.id = obj.iid;
     this.title = obj.title;
@@ -14,14 +14,10 @@ class ListIssue {
     this.dueDate = obj.due_date;
     this.subscribed = obj.subscribed;
     this.labels = [];
+    this.assignees = [];
     this.selected = false;
-    this.assignee = false;
     this.position = obj.relative_position || Infinity;
 
-    if (obj.assignee) {
-      this.assignee = new ListUser(obj.assignee);
-    }
-
     if (obj.milestone) {
       this.milestone = new ListMilestone(obj.milestone);
     }
@@ -29,6 +25,8 @@ class ListIssue {
     obj.labels.forEach((label) => {
       this.labels.push(new ListLabel(label));
     });
+
+    this.assignees = obj.assignees.map(a => new ListAssignee(a, defaultAvatar));
   }
 
   addLabel (label) {
@@ -51,6 +49,26 @@ class ListIssue {
     labels.forEach(this.removeLabel.bind(this));
   }
 
+  addAssignee (assignee) {
+    if (!this.findAssignee(assignee)) {
+      this.assignees.push(new ListAssignee(assignee));
+    }
+  }
+
+  findAssignee (findAssignee) {
+    return this.assignees.filter(assignee => assignee.id === findAssignee.id)[0];
+  }
+
+  removeAssignee (removeAssignee) {
+    if (removeAssignee) {
+      this.assignees = this.assignees.filter(assignee => assignee.id !== removeAssignee.id);
+    }
+  }
+
+  removeAllAssignees () {
+    this.assignees = [];
+  }
+
   getLists () {
     return gl.issueBoards.BoardsStore.state.lists.filter(list => list.findIssue(this.id));
   }
@@ -60,7 +78,7 @@ class ListIssue {
       issue: {
         milestone_id: this.milestone ? this.milestone.id : null,
         due_date: this.dueDate,
-        assignee_id: this.assignee ? this.assignee.id : null,
+        assignee_ids: this.assignees.length > 0 ? this.assignees.map((u) => u.id) : [0],
         label_ids: this.labels.map((label) => label.id)
       }
     };
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index f2b79a88a4a..90561d0f7a8 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -6,7 +6,7 @@ import queryData from '../utils/query_data';
 const PER_PAGE = 20;
 
 class List {
-  constructor (obj) {
+  constructor (obj, defaultAvatar) {
     this.id = obj.id;
     this._uid = this.guid();
     this.position = obj.position;
@@ -18,13 +18,16 @@ class List {
     this.loadingMore = false;
     this.issues = [];
     this.issuesSize = 0;
+    this.defaultAvatar = defaultAvatar;
 
     if (obj.label) {
       this.label = new ListLabel(obj.label);
     }
 
     if (this.type !== 'blank' && this.id) {
-      this.getIssues();
+      this.getIssues().catch(() => {
+        // TODO: handle request error
+      });
     }
   }
 
@@ -51,11 +54,17 @@ class List {
     gl.issueBoards.BoardsStore.state.lists.splice(index, 1);
     gl.issueBoards.BoardsStore.updateNewListDropdown(this.id);
 
-    gl.boardService.destroyList(this.id);
+    gl.boardService.destroyList(this.id)
+      .catch(() => {
+        // TODO: handle request error
+      });
   }
 
   update () {
-    gl.boardService.updateList(this.id, this.position);
+    gl.boardService.updateList(this.id, this.position)
+      .catch(() => {
+        // TODO: handle request error
+      });
   }
 
   nextPage () {
@@ -106,7 +115,7 @@ class List {
 
   createIssues (data) {
     data.forEach((issueObj) => {
-      this.addIssue(new ListIssue(issueObj));
+      this.addIssue(new ListIssue(issueObj, this.defaultAvatar));
     });
   }
 
@@ -145,11 +154,17 @@ class List {
     this.issues.splice(oldIndex, 1);
     this.issues.splice(newIndex, 0, issue);
 
-    gl.boardService.moveIssue(issue.id, null, null, moveBeforeIid, moveAfterIid);
+    gl.boardService.moveIssue(issue.id, null, null, moveBeforeIid, moveAfterIid)
+      .catch(() => {
+        // TODO: handle request error
+      });
   }
 
   updateIssueLabel(issue, listFrom, moveBeforeIid, moveAfterIid) {
-    gl.boardService.moveIssue(issue.id, listFrom.id, this.id, moveBeforeIid, moveAfterIid);
+    gl.boardService.moveIssue(issue.id, listFrom.id, this.id, moveBeforeIid, moveAfterIid)
+      .catch(() => {
+        // TODO: handle request error
+      });
   }
 
   findIssue (id) {
diff --git a/app/assets/javascripts/boards/models/user.js b/app/assets/javascripts/boards/models/user.js
deleted file mode 100644
index 8e9de4d4cbb..00000000000
--- a/app/assets/javascripts/boards/models/user.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-disable no-unused-vars */
-
-class ListUser {
-  constructor(user) {
-    this.id = user.id;
-    this.name = user.name;
-    this.username = user.username;
-    this.avatar = user.avatar_url;
-  }
-}
-
-window.ListUser = ListUser;
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index ccb00099215..ad9997ac334 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -23,8 +23,8 @@ gl.issueBoards.BoardsStore = {
     this.state.lists = [];
     this.filter.path = gl.utils.getUrlParamsArray().join('&');
   },
-  addList (listObj) {
-    const list = new List(listObj);
+  addList (listObj, defaultAvatar) {
+    const list = new List(listObj, defaultAvatar);
     this.state.lists.push(list);
 
     return list;
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..1a602cbd8a7 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);
-
     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,23 @@ window.Build = (function () {
   };
 
   Build.prototype.toggleSidebar = function (shouldHide) {
-    const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
+    const shouldShow = !shouldHide;
 
-    this.$buildScroll.toggleClass('sidebar-expanded', shouldShow)
+    this.$buildTrace
+      .toggleClass('sidebar-expanded', shouldShow)
       .toggleClass('sidebar-collapsed', shouldHide);
-    this.$truncatedInfo.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 +287,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/ci_status_icons.js b/app/assets/javascripts/ci_status_icons.js
deleted file mode 100644
index f16616873b2..00000000000
--- a/app/assets/javascripts/ci_status_icons.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import CANCELED_SVG from 'icons/_icon_status_canceled_borderless.svg';
-import CREATED_SVG from 'icons/_icon_status_created_borderless.svg';
-import FAILED_SVG from 'icons/_icon_status_failed_borderless.svg';
-import MANUAL_SVG from 'icons/_icon_status_manual_borderless.svg';
-import PENDING_SVG from 'icons/_icon_status_pending_borderless.svg';
-import RUNNING_SVG from 'icons/_icon_status_running_borderless.svg';
-import SKIPPED_SVG from 'icons/_icon_status_skipped_borderless.svg';
-import SUCCESS_SVG from 'icons/_icon_status_success_borderless.svg';
-import WARNING_SVG from 'icons/_icon_status_warning_borderless.svg';
-
-const StatusIconEntityMap = {
-  icon_status_canceled: CANCELED_SVG,
-  icon_status_created: CREATED_SVG,
-  icon_status_failed: FAILED_SVG,
-  icon_status_manual: MANUAL_SVG,
-  icon_status_pending: PENDING_SVG,
-  icon_status_running: RUNNING_SVG,
-  icon_status_skipped: SKIPPED_SVG,
-  icon_status_success: SUCCESS_SVG,
-  icon_status_warning: WARNING_SVG,
-};
-
-export {
-  CANCELED_SVG,
-  CREATED_SVG,
-  FAILED_SVG,
-  MANUAL_SVG,
-  PENDING_SVG,
-  RUNNING_SVG,
-  SKIPPED_SVG,
-  SUCCESS_SVG,
-  WARNING_SVG,
-  StatusIconEntityMap as default,
-};
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index ad9c600b499..98698143d22 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(() => {
@@ -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/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/limit_warning_component.js b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js
index abe48572347..8d3d34f836f 100644
--- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js
@@ -9,9 +9,9 @@ export default {
     <span v-if="count === 50" class="events-info pull-right">
       <i class="fa fa-warning has-tooltip"
           aria-hidden="true"
-          title="Limited to showing 50 events at most"
+          :title="n__('Limited to showing %d event at most', 'Limited to showing %d events at most', 50)"
           data-placement="top"></i>
-      Showing 50 events
+      {{ n__('Showing %d event', 'Showing %d events', 50) }}
     </span>
   `,
 };
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 80bd2df6f42..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 }}
@@ -28,11 +33,11 @@ global.cycleAnalytics.StageCodeComponent = Vue.extend({
             <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
             &middot;
             <span>
-              Opened
+              {{ s__('OpenedNDaysAgo|Opened') }}
               <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
             </span>
             <span>
-              by
+              {{ s__('ByAuthor|by') }}
               <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
             </span>
           </div>
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 20a43798fbe..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 }}
@@ -28,11 +32,11 @@ global.cycleAnalytics.StageIssueComponent = Vue.extend({
             <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
             &middot;
             <span>
-              Opened
+              {{ s__('OpenedNDaysAgo|Opened') }}
               <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
             </span>
             <span>
-              by
+              {{ s__('ByAuthor|by') }}
               <a :href="issue.author.webUrl" class="issue-author-link">
                 {{ issue.author.name }}
               </a>
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 f33cac3da82..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,17 +26,18 @@ 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 }}
               </a>
             </h5>
             <span>
-              First
+              {{ s__('FirstPushedBy|First') }}
               <span class="commit-icon">${iconCommit}</span>
-              <a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
-              pushed by
+              <a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{ commit.shortSha }}</a>
+              {{ s__('FirstPushedBy|pushed by') }}
               <a :href="commit.author.webUrl" class="commit-author-link">
                 {{ commit.author.name }}
               </a>
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 657f5385374..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 }}
@@ -28,11 +32,11 @@ global.cycleAnalytics.StageProductionComponent = Vue.extend({
             <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
             &middot;
             <span>
-              Opened
+              {{ s__('OpenedNDaysAgo|Opened') }}
               <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
             </span>
             <span>
-            by
+            {{ s__('ByAuthor|by') }}
             <a :href="issue.author.webUrl" class="issue-author-link">
               {{ issue.author.name }}
             </a>
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 8a801300647..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 }}
@@ -28,11 +32,11 @@ global.cycleAnalytics.StageReviewComponent = Vue.extend({
             <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
             &middot;
             <span>
-              Opened
+              {{ s__('OpenedNDaysAgo|Opened') }}
               <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
             </span>
             <span>
-              by
+              {{ s__('ByAuthor|by') }}
               <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
             </span>
             <template v-if="mergeRequest.state === 'closed'">
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 4a286379588..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,17 +26,18 @@ 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>
-              by
+              {{ s__('ByAuthor|by') }}
               <a :href="build.author.webUrl" class="issue-author-link">
                 {{ build.author.name }}
               </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/components/total_time_component.js b/app/assets/javascripts/cycle_analytics/components/total_time_component.js
index 77edcb76273..d5e6167b2a8 100644
--- a/app/assets/javascripts/cycle_analytics/components/total_time_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.js
@@ -12,10 +12,10 @@ global.cycleAnalytics.TotalTimeComponent = Vue.extend({
   template: `
     <span class="total-time">
       <template v-if="Object.keys(time).length">
-        <template v-if="time.days">{{ time.days }} <span>{{ time.days === 1 ? 'day' : 'days' }}</span></template>
-        <template v-if="time.hours">{{ time.hours }} <span>hr</span></template>
-        <template v-if="time.mins && !time.days">{{ time.mins }} <span>mins</span></template>
-        <template v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>s</span></template>
+        <template v-if="time.days">{{ time.days }} <span>{{ n__('day', 'days', time.days) }}</span></template>
+        <template v-if="time.hours">{{ time.hours }} <span>{{ n__('Time|hr', 'Time|hrs', time.hours) }}</span></template>
+        <template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ n__('Time|min', 'Time|mins', time.mins) }}</span></template>
+        <template v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>{{ s__('Time|s') }}</span></template>
       </template>
       <template v-else>
         --
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 48cab437e02..44791a93936 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -2,19 +2,20 @@
 
 import Vue from 'vue';
 import Cookies from 'js-cookie';
+import Translate from '../vue_shared/translate';
 import LimitWarningComponent from './components/limit_warning_component';
+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';
 
-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');
+Vue.use(Translate);
 
 $(() => {
   const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
index 681d6eef565..6504d7db2f2 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
@@ -30,7 +30,7 @@ class CycleAnalyticsService {
       startDate,
     } = options;
 
-    return $.get(`${this.requestPath}/events/${stage.title.toLowerCase()}.json`, {
+    return $.get(`${this.requestPath}/events/${stage.name}.json`, {
       cycle_analytics: {
         start_date: startDate,
       },
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
index 6536a8fd7fa..991f8c1f6fd 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
@@ -1,19 +1,20 @@
 /* eslint-disable no-param-reassign */
 
-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 || {};
 
 const EMPTY_STAGE_TEXTS = {
-  issue: '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.',
-  plan: '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.',
-  code: '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.',
-  test: '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.',
-  review: '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.',
-  staging: '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.',
-  production: '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.',
+  issue: __('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.'),
+  plan: __('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.'),
+  code: __('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.'),
+  test: __('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.'),
+  review: __('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.'),
+  staging: __('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.'),
+  production: __('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.'),
 };
 
 global.cycleAnalytics.CycleAnalyticsStore = {
@@ -38,7 +39,7 @@ global.cycleAnalytics.CycleAnalyticsStore = {
     });
 
     newData.stages.forEach((item) => {
-      const stageSlug = gl.text.dasherize(item.title.toLowerCase());
+      const stageSlug = gl.text.dasherize(item.name.toLowerCase());
       item.active = false;
       item.isUserAllowed = data.permissions[stageSlug];
       item.emptyStageText = EMPTY_STAGE_TEXTS[stageSlug];
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
new file mode 100644
index 00000000000..3f993213dd0
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue
@@ -0,0 +1,55 @@
+<script>
+  import eventHub from '../eventhub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+  export default {
+    data() {
+      return {
+        isLoading: false,
+      };
+    },
+    props: {
+      deployKey: {
+        type: Object,
+        required: true,
+      },
+      type: {
+        type: String,
+        required: true,
+      },
+      btnCssClass: {
+        type: String,
+        required: false,
+        default: 'btn-default',
+      },
+    },
+
+    components: {
+      loadingIcon,
+    },
+
+    methods: {
+      doAction() {
+        this.isLoading = true;
+
+        eventHub.$emit(`${this.type}.key`, this.deployKey);
+      },
+    },
+    computed: {
+      text() {
+        return `${this.type.charAt(0).toUpperCase()}${this.type.slice(1)}`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <button
+    class="btn btn-sm prepend-left-10"
+    :class="[{ disabled: isLoading }, btnCssClass]"
+    :disabled="isLoading"
+    @click="doAction">
+    {{ text }}
+    <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
new file mode 100644
index 00000000000..5f6eed0c67c
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -0,0 +1,100 @@
+<script>
+  /* global Flash */
+  import eventHub from '../eventhub';
+  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() {
+      return {
+        isLoading: false,
+        store: new DeployKeysStore(),
+      };
+    },
+    props: {
+      endpoint: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      hasKeys() {
+        return Object.keys(this.keys).length;
+      },
+      keys() {
+        return this.store.keys;
+      },
+    },
+    components: {
+      keysPanel,
+      loadingIcon,
+    },
+    methods: {
+      fetchKeys() {
+        this.isLoading = true;
+
+        this.service.getKeys()
+          .then((data) => {
+            this.isLoading = false;
+            this.store.keys = data;
+          })
+          .catch(() => new Flash('Error getting deploy keys'));
+      },
+      enableKey(deployKey) {
+        this.service.enableKey(deployKey.id)
+          .then(() => this.fetchKeys())
+          .catch(() => new Flash('Error enabling deploy key'));
+      },
+      disableKey(deployKey) {
+        // eslint-disable-next-line no-alert
+        if (confirm('You are going to remove this deploy key. Are you sure?')) {
+          this.service.disableKey(deployKey.id)
+            .then(() => this.fetchKeys())
+            .catch(() => new Flash('Error removing deploy key'));
+        }
+      },
+    },
+    created() {
+      this.service = new DeployKeysService(this.endpoint);
+
+      eventHub.$on('enable.key', this.enableKey);
+      eventHub.$on('remove.key', this.disableKey);
+      eventHub.$on('disable.key', this.disableKey);
+    },
+    mounted() {
+      this.fetchKeys();
+    },
+    beforeDestroy() {
+      eventHub.$off('enable.key', this.enableKey);
+      eventHub.$off('remove.key', this.disableKey);
+      eventHub.$off('disable.key', this.disableKey);
+    },
+  };
+</script>
+
+<template>
+  <div class="col-lg-9 col-lg-offset-3 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" />
+      <keys-panel
+        title="Deploy keys from projects you have access to"
+        :keys="keys.available_project_keys"
+        :store="store" />
+      <keys-panel
+        v-if="keys.public_keys.length"
+        title="Public deploy keys available to any project"
+        :keys="keys.public_keys"
+        :store="store" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue
new file mode 100644
index 00000000000..0a06a481b96
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/components/key.vue
@@ -0,0 +1,80 @@
+<script>
+  import actionBtn from './action_btn.vue';
+
+  export default {
+    props: {
+      deployKey: {
+        type: Object,
+        required: true,
+      },
+      store: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      actionBtn,
+    },
+    computed: {
+      timeagoDate() {
+        return gl.utils.getTimeago().format(this.deployKey.created_at);
+      },
+    },
+    methods: {
+      isEnabled(id) {
+        return this.store.findEnabledKey(id) !== undefined;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div>
+    <div class="pull-left append-right-10 hidden-xs">
+      <i
+        aria-hidden="true"
+        class="fa fa-key key-icon">
+      </i>
+    </div>
+    <div class="deploy-key-content key-list-item-info">
+      <strong class="title">
+        {{ deployKey.title }}
+      </strong>
+      <div class="description">
+        {{ deployKey.fingerprint }}
+      </div>
+      <div
+        v-if="deployKey.can_push"
+        class="write-access-allowed">
+        Write access allowed
+      </div>
+    </div>
+    <div class="deploy-key-content prepend-left-default deploy-key-projects">
+      <a
+        v-for="project in deployKey.projects"
+        class="label deploy-project-label"
+        :href="project.full_path">
+        {{ project.full_name }}
+      </a>
+    </div>
+    <div class="deploy-key-content">
+      <span class="key-created-at">
+        created {{ timeagoDate }}
+      </span>
+      <action-btn
+        v-if="!isEnabled(deployKey.id)"
+        :deploy-key="deployKey"
+        type="enable"/>
+      <action-btn
+        v-else-if="deployKey.destroyed_when_orphaned && deployKey.almost_orphaned"
+        :deploy-key="deployKey"
+        btn-css-class="btn-warning"
+        type="remove" />
+      <action-btn
+        v-else
+        :deploy-key="deployKey"
+        btn-css-class="btn-warning"
+        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
new file mode 100644
index 00000000000..eccc470578b
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
@@ -0,0 +1,52 @@
+<script>
+  import key from './key.vue';
+
+  export default {
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      keys: {
+        type: Array,
+        required: true,
+      },
+      showHelpBox: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      store: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      key,
+    },
+  };
+</script>
+
+<template>
+  <div class="deploy-keys-panel">
+    <h5>
+      {{ title }}
+      ({{ keys.length }})
+    </h5>
+    <ul class="well-list"
+      v-if="keys.length">
+      <li
+        v-for="deployKey in keys"
+        :key="deployKey.id">
+        <key
+          :deploy-key="deployKey"
+          :store="store" />
+      </li>
+    </ul>
+    <div
+      class="settings-message text-center"
+      v-else-if="showHelpBox">
+      No deploy keys found. Create one with the form above.
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/deploy_keys/eventhub.js b/app/assets/javascripts/deploy_keys/eventhub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/eventhub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/deploy_keys/index.js b/app/assets/javascripts/deploy_keys/index.js
new file mode 100644
index 00000000000..a5f232f950a
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import deployKeysApp from './components/app.vue';
+
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: document.getElementById('js-deploy-keys'),
+  data() {
+    return {
+      endpoint: this.$options.el.dataset.endpoint,
+    };
+  },
+  components: {
+    deployKeysApp,
+  },
+  render(createElement) {
+    return createElement('deploy-keys-app', {
+      props: {
+        endpoint: this.endpoint,
+      },
+    });
+  },
+}));
diff --git a/app/assets/javascripts/deploy_keys/service/index.js b/app/assets/javascripts/deploy_keys/service/index.js
new file mode 100644
index 00000000000..fe6dbaa9498
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/service/index.js
@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default class DeployKeysService {
+  constructor(endpoint) {
+    this.endpoint = endpoint;
+
+    this.resource = Vue.resource(`${this.endpoint}{/id}`, {}, {
+      enable: {
+        method: 'PUT',
+        url: `${this.endpoint}{/id}/enable`,
+      },
+      disable: {
+        method: 'PUT',
+        url: `${this.endpoint}{/id}/disable`,
+      },
+    });
+  }
+
+  getKeys() {
+    return this.resource.get()
+      .then(response => response.json());
+  }
+
+  enableKey(id) {
+    return this.resource.enable({ id }, {});
+  }
+
+  disableKey(id) {
+    return this.resource.disable({ id }, {});
+  }
+}
diff --git a/app/assets/javascripts/deploy_keys/store/index.js b/app/assets/javascripts/deploy_keys/store/index.js
new file mode 100644
index 00000000000..6210361af26
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/store/index.js
@@ -0,0 +1,9 @@
+export default class DeployKeysStore {
+  constructor() {
+    this.keys = {};
+  }
+
+  findEnabledKey(id) {
+    return this.keys.enabled_keys.find(key => key.id === id);
+  }
+}
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 f3a688fbf2f..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"
@@ -120,7 +123,7 @@ const DiffNoteAvatars = Vue.extend({
   },
   methods: {
     clickedAvatar(e) {
-      notes.addDiffNote(e);
+      notes.onAddDiffNote(e);
 
       // Toggle the active state of the toggle all button
       this.toggleDiscussionsToggleState();
@@ -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/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js
index 92f6fd654b3..9d51fb53eb2 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js
@@ -88,6 +88,7 @@ const ResolveBtn = Vue.extend({
 
           CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
           this.discussion.updateHeadline(data);
+          gl.mrWidget.checkStatus();
         } else {
           new Flash(errorFlashMsg);
         }
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
index b6b47e2da6f..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;
@@ -65,4 +64,6 @@ $(() => {
       'resolve-count': ResolveCount
     }
   });
+
+  $(window).trigger('resize.nav');
 });
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js b/app/assets/javascripts/diff_notes/services/resolve.js
index 4ea6ba8a73d..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 || {};
 
@@ -49,6 +45,7 @@ class ResolveServiceClass {
           discussion.resolveAllNotes(resolved_by);
         }
 
+        gl.mrWidget.checkStatus();
         discussion.updateHeadline(data);
       } else {
         throw new Error('An error occurred when trying to resolve discussion.');
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index e4c60ef1188..bb49c9c5aba 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -10,12 +10,10 @@
 /* global IssuableForm */
 /* global LabelsSelect */
 /* global MilestoneSelect */
-/* global MergedButtons */
 /* global Commit */
 /* global NotificationsForm */
 /* global TreeView */
 /* global NotificationsDropdown */
-/* global UsersSelect */
 /* global GroupAvatar */
 /* global LineHighlighter */
 /* global ProjectFork */
@@ -36,11 +34,12 @@
 /* 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 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';
@@ -48,9 +47,13 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
 import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
 import ShortcutsWiki from './shortcuts_wiki';
+import Pipelines from './pipelines';
 import BlobViewer from './blob/viewer/index';
-
-const ShortcutsBlob = require('./shortcuts_blob');
+import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
+import UsersSelect from './users_select';
+import RefSelectDropdown from './ref_select_dropdown';
+import GfmAutoComplete from './gfm_auto_complete';
+import ShortcutsBlob from './shortcuts_blob';
 
 (function() {
   var Dispatcher;
@@ -75,6 +78,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
       path = page.split(':');
       shortcut_handler = null;
 
+      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
+
       function initBlob() {
         new LineHighlighter();
 
@@ -110,20 +115,23 @@ 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_',
           });
           shortcut_handler = new ShortcutsNavigation();
+          new UsersSelect();
           break;
         case 'projects:issues:show':
           new Issue();
@@ -136,6 +144,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;
@@ -172,6 +184,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':
@@ -192,10 +205,12 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new LabelsSelect();
           new MilestoneSelect();
           new gl.IssuableTemplateSelectors();
+          new AutoWidthDropdownSelect($('.js-target-branch-select')).init();
           break;
         case 'projects:tags:new':
           new ZenMode();
           new gl.GLForm($('.tag-form'));
+          new RefSelectDropdown($('.js-branch-select'), window.gl.availableRefs);
           break;
         case 'projects:releases:edit':
           new ZenMode();
@@ -205,19 +220,18 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new gl.Diff();
           shortcut_handler = new ShortcutsIssuable(true);
           new ZenMode();
-          new MergedButtons();
-          break;
-        case 'projects:merge_requests:commits':
-          new MergedButtons();
           break;
         case "projects:merge_requests:diffs":
           new gl.Diff();
           new ZenMode();
-          new MergedButtons();
           break;
         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();
@@ -242,13 +256,20 @@ 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':
         case 'projects:pipelines:show':
           const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;
           const pipelineStatusUrl = `${document.querySelector('.js-pipeline-tab-link a').getAttribute('href')}/status.json`;
 
-          new gl.Pipelines({
+          new Pipelines({
             initTabs: true,
             pipelineStatusUrl,
             tabsOptions: {
@@ -294,6 +315,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':
@@ -369,6 +391,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
           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/constants.js b/app/assets/javascripts/droplab/constants.js
index 8883ed9aa14..868d47e91b3 100644
--- a/app/assets/javascripts/droplab/constants.js
+++ b/app/assets/javascripts/droplab/constants.js
@@ -3,11 +3,14 @@ const DATA_DROPDOWN = 'data-dropdown';
 const SELECTED_CLASS = 'droplab-item-selected';
 const ACTIVE_CLASS = 'droplab-item-active';
 const IGNORE_CLASS = 'droplab-item-ignore';
+// Matches `{{anything}}` and `{{ everything }}`.
+const TEMPLATE_REGEX = /\{\{(.+?)\}\}/g;
 
 export {
   DATA_TRIGGER,
   DATA_DROPDOWN,
   SELECTED_CLASS,
   ACTIVE_CLASS,
+  TEMPLATE_REGEX,
   IGNORE_CLASS,
 };
diff --git a/app/assets/javascripts/droplab/drop_down.js b/app/assets/javascripts/droplab/drop_down.js
index 1fb4d63923c..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.t(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/droplab/utils.js b/app/assets/javascripts/droplab/utils.js
index c149a33a1e9..4da7344604e 100644
--- a/app/assets/javascripts/droplab/utils.js
+++ b/app/assets/javascripts/droplab/utils.js
@@ -1,19 +1,19 @@
 /* eslint-disable */
 
-import { DATA_TRIGGER, DATA_DROPDOWN } from './constants';
+import { template as _template } from 'underscore';
+import { DATA_TRIGGER, DATA_DROPDOWN, TEMPLATE_REGEX } from './constants';
 
 const utils = {
   toCamelCase(attr) {
     return this.camelize(attr.split('-').slice(1).join(' '));
   },
 
-  t(s, d) {
-    for (const p in d) {
-      if (Object.prototype.hasOwnProperty.call(d, p)) {
-        s = s.replace(new RegExp(`{{${p}}}`, 'g'), d[p]);
-      }
-    }
-    return s;
+  template(templateString, data) {
+    const template = _template(templateString, {
+      escape: TEMPLATE_REGEX,
+    });
+
+    return template(data);
   },
 
   camelize(str) {
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index b3a76fbb43e..111449bb8f7 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -1,108 +1,158 @@
 /* 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;
     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');
       },
-      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 +160,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 +194,34 @@ 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');
     };
+
     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 +238,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..86d8fe89010 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');
     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.');
     },
   },
 };
@@ -186,14 +231,11 @@ export default {
     </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>
+      <loading-icon
+        label="Loading environments"
+        size="3"
+        v-if="isLoading"
+        />
 
       <div
         class="blank-state blank-state-no-icon"
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..012ff1f975b 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);
@@ -482,15 +470,13 @@ export default {
 
       <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>
 
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 4b030a27900..79c019b3491 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -21,7 +21,6 @@ export default {
   <a
     class="btn monitoring-url has-tooltip"
     data-container="body"
-    target="_blank"
     rel="noopener noreferrer nofollow"
     :href="monitoringUrl"
     :title="title"
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 44b8730fd09..2ba985bfe3e 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,
@@ -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..a904453ffa9 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';
@@ -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/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 15eedaf76e1..5148a2ae79b 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: {
@@ -77,10 +79,8 @@ export default {
 
         <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 colspan="6">
+              <loading-icon size="2" />
             </td>
           </tr>
 
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 9126422b335..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
@@ -8,13 +8,22 @@ export default {
       type: Array,
       required: true,
     },
+    isLocalStorageAvailable: {
+      type: Boolean,
+      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}:`,
@@ -47,7 +56,12 @@ export default {
 
   template: `
     <div>
-      <ul v-if="hasItems">
+      <div
+        v-if="!isLocalStorageAvailable"
+        class="dropdown-info-note">
+        This feature requires local storage to be enabled
+      </div>
+      <ul v-else-if="hasItems">
         <li
           v-for="(item, index) in processedItems"
           :key="index">
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 3e7a892756c..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: `&lt;${tag}&gt;`,
-          }, 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..5c02a7a53d3 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);
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 36af0674ac6..3be889c684b 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -1,5 +1,3 @@
-/* global Flash */
-
 import FilteredSearchContainer from './container';
 import RecentSearchesRoot from './recent_searches_root';
 import RecentSearchesStore from './stores/recent_searches_store';
@@ -8,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,18 +14,28 @@ class FilteredSearchManager {
     this.tokensContainer = this.container.querySelector('.tokens-container');
     this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
 
-    this.recentSearchesStore = new RecentSearchesStore();
-    let recentSearchesKey = 'issue-recent-searches';
-    if (page === 'merge_requests') {
-      recentSearchesKey = 'merge-request-recent-searches';
+    this.recentSearchesStore = new RecentSearchesStore({
+      isLocalStorageAvailable: RecentSearchesService.isAvailable(),
+      allowedKeys: this.filteredSearchTokenKeys.getKeys(),
+    });
+    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(() => {
+      .catch((error) => {
+        if (error.name === 'RecentSearchesServiceError') return undefined;
         // eslint-disable-next-line no-new
-        new Flash('An error occured while parsing recent searches');
+        new window.Flash('An error occured while parsing recent searches');
         // Gracefully fail to empty array
         return [];
       })
@@ -41,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();
 
@@ -135,7 +144,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();
       }
@@ -234,8 +245,10 @@ class FilteredSearchManager {
 
   editToken(e) {
     const token = e.target.closest('.js-visual-token');
+    const sanitizedTokenName = token.querySelector('.name').textContent.trim();
+    const canEdit = this.canEdit && this.canEdit(sanitizedTokenName);
 
-    if (token) {
+    if (token && canEdit) {
       gl.FilteredSearchVisualTokens.editToken(token);
       this.tokenChange();
     }
@@ -313,7 +326,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();
 
@@ -385,7 +398,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 +
@@ -404,18 +422,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;
@@ -439,7 +466,7 @@ class FilteredSearchManager {
     this.saveCurrentSearchQuery();
 
     const { tokens, searchToken }
-      = this.tokenizer.processTokens(searchQuery);
+      = this.tokenizer.processTokens(searchQuery, this.filteredSearchTokenKeys.getKeys());
     const currentState = gl.utils.getParameterByName('state') || 'opened';
     paths.push(`state=${currentState}`);
 
@@ -510,6 +537,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 453ecccc6fc..bc1226f5879 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -1,3 +1,5 @@
+import AjaxCache from '~/lib/utils/ajax_cache';
+import '~/flash'; /* global Flash */
 import FilteredSearchContainer from './container';
 
 class FilteredSearchVisualTokens {
@@ -34,28 +36,69 @@ 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>
     `;
   }
 
-  static addVisualTokenElement(name, value, isSearchTerm) {
+  static updateLabelTokenColor(tokenValueContainer, tokenValue) {
+    const filteredSearchInput = FilteredSearchContainer.container.querySelector('.filtered-search');
+    const baseEndpoint = filteredSearchInput.dataset.baseEndpoint;
+    const labelsEndpoint = `${baseEndpoint}/labels.json`;
+
+    return AjaxCache.retrieve(labelsEndpoint)
+    .then((labels) => {
+      const matchingLabel = (labels || []).find(label => `~${gl.DropdownUtils.getEscapedText(label.title)}` === tokenValue);
+
+      if (!matchingLabel) {
+        return;
+      }
+
+      const tokenValueStyle = tokenValueContainer.style;
+      tokenValueStyle.backgroundColor = matchingLabel.color;
+      tokenValueStyle.color = matchingLabel.text_color;
+
+      if (matchingLabel.text_color === '#FFFFFF') {
+        const removeToken = tokenValueContainer.querySelector('.remove-token');
+        removeToken.classList.add('inverted');
+      }
+    })
+    .catch(() => new Flash('An error occurred while fetching label colors.'));
+  }
+
+  static renderVisualTokenValue(parentElement, tokenName, tokenValue) {
+    const tokenValueContainer = parentElement.querySelector('.value-container');
+    tokenValueContainer.querySelector('.value').innerText = tokenValue;
+
+    if (tokenName.toLowerCase() === 'label') {
+      FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue);
+    }
+  }
+
+  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.querySelector('.value').innerText = value;
+      li.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML(canEdit);
+      FilteredSearchVisualTokens.renderVisualTokenValue(li, name, value);
     } else {
       li.innerHTML = '<div class="name"></div>';
     }
@@ -74,24 +117,24 @@ class FilteredSearchVisualTokens {
       const name = FilteredSearchVisualTokens.getLastTokenPartial();
       lastVisualToken.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML();
       lastVisualToken.querySelector('.name').innerText = name;
-      lastVisualToken.querySelector('.value').innerText = value;
+      FilteredSearchVisualTokens.renderVisualTokenValue(lastVisualToken, name, value);
     }
   }
 
-  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);
     }
   }
 
@@ -183,6 +226,9 @@ class FilteredSearchVisualTokens {
 
   static moveInputToTheRight() {
     const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+
+    if (!input) return;
+
     const inputLi = input.parentElement;
     const tokenContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
 
diff --git a/app/assets/javascripts/filtered_search/recent_searches_root.js b/app/assets/javascripts/filtered_search/recent_searches_root.js
index 4e38409e12a..27e49d4fb96 100644
--- a/app/assets/javascripts/filtered_search/recent_searches_root.js
+++ b/app/assets/javascripts/filtered_search/recent_searches_root.js
@@ -29,12 +29,16 @@ class RecentSearchesRoot {
   }
 
   render() {
+    const state = this.store.state;
     this.vm = new Vue({
       el: this.wrapperElement,
-      data: this.store.state,
+      data() { return state; },
       template: `
         <recent-searches-dropdown-content
-          :items="recentSearches" />
+          :items="recentSearches"
+          :is-local-storage-available="isLocalStorageAvailable"
+          :allowed-keys="allowedKeys"
+          />
       `,
       components: {
         'recent-searches-dropdown-content': RecentSearchesDropdownContent,
diff --git a/app/assets/javascripts/filtered_search/services/recent_searches_service.js b/app/assets/javascripts/filtered_search/services/recent_searches_service.js
index 3e402d5aed0..a056dea928d 100644
--- a/app/assets/javascripts/filtered_search/services/recent_searches_service.js
+++ b/app/assets/javascripts/filtered_search/services/recent_searches_service.js
@@ -1,9 +1,17 @@
+import RecentSearchesServiceError from './recent_searches_service_error';
+import AccessorUtilities from '../../lib/utils/accessor';
+
 class RecentSearchesService {
   constructor(localStorageKey = 'issuable-recent-searches') {
     this.localStorageKey = localStorageKey;
   }
 
   fetch() {
+    if (!RecentSearchesService.isAvailable()) {
+      const error = new RecentSearchesServiceError();
+      return Promise.reject(error);
+    }
+
     const input = window.localStorage.getItem(this.localStorageKey);
 
     let searches = [];
@@ -19,8 +27,14 @@ class RecentSearchesService {
   }
 
   save(searches = []) {
+    if (!RecentSearchesService.isAvailable()) return;
+
     window.localStorage.setItem(this.localStorageKey, JSON.stringify(searches));
   }
+
+  static isAvailable() {
+    return AccessorUtilities.isLocalStorageAccessSafe();
+  }
 }
 
 export default RecentSearchesService;
diff --git a/app/assets/javascripts/filtered_search/services/recent_searches_service_error.js b/app/assets/javascripts/filtered_search/services/recent_searches_service_error.js
new file mode 100644
index 00000000000..5917b223d63
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/services/recent_searches_service_error.js
@@ -0,0 +1,11 @@
+class RecentSearchesServiceError {
+  constructor(message) {
+    this.name = 'RecentSearchesServiceError';
+    this.message = message || 'Recent Searches Service is unavailable';
+  }
+}
+
+// Can't use `extends` for builtin prototypes and get true inheritance yet
+RecentSearchesServiceError.prototype = Error.prototype;
+
+export default RecentSearchesServiceError;
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/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index f1b99023c72..b8a923cf619 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -1,119 +1,33 @@
-/* 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 || {};
-
 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);
@@ -122,9 +36,9 @@ window.gl.GfmAutoComplete = {
       // Needed for slash commands with suffixes (ex: /label ~)
       $input.on('inserted-commands.atwho', $input.trigger.bind($input, 'keyup'));
     });
-  },
+  }
 
-  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 +52,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 +68,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 +178,271 @@ 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,
+          }));
+        },
+      },
     });
-  },
+  }
 
-  fetchData: function($input, at) {
+  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, '\\$&');
+
+        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) => {
+      $.getJSON(this.dataSources[GfmAutoComplete.atTypeMap[at]], (data) => {
         this.loadData($input, at, data);
       }).fail(() => { 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;
+  }
+
+  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 a03f1202a6d..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();
@@ -255,7 +254,8 @@ GitLabDropdown = (function() {
               }
             };
           // Remote data
-          })(this)
+          })(this),
+          instance: this,
         });
       }
     }
@@ -269,6 +269,7 @@ GitLabDropdown = (function() {
         remote: this.options.filterRemote,
         query: this.options.data,
         keys: searchFields,
+        instance: this,
         elements: (function(_this) {
           return function() {
             selector = '.dropdown-content li:not(' + NON_SELECTABLE_CLASSES + ')';
@@ -343,21 +344,26 @@ GitLabDropdown = (function() {
       }
       this.dropdown.on("click", selector, function(e) {
         var $el, selected, selectedObj, isMarking;
-        $el = $(this);
+        $el = $(e.currentTarget);
         selected = self.rowClicked($el);
         selectedObj = selected ? selected[0] : null;
         isMarking = selected ? selected[1] : null;
-        if (self.options.clicked) {
-          self.options.clicked(selectedObj, $el, e, isMarking);
+        if (this.options.clicked) {
+          this.options.clicked.call(this, {
+            selectedObj,
+            $el,
+            e,
+            isMarking,
+          });
         }
 
         // Update label right after all modifications in dropdown has been done
-        if (self.options.toggleLabel) {
-          self.updateLabel(selectedObj, $el, self);
+        if (this.options.toggleLabel) {
+          this.updateLabel(selectedObj, $el, this);
         }
 
         $el.trigger('blur');
-      });
+      }.bind(this));
     }
   }
 
@@ -391,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];
@@ -439,15 +445,34 @@ GitLabDropdown = (function() {
     }
   };
 
+  GitLabDropdown.prototype.filteredFullData = function() {
+    return this.fullData.filter(r => typeof r === 'object'
+      && !Object.prototype.hasOwnProperty.call(r, 'beforeDivider')
+      && !Object.prototype.hasOwnProperty.call(r, 'header')
+    );
+  };
+
   GitLabDropdown.prototype.opened = function(e) {
     var contentHtml;
     this.resetRows();
     this.addArrowKeyEvent();
 
+    const dropdownToggle = this.dropdown.find('.dropdown-menu-toggle');
+    const hasFilterBulkUpdate = dropdownToggle.hasClass('js-filter-bulk-update');
+    const hasMultiSelect = dropdownToggle.hasClass('js-multiselect');
+
     // Makes indeterminate items effective
-    if (this.fullData && this.dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')) {
+    if (this.fullData && hasFilterBulkUpdate) {
       this.parseData(this.fullData);
     }
+
+    // Process the data to make sure rendered data
+    // matches the correct layout
+    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));
+    }
+
     contentHtml = $('.dropdown-content', this.dropdown).html();
     if (this.remote && contentHtml === "") {
       this.remote.execute();
@@ -584,7 +609,12 @@ GitLabDropdown = (function() {
       var link = document.createElement('a');
 
       link.href = url;
-      link.innerHTML = text;
+
+      if (this.highlight) {
+        link.innerHTML = text;
+      } else {
+        link.textContent = text;
+      }
 
       if (selected) {
         link.className = 'is-active';
@@ -601,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>";
@@ -709,6 +739,17 @@ GitLabDropdown = (function() {
     if (this.options.inputId != null) {
       $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]);
+    }
+
     return this.dropdown.before($input);
   };
 
@@ -829,7 +870,14 @@ GitLabDropdown = (function() {
     if (instance == null) {
       instance = null;
     }
-    return $(this.el).find(".dropdown-toggle-text").text(this.options.toggleLabel(selected, el, instance));
+
+    let toggleText = this.options.toggleLabel(selected, el, instance);
+    if (this.options.updateLabel) {
+      // Option to override the dropdown label text
+      toggleText = this.options.updateLabel;
+    }
+
+    return $(this.el).find(".dropdown-toggle-text").text(toggleText);
   };
 
   GitLabDropdown.prototype.clearField = function(field, isInput) {
diff --git a/app/assets/javascripts/gl_field_error.js b/app/assets/javascripts/gl_field_error.js
index 76de249ac3b..0add7075254 100644
--- a/app/assets/javascripts/gl_field_error.js
+++ b/app/assets/javascripts/gl_field_error.js
@@ -65,6 +65,7 @@ class GlFieldError {
     this.state = {
       valid: false,
       empty: true,
+      submitted: false,
     };
 
     this.initFieldValidation();
@@ -108,9 +109,10 @@ class GlFieldError {
     const currentValue = this.accessCurrentValue();
     this.state.valid = false;
     this.state.empty = currentValue === '';
-
+    this.state.submitted = true;
     this.renderValidity();
     this.form.focusOnFirstInvalid.apply(this.form);
+
     // For UX, wait til after first invalid submission to check each keyup
     this.inputElement.off('keyup.fieldValidator')
       .on('keyup.fieldValidator', this.updateValidity.bind(this));
diff --git a/app/assets/javascripts/gl_field_errors.js b/app/assets/javascripts/gl_field_errors.js
index 636258ec555..4f226ff96ea 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';
 
@@ -37,6 +37,15 @@ class GlFieldErrors {
     }
   }
 
+  /* Public method for triggering validity updates manually  */
+  updateFormValidityState() {
+    this.state.inputs.forEach((field) => {
+      if (field.state.submitted) {
+        field.updateValidity();
+      }
+    });
+  }
+
   focusOnFirstInvalid () {
     const firstInvalid = this.state.inputs.filter((input) => !input.inputDomElement.validity.valid)[0];
     firstInvalid.inputElement.focus();
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/issuable/auto_width_dropdown_select.js b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
new file mode 100644
index 00000000000..2203a56315e
--- /dev/null
+++ b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
@@ -0,0 +1,38 @@
+let instanceCount = 0;
+
+class AutoWidthDropdownSelect {
+  constructor(selectElement) {
+    this.$selectElement = $(selectElement);
+    this.dropdownClass = `js-auto-width-select-dropdown-${instanceCount}`;
+    instanceCount += 1;
+  }
+
+  init() {
+    const dropdownClass = this.dropdownClass;
+    this.$selectElement.select2({
+      dropdownCssClass: dropdownClass,
+      dropdownCss() {
+        let resultantWidth = 'auto';
+        const $dropdown = $(`.${dropdownClass}`);
+
+        // We have to look at the parent because
+        // `offsetParent` on a `display: none;` is `null`
+        const offsetParentWidth = $(this).parent().offsetParent().width();
+        // Reset any width to let it naturally flow
+        $dropdown.css('width', 'auto');
+        if ($dropdown.outerWidth(false) > offsetParentWidth) {
+          resultantWidth = offsetParentWidth;
+        }
+
+        return {
+          width: resultantWidth,
+          maxWidth: offsetParentWidth,
+        };
+      },
+    });
+
+    return this;
+  }
+}
+
+export default AutoWidthDropdownSelect;
diff --git a/app/assets/javascripts/issuable/issuable_bundle.js b/app/assets/javascripts/issuable/issuable_bundle.js
deleted file mode 100644
index e927cc0077c..00000000000
--- a/app/assets/javascripts/issuable/issuable_bundle.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./time_tracking/time_tracking_bundle');
diff --git a/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js
deleted file mode 100644
index aec13e78f42..00000000000
--- a/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import Vue from 'vue';
-import stopwatchSvg from 'icons/_icon_stopwatch.svg';
-
-require('../../../lib/utils/pretty_time');
-
-(() => {
-  Vue.component('time-tracking-collapsed-state', {
-    name: 'time-tracking-collapsed-state',
-    props: [
-      'showComparisonState',
-      'showSpentOnlyState',
-      'showEstimateOnlyState',
-      'showNoTimeTrackingState',
-      'timeSpentHumanReadable',
-      'timeEstimateHumanReadable',
-    ],
-    methods: {
-      abbreviateTime(timeStr) {
-        return gl.utils.prettyTime.abbreviateTime(timeStr);
-      },
-    },
-    template: `
-      <div class='sidebar-collapsed-icon'>
-        ${stopwatchSvg}
-        <div class='time-tracking-collapsed-summary'>
-          <div class='compare' v-if='showComparisonState'>
-            <span>{{ abbreviateTime(timeSpentHumanReadable) }} / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>
-          </div>
-          <div class='estimate-only' v-if='showEstimateOnlyState'>
-            <span class='bold'>-- / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>
-          </div>
-          <div class='spend-only' v-if='showSpentOnlyState'>
-            <span class='bold'>{{ abbreviateTime(timeSpentHumanReadable) }} / --</span>
-          </div>
-          <div class='no-tracking' v-if='showNoTimeTrackingState'>
-            <span class='no-value'>None</span>
-          </div>
-        </div>
-      </div>
-      `,
-  });
-})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js b/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js
deleted file mode 100644
index c55e263f6f4..00000000000
--- a/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import Vue from 'vue';
-
-require('../../../lib/utils/pretty_time');
-
-(() => {
-  const prettyTime = gl.utils.prettyTime;
-
-  Vue.component('time-tracking-comparison-pane', {
-    name: 'time-tracking-comparison-pane',
-    props: [
-      'timeSpent',
-      'timeEstimate',
-      'timeSpentHumanReadable',
-      'timeEstimateHumanReadable',
-    ],
-    computed: {
-      parsedRemaining() {
-        const diffSeconds = this.timeEstimate - this.timeSpent;
-        return prettyTime.parseSeconds(diffSeconds);
-      },
-      timeRemainingHumanReadable() {
-        return prettyTime.stringifyTime(this.parsedRemaining);
-      },
-      timeRemainingTooltip() {
-        const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
-        return `${prefix} ${this.timeRemainingHumanReadable}`;
-      },
-      /* Diff values for comparison meter */
-      timeRemainingMinutes() {
-        return this.timeEstimate - this.timeSpent;
-      },
-      timeRemainingPercent() {
-        return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`;
-      },
-      timeRemainingStatusClass() {
-        return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
-      },
-      /* Parsed time values */
-      parsedEstimate() {
-        return prettyTime.parseSeconds(this.timeEstimate);
-      },
-      parsedSpent() {
-        return prettyTime.parseSeconds(this.timeSpent);
-      },
-    },
-    template: `
-      <div class='time-tracking-comparison-pane'>
-        <div class='compare-meter' data-toggle='tooltip' data-placement='top' role='timeRemainingDisplay'
-          :aria-valuenow='timeRemainingTooltip'
-          :title='timeRemainingTooltip'
-          :data-original-title='timeRemainingTooltip'
-          :class='timeRemainingStatusClass'>
-          <div class='meter-container' role='timeSpentPercent' :aria-valuenow='timeRemainingPercent'>
-            <div :style='{ width: timeRemainingPercent }' class='meter-fill'></div>
-          </div>
-          <div class='compare-display-container'>
-            <div class='compare-display pull-left'>
-              <span class='compare-label'>Spent</span>
-              <span class='compare-value spent'>{{ timeSpentHumanReadable }}</span>
-            </div>
-            <div class='compare-display estimated pull-right'>
-              <span class='compare-label'>Est</span>
-              <span class='compare-value'>{{ timeEstimateHumanReadable }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `,
-  });
-})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js b/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js
deleted file mode 100644
index a7fbd704c40..00000000000
--- a/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Vue from 'vue';
-
-(() => {
-  Vue.component('time-tracking-estimate-only-pane', {
-    name: 'time-tracking-estimate-only-pane',
-    props: ['timeEstimateHumanReadable'],
-    template: `
-      <div class='time-tracking-estimate-only-pane'>
-        <span class='bold'>Estimated:</span>
-        {{ timeEstimateHumanReadable }}
-      </div>
-    `,
-  });
-})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/help_state.js b/app/assets/javascripts/issuable/time_tracking/components/help_state.js
deleted file mode 100644
index 344b29ebea4..00000000000
--- a/app/assets/javascripts/issuable/time_tracking/components/help_state.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Vue from 'vue';
-
-(() => {
-  Vue.component('time-tracking-help-state', {
-    name: 'time-tracking-help-state',
-    props: ['docsUrl'],
-    template: `
-      <div class='time-tracking-help-state'>
-        <div class='time-tracking-info'>
-          <h4>Track time with slash commands</h4>
-          <p>Slash commands can be used in the issues description and comment boxes.</p>
-          <p>
-            <code>/estimate</code>
-            will update the estimated time with the latest command.
-          </p>
-          <p>
-            <code>/spend</code>
-            will update the sum of the time spent.
-          </p>
-          <a class='btn btn-default learn-more-button' :href='docsUrl'>Learn more</a>
-        </div>
-      </div>
-    `,
-  });
-})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js b/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js
deleted file mode 100644
index b081adf5e64..00000000000
--- a/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Vue from 'vue';
-
-(() => {
-  Vue.component('time-tracking-no-tracking-pane', {
-    name: 'time-tracking-no-tracking-pane',
-    template: `
-      <div class='time-tracking-no-tracking-pane'>
-        <span class='no-value'>No estimate or time spent</span>
-      </div>
-    `,
-  });
-})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js b/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js
deleted file mode 100644
index edb9169112f..00000000000
--- a/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Vue from 'vue';
-
-(() => {
-  Vue.component('time-tracking-spent-only-pane', {
-    name: 'time-tracking-spent-only-pane',
-    props: ['timeSpentHumanReadable'],
-    template: `
-      <div class='time-tracking-spend-only-pane'>
-        <span class='bold'>Spent:</span>
-        {{ timeSpentHumanReadable }}
-      </div>
-    `,
-  });
-})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js b/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js
deleted file mode 100644
index 0213522f551..00000000000
--- a/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import Vue from 'vue';
-
-require('./help_state');
-require('./collapsed_state');
-require('./spent_only_pane');
-require('./no_tracking_pane');
-require('./estimate_only_pane');
-require('./comparison_pane');
-
-(() => {
-  Vue.component('issuable-time-tracker', {
-    name: 'issuable-time-tracker',
-    props: [
-      'time_estimate',
-      'time_spent',
-      'human_time_estimate',
-      'human_time_spent',
-      'docsUrl',
-    ],
-    data() {
-      return {
-        showHelp: false,
-      };
-    },
-    computed: {
-      timeSpent() {
-        return this.time_spent;
-      },
-      timeEstimate() {
-        return this.time_estimate;
-      },
-      timeEstimateHumanReadable() {
-        return this.human_time_estimate;
-      },
-      timeSpentHumanReadable() {
-        return this.human_time_spent;
-      },
-      hasTimeSpent() {
-        return !!this.timeSpent;
-      },
-      hasTimeEstimate() {
-        return !!this.timeEstimate;
-      },
-      showComparisonState() {
-        return this.hasTimeEstimate && this.hasTimeSpent;
-      },
-      showEstimateOnlyState() {
-        return this.hasTimeEstimate && !this.hasTimeSpent;
-      },
-      showSpentOnlyState() {
-        return this.hasTimeSpent && !this.hasTimeEstimate;
-      },
-      showNoTimeTrackingState() {
-        return !this.hasTimeEstimate && !this.hasTimeSpent;
-      },
-      showHelpState() {
-        return !!this.showHelp;
-      },
-    },
-    methods: {
-      toggleHelpState(show) {
-        this.showHelp = show;
-      },
-    },
-    template: `
-      <div class='time_tracker time-tracking-component-wrap' v-cloak>
-        <time-tracking-collapsed-state
-          :show-comparison-state='showComparisonState'
-          :show-help-state='showHelpState'
-          :show-spent-only-state='showSpentOnlyState'
-          :show-estimate-only-state='showEstimateOnlyState'
-          :time-spent-human-readable='timeSpentHumanReadable'
-          :time-estimate-human-readable='timeEstimateHumanReadable'>
-        </time-tracking-collapsed-state>
-        <div class='title hide-collapsed'>
-          Time tracking
-          <div class='help-button pull-right'
-            v-if='!showHelpState'
-            @click='toggleHelpState(true)'>
-            <i class='fa fa-question-circle' aria-hidden='true'></i>
-          </div>
-          <div class='close-help-button pull-right'
-            v-if='showHelpState'
-            @click='toggleHelpState(false)'>
-            <i class='fa fa-close' aria-hidden='true'></i>
-          </div>
-        </div>
-        <div class='time-tracking-content hide-collapsed'>
-          <time-tracking-estimate-only-pane
-            v-if='showEstimateOnlyState'
-            :time-estimate-human-readable='timeEstimateHumanReadable'>
-          </time-tracking-estimate-only-pane>
-          <time-tracking-spent-only-pane
-            v-if='showSpentOnlyState'
-            :time-spent-human-readable='timeSpentHumanReadable'>
-          </time-tracking-spent-only-pane>
-          <time-tracking-no-tracking-pane
-            v-if='showNoTimeTrackingState'>
-          </time-tracking-no-tracking-pane>
-          <time-tracking-comparison-pane
-            v-if='showComparisonState'
-            :time-estimate='timeEstimate'
-            :time-spent='timeSpent'
-            :time-spent-human-readable='timeSpentHumanReadable'
-            :time-estimate-human-readable='timeEstimateHumanReadable'>
-          </time-tracking-comparison-pane>
-          <transition name='help-state-toggle'>
-            <time-tracking-help-state
-              v-if='showHelpState'
-              :docs-url='docsUrl'>
-            </time-tracking-help-state>
-          </transition>
-        </div>
-      </div>
-    `,
-  });
-})();
diff --git a/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js b/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js
deleted file mode 100644
index 1689a69e1ed..00000000000
--- a/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-require('./components/time_tracker');
-require('../../smart_interval');
-require('../../subbable_resource');
-
-Vue.use(VueResource);
-
-(() => {
-  /* This Vue instance represents what will become the parent instance for the
-    * sidebar. It will be responsible for managing `issuable` state and propagating
-    * changes to sidebar components. We will want to create a separate service to
-    * interface with the server at that point.
-   */
-
-  class IssuableTimeTracking {
-    constructor(issuableJSON) {
-      const parsedIssuable = JSON.parse(issuableJSON);
-      return this.initComponent(parsedIssuable);
-    }
-
-    initComponent(parsedIssuable) {
-      this.parentInstance = new Vue({
-        el: '#issuable-time-tracker',
-        data: {
-          issuable: parsedIssuable,
-        },
-        methods: {
-          fetchIssuable() {
-            return gl.IssuableResource.get.call(gl.IssuableResource, {
-              type: 'GET',
-              url: gl.IssuableResource.endpoint,
-            });
-          },
-          updateState(data) {
-            this.issuable = data;
-          },
-          subscribeToUpdates() {
-            gl.IssuableResource.subscribe(data => this.updateState(data));
-          },
-          listenForSlashCommands() {
-            $(document).on('ajax:success', '.gfm-form', (e, data) => {
-              const subscribedCommands = ['spend_time', 'time_estimate'];
-              const changedCommands = data.commands_changes
-                ? Object.keys(data.commands_changes)
-                : [];
-              if (changedCommands && _.intersection(subscribedCommands, changedCommands).length) {
-                this.fetchIssuable();
-              }
-            });
-          },
-        },
-        created() {
-          this.fetchIssuable();
-        },
-        mounted() {
-          this.subscribeToUpdates();
-          this.listenForSlashCommands();
-        },
-      });
-    }
-  }
-
-  gl.IssuableTimeTracking = IssuableTimeTracking;
-})(window.gl || (window.gl = {}));
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/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/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
new file mode 100644
index 00000000000..800bb9f1fe8
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -0,0 +1,245 @@
+<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 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: '',
+    },
+    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,
+    });
+
+    return {
+      store,
+      state: store.state,
+      showForm: false,
+    };
+  },
+  computed: {
+    formState() {
+      return this.store.formState;
+    },
+  },
+  components: {
+    descriptionComponent,
+    titleComponent,
+    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" />
+    </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..3281ec6b172
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -0,0 +1,108 @@
+<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,
+      },
+      updatedAt: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      taskStatus: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        preAnimation: false,
+        pulseAnimation: false,
+        timeAgoEl: $('.js-issue-edited-ago'),
+      };
+    },
+    watch: {
+      descriptionHtml() {
+        this.animateChange();
+
+        this.$nextTick(() => {
+          const toolTipTime = gl.utils.formatDate(this.updatedAt);
+
+          this.timeAgoEl.attr('datetime', this.updatedAt)
+            .attr('title', toolTipTime)
+            .tooltip('fixTitle');
+
+          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/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 4d491e70d83..faf79471946 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -1,20 +1,49 @@
 import Vue from 'vue';
-import IssueTitle from './issue_title.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, endpoint } = 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: {
-        initialTitle,
-        endpoint,
-      },
-    }),
+  $('.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,
+        },
+      });
+    },
+  });
+});
diff --git a/app/assets/javascripts/issue_show/issue_title.vue b/app/assets/javascripts/issue_show/issue_title.vue
deleted file mode 100644
index 00b0e56030a..00000000000
--- a/app/assets/javascripts/issue_show/issue_title.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script>
-import Visibility from 'visibilityjs';
-import Poll from './../lib/utils/poll';
-import Service from './services/index';
-
-export default {
-  props: {
-    initialTitle: { required: true, type: String },
-    endpoint: { required: true, type: String },
-  },
-  data() {
-    const resource = new Service(this.$http, this.endpoint);
-
-    const poll = new Poll({
-      resource,
-      method: 'getTitle',
-      successCallback: (res) => {
-        this.renderResponse(res);
-      },
-      errorCallback: (err) => {
-        if (process.env.NODE_ENV !== 'production') {
-          // eslint-disable-next-line no-console
-          console.error('ISSUE SHOW TITLE REALTIME ERROR', err);
-        } else {
-          throw new Error(err);
-        }
-      },
-    });
-
-    return {
-      poll,
-      timeoutId: null,
-      title: this.initialTitle,
-    };
-  },
-  methods: {
-    renderResponse(res) {
-      const body = JSON.parse(res.body);
-      this.triggerAnimation(body);
-    },
-    triggerAnimation(body) {
-      const { title } = body;
-
-      /**
-      * since opacity is changed, even if there is no diff for Vue to update
-      * we must check the title even on a 304 to ensure no visual change
-      */
-      if (this.title === title) return;
-
-      this.$el.style.opacity = 0;
-
-      this.timeoutId = setTimeout(() => {
-        this.title = title;
-
-        this.$el.style.transition = 'opacity 0.2s ease';
-        this.$el.style.opacity = 1;
-
-        clearTimeout(this.timeoutId);
-      }, 100);
-    },
-  },
-  created() {
-    if (!Visibility.hidden()) {
-      this.poll.makeRequest();
-    }
-
-    Visibility.change(() => {
-      if (!Visibility.hidden()) {
-        this.poll.restart();
-      } else {
-        this.poll.stop();
-      }
-    });
-  },
-};
-</script>
-
-<template>
-  <h2 class="title" v-html="title"></h2>
-</template>
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..4a16c3cb4dc
--- /dev/null
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -0,0 +1,45 @@
+export default class Store {
+  constructor({
+    titleHtml,
+    titleText,
+    descriptionHtml,
+    descriptionText,
+  }) {
+    this.state = {
+      titleHtml,
+      titleText,
+      descriptionHtml,
+      descriptionText,
+      taskStatus: '',
+      updatedAt: '',
+    };
+    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;
+  }
+
+  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/issue_status_select.js b/app/assets/javascripts/issue_status_select.js
index b2cfd3ef2a3..56cb536dcde 100644
--- a/app/assets/javascripts/issue_status_select.js
+++ b/app/assets/javascripts/issue_status_select.js
@@ -19,8 +19,8 @@
               return label;
             };
           })(this),
-          clicked: function(item, $el, e) {
-            return e.preventDefault();
+          clicked: function(options) {
+            return options.e.preventDefault();
           },
           id: function(obj, el) {
             return $(el).data("id");
diff --git a/app/assets/javascripts/issues_bulk_assignment.js b/app/assets/javascripts/issues_bulk_assignment.js
index e0ebd36a65c..fee3429e2b8 100644
--- a/app/assets/javascripts/issues_bulk_assignment.js
+++ b/app/assets/javascripts/issues_bulk_assignment.js
@@ -88,7 +88,10 @@
       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(),
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 9a60f5464df..ac5ce84e31b 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -330,7 +330,10 @@
           },
           multiSelect: $dropdown.hasClass('js-multiselect'),
           vue: $dropdown.hasClass('js-issue-board-sidebar'),
-          clicked: function(label, $el, e, isMarking) {
+          clicked: function(options) {
+            const { $el, e, isMarking } = options;
+            const label = options.selectedObj;
+
             var isIssueIndex, isMRIndex, page, boardsModel;
             var fadeOutLoader = () => {
               $loading.fadeOut();
@@ -352,7 +355,7 @@
 
             if ($dropdown.hasClass('js-filter-bulk-update')) {
               _this.enableBulkLabelDropdown();
-              _this.setDropdownData($dropdown, isMarking, this.id(label));
+              _this.setDropdownData($dropdown, isMarking, label.id);
               return;
             }
 
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/accessor.js b/app/assets/javascripts/lib/utils/accessor.js
new file mode 100644
index 00000000000..1d18992af63
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/accessor.js
@@ -0,0 +1,47 @@
+function isPropertyAccessSafe(base, property) {
+  let safe;
+
+  try {
+    safe = !!base[property];
+  } catch (error) {
+    safe = false;
+  }
+
+  return safe;
+}
+
+function isFunctionCallSafe(base, functionName, ...args) {
+  let safe = true;
+
+  try {
+    base[functionName](...args);
+  } catch (error) {
+    safe = false;
+  }
+
+  return safe;
+}
+
+function isLocalStorageAccessSafe() {
+  let safe;
+
+  const TEST_KEY = 'isLocalStorageAccessSafe';
+  const TEST_VALUE = 'true';
+
+  safe = isPropertyAccessSafe(window, 'localStorage');
+  if (!safe) return safe;
+
+  safe = isFunctionCallSafe(window.localStorage, 'setItem', TEST_KEY, TEST_VALUE);
+
+  if (safe) window.localStorage.removeItem(TEST_KEY);
+
+  return safe;
+}
+
+const AccessorUtilities = {
+  isPropertyAccessSafe,
+  isFunctionCallSafe,
+  isLocalStorageAccessSafe,
+};
+
+export default AccessorUtilities;
diff --git a/app/assets/javascripts/lib/utils/ajax_cache.js b/app/assets/javascripts/lib/utils/ajax_cache.js
new file mode 100644
index 00000000000..f1fe95e12e8
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/ajax_cache.js
@@ -0,0 +1,44 @@
+import Cache from './cache';
+
+class AjaxCache extends Cache {
+  constructor() {
+    super();
+    this.pendingRequests = { };
+  }
+
+  retrieve(endpoint) {
+    if (this.hasData(endpoint)) {
+      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 pendingRequest.then(() => this.get(endpoint));
+  }
+}
+
+export default new AjaxCache();
diff --git a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
index 2955bda1a36..0bf2ba6acc2 100644
--- a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
+++ b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
@@ -31,82 +31,78 @@
  *
  * ### How to use
  *
- *  new window.gl.LinkedTabs({
+ *  new LinkedTabs({
  *    action: "#{controller.action_name}",
  *    defaultAction: 'tab1',
  *    parentEl: '.tab-links'
  *  });
  */
 
-(() => {
-  window.gl = window.gl || {};
+export default class LinkedTabs {
+  /**
+   * Binds the events and activates de default tab.
+   *
+   * @param  {Object} options
+   */
+  constructor(options = {}) {
+    this.options = options;
 
-  window.gl.LinkedTabs = class LinkedTabs {
-    /**
-     * Binds the events and activates de default tab.
-     *
-     * @param  {Object} options
-     */
-    constructor(options) {
-      this.options = options || {};
+    this.defaultAction = this.options.defaultAction;
+    this.action = this.options.action || this.defaultAction;
 
-      this.defaultAction = this.options.defaultAction;
-      this.action = this.options.action || this.defaultAction;
-
-      if (this.action === 'show') {
-        this.action = this.defaultAction;
-      }
+    if (this.action === 'show') {
+      this.action = this.defaultAction;
+    }
 
-      this.currentLocation = window.location;
+    this.currentLocation = window.location;
 
-      const tabSelector = `${this.options.parentEl} a[data-toggle="tab"]`;
+    const tabSelector = `${this.options.parentEl} a[data-toggle="tab"]`;
 
-      // since this is a custom event we need jQuery :(
-      $(document)
-        .off('shown.bs.tab', tabSelector)
-        .on('shown.bs.tab', tabSelector, e => this.tabShown(e));
+    // since this is a custom event we need jQuery :(
+    $(document)
+      .off('shown.bs.tab', tabSelector)
+      .on('shown.bs.tab', tabSelector, e => this.tabShown(e));
 
-      this.activateTab(this.action);
-    }
+    this.activateTab(this.action);
+  }
 
-    /**
-     * Handles the `shown.bs.tab` event to set the currect url action.
-     *
-     * @param  {type} evt
-     * @return {Function}
-     */
-    tabShown(evt) {
-      const source = evt.target.getAttribute('href');
+  /**
+   * Handles the `shown.bs.tab` event to set the currect url action.
+   *
+   * @param  {type} evt
+   * @return {Function}
+   */
+  tabShown(evt) {
+    const source = evt.target.getAttribute('href');
 
-      return this.setCurrentAction(source);
-    }
+    return this.setCurrentAction(source);
+  }
 
-    /**
-     * Updates the URL with the path that matched the given action.
-     *
-     * @param  {String} source
-     * @return {String}
-     */
-    setCurrentAction(source) {
-      const copySource = source;
+  /**
+   * Updates the URL with the path that matched the given action.
+   *
+   * @param  {String} source
+   * @return {String}
+   */
+  setCurrentAction(source) {
+    const copySource = source;
 
-      copySource.replace(/\/+$/, '');
+    copySource.replace(/\/+$/, '');
 
-      const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`;
+    const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`;
 
-      history.replaceState({
-        url: newState,
-      }, document.title, newState);
-      return newState;
-    }
+    history.replaceState({
+      url: newState,
+    }, document.title, newState);
+    return newState;
+  }
 
-    /**
-     * Given the current action activates the correct tab.
-     * http://getbootstrap.com/javascript/#tab-show
-     * Note: Will trigger `shown.bs.tab`
-     */
-    activateTab() {
-      return $(`${this.options.parentEl} a[data-action='${this.action}']`).tab('show');
-    }
-  };
-})();
+  /**
+   * Given the current action activates the correct tab.
+   * http://getbootstrap.com/javascript/#tab-show
+   * Note: Will trigger `shown.bs.tab`
+   */
+  activateTab() {
+    return $(`${this.options.parentEl} a[data-action='${this.action}']`).tab('show');
+  }
+}
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 8058672eaa9..a537267643e 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -35,6 +35,14 @@
       });
     };
 
+    w.gl.utils.ajaxPost = function(url, data) {
+      return $.ajax({
+        type: 'POST',
+        url: url,
+        data: data,
+      });
+    };
+
     w.gl.utils.extractLast = function(term) {
       return this.split(term).pop();
     };
@@ -127,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) {
@@ -187,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..b2f48049bb4 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -1,9 +1,10 @@
 /* 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';
+
+window.timeago = timeago;
+window.dateFormat = dateFormat;
 
 (function() {
   (function(w) {
@@ -101,8 +102,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'), 'gl_en');
 
       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/simple_poll.js b/app/assets/javascripts/lib/utils/simple_poll.js
new file mode 100644
index 00000000000..25ca98afbe7
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/simple_poll.js
@@ -0,0 +1,15 @@
+export default (fn, interval = 2000, timeout = 60000) => {
+  const startTime = Date.now();
+
+  return new Promise((resolve, reject) => {
+    const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
+    const next = () => {
+      if (Date.now() - startTime < timeout) {
+        setTimeout(fn.bind(null, next, stop), interval);
+      } else {
+        reject(new Error('SIMPLE_POLL_TIMEOUT'));
+      }
+    };
+    fn(next, stop);
+  });
+};
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
new file mode 100644
index 00000000000..9411f078ecf
--- /dev/null
+++ b/app/assets/javascripts/locale/de/app.js
@@ -0,0 +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
diff --git a/app/assets/javascripts/locale/en/app.js b/app/assets/javascripts/locale/en/app.js
new file mode 100644
index 00000000000..ade9b667b3c
--- /dev/null
+++ b/app/assets/javascripts/locale/en/app.js
@@ -0,0 +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
diff --git a/app/assets/javascripts/locale/es/app.js b/app/assets/javascripts/locale/es/app.js
new file mode 100644
index 00000000000..f5f510d7c2b
--- /dev/null
+++ b/app/assets/javascripts/locale/es/app.js
@@ -0,0 +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-20 22:37-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 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 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
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
new file mode 100644
index 00000000000..7ba676d6d20
--- /dev/null
+++ b/app/assets/javascripts/locale/index.js
@@ -0,0 +1,70 @@
+import Jed from 'jed';
+
+/**
+  This is required to require all the translation folders in the current directory
+  this saves us having to do this manually & keep up to date with new languages
+**/
+function requireAll(requireContext) { return requireContext.keys().map(requireContext); }
+
+const allLocales = requireAll(require.context('./', true, /^(?!.*(?:index.js$)).*\.js$/));
+const locales = allLocales.reduce((d, obj) => {
+  const data = d;
+  const localeKey = Object.keys(obj)[0];
+
+  data[localeKey] = obj[localeKey];
+
+  return data;
+}, {});
+
+let lang = document.querySelector('html').getAttribute('lang') || 'en';
+lang = lang.replace(/-/g, '_');
+
+const locale = new Jed(locales[lang]);
+
+/**
+  Translates `text`
+
+  @param text The text to be translated
+  @returns {String} The translated text
+**/
+const gettext = locale.gettext.bind(locale);
+
+/**
+  Translate the text with a number
+  if the number is more than 1 it will use the `pluralText` translation.
+  This method allows for contexts, see below re. contexts
+
+  @param text Singular text to translate (eg. '%d day')
+  @param pluralText Plural text to translate (eg. '%d days')
+  @param count Number to decide which translation to use (eg. 2)
+  @returns {String} Translated text with the number replaced (eg. '2 days')
+**/
+const ngettext = (text, pluralText, count) => {
+  const translated = locale.ngettext(text, pluralText, count).replace(/%d/g, count).split('|');
+
+  return translated[translated.length - 1];
+};
+
+/**
+  Translate context based text
+  Either pass in the context translation like `Context|Text to translate`
+  or allow for dynamic text by doing passing in the context first & then the text to translate
+
+  @param keyOrContext Can be either the key to translate including the context
+                      (eg. 'Context|Text') or just the context for the translation
+                      (eg. 'Context')
+  @param key Is the dynamic variable you want to be translated
+  @returns {String} Translated context based text
+**/
+const pgettext = (keyOrContext, key) => {
+  const normalizedKey = key ? `${keyOrContext}|${key}` : keyOrContext;
+  const translated = gettext(normalizedKey).split('|');
+
+  return translated[translated.length - 1];
+};
+
+export { lang };
+export { gettext as __ };
+export { ngettext as n__ };
+export { pgettext as s__ };
+export default locale;
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index be3c2c9fbb1..1ac82b7e291 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';
@@ -123,8 +120,6 @@ import './member_expiration_date';
 import './members';
 import './merge_request';
 import './merge_request_tabs';
-import './merge_request_widget';
-import './merged_buttons';
 import './milestone';
 import './milestone_select';
 import './mini_pipeline_graph_dropdown';
@@ -158,7 +153,6 @@ import './single_file_diff';
 import './smart_interval';
 import './snippets_list';
 import './star';
-import './subbable_resource';
 import './subscription';
 import './subscription_select';
 import './syntax_highlight';
@@ -175,7 +169,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/members.js b/app/assets/javascripts/members.js
index e3f367a11eb..8291b8c4a70 100644
--- a/app/assets/javascripts/members.js
+++ b/app/assets/javascripts/members.js
@@ -31,8 +31,8 @@
           toggleLabel(selected, $el) {
             return $el.text();
           },
-          clicked: (selected, $link) => {
-            this.formSubmit(null, $link);
+          clicked: (options) => {
+            this.formSubmit(null, options.$el);
           },
         });
       });
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 5e01aacf2ba..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() {
@@ -106,6 +104,21 @@ require('./merge_request_tabs');
       });
     };
 
+    MergeRequest.prototype.updateStatusText = function(classToRemove, classToAdd, newStatusText) {
+      $('.detail-page-header .status-box')
+        .removeClass(classToRemove)
+        .addClass(classToAdd)
+        .find('span')
+        .text(newStatusText);
+    };
+
+    MergeRequest.prototype.decreaseCounter = function(by = 1) {
+      const $el = $('.nav-links .js-merge-counter');
+      const count = Math.max((parseInt($el.text().replace(/[^\d]/, ''), 10) - by), 0);
+
+      $el.text(gl.text.addDelimiter(count));
+    };
+
     return MergeRequest;
   })();
 }).call(window);
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 93c30c54a8e..894ed81b044 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-new, class-methods-use-this */
 /* global Breakpoints */
 /* global Flash */
+/* global notes */
 
 import Cookies from 'js-cookie';
 import './breakpoints';
@@ -251,7 +252,8 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
       this.ajaxGet({
         url: `${urlPathname}.json${location.search}`,
         success: (data) => {
-          $('#diffs').html(data.html);
+          const $container = $('#diffs');
+          $container.html(data.html);
 
           if (typeof gl.diffNotesCompileComponents !== 'undefined') {
             gl.diffNotesCompileComponents();
@@ -278,6 +280,24 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
             })
               .init();
           });
+
+          // Scroll any linked note into view
+          // Similar to `toggler_behavior` in the discussion tab
+          const hash = window.gl.utils.getLocationHash();
+          const anchor = hash && $container.find(`[id="${hash}"]`);
+          if (anchor && anchor.length > 0) {
+            const notesContent = anchor.closest('.notes_content');
+            const lineType = notesContent.hasClass('new') ? 'new' : 'old';
+            notes.toggleDiffNote({
+              target: anchor,
+              lineType,
+              forceShow: true,
+            });
+            anchor[0].scrollIntoView();
+            // We have multiple elements on the page with `#note_xxx`
+            // (discussion and diff tabs) and `:target` only applies to the first
+            anchor.addClass('target');
+          }
         },
       });
     }
@@ -353,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 42ecf0d6cb2..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/merge_request_widget/ci_bundle.js b/app/assets/javascripts/merge_request_widget/ci_bundle.js
deleted file mode 100644
index 21d7c3e168e..00000000000
--- a/app/assets/javascripts/merge_request_widget/ci_bundle.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/* global merge_request_widget */
-
-(() => {
-  $(() => {
-    /* TODO: This needs a better home, or should be refactored. It was previously contained
-     * in a script tag in app/views/projects/merge_requests/widget/open/_accept.html.haml,
-     * but Vue chokes on script tags and prevents their execution. So it was moved here
-     * temporarily.
-     * */
-
-    $(document)
-    .off('ajax:send', '.accept-mr-form')
-    .on('ajax:send', '.accept-mr-form', () => {
-      $('.accept-mr-form :input').disable();
-    });
-
-    $(document)
-    .off('click', '.accept-merge-request')
-    .on('click', '.accept-merge-request', () => {
-      $('.js-merge-button, .js-merge-when-pipeline-succeeds-button').html('<i class="fa fa-spinner fa-spin"></i> Merge in progress');
-    });
-
-    $(document)
-    .off('click', '.merge-when-pipeline-succeeds')
-    .on('click', '.merge-when-pipeline-succeeds', () => {
-      $('#merge_when_pipeline_succeeds').val('1');
-    });
-
-    $(document)
-    .off('click', '.js-merge-dropdown a')
-    .on('click', '.js-merge-dropdown a', (e) => {
-      e.preventDefault();
-      $(e.target).closest('form').submit();
-    });
-    if ($('.rebase-in-progress').length) {
-      merge_request_widget.rebaseInProgress();
-    } else if ($('.rebase-mr-form').length) {
-      $(document)
-      .off('ajax:send', '.rebase-mr-form')
-      .on('ajax:send', '.rebase-mr-form', () => {
-        $('.rebase-mr-form :input').disable();
-      });
-
-      $(document)
-      .off('click', '.js-rebase-button')
-      .on('click', '.js-rebase-button', () => {
-        $('.js-rebase-button').html("<i class='fa fa-spinner fa-spin'></i> Rebase in progress");
-      });
-    } else {
-      setTimeout(() => merge_request_widget.getMergeStatus(), 200);
-    }
-  });
-})();
diff --git a/app/assets/javascripts/merged_buttons.js b/app/assets/javascripts/merged_buttons.js
deleted file mode 100644
index 7b0997c6520..00000000000
--- a/app/assets/javascripts/merged_buttons.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, max-len */
-
-import '~/lib/utils/url_utility';
-
-(function() {
-  this.MergedButtons = (function() {
-    function MergedButtons() {
-      this.removeSourceBranch = this.removeSourceBranch.bind(this);
-      this.removeBranchSuccess = this.removeBranchSuccess.bind(this);
-      this.removeBranchError = this.removeBranchError.bind(this);
-      this.$removeBranchWidget = $('.remove_source_branch_widget');
-      this.$removeBranchProgress = $('.remove_source_branch_in_progress');
-      this.$removeBranchFailed = $('.remove_source_branch_widget.failed');
-      this.cleanEventListeners();
-      this.initEventListeners();
-    }
-
-    MergedButtons.prototype.cleanEventListeners = function() {
-      $(document).off('click', '.remove_source_branch');
-      $(document).off('ajax:success', '.remove_source_branch');
-      return $(document).off('ajax:error', '.remove_source_branch');
-    };
-
-    MergedButtons.prototype.initEventListeners = function() {
-      $(document).on('click', '.remove_source_branch', this.removeSourceBranch);
-      $(document).on('ajax:success', '.remove_source_branch', this.removeBranchSuccess);
-      $(document).on('ajax:error', '.remove_source_branch', this.removeBranchError);
-    };
-
-    MergedButtons.prototype.removeSourceBranch = function() {
-      this.$removeBranchWidget.hide();
-      return this.$removeBranchProgress.show();
-    };
-
-    MergedButtons.prototype.removeBranchSuccess = function() {
-      gl.utils.refreshCurrentPage();
-    };
-
-    MergedButtons.prototype.removeBranchError = function() {
-      this.$removeBranchWidget.hide();
-      this.$removeBranchProgress.hide();
-      return this.$removeBranchFailed.show();
-    };
-
-    return MergedButtons;
-  })();
-}).call(window);
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index bebd0aa357e..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,12 +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(selected, $el, e) {
-            var data, isIssueIndex, isMRIndex, page, boardsStore;
+          clicked: function(options) {
+            const { $el, e } = options;
+            let selected = options.selectedObj;
+            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;
@@ -139,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 b98e6121967..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;
@@ -58,7 +56,8 @@
       });
     }
 
-    NamespaceSelect.prototype.onSelectItem = function(item, el, e) {
+    NamespaceSelect.prototype.onSelectItem = function(options) {
+      const { e } = options;
       return e.preventDefault();
     };
 
diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index 5828f460a23..39fb302b644 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -1,15 +1,14 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, one-var, prefer-rest-params, max-len, vars-on-top, wrap-iife, consistent-return, comma-dangle, one-var-declaration-per-line, quotes, no-return-assign, prefer-arrow-callback, prefer-template, no-shadow, no-else-return, max-len, object-shorthand */
-(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; };
+import RefSelectDropdown from '~/ref_select_dropdown';
 
+(function() {
   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');
-      this.setupAvailableRefs(availableRefs);
+      new RefSelectDropdown($('.js-branch-select'), availableRefs); // eslint-disable-line no-new
       this.setupRestrictions();
       this.addBinding();
       this.init();
@@ -25,33 +24,6 @@
       }
     };
 
-    NewBranchForm.prototype.setupAvailableRefs = function(availableRefs) {
-      var $branchSelect = $('.js-branch-select');
-
-      $branchSelect.glDropdown({
-        data: availableRefs,
-        filterable: true,
-        filterByText: true,
-        remote: false,
-        fieldName: $branchSelect.data('field-name'),
-        selectable: true,
-        isSelectable: function(branch, $el) {
-          return !$el.hasClass('is-active');
-        },
-        text: function(branch) {
-          return branch;
-        },
-        id: function(branch) {
-          return branch;
-        },
-        toggleLabel: function(branch) {
-          if (branch) {
-            return branch;
-          }
-        }
-      });
-    };
-
     NewBranchForm.prototype.setupRestrictions = function() {
       var endsWith, invalid, single, startsWith;
       startsWith = {
@@ -79,6 +51,8 @@
 
     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 87f03a40eba..0ca7cabfc5a 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,57 +12,61 @@
 
 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 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) {
-      this.updateTargetButtons = bind(this.updateTargetButtons, this);
-      this.updateCloseButton = bind(this.updateCloseButton, this);
-      this.visibilityChange = bind(this.visibilityChange, this);
-      this.cancelDiscussionForm = bind(this.cancelDiscussionForm, this);
-      this.addDiffNote = bind(this.addDiffNote, this);
-      this.setupDiscussionNoteForm = bind(this.setupDiscussionNoteForm, this);
-      this.replyToDiscussionNote = bind(this.replyToDiscussionNote, this);
-      this.removeNote = bind(this.removeNote, this);
-      this.cancelEdit = bind(this.cancelEdit, this);
-      this.updateNote = bind(this.updateNote, this);
-      this.addDiscussionNote = bind(this.addDiscussionNote, this);
-      this.addNoteError = bind(this.addNoteError, this);
-      this.addNote = bind(this.addNote, this);
-      this.resetMainTargetForm = bind(this.resetMainTargetForm, this);
-      this.refresh = bind(this.refresh, this);
-      this.keydownNoteText = bind(this.keydownNoteText, this);
-      this.toggleCommitList = bind(this.toggleCommitList, this);
+    function Notes(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
+      this.updateTargetButtons = this.updateTargetButtons.bind(this);
+      this.updateComment = this.updateComment.bind(this);
+      this.visibilityChange = this.visibilityChange.bind(this);
+      this.cancelDiscussionForm = this.cancelDiscussionForm.bind(this);
+      this.onAddDiffNote = this.onAddDiffNote.bind(this);
+      this.setupDiscussionNoteForm = this.setupDiscussionNoteForm.bind(this);
+      this.onReplyToDiscussionNote = this.onReplyToDiscussionNote.bind(this);
+      this.removeNote = this.removeNote.bind(this);
+      this.cancelEdit = this.cancelEdit.bind(this);
+      this.updateNote = this.updateNote.bind(this);
+      this.addDiscussionNote = this.addDiscussionNote.bind(this);
+      this.addNoteError = this.addNoteError.bind(this);
+      this.addNote = this.addNote.bind(this);
+      this.resetMainTargetForm = this.resetMainTargetForm.bind(this);
+      this.refresh = this.refresh.bind(this);
+      this.keydownNoteText = this.keydownNoteText.bind(this);
+      this.toggleCommitList = this.toggleCommitList.bind(this);
+      this.postComment = this.postComment.bind(this);
+      this.clearFlashWrapper = this.clearFlash.bind(this);
 
       this.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;
+      this.flashErrors = [];
 
       this.cleanBinding();
       this.addBinding();
@@ -82,68 +92,62 @@ const normalizeNewlines = function(str) {
     };
 
     Notes.prototype.addBinding = function() {
-      // add note to UI after creation
-      $(document).on("ajax:success", ".js-main-target-form", this.addNote);
-      $(document).on("ajax:success", ".js-discussion-note-form", this.addDiscussionNote);
-      // catch note ajax errors
-      $(document).on("ajax:error", ".js-main-target-form", this.addNoteError);
-      // change note in UI after update
-      $(document).on("ajax:success", "form.edit-note", this.updateNote);
       // 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-button", this.updateCloseButton);
-      $(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.resolveDiscussion);
+      $(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);
-      // reset main target form after submit
-      $(document).on("ajax:complete", ".js-main-target-form", this.reenableTargetFormSubmitButton);
-      $(document).on("ajax:success", ".js-main-target-form", this.resetMainTargetForm);
+      $(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.replyToDiscussionNote);
+      $(document).on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
       // add diff note
-      $(document).on("click", ".js-add-diff-note-button", this.addDiffNote);
+      $(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);
       // 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("ajax:success", ".js-main-target-form");
-      $(document).off("ajax:success", ".js-discussion-note-form");
-      $(document).off("ajax:success", "form.edit-note");
-      $(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("ajax:complete", ".js-main-target-form");
-      $(document).off("ajax:success", ".js-main-target-form");
-      $(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('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) {
@@ -179,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]);
@@ -233,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;
@@ -276,15 +280,11 @@ const normalizeNewlines = function(str) {
       return this.initRefresh();
     };
 
-    Notes.prototype.handleCreateChanges = function(noteEntity) {
+    Notes.prototype.handleSlashCommands = function(noteEntity) {
       var votesBlock;
-      if (typeof noteEntity === 'undefined') {
-        return;
-      }
-
       if (noteEntity.commands_changes) {
         if ('merge' in noteEntity.commands_changes) {
-          $.get(mrRefreshWidgetUrl);
+          Notes.checkMergeRequestStatus();
         }
 
         if ('emoji_award' in noteEntity.commands_changes) {
@@ -295,6 +295,13 @@ const normalizeNewlines = function(str) {
       }
     };
 
+    Notes.prototype.setupNewNote = function($note) {
+      // Update datetime format on the recent note
+      gl.utils.localTimeAgo($note.find('.js-timeago'), false);
+      this.collapseLongCommitList();
+      this.taskList.init();
+    };
+
     /*
     Render note in main comments area.
 
@@ -302,33 +309,30 @@ 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;
       }
 
       const $note = $notesList.find(`#note_${noteEntity.id}`);
-      if (this.isNewNote(noteEntity)) {
+      if (Notes.isNewNote(noteEntity, this.note_ids)) {
         this.note_ids.push(noteEntity.id);
 
         const $newNote = Notes.animateAppendNote(noteEntity.html, $notesList);
 
-        // Update datetime format on the recent note
-        gl.utils.localTimeAgo($newNote.find('.js-timeago'), false);
-        this.collapseLongCommitList();
-        this.taskList.init();
+        this.setupNewNote($newNote);
         this.refresh();
         return this.updateNotesCount(1);
       }
       // The server can send the same update multiple times so we need to make sure to only update once per actual update.
-      else if (this.isUpdatedNote(noteEntity, $note)) {
+      else if (Notes.isUpdatedNote(noteEntity, $note)) {
         const isEditing = $note.hasClass('is-editing');
         const initialContent = normalizeNewlines(
           $note.find('.original-note-content').text().trim()
@@ -349,30 +353,11 @@ const normalizeNewlines = function(str) {
         }
         else {
           const $updatedNote = Notes.animateUpdateNote(noteEntity.html, $note);
-
-          // Update datetime format on the recent note
-          gl.utils.localTimeAgo($updatedNote.find('.js-timeago'), false);
+          this.setupNewNote($updatedNote);
         }
       }
     };
 
-    /*
-    Check if note does not exists on page
-     */
-
-    Notes.prototype.isNewNote = function(noteEntity) {
-      return $.inArray(noteEntity.id, this.note_ids) === -1;
-    };
-
-    Notes.prototype.isUpdatedNote = function(noteEntity, $note) {
-      // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
-      const sanitizedNoteNote = normalizeNewlines(noteEntity.note);
-      const currentNoteText = normalizeNewlines(
-        $note.find('.original-note-content').text().trim()
-      );
-      return sanitizedNoteNote !== currentNoteText;
-    };
-
     Notes.prototype.isParallelView = function() {
       return Cookies.get('diff_view') === 'parallel';
     };
@@ -385,12 +370,12 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.renderDiscussionNote = function(noteEntity, $form) {
       var discussionContainer, form, row, lineType, diffAvatarContainer;
-      if (!this.isNewNote(noteEntity)) {
+      if (!Notes.isNewNote(noteEntity, this.note_ids)) {
         return;
       }
       this.note_ids.push(noteEntity.id);
-      form = $form || $(".js-discussion-note-form[data-discussion-id='" + noteEntity.discussion_id + "']");
-      row = form.closest("tr");
+      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?
@@ -407,7 +392,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(' ')
@@ -418,7 +403,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 {
@@ -432,6 +417,7 @@ const normalizeNewlines = function(str) {
       }
 
       gl.utils.localTimeAgo($('.js-timeago'), false);
+      Notes.checkMergeRequestStatus();
       return this.updateNotesCount(1);
     };
 
@@ -470,13 +456,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);
@@ -487,8 +473,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');
     };
 
     /*
@@ -500,18 +486,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');
 
@@ -531,21 +517,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);
     };
@@ -556,24 +542,29 @@ const normalizeNewlines = function(str) {
     Adds new note to list.
      */
 
-    Notes.prototype.addNote = function(xhr, note, status) {
-      this.handleCreateChanges(note);
+    Notes.prototype.addNote = function($form, note) {
       return this.renderNote(note);
     };
 
-    Notes.prototype.addNoteError = function(xhr, note, status) {
-      return new Flash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', this.parentTimeline);
+    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 this.addFlash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline);
     };
 
+    Notes.prototype.updateNoteError = $parentTimeline => new Flash('Your comment could not be updated! Please check your network connection and try again.');
+
     /*
     Called in response to the new note form being submitted
 
     Adds new note to list.
      */
 
-    Notes.prototype.addDiscussionNote = function(xhr, note, status) {
-      var $form = $(xhr.target);
-
+    Notes.prototype.addDiscussionNote = function($form, note, isNewDiffComment) {
       if ($form.attr('data-resolve-all') != null) {
         var projectPath = $form.data('project-path');
         var discussionId = $form.data('discussion-id');
@@ -586,7 +577,9 @@ const normalizeNewlines = function(str) {
 
       this.renderNote(note, $form);
       // cleanup after successfully creating a diff/discussion note
-      this.removeDiscussionNoteForm($form);
+      if (isNewDiffComment) {
+        this.removeDiscussionNoteForm($form);
+      }
     };
 
     /*
@@ -595,18 +588,19 @@ const normalizeNewlines = function(str) {
     Updates the current note field.
      */
 
-    Notes.prototype.updateNote = function(_xhr, noteEntity, _status) {
-      var $html, $note_li;
+    Notes.prototype.updateNote = function(noteEntity, $targetNote) {
+      var $noteEntityEl, $note_li;
       // Convert returned HTML to a jQuery object so we can modify it further
-      $html = $(noteEntity.html);
-      this.revertNoteEditForm();
-      gl.utils.localTimeAgo($('.js-timeago', $html));
-      $html.renderGFM();
-      $html.find('.js-task-list-container').taskList('enable');
+      $noteEntityEl = $(noteEntity.html);
+      $noteEntityEl.addClass('fade-in-full');
+      this.revertNoteEditForm($targetNote);
+      gl.utils.localTimeAgo($('.js-timeago', $noteEntityEl));
+      $noteEntityEl.renderGFM();
+      $noteEntityEl.find('.js-task-list-container').taskList('enable');
       // Find the note's `li` element by ID and replace it with the updated HTML
       $note_li = $('.note-row-' + noteEntity.id);
 
-      $note_li.replaceWith($html);
+      $note_li.replaceWith($noteEntityEl);
 
       if (typeof gl.diffNotesCompileComponents !== 'undefined') {
         gl.diffNotesCompileComponents();
@@ -681,10 +675,9 @@ const normalizeNewlines = function(str) {
       if (this.updatedNotesTrackingMap[noteId]) {
         const $newNote = $(this.updatedNotesTrackingMap[noteId].html);
         $note.replaceWith($newNote);
-        this.updatedNotesTrackingMap[noteId] = null;
-
-        // Update datetime format on the recent note
-        gl.utils.localTimeAgo($newNote.find('.js-timeago'), false);
+        this.setupNewNote($newNote);
+        // Now that we have taken care of the update, clear it out
+        delete this.updatedNotesTrackingMap[noteId];
       }
       else {
         $note.find('.js-finish-edit-warning').hide();
@@ -698,7 +691,7 @@ const normalizeNewlines = function(str) {
       var $editForm = $(selector);
 
       $editForm.insertBefore('.notes-form');
-      $editForm.find('.js-comment-button').enable();
+      $editForm.find('.js-comment-save-button').enable();
       $editForm.find('.js-finish-edit-warning').hide();
     };
 
@@ -736,14 +729,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]) {
@@ -754,11 +747,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) {
@@ -769,7 +762,8 @@ const normalizeNewlines = function(str) {
           }
         };
       })(this));
-      // Decrement the "Discussions" counter only once
+
+      Notes.checkMergeRequestStatus();
       return this.updateNotesCount(-1);
     };
 
@@ -781,11 +775,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();
     };
 
     /*
@@ -794,10 +788,14 @@ const normalizeNewlines = function(str) {
     Shows the note form below the notes.
      */
 
-    Notes.prototype.replyToDiscussionNote = function(e) {
+    Notes.prototype.onReplyToDiscussionNote = function(e) {
+      this.replyToDiscussionNote(e.target);
+    };
+
+    Notes.prototype.replyToDiscussionNote = function(target) {
       var form, replyLink;
       form = this.cleanForm(this.formClone.clone());
-      replyLink = $(e.target).closest(".js-discussion-reply-button");
+      replyLink = $(target).closest('.js-discussion-reply-button');
       // insert the form after the button
       replyLink
         .closest('.discussion-reply-holder')
@@ -817,26 +815,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();
@@ -845,7 +843,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');
@@ -854,7 +852,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);
@@ -867,56 +865,74 @@ const normalizeNewlines = function(str) {
     Sets up the form and shows it.
      */
 
-    Notes.prototype.addDiffNote = function(e) {
-      var $link, addForm, hasNotes, lineType, newForm, nextRow, noteForm, notesContent, notesContentSelector, replyButton, row, rowCssToAdd, targetContent, isDiffCommentAvatar;
+    Notes.prototype.onAddDiffNote = function(e) {
       e.preventDefault();
-      $link = $(e.currentTarget || e.target);
-      row = $link.closest("tr");
-      nextRow = row.next();
-      hasNotes = nextRow.is(".notes_holder");
+      const link = e.currentTarget || e.target;
+      const $link = $(link);
+      const showReplyInput = !$link.hasClass('js-diff-comment-avatar');
+      this.toggleDiffNote({
+        target: $link,
+        lineType: link.dataset.lineType,
+        showReplyInput
+      });
+    };
+
+    Notes.prototype.toggleDiffNote = function({
+      target,
+      lineType,
+      forceShow,
+      showReplyInput = false,
+    }) {
+      var $link, addForm, hasNotes, newForm, noteForm, replyButton, row, rowCssToAdd, targetContent, isDiffCommentAvatar;
+      $link = $(target);
+      row = $link.closest('tr');
+      const nextRow = row.next();
+      let targetRow = row;
+      if (nextRow.is('.notes_holder')) {
+        targetRow = nextRow;
+      }
+
+      hasNotes = nextRow.is('.notes_holder');
       addForm = false;
-      notesContentSelector = ".notes_content";
-      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>";
-      isDiffCommentAvatar = $link.hasClass('js-diff-comment-avatar');
+      let lineTypeSelector = '';
+      rowCssToAdd = '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"><div class="content"></div></td></tr>';
       // In parallel view, look inside the correct left/right pane
       if (this.isParallelView()) {
-        lineType = $link.data("lineType");
-        notesContentSelector += "." + 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>";
+        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>';
       }
-      notesContentSelector += " .content";
-      notesContent = nextRow.find(notesContentSelector);
+      const notesContentSelector = `.notes_content${lineTypeSelector} .content`;
+      let notesContent = targetRow.find(notesContentSelector);
 
-      if (hasNotes && !isDiffCommentAvatar) {
-        nextRow.show();
-        notesContent = nextRow.find(notesContentSelector);
+      if (hasNotes && showReplyInput) {
+        targetRow.show();
+        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) {
-            e.target = replyButton[0];
-            $.proxy(this.replyToDiscussionNote, replyButton[0], e).call();
+            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;
             }
           }
         }
-      } else if (!isDiffCommentAvatar) {
+      } else if (showReplyInput) {
         // add a notes row and insert the form
         row.after(rowCssToAdd);
-        nextRow = row.next();
-        notesContent = nextRow.find(notesContentSelector);
+        targetRow = row.next();
+        notesContent = targetRow.find(notesContentSelector);
         addForm = true;
       } else {
-        nextRow.show();
-        notesContent.toggle(!notesContent.is(':visible'));
+        const isCurrentlyShown = targetRow.find('.content:not(:empty)').is(':visible');
+        const isForced = forceShow === true || forceShow === false;
+        const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
 
-        if (!nextRow.find('.content:not(:empty)').is(':visible')) {
-          nextRow.hide();
-        }
+        targetRow.toggle(showNow);
+        notesContent.toggle(showNow);
       }
 
       if (addForm) {
@@ -936,15 +952,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 {
@@ -956,7 +972,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);
     };
 
@@ -968,10 +984,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);
     };
 
     /*
@@ -982,14 +998,6 @@ const normalizeNewlines = function(str) {
       return this.refresh();
     };
 
-    Notes.prototype.updateCloseButton = function(e) {
-      var closebtn, form, textarea;
-      textarea = $(e.target);
-      form = textarea.parents('form');
-      closebtn = form.find('.js-note-target-close');
-      return closebtn.text(closebtn.data('original-text'));
-    };
-
     Notes.prototype.updateTargetButtons = function(e) {
       var closebtn, closetext, discardbtn, form, reopenbtn, reopentext, textarea;
       textarea = $(e.target);
@@ -1078,17 +1086,6 @@ const normalizeNewlines = function(str) {
       return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
     };
 
-    Notes.prototype.resolveDiscussion = function() {
-      var $this = $(this);
-      var discussionId = $this.attr('data-discussion-id');
-
-      $this
-        .closest('form')
-        .attr('data-discussion-id', discussionId)
-        .attr('data-resolve-all', 'true')
-        .attr('data-project-path', $this.attr('data-project-path'));
-    };
-
     Notes.prototype.toggleCommitList = function(e) {
       const $element = $(e.currentTarget);
       const $closestSystemCommitList = $element.siblings('.system-note-commit-list');
@@ -1120,6 +1117,15 @@ const normalizeNewlines = function(str) {
       });
     };
 
+    Notes.prototype.addFlash = function(...flashParams) {
+      this.flashErrors.push(new Flash(...flashParams));
+    };
+
+    Notes.prototype.clearFlash = function() {
+      this.flashErrors.forEach(flash => flash.flashContainer.remove());
+      this.flashErrors = [];
+    };
+
     Notes.prototype.cleanForm = function($form) {
       // Remove JS classes that are not needed here
       $form
@@ -1134,10 +1140,35 @@ const normalizeNewlines = function(str) {
       return $form;
     };
 
+    /**
+     * Check if note does not exists on page
+     */
+    Notes.isNewNote = function(noteEntity, noteIds) {
+      return $.inArray(noteEntity.id, noteIds) === -1;
+    };
+
+    /**
+     * Check if $note already contains the `noteEntity` content
+     */
+    Notes.isUpdatedNote = function(noteEntity, $note) {
+      // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
+      const sanitizedNoteEntityText = normalizeNewlines(noteEntity.note.trim());
+      const currentNoteText = normalizeNewlines(
+        $note.find('.original-note-content').first().text().trim()
+      );
+      return sanitizedNoteEntityText !== currentNoteText;
+    };
+
+    Notes.checkMergeRequestStatus = function() {
+      if (gl.utils.getPagePath(1) === 'merge_requests') {
+        gl.mrWidget.checkStatus();
+      }
+    };
+
     Notes.animateAppendNote = function(noteHtml, $notesList) {
       const $note = $(noteHtml);
 
-      $note.addClass('fade-in').renderGFM();
+      $note.addClass('fade-in-full').renderGFM();
       $notesList.append($note);
       return $note;
     };
@@ -1150,6 +1181,254 @@ const normalizeNewlines = function(str) {
       return $updatedNote;
     };
 
+    /**
+     * Get data from Form attributes to use for saving/submitting comment.
+     */
+    Notes.prototype.getFormData = function($form) {
+      return {
+        formData: $form.serialize(),
+        formContent: $form.find('.js-note-text').val(),
+        formAction: $form.attr('action'),
+      };
+    };
+
+    /**
+     * Identify if comment has any slash commands
+     */
+    Notes.prototype.hasSlashCommands = function(formContent) {
+      return REGEX_SLASH_COMMANDS.test(formContent);
+    };
+
+    /**
+     * Remove slash commands and leave comment with pure message
+     */
+    Notes.prototype.stripSlashCommands = function(formContent) {
+      return formContent.replace(REGEX_SLASH_COMMANDS, '').trim();
+    };
+
+    /**
+     * 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 }) {
+      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="avatar dummy-avatar"></span></a>
+              </div>
+              <div class="timeline-content ${discussionClass}">
+                 <div class="note-header">
+                    <div class="note-header-info">
+                       <a href="/${currentUsername}">
+                         <span class="hidden-xs">${currentUserFullname}</span>
+                         <span class="note-headline-light">@${currentUsername}</span>
+                       </a>
+                    </div>
+                 </div>
+                 <div class="note-body">
+                   <div class="note-text">
+                     <p>${escapedFormContent}</p>
+                   </div>
+                 </div>
+              </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).
+     *
+     * 1) Get Form metadata
+     * 2) Identify comment type; a) Main thread b) Discussion thread c) Discussion resolve
+     * 3) Build temporary placeholder element (using `createPlaceholderNote`)
+     * 4) Show placeholder note on UI
+     * 5) Perform network request to submit the note using `gl.utils.ajaxPost`
+     *    a) If request is successfully completed
+     *        1. Remove placeholder element
+     *        2. Show submitted Note element
+     *        3. Perform post-submit errands
+     *           a. Mark discussion as resolved if comment submission was for resolve.
+     *           b. Reset comment form to original state.
+     *    b) If request failed
+     *        1. Remove placeholder element
+     *        2. Show error Flash message about failure
+     */
+    Notes.prototype.postComment = function(e) {
+      e.preventDefault();
+
+      // Get Form metadata
+      const $submitBtn = $(e.target);
+      let $form = $submitBtn.parents('form');
+      const $closeBtn = $form.find('.js-note-target-close');
+      const isDiscussionNote = $submitBtn.parent().find('li.droplab-item-selected').attr('id') === 'discussion';
+      const isMainForm = $form.hasClass('js-main-target-form');
+      const isDiscussionForm = $form.hasClass('js-discussion-note-form');
+      const isDiscussionResolve = $submitBtn.hasClass('js-comment-resolve-button');
+      const { formData, formContent, formAction } = this.getFormData($form);
+      const uniqueId = _.uniqueId('tempNote_');
+      let $notesContainer;
+      let tempFormContent;
+
+      // Get reference to notes container based on type of comment
+      if (isDiscussionForm) {
+        $notesContainer = $form.parent('.discussion-notes').find('.notes');
+      } else if (isMainForm) {
+        $notesContainer = $('ul.main-notes-list');
+      }
+
+      // If comment is to resolve discussion, disable submit buttons while
+      // comment posting is finished.
+      if (isDiscussionResolve) {
+        $submitBtn.disable();
+        $form.find('.js-comment-submit-button').disable();
+      }
+
+      tempFormContent = formContent;
+      if (this.hasSlashCommands(formContent)) {
+        tempFormContent = this.stripSlashCommands(formContent);
+      }
+
+      if (tempFormContent) {
+        // Show placeholder note
+        $notesContainer.append(this.createPlaceholderNote({
+          formContent: tempFormContent,
+          uniqueId,
+          isDiscussionNote,
+          currentUsername: gon.current_username,
+          currentUserFullname: gon.current_user_fullname,
+        }));
+      }
+
+      // Clear the form textarea
+      if ($notesContainer.length) {
+        if (isMainForm) {
+          this.resetMainTargetForm(e);
+        } else if (isDiscussionForm) {
+          this.removeDiscussionNoteForm($form);
+        }
+      }
+
+      /* eslint-disable promise/catch-or-return */
+      // Make request to submit comment on server
+      gl.utils.ajaxPost(formAction, formData)
+        .then((note) => {
+          // Submission successful! remove placeholder
+          $notesContainer.find(`#${uniqueId}`).remove();
+          // Clear previous form errors
+          this.clearFlashWrapper();
+
+          // Check if this was discussion comment
+          if (isDiscussionForm) {
+            // Remove flash-container
+            $notesContainer.find('.flash-container').remove();
+
+            // If comment intends to resolve discussion, do the same.
+            if (isDiscussionResolve) {
+              $form
+                .attr('data-discussion-id', $submitBtn.data('discussion-id'))
+                .attr('data-resolve-all', 'true')
+                .attr('data-project-path', $submitBtn.data('project-path'));
+            }
+
+            // Show final note element on UI
+            this.addDiscussionNote($form, note, $notesContainer.length === 0);
+
+            // append flash-container to the Notes list
+            if ($notesContainer.length) {
+              $notesContainer.append('<div class="flash-container" style="display: none;"></div>');
+            }
+          } else if (isMainForm) { // Check if this was main thread comment
+            // Show final note element on UI and perform form and action buttons cleanup
+            this.addNote($form, note);
+            this.reenableTargetFormSubmitButton(e);
+          }
+
+          if (note.commands_changes) {
+            this.handleSlashCommands(note);
+          }
+
+          $form.trigger('ajax:success', [note]);
+        }).fail(() => {
+          // Submission failed, remove placeholder note and show Flash error message
+          $notesContainer.find(`#${uniqueId}`).remove();
+
+          // Show form again on UI on failure
+          if (isDiscussionForm && $notesContainer.length) {
+            const replyButton = $notesContainer.parent().find('.js-discussion-reply-button');
+            this.replyToDiscussionNote(replyButton[0]);
+            $form = $notesContainer.parent().find('form');
+          }
+
+          $form.find('.js-note-text').val(formContent);
+          this.reenableTargetFormSubmitButton(e);
+          this.addNoteError($form);
+        });
+
+      return $closeBtn.text($closeBtn.data('original-text'));
+    };
+
+    /**
+     * This method does following tasks step-by-step whenever an existing comment
+     * is updated by user (both main thread comments as well as discussion comments).
+     *
+     * 1) Get Form metadata
+     * 2) Update note element with new content
+     * 3) Perform network request to submit the updated note using `gl.utils.ajaxPost`
+     *    a) If request is successfully completed
+     *        1. Show submitted Note element
+     *    b) If request failed
+     *        1. Revert Note element to original content
+     *        2. Show error Flash message about failure
+     */
+    Notes.prototype.updateComment = function(e) {
+      e.preventDefault();
+
+      // Get Form metadata
+      const $submitBtn = $(e.target);
+      const $form = $submitBtn.parents('form');
+      const $closeBtn = $form.find('.js-note-target-close');
+      const $editingNote = $form.parents('.note.is-editing');
+      const $noteBody = $editingNote.find('.js-task-list-container');
+      const $noteBodyText = $noteBody.find('.note-text');
+      const { formData, formContent, formAction } = this.getFormData($form);
+
+      // Cache original comment content
+      const cachedNoteBodyText = $noteBodyText.html();
+
+      // Show updated comment content temporarily
+      $noteBodyText.html(formContent);
+      $editingNote.removeClass('is-editing fade-in-full').addClass('being-posted fade-in-half');
+      $editingNote.find('.note-headline-meta a').html('<i class="fa fa-spinner fa-spin" aria-label="Comment is being updated" aria-hidden="true"></i>');
+
+      /* eslint-disable promise/catch-or-return */
+      // Make request to update comment on server
+      gl.utils.ajaxPost(formAction, formData)
+        .then((note) => {
+          // Submission successful! render final note element
+          this.updateNote(note, $editingNote);
+        })
+        .fail(() => {
+          // Submission failed, revert back to original note
+          $noteBodyText.html(cachedNoteBodyText);
+          $editingNote.removeClass('being-posted fade-in');
+          $editingNote.find('.fa.fa-spinner').remove();
+
+          // Show Flash message about failure
+          this.updateNoteError();
+        });
+
+      return $closeBtn.text($closeBtn.data('original-text'));
+    };
+
     return Notes;
   })();
 }).call(window);
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..0ef20af9260 100644
--- a/app/assets/javascripts/pager.js
+++ b/app/assets/javascripts/pager.js
@@ -1,5 +1,5 @@
-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;
diff --git a/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js b/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js
new file mode 100644
index 00000000000..4d623763ca7
--- /dev/null
+++ b/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js
@@ -0,0 +1,145 @@
+import Vue from 'vue';
+
+const inputNameAttribute = 'schedule[cron]';
+
+export default {
+  props: {
+    initialCronInterval: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      inputNameAttribute,
+      cronInterval: this.initialCronInterval,
+      cronIntervalPresets: {
+        everyDay: '0 4 * * *',
+        everyWeek: '0 4 * * 0',
+        everyMonth: '0 4 1 * *',
+      },
+      cronSyntaxUrl: 'https://en.wikipedia.org/wiki/Cron',
+      customInputEnabled: false,
+    };
+  },
+  computed: {
+    intervalIsPreset() {
+      return _.contains(this.cronIntervalPresets, this.cronInterval);
+    },
+    // The text input is editable when there's a custom interval, or when it's
+    // a preset interval and the user clicks the 'custom' radio button
+    isEditable() {
+      return !!(this.customInputEnabled || !this.intervalIsPreset);
+    },
+  },
+  methods: {
+    toggleCustomInput(shouldEnable) {
+      this.customInputEnabled = shouldEnable;
+
+      if (shouldEnable) {
+        // We need to change the value so other radios don't remain selected
+        // because the model (cronInterval) hasn't changed. The server trims it.
+        this.cronInterval = `${this.cronInterval} `;
+      }
+    },
+  },
+  created() {
+    if (this.intervalIsPreset) {
+      this.enableCustomInput = false;
+    }
+  },
+  watch: {
+    cronInterval() {
+      // updates field validation state when model changes, as
+      // glFieldError only updates on input.
+      Vue.nextTick(() => {
+        gl.pipelineScheduleFieldErrors.updateFormValidityState();
+      });
+    },
+  },
+  template: `
+    <div class="interval-pattern-form-group">
+      <div class="cron-preset-radio-input">
+        <input
+          id="custom"
+          class="label-light"
+          type="radio"
+          :name="inputNameAttribute"
+          :value="cronInterval"
+          :checked="isEditable"
+          @click="toggleCustomInput(true)"
+        />
+
+        <label for="custom">
+          Custom
+        </label>
+
+        <span class="cron-syntax-link-wrap">
+          (<a :href="cronSyntaxUrl" target="_blank">Cron syntax</a>)
+        </span>
+      </div>
+
+      <div class="cron-preset-radio-input">
+        <input
+          id="every-day"
+          class="label-light"
+          type="radio"
+          v-model="cronInterval"
+          :name="inputNameAttribute"
+          :value="cronIntervalPresets.everyDay"
+          @click="toggleCustomInput(false)"
+        />
+
+        <label class="label-light" for="every-day">
+          Every day (at 4:00am)
+        </label>
+      </div>
+
+      <div class="cron-preset-radio-input">
+        <input
+          id="every-week"
+          class="label-light"
+          type="radio"
+          v-model="cronInterval"
+          :name="inputNameAttribute"
+          :value="cronIntervalPresets.everyWeek"
+          @click="toggleCustomInput(false)"
+        />
+
+        <label class="label-light" for="every-week">
+          Every week (Sundays at 4:00am)
+        </label>
+      </div>
+
+      <div class="cron-preset-radio-input">
+        <input
+          id="every-month"
+          class="label-light"
+          type="radio"
+          v-model="cronInterval"
+          :name="inputNameAttribute"
+          :value="cronIntervalPresets.everyMonth"
+          @click="toggleCustomInput(false)"
+        />
+
+        <label class="label-light" for="every-month">
+          Every month (on the 1st at 4:00am)
+        </label>
+      </div>
+
+      <div class="cron-interval-input-wrapper">
+        <input
+          id="schedule_cron"
+          class="form-control inline cron-interval-input"
+          type="text"
+          placeholder="Define a custom pattern with cron syntax"
+          required="true"
+          v-model="cronInterval"
+          :name="inputNameAttribute"
+          :disabled="!isEditable"
+        />
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js
new file mode 100644
index 00000000000..5109b110b31
--- /dev/null
+++ b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js
@@ -0,0 +1,48 @@
+import Cookies from 'js-cookie';
+import illustrationSvg from '../icons/intro_illustration.svg';
+
+const cookieKey = 'pipeline_schedules_callout_dismissed';
+
+export default {
+  name: 'PipelineSchedulesCallout',
+  data() {
+    return {
+      docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
+      illustrationSvg,
+      calloutDismissed: Cookies.get(cookieKey) === 'true',
+    };
+  },
+  methods: {
+    dismissCallout() {
+      this.calloutDismissed = true;
+      Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 });
+    },
+  },
+  template: `
+    <div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout">
+      <div class="bordered-box landing content-block">
+        <button
+          id="dismiss-callout-btn"
+          class="btn btn-default close"
+          @click="dismissCallout">
+          <i class="fa fa-times"></i>
+        </button>
+        <div class="svg-container" v-html="illustrationSvg"></div>
+        <div class="user-callout-copy">
+          <h4>Scheduling Pipelines</h4>
+          <p>
+              The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags.
+              Those scheduled pipelines will inherit limited project access based on their associated user.
+          </p>
+          <p> Learn more in the
+            <a
+              :href="docsUrl"
+              target="_blank"
+              rel="nofollow">pipeline schedules documentation</a>. <!-- oneline to prevent extra space before period -->
+          </p>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
diff --git a/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js b/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js
new file mode 100644
index 00000000000..0c3926d76b5
--- /dev/null
+++ b/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js
@@ -0,0 +1,52 @@
+export default class TargetBranchDropdown {
+  constructor() {
+    this.$dropdown = $('.js-target-branch-dropdown');
+    this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text');
+    this.$input = $('#schedule_ref');
+    this.initDefaultBranch();
+    this.initDropdown();
+  }
+
+  initDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.formatBranchesList(),
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: cfg => this.updateInputValue(cfg),
+      text: item => item.name,
+    });
+
+    this.setDropdownToggle();
+  }
+
+  formatBranchesList() {
+    return this.$dropdown.data('data')
+      .map(val => ({ name: val }));
+  }
+
+  setDropdownToggle() {
+    const initialValue = this.$input.val();
+
+    this.$dropdownToggle.text(initialValue);
+  }
+
+  initDefaultBranch() {
+    const initialValue = this.$input.val();
+    const defaultBranch = this.$dropdown.data('defaultBranch');
+
+    if (!initialValue) {
+      this.$input.val(defaultBranch);
+    }
+  }
+
+  updateInputValue({ selectedObj, e }) {
+    e.preventDefault();
+
+    this.$input.val(selectedObj.name);
+    gl.pipelineScheduleFieldErrors.updateFormValidityState();
+  }
+}
diff --git a/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js b/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js
new file mode 100644
index 00000000000..95ed9c7dc21
--- /dev/null
+++ b/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js
@@ -0,0 +1,66 @@
+/* eslint-disable class-methods-use-this */
+
+const defaultTimezone = 'UTC';
+
+export default class TimezoneDropdown {
+  constructor() {
+    this.$dropdown = $('.js-timezone-dropdown');
+    this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text');
+    this.$input = $('#schedule_cron_timezone');
+    this.timezoneData = this.$dropdown.data('data');
+    this.initDefaultTimezone();
+    this.initDropdown();
+  }
+
+  initDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.timezoneData,
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: cfg => this.updateInputValue(cfg),
+      text: item => this.formatTimezone(item),
+    });
+
+    this.setDropdownToggle();
+  }
+
+  formatUtcOffset(offset) {
+    let prefix = '';
+
+    if (offset > 0) {
+      prefix = '+';
+    } else if (offset < 0) {
+      prefix = '-';
+    }
+
+    return `${prefix} ${Math.abs(offset / 3600)}`;
+  }
+
+  formatTimezone(item) {
+    return `[UTC ${this.formatUtcOffset(item.offset)}] ${item.name}`;
+  }
+
+  initDefaultTimezone() {
+    const initialValue = this.$input.val();
+
+    if (!initialValue) {
+      this.$input.val(defaultTimezone);
+    }
+  }
+
+  setDropdownToggle() {
+    const initialValue = this.$input.val();
+
+    this.$dropdownToggle.text(initialValue);
+  }
+
+  updateInputValue({ selectedObj, e }) {
+    e.preventDefault();
+    this.$input.val(selectedObj.identifier);
+    gl.pipelineScheduleFieldErrors.updateFormValidityState();
+  }
+}
diff --git a/app/assets/javascripts/pipeline_schedules/icons/intro_illustration.svg b/app/assets/javascripts/pipeline_schedules/icons/intro_illustration.svg
new file mode 100644
index 00000000000..26d1ff97b3e
--- /dev/null
+++ b/app/assets/javascripts/pipeline_schedules/icons/intro_illustration.svg
@@ -0,0 +1 @@
+<svg width="140" height="102" viewBox="0 0 140 102" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>illustration</title><defs><rect id="a" width="12.033" height="40.197" rx="3"/><rect id="b" width="12.033" height="40.197" rx="3"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(-.446)"><path d="M91.747 35.675v-6.039a2.996 2.996 0 0 0-2.999-3.005H54.635a2.997 2.997 0 0 0-2.999 3.005v6.039H40.092a3.007 3.007 0 0 0-2.996 3.005v34.187a2.995 2.995 0 0 0 2.996 3.005h11.544V79.9a2.996 2.996 0 0 0 2.999 3.005h34.113a2.997 2.997 0 0 0 2.999-3.005v-4.03h11.544a3.007 3.007 0 0 0 2.996-3.004V38.68a2.995 2.995 0 0 0-2.996-3.005H91.747z" stroke="#B5A7DD" stroke-width="2"/><rect stroke="#E5E5E5" stroke-width="2" fill="#FFF" x="21.556" y="38.69" width="98.27" height="34.167" rx="3"/><path d="M121.325 38.19c.55 0 .995.444.995 1.002 0 .554-.453 1.003-.995 1.003h-4.039a1.004 1.004 0 0 1 0-2.006h4.039zm9.044 0c.55 0 .996.444.996 1.002 0 .554-.454 1.003-.996 1.003h-4.038a1.004 1.004 0 0 1 0-2.006h4.038zm9.044 0c.55 0 .996.444.996 1.002 0 .554-.453 1.003-.996 1.003h-4.038a1.004 1.004 0 0 1 0-2.006h4.038zM121.325 71.854a1.004 1.004 0 0 1 0 2.006h-4.039a1.004 1.004 0 0 1 0-2.006h4.039zm9.044 0a1.004 1.004 0 0 1 0 2.006h-4.038a1.004 1.004 0 0 1 0-2.006h4.038zm9.044 0a1.004 1.004 0 0 1 0 2.006h-4.038a1.004 1.004 0 0 1 0-2.006h4.038z" fill="#E5E5E5"/><g transform="translate(110.3 35.675)"><use fill="#FFF" xlink:href="#a"/><rect stroke="#FDE5D8" stroke-width="2" x="1" y="1" width="10.033" height="38.197" rx="3"/><ellipse fill="#FC8A51" cx="6.017" cy="9.547" rx="1.504" ry="1.507"/><ellipse fill="#FC8A51" cx="6.017" cy="20.099" rx="1.504" ry="1.507"/><ellipse fill="#FC8A51" cx="6.017" cy="30.65" rx="1.504" ry="1.507"/></g><path d="M6.008 38.19c.55 0 .996.444.996 1.002 0 .554-.454 1.003-.996 1.003H1.97a1.004 1.004 0 0 1 0-2.006h4.038zm9.044 0c.55 0 .996.444.996 1.002 0 .554-.453 1.003-.996 1.003h-4.038a1.004 1.004 0 0 1 0-2.006h4.038zm9.045 0c.55 0 .995.444.995 1.002 0 .554-.453 1.003-.995 1.003h-4.039a1.004 1.004 0 0 1 0-2.006h4.039zM6.008 71.854a1.004 1.004 0 0 1 0 2.006H1.97a1.004 1.004 0 0 1 0-2.006h4.038zm9.044 0a1.004 1.004 0 0 1 0 2.006h-4.038a1.004 1.004 0 0 1 0-2.006h4.038zm9.045 0a1.004 1.004 0 0 1 0 2.006h-4.039a1.004 1.004 0 0 1 0-2.006h4.039z" fill="#E5E5E5"/><g transform="translate(19.05 35.675)"><use fill="#FFF" xlink:href="#b"/><rect stroke="#FDE5D8" stroke-width="2" x="1" y="1" width="10.033" height="38.197" rx="3"/><ellipse fill="#FC8A51" cx="6.017" cy="10.049" rx="1.504" ry="1.507"/><ellipse fill="#FC8A51" cx="6.017" cy="20.601" rx="1.504" ry="1.507"/><ellipse fill="#FC8A51" cx="6.017" cy="31.153" rx="1.504" ry="1.507"/></g><g transform="translate(47.096)"><g transform="translate(7.05)"><ellipse fill="#FC8A51" cx="17.548" cy="5.025" rx="4.512" ry="4.522"/><rect stroke="#B5A7DD" stroke-width="2" fill="#FFF" x="13.036" y="4.02" width="9.025" height="20.099" rx="1.5"/><rect stroke="#FDE5D8" stroke-width="2" fill="#FFF" y="4.02" width="35.096" height="4.02" rx="2.01"/><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" x="4.512" y="18.089" width="26.072" height="17.084" rx="1.5"/></g><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" transform="rotate(-45 43.117 35.117)" x="38.168" y="31.416" width="9.899" height="7.403" rx="3.702"/><ellipse stroke="#6B4FBB" stroke-width="2" fill="#FFF" cx="25" cy="55" rx="25" ry="25"/><ellipse stroke="#6B4FBB" stroke-width="2" fill="#FFF" cx="25" cy="55" rx="21" ry="21"/><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" x="43.05" y="53.281" width="2.95" height="1.538" rx=".769"/><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" x="4.305" y="53.281" width="2.95" height="1.538" rx=".769"/><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" transform="rotate(90 25.153 74.422)" x="23.677" y="73.653" width="2.95" height="1.538" rx=".769"/><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" transform="rotate(90 25.153 35.51)" x="23.844" y="34.742" width="2.616" height="1.538" rx=".769"/><path d="M13.362 42.502c-.124-.543.198-.854.74-.69l2.321.704c.533.161.643.592.235.972l-.22.206 7.06 7.572a1.002 1.002 0 1 1-1.467 1.368l-7.06-7.573-.118.11c-.402.375-.826.248-.952-.304l-.54-2.365zM21.606 67.576c-.408.38-.84.255-.968-.295l-.551-2.363c-.127-.542.191-.852.725-.69l.288.089 3.027-9.901a1.002 1.002 0 1 1 1.918.586l-3.027 9.901.154.047c.525.16.627.592.213.977l-1.779 1.65z" fill="#FC8A51"/><ellipse stroke="#6B4FBB" stroke-width="2" fill="#FFF" cx="25.099" cy="54.768" rx="2.507" ry="2.512"/></g></g><path d="M52.697 96.966a1.004 1.004 0 0 1 2.006 0v4.038a1.004 1.004 0 0 1-2.006 0v-4.038zm0-9.044a1.004 1.004 0 0 1 2.006 0v4.038a1.004 1.004 0 0 1-2.006 0v-4.038zM86.29 96.966c0-.55.444-.996 1.002-.996.554 0 1.003.454 1.003.996v4.038a1.004 1.004 0 0 1-2.006 0v-4.038zm0-9.044c0-.55.444-.996 1.002-.996.554 0 1.003.453 1.003.996v4.038a1.004 1.004 0 0 1-2.006 0v-4.038z" fill="#E5E5E5"/></g></svg>
\ No newline at end of file
diff --git a/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js b/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js
new file mode 100644
index 00000000000..c60e77decce
--- /dev/null
+++ b/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import IntervalPatternInput from './components/interval_pattern_input';
+import TimezoneDropdown from './components/timezone_dropdown';
+import TargetBranchDropdown from './components/target_branch_dropdown';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const IntervalPatternInputComponent = Vue.extend(IntervalPatternInput);
+  const intervalPatternMount = document.getElementById('interval-pattern-input');
+  const initialCronInterval = intervalPatternMount ? intervalPatternMount.dataset.initialInterval : '';
+
+  new IntervalPatternInputComponent({
+    propsData: {
+      initialCronInterval,
+    },
+  }).$mount(intervalPatternMount);
+
+  const formElement = document.getElementById('new-pipeline-schedule-form');
+  gl.timezoneDropdown = new TimezoneDropdown();
+  gl.targetBranchDropdown = new TargetBranchDropdown();
+  gl.pipelineScheduleFieldErrors = new gl.GlFieldErrors(formElement);
+});
diff --git a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js b/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
new file mode 100644
index 00000000000..6584549ad06
--- /dev/null
+++ b/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import PipelineSchedulesCallout from './components/pipeline_schedules_callout';
+
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: '#pipeline-schedules-callout',
+  components: {
+    'pipeline-schedules-callout': PipelineSchedulesCallout,
+  },
+  render(createElement) {
+    return createElement('pipeline-schedules-callout');
+  },
+}));
diff --git a/app/assets/javascripts/pipelines.js b/app/assets/javascripts/pipelines.js
index 4252b615887..26a36ad54d1 100644
--- a/app/assets/javascripts/pipelines.js
+++ b/app/assets/javascripts/pipelines.js
@@ -1,42 +1,14 @@
-/* eslint-disable no-new, guard-for-in, no-restricted-syntax, no-continue, no-param-reassign, max-len */
+import LinkedTabs from './lib/utils/bootstrap_linked_tabs';
 
-require('./lib/utils/bootstrap_linked_tabs');
-
-((global) => {
-  class Pipelines {
-    constructor(options = {}) {
-      if (options.initTabs && options.tabsOptions) {
-        new global.LinkedTabs(options.tabsOptions);
-      }
-
-      if (options.pipelineStatusUrl) {
-        gl.utils.setCiStatusFavicon(options.pipelineStatusUrl);
-      }
-
-      this.addMarginToBuildColumns();
+export default class Pipelines {
+  constructor(options = {}) {
+    if (options.initTabs && options.tabsOptions) {
+      // eslint-disable-next-line no-new
+      new LinkedTabs(options.tabsOptions);
     }
 
-    addMarginToBuildColumns() {
-      this.pipelineGraph = document.querySelector('.js-pipeline-graph');
-
-      const secondChildBuildNodes = this.pipelineGraph.querySelectorAll('.build:nth-child(2)');
-
-      for (const buildNodeIndex in secondChildBuildNodes) {
-        const buildNode = secondChildBuildNodes[buildNodeIndex];
-        const firstChildBuildNode = buildNode.previousElementSibling;
-        if (!firstChildBuildNode || !firstChildBuildNode.matches('.build')) continue;
-        const multiBuildColumn = buildNode.closest('.stage-column');
-        const previousColumn = multiBuildColumn.previousElementSibling;
-        if (!previousColumn || !previousColumn.matches('.stage-column')) continue;
-        multiBuildColumn.classList.add('left-margin');
-        firstChildBuildNode.classList.add('left-connector');
-        const columnBuilds = previousColumn.querySelectorAll('.build');
-        if (columnBuilds.length === 1) previousColumn.classList.add('no-margin');
-      }
-
-      this.pipelineGraph.classList.remove('hidden');
+    if (options.pipelineStatusUrl) {
+      gl.utils.setCiStatusFavicon(options.pipelineStatusUrl);
     }
   }
-
-  global.Pipelines = Pipelines;
-})(window.gl || (window.gl = {}));
+}
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/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
new file mode 100644
index 00000000000..1f9e3d39779
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -0,0 +1,64 @@
+<script>
+  import getActionIcon from '../../../vue_shared/ci_action_icons';
+  import tooltipMixin from '../../../vue_shared/mixins/tooltip';
+
+  /**
+   * Renders either a cancel, retry or play icon pointing to the given path.
+   * TODO: Remove UJS from here and use an async request instead.
+   */
+  export default {
+    props: {
+      tooltipText: {
+        type: String,
+        required: true,
+      },
+
+      link: {
+        type: String,
+        required: true,
+      },
+
+      actionMethod: {
+        type: String,
+        required: true,
+      },
+
+      actionIcon: {
+        type: String,
+        required: true,
+      },
+    },
+
+    mixins: [
+      tooltipMixin,
+    ],
+
+    computed: {
+      actionIconSvg() {
+        return getActionIcon(this.actionIcon);
+      },
+
+      cssClass() {
+        return `js-${gl.text.dasherize(this.actionIcon)}`;
+      },
+    },
+  };
+</script>
+<template>
+  <a
+    :data-method="actionMethod"
+    :title="tooltipText"
+    :href="link"
+    ref="tooltip"
+    class="ci-action-icon-container"
+    data-toggle="tooltip"
+    data-container="body">
+
+    <i
+      class="ci-action-icon-wrapper"
+      :class="cssClass"
+      v-html="actionIconSvg"
+      aria-hidden="true"
+      />
+  </a>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
new file mode 100644
index 00000000000..19cafff4e1c
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
@@ -0,0 +1,56 @@
+<script>
+  import getActionIcon from '../../../vue_shared/ci_action_icons';
+  import tooltipMixin from '../../../vue_shared/mixins/tooltip';
+
+  /**
+   * Renders either a cancel, retry or play icon pointing to the given path.
+   * TODO: Remove UJS from here and use an async request instead.
+   */
+  export default {
+    props: {
+      tooltipText: {
+        type: String,
+        required: true,
+      },
+
+      link: {
+        type: String,
+        required: true,
+      },
+
+      actionMethod: {
+        type: String,
+        required: true,
+      },
+
+      actionIcon: {
+        type: String,
+        required: true,
+      },
+    },
+
+    mixins: [
+      tooltipMixin,
+    ],
+
+    computed: {
+      actionIconSvg() {
+        return getActionIcon(this.actionIcon);
+      },
+    },
+  };
+</script>
+<template>
+  <a
+    :data-method="actionMethod"
+    :title="tooltipText"
+    :href="link"
+    ref="tooltip"
+    rel="nofollow"
+    class="ci-action-icon-wrapper js-ci-status-icon"
+    data-toggle="tooltip"
+    data-container="body"
+    v-html="actionIconSvg"
+    aria-label="Job's action">
+  </a>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
new file mode 100644
index 00000000000..d597af8dfb5
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -0,0 +1,86 @@
+<script>
+  import jobNameComponent from './job_name_component.vue';
+  import jobComponent from './job_component.vue';
+  import tooltipMixin from '../../../vue_shared/mixins/tooltip';
+
+  /**
+   * Renders the dropdown for the pipeline graph.
+   *
+   * The following object should be provided as `job`:
+   *
+   * {
+   *   "id": 4256,
+   *   "name": "test",
+   *   "status": {
+   *     "icon": "icon_status_success",
+   *     "text": "passed",
+   *     "label": "passed",
+   *     "group": "success",
+   *     "details_path": "/root/ci-mock/builds/4256",
+   *     "action": {
+   *       "icon": "icon_action_retry",
+   *       "title": "Retry",
+   *       "path": "/root/ci-mock/builds/4256/retry",
+   *       "method": "post"
+   *     }
+   *   }
+   * }
+   */
+  export default {
+    props: {
+      job: {
+        type: Object,
+        required: true,
+      },
+    },
+
+    mixins: [
+      tooltipMixin,
+    ],
+
+    components: {
+      jobComponent,
+      jobNameComponent,
+    },
+
+    computed: {
+      tooltipText() {
+        return `${this.job.name} - ${this.job.status.label}`;
+      },
+    },
+  };
+</script>
+<template>
+  <div>
+    <button
+      type="button"
+      data-toggle="dropdown"
+      data-container="body"
+      class="dropdown-menu-toggle build-content"
+      :title="tooltipText"
+      ref="tooltip">
+
+      <job-name-component
+        :name="job.name"
+        :status="job.status" />
+
+      <span class="dropdown-counter-badge">
+        {{job.size}}
+      </span>
+    </button>
+
+    <ul class="dropdown-menu big-pipeline-graph-dropdown-menu js-grouped-pipeline-dropdown">
+      <li class="scrollable-menu">
+        <ul>
+          <li v-for="item in job.jobs">
+            <job-component
+              :job="item"
+              :is-dropdown="true"
+              css-class-job-name="mini-pipeline-graph-dropdown-item"
+              />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
new file mode 100644
index 00000000000..77cbaeb43ef
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -0,0 +1,77 @@
+<script>
+  import stageColumnComponent from './stage_column_component.vue';
+  import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
+  import '../../../flash';
+
+  export default {
+    props: {
+      isLoading: {
+        type: Boolean,
+        required: true,
+      },
+      pipeline: {
+        type: Object,
+        required: true,
+      },
+    },
+
+    components: {
+      stageColumnComponent,
+      loadingIcon,
+    },
+
+    computed: {
+      graph() {
+        return this.pipeline.details && this.pipeline.details.stages;
+      },
+    },
+
+    methods: {
+      capitalizeStageName(name) {
+        return name.charAt(0).toUpperCase() + name.slice(1);
+      },
+
+      isFirstColumn(index) {
+        return index === 0;
+      },
+
+      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;
+      },
+    },
+  };
+</script>
+<template>
+  <div class="build-content middle-block js-pipeline-graph">
+    <div class="pipeline-visualization pipeline-graph">
+      <div class="text-center">
+        <loading-icon
+          v-if="isLoading"
+          size="3"
+          />
+      </div>
+
+      <ul
+        v-if="!isLoading"
+        class="stage-column-list">
+        <stage-column-component
+          v-for="(stage, index) in graph"
+          :title="capitalizeStageName(stage.name)"
+          :jobs="stage.groups"
+          :key="stage.name"
+          :stage-connector-class="stageConnectorClass(index, stage)"
+          :is-first-column="isFirstColumn(index)"/>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
new file mode 100644
index 00000000000..b39c936101e
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -0,0 +1,124 @@
+<script>
+  import actionComponent from './action_component.vue';
+  import dropdownActionComponent from './dropdown_action_component.vue';
+  import jobNameComponent from './job_name_component.vue';
+  import tooltipMixin from '../../../vue_shared/mixins/tooltip';
+
+  /**
+   * Renders the badge for the pipeline graph and the job's dropdown.
+   *
+   * The following object should be provided as `job`:
+   *
+   * {
+   *   "id": 4256,
+   *   "name": "test",
+   *   "status": {
+   *     "icon": "icon_status_success",
+   *     "text": "passed",
+   *     "label": "passed",
+   *     "group": "success",
+   *     "details_path": "/root/ci-mock/builds/4256",
+   *     "action": {
+   *       "icon": "icon_action_retry",
+   *       "title": "Retry",
+   *       "path": "/root/ci-mock/builds/4256/retry",
+   *       "method": "post"
+   *     }
+   *   }
+   * }
+   */
+
+  export default {
+    props: {
+      job: {
+        type: Object,
+        required: true,
+      },
+
+      cssClassJobName: {
+        type: String,
+        required: false,
+        default: '',
+      },
+
+      isDropdown: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+
+    components: {
+      actionComponent,
+      dropdownActionComponent,
+      jobNameComponent,
+    },
+
+    mixins: [
+      tooltipMixin,
+    ],
+
+    computed: {
+      tooltipText() {
+        return `${this.job.name} - ${this.job.status.label}`;
+      },
+
+      /**
+       * Verifies if the provided job has an action path
+       *
+       * @return {Boolean}
+       */
+      hasAction() {
+        return this.job.status && this.job.status.action && this.job.status.action.path;
+      },
+    },
+  };
+</script>
+<template>
+  <div>
+    <a
+      v-if="job.status.details_path"
+      :href="job.status.details_path"
+      :title="tooltipText"
+      :class="cssClassJobName"
+      ref="tooltip"
+      data-toggle="tooltip"
+      data-container="body">
+
+      <job-name-component
+        :name="job.name"
+        :status="job.status"
+        />
+    </a>
+
+    <div
+      v-else
+      :title="tooltipText"
+      :class="cssClassJobName"
+      ref="tooltip"
+      data-toggle="tooltip"
+      data-container="body">
+
+      <job-name-component
+        :name="job.name"
+        :status="job.status"
+        />
+    </div>
+
+    <action-component
+      v-if="hasAction && !isDropdown"
+      :tooltip-text="job.status.action.title"
+      :link="job.status.action.path"
+      :action-icon="job.status.action.icon"
+      :action-method="job.status.action.method"
+      />
+
+    <dropdown-action-component
+      v-if="hasAction && isDropdown"
+      :tooltip-text="job.status.action.title"
+      :link="job.status.action.path"
+      :action-icon="job.status.action.icon"
+      :action-method="job.status.action.method"
+      />
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
new file mode 100644
index 00000000000..d8856e10668
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
@@ -0,0 +1,37 @@
+<script>
+  import ciIcon from '../../../vue_shared/components/ci_icon.vue';
+
+  /**
+   * Component that renders both the CI icon status and the job name.
+   * Used in
+   *  - Badge component
+   *  - Dropdown badge components
+   */
+  export default {
+    props: {
+      name: {
+        type: String,
+        required: true,
+      },
+
+      status: {
+        type: Object,
+        required: true,
+      },
+    },
+
+    components: {
+      ciIcon,
+    },
+  };
+</script>
+<template>
+  <span>
+    <ci-icon
+      :status="status" />
+
+    <span class="ci-status-text">
+      {{name}}
+    </span>
+  </span>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
new file mode 100644
index 00000000000..9b1bbb0906f
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -0,0 +1,83 @@
+<script>
+import jobComponent from './job_component.vue';
+import dropdownJobComponent from './dropdown_job_component.vue';
+
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+
+    jobs: {
+      type: Array,
+      required: true,
+    },
+
+    isFirstColumn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    stageConnectorClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  components: {
+    jobComponent,
+    dropdownJobComponent,
+  },
+
+  methods: {
+    firstJob(list) {
+      return list[0];
+    },
+
+    jobId(job) {
+      return `ci-badge-${job.name}`;
+    },
+
+    buildConnnectorClass(index) {
+      return index === 0 && !this.isFirstColumn ? 'left-connector' : '';
+    },
+  },
+};
+</script>
+<template>
+  <li
+    class="stage-column"
+    :class="stageConnectorClass">
+    <div class="stage-name">
+      {{title}}
+    </div>
+    <div class="builds-container">
+      <ul>
+        <li
+          v-for="(job, index) in jobs"
+          :key="job.id"
+          class="build"
+          :class="buildConnnectorClass(index)"
+          :id="jobId(job)">
+
+          <div class="curve"></div>
+
+          <job-component
+            v-if="job.size === 1"
+            :job="job"
+            css-class-job-name="build-content"
+            />
+
+          <dropdown-job-component
+            v-if="job.size > 1"
+            :job="job"
+            />
+
+        </li>
+      </ul>
+    </div>
+  </li>
+</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..b8457fae967
--- /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.web_url"
+      :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 2e485f951a1..7fc19fce1ff 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -14,7 +14,8 @@
  */
 
 /* global Flash */
-import StatusIconEntityMap from '../../ci_status_icons';
+import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
 export default {
   props: {
@@ -38,6 +39,10 @@ export default {
     };
   },
 
+  components: {
+    loadingIcon,
+  },
+
   updated() {
     if (this.dropdownContent.length > 0) {
       this.stopDropdownClickPropagation();
@@ -113,7 +118,7 @@ export default {
     },
 
     svgIcon() {
-      return StatusIconEntityMap[this.stage.status.icon];
+      return borderlessStatusIconEntityMap[this.stage.status.icon];
     },
   },
 };
@@ -153,15 +158,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/components/status.js b/app/assets/javascripts/pipelines/components/status.js
deleted file mode 100644
index 21a281af438..00000000000
--- a/app/assets/javascripts/pipelines/components/status.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import canceledSvg from 'icons/_icon_status_canceled.svg';
-import createdSvg from 'icons/_icon_status_created.svg';
-import failedSvg from 'icons/_icon_status_failed.svg';
-import manualSvg from 'icons/_icon_status_manual.svg';
-import pendingSvg from 'icons/_icon_status_pending.svg';
-import runningSvg from 'icons/_icon_status_running.svg';
-import skippedSvg from 'icons/_icon_status_skipped.svg';
-import successSvg from 'icons/_icon_status_success.svg';
-import warningSvg from 'icons/_icon_status_warning.svg';
-
-export default {
-  props: {
-    pipeline: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  data() {
-    const svgsDictionary = {
-      icon_status_canceled: canceledSvg,
-      icon_status_created: createdSvg,
-      icon_status_failed: failedSvg,
-      icon_status_manual: manualSvg,
-      icon_status_pending: pendingSvg,
-      icon_status_running: runningSvg,
-      icon_status_skipped: skippedSvg,
-      icon_status_success: successSvg,
-      icon_status_warning: warningSvg,
-    };
-
-    return {
-      svg: svgsDictionary[this.pipeline.details.status.icon],
-    };
-  },
-
-  computed: {
-    cssClasses() {
-      return `ci-status ci-${this.pipeline.details.status.group}`;
-    },
-
-    detailsPath() {
-      const { status } = this.pipeline.details;
-      return status.has_details ? status.details_path : false;
-    },
-
-    content() {
-      return `${this.svg} ${this.pipeline.details.status.text}`;
-    },
-  },
-  template: `
-    <td class="commit-link">
-      <a
-        :class="cssClasses"
-        :href="detailsPath"
-        v-html="content">
-      </a>
-    </td>
-  `,
-};
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..5aab25e0348
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import PipelinesMediator from './pipeline_details_mediatior';
+import pipelineGraph from './components/graph/graph_component.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const dataset = document.querySelector('.js-pipeline-details-vue').dataset;
+
+  const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
+
+  mediator.fetchPipeline();
+
+  const pipelineGraphApp = 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,
+        },
+      });
+    },
+  });
+
+  return pipelineGraphApp;
+});
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..b9a6d5ca5fc
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
@@ -0,0 +1,51 @@
+/* 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();
+    }
+
+    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.');
+  }
+}
diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js
index 9275b3efeb1..ba06d79102f 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(() => {
@@ -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,10 +282,11 @@ export default {
             />
         </div>
 
-        <gl-pagination
+        <table-pagination
           v-if="shouldRenderPagination"
           :change="change"
-          :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
new file mode 100644
index 00000000000..f1cc60c1ee0
--- /dev/null
+++ b/app/assets/javascripts/pipelines/services/pipeline_service.js
@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default class PipelineService {
+  constructor(endpoint) {
+    this.pipeline = Vue.resource(endpoint);
+  }
+
+  getPipeline() {
+    return this.pipeline.get();
+  }
+}
diff --git a/app/assets/javascripts/pipelines/services/pipelines_service.js b/app/assets/javascripts/pipelines/services/pipelines_service.js
index 255cd513490..b21f84b4545 100644
--- a/app/assets/javascripts/pipelines/services/pipelines_service.js
+++ b/app/assets/javascripts/pipelines/services/pipelines_service.js
@@ -40,6 +40,6 @@ export default class PipelinesService {
    * @return {Promise}
    */
   postAction(endpoint) {
-    return Vue.http.post(endpoint, {}, { emulateJSON: true });
+    return Vue.http.post(`${endpoint}.json`);
   }
 }
diff --git a/app/assets/javascripts/pipelines/stores/pipeline_store.js b/app/assets/javascripts/pipelines/stores/pipeline_store.js
new file mode 100644
index 00000000000..052e34a8aef
--- /dev/null
+++ b/app/assets/javascripts/pipelines/stores/pipeline_store.js
@@ -0,0 +1,11 @@
+export default class PipelineStore {
+  constructor() {
+    this.state = {};
+
+    this.state.pipeline = {};
+  }
+
+  storePipeline(pipeline = {}) {
+    this.state.pipeline = pipeline;
+  }
+}
diff --git a/app/assets/javascripts/preview_markdown.js b/app/assets/javascripts/preview_markdown.js
index 07eea98e737..4a3df2fd465 100644
--- a/app/assets/javascripts/preview_markdown.js
+++ b/app/assets/javascripts/preview_markdown.js
@@ -2,8 +2,9 @@
 
 // MarkdownPreview
 //
-// Handles toggling the "Write" and "Preview" tab clicks, rendering the preview,
-// and showing a warning when more than `x` users are referenced.
+// Handles toggling the "Write" and "Preview" tab clicks, rendering the preview
+// (including the explanation of slash commands), and showing a warning when
+// more than `x` users are referenced.
 //
 (function () {
   var lastTextareaPreviewed;
@@ -17,32 +18,45 @@
 
     // Minimum number of users referenced before triggering a warning
     MarkdownPreview.prototype.referenceThreshold = 10;
+    MarkdownPreview.prototype.emptyMessage = 'Nothing to preview.';
 
     MarkdownPreview.prototype.ajaxCache = {};
 
     MarkdownPreview.prototype.showPreview = function ($form) {
       var mdText;
       var preview = $form.find('.js-md-preview');
+      var url = preview.data('url');
       if (preview.hasClass('md-preview-loading')) {
         return;
       }
       mdText = $form.find('textarea.markdown-area').val();
 
       if (mdText.trim().length === 0) {
-        preview.text('Nothing to preview.');
+        preview.text(this.emptyMessage);
         this.hideReferencedUsers($form);
       } else {
         preview.addClass('md-preview-loading').text('Loading...');
-        this.fetchMarkdownPreview(mdText, (function (response) {
-          preview.removeClass('md-preview-loading').html(response.body);
+        this.fetchMarkdownPreview(mdText, url, (function (response) {
+          var body;
+          if (response.body.length > 0) {
+            body = response.body;
+          } else {
+            body = this.emptyMessage;
+          }
+
+          preview.removeClass('md-preview-loading').html(body);
           preview.renderGFM();
           this.renderReferencedUsers(response.references.users, $form);
+
+          if (response.references.commands) {
+            this.renderReferencedCommands(response.references.commands, $form);
+          }
         }).bind(this));
       }
     };
 
-    MarkdownPreview.prototype.fetchMarkdownPreview = function (text, success) {
-      if (!window.preview_markdown_path) {
+    MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) {
+      if (!url) {
         return;
       }
       if (text === this.ajaxCache.text) {
@@ -51,7 +65,7 @@
       }
       $.ajax({
         type: 'POST',
-        url: window.preview_markdown_path,
+        url: url,
         data: {
           text: text
         },
@@ -83,6 +97,22 @@
       }
     };
 
+    MarkdownPreview.prototype.hideReferencedCommands = function ($form) {
+      $form.find('.referenced-commands').hide();
+    };
+
+    MarkdownPreview.prototype.renderReferencedCommands = function (commands, $form) {
+      var referencedCommands;
+      referencedCommands = $form.find('.referenced-commands');
+      if (commands.length > 0) {
+        referencedCommands.html(commands);
+        referencedCommands.show();
+      } else {
+        referencedCommands.html('');
+        referencedCommands.hide();
+      }
+    };
+
     return MarkdownPreview;
   }());
 
@@ -137,6 +167,8 @@
     $form.find('.md-write-holder').show();
     $form.find('textarea.markdown-area').focus();
     $form.find('.md-preview-holder').hide();
+
+    markdownPreview.hideReferencedCommands($form);
   });
 
   $(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
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.js b/app/assets/javascripts/project.js
index f944fcc5a58..738e710deb9 100644
--- a/app/assets/javascripts/project.js
+++ b/app/assets/javascripts/project.js
@@ -112,7 +112,8 @@ import Cookies from 'js-cookie';
           toggleLabel: function(obj, $el) {
             return $el.text().trim();
           },
-          clicked: function(selected, $el, e) {
+          clicked: function(options) {
+            const { e } = options;
             e.preventDefault();
             if ($('input[name="ref"]').length) {
               var $form = $dropdown.closest('form');
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..04b381fe0e0 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -1,11 +1,9 @@
 /* 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); }; };
-
   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');
 
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_branch_access_dropdown.js b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js
index e7fff57ff45..42993a252c3 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js
@@ -19,7 +19,9 @@
             return 'Select';
           }
         },
-        clicked(item, $el, e) {
+        clicked(opts) {
+          const { e } = opts;
+
           e.preventDefault();
           onSelect();
         }
diff --git a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
index 1d4bb8a13d6..bc6110fcd4e 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
@@ -35,7 +35,8 @@ class ProtectedBranchDropdown {
         return _.escape(protectedBranch.id);
       },
       onFilter: this.toggleCreateNewButton.bind(this),
-      clicked: (item, $el, e) => {
+      clicked: (options) => {
+        const { $el, e } = options;
         e.preventDefault();
         this.onSelect();
       }
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_access_dropdown.js b/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js
index fff83f3af3b..d4c9a91a74a 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js
@@ -17,8 +17,8 @@ export default class ProtectedTagAccessDropdown {
         }
         return 'Select';
       },
-      clicked(item, $el, e) {
-        e.preventDefault();
+      clicked(options) {
+        options.e.preventDefault();
         onSelect();
       },
     });
diff --git a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
index 5ff4e443262..068e9698e1d 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
@@ -39,8 +39,8 @@ export default class ProtectedTagDropdown {
         return _.escape(protectedTag.id);
       },
       onFilter: this.toggleCreateNewButton.bind(this),
-      clicked: (item, $el, e) => {
-        e.preventDefault();
+      clicked: (options) => {
+        options.e.preventDefault();
         this.onSelect();
       },
     });
diff --git a/app/assets/javascripts/raven/index.js b/app/assets/javascripts/raven/index.js
new file mode 100644
index 00000000000..edc2293915f
--- /dev/null
+++ b/app/assets/javascripts/raven/index.js
@@ -0,0 +1,20 @@
+import RavenConfig from './raven_config';
+
+const index = function index() {
+  RavenConfig.init({
+    sentryDsn: gon.sentry_dsn,
+    currentUserId: gon.current_user_id,
+    whitelistUrls: [gon.gitlab_url],
+    isProduction: process.env.NODE_ENV,
+    release: gon.revision,
+    tags: {
+      revision: gon.revision,
+    },
+  });
+
+  return RavenConfig;
+};
+
+index();
+
+export default index;
diff --git a/app/assets/javascripts/raven/raven_config.js b/app/assets/javascripts/raven/raven_config.js
new file mode 100644
index 00000000000..ae54fa5f1a9
--- /dev/null
+++ b/app/assets/javascripts/raven/raven_config.js
@@ -0,0 +1,103 @@
+import Raven from 'raven-js';
+import $ from 'jquery';
+
+const IGNORE_ERRORS = [
+  // Random plugins/extensions
+  'top.GLOBALS',
+  // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error. html
+  'originalCreateNotification',
+  'canvas.contentDocument',
+  'MyApp_RemoveAllHighlights',
+  'http://tt.epicplay.com',
+  'Can\'t find variable: ZiteReader',
+  'jigsaw is not defined',
+  'ComboSearch is not defined',
+  'http://loading.retry.widdit.com/',
+  'atomicFindClose',
+  // Facebook borked
+  'fb_xd_fragment',
+  // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to
+  // reduce this. (thanks @acdha)
+  // See http://stackoverflow.com/questions/4113268
+  'bmi_SafeAddOnload',
+  'EBCallBackMessageReceived',
+  // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
+  'conduitPage',
+];
+
+const IGNORE_URLS = [
+  // Facebook flakiness
+  /graph\.facebook\.com/i,
+  // Facebook blocked
+  /connect\.facebook\.net\/en_US\/all\.js/i,
+  // Woopra flakiness
+  /eatdifferent\.com\.woopra-ns\.com/i,
+  /static\.woopra\.com\/js\/woopra\.js/i,
+  // Chrome extensions
+  /extensions\//i,
+  /^chrome:\/\//i,
+  // Other plugins
+  /127\.0\.0\.1:4001\/isrunning/i,  // Cacaoweb
+  /webappstoolbarba\.texthelp\.com\//i,
+  /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
+];
+
+const SAMPLE_RATE = 95;
+
+const RavenConfig = {
+  IGNORE_ERRORS,
+  IGNORE_URLS,
+  SAMPLE_RATE,
+  init(options = {}) {
+    this.options = options;
+
+    this.configure();
+    this.bindRavenErrors();
+    if (this.options.currentUserId) this.setUser();
+  },
+
+  configure() {
+    Raven.config(this.options.sentryDsn, {
+      release: this.options.release,
+      tags: this.options.tags,
+      whitelistUrls: this.options.whitelistUrls,
+      environment: this.options.isProduction ? 'production' : 'development',
+      ignoreErrors: this.IGNORE_ERRORS,
+      ignoreUrls: this.IGNORE_URLS,
+      shouldSendCallback: this.shouldSendSample.bind(this),
+    }).install();
+  },
+
+  setUser() {
+    Raven.setUserContext({
+      id: this.options.currentUserId,
+    });
+  },
+
+  bindRavenErrors() {
+    $(document).on('ajaxError.raven', this.handleRavenErrors);
+  },
+
+  handleRavenErrors(event, req, config, err) {
+    const error = err || req.statusText;
+    const responseText = req.responseText || 'Unknown response text';
+
+    Raven.captureMessage(error, {
+      extra: {
+        type: config.type,
+        url: config.url,
+        data: config.data,
+        status: req.status,
+        response: responseText,
+        error,
+        event,
+      },
+    });
+  },
+
+  shouldSendSample() {
+    return Math.random() * 100 <= this.SAMPLE_RATE;
+  },
+};
+
+export default RavenConfig;
diff --git a/app/assets/javascripts/ref_select_dropdown.js b/app/assets/javascripts/ref_select_dropdown.js
new file mode 100644
index 00000000000..215cd6fbdfd
--- /dev/null
+++ b/app/assets/javascripts/ref_select_dropdown.js
@@ -0,0 +1,46 @@
+class RefSelectDropdown {
+  constructor($dropdownButton, availableRefs) {
+    $dropdownButton.glDropdown({
+      data: availableRefs,
+      filterable: true,
+      filterByText: true,
+      remote: false,
+      fieldName: $dropdownButton.data('field-name'),
+      filterInput: 'input[type="search"]',
+      selectable: true,
+      isSelectable(branch, $el) {
+        return !$el.hasClass('is-active');
+      },
+      text(branch) {
+        return branch;
+      },
+      id(branch) {
+        return branch;
+      },
+      toggleLabel(branch) {
+        return branch;
+      },
+    });
+
+    const $dropdownContainer = $dropdownButton.closest('.dropdown');
+    const $fieldInput = $(`input[name="${$dropdownButton.data('field-name')}"]`, $dropdownContainer);
+    const $filterInput = $('input[type="search"]', $dropdownContainer);
+
+    $filterInput.on('keyup', (e) => {
+      const keyCode = e.keyCode || e.which;
+      if (keyCode !== 13) return;
+
+      const ref = $filterInput.val().trim();
+      if (ref === '') {
+        return;
+      }
+
+      $fieldInput.val(ref);
+      $('.dropdown-toggle-text', $dropdownButton).text(ref);
+
+      $dropdownContainer.removeClass('open');
+    });
+  }
+}
+
+export default RefSelectDropdown;
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/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/sidebar/components/assignees/assignee_title.js b/app/assets/javascripts/sidebar/components/assignees/assignee_title.js
new file mode 100644
index 00000000000..a9ad3708514
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.js
@@ -0,0 +1,41 @@
+export default {
+  name: 'AssigneeTitle',
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    numberOfAssignees: {
+      type: Number,
+      required: true,
+    },
+    editable: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    assigneeTitle() {
+      const assignees = this.numberOfAssignees;
+      return assignees > 1 ? `${assignees} Assignees` : 'Assignee';
+    },
+  },
+  template: `
+    <div class="title hide-collapsed">
+      {{assigneeTitle}}
+      <i
+        v-if="loading"
+        aria-hidden="true"
+        class="fa fa-spinner fa-spin block-loading"
+      />
+      <a
+        v-if="editable"
+        class="edit-link pull-right"
+        href="#"
+      >
+        Edit
+      </a>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.js b/app/assets/javascripts/sidebar/components/assignees/assignees.js
new file mode 100644
index 00000000000..7e5feac622c
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.js
@@ -0,0 +1,224 @@
+export default {
+  name: 'Assignees',
+  data() {
+    return {
+      defaultRenderCount: 5,
+      defaultMaxCounter: 99,
+      showLess: true,
+    };
+  },
+  props: {
+    rootPath: {
+      type: String,
+      required: true,
+    },
+    users: {
+      type: Array,
+      required: true,
+    },
+    editable: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    firstUser() {
+      return this.users[0];
+    },
+    hasMoreThanTwoAssignees() {
+      return this.users.length > 2;
+    },
+    hasMoreThanOneAssignee() {
+      return this.users.length > 1;
+    },
+    hasAssignees() {
+      return this.users.length > 0;
+    },
+    hasNoUsers() {
+      return !this.users.length;
+    },
+    hasOneUser() {
+      return this.users.length === 1;
+    },
+    renderShowMoreSection() {
+      return this.users.length > this.defaultRenderCount;
+    },
+    numberOfHiddenAssignees() {
+      return this.users.length - this.defaultRenderCount;
+    },
+    isHiddenAssignees() {
+      return this.numberOfHiddenAssignees > 0;
+    },
+    hiddenAssigneesLabel() {
+      return `+ ${this.numberOfHiddenAssignees} more`;
+    },
+    collapsedTooltipTitle() {
+      const maxRender = Math.min(this.defaultRenderCount, this.users.length);
+      const renderUsers = this.users.slice(0, maxRender);
+      const names = renderUsers.map(u => u.name);
+
+      if (this.users.length > maxRender) {
+        names.push(`+ ${this.users.length - maxRender} more`);
+      }
+
+      return names.join(', ');
+    },
+    sidebarAvatarCounter() {
+      let counter = `+${this.users.length - 1}`;
+
+      if (this.users.length > this.defaultMaxCounter) {
+        counter = `${this.defaultMaxCounter}+`;
+      }
+
+      return counter;
+    },
+  },
+  methods: {
+    assignSelf() {
+      this.$emit('assign-self');
+    },
+    toggleShowLess() {
+      this.showLess = !this.showLess;
+    },
+    renderAssignee(index) {
+      return !this.showLess || (index < this.defaultRenderCount && this.showLess);
+    },
+    avatarUrl(user) {
+      return user.avatar || user.avatar_url;
+    },
+    assigneeUrl(user) {
+      return `${this.rootPath}${user.username}`;
+    },
+    assigneeAlt(user) {
+      return `${user.name}'s avatar`;
+    },
+    assigneeUsername(user) {
+      return `@${user.username}`;
+    },
+    shouldRenderCollapsedAssignee(index) {
+      const firstTwo = this.users.length <= 2 && index <= 2;
+
+      return index === 0 || firstTwo;
+    },
+  },
+  template: `
+    <div>
+      <div
+        class="sidebar-collapsed-icon sidebar-collapsed-user"
+        :class="{ 'multiple-users': hasMoreThanOneAssignee, 'has-tooltip': hasAssignees }"
+        data-container="body"
+        data-placement="left"
+        :title="collapsedTooltipTitle"
+      >
+        <i
+          v-if="hasNoUsers"
+          aria-label="No Assignee"
+          class="fa fa-user"
+        />
+        <button
+          type="button"
+          class="btn-link"
+          v-for="(user, index) in users"
+          v-if="shouldRenderCollapsedAssignee(index)"
+        >
+          <img
+            width="24"
+            class="avatar avatar-inline s24"
+            :alt="assigneeAlt(user)"
+            :src="avatarUrl(user)"
+          />
+          <span class="author">
+            {{ user.name }}
+          </span>
+        </button>
+        <button
+          v-if="hasMoreThanTwoAssignees"
+          class="btn-link"
+          type="button"
+        >
+          <span
+            class="avatar-counter sidebar-avatar-counter"
+          >
+            {{ sidebarAvatarCounter }}
+          </span>
+        </button>
+      </div>
+      <div class="value hide-collapsed">
+        <template v-if="hasNoUsers">
+          <span class="assign-yourself no-value">
+            No assignee
+            <template v-if="editable">
+             -
+              <button
+                type="button"
+                class="btn-link"
+                @click="assignSelf"
+              >
+                assign yourself
+              </button>
+            </template>
+          </span>
+        </template>
+        <template v-else-if="hasOneUser">
+          <a
+            class="author_link bold"
+            :href="assigneeUrl(firstUser)"
+          >
+            <img
+              width="32"
+              class="avatar avatar-inline s32"
+              :alt="assigneeAlt(firstUser)"
+              :src="avatarUrl(firstUser)"
+            />
+            <span class="author">
+              {{ firstUser.name }}
+            </span>
+            <span class="username">
+              {{ assigneeUsername(firstUser) }}
+            </span>
+          </a>
+        </template>
+        <template v-else>
+          <div class="user-list">
+            <div
+              class="user-item"
+              v-for="(user, index) in users"
+              v-if="renderAssignee(index)"
+            >
+              <a
+                class="user-link has-tooltip"
+                data-placement="bottom"
+                :href="assigneeUrl(user)"
+                :data-title="user.name"
+              >
+                <img
+                  width="32"
+                  class="avatar avatar-inline s32"
+                  :alt="assigneeAlt(user)"
+                  :src="avatarUrl(user)"
+                />
+              </a>
+            </div>
+          </div>
+          <div
+            v-if="renderShowMoreSection"
+            class="user-list-more"
+          >
+            <button
+              type="button"
+              class="btn-link"
+              @click="toggleShowLess"
+            >
+              <template v-if="showLess">
+                {{ hiddenAssigneesLabel }}
+              </template>
+              <template v-else>
+                - show less
+              </template>
+            </button>
+          </div>
+        </template>
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
new file mode 100644
index 00000000000..da4abf0b68f
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
@@ -0,0 +1,85 @@
+/* global Flash */
+
+import AssigneeTitle from './assignee_title';
+import Assignees from './assignees';
+
+import Store from '../../stores/sidebar_store';
+import Mediator from '../../sidebar_mediator';
+
+import eventHub from '../../event_hub';
+
+export default {
+  name: 'SidebarAssignees',
+  data() {
+    return {
+      mediator: new Mediator(),
+      store: new Store(),
+      loading: false,
+      field: '',
+    };
+  },
+  components: {
+    'assignee-title': AssigneeTitle,
+    assignees: Assignees,
+  },
+  methods: {
+    assignSelf() {
+      // Notify gl dropdown that we are now assigning to current user
+      this.$el.parentElement.dispatchEvent(new Event('assignYourself'));
+
+      this.mediator.assignYourself();
+      this.saveAssignees();
+    },
+    saveAssignees() {
+      this.loading = true;
+
+      function setLoadingFalse() {
+        this.loading = false;
+      }
+
+      this.mediator.saveAssignees(this.field)
+        .then(setLoadingFalse.bind(this))
+        .catch(() => {
+          setLoadingFalse();
+          return new Flash('Error occurred when saving assignees');
+        });
+    },
+  },
+  created() {
+    this.removeAssignee = this.store.removeAssignee.bind(this.store);
+    this.addAssignee = this.store.addAssignee.bind(this.store);
+    this.removeAllAssignees = this.store.removeAllAssignees.bind(this.store);
+
+    // Get events from glDropdown
+    eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
+    eventHub.$on('sidebar.addAssignee', this.addAssignee);
+    eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);
+    eventHub.$on('sidebar.saveAssignees', this.saveAssignees);
+  },
+  beforeDestroy() {
+    eventHub.$off('sidebar.removeAssignee', this.removeAssignee);
+    eventHub.$off('sidebar.addAssignee', this.addAssignee);
+    eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees);
+    eventHub.$off('sidebar.saveAssignees', this.saveAssignees);
+  },
+  beforeMount() {
+    this.field = this.$el.dataset.field;
+  },
+  template: `
+    <div>
+      <assignee-title
+        :number-of-assignees="store.assignees.length"
+        :loading="loading || store.isFetching.assignees"
+        :editable="store.editable"
+      />
+      <assignees
+        v-if="!store.isFetching.assignees"
+        class="value"
+        :root-path="store.rootPath"
+        :users="store.assignees"
+        :editable="store.editable"
+        @assign-self="assignSelf"
+      />
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js
new file mode 100644
index 00000000000..0da265053bd
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js
@@ -0,0 +1,97 @@
+import stopwatchSvg from 'icons/_icon_stopwatch.svg';
+
+import '../../../lib/utils/pretty_time';
+
+export default {
+  name: 'time-tracking-collapsed-state',
+  props: {
+    showComparisonState: {
+      type: Boolean,
+      required: true,
+    },
+    showSpentOnlyState: {
+      type: Boolean,
+      required: true,
+    },
+    showEstimateOnlyState: {
+      type: Boolean,
+      required: true,
+    },
+    showNoTimeTrackingState: {
+      type: Boolean,
+      required: true,
+    },
+    timeSpentHumanReadable: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    timeEstimateHumanReadable: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    timeSpent() {
+      return this.abbreviateTime(this.timeSpentHumanReadable);
+    },
+    timeEstimate() {
+      return this.abbreviateTime(this.timeEstimateHumanReadable);
+    },
+    divClass() {
+      if (this.showComparisonState) {
+        return 'compare';
+      } else if (this.showEstimateOnlyState) {
+        return 'estimate-only';
+      } else if (this.showSpentOnlyState) {
+        return 'spend-only';
+      } else if (this.showNoTimeTrackingState) {
+        return 'no-tracking';
+      }
+
+      return '';
+    },
+    spanClass() {
+      if (this.showComparisonState) {
+        return '';
+      } else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
+        return 'bold';
+      } else if (this.showNoTimeTrackingState) {
+        return 'no-value';
+      }
+
+      return '';
+    },
+    text() {
+      if (this.showComparisonState) {
+        return `${this.timeSpent} / ${this.timeEstimate}`;
+      } else if (this.showEstimateOnlyState) {
+        return `-- / ${this.timeEstimate}`;
+      } else if (this.showSpentOnlyState) {
+        return `${this.timeSpent} / --`;
+      } else if (this.showNoTimeTrackingState) {
+        return 'None';
+      }
+
+      return '';
+    },
+  },
+  methods: {
+    abbreviateTime(timeStr) {
+      return gl.utils.prettyTime.abbreviateTime(timeStr);
+    },
+  },
+  template: `
+    <div class="sidebar-collapsed-icon">
+      ${stopwatchSvg}
+      <div class="time-tracking-collapsed-summary">
+        <div :class="divClass">
+          <span :class="spanClass">
+            {{ text }}
+          </span>
+        </div>
+      </div>
+    </div>
+    `,
+};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js
new file mode 100644
index 00000000000..40f5c89c5bb
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js
@@ -0,0 +1,98 @@
+import '../../../lib/utils/pretty_time';
+
+const prettyTime = gl.utils.prettyTime;
+
+export default {
+  name: 'time-tracking-comparison-pane',
+  props: {
+    timeSpent: {
+      type: Number,
+      required: true,
+    },
+    timeEstimate: {
+      type: Number,
+      required: true,
+    },
+    timeSpentHumanReadable: {
+      type: String,
+      required: true,
+    },
+    timeEstimateHumanReadable: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    parsedRemaining() {
+      const diffSeconds = this.timeEstimate - this.timeSpent;
+      return prettyTime.parseSeconds(diffSeconds);
+    },
+    timeRemainingHumanReadable() {
+      return prettyTime.stringifyTime(this.parsedRemaining);
+    },
+    timeRemainingTooltip() {
+      const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
+      return `${prefix} ${this.timeRemainingHumanReadable}`;
+    },
+    /* Diff values for comparison meter */
+    timeRemainingMinutes() {
+      return this.timeEstimate - this.timeSpent;
+    },
+    timeRemainingPercent() {
+      return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`;
+    },
+    timeRemainingStatusClass() {
+      return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
+    },
+    /* Parsed time values */
+    parsedEstimate() {
+      return prettyTime.parseSeconds(this.timeEstimate);
+    },
+    parsedSpent() {
+      return prettyTime.parseSeconds(this.timeSpent);
+    },
+  },
+  template: `
+    <div class="time-tracking-comparison-pane">
+      <div
+        class="compare-meter"
+        data-toggle="tooltip"
+        data-placement="top"
+        role="timeRemainingDisplay"
+        :aria-valuenow="timeRemainingTooltip"
+        :title="timeRemainingTooltip"
+        :data-original-title="timeRemainingTooltip"
+        :class="timeRemainingStatusClass"
+      >
+        <div
+          class="meter-container"
+          role="timeSpentPercent"
+          :aria-valuenow="timeRemainingPercent"
+        >
+          <div
+            :style="{ width: timeRemainingPercent }"
+            class="meter-fill"
+          />
+        </div>
+        <div class="compare-display-container">
+          <div class="compare-display pull-left">
+            <span class="compare-label">
+              Spent
+            </span>
+            <span class="compare-value spent">
+              {{ timeSpentHumanReadable }}
+            </span>
+          </div>
+          <div class="compare-display estimated pull-right">
+            <span class="compare-label">
+              Est
+            </span>
+            <span class="compare-value">
+              {{ timeEstimateHumanReadable }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.js b/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.js
new file mode 100644
index 00000000000..ad1b9179db0
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.js
@@ -0,0 +1,17 @@
+export default {
+  name: 'time-tracking-estimate-only-pane',
+  props: {
+    timeEstimateHumanReadable: {
+      type: String,
+      required: true,
+    },
+  },
+  template: `
+    <div class="time-tracking-estimate-only-pane">
+      <span class="bold">
+        Estimated:
+      </span>
+      {{ timeEstimateHumanReadable }}
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.js b/app/assets/javascripts/sidebar/components/time_tracking/help_state.js
new file mode 100644
index 00000000000..b2a77462fe0
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.js
@@ -0,0 +1,44 @@
+export default {
+  name: 'time-tracking-help-state',
+  props: {
+    rootPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    href() {
+      return `${this.rootPath}help/workflow/time_tracking.md`;
+    },
+  },
+  template: `
+    <div class="time-tracking-help-state">
+      <div class="time-tracking-info">
+        <h4>
+          Track time with slash commands
+        </h4>
+        <p>
+          Slash commands can be used in the issues description and comment boxes.
+        </p>
+        <p>
+          <code>
+            /estimate
+          </code>
+          will update the estimated time with the latest command.
+        </p>
+        <p>
+          <code>
+            /spend
+          </code>
+          will update the sum of the time spent.
+        </p>
+        <a
+          class="btn btn-default learn-more-button"
+          :href="href"
+        >
+          Learn more
+        </a>
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.js b/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.js
new file mode 100644
index 00000000000..d1dd1dcdd27
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.js
@@ -0,0 +1,10 @@
+export default {
+  name: 'time-tracking-no-tracking-pane',
+  template: `
+    <div class="time-tracking-no-tracking-pane">
+      <span class="no-value">
+        No estimate or time spent
+      </span>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js
new file mode 100644
index 00000000000..244b67b3ad9
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js
@@ -0,0 +1,51 @@
+import '~/smart_interval';
+
+import timeTracker from './time_tracker';
+
+import Store from '../../stores/sidebar_store';
+import Mediator from '../../sidebar_mediator';
+
+export default {
+  data() {
+    return {
+      mediator: new Mediator(),
+      store: new Store(),
+    };
+  },
+  components: {
+    'issuable-time-tracker': timeTracker,
+  },
+  methods: {
+    listenForSlashCommands() {
+      $(document).on('ajax:success', '.gfm-form', this.slashCommandListened);
+    },
+    slashCommandListened(e, data) {
+      const subscribedCommands = ['spend_time', 'time_estimate'];
+      let changedCommands;
+      if (data !== undefined) {
+        changedCommands = data.commands_changes
+          ? Object.keys(data.commands_changes)
+          : [];
+      } else {
+        changedCommands = [];
+      }
+      if (changedCommands && _.intersection(subscribedCommands, changedCommands).length) {
+        this.mediator.fetch();
+      }
+    },
+  },
+  mounted() {
+    this.listenForSlashCommands();
+  },
+  template: `
+    <div class="block">
+      <issuable-time-tracker
+        :time_estimate="store.timeEstimate"
+        :time_spent="store.totalTimeSpent"
+        :human_time_estimate="store.humanTimeEstimate"
+        :human_time_spent="store.humanTotalTimeSpent"
+        :rootPath="store.rootPath"
+      />
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.js b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.js
new file mode 100644
index 00000000000..bf987562647
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.js
@@ -0,0 +1,15 @@
+export default {
+  name: 'time-tracking-spent-only-pane',
+  props: {
+    timeSpentHumanReadable: {
+      type: String,
+      required: true,
+    },
+  },
+  template: `
+    <div class="time-tracking-spend-only-pane">
+      <span class="bold">Spent:</span>
+      {{ timeSpentHumanReadable }}
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.js b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.js
new file mode 100644
index 00000000000..ed0d71a4f79
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.js
@@ -0,0 +1,163 @@
+import timeTrackingHelpState from './help_state';
+import timeTrackingCollapsedState from './collapsed_state';
+import timeTrackingSpentOnlyPane from './spent_only_pane';
+import timeTrackingNoTrackingPane from './no_tracking_pane';
+import timeTrackingEstimateOnlyPane from './estimate_only_pane';
+import timeTrackingComparisonPane from './comparison_pane';
+
+import eventHub from '../../event_hub';
+
+export default {
+  name: 'issuable-time-tracker',
+  props: {
+    time_estimate: {
+      type: Number,
+      required: true,
+    },
+    time_spent: {
+      type: Number,
+      required: true,
+    },
+    human_time_estimate: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    human_time_spent: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showHelp: false,
+    };
+  },
+  components: {
+    'time-tracking-collapsed-state': timeTrackingCollapsedState,
+    'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
+    'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
+    'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
+    'time-tracking-comparison-pane': timeTrackingComparisonPane,
+    'time-tracking-help-state': timeTrackingHelpState,
+  },
+  computed: {
+    timeSpent() {
+      return this.time_spent;
+    },
+    timeEstimate() {
+      return this.time_estimate;
+    },
+    timeEstimateHumanReadable() {
+      return this.human_time_estimate;
+    },
+    timeSpentHumanReadable() {
+      return this.human_time_spent;
+    },
+    hasTimeSpent() {
+      return !!this.timeSpent;
+    },
+    hasTimeEstimate() {
+      return !!this.timeEstimate;
+    },
+    showComparisonState() {
+      return this.hasTimeEstimate && this.hasTimeSpent;
+    },
+    showEstimateOnlyState() {
+      return this.hasTimeEstimate && !this.hasTimeSpent;
+    },
+    showSpentOnlyState() {
+      return this.hasTimeSpent && !this.hasTimeEstimate;
+    },
+    showNoTimeTrackingState() {
+      return !this.hasTimeEstimate && !this.hasTimeSpent;
+    },
+    showHelpState() {
+      return !!this.showHelp;
+    },
+  },
+  methods: {
+    toggleHelpState(show) {
+      this.showHelp = show;
+    },
+    update(data) {
+      this.time_estimate = data.time_estimate;
+      this.time_spent = data.time_spent;
+      this.human_time_estimate = data.human_time_estimate;
+      this.human_time_spent = data.human_time_spent;
+    },
+  },
+  created() {
+    eventHub.$on('timeTracker:updateData', this.update);
+  },
+  template: `
+    <div
+      class="time_tracker time-tracking-component-wrap"
+      v-cloak
+    >
+      <time-tracking-collapsed-state
+        :show-comparison-state="showComparisonState"
+        :show-no-time-tracking-state="showNoTimeTrackingState"
+        :show-help-state="showHelpState"
+        :show-spent-only-state="showSpentOnlyState"
+        :show-estimate-only-state="showEstimateOnlyState"
+        :time-spent-human-readable="timeSpentHumanReadable"
+        :time-estimate-human-readable="timeEstimateHumanReadable"
+      />
+      <div class="title hide-collapsed">
+        Time tracking
+        <div
+          class="help-button pull-right"
+          v-if="!showHelpState"
+          @click="toggleHelpState(true)"
+        >
+            <i
+              class="fa fa-question-circle"
+              aria-hidden="true"
+            />
+        </div>
+        <div
+          class="close-help-button pull-right"
+          v-if="showHelpState"
+          @click="toggleHelpState(false)"
+        >
+          <i
+            class="fa fa-close"
+            aria-hidden="true"
+          />
+        </div>
+      </div>
+      <div class="time-tracking-content hide-collapsed">
+        <time-tracking-estimate-only-pane
+          v-if="showEstimateOnlyState"
+          :time-estimate-human-readable="timeEstimateHumanReadable"
+        />
+        <time-tracking-spent-only-pane
+          v-if="showSpentOnlyState"
+          :time-spent-human-readable="timeSpentHumanReadable"
+        />
+        <time-tracking-no-tracking-pane
+          v-if="showNoTimeTrackingState"
+        />
+        <time-tracking-comparison-pane
+          v-if="showComparisonState"
+          :time-estimate="timeEstimate"
+          :time-spent="timeSpent"
+          :time-spent-human-readable="timeSpentHumanReadable"
+          :time-estimate-human-readable="timeEstimateHumanReadable"
+        />
+        <transition name="help-state-toggle">
+          <time-tracking-help-state
+            v-if="showHelpState"
+            :rootPath="rootPath"
+          />
+        </transition>
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/sidebar/event_hub.js b/app/assets/javascripts/sidebar/event_hub.js
new file mode 100644
index 00000000000..f35506fd5de
--- /dev/null
+++ b/app/assets/javascripts/sidebar/event_hub.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+
+const eventHub = new Vue();
+
+// TODO: remove eventHub hack after code splitting refactor
+window.emitSidebarEvent = (...args) => eventHub.$emit(...args);
+
+export default eventHub;
diff --git a/app/assets/javascripts/sidebar/services/sidebar_service.js b/app/assets/javascripts/sidebar/services/sidebar_service.js
new file mode 100644
index 00000000000..5a82d01dc41
--- /dev/null
+++ b/app/assets/javascripts/sidebar/services/sidebar_service.js
@@ -0,0 +1,28 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default class SidebarService {
+  constructor(endpoint) {
+    if (!SidebarService.singleton) {
+      this.endpoint = endpoint;
+
+      SidebarService.singleton = this;
+    }
+
+    return SidebarService.singleton;
+  }
+
+  get() {
+    return Vue.http.get(this.endpoint);
+  }
+
+  update(key, data) {
+    return Vue.http.put(this.endpoint, {
+      [key]: data,
+    }, {
+      emulateJSON: true,
+    });
+  }
+}
diff --git a/app/assets/javascripts/sidebar/sidebar_bundle.js b/app/assets/javascripts/sidebar/sidebar_bundle.js
new file mode 100644
index 00000000000..2b02af87d8a
--- /dev/null
+++ b/app/assets/javascripts/sidebar/sidebar_bundle.js
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import sidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
+import sidebarAssignees from './components/assignees/sidebar_assignees';
+
+import Mediator from './sidebar_mediator';
+
+function domContentLoaded() {
+  const mediator = new Mediator(gl.sidebarOptions);
+  mediator.fetch();
+
+  const sidebarAssigneesEl = document.querySelector('#js-vue-sidebar-assignees');
+
+  // Only create the sidebarAssignees vue app if it is found in the DOM
+  // We currently do not use sidebarAssignees for the MR page
+  if (sidebarAssigneesEl) {
+    new Vue(sidebarAssignees).$mount(sidebarAssigneesEl);
+  }
+
+  new Vue(sidebarTimeTracking).$mount('#issuable-time-tracker');
+}
+
+document.addEventListener('DOMContentLoaded', domContentLoaded);
+
+export default domContentLoaded;
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
new file mode 100644
index 00000000000..5ccfb4ee9c1
--- /dev/null
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -0,0 +1,38 @@
+/* global Flash */
+
+import Service from './services/sidebar_service';
+import Store from './stores/sidebar_store';
+
+export default class SidebarMediator {
+  constructor(options) {
+    if (!SidebarMediator.singleton) {
+      this.store = new Store(options);
+      this.service = new Service(options.endpoint);
+      SidebarMediator.singleton = this;
+    }
+
+    return SidebarMediator.singleton;
+  }
+
+  assignYourself() {
+    this.store.addAssignee(this.store.currentUser);
+  }
+
+  saveAssignees(field) {
+    const selected = this.store.assignees.map(u => u.id);
+
+    // If there are no ids, that means we have to unassign (which is id = 0)
+    // And it only accepts an array, hence [0]
+    return this.service.update(field, selected.length === 0 ? [0] : selected);
+  }
+
+  fetch() {
+    this.service.get()
+      .then((response) => {
+        const data = response.json();
+        this.store.setAssigneeData(data);
+        this.store.setTimeTrackingData(data);
+      })
+      .catch(() => new Flash('Error occured when fetching sidebar data'));
+  }
+}
diff --git a/app/assets/javascripts/sidebar/stores/sidebar_store.js b/app/assets/javascripts/sidebar/stores/sidebar_store.js
new file mode 100644
index 00000000000..3356dd0191f
--- /dev/null
+++ b/app/assets/javascripts/sidebar/stores/sidebar_store.js
@@ -0,0 +1,56 @@
+export default class SidebarStore {
+  constructor(store) {
+    if (!SidebarStore.singleton) {
+      const { currentUser, rootPath, editable } = store;
+      this.currentUser = currentUser;
+      this.rootPath = rootPath;
+      this.editable = editable;
+      this.timeEstimate = 0;
+      this.totalTimeSpent = 0;
+      this.humanTimeEstimate = '';
+      this.humanTimeSpent = '';
+      this.assignees = [];
+      this.isFetching = {
+        assignees: true,
+      };
+
+      SidebarStore.singleton = this;
+    }
+
+    return SidebarStore.singleton;
+  }
+
+  setAssigneeData(data) {
+    this.isFetching.assignees = false;
+    if (data.assignees) {
+      this.assignees = data.assignees;
+    }
+  }
+
+  setTimeTrackingData(data) {
+    this.timeEstimate = data.time_estimate;
+    this.totalTimeSpent = data.total_time_spent;
+    this.humanTimeEstimate = data.human_time_estimate;
+    this.humanTotalTimeSpent = data.human_total_time_spent;
+  }
+
+  addAssignee(assignee) {
+    if (!this.findAssignee(assignee)) {
+      this.assignees.push(assignee);
+    }
+  }
+
+  findAssignee(findAssignee) {
+    return this.assignees.filter(assignee => assignee.id === findAssignee.id)[0];
+  }
+
+  removeAssignee(removeAssignee) {
+    if (removeAssignee) {
+      this.assignees = this.assignees.filter(assignee => assignee.id !== removeAssignee.id);
+    }
+  }
+
+  removeAllAssignees() {
+    this.assignees = [];
+  }
+}
diff --git a/app/assets/javascripts/signin_tabs_memoizer.js b/app/assets/javascripts/signin_tabs_memoizer.js
index d811d1cd53a..2587facc582 100644
--- a/app/assets/javascripts/signin_tabs_memoizer.js
+++ b/app/assets/javascripts/signin_tabs_memoizer.js
@@ -1,5 +1,7 @@
 /* eslint no-param-reassign: ["error", { "props": false }]*/
 /* eslint no-new: "off" */
+import AccessorUtilities from './lib/utils/accessor';
+
 ((global) => {
   /**
    * Memorize the last selected tab after reloading a page.
@@ -9,6 +11,8 @@
     constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
       this.currentTabKey = currentTabKey;
       this.tabSelector = tabSelector;
+      this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+
       this.bootstrap();
     }
 
@@ -37,11 +41,15 @@
     }
 
     saveData(val) {
-      localStorage.setItem(this.currentTabKey, val);
+      if (!this.isLocalStorageAvailable) return undefined;
+
+      return window.localStorage.setItem(this.currentTabKey, val);
     }
 
     readData() {
-      return localStorage.getItem(this.currentTabKey);
+      if (!this.isLocalStorageAvailable) return null;
+
+      return window.localStorage.getItem(this.currentTabKey);
     }
   }
 
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/subbable_resource.js b/app/assets/javascripts/subbable_resource.js
deleted file mode 100644
index d8191605128..00000000000
--- a/app/assets/javascripts/subbable_resource.js
+++ /dev/null
@@ -1,51 +0,0 @@
-(() => {
-/*
-*   SubbableResource can be extended to provide a pubsub-style service for one-off REST
-*   calls. Subscribe by passing a callback or render method you will use to handle responses.
- *
-* */
-
-  class SubbableResource {
-    constructor(resourcePath) {
-      this.endpoint = resourcePath;
-
-      // TODO: Switch to axios.create
-      this.resource = $.ajax;
-      this.subscribers = [];
-    }
-
-    subscribe(callback) {
-      this.subscribers.push(callback);
-    }
-
-    publish(newResponse) {
-      const responseCopy = _.extend({}, newResponse);
-      this.subscribers.forEach((fn) => {
-        fn(responseCopy);
-      });
-      return newResponse;
-    }
-
-    get(payload) {
-      return this.resource(payload)
-        .then(data => this.publish(data));
-    }
-
-    post(payload) {
-      return this.resource(payload)
-        .then(data => this.publish(data));
-    }
-
-    put(payload) {
-      return this.resource(payload)
-        .then(data => this.publish(data));
-    }
-
-    delete(payload) {
-      return this.resource(payload)
-        .then(data => this.publish(data));
-    }
-  }
-
-  gl.SubbableResource = SubbableResource;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/subscription_select.js b/app/assets/javascripts/subscription_select.js
index 8b25f43ffc7..0cd591c7320 100644
--- a/app/assets/javascripts/subscription_select.js
+++ b/app/assets/javascripts/subscription_select.js
@@ -19,8 +19,8 @@
               return label;
             };
           })(this),
-          clicked: function(item, $el, e) {
-            return e.preventDefault();
+          clicked: function(options) {
+            return options.e.preventDefault();
           },
           id: function(obj, el) {
             return $(el).data("id");
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/test.js b/app/assets/javascripts/test.js
new file mode 100644
index 00000000000..c4c7918a68f
--- /dev/null
+++ b/app/assets/javascripts/test.js
@@ -0,0 +1 @@
+$.fx.off = true;
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/users/calendar.js b/app/assets/javascripts/users/calendar.js
index 754d448564f..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;
@@ -168,15 +166,23 @@ import d3 from 'd3';
     };
 
     Calendar.prototype.renderKey = function() {
-      var keyColors;
-      keyColors = ['#ededed', this.colorKey(0), this.colorKey(1), this.colorKey(2), this.colorKey(3)];
-      return this.svg.append('g').attr('transform', "translate(18, " + (this.daySizeWithSpace * 8 + 16) + ")").selectAll('rect').data(keyColors).enter().append('rect').attr('width', this.daySize).attr('height', this.daySize).attr('x', (function(_this) {
-        return function(color, i) {
-          return _this.daySizeWithSpace * i;
-        };
-      })(this)).attr('y', 0).attr('fill', function(color) {
-        return color;
-      });
+      const keyValues = ['no contributions', '1-9 contributions', '10-19 contributions', '20-29 contributions', '30+ contributions'];
+      const keyColors = ['#ededed', this.colorKey(0), this.colorKey(1), this.colorKey(2), this.colorKey(3)];
+
+      this.svg.append('g')
+        .attr('transform', `translate(18, ${this.daySizeWithSpace * 8 + 16})`)
+        .selectAll('rect')
+          .data(keyColors)
+          .enter()
+          .append('rect')
+            .attr('width', this.daySize)
+            .attr('height', this.daySize)
+            .attr('x', (color, i) => this.daySizeWithSpace * i)
+            .attr('y', 0)
+            .attr('fill', color => color)
+            .attr('class', 'js-tooltip')
+            .attr('title', (color, i) => keyValues[i])
+            .attr('data-container', 'body');
     };
 
     Calendar.prototype.initColor = function() {
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 68cf9ced3ef..ec45253e50b 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -1,459 +1,703 @@
 /* eslint-disable func-names, space-before-function-paren, one-var, no-var, prefer-rest-params, wrap-iife, quotes, max-len, one-var-declaration-per-line, vars-on-top, prefer-arrow-callback, consistent-return, comma-dangle, object-shorthand, no-shadow, no-unused-vars, no-else-return, no-self-compare, prefer-template, no-unused-expressions, no-lonely-if, yoda, prefer-spread, no-void, camelcase, no-param-reassign */
 /* global Issuable */
-/* global ListUser */
-
-(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);
-        }
+/* global emitSidebarEvent */
+
+// TODO: remove eventHub hack after code splitting refactor
+window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
+
+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');
+
+        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 (!els) {
-        $els = $('.js-user-search');
+        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') || selectedIdDefault;
-
-          var updateIssueBoardsIssue = function () {
-            $loading.removeClass('hidden').fadeIn();
-            gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
-              .then(function () {
-                $loading.fadeOut();
-              })
-              .catch(function () {
-                $loading.fadeOut();
-              });
-          };
+      const getSelectedUserInputs = function() {
+        return $selectbox
+          .find(`input[name="${$dropdown.data('field-name')}"]`);
+      };
 
-          $('.assign-to-me-link').on('click', (e) => {
-            e.preventDefault();
-            $(e.currentTarget).hide();
-            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');
-          });
+      const getSelected = function() {
+        return getSelectedUserInputs()
+          .map((index, input) => parseInt(input.value, 10))
+          .get();
+      };
 
-          $block.on('click', '.js-assign-yourself', function(e) {
-            e.preventDefault();
+      const checkMaxSelect = function() {
+        const maxSelect = $dropdown.data('max-select');
+        if (maxSelect) {
+          const selected = getSelected();
 
-            if ($dropdown.hasClass('js-issue-board-sidebar')) {
-              gl.issueBoards.boardStoreIssueSet('assignee', new ListUser({
-                id: _this.currentUser.id,
-                username: _this.currentUser.username,
-                name: _this.currentUser.name,
-                avatar_url: _this.currentUser.avatar_url
-              }));
+          if (selected.length > maxSelect) {
+            const firstSelectedId = selected[0];
+            const firstSelected = $dropdown.closest('.selectbox')
+              .find(`input[name='${$dropdown.data('field-name')}'][value=${firstSelectedId}]`);
 
-              updateIssueBoardsIssue();
-            } else {
-              return assignTo(_this.currentUser.id);
-            }
-          });
-          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();
-              $selectbox.hide();
-              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));
+            firstSelected.remove();
+            emitSidebarEvent('sidebar.removeAssignee', {
+              id: firstSelectedId,
             });
-          };
-          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) {
-                var anyUser, index, j, len, name, obj, 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) {
-                    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);
-                  }
-                }
-                if (showDivider) {
-                  users.splice(showDivider, 0, "divider");
-                }
+          }
+        }
+      };
 
-                callback(users);
-                if (showMenuAbove) {
-                  $dropdown.data('glDropdown').positionMenuAbove();
-                }
+      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`;
+        }
+      };
+
+      $('.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');
+        }
+      });
+
+      $block.on('click', '.js-assign-yourself', (e) => {
+        e.preventDefault();
+        return assignTo(_this.currentUser.id);
+      });
+
+      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,
+                };
               });
-            },
-            filterable: true,
-            filterRemote: true,
-            search: {
-              fields: ['name', 'username']
-            },
-            selectable: true,
-            fieldName: $dropdown.data('field-name'),
-            toggleLabel: function(selected, el) {
-              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;
+
+            users = data.concat(selectedUsers);
+          }
+
+          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;
                 }
-              } else {
-                $dropdown.find('.dropdown-toggle-text').addClass('is-default');
-                return defaultLabel;
               }
-            },
-            defaultLabel: defaultLabel,
-            inputId: 'issue_assignee_id',
-            hidden: function(e) {
-              $selectbox.hide();
-              // display:block overrides the hide-collapse rule
-              return $value.css('display', '');
-            },
-            vue: $dropdown.hasClass('js-issue-board-sidebar'),
-            clicked: function(user, $el, e) {
-              var isIssueIndex, isMRIndex, page, selected, isSelecting;
-              page = $('body').data('page');
-              isIssueIndex = page === 'projects:issues:index';
-              isMRIndex = (page === page && page === 'projects:merge_requests:index');
-              isSelecting = (user.id !== selectedId);
-              selectedId = isSelecting ? user.id : selectedIdDefault;
-              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 (showNullUser) {
+              showDivider += 1;
+              users.unshift({
+                beforeDivider: true,
+                name: 'Unassigned',
+                id: 0
+              });
+            }
+            if (showAnyUser) {
+              showDivider += 1;
+              name = showAnyUser;
+              if (name === true) {
+                name = 'Any User';
               }
-              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-issue-board-sidebar')) {
-                if (user.id && isSelecting) {
-                  gl.issueBoards.boardStoreIssueSet('assignee', new ListUser({
-                    id: user.id,
-                    username: user.username,
-                    name: user.name,
-                    avatar_url: user.avatar_url
-                  }));
-                } else {
-                  gl.issueBoards.boardStoreIssueDelete('assignee');
+              anyUser = {
+                beforeDivider: true,
+                name: name,
+                id: null
+              };
+              users.unshift(anyUser);
+            }
+
+            if (showDivider) {
+              users.splice(showDivider, 0, 'divider');
+            }
+
+            if ($dropdown.hasClass('js-multiselect')) {
+              const selected = getSelected().filter(i => i !== 0);
+
+              if (selected.length > 0) {
+                if ($dropdown.data('dropdown-header')) {
+                  showDivider += 1;
+                  users.splice(showDivider, 0, {
+                    header: $dropdown.data('dropdown-header'),
+                  });
                 }
 
-                updateIssueBoardsIssue();
-              } else {
-                selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
-                return assignTo(selected);
-              }
-            },
-            id: function (user) {
-              return user.id;
-            },
-            opened: function(e) {
-              const $el = $(e.currentTarget);
-              if ($dropdown.hasClass('js-issue-board-sidebar')) {
-                selectedId = parseInt($dropdown[0].dataset.selected, 10) || selectedIdDefault;
+                const selectedUsers = users
+                  .filter(u => selected.indexOf(u.id) !== -1)
+                  .sort((a, b) => a.name > b.name);
+
+                users = users.filter(u => selected.indexOf(u.id) === -1);
+
+                selectedUsers.forEach((selectedUser) => {
+                  showDivider += 1;
+                  users.splice(showDivider, 0, selectedUser);
+                });
+
+                users.splice(showDivider + 1, 0, 'divider');
               }
-              $el.find('.is-active').removeClass('is-active');
-              $el.find(`li[data-user-id="${selectedId}"] .dropdown-menu-user-link`).addClass('is-active');
-            },
-            renderRow: function(user) {
-              var avatar, img, listClosingTags, listWithName, listWithUserName, selected, username;
-              username = user.username ? "@" + user.username : "";
-              avatar = user.avatar_url ? user.avatar_url : false;
-              selected = user.id === parseInt(selectedId, 10) ? "is-active" : "";
-              img = "";
-              if (user.beforeDivider != null) {
-                "<li> <a href='#' class='" + selected + "'> " + user.name + " </a> </li>";
-              } else {
-                if (avatar) {
-                  img = "<img src='" + avatar + "' class='avatar avatar-inline' width='30' />";
-                }
+            }
+          }
+
+          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 (this.multiSelect) {
+            return getMultiSelectDropdownTitle(selected, $(el).hasClass('is-active'));
+          }
+
+          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 (!$dropdown.data('always-show-selectbox')) {
+            $selectbox.hide();
+
+            // 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);
+
+              // Remove unassigned selection (if it was previously selected)
+              const unassignedSelected = $dropdown.closest('.selectbox')
+                .find("input[name='" + ($dropdown.data('field-name')) + "'][value=0]");
+
+              if (unassignedSelected) {
+                unassignedSelected.remove();
               }
-              // split into three parts so we can remove the username section if nessesary
-              listWithName = "<li data-user-id=" + user.id + "> <a href='#' class='dropdown-menu-user-link " + selected + "'> " + img + " <strong class='dropdown-menu-user-full-name'> " + user.name + " </strong>";
-              listWithUserName = "<span class='dropdown-menu-user-username'> " + username + " </span>";
-              listClosingTags = "</a> </li>";
-              if (username === '') {
-                listWithUserName = '';
+            } else {
+              if (previouslySelected.length === 0) {
+              // Select unassigned because there is no more selected users
+                this.addInput($dropdown.data('field-name'), 0, {});
               }
-              return listWithName + listWithUserName + listClosingTags;
+
+              // User unselected
+              emitSidebarEvent('sidebar.removeAssignee', user);
             }
-          });
-        };
-      })(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 (getSelected().find(u => u === gon.current_user_id)) {
+              $('.assign-to-me-link').hide();
+            } else {
+              $('.assign-to-me-link').show();
             }
-          });
-        };
-      })(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);
-      }
-    };
+          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();
 
-    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>";
-    };
+            const isSelecting = (user.id !== selectedId);
+            selectedId = isSelecting ? user.id : selectedIdDefault;
 
-    UsersSelect.prototype.formatSelection = function(user) {
-      return user.name;
-    };
+            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);
+          }
 
-    UsersSelect.prototype.user = function(user_id, callback) {
-      if (!/^\d+$/.test(user_id)) {
-        return false;
-      }
+          // 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');
+
+          function highlightSelected(id) {
+            $el.find(`li[data-user-id="${id}"] .dropdown-menu-user-link`).addClass('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;
+
+          let selected = false;
+
+          if (this.multiSelect) {
+            selected = getSelected().find(u => user.id === u);
 
-      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);
+            const fieldName = this.fieldName;
+            const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");
+
+            if (field.length) {
+              selected = true;
+            }
+          } 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' />";
+            }
+          }
+
+          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>
+          `;
+        }
       });
     };
-
-    // 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
+  })(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);
         },
-        dataType: "json"
-      }).done(function(users) {
-        return callback(users);
+        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;
+        }
       });
     };
+  })(this));
+}
 
-    UsersSelect.prototype.buildUrl = function(url) {
-      if (gon.relative_url_root != null) {
-        url = gon.relative_url_root.replace(/\/$/, '') + url;
-      }
-      return url;
+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: 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;
+};
 
-    return UsersSelect;
-  })();
-}).call(window);
+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_author.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.js
new file mode 100644
index 00000000000..a01cb8cc202
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.js
@@ -0,0 +1,23 @@
+export default {
+  name: 'MRWidgetAuthor',
+  props: {
+    author: { type: Object, required: true },
+    showAuthorName: { type: Boolean, required: false, default: true },
+    showAuthorTooltip: { type: Boolean, required: false, default: false },
+  },
+  template: `
+    <a
+      :href="author.webUrl || author.web_url"
+      class="author-link"
+      :class="{ 'has-tooltip': showAuthorTooltip }"
+      :title="author.name">
+      <img
+        :src="author.avatarUrl || author.avatar_url"
+        class="avatar avatar-inline s16" />
+      <span
+        v-if="showAuthorName"
+        class="author">{{author.name}}
+      </span>
+    </a>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.js
new file mode 100644
index 00000000000..6d2ed5fda64
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.js
@@ -0,0 +1,27 @@
+import MRWidgetAuthor from './mr_widget_author';
+
+export default {
+  name: 'MRWidgetAuthorTime',
+  props: {
+    actionText: { type: String, required: true },
+    author: { type: Object, required: true },
+    dateTitle: { type: String, required: true },
+    dateReadable: { type: String, required: true },
+  },
+  components: {
+    'mr-widget-author': MRWidgetAuthor,
+  },
+  template: `
+    <h4 class="js-mr-widget-author">
+      {{actionText}}
+      <mr-widget-author :author="author" />
+      <time
+        :title="dateTitle"
+        data-toggle="tooltip"
+        data-placement="top"
+        data-container="body">
+        {{dateReadable}}
+      </time>
+    </h4>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
new file mode 100644
index 00000000000..e8e22ad93a5
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
@@ -0,0 +1,116 @@
+/* global Flash */
+
+import '~/lib/utils/datetime_utility';
+import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
+import MemoryUsage from './mr_widget_memory_usage';
+import MRWidgetService from '../services/mr_widget_service';
+
+export default {
+  name: 'MRWidgetDeployment',
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
+  components: {
+    'mr-widget-memory-usage': MemoryUsage,
+  },
+  computed: {
+    svg() {
+      return statusIconEntityMap.icon_status_success;
+    },
+  },
+  methods: {
+    formatDate(date) {
+      return gl.utils.getTimeago().format(date);
+    },
+    hasExternalUrls(deployment = {}) {
+      return deployment.external_url && deployment.external_url_formatted;
+    },
+    hasDeploymentTime(deployment = {}) {
+      return deployment.deployed_at && deployment.deployed_at_formatted;
+    },
+    hasDeploymentMeta(deployment = {}) {
+      return deployment.url && deployment.name;
+    },
+    stopEnvironment(deployment) {
+      const msg = 'Are you sure you want to stop this environment?';
+      const isConfirmed = confirm(msg); // eslint-disable-line
+
+      if (isConfirmed) {
+        MRWidgetService.stopEnvironment(deployment.stop_url)
+          .then(res => res.json())
+          .then((res) => {
+            if (res.redirect_url) {
+              gl.utils.visitUrl(res.redirect_url);
+            }
+          })
+          .catch(() => {
+            new Flash('Something went wrong while stopping this environment. Please try again.'); // eslint-disable-line
+          });
+      }
+    },
+  },
+  template: `
+    <div class="mr-widget-heading">
+      <div v-for="deployment in mr.deployments">
+        <div class="ci-widget">
+          <div class="ci-status-icon ci-status-icon-success">
+            <span class="js-icon-link icon-link">
+              <span class="ci-status-icon"
+                v-html="svg"
+                aria-hidden="true"></span>
+            </span>
+          </div>
+          <span>
+            <span
+              v-if="hasDeploymentMeta(deployment)">
+              Deployed to
+            </span>
+            <a
+              v-if="hasDeploymentMeta(deployment)"
+              :href="deployment.url"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="js-deploy-meta">
+              {{deployment.name}}
+            </a>
+            <span
+              v-if="hasExternalUrls(deployment)">
+              on
+            </span>
+            <a
+              v-if="hasExternalUrls(deployment)"
+              :href="deployment.external_url"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="js-deploy-url">
+              <i
+                class="fa fa-external-link"
+                aria-hidden="true" />
+              {{deployment.external_url_formatted}}
+            </a>
+            <span
+              v-if="hasDeploymentTime(deployment)"
+              :data-title="deployment.deployed_at_formatted"
+              class="js-deploy-time"
+              data-toggle="tooltip"
+              data-placement="top">
+              {{formatDate(deployment.deployed_at)}}
+            </span>
+            <button
+              type="button"
+              v-if="deployment.stop_url"
+              @click="stopEnvironment(deployment)"
+              class="btn btn-default btn-xs">
+              Stop environment
+            </button>
+          </span>
+        </div>
+        <mr-widget-memory-usage
+          v-if="deployment.metrics_url"
+          :metricsUrl="deployment.metrics_url"
+        />
+      </div>
+    </div>
+  `,
+};
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
new file mode 100644
index 00000000000..f8b3fb748ae
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -0,0 +1,106 @@
+import '../../lib/utils/text_utility';
+
+export default {
+  name: 'MRWidgetHeader',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  computed: {
+    shouldShowCommitsBehindText() {
+      return this.mr.divergedCommitsCount > 0;
+    },
+    commitsText() {
+      return gl.text.pluralize('commit', this.mr.divergedCommitsCount);
+    },
+    branchNameClipboardData() {
+      // This supports code in app/assets/javascripts/copy_to_clipboard.js that
+      // works around ClipboardJS limitations to allow the context-specific
+      // copy/pasting of plain text or GFM.
+      return JSON.stringify({
+        text: this.mr.sourceBranch,
+        gfm: `\`${this.mr.sourceBranch}\``,
+      });
+    },
+  },
+  methods: {
+    isBranchTitleLong(branchTitle) {
+      return branchTitle.length > 32;
+    },
+  },
+  template: `
+    <div class="mr-source-target">
+      <div
+        v-if="mr.isOpen"
+        class="pull-right">
+        <a
+          href="#modal_merge_info"
+          data-toggle="modal"
+          class="btn inline btn-grouped btn-sm">
+          Check out branch
+        </a>
+        <span class="dropdown inline prepend-left-5">
+          <a
+            class="btn btn-sm dropdown-toggle"
+            data-toggle="dropdown"
+            aria-label="Download as"
+            role="button">
+            <i
+              class="fa fa-download"
+              aria-hidden="true" />
+            <i
+              class="fa fa-caret-down"
+              aria-hidden="true" />
+          </a>
+          <ul class="dropdown-menu dropdown-menu-align-right">
+            <li>
+              <a
+                :href="mr.emailPatchesPath"
+                download>
+                Email patches
+              </a>
+            </li>
+            <li>
+              <a
+                :href="mr.plainDiffPath"
+                download>
+                Plain diff
+              </a>
+            </li>
+          </ul>
+        </span>
+      </div>
+      <div class="normal">
+        <strong>
+          Request to merge
+          <span
+            class="label-branch"
+            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
+            :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
+            data-placement="bottom"
+            v-html="mr.sourceBranchLink"></span>
+          <button
+            class="btn btn-transparent btn-clipboard has-tooltip"
+            data-title="Copy branch name to clipboard"
+            :data-clipboard-text="branchNameClipboardData">
+            <i
+              aria-hidden="true"
+              class="fa fa-clipboard"></i>
+          </button>
+          into
+          <span
+            class="label-branch"
+            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
+            :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
+            data-placement="bottom">
+            <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
+          </span>
+        </strong>
+        <span
+          v-if="shouldShowCommitsBehindText"
+          class="diverged-commits-count">
+          ({{mr.divergedCommitsCount}} {{commitsText}} behind)
+        </span>
+      </div>
+    </div>
+  `,
+};
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
new file mode 100644
index 00000000000..8155218681c
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
@@ -0,0 +1,147 @@
+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';
+
+export default {
+  name: 'MemoryUsage',
+  props: {
+    metricsUrl: { type: String, required: true },
+  },
+  data() {
+    return {
+      memoryFrom: 0,
+      memoryTo: 0,
+      memoryMetrics: [],
+      deploymentTime: 0,
+      hasMetrics: false,
+      loadFailed: false,
+      loadingMetrics: true,
+      backOffRequestCounter: 0,
+    };
+  },
+  components: {
+    'mr-memory-graph': MemoryGraph,
+  },
+  computed: {
+    shouldShowLoading() {
+      return this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
+    },
+    shouldShowMemoryGraph() {
+      return !this.loadingMetrics && this.hasMetrics && !this.loadFailed;
+    },
+    shouldShowLoadFailure() {
+      return !this.loadingMetrics && !this.hasMetrics && this.loadFailed;
+    },
+    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_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;
+        this.memoryMetrics = memory_values[0].values;
+        this.deploymentTime = deploymentTime;
+      }
+    },
+    loadMetrics() {
+      gl.utils.backOff((next, stop) => {
+        MRWidgetService.fetchMetrics(this.metricsUrl)
+          .then((res) => {
+            if (res.status === statusCodes.NO_CONTENT) {
+              this.backOffRequestCounter = this.backOffRequestCounter += 1;
+              /* eslint-disable no-unused-expressions */
+              this.backOffRequestCounter < 3 ? next() : stop(res);
+            } else {
+              stop(res);
+            }
+          })
+          .catch(stop);
+      })
+        .then((res) => {
+          if (res.status === statusCodes.NO_CONTENT) {
+            return res;
+          }
+
+          return res.json();
+        })
+        .then((res) => {
+          this.computeGraphData(res.metrics, res.deployment_time);
+          return res;
+        })
+        .catch(() => {
+          this.loadFailed = true;
+          this.loadingMetrics = false;
+        });
+    },
+  },
+  mounted() {
+    this.loadingMetrics = true;
+    this.loadMetrics();
+  },
+  template: `
+    <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
+      <div class="legend"></div>
+      <p
+        v-if="shouldShowLoading"
+        class="usage-info js-usage-info usage-info-loading">
+        <i
+          class="fa fa-spinner fa-spin usage-info-load-spinner"
+          aria-hidden="true" />Loading deployment statistics.
+      </p>
+      <p
+        v-if="shouldShowMemoryGraph"
+        class="usage-info js-usage-info">
+        Memory usage <b>{{memoryChangeType}}</b> from {{memoryFrom}}MB to {{memoryTo}}MB
+      </p>
+      <p
+        v-if="shouldShowLoadFailure"
+        class="usage-info js-usage-info usage-info-failed">
+        Failed to load deployment statistics.
+      </p>
+      <p
+        v-if="shouldShowMetricsUnavailable"
+        class="usage-info js-usage-info usage-info-unavailable">
+        Deployment statistics are not available currently.
+      </p>
+      <mr-memory-graph
+        v-if="shouldShowMemoryGraph"
+        :metrics="memoryMetrics"
+        :deploymentTime="deploymentTime"
+        height="25"
+        width="100" />
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js
new file mode 100644
index 00000000000..2fecebce7a0
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js
@@ -0,0 +1,23 @@
+export default {
+  name: 'MRWidgetMergeHelp',
+  props: {
+    missingBranch: { type: String, required: false, default: '' },
+  },
+  template: `
+    <section class="mr-widget-help">
+      <template
+        v-if="missingBranch">
+        If the {{missingBranch}} branch exists in your local repository, you
+      </template>
+      <template v-else>
+        You
+      </template>
+      can merge this merge request manually using the
+      <a
+        data-toggle="modal"
+        href="#modal_merge_info">
+        command line.
+      </a>
+    </section>
+  `,
+};
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
new file mode 100644
index 00000000000..c02e10128e2
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
@@ -0,0 +1,88 @@
+import PipelineStage from '../../pipelines/components/stage.vue';
+import ciIcon from '../../vue_shared/components/ci_icon.vue';
+import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
+
+export default {
+  name: 'MRWidgetPipeline',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  components: {
+    'pipeline-stage': PipelineStage,
+    ciIcon,
+  },
+  computed: {
+    hasCIError() {
+      const { hasCI, ciStatus } = this.mr;
+
+      return hasCI && !ciStatus;
+    },
+    svg() {
+      return statusIconEntityMap.icon_status_failed;
+    },
+    stageText() {
+      return this.mr.pipeline.details.stages.length > 1 ? 'stages' : 'stage';
+    },
+    status() {
+      return this.mr.pipeline.details.status || {};
+    },
+  },
+  template: `
+    <div class="mr-widget-heading">
+      <div class="ci-widget">
+        <template v-if="hasCIError">
+          <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error">
+            <span class="js-icon-link icon-link">
+              <span
+                v-html="svg"
+                aria-hidden="true"></span>
+            </span>
+          </div>
+          <span>Could not connect to the CI server. Please check your settings and try again.</span>
+        </template>
+        <template v-else>
+          <div>
+            <a
+              class="icon-link"
+              :href="this.status.details_path">
+              <ci-icon :status="status" />
+            </a>
+          </div>
+          <span>
+            Pipeline
+            <a
+              :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">
+            <div class="stage-cell">
+              <div
+                v-if="mr.pipeline.details.stages.length > 0"
+                v-for="stage in mr.pipeline.details.stages"
+                class="stage-container dropdown js-mini-pipeline-graph">
+                <pipeline-stage :stage="stage" />
+              </div>
+            </div>
+          </div>
+          <span>
+            for
+            <a
+              :href="mr.pipeline.commit.commit_path"
+              class="commit-sha js-commit-link">
+              {{mr.pipeline.commit.short_id}}</a>.
+          </span>
+          <span
+            v-if="mr.pipeline.coverage"
+            class="js-mr-coverage">
+            Coverage {{mr.pipeline.coverage}}%.
+          </span>
+        </template>
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
new file mode 100644
index 00000000000..205804670fa
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
@@ -0,0 +1,42 @@
+export default {
+  name: 'MRWidgetRelatedLinks',
+  props: {
+    relatedLinks: { type: Object, required: true },
+  },
+  computed: {
+    hasLinks() {
+      const { closing, mentioned, assignToMe } = this.relatedLinks;
+      return closing || mentioned || assignToMe;
+    },
+  },
+  methods: {
+    hasMultipleIssues(text) {
+      return !text ? false : text.match(/<\/a> and <a/);
+    },
+    issueLabel(field) {
+      return this.hasMultipleIssues(this.relatedLinks[field]) ? 'issues' : 'issue';
+    },
+    verbLabel(field) {
+      return this.hasMultipleIssues(this.relatedLinks[field]) ? 'are' : 'is';
+    },
+  },
+  template: `
+    <section
+      v-if="hasLinks"
+      class="mr-info-list mr-links">
+      <div class="legend"></div>
+      <p v-if="relatedLinks.closing">
+        Closes {{issueLabel('closing')}}
+        <span v-html="relatedLinks.closing"></span>.
+      </p>
+      <p v-if="relatedLinks.mentioned">
+        <span class="capitalize">{{issueLabel('mentioned')}}</span>
+        <span v-html="relatedLinks.mentioned"></span>
+        {{verbLabel('mentioned')}} mentioned but will not be closed.
+      </p>
+      <p v-if="relatedLinks.assignToMe">
+        <span v-html="relatedLinks.assignToMe"></span>
+      </p>
+    </section>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
new file mode 100644
index 00000000000..c7f25a1697c
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
@@ -0,0 +1,16 @@
+export default {
+  name: 'MRWidgetArchived',
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        This project is archived, write access has been disabled.
+      </span>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js
new file mode 100644
index 00000000000..4063859d5d0
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js
@@ -0,0 +1,48 @@
+import eventHub from '../../event_hub';
+
+export default {
+  name: 'MRWidgetAutoMergeFailed',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  data() {
+    return {
+      isRefreshing: false,
+    };
+  },
+  methods: {
+    refreshWidget() {
+      this.isRefreshing = true;
+      eventHub.$emit('MRWidgetUpdateRequested', () => {
+        this.isRefreshing = false;
+      });
+    },
+  },
+  template: `
+    <div class="mr-widget-body">
+      <button
+        class="btn btn-success btn-small"
+        disabled="true"
+        type="button">
+        Merge
+      </button>
+      <span class="bold danger">
+        This merge request failed to be merged automatically.
+        <button
+          @click="refreshWidget"
+          :class="{ disabled: isRefreshing }"
+          type="button"
+          class="btn btn-xs btn-default">
+          <i
+            v-if="isRefreshing"
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
+          Refresh
+        </button>
+      </span>
+      <div class="merge-error-text danger bold">
+        {{mr.mergeError}}
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js
new file mode 100644
index 00000000000..8515b54e62d
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js
@@ -0,0 +1,19 @@
+export default {
+  name: 'MRWidgetChecking',
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        Checking ability to merge automatically.
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true" />
+      </span>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
new file mode 100644
index 00000000000..fc2e42c6821
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
@@ -0,0 +1,30 @@
+import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
+
+export default {
+  name: 'MRWidgetClosed',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  components: {
+    'mr-widget-author-and-time': mrWidgetAuthorTime,
+  },
+  template: `
+    <div class="mr-widget-body">
+      <mr-widget-author-and-time
+        actionText="Closed by"
+        :author="mr.closedBy"
+        :dateTitle="mr.updatedAt"
+        :dateReadable="mr.closedAt"
+      />
+      <section>
+        <p>
+          The changes were not merged into
+          <a
+            :href="mr.targetBranchPath"
+            class="label-branch">
+            {{mr.targetBranch}}</a>.
+        </p>
+      </section>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
new file mode 100644
index 00000000000..36596c6f37e
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
@@ -0,0 +1,39 @@
+export default {
+  name: 'MRWidgetConflicts',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        There are merge conflicts.
+        <span v-if="!mr.canMerge">
+          Resolve these conflicts or ask someone with write access to this repository to merge it locally.
+        </span>
+      </span>
+      <div
+        v-if="mr.canMerge"
+        class="btn-group">
+        <a
+          v-if="mr.conflictResolutionPath"
+          :href="mr.conflictResolutionPath"
+          class="btn btn-default btn-xs js-resolve-conflicts-button">
+          Resolve conflicts
+        </a>
+        <a
+          v-if="mr.canMerge"
+          class="btn btn-default btn-xs js-merge-locally-button"
+          data-toggle="modal"
+          href="#modal_merge_info">
+          Merge locally
+        </a>
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
new file mode 100644
index 00000000000..600b4d42e3d
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
@@ -0,0 +1,76 @@
+import eventHub from '../../event_hub';
+
+export default {
+  name: 'MRWidgetFailedToMerge',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  data() {
+    return {
+      timer: 10,
+      isRefreshing: false,
+    };
+  },
+  mounted() {
+    setInterval(() => {
+      this.updateTimer();
+    }, 1000);
+  },
+  created() {
+    eventHub.$emit('DisablePolling');
+  },
+  computed: {
+    timerText() {
+      return this.timer > 1 ? `${this.timer} seconds` : 'a second';
+    },
+  },
+  methods: {
+    refresh() {
+      this.isRefreshing = true;
+      eventHub.$emit('MRWidgetUpdateRequested');
+      eventHub.$emit('EnablePolling');
+    },
+    updateTimer() {
+      this.timer = this.timer - 1;
+
+      if (this.timer === 0) {
+        this.refresh();
+      }
+    },
+  },
+  template: `
+    <div class="mr-widget-body">
+      <button
+        class="btn btn-success btn-small"
+        disabled="true"
+        type="button">
+        Merge
+      </button>
+      <span
+        v-if="!isRefreshing"
+        class="bold danger">
+        <span
+          class="has-error-message"
+          v-if="mr.mergeError">
+          {{mr.mergeError}}
+        </span>
+        <span v-else>Merge failed.</span>
+        <span
+          :class="{ 'has-custom-error': mr.mergeError }">
+          Refreshing in {{timerText}} to show the updated status...
+        </span>
+        <button
+          @click="refresh"
+          class="btn btn-default btn-xs js-refresh-button"
+          type="button">
+          Refresh now
+        </button>
+      </span>
+      <span
+        v-if="isRefreshing"
+        class="bold js-refresh-label">
+        Refreshing now...
+      </span>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
new file mode 100644
index 00000000000..0bd31731a0b
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
@@ -0,0 +1,24 @@
+export default {
+  name: 'MRWidgetLocked',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  template: `
+    <div class="mr-widget-body mr-state-locked">
+      <span class="state-label">Locked</span>
+      This merge request is in the process of being merged, during which time it is locked and cannot be closed.
+      <i
+        class="fa fa-spinner fa-spin"
+        aria-hidden="true" />
+      <section class="mr-info-list mr-links">
+        <div class="legend"></div>
+        <p>
+          The changes will be merged into
+          <span class="label-branch">
+            <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
+          </span>.
+        </p>
+      </section>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
new file mode 100644
index 00000000000..419d174f3ff
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
@@ -0,0 +1,116 @@
+/* global Flash */
+
+import MRWidgetAuthor from '../../components/mr_widget_author';
+import eventHub from '../../event_hub';
+
+export default {
+  name: 'MRWidgetMergeWhenPipelineSucceeds',
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
+  components: {
+    'mr-widget-author': MRWidgetAuthor,
+  },
+  data() {
+    return {
+      isCancellingAutoMerge: false,
+      isRemovingSourceBranch: false,
+    };
+  },
+  computed: {
+    canRemoveSourceBranch() {
+      const { shouldRemoveSourceBranch, canRemoveSourceBranch,
+        mergeUserId, currentUserId } = this.mr;
+
+      return !shouldRemoveSourceBranch && canRemoveSourceBranch && mergeUserId === currentUserId;
+    },
+  },
+  methods: {
+    cancelAutomaticMerge() {
+      this.isCancellingAutoMerge = true;
+      this.service.cancelAutomaticMerge()
+        .then(res => res.json())
+        .then((res) => {
+          eventHub.$emit('UpdateWidgetData', res);
+        })
+        .catch(() => {
+          this.isCancellingAutoMerge = false;
+          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
+        });
+    },
+    removeSourceBranch() {
+      const options = {
+        sha: this.mr.sha,
+        merge_when_pipeline_succeeds: true,
+        should_remove_source_branch: true,
+      };
+
+      this.isRemovingSourceBranch = true;
+      this.service.mergeResource.save(options)
+        .then(res => res.json())
+        .then((res) => {
+          if (res.status === 'merge_when_pipeline_succeeds') {
+            eventHub.$emit('MRWidgetUpdateRequested');
+          }
+        })
+        .catch(() => {
+          this.isRemovingSourceBranch = false;
+          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
+        });
+    },
+  },
+  template: `
+    <div class="mr-widget-body">
+      <h4>
+        Set by
+        <mr-widget-author :author="mr.setToMWPSBy" />
+        to be merged automatically when the pipeline succeeds.
+        <a
+          v-if="mr.canCancelAutomaticMerge"
+          @click.prevent="cancelAutomaticMerge"
+          :disabled="isCancellingAutoMerge"
+          role="button"
+          href="#"
+          class="btn btn-xs btn-default js-cancel-auto-merge">
+          <i
+            v-if="isCancellingAutoMerge"
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
+            Cancel automatic merge
+        </a>
+      </h4>
+      <section class="mr-info-list">
+        <div class="legend"></div>
+        <p>The changes will be merged into
+          <a
+            :href="mr.targetBranchPath"
+            class="label-branch">
+            {{mr.targetBranch}}
+          </a>.
+        </p>
+        <p v-if="mr.shouldRemoveSourceBranch">
+          The source branch will be removed.
+        </p>
+        <p
+          v-else
+          class="with-button">
+          The source branch will not be removed.
+          <a
+            v-if="canRemoveSourceBranch"
+            :disabled="isRemovingSourceBranch"
+            @click.prevent="removeSourceBranch"
+            role="button"
+            class="btn btn-xs btn-default js-remove-source-branch"
+            href="#">
+            <i
+            v-if="isRemovingSourceBranch"
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
+            Remove source branch
+          </a>
+        </p>
+      </section>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
new file mode 100644
index 00000000000..c7d32d18141
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
@@ -0,0 +1,130 @@
+/* global Flash */
+
+import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
+import eventHub from '../../event_hub';
+
+export default {
+  name: 'MRWidgetMerged',
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
+  components: {
+    'mr-widget-author-and-time': mrWidgetAuthorTime,
+  },
+  data() {
+    return {
+      isMakingRequest: false,
+    };
+  },
+  computed: {
+    shouldShowRemoveSourceBranch() {
+      const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr;
+
+      return !sourceBranchRemoved && canRemoveSourceBranch &&
+        !this.isMakingRequest && !isRemovingSourceBranch;
+    },
+    shouldShowSourceBranchRemoving() {
+      const { sourceBranchRemoved, isRemovingSourceBranch } = this.mr;
+      return !sourceBranchRemoved && (isRemovingSourceBranch || this.isMakingRequest);
+    },
+    shouldShowMergedButtons() {
+      const { canRevertInCurrentMR, canCherryPickInCurrentMR, revertInForkPath,
+        cherryPickInForkPath } = this.mr;
+
+      return canRevertInCurrentMR || canCherryPickInCurrentMR ||
+        revertInForkPath || cherryPickInForkPath;
+    },
+  },
+  methods: {
+    removeSourceBranch() {
+      this.isMakingRequest = true;
+      this.service.removeSourceBranch()
+        .then(res => res.json())
+        .then((res) => {
+          if (res.message === 'Branch was removed') {
+            eventHub.$emit('MRWidgetUpdateRequested', () => {
+              this.isMakingRequest = false;
+            });
+          }
+        })
+        .catch(() => {
+          this.isMakingRequest = false;
+          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
+        });
+    },
+  },
+  template: `
+    <div class="mr-widget-body">
+      <mr-widget-author-and-time
+        actionText="Merged by"
+        :author="mr.mergedBy"
+        :dateTitle="mr.updatedAt"
+        :dateReadable="mr.mergedAt" />
+      <section class="mr-info-list">
+        <div class="legend"></div>
+        <p>
+          The changes were merged into
+          <span class="label-branch">
+            <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
+          </span>
+        </p>
+        <p v-if="mr.sourceBranchRemoved">The source branch has been removed.</p>
+        <p v-if="shouldShowRemoveSourceBranch">
+          You can remove source branch now.
+          <button
+            @click="removeSourceBranch"
+            :class="{ disabled: isMakingRequest }"
+            type="button"
+            class="btn btn-xs btn-default js-remove-branch-button">
+            Remove Source Branch
+          </button>
+        </p>
+        <p v-if="shouldShowSourceBranchRemoving">
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
+          The source branch is being removed.
+        </p>
+      </section>
+      <div
+        v-if="shouldShowMergedButtons"
+        class="merged-buttons clearfix">
+        <a
+          v-if="mr.canRevertInCurrentMR"
+          class="btn btn-close btn-sm has-tooltip"
+          href="#modal-revert-commit"
+          data-toggle="modal"
+          data-container="body"
+          title="Revert this merge request in a new merge request">
+          Revert
+        </a>
+        <a
+          v-else-if="mr.revertInForkPath"
+          class="btn btn-close btn-sm has-tooltip"
+          data-method="post"
+          :href="mr.revertInForkPath"
+          title="Revert this merge request in a new merge request">
+          Revert
+        </a>
+        <a
+          v-if="mr.canCherryPickInCurrentMR"
+          class="btn btn-default btn-sm has-tooltip"
+          href="#modal-cherry-pick-commit"
+          data-toggle="modal"
+          data-container="body"
+          title="Cherry-pick this merge request in a new merge request">
+          Cherry-pick
+        </a>
+        <a
+          v-else-if="mr.cherryPickInForkPath"
+          class="btn btn-default btn-sm has-tooltip"
+          data-method="post"
+          :href="mr.cherryPickInForkPath"
+          title="Cherry-pick this merge request in a new merge request">
+          Cherry-pick
+        </a>
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
new file mode 100644
index 00000000000..328382485f6
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
@@ -0,0 +1,34 @@
+import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
+
+export default {
+  name: 'MRWidgetMissingBranch',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  components: {
+    'mr-widget-merge-help': mrWidgetMergeHelp,
+  },
+  computed: {
+    missingBranchName() {
+      return this.mr.sourceBranchRemoved ? 'source' : 'target';
+    },
+  },
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold js-branch-text">
+        <span class="capitalize">
+          {{missingBranchName}}
+        </span> branch does not exist.
+        Please restore the {{missingBranchName}} branch or use a different {{missingBranchName}} branch.
+      </span>
+      <mr-widget-merge-help
+        :missing-branch="missingBranchName" />
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js
new file mode 100644
index 00000000000..07169b349be
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js
@@ -0,0 +1,17 @@
+export default {
+  name: 'MRWidgetNotAllowed',
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        Ready to be merged automatically.
+        Ask someone with write access to this repository to merge this request.
+      </span>
+    </div>
+  `,
+};
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
new file mode 100644
index 00000000000..375a382615a
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
@@ -0,0 +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 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_pipeline_blocked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js
new file mode 100644
index 00000000000..31c53b679ed
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js
@@ -0,0 +1,16 @@
+export default {
+  name: 'MRWidgetPipelineBlocked',
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        Pipeline blocked. The pipeline for this merge request requires a manual action to proceed.
+      </span>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
new file mode 100644
index 00000000000..002820123ca
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
@@ -0,0 +1,16 @@
+export default {
+  name: 'MRWidgetPipelineBlocked',
+  template: `
+    <div class="mr-widget-body">
+      <button
+        class="btn btn-success btn-small"
+        disabled="true"
+        type="button">
+        Merge
+      </button>
+      <span class="bold">
+        The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure.
+      </span>
+    </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
new file mode 100644
index 00000000000..fcd4fdaf09f
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -0,0 +1,313 @@
+/* global Flash */
+
+import successSvg from 'icons/_icon_status_success.svg';
+import warningSvg from 'icons/_icon_status_warning.svg';
+import simplePoll from '~/lib/utils/simple_poll';
+import eventHub from '../../event_hub';
+
+export default {
+  name: 'MRWidgetReadyToMerge',
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
+  data() {
+    return {
+      removeSourceBranch: this.mr.shouldRemoveSourceBranch,
+      mergeWhenBuildSucceeds: false,
+      useCommitMessageWithDescription: false,
+      setToMergeWhenPipelineSucceeds: false,
+      showCommitMessageEditor: false,
+      isMakingRequest: false,
+      isMergingImmediately: false,
+      commitMessage: this.mr.commitMessage,
+      successSvg,
+      warningSvg,
+    };
+  },
+  computed: {
+    commitMessageLinkTitle() {
+      const withDesc = 'Include description in commit message';
+      const withoutDesc = "Don't include description in commit message";
+
+      return this.useCommitMessageWithDescription ? withoutDesc : withDesc;
+    },
+    mergeButtonClass() {
+      const defaultClass = 'btn btn-small btn-success accept-merge-request';
+      const failedClass = `${defaultClass} btn-danger`;
+      const inActionClass = `${defaultClass} btn-info`;
+      const { pipeline, isPipelineActive, isPipelineFailed, hasCI, ciStatus } = this.mr;
+
+      if (hasCI && !ciStatus) {
+        return failedClass;
+      } else if (!pipeline) {
+        return defaultClass;
+      } else if (isPipelineActive) {
+        return inActionClass;
+      } else if (isPipelineFailed) {
+        return failedClass;
+      }
+
+      return defaultClass;
+    },
+    mergeButtonText() {
+      if (this.isMergingImmediately) {
+        return 'Merge in progress';
+      } else if (this.mr.isPipelineActive) {
+        return 'Merge when pipeline succeeds';
+      }
+
+      return 'Merge';
+    },
+    shouldShowMergeOptionsDropdown() {
+      return this.mr.isPipelineActive && !this.mr.onlyAllowMergeIfPipelineSucceeds;
+    },
+    isMergeButtonDisabled() {
+      const { commitMessage } = this;
+      return Boolean(!commitMessage.length
+        || !this.isMergeAllowed()
+        || this.isMakingRequest
+        || this.mr.preventMerge);
+    },
+    isRemoveSourceBranchButtonDisabled() {
+      return this.isMergeButtonDisabled || !this.mr.canRemoveSourceBranch;
+    },
+    shouldShowSquashBeforeMerge() {
+      const { commitsCount, enableSquashBeforeMerge } = this.mr;
+      return enableSquashBeforeMerge && commitsCount > 1;
+    },
+  },
+  methods: {
+    isMergeAllowed() {
+      return !(this.mr.onlyAllowMergeIfPipelineSucceeds && this.mr.isPipelineFailed);
+    },
+    updateCommitMessage() {
+      const cmwd = this.mr.commitMessageWithDescription;
+      this.useCommitMessageWithDescription = !this.useCommitMessageWithDescription;
+      this.commitMessage = this.useCommitMessageWithDescription ? cmwd : this.mr.commitMessage;
+    },
+    toggleCommitMessageEditor() {
+      this.showCommitMessageEditor = !this.showCommitMessageEditor;
+    },
+    handleMergeButtonClick(mergeWhenBuildSucceeds, mergeImmediately) {
+      // TODO: Remove no-param-reassign
+      if (mergeWhenBuildSucceeds === undefined) {
+        mergeWhenBuildSucceeds = this.mr.isPipelineActive; // eslint-disable-line no-param-reassign
+      } else if (mergeImmediately) {
+        this.isMergingImmediately = true;
+      }
+
+      this.setToMergeWhenPipelineSucceeds = mergeWhenBuildSucceeds === true;
+
+      const options = {
+        sha: this.mr.sha,
+        commit_message: this.commitMessage,
+        merge_when_pipeline_succeeds: this.setToMergeWhenPipelineSucceeds,
+        should_remove_source_branch: this.removeSourceBranch === true,
+      };
+
+      // Only truthy in EE extension of this component
+      if (this.setAdditionalParams) {
+        this.setAdditionalParams(options);
+      }
+
+      this.isMakingRequest = true;
+      this.service.merge(options)
+        .then(res => res.json())
+        .then((res) => {
+          const hasError = res.status === 'failed' || res.status === 'hook_validation_error';
+
+          if (res.status === 'merge_when_pipeline_succeeds') {
+            eventHub.$emit('MRWidgetUpdateRequested');
+          } else if (res.status === 'success') {
+            this.initiateMergePolling();
+          } else if (hasError) {
+            eventHub.$emit('FailedToMerge', res.merge_error);
+          }
+        })
+        .catch(() => {
+          this.isMakingRequest = false;
+          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
+        });
+    },
+    initiateMergePolling() {
+      simplePoll((continuePolling, stopPolling) => {
+        this.handleMergePolling(continuePolling, stopPolling);
+      });
+    },
+    handleMergePolling(continuePolling, stopPolling) {
+      this.service.poll()
+        .then(res => res.json())
+        .then((res) => {
+          if (res.state === 'merged') {
+            // If state is merged we should update the widget and stop the polling
+            eventHub.$emit('MRWidgetUpdateRequested');
+            eventHub.$emit('FetchActionsContent');
+            if (window.mergeRequest) {
+              window.mergeRequest.updateStatusText('status-box-open', 'status-box-merged', 'Merged');
+              window.mergeRequest.decreaseCounter();
+            }
+            stopPolling();
+
+            // If user checked remove source branch and we didn't remove the branch yet
+            // we should start another polling for source branch remove process
+            if (this.removeSourceBranch && res.source_branch_exists) {
+              this.initiateRemoveSourceBranchPolling();
+            }
+          } else if (res.merge_error) {
+            eventHub.$emit('FailedToMerge', res.merge_error);
+            stopPolling();
+          } else {
+            // MR is not merged yet, continue polling until the state becomes 'merged'
+            continuePolling();
+          }
+        })
+        .catch(() => {
+          new Flash('Something went wrong while merging this merge request. Please try again.'); // eslint-disable-line
+        });
+    },
+    initiateRemoveSourceBranchPolling() {
+      // We need to show source branch is being removed spinner in another component
+      eventHub.$emit('SetBranchRemoveFlag', [true]);
+
+      simplePoll((continuePolling, stopPolling) => {
+        this.handleRemoveBranchPolling(continuePolling, stopPolling);
+      });
+    },
+    handleRemoveBranchPolling(continuePolling, stopPolling) {
+      this.service.poll()
+        .then(res => res.json())
+        .then((res) => {
+          // If source branch exists then we should continue polling
+          // because removing a source branch is a background task and takes time
+          if (res.source_branch_exists) {
+            continuePolling();
+          } else {
+            // Branch is removed. Update widget, stop polling and hide the spinner
+            eventHub.$emit('MRWidgetUpdateRequested', () => {
+              eventHub.$emit('SetBranchRemoveFlag', [false]);
+            });
+            stopPolling();
+          }
+        })
+        .catch(() => {
+          new Flash('Something went wrong while removing the source branch. Please try again.'); // eslint-disable-line
+        });
+    },
+  },
+  template: `
+    <div class="mr-widget-body">
+      <span class="btn-group">
+        <button
+          @click="handleMergeButtonClick()"
+          :disabled="isMergeButtonDisabled"
+          :class="mergeButtonClass"
+          type="button">
+          <i
+            v-if="isMakingRequest"
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
+          {{mergeButtonText}}
+        </button>
+        <button
+          v-if="shouldShowMergeOptionsDropdown"
+          :disabled="isMergeButtonDisabled"
+          type="button"
+          class="btn btn-small btn-info dropdown-toggle"
+          data-toggle="dropdown">
+          <i
+            class="fa fa-caret-down"
+            aria-hidden="true" />
+          <span class="sr-only">
+            Select merge moment
+          </span>
+        </button>
+        <ul
+          v-if="shouldShowMergeOptionsDropdown"
+          class="dropdown-menu dropdown-menu-right"
+          role="menu">
+          <li>
+            <a
+              @click.prevent="handleMergeButtonClick(true)"
+              class="merge_when_pipeline_succeeds"
+              href="#">
+              <span
+                v-html="successSvg"
+                class="merge-opt-icon"
+                aria-hidden="true"></span>
+              <span class="merge-opt-title">Merge when pipeline succeeds</span>
+            </a>
+          </li>
+          <li>
+            <a
+              @click.prevent="handleMergeButtonClick(false, true)"
+              class="accept-merge-request"
+              href="#">
+              <span
+                v-html="warningSvg"
+                class="merge-opt-icon"
+                aria-hidden="true"></span>
+              <span class="merge-opt-title">Merge immediately</span>
+            </a>
+          </li>
+        </ul>
+      </span>
+      <template v-if="isMergeAllowed()">
+        <label class="spacing">
+          <input
+            id="remove-source-branch-input"
+            v-model="removeSourceBranch"
+            :disabled="isRemoveSourceBranchButtonDisabled"
+            type="checkbox"/> Remove source branch
+        </label>
+
+        <!-- Placeholder for EE extension of this component -->
+        <squash-before-merge
+          v-if="shouldShowSquashBeforeMerge"
+          :mr="mr"
+          :is-merge-button-disabled="isMergeButtonDisabled" />
+
+        <button
+          @click="toggleCommitMessageEditor"
+          :disabled="isMergeButtonDisabled"
+          class="btn btn-default btn-xs"
+          type="button">
+          Modify commit message
+        </button>
+        <div
+          v-if="showCommitMessageEditor"
+          class="prepend-top-default commit-message-editor">
+          <div class="form-group clearfix">
+            <label
+              class="control-label"
+              for="commit-message">
+              Commit message
+            </label>
+            <div class="col-sm-10">
+              <div class="commit-message-container">
+                <div class="max-width-marker"></div>
+                <textarea
+                  v-model="commitMessage"
+                  class="form-control js-commit-message"
+                  required="required"
+                  rows="14"
+                  name="Commit message"></textarea>
+              </div>
+              <p class="hint">Try to keep the first line under 52 characters and the others under 72.</p>
+              <div class="hint">
+                <a
+                  @click.prevent="updateCommitMessage"
+                  href="#">{{commitMessageLinkTitle}}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <span class="bold">
+          The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure.
+        </span>
+      </template>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
new file mode 100644
index 00000000000..79f8ef408e6
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
@@ -0,0 +1,16 @@
+export default {
+  name: 'MRWidgetSHAMismatch',
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        The source branch HEAD has recently changed. Please reload the page and review the changes before merging.
+      </span>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.js
new file mode 100644
index 00000000000..bf8628d18a6
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.js
@@ -0,0 +1,15 @@
+/*
+The squash-before-merge button is EE only, but it's located right in the middle
+of the readyToMerge state component template.
+
+If we didn't declare this component in CE, we'd need to maintain a separate copy
+of the readyToMergeState template in EE, which is pretty big and likely to change.
+
+Instead, in CE, we declare the component, but it's hidden and is configured to do nothing.
+In EE, the configuration extends this object to add a functioning squash-before-merge
+button.
+*/
+
+export default {
+  template: '',
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js
new file mode 100644
index 00000000000..f4ab2d9fa58
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js
@@ -0,0 +1,27 @@
+export default {
+  name: 'MRWidgetUnresolvedDiscussions',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        There are unresolved discussions. Please resolve these discussions
+        <span v-if="mr.canCreateIssue">or</span>
+        <span v-else>.</span>
+      </span>
+      <a
+        v-if="mr.createIssueToResolveDiscussionsPath"
+        :href="mr.createIssueToResolveDiscussionsPath"
+        class="btn btn-default btn-xs js-create-issue">
+        Create an issue to resolve them later
+      </a>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
new file mode 100644
index 00000000000..cb02ffe93bd
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
@@ -0,0 +1,59 @@
+/* global Flash */
+import eventHub from '../../event_hub';
+
+export default {
+  name: 'MRWidgetWIP',
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
+  data() {
+    return {
+      isMakingRequest: false,
+    };
+  },
+  methods: {
+    removeWIP() {
+      this.isMakingRequest = true;
+      this.service.removeWIP()
+        .then(res => res.json())
+        .then((res) => {
+          eventHub.$emit('UpdateWidgetData', res);
+          new Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line
+          $('.merge-request .detail-page-description .title').text(this.mr.title);
+        })
+        .catch(() => {
+          this.isMakingRequest = false;
+          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
+        });
+    },
+  },
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge</button>
+      <span class="bold">
+        This merge request is currently Work In Progress and therefore unable to merge
+      </span>
+      <template v-if="mr.removeWIPPath">
+        <i
+          class="fa fa-question-circle has-tooltip"
+          title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged." />
+        <button
+          @click="removeWIP"
+          :disabled="isMakingRequest"
+          type="button"
+          class="btn btn-default btn-xs js-remove-wip">
+          <i
+            v-if="isMakingRequest"
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
+            Resolve WIP status
+        </button>
+      </template>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
new file mode 100644
index 00000000000..fe5e1bbb55c
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -0,0 +1,44 @@
+/**
+ * This file is the centerpiece of an attempt to reduce potential conflicts
+ * between the CE and EE versions of the MR widget. EE additions to the MR widget should
+ * be contained in the ./vue_merge_request_widget/ee directory, and should **extend**
+ * rather than mutate CE MR Widget code.
+ *
+ * This file should be the only source of conflicts between EE and CE. EE-only components should
+ * imported directly where they are needed, and import paths for EE extensions of CE components
+ * should overwrite import paths **without** changing the order of dependencies listed here.
+ */
+
+export { default as Vue } from 'vue';
+export { default as SmartInterval } from '~/smart_interval';
+export { default as WidgetHeader } from './components/mr_widget_header';
+export { default as WidgetMergeHelp } from './components/mr_widget_merge_help';
+export { default as WidgetPipeline } from './components/mr_widget_pipeline';
+export { default as WidgetDeployment } from './components/mr_widget_deployment';
+export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';
+export { default as MergedState } from './components/states/mr_widget_merged';
+export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge';
+export { default as ClosedState } from './components/states/mr_widget_closed';
+export { default as LockedState } from './components/states/mr_widget_locked';
+export { default as WipState } from './components/states/mr_widget_wip';
+export { default as ArchivedState } from './components/states/mr_widget_archived';
+export { default as ConflictsState } from './components/states/mr_widget_conflicts';
+export { default as NothingToMergeState } from './components/states/mr_widget_nothing_to_merge';
+export { default as MissingBranchState } from './components/states/mr_widget_missing_branch';
+export { default as NotAllowedState } from './components/states/mr_widget_not_allowed';
+export { default as ReadyToMergeState } from './components/states/mr_widget_ready_to_merge';
+export { default as SHAMismatchState } from './components/states/mr_widget_sha_mismatch';
+export { default as UnresolvedDiscussionsState } from './components/states/mr_widget_unresolved_discussions';
+export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked';
+export { default as PipelineFailedState } from './components/states/mr_widget_pipeline_failed';
+export { default as MergeWhenPipelineSucceedsState } from './components/states/mr_widget_merge_when_pipeline_succeeds';
+export { default as AutoMergeFailed } from './components/states/mr_widget_auto_merge_failed';
+export { default as CheckingState } from './components/states/mr_widget_checking';
+export { default as MRWidgetStore } from './stores/mr_widget_store';
+export { default as MRWidgetService } from './services/mr_widget_service';
+export { default as eventHub } from './event_hub';
+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/event_hub.js b/app/assets/javascripts/vue_merge_request_widget/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
new file mode 100644
index 00000000000..43ef468c303
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -0,0 +1,14 @@
+import {
+  Vue,
+  mrWidgetOptions,
+} from './dependencies';
+
+document.addEventListener('DOMContentLoaded', () => {
+  gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;
+
+  const vm = new Vue(mrWidgetOptions);
+
+  window.gl.mrWidget = {
+    checkStatus: vm.checkStatus,
+  };
+});
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
new file mode 100644
index 00000000000..2339a00ddd0
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -0,0 +1,247 @@
+/* global Flash */
+
+import {
+  WidgetHeader,
+  WidgetMergeHelp,
+  WidgetPipeline,
+  WidgetDeployment,
+  WidgetRelatedLinks,
+  MergedState,
+  ClosedState,
+  LockedState,
+  WipState,
+  ArchivedState,
+  ConflictsState,
+  NothingToMergeState,
+  MissingBranchState,
+  NotAllowedState,
+  ReadyToMergeState,
+  SHAMismatchState,
+  UnresolvedDiscussionsState,
+  PipelineBlockedState,
+  PipelineFailedState,
+  FailedToMerge,
+  MergeWhenPipelineSucceedsState,
+  AutoMergeFailed,
+  CheckingState,
+  MRWidgetStore,
+  MRWidgetService,
+  eventHub,
+  stateMaps,
+  SquashBeforeMerge,
+  notify,
+} from './dependencies';
+
+export default {
+  el: '#js-vue-mr-widget',
+  name: 'MRWidget',
+  data() {
+    const store = new MRWidgetStore(gl.mrWidgetData);
+    const service = this.createService(store);
+    return {
+      mr: store,
+      service,
+    };
+  },
+  computed: {
+    componentName() {
+      return stateMaps.stateToComponentMap[this.mr.state];
+    },
+    shouldRenderMergeHelp() {
+      return stateMaps.statesToShowHelpWidget.indexOf(this.mr.state) > -1;
+    },
+    shouldRenderPipelines() {
+      return Object.keys(this.mr.pipeline).length || this.mr.hasCI;
+    },
+    shouldRenderRelatedLinks() {
+      return this.mr.relatedLinks;
+    },
+    shouldRenderDeployments() {
+      return this.mr.deployments.length;
+    },
+  },
+  methods: {
+    createService(store) {
+      const endpoints = {
+        mergePath: store.mergePath,
+        mergeCheckPath: store.mergeCheckPath,
+        cancelAutoMergePath: store.cancelAutoMergePath,
+        removeWIPPath: store.removeWIPPath,
+        sourceBranchPath: store.sourceBranchPath,
+        ciEnvironmentsStatusPath: store.ciEnvironmentsStatusPath,
+        statusPath: store.statusPath,
+        mergeActionsContentPath: store.mergeActionsContentPath,
+      };
+      return new MRWidgetService(endpoints);
+    },
+    checkStatus(cb) {
+      this.service.checkStatus()
+        .then(res => res.json())
+        .then((res) => {
+          this.handleNotification(res);
+          this.mr.setData(res);
+          this.setFavicon();
+
+          if (cb) {
+            cb.call(null, res);
+          }
+        })
+        .catch(() => {
+          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
+        });
+    },
+    initPolling() {
+      this.pollingInterval = new gl.SmartInterval({
+        callback: this.checkStatus,
+        startingInterval: 10000,
+        maxInterval: 30000,
+        hiddenInterval: 120000,
+        incrementByFactorOf: 5000,
+      });
+    },
+    initDeploymentsPolling() {
+      this.deploymentsInterval = new gl.SmartInterval({
+        callback: this.fetchDeployments,
+        startingInterval: 30000,
+        maxInterval: 120000,
+        hiddenInterval: 240000,
+        incrementByFactorOf: 15000,
+        immediateExecution: true,
+      });
+    },
+    setFavicon() {
+      if (this.mr.ciStatusFaviconPath) {
+        gl.utils.setFavicon(this.mr.ciStatusFaviconPath);
+      }
+    },
+    fetchDeployments() {
+      this.service.fetchDeployments()
+        .then(res => res.json())
+        .then((res) => {
+          if (res.length) {
+            this.mr.deployments = res;
+          }
+        })
+        .catch(() => {
+          new Flash('Something went wrong while fetching the environments for this merge request. Please try again.'); // eslint-disable-line
+        });
+    },
+    fetchActionsContent() {
+      this.service.fetchMergeActionsContent()
+        .then((res) => {
+          if (res.body) {
+            const el = document.createElement('div');
+            el.innerHTML = res.body;
+            document.body.appendChild(el);
+          }
+        })
+        .catch(() => {
+          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();
+    },
+    stopPolling() {
+      this.pollingInterval.stopTimer();
+    },
+    bindEventHubListeners() {
+      eventHub.$on('MRWidgetUpdateRequested', (cb) => {
+        this.checkStatus(cb);
+      });
+
+      // `params` should be an Array contains a Boolean, like `[true]`
+      // Passing parameter as Boolean didn't work.
+      eventHub.$on('SetBranchRemoveFlag', (params) => {
+        this.mr.isRemovingSourceBranch = params[0];
+      });
+
+      eventHub.$on('FailedToMerge', (mergeError) => {
+        this.mr.state = 'failedToMerge';
+        this.mr.mergeError = mergeError;
+      });
+
+      eventHub.$on('UpdateWidgetData', (data) => {
+        this.mr.setData(data);
+      });
+
+      eventHub.$on('FetchActionsContent', () => {
+        this.fetchActionsContent();
+      });
+
+      eventHub.$on('EnablePolling', () => {
+        this.resumePolling();
+      });
+
+      eventHub.$on('DisablePolling', () => {
+        this.stopPolling();
+      });
+    },
+    handleMounted() {
+      this.setFavicon();
+      this.initDeploymentsPolling();
+    },
+  },
+  created() {
+    this.initPolling();
+    this.bindEventHubListeners();
+  },
+  mounted() {
+    this.handleMounted();
+  },
+  components: {
+    'mr-widget-header': WidgetHeader,
+    'mr-widget-merge-help': WidgetMergeHelp,
+    'mr-widget-pipeline': WidgetPipeline,
+    'mr-widget-deployment': WidgetDeployment,
+    'mr-widget-related-links': WidgetRelatedLinks,
+    'mr-widget-merged': MergedState,
+    'mr-widget-closed': ClosedState,
+    'mr-widget-locked': LockedState,
+    'mr-widget-failed-to-merge': FailedToMerge,
+    'mr-widget-wip': WipState,
+    'mr-widget-archived': ArchivedState,
+    'mr-widget-conflicts': ConflictsState,
+    'mr-widget-nothing-to-merge': NothingToMergeState,
+    'mr-widget-not-allowed': NotAllowedState,
+    'mr-widget-missing-branch': MissingBranchState,
+    'mr-widget-ready-to-merge': ReadyToMergeState,
+    'mr-widget-sha-mismatch': SHAMismatchState,
+    'mr-widget-squash-before-merge': SquashBeforeMerge,
+    'mr-widget-checking': CheckingState,
+    'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
+    'mr-widget-pipeline-blocked': PipelineBlockedState,
+    'mr-widget-pipeline-failed': PipelineFailedState,
+    'mr-widget-merge-when-pipeline-succeeds': MergeWhenPipelineSucceedsState,
+    'mr-widget-auto-merge-failed': AutoMergeFailed,
+  },
+  template: `
+    <div class="mr-state-widget prepend-top-default">
+      <mr-widget-header :mr="mr" />
+      <mr-widget-pipeline
+        v-if="shouldRenderPipelines"
+        :mr="mr" />
+      <mr-widget-deployment
+        v-if="shouldRenderDeployments"
+        :mr="mr"
+        :service="service" />
+      <component
+        :is="componentName"
+        :mr="mr"
+        :service="service" />
+      <mr-widget-related-links
+        v-if="shouldRenderRelatedLinks"
+        :related-links="mr.relatedLinks" />
+      <mr-widget-merge-help v-if="shouldRenderMergeHelp" />
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
new file mode 100644
index 00000000000..79c3d335679
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default class MRWidgetService {
+  constructor(endpoints) {
+    this.mergeResource = Vue.resource(endpoints.mergePath);
+    this.mergeCheckResource = Vue.resource(endpoints.statusPath);
+    this.cancelAutoMergeResource = Vue.resource(endpoints.cancelAutoMergePath);
+    this.removeWIPResource = Vue.resource(endpoints.removeWIPPath);
+    this.removeSourceBranchResource = Vue.resource(endpoints.sourceBranchPath);
+    this.deploymentsResource = Vue.resource(endpoints.ciEnvironmentsStatusPath);
+    this.pollResource = Vue.resource(`${endpoints.statusPath}?basic=true`);
+    this.mergeActionsContentResource = Vue.resource(endpoints.mergeActionsContentPath);
+  }
+
+  merge(data) {
+    return this.mergeResource.save(data);
+  }
+
+  cancelAutomaticMerge() {
+    return this.cancelAutoMergeResource.save();
+  }
+
+  removeWIP() {
+    return this.removeWIPResource.save();
+  }
+
+  removeSourceBranch() {
+    return this.removeSourceBranchResource.delete();
+  }
+
+  fetchDeployments() {
+    return this.deploymentsResource.get();
+  }
+
+  poll() {
+    return this.pollResource.get();
+  }
+
+  checkStatus() {
+    return this.mergeCheckResource.get();
+  }
+
+  fetchMergeActionsContent() {
+    return this.mergeActionsContentResource.get();
+  }
+
+  static stopEnvironment(url) {
+    return Vue.http.post(url);
+  }
+
+  static fetchMetrics(metricsUrl) {
+    return Vue.http.get(`${metricsUrl}.json`);
+  }
+}
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
new file mode 100644
index 00000000000..7c15abfff10
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
@@ -0,0 +1,30 @@
+export default function deviseState(data) {
+  if (data.project_archived) {
+    return 'archived';
+  } else if (data.branch_missing) {
+    return 'missingBranch';
+  } else if (!data.commits_count) {
+    return 'nothingToMerge';
+  } else if (this.mergeStatus === 'unchecked') {
+    return 'checking';
+  } else if (data.has_conflicts) {
+    return 'conflicts';
+  } else if (data.work_in_progress) {
+    return 'workInProgress';
+  } else if (this.onlyAllowMergeIfPipelineSucceeds && this.isPipelineFailed) {
+    return 'pipelineFailed';
+  } else if (this.hasMergeableDiscussionsState) {
+    return 'unresolvedDiscussions';
+  } else if (this.isPipelineBlocked) {
+    return 'pipelineBlocked';
+  } else if (this.hasSHAChanged) {
+    return 'shaMismatch';
+  } else if (this.mergeWhenPipelineSucceeds) {
+    return this.mergeError ? 'autoMergeFailed' : 'mergeWhenPipelineSucceeds';
+  } else if (!this.canMerge) {
+    return 'notAllowedToMerge';
+  } else if (this.canBeMerged) {
+    return 'readyToMerge';
+  }
+  return null;
+}
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
new file mode 100644
index 00000000000..69bc1436284
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -0,0 +1,138 @@
+import Timeago from 'timeago.js';
+import { getStateKey } from '../dependencies';
+
+export default class MergeRequestStore {
+
+  constructor(data) {
+    this.sha = data.diff_head_sha;
+    this.gitlabLogo = data.gitlabLogo;
+
+    this.setData(data);
+  }
+
+  setData(data) {
+    const currentUser = data.current_user;
+    const pipelineStatus = data.pipeline ? data.pipeline.details.status : null;
+
+    this.title = data.title;
+    this.targetBranch = data.target_branch;
+    this.sourceBranch = data.source_branch;
+    this.mergeStatus = data.merge_status;
+    this.commitMessage = data.merge_commit_message;
+    this.commitMessageWithDescription = data.merge_commit_message_with_description;
+    this.commitsCount = data.commits_count;
+    this.divergedCommitsCount = data.diverged_commits_count;
+    this.pipeline = data.pipeline || {};
+    this.deployments = this.deployments || data.deployments || [];
+
+    if (data.issues_links) {
+      const links = data.issues_links;
+      const { closing } = links;
+      const mentioned = links.mentioned_but_not_closing;
+      const assignToMe = links.assign_to_closing;
+
+      if (closing || mentioned || assignToMe) {
+        this.relatedLinks = { closing, mentioned, assignToMe };
+      }
+    }
+
+    this.updatedAt = data.updated_at;
+    this.mergedAt = MergeRequestStore.getEventDate(data.merge_event);
+    this.closedAt = MergeRequestStore.getEventDate(data.closed_event);
+    this.mergedBy = MergeRequestStore.getAuthorObject(data.merge_event);
+    this.closedBy = MergeRequestStore.getAuthorObject(data.closed_event);
+    this.setToMWPSBy = MergeRequestStore.getAuthorObject({ author: data.merge_user || {} });
+    this.mergeUserId = data.merge_user_id;
+    this.currentUserId = gon.current_user_id;
+    this.sourceBranchPath = data.source_branch_path;
+    this.sourceBranchLink = data.source_branch_with_namespace_link;
+    this.mergeError = data.merge_error;
+    this.targetBranchPath = data.target_branch_commits_path;
+    this.conflictResolutionPath = data.conflict_resolution_path;
+    this.cancelAutoMergePath = data.cancel_merge_when_pipeline_succeeds_path;
+    this.removeWIPPath = data.remove_wip_path;
+    this.sourceBranchRemoved = !data.source_branch_exists;
+    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;
+    this.isRemovingSourceBranch = this.isRemovingSourceBranch || false;
+    this.isOpen = data.state === 'opened' || data.state === 'reopened' || false;
+    this.hasMergeableDiscussionsState = data.mergeable_discussions_state === false;
+    this.canRemoveSourceBranch = currentUser.can_remove_source_branch || false;
+    this.canMerge = !!data.merge_path;
+    this.canCreateIssue = currentUser.can_create_issue || false;
+    this.canCancelAutomaticMerge = !!data.cancel_merge_when_pipeline_succeeds_path;
+    this.hasSHAChanged = this.sha !== data.diff_head_sha;
+    this.canBeMerged = data.can_be_merged || false;
+
+    // Cherry-pick and Revert actions related
+    this.canCherryPickInCurrentMR = currentUser.can_cherry_pick_on_current_merge_request || false;
+    this.canRevertInCurrentMR = currentUser.can_revert_on_current_merge_request || false;
+    this.cherryPickInForkPath = currentUser.cherry_pick_in_fork_path;
+    this.revertInForkPath = currentUser.revert_in_fork_path;
+
+    // CI related
+    this.ciEnvironmentsStatusPath = data.ci_environments_status_path;
+    this.hasCI = data.has_ci;
+    this.ciStatus = data.ci_status;
+    this.isPipelineFailed = this.ciStatus ? (this.ciStatus === 'failed' || this.ciStatus === 'canceled') : false;
+    this.pipelineDetailedStatus = pipelineStatus;
+    this.isPipelineActive = data.pipeline ? data.pipeline.active : false;
+    this.isPipelineBlocked = pipelineStatus ? pipelineStatus.group === 'manual' : false;
+    this.ciStatusFaviconPath = pipelineStatus ? pipelineStatus.favicon : null;
+
+    this.setState(data);
+  }
+
+  setState(data) {
+    if (this.isOpen) {
+      this.state = getStateKey.call(this, data);
+    } else {
+      switch (data.state) {
+        case 'merged':
+          this.state = 'merged';
+          break;
+        case 'closed':
+          this.state = 'closed';
+          break;
+        case 'locked':
+          this.state = 'locked';
+          break;
+        default:
+          this.state = null;
+      }
+    }
+  }
+
+  static getAuthorObject(event) {
+    if (!event) {
+      return {};
+    }
+
+    return {
+      name: event.author.name || '',
+      username: event.author.username || '',
+      webUrl: event.author.web_url || '',
+      avatarUrl: event.author.avatar_url || '',
+    };
+  }
+
+  static getEventDate(event) {
+    const timeagoInstance = new Timeago();
+
+    if (!event) {
+      return '';
+    }
+
+    return timeagoInstance.format(event.updated_at);
+  }
+
+}
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
new file mode 100644
index 00000000000..605dd3a1ff4
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
@@ -0,0 +1,37 @@
+const stateToComponentMap = {
+  merged: 'mr-widget-merged',
+  closed: 'mr-widget-closed',
+  locked: 'mr-widget-locked',
+  conflicts: 'mr-widget-conflicts',
+  missingBranch: 'mr-widget-missing-branch',
+  workInProgress: 'mr-widget-wip',
+  readyToMerge: 'mr-widget-ready-to-merge',
+  nothingToMerge: 'mr-widget-nothing-to-merge',
+  notAllowedToMerge: 'mr-widget-not-allowed',
+  archived: 'mr-widget-archived',
+  checking: 'mr-widget-checking',
+  unresolvedDiscussions: 'mr-widget-unresolved-discussions',
+  pipelineBlocked: 'mr-widget-pipeline-blocked',
+  pipelineFailed: 'mr-widget-pipeline-failed',
+  mergeWhenPipelineSucceeds: 'mr-widget-merge-when-pipeline-succeeds',
+  failedToMerge: 'mr-widget-failed-to-merge',
+  autoMergeFailed: 'mr-widget-auto-merge-failed',
+  shaMismatch: 'mr-widget-sha-mismatch',
+};
+
+const statesToShowHelpWidget = [
+  'locked',
+  'conflicts',
+  'workInProgress',
+  'readyToMerge',
+  'checking',
+  'unresolvedDiscussions',
+  'pipelineFailed',
+  'pipelineBlocked',
+  'autoMergeFailed',
+];
+
+export default {
+  stateToComponentMap,
+  statesToShowHelpWidget,
+};
diff --git a/app/assets/javascripts/vue_shared/ci_action_icons.js b/app/assets/javascripts/vue_shared/ci_action_icons.js
new file mode 100644
index 00000000000..b21f0ab49fd
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/ci_action_icons.js
@@ -0,0 +1,21 @@
+import cancelSVG from 'icons/_icon_action_cancel.svg';
+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) {
+  const icons = {
+    icon_action_cancel: cancelSVG,
+    icon_action_play: playSVG,
+    icon_action_retry: retrySVG,
+    icon_action_stop: stopSVG,
+  };
+
+  return icons[action] || '';
+}
diff --git a/app/assets/javascripts/vue_shared/ci_status_icons.js b/app/assets/javascripts/vue_shared/ci_status_icons.js
new file mode 100644
index 00000000000..d9d0cad38e4
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/ci_status_icons.js
@@ -0,0 +1,43 @@
+import BORDERLESS_CANCELED_SVG from 'icons/_icon_status_canceled_borderless.svg';
+import BORDERLESS_CREATED_SVG from 'icons/_icon_status_created_borderless.svg';
+import BORDERLESS_FAILED_SVG from 'icons/_icon_status_failed_borderless.svg';
+import BORDERLESS_MANUAL_SVG from 'icons/_icon_status_manual_borderless.svg';
+import BORDERLESS_PENDING_SVG from 'icons/_icon_status_pending_borderless.svg';
+import BORDERLESS_RUNNING_SVG from 'icons/_icon_status_running_borderless.svg';
+import BORDERLESS_SKIPPED_SVG from 'icons/_icon_status_skipped_borderless.svg';
+import BORDERLESS_SUCCESS_SVG from 'icons/_icon_status_success_borderless.svg';
+import BORDERLESS_WARNING_SVG from 'icons/_icon_status_warning_borderless.svg';
+
+import CANCELED_SVG from 'icons/_icon_status_canceled.svg';
+import CREATED_SVG from 'icons/_icon_status_created.svg';
+import FAILED_SVG from 'icons/_icon_status_failed.svg';
+import MANUAL_SVG from 'icons/_icon_status_manual.svg';
+import PENDING_SVG from 'icons/_icon_status_pending.svg';
+import RUNNING_SVG from 'icons/_icon_status_running.svg';
+import SKIPPED_SVG from 'icons/_icon_status_skipped.svg';
+import SUCCESS_SVG from 'icons/_icon_status_success.svg';
+import WARNING_SVG from 'icons/_icon_status_warning.svg';
+
+export const borderlessStatusIconEntityMap = {
+  icon_status_canceled: BORDERLESS_CANCELED_SVG,
+  icon_status_created: BORDERLESS_CREATED_SVG,
+  icon_status_failed: BORDERLESS_FAILED_SVG,
+  icon_status_manual: BORDERLESS_MANUAL_SVG,
+  icon_status_pending: BORDERLESS_PENDING_SVG,
+  icon_status_running: BORDERLESS_RUNNING_SVG,
+  icon_status_skipped: BORDERLESS_SKIPPED_SVG,
+  icon_status_success: BORDERLESS_SUCCESS_SVG,
+  icon_status_warning: BORDERLESS_WARNING_SVG,
+};
+
+export const statusIconEntityMap = {
+  icon_status_canceled: CANCELED_SVG,
+  icon_status_created: CREATED_SVG,
+  icon_status_failed: FAILED_SVG,
+  icon_status_manual: MANUAL_SVG,
+  icon_status_pending: PENDING_SVG,
+  icon_status_running: RUNNING_SVG,
+  icon_status_skipped: SKIPPED_SVG,
+  icon_status_success: SUCCESS_SVG,
+  icon_status_warning: WARNING_SVG,
+};
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
new file mode 100644
index 00000000000..caa28bff6db
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -0,0 +1,52 @@
+<script>
+import ciIcon from './ci_icon.vue';
+/**
+ * Renders CI Badge link with CI icon and status text based on
+ * API response shared between all places where it is used.
+ *
+ * Receives status object containing:
+ * status: {
+ *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   group:"running" // used for CSS class
+ *   icon: "icon_status_running" // used to render the icon
+ *   label:"running" // used for potential tooltip
+ *   text:"running" // text rendered
+ * }
+ *
+ * Used in:
+ * - Pipelines table - first column
+ * - Jobs table - first column
+ * - Pipeline show view - header
+ * - Job show view - header
+ * - MR widget
+ */
+
+export default {
+  props: {
+    status: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  components: {
+    ciIcon,
+  },
+
+  computed: {
+    cssClass() {
+      const className = this.status.group;
+
+      return className ? `ci-status ci-${this.status.group}` : 'ci-status';
+    },
+  },
+};
+</script>
+<template>
+  <a
+    :href="status.details_path"
+    :class="cssClass">
+    <ci-icon :status="status" />
+    {{status.text}}
+  </a>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
new file mode 100644
index 00000000000..ec88119e16c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -0,0 +1,50 @@
+<script>
+  import { statusIconEntityMap } from '../ci_status_icons';
+
+  /**
+   * Renders CI icon based on API response shared between all places where it is used.
+   *
+   * Receives status object containing:
+   * status: {
+   *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+   *   group:"running" // used for CSS class
+   *   icon: "icon_status_running" // used to render the icon
+   *   label:"running" // used for potential tooltip
+   *   text:"running" // text rendered
+   * }
+   *
+   * Used in:
+   * - Pipelines table Badge
+   * - Pipelines table mini graph
+   * - Pipeline graph
+   * - Pipeline show view badge
+   * - Jobs table
+   * - Jobs show view header
+   * - Jobs show view sidebar
+   */
+  export default {
+    props: {
+      status: {
+        type: Object,
+        required: true,
+      },
+    },
+
+    computed: {
+      statusIconSvg() {
+        return statusIconEntityMap[this.status.icon];
+      },
+
+      cssClass() {
+        const status = this.status.group;
+        return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
+      },
+    },
+  };
+</script>
+<template>
+  <span
+    :class="cssClass"
+    v-html="statusIconSvg">
+  </span>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/commit.js b/app/assets/javascripts/vue_shared/components/commit.js
index fb68abd95a2..23bc5fbc034 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: {
@@ -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"
+          <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.web_url"
+            :img-src="author.avatar_url"
+            :img-alt="userImageAltDescription"
+            :tooltip-text="author.username"
+          />
           <a class="commit-row-message"
             :href="commitUrl">
             {{title}}
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..fd0dcd716d6
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -0,0 +1,122 @@
+<script>
+import ciIconBadge from './ci_badge_link.vue';
+import timeagoTooltip from './time_ago_tooltip.vue';
+import tooltipMixin from '../mixins/tooltip';
+import userAvatarLink from './user_avatar/user_avatar_link.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: true,
+    },
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+
+  mixins: [
+    tooltipMixin,
+  ],
+
+  components: {
+    ciIconBadge,
+    timeagoTooltip,
+    userAvatarLink,
+  },
+
+  computed: {
+    userAvatarAltText() {
+      return `${this.user.name}'s avatar`;
+    },
+  },
+
+  methods: {
+    onClickAction(action) {
+      this.$emit('postAction', action);
+    },
+  },
+};
+</script>
+<template>
+  <header class="page-content-header top-area">
+    <section class="header-main-content">
+
+      <ci-icon-badge :status="status" />
+
+      <strong>
+        {{itemName}} #{{itemId}}
+      </strong>
+
+      triggered
+
+      <timeago-tooltip :time="time" />
+
+      by
+
+      <user-avatar-link
+        :link-href="user.web_url"
+        :img-src="user.avatar_url"
+        :img-alt="userAvatarAltText"
+        :tooltip-text="user.name"
+        :img-size="24"
+        />
+
+      <a
+        :href="user.web_url"
+        :title="user.email"
+        class="js-user-link commit-committer-link"
+        ref="tooltip">
+        {{user.name}}
+      </a>
+    </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)"
+          :class="action.cssClass"
+          type="button">
+          {{action.label}}
+        </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/memory_graph.js b/app/assets/javascripts/vue_shared/components/memory_graph.js
new file mode 100644
index 00000000000..643b77e04c7
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/memory_graph.js
@@ -0,0 +1,115 @@
+export default {
+  name: 'MemoryGraph',
+  props: {
+    metrics: { type: Array, required: true },
+    deploymentTime: { type: Number, required: true },
+    width: { type: String, required: true },
+    height: { type: String, required: true },
+  },
+  data() {
+    return {
+      pathD: '',
+      pathViewBox: '',
+      dotX: '',
+      dotY: '',
+    };
+  },
+  computed: {
+    getFormattedMedian() {
+      const deployedSince = gl.utils.getTimeago().format(this.deploymentTime * 1000);
+      return `Deployed ${deployedSince}`;
+    },
+  },
+  methods: {
+    /**
+     * Returns metric value index in metrics array
+     * with timestamp closest to matching median
+     */
+    getMedianMetricIndex(median, metrics) {
+      let matchIndex = 0;
+      let timestampDiff = 0;
+      let smallestDiff = 0;
+
+      const metricTimestamps = metrics.map(v => v[0]);
+
+      // Find metric timestamp which is closest to deploymentTime
+      timestampDiff = Math.abs(metricTimestamps[0] - median);
+      metricTimestamps.forEach((timestamp, index) => {
+        if (index === 0) { // Skip first element
+          return;
+        }
+
+        smallestDiff = Math.abs(timestamp - median);
+        if (smallestDiff < timestampDiff) {
+          matchIndex = index;
+          timestampDiff = smallestDiff;
+        }
+      });
+
+      return matchIndex;
+    },
+
+    /**
+     * Get Graph Plotting values to render Line and Dot
+     */
+    getGraphPlotValues(median, metrics) {
+      const renderData = metrics.map(v => v[1]);
+      const medianMetricIndex = this.getMedianMetricIndex(median, metrics);
+      let cx = 0;
+      let cy = 0;
+
+      // Find Maximum and Minimum values from `renderData` array
+      const maxMemory = Math.max.apply(null, renderData);
+      const minMemory = Math.min.apply(null, renderData);
+
+      // Find difference between extreme ends
+      const diff = maxMemory - minMemory;
+      const lineWidth = renderData.length;
+
+      // Iterate over metrics values and perform following
+      // 1. Find x & y co-ords for deploymentTime's memory value
+      // 2. Return line path against maxMemory
+      const linePath = renderData.map((y, x) => {
+        if (medianMetricIndex === x) {
+          cx = x;
+          cy = maxMemory - y;
+        }
+        return `${x} ${maxMemory - y}`;
+      });
+
+      return {
+        pathD: linePath,
+        pathViewBox: {
+          lineWidth,
+          diff,
+        },
+        dotX: cx,
+        dotY: cy,
+      };
+    },
+
+    /**
+     * Render Graph based on provided median and metrics values
+     */
+    renderGraph(median, metrics) {
+      const { pathD, pathViewBox, dotX, dotY } = this.getGraphPlotValues(median, metrics);
+
+      // Set props and update graph on UI.
+      this.pathD = `M ${pathD}`;
+      this.pathViewBox = `0 0 ${pathViewBox.lineWidth} ${pathViewBox.diff}`;
+      this.dotX = dotX;
+      this.dotY = dotY;
+    },
+  },
+  mounted() {
+    this.renderGraph(this.deploymentTime, this.metrics);
+  },
+  template: `
+    <div class="memory-graph-container">
+      <svg class="has-tooltip" :title="getFormattedMedian" :width="width" :height="height" xmlns="http://www.w3.org/2000/svg">
+        <path :d="pathD" :viewBox="pathViewBox" />
+        <circle r="1.5" :cx="dotX" :cy="dotY" tranform="translate(0 -1)" />
+      </svg>
+    </div>
+  `,
+};
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 fbae85c85f6..3283a6bcacc 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -2,9 +2,9 @@
 import AsyncButtonComponent from '../../pipelines/components/async_button.vue';
 import PipelinesActionsComponent from '../../pipelines/components/pipelines_actions';
 import PipelinesArtifactsComponent from '../../pipelines/components/pipelines_artifacts';
-import PipelinesStatusComponent from '../../pipelines/components/status';
+import 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';
 
@@ -39,7 +39,7 @@ export default {
     'commit-component': CommitComponent,
     'dropdown-stage': PipelinesStageComponent,
     'pipeline-url': PipelinesUrlComponent,
-    'status-scope': PipelinesStatusComponent,
+    ciBadge,
     'time-ago': PipelinesTimeagoComponent,
   },
 
@@ -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,11 +79,8 @@ 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}`,
@@ -197,11 +196,20 @@ export default {
 
       return '';
     },
+
+    pipelineStatus() {
+      if (this.pipeline.details && this.pipeline.details.status) {
+        return this.pipeline.details.status;
+      }
+      return {};
+    },
   },
 
   template: `
     <tr class="commit">
-      <status-scope :pipeline="pipeline"/>
+      <td class="commit-link">
+        <ci-badge :status="pipelineStatus"/>
+      </td>
 
       <pipeline-url :pipeline="pipeline"></pipeline-url>
 
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
new file mode 100644
index 00000000000..af2b4c6786e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
@@ -0,0 +1,58 @@
+<script>
+import tooltipMixin from '../mixins/tooltip';
+import timeagoMixin from '../mixins/timeago';
+import '../../lib/utils/datetime_utility';
+
+/**
+ * Port of ruby helper time_ago_with_tooltip
+ */
+
+export default {
+  props: {
+    time: {
+      type: String,
+      required: true,
+    },
+
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+
+    shortFormat: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    cssClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  mixins: [
+    tooltipMixin,
+    timeagoMixin,
+  ],
+
+  computed: {
+    timeagoCssClass() {
+      return this.shortFormat ? 'js-short-timeago' : 'js-timeago';
+    },
+  },
+};
+</script>
+<template>
+  <time
+    :class="[timeagoCssClass, cssClass]"
+    class="js-timeago js-timeago-render"
+    :title="tooltipTitle(time)"
+    :data-placement="tooltipPlacement"
+    data-container="body"
+    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..b8db6afda12
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
@@ -0,0 +1,80 @@
+<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}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <img
+    class="avatar"
+    :class="[avatarSizeClass, cssClasses]"
+    :src="imgSrc"
+    :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
new file mode 100644
index 00000000000..995c0c98505
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/mixins/tooltip.js
@@ -0,0 +1,13 @@
+export default {
+  mounted() {
+    $(this.$refs.tooltip).tooltip();
+  },
+
+  updated() {
+    $(this.$refs.tooltip).tooltip('fixTitle');
+  },
+
+  beforeDestroy() {
+    $(this.$refs.tooltip).tooltip('destroy');
+  },
+};
diff --git a/app/assets/javascripts/vue_shared/translate.js b/app/assets/javascripts/vue_shared/translate.js
new file mode 100644
index 00000000000..f83c4b00761
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/translate.js
@@ -0,0 +1,42 @@
+import {
+  __,
+  n__,
+  s__,
+} from '../locale';
+
+export default (Vue) => {
+  Vue.mixin({
+    methods: {
+      /**
+        Translates `text`
+
+        @param text The text to be translated
+        @returns {String} The translated text
+      **/
+      __,
+      /**
+        Translate the text with a number
+        if the number is more than 1 it will use the `pluralText` translation.
+        This method allows for contexts, see below re. contexts
+
+        @param text Singular text to translate (eg. '%d day')
+        @param pluralText Plural text to translate (eg. '%d days')
+        @param count Number to decide which translation to use (eg. 2)
+        @returns {String} Translated text with the number replaced (eg. '2 days')
+      **/
+      n__,
+      /**
+        Translate context based text
+        Either pass in the context translation like `Context|Text to translate`
+        or allow for dynamic text by doing passing in the context first & then the text to translate
+
+        @param keyOrContext Can be either the key to translate including the context
+                            (eg. 'Context|Text') or just the context for the translation
+                            (eg. 'Context')
+        @param key Is the dynamic variable you want to be translated
+        @returns {String} Translated context based text
+      **/
+      s__,
+    },
+  });
+};
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 5bb7e8caec1..b8ba77f4513 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";
@@ -47,3 +48,4 @@
 @import "framework/emoji-sprites.scss";
 @import "framework/icons.scss";
 @import "framework/snippets.scss";
+@import "framework/memory_graph.scss";
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 7c50b80fd2b..3cd7f81da47 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -159,3 +159,31 @@ a {
 .fade-in {
   animation: fadeIn $fade-in-duration 1;
 }
+
+@keyframes fadeInHalf {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0.5;
+  }
+}
+
+.fade-in-half {
+  animation: fadeInHalf $fade-in-duration 1;
+}
+
+@keyframes fadeInFull {
+  0% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-in-full {
+  animation: fadeInFull $fade-in-duration 1;
+}
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 3f5b78ed445..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); }
@@ -93,3 +95,14 @@
     align-self: center;
   }
 }
+
+.avatar-counter {
+  background-color: $gray-darkest;
+  color: $white-light;
+  border: 1px solid $border-color;
+  border-radius: 1em;
+  font-family: $regular_font;
+  font-size: 9px;
+  line-height: 16px;
+  text-align: center;
+}
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 9159927ed8b..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;
@@ -108,8 +108,9 @@
 }
 
 .award-control {
-  margin-right: 5px;
+  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);
   }
@@ -237,7 +238,3 @@
     vertical-align: middle;
   }
 }
-
-.note-awards .award-control-icon-positive {
-  left: 6px;
-}
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 1a6f36d032d..57387b913dc 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -92,7 +92,8 @@ hr {
 .item-title { font-weight: 600; }
 
 /** FLASH message **/
-.author_link {
+.author_link,
+.author-link {
   color: $gl-link-color;
 }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 73ded9f30d4..5ab48b6c874 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;
   }
 
@@ -251,14 +251,16 @@
   }
 
   .dropdown-header {
-    color: $gl-text-color;
+    color: $gl-text-color-secondary;
     font-size: 13px;
-    font-weight: 600;
     line-height: 22px;
-    text-transform: capitalize;
     padding: 0 16px;
   }
 
+  &.capitalize-header .dropdown-header {
+    text-transform: capitalize;
+  }
+
   .separator + .dropdown-header {
     padding-top: 2px;
   }
@@ -337,8 +339,8 @@
 .dropdown-menu-user {
   .avatar {
     float: left;
-    width: 30px;
-    height: 30px;
+    width: 2 * $gl-padding;
+    height: 2 * $gl-padding;
     margin: 0 10px 0 0;
   }
 }
@@ -381,6 +383,7 @@
 .dropdown-menu-selectable {
   a {
     padding-left: 26px;
+    position: relative;
 
     &.is-indeterminate,
     &.is-active {
@@ -406,6 +409,9 @@
 
     &.is-active::before {
       content: "\f00c";
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
     }
   }
 }
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 c197bf6b9f5..78f425057eb 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%;
       }
     }
@@ -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;
       }
@@ -162,6 +170,18 @@
     &.code {
       padding: 0;
     }
+
+    .list-inline.previews {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-content: flex-start;
+      align-items: baseline;
+
+      .preview {
+        padding: $gl-padding;
+      }
+    }
   }
 }
 
@@ -234,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 0692f65043b..90051ffe753 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -104,6 +104,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,30 +127,25 @@
   .remove-token {
     display: inline-block;
     padding-left: 4px;
-    padding-right: 8px;
+    padding-right: 0;
 
     .fa-close {
-      color: $gl-text-color-disabled;
+      color: $gl-text-color-secondary;
     }
 
     &:hover .fa-close {
-      color: $gl-text-color-secondary;
+      color: $gl-text-color;
     }
-  }
 
-  .name {
-    background-color: $filter-name-resting-color;
-    color: $filter-name-text-color;
-    border-radius: 2px 0 0 2px;
-    margin-right: 1px;
-    text-transform: capitalize;
-  }
+    &.inverted {
+      .fa-close {
+        color: $gl-text-color-secondary-inverted;
+      }
 
-  .value-container {
-    background-color: $white-normal;
-    color: $filter-value-text-color;
-    border-radius: 0 2px 2px 0;
-    margin-right: 5px;
+      &:hover .fa-close {
+        color: $gl-text-color-inverted;
+      }
+    }
   }
 
   .selected {
@@ -253,7 +264,9 @@
 }
 
 .filtered-search-input-dropdown-menu {
+  max-height: 215px;
   max-width: 280px;
+  overflow: auto;
 
   @media (max-width: $screen-xs-min) {
     width: auto;
@@ -273,17 +286,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,
@@ -291,6 +297,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 {
@@ -302,11 +319,6 @@
       color: inherit;
     }
   }
-
-  .fa {
-    position: static;
-  }
-
 }
 
 .filtered-search-history-dropdown {
@@ -363,11 +375,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;
@@ -468,4 +475,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..25b4feca3c3 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -36,6 +36,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 6d9218310eb..d8645afb7da 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -24,19 +24,33 @@ header {
 
   &.navbar-gitlab {
     padding: 0 16px;
-    z-index: 100;
+    z-index: 400;
     margin-bottom: 0;
     min-height: $header-height;
     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 87667f39ab8..ef864e8f6a9 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -1,4 +1,5 @@
-.ci-status-icon-success {
+.ci-status-icon-success,
+.ci-status-icon-passed {
   color: $green-500;
 
   svg {
@@ -64,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 94d48469d2c..6d262a63d81 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;
 
@@ -255,6 +255,7 @@ ul.controls {
       .avatar-inline {
         margin-left: 0;
         margin-right: 0;
+        margin-bottom: 0;
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/memory_graph.scss b/app/assets/stylesheets/framework/memory_graph.scss
new file mode 100644
index 00000000000..81cdf6b59e4
--- /dev/null
+++ b/app/assets/stylesheets/framework/memory_graph.scss
@@ -0,0 +1,22 @@
+.memory-graph-container {
+  svg {
+    background: $white-light;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0 0 4px $gray-darkest inset;
+    }
+  }
+
+  path {
+    fill: none;
+    stroke: $blue-500;
+    stroke-width: 2px;
+  }
+
+  circle {
+    stroke: $blue-700;
+    fill: $blue-700;
+    stroke-width: 4px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index eb73f7cc794..678af978edd 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -112,7 +112,7 @@
     }
   }
 
-  .issue_edited_ago,
+  .issue-edited-ago,
   .note_edited_ago {
     display: none;
   }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index b6cf5101d60..28b2a7cfacd 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -24,10 +24,10 @@
 }
 
 @mixin scrolling-links() {
-  white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
+  display: flex;
 
   &::-webkit-scrollbar {
     display: none;
@@ -35,6 +35,7 @@
 }
 
 .nav-links {
+  display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
@@ -42,17 +43,16 @@
   border-bottom: 1px solid $border-color;
 
   li {
-    display: inline-block;
+    display: flex;
 
     a {
-      display: inline-block;
       padding: $gl-btn-padding;
       padding-bottom: 11px;
-      margin-bottom: -1px;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
       border-bottom: 2px solid transparent;
+      white-space: nowrap;
 
       &:hover,
       &:active,
@@ -85,10 +85,10 @@
     .container-fluid {
       background-color: $gray-normal;
       margin-bottom: 0;
+      display: flex;
     }
 
     li {
-
       &.active a {
         border-bottom: none;
         color: $link-underline-blue;
@@ -137,9 +137,9 @@
   }
 
   .nav-links {
-    display: inline-block;
     margin-bottom: 0;
     border-bottom: none;
+    float: left;
 
     &.wide {
       width: 100%;
@@ -291,6 +291,7 @@
   border-bottom: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
   text-align: center;
+  margin-top: $header-height;
 
   .container-fluid {
     position: relative;
@@ -336,6 +337,10 @@
     border-bottom: none;
     height: 51px;
 
+    @media (min-width: $screen-sm-min) {
+      justify-content: center;
+    }
+
     li {
       a {
         padding-top: 10px;
@@ -347,6 +352,10 @@
 .scrolling-tabs-container {
   position: relative;
 
+  .merge-request-tabs-container & {
+    overflow: hidden;
+  }
+
   .nav-links {
     @include scrolling-links();
   }
@@ -428,14 +437,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 {
@@ -484,10 +493,6 @@
 .inner-page-scroll-tabs {
   position: relative;
 
-  .nav-links {
-    padding-bottom: 1px;
-  }
-
   .fade-right {
     @include fade(left, $white-light);
     right: 0;
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/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 746c9c25620..5b62d7fa3a7 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -53,6 +53,7 @@
 
 .right-sidebar-expanded {
   padding-right: 0;
+  z-index: 300;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
     &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper {
@@ -80,6 +81,10 @@
 
   &.affix {
     position: fixed;
-    top: 0;
+    top: $header-height;
+  }
+
+  &:not(.affix-top) {
+    min-height: 100%;
   }
 }
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index d2164a1d333..10881987038 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -3,33 +3,9 @@
   margin: 0;
   padding: 0;
 
-  .timeline-entry {
-    padding: $gl-padding $gl-btn-padding 0;
-    border-color: $white-normal;
-    color: $gl-text-color;
-    border-bottom: 1px solid $border-white-light;
-
-    .timeline-entry-inner {
-      position: relative;
-    }
-
-    &:target {
-      background: $line-target-blue;
-    }
-
-    .avatar {
-      margin-right: 15px;
-    }
-
-    .controls {
-      padding-top: 10px;
-      float: right;
-    }
-  }
-
-  .note-text {
-    p:last-child {
-      margin-bottom: 0;
+  &::before {
+    @include notes-media('max', $screen-xs-min) {
+      background: none;
     }
   }
 
@@ -46,13 +22,15 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
-  .timeline {
-    &::before {
-      background: none;
-    }
+.timeline-entry {
+  border-color: $white-normal;
+  color: $gl-text-color;
+  border-bottom: 1px solid $border-white-light;
 
-    .timeline-entry .timeline-entry-inner {
+  .timeline-entry-inner {
+    position: relative;
+
+    @include notes-media('max', $screen-xs-min) {
       .timeline-icon {
         display: none;
       }
@@ -62,6 +40,20 @@
       }
     }
   }
+
+  &:target,
+  &.target {
+    background: $line-target-blue;
+  }
+
+  .avatar {
+    margin-right: 15px;
+  }
+
+  .controls {
+    padding-top: 10px;
+    float: right;
+  }
 }
 
 .discussion .timeline-entry {
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 49741c963df..975a4b40383 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -101,6 +101,8 @@ $gl-font-size: 14px;
 $gl-text-color: rgba(0, 0, 0, .85);
 $gl-text-color-secondary: rgba(0, 0, 0, .55);
 $gl-text-color-disabled: rgba(0, 0, 0, .35);
+$gl-text-color-inverted: rgba(255, 255, 255, 1.0);
+$gl-text-color-secondary-inverted: rgba(255, 255, 255, .85);
 $gl-text-green: $green-600;
 $gl-text-red: $red-500;
 $gl-text-orange: $orange-600;
@@ -109,6 +111,7 @@ $gl-link-hover-color: $blue-800;
 $gl-grayish-blue: #7f8fa4;
 $gl-gray: $gl-text-color;
 $gl-gray-dark: #313236;
+$gl-gray-light: #5c5c5c;
 $gl-header-color: #4c4e54;
 $gl-header-nav-hover-color: #434343;
 $placeholder-text-color: rgba(0, 0, 0, .42);
@@ -160,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;
@@ -244,7 +247,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;
@@ -291,7 +293,7 @@ $btn-white-active: #848484;
 /*
 * Badges
 */
-$badge-bg: #eee;
+$badge-bg: rgba(0, 0, 0, 0.07);
 $badge-color: $gl-text-color-secondary;
 
 /*
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 0be1c215959..ebe662136d5 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;
 
@@ -207,8 +209,13 @@
     margin-bottom: 5px;
   }
 
-  &.is-active {
+  &.is-active,
+  &.is-active .card-assignee:hover a {
     background-color: $row-hover;
+
+    &:first-child:not(:only-child) {
+      box-shadow: -10px 0 10px 1px $row-hover;
+    }
   }
 
   .label {
@@ -224,7 +231,7 @@
 }
 
 .card-title {
-  margin: 0;
+  margin: 0 30px 0 0;
   font-size: 1em;
   line-height: inherit;
 
@@ -240,10 +247,69 @@
   min-height: 20px;
 
   .card-assignee {
-    margin-left: auto;
-    margin-right: 5px;
-    padding-left: 10px;
+    display: flex;
+    justify-content: flex-end;
+    position: absolute;
+    right: 15px;
     height: 20px;
+    width: 20px;
+
+    .avatar-counter {
+      display: none;
+      vertical-align: middle;
+      min-width: 20px;
+      line-height: 19px;
+      height: 20px;
+      padding-left: 2px;
+      padding-right: 2px;
+      border-radius: 2em;
+    }
+
+    img {
+      vertical-align: top;
+    }
+
+    a {
+      position: relative;
+      margin-left: -15px;
+    }
+
+    a:nth-child(1) {
+      z-index: 3;
+    }
+
+    a:nth-child(2) {
+      z-index: 2;
+    }
+
+    a:nth-child(3) {
+      z-index: 1;
+    }
+
+    a:nth-child(4) {
+      display: none;
+    }
+
+    &:hover {
+      .avatar-counter {
+        display: inline-block;
+      }
+
+      a {
+        position: static;
+        background-color: $white-light;
+        transition: background-color 0s;
+        margin-left: auto;
+
+        &:nth-child(4) {
+          display: block;
+        }
+
+        &:first-child:not(:only-child) {
+          box-shadow: -10px 0 10px 1px $white-light;
+        }
+      }
+    }
   }
 
   .avatar {
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 724b4080ee0..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;
 
@@ -378,7 +363,7 @@
         background-color: $row-hover;
       }
 
-      .fa-spinner {
+      .fa-refresh {
         font-size: 13px;
         margin-left: 3px;
       }
@@ -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..bb72f453d1b 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,
@@ -273,7 +271,7 @@
     }
   }
 
-  .commit-id {
+  .commit-sha {
     color: $gl-link-color;
   }
 
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 403724cd68a..7bec4bd5f56 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -3,6 +3,25 @@
   margin: 24px auto 0;
   position: relative;
 
+  .landing {
+    margin-top: 10px;
+
+    .inner-content {
+      white-space: normal;
+
+      h4,
+      p {
+        margin: 7px 0 0;
+        max-width: 480px;
+        padding: 0 $gl-padding;
+
+        @media (max-width: $screen-sm-min) {
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+
   .col-headers {
     ul {
       margin: 0;
@@ -175,7 +194,7 @@
     }
 
     .stage-nav-item {
-      display: block;
+      display: flex;
       line-height: 65px;
       border-top: 1px solid transparent;
       border-bottom: 1px solid transparent;
@@ -209,14 +228,10 @@
       }
 
       .stage-nav-item-cell {
-        float: left;
-
-        &.stage-name {
-          width: 65%;
-        }
-
         &.stage-median {
-          width: 35%;
+          margin-left: auto;
+          margin-right: $gl-padding;
+          min-width: calc(35% - #{$gl-padding});
         }
       }
 
@@ -372,7 +387,7 @@
         padding: 0 3px 0 0;
       }
 
-      .branch-name {
+      .ref-name {
         color: $black;
         display: inline-block;
         max-width: 180px;
@@ -383,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 feefaad8a15..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;
 
@@ -570,14 +533,7 @@
 
 .diff-comments-more-count,
 .diff-notes-collapse {
-  background-color: $gray-darkest;
-  color: $white-light;
-  border: 1px solid $white-light;
-  border-radius: 1em;
-  font-family: $regular_font;
-  font-size: 9px;
-  line-height: 17px;
-  text-align: center;
+  @extend .avatar-counter;
 }
 
 .diff-notes-collapse {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 026d35295d7..f269d53093d 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -5,11 +5,6 @@
   }
 }
 
-.environments-list-loading {
-  width: 100%;
-  font-size: 34px;
-}
-
 .environments-folder-name {
   font-weight: normal;
   padding-top: 20px;
@@ -69,12 +64,12 @@
       }
     }
 
-    .commit-title {
-      margin: 0;
+    .btn .text-center {
+      display: inline;
     }
 
-    .avatar-image-container {
-      text-decoration: none;
+    .commit-title {
+      margin: 0;
     }
 
     .icon-play {
@@ -95,7 +90,7 @@
     }
 
     .build-link,
-    .branch-name {
+    .ref-name {
       color: $gl-text-color;
     }
 
@@ -140,7 +135,7 @@
     }
 
     .branch-commit {
-      .commit-id {
+      .commit-sha {
         margin-right: 0;
       }
     }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index ad6eb9f6fe0..c2346f2f1c3 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -10,7 +10,6 @@
   .page-content-header,
   .commit-box,
   .info-well,
-  .notes,
   .commit-ci-menu,
   .files-changed {
     @extend .fixed-width-container;
@@ -23,16 +22,6 @@
     .merge-manually {
       @extend .fixed-width-container;
     }
-
-    .merge-request-tabs-holder {
-      &.affix {
-        border-bottom: 1px solid $border-color;
-
-        .nav-links {
-          border: 0;
-        }
-      }
-    }
   }
 
   .merge-request-details {
@@ -67,6 +56,10 @@
     padding: 5px;
     max-height: calc(100vh - 100px);
   }
+
+  .emoji-block {
+    padding: 10px 0 4px;
+  }
 }
 
 .issuable-filter-count {
@@ -95,10 +88,15 @@
 }
 
 .right-sidebar {
-  a {
+  a,
+  .btn-link {
     color: inherit;
   }
 
+  .btn-link {
+    outline: none;
+  }
+
   .issuable-header-text {
     margin-top: 7px;
   }
@@ -200,8 +198,17 @@
   right: 0;
   transition: width .3s;
   background: $gray-light;
-  padding: 10px 20px;
-  z-index: 2;
+  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;
@@ -215,6 +222,14 @@
       }
     }
 
+    .issuable-sidebar-header {
+      padding-top: 10px;
+    }
+
+    .assign-yourself .btn-link {
+      padding-left: 0;
+    }
+
     .light {
       font-weight: normal;
     }
@@ -239,6 +254,10 @@
       margin-left: 0;
     }
 
+    .assignee .user-list .avatar {
+      margin: 0;
+    }
+
     .username {
       display: block;
       margin-top: 4px;
@@ -260,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;
@@ -301,6 +319,10 @@
         margin-top: 0;
       }
 
+      .sidebar-avatar-counter {
+        padding-top: 2px;
+      }
+
       .todo-undone {
         color: $gl-link-color;
       }
@@ -309,10 +331,15 @@
         display: none;
       }
 
-      .avatar:hover {
+      .avatar:hover,
+      .avatar-counter:hover {
         border-color: $issuable-sidebar-color;
       }
 
+      .avatar-counter:hover {
+        color: $issuable-sidebar-color;
+      }
+
       .btn-clipboard {
         border: none;
         color: $issuable-sidebar-color;
@@ -322,6 +349,17 @@
           color: $gl-text-color;
         }
       }
+
+      &.multiple-users {
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    .sidebar-avatar-counter {
+      width: 24px;
+      height: 24px;
+      border-radius: 12px;
     }
 
     .sidebar-collapsed-user {
@@ -332,6 +370,37 @@
     .issuable-header-btn {
       display: none;
     }
+
+    .multiple-users {
+      height: 24px;
+      margin-bottom: 17px;
+      margin-top: 4px;
+      padding-bottom: 4px;
+
+      .btn-link {
+        padding: 0;
+        border: 0;
+
+        .avatar {
+          margin: 0;
+        }
+      }
+
+      .btn-link:first-child {
+        position: absolute;
+        left: 10px;
+        z-index: 1;
+      }
+
+      .btn-link:last-child {
+        position: absolute;
+        right: 10px;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
   }
 
   a {
@@ -362,7 +431,7 @@
 }
 
 .detail-page-description {
-  padding: 16px 0 0;
+  padding: 16px 0;
 
   small {
     color: $gray-darkest;
@@ -372,7 +441,7 @@
 .edited-text {
   color: $gray-darkest;
   display: block;
-  margin: 0 0 16px;
+  margin: 16px 0 0;
 
   .author_link {
     color: $gray-darkest;
@@ -383,6 +452,12 @@
   margin: -5px;
 }
 
+
+.user-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .participants-author {
   display: inline-block;
   padding: 5px;
@@ -400,13 +475,39 @@
   }
 }
 
-.participants-more {
+.user-item {
+  display: inline-block;
+  padding: 5px;
+  flex-basis: 20%;
+
+  .user-link {
+    display: inline-block;
+  }
+}
+
+.participants-more,
+.user-list-more {
   margin-top: 5px;
   margin-left: 5px;
 
-  a {
+  a,
+  .btn-link {
     color: $gl-text-color-secondary;
   }
+
+  .btn-link {
+    outline: none;
+    padding: 0;
+  }
+
+  .btn-link:hover {
+    @extend a:hover;
+    text-decoration: none;
+  }
+
+  .btn-link:focus {
+    text-decoration: none;
+  }
 }
 
 .issuable-form-padding-top {
@@ -499,6 +600,19 @@
   }
 }
 
+.issuable-list li,
+.issue-info-container .controls {
+  .avatar-counter {
+    display: inline-block;
+    vertical-align: middle;
+    min-width: 16px;
+    line-height: 14px;
+    height: 16px;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+}
+
 .time_tracker {
   padding-bottom: 0;
   border-bottom: 0;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index b18bbc329c3..702e7662527 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -18,6 +18,15 @@
   }
 }
 
+.issue-realtime-pre-pulse {
+  opacity: 0;
+}
+
+.issue-realtime-trigger-pulse {
+  transition: opacity $fade-in-duration linear;
+  opacity: 1;
+}
+
 .check-all-holder {
   line-height: 36px;
   float: left;
@@ -42,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;
@@ -50,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,
@@ -105,7 +123,6 @@ ul.related-merge-requests > li {
 .related-merge-requests {
   .ci-status-link {
     display: block;
-    margin-top: 3px;
     margin-right: 5px;
   }
 
@@ -187,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/labels.scss b/app/assets/stylesheets/pages/labels.scss
index e1ef0b029a5..c10588ac58e 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -116,7 +116,7 @@
 }
 
 .manage-labels-list {
-  > li:not(.empty-message) {
+  > li:not(.empty-message):not(.is-not-draggable) {
     background-color: $white-light;
     cursor: move;
     cursor: -webkit-grab;
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 bca62b7fc31..2dc7f73a295 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -37,12 +37,6 @@
           @include btn-red;
         }
       }
-
-      .dropdown-toggle {
-        .fa {
-          color: inherit;
-        }
-      }
     }
 
     .accept-control {
@@ -88,18 +82,13 @@
     }
   }
 
-  .ci_widget {
-    border-bottom: 1px solid $well-inner-border;
+  .ci-widget {
     color: $gl-text-color;
     display: -webkit-flex;
     display: flex;
     -webkit-align-items: center;
     align-items: center;
-
-    i,
-    svg {
-      margin-right: 8px;
-    }
+    padding: $gl-padding-top $gl-padding 0;
 
     svg {
       position: relative;
@@ -115,16 +104,20 @@
       flex-wrap: wrap;
     }
 
-    .ci-status-icon > .icon-link > svg {
+    .icon-link > .ci-status-icon > svg {
       width: 22px;
       height: 22px;
+      margin-right: 8px;
+    }
+
+    .ci-error {
+      margin-right: $btn-side-margin;
     }
   }
 
   .mr-widget-body,
-  .ci_widget,
   .mr-widget-footer {
-    padding: 16px;
+    margin: 16px;
   }
 
   .mr-widget-pipeline-graph {
@@ -132,18 +125,13 @@
 
     .dropdown-menu {
       margin-top: 11px;
+      z-index: 200;
     }
 
     .ci-action-icon-wrapper {
       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;
@@ -166,22 +154,95 @@
 
   .normal {
     color: $gl-text-color;
+    font-size: 15px;
+  }
+
+  .capitalize {
+    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;
   }
 
+  .mr-widget-help {
+    margin: $gl-padding;
+    color: $ci-skipped-color;
+  }
+
+  .mr-info-list {
+
+    &.mr-links {
+      margin-left: 28px;
+    }
+
+    &.mr-memory-usage {
+      margin: 5px 0 10px 25px;
+    }
+  }
+
+  .mr-widget-heading {
+    .btn-default.btn-xs {
+      margin-left: 5px;
+    }
+  }
+
+  .mr-widget-body {
+    .btn {
+      font-size: 15px;
+    }
+
+    .btn-group .btn {
+      padding: 5px 10px;
+
+      &.dropdown-toggle {
+        padding: 5px 7px;
+      }
+    }
+  }
+
   .mr-widget-body {
     h4 {
-      font-weight: 600;
-      font-size: 16px;
+      font-weight: bold;
+      font-size: 15px;
       margin: 5px 0;
       color: $gl-text-color;
 
       &.has-conflicts .fa-exclamation-triangle {
         color: $gl-warning;
       }
+
+      time {
+        font-weight: normal;
+      }
     }
 
     .btn-grouped {
@@ -189,6 +250,85 @@
       margin-right: 7px;
     }
 
+    label {
+      font-weight: normal;
+    }
+
+    .spacing {
+      margin: 0 $gl-padding;
+    }
+
+    .bold {
+      font-weight: bold;
+      font-size: 15px;
+      color: $gl-gray-light;
+    }
+
+    .state-label {
+      font-size: 16px;
+      font-weight: bold;
+      padding-right: 10px;
+    }
+
+    .danger {
+      color: $gl-danger;
+    }
+
+    .mr-widget-help {
+      margin: $gl-padding 0;
+    }
+
+    .with-button {
+      position: relative;
+      top: 6px;
+      margin-bottom: 24px;
+    }
+
+    .spacing,
+    .bold {
+      vertical-align: middle;
+    }
+
+    .dropdown-menu {
+      li a {
+        padding: 5px;
+      }
+
+      .merge-opt-icon,
+      .merge-opt-title {
+        display: inline-block;
+        float: left;
+      }
+
+      .merge-opt-icon svg {
+        height: 15px;
+        width: 15px;
+      }
+
+      .merge-opt-title {
+        margin-left: 8px;
+      }
+    }
+
+    .dropdown-toggle {
+      .fa {
+        color: inherit;
+      }
+    }
+
+    .has-error-message + .has-custom-error {
+      margin-left: 0;
+    }
+
+    .has-custom-error {
+      display: inline-block;
+      margin-left: 70px;
+    }
+
+    .merge-error-text {
+      margin-left: 70px;
+    }
+
     @media (max-width: $screen-xs-max) {
       h4 {
         font-size: 14px;
@@ -220,6 +360,33 @@
         margin: 0;
       }
     }
+
+    .commit-message-editor {
+      label {
+        padding: 0;
+      }
+    }
+
+    &.mr-state-locked .mr-info-list {
+      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 {
@@ -240,6 +407,12 @@
   }
 }
 
+.mr-state-widget .mr-widget-body {
+  .approve-btn {
+    margin-right: 5px;
+  }
+}
+
 .mr_source_commit,
 .mr_target_commit {
   margin-bottom: 0;
@@ -255,16 +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;
-}
-
 .commits-empty {
   text-align: center;
 
@@ -343,61 +506,75 @@
   }
 }
 
-.remove-message-pipes {
-  ul {
-    margin: 10px 0 0 12px;
-    padding: 0;
-    list-style: none;
-    border-left: 2px solid $border-color;
-    display: inline-block;
-  }
+.mr-info-list {
+  position: relative;
+  margin: 10px 0 $gl-padding 12px;
 
-  li {
+  p {
+    margin: 6px 0;
     position: relative;
-    margin: 0;
-    padding: 0;
-    display: block;
+    padding-left: 15px;
 
-    span {
-      margin-left: 15px;
-      max-height: 20px;
+    &::before {
+      content: '';
+      position: absolute;
+      border-top: 2px solid $border-color;
+      height: 1px;
+      top: 9px;
+      width: 8px;
+      left: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
     }
   }
 
-  li::before {
-    content: '';
+  .legend {
+    height: 100%;
+    width: 2px;
+    background: $border-color;
     position: absolute;
-    border-top: 2px solid $border-color;
-    height: 1px;
-    top: 8px;
-    width: 8px;
+    top: -9px;
   }
+}
 
-  li:last-child {
-    &::before {
-      top: 18px;
+.mr-info-list.mr-memory-usage {
+  .legend {
+    height: 65%;
+    top: 0;
+
+    @media (max-width: $screen-xs-max) {
+      height: 20px;
     }
+  }
 
-    span {
-      display: block;
-      position: relative;
-      top: 5px;
-      margin-top: 5px;
+  p {
+    float: left;
+    padding-left: 21px;
+
+    &::before {
+      top: 13px;
     }
   }
+
+  .memory-graph-container {
+    float: left;
+    margin-left: 5px;
+  }
 }
 
 .mr-source-target {
   background-color: $gray-light;
-  line-height: 31px;
-  border-style: solid;
-  border-width: 1px;
-  border-color: $border-color;
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
-  border-bottom: none;
-  padding: 16px;
-  margin-bottom: -1px;
+  border-radius: 3px 3px 0 0;
+  border-bottom: 1px solid $border-color;
+  padding: 0 $gl-padding;
+  margin-bottom: 6px;
+  line-height: 44px;
+
+  .dropdown-toggle .fa {
+    color: $gl-text-color;
+  }
 }
 
 .panel-new-merge-request {
@@ -482,6 +659,10 @@
   }
 }
 
+.target-branch-select-dropdown-container {
+  position: relative;
+}
+
 .assign-to-me-link {
   padding-left: 12px;
   white-space: nowrap;
@@ -549,12 +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) {
@@ -566,6 +753,16 @@
       padding-right: $gl-padding;
     }
   }
+
+  .nav-links {
+    border: 0;
+  }
+}
+
+.merge-request-tabs {
+  display: flex;
+  margin-bottom: 0;
+  padding: 0;
 }
 
 .limit-container-width {
@@ -576,6 +773,15 @@
   }
 }
 
+.merge-request-tabs-container {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $screen-xs-max) {
+    flex-direction: column-reverse;
+  }
+}
+
 .limit-container-width:not(.container-limited) {
   .merge-request-tabs-holder:not(.affix) {
     .merge-request-tabs-container {
@@ -583,3 +789,22 @@
     }
   }
 }
+
+.mr-memory-usage {
+  p.usage-info-loading,
+  p.usage-info-unavailable,
+  p.usage-info-failed {
+    margin-bottom: 5px;
+  }
+
+  p.usage-info-loading .usage-info-load-spinner {
+    margin-right: 10px;
+    font-size: 16px;
+  }
+
+  @media (max-width: $screen-md-min) {
+    .mr-info-list.mr-memory-usage .legend {
+      height: 80%;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 62f654ed343..875e47cdff3 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 {
@@ -124,10 +124,18 @@
 }
 
 .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 +172,6 @@
 
 .discussion-body,
 .diff-file {
-  .notes .note {
-    padding: 10px 15px;
-  }
-
   .discussion-reply-holder {
     background-color: $white-light;
     padding: 10px 16px;
@@ -277,6 +281,7 @@
 .toolbar-text {
   font-size: 14px;
   line-height: 16px;
+  margin-top: 2px;
 
   @media (min-width: $screen-md-min) {
     float: left;
@@ -402,3 +407,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 f89150ebead..f956e3757bf 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;
       }
     }
@@ -43,7 +30,11 @@ ul.notes {
   }
 
   .discussion-body {
-    padding-top: 15px;
+    padding-top: 8px;
+
+    .panel {
+      margin-bottom: 0;
+    }
   }
 
   .discussion {
@@ -52,18 +43,35 @@ ul.notes {
     position: relative;
   }
 
-  .note {
+  > li {
+    padding: $gl-padding $gl-btn-padding;
     display: block;
     position: relative;
     border-bottom: 1px solid $white-normal;
 
-    &.note-discussion {
-      &.timeline-entry {
-        padding: 14px 10px;
+    &: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 {
+        background-color: $kdb-border;
+        border: 1px solid darken($kdb-border, 25%);
       }
 
-      .system-note {
-        padding: 0;
+      .note-headline-light,
+      .fa-spinner {
+        margin-left: 3px;
+      }
+    }
+
+    &.note-discussion {
+      &.timeline-entry {
+        padding: $gl-padding 10px;
       }
     }
 
@@ -106,19 +114,13 @@ ul.notes {
 
     .note-awards {
       .js-awards-block {
-        margin-bottom: 16px;
+        margin-top: 16px;
       }
     }
 
     .note-header {
-      padding-bottom: 8px;
-      padding-right: 20px;
 
-      @media (min-width: $screen-sm-min) {
-        padding-right: 0;
-      }
-
-      @media (max-width: $screen-xs-min) {
+      @include notes-media('max', $screen-xs-min) {
         .inline {
           display: block;
         }
@@ -147,14 +149,14 @@ 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;
     }
 
-    .note-header {
+    .note-header-info {
       padding-bottom: 0;
     }
 
@@ -184,11 +186,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;
       }
     }
 
@@ -225,11 +238,6 @@ ul.notes {
 
           ul {
             margin: 3px 0 3px 16px !important;
-
-            .gfm-commit {
-              font-family: $monospace_font;
-              font-size: 12px;
-            }
           }
 
           p:first-child {
@@ -271,10 +279,6 @@ ul.notes {
     }
   }
 
-  .diff-header > span {
-    margin-right: 10px;
-  }
-
   .line_content {
     white-space: pre-wrap;
   }
@@ -365,16 +369,31 @@ ul.notes {
 .note-header {
   display: flex;
   justify-content: space-between;
+
+  @include notes-media('max', $screen-xs-max) {
+    flex-flow: row wrap;
+  }
 }
 
 .note-header-info {
   min-width: 0;
+  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;
   }
 }
@@ -416,13 +435,18 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
 
+  @include notes-media('max', $screen-xs-max) {
+    float: none;
+    margin-left: 0;
+  }
+
   .note-action-button {
     margin-left: 8px;
   }
 }
 
 .discussion-actions {
-  @media (max-width: $screen-md-max) {
+  @include notes-media('max', $screen-md-max) {
     float: none;
     margin-left: 0;
 
@@ -436,7 +460,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;
   }
@@ -526,13 +550,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;
 }
 
 
@@ -568,6 +592,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 {
@@ -577,17 +617,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;
@@ -595,6 +629,15 @@ ul.notes {
 }
 
 .line-resolve-all-container {
+  @include notes-media('min', $screen-sm-min) {
+    margin-right: 0;
+    padding-left: $gl-padding;
+  }
+
+  > div {
+    white-space: nowrap;
+  }
+
   .btn-group {
     margin-left: -4px;
   }
@@ -628,7 +671,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;
@@ -641,12 +684,16 @@ ul.notes {
 
   .line-resolve-btn {
     margin-right: 5px;
+
+    svg {
+      vertical-align: middle;
+    }
   }
 }
 
 .line-resolve-btn {
   position: relative;
-  top: 2px;
+  top: 0;
   padding: 0;
   background-color: transparent;
   border: none;
@@ -667,8 +714,8 @@ ul.notes {
 
   svg {
     fill: $gray-darkest;
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
   }
 
   .loading {
@@ -677,6 +724,10 @@ ul.notes {
   }
 }
 
+.line-resolve-text {
+  vertical-align: middle;
+}
+
 .discussion-next-btn {
   svg {
     margin: 0;
@@ -687,13 +738,12 @@ ul.notes {
   }
 }
 
+.discussion-notes .flash-container {
+  margin-bottom: 0;
+}
+
 // 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/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
new file mode 100644
index 00000000000..ab417948931
--- /dev/null
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -0,0 +1,76 @@
+.js-pipeline-schedule-form {
+  .dropdown-select,
+  .dropdown-menu-toggle {
+    width: 100%!important;
+  }
+
+  .gl-field-error {
+    margin: 10px 0 0;
+  }
+}
+
+.interval-pattern-form-group {
+  label {
+    margin-right: 10px;
+    font-size: 12px;
+
+    &[for='custom'] {
+      margin-right: 0;
+    }
+  }
+
+  .cron-interval-input-wrapper {
+    padding-left: 0;
+  }
+
+  .cron-interval-input {
+    margin: 10px 10px 0 0;
+  }
+
+  .cron-syntax-link-wrap {
+    margin-right: 10px;
+    font-size: 12px;
+  }
+}
+
+.pipeline-schedule-table-row {
+  .branch-name-cell {
+    max-width: 300px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .next-run-cell {
+    color: $gl-text-color-secondary;
+  }
+
+  a {
+    color: $text-color;
+  }
+}
+
+.pipeline-schedules-user-callout {
+  .bordered-box.content-block {
+    border: 1px solid $border-color;
+    background-color: transparent;
+    padding: 16px;
+  }
+
+  #dismiss-callout-btn {
+    color: $gl-text-color;
+  }
+}
+
+.cron-preset-radio-input {
+  display: inline-block;
+
+  @media (max-width: $screen-md-max) {
+    display: block;
+    margin: 0 0 5px 5px;
+  }
+
+  input {
+    margin-right: 3px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 9115d26c779..cf2e565dd2d 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 {
@@ -273,6 +270,7 @@
   .stage-container {
     display: inline-block;
     position: relative;
+    vertical-align: middle;
     height: 22px;
     margin: 3px 6px 3px 0;
 
@@ -316,6 +314,32 @@
   }
 }
 
+.build-failures {
+  .build-state {
+    padding: 20px 2px;
+
+    .build-name {
+      float: right;
+      font-weight: 500;
+    }
+
+    .ci-status-icon-failed svg {
+      vertical-align: middle;
+    }
+
+    .stage {
+      color: $gl-text-color-secondary;
+      font-weight: 500;
+      vertical-align: middle;
+    }
+  }
+
+  .build-log {
+    border: none;
+    line-height: initial;
+  }
+}
+
 // Pipeline graph
 .pipeline-graph {
   width: 100%;
@@ -357,9 +381,9 @@
             content: '';
             position: absolute;
             top: 48%;
-            left: -48px;
+            left: -44px;
             border-top: 2px solid $border-color;
-            width: 48px;
+            width: 44px;
             height: 1px;
           }
         }
@@ -459,7 +483,7 @@
     color: $gl-text-color-secondary;
 
     // Action Icons in big pipeline-graph nodes
-    > .ci-action-icon-container .ci-action-icon-wrapper {
+    .ci-action-icon-container .ci-action-icon-wrapper {
       height: 30px;
       width: 30px;
       background: $white-light;
@@ -484,7 +508,7 @@
       }
     }
 
-    > .ci-action-icon-container {
+    .ci-action-icon-container {
       position: absolute;
       right: 5px;
       top: 5px;
@@ -514,7 +538,7 @@
       }
     }
 
-    > .build-content {
+    .build-content {
       display: inline-block;
       padding: 8px 10px 9px;
       width: 100%;
@@ -530,34 +554,6 @@
     }
 
 
-    .arrow {
-      &::before,
-      &::after {
-        content: '';
-        display: inline-block;
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-color: transparent;
-        border-style: solid;
-        top: 18px;
-      }
-
-      &::before {
-        left: -5px;
-        margin-top: -6px;
-        border-width: 7px 5px 7px 0;
-        border-right-color: $border-color;
-      }
-
-      &::after {
-        left: -4px;
-        margin-top: -9px;
-        border-width: 10px 7px 10px 0;
-        border-right-color: $white-light;
-      }
-    }
-
     // Connect first build in each stage with right horizontal line
     &:first-child {
       &::after {
@@ -832,7 +828,8 @@
     border-radius: 3px;
 
     // build name
-    .ci-build-text {
+    .ci-build-text,
+    .ci-status-text {
       font-weight: 200;
       overflow: hidden;
       white-space: nowrap;
@@ -885,6 +882,38 @@
 }
 
 /**
+ * Top arrow in the dropdown in the big pipeline graph
+ */
+.big-pipeline-graph-dropdown-menu {
+
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    top: 18px;
+  }
+
+  &::before {
+    left: -5px;
+    margin-top: -6px;
+    border-width: 7px 5px 7px 0;
+    border-right-color: $border-color;
+  }
+
+  &::after {
+    left: -4px;
+    margin-top: -9px;
+    border-width: 10px 7px 10px 0;
+    border-right-color: $white-light;
+  }
+}
+
+/**
  * Top arrow in the dropdown in the mini pipeline graph
  */
 .mini-pipeline-graph-dropdown-menu {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c119f0c9b22..24ab2bedea2 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -247,7 +247,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 +383,6 @@ a.deploy-project-label {
   }
 }
 
-.last-push-widget {
-  margin-top: -1px;
-}
-
 .fork-namespaces {
   .row {
     -webkit-flex-wrap: wrap;
@@ -639,59 +634,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;
 
@@ -825,7 +767,8 @@ pre.light-well {
 }
 
 .compare-form-group {
-  .dropdown-menu {
+  .dropdown-menu,
+  .inline-input-group {
     width: 100%;
 
     @media (min-width: $screen-sm-min) {
@@ -844,14 +787,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/todos.scss b/app/assets/stylesheets/pages/todos.scss
index a39815319f3..de652a79369 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -54,8 +54,9 @@
     background-color: $white-light;
 
     &:hover {
-      border-color: $white-dark;
+      border-color: $white-normal;
       background-color: $gray-light;
+      border-top: 1px solid transparent;
 
       .todo-avatar,
       .todo-item {
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;
diff --git a/app/assets/stylesheets/test.scss b/app/assets/stylesheets/test.scss
new file mode 100644
index 00000000000..7d9f3da79c5
--- /dev/null
+++ b/app/assets/stylesheets/test.scss
@@ -0,0 +1,17 @@
+* {
+  -o-transition: none !important;
+  -moz-transition: none !important;
+  -ms-transition: none !important;
+  -webkit-transition: none !important;
+  transition: none !important;
+  -o-transform: none !important;
+  -moz-transform: none !important;
+  -ms-transform: none !important;
+  -webkit-transform: none !important;
+  transform: none !important;
+  -webkit-animation: none !important;
+  -moz-animation: none !important;
+  -o-animation: none !important;
+  -ms-animation: none !important;
+  animation: none !important;
+}
diff --git a/app/controllers/admin/application_settings_controller.rb b/app/controllers/admin/application_settings_controller.rb
index 643993d035e..152d7baad49 100644
--- a/app/controllers/admin/application_settings_controller.rb
+++ b/app/controllers/admin/application_settings_controller.rb
@@ -133,6 +133,8 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
       :signup_enabled,
       :sentry_dsn,
       :sentry_enabled,
+      :clientside_sentry_dsn,
+      :clientside_sentry_enabled,
       :send_user_confirmation_email,
       :shared_runners_enabled,
       :shared_runners_text,
diff --git a/app/controllers/admin/hook_logs_controller.rb b/app/controllers/admin/hook_logs_controller.rb
new file mode 100644
index 00000000000..aa069b89563
--- /dev/null
+++ b/app/controllers/admin/hook_logs_controller.rb
@@ -0,0 +1,29 @@
+class Admin::HookLogsController < Admin::ApplicationController
+  include HooksExecution
+
+  before_action :hook, only: [:show, :retry]
+  before_action :hook_log, only: [:show, :retry]
+
+  respond_to :html
+
+  def show
+  end
+
+  def retry
+    status, message = hook.execute(hook_log.request_data, hook_log.trigger)
+
+    set_hook_execution_notice(status, message)
+
+    redirect_to edit_admin_hook_path(@hook)
+  end
+
+  private
+
+  def hook
+    @hook ||= SystemHook.find(params[:hook_id])
+  end
+
+  def hook_log
+    @hook_log ||= hook.web_hook_logs.find(params[:id])
+  end
+end
diff --git a/app/controllers/admin/hooks_controller.rb b/app/controllers/admin/hooks_controller.rb
index a119934febc..b9251e140f8 100644
--- a/app/controllers/admin/hooks_controller.rb
+++ b/app/controllers/admin/hooks_controller.rb
@@ -1,5 +1,7 @@
 class Admin::HooksController < Admin::ApplicationController
-  before_action :hook, only: :edit
+  include HooksExecution
+
+  before_action :hook_logs, only: :edit
 
   def index
     @hooks = SystemHook.all
@@ -36,15 +38,9 @@ class Admin::HooksController < Admin::ApplicationController
   end
 
   def test
-    data = {
-      event_name: "project_create",
-      name: "Ruby",
-      path: "ruby",
-      project_id: 1,
-      owner_name: "Someone",
-      owner_email: "example@gitlabhq.com"
-    }
-    hook.execute(data, 'system_hooks')
+    status, message = hook.execute(sample_hook_data, 'system_hooks')
+
+    set_hook_execution_notice(status, message)
 
     redirect_back_or_default
   end
@@ -55,13 +51,30 @@ class Admin::HooksController < Admin::ApplicationController
     @hook ||= SystemHook.find(params[:id])
   end
 
+  def hook_logs
+    @hook_logs ||=
+      Kaminari.paginate_array(hook.web_hook_logs.order(created_at: :desc)).page(params[:page])
+  end
+
   def hook_params
     params.require(:hook).permit(
       :enable_ssl_verification,
       :push_events,
       :tag_push_events,
+      :repository_update_events,
       :token,
       :url
     )
   end
+
+  def sample_hook_data
+    {
+      event_name: "project_create",
+      name: "Ruby",
+      path: "ruby",
+      project_id: 1,
+      owner_name: "Someone",
+      owner_email: "example@gitlabhq.com"
+    }
+  end
 end
diff --git a/app/controllers/admin/builds_controller.rb b/app/controllers/admin/jobs_controller.rb
index 88f3c0e2fd4..5162273ef8a 100644
--- a/app/controllers/admin/builds_controller.rb
+++ b/app/controllers/admin/jobs_controller.rb
@@ -1,4 +1,4 @@
-class Admin::BuildsController < Admin::ApplicationController
+class Admin::JobsController < Admin::ApplicationController
   def index
     @scope = params[:scope]
     @all_builds = Ci::Build
@@ -20,6 +20,6 @@ class Admin::BuildsController < Admin::ApplicationController
   def cancel_all
     Ci::Build.running_or_pending.each(&:cancel)
 
-    redirect_to admin_builds_path
+    redirect_to admin_jobs_path
   end
 end
diff --git a/app/controllers/admin/services_controller.rb b/app/controllers/admin/services_controller.rb
index 37a1a23178e..4c3d336b3af 100644
--- a/app/controllers/admin/services_controller.rb
+++ b/app/controllers/admin/services_controller.rb
@@ -16,6 +16,8 @@ class Admin::ServicesController < Admin::ApplicationController
 
   def update
     if service.update_attributes(service_params[:service])
+      PropagateServiceTemplateWorker.perform_async(service.id) if service.active?
+
       redirect_to admin_application_settings_services_path,
         notice: 'Application settings saved successfully'
     else
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index e48f0963ef4..47ce21d238b 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -11,6 +11,7 @@ class ApplicationController < ActionController::Base
   include EnforcesTwoFactorAuthentication
 
   before_action :authenticate_user_from_private_token!
+  before_action :authenticate_user_from_rss_token!
   before_action :authenticate_user!
   before_action :validate_user_service_ticket!
   before_action :check_password_expiration
@@ -21,6 +22,8 @@ class ApplicationController < ActionController::Base
   before_action :configure_permitted_parameters, if: :devise_controller?
   before_action :require_email, unless: :devise_controller?
 
+  around_action :set_locale
+
   protect_from_forgery with: :exception
 
   helper_method :can?, :current_application_settings
@@ -56,7 +59,7 @@ class ApplicationController < ActionController::Base
     if current_user
       not_found
     else
-      redirect_to new_user_session_path
+      authenticate_user!
     end
   end
 
@@ -70,13 +73,20 @@ class ApplicationController < ActionController::Base
 
     user = User.find_by_authentication_token(token) || User.find_by_personal_access_token(token)
 
-    if user && can?(user, :log_in)
-      # Notice we are passing store false, so the user is not
-      # actually stored in the session and a token is needed
-      # for every request. If you want the token to work as a
-      # sign in token, you can simply remove store: false.
-      sign_in user, store: false
-    end
+    sessionless_sign_in(user)
+  end
+
+  # This filter handles authentication for atom request with an rss_token
+  def authenticate_user_from_rss_token!
+    return unless request.format.atom?
+
+    token = params[:rss_token].presence
+
+    return unless token.present?
+
+    user = User.find_by_rss_token(token)
+
+    sessionless_sign_in(user)
   end
 
   def log_exception(exception)
@@ -98,7 +108,10 @@ class ApplicationController < ActionController::Base
   end
 
   def access_denied!
-    render "errors/access_denied", layout: "errors", status: 404
+    respond_to do |format|
+      format.json { head :not_found }
+      format.any { render "errors/access_denied", layout: "errors", status: 404 }
+    end
   end
 
   def git_not_found!
@@ -269,4 +282,18 @@ class ApplicationController < ActionController::Base
   def u2f_app_id
     request.base_url
   end
+
+  def set_locale(&block)
+    Gitlab::I18n.with_user_locale(current_user, &block)
+  end
+
+  def sessionless_sign_in(user)
+    if user && can?(user, :log_in)
+      # Notice we are passing store false, so the user is not
+      # actually stored in the session and a token is needed
+      # for every request. If you want the token to work as a
+      # sign in token, you can simply remove store: false.
+      sign_in user, store: false
+    end
+  end
 end
diff --git a/app/controllers/autocomplete_controller.rb b/app/controllers/autocomplete_controller.rb
index b79ca034c5b..907717dcb96 100644
--- a/app/controllers/autocomplete_controller.rb
+++ b/app/controllers/autocomplete_controller.rb
@@ -9,7 +9,7 @@ class AutocompleteController < ApplicationController
     @users = @users.where.not(id: params[:skip_users]) if params[:skip_users].present?
     @users = @users.active
     @users = @users.reorder(:name)
-    @users = @users.page(params[:page])
+    @users = @users.page(params[:page]).per(params[:per_page])
 
     if params[:todo_filter].present? && current_user
       @users = @users.todo_authors(current_user.id, params[:todo_state_filter])
@@ -41,7 +41,7 @@ class AutocompleteController < ApplicationController
 
     no_project = {
       id: 0,
-      name_with_namespace: 'No project',
+      name_with_namespace: 'No project'
     }
     projects.unshift(no_project) unless params[:offset_id].present?
 
diff --git a/app/controllers/concerns/diff_for_path.rb b/app/controllers/concerns/diff_for_path.rb
index 1efa9fe060f..d5388c4cd20 100644
--- a/app/controllers/concerns/diff_for_path.rb
+++ b/app/controllers/concerns/diff_for_path.rb
@@ -8,17 +8,6 @@ module DiffForPath
 
     return render_404 unless diff_file
 
-    diff_commit = commit_for_diff(diff_file)
-    blob = diff_file.blob(diff_commit)
-
-    locals = {
-      diff_file: diff_file,
-      diff_commit: diff_commit,
-      diff_refs: diffs.diff_refs,
-      blob: blob,
-      project: project
-    }
-
-    render json: { html: view_to_html_string('projects/diffs/_content', locals) }
+    render json: { html: view_to_html_string('projects/diffs/_content', diff_file: diff_file) }
   end
 end
diff --git a/app/controllers/concerns/hooks_execution.rb b/app/controllers/concerns/hooks_execution.rb
new file mode 100644
index 00000000000..846cd60518f
--- /dev/null
+++ b/app/controllers/concerns/hooks_execution.rb
@@ -0,0 +1,15 @@
+module HooksExecution
+  extend ActiveSupport::Concern
+
+  private
+
+  def set_hook_execution_notice(status, message)
+    if status && status >= 200 && status < 400
+      flash[:notice] = "Hook executed successfully: HTTP #{status}"
+    elsif status
+      flash[:alert] = "Hook executed successfully but returned HTTP #{status} #{message}"
+    else
+      flash[:alert] = "Hook execution failed: #{message}"
+    end
+  end
+end
diff --git a/app/controllers/concerns/issuable_actions.rb b/app/controllers/concerns/issuable_actions.rb
index 3ccf2a9ce33..0c3b68a7ac3 100644
--- a/app/controllers/concerns/issuable_actions.rb
+++ b/app/controllers/concerns/issuable_actions.rb
@@ -14,7 +14,16 @@ module IssuableActions
 
     name = issuable.human_class_name
     flash[:notice] = "The #{name} was successfully deleted."
-    redirect_to polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class])
+    index_path = polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class])
+
+    respond_to do |format|
+      format.html { redirect_to index_path }
+      format.json do
+        render json: {
+          web_url: index_path
+        }
+      end
+    end
   end
 
   def bulk_update
@@ -60,7 +69,7 @@ module IssuableActions
   end
 
   def bulk_update_params
-    params.require(:update).permit(
+    permitted_keys = [
       :issuable_ids,
       :assignee_id,
       :milestone_id,
@@ -69,7 +78,15 @@ module IssuableActions
       label_ids: [],
       add_label_ids: [],
       remove_label_ids: []
-    )
+    ]
+
+    if resource_name == 'issue'
+      permitted_keys << { assignee_ids: [] }
+    else
+      permitted_keys.unshift(:assignee_id)
+    end
+
+    params.require(:update).permit(permitted_keys)
   end
 
   def resource_name
diff --git a/app/controllers/concerns/issuable_collections.rb b/app/controllers/concerns/issuable_collections.rb
index c8a501d7319..650ec1e326a 100644
--- a/app/controllers/concerns/issuable_collections.rb
+++ b/app/controllers/concerns/issuable_collections.rb
@@ -43,11 +43,11 @@ module IssuableCollections
   end
 
   def issues_collection
-    issues_finder.execute.preload(:project, :author, :assignee, :labels, :milestone, project: :namespace)
+    issues_finder.execute.preload(:project, :author, :assignees, :labels, :milestone, project: :namespace)
   end
 
   def merge_requests_collection
-    merge_requests_finder.execute.preload(:source_project, :target_project, :author, :assignee, :labels, :milestone, :merge_request_diff, target_project: :namespace)
+    merge_requests_finder.execute.preload(:source_project, :target_project, :author, :assignee, :labels, :milestone, :merge_request_diff, :head_pipeline, target_project: :namespace)
   end
 
   def issues_finder
diff --git a/app/controllers/concerns/lfs_request.rb b/app/controllers/concerns/lfs_request.rb
index ed22b1e5470..ae91e02488a 100644
--- a/app/controllers/concerns/lfs_request.rb
+++ b/app/controllers/concerns/lfs_request.rb
@@ -23,7 +23,7 @@ module LfsRequest
     render(
       json: {
         message: 'Git LFS is not enabled on this GitLab server, contact your admin.',
-        documentation_url: help_url,
+        documentation_url: help_url
       },
       status: 501
     )
@@ -48,7 +48,7 @@ module LfsRequest
     render(
       json: {
         message: 'Access forbidden. Check your access level.',
-        documentation_url: help_url,
+        documentation_url: help_url
       },
       content_type: "application/vnd.git-lfs+json",
       status: 403
@@ -59,7 +59,7 @@ module LfsRequest
     render(
       json: {
         message: 'Not found.',
-        documentation_url: help_url,
+        documentation_url: help_url
       },
       content_type: "application/vnd.git-lfs+json",
       status: 404
diff --git a/app/controllers/concerns/markdown_preview.rb b/app/controllers/concerns/markdown_preview.rb
deleted file mode 100644
index 40eff267348..00000000000
--- a/app/controllers/concerns/markdown_preview.rb
+++ /dev/null
@@ -1,19 +0,0 @@
-module MarkdownPreview
-  private
-
-  def render_markdown_preview(text, markdown_context = {})
-    render json: {
-      body: view_context.markdown(text, markdown_context),
-      references: {
-        users: preview_referenced_users(text)
-      }
-    }
-  end
-
-  def preview_referenced_users(text)
-    extractor = Gitlab::ReferenceExtractor.new(@project, current_user)
-    extractor.analyze(text, author: current_user)
-
-    extractor.users.map(&:username)
-  end
-end
diff --git a/app/controllers/concerns/notes_actions.rb b/app/controllers/concerns/notes_actions.rb
index c32038d07bf..a57d9e6e6c0 100644
--- a/app/controllers/concerns/notes_actions.rb
+++ b/app/controllers/concerns/notes_actions.rb
@@ -65,6 +65,15 @@ module NotesActions
 
   private
 
+  def note_html(note)
+    render_to_string(
+      "shared/notes/_note",
+      layout: false,
+      formats: [:html],
+      locals: { note: note }
+    )
+  end
+
   def note_json(note)
     attrs = {
       commands_changes: note.commands_changes
@@ -98,6 +107,41 @@ module NotesActions
     attrs
   end
 
+  def diff_discussion_html(discussion)
+    return unless discussion.diff_discussion?
+
+    if params[:view] == 'parallel'
+      template = "discussions/_parallel_diff_discussion"
+      locals =
+        if params[:line_type] == 'old'
+          { discussions_left: [discussion], discussions_right: nil }
+        else
+          { discussions_left: nil, discussions_right: [discussion] }
+        end
+    else
+      template = "discussions/_diff_discussion"
+      locals = { discussions: [discussion] }
+    end
+
+    render_to_string(
+      template,
+      layout: false,
+      formats: [:html],
+      locals: locals
+    )
+  end
+
+  def discussion_html(discussion)
+    return if discussion.individual_note?
+
+    render_to_string(
+      "discussions/_discussion",
+      layout: false,
+      formats: [:html],
+      locals: { discussion: discussion }
+    )
+  end
+
   def authorize_admin_note!
     return access_denied! unless can?(current_user, :admin_note, note)
   end
diff --git a/app/controllers/concerns/renders_blob.rb b/app/controllers/concerns/renders_blob.rb
index 9faf68e6d97..54dcd7c61ce 100644
--- a/app/controllers/concerns/renders_blob.rb
+++ b/app/controllers/concerns/renders_blob.rb
@@ -3,19 +3,22 @@ module RendersBlob
 
   def render_blob_json(blob)
     viewer =
-      if params[:viewer] == 'rich'
+      case params[:viewer]
+      when 'rich'
         blob.rich_viewer
+      when 'auxiliary'
+        blob.auxiliary_viewer
       else
         blob.simple_viewer
       end
     return render_404 unless viewer
 
     render json: {
-      html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_asynchronously: false)
+      html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_async: false)
     }
   end
 
-  def override_max_blob_size(blob)
-    blob.override_max_size! if params[:override_max_size] == 'true'
+  def conditionally_expand_blob(blob)
+    blob.expand! if params[:expanded] == 'true'
   end
 end
diff --git a/app/controllers/concerns/routable_actions.rb b/app/controllers/concerns/routable_actions.rb
new file mode 100644
index 00000000000..4199da9cdf5
--- /dev/null
+++ b/app/controllers/concerns/routable_actions.rb
@@ -0,0 +1,38 @@
+module RoutableActions
+  extend ActiveSupport::Concern
+
+  def find_routable!(routable_klass, requested_full_path, extra_authorization_proc: nil)
+    routable = routable_klass.find_by_full_path(requested_full_path, follow_redirects: request.get?)
+
+    if routable_authorized?(routable, extra_authorization_proc)
+      ensure_canonical_path(routable, requested_full_path)
+      routable
+    else
+      route_not_found
+      nil
+    end
+  end
+
+  def routable_authorized?(routable, extra_authorization_proc)
+    action = :"read_#{routable.class.to_s.underscore}"
+    return false unless can?(current_user, action, routable)
+
+    if extra_authorization_proc
+      extra_authorization_proc.call(routable)
+    else
+      true
+    end
+  end
+
+  def ensure_canonical_path(routable, requested_full_path)
+    return unless request.get?
+
+    canonical_path = routable.full_path
+    if canonical_path != requested_full_path
+      if canonical_path.casecmp(requested_full_path) != 0
+        flash[:notice] = "#{routable.class.to_s.titleize} '#{requested_full_path}' was moved to '#{canonical_path}'. Please update any links and bookmarks that may still have the old path."
+      end
+      redirect_to build_canonical_path(routable)
+    end
+  end
+end
diff --git a/app/controllers/dashboard/labels_controller.rb b/app/controllers/dashboard/labels_controller.rb
index d5031da867a..dd1d46a68c7 100644
--- a/app/controllers/dashboard/labels_controller.rb
+++ b/app/controllers/dashboard/labels_controller.rb
@@ -3,7 +3,7 @@ class Dashboard::LabelsController < Dashboard::ApplicationController
     labels = LabelsFinder.new(current_user).execute
 
     respond_to do |format|
-      format.json { render json: labels.as_json(only: [:id, :title, :color]) }
+      format.json { render json: LabelSerializer.new.represent_appearance(labels) }
     end
   end
 end
diff --git a/app/controllers/dashboard/projects_controller.rb b/app/controllers/dashboard/projects_controller.rb
index 5a1efcab1a3..3d49ea97591 100644
--- a/app/controllers/dashboard/projects_controller.rb
+++ b/app/controllers/dashboard/projects_controller.rb
@@ -8,7 +8,7 @@ class Dashboard::ProjectsController < Dashboard::ApplicationController
     @projects = load_projects(params.merge(non_public: true)).page(params[:page])
 
     respond_to do |format|
-      format.html { @last_push = current_user.recent_push }
+      format.html
       format.atom do
         load_events
         render layout: false
@@ -25,7 +25,6 @@ class Dashboard::ProjectsController < Dashboard::ApplicationController
     @projects = load_projects(params.merge(starred: true)).
       includes(:forked_from_project, :tags).page(params[:page])
 
-    @last_push = current_user.recent_push
     @groups = []
 
     respond_to do |format|
diff --git a/app/controllers/dashboard/snippets_controller.rb b/app/controllers/dashboard/snippets_controller.rb
index bcfdbe14be9..8dd91264451 100644
--- a/app/controllers/dashboard/snippets_controller.rb
+++ b/app/controllers/dashboard/snippets_controller.rb
@@ -1,11 +1,10 @@
 class Dashboard::SnippetsController < Dashboard::ApplicationController
   def index
-    @snippets = SnippetsFinder.new.execute(
+    @snippets = SnippetsFinder.new(
       current_user,
-      filter: :by_user,
-      user: current_user,
+      author: current_user,
       scope: params[:scope]
-    )
+    ).execute
     @snippets = @snippets.page(params[:page])
   end
 end
diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index 79d420a32d3..f9c31920302 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -9,8 +9,6 @@ class DashboardController < Dashboard::ApplicationController
   respond_to :html
 
   def activity
-    @last_push = current_user.recent_push
-
     respond_to do |format|
       format.html
 
@@ -26,7 +24,7 @@ class DashboardController < Dashboard::ApplicationController
   def load_events
     projects =
       if params[:filter] == "starred"
-        current_user.viewable_starred_projects
+        ProjectsFinder.new(current_user: current_user, params: { starred: true }).execute
       else
         current_user.authorized_projects
       end
diff --git a/app/controllers/explore/groups_controller.rb b/app/controllers/explore/groups_controller.rb
index 68228c095da..81883c543ba 100644
--- a/app/controllers/explore/groups_controller.rb
+++ b/app/controllers/explore/groups_controller.rb
@@ -1,6 +1,6 @@
 class Explore::GroupsController < Explore::ApplicationController
   def index
-    @groups = GroupsFinder.new.execute(current_user)
+    @groups = GroupsFinder.new(current_user).execute
     @groups = @groups.search(params[:filter_groups]) if params[:filter_groups].present?
     @groups = @groups.sort(@sort = params[:sort])
     @groups = @groups.page(params[:page])
diff --git a/app/controllers/explore/snippets_controller.rb b/app/controllers/explore/snippets_controller.rb
index 28760c3f84b..d3f0e033068 100644
--- a/app/controllers/explore/snippets_controller.rb
+++ b/app/controllers/explore/snippets_controller.rb
@@ -1,6 +1,6 @@
 class Explore::SnippetsController < Explore::ApplicationController
   def index
-    @snippets = SnippetsFinder.new.execute(current_user, filter: :all)
+    @snippets = SnippetsFinder.new(current_user).execute
     @snippets = @snippets.page(params[:page])
   end
 end
diff --git a/app/controllers/groups/application_controller.rb b/app/controllers/groups/application_controller.rb
index 29ffaeb19c1..c0ac47e363d 100644
--- a/app/controllers/groups/application_controller.rb
+++ b/app/controllers/groups/application_controller.rb
@@ -1,4 +1,6 @@
 class Groups::ApplicationController < ApplicationController
+  include RoutableActions
+
   layout 'group'
 
   skip_before_action :authenticate_user!
@@ -7,29 +9,17 @@ class Groups::ApplicationController < ApplicationController
   private
 
   def group
-    unless @group
-      id = params[:group_id] || params[:id]
-      @group = Group.find_by_full_path(id)
-      @group_merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id).execute
-
-      unless @group && can?(current_user, :read_group, @group)
-        @group = nil
-
-        if current_user.nil?
-          authenticate_user!
-        else
-          render_404
-        end
-      end
-    end
-
-    @group
+    @group ||= find_routable!(Group, params[:group_id] || params[:id])
   end
 
   def group_projects
     @projects ||= GroupProjectsFinder.new(group: group, current_user: current_user).execute
   end
 
+  def group_merge_requests
+    @group_merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id).execute
+  end
+
   def authorize_admin_group!
     unless can?(current_user, :admin_group, group)
       return render_404
@@ -41,4 +31,10 @@ class Groups::ApplicationController < ApplicationController
       return render_403
     end
   end
+
+  def build_canonical_path(group)
+    params[:group_id] = group.to_param
+    
+    url_for(params)
+  end
 end
diff --git a/app/controllers/groups/labels_controller.rb b/app/controllers/groups/labels_controller.rb
index facb25525b5..3fa0516fb0c 100644
--- a/app/controllers/groups/labels_controller.rb
+++ b/app/controllers/groups/labels_controller.rb
@@ -15,7 +15,7 @@ class Groups::LabelsController < Groups::ApplicationController
 
       format.json do
         available_labels = LabelsFinder.new(current_user, group_id: @group.id).execute
-        render json: available_labels.as_json(only: [:id, :title, :color])
+        render json: LabelSerializer.new.represent_appearance(available_labels)
       end
     end
   end
diff --git a/app/controllers/groups_controller.rb b/app/controllers/groups_controller.rb
index 593001e6396..18a2d69db29 100644
--- a/app/controllers/groups_controller.rb
+++ b/app/controllers/groups_controller.rb
@@ -12,8 +12,8 @@ class GroupsController < Groups::ApplicationController
   before_action :authorize_admin_group!, only: [:edit, :update, :destroy, :projects]
   before_action :authorize_create_group!, only: [:new, :create]
 
-  # Load group projects
   before_action :group_projects, only: [:projects, :activity, :issues, :merge_requests]
+  before_action :group_merge_requests, only: [:merge_requests]
   before_action :event_filter, only: [:activity]
 
   before_action :user_actions, only: [:show, :subgroups]
@@ -64,7 +64,9 @@ class GroupsController < Groups::ApplicationController
   end
 
   def subgroups
-    @nested_groups = group.children
+    return not_found unless Group.supports_nested_groups?
+
+    @nested_groups = GroupsFinder.new(current_user, parent: group).execute
     @nested_groups = @nested_groups.search(params[:filter_groups]) if params[:filter_groups].present?
   end
 
@@ -165,8 +167,15 @@ class GroupsController < Groups::ApplicationController
 
   def user_actions
     if current_user
-      @last_push = current_user.recent_push
       @notification_setting = current_user.notification_settings_for(group)
     end
   end
+
+  def build_canonical_path(group)
+    return group_path(group) if action_name == 'show' # root group path
+    
+    params[:id] = group.to_param
+
+    url_for(params)
+  end
 end
diff --git a/app/controllers/health_controller.rb b/app/controllers/health_controller.rb
index df0fc3132ed..125746d0426 100644
--- a/app/controllers/health_controller.rb
+++ b/app/controllers/health_controller.rb
@@ -5,7 +5,7 @@ class HealthController < ActionController::Base
   CHECKS = [
     Gitlab::HealthChecks::DbCheck,
     Gitlab::HealthChecks::RedisCheck,
-    Gitlab::HealthChecks::FsShardsCheck,
+    Gitlab::HealthChecks::FsShardsCheck
   ].freeze
 
   def readiness
diff --git a/app/controllers/jwt_controller.rb b/app/controllers/jwt_controller.rb
index 3109439b2ff..1c01be06451 100644
--- a/app/controllers/jwt_controller.rb
+++ b/app/controllers/jwt_controller.rb
@@ -4,7 +4,7 @@ class JwtController < ApplicationController
   before_action :authenticate_project_or_user
 
   SERVICES = {
-    Auth::ContainerRegistryAuthenticationService::AUDIENCE => Auth::ContainerRegistryAuthenticationService,
+    Auth::ContainerRegistryAuthenticationService::AUDIENCE => Auth::ContainerRegistryAuthenticationService
   }.freeze
 
   def auth
diff --git a/app/controllers/omniauth_callbacks_controller.rb b/app/controllers/omniauth_callbacks_controller.rb
index 58d50ad647b..2a8c8ca4bad 100644
--- a/app/controllers/omniauth_callbacks_controller.rb
+++ b/app/controllers/omniauth_callbacks_controller.rb
@@ -67,7 +67,7 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
   def omniauth_error
     @provider = params[:provider]
     @error = params[:error]
-    render 'errors/omniauth_error', layout: "errors", status: 422
+    render 'errors/omniauth_error', layout: "oauth_error", status: 422
   end
 
   def cas3
diff --git a/app/controllers/profiles/preferences_controller.rb b/app/controllers/profiles/preferences_controller.rb
index 0d891ef4004..5414142e2df 100644
--- a/app/controllers/profiles/preferences_controller.rb
+++ b/app/controllers/profiles/preferences_controller.rb
@@ -33,7 +33,7 @@ class Profiles::PreferencesController < Profiles::ApplicationController
       :color_scheme_id,
       :layout,
       :dashboard,
-      :project_view,
+      :project_view
     )
   end
 end
diff --git a/app/controllers/profiles_controller.rb b/app/controllers/profiles_controller.rb
index 987b95e89b9..8cd1c47eb3f 100644
--- a/app/controllers/profiles_controller.rb
+++ b/app/controllers/profiles_controller.rb
@@ -40,6 +40,14 @@ class ProfilesController < Profiles::ApplicationController
     redirect_to profile_account_path
   end
 
+  def reset_rss_token
+    if current_user.reset_rss_token!
+      flash[:notice] = "RSS token was successfully reset"
+    end
+
+    redirect_to profile_account_path
+  end
+
   def audit_log
     @events = AuditEvent.where(entity_type: "User", entity_id: current_user.id).
       order("created_at DESC").
@@ -85,7 +93,8 @@ class ProfilesController < Profiles::ApplicationController
       :twitter,
       :username,
       :website_url,
-      :organization
+      :organization,
+      :preferred_language
     )
   end
 end
diff --git a/app/controllers/projects/application_controller.rb b/app/controllers/projects/application_controller.rb
index 89f1128ec36..cb4bd0ad5f5 100644
--- a/app/controllers/projects/application_controller.rb
+++ b/app/controllers/projects/application_controller.rb
@@ -1,5 +1,8 @@
 class Projects::ApplicationController < ApplicationController
+  include RoutableActions
+
   skip_before_action :authenticate_user!
+  before_action :redirect_git_extension
   before_action :project
   before_action :repository
   layout 'project'
@@ -8,40 +11,29 @@ class Projects::ApplicationController < ApplicationController
 
   private
 
+  def redirect_git_extension
+    # Redirect from
+    #   localhost/group/project.git
+    # to
+    #   localhost/group/project
+    #
+    redirect_to url_for(params.merge(format: nil)) if params[:format] == 'git'
+  end
+
   def project
-    unless @project
-      namespace = params[:namespace_id]
-      id = params[:project_id] || params[:id]
-
-      # Redirect from
-      #   localhost/group/project.git
-      # to
-      #   localhost/group/project
-      #
-      if params[:format] == 'git'
-        redirect_to request.original_url.gsub(/\.git\/?\Z/, '')
-        return
-      end
-
-      project_path = "#{namespace}/#{id}"
-      @project = Project.find_by_full_path(project_path)
-
-      if can?(current_user, :read_project, @project) && !@project.pending_delete?
-        if @project.path_with_namespace != project_path
-          redirect_to request.original_url.gsub(project_path, @project.path_with_namespace)
-        end
-      else
-        @project = nil
-
-        if current_user.nil?
-          authenticate_user!
-        else
-          render_404
-        end
-      end
-    end
+    return @project if @project
+
+    path = File.join(params[:namespace_id], params[:project_id] || params[:id])
+    auth_proc = ->(project) { !project.pending_delete? }
 
-    @project
+    @project = find_routable!(Project, path, extra_authorization_proc: auth_proc)
+  end
+
+  def build_canonical_path(project)
+    params[:namespace_id] = project.namespace.to_param
+    params[:project_id] = project.to_param
+
+    url_for(params)
   end
 
   def repository
@@ -55,13 +47,15 @@ class Projects::ApplicationController < ApplicationController
       (current_user && current_user.already_forked?(project))
   end
 
-  def authorize_project!(action)
-    return access_denied! unless can?(current_user, action, project)
+  def authorize_action!(action)
+    unless can?(current_user, action, project)
+      return access_denied!
+    end
   end
 
   def method_missing(method_sym, *arguments, &block)
     if method_sym.to_s =~ /\Aauthorize_(.*)!\z/
-      authorize_project!($1.to_sym)
+      authorize_action!($1.to_sym)
     else
       super
     end
diff --git a/app/controllers/projects/artifacts_controller.rb b/app/controllers/projects/artifacts_controller.rb
index 1224e9503c9..ea036b1f705 100644
--- a/app/controllers/projects/artifacts_controller.rb
+++ b/app/controllers/projects/artifacts_controller.rb
@@ -27,7 +27,7 @@ class Projects::ArtifactsController < Projects::ApplicationController
 
   def file
     blob = @entry.blob
-    override_max_blob_size(blob)
+    conditionally_expand_blob(blob)
 
     respond_to do |format|
       format.html do
@@ -46,7 +46,7 @@ class Projects::ArtifactsController < Projects::ApplicationController
 
   def keep
     build.keep_artifacts!
-    redirect_to namespace_project_build_path(project.namespace, project, build)
+    redirect_to namespace_project_job_path(project.namespace, project, build)
   end
 
   def latest_succeeded
@@ -79,7 +79,7 @@ class Projects::ArtifactsController < Projects::ApplicationController
   end
 
   def build_from_id
-    project.builds.find_by(id: params[:build_id]) if params[:build_id]
+    project.builds.find_by(id: params[:job_id]) if params[:job_id]
   end
 
   def build_from_ref
diff --git a/app/controllers/projects/blob_controller.rb b/app/controllers/projects/blob_controller.rb
index 9489bbddfc4..7025c7a1de6 100644
--- a/app/controllers/projects/blob_controller.rb
+++ b/app/controllers/projects/blob_controller.rb
@@ -35,13 +35,15 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def show
-    override_max_blob_size(@blob)
+    conditionally_expand_blob(@blob)
 
     respond_to do |format|
       format.html do
         environment_params = @repository.branch_exists?(@ref) ? { ref: @ref } : { commit: @commit }
         @environment = EnvironmentsFinder.new(@project, current_user, environment_params).execute.last
 
+        @last_commit = @repository.last_commit_for_path(@commit.id, @blob.path)
+
         render 'show'
       end
 
diff --git a/app/controllers/projects/boards/issues_controller.rb b/app/controllers/projects/boards/issues_controller.rb
index 28c9646910d..da9b789d617 100644
--- a/app/controllers/projects/boards/issues_controller.rb
+++ b/app/controllers/projects/boards/issues_controller.rb
@@ -82,7 +82,7 @@ module Projects
           labels: true,
           only: [:id, :iid, :title, :confidential, :due_date, :relative_position],
           include: {
-            assignee: { only: [:id, :name, :username], methods: [:avatar_url] },
+            assignees: { only: [:id, :name, :username], methods: [:avatar_url] },
             milestone: { only: [:id, :title] }
           },
           user: current_user
diff --git a/app/controllers/projects/branches_controller.rb b/app/controllers/projects/branches_controller.rb
index f0f031303d8..d8ed470e461 100644
--- a/app/controllers/projects/branches_controller.rb
+++ b/app/controllers/projects/branches_controller.rb
@@ -73,13 +73,18 @@ class Projects::BranchesController < Projects::ApplicationController
 
   def destroy
     @branch_name = Addressable::URI.unescape(params[:id])
-    status = DeleteBranchService.new(project, current_user).execute(@branch_name)
+    result = DeleteBranchService.new(project, current_user).execute(@branch_name)
+
     respond_to do |format|
       format.html do
-        redirect_to namespace_project_branches_path(@project.namespace,
-                                                    @project), status: 303
+        flash_type = result[:status] == :error ? :alert : :notice
+        flash[flash_type] = result[:message]
+
+        redirect_to namespace_project_branches_path(@project.namespace, @project), status: 303
       end
-      format.js { render nothing: true, status: status[:return_code] }
+
+      format.js { render nothing: true, status: result[:return_code] }
+      format.json { render json: { message: result[:message] }, status: result[:return_code] }
     end
   end
 
diff --git a/app/controllers/projects/build_artifacts_controller.rb b/app/controllers/projects/build_artifacts_controller.rb
new file mode 100644
index 00000000000..f34a198634e
--- /dev/null
+++ b/app/controllers/projects/build_artifacts_controller.rb
@@ -0,0 +1,55 @@
+class Projects::BuildArtifactsController < Projects::ApplicationController
+  include ExtractsPath
+  include RendersBlob
+
+  before_action :authorize_read_build!
+  before_action :extract_ref_name_and_path
+  before_action :validate_artifacts!
+
+  def download
+    redirect_to download_namespace_project_job_artifacts_path(project.namespace, project, job)
+  end
+
+  def browse
+    redirect_to browse_namespace_project_job_artifacts_path(project.namespace, project, job, path: params[:path])
+  end
+
+  def file
+    redirect_to file_namespace_project_job_artifacts_path(project.namespace, project, job, path: params[:path])
+  end
+
+  def raw
+    redirect_to raw_namespace_project_job_artifacts_path(project.namespace, project, job, path: params[:path])
+  end
+
+  def latest_succeeded
+    redirect_to latest_succeeded_namespace_project_artifacts_path(project.namespace, project, job, ref_name_and_path: params[:ref_name_and_path], job: params[:job])
+  end
+
+  private
+
+  def validate_artifacts!
+    render_404 unless job && job.artifacts?
+  end
+
+  def extract_ref_name_and_path
+    return unless params[:ref_name_and_path]
+
+    @ref_name, @path = extract_ref(params[:ref_name_and_path])
+  end
+
+  def job
+    @job ||= job_from_id || job_from_ref
+  end
+
+  def job_from_id
+    project.builds.find_by(id: params[:build_id]) if params[:build_id]
+  end
+
+  def job_from_ref
+    return unless @ref_name
+
+    jobs = project.latest_successful_builds_for(@ref_name)
+    jobs.find_by(name: params[:job])
+  end
+end
diff --git a/app/controllers/projects/builds_controller.rb b/app/controllers/projects/builds_controller.rb
index e24fc45d166..1334a231788 100644
--- a/app/controllers/projects/builds_controller.rb
+++ b/app/controllers/projects/builds_controller.rb
@@ -1,117 +1,21 @@
 class Projects::BuildsController < Projects::ApplicationController
-  before_action :build, except: [:index, :cancel_all]
-  before_action :authorize_read_build!, only: [:index, :show, :status, :raw, :trace]
-  before_action :authorize_update_build!, except: [:index, :show, :status, :raw, :trace]
-  layout 'project'
+  before_action :authorize_read_build!
 
   def index
-    @scope = params[:scope]
-    @all_builds = project.builds.relevant
-    @builds = @all_builds.order('created_at DESC')
-    @builds =
-      case @scope
-      when 'pending'
-        @builds.pending.reverse_order
-      when 'running'
-        @builds.running.reverse_order
-      when 'finished'
-        @builds.finished
-      else
-        @builds
-      end
-    @builds = @builds.includes([
-      { pipeline: :project },
-      :project,
-      :tags
-    ])
-    @builds = @builds.page(params[:page]).per(30)
-  end
-
-  def cancel_all
-    @project.builds.running_or_pending.each(&:cancel)
-    redirect_to namespace_project_builds_path(project.namespace, project)
+    redirect_to namespace_project_jobs_path(project.namespace, project)
   end
 
   def show
-    @builds = @project.pipelines.find_by_sha(@build.sha).builds.order('id DESC')
-    @builds = @builds.where("id not in (?)", @build.id)
-    @pipeline = @build.pipeline
-  end
-
-  def trace
-    build.trace.read do |stream|
-      respond_to do |format|
-        format.json do
-          result = {
-            id: @build.id, status: @build.status, complete: @build.complete?
-          }
-
-          if stream.valid?
-            stream.limit
-            state = params[:state].presence
-            trace = stream.html_with_state(state)
-            result.merge!(trace.to_h)
-          end
-
-          render json: result
-        end
-      end
-    end
-  end
-
-  def retry
-    return respond_422 unless @build.retryable?
-
-    build = Ci::Build.retry(@build, current_user)
-    redirect_to build_path(build)
-  end
-
-  def play
-    return respond_422 unless @build.playable?
-
-    build = @build.play(current_user)
-    redirect_to build_path(build)
-  end
-
-  def cancel
-    return respond_422 unless @build.cancelable?
-
-    @build.cancel
-    redirect_to build_path(@build)
-  end
-
-  def status
-    render json: BuildSerializer
-      .new(project: @project, user: @current_user)
-      .represent_status(@build)
-  end
-
-  def erase
-    if @build.erase(erased_by: current_user)
-      redirect_to namespace_project_build_path(project.namespace, project, @build),
-                notice: "Build has been successfully erased!"
-    else
-      respond_422
-    end
+    redirect_to namespace_project_job_path(project.namespace, project, job)
   end
 
   def raw
-    build.trace.read do |stream|
-      if stream.file?
-        send_file stream.path, type: 'text/plain; charset=utf-8', disposition: 'inline'
-      else
-        render_404
-      end
-    end
+    redirect_to raw_namespace_project_job_path(project.namespace, project, job)
   end
 
   private
 
-  def build
-    @build ||= project.builds.find_by!(id: params[:id]).present(current_user: current_user)
-  end
-
-  def build_path(build)
-    namespace_project_build_path(build.project.namespace, build.project, build)
+  def job
+    @job ||= project.builds.find(params[:id])
   end
 end
diff --git a/app/controllers/projects/commit_controller.rb b/app/controllers/projects/commit_controller.rb
index 2b5f0383ac1..7c3cce1c241 100644
--- a/app/controllers/projects/commit_controller.rb
+++ b/app/controllers/projects/commit_controller.rb
@@ -39,7 +39,7 @@ class Projects::CommitController < Projects::ApplicationController
         Gitlab::PollingInterval.set_header(response, interval: 10_000)
 
         render json: PipelineSerializer
-          .new(project: @project, user: @current_user)
+          .new(project: @project, current_user: @current_user)
           .represent(@pipelines)
       end
     end
diff --git a/app/controllers/projects/compare_controller.rb b/app/controllers/projects/compare_controller.rb
index 008d2f5815f..88dd600e5fe 100644
--- a/app/controllers/projects/compare_controller.rb
+++ b/app/controllers/projects/compare_controller.rb
@@ -51,13 +51,9 @@ class Projects::CompareController < Projects::ApplicationController
 
     if @compare
       @commits = @compare.commits
-      @start_commit = @compare.start_commit
-      @commit = @compare.commit
-      @base_commit = @compare.base_commit
-
       @diffs = @compare.diffs(diff_options)
 
-      environment_params = @repository.branch_exists?(@head_ref) ? { ref: @head_ref } : { commit: @commit }
+      environment_params = @repository.branch_exists?(@head_ref) ? { ref: @head_ref } : { commit: @compare.commit }
       @environment = EnvironmentsFinder.new(@project, current_user, environment_params).execute.last
 
       @diff_notes_disabled = true
diff --git a/app/controllers/projects/deploy_keys_controller.rb b/app/controllers/projects/deploy_keys_controller.rb
index d0c44e297e3..f27089b8590 100644
--- a/app/controllers/projects/deploy_keys_controller.rb
+++ b/app/controllers/projects/deploy_keys_controller.rb
@@ -8,7 +8,12 @@ class Projects::DeployKeysController < Projects::ApplicationController
   layout "project_settings"
 
   def index
-    redirect_to_repository_settings(@project)
+    respond_to do |format|
+      format.html { redirect_to_repository_settings(@project) }
+      format.json do
+        render json: Projects::Settings::DeployKeysPresenter.new(@project, current_user: current_user).as_json
+      end
+    end
   end
 
   def new
@@ -19,7 +24,7 @@ class Projects::DeployKeysController < Projects::ApplicationController
     @key = DeployKey.new(deploy_key_params.merge(user: current_user))
 
     unless @key.valid? && @project.deploy_keys << @key
-      flash[:alert] = @key.errors.full_messages.join(', ').html_safe      
+      flash[:alert] = @key.errors.full_messages.join(', ').html_safe
     end
     redirect_to_repository_settings(@project)
   end
@@ -27,7 +32,10 @@ class Projects::DeployKeysController < Projects::ApplicationController
   def enable
     Projects::EnableDeployKeyService.new(@project, current_user, params).execute
 
-    redirect_to_repository_settings(@project)
+    respond_to do |format|
+      format.html { redirect_to_repository_settings(@project) }
+      format.json { head :ok }
+    end
   end
 
   def disable
@@ -35,7 +43,11 @@ class Projects::DeployKeysController < Projects::ApplicationController
     return render_404 unless deploy_key_project
 
     deploy_key_project.destroy!
-    redirect_to_repository_settings(@project)
+
+    respond_to do |format|
+      format.html { redirect_to_repository_settings(@project) }
+      format.json { head :ok }
+    end
   end
 
   protected
diff --git a/app/controllers/projects/deployments_controller.rb b/app/controllers/projects/deployments_controller.rb
index c319671456d..6644deb49c9 100644
--- a/app/controllers/projects/deployments_controller.rb
+++ b/app/controllers/projects/deployments_controller.rb
@@ -6,12 +6,28 @@ class Projects::DeploymentsController < Projects::ApplicationController
     deployments = environment.deployments.reorder(created_at: :desc)
     deployments = deployments.where('created_at > ?', params[:after].to_time) if params[:after]&.to_time
 
-    render json: { deployments: DeploymentSerializer.new(user: @current_user, project: project)
+    render json: { deployments: DeploymentSerializer.new(project: project)
                                   .represent_concise(deployments) }
   end
 
+  def metrics
+    return render_404 unless deployment.has_metrics?
+    @metrics = deployment.metrics
+    if @metrics&.any?
+      render json: @metrics, status: :ok
+    else
+      head :no_content
+    end
+  rescue NotImplementedError
+    render_404
+  end
+
   private
 
+  def deployment
+    @deployment ||= environment.deployments.find_by(iid: params[:id])
+  end
+
   def environment
     @environment ||= project.environments.find(params[:environment_id])
   end
diff --git a/app/controllers/projects/environments_controller.rb b/app/controllers/projects/environments_controller.rb
index fa37963dfd4..4630f451445 100644
--- a/app/controllers/projects/environments_controller.rb
+++ b/app/controllers/projects/environments_controller.rb
@@ -15,9 +15,11 @@ class Projects::EnvironmentsController < Projects::ApplicationController
     respond_to do |format|
       format.html
       format.json do
+        Gitlab::PollingInterval.set_header(response, interval: 3_000)
+
         render json: {
           environments: EnvironmentSerializer
-            .new(project: @project, user: @current_user)
+            .new(project: @project, current_user: @current_user)
             .with_pagination(request, response)
             .within_folders
             .represent(@environments),
@@ -31,13 +33,14 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   def folder
     folder_environments = project.environments.where(environment_type: params[:id])
     @environments = folder_environments.with_state(params[:scope] || :available)
+      .order(:name)
 
     respond_to do |format|
       format.html
       format.json do
         render json: {
           environments: EnvironmentSerializer
-            .new(project: @project, user: @current_user)
+            .new(project: @project, current_user: @current_user)
             .with_pagination(request, response)
             .represent(@environments),
           available_count: folder_environments.available.count,
@@ -81,10 +84,16 @@ class Projects::EnvironmentsController < Projects::ApplicationController
 
     stop_action = @environment.stop_with_action!(current_user)
 
-    if stop_action
-      redirect_to polymorphic_path([project.namespace.becomes(Namespace), project, stop_action])
-    else
-      redirect_to namespace_project_environment_path(project.namespace, project, @environment)
+    action_or_env_url =
+      if stop_action
+        polymorphic_url([project.namespace.becomes(Namespace), project, stop_action])
+      else
+        namespace_project_environment_url(project.namespace, project, @environment)
+      end
+
+    respond_to do |format|
+      format.html { redirect_to action_or_env_url }
+      format.json { render json: { redirect_url: action_or_env_url } }
     end
   end
 
diff --git a/app/controllers/projects/git_http_controller.rb b/app/controllers/projects/git_http_controller.rb
index 10adddb4636..9e4edcae101 100644
--- a/app/controllers/projects/git_http_controller.rb
+++ b/app/controllers/projects/git_http_controller.rb
@@ -59,7 +59,7 @@ class Projects::GitHttpController < Projects::GitHttpClientController
 
   def render_ok
     set_workhorse_internal_api_content_type
-    render json: Gitlab::Workhorse.git_http_ok(repository, user, action_name)
+    render json: Gitlab::Workhorse.git_http_ok(repository, wiki?, user, action_name)
   end
 
   def render_http_not_allowed
diff --git a/app/controllers/projects/hook_logs_controller.rb b/app/controllers/projects/hook_logs_controller.rb
new file mode 100644
index 00000000000..354f0d6db3a
--- /dev/null
+++ b/app/controllers/projects/hook_logs_controller.rb
@@ -0,0 +1,33 @@
+class Projects::HookLogsController < Projects::ApplicationController
+  include HooksExecution
+
+  before_action :authorize_admin_project!
+
+  before_action :hook, only: [:show, :retry]
+  before_action :hook_log, only: [:show, :retry]
+
+  respond_to :html
+
+  layout 'project_settings'
+
+  def show
+  end
+
+  def retry
+    status, message = hook.execute(hook_log.request_data, hook_log.trigger)
+
+    set_hook_execution_notice(status, message)
+
+    redirect_to edit_namespace_project_hook_path(@project.namespace, @project, @hook)
+  end
+
+  private
+
+  def hook
+    @hook ||= @project.hooks.find(params[:hook_id])
+  end
+
+  def hook_log
+    @hook_log ||= hook.web_hook_logs.find(params[:id])
+  end
+end
diff --git a/app/controllers/projects/hooks_controller.rb b/app/controllers/projects/hooks_controller.rb
index 86d13a0d222..38bd82841dc 100644
--- a/app/controllers/projects/hooks_controller.rb
+++ b/app/controllers/projects/hooks_controller.rb
@@ -1,7 +1,9 @@
 class Projects::HooksController < Projects::ApplicationController
+  include HooksExecution
+
   # Authorize
   before_action :authorize_admin_project!
-  before_action :hook, only: :edit
+  before_action :hook_logs, only: :edit
 
   respond_to :html
 
@@ -34,13 +36,7 @@ class Projects::HooksController < Projects::ApplicationController
     if !@project.empty_repo?
       status, message = TestHookService.new.execute(hook, current_user)
 
-      if status && status >= 200 && status < 400
-        flash[:notice] = "Hook executed successfully: HTTP #{status}"
-      elsif status
-        flash[:alert] = "Hook executed successfully but returned HTTP #{status} #{message}"
-      else
-        flash[:alert] = "Hook execution failed: #{message}"
-      end
+      set_hook_execution_notice(status, message)
     else
       flash[:alert] = 'Hook execution failed. Ensure the project has commits.'
     end
@@ -60,6 +56,11 @@ class Projects::HooksController < Projects::ApplicationController
     @hook ||= @project.hooks.find(params[:id])
   end
 
+  def hook_logs
+    @hook_logs ||=
+      Kaminari.paginate_array(hook.web_hook_logs.order(created_at: :desc)).page(params[:page])
+  end
+
   def hook_params
     params.require(:hook).permit(
       :job_events,
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index af9157bfbb5..59df1e7b86a 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -11,10 +11,10 @@ class Projects::IssuesController < Projects::ApplicationController
   before_action :redirect_to_external_issue_tracker, only: [:index, :new]
   before_action :module_enabled
   before_action :issue, only: [:edit, :update, :show, :referenced_merge_requests,
-                               :related_branches, :can_create_branch, :rendered_title, :create_merge_request]
+                               :related_branches, :can_create_branch, :realtime_changes, :create_merge_request]
 
   # Allow read any issue
-  before_action :authorize_read_issue!, only: [:show, :rendered_title]
+  before_action :authorize_read_issue!, only: [:show, :realtime_changes]
 
   # Allow write(create) issue
   before_action :authorize_create_issue!, only: [:new, :create]
@@ -67,7 +67,7 @@ class Projects::IssuesController < Projects::ApplicationController
 
   def new
     params[:issue] ||= ActionController::Parameters.new(
-      assignee_id: ""
+      assignee_ids: ""
     )
     build_params = issue_params.merge(
       merge_request_to_resolve_discussions_of: params[:merge_request_to_resolve_discussions_of],
@@ -148,10 +148,7 @@ class Projects::IssuesController < Projects::ApplicationController
 
       format.json do
         if @issue.valid?
-          render json: @issue.to_json(methods: [:task_status, :task_status_short],
-                                      include: { milestone: {},
-                                                 assignee: { only: [:name, :username], methods: [:avatar_url] },
-                                                 labels: { methods: :text_color } })
+          render json: IssueSerializer.new.represent(@issue)
         else
           render json: { errors: @issue.errors.full_messages }, status: :unprocessable_entity
         end
@@ -199,9 +196,17 @@ class Projects::IssuesController < Projects::ApplicationController
     end
   end
 
-  def rendered_title
+  def realtime_changes
     Gitlab::PollingInterval.set_header(response, interval: 3_000)
-    render json: { title: view_context.markdown_field(@issue, :title) }
+
+    render json: {
+      title: view_context.markdown_field(@issue, :title),
+      title_text: @issue.title,
+      description: view_context.markdown_field(@issue, :description),
+      description_text: @issue.description,
+      task_status: @issue.task_status,
+      updated_at: @issue.updated_at
+    }
   end
 
   def create_merge_request
@@ -218,7 +223,7 @@ class Projects::IssuesController < Projects::ApplicationController
 
   def issue
     # The Sortable default scope causes performance issues when used with find_by
-    @noteable = @issue ||= @project.issues.where(iid: params[:id]).reorder(nil).take || redirect_old
+    @noteable = @issue ||= @project.issues.where(iid: params[:id]).reorder(nil).take!
   end
   alias_method :subscribable_resource, :issue
   alias_method :issuable, :issue
@@ -257,25 +262,10 @@ class Projects::IssuesController < Projects::ApplicationController
     end
   end
 
-  # Since iids are implemented only in 6.1
-  # user may navigate to issue page using old global ids.
-  #
-  # To prevent 404 errors we provide a redirect to correct iids until 7.0 release
-  #
-  def redirect_old
-    issue = @project.issues.find_by(id: params[:id])
-
-    if issue
-      redirect_to issue_path(issue)
-    else
-      raise ActiveRecord::RecordNotFound.new
-    end
-  end
-
   def issue_params
     params.require(:issue).permit(
       :title, :assignee_id, :position, :description, :confidential,
-      :milestone_id, :due_date, :state_event, :task_num, :lock_version, label_ids: []
+      :milestone_id, :due_date, :state_event, :task_num, :lock_version, label_ids: [], assignee_ids: []
     )
   end
 
@@ -284,7 +274,10 @@ class Projects::IssuesController < Projects::ApplicationController
 
     notice = "Please sign in to create the new issue."
 
-    store_location_for :user, request.fullpath
+    if request.get? && !request.xhr?
+      store_location_for :user, request.fullpath
+    end
+
     redirect_to new_user_session_path, notice: notice
   end
 end
diff --git a/app/controllers/projects/jobs_controller.rb b/app/controllers/projects/jobs_controller.rb
new file mode 100644
index 00000000000..d2cd1cfdab8
--- /dev/null
+++ b/app/controllers/projects/jobs_controller.rb
@@ -0,0 +1,131 @@
+class Projects::JobsController < Projects::ApplicationController
+  before_action :build, except: [:index, :cancel_all]
+
+  before_action :authorize_read_build!,
+    only: [:index, :show, :status, :raw, :trace]
+  before_action :authorize_update_build!,
+    except: [:index, :show, :status, :raw, :trace, :cancel_all]
+
+  layout 'project'
+
+  def index
+    @scope = params[:scope]
+    @all_builds = project.builds.relevant
+    @builds = @all_builds.order('created_at DESC')
+    @builds =
+      case @scope
+      when 'pending'
+        @builds.pending.reverse_order
+      when 'running'
+        @builds.running.reverse_order
+      when 'finished'
+        @builds.finished
+      else
+        @builds
+      end
+    @builds = @builds.includes([
+      { pipeline: :project },
+      :project,
+      :tags
+    ])
+    @builds = @builds.page(params[:page]).per(30)
+  end
+
+  def cancel_all
+    return access_denied! unless can?(current_user, :update_build, project)
+
+    @project.builds.running_or_pending.each do |build|
+      build.cancel if can?(current_user, :update_build, build)
+    end
+
+    redirect_to namespace_project_jobs_path(project.namespace, project)
+  end
+
+  def show
+    @builds = @project.pipelines.find_by_sha(@build.sha).builds.order('id DESC')
+    @builds = @builds.where("id not in (?)", @build.id)
+    @pipeline = @build.pipeline
+  end
+
+  def trace
+    build.trace.read do |stream|
+      respond_to do |format|
+        format.json do
+          result = {
+            id: @build.id, status: @build.status, complete: @build.complete?
+          }
+
+          if stream.valid?
+            stream.limit
+            state = params[:state].presence
+            trace = stream.html_with_state(state)
+            result.merge!(trace.to_h)
+          end
+
+          render json: result
+        end
+      end
+    end
+  end
+
+  def retry
+    return respond_422 unless @build.retryable?
+
+    build = Ci::Build.retry(@build, current_user)
+    redirect_to build_path(build)
+  end
+
+  def play
+    return respond_422 unless @build.playable?
+
+    build = @build.play(current_user)
+    redirect_to build_path(build)
+  end
+
+  def cancel
+    return respond_422 unless @build.cancelable?
+
+    @build.cancel
+    redirect_to build_path(@build)
+  end
+
+  def status
+    render json: BuildSerializer
+      .new(project: @project, current_user: @current_user)
+      .represent_status(@build)
+  end
+
+  def erase
+    if @build.erase(erased_by: current_user)
+      redirect_to namespace_project_job_path(project.namespace, project, @build),
+                notice: "Build has been successfully erased!"
+    else
+      respond_422
+    end
+  end
+
+  def raw
+    build.trace.read do |stream|
+      if stream.file?
+        send_file stream.path, type: 'text/plain; charset=utf-8', disposition: 'inline'
+      else
+        render_404
+      end
+    end
+  end
+
+  private
+
+  def authorize_update_build!
+    return access_denied! unless can?(current_user, :update_build, build)
+  end
+
+  def build
+    @build ||= project.builds.find(params[:id])
+      .present(current_user: current_user)
+  end
+
+  def build_path(build)
+    namespace_project_job_path(build.project.namespace, build.project, build)
+  end
+end
diff --git a/app/controllers/projects/labels_controller.rb b/app/controllers/projects/labels_controller.rb
index 2f55ba4e700..71bfb7163da 100644
--- a/app/controllers/projects/labels_controller.rb
+++ b/app/controllers/projects/labels_controller.rb
@@ -19,7 +19,7 @@ class Projects::LabelsController < Projects::ApplicationController
     respond_to do |format|
       format.html
       format.json do
-        render json: @available_labels.as_json(only: [:id, :title, :color])
+        render json: LabelSerializer.new.represent_appearance(@available_labels)
       end
     end
   end
diff --git a/app/controllers/projects/lfs_api_controller.rb b/app/controllers/projects/lfs_api_controller.rb
index 8a5a645ed0e..1b0d3aab3fa 100644
--- a/app/controllers/projects/lfs_api_controller.rb
+++ b/app/controllers/projects/lfs_api_controller.rb
@@ -22,7 +22,7 @@ class Projects::LfsApiController < Projects::GitHttpClientController
     render(
       json: {
         message: 'Server supports batch API only, please update your Git LFS client to version 1.0.1 and up.',
-        documentation_url: "#{Gitlab.config.gitlab.url}/help",
+        documentation_url: "#{Gitlab.config.gitlab.url}/help"
       },
       status: 501
     )
@@ -55,7 +55,7 @@ class Projects::LfsApiController < Projects::GitHttpClientController
       else
         object[:error] = {
           code: 404,
-          message: "Object does not exist on the server or you don't have permissions to access it",
+          message: "Object does not exist on the server or you don't have permissions to access it"
         }
       end
     end
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index a63b7ff0bed..314906b5f09 100755..100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -9,15 +9,14 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
   before_action :module_enabled
   before_action :merge_request, only: [
-    :edit, :update, :show, :diffs, :commits, :conflicts, :conflict_for_path, :pipelines, :merge, :merge_check,
-    :ci_status, :pipeline_status, :ci_environments_status, :toggle_subscription, :cancel_merge_when_pipeline_succeeds, :remove_wip, :resolve_conflicts, :assign_related_issues
+    :edit, :update, :show, :diffs, :commits, :conflicts, :conflict_for_path, :pipelines, :merge,
+    :pipeline_status, :ci_environments_status, :toggle_subscription, :cancel_merge_when_pipeline_succeeds, :remove_wip, :resolve_conflicts, :assign_related_issues, :commit_change_content
   ]
   before_action :validates_merge_request, only: [:show, :diffs, :commits, :pipelines]
-  before_action :define_show_vars, only: [:show, :diffs, :commits, :conflicts, :conflict_for_path, :builds, :pipelines]
-  before_action :define_widget_vars, only: [:merge, :cancel_merge_when_pipeline_succeeds, :merge_check]
-  before_action :define_commit_vars, only: [:diffs]
+  before_action :define_show_vars, only: [:diffs, :commits, :conflicts, :conflict_for_path, :builds, :pipelines]
   before_action :ensure_ref_fetched, only: [:show, :diffs, :commits, :builds, :conflicts, :conflict_for_path, :pipelines]
   before_action :close_merge_request_without_source_project, only: [:show, :diffs, :commits, :builds, :pipelines]
+  before_action :check_if_can_be_merged, only: :show
   before_action :apply_diff_view_cookie!, only: [:new_diffs]
   before_action :build_merge_request, only: [:new, :new_diffs]
 
@@ -74,10 +73,15 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
   def show
     respond_to do |format|
-      format.html { define_discussion_vars }
+      format.html do
+        define_discussion_vars
+        define_show_vars
+      end
 
       format.json do
-        render json: MergeRequestSerializer.new.represent(@merge_request)
+        Gitlab::PollingInterval.set_header(response, interval: 10_000)
+
+        render json: serializer.represent(@merge_request, basic: params[:basic])
       end
 
       format.patch  do
@@ -125,8 +129,6 @@ class Projects::MergeRequestsController < Projects::ApplicationController
       @diff_notes_disabled = true
     end
 
-    define_commit_vars
-
     render_diff_for_path(@diffs)
   end
 
@@ -154,8 +156,8 @@ class Projects::MergeRequestsController < Projects::ApplicationController
       format.html { define_discussion_vars }
 
       format.json do
-        if @merge_request.conflicts_can_be_resolved_in_ui?
-          render json: @merge_request.conflicts
+        if @conflicts_list.can_be_resolved_in_ui?
+          render json: @conflicts_list
         elsif @merge_request.can_be_merged?
           render json: {
             message: 'The merge conflicts for this merge request have already been resolved. Please return to the merge request.',
@@ -172,9 +174,9 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   end
 
   def conflict_for_path
-    return render_404 unless @merge_request.conflicts_can_be_resolved_in_ui?
+    return render_404 unless @conflicts_list.can_be_resolved_in_ui?
 
-    file = @merge_request.conflicts.file_for_path(params[:old_path], params[:new_path])
+    file = @conflicts_list.file_for_path(params[:old_path], params[:new_path])
 
     return render_404 unless file
 
@@ -182,7 +184,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   end
 
   def resolve_conflicts
-    return render_404 unless @merge_request.conflicts_can_be_resolved_in_ui?
+    return render_404 unless @conflicts_list.can_be_resolved_in_ui?
 
     if @merge_request.can_be_merged?
       render status: :bad_request, json: { message: 'The merge conflicts for this merge request have already been resolved.' }
@@ -190,7 +192,9 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     end
 
     begin
-      MergeRequests::ResolveService.new(@merge_request.source_project, current_user, params).execute(@merge_request)
+      MergeRequests::Conflicts::ResolveService.
+        new(merge_request).
+        execute(current_user, params)
 
       flash[:notice] = 'All merge conflicts were resolved. The merge request can now be merged.'
 
@@ -214,7 +218,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
         Gitlab::PollingInterval.set_header(response, interval: 10_000)
 
         render json: PipelineSerializer
-          .new(project: @project, user: @current_user)
+          .new(project: @project, current_user: @current_user)
           .represent(@pipelines)
       end
     end
@@ -230,7 +234,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
         render json: {
           pipelines: PipelineSerializer
-          .new(project: @project, user: @current_user)
+          .new(project: @project, current_user: @current_user)
           .represent(@pipelines)
         }
       end
@@ -299,17 +303,15 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   end
 
   def remove_wip
-    MergeRequests::UpdateService.new(project, current_user, wip_event: 'unwip').execute(@merge_request)
+    @merge_request = MergeRequests::UpdateService
+      .new(project, current_user, wip_event: 'unwip')
+      .execute(@merge_request)
 
-    redirect_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request),
-      notice: "The merge request can now be merged."
+    render json: serializer.represent(@merge_request)
   end
 
-  def merge_check
-    @merge_request.check_if_can_be_merged
-    @pipelines = @merge_request.all_pipelines
-
-    render partial: "projects/merge_requests/widget/show.html.haml", layout: false
+  def commit_change_content
+    render partial: 'projects/merge_requests/widget/commit_change_content', layout: false
   end
 
   def cancel_merge_when_pipeline_succeeds
@@ -320,65 +322,22 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     MergeRequests::MergeWhenPipelineSucceedsService
       .new(@project, current_user)
       .cancel(@merge_request)
+
+    render json: serializer.represent(@merge_request)
   end
 
   def merge
     return access_denied! unless @merge_request.can_be_merged_by?(current_user)
 
-    # Disable the CI check if merge_when_pipeline_succeeds is enabled since we have
-    # to wait until CI completes to know
-    unless @merge_request.mergeable?(skip_ci_check: merge_when_pipeline_succeeds_active?)
-      @status = :failed
-      return
-    end
-
-    if params[:sha] != @merge_request.diff_head_sha
-      @status = :sha_mismatch
-      return
-    end
-
-    @merge_request.update(merge_error: nil)
-
-    if params[:merge_when_pipeline_succeeds].present?
-      unless @merge_request.head_pipeline
-        @status = :failed
-        return
-      end
-
-      if @merge_request.head_pipeline.active?
-        MergeRequests::MergeWhenPipelineSucceedsService
-          .new(@project, current_user, merge_params)
-          .execute(@merge_request)
+    status = merge!
 
-        @status = :merge_when_pipeline_succeeds
-      elsif @merge_request.head_pipeline.success?
-        # This can be triggered when a user clicks the auto merge button while
-        # the tests finish at about the same time
-        MergeWorker.perform_async(@merge_request.id, current_user.id, params)
-        @status = :success
-      else
-        @status = :failed
-      end
+    if @merge_request.merge_error
+      render json: { status: status, merge_error: @merge_request.merge_error }
     else
-      MergeWorker.perform_async(@merge_request.id, current_user.id, params)
-      @status = :success
+      render json: { status: status }
     end
   end
 
-  def merge_widget_refresh
-    @status =
-      if merge_request.merge_when_pipeline_succeeds
-        :merge_when_pipeline_succeeds
-      else
-        # Only MRs that can be merged end in this action
-        # MR can be already picked up for merge / merged already or can be waiting for worker to be picked up
-        # in last case it does not have any special status. Possible error is handled inside widget js function
-        :success
-      end
-
-    render 'merge'
-  end
-
   def branch_from
     # This is always source
     @source_project = @merge_request.nil? ? @project : @merge_request.source_project
@@ -428,37 +387,9 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     end
   end
 
-  def ci_status
-    pipeline = @merge_request.head_pipeline
-    @pipelines = @merge_request.all_pipelines
-
-    if pipeline
-      status = pipeline.status
-      coverage = pipeline.coverage
-
-      status = "success_with_warnings" if pipeline.success? && pipeline.has_warnings?
-
-      status ||= "preparing"
-    else
-      ci_service = @merge_request.source_project.try(:ci_service)
-      status = ci_service.commit_status(merge_request.diff_head_sha, merge_request.source_branch) if ci_service
-    end
-
-    response = {
-      title: merge_request.title,
-      sha: (merge_request.diff_head_commit.short_id if merge_request.diff_head_sha),
-      status: status,
-      coverage: coverage,
-      pipeline: pipeline.try(:id),
-      has_ci: @merge_request.has_ci?
-    }
-
-    render json: response
-  end
-
   def pipeline_status
     render json: PipelineSerializer
-      .new(project: @project, user: @current_user)
+      .new(project: @project, current_user: @current_user)
       .represent_status(@merge_request.head_pipeline)
   end
 
@@ -474,10 +405,19 @@ class Projects::MergeRequestsController < Projects::ApplicationController
               stop_namespace_project_environment_path(project.namespace, project, environment)
             end
 
+          metrics_url =
+            if can?(current_user, :read_environment, environment) && environment.has_metrics?
+              metrics_namespace_project_environment_deployment_path(environment.project.namespace,
+                                                                    environment.project,
+                                                                    environment,
+                                                                    deployment)
+            end
+
           {
             id: environment.id,
             name: environment.name,
             url: namespace_project_environment_path(project.namespace, project, environment),
+            metrics_url: metrics_url,
             stop_url: stop_url,
             external_url: environment.external_url,
             external_url_formatted: environment.formatted_external_url,
@@ -516,7 +456,9 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   end
 
   def authorize_can_resolve_conflicts!
-    return render_404 unless @merge_request.conflicts_can_be_resolved_by?(current_user)
+    @conflicts_list = MergeRequests::Conflicts::ListService.new(@merge_request)
+
+    return render_404 unless @conflicts_list.can_be_resolved_by?(current_user)
   end
 
   def module_enabled
@@ -555,15 +497,6 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     @notes = prepare_notes_for_rendering(@discussions.flat_map(&:notes))
   end
 
-  def define_widget_vars
-    @pipeline = @merge_request.head_pipeline
-  end
-
-  def define_commit_vars
-    @commit = @merge_request.diff_head_commit
-    @base_commit = @merge_request.diff_base_commit || @merge_request.likely_diff_base_commit
-  end
-
   def define_diff_vars
     @merge_request_diff =
       if params[:diff_id]
@@ -628,7 +561,6 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     @source_project = merge_request.source_project
     @commits = @merge_request.compare_commits.reverse
     @commit = @merge_request.diff_head_commit
-    @base_commit = @merge_request.diff_base_commit
 
     @note_counts = Note.where(commit_id: @commits.map(&:id)).
       group(:commit_id).count
@@ -694,4 +626,50 @@ class Projects::MergeRequestsController < Projects::ApplicationController
       @merge_request.close
     end
   end
+
+  private
+
+  def check_if_can_be_merged
+    @merge_request.check_if_can_be_merged
+  end
+
+  def merge!
+    # Disable the CI check if merge_when_pipeline_succeeds is enabled since we have
+    # to wait until CI completes to know
+    unless @merge_request.mergeable?(skip_ci_check: merge_when_pipeline_succeeds_active?)
+      return :failed
+    end
+
+    return :sha_mismatch if params[:sha] != @merge_request.diff_head_sha
+
+    @merge_request.update(merge_error: nil)
+
+    if params[:merge_when_pipeline_succeeds].present?
+      return :failed unless @merge_request.head_pipeline
+
+      if @merge_request.head_pipeline.active?
+        MergeRequests::MergeWhenPipelineSucceedsService
+          .new(@project, current_user, merge_params)
+          .execute(@merge_request)
+
+        :merge_when_pipeline_succeeds
+      elsif @merge_request.head_pipeline.success?
+        # This can be triggered when a user clicks the auto merge button while
+        # the tests finish at about the same time
+        MergeWorker.perform_async(@merge_request.id, current_user.id, params)
+
+        :success
+      else
+        :failed
+      end
+    else
+      MergeWorker.perform_async(@merge_request.id, current_user.id, params)
+
+      :success
+    end
+  end
+
+  def serializer
+    MergeRequestSerializer.new(current_user: current_user, project: merge_request.project)
+  end
 end
diff --git a/app/controllers/projects/notes_controller.rb b/app/controllers/projects/notes_controller.rb
index 37f51b2ebe3..41a13f6f577 100644
--- a/app/controllers/projects/notes_controller.rb
+++ b/app/controllers/projects/notes_controller.rb
@@ -62,50 +62,6 @@ class Projects::NotesController < Projects::ApplicationController
   end
   alias_method :awardable, :note
 
-  def note_html(note)
-    render_to_string(
-      "shared/notes/_note",
-      layout: false,
-      formats: [:html],
-      locals: { note: note }
-    )
-  end
-
-  def discussion_html(discussion)
-    return if discussion.individual_note?
-
-    render_to_string(
-      "discussions/_discussion",
-      layout: false,
-      formats: [:html],
-      locals: { discussion: discussion }
-    )
-  end
-
-  def diff_discussion_html(discussion)
-    return unless discussion.diff_discussion?
-
-    if params[:view] == 'parallel'
-      template = "discussions/_parallel_diff_discussion"
-      locals =
-        if params[:line_type] == 'old'
-          { discussions_left: [discussion], discussions_right: nil }
-        else
-          { discussions_left: nil, discussions_right: [discussion] }
-        end
-    else
-      template = "discussions/_diff_discussion"
-      locals = { discussions: [discussion] }
-    end
-
-    render_to_string(
-      template,
-      layout: false,
-      formats: [:html],
-      locals: locals
-    )
-  end
-
   def finder_params
     params.merge(last_fetched_at: last_fetched_at)
   end
diff --git a/app/controllers/projects/pipeline_schedules_controller.rb b/app/controllers/projects/pipeline_schedules_controller.rb
new file mode 100644
index 00000000000..1616b2cb6b8
--- /dev/null
+++ b/app/controllers/projects/pipeline_schedules_controller.rb
@@ -0,0 +1,68 @@
+class Projects::PipelineSchedulesController < Projects::ApplicationController
+  before_action :authorize_read_pipeline_schedule!
+  before_action :authorize_create_pipeline_schedule!, only: [:new, :create, :edit, :take_ownership, :update]
+  before_action :authorize_admin_pipeline_schedule!, only: [:destroy]
+
+  before_action :schedule, only: [:edit, :update, :destroy, :take_ownership]
+
+  def index
+    @scope = params[:scope]
+    @all_schedules = PipelineSchedulesFinder.new(@project).execute
+    @schedules = PipelineSchedulesFinder.new(@project).execute(scope: params[:scope])
+      .includes(:last_pipeline)
+  end
+
+  def new
+    @schedule = project.pipeline_schedules.new
+  end
+
+  def create
+    @schedule = Ci::CreatePipelineScheduleService
+      .new(@project, current_user, schedule_params)
+      .execute
+
+    if @schedule.persisted?
+      redirect_to pipeline_schedules_path(@project)
+    else
+      render :new
+    end
+  end
+
+  def edit
+  end
+
+  def update
+    if schedule.update(schedule_params)
+      redirect_to namespace_project_pipeline_schedules_path(@project.namespace.becomes(Namespace), @project)
+    else
+      render :edit
+    end
+  end
+
+  def take_ownership
+    if schedule.update(owner: current_user)
+      redirect_to pipeline_schedules_path(@project)
+    else
+      redirect_to pipeline_schedules_path(@project), alert: "Failed to change the owner"
+    end
+  end
+
+  def destroy
+    if schedule.destroy
+      redirect_to pipeline_schedules_path(@project)
+    else
+      redirect_to pipeline_schedules_path(@project), alert: "Failed to remove the pipeline schedule"
+    end
+  end
+
+  private
+
+  def schedule
+    @schedule ||= project.pipeline_schedules.find(params[:id])
+  end
+
+  def schedule_params
+    params.require(:schedule)
+      .permit(:description, :cron, :cron_timezone, :ref, :active)
+  end
+end
diff --git a/app/controllers/projects/pipelines_controller.rb b/app/controllers/projects/pipelines_controller.rb
index 454b8ee17af..87ec0df257a 100644
--- a/app/controllers/projects/pipelines_controller.rb
+++ b/app/controllers/projects/pipelines_controller.rb
@@ -1,11 +1,15 @@
 class Projects::PipelinesController < Projects::ApplicationController
   before_action :pipeline, except: [:index, :new, :create, :charts]
-  before_action :commit, only: [:show, :builds]
+  before_action :commit, only: [:show, :builds, :failures]
   before_action :authorize_read_pipeline!
   before_action :authorize_create_pipeline!, only: [:new, :create]
   before_action :authorize_update_pipeline!, only: [:retry, :cancel]
   before_action :builds_enabled, only: :charts
 
+  wrap_parameters Ci::Pipeline
+
+  POLLING_INTERVAL = 10_000
+
   def index
     @scope = params[:scope]
     @pipelines = PipelinesFinder
@@ -29,18 +33,18 @@ class Projects::PipelinesController < Projects::ApplicationController
     respond_to do |format|
       format.html
       format.json do
-        Gitlab::PollingInterval.set_header(response, interval: 10_000)
+        Gitlab::PollingInterval.set_header(response, interval: POLLING_INTERVAL)
 
         render json: {
           pipelines: PipelineSerializer
-            .new(project: @project, user: @current_user)
+            .new(project: @project, current_user: @current_user)
             .with_pagination(request, response)
             .represent(@pipelines),
           count: {
             all: @pipelines_count,
             running: @running_count,
             pending: @pending_count,
-            finished: @finished_count,
+            finished: @finished_count
           }
         }
       end
@@ -54,29 +58,43 @@ class Projects::PipelinesController < Projects::ApplicationController
   def create
     @pipeline = Ci::CreatePipelineService
       .new(project, current_user, create_params)
-      .execute(ignore_skip_ci: true, save_on_errors: false)
-    unless @pipeline.persisted?
+      .execute(:web, ignore_skip_ci: true, save_on_errors: false)
+
+    if @pipeline.persisted?
+      redirect_to namespace_project_pipeline_path(project.namespace, project, @pipeline)
+    else
       render 'new'
-      return
     end
-
-    redirect_to namespace_project_pipeline_path(project.namespace, project, @pipeline)
   end
 
   def show
+    respond_to do |format|
+      format.html
+      format.json do
+        Gitlab::PollingInterval.set_header(response, interval: POLLING_INTERVAL)
+
+        render json: PipelineSerializer
+          .new(project: @project, current_user: @current_user)
+          .represent(@pipeline, grouped: true)
+      end
+    end
   end
 
   def builds
-    respond_to do |format|
-      format.html do
-        render 'show'
-      end
+    render_show
+  end
+
+  def failures
+    if @pipeline.statuses.latest.failed.present?
+      render_show
+    else
+      redirect_to pipeline_path(@pipeline)
     end
   end
 
   def status
     render json: PipelineSerializer
-      .new(project: @project, user: @current_user)
+      .new(project: @project, current_user: @current_user)
       .represent_status(@pipeline)
   end
 
@@ -92,13 +110,25 @@ class Projects::PipelinesController < Projects::ApplicationController
   def retry
     pipeline.retry_failed(current_user)
 
-    redirect_back_or_default default: namespace_project_pipelines_path(project.namespace, project)
+    respond_to do |format|
+      format.html do
+        redirect_back_or_default default: namespace_project_pipelines_path(project.namespace, project)
+      end
+
+      format.json { head :no_content }
+    end
   end
 
   def cancel
     pipeline.cancel_running
 
-    redirect_back_or_default default: namespace_project_pipelines_path(project.namespace, project)
+    respond_to do |format|
+      format.html do
+        redirect_back_or_default default: namespace_project_pipelines_path(project.namespace, project)
+      end
+
+      format.json { head :no_content }
+    end
   end
 
   def charts
@@ -111,6 +141,14 @@ class Projects::PipelinesController < Projects::ApplicationController
 
   private
 
+  def render_show
+    respond_to do |format|
+      format.html do
+        render 'show'
+      end
+    end
+  end
+
   def create_params
     params.require(:pipeline).permit(:ref)
   end
diff --git a/app/controllers/projects/pipelines_settings_controller.rb b/app/controllers/projects/pipelines_settings_controller.rb
index ff50602831c..38a47651000 100644
--- a/app/controllers/projects/pipelines_settings_controller.rb
+++ b/app/controllers/projects/pipelines_settings_controller.rb
@@ -7,7 +7,7 @@ class Projects::PipelinesSettingsController < Projects::ApplicationController
 
   def update
     if @project.update_attributes(update_params)
-      flash[:notice] = "CI/CD Pipelines settings for '#{@project.name}' were successfully updated."
+      flash[:notice] = "Pipelines settings for '#{@project.name}' were successfully updated."
       redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project)
     else
       render 'show'
diff --git a/app/controllers/projects/refs_controller.rb b/app/controllers/projects/refs_controller.rb
index 667f4870c7a..2a0b58fae7c 100644
--- a/app/controllers/projects/refs_controller.rb
+++ b/app/controllers/projects/refs_controller.rb
@@ -74,6 +74,6 @@ class Projects::RefsController < Projects::ApplicationController
   private
 
   def validate_ref_id
-    return not_found! if params[:id].present? && params[:id] !~ Gitlab::Regex.git_reference_regex
+    return not_found! if params[:id].present? && params[:id] !~ Gitlab::PathRegex.git_reference_regex
   end
 end
diff --git a/app/controllers/projects/snippets_controller.rb b/app/controllers/projects/snippets_controller.rb
index 66f913f8f9d..3a97c1e98af 100644
--- a/app/controllers/projects/snippets_controller.rb
+++ b/app/controllers/projects/snippets_controller.rb
@@ -23,12 +23,11 @@ class Projects::SnippetsController < Projects::ApplicationController
   respond_to :html
 
   def index
-    @snippets = SnippetsFinder.new.execute(
+    @snippets = SnippetsFinder.new(
       current_user,
-      filter: :by_project,
       project: @project,
       scope: params[:scope]
-    )
+    ).execute
     @snippets = @snippets.page(params[:page])
     if @snippets.out_of_range? && @snippets.total_pages != 0
       redirect_to namespace_project_snippets_path(page: @snippets.total_pages)
@@ -57,7 +56,7 @@ class Projects::SnippetsController < Projects::ApplicationController
 
   def show
     blob = @snippet.blob
-    override_max_blob_size(blob)
+    conditionally_expand_blob(blob)
 
     respond_to do |format|
       format.html do
diff --git a/app/controllers/projects/tags_controller.rb b/app/controllers/projects/tags_controller.rb
index e13f0bde315..afbea3e2b40 100644
--- a/app/controllers/projects/tags_controller.rb
+++ b/app/controllers/projects/tags_controller.rb
@@ -38,6 +38,8 @@ class Projects::TagsController < Projects::ApplicationController
       redirect_to namespace_project_tag_path(@project.namespace, @project, @tag.name)
     else
       @error = result[:message]
+      @message = params[:message]
+      @release_description = params[:release_description]
       render action: 'new'
     end
   end
@@ -48,7 +50,7 @@ class Projects::TagsController < Projects::ApplicationController
     respond_to do |format|
       if result[:status] == :success
         format.html do
-          redirect_to namespace_project_tags_path(@project.namespace, @project)
+          redirect_to namespace_project_tags_path(@project.namespace, @project), status: 303
         end
 
         format.js
@@ -57,7 +59,7 @@ class Projects::TagsController < Projects::ApplicationController
 
         format.html do
           redirect_to namespace_project_tags_path(@project.namespace, @project),
-            alert: @error
+            alert: @error, status: 303
         end
 
         format.js do
diff --git a/app/controllers/projects/tree_controller.rb b/app/controllers/projects/tree_controller.rb
index 5e2182c883e..f8eb8e00a5d 100644
--- a/app/controllers/projects/tree_controller.rb
+++ b/app/controllers/projects/tree_controller.rb
@@ -24,6 +24,8 @@ class Projects::TreeController < Projects::ApplicationController
       end
     end
 
+    @last_commit = @repository.last_commit_for_path(@commit.id, @tree.path) || @commit
+
     respond_to do |format|
       format.html
       # Disable cache so browser history works
@@ -48,7 +50,7 @@ class Projects::TreeController < Projects::ApplicationController
     @dir_name = File.join(@path, params[:dir_name])
     @commit_params = {
       file_path: @dir_name,
-      commit_message: params[:commit_message],
+      commit_message: params[:commit_message]
     }
   end
 end
diff --git a/app/controllers/projects/variables_controller.rb b/app/controllers/projects/variables_controller.rb
index a4d1b1ee69b..0953eecaeb5 100644
--- a/app/controllers/projects/variables_controller.rb
+++ b/app/controllers/projects/variables_controller.rb
@@ -42,6 +42,7 @@ class Projects::VariablesController < Projects::ApplicationController
   private
 
   def project_params
-    params.require(:variable).permit([:id, :key, :value, :_destroy])
+    params.require(:variable)
+      .permit([:id, :key, :value, :protected, :_destroy])
   end
 end
diff --git a/app/controllers/projects/wikis_controller.rb b/app/controllers/projects/wikis_controller.rb
index 96125684da0..887d18dbec3 100644
--- a/app/controllers/projects/wikis_controller.rb
+++ b/app/controllers/projects/wikis_controller.rb
@@ -1,6 +1,4 @@
 class Projects::WikisController < Projects::ApplicationController
-  include MarkdownPreview
-
   before_action :authorize_read_wiki!
   before_action :authorize_create_wiki!, only: [:edit, :create, :history]
   before_action :authorize_admin_wiki!, only: :destroy
@@ -97,9 +95,14 @@ class Projects::WikisController < Projects::ApplicationController
   end
 
   def preview_markdown
-    context = { pipeline: :wiki, project_wiki: @project_wiki, page_slug: params[:id] }
-
-    render_markdown_preview(params[:text], context)
+    result = PreviewMarkdownService.new(@project, current_user, params).execute
+
+    render json: {
+      body: view_context.markdown(result[:text], pipeline: :wiki, project_wiki: @project_wiki, page_slug: params[:id]),
+      references: {
+        users: result[:users]
+      }
+    }
   end
 
   private
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index 9f6ee4826e6..cc62e1fa99b 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -1,7 +1,6 @@
 class ProjectsController < Projects::ApplicationController
   include IssuableCollections
   include ExtractsPath
-  include MarkdownPreview
 
   before_action :authenticate_user!, except: [:index, :show, :activity, :refs]
   before_action :project, except: [:index, :new, :create]
@@ -221,7 +220,7 @@ class ProjectsController < Projects::ApplicationController
     branches = BranchesFinder.new(@repository, params).execute.map(&:name)
 
     options = {
-      'Branches' => branches.take(100),
+      'Branches' => branches.take(100)
     }
 
     unless @repository.tag_count.zero?
@@ -240,7 +239,15 @@ class ProjectsController < Projects::ApplicationController
   end
 
   def preview_markdown
-    render_markdown_preview(params[:text])
+    result = PreviewMarkdownService.new(@project, current_user, params).execute
+
+    render json: {
+      body: view_context.markdown(result[:text]),
+      references: {
+        users: result[:users],
+        commands: view_context.markdown(result[:commands])
+      }
+    }
   end
 
   private
@@ -250,7 +257,7 @@ class ProjectsController < Projects::ApplicationController
   #
   # pages list order: repository readme, wiki home, issues list, customize workflow
   def render_landing_page
-    if @project.feature_available?(:repository, current_user)
+    if can?(current_user, :download_code, @project)
       return render 'projects/no_repo' unless @project.repository_exists?
       render 'projects/empty' if @project.empty_repo?
     else
@@ -358,4 +365,11 @@ class ProjectsController < Projects::ApplicationController
   def project_view_files_allowed?
     !project.empty_repo? && can?(current_user, :download_code, project)
   end
+
+  def build_canonical_path(project)
+    params[:namespace_id] = project.namespace.to_param
+    params[:id] = project.to_param
+
+    url_for(params)
+  end
 end
diff --git a/app/controllers/snippets/notes_controller.rb b/app/controllers/snippets/notes_controller.rb
index 3c4ddc1680d..f9496787b15 100644
--- a/app/controllers/snippets/notes_controller.rb
+++ b/app/controllers/snippets/notes_controller.rb
@@ -13,15 +13,6 @@ class Snippets::NotesController < ApplicationController
   end
   alias_method :awardable, :note
 
-  def note_html(note)
-    render_to_string(
-      "shared/notes/_note",
-      layout: false,
-      formats: [:html],
-      locals: { note: note }
-    )
-  end
-
   def project
     nil
   end
diff --git a/app/controllers/snippets_controller.rb b/app/controllers/snippets_controller.rb
index da1ae9a34d9..5b2d143ee79 100644
--- a/app/controllers/snippets_controller.rb
+++ b/app/controllers/snippets_controller.rb
@@ -3,7 +3,6 @@ class SnippetsController < ApplicationController
   include ToggleAwardEmoji
   include SpammableActions
   include SnippetsActions
-  include MarkdownPreview
   include RendersBlob
 
   before_action :snippet, only: [:show, :edit, :destroy, :update, :raw]
@@ -28,12 +27,8 @@ class SnippetsController < ApplicationController
 
       return render_404 unless @user
 
-      @snippets = SnippetsFinder.new.execute(current_user, {
-        filter: :by_user,
-        user: @user,
-        scope: params[:scope]
-      })
-      .page(params[:page])
+      @snippets = SnippetsFinder.new(current_user, author: @user, scope: params[:scope])
+        .execute.page(params[:page])
 
       render 'index'
     else
@@ -63,8 +58,9 @@ class SnippetsController < ApplicationController
 
   def show
     blob = @snippet.blob
-    override_max_blob_size(blob)
+    conditionally_expand_blob(blob)
 
+    @note = Note.new(noteable: @snippet)
     @noteable = @snippet
 
     @discussions = @snippet.discussions
@@ -90,26 +86,33 @@ class SnippetsController < ApplicationController
   end
 
   def preview_markdown
-    render_markdown_preview(params[:text], skip_project_check: true)
+    result = PreviewMarkdownService.new(@project, current_user, params).execute
+
+    render json: {
+      body: view_context.markdown(result[:text], skip_project_check: true),
+      references: {
+        users: result[:users]
+      }
+    }
   end
 
   protected
 
   def snippet
-    @snippet ||= if current_user
-                   PersonalSnippet.where("author_id = ? OR visibility_level IN (?)",
-                     current_user.id,
-                     [Snippet::PUBLIC, Snippet::INTERNAL]).
-                     find(params[:id])
-                 else
-                   PersonalSnippet.find(params[:id])
-                 end
+    @snippet ||= PersonalSnippet.find_by(id: params[:id])
   end
+
   alias_method :awardable, :snippet
   alias_method :spammable, :snippet
 
   def authorize_read_snippet!
-    authenticate_user! unless can?(current_user, :read_personal_snippet, @snippet)
+    return if can?(current_user, :read_personal_snippet, @snippet)
+
+    if current_user
+      render_404
+    else
+      authenticate_user!
+    end
   end
 
   def authorize_update_snippet!
diff --git a/app/controllers/uploads_controller.rb b/app/controllers/uploads_controller.rb
index 21a964fb391..eef53730291 100644
--- a/app/controllers/uploads_controller.rb
+++ b/app/controllers/uploads_controller.rb
@@ -21,6 +21,8 @@ class UploadsController < ApplicationController
         can?(current_user, :read_project, model.project)
       when User
         true
+      when Appearance
+        true
       else
         permission = "read_#{model.class.to_s.underscore}".to_sym
 
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index a452bbba422..19fc1e5de49 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -1,7 +1,8 @@
 class UsersController < ApplicationController
+  include RoutableActions
+
   skip_before_action :authenticate_user!
   before_action :user, except: [:exists]
-  before_action :authorize_read_user!, only: [:show]
 
   def show
     respond_to do |format|
@@ -91,12 +92,8 @@ class UsersController < ApplicationController
 
   private
 
-  def authorize_read_user!
-    render_404 unless can?(current_user, :read_user, user)
-  end
-
   def user
-    @user ||= User.find_by_username!(params[:username])
+    @user ||= find_routable!(User, params[:username])
   end
 
   def contributed_projects
@@ -131,15 +128,18 @@ class UsersController < ApplicationController
   end
 
   def load_snippets
-    @snippets = SnippetsFinder.new.execute(
+    @snippets = SnippetsFinder.new(
       current_user,
-      filter: :by_user,
-      user: user,
+      author: user,
       scope: params[:scope]
-    ).page(params[:page])
+    ).execute.page(params[:page])
   end
 
   def projects_for_current_user
     ProjectsFinder.new(current_user: current_user).execute
   end
+
+  def build_canonical_path(user)
+    url_for(params.merge(username: user.to_param))
+  end
 end
diff --git a/app/finders/groups_finder.rb b/app/finders/groups_finder.rb
index d932a17883f..f68610e197c 100644
--- a/app/finders/groups_finder.rb
+++ b/app/finders/groups_finder.rb
@@ -1,13 +1,19 @@
 class GroupsFinder < UnionFinder
-  def execute(current_user = nil)
-    segments = all_groups(current_user)
+  def initialize(current_user = nil, params = {})
+    @current_user = current_user
+    @params = params
+  end
 
-    find_union(segments, Group).with_route.order_id_desc
+  def execute
+    groups = find_union(all_groups, Group).with_route.order_id_desc
+    by_parent(groups)
   end
 
   private
 
-  def all_groups(current_user)
+  attr_reader :current_user, :params
+
+  def all_groups
     groups = []
 
     groups << current_user.authorized_groups if current_user
@@ -15,4 +21,10 @@ class GroupsFinder < UnionFinder
 
     groups
   end
+
+  def by_parent(groups)
+    return groups unless params[:parent]
+
+    groups.where(parent: params[:parent])
+  end
 end
diff --git a/app/finders/issuable_finder.rb b/app/finders/issuable_finder.rb
index 4cc42b88a2a..957ad875858 100644
--- a/app/finders/issuable_finder.rb
+++ b/app/finders/issuable_finder.rb
@@ -231,7 +231,7 @@ class IssuableFinder
     when 'created-by-me', 'authored'
       items.where(author_id: current_user.id)
     when 'assigned-to-me'
-      items.where(assignee_id: current_user.id)
+      items.assigned_to(current_user)
     else
       items
     end
diff --git a/app/finders/issues_finder.rb b/app/finders/issues_finder.rb
index 76715e5970d..b4c074bc69c 100644
--- a/app/finders/issues_finder.rb
+++ b/app/finders/issues_finder.rb
@@ -26,17 +26,28 @@ class IssuesFinder < IssuableFinder
     IssuesFinder.not_restricted_by_confidentiality(current_user)
   end
 
+  def by_assignee(items)
+    if assignee
+      items.assigned_to(assignee)
+    elsif no_assignee?
+      items.unassigned
+    elsif assignee_id? || assignee_username? # assignee not found
+      items.none
+    else
+      items
+    end
+  end
+
   def self.not_restricted_by_confidentiality(user)
-    return Issue.where('issues.confidential IS NULL OR issues.confidential IS FALSE') if user.blank?
+    return Issue.where('issues.confidential IS NOT TRUE') if user.blank?
 
     return Issue.all if user.admin?
 
     Issue.where('
-      issues.confidential IS NULL
-      OR issues.confidential IS FALSE
+      issues.confidential IS NOT TRUE
       OR (issues.confidential = TRUE
         AND (issues.author_id = :user_id
-          OR issues.assignee_id = :user_id
+          OR EXISTS (SELECT TRUE FROM issue_assignees WHERE user_id = :user_id AND issue_id = issues.id)
           OR issues.project_id IN(:project_ids)))',
       user_id: user.id,
       project_ids: user.authorized_projects(Gitlab::Access::REPORTER).select(:id))
diff --git a/app/finders/notes_finder.rb b/app/finders/notes_finder.rb
index dc6a8ad1f66..02eb983bf55 100644
--- a/app/finders/notes_finder.rb
+++ b/app/finders/notes_finder.rb
@@ -67,7 +67,7 @@ class NotesFinder
     when "merge_request"
       MergeRequestsFinder.new(@current_user, project_id: @project.id).execute
     when "snippet", "project_snippet"
-      SnippetsFinder.new.execute(@current_user, filter: :by_project, project: @project)
+      SnippetsFinder.new(@current_user, project: @project).execute
     when "personal_snippet"
       PersonalSnippet.all
     else
diff --git a/app/finders/pipeline_schedules_finder.rb b/app/finders/pipeline_schedules_finder.rb
new file mode 100644
index 00000000000..2ac4289fbbe
--- /dev/null
+++ b/app/finders/pipeline_schedules_finder.rb
@@ -0,0 +1,22 @@
+class PipelineSchedulesFinder
+  attr_reader :project, :pipeline_schedules
+
+  def initialize(project)
+    @project = project
+    @pipeline_schedules = project.pipeline_schedules
+  end
+
+  def execute(scope: nil)
+    scoped_schedules =
+      case scope
+      when 'active'
+        pipeline_schedules.active
+      when 'inactive'
+        pipeline_schedules.inactive
+      else
+        pipeline_schedules
+      end
+
+    scoped_schedules.order(id: :desc)
+  end
+end
diff --git a/app/finders/projects_finder.rb b/app/finders/projects_finder.rb
index f6d8226bf3f..5bf722d1ec6 100644
--- a/app/finders/projects_finder.rb
+++ b/app/finders/projects_finder.rb
@@ -7,6 +7,7 @@
 #   project_ids_relation: int[] - project ids to use
 #   params:
 #     trending: boolean
+#     owned: boolean
 #     non_public: boolean
 #     starred: boolean
 #     sort: string
@@ -28,13 +29,17 @@ class ProjectsFinder < UnionFinder
 
   def execute
     items = init_collection
-    items = by_ids(items)
+    items = items.map do |item|
+      item = by_ids(item)
+      item = by_personal(item)
+      item = by_starred(item)
+      item = by_trending(item)
+      item = by_visibilty_level(item)
+      item = by_tags(item)
+      item = by_search(item)
+      by_archived(item)
+    end
     items = union(items)
-    items = by_personal(items)
-    items = by_visibilty_level(items)
-    items = by_tags(items)
-    items = by_search(items)
-    items = by_archived(items)
     sort(items)
   end
 
@@ -43,10 +48,8 @@ class ProjectsFinder < UnionFinder
   def init_collection
     projects = []
 
-    if params[:trending].present?
-      projects << Project.trending
-    elsif params[:starred].present? && current_user
-      projects << current_user.viewable_starred_projects
+    if params[:owned].present?
+      projects << current_user.owned_projects if current_user
     else
       projects << current_user.authorized_projects if current_user
       projects << Project.unscoped.public_to_user(current_user) unless params[:non_public].present?
@@ -56,7 +59,7 @@ class ProjectsFinder < UnionFinder
   end
 
   def by_ids(items)
-    project_ids_relation ? items.map { |item| item.where(id: project_ids_relation) } : items
+    project_ids_relation ? items.where(id: project_ids_relation) : items
   end
 
   def union(items)
@@ -67,6 +70,14 @@ class ProjectsFinder < UnionFinder
     (params[:personal].present? && current_user) ? items.personal(current_user) : items
   end
 
+  def by_starred(items)
+    (params[:starred].present? && current_user) ? items.starred_by(current_user) : items
+  end
+
+  def by_trending(items)
+    params[:trending].present? ? items.trending : items
+  end
+
   def by_visibilty_level(items)
     params[:visibility_level].present? ? items.where(visibility_level: params[:visibility_level]) : items
   end
diff --git a/app/finders/snippets_finder.rb b/app/finders/snippets_finder.rb
index da6e6e87a6f..c04f61de79c 100644
--- a/app/finders/snippets_finder.rb
+++ b/app/finders/snippets_finder.rb
@@ -1,66 +1,74 @@
-class SnippetsFinder
-  def execute(current_user, params = {})
-    filter = params[:filter]
-    user = params.fetch(:user, current_user)
-
-    case filter
-    when :all then
-      snippets(current_user).fresh
-    when :public then
-      Snippet.are_public.fresh
-    when :by_user then
-      by_user(current_user, user, params[:scope])
-    when :by_project
-      by_project(current_user, params[:project], params[:scope])
-    end
+class SnippetsFinder < UnionFinder
+  attr_accessor :current_user, :params
+
+  def initialize(current_user, params = {})
+    @current_user = current_user
+    @params = params
+  end
+
+  def execute
+    items = init_collection
+    items = by_project(items)
+    items = by_author(items)
+    items = by_visibility(items)
+
+    items.fresh
   end
 
   private
 
-  def snippets(current_user)
-    if current_user
-      Snippet.public_and_internal
-    else
-      # Not authenticated
-      #
-      # Return only:
-      #   public snippets
-      Snippet.are_public
-    end
+  def init_collection
+    items = Snippet.all
+
+    accessible(items)
   end
 
-  def by_user(current_user, user, scope)
-    snippets = user.snippets.fresh
+  def accessible(items)
+    segments = []
+    segments << items.public_to_user(current_user)
+    segments << authorized_to_user(items)  if current_user
 
-    if current_user
-      include_private = user == current_user
-      by_scope(snippets, scope, include_private)
-    else
-      snippets.are_public
-    end
+    find_union(segments, Snippet)
   end
 
-  def by_project(current_user, project, scope)
-    snippets = project.snippets.fresh
+  def authorized_to_user(items)
+    items.where(
+      'author_id = :author_id
+       OR project_id IN (:project_ids)',
+       author_id: current_user.id,
+       project_ids: current_user.authorized_projects.select(:id))
+  end
 
-    if current_user
-      include_private = project.team.member?(current_user) || current_user.admin?
-      by_scope(snippets, scope, include_private)
-    else
-      snippets.are_public
-    end
+  def by_visibility(items)
+    visibility = params[:visibility] || visibility_from_scope
+
+    return items unless visibility
+
+    items.where(visibility_level: visibility)
+  end
+
+  def by_author(items)
+    return items unless params[:author]
+
+    items.where(author_id: params[:author].id)
+  end
+
+  def by_project(items)
+    return items unless params[:project]
+
+    items.where(project_id: params[:project].id)
   end
 
-  def by_scope(snippets, scope = nil, include_private = false)
-    case scope.to_s
+  def visibility_from_scope
+    case params[:scope].to_s
     when 'are_private'
-      include_private ? snippets.are_private : Snippet.none
+      Snippet::PRIVATE
     when 'are_internal'
-      snippets.are_internal
+      Snippet::INTERNAL
     when 'are_public'
-      snippets.are_public
+      Snippet::PUBLIC
     else
-      include_private ? snippets : snippets.public_and_internal
+      nil
     end
   end
 end
diff --git a/app/finders/users_finder.rb b/app/finders/users_finder.rb
new file mode 100644
index 00000000000..dbd50d1db7c
--- /dev/null
+++ b/app/finders/users_finder.rb
@@ -0,0 +1,74 @@
+# UsersFinder
+#
+# Used to filter users by set of params
+#
+# Arguments:
+#   current_user - which user use
+#   params:
+#     username: string
+#     extern_uid: string
+#     provider: string
+#     search: string
+#     active: boolean
+#     blocked: boolean
+#     external: boolean
+#
+class UsersFinder
+  attr_accessor :current_user, :params
+
+  def initialize(current_user, params = {})
+    @current_user = current_user
+    @params = params
+  end
+
+  def execute
+    users = User.all
+    users = by_username(users)
+    users = by_search(users)
+    users = by_blocked(users)
+    users = by_active(users)
+    users = by_external_identity(users)
+    users = by_external(users)
+
+    users
+  end
+
+  private
+
+  def by_username(users)
+    return users unless params[:username]
+
+    users.where(username: params[:username])
+  end
+
+  def by_search(users)
+    return users unless params[:search].present?
+
+    users.search(params[:search])
+  end
+
+  def by_blocked(users)
+    return users unless params[:blocked]
+
+    users.blocked
+  end
+
+  def by_active(users)
+    return users unless params[:active]
+
+    users.active
+  end
+
+  def by_external_identity(users)
+    return users unless current_user.admin? && params[:extern_uid] && params[:provider]
+
+    users.joins(:identities).merge(Identity.with_extern_uid(params[:provider], params[:extern_uid]))
+  end
+
+  def by_external(users)
+    return users = users.where.not(external: true) unless current_user.admin?
+    return users unless params[:external]
+
+    users.external
+  end
+end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index fff57472a4f..36d9090b3ae 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -77,7 +77,7 @@ module ApplicationHelper
       end
 
     if user
-      user.avatar_url(size) || default_avatar
+      user.avatar_url(size: size) || default_avatar
     else
       gravatar_icon(user_or_email, size, scale)
     end
@@ -180,16 +180,16 @@ module ApplicationHelper
     element
   end
 
-  def edited_time_ago_with_tooltip(object, placement: 'top', html_class: 'time_ago', include_author: false)
-    return if object.updated_at == object.created_at
+  def edited_time_ago_with_tooltip(object, placement: 'top', html_class: 'time_ago', exclude_author: false)
+    return if object.last_edited_at == object.created_at || object.last_edited_at.blank?
 
-    content_tag :small, class: "edited-text" do
-      output = content_tag(:span, "Edited ")
-      output << time_ago_with_tooltip(object.updated_at, placement: placement, html_class: html_class)
+    content_tag :small, class: 'edited-text' do
+      output = content_tag(:span, 'Edited ')
+      output << time_ago_with_tooltip(object.last_edited_at, placement: placement, html_class: html_class)
 
-      if include_author && object.updated_by && object.updated_by != object.author
-        output << content_tag(:span, " by ")
-        output << link_to_member(object.project, object.updated_by, avatar: false, author_class: nil)
+      if !exclude_author && object.last_edited_by
+        output << content_tag(:span, ' by ')
+        output << link_to_member(object.project, object.last_edited_by, avatar: false, author_class: nil)
       end
 
       output
@@ -276,6 +276,24 @@ module ApplicationHelper
   end
 
   def show_user_callout?
-    cookies[:user_callout_dismissed] == 'true'
+    cookies[:user_callout_dismissed].nil?
+  end
+
+  def linkedin_url(user)
+    name = user.linkedin
+    if name =~ %r{\Ahttps?:\/\/(www\.)?linkedin\.com\/in\/}
+      name
+    else
+      "https://www.linkedin.com/in/#{name}"
+    end
+  end
+
+  def twitter_url(user)
+    name = user.twitter
+    if name =~ %r{\Ahttps?:\/\/(www\.)?twitter\.com\/}
+      name
+    else
+      "https://www.twitter.com/#{name}"
+    end
   end
 end
diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb
index b7e0ff8ecd0..bbe7f3c8fb4 100644
--- a/app/helpers/avatars_helper.rb
+++ b/app/helpers/avatars_helper.rb
@@ -8,18 +8,28 @@ module AvatarsHelper
     }))
   end
 
-  def user_avatar(options = {})
+  def user_avatar_without_link(options = {})
     avatar_size = options[:size] || 16
     user_name = options[:user].try(:name) || options[:user_name]
     css_class = options[:css_class] || ''
-    
-    avatar = image_tag(
-      avatar_icon(options[:user] || options[:user_email], avatar_size),
+    avatar_url = options[:url] || avatar_icon(options[:user] || options[:user_email], avatar_size)
+    data_attributes = { container: 'body' }
+
+    if options[:lazy]
+      data_attributes[:src] = avatar_url
+    end
+
+    image_tag(
+      options[:lazy] ? '' : avatar_url,
       class: "avatar has-tooltip s#{avatar_size} #{css_class}",
       alt: "#{user_name}'s avatar",
       title: user_name,
-      data: { container: 'body' }
+      data: data_attributes
     )
+  end
+
+  def user_avatar(options = {})
+    avatar = user_avatar_without_link(options)
 
     if options[:user]
       link_to(avatar, user_path(options[:user]))
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index af430270ae4..3efa7c36057 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -18,7 +18,7 @@ module BlobHelper
     blob = options.delete(:blob)
     blob ||= project.repository.blob_at(ref, path) rescue nil
 
-    return unless blob
+    return unless blob && blob.readable_text?
 
     common_classes = "btn js-edit-blob #{options[:extra_class]}"
 
@@ -120,7 +120,7 @@ module BlobHelper
 
   def blob_raw_url
     if @build && @entry
-      raw_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: @entry.path)
+      raw_namespace_project_job_artifacts_path(@project.namespace, @project, @build, path: @entry.path)
     elsif @snippet
       if @snippet.project_id
         raw_namespace_project_snippet_path(@project.namespace, @project, @snippet)
@@ -226,7 +226,7 @@ module BlobHelper
 
   def open_raw_blob_button(blob)
     return if blob.empty?
-    
+
     if blob.raw_binary? || blob.stored_externally?
       icon = icon('download')
       title = 'Download'
@@ -240,14 +240,10 @@ module BlobHelper
 
   def blob_render_error_reason(viewer)
     case viewer.render_error
+    when :collapsed
+      "it is larger than #{number_to_human_size(viewer.collapse_limit)}"
     when :too_large
-      max_size =
-        if viewer.absolutely_too_large?
-          viewer.absolute_max_size
-        elsif viewer.too_large?
-          viewer.max_size
-        end
-      "it is larger than #{number_to_human_size(max_size)}"
+      "it is larger than #{number_to_human_size(viewer.size_limit)}"
     when :server_side_but_stored_externally
       case viewer.blob.external_storage
       when :lfs
@@ -264,8 +260,8 @@ module BlobHelper
     error = viewer.render_error
     options = []
 
-    if error == :too_large && viewer.can_override_max_size?
-      options << link_to('load it anyway', url_for(params.merge(viewer: viewer.type, override_max_size: true, format: nil)))
+    if error == :collapsed
+      options << link_to('load it anyway', url_for(params.merge(viewer: viewer.type, expanded: true, format: nil)))
     end
 
     # If the error is `:server_side_but_stored_externally`, the simple viewer will show the same error,
@@ -278,4 +274,19 @@ module BlobHelper
 
     options
   end
+
+  def contribution_options(project)
+    options = []
+
+    if can?(current_user, :create_issue, project)
+      options << link_to("submit an issue", new_namespace_project_issue_path(project.namespace, project))
+    end
+
+    merge_project = can?(current_user, :create_merge_request, project) ? project : (current_user && current_user.fork_of(project))
+    if merge_project
+      options << link_to("create a merge request", new_namespace_project_merge_request_path(project.namespace, project))
+    end
+
+    options
+  end
 end
diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb
index f43827da446..e2df52e3833 100644
--- a/app/helpers/boards_helper.rb
+++ b/app/helpers/boards_helper.rb
@@ -9,6 +9,7 @@ module BoardsHelper
       issue_link_base: namespace_project_issues_path(@project.namespace, @project),
       root_path: root_path,
       bulk_update_path: bulk_update_namespace_project_issues_path(@project.namespace, @project),
+      default_avatar: image_path(default_avatar)
     }
   end
 end
diff --git a/app/helpers/branches_helper.rb b/app/helpers/branches_helper.rb
index b7a28b1b4a7..59519c1335b 100644
--- a/app/helpers/branches_helper.rb
+++ b/app/helpers/branches_helper.rb
@@ -1,14 +1,4 @@
 module BranchesHelper
-  def can_remove_branch?(project, branch_name)
-    if ProtectedBranch.protected?(project, branch_name)
-      false
-    elsif branch_name == project.repository.root_ref
-      false
-    else
-      can?(current_user, :push_code, project)
-    end
-  end
-
   def filter_branches_path(options = {})
     exist_opts = {
       search: params[:search],
diff --git a/app/helpers/builds_helper.rb b/app/helpers/builds_helper.rb
index 2fcb7a59fc3..f0a0d245dc0 100644
--- a/app/helpers/builds_helper.rb
+++ b/app/helpers/builds_helper.rb
@@ -1,4 +1,16 @@
 module BuildsHelper
+  def build_summary(build, skip: false)
+    if build.has_trace?
+      if skip
+        link_to "View job trace", pipeline_job_url(build.pipeline, build)
+      else
+        build.trace.html(last_lines: 10).html_safe
+      end
+    else
+      "No job trace"
+    end
+  end
+
   def sidebar_build_class(build, current_build)
     build_class = ''
     build_class += ' active' if build.id === current_build.id
@@ -8,8 +20,8 @@ module BuildsHelper
 
   def javascript_build_options
     {
-      page_url: namespace_project_build_url(@project.namespace, @project, @build),
-      build_url: namespace_project_build_url(@project.namespace, @project, @build, :json),
+      page_url: namespace_project_job_url(@project.namespace, @project, @build),
+      build_url: namespace_project_job_url(@project.namespace, @project, @build, :json),
       build_status: @build.status,
       build_stage: @build.stage,
       log_state: ''
@@ -19,7 +31,7 @@ module BuildsHelper
   def build_failed_issue_options
     {
       title: "Build Failed ##{@build.id}",
-      description: namespace_project_build_url(@project.namespace, @project, @build)
+      description: namespace_project_job_url(@project.namespace, @project, @build)
     }
   end
 end
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index c85e96cf78d..0081bbd92b3 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -42,7 +42,10 @@ module ButtonHelper
       class: "btn #{css_class}",
       data: data,
       type: :button,
-      title: title
+      title: title,
+      aria: {
+        label: title
+      }
   end
 
   def http_clone_button(project, placement = 'right', append_link: true)
@@ -53,7 +56,7 @@ module ButtonHelper
 
     content_tag (append_link ? :a : :span), protocol,
       class: klass,
-      href: (project.http_url_to_repo(current_user) if append_link),
+      href: (project.http_url_to_repo if append_link),
       data: {
         html: true,
         placement: placement,
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index cef624430da..5b5cdebe919 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -15,16 +15,6 @@ module CommitsHelper
     commit_person_link(commit, options.merge(source: :committer))
   end
 
-  def image_diff_class(diff)
-    if diff.deleted_file
-      "deleted"
-    elsif diff.new_file
-      "added"
-    else
-      nil
-    end
-  end
-
   def commit_to_html(commit, ref, project)
     render 'projects/commits/commit',
       commit: commit,
@@ -74,12 +64,8 @@ module CommitsHelper
   # Returns the sorted alphabetically links to branches, separated by a comma
   def commit_branches_links(project, branches)
     branches.sort.map do |branch|
-      link_to(
-        namespace_project_tree_path(project.namespace, project, branch)
-      ) do
-        content_tag :span, class: 'label label-gray' do
-          icon('code-fork') + ' ' + branch
-        end
+      link_to(project_ref_path(project, branch), class: "label label-gray ref-name") do
+        icon('code-fork') + " #{branch}"
       end
     end.join(" ").html_safe
   end
@@ -88,29 +74,22 @@ module CommitsHelper
   def commit_tags_links(project, tags)
     sorted = VersionSorter.rsort(tags)
     sorted.map do |tag|
-      link_to(
-        namespace_project_commits_path(project.namespace, project,
-                                       project.repository.find_tag(tag).name)
-      ) do
-        content_tag :span, class: 'label label-gray' do
-          icon('tag') + ' ' + tag
-        end
+      link_to(project_ref_path(project, tag), class: "label label-gray ref-name") do
+        icon('tag') + " #{tag}"
       end
     end.join(" ").html_safe
   end
 
   def link_to_browse_code(project, commit)
+    return unless current_controller?(:commits)
+
     if @path.blank?
       return link_to(
         "Browse Files",
         namespace_project_tree_path(project.namespace, project, commit),
         class: "btn btn-default"
       )
-    end
-
-    return unless current_controller?(:projects, :commits)
-
-    if @repo.blob_at(commit.id, @path)
+    elsif @repo.blob_at(commit.id, @path)
       return link_to(
         "Browse File",
         namespace_project_blob_path(project.namespace, project,
@@ -200,8 +179,8 @@ module CommitsHelper
                                   tree_join(commit_sha, diff_new_path)),
       class: 'btn view-file js-view-file'
     ) do
-      raw('View file @') + content_tag(:span, commit_sha[0..6],
-                                       class: 'commit-short-id')
+      raw('View file @ ') + content_tag(:span, Commit.truncate_sha(commit_sha),
+                                       class: 'commit-sha')
     end
   end
 
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index dc144906548..2ae3a616933 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -8,8 +8,8 @@ module DiffHelper
     [marked_old_line, marked_new_line]
   end
 
-  def expand_all_diffs?
-    params[:expand_all_diffs].present?
+  def diffs_expanded?
+    params[:expanded].present?
   end
 
   def diff_view
@@ -22,10 +22,10 @@ module DiffHelper
   end
 
   def diff_options
-    options = { ignore_whitespace_change: hide_whitespace?, no_collapse: expand_all_diffs? }
+    options = { ignore_whitespace_change: hide_whitespace?, expanded: diffs_expanded? }
 
     if action_name == 'diff_for_path'
-      options[:no_collapse] = true
+      options[:expanded] = true
       options[:paths] = params.values_at(:old_path, :new_path)
     end
 
@@ -63,15 +63,15 @@ module DiffHelper
 
   def parallel_diff_discussions(left, right, diff_file)
     return unless @grouped_diff_discussions
-    
+
     discussions_left = discussions_right = nil
 
-    if left && (left.unchanged? || left.removed?)
+    if left && (left.unchanged? || left.discussable?)
       line_code = diff_file.line_code(left)
       discussions_left = @grouped_diff_discussions[line_code]
     end
 
-    if right && right.added?
+    if right&.discussable?
       line_code = diff_file.line_code(right)
       discussions_right = @grouped_diff_discussions[line_code]
     end
@@ -98,18 +98,18 @@ module DiffHelper
     [
       content_tag(:span, link_to(truncate(blob.name, length: 40), tree)),
       '@',
-      content_tag(:span, commit_id, class: 'monospace'),
+      content_tag(:span, commit_id, class: 'commit-sha')
     ].join(' ').html_safe
   end
 
-  def commit_for_diff(diff_file)
-    return diff_file.content_commit if diff_file.content_commit
+  def diff_file_blob_raw_path(diff_file)
+    namespace_project_raw_path(@project.namespace, @project, tree_join(diff_file.content_sha, diff_file.file_path))
+  end
 
-    if diff_file.deleted_file
-      @base_commit || @commit.parent || @commit
-    else
-      @commit
-    end
+  def diff_file_old_blob_raw_path(diff_file)
+    sha = diff_file.old_content_sha
+    return unless sha
+    namespace_project_raw_path(@project.namespace, @project, tree_join(diff_file.old_content_sha, diff_file.old_path))
   end
 
   def diff_file_html_data(project, diff_file_path, diff_commit_id)
@@ -120,8 +120,8 @@ module DiffHelper
     }
   end
 
-  def editable_diff?(diff)
-    !diff.deleted_file && @merge_request && @merge_request.source_project
+  def editable_diff?(diff_file)
+    !diff_file.deleted_file? && @merge_request && @merge_request.source_project
   end
 
   private
diff --git a/app/helpers/emails_helper.rb b/app/helpers/emails_helper.rb
index f927cfc998f..3b24f183785 100644
--- a/app/helpers/emails_helper.rb
+++ b/app/helpers/emails_helper.rb
@@ -12,7 +12,7 @@ module EmailsHelper
         "action" => {
           "@type" => "ViewAction",
           "name" => name,
-          "url" => url,
+          "url" => url
           }
         }
 
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index 960111ca045..751d61955b7 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -41,7 +41,7 @@ module EventsHelper
     link_opts = {
       class: "event-filter-link",
       id:    "#{key}_event_filter",
-      title: "Filter by #{tooltip.downcase}",
+      title: "Filter by #{tooltip.downcase}"
     }
 
     content_tag :li, class: active do
@@ -164,9 +164,14 @@ module EventsHelper
 
   def event_note_title_html(event)
     if event.note_target
-      link_to(event_note_target_path(event), title: event.target_title, class: 'has-tooltip') do
-        "#{event.note_target_type} #{event.note_target_reference}"
-      end
+      text = raw("#{event.note_target_type} ") +
+        if event.commit_note?
+          content_tag(:span, event.note_target_reference, class: 'commit-sha')
+        else
+          event.note_target_reference
+        end
+
+      link_to(text, event_note_target_path(event), title: event.target_title, class: 'has-tooltip')
     else
       content_tag(:strong, '(deleted)')
     end
diff --git a/app/helpers/explore_helper.rb b/app/helpers/explore_helper.rb
index 7bd212a3ef9..b981a1e8242 100644
--- a/app/helpers/explore_helper.rb
+++ b/app/helpers/explore_helper.rb
@@ -10,7 +10,7 @@ module ExploreHelper
       personal: params[:personal],
       archived: params[:archived],
       shared: params[:shared],
-      namespace_id: params[:namespace_id],
+      namespace_id: params[:namespace_id]
     }
 
     options = exist_opts.merge(options).delete_if { |key, value| value.blank? }
diff --git a/app/helpers/form_helper.rb b/app/helpers/form_helper.rb
index 1182939f656..53962b84618 100644
--- a/app/helpers/form_helper.rb
+++ b/app/helpers/form_helper.rb
@@ -15,4 +15,36 @@ module FormHelper
         end
     end
   end
+
+  def issue_dropdown_options(issuable, has_multiple_assignees = true)
+    options = {
+      toggle_class: 'js-user-search js-assignee-search js-multiselect js-save-user-data',
+      title: 'Select assignee',
+      filter: true,
+      dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee',
+      placeholder: 'Search users',
+      data: {
+        first_user: current_user&.username,
+        null_user: true,
+        current_user: true,
+        project_id: issuable.project.try(:id),
+        field_name: "#{issuable.class.model_name.param_key}[assignee_ids][]",
+        default_label: 'Assignee',
+        'max-select': 1,
+        'dropdown-header': 'Assignee',
+        multi_select: true,
+        'input-meta': 'name',
+        'always-show-selectbox': true,
+        current_user_info: current_user.to_json(only: [:id, :name])
+      }
+    }
+
+    if has_multiple_assignees
+      options[:title] = 'Select assignee(s)'
+      options[:data][:'dropdown-header'] = 'Assignee(s)'
+      options[:data].delete(:'max-select')
+    end
+
+    options
+  end
 end
diff --git a/app/helpers/gitlab_routing_helper.rb b/app/helpers/gitlab_routing_helper.rb
index 1336c676134..40864bed0ff 100644
--- a/app/helpers/gitlab_routing_helper.rb
+++ b/app/helpers/gitlab_routing_helper.rb
@@ -50,8 +50,12 @@ module GitlabRoutingHelper
     namespace_project_cycle_analytics_path(project.namespace, project, *args)
   end
 
-  def project_builds_path(project, *args)
-    namespace_project_builds_path(project.namespace, project, *args)
+  def project_jobs_path(project, *args)
+    namespace_project_jobs_path(project.namespace, project, *args)
+  end
+
+  def project_ref_path(project, ref_name, *args)
+    namespace_project_commits_path(project.namespace, project, ref_name, *args)
   end
 
   def project_container_registry_path(project, *args)
@@ -106,8 +110,8 @@ module GitlabRoutingHelper
     namespace_project_pipeline_url(pipeline.project.namespace, pipeline.project, pipeline.id, *args)
   end
 
-  def pipeline_build_url(pipeline, build, *args)
-    namespace_project_build_url(pipeline.project.namespace, pipeline.project, build.id, *args)
+  def pipeline_job_url(pipeline, build, *args)
+    namespace_project_job_url(pipeline.project.namespace, pipeline.project, build.id, *args)
   end
 
   def commits_url(entity, *args)
@@ -122,6 +126,14 @@ module GitlabRoutingHelper
     namespace_project_snippet_url(entity.project.namespace, entity.project, entity, *args)
   end
 
+  def preview_markdown_path(project, *args)
+    if @snippet.is_a?(PersonalSnippet)
+      preview_markdown_snippet_path(@snippet)
+    else
+      preview_markdown_namespace_project_path(project.namespace, project, *args)
+    end
+  end
+
   def toggle_subscription_path(entity, *args)
     if entity.is_a?(Issue)
       toggle_subscription_namespace_project_issue_path(entity.project.namespace, entity.project, entity)
@@ -203,16 +215,36 @@ module GitlabRoutingHelper
 
     case action
     when 'download'
-      download_namespace_project_build_artifacts_path(*args)
+      download_namespace_project_job_artifacts_path(*args)
     when 'browse'
-      browse_namespace_project_build_artifacts_path(*args)
+      browse_namespace_project_job_artifacts_path(*args)
     when 'file'
-      file_namespace_project_build_artifacts_path(*args)
+      file_namespace_project_job_artifacts_path(*args)
     when 'raw'
-      raw_namespace_project_build_artifacts_path(*args)
+      raw_namespace_project_job_artifacts_path(*args)
     end
   end
 
+  # Pipeline Schedules
+  def pipeline_schedules_path(project, *args)
+    namespace_project_pipeline_schedules_path(project.namespace, project, *args)
+  end
+
+  def pipeline_schedule_path(schedule, *args)
+    project = schedule.project
+    namespace_project_pipeline_schedule_path(project.namespace, project, schedule, *args)
+  end
+
+  def edit_pipeline_schedule_path(schedule)
+    project = schedule.project
+    edit_namespace_project_pipeline_schedule_path(project.namespace, project, schedule)
+  end
+
+  def take_ownership_pipeline_schedule_path(schedule, *args)
+    project = schedule.project
+    take_ownership_namespace_project_pipeline_schedule_path(project.namespace, project, schedule, *args)
+  end
+
   # Settings
   def project_settings_integrations_path(project, *args)
     namespace_project_settings_integrations_path(project.namespace, project, *args)
diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb
index 55fa81e95ef..f29faeca22d 100644
--- a/app/helpers/icons_helper.rb
+++ b/app/helpers/icons_helper.rb
@@ -7,9 +7,10 @@ module IconsHelper
   # font-awesome-rails gem, but should we ever use a different icon pack in the
   # future we won't have to change hundreds of method calls.
   def icon(names, options = {})
-    if (options.keys & %w[aria-hidden aria-label]).empty?
-      # Add `aria-hidden` if there are no aria's set
+    if (options.keys & %w[aria-hidden aria-label data-hidden]).empty?
+      # Add 'aria-hidden' and 'data-hidden' if they are not set in options.
       options['aria-hidden'] = true
+      options['data-hidden'] = true
     end
 
     options.include?(:base) ? fa_stacked_icon(names, options) : fa_icon(names, options)
@@ -19,6 +20,8 @@ module IconsHelper
     case names
     when "standard"
       names = "key"
+    when "two-factor"
+      names = "key"
     end
 
     options.include?(:base) ? fa_stacked_icon(names, options) : fa_icon(names, options)
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index 0b13dbf5f8d..c380a10c82d 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -37,7 +37,10 @@ module IssuablesHelper
     when Issue
       IssueSerializer.new.represent(issuable).to_json
     when MergeRequest
-      MergeRequestSerializer.new.represent(issuable).to_json
+      MergeRequestSerializer
+        .new(current_user: current_user, project: issuable.project)
+        .represent(issuable)
+        .to_json
     end
   end
 
@@ -63,6 +66,17 @@ module IssuablesHelper
     end
   end
 
+  def users_dropdown_label(selected_users)
+    case selected_users.length
+    when 0
+      "Unassigned"
+    when 1
+      selected_users[0].name
+    else
+      "#{selected_users[0].name} + #{selected_users.length - 1} more"
+    end
+  end
+
   def user_dropdown_label(user_id, default_label)
     return default_label if user_id.nil?
     return "Unassigned" if user_id == "0"
@@ -123,11 +137,9 @@ module IssuablesHelper
       author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "hidden-sm hidden-md hidden-lg")
     end
 
-    if issuable.tasks?
-      output << "&ensp;".html_safe
-      output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs hidden-sm")
-      output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-md hidden-lg")
-    end
+    output << "&ensp;".html_safe
+    output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs hidden-sm")
+    output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-md hidden-lg")
 
     output
   end
@@ -187,6 +199,27 @@ module IssuablesHelper
     issuable_filter_params.any? { |k| params.key?(k) }
   end
 
+  def issuable_initial_data(issuable)
+    {
+      endpoint: namespace_project_issue_path(@project.namespace, @project, issuable),
+      canUpdate: can?(current_user, :update_issue, issuable),
+      canDestroy: can?(current_user, :destroy_issue, issuable),
+      canMove: current_user ? issuable.can_move?(current_user) : false,
+      issuableRef: issuable.to_reference,
+      isConfidential: issuable.confidential,
+      markdownPreviewUrl: preview_markdown_path(@project),
+      markdownDocs: help_page_path('user/markdown'),
+      projectsAutocompleteUrl: autocomplete_projects_path(project_id: @project.id),
+      issuableTemplates: issuable_templates(issuable),
+      projectPath: ref_project.path,
+      projectNamespace: ref_project.namespace.full_path,
+      initialTitleHtml: markdown_field(issuable, :title),
+      initialTitleText: issuable.title,
+      initialDescriptionHtml: markdown_field(issuable, :description),
+      initialDescriptionText: issuable.description
+    }.to_json
+  end
+
   private
 
   def sidebar_gutter_collapsed?
diff --git a/app/helpers/labels_helper.rb b/app/helpers/labels_helper.rb
index e5b1e6e8bc7..4e6e6805920 100644
--- a/app/helpers/labels_helper.rb
+++ b/app/helpers/labels_helper.rb
@@ -69,13 +69,12 @@ module LabelsHelper
   end
 
   def render_colored_label(label, label_suffix = '', tooltip: true)
-    label_color = label.color || Label::DEFAULT_COLOR
-    text_color = text_color_for_bg(label_color)
+    text_color = text_color_for_bg(label.color)
 
     # Intentionally not using content_tag here so that this method can be called
     # by LabelReferenceFilter
     span = %(<span class="label color-label #{"has-tooltip" if tooltip}" ) +
-      %(style="background-color: #{label_color}; color: #{text_color}" ) +
+      %(style="background-color: #{label.color}; color: #{text_color}" ) +
       %(title="#{escape_once(label.description)}" data-container="body">) +
       %(#{escape_once(label.name)}#{label_suffix}</span>)
 
diff --git a/app/helpers/markup_helper.rb b/app/helpers/markup_helper.rb
index b241a14740b..941cfce8370 100644
--- a/app/helpers/markup_helper.rb
+++ b/app/helpers/markup_helper.rb
@@ -1,6 +1,9 @@
 require 'nokogiri'
 
 module MarkupHelper
+  include ActionView::Helpers::TagHelper
+  include ActionView::Context
+
   def plain?(filename)
     Gitlab::MarkupHelper.plain?(filename)
   end
@@ -32,7 +35,7 @@ module MarkupHelper
     context = {
       project: @project,
       current_user: (current_user if defined?(current_user)),
-      pipeline: :single_line,
+      pipeline: :single_line
     }
     gfm_body = Banzai.render(body, context)
 
@@ -116,13 +119,13 @@ module MarkupHelper
     if gitlab_markdown?(file_name)
       markdown_unsafe(text, context)
     elsif asciidoc?(file_name)
-      asciidoc_unsafe(text)
+      asciidoc_unsafe(text, context)
     elsif plain?(file_name)
       content_tag :pre, class: 'plain-readme' do
         text
       end
     else
-      other_markup_unsafe(file_name, text)
+      other_markup_unsafe(file_name, text, context)
     end
   rescue RuntimeError
     simple_format(text)
@@ -217,12 +220,12 @@ module MarkupHelper
     Banzai.render(text, context)
   end
 
-  def asciidoc_unsafe(text)
-    Gitlab::Asciidoc.render(text)
+  def asciidoc_unsafe(text, context = {})
+    Gitlab::Asciidoc.render(text, context)
   end
 
-  def other_markup_unsafe(file_name, text)
-    Gitlab::OtherMarkup.render(file_name, text)
+  def other_markup_unsafe(file_name, text, context = {})
+    Gitlab::OtherMarkup.render(file_name, text, context)
   end
 
   def prepare_for_rendering(html, context = {})
diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb
index 2614cdfe90e..39d30631646 100644
--- a/app/helpers/merge_requests_helper.rb
+++ b/app/helpers/merge_requests_helper.rb
@@ -19,14 +19,6 @@ module MergeRequestsHelper
     }
   end
 
-  def mr_widget_refresh_url(mr)
-    if mr && mr.target_project
-      merge_widget_refresh_namespace_project_merge_request_url(mr.target_project.namespace, mr.target_project, mr)
-    else
-      ''
-    end
-  end
-
   def mr_css_classes(mr)
     classes = "merge-request"
     classes << " closed" if mr.closed?
@@ -55,23 +47,6 @@ module MergeRequestsHelper
     end
   end
 
-  def issues_sentence(issues)
-    # Issuable sorter will sort local issues, then issues from the same
-    # namespace, then all other issues.
-    issues = Gitlab::IssuableSorter.sort(@project, issues).map do |issue|
-      issue.to_reference(@project)
-    end
-    issues.to_sentence
-  end
-
-  def mr_closes_issues
-    @mr_closes_issues ||= @merge_request.closes_issues(current_user)
-  end
-
-  def mr_issues_mentioned_but_not_closing
-    @mr_issues_mentioned_but_not_closing ||= @merge_request.issues_mentioned_but_not_closing(current_user)
-  end
-
   def mr_change_branches_path(merge_request)
     new_namespace_project_merge_request_path(
       @project.namespace, @project,
@@ -79,41 +54,12 @@ module MergeRequestsHelper
         source_project_id: merge_request.source_project_id,
         target_project_id: merge_request.target_project_id,
         source_branch: merge_request.source_branch,
-        target_branch: merge_request.target_branch,
+        target_branch: merge_request.target_branch
       },
       change_branches: true
     )
   end
 
-  def mr_assign_issues_link
-    issues = MergeRequests::AssignIssuesService.new(@project,
-                                                    current_user,
-                                                    merge_request: @merge_request,
-                                                    closes_issues: mr_closes_issues
-                                                   ).assignable_issues
-    path = assign_related_issues_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
-    if issues.present?
-      pluralize_this_issue = issues.count > 1 ? "these issues" : "this issue"
-      link_to "Assign yourself to #{pluralize_this_issue}", path, method: :post
-    end
-  end
-
-  def source_branch_with_namespace(merge_request)
-    namespace = merge_request.source_project_namespace
-    branch = merge_request.source_branch
-
-    if merge_request.source_branch_exists?
-      namespace = link_to(namespace, project_path(merge_request.source_project))
-      branch = link_to(branch, namespace_project_commits_path(merge_request.source_project.namespace, merge_request.source_project, merge_request.source_branch))
-    end
-
-    if merge_request.for_fork?
-      namespace + ":" + branch
-    else
-      branch
-    end
-  end
-
   def format_mr_branch_names(merge_request)
     source_path = merge_request.source_project_path
     target_path = merge_request.target_project_path
diff --git a/app/helpers/notes_helper.rb b/app/helpers/notes_helper.rb
index 08180883eb9..3d4802290b5 100644
--- a/app/helpers/notes_helper.rb
+++ b/app/helpers/notes_helper.rb
@@ -19,7 +19,7 @@ module NotesHelper
       id: noteable.id,
       class: noteable.class.name,
       resources: noteable.class.table_name,
-      project_id: noteable.project.id,
+      project_id: noteable.project.id
     }.to_json
   end
 
@@ -34,7 +34,7 @@ module NotesHelper
 
     data = {
       line_code: line_code,
-      line_type: line_type,
+      line_type: line_type
     }
 
     if @use_legacy_diff_notes
@@ -50,7 +50,7 @@ module NotesHelper
   def link_to_reply_discussion(discussion, line_type = nil)
     return unless current_user
 
-    data = { discussion_id: discussion.id, line_type: line_type }
+    data = { discussion_id: discussion.reply_id, line_type: line_type }
 
     button_tag 'Reply...', class: 'btn btn-text-field js-discussion-reply-button',
                            data: data, title: 'Add a reply'
@@ -76,4 +76,47 @@ module NotesHelper
       namespace_project_commit_path(discussion.project.namespace, discussion.project, discussion.noteable, anchor: anchor)
     end
   end
+
+  def notes_url
+    if @snippet.is_a?(PersonalSnippet)
+      snippet_notes_path(@snippet)
+    else
+      namespace_project_noteable_notes_path(
+        namespace_id: @project.namespace,
+        project_id: @project,
+        target_id: @noteable.id,
+        target_type: @noteable.class.name.underscore
+      )
+    end
+  end
+
+  def note_url(note)
+    if note.noteable.is_a?(PersonalSnippet)
+      snippet_note_path(note.noteable, note)
+    else
+      namespace_project_note_path(@project.namespace, @project, note)
+    end
+  end
+
+  def form_resources
+    if @snippet.is_a?(PersonalSnippet)
+      [@note]
+    else
+      [@project.namespace.becomes(Namespace), @project, @note]
+    end
+  end
+
+  def new_form_url
+    return nil unless @snippet.is_a?(PersonalSnippet)
+
+    snippet_notes_path(@snippet)
+  end
+
+  def can_create_note?
+    if @snippet.is_a?(PersonalSnippet)
+      can?(current_user, :comment_personal_snippet, @snippet)
+    else
+      can?(current_user, :create_note, @project)
+    end
+  end
 end
diff --git a/app/helpers/pipeline_schedules_helper.rb b/app/helpers/pipeline_schedules_helper.rb
new file mode 100644
index 00000000000..fee1edc2a1b
--- /dev/null
+++ b/app/helpers/pipeline_schedules_helper.rb
@@ -0,0 +1,11 @@
+module PipelineSchedulesHelper
+  def timezone_data
+    ActiveSupport::TimeZone.all.map do |timezone| 
+      { 
+        name: timezone.name, 
+        offset: timezone.utc_offset, 
+        identifier: timezone.tzinfo.identifier 
+      }
+    end
+  end
+end
diff --git a/app/helpers/preferences_helper.rb b/app/helpers/preferences_helper.rb
index de959f13713..d36bb4ab074 100644
--- a/app/helpers/preferences_helper.rb
+++ b/app/helpers/preferences_helper.rb
@@ -49,7 +49,7 @@ module PreferencesHelper
 
     user_view = current_user.project_view
 
-    if @project.feature_available?(:repository, current_user)
+    if can?(current_user, :download_code, @project)
       user_view
     elsif user_view == "activity"
       "activity"
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 8c26348a975..7b0584c42a2 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -85,6 +85,12 @@ module ProjectsHelper
     @nav_tabs ||= get_project_nav_tabs(@project, current_user)
   end
 
+  def project_search_tabs?(tab)
+    abilities = Array(search_tab_ability_map[tab])
+
+    abilities.any? { |ability| can?(current_user, ability, @project) }
+  end
+
   def project_nav_tab?(name)
     project_nav_tabs.include? name
   end
@@ -110,15 +116,13 @@ module ProjectsHelper
   end
 
   def license_short_name(project)
-    return 'LICENSE' if project.repository.license_key.nil?
-
-    license = Licensee::License.new(project.repository.license_key)
-
-    license.nickname || license.name
+    license = project.repository.license
+    license&.nickname || license&.name || 'LICENSE'
   end
 
   def last_push_event
     return unless current_user
+    return current_user.recent_push unless @project
 
     project_ids = [@project.id]
     if fork = current_user.fork_of(@project)
@@ -160,7 +164,15 @@ module ProjectsHelper
   end
 
   def project_list_cache_key(project)
-    key = [project.namespace.cache_key, project.cache_key, controller.controller_name, controller.action_name, current_application_settings.cache_key, 'v2.4']
+    key = [
+      project.route.cache_key,
+      project.cache_key,
+      controller.controller_name,
+      controller.action_name,
+      current_application_settings.cache_key,
+      'v2.4'
+    ]
+
     key << pipeline_status_cache_key(project.pipeline_status) if project.pipeline_status.has_status?
 
     key
@@ -198,7 +210,17 @@ module ProjectsHelper
       nav_tabs << :container_registry
     end
 
-    tab_ability_map = {
+    tab_ability_map.each do |tab, ability|
+      if can?(current_user, ability, project)
+        nav_tabs << tab
+      end
+    end
+
+    nav_tabs.flatten
+  end
+
+  def tab_ability_map
+    {
       environments: :read_environment,
       milestones:   :read_milestone,
       pipelines:    :read_pipeline,
@@ -210,14 +232,15 @@ module ProjectsHelper
       team:         :read_project_member,
       wiki:         :read_wiki
     }
+  end
 
-    tab_ability_map.each do |tab, ability|
-      if can?(current_user, ability, project)
-        nav_tabs << tab
-      end
-    end
-
-    nav_tabs.flatten
+  def search_tab_ability_map
+    @search_tab_ability_map ||= tab_ability_map.merge(
+      blobs:          :download_code,
+      commits:        :download_code,
+      merge_requests: :read_merge_request,
+      notes:          [:read_merge_request, :download_code, :read_issue, :read_project_snippet]
+    )
   end
 
   def project_lfs_status(project)
@@ -253,7 +276,7 @@ module ProjectsHelper
     when 'ssh'
       project.ssh_url_to_repo
     else
-      project.http_url_to_repo(current_user)
+      project.http_url_to_repo
     end
   end
 
diff --git a/app/helpers/rss_helper.rb b/app/helpers/rss_helper.rb
index ea5d2932ef4..9ac4df88dc3 100644
--- a/app/helpers/rss_helper.rb
+++ b/app/helpers/rss_helper.rb
@@ -1,5 +1,5 @@
 module RssHelper
   def rss_url_options
-    { format: :atom, private_token: current_user.try(:private_token) }
+    { format: :atom, rss_token: current_user.try(:rss_token) }
   end
 end
diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb
index 8ff8db16514..9c46035057f 100644
--- a/app/helpers/search_helper.rb
+++ b/app/helpers/search_helper.rb
@@ -42,7 +42,7 @@ module SearchHelper
       { category: "Settings", label: "User settings",    url: profile_path },
       { category: "Settings", label: "SSH Keys",         url: profile_keys_path },
       { category: "Settings", label: "Dashboard",        url: root_path },
-      { category: "Settings", label: "Admin Section",    url: admin_root_path },
+      { category: "Settings", label: "Admin Section",    url: admin_root_path }
     ]
   end
 
@@ -57,7 +57,7 @@ module SearchHelper
       { category: "Help", label: "SSH Keys Help",      url: help_page_path("ssh/README") },
       { category: "Help", label: "System Hooks Help",  url: help_page_path("system_hooks/system_hooks") },
       { category: "Help", label: "Webhooks Help",      url: help_page_path("user/project/integrations/webhooks") },
-      { category: "Help", label: "Workflow Help",      url: help_page_path("workflow/README") },
+      { category: "Help", label: "Workflow Help",      url: help_page_path("workflow/README") }
     ]
   end
 
@@ -76,7 +76,7 @@ module SearchHelper
         { category: "Current Project", label: "Milestones",     url: namespace_project_milestones_path(@project.namespace, @project) },
         { category: "Current Project", label: "Snippets",       url: namespace_project_snippets_path(@project.namespace, @project) },
         { category: "Current Project", label: "Members",        url: namespace_project_settings_members_path(@project.namespace, @project) },
-        { category: "Current Project", label: "Wiki",           url: namespace_project_wikis_path(@project.namespace, @project) },
+        { category: "Current Project", label: "Wiki",           url: namespace_project_wikis_path(@project.namespace, @project) }
       ]
     else
       []
diff --git a/app/helpers/selects_helper.rb b/app/helpers/selects_helper.rb
index 8706876ae4a..1a4f1431bdc 100644
--- a/app/helpers/selects_helper.rb
+++ b/app/helpers/selects_helper.rb
@@ -45,6 +45,14 @@ module SelectsHelper
       end
     end
 
+    with_feature_enabled_data_attribute =
+      case opts.delete(:with_feature_enabled)
+      when 'issues'         then 'data-with-issues-enabled'
+      when 'merge_requests' then 'data-with-merge-requests-enabled'
+      end
+
+    opts[with_feature_enabled_data_attribute] = true
+
     hidden_field_tag(id, opts[:selected], opts)
   end
 
@@ -67,7 +75,7 @@ module SelectsHelper
       current_user: opts[:current_user] || false,
       "push-code-to-protected-branches" => opts[:push_code_to_protected_branches],
       author_id: opts[:author_id] || '',
-      skip_users: opts[:skip_users] ? opts[:skip_users].map(&:id) : nil,
+      skip_users: opts[:skip_users] ? opts[:skip_users].map(&:id) : nil
     }
   end
 end
diff --git a/app/helpers/sorting_helper.rb b/app/helpers/sorting_helper.rb
index 4882d9b71d2..b408ec0c6a4 100644
--- a/app/helpers/sorting_helper.rb
+++ b/app/helpers/sorting_helper.rb
@@ -58,7 +58,7 @@ module SortingHelper
       sort_value_due_date_soon => sort_title_due_date_soon,
       sort_value_due_date_later => sort_title_due_date_later,
       sort_value_start_date_soon => sort_title_start_date_soon,
-      sort_value_start_date_later => sort_title_start_date_later,
+      sort_value_start_date_later => sort_title_start_date_later
     }
   end
 
diff --git a/app/helpers/submodule_helper.rb b/app/helpers/submodule_helper.rb
index a762b320d56..c0763a8a9c4 100644
--- a/app/helpers/submodule_helper.rb
+++ b/app/helpers/submodule_helper.rb
@@ -1,28 +1,35 @@
 module SubmoduleHelper
   include Gitlab::ShellAdapter
 
+  VALID_SUBMODULE_PROTOCOLS = %w[http https git ssh].freeze
+
   # links to files listing for submodule if submodule is a project on this server
   def submodule_links(submodule_item, ref = nil, repository = @repository)
     url = repository.submodule_url_for(ref, submodule_item.path)
 
-    return url, nil unless url =~ /([^\/:]+)\/([^\/]+(?:\.git)?)\Z/
-
-    namespace = $1
-    project = $2
-    project.chomp!('.git')
-
-    if self_url?(url, namespace, project)
-      return namespace_project_path(namespace, project),
-        namespace_project_tree_path(namespace, project,
-                                    submodule_item.id)
-    elsif relative_self_url?(url)
-      relative_self_links(url, submodule_item.id)
-    elsif github_dot_com_url?(url)
-      standard_links('github.com', namespace, project, submodule_item.id)
-    elsif gitlab_dot_com_url?(url)
-      standard_links('gitlab.com', namespace, project, submodule_item.id)
+    if url == '.' || url == './'
+      url = File.join(Gitlab.config.gitlab.url, @project.full_path)
+    end
+
+    if url =~ /([^\/:]+)\/([^\/]+(?:\.git)?)\Z/
+      namespace, project = $1, $2
+      project.rstrip!
+      project.sub!(/\.git\z/, '')
+
+      if self_url?(url, namespace, project)
+        [namespace_project_path(namespace, project),
+         namespace_project_tree_path(namespace, project, submodule_item.id)]
+      elsif relative_self_url?(url)
+        relative_self_links(url, submodule_item.id)
+      elsif github_dot_com_url?(url)
+        standard_links('github.com', namespace, project, submodule_item.id)
+      elsif gitlab_dot_com_url?(url)
+        standard_links('gitlab.com', namespace, project, submodule_item.id)
+      else
+        [sanitize_submodule_url(url), nil]
+      end
     else
-      return url, nil
+      [sanitize_submodule_url(url), nil]
     end
   end
 
@@ -73,4 +80,16 @@ module SubmoduleHelper
       namespace_project_tree_path(namespace, base, commit)
     ]
   end
+
+  def sanitize_submodule_url(url)
+    uri = URI.parse(url)
+
+    if uri.scheme.in?(VALID_SUBMODULE_PROTOCOLS)
+      uri.to_s
+    else
+      nil
+    end
+  rescue URI::InvalidURIError
+    nil
+  end
 end
diff --git a/app/helpers/system_note_helper.rb b/app/helpers/system_note_helper.rb
index 1ea60e39386..209bd56b78a 100644
--- a/app/helpers/system_note_helper.rb
+++ b/app/helpers/system_note_helper.rb
@@ -1,6 +1,7 @@
 module SystemNoteHelper
   ICON_NAMES_BY_ACTION = {
     'commit' => 'icon_commit',
+    'description' => 'icon_edit',
     'merge' => 'icon_merge',
     'merged' => 'icon_merged',
     'opened' => 'icon_status_open',
@@ -16,7 +17,8 @@ module SystemNoteHelper
     'visible' => 'icon_eye',
     'milestone' => 'icon_clock_o',
     'discussion' => 'icon_comment_o',
-    'moved' => 'icon_arrow_circle_o_right'
+    'moved' => 'icon_arrow_circle_o_right',
+    'outdated' => 'icon_edit'
   }.freeze
 
   def icon_for_system_note(note)
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index f19e2f9db9c..19286fadb19 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -24,10 +24,13 @@ module TodosHelper
   end
 
   def todo_target_link(todo)
-    target = todo.target_type.titleize.downcase
-    link_to "#{target} #{todo.target_reference}", todo_target_path(todo),
-      class: 'has-tooltip',
-      title: todo.target.title
+    text = raw("#{todo.target_type.titleize.downcase} ") +
+      if todo.for_commit?
+        content_tag(:span, todo.target_reference, class: 'commit-sha')
+      else
+        todo.target_reference
+      end
+    link_to text, todo_target_path(todo), class: 'has-tooltip', title: todo.target.title
   end
 
   def todo_target_path(todo)
@@ -63,7 +66,7 @@ module TodosHelper
       project_id: params[:project_id],
       author_id:  params[:author_id],
       type:       params[:type],
-      action_id:  params[:action_id],
+      action_id:  params[:action_id]
     }
   end
 
diff --git a/app/helpers/tree_helper.rb b/app/helpers/tree_helper.rb
index a91e3da309c..e0d3e9b88f3 100644
--- a/app/helpers/tree_helper.rb
+++ b/app/helpers/tree_helper.rb
@@ -81,7 +81,7 @@ module TreeHelper
       part_path = ""
       parts = @path.split('/')
 
-      yield('..', nil) if parts.count > max_links
+      yield('..', File.join(*parts.first(parts.count - 2))) if parts.count > max_links
 
       parts.each do |part|
         part_path = File.join(part_path, part) unless part_path.empty?
diff --git a/app/mailers/base_mailer.rb b/app/mailers/base_mailer.rb
index d2980db218a..654468bc7fe 100644
--- a/app/mailers/base_mailer.rb
+++ b/app/mailers/base_mailer.rb
@@ -1,4 +1,6 @@
 class BaseMailer < ActionMailer::Base
+  around_action :render_with_default_locale
+
   helper ApplicationHelper
   helper MarkupHelper
 
@@ -14,6 +16,10 @@ class BaseMailer < ActionMailer::Base
 
   private
 
+  def render_with_default_locale(&block)
+    Gitlab::I18n.with_default_locale(&block)
+  end
+
   def default_sender_address
     address = Mail::Address.new(Gitlab.config.gitlab.email_from)
     address.display_name = Gitlab.config.gitlab.email_display_name
diff --git a/app/mailers/emails/issues.rb b/app/mailers/emails/issues.rb
index d64e48f774b..0f847841295 100644
--- a/app/mailers/emails/issues.rb
+++ b/app/mailers/emails/issues.rb
@@ -11,10 +11,12 @@ module Emails
       mail_answer_thread(@issue, issue_thread_options(updated_by_user_id, recipient_id))
     end
 
-    def reassigned_issue_email(recipient_id, issue_id, previous_assignee_id, updated_by_user_id)
+    def reassigned_issue_email(recipient_id, issue_id, previous_assignee_ids, updated_by_user_id)
       setup_issue_mail(issue_id, recipient_id)
 
-      @previous_assignee = User.find_by(id: previous_assignee_id) if previous_assignee_id
+      @previous_assignees = []
+      @previous_assignees = User.where(id: previous_assignee_ids) if previous_assignee_ids.any?
+
       mail_answer_thread(@issue, issue_thread_options(updated_by_user_id, recipient_id))
     end
 
diff --git a/app/models/application_setting.rb b/app/models/application_setting.rb
index cf042717c95..3d12f3c306b 100644
--- a/app/models/application_setting.rb
+++ b/app/models/application_setting.rb
@@ -13,13 +13,13 @@ class ApplicationSetting < ActiveRecord::Base
                             [\r\n]          # any number of newline characters
                           }x
 
-  serialize :restricted_visibility_levels
-  serialize :import_sources
-  serialize :disabled_oauth_sign_in_sources, Array
-  serialize :domain_whitelist, Array
-  serialize :domain_blacklist, Array
-  serialize :repository_storages
-  serialize :sidekiq_throttling_queues, Array
+  serialize :restricted_visibility_levels # rubocop:disable Cop/ActiverecordSerialize
+  serialize :import_sources # rubocop:disable Cop/ActiverecordSerialize
+  serialize :disabled_oauth_sign_in_sources, Array # rubocop:disable Cop/ActiverecordSerialize
+  serialize :domain_whitelist, Array # rubocop:disable Cop/ActiverecordSerialize
+  serialize :domain_blacklist, Array # rubocop:disable Cop/ActiverecordSerialize
+  serialize :repository_storages # rubocop:disable Cop/ActiverecordSerialize
+  serialize :sidekiq_throttling_queues, Array # rubocop:disable Cop/ActiverecordSerialize
 
   cache_markdown_field :sign_in_text
   cache_markdown_field :help_page_text
@@ -62,6 +62,10 @@ class ApplicationSetting < ActiveRecord::Base
             presence: true,
             if: :sentry_enabled
 
+  validates :clientside_sentry_dsn,
+            presence: true,
+            if: :clientside_sentry_enabled
+
   validates :akismet_api_key,
             presence: true,
             if: :akismet_enabled
@@ -242,7 +246,7 @@ class ApplicationSetting < ActiveRecord::Base
       two_factor_grace_period: 48,
       user_default_external: false,
       polling_interval_multiplier: 1,
-      usage_ping_enabled: true
+      usage_ping_enabled: Settings.gitlab['usage_ping_enabled']
     }
   end
 
@@ -345,6 +349,14 @@ class ApplicationSetting < ActiveRecord::Base
     sidekiq_throttling_enabled
   end
 
+  def usage_ping_can_be_configured?
+    Settings.gitlab.usage_ping_enabled
+  end
+
+  def usage_ping_enabled
+    usage_ping_can_be_configured? && super
+  end
+
   private
 
   def ensure_uuid!
diff --git a/app/models/audit_event.rb b/app/models/audit_event.rb
index 967ffd46db0..46d412fbd72 100644
--- a/app/models/audit_event.rb
+++ b/app/models/audit_event.rb
@@ -1,5 +1,5 @@
 class AuditEvent < ActiveRecord::Base
-  serialize :details, Hash
+  serialize :details, Hash # rubocop:disable Cop/ActiverecordSerialize
 
   belongs_to :user, foreign_key: :author_id
 
diff --git a/app/models/blob.rb b/app/models/blob.rb
index a4fae22a0c4..6a42a12891c 100644
--- a/app/models/blob.rb
+++ b/app/models/blob.rb
@@ -26,18 +26,38 @@ class Blob < SimpleDelegator
 
     BlobViewer::Image,
     BlobViewer::Sketch,
+    BlobViewer::Balsamiq,
 
     BlobViewer::Video,
 
     BlobViewer::PDF,
 
     BlobViewer::BinarySTL,
-    BlobViewer::TextSTL,
+    BlobViewer::TextSTL
+  ].sort_by { |v| v.binary? ? 0 : 1 }.freeze
+
+  AUXILIARY_VIEWERS = [
+    BlobViewer::GitlabCiYml,
+    BlobViewer::RouteMap,
+
+    BlobViewer::Readme,
+    BlobViewer::License,
+    BlobViewer::Contributing,
+    BlobViewer::Changelog,
+
+    BlobViewer::Cartfile,
+    BlobViewer::ComposerJson,
+    BlobViewer::Gemfile,
+    BlobViewer::Gemspec,
+    BlobViewer::GodepsJson,
+    BlobViewer::PackageJson,
+    BlobViewer::Podfile,
+    BlobViewer::Podspec,
+    BlobViewer::PodspecJson,
+    BlobViewer::RequirementsTxt,
+    BlobViewer::YarnLock
   ].freeze
 
-  BINARY_VIEWERS = RICH_VIEWERS.select(&:binary?).freeze
-  TEXT_VIEWERS = RICH_VIEWERS.select(&:text?).freeze
-
   attr_reader :project
 
   # Wrap a Gitlab::Git::Blob object, or return nil when given nil
@@ -82,10 +102,6 @@ class Blob < SimpleDelegator
     raw_size == 0
   end
 
-  def too_large?
-    size && truncated?
-  end
-
   def external_storage_error?
     if external_storage == :lfs
       !project&.lfs_enabled?
@@ -140,7 +156,7 @@ class Blob < SimpleDelegator
   end
 
   def readable_text?
-    text? && !stored_externally? && !too_large?
+    text? && !stored_externally? && !truncated?
   end
 
   def simple_viewer
@@ -153,6 +169,12 @@ class Blob < SimpleDelegator
     @rich_viewer = rich_viewer_class&.new(self)
   end
 
+  def auxiliary_viewer
+    return @auxiliary_viewer if defined?(@auxiliary_viewer)
+
+    @auxiliary_viewer = auxiliary_viewer_class&.new(self)
+  end
+
   def rendered_as_text?(ignore_errors: true)
     simple_viewer.text? && (ignore_errors || simple_viewer.render_error.nil?)
   end
@@ -161,9 +183,9 @@ class Blob < SimpleDelegator
     rendered_as_text? && rich_viewer
   end
 
-  def override_max_size!
-    simple_viewer&.override_max_size = true
-    rich_viewer&.override_max_size = true
+  def expand!
+    simple_viewer&.expanded = true
+    rich_viewer&.expanded = true
   end
 
   private
@@ -179,17 +201,18 @@ class Blob < SimpleDelegator
   end
 
   def rich_viewer_class
+    viewer_class_from(RICH_VIEWERS)
+  end
+
+  def auxiliary_viewer_class
+    viewer_class_from(AUXILIARY_VIEWERS)
+  end
+
+  def viewer_class_from(classes)
     return if empty? || external_storage_error?
 
-    classes =
-      if stored_externally?
-        BINARY_VIEWERS + TEXT_VIEWERS
-      elsif binary?
-        BINARY_VIEWERS
-      else # text
-        TEXT_VIEWERS
-      end
+    verify_binary = !stored_externally?
 
-    classes.find { |viewer_class| viewer_class.can_render?(self) }
+    classes.find { |viewer_class| viewer_class.can_render?(self, verify_binary: verify_binary) }
   end
 end
diff --git a/app/models/blob_viewer/auxiliary.rb b/app/models/blob_viewer/auxiliary.rb
new file mode 100644
index 00000000000..1bea225f17c
--- /dev/null
+++ b/app/models/blob_viewer/auxiliary.rb
@@ -0,0 +1,18 @@
+module BlobViewer
+  module Auxiliary
+    extend ActiveSupport::Concern
+
+    include Gitlab::Allowable
+
+    included do
+      self.loading_partial_name = 'loading_auxiliary'
+      self.type = :auxiliary
+      self.collapse_limit = 100.kilobytes
+      self.size_limit = 100.kilobytes
+    end
+
+    def visible_to?(current_user)
+      true
+    end
+  end
+end
diff --git a/app/models/blob_viewer/balsamiq.rb b/app/models/blob_viewer/balsamiq.rb
new file mode 100644
index 00000000000..f982521db99
--- /dev/null
+++ b/app/models/blob_viewer/balsamiq.rb
@@ -0,0 +1,12 @@
+module BlobViewer
+  class Balsamiq < Base
+    include Rich
+    include ClientSide
+
+    self.partial_name = 'balsamiq'
+    self.extensions = %w(bmpr)
+    self.binary = true
+    self.switcher_icon = 'file-image-o'
+    self.switcher_title = 'preview'
+  end
+end
diff --git a/app/models/blob_viewer/base.rb b/app/models/blob_viewer/base.rb
index a8b91d8d6bc..e6119d25fab 100644
--- a/app/models/blob_viewer/base.rb
+++ b/app/models/blob_viewer/base.rb
@@ -1,18 +1,28 @@
 module BlobViewer
   class Base
-    class_attribute :partial_name, :type, :extensions, :client_side, :binary, :switcher_icon, :switcher_title, :max_size, :absolute_max_size
+    PARTIAL_PATH_PREFIX = 'projects/blob/viewers'.freeze
 
-    delegate :partial_path, :rich?, :simple?, :client_side?, :server_side?, :text?, :binary?, to: :class
+    class_attribute :partial_name, :loading_partial_name, :type, :extensions, :file_types, :load_async, :binary, :switcher_icon, :switcher_title, :collapse_limit, :size_limit
+
+    self.loading_partial_name = 'loading'
+
+    delegate :partial_path, :loading_partial_path, :rich?, :simple?, :text?, :binary?, to: :class
 
     attr_reader :blob
-    attr_accessor :override_max_size
+    attr_accessor :expanded
+
+    delegate :project, to: :blob
 
     def initialize(blob)
       @blob = blob
     end
 
     def self.partial_path
-      "projects/blob/viewers/#{partial_name}"
+      File.join(PARTIAL_PATH_PREFIX, partial_name)
+    end
+
+    def self.loading_partial_path
+      File.join(PARTIAL_PATH_PREFIX, loading_partial_name)
     end
 
     def self.rich?
@@ -23,12 +33,12 @@ module BlobViewer
       type == :simple
     end
 
-    def self.client_side?
-      client_side
+    def self.auxiliary?
+      type == :auxiliary
     end
 
-    def self.server_side?
-      !client_side?
+    def self.load_async?
+      load_async
     end
 
     def self.binary?
@@ -39,20 +49,28 @@ module BlobViewer
       !binary?
     end
 
-    def self.can_render?(blob)
-      !extensions || extensions.include?(blob.extension)
+    def self.can_render?(blob, verify_binary: true)
+      return false if verify_binary && binary? != blob.binary?
+      return true if extensions&.include?(blob.extension)
+      return true if file_types&.include?(Gitlab::FileDetector.type_of(blob.path))
+
+      false
     end
 
-    def too_large?
-      blob.raw_size > max_size
+    def load_async?
+      self.class.load_async? && render_error.nil?
     end
 
-    def absolutely_too_large?
-      blob.raw_size > absolute_max_size
+    def collapsed?
+      return @collapsed if defined?(@collapsed)
+
+      @collapsed = !expanded && collapse_limit && blob.raw_size > collapse_limit
     end
 
-    def can_override_max_size?
-      too_large? && !absolutely_too_large?
+    def too_large?
+      return @too_large if defined?(@too_large)
+
+      @too_large = size_limit && blob.raw_size > size_limit
     end
 
     # This method is used on the server side to check whether we can attempt to
@@ -67,31 +85,15 @@ module BlobViewer
     # binary from `blob_raw_url` and does its own format validation and error
     # rendering, especially for potentially large binary formats.
     def render_error
-      return @render_error if defined?(@render_error)
-
-      @render_error =
-        if server_side_but_stored_externally?
-          # Files that are not stored in the repository, like LFS files and
-          # build artifacts, can only be rendered using a client-side viewer,
-          # since we do not want to read large amounts of data into memory on the
-          # server side. Client-side viewers use JS and can fetch the file from
-          # `blob_raw_url` using AJAX.
-          :server_side_but_stored_externally
-        elsif override_max_size ? absolutely_too_large? : too_large?
-          :too_large
-        end
-    end
-
-    def prepare!
-      if server_side? && blob.project
-        blob.load_all_data!(blob.project.repository)
+      if too_large?
+        :too_large
+      elsif collapsed?
+        :collapsed
       end
     end
 
-    private
-
-    def server_side_but_stored_externally?
-      server_side? && blob.stored_externally?
+    def prepare!
+      # To be overridden by subclasses
     end
   end
 end
diff --git a/app/models/blob_viewer/cartfile.rb b/app/models/blob_viewer/cartfile.rb
new file mode 100644
index 00000000000..d8471bc33c0
--- /dev/null
+++ b/app/models/blob_viewer/cartfile.rb
@@ -0,0 +1,15 @@
+module BlobViewer
+  class Cartfile < DependencyManager
+    include Static
+
+    self.file_types = %i(cartfile)
+
+    def manager_name
+      'Carthage'
+    end
+
+    def manager_url
+      'https://github.com/Carthage/Carthage'
+    end
+  end
+end
diff --git a/app/models/blob_viewer/changelog.rb b/app/models/blob_viewer/changelog.rb
new file mode 100644
index 00000000000..0464ae27f71
--- /dev/null
+++ b/app/models/blob_viewer/changelog.rb
@@ -0,0 +1,16 @@
+module BlobViewer
+  class Changelog < Base
+    include Auxiliary
+    include Static
+
+    self.partial_name = 'changelog'
+    self.file_types = %i(changelog)
+    self.binary = false
+
+    def render_error
+      return if project.repository.tag_count > 0
+
+      :no_tags
+    end
+  end
+end
diff --git a/app/models/blob_viewer/client_side.rb b/app/models/blob_viewer/client_side.rb
index 42ec68f864b..079cfbe3616 100644
--- a/app/models/blob_viewer/client_side.rb
+++ b/app/models/blob_viewer/client_side.rb
@@ -3,9 +3,9 @@ module BlobViewer
     extend ActiveSupport::Concern
 
     included do
-      self.client_side = true
-      self.max_size = 10.megabytes
-      self.absolute_max_size = 50.megabytes
+      self.load_async = false
+      self.collapse_limit = 10.megabytes
+      self.size_limit = 50.megabytes
     end
   end
 end
diff --git a/app/models/blob_viewer/composer_json.rb b/app/models/blob_viewer/composer_json.rb
new file mode 100644
index 00000000000..ef8b4aef8e8
--- /dev/null
+++ b/app/models/blob_viewer/composer_json.rb
@@ -0,0 +1,23 @@
+module BlobViewer
+  class ComposerJson < DependencyManager
+    include ServerSide
+
+    self.file_types = %i(composer_json)
+
+    def manager_name
+      'Composer'
+    end
+
+    def manager_url
+      'https://getcomposer.com/'
+    end
+
+    def package_name
+      @package_name ||= package_name_from_json('name')
+    end
+
+    def package_url
+      "https://packagist.org/packages/#{package_name}"
+    end
+  end
+end
diff --git a/app/models/blob_viewer/contributing.rb b/app/models/blob_viewer/contributing.rb
new file mode 100644
index 00000000000..fbd1dd48697
--- /dev/null
+++ b/app/models/blob_viewer/contributing.rb
@@ -0,0 +1,10 @@
+module BlobViewer
+  class Contributing < Base
+    include Auxiliary
+    include Static
+
+    self.partial_name = 'contributing'
+    self.file_types = %i(contributing)
+    self.binary = false
+  end
+end
diff --git a/app/models/blob_viewer/dependency_manager.rb b/app/models/blob_viewer/dependency_manager.rb
new file mode 100644
index 00000000000..a8d9be945dc
--- /dev/null
+++ b/app/models/blob_viewer/dependency_manager.rb
@@ -0,0 +1,43 @@
+module BlobViewer
+  class DependencyManager < Base
+    include Auxiliary
+
+    self.partial_name = 'dependency_manager'
+    self.binary = false
+
+    def manager_name
+      raise NotImplementedError
+    end
+
+    def manager_url
+      raise NotImplementedError
+    end
+
+    def package_type
+      'package'
+    end
+
+    def package_name
+      nil
+    end
+
+    def package_url
+      nil
+    end
+
+    private
+
+    def package_name_from_json(key)
+      prepare!
+
+      JSON.parse(blob.data)[key] rescue nil
+    end
+
+    def package_name_from_method_call(name)
+      prepare!
+
+      match = blob.data.match(/#{name}\s*=\s*["'](?<name>[^"']+)["']/)
+      match[:name] if match
+    end
+  end
+end
diff --git a/app/models/blob_viewer/download.rb b/app/models/blob_viewer/download.rb
index adc06587f69..074e7204814 100644
--- a/app/models/blob_viewer/download.rb
+++ b/app/models/blob_viewer/download.rb
@@ -1,17 +1,9 @@
 module BlobViewer
   class Download < Base
     include Simple
-    # We treat the Download viewer as if it renders the content client-side,
-    # so that it doesn't attempt to load the entire blob contents and is
-    # rendered synchronously instead of loaded asynchronously.
-    include ClientSide
+    include Static
 
     self.partial_name = 'download'
     self.binary = true
-
-    # We can always render the Download viewer, even if the blob is in LFS or too large.
-    def render_error
-      nil
-    end
   end
 end
diff --git a/app/models/blob_viewer/gemfile.rb b/app/models/blob_viewer/gemfile.rb
new file mode 100644
index 00000000000..fae8c8df23f
--- /dev/null
+++ b/app/models/blob_viewer/gemfile.rb
@@ -0,0 +1,15 @@
+module BlobViewer
+  class Gemfile < DependencyManager
+    include Static
+
+    self.file_types = %i(gemfile gemfile_lock)
+
+    def manager_name
+      'Bundler'
+    end
+
+    def manager_url
+      'http://bundler.io/'
+    end
+  end
+end
diff --git a/app/models/blob_viewer/gemspec.rb b/app/models/blob_viewer/gemspec.rb
new file mode 100644
index 00000000000..7802edeb754
--- /dev/null
+++ b/app/models/blob_viewer/gemspec.rb
@@ -0,0 +1,27 @@
+module BlobViewer
+  class Gemspec < DependencyManager
+    include ServerSide
+
+    self.file_types = %i(gemspec)
+
+    def manager_name
+      'RubyGems'
+    end
+
+    def manager_url
+      'https://rubygems.org/'
+    end
+
+    def package_type
+      'gem'
+    end
+
+    def package_name
+      @package_name ||= package_name_from_method_call('name')
+    end
+
+    def package_url
+      "https://rubygems.org/gems/#{package_name}"
+    end
+  end
+end
diff --git a/app/models/blob_viewer/gitlab_ci_yml.rb b/app/models/blob_viewer/gitlab_ci_yml.rb
new file mode 100644
index 00000000000..7267c3965d3
--- /dev/null
+++ b/app/models/blob_viewer/gitlab_ci_yml.rb
@@ -0,0 +1,23 @@
+module BlobViewer
+  class GitlabCiYml < Base
+    include ServerSide
+    include Auxiliary
+
+    self.partial_name = 'gitlab_ci_yml'
+    self.loading_partial_name = 'gitlab_ci_yml_loading'
+    self.file_types = %i(gitlab_ci)
+    self.binary = false
+
+    def validation_message
+      return @validation_message if defined?(@validation_message)
+
+      prepare!
+
+      @validation_message = Ci::GitlabCiYamlProcessor.validation_message(blob.data)
+    end
+
+    def valid?
+      validation_message.blank?
+    end
+  end
+end
diff --git a/app/models/blob_viewer/godeps_json.rb b/app/models/blob_viewer/godeps_json.rb
new file mode 100644
index 00000000000..e19a602603b
--- /dev/null
+++ b/app/models/blob_viewer/godeps_json.rb
@@ -0,0 +1,15 @@
+module BlobViewer
+  class GodepsJson < DependencyManager
+    include Static
+
+    self.file_types = %i(godeps_json)
+
+    def manager_name
+      'godep'
+    end
+
+    def manager_url
+      'https://github.com/tools/godep'
+    end
+  end
+end
diff --git a/app/models/blob_viewer/license.rb b/app/models/blob_viewer/license.rb
new file mode 100644
index 00000000000..57355f2c3aa
--- /dev/null
+++ b/app/models/blob_viewer/license.rb
@@ -0,0 +1,20 @@
+module BlobViewer
+  class License < Base
+    include Auxiliary
+    include Static
+
+    self.partial_name = 'license'
+    self.file_types = %i(license)
+    self.binary = false
+
+    def license
+      project.repository.license
+    end
+
+    def render_error
+      return if license
+
+      :unknown_license
+    end
+  end
+end
diff --git a/app/models/blob_viewer/markup.rb b/app/models/blob_viewer/markup.rb
index 8fdbab30dd1..33b59c4f512 100644
--- a/app/models/blob_viewer/markup.rb
+++ b/app/models/blob_viewer/markup.rb
@@ -5,6 +5,7 @@ module BlobViewer
 
     self.partial_name = 'markup'
     self.extensions = Gitlab::MarkupHelper::EXTENSIONS
+    self.file_types = %i(readme)
     self.binary = false
   end
 end
diff --git a/app/models/blob_viewer/package_json.rb b/app/models/blob_viewer/package_json.rb
new file mode 100644
index 00000000000..09221efb56c
--- /dev/null
+++ b/app/models/blob_viewer/package_json.rb
@@ -0,0 +1,23 @@
+module BlobViewer
+  class PackageJson < DependencyManager
+    include ServerSide
+
+    self.file_types = %i(package_json)
+
+    def manager_name
+      'npm'
+    end
+
+    def manager_url
+      'https://www.npmjs.com/'
+    end
+
+    def package_name
+      @package_name ||= package_name_from_json('name')
+    end
+
+    def package_url
+      "https://www.npmjs.com/package/#{package_name}"
+    end
+  end
+end
diff --git a/app/models/blob_viewer/podfile.rb b/app/models/blob_viewer/podfile.rb
new file mode 100644
index 00000000000..507bc734cb4
--- /dev/null
+++ b/app/models/blob_viewer/podfile.rb
@@ -0,0 +1,15 @@
+module BlobViewer
+  class Podfile < DependencyManager
+    include Static
+
+    self.file_types = %i(podfile)
+
+    def manager_name
+      'CocoaPods'
+    end
+
+    def manager_url
+      'https://cocoapods.org/'
+    end
+  end
+end
diff --git a/app/models/blob_viewer/podspec.rb b/app/models/blob_viewer/podspec.rb
new file mode 100644
index 00000000000..a4c242db3a9
--- /dev/null
+++ b/app/models/blob_viewer/podspec.rb
@@ -0,0 +1,27 @@
+module BlobViewer
+  class Podspec < DependencyManager
+    include ServerSide
+
+    self.file_types = %i(podspec)
+
+    def manager_name
+      'CocoaPods'
+    end
+
+    def manager_url
+      'https://cocoapods.org/'
+    end
+
+    def package_type
+      'pod'
+    end
+
+    def package_name
+      @package_name ||= package_name_from_method_call('name')
+    end
+
+    def package_url
+      "https://cocoapods.org/pods/#{package_name}"
+    end
+  end
+end
diff --git a/app/models/blob_viewer/podspec_json.rb b/app/models/blob_viewer/podspec_json.rb
new file mode 100644
index 00000000000..602f4a51fd9
--- /dev/null
+++ b/app/models/blob_viewer/podspec_json.rb
@@ -0,0 +1,9 @@
+module BlobViewer
+  class PodspecJson < Podspec
+    self.file_types = %i(podspec_json)
+
+    def package_name
+      @package_name ||= package_name_from_json('name')
+    end
+  end
+end
diff --git a/app/models/blob_viewer/readme.rb b/app/models/blob_viewer/readme.rb
new file mode 100644
index 00000000000..75c373a03bb
--- /dev/null
+++ b/app/models/blob_viewer/readme.rb
@@ -0,0 +1,14 @@
+module BlobViewer
+  class Readme < Base
+    include Auxiliary
+    include Static
+
+    self.partial_name = 'readme'
+    self.file_types = %i(readme)
+    self.binary = false
+
+    def visible_to?(current_user)
+      can?(current_user, :read_wiki, project)
+    end
+  end
+end
diff --git a/app/models/blob_viewer/requirements_txt.rb b/app/models/blob_viewer/requirements_txt.rb
new file mode 100644
index 00000000000..83ac55f61d0
--- /dev/null
+++ b/app/models/blob_viewer/requirements_txt.rb
@@ -0,0 +1,15 @@
+module BlobViewer
+  class RequirementsTxt < DependencyManager
+    include Static
+
+    self.file_types = %i(requirements_txt)
+
+    def manager_name
+      'pip'
+    end
+
+    def manager_url
+      'https://pip.pypa.io/'
+    end
+  end
+end
diff --git a/app/models/blob_viewer/route_map.rb b/app/models/blob_viewer/route_map.rb
new file mode 100644
index 00000000000..153b4eeb2c9
--- /dev/null
+++ b/app/models/blob_viewer/route_map.rb
@@ -0,0 +1,30 @@
+module BlobViewer
+  class RouteMap < Base
+    include ServerSide
+    include Auxiliary
+
+    self.partial_name = 'route_map'
+    self.loading_partial_name = 'route_map_loading'
+    self.file_types = %i(route_map)
+    self.binary = false
+
+    def validation_message
+      return @validation_message if defined?(@validation_message)
+
+      prepare!
+
+      @validation_message =
+        begin
+          Gitlab::RouteMap.new(blob.data)
+
+          nil
+        rescue Gitlab::RouteMap::FormatError => e
+          e.message
+        end
+    end
+
+    def valid?
+      validation_message.blank?
+    end
+  end
+end
diff --git a/app/models/blob_viewer/server_side.rb b/app/models/blob_viewer/server_side.rb
index 899107d02ea..05a3dd7d913 100644
--- a/app/models/blob_viewer/server_side.rb
+++ b/app/models/blob_viewer/server_side.rb
@@ -3,9 +3,28 @@ module BlobViewer
     extend ActiveSupport::Concern
 
     included do
-      self.client_side = false
-      self.max_size = 2.megabytes
-      self.absolute_max_size = 5.megabytes
+      self.load_async = true
+      self.collapse_limit = 2.megabytes
+      self.size_limit = 5.megabytes
+    end
+
+    def prepare!
+      if blob.project
+        blob.load_all_data!(blob.project.repository)
+      end
+    end
+
+    def render_error
+      if blob.stored_externally?
+        # Files that are not stored in the repository, like LFS files and
+        # build artifacts, can only be rendered using a client-side viewer,
+        # since we do not want to read large amounts of data into memory on the
+        # server side. Client-side viewers use JS and can fetch the file from
+        # `blob_raw_url` using AJAX.
+        return :server_side_but_stored_externally
+      end
+
+      super
     end
   end
 end
diff --git a/app/models/blob_viewer/static.rb b/app/models/blob_viewer/static.rb
new file mode 100644
index 00000000000..c9e257e5388
--- /dev/null
+++ b/app/models/blob_viewer/static.rb
@@ -0,0 +1,14 @@
+module BlobViewer
+  module Static
+    extend ActiveSupport::Concern
+
+    included do
+      self.load_async = false
+    end
+
+    # We can always render a static viewer, even if the blob is too large.
+    def render_error
+      nil
+    end
+  end
+end
diff --git a/app/models/blob_viewer/text.rb b/app/models/blob_viewer/text.rb
index e27b2c2b493..f68cbb7e212 100644
--- a/app/models/blob_viewer/text.rb
+++ b/app/models/blob_viewer/text.rb
@@ -5,7 +5,7 @@ module BlobViewer
 
     self.partial_name = 'text'
     self.binary = false
-    self.max_size = 1.megabyte
-    self.absolute_max_size = 10.megabytes
+    self.collapse_limit = 1.megabyte
+    self.size_limit = 10.megabytes
   end
 end
diff --git a/app/models/blob_viewer/yarn_lock.rb b/app/models/blob_viewer/yarn_lock.rb
new file mode 100644
index 00000000000..31588ddcbab
--- /dev/null
+++ b/app/models/blob_viewer/yarn_lock.rb
@@ -0,0 +1,15 @@
+module BlobViewer
+  class YarnLock < DependencyManager
+    include Static
+
+    self.file_types = %i(yarn_lock)
+
+    def manager_name
+      'Yarn'
+    end
+
+    def manager_url
+      'https://yarnpkg.com/'
+    end
+  end
+end
diff --git a/app/models/ci/build.rb b/app/models/ci/build.rb
index b426c27afbb..58dfdd87652 100644
--- a/app/models/ci/build.rb
+++ b/app/models/ci/build.rb
@@ -19,8 +19,8 @@ module Ci
       )
     end
 
-    serialize :options
-    serialize :yaml_variables, Gitlab::Serializer::Ci::Variables
+    serialize :options # rubocop:disable Cop/ActiverecordSerialize
+    serialize :yaml_variables, Gitlab::Serializer::Ci::Variables # rubocop:disable Cop/ActiverecordSerialize
 
     delegate :name, to: :project, prefix: true
 
@@ -51,6 +51,12 @@ module Ci
     after_destroy :update_project_statistics
 
     class << self
+      # This is needed for url_for to work,
+      # as the controller is JobsController
+      def model_name
+        ActiveModel::Name.new(self, nil, 'job')
+      end
+
       def first_pending
         pending.unstarted.order('created_at ASC').first
       end
@@ -111,14 +117,9 @@ module Ci
     end
 
     def play(current_user)
-      # Try to queue a current build
-      if self.enqueue
-        self.update(user: current_user)
-        self
-      else
-        # Otherwise we need to create a duplicate
-        Ci::Build.retry(self, current_user)
-      end
+      Ci::PlayBuildService
+        .new(project, current_user)
+        .execute(self)
     end
 
     def cancelable?
@@ -129,8 +130,8 @@ module Ci
       success? || failed? || canceled?
     end
 
-    def retried?
-      !self.pipeline.statuses.latest.include?(self)
+    def latest?
+      !retried?
     end
 
     def expanded_environment_name
@@ -190,7 +191,7 @@ module Ci
       variables += project.deployment_variables if has_environment?
       variables += yaml_variables
       variables += user_variables
-      variables += project.secret_variables
+      variables += project.secret_variables_for(ref).map(&:to_runner_variable)
       variables += trigger_request.user_variables if trigger_request
       variables
     end
@@ -254,38 +255,6 @@ module Ci
       Time.now - updated_at > 15.minutes.to_i
     end
 
-    ##
-    # Deprecated
-    #
-    # This contains a hotfix for CI build data integrity, see #4246
-    #
-    # This method is used by `ArtifactUploader` to create a store_dir.
-    # Warning: Uploader uses it after AND before file has been stored.
-    #
-    # This method returns old path to artifacts only if it already exists.
-    #
-    def artifacts_path
-      # We need the project even if it's soft deleted, because whenever
-      # we're really deleting the project, we'll also delete the builds,
-      # and in order to delete the builds, we need to know where to find
-      # the artifacts, which is depending on the data of the project.
-      # We need to retain the project in this case.
-      the_project = project || unscoped_project
-
-      old = File.join(created_at.utc.strftime('%Y_%m'),
-                      the_project.ci_id.to_s,
-                      id.to_s)
-
-      old_store = File.join(ArtifactUploader.artifacts_path, old)
-      return old if the_project.ci_id && File.directory?(old_store)
-
-      File.join(
-        created_at.utc.strftime('%Y_%m'),
-        the_project.id.to_s,
-        id.to_s
-      )
-    end
-
     def valid_token?(token)
       self.token && ActiveSupport::SecurityUtils.variable_size_secure_compare(token, self.token)
     end
@@ -305,8 +274,8 @@ module Ci
     def execute_hooks
       return unless project
       build_data = Gitlab::DataBuilder::Build.build(self)
-      project.execute_hooks(build_data.dup, :build_hooks)
-      project.execute_services(build_data.dup, :build_hooks)
+      project.execute_hooks(build_data.dup, :job_hooks)
+      project.execute_services(build_data.dup, :job_hooks)
       PagesService.new(build_data).execute
       project.running_or_pending_build_count(force: true)
     end
diff --git a/app/models/ci/group.rb b/app/models/ci/group.rb
new file mode 100644
index 00000000000..87898b086c6
--- /dev/null
+++ b/app/models/ci/group.rb
@@ -0,0 +1,40 @@
+module Ci
+  ##
+  # This domain model is a representation of a group of jobs that are related
+  # to each other, like `rspec 0 1`, `rspec 0 2`.
+  #
+  # It is not persisted in the database.
+  #
+  class Group
+    include StaticModel
+
+    attr_reader :stage, :name, :jobs
+
+    delegate :size, to: :jobs
+
+    def initialize(stage, name:, jobs:)
+      @stage = stage
+      @name = name
+      @jobs = jobs
+    end
+
+    def status
+      @status ||= commit_statuses.status
+    end
+
+    def detailed_status(current_user)
+      if jobs.one?
+        jobs.first.detailed_status(current_user)
+      else
+        Gitlab::Ci::Status::Group::Factory
+          .new(self, current_user).fabricate!
+      end
+    end
+
+    private
+
+    def commit_statuses
+      @commit_statuses ||= CommitStatus.where(id: jobs.map(&:id))
+    end
+  end
+end
diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index 4be4aa9ffe2..425ca9278eb 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -9,6 +9,7 @@ module Ci
     belongs_to :project
     belongs_to :user
     belongs_to :auto_canceled_by, class_name: 'Ci::Pipeline'
+    belongs_to :pipeline_schedule, class_name: 'Ci::PipelineSchedule'
 
     has_many :auto_canceled_pipelines, class_name: 'Ci::Pipeline', foreign_key: 'auto_canceled_by_id'
     has_many :auto_canceled_jobs, class_name: 'CommitStatus', foreign_key: 'auto_canceled_by_id'
@@ -17,6 +18,10 @@ module Ci
     has_many :builds, foreign_key: :commit_id
     has_many :trigger_requests, dependent: :destroy, foreign_key: :commit_id
 
+    # Merge requests for which the current pipeline is running against
+    # the merge request's latest commit.
+    has_many :merge_requests, foreign_key: "head_pipeline_id"
+
     has_many :pending_builds, -> { pending }, foreign_key: :commit_id, class_name: 'Ci::Build'
     has_many :retryable_builds, -> { latest.failed_or_canceled }, foreign_key: :commit_id, class_name: 'Ci::Build'
     has_many :cancelable_statuses, -> { cancelable }, foreign_key: :commit_id, class_name: 'CommitStatus'
@@ -25,6 +30,7 @@ module Ci
 
     delegate :id, to: :project, prefix: true
 
+    validates :source, exclusion: { in: %w(unknown), unless: :importing? }, on: :create
     validates :sha, presence: { unless: :importing? }
     validates :ref, presence: { unless: :importing? }
     validates :status, presence: { unless: :importing? }
@@ -32,6 +38,16 @@ module Ci
 
     after_create :keep_around_commits, unless: :importing?
 
+    enum source: {
+      unknown: nil,
+      push: 1,
+      web: 2,
+      trigger: 3,
+      schedule: 4,
+      api: 5,
+      external: 6
+    }
+
     state_machine :status, initial: :created do
       event :enqueue do
         transition created: :pending
@@ -264,10 +280,6 @@ module Ci
       commit.sha == sha
     end
 
-    def triggered?
-      trigger_requests.any?
-    end
-
     def retried
       @retried ||= (statuses.order(id: :desc) - statuses.latest)
     end
@@ -380,14 +392,6 @@ module Ci
       project.execute_services(data, :pipeline_hooks)
     end
 
-    # Merge requests for which the current pipeline is running against
-    # the merge request's latest commit.
-    def merge_requests
-      @merge_requests ||= project.merge_requests
-        .where(source_branch: self.ref)
-        .select { |merge_request| merge_request.head_pipeline.try(:id) == self.id }
-    end
-
     # All the merge requests for which the current pipeline runs/ran against
     def all_merge_requests
       @all_merge_requests ||= project.merge_requests.where(source_branch: ref)
diff --git a/app/models/ci/pipeline_schedule.rb b/app/models/ci/pipeline_schedule.rb
new file mode 100644
index 00000000000..45d8cd34359
--- /dev/null
+++ b/app/models/ci/pipeline_schedule.rb
@@ -0,0 +1,60 @@
+module Ci
+  class PipelineSchedule < ActiveRecord::Base
+    extend Ci::Model
+    include Importable
+
+    acts_as_paranoid
+
+    belongs_to :project
+    belongs_to :owner, class_name: 'User'
+    has_one :last_pipeline, -> { order(id: :desc) }, class_name: 'Ci::Pipeline'
+    has_many :pipelines
+
+    validates :cron, unless: :importing?, cron: true, presence: { unless: :importing? }
+    validates :cron_timezone, cron_timezone: true, presence: { unless: :importing? }
+    validates :ref, presence: { unless: :importing? }
+    validates :description, presence: true
+
+    before_save :set_next_run_at
+
+    scope :active, -> { where(active: true) }
+    scope :inactive, -> { where(active: false) }
+
+    def owned_by?(current_user)
+      owner == current_user
+    end
+
+    def own!(user)
+      update(owner: user)
+    end
+
+    def inactive?
+      !active?
+    end
+
+    def deactivate!
+      update_attribute(:active, false)
+    end
+
+    def runnable_by_owner?
+      Ability.allowed?(owner, :create_pipeline, project)
+    end
+
+    def set_next_run_at
+      self.next_run_at = Gitlab::Ci::CronParser.new(cron, cron_timezone).next_time_from(Time.now)
+    end
+
+    def schedule_next_run!
+      save! # with set_next_run_at
+    rescue ActiveRecord::RecordInvalid
+      update_attribute(:next_run_at, nil) # update without validation
+    end
+
+    def real_next_run(
+        worker_cron: Settings.cron_jobs['pipeline_schedule_worker']['cron'],
+        worker_time_zone: Time.zone.name)
+      Gitlab::Ci::CronParser.new(worker_cron, worker_time_zone)
+                            .next_time_from(next_run_at)
+    end
+  end
+end
diff --git a/app/models/ci/stage.rb b/app/models/ci/stage.rb
index e7d6b17d445..9bda3186c30 100644
--- a/app/models/ci/stage.rb
+++ b/app/models/ci/stage.rb
@@ -15,6 +15,14 @@ module Ci
       @warnings = warnings
     end
 
+    def groups
+      @groups ||= statuses.ordered.latest
+        .sort_by(&:sortable_name).group_by(&:group_name)
+        .map do |group_name, grouped_statuses|
+          Ci::Group.new(self, name: group_name, jobs: grouped_statuses)
+        end
+    end
+
     def to_param
       name
     end
diff --git a/app/models/ci/trigger.rb b/app/models/ci/trigger.rb
index 2f64f70685a..6df41a3f301 100644
--- a/app/models/ci/trigger.rb
+++ b/app/models/ci/trigger.rb
@@ -8,14 +8,11 @@ module Ci
     belongs_to :owner, class_name: "User"
 
     has_many :trigger_requests
-    has_one :trigger_schedule, dependent: :destroy
 
     validates :token, presence: true, uniqueness: true
 
     before_validation :set_default_values
 
-    accepts_nested_attributes_for :trigger_schedule
-
     def set_default_values
       self.token = SecureRandom.hex(15) if self.token.blank?
     end
@@ -39,9 +36,5 @@ module Ci
     def can_access_project?
       self.owner_id.blank? || Ability.allowed?(self.owner, :create_build, project)
     end
-
-    def trigger_schedule
-      super || build_trigger_schedule(project: project)
-    end
   end
 end
diff --git a/app/models/ci/trigger_request.rb b/app/models/ci/trigger_request.rb
index 2b807731d0d..564334ad1ad 100644
--- a/app/models/ci/trigger_request.rb
+++ b/app/models/ci/trigger_request.rb
@@ -6,7 +6,7 @@ module Ci
     belongs_to :pipeline, foreign_key: :commit_id
     has_many :builds
 
-    serialize :variables
+    serialize :variables # rubocop:disable Cop/ActiverecordSerialize
 
     def user_variables
       return [] unless variables
diff --git a/app/models/ci/trigger_schedule.rb b/app/models/ci/trigger_schedule.rb
deleted file mode 100644
index 012a18eb439..00000000000
--- a/app/models/ci/trigger_schedule.rb
+++ /dev/null
@@ -1,41 +0,0 @@
-module Ci
-  class TriggerSchedule < ActiveRecord::Base
-    extend Ci::Model
-    include Importable
-
-    acts_as_paranoid
-
-    belongs_to :project
-    belongs_to :trigger
-
-    validates :trigger, presence: { unless: :importing? }
-    validates :cron, unless: :importing_or_inactive?, cron: true, presence: { unless: :importing_or_inactive? }
-    validates :cron_timezone, cron_timezone: true, presence: { unless: :importing_or_inactive? }
-    validates :ref, presence: { unless: :importing_or_inactive? }
-
-    before_save :set_next_run_at
-
-    scope :active, -> { where(active: true) }
-
-    def importing_or_inactive?
-      importing? || !active?
-    end
-
-    def set_next_run_at
-      self.next_run_at = Gitlab::Ci::CronParser.new(cron, cron_timezone).next_time_from(Time.now)
-    end
-
-    def schedule_next_run!
-      save! # with set_next_run_at
-    rescue ActiveRecord::RecordInvalid
-      update_attribute(:next_run_at, nil) # update without validation
-    end
-
-    def real_next_run(
-        worker_cron: Settings.cron_jobs['trigger_schedule_worker']['cron'],
-        worker_time_zone: Time.zone.name)
-      Gitlab::Ci::CronParser.new(worker_cron, worker_time_zone)
-                            .next_time_from(next_run_at)
-    end
-  end
-end
diff --git a/app/models/ci/variable.rb b/app/models/ci/variable.rb
index 6c6586110c5..f235260208f 100644
--- a/app/models/ci/variable.rb
+++ b/app/models/ci/variable.rb
@@ -12,11 +12,16 @@ module Ci
                 message: "can contain only letters, digits and '_'." }
 
     scope :order_key_asc, -> { reorder(key: :asc) }
+    scope :unprotected, -> { where(protected: false) }
 
     attr_encrypted :value,
        mode: :per_attribute_iv_and_salt,
        insecure_mode: true,
        key: Gitlab::Application.secrets.db_key_base,
        algorithm: 'aes-256-cbc'
+
+    def to_runner_variable
+      { key: key, value: value, public: false }
+    end
   end
 end
diff --git a/app/models/commit.rb b/app/models/commit.rb
index 88a015cdb77..dbc0a22829e 100644
--- a/app/models/commit.rb
+++ b/app/models/commit.rb
@@ -49,7 +49,7 @@ class Commit
     def max_diff_options
       {
         max_files: DIFF_HARD_LIMIT_FILES,
-        max_lines: DIFF_HARD_LIMIT_LINES,
+        max_lines: DIFF_HARD_LIMIT_LINES
       }
     end
 
@@ -326,13 +326,21 @@ class Commit
   end
 
   def raw_diffs(*args)
-    # NOTE: This feature is intentionally disabled until
-    # https://gitlab.com/gitlab-org/gitaly/issues/178 is resolved
-    # if Gitlab::GitalyClient.feature_enabled?(:commit_raw_diffs)
-    #   Gitlab::GitalyClient::Commit.diff_from_parent(self, *args)
-    # else
-    raw.diffs(*args)
-    # end
+    if Gitlab::GitalyClient.feature_enabled?(:commit_raw_diffs)
+      Gitlab::GitalyClient::Commit.new(project.repository).diff_from_parent(self, *args)
+    else
+      raw.diffs(*args)
+    end
+  end
+
+  def raw_deltas
+    @deltas ||= Gitlab::GitalyClient.migrate(:commit_deltas) do |is_enabled|
+      if is_enabled
+        Gitlab::GitalyClient::Commit.new(project.repository).commit_deltas(self)
+      else
+        raw.deltas
+      end
+    end
   end
 
   def diffs(diff_options = nil)
@@ -372,7 +380,7 @@ class Commit
   def repo_changes
     changes = { added: [], modified: [], removed: [] }
 
-    raw_diffs(deltas_only: true).each do |diff|
+    raw_deltas.each do |diff|
       if diff.deleted_file
         changes[:removed] << diff.old_path
       elsif diff.renamed_file || diff.new_file
diff --git a/app/models/commit_status.rb b/app/models/commit_status.rb
index 2c4033146bf..fe63728ea23 100644
--- a/app/models/commit_status.rb
+++ b/app/models/commit_status.rb
@@ -18,13 +18,7 @@ class CommitStatus < ActiveRecord::Base
   validates :name, presence: true
 
   alias_attribute :author, :user
-
-  scope :latest, -> do
-    max_id = unscope(:select).select("max(#{quoted_table_name}.id)")
-
-    where(id: max_id.group(:name, :commit_id))
-  end
-
+  
   scope :failed_but_allowed, -> do
     where(allow_failure: true, status: [:failed, :canceled])
   end
@@ -37,7 +31,8 @@ class CommitStatus < ActiveRecord::Base
       false, all_state_names - [:failed, :canceled, :manual])
   end
 
-  scope :retried, -> { where.not(id: latest) }
+  scope :latest, -> { where(retried: [false, nil]) }
+  scope :retried, -> { where(retried: true) }
   scope :ordered, -> { order(:name) }
   scope :latest_ordered, -> { latest.ordered.includes(project: :namespace) }
   scope :retried_ordered, -> { retried.ordered.includes(project: :namespace) }
@@ -94,6 +89,7 @@ class CommitStatus < ActiveRecord::Base
           else
             PipelineUpdateWorker.perform_async(pipeline.id)
           end
+          ExpireJobCacheWorker.perform_async(commit_status.id)
         end
       end
     end
@@ -142,12 +138,6 @@ class CommitStatus < ActiveRecord::Base
     canceled? && auto_canceled_by_id?
   end
 
-  # Added in 9.0 to keep backward compatibility for projects exported in 8.17
-  # and prior.
-  def gl_project_id
-    'dummy'
-  end
-
   def detailed_status(current_user)
     Gitlab::Ci::Status::Factory
       .new(self, current_user)
diff --git a/app/models/concerns/avatarable.rb b/app/models/concerns/avatarable.rb
new file mode 100644
index 00000000000..8fbfed11bdf
--- /dev/null
+++ b/app/models/concerns/avatarable.rb
@@ -0,0 +1,18 @@
+module Avatarable
+  extend ActiveSupport::Concern
+
+  def avatar_path(only_path: true)
+    return unless self[:avatar].present?
+
+    # If only_path is true then use the relative path of avatar.
+    # Otherwise use full path (including host).
+    asset_host = ActionController::Base.asset_host
+    gitlab_host = only_path ? gitlab_config.relative_url_root : gitlab_config.url
+
+    # If asset_host is set then it is expected that assets are handled by a standalone host.
+    # That means we do not want to get GitLab's relative_url_root option anymore.
+    host = asset_host.present? ? asset_host : gitlab_host
+
+    [host, avatar.url].join
+  end
+end
diff --git a/app/models/concerns/discussion_on_diff.rb b/app/models/concerns/discussion_on_diff.rb
index a7bdf5587b2..eee1a36ac6b 100644
--- a/app/models/concerns/discussion_on_diff.rb
+++ b/app/models/concerns/discussion_on_diff.rb
@@ -47,4 +47,12 @@ module DiscussionOnDiff
 
     prev_lines
   end
+
+  def line_code_in_diffs(diff_refs)
+    if active?(diff_refs)
+      line_code
+    elsif diff_refs && created_at_diff?(diff_refs)
+      original_line_code
+    end
+  end
 end
diff --git a/app/models/concerns/has_status.rb b/app/models/concerns/has_status.rb
index dff7b6e3523..3c9c6584e02 100644
--- a/app/models/concerns/has_status.rb
+++ b/app/models/concerns/has_status.rb
@@ -82,7 +82,7 @@ module HasStatus
     scope :failed_or_canceled, -> { where(status: [:failed, :canceled]) }
 
     scope :cancelable, -> do
-      where(status: [:running, :pending, :created, :manual])
+      where(status: [:running, :pending, :created])
     end
   end
 
diff --git a/app/models/concerns/issuable.rb b/app/models/concerns/issuable.rb
index 26dbf4d9570..075ec575f9d 100644
--- a/app/models/concerns/issuable.rb
+++ b/app/models/concerns/issuable.rb
@@ -26,8 +26,8 @@ module Issuable
     cache_markdown_field :description, issuable_state_filter_enabled: true
 
     belongs_to :author, class_name: "User"
-    belongs_to :assignee, class_name: "User"
     belongs_to :updated_by, class_name: "User"
+    belongs_to :last_edited_by, class_name: 'User'
     belongs_to :milestone
     has_many :notes, as: :noteable, inverse_of: :noteable, dependent: :destroy do
       def authors_loaded?
@@ -65,11 +65,8 @@ module Issuable
     validates :title, presence: true, length: { maximum: 255 }
 
     scope :authored, ->(user) { where(author_id: user) }
-    scope :assigned_to, ->(u) { where(assignee_id: u.id)}
     scope :recent, -> { reorder(id: :desc) }
     scope :order_position_asc, -> { reorder(position: :asc) }
-    scope :assigned, -> { where("assignee_id IS NOT NULL") }
-    scope :unassigned, -> { where("assignee_id IS NULL") }
     scope :of_projects, ->(ids) { where(project_id: ids) }
     scope :of_milestones, ->(ids) { where(milestone_id: ids) }
     scope :with_milestone, ->(title) { left_joins_milestones.where(milestones: { title: title }) }
@@ -92,23 +89,14 @@ module Issuable
     attr_mentionable :description
 
     participant :author
-    participant :assignee
     participant :notes_with_associations
 
     strip_attributes :title
 
     acts_as_paranoid
 
-    after_save :update_assignee_cache_counts, if: :assignee_id_changed?
     after_save :record_metrics, unless: :imported?
 
-    def update_assignee_cache_counts
-      # make sure we flush the cache for both the old *and* new assignees(if they exist)
-      previous_assignee = User.find_by_id(assignee_id_was) if assignee_id_was
-      previous_assignee&.update_cache_counts
-      assignee&.update_cache_counts
-    end
-
     # We want to use optimistic lock for cases when only title or description are involved
     # http://api.rubyonrails.org/classes/ActiveRecord/Locking/Optimistic.html
     def locking_enabled?
@@ -237,10 +225,6 @@ module Issuable
     today? && created_at == updated_at
   end
 
-  def is_being_reassigned?
-    assignee_id_changed?
-  end
-
   def open?
     opened? || reopened?
   end
@@ -269,7 +253,11 @@ module Issuable
       # DEPRECATED
       repository: project.hook_attrs.slice(:name, :url, :description, :homepage)
     }
-    hook_data[:assignee] = assignee.hook_attrs if assignee
+    if self.is_a?(Issue)
+      hook_data[:assignees] = assignees.map(&:hook_attrs) if assignees.any?
+    else
+      hook_data[:assignee] = assignee.hook_attrs if assignee
+    end
 
     hook_data
   end
@@ -331,11 +319,6 @@ module Issuable
     false
   end
 
-  def assignee_or_author?(user)
-    # We're comparing IDs here so we don't need to load any associations.
-    author_id == user.id || assignee_id == user.id
-  end
-
   def record_metrics
     metrics = self.metrics || create_metrics
     metrics.record!
diff --git a/app/models/concerns/mentionable.rb b/app/models/concerns/mentionable.rb
index 7e56e371b27..c034bf9cbc0 100644
--- a/app/models/concerns/mentionable.rb
+++ b/app/models/concerns/mentionable.rb
@@ -44,14 +44,15 @@ module Mentionable
   end
 
   def all_references(current_user = nil, extractor: nil)
+    @extractors ||= {}
+
     # Use custom extractor if it's passed in the function parameters.
     if extractor
-      @extractor = extractor
+      @extractors[current_user] = extractor
     else
-      @extractor ||= Gitlab::ReferenceExtractor.
-        new(project, current_user)
+      extractor = @extractors[current_user] ||= Gitlab::ReferenceExtractor.new(project, current_user)
 
-      @extractor.reset_memoized_values
+      extractor.reset_memoized_values
     end
 
     self.class.mentionable_attrs.each do |attr, options|
@@ -62,10 +63,10 @@ module Mentionable
         skip_project_check: skip_project_check?
       )
 
-      @extractor.analyze(text, options)
+      extractor.analyze(text, options)
     end
 
-    @extractor
+    extractor
   end
 
   def mentioned_users(current_user = nil)
@@ -78,6 +79,8 @@ module Mentionable
 
   # Extract GFM references to other Mentionables from this Mentionable. Always excludes its #local_reference.
   def referenced_mentionables(current_user = self.author)
+    return [] unless matches_cross_reference_regex?
+
     refs = all_references(current_user)
     refs = (refs.issues + refs.merge_requests + refs.commits)
 
@@ -87,6 +90,20 @@ module Mentionable
     refs.reject { |ref| ref == local_reference }
   end
 
+  # Uses regex to quickly determine if mentionables might be referenced
+  # Allows heavy processing to be skipped
+  def matches_cross_reference_regex?
+    reference_pattern = if !project || project.default_issues_tracker?
+                          ReferenceRegexes::DEFAULT_PATTERN
+                        else
+                          ReferenceRegexes::EXTERNAL_PATTERN
+                        end
+
+    self.class.mentionable_attrs.any? do |attr, _|
+      __send__(attr) =~ reference_pattern
+    end
+  end
+
   # Create a cross-reference Note for each GFM reference to another Mentionable found in the +mentionable_attrs+.
   def create_cross_references!(author = self.author, without = [])
     refs = referenced_mentionables(author)
diff --git a/app/models/concerns/mentionable/reference_regexes.rb b/app/models/concerns/mentionable/reference_regexes.rb
new file mode 100644
index 00000000000..1848230ec7e
--- /dev/null
+++ b/app/models/concerns/mentionable/reference_regexes.rb
@@ -0,0 +1,22 @@
+module Mentionable
+  module ReferenceRegexes
+    def self.reference_pattern(link_patterns, issue_pattern)
+      Regexp.union(link_patterns,
+                   issue_pattern,
+                   Commit.reference_pattern,
+                   MergeRequest.reference_pattern)
+    end
+
+    DEFAULT_PATTERN = begin
+      issue_pattern = Issue.reference_pattern
+      link_patterns = Regexp.union([Issue, Commit, MergeRequest].map(&:link_reference_pattern))
+      reference_pattern(link_patterns, issue_pattern)
+    end
+
+    EXTERNAL_PATTERN = begin
+      issue_pattern = ExternalIssue.reference_pattern
+      link_patterns = URI.regexp(%w(http https))
+      reference_pattern(link_patterns, issue_pattern)
+    end
+  end
+end
diff --git a/app/models/concerns/milestoneish.rb b/app/models/concerns/milestoneish.rb
index f449229864d..a3472af5c55 100644
--- a/app/models/concerns/milestoneish.rb
+++ b/app/models/concerns/milestoneish.rb
@@ -40,7 +40,7 @@ module Milestoneish
   def issues_visible_to_user(user)
     memoize_per_user(user, :issues_visible_to_user) do
       IssuesFinder.new(user, issues_finder_params)
-        .execute.where(milestone_id: milestoneish_ids)
+        .execute.includes(:assignees).where(milestone_id: milestoneish_ids)
     end
   end
 
diff --git a/app/models/concerns/note_on_diff.rb b/app/models/concerns/note_on_diff.rb
index 6359f7596b1..f734952fa6c 100644
--- a/app/models/concerns/note_on_diff.rb
+++ b/app/models/concerns/note_on_diff.rb
@@ -33,14 +33,4 @@ module NoteOnDiff
   def created_at_diff?(diff_refs)
     false
   end
-
-  private
-
-  def noteable_diff_refs
-    if noteable.respond_to?(:diff_sha_refs)
-      noteable.diff_sha_refs
-    else
-      noteable.diff_refs
-    end
-  end
 end
diff --git a/app/models/concerns/noteable.rb b/app/models/concerns/noteable.rb
index dd1e6630642..c7bdc997eca 100644
--- a/app/models/concerns/noteable.rb
+++ b/app/models/concerns/noteable.rb
@@ -43,7 +43,12 @@ module Noteable
   end
 
   def resolvable_discussions
-    @resolvable_discussions ||= discussion_notes.resolvable.discussions(self)
+    @resolvable_discussions ||=
+      if defined?(@discussions)
+        @discussions.select(&:resolvable?)
+      else
+        discussion_notes.resolvable.discussions(self)
+      end
   end
 
   def discussions_resolvable?
diff --git a/app/models/concerns/protected_branch_access.rb b/app/models/concerns/protected_branch_access.rb
index c41b807df8a..a40148a4394 100644
--- a/app/models/concerns/protected_branch_access.rb
+++ b/app/models/concerns/protected_branch_access.rb
@@ -7,5 +7,27 @@ module ProtectedBranchAccess
     belongs_to :protected_branch
 
     delegate :project, to: :protected_branch
+
+    validates :access_level, presence: true, inclusion: {
+      in: [
+        Gitlab::Access::MASTER,
+        Gitlab::Access::DEVELOPER,
+        Gitlab::Access::NO_ACCESS
+      ]
+    }
+
+    def self.human_access_levels
+      {
+        Gitlab::Access::MASTER => "Masters",
+        Gitlab::Access::DEVELOPER => "Developers + Masters",
+        Gitlab::Access::NO_ACCESS => "No one"
+      }.with_indifferent_access
+    end
+
+    def check_access(user)
+      return false if access_level == Gitlab::Access::NO_ACCESS
+
+      super
+    end
   end
 end
diff --git a/app/models/concerns/routable.rb b/app/models/concerns/routable.rb
index b28e05d0c28..63d02b76f6b 100644
--- a/app/models/concerns/routable.rb
+++ b/app/models/concerns/routable.rb
@@ -5,6 +5,7 @@ module Routable
 
   included do
     has_one :route, as: :source, autosave: true, dependent: :destroy
+    has_many :redirect_routes, as: :source, autosave: true, dependent: :destroy
 
     validates_associated :route
     validates :route, presence: true
@@ -26,16 +27,31 @@ module Routable
     #     Klass.find_by_full_path('gitlab-org/gitlab-ce')
     #
     # Returns a single object, or nil.
-    def find_by_full_path(path)
+    def find_by_full_path(path, follow_redirects: false)
       # On MySQL we want to ensure the ORDER BY uses a case-sensitive match so
       # any literal matches come first, for this we have to use "BINARY".
       # Without this there's still no guarantee in what order MySQL will return
       # rows.
+      #
+      # Why do we do this?
+      #
+      # Even though we have Rails validation on Route for unique paths
+      # (case-insensitive), there are old projects in our DB (and possibly
+      # clients' DBs) that have the same path with different cases.
+      # See https://gitlab.com/gitlab-org/gitlab-ce/issues/18603. Also note that
+      # our unique index is case-sensitive in Postgres.
       binary = Gitlab::Database.mysql? ? 'BINARY' : ''
-
       order_sql = "(CASE WHEN #{binary} routes.path = #{connection.quote(path)} THEN 0 ELSE 1 END)"
-
-      where_full_path_in([path]).reorder(order_sql).take
+      found = where_full_path_in([path]).reorder(order_sql).take
+      return found if found
+
+      if follow_redirects
+        if Gitlab::Database.postgresql?
+          joins(:redirect_routes).find_by("LOWER(redirect_routes.path) = LOWER(?)", path)
+        else
+          joins(:redirect_routes).find_by(redirect_routes: { path: path })
+        end
+      end
     end
 
     # Builds a relation to find multiple objects by their full paths.
@@ -68,89 +84,6 @@ module Routable
         joins(:route).where(wheres.join(' OR '))
       end
     end
-
-    # Builds a relation to find multiple objects that are nested under user membership
-    #
-    # Usage:
-    #
-    #     Klass.member_descendants(1)
-    #
-    # Returns an ActiveRecord::Relation.
-    def member_descendants(user_id)
-      joins(:route).
-        joins("INNER JOIN routes r2 ON routes.path LIKE CONCAT(r2.path, '/%')
-               INNER JOIN members ON members.source_id = r2.source_id
-               AND members.source_type = r2.source_type").
-        where('members.user_id = ?', user_id)
-    end
-
-    # Builds a relation to find multiple objects that are nested under user
-    # membership. Includes the parent, as opposed to `#member_descendants`
-    # which only includes the descendants.
-    #
-    # Usage:
-    #
-    #     Klass.member_self_and_descendants(1)
-    #
-    # Returns an ActiveRecord::Relation.
-    def member_self_and_descendants(user_id)
-      joins(:route).
-        joins("INNER JOIN routes r2 ON routes.path LIKE CONCAT(r2.path, '/%')
-               OR routes.path = r2.path
-               INNER JOIN members ON members.source_id = r2.source_id
-               AND members.source_type = r2.source_type").
-        where('members.user_id = ?', user_id)
-    end
-
-    # Returns all objects in a hierarchy, where any node in the hierarchy is
-    # under the user membership.
-    #
-    # Usage:
-    #
-    #     Klass.member_hierarchy(1)
-    #
-    # Examples:
-    #
-    #     Given the following group tree...
-    #
-    #            _______group_1_______
-    #           |                     |
-    #           |                     |
-    #     nested_group_1        nested_group_2
-    #           |                     |
-    #           |                     |
-    #     nested_group_1_1      nested_group_2_1
-    #
-    #
-    #     ... the following results are returned:
-    #
-    #     * the user is a member of group 1
-    #       => 'group_1',
-    #          'nested_group_1', nested_group_1_1',
-    #          'nested_group_2', 'nested_group_2_1'
-    #
-    #     * the user is a member of nested_group_2
-    #       => 'group1',
-    #          'nested_group_2', 'nested_group_2_1'
-    #
-    #     * the user is a member of nested_group_2_1
-    #       => 'group1',
-    #          'nested_group_2', 'nested_group_2_1'
-    #
-    # Returns an ActiveRecord::Relation.
-    def member_hierarchy(user_id)
-      paths = member_self_and_descendants(user_id).pluck('routes.path')
-
-      return none if paths.empty?
-
-      wheres = paths.map do |path|
-        "#{connection.quote(path)} = routes.path
-         OR
-         #{connection.quote(path)} LIKE CONCAT(routes.path, '/%')"
-      end
-
-      joins(:route).where(wheres.join(' OR '))
-    end
   end
 
   def full_name
diff --git a/app/models/concerns/select_for_project_authorization.rb b/app/models/concerns/select_for_project_authorization.rb
index 50a1d7fc3e1..58194b0ea13 100644
--- a/app/models/concerns/select_for_project_authorization.rb
+++ b/app/models/concerns/select_for_project_authorization.rb
@@ -3,7 +3,11 @@ module SelectForProjectAuthorization
 
   module ClassMethods
     def select_for_project_authorization
-      select("members.user_id, projects.id AS project_id, members.access_level")
+      select("projects.id AS project_id, members.access_level")
+    end
+
+    def select_as_master_for_project_authorization
+      select(["projects.id AS project_id", "#{Gitlab::Access::MASTER} AS access_level"])
     end
   end
 end
diff --git a/app/models/deployment.rb b/app/models/deployment.rb
index afad001d50f..304179c0a97 100644
--- a/app/models/deployment.rb
+++ b/app/models/deployment.rb
@@ -12,6 +12,7 @@ class Deployment < ActiveRecord::Base
   delegate :name, to: :environment, prefix: true
 
   after_create :create_ref
+  after_create :invalidate_cache
 
   def commit
     project.commit(sha)
@@ -33,6 +34,10 @@ class Deployment < ActiveRecord::Base
     project.repository.create_ref(ref, ref_path)
   end
 
+  def invalidate_cache
+    environment.expire_etag_cache
+  end
+
   def manual_actions
     @manual_actions ||= deployable.try(:other_actions)
   end
@@ -85,8 +90,8 @@ class Deployment < ActiveRecord::Base
   end
 
   def stop_action
-    return nil unless on_stop.present?
-    return nil unless manual_actions
+    return unless on_stop.present?
+    return unless manual_actions
 
     @stop_action ||= manual_actions.find_by(name: on_stop)
   end
@@ -99,6 +104,16 @@ class Deployment < ActiveRecord::Base
     created_at.to_time.in_time_zone.to_s(:medium)
   end
 
+  def has_metrics?
+    project.monitoring_service.present?
+  end
+
+  def metrics
+    return {} unless has_metrics?
+
+    project.monitoring_service.deployment_metrics(self)
+  end
+
   private
 
   def ref_path
diff --git a/app/models/diff_discussion.rb b/app/models/diff_discussion.rb
index d627fbe327f..07c4846e2ac 100644
--- a/app/models/diff_discussion.rb
+++ b/app/models/diff_discussion.rb
@@ -10,6 +10,7 @@ class DiffDiscussion < Discussion
 
   delegate  :position,
             :original_position,
+            :change_position,
 
             to: :first_note
 
@@ -19,27 +20,15 @@ class DiffDiscussion < Discussion
 
   def merge_request_version_params
     return unless for_merge_request?
+    return {} if active?
 
-    if active?
-      {}
-    else
-      diff_refs = position.diff_refs
-
-      if diff = noteable.merge_request_diff_for(diff_refs)
-        { diff_id: diff.id }
-      elsif diff = noteable.merge_request_diff_for(diff_refs.head_sha)
-        {
-          diff_id: diff.id,
-          start_sha: diff_refs.start_sha
-        }
-      end
-    end
+    noteable.version_params_for(position.diff_refs)
   end
 
   def reply_attributes
     super.merge(
       original_position: original_position.to_json,
-      position: position.to_json,
+      position: position.to_json
     )
   end
 end
diff --git a/app/models/diff_note.rb b/app/models/diff_note.rb
index 76c59199afd..20ef1378500 100644
--- a/app/models/diff_note.rb
+++ b/app/models/diff_note.rb
@@ -6,8 +6,9 @@ class DiffNote < Note
 
   NOTEABLE_TYPES = %w(MergeRequest Commit).freeze
 
-  serialize :original_position, Gitlab::Diff::Position
-  serialize :position, Gitlab::Diff::Position
+  serialize :original_position, Gitlab::Diff::Position # rubocop:disable Cop/ActiverecordSerialize
+  serialize :position, Gitlab::Diff::Position # rubocop:disable Cop/ActiverecordSerialize
+  serialize :change_position, Gitlab::Diff::Position # rubocop:disable Cop/ActiverecordSerialize
 
   validates :original_position, presence: true
   validates :position, presence: true
@@ -25,7 +26,7 @@ class DiffNote < Note
     DiffDiscussion
   end
 
-  %i(original_position position).each do |meth|
+  %i(original_position position change_position).each do |meth|
     define_method "#{meth}=" do |new_position|
       if new_position.is_a?(String)
         new_position = JSON.parse(new_position) rescue nil
@@ -36,6 +37,8 @@ class DiffNote < Note
         new_position = Gitlab::Diff::Position.new(new_position)
       end
 
+      return if new_position == read_attribute(meth)
+
       super(new_position)
     end
   end
@@ -45,7 +48,7 @@ class DiffNote < Note
   end
 
   def diff_line
-    @diff_line ||= diff_file.line_for_position(self.original_position) if diff_file
+    @diff_line ||= diff_file&.line_for_position(self.original_position)
   end
 
   def for_line?(line)
@@ -60,7 +63,7 @@ class DiffNote < Note
     return false unless supported?
     return true if for_commit?
 
-    diff_refs ||= noteable_diff_refs
+    diff_refs ||= noteable.diff_refs
 
     self.position.diff_refs == diff_refs
   end
@@ -92,13 +95,21 @@ class DiffNote < Note
 
     return if active?
 
-    Notes::DiffPositionUpdateService.new(
-      self.project,
-      nil,
+    tracer = Gitlab::Diff::PositionTracer.new(
+      project: self.project,
       old_diff_refs: self.position.diff_refs,
-      new_diff_refs: noteable_diff_refs,
+      new_diff_refs: self.noteable.diff_refs,
       paths: self.position.paths
-    ).execute(self)
+    )
+
+    result = tracer.trace(self.position)
+    return unless result
+
+    if result[:outdated]
+      self.change_position = result[:position]
+    else
+      self.position = result[:position]
+    end
   end
 
   def verify_supported
diff --git a/app/models/discussion.rb b/app/models/discussion.rb
index 0b6b920ed66..d1cec7613af 100644
--- a/app/models/discussion.rb
+++ b/app/models/discussion.rb
@@ -21,7 +21,8 @@ class Discussion
   end
 
   def self.build_collection(notes, context_noteable = nil)
-    notes.group_by { |n| n.discussion_id(context_noteable) }.values.map { |notes| build(notes, context_noteable) }
+    grouped_notes = notes.group_by { |n| n.discussion_id(context_noteable) }
+    grouped_notes.values.map { |notes| build(notes, context_noteable) }
   end
 
   # Returns an alphanumeric discussion ID based on `build_discussion_id`
@@ -84,6 +85,12 @@ class Discussion
     first_note.discussion_id(context_noteable)
   end
 
+  def reply_id
+    # To reply to this discussion, we need the actual discussion_id from the database,
+    # not the potentially overwritten one based on the noteable.
+    first_note.discussion_id
+  end
+
   alias_method :to_param, :id
 
   def diff_discussion?
diff --git a/app/models/environment.rb b/app/models/environment.rb
index bf33010fd21..6211a5c1e63 100644
--- a/app/models/environment.rb
+++ b/app/models/environment.rb
@@ -57,12 +57,16 @@ class Environment < ActiveRecord::Base
 
     state :available
     state :stopped
+
+    after_transition do |environment|
+      environment.expire_etag_cache
+    end
   end
 
   def predefined_variables
     [
       { key: 'CI_ENVIRONMENT_NAME', value: name, public: true },
-      { key: 'CI_ENVIRONMENT_SLUG', value: slug, public: true },
+      { key: 'CI_ENVIRONMENT_SLUG', value: slug, public: true }
     ]
   end
 
@@ -150,7 +154,7 @@ class Environment < ActiveRecord::Base
   end
 
   def metrics
-    project.monitoring_service.metrics(self) if has_metrics?
+    project.monitoring_service.environment_metrics(self) if has_metrics?
   end
 
   # An environment name is not necessarily suitable for use in URLs, DNS
@@ -196,6 +200,18 @@ class Environment < ActiveRecord::Base
     [external_url, public_path].join('/')
   end
 
+  def expire_etag_cache
+    Gitlab::EtagCaching::Store.new.tap do |store|
+      store.touch(etag_cache_key)
+    end
+  end
+
+  def etag_cache_key
+    Gitlab::Routing.url_helpers.namespace_project_environments_path(
+      project.namespace,
+      project)
+  end
+
   private
 
   # Slugifying a name may remove the uniqueness guarantee afforded by it being
diff --git a/app/models/event.rb b/app/models/event.rb
index b780c1faf81..46e89388bc1 100644
--- a/app/models/event.rb
+++ b/app/models/event.rb
@@ -26,10 +26,11 @@ class Event < ActiveRecord::Base
   belongs_to :target, polymorphic: true
 
   # For Hash only
-  serialize :data
+  serialize :data # rubocop:disable Cop/ActiverecordSerialize
 
   # Callbacks
   after_create :reset_project_activity
+  after_create :set_last_repository_updated_at, if: :push?
 
   # Scopes
   scope :recent, -> { reorder(id: :desc) }
@@ -357,4 +358,9 @@ class Event < ActiveRecord::Base
   def recent_update?
     project.last_activity_at > RESET_PROJECT_ACTIVITY_INTERVAL.ago
   end
+
+  def set_last_repository_updated_at
+    Project.unscoped.where(id: project_id).
+      update_all(last_repository_updated_at: created_at)
+  end
 end
diff --git a/app/models/global_milestone.rb b/app/models/global_milestone.rb
index 0afbca2cb32..538615130a7 100644
--- a/app/models/global_milestone.rb
+++ b/app/models/global_milestone.rb
@@ -36,7 +36,7 @@ class GlobalMilestone
     closed = count_by_state(milestones_by_state_and_title, 'closed')
     all = milestones_by_state_and_title.map { |(_, title), _| title }.uniq.count
 
-    { 
+    {
       opened: opened,
       closed: closed,
       all: all
@@ -86,7 +86,7 @@ class GlobalMilestone
   end
 
   def issues
-    @issues ||= Issue.of_milestones(milestoneish_ids).includes(:project, :assignee, :labels)
+    @issues ||= Issue.of_milestones(milestoneish_ids).includes(:project, :assignees, :labels)
   end
 
   def merge_requests
@@ -94,7 +94,7 @@ class GlobalMilestone
   end
 
   def participants
-    @participants ||= milestones.includes(:participants).map(&:participants).flatten.compact.uniq
+    @participants ||= milestones.map(&:participants).flatten.uniq
   end
 
   def labels
diff --git a/app/models/group.rb b/app/models/group.rb
index cbc10b00cf5..be944da5a67 100644
--- a/app/models/group.rb
+++ b/app/models/group.rb
@@ -4,6 +4,7 @@ class Group < Namespace
   include Gitlab::ConfigHelper
   include Gitlab::VisibilityLevel
   include AccessRequestable
+  include Avatarable
   include Referable
   include SelectForProjectAuthorization
 
@@ -37,6 +38,10 @@ class Group < Namespace
   after_save :update_two_factor_requirement
 
   class << self
+    def supports_nested_groups?
+      Gitlab::Database.postgresql?
+    end
+
     # Searches for groups matching the given query.
     #
     # This method uses ILIKE on PostgreSQL and LIKE on MySQL.
@@ -77,7 +82,7 @@ class Group < Namespace
       if current_scope.joins_values.include?(:shared_projects)
         joins('INNER JOIN namespaces project_namespace ON project_namespace.id = projects.namespace_id')
           .where('project_namespace.share_with_group_lock = ?',  false)
-          .select("members.user_id, projects.id AS project_id, LEAST(project_group_links.group_access, members.access_level) AS access_level")
+          .select("projects.id AS project_id, LEAST(project_group_links.group_access, members.access_level) AS access_level")
       else
         super
       end
@@ -111,10 +116,10 @@ class Group < Namespace
     allowed_by_projects
   end
 
-  def avatar_url(size = nil)
-    if self[:avatar].present?
-      [gitlab_config.url, avatar.url].join
-    end
+  def avatar_url(**args)
+    # We use avatar_path instead of overriding avatar_url because of carrierwave.
+    # See https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/11001/diffs#note_28659864
+    avatar_path(args)
   end
 
   def lfs_enabled?
diff --git a/app/models/hooks/project_hook.rb b/app/models/hooks/project_hook.rb
index c631e7a7df5..ee6165fd32d 100644
--- a/app/models/hooks/project_hook.rb
+++ b/app/models/hooks/project_hook.rb
@@ -5,7 +5,7 @@ class ProjectHook < WebHook
   scope :confidential_issue_hooks, -> { where(confidential_issues_events: true) }
   scope :note_hooks, -> { where(note_events: true) }
   scope :merge_request_hooks, -> { where(merge_requests_events: true) }
-  scope :build_hooks, -> { where(build_events: true) }
+  scope :job_hooks, -> { where(job_events: true) }
   scope :pipeline_hooks, -> { where(pipeline_events: true) }
   scope :wiki_page_hooks, ->  { where(wiki_page_events: true) }
 end
diff --git a/app/models/hooks/service_hook.rb b/app/models/hooks/service_hook.rb
index eef24052a06..40e43c27f91 100644
--- a/app/models/hooks/service_hook.rb
+++ b/app/models/hooks/service_hook.rb
@@ -2,6 +2,6 @@ class ServiceHook < WebHook
   belongs_to :service
 
   def execute(data)
-    super(data, 'service_hook')
+    WebHookService.new(self, data, 'service_hook').execute
   end
 end
diff --git a/app/models/hooks/system_hook.rb b/app/models/hooks/system_hook.rb
index 777bad1e724..1584235ab00 100644
--- a/app/models/hooks/system_hook.rb
+++ b/app/models/hooks/system_hook.rb
@@ -1,5 +1,6 @@
 class SystemHook < WebHook
-  def async_execute(data, hook_name)
-    Sidekiq::Client.enqueue(SystemHookWorker, id, data, hook_name)
-  end
+  scope :repository_update_hooks, ->  { where(repository_update_events: true) }
+
+  default_value_for :push_events, false
+  default_value_for :repository_update_events, true
 end
diff --git a/app/models/hooks/web_hook.rb b/app/models/hooks/web_hook.rb
index 595602e80fe..7503f3739c3 100644
--- a/app/models/hooks/web_hook.rb
+++ b/app/models/hooks/web_hook.rb
@@ -1,6 +1,5 @@
 class WebHook < ActiveRecord::Base
   include Sortable
-  include HTTParty
 
   default_value_for :push_events, true
   default_value_for :issues_events, false
@@ -8,56 +7,23 @@ class WebHook < ActiveRecord::Base
   default_value_for :note_events, false
   default_value_for :merge_requests_events, false
   default_value_for :tag_push_events, false
-  default_value_for :build_events, false
+  default_value_for :job_events, false
   default_value_for :pipeline_events, false
+  default_value_for :repository_update_events, false
   default_value_for :enable_ssl_verification, true
 
+  has_many :web_hook_logs, dependent: :destroy
+
   scope :push_hooks, -> { where(push_events: true) }
   scope :tag_push_hooks, -> { where(tag_push_events: true) }
 
-  # HTTParty timeout
-  default_timeout Gitlab.config.gitlab.webhook_timeout
-
   validates :url, presence: true, url: true
 
   def execute(data, hook_name)
-    parsed_url = URI.parse(url)
-    if parsed_url.userinfo.blank?
-      response = WebHook.post(url,
-                              body: data.to_json,
-                              headers: build_headers(hook_name),
-                              verify: enable_ssl_verification)
-    else
-      post_url = url.gsub("#{parsed_url.userinfo}@", '')
-      auth = {
-        username: CGI.unescape(parsed_url.user),
-        password: CGI.unescape(parsed_url.password),
-      }
-      response = WebHook.post(post_url,
-                              body: data.to_json,
-                              headers: build_headers(hook_name),
-                              verify: enable_ssl_verification,
-                              basic_auth: auth)
-    end
-
-    [response.code, response.to_s]
-  rescue SocketError, OpenSSL::SSL::SSLError, Errno::ECONNRESET, Errno::ECONNREFUSED, Net::OpenTimeout => e
-    logger.error("WebHook Error => #{e}")
-    [false, e.to_s]
+    WebHookService.new(self, data, hook_name).execute
   end
 
   def async_execute(data, hook_name)
-    Sidekiq::Client.enqueue(ProjectWebHookWorker, id, data, hook_name)
-  end
-
-  private
-
-  def build_headers(hook_name)
-    headers = {
-      'Content-Type' => 'application/json',
-      'X-Gitlab-Event' => hook_name.singularize.titleize
-    }
-    headers['X-Gitlab-Token'] = token if token.present?
-    headers
+    WebHookService.new(self, data, hook_name).async_execute
   end
 end
diff --git a/app/models/hooks/web_hook_log.rb b/app/models/hooks/web_hook_log.rb
new file mode 100644
index 00000000000..d73cfcf630d
--- /dev/null
+++ b/app/models/hooks/web_hook_log.rb
@@ -0,0 +1,13 @@
+class WebHookLog < ActiveRecord::Base
+  belongs_to :web_hook
+
+  serialize :request_headers, Hash # rubocop:disable Cop/ActiverecordSerialize
+  serialize :request_data, Hash # rubocop:disable Cop/ActiverecordSerialize
+  serialize :response_headers, Hash # rubocop:disable Cop/ActiverecordSerialize
+
+  validates :web_hook, presence: true
+
+  def success?
+    response_status =~ /^2/
+  end
+end
diff --git a/app/models/issue.rb b/app/models/issue.rb
index 78bde6820da..a88dbb3e065 100644
--- a/app/models/issue.rb
+++ b/app/models/issue.rb
@@ -24,10 +24,17 @@ class Issue < ActiveRecord::Base
 
   has_many :merge_requests_closing_issues, class_name: 'MergeRequestsClosingIssues', dependent: :delete_all
 
+  has_many :issue_assignees
+  has_many :assignees, class_name: "User", through: :issue_assignees
+
   validates :project, presence: true
 
   scope :in_projects, ->(project_ids) { where(project_id: project_ids) }
 
+  scope :assigned, -> { where('EXISTS (SELECT TRUE FROM issue_assignees WHERE issue_id = issues.id)') }
+  scope :unassigned, -> { where('NOT EXISTS (SELECT TRUE FROM issue_assignees WHERE issue_id = issues.id)') }
+  scope :assigned_to, ->(u) { where('EXISTS (SELECT TRUE FROM issue_assignees WHERE user_id = ? AND issue_id = issues.id)', u.id)}
+
   scope :without_due_date, -> { where(due_date: nil) }
   scope :due_before, ->(date) { where('issues.due_date < ?', date) }
   scope :due_between, ->(from_date, to_date) { where('issues.due_date >= ?', from_date).where('issues.due_date <= ?', to_date) }
@@ -37,13 +44,15 @@ class Issue < ActiveRecord::Base
 
   scope :created_after, -> (datetime) { where("created_at >= ?", datetime) }
 
-  scope :include_associations, -> { includes(:assignee, :labels, project: :namespace) }
+  scope :include_associations, -> { includes(:labels, project: :namespace) }
 
   after_save :expire_etag_cache
 
   attr_spammable :title, spam_title: true
   attr_spammable :description, spam_description: true
 
+  participant :assignees
+
   state_machine :state, initial: :opened do
     event :close do
       transition [:reopened, :opened] => :closed
@@ -63,10 +72,14 @@ class Issue < ActiveRecord::Base
   end
 
   def hook_attrs
+    assignee_ids = self.assignee_ids
+
     attrs = {
       total_time_spent: total_time_spent,
       human_total_time_spent: human_total_time_spent,
-      human_time_estimate: human_time_estimate
+      human_time_estimate: human_time_estimate,
+      assignee_ids: assignee_ids,
+      assignee_id: assignee_ids.first # This key is deprecated
     }
 
     attributes.merge!(attrs)
@@ -114,6 +127,22 @@ class Issue < ActiveRecord::Base
               "id DESC")
   end
 
+  # Returns a Hash of attributes to be used for Twitter card metadata
+  def card_attributes
+    {
+      'Author'   => author.try(:name),
+      'Assignee' => assignee_list
+    }
+  end
+
+  def assignee_or_author?(user)
+    author_id == user.id || assignees.exists?(user.id)
+  end
+
+  def assignee_list
+    assignees.map(&:name).to_sentence
+  end
+
   # `from` argument can be a Namespace or Project.
   def to_reference(from = nil, full: false)
     reference = "#{self.class.reference_prefix}#{iid}"
@@ -145,7 +174,7 @@ class Issue < ActiveRecord::Base
 
   # Returns boolean if a related branch exists for the current issue
   # ignores merge requests branchs
-  def has_related_branch? 
+  def has_related_branch?
     project.repository.branch_names.any? do |branch|
       /\A#{iid}-(?!\d+-stable)/i =~ branch
     end
@@ -248,7 +277,7 @@ class Issue < ActiveRecord::Base
       true
     elsif confidential?
       author == user ||
-        assignee == user ||
+        assignees.include?(user) ||
         project.team.member?(user, Gitlab::Access::REPORTER)
     else
       project.public? ||
@@ -263,7 +292,7 @@ class Issue < ActiveRecord::Base
   end
 
   def expire_etag_cache
-    key = Gitlab::Routing.url_helpers.rendered_title_namespace_project_issue_path(
+    key = Gitlab::Routing.url_helpers.realtime_changes_namespace_project_issue_path(
       project.namespace,
       project,
       self
diff --git a/app/models/issue_assignee.rb b/app/models/issue_assignee.rb
new file mode 100644
index 00000000000..06d760b6a89
--- /dev/null
+++ b/app/models/issue_assignee.rb
@@ -0,0 +1,6 @@
+class IssueAssignee < ActiveRecord::Base
+  extend Gitlab::CurrentSettings
+
+  belongs_to :issue
+  belongs_to :assignee, class_name: "User", foreign_key: :user_id
+end
diff --git a/app/models/key.rb b/app/models/key.rb
index 9c74ca84753..b7956052c3f 100644
--- a/app/models/key.rb
+++ b/app/models/key.rb
@@ -74,7 +74,7 @@ class Key < ActiveRecord::Base
     GitlabShellWorker.perform_async(
       :remove_key,
       shell_id,
-      key,
+      key
     )
   end
 
diff --git a/app/models/label.rb b/app/models/label.rb
index ddddb6bdf8f..074239702f8 100644
--- a/app/models/label.rb
+++ b/app/models/label.rb
@@ -133,6 +133,10 @@ class Label < ActiveRecord::Base
     template
   end
 
+  def color
+    super || DEFAULT_COLOR
+  end
+
   def text_color
     LabelsHelper.text_color_for_bg(self.color)
   end
diff --git a/app/models/legacy_diff_note.rb b/app/models/legacy_diff_note.rb
index d7c627432d2..7126de2d488 100644
--- a/app/models/legacy_diff_note.rb
+++ b/app/models/legacy_diff_note.rb
@@ -7,7 +7,7 @@
 class LegacyDiffNote < Note
   include NoteOnDiff
 
-  serialize :st_diff
+  serialize :st_diff # rubocop:disable Cop/ActiverecordSerialize
 
   validates :line_code, presence: true, line_code: true
 
@@ -61,7 +61,7 @@ class LegacyDiffNote < Note
     return true if for_commit?
     return true unless diff_line
     return false unless noteable
-    return false if diff_refs && diff_refs != noteable_diff_refs
+    return false if diff_refs && diff_refs != noteable.diff_refs
 
     noteable_diff = find_noteable_diff
 
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index 12c5481cd6d..dd155252ad5 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -13,11 +13,15 @@ class MergeRequest < ActiveRecord::Base
   has_one :merge_request_diff,
     -> { order('merge_request_diffs.id DESC') }
 
+  belongs_to :head_pipeline, foreign_key: "head_pipeline_id", class_name: "Ci::Pipeline"
+
   has_many :events, as: :target, dependent: :destroy
 
   has_many :merge_requests_closing_issues, class_name: 'MergeRequestsClosingIssues', dependent: :delete_all
 
-  serialize :merge_params, Hash
+  belongs_to :assignee, class_name: "User"
+
+  serialize :merge_params, Hash # rubocop:disable Cop/ActiverecordSerialize
 
   after_create :ensure_merge_request_diff, unless: :importing?
   after_update :reload_diff_if_branch_changed
@@ -114,6 +118,11 @@ class MergeRequest < ActiveRecord::Base
 
   scope :join_project, -> { joins(:target_project) }
   scope :references_project, -> { references(:target_project) }
+  scope :assigned, -> { where("assignee_id IS NOT NULL") }
+  scope :unassigned, -> { where("assignee_id IS NULL") }
+  scope :assigned_to, ->(u) { where(assignee_id: u.id)}
+
+  participant :assignee
 
   after_save :keep_around_commit
 
@@ -177,6 +186,23 @@ class MergeRequest < ActiveRecord::Base
     work_in_progress?(title) ? title : "WIP: #{title}"
   end
 
+  # Returns a Hash of attributes to be used for Twitter card metadata
+  def card_attributes
+    {
+      'Author'   => author.try(:name),
+      'Assignee' => assignee.try(:name)
+    }
+  end
+
+  # This method is needed for compatibility with issues to not mess view and other code
+  def assignees
+    Array(assignee)
+  end
+
+  def assignee_or_author?(user)
+    author_id == user.id || assignee_id == user.id
+  end
+
   # `from` argument can be a Namespace or Project.
   def to_reference(from = nil, full: false)
     reference = "#{self.class.reference_prefix}#{iid}"
@@ -194,10 +220,10 @@ class MergeRequest < ActiveRecord::Base
 
   def diffs(diff_options = {})
     if compare
-      # When saving MR diffs, `no_collapse` is implicitly added (because we need
+      # When saving MR diffs, `expanded` is implicitly added (because we need
       # to save the entire contents to the DB), so add that here for
       # consistency.
-      compare.diffs(diff_options.merge(no_collapse: true))
+      compare.diffs(diff_options.merge(expanded: true))
     else
       merge_request_diff.diffs(diff_options)
     end
@@ -219,19 +245,6 @@ class MergeRequest < ActiveRecord::Base
     end
   end
 
-  # MRs created before 8.4 don't store a MergeRequestDiff#base_commit_sha,
-  # but we need to get a commit for the "View file @ ..." link by deleted files,
-  # so we find the likely one if we can't get the actual one.
-  # This will not be the actual base commit if the target branch was merged into
-  # the source branch after the merge request was created, but it is good enough
-  # for the specific purpose of linking to a commit.
-  # It is not good enough for use in `Gitlab::Git::DiffRefs`, which needs the
-  # true base commit, so we can't simply have `#diff_base_commit` fall back on
-  # this method.
-  def likely_diff_base_commit
-    first_commit.try(:parent) || first_commit
-  end
-
   def diff_start_commit
     if persisted?
       merge_request_diff.start_commit
@@ -267,6 +280,8 @@ class MergeRequest < ActiveRecord::Base
   attr_writer :target_branch_sha, :source_branch_sha
 
   def source_branch_head
+    return unless source_project
+
     source_branch_ref = @source_branch_sha || source_branch
     source_project.repository.commit(source_branch_ref) if source_branch_ref
   end
@@ -294,21 +309,14 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def diff_refs
-    return unless diff_start_commit || diff_base_commit
-
-    Gitlab::Diff::DiffRefs.new(
-      base_sha:  diff_base_sha,
-      start_sha: diff_start_sha,
-      head_sha:  diff_head_sha
-    )
-  end
-
-  # Return diff_refs instance trying to not touch the git repository
-  def diff_sha_refs
-    if merge_request_diff && merge_request_diff.diff_refs_by_sha?
+    if persisted?
       merge_request_diff.diff_refs
     else
-      diff_refs
+      Gitlab::Diff::DiffRefs.new(
+        base_sha:  diff_base_sha,
+        start_sha: diff_start_sha,
+        head_sha:  diff_head_sha
+      )
     end
   end
 
@@ -388,13 +396,24 @@ class MergeRequest < ActiveRecord::Base
     @merge_request_diffs_by_diff_refs_or_sha[diff_refs_or_sha]
   end
 
+  def version_params_for(diff_refs)
+    if diff = merge_request_diff_for(diff_refs)
+      { diff_id: diff.id }
+    elsif diff = merge_request_diff_for(diff_refs.head_sha)
+      {
+        diff_id: diff.id,
+        start_sha: diff_refs.start_sha
+      }
+    end
+  end
+
   def reload_diff_if_branch_changed
     if source_branch_changed? || target_branch_changed?
       reload_diff
     end
   end
 
-  def reload_diff
+  def reload_diff(current_user = nil)
     return unless open?
 
     old_diff_refs = self.diff_refs
@@ -402,9 +421,10 @@ class MergeRequest < ActiveRecord::Base
     MergeRequests::MergeRequestDiffCacheService.new.execute(self)
     new_diff_refs = self.diff_refs
 
-    update_diff_notes_positions(
+    update_diff_discussion_positions(
       old_diff_refs: old_diff_refs,
-      new_diff_refs: new_diff_refs
+      new_diff_refs: new_diff_refs,
+      current_user: current_user
     )
   end
 
@@ -797,12 +817,6 @@ class MergeRequest < ActiveRecord::Base
     diverged_commits_count > 0
   end
 
-  def head_pipeline
-    return unless diff_head_sha && source_project
-
-    @head_pipeline ||= source_project.pipeline_for(source_branch, diff_head_sha)
-  end
-
   def all_pipelines
     return Ci::Pipeline.none unless source_project
 
@@ -832,38 +846,34 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def can_be_cherry_picked?
-    merge_commit
+    merge_commit.present?
   end
 
   def has_complete_diff_refs?
-    diff_sha_refs && diff_sha_refs.complete?
+    diff_refs && diff_refs.complete?
   end
 
-  def update_diff_notes_positions(old_diff_refs:, new_diff_refs:)
+  def update_diff_discussion_positions(old_diff_refs:, new_diff_refs:, current_user: nil)
     return unless has_complete_diff_refs?
     return if new_diff_refs == old_diff_refs
 
-    active_diff_notes = self.notes.new_diff_notes.select do |note|
-      note.active?(old_diff_refs)
+    active_diff_discussions = self.notes.new_diff_notes.discussions.select do |discussion|
+      discussion.active?(old_diff_refs)
     end
+    return if active_diff_discussions.empty?
 
-    return if active_diff_notes.empty?
-
-    paths = active_diff_notes.flat_map { |n| n.diff_file.paths }.uniq
+    paths = active_diff_discussions.flat_map { |n| n.diff_file.paths }.uniq
 
-    service = Notes::DiffPositionUpdateService.new(
+    service = Discussions::UpdateDiffPositionService.new(
       self.project,
-      nil,
+      current_user,
       old_diff_refs: old_diff_refs,
       new_diff_refs: new_diff_refs,
       paths: paths
     )
 
-    transaction do
-      active_diff_notes.each do |note|
-        service.execute(note)
-        Gitlab::Timeless.timeless(note, &:save)
-      end
+    active_diff_discussions.each do |discussion|
+      service.execute(discussion)
     end
   end
 
@@ -871,32 +881,6 @@ class MergeRequest < ActiveRecord::Base
     project.repository.keep_around(self.merge_commit_sha)
   end
 
-  def conflicts
-    @conflicts ||= Gitlab::Conflict::FileCollection.new(self)
-  end
-
-  def conflicts_can_be_resolved_by?(user)
-    access = ::Gitlab::UserAccess.new(user, project: source_project)
-    access.can_push_to_branch?(source_branch)
-  end
-
-  def conflicts_can_be_resolved_in_ui?
-    return @conflicts_can_be_resolved_in_ui if defined?(@conflicts_can_be_resolved_in_ui)
-
-    return @conflicts_can_be_resolved_in_ui = false unless cannot_be_merged?
-    return @conflicts_can_be_resolved_in_ui = false unless has_complete_diff_refs?
-
-    begin
-      # Try to parse each conflict. If the MR's mergeable status hasn't been updated,
-      # ensure that we don't say there are conflicts to resolve when there are no conflict
-      # files.
-      conflicts.files.each(&:lines)
-      @conflicts_can_be_resolved_in_ui = conflicts.files.length > 0
-    rescue Rugged::OdbError, Gitlab::Conflict::Parser::UnresolvableError, Gitlab::Conflict::FileCollection::ConflictSideMissing
-      @conflicts_can_be_resolved_in_ui = false
-    end
-  end
-
   def has_commits?
     merge_request_diff && commits_count > 0
   end
diff --git a/app/models/merge_request_diff.rb b/app/models/merge_request_diff.rb
index f0a3c30ea74..99dd2130188 100644
--- a/app/models/merge_request_diff.rb
+++ b/app/models/merge_request_diff.rb
@@ -1,7 +1,7 @@
 class MergeRequestDiff < ActiveRecord::Base
   include Sortable
   include Importable
-  include Gitlab::Git::EncodingHelper
+  include Gitlab::EncodingHelper
 
   # Prevent store of diff if commits amount more then 500
   COMMITS_SAFE_SIZE = 100
@@ -11,8 +11,8 @@ class MergeRequestDiff < ActiveRecord::Base
 
   belongs_to :merge_request
 
-  serialize :st_commits
-  serialize :st_diffs
+  serialize :st_commits # rubocop:disable Cop/ActiverecordSerialize
+  serialize :st_diffs # rubocop:disable Cop/ActiverecordSerialize
 
   state_machine :state, initial: :empty do
     state :collected
@@ -150,6 +150,29 @@ class MergeRequestDiff < ActiveRecord::Base
     )
   end
 
+  # MRs created before 8.4 don't store their true diff refs (start and base),
+  # but we need to get a commit SHA for the "View file @ ..." link by a file,
+  # so we use an approximation of the diff refs if we can't get the actual one.
+  #
+  # These will not be the actual diff refs if the target branch was merged into
+  # the source branch after the merge request was created, but it is good enough
+  # for the specific purpose of linking to a commit.
+  #
+  # It is not good enough for highlighting diffs, so we can't simply pass
+  # these as `diff_refs.`
+  def fallback_diff_refs
+    real_refs = diff_refs
+    return real_refs if real_refs
+
+    likely_base_commit_sha = (first_commit&.parent || first_commit)&.sha
+
+    Gitlab::Diff::DiffRefs.new(
+      base_sha:  likely_base_commit_sha,
+      start_sha: safe_start_commit_sha,
+      head_sha:  head_commit_sha
+    )
+  end
+
   def diff_refs_by_sha?
     base_commit_sha? && head_commit_sha? && start_commit_sha?
   end
@@ -175,12 +198,11 @@ class MergeRequestDiff < ActiveRecord::Base
     self == merge_request.merge_request_diff
   end
 
-  def compare_with(sha, straight: true)
+  def compare_with(sha)
     # When compare merge request versions we want diff A..B instead of A...B
     # so we handle cases when user does squash and rebase of the commits between versions.
     # For this reason we set straight to true by default.
-    CompareService.new(project, head_commit_sha)
-      .execute(project, sha, straight: straight)
+    CompareService.new(project, head_commit_sha).execute(project, sha, straight: true)
   end
 
   def commits_count
diff --git a/app/models/milestone.rb b/app/models/milestone.rb
index 652b1551928..b04bed4c014 100644
--- a/app/models/milestone.rb
+++ b/app/models/milestone.rb
@@ -21,7 +21,6 @@ class Milestone < ActiveRecord::Base
   has_many :issues
   has_many :labels, -> { distinct.reorder('labels.title') },  through: :issues
   has_many :merge_requests
-  has_many :participants, -> { distinct.reorder('users.name') }, through: :issues, source: :assignee
   has_many :events, as: :target, dependent: :destroy
 
   scope :active, -> { with_state(:active) }
@@ -107,6 +106,10 @@ class Milestone < ActiveRecord::Base
     end
   end
 
+  def participants
+    User.joins(assigned_issues: :milestone).where("milestones.id = ?", id).uniq
+  end
+
   def self.sort(method)
     case method.to_s
     when 'due_date_asc'
diff --git a/app/models/namespace.rb b/app/models/namespace.rb
index 397dc7a25ab..aebee06d560 100644
--- a/app/models/namespace.rb
+++ b/app/models/namespace.rb
@@ -46,7 +46,7 @@ class Namespace < ActiveRecord::Base
   before_destroy(prepend: true) { prepare_for_destroy }
   after_destroy :rm_dir
 
-  scope :root, -> { where('type IS NULL') }
+  scope :for_user, -> { where('type IS NULL') }
 
   scope :with_statistics, -> do
     joins('LEFT JOIN project_statistics ps ON ps.namespace_id = namespaces.id')
@@ -56,7 +56,7 @@ class Namespace < ActiveRecord::Base
         'COALESCE(SUM(ps.storage_size), 0) AS storage_size',
         'COALESCE(SUM(ps.repository_size), 0) AS repository_size',
         'COALESCE(SUM(ps.lfs_objects_size), 0) AS lfs_objects_size',
-        'COALESCE(SUM(ps.build_artifacts_size), 0) AS build_artifacts_size',
+        'COALESCE(SUM(ps.build_artifacts_size), 0) AS build_artifacts_size'
       )
   end
 
@@ -176,26 +176,20 @@ class Namespace < ActiveRecord::Base
     projects.with_shared_runners.any?
   end
 
-  # Scopes the model on ancestors of the record
+  # Returns all the ancestors of the current namespaces.
   def ancestors
-    if parent_id
-      path = route ? route.path : full_path
-      paths = []
+    return self.class.none unless parent_id
 
-      until path.blank?
-        path = path.rpartition('/').first
-        paths << path
-      end
-
-      self.class.joins(:route).where('routes.path IN (?)', paths).reorder('routes.path ASC')
-    else
-      self.class.none
-    end
+    Gitlab::GroupHierarchy.
+      new(self.class.where(id: parent_id)).
+      base_and_ancestors
   end
 
-  # Scopes the model on direct and indirect children of the record
+  # Returns all the descendants of the current namespace.
   def descendants
-    self.class.joins(:route).merge(Route.inside_path(route.path)).reorder('routes.path ASC')
+    Gitlab::GroupHierarchy.
+      new(self.class.where(parent_id: id)).
+      base_and_descendants
   end
 
   def user_ids_for_project_authorizations
diff --git a/app/models/note.rb b/app/models/note.rb
index b06985b4a6f..832c68243fb 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -18,6 +18,11 @@ class Note < ActiveRecord::Base
 
   cache_markdown_field :note, pipeline: :note, issuable_state_filter_enabled: true
 
+  # Aliases to make application_helper#edited_time_ago_with_tooltip helper work properly with notes.
+  # See https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10392/diffs#note_28719102
+  alias_attribute :last_edited_at, :updated_at
+  alias_attribute :last_edited_by, :updated_by
+
   # Attribute containing rendered and redacted Markdown as generated by
   # Banzai::ObjectRenderer.
   attr_accessor :redacted_note_html
@@ -38,6 +43,7 @@ class Note < ActiveRecord::Base
   belongs_to :noteable, polymorphic: true, touch: true
   belongs_to :author, class_name: "User"
   belongs_to :updated_by, class_name: "User"
+  belongs_to :last_edited_by, class_name: 'User'
 
   has_many :todos, dependent: :destroy
   has_many :events, as: :target, dependent: :destroy
@@ -104,7 +110,7 @@ class Note < ActiveRecord::Base
     end
 
     def discussions(context_noteable = nil)
-      Discussion.build_collection(fresh, context_noteable)
+      Discussion.build_collection(all.includes(:noteable).fresh, context_noteable)
     end
 
     def find_discussion(discussion_id)
@@ -118,13 +124,12 @@ class Note < ActiveRecord::Base
       groups = {}
 
       diff_notes.fresh.discussions.each do |discussion|
-        if discussion.active?(diff_refs)
-          discussions = groups[discussion.line_code] ||= []
-        elsif diff_refs && discussion.created_at_diff?(diff_refs)
-          discussions = groups[discussion.original_line_code] ||= []
-        end
+        line_code = discussion.line_code_in_diffs(diff_refs)
 
-        discussions << discussion if discussions
+        if line_code
+          discussions = groups[line_code] ||= []
+          discussions << discussion
+        end
       end
 
       groups
diff --git a/app/models/personal_access_token.rb b/app/models/personal_access_token.rb
index e8b000ddad6..ae9f71e7747 100644
--- a/app/models/personal_access_token.rb
+++ b/app/models/personal_access_token.rb
@@ -3,7 +3,7 @@ class PersonalAccessToken < ActiveRecord::Base
   include TokenAuthenticatable
   add_authentication_token_field :token
 
-  serialize :scopes, Array
+  serialize :scopes, Array # rubocop:disable Cop/ActiverecordSerialize
 
   belongs_to :user
 
diff --git a/app/models/project.rb b/app/models/project.rb
index 025db89ebfd..446329557d5 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -6,6 +6,7 @@ class Project < ActiveRecord::Base
   include Gitlab::VisibilityLevel
   include Gitlab::CurrentSettings
   include AccessRequestable
+  include Avatarable
   include CacheMarkdownField
   include Referable
   include Sortable
@@ -53,6 +54,11 @@ class Project < ActiveRecord::Base
     update_column(:last_activity_at, self.created_at)
   end
 
+  after_create :set_last_repository_updated_at
+  def set_last_repository_updated_at
+    update_column(:last_repository_updated_at, self.created_at)
+  end
+
   after_destroy :remove_pages
 
   # update visibility_level of forks
@@ -169,10 +175,11 @@ class Project < ActiveRecord::Base
   has_many :builds, class_name: 'Ci::Build' # the builds are created from the commit_statuses
   has_many :runner_projects, dependent: :destroy, class_name: 'Ci::RunnerProject'
   has_many :runners, through: :runner_projects, source: :runner, class_name: 'Ci::Runner'
-  has_many :variables, dependent: :destroy, class_name: 'Ci::Variable'
+  has_many :variables, class_name: 'Ci::Variable'
   has_many :triggers, dependent: :destroy, class_name: 'Ci::Trigger'
   has_many :environments, dependent: :destroy
   has_many :deployments, dependent: :destroy
+  has_many :pipeline_schedules, dependent: :destroy, class_name: 'Ci::PipelineSchedule'
 
   has_many :active_runners, -> { active }, through: :runner_projects, source: :runner, class_name: 'Ci::Runner'
 
@@ -198,8 +205,8 @@ class Project < ActiveRecord::Base
     presence: true,
     dynamic_path: true,
     length: { maximum: 255 },
-    format: { with: Gitlab::Regex.project_path_regex,
-              message: Gitlab::Regex.project_path_regex_message },
+    format: { with: Gitlab::PathRegex.project_path_format_regex,
+              message: Gitlab::PathRegex.project_path_format_message },
     uniqueness: { scope: :namespace_id }
 
   validates :namespace, presence: true
@@ -235,6 +242,7 @@ class Project < ActiveRecord::Base
   scope :in_namespace, ->(namespace_ids) { where(namespace_id: namespace_ids) }
   scope :personal, ->(user) { where(namespace_id: user.namespace_id) }
   scope :joined, ->(user) { where('namespace_id != ?', user.namespace_id) }
+  scope :starred_by, ->(user) { joins(:users_star_projects).where('users_star_projects.user_id': user.id) }
   scope :visible_to_user, ->(user) { where(id: user.authorized_projects.select(:id).reorder(nil)) }
   scope :non_archived, -> { where(archived: false) }
   scope :for_milestones, ->(ids) { joins(:milestones).where('milestones.id' => ids).distinct }
@@ -264,6 +272,7 @@ class Project < ActiveRecord::Base
 
   scope :with_builds_enabled, -> { with_feature_enabled(:builds) }
   scope :with_issues_enabled, -> { with_feature_enabled(:issues) }
+  scope :with_merge_requests_enabled, -> { with_feature_enabled(:merge_requests) }
 
   enum auto_cancel_pending_pipelines: { disabled: 0, enabled: 1 }
 
@@ -342,10 +351,6 @@ class Project < ActiveRecord::Base
       where("projects.id IN (#{union.to_sql})")
     end
 
-    def search_by_visibility(level)
-      where(visibility_level: Gitlab::VisibilityLevel.string_options[level])
-    end
-
     def search_by_title(query)
       pattern = "%#{query}%"
       table   = Project.arel_table
@@ -373,11 +378,9 @@ class Project < ActiveRecord::Base
     end
 
     def reference_pattern
-      name_pattern = Gitlab::Regex::FULL_NAMESPACE_REGEX_STR
-
       %r{
-        ((?<namespace>#{name_pattern})\/)?
-        (?<project>#{name_pattern})
+        ((?<namespace>#{Gitlab::PathRegex::FULL_NAMESPACE_FORMAT_REGEX})\/)?
+        (?<project>#{Gitlab::PathRegex::PROJECT_PATH_FORMAT_REGEX})
       }x
     end
 
@@ -792,12 +795,10 @@ class Project < ActiveRecord::Base
     repository.avatar
   end
 
-  def avatar_url
-    if self[:avatar].present?
-      [gitlab_config.url, avatar.url].join
-    elsif avatar_in_git
-      Gitlab::Routing.url_helpers.namespace_project_avatar_url(namespace, self)
-    end
+  def avatar_url(**args)
+    # We use avatar_path instead of overriding avatar_url because of carrierwave.
+    # See https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/11001/diffs#note_28659864
+    avatar_path(args) || (Gitlab::Routing.url_helpers.namespace_project_avatar_url(namespace, self) if avatar_in_git)
   end
 
   # For compatibility with old code
@@ -870,10 +871,8 @@ class Project < ActiveRecord::Base
     url_to_repo
   end
 
-  def http_url_to_repo(user = nil)
-    credentials = Gitlab::UrlSanitizer.http_credentials_for_user(user)
-
-    Gitlab::UrlSanitizer.new("#{web_url}.git", credentials: credentials).full_url
+  def http_url_to_repo
+    "#{web_url}.git"
   end
 
   def user_can_push_to_empty_repo?(user)
@@ -962,7 +961,7 @@ class Project < ActiveRecord::Base
       namespace: namespace.name,
       visibility_level: visibility_level,
       path_with_namespace: path_with_namespace,
-      default_branch: default_branch,
+      default_branch: default_branch
     }
 
     # Backward compatibility
@@ -1062,11 +1061,6 @@ class Project < ActiveRecord::Base
     pipelines.order(id: :desc).find_by(sha: sha, ref: ref)
   end
 
-  def ensure_pipeline(ref, sha, current_user = nil)
-    pipeline_for(ref, sha) ||
-      pipelines.create(sha: sha, ref: ref, user: current_user)
-  end
-
   def enable_ci
     project_feature.update_attribute(:builds_access_level, ProjectFeature::ENABLED)
   end
@@ -1251,12 +1245,19 @@ class Project < ActiveRecord::Base
     variables
   end
 
-  def secret_variables
-    variables.map do |variable|
-      { key: variable.key, value: variable.value, public: false }
+  def secret_variables_for(ref)
+    if protected_for?(ref)
+      variables
+    else
+      variables.unprotected
     end
   end
 
+  def protected_for?(ref)
+    ProtectedBranch.protected?(self, ref) ||
+      ProtectedTag.protected?(self, ref)
+  end
+
   def deployment_variables
     return [] unless deployment_service
 
diff --git a/app/models/project_authorization.rb b/app/models/project_authorization.rb
index 4c7f4f5a429..def09675253 100644
--- a/app/models/project_authorization.rb
+++ b/app/models/project_authorization.rb
@@ -6,6 +6,12 @@ class ProjectAuthorization < ActiveRecord::Base
   validates :access_level, inclusion: { in: Gitlab::Access.all_values }, presence: true
   validates :user, uniqueness: { scope: [:project, :access_level] }, presence: true
 
+  def self.select_from_union(union)
+    select(['project_id', 'MAX(access_level) AS access_level']).
+      from("(#{union.to_sql}) #{ProjectAuthorization.table_name}").
+      group(:project_id)
+  end
+
   def self.insert_authorizations(rows, per_batch = 1000)
     rows.each_slice(per_batch) do |slice|
       tuples = slice.map do |tuple|
diff --git a/app/models/project_import_data.rb b/app/models/project_import_data.rb
index 331123a5a5b..e3cafd4d1c6 100644
--- a/app/models/project_import_data.rb
+++ b/app/models/project_import_data.rb
@@ -10,7 +10,7 @@ class ProjectImportData < ActiveRecord::Base
                  insecure_mode: true,
                  algorithm: 'aes-256-cbc'
 
-  serialize :data, JSON
+  serialize :data, JSON # rubocop:disable Cop/ActiverecordSerialize
 
   validates :project, presence: true
 
diff --git a/app/models/project_services/bamboo_service.rb b/app/models/project_services/bamboo_service.rb
index 400020ee04a..3f5b3eb159b 100644
--- a/app/models/project_services/bamboo_service.rb
+++ b/app/models/project_services/bamboo_service.rb
@@ -52,7 +52,7 @@ class BambooService < CiService
           placeholder: 'Bamboo build plan key like KEY' },
         { type: 'text', name: 'username',
           placeholder: 'A user with API access, if applicable' },
-        { type: 'password', name: 'password' },
+        { type: 'password', name: 'password' }
     ]
   end
 
diff --git a/app/models/project_services/chat_message/pipeline_message.rb b/app/models/project_services/chat_message/pipeline_message.rb
index 47b68f00cff..3edc395033c 100644
--- a/app/models/project_services/chat_message/pipeline_message.rb
+++ b/app/models/project_services/chat_message/pipeline_message.rb
@@ -35,7 +35,7 @@ module ChatMessage
 
     def activity
       {
-        title: "Pipeline #{pipeline_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status}",
+        title: "Pipeline #{pipeline_link} of #{ref_type} #{branch_link} by #{user_name} #{humanized_status}",
         subtitle: "in #{project_link}",
         text: "in #{pretty_duration(duration)}",
         image: user_avatar || ''
@@ -45,7 +45,7 @@ module ChatMessage
     private
 
     def message
-      "#{project_link}: Pipeline #{pipeline_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status} in #{pretty_duration(duration)}"
+      "#{project_link}: Pipeline #{pipeline_link} of #{ref_type} #{branch_link} by #{user_name} #{humanized_status} in #{pretty_duration(duration)}"
     end
 
     def humanized_status
@@ -70,7 +70,7 @@ module ChatMessage
     end
 
     def branch_link
-      "[#{ref}](#{branch_url})"
+      "`[#{ref}](#{branch_url})`"
     end
 
     def project_link
diff --git a/app/models/project_services/chat_message/push_message.rb b/app/models/project_services/chat_message/push_message.rb
index c52dd6ef8ef..04a59d559ca 100644
--- a/app/models/project_services/chat_message/push_message.rb
+++ b/app/models/project_services/chat_message/push_message.rb
@@ -61,7 +61,7 @@ module ChatMessage
     end
 
     def removed_branch_message
-      "#{user_name} removed #{ref_type} #{ref} from #{project_link}"
+      "#{user_name} removed #{ref_type} `#{ref}` from #{project_link}"
     end
 
     def push_message
@@ -102,7 +102,7 @@ module ChatMessage
     end
 
     def branch_link
-      "[#{ref}](#{branch_url})"
+      "`[#{ref}](#{branch_url})`"
     end
 
     def project_link
diff --git a/app/models/project_services/chat_notification_service.rb b/app/models/project_services/chat_notification_service.rb
index fa782c6fbb7..779ef54cfcb 100644
--- a/app/models/project_services/chat_notification_service.rb
+++ b/app/models/project_services/chat_notification_service.rb
@@ -39,7 +39,7 @@ class ChatNotificationService < Service
       { type: 'text', name: 'webhook', placeholder: "e.g. #{webhook_placeholder}" },
       { type: 'text', name: 'username', placeholder: 'e.g. GitLab' },
       { type: 'checkbox', name: 'notify_only_broken_pipelines' },
-      { type: 'checkbox', name: 'notify_only_default_branch' },
+      { type: 'checkbox', name: 'notify_only_default_branch' }
     ]
   end
 
@@ -150,7 +150,7 @@ class ChatNotificationService < Service
 
   def notify_for_ref?(data)
     return true if data[:object_attributes][:tag]
-    return true unless notify_only_default_branch
+    return true unless notify_only_default_branch?
 
     data[:object_attributes][:ref] == project.default_branch
   end
diff --git a/app/models/project_services/emails_on_push_service.rb b/app/models/project_services/emails_on_push_service.rb
index f4f913ee0b6..1a236e232f9 100644
--- a/app/models/project_services/emails_on_push_service.rb
+++ b/app/models/project_services/emails_on_push_service.rb
@@ -47,7 +47,7 @@ class EmailsOnPushService < Service
         help: "Send notifications from the committer's email address if the domain is part of the domain GitLab is running on (e.g. #{domains})." },
       { type: 'checkbox', name: 'disable_diffs', title: "Disable code diffs",
         help: "Don't include possibly sensitive code diffs in notification body." },
-      { type: 'textarea', name: 'recipients', placeholder: 'Emails separated by whitespace' },
+      { type: 'textarea', name: 'recipients', placeholder: 'Emails separated by whitespace' }
     ]
   end
 end
diff --git a/app/models/project_services/external_wiki_service.rb b/app/models/project_services/external_wiki_service.rb
index bdf6fa6a586..b4d7c977ce4 100644
--- a/app/models/project_services/external_wiki_service.rb
+++ b/app/models/project_services/external_wiki_service.rb
@@ -19,7 +19,7 @@ class ExternalWikiService < Service
 
   def fields
     [
-      { type: 'text', name: 'external_wiki_url', placeholder: 'The URL of the external Wiki' },
+      { type: 'text', name: 'external_wiki_url', placeholder: 'The URL of the external Wiki' }
     ]
   end
 
diff --git a/app/models/project_services/flowdock_service.rb b/app/models/project_services/flowdock_service.rb
index 10a13c3fbdc..2a05d757eb4 100644
--- a/app/models/project_services/flowdock_service.rb
+++ b/app/models/project_services/flowdock_service.rb
@@ -37,7 +37,7 @@ class FlowdockService < Service
       repo: project.repository.path_to_repo,
       repo_url: "#{Gitlab.config.gitlab.url}/#{project.path_with_namespace}",
       commit_url: "#{Gitlab.config.gitlab.url}/#{project.path_with_namespace}/commit/%s",
-      diff_url: "#{Gitlab.config.gitlab.url}/#{project.path_with_namespace}/compare/%s...%s",
+      diff_url: "#{Gitlab.config.gitlab.url}/#{project.path_with_namespace}/compare/%s...%s"
     )
   end
 end
diff --git a/app/models/project_services/hipchat_service.rb b/app/models/project_services/hipchat_service.rb
index 8b181221bb0..c19fed339ba 100644
--- a/app/models/project_services/hipchat_service.rb
+++ b/app/models/project_services/hipchat_service.rb
@@ -41,7 +41,7 @@ class HipchatService < Service
         placeholder: 'Leave blank for default (v2)' },
       { type: 'text', name: 'server',
         placeholder: 'Leave blank for default. https://hipchat.example.com' },
-      { type: 'checkbox', name: 'notify_only_broken_pipelines' },
+      { type: 'checkbox', name: 'notify_only_broken_pipelines' }
     ]
   end
 
diff --git a/app/models/project_services/irker_service.rb b/app/models/project_services/irker_service.rb
index c62bb4fa120..a51d43adcb9 100644
--- a/app/models/project_services/irker_service.rb
+++ b/app/models/project_services/irker_service.rb
@@ -58,7 +58,7 @@ class IrkerService < Service
         ' want to use a password, you have to omit the "#" on the channel). If you ' \
         ' specify a default IRC URI to prepend before each recipient, you can just ' \
         ' give a channel name.'  },
-      { type: 'checkbox', name: 'colorize_messages' },
+      { type: 'checkbox', name: 'colorize_messages' }
     ]
   end
 
diff --git a/app/models/project_services/issue_tracker_service.rb b/app/models/project_services/issue_tracker_service.rb
index 50435b67eda..eddf308eae3 100644
--- a/app/models/project_services/issue_tracker_service.rb
+++ b/app/models/project_services/issue_tracker_service.rb
@@ -76,7 +76,7 @@ class IssueTrackerService < Service
         message = "#{self.type} received response #{response.code} when attempting to connect to #{self.project_url}"
         result = true
       end
-    rescue HTTParty::Error, Timeout::Error, SocketError, Errno::ECONNRESET, Errno::ECONNREFUSED => error
+    rescue HTTParty::Error, Timeout::Error, SocketError, Errno::ECONNRESET, Errno::ECONNREFUSED, OpenSSL::SSL::SSLError => error
       message = "#{self.type} had an error when trying to connect to #{self.project_url}: #{error.message}"
     end
     Rails.logger.info(message)
diff --git a/app/models/project_services/jira_service.rb b/app/models/project_services/jira_service.rb
index 97e997d3899..25d098b63c0 100644
--- a/app/models/project_services/jira_service.rb
+++ b/app/models/project_services/jira_service.rb
@@ -2,9 +2,10 @@ class JiraService < IssueTrackerService
   include Gitlab::Routing.url_helpers
 
   validates :url, url: true, presence: true, if: :activated?
+  validates :api_url, url: true, allow_blank: true
   validates :project_key, presence: true, if: :activated?
 
-  prop_accessor :username, :password, :url, :project_key,
+  prop_accessor :username, :password, :url, :api_url, :project_key,
                 :jira_issue_transition_id, :title, :description
 
   before_update :reset_password
@@ -25,20 +26,18 @@ class JiraService < IssueTrackerService
     super do
       self.properties = {
         title: issues_tracker['title'],
-        url: issues_tracker['url']
+        url: issues_tracker['url'],
+        api_url: issues_tracker['api_url']
       }
     end
   end
 
   def reset_password
-    # don't reset the password if a new one is provided
-    if url_changed? && !password_touched?
-      self.password = nil
-    end
+    self.password = nil if reset_password?
   end
 
   def options
-    url = URI.parse(self.url)
+    url = URI.parse(client_url)
 
     {
       username: self.username,
@@ -87,7 +86,8 @@ class JiraService < IssueTrackerService
 
   def fields
     [
-      { type: 'text', name: 'url', title: 'URL', placeholder: 'https://jira.example.com' },
+      { type: 'text', name: 'url', title: 'Web URL', placeholder: 'https://jira.example.com' },
+      { type: 'text', name: 'api_url', title: 'JIRA API URL', placeholder: 'If different from Web URL' },
       { type: 'text', name: 'project_key', placeholder: 'Project Key' },
       { type: 'text', name: 'username', placeholder: '' },
       { type: 'password', name: 'password', placeholder: '' },
@@ -149,7 +149,7 @@ class JiraService < IssueTrackerService
     data = {
       user: {
         name: author.name,
-        url: resource_url(user_path(author)),
+        url: resource_url(user_path(author))
       },
       project: {
         name: self.project.path_with_namespace,
@@ -186,7 +186,7 @@ class JiraService < IssueTrackerService
   end
 
   def test_settings
-    return unless url.present?
+    return unless client_url.present?
     # Test settings by getting the project
     jira_request { jira_project.present? }
   end
@@ -236,20 +236,29 @@ class JiraService < IssueTrackerService
   end
 
   def send_message(issue, message, remote_link_props)
-    return unless url.present?
+    return unless client_url.present?
 
     jira_request do
-      if issue.comments.build.save!(body: message)
-        remote_link = issue.remotelink.build
+      remote_link = find_remote_link(issue, remote_link_props[:object][:url])
+      if remote_link
         remote_link.save!(remote_link_props)
-        result_message = "#{self.class.name} SUCCESS: Successfully posted to #{url}."
+      elsif issue.comments.build.save!(body: message)
+        new_remote_link = issue.remotelink.build
+        new_remote_link.save!(remote_link_props)
       end
 
+      result_message = "#{self.class.name} SUCCESS: Successfully posted to #{client_url}."
       Rails.logger.info(result_message)
       result_message
     end
   end
 
+  def find_remote_link(issue, url)
+    links = jira_request { issue.remotelink.all }
+
+    links.find { |link| link.object["url"] == url }
+  end
+
   def build_remote_link_props(url:, title:, resolved: false)
     status = {
       resolved: resolved
@@ -294,8 +303,21 @@ class JiraService < IssueTrackerService
   def jira_request
     yield
 
-  rescue Timeout::Error, Errno::EINVAL, Errno::ECONNRESET, Errno::ECONNREFUSED, URI::InvalidURIError, JIRA::HTTPError => e
-    Rails.logger.info "#{self.class.name} Send message ERROR: #{url} - #{e.message}"
+  rescue Timeout::Error, Errno::EINVAL, Errno::ECONNRESET, Errno::ECONNREFUSED, URI::InvalidURIError, JIRA::HTTPError, OpenSSL::SSL::SSLError => e
+    Rails.logger.info "#{self.class.name} Send message ERROR: #{client_url} - #{e.message}"
     nil
   end
+
+  def client_url
+    api_url.present? ? api_url : url
+  end
+
+  def reset_password?
+    # don't reset the password if a new one is provided
+    return false if password_touched?
+    return true if api_url_changed?
+    return false if api_url.present?
+
+    url_changed?
+  end
 end
diff --git a/app/models/project_services/kubernetes_service.rb b/app/models/project_services/kubernetes_service.rb
index 9c56518c991..8977a7cdafe 100644
--- a/app/models/project_services/kubernetes_service.rb
+++ b/app/models/project_services/kubernetes_service.rb
@@ -73,10 +73,18 @@ class KubernetesService < DeploymentService
         { type: 'textarea',
           name: 'ca_pem',
           title: 'Custom CA bundle',
-          placeholder: 'Certificate Authority bundle (PEM format)' },
+          placeholder: 'Certificate Authority bundle (PEM format)' }
     ]
   end
 
+  def actual_namespace
+    if namespace.present?
+      namespace
+    else
+      default_namespace
+    end
+  end
+
   # Check we can connect to the Kubernetes API
   def test(*args)
     kubeclient = build_kubeclient!
@@ -91,7 +99,7 @@ class KubernetesService < DeploymentService
     variables = [
       { key: 'KUBE_URL', value: api_url, public: true },
       { key: 'KUBE_TOKEN', value: token, public: false },
-      { key: 'KUBE_NAMESPACE', value: namespace_variable, public: true }
+      { key: 'KUBE_NAMESPACE', value: actual_namespace, public: true }
     ]
 
     if ca_pem.present?
@@ -110,7 +118,7 @@ class KubernetesService < DeploymentService
     with_reactive_cache do |data|
       pods = data.fetch(:pods, nil)
       filter_pods(pods, app: environment.slug).
-        flat_map { |pod| terminals_for_pod(api_url, namespace, pod) }.
+        flat_map { |pod| terminals_for_pod(api_url, actual_namespace, pod) }.
         each { |terminal| add_terminal_auth(terminal, terminal_auth) }
     end
   end
@@ -124,7 +132,7 @@ class KubernetesService < DeploymentService
 
     # Store as hashes, rather than as third-party types
     pods = begin
-      kubeclient.get_pods(namespace: namespace).as_json
+      kubeclient.get_pods(namespace: actual_namespace).as_json
     rescue KubeException => err
       raise err unless err.error_code == 404
       []
@@ -142,20 +150,12 @@ class KubernetesService < DeploymentService
     default_namespace || TEMPLATE_PLACEHOLDER
   end
 
-  def namespace_variable
-    if namespace.present?
-      namespace
-    else
-      default_namespace
-    end
-  end
-
   def default_namespace
     "#{project.path}-#{project.id}" if project.present?
   end
 
   def build_kubeclient!(api_path: 'api', api_version: 'v1')
-    raise "Incomplete settings" unless api_url && namespace && token
+    raise "Incomplete settings" unless api_url && actual_namespace && token
 
     ::Kubeclient::Client.new(
       join_api_url(api_path),
diff --git a/app/models/project_services/microsoft_teams_service.rb b/app/models/project_services/microsoft_teams_service.rb
index 9b218fd81b4..2facff53e26 100644
--- a/app/models/project_services/microsoft_teams_service.rb
+++ b/app/models/project_services/microsoft_teams_service.rb
@@ -35,7 +35,7 @@ class MicrosoftTeamsService < ChatNotificationService
     [
       { type: 'text', name: 'webhook', placeholder: "e.g. #{webhook_placeholder}" },
       { type: 'checkbox', name: 'notify_only_broken_pipelines' },
-      { type: 'checkbox', name: 'notify_only_default_branch' },
+      { type: 'checkbox', name: 'notify_only_default_branch' }
     ]
   end
 
diff --git a/app/models/project_services/mock_ci_service.rb b/app/models/project_services/mock_ci_service.rb
index a8d581a1f67..546b6e0a498 100644
--- a/app/models/project_services/mock_ci_service.rb
+++ b/app/models/project_services/mock_ci_service.rb
@@ -21,7 +21,7 @@ class MockCiService < CiService
     [
       { type: 'text',
         name: 'mock_service_url',
-        placeholder: 'http://localhost:4004' },
+        placeholder: 'http://localhost:4004' }
     ]
   end
 
diff --git a/app/models/project_services/monitoring_service.rb b/app/models/project_services/monitoring_service.rb
index ea585721e8f..ee9cd78327a 100644
--- a/app/models/project_services/monitoring_service.rb
+++ b/app/models/project_services/monitoring_service.rb
@@ -9,8 +9,11 @@ class MonitoringService < Service
     %w()
   end
 
-  # Environments have a number of metrics
-  def metrics(environment)
+  def environment_metrics(environment)
+    raise NotImplementedError
+  end
+
+  def deployment_metrics(deployment)
     raise NotImplementedError
   end
 end
diff --git a/app/models/project_services/pipelines_email_service.rb b/app/models/project_services/pipelines_email_service.rb
index ac617f409d9..f824171ad09 100644
--- a/app/models/project_services/pipelines_email_service.rb
+++ b/app/models/project_services/pipelines_email_service.rb
@@ -55,7 +55,7 @@ class PipelinesEmailService < Service
         name: 'recipients',
         placeholder: 'Emails separated by comma' },
       { type: 'checkbox',
-        name: 'notify_only_broken_pipelines' },
+        name: 'notify_only_broken_pipelines' }
     ]
   end
 
diff --git a/app/models/project_services/prometheus_service.rb b/app/models/project_services/prometheus_service.rb
index 6854d2243d7..ec72cb6856d 100644
--- a/app/models/project_services/prometheus_service.rb
+++ b/app/models/project_services/prometheus_service.rb
@@ -1,7 +1,6 @@
 class PrometheusService < MonitoringService
-  include ReactiveCaching
+  include ReactiveService
 
-  self.reactive_cache_key = ->(service) { [service.class.model_name.singular, service.project_id] }
   self.reactive_cache_lease_timeout = 30.seconds
   self.reactive_cache_refresh_interval = 30.seconds
   self.reactive_cache_lifetime = 1.minute
@@ -64,37 +63,31 @@ class PrometheusService < MonitoringService
     { success: false, result: err }
   end
 
-  def metrics(environment)
-    with_reactive_cache(environment.slug) do |data|
-      data
-    end
+  def environment_metrics(environment)
+    with_reactive_cache(Gitlab::Prometheus::Queries::EnvironmentQuery.name, environment.id, &:itself)
+  end
+
+  def deployment_metrics(deployment)
+    metrics = with_reactive_cache(Gitlab::Prometheus::Queries::DeploymentQuery.name, deployment.id, &:itself)
+    metrics&.merge(deployment_time: created_at.to_i) || {}
   end
 
   # Cache metrics for specific environment
-  def calculate_reactive_cache(environment_slug)
+  def calculate_reactive_cache(query_class_name, *args)
     return unless active? && project && !project.pending_delete?
 
-    memory_query = %{(sum(container_memory_usage_bytes{container_name!="POD",environment="#{environment_slug}"}) / count(container_memory_usage_bytes{container_name!="POD",environment="#{environment_slug}"})) /1024/1024}
-    cpu_query = %{sum(rate(container_cpu_usage_seconds_total{container_name!="POD",environment="#{environment_slug}"}[2m])) / count(container_cpu_usage_seconds_total{container_name!="POD",environment="#{environment_slug}"}) * 100}
+    metrics = Kernel.const_get(query_class_name).new(client).query(*args)
 
     {
       success: true,
-      metrics: {
-        # Average Memory used in MB
-        memory_values: client.query_range(memory_query, start: 8.hours.ago),
-        memory_current: client.query(memory_query),
-        # Average CPU Utilization
-        cpu_values: client.query_range(cpu_query, start: 8.hours.ago),
-        cpu_current: client.query(cpu_query)
-      },
+      metrics: metrics,
       last_update: Time.now.utc
     }
-
   rescue Gitlab::PrometheusError => err
     { success: false, result: err.message }
   end
 
   def client
-    @prometheus ||= Gitlab::Prometheus.new(api_url: api_url)
+    @prometheus ||= Gitlab::PrometheusClient.new(api_url: api_url)
   end
 end
diff --git a/app/models/project_services/pushover_service.rb b/app/models/project_services/pushover_service.rb
index 3e618a8dbf1..fc29a5277bb 100644
--- a/app/models/project_services/pushover_service.rb
+++ b/app/models/project_services/pushover_service.rb
@@ -55,7 +55,7 @@ class PushoverService < Service
           ['Pushover Echo (long)', 'echo'],
           ['Up Down (long)', 'updown'],
           ['None (silent)', 'none']
-        ] },
+        ] }
     ]
   end
 
diff --git a/app/models/project_services/teamcity_service.rb b/app/models/project_services/teamcity_service.rb
index cbaffb8ce48..b16beb406b9 100644
--- a/app/models/project_services/teamcity_service.rb
+++ b/app/models/project_services/teamcity_service.rb
@@ -55,7 +55,7 @@ class TeamcityService < CiService
         placeholder: 'Build configuration ID' },
       { type: 'text', name: 'username',
         placeholder: 'A user with permissions to trigger a manual build' },
-      { type: 'password', name: 'password' },
+      { type: 'password', name: 'password' }
     ]
   end
 
@@ -78,7 +78,7 @@ class TeamcityService < CiService
 
     auth = {
       username: username,
-      password: password,
+      password: password
     }
 
     branch = Gitlab::Git.ref_name(data[:ref])
diff --git a/app/models/project_team.rb b/app/models/project_team.rb
index 543b9b293e0..e1cc56551ba 100644
--- a/app/models/project_team.rb
+++ b/app/models/project_team.rb
@@ -167,7 +167,7 @@ class ProjectTeam
       access = RequestStore.store[key]
     end
 
-    # Lookup only the IDs we need
+    # Look up only the IDs we need
     user_ids = user_ids - access.keys
 
     return access if user_ids.empty?
@@ -178,6 +178,13 @@ class ProjectTeam
       maximum(:access_level)
 
     access.merge!(users_access)
+
+    missing_user_ids = user_ids - users_access.keys
+
+    missing_user_ids.each do |user_id|
+      access[user_id] = Gitlab::Access::NO_ACCESS
+    end
+
     access
   end
 
diff --git a/app/models/project_wiki.rb b/app/models/project_wiki.rb
index 70eef359cdd..f38fbda7839 100644
--- a/app/models/project_wiki.rb
+++ b/app/models/project_wiki.rb
@@ -42,11 +42,8 @@ class ProjectWiki
     url_to_repo
   end
 
-  def http_url_to_repo(user = nil)
-    url = "#{Gitlab.config.gitlab.url}/#{path_with_namespace}.git"
-    credentials = Gitlab::UrlSanitizer.http_credentials_for_user(user)
-
-    Gitlab::UrlSanitizer.new(url, credentials: credentials).full_url
+  def http_url_to_repo
+    "#{Gitlab.config.gitlab.url}/#{path_with_namespace}.git"
   end
 
   def wiki_base_path
@@ -183,6 +180,6 @@ class ProjectWiki
   end
 
   def update_project_activity
-    @project.touch(:last_activity_at)
+    @project.touch(:last_activity_at, :last_repository_updated_at)
   end
 end
diff --git a/app/models/protected_branch/merge_access_level.rb b/app/models/protected_branch/merge_access_level.rb
index 771e3376613..e8d35ac326f 100644
--- a/app/models/protected_branch/merge_access_level.rb
+++ b/app/models/protected_branch/merge_access_level.rb
@@ -1,13 +1,3 @@
 class ProtectedBranch::MergeAccessLevel < ActiveRecord::Base
   include ProtectedBranchAccess
-
-  validates :access_level, presence: true, inclusion: { in: [Gitlab::Access::MASTER,
-                                                             Gitlab::Access::DEVELOPER] }
-
-  def self.human_access_levels
-    {
-      Gitlab::Access::MASTER => "Masters",
-      Gitlab::Access::DEVELOPER => "Developers + Masters"
-    }.with_indifferent_access
-  end
 end
diff --git a/app/models/protected_branch/push_access_level.rb b/app/models/protected_branch/push_access_level.rb
index 14610cb42b7..7a2e9e5ec5d 100644
--- a/app/models/protected_branch/push_access_level.rb
+++ b/app/models/protected_branch/push_access_level.rb
@@ -1,21 +1,3 @@
 class ProtectedBranch::PushAccessLevel < ActiveRecord::Base
   include ProtectedBranchAccess
-
-  validates :access_level, presence: true, inclusion: { in: [Gitlab::Access::MASTER,
-                                                             Gitlab::Access::DEVELOPER,
-                                                             Gitlab::Access::NO_ACCESS] }
-
-  def self.human_access_levels
-    {
-      Gitlab::Access::MASTER => "Masters",
-      Gitlab::Access::DEVELOPER => "Developers + Masters",
-      Gitlab::Access::NO_ACCESS => "No one"
-    }.with_indifferent_access
-  end
-
-  def check_access(user)
-    return false if access_level == Gitlab::Access::NO_ACCESS
-
-    super
-  end
 end
diff --git a/app/models/readme_blob.rb b/app/models/readme_blob.rb
new file mode 100644
index 00000000000..1863a08f1de
--- /dev/null
+++ b/app/models/readme_blob.rb
@@ -0,0 +1,13 @@
+class ReadmeBlob < SimpleDelegator
+  attr_reader :repository
+
+  def initialize(blob, repository)
+    @repository = repository
+
+    super(blob)
+  end
+
+  def rendered_markup
+    repository.rendered_readme
+  end
+end
diff --git a/app/models/redirect_route.rb b/app/models/redirect_route.rb
new file mode 100644
index 00000000000..99812bcde53
--- /dev/null
+++ b/app/models/redirect_route.rb
@@ -0,0 +1,12 @@
+class RedirectRoute < ActiveRecord::Base
+  belongs_to :source, polymorphic: true
+
+  validates :source, presence: true
+
+  validates :path,
+    length: { within: 1..255 },
+    presence: true,
+    uniqueness: { case_sensitive: false }
+
+  scope :matching_path_and_descendants, -> (path) { where('redirect_routes.path = ? OR redirect_routes.path LIKE ?', path, "#{sanitize_sql_like(path)}/%") }
+end
diff --git a/app/models/repository.rb b/app/models/repository.rb
index 0c797dd5814..07e0b3bae4f 100644
--- a/app/models/repository.rb
+++ b/app/models/repository.rb
@@ -30,7 +30,7 @@ class Repository
   METHOD_CACHES_FOR_FILE_TYPES = {
     readme: :rendered_readme,
     changelog: :changelog,
-    license: %i(license_blob license_key),
+    license: %i(license_blob license_key license),
     contributing: :contribution_guide,
     gitignore: :gitignore,
     koding: :koding_yml,
@@ -42,13 +42,13 @@ class Repository
   # variable.
   #
   # This only works for methods that do not take any arguments.
-  def self.cache_method(name, fallback: nil)
+  def self.cache_method(name, fallback: nil, memoize_only: false)
     original = :"_uncached_#{name}"
 
     alias_method(original, name)
 
     define_method(name) do
-      cache_method_output(name, fallback: fallback) { __send__(original) }
+      cache_method_output(name, fallback: fallback, memoize_only: memoize_only) { __send__(original) }
     end
   end
 
@@ -517,8 +517,8 @@ class Repository
   cache_method :avatar
 
   def readme
-    if head = tree(:head)
-      head.readme
+    if readme = tree(:head)&.readme
+      ReadmeBlob.new(readme, self)
     end
   end
 
@@ -549,6 +549,13 @@ class Repository
   end
   cache_method :license_key
 
+  def license
+    return unless license_key
+
+    Licensee::License.new(license_key)
+  end
+  cache_method :license, memoize_only: true
+
   def gitignore
     file_on_head(:gitignore)
   end
@@ -642,22 +649,8 @@ class Repository
     "#{name}-#{highest_branch_id + 1}"
   end
 
-  # Remove archives older than 2 hours
   def branches_sorted_by(value)
-    case value
-    when 'name'
-      branches.sort_by(&:name)
-    when 'updated_desc'
-      branches.sort do |a, b|
-        commit(b.dereferenced_target).committed_date <=> commit(a.dereferenced_target).committed_date
-      end
-    when 'updated_asc'
-      branches.sort do |a, b|
-        commit(a.dereferenced_target).committed_date <=> commit(b.dereferenced_target).committed_date
-      end
-    else
-      branches
-    end
+    raw_repository.local_branches(sort_by: value)
   end
 
   def tags_sorted_by(value)
@@ -833,7 +826,7 @@ class Repository
 
       actual_options = options.merge(
         parents: [our_commit, their_commit],
-        tree: merge_index.write_tree(rugged),
+        tree: merge_index.write_tree(rugged)
       )
 
       commit_id = create_commit(actual_options)
@@ -1061,14 +1054,20 @@ class Repository
   #
   # key - The name of the key to cache the data in.
   # fallback - A value to fall back to in the event of a Git error.
-  def cache_method_output(key, fallback: nil, &block)
+  def cache_method_output(key, fallback: nil, memoize_only: false, &block)
     ivar = cache_instance_variable_name(key)
 
     if instance_variable_defined?(ivar)
       instance_variable_get(ivar)
     else
       begin
-        instance_variable_set(ivar, cache.fetch(key, &block))
+        value =
+          if memoize_only
+            yield
+          else
+            cache.fetch(key, &block)
+          end
+        instance_variable_set(ivar, value)
       rescue Rugged::ReferenceError, Gitlab::Git::Repository::NoRepository
         # if e.g. HEAD or the entire repository doesn't exist we want to
         # gracefully handle this and not cache anything.
@@ -1083,8 +1082,8 @@ class Repository
 
   def file_on_head(type)
     if head = tree(:head)
-      head.blobs.find do |file|
-        Gitlab::FileDetector.type_of(file.name) == type
+      head.blobs.find do |blob|
+        Gitlab::FileDetector.type_of(blob.path) == type
       end
     end
   end
@@ -1150,8 +1149,6 @@ class Repository
     @project.repository_storage_path
   end
 
-  delegate :gitaly_channel, :gitaly_repository, to: :raw_repository
-
   def initialize_raw_repository
     Gitlab::Git::Repository.new(project.repository_storage, path_with_namespace + '.git')
   end
diff --git a/app/models/route.rb b/app/models/route.rb
index 4b3efab5c3c..be77b8b51a5 100644
--- a/app/models/route.rb
+++ b/app/models/route.rb
@@ -8,29 +8,58 @@ class Route < ActiveRecord::Base
     presence: true,
     uniqueness: { case_sensitive: false }
 
+  after_create :delete_conflicting_redirects
+  after_update :delete_conflicting_redirects, if: :path_changed?
+  after_update :create_redirect_for_old_path
   after_update :rename_descendants
 
   scope :inside_path, -> (path) { where('routes.path LIKE ?', "#{sanitize_sql_like(path)}/%") }
 
   def rename_descendants
-    if path_changed? || name_changed?
-      descendants = self.class.inside_path(path_was)
+    return unless path_changed? || name_changed?
 
-      descendants.each do |route|
-        attributes = {}
+    descendant_routes = self.class.inside_path(path_was)
 
-        if path_changed? && route.path.present?
-          attributes[:path] = route.path.sub(path_was, path)
-        end
+    descendant_routes.each do |route|
+      attributes = {}
 
-        if name_changed? && name_was.present? && route.name.present?
-          attributes[:name] = route.name.sub(name_was, name)
-        end
+      if path_changed? && route.path.present?
+        attributes[:path] = route.path.sub(path_was, path)
+      end
 
-        # Note that update_columns skips validation and callbacks.
-        # We need this to avoid recursive call of rename_descendants method
-        route.update_columns(attributes) unless attributes.empty?
+      if name_changed? && name_was.present? && route.name.present?
+        attributes[:name] = route.name.sub(name_was, name)
+      end
+
+      if attributes.present?
+        old_path = route.path
+
+        # Callbacks must be run manually
+        route.update_columns(attributes.merge(updated_at: Time.now))
+
+        # We are not calling route.delete_conflicting_redirects here, in hopes
+        # of avoiding deadlocks. The parent (self, in this method) already
+        # called it, which deletes conflicts for all descendants.
+        route.create_redirect(old_path) if attributes[:path]
       end
     end
   end
+
+  def delete_conflicting_redirects
+    conflicting_redirects.delete_all
+  end
+
+  def conflicting_redirects
+    RedirectRoute.matching_path_and_descendants(path)
+  end
+
+  def create_redirect(path)
+    RedirectRoute.create(source: source, path: path)
+  end
+
+  private
+
+  def create_redirect_for_old_path
+    create_redirect(path_was) if path_changed?
+  end
 end
diff --git a/app/models/sent_notification.rb b/app/models/sent_notification.rb
index bfaf0eb2fae..eed3ca7e179 100644
--- a/app/models/sent_notification.rb
+++ b/app/models/sent_notification.rb
@@ -1,5 +1,5 @@
 class SentNotification < ActiveRecord::Base
-  serialize :position, Gitlab::Diff::Position
+  serialize :position, Gitlab::Diff::Position # rubocop:disable Cop/ActiverecordSerialize
 
   belongs_to :project
   belongs_to :noteable, polymorphic: true
@@ -39,7 +39,7 @@ class SentNotification < ActiveRecord::Base
 
         noteable_type: noteable.class.name,
         noteable_id: noteable_id,
-        commit_id: commit_id,
+        commit_id: commit_id
       )
 
       create(attrs)
diff --git a/app/models/service.rb b/app/models/service.rb
index c71a7d169ec..6a0b0a5c522 100644
--- a/app/models/service.rb
+++ b/app/models/service.rb
@@ -2,7 +2,7 @@
 # and implement a set of methods
 class Service < ActiveRecord::Base
   include Sortable
-  serialize :properties, JSON
+  serialize :properties, JSON # rubocop:disable Cop/ActiverecordSerialize
 
   default_value_for :active, false
   default_value_for :push_events, true
@@ -12,7 +12,7 @@ class Service < ActiveRecord::Base
   default_value_for :merge_requests_events, true
   default_value_for :tag_push_events, true
   default_value_for :note_events, true
-  default_value_for :build_events, true
+  default_value_for :job_events, true
   default_value_for :pipeline_events, true
   default_value_for :wiki_page_events, true
 
@@ -40,7 +40,7 @@ class Service < ActiveRecord::Base
   scope :confidential_issue_hooks, -> { where(confidential_issues_events: true, active: true) }
   scope :merge_request_hooks, -> { where(merge_requests_events: true, active: true) }
   scope :note_hooks, -> { where(note_events: true, active: true) }
-  scope :build_hooks, -> { where(build_events: true, active: true) }
+  scope :job_hooks, -> { where(job_events: true, active: true) }
   scope :pipeline_hooks, -> { where(pipeline_events: true, active: true) }
   scope :wiki_page_hooks, -> { where(wiki_page_events: true, active: true) }
   scope :external_issue_trackers, -> { issue_trackers.active.without_defaults }
diff --git a/app/models/snippet.rb b/app/models/snippet.rb
index d8860718cb5..882e2fa0594 100644
--- a/app/models/snippet.rb
+++ b/app/models/snippet.rb
@@ -12,6 +12,11 @@ class Snippet < ActiveRecord::Base
   cache_markdown_field :title, pipeline: :single_line
   cache_markdown_field :content
 
+  # Aliases to make application_helper#edited_time_ago_with_tooltip helper work properly with snippets.
+  # See https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10392/diffs#note_28719102
+  alias_attribute :last_edited_at, :updated_at
+  alias_attribute :last_edited_by, :updated_by
+
   # If file_name changes, it invalidates content
   alias_method :default_content_html_invalidator, :content_html_invalidated?
   def content_html_invalidated?
@@ -147,18 +152,5 @@ class Snippet < ActiveRecord::Base
 
       where(table[:content].matches(pattern))
     end
-
-    def accessible_to(user)
-      return are_public unless user.present?
-      return all if user.admin?
-
-      where(
-        'visibility_level IN (:visibility_levels)
-         OR author_id = :author_id
-         OR project_id IN (:project_ids)',
-         visibility_levels: [Snippet::PUBLIC, Snippet::INTERNAL],
-         author_id: user.id,
-         project_ids: user.authorized_projects.select(:id))
-    end
   end
 end
diff --git a/app/models/system_note_metadata.rb b/app/models/system_note_metadata.rb
index 1e6fc837a75..414c95f7705 100644
--- a/app/models/system_note_metadata.rb
+++ b/app/models/system_note_metadata.rb
@@ -1,7 +1,8 @@
 class SystemNoteMetadata < ActiveRecord::Base
   ICON_TYPES = %w[
-    commit merge confidential visible label assignee cross_reference
+    commit description merge confidential visible label assignee cross_reference
     title time_tracking branch milestone discussion task moved opened closed merged
+    outdated
   ].freeze
 
   validates :note, presence: true
diff --git a/app/models/tree.rb b/app/models/tree.rb
index fe148b0ec65..c89b8eca9be 100644
--- a/app/models/tree.rb
+++ b/app/models/tree.rb
@@ -40,10 +40,7 @@ class Tree
 
     readme_path = path == '/' ? readme_tree.name : File.join(path, readme_tree.name)
 
-    git_repo = repository.raw_repository
-    @readme = Gitlab::Git::Blob.find(git_repo, sha, readme_path)
-    @readme.load_all_data!(git_repo)
-    @readme
+    @readme = repository.blob_at(sha, readme_path)
   end
 
   def trees
diff --git a/app/models/user.rb b/app/models/user.rb
index 2b7ebe6c1a7..32048da6c6f 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -5,15 +5,20 @@ class User < ActiveRecord::Base
 
   include Gitlab::ConfigHelper
   include Gitlab::CurrentSettings
+  include Avatarable
   include Referable
   include Sortable
   include CaseSensitivity
   include TokenAuthenticatable
+  include IgnorableColumn
 
   DEFAULT_NOTIFICATION_LEVEL = :participating
 
+  ignore_column :authorized_projects_populated
+
   add_authentication_token_field :authentication_token
   add_authentication_token_field :incoming_email_token
+  add_authentication_token_field :rss_token
 
   default_value_for :admin, false
   default_value_for(:external) { current_application_settings.user_default_external }
@@ -23,6 +28,7 @@ class User < ActiveRecord::Base
   default_value_for :hide_no_password, false
   default_value_for :project_view, :files
   default_value_for :notified_of_own_activity, false
+  default_value_for :preferred_language, I18n.default_locale
 
   attr_encrypted :otp_secret,
     key:       Gitlab::Application.secrets.otp_key_base,
@@ -34,11 +40,22 @@ class User < ActiveRecord::Base
          otp_secret_encryption_key: Gitlab::Application.secrets.otp_key_base
 
   devise :two_factor_backupable, otp_number_of_backup_codes: 10
-  serialize :otp_backup_codes, JSON
+  serialize :otp_backup_codes, JSON # rubocop:disable Cop/ActiverecordSerialize
 
   devise :lockable, :recoverable, :rememberable, :trackable,
     :validatable, :omniauthable, :confirmable, :registerable
 
+  # Override Devise::Models::Trackable#update_tracked_fields!
+  # to limit database writes to at most once every hour
+  def update_tracked_fields!(request)
+    update_tracked_fields(request)
+
+    lease = Gitlab::ExclusiveLease.new("user_update_tracked_fields:#{id}", timeout: 1.hour.to_i)
+    return unless lease.try_obtain
+
+    save(validate: false)
+  end
+
   attr_accessor :force_random_password
 
   # Virtual attribute for authenticating by either username or email
@@ -99,6 +116,10 @@ class User < ActiveRecord::Base
   has_many :award_emoji,              dependent: :destroy
   has_many :triggers,                 dependent: :destroy, class_name: 'Ci::Trigger', foreign_key: :owner_id
 
+  has_many :issue_assignees
+  has_many :assigned_issues, class_name: "Issue", through: :issue_assignees, source: :issue
+  has_many :assigned_merge_requests,  dependent: :nullify, foreign_key: :assignee_id, class_name: "MergeRequest"
+
   # Issues that a user owns are expected to be moved to the "ghost" user before
   # the user is destroyed. If the user owns any issues during deletion, this
   # should be treated as an exceptional condition.
@@ -149,8 +170,13 @@ class User < ActiveRecord::Base
   enum dashboard: [:projects, :stars, :project_activity, :starred_project_activity, :groups, :todos]
 
   # User's Project preference
-  # Note: When adding an option, it MUST go on the end of the array.
-  enum project_view: [:readme, :activity, :files]
+  #
+  # Note: When adding an option, it MUST go on the end of the hash with a
+  # number higher than the current max. We cannot move options and/or change
+  # their numbers.
+  #
+  # We skip 0 because this was used by an option that has since been removed.
+  enum project_view: { activity: 1, files: 2 }
 
   alias_attribute :private_token, :authentication_token
 
@@ -195,7 +221,6 @@ class User < ActiveRecord::Base
   scope :blocked, -> { with_states(:blocked, :ldap_blocked) }
   scope :external, -> { where(external: true) }
   scope :active, -> { with_state(:active).non_internal }
-  scope :not_in_project, ->(project) { project.users.present? ? where("id not in (:ids)", ids: project.users.map(&:id) ) : all }
   scope :without_projects, -> { where('id NOT IN (SELECT DISTINCT(user_id) FROM members WHERE user_id IS NOT NULL AND requested_at IS NULL)') }
   scope :todo_authors, ->(user_id, state) { where(id: Todo.where(user_id: user_id, state: state).select(:author_id)) }
   scope :order_recent_sign_in, -> { reorder(Gitlab::Database.nulls_last_order('last_sign_in_at', 'DESC')) }
@@ -332,6 +357,11 @@ class User < ActiveRecord::Base
       find_by(id: Key.unscoped.select(:user_id).where(id: key_id))
     end
 
+    def find_by_full_path(path, follow_redirects: false)
+      namespace = Namespace.for_user.find_by_full_path(path, follow_redirects: follow_redirects)
+      namespace&.owner
+    end
+
     def reference_prefix
       '@'
     end
@@ -339,8 +369,9 @@ class User < ActiveRecord::Base
     # Pattern used to extract `@user` user references from text
     def reference_pattern
       %r{
+        (?<!\w)
         #{Regexp.escape(reference_prefix)}
-        (?<user>#{Gitlab::Regex::FULL_NAMESPACE_REGEX_STR})
+        (?<user>#{Gitlab::PathRegex::FULL_NAMESPACE_FORMAT_REGEX})
       }x
     end
 
@@ -354,6 +385,10 @@ class User < ActiveRecord::Base
     end
   end
 
+  def full_path
+    username
+  end
+
   def self.internal_attributes
     [:ghost]
   end
@@ -478,23 +513,16 @@ class User < ActiveRecord::Base
     Group.where("namespaces.id IN (#{union.to_sql})")
   end
 
-  def nested_groups
-    Group.member_descendants(id)
-  end
-
+  # Returns a relation of groups the user has access to, including their parent
+  # and child groups (recursively).
   def all_expanded_groups
-    Group.member_hierarchy(id)
+    Gitlab::GroupHierarchy.new(groups).all_groups
   end
 
   def expanded_groups_requiring_two_factor_authentication
     all_expanded_groups.where(require_two_factor_authentication: true)
   end
 
-  def nested_groups_projects
-    Project.joins(:namespace).where('namespaces.parent_id IS NOT NULL').
-      member_descendants(id)
-  end
-
   def refresh_authorized_projects
     Users::RefreshAuthorizedProjectsService.new(self).execute
   end
@@ -503,18 +531,15 @@ class User < ActiveRecord::Base
     project_authorizations.where(project_id: project_ids).delete_all
   end
 
-  def set_authorized_projects_column
-    unless authorized_projects_populated
-      update_column(:authorized_projects_populated, true)
-    end
-  end
-
   def authorized_projects(min_access_level = nil)
-    refresh_authorized_projects unless authorized_projects_populated
-
-    # We're overriding an association, so explicitly call super with no arguments or it would be passed as `force_reload` to the association
+    # We're overriding an association, so explicitly call super with no
+    # arguments or it would be passed as `force_reload` to the association
     projects = super()
-    projects = projects.where('project_authorizations.access_level >= ?', min_access_level) if min_access_level
+
+    if min_access_level
+      projects = projects.
+        where('project_authorizations.access_level >= ?', min_access_level)
+    end
 
     projects
   end
@@ -533,12 +558,6 @@ class User < ActiveRecord::Base
     authorized_projects(Gitlab::Access::REPORTER).where(id: projects)
   end
 
-  def viewable_starred_projects
-    starred_projects.where("projects.visibility_level IN (?) OR projects.id IN (?)",
-                           [Project::PUBLIC, Project::INTERNAL],
-                           authorized_projects.select(:project_id))
-  end
-
   def owned_projects
     @owned_projects ||=
       Project.where('namespace_id IN (?) OR namespace_id = ?',
@@ -759,12 +778,10 @@ class User < ActiveRecord::Base
     email.start_with?('temp-email-for-oauth')
   end
 
-  def avatar_url(size = nil, scale = 2)
-    if self[:avatar].present?
-      [gitlab_config.url, avatar.url].join
-    else
-      GravatarService.new.execute(email, size, scale)
-    end
+  def avatar_url(size: nil, scale: 2, **args)
+    # We use avatar_path instead of overriding avatar_url because of carrierwave.
+    # See https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/11001/diffs#note_28659864
+    avatar_path(args) || GravatarService.new.execute(email, size, scale, username: username)
   end
 
   def all_emails
@@ -889,13 +906,13 @@ class User < ActiveRecord::Base
   end
 
   def assigned_open_merge_requests_count(force: false)
-    Rails.cache.fetch(['users', id, 'assigned_open_merge_requests_count'], force: force) do
+    Rails.cache.fetch(['users', id, 'assigned_open_merge_requests_count'], force: force, expires_in: 20.minutes) do
       MergeRequestsFinder.new(self, assignee_id: self.id, state: 'opened').execute.count
     end
   end
 
   def assigned_open_issues_count(force: false)
-    Rails.cache.fetch(['users', id, 'assigned_open_issues_count'], force: force) do
+    Rails.cache.fetch(['users', id, 'assigned_open_issues_count'], force: force, expires_in: 20.minutes) do
       IssuesFinder.new(self, assignee_id: self.id, state: 'opened').execute.count
     end
   end
@@ -905,6 +922,19 @@ class User < ActiveRecord::Base
     assigned_open_issues_count(force: true)
   end
 
+  def invalidate_cache_counts
+    invalidate_issue_cache_counts
+    invalidate_merge_request_cache_counts
+  end
+
+  def invalidate_issue_cache_counts
+    Rails.cache.delete(['users', id, 'assigned_open_issues_count'])
+  end
+
+  def invalidate_merge_request_cache_counts
+    Rails.cache.delete(['users', id, 'assigned_open_merge_requests_count'])
+  end
+
   def todos_done_count(force: false)
     Rails.cache.fetch(['users', id, 'todos_done_count'], force: force) do
       TodosFinder.new(self, state: :done).execute.count
@@ -962,6 +992,13 @@ class User < ActiveRecord::Base
     save
   end
 
+  # each existing user needs to have an `rss_token`.
+  # we do this on read since migrating all existing users is not a feasible
+  # solution.
+  def rss_token
+    ensure_rss_token!
+  end
+
   protected
 
   # override, from Devise::Validatable
@@ -986,6 +1023,15 @@ class User < ActiveRecord::Base
     devise_mailer.send(notification, self, *args).deliver_later
   end
 
+  # This works around a bug in Devise 4.2.0 that erroneously causes a user to
+  # be considered active in MySQL specs due to a sub-second comparison
+  # issue. For more details, see: https://gitlab.com/gitlab-org/gitlab-ee/issues/2362#note_29004709
+  def confirmation_period_valid?
+    return false if self.class.allow_unconfirmed_access_for == 0.days
+
+    super
+  end
+
   def ensure_external_user_rights
     return unless external?
 
diff --git a/app/policies/base_policy.rb b/app/policies/base_policy.rb
index 8890409d056..623424c63e0 100644
--- a/app/policies/base_policy.rb
+++ b/app/policies/base_policy.rb
@@ -97,6 +97,10 @@ class BasePolicy
     rules
   end
 
+  def rules
+    raise NotImplementedError
+  end
+
   def delegate!(new_subject)
     @rule_set.merge(Ability.allowed(@user, new_subject))
   end
diff --git a/app/policies/ci/build_policy.rb b/app/policies/ci/build_policy.rb
index 8b25332b73c..2d7405dc240 100644
--- a/app/policies/ci/build_policy.rb
+++ b/app/policies/ci/build_policy.rb
@@ -1,5 +1,7 @@
 module Ci
   class BuildPolicy < CommitStatusPolicy
+    alias_method :build, :subject
+
     def rules
       super
 
@@ -8,6 +10,20 @@ module Ci
       %w[read create update admin].each do |rule|
         cannot! :"#{rule}_commit_status" unless can? :"#{rule}_build"
       end
+
+      if can?(:update_build) && protected_action?
+        cannot! :update_build
+      end
+    end
+
+    private
+
+    def protected_action?
+      return false unless build.action?
+
+      !::Gitlab::UserAccess
+        .new(user, project: build.project)
+        .can_merge_to_branch?(build.ref)
     end
   end
 end
diff --git a/app/policies/ci/pipeline_policy.rb b/app/policies/ci/pipeline_policy.rb
index 3d2eef1c50c..10aa2d3e72a 100644
--- a/app/policies/ci/pipeline_policy.rb
+++ b/app/policies/ci/pipeline_policy.rb
@@ -1,4 +1,7 @@
 module Ci
-  class PipelinePolicy < BuildPolicy
+  class PipelinePolicy < BasePolicy
+    def rules
+      delegate! @subject.project
+    end
   end
 end
diff --git a/app/policies/ci/pipeline_schedule_policy.rb b/app/policies/ci/pipeline_schedule_policy.rb
new file mode 100644
index 00000000000..1877e89bb23
--- /dev/null
+++ b/app/policies/ci/pipeline_schedule_policy.rb
@@ -0,0 +1,4 @@
+module Ci
+  class PipelineSchedulePolicy < PipelinePolicy
+  end
+end
diff --git a/app/policies/environment_policy.rb b/app/policies/environment_policy.rb
index f4219569161..2fa15e64562 100644
--- a/app/policies/environment_policy.rb
+++ b/app/policies/environment_policy.rb
@@ -1,5 +1,17 @@
 class EnvironmentPolicy < BasePolicy
+  alias_method :environment, :subject
+
   def rules
-    delegate! @subject.project
+    delegate! environment.project
+
+    if can?(:create_deployment) && environment.stop_action?
+      can! :stop_environment if can_play_stop_action?
+    end
+  end
+
+  private
+
+  def can_play_stop_action?
+    Ability.allowed?(user, :update_build, environment.stop_action)
   end
 end
diff --git a/app/policies/project_policy.rb b/app/policies/project_policy.rb
index 5baac9ebe4b..3959b895f44 100644
--- a/app/policies/project_policy.rb
+++ b/app/policies/project_policy.rb
@@ -46,6 +46,7 @@ class ProjectPolicy < BasePolicy
 
     if project.public_builds?
       can! :read_pipeline
+      can! :read_pipeline_schedule
       can! :read_build
     end
   end
@@ -63,6 +64,7 @@ class ProjectPolicy < BasePolicy
     can! :read_build
     can! :read_container_image
     can! :read_pipeline
+    can! :read_pipeline_schedule
     can! :read_environment
     can! :read_deployment
     can! :read_merge_request
@@ -83,6 +85,8 @@ class ProjectPolicy < BasePolicy
     can! :update_build
     can! :create_pipeline
     can! :update_pipeline
+    can! :create_pipeline_schedule
+    can! :update_pipeline_schedule
     can! :create_merge_request
     can! :create_wiki
     can! :push_code
@@ -94,7 +98,7 @@ class ProjectPolicy < BasePolicy
   end
 
   def master_access!
-    can! :push_code_to_protected_branches
+    can! :delete_protected_branch
     can! :update_project_snippet
     can! :update_environment
     can! :update_deployment
@@ -108,6 +112,7 @@ class ProjectPolicy < BasePolicy
     can! :admin_build
     can! :admin_container_image
     can! :admin_pipeline
+    can! :admin_pipeline_schedule
     can! :admin_environment
     can! :admin_deployment
     can! :admin_pages
@@ -120,6 +125,7 @@ class ProjectPolicy < BasePolicy
     can! :fork_project
     can! :read_commit_status
     can! :read_pipeline
+    can! :read_pipeline_schedule
     can! :read_container_image
     can! :build_download_code
     can! :build_read_container_image
@@ -167,7 +173,7 @@ class ProjectPolicy < BasePolicy
   def archived_access!
     cannot! :create_merge_request
     cannot! :push_code
-    cannot! :push_code_to_protected_branches
+    cannot! :delete_protected_branch
     cannot! :update_merge_request
     cannot! :admin_merge_request
   end
@@ -198,13 +204,14 @@ class ProjectPolicy < BasePolicy
     unless project.feature_available?(:builds, user) && repository_enabled
       cannot!(*named_abilities(:build))
       cannot!(*named_abilities(:pipeline))
+      cannot!(*named_abilities(:pipeline_schedule))
       cannot!(*named_abilities(:environment))
       cannot!(*named_abilities(:deployment))
     end
 
     unless repository_enabled
       cannot! :push_code
-      cannot! :push_code_to_protected_branches
+      cannot! :delete_protected_branch
       cannot! :download_code
       cannot! :fork_project
       cannot! :read_commit_status
@@ -277,6 +284,7 @@ class ProjectPolicy < BasePolicy
     can! :read_merge_request
     can! :read_note
     can! :read_pipeline
+    can! :read_pipeline_schedule
     can! :read_commit_status
     can! :read_container_image
     can! :download_code
diff --git a/app/policies/project_snippet_policy.rb b/app/policies/project_snippet_policy.rb
index 3a96836917e..cf8ff92617f 100644
--- a/app/policies/project_snippet_policy.rb
+++ b/app/policies/project_snippet_policy.rb
@@ -13,7 +13,7 @@ class ProjectSnippetPolicy < BasePolicy
       can! :read_project_snippet
     end
 
-    if @subject.private? && @subject.project.team.member?(@user)
+    if @subject.project.team.member?(@user)
       can! :read_project_snippet
     end
   end
diff --git a/app/presenters/merge_request_presenter.rb b/app/presenters/merge_request_presenter.rb
new file mode 100644
index 00000000000..0db9e31031c
--- /dev/null
+++ b/app/presenters/merge_request_presenter.rb
@@ -0,0 +1,172 @@
+class MergeRequestPresenter < Gitlab::View::Presenter::Delegated
+  include ActionView::Helpers::UrlHelper
+  include GitlabRoutingHelper
+  include MarkupHelper
+  include TreeHelper
+
+  presents :merge_request
+
+  def ci_status
+    if pipeline
+      status = pipeline.status
+      status = "success_with_warnings" if pipeline.success? && pipeline.has_warnings?
+
+      status || "preparing"
+    else
+      ci_service = source_project.try(:ci_service)
+      ci_service&.commit_status(diff_head_sha, source_branch)
+    end
+  end
+
+  def cancel_merge_when_pipeline_succeeds_path
+    if can_cancel_merge_when_pipeline_succeeds?(current_user)
+      cancel_merge_when_pipeline_succeeds_namespace_project_merge_request_path(
+        project.namespace,
+        project,
+        merge_request)
+    end
+  end
+
+  def create_issue_to_resolve_discussions_path
+    if can?(current_user, :create_issue, project) && project.issues_enabled?
+      new_namespace_project_issue_path(project.namespace,
+                                       project,
+                                       merge_request_to_resolve_discussions_of: iid)
+    end
+  end
+
+  def remove_wip_path
+    if can?(current_user, :update_merge_request, merge_request.project)
+      remove_wip_namespace_project_merge_request_path(project.namespace, project, merge_request)
+    end
+  end
+
+  def merge_path
+    if can_be_merged_by?(current_user)
+      merge_namespace_project_merge_request_path(project.namespace, project, merge_request)
+    end
+  end
+
+  def revert_in_fork_path
+    if user_can_fork_project? && can_be_reverted?(current_user)
+      continue_params = {
+        to: merge_request_path(merge_request),
+        notice: "#{edit_in_new_fork_notice} Try to cherry-pick this commit again.",
+        notice_now: edit_in_new_fork_notice_now
+      }
+
+      namespace_project_forks_path(merge_request.project.namespace, merge_request.project,
+                                   namespace_key: current_user.namespace.id,
+                                   continue: continue_params)
+    end
+  end
+
+  def cherry_pick_in_fork_path
+    if user_can_fork_project? && can_be_cherry_picked?
+      continue_params = {
+        to: merge_request_path(merge_request),
+        notice: "#{edit_in_new_fork_notice} Try to revert this commit again.",
+        notice_now: edit_in_new_fork_notice_now
+      }
+
+      namespace_project_forks_path(project.namespace, project,
+                                   namespace_key: current_user.namespace.id,
+                                   continue: continue_params)
+    end
+  end
+
+  def conflict_resolution_path
+    if conflicts.can_be_resolved_in_ui? && conflicts.can_be_resolved_by?(current_user)
+      conflicts_namespace_project_merge_request_path(project.namespace, project, merge_request)
+    end
+  end
+
+  def target_branch_commits_path
+    if target_branch_exists?
+      namespace_project_commits_path(project.namespace, project, target_branch)
+    end
+  end
+
+  def source_branch_path
+    if source_branch_exists?
+      namespace_project_branch_path(source_project.namespace, source_project, source_branch)
+    end
+  end
+
+  def source_branch_with_namespace_link
+    namespace = source_project_namespace
+    branch = source_branch
+
+    if source_branch_exists?
+      namespace = link_to(namespace, project_path(source_project))
+      branch = link_to(branch, namespace_project_commits_path(source_project.namespace, source_project, source_branch))
+    end
+
+    if for_fork?
+      namespace + ":" + branch
+    else
+      branch
+    end
+  end
+
+  def closing_issues_links
+    markdown issues_sentence(project, closing_issues), pipeline: :gfm, author: author, project: project
+  end
+
+  def mentioned_issues_links
+    mentioned_issues = issues_mentioned_but_not_closing(current_user)
+    markdown issues_sentence(project, mentioned_issues), pipeline: :gfm, author: author, project: project
+  end
+
+  def assign_to_closing_issues_link
+    issues = MergeRequests::AssignIssuesService.new(project,
+                                                    current_user,
+                                                    merge_request: merge_request,
+                                                    closes_issues: closing_issues
+                                                   ).assignable_issues
+    path = assign_related_issues_namespace_project_merge_request_path(project.namespace, project, merge_request)
+    if issues.present?
+      pluralize_this_issue = issues.count > 1 ? "these issues" : "this issue"
+      link_to "Assign yourself to #{pluralize_this_issue}", path, method: :post
+    end
+  end
+
+  def can_revert_on_current_merge_request?
+    user_can_collaborate_with_project? && can_be_reverted?(current_user)
+  end
+
+  def can_cherry_pick_on_current_merge_request?
+    user_can_collaborate_with_project? && can_be_cherry_picked?
+  end
+
+  private
+
+  def conflicts
+    @conflicts ||= MergeRequests::Conflicts::ListService.new(merge_request)
+  end
+
+  def closing_issues
+    @closing_issues ||= closes_issues(current_user)
+  end
+
+  def pipeline
+    @pipeline ||= head_pipeline
+  end
+
+  def issues_sentence(project, issues)
+    # Sorting based on the `#123` or `group/project#123` reference will sort
+    # local issues first.
+    issues.map do |issue|
+      issue.to_reference(project)
+    end.sort.to_sentence
+  end
+
+  def user_can_collaborate_with_project?
+    can?(current_user, :push_code, project) ||
+      (current_user && current_user.already_forked?(project))
+  end
+
+  def user_can_fork_project?
+    can?(current_user, :fork_project, project)
+  end
+end
diff --git a/app/presenters/projects/settings/deploy_keys_presenter.rb b/app/presenters/projects/settings/deploy_keys_presenter.rb
index 86ac513b3c0..070b0c35e36 100644
--- a/app/presenters/projects/settings/deploy_keys_presenter.rb
+++ b/app/presenters/projects/settings/deploy_keys_presenter.rb
@@ -48,6 +48,17 @@ module Projects
         available_public_keys.any?
       end
 
+      def as_json
+        serializer = DeployKeySerializer.new
+        opts = { user: current_user }
+
+        {
+          enabled_keys: serializer.represent(enabled_keys, opts),
+          available_project_keys: serializer.represent(available_project_keys, opts),
+          public_keys: serializer.represent(available_public_keys, opts)
+        }
+      end
+
       def to_partial_path
         'projects/deploy_keys/index'
       end
diff --git a/app/serializers/analytics_build_entity.rb b/app/serializers/analytics_build_entity.rb
index a0db5b8f0f4..ad7ad020b03 100644
--- a/app/serializers/analytics_build_entity.rb
+++ b/app/serializers/analytics_build_entity.rb
@@ -25,7 +25,7 @@ class AnalyticsBuildEntity < Grape::Entity
   end
 
   expose :url do |build|
-    url_to(:namespace_project_build, build)
+    url_to(:namespace_project_job, build)
   end
 
   expose :commit_url do |build|
diff --git a/app/serializers/analytics_stage_entity.rb b/app/serializers/analytics_stage_entity.rb
index 69bf693de8d..564612202b5 100644
--- a/app/serializers/analytics_stage_entity.rb
+++ b/app/serializers/analytics_stage_entity.rb
@@ -2,6 +2,7 @@ class AnalyticsStageEntity < Grape::Entity
   include EntityDateHelper
 
   expose :title
+  expose :name
   expose :legend
   expose :description
 
diff --git a/app/serializers/analytics_summary_entity.rb b/app/serializers/analytics_summary_entity.rb
index 91803ec07f5..9c37afd53e1 100644
--- a/app/serializers/analytics_summary_entity.rb
+++ b/app/serializers/analytics_summary_entity.rb
@@ -1,7 +1,4 @@
 class AnalyticsSummaryEntity < Grape::Entity
   expose :value, safe: true
-
-  expose :title do |object|
-    object.title.pluralize(object.value)
-  end
+  expose :title
 end
diff --git a/app/serializers/base_serializer.rb b/app/serializers/base_serializer.rb
index 311ee9c96be..4e6c15f673b 100644
--- a/app/serializers/base_serializer.rb
+++ b/app/serializers/base_serializer.rb
@@ -3,8 +3,10 @@ class BaseSerializer
     @request = EntityRequest.new(parameters)
   end
 
-  def represent(resource, opts = {})
-    self.class.entity_class
+  def represent(resource, opts = {}, entity_class = nil)
+    entity_class = entity_class || self.class.entity_class
+
+    entity_class
       .represent(resource, opts.merge(request: @request))
       .as_json
   end
diff --git a/app/serializers/build_action_entity.rb b/app/serializers/build_action_entity.rb
index 184b4b7a681..301b718d060 100644
--- a/app/serializers/build_action_entity.rb
+++ b/app/serializers/build_action_entity.rb
@@ -6,11 +6,19 @@ class BuildActionEntity < Grape::Entity
   end
 
   expose :path do |build|
-    play_namespace_project_build_path(
+    play_namespace_project_job_path(
       build.project.namespace,
       build.project,
       build)
   end
 
   expose :playable?, as: :playable
+
+  private
+
+  alias_method :build, :object
+
+  def playable?
+    build.playable? && can?(request.current_user, :update_build, build)
+  end
 end
diff --git a/app/serializers/build_artifact_entity.rb b/app/serializers/build_artifact_entity.rb
index 8b643d8e783..dde17aa68b8 100644
--- a/app/serializers/build_artifact_entity.rb
+++ b/app/serializers/build_artifact_entity.rb
@@ -6,7 +6,7 @@ class BuildArtifactEntity < Grape::Entity
   end
 
   expose :path do |build|
-    download_namespace_project_build_artifacts_path(
+    download_namespace_project_job_artifacts_path(
       build.project.namespace,
       build.project,
       build)
diff --git a/app/serializers/build_entity.rb b/app/serializers/build_entity.rb
index b804d6d0e8a..05dd8270e92 100644
--- a/app/serializers/build_entity.rb
+++ b/app/serializers/build_entity.rb
@@ -5,15 +5,15 @@ class BuildEntity < Grape::Entity
   expose :name
 
   expose :build_path do |build|
-    path_to(:namespace_project_build, build)
+    path_to(:namespace_project_job, build)
   end
 
   expose :retry_path do |build|
-    path_to(:retry_namespace_project_build, build)
+    path_to(:retry_namespace_project_job, build)
   end
 
-  expose :play_path, if: ->(build, _) { build.playable? } do |build|
-    path_to(:play_namespace_project_build, build)
+  expose :play_path, if: -> (*) { playable? } do |build|
+    path_to(:play_namespace_project_job, build)
   end
 
   expose :playable?, as: :playable
@@ -25,11 +25,15 @@ class BuildEntity < Grape::Entity
 
   alias_method :build, :object
 
-  def path_to(route, build)
-    send("#{route}_path", build.project.namespace, build.project, build)
+  def playable?
+    build.playable? && can?(request.current_user, :update_build, build)
   end
 
   def detailed_status
-    build.detailed_status(request.user)
+    build.detailed_status(request.current_user)
+  end
+
+  def path_to(route, build)
+    send("#{route}_path", build.project.namespace, build.project, build)
   end
 end
diff --git a/app/serializers/deploy_key_entity.rb b/app/serializers/deploy_key_entity.rb
new file mode 100644
index 00000000000..d75a83d0fa5
--- /dev/null
+++ b/app/serializers/deploy_key_entity.rb
@@ -0,0 +1,14 @@
+class DeployKeyEntity < Grape::Entity
+  expose :id
+  expose :user_id
+  expose :title
+  expose :fingerprint
+  expose :can_push
+  expose :destroyed_when_orphaned?, as: :destroyed_when_orphaned
+  expose :almost_orphaned?, as: :almost_orphaned
+  expose :created_at
+  expose :updated_at
+  expose :projects, using: ProjectEntity do |deploy_key|
+    deploy_key.projects.select { |project| options[:user].can?(:read_project, project) }
+  end
+end
diff --git a/app/serializers/deploy_key_serializer.rb b/app/serializers/deploy_key_serializer.rb
new file mode 100644
index 00000000000..8f849eb88b7
--- /dev/null
+++ b/app/serializers/deploy_key_serializer.rb
@@ -0,0 +1,3 @@
+class DeployKeySerializer < BaseSerializer
+  entity DeployKeyEntity
+end
diff --git a/app/serializers/environment_entity.rb b/app/serializers/environment_entity.rb
index 4ff15a78115..4e8a3c67b21 100644
--- a/app/serializers/environment_entity.rb
+++ b/app/serializers/environment_entity.rb
@@ -31,7 +31,7 @@ class EnvironmentEntity < Grape::Entity
   end
 
   expose :terminal_path, if: ->(environment, _) { environment.has_terminals? } do |environment|
-    can?(request.user, :admin_environment, environment.project) &&
+    can?(request.current_user, :admin_environment, environment.project) &&
       terminal_namespace_project_environment_path(
         environment.project.namespace,
         environment.project,
diff --git a/app/serializers/event_entity.rb b/app/serializers/event_entity.rb
new file mode 100644
index 00000000000..935d67a4f37
--- /dev/null
+++ b/app/serializers/event_entity.rb
@@ -0,0 +1,4 @@
+class EventEntity < Grape::Entity
+  expose :author, using: UserEntity
+  expose :updated_at
+end
diff --git a/app/serializers/issuable_entity.rb b/app/serializers/issuable_entity.rb
index 29aecb50849..65b204d4dd2 100644
--- a/app/serializers/issuable_entity.rb
+++ b/app/serializers/issuable_entity.rb
@@ -1,7 +1,6 @@
 class IssuableEntity < Grape::Entity
   expose :id
   expose :iid
-  expose :assignee_id
   expose :author_id
   expose :description
   expose :lock_version
diff --git a/app/serializers/issue_entity.rb b/app/serializers/issue_entity.rb
index 6429159ebe1..35df95549b7 100644
--- a/app/serializers/issue_entity.rb
+++ b/app/serializers/issue_entity.rb
@@ -1,9 +1,16 @@
 class IssueEntity < IssuableEntity
+  include RequestAwareEntity
+
   expose :branch_name
   expose :confidential
+  expose :assignees, using: API::Entities::UserBasic
   expose :due_date
   expose :moved_to_id
   expose :project_id
   expose :milestone, using: API::Entities::Milestone
   expose :labels, using: LabelEntity
+
+  expose :web_url do |issue|
+    namespace_project_issue_path(issue.project.namespace, issue.project, issue)
+  end
 end
diff --git a/app/serializers/job_group_entity.rb b/app/serializers/job_group_entity.rb
new file mode 100644
index 00000000000..04487e59009
--- /dev/null
+++ b/app/serializers/job_group_entity.rb
@@ -0,0 +1,16 @@
+class JobGroupEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :name
+  expose :size
+  expose :detailed_status, as: :status, with: StatusEntity
+  expose :jobs, with: BuildEntity
+
+  private
+
+  alias_method :group, :object
+
+  def detailed_status
+    group.detailed_status(request.current_user)
+  end
+end
diff --git a/app/serializers/label_entity.rb b/app/serializers/label_entity.rb
index 304fd9de08f..ad565654342 100644
--- a/app/serializers/label_entity.rb
+++ b/app/serializers/label_entity.rb
@@ -6,6 +6,7 @@ class LabelEntity < Grape::Entity
   expose :group_id
   expose :project_id
   expose :template
+  expose :text_color
   expose :created_at
   expose :updated_at
 end
diff --git a/app/serializers/label_serializer.rb b/app/serializers/label_serializer.rb
new file mode 100644
index 00000000000..ad6ba8c46c9
--- /dev/null
+++ b/app/serializers/label_serializer.rb
@@ -0,0 +1,7 @@
+class LabelSerializer < BaseSerializer
+  entity LabelEntity
+
+  def represent_appearance(resource)
+    represent(resource, { only: [:id, :title, :color, :text_color] })
+  end
+end
diff --git a/app/serializers/merge_request_basic_entity.rb b/app/serializers/merge_request_basic_entity.rb
new file mode 100644
index 00000000000..8461f158bb5
--- /dev/null
+++ b/app/serializers/merge_request_basic_entity.rb
@@ -0,0 +1,11 @@
+class MergeRequestBasicEntity < Grape::Entity
+  expose :assignee_id
+  expose :merge_status
+  expose :merge_error
+  expose :state
+  expose :source_branch_exists?, as: :source_branch_exists
+  expose :time_estimate
+  expose :total_time_spent
+  expose :human_time_estimate
+  expose :human_total_time_spent
+end
diff --git a/app/serializers/merge_request_basic_serializer.rb b/app/serializers/merge_request_basic_serializer.rb
new file mode 100644
index 00000000000..cc5c664c8fa
--- /dev/null
+++ b/app/serializers/merge_request_basic_serializer.rb
@@ -0,0 +1,3 @@
+class MergeRequestBasicSerializer < BaseSerializer
+  entity MergeRequestBasicEntity
+end
diff --git a/app/serializers/merge_request_entity.rb b/app/serializers/merge_request_entity.rb
index 5f80ab397a9..f7eb75395b5 100644
--- a/app/serializers/merge_request_entity.rb
+++ b/app/serializers/merge_request_entity.rb
@@ -1,4 +1,6 @@
 class MergeRequestEntity < IssuableEntity
+  include RequestAwareEntity
+
   expose :in_progress_merge_commit_sha
   expose :locked_at
   expose :merge_commit_sha
@@ -11,4 +13,177 @@ class MergeRequestEntity < IssuableEntity
   expose :source_project_id
   expose :target_branch
   expose :target_project_id
+
+  # Events
+  expose :merge_event, using: EventEntity
+  expose :closed_event, using: EventEntity
+
+  # User entities
+  expose :author, using: UserEntity
+  expose :merge_user, using: UserEntity
+
+  # Diff sha's
+  expose :diff_head_sha do |merge_request|
+    merge_request.diff_head_sha if merge_request.diff_head_commit
+  end
+
+  expose :merge_commit_sha
+  expose :merge_commit_message
+  expose :head_pipeline, with: PipelineEntity, as: :pipeline
+
+  # Booleans
+  expose :work_in_progress?, as: :work_in_progress
+  expose :source_branch_exists?, as: :source_branch_exists
+  expose :mergeable_discussions_state?, as: :mergeable_discussions_state
+  expose :branch_missing?, as: :branch_missing
+  expose :commits_count
+  expose :cannot_be_merged?, as: :has_conflicts
+  expose :can_be_merged?, as: :can_be_merged
+  expose :remove_source_branch?, as: :remove_source_branch
+
+  expose :project_archived do |merge_request|
+    merge_request.project.archived?
+  end
+
+  expose :only_allow_merge_if_pipeline_succeeds do |merge_request|
+    merge_request.project.only_allow_merge_if_pipeline_succeeds?
+  end
+
+  # CI related
+  expose :has_ci?, as: :has_ci
+  expose :ci_status do |merge_request|
+    presenter(merge_request).ci_status
+  end
+
+  expose :issues_links do
+    expose :assign_to_closing do |merge_request|
+      presenter(merge_request).assign_to_closing_issues_link
+    end
+
+    expose :closing do |merge_request|
+      presenter(merge_request).closing_issues_links
+    end
+
+    expose :mentioned_but_not_closing do |merge_request|
+      presenter(merge_request).mentioned_issues_links
+    end
+  end
+
+  expose :source_branch_with_namespace_link do |merge_request|
+    presenter(merge_request).source_branch_with_namespace_link
+  end
+
+  expose :source_branch_path do |merge_request|
+    presenter(merge_request).source_branch_path
+  end
+
+  expose :current_user do
+    expose :can_remove_source_branch do |merge_request|
+      merge_request.source_branch_exists? && merge_request.can_remove_source_branch?(current_user)
+    end
+
+    expose :can_revert_on_current_merge_request do |merge_request|
+      presenter(merge_request).can_revert_on_current_merge_request?
+    end
+
+    expose :can_cherry_pick_on_current_merge_request do |merge_request|
+      presenter(merge_request).can_cherry_pick_on_current_merge_request?
+    end
+  end
+
+  # Paths
+  #
+  expose :target_branch_commits_path do |merge_request|
+    presenter(merge_request).target_branch_commits_path
+  end
+
+  expose :new_blob_path do |merge_request|
+    if can?(current_user, :push_code, merge_request.project)
+      namespace_project_new_blob_path(merge_request.project.namespace,
+                                      merge_request.project,
+                                      merge_request.source_branch)
+    end
+  end
+
+  expose :conflict_resolution_path do |merge_request|
+    presenter(merge_request).conflict_resolution_path
+  end
+
+  expose :remove_wip_path do |merge_request|
+    presenter(merge_request).remove_wip_path
+  end
+
+  expose :cancel_merge_when_pipeline_succeeds_path do |merge_request|
+    presenter(merge_request).cancel_merge_when_pipeline_succeeds_path
+  end
+
+  expose :create_issue_to_resolve_discussions_path do |merge_request|
+    presenter(merge_request).create_issue_to_resolve_discussions_path
+  end
+
+  expose :merge_path do |merge_request|
+    presenter(merge_request).merge_path
+  end
+
+  expose :cherry_pick_in_fork_path do |merge_request|
+    presenter(merge_request).cherry_pick_in_fork_path
+  end
+
+  expose :revert_in_fork_path do |merge_request|
+    presenter(merge_request).revert_in_fork_path
+  end
+
+  expose :email_patches_path do |merge_request|
+    namespace_project_merge_request_path(merge_request.project.namespace,
+                                         merge_request.project,
+                                         merge_request,
+                                         format: :patch)
+  end
+
+  expose :plain_diff_path do |merge_request|
+    namespace_project_merge_request_path(merge_request.project.namespace,
+                                         merge_request.project,
+                                         merge_request,
+                                         format: :diff)
+  end
+
+  expose :status_path do |merge_request|
+    namespace_project_merge_request_path(merge_request.target_project.namespace,
+                                         merge_request.target_project,
+                                         merge_request,
+                                         format: :json)
+  end
+
+  expose :ci_environments_status_path do |merge_request|
+    ci_environments_status_namespace_project_merge_request_path(merge_request.project.namespace,
+                                                                merge_request.project,
+                                                                merge_request)
+  end
+
+  expose :merge_commit_message_with_description do |merge_request|
+    merge_request.merge_commit_message(include_description: true)
+  end
+
+  expose :diverged_commits_count do |merge_request|
+    if merge_request.open? && merge_request.diverged_from_target_branch?
+      merge_request.diverged_commits_count
+    else
+      0
+    end
+  end
+
+  expose :commit_change_content_path do |merge_request|
+    commit_change_content_namespace_project_merge_request_path(merge_request.project.namespace,
+                                                               merge_request.project,
+                                                               merge_request)
+  end
+
+  private
+
+  delegate :current_user, to: :request
+
+  def presenter(merge_request)
+    @presenters ||= {}
+    @presenters[merge_request] ||= MergeRequestPresenter.new(merge_request, current_user: current_user)
+  end
 end
diff --git a/app/serializers/merge_request_serializer.rb b/app/serializers/merge_request_serializer.rb
index aa6e00dfcb4..f67034ce47a 100644
--- a/app/serializers/merge_request_serializer.rb
+++ b/app/serializers/merge_request_serializer.rb
@@ -1,3 +1,9 @@
 class MergeRequestSerializer < BaseSerializer
-  entity MergeRequestEntity
+  # This overrided method takes care of which entity should be used
+  # to serialize the `merge_request` based on `basic` key in `opts` param.
+  # Hence, `entity` doesn't need to be declared on the class scope.
+  def represent(merge_request, opts = {})
+    entity = opts[:basic] ? MergeRequestBasicEntity : MergeRequestEntity
+    super(merge_request, opts, entity)
+  end
 end
diff --git a/app/serializers/pipeline_entity.rb b/app/serializers/pipeline_entity.rb
index ad8b4d43e8f..486f8c36fbd 100644
--- a/app/serializers/pipeline_entity.rb
+++ b/app/serializers/pipeline_entity.rb
@@ -3,6 +3,9 @@ class PipelineEntity < Grape::Entity
 
   expose :id
   expose :user, using: UserEntity
+  expose :active?, as: :active
+  expose :coverage
+  expose :source
 
   expose :path do |pipeline|
     namespace_project_pipeline_path(
@@ -22,7 +25,6 @@ class PipelineEntity < Grape::Entity
 
   expose :flags do
     expose :latest?, as: :latest
-    expose :triggered?, as: :triggered
     expose :stuck?, as: :stuck
     expose :has_yaml_errors?, as: :yaml_errors
     expose :can_retry?, as: :retryable
@@ -36,10 +38,7 @@ class PipelineEntity < Grape::Entity
 
     expose :path do |pipeline|
       if pipeline.ref
-        namespace_project_tree_path(
-          pipeline.project.namespace,
-          pipeline.project,
-          id: pipeline.ref)
+        project_ref_path(pipeline.project, pipeline.ref)
       end
     end
 
@@ -48,15 +47,15 @@ class PipelineEntity < Grape::Entity
   end
 
   expose :commit, using: CommitEntity
-  expose :yaml_errors, if: ->(pipeline, _) { pipeline.has_yaml_errors? }
+  expose :yaml_errors, if: -> (pipeline, _) { pipeline.has_yaml_errors? }
 
-  expose :retry_path, if: proc { can_retry? }  do |pipeline|
+  expose :retry_path, if: -> (*) { can_retry? }  do |pipeline|
     retry_namespace_project_pipeline_path(pipeline.project.namespace,
                                           pipeline.project,
                                           pipeline.id)
   end
 
-  expose :cancel_path, if: proc { can_cancel? } do |pipeline|
+  expose :cancel_path, if: -> (*) { can_cancel? } do |pipeline|
     cancel_namespace_project_pipeline_path(pipeline.project.namespace,
                                            pipeline.project,
                                            pipeline.id)
@@ -69,16 +68,16 @@ class PipelineEntity < Grape::Entity
   alias_method :pipeline, :object
 
   def can_retry?
-    can?(request.user, :update_pipeline, pipeline) &&
+    can?(request.current_user, :update_pipeline, pipeline) &&
       pipeline.retryable?
   end
 
   def can_cancel?
-    can?(request.user, :update_pipeline, pipeline) &&
+    can?(request.current_user, :update_pipeline, pipeline) &&
       pipeline.cancelable?
   end
 
   def detailed_status
-    pipeline.detailed_status(request.user)
+    pipeline.detailed_status(request.current_user)
   end
 end
diff --git a/app/serializers/pipeline_serializer.rb b/app/serializers/pipeline_serializer.rb
index e7a9df8ac4e..e37af63774c 100644
--- a/app/serializers/pipeline_serializer.rb
+++ b/app/serializers/pipeline_serializer.rb
@@ -37,4 +37,11 @@ class PipelineSerializer < BaseSerializer
     data = represent(resource, { only: [{ details: [:status] }] })
     data.dig(:details, :status) || {}
   end
+
+  def represent_stages(resource)
+    return {} unless resource.present?
+
+    data = represent(resource, { only: [{ details: [:stages] }] })
+    data.dig(:details, :stages) || []
+  end
 end
diff --git a/app/serializers/project_entity.rb b/app/serializers/project_entity.rb
new file mode 100644
index 00000000000..a471a7e6a88
--- /dev/null
+++ b/app/serializers/project_entity.rb
@@ -0,0 +1,14 @@
+class ProjectEntity < Grape::Entity
+  include RequestAwareEntity
+  
+  expose :id
+  expose :name
+
+  expose :full_path do |project|
+    namespace_project_path(project.namespace, project)
+  end
+
+  expose :full_name do |project|
+    project.full_name
+  end
+end
diff --git a/app/serializers/request_aware_entity.rb b/app/serializers/request_aware_entity.rb
index 3039014aaaa..d53fcfb8c1b 100644
--- a/app/serializers/request_aware_entity.rb
+++ b/app/serializers/request_aware_entity.rb
@@ -3,6 +3,7 @@ module RequestAwareEntity
 
   included do
     include Gitlab::Routing
+    include GitlabRoutingHelper
     include Gitlab::Allowable
   end
 
diff --git a/app/serializers/stage_entity.rb b/app/serializers/stage_entity.rb
index 7a047bdc712..cee0089056f 100644
--- a/app/serializers/stage_entity.rb
+++ b/app/serializers/stage_entity.rb
@@ -7,9 +7,11 @@ class StageEntity < Grape::Entity
     "#{stage.name}: #{detailed_status.label}"
   end
 
-  expose :detailed_status,
-    as: :status,
-    with: StatusEntity
+  expose :groups,
+    if: -> (_, opts) { opts[:grouped] },
+    with: JobGroupEntity
+
+  expose :detailed_status, as: :status, with: StatusEntity
 
   expose :path do |stage|
     namespace_project_pipeline_path(
@@ -33,6 +35,6 @@ class StageEntity < Grape::Entity
   alias_method :stage, :object
 
   def detailed_status
-    stage.detailed_status(request.user)
+    stage.detailed_status(request.current_user)
   end
 end
diff --git a/app/serializers/status_entity.rb b/app/serializers/status_entity.rb
index 188c3747f18..3e40ecf1c1c 100644
--- a/app/serializers/status_entity.rb
+++ b/app/serializers/status_entity.rb
@@ -12,4 +12,11 @@ class StatusEntity < Grape::Entity
 
     ActionController::Base.helpers.image_path(File.join(dir, "#{status.favicon}.ico"))
   end
+
+  expose :action, if: -> (status, _) { status.has_action? } do
+    expose :action_icon, as: :icon
+    expose :action_title, as: :title
+    expose :action_path, as: :path
+    expose :action_method, as: :method
+  end
 end
diff --git a/app/services/akismet_service.rb b/app/services/akismet_service.rb
index 76b9f1feda7..8e11a2a36a7 100644
--- a/app/services/akismet_service.rb
+++ b/app/services/akismet_service.rb
@@ -16,7 +16,7 @@ class AkismetService
       created_at: DateTime.now,
       author: owner.name,
       author_email: owner.email,
-      referrer: options[:referrer],
+      referrer: options[:referrer]
     }
 
     begin
diff --git a/app/services/audit_event_service.rb b/app/services/audit_event_service.rb
index 8a000585e89..5ad9a50687c 100644
--- a/app/services/audit_event_service.rb
+++ b/app/services/audit_event_service.rb
@@ -8,7 +8,7 @@ class AuditEventService
       with: @details[:with],
       target_id: @author.id,
       target_type: 'User',
-      target_details: @author.name,
+      target_details: @author.name
     }
 
     self
diff --git a/app/services/boards/issues/move_service.rb b/app/services/boards/issues/move_service.rb
index e73b1a4361a..ecabb2a48e4 100644
--- a/app/services/boards/issues/move_service.rb
+++ b/app/services/boards/issues/move_service.rb
@@ -38,7 +38,7 @@ module Boards
           attrs.merge!(
             add_label_ids: add_label_ids,
             remove_label_ids: remove_label_ids,
-            state_event: issue_state,
+            state_event: issue_state
           )
         end
 
diff --git a/app/services/ci/create_pipeline_schedule_service.rb b/app/services/ci/create_pipeline_schedule_service.rb
new file mode 100644
index 00000000000..cd40deb6187
--- /dev/null
+++ b/app/services/ci/create_pipeline_schedule_service.rb
@@ -0,0 +1,13 @@
+module Ci
+  class CreatePipelineScheduleService < BaseService
+    def execute
+      project.pipeline_schedules.create(pipeline_schedule_params)
+    end
+
+    private
+
+    def pipeline_schedule_params
+      params.merge(owner: current_user)
+    end
+  end
+end
diff --git a/app/services/ci/create_pipeline_service.rb b/app/services/ci/create_pipeline_service.rb
index 21350be5557..13baa63220d 100644
--- a/app/services/ci/create_pipeline_service.rb
+++ b/app/services/ci/create_pipeline_service.rb
@@ -2,15 +2,17 @@ module Ci
   class CreatePipelineService < BaseService
     attr_reader :pipeline
 
-    def execute(ignore_skip_ci: false, save_on_errors: true, trigger_request: nil)
+    def execute(source, ignore_skip_ci: false, save_on_errors: true, trigger_request: nil, schedule: nil)
       @pipeline = Ci::Pipeline.new(
+        source: source,
         project: project,
         ref: ref,
         sha: sha,
         before_sha: before_sha,
         tag: tag?,
         trigger_requests: Array(trigger_request),
-        user: current_user
+        user: current_user,
+        pipeline_schedule: schedule
       )
 
       unless project.builds_enabled?
@@ -46,7 +48,7 @@ module Ci
       end
 
       Ci::Pipeline.transaction do
-        pipeline.save
+        update_merge_requests_head_pipeline if pipeline.save
 
         Ci::CreatePipelineBuildsService
           .new(project, current_user)
@@ -60,6 +62,13 @@ module Ci
 
     private
 
+    def update_merge_requests_head_pipeline
+      return unless pipeline.latest?
+
+      MergeRequest.where(source_project: @pipeline.project, source_branch: @pipeline.ref).
+        update_all(head_pipeline_id: @pipeline.id)
+    end
+
     def skip_ci?
       return false unless pipeline.git_commit_message
       pipeline.git_commit_message =~ /\[(ci[ _-]skip|skip[ _-]ci)\]/i
diff --git a/app/services/ci/create_trigger_request_service.rb b/app/services/ci/create_trigger_request_service.rb
index dca5aa9f5d7..beb27a5a597 100644
--- a/app/services/ci/create_trigger_request_service.rb
+++ b/app/services/ci/create_trigger_request_service.rb
@@ -4,10 +4,9 @@ module Ci
       trigger_request = trigger.trigger_requests.create(variables: variables)
 
       pipeline = Ci::CreatePipelineService.new(project, trigger.owner, ref: ref).
-        execute(ignore_skip_ci: true, trigger_request: trigger_request)
-      if pipeline.persisted?
-        trigger_request
-      end
+        execute(:trigger, ignore_skip_ci: true, trigger_request: trigger_request)
+
+      trigger_request if pipeline.persisted?
     end
   end
 end
diff --git a/app/services/ci/play_build_service.rb b/app/services/ci/play_build_service.rb
new file mode 100644
index 00000000000..e24f48c2d16
--- /dev/null
+++ b/app/services/ci/play_build_service.rb
@@ -0,0 +1,17 @@
+module Ci
+  class PlayBuildService < ::BaseService
+    def execute(build)
+      unless can?(current_user, :update_build, build)
+        raise Gitlab::Access::AccessDeniedError
+      end
+
+      # Try to enqueue the build, otherwise create a duplicate.
+      #
+      if build.enqueue
+        build.tap { |action| action.update(user: current_user) }
+      else
+        Ci::Build.retry(build, current_user)
+      end
+    end
+  end
+end
diff --git a/app/services/ci/process_pipeline_service.rb b/app/services/ci/process_pipeline_service.rb
index 33edcd60944..55af193d717 100644
--- a/app/services/ci/process_pipeline_service.rb
+++ b/app/services/ci/process_pipeline_service.rb
@@ -5,6 +5,8 @@ module Ci
     def execute(pipeline)
       @pipeline = pipeline
 
+      update_retried
+
       new_builds =
         stage_indexes_of_created_builds.map do |index|
           process_stage(index)
@@ -50,7 +52,7 @@ module Ci
       when 'always'
         %w[success failed skipped]
       when 'manual'
-        %w[success]
+        %w[success skipped]
       else
         []
       end
@@ -71,5 +73,23 @@ module Ci
     def created_builds
       pipeline.builds.created
     end
+
+    # This method is for compatibility and data consistency and should be removed with 9.3 version of GitLab
+    # This replicates what is db/post_migrate/20170416103934_upate_retried_for_ci_build.rb
+    # and ensures that functionality will not be broken before migration is run
+    # this updates only when there are data that needs to be updated, there are two groups with no retried flag
+    def update_retried
+      # find the latest builds for each name
+      latest_statuses = pipeline.statuses.latest
+        .group(:name)
+        .having('count(*) > 1')
+        .pluck('max(id)', 'name')
+
+      # mark builds that are retried
+      pipeline.statuses.latest
+        .where(name: latest_statuses.map(&:second))
+        .where.not(id: latest_statuses.map(&:first))
+        .update_all(retried: true) if latest_statuses.any?
+    end
   end
 end
diff --git a/app/services/ci/retry_build_service.rb b/app/services/ci/retry_build_service.rb
index 89da05b72bb..f51e9fd1d54 100644
--- a/app/services/ci/retry_build_service.rb
+++ b/app/services/ci/retry_build_service.rb
@@ -6,7 +6,7 @@ module Ci
                          description tag_list].freeze
 
     def execute(build)
-      reprocess(build).tap do |new_build|
+      reprocess!(build).tap do |new_build|
         build.pipeline.mark_as_processable_after_stage(build.stage_idx)
 
         new_build.enqueue!
@@ -17,7 +17,7 @@ module Ci
       end
     end
 
-    def reprocess(build)
+    def reprocess!(build)
       unless can?(current_user, :update_build, build)
         raise Gitlab::Access::AccessDeniedError
       end
@@ -28,7 +28,14 @@ module Ci
 
       attributes.push([:user, current_user])
 
-      project.builds.create(Hash[attributes])
+      Ci::Build.transaction do
+        # mark all other builds of that name as retried
+        build.pipeline.builds.latest
+          .where(name: build.name)
+          .update_all(retried: true)
+
+        project.builds.create!(Hash[attributes])
+      end
     end
   end
 end
diff --git a/app/services/ci/retry_pipeline_service.rb b/app/services/ci/retry_pipeline_service.rb
index ecc6173a96a..c5a43869990 100644
--- a/app/services/ci/retry_pipeline_service.rb
+++ b/app/services/ci/retry_pipeline_service.rb
@@ -8,8 +8,10 @@ module Ci
       end
 
       pipeline.retryable_builds.find_each do |build|
+        next unless can?(current_user, :update_build, build)
+
         Ci::RetryBuildService.new(project, current_user)
-          .reprocess(build)
+          .reprocess!(build)
       end
 
       pipeline.builds.latest.skipped.find_each do |skipped|
diff --git a/app/services/ci/stop_environments_service.rb b/app/services/ci/stop_environments_service.rb
index 42c72aba7dd..43c9a065fcf 100644
--- a/app/services/ci/stop_environments_service.rb
+++ b/app/services/ci/stop_environments_service.rb
@@ -5,10 +5,11 @@ module Ci
     def execute(branch_name)
       @ref = branch_name
 
-      return unless has_ref?
+      return unless @ref.present?
 
       environments.each do |environment|
-        next unless can?(current_user, :create_deployment, project)
+        next unless environment.stop_action?
+        next unless can?(current_user, :stop_environment, environment)
 
         environment.stop_with_action!(current_user)
       end
@@ -16,13 +17,10 @@ module Ci
 
     private
 
-    def has_ref?
-      @ref.present?
-    end
-
     def environments
-      @environments ||=
-        EnvironmentsFinder.new(project, current_user, ref: @ref, recently_updated: true).execute
+      @environments ||= EnvironmentsFinder
+        .new(project, current_user, ref: @ref, recently_updated: true)
+        .execute
     end
   end
 end
diff --git a/app/services/delete_branch_service.rb b/app/services/delete_branch_service.rb
index 38a113caec7..64b3c0118fb 100644
--- a/app/services/delete_branch_service.rb
+++ b/app/services/delete_branch_service.rb
@@ -3,22 +3,14 @@ class DeleteBranchService < BaseService
     repository = project.repository
     branch = repository.find_branch(branch_name)
 
-    unless branch
-      return error('No such branch', 404)
-    end
-
-    if branch_name == repository.root_ref
-      return error('Cannot remove HEAD branch', 405)
-    end
-
-    if ProtectedBranch.protected?(project, branch_name)
-      return error('Protected branch cant be removed', 405)
-    end
-
     unless current_user.can?(:push_code, project)
       return error('You dont have push access to repo', 405)
     end
 
+    unless branch
+      return error('No such branch', 404)
+    end
+
     if repository.rm_branch(current_user, branch_name)
       success('Branch was removed')
     else
diff --git a/app/services/discussions/update_diff_position_service.rb b/app/services/discussions/update_diff_position_service.rb
new file mode 100644
index 00000000000..1ef8d9edbe1
--- /dev/null
+++ b/app/services/discussions/update_diff_position_service.rb
@@ -0,0 +1,41 @@
+module Discussions
+  class UpdateDiffPositionService < BaseService
+    def execute(discussion)
+      result = tracer.trace(discussion.position)
+      return unless result
+
+      position = result[:position]
+      outdated = result[:outdated]
+
+      discussion.notes.each do |note|
+        if outdated
+          note.change_position = position
+        else
+          note.position = position
+          note.change_position = nil
+        end
+      end
+
+      Note.transaction do
+        discussion.notes.each do |note|
+          Gitlab::Timeless.timeless(note, &:save)
+        end
+
+        if outdated && current_user
+          SystemNoteService.diff_discussion_outdated(discussion, project, current_user, position)
+        end
+      end
+    end
+
+    private
+
+    def tracer
+      @tracer ||= Gitlab::Diff::PositionTracer.new(
+        project: project,
+        old_diff_refs: params[:old_diff_refs],
+        new_diff_refs: params[:new_diff_refs],
+        paths: params[:paths]
+      )
+    end
+  end
+end
diff --git a/app/services/git_push_service.rb b/app/services/git_push_service.rb
index 45411c779cc..f080e6326a1 100644
--- a/app/services/git_push_service.rb
+++ b/app/services/git_push_service.rb
@@ -67,7 +67,7 @@ class GitPushService < BaseService
       paths = Set.new
 
       @push_commits.each do |commit|
-        commit.raw_diffs(deltas_only: true).each do |diff|
+        commit.raw_deltas.each do |diff|
           paths << diff.new_path
         end
       end
@@ -85,8 +85,10 @@ class GitPushService < BaseService
     default = is_default_branch?
 
     push_commits.last(PROCESS_COMMIT_LIMIT).each do |commit|
-      ProcessCommitWorker.
-        perform_async(project.id, current_user.id, commit.to_hash, default)
+      if commit.matches_cross_reference_regex?
+        ProcessCommitWorker.
+          perform_async(project.id, current_user.id, commit.to_hash, default)
+      end
     end
   end
 
@@ -104,7 +106,7 @@ class GitPushService < BaseService
     EventCreateService.new.push(@project, current_user, build_push_data)
     @project.execute_hooks(build_push_data.dup, :push_hooks)
     @project.execute_services(build_push_data.dup, :push_hooks)
-    Ci::CreatePipelineService.new(@project, current_user, build_push_data).execute
+    Ci::CreatePipelineService.new(@project, current_user, build_push_data).execute(:push)
 
     if push_remove_branch?
       AfterBranchDeleteService
diff --git a/app/services/git_tag_push_service.rb b/app/services/git_tag_push_service.rb
index 96432837481..7c424fba428 100644
--- a/app/services/git_tag_push_service.rb
+++ b/app/services/git_tag_push_service.rb
@@ -11,7 +11,7 @@ class GitTagPushService < BaseService
     SystemHooksService.new.execute_hooks(build_system_push_data.dup, :tag_push_hooks)
     project.execute_hooks(@push_data.dup, :tag_push_hooks)
     project.execute_services(@push_data.dup, :tag_push_hooks)
-    Ci::CreatePipelineService.new(project, current_user, @push_data).execute
+    Ci::CreatePipelineService.new(project, current_user, @push_data).execute(:push)
     ProjectCacheWorker.perform_async(project.id, [], [:commit_count, :repository_size])
 
     true
diff --git a/app/services/gravatar_service.rb b/app/services/gravatar_service.rb
index 433ecc2df32..e77e08aa380 100644
--- a/app/services/gravatar_service.rb
+++ b/app/services/gravatar_service.rb
@@ -1,15 +1,20 @@
 class GravatarService
   include Gitlab::CurrentSettings
 
-  def execute(email, size = nil, scale = 2)
-    if current_application_settings.gravatar_enabled? && email.present?
-      size = 40 if size.nil? || size <= 0
+  def execute(email, size = nil, scale = 2, username: nil)
+    return unless current_application_settings.gravatar_enabled?
 
-      sprintf gravatar_url,
-        hash: Digest::MD5.hexdigest(email.strip.downcase),
-        size: size * scale,
-        email: email.strip
-    end
+    identifier = email.presence || username.presence
+    return unless identifier
+
+    hash = Digest::MD5.hexdigest(identifier.strip.downcase)
+    size = 40 unless size && size > 0
+
+    sprintf gravatar_url,
+      hash: hash,
+      size: size * scale,
+      email: ERB::Util.url_encode(email&.strip || ''),
+      username: ERB::Util.url_encode(username&.strip || '')
   end
 
   def gitlab_config
diff --git a/app/services/issuable/bulk_update_service.rb b/app/services/issuable/bulk_update_service.rb
index 60891cbb255..5d42a89fced 100644
--- a/app/services/issuable/bulk_update_service.rb
+++ b/app/services/issuable/bulk_update_service.rb
@@ -7,10 +7,14 @@ module Issuable
       ids = params.delete(:issuable_ids).split(",")
       items = model_class.where(id: ids)
 
-      %i(state_event milestone_id assignee_id add_label_ids remove_label_ids subscription_event).each do |key|
+      permitted_attrs(type).each do |key|
         params.delete(key) unless params[key].present?
       end
 
+      if params[:assignee_ids] == [IssuableFinder::NONE.to_s]
+        params[:assignee_ids] = []
+      end
+
       items.each do |issuable|
         next unless can?(current_user, :"update_#{type}", issuable)
 
@@ -22,5 +26,17 @@ module Issuable
         success:  !items.count.zero?
       }
     end
+
+    private
+
+    def permitted_attrs(type)
+      attrs = %i(state_event milestone_id assignee_id assignee_ids add_label_ids remove_label_ids subscription_event)
+
+      if type == 'issue'
+        attrs.push(:assignee_ids)
+      else
+        attrs.push(:assignee_id)
+      end
+    end
   end
 end
diff --git a/app/services/issuable_base_service.rb b/app/services/issuable_base_service.rb
index b071a398481..e94ab3e64db 100644
--- a/app/services/issuable_base_service.rb
+++ b/app/services/issuable_base_service.rb
@@ -1,11 +1,6 @@
 class IssuableBaseService < BaseService
   private
 
-  def create_assignee_note(issuable)
-    SystemNoteService.change_assignee(
-      issuable, issuable.project, current_user, issuable.assignee)
-  end
-
   def create_milestone_note(issuable)
     SystemNoteService.change_milestone(
       issuable, issuable.project, current_user, issuable.milestone)
@@ -24,6 +19,10 @@ class IssuableBaseService < BaseService
       issuable, issuable.project, current_user, old_title)
   end
 
+  def create_description_change_note(issuable)
+    SystemNoteService.change_description(issuable, issuable.project, current_user)
+  end
+
   def create_branch_change_note(issuable, branch_type, old_branch, new_branch)
     SystemNoteService.change_branch(
       issuable, issuable.project, current_user, branch_type,
@@ -53,6 +52,7 @@ class IssuableBaseService < BaseService
       params.delete(:add_label_ids)
       params.delete(:remove_label_ids)
       params.delete(:label_ids)
+      params.delete(:assignee_ids)
       params.delete(:assignee_id)
       params.delete(:due_date)
     end
@@ -77,7 +77,7 @@ class IssuableBaseService < BaseService
   def assignee_can_read?(issuable, assignee_id)
     new_assignee = User.find_by_id(assignee_id)
 
-    return false unless new_assignee.present?
+    return false unless new_assignee
 
     ability_name = :"read_#{issuable.to_ability_name}"
     resource     = issuable.persisted? ? issuable : project
@@ -178,6 +178,7 @@ class IssuableBaseService < BaseService
       after_create(issuable)
       issuable.create_cross_references!(current_user)
       execute_hooks(issuable)
+      invalidate_cache_counts(issuable.assignees, issuable)
     end
 
     issuable
@@ -207,6 +208,7 @@ class IssuableBaseService < BaseService
     filter_params(issuable)
     old_labels = issuable.labels.to_a
     old_mentioned_users = issuable.mentioned_users.to_a
+    old_assignees = issuable.assignees.to_a
 
     label_ids = process_label_ids(params, existing_label_ids: issuable.label_ids)
     params[:label_ids] = label_ids if labels_changing?(issuable.label_ids, label_ids)
@@ -214,6 +216,10 @@ class IssuableBaseService < BaseService
     if issuable.changed? || params.present?
       issuable.assign_attributes(params.merge(updated_by: current_user))
 
+      if has_title_or_description_changed?(issuable)
+        issuable.assign_attributes(last_edited_at: Time.now, last_edited_by: current_user)
+      end
+
       before_update(issuable)
 
       if issuable.with_transaction_returning_status { issuable.save }
@@ -222,7 +228,18 @@ class IssuableBaseService < BaseService
           handle_common_system_notes(issuable, old_labels: old_labels)
         end
 
-        handle_changes(issuable, old_labels: old_labels, old_mentioned_users: old_mentioned_users)
+        handle_changes(
+          issuable,
+          old_labels: old_labels,
+          old_mentioned_users: old_mentioned_users,
+          old_assignees: old_assignees
+        )
+
+        if old_assignees != issuable.assignees
+          assignees = old_assignees + issuable.assignees.to_a
+          invalidate_cache_counts(assignees.compact, issuable)
+        end
+
         after_update(issuable)
         issuable.create_new_cross_references!(current_user)
         execute_hooks(issuable, 'update')
@@ -236,6 +253,10 @@ class IssuableBaseService < BaseService
     old_label_ids.sort != new_label_ids.sort
   end
 
+  def has_title_or_description_changed?(issuable)
+    issuable.title_changed? || issuable.description_changed?
+  end
+
   def change_state(issuable)
     case params.delete(:state_event)
     when 'reopen'
@@ -272,7 +293,7 @@ class IssuableBaseService < BaseService
     end
   end
 
-  def has_changes?(issuable, old_labels: [])
+  def has_changes?(issuable, old_labels: [], old_assignees: [])
     valid_attrs = [:title, :description, :assignee_id, :milestone_id, :target_branch]
 
     attrs_changed = valid_attrs.any? do |attr|
@@ -281,7 +302,9 @@ class IssuableBaseService < BaseService
 
     labels_changed = issuable.labels != old_labels
 
-    attrs_changed || labels_changed
+    assignees_changed = issuable.assignees != old_assignees
+
+    attrs_changed || labels_changed || assignees_changed
   end
 
   def handle_common_system_notes(issuable, old_labels: [])
@@ -289,6 +312,10 @@ class IssuableBaseService < BaseService
       create_title_change_note(issuable, issuable.previous_changes['title'].first)
     end
 
+    if issuable.previous_changes.include?('description')
+      create_description_change_note(issuable)
+    end
+
     if issuable.previous_changes.include?('description') && issuable.tasks?
       create_task_status_note(issuable)
     end
@@ -303,4 +330,10 @@ class IssuableBaseService < BaseService
 
     create_labels_note(issuable, old_labels) if issuable.labels != old_labels
   end
+
+  def invalidate_cache_counts(users, issuable)
+    users.each do |user|
+      user.public_send("invalidate_#{issuable.model_name.singular}_cache_counts")
+    end
+  end
 end
diff --git a/app/services/issues/base_service.rb b/app/services/issues/base_service.rb
index ee1b40db718..34199eb5d13 100644
--- a/app/services/issues/base_service.rb
+++ b/app/services/issues/base_service.rb
@@ -9,11 +9,33 @@ module Issues
 
     private
 
+    def create_assignee_note(issue, old_assignees)
+      SystemNoteService.change_issue_assignees(
+        issue, issue.project, current_user, old_assignees)
+    end
+
     def execute_hooks(issue, action = 'open')
       issue_data  = hook_data(issue, action)
       hooks_scope = issue.confidential? ? :confidential_issue_hooks : :issue_hooks
       issue.project.execute_hooks(issue_data, hooks_scope)
       issue.project.execute_services(issue_data, hooks_scope)
     end
+
+    def filter_assignee(issuable)
+      return if params[:assignee_ids].blank?
+
+      # The number of assignees is limited by one for GitLab CE
+      params[:assignee_ids] = params[:assignee_ids][0, 1]
+
+      assignee_ids = params[:assignee_ids].select { |assignee_id| assignee_can_read?(issuable, assignee_id) }
+
+      if params[:assignee_ids].map(&:to_s) == [IssuableFinder::NONE]
+        params[:assignee_ids] = []
+      elsif assignee_ids.any?
+        params[:assignee_ids] = assignee_ids
+      else
+        params.delete(:assignee_ids)
+      end
+    end
   end
 end
diff --git a/app/services/issues/close_service.rb b/app/services/issues/close_service.rb
index f1030912c68..85c616ca576 100644
--- a/app/services/issues/close_service.rb
+++ b/app/services/issues/close_service.rb
@@ -28,6 +28,7 @@ module Issues
         notification_service.close_issue(issue, current_user) if notifications
         todo_service.close_issue(issue, current_user)
         execute_hooks(issue, 'close')
+        invalidate_cache_counts(issue.assignees, issue)
       end
 
       issue
diff --git a/app/services/issues/reopen_service.rb b/app/services/issues/reopen_service.rb
index 40fbe354492..80ea6312768 100644
--- a/app/services/issues/reopen_service.rb
+++ b/app/services/issues/reopen_service.rb
@@ -8,6 +8,7 @@ module Issues
         create_note(issue)
         notification_service.reopen_issue(issue, current_user)
         execute_hooks(issue, 'reopen')
+        invalidate_cache_counts(issue.assignees, issue)
       end
 
       issue
diff --git a/app/services/issues/update_service.rb b/app/services/issues/update_service.rb
index b7fe5cb168b..cd9f9a4a16e 100644
--- a/app/services/issues/update_service.rb
+++ b/app/services/issues/update_service.rb
@@ -12,8 +12,12 @@ module Issues
       spam_check(issue, current_user)
     end
 
-    def handle_changes(issue, old_labels: [], old_mentioned_users: [])
-      if has_changes?(issue, old_labels: old_labels)
+    def handle_changes(issue, options)
+      old_labels = options[:old_labels] || []
+      old_mentioned_users = options[:old_mentioned_users] || []
+      old_assignees = options[:old_assignees] || []
+
+      if has_changes?(issue, old_labels: old_labels, old_assignees: old_assignees)
         todo_service.mark_pending_todos_as_done(issue, current_user)
       end
 
@@ -26,9 +30,9 @@ module Issues
         create_milestone_note(issue)
       end
 
-      if issue.previous_changes.include?('assignee_id')
-        create_assignee_note(issue)
-        notification_service.reassigned_issue(issue, current_user)
+      if issue.assignees != old_assignees
+        create_assignee_note(issue, old_assignees)
+        notification_service.reassigned_issue(issue, current_user, old_assignees)
         todo_service.reassigned_issue(issue, current_user)
       end
 
diff --git a/app/services/members/authorized_destroy_service.rb b/app/services/members/authorized_destroy_service.rb
index 1711be7211c..f846d72498f 100644
--- a/app/services/members/authorized_destroy_service.rb
+++ b/app/services/members/authorized_destroy_service.rb
@@ -10,7 +10,7 @@ module Members
       return false if member.is_a?(GroupMember) && member.source.last_owner?(member.user)
 
       Member.transaction do
-        unassign_issues_and_merge_requests(member)
+        unassign_issues_and_merge_requests(member) unless member.invite?
 
         member.destroy
       end
@@ -26,18 +26,35 @@ module Members
 
     def unassign_issues_and_merge_requests(member)
       if member.is_a?(GroupMember)
-        IssuesFinder.new(user, group_id: member.source_id, assignee_id: member.user_id).
-          execute.
-          update_all(assignee_id: nil)
+        issues = Issue.unscoped.select(1).
+                 joins(:project).
+                 where('issues.id = issue_assignees.issue_id AND projects.namespace_id = ?', member.source_id)
+
+        # DELETE FROM issue_assignees WHERE user_id = X AND EXISTS (...)
+        IssueAssignee.unscoped.
+          where('user_id = :user_id AND EXISTS (:sub)', user_id: member.user_id, sub: issues).
+          delete_all
+
         MergeRequestsFinder.new(user, group_id: member.source_id, assignee_id: member.user_id).
           execute.
           update_all(assignee_id: nil)
       else
         project = member.source
-        project.issues.opened.assigned_to(member.user).update_all(assignee_id: nil)
+
+        # SELECT 1 FROM issues WHERE issues.id = issue_assignees.issue_id AND issues.project_id = X
+        issues = Issue.unscoped.select(1).
+                 where('issues.id = issue_assignees.issue_id').
+                 where(project_id: project.id)
+
+        # DELETE FROM issue_assignees WHERE user_id = X AND EXISTS (...)
+        IssueAssignee.unscoped.
+          where('user_id = :user_id AND EXISTS (:sub)', user_id: member.user_id, sub: issues).
+          delete_all
+
         project.merge_requests.opened.assigned_to(member.user).update_all(assignee_id: nil)
-        member.user.update_cache_counts
       end
+
+      member.user.invalidate_cache_counts
     end
   end
 end
diff --git a/app/services/merge_requests/assign_issues_service.rb b/app/services/merge_requests/assign_issues_service.rb
index 066efa1acc3..8c6c4841020 100644
--- a/app/services/merge_requests/assign_issues_service.rb
+++ b/app/services/merge_requests/assign_issues_service.rb
@@ -4,7 +4,7 @@ module MergeRequests
       @assignable_issues ||= begin
         if current_user == merge_request.author
           closes_issues.select do |issue|
-            !issue.is_a?(ExternalIssue) && !issue.assignee_id? && can?(current_user, :admin_issue, issue)
+            !issue.is_a?(ExternalIssue) && !issue.assignees.present? && can?(current_user, :admin_issue, issue)
           end
         else
           []
@@ -14,7 +14,7 @@ module MergeRequests
 
     def execute
       assignable_issues.each do |issue|
-        Issues::UpdateService.new(issue.project, current_user, assignee_id: current_user.id).execute(issue)
+        Issues::UpdateService.new(issue.project, current_user, assignee_ids: [current_user.id]).execute(issue)
       end
 
       {
diff --git a/app/services/merge_requests/base_service.rb b/app/services/merge_requests/base_service.rb
index 582d5c47b66..3542a41ac83 100644
--- a/app/services/merge_requests/base_service.rb
+++ b/app/services/merge_requests/base_service.rb
@@ -38,6 +38,11 @@ module MergeRequests
 
     private
 
+    def create_assignee_note(merge_request)
+      SystemNoteService.change_assignee(
+        merge_request, merge_request.project, current_user, merge_request.assignee)
+    end
+
     # Returns all origin and fork merge requests from `@project` satisfying passed arguments.
     def merge_requests_for(source_branch, mr_states: [:opened, :reopened])
       MergeRequest
diff --git a/app/services/merge_requests/close_service.rb b/app/services/merge_requests/close_service.rb
index f2053bda83a..2ffc989ed71 100644
--- a/app/services/merge_requests/close_service.rb
+++ b/app/services/merge_requests/close_service.rb
@@ -13,6 +13,7 @@ module MergeRequests
         notification_service.close_mr(merge_request, current_user)
         todo_service.close_merge_request(merge_request, current_user)
         execute_hooks(merge_request, 'close')
+        invalidate_cache_counts(merge_request.assignees, merge_request)
       end
 
       merge_request
diff --git a/app/services/merge_requests/conflicts/base_service.rb b/app/services/merge_requests/conflicts/base_service.rb
new file mode 100644
index 00000000000..b50875347d9
--- /dev/null
+++ b/app/services/merge_requests/conflicts/base_service.rb
@@ -0,0 +1,11 @@
+module MergeRequests
+  module Conflicts
+    class BaseService
+      attr_reader :merge_request
+
+      def initialize(merge_request)
+        @merge_request = merge_request
+      end
+    end
+  end
+end
diff --git a/app/services/merge_requests/conflicts/list_service.rb b/app/services/merge_requests/conflicts/list_service.rb
new file mode 100644
index 00000000000..9835606812c
--- /dev/null
+++ b/app/services/merge_requests/conflicts/list_service.rb
@@ -0,0 +1,36 @@
+module MergeRequests
+  module Conflicts
+    class ListService < MergeRequests::Conflicts::BaseService
+      delegate :file_for_path, :to_json, to: :conflicts
+
+      def can_be_resolved_by?(user)
+        return false unless merge_request.source_project
+
+        access = ::Gitlab::UserAccess.new(user, project: merge_request.source_project)
+        access.can_push_to_branch?(merge_request.source_branch)
+      end
+
+      def can_be_resolved_in_ui?
+        return @conflicts_can_be_resolved_in_ui if defined?(@conflicts_can_be_resolved_in_ui)
+
+        return @conflicts_can_be_resolved_in_ui = false unless merge_request.cannot_be_merged?
+        return @conflicts_can_be_resolved_in_ui = false unless merge_request.has_complete_diff_refs?
+        return @conflicts_can_be_resolved_in_ui = false if merge_request.branch_missing?
+
+        begin
+          # Try to parse each conflict. If the MR's mergeable status hasn't been
+          # updated, ensure that we don't say there are conflicts to resolve
+          # when there are no conflict files.
+          conflicts.files.each(&:lines)
+          @conflicts_can_be_resolved_in_ui = conflicts.files.length > 0
+        rescue Rugged::OdbError, Gitlab::Conflict::Parser::UnresolvableError, Gitlab::Conflict::FileCollection::ConflictSideMissing
+          @conflicts_can_be_resolved_in_ui = false
+        end
+      end
+
+      def conflicts
+        @conflicts ||= Gitlab::Conflict::FileCollection.read_only(merge_request)
+      end
+    end
+  end
+end
diff --git a/app/services/merge_requests/conflicts/resolve_service.rb b/app/services/merge_requests/conflicts/resolve_service.rb
new file mode 100644
index 00000000000..d74a82effd6
--- /dev/null
+++ b/app/services/merge_requests/conflicts/resolve_service.rb
@@ -0,0 +1,53 @@
+module MergeRequests
+  module Conflicts
+    class ResolveService < MergeRequests::Conflicts::BaseService
+      MissingFiles = Class.new(Gitlab::Conflict::ResolutionError)
+
+      def execute(current_user, params)
+        rugged = merge_request.source_project.repository.rugged
+
+        Gitlab::Conflict::FileCollection.for_resolution(merge_request) do |conflicts_for_resolution|
+          merge_index = conflicts_for_resolution.merge_index
+
+          params[:files].each do |file_params|
+            conflict_file = conflicts_for_resolution.file_for_path(file_params[:old_path], file_params[:new_path])
+
+            write_resolved_file_to_index(merge_index, rugged, conflict_file, file_params)
+          end
+
+          unless merge_index.conflicts.empty?
+            missing_files = merge_index.conflicts.map { |file| file[:ours][:path] }
+
+            raise MissingFiles, "Missing resolutions for the following files: #{missing_files.join(', ')}"
+          end
+
+          commit_params = {
+            message: params[:commit_message] || conflicts_for_resolution.default_commit_message,
+            parents: [conflicts_for_resolution.our_commit, conflicts_for_resolution.their_commit].map(&:oid),
+            tree: merge_index.write_tree(rugged)
+          }
+
+          conflicts_for_resolution.
+            project.
+            repository.
+            resolve_conflicts(current_user, merge_request.source_branch, commit_params)
+        end
+      end
+
+      private
+
+      def write_resolved_file_to_index(merge_index, rugged, file, params)
+        new_file = if params[:sections]
+                     file.resolve_lines(params[:sections]).map(&:text).join("\n")
+                   elsif params[:content]
+                     file.resolve_content(params[:content])
+                   end
+
+        our_path = file.our_path
+
+        merge_index.add(path: our_path, oid: rugged.write(new_file, :blob), mode: file.our_mode)
+        merge_index.conflict_remove(our_path)
+      end
+    end
+  end
+end
diff --git a/app/services/merge_requests/create_service.rb b/app/services/merge_requests/create_service.rb
index b0ae2dfe4ce..71d37797bb4 100644
--- a/app/services/merge_requests/create_service.rb
+++ b/app/services/merge_requests/create_service.rb
@@ -11,7 +11,9 @@ module MergeRequests
 
       merge_request = MergeRequest.new
       merge_request.source_project = source_project
+      merge_request.source_branch = params[:source_branch]
       merge_request.merge_params['force_remove_source_branch'] = params.delete(:force_remove_source_branch)
+      merge_request.head_pipeline = head_pipeline_for(merge_request)
 
       create(merge_request)
     end
@@ -22,5 +24,18 @@ module MergeRequests
       todo_service.new_merge_request(issuable, current_user)
       issuable.cache_merge_request_closes_issues!(current_user)
     end
+
+    private
+
+    def head_pipeline_for(merge_request)
+      return unless merge_request.source_project
+
+      sha = merge_request.source_branch_sha
+      return unless sha
+
+      pipelines = merge_request.source_project.pipelines.where(ref: merge_request.source_branch, sha: sha)
+
+      pipelines.order(id: :desc).first
+    end
   end
 end
diff --git a/app/services/merge_requests/post_merge_service.rb b/app/services/merge_requests/post_merge_service.rb
index e8fb1b59752..f0d998731d7 100644
--- a/app/services/merge_requests/post_merge_service.rb
+++ b/app/services/merge_requests/post_merge_service.rb
@@ -13,6 +13,7 @@ module MergeRequests
       create_note(merge_request)
       notification_service.merge_mr(merge_request, current_user)
       execute_hooks(merge_request, 'merge')
+      invalidate_cache_counts(merge_request.assignees, merge_request)
     end
 
     private
diff --git a/app/services/merge_requests/refresh_service.rb b/app/services/merge_requests/refresh_service.rb
index 1131d6f4913..81d217929d5 100644
--- a/app/services/merge_requests/refresh_service.rb
+++ b/app/services/merge_requests/refresh_service.rb
@@ -66,12 +66,12 @@ module MergeRequests
 
       filter_merge_requests(merge_requests).each do |merge_request|
         if merge_request.source_branch == @branch_name || force_push?
-          merge_request.reload_diff
+          merge_request.reload_diff(current_user)
         else
           mr_commit_ids = merge_request.commits_sha
           push_commit_ids = @commits.map(&:id)
           matches = mr_commit_ids & push_commit_ids
-          merge_request.reload_diff if matches.any?
+          merge_request.reload_diff(current_user) if matches.any?
         end
 
         merge_request.mark_as_unchecked
diff --git a/app/services/merge_requests/reopen_service.rb b/app/services/merge_requests/reopen_service.rb
index fadcce5d9b6..f2fddf7f345 100644
--- a/app/services/merge_requests/reopen_service.rb
+++ b/app/services/merge_requests/reopen_service.rb
@@ -8,8 +8,9 @@ module MergeRequests
         create_note(merge_request)
         notification_service.reopen_mr(merge_request, current_user)
         execute_hooks(merge_request, 'reopen')
-        merge_request.reload_diff
+        merge_request.reload_diff(current_user)
         merge_request.mark_as_unchecked
+        invalidate_cache_counts(merge_request.assignees, merge_request)
       end
 
       merge_request
diff --git a/app/services/merge_requests/resolve_service.rb b/app/services/merge_requests/resolve_service.rb
deleted file mode 100644
index 82cd89d9a0b..00000000000
--- a/app/services/merge_requests/resolve_service.rb
+++ /dev/null
@@ -1,65 +0,0 @@
-module MergeRequests
-  class ResolveService < MergeRequests::BaseService
-    MissingFiles = Class.new(Gitlab::Conflict::ResolutionError)
-
-    attr_accessor :conflicts, :rugged, :merge_index, :merge_request
-
-    def execute(merge_request)
-      @conflicts = merge_request.conflicts
-      @rugged = project.repository.rugged
-      @merge_index = conflicts.merge_index
-      @merge_request = merge_request
-
-      fetch_their_commit!
-
-      params[:files].each do |file_params|
-        conflict_file = merge_request.conflicts.file_for_path(file_params[:old_path], file_params[:new_path])
-
-        write_resolved_file_to_index(conflict_file, file_params)
-      end
-
-      unless merge_index.conflicts.empty?
-        missing_files = merge_index.conflicts.map { |file| file[:ours][:path] }
-
-        raise MissingFiles, "Missing resolutions for the following files: #{missing_files.join(', ')}"
-      end
-
-      commit_params = {
-        message: params[:commit_message] || conflicts.default_commit_message,
-        parents: [conflicts.our_commit, conflicts.their_commit].map(&:oid),
-        tree: merge_index.write_tree(rugged)
-      }
-
-      project.repository.resolve_conflicts(current_user, merge_request.source_branch, commit_params)
-    end
-
-    def write_resolved_file_to_index(file, params)
-      new_file = if params[:sections]
-                   file.resolve_lines(params[:sections]).map(&:text).join("\n")
-                 elsif params[:content]
-                   file.resolve_content(params[:content])
-                 end
-
-      our_path = file.our_path
-
-      merge_index.add(path: our_path, oid: rugged.write(new_file, :blob), mode: file.our_mode)
-      merge_index.conflict_remove(our_path)
-    end
-
-    # If their commit (in the target project) doesn't exist in the source project, it
-    # can't be a parent for the merge commit we're about to create. If that's the case,
-    # fetch the target branch ref into the source project so the commit exists in both.
-    #
-    def fetch_their_commit!
-      return if rugged.include?(conflicts.their_commit.oid)
-
-      random_string = SecureRandom.hex
-
-      project.repository.fetch_ref(
-        merge_request.target_project.repository.path_to_repo,
-        "refs/heads/#{merge_request.target_branch}",
-        "refs/tmp/#{random_string}/head"
-      )
-    end
-  end
-end
diff --git a/app/services/merge_requests/update_service.rb b/app/services/merge_requests/update_service.rb
index ab7fcf3b6e2..5c843a258fb 100644
--- a/app/services/merge_requests/update_service.rb
+++ b/app/services/merge_requests/update_service.rb
@@ -21,7 +21,10 @@ module MergeRequests
       update(merge_request)
     end
 
-    def handle_changes(merge_request, old_labels: [], old_mentioned_users: [])
+    def handle_changes(merge_request, options)
+      old_labels = options[:old_labels] || []
+      old_mentioned_users = options[:old_mentioned_users] || []
+
       if has_changes?(merge_request, old_labels: old_labels)
         todo_service.mark_pending_todos_as_done(merge_request, current_user)
       end
diff --git a/app/services/notes/build_service.rb b/app/services/notes/build_service.rb
index ea7cacc956c..abf25bb778b 100644
--- a/app/services/notes/build_service.rb
+++ b/app/services/notes/build_service.rb
@@ -3,8 +3,8 @@ module Notes
     def execute
       in_reply_to_discussion_id = params.delete(:in_reply_to_discussion_id)
 
-      if project && in_reply_to_discussion_id.present?
-        discussion = project.notes.find_discussion(in_reply_to_discussion_id)
+      if in_reply_to_discussion_id.present?
+        discussion = find_discussion(in_reply_to_discussion_id)
 
         unless discussion
           note = Note.new
@@ -21,5 +21,19 @@ module Notes
 
       note
     end
+
+    def find_discussion(discussion_id)
+      if project
+        project.notes.find_discussion(discussion_id)
+      else
+        # only PersonalSnippets can have discussions without project association
+        discussion = Note.find_discussion(discussion_id)
+        noteable = discussion.noteable
+
+        return nil unless noteable.is_a?(PersonalSnippet) && can?(current_user, :comment_personal_snippet, noteable)
+
+        discussion
+      end
+    end
   end
 end
diff --git a/app/services/notes/diff_position_update_service.rb b/app/services/notes/diff_position_update_service.rb
deleted file mode 100644
index 0cb731f5bc3..00000000000
--- a/app/services/notes/diff_position_update_service.rb
+++ /dev/null
@@ -1,30 +0,0 @@
-module Notes
-  class DiffPositionUpdateService < BaseService
-    def execute(note)
-      new_position = tracer.trace(note.position)
-
-      # Don't update the position if the type doesn't match, since that means
-      # the diff line commented on was changed, and the comment is now outdated
-      old_position = note.position
-      if new_position &&
-          new_position != old_position &&
-          new_position.type == old_position.type
-
-        note.position = new_position
-      end
-
-      note
-    end
-
-    private
-
-    def tracer
-      @tracer ||= Gitlab::Diff::PositionTracer.new(
-        repository: project.repository,
-        old_diff_refs: params[:old_diff_refs],
-        new_diff_refs: params[:new_diff_refs],
-        paths: params[:paths]
-      )
-    end
-  end
-end
diff --git a/app/services/notification_recipient_service.rb b/app/services/notification_recipient_service.rb
index 8bb995158de..988bd0a7cdb 100644
--- a/app/services/notification_recipient_service.rb
+++ b/app/services/notification_recipient_service.rb
@@ -19,9 +19,14 @@ class NotificationRecipientService
     # Re-assign is considered as a mention of the new assignee so we add the
     # new assignee to the list of recipients after we rejected users with
     # the "on mention" notification level
-    if [:reassign_merge_request, :reassign_issue].include?(custom_action)
+    case custom_action
+    when :reassign_merge_request
       recipients << previous_assignee if previous_assignee
       recipients << target.assignee
+    when :reassign_issue
+      previous_assignees = Array(previous_assignee)
+      recipients.concat(previous_assignees)
+      recipients.concat(target.assignees)
     end
 
     recipients = reject_muted_users(recipients)
diff --git a/app/services/notification_service.rb b/app/services/notification_service.rb
index 6b186263bd1..646ccbdb2bf 100644
--- a/app/services/notification_service.rb
+++ b/app/services/notification_service.rb
@@ -66,8 +66,25 @@ class NotificationService
   #  * issue new assignee if their notification level is not Disabled
   #  * users with custom level checked with "reassign issue"
   #
-  def reassigned_issue(issue, current_user)
-    reassign_resource_email(issue, issue.project, current_user, :reassigned_issue_email)
+  def reassigned_issue(issue, current_user, previous_assignees = [])
+    recipients = NotificationRecipientService.new(issue.project).build_recipients(
+      issue,
+      current_user,
+      action: "reassign",
+      previous_assignee: previous_assignees
+    )
+
+    previous_assignee_ids = previous_assignees.map(&:id)
+
+    recipients.each do |recipient|
+      mailer.send(
+        :reassigned_issue_email,
+        recipient.id,
+        issue.id,
+        previous_assignee_ids,
+        current_user.id
+      ).deliver_later
+    end
   end
 
   # When we add labels to an issue we should send an email to:
@@ -281,7 +298,7 @@ class NotificationService
     recipients ||= NotificationRecipientService.new(pipeline.project).build_pipeline_recipients(
       pipeline,
       pipeline.user,
-      action: pipeline.status,
+      action: pipeline.status
     ).map(&:notification_email)
 
     if recipients.any?
@@ -367,10 +384,10 @@ class NotificationService
   end
 
   def previous_record(object, attribute)
-    if object && attribute
-      if object.previous_changes.include?(attribute)
-        object.previous_changes[attribute].first
-      end
+    return unless object && attribute
+
+    if object.previous_changes.include?(attribute)
+      object.previous_changes[attribute].first
     end
   end
 end
diff --git a/app/services/preview_markdown_service.rb b/app/services/preview_markdown_service.rb
new file mode 100644
index 00000000000..10d45bbf73c
--- /dev/null
+++ b/app/services/preview_markdown_service.rb
@@ -0,0 +1,45 @@
+class PreviewMarkdownService < BaseService
+  def execute
+    text, commands = explain_slash_commands(params[:text])
+    users = find_user_references(text)
+
+    success(
+      text: text,
+      users: users,
+      commands: commands.join(' ')
+    )
+  end
+
+  private
+
+  def explain_slash_commands(text)
+    return text, [] unless %w(Issue MergeRequest).include?(commands_target_type)
+
+    slash_commands_service = SlashCommands::InterpretService.new(project, current_user)
+    slash_commands_service.explain(text, find_commands_target)
+  end
+
+  def find_user_references(text)
+    extractor = Gitlab::ReferenceExtractor.new(project, current_user)
+    extractor.analyze(text, author: current_user)
+    extractor.users.map(&:username)
+  end
+
+  def find_commands_target
+    if commands_target_id.present?
+      finder = commands_target_type == 'Issue' ? IssuesFinder : MergeRequestsFinder
+      finder.new(current_user, project_id: project.id).find(commands_target_id)
+    else
+      collection = commands_target_type == 'Issue' ? project.issues : project.merge_requests
+      collection.build
+    end
+  end
+
+  def commands_target_type
+    params[:slash_commands_target_type]
+  end
+
+  def commands_target_id
+    params[:slash_commands_target_id]
+  end
+end
diff --git a/app/services/projects/propagate_service_template.rb b/app/services/projects/propagate_service_template.rb
new file mode 100644
index 00000000000..a8ef2108492
--- /dev/null
+++ b/app/services/projects/propagate_service_template.rb
@@ -0,0 +1,103 @@
+module Projects
+  class PropagateServiceTemplate
+    BATCH_SIZE = 100
+
+    def self.propagate(*args)
+      new(*args).propagate
+    end
+
+    def initialize(template)
+      @template = template
+    end
+
+    def propagate
+      return unless @template.active?
+
+      Rails.logger.info("Propagating services for template #{@template.id}")
+
+      propagate_projects_with_template
+    end
+
+    private
+
+    def propagate_projects_with_template
+      loop do
+        batch = project_ids_batch
+
+        bulk_create_from_template(batch) unless batch.empty?
+
+        break if batch.size < BATCH_SIZE
+      end
+    end
+
+    def bulk_create_from_template(batch)
+      service_list = batch.map do |project_id|
+        service_hash.values << project_id
+      end
+
+      Project.transaction do
+        bulk_insert_services(service_hash.keys << 'project_id', service_list)
+        run_callbacks(batch)
+      end
+    end
+
+    def project_ids_batch
+      Project.connection.select_values(
+        <<-SQL
+          SELECT id
+          FROM projects
+          WHERE NOT EXISTS (
+            SELECT true
+            FROM services
+            WHERE services.project_id = projects.id
+            AND services.type = '#{@template.type}'
+          )
+          AND projects.pending_delete = false
+          AND projects.archived = false
+          LIMIT #{BATCH_SIZE}
+      SQL
+      )
+    end
+
+    def bulk_insert_services(columns, values_array)
+      ActiveRecord::Base.connection.execute(
+        <<-SQL.strip_heredoc
+          INSERT INTO services (#{columns.join(', ')})
+          VALUES #{values_array.map { |tuple| "(#{tuple.join(', ')})" }.join(', ')}
+      SQL
+      )
+    end
+
+    def service_hash
+      @service_hash ||=
+        begin
+          template_hash = @template.as_json(methods: :type).except('id', 'template', 'project_id')
+
+          template_hash.each_with_object({}) do |(key, value), service_hash|
+            value = value.is_a?(Hash) ? value.to_json : value
+
+            service_hash[ActiveRecord::Base.connection.quote_column_name(key)] =
+              ActiveRecord::Base.sanitize(value)
+          end
+        end
+    end
+
+    def run_callbacks(batch)
+      if active_external_issue_tracker?
+        Project.where(id: batch).update_all(has_external_issue_tracker: true)
+      end
+
+      if active_external_wiki?
+        Project.where(id: batch).update_all(has_external_wiki: true)
+      end
+    end
+
+    def active_external_issue_tracker?
+      @template.issue_tracker? && !@template.default
+    end
+
+    def active_external_wiki?
+      @template.type == 'ExternalWikiService'
+    end
+  end
+end
diff --git a/app/services/projects/transfer_service.rb b/app/services/projects/transfer_service.rb
index da6e6acd4a7..1c24b27a870 100644
--- a/app/services/projects/transfer_service.rb
+++ b/app/services/projects/transfer_service.rb
@@ -12,12 +12,13 @@ module Projects
     TransferError = Class.new(StandardError)
 
     def execute(new_namespace)
-      if allowed_transfer?(current_user, project, new_namespace)
-        transfer(project, new_namespace)
-      else
-        project.errors.add(:new_namespace, 'is invalid')
-        false
+      if new_namespace.blank?
+        raise TransferError, 'Please select a new namespace for your project.'
       end
+      unless allowed_transfer?(current_user, project, new_namespace)
+        raise TransferError, 'Transfer failed, please contact an admin.'
+      end
+      transfer(project, new_namespace)
     rescue Projects::TransferService::TransferError => ex
       project.reload
       project.errors.add(:new_namespace, ex.message)
diff --git a/app/services/projects/update_pages_configuration_service.rb b/app/services/projects/update_pages_configuration_service.rb
index eb4809afa85..cacb74b1205 100644
--- a/app/services/projects/update_pages_configuration_service.rb
+++ b/app/services/projects/update_pages_configuration_service.rb
@@ -27,7 +27,7 @@ module Projects
         {
           domain: domain.domain,
           certificate: domain.certificate,
-          key: domain.key,
+          key: domain.key
         }
       end
     end
diff --git a/app/services/search/snippet_service.rb b/app/services/search/snippet_service.rb
index 4f161beea4d..85da0be6fff 100644
--- a/app/services/search/snippet_service.rb
+++ b/app/services/search/snippet_service.rb
@@ -7,7 +7,7 @@ module Search
     end
 
     def execute
-      snippets = Snippet.accessible_to(current_user)
+      snippets = SnippetsFinder.new(current_user).execute
 
       Gitlab::SnippetSearchResults.new(snippets, params[:search])
     end
diff --git a/app/services/search_service.rb b/app/services/search_service.rb
index 22736c71725..1d4d03a8b7d 100644
--- a/app/services/search_service.rb
+++ b/app/services/search_service.rb
@@ -12,7 +12,7 @@ class SearchService
     @project =
       if params[:project_id].present?
         the_project = Project.find_by(id: params[:project_id])
-        can?(current_user, :download_code, the_project) ? the_project : nil
+        can?(current_user, :read_project, the_project) ? the_project : nil
       else
         nil
       end
diff --git a/app/services/slash_commands/interpret_service.rb b/app/services/slash_commands/interpret_service.rb
index 6aeebc26685..a7e13648b54 100644
--- a/app/services/slash_commands/interpret_service.rb
+++ b/app/services/slash_commands/interpret_service.rb
@@ -2,7 +2,7 @@ module SlashCommands
   class InterpretService < BaseService
     include Gitlab::SlashCommands::Dsl
 
-    attr_reader :issuable, :options
+    attr_reader :issuable
 
     # Takes a text and interprets the commands that are extracted from it.
     # Returns the content without commands, and hash of changes to be applied to a record.
@@ -12,23 +12,21 @@ module SlashCommands
       @issuable = issuable
       @updates = {}
 
-      opts = {
-        issuable:     issuable,
-        current_user: current_user,
-        project:      project,
-        params:       params
-      }
-
-      content, commands = extractor.extract_commands(content, opts)
+      content, commands = extractor.extract_commands(content, context)
+      extract_updates(commands, context)
+      [content, @updates]
+    end
 
-      commands.each do |name, arg|
-        definition = self.class.command_definitions_by_name[name.to_sym]
-        next unless definition
+    # Takes a text and interprets the commands that are extracted from it.
+    # Returns the content without commands, and array of changes explained.
+    def explain(content, issuable)
+      return [content, []] unless current_user.can?(:use_slash_commands)
 
-        definition.execute(self, opts, arg)
-      end
+      @issuable = issuable
 
-      [content, @updates]
+      content, commands = extractor.extract_commands(content, context)
+      commands = explain_commands(commands, context)
+      [content, commands]
     end
 
     private
@@ -40,6 +38,9 @@ module SlashCommands
     desc do
       "Close this #{issuable.to_ability_name.humanize(capitalize: false)}"
     end
+    explanation do
+      "Closes this #{issuable.to_ability_name.humanize(capitalize: false)}."
+    end
     condition do
       issuable.persisted? &&
         issuable.open? &&
@@ -52,6 +53,9 @@ module SlashCommands
     desc do
       "Reopen this #{issuable.to_ability_name.humanize(capitalize: false)}"
     end
+    explanation do
+      "Reopens this #{issuable.to_ability_name.humanize(capitalize: false)}."
+    end
     condition do
       issuable.persisted? &&
         issuable.closed? &&
@@ -62,6 +66,7 @@ module SlashCommands
     end
 
     desc 'Merge (when the pipeline succeeds)'
+    explanation 'Merges this merge request when the pipeline succeeds.'
     condition do
       last_diff_sha = params && params[:merge_request_diff_head_sha]
       issuable.is_a?(MergeRequest) &&
@@ -73,6 +78,9 @@ module SlashCommands
     end
 
     desc 'Change title'
+    explanation do |title_param|
+      "Changes the title to \"#{title_param}\"."
+    end
     params '<New title>'
     condition do
       issuable.persisted? &&
@@ -83,41 +91,70 @@ module SlashCommands
     end
 
     desc 'Assign'
+    explanation do |users|
+      "Assigns #{users.map(&:to_reference).to_sentence}." if users.any?
+    end
     params '@user'
     condition do
       current_user.can?(:"admin_#{issuable.to_ability_name}", project)
     end
-    command :assign do |assignee_param|
-      user = extract_references(assignee_param, :user).first
-      user ||= User.find_by(username: assignee_param)
+    parse_params do |assignee_param|
+      users = extract_references(assignee_param, :user)
+
+      if users.empty?
+        users = User.where(username: assignee_param.split(' ').map(&:strip))
+      end
+
+      users
+    end
+    command :assign do |users|
+      next if users.empty?
 
-      @updates[:assignee_id] = user.id if user
+      if issuable.is_a?(Issue)
+        @updates[:assignee_ids] = users.map(&:id)
+      else
+        @updates[:assignee_id] = users.last.id
+      end
     end
 
     desc 'Remove assignee'
+    explanation do
+      "Removes assignee #{issuable.assignees.first.to_reference}."
+    end
     condition do
       issuable.persisted? &&
-        issuable.assignee_id? &&
+        issuable.assignees.any? &&
         current_user.can?(:"admin_#{issuable.to_ability_name}", project)
     end
     command :unassign do
-      @updates[:assignee_id] = nil
+      if issuable.is_a?(Issue)
+        @updates[:assignee_ids] = []
+      else
+        @updates[:assignee_id] = nil
+      end
     end
 
     desc 'Set milestone'
+    explanation do |milestone|
+      "Sets the milestone to #{milestone.to_reference}." if milestone
+    end
     params '%"milestone"'
     condition do
       current_user.can?(:"admin_#{issuable.to_ability_name}", project) &&
         project.milestones.active.any?
     end
-    command :milestone do |milestone_param|
-      milestone = extract_references(milestone_param, :milestone).first
-      milestone ||= project.milestones.find_by(title: milestone_param.strip)
-
+    parse_params do |milestone_param|
+      extract_references(milestone_param, :milestone).first ||
+        project.milestones.find_by(title: milestone_param.strip)
+    end
+    command :milestone do |milestone|
       @updates[:milestone_id] = milestone.id if milestone
     end
 
     desc 'Remove milestone'
+    explanation do
+      "Removes #{issuable.milestone.to_reference(format: :name)} milestone."
+    end
     condition do
       issuable.persisted? &&
         issuable.milestone_id? &&
@@ -128,6 +165,11 @@ module SlashCommands
     end
 
     desc 'Add label(s)'
+    explanation do |labels_param|
+      labels = find_label_references(labels_param)
+
+      "Adds #{labels.join(' ')} #{'label'.pluralize(labels.count)}." if labels.any?
+    end
     params '~label1 ~"label 2"'
     condition do
       available_labels = LabelsFinder.new(current_user, project_id: project.id).execute
@@ -147,6 +189,14 @@ module SlashCommands
     end
 
     desc 'Remove all or specific label(s)'
+    explanation do |labels_param = nil|
+      if labels_param.present?
+        labels = find_label_references(labels_param)
+        "Removes #{labels.join(' ')} #{'label'.pluralize(labels.count)}." if labels.any?
+      else
+        'Removes all labels.'
+      end
+    end
     params '~label1 ~"label 2"'
     condition do
       issuable.persisted? &&
@@ -169,6 +219,10 @@ module SlashCommands
     end
 
     desc 'Replace all label(s)'
+    explanation do |labels_param|
+      labels = find_label_references(labels_param)
+      "Replaces all labels with #{labels.join(' ')} #{'label'.pluralize(labels.count)}." if labels.any?
+    end
     params '~label1 ~"label 2"'
     condition do
       issuable.persisted? &&
@@ -187,6 +241,7 @@ module SlashCommands
     end
 
     desc 'Add a todo'
+    explanation 'Adds a todo.'
     condition do
       issuable.persisted? &&
         !TodoService.new.todo_exist?(issuable, current_user)
@@ -196,6 +251,7 @@ module SlashCommands
     end
 
     desc 'Mark todo as done'
+    explanation 'Marks todo as done.'
     condition do
       issuable.persisted? &&
         TodoService.new.todo_exist?(issuable, current_user)
@@ -205,6 +261,9 @@ module SlashCommands
     end
 
     desc 'Subscribe'
+    explanation do
+      "Subscribes to this #{issuable.to_ability_name.humanize(capitalize: false)}."
+    end
     condition do
       issuable.persisted? &&
         !issuable.subscribed?(current_user, project)
@@ -214,6 +273,9 @@ module SlashCommands
     end
 
     desc 'Unsubscribe'
+    explanation do
+      "Unsubscribes from this #{issuable.to_ability_name.humanize(capitalize: false)}."
+    end
     condition do
       issuable.persisted? &&
         issuable.subscribed?(current_user, project)
@@ -223,18 +285,23 @@ module SlashCommands
     end
 
     desc 'Set due date'
+    explanation do |due_date|
+      "Sets the due date to #{due_date.to_s(:medium)}." if due_date
+    end
     params '<in 2 days | this Friday | December 31st>'
     condition do
       issuable.respond_to?(:due_date) &&
         current_user.can?(:"admin_#{issuable.to_ability_name}", project)
     end
-    command :due do |due_date_param|
-      due_date = Chronic.parse(due_date_param).try(:to_date)
-
+    parse_params do |due_date_param|
+      Chronic.parse(due_date_param).try(:to_date)
+    end
+    command :due do |due_date|
       @updates[:due_date] = due_date if due_date
     end
 
     desc 'Remove due date'
+    explanation 'Removes the due date.'
     condition do
       issuable.persisted? &&
         issuable.respond_to?(:due_date) &&
@@ -245,8 +312,11 @@ module SlashCommands
       @updates[:due_date] = nil
     end
 
-    desc do
-      "Toggle the Work In Progress status"
+    desc 'Toggle the Work In Progress status'
+    explanation do
+      verb = issuable.work_in_progress? ? 'Unmarks' : 'Marks'
+      noun = issuable.to_ability_name.humanize(capitalize: false)
+      "#{verb} this #{noun} as Work In Progress."
     end
     condition do
       issuable.persisted? &&
@@ -257,45 +327,72 @@ module SlashCommands
       @updates[:wip_event] = issuable.work_in_progress? ? 'unwip' : 'wip'
     end
 
-    desc 'Toggle emoji reward'
+    desc 'Toggle emoji award'
+    explanation do |name|
+      "Toggles :#{name}: emoji award." if name
+    end
     params ':emoji:'
     condition do
       issuable.persisted?
     end
-    command :award do |emoji|
-      name = award_emoji_name(emoji)
+    parse_params do |emoji_param|
+      match = emoji_param.match(Banzai::Filter::EmojiFilter.emoji_pattern)
+      match[1] if match
+    end
+    command :award do |name|
       if name && issuable.user_can_award?(current_user, name)
         @updates[:emoji_award] = name
       end
     end
 
     desc 'Set time estimate'
+    explanation do |time_estimate|
+      time_estimate = Gitlab::TimeTrackingFormatter.output(time_estimate)
+
+      "Sets time estimate to #{time_estimate}." if time_estimate
+    end
     params '<1w 3d 2h 14m>'
     condition do
       current_user.can?(:"admin_#{issuable.to_ability_name}", project)
     end
-    command :estimate do |raw_duration|
-      time_estimate = Gitlab::TimeTrackingFormatter.parse(raw_duration)
-
+    parse_params do |raw_duration|
+      Gitlab::TimeTrackingFormatter.parse(raw_duration)
+    end
+    command :estimate do |time_estimate|
       if time_estimate
         @updates[:time_estimate] = time_estimate
       end
     end
 
     desc 'Add or substract spent time'
+    explanation do |time_spent|
+      if time_spent
+        if time_spent > 0
+          verb = 'Adds'
+          value = time_spent
+        else
+          verb = 'Substracts'
+          value = -time_spent
+        end
+
+        "#{verb} #{Gitlab::TimeTrackingFormatter.output(value)} spent time."
+      end
+    end
     params '<1h 30m | -1h 30m>'
     condition do
       current_user.can?(:"admin_#{issuable.to_ability_name}", issuable)
     end
-    command :spend do |raw_duration|
-      time_spent = Gitlab::TimeTrackingFormatter.parse(raw_duration)
-
+    parse_params do |raw_duration|
+      Gitlab::TimeTrackingFormatter.parse(raw_duration)
+    end
+    command :spend do |time_spent|
       if time_spent
         @updates[:spend_time] = { duration: time_spent, user: current_user }
       end
     end
 
     desc 'Remove time estimate'
+    explanation 'Removes time estimate.'
     condition do
       issuable.persisted? &&
         current_user.can?(:"admin_#{issuable.to_ability_name}", project)
@@ -305,6 +402,7 @@ module SlashCommands
     end
 
     desc 'Remove spent time'
+    explanation 'Removes spent time.'
     condition do
       issuable.persisted? &&
         current_user.can?(:"admin_#{issuable.to_ability_name}", project)
@@ -318,19 +416,28 @@ module SlashCommands
     params '@user'
     command :cc
 
-    desc 'Defines target branch for MR'
+    desc 'Define target branch for MR'
+    explanation do |branch_name|
+      "Sets target branch to #{branch_name}."
+    end
     params '<Local branch name>'
     condition do
       issuable.respond_to?(:target_branch) &&
         (current_user.can?(:"update_#{issuable.to_ability_name}", issuable) ||
           issuable.new_record?)
     end
-    command :target_branch do |target_branch_param|
-      branch_name = target_branch_param.strip
+    parse_params do |target_branch_param|
+      target_branch_param.strip
+    end
+    command :target_branch do |branch_name|
       @updates[:target_branch] = branch_name if project.repository.branch_names.include?(branch_name)
     end
 
     desc 'Move issue from one column of the board to another'
+    explanation do |target_list_name|
+      label = find_label_references(target_list_name).first
+      "Moves issue to #{label} column in the board." if label
+    end
     params '~"Target column"'
     condition do
       issuable.is_a?(Issue) &&
@@ -352,11 +459,35 @@ module SlashCommands
       end
     end
 
+    def find_labels(labels_param)
+      extract_references(labels_param, :label) |
+        LabelsFinder.new(current_user, project_id: project.id, name: labels_param.split).execute
+    end
+
+    def find_label_references(labels_param)
+      find_labels(labels_param).map(&:to_reference)
+    end
+
     def find_label_ids(labels_param)
-      label_ids_by_reference = extract_references(labels_param, :label).map(&:id)
-      labels_ids_by_name = LabelsFinder.new(current_user, project_id: project.id, name: labels_param.split).execute.select(:id)
+      find_labels(labels_param).map(&:id)
+    end
 
-      label_ids_by_reference | labels_ids_by_name
+    def explain_commands(commands, opts)
+      commands.map do |name, arg|
+        definition = self.class.definition_by_name(name)
+        next unless definition
+
+        definition.explain(self, opts, arg)
+      end.compact
+    end
+
+    def extract_updates(commands, opts)
+      commands.each do |name, arg|
+        definition = self.class.definition_by_name(name)
+        next unless definition
+
+        definition.execute(self, opts, arg)
+      end
     end
 
     def extract_references(arg, type)
@@ -366,9 +497,13 @@ module SlashCommands
       ext.references(type)
     end
 
-    def award_emoji_name(emoji)
-      match = emoji.match(Banzai::Filter::EmojiFilter.emoji_pattern)
-      match[1] if match
+    def context
+      {
+        issuable: issuable,
+        current_user: current_user,
+        project: project,
+        params: params
+      }
     end
   end
 end
diff --git a/app/services/system_hooks_service.rb b/app/services/system_hooks_service.rb
index af0ddbe5934..ed476fc9d0c 100644
--- a/app/services/system_hooks_service.rb
+++ b/app/services/system_hooks_service.rb
@@ -51,7 +51,7 @@ class SystemHooksService
         path: model.path,
         group_id: model.id,
         owner_name: owner.respond_to?(:name) ? owner.name : nil,
-        owner_email: owner.respond_to?(:email) ? owner.email : nil,
+        owner_email: owner.respond_to?(:email) ? owner.email : nil
       )
     when GroupMember
       data.merge!(group_member_data(model))
@@ -113,7 +113,7 @@ class SystemHooksService
       user_name: model.user.name,
       user_email: model.user.email,
       user_id: model.user.id,
-      group_access: model.human_access,
+      group_access: model.human_access
     }
   end
 end
diff --git a/app/services/system_note_service.rb b/app/services/system_note_service.rb
index c9e25c7aaa2..0837c07e6aa 100644
--- a/app/services/system_note_service.rb
+++ b/app/services/system_note_service.rb
@@ -49,6 +49,44 @@ module SystemNoteService
     create_note(NoteSummary.new(noteable, project, author, body, action: 'assignee'))
   end
 
+  # Called when the assignees of an Issue is changed or removed
+  #
+  # issue - Issue object
+  # project  - Project owning noteable
+  # author   - User performing the change
+  # assignees - Users being assigned, or nil
+  #
+  # Example Note text:
+  #
+  #   "removed all assignees"
+  #
+  #   "assigned to @user1 additionally to @user2"
+  #
+  #   "assigned to @user1, @user2 and @user3 and unassigned from @user4 and @user5"
+  #
+  #   "assigned to @user1 and @user2"
+  #
+  # Returns the created Note object
+  def change_issue_assignees(issue, project, author, old_assignees)
+    body =
+      if issue.assignees.any? && old_assignees.any?
+        unassigned_users = old_assignees - issue.assignees
+        added_users = issue.assignees.to_a - old_assignees
+
+        text_parts = []
+        text_parts << "assigned to #{added_users.map(&:to_reference).to_sentence}" if added_users.any?
+        text_parts << "unassigned #{unassigned_users.map(&:to_reference).to_sentence}" if unassigned_users.any?
+
+        text_parts.join(' and ')
+      elsif old_assignees.any?
+        "removed assignee"
+      elsif issue.assignees.any?
+        "assigned to #{issue.assignees.map(&:to_reference).to_sentence}"
+      end
+
+    create_note(NoteSummary.new(issue, project, author, body, action: 'assignee'))
+  end
+
   # Called when one or more labels on a Noteable are added and/or removed
   #
   # noteable       - Noteable object
@@ -220,7 +258,7 @@ module SystemNoteService
     create_note(NoteSummary.new(noteable, project, author, body, action: 'title'))
   end
 
-  def self.resolve_all_discussions(merge_request, project, author)
+  def resolve_all_discussions(merge_request, project, author)
     body = "resolved all discussions"
 
     create_note(NoteSummary.new(merge_request, project, author, body, action: 'discussion'))
@@ -236,6 +274,28 @@ module SystemNoteService
     note
   end
 
+  def diff_discussion_outdated(discussion, project, author, change_position)
+    merge_request = discussion.noteable
+    diff_refs = change_position.diff_refs
+    version_index = merge_request.merge_request_diffs.viewable.count
+
+    body = "changed this line in"
+    if version_params = merge_request.version_params_for(diff_refs)
+      line_code = change_position.line_code(project.repository)
+      url = url_helpers.diffs_namespace_project_merge_request_url(project.namespace, project, merge_request, version_params.merge(anchor: line_code))
+
+      body << " [version #{version_index} of the diff](#{url})"
+    else
+      body << " version #{version_index} of the diff"
+    end
+
+    note_attributes = discussion.reply_attributes.merge(project: project, author: author, note: body)
+    note = Note.create(note_attributes.merge(system: true))
+    note.system_note_metadata = SystemNoteMetadata.new(action: 'outdated')
+
+    note
+  end
+
   # Called when the title of a Noteable is changed
   #
   # noteable  - Noteable object that responds to `title`
@@ -253,14 +313,31 @@ module SystemNoteService
 
     old_diffs, new_diffs = Gitlab::Diff::InlineDiff.new(old_title, new_title).inline_diffs
 
-    marked_old_title = Gitlab::Diff::InlineDiffMarker.new(old_title).mark(old_diffs, mode: :deletion, markdown: true)
-    marked_new_title = Gitlab::Diff::InlineDiffMarker.new(new_title).mark(new_diffs, mode: :addition, markdown: true)
+    marked_old_title = Gitlab::Diff::InlineDiffMarkdownMarker.new(old_title).mark(old_diffs, mode: :deletion)
+    marked_new_title = Gitlab::Diff::InlineDiffMarkdownMarker.new(new_title).mark(new_diffs, mode: :addition)
 
     body = "changed title from **#{marked_old_title}** to **#{marked_new_title}**"
 
     create_note(NoteSummary.new(noteable, project, author, body, action: 'title'))
   end
 
+  # Called when the description of a Noteable is changed
+  #
+  # noteable  - Noteable object that responds to `description`
+  # project   - Project owning noteable
+  # author    - User performing the change
+  #
+  # Example Note text:
+  #
+  #   "changed the description"
+  #
+  # Returns the created Note object
+  def change_description(noteable, project, author)
+    body = 'changed the description'
+
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'description'))
+  end
+
   # Called when the confidentiality changes
   #
   # issue   - Issue object
diff --git a/app/services/todo_service.rb b/app/services/todo_service.rb
index 8ae61694b50..322c6286365 100644
--- a/app/services/todo_service.rb
+++ b/app/services/todo_service.rb
@@ -251,9 +251,9 @@ class TodoService
   end
 
   def create_assignment_todo(issuable, author)
-    if issuable.assignee
+    if issuable.assignees.any?
       attributes = attributes_for_todo(issuable.project, issuable, author, Todo::ASSIGNED)
-      create_todos(issuable.assignee, attributes)
+      create_todos(issuable.assignees, attributes)
     end
   end
 
diff --git a/app/services/users/refresh_authorized_projects_service.rb b/app/services/users/refresh_authorized_projects_service.rb
index 8f6f5b937c4..3e07b811027 100644
--- a/app/services/users/refresh_authorized_projects_service.rb
+++ b/app/services/users/refresh_authorized_projects_service.rb
@@ -73,12 +73,11 @@ module Users
     # remove - The IDs of the authorization rows to remove.
     # add - Rows to insert in the form `[user id, project id, access level]`
     def update_authorizations(remove = [], add = [])
-      return if remove.empty? && add.empty? && user.authorized_projects_populated
+      return if remove.empty? && add.empty?
 
       User.transaction do
         user.remove_project_authorizations(remove) unless remove.empty?
         ProjectAuthorization.insert_authorizations(add) unless add.empty?
-        user.set_authorized_projects_column
       end
 
       # Since we batch insert authorization rows, Rails' associations may get
@@ -101,38 +100,13 @@ module Users
     end
 
     def fresh_authorizations
-      ProjectAuthorization.
-        unscoped.
-        select('project_id, MAX(access_level) AS access_level').
-        from("(#{project_authorizations_union.to_sql}) #{ProjectAuthorization.table_name}").
-        group(:project_id)
-    end
-
-    private
-
-    # Returns a union query of projects that the user is authorized to access
-    def project_authorizations_union
-      relations = [
-        # Personal projects
-        user.personal_projects.select("#{user.id} AS user_id, projects.id AS project_id, #{Gitlab::Access::MASTER} AS access_level"),
-
-        # Projects the user is a member of
-        user.projects.select_for_project_authorization,
-
-        # Projects of groups the user is a member of
-        user.groups_projects.select_for_project_authorization,
-
-        # Projects of subgroups of groups the user is a member of
-        user.nested_groups_projects.select_for_project_authorization,
-
-        # Projects shared with groups the user is a member of
-        user.groups.joins(:shared_projects).select_for_project_authorization,
-
-        # Projects shared with subgroups of groups the user is a member of
-        user.nested_groups.joins(:shared_projects).select_for_project_authorization
-      ]
+      klass = if Group.supports_nested_groups?
+                Gitlab::ProjectAuthorizations::WithNestedGroups
+              else
+                Gitlab::ProjectAuthorizations::WithoutNestedGroups
+              end
 
-      Gitlab::SQL::Union.new(relations)
+      klass.new(user).calculate
     end
   end
 end
diff --git a/app/services/web_hook_service.rb b/app/services/web_hook_service.rb
new file mode 100644
index 00000000000..4241b912d5b
--- /dev/null
+++ b/app/services/web_hook_service.rb
@@ -0,0 +1,120 @@
+class WebHookService
+  class InternalErrorResponse
+    attr_reader :body, :headers, :code
+
+    def initialize
+      @headers = HTTParty::Response::Headers.new({})
+      @body = ''
+      @code = 'internal error'
+    end
+  end
+
+  include HTTParty
+
+  # HTTParty timeout
+  default_timeout Gitlab.config.gitlab.webhook_timeout
+
+  attr_accessor :hook, :data, :hook_name
+
+  def initialize(hook, data, hook_name)
+    @hook = hook
+    @data = data
+    @hook_name = hook_name
+  end
+
+  def execute
+    start_time = Time.now
+
+    response = if parsed_url.userinfo.blank?
+                 make_request(hook.url)
+               else
+                 make_request_with_auth
+               end
+
+    log_execution(
+      trigger: hook_name,
+      url: hook.url,
+      request_data: data,
+      response: response,
+      execution_duration: Time.now - start_time
+    )
+
+    [response.code, response.to_s]
+  rescue SocketError, OpenSSL::SSL::SSLError, Errno::ECONNRESET, Errno::ECONNREFUSED, Net::OpenTimeout => e
+    log_execution(
+      trigger: hook_name,
+      url: hook.url,
+      request_data: data,
+      response: InternalErrorResponse.new,
+      execution_duration: Time.now - start_time,
+      error_message: e.to_s
+    )
+
+    Rails.logger.error("WebHook Error => #{e}")
+
+    [nil, e.to_s]
+  end
+
+  def async_execute
+    Sidekiq::Client.enqueue(WebHookWorker, hook.id, data, hook_name)
+  end
+
+  private
+
+  def parsed_url
+    @parsed_url ||= URI.parse(hook.url)
+  end
+
+  def make_request(url, basic_auth = false)
+    self.class.post(url,
+      body: data.to_json,
+      headers: build_headers(hook_name),
+      verify: hook.enable_ssl_verification,
+      basic_auth: basic_auth)
+  end
+
+  def make_request_with_auth
+    post_url = hook.url.gsub("#{parsed_url.userinfo}@", '')
+    basic_auth = {
+      username: CGI.unescape(parsed_url.user),
+      password: CGI.unescape(parsed_url.password)
+    }
+    make_request(post_url, basic_auth)
+  end
+
+  def log_execution(trigger:, url:, request_data:, response:, execution_duration:, error_message: nil)
+    # logging for ServiceHook's is not available
+    return if hook.is_a?(ServiceHook)
+
+    WebHookLog.create(
+      web_hook: hook,
+      trigger: trigger,
+      url: url,
+      execution_duration: execution_duration,
+      request_headers: build_headers(hook_name),
+      request_data: request_data,
+      response_headers: format_response_headers(response),
+      response_body: response.body,
+      response_status: response.code,
+      internal_error_message: error_message
+    )
+  end
+
+  def build_headers(hook_name)
+    @headers ||= begin
+      {
+        'Content-Type' => 'application/json',
+        'X-Gitlab-Event' => hook_name.singularize.titleize
+      }.tap do |hash|
+        hash['X-Gitlab-Token'] = hook.token if hook.token.present?
+      end
+    end
+  end
+
+  # Make response headers more stylish
+  # Net::HTTPHeader has downcased hash with arrays: { 'content-type' => ['text/html; charset=utf-8'] }
+  # This method format response to capitalized hash with strings: { 'Content-Type' => 'text/html; charset=utf-8' }
+  def format_response_headers(response)
+    response.headers.each_capitalized.to_h
+  end
+end
diff --git a/app/uploaders/artifact_uploader.rb b/app/uploaders/artifact_uploader.rb
index 3e36ec91205..3bc0408f557 100644
--- a/app/uploaders/artifact_uploader.rb
+++ b/app/uploaders/artifact_uploader.rb
@@ -1,33 +1,35 @@
 class ArtifactUploader < GitlabUploader
   storage :file
 
-  attr_accessor :build, :field
+  attr_reader :job, :field
 
-  def self.artifacts_path
+  def self.local_artifacts_store
     Gitlab.config.artifacts.path
   end
 
   def self.artifacts_upload_path
-    File.join(self.artifacts_path, 'tmp/uploads/')
+    File.join(self.local_artifacts_store, 'tmp/uploads/')
   end
 
-  def self.artifacts_cache_path
-    File.join(self.artifacts_path, 'tmp/cache/')
-  end
-
-  def initialize(build, field)
-    @build, @field = build, field
+  def initialize(job, field)
+    @job, @field = job, field
   end
 
   def store_dir
-    File.join(self.class.artifacts_path, @build.artifacts_path)
+    default_local_path
   end
 
   def cache_dir
-    File.join(self.class.artifacts_cache_path, @build.artifacts_path)
+    File.join(self.class.local_artifacts_store, 'tmp/cache')
+  end
+
+  private
+
+  def default_local_path
+    File.join(self.class.local_artifacts_store, default_path)
   end
 
-  def filename
-    file.try(:filename)
+  def default_path
+    File.join(job.created_at.utc.strftime('%Y_%m'), job.project_id.to_s, job.id.to_s)
   end
 end
diff --git a/app/uploaders/gitlab_uploader.rb b/app/uploaders/gitlab_uploader.rb
index e0a6c9b4067..02afddb8c6a 100644
--- a/app/uploaders/gitlab_uploader.rb
+++ b/app/uploaders/gitlab_uploader.rb
@@ -10,7 +10,11 @@ class GitlabUploader < CarrierWave::Uploader::Base
   delegate :base_dir, to: :class
 
   def file_storage?
-    self.class.storage == CarrierWave::Storage::File
+    storage.is_a?(CarrierWave::Storage::File)
+  end
+
+  def file_cache_storage?
+    cache_storage.is_a?(CarrierWave::Storage::File)
   end
 
   # Reduce disk IO
diff --git a/app/validators/dynamic_path_validator.rb b/app/validators/dynamic_path_validator.rb
index 226eb6b313c..27ac60637fd 100644
--- a/app/validators/dynamic_path_validator.rb
+++ b/app/validators/dynamic_path_validator.rb
@@ -3,205 +3,50 @@
 # Custom validator for GitLab path values.
 # These paths are assigned to `Namespace` (& `Group` as a subclass) & `Project`
 #
-# Values are checked for formatting and exclusion from a list of reserved path
+# Values are checked for formatting and exclusion from a list of illegal path
 # names.
 class DynamicPathValidator < ActiveModel::EachValidator
-  # All routes that appear on the top level must be listed here.
-  # This will make sure that groups cannot be created with these names
-  # as these routes would be masked by the paths already in place.
-  #
-  # Example:
-  #   /api/api-project
-  #
-  #  the path `api` shouldn't be allowed because it would be masked by `api/*`
-  #
-  TOP_LEVEL_ROUTES = %w[
-    -
-    .well-known
-    abuse_reports
-    admin
-    all
-    api
-    assets
-    autocomplete
-    ci
-    dashboard
-    explore
-    files
-    groups
-    health_check
-    help
-    hooks
-    import
-    invites
-    issues
-    jwt
-    koding
-    member
-    merge_requests
-    new
-    notes
-    notification_settings
-    oauth
-    profile
-    projects
-    public
-    repository
-    robots.txt
-    s
-    search
-    sent_notifications
-    services
-    snippets
-    teams
-    u
-    unicorn_test
-    unsubscribes
-    uploads
-    users
-  ].freeze
+  extend Gitlab::EncodingHelper
 
-  # This list should contain all words following `/*namespace_id/:project_id` in
-  # routes that contain a second wildcard.
-  #
-  # Example:
-  #   /*namespace_id/:project_id/badges/*ref/build
-  #
-  # If `badges` was allowed as a project/group name, we would not be able to access the
-  # `badges` route for those projects:
-  #
-  # Consider a namespace with path `foo/bar` and a project called `badges`.
-  # The route to the build badge would then be `/foo/bar/badges/badges/master/build.svg`
-  #
-  # When accessing this path the route would be matched to the `badges` path
-  # with the following params:
-  #   - namespace_id: `foo`
-  #   - project_id: `bar`
-  #   - ref: `badges/master`
-  #
-  # Failing to find the project, this would result in a 404.
-  #
-  # By rejecting `badges` the router can _count_ on the fact that `badges` will
-  # be preceded by the `namespace/project`.
-  WILDCARD_ROUTES = %w[
-    badges
-    blame
-    blob
-    builds
-    commits
-    create
-    create_dir
-    edit
-    environments/folders
-    files
-    find_file
-    gitlab-lfs/objects
-    info/lfs/objects
-    new
-    preview
-    raw
-    refs
-    tree
-    update
-    wikis
-  ].freeze
-
-  # These are all the paths that follow `/groups/*id/ or `/groups/*group_id`
-  # We need to reject these because we have a `/groups/*id` page that is the same
-  # as the `/*id`.
-  #
-  # If we would allow a subgroup to be created with the name `activity` then
-  # this group would not be accessible through `/groups/parent/activity` since
-  # this would map to the activity-page of it's parent.
-  GROUP_ROUTES = %w[
-    activity
-    avatar
-    edit
-    group_members
-    issues
-    labels
-    merge_requests
-    milestones
-    projects
-    subgroups
-  ].freeze
-
-  CHILD_ROUTES = (WILDCARD_ROUTES | GROUP_ROUTES).freeze
-
-  def self.without_reserved_wildcard_paths_regex
-    @without_reserved_wildcard_paths_regex ||= regex_excluding_child_paths(WILDCARD_ROUTES)
-  end
-
-  def self.without_reserved_child_paths_regex
-    @without_reserved_child_paths_regex ||= regex_excluding_child_paths(CHILD_ROUTES)
-  end
-
-  # This is used to validate a full path.
-  # It doesn't match paths
-  #   - Starting with one of the top level words
-  #   - Containing one of the child level words in the middle of a path
-  def self.regex_excluding_child_paths(child_routes)
-    reserved_top_level_words = Regexp.union(TOP_LEVEL_ROUTES)
-    not_starting_in_reserved_word = %r{\A/?(?!(#{reserved_top_level_words})(/|\z))}
-
-    reserved_child_level_words = Regexp.union(child_routes)
-    not_containing_reserved_child = %r{(?!\S+/(#{reserved_child_level_words})(/|\z))}
-
-    %r{#{not_starting_in_reserved_word}
-       #{not_containing_reserved_child}
-       #{Gitlab::Regex.full_namespace_regex}}x
-  end
-
-  def self.valid?(path)
-    path =~ Gitlab::Regex.full_namespace_regex && !full_path_reserved?(path)
-  end
-
-  def self.full_path_reserved?(path)
-    path = path.to_s.downcase
-    _project_part, namespace_parts = path.reverse.split('/', 2).map(&:reverse)
-
-    wildcard_reserved?(path) || child_reserved?(namespace_parts)
-  end
-
-  def self.child_reserved?(path)
-    return false unless path
-
-    path !~ without_reserved_child_paths_regex
-  end
+  class << self
+    def valid_user_path?(path)
+      encode!(path)
+      "#{path}/" =~ Gitlab::PathRegex.root_namespace_path_regex
+    end
 
-  def self.wildcard_reserved?(path)
-    return false unless path
+    def valid_group_path?(path)
+      encode!(path)
+      "#{path}/" =~ Gitlab::PathRegex.full_namespace_path_regex
+    end
 
-    path !~ without_reserved_wildcard_paths_regex
+    def valid_project_path?(path)
+      encode!(path)
+      "#{path}/" =~ Gitlab::PathRegex.full_project_path_regex
+    end
   end
 
-  delegate :full_path_reserved?,
-           :child_reserved?,
-           to: :class
-
-  def path_reserved_for_record?(record, value)
+  def path_valid_for_record?(record, value)
     full_path = record.respond_to?(:full_path) ? record.full_path : value
 
-    # For group paths the entire path cannot contain a reserved child word
-    # The path doesn't contain the last `_project_part` so we need to validate
-    # if the entire path.
-    # Example:
-    #   A *group* with full path `parent/activity` is reserved.
-    #   A *project* with full path `parent/activity` is allowed.
-    if record.is_a? Group
-      child_reserved?(full_path)
-    else
-      full_path_reserved?(full_path)
+    return true unless full_path
+
+    case record
+    when Project
+      self.class.valid_project_path?(full_path)
+    when Group
+      self.class.valid_group_path?(full_path)
+    else # User or non-Group Namespace
+      self.class.valid_user_path?(full_path)
     end
   end
 
   def validate_each(record, attribute, value)
-    unless value =~ Gitlab::Regex.namespace_regex
-      record.errors.add(attribute, Gitlab::Regex.namespace_regex_message)
+    unless value =~ Gitlab::PathRegex.namespace_format_regex
+      record.errors.add(attribute, Gitlab::PathRegex.namespace_format_message)
       return
     end
 
-    if path_reserved_for_record?(record, value)
+    unless path_valid_for_record?(record, value)
       record.errors.add(attribute, "#{value} is a reserved name")
     end
   end
diff --git a/app/views/admin/application_settings/_form.html.haml b/app/views/admin/application_settings/_form.html.haml
index 0dc1103eece..e1b4e34cd2b 100644
--- a/app/views/admin/application_settings/_form.html.haml
+++ b/app/views/admin/application_settings/_form.html.haml
@@ -394,8 +394,6 @@
 
   %fieldset
     %legend Error Reporting and Logging
-    %p
-      These settings require a restart to take effect.
     .form-group
       .col-sm-offset-2.col-sm-10
         .checkbox
@@ -403,6 +401,7 @@
             = f.check_box :sentry_enabled
             Enable Sentry
           .help-block
+            %p This setting requires a restart to take effect.
             Sentry is an error reporting and logging tool which is currently not shipped with GitLab, get it here:
             %a{ href: 'https://getsentry.com', target: '_blank', rel: 'noopener noreferrer' } https://getsentry.com
 
@@ -411,6 +410,21 @@
       .col-sm-10
         = f.text_field :sentry_dsn, class: 'form-control'
 
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :clientside_sentry_enabled do
+            = f.check_box :clientside_sentry_enabled
+            Enable Clientside Sentry
+          .help-block
+            Sentry can also be used for reporting and logging clientside exceptions.
+            %a{ href: 'https://sentry.io/for/javascript/', target: '_blank', rel: 'noopener noreferrer' } https://sentry.io/for/javascript/
+
+    .form-group
+      = f.label :clientside_sentry_dsn, 'Clientside Sentry DSN', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_field :clientside_sentry_dsn, class: 'form-control'
+
   %fieldset
     %legend Repository Storage
     .form-group
@@ -488,17 +502,24 @@
             Let GitLab inform you when an update is available.
     .form-group
       .col-sm-offset-2.col-sm-10
+        - can_be_configured = @application_setting.usage_ping_can_be_configured?
         .checkbox
           = f.label :usage_ping_enabled do
-            = f.check_box :usage_ping_enabled
+            = f.check_box :usage_ping_enabled, disabled: !can_be_configured
             Usage ping enabled
-            = link_to icon('question-circle'), help_page_path("user/admin_area/settings/usage_statistics", anchor: "usage-data")
+            = link_to icon('question-circle'), help_page_path("user/admin_area/settings/usage_statistics", anchor: "usage-ping")
           .help-block
-            Every week GitLab will report license usage back to GitLab, Inc.
-            Disable this option if you do not want this to occur. To see the
-            JSON payload that will be sent, visit the
-            = succeed '.' do
-              = link_to "Cohorts page", admin_cohorts_path(anchor: 'usage-ping')
+            - if can_be_configured
+              Every week GitLab will report license usage back to GitLab, Inc.
+              Disable this option if you do not want this to occur. To see the
+              JSON payload that will be sent, visit the
+              = succeed '.' do
+                = link_to "Cohorts page", admin_cohorts_path(anchor: 'usage-ping')
+            - else
+              The usage ping is disabled, and cannot be configured through this
+              form. For more information, see the documentation on
+              = succeed '.' do
+                = link_to 'deactivating the usage ping', help_page_path('user/admin_area/settings/usage_statistics', anchor: 'deactivate-the-usage-ping')
 
   %fieldset
     %legend Email
diff --git a/app/views/admin/dashboard/_head.html.haml b/app/views/admin/dashboard/_head.html.haml
index 163bd5662b0..dff549f502c 100644
--- a/app/views/admin/dashboard/_head.html.haml
+++ b/app/views/admin/dashboard/_head.html.haml
@@ -20,7 +20,7 @@
             %span
               Groups
         = nav_link path: 'builds#index' do
-          = link_to admin_builds_path, title: 'Jobs' do
+          = link_to admin_jobs_path, title: 'Jobs' do
             %span
               Jobs
         = nav_link path: ['runners#index', 'runners#show'] do
diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml
index 53f0a1e7fde..3c9f932a225 100644
--- a/app/views/admin/dashboard/index.html.haml
+++ b/app/views/admin/dashboard/index.html.haml
@@ -79,6 +79,12 @@
           = gitlab_pages
           %span.light.pull-right
             = boolean_to_icon gitlab_pages_enabled
+        - gitlab_shared_runners = 'Shared Runners'
+        - gitlab_shared_runners_enabled = Gitlab.config.gitlab_ci.shared_runners_enabled
+        %p{ "aria-label" => "#{gitlab_shared_runners}: status " + (gitlab_shared_runners_enabled ? "on" : "off") }
+          = gitlab_shared_runners
+          %span.light.pull-right
+            = boolean_to_icon gitlab_shared_runners_enabled
 
       .col-md-4
         %h4
diff --git a/app/views/admin/health_check/show.html.haml b/app/views/admin/health_check/show.html.haml
index 6a208d76a38..4deccf4aa93 100644
--- a/app/views/admin/health_check/show.html.haml
+++ b/app/views/admin/health_check/show.html.haml
@@ -16,24 +16,15 @@
       = icon('spinner')
       Reset health check access token
   %p.light
-    Health information can be retrieved as plain text, JSON, or XML using:
+    Health information can be retrieved from the following endpoints. More information is available
+    = link_to 'here', help_page_path('user/admin_area/monitoring/health_check')
     %ul
       %li
-        %code= health_check_url(token: current_application_settings.health_check_access_token)
+        %code= readiness_url(token: current_application_settings.health_check_access_token)
       %li
-        %code= health_check_url(token: current_application_settings.health_check_access_token, format: :json)
+        %code= liveness_url(token: current_application_settings.health_check_access_token)
       %li
-        %code= health_check_url(token: current_application_settings.health_check_access_token, format: :xml)
-
-  %p.light
-    You can also ask for the status of specific services:
-    %ul
-      %li
-        %code= health_check_url(token: current_application_settings.health_check_access_token, checks: :cache)
-      %li
-        %code= health_check_url(token: current_application_settings.health_check_access_token, checks: :database)
-      %li
-        %code= health_check_url(token: current_application_settings.health_check_access_token, checks: :migrations)
+        %code= metrics_url(token: current_application_settings.health_check_access_token)
 
   %hr
   .panel.panel-default
diff --git a/app/views/admin/hook_logs/_index.html.haml b/app/views/admin/hook_logs/_index.html.haml
new file mode 100644
index 00000000000..7dd9943190f
--- /dev/null
+++ b/app/views/admin/hook_logs/_index.html.haml
@@ -0,0 +1,37 @@
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    %h4.prepend-top-0
+      Recent Deliveries
+    %p When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.
+  .col-lg-9
+    - if hook_logs.any?
+      %table.table
+        %thead
+          %tr
+            %th Status
+            %th Trigger
+            %th URL
+            %th Elapsed time
+            %th Request time
+            %th
+        - hook_logs.each do |hook_log|
+          %tr
+            %td
+              = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
+            %td.hidden-xs
+              %span.label.label-gray.deploy-project-label
+                = hook_log.trigger.singularize.titleize
+            %td
+              = truncate(hook_log.url, length: 50)
+            %td.light
+              #{number_with_precision(hook_log.execution_duration, precision: 2)} ms
+            %td.light
+              = time_ago_with_tooltip(hook_log.created_at)
+            %td
+              = link_to 'View details', admin_hook_hook_log_path(hook, hook_log)
+
+      = paginate hook_logs, theme: 'gitlab'
+
+    - else
+      .settings-message.text-center
+        You don't have any webhooks deliveries
diff --git a/app/views/admin/hook_logs/show.html.haml b/app/views/admin/hook_logs/show.html.haml
new file mode 100644
index 00000000000..56127bacda2
--- /dev/null
+++ b/app/views/admin/hook_logs/show.html.haml
@@ -0,0 +1,10 @@
+- page_title 'Request details'
+%h3.page-title
+  Request details
+
+%hr
+
+= link_to 'Resend Request', retry_admin_hook_hook_log_path(@hook, @hook_log), class: "btn btn-default pull-right prepend-left-10"
+
+= render partial: 'shared/hook_logs/content', locals: { hook_log: @hook_log }
+
diff --git a/app/views/admin/hooks/_form.html.haml b/app/views/admin/hooks/_form.html.haml
index 6217d5fb135..645005c6deb 100644
--- a/app/views/admin/hooks/_form.html.haml
+++ b/app/views/admin/hooks/_form.html.haml
@@ -18,19 +18,26 @@
       or adding ssh key. But you can also enable extra triggers like Push events.
 
     .prepend-top-default
+      = form.check_box :repository_update_events, class: 'pull-left'
+      .prepend-left-20
+        = form.label :repository_update_events, class: 'list-label' do
+          %strong Repository update events
+        %p.light
+          This URL will be triggered when repository is updated
+    %div
       = form.check_box :push_events, class: 'pull-left'
       .prepend-left-20
         = form.label :push_events, class: 'list-label' do
           %strong Push events
         %p.light
-          This url will be triggered by a push to the repository
+          This URL will be triggered for each branch updated to the repository
     %div
       = form.check_box :tag_push_events, class: 'pull-left'
       .prepend-left-20
         = form.label :tag_push_events, class: 'list-label' do
           %strong Tag push events
         %p.light
-          This url will be triggered when a new tag is pushed to the repository
+          This URL will be triggered when a new tag is pushed to the repository
 .form-group
   = form.label :enable_ssl_verification, 'SSL verification', class: 'control-label checkbox'
   .col-sm-10
diff --git a/app/views/admin/hooks/edit.html.haml b/app/views/admin/hooks/edit.html.haml
index 0777f5e2629..0e35a1905bf 100644
--- a/app/views/admin/hooks/edit.html.haml
+++ b/app/views/admin/hooks/edit.html.haml
@@ -12,3 +12,9 @@
   = render partial: 'form', locals: { form: f, hook: @hook }
   .form-actions
     = f.submit 'Save changes', class: 'btn btn-create'
+    = link_to 'Test hook', test_admin_hook_path(@hook), class: 'btn btn-default'
+    = link_to 'Remove', admin_hook_path(@hook), method: :delete, class: 'btn btn-remove pull-right', data: { confirm: 'Are you sure?' }
+
+%hr
+
+= render partial: 'admin/hook_logs/index', locals: { hook: @hook, hook_logs: @hook_logs }
diff --git a/app/views/admin/hooks/index.html.haml b/app/views/admin/hooks/index.html.haml
index 71117758921..e92b8bc39f4 100644
--- a/app/views/admin/hooks/index.html.haml
+++ b/app/views/admin/hooks/index.html.haml
@@ -27,7 +27,7 @@
             = link_to 'Remove', admin_hook_path(hook), data: { confirm: 'Are you sure?' }, method: :delete, class: 'btn btn-remove btn-sm'
           .monospace= hook.url
           %div
-            - %w(push_events tag_push_events issues_events note_events merge_requests_events build_events).each do |trigger|
+            - %w(repository_update_events push_events tag_push_events issues_events note_events merge_requests_events job_events).each do |trigger|
               - if hook.send(trigger)
                 %span.label.label-gray= trigger.titleize
             %span.label.label-gray SSL Verification: #{hook.enable_ssl_verification ? 'enabled' : 'disabled'}
diff --git a/app/views/admin/builds/index.html.haml b/app/views/admin/jobs/index.html.haml
index 66d633119c2..09be17f07be 100644
--- a/app/views/admin/builds/index.html.haml
+++ b/app/views/admin/jobs/index.html.haml
@@ -4,15 +4,15 @@
 %div{ class: container_class }
 
   .top-area
-    - build_path_proc = ->(scope) { admin_builds_path(scope: scope) }
+    - build_path_proc = ->(scope) { admin_jobs_path(scope: scope) }
     = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
     .nav-controls
       - if @all_builds.running_or_pending.any?
-        = link_to 'Cancel all', cancel_all_admin_builds_path, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
+        = link_to 'Cancel all', cancel_all_admin_jobs_path, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
 
   .row-content-block.second-block
     #{(@scope || 'all').capitalize} jobs
 
   %ul.content-list.builds-content-list.admin-builds-table
-    = render "projects/builds/table", builds: @builds, admin: true
+    = render "projects/jobs/table", builds: @builds, admin: true
diff --git a/app/views/admin/requests_profiles/index.html.haml b/app/views/admin/requests_profiles/index.html.haml
index ae918086a57..c7b63d9de98 100644
--- a/app/views/admin/requests_profiles/index.html.haml
+++ b/app/views/admin/requests_profiles/index.html.haml
@@ -20,7 +20,7 @@
           %ul.content-list
             - profiles.each do |profile|
               %li
-                = link_to profile.time.to_s(:long), admin_requests_profile_path(profile), data: {no_turbolink: true}
+                = link_to profile.time.to_s(:long), admin_requests_profile_path(profile)
   - else
     %p
       No profiles found
diff --git a/app/views/admin/runners/show.html.haml b/app/views/admin/runners/show.html.haml
index dc4116e1ce0..801430e525e 100644
--- a/app/views/admin/runners/show.html.haml
+++ b/app/views/admin/runners/show.html.haml
@@ -85,7 +85,7 @@
         %tr.build
           %td.id
             - if project
-              = link_to namespace_project_build_path(project.namespace, project, build) do
+              = link_to namespace_project_job_path(project.namespace, project, build) do
                 %strong ##{build.id}
             - else
               %strong ##{build.id}
diff --git a/app/views/admin/system_info/show.html.haml b/app/views/admin/system_info/show.html.haml
index 2e5f120c4e4..9b9559c7fe5 100644
--- a/app/views/admin/system_info/show.html.haml
+++ b/app/views/admin/system_info/show.html.haml
@@ -31,3 +31,8 @@
             %h1 #{number_to_human_size(disk[:bytes_used])} / #{number_to_human_size(disk[:bytes_total])}
             %p= disk[:disk_name]
             %p= disk[:mount_path]
+    .col-sm-4
+      .light-well
+        %h4 Uptime
+        .data
+          %h1= time_ago_with_tooltip(Rails.application.config.booted_at)
diff --git a/app/views/admin/users/index.html.haml b/app/views/admin/users/index.html.haml
index c7cd86527d3..5516134d8a0 100644
--- a/app/views/admin/users/index.html.haml
+++ b/app/views/admin/users/index.html.haml
@@ -3,41 +3,43 @@
 = render "admin/dashboard/head"
 
 %div{ class: container_class }
-  .top-area
-    .prepend-top-default
-      = form_tag admin_users_path, method: :get do
-        - if params[:filter].present?
-          = hidden_field_tag "filter", h(params[:filter])
-        .search-holder
-          .search-field-holder
-            = search_field_tag :search_query, params[:search_query], placeholder: 'Search by name, email or username', class: 'form-control search-text-input js-search-input', spellcheck: false
-            = icon("search", class: "search-icon")
-          .dropdown
-            - toggle_text = if @sort.present? then sort_options_hash[@sort] else sort_title_name end
-            = dropdown_toggle(toggle_text, { toggle: 'dropdown' })
-            %ul.dropdown-menu.dropdown-menu-align-right
-              %li.dropdown-header
-                Sort by
-              %li
-                = link_to admin_users_path(sort: sort_value_name, filter: params[:filter]) do
-                  = sort_title_name
-                = link_to admin_users_path(sort: sort_value_recently_signin, filter: params[:filter]) do
-                  = sort_title_recently_signin
-                = link_to admin_users_path(sort: sort_value_oldest_signin, filter: params[:filter]) do
-                  = sort_title_oldest_signin
-                = link_to admin_users_path(sort: sort_value_recently_created, filter: params[:filter]) do
-                  = sort_title_recently_created
-                = link_to admin_users_path(sort: sort_value_oldest_created, filter: params[:filter]) do
-                  = sort_title_oldest_created
-                = link_to admin_users_path(sort: sort_value_recently_updated, filter: params[:filter]) do
-                  = sort_title_recently_updated
-                = link_to admin_users_path(sort: sort_value_oldest_updated, filter: params[:filter]) do
-                  = sort_title_oldest_updated
-          = link_to 'New user', new_admin_user_path, class: 'btn btn-new btn-search'
+  .prepend-top-default
+    = form_tag admin_users_path, method: :get do
+      - if params[:filter].present?
+        = hidden_field_tag "filter", h(params[:filter])
+      .search-holder
+        .search-field-holder
+          = search_field_tag :search_query, params[:search_query], placeholder: 'Search by name, email or username', class: 'form-control search-text-input js-search-input', spellcheck: false
+          = icon("search", class: "search-icon")
+        .dropdown
+          - toggle_text = if @sort.present? then sort_options_hash[@sort] else sort_title_name end
+          = dropdown_toggle(toggle_text, { toggle: 'dropdown' })
+          %ul.dropdown-menu.dropdown-menu-align-right
+            %li.dropdown-header
+              Sort by
+            %li
+              = link_to admin_users_path(sort: sort_value_name, filter: params[:filter]) do
+                = sort_title_name
+              = link_to admin_users_path(sort: sort_value_recently_signin, filter: params[:filter]) do
+                = sort_title_recently_signin
+              = link_to admin_users_path(sort: sort_value_oldest_signin, filter: params[:filter]) do
+                = sort_title_oldest_signin
+              = link_to admin_users_path(sort: sort_value_recently_created, filter: params[:filter]) do
+                = sort_title_recently_created
+              = link_to admin_users_path(sort: sort_value_oldest_created, filter: params[:filter]) do
+                = sort_title_oldest_created
+              = link_to admin_users_path(sort: sort_value_recently_updated, filter: params[:filter]) do
+                = sort_title_recently_updated
+              = link_to admin_users_path(sort: sort_value_oldest_updated, filter: params[:filter]) do
+                = sort_title_oldest_updated
+        = link_to 'New user', new_admin_user_path, class: 'btn btn-new btn-search'
 
-    .nav-block
-      %ul.nav-links.wide.scrolling-tabs.white.scrolling-tabs
-        .fade-left
+    .top-area.scrolling-tabs-container.inner-page-scroll-tabs
+      .fade-left
+        = icon('angle-left')
+      .fade-right
+        = icon('angle-right')
+      %ul.nav-links.scrolling-tabs
         = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
           = link_to admin_users_path do
             Active
@@ -66,7 +68,6 @@
           = link_to admin_users_path(filter: "wop") do
             Without projects
             %small.badge= number_with_delimiter(User.without_projects.count)
-        .fade-right
 
   %ul.flex-list.content-list
     - if @users.empty?
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index 9aabfb49a29..5f07d2720c2 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -12,9 +12,9 @@
   - if current_user
     .award-menu-holder.js-award-holder
       %button.btn.award-control.has-tooltip.js-add-award{ type: 'button',
-        'aria-label': 'Add emoji',
+        'aria-label': 'Add reaction',
         class: ("js-user-authored" if user_authored),
-        data: { title: 'Add emoji', placement: "bottom" } }
+        data: { title: 'Add reaction', placement: "bottom" } }
         %span{ class: "award-control-icon award-control-icon-neutral" }= custom_icon('emoji_slightly_smiling_face')
         %span{ class: "award-control-icon award-control-icon-positive" }= custom_icon('emoji_smiley')
         %span{ class: "award-control-icon award-control-icon-super-positive" }= custom_icon('emoji_smile')
diff --git a/app/views/ci/status/_graph_badge.html.haml b/app/views/ci/status/_graph_badge.html.haml
deleted file mode 100644
index 128b418090f..00000000000
--- a/app/views/ci/status/_graph_badge.html.haml
+++ /dev/null
@@ -1,20 +0,0 @@
--# Renders the graph node with both the status icon, status name and action icon
-
-- subject = local_assigns.fetch(:subject)
-- status = subject.detailed_status(current_user)
-- klass = "ci-status-icon ci-status-icon-#{status.group} js-ci-status-icon-#{status.group}"
-- tooltip = "#{subject.name} - #{status.label}"
-
-- if status.has_details?
-  = link_to status.details_path, class: 'build-content has-tooltip', data: { toggle: 'tooltip', title: tooltip, container: 'body' }  do
-    %span{ class: klass }= custom_icon(status.icon)
-    .ci-status-text= subject.name
-- else
-  .build-content.has-tooltip{ data: { toggle: 'tooltip', title: tooltip } }
-    %span{ class: klass }= custom_icon(status.icon)
-    .ci-status-text= subject.name
-
-- if status.has_action?
-  = link_to status.action_path, class: 'ci-action-icon-container has-tooltip', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' }  do
-    %i.ci-action-icon-wrapper{ class: "js-#{status.action_icon.dasherize}" }
-      = custom_icon(status.action_icon)
diff --git a/app/views/dashboard/_activities.html.haml b/app/views/dashboard/_activities.html.haml
index 89d991abe54..a676eba2aee 100644
--- a/app/views/dashboard/_activities.html.haml
+++ b/app/views/dashboard/_activities.html.haml
@@ -1,7 +1,4 @@
-.hidden-xs
-  = render "events/event_last_push", event: @last_push
-
-.nav-block
+.nav-block.activities
   .controls
     = link_to dashboard_projects_path(rss_url_options), class: 'btn rss-btn has-tooltip', title: 'Subscribe' do
       %i.fa.fa-rss
diff --git a/app/views/dashboard/activity.html.haml b/app/views/dashboard/activity.html.haml
index 190ad4b40a5..f893c3e1675 100644
--- a/app/views/dashboard/activity.html.haml
+++ b/app/views/dashboard/activity.html.haml
@@ -1,10 +1,16 @@
+- @no_container = true
+
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")
 
 - page_title    "Activity"
 - header_title  "Activity", activity_dashboard_path
 
-= render 'dashboard/activity_head'
+.hidden-xs
+  = render "projects/last_push"
+
+%div{ class: container_class }
+  = render 'dashboard/activity_head'
 
-%section.activities
-  = render 'activities'
+  %section.activities
+    = render 'activities'
diff --git a/app/views/dashboard/issues.html.haml b/app/views/dashboard/issues.html.haml
index faa68468043..d6b46dee0e4 100644
--- a/app/views/dashboard/issues.html.haml
+++ b/app/views/dashboard/issues.html.haml
@@ -8,7 +8,7 @@
   .nav-controls
     = link_to params.merge(rss_url_options), class: 'btn has-tooltip', title: 'Subscribe' do
       = icon('rss')
-    = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue"
+    = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", with_feature_enabled: 'issues'
 
 = render 'shared/issuable/filter', type: :issues
 = render 'shared/issues'
diff --git a/app/views/dashboard/merge_requests.html.haml b/app/views/dashboard/merge_requests.html.haml
index 12966c01950..6f6afe161d1 100644
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@@ -4,7 +4,7 @@
 .top-area
   = render 'shared/issuable/nav', type: :merge_requests
   .nav-controls
-    = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request"
+    = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request", with_feature_enabled: 'merge_requests'
 
 = render 'shared/issuable/filter', type: :merge_requests
 = render 'shared/merge_requests'
diff --git a/app/views/dashboard/projects/index.html.haml b/app/views/dashboard/projects/index.html.haml
index 596499230f9..2890ae7173b 100644
--- a/app/views/dashboard/projects/index.html.haml
+++ b/app/views/dashboard/projects/index.html.haml
@@ -1,19 +1,21 @@
+- @no_container = true
+
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")
 
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
 
-- unless show_user_callout?
-  = render 'shared/user_callout'
+= render "projects/last_push"
 
-- if @projects.any? || params[:name]
-  = render 'dashboard/projects_head'
+%div{ class: container_class }
+  - if show_user_callout?
+    = render 'shared/user_callout'
 
-- if @last_push
-  = render "events/event_last_push", event: @last_push
+  - if @projects.any? || params[:name]
+    = render 'dashboard/projects_head'
 
-- if @projects.any? || params[:name]
-  = render 'projects'
-- else
-  = render "zero_authorized_projects"
+  - if @projects.any? || params[:name]
+    = render 'projects'
+  - else
+    = render "zero_authorized_projects"
diff --git a/app/views/dashboard/projects/starred.html.haml b/app/views/dashboard/projects/starred.html.haml
index 162ae153b1c..99efe9c9b86 100644
--- a/app/views/dashboard/projects/starred.html.haml
+++ b/app/views/dashboard/projects/starred.html.haml
@@ -1,13 +1,15 @@
+- @no_container = true
+
 - page_title "Starred Projects"
 - header_title "Projects", dashboard_projects_path
 
-= render 'dashboard/projects_head'
+= render "projects/last_push"
 
-- if @last_push
-  = render "events/event_last_push", event: @last_push
+%div{ class: container_class }
+  = render 'dashboard/projects_head'
 
-- if @projects.any? || params[:filter_projects]
-  = render 'projects'
-- else
-  %h3 You don't have starred projects yet
-  %p.slead Visit project page and press on star icon and it will appear on this page.
+  - if @projects.any? || params[:filter_projects]
+    = render 'projects'
+  - else
+    %h3 You don't have starred projects yet
+    %p.slead Visit project page and press on star icon and it will appear on this page.
diff --git a/app/views/devise/passwords/edit.html.haml b/app/views/devise/passwords/edit.html.haml
index 5e189e6dc54..eb0e6701627 100644
--- a/app/views/devise/passwords/edit.html.haml
+++ b/app/views/devise/passwords/edit.html.haml
@@ -6,10 +6,10 @@
         = devise_error_messages!
       = f.hidden_field :reset_password_token
       .form-group
-        = f.label 'New password', for: :password
+        = f.label 'New password', for: "user_password"
         = f.password_field :password, class: "form-control top",  required: true, title: 'This field is required'
       .form-group
-        = f.label 'Confirm new password', for: :password_confirmation
+        = f.label 'Confirm new password', for: "user_password_confirmation"
         = f.password_field :password_confirmation, class: "form-control bottom", title: 'This field is required', required: true
       .clearfix
         = f.submit "Change your password", class: "btn btn-primary"
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index 21c751a23f8..4095f30c369 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -1,6 +1,6 @@
 = form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive'}) do |f|
   .form-group
-    = f.label "Username or email", for: :login
+    = f.label "Username or email", for: "user_login"
     = f.text_field :login, class: "form-control top", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required."
   .form-group
     = f.label :password
diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml
index a2f6a7ab1cb..d696577278d 100644
--- a/app/views/devise/shared/_signup_box.html.haml
+++ b/app/views/devise/shared/_signup_box.html.haml
@@ -8,7 +8,7 @@
         = f.text_field :name, class: "form-control top", required: true, title: "This field is required."
       .username.form-group
         = f.label :username
-        = f.text_field :username, class: "form-control middle", pattern: Gitlab::Regex::NAMESPACE_REGEX_STR_JS, required: true, title: 'Please create a username with only alphanumeric characters.'
+        = f.text_field :username, class: "form-control middle", pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, required: true, title: 'Please create a username with only alphanumeric characters.'
         %p.validation-error.hide Username is already taken.
         %p.validation-success.hide Username is available.
         %p.validation-pending.hide Checking username availability...
diff --git a/app/views/discussions/_diff_with_notes.html.haml b/app/views/discussions/_diff_with_notes.html.haml
index 78c5b0c1dda..70042dee20f 100644
--- a/app/views/discussions/_diff_with_notes.html.haml
+++ b/app/views/discussions/_diff_with_notes.html.haml
@@ -3,7 +3,7 @@
 
 .diff-file.file-holder
   .js-file-title.file-title
-    = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_file.content_commit, project: discussion.project, url: discussion_path(discussion)
+    = render "projects/diffs/file_header", diff_file: diff_file, url: discussion_path(discussion), show_toggle: false
 
   .diff-content.code.js-syntax-highlight
     %table
diff --git a/app/views/discussions/_discussion.html.haml b/app/views/discussions/_discussion.html.haml
index 38e85168f40..578e751ab47 100644
--- a/app/views/discussions/_discussion.html.haml
+++ b/app/views/discussions/_discussion.html.haml
@@ -26,16 +26,15 @@
               - commit = discussion.noteable
               - if commit
                 commit
-                = link_to commit.short_id, url, class: 'monospace'
+                = link_to commit.short_id, url, class: 'commit-sha'
               - else
                 a deleted commit
             - elsif discussion.diff_discussion?
               on
               = conditional_link_to url.present?, url do
-                - if discussion.active?
-                  the diff
-                - else
-                  an outdated diff
+                - unless discussion.active?
+                  an old version of
+                the diff
 
             = time_ago_with_tooltip(discussion.created_at, placement: "bottom", html_class: "note-created-ago")
           = render "discussions/headline", discussion: discussion
diff --git a/app/views/discussions/_jump_to_next.html.haml b/app/views/discussions/_jump_to_next.html.haml
index 69bd416c4de..3db509f24a5 100644
--- a/app/views/discussions/_jump_to_next.html.haml
+++ b/app/views/discussions/_jump_to_next.html.haml
@@ -3,7 +3,7 @@
   %jump-to-discussion{ "inline-template" => true, ":discussion-id" => "'#{discussion.try(:id)}'" }
     .btn-group{ role: "group", "v-show" => "!allResolved", "v-if" => "showButton" }
       %button.btn.btn-default.discussion-next-btn.has-tooltip{ "@click" => "jumpToNextUnresolvedDiscussion",
-        title: "Jump to next unresolved discussion",
-        "aria-label" => "Jump to next unresolved discussion",
+        ":title" => "buttonText",
+        ":aria-label" => "buttonText",
         data: { container: "body" } }
         = custom_icon("next_discussion")
diff --git a/app/views/discussions/_notes.html.haml b/app/views/discussions/_notes.html.haml
index 964473ee3e0..db5ab939948 100644
--- a/app/views/discussions/_notes.html.haml
+++ b/app/views/discussions/_notes.html.haml
@@ -2,8 +2,10 @@
   %ul.notes{ data: { discussion_id: discussion.id } }
     = render partial: "shared/notes/note", collection: discussion.notes, as: :note
 
-  - if current_user
-    .discussion-reply-holder
+  .flash-container
+
+  .discussion-reply-holder
+    - if can_create_note?
       - if discussion.potentially_resolvable?
         - line_type = local_assigns.fetch(:line_type, nil)
 
@@ -18,3 +20,10 @@
             = render "discussions/jump_to_next", discussion: discussion
       - else
         = link_to_reply_discussion(discussion)
+    - elsif !current_user
+      .disabled-comment.text-center
+        Please
+        = link_to "register", new_session_path(:user, redirect_to_referer: 'yes')
+        or
+        = link_to "sign in", new_session_path(:user, redirect_to_referer: 'yes')
+        to reply
diff --git a/app/views/errors/omniauth_error.html.haml b/app/views/errors/omniauth_error.html.haml
index 72508b91134..20b7fa471a0 100644
--- a/app/views/errors/omniauth_error.html.haml
+++ b/app/views/errors/omniauth_error.html.haml
@@ -1,16 +1,15 @@
 - content_for(:title, 'Auth Error')
-%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
-  %h1
-    422
+
 .container
+  = render "shared/errors/graphic_422.svg"
   %h3 Sign-in using #{@provider} auth failed
-  %hr
-  %p Sign-in failed because #{@error}.
-  %p There are couple of steps you can take:
 
-%ul
-  %li Try logging in using your email
-  %li Try logging in using your username
-  %li If you have forgotten your password, try recovering it using #{ link_to "Password recovery", new_password_path(resource_name) }
+  %p.light.subtitle Sign-in failed because #{@error}.
+
+  %p Try logging in using your username or email. If you have forgotten your password, try recovering it
 
-%p If none of the options work, try contacting the GitLab administrator.
+  = link_to "Sign in", new_session_path(:user), class: 'btn primary'
+  = link_to "Recover password", new_password_path(resource_name), class: 'btn secondary'
+
+  %hr
+  %p.light If none of the options work, try contacting a GitLab administrator.
diff --git a/app/views/events/_commit.html.haml b/app/views/events/_commit.html.haml
index 1bc9f604438..3c64f1be5ff 100644
--- a/app/views/events/_commit.html.haml
+++ b/app/views/events/_commit.html.haml
@@ -1,5 +1,5 @@
 %li.commit
   .commit-row-title
-    = link_to truncate_sha(commit[:id]), namespace_project_commit_path(project.namespace, project, commit[:id]), class: "commit_short_id", alt: '', title: truncate_sha(commit[:id])
+    = link_to truncate_sha(commit[:id]), namespace_project_commit_path(project.namespace, project, commit[:id]), class: "commit-sha", alt: '', title: truncate_sha(commit[:id])
     &middot;
     = markdown event_commit_title(commit[:message]), project: project, pipeline: :single_line, author: event.author
diff --git a/app/views/events/_event_last_push.html.haml b/app/views/events/_event_last_push.html.haml
deleted file mode 100644
index 1584695a62b..00000000000
--- a/app/views/events/_event_last_push.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-- if show_last_push_widget?(event)
-  .row-content-block.clear-block.last-push-widget
-    .event-last-push
-      .event-last-push-text
-        %span You pushed to
-        = link_to namespace_project_commits_path(event.project.namespace, event.project, event.ref_name), title: h(event.project.name) do
-          %strong= event.ref_name
-        %span at
-        %strong= link_to_project event.project
-        #{time_ago_with_tooltip(event.created_at)}
-
-      .pull-right
-        = link_to new_mr_path_from_push_event(event), title: "New merge request", class: "btn btn-info btn-sm" do
-          Create merge request
diff --git a/app/views/events/event/_push.html.haml b/app/views/events/event/_push.html.haml
index c0943100ae3..769ac655d0a 100644
--- a/app/views/events/event/_push.html.haml
+++ b/app/views/events/event/_push.html.haml
@@ -7,7 +7,7 @@
   %span.pushed #{event.action_name} #{event.ref_type}
   %strong
     - commits_link = namespace_project_commits_path(project.namespace, project, event.ref_name)
-    = link_to_if project.repository.branch_exists?(event.ref_name), event.ref_name, commits_link
+    = link_to_if project.repository.branch_exists?(event.ref_name), event.ref_name, commits_link, class: 'ref-name'
 
   = render "events/event_scope", event: event
 
diff --git a/app/views/groups/_activities.html.haml b/app/views/groups/_activities.html.haml
index d7851c79990..fd6e7111f38 100644
--- a/app/views/groups/_activities.html.haml
+++ b/app/views/groups/_activities.html.haml
@@ -1,6 +1,3 @@
-.hidden-xs
-  = render "events/event_last_push", event: @last_push
-
 .nav-block
   .controls
     = link_to group_path(@group, rss_url_options), class: 'btn rss-btn has-tooltip' , title: 'Subscribe' do
diff --git a/app/views/groups/_head.html.haml b/app/views/groups/_head.html.haml
index 873504099d4..0f63774fb9b 100644
--- a/app/views/groups/_head.html.haml
+++ b/app/views/groups/_head.html.haml
@@ -12,3 +12,6 @@
           = link_to activity_group_path(@group), title: 'Activity' do
             %span
               Activity
+
+.hidden-xs
+  = render "projects/last_push"
diff --git a/app/views/groups/_show_nav.html.haml b/app/views/groups/_show_nav.html.haml
index b2097e88741..35b75bc0923 100644
--- a/app/views/groups/_show_nav.html.haml
+++ b/app/views/groups/_show_nav.html.haml
@@ -2,6 +2,7 @@
   = nav_link(page: group_path(@group)) do
     = link_to group_path(@group) do
       Projects
-  = nav_link(page: subgroups_group_path(@group)) do
-    = link_to subgroups_group_path(@group) do
-      Subgroups
+  - if Group.supports_nested_groups?
+    = nav_link(page: subgroups_group_path(@group)) do
+      = link_to subgroups_group_path(@group) do
+        Subgroups
diff --git a/app/views/groups/milestones/new.html.haml b/app/views/groups/milestones/new.html.haml
index 8d3aa4d1a74..7c7573862d0 100644
--- a/app/views/groups/milestones/new.html.haml
+++ b/app/views/groups/milestones/new.html.haml
@@ -26,7 +26,7 @@
       .form-group.milestone-description
         = f.label :description, "Description", class: "control-label"
         .col-sm-10
-          = render layout: 'projects/md_preview', locals: { preview_class: "md-preview" } do
+          = render layout: 'projects/md_preview', locals: { url: '' } do
             = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...'
             .clearfix
             .error-alert
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 18997baa998..80a8ba4a755 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -6,7 +6,6 @@
 = render 'groups/head'
 = render 'groups/home_panel'
 
-
 .groups-header{ class: container_class }
   .top-area
     = render 'groups/show_nav'
diff --git a/app/views/import/base/create.js.haml b/app/views/import/base/create.js.haml
index 8e929538351..57e8c3ca1e1 100644
--- a/app/views/import/base/create.js.haml
+++ b/app/views/import/base/create.js.haml
@@ -10,4 +10,4 @@
 - else
   :plain
     job = $("tr#repo_#{@repo_id}")
-    job.find(".import-actions").html("<i class='fa fa-exclamation-circle'></i> Error saving project: #{escape_javascript(@project.errors.full_messages.join(','))}")
+    job.find(".import-actions").html("<i class='fa fa-exclamation-circle'></i> Error saving project: #{escape_javascript(h(@project.errors.full_messages.join(',')))}")
diff --git a/app/views/import/fogbugz/new_user_map.html.haml b/app/views/import/fogbugz/new_user_map.html.haml
index 9999a4362c6..c52a515226e 100644
--- a/app/views/import/fogbugz/new_user_map.html.haml
+++ b/app/views/import/fogbugz/new_user_map.html.haml
@@ -46,6 +46,3 @@
 
   .form-actions
     = submit_tag 'Continue to the next step', class: 'btn btn-create'
-
-:javascript
-  new UsersSelect();
diff --git a/app/views/issues/_issue.atom.builder b/app/views/issues/_issue.atom.builder
index 23a88448055..2ed78bb3b65 100644
--- a/app/views/issues/_issue.atom.builder
+++ b/app/views/issues/_issue.atom.builder
@@ -23,10 +23,19 @@ xml.entry do
     end
   end
 
-  if issue.assignee
+  if issue.assignees.any?
+    xml.assignees do
+      issue.assignees.each do |assignee|
+        xml.assignee do
+          xml.name assignee.name
+          xml.email assignee.public_email
+        end
+      end
+    end
+
     xml.assignee do
-      xml.name issue.assignee.name
-      xml.email issue.assignee_public_email
+      xml.name issue.assignees.first.name
+      xml.email issue.assignees.first.public_email
     end
   end
 end
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 19473b6ab27..9e354987401 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -27,10 +27,15 @@
 
   = stylesheet_link_tag "application", media: "all"
   = stylesheet_link_tag "print",       media: "print"
+  = stylesheet_link_tag "test",        media: "all" if Rails.env.test?
+
+  = Gon::Base.render_data
 
   = webpack_bundle_tag "runtime"
   = webpack_bundle_tag "common"
   = webpack_bundle_tag "main"
+  = webpack_bundle_tag "raven" if current_application_settings.clientside_sentry_enabled
+  = webpack_bundle_tag "test" if Rails.env.test?
 
   - if content_for?(:page_specific_javascripts)
     = yield :page_specific_javascripts
diff --git a/app/views/layouts/_init_auto_complete.html.haml b/app/views/layouts/_init_auto_complete.html.haml
index 769f6fb0151..6caaba240bb 100644
--- a/app/views/layouts/_init_auto_complete.html.haml
+++ b/app/views/layouts/_init_auto_complete.html.haml
@@ -3,6 +3,7 @@
 
 - if project
   :javascript
+    gl.GfmAutoComplete = gl.GfmAutoComplete || {};
     gl.GfmAutoComplete.dataSources = {
       members: "#{members_namespace_project_autocomplete_sources_path(project.namespace, project, type: noteable_type, type_id: params[:id])}",
       issues: "#{issues_namespace_project_autocomplete_sources_path(project.namespace, project)}",
@@ -11,5 +12,3 @@
       milestones: "#{milestones_namespace_project_autocomplete_sources_path(project.namespace, project)}",
       commands: "#{commands_namespace_project_autocomplete_sources_path(project.namespace, project, type: noteable_type, type_id: params[:id])}"
     };
-
-    gl.GfmAutoComplete.setup();
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index 0e64ebd71b8..b689991bb6d 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -13,7 +13,7 @@
         .location-badge= label
       .search-input-wrap
         .dropdown{ data: { url: search_autocomplete_path } }
-          = search_field_tag 'search', nil, placeholder: 'Search', class: 'search-input dropdown-menu-toggle no-outline js-search-dashboard-options', spellcheck: false, tabindex: '1', autocomplete: 'off', data: { toggle: 'dropdown', issues_path: issues_dashboard_url, mr_path: merge_requests_dashboard_url }
+          = search_field_tag 'search', nil, placeholder: 'Search', class: 'search-input dropdown-menu-toggle no-outline js-search-dashboard-options', spellcheck: false, tabindex: '1', autocomplete: 'off', data: { toggle: 'dropdown', issues_path: issues_dashboard_url, mr_path: merge_requests_dashboard_url }, aria: { label: 'Search' }
           .dropdown-menu.dropdown-select
             = dropdown_content do
               %ul
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 36543edc040..03688e9ff21 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,11 +1,9 @@
 !!! 5
-%html{ lang: "en", class: "#{page_class}" }
+%html{ lang: I18n.locale, class: "#{page_class}" }
   = render "layouts/head"
   %body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}" } }
-    = Gon::Base.render_data
-
+    = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/header/default", title: header_title
     = render 'layouts/page', sidebar: sidebar, nav: nav
 
     = yield :scripts_body
-    = render "layouts/init_auto_complete" if @gfm_form
diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml
index 3368a9beb29..52fb46eb8c9 100644
--- a/app/views/layouts/devise.html.haml
+++ b/app/views/layouts/devise.html.haml
@@ -3,7 +3,6 @@
   = render "layouts/head"
   %body.ui_charcoal.login-page.application.navless{ data: { page: body_data_page } }
     .page-wrap
-      = Gon::Base.render_data
       = render "layouts/header/empty"
       = render "layouts/broadcast"
       .container.navless-container
diff --git a/app/views/layouts/devise_empty.html.haml b/app/views/layouts/devise_empty.html.haml
index 7466423a934..ed6731bde95 100644
--- a/app/views/layouts/devise_empty.html.haml
+++ b/app/views/layouts/devise_empty.html.haml
@@ -2,7 +2,6 @@
 %html{ lang: "en" }
   = render "layouts/head"
   %body.ui_charcoal.login-page.application.navless
-    = Gon::Base.render_data
     = render "layouts/header/empty"
     = render "layouts/broadcast"
     .container.navless-container
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 659d548df18..9db98451f1d 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,4 +1,5 @@
 %header.navbar.navbar-gitlab{ class: nav_header_class }
+  .navbar-border
   %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
   .container-fluid
     .header-content
diff --git a/app/views/layouts/nav/_admin.html.haml b/app/views/layouts/nav/_admin.html.haml
index d068c895fa3..86779eeaf15 100644
--- a/app/views/layouts/nav/_admin.html.haml
+++ b/app/views/layouts/nav/_admin.html.haml
@@ -5,7 +5,7 @@
   .fade-right
     = icon('angle-right')
   %ul.nav-links.scrolling-tabs
-    = nav_link(controller: %w(dashboard admin projects users groups builds runners), html_options: {class: 'home'}) do
+    = nav_link(controller: %w(dashboard admin projects users groups builds runners cohorts), html_options: {class: 'home'}) do
       = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
         %span
           Overview
@@ -17,7 +17,7 @@
       = link_to admin_broadcast_messages_path, title: 'Messages' do
         %span
           Messages
-    = nav_link(controller: :hooks) do
+    = nav_link(controller: [:hooks, :hook_logs]) do
       = link_to admin_hooks_path, title: 'Hooks' do
         %span
           System Hooks
diff --git a/app/views/layouts/nav/_profile.html.haml b/app/views/layouts/nav/_profile.html.haml
index e06301bda14..ae1e1361f0f 100644
--- a/app/views/layouts/nav/_profile.html.haml
+++ b/app/views/layouts/nav/_profile.html.haml
@@ -48,6 +48,6 @@
         %span
           Preferences
     = nav_link(path: 'profiles#audit_log') do
-      = link_to audit_log_profile_path, title: 'Audit Log' do
+      = link_to audit_log_profile_path, title: 'Authentication log' do
         %span
-          Audit Log
+          Authentication log
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index cdcac7e4264..29658da7792 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -35,7 +35,7 @@
         = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
           %span
             Merge Requests
-            %span.badge.count.merge_counter= number_with_delimiter(MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.count)
+            %span.badge.count.merge_counter.js-merge-counter= number_with_delimiter(MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.count)
 
     - if project_nav_tab? :pipelines
       = nav_link(controller: [:pipelines, :builds, :environments, :artifacts]) do
@@ -92,7 +92,7 @@
     -# Shortcut to Pipelines > Jobs
     - if project_nav_tab? :builds
       %li.hidden
-        = link_to project_builds_path(@project), title: 'Jobs', class: 'shortcuts-builds' do
+        = link_to project_jobs_path(@project), title: 'Jobs', class: 'shortcuts-builds' do
           Jobs
 
     -# Shortcut to commits page
diff --git a/app/views/layouts/oauth_error.html.haml b/app/views/layouts/oauth_error.html.haml
new file mode 100644
index 00000000000..34bcd2a8b3a
--- /dev/null
+++ b/app/views/layouts/oauth_error.html.haml
@@ -0,0 +1,127 @@
+!!! 5
+%html{ lang: "en" }
+  %head
+    %meta{ :content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport" }
+    %title= yield(:title)
+    :css
+      body {
+        color: #666;
+        text-align: center;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        margin: auto;
+        font-size: 16px;
+      }
+
+      .container {
+        margin: auto 20px;
+      }
+
+      h3 {
+        color: #456;
+        font-size: 22px;
+        font-weight: bold;
+        margin-bottom: 6px;
+      }
+
+      p {
+        max-width: 470px;
+        margin: 16px auto;
+      }
+
+      .subtitle {
+        margin: 0 auto 20px;
+      }
+
+      svg {
+        width: 280px;
+        height: 280px;
+        display: block;
+        margin: 40px auto;
+      }
+
+      .tv-screen path {
+        animation: move-lines 1s linear infinite;
+      }
+
+
+      @keyframes move-lines {
+        0% {transform: translateY(0)}
+        50% {transform: translateY(-10px)}
+        100% {transform: translateY(-20px)}
+      }
+
+      .tv-screen path:nth-child(1) {
+        animation-delay: .2s
+      }
+
+      .tv-screen path:nth-child(2) {
+        animation-delay: .4s
+      }
+
+      .tv-screen path:nth-child(3) {
+        animation-delay: .6s
+      }
+
+      .tv-screen path:nth-child(4) {
+        animation-delay: .8s
+      }
+
+      .tv-screen path:nth-child(5) {
+        animation-delay: 2s
+      }
+
+      .text-422 {
+        animation: flicker 1s infinite;
+      }
+
+      @keyframes flicker {
+        0% {opacity: 0.3;}
+        10% {opacity: 1;}
+        15% {opacity: .3;}
+        20% {opacity: .5;}
+        25% {opacity: 1;}
+      }
+
+      .light {
+        color: #8D8D8D;
+      }
+
+      hr {
+        max-width: 600px;
+        margin: 18px auto;
+        border: 0;
+        border-top: 1px solid #EEE;
+      }
+
+      .btn {
+        padding: 8px 14px;
+        border-radius: 3px;
+        border: 1px solid;
+        display: inline-block;
+        text-decoration: none;
+        margin: 4px 8px;
+        font-size: 14px;
+      }
+
+      .primary {
+        color: #fff;
+        background-color: #1aaa55;
+        border-color: #168f48;
+      }
+
+      .primary:hover {
+        background-color: #168f48;
+      }
+
+      .secondary {
+        color: #1aaa55;
+        background-color: #fff;
+        border-color: #1aaa55;
+      }
+
+      .secondary:hover {
+        background-color: #f3fff8;
+      }
+
+%body
+  = yield
diff --git a/app/views/layouts/project.html.haml b/app/views/layouts/project.html.haml
index e9e06e5c8e3..3f5b0c54e50 100644
--- a/app/views/layouts/project.html.haml
+++ b/app/views/layouts/project.html.haml
@@ -5,14 +5,9 @@
 
 - content_for :project_javascripts do
   - project = @target_project || @project
-  - if @project_wiki && @page
-    - preview_markdown_path = namespace_project_wiki_preview_markdown_path(project.namespace, project, @page.slug)
-  - else
-    - preview_markdown_path = preview_markdown_namespace_project_path(project.namespace, project)
   - if current_user
     :javascript
       window.uploads_path = "#{namespace_project_uploads_path project.namespace,project}";
-      window.preview_markdown_path = "#{preview_markdown_path}";
 
 - content_for :header_content do
   .js-dropdown-menu-projects
diff --git a/app/views/layouts/snippets.html.haml b/app/views/layouts/snippets.html.haml
index 02ca3ee7a28..98b75cea03f 100644
--- a/app/views/layouts/snippets.html.haml
+++ b/app/views/layouts/snippets.html.haml
@@ -1,3 +1,9 @@
 - header_title  "Snippets", snippets_path
 
+- content_for :page_specific_javascripts do
+  - if @snippet&.persisted? && current_user
+    :javascript
+      window.uploads_path = "#{upload_path('personal_snippet', @snippet)}";
+      window.preview_markdown_path = "#{preview_markdown_snippet_path(@snippet)}";
+
 = render template: "layouts/application"
diff --git a/app/views/notify/_reassigned_issuable_email.html.haml b/app/views/notify/_reassigned_issuable_email.html.haml
deleted file mode 100644
index fd35713f79c..00000000000
--- a/app/views/notify/_reassigned_issuable_email.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-%p
-  Assignee changed
-  - if @previous_assignee
-    from
-    %strong= @previous_assignee.name
-  to
-  - if issuable.assignee_id
-    %strong= issuable.assignee_name
-  - else
-    %strong Unassigned
diff --git a/app/views/notify/_reassigned_issuable_email.text.erb b/app/views/notify/_reassigned_issuable_email.text.erb
deleted file mode 100644
index daf20a226dd..00000000000
--- a/app/views/notify/_reassigned_issuable_email.text.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-Reassigned <%= issuable.class.model_name.human.titleize %> <%= issuable.iid %>
-
-<%= url_for([issuable.project.namespace.becomes(Namespace), issuable.project, issuable, { only_path: false }]) %>
-
-Assignee changed <%= "from #{@previous_assignee.name}" if @previous_assignee -%>
- to <%= "#{issuable.assignee_id ? issuable.assignee_name : 'Unassigned'}" %>
diff --git a/app/views/notify/links/ci/builds/_build.html.haml b/app/views/notify/links/ci/builds/_build.html.haml
index d35b3839171..644cf506eff 100644
--- a/app/views/notify/links/ci/builds/_build.html.haml
+++ b/app/views/notify/links/ci/builds/_build.html.haml
@@ -1,2 +1,2 @@
-%a{ href: pipeline_build_url(pipeline, build), style: "color:#3777b0;text-decoration:none;" }
+%a{ href: pipeline_job_url(pipeline, build), style: "color:#3777b0;text-decoration:none;" }
   = build.name
diff --git a/app/views/notify/links/ci/builds/_build.text.erb b/app/views/notify/links/ci/builds/_build.text.erb
index 741c7f344c8..773ae8174e9 100644
--- a/app/views/notify/links/ci/builds/_build.text.erb
+++ b/app/views/notify/links/ci/builds/_build.text.erb
@@ -1 +1 @@
-Job #<%= build.id %> ( <%= pipeline_build_url(pipeline, build) %> )
+Job #<%= build.id %> ( <%= pipeline_job_url(pipeline, build) %> )
diff --git a/app/views/notify/new_issue_email.html.haml b/app/views/notify/new_issue_email.html.haml
index c762578971a..eb5157ccac9 100644
--- a/app/views/notify/new_issue_email.html.haml
+++ b/app/views/notify/new_issue_email.html.haml
@@ -2,9 +2,9 @@
   %p.details
     #{link_to @issue.author_name, user_url(@issue.author)} created an issue:
 
-- if @issue.assignee_id.present?
+- if @issue.assignees.any?
   %p
-    Assignee: #{@issue.assignee_name}
+    Assignee: #{@issue.assignee_list}
 
 - if @issue.description
   %div
diff --git a/app/views/notify/new_issue_email.text.erb b/app/views/notify/new_issue_email.text.erb
index ca5c2f2688c..13f1ac08e94 100644
--- a/app/views/notify/new_issue_email.text.erb
+++ b/app/views/notify/new_issue_email.text.erb
@@ -2,6 +2,6 @@ New Issue was created.
 
 Issue <%= @issue.iid %>: <%= url_for(namespace_project_issue_url(@issue.project.namespace, @issue.project, @issue)) %>
 Author:    <%= @issue.author_name %>
-Assignee:  <%= @issue.assignee_name %>
+Assignee:  <%= @issue.assignee_list %>
 
 <%= @issue.description %>
diff --git a/app/views/notify/new_mention_in_issue_email.text.erb b/app/views/notify/new_mention_in_issue_email.text.erb
index 457e94b4800..f19ac3adfc7 100644
--- a/app/views/notify/new_mention_in_issue_email.text.erb
+++ b/app/views/notify/new_mention_in_issue_email.text.erb
@@ -2,6 +2,6 @@ You have been mentioned in an issue.
 
 Issue <%= @issue.iid %>: <%= url_for(namespace_project_issue_url(@issue.project.namespace, @issue.project, @issue)) %>
 Author:    <%= @issue.author_name %>
-Assignee:  <%= @issue.assignee_name %>
+Assignee:  <%= @issue.assignee_list %>
 
 <%= @issue.description %>
diff --git a/app/views/notify/reassigned_issue_email.html.haml b/app/views/notify/reassigned_issue_email.html.haml
index 498ba8b8365..ee2f40e1683 100644
--- a/app/views/notify/reassigned_issue_email.html.haml
+++ b/app/views/notify/reassigned_issue_email.html.haml
@@ -1 +1,10 @@
-= render 'reassigned_issuable_email', issuable: @issue
+%p
+  Assignee changed
+  - if @previous_assignees.any?
+    from
+    %strong= @previous_assignees.map(&:name).to_sentence
+  to
+  - if @issue.assignees.any?
+    %strong= @issue.assignee_list
+  - else
+    %strong Unassigned
diff --git a/app/views/notify/reassigned_issue_email.text.erb b/app/views/notify/reassigned_issue_email.text.erb
index 710253be984..6c357f1074a 100644
--- a/app/views/notify/reassigned_issue_email.text.erb
+++ b/app/views/notify/reassigned_issue_email.text.erb
@@ -1 +1,6 @@
-<%= render 'reassigned_issuable_email', issuable: @issue %>
+Reassigned Issue <%= @issue.iid %>
+
+<%= url_for([@issue.project.namespace.becomes(Namespace), @issue.project, @issue, { only_path: false }]) %>
+
+Assignee changed <%= "from #{@previous_assignees.map(&:name).to_sentence}" if @previous_assignees.any? -%>
+ to <%= "#{@issue.assignees.any? ? @issue.assignee_list : 'Unassigned'}" %>
diff --git a/app/views/notify/reassigned_merge_request_email.html.haml b/app/views/notify/reassigned_merge_request_email.html.haml
index 2a650130f59..24c2b08810b 100644
--- a/app/views/notify/reassigned_merge_request_email.html.haml
+++ b/app/views/notify/reassigned_merge_request_email.html.haml
@@ -1 +1,10 @@
-= render 'reassigned_issuable_email', issuable: @merge_request
+%p
+  Assignee changed
+  - if @previous_assignee
+    from
+    %strong= @previous_assignee.name
+  to
+  - if @merge_request.assignee_id
+    %strong= @merge_request.assignee_name
+  - else
+    %strong Unassigned
diff --git a/app/views/notify/reassigned_merge_request_email.text.erb b/app/views/notify/reassigned_merge_request_email.text.erb
index b5b4f1ff99a..998a40fefde 100644
--- a/app/views/notify/reassigned_merge_request_email.text.erb
+++ b/app/views/notify/reassigned_merge_request_email.text.erb
@@ -1 +1,6 @@
-<%= render 'reassigned_issuable_email', issuable: @merge_request %>
+Reassigned Merge Request <%= @merge_request.iid %>
+
+<%= url_for([@merge_request.project.namespace.becomes(Namespace), @merge_request.project, @merge_request, { only_path: false }]) %>
+
+Assignee changed <%= "from #{@previous_assignee.name}" if @previous_assignee -%>
+ to <%= "#{@merge_request.assignee_id ? @merge_request.assignee_name : 'Unassigned'}" %>
diff --git a/app/views/notify/repository_push_email.html.haml b/app/views/notify/repository_push_email.html.haml
index 02eb7c8462c..546376aeed8 100644
--- a/app/views/notify/repository_push_email.html.haml
+++ b/app/views/notify/repository_push_email.html.haml
@@ -27,40 +27,38 @@
   %h4 #{pluralize @message.diffs_count, "changed file"}:
 
   %ul
-    - @message.diffs.each do |diff|
+    - @message.diffs.each do |diff_file|
       %li.file-stats
-        %a{ href: "#{@message.target_url if @message.disable_diffs?}##{hexdigest(diff.file_path)}" }
-          - if diff.deleted_file
+        %a{ href: "#{@message.target_url if @message.disable_diffs?}##{hexdigest(diff_file.file_path)}" }
+          - if diff_file.deleted_file?
             %span.deleted-file
               &minus;
-              = diff.old_path
-          - elsif diff.renamed_file
-            = diff.old_path
+              = diff_file.old_path
+          - elsif diff_file.renamed_file?
+            = diff_file.old_path
             &rarr;
-            = diff.new_path
-          - elsif diff.new_file
+            = diff_file.new_path
+          - elsif diff_file.new_file?
             %span.new-file
               &#43;
-              = diff.new_path
+              = diff_file.new_path
           - else
-            = diff.new_path
+            = diff_file.new_path
 
   - unless @message.disable_diffs?
-    - diff_files = @message.diffs
-
     - if @message.compare_timeout
       %h5 The diff was not included because it is too large.
     - else
       %h4 Changes:
-      - diff_files.each do |diff_file|
+      - @message.diffs.each do |diff_file|
         - file_hash = hexdigest(diff_file.file_path)
         %li{ id: file_hash }
           %a{ href: @message.target_url + "##{file_hash}" }<
-            - if diff_file.deleted_file
+            - if diff_file.deleted_file?
               %strong<
                 = diff_file.old_path
               deleted
-            - elsif diff_file.renamed_file
+            - elsif diff_file.renamed_file?
               %strong<
                 = diff_file.old_path
               &rarr;
diff --git a/app/views/notify/repository_push_email.text.haml b/app/views/notify/repository_push_email.text.haml
index 5ac23aa3997..895d8807e47 100644
--- a/app/views/notify/repository_push_email.text.haml
+++ b/app/views/notify/repository_push_email.text.haml
@@ -15,15 +15,15 @@
   \
   #{pluralize @message.diffs_count, "changed file"}:
   \
-  - @message.diffs.each do |diff|
-    - if diff.deleted_file
-      \- − #{diff.old_path}
-    - elsif diff.renamed_file
-      \- #{diff.old_path} → #{diff.new_path}
-    - elsif diff.new_file
-      \- + #{diff.new_path}
+  - @message.diffs.each do |diff_file|
+    - if diff_file.deleted_file?
+      \- − #{diff_file.old_path}
+    - elsif diff_file.renamed_file?
+      \- #{diff_file.old_path} → #{diff_file.new_path}
+    - elsif diff_file.new_file?
+      \- + #{diff_file.new_path}
     - else
-      \- #{diff.new_path}
+      \- #{diff_file.new_path}
   - unless @message.disable_diffs?
     - if @message.compare_timeout
       \
@@ -36,9 +36,9 @@
       - @message.diffs.each do |diff_file|
         \
         \=====================================
-        - if diff_file.deleted_file
+        - if diff_file.deleted_file?
           #{diff_file.old_path} deleted
-        - elsif diff_file.renamed_file
+        - elsif diff_file.renamed_file?
           #{diff_file.old_path} → #{diff_file.new_path}
         - else
           = diff_file.new_path
diff --git a/app/views/profiles/_event_table.html.haml b/app/views/profiles/_event_table.html.haml
index 879fc170f92..d0ad90ac6cc 100644
--- a/app/views/profiles/_event_table.html.haml
+++ b/app/views/profiles/_event_table.html.haml
@@ -9,7 +9,6 @@
         Signed in with
         = event.details[:with]
         authentication
-      %span.pull-right
-        #{time_ago_in_words event.created_at} ago
+      %span.pull-right= time_ago_with_tooltip(event.created_at)
 
 = paginate events, theme: "gitlab"
diff --git a/app/views/profiles/accounts/_reset_token.html.haml b/app/views/profiles/accounts/_reset_token.html.haml
new file mode 100644
index 00000000000..c31a4a8ecd4
--- /dev/null
+++ b/app/views/profiles/accounts/_reset_token.html.haml
@@ -0,0 +1,11 @@
+- name = label.parameterize
+- attribute = name.underscore
+
+.reset-action
+  %p.cgray
+    = label_tag name, label, class: "label-light"
+    = text_field_tag name, current_user.send(attribute), class: 'form-control', readonly: true, onclick: 'this.select()'
+    %p.help-block
+      = help_text
+  .prepend-top-default
+    = link_to button_label, [:reset, attribute, :profile], method: :put, data: { confirm: 'Are you sure?' }, class: 'btn btn-default private-token'
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 73f33e69d68..a319b18e507 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -8,35 +8,17 @@
 .row.prepend-top-default
   .col-lg-3.profile-settings-sidebar
     %h4.prepend-top-0
-      = incoming_email_token_enabled? ? "Private Tokens" : "Private Token"
+      Private Tokens
     %p
-      Keep
-      = incoming_email_token_enabled? ? "these tokens" : "this token"
-      secret, anyone with access to them can interact with GitLab as if they were you.
+      Keep these tokens secret, anyone with access to them can interact with
+      GitLab as if they were you.
   .col-lg-9.private-tokens-reset
-    .reset-action
-      %p.cgray
-        - if current_user.private_token
-          = label_tag "private-token", "Private token", class: "label-light"
-          = text_field_tag "private-token", current_user.private_token, class: "form-control", readonly: true, onclick: "this.select()"
-        - else
-          %span You don't have one yet. Click generate to fix it.
-        %p.help-block
-          Your private token is used to access the API and Atom feeds without username/password authentication.
-      .prepend-top-default
-        - if current_user.private_token
-          = link_to 'Reset private token', reset_private_token_profile_path, method: :put, data: { confirm: "Are you sure?" }, class: "btn btn-default private-token"
-        - else
-          = f.submit 'Generate', class: "btn btn-default"
+    = render partial: 'reset_token', locals: { label: 'Private token', button_label: 'Reset private token', help_text: 'Your private token is used to access the API and Atom feeds without username/password authentication.' }
+
+    = render partial: 'reset_token', locals: { label: 'RSS token', button_label: 'Reset RSS token', help_text: 'Your RSS token is used to create urls for personalized RSS feeds.' }
+
     - if incoming_email_token_enabled?
-      .reset-action
-        %p.cgray
-          = label_tag "incoming-email-token", "Incoming Email Token", class: 'label-light'
-          = text_field_tag "incoming-email-token", current_user.incoming_email_token, class: "form-control", readonly: true, onclick: "this.select()"
-        %p.help-block
-          Your incoming email token is used to create new issues by email, and is included in your project-specific email addresses.
-        .prepend-top-default
-          = link_to 'Reset incoming email token', reset_incoming_email_token_profile_path, method: :put, data: { confirm: "Are you sure?" }, class: "btn btn-default incoming-email-token"
+      = render partial: 'reset_token', locals: { label: 'Incoming email token', button_label: 'Reset incoming email token', help_text: 'Your incoming email token is used to create new issues by email, and is included in your project-specific email addresses.' }
 
 %hr
 .row.prepend-top-default
diff --git a/app/views/profiles/audit_log.html.haml b/app/views/profiles/audit_log.html.haml
index 9fe86e6b291..a24b7fd101d 100644
--- a/app/views/profiles/audit_log.html.haml
+++ b/app/views/profiles/audit_log.html.haml
@@ -1,4 +1,4 @@
-- page_title "Audit Log"
+- page_title "Authentication log"
 = render 'profiles/head'
 
 .row.prepend-top-default
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 99690e6b98a..0ff19b3eab1 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -37,9 +37,9 @@
       = f.select :dashboard, dashboard_choices, {}, class: 'form-control'
     .form-group
       = f.label :project_view, class: 'label-light' do
-        Project view
+        Project home page content
       = f.select :project_view, project_view_choices, {}, class: 'form-control'
       .help-block
-        Choose what content you want to see on a project's home page.
+        Choose what content you want to see on a project’s home page
     .form-group
       = f.submit 'Save changes', class: 'btn btn-save'
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index c74b3249a13..4a1438aa68e 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -73,6 +73,11 @@
         = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email), { include_blank: 'Do not show on profile' }, class: "select2"
         %span.help-block This email will be displayed on your public profile.
       .form-group
+        = f.label :preferred_language, class: "label-light"
+        = f.select :preferred_language, Gitlab::I18n::AVAILABLE_LANGUAGES.map { |value, label| [label, value] },
+          {}, class: "select2"
+        %span.help-block This feature is experimental and translations are not complete yet.
+      .form-group
         = f.label :skype, class: "label-light"
         = f.text_field :skype, class: "form-control"
       .form-group
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index aa0cb3e1a50..10f581d751b 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -1,7 +1,5 @@
-- @no_container = true
-
 %div{ class: container_class }
-  .nav-block.activity-filter-block
+  .nav-block.activity-filter-block.activities
     .controls
       = link_to namespace_project_path(@project.namespace, @project, rss_url_options), title: "Subscribe", class: 'btn rss-btn has-tooltip' do
         = icon('rss')
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 96c2fa87f45..426085b3e1c 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -1,6 +1,14 @@
+- commit = local_assigns.fetch(:commit) { @repository.commit }
+- ref = local_assigns.fetch(:ref) { current_ref }
+- project = local_assigns.fetch(:project) { @project }
 #tree-holder.tree-holder.clearfix
   .nav-block
     = render 'projects/tree/tree_header', tree: @tree
 
-  = render 'projects/tree/tree_content', tree: @tree
+  - if commit
+    .info-well.hidden-xs.project-last-commit.append-bottom-default
+      .well-segment
+        %ul.blob-commit-info
+          = render 'projects/commits/commit', commit: commit, ref: ref, project: project
 
+  = render 'projects/tree/tree_content', tree: @tree
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 0fd19780570..9a9fca78df3 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -24,7 +24,7 @@
         = render 'projects/buttons/fork'
 
       %span.hidden-xs
-        - if @project.feature_available?(:repository, current_user)
+        - if can?(current_user, :download_code, @project)
           .project-clone-holder
             = render "shared/clone_panel"
 
diff --git a/app/views/projects/_last_commit.html.haml b/app/views/projects/_last_commit.html.haml
deleted file mode 100644
index df3b1c75508..00000000000
--- a/app/views/projects/_last_commit.html.haml
+++ /dev/null
@@ -1,12 +0,0 @@
-- ref = local_assigns.fetch(:ref)
-- status = commit.status(ref)
-- if status
-  = link_to pipelines_namespace_project_commit_path(commit.project.namespace, commit.project, commit), class: "ci-status ci-#{status}" do
-    = ci_icon_for_status(status)
-    = ci_text_for_status(status)
-
-= link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
-= link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit), class: "commit-row-message"
-&middot;
-#{time_ago_with_tooltip(commit.committed_date)} by
-= commit_author_link(commit, avatar: true, size: 24)
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 768bc1fb323..e8b1940af2d 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -1,18 +1,18 @@
-- if event = last_push_event
-  - if show_last_push_widget?(event)
-    .row-content-block.top-block.hidden-xs.white
-      %div{ class: container_class }
-        .event-last-push
-          .event-last-push-text
-            %span You pushed to
-            = link_to namespace_project_commits_path(event.project.namespace, event.project, event.ref_name) do
-              %strong= event.ref_name
-            - if @project && event.project != @project
-              %span at
-              %strong= link_to_project event.project
-            = clipboard_button(text: event.ref_name, class: 'btn-clipboard btn-transparent', title: 'Copy branch to clipboard')
-            #{time_ago_with_tooltip(event.created_at)}
+- event = last_push_event
+- if event && show_last_push_widget?(event)
+  .row-content-block.top-block.hidden-xs.white
+    .event-last-push
+      .event-last-push-text
+        %span You pushed to
+        %strong
+          = link_to event.ref_name, namespace_project_commits_path(event.project.namespace, event.project, event.ref_name), class: 'ref-name'
 
-          .pull-right
-            = link_to new_mr_path_from_push_event(event), title: "New merge request", class: "btn btn-info btn-sm" do
-              Create merge request
+        - if event.project != @project
+          %span at
+          %strong= link_to_project event.project
+
+        #{time_ago_with_tooltip(event.created_at)}
+
+      .pull-right
+        = link_to new_mr_path_from_push_event(event), title: "New merge request", class: "btn btn-info btn-sm" do
+          Create merge request
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index 23e27c1105c..d0698285f84 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -1,3 +1,5 @@
+- referenced_users = local_assigns.fetch(:referenced_users, nil)
+
 .md-area
   .md-header
     %ul.nav-links.clearfix
@@ -28,9 +30,10 @@
 
   .md-write-holder
     = yield
-  .md.md-preview-holder.js-md-preview.hide{ class: (preview_class if defined?(preview_class)) }
+  .md.md-preview-holder.js-md-preview.hide.md-preview{ data: { url: url } }
+  .referenced-commands.hide
 
-  - if defined?(referenced_users) && referenced_users
+  - if referenced_users
     .referenced-users.hide
       %span
         = icon("exclamation-triangle")
diff --git a/app/views/projects/_readme.html.haml b/app/views/projects/_readme.html.haml
deleted file mode 100644
index c0d12cbc66e..00000000000
--- a/app/views/projects/_readme.html.haml
+++ /dev/null
@@ -1,21 +0,0 @@
-- if readme = @repository.readme
-  %article.readme-holder
-    .pull-right
-      - if can?(current_user, :push_code, @project)
-        = link_to icon('pencil'), namespace_project_edit_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.name)), class: 'light edit-project-readme'
-    .file-content.wiki
-      = markup(readme.name, readme.data, rendered: @repository.rendered_readme)
-- else
-  .row-content-block.second-block.center
-    %h3.page-title
-      This project does not have a README yet
-    - if can?(current_user, :push_code, @project)
-      %p
-        A
-        %code README
-        file contains information about other files in a repository and is commonly
-        distributed with computer software, forming part of its documentation.
-      %p
-        We recommend you to
-        = link_to "add a README", add_special_file_path(@project, file_name: 'README.md'), class: 'underlined-link'
-        file to the repository and GitLab will render it here instead of this message.
diff --git a/app/views/projects/_zen.html.haml b/app/views/projects/_zen.html.haml
index 0c8241053e7..3b3d08ddd3c 100644
--- a/app/views/projects/_zen.html.haml
+++ b/app/views/projects/_zen.html.haml
@@ -1,10 +1,11 @@
 - @gfm_form = true
+- current_text ||= nil
 - supports_slash_commands = local_assigns.fetch(:supports_slash_commands, false)
 .zen-backdrop
   - classes << ' js-gfm-input js-autosize markdown-area'
   - if defined?(f) && f
     = f.text_area attr, class: classes, placeholder: placeholder, data: { supports_slash_commands: supports_slash_commands }
   - else
-    = text_area_tag attr, nil, class: classes, placeholder: placeholder
+    = text_area_tag attr, current_text, class: classes, placeholder: placeholder
   %a.zen-control.zen-control-leave.js-zen-leave{ href: "#" }
     = icon('compress')
diff --git a/app/views/projects/activity.html.haml b/app/views/projects/activity.html.haml
index 27c8e3c7fca..ef8d8051cbf 100644
--- a/app/views/projects/activity.html.haml
+++ b/app/views/projects/activity.html.haml
@@ -1,3 +1,5 @@
+- @no_container = true
+
 - page_title "Activity"
 = render "projects/head"
 
diff --git a/app/views/projects/artifacts/_tree_directory.html.haml b/app/views/projects/artifacts/_tree_directory.html.haml
index 34d5c3b7285..e2966ec33c2 100644
--- a/app/views/projects/artifacts/_tree_directory.html.haml
+++ b/app/views/projects/artifacts/_tree_directory.html.haml
@@ -1,4 +1,4 @@
-- path_to_directory = browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: directory.path)
+- path_to_directory = browse_namespace_project_job_artifacts_path(@project.namespace, @project, @build, path: directory.path)
 
 %tr.tree-item{ 'data-link' => path_to_directory }
   %td.tree-item-file-name
diff --git a/app/views/projects/artifacts/_tree_file.html.haml b/app/views/projects/artifacts/_tree_file.html.haml
index ce7e25d774b..ea0b43b85cf 100644
--- a/app/views/projects/artifacts/_tree_file.html.haml
+++ b/app/views/projects/artifacts/_tree_file.html.haml
@@ -1,4 +1,4 @@
-- path_to_file = file_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: file.path)
+- path_to_file = file_namespace_project_job_artifacts_path(@project.namespace, @project, @build, path: file.path)
 
 %tr.tree-item{ 'data-link' => path_to_file }
   - blob = file.blob
diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml
index 9fbb30f7c7c..961c805dc7c 100644
--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
@@ -1,22 +1,22 @@
 - page_title @path.presence, 'Artifacts', "#{@build.name} (##{@build.id})", 'Jobs'
 = render "projects/pipelines/head"
 
-= render "projects/builds/header", show_controls: false
+= render "projects/jobs/header", show_controls: false
 
 .tree-holder
   .nav-block
     .tree-controls
-      = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build),
+      = link_to download_namespace_project_job_artifacts_path(@project.namespace, @project, @build),
         rel: 'nofollow', download: '', class: 'btn btn-default download' do
         = icon('download')
         Download artifacts archive
 
     %ul.breadcrumb.repo-breadcrumb
       %li
-        = link_to 'Artifacts', browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build)
+        = link_to 'Artifacts', browse_namespace_project_job_artifacts_path(@project.namespace, @project, @build)
       - path_breadcrumbs do |title, path|
         %li
-          = link_to truncate(title, length: 40), browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path)
+          = link_to truncate(title, length: 40), browse_namespace_project_job_artifacts_path(@project.namespace, @project, @build, path)
 
   .tree-content-holder
     %table.table.tree-table
diff --git a/app/views/projects/artifacts/file.html.haml b/app/views/projects/artifacts/file.html.haml
index d8da83b9a80..b25c7c95196 100644
--- a/app/views/projects/artifacts/file.html.haml
+++ b/app/views/projects/artifacts/file.html.haml
@@ -1,21 +1,21 @@
 - page_title @path, 'Artifacts', "#{@build.name} (##{@build.id})", 'Jobs'
 = render "projects/pipelines/head"
 
-= render "projects/builds/header", show_controls: false
+= render "projects/jobs/header", show_controls: false
 
 #tree-holder.tree-holder
   .nav-block
     %ul.breadcrumb.repo-breadcrumb
       %li
-        = link_to 'Artifacts', browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build)
+        = link_to 'Artifacts', browse_namespace_project_job_artifacts_path(@project.namespace, @project, @build)
       - path_breadcrumbs do |title, path|
         - title = truncate(title, length: 40)
         %li
           - if path == @path
-            = link_to file_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path) do
+            = link_to file_namespace_project_job_artifacts_path(@project.namespace, @project, @build, path) do
               %strong= title
           - else
-            = link_to title, browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path)
+            = link_to title, browse_namespace_project_job_artifacts_path(@project.namespace, @project, @build, path)
 
 
   %article.file-holder
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index 35885b2c7b4..a2ec3d44185 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -3,9 +3,9 @@
 = render "projects/commits/head"
 
 %div{ class: container_class }
-  %h3.page-title Blame view
-
   #blob-content-holder.tree-holder
+    = render "projects/blob/breadcrumb", blob: @blob, blame: true
+
     .file-holder
       = render "projects/blob/header", blob: @blob, blame: true
 
@@ -22,7 +22,7 @@
                     %strong
                       = link_to_gfm truncate(commit.title, length: 35), namespace_project_commit_path(@project.namespace, @project, commit.id), class: "cdark"
                     .pull-right
-                      = link_to commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit), class: "monospace"
+                      = link_to commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit), class: "commit-sha"
                     &nbsp;
                   .light
                     = commit_author_link(commit, avatar: false)
diff --git a/app/views/projects/blob/_auxiliary_viewer.html.haml b/app/views/projects/blob/_auxiliary_viewer.html.haml
new file mode 100644
index 00000000000..9749afdc580
--- /dev/null
+++ b/app/views/projects/blob/_auxiliary_viewer.html.haml
@@ -0,0 +1,5 @@
+- blob = local_assigns.fetch(:blob)
+- auxiliary_viewer = blob.auxiliary_viewer
+- if auxiliary_viewer && auxiliary_viewer.render_error.nil? && auxiliary_viewer.visible_to?(current_user)
+  .well-segment.blob-auxiliary-viewer
+    = render 'projects/blob/viewer', viewer: auxiliary_viewer
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index f04df441ccb..8bd336269ff 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -1,23 +1,11 @@
-.nav-block
-  .tree-ref-holder
-    = render 'shared/ref_switcher', destination: 'blob', path: @path
+= render "projects/blob/breadcrumb", blob: blob
 
-  %ul.breadcrumb.repo-breadcrumb
-    %li
-      = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
-        = @project.path
-    - path_breadcrumbs do |title, path|
-      - title = truncate(title, length: 40)
-      %li
-        - if path == @path
-          = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, path)) do
-            %strong= title
-        - else
-          = link_to title, namespace_project_tree_path(@project.namespace, @project, tree_join(@ref, path))
+.info-well.hidden-xs
+  .well-segment
+    %ul.blob-commit-info
+      = render 'projects/commits/commit', commit: @last_commit, project: @project, ref: @ref
 
-%ul.blob-commit-info.hidden-xs
-  - blob_commit = @repository.last_commit_for_path(@commit.id, blob.path)
-  = render blob_commit, project: @project, ref: @ref
+  = render "projects/blob/auxiliary_viewer", blob: blob
 
 #blob-content-holder.blob-content-holder
   %article.file-holder
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
new file mode 100644
index 00000000000..3f58e8d232f
--- /dev/null
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -0,0 +1,36 @@
+- blame = local_assigns.fetch(:blame, false)
+.nav-block
+  .tree-controls
+    = render 'projects/find_file_link'
+
+    .btn-group.prepend-left-10{ role: "group" }<
+      -# only show normal/blame view links for text files
+      - if blob.readable_text?
+        - if blame
+          = link_to 'Normal view', namespace_project_blob_path(@project.namespace, @project, @id),
+              class: 'btn'
+        - else
+          = link_to 'Blame', namespace_project_blame_path(@project.namespace, @project, @id),
+              class: 'btn js-blob-blame-link' unless blob.empty?
+
+      = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id),
+          class: 'btn'
+
+      = link_to 'Permalink', namespace_project_blob_path(@project.namespace, @project,
+          tree_join(@commit.sha, @path)), class: 'btn js-data-file-blob-permalink-url'
+
+  .tree-ref-holder
+    = render 'shared/ref_switcher', destination: 'blob', path: @path
+
+  %ul.breadcrumb.repo-breadcrumb
+    %li
+      = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
+        = @project.path
+    - path_breadcrumbs do |title, path|
+      - title = truncate(title, length: 40)
+      %li
+        - if path == @path
+          = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, path)) do
+            %strong= title
+        - else
+          = link_to title, namespace_project_tree_path(@project.namespace, @project, tree_join(@ref, path))
diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml
index cd098acda81..0be15cc179f 100644
--- a/app/views/projects/blob/_header.html.haml
+++ b/app/views/projects/blob/_header.html.haml
@@ -11,23 +11,7 @@
       = view_on_environment_button(@commit.sha, @path, @environment) if @environment
 
     .btn-group{ role: "group" }<
-      -# only show normal/blame view links for text files
-      - if blob.readable_text?
-        - if blame
-          = link_to 'Normal view', namespace_project_blob_path(@project.namespace, @project, @id),
-              class: 'btn btn-sm'
-        - else
-          = link_to 'Blame', namespace_project_blame_path(@project.namespace, @project, @id),
-              class: 'btn btn-sm js-blob-blame-link' unless blob.empty?
-
-      = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id),
-          class: 'btn btn-sm'
-
-      = link_to 'Permalink', namespace_project_blob_path(@project.namespace, @project,
-          tree_join(@commit.sha, @path)), class: 'btn btn-sm js-data-file-blob-permalink-url'
-
-    .btn-group{ role: "group" }<
-      = edit_blob_link if blob.readable_text?
+      = edit_blob_link
       - if current_user
         = replace_blob_link
         = delete_blob_link
diff --git a/app/views/projects/blob/_markup.html.haml b/app/views/projects/blob/_markup.html.haml
deleted file mode 100644
index 0090f7a11df..00000000000
--- a/app/views/projects/blob/_markup.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-- blob.load_all_data!(@repository)
-
-.file-content.wiki
-  = markup(blob.name, blob.data)
diff --git a/app/views/projects/blob/_viewer.html.haml b/app/views/projects/blob/_viewer.html.haml
index 5326bb3e0cf..4252f27d007 100644
--- a/app/views/projects/blob/_viewer.html.haml
+++ b/app/views/projects/blob/_viewer.html.haml
@@ -1,12 +1,11 @@
 - hidden = local_assigns.fetch(:hidden, false)
 - render_error = viewer.render_error
-- load_asynchronously = local_assigns.fetch(:load_asynchronously, viewer.server_side?) && render_error.nil?
+- load_async = local_assigns.fetch(:load_async, viewer.load_async?)
 
-- url = url_for(params.merge(viewer: viewer.type, format: :json)) if load_asynchronously
-.blob-viewer{ data: { type: viewer.type, url: url }, class: ('hidden' if hidden) }
-  - if load_asynchronously
-    .text-center.prepend-top-default.append-bottom-default
-      = icon('spinner spin 2x', 'aria-hidden' => 'true', 'aria-label' => 'Loading content')
+- viewer_url = local_assigns.fetch(:viewer_url) { url_for(params.merge(viewer: viewer.type, format: :json)) } if load_async
+.blob-viewer{ data: { type: viewer.type, url: viewer_url }, class: ('hidden' if hidden) }
+  - if load_async
+    = render viewer.loading_partial_path, viewer: viewer
   - elsif render_error
     = render 'projects/blob/render_error', viewer: viewer
   - else
diff --git a/app/views/projects/blob/preview.html.haml b/app/views/projects/blob/preview.html.haml
index e87b73c9a34..da2cef17e8a 100644
--- a/app/views/projects/blob/preview.html.haml
+++ b/app/views/projects/blob/preview.html.haml
@@ -1,4 +1,4 @@
-.diff-file
+.diff-file.file-holder
   .diff-content
     - if markup?(@blob.name)
       .file-content.wiki
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index 67f57b5e4b9..41f75a491a5 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/app/views/projects/blob/show.html.haml
@@ -1,13 +1,14 @@
 - @no_container = true
+
 - page_title @blob.path, @ref
 = render "projects/commits/head"
 
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('blob')
 
-%div{ class: container_class }
-  = render 'projects/last_push'
+= render 'projects/last_push'
 
+%div{ class: container_class }
   #tree-holder.tree-holder
     = render 'blob', blob: @blob
 
diff --git a/app/views/projects/blob/viewers/_balsamiq.html.haml b/app/views/projects/blob/viewers/_balsamiq.html.haml
new file mode 100644
index 00000000000..28670e7de97
--- /dev/null
+++ b/app/views/projects/blob/viewers/_balsamiq.html.haml
@@ -0,0 +1,4 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('balsamiq_viewer')
+
+.file-content.balsamiq-viewer#js-balsamiq-viewer{ data: { endpoint: blob_raw_url } }
diff --git a/app/views/projects/blob/viewers/_changelog.html.haml b/app/views/projects/blob/viewers/_changelog.html.haml
new file mode 100644
index 00000000000..53921e63b5f
--- /dev/null
+++ b/app/views/projects/blob/viewers/_changelog.html.haml
@@ -0,0 +1,4 @@
+= icon('history fw')
+= succeed '.' do
+  To find the state of this project's repository at the time of any of these versions, check out
+  = link_to "the tags", namespace_project_tags_path(viewer.project.namespace, viewer.project)
diff --git a/app/views/projects/blob/viewers/_contributing.html.haml b/app/views/projects/blob/viewers/_contributing.html.haml
new file mode 100644
index 00000000000..c78f04c9c7c
--- /dev/null
+++ b/app/views/projects/blob/viewers/_contributing.html.haml
@@ -0,0 +1,9 @@
+= icon('book fw')
+After you've reviewed these contribution guidelines, you'll be all set to
+
+- options = contribution_options(viewer.project)
+- if options.any?
+  = succeed '.' do
+    = options.to_sentence(two_words_connector: ' or ', last_word_connector: ', or ').html_safe
+- else
+  contribute to this project.
diff --git a/app/views/projects/blob/viewers/_dependency_manager.html.haml b/app/views/projects/blob/viewers/_dependency_manager.html.haml
new file mode 100644
index 00000000000..a0f0215a5ff
--- /dev/null
+++ b/app/views/projects/blob/viewers/_dependency_manager.html.haml
@@ -0,0 +1,11 @@
+= icon('cubes fw')
+= succeed '.' do
+  This project manages its dependencies using
+  %strong= viewer.manager_name
+
+  - if viewer.package_name
+    and defines a #{viewer.package_type} named
+    %strong<
+      = link_to viewer.package_name, viewer.package_url, target: '_blank', rel: 'noopener noreferrer'
+
+= link_to 'Learn more', viewer.manager_url, target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/projects/blob/viewers/_gitlab_ci_yml.html.haml b/app/views/projects/blob/viewers/_gitlab_ci_yml.html.haml
new file mode 100644
index 00000000000..28c5be6ebf3
--- /dev/null
+++ b/app/views/projects/blob/viewers/_gitlab_ci_yml.html.haml
@@ -0,0 +1,9 @@
+- if viewer.valid?
+  = icon('check fw')
+  This GitLab CI configuration is valid.
+- else
+  = icon('warning fw')
+  This GitLab CI configuration is invalid:
+  = viewer.validation_message
+
+= link_to 'Learn more', help_page_path('ci/yaml/README')
diff --git a/app/views/projects/blob/viewers/_gitlab_ci_yml_loading.html.haml b/app/views/projects/blob/viewers/_gitlab_ci_yml_loading.html.haml
new file mode 100644
index 00000000000..10cbf6a2f7a
--- /dev/null
+++ b/app/views/projects/blob/viewers/_gitlab_ci_yml_loading.html.haml
@@ -0,0 +1,4 @@
+= icon('spinner spin fw')
+Validating GitLab CI configuration…
+
+= link_to 'Learn more', help_page_path('ci/yaml/README')
diff --git a/app/views/projects/blob/viewers/_license.html.haml b/app/views/projects/blob/viewers/_license.html.haml
new file mode 100644
index 00000000000..fb9d0b99d09
--- /dev/null
+++ b/app/views/projects/blob/viewers/_license.html.haml
@@ -0,0 +1,8 @@
+- license = viewer.license
+
+= icon('balance-scale fw')
+This project is licensed under the
+= succeed '.' do
+  %strong= license.name
+
+= link_to 'Learn more', license.url, target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/projects/blob/viewers/_loading.html.haml b/app/views/projects/blob/viewers/_loading.html.haml
new file mode 100644
index 00000000000..120c0540335
--- /dev/null
+++ b/app/views/projects/blob/viewers/_loading.html.haml
@@ -0,0 +1,2 @@
+.text-center.prepend-top-default.append-bottom-default
+  = icon('spinner spin 2x', 'aria-hidden' => 'true', 'aria-label' => 'Loading content…')
diff --git a/app/views/projects/blob/viewers/_loading_auxiliary.html.haml b/app/views/projects/blob/viewers/_loading_auxiliary.html.haml
new file mode 100644
index 00000000000..c7dc9e3250a
--- /dev/null
+++ b/app/views/projects/blob/viewers/_loading_auxiliary.html.haml
@@ -0,0 +1,2 @@
+= icon('spinner spin fw')
+Analyzing file…
diff --git a/app/views/projects/blob/viewers/_readme.html.haml b/app/views/projects/blob/viewers/_readme.html.haml
new file mode 100644
index 00000000000..334b33faf48
--- /dev/null
+++ b/app/views/projects/blob/viewers/_readme.html.haml
@@ -0,0 +1,4 @@
+= icon('info-circle fw')
+= succeed '.' do
+  To learn more about this project, read
+  = link_to "the wiki", namespace_project_wikis_path(viewer.project.namespace, viewer.project)
diff --git a/app/views/projects/blob/viewers/_route_map.html.haml b/app/views/projects/blob/viewers/_route_map.html.haml
new file mode 100644
index 00000000000..d0fcd55f6c1
--- /dev/null
+++ b/app/views/projects/blob/viewers/_route_map.html.haml
@@ -0,0 +1,9 @@
+- if viewer.valid?
+  = icon('check fw')
+  This Route Map is valid.
+- else
+  = icon('warning fw')
+  This Route Map is invalid:
+  = viewer.validation_message
+
+= link_to 'Learn more', help_page_path('ci/environments', anchor: 'route-map')
diff --git a/app/views/projects/blob/viewers/_route_map_loading.html.haml b/app/views/projects/blob/viewers/_route_map_loading.html.haml
new file mode 100644
index 00000000000..2318cf82f58
--- /dev/null
+++ b/app/views/projects/blob/viewers/_route_map_loading.html.haml
@@ -0,0 +1,4 @@
+= icon('spinner spin fw')
+Validating Route Map…
+
+= link_to 'Learn more', help_page_path('ci/environments', anchor: 'route-map')
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index 7ca0ec8ed2b..efec69662f3 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -3,9 +3,9 @@
 - page_title "Boards"
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('filtered_search')
-  = page_specific_javascript_bundle_tag('boards')
+  = webpack_bundle_tag 'common_vue'
+  = webpack_bundle_tag 'filtered_search'
+  = webpack_bundle_tag 'boards'
 
   %script#js-board-template{ type: "text/x-template" }= render "projects/boards/components/board"
   %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index 5a4eaf92b16..bc5c727bf0d 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -13,8 +13,8 @@
             %button.btn.btn-small.btn-default.pull-right.has-tooltip{ type: "button",
               "@click" => "showNewIssueForm",
               "v-if" => 'list.type !== "closed"',
-              "aria-label" => "Add an issue",
-              "title" => "Add an issue",
+              "aria-label" => "New issue",
+              "title" => "New issue",
               data: { placement: "top", container: "body" } }
               = icon("plus")
         - if can?(current_user, :admin_list, @project)
diff --git a/app/views/projects/boards/components/sidebar/_assignee.html.haml b/app/views/projects/boards/components/sidebar/_assignee.html.haml
index 0f424334521..e8db868f49b 100644
--- a/app/views/projects/boards/components/sidebar/_assignee.html.haml
+++ b/app/views/projects/boards/components/sidebar/_assignee.html.haml
@@ -1,40 +1,30 @@
-.block.assignee
-  .title.hide-collapsed
-    Assignee
-    - if can?(current_user, :admin_issue, @project)
-      = icon("spinner spin", class: "block-loading")
-      = link_to "Edit", "#", class: "edit-link pull-right"
-  .value.hide-collapsed
-    %span.assign-yourself.no-value{ "v-if" => "!issue.assignee" }
-      No assignee
-      - if can?(current_user, :admin_issue, @project)
-        \-
-        %a.js-assign-yourself{ href: "#" }
-          assign yourself
-    %a.author_link.bold{ ":href" => "'#{root_url}' + issue.assignee.username",
-      "v-if" => "issue.assignee" }
-      %img.avatar.avatar-inline.s32{ ":src" => "issue.assignee.avatar",
-        width: "32", alt: "Avatar" }
-      %span.author
-        {{ issue.assignee.name }}
-      %span.username
-        = precede "@" do
-          {{ issue.assignee.username }}
+.block.assignee{ ref: "assigneeBlock" }
+  %template{ "v-if" => "issue.assignees" }
+    %assignee-title{ ":number-of-assignees" => "issue.assignees.length",
+      ":loading" => "loadingAssignees",
+      ":editable" => can?(current_user, :admin_issue, @project) }
+    %assignees.value{ "root-path" => "#{root_url}",
+      ":users" => "issue.assignees",
+      ":editable" => can?(current_user, :admin_issue, @project),
+      "@assign-self" => "assignSelf" }
+
   - if can?(current_user, :admin_issue, @project)
     .selectbox.hide-collapsed
-      %input{ type: "hidden",
-        name: "issue[assignee_id]",
-        id: "issue_assignee_id",
-        ":value" => "issue.assignee.id",
-        "v-if" => "issue.assignee" }
+      %input.js-vue{ type: "hidden",
+        name: "issue[assignee_ids][]",
+        ":value" => "assignee.id",
+        "v-if" => "issue.assignees",
+        "v-for" => "assignee in issue.assignees",
+        ":data-avatar_url" => "assignee.avatar",
+        ":data-name" => "assignee.name",
+        ":data-username" => "assignee.username" }
       .dropdown
-        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-issue-board-sidebar{ type: "button", data: { toggle: "dropdown", field_name: "issue[assignee_id]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, null_user: "true", null_user_default: "true" },
+        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-multiselect.js-save-user-data.js-issue-board-sidebar{ type: "button", ref: "assigneeDropdown", data: { toggle: "dropdown", field_name: "issue[assignee_ids][]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, null_user: "true", multi_select: "true", 'max-select' => 1, dropdown: { header: 'Assignee' } },
           ":data-issuable-id" => "issue.id",
-          ":data-selected" => "assigneeId",
           ":data-issue-update" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '.json'" }
           Select assignee
           = icon("chevron-down")
-        .dropdown-menu.dropdown-menu-user.dropdown-menu-selectable.dropdown-menu-author
+        .dropdown-menu.dropdown-select.dropdown-menu-user.dropdown-menu-selectable.dropdown-menu-author
           = dropdown_title("Assign to")
           = dropdown_filter("Search users")
           = dropdown_content
diff --git a/app/views/projects/boards/components/sidebar/_labels.html.haml b/app/views/projects/boards/components/sidebar/_labels.html.haml
index 0f0a84c156d..bee0f3dd065 100644
--- a/app/views/projects/boards/components/sidebar/_labels.html.haml
+++ b/app/views/projects/boards/components/sidebar/_labels.html.haml
@@ -19,7 +19,7 @@
         ":value" => "label.id" }
       .dropdown
         %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-issue-board-sidebar{ type: "button",
-          data: { toggle: "dropdown", field_name: "issue[label_names][]", show_no: "true", show_any: "true", project_id: @project.id, labels: namespace_project_labels_path(@project.namespace, @project, :json), namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) },
+          data: { toggle: "dropdown", field_name: "issue[label_names][]", show_no: "true", show_any: "true", project_id: @project.id, labels: namespace_project_labels_path(@project.namespace, @project, :json), namespace_path: @project.try(:namespace).try(:full_path), project_path: @project.try(:path) },
           ":data-issue-update" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '.json'" }
           %span.dropdown-toggle-text
             Label
diff --git a/app/views/projects/boards/components/sidebar/_milestone.html.haml b/app/views/projects/boards/components/sidebar/_milestone.html.haml
index 190e7290303..4e46351bf8a 100644
--- a/app/views/projects/boards/components/sidebar/_milestone.html.haml
+++ b/app/views/projects/boards/components/sidebar/_milestone.html.haml
@@ -16,7 +16,8 @@
         name: "issue[milestone_id]",
         "v-if" => "issue.milestone" }
       .dropdown
-        %button.dropdown-menu-toggle.js-milestone-select.js-issue-board-sidebar{ type: "button", data: { toggle: "dropdown", show_no: "true", field_name: "issue[milestone_id]", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: "issue", use_id: "true" },
+        %button.dropdown-menu-toggle.js-milestone-select.js-issue-board-sidebar{ type: "button", data: { toggle: "dropdown", show_no: "true", field_name: "issue[milestone_id]", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: "issue", use_id: "true", default_no: "true" },
+          ":data-selected" => "milestoneTitle",
           ":data-issuable-id" => "issue.id",
           ":data-issue-update" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '.json'" }
           Milestone
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 0f9ef3eded3..869633e016d 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -6,7 +6,8 @@
 - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
 %li{ class: "js-branch-#{branch.name}" }
   %div
-    = link_to namespace_project_tree_path(@project.namespace, @project, branch.name), class: 'item-title str-truncated' do
+    = link_to namespace_project_tree_path(@project.namespace, @project, branch.name), class: 'item-title str-truncated ref-name' do
+      = icon('code-fork')
       = branch.name
     &nbsp;
     - if branch.name == @repository.root_ref
@@ -30,16 +31,37 @@
       = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name]
 
       - if can?(current_user, :push_code, @project)
-        = link_to namespace_project_branch_path(@project.namespace, @project, branch.name),
-          class: "btn btn-remove remove-row js-ajax-loading-spinner #{can_remove_branch?(@project, branch.name) ? '' : 'disabled'}",
-          method: :delete,
-          data: { confirm: "Deleting the '#{branch.name}' branch cannot be undone. Are you sure?" },
-          remote: true,
-          "aria-label" => "Delete branch" do
-          = icon("trash-o")
+        - if branch.name == @project.repository.root_ref
+          %button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip disabled",
+            disabled: true,
+            title: "The default branch cannot be deleted" }
+            = icon("trash-o")
+        - elsif protected_branch?(@project, branch)
+          - if can?(current_user, :delete_protected_branch, @project)
+            %button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip",
+              title: "Delete protected branch",
+              data: { toggle: "modal",
+                target: "#modal-delete-branch",
+                delete_path: namespace_project_branch_path(@project.namespace, @project, branch.name),
+                branch_name: branch.name } }
+              = icon("trash-o")
+          - else
+            %button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip disabled",
+              disabled: true,
+              title: "Only a project master or owner can delete a protected branch" }
+              = icon("trash-o")
+        - else
+          = link_to namespace_project_branch_path(@project.namespace, @project, branch.name),
+            class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip",
+            title: "Delete branch",
+            method: :delete,
+            data: { confirm: "Deleting the '#{branch.name}' branch cannot be undone. Are you sure?" },
+            remote: true,
+            "aria-label" => "Delete branch" do
+            = icon("trash-o")
 
     - if branch.name != @repository.root_ref
-      .divergence-graph{ title: "#{number_commits_ahead} commits ahead, #{number_commits_behind} commits behind #{@repository.root_ref}" }
+      .divergence-graph{ title: "#{number_commits_behind} commits behind #{@repository.root_ref}, #{number_commits_ahead} commits ahead" }
         .graph-side
           .bar.bar-behind{ style: "width: #{number_commits_behind * bar_graph_width_factor}%" }
           %span.count.count-behind= number_commits_behind
diff --git a/app/views/projects/branches/_commit.html.haml b/app/views/projects/branches/_commit.html.haml
index de607772df6..ad8f9da0621 100644
--- a/app/views/projects/branches/_commit.html.haml
+++ b/app/views/projects/branches/_commit.html.haml
@@ -1,7 +1,7 @@
 .branch-commit
   .icon-container.commit-icon
     = custom_icon("icon_commit")
-  = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-id monospace"
+  = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-sha"
   &middot;
   %span.str-truncated
     = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
diff --git a/app/views/projects/branches/_delete_protected_modal.html.haml b/app/views/projects/branches/_delete_protected_modal.html.haml
new file mode 100644
index 00000000000..c5888afa54d
--- /dev/null
+++ b/app/views/projects/branches/_delete_protected_modal.html.haml
@@ -0,0 +1,34 @@
+#modal-delete-branch.modal{ tabindex: -1 }
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %button.close{ data: { dismiss: 'modal' } } ×
+        %h3.page-title
+          Delete protected branch
+          = surround "'", "'?" do
+            %span.js-branch-name>[branch name]
+
+      .modal-body
+        %p
+          You’re about to permanently delete the protected branch
+          = succeed '.' do
+            %strong.js-branch-name [branch name]
+        %p
+          Once you confirm and press
+          = succeed ',' do
+            %strong Delete protected branch
+          it cannot be undone or recovered.
+        %p
+          %strong To confirm, type
+          %kbd.js-branch-name [branch name]
+
+        .form-group
+        = text_field_tag 'delete_branch_input', '', class: 'form-control js-delete-branch-input'
+
+      .modal-footer
+        %button.btn{ data: { dismiss: 'modal' } } Cancel
+        = link_to 'Delete protected branch', '',
+          class: "btn btn-danger js-delete-branch",
+          title: 'Delete branch',
+          method: :delete,
+          "aria-label" => "Delete"
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 91b86280e4c..4bade77a077 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -37,3 +37,5 @@
     = paginate @branches, theme: 'gitlab'
   - else
     .nothing-here-block No branches to show
+
+= render 'projects/branches/delete_protected_modal'
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index d3c3e40d518..5a0eba3551f 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -1,4 +1,5 @@
 - page_title "New Branch"
+- default_ref = params[:ref] || @project.default_branch
 
 - if @error
   .alert.alert-danger
@@ -16,12 +17,13 @@
       .help-block.text-danger.js-branch-name-error
   .form-group
     = label_tag :ref, 'Create from', class: 'control-label'
-    .col-sm-10
-      = hidden_field_tag :ref, params[:ref] || @project.default_branch
-      = dropdown_tag(params[:ref] || @project.default_branch,
-                     options: { toggle_class: 'js-branch-select wide',
-                                filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches",
-                                data: { selected: params[:ref] || @project.default_branch, field_name: 'ref' } })
+    .col-sm-10.create-from
+      .dropdown
+        = hidden_field_tag :ref, default_ref
+        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select git-revision-dropdown-toggle', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+          .text-left.dropdown-toggle-text= default_ref
+          = icon('chevron-down')
+        = render 'shared/ref_dropdown', dropdown_class: 'wide'
       .help-block Existing branch name, tag, or commit SHA
   .form-actions
     = button_tag 'Create branch', class: 'btn btn-create', tabindex: 3
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index 2c3fd1fcd4d..d9f28d66b66 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -14,7 +14,7 @@
 
   %td.branch-commit
     - if can?(current_user, :read_build, job)
-      = link_to namespace_project_build_url(job.project.namespace, job.project, job) do
+      = link_to namespace_project_job_url(job.project.namespace, job.project, job) do
         %span.build-link ##{job.id}
     - else
       %span.build-link ##{job.id}
@@ -23,20 +23,20 @@
       - if job.ref
         .icon-container
           = job.tag? ? icon('tag') : icon('code-fork')
-        = link_to job.ref, namespace_project_commits_path(job.project.namespace, job.project, job.ref), class: "monospace branch-name"
+        = link_to job.ref, project_ref_path(job.project, job.ref), class: "ref-name"
       - else
         .light none
       .icon-container.commit-icon
         = custom_icon("icon_commit")
 
     - if commit_sha
-      = link_to job.short_sha, namespace_project_commit_path(job.project.namespace, job.project, job.sha), class: "commit-id monospace"
+      = link_to job.short_sha, namespace_project_commit_path(job.project.namespace, job.project, job.sha), class: "commit-sha"
 
     - if job.stuck?
       = icon('warning', class: 'text-warning has-tooltip', title: 'Job is stuck. Check runners.')
 
     - if retried
-      = icon('spinner', class: 'text-warning has-tooltip', title: 'Job was retried')
+      = icon('refresh', class: 'text-warning has-tooltip', title: 'Job was retried')
 
     .label-container
       - if job.tags.any?
@@ -58,7 +58,7 @@
       - if pipeline.user
         = user_avatar(user: pipeline.user, size: 20)
       - else
-        %span.monospace API
+        %span.api API
 
   - if admin
     %td
@@ -95,16 +95,16 @@
   %td
     .pull-right
       - if can?(current_user, :read_build, job) && job.artifacts?
-        = link_to download_namespace_project_build_artifacts_path(job.project.namespace, job.project, job), rel: 'nofollow', download: '', title: 'Download artifacts', class: 'btn btn-build' do
+        = link_to download_namespace_project_job_artifacts_path(job.project.namespace, job.project, job), rel: 'nofollow', download: '', title: 'Download artifacts', class: 'btn btn-build' do
           = icon('download')
       - if can?(current_user, :update_build, job)
         - if job.active?
-          = link_to cancel_namespace_project_build_path(job.project.namespace, job.project, job, return_to: request.original_url), method: :post, title: 'Cancel', class: 'btn btn-build' do
+          = link_to cancel_namespace_project_job_path(job.project.namespace, job.project, job, return_to: request.original_url), method: :post, title: 'Cancel', class: 'btn btn-build' do
             = icon('remove', class: 'cred')
         - elsif allow_retry
-          - if job.playable? && !admin
-            = link_to play_namespace_project_build_path(job.project.namespace, job.project, job, return_to: request.original_url), method: :post, title: 'Play', class: 'btn btn-build' do
+          - if job.playable? && !admin && can?(current_user, :update_build, job)
+            = link_to play_namespace_project_job_path(job.project.namespace, job.project, job, return_to: request.original_url), method: :post, title: 'Play', class: 'btn btn-build' do
               = custom_icon('icon_play')
           - elsif job.retryable?
-            = link_to retry_namespace_project_build_path(job.project.namespace, job.project, job, return_to: request.original_url), method: :post, title: 'Retry', class: 'btn btn-build' do
+            = link_to retry_namespace_project_job_path(job.project.namespace, job.project, job, return_to: request.original_url), method: :post, title: 'Retry', class: 'btn btn-build' do
               = icon('repeat')
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 64adb70cb81..0aef5822f81 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,6 +1,8 @@
 .page-content-header
   .header-main-content
-    %strong Commit #{@commit.short_id}
+    %strong
+      Commit
+      %span.commit-sha= @commit.short_id
     = clipboard_button(text: @commit.id, title: "Copy commit SHA to clipboard")
     %span.hidden-xs authored
     #{time_ago_with_tooltip(@commit.authored_date)}
@@ -57,7 +59,7 @@
       = custom_icon("icon_commit")
     %span.cgray= pluralize(@commit.parents.count, "parent")
     - @commit.parents.each do |parent|
-      = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace"
+      = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "commit-sha"
     %span.commit-info.branches
       %i.fa.fa-spinner.fa-spin
 
@@ -68,9 +70,10 @@
         = link_to namespace_project_pipeline_path(@project.namespace, @project, last_pipeline.id) do
           = ci_icon_for_status(last_pipeline.status)
       Pipeline
-      = link_to "##{last_pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, last_pipeline.id), class: "monospace"
+      = link_to "##{last_pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, last_pipeline.id)
       = ci_label_for_status(last_pipeline.status)
       - if last_pipeline.stages.any?
+        with #{"stage".pluralize(last_pipeline.stages.count)}
         .mr-widget-pipeline-graph
           = render 'shared/mini_pipeline_graph', pipeline: last_pipeline, klass: 'js-commit-pipeline-graph'
       in
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
deleted file mode 100644
index 3ee85723ebe..00000000000
--- a/app/views/projects/commit/_pipeline.html.haml
+++ /dev/null
@@ -1,52 +0,0 @@
-.pipeline-graph-container
-  .row-content-block.build-content.middle-block.pipeline-actions
-    .pull-right
-      - if can?(current_user, :update_pipeline, pipeline.project)
-        - if pipeline.builds.latest.failed.any?(&:retryable?)
-          = link_to "Retry", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'js-retry-button btn btn-grouped btn-primary', method: :post
-
-        - if pipeline.builds.running_or_pending.any?
-          = link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
-
-    .oneline.clearfix
-      - if defined?(pipeline_details) && pipeline_details
-        Pipeline
-        = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
-        with
-        = pluralize pipeline.statuses.count(:id), "job"
-        - if pipeline.ref
-          for
-          = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
-        - if defined?(link_to_commit) && link_to_commit
-          for commit
-          = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
-        - if pipeline.duration
-          in
-          = time_interval_in_words pipeline.duration
-
-  .row-content-block.build-content.middle-block.js-pipeline-graph.hidden
-    = render "projects/pipelines/graph", pipeline: pipeline
-
-- if pipeline.yaml_errors.present?
-  .bs-callout.bs-callout-danger
-    %h4 Found errors in your .gitlab-ci.yml:
-    %ul
-      - pipeline.yaml_errors.split(",").each do |error|
-        %li= error
-    You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
-
-- if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
-  .bs-callout.bs-callout-warning
-    \.gitlab-ci.yml not found in this commit
-
-.table-holder.pipeline-holder
-  %table.table.ci-table.pipeline
-    %thead
-      %tr
-        %th Status
-        %th Job ID
-        %th Name
-        %th
-        %th Coverage
-        %th
-    = render partial: "projects/stage/stage", collection: pipeline.stages, as: :stage
diff --git a/app/views/projects/commit/branches.html.haml b/app/views/projects/commit/branches.html.haml
index 2b0c9a4b4de..911c9ddce06 100644
--- a/app/views/projects/commit/branches.html.haml
+++ b/app/views/projects/commit/branches.html.haml
@@ -1,15 +1,15 @@
-- if @branches.any?
-  %span
-    - branch = commit_default_branch(@project, @branches)
-    = link_to(namespace_project_tree_path(@project.namespace, @project, branch)) do
-      %span.label.label-gray
-        = branch
-    - if @branches.any? || @tags.any?
-      = link_to("#", class: "js-details-expand") do
-        %span.label.label-gray
-          \...
+- if @branches.any? || @tags.any?
+  - branch = commit_default_branch(@project, @branches)
+  = link_to(project_ref_path(@project, branch), class: "label label-gray ref-name") do
+    = icon('code-fork')
+    = branch
+
+  -# `commit_default_branch` deletes the default branch from `@branches`,
+  -# so only render this if we have more branches left
+  - if @branches.any? || @tags.any?
+    %span
+      = link_to "…", "#", class: "js-details-expand label label-gray"
+
       %span.js-details-content.hide
-        - if @branches.any?
-          = commit_branches_links(@project, @branches)
-        - if @tags.any?
-          = commit_tags_links(@project, @tags)
+        = commit_branches_links(@project, @branches) if @branches.any?
+        = commit_tags_links(@project, @tags) if @tags.any?
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index 16d2646cb4e..3a1be3fa4b6 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -13,7 +13,7 @@
     .block-connector
   = render "projects/diffs/diffs", diffs: @diffs, environment: @environment
 
-  = render "projects/notes/notes_with_form"
+  = render "shared/notes/notes_with_form", :autocomplete => true
   - if can_collaborate_with_project?
     - %w(revert cherry-pick).each do |type|
       = render "projects/commit/change", type: type, commit: @commit, title: @commit.title
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 8f32d2b72e5..3350a0ec152 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -37,6 +37,6 @@
       .commit-actions.flex-row.hidden-xs
         - if commit.status(ref)
           = render_commit_status(commit, ref: ref)
+        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-sha btn btn-transparent"
         = clipboard_button(text: commit.id, title: "Copy commit SHA to clipboard")
-        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
         = link_to_browse_code(project, commit)
diff --git a/app/views/projects/commits/_inline_commit.html.haml b/app/views/projects/commits/_inline_commit.html.haml
index c03bc3f9df9..5fb89935467 100644
--- a/app/views/projects/commits/_inline_commit.html.haml
+++ b/app/views/projects/commits/_inline_commit.html.haml
@@ -1,6 +1,6 @@
 %li.commit.inline-commit
   .commit-row-title
-    = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+    = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-sha"
     &nbsp;
     %span.str-truncated
       = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index 0f080b6acee..adb724c1b8d 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -7,17 +7,17 @@
       .input-group.inline-input-group
         %span.input-group-addon from
         = hidden_field_tag :from, params[:from]
-        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
+        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
           .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag'
-      = render "ref_dropdown"
+      = render 'shared/ref_dropdown'
     .compare-ellipsis.inline ...
     .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
       .input-group.inline-input-group
         %span.input-group-addon to
         = hidden_field_tag :to, params[:to]
-        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
+        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
           .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag'
-      = render "ref_dropdown"
+      = render 'shared/ref_dropdown'
     &nbsp;
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"
     - if @merge_request.present?
diff --git a/app/views/projects/compare/_ref_dropdown.html.haml b/app/views/projects/compare/_ref_dropdown.html.haml
deleted file mode 100644
index 05fb37cdc0f..00000000000
--- a/app/views/projects/compare/_ref_dropdown.html.haml
+++ /dev/null
@@ -1,5 +0,0 @@
-.dropdown-menu.dropdown-menu-selectable
-  = dropdown_title "Select Git revision"
-  = dropdown_filter "Filter by Git revision"
-  = dropdown_content
-  = dropdown_loading
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index 45be6581cfc..2cf14859f30 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -6,10 +6,10 @@
   .sub-header-block
     Compare Git revisions.
     %br
-    Fill input field with commit id like
-    %code.label-branch 4eedf23
+    Fill input field with commit SHA like
+    %code.ref-name 4eedf23
     or branch/tag name like
-    %code.label-branch master
+    %code.ref-name master
     and press compare button for the commits list and a code diff.
     %br
     Changes are shown <b>from</b> the version in the first field <b>to</b> the version in the second field.
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 0dfc9fe20ed..a1bca2cf83a 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -16,9 +16,9 @@
           There isn't anything to compare.
         %p.slead
           - if params[:to] == params[:from]
-            %span.label-branch= params[:from]
+            %span.ref-name= params[:from]
             and
-            %span.label-branch= params[:to]
+            %span.ref-name= params[:to]
             are the same.
           - else
             You'll need to use different branch names to get a valid comparison.
diff --git a/app/views/projects/cycle_analytics/_empty_stage.html.haml b/app/views/projects/cycle_analytics/_empty_stage.html.haml
index c3f95860e92..cdad0bc7231 100644
--- a/app/views/projects/cycle_analytics/_empty_stage.html.haml
+++ b/app/views/projects/cycle_analytics/_empty_stage.html.haml
@@ -2,6 +2,6 @@
   .empty-stage
     .icon-no-data
       = custom_icon ('icon_no_data')
-    %h4 We don't have enough data to show this stage.
+    %h4 {{ __('We don\'t have enough data to show this stage.') }}
     %p
       {{currentStage.emptyStageText}}
diff --git a/app/views/projects/cycle_analytics/_no_access.html.haml b/app/views/projects/cycle_analytics/_no_access.html.haml
index 0ffc79b3181..c3eda398234 100644
--- a/app/views/projects/cycle_analytics/_no_access.html.haml
+++ b/app/views/projects/cycle_analytics/_no_access.html.haml
@@ -2,6 +2,6 @@
   .no-access-stage
     .icon-lock
       = custom_icon ('icon_lock')
-    %h4 You need permission.
+    %h4 {{ __('You need permission.') }}
     %p
-      Want to see the data? Please ask administrator for access.
+      {{ __('Want to see the data? Please ask an administrator for access.') }}
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index dd3fa814716..74255167352 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -2,29 +2,30 @@
 - page_title "Cycle Analytics"
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('locale')
   = page_specific_javascript_bundle_tag('cycle_analytics')
 
 = render "projects/head"
 
 #cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
   - if @cycle_analytics_no_data
-    .bordered-box.landing.content-block{ "v-if" => "!isOverviewDialogDismissed" }
-      = icon("times", class: "dismiss-icon", "@click" => "dismissOverviewDialog()")
-      .row
-        .col-sm-3.col-xs-12.svg-container
-          = custom_icon('icon_cycle_analytics_splash')
-        .col-sm-8.col-xs-12.inner-content
-          %h4
-            Introducing Cycle Analytics
-          %p
-            Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.
-
-          = link_to "Read more",  help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
+    .landing.content-block{ "v-if" => "!isOverviewDialogDismissed" }
+      %button.dismiss-button{ type: 'button', 'aria-label': 'Dismiss Cycle Analytics introduction box' }
+        = icon("times", "@click" => "dismissOverviewDialog()")
+      .svg-container
+        = custom_icon('icon_cycle_analytics_splash')
+      .inner-content
+        %h4
+          {{ __('Introducing Cycle Analytics') }}
+        %p
+          {{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }}
+        %p
+          = link_to _('Read more'), help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
   = icon("spinner spin", "v-show" => "isLoading")
   .wrapper{ "v-show" => "!isLoading && !hasError" }
     .panel.panel-default
       .panel-heading
-        Pipeline Health
+        {{ __('Pipeline Health') }}
       .content-block
         .container-fluid
           .row
@@ -34,15 +35,15 @@
             .col-sm-3.col-xs-12.column
               .dropdown.inline.js-ca-dropdown
                 %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
-                  %span.dropdown-label Last 30 days
+                  %span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }}
                   %i.fa.fa-chevron-down
                 %ul.dropdown-menu.dropdown-menu-align-right
                   %li
                     %a{ "href" => "#", "data-value" => "30" }
-                      Last 30 days
+                      {{ n__('Last %d day', 'Last %d days', 30) }}
                   %li
                     %a{ "href" => "#", "data-value" => "90" }
-                      Last 90 days
+                      {{ n__('Last %d day', 'Last %d days', 90) }}
     .stage-panel-container
       .panel.panel-default.stage-panel
         .panel-heading
@@ -50,20 +51,20 @@
             %ul
               %li.stage-header
                 %span.stage-name
-                  Stage
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The phase of the development lifecycle.", "aria-hidden" => "true" }
+                  {{ s__('ProjectLifecycle|Stage') }}
+                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
               %li.median-header
                 %span.stage-name
-                  Median
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "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.", "aria-hidden" => "true" }
+                  {{ __('Median') }}
+                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("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."), "aria-hidden" => "true" }
               %li.event-header
                 %span.stage-name
-                  {{ currentStage ? currentStage.legend : 'Related Issues' }}
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The collection of events added to the data gathered for that stage.", "aria-hidden" => "true" }
+                  {{ currentStage ? __(currentStage.legend) : __('Related Issues') }}
+                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
               %li.total-time-header
                 %span.stage-name
-                  Total Time
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The time taken by each data entry gathered by that stage.", "aria-hidden" => "true" }
+                  {{ __('Total Time') }}
+                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
         .stage-panel-body
           %nav.stage-nav
             %ul
@@ -75,10 +76,10 @@
                     %span{ "v-if" => "stage.value" }
                       {{ stage.value }}
                     %span.stage-empty{ "v-else" => true }
-                      Not enough data
+                      {{ __('Not enough data') }}
                   %template{ "v-else" => true }
                     %span.not-available
-                      Not available
+                      {{ __('Not available') }}
           .section.stage-events
             %template{ "v-if" => "isLoadingStage" }
               = icon("spinner spin")
diff --git a/app/views/projects/deploy_keys/_index.html.haml b/app/views/projects/deploy_keys/_index.html.haml
index 4cfbd9add00..74756b58439 100644
--- a/app/views/projects/deploy_keys/_index.html.haml
+++ b/app/views/projects/deploy_keys/_index.html.haml
@@ -10,25 +10,4 @@
     = render @deploy_keys.form_partial_path
   .col-lg-9.col-lg-offset-3
     %hr
-  .col-lg-9.col-lg-offset-3.append-bottom-default.deploy-keys
-    %h5.prepend-top-0
-      Enabled deploy keys for this project (#{@deploy_keys.enabled_keys_size})
-    - if @deploy_keys.any_keys_enabled?
-      %ul.well-list
-        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.enabled_keys, as: :deploy_key
-    - else
-      .settings-message.text-center
-        No deploy keys found. Create one with the form above.
-    %h5.prepend-top-default
-      Deploy keys from projects you have access to (#{@deploy_keys.available_project_keys_size})
-    - if @deploy_keys.any_available_project_keys_enabled?
-      %ul.well-list
-        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.available_project_keys, as: :deploy_key
-    - else
-      .settings-message.text-center
-        No deploy keys from your projects could be found. Create one with the form above or add existing one below.
-    - if @deploy_keys.any_available_public_keys_enabled?
-      %h5.prepend-top-default
-        Public deploy keys available to any project (#{@deploy_keys.available_public_keys_size})
-      %ul.well-list
-        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.available_public_keys, as: :deploy_key
+  #js-deploy-keys{ data: { endpoint: namespace_project_deploy_keys_path } }
diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml
index 506246f2ee6..e2baaa625ae 100644
--- a/app/views/projects/deployments/_actions.haml
+++ b/app/views/projects/deployments/_actions.haml
@@ -8,6 +8,7 @@
           = icon('caret-down')
         %ul.dropdown-menu.dropdown-menu-align-right
           - actions.each do |action|
+            - next unless can?(current_user, :update_build, action)
             %li
               = link_to [:play, @project.namespace.becomes(Namespace), @project, action], method: :post, rel: 'nofollow' do
                 = custom_icon('icon_play')
diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml
index 170d786ecbf..31fd982c522 100644
--- a/app/views/projects/deployments/_commit.html.haml
+++ b/app/views/projects/deployments/_commit.html.haml
@@ -2,10 +2,10 @@
   - if deployment.ref
     .icon-container
       = deployment.tag? ? icon('tag') : icon('code-fork')
-    = link_to deployment.ref, namespace_project_commits_path(@project.namespace, @project, deployment.ref), class: "monospace branch-name"
+    = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
   .icon-container.commit-icon
     = custom_icon("icon_commit")
-  = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-id monospace"
+  = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha"
 
   %p.commit-title
     %span
diff --git a/app/views/projects/diffs/_content.html.haml b/app/views/projects/diffs/_content.html.haml
index c781e423c4d..59844bc00cd 100644
--- a/app/views/projects/diffs/_content.html.haml
+++ b/app/views/projects/diffs/_content.html.haml
@@ -1,12 +1,12 @@
-.diff-content.diff-wrap-lines
-  -# Skip all non non-supported blobs
-  - return unless blob.respond_to?(:text?)
+- blob = diff_file.blob
+
+.diff-content
   - if diff_file.too_large?
     .nothing-here-block This diff could not be displayed because it is too large.
-  - elsif blob.too_large?
+  - elsif blob.truncated?
     .nothing-here-block The file could not be displayed because it is too large.
   - elsif blob.readable_text?
-    - if !project.repository.diffable?(blob)
+    - if !diff_file.repository.diffable?(blob)
       .nothing-here-block This diff was suppressed by a .gitattributes entry.
     - elsif diff_file.collapsed?
       - url = url_for(params.merge(action: :diff_for_path, old_path: diff_file.old_path, new_path: diff_file.new_path, file_identifier: diff_file.file_identifier))
@@ -15,20 +15,13 @@
         %a.click-to-expand
           Click to expand it.
     - elsif diff_file.diff_lines.length > 0
-      - total_lines = 0
-      - if blob.lines.any?
-        - total_lines = blob.lines.last.chomp == '' ? blob.lines.size - 1 : blob.lines.size
-      - if diff_view == :parallel
-        = render "projects/diffs/parallel_view", diff_file: diff_file, total_lines: total_lines
-      - else
-        = render "projects/diffs/text_file", diff_file: diff_file, total_lines: total_lines
+      = render "projects/diffs/viewers/text", diff_file: diff_file
     - else
       - if diff_file.mode_changed?
         .nothing-here-block File mode changed
-      - elsif diff_file.renamed_file
+      - elsif diff_file.renamed_file?
         .nothing-here-block File moved
   - elsif blob.image?
-    - old_blob = diff_file.old_blob(diff_file.old_content_commit || @base_commit)
-    = render "projects/diffs/image", diff_file: diff_file, old_file: old_blob, file: blob
+    = render "projects/diffs/viewers/image", diff_file: diff_file
   - else
     .nothing-here-block No preview for this file type
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 71a1b9e6c05..d538c4c86c8 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -5,8 +5,8 @@
 
 .content-block.oneline-block.files-changed
   .inline-parallel-buttons
-    - if !expand_all_diffs? && diff_files.any? { |diff_file| diff_file.collapsed? }
-      = link_to 'Expand all', url_for(params.merge(expand_all_diffs: 1, format: nil)), class: 'btn btn-default'
+    - if !diffs_expanded? && diff_files.any? { |diff_file| diff_file.collapsed? }
+      = link_to 'Expand all', url_for(params.merge(expanded: 1, format: nil)), class: 'btn btn-default'
     - if show_whitespace_toggle
       - if current_controller?(:commit)
         = commit_diff_whitespace_link(diffs.project, @commit, class: 'hidden-xs')
@@ -23,12 +23,4 @@
   = render 'projects/diffs/warning', diff_files: diffs
 
 .files{ data: { can_create_note: can_create_note } }
-  - diff_files.each_with_index do |diff_file|
-    - diff_commit = commit_for_diff(diff_file)
-    - blob = diff_file.blob(diff_commit)
-    - next unless blob
-    - blob.load_all_data!(diffs.project.repository) unless blob.too_large?
-    - file_hash = hexdigest(diff_file.file_path)
-
-    = render 'projects/diffs/file', file_hash: file_hash, project: diffs.project,
-      diff_file: diff_file, diff_commit: diff_commit, blob: blob, environment: environment
+  = render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment }
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index f22b385fc0f..b5aea217384 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -1,10 +1,12 @@
 - environment = local_assigns.fetch(:environment, nil)
-.diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_commit.id) }
+- file_hash = hexdigest(diff_file.file_path)
+.diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_file.content_sha) }
   .js-file-title.file-title-flex-parent
     .file-header-content
-      = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}"
+      = render "projects/diffs/file_header", diff_file: diff_file, url: "##{file_hash}"
 
     - unless diff_file.submodule?
+      - blob = diff_file.blob
       .file-actions.hidden-xs
         - if blob.readable_text?
           = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip', title: "Toggle comments for this file", disabled: @diff_notes_disabled do
@@ -15,9 +17,9 @@
             = edit_blob_link(@merge_request.source_project, @merge_request.source_branch, diff_file.new_path,
                              blob: blob, link_opts: link_opts)
 
-        = view_file_button(diff_commit.id, diff_file.new_path, project)
-        = view_on_environment_button(diff_commit.id, diff_file.new_path, environment) if environment
+        = view_file_button(diff_file.content_sha, diff_file.file_path, project)
+        = view_on_environment_button(diff_file.content_sha, diff_file.file_path, environment) if environment
 
   = render 'projects/fork_suggestion'
 
-  = render 'projects/diffs/content', diff_file: diff_file, diff_commit: diff_commit, blob: blob, project: project
+  = render 'projects/diffs/content', diff_file: diff_file
diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml
index 7d6b3701f95..73c316472e3 100644
--- a/app/views/projects/diffs/_file_header.html.haml
+++ b/app/views/projects/diffs/_file_header.html.haml
@@ -1,17 +1,22 @@
-%i.fa.diff-toggle-caret.fa-fw
-- if defined?(blob) && blob && diff_file.submodule?
+- show_toggle = local_assigns.fetch(:show_toggle, true)
+
+- if show_toggle
+  %i.fa.diff-toggle-caret.fa-fw
+
+- if diff_file.submodule?
+  - blob = diff_file.blob
   %span
     = icon('archive fw')
 
     %strong.file-title-name
-      = submodule_link(blob, diff_commit.id, project.repository)
+      = submodule_link(blob, diff_file.content_sha, diff_file.repository)
 
     = copy_file_path_button(blob.path)
 - else
   = conditional_link_to url.present?, url do
     = blob_icon diff_file.b_mode, diff_file.file_path
 
-    - if diff_file.renamed_file
+    - if diff_file.renamed_file?
       - old_path, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
       %strong.file-title-name.has-tooltip{ data: { title: diff_file.old_path, container: 'body' } }
         = old_path
@@ -19,12 +24,13 @@
       %strong.file-title-name.has-tooltip{ data: { title: diff_file.new_path, container: 'body' } }
         = new_path
     - else
-      %strong.file-title-name.has-tooltip{ data: { title: diff_file.new_path, container: 'body' } }
-        = diff_file.new_path
-      - if diff_file.deleted_file
+      %strong.file-title-name.has-tooltip{ data: { title: diff_file.file_path, container: 'body' } }
+        = diff_file.file_path
+
+      - if diff_file.deleted_file?
         deleted
 
-  = copy_file_path_button(diff_file.new_path)
+  = copy_file_path_button(diff_file.file_path)
 
   - if diff_file.mode_changed?
     %small
diff --git a/app/views/projects/diffs/_image.html.haml b/app/views/projects/diffs/_image.html.haml
deleted file mode 100644
index ca10921c5e2..00000000000
--- a/app/views/projects/diffs/_image.html.haml
+++ /dev/null
@@ -1,69 +0,0 @@
-- diff = diff_file.diff
-- file_raw_path = namespace_project_raw_path(@project.namespace, @project, tree_join(diff_file.new_ref, diff.new_path))
-// diff_refs will be nil for orphaned commits (e.g. first commit in repo)
-- if diff_file.old_ref
-  - old_file_raw_path = namespace_project_raw_path(@project.namespace, @project, tree_join(diff_file.old_ref, diff.old_path))
-
-- if diff.renamed_file || diff.new_file || diff.deleted_file
-  .image
-    %span.wrap
-      .frame{ class: image_diff_class(diff) }
-        %img{ src: diff.deleted_file ? old_file_raw_path : file_raw_path, alt: diff.new_path }
-      %p.image-info= number_to_human_size(file.size)
-- else
-  .image
-    .two-up.view
-      %span.wrap
-        .frame.deleted
-          %a{ href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.old_ref, diff.old_path)) }
-            %img{ src: old_file_raw_path, alt: diff.old_path }
-        %p.image-info.hide
-          %span.meta-filesize= number_to_human_size(old_file.size)
-          |
-          %b W:
-          %span.meta-width
-          |
-          %b H:
-          %span.meta-height
-      %span.wrap
-        .frame.added
-          %a{ href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.new_ref, diff.new_path)) }
-            %img{ src: file_raw_path, alt: diff.new_path }
-        %p.image-info.hide
-          %span.meta-filesize= number_to_human_size(file.size)
-          |
-          %b W:
-          %span.meta-width
-          |
-          %b H:
-          %span.meta-height
-
-    .swipe.view.hide
-      .swipe-frame
-        .frame.deleted
-          %img{ src: old_file_raw_path, alt: diff.old_path }
-        .swipe-wrap
-          .frame.added
-            %img{ src: file_raw_path, alt: diff.new_path }
-        %span.swipe-bar
-          %span.top-handle
-          %span.bottom-handle
-
-    .onion-skin.view.hide
-      .onion-skin-frame
-        .frame.deleted
-          %img{ src: old_file_raw_path, alt: diff.old_path }
-        .frame.added
-          %img{ src: file_raw_path, alt: diff.new_path }
-        .controls
-          .transparent
-          .drag-track
-            .dragger{ :style => "left: 0px;" }
-          .opaque
-
-
-  .view-modes.hide
-    %ul.view-modes-menu
-      %li.two-up{ data: { mode: 'two-up' } } 2-up
-      %li.swipe{ data: { mode: 'swipe' } } Swipe
-      %li.onion-skin{ data: { mode: 'onion-skin' } } Onion skin
diff --git a/app/views/projects/diffs/_line.html.haml b/app/views/projects/diffs/_line.html.haml
index 7439b8a66f7..43708d22a0c 100644
--- a/app/views/projects/diffs/_line.html.haml
+++ b/app/views/projects/diffs/_line.html.haml
@@ -3,7 +3,7 @@
 - discussions = local_assigns.fetch(:discussions, nil)
 - type = line.type
 - line_code = diff_file.line_code(line)
-- if discussions && !line.meta?
+- if discussions && line.discussable?
   - line_discussions = discussions[line_code]
 %tr.line_holder{ class: type, id: (line_code unless plain) }
   - case type
diff --git a/app/views/projects/diffs/_parallel_view.html.haml b/app/views/projects/diffs/_parallel_view.html.haml
index 45c95f7ab6a..8e5f4d2573d 100644
--- a/app/views/projects/diffs/_parallel_view.html.haml
+++ b/app/views/projects/diffs/_parallel_view.html.haml
@@ -49,7 +49,7 @@
 
       - if discussions_left || discussions_right
         = render "discussions/parallel_diff_discussion", discussions_left: discussions_left, discussions_right: discussions_right
-    - if !diff_file.new_file && !diff_file.deleted_file && diff_file.diff_lines.any?
+    - if !diff_file.new_file? && !diff_file.deleted_file? && diff_file.diff_lines.any?
       - last_line = diff_file.diff_lines.last
       - if last_line.new_pos < total_lines
         %tr.line_holder.parallel
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
index fd4f3c8d3cc..e69c7f20d49 100644
--- a/app/views/projects/diffs/_stats.html.haml
+++ b/app/views/projects/diffs/_stats.html.haml
@@ -12,19 +12,19 @@
       - diff_files.each do |diff_file|
         - file_hash = hexdigest(diff_file.file_path)
         %li
-          - if diff_file.deleted_file
+          - if diff_file.deleted_file?
             %span.deleted-file
               %a{ href: "##{file_hash}" }
                 %i.fa.fa-minus
                 = diff_file.old_path
-          - elsif diff_file.renamed_file
+          - elsif diff_file.renamed_file?
             %span.renamed-file
               %a{ href: "##{file_hash}" }
                 %i.fa.fa-minus
                 = diff_file.old_path
                 &rarr;
                 = diff_file.new_path
-          - elsif diff_file.new_file
+          - elsif diff_file.new_file?
             %span.new-file
               %a{ href: "##{file_hash}" }
                 %i.fa.fa-plus
diff --git a/app/views/projects/diffs/_text_file.html.haml b/app/views/projects/diffs/_text_file.html.haml
index 5f3968b6709..e8a5e63e59e 100644
--- a/app/views/projects/diffs/_text_file.html.haml
+++ b/app/views/projects/diffs/_text_file.html.haml
@@ -3,13 +3,13 @@
   .suppressed-container
     %a.show-suppressed-diff.js-show-suppressed-diff Changes suppressed. Click to show.
 
-%table.text-file.code.js-syntax-highlight{ data: diff_view_data, class: too_big ? 'hide' : '' }
+%table.text-file.diff-wrap-lines.code.js-syntax-highlight{ data: diff_view_data, class: too_big ? 'hide' : '' }
   = render partial: "projects/diffs/line",
     collection: diff_file.highlighted_diff_lines,
     as: :line,
     locals: { diff_file: diff_file, discussions: @grouped_diff_discussions }
 
-  - if !diff_file.new_file && !diff_file.deleted_file && diff_file.highlighted_diff_lines.any?
+  - if !diff_file.new_file? && !diff_file.deleted_file? && diff_file.highlighted_diff_lines.any?
     - last_line = diff_file.highlighted_diff_lines.last
     - if last_line.new_pos < total_lines
       %tr.line_holder
diff --git a/app/views/projects/diffs/viewers/_image.html.haml b/app/views/projects/diffs/viewers/_image.html.haml
new file mode 100644
index 00000000000..ea75373581e
--- /dev/null
+++ b/app/views/projects/diffs/viewers/_image.html.haml
@@ -0,0 +1,68 @@
+- blob = diff_file.blob
+- old_blob = diff_file.old_blob
+- blob_raw_path = diff_file_blob_raw_path(diff_file)
+- old_blob_raw_path = diff_file_old_blob_raw_path(diff_file)
+
+- if diff_file.new_file? || diff_file.deleted_file?
+  .image
+    %span.wrap
+      .frame{ class: (diff_file.deleted_file? ? 'deleted' : 'added') }
+        %img{ src: blob_raw_path, alt: diff_file.file_path }
+      %p.image-info= number_to_human_size(blob.size)
+- else
+  .image
+    .two-up.view
+      %span.wrap
+        .frame.deleted
+          %a{ href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.old_content_sha, diff_file.old_path)) }
+            %img{ src: old_blob_raw_path, alt: diff_file.old_path }
+        %p.image-info.hide
+          %span.meta-filesize= number_to_human_size(old_blob.size)
+          |
+          %b W:
+          %span.meta-width
+          |
+          %b H:
+          %span.meta-height
+      %span.wrap
+        .frame.added
+          %a{ href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.content_sha, diff_file.new_path)) }
+            %img{ src: blob_raw_path, alt: diff_file.new_path }
+        %p.image-info.hide
+          %span.meta-filesize= number_to_human_size(blob.size)
+          |
+          %b W:
+          %span.meta-width
+          |
+          %b H:
+          %span.meta-height
+
+    .swipe.view.hide
+      .swipe-frame
+        .frame.deleted
+          %img{ src: old_blob_raw_path, alt: diff_file.old_path }
+        .swipe-wrap
+          .frame.added
+            %img{ src: blob_raw_path, alt: diff_file.new_path }
+        %span.swipe-bar
+          %span.top-handle
+          %span.bottom-handle
+
+    .onion-skin.view.hide
+      .onion-skin-frame
+        .frame.deleted
+          %img{ src: old_blob_raw_path, alt: diff_file.old_path }
+        .frame.added
+          %img{ src: blob_raw_path, alt: diff_file.new_path }
+        .controls
+          .transparent
+          .drag-track
+            .dragger{ :style => "left: 0px;" }
+          .opaque
+
+
+  .view-modes.hide
+    %ul.view-modes-menu
+      %li.two-up{ data: { mode: 'two-up' } } 2-up
+      %li.swipe{ data: { mode: 'swipe' } } Swipe
+      %li.onion-skin{ data: { mode: 'onion-skin' } } Onion skin
diff --git a/app/views/projects/diffs/viewers/_text.html.haml b/app/views/projects/diffs/viewers/_text.html.haml
new file mode 100644
index 00000000000..e4b89671724
--- /dev/null
+++ b/app/views/projects/diffs/viewers/_text.html.haml
@@ -0,0 +1,8 @@
+- blob = diff_file.blob
+- blob.load_all_data!(diff_file.repository)
+- total_lines = blob.lines.size
+- total_lines -= 1 if total_lines > 0 && blob.lines.last.blank?
+- if diff_view == :parallel
+  = render "projects/diffs/parallel_view", diff_file: diff_file, total_lines: total_lines
+- else
+  = render "projects/diffs/text_file", diff_file: diff_file, total_lines: total_lines
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 160345cfaa5..f5549d7f4cd 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -40,8 +40,8 @@
           .form_group.prepend-top-20.sharing-and-permissions
             .row.js-visibility-select
               .col-md-9
-                %label.label-light
-                  = label_tag :project_visibility, 'Project Visibility', class: 'label-light'
+                .label-light
+                  = label_tag :project_visibility, 'Project Visibility', class: 'label-light', for: :project_visibility_level
                   = link_to "(?)", help_page_path("public_access/public_access")
                 %span.help-block
               .col-md-3.visibility-select-container
@@ -65,7 +65,7 @@
                 .row
                   .col-md-9.project-feature.nested
                     = feature_fields.label :builds_access_level, "Pipelines", class: 'label-light'
-                    %span.help-block Submit, test and deploy your changes before merge
+                    %span.help-block Build, test, and deploy your changes
                   .col-md-3
                     = project_feature_access_select(:builds_access_level)
 
@@ -246,14 +246,16 @@
     .row.prepend-top-default
       .col-lg-3
         %h4.prepend-top-0.danger-title
-          Transfer project
+          Transfer project to new group
+        %p.append-bottom-0
+          Please select the group you want to transfer this project to in the dropdown to the right.
       .col-lg-9
-        = form_for([@project.namespace.becomes(Namespace), @project], url: transfer_namespace_project_path(@project.namespace, @project), method: :put, remote: true) do |f|
+        = form_for([@project.namespace.becomes(Namespace), @project], url: transfer_namespace_project_path(@project.namespace, @project), method: :put, remote: true, html: { class: 'js-project-transfer-form' } ) do |f|
           .form-group
             = label_tag :new_namespace_id, nil, class: 'label-light' do
-              %span Namespace
+              %span  Select a new namespace
             .form-group
-              = select_tag :new_namespace_id, namespaces_options(@project.namespace_id), { prompt: 'Choose a project namespace', class: 'select2' }
+              = select_tag :new_namespace_id, namespaces_options(nil), include_blank: true, class: 'select2'
             %ul
               %li Be careful. Changing the project's namespace can have unintended side effects.
               %li You can only transfer the project to namespaces you manage.
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index 7315e671056..9e221240cf2 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -13,7 +13,7 @@
         = render 'projects/environments/metrics_button', environment: @environment
         - if can?(current_user, :update_environment, @environment)
           = link_to 'Edit', edit_namespace_project_environment_path(@project.namespace, @project, @environment), class: 'btn'
-        - if can?(current_user, :create_deployment, @environment) && @environment.can_stop?
+        - if can?(current_user, :stop_environment, @environment)
           = link_to 'Stop', stop_namespace_project_environment_path(@project.namespace, @project, @environment), data: { confirm: 'Are you sure you want to stop this environment?' }, class: 'btn btn-danger', method: :post
 
   .environments-container
diff --git a/app/views/projects/environments/terminal.html.haml b/app/views/projects/environments/terminal.html.haml
index c8363087d6a..4c4aa0baff3 100644
--- a/app/views/projects/environments/terminal.html.haml
+++ b/app/views/projects/environments/terminal.html.haml
@@ -16,8 +16,9 @@
 
       .col-sm-6
         .nav-controls
-          = link_to @environment.external_url, class: 'btn btn-default', target: '_blank', rel: 'noopener noreferrer nofollow' do
-            = icon('external-link')
+          - if @environment.external_url.present?
+            = link_to @environment.external_url, class: 'btn btn-default', target: '_blank', rel: 'noopener noreferrer nofollow' do
+              = icon('external-link')
           = render 'projects/deployments/actions', deployment: @environment.last_deployment
 
 .terminal-container{ class: container_class }
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index 4cdb44325b3..be0462f91cd 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -1,4 +1,5 @@
 - page_title "Find File", @ref
+= render "projects/commits/head"
 
 .file-finder-holder.tree-holder.clearfix
   .nav-block
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
index f458646522c..b23bbadbdb4 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -27,7 +27,7 @@
         = custom_icon("icon_commit")
 
     - if commit_sha
-      = link_to generic_commit_status.short_sha, namespace_project_commit_path(generic_commit_status.project.namespace, generic_commit_status.project, generic_commit_status.sha), class: "commit-id monospace"
+      = link_to generic_commit_status.short_sha, namespace_project_commit_path(generic_commit_status.project.namespace, generic_commit_status.project, generic_commit_status.sha), class: "commit-sha"
 
     - if retried
       = icon('warning', class: 'text-warning has-tooltip', title: 'Status was retried.')
@@ -48,7 +48,7 @@
       - if generic_commit_status.pipeline.user
         = user_avatar(user: generic_commit_status.pipeline.user, size: 20)
       - else
-        %span.monospace API
+        %span.api API
 
   - if admin
     %td
diff --git a/app/views/projects/group_links/_index.html.haml b/app/views/projects/group_links/_index.html.haml
index b6116dbec41..debb0214d06 100644
--- a/app/views/projects/group_links/_index.html.haml
+++ b/app/views/projects/group_links/_index.html.haml
@@ -6,11 +6,9 @@
     %p
       Projects can be stored in only one group at once. However you can share a project with other groups here.
   .col-lg-9
-    %h5.prepend-top-0
-      Set a group to share
     = form_tag namespace_project_group_links_path(@project.namespace, @project), class: 'js-requires-input', method: :post do
       .form-group
-        = label_tag :link_group_id, "Group", class: "label-light"
+        = label_tag :link_group_id, "Select a group to share with", class: "label-light"
         = groups_select_tag(:link_group_id, data: { skip_groups: @skip_groups }, required: true)
       .form-group
         = label_tag :link_group_access, "Max access level", class: "label-light"
diff --git a/app/views/projects/hook_logs/_index.html.haml b/app/views/projects/hook_logs/_index.html.haml
new file mode 100644
index 00000000000..6962b223451
--- /dev/null
+++ b/app/views/projects/hook_logs/_index.html.haml
@@ -0,0 +1,37 @@
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    %h4.prepend-top-0
+      Recent Deliveries
+    %p When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.
+  .col-lg-9
+    - if hook_logs.any?
+      %table.table
+        %thead
+          %tr
+            %th Status
+            %th Trigger
+            %th URL
+            %th Elapsed time
+            %th Request time
+            %th
+        - hook_logs.each do |hook_log|
+          %tr
+            %td
+              = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
+            %td.hidden-xs
+              %span.label.label-gray.deploy-project-label
+                = hook_log.trigger.singularize.titleize
+            %td
+              = truncate(hook_log.url, length: 50)
+            %td.light
+              #{number_with_precision(hook_log.execution_duration, precision: 2)} ms
+            %td.light
+              = time_ago_with_tooltip(hook_log.created_at)
+            %td
+              = link_to 'View details', namespace_project_hook_hook_log_path(project.namespace, project, hook, hook_log)
+
+      = paginate hook_logs, theme: 'gitlab'
+
+    - else
+      .settings-message.text-center
+        You don't have any webhooks deliveries
diff --git a/app/views/projects/hook_logs/show.html.haml b/app/views/projects/hook_logs/show.html.haml
new file mode 100644
index 00000000000..2eabe92f8eb
--- /dev/null
+++ b/app/views/projects/hook_logs/show.html.haml
@@ -0,0 +1,11 @@
+= render 'projects/settings/head'
+
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    %h4.prepend-top-0
+      Request details
+  .col-lg-9
+
+    = link_to 'Resend Request', retry_namespace_project_hook_hook_log_path(@project.namespace, @project, @hook, @hook_log), class: "btn btn-default pull-right prepend-left-10"
+
+    = render partial: 'shared/hook_logs/content', locals: { hook_log: @hook_log }
diff --git a/app/views/projects/hooks/edit.html.haml b/app/views/projects/hooks/edit.html.haml
index 7998713be1f..fd382c1d63f 100644
--- a/app/views/projects/hooks/edit.html.haml
+++ b/app/views/projects/hooks/edit.html.haml
@@ -1,3 +1,4 @@
+- page_title 'Integrations'
 = render 'projects/settings/head'
 
 .row.prepend-top-default
@@ -10,5 +11,12 @@
   .col-lg-9.append-bottom-default
     = form_for [@project.namespace.becomes(Namespace), @project, @hook], as: :hook, url: namespace_project_hook_path do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
+
       = f.submit 'Save changes', class: 'btn btn-create'
+      = link_to 'Test hook', test_namespace_project_hook_path(@project.namespace, @project, @hook), class: 'btn btn-default'
+      = link_to 'Remove', namespace_project_hook_path(@project.namespace, @project, @hook), method: :delete, class: 'btn btn-remove pull-right', data: { confirm: 'Are you sure?' }
+
+%hr
+
+= render partial: 'projects/hook_logs/index', locals: { hook: @hook, hook_logs: @hook_logs, project: @project }
 
diff --git a/app/views/projects/imports/new.html.haml b/app/views/projects/imports/new.html.haml
index 2cd8d03e30e..25a87411cac 100644
--- a/app/views/projects/imports/new.html.haml
+++ b/app/views/projects/imports/new.html.haml
@@ -10,7 +10,7 @@
     .panel-body
       %pre
         :preserve
-          #{sanitize_repo_path(@project, @project.import_error)}
+          #{h(sanitize_repo_path(@project, @project.import_error))}
 
 = form_for @project, url: namespace_project_import_path(@project.namespace, @project), method: :post, html: { class: 'form-horizontal' } do |f|
   = render "shared/import_form", f: f
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index 5d4e593e4ef..8b095f4ca10 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -1,7 +1,7 @@
 - content_for :note_actions do
   - if can?(current_user, :update_issue, @issue)
-    = link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, format: 'json'), data: {no_turbolink: true, original_text: "Reopen issue", alternative_text: "Comment & reopen issue"}, class: "btn btn-nr btn-reopen btn-comment js-note-target-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
-    = link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, format: 'json'), data: {no_turbolink: true, original_text: "Close issue", alternative_text: "Comment & close issue"}, class: "btn btn-nr btn-close btn-comment js-note-target-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
+    = link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, format: 'json'), data: {original_text: "Reopen issue", alternative_text: "Comment & reopen issue"}, class: "btn btn-nr btn-reopen btn-comment js-note-target-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
+    = link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, format: 'json'), data: {original_text: "Close issue", alternative_text: "Comment & close issue"}, class: "btn btn-nr btn-close btn-comment js-note-target-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
 
 #notes
-  = render 'projects/notes/notes_with_form'
+  = render 'shared/notes/notes_with_form', :autocomplete => true
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 0e3902c066a..c184e0e0022 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -13,9 +13,9 @@
             %li
               CLOSED
 
-          - if issue.assignee
+          - if issue.assignees.any?
             %li
-              = link_to_member(@project, issue.assignee, name: false, title: "Assigned to :name")
+              = render 'shared/issuable/assignees', project: @project, issue: issue
 
           = render 'shared/issuable_meta_data', issuable: issue
 
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 6bc6bf76e18..dba092c8844 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -17,7 +17,7 @@
             .description
               %strong Create a merge request
               %span
-                Creates a branch named after this issue and a merge request. The source branch is '#{@project.default_branch}' by default.
+                Creates a merge request named after this issue, with source branch created from '#{@project.default_branch}'.
         %li.divider.droplab-item-ignore
         %li{ role: 'button', data: {  value: 'create-branch', 'text' => 'Create a branch' } }
           .menu-item
@@ -26,4 +26,4 @@
             .description
               %strong Create a branch
               %span
-                Creates a branch named after this issue. The source branch is '#{@project.default_branch}' by default.
+                Creates a branch named after this issue, from '#{@project.default_branch}'.
diff --git a/app/views/projects/issues/_related_branches.html.haml b/app/views/projects/issues/_related_branches.html.haml
index 1892ebb512f..8c9f6f3b4df 100644
--- a/app/views/projects/issues/_related_branches.html.haml
+++ b/app/views/projects/issues/_related_branches.html.haml
@@ -11,5 +11,4 @@
             = render_pipeline_status(pipeline)
         %span.related-branch-info
           %strong
-            = link_to namespace_project_compare_path(@project.namespace, @project, from: @project.default_branch, to: branch), class: "label-branch" do
-              = branch
+            = link_to branch, namespace_project_compare_path(@project.namespace, @project, from: @project.default_branch, to: branch), class: "ref-name"
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 4ac0bc1d028..60900e9d660 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -7,7 +7,8 @@
   = render "projects/issues/head"
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('filtered_search')
+  = webpack_bundle_tag 'common_vue'
+  = webpack_bundle_tag 'filtered_search'
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, params.merge(rss_url_options), title: "#{@project.name} issues")
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 1418ad73553..7bf271c2fc5 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -2,6 +2,8 @@
 - page_title           "#{@issue.title} (#{@issue.to_reference})", "Issues"
 - page_description     @issue.description
 - page_card_attributes @issue.card_attributes
+- can_update_issue = can?(current_user, :update_issue, @issue)
+- can_report_spam = @issue.submittable_as_spam_by?(current_user)
 
 .clearfix.detail-page-header
   .issuable-header
@@ -27,41 +29,41 @@
         = icon('caret-down')
       .dropdown-menu.dropdown-menu-align-right.hidden-lg
         %ul
-          %li
-            = link_to 'New issue', new_namespace_project_issue_path(@project.namespace, @project), title: 'New issue', id: 'new_issue_link'
-          - if can?(current_user, :update_issue, @issue)
+          - if can_update_issue
             %li
-              = link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, format: 'json'), data: {no_turbolink: true}, class: "btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
+              = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'issuable-edit'
             %li
-              = link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, format: 'json'), data: {no_turbolink: true}, class: "btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
+              = link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, format: 'json'), class: "btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
             %li
-              = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue)
-          - if @issue.submittable_as_spam_by?(current_user)
+              = link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, format: 'json'), class: "btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
+          - if can_report_spam
             %li
               = link_to 'Submit as spam', mark_as_spam_namespace_project_issue_path(@project.namespace, @project, @issue), method: :post, class: 'btn-spam', title: 'Submit as spam'
+          - if can_update_issue || can_report_spam
+            %li.divider
+          %li
+            = link_to 'New issue', new_namespace_project_issue_path(@project.namespace, @project), title: 'New issue', id: 'new_issue_link'
 
+    - if can_update_issue
+      = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'hidden-xs hidden-sm btn btn-grouped issuable-edit'
+      = link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, format: 'json'), class: "hidden-xs hidden-sm btn btn-grouped btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
+      = link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, format: 'json'), class: "hidden-xs hidden-sm btn btn-grouped btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
+    - if can_report_spam
+      = link_to 'Submit as spam', mark_as_spam_namespace_project_issue_path(@project.namespace, @project, @issue), method: :post, class: 'hidden-xs hidden-sm btn btn-grouped btn-spam', title: 'Submit as spam'
     = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'hidden-xs hidden-sm btn btn-grouped new-issue-link btn-new btn-inverted', title: 'New issue', id: 'new_issue_link' do
       New issue
-    - if can?(current_user, :update_issue, @issue)
-      = link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, format: 'json'), data: {no_turbolink: true}, class: "hidden-xs hidden-sm btn btn-grouped btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
-      = link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, format: 'json'), data: {no_turbolink: true}, class: "hidden-xs hidden-sm btn btn-grouped btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
-      - if @issue.submittable_as_spam_by?(current_user)
-        = link_to 'Submit as spam', mark_as_spam_namespace_project_issue_path(@project.namespace, @project, @issue), method: :post, class: 'hidden-xs hidden-sm btn btn-grouped btn-spam', title: 'Submit as spam'
-      = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'hidden-xs hidden-sm btn btn-grouped issuable-edit'
 
 .issue-details.issuable-details
   .detail-page-description.content-block
-    .issue-title-data.hidden{ "data" => { "initial-title" => markdown_field(@issue, :title),
-      "endpoint" => rendered_title_namespace_project_issue_path(@project.namespace, @project, @issue),
-    } }
-    .issue-title-entrypoint
-    - if @issue.description.present?
-      .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' }
-        .wiki
-          = markdown_field(@issue, :description)
-        %textarea.hidden.js-task-list-field
-          = @issue.description
-    = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue_edited_ago')
+    %script#js-issuable-app-initial-data{ type: "application/json" }= issuable_initial_data(@issue)
+    #js-issuable-app
+      %h2.title= markdown_field(@issue, :title)
+      - if @issue.description.present?
+        .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' }
+          .wiki= markdown_field(@issue, :description)
+          %textarea.hidden.js-task-list-field= @issue.description
+
+    = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')
 
     #merge-requests{ data: { url: referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue) } }
       // This element is filled in using JavaScript.
@@ -69,11 +71,11 @@
     #related-branches{ data: { url: related_branches_namespace_project_issue_url(@project.namespace, @project, @issue) } }
       // This element is filled in using JavaScript.
 
-  .content-block.content-block-small
+  .content-block.emoji-block
     .row
-      .col-sm-6
+      .col-sm-8
         = render 'award_emoji/awards_block', awardable: @issue, inline: true
-      .col-sm-6.new-branch-col
+      .col-sm-4.new-branch-col
         = render 'new_branch' unless @issue.confidential?
 
   %section.issuable-discussion
diff --git a/app/views/projects/builds/_header.html.haml b/app/views/projects/jobs/_header.html.haml
index a0f8f105d9a..ad72ab5b199 100644
--- a/app/views/projects/builds/_header.html.haml
+++ b/app/views/projects/jobs/_header.html.haml
@@ -6,20 +6,18 @@
     = render 'ci/status/badge', status: @build.detailed_status(current_user), link: false, title: @build.status_title
     %strong
       Job
-      = link_to namespace_project_build_path(@project.namespace, @project, @build), class: 'js-build-id' do
-        \##{@build.id}
+      = link_to "##{@build.id}", namespace_project_job_path(@project.namespace, @project, @build), class: 'js-build-id'
     in pipeline
-    = link_to pipeline_path(pipeline) do
-      %strong ##{pipeline.id}
-    for commit
-    = link_to namespace_project_commit_path(@project.namespace, @project, pipeline.sha) do
-      %strong= pipeline.short_sha
+    %strong
+      = link_to "##{pipeline.id}", pipeline_path(pipeline)
+    for
+    %strong
+      = link_to pipeline.short_sha, namespace_project_commit_path(@project.namespace, @project, pipeline.sha), class: 'commit-sha'
     from
-    = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
-      %code
-        = @build.ref
+    %strong
+      = link_to @build.ref, project_ref_path(@project, @build.ref), class: 'ref-name'
 
-    = render "projects/builds/user" if @build.user
+    = render "projects/jobs/user" if @build.user
 
     = time_ago_with_tooltip(@build.created_at)
 
@@ -28,6 +26,6 @@
       - if can?(current_user, :create_issue, @project) && @build.failed?
         = link_to "New issue", new_namespace_project_issue_path(@project.namespace, @project, issue: build_failed_issue_options), class: 'btn btn-new btn-inverted'
       - if can?(current_user, :update_build, @build) && @build.retryable?
-        = link_to "Retry job", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-inverted-secondary', method: :post
+        = link_to "Retry job", retry_namespace_project_job_path(@project.namespace, @project, @build), class: 'btn btn-inverted-secondary', method: :post
     %button.btn.btn-default.pull-right.visible-xs-block.visible-sm-block.build-gutter-toggle.js-sidebar-build-toggle{ role: "button", type: "button" }
       = icon('angle-double-left')
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/jobs/_sidebar.html.haml
index 43191fae9e6..3e83142377b 100644
--- a/app/views/projects/builds/_sidebar.html.haml
+++ b/app/views/projects/jobs/_sidebar.html.haml
@@ -1,6 +1,6 @@
 - builds = @build.pipeline.builds.to_a
 
-%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "153", "spy" => "affix" } }
+%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" } }
   .block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default
     Job
     %strong ##{@build.id}
@@ -30,21 +30,21 @@
         - if @build.artifacts?
           .btn-group.btn-group-justified{ role: :group }
             - if @build.has_expiring_artifacts? && can?(current_user, :update_build, @build)
-              = link_to keep_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default', method: :post do
+              = link_to keep_namespace_project_job_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default', method: :post do
                 Keep
 
-            = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build), rel: 'nofollow', download: '', class: 'btn btn-sm btn-default' do
+            = link_to download_namespace_project_job_artifacts_path(@project.namespace, @project, @build), rel: 'nofollow', download: '', class: 'btn btn-sm btn-default' do
               Download
 
             - if @build.artifacts_metadata?
-              = link_to browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default' do
+              = link_to browse_namespace_project_job_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default' do
                 Browse
 
     .block{ class: ("block-first" if !@build.coverage && !(can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?))) }
       .title
         Job details
         - if can?(current_user, :update_build, @build) && @build.retryable?
-          = link_to "Retry job", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'pull-right retry-link', method: :post
+          = link_to "Retry job", retry_namespace_project_job_path(@project.namespace, @project, @build), class: 'pull-right retry-link', method: :post
       - if @build.merge_request
         %p.build-detail-row
           %span.build-light-text Merge Request:
@@ -68,15 +68,8 @@
         - elsif @build.runner
           \##{@build.runner.id}
       .btn-group.btn-group-justified{ role: :group }
-        - if @build.has_trace?
-          = link_to 'Raw', raw_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default'
         - if @build.active?
-          = link_to "Cancel", cancel_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default', method: :post
-        - if can?(current_user, :update_build, @project) && @build.erasable?
-          = link_to erase_namespace_project_build_path(@project.namespace, @project, @build),
-                    class: "btn btn-sm btn-default", method: :post,
-                    data: { confirm: "Are you sure you want to erase this build?" } do
-            Erase
+          = link_to "Cancel", cancel_namespace_project_job_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default', method: :post
 
     - if @build.trigger_request
       .build-widget
@@ -126,7 +119,7 @@
     - HasStatus::ORDERED_STATUSES.each do |build_status|
       - builds.select{|build| build.status == build_status}.each do |build|
         .build-job{ class: sidebar_build_class(build, @build), data: { stage: build.stage } }
-          = link_to namespace_project_build_path(@project.namespace, @project, build) do
+          = link_to namespace_project_job_path(@project.namespace, @project, build) do
             = icon('arrow-right')
             %span{ class: "ci-status-icon-#{build.status}" }
               = ci_icon_for_status(build.status)
@@ -136,7 +129,7 @@
               - else
                 = build.id
             - if build.retried?
-              %i.fa.fa-spinner.has-tooltip{ data: { container: 'body', placement: 'bottom' }, title: 'Job was retried' }
+              %i.fa.fa-refresh.has-tooltip{ data: { container: 'body', placement: 'bottom' }, title: 'Job was retried' }
 
 :javascript
   new Sidebar();
diff --git a/app/views/projects/builds/_table.html.haml b/app/views/projects/jobs/_table.html.haml
index 82806f022ee..82806f022ee 100644
--- a/app/views/projects/builds/_table.html.haml
+++ b/app/views/projects/jobs/_table.html.haml
diff --git a/app/views/projects/builds/_user.html.haml b/app/views/projects/jobs/_user.html.haml
index 83f299da651..83f299da651 100644
--- a/app/views/projects/builds/_user.html.haml
+++ b/app/views/projects/jobs/_user.html.haml
diff --git a/app/views/projects/builds/index.html.haml b/app/views/projects/jobs/index.html.haml
index 65162aacda1..a33e3978ee1 100644
--- a/app/views/projects/builds/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -4,17 +4,17 @@
 
 %div{ class: container_class }
   .top-area
-    - build_path_proc = ->(scope) { project_builds_path(@project, scope: scope) }
+    - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }
     = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
     .nav-controls
       - if can?(current_user, :update_build, @project)
         - if @all_builds.running_or_pending.any?
-          = link_to 'Cancel running', cancel_all_namespace_project_builds_path(@project.namespace, @project),
+          = link_to 'Cancel running', cancel_all_namespace_project_jobs_path(@project.namespace, @project),
             data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
 
         - unless @repository.gitlab_ci_yml
-          = link_to 'Get started with CI/CD Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
+          = link_to 'Get started with Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
 
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI lint
diff --git a/app/views/projects/builds/show.html.haml b/app/views/projects/jobs/show.html.haml
index 7cb2ec83cc7..0d10dfcef70 100644
--- a/app/views/projects/builds/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -8,7 +8,7 @@
 
     - if @build.stuck?
       - unless @build.any_runners_online?
-        .bs-callout.bs-callout-warning
+        .bs-callout.bs-callout-warning.js-build-stuck
           %p
             - if no_runners_for_project?(@build.project)
               This job is stuck, because the project doesn't have any runners online assigned to it.
@@ -26,7 +26,7 @@
               Runners page
 
     - if @build.starts_environment?
-      .prepend-top-default
+      .prepend-top-default.js-environment-container
         .environment-information
           - if @build.outdated_deployment?
             = ci_icon_for_status('success_with_warnings')
@@ -47,39 +47,51 @@
             - if environment.try(:last_deployment)
               and will overwrite the #{deployment_link(environment.last_deployment, text: 'latest deployment')}
 
-    .prepend-top-default
+    .prepend-top-default.js-build-erased
       - if @build.erased?
         .erased.alert.alert-warning
           - if @build.erased_by_user?
             Job has been erased by #{link_to(@build.erased_by_name, user_path(@build.erased_by))} #{time_ago_with_tooltip(@build.erased_at)}
           - else
             Job has been erased #{time_ago_with_tooltip(@build.erased_at)}
-      - else
-        #js-build-scroll.scroll-controls
-          .scroll-step
-            %a.scroll-link.scroll-top{ href: '#up-build-trace', id: 'scroll-top', title: 'Scroll to top' }
-              = custom_icon('scroll_up')
-              = custom_icon('scroll_up_hover_active')
-            %a.scroll-link.scroll-bottom{ href: '#down-build-trace', id: 'scroll-bottom', title: 'Scroll to bottom' }
-              = custom_icon('scroll_down')
-              = custom_icon('scroll_down_hover_active')
-          - if @build.active?
-            .autoscroll-container
-              %span.status-message#autoscroll-status{ data: { state: 'disabled' } }
-                %span.status-text Autoscroll active
-                %i.status-icon
-                  = custom_icon('scroll_down_hover_active')
-        #up-build-trace
-        %pre.build-trace#build-trace
+
+    .prepend-top-default
+      .build-trace-container#build-trace
+        .top-bar.sticky
           .js-truncated-info.truncated-info.hidden<
             Showing last
             %span.js-truncated-info-size.truncated-info-size><
             KiB of log -
-            %a.js-raw-link.raw-link{ :href => raw_namespace_project_build_path(@project.namespace, @project, @build) }>< Complete Raw
-          %code.bash.js-build-output
-          .build-loader-animation.js-build-refresh
+            %a.js-raw-link.raw-link{ href: raw_namespace_project_job_path(@project.namespace, @project, @build) }>< Complete Raw
+          .controllers
+            - if @build.has_trace?
+              = link_to raw_namespace_project_job_path(@project.namespace, @project, @build),
+                      title: 'Open raw trace',
+                      data: { placement: 'top', container: 'body' },
+                      class: 'js-raw-link-controller has-tooltip' do
+                = icon('download')
+
+            - if can?(current_user, :update_build, @project) && @build.erasable?
+              = link_to erase_namespace_project_job_path(@project.namespace, @project, @build),
+                        method: :post,
+                        data: { confirm: 'Are you sure you want to erase this build?', placement: 'top', container: 'body' },
+                        title: 'Erase Build',
+                        class: 'has-tooltip js-erase-link' do
+                = icon('trash')
 
-        #down-build-trace
+            %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank.has-tooltip{ type: 'button',
+                    disabled: true,
+                    title: 'Scroll Up',
+                    data: { placement: 'top', container: 'body'} }
+              = custom_icon('scroll_up')
+            %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank.has-tooltip{ type: 'button',
+                    disabled: true,
+                    title: 'Scroll Down',
+                    data: { placement: 'top', container: 'body'} }
+              = custom_icon('scroll_down')
+        .bash.sticky.js-scroll-container
+          %code.js-build-output
+          .build-loader-animation.js-build-refresh
 
   = render "sidebar"
 
diff --git a/app/views/projects/merge_requests/_discussion.html.haml b/app/views/projects/merge_requests/_discussion.html.haml
index 15b5a51c1d0..b787edb3427 100644
--- a/app/views/projects/merge_requests/_discussion.html.haml
+++ b/app/views/projects/merge_requests/_discussion.html.haml
@@ -8,4 +8,4 @@
     %button.btn.btn-nr.btn-default.append-right-10.js-comment-resolve-button{ "v-if" => "showButton", type: "submit", data: { project_path: "#{project_path(@merge_request.project)}" } }
       {{ buttonText }}
 
-#notes= render "projects/notes/notes_with_form"
+#notes= render "shared/notes/notes_with_form", :autocomplete => true
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 11b7aaec704..94b9577e9eb 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -37,7 +37,7 @@
       by #{link_to_member(@project, merge_request.author, avatar: false)}
       - if merge_request.target_project.default_branch != merge_request.target_branch
         &nbsp;
-        = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch) do
+        = link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do
           = icon('code-fork')
           = merge_request.target_branch
 
diff --git a/app/views/projects/merge_requests/_new_compare.html.haml b/app/views/projects/merge_requests/_new_compare.html.haml
index 9cf24e10842..0f37abb579c 100644
--- a/app/views/projects/merge_requests/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/_new_compare.html.haml
@@ -21,8 +21,8 @@
                   selected: f.object.source_project_id
           .merge-request-select.dropdown
             = f.hidden_field :source_branch
-            = dropdown_toggle f.object.source_branch || "Select source branch", { toggle: "dropdown", field_name: "#{f.object_name}[source_branch]" }, { toggle_class: "js-compare-dropdown js-source-branch" }
-            .dropdown-menu.dropdown-menu-selectable.dropdown-source-branch
+            = dropdown_toggle f.object.source_branch || "Select source branch", { toggle: "dropdown", field_name: "#{f.object_name}[source_branch]" }, { toggle_class: "js-compare-dropdown js-source-branch git-revision-dropdown-toggle" }
+            .dropdown-menu.dropdown-menu-selectable.dropdown-source-branch.git-revision-dropdown
               = dropdown_title("Select source branch")
               = dropdown_filter("Search branches")
               = dropdown_content do
@@ -51,8 +51,8 @@
                   selected: f.object.target_project_id
           .merge-request-select.dropdown
             = f.hidden_field :target_branch
-            = dropdown_toggle f.object.target_branch, { toggle: "dropdown", field_name: "#{f.object_name}[target_branch]" }, { toggle_class: "js-compare-dropdown js-target-branch" }
-            .dropdown-menu.dropdown-menu-selectable.dropdown-target-branch.js-target-branch-dropdown
+            = dropdown_toggle f.object.target_branch, { toggle: "dropdown", field_name: "#{f.object_name}[target_branch]" }, { toggle_class: "js-compare-dropdown js-target-branch git-revision-dropdown-toggle" }
+            .dropdown-menu.dropdown-menu-selectable.dropdown-target-branch.js-target-branch-dropdown.git-revision-dropdown
               = dropdown_title("Select target branch")
               = dropdown_filter("Search branches")
               = dropdown_content do
diff --git a/app/views/projects/merge_requests/_new_submit.html.haml b/app/views/projects/merge_requests/_new_submit.html.haml
index da79ca2ee75..e3ecbee5490 100644
--- a/app/views/projects/merge_requests/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/_new_submit.html.haml
@@ -3,9 +3,9 @@
 %p.slead
   - source_title, target_title = format_mr_branch_names(@merge_request)
   From
-  %strong.label-branch= source_title
+  %strong.ref-name= source_title
   %span into
-  %strong.label-branch= target_title
+  %strong.ref-name= target_title
 
   %span.pull-right
     = link_to 'Change branches', mr_change_branches_path(@merge_request)
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 881ee9fd596..75120409bb3 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -1,91 +1,69 @@
 - @content_class = "limit-container-width" unless fluid_layout
-- page_title           "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests"
-- page_description     @merge_request.description
+- page_title "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests"
+- page_description @merge_request.description
 - page_card_attributes @merge_request.card_attributes
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('diff_notes')
 
-.merge-request{ 'data-url' => merge_request_path(@merge_request), 'data-project-path' => project_path(@merge_request.project) }
+.merge-request{ 'data-url' => merge_request_path(@merge_request, format: :json), 'data-project-path' => project_path(@merge_request.project) }
   = render "projects/merge_requests/show/mr_title"
 
   .merge-request-details.issuable-details{ data: { id: @merge_request.project.id } }
     = render "projects/merge_requests/show/mr_box"
-    .append-bottom-default.mr-source-target.prepend-top-default
-      - if @merge_request.open?
-        .pull-right
-          - if @merge_request.source_branch_exists?
-            - if koding_enabled? && @repository.koding_yml
-              = link_to koding_project_url(@merge_request.source_project, @merge_request.source_branch, @merge_request.commits.first.short_id), class: "btn inline btn-grouped btn-sm", target: '_blank', rel: 'noopener noreferrer' do
-                Run in IDE (Koding)
-            = link_to "#modal_merge_info", class: "btn inline btn-grouped btn-sm", "data-toggle" => "modal" do
-              Check out branch
-
-          %span.dropdown.inline.prepend-left-5
-            %a.btn.btn-sm.dropdown-toggle{ data: {toggle: :dropdown} }
-              Download as
-              = icon('caret-down')
-            %ul.dropdown-menu.dropdown-menu-align-right
-              %li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch)
-              %li= link_to "Plain Diff",    merge_request_path(@merge_request, format: :diff)
-      .normal
-        %span <b>Request to merge</b>
-        %span.label-branch= source_branch_with_namespace(@merge_request)
-        %span <b>into</b>
-        %span.label-branch
-          = link_to_if @merge_request.target_branch_exists?, @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch)
-        - if @merge_request.open? && @merge_request.diverged_from_target_branch?
-          %span (#{pluralize(@merge_request.diverged_commits_count, 'commit')} behind)
 
     - if @merge_request.source_branch_exists?
       = render "projects/merge_requests/show/how_to_merge"
 
-    = render "projects/merge_requests/widget/show.html.haml"
+    :javascript
+      window.gl.mrWidgetData = #{serialize_issuable(@merge_request)}
+
+    #js-vue-mr-widget.mr-widget
 
-    - if @merge_request.source_branch_exists? && @merge_request.mergeable? && @merge_request.can_be_merged_by?(current_user)
-      .merge-manually.light.prepend-top-default
-        You can also accept this merge request manually using the
-        = succeed '.' do
-          = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
+    - content_for :page_specific_javascripts do
+      = webpack_bundle_tag 'common_vue'
+      = webpack_bundle_tag 'vue_merge_request_widget'
 
     .content-block.content-block-small.emoji-list-container
       = render 'award_emoji/awards_block', awardable: @merge_request, inline: true
 
     .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
-      .merge-request-tabs-container.scrolling-tabs-container.inner-page-scroll-tabs
-        .fade-left= icon('angle-left')
-        .fade-right= icon('angle-right')
-        %ul.merge-request-tabs.nav-links.scrolling-tabs
-          %li.notes-tab
-            = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
-              Discussion
-              %span.badge= @merge_request.related_notes.user.count
-          - if @merge_request.source_project
-            %li.commits-tab
-              = link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#commits', action: 'commits', toggle: 'tab' } do
-                Commits
-                %span.badge= @commits_count
-          - if @pipelines.any?
-            %li.pipelines-tab
-              = link_to pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
-                Pipelines
-                %span.badge= @pipelines.size
-          %li.diffs-tab
-            = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
-              Changes
-              %span.badge= @merge_request.diff_size
-          %li#resolve-count-app.line-resolve-all-container.pull-right.prepend-top-10.hidden-xs{ "v-cloak" => true }
-            %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}" }
-              %div
-                .line-resolve-all{ "v-show" => "discussionCount > 0",
-                  ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
-                  %span.line-resolve-btn.is-disabled{ type: "button",
-                      ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
-                    = render "shared/icons/icon_status_success.svg"
-                  %span.line-resolve-text
-                    {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
-                = render "discussions/new_issue_for_all_discussions", merge_request: @merge_request
-                = render "discussions/jump_to_next"
+      .merge-request-tabs-container
+        .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
+          .fade-left= icon('angle-left')
+          .fade-right= icon('angle-right')
+          .nav-links.scrolling-tabs
+            %ul.merge-request-tabs
+              %li.notes-tab
+                = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
+                  Discussion
+                  %span.badge= @merge_request.related_notes.user.count
+              - if @merge_request.source_project
+                %li.commits-tab
+                  = link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#commits', action: 'commits', toggle: 'tab' } do
+                    Commits
+                    %span.badge= @commits_count
+              - if @pipelines.any?
+                %li.pipelines-tab
+                  = link_to pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
+                    Pipelines
+                    %span.badge= @pipelines.size
+              %li.diffs-tab
+                = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
+                  Changes
+                  %span.badge= @merge_request.diff_size
+        #resolve-count-app.line-resolve-all-container.prepend-top-10{ "v-cloak" => true }
+          %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}" }
+            %div
+              .line-resolve-all{ "v-show" => "discussionCount > 0",
+                ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
+                %span.line-resolve-btn.is-disabled{ type: "button",
+                    ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
+                  = render "shared/icons/icon_status_success.svg"
+                %span.line-resolve-text
+                  {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
+              = render "discussions/new_issue_for_all_discussions", merge_request: @merge_request
+              = render "discussions/jump_to_next"
 
     .tab-content#diff-notes-app
       #notes.notes.tab-pane.voting_notes
@@ -113,9 +91,7 @@
 
 :javascript
   $(function () {
-    new MergeRequest({
+    window.mergeRequest = new MergeRequest({
       action: "#{controller.action_name}"
     });
   });
-
-  var mrRefreshWidgetUrl = "#{mr_widget_refresh_url(@merge_request)}";
diff --git a/app/views/projects/merge_requests/cancel_merge_when_pipeline_succeeds.js.haml b/app/views/projects/merge_requests/cancel_merge_when_pipeline_succeeds.js.haml
deleted file mode 100644
index eab5be488b5..00000000000
--- a/app/views/projects/merge_requests/cancel_merge_when_pipeline_succeeds.js.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-:plain
-  $('.mr-widget-body').html("#{escape_javascript(render('projects/merge_requests/widget/open/accept'))}");
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 6bf0035e051..2cb3045f83e 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -5,10 +5,13 @@
 - unless @project.default_issues_tracker?
   = content_for :sub_nav do
     = render "projects/merge_requests/head"
-= render 'projects/last_push'
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('filtered_search')
+  = webpack_bundle_tag 'common_vue'
+  = webpack_bundle_tag 'filtered_search'
+
+
+= render 'projects/last_push'
 
 - if @project.merge_requests.exists?
   %div{ class: container_class }
diff --git a/app/views/projects/merge_requests/merge.js.haml b/app/views/projects/merge_requests/merge.js.haml
deleted file mode 100644
index e632fc681cf..00000000000
--- a/app/views/projects/merge_requests/merge.js.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-- case @status
-- when :success
-  - remove_source_branch = params[:should_remove_source_branch] == '1' || @merge_request.remove_source_branch?
-  :plain
-    merge_request_widget.mergeInProgress(#{remove_source_branch});
-- when :merge_when_pipeline_succeeds
-  :plain
-    $('.mr-widget-body').html("#{escape_javascript(render('projects/merge_requests/widget/open/merge_when_pipeline_succeeds'))}");
-- when :sha_mismatch
-  :plain
-    $('.mr-widget-body').html("#{escape_javascript(render('projects/merge_requests/widget/open/sha_mismatch'))}");
-- else
-  :plain
-    $('.mr-widget-body').html("#{escape_javascript(render('projects/merge_requests/widget/open/reload'))}");
diff --git a/app/views/projects/merge_requests/show/_how_to_merge.html.haml b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
index f3372c7657f..766cb272bec 100644
--- a/app/views/projects/merge_requests/show/_how_to_merge.html.haml
+++ b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
@@ -49,7 +49,7 @@
           %strong Tip:
           = succeed '.' do
             You can also checkout merge requests locally by
-            = link_to 'following these guidelines', help_page_path('user/project/merge_requests.md', anchor: "checkout-merge-requests-locally"), target: '_blank', rel: 'noopener noreferrer'
+            = link_to 'following these guidelines', help_page_path('user/project/merge_requests/index.md', anchor: "checkout-merge-requests-locally"), target: '_blank', rel: 'noopener noreferrer'
 
 :javascript
   $(function(){
diff --git a/app/views/projects/merge_requests/show/_mr_title.html.haml b/app/views/projects/merge_requests/show/_mr_title.html.haml
index e7c5bca6a37..d9428b8562e 100644
--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -13,7 +13,7 @@
       = icon('angle-double-left')
 
     .issuable-meta
-      = issuable_meta(@merge_request, @project, "Merge Request")
+      = issuable_meta(@merge_request, @project, "Merge request")
 
   - if can?(current_user, :update_merge_request, @merge_request)
     .issuable-actions
diff --git a/app/views/projects/merge_requests/show/_versions.html.haml b/app/views/projects/merge_requests/show/_versions.html.haml
index 11b0c55be0b..0999b95c9c9 100644
--- a/app/views/projects/merge_requests/show/_versions.html.haml
+++ b/app/views/projects/merge_requests/show/_versions.html.haml
@@ -20,25 +20,27 @@
               - @merge_request_diffs.each do |merge_request_diff|
                 %li
                   = link_to merge_request_version_path(@project, @merge_request, merge_request_diff, @start_sha), class: ('is-active' if merge_request_diff == @merge_request_diff) do
-                    %strong
-                      - if merge_request_diff.latest?
-                        latest version
-                      - else
-                        version #{version_index(merge_request_diff)}
-                    .monospace= short_sha(merge_request_diff.head_commit_sha)
-                    %small
-                      #{number_with_delimiter(merge_request_diff.commits_count)} #{'commit'.pluralize(merge_request_diff.commits_count)},
-                      = time_ago_with_tooltip(merge_request_diff.created_at)
+                    %div
+                      %strong
+                        - if merge_request_diff.latest?
+                          latest version
+                        - else
+                          version #{version_index(merge_request_diff)}
+                    %div
+                      %small.commit-sha= short_sha(merge_request_diff.head_commit_sha)
+                    %div
+                      %small
+                        #{number_with_delimiter(merge_request_diff.commits_count)} #{'commit'.pluralize(merge_request_diff.commits_count)},
+                        = time_ago_with_tooltip(merge_request_diff.created_at)
 
       - if @merge_request_diff.base_commit_sha
         and
         %span.dropdown.inline.mr-version-compare-dropdown
           %a.btn.btn-default.dropdown-toggle{ data: {toggle: :dropdown} }
-            %span
-              - if @start_version
-                version #{version_index(@start_version)}
-              - else
-                #{@merge_request.target_branch}
+            - if @start_version
+              version #{version_index(@start_version)}
+            - else
+              %span.ref-name= @merge_request.target_branch
             = icon('caret-down')
           .dropdown-menu.dropdown-select.dropdown-menu-selectable
             .dropdown-title
@@ -50,19 +52,25 @@
                 - @comparable_diffs.each do |merge_request_diff|
                   %li
                     = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff, merge_request_diff.head_commit_sha), class: ('is-active' if merge_request_diff == @start_version) do
-                      %strong
-                        - if merge_request_diff.latest?
-                          latest version
-                        - else
-                          version #{version_index(merge_request_diff)}
-                      .monospace= short_sha(merge_request_diff.head_commit_sha)
-                      %small
-                        = time_ago_with_tooltip(merge_request_diff.created_at)
+                      %div
+                        %strong
+                          - if merge_request_diff.latest?
+                            latest version
+                          - else
+                            version #{version_index(merge_request_diff)}
+                      %div
+                        %small.commit-sha= short_sha(merge_request_diff.head_commit_sha)
+                      %div
+                        %small
+                          = time_ago_with_tooltip(merge_request_diff.created_at)
                 %li
                   = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff), class: ('is-active' unless @start_version) do
-                    %strong
-                      #{@merge_request.target_branch} (base)
-                    .monospace= short_sha(@merge_request_diff.base_commit_sha)
+                    %div
+                      %strong
+                        %span.ref-name= @merge_request.target_branch
+                        (base)
+                    %div
+                      %strong.commit-sha= short_sha(@merge_request_diff.base_commit_sha)
 
     - if different_base?(@start_version, @merge_request_diff)
       .content-block
@@ -83,7 +91,7 @@
           comparing two versions
         - else
           viewing an old version
-        of this merge request.
+        of the diff.
 
         .pull-right
           = link_to 'Show latest version', diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: 'btn btn-sm'
diff --git a/app/views/projects/merge_requests/widget/_closed.html.haml b/app/views/projects/merge_requests/widget/_closed.html.haml
deleted file mode 100644
index 15f47ecf210..00000000000
--- a/app/views/projects/merge_requests/widget/_closed.html.haml
+++ /dev/null
@@ -1,12 +0,0 @@
-.mr-state-widget
-  = render 'projects/merge_requests/widget/heading'
-  .mr-widget-body
-    %h4
-      Closed
-      - if @merge_request.closed_event
-        by #{link_to_member(@project, @merge_request.closed_event.author, avatar: true)}
-        #{time_ago_with_tooltip(@merge_request.closed_event.created_at)}
-    %p
-      = succeed '.' do
-        The changes were not merged into
-        %span.label-branch= @merge_request.target_branch
diff --git a/app/views/projects/merge_requests/widget/_commit_change_content.html.haml b/app/views/projects/merge_requests/widget/_commit_change_content.html.haml
new file mode 100644
index 00000000000..ad0ce7bf501
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/_commit_change_content.html.haml
@@ -0,0 +1,4 @@
+- if @merge_request.can_be_reverted?(current_user)
+  = render "projects/commit/change", type: 'revert', commit: @merge_request.merge_commit, title: @merge_request.title
+- if @merge_request.can_be_cherry_picked?
+  = render "projects/commit/change", type: 'cherry-pick', commit: @merge_request.merge_commit, title: @merge_request.title
diff --git a/app/views/projects/merge_requests/widget/_heading.html.haml b/app/views/projects/merge_requests/widget/_heading.html.haml
deleted file mode 100644
index 1298376ac25..00000000000
--- a/app/views/projects/merge_requests/widget/_heading.html.haml
+++ /dev/null
@@ -1,50 +0,0 @@
-- if @pipeline
-  .mr-widget-heading
-    - %w[success success_with_warnings skipped manual canceled failed running pending].each do |status|
-      .ci_widget{ class: "ci-#{status}", style: ("display:none" unless @pipeline.status == status) }
-        %div{ class: "ci-status-icon ci-status-icon-#{status}" }
-          = link_to namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'icon-link' do
-            = ci_icon_for_status(status)
-        %span
-          Pipeline
-          = link_to "##{@pipeline.id}", namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'pipeline'
-          = ci_label_for_status(status)
-        - if @pipeline.stages.any?
-          .mr-widget-pipeline-graph
-            = render 'shared/mini_pipeline_graph', pipeline: @pipeline, klass: 'js-pipeline-inline-mr-widget-graph'
-        %span
-          for
-          = succeed "." do
-            = link_to @pipeline.short_sha, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, @pipeline.sha), class: "monospace js-commit-link"
-        %span.ci-coverage
-
-- elsif @merge_request.has_ci?
-  -# Compatibility with old CI integrations (ex jenkins) when you request status from CI server via AJAX
-  -# TODO, remove in later versions when services like Jenkins will set CI status via Commit status API
-  .mr-widget-heading
-    - %w[success skipped canceled failed running pending].each do |status|
-      .ci_widget{ class: "ci-#{status} ci-status-icon-#{status}", style: "display:none" }
-        = ci_icon_for_status(status)
-        %span
-          CI job
-          = ci_label_for_status(status)
-          for
-        - commit = @merge_request.diff_head_commit
-        = succeed "." do
-          = link_to commit.short_id, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, commit), class: "monospace"
-        %span.ci-coverage
-
-    .ci_widget
-      = icon("spinner spin")
-      Checking CI status for #{@merge_request.diff_head_commit.short_id}&hellip;
-
-    .ci_widget.ci-not_found{ style: "display:none" }
-      = icon("times-circle")
-      Could not find CI status for #{@merge_request.diff_head_commit.short_id}.
-
-    .ci_widget.ci-error{ style: "display:none" }
-      = icon("times-circle")
-      Could not connect to the CI server. Please check your settings and try again.
-
-.js-success-icon.hidden
-  = ci_icon_for_status('success')
diff --git a/app/views/projects/merge_requests/widget/_locked.html.haml b/app/views/projects/merge_requests/widget/_locked.html.haml
deleted file mode 100644
index 78d0783cba0..00000000000
--- a/app/views/projects/merge_requests/widget/_locked.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-.mr-state-widget
-  = render 'projects/merge_requests/widget/heading'
-  .mr-widget-body
-    %h4
-      = icon("spinner spin")
-      Merge in progress&hellip;
-    %p
-      This merge request is in the process of being merged, during which time it is locked and cannot be closed.
-
diff --git a/app/views/projects/merge_requests/widget/_merged.html.haml b/app/views/projects/merge_requests/widget/_merged.html.haml
deleted file mode 100644
index adc3bbc37f3..00000000000
--- a/app/views/projects/merge_requests/widget/_merged.html.haml
+++ /dev/null
@@ -1,52 +0,0 @@
-.mr-state-widget
-  = render 'projects/merge_requests/widget/heading'
-  .mr-widget-body
-    %h4
-      Merged
-      - if @merge_request.merge_event
-        by #{link_to_member(@project, @merge_request.merge_event.author, avatar: true)}
-        #{time_ago_with_tooltip(@merge_request.merge_event.created_at)}
-    - if !@merge_request.source_branch_exists? || params[:deleted_source_branch]
-      .remove-message-pipes
-        %ul
-          %li
-            %span
-              The changes were merged into
-              #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
-          %li
-            %span
-              The source branch has been removed.
-      = render 'projects/merge_requests/widget/merged_buttons'
-    - elsif @merge_request.can_remove_source_branch?(current_user)
-      .remove_source_branch_widget.remove-message-pipes
-        %ul
-          %li
-            %span
-              The changes were merged into
-              #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
-          %li
-            %span
-              You can remove the source branch now.
-        = render 'projects/merge_requests/widget/merged_buttons', source_branch_exists: true
-      .remove_source_branch_widget.failed.remove-message-pipes.hide
-        %ul
-          %li
-            %span
-              Failed to remove source branch '#{@merge_request.source_branch}'.
-      .remove_source_branch_in_progress.remove-message-pipes.hide
-        %ul
-          %li
-            %span
-              = icon('spinner spin')
-              Removing source branch '#{@merge_request.source_branch}'.
-          %li
-            %span
-              Please wait, this page will be automatically reloaded.
-    - else
-      .remove-message-pipes
-        %ul
-          %li
-            %span
-              The changes were merged into
-              #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
-        = render 'projects/merge_requests/widget/merged_buttons'
diff --git a/app/views/projects/merge_requests/widget/_merged_buttons.haml b/app/views/projects/merge_requests/widget/_merged_buttons.haml
deleted file mode 100644
index a0f54bd28ec..00000000000
--- a/app/views/projects/merge_requests/widget/_merged_buttons.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-- can_remove_source_branch = local_assigns.fetch(:source_branch_exists, false) && @merge_request.can_remove_source_branch?(current_user)
-- mr_can_be_reverted = @merge_request.can_be_reverted?(current_user)
-- mr_can_be_cherry_picked = @merge_request.can_be_cherry_picked?
-
-- if can_remove_source_branch || mr_can_be_reverted || mr_can_be_cherry_picked
-  .clearfix.merged-buttons
-    - if can_remove_source_branch
-      = link_to namespace_project_branch_path(@merge_request.source_project.namespace, @merge_request.source_project, @merge_request.source_branch), remote: true, method: :delete, class: "btn btn-default remove_source_branch" do
-        = icon('trash-o')
-        Remove source branch
-    - if mr_can_be_reverted
-      = revert_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: "close")
-    - if mr_can_be_cherry_picked
-      = cherry_pick_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: "default")
diff --git a/app/views/projects/merge_requests/widget/_open.html.haml b/app/views/projects/merge_requests/widget/_open.html.haml
deleted file mode 100644
index 0872a1a0503..00000000000
--- a/app/views/projects/merge_requests/widget/_open.html.haml
+++ /dev/null
@@ -1,49 +0,0 @@
-.mr-state-widget
-  = render 'projects/merge_requests/widget/heading'
-  .mr-widget-body
-    -# After conflicts are resolved, the user is redirected back to the MR page.
-    -# There is a short window before background workers run and GitLab processes
-    -# the new push and commits, during which it will think the conflicts still exist.
-    -# We send this param to get the widget to treat the MR as having no more conflicts.
-    - resolved_conflicts = params[:resolved_conflicts]
-
-    - if @project.archived?
-      = render 'projects/merge_requests/widget/open/archived'
-    - elsif @merge_request.branch_missing?
-      = render 'projects/merge_requests/widget/open/missing_branch'
-    - elsif @merge_request.has_no_commits?
-      = render 'projects/merge_requests/widget/open/nothing'
-    - elsif @merge_request.unchecked?
-      = render 'projects/merge_requests/widget/open/check'
-    - elsif @merge_request.cannot_be_merged? && !resolved_conflicts
-      = render 'projects/merge_requests/widget/open/conflicts'
-    - elsif @merge_request.work_in_progress?
-      = render 'projects/merge_requests/widget/open/wip'
-    - elsif @merge_request.merge_when_pipeline_succeeds? && @merge_request.merge_error.present?
-      = render 'projects/merge_requests/widget/open/error'
-    - elsif @merge_request.merge_when_pipeline_succeeds?
-      = render 'projects/merge_requests/widget/open/merge_when_pipeline_succeeds'
-    - elsif !@merge_request.can_be_merged_by?(current_user)
-      = render 'projects/merge_requests/widget/open/not_allowed'
-    - elsif !@merge_request.mergeable_ci_state? && (@pipeline.failed? || @pipeline.canceled?)
-      = render 'projects/merge_requests/widget/open/build_failed'
-    - elsif !@merge_request.mergeable_discussions_state?
-      = render 'projects/merge_requests/widget/open/unresolved_discussions'
-    - elsif @pipeline&.blocked?
-      = render 'projects/merge_requests/widget/open/manual'
-    - elsif @merge_request.can_be_merged? || resolved_conflicts
-      = render 'projects/merge_requests/widget/open/accept'
-
-  - if mr_closes_issues.present? || mr_issues_mentioned_but_not_closing.present?
-    .mr-widget-footer
-      %span
-        = icon('check')
-        - if mr_closes_issues.present?
-          Accepting this merge request will close #{"issue".pluralize(mr_closes_issues.size)}
-          = succeed '.' do
-            != markdown issues_sentence(mr_closes_issues), pipeline: :gfm, author: @merge_request.author
-          = mr_assign_issues_link
-        - if mr_issues_mentioned_but_not_closing.present?
-          #{"Issue".pluralize(mr_issues_mentioned_but_not_closing.size)}
-          != markdown issues_sentence(mr_issues_mentioned_but_not_closing), pipeline: :gfm, author: @merge_request.author
-          #{mr_issues_mentioned_but_not_closing.size > 1 ? 'are' : 'is'} mentioned but will not be closed.
diff --git a/app/views/projects/merge_requests/widget/_show.html.haml b/app/views/projects/merge_requests/widget/_show.html.haml
deleted file mode 100644
index c716b69b35b..00000000000
--- a/app/views/projects/merge_requests/widget/_show.html.haml
+++ /dev/null
@@ -1,40 +0,0 @@
-- if @merge_request.open?
-  = render 'projects/merge_requests/widget/open'
-- elsif @merge_request.merged?
-  = render 'projects/merge_requests/widget/merged'
-- elsif @merge_request.closed?
-  = render 'projects/merge_requests/widget/closed'
-- elsif @merge_request.locked?
-  = render 'projects/merge_requests/widget/locked'
-
-:javascript
-  var opts = {
-    merge_check_url: "#{merge_check_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
-    check_enable: #{@merge_request.unchecked? ? "true" : "false"},
-    ci_status_url: "#{ci_status_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
-    pipeline_status_url: "#{pipeline_status_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
-    ci_environments_status_url: "#{ci_environments_status_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
-    gitlab_icon: "#{asset_path 'gitlab_logo.png'}",
-    ci_status: "#{@merge_request.head_pipeline ? @merge_request.head_pipeline.status : ''}",
-    ci_message: {
-      normal: "Pipeline {{status}} for \"{{title}}\"",
-      preparing: "{{status}} pipeline for \"{{title}}\""
-    },
-    ci_enable: #{@project.ci_service ? "true" : "false"},
-    ci_title: {
-      preparing: "{{status}} pipeline",
-      normal: "Pipeline {{status}}"
-    },
-    ci_sha: "#{@merge_request.head_pipeline ? @merge_request.head_pipeline.short_sha : ''}",
-    ci_pipeline: #{@merge_request.head_pipeline.try(:id).to_json},
-    commits_path: "#{project_commits_path(@project)}",
-    pipeline_path: "#{project_pipelines_path(@project)}",
-    pipelines_path: "#{pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}"
-  };
-
-  if (typeof merge_request_widget !== 'undefined') {
-    merge_request_widget.cancelPolling();
-    merge_request_widget.clearEventListeners();
-  }
-
-  merge_request_widget = new window.gl.MergeRequestWidget(opts);
diff --git a/app/views/projects/merge_requests/widget/open/_accept.html.haml b/app/views/projects/merge_requests/widget/open/_accept.html.haml
deleted file mode 100644
index 4cbd22150c7..00000000000
--- a/app/views/projects/merge_requests/widget/open/_accept.html.haml
+++ /dev/null
@@ -1,50 +0,0 @@
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('merge_request_widget')
-
-= form_for [:merge, @project.namespace.becomes(Namespace), @project, @merge_request], remote: true, method: :post, html: { class: 'accept-mr-form js-quick-submit js-requires-input' } do |f|
-  = hidden_field_tag :authenticity_token, form_authenticity_token
-  = hidden_field_tag :sha, @merge_request.diff_head_sha
-  .accept-merge-holder.clearfix.js-toggle-container
-    .clearfix
-      .accept-action
-        - if @pipeline && @pipeline.active?
-          %span.btn-group
-            = button_tag class: "btn btn-info js-merge-when-pipeline-succeeds-button merge-when-pipeline-succeeds" do
-              Merge when pipeline succeeds
-            - unless @project.only_allow_merge_if_pipeline_succeeds?
-              = button_tag class: "btn btn-info dropdown-toggle", 'data-toggle' => 'dropdown' do
-                = icon('caret-down')
-                %span.sr-only
-                  Select merge moment
-              %ul.js-merge-dropdown.dropdown-menu.dropdown-menu-right{ role: 'menu' }
-                %li
-                  = link_to "#", class: "merge-when-pipeline-succeeds" do
-                    = icon('check fw')
-                    Merge when pipeline succeeds
-                %li
-                  = link_to "#", class: "accept-merge-request" do
-                    = icon('warning fw')
-                    Merge immediately
-        - else
-          = f.button class: "btn btn-grouped js-merge-button accept-merge-request" do
-            Accept merge request
-      - if @merge_request.force_remove_source_branch?
-        .accept-control
-          The source branch will be removed.
-      - elsif @merge_request.can_remove_source_branch?(current_user)
-        .accept-control.checkbox
-          = label_tag :should_remove_source_branch, class: "merge-param-checkbox" do
-            = check_box_tag :should_remove_source_branch
-            Remove source branch
-      .accept-control
-        %button.modify-merge-commit-link.js-toggle-button{ type: "button" }
-          = icon('edit')
-          Modify commit message
-    .js-toggle-content.hide.prepend-top-default
-      = render 'shared/commit_message_container', params: params,
-          message_with_description: @merge_request.merge_commit_message(include_description: true),
-          message_without_description: @merge_request.merge_commit_message,
-          text: @merge_request.merge_commit_message,
-          rows: 14, hint: true
-
-    = hidden_field_tag :merge_when_pipeline_succeeds, "", autocomplete: "off"
diff --git a/app/views/projects/merge_requests/widget/open/_archived.html.haml b/app/views/projects/merge_requests/widget/open/_archived.html.haml
deleted file mode 100644
index 0d61e56d8fb..00000000000
--- a/app/views/projects/merge_requests/widget/open/_archived.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-%h4
-  Project is archived
-%p
-  This merge request cannot be merged because archived projects cannot be written to.
diff --git a/app/views/projects/merge_requests/widget/open/_build_failed.html.haml b/app/views/projects/merge_requests/widget/open/_build_failed.html.haml
deleted file mode 100644
index 3979d5fa8ed..00000000000
--- a/app/views/projects/merge_requests/widget/open/_build_failed.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-%h4
-  = icon('exclamation-triangle')
-  The pipeline for this merge request failed
-
-%p
-  Please retry the job or push a new commit to fix the failure.
diff --git a/app/views/projects/merge_requests/widget/open/_check.html.haml b/app/views/projects/merge_requests/widget/open/_check.html.haml
deleted file mode 100644
index 909dc52fc06..00000000000
--- a/app/views/projects/merge_requests/widget/open/_check.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('merge_request_widget')
-
-%strong
-  = icon("spinner spin")
-  Checking ability to merge automatically&hellip;
diff --git a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
deleted file mode 100644
index 621ee313026..00000000000
--- a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
+++ /dev/null
@@ -1,27 +0,0 @@
-- can_resolve = @merge_request.conflicts_can_be_resolved_by?(current_user)
-- can_resolve_in_ui = @merge_request.conflicts_can_be_resolved_in_ui?
-- can_merge = @merge_request.can_be_merged_via_command_line_by?(current_user)
-
-%h4.has-conflicts
-  %p
-    = icon("exclamation-triangle")
-    This merge request contains merge conflicts
-
-.remove-message-pipes
-  %ul
-    %li
-      %span
-        To merge this request, resolve these conflicts
-        - if can_resolve && !can_resolve_in_ui
-          locally
-        or
-        - unless can_merge
-          ask someone with write access to this repository to
-        merge it locally.
-
-- if (can_resolve && can_resolve_in_ui) || can_merge
-  .merged-buttons.clearfix
-    - if can_resolve && can_resolve_in_ui
-      = link_to "Resolve conflicts", conflicts_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: "btn"
-    - if can_merge
-      = link_to "Merge locally", "#modal_merge_info", class: "btn how_to_merge_link vlink", "data-toggle" => "modal"
diff --git a/app/views/projects/merge_requests/widget/open/_manual.html.haml b/app/views/projects/merge_requests/widget/open/_manual.html.haml
deleted file mode 100644
index 9078b7e21dd..00000000000
--- a/app/views/projects/merge_requests/widget/open/_manual.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-%h4
-  Pipeline blocked
-%p
-  The pipeline for this merge request requires a manual action to proceed.
diff --git a/app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml b/app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml
deleted file mode 100644
index 76cc1ecd8a5..00000000000
--- a/app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml
+++ /dev/null
@@ -1,33 +0,0 @@
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('merge_request_widget')
-
-%h4
-  Set by #{link_to_member(@project, @merge_request.merge_user, avatar: true)}
-  to be merged automatically when the pipeline succeeds.
-.remove-message-pipes
-  %ul
-    %li
-      %span
-        = succeed '.' do
-          The changes will be merged into #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}
-        - if @merge_request.remove_source_branch?
-          %li
-            %span
-              The source branch will be removed.
-        - else
-          %li
-            %span
-              The source branch will not be removed.
-
-  - remove_source_branch_button = !@merge_request.remove_source_branch? && @merge_request.can_remove_source_branch?(current_user) && @merge_request.merge_user == current_user
-  - user_can_cancel_automatic_merge = @merge_request.can_cancel_merge_when_pipeline_succeeds?(current_user)
-  - if remove_source_branch_button || user_can_cancel_automatic_merge
-    .clearfix.prepend-top-10
-      - if remove_source_branch_button
-        = link_to merge_namespace_project_merge_request_path(@merge_request.target_project.namespace, @merge_request.target_project, @merge_request, merge_params(@merge_request)), remote: true, method: :post, class: "btn btn-grouped btn-primary btn-sm remove_source_branch" do
-          = icon('times')
-          Remove source branch when merged
-
-      - if user_can_cancel_automatic_merge
-        = link_to cancel_merge_when_pipeline_succeeds_namespace_project_merge_request_path(@merge_request.target_project.namespace, @merge_request.target_project, @merge_request), remote: true, method: :post, class: "btn btn-grouped btn-sm" do
-          Cancel automatic merge
diff --git a/app/views/projects/merge_requests/widget/open/_missing_branch.html.haml b/app/views/projects/merge_requests/widget/open/_missing_branch.html.haml
deleted file mode 100644
index c9f07629493..00000000000
--- a/app/views/projects/merge_requests/widget/open/_missing_branch.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-- unless @merge_request.source_branch_exists?
-  %h4
-    = icon("exclamation-triangle")
-    Source branch
-    %span.label-branch= source_branch_with_namespace(@merge_request)
-    does not exist
-  %p
-    Please restore the source branch or close this merge request and open a new merge request with a different source branch.
-- else
-  %h4
-    = icon("exclamation-triangle")
-    Target branch
-    %span.label-branch= @merge_request.target_branch
-    does not exist
-  %p
-    Please restore the target branch or use a different target branch.
diff --git a/app/views/projects/merge_requests/widget/open/_not_allowed.html.haml b/app/views/projects/merge_requests/widget/open/_not_allowed.html.haml
deleted file mode 100644
index 57ce1959021..00000000000
--- a/app/views/projects/merge_requests/widget/open/_not_allowed.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-%h4
-  Ready to be merged automatically
-%p
-  Ask someone with write access to this repository to merge this request.
-  - if @merge_request.force_remove_source_branch?
-    The source branch will be removed.
diff --git a/app/views/projects/merge_requests/widget/open/_nothing.html.haml b/app/views/projects/merge_requests/widget/open/_nothing.html.haml
deleted file mode 100644
index 7af8c01c134..00000000000
--- a/app/views/projects/merge_requests/widget/open/_nothing.html.haml
+++ /dev/null
@@ -1,8 +0,0 @@
-%h4
-  = icon("exclamation-triangle")
-  Nothing to merge from
-  %span.label-branch= source_branch_with_namespace(@merge_request)
-  into
-  %span.label-branch= @merge_request.target_branch
-%p
-  Please push new commits to the source branch or use a different target branch.
diff --git a/app/views/projects/merge_requests/widget/open/_reload.html.haml b/app/views/projects/merge_requests/widget/open/_reload.html.haml
deleted file mode 100644
index acfc31725eb..00000000000
--- a/app/views/projects/merge_requests/widget/open/_reload.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-%h4
-  = icon("exclamation-triangle")
-  This merge request failed to be merged automatically
-
-%p
-  Please reload the page to find out the reason.
diff --git a/app/views/projects/merge_requests/widget/open/_sha_mismatch.html.haml b/app/views/projects/merge_requests/widget/open/_sha_mismatch.html.haml
deleted file mode 100644
index 499624f8dd8..00000000000
--- a/app/views/projects/merge_requests/widget/open/_sha_mismatch.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-%h4
-  = icon("exclamation-triangle")
-  This merge request has received new commits since the page was loaded.
-
-%p
-  Please reload the page to review the new commits before merging.
diff --git a/app/views/projects/merge_requests/widget/open/_unresolved_discussions.html.haml b/app/views/projects/merge_requests/widget/open/_unresolved_discussions.html.haml
deleted file mode 100644
index ec9346ce89b..00000000000
--- a/app/views/projects/merge_requests/widget/open/_unresolved_discussions.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-%h4
-  = icon('exclamation-triangle')
-  This merge request has unresolved discussions
-
-%p
-  Please resolve these discussions
-  - if @project.issues_enabled? && can?(current_user, :create_issue, @project)
-    or
-    = link_to "open an issue to resolve them later", new_namespace_project_issue_path(@project.namespace, @project, merge_request_to_resolve_discussions_of: @merge_request.iid)
-  to allow this merge request to be merged.
diff --git a/app/views/projects/merge_requests/widget/open/_wip.html.haml b/app/views/projects/merge_requests/widget/open/_wip.html.haml
deleted file mode 100644
index c296422a9cf..00000000000
--- a/app/views/projects/merge_requests/widget/open/_wip.html.haml
+++ /dev/null
@@ -1,11 +0,0 @@
-%h4
-  This merge request is currently a Work In Progress
-
-- if can?(current_user, :update_merge_request, @merge_request)
-  %p
-    When this merge request is ready,
-    = link_to remove_wip_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), method: :post do
-      remove the
-      %code WIP:
-      prefix from the title
-    to allow it to be merged.
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index 0f4a8508751..9a95b2a82ff 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -9,9 +9,9 @@
       .form-group.milestone-description
         = f.label :description, "Description", class: "control-label"
         .col-sm-10
-          = render layout: 'projects/md_preview', locals: { preview_class: "md-preview" } do
+          = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project) } do
             = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...'
-            = render 'projects/notes/hints'
+            = render 'shared/notes/hints'
           .clearfix
           .error-alert
     = render "shared/milestones/form_dates", f: f
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 9e292729425..e180cb8bad1 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -30,7 +30,7 @@
                     #{root_url}#{current_user.username}/
                   = f.hidden_field :namespace_id, value: current_user.namespace_id
           .form-group.col-xs-12.col-sm-6.project-path
-            = f.label :namespace_id, class: 'label-light' do
+            = f.label :path, class: 'label-light' do
               %span
                 Project name
             = f.text_field :path, placeholder: "my-awesome-project", class: "form-control", tabindex: 2, autofocus: true, required: true
diff --git a/app/views/projects/notes/_actions.html.haml b/app/views/projects/notes/_actions.html.haml
index d70ec8a6062..3e79dbec70c 100644
--- a/app/views/projects/notes/_actions.html.haml
+++ b/app/views/projects/notes/_actions.html.haml
@@ -31,7 +31,7 @@
 - if current_user
   - if note.emoji_awardable?
     - user_authored = note.user_authored?(current_user)
-    = link_to '#', title: 'Award Emoji', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored} has-tooltip", data: { position: 'right' } do
+    = link_to '#', title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored} has-tooltip", data: { position: 'right' } do
       = icon('spinner spin')
       %span{ class: 'link-highlight award-control-icon-neutral' }= custom_icon('emoji_slightly_smiling_face')
       %span{ class: 'link-highlight award-control-icon-positive' }= custom_icon('emoji_smiley')
diff --git a/app/views/projects/notes/_edit.html.haml b/app/views/projects/notes/_edit.html.haml
deleted file mode 100644
index f1e251d65b7..00000000000
--- a/app/views/projects/notes/_edit.html.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-.original-note-content.hidden{ data: { post_url: namespace_project_note_path(@project.namespace, @project, note), target_id: note.noteable.id, target_type: note.noteable.class.name.underscore } }
-  #{note.note}
-%textarea.hidden.js-task-list-field.original-task-list{ data: {update_url: namespace_project_note_path(@project.namespace, @project, note) } }= note.note
diff --git a/app/views/projects/notes/_hints.html.haml b/app/views/projects/notes/_hints.html.haml
deleted file mode 100644
index 81d97eabe65..00000000000
--- a/app/views/projects/notes/_hints.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-- supports_slash_commands = local_assigns.fetch(:supports_slash_commands, false)
-.comment-toolbar.clearfix
-  .toolbar-text
-    = link_to 'Markdown', help_page_path('user/markdown'), target: '_blank', tabindex: -1
-    - if supports_slash_commands
-      and
-      = link_to 'slash commands', help_page_path('user/project/slash_commands'), target: '_blank', tabindex: -1
-      are
-    - else
-      is
-    supported
-  %button.toolbar-button.markdown-selector{ type: 'button', tabindex: '-1' }
-    = icon('file-image-o', class: 'toolbar-button-icon')
-    Attach a file
diff --git a/app/views/projects/notes/_notes_with_form.html.haml b/app/views/projects/notes/_notes_with_form.html.haml
deleted file mode 100644
index 555228623cc..00000000000
--- a/app/views/projects/notes/_notes_with_form.html.haml
+++ /dev/null
@@ -1,26 +0,0 @@
-%ul#notes-list.notes.main-notes-list.timeline
-  = render "shared/notes/notes"
-
-= render 'projects/notes/edit_form'
-
-%ul.notes.notes-form.timeline
-  %li.timeline-entry
-    .flash-container.timeline-content
-
-    - if can? current_user, :create_note, @project
-      .timeline-icon.hidden-xs.hidden-sm
-        %a.author_link{ href: user_path(current_user) }
-          = image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
-      .timeline-content.timeline-content-form
-        = render "projects/notes/form", view: diff_view
-    - elsif !current_user
-      .disabled-comment.text-center
-        .disabled-comment-text.inline
-          Please
-          = link_to "register", new_session_path(:user, redirect_to_referer: 'yes')
-          or
-          = link_to "sign in", new_session_path(:user, redirect_to_referer: 'yes')
-          to post a comment
-
-:javascript
-  var notes = new Notes("#{namespace_project_noteable_notes_path(namespace_id: @project.namespace, project_id: @project, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{diff_view}")
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
new file mode 100644
index 00000000000..bbed10039af
--- /dev/null
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -0,0 +1,33 @@
+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag 'common_vue'
+  = webpack_bundle_tag 'schedule_form'
+
+= form_for [@project.namespace.becomes(Namespace), @project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: "form-horizontal js-pipeline-schedule-form" } do |f|
+  = form_errors(@schedule)
+  .form-group
+    .col-md-9
+      = f.label :description, 'Description', class: 'label-light'
+      = f.text_field :description, class: 'form-control', required: true, autofocus: true, placeholder: 'Provide a short description for this pipeline'
+  .form-group
+    .col-md-9
+      = f.label :cron, 'Interval Pattern', class: 'label-light'
+      #interval-pattern-input{ data: { initial_interval: @schedule.cron } }
+  .form-group
+    .col-md-9
+      = f.label :cron_timezone, 'Cron Timezone', class: 'label-light'
+      = dropdown_tag("Select a timezone", options: { toggle_class: 'btn js-timezone-dropdown', title: "Select a timezone", filter: true, placeholder: "Filter", data: { data: timezone_data } } )
+      = f.text_field :cron_timezone, value: @schedule.cron_timezone, id: 'schedule_cron_timezone', class: 'hidden', name: 'schedule[cron_timezone]', required: true
+  .form-group
+    .col-md-9
+      = f.label :ref, 'Target Branch', class: 'label-light'
+      = dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown git-revision-dropdown-toggle', dropdown_class: 'git-revision-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names, default_branch: @project.default_branch } } )
+      = f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true
+  .form-group
+    .col-md-9
+      = f.label  :active, 'Activated', class: 'label-light'
+      %div
+        = f.check_box :active, required: false, value: @schedule.active?
+        Active
+  .footer-block.row-content-block
+    = f.submit 'Save pipeline schedule', class: 'btn btn-create', tabindex: 3
+    = link_to 'Cancel', pipeline_schedules_path(@project), class: 'btn btn-cancel'
diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
new file mode 100644
index 00000000000..7bde839e26f
--- /dev/null
+++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
@@ -0,0 +1,37 @@
+- if pipeline_schedule
+  %tr.pipeline-schedule-table-row
+    %td
+      = pipeline_schedule.description
+    %td.branch-name-cell
+      = icon('code-fork')
+      - if pipeline_schedule.ref
+        = link_to pipeline_schedule.ref, project_ref_path(@project, pipeline_schedule.ref), class: "ref-name"
+    %td
+      - if pipeline_schedule.last_pipeline
+        .status-icon-container{ class: "ci-status-icon-#{pipeline_schedule.last_pipeline.status}" }
+          = link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline_schedule.last_pipeline.id) do
+            = ci_icon_for_status(pipeline_schedule.last_pipeline.status)
+            %span ##{pipeline_schedule.last_pipeline.id}
+      - else
+        None
+    %td.next-run-cell
+      - if pipeline_schedule.active?
+        = time_ago_with_tooltip(pipeline_schedule.real_next_run)
+      - else
+        Inactive
+    %td
+      - if pipeline_schedule.owner
+        = image_tag avatar_icon(pipeline_schedule.owner, 20), class: "avatar s20"
+        = link_to user_path(pipeline_schedule.owner) do
+          = pipeline_schedule.owner&.name
+    %td
+      .pull-right.btn-group
+        - if can?(current_user, :update_pipeline_schedule, @project) && !pipeline_schedule.owned_by?(current_user)
+          = link_to take_ownership_pipeline_schedule_path(pipeline_schedule), method: :post, title: 'Take Ownership', class: 'btn' do
+            Take ownership
+        - if can?(current_user, :update_pipeline_schedule, pipeline_schedule)
+          = link_to edit_pipeline_schedule_path(pipeline_schedule), title: 'Edit', class: 'btn' do
+            = icon('pencil')
+        - if can?(current_user, :admin_pipeline_schedule, pipeline_schedule)
+          = link_to pipeline_schedule_path(pipeline_schedule), title: 'Delete', method: :delete, class: 'btn btn-remove', data: { confirm: "Are you sure you want to cancel this pipeline?" } do
+            = icon('trash')
diff --git a/app/views/projects/pipeline_schedules/_table.html.haml b/app/views/projects/pipeline_schedules/_table.html.haml
new file mode 100644
index 00000000000..25c7604eb24
--- /dev/null
+++ b/app/views/projects/pipeline_schedules/_table.html.haml
@@ -0,0 +1,12 @@
+.table-holder
+  %table.table.ci-table
+    %thead
+      %tr
+        %th Description
+        %th Target
+        %th Last Pipeline
+        %th Next Run
+        %th Owner
+        %th
+
+    = render partial: "pipeline_schedule", collection: @schedules
diff --git a/app/views/projects/pipeline_schedules/_tabs.html.haml b/app/views/projects/pipeline_schedules/_tabs.html.haml
new file mode 100644
index 00000000000..2a1fb16876a
--- /dev/null
+++ b/app/views/projects/pipeline_schedules/_tabs.html.haml
@@ -0,0 +1,18 @@
+%ul.nav-links
+  %li{ class: active_when(scope.nil?) }>
+    = link_to schedule_path_proc.call(nil) do
+      All
+      %span.badge.js-totalbuilds-count
+        = number_with_delimiter(all_schedules.count(:id))
+
+  %li{ class: active_when(scope == 'active') }>
+    = link_to schedule_path_proc.call('active') do
+      Active
+      %span.badge
+        = number_with_delimiter(all_schedules.active.count(:id))
+
+  %li{ class: active_when(scope == 'inactive') }>
+    = link_to schedule_path_proc.call('inactive') do
+      Inactive
+      %span.badge
+        = number_with_delimiter(all_schedules.inactive.count(:id))
diff --git a/app/views/projects/pipeline_schedules/edit.html.haml b/app/views/projects/pipeline_schedules/edit.html.haml
new file mode 100644
index 00000000000..e16fe0b7a98
--- /dev/null
+++ b/app/views/projects/pipeline_schedules/edit.html.haml
@@ -0,0 +1,7 @@
+- page_title "Edit", @schedule.description, "Pipeline Schedule"
+
+%h3.page-title
+  Edit Pipeline Schedule #{@schedule.id}
+%hr
+
+= render "form"
diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml
new file mode 100644
index 00000000000..6751efaaf2f
--- /dev/null
+++ b/app/views/projects/pipeline_schedules/index.html.haml
@@ -0,0 +1,24 @@
+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag 'common_vue'
+  = webpack_bundle_tag 'schedules_index'
+
+- @no_container = true
+- page_title "Pipeline Schedules"
+= render "projects/pipelines/head"
+
+%div{ class: container_class }
+  #pipeline-schedules-callout{ data: { docs_url: help_page_path('user/project/pipelines/schedules') } }
+  .top-area
+    - schedule_path_proc = ->(scope) { pipeline_schedules_path(@project, scope: scope) }
+    = render "tabs", schedule_path_proc: schedule_path_proc, all_schedules: @all_schedules, scope: @scope
+
+    .nav-controls
+      = link_to new_namespace_project_pipeline_schedule_path(@project.namespace, @project), class: 'btn btn-create' do
+        %span New schedule
+
+  - if @schedules.present?
+    %ul.content-list
+      = render partial: "table"
+  - else
+    .light-well
+      .nothing-here-block No schedules
diff --git a/app/views/projects/pipeline_schedules/new.html.haml b/app/views/projects/pipeline_schedules/new.html.haml
new file mode 100644
index 00000000000..b89e170ad3c
--- /dev/null
+++ b/app/views/projects/pipeline_schedules/new.html.haml
@@ -0,0 +1,7 @@
+- page_title "New Pipeline Schedule"
+
+%h3.page-title
+  Schedule a new pipeline
+%hr
+
+= render "form"
diff --git a/app/views/projects/pipelines/_graph.html.haml b/app/views/projects/pipelines/_graph.html.haml
deleted file mode 100644
index 0202833c0bf..00000000000
--- a/app/views/projects/pipelines/_graph.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-- pipeline = local_assigns.fetch(:pipeline)
-.pipeline-visualization.pipeline-graph
-  %ul.stage-column-list
-    = render partial: "projects/stage/graph", collection: pipeline.stages, as: :stage
diff --git a/app/views/projects/pipelines/_head.html.haml b/app/views/projects/pipelines/_head.html.haml
index b0dac9de1c6..a33da149c62 100644
--- a/app/views/projects/pipelines/_head.html.haml
+++ b/app/views/projects/pipelines/_head.html.haml
@@ -11,10 +11,16 @@
 
         - if project_nav_tab? :builds
           = nav_link(controller: [:builds, :artifacts]) do
-            = link_to project_builds_path(@project), title: 'Jobs', class: 'shortcuts-builds' do
+            = link_to project_jobs_path(@project), title: 'Jobs', class: 'shortcuts-builds' do
               %span
                 Jobs
 
+        - if project_nav_tab? :pipelines
+          = nav_link(controller: :pipeline_schedules) do
+            = link_to pipeline_schedules_path(@project), title: 'Schedules', class: 'shortcuts-builds' do
+              %span
+                Schedules
+
         - if project_nav_tab? :environments
           = nav_link(controller: :environments) do
             = link_to project_environments_path(@project), title: 'Environments', class: 'shortcuts-environments' do
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index ab6baaf35b6..8607da8fcdd 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -30,7 +30,7 @@
       = pluralize @pipeline.statuses.count(:id), "job"
       - if @pipeline.ref
         from
-        = link_to @pipeline.ref, namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), class: "monospace"
+        = link_to @pipeline.ref, project_ref_path(@project, @pipeline.ref), class: "ref-name"
       - if @pipeline.duration
         in
         = time_interval_in_words(@pipeline.duration)
@@ -40,10 +40,10 @@
   .well-segment.branch-info
     .icon-container.commit-icon
       = custom_icon("icon_commit")
-    = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace js-details-short"
+    = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "commit-sha js-details-short"
     = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
       %span.text-expander
         \...
     %span.js-details-content.hide
-      = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace commit-hash-full"
+      = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "commit-sha commit-hash-full"
     = clipboard_button(text: @pipeline.sha, title: "Copy commit SHA to clipboard")
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
index d7cefb8613e..01cf2cc80e5 100644
--- a/app/views/projects/pipelines/_with_tabs.html.haml
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -1,3 +1,5 @@
+- failed_builds = @pipeline.statuses.latest.failed
+
 .tabs-holder
   %ul.pipelines-tabs.nav-links.no-top.no-bottom
     %li.js-pipeline-tab-link
@@ -7,13 +9,15 @@
       = link_to builds_namespace_project_pipeline_path(@project.namespace, @project, @pipeline), data: {target: 'div#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
         Jobs
         %span.badge.js-builds-counter= pipeline.statuses.count
-
-
+    - if failed_builds.present?
+      %li.js-failures-tab-link
+        = link_to failures_namespace_project_pipeline_path(@project.namespace, @project, @pipeline), data: {target: 'div#js-tab-failures', action: 'failures', toggle: 'tab' }, class: 'failures-tab' do
+          Failed Jobs
+          %span.badge.js-failures-counter= failed_builds.count
 
 .tab-content
   #js-tab-pipeline.tab-pane
-    .build-content.middle-block.js-pipeline-graph
-      = render "projects/pipelines/graph", pipeline: pipeline
+    #js-pipeline-graph-vue
 
   #js-tab-builds.tab-pane
     - if pipeline.yaml_errors.present?
@@ -39,3 +43,13 @@
             %th Coverage
             %th
         = render partial: "projects/stage/stage", collection: pipeline.stages, as: :stage
+  - if failed_builds.present?
+    #js-tab-failures.build-failures.tab-pane
+      - failed_builds.each_with_index do |build, index|
+        .build-state
+          %span.ci-status-icon-failed= custom_icon('icon_status_failed')
+          %span.stage
+            = build.stage.titleize
+          %span.build-name
+            = link_to build.name, pipeline_job_url(pipeline, build)
+        %pre.build-log= build_summary(build, skip: index >= 10)
diff --git a/app/views/projects/pipelines/charts/_overall.haml b/app/views/projects/pipelines/charts/_overall.haml
index edc4f7b079f..0b7e3d22dd7 100644
--- a/app/views/projects/pipelines/charts/_overall.haml
+++ b/app/views/projects/pipelines/charts/_overall.haml
@@ -2,13 +2,13 @@
 %ul
   %li
     Total:
-    %strong= pluralize @project.builds.count(:all), 'build'
+    %strong= pluralize @project.builds.count(:all), 'job'
   %li
     Successful:
-    %strong= pluralize @project.builds.success.count(:all), 'build'
+    %strong= pluralize @project.builds.success.count(:all), 'job'
   %li
     Failed:
-    %strong= pluralize @project.builds.failed.count(:all), 'build'
+    %strong= pluralize @project.builds.failed.count(:all), 'job'
   %li
     Success ratio:
     %strong
diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml
index 14a270a3039..71a8e490c3e 100644
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -11,8 +11,8 @@
     .col-sm-10
       = hidden_field_tag 'pipeline[ref]', params[:ref] || @project.default_branch
       = dropdown_tag(params[:ref] || @project.default_branch,
-                     options: { toggle_class: 'js-branch-select wide',
-                                filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches",
+                     options: { toggle_class: 'js-branch-select wide git-revision-dropdown-toggle',
+                                filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: "Search branches",
                                 data: { selected: params[:ref] || @project.default_branch, field_name: 'pipeline[ref]' } })
       .help-block Existing branch name, tag
   .form-actions
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 49c1d886423..b39453a50fb 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -7,3 +7,9 @@
     = render "projects/pipelines/info"
 
   = render "projects/pipelines/with_tabs", pipeline: @pipeline
+
+.js-pipeline-details-vue{ data: { endpoint: namespace_project_pipeline_path(@project.namespace, @project, @pipeline, format: :json) } }
+
+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('pipelines_details')
diff --git a/app/views/projects/pipelines_settings/_show.html.haml b/app/views/projects/pipelines_settings/_show.html.haml
index a3f84476dea..3b17daeb6da 100644
--- a/app/views/projects/pipelines_settings/_show.html.haml
+++ b/app/views/projects/pipelines_settings/_show.html.haml
@@ -1,14 +1,14 @@
 .row.prepend-top-default
   .col-lg-3.profile-settings-sidebar
     %h4.prepend-top-0
-      CI/CD Pipelines
+      Pipelines
   .col-lg-9
     = form_for @project, url: namespace_project_pipelines_settings_path(@project.namespace.becomes(Namespace), @project) do |f|
       %fieldset.builds-feature
         - unless @repository.gitlab_ci_yml
           .form-group
             %p Pipelines need to be configured before you can begin using Continuous Integration.
-            = link_to 'Get started with CI/CD Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
+            = link_to 'Get started with Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
             %hr
         .form-group.append-bottom-default
           = f.label :runners_token, "Runner token", class: 'label-light'
@@ -42,7 +42,7 @@
           = f.label :build_timeout_in_minutes, 'Timeout', class: 'label-light'
           = f.number_field :build_timeout_in_minutes, class: 'form-control', min: '0'
           %p.help-block
-            Per job in minutes. If a job passes this threshold, it will be marked as failed.
+            Per job in minutes. If a job passes this threshold, it will be marked as failed
             = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'timeout'), target: '_blank'
 
         %hr
diff --git a/app/views/projects/project_members/_index.html.haml b/app/views/projects/project_members/_index.html.haml
index f83521052ed..d080b6c83d4 100644
--- a/app/views/projects/project_members/_index.html.haml
+++ b/app/views/projects/project_members/_index.html.haml
@@ -18,7 +18,7 @@
         = render "projects/project_members/new_project_member"
 
         = render 'shared/members/requests', membership_source: @project, requesters: @requesters
-        .append-bottom-default.clearfix
+        .clearfix
           %h5.member.existing-title
             Existing members and groups
         - if @group_links.any?
diff --git a/app/views/projects/protected_branches/_create_protected_branch.html.haml b/app/views/projects/protected_branches/_create_protected_branch.html.haml
index b8e885b4d9a..99bc2516366 100644
--- a/app/views/projects/protected_branches/_create_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_create_protected_branch.html.haml
@@ -25,7 +25,7 @@
             .merge_access_levels-container
               = dropdown_tag('Select',
                              options: { toggle_class: 'js-allowed-to-merge wide',
-                             dropdown_class: 'dropdown-menu-selectable',
+                             dropdown_class: 'dropdown-menu-selectable capitalize-header',
                              data: { field_name: 'protected_branch[merge_access_levels_attributes][0][access_level]', input_id: 'merge_access_levels_attributes' }})
         .form-group
           %label.col-md-2.text-right{ for: 'push_access_levels_attributes' }
@@ -34,7 +34,7 @@
             .push_access_levels-container
               = dropdown_tag('Select',
                              options: { toggle_class: 'js-allowed-to-push wide',
-                             dropdown_class: 'dropdown-menu-selectable',
+                             dropdown_class: 'dropdown-menu-selectable capitalize-header',
                              data: { field_name: 'protected_branch[push_access_levels_attributes][0][access_level]', input_id: 'push_access_levels_attributes' }})
 
     .panel-footer
diff --git a/app/views/projects/protected_branches/_dropdown.html.haml b/app/views/projects/protected_branches/_dropdown.html.haml
index 5af0cc7a2f3..6e9c473494e 100644
--- a/app/views/projects/protected_branches/_dropdown.html.haml
+++ b/app/views/projects/protected_branches/_dropdown.html.haml
@@ -1,8 +1,8 @@
 = f.hidden_field(:name)
 
 = dropdown_tag('Select branch or create wildcard',
-               options: { toggle_class: 'js-protected-branch-select js-filter-submit wide',
-                          filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search protected branches",
+               options: { toggle_class: 'js-protected-branch-select js-filter-submit wide git-revision-dropdown-toggle',
+                          filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: "Search protected branches",
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
                                   selected: params[:protected_branch_name],
diff --git a/app/views/projects/protected_branches/_matching_branch.html.haml b/app/views/projects/protected_branches/_matching_branch.html.haml
index 8a5332ca5bb..27896272733 100644
--- a/app/views/projects/protected_branches/_matching_branch.html.haml
+++ b/app/views/projects/protected_branches/_matching_branch.html.haml
@@ -1,9 +1,10 @@
 %tr
   %td
-    = link_to matching_branch.name, namespace_project_tree_path(@project.namespace, @project, matching_branch.name)
+    = link_to matching_branch.name, project_ref_path(@project, matching_branch.name), class: 'ref-name'
+
     - if @project.root_ref?(matching_branch.name)
       %span.label.label-info.prepend-left-5 default
   %td
     - commit = @project.commit(matching_branch.name)
-    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
     = time_ago_with_tooltip(commit.committed_date)
diff --git a/app/views/projects/protected_branches/_protected_branch.html.haml b/app/views/projects/protected_branches/_protected_branch.html.haml
index b2a6b8469a3..0f80de94392 100644
--- a/app/views/projects/protected_branches/_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_protected_branch.html.haml
@@ -1,6 +1,7 @@
 %tr.js-protected-branch-edit-form{ data: { url: namespace_project_protected_branch_path(@project.namespace, @project, protected_branch) } }
   %td
-    = protected_branch.name
+    %span.ref-name= protected_branch.name
+
     - if @project.root_ref?(protected_branch.name)
       %span.label.label-info.prepend-left-5 default
   %td
@@ -9,7 +10,7 @@
       = link_to pluralize(matching_branches.count, "matching branch"), namespace_project_protected_branch_path(@project.namespace, @project, protected_branch)
     - else
       - if commit = protected_branch.commit
-        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
         = time_ago_with_tooltip(commit.committed_date)
       - else
         (branch was removed from repository)
diff --git a/app/views/projects/protected_branches/_update_protected_branch.html.haml b/app/views/projects/protected_branches/_update_protected_branch.html.haml
index d6044aacaec..c61b2951e1e 100644
--- a/app/views/projects/protected_branches/_update_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_update_protected_branch.html.haml
@@ -1,10 +1,10 @@
 %td
   = hidden_field_tag "allowed_to_merge_#{protected_branch.id}", protected_branch.merge_access_levels.first.access_level
   = dropdown_tag( (protected_branch.merge_access_levels.first.humanize || 'Select') ,
-                 options: { toggle_class: 'js-allowed-to-merge', dropdown_class: 'dropdown-menu-selectable js-allowed-to-merge-container',
+                 options: { toggle_class: 'js-allowed-to-merge', dropdown_class: 'dropdown-menu-selectable js-allowed-to-merge-container capitalize-header',
                  data: { field_name: "allowed_to_merge_#{protected_branch.id}", access_level_id: protected_branch.merge_access_levels.first.id }})
 %td
   = hidden_field_tag "allowed_to_push_#{protected_branch.id}", protected_branch.push_access_levels.first.access_level
   = dropdown_tag( (protected_branch.push_access_levels.first.humanize || 'Select') ,
-                 options: { toggle_class: 'js-allowed-to-push', dropdown_class: 'dropdown-menu-selectable js-allowed-to-push-container',
+                 options: { toggle_class: 'js-allowed-to-push', dropdown_class: 'dropdown-menu-selectable js-allowed-to-push-container capitalize-header',
                  data: { field_name: "allowed_to_push_#{protected_branch.id}", access_level_id: protected_branch.push_access_levels.first.id }})
diff --git a/app/views/projects/protected_branches/show.html.haml b/app/views/projects/protected_branches/show.html.haml
index f8cfe5e4b11..a806a0756ec 100644
--- a/app/views/projects/protected_branches/show.html.haml
+++ b/app/views/projects/protected_branches/show.html.haml
@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.prepend-top-0.ref-name
       = @protected_ref.name
 
   .col-lg-9
diff --git a/app/views/projects/protected_tags/_dropdown.html.haml b/app/views/projects/protected_tags/_dropdown.html.haml
index 74851519077..c8531f96f97 100644
--- a/app/views/projects/protected_tags/_dropdown.html.haml
+++ b/app/views/projects/protected_tags/_dropdown.html.haml
@@ -1,8 +1,8 @@
 = f.hidden_field(:name)
 
 = dropdown_tag('Select tag or create wildcard',
-               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide',
-                          filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search protected tag",
+               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide git-revision-dropdown-toggle',
+                          filter: true, dropdown_class: "dropdown-menu-selectable capitalize-header git-revision-dropdown", placeholder: "Search protected tag",
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
                                   selected: params[:protected_tag_name],
diff --git a/app/views/projects/protected_tags/_matching_tag.html.haml b/app/views/projects/protected_tags/_matching_tag.html.haml
index 97e5cd6f9d2..f17353df122 100644
--- a/app/views/projects/protected_tags/_matching_tag.html.haml
+++ b/app/views/projects/protected_tags/_matching_tag.html.haml
@@ -1,9 +1,10 @@
 %tr
   %td
-    = link_to matching_tag.name, namespace_project_tree_path(@project.namespace, @project, matching_tag.name)
+    = link_to matching_tag.name, project_ref_path(@project, matching_tag.name), class: 'ref-name'
+
     - if @project.root_ref?(matching_tag.name)
       %span.label.label-info.prepend-left-5 default
   %td
     - commit = @project.commit(matching_tag.name)
-    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
     = time_ago_with_tooltip(commit.committed_date)
diff --git a/app/views/projects/protected_tags/_protected_tag.html.haml b/app/views/projects/protected_tags/_protected_tag.html.haml
index 26bd3a1f5ed..54249ec0db1 100644
--- a/app/views/projects/protected_tags/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/_protected_tag.html.haml
@@ -1,6 +1,7 @@
 %tr.js-protected-tag-edit-form{ data: { url: namespace_project_protected_tag_path(@project.namespace, @project, protected_tag) } }
   %td
-    = protected_tag.name
+    %span.ref-name= protected_tag.name
+
     - if @project.root_ref?(protected_tag.name)
       %span.label.label-info.prepend-left-5 default
   %td
@@ -9,7 +10,7 @@
       = link_to pluralize(matching_tags.count, "matching tag"), namespace_project_protected_tag_path(@project.namespace, @project, protected_tag)
     - else
       - if commit = protected_tag.commit
-        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
         = time_ago_with_tooltip(commit.committed_date)
       - else
         (tag was removed from repository)
diff --git a/app/views/projects/protected_tags/_update_protected_tag.haml b/app/views/projects/protected_tags/_update_protected_tag.haml
index 62823bee46e..cc80bd04dd0 100644
--- a/app/views/projects/protected_tags/_update_protected_tag.haml
+++ b/app/views/projects/protected_tags/_update_protected_tag.haml
@@ -1,5 +1,5 @@
 %td
   = hidden_field_tag "allowed_to_create_#{protected_tag.id}", protected_tag.create_access_levels.first.access_level
   = dropdown_tag( (protected_tag.create_access_levels.first.humanize || 'Select') ,
-                 options: { toggle_class: 'js-allowed-to-create', dropdown_class: 'dropdown-menu-selectable js-allowed-to-create-container',
+                 options: { toggle_class: 'js-allowed-to-create', dropdown_class: 'dropdown-menu-selectable capitalize-header js-allowed-to-create-container',
                  data: { field_name: "allowed_to_create_#{protected_tag.id}", access_level_id: protected_tag.create_access_levels.first.id }})
diff --git a/app/views/projects/protected_tags/show.html.haml b/app/views/projects/protected_tags/show.html.haml
index 63743f28b3c..94c3612a449 100644
--- a/app/views/projects/protected_tags/show.html.haml
+++ b/app/views/projects/protected_tags/show.html.haml
@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.prepend-top-0.ref-name
       = @protected_ref.name
 
   .col-lg-9
diff --git a/app/views/projects/registry/repositories/index.html.haml b/app/views/projects/registry/repositories/index.html.haml
index be128e92fa7..5661af01302 100644
--- a/app/views/projects/registry/repositories/index.html.haml
+++ b/app/views/projects/registry/repositories/index.html.haml
@@ -1,26 +1,60 @@
 - page_title "Container Registry"
 
-%hr
-
-%ul.content-list
-  %li.light.prepend-top-default
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    %h4.prepend-top-0
+      = page_title
     %p
-      A 'container image' is a snapshot of a container.
-      You can host your container images with GitLab.
-      %br
-      To start using container images hosted on GitLab you first need to login:
-      %pre
-        %code
+      With the Docker Container Registry integrated into GitLab, every project
+      can have its own space to store its Docker images.
+    %p.append-bottom-0
+      = succeed '.' do
+        Learn more about
+        = link_to 'Container Registry', help_page_path('user/project/container_registry'), target: '_blank'
+
+  .col-lg-9
+    .panel.panel-default
+      .panel-heading
+        %h4.panel-title
+          How to use the Container Registry
+      .panel-body
+        %p
+          First log in to GitLab&rsquo;s Container Registry using your GitLab username
+          and password. If you have
+          = link_to '2FA enabled', help_page_path('user/profile/account/two_factor_authentication'), target: '_blank'
+          you need to use a
+          = succeed ':' do
+            = link_to 'personal access token', help_page_path('user/profile/account/two_factor_authentication', anchor: 'personal-access-tokens'), target: '_blank'
+        %pre
           docker login #{Gitlab.config.registry.host_port}
-      %br
-      Then you are free to create and upload a container image with build and push commands:
-      %pre
-        docker build -t #{escape_once(@project.container_registry_url)}/image .
         %br
-        docker push #{escape_once(@project.container_registry_url)}/image
+        %p
+          Once you log in, you&rsquo;re free to create and upload a container image
+          using the common
+          %code build
+          and
+          %code push
+          commands:
+        %pre
+          :plain
+            docker build -t #{escape_once(@project.container_registry_url)} .
+            docker push #{escape_once(@project.container_registry_url)}
 
-  - if @images.blank?
-    .nothing-here-block No container image repositories in Container Registry for this project.
+        %hr
+        %h5.prepend-top-default
+          Use different image names
+        %p.light
+          GitLab supports up to 3 levels of image names. The following
+          examples of images are valid for your project:
+        %pre
+          :plain
+            #{escape_once(@project.container_registry_url)}:tag
+            #{escape_once(@project.container_registry_url)}/optional-image-name:tag
+            #{escape_once(@project.container_registry_url)}/optional-name/optional-image-name:tag
 
-  - else
-    = render partial: 'image', collection: @images
+    - if @images.blank?
+      %p.settings-message.text-center.append-bottom-default
+        No container images stored for this project. Add one by following the
+        instructions above.
+    - else
+      = render partial: 'image', collection: @images
diff --git a/app/views/projects/releases/edit.html.haml b/app/views/projects/releases/edit.html.haml
index 79d8d721aa9..93ee9382a6e 100644
--- a/app/views/projects/releases/edit.html.haml
+++ b/app/views/projects/releases/edit.html.haml
@@ -11,9 +11,9 @@
 
 
   = form_for(@release, method: :put, url: namespace_project_tag_release_path(@project.namespace, @project, @tag.name), html: { class: 'form-horizontal common-note-form release-form js-quick-submit' }) do |f|
-    = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
+    = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do
       = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here..."
-      = render 'projects/notes/hints'
+      = render 'shared/notes/hints'
     .error-alert
     .prepend-top-default
       = f.submit 'Save changes', class: 'btn btn-save'
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index deeadb609f6..674f87e8220 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -1,15 +1,18 @@
 %li.runner{ id: dom_id(runner) }
   %h4
     = runner_status_icon(runner)
-    %span.monospace
-      - if @project_runners.include?(runner)
-        = link_to runner.short_sha, runner_path(runner)
-        - if runner.locked?
-          = icon('lock', class: 'has-tooltip', title: 'Locked to current projects')
-        %small
-          = link_to edit_namespace_project_runner_path(@project.namespace, @project, runner) do
-            %i.fa.fa-edit.btn
-      - else
+
+    - if @project_runners.include?(runner)
+      = link_to runner.short_sha, runner_path(runner), class: 'commit-sha'
+
+      - if runner.locked?
+        = icon('lock', class: 'has-tooltip', title: 'Locked to current projects')
+
+      %small
+        = link_to edit_namespace_project_runner_path(@project.namespace, @project, runner) do
+          %i.fa.fa-edit.btn
+    - else
+      %span.commit-sha
         = runner.short_sha
 
     .pull-right
diff --git a/app/views/projects/runners/_specific_runners.html.haml b/app/views/projects/runners/_specific_runners.html.haml
index 6b8e6bd4fee..f8835454140 100644
--- a/app/views/projects/runners/_specific_runners.html.haml
+++ b/app/views/projects/runners/_specific_runners.html.haml
@@ -9,7 +9,7 @@
       (checkout the #{link_to 'GitLab Runner section', 'https://about.gitlab.com/gitlab-ci/#gitlab-runner', target: '_blank'} for information on how to install it).
     %li
       Specify the following URL during the Runner setup:
-      %code= ci_root_url(only_path: false)
+      %code= root_url(only_path: false)
     %li
       Use the following registration token during setup:
       %code= @project.runners_token
diff --git a/app/views/projects/settings/_head.html.haml b/app/views/projects/settings/_head.html.haml
index 8c7f9e0191e..00bd563999f 100644
--- a/app/views/projects/settings/_head.html.haml
+++ b/app/views/projects/settings/_head.html.haml
@@ -14,7 +14,7 @@
             %span
               Members
         - if can_edit
-          = nav_link(controller: [:integrations, :services, :hooks]) do
+          = nav_link(controller: [:integrations, :services, :hooks, :hook_logs]) do
             = link_to project_settings_integrations_path(@project), title: 'Integrations' do
               %span
                 Integrations
@@ -24,9 +24,9 @@
                 Repository
           - if @project.feature_available?(:builds, current_user)
             = nav_link(controller: :ci_cd) do
-              = link_to namespace_project_settings_ci_cd_path(@project.namespace, @project), title: 'CI/CD Pipelines' do
+              = link_to namespace_project_settings_ci_cd_path(@project.namespace, @project), title: 'Pipelines' do
                 %span
-                  CI/CD Pipelines
+                  Pipelines
           - if Gitlab.config.pages.enabled
             = nav_link(controller: :pages) do
               = link_to namespace_project_pages_path(@project.namespace, @project), title: 'Pages' do
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index e2603096014..e8d2e91bd76 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -1,4 +1,4 @@
-- page_title "CI/CD Pipelines"
+- page_title "Pipelines"
 = render "projects/settings/head"
 
 = render 'projects/runners/index'
diff --git a/app/views/projects/settings/integrations/_project_hook.html.haml b/app/views/projects/settings/integrations/_project_hook.html.haml
index 8dc276a3bec..a6640592dba 100644
--- a/app/views/projects/settings/integrations/_project_hook.html.haml
+++ b/app/views/projects/settings/integrations/_project_hook.html.haml
@@ -3,7 +3,7 @@
     .col-md-8.col-lg-7
       %strong.light-header= hook.url
       %div
-        - %w(push_events tag_push_events issues_events confidential_issues_events note_events merge_requests_events build_events pipeline_events wiki_page_events).each do |trigger|
+        - %w(push_events tag_push_events issues_events confidential_issues_events note_events merge_requests_events job_events pipeline_events wiki_page_events).each do |trigger|
           - if hook.send(trigger)
             %span.label.label-gray.deploy-project-label= trigger.titleize
     .col-md-4.col-lg-5.text-right-lg.prepend-top-5
diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml
index 5402320cb66..4e59033c4a3 100644
--- a/app/views/projects/settings/repository/show.html.haml
+++ b/app/views/projects/settings/repository/show.html.haml
@@ -1,6 +1,10 @@
 - page_title "Repository"
 = render "projects/settings/head"
 
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('deploy_keys')
+
 = render @deploy_keys
 = render "projects/protected_branches/index"
 = render "projects/protected_tags/index"
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index d6c4195e2d0..1ca464696ed 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -73,11 +73,6 @@
             = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml', commit_message: 'Set up auto deploy', branch_name: 'auto-deploy', context: 'autodeploy') do
               Set up auto deploy
 
-  - if @repository.commit
-    %div{ class: container_class }
-      .project-last-commit
-        = render 'projects/last_commit', commit: @repository.commit, ref: current_ref, project: @project
-
 %div{ class: container_class }
   - if @project.archived?
     .text-warning.center.prepend-top-20
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 7a175f63eeb..847f3c2f348 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -9,4 +9,4 @@
   .row-content-block.top-block.content-component-block
     = render 'award_emoji/awards_block', awardable: @snippet, inline: true
 
-  #notes= render "projects/notes/notes_with_form"
+  #notes= render "shared/notes/notes_with_form", :autocomplete => true
diff --git a/app/views/projects/stage/_graph.html.haml b/app/views/projects/stage/_graph.html.haml
deleted file mode 100644
index 4ee30b023ac..00000000000
--- a/app/views/projects/stage/_graph.html.haml
+++ /dev/null
@@ -1,19 +0,0 @@
-- stage = local_assigns.fetch(:stage)
-- statuses = stage.statuses.latest
-- status_groups = statuses.sort_by(&:sortable_name).group_by(&:group_name)
-%li.stage-column
-  .stage-name
-    %a{ name: stage.name }
-    = stage.name.titleize
-  .builds-container
-    %ul
-      - status_groups.each do |group_name, grouped_statuses|
-        - if grouped_statuses.one?
-          - status = grouped_statuses.first
-          %li.build{ 'id' => "ci-badge-#{group_name}" }
-            .curve
-            = render 'ci/status/graph_badge', subject: status
-        - else
-          %li.build{ 'id' => "ci-badge-#{group_name}" }
-            .curve
-            = render 'projects/stage/in_stage_group', name: group_name, subject: grouped_statuses
diff --git a/app/views/projects/stage/_in_stage_group.html.haml b/app/views/projects/stage/_in_stage_group.html.haml
deleted file mode 100644
index 671a3ef481c..00000000000
--- a/app/views/projects/stage/_in_stage_group.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-- group_status = CommitStatus.where(id: subject).status
-%button.dropdown-menu-toggle.build-content.has-tooltip{ type: 'button', data: { toggle: 'dropdown',  title: "#{name} - #{group_status}", container: 'body' } }
-  %span{ class: "ci-status-icon ci-status-icon-#{group_status}" }
-    = ci_icon_for_status(group_status)
-  %span.ci-status-text
-    = name
-  %span.dropdown-counter-badge= subject.size
-
-%ul.dropdown-menu.big-pipeline-graph-dropdown-menu.js-grouped-pipeline-dropdown
-  .arrow
-  .scrollable-menu
-    - subject.each do |status|
-      %li
-        = render 'ci/status/dropdown_graph_badge', subject: status
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index 4c4f3655b97..44cb734d7b9 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -2,10 +2,9 @@
 - release = @releases.find { |release| release.tag == tag.name }
 %li.flex-row
   .row-main-content.str-truncated
-    = link_to namespace_project_tag_path(@project.namespace, @project, tag.name) do
-      %span.item-title
-        = icon('tag')
-        = tag.name
+    = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'item-title ref-name' do
+      = icon('tag')
+      = tag.name
 
     - if protected_tag?(@project, tag)
       %span.label.label-success
diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml
index 160d4c7a223..52af295bddd 100644
--- a/app/views/projects/tags/new.html.haml
+++ b/app/views/projects/tags/new.html.haml
@@ -1,4 +1,5 @@
 - page_title "New Tag"
+- default_ref = params[:ref] || @project.default_branch
 
 - if @error
   .alert.alert-danger
@@ -16,30 +17,30 @@
       = text_field_tag :tag_name, params[:tag_name], required: true, tabindex: 1, autofocus: true, class: 'form-control'
   .form-group
     = label_tag :ref, 'Create from', class: 'control-label'
-    .col-sm-10
-      = text_field_tag :ref, params[:ref] || @project.default_branch, required: true, tabindex: 2, class: 'form-control'
-      .help-block  Branch name or commit SHA
+    .col-sm-10.create-from
+      .dropdown
+        = hidden_field_tag :ref, default_ref
+        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+          .text-left.dropdown-toggle-text= default_ref
+        = render 'shared/ref_dropdown', dropdown_class: 'wide'
+      .help-block Existing branch name, tag, or commit SHA
   .form-group
     = label_tag :message, nil, class: 'control-label'
     .col-sm-10
-      = text_area_tag :message, nil, required: false, tabindex: 3, class: 'form-control', rows: 5
+      = text_area_tag :message, @message, required: false, tabindex: 3, class: 'form-control', rows: 5
       .help-block Optionally, add a message to the tag.
   %hr
   .form-group
     = label_tag :release_description, 'Release notes', class: 'control-label'
     .col-sm-10
-      = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
-        = render 'projects/zen', attr: :release_description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here..."
-        = render 'projects/notes/hints'
+      = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do
+        = render 'projects/zen', attr: :release_description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here...", current_text: @release_description
+        = render 'shared/notes/hints'
       .help-block Optionally, add release notes to the tag. They will be stored in the GitLab database and displayed on the tags page.
   .form-actions
     = button_tag 'Create tag', class: 'btn btn-create', tabindex: 3
     = link_to 'Cancel', namespace_project_tags_path(@project.namespace, @project), class: 'btn btn-cancel'
 
 :javascript
-  var availableRefs = #{@project.repository.ref_names.to_json};
-
-  $("#ref").autocomplete({
-    source: availableRefs,
-    minLength: 1
-  });
+  window.gl = window.gl || { };
+  window.gl.availableRefs = #{@project.repository.ref_names.to_json};
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index e996ae3e4fc..2b81ce4b9fa 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -6,7 +6,9 @@
   .top-area.multi-line
     .nav-text
       .title
-        %span.item-title= @tag.name
+        %span.item-title.ref-name
+          = icon('tag')
+          = @tag.name
         - if protected_tag?(@project, @tag)
           %span.label.label-success
             protected
diff --git a/app/views/projects/tree/_readme.html.haml b/app/views/projects/tree/_readme.html.haml
index 01599060844..de57cd4ba00 100644
--- a/app/views/projects/tree/_readme.html.haml
+++ b/app/views/projects/tree/_readme.html.haml
@@ -1,8 +1,9 @@
-%article.file-holder.readme-holder
-  .js-file-title.file-title
-    = blob_icon readme.mode, readme.name
-    = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, @path, readme.name)) do
-      %strong
-        = readme.name
-  .file-content.wiki
-    = markup(readme.name, readme.data)
+- if readme.rich_viewer
+  %article.file-holder.readme-holder
+    .js-file-title.file-title
+      = blob_icon readme.mode, readme.name
+      = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, readme.path)) do
+        %strong
+          = readme.name
+
+    = render 'projects/blob/viewer', viewer: readme.rich_viewer, viewer_url: namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, readme.path), viewer: :rich, format: :json)
diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
index 2497a2d91b1..2e34803b143 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -6,16 +6,6 @@
           %th Name
           %th.hidden-xs
             .pull-left Last commit
-            .last-commit.hidden-sm.pull-left
-              %i.fa.fa-angle-right
-              %small.light
-                = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
-                = clipboard_button(text: @commit.id, title: "Copy commit SHA to clipboard")
-                = time_ago_with_tooltip(@commit.committed_date)
-                \-
-                = @commit.full_title
-            %small.commit-history-link-spacer &#124;
-            = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'commit-history-link'
           %th.text-right Last Update
       - if @path.present?
         %tr.tree-item
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 396d1ecd77b..e4d9e24f56e 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,5 +1,8 @@
 .tree-controls
   = render 'projects/find_file_link'
+
+  = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'btn btn-grouped'
+
   = render 'projects/buttons/download', project: @project, ref: @ref
 
 .tree-ref-holder
diff --git a/app/views/projects/tree/show.html.haml b/app/views/projects/tree/show.html.haml
index 910d765aed0..f7e410e27b8 100644
--- a/app/views/projects/tree/show.html.haml
+++ b/app/views/projects/tree/show.html.haml
@@ -4,7 +4,8 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, namespace_project_commits_url(@project.namespace, @project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
 = render "projects/commits/head"
+
 = render 'projects/last_push'
 
 %div{ class: container_class }
-  = render 'projects/files'
+  = render 'projects/files', commit: @last_commit, project: @project, ref: @ref
diff --git a/app/views/projects/triggers/_form.html.haml b/app/views/projects/triggers/_form.html.haml
index 70d654fa9a0..5f708b3a2ed 100644
--- a/app/views/projects/triggers/_form.html.haml
+++ b/app/views/projects/triggers/_form.html.haml
@@ -8,26 +8,4 @@
   .form-group
     = f.label :key, "Description", class: "label-light"
     = f.text_field :description, class: "form-control", required: true, title: 'Trigger description is required.', placeholder: "Trigger description"
-    - if @trigger.persisted?
-      %hr
-      = f.fields_for :trigger_schedule do |schedule_fields|
-        = schedule_fields.hidden_field :id
-        .form-group
-          .checkbox
-            = schedule_fields.label :active do
-              = schedule_fields.check_box :active
-              %strong Schedule trigger (experimental)
-            .help-block
-              If checked, this trigger will be executed periodically according to cron and timezone.
-              = link_to icon('question-circle'), help_page_path('ci/triggers/README', anchor: 'using-scheduled-triggers')
-        .form-group
-          = schedule_fields.label :cron, "Cron", class: "label-light"
-          = schedule_fields.text_field :cron, class: "form-control", title: 'Cron specification is required.', placeholder: "0 1 * * *"
-        .form-group
-          = schedule_fields.label :cron, "Timezone", class: "label-light"
-          = schedule_fields.text_field :cron_timezone, class: "form-control", title: 'Timezone is required.', placeholder: "UTC"
-        .form-group
-          = schedule_fields.label :ref, "Branch or tag", class: "label-light"
-          = schedule_fields.text_field :ref, class: "form-control", title: 'Branch or tag is required.', placeholder: "master"
-          .help-block Existing branch name, tag
   = f.submit btn_text, class: "btn btn-save"
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
index 84e945ee0df..cc74e50a5e3 100644
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
@@ -22,8 +22,6 @@
                 %th
                   %strong Last used
                 %th
-                  %strong Next run at
-                %th
               = render partial: 'projects/triggers/trigger', collection: @triggers, as: :trigger
         - else
           %p.settings-message.text-center.append-bottom-default
diff --git a/app/views/projects/triggers/_trigger.html.haml b/app/views/projects/triggers/_trigger.html.haml
index ebd91a8e2af..9b5f63ae81a 100644
--- a/app/views/projects/triggers/_trigger.html.haml
+++ b/app/views/projects/triggers/_trigger.html.haml
@@ -29,12 +29,6 @@
     - else
       Never
 
-  %td
-    - if trigger.trigger_schedule&.active?
-      = trigger.trigger_schedule.real_next_run
-    - else
-      Never
-
   %td.text-right.trigger-actions
     - take_ownership_confirmation = "By taking ownership you will bind this trigger to your user account. With this the trigger will have access to all your projects as if it was you. Are you sure?"
     - revoke_trigger_confirmation = "By revoking a trigger you will break any processes making use of it. Are you sure?"
diff --git a/app/views/projects/variables/_content.html.haml b/app/views/projects/variables/_content.html.haml
index 06477aba103..98f618ca3b8 100644
--- a/app/views/projects/variables/_content.html.haml
+++ b/app/views/projects/variables/_content.html.haml
@@ -1,7 +1,8 @@
 %h4.prepend-top-0
-  Secret Variables
+  Secret variables
+  = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'secret-variables'), target: '_blank'
 %p
-  These variables will be set to environment by the runner.
+  These variables will be set to environment by the runner, and could be protected by exposing only to protected branches or tags.
 %p
   So you can use them for passwords, secret keys or whatever you want.
 %p
diff --git a/app/views/projects/variables/_form.html.haml b/app/views/projects/variables/_form.html.haml
index 1ae86d258af..0a70a301cb4 100644
--- a/app/views/projects/variables/_form.html.haml
+++ b/app/views/projects/variables/_form.html.haml
@@ -7,4 +7,13 @@
   .form-group
     = f.label :value, "Value", class: "label-light"
     = f.text_area :value, class: "form-control", placeholder: "PROJECT_VARIABLE"
+  .form-group
+    .checkbox
+      = f.label :protected do
+        = f.check_box :protected
+        %strong Protected
+      .help-block
+        This variable will be passed only to pipelines running on protected branches and tags
+        = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'protected-secret-variables'), target: '_blank'
+
   = f.submit btn_text, class: "btn btn-save"
diff --git a/app/views/projects/variables/_table.html.haml b/app/views/projects/variables/_table.html.haml
index 0ce597dcf21..59cd3c4b592 100644
--- a/app/views/projects/variables/_table.html.haml
+++ b/app/views/projects/variables/_table.html.haml
@@ -3,10 +3,12 @@
     %colgroup
       %col
       %col
+      %col
       %col{ width: 100 }
     %thead
       %th Key
       %th Value
+      %th Protected
       %th
     %tbody
       - @project.variables.order_key_asc.each do |variable|
@@ -14,6 +16,7 @@
           %tr
             %td.variable-key= variable.key
             %td.variable-value{ "data-value" => variable.value }******
+            %td.variable-protected= Gitlab::Utils.boolean_to_yes_no(variable.protected)
             %td.variable-menu
               = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-edit" do
                 %span.sr-only
diff --git a/app/views/projects/wikis/_form.html.haml b/app/views/projects/wikis/_form.html.haml
index 0d2cd4a7476..6cb7c1e9c4d 100644
--- a/app/views/projects/wikis/_form.html.haml
+++ b/app/views/projects/wikis/_form.html.haml
@@ -12,9 +12,9 @@
   .form-group
     = f.label :content, class: 'control-label'
     .col-sm-10
-      = render layout: 'projects/md_preview', locals: { preview_class: "md-preview" } do
+      = render layout: 'projects/md_preview', locals: { url: namespace_project_wiki_preview_markdown_path(@project.namespace, @project, @page.slug) } do
         = render 'projects/zen', f: f, attr: :content, classes: 'note-textarea', placeholder: 'Write your content or drag files here...'
-        = render 'projects/notes/hints'
+        = render 'shared/notes/hints'
 
       .clearfix
       .error-alert
diff --git a/app/views/projects/wikis/_sidebar.html.haml b/app/views/projects/wikis/_sidebar.html.haml
index 713b758727e..c2f9e65015d 100644
--- a/app/views/projects/wikis/_sidebar.html.haml
+++ b/app/views/projects/wikis/_sidebar.html.haml
@@ -1,4 +1,4 @@
-%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "102", "spy" => "affix" } }
+%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
   .block.wiki-sidebar-header.append-bottom-default
     %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
       = icon('angle-double-right')
diff --git a/app/views/projects/wikis/git_access.html.haml b/app/views/projects/wikis/git_access.html.haml
index fb0efd85dcd..68862206248 100644
--- a/app/views/projects/wikis/git_access.html.haml
+++ b/app/views/projects/wikis/git_access.html.haml
@@ -28,7 +28,7 @@
     %h3 Clone your wiki
     %pre.dark
       :preserve
-        git clone #{ content_tag(:span, default_url_to_repo(@project_wiki), class: 'clone')}
+        git clone #{ content_tag(:span, h(default_url_to_repo(@project_wiki)), class: 'clone')}
         cd #{h @project_wiki.path}
 
     %h3 Start Gollum and edit locally
diff --git a/app/views/search/_category.html.haml b/app/views/search/_category.html.haml
index 059a0d1ac78..314d8e9cb25 100644
--- a/app/views/search/_category.html.haml
+++ b/app/views/search/_category.html.haml
@@ -3,41 +3,48 @@
   .fade-right= icon('angle-right')
   %ul.nav-links.search-filter.scrolling-tabs
     - if @project
-      %li{ class: active_when(@scope == 'blobs') }
-        = link_to search_filter_path(scope: 'blobs') do
-          Code
-          %span.badge
-            = @search_results.blobs_count
-      %li{ class: active_when(@scope == 'issues') }
-        = link_to search_filter_path(scope: 'issues') do
-          Issues
-          %span.badge
-            = @search_results.issues_count
-      %li{ class: active_when(@scope == 'merge_requests') }
-        = link_to search_filter_path(scope: 'merge_requests') do
-          Merge requests
-          %span.badge
-            = @search_results.merge_requests_count
-      %li{ class: active_when(@scope == 'milestones') }
-        = link_to search_filter_path(scope: 'milestones') do
-          Milestones
-          %span.badge
-            = @search_results.milestones_count
-      %li{ class: active_when(@scope == 'notes') }
-        = link_to search_filter_path(scope: 'notes') do
-          Comments
-          %span.badge
-            = @search_results.notes_count
-      %li{ class: active_when(@scope == 'wiki_blobs') }
-        = link_to search_filter_path(scope: 'wiki_blobs') do
-          Wiki
-          %span.badge
-            = @search_results.wiki_blobs_count
-      %li{ class: active_when(@scope == 'commits') }
-        = link_to search_filter_path(scope: 'commits') do
-          Commits
-          %span.badge
-            = @search_results.commits_count
+      - if project_search_tabs?(:blobs)
+        %li{ class: active_when(@scope == 'blobs') }
+          = link_to search_filter_path(scope: 'blobs') do
+            Code
+            %span.badge
+              = @search_results.blobs_count
+      - if project_search_tabs?(:issues)
+        %li{ class: active_when(@scope == 'issues') }
+          = link_to search_filter_path(scope: 'issues') do
+            Issues
+            %span.badge
+              = @search_results.issues_count
+      - if project_search_tabs?(:merge_requests)
+        %li{ class: active_when(@scope == 'merge_requests') }
+          = link_to search_filter_path(scope: 'merge_requests') do
+            Merge requests
+            %span.badge
+              = @search_results.merge_requests_count
+      - if project_search_tabs?(:milestones)
+        %li{ class: active_when(@scope == 'milestones') }
+          = link_to search_filter_path(scope: 'milestones') do
+            Milestones
+            %span.badge
+              = @search_results.milestones_count
+      - if project_search_tabs?(:notes)
+        %li{ class: active_when(@scope == 'notes') }
+          = link_to search_filter_path(scope: 'notes') do
+            Comments
+            %span.badge
+              = @search_results.notes_count
+      - if project_search_tabs?(:wiki)
+        %li{ class: active_when(@scope == 'wiki_blobs') }
+          = link_to search_filter_path(scope: 'wiki_blobs') do
+            Wiki
+            %span.badge
+              = @search_results.wiki_blobs_count
+      - if project_search_tabs?(:commits)
+        %li{ class: active_when(@scope == 'commits') }
+          = link_to search_filter_path(scope: 'commits') do
+            Commits
+            %span.badge
+              = @search_results.commits_count
 
     - elsif @show_snippets
       %li{ class: active_when(@scope == 'snippet_blobs') }
diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index 938be20c7cf..e43796e9654 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -3,7 +3,7 @@
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
 .dropdown
-  %button.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Group:" } }
+  %button.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Group:", group_id: params[:group_id] } }
     %span.dropdown-toggle-text
       Group:
       - if @group.present?
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index 34a4d7398bc..0992a65f7cd 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -17,7 +17,7 @@
         %li
           = http_clone_button(project)
 
-  = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true
+  = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true, aria: { label: 'Project clone URL' }
   .input-group-btn
     = clipboard_button(target: '#project_clone', title: "Copy URL to clipboard")
 
diff --git a/app/views/shared/_field.html.haml b/app/views/shared/_field.html.haml
index 8d6e16f74c3..d74b0043949 100644
--- a/app/views/shared/_field.html.haml
+++ b/app/views/shared/_field.html.haml
@@ -9,7 +9,7 @@
 
 .form-group
   - if type == "password" && value.present?
-    = form.label name, "Change #{title}", class: "control-label"
+    = form.label name, "Enter new #{title.downcase}", class: "control-label"
   - else
     = form.label name, title, class: "control-label"
   .col-sm-10
@@ -22,6 +22,6 @@
     - elsif type == 'select'
       = form.select name, options_for_select(choices, value ? value : default_choice), {}, { class: "form-control" }
     - elsif type == 'password'
-      = form.password_field name, autocomplete: "new-password", class: 'form-control'
+      = form.password_field name, autocomplete: "new-password", class: "form-control"
     - if help
       %span.help-block= help
diff --git a/app/views/shared/_group_form.html.haml b/app/views/shared/_group_form.html.haml
index 90ae3f06a98..8d5b5129454 100644
--- a/app/views/shared/_group_form.html.haml
+++ b/app/views/shared/_group_form.html.haml
@@ -15,7 +15,7 @@
           %strong= parent.full_path + '/'
       = f.text_field :path, placeholder: 'open-source', class: 'form-control',
         autofocus: local_assigns[:autofocus] || false, required: true,
-        pattern: Gitlab::Regex::NAMESPACE_REGEX_STR_JS,
+        pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
         title: 'Please choose a group path with no special characters.',
         "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
       - if parent
diff --git a/app/views/shared/_new_project_item_select.html.haml b/app/views/shared/_new_project_item_select.html.haml
index fbbf6f358c5..9ed844cf5e7 100644
--- a/app/views/shared/_new_project_item_select.html.haml
+++ b/app/views/shared/_new_project_item_select.html.haml
@@ -1,6 +1,6 @@
 - if @projects.any?
   .project-item-select-holder
-    = project_select_tag :project_path, class: "project-item-select", data: { include_groups: local_assigns[:include_groups], order_by: 'last_activity_at' }
+    = project_select_tag :project_path, class: "project-item-select", data: { include_groups: local_assigns[:include_groups], order_by: 'last_activity_at' }, with_feature_enabled: local_assigns[:with_feature_enabled]
     %a.btn.btn-new.new-project-item-select-button
       = local_assigns[:label]
       = icon('caret-down')
diff --git a/app/views/shared/_ref_dropdown.html.haml b/app/views/shared/_ref_dropdown.html.haml
new file mode 100644
index 00000000000..8b2a3bee407
--- /dev/null
+++ b/app/views/shared/_ref_dropdown.html.haml
@@ -0,0 +1,7 @@
+- dropdown_class = local_assigns.fetch(:dropdown_class, '')
+
+.dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: dropdown_class }
+  = dropdown_title "Select Git revision"
+  = dropdown_filter "Filter by Git revision"
+  = dropdown_content
+  = dropdown_loading
diff --git a/app/views/shared/_ref_switcher.html.haml b/app/views/shared/_ref_switcher.html.haml
index 9a8252ab087..2029eb5824a 100644
--- a/app/views/shared/_ref_switcher.html.haml
+++ b/app/views/shared/_ref_switcher.html.haml
@@ -6,8 +6,8 @@
   - @options && @options.each do |key, value|
     = hidden_field_tag key, value, id: nil
   .dropdown
-    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'ref', submit_form_on_click: true }, { toggle_class: "js-project-refs-dropdown" }
-    .dropdown-menu.dropdown-menu-selectable{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
+    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'ref', submit_form_on_click: true }, { toggle_class: "js-project-refs-dropdown git-revision-dropdown-toggle" }
+    .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
       = dropdown_title "Switch branch/tag"
       = dropdown_filter "Search branches and tags"
       = dropdown_content
diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml
index c229d18903f..046b127f73c 100644
--- a/app/views/shared/empty_states/_issues.html.haml
+++ b/app/views/shared/empty_states/_issues.html.haml
@@ -3,10 +3,10 @@
 - has_button = button_path || project_select_button
 
 .row.empty-state
-  .pull-right.col-xs-12{ class: "#{'col-sm-6' if has_button}" }
+  .col-xs-12
     .svg-content
       = render 'shared/empty_states/icons/issues.svg'
-  .col-xs-12{ class: "#{'col-sm-6' if has_button}" }
+  .col-xs-12.text-center
     .text-content
       - if has_button && current_user
         %h4
@@ -20,4 +20,3 @@
       - else
         .text-center
           %h4 There are no issues to show.
-          = link_to 'New issue', button_path, class: 'btn btn-new', title: 'New issue', id: 'new_issue_link'
diff --git a/app/views/shared/empty_states/_labels.html.haml b/app/views/shared/empty_states/_labels.html.haml
index 00fb77bdb3b..5e2f4cf109d 100644
--- a/app/views/shared/empty_states/_labels.html.haml
+++ b/app/views/shared/empty_states/_labels.html.haml
@@ -1,8 +1,8 @@
 .row.empty-state.labels
-  .pull-right.col-xs-12.col-sm-6
+  .col-xs-12
     .svg-content
       = render 'shared/empty_states/icons/labels.svg'
-  .col-xs-12.col-sm-6
+  .col-xs-12.text-center
     .text-content
       %h4 Labels can be applied to issues and merge requests to categorize them.
       %p You can also star a label to make it a priority label.
diff --git a/app/views/shared/empty_states/_merge_requests.html.haml b/app/views/shared/empty_states/_merge_requests.html.haml
index 7f2f99f3406..3e64f403b8b 100644
--- a/app/views/shared/empty_states/_merge_requests.html.haml
+++ b/app/views/shared/empty_states/_merge_requests.html.haml
@@ -3,10 +3,10 @@
 - has_button = button_path || project_select_button
 
 .row.empty-state.merge-requests
-  .col-xs-12{ class: "#{'col-sm-6 pull-right' if has_button}" }
+  .col-xs-12
     .svg-content
       = render 'shared/empty_states/icons/merge_requests.svg'
-  .col-xs-12{ class: "#{'col-sm-6' if has_button}" }
+  .col-xs-12.text-center
     .text-content
       - if has_button
         %h4
diff --git a/app/views/shared/empty_states/icons/_pipelines_empty.svg b/app/views/shared/empty_states/icons/_pipelines_empty.svg
index 8119d5bebe0..7c672538097 100644
--- a/app/views/shared/empty_states/icons/_pipelines_empty.svg
+++ b/app/views/shared/empty_states/icons/_pipelines_empty.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd" transform="translate(0-3)"><g transform="translate(0 105)"><g fill="#e5e5e5"><rect width="78" height="4" x="34" y="21" opacity=".5" rx="2"/><path d="m152 23c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2"/></g><g transform="translate(0 4)"><path fill="#98d7b2" fill-rule="nonzero" d="m19 38c-10.493 0-19-8.507-19-19 0-10.493 8.507-19 19-19 10.493 0 19 8.507 19 19 0 10.493-8.507 19-19 19m0-4c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15"/><path fill="#31af64" d="m17.07 21.02l-2.829-2.829c-.786-.786-2.047-.781-2.828 0-.786.786-.781 2.047 0 2.828l4.243 4.243c.392.392.902.587 1.412.588.512.002 1.021-.193 1.41-.582l7.79-7.79c.777-.777.775-2.042-.006-2.823-.786-.786-2.045-.784-2.823-.006l-6.37 6.37"/></g><g fill="#e52c5a" transform="translate(102)"><path fill-rule="nonzero" d="m24 47.5c-12.979 0-23.5-10.521-23.5-23.5 0-12.979 10.521-23.5 23.5-23.5 12.979 0 23.5 10.521 23.5 23.5 0 12.979-10.521 23.5-23.5 23.5m0-5c10.217 0 18.5-8.283 18.5-18.5 0-10.217-8.283-18.5-18.5-18.5-10.217 0-18.5 8.283-18.5 18.5 0 10.217 8.283 18.5 18.5 18.5"/><path d="m28.24 24l2.833-2.833c1.167-1.167 1.167-3.067-.004-4.239-1.169-1.169-3.069-1.173-4.239-.004l-2.833 2.833-2.833-2.833c-1.167-1.167-3.067-1.167-4.239.004-1.169 1.169-1.173 3.069-.004 4.239l2.833 2.833-2.833 2.833c-1.167 1.167-1.167 3.067.004 4.239 1.169 1.169 3.069 1.173 4.239.004l2.833-2.833 2.833 2.833c1.167 1.167 3.067 1.167 4.239-.004 1.169-1.169 1.173-3.069.004-4.239l-2.833-2.833"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="m236 37c-7.732 0-14-6.268-14-14 0-7.732 6.268-14 14-14 7.732 0 14 6.268 14 14 0 7.732-6.268 14-14 14m0-4c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10-5.523 0-10 4.477-10 10 0 5.523 4.477 10 10 10"/></g><g transform="translate(69 3)"><path fill="#e5e5e5" fill-rule="nonzero" d="m4 11.99v60.02c0 4.413 3.583 7.99 8 7.99h89.991c4.419 0 8-3.579 8-7.99v-60.02c0-4.413-3.583-7.99-8-7.99h-89.991c-4.419 0-8 3.579-8 7.99m-4 0c0-6.622 5.378-11.99 12-11.99h89.991c6.629 0 12 5.367 12 11.99v60.02c0 6.622-5.378 11.99-12 11.99h-89.991c-6.629 0-12-5.367-12-11.99v-60.02m52.874 80.3l-13.253-15.292h34.76l-13.253 15.292c-2.237 2.582-6.01 2.585-8.253 0m3.02-2.62c.644.743 1.564.743 2.207 0l7.516-8.673h-17.24l7.516 8.673"/><rect width="18" height="6" x="15" y="23" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="39" y="39" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="33" y="55" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="39" y="23" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="57" y="55" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="15" y="55" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="81" y="23" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="15" y="39" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="57" y="23" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="69" y="23" rx="3"/><rect width="6" height="6" x="75" y="39" rx="3"/></g><rect width="6" height="6" x="63" y="39" fill="#e52c5a" rx="3"/></g><g transform="matrix(.70711-.70711.70711.70711 84.34 52.5)"><path fill="#6b4fbb" fill-rule="nonzero" d="m28.02 67.48c-15.927-2.825-28.02-16.738-28.02-33.476 0-18.778 15.222-34 34-34 18.778 0 34 15.222 34 34 0 16.738-12.1 30.652-28.02 33.476.015.173.023.347.023.524v21.999c0 3.314-2.693 6-6 6-3.314 0-6-2.682-6-6v-21.999c0-.177.008-.351.023-.524m5.977-7.476c14.359 0 26-11.641 26-26 0-14.359-11.641-26-26-26-14.359 0-26 11.641-26 26 0 14.359 11.641 26 26 26"/><path fill="#fff" fill-opacity=".3" stroke="#6b4fbb" stroke-width="8" d="m31 71c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30" transform="matrix(.86603.5-.5.86603 26.663-17.507)"/></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd"><g transform="translate(0 102)"><g fill="#e5e5e5"><rect width="74" height="4" x="34" y="21" opacity=".5" rx="2"/><path d="m152 23c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2"/></g><g fill="#31af64" transform="translate(0 4)"><path fill-rule="nonzero" d="m19 38c-10.493 0-19-8.507-19-19 0-10.493 8.507-19 19-19 10.493 0 19 8.507 19 19 0 10.493-8.507 19-19 19m0-4c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15"/><path d="m17.07 21.02l-2.829-2.829c-.786-.786-2.047-.781-2.828 0-.786.786-.781 2.047 0 2.828l4.243 4.243c.392.392.902.587 1.412.588.512.002 1.021-.193 1.41-.582l7.79-7.79c.777-.777.775-2.042-.006-2.823-.786-.786-2.045-.784-2.823-.006l-6.37 6.37"/></g><g fill="#e52c5a" transform="translate(102)"><path fill-rule="nonzero" d="m24 47.5c-12.979 0-23.5-10.521-23.5-23.5 0-12.979 10.521-23.5 23.5-23.5 12.979 0 23.5 10.521 23.5 23.5 0 12.979-10.521 23.5-23.5 23.5m0-5c10.217 0 18.5-8.283 18.5-18.5 0-10.217-8.283-18.5-18.5-18.5-10.217 0-18.5 8.283-18.5 18.5 0 10.217 8.283 18.5 18.5 18.5"/><path d="m28.24 24l2.833-2.833c1.167-1.167 1.167-3.067-.004-4.239-1.169-1.169-3.069-1.173-4.239-.004l-2.833 2.833-2.833-2.833c-1.167-1.167-3.067-1.167-4.239.004-1.169 1.169-1.173 3.069-.004 4.239l2.833 2.833-2.833 2.833c-1.167 1.167-1.167 3.067.004 4.239 1.169 1.169 3.069 1.173 4.239.004l2.833-2.833 2.833 2.833c1.167 1.167 3.067 1.167 4.239-.004 1.169-1.169 1.173-3.069.004-4.239l-2.833-2.833"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="m236 37c-7.732 0-14-6.268-14-14 0-7.732 6.268-14 14-14 7.732 0 14 6.268 14 14 0 7.732-6.268 14-14 14m0-4c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10-5.523 0-10 4.477-10 10 0 5.523 4.477 10 10 10"/></g><g transform="translate(73 4)"><path stroke="#e5e5e5" stroke-width="4" d="m64.82 76h33.18c4.419 0 8-3.579 8-7.99v-60.02c0-4.413-3.583-7.99-8-7.99h-89.991c-4.419 0-8 3.579-8 7.99v60.02c0 4.413 3.583 7.99 8 7.99h31.935l9.263 9.855c1.725 1.835 4.631 1.833 6.354 0l9.263-9.855"/><rect width="18" height="6" x="11" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="35" y="35" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="29" y="51" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="35" y="19" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="53" y="51" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="11" y="51" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="77" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="11" y="35" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="53" y="19" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="65" y="19" rx="3"/><rect width="6" height="6" x="71" y="35" rx="3"/></g><rect width="6" height="6" x="59" y="35" fill="#e52c5a" rx="3"/></g><path fill="#6b4fbb" fill-rule="nonzero" d="m28.02 67.48c-15.927-2.825-28.02-16.738-28.02-33.476 0-18.778 15.222-34 34-34 18.778 0 34 15.222 34 34 0 16.738-12.1 30.652-28.02 33.476.015.173.023.347.023.524v21.999c0 3.314-2.693 6-6 6-3.314 0-6-2.682-6-6v-21.999c0-.177.008-.351.023-.524m5.977-7.476c14.359 0 26-11.641 26-26 0-14.359-11.641-26-26-26-14.359 0-26 11.641-26 26 0 14.359 11.641 26 26 26" transform="matrix(.70711-.70711.70711.70711 84.34 49.5)"/></g></svg>
diff --git a/app/views/shared/errors/_graphic_422.svg b/app/views/shared/errors/_graphic_422.svg
new file mode 100644
index 00000000000..87128ecd69d
--- /dev/null
+++ b/app/views/shared/errors/_graphic_422.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 246" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="0" width="178" height="136" rx="10"/><mask id="1" width="178" height="136" x="0" y="0" fill="#fff"><use xlink:href="#0"/></mask></defs><g fill="none" fill-rule="evenodd"><g fill="#e5e5e5" fill-rule="nonzero"><path d="m109.88 37.634c5.587-3.567 12.225-5.634 19.345-5.634 7.445 0 14.363 2.26 20.1 6.132l21.435-37.13c.554-.959 1.771-1.292 2.734-.736.957.552 1.284 1.777.73 2.736l-21.496 37.23c-.065.112-.138.215-.219.309 3.686 3.13 6.733 6.988 8.919 11.353l-3.393.002c-5.775-10.322-16.705-16.901-28.814-16.901-12.12 0-23.06 6.594-28.833 16.935l-3.393.002c2.32-4.646 5.616-8.72 9.618-11.954l-21.349-36.977c-.554-.959-.227-2.184.73-2.736.963-.556 2.181-.223 2.734.736l21.15 36.629"/><path d="m3 70v134c0 9.389 7.611 17 16.997 17h220.01c9.389 0 16.997-7.611 16.997-17v-134c0-9.389-7.611-17-16.997-17h-220.01c-9.389 0-16.997 7.611-16.997 17m-3 0c0-11.05 8.95-20 19.997-20h220.01c11.04 0 19.997 8.958 19.997 20v134c0 11.05-8.95 20-19.997 20h-220.01c-11.04 0-19.997-8.958-19.997-20v-134"/></g><ellipse cx="129" cy="241.5" fill="#f9f9f9" rx="89" ry="4.5"/><g fill-rule="nonzero" transform="translate(210 70)"><path fill="#eaeaea" d="m16 29c7.18 0 13-5.82 13-13 0-7.18-5.82-13-13-13-7.18 0-13 5.82-13 13 0 7.18 5.82 13 13 13m0 3c-8.837 0-16-7.163-16-16 0-8.837 7.163-16 16-16 8.837 0 16 7.163 16 16 0 8.837-7.163 16-16 16" id="2"/><path fill="#6b4fbb" d="m16 21c2.761 0 5-2.239 5-5 0-2.761-2.239-5-5-5-2.761 0-5 2.239-5 5 0 2.761 2.239 5 5 5m0 3c-4.418 0-8-3.582-8-8 0-4.418 3.582-8 8-8 4.418 0 8 3.582 8 8 0 4.418-3.582 8-8 8" id="3"/></g><g fill-rule="nonzero" transform="translate(210 109)"><use xlink:href="#2"/><use xlink:href="#3"/></g><g transform="translate(210 147)"><path fill="#e5e5e5" fill-rule="nonzero" d="m3 5.992v45.02c0 1.647 1.346 2.992 3 2.992h20c1.657 0 3-1.341 3-2.992v-45.02c0-1.647-1.346-2.992-3-2.992h-20c-1.657 0-3 1.341-3 2.992m-3 0c0-3.309 2.687-5.992 6-5.992h20c3.314 0 6 2.692 6 5.992v45.02c0 3.309-2.687 5.992-6 5.992h-20c-3.314 0-6-2.692-6-5.992v-45.02"/><rect width="16" height="4" x="8" y="27" fill="#fdb692" rx="2"/><rect width="16" height="4" x="8" y="19" fill="#fc9867" rx="2"/><rect width="16" height="4" x="8" y="11" fill="#fc6d26" rx="2"/><rect width="16" height="4" x="8" y="35" fill="#fed3bd" rx="2"/><rect width="16" height="4" x="8" y="43" fill="#fef0e9" rx="2"/></g><g transform="translate(16 69)"><use fill="#6b4fbb" fill-opacity=".1" stroke="#e5e5e5" stroke-width="6" mask="url(#1)" xlink:href="#0"/><g class="tv-screen" fill="#fff"><path opacity=".4" mix-blend-mode="overlay" d="m3 17h172v16h-172z"/><path opacity=".6" mix-blend-mode="overlay" d="m3 70h172v24h-172z"/><path opacity=".3" mix-blend-mode="overlay" d="m3 107h172v16h-172z"/><path opacity=".4" mix-blend-mode="overlay" d="m3 40h172v8h-172z"/><path opacity=".3" mix-blend-mode="overlay" d="m3 55h172v8h-172z"/></g></g><path class="text-422" d="m.693 19h5.808c.277 0 .498-.224.498-.5 0-.268-.223-.5-.498-.5h-5.808v-2.094l3.777-5.906h3.916l-4.124 6.454h6.259v-6.454h.978c.273 0 .5-.224.5-.5 0-.268-.224-.5-.5-.5h-.978v-2h4.698v6h-2.721c-.277 0-.498.224-.498.5 0 .268.223.5.498.5h2.721v2.454h2.723v4.2h-2.723v5.346h-4.698v-5.346h-9.828v-1.654m4.417-10l1.279-2h3.914l-1.278 2h-3.916m1.919-3l1.279-2h4.192c.27 0 .5-.224.5-.5 0-.268-.224-.5-.5-.5h-3.552l1.142-1.786h5.13v4.786h-8.191m31.09 19v1h-15.738v-2h5.118c.271 0 .503-.224.503-.5 0-.268-.225-.5-.503-.5h-5.118v-1.184l2.656-2.822c.682-.725 1.306-1.39 1.872-1.994h5.428c-.389.394-.808.815-1.256 1.264-1.428 1.428-2.562 2.568-3.403 3.42h10.442v2.316h-4.614c-.271 0-.503.224-.503.5 0 .268.225.5.503.5h4.614m-6.674-13c.493-.631.87-1.208 1.129-1.73.365-.736.548-1.464.548-2.183 0-1.107-.335-1.962-1-2.565-.67-.603-1.619-.905-2.847-.905-.874 0-1.857.174-2.947.523-1.09.349-2.227.855-3.412 1.519v-2.659h3.589c.27 0 .5-.224.5-.5 0-.268-.224-.5-.5-.5h-3.589v-.906c1.184-.432 2.344-.761 3.478-.988 1.134-.227 2.222-.34 3.262-.34 2.623 0 4.684.611 6.184 1.834.157.128.307.262.448.4h-2.782c-.27 0-.5.224-.5.5 0 .268.224.5.5.5h3.602c.654 1.01.981 2.209.981 3.605 0 .974-.163 1.887-.49 2.739-.326.852-.888 1.798-1.685 2.839-.397.509-1.261 1.448-2.594 2.816h-5.474c1.34-1.436 2.261-2.436 2.763-3h4.396c.271 0 .499-.224.499-.5 0-.268-.223-.5-.499-.5h-3.557m28.14 12v2h-15.738v-4.184l2.651-2.816h5.313c-1.087 1.089-1.976 1.983-2.668 2.684h10.442v1.316h-4.083c-.271 0-.503.224-.503.5 0 .268.225.5.503.5h4.083m-2.069-11c-.045.061-.092.122-.139.184-.567.727-2.089 2.333-4.568 4.816h-5.372c2.601-2.77 4.204-4.503 4.81-5.198.83-.952 1.428-1.796 1.793-2.532.365-.736.548-1.464.548-2.183 0-1.107-.335-1.962-1-2.565-.67-.603-1.619-.905-2.847-.905-.874 0-1.857.174-2.947.523-1.09.349-2.227.855-3.412 1.519v-2.659h3.117c.271 0 .503-.224.503-.5 0-.268-.225-.5-.503-.5h-3.117v-.906c1.184-.432 2.344-.761 3.478-.988 1.134-.227 2.222-.34 3.262-.34 2.623 0 4.684.611 6.184 1.834.157.128.307.262.448.4h-1.248c-.271 0-.503.224-.503.5 0 .268.225.5.503.5h2.069c.654 1.01.981 2.209.981 3.605 0 .844-.123 1.642-.368 2.395h-2.683c-.271 0-.503.224-.503.5 0 .268.225.5.503.5h2.272c-.159.321-.347.655-.566 1h-3.706c-.271 0-.503.224-.503.5 0 .268.225.5.503.5h3.01" transform="translate(75 124)" fill="#5c5c5c"/></g></svg>
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
new file mode 100644
index 00000000000..af6a499fadb
--- /dev/null
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -0,0 +1,44 @@
+%p
+  %strong Request URL:
+  POST
+  = hook_log.url
+  = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
+
+%p
+  %strong Trigger:
+  %td.hidden-xs
+    %span.label.label-gray.deploy-project-label
+      = hook_log.trigger.singularize.titleize
+%p
+  %strong Elapsed time:
+  #{number_with_precision(hook_log.execution_duration, precision: 2)} ms
+%p
+  %strong Request time:
+  = time_ago_with_tooltip(hook_log.created_at)
+
+%hr
+
+- if hook_log.internal_error_message.present?
+  .bs-callout.bs-callout-danger
+    = hook_log.internal_error_message
+
+%h5 Request headers:
+%pre
+  - hook_log.request_headers.each do |k,v|
+    <strong>#{k}:</strong> #{v}
+    %br
+
+%h5 Request body:
+%pre
+  :plain
+    #{JSON.pretty_generate(hook_log.request_data)}
+%h5 Response headers:
+%pre
+  - hook_log.response_headers.each do |k,v|
+    <strong>#{k}:</strong> #{v}
+    %br
+
+%h5 Response body:
+%pre
+  :plain
+    #{hook_log.response_body}
diff --git a/app/views/shared/hook_logs/_status_label.html.haml b/app/views/shared/hook_logs/_status_label.html.haml
new file mode 100644
index 00000000000..b4ea8e6f952
--- /dev/null
+++ b/app/views/shared/hook_logs/_status_label.html.haml
@@ -0,0 +1,3 @@
+- label_status = hook_log.success? ? 'label-success' : 'label-danger'
+%span{ class: "label #{label_status}" }
+  = hook_log.response_status
diff --git a/app/views/shared/icons/_icon_history.svg b/app/views/shared/icons/_icon_history.svg
new file mode 100644
index 00000000000..41096da19c5
--- /dev/null
+++ b/app/views/shared/icons/_icon_history.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792"><path d="M1664 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5T305 1387q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5T1258 1258t109.5-163.5T1408 896t-40.5-198.5T1258 534t-163.5-109.5T896 384q-98 0-188 35.5T548 521l137 138q31 30 14 69-17 40-59 40H192q-26 0-45-19t-19-45V256q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5T896 128q156 0 298 61t245 164 164 245 61 298zm-640-288v448q0 14-9 23t-23 9H672q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224V608q0-14 9-23t23-9h64q14 0 23 9t9 23z"/></svg>
diff --git a/app/views/shared/icons/_icon_status_skipped.svg b/app/views/shared/icons/_icon_status_skipped.svg
index 1998dfef9ea..a9ba29c922c 100755
--- a/app/views/shared/icons/_icon_status_skipped.svg
+++ b/app/views/shared/icons/_icon_status_skipped.svg
@@ -1 +1 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7.69 7.7l-.905.905a.7.7 0 0 0 .99.99l1.85-1.85c.411-.412.411-1.078 0-1.49l-1.85-1.85a.7.7 0 0 0-.99.99l.905.905H4.48a.7.7 0 0 0 0 1.4h3.21z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M7 14A7 7 0 1 1 7 0a7 7 0 0 1 0 14z"/><path d="M7 13A6 6 0 1 0 7 1a6 6 0 0 0 0 12z" fill="#FFF" fill-rule="nonzero"/><path d="M6.415 7.04L4.579 5.203a.295.295 0 0 1 .004-.416l.349-.349a.29.29 0 0 1 .416-.004l2.214 2.214a.289.289 0 0 1 .019.021l.132.133c.11.11.108.291 0 .398L5.341 9.573a.282.282 0 0 1-.398 0l-.331-.331a.285.285 0 0 1 0-.399L6.415 7.04zm2.54 0L7.119 5.203a.295.295 0 0 1 .004-.416l.349-.349a.29.29 0 0 1 .416-.004l2.214 2.214a.289.289 0 0 1 .019.021l.132.133c.11.11.108.291 0 .398L7.881 9.573a.282.282 0 0 1-.398 0l-.331-.331a.285.285 0 0 1 0-.399L8.955 7.04z"/></svg>
diff --git a/app/views/shared/icons/_icon_status_skipped_borderless.svg b/app/views/shared/icons/_icon_status_skipped_borderless.svg
index fb3e930b3cb..3c8a26d7f4d 100644
--- a/app/views/shared/icons/_icon_status_skipped_borderless.svg
+++ b/app/views/shared/icons/_icon_status_skipped_borderless.svg
@@ -1 +1 @@
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.0846,12.1 L10.6623,13.5223 C10.2454306,13.9539168 10.2513924,14.6399933 10.6756996,15.0643004 C11.1000067,15.4886076 11.7860832,15.4945694 12.2177,15.0777 L15.1261,12.1693 C15.7708612,11.5230891 15.7708612,10.4769109 15.1261,9.8307 L12.2177,6.9223 C11.7860832,6.50543057 11.1000067,6.51139239 10.6756996,6.93569957 C10.2513924,7.36000675 10.2454306,8.04608322 10.6623,8.4777 L12.0846,9.9 L7.04,9.9 C6.43248678,9.9 5.94,10.3924868 5.94,11 C5.94,11.6075132 6.43248678,12.1 7.04,12.1 L12.0846,12.1 L12.0846,12.1 Z" id="Shape"></path></svg>
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M14.072 11.063l-2.82 2.82a.46.46 0 0 0-.001.652l.495.495a.457.457 0 0 0 .653-.001l3.7-3.7a.46.46 0 0 0 .001-.653l-.196-.196a.453.453 0 0 0-.03-.033l-3.479-3.479a.464.464 0 0 0-.654.007l-.548.548a.463.463 0 0 0-.007.654l2.886 2.886z"/><path d="M10.08 11.063l-2.819 2.82a.46.46 0 0 0-.002.652l.496.495a.457.457 0 0 0 .652-.001l3.7-3.7a.46.46 0 0 0 .002-.653l-.196-.196a.453.453 0 0 0-.03-.033l-3.48-3.479a.464.464 0 0 0-.653.007l-.548.548a.463.463 0 0 0-.007.654l2.886 2.886z"/></svg>
diff --git a/app/views/shared/icons/_mr_widget_empty_state.svg b/app/views/shared/icons/_mr_widget_empty_state.svg
new file mode 100644
index 00000000000..6a811893b2d
--- /dev/null
+++ b/app/views/shared/icons/_mr_widget_empty_state.svg
@@ -0,0 +1 @@
+<svg width="256" height="146" viewBox="0 0 256 146" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>illustration</title><defs><rect id="a" width="178.714" height="115.389" rx="10"/><mask id="d" x="0" y="0" width="178.714" height="115.389" fill="#fff"><use xlink:href="#a"/></mask><path d="M8.796 31.515c.395.047.8.072 1.207.072h23.065c5.536 0 10.003-4.475 10.003-9.994v-11.6C43.07 4.476 38.594 0 33.07 0H10.003C4.467 0 0 4.475 0 9.994v11.6c0 1.248.23 2.444.65 3.547H0v7.414c0 4.094 2.394 5.113 5.342 2.28l3.454-3.32z" id="b"/><mask id="e" x="0" y="0" width="43.071" height="36.437" fill="#fff"><use xlink:href="#b"/></mask><path d="M8.796 31.515c.395.047.8.072 1.207.072h23.065c5.536 0 10.003-4.475 10.003-9.994v-11.6C43.07 4.476 38.594 0 33.07 0H10.003C4.467 0 0 4.475 0 9.994v11.6c0 1.248.23 2.444.65 3.547H0v7.414c0 4.094 2.394 5.113 5.342 2.28l3.454-3.32z" id="c"/><mask id="f" x="0" y="0" width="43.071" height="36.437" fill="#fff"><use xlink:href="#c"/></mask></defs><g fill="none" fill-rule="evenodd"><g transform="translate(0 3.868)" fill="#F9F9F9"><rect x="19.286" width="77.143" height="14.182" rx="7.091"/><rect y="28.364" width="84.857" height="14.182" rx="7.091"/><rect x="133.714" y="42.546" width="122.143" height="14.182" rx="7.091"/><rect x="82.929" y="126.992" width="101.571" height="14.182" rx="7.091"/><rect x="42.429" y="99.273" width="101.571" height="14.182" rx="7.091"/><rect x="19.929" y="70.909" width="225" height="14.182" rx="7.091"/><path d="M98.37 14.182H13.488h13.81a7.098 7.098 0 0 1 7.094 7.09 7.09 7.09 0 0 1-7.094 7.092h-13.81 84.88-23.452a7.098 7.098 0 0 1-7.095-7.09 7.09 7.09 0 0 1 7.096-7.092h23.452zm162 42.545h-75.238 23.452a7.098 7.098 0 0 1 7.095 7.09 7.09 7.09 0 0 1-7.096 7.092h-23.452 75.237-23.453a7.098 7.098 0 0 1-7.095-7.09 7.09 7.09 0 0 1 7.095-7.093h23.452zM103.512 85.09H28.275h23.452a7.098 7.098 0 0 1 7.095 7.092 7.09 7.09 0 0 1-7.095 7.09H28.275h75.237H80.06a7.098 7.098 0 0 1-7.095-7.09 7.09 7.09 0 0 1 7.095-7.09h23.452zm48.215 28.365H76.49 90.3a7.098 7.098 0 0 1 7.093 7.09 7.09 7.09 0 0 1-7.094 7.092H76.49h75.237-33.096a7.098 7.098 0 0 1-7.094-7.09 7.09 7.09 0 0 1 7.095-7.092h33.097z"/></g><g transform="translate(38.57 12.248)"><use stroke="#EEE" mask="url(#d)" stroke-width="8" fill="#FFF" xlink:href="#a"/><path fill="#EEE" d="M2.57 18.694h174.215v2.58H2.57z"/><g transform="translate(21.857 38.678)"><rect fill="#B5A7DD" y=".645" width="3.857" height="1.289" rx=".645"/><rect fill="#EEE" x="9.643" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="46.286" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="25.071" y="14.182" width="9.643" height="2.579" rx="1.289"/><rect fill="#FC6D26" x="34.071" y="7.091" width="9.643" height="2.579" rx="1.289"/><rect fill="#FC6D26" opacity=".5" x="30.857" width="12.857" height="2.579" rx="1.289"/><rect fill="#EEE" x="9.643" y="14.182" width="12.857" height="2.579" rx="1.289"/><rect fill="#EEE" x="18.643" y="7.091" width="12.857" height="2.579" rx="1.289"/><rect fill="#FC6D26" x="21.857" width="6.429" height="2.579" rx="1.289"/><rect fill="#EEE" x="9.643" y="7.091" width="6.429" height="2.579" rx="1.289"/><rect fill="#B5A7DD" y="7.736" width="3.857" height="1.289" rx=".645"/><rect fill="#B5A7DD" y="14.826" width="3.857" height="1.289" rx=".645"/></g><g transform="translate(21.857 59.95)"><rect fill="#B5A7DD" y=".645" width="3.857" height="1.289" rx=".645"/><rect fill="#FC6D26" x="9.643" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="46.286" width="9.643" height="2.579" rx="1.289"/><rect fill="#FC6D26" opacity=".5" x="25.071" y="14.182" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="34.071" y="7.091" width="9.643" height="2.579" rx="1.289"/><rect fill="#FC6D26" x="30.857" width="12.857" height="2.579" rx="1.289"/><rect fill="#FC6D26" x="9.643" y="14.182" width="12.857" height="2.579" rx="1.289"/><rect fill="#EEE" x="18.643" y="7.091" width="12.857" height="2.579" rx="1.289"/><rect fill="#FC6D26" opacity=".5" x="21.857" width="6.429" height="2.579" rx="1.289"/><rect fill="#EEE" x="9.643" y="7.091" width="6.429" height="2.579" rx="1.289"/><rect fill="#B5A7DD" y="7.736" width="3.857" height="1.289" rx=".645"/><rect fill="#B5A7DD" y="14.826" width="3.857" height="1.289" rx=".645"/></g><g transform="translate(21.857 81.223)"><rect fill="#B5A7DD" y=".645" width="3.857" height="1.289" rx=".645"/><rect fill="#EEE" x="9.643" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="46.286" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="25.071" y="14.182" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="34.071" y="7.091" width="9.643" height="2.579" rx="1.289"/><rect fill="#FC6D26" x="30.857" width="12.857" height="2.579" rx="1.289"/><rect fill="#EEE" x="9.643" y="14.182" width="12.857" height="2.579" rx="1.289"/><rect fill="#EEE" x="18.643" y="7.091" width="12.857" height="2.579" rx="1.289"/><rect fill="#FC6D26" opacity=".5" x="21.857" width="6.429" height="2.579" rx="1.289"/><rect fill="#EEE" x="9.643" y="7.091" width="6.429" height="2.579" rx="1.289"/><rect fill="#B5A7DD" y="7.736" width="3.857" height="1.289" rx=".645"/><rect fill="#B5A7DD" y="14.826" width="3.857" height="1.289" rx=".645"/></g><g transform="translate(100.93 38.033)"><rect fill="#FDE5D8" y=".645" width="3.857" height="1.289" rx=".645"/><rect fill="#EEE" x="9.643" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="46.286" width="9.643" height="2.579" rx="1.289"/><rect fill="#6B4FBB" opacity=".5" x="25.071" y="14.182" width="9.643" height="2.579" rx="1.289"/><rect fill="#6B4FBB" x="34.071" y="7.091" width="9.643" height="2.579" rx="1.289"/><rect fill="#6B4FBB" opacity=".5" x="30.857" width="12.857" height="2.579" rx="1.289"/><rect fill="#6B4FBB" x="9.643" y="14.182" width="12.857" height="2.579" rx="1.289"/><rect fill="#EEE" x="18.643" y="7.091" width="12.857" height="2.579" rx="1.289"/><rect fill="#6B4FBB" x="21.857" width="6.429" height="2.579" rx="1.289"/><rect fill="#EEE" x="9.643" y="7.091" width="6.429" height="2.579" rx="1.289"/><rect fill="#FDE5D8" y="7.736" width="3.857" height="1.289" rx=".645"/><rect fill="#FDE5D8" y="14.826" width="3.857" height="1.289" rx=".645"/><rect fill="#FDE5D8" y="21.917" width="3.857" height="1.289" rx=".645"/><rect fill="#EEE" x="9.643" y="21.273" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="37.286" y="14.182" width="9.643" height="2.579" rx="1.289"/><rect fill="#6B4FBB" opacity=".5" x="25.071" y="35.455" width="9.643" height="2.579" rx="1.289"/><rect fill="#6B4FBB" x="18.643" y="28.364" width="9.643" height="2.579" rx="1.289"/><rect fill="#6B4FBB" x="30.857" y="21.273" width="12.857" height="2.579" rx="1.289"/><rect fill="#EEE" x="9.643" y="35.455" width="12.857" height="2.579" rx="1.289"/><rect fill="#EEE" x="21.857" y="21.273" width="6.429" height="2.579" rx="1.289"/><rect fill="#EEE" x="9.643" y="28.364" width="6.429" height="2.579" rx="1.289"/><rect fill="#EEE" x="30.857" y="28.364" width="6.429" height="2.579" rx="1.289"/><rect fill="#EEE" x="39.857" y="28.364" width="6.429" height="2.579" rx="1.289"/><rect fill="#EEE" x="49.5" y="14.182" width="6.429" height="2.579" rx="1.289"/><rect fill="#FDE5D8" y="29.008" width="3.857" height="1.289" rx=".645"/><rect fill="#FDE5D8" y="36.099" width="3.857" height="1.289" rx=".645"/><rect fill="#FDE5D8" y="43.19" width="3.857" height="1.289" rx=".645"/><rect fill="#6B4FBB" x="9.643" y="42.546" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="25.071" y="56.727" width="9.643" height="2.579" rx="1.289"/><rect fill="#6B4FBB" opacity=".5" x="34.071" y="49.636" width="9.643" height="2.579" rx="1.289"/><rect fill="#EEE" x="9.643" y="56.727" width="12.857" height="2.579" rx="1.289"/><rect fill="#6B4FBB" x="18.643" y="49.636" width="12.857" height="2.579" rx="1.289"/><rect fill="#EEE" x="21.857" y="42.546" width="6.429" height="2.579" rx="1.289"/><rect fill="#EEE" x="46.286" y="49.636" width="6.429" height="2.579" rx="1.289"/><rect fill="#EEE" x="9.643" y="49.636" width="6.429" height="2.579" rx="1.289"/><rect fill="#FDE5D8" y="50.281" width="3.857" height="1.289" rx=".645"/><rect fill="#FDE5D8" y="57.372" width="3.857" height="1.289" rx=".645"/></g></g><g transform="translate(196.07)"><use stroke="#FDE5D8" mask="url(#e)" stroke-width="8" fill="#FFF" xlink:href="#b"/><rect fill="#FDB692" x="9" y="9.025" width="18.643" height="1.934" rx=".967"/><rect fill="#FDB692" x="9" y="14.826" width="25.071" height="1.934" rx=".967"/><rect fill="#FDB692" x="9" y="20.628" width="18.643" height="1.934" rx=".967"/></g><g transform="translate(189 41.256)"><ellipse stroke="#FC6D26" stroke-width="3" fill="#FFF7F4" cx="10.286" cy="9.669" rx="9.643" ry="9.669"/><path d="M.023 9.002a8.352 8.352 0 0 0 7.94-4.308M9 .644c0-.21-.008-.416-.023-.62" stroke="#FC6D26" stroke-width="2"/><path d="M5.045 2.008A10.266 10.266 0 0 0 13.5 6.446c2.112 0 4.076-.638 5.71-1.733" stroke="#FC6D26" stroke-width="2"/><ellipse fill="#FC6D26" cx="6.75" cy="11.281" rx=".964" ry=".967"/><ellipse fill="#FC6D26" cx="13.821" cy="11.281" rx=".964" ry=".967"/></g><g transform="translate(46.93 96.05)"><ellipse stroke="#6B4FBB" stroke-width="3" fill="#F4F1FA" cx="9.643" cy="10.314" rx="9.643" ry="9.669"/><path d="M12.86 4.51h-.005L11.25 2.58 9.645 4.51H9.64L8.036 2.58 6.43 4.51h-.002L4.82 2.58 3.215 4.512h-1.75A9.646 9.646 0 0 1 9.642 0c3.447 0 6.47 1.8 8.176 4.508h-1.75l-1.605-1.93L12.86 4.51z" fill="#6B4FBB"/><ellipse fill="#6B4FBB" cx="6.107" cy="11.281" rx=".964" ry=".967"/><ellipse fill="#6B4FBB" cx="13.179" cy="11.281" rx=".964" ry=".967"/></g><g transform="matrix(-1 0 0 1 56.57 54.794)"><use stroke="#E2DCF2" mask="url(#f)" stroke-width="8" fill="#FFF" xlink:href="#c"/><rect fill="#6B4FBB" opacity=".5" x="15.429" y="9.025" width="18.643" height="1.934" rx=".967"/><rect fill="#6B4FBB" opacity=".5" x="21.857" y="14.826" width="12.214" height="1.934" rx=".967"/><rect fill="#6B4FBB" opacity=".5" x="21.857" y="20.628" width="12.214" height="1.934" rx=".967"/></g></g></svg>
diff --git a/app/views/shared/icons/_scroll_down.svg b/app/views/shared/icons/_scroll_down.svg
index acf22ac9314..1d22870ec09 100644
--- a/app/views/shared/icons/_scroll_down.svg
+++ b/app/views/shared/icons/_scroll_down.svg
@@ -1,3 +1,5 @@
-<svg width="16" height="33" class="gitlab-icon-scroll-down" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#ffffff" d="M1.385 5.534v12.47a4.145 4.145 0 0 0 4.144 4.15h4.942a4.151 4.151 0 0 0 4.144-4.15V5.535a4.145 4.145 0 0 0-4.144-4.15H5.53a4.151 4.151 0 0 0-4.144 4.15zM8.88 30.27v-4.351a.688.688 0 0 0-.69-.688.687.687 0 0 0-.69.688v4.334l-1.345-1.346a.69.69 0 0 0-.976.976l2.526 2.526a.685.685 0 0 0 .494.2.685.685 0 0 0 .493-.2l2.526-2.526a.69.69 0 1 0-.976-.976L8.88 30.27zM0 5.534A5.536 5.536 0 0 1 5.529 0h4.942A5.53 5.53 0 0 1 16 5.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 18.005V5.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0V6.544z" fill-rule="evenodd"/>
+<svg width="12" height="16" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+  <path class="first-triangle" d="M1.048 14.155a.508.508 0 0 0-.32.105c-.091.07-.136.154-.136.25v.71c0 .095.045.178.135.249.09.07.197.105.321.105h10.043c.124 0 .23-.035.321-.105.09-.07.136-.154.136-.25v-.71c0-.095-.045-.178-.136-.249a.508.508 0 0 0-.32-.105"/>
+  <path class="second-triangle" d="M.687 8.027c-.09-.087-.122-.16-.093-.22.028-.06.104-.09.228-.09h10.5c.123 0 .2.03.228.09.029.06-.002.133-.093.22L6.393 12.91a.458.458 0 0 1-.136.089h-.37a.626.626 0 0 1-.136-.09"/>
+  <path class="third-triangle" d="M.687 1.027C.597.94.565.867.594.807c.028-.06.104-.09.228-.09h10.5c.123 0 .2.03.228.09.029.06-.002.133-.093.22L6.393 5.91A.458.458 0 0 1 6.257 6h-.37a.626.626 0 0 1-.136-.09"/>
 </svg>
diff --git a/app/views/shared/icons/_scroll_down_hover_active.svg b/app/views/shared/icons/_scroll_down_hover_active.svg
deleted file mode 100644
index 262576acf54..00000000000
--- a/app/views/shared/icons/_scroll_down_hover_active.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="33" class="gitlab-icon-scroll-down-hover" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#ffffff" d="M8.88 30.27v-4.351a.688.688 0 0 0-.69-.688.687.687 0 0 0-.69.688v4.334l-1.345-1.346a.69.69 0 0 0-.976.976l2.526 2.526a.685.685 0 0 0 .494.2.685.685 0 0 0 .493-.2l2.526-2.526a.69.69 0 1 0-.976-.976L8.88 30.27zM0 5.534A5.536 5.536 0 0 1 5.529 0h4.942A5.53 5.53 0 0 1 16 5.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 18.005V5.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0V6.544z" fill-rule="evenodd"/>
-</svg>
diff --git a/app/views/shared/icons/_scroll_up.svg b/app/views/shared/icons/_scroll_up.svg
index f11288fd59c..70b1e4d9c91 100644
--- a/app/views/shared/icons/_scroll_up.svg
+++ b/app/views/shared/icons/_scroll_up.svg
@@ -1,3 +1 @@
-<svg width="16" height="33" class="gitlab-icon-scroll-up" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#ffffff" d="M1.385 14.534v12.47a4.145 4.145 0 0 0 4.144 4.15h4.942a4.151 4.151 0 0 0 4.144-4.15v-12.47a4.145 4.145 0 0 0-4.144-4.15H5.53a4.151 4.151 0 0 0-4.144 4.15zM8.88 2.609V6.96a.688.688 0 0 1-.69.688.687.687 0 0 1-.69-.688V2.627L6.155 3.972a.69.69 0 0 1-.976-.976L7.705.47a.685.685 0 0 1 .494-.2.685.685 0 0 1 .493.2l2.526 2.526a.69.69 0 1 1-.976.976L8.88 2.609zM0 14.534A5.536 5.536 0 0 1 5.529 9h4.942A5.53 5.53 0 0 1 16 14.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 27.005V14.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0v-2.143z" fill-rule="evenodd"/>
-</svg>
+<svg width="12" height="16" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg"><path d="M1.048 1.845a.508.508 0 0 1-.32-.105c-.091-.07-.136-.154-.136-.25V.78c0-.095.045-.178.135-.249a.508.508 0 0 1 .321-.105h10.043c.124 0 .23.035.321.105.09.07.136.154.136.25v.71c0 .095-.045.178-.136.249a.508.508 0 0 1-.32.105"/><path d="M.687 7.973c-.09.087-.122.16-.093.22.028.06.104.09.228.09h10.5c.123 0 .2-.03.228-.09.029-.06-.002-.133-.093-.22L6.393 3.09A.458.458 0 0 0 6.257 3h-.37a.626.626 0 0 0-.136.09"/><path d="M.687 14.973c-.09.087-.122.16-.093.22.028.06.104.09.228.09h10.5c.123 0 .2-.03.228-.09.029-.06-.002-.133-.093-.22L6.393 10.09A.458.458 0 0 0 6.257 10h-.37a.626.626 0 0 0-.136.09"/></svg>
diff --git a/app/views/shared/icons/_scroll_up_hover_active.svg b/app/views/shared/icons/_scroll_up_hover_active.svg
deleted file mode 100644
index 4658dbb1bb7..00000000000
--- a/app/views/shared/icons/_scroll_up_hover_active.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="33" class="gitlab-icon-scroll-up-hover" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#ffffff" d="M8.88 2.646l1.362 1.362a.69.69 0 0 0 .976-.976L8.692.507A.685.685 0 0 0 8.2.306a.685.685 0 0 0-.494.2L5.179 3.033a.69.69 0 1 0 .976.976L7.5 2.663v4.179c0 .38.306.688.69.688.381 0 .69-.306.69-.688V2.646zM0 14.534A5.536 5.536 0 0 1 5.529 9h4.942A5.53 5.53 0 0 1 16 14.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 27.005V14.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0v-2.143z" fill-rule="evenodd"/>
-</svg>
diff --git a/app/views/shared/issuable/_assignees.html.haml b/app/views/shared/issuable/_assignees.html.haml
new file mode 100644
index 00000000000..217af7c9fac
--- /dev/null
+++ b/app/views/shared/issuable/_assignees.html.haml
@@ -0,0 +1,14 @@
+- max_render = 3
+- max = [max_render, issue.assignees.length].min
+
+- issue.assignees.take(max).each do |assignee|
+  = link_to_member(@project, assignee, name: false, title: "Assigned to :name")
+
+- if issue.assignees.length > max_render
+  - counter = issue.assignees.length - max_render
+
+  %span{ class: 'avatar-counter has-tooltip', data: { container: 'body', placement: 'bottom', 'line-type' => 'old', 'original-title' => "+#{counter} more assignees" } }
+    - if counter < 99
+      = "+#{counter}"
+    - else
+      99+
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index 1a12f110945..6cd03f028a9 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -71,7 +71,6 @@
       = render 'shared/labels_row', labels: @labels
 
 :javascript
-  new UsersSelect();
   new LabelsSelect();
   new MilestoneSelect();
   new IssueStatusSelect();
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 17107f55a2d..7748351b333 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -17,7 +17,7 @@
   = render 'shared/issuable/form/template_selector', issuable: issuable
   = render 'shared/issuable/form/title', issuable: issuable, form: form, has_wip_commits: commits && commits.detect(&:work_in_progress?)
 
-= render 'shared/issuable/form/description', issuable: issuable, form: form
+= render 'shared/issuable/form/description', issuable: issuable, form: form, project: project
 
 - if issuable.respond_to?(:confidential)
   .form-group
diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml
index 93c7fa0c7d6..1cf662e29c4 100644
--- a/app/views/shared/issuable/_label_dropdown.html.haml
+++ b/app/views/shared/issuable/_label_dropdown.html.haml
@@ -9,7 +9,7 @@
 - selected = local_assigns.fetch(:selected, nil)
 - selected_toggle = local_assigns.fetch(:selected_toggle, nil)
 - dropdown_title = local_assigns.fetch(:dropdown_title, "Filter by label")
-- dropdown_data = {toggle: 'dropdown', field_name: "label_name[]", show_no: "true", show_any: "true", namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path), labels: labels_filter_path, default_label: "Labels"}
+- dropdown_data = {toggle: 'dropdown', field_name: "label_name[]", show_no: "true", show_any: "true", namespace_path: @project.try(:namespace).try(:full_path), project_path: @project.try(:path), labels: labels_filter_path, default_label: "Labels"}
 - dropdown_data.merge!(data_options)
 - classes << 'js-extra-options' if extra_options
 - classes << 'js-filter-submit' if filter_submit
diff --git a/app/views/shared/issuable/_milestone_dropdown.html.haml b/app/views/shared/issuable/_milestone_dropdown.html.haml
index f0d50828e2a..6750921338a 100644
--- a/app/views/shared/issuable/_milestone_dropdown.html.haml
+++ b/app/views/shared/issuable/_milestone_dropdown.html.haml
@@ -6,7 +6,7 @@
 - if selected.present? || params[:milestone_title].present?
   = hidden_field_tag(name, name == :milestone_title ? selected_text : selected.id)
 = dropdown_tag(milestone_dropdown_label(selected_text), options: { title: dropdown_title, toggle_class: "js-milestone-select js-filter-submit #{extra_class}", filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone",
-  placeholder: "Search milestones", footer_content: project.present?, data: { show_no: true, show_menu_above: show_menu_above, show_any: show_any, show_upcoming: show_upcoming, show_started: show_started, field_name: name, selected: selected.try(:title), project_id: project.try(:id), milestones: milestones_filter_dropdown_path, default_label: "Milestone" } }) do
+  placeholder: "Search milestones", footer_content: project.present?, data: { show_no: true, show_menu_above: show_menu_above, show_any: show_any, show_upcoming: show_upcoming, show_started: show_started, field_name: name, selected: selected_text, project_id: project.try(:id), milestones: milestones_filter_dropdown_path, default_label: "Milestone" } }) do
   - if project
     %ul.dropdown-footer-list
       - if can? current_user, :admin_milestone, project
diff --git a/app/views/shared/issuable/_participants.html.haml b/app/views/shared/issuable/_participants.html.haml
index 171da899937..db407363a09 100644
--- a/app/views/shared/issuable/_participants.html.haml
+++ b/app/views/shared/issuable/_participants.html.haml
@@ -12,9 +12,9 @@
     - participants.each do |participant|
       .participants-author.js-participants-author
         = link_to_member(@project, participant, name: false, size: 24)
-    - if participants_extra > 0
-      .participants-more
-        %a.js-participants-more{ href: "#", data: { original_text: "+ #{participants_size - 7} more", less_text: "- show less" } }
-          + #{participants_extra} more
+  - if participants_extra > 0
+    .hide-collapsed.participants-more
+      %a.js-participants-more{ href: "#", data: { original_text: "+ #{participants_size - 7} more", less_text: "- show less" } }
+        + #{participants_extra} more
 :javascript
   IssuableContext.prototype.PARTICIPANTS_ROW_COUNT = #{participants_row};
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index b6fce5e3cd4..a9a4792faae 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -13,13 +13,13 @@
       .issues-other-filters.filtered-search-wrapper
         .filtered-search-box
           - if type != :boards_modal && type != :boards
-            = dropdown_tag(content_tag(:i, '', class: 'fa fa-history'),
+            = dropdown_tag(custom_icon('icon_history'),
               options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
               toggle_class: "filtered-search-history-dropdown-toggle-button",
               dropdown_class: "filtered-search-history-dropdown",
               content_class: "filtered-search-history-dropdown-content",
               title: "Recent searches" }) do
-              .js-filtered-search-history-dropdown
+              .js-filtered-search-history-dropdown{ data: { project_full_path: @project.full_path } }
           .filtered-search-box-input-container
             .scroll-container
               %ul.tokens-container.list-unstyled
@@ -45,32 +45,29 @@
                       {{hint}}
                     %span.js-filter-tag.dropdown-light-content
                       {{tag}}
-            #js-dropdown-author.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'pencil', hint: 'author', tag: '@author' } }
+            #js-dropdown-author.filtered-search-input-dropdown-menu.dropdown-menu
+              - if current_user
+                %ul{ data: { dropdown: true } }
+                  = render 'shared/issuable/user_dropdown_item',
+                    user: current_user
               %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-                %li.filter-dropdown-item
-                  %button.btn.btn-link.dropdown-user
-                    %img.avatar{ alt: '{{name}}\'s avatar', width: '30', data: { src: '{{avatar_url}}' } }
-                    .dropdown-user-details
-                      %span
-                        {{name}}
-                      %span.dropdown-light-content
-                        @{{username}}
-            #js-dropdown-assignee.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'user', hint: 'assignee', tag: '@assignee' } }
+                = render 'shared/issuable/user_dropdown_item',
+                  user: User.new(username: '{{username}}', name: '{{name}}'),
+                  avatar: { lazy: true, url: '{{avatar_url}}' }
+            #js-dropdown-assignee.filtered-search-input-dropdown-menu.dropdown-menu
               %ul{ data: { dropdown: true } }
                 %li.filter-dropdown-item{ data: { value: 'none' } }
                   %button.btn.btn-link
                     No Assignee
                 %li.divider
+                - if current_user
+                  = render 'shared/issuable/user_dropdown_item',
+                    user: current_user
               %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-                %li.filter-dropdown-item
-                  %button.btn.btn-link.dropdown-user
-                    %img.avatar{ alt: '{{name}}\'s avatar', width: '30', data: { src: '{{avatar_url}}' } }
-                    .dropdown-user-details
-                      %span
-                        {{name}}
-                      %span.dropdown-light-content
-                        @{{username}}
-            #js-dropdown-milestone.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'clock-o', hint: 'milestone', tag: '%milestone' } }
+                = render 'shared/issuable/user_dropdown_item',
+                  user: User.new(username: '{{username}}', name: '{{name}}'),
+                  avatar: { lazy: true, url: '{{avatar_url}}' }
+            #js-dropdown-milestone.filtered-search-input-dropdown-menu.dropdown-menu
               %ul{ data: { dropdown: true } }
                 %li.filter-dropdown-item{ data: { value: 'none' } }
                   %button.btn.btn-link
@@ -86,7 +83,7 @@
                 %li.filter-dropdown-item
                   %button.btn.btn-link.js-data-value
                     {{title}}
-            #js-dropdown-label.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'tag', hint: 'label', tag: '~label', type: 'array' } }
+            #js-dropdown-label.filtered-search-input-dropdown-menu.dropdown-menu
               %ul{ data: { dropdown: true } }
                 %li.filter-dropdown-item{ data: { value: 'none' } }
                   %button.btn.btn-link
@@ -124,8 +121,13 @@
                 %li
                   %a{ href: "#", data: { id: "close" } } Closed
           .filter-item.inline
+            - if type == :issues
+              - field_name = "update[assignee_ids][]"
+            - else
+              - field_name = "update[assignee_id]"
+
             = dropdown_tag("Assignee", options: { toggle_class: "js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: "Assign to", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
-              placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: "update[assignee_id]", default_label: "Assignee" } })
+              placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: field_name } })
           .filter-item.inline
             = dropdown_tag("Milestone", options: { title: "Assign milestone", toggle_class: 'js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update', filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: "Search milestones", data: { show_no: true, field_name: "update[milestone_id]", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), use_id: true, default_label: "Milestone" } })
           .filter-item.inline.labels-filter
@@ -145,7 +147,6 @@
 
 - unless type === :boards_modal
   :javascript
-    new UsersSelect();
     new LabelsSelect();
     new MilestoneSelect();
     new IssueStatusSelect();
@@ -153,7 +154,8 @@
 
     $(document).off('page:restore').on('page:restore', function (event) {
       if (gl.FilteredSearchManager) {
-        new gl.FilteredSearchManager();
+        const filteredSearchManager = new gl.FilteredSearchManager();
+        filteredSearchManager.setup();
       }
       Issuable.init();
       new gl.IssuableBulkActions({
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index bc638e994f3..e49bd5ebb13 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -1,10 +1,10 @@
 - todo = issuable_todo(issuable)
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('issuable')
+  = page_specific_javascript_bundle_tag('sidebar')
 
-%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "102", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
-  .issuable-sidebar
+%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+  .issuable-sidebar{ data: { endpoint: "#{issuable_json_path(issuable)}" } }
     - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
     .block.issuable-sidebar-header
       - if current_user
@@ -20,36 +20,7 @@
         .block.todo.hide-expanded
           = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable, is_collapsed: true
       .block.assignee
-        .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) }
-          - if issuable.assignee
-            = link_to_member(@project, issuable.assignee, size: 24)
-          - else
-            = icon('user', 'aria-hidden': 'true')
-        .title.hide-collapsed
-          Assignee
-          = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
-          - if can_edit_issuable
-            = link_to 'Edit', '#', class: 'edit-link pull-right'
-        .value.hide-collapsed
-          - if issuable.assignee
-            = link_to_member(@project, issuable.assignee, size: 32, extra_class: 'bold') do
-              - if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee)
-                %span.pull-right.cannot-be-merged{ data: { toggle: 'tooltip', placement: 'left' }, title: 'Not allowed to merge' }
-                  = icon('exclamation-triangle', 'aria-hidden': 'true')
-              %span.username
-                = issuable.assignee.to_reference
-          - else
-            %span.assign-yourself.no-value
-              No assignee
-              - if can_edit_issuable
-                \-
-                %a.js-assign-yourself{ href: '#' }
-                  assign yourself
-
-        .selectbox.hide-collapsed
-          = f.hidden_field 'assignee_id', value: issuable.assignee_id, id: 'issue_assignee_id'
-          = dropdown_tag('Select assignee', options: { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_id]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true, null_user_default: true, selected: issuable.assignee_id } })
-
+        = render "shared/issuable/sidebar_assignees", issuable: issuable, can_edit_issuable: can_edit_issuable
       .block.milestone
         .sidebar-collapsed-icon
           = icon('clock-o', 'aria-hidden': 'true')
@@ -72,14 +43,13 @@
 
         .selectbox.hide-collapsed
           = f.hidden_field 'milestone_id', value: issuable.milestone_id, id: nil
-          = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true }})
+          = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true, default_no: true, selected: (issuable.milestone.name if issuable.milestone), null_default: true }})
       - if issuable.has_attribute?(:time_estimate)
         #issuable-time-tracker.block
-          %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent', 'docs-url' => help_page_path('workflow/time_tracking.md') }
-            // Fallback while content is loading
-            .title.hide-collapsed
-              Time tracking
-              = icon('spinner spin', 'aria-hidden': 'true')
+          // Fallback while content is loading
+          .title.hide-collapsed
+            Time tracking
+            = icon('spinner spin', 'aria-hidden': 'true')
       - if issuable.has_attribute?(:due_date)
         .block.due_date
           .sidebar-collapsed-icon
@@ -169,8 +139,13 @@
           = clipboard_button(text: project_ref, title: "Copy reference to clipboard", placement: "left")
 
     :javascript
-      gl.IssuableResource = new gl.SubbableResource('#{issuable_json_path(issuable)}');
-      new gl.IssuableTimeTracking("#{escape_javascript(serialize_issuable(issuable))}");
+      gl.sidebarOptions = {
+        endpoint: "#{issuable_json_path(issuable)}?basic=true",
+        editable: #{can_edit_issuable ? true : false},
+        currentUser: #{current_user.to_json(only: [:username, :id, :name], methods: :avatar_url)},
+        rootPath: "#{root_path}"
+      };
+
       new MilestoneSelect('{"full_path":"#{@project.full_path}"}');
       new LabelsSelect();
       new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
new file mode 100644
index 00000000000..bcfa1dc826e
--- /dev/null
+++ b/app/views/shared/issuable/_sidebar_assignees.html.haml
@@ -0,0 +1,52 @@
+- if issuable.is_a?(Issue)
+  #js-vue-sidebar-assignees{ data: { field: "#{issuable.to_ability_name}[assignee_ids]" } }
+    .title.hide-collapsed
+      Assignee
+      = icon('spinner spin')
+- else
+  .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) }
+    - if issuable.assignee
+      = link_to_member(@project, issuable.assignee, size: 24)
+    - else
+      = icon('user', 'aria-hidden': 'true')
+  .title.hide-collapsed
+    Assignee
+    = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
+    - if can_edit_issuable
+      = link_to 'Edit', '#', class: 'edit-link pull-right'
+  .value.hide-collapsed
+    - if issuable.assignee
+      = link_to_member(@project, issuable.assignee, size: 32, extra_class: 'bold') do
+        - if !issuable.can_be_merged_by?(issuable.assignee)
+          %span.pull-right.cannot-be-merged{ data: { toggle: 'tooltip', placement: 'left' }, title: 'Not allowed to merge' }
+            = icon('exclamation-triangle', 'aria-hidden': 'true')
+        %span.username
+          = issuable.assignee.to_reference
+    - else
+      %span.assign-yourself.no-value
+        No assignee
+        - if can_edit_issuable
+          \-
+          %a.js-assign-yourself{ href: '#' }
+            assign yourself
+
+.selectbox.hide-collapsed
+  - issuable.assignees.each do |assignee|
+    = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", assignee.id, id: nil, data: { avatar_url: assignee.avatar_url, name: assignee.name, username: assignee.username }
+
+  - options = { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_ids][]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true } }
+
+  - title = 'Select assignee'
+
+  - if issuable.is_a?(Issue)
+    - unless issuable.assignees.any?
+      = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", 0, id: nil
+    - options[:toggle_class] += ' js-multiselect js-save-user-data'
+    - data = { field_name: "#{issuable.to_ability_name}[assignee_ids][]" }
+    - data[:multi_select] = true
+    - data['dropdown-title'] = title
+    - data['dropdown-header'] = 'Assignee'
+    - data['max-select'] = 1
+    - options[:data].merge!(data)
+
+  = dropdown_tag(title, options: options)
diff --git a/app/views/shared/issuable/_user_dropdown_item.html.haml b/app/views/shared/issuable/_user_dropdown_item.html.haml
new file mode 100644
index 00000000000..a82c01c6dc2
--- /dev/null
+++ b/app/views/shared/issuable/_user_dropdown_item.html.haml
@@ -0,0 +1,11 @@
+- user = local_assigns.fetch(:user)
+- avatar = local_assigns.fetch(:avatar, { })
+
+%li.filter-dropdown-item{ class: ('js-current-user' if user == current_user) }
+  %button.btn.btn-link.dropdown-user{ type: :button }
+    = user_avatar_without_link(user: user, lazy: avatar[:lazy], url: avatar[:url], size: 30)
+    .dropdown-user-details
+      %span
+        = user.name
+      %span.dropdown-light-content
+        = user.to_reference
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
index 2793e7bcff4..203d2adc8db 100644
--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -10,12 +10,16 @@
     = form.label :source_branch, class: 'control-label'
     .col-sm-10
       .issuable-form-select-holder
-        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2 span2', disabled: true })
+        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2 ref-name', disabled: true })
 .form-group
   = form.label :target_branch, class: 'control-label'
-  .col-sm-10
+  .col-sm-10.target-branch-select-dropdown-container
     .issuable-form-select-holder
-      = form.select(:target_branch, issuable.target_branches, { include_blank: true }, { class: 'target_branch select2 span2', disabled: issuable.new_record?, data: { placeholder: "Select branch" }})
+      = form.select(:target_branch, issuable.target_branches,
+        { include_blank: true },
+        { class: 'target_branch js-target-branch-select ref-name',
+          disabled: issuable.new_record?,
+          data: { placeholder: "Select branch" }})
     - if issuable.new_record?
       &nbsp;
       = link_to 'Change branches', mr_change_branches_path(issuable)
diff --git a/app/views/shared/issuable/form/_description.html.haml b/app/views/shared/issuable/form/_description.html.haml
index dbace9ce401..7ef0ae96be2 100644
--- a/app/views/shared/issuable/form/_description.html.haml
+++ b/app/views/shared/issuable/form/_description.html.haml
@@ -1,15 +1,22 @@
+- project = local_assigns.fetch(:project)
 - issuable = local_assigns.fetch(:issuable)
 - form = local_assigns.fetch(:form)
+- supports_slash_commands = issuable.new_record?
+
+- if supports_slash_commands
+  - preview_url = preview_markdown_path(project, slash_commands_target_type: issuable.class.name)
+- else
+  - preview_url = preview_markdown_path(project)
 
 .form-group.detail-page-description
   = form.label :description, 'Description', class: 'control-label'
   .col-sm-10
 
-    = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
+    = render layout: 'projects/md_preview', locals: { url: preview_url, referenced_users: true } do
       = render 'projects/zen', f: form, attr: :description,
                                classes: 'note-textarea',
                                placeholder: "Write a comment or drag your files here...",
-                               supports_slash_commands: !issuable.persisted?
-      = render 'projects/notes/hints', supports_slash_commands: !issuable.persisted?
+                               supports_slash_commands: supports_slash_commands
+      = render 'shared/notes/hints', supports_slash_commands: supports_slash_commands
       .clearfix
       .error-alert
diff --git a/app/views/shared/issuable/form/_issue_assignee.html.haml b/app/views/shared/issuable/form/_issue_assignee.html.haml
new file mode 100644
index 00000000000..66091d95a91
--- /dev/null
+++ b/app/views/shared/issuable/form/_issue_assignee.html.haml
@@ -0,0 +1,31 @@
+- issue = issuable
+- assignees = issue.assignees
+.block.assignee
+  .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee_list) }
+    - if assignees.any?
+      - assignees.each do |assignee|
+        = link_to_member(@project, assignee, size: 24)
+    - else
+      = icon('user', 'aria-hidden': 'true')
+  .title.hide-collapsed
+    Assignee
+    = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
+    - if can_edit_issuable
+      = link_to 'Edit', '#', class: 'edit-link pull-right'
+  .value.hide-collapsed
+    - if assignees.any?
+      - assignees.each do |assignee|
+        = link_to_member(@project, assignee, size: 32, extra_class: 'bold') do
+          %span.username
+            = assignee.to_reference
+    - else
+      %span.assign-yourself.no-value
+        No assignee
+        - if can_edit_issuable
+          \-
+          %a.js-assign-yourself{ href: '#' }
+            assign yourself
+
+  .selectbox.hide-collapsed
+    = f.hidden_field 'assignee_ids', value: issuable.assignee_ids, id: 'issue_assignee_ids'
+    = dropdown_tag('Select assignee', options: { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_id]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true } })
diff --git a/app/views/shared/issuable/form/_merge_params.html.haml b/app/views/shared/issuable/form/_merge_params.html.haml
index 03309722326..271150ed318 100644
--- a/app/views/shared/issuable/form/_merge_params.html.haml
+++ b/app/views/shared/issuable/form/_merge_params.html.haml
@@ -10,7 +10,8 @@
   .col-sm-10.col-sm-offset-2
     - if issuable.can_remove_source_branch?(current_user)
       .checkbox
+        - initial_checkbox_value = issuable.merge_params.key?('force_remove_source_branch') ? issuable.force_remove_source_branch? : true
         = label_tag 'merge_request[force_remove_source_branch]' do
           = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil
-          = check_box_tag 'merge_request[force_remove_source_branch]', '1', issuable.force_remove_source_branch?
+          = check_box_tag 'merge_request[force_remove_source_branch]', '1', initial_checkbox_value
           Remove source branch when merge request is accepted.
diff --git a/app/views/shared/issuable/form/_merge_request_assignee.html.haml b/app/views/shared/issuable/form/_merge_request_assignee.html.haml
new file mode 100644
index 00000000000..18011d528a0
--- /dev/null
+++ b/app/views/shared/issuable/form/_merge_request_assignee.html.haml
@@ -0,0 +1,31 @@
+- merge_request = issuable
+.block.assignee
+  .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (merge_request.assignee.name if merge_request.assignee) }
+    - if merge_request.assignee
+      = link_to_member(@project, merge_request.assignee, size: 24)
+    - else
+      = icon('user', 'aria-hidden': 'true')
+  .title.hide-collapsed
+    Assignee
+    = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
+    - if can_edit_issuable
+      = link_to 'Edit', '#', class: 'edit-link pull-right'
+  .value.hide-collapsed
+    - if merge_request.assignee
+      = link_to_member(@project, merge_request.assignee, size: 32, extra_class: 'bold') do
+        - unless merge_request.can_be_merged_by?(merge_request.assignee)
+          %span.pull-right.cannot-be-merged{ data: { toggle: 'tooltip', placement: 'left' }, title: 'Not allowed to merge' }
+            = icon('exclamation-triangle', 'aria-hidden': 'true')
+        %span.username
+          = merge_request.assignee.to_reference
+    - else
+      %span.assign-yourself.no-value
+        No assignee
+        - if can_edit_issuable
+          \-
+          %a.js-assign-yourself{ href: '#' }
+            assign yourself
+
+  .selectbox.hide-collapsed
+    = f.hidden_field 'assignee_id', value: merge_request.assignee_id, id: 'issue_assignee_id'
+    = dropdown_tag('Select assignee', options: { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: @project&.id, author_id: merge_request.author_id, field_name: 'merge_request[assignee_id]', issue_update: issuable_json_path(merge_request), ability_name: 'merge_request', null_user: true } })
diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml
index 9dbfedb84f1..1608bd59cf1 100644
--- a/app/views/shared/issuable/form/_metadata.html.haml
+++ b/app/views/shared/issuable/form/_metadata.html.haml
@@ -10,13 +10,10 @@
 .row
   %div{ class: (has_due_date ? "col-lg-6" : "col-sm-12") }
     .form-group.issue-assignee
-      = form.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
-      .col-sm-10{ class: ("col-lg-8" if has_due_date) }
-        .issuable-form-select-holder
-          = form.hidden_field :assignee_id
-          = dropdown_tag(user_dropdown_label(issuable.assignee_id, "Assignee"), options: { toggle_class: "js-dropdown-keep-input js-user-search js-issuable-form-dropdown js-assignee-search", title: "Select assignee", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee js-filter-submit",
-            placeholder: "Search assignee", data: { first_user: current_user.try(:username), null_user: true, current_user: true, project_id: issuable.project.try(:id), selected: issuable.assignee_id, field_name: "#{issuable.class.model_name.param_key}[assignee_id]", default_label: "Assignee"} })
-        = link_to 'Assign to me', '#', class: "assign-to-me-link #{'hide' if issuable.assignee_id == current_user.id}"
+      - if issuable.is_a?(Issue)
+        = render "shared/issuable/form/metadata_issue_assignee", issuable: issuable, form: form, has_due_date: has_due_date
+      - else
+        = render "shared/issuable/form/metadata_merge_request_assignee", issuable: issuable, form: form, has_due_date: has_due_date
     .form-group.issue-milestone
       = form.label :milestone_id, "Milestone", class: "control-label #{"col-lg-4" if has_due_date}"
       .col-sm-10{ class: ("col-lg-8" if has_due_date) }
diff --git a/app/views/shared/issuable/form/_metadata_issue_assignee.html.haml b/app/views/shared/issuable/form/_metadata_issue_assignee.html.haml
new file mode 100644
index 00000000000..77175c839a6
--- /dev/null
+++ b/app/views/shared/issuable/form/_metadata_issue_assignee.html.haml
@@ -0,0 +1,11 @@
+= form.label :assignee_ids, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
+.col-sm-10{ class: ("col-lg-8" if has_due_date) }
+  .issuable-form-select-holder.selectbox
+    - issuable.assignees.each do |assignee|
+      = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", assignee.id, id: nil, data: { meta: assignee.name, avatar_url: assignee.avatar_url, name: assignee.name, username: assignee.username }
+
+    - if issuable.assignees.length === 0
+      = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", 0, id: nil, data: { meta: '' }
+
+    = dropdown_tag(users_dropdown_label(issuable.assignees), options: issue_dropdown_options(issuable,false))
+  = link_to 'Assign to me', '#', class: "assign-to-me-link #{'hide' if issuable.assignees.include?(current_user)}"
diff --git a/app/views/shared/issuable/form/_metadata_merge_request_assignee.html.haml b/app/views/shared/issuable/form/_metadata_merge_request_assignee.html.haml
new file mode 100644
index 00000000000..d0ea4e149df
--- /dev/null
+++ b/app/views/shared/issuable/form/_metadata_merge_request_assignee.html.haml
@@ -0,0 +1,8 @@
+= form.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
+.col-sm-10{ class: ("col-lg-8" if has_due_date) }
+  .issuable-form-select-holder
+    = form.hidden_field :assignee_id
+
+    = dropdown_tag(user_dropdown_label(issuable.assignee_id, "Assignee"), options: { toggle_class: "js-dropdown-keep-input js-user-search js-issuable-form-dropdown js-assignee-search", title: "Select assignee", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee js-filter-submit",
+      placeholder: "Search assignee", data: { first_user: current_user.try(:username), null_user: true, current_user: true, project_id: issuable.project.try(:id), selected: issuable.assignee_id, field_name: "#{issuable.class.model_name.param_key}[assignee_id]", default_label: "Assignee"} })
+  = link_to 'Assign to me', '#', class: "assign-to-me-link #{'hide' if issuable.assignee_id == current_user.id}"
diff --git a/app/views/shared/members/_requests.html.haml b/app/views/shared/members/_requests.html.haml
index 10050adfda5..92f6e7428ae 100644
--- a/app/views/shared/members/_requests.html.haml
+++ b/app/views/shared/members/_requests.html.haml
@@ -1,5 +1,5 @@
 - if requesters.any?
-  .panel.panel-default
+  .panel.panel-default.prepend-top-default
     .panel-heading
       Users requesting access to
       %strong= membership_source.name
diff --git a/app/views/shared/milestones/_issuable.html.haml b/app/views/shared/milestones/_issuable.html.haml
index 5247d6a51e6..22547a30cdf 100644
--- a/app/views/shared/milestones/_issuable.html.haml
+++ b/app/views/shared/milestones/_issuable.html.haml
@@ -1,7 +1,7 @@
 -# @project is present when viewing Project's milestone
 - project = @project || issuable.project
 - namespace = @project_namespace || project.namespace.becomes(Namespace)
-- assignee = issuable.assignee
+- assignees = issuable.assignees
 - issuable_type = issuable.class.table_name
 - base_url_args = [namespace, project]
 - issuable_type_args = base_url_args + [issuable_type]
@@ -26,7 +26,7 @@
         - render_colored_label(label)
 
     %span.assignee-icon
-      - if assignee
-        = link_to polymorphic_path(issuable_type_args, { milestone_title: @milestone.title, assignee_id: issuable.assignee_id, state: 'all' }),
+      - assignees.each do |assignee|
+        = link_to polymorphic_path(base_url_args, { milestone_title: @milestone.title, assignee_id: assignee.id, state: 'all' }),
                   class: 'has-tooltip', title: "Assigned to #{assignee.name}", data: { container: 'body' } do
-          - image_tag(avatar_icon(issuable.assignee, 16), class: "avatar s16", alt: '')
+          - image_tag(avatar_icon(assignee, 16), class: "avatar s16", alt: '')
diff --git a/app/views/shared/milestones/_labels_tab.html.haml b/app/views/shared/milestones/_labels_tab.html.haml
index 33f93dccd3c..a26b3b8009e 100644
--- a/app/views/shared/milestones/_labels_tab.html.haml
+++ b/app/views/shared/milestones/_labels_tab.html.haml
@@ -2,7 +2,7 @@
   - labels.each do |label|
     - options = { milestone_title: @milestone.title, label_name: label.title }
 
-    %li
+    %li.is-not-draggable
       %span.label-row
         %span.label-name
           = link_to milestones_label_path(options) do
@@ -10,10 +10,8 @@
         %span.prepend-description-left
           = markdown_field(label, :description)
 
-      .pull-info-right
-        %span.append-right-20
-          = link_to milestones_label_path(options.merge(state: 'opened')) do
-            - pluralize milestone_issues_by_label_count(@milestone, label, state: :opened), 'open issue'
-        %span.append-right-20
-          = link_to milestones_label_path(options.merge(state: 'closed')) do
-            - pluralize milestone_issues_by_label_count(@milestone, label, state: :closed), 'closed issue'
+      .pull-right.hidden-xs.hidden-sm.hidden-md
+        = link_to milestones_label_path(options.merge(state: 'opened')), class: 'btn btn-transparent btn-action' do
+          - pluralize milestone_issues_by_label_count(@milestone, label, state: :opened), 'open issue'
+        = link_to milestones_label_path(options.merge(state: 'closed')), class: 'btn btn-transparent btn-action' do
+          - pluralize milestone_issues_by_label_count(@milestone, label, state: :closed), 'closed issue'
diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml
index 5e8a2a0f5d8..9bb87640319 100644
--- a/app/views/shared/milestones/_sidebar.html.haml
+++ b/app/views/shared/milestones/_sidebar.html.haml
@@ -1,4 +1,4 @@
-- affix_offset = local_assigns.fetch(:affix_offset, "102")
+- affix_offset = local_assigns.fetch(:affix_offset, "50")
 - project = local_assigns[:project]
 
 %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
diff --git a/app/views/projects/notes/_comment_button.html.haml b/app/views/shared/notes/_comment_button.html.haml
index 29cf5825292..29cf5825292 100644
--- a/app/views/projects/notes/_comment_button.html.haml
+++ b/app/views/shared/notes/_comment_button.html.haml
diff --git a/app/views/shared/notes/_edit.html.haml b/app/views/shared/notes/_edit.html.haml
new file mode 100644
index 00000000000..f4b3aac29b4
--- /dev/null
+++ b/app/views/shared/notes/_edit.html.haml
@@ -0,0 +1 @@
+%textarea.hidden.js-task-list-field.original-task-list{ data: {update_url: note_url(note) } }= note.note
diff --git a/app/views/projects/notes/_edit_form.html.haml b/app/views/shared/notes/_edit_form.html.haml
index a1efc0b051a..8923e5602a4 100644
--- a/app/views/projects/notes/_edit_form.html.haml
+++ b/app/views/shared/notes/_edit_form.html.haml
@@ -2,13 +2,13 @@
   = form_tag '#', method: :put, class: 'edit-note common-note-form js-quick-submit' do
     = hidden_field_tag :target_id, '', class: 'js-form-target-id'
     = hidden_field_tag :target_type, '', class: 'js-form-target-type'
-    = render layout: 'projects/md_preview', locals: { preview_class: 'md-preview', referenced_users: true } do
+    = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(project), referenced_users: true } do
       = render 'projects/zen', attr: 'note[note]', classes: 'note-textarea js-note-text js-task-list-field', placeholder: "Write a comment or drag your files here..."
-      = render 'projects/notes/hints'
+      = render 'shared/notes/hints'
 
     .note-form-actions.clearfix
       .settings-message.note-edit-warning.js-finish-edit-warning
         Finish editing this message first!
-      = submit_tag 'Save comment', class: 'btn btn-nr btn-save js-comment-button'
+      = submit_tag 'Save comment', class: 'btn btn-nr btn-save js-comment-save-button'
       %button.btn.btn-nr.btn-cancel.note-edit-cancel{ type: 'button' }
         Cancel
diff --git a/app/views/projects/notes/_form.html.haml b/app/views/shared/notes/_form.html.haml
index 0d835a9e949..eaf50bc2115 100644
--- a/app/views/projects/notes/_form.html.haml
+++ b/app/views/shared/notes/_form.html.haml
@@ -1,6 +1,10 @@
 - supports_slash_commands = note_supports_slash_commands?(@note)
+- if supports_slash_commands
+  - preview_url = preview_markdown_path(@project, slash_commands_target_type: @note.noteable_type, slash_commands_target_id: @note.noteable_id)
+- else
+  - preview_url = preview_markdown_path(@project)
 
-= form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form", "data-noteable-iid" => @note.noteable.try(:iid), }, authenticity_token: true do |f|
+= form_for form_resources, url: new_form_url, remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form", "data-noteable-iid" => @note.noteable.try(:iid), }, authenticity_token: true do |f|
   = hidden_field_tag :view, diff_view
   = hidden_field_tag :line_type
   = hidden_field_tag :merge_request_diff_head_sha, @note.noteable.try(:diff_head_sha)
@@ -18,17 +22,17 @@
   -# DiffNote
   = f.hidden_field :position
 
-  = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
+  = render layout: 'projects/md_preview', locals: { url: preview_url, referenced_users: true } do
     = render 'projects/zen', f: f,
       attr: :note,
       classes: 'note-textarea js-note-text',
       placeholder: "Write a comment or drag your files here...",
       supports_slash_commands: supports_slash_commands
-    = render 'projects/notes/hints', supports_slash_commands: supports_slash_commands
+    = render 'shared/notes/hints', supports_slash_commands: supports_slash_commands
     .error-alert
 
   .note-form-actions.clearfix
-    = render partial: 'projects/notes/comment_button'
+    = render partial: 'shared/notes/comment_button'
 
     = yield(:note_actions)
 
diff --git a/app/views/shared/notes/_hints.html.haml b/app/views/shared/notes/_hints.html.haml
new file mode 100644
index 00000000000..7ce6130de60
--- /dev/null
+++ b/app/views/shared/notes/_hints.html.haml
@@ -0,0 +1,35 @@
+- supports_slash_commands = local_assigns.fetch(:supports_slash_commands, false)
+.comment-toolbar.clearfix
+  .toolbar-text
+    = link_to 'Markdown', help_page_path('user/markdown'), target: '_blank', tabindex: -1
+    - if supports_slash_commands
+      and
+      = link_to 'slash commands', help_page_path('user/project/slash_commands'), target: '_blank', tabindex: -1
+      are
+    - else
+      is
+    supported
+
+  %span.uploading-container
+    %span.uploading-progress-container.hide
+      = icon('file-image-o', class: 'toolbar-button-icon')
+      %span.attaching-file-message
+        -# Populated by app/assets/javascripts/dropzone_input.js
+      %span.uploading-progress 0%
+      %span.uploading-spinner
+        = icon('spinner spin', class: 'toolbar-button-icon')
+
+    %span.uploading-error-container.hide
+      %span.uploading-error-icon
+        = icon('file-image-o', class: 'toolbar-button-icon')
+      %span.uploading-error-message
+        -# Populated by app/assets/javascripts/dropzone_input.js
+      %button.retry-uploading-link{ type: 'button' } Try again
+      or
+      %button.attach-new-file.markdown-selector{ type: 'button' } attach a new file
+
+    %button.markdown-selector.button-attach-file{ type: 'button', tabindex: '-1' }
+      = icon('file-image-o', class: 'toolbar-button-icon')
+      Attach a file
+
+    %button.btn.btn-default.btn-xs.hide.button-cancel-uploading-files{ type: 'button' } Cancel
diff --git a/app/views/shared/notes/_note.html.haml b/app/views/shared/notes/_note.html.haml
index 9657b4eea82..1e34b7c1e76 100644
--- a/app/views/shared/notes/_note.html.haml
+++ b/app/views/shared/notes/_note.html.haml
@@ -18,7 +18,7 @@
       .note-header
         .note-header-info
           %a{ href: user_path(note.author) }
-            %span.hidden-xs
+            %span.note-header-author-name
               = sanitize(note.author.name)
             %span.note-headline-light
               = note.author.to_reference
@@ -40,12 +40,11 @@
       .note-body{ class: note_editable ? 'js-task-list-container' : '' }
         .note-text.md
           = note.redacted_note_html
-        = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
+        = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago')
+        .original-note-content.hidden{ data: { post_url: note_url(note), target_id: note.noteable.id, target_type: note.noteable.class.name.underscore } }
+          #{note.note}
         - if note_editable
-          - if note.for_personal_snippet?
-            = render 'snippets/notes/edit', note: note
-          - else
-            = render 'projects/notes/edit', note: note
+          = render 'shared/notes/edit', note: note
         .note-awards
           = render 'award_emoji/awards_block', awardable: note, inline: false
         - if note.system
diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml
new file mode 100644
index 00000000000..5902798dfd0
--- /dev/null
+++ b/app/views/shared/notes/_notes_with_form.html.haml
@@ -0,0 +1,25 @@
+%ul#notes-list.notes.main-notes-list.timeline
+  = render "shared/notes/notes"
+
+= render 'shared/notes/edit_form', project: @project
+
+- if can_create_note?
+  %ul.notes.notes-form.timeline
+    %li.timeline-entry
+      .flash-container.timeline-content
+
+      .timeline-icon.hidden-xs.hidden-sm
+        %a.author_link{ href: user_path(current_user) }
+          = image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
+      .timeline-content.timeline-content-form
+        = render "shared/notes/form", view: diff_view
+- elsif !current_user
+  .disabled-comment.text-center.prepend-top-default
+    Please
+    = link_to "register", new_session_path(:user, redirect_to_referer: 'yes')
+    or
+    = link_to "sign in", new_session_path(:user, redirect_to_referer: 'yes')
+    to comment
+
+:javascript
+  var notes = new Notes("#{notes_url}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{diff_view}", #{autocomplete})
diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml
index 708adbc38f1..183ed34fba1 100644
--- a/app/views/shared/notifications/_custom_notifications.html.haml
+++ b/app/views/shared/notifications/_custom_notifications.html.haml
@@ -1,9 +1,9 @@
-.modal.fade{ tabindex: "-1", role: "dialog", id: notifications_menu_identifier("modal", notification_setting), aria: { labelledby: "custom-notifications-title" } }
+.modal.fade{ tabindex: "-1", role: "dialog", id: notifications_menu_identifier("modal", notification_setting), "aria-labelledby": "custom-notifications-title" }
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{ type: "button", data: { dismiss: "modal" }, aria: { label: "close" } }
-          %span{ aria: { hidden: "true" } } ×
+        %button.close{ type: "button",  "aria-label": "close", data: { dismiss: "modal" } }
+          %span{ "aria-hidden": "true" } } ×
         %h4#custom-notifications-title.modal-title
           Custom notification events
 
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index d084f5e9684..501c09d71d5 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -21,4 +21,4 @@
     = markdown_field(@snippet, :title)
 
   - if @snippet.updated_at != @snippet.created_at
-    = edited_time_ago_with_tooltip(@snippet, placement: 'bottom', html_class: 'snippet-edited-ago')
+    = edited_time_ago_with_tooltip(@snippet, placement: 'bottom', html_class: 'snippet-edited-ago', exclude_author: true)
diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml
index 37c3e61912c..1f0e7629fb4 100644
--- a/app/views/shared/web_hooks/_form.html.haml
+++ b/app/views/shared/web_hooks/_form.html.haml
@@ -54,10 +54,10 @@
         %p.light
           This URL will be triggered when a merge request is created/updated/merged
     %li
-      = form.check_box :build_events, class: 'pull-left'
+      = form.check_box :job_events, class: 'pull-left'
       .prepend-left-20
-        = form.label :build_events, class: 'list-label' do
-          %strong Jobs events
+        = form.label :job_events, class: 'list-label' do
+          %strong Job events
         %p.light
           This URL will be triggered when the job status changes
     %li
diff --git a/app/views/snippets/notes/_actions.html.haml b/app/views/snippets/notes/_actions.html.haml
index 679a5e934da..e8119642ab8 100644
--- a/app/views/snippets/notes/_actions.html.haml
+++ b/app/views/snippets/notes/_actions.html.haml
@@ -1,7 +1,7 @@
 - if current_user
   - if note.emoji_awardable?
     - user_authored = note.user_authored?(current_user)
-    = link_to '#', title: 'Award Emoji', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored} has-tooltip", data: { position: 'right' } do
+    = link_to '#', title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored} has-tooltip", data: { position: 'right' } do
       = icon('spinner spin')
       %span{ class: 'link-highlight award-control-icon-neutral' }= custom_icon('emoji_slightly_smiling_face')
       %span{ class: 'link-highlight award-control-icon-positive' }= custom_icon('emoji_smiley')
diff --git a/app/views/snippets/notes/_edit.html.haml b/app/views/snippets/notes/_edit.html.haml
deleted file mode 100644
index e69de29bb2d..00000000000
--- a/app/views/snippets/notes/_edit.html.haml
+++ /dev/null
diff --git a/app/views/snippets/notes/_notes.html.haml b/app/views/snippets/notes/_notes.html.haml
deleted file mode 100644
index f07d6b8c126..00000000000
--- a/app/views/snippets/notes/_notes.html.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-%ul#notes-list.notes.main-notes-list.timeline
-  = render "projects/notes/notes"
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index 98287cba5b4..216184eb839 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -2,11 +2,11 @@
 
 = render 'shared/snippets/header'
 
-%article.file-holder.snippet-file-content
-  = render 'shared/snippets/blob'
+.personal-snippets
+  %article.file-holder.snippet-file-content
+    = render 'shared/snippets/blob'
 
-.row-content-block.top-block.content-component-block
-  = render 'award_emoji/awards_block', awardable: @snippet, inline: true
+  .row-content-block.top-block.content-component-block
+    = render 'award_emoji/awards_block', awardable: @snippet, inline: true
 
-%ul#notes-list.notes.main-notes-list.timeline
-  #notes= render 'shared/notes/notes'
+  #notes= render "shared/notes/notes_with_form", :autocomplete => false
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 03e5dd97405..c239253c8d5 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -10,7 +10,7 @@
   = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")
 
 .user-profile
-  .cover-block.user-cover-block
+  .cover-block.user-cover-block.layout-nav
     .cover-controls
       - if @user == current_user
         = link_to profile_path, class: 'btn btn-gray has-tooltip', title: 'Edit profile', 'aria-label': 'Edit profile' do
@@ -56,11 +56,11 @@
                 = icon('skype')
           - unless @user.linkedin.blank?
             .profile-link-holder.middle-dot-divider
-              = link_to "https://www.linkedin.com/in/#{@user.linkedin}", title: "LinkedIn" do
+              = link_to linkedin_url(@user), title: "LinkedIn" do
                 = icon('linkedin-square')
           - unless @user.twitter.blank?
             .profile-link-holder.middle-dot-divider
-              = link_to "https://twitter.com/#{@user.twitter}", title: "Twitter" do
+              = link_to twitter_url(@user), title: "Twitter" do
                 = icon('twitter-square')
           - unless @user.website_url.blank?
             .profile-link-holder.middle-dot-divider
@@ -71,7 +71,7 @@
               = @user.location
           - unless @user.organization.blank?
             .profile-link-holder.middle-dot-divider
-              = icon('building')
+              = icon('briefcase')
               = @user.organization
 
     - if @user.bio.present?
@@ -82,7 +82,7 @@
     .scrolling-tabs-container
       .fade-left= icon('angle-left')
       .fade-right= icon('angle-right')
-      %ul.nav-links.center.user-profile-nav.scrolling-tabs
+      %ul.nav-links.user-profile-nav.scrolling-tabs
         %li.js-activity-tab
           = link_to user_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
             Activity
@@ -100,7 +100,7 @@
             Snippets
 
   %div{ class: container_class }
-    - if @user == current_user && !show_user_callout?
+    - if @user == current_user && show_user_callout?
       = render 'shared/user_callout'
     .tab-content
       #activity.tab-pane
diff --git a/app/workers/expire_job_cache_worker.rb b/app/workers/expire_job_cache_worker.rb
new file mode 100644
index 00000000000..08e281e7350
--- /dev/null
+++ b/app/workers/expire_job_cache_worker.rb
@@ -0,0 +1,35 @@
+class ExpireJobCacheWorker
+  include Sidekiq::Worker
+  include BuildQueue
+
+  def perform(job_id)
+    job = CommitStatus.joins(:pipeline, :project).find_by(id: job_id)
+    return unless job
+
+    pipeline = job.pipeline
+    project = job.project
+
+    Gitlab::EtagCaching::Store.new.tap do |store|
+      store.touch(project_pipeline_path(project, pipeline))
+      store.touch(project_job_path(project, job))
+    end
+  end
+
+  private
+
+  def project_pipeline_path(project, pipeline)
+    Gitlab::Routing.url_helpers.namespace_project_pipeline_path(
+      project.namespace,
+      project,
+      pipeline,
+      format: :json)
+  end
+
+  def project_job_path(project, job)
+    Gitlab::Routing.url_helpers.namespace_project_build_path(
+      project.namespace,
+      project,
+      job.id,
+      format: :json)
+  end
+end
diff --git a/app/workers/expire_pipeline_cache_worker.rb b/app/workers/expire_pipeline_cache_worker.rb
index 603e2f1aaea..d760f5b140f 100644
--- a/app/workers/expire_pipeline_cache_worker.rb
+++ b/app/workers/expire_pipeline_cache_worker.rb
@@ -10,6 +10,7 @@ class ExpirePipelineCacheWorker
     store = Gitlab::EtagCaching::Store.new
 
     store.touch(project_pipelines_path(project))
+    store.touch(project_pipeline_path(project, pipeline))
     store.touch(commit_pipelines_path(project, pipeline.commit)) if pipeline.commit
     store.touch(new_merge_request_pipelines_path(project))
     each_pipelines_merge_request_path(project, pipeline) do |path|
@@ -28,6 +29,14 @@ class ExpirePipelineCacheWorker
       format: :json)
   end
 
+  def project_pipeline_path(project, pipeline)
+    Gitlab::Routing.url_helpers.namespace_project_pipeline_path(
+      project.namespace,
+      project,
+      pipeline,
+      format: :json)
+  end
+
   def commit_pipelines_path(project, commit)
     Gitlab::Routing.url_helpers.pipelines_namespace_project_commit_path(
       project.namespace,
diff --git a/app/workers/irker_worker.rb b/app/workers/irker_worker.rb
index c9658b3fe17..22f67fa9e9f 100644
--- a/app/workers/irker_worker.rb
+++ b/app/workers/irker_worker.rb
@@ -142,10 +142,10 @@ class IrkerWorker
   end
 
   def files_count(commit)
-    diffs = commit.raw_diffs(deltas_only: true)
+    diff_size = commit.raw_deltas.size
 
-    files = "#{diffs.real_size} file"
-    files += 's' if diffs.size > 1
+    files = "#{diff_size} file"
+    files += 's' if diff_size > 1
     files
   end
 
diff --git a/app/workers/namespaceless_project_destroy_worker.rb b/app/workers/namespaceless_project_destroy_worker.rb
new file mode 100644
index 00000000000..bfae0c77700
--- /dev/null
+++ b/app/workers/namespaceless_project_destroy_worker.rb
@@ -0,0 +1,43 @@
+# Worker to destroy projects that do not have a namespace
+#
+# It destroys everything it can without having the info about the namespace it
+# used to belong to. Projects in this state should be rare.
+# The worker will reject doing anything for projects that *do* have a
+# namespace. For those use ProjectDestroyWorker instead.
+class NamespacelessProjectDestroyWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  def self.bulk_perform_async(args_list)
+    Sidekiq::Client.push_bulk('class' => self, 'queue' => sidekiq_options['queue'], 'args' => args_list)
+  end
+
+  def perform(project_id)
+    begin
+      project = Project.unscoped.find(project_id)
+    rescue ActiveRecord::RecordNotFound
+      return
+    end
+    return unless project.namespace_id.nil?  # Reject doing anything for projects that *do* have a namespace
+
+    project.team.truncate
+
+    unlink_fork(project) if project.forked?
+
+    # Override Project#remove_pages for this instance so it doesn't do anything
+    def project.remove_pages
+    end
+
+    project.destroy!
+  end
+
+  private
+
+  def unlink_fork(project)
+    merge_requests = project.forked_from_project.merge_requests.opened.from_project(project)
+
+    merge_requests.update_all(state: 'closed')
+
+    project.forked_project_link.destroy
+  end
+end
diff --git a/app/workers/pipeline_schedule_worker.rb b/app/workers/pipeline_schedule_worker.rb
new file mode 100644
index 00000000000..7b485b3363c
--- /dev/null
+++ b/app/workers/pipeline_schedule_worker.rb
@@ -0,0 +1,25 @@
+class PipelineScheduleWorker
+  include Sidekiq::Worker
+  include CronjobQueue
+
+  def perform
+    Ci::PipelineSchedule.active.where("next_run_at < ?", Time.now)
+      .preload(:owner, :project).find_each do |schedule|
+      begin
+        unless schedule.runnable_by_owner?
+          schedule.deactivate!
+          next
+        end
+
+        Ci::CreatePipelineService.new(schedule.project,
+                                      schedule.owner,
+                                      ref: schedule.ref)
+          .execute(:schedule, save_on_errors: false, schedule: schedule)
+      rescue => e
+        Rails.logger.error "#{schedule.id}: Failed to create a scheduled pipeline: #{e.message}"
+      ensure
+        schedule.schedule_next_run!
+      end
+    end
+  end
+end
diff --git a/app/workers/post_receive.rb b/app/workers/post_receive.rb
index 015a41b6e82..c29571d3c62 100644
--- a/app/workers/post_receive.rb
+++ b/app/workers/post_receive.rb
@@ -2,34 +2,50 @@ class PostReceive
   include Sidekiq::Worker
   include DedicatedSidekiqQueue
 
-  def perform(repo_path, identifier, changes)
-    repo_relative_path = Gitlab::RepoPath.strip_storage_path(repo_path)
+  def perform(project_identifier, identifier, changes)
+    project, is_wiki = parse_project_identifier(project_identifier)
+
+    if project.nil?
+      log("Triggered hook for non-existing project with identifier \"#{project_identifier}\"")
+      return false
+    end
 
     changes = Base64.decode64(changes) unless changes.include?(' ')
     # Use Sidekiq.logger so arguments can be correlated with execution
     # time and thread ID's.
     Sidekiq.logger.info "changes: #{changes.inspect}" if ENV['SIDEKIQ_LOG_ARGUMENTS']
-    post_received = Gitlab::GitPostReceive.new(repo_relative_path, identifier, changes)
+    post_received = Gitlab::GitPostReceive.new(project, identifier, changes)
 
-    if post_received.project.nil?
-      log("Triggered hook for non-existing project with full path \"#{repo_relative_path}\"")
-      return false
-    end
-
-    if post_received.wiki?
+    if is_wiki
       # Nothing defined here yet.
-    elsif post_received.regular_project?
-      process_project_changes(post_received)
     else
-      log("Triggered hook for unidentifiable repository type with full path \"#{repo_relative_path}\"")
-      false
+      process_project_changes(post_received)
+      process_repository_update(post_received)
     end
   end
 
-  def process_project_changes(post_received)
-    post_received.changes.each do |change|
-      oldrev, newrev, ref = change.strip.split(' ')
+  def process_repository_update(post_received)
+    changes = []
+    refs = Set.new
 
+    post_received.changes_refs do |oldrev, newrev, ref|
+      @user ||= post_received.identify(newrev)
+
+      unless @user
+        log("Triggered hook for non-existing user \"#{post_received.identifier}\"")
+        return false
+      end
+
+      changes << Gitlab::DataBuilder::Repository.single_change(oldrev, newrev, ref)
+      refs << ref
+    end
+
+    hook_data = Gitlab::DataBuilder::Repository.update(post_received.project, @user, changes, refs.to_a)
+    SystemHooksService.new.execute_hooks(hook_data, :repository_update_hooks)
+  end
+
+  def process_project_changes(post_received)
+    post_received.changes_refs do |oldrev, newrev, ref|
       @user ||= post_received.identify(newrev)
 
       unless @user
@@ -47,6 +63,21 @@ class PostReceive
 
   private
 
+  # To maintain backwards compatibility, we accept both gl_repository or
+  # repository paths as project identifiers. Our plan is to migrate to
+  # gl_repository only with the following plan:
+  # 9.2: Handle both possible values. Keep Gitlab-Shell sending only repo paths
+  # 9.3 (or patch release): Make GitLab Shell pass gl_repository if present
+  # 9.4 (or patch release): Make GitLab Shell always pass gl_repository
+  # 9.5 (or patch release): Handle only gl_repository as project identifier on this method
+  def parse_project_identifier(project_identifier)
+    if project_identifier.start_with?('/')
+      Gitlab::RepoPath.parse(project_identifier)
+    else
+      Gitlab::GlRepository.parse(project_identifier)
+    end
+  end
+
   def log(message)
     Gitlab::GitLogger.error("POST-RECEIVE: #{message}")
   end
diff --git a/app/workers/process_commit_worker.rb b/app/workers/process_commit_worker.rb
index 2f7967cf531..fe6a49976e0 100644
--- a/app/workers/process_commit_worker.rb
+++ b/app/workers/process_commit_worker.rb
@@ -17,12 +17,14 @@ class ProcessCommitWorker
     project = Project.find_by(id: project_id)
 
     return unless project
+    return if commit_exists_in_upstream?(project, commit_hash)
 
     user = User.find_by(id: user_id)
 
     return unless user
 
     commit = build_commit(project, commit_hash)
+
     author = commit.author || user
 
     process_commit_message(project, commit, user, author, default)
@@ -73,4 +75,16 @@ class ProcessCommitWorker
 
     Commit.from_hash(hash, project)
   end
+
+  private
+
+  # Avoid reprocessing commits that already exist in the upstream
+  # when project is forked. This will also prevent duplicated system notes.
+  def commit_exists_in_upstream?(project, commit_hash)
+    return false unless project.forked?
+
+    upstream_project = project.forked_from_project
+    commit_id = commit_hash.with_indifferent_access[:id]
+    upstream_project.commit(commit_id).present?
+  end
 end
diff --git a/app/workers/propagate_service_template_worker.rb b/app/workers/propagate_service_template_worker.rb
new file mode 100644
index 00000000000..5ce0e0405d0
--- /dev/null
+++ b/app/workers/propagate_service_template_worker.rb
@@ -0,0 +1,21 @@
+# Worker for updating any project specific caches.
+class PropagateServiceTemplateWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  LEASE_TIMEOUT = 4.hours.to_i
+
+  def perform(template_id)
+    return unless try_obtain_lease_for(template_id)
+
+    Projects::PropagateServiceTemplate.propagate(Service.find_by(id: template_id))
+  end
+
+  private
+
+  def try_obtain_lease_for(template_id)
+    Gitlab::ExclusiveLease.
+      new("propagate_service_template_worker:#{template_id}", timeout: LEASE_TIMEOUT).
+      try_obtain
+  end
+end
diff --git a/app/workers/remove_old_web_hook_logs_worker.rb b/app/workers/remove_old_web_hook_logs_worker.rb
new file mode 100644
index 00000000000..555e1bb8691
--- /dev/null
+++ b/app/workers/remove_old_web_hook_logs_worker.rb
@@ -0,0 +1,10 @@
+class RemoveOldWebHookLogsWorker
+  include Sidekiq::Worker
+  include CronjobQueue
+
+  WEB_HOOK_LOG_LIFETIME = 2.days
+
+  def perform
+    WebHookLog.destroy_all(['created_at < ?', Time.now - WEB_HOOK_LOG_LIFETIME])
+  end
+end
diff --git a/app/workers/repository_check/clear_worker.rb b/app/workers/repository_check/clear_worker.rb
index 1f1b38540ee..85bc9103538 100644
--- a/app/workers/repository_check/clear_worker.rb
+++ b/app/workers/repository_check/clear_worker.rb
@@ -8,7 +8,7 @@ module RepositoryCheck
       Project.select(:id).find_in_batches(batch_size: 100) do |batch|
         Project.where(id: batch.map(&:id)).update_all(
           last_repository_check_failed: nil,
-          last_repository_check_at: nil,
+          last_repository_check_at: nil
         )
       end
     end
diff --git a/app/workers/repository_check/single_repository_worker.rb b/app/workers/repository_check/single_repository_worker.rb
index 3d8bfc6fc6c..164586cf0b7 100644
--- a/app/workers/repository_check/single_repository_worker.rb
+++ b/app/workers/repository_check/single_repository_worker.rb
@@ -7,7 +7,7 @@ module RepositoryCheck
       project = Project.find(project_id)
       project.update_columns(
         last_repository_check_failed: !check(project),
-        last_repository_check_at: Time.now,
+        last_repository_check_at: Time.now
       )
     end
 
diff --git a/app/workers/system_hook_worker.rb b/app/workers/system_hook_worker.rb
deleted file mode 100644
index 55d4e7d6dab..00000000000
--- a/app/workers/system_hook_worker.rb
+++ /dev/null
@@ -1,10 +0,0 @@
-class SystemHookWorker
-  include Sidekiq::Worker
-  include DedicatedSidekiqQueue
-
-  sidekiq_options retry: 4
-
-  def perform(hook_id, data, hook_name)
-    SystemHook.find(hook_id).execute(data, hook_name)
-  end
-end
diff --git a/app/workers/trigger_schedule_worker.rb b/app/workers/trigger_schedule_worker.rb
deleted file mode 100644
index 9c1baf7e6c5..00000000000
--- a/app/workers/trigger_schedule_worker.rb
+++ /dev/null
@@ -1,18 +0,0 @@
-class TriggerScheduleWorker
-  include Sidekiq::Worker
-  include CronjobQueue
-
-  def perform
-    Ci::TriggerSchedule.active.where("next_run_at < ?", Time.now).find_each do |trigger_schedule|
-      begin
-        Ci::CreateTriggerRequestService.new.execute(trigger_schedule.project,
-                                                    trigger_schedule.trigger,
-                                                    trigger_schedule.ref)
-      rescue => e
-        Rails.logger.error "#{trigger_schedule.id}: Failed to trigger_schedule job: #{e.message}"
-      ensure
-        trigger_schedule.schedule_next_run!
-      end
-    end
-  end
-end
diff --git a/app/workers/project_web_hook_worker.rb b/app/workers/web_hook_worker.rb
index d973e662ff2..ad5ddf02a12 100644
--- a/app/workers/project_web_hook_worker.rb
+++ b/app/workers/web_hook_worker.rb
@@ -1,11 +1,13 @@
-class ProjectWebHookWorker
+class WebHookWorker
   include Sidekiq::Worker
   include DedicatedSidekiqQueue
 
   sidekiq_options retry: 4
 
   def perform(hook_id, data, hook_name)
+    hook = WebHook.find(hook_id)
     data = data.with_indifferent_access
-    WebHook.find(hook_id).execute(data, hook_name)
+
+    WebHookService.new(hook, data, hook_name).execute
   end
 end