2099 files changed, 46452 insertions, 20684 deletions

diff --git a/app/assets/images/ci_favicons/canary/favicon_status_canceled.ico b/app/assets/images/ci_favicons/canary/favicon_status_canceled.ico
new file mode 100644
index 00000000000..48b1095370d
--- /dev/null
+++ b/app/assets/images/ci_favicons/canary/favicon_status_canceled.ico
diff --git a/app/assets/images/ci_favicons/canary/favicon_status_created.ico b/app/assets/images/ci_favicons/canary/favicon_status_created.ico
new file mode 100644
index 00000000000..623c728faf6
--- /dev/null
+++ b/app/assets/images/ci_favicons/canary/favicon_status_created.ico
diff --git a/app/assets/images/ci_favicons/canary/favicon_status_failed.ico b/app/assets/images/ci_favicons/canary/favicon_status_failed.ico
new file mode 100644
index 00000000000..3073fe5a761
--- /dev/null
+++ b/app/assets/images/ci_favicons/canary/favicon_status_failed.ico
diff --git a/app/assets/images/ci_favicons/canary/favicon_status_manual.ico b/app/assets/images/ci_favicons/canary/favicon_status_manual.ico
new file mode 100644
index 00000000000..6c713d7b675
--- /dev/null
+++ b/app/assets/images/ci_favicons/canary/favicon_status_manual.ico
diff --git a/app/assets/images/ci_favicons/canary/favicon_status_not_found.ico b/app/assets/images/ci_favicons/canary/favicon_status_not_found.ico
new file mode 100644
index 00000000000..dbf855fdafd
--- /dev/null
+++ b/app/assets/images/ci_favicons/canary/favicon_status_not_found.ico
diff --git a/app/assets/images/ci_favicons/canary/favicon_status_pending.ico b/app/assets/images/ci_favicons/canary/favicon_status_pending.ico
new file mode 100644
index 00000000000..ccd00606aeb
--- /dev/null
+++ b/app/assets/images/ci_favicons/canary/favicon_status_pending.ico
diff --git a/app/assets/images/ci_favicons/canary/favicon_status_running.ico b/app/assets/images/ci_favicons/canary/favicon_status_running.ico
new file mode 100644
index 00000000000..968e7c4c2d4
--- /dev/null
+++ b/app/assets/images/ci_favicons/canary/favicon_status_running.ico
diff --git a/app/assets/images/ci_favicons/canary/favicon_status_skipped.ico b/app/assets/images/ci_favicons/canary/favicon_status_skipped.ico
new file mode 100644
index 00000000000..7e3be35cc3a
--- /dev/null
+++ b/app/assets/images/ci_favicons/canary/favicon_status_skipped.ico
diff --git a/app/assets/images/ci_favicons/canary/favicon_status_success.ico b/app/assets/images/ci_favicons/canary/favicon_status_success.ico
new file mode 100644
index 00000000000..a1fb6e91d65
--- /dev/null
+++ b/app/assets/images/ci_favicons/canary/favicon_status_success.ico
diff --git a/app/assets/images/ci_favicons/canary/favicon_status_warning.ico b/app/assets/images/ci_favicons/canary/favicon_status_warning.ico
new file mode 100644
index 00000000000..5d931619fb2
--- /dev/null
+++ b/app/assets/images/ci_favicons/canary/favicon_status_warning.ico
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_canceled.ico b/app/assets/images/ci_favicons/dev/favicon_status_canceled.ico
deleted file mode 100644
index 4af3582b60d..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_canceled.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_created.ico b/app/assets/images/ci_favicons/dev/favicon_status_created.ico
deleted file mode 100644
index 13639da2e8a..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_created.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_failed.ico b/app/assets/images/ci_favicons/dev/favicon_status_failed.ico
deleted file mode 100644
index 5f0e711b104..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_failed.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_manual.ico b/app/assets/images/ci_favicons/dev/favicon_status_manual.ico
deleted file mode 100644
index 8b1168a1267..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_manual.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_not_found.ico b/app/assets/images/ci_favicons/dev/favicon_status_not_found.ico
deleted file mode 100644
index ed19b69e1c5..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_not_found.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_pending.ico b/app/assets/images/ci_favicons/dev/favicon_status_pending.ico
deleted file mode 100644
index 5dfefd4cc5a..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_pending.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_running.ico b/app/assets/images/ci_favicons/dev/favicon_status_running.ico
deleted file mode 100644
index a41539c0e3e..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_running.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_skipped.ico b/app/assets/images/ci_favicons/dev/favicon_status_skipped.ico
deleted file mode 100644
index 2c1ae552b93..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_skipped.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_success.ico b/app/assets/images/ci_favicons/dev/favicon_status_success.ico
deleted file mode 100644
index 70f0ca61eca..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_success.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_warning.ico b/app/assets/images/ci_favicons/dev/favicon_status_warning.ico
deleted file mode 100644
index db289e03eb1..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_warning.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_canceled.ico b/app/assets/images/ci_favicons/favicon_status_canceled.ico
deleted file mode 100644
index 23adcffff50..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_canceled.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_canceled.png b/app/assets/images/ci_favicons/favicon_status_canceled.png
new file mode 100644
index 00000000000..8adaa9c600b
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_canceled.png
diff --git a/app/assets/images/ci_favicons/favicon_status_created.ico b/app/assets/images/ci_favicons/favicon_status_created.ico
deleted file mode 100644
index f9d93b390d8..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_created.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_created.png b/app/assets/images/ci_favicons/favicon_status_created.png
new file mode 100644
index 00000000000..ca788dd0034
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_created.png
diff --git a/app/assets/images/ci_favicons/favicon_status_failed.ico b/app/assets/images/ci_favicons/favicon_status_failed.ico
deleted file mode 100644
index 28a22ebf724..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_failed.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_failed.png b/app/assets/images/ci_favicons/favicon_status_failed.png
new file mode 100644
index 00000000000..93f1e2772fd
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_failed.png
diff --git a/app/assets/images/ci_favicons/favicon_status_manual.ico b/app/assets/images/ci_favicons/favicon_status_manual.ico
deleted file mode 100644
index dbbf1abf30c..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_manual.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_manual.png b/app/assets/images/ci_favicons/favicon_status_manual.png
new file mode 100644
index 00000000000..c926062c806
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_manual.png
diff --git a/app/assets/images/ci_favicons/favicon_status_not_found.ico b/app/assets/images/ci_favicons/favicon_status_not_found.ico
deleted file mode 100644
index 49b9b232dd1..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_not_found.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_not_found.png b/app/assets/images/ci_favicons/favicon_status_not_found.png
new file mode 100644
index 00000000000..df3049315a9
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_not_found.png
diff --git a/app/assets/images/ci_favicons/favicon_status_pending.ico b/app/assets/images/ci_favicons/favicon_status_pending.ico
deleted file mode 100644
index 05962f3f148..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_pending.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_pending.png b/app/assets/images/ci_favicons/favicon_status_pending.png
new file mode 100644
index 00000000000..f7d67d4a230
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_pending.png
diff --git a/app/assets/images/ci_favicons/favicon_status_running.ico b/app/assets/images/ci_favicons/favicon_status_running.ico
deleted file mode 100644
index 7fa3d4d48d4..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_running.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_running.png b/app/assets/images/ci_favicons/favicon_status_running.png
new file mode 100644
index 00000000000..ff4167c4b20
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_running.png
diff --git a/app/assets/images/ci_favicons/favicon_status_skipped.ico b/app/assets/images/ci_favicons/favicon_status_skipped.ico
deleted file mode 100644
index b0c26b62068..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_skipped.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_skipped.png b/app/assets/images/ci_favicons/favicon_status_skipped.png
new file mode 100644
index 00000000000..a9c36464b69
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_skipped.png
diff --git a/app/assets/images/ci_favicons/favicon_status_success.ico b/app/assets/images/ci_favicons/favicon_status_success.ico
deleted file mode 100644
index b150960b5be..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_success.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_success.png b/app/assets/images/ci_favicons/favicon_status_success.png
new file mode 100644
index 00000000000..bcc30c73f5f
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_success.png
diff --git a/app/assets/images/ci_favicons/favicon_status_warning.ico b/app/assets/images/ci_favicons/favicon_status_warning.ico
deleted file mode 100644
index 7e71d71684d..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_warning.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_warning.png b/app/assets/images/ci_favicons/favicon_status_warning.png
new file mode 100644
index 00000000000..6db3b0280f5
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_warning.png
diff --git a/app/assets/images/ext_snippet_icons/ext_snippet_icons.png b/app/assets/images/ext_snippet_icons/ext_snippet_icons.png
new file mode 100644
index 00000000000..20380adc4e5
--- /dev/null
+++ b/app/assets/images/ext_snippet_icons/ext_snippet_icons.png
diff --git a/app/assets/images/ext_snippet_icons/logo.png b/app/assets/images/ext_snippet_icons/logo.png
new file mode 100644
index 00000000000..794c9cc2dbc
--- /dev/null
+++ b/app/assets/images/ext_snippet_icons/logo.png
diff --git a/app/assets/images/favicon-blue.ico b/app/assets/images/favicon-blue.ico
deleted file mode 100644
index 156fcf07588..00000000000
--- a/app/assets/images/favicon-blue.ico
+++ /dev/null
diff --git a/app/assets/images/favicon-blue.png b/app/assets/images/favicon-blue.png
new file mode 100644
index 00000000000..2229fe79462
--- /dev/null
+++ b/app/assets/images/favicon-blue.png
diff --git a/app/assets/images/favicon-yellow.png b/app/assets/images/favicon-yellow.png
new file mode 100644
index 00000000000..2d5289818b4
--- /dev/null
+++ b/app/assets/images/favicon-yellow.png
diff --git a/app/assets/images/favicon.ico b/app/assets/images/favicon.ico
deleted file mode 100644
index 3479cbbb46f..00000000000
--- a/app/assets/images/favicon.ico
+++ /dev/null
diff --git a/app/assets/images/favicon.png b/app/assets/images/favicon.png
new file mode 100644
index 00000000000..845e0ec34a5
--- /dev/null
+++ b/app/assets/images/favicon.png
diff --git a/app/assets/javascripts/activities.js b/app/assets/javascripts/activities.js
index c117d080bda..de4566bb119 100644
--- a/app/assets/javascripts/activities.js
+++ b/app/assets/javascripts/activities.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-param-reassign, class-methods-use-this */
+/* eslint-disable class-methods-use-this */
 
 import $ from 'jquery';
 import Cookies from 'js-cookie';
diff --git a/app/assets/javascripts/ajax_loading_spinner.js b/app/assets/javascripts/ajax_loading_spinner.js
index bd08308904c..54e86f329e4 100644
--- a/app/assets/javascripts/ajax_loading_spinner.js
+++ b/app/assets/javascripts/ajax_loading_spinner.js
@@ -26,7 +26,7 @@ export default class AjaxLoadingSpinner {
   }
 
   static toggleLoadingIcon(iconElement) {
-    const classList = iconElement.classList;
+    const { classList } = iconElement;
     classList.toggle(iconElement.dataset.icon);
     classList.toggle('fa-spinner');
     classList.toggle('fa-spin');
diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index cbcefb2c18f..000938e475f 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -10,6 +10,10 @@ const Api = {
   projectsPath: '/api/:version/projects.json',
   projectPath: '/api/:version/projects/:id',
   projectLabelsPath: '/:namespace_path/:project_path/labels',
+  mergeRequestPath: '/api/:version/projects/:id/merge_requests/:mrid',
+  mergeRequestsPath: '/api/:version/merge_requests',
+  mergeRequestChangesPath: '/api/:version/projects/:id/merge_requests/:mrid/changes',
+  mergeRequestVersionsPath: '/api/:version/projects/:id/merge_requests/:mrid/versions',
   groupLabelsPath: '/groups/:namespace_path/-/labels',
   licensePath: '/api/:version/templates/licenses/:key',
   gitignorePath: '/api/:version/templates/gitignores/:key',
@@ -18,29 +22,32 @@ const Api = {
   issuableTemplatePath: '/:namespace_path/:project_path/templates/:type/:key',
   usersPath: '/api/:version/users.json',
   commitPath: '/api/:version/projects/:id/repository/commits',
+  commitPipelinesPath: '/:project_id/commit/:sha/pipelines',
   branchSinglePath: '/api/:version/projects/:id/repository/branches/:branch',
   createBranchPath: '/api/:version/projects/:id/repository/branches',
 
   group(groupId, callback) {
-    const url = Api.buildUrl(Api.groupPath)
-      .replace(':id', groupId);
-    return axios.get(url)
-      .then(({ data }) => {
-        callback(data);
+    const url = Api.buildUrl(Api.groupPath).replace(':id', groupId);
+    return axios.get(url).then(({ data }) => {
+      callback(data);
 
-        return data;
-      });
+      return data;
+    });
   },
 
   // Return groups list. Filtered by query
   groups(query, options, callback = $.noop) {
     const url = Api.buildUrl(Api.groupsPath);
-    return axios.get(url, {
-      params: Object.assign({
-        search: query,
-        per_page: 20,
-      }, options),
-    })
+    return axios
+      .get(url, {
+        params: Object.assign(
+          {
+            search: query,
+            per_page: 20,
+          },
+          options,
+        ),
+      })
       .then(({ data }) => {
         callback(data);
 
@@ -51,12 +58,13 @@ const Api = {
   // Return namespaces list. Filtered by query
   namespaces(query, callback) {
     const url = Api.buildUrl(Api.namespacesPath);
-    return axios.get(url, {
-      params: {
-        search: query,
-        per_page: 20,
-      },
-    })
+    return axios
+      .get(url, {
+        params: {
+          search: query,
+          per_page: 20,
+        },
+      })
       .then(({ data }) => callback(data));
   },
 
@@ -73,9 +81,10 @@ const Api = {
       defaults.membership = true;
     }
 
-    return axios.get(url, {
-      params: Object.assign(defaults, options),
-    })
+    return axios
+      .get(url, {
+        params: Object.assign(defaults, options),
+      })
       .then(({ data }) => {
         callback(data);
 
@@ -85,8 +94,38 @@ const Api = {
 
   // Return single project
   project(projectPath) {
-    const url = Api.buildUrl(Api.projectPath)
-            .replace(':id', encodeURIComponent(projectPath));
+    const url = Api.buildUrl(Api.projectPath).replace(':id', encodeURIComponent(projectPath));
+
+    return axios.get(url);
+  },
+
+  // Return Merge Request for project
+  mergeRequest(projectPath, mergeRequestId) {
+    const url = Api.buildUrl(Api.mergeRequestPath)
+      .replace(':id', encodeURIComponent(projectPath))
+      .replace(':mrid', mergeRequestId);
+
+    return axios.get(url);
+  },
+
+  mergeRequests(params = {}) {
+    const url = Api.buildUrl(Api.mergeRequestsPath);
+
+    return axios.get(url, { params });
+  },
+
+  mergeRequestChanges(projectPath, mergeRequestId) {
+    const url = Api.buildUrl(Api.mergeRequestChangesPath)
+      .replace(':id', encodeURIComponent(projectPath))
+      .replace(':mrid', mergeRequestId);
+
+    return axios.get(url);
+  },
+
+  mergeRequestVersions(projectPath, mergeRequestId) {
+    const url = Api.buildUrl(Api.mergeRequestVersionsPath)
+      .replace(':id', encodeURIComponent(projectPath))
+      .replace(':mrid', mergeRequestId);
 
     return axios.get(url);
   },
@@ -102,30 +141,30 @@ const Api = {
       url = Api.buildUrl(Api.groupLabelsPath).replace(':namespace_path', namespacePath);
     }
 
-    return axios.post(url, {
-      label: data,
-    })
+    return axios
+      .post(url, {
+        label: data,
+      })
       .then(res => callback(res.data))
       .catch(e => callback(e.response.data));
   },
 
   // Return group projects list. Filtered by query
   groupProjects(groupId, query, callback) {
-    const url = Api.buildUrl(Api.groupProjectsPath)
-      .replace(':id', groupId);
-    return axios.get(url, {
-      params: {
-        search: query,
-        per_page: 20,
-      },
-    })
+    const url = Api.buildUrl(Api.groupProjectsPath).replace(':id', groupId);
+    return axios
+      .get(url, {
+        params: {
+          search: query,
+          per_page: 20,
+        },
+      })
       .then(({ data }) => callback(data));
   },
 
   commitMultiple(id, data) {
     // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
-    const url = Api.buildUrl(Api.commitPath)
-      .replace(':id', encodeURIComponent(id));
+    const url = Api.buildUrl(Api.commitPath).replace(':id', encodeURIComponent(id));
     return axios.post(url, JSON.stringify(data), {
       headers: {
         'Content-Type': 'application/json; charset=utf-8',
@@ -133,42 +172,50 @@ const Api = {
     });
   },
 
+  commitPipelines(projectId, sha) {
+    const encodedProjectId = projectId
+      .split('/')
+      .map(fragment => encodeURIComponent(fragment))
+      .join('/');
+
+    const url = Api.buildUrl(Api.commitPipelinesPath)
+      .replace(':project_id', encodedProjectId)
+      .replace(':sha', encodeURIComponent(sha));
+
+    return axios.get(url);
+  },
+
   branchSingle(id, branch) {
     const url = Api.buildUrl(Api.branchSinglePath)
       .replace(':id', encodeURIComponent(id))
-      .replace(':branch', branch);
+      .replace(':branch', encodeURIComponent(branch));
 
     return axios.get(url);
   },
 
   // Return text for a specific license
   licenseText(key, data, callback) {
-    const url = Api.buildUrl(Api.licensePath)
-      .replace(':key', key);
-    return axios.get(url, {
-      params: data,
-    })
+    const url = Api.buildUrl(Api.licensePath).replace(':key', key);
+    return axios
+      .get(url, {
+        params: data,
+      })
       .then(res => callback(res.data));
   },
 
   gitignoreText(key, callback) {
-    const url = Api.buildUrl(Api.gitignorePath)
-      .replace(':key', key);
-    return axios.get(url)
-      .then(({ data }) => callback(data));
+    const url = Api.buildUrl(Api.gitignorePath).replace(':key', key);
+    return axios.get(url).then(({ data }) => callback(data));
   },
 
   gitlabCiYml(key, callback) {
-    const url = Api.buildUrl(Api.gitlabCiYmlPath)
-      .replace(':key', key);
-    return axios.get(url)
-      .then(({ data }) => callback(data));
+    const url = Api.buildUrl(Api.gitlabCiYmlPath).replace(':key', key);
+    return axios.get(url).then(({ data }) => callback(data));
   },
 
   dockerfileYml(key, callback) {
     const url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
-    return axios.get(url)
-      .then(({ data }) => callback(data));
+    return axios.get(url).then(({ data }) => callback(data));
   },
 
   issueTemplate(namespacePath, projectPath, key, type, callback) {
@@ -177,7 +224,8 @@ const Api = {
       .replace(':type', type)
       .replace(':project_path', projectPath)
       .replace(':namespace_path', namespacePath);
-    return axios.get(url)
+    return axios
+      .get(url)
       .then(({ data }) => callback(null, data))
       .catch(callback);
   },
@@ -185,10 +233,13 @@ const Api = {
   users(query, options) {
     const url = Api.buildUrl(this.usersPath);
     return axios.get(url, {
-      params: Object.assign({
-        search: query,
-        per_page: 20,
-      }, options),
+      params: Object.assign(
+        {
+          search: query,
+          per_page: 20,
+        },
+        options,
+      ),
     });
   },
 
diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index 0da872db7e5..fa00a3cf386 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-param-reassign, prefer-template, no-var, no-void, consistent-return */
+/* eslint-disable no-param-reassign, prefer-template, no-void, consistent-return */
 
 import AccessorUtilities from './lib/utils/accessor';
 
@@ -31,7 +31,9 @@ export default class Autosave {
     // https://github.com/vuejs/vue/issues/2804#issuecomment-216968137
     const event = new Event('change', { bubbles: true, cancelable: false });
     const field = this.field.get(0);
-    field.dispatchEvent(event);
+    if (field) {
+      field.dispatchEvent(event);
+    }
   }
 
   save() {
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 6da33a26e58..70f20c5c7cf 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -4,13 +4,15 @@ import $ from 'jquery';
 import _ from 'underscore';
 import Cookies from 'js-cookie';
 import { __ } from './locale';
-import { isInIssuePage, isInMRPage, hasVueMRDiscussionsCookie, updateTooltipTitle } from './lib/utils/common_utils';
+import { updateTooltipTitle } from './lib/utils/common_utils';
+import { isInVueNoteablePage } from './lib/utils/dom_utils';
 import flash from './flash';
 import axios from './lib/utils/axios_utils';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
-const requestAnimationFrame = window.requestAnimationFrame ||
+const requestAnimationFrame =
+  window.requestAnimationFrame ||
   window.webkitRequestAnimationFrame ||
   window.mozRequestAnimationFrame ||
   window.setTimeout;
@@ -36,21 +38,28 @@ class AwardsHandler {
     this.emoji = emoji;
     this.eventListeners = [];
     // If the user shows intent let's pre-build the menu
-    this.registerEventListener('one', $(document), 'mouseenter focus', '.js-add-award', 'mouseenter focus', () => {
-      const $menu = $('.emoji-menu');
-      if ($menu.length === 0) {
-        requestAnimationFrame(() => {
-          this.createEmojiMenu();
-        });
-      }
-    });
-    this.registerEventListener('on', $(document), 'click', '.js-add-award', (e) => {
+    this.registerEventListener(
+      'one',
+      $(document),
+      'mouseenter focus',
+      '.js-add-award',
+      'mouseenter focus',
+      () => {
+        const $menu = $('.emoji-menu');
+        if ($menu.length === 0) {
+          requestAnimationFrame(() => {
+            this.createEmojiMenu();
+          });
+        }
+      },
+    );
+    this.registerEventListener('on', $(document), 'click', '.js-add-award', e => {
       e.stopPropagation();
       e.preventDefault();
       this.showEmojiMenu($(e.currentTarget));
     });
 
-    this.registerEventListener('on', $('html'), 'click', (e) => {
+    this.registerEventListener('on', $('html'), 'click', e => {
       const $target = $(e.target);
       if (!$target.closest('.emoji-menu').length) {
         $('.js-awards-block.current').removeClass('current');
@@ -60,12 +69,14 @@ class AwardsHandler {
         }
       }
     });
-    this.registerEventListener('on', $(document), 'click', '.js-emoji-btn', (e) => {
+    this.registerEventListener('on', $(document), 'click', '.js-emoji-btn', e => {
       e.preventDefault();
       const $target = $(e.currentTarget);
       const $glEmojiElement = $target.find('gl-emoji');
       const $spriteIconElement = $target.find('.icon');
-      const emojiName = ($glEmojiElement.length ? $glEmojiElement : $spriteIconElement).data('name');
+      const emojiName = ($glEmojiElement.length ? $glEmojiElement : $spriteIconElement).data(
+        'name',
+      );
 
       $target.closest('.js-awards-block').addClass('current');
       this.addAward(this.getVotesBlock(), this.getAwardUrl(), emojiName);
@@ -82,7 +93,10 @@ class AwardsHandler {
 
   showEmojiMenu($addBtn) {
     if ($addBtn.hasClass('js-note-emoji')) {
-      $addBtn.closest('.note').find('.js-awards-block').addClass('current');
+      $addBtn
+        .closest('.note')
+        .find('.js-awards-block')
+        .addClass('current');
     } else {
       $addBtn.closest('.js-awards-block').addClass('current');
     }
@@ -176,32 +190,38 @@ class AwardsHandler {
     const remainingCategories = Object.keys(categoryMap).slice(1);
     const allCategoriesAddedPromise = remainingCategories.reduce(
       (promiseChain, categoryNameKey) =>
-        promiseChain.then(() =>
-          new Promise((resolve) => {
-            const emojisInCategory = categoryMap[categoryNameKey];
-            const categoryMarkup = this.renderCategory(
-              categoryLabelMap[categoryNameKey],
-              emojisInCategory,
-            );
-            requestAnimationFrame(() => {
-              emojiContentElement.insertAdjacentHTML('beforeend', categoryMarkup);
-              resolve();
-            });
-          }),
-      ),
+        promiseChain.then(
+          () =>
+            new Promise(resolve => {
+              const emojisInCategory = categoryMap[categoryNameKey];
+              const categoryMarkup = this.renderCategory(
+                categoryLabelMap[categoryNameKey],
+                emojisInCategory,
+              );
+              requestAnimationFrame(() => {
+                emojiContentElement.insertAdjacentHTML('beforeend', categoryMarkup);
+                resolve();
+              });
+            }),
+        ),
       Promise.resolve(),
     );
 
-    allCategoriesAddedPromise.then(() => {
-      // Used for tests
-      // We check for the menu in case it was destroyed in the meantime
-      if (menu) {
-        menu.dispatchEvent(new CustomEvent('build-emoji-menu-finish'));
-      }
-    }).catch((err) => {
-      emojiContentElement.insertAdjacentHTML('beforeend', '<p>We encountered an error while adding the remaining categories</p>');
-      throw new Error(`Error occurred in addRemainingEmojiMenuCategories: ${err.message}`);
-    });
+    allCategoriesAddedPromise
+      .then(() => {
+        // Used for tests
+        // We check for the menu in case it was destroyed in the meantime
+        if (menu) {
+          menu.dispatchEvent(new CustomEvent('build-emoji-menu-finish'));
+        }
+      })
+      .catch(err => {
+        emojiContentElement.insertAdjacentHTML(
+          'beforeend',
+          '<p>We encountered an error while adding the remaining categories</p>',
+        );
+        throw new Error(`Error occurred in addRemainingEmojiMenuCategories: ${err.message}`);
+      });
   }
 
   renderCategory(name, emojiList, opts = {}) {
@@ -210,7 +230,9 @@ class AwardsHandler {
         ${name}
       </h5>
       <ul class="clearfix emoji-menu-list ${opts.menuListClass || ''}">
-        ${emojiList.map(emojiName => `
+        ${emojiList
+          .map(
+            emojiName => `
           <li class="emoji-menu-list-item">
             <button class="emoji-menu-btn text-center js-emoji-btn" type="button">
               ${this.emoji.glEmojiTag(emojiName, {
@@ -218,7 +240,9 @@ class AwardsHandler {
               })}
             </button>
           </li>
-        `).join('\n')}
+        `,
+          )
+          .join('\n')}
       </ul>
     `;
   }
@@ -231,7 +255,7 @@ class AwardsHandler {
       top: `${$addBtn.offset().top + $addBtn.outerHeight()}px`,
     };
     if (position === 'right') {
-      css.left = `${($addBtn.offset().left - $menu.outerWidth()) + 20}px`;
+      css.left = `${$addBtn.offset().left - $menu.outerWidth() + 20}px`;
       $menu.addClass('is-aligned-right');
     } else {
       css.left = `${$addBtn.offset().left}px`;
@@ -243,7 +267,7 @@ class AwardsHandler {
   addAward(votesBlock, awardUrl, emoji, checkMutuality, callback) {
     const isMainAwardsBlock = votesBlock.closest('.js-noteable-awards').length;
 
-    if (this.isInVueNoteablePage() && !isMainAwardsBlock) {
+    if (isInVueNoteablePage() && !isMainAwardsBlock) {
       const id = votesBlock.attr('id').replace('note_', '');
 
       this.hideMenuElement($('.emoji-menu'));
@@ -295,16 +319,8 @@ class AwardsHandler {
     }
   }
 
-  isVueMRDiscussions() {
-    return isInMRPage() && hasVueMRDiscussionsCookie() && !$('#diffs').is(':visible');
-  }
-
-  isInVueNoteablePage() {
-    return isInIssuePage() || this.isVueMRDiscussions();
-  }
-
   getVotesBlock() {
-    if (this.isInVueNoteablePage()) {
+    if (isInVueNoteablePage()) {
       const $el = $('.js-add-award.is-active').closest('.note.timeline-entry');
 
       if ($el.length) {
@@ -352,7 +368,7 @@ class AwardsHandler {
       counter.text(counterNumber - 1);
       this.removeYouFromUserList($emojiButton);
     } else if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
-      $emojiButton.tooltip('destroy');
+      $emojiButton.tooltip('dispose');
       counter.text('0');
       this.removeYouFromUserList($emojiButton);
       if ($emojiButton.parents('.note').length) {
@@ -365,7 +381,7 @@ class AwardsHandler {
   }
 
   removeEmoji($emojiButton) {
-    $emojiButton.tooltip('destroy');
+    $emojiButton.tooltip('dispose');
     $emojiButton.remove();
     const $votesBlock = this.getVotesBlock();
     if ($votesBlock.find('.js-emoji-btn').length === 0) {
@@ -399,7 +415,7 @@ class AwardsHandler {
       .removeAttr('data-title')
       .removeAttr('data-original-title')
       .attr('title', this.toSentence(authors))
-      .tooltip('fixTitle');
+      .tooltip('_fixTitle');
   }
 
   addYouToUserList(votesBlock, emoji) {
@@ -412,7 +428,7 @@ class AwardsHandler {
     users.unshift('You');
     return awardBlock
       .attr('title', this.toSentence(users))
-      .tooltip('fixTitle');
+      .tooltip('_fixTitle');
   }
 
   createAwardButtonForVotesBlock(votesBlock, emojiName) {
@@ -423,7 +439,10 @@ class AwardsHandler {
       </button>
     `;
     const $emojiButton = $(buttonHtml);
-    $emojiButton.insertBefore(votesBlock.find('.js-award-holder')).find('.emoji-icon').data('name', emojiName);
+    $emojiButton
+      .insertBefore(votesBlock.find('.js-award-holder'))
+      .find('.emoji-icon')
+      .data('name', emojiName);
     this.animateEmoji($emojiButton);
     $('.award-control').tooltip();
     votesBlock.removeClass('current');
@@ -433,7 +452,7 @@ class AwardsHandler {
     const className = 'pulse animated once short';
     $emoji.addClass(className);
 
-    this.registerEventListener('on', $emoji, animationEndEventString, (e) => {
+    this.registerEventListener('on', $emoji, animationEndEventString, e => {
       $(e.currentTarget).removeClass(className);
     });
   }
@@ -451,15 +470,16 @@ class AwardsHandler {
     if (this.isUserAuthored($emojiButton)) {
       this.userAuthored($emojiButton);
     } else {
-      axios.post(awardUrl, {
-        name: emoji,
-      })
-      .then(({ data }) => {
-        if (data.ok) {
-          callback();
-        }
-      })
-      .catch(() => flash(__('Something went wrong on our end.')));
+      axios
+        .post(awardUrl, {
+          name: emoji,
+        })
+        .then(({ data }) => {
+          if (data.ok) {
+            callback();
+          }
+        })
+        .catch(() => flash(__('Something went wrong on our end.')));
     }
   }
 
@@ -493,26 +513,33 @@ class AwardsHandler {
   }
 
   getFrequentlyUsedEmojis() {
-    return this.frequentlyUsedEmojis || (() => {
-      const frequentlyUsedEmojis = _.uniq((Cookies.get('frequently_used_emojis') || '').split(','));
-      this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter(
-        inputName => this.emoji.isEmojiNameValid(inputName),
-      );
-
-      return this.frequentlyUsedEmojis;
-    })();
+    return (
+      this.frequentlyUsedEmojis ||
+      (() => {
+        const frequentlyUsedEmojis = _.uniq(
+          (Cookies.get('frequently_used_emojis') || '').split(','),
+        );
+        this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter(inputName =>
+          this.emoji.isEmojiNameValid(inputName),
+        );
+
+        return this.frequentlyUsedEmojis;
+      })()
+    );
   }
 
   setupSearch() {
     const $search = $('.js-emoji-menu-search');
 
-    this.registerEventListener('on', $search, 'input', (e) => {
-      const term = $(e.target).val().trim();
+    this.registerEventListener('on', $search, 'input', e => {
+      const term = $(e.target)
+        .val()
+        .trim();
       this.searchEmojis(term);
     });
 
     const $menu = $('.emoji-menu');
-    this.registerEventListener('on', $menu, transitionEndEventString, (e) => {
+    this.registerEventListener('on', $menu, transitionEndEventString, e => {
       if (e.target === e.currentTarget) {
         // Clear the search
         this.searchEmojis('');
@@ -530,19 +557,26 @@ class AwardsHandler {
       // Generate a search result block
       const h5 = $('<h5 class="emoji-search-title"/>').text('Search results');
       const foundEmojis = this.findMatchingEmojiElements(term).show();
-      const ul = $('<ul>').addClass('emoji-menu-list emoji-menu-search').append(foundEmojis);
+      const ul = $('<ul>')
+        .addClass('emoji-menu-list emoji-menu-search')
+        .append(foundEmojis);
       $('.emoji-menu-content ul, .emoji-menu-content h5').hide();
-      $('.emoji-menu-content').append(h5).append(ul);
+      $('.emoji-menu-content')
+        .append(h5)
+        .append(ul);
     } else {
-      $('.emoji-menu-content').children().show();
+      $('.emoji-menu-content')
+        .children()
+        .show();
     }
   }
 
   findMatchingEmojiElements(query) {
     const emojiMatches = this.emoji.filterEmojiNamesByAlias(query);
     const $emojiElements = $('.emoji-menu-list:not(.frequent-emojis) [data-name]');
-    const $matchingElements = $emojiElements
-      .filter((i, elm) => emojiMatches.indexOf(elm.dataset.name) >= 0);
+    const $matchingElements = $emojiElements.filter(
+      (i, elm) => emojiMatches.indexOf(elm.dataset.name) >= 0,
+    );
     return $matchingElements.closest('li').clone();
   }
 
@@ -557,16 +591,13 @@ class AwardsHandler {
     $emojiMenu.addClass(IS_RENDERED);
 
     // enqueues animation as a microtask, so it begins ASAP once IS_RENDERED added
-    return Promise.resolve()
-      .then(() => $emojiMenu.addClass(IS_VISIBLE));
+    return Promise.resolve().then(() => $emojiMenu.addClass(IS_VISIBLE));
   }
 
   hideMenuElement($emojiMenu) {
-    $emojiMenu.on(transitionEndEventString, (e) => {
+    $emojiMenu.on(transitionEndEventString, e => {
       if (e.currentTarget === e.target) {
-        $emojiMenu
-          .removeClass(IS_RENDERED)
-          .off(transitionEndEventString);
+        $emojiMenu.removeClass(IS_RENDERED).off(transitionEndEventString);
       }
     });
 
@@ -574,7 +605,7 @@ class AwardsHandler {
   }
 
   destroy() {
-    this.eventListeners.forEach((entry) => {
+    this.eventListeners.forEach(entry => {
       entry.element.off.call(entry.element, ...entry.args);
     });
     $('.emoji-menu').remove();
@@ -584,8 +615,9 @@ class AwardsHandler {
 let awardsHandlerPromise = null;
 export default function loadAwardsHandler(reload = false) {
   if (!awardsHandlerPromise || reload) {
-    awardsHandlerPromise = import(/* webpackChunkName: 'emoji' */ './emoji')
-      .then(Emoji => new AwardsHandler(Emoji));
+    awardsHandlerPromise = import(/* webpackChunkName: 'emoji' */ './emoji').then(
+      Emoji => new AwardsHandler(Emoji),
+    );
   }
   return awardsHandlerPromise;
 }
diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
new file mode 100644
index 00000000000..b4bfaee1d85
--- /dev/null
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -0,0 +1,121 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import Tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  name: 'Badge',
+  components: {
+    Icon,
+    LoadingIcon,
+    Tooltip,
+  },
+  directives: {
+    Tooltip,
+  },
+  props: {
+    imageUrl: {
+      type: String,
+      required: true,
+    },
+    linkUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      hasError: false,
+      isLoading: true,
+      numRetries: 0,
+    };
+  },
+  computed: {
+    imageUrlWithRetries() {
+      if (this.numRetries === 0) {
+        return this.imageUrl;
+      }
+
+      return `${this.imageUrl}#retries=${this.numRetries}`;
+    },
+  },
+  watch: {
+    imageUrl() {
+      this.hasError = false;
+      this.isLoading = true;
+      this.numRetries = 0;
+    },
+  },
+  methods: {
+    onError() {
+      this.isLoading = false;
+      this.hasError = true;
+    },
+    onLoad() {
+      this.isLoading = false;
+    },
+    reloadImage() {
+      this.hasError = false;
+      this.isLoading = true;
+      this.numRetries += 1;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <a
+      v-show="!isLoading && !hasError"
+      :href="linkUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img
+        :src="imageUrlWithRetries"
+        class="project-badge"
+        aria-hidden="true"
+        @load="onLoad"
+        @error="onError"
+      />
+    </a>
+
+    <loading-icon
+      v-show="isLoading"
+      :inline="true"
+    />
+
+    <div
+      v-show="hasError"
+      class="btn-group"
+    >
+      <div class="btn btn-default btn-sm disabled">
+        <icon
+          :size="16"
+          class="prepend-left-8 append-right-8"
+          name="doc_image"
+          aria-hidden="true"
+        />
+      </div>
+      <div
+        class="btn btn-default btn-sm disabled"
+      >
+        <span class="prepend-left-8 append-right-8">{{ s__('Badges|No badge image') }}</span>
+      </div>
+    </div>
+
+    <button
+      v-tooltip
+      v-show="hasError"
+      :title="s__('Badges|Reload badge image')"
+      class="btn btn-transparent btn-sm text-primary"
+      type="button"
+      @click="reloadImage"
+    >
+      <icon
+        :size="16"
+        name="retry"
+      />
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
new file mode 100644
index 00000000000..7a13f74c570
--- /dev/null
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -0,0 +1,219 @@
+<script>
+import _ from 'underscore';
+import { mapActions, mapState } from 'vuex';
+import createFlash from '~/flash';
+import { s__, sprintf } from '~/locale';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import createEmptyBadge from '../empty_badge';
+import Badge from './badge.vue';
+
+const badgePreviewDelayInMilliseconds = 1500;
+
+export default {
+  name: 'BadgeForm',
+  components: {
+    Badge,
+    LoadingButton,
+    LoadingIcon,
+  },
+  props: {
+    isEditing: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState([
+      'badgeInAddForm',
+      'badgeInEditForm',
+      'docsUrl',
+      'isRendering',
+      'isSaving',
+      'renderedBadge',
+    ]),
+    badge() {
+      if (this.isEditing) {
+        return this.badgeInEditForm;
+      }
+
+      return this.badgeInAddForm;
+    },
+    canSubmit() {
+      return (
+        this.badge !== null &&
+        this.badge.imageUrl &&
+        this.badge.imageUrl.trim() !== '' &&
+        this.badge.linkUrl &&
+        this.badge.linkUrl.trim() !== '' &&
+        !this.isSaving
+      );
+    },
+    helpText() {
+      const placeholders = ['project_path', 'project_id', 'default_branch', 'commit_sha']
+        .map(placeholder => `<code>%{${placeholder}}</code>`)
+        .join(', ');
+      return sprintf(
+        s__('Badges|The %{docsLinkStart}variables%{docsLinkEnd} GitLab supports: %{placeholders}'),
+        {
+          docsLinkEnd: '</a>',
+          docsLinkStart: `<a href="${_.escape(this.docsUrl)}">`,
+          placeholders,
+        },
+        false,
+      );
+    },
+    renderedImageUrl() {
+      return this.renderedBadge ? this.renderedBadge.renderedImageUrl : '';
+    },
+    renderedLinkUrl() {
+      return this.renderedBadge ? this.renderedBadge.renderedLinkUrl : '';
+    },
+    imageUrl: {
+      get() {
+        return this.badge ? this.badge.imageUrl : '';
+      },
+      set(imageUrl) {
+        const badge = this.badge || createEmptyBadge();
+        this.updateBadgeInForm({
+          ...badge,
+          imageUrl,
+        });
+      },
+    },
+    linkUrl: {
+      get() {
+        return this.badge ? this.badge.linkUrl : '';
+      },
+      set(linkUrl) {
+        const badge = this.badge || createEmptyBadge();
+        this.updateBadgeInForm({
+          ...badge,
+          linkUrl,
+        });
+      },
+    },
+    submitButtonLabel() {
+      if (this.isEditing) {
+        return s__('Badges|Save changes');
+      }
+      return s__('Badges|Add badge');
+    },
+  },
+  methods: {
+    ...mapActions(['addBadge', 'renderBadge', 'saveBadge', 'stopEditing', 'updateBadgeInForm']),
+    debouncedPreview: _.debounce(function preview() {
+      this.renderBadge();
+    }, badgePreviewDelayInMilliseconds),
+    onCancel() {
+      this.stopEditing();
+    },
+    onSubmit() {
+      if (!this.canSubmit) {
+        return Promise.resolve();
+      }
+
+      if (this.isEditing) {
+        return this.saveBadge()
+          .then(() => {
+            createFlash(s__('Badges|The badge was saved.'), 'notice');
+          })
+          .catch(error => {
+            createFlash(
+              s__('Badges|Saving the badge failed, please check the entered URLs and try again.'),
+            );
+            throw error;
+          });
+      }
+
+      return this.addBadge()
+        .then(() => {
+          createFlash(s__('Badges|A new badge was added.'), 'notice');
+        })
+        .catch(error => {
+          createFlash(
+            s__('Badges|Adding the badge failed, please check the entered URLs and try again.'),
+          );
+          throw error;
+        });
+    },
+  },
+  badgeImageUrlPlaceholder:
+    'https://example.gitlab.com/%{project_path}/badges/%{default_branch}/<badge>.svg',
+  badgeLinkUrlPlaceholder: 'https://example.gitlab.com/%{project_path}',
+};
+</script>
+
+<template>
+  <form
+    class="prepend-top-default append-bottom-default"
+    @submit.prevent.stop="onSubmit"
+  >
+    <div class="form-group">
+      <label for="badge-link-url">{{ s__('Badges|Link') }}</label>
+      <input
+        id="badge-link-url"
+        v-model="linkUrl"
+        :placeholder="$options.badgeLinkUrlPlaceholder"
+        type="text"
+        class="form-control"
+        @input="debouncedPreview"
+      />
+      <span
+        class="form-text text-muted"
+        v-html="helpText"
+      ></span>
+    </div>
+
+    <div class="form-group">
+      <label for="badge-image-url">{{ s__('Badges|Badge image URL') }}</label>
+      <input
+        id="badge-image-url"
+        v-model="imageUrl"
+        :placeholder="$options.badgeImageUrlPlaceholder"
+        type="text"
+        class="form-control"
+        @input="debouncedPreview"
+      />
+      <span
+        class="form-text text-muted"
+        v-html="helpText"
+      ></span>
+    </div>
+
+    <div class="form-group">
+      <label for="badge-preview">{{ s__('Badges|Badge image preview') }}</label>
+      <badge
+        v-show="renderedBadge && !isRendering"
+        id="badge-preview"
+        :image-url="renderedImageUrl"
+        :link-url="renderedLinkUrl"
+      />
+      <p v-show="isRendering">
+        <loading-icon
+          :inline="true"
+        />
+      </p>
+      <p
+        v-show="!renderedBadge && !isRendering"
+        class="disabled-content"
+      >{{ s__('Badges|No image to preview') }}</p>
+    </div>
+
+    <div class="row-content-block">
+      <loading-button
+        :disabled="!canSubmit"
+        :loading="isSaving"
+        :label="submitButtonLabel"
+        type="submit"
+        container-class="btn btn-success"
+      />
+      <button
+        v-if="isEditing"
+        class="btn btn-cancel"
+        type="button"
+        @click="onCancel"
+      >{{ __('Cancel') }}</button>
+    </div>
+  </form>
+</template>
diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue
new file mode 100644
index 00000000000..268968b63b3
--- /dev/null
+++ b/app/assets/javascripts/badges/components/badge_list.vue
@@ -0,0 +1,57 @@
+<script>
+import { mapState } from 'vuex';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import BadgeListRow from './badge_list_row.vue';
+import { GROUP_BADGE } from '../constants';
+
+export default {
+  name: 'BadgeList',
+  components: {
+    BadgeListRow,
+    LoadingIcon,
+  },
+  computed: {
+    ...mapState(['badges', 'isLoading', 'kind']),
+    hasNoBadges() {
+      return !this.isLoading && (!this.badges || !this.badges.length);
+    },
+    isGroupBadge() {
+      return this.kind === GROUP_BADGE;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="card">
+    <div class="card-header">
+      {{ s__('Badges|Your badges') }}
+      <span
+        v-show="!isLoading"
+        class="badge"
+      >{{ badges.length }}</span>
+    </div>
+    <loading-icon
+      v-show="isLoading"
+      class="card-body"
+      size="2"
+    />
+    <div
+      v-if="hasNoBadges"
+      class="card-body"
+    >
+      <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
+      <span v-else>{{ s__('Badges|This project has no badges') }}</span>
+    </div>
+    <div
+      v-else
+      class="card-body"
+    >
+      <badge-list-row
+        v-for="badge in badges"
+        :key="badge.id"
+        :badge="badge"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
new file mode 100644
index 00000000000..98aa00af0d7
--- /dev/null
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -0,0 +1,89 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+import { s__ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import { PROJECT_BADGE } from '../constants';
+import Badge from './badge.vue';
+
+export default {
+  name: 'BadgeListRow',
+  components: {
+    Badge,
+    Icon,
+    LoadingIcon,
+  },
+  props: {
+    badge: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['kind']),
+    badgeKindText() {
+      if (this.badge.kind === PROJECT_BADGE) {
+        return s__('Badges|Project Badge');
+      }
+
+      return s__('Badges|Group Badge');
+    },
+    canEditBadge() {
+      return this.badge.kind === this.kind;
+    },
+  },
+  methods: {
+    ...mapActions(['editBadge', 'updateBadgeInModal']),
+  },
+};
+</script>
+
+<template>
+  <div class="gl-responsive-table-row-layout gl-responsive-table-row">
+    <badge
+      :image-url="badge.renderedImageUrl"
+      :link-url="badge.renderedLinkUrl"
+      class="table-section section-30"
+    />
+    <span class="table-section section-50 str-truncated">{{ badge.linkUrl }}</span>
+    <div class="table-section section-10">
+      <span class="badge">{{ badgeKindText }}</span>
+    </div>
+    <div class="table-section section-10 table-button-footer">
+      <div
+        v-if="canEditBadge"
+        class="table-action-buttons">
+        <button
+          :disabled="badge.isDeleting"
+          class="btn btn-default append-right-8"
+          type="button"
+          @click="editBadge(badge)"
+        >
+          <icon
+            :size="16"
+            :aria-label="__('Edit')"
+            name="pencil"
+          />
+        </button>
+        <button
+          :disabled="badge.isDeleting"
+          class="btn btn-danger"
+          type="button"
+          data-toggle="modal"
+          data-target="#delete-badge-modal"
+          @click="updateBadgeInModal(badge)"
+        >
+          <icon
+            :size="16"
+            :aria-label="__('Delete')"
+            name="remove"
+          />
+        </button>
+        <loading-icon
+          v-show="badge.isDeleting"
+          :inline="true"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue
new file mode 100644
index 00000000000..cc47e56dd1e
--- /dev/null
+++ b/app/assets/javascripts/badges/components/badge_settings.vue
@@ -0,0 +1,70 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import Badge from './badge.vue';
+import BadgeForm from './badge_form.vue';
+import BadgeList from './badge_list.vue';
+
+export default {
+  name: 'BadgeSettings',
+  components: {
+    Badge,
+    BadgeForm,
+    BadgeList,
+    GlModal,
+  },
+  computed: {
+    ...mapState(['badgeInModal', 'isEditing']),
+    deleteModalText() {
+      return s__(
+        'Badges|You are going to delete this badge. Deleted badges <strong>cannot</strong> be restored.',
+      );
+    },
+  },
+  methods: {
+    ...mapActions(['deleteBadge']),
+    onSubmitModal() {
+      this.deleteBadge(this.badgeInModal)
+        .then(() => {
+          createFlash(s__('Badges|The badge was deleted.'), 'notice');
+        })
+        .catch(error => {
+          createFlash(s__('Badges|Deleting the badge failed, please try again.'));
+          throw error;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="badge-settings">
+    <gl-modal
+      id="delete-badge-modal"
+      :header-title-text="s__('Badges|Delete badge?')"
+      :footer-primary-button-text="s__('Badges|Delete badge')"
+      footer-primary-button-variant="danger"
+      @submit="onSubmitModal">
+      <div class="well">
+        <badge
+          :image-url="badgeInModal ? badgeInModal.renderedImageUrl : ''"
+          :link-url="badgeInModal ? badgeInModal.renderedLinkUrl : ''"
+        />
+      </div>
+      <p v-html="deleteModalText"></p>
+    </gl-modal>
+
+    <badge-form
+      v-show="isEditing"
+      :is-editing="true"
+    />
+
+    <badge-form
+      v-show="!isEditing"
+      :is-editing="false"
+    />
+    <badge-list v-show="!isEditing" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/badges/constants.js b/app/assets/javascripts/badges/constants.js
new file mode 100644
index 00000000000..8fbe3db5ef1
--- /dev/null
+++ b/app/assets/javascripts/badges/constants.js
@@ -0,0 +1,2 @@
+export const GROUP_BADGE = 'group';
+export const PROJECT_BADGE = 'project';
diff --git a/app/assets/javascripts/badges/empty_badge.js b/app/assets/javascripts/badges/empty_badge.js
new file mode 100644
index 00000000000..49a9b5e1be8
--- /dev/null
+++ b/app/assets/javascripts/badges/empty_badge.js
@@ -0,0 +1,7 @@
+export default () => ({
+  imageUrl: '',
+  isDeleting: false,
+  linkUrl: '',
+  renderedImageUrl: '',
+  renderedLinkUrl: '',
+});
diff --git a/app/assets/javascripts/badges/store/actions.js b/app/assets/javascripts/badges/store/actions.js
new file mode 100644
index 00000000000..5542278b3e0
--- /dev/null
+++ b/app/assets/javascripts/badges/store/actions.js
@@ -0,0 +1,167 @@
+import axios from '~/lib/utils/axios_utils';
+import types from './mutation_types';
+
+export const transformBackendBadge = badge => ({
+  id: badge.id,
+  imageUrl: badge.image_url,
+  kind: badge.kind,
+  linkUrl: badge.link_url,
+  renderedImageUrl: badge.rendered_image_url,
+  renderedLinkUrl: badge.rendered_link_url,
+  isDeleting: false,
+});
+
+export default {
+  requestNewBadge({ commit }) {
+    commit(types.REQUEST_NEW_BADGE);
+  },
+  receiveNewBadge({ commit }, newBadge) {
+    commit(types.RECEIVE_NEW_BADGE, newBadge);
+  },
+  receiveNewBadgeError({ commit }) {
+    commit(types.RECEIVE_NEW_BADGE_ERROR);
+  },
+  addBadge({ dispatch, state }) {
+    const newBadge = state.badgeInAddForm;
+    const endpoint = state.apiEndpointUrl;
+    dispatch('requestNewBadge');
+    return axios
+      .post(endpoint, {
+        image_url: newBadge.imageUrl,
+        link_url: newBadge.linkUrl,
+      })
+      .catch(error => {
+        dispatch('receiveNewBadgeError');
+        throw error;
+      })
+      .then(res => {
+        dispatch('receiveNewBadge', transformBackendBadge(res.data));
+      });
+  },
+  requestDeleteBadge({ commit }, badgeId) {
+    commit(types.REQUEST_DELETE_BADGE, badgeId);
+  },
+  receiveDeleteBadge({ commit }, badgeId) {
+    commit(types.RECEIVE_DELETE_BADGE, badgeId);
+  },
+  receiveDeleteBadgeError({ commit }, badgeId) {
+    commit(types.RECEIVE_DELETE_BADGE_ERROR, badgeId);
+  },
+  deleteBadge({ dispatch, state }, badge) {
+    const badgeId = badge.id;
+    dispatch('requestDeleteBadge', badgeId);
+    const endpoint = `${state.apiEndpointUrl}/${badgeId}`;
+    return axios
+      .delete(endpoint)
+      .catch(error => {
+        dispatch('receiveDeleteBadgeError', badgeId);
+        throw error;
+      })
+      .then(() => {
+        dispatch('receiveDeleteBadge', badgeId);
+      });
+  },
+
+  editBadge({ commit }, badge) {
+    commit(types.START_EDITING, badge);
+  },
+
+  requestLoadBadges({ commit }, data) {
+    commit(types.REQUEST_LOAD_BADGES, data);
+  },
+  receiveLoadBadges({ commit }, badges) {
+    commit(types.RECEIVE_LOAD_BADGES, badges);
+  },
+  receiveLoadBadgesError({ commit }) {
+    commit(types.RECEIVE_LOAD_BADGES_ERROR);
+  },
+
+  loadBadges({ dispatch, state }, data) {
+    dispatch('requestLoadBadges', data);
+    const endpoint = state.apiEndpointUrl;
+    return axios
+      .get(endpoint)
+      .catch(error => {
+        dispatch('receiveLoadBadgesError');
+        throw error;
+      })
+      .then(res => {
+        dispatch('receiveLoadBadges', res.data.map(transformBackendBadge));
+      });
+  },
+
+  requestRenderedBadge({ commit }) {
+    commit(types.REQUEST_RENDERED_BADGE);
+  },
+  receiveRenderedBadge({ commit }, renderedBadge) {
+    commit(types.RECEIVE_RENDERED_BADGE, renderedBadge);
+  },
+  receiveRenderedBadgeError({ commit }) {
+    commit(types.RECEIVE_RENDERED_BADGE_ERROR);
+  },
+
+  renderBadge({ dispatch, state }) {
+    const badge = state.isEditing ? state.badgeInEditForm : state.badgeInAddForm;
+    const { linkUrl, imageUrl } = badge;
+    if (!linkUrl || linkUrl.trim() === '' || !imageUrl || imageUrl.trim() === '') {
+      return Promise.resolve(badge);
+    }
+
+    dispatch('requestRenderedBadge');
+
+    const parameters = [
+      `link_url=${encodeURIComponent(linkUrl)}`,
+      `image_url=${encodeURIComponent(imageUrl)}`,
+    ].join('&');
+    const renderEndpoint = `${state.apiEndpointUrl}/render?${parameters}`;
+    return axios
+      .get(renderEndpoint)
+      .catch(error => {
+        dispatch('receiveRenderedBadgeError');
+        throw error;
+      })
+      .then(res => {
+        dispatch('receiveRenderedBadge', transformBackendBadge(res.data));
+      });
+  },
+
+  requestUpdatedBadge({ commit }) {
+    commit(types.REQUEST_UPDATED_BADGE);
+  },
+  receiveUpdatedBadge({ commit }, updatedBadge) {
+    commit(types.RECEIVE_UPDATED_BADGE, updatedBadge);
+  },
+  receiveUpdatedBadgeError({ commit }) {
+    commit(types.RECEIVE_UPDATED_BADGE_ERROR);
+  },
+
+  saveBadge({ dispatch, state }) {
+    const badge = state.badgeInEditForm;
+    const endpoint = `${state.apiEndpointUrl}/${badge.id}`;
+    dispatch('requestUpdatedBadge');
+    return axios
+      .put(endpoint, {
+        image_url: badge.imageUrl,
+        link_url: badge.linkUrl,
+      })
+      .catch(error => {
+        dispatch('receiveUpdatedBadgeError');
+        throw error;
+      })
+      .then(res => {
+        dispatch('receiveUpdatedBadge', transformBackendBadge(res.data));
+      });
+  },
+
+  stopEditing({ commit }) {
+    commit(types.STOP_EDITING);
+  },
+
+  updateBadgeInForm({ commit }, badge) {
+    commit(types.UPDATE_BADGE_IN_FORM, badge);
+  },
+
+  updateBadgeInModal({ commit }, badge) {
+    commit(types.UPDATE_BADGE_IN_MODAL, badge);
+  },
+};
diff --git a/app/assets/javascripts/badges/store/index.js b/app/assets/javascripts/badges/store/index.js
new file mode 100644
index 00000000000..7a5df403a0e
--- /dev/null
+++ b/app/assets/javascripts/badges/store/index.js
@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import createState from './state';
+import actions from './actions';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: createState(),
+  actions,
+  mutations,
+});
diff --git a/app/assets/javascripts/badges/store/mutation_types.js b/app/assets/javascripts/badges/store/mutation_types.js
new file mode 100644
index 00000000000..d73f91b6005
--- /dev/null
+++ b/app/assets/javascripts/badges/store/mutation_types.js
@@ -0,0 +1,21 @@
+export default {
+  RECEIVE_DELETE_BADGE: 'RECEIVE_DELETE_BADGE',
+  RECEIVE_DELETE_BADGE_ERROR: 'RECEIVE_DELETE_BADGE_ERROR',
+  RECEIVE_LOAD_BADGES: 'RECEIVE_LOAD_BADGES',
+  RECEIVE_LOAD_BADGES_ERROR: 'RECEIVE_LOAD_BADGES_ERROR',
+  RECEIVE_NEW_BADGE: 'RECEIVE_NEW_BADGE',
+  RECEIVE_NEW_BADGE_ERROR: 'RECEIVE_NEW_BADGE_ERROR',
+  RECEIVE_RENDERED_BADGE: 'RECEIVE_RENDERED_BADGE',
+  RECEIVE_RENDERED_BADGE_ERROR: 'RECEIVE_RENDERED_BADGE_ERROR',
+  RECEIVE_UPDATED_BADGE: 'RECEIVE_UPDATED_BADGE',
+  RECEIVE_UPDATED_BADGE_ERROR: 'RECEIVE_UPDATED_BADGE_ERROR',
+  REQUEST_DELETE_BADGE: 'REQUEST_DELETE_BADGE',
+  REQUEST_LOAD_BADGES: 'REQUEST_LOAD_BADGES',
+  REQUEST_NEW_BADGE: 'REQUEST_NEW_BADGE',
+  REQUEST_RENDERED_BADGE: 'REQUEST_RENDERED_BADGE',
+  REQUEST_UPDATED_BADGE: 'REQUEST_UPDATED_BADGE',
+  START_EDITING: 'START_EDITING',
+  STOP_EDITING: 'STOP_EDITING',
+  UPDATE_BADGE_IN_FORM: 'UPDATE_BADGE_IN_FORM',
+  UPDATE_BADGE_IN_MODAL: 'UPDATE_BADGE_IN_MODAL',
+};
diff --git a/app/assets/javascripts/badges/store/mutations.js b/app/assets/javascripts/badges/store/mutations.js
new file mode 100644
index 00000000000..bd84e68c00f
--- /dev/null
+++ b/app/assets/javascripts/badges/store/mutations.js
@@ -0,0 +1,158 @@
+import types from './mutation_types';
+import { PROJECT_BADGE } from '../constants';
+
+const reorderBadges = badges =>
+  badges.sort((a, b) => {
+    if (a.kind !== b.kind) {
+      return a.kind === PROJECT_BADGE ? 1 : -1;
+    }
+
+    return a.id - b.id;
+  });
+
+export default {
+  [types.RECEIVE_NEW_BADGE](state, newBadge) {
+    Object.assign(state, {
+      badgeInAddForm: null,
+      badges: reorderBadges(state.badges.concat(newBadge)),
+      isSaving: false,
+      renderedBadge: null,
+    });
+  },
+  [types.RECEIVE_NEW_BADGE_ERROR](state) {
+    Object.assign(state, {
+      isSaving: false,
+    });
+  },
+  [types.REQUEST_NEW_BADGE](state) {
+    Object.assign(state, {
+      isSaving: true,
+    });
+  },
+
+  [types.RECEIVE_UPDATED_BADGE](state, updatedBadge) {
+    const badges = state.badges.map(badge => {
+      if (badge.id === updatedBadge.id) {
+        return updatedBadge;
+      }
+      return badge;
+    });
+    Object.assign(state, {
+      badgeInEditForm: null,
+      badges,
+      isEditing: false,
+      isSaving: false,
+      renderedBadge: null,
+    });
+  },
+  [types.RECEIVE_UPDATED_BADGE_ERROR](state) {
+    Object.assign(state, {
+      isSaving: false,
+    });
+  },
+  [types.REQUEST_UPDATED_BADGE](state) {
+    Object.assign(state, {
+      isSaving: true,
+    });
+  },
+
+  [types.RECEIVE_LOAD_BADGES](state, badges) {
+    Object.assign(state, {
+      badges: reorderBadges(badges),
+      isLoading: false,
+    });
+  },
+  [types.RECEIVE_LOAD_BADGES_ERROR](state) {
+    Object.assign(state, {
+      isLoading: false,
+    });
+  },
+  [types.REQUEST_LOAD_BADGES](state, data) {
+    Object.assign(state, {
+      kind: data.kind, // project or group
+      apiEndpointUrl: data.apiEndpointUrl,
+      docsUrl: data.docsUrl,
+      isLoading: true,
+    });
+  },
+
+  [types.RECEIVE_DELETE_BADGE](state, badgeId) {
+    const badges = state.badges.filter(badge => badge.id !== badgeId);
+    Object.assign(state, {
+      badges,
+    });
+  },
+  [types.RECEIVE_DELETE_BADGE_ERROR](state, badgeId) {
+    const badges = state.badges.map(badge => {
+      if (badge.id === badgeId) {
+        return {
+          ...badge,
+          isDeleting: false,
+        };
+      }
+
+      return badge;
+    });
+    Object.assign(state, {
+      badges,
+    });
+  },
+  [types.REQUEST_DELETE_BADGE](state, badgeId) {
+    const badges = state.badges.map(badge => {
+      if (badge.id === badgeId) {
+        return {
+          ...badge,
+          isDeleting: true,
+        };
+      }
+
+      return badge;
+    });
+    Object.assign(state, {
+      badges,
+    });
+  },
+
+  [types.RECEIVE_RENDERED_BADGE](state, renderedBadge) {
+    Object.assign(state, { isRendering: false, renderedBadge });
+  },
+  [types.RECEIVE_RENDERED_BADGE_ERROR](state) {
+    Object.assign(state, { isRendering: false });
+  },
+  [types.REQUEST_RENDERED_BADGE](state) {
+    Object.assign(state, { isRendering: true });
+  },
+
+  [types.START_EDITING](state, badge) {
+    Object.assign(state, {
+      badgeInEditForm: { ...badge },
+      isEditing: true,
+      renderedBadge: { ...badge },
+    });
+  },
+  [types.STOP_EDITING](state) {
+    Object.assign(state, {
+      badgeInEditForm: null,
+      isEditing: false,
+      renderedBadge: null,
+    });
+  },
+
+  [types.UPDATE_BADGE_IN_FORM](state, badge) {
+    if (state.isEditing) {
+      Object.assign(state, {
+        badgeInEditForm: badge,
+      });
+    } else {
+      Object.assign(state, {
+        badgeInAddForm: badge,
+      });
+    }
+  },
+
+  [types.UPDATE_BADGE_IN_MODAL](state, badge) {
+    Object.assign(state, {
+      badgeInModal: badge,
+    });
+  },
+};
diff --git a/app/assets/javascripts/badges/store/state.js b/app/assets/javascripts/badges/store/state.js
new file mode 100644
index 00000000000..43413aeb5bb
--- /dev/null
+++ b/app/assets/javascripts/badges/store/state.js
@@ -0,0 +1,13 @@
+export default () => ({
+  apiEndpointUrl: null,
+  badgeInAddForm: null,
+  badgeInEditForm: null,
+  badgeInModal: null,
+  badges: [],
+  docsUrl: null,
+  renderedBadge: null,
+  isEditing: false,
+  isLoading: false,
+  isRendering: false,
+  isSaving: false,
+});
diff --git a/app/assets/javascripts/behaviors/copy_to_clipboard.js b/app/assets/javascripts/behaviors/copy_to_clipboard.js
index e2a73a1797c..00419e80cbb 100644
--- a/app/assets/javascripts/behaviors/copy_to_clipboard.js
+++ b/app/assets/javascripts/behaviors/copy_to_clipboard.js
@@ -8,10 +8,10 @@ function showTooltip(target, title) {
   if (!$target.data('hideTooltip')) {
     $target
       .attr('title', title)
-      .tooltip('fixTitle')
+      .tooltip('_fixTitle')
       .tooltip('show')
       .attr('title', originalTitle)
-      .tooltip('fixTitle');
+      .tooltip('_fixTitle');
   }
 }
 
@@ -52,7 +52,7 @@ export default function initCopyToClipboard() {
    * data types to the intended values.
    */
   $(document).on('copy', 'body > textarea[readonly]', (e) => {
-    const clipboardData = e.originalEvent.clipboardData;
+    const { clipboardData } = e.originalEvent;
     if (!clipboardData) return;
 
     const text = e.target.value;
diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
index 7e98e04303a..56293d5f96f 100644
--- a/app/assets/javascripts/behaviors/gl_emoji.js
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -7,27 +7,24 @@ export default function installGlEmojiElement() {
   const GlEmojiElementProto = Object.create(HTMLElement.prototype);
   GlEmojiElementProto.createdCallback = function createdCallback() {
     const emojiUnicode = this.textContent.trim();
-    const {
-      name,
-      unicodeVersion,
-      fallbackSrc,
-      fallbackSpriteClass,
-    } = this.dataset;
+    const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
 
-    const isEmojiUnicode = this.childNodes && Array.prototype.every.call(
-      this.childNodes,
-      childNode => childNode.nodeType === 3,
-    );
+    const isEmojiUnicode =
+      this.childNodes &&
+      Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
     const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
     const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
 
-    if (
-      emojiUnicode &&
-      isEmojiUnicode &&
-      !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
-    ) {
+    if (emojiUnicode && isEmojiUnicode && !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)) {
       // CSS sprite fallback takes precedence over image fallback
       if (hasCssSpriteFalback) {
+        if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
+          const emojiSpriteLinkTag = document.createElement('link');
+          emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
+          emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
+          document.head.appendChild(emojiSpriteLinkTag);
+          gon.emoji_sprites_css_added = true;
+        }
         // IE 11 doesn't like adding multiple at once :(
         this.classList.add('emoji-icon');
         this.classList.add(fallbackSpriteClass);
diff --git a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
index 75cf90de0b5..5d7a3bed301 100644
--- a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
@@ -1,4 +1,4 @@
-/* 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 */
+/* eslint-disable object-shorthand, no-unused-vars, no-use-before-define, max-len, no-restricted-syntax, guard-for-in, no-continue */
 
 import $ from 'jquery';
 import _ from 'underscore';
@@ -119,7 +119,7 @@ const gfmRules = {
       return el.outerHTML;
     },
     'dl'(el, text) {
-      let lines = text.trim().split('\n');
+      let lines = text.replace(/\n\n/g, '\n').trim().split('\n');
       // Add two spaces to the front of subsequent list items lines,
       // or leave the line entirely blank.
       lines = lines.map((l) => {
@@ -129,9 +129,13 @@ const gfmRules = {
         return `  ${line}`;
       });
 
-      return `<dl>\n${lines.join('\n')}\n</dl>`;
+      return `<dl>\n${lines.join('\n')}\n</dl>\n`;
     },
-    'sub, dt, dd, kbd, q, samp, var, ruby, rt, rp, abbr, summary, details'(el, text) {
+    'dt, dd, summary, details'(el, text) {
+      const tag = el.nodeName.toLowerCase();
+      return `<${tag}>${text}</${tag}>\n`;
+    },
+    'sup, sub, kbd, q, samp, var, ruby, rt, rp, abbr'(el, text) {
       const tag = el.nodeName.toLowerCase();
       return `<${tag}>${text}</${tag}>`;
     },
@@ -215,22 +219,22 @@ const gfmRules = {
       return text.replace(/^- /mg, '1. ');
     },
     'h1'(el, text) {
-      return `# ${text.trim()}`;
+      return `# ${text.trim()}\n`;
     },
     'h2'(el, text) {
-      return `## ${text.trim()}`;
+      return `## ${text.trim()}\n`;
     },
     'h3'(el, text) {
-      return `### ${text.trim()}`;
+      return `### ${text.trim()}\n`;
     },
     'h4'(el, text) {
-      return `#### ${text.trim()}`;
+      return `#### ${text.trim()}\n`;
     },
     'h5'(el, text) {
-      return `##### ${text.trim()}`;
+      return `##### ${text.trim()}\n`;
     },
     'h6'(el, text) {
-      return `###### ${text.trim()}`;
+      return `###### ${text.trim()}\n`;
     },
     'strong'(el, text) {
       return `**${text}**`;
@@ -241,11 +245,13 @@ const gfmRules = {
     'del'(el, text) {
       return `~~${text}~~`;
     },
-    'sup'(el, text) {
-      return `^${text}`;
-    },
     'hr'(el) {
-      return '-----';
+      // extra leading \n is to ensure that there is a blank line between
+      // a list followed by an hr, otherwise this breaks old redcarpet rendering
+      return '\n-----\n';
+    },
+    'p'(el, text) {
+      return `${text.trim()}\n`;
     },
     'table'(el) {
       const theadEl = el.querySelector('thead');
@@ -263,7 +269,9 @@ const gfmRules = {
 
         let before = '';
         let after = '';
-        switch (cell.style.textAlign) {
+        const alignment = cell.align || cell.style.textAlign;
+
+        switch (alignment) {
           case 'center':
             before = ':';
             after = ':';
@@ -313,7 +321,7 @@ export class CopyAsGFM {
   }
 
   static copyAsGFM(e, transformer) {
-    const clipboardData = e.originalEvent.clipboardData;
+    const { clipboardData } = e.originalEvent;
     if (!clipboardData) return;
 
     const documentFragment = getSelectedFragment();
@@ -330,7 +338,7 @@ export class CopyAsGFM {
   }
 
   static pasteGFM(e) {
-    const clipboardData = e.originalEvent.clipboardData;
+    const { clipboardData } = e.originalEvent;
     if (!clipboardData) return;
 
     const text = clipboardData.getData('text/plain');
diff --git a/app/assets/javascripts/behaviors/markdown/render_math.js b/app/assets/javascripts/behaviors/markdown/render_math.js
index 7dcf1aeed17..eb4e59d12b1 100644
--- a/app/assets/javascripts/behaviors/markdown/render_math.js
+++ b/app/assets/javascripts/behaviors/markdown/render_math.js
@@ -31,7 +31,7 @@ export default function renderMath($els) {
   if (!$els.length) return;
   Promise.all([
     import(/* webpackChunkName: 'katex' */ 'katex'),
-    import(/* webpackChunkName: 'katex' */ 'katex/dist/katex.css'),
+    import(/* webpackChunkName: 'katex' */ 'katex/dist/katex.min.css'),
   ]).then(([katex]) => {
     renderWithKaTeX($els, katex);
   }).catch(() => flash(__('An error occurred while rendering KaTeX')));
diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js
index 3ec932bdb73..b6e2781773c 100644
--- a/app/assets/javascripts/behaviors/quick_submit.js
+++ b/app/assets/javascripts/behaviors/quick_submit.js
@@ -69,7 +69,7 @@ $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-q
   $this.tooltip({
     container: 'body',
     html: 'true',
-    placement: 'auto top',
+    placement: 'top',
     title,
     trigger: 'manual',
   });
diff --git a/app/assets/javascripts/behaviors/requires_input.js b/app/assets/javascripts/behaviors/requires_input.js
index ffff4ddb71a..a8b6dbf0948 100644
--- a/app/assets/javascripts/behaviors/requires_input.js
+++ b/app/assets/javascripts/behaviors/requires_input.js
@@ -42,9 +42,9 @@ $.fn.requiresInput = function requiresInput() {
 function hideOrShowHelpBlock(form) {
   const selected = $('.js-select-namespace option:selected');
   if (selected.length && selected.data('optionsParent') === 'groups') {
-    form.find('.help-block').hide();
+    form.find('.form-text.text-muted').hide();
   } else if (selected.length) {
-    form.find('.help-block').show();
+    form.find('.form-text.text-muted').show();
   }
 }
 
diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
index c17877a276d..7986287f7e7 100644
--- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
@@ -2,9 +2,9 @@ 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">
+  <div class="card">
+    <div class="card-header"><%- name %></div>
+    <div class="card-body">
       <img class="img-thumbnail" src="data:image/png;base64,<%- image %>"/>
     </div>
   </div>
@@ -84,7 +84,7 @@ class BalsamiqViewer {
   renderTemplate(preview) {
     const resource = this.getResource(preview.resourceID);
     const name = BalsamiqViewer.parseTitle(resource);
-    const image = preview.image;
+    const { image } = preview;
 
     const template = PREVIEW_TEMPLATE({
       name,
diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js
index 06ef86ecb77..b88e69a07bf 100644
--- a/app/assets/javascripts/blob/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq_viewer.js
@@ -12,7 +12,7 @@ export default function loadBalsamiqFile() {
 
   if (!(viewer instanceof Element)) return;
 
-  const endpoint = viewer.dataset.endpoint;
+  const { endpoint } = viewer.dataset;
 
   const balsamiqViewer = new BalsamiqViewer(viewer);
   balsamiqViewer.loadFile(endpoint).catch(onError);
diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js
index 030ca1907e5..ff1cbcad145 100644
--- a/app/assets/javascripts/blob/file_template_mediator.js
+++ b/app/assets/javascripts/blob/file_template_mediator.js
@@ -94,7 +94,7 @@ export default class FileTemplateMediator {
       const hash = urlPieces[1];
       if (hash === 'preview') {
         this.hideTemplateSelectorMenu();
-      } else if (hash === 'editor') {
+      } else if (hash === 'editor' && !this.typeSelector.isHidden()) {
         this.showTemplateSelectorMenu();
       }
     });
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js
index e52cf249f3a..02228434a29 100644
--- a/app/assets/javascripts/blob/file_template_selector.js
+++ b/app/assets/javascripts/blob/file_template_selector.js
@@ -32,6 +32,10 @@ export default class FileTemplateSelector {
     }
   }
 
+  isHidden() {
+    return this.$wrapper.hasClass('hidden');
+  }
+
   getToggleText() {
     return this.$dropdownToggleText.text();
   }
diff --git a/app/assets/javascripts/blob/pdf/index.js b/app/assets/javascripts/blob/pdf/index.js
index 70136cc4087..7d5f487c4ba 100644
--- a/app/assets/javascripts/blob/pdf/index.js
+++ b/app/assets/javascripts/blob/pdf/index.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-new */
 import Vue from 'vue';
 import pdfLab from '../../pdf/index.vue';
 
diff --git a/app/assets/javascripts/blob/sketch/index.js b/app/assets/javascripts/blob/sketch/index.js
index 0799991aa40..13318c58006 100644
--- a/app/assets/javascripts/blob/sketch/index.js
+++ b/app/assets/javascripts/blob/sketch/index.js
@@ -44,7 +44,7 @@ export default class SketchLoader {
     previewLink.href = previewUrl;
     previewLink.target = '_blank';
     previewImage.src = previewUrl;
-    previewImage.className = 'img-responsive';
+    previewImage.className = 'img-fluid';
 
     previewLink.appendChild(previewImage);
     this.container.appendChild(previewLink);
diff --git a/app/assets/javascripts/blob/stl_viewer.js b/app/assets/javascripts/blob/stl_viewer.js
index 63236b6477f..339906adc34 100644
--- a/app/assets/javascripts/blob/stl_viewer.js
+++ b/app/assets/javascripts/blob/stl_viewer.js
@@ -5,7 +5,7 @@ export default () => {
 
   [].slice.call(document.querySelectorAll('.js-material-changer')).forEach((el) => {
     el.addEventListener('click', (e) => {
-      const target = e.target;
+      const { target } = e;
 
       e.preventDefault();
 
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 137e1f5a099..5485248cfaf 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -70,7 +70,7 @@ export default class BlobViewer {
     const initialViewer = this.$fileHolder[0].querySelector('.blob-viewer:not(.hidden)');
     let initialViewerName = initialViewer.getAttribute('data-type');
 
-    if (this.switcher && location.hash.indexOf('#L') === 0) {
+    if (this.switcher && window.location.hash.indexOf('#L') === 0) {
       initialViewerName = 'simple';
     }
 
@@ -116,7 +116,7 @@ export default class BlobViewer {
       this.copySourceBtn.classList.add('disabled');
     }
 
-    $(this.copySourceBtn).tooltip('fixTitle');
+    $(this.copySourceBtn).tooltip('_fixTitle');
   }
 
   switchToViewer(name) {
diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index 4424232f642..a603d89b84a 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -1,5 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, vars-on-top, no-unused-vars, no-new, max-len */
-/* global EditBlob */
+/* eslint-disable no-new */
 
 import $ from 'jquery';
 import NewCommitForm from '../new_commit_form';
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 3cffd91716a..a2355d7fd5c 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -1,11 +1,10 @@
-/* eslint-disable comma-dangle, space-before-function-paren, one-var */
+/* eslint-disable comma-dangle */
 
-import $ from 'jquery';
-import Sortable from 'vendor/Sortable';
+import Sortable from 'sortablejs';
 import Vue from 'vue';
 import AccessorUtilities from '../../lib/utils/accessor';
 import boardList from './board_list.vue';
-import boardBlankState from './board_blank_state';
+import BoardBlankState from './board_blank_state.vue';
 import './board_delete';
 
 const Store = gl.issueBoards.BoardsStore;
@@ -14,17 +13,28 @@ window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.Board = Vue.extend({
-  template: '#js-board-template',
   components: {
     boardList,
     'board-delete': gl.issueBoards.BoardDelete,
-    boardBlankState,
+    BoardBlankState,
   },
   props: {
-    list: Object,
-    disabled: Boolean,
-    issueLinkBase: String,
-    rootPath: String,
+    list: {
+      type: Object,
+      default: () => ({}),
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    issueLinkBase: {
+      type: String,
+      required: true,
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
     boardId: {
       type: String,
       required: true,
@@ -46,56 +56,8 @@ gl.issueBoards.Board = Vue.extend({
           });
       },
       deep: true,
-    },
-    detailIssue: {
-      handler () {
-        if (!Object.keys(this.detailIssue.issue).length) return;
-
-        const issue = this.list.findIssue(this.detailIssue.issue.id);
-
-        if (issue) {
-          const offsetLeft = this.$el.offsetLeft;
-          const boardsList = document.querySelectorAll('.boards-list')[0];
-          const left = boardsList.scrollLeft - offsetLeft;
-          let right = (offsetLeft + this.$el.offsetWidth);
-
-          if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) {
-            // -290 here because width of boardsList is animating so therefore
-            // getting the width here is incorrect
-            // 290 is the width of the sidebar
-            right -= (boardsList.offsetWidth - 290);
-          } else {
-            right -= boardsList.offsetWidth;
-          }
-
-          if (right - boardsList.scrollLeft > 0) {
-            $(boardsList).animate({
-              scrollLeft: right
-            }, this.sortableOptions.animation);
-          } else if (left > 0) {
-            $(boardsList).animate({
-              scrollLeft: offsetLeft
-            }, this.sortableOptions.animation);
-          }
-        }
-      },
-      deep: true
     }
   },
-  methods: {
-    showNewIssueForm() {
-      this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
-    },
-    toggleExpanded(e) {
-      if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) {
-        this.list.isExpanded = !this.list.isExpanded;
-
-        if (AccessorUtilities.isLocalStorageAccessSafe()) {
-          localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded);
-        }
-      }
-    },
-  },
   mounted () {
     this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
       disabled: this.disabled,
@@ -125,4 +87,19 @@ gl.issueBoards.Board = Vue.extend({
       this.list.isExpanded = !isCollapsed;
     }
   },
+  methods: {
+    showNewIssueForm() {
+      this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
+    },
+    toggleExpanded(e) {
+      if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) {
+        this.list.isExpanded = !this.list.isExpanded;
+
+        if (AccessorUtilities.isLocalStorageAccessSafe()) {
+          localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded);
+        }
+      }
+    },
+  },
+  template: '#js-board-template',
 });
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js b/app/assets/javascripts/boards/components/board_blank_state.vue
index 72db626d3c7..286529b4d13 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.js
+++ b/app/assets/javascripts/boards/components/board_blank_state.vue
@@ -1,42 +1,11 @@
+<script>
 /* global ListLabel */
-
 import _ from 'underscore';
 import Cookies from 'js-cookie';
 
 const Store = gl.issueBoards.BoardsStore;
 
 export default {
-  template: `
-    <div class="board-blank-state">
-      <p>
-        Add the following default lists to your Issue Board with one click:
-      </p>
-      <ul class="board-blank-state-list">
-        <li v-for="label in predefinedLabels">
-          <span
-            class="label-color"
-            :style="{ backgroundColor: label.color }">
-          </span>
-          {{ label.title }}
-        </li>
-      </ul>
-      <p>
-        Starting out with the default set of lists will get you right on the way to making the most of your board.
-      </p>
-      <button
-        class="btn btn-create btn-inverted btn-block"
-        type="button"
-        @click.stop="addDefaultLists">
-        Add default lists
-      </button>
-      <button
-        class="btn btn-default btn-block"
-        type="button"
-        @click.stop="clearBlankState">
-        Nevermind, I'll use my own
-      </button>
-    </div>
-  `,
   data() {
     return {
       predefinedLabels: [
@@ -89,3 +58,41 @@ export default {
     clearBlankState: Store.removeBlankState.bind(Store),
   },
 };
+
+</script>
+
+<template>
+  <div class="board-blank-state">
+    <p>
+      Add the following default lists to your Issue Board with one click:
+    </p>
+    <ul class="board-blank-state-list">
+      <li
+        v-for="(label, index) in predefinedLabels"
+        :key="index"
+      >
+        <span
+          :style="{ backgroundColor: label.color }"
+          class="label-color">
+        </span>
+        {{ label.title }}
+      </li>
+    </ul>
+    <p>
+      Starting out with the default set of lists will get you
+      right on the way to making the most of your board.
+    </p>
+    <button
+      class="btn btn-create btn-inverted btn-block"
+      type="button"
+      @click.stop="addDefaultLists">
+      Add default lists
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      type="button"
+      @click.stop="clearBlankState">
+      Nevermind, I'll use my own
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 84885ca9306..b7d3574bc80 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -77,7 +77,6 @@ export default {
 
 <template>
   <li
-    class="card"
     :class="{
       'user-can-drag': !disabled && issue.id,
       'is-disabled': disabled || !issue.id,
@@ -85,6 +84,7 @@ export default {
     }"
     :index="index"
     :data-issue-id="issue.id"
+    class="board-card"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
     @mouseup="showIssue($event)">
diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js
index 7be98825fda..c5945e8098d 100644
--- a/app/assets/javascripts/boards/components/board_delete.js
+++ b/app/assets/javascripts/boards/components/board_delete.js
@@ -1,4 +1,4 @@
-/* eslint-disable comma-dangle, space-before-function-paren, no-alert */
+/* eslint-disable comma-dangle, no-alert */
 
 import $ from 'jquery';
 import Vue from 'vue';
@@ -8,13 +8,16 @@ window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.BoardDelete = Vue.extend({
   props: {
-    list: Object
+    list: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   methods: {
     deleteBoard () {
       $(this.$el).tooltip('hide');
 
-      if (confirm('Are you sure you want to delete this list?')) {
+      if (window.confirm('Are you sure you want to delete this list?')) {
         this.list.destroy();
       }
     }
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 0d03c1c419c..5c7565234d8 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -1,5 +1,5 @@
 <script>
-import Sortable from 'vendor/Sortable';
+import Sortable from 'sortablejs';
 import boardNewIssue from './board_new_issue.vue';
 import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
@@ -87,10 +87,46 @@ export default {
   mounted() {
     const options = gl.issueBoards.getBoardSortableDefaultOptions({
       scroll: true,
-      group: 'issues',
       disabled: this.disabled,
       filter: '.board-list-count, .is-disabled',
       dataIdAttr: 'data-issue-id',
+      group: {
+        name: 'issues',
+        /**
+         * Dynamically determine between which containers
+         * items can be moved or copied as
+         * Assignee lists (EE feature) require this behavior
+         */
+        pull: (to, from, dragEl, e) => {
+          // As per Sortable's docs, `to` should provide
+          // reference to exact sortable container on which
+          // we're trying to drag element, but either it is
+          // a library's bug or our markup structure is too complex
+          // that `to` never points to correct container
+          // See https://github.com/RubaXa/Sortable/issues/1037
+          //
+          // So we use `e.target` which is always accurate about
+          // which element we're currently dragging our card upon
+          // So from there, we can get reference to actual container
+          // and thus the container type to enable Copy or Move
+          if (e.target) {
+            const containerEl = e.target.closest('.js-board-list') || e.target.querySelector('.js-board-list');
+            const toBoardType = containerEl.dataset.boardType;
+
+            if (toBoardType) {
+              const fromBoardType = this.list.type;
+
+              if ((fromBoardType === 'assignee' && toBoardType === 'label') ||
+                  (fromBoardType === 'label' && toBoardType === 'assignee')) {
+                return 'clone';
+              }
+            }
+          }
+
+          return true;
+        },
+        revertClone: true,
+      },
       onStart: (e) => {
         const card = this.$refs.issue[e.oldIndex];
 
@@ -169,21 +205,22 @@ export default {
 <template>
   <div class="board-list-component">
     <div
+      v-if="loading"
       class="board-list-loading text-center"
-      aria-label="Loading issues"
-      v-if="loading">
+      aria-label="Loading issues">
       <loading-icon />
     </div>
     <board-new-issue
+      v-if="list.type !== 'closed' && showIssueForm"
       :group-id="groupId"
-      :list="list"
-      v-if="list.type !== 'closed' && showIssueForm"/>
+      :list="list"/>
     <ul
-      class="board-list"
       v-show="!loading"
       ref="list"
       :data-board="list.id"
-      :class="{ 'is-smaller': showIssueForm }">
+      :data-board-type="list.type"
+      :class="{ 'is-smaller': showIssueForm }"
+      class="board-list js-board-list">
       <board-card
         v-for="(issue, index) in issues"
         ref="issue"
@@ -196,8 +233,8 @@ export default {
         :disabled="disabled"
         :key="issue.id" />
       <li
-        class="board-list-count text-center"
         v-if="showCount"
+        class="board-list-count text-center"
         data-issue-id="-1">
         <loading-icon
           v-show="list.loadingMore"
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index 8d84c1735b8..ec23b1e7c11 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -49,11 +49,12 @@ export default {
       this.error = false;
 
       const labels = this.list.label ? [this.list.label] : [];
+      const assignees = this.list.assignee ? [this.list.assignee] : [];
       const issue = new ListIssue({
         title: this.title,
         labels,
         subscribed: true,
-        assignees: [],
+        assignees,
         project_id: this.selectedProject.id,
       });
 
@@ -92,29 +93,29 @@ export default {
 
 <template>
   <div class="board-new-issue-form">
-    <div class="card">
+    <div class="board-card">
       <form @submit="submit($event)">
         <div
-          class="flash-container"
           v-if="error"
+          class="flash-container"
         >
           <div class="flash-alert">
             An error occurred. Please try again.
           </div>
         </div>
         <label
-          class="label-light"
           :for="list.id + '-title'"
+          class="label-light"
         >
           Title
         </label>
         <input
+          ref="input"
+          v-model="title"
+          :id="list.id + '-title'"
           class="form-control"
           type="text"
-          v-model="title"
-          ref="input"
           autocomplete="off"
-          :id="list.id + '-title'"
         />
         <project-select
           v-if="groupId"
@@ -122,15 +123,15 @@ export default {
         />
         <div class="clearfix prepend-top-10">
           <button
-            class="btn btn-success pull-left"
-            type="submit"
-            :disabled="disabled"
             ref="submit-button"
+            :disabled="disabled"
+            class="btn btn-success float-left"
+            type="submit"
           >
             Submit issue
           </button>
           <button
-            class="btn btn-default pull-right"
+            class="btn btn-default float-right"
             type="button"
             @click="cancel"
           >
@@ -141,4 +142,3 @@ export default {
     </div>
   </div>
 </template>
-
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index a44969272a1..371be109229 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -1,4 +1,4 @@
-/* eslint-disable comma-dangle, space-before-function-paren, no-new */
+/* eslint-disable comma-dangle, no-new */
 
 import $ from 'jquery';
 import Vue from 'vue';
@@ -6,13 +6,13 @@ import Flash from '../../flash';
 import { __ } from '../../locale';
 import Sidebar from '../../right_sidebar';
 import eventHub from '../../sidebar/event_hub';
-import assigneeTitle from '../../sidebar/components/assignees/assignee_title.vue';
-import assignees from '../../sidebar/components/assignees/assignees.vue';
+import AssigneeTitle from '../../sidebar/components/assignees/assignee_title.vue';
+import Assignees from '../../sidebar/components/assignees/assignees.vue';
 import DueDateSelectors from '../../due_date_select';
-import './sidebar/remove_issue';
+import RemoveBtn from './sidebar/remove_issue.vue';
 import IssuableContext from '../../issuable_context';
 import LabelsSelect from '../../labels_select';
-import subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
+import Subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
 import MilestoneSelect from '../../milestone_select';
 
 const Store = gl.issueBoards.BoardsStore;
@@ -21,8 +21,17 @@ window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.BoardSidebar = Vue.extend({
+  components: {
+    AssigneeTitle,
+    Assignees,
+    RemoveBtn,
+    Subscriptions,
+  },
   props: {
-    currentUser: Object
+    currentUser: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -60,14 +69,30 @@ 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
     },
   },
+  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);
+    new MilestoneSelect();
+    new DueDateSelectors();
+    new LabelsSelect();
+    new Sidebar();
+  },
   methods: {
     closeSidebar () {
       this.detail.issue = {};
@@ -91,7 +116,7 @@ gl.issueBoards.BoardSidebar = Vue.extend({
     saveAssignees () {
       this.loadingAssignees = true;
 
-      gl.issueBoards.BoardsStore.detail.issue.update(this.endpoint)
+      gl.issueBoards.BoardsStore.detail.issue.update()
         .then(() => {
           this.loadingAssignees = false;
         })
@@ -101,30 +126,4 @@ gl.issueBoards.BoardSidebar = Vue.extend({
         });
     },
   },
-  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);
-    new MilestoneSelect();
-    new DueDateSelectors();
-    new LabelsSelect();
-    new Sidebar();
-  },
-  components: {
-    assigneeTitle,
-    assignees,
-    removeBtn: gl.issueBoards.RemoveIssueBtn,
-    subscriptions,
-  },
 });
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index 8aee5b23c76..f7d7b910e2f 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -9,6 +9,9 @@ window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.IssueCardInner = Vue.extend({
+  components: {
+    UserAvatarLink,
+  },
   props: {
     issue: {
       type: Object,
@@ -35,6 +38,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
     groupId: {
       type: Number,
       required: false,
+      default: null,
     },
   },
   data() {
@@ -44,9 +48,6 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       maxCounter: 99,
     };
   },
-  components: {
-    UserAvatarLink,
-  },
   computed: {
     numberOverLimit() {
       return this.issue.assignees.length - this.limitBeforeCounter;
@@ -68,15 +69,6 @@ gl.issueBoards.IssueCardInner = Vue.extend({
 
       return this.issue.assignees.length > this.numberOverLimit;
     },
-    cardUrl() {
-      let baseUrl = this.issueLinkBase;
-
-      if (this.groupId && this.issue.project) {
-        baseUrl = this.issueLinkBase.replace(':project_path', this.issue.project.path);
-      }
-
-      return `${baseUrl}/${this.issue.iid}`;
-    },
     issueId() {
       if (this.issue.iid) {
         return `#${this.issue.iid}`;
@@ -144,8 +136,8 @@ gl.issueBoards.IssueCardInner = Vue.extend({
   },
   template: `
     <div>
-      <div class="card-header">
-        <h4 class="card-title">
+      <div class="board-card-header">
+        <h4 class="board-card-title">
           <i
             class="fa fa-eye-slash confidential-icon"
             v-if="issue.confidential"
@@ -153,16 +145,16 @@ gl.issueBoards.IssueCardInner = Vue.extend({
           />
           <a
             class="js-no-trigger"
-            :href="cardUrl"
+            :href="issue.path"
             :title="issue.title">{{ issue.title }}</a>
           <span
-            class="card-number"
+            class="board-card-number"
             v-if="issueId"
           >
-            <template v-if="groupId && issue.project">{{issue.project.path}}</template>{{ issueId }}
+            {{ issue.referencePath }}
           </span>
         </h4>
-        <div class="card-assignee">
+        <div class="board-card-assignee">
           <user-avatar-link
             v-for="(assignee, index) in issue.assignees"
             :key="assignee.id"
@@ -184,11 +176,11 @@ gl.issueBoards.IssueCardInner = Vue.extend({
         </div>
       </div>
       <div
-        class="card-footer"
+        class="board-card-footer"
         v-if="showLabelFooter"
       >
         <button
-          class="label color-label has-tooltip"
+          class="badge 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/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js
deleted file mode 100644
index e571b11a83d..00000000000
--- a/app/assets/javascripts/boards/components/modal/empty_state.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import Vue from 'vue';
-
-const ModalStore = gl.issueBoards.ModalStore;
-
-gl.issueBoards.ModalEmptyState = Vue.extend({
-  mixins: [gl.issueBoards.ModalMixins],
-  data() {
-    return ModalStore.store;
-  },
-  props: {
-    newIssuePath: {
-      type: String,
-      required: true,
-    },
-    emptyStateSvg: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    contents() {
-      const obj = {
-        title: 'You haven\'t added any issues to your project yet',
-        content: `
-          An issue can be a bug, a todo or a feature request that needs to be
-          discussed in a project. Besides, issues are searchable and filterable.
-        `,
-      };
-
-      if (this.activeTab === 'selected') {
-        obj.title = 'You haven\'t selected any issues yet';
-        obj.content = `
-          Go back to <strong>Open issues</strong> and select some issues
-          to add to your board.
-        `;
-      }
-
-      return obj;
-    },
-  },
-  template: `
-    <section class="empty-state">
-      <div class="row">
-        <div class="col-xs-12 col-sm-6 col-sm-push-6">
-          <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
-        </div>
-        <div class="col-xs-12 col-sm-6 col-sm-pull-6">
-          <div class="text-content">
-            <h4>{{ contents.title }}</h4>
-            <p v-html="contents.content"></p>
-            <a
-              :href="newIssuePath"
-              class="btn btn-success btn-inverted"
-              v-if="activeTab === 'all'">
-              New issue
-            </a>
-            <button
-              type="button"
-              class="btn btn-default"
-              @click="changeTab('all')"
-              v-if="activeTab === 'selected'">
-              Open issues
-            </button>
-          </div>
-        </div>
-      </div>
-    </section>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.vue b/app/assets/javascripts/boards/components/modal/empty_state.vue
new file mode 100644
index 00000000000..dbd69f84526
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/empty_state.vue
@@ -0,0 +1,73 @@
+<script>
+import ModalStore from '../../stores/modal_store';
+import modalMixin from '../../mixins/modal_mixins';
+
+export default {
+  mixins: [modalMixin],
+  props: {
+    newIssuePath: {
+      type: String,
+      required: true,
+    },
+    emptyStateSvg: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return ModalStore.store;
+  },
+  computed: {
+    contents() {
+      const obj = {
+        title: 'You haven\'t added any issues to your project yet',
+        content: `
+          An issue can be a bug, a todo or a feature request that needs to be
+          discussed in a project. Besides, issues are searchable and filterable.
+        `,
+      };
+
+      if (this.activeTab === 'selected') {
+        obj.title = 'You haven\'t selected any issues yet';
+        obj.content = `
+          Go back to <strong>Open issues</strong> and select some issues
+          to add to your board.
+        `;
+      }
+
+      return obj;
+    },
+  },
+};
+</script>
+
+<template>
+  <section class="empty-state">
+    <div class="row">
+      <div class="col-12 col-md-6 order-md-last">
+        <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
+      </div>
+      <div class="col-12 col-md-6 order-md-first">
+        <div class="text-content">
+          <h4>{{ contents.title }}</h4>
+          <p v-html="contents.content"></p>
+          <a
+            v-if="activeTab === 'all'"
+            :href="newIssuePath"
+            class="btn btn-success btn-inverted"
+          >
+            New issue
+          </a>
+          <button
+            v-if="activeTab === 'selected'"
+            class="btn btn-default"
+            type="button"
+            @click="changeTab('all')"
+          >
+            Open issues
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.vue
index 03cd7ef65cb..e0dac6003f1 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -1,13 +1,16 @@
-import Vue from 'vue';
+<script>
 import Flash from '../../../flash';
 import { __ } from '../../../locale';
-import './lists_dropdown';
+import ListsDropdown from './lists_dropdown.vue';
 import { pluralize } from '../../../lib/utils/text_utility';
+import ModalStore from '../../stores/modal_store';
+import modalMixin from '../../mixins/modal_mixins';
 
-const ModalStore = gl.issueBoards.ModalStore;
-
-gl.issueBoards.ModalFooter = Vue.extend({
-  mixins: [gl.issueBoards.ModalMixins],
+export default {
+  components: {
+    ListsDropdown,
+  },
+  mixins: [modalMixin],
   data() {
     return {
       modal: ModalStore.store,
@@ -52,31 +55,32 @@ gl.issueBoards.ModalFooter = Vue.extend({
       this.toggleModal(false);
     },
   },
-  components: {
-    'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
-  },
-  template: `
-    <footer
-      class="form-actions add-issues-footer">
-      <div class="pull-left">
-        <button
-          class="btn btn-success"
-          type="button"
-          :disabled="submitDisabled"
-          @click="addIssues">
-          {{ submitText }}
-        </button>
-        <span class="inline add-issues-footer-to-list">
-          to list
-        </span>
-        <lists-dropdown></lists-dropdown>
-      </div>
+};
+</script>
+<template>
+  <footer
+    class="form-actions add-issues-footer"
+  >
+    <div class="float-left">
       <button
-        class="btn btn-default pull-right"
+        :disabled="submitDisabled"
+        class="btn btn-success"
         type="button"
-        @click="toggleModal(false)">
-        Cancel
+        @click="addIssues"
+      >
+        {{ submitText }}
       </button>
-    </footer>
-  `,
-});
+      <span class="inline add-issues-footer-to-list">
+        to list
+      </span>
+      <lists-dropdown/>
+    </div>
+    <button
+      class="btn btn-default float-right"
+      type="button"
+      @click="toggleModal(false)"
+    >
+      Cancel
+    </button>
+  </footer>
+</template>
diff --git a/app/assets/javascripts/boards/components/modal/header.js b/app/assets/javascripts/boards/components/modal/header.js
index 31f59d295bf..cc9848058ca 100644
--- a/app/assets/javascripts/boards/components/modal/header.js
+++ b/app/assets/javascripts/boards/components/modal/header.js
@@ -1,11 +1,15 @@
 import Vue from 'vue';
 import modalFilters from './filters';
-import './tabs';
-
-const ModalStore = gl.issueBoards.ModalStore;
+import modalTabs from './tabs.vue';
+import ModalStore from '../../stores/modal_store';
+import modalMixin from '../../mixins/modal_mixins';
 
 gl.issueBoards.ModalHeader = Vue.extend({
-  mixins: [gl.issueBoards.ModalMixins],
+  components: {
+    modalTabs,
+    modalFilters,
+  },
+  mixins: [modalMixin],
   props: {
     projectId: {
       type: Number,
@@ -42,10 +46,6 @@ gl.issueBoards.ModalHeader = Vue.extend({
       ModalStore.toggleAll();
     },
   },
-  components: {
-    'modal-tabs': gl.issueBoards.ModalTabs,
-    modalFilters,
-  },
   template: `
     <div>
       <header class="add-issues-header form-actions">
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index d825ff38587..983061f52ae 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -5,12 +5,18 @@ import queryData from '~/boards/utils/query_data';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import './header';
 import './list';
-import './footer';
-import './empty_state';
-
-const ModalStore = gl.issueBoards.ModalStore;
+import ModalFooter from './footer.vue';
+import EmptyState from './empty_state.vue';
+import ModalStore from '../../stores/modal_store';
 
 gl.issueBoards.IssuesModal = Vue.extend({
+  components: {
+    EmptyState,
+    'modal-header': gl.issueBoards.ModalHeader,
+    'modal-list': gl.issueBoards.ModalList,
+    ModalFooter,
+    loadingIcon,
+  },
   props: {
     newIssuePath: {
       type: String,
@@ -44,6 +50,22 @@ gl.issueBoards.IssuesModal = Vue.extend({
   data() {
     return ModalStore.store;
   },
+  computed: {
+    showList() {
+      if (this.activeTab === 'selected') {
+        return this.selectedIssues.length > 0;
+      }
+
+      return this.issuesCount > 0;
+    },
+    showEmptyState() {
+      if (!this.loading && this.issuesCount === 0) {
+        return true;
+      }
+
+      return this.activeTab === 'selected' && this.selectedIssues.length === 0;
+    },
+  },
   watch: {
     page() {
       this.loadIssues();
@@ -81,6 +103,9 @@ gl.issueBoards.IssuesModal = Vue.extend({
       deep: true,
     },
   },
+  created() {
+    this.page = 1;
+  },
   methods: {
     loadIssues(clearIssues = false) {
       if (!this.showAddIssuesModal) return false;
@@ -113,32 +138,6 @@ gl.issueBoards.IssuesModal = Vue.extend({
       });
     },
   },
-  computed: {
-    showList() {
-      if (this.activeTab === 'selected') {
-        return this.selectedIssues.length > 0;
-      }
-
-      return this.issuesCount > 0;
-    },
-    showEmptyState() {
-      if (!this.loading && this.issuesCount === 0) {
-        return true;
-      }
-
-      return this.activeTab === 'selected' && this.selectedIssues.length === 0;
-    },
-  },
-  created() {
-    this.page = 1;
-  },
-  components: {
-    'modal-header': gl.issueBoards.ModalHeader,
-    'modal-list': gl.issueBoards.ModalList,
-    'modal-footer': gl.issueBoards.ModalFooter,
-    'empty-state': gl.issueBoards.ModalEmptyState,
-    loadingIcon,
-  },
   template: `
     <div
       class="add-issues-modal"
diff --git a/app/assets/javascripts/boards/components/modal/list.js b/app/assets/javascripts/boards/components/modal/list.js
index 7c62134b3a3..11061c72a7b 100644
--- a/app/assets/javascripts/boards/components/modal/list.js
+++ b/app/assets/javascripts/boards/components/modal/list.js
@@ -1,11 +1,11 @@
-/* global ListIssue */
-
 import Vue from 'vue';
 import bp from '../../../breakpoints';
-
-const ModalStore = gl.issueBoards.ModalStore;
+import ModalStore from '../../stores/modal_store';
 
 gl.issueBoards.ModalList = Vue.extend({
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
   props: {
     issueLinkBase: {
       type: String,
@@ -23,13 +23,6 @@ gl.issueBoards.ModalList = Vue.extend({
   data() {
     return ModalStore.store;
   },
-  watch: {
-    activeTab() {
-      if (this.activeTab === 'all') {
-        ModalStore.purgeUnselectedIssues();
-      }
-    },
-  },
   computed: {
     loopIssues() {
       if (this.activeTab === 'all') {
@@ -53,12 +46,34 @@ gl.issueBoards.ModalList = Vue.extend({
       return groups;
     },
   },
+  watch: {
+    activeTab() {
+      if (this.activeTab === 'all') {
+        ModalStore.purgeUnselectedIssues();
+      }
+    },
+  },
+  mounted() {
+    this.scrollHandlerWrapper = this.scrollHandler.bind(this);
+    this.setColumnCountWrapper = this.setColumnCount.bind(this);
+    this.setColumnCount();
+
+    this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper);
+    window.addEventListener('resize', this.setColumnCountWrapper);
+  },
+  beforeDestroy() {
+    this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper);
+    window.removeEventListener('resize', this.setColumnCountWrapper);
+  },
   methods: {
     scrollHandler() {
       const currentPage = Math.floor(this.issues.length / this.perPage);
 
-      if ((this.scrollTop() > this.scrollHeight() - 100) && !this.loadingNewPage
-        && currentPage === this.page) {
+      if (
+        this.scrollTop() > this.scrollHeight() - 100 &&
+        !this.loadingNewPage &&
+        currentPage === this.page
+      ) {
         this.loadingNewPage = true;
         this.page += 1;
       }
@@ -96,21 +111,6 @@ gl.issueBoards.ModalList = Vue.extend({
       }
     },
   },
-  mounted() {
-    this.scrollHandlerWrapper = this.scrollHandler.bind(this);
-    this.setColumnCountWrapper = this.setColumnCount.bind(this);
-    this.setColumnCount();
-
-    this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper);
-    window.addEventListener('resize', this.setColumnCountWrapper);
-  },
-  beforeDestroy() {
-    this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper);
-    window.removeEventListener('resize', this.setColumnCountWrapper);
-  },
-  components: {
-    'issue-card-inner': gl.issueBoards.IssueCardInner,
-  },
   template: `
     <section
       class="add-issues-list add-issues-list-columns"
@@ -134,9 +134,9 @@ gl.issueBoards.ModalList = Vue.extend({
         <div
           v-for="issue in group"
           v-if="showIssue(issue)"
-          class="card-parent">
+          class="board-card-parent">
           <div
-            class="card"
+            class="board-card"
             :class="{ 'is-active': issue.selected }"
             @click="toggleIssue($event, issue)">
             <issue-card-inner
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js b/app/assets/javascripts/boards/components/modal/lists_dropdown.js
deleted file mode 100644
index 4684ea76647..00000000000
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import Vue from 'vue';
-
-const ModalStore = gl.issueBoards.ModalStore;
-
-gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
-  data() {
-    return {
-      modal: ModalStore.store,
-      state: gl.issueBoards.BoardsStore.state,
-    };
-  },
-  computed: {
-    selected() {
-      return this.modal.selectedList || this.state.lists[1];
-    },
-  },
-  destroyed() {
-    this.modal.selectedList = null;
-  },
-  template: `
-    <div class="dropdown inline">
-      <button
-        class="dropdown-menu-toggle"
-        type="button"
-        data-toggle="dropdown"
-        aria-expanded="false">
-        <span
-          class="dropdown-label-box"
-          :style="{ backgroundColor: selected.label.color }">
-        </span>
-        {{ selected.title }}
-        <i class="fa fa-chevron-down"></i>
-      </button>
-      <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
-        <ul>
-          <li
-            v-for="list in state.lists"
-            v-if="list.type == 'label'">
-            <a
-              href="#"
-              role="button"
-              :class="{ 'is-active': list.id == selected.id }"
-              @click.prevent="modal.selectedList = list">
-              <span
-                class="dropdown-label-box"
-                :style="{ backgroundColor: list.label.color }">
-              </span>
-              {{ list.title }}
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
new file mode 100644
index 00000000000..6a5a39099bd
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -0,0 +1,56 @@
+<script>
+import ModalStore from '../../stores/modal_store';
+
+export default {
+  data() {
+    return {
+      modal: ModalStore.store,
+      state: gl.issueBoards.BoardsStore.state,
+    };
+  },
+  computed: {
+    selected() {
+      return this.modal.selectedList || this.state.lists[1];
+    },
+  },
+  destroyed() {
+    this.modal.selectedList = null;
+  },
+};
+</script>
+<template>
+  <div class="dropdown inline">
+    <button
+      class="dropdown-menu-toggle"
+      type="button"
+      data-toggle="dropdown"
+      aria-expanded="false">
+      <span
+        :style="{ backgroundColor: selected.label.color }"
+        class="dropdown-label-box">
+      </span>
+      {{ selected.title }}
+      <i class="fa fa-chevron-down"></i>
+    </button>
+    <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
+      <ul>
+        <li
+          v-for="(list, i) in state.lists"
+          v-if="list.type == 'label'"
+          :key="i">
+          <a
+            :class="{ 'is-active': list.id == selected.id }"
+            href="#"
+            role="button"
+            @click.prevent="modal.selectedList = list">
+            <span
+              :style="{ backgroundColor: list.label.color }"
+              class="dropdown-label-box">
+            </span>
+            {{ list.title }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js b/app/assets/javascripts/boards/components/modal/tabs.js
deleted file mode 100644
index 3e5d08e3d75..00000000000
--- a/app/assets/javascripts/boards/components/modal/tabs.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Vue from 'vue';
-
-const ModalStore = gl.issueBoards.ModalStore;
-
-gl.issueBoards.ModalTabs = Vue.extend({
-  mixins: [gl.issueBoards.ModalMixins],
-  data() {
-    return ModalStore.store;
-  },
-  computed: {
-    selectedCount() {
-      return ModalStore.selectedCount();
-    },
-  },
-  destroyed() {
-    this.activeTab = 'all';
-  },
-  template: `
-    <div class="top-area prepend-top-10 append-bottom-10">
-      <ul class="nav-links issues-state-filters">
-        <li :class="{ 'active': activeTab == 'all' }">
-          <a
-            href="#"
-            role="button"
-            @click.prevent="changeTab('all')">
-            Open issues
-            <span class="badge">
-              {{ issuesCount }}
-            </span>
-          </a>
-        </li>
-        <li :class="{ 'active': activeTab == 'selected' }">
-          <a
-            href="#"
-            role="button"
-            @click.prevent="changeTab('selected')">
-            Selected issues
-            <span class="badge">
-              {{ selectedCount }}
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/modal/tabs.vue b/app/assets/javascripts/boards/components/modal/tabs.vue
new file mode 100644
index 00000000000..d926b080094
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/tabs.vue
@@ -0,0 +1,49 @@
+<script>
+  import ModalStore from '../../stores/modal_store';
+  import modalMixin from '../../mixins/modal_mixins';
+
+  export default {
+    mixins: [modalMixin],
+    data() {
+      return ModalStore.store;
+    },
+    computed: {
+      selectedCount() {
+        return ModalStore.selectedCount();
+      },
+    },
+    destroyed() {
+      this.activeTab = 'all';
+    },
+  };
+</script>
+<template>
+  <div class="top-area prepend-top-10 append-bottom-10">
+    <ul class="nav-links issues-state-filters">
+      <li :class="{ 'active': activeTab == 'all' }">
+        <a
+          href="#"
+          role="button"
+          @click.prevent="changeTab('all')"
+        >
+          Open issues
+          <span class="badge badge-pill">
+            {{ issuesCount }}
+          </span>
+        </a>
+      </li>
+      <li :class="{ 'active': activeTab == 'selected' }">
+        <a
+          href="#"
+          role="button"
+          @click.prevent="changeTab('selected')"
+        >
+          Selected issues
+          <span class="badge badge-pill">
+            {{ selectedCount }}
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
index 71f49319c36..448ab9ed135 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, no-new, space-before-function-paren, one-var, promise/catch-or-return, max-len */
+/* eslint-disable func-names, no-new, promise/catch-or-return */
 
 import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
@@ -56,6 +56,7 @@ gl.issueBoards.newListDropdownInit = () => {
       filterable: true,
       selectable: true,
       multiSelect: true,
+      containerSelector: '.js-tab-container-labels .dropdown-page-one .dropdown-content',
       clicked (options) {
         const { e } = options;
         const label = options.selectedObj;
diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue
index 371774098b9..eb335f352d3 100644
--- a/app/assets/javascripts/boards/components/project_select.vue
+++ b/app/assets/javascripts/boards/components/project_select.vue
@@ -1,71 +1,69 @@
 <script>
-  /* global ListIssue */
+import $ from 'jquery';
+import _ from 'underscore';
+import eventHub from '../eventhub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import Api from '../../api';
 
-  import $ from 'jquery';
-  import _ from 'underscore';
-  import eventHub from '../eventhub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import Api from '../../api';
-
-  export default {
-    name: 'BoardProjectSelect',
-    components: {
-      loadingIcon,
-    },
-    props: {
-      groupId: {
-        type: Number,
-        required: true,
-        default: 0,
-      },
+export default {
+  name: 'BoardProjectSelect',
+  components: {
+    loadingIcon,
+  },
+  props: {
+    groupId: {
+      type: Number,
+      required: true,
+      default: 0,
     },
-    data() {
-      return {
-        loading: true,
-        selectedProject: {},
-      };
+  },
+  data() {
+    return {
+      loading: true,
+      selectedProject: {},
+    };
+  },
+  computed: {
+    selectedProjectName() {
+      return this.selectedProject.name || 'Select a project';
     },
-    computed: {
-      selectedProjectName() {
-        return this.selectedProject.name || 'Select a project';
+  },
+  mounted() {
+    $(this.$refs.projectsDropdown).glDropdown({
+      filterable: true,
+      filterRemote: true,
+      search: {
+        fields: ['name_with_namespace'],
       },
-    },
-    mounted() {
-      $(this.$refs.projectsDropdown).glDropdown({
-        filterable: true,
-        filterRemote: true,
-        search: {
-          fields: ['name_with_namespace'],
-        },
-        clicked: ({ $el, e }) => {
-          e.preventDefault();
-          this.selectedProject = {
-            id: $el.data('project-id'),
-            name: $el.data('project-name'),
-          };
-          eventHub.$emit('setSelectedProject', this.selectedProject);
-        },
-        selectable: true,
-        data: (term, callback) => {
-          this.loading = true;
-          return Api.groupProjects(this.groupId, term, (projects) => {
-            this.loading = false;
-            callback(projects);
-          });
-        },
-        renderRow(project) {
-          return `
+      clicked: ({ $el, e }) => {
+        e.preventDefault();
+        this.selectedProject = {
+          id: $el.data('project-id'),
+          name: $el.data('project-name'),
+        };
+        eventHub.$emit('setSelectedProject', this.selectedProject);
+      },
+      selectable: true,
+      data: (term, callback) => {
+        this.loading = true;
+        return Api.groupProjects(this.groupId, term, projects => {
+          this.loading = false;
+          callback(projects);
+        });
+      },
+      renderRow(project) {
+        return `
             <li>
               <a href='#' class='dropdown-menu-link' data-project-id="${project.id}" data-project-name="${project.name}">
                 ${_.escape(project.name)}
               </a>
             </li>
           `;
-        },
-        text: project => project.name,
-      });
-    },
-  };
+      },
+      text: project => project.name,
+    });
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js b/app/assets/javascripts/boards/components/sidebar/remove_issue.js
deleted file mode 100644
index 09c683ff621..00000000000
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import Vue from 'vue';
-import Flash from '../../../flash';
-import { __ } from '../../../locale';
-
-const Store = gl.issueBoards.BoardsStore;
-
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.RemoveIssueBtn = Vue.extend({
-  props: {
-    issue: {
-      type: Object,
-      required: true,
-    },
-    list: {
-      type: Object,
-      required: true,
-    },
-    issueUpdate: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    updateUrl() {
-      return this.issueUpdate.replace(':project_path', this.issue.project.path);
-    },
-  },
-  methods: {
-    removeIssue() {
-      const issue = this.issue;
-      const lists = issue.getLists();
-      const listLabelIds = lists.map(list => list.label.id);
-
-      let labelIds = issue.labels
-        .map(label => label.id)
-        .filter(id => !listLabelIds.includes(id));
-      if (labelIds.length === 0) {
-        labelIds = [''];
-      }
-
-      const data = {
-        issue: {
-          label_ids: labelIds,
-        },
-      };
-
-      // Post the remove data
-      Vue.http.patch(this.updateUrl, data).catch(() => {
-        Flash(__('Failed to remove issue from board, please try again.'));
-
-        lists.forEach((list) => {
-          list.addIssue(issue);
-        });
-      });
-
-      // Remove from the frontend store
-      lists.forEach((list) => {
-        list.removeIssue(issue);
-      });
-
-      Store.detail.issue = {};
-    },
-  },
-  template: `
-    <div
-      class="block list">
-      <button
-        class="btn btn-default btn-block"
-        type="button"
-        @click="removeIssue">
-        Remove from board
-      </button>
-    </div>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
new file mode 100644
index 00000000000..55278626ffc
--- /dev/null
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
@@ -0,0 +1,72 @@
+<script>
+  import Vue from 'vue';
+  import Flash from '../../../flash';
+  import { __ } from '../../../locale';
+
+  const Store = gl.issueBoards.BoardsStore;
+
+  export default {
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      updateUrl() {
+        return this.issue.path;
+      },
+    },
+    methods: {
+      removeIssue() {
+        const { issue } = this;
+        const lists = issue.getLists();
+        const listLabelIds = lists.map(list => list.label.id);
+
+        let labelIds = issue.labels.map(label => label.id).filter(id => !listLabelIds.includes(id));
+        if (labelIds.length === 0) {
+          labelIds = [''];
+        }
+
+        const data = {
+          issue: {
+            label_ids: labelIds,
+          },
+        };
+
+        // Post the remove data
+        Vue.http.patch(this.updateUrl, data).catch(() => {
+          Flash(__('Failed to remove issue from board, please try again.'));
+
+          lists.forEach(list => {
+            list.addIssue(issue);
+          });
+        });
+
+        // Remove from the frontend store
+        lists.forEach(list => {
+          list.removeIssue(issue);
+        });
+
+        Store.detail.issue = {};
+      },
+    },
+  };
+</script>
+<template>
+  <div
+    class="block list"
+  >
+    <button
+      class="btn btn-default btn-block"
+      type="button"
+      @click="removeIssue"
+    >
+      Remove from board
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js
index fb40b9f5565..46d61ebbf24 100644
--- a/app/assets/javascripts/boards/filtered_search_boards.js
+++ b/app/assets/javascripts/boards/filtered_search_boards.js
@@ -1,4 +1,3 @@
-/* eslint-disable class-methods-use-this */
 import FilteredSearchContainer from '../filtered_search/container';
 import FilteredSearchManager from '../filtered_search/filtered_search_manager';
 
@@ -6,6 +5,7 @@ export default class FilteredSearchBoards extends FilteredSearchManager {
   constructor(store, updateUrl = false, cantEdit = []) {
     super({
       page: 'boards',
+      isGroupDecendent: true,
       stateFiltersSelector: '.issues-state-filters',
     });
 
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index 8b1c14c04ff..751a66f89c6 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -1,4 +1,4 @@
-/* eslint-disable one-var, quote-props, comma-dangle, space-before-function-paren */
+/* eslint-disable quote-props, comma-dangle */
 
 import $ from 'jquery';
 import _ from 'underscore';
@@ -7,6 +7,7 @@ import Vue from 'vue';
 import Flash from '~/flash';
 import { __ } from '~/locale';
 import '~/vue_shared/models/label';
+import '~/vue_shared/models/assignee';
 
 import FilteredSearchBoards from './filtered_search_boards';
 import eventHub from './eventhub';
@@ -15,11 +16,10 @@ import './models/issue';
 import './models/list';
 import './models/milestone';
 import './models/project';
-import './models/assignee';
 import './stores/boards_store';
-import './stores/modal_store';
+import ModalStore from './stores/modal_store';
 import BoardService from './services/board_service';
-import './mixins/modal_mixins';
+import modalMixin from './mixins/modal_mixins';
 import './mixins/sortable_default_options';
 import './filters/due_date_filters';
 import './components/board';
@@ -31,7 +31,6 @@ import '~/vue_shared/vue_resource_interceptor'; // eslint-disable-line import/fi
 export default () => {
   const $boardApp = document.getElementById('board-app');
   const Store = gl.issueBoards.BoardsStore;
-  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
 
@@ -122,7 +121,7 @@ export default () => {
         this.filterManager.updateTokens();
       },
       updateDetailIssue(newIssue) {
-        const sidebarInfoEndpoint = newIssue.sidebarInfoEndpoint;
+        const { sidebarInfoEndpoint } = newIssue;
         if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
           newIssue.setFetchingState('subscriptions', true);
           BoardService.getIssueInfo(sidebarInfoEndpoint)
@@ -145,7 +144,7 @@ export default () => {
         Store.detail.issue = {};
       },
       toggleSubscription(id) {
-        const issue = Store.detail.issue;
+        const { issue } = Store.detail;
         if (issue.id === id && issue.toggleSubscriptionEndpoint) {
           issue.setFetchingState('subscriptions', true);
           BoardService.toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
@@ -176,7 +175,7 @@ export default () => {
 
   gl.IssueBoardsModalAddBtn = new Vue({
     el: document.getElementById('js-add-issues-btn'),
-    mixins: [gl.issueBoards.ModalMixins],
+    mixins: [modalMixin],
     data() {
       return {
         modal: ModalStore.store,
@@ -215,7 +214,7 @@ export default () => {
           if (this.disabled) {
             $tooltip.tooltip();
           } else {
-            $tooltip.tooltip('destroy');
+            $tooltip.tooltip('dispose');
           }
         });
       },
diff --git a/app/assets/javascripts/boards/mixins/modal_mixins.js b/app/assets/javascripts/boards/mixins/modal_mixins.js
index 2b0a1aaa89f..6c97e1629bf 100644
--- a/app/assets/javascripts/boards/mixins/modal_mixins.js
+++ b/app/assets/javascripts/boards/mixins/modal_mixins.js
@@ -1,6 +1,6 @@
-const ModalStore = gl.issueBoards.ModalStore;
+import ModalStore from '../stores/modal_store';
 
-gl.issueBoards.ModalMixins = {
+export default {
   methods: {
     toggleModal(toggle) {
       ModalStore.store.showAddIssuesModal = toggle;
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js b/app/assets/javascripts/boards/mixins/sortable_default_options.js
index ac316c31deb..a8df45fc473 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars, no-mixed-operators, comma-dangle */
 /* global DocumentTouch */
 
 import $ from 'jquery';
diff --git a/app/assets/javascripts/boards/models/assignee.js b/app/assets/javascripts/boards/models/assignee.js
deleted file mode 100644
index 05dd449e4fd..00000000000
--- a/app/assets/javascripts/boards/models/assignee.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/* 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 4c5079efc8b..b85266b6bc3 100644
--- a/app/assets/javascripts/boards/models/issue.js
+++ b/app/assets/javascripts/boards/models/issue.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-unused-vars, space-before-function-paren, arrow-body-style, arrow-parens, comma-dangle, max-len */
+/* eslint-disable no-unused-vars, comma-dangle */
 /* global ListLabel */
 /* global ListMilestone */
 /* global ListAssignee */
@@ -23,6 +23,8 @@ class ListIssue {
     };
     this.isLoading = {};
     this.sidebarInfoEndpoint = obj.issue_sidebar_endpoint;
+    this.referencePath = obj.reference_path;
+    this.path = obj.real_path;
     this.toggleSubscriptionEndpoint = obj.toggle_subscription_endpoint;
     this.milestone_id = obj.milestone_id;
     this.project_id = obj.project_id;
@@ -98,7 +100,7 @@ class ListIssue {
     this.isLoading[key] = value;
   }
 
-  update (url) {
+  update () {
     const data = {
       issue: {
         milestone_id: this.milestone ? this.milestone.id : null,
@@ -113,7 +115,7 @@ class ListIssue {
     }
 
     const projectPath = this.project ? this.project.path : '';
-    return Vue.http.patch(url.replace(':project_path', projectPath), data);
+    return Vue.http.patch(`${this.path}.json`, data);
   }
 }
 
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index e210d69895e..e35f277a865 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -1,12 +1,14 @@
-/* eslint-disable space-before-function-paren, no-underscore-dangle, class-methods-use-this, consistent-return, no-shadow, no-param-reassign, max-len, no-unused-vars */
+/* eslint-disable no-underscore-dangle, class-methods-use-this, consistent-return, no-shadow, no-param-reassign, max-len */
 /* global ListIssue */
-/* global ListLabel */
+
+import ListLabel from '~/vue_shared/models/label';
+import ListAssignee from '~/vue_shared/models/assignee';
 import queryData from '../utils/query_data';
 
 const PER_PAGE = 20;
 
 class List {
-  constructor (obj, defaultAvatar) {
+  constructor(obj, defaultAvatar) {
     this.id = obj.id;
     this._uid = this.guid();
     this.position = obj.position;
@@ -24,6 +26,9 @@ class List {
 
     if (obj.label) {
       this.label = new ListLabel(obj.label);
+    } else if (obj.user) {
+      this.assignee = new ListAssignee(obj.user);
+      this.title = this.assignee.name;
     }
 
     if (this.type !== 'blank' && this.id) {
@@ -34,14 +39,26 @@ class List {
   }
 
   guid() {
-    const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+    const s4 = () =>
+      Math.floor((1 + Math.random()) * 0x10000)
+        .toString(16)
+        .substring(1);
     return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
   }
 
-  save () {
-    return gl.boardService.createList(this.label.id)
+  save() {
+    const entity = this.label || this.assignee;
+    let entityType = '';
+    if (this.label) {
+      entityType = 'label_id';
+    } else {
+      entityType = 'assignee_id';
+    }
+
+    return gl.boardService
+      .createList(entity.id, entityType)
       .then(res => res.data)
-      .then((data) => {
+      .then(data => {
         this.id = data.id;
         this.type = data.list_type;
         this.position = data.position;
@@ -50,25 +67,23 @@ class List {
       });
   }
 
-  destroy () {
+  destroy() {
     const index = gl.issueBoards.BoardsStore.state.lists.indexOf(this);
     gl.issueBoards.BoardsStore.state.lists.splice(index, 1);
     gl.issueBoards.BoardsStore.updateNewListDropdown(this.id);
 
-    gl.boardService.destroyList(this.id)
-      .catch(() => {
-        // TODO: handle request error
-      });
+    gl.boardService.destroyList(this.id).catch(() => {
+      // TODO: handle request error
+    });
   }
 
-  update () {
-    gl.boardService.updateList(this.id, this.position)
-      .catch(() => {
-        // TODO: handle request error
-      });
+  update() {
+    gl.boardService.updateList(this.id, this.position).catch(() => {
+      // TODO: handle request error
+    });
   }
 
-  nextPage () {
+  nextPage() {
     if (this.issuesSize > this.issues.length) {
       if (this.issues.length / PER_PAGE >= 1) {
         this.page += 1;
@@ -78,7 +93,7 @@ class List {
     }
   }
 
-  getIssues (emptyIssues = true) {
+  getIssues(emptyIssues = true) {
     const data = queryData(gl.issueBoards.BoardsStore.filter.path, { page: this.page });
 
     if (this.label && data.label_name) {
@@ -89,7 +104,8 @@ class List {
       this.loading = true;
     }
 
-    return gl.boardService.getIssuesForList(this.id, data)
+    return gl.boardService
+      .getIssuesForList(this.id, data)
       .then(res => res.data)
       .then((data) => {
         this.loading = false;
@@ -103,16 +119,19 @@ class List {
       });
   }
 
-  newIssue (issue) {
+  newIssue(issue) {
     this.addIssue(issue, null, 0);
     this.issuesSize += 1;
 
-    return gl.boardService.newIssue(this.id, issue)
+    return gl.boardService
+      .newIssue(this.id, issue)
       .then(res => res.data)
       .then((data) => {
         issue.id = data.id;
         issue.iid = data.iid;
         issue.project = data.project;
+        issue.path = data.real_path;
+        issue.referencePath = data.reference_path;
 
         if (this.issuesSize > 1) {
           const moveBeforeId = this.issues[1].id;
@@ -121,13 +140,13 @@ class List {
       });
   }
 
-  createIssues (data) {
-    data.forEach((issueObj) => {
+  createIssues(data) {
+    data.forEach(issueObj => {
       this.addIssue(new ListIssue(issueObj, this.defaultAvatar));
     });
   }
 
-  addIssue (issue, listFrom, newIndex) {
+  addIssue(issue, listFrom, newIndex) {
     let moveBeforeId = null;
     let moveAfterId = null;
 
@@ -150,6 +169,13 @@ class List {
         issue.addLabel(this.label);
       }
 
+      if (this.assignee) {
+        if (listFrom && listFrom.type === 'assignee') {
+          issue.removeAssignee(listFrom.assignee);
+        }
+        issue.addAssignee(this.assignee);
+      }
+
       if (listFrom) {
         this.issuesSize += 1;
 
@@ -158,29 +184,29 @@ class List {
     }
   }
 
-  moveIssue (issue, oldIndex, newIndex, moveBeforeId, moveAfterId) {
+  moveIssue(issue, oldIndex, newIndex, moveBeforeId, moveAfterId) {
     this.issues.splice(oldIndex, 1);
     this.issues.splice(newIndex, 0, issue);
 
-    gl.boardService.moveIssue(issue.id, null, null, moveBeforeId, moveAfterId)
-      .catch(() => {
-        // TODO: handle request error
-      });
+    gl.boardService.moveIssue(issue.id, null, null, moveBeforeId, moveAfterId).catch(() => {
+      // TODO: handle request error
+    });
   }
 
   updateIssueLabel(issue, listFrom, moveBeforeId, moveAfterId) {
-    gl.boardService.moveIssue(issue.id, listFrom.id, this.id, moveBeforeId, moveAfterId)
+    gl.boardService
+      .moveIssue(issue.id, listFrom.id, this.id, moveBeforeId, moveAfterId)
       .catch(() => {
         // TODO: handle request error
       });
   }
 
-  findIssue (id) {
+  findIssue(id) {
     return this.issues.find(issue => issue.id === id);
   }
 
-  removeIssue (removeIssue) {
-    this.issues = this.issues.filter((issue) => {
+  removeIssue(removeIssue) {
+    this.issues = this.issues.filter(issue => {
       const matchesRemove = removeIssue.id === issue.id;
 
       if (matchesRemove) {
diff --git a/app/assets/javascripts/boards/models/milestone.js b/app/assets/javascripts/boards/models/milestone.js
index c867b06d320..17d15278a74 100644
--- a/app/assets/javascripts/boards/models/milestone.js
+++ b/app/assets/javascripts/boards/models/milestone.js
@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */
-
 class ListMilestone {
   constructor(obj) {
     this.id = obj.id;
diff --git a/app/assets/javascripts/boards/services/board_service.js b/app/assets/javascripts/boards/services/board_service.js
index d78d4701974..029b0971f2c 100644
--- a/app/assets/javascripts/boards/services/board_service.js
+++ b/app/assets/javascripts/boards/services/board_service.js
@@ -19,7 +19,7 @@ export default class BoardService {
   }
 
   static generateIssuePath(boardId, id) {
-    return `${gon.relative_url_root}/-/boards/${boardId ? `/${boardId}` : ''}/issues${id ? `/${id}` : ''}`;
+    return `${gon.relative_url_root}/-/boards/${boardId ? `${boardId}` : ''}/issues${id ? `/${id}` : ''}`;
   }
 
   all() {
@@ -30,11 +30,13 @@ export default class BoardService {
     return axios.post(this.listsEndpointGenerate, {});
   }
 
-  createList(labelId) {
+  createList(entityId, entityType) {
+    const list = {
+      [entityType]: entityId,
+    };
+
     return axios.post(this.listsEndpoint, {
-      list: {
-        label_id: labelId,
-      },
+      list,
     });
   }
 
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index 20e78edf2a2..333338489bc 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -1,4 +1,4 @@
-/* eslint-disable comma-dangle, space-before-function-paren, one-var, no-shadow, dot-notation, max-len */
+/* eslint-disable comma-dangle, no-shadow */
 /* global List */
 
 import $ from 'jquery';
@@ -103,8 +103,15 @@ gl.issueBoards.BoardsStore = {
     const listLabels = issueLists.map(listIssue => listIssue.label);
 
     if (!issueTo) {
-      // Add to new lists issues if it doesn't already exist
-      listTo.addIssue(issue, listFrom, newIndex);
+      // Check if target list assignee is already present in this issue
+      if ((listTo.type === 'assignee' && listFrom.type === 'assignee') &&
+          issue.findAssignee(listTo.assignee)) {
+        const targetIssue = listTo.findIssue(issue.id);
+        targetIssue.removeAssignee(listFrom.assignee);
+      } else {
+        // Add to new lists issues if it doesn't already exist
+        listTo.addIssue(issue, listFrom, newIndex);
+      }
     } else {
       listTo.updateIssueLabel(issue, listFrom);
       issueTo.removeLabel(listFrom.label);
@@ -115,7 +122,11 @@ gl.issueBoards.BoardsStore = {
         list.removeIssue(issue);
       });
       issue.removeLabels(listLabels);
-    } else {
+    } else if (listTo.type === 'backlog' && listFrom.type === 'assignee') {
+      issue.removeAssignee(listFrom.assignee);
+      listFrom.removeIssue(issue);
+    } else if ((listTo.type !== 'label' && listFrom.type === 'assignee') ||
+               (listTo.type !== 'assignee' && listFrom.type === 'label')) {
       listFrom.removeIssue(issue);
     }
   },
@@ -126,13 +137,14 @@ gl.issueBoards.BoardsStore = {
     list.moveIssue(issue, oldIndex, newIndex, beforeId, afterId);
   },
   findList (key, val, type = 'label') {
-    return this.state.lists.filter((list) => {
-      const byType = type ? list['type'] === type : true;
+    const filteredList = this.state.lists.filter((list) => {
+      const byType = type ? (list.type === type) || (list.type === 'assignee') : true;
 
       return list[key] === val && byType;
-    })[0];
+    });
+    return filteredList[0];
   },
   updateFiltersUrl () {
-    history.pushState(null, null, `?${this.filter.path}`);
+    window.history.pushState(null, null, `?${this.filter.path}`);
   }
 };
diff --git a/app/assets/javascripts/boards/stores/modal_store.js b/app/assets/javascripts/boards/stores/modal_store.js
index 4fdc925c825..0d9ac367a70 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js
+++ b/app/assets/javascripts/boards/stores/modal_store.js
@@ -1,6 +1,3 @@
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
 class ModalStore {
   constructor() {
     this.store = {
@@ -29,7 +26,7 @@ class ModalStore {
 
   toggleIssue(issueObj) {
     const issue = issueObj;
-    const selected = issue.selected;
+    const { selected } = issue;
 
     issue.selected = !selected;
 
@@ -95,4 +92,4 @@ class ModalStore {
   }
 }
 
-gl.issueBoards.ModalStore = new ModalStore();
+export default new ModalStore();
diff --git a/app/assets/javascripts/branches/branches_delete_modal.js b/app/assets/javascripts/branches/branches_delete_modal.js
index 839e369eaf6..f34496f84c6 100644
--- a/app/assets/javascripts/branches/branches_delete_modal.js
+++ b/app/assets/javascripts/branches/branches_delete_modal.js
@@ -16,6 +16,7 @@ class DeleteModal {
   bindEvents() {
     this.$toggleBtns.on('click', this.setModalData.bind(this));
     this.$confirmInput.on('input', this.setDeleteDisabled.bind(this));
+    this.$deleteBtn.on('click', this.setDisableDeleteButton.bind(this));
   }
 
   setModalData(e) {
@@ -30,6 +31,16 @@ class DeleteModal {
     this.$deleteBtn.attr('disabled', e.currentTarget.value !== this.branchName);
   }
 
+  setDisableDeleteButton(e) {
+    if (this.$deleteBtn.is('[disabled]')) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    return true;
+  }
+
   updateModal() {
     this.$branchName.text(this.branchName);
     this.$confirmInput.val('');
diff --git a/app/assets/javascripts/build_artifacts.js b/app/assets/javascripts/build_artifacts.js
index 3fa16517388..e338376fcaa 100644
--- a/app/assets/javascripts/build_artifacts.js
+++ b/app/assets/javascripts/build_artifacts.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, prefer-arrow-callback, no-return-assign */
+/* eslint-disable func-names, prefer-arrow-callback */
 
 import $ from 'jquery';
 import { visitUrl } from './lib/utils/url_utility';
diff --git a/app/assets/javascripts/ci_variable_list/ci_variable_list.js b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
index 745f3404295..47efb3a8cee 100644
--- a/app/assets/javascripts/ci_variable_list/ci_variable_list.js
+++ b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
@@ -33,7 +33,7 @@ export default class VariableList {
         selector: '.js-ci-variable-input-key',
         default: '',
       },
-      value: {
+      secret_value: {
         selector: '.js-ci-variable-input-value',
         default: '',
       },
@@ -105,7 +105,7 @@ export default class VariableList {
     setupToggleButtons($row[0]);
 
     // Reset the resizable textarea
-    $row.find(this.inputMap.value.selector).css('height', '');
+    $row.find(this.inputMap.secret_value.selector).css('height', '');
 
     const $environmentSelect = $row.find('.js-variable-environment-toggle');
     if ($environmentSelect.length) {
@@ -141,6 +141,11 @@ export default class VariableList {
       $rowClone.find(entry.selector).val(entry.default);
     });
 
+    // Close any dropdowns
+    $rowClone.find('.dropdown-menu.show').each((index, $dropdown) => {
+      $dropdown.classList.remove('show');
+    });
+
     this.initRow($rowClone);
 
     $row.after($rowClone);
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 01aec4f36af..8139aa69fc7 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -31,6 +31,7 @@ export default class Clusters {
       installHelmPath,
       installIngressPath,
       installRunnerPath,
+      installJupyterPath,
       installPrometheusPath,
       managePrometheusPath,
       clusterStatus,
@@ -51,6 +52,7 @@ export default class Clusters {
       installIngressEndpoint: installIngressPath,
       installRunnerEndpoint: installRunnerPath,
       installPrometheusEndpoint: installPrometheusPath,
+      installJupyterEndpoint: installJupyterPath,
     });
 
     this.installApplication = this.installApplication.bind(this);
@@ -79,7 +81,7 @@ export default class Clusters {
   }
 
   initApplications() {
-    const store = this.store;
+    const { store } = this;
     const el = document.querySelector('#js-cluster-applications');
 
     this.applications = new Vue({
@@ -209,11 +211,12 @@ export default class Clusters {
     }
   }
 
-  installApplication(appId) {
+  installApplication(data) {
+    const appId = data.id;
     this.store.updateAppProperty(appId, 'requestStatus', REQUEST_LOADING);
     this.store.updateAppProperty(appId, 'requestReason', null);
 
-    this.service.installApplication(appId)
+    this.service.installApplication(appId, data.params)
       .then(() => {
         this.store.updateAppProperty(appId, 'requestStatus', REQUEST_SUCCESS);
       })
diff --git a/app/assets/javascripts/clusters/clusters_index.js b/app/assets/javascripts/clusters/clusters_index.js
index 2e3ad244375..1e5c733d151 100644
--- a/app/assets/javascripts/clusters/clusters_index.js
+++ b/app/assets/javascripts/clusters/clusters_index.js
@@ -1,20 +1,24 @@
-import Flash from '../flash';
-import { s__ } from '../locale';
-import setupToggleButtons from '../toggle_buttons';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import setupToggleButtons from '~/toggle_buttons';
+import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
+
 import ClustersService from './services/clusters_service';
 
 export default () => {
   const clusterList = document.querySelector('.js-clusters-list');
+
+  gcpSignupOffer();
+
   // The empty state won't have a clusterList
   if (clusterList) {
-    setupToggleButtons(
-      document.querySelector('.js-clusters-list'),
-      (value, toggle) =>
-        ClustersService.updateCluster(toggle.dataset.endpoint, { cluster: { enabled: value } })
-          .catch((err) => {
-            Flash(s__('ClusterIntegration|Something went wrong on our end.'));
-            throw err;
-          }),
+    setupToggleButtons(document.querySelector('.js-clusters-list'), (value, toggle) =>
+      ClustersService.updateCluster(toggle.dataset.endpoint, { cluster: { enabled: value } }).catch(
+        err => {
+          createFlash(__('Something went wrong on our end.'));
+          throw err;
+        },
+      ),
     );
   }
 };
diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index c2a35341eb2..ec52fdfdf32 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -52,6 +52,11 @@
         type: String,
         required: false,
       },
+      installApplicationRequestParams: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
     },
     computed: {
       rowJsClass() {
@@ -109,7 +114,10 @@
     },
     methods: {
       installClicked() {
-        eventHub.$emit('installApplication', this.id);
+        eventHub.$emit('installApplication', {
+          id: this.id,
+          params: this.installApplicationRequestParams,
+        });
       },
     },
   };
@@ -117,8 +125,8 @@
 
 <template>
   <div
-    class="gl-responsive-table-row gl-responsive-table-row-col-span"
     :class="rowJsClass"
+    class="gl-responsive-table-row gl-responsive-table-row-col-span"
   >
     <div
       class="gl-responsive-table-row-layout"
@@ -147,8 +155,8 @@
         <slot name="description"></slot>
       </div>
       <div
-        class="table-section table-button-footer section-align-top"
         :class="{ 'section-20': showManageButton, 'section-15': !showManageButton }"
+        class="table-section table-button-footer section-align-top"
         role="gridcell"
       >
         <div
@@ -156,18 +164,18 @@
           class="btn-group table-action-buttons"
         >
           <a
-            class="btn"
             :href="manageLink"
+            class="btn"
           >
             {{ manageButtonLabel }}
           </a>
         </div>
         <div class="btn-group table-action-buttons">
           <loading-button
-            class="js-cluster-application-install-button"
             :loading="installButtonLoading"
             :disabled="installButtonDisabled"
             :label="installButtonLabel"
+            class="js-cluster-application-install-button"
             @click="installClicked"
           />
         </div>
@@ -179,7 +187,7 @@
       role="row"
     >
       <div
-        class="alert alert-danger alert-block append-bottom-0 table-section section-100"
+        class="alert alert-danger alert-block append-bottom-0 clusters-error-alert"
         role="gridcell"
       >
         <div>
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index f8dcdf3f60a..8ee7279e544 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -1,96 +1,102 @@
 <script>
-  import _ from 'underscore';
-  import { s__, sprintf } from '../../locale';
-  import applicationRow from './application_row.vue';
-  import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
-  import {
-    APPLICATION_INSTALLED,
-    INGRESS,
-  } from '../constants';
+import _ from 'underscore';
+import { s__, sprintf } from '../../locale';
+import applicationRow from './application_row.vue';
+import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import { APPLICATION_INSTALLED, INGRESS } from '../constants';
 
-  export default {
-    components: {
-      applicationRow,
-      clipboardButton,
+export default {
+  components: {
+    applicationRow,
+    clipboardButton,
+  },
+  props: {
+    applications: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
-    props: {
-      applications: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      helpPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      ingressHelpPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      ingressDnsHelpPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      managePrometheusPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    helpPath: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      generalApplicationDescription() {
-        return sprintf(
-          _.escape(s__(
+    ingressHelpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    ingressDnsHelpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    managePrometheusPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    generalApplicationDescription() {
+      return sprintf(
+        _.escape(
+          s__(
             `ClusterIntegration|Install applications on your Kubernetes cluster.
             Read more about %{helpLink}`,
-          )), {
-            helpLink: `<a href="${this.helpPath}">
+          ),
+        ),
+        {
+          helpLink: `<a href="${this.helpPath}">
               ${_.escape(s__('ClusterIntegration|installing applications'))}
             </a>`,
-          },
-          false,
-        );
-      },
-      ingressId() {
-        return INGRESS;
-      },
-      ingressInstalled() {
-        return this.applications.ingress.status === APPLICATION_INSTALLED;
-      },
-      ingressExternalIp() {
-        return this.applications.ingress.externalIp;
-      },
-      ingressDescription() {
-        const extraCostParagraph = sprintf(
-          _.escape(s__(
+        },
+        false,
+      );
+    },
+    ingressId() {
+      return INGRESS;
+    },
+    ingressInstalled() {
+      return this.applications.ingress.status === APPLICATION_INSTALLED;
+    },
+    ingressExternalIp() {
+      return this.applications.ingress.externalIp;
+    },
+    ingressDescription() {
+      const extraCostParagraph = sprintf(
+        _.escape(
+          s__(
             `ClusterIntegration|%{boldNotice} This will add some extra resources
             like a load balancer, which may incur additional costs depending on
-            the hosting provider your Kubernetes cluster is installed on. If you are using GKE,
-            you can %{pricingLink}.`,
-          )), {
-            boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`,
-            pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer">
+            the hosting provider your Kubernetes cluster is installed on. If you are using
+            Google Kubernetes Engine, you can %{pricingLink}.`,
+          ),
+        ),
+        {
+          boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`,
+          pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer">
               ${_.escape(s__('ClusterIntegration|check the pricing here'))}</a>`,
-          },
-          false,
-        );
+        },
+        false,
+      );
 
-        const externalIpParagraph = sprintf(
-          _.escape(s__(
+      const externalIpParagraph = sprintf(
+        _.escape(
+          s__(
             `ClusterIntegration|After installing Ingress, you will need to point your wildcard DNS
             at the generated external IP address in order to view your app after it is deployed. %{ingressHelpLink}`,
-          )), {
-            ingressHelpLink: `<a href="${this.ingressHelpPath}">
+          ),
+        ),
+        {
+          ingressHelpLink: `<a href="${this.ingressHelpPath}">
               ${_.escape(s__('ClusterIntegration|More information'))}
             </a>`,
-          },
-          false,
-        );
+        },
+        false,
+      );
 
-        return `
+      return `
           <p>
             ${extraCostParagraph}
           </p>
@@ -98,22 +104,31 @@
             ${externalIpParagraph}
           </p>
         `;
-      },
-      prometheusDescription() {
-        return sprintf(
-          _.escape(s__(
+    },
+    prometheusDescription() {
+      return sprintf(
+        _.escape(
+          s__(
             `ClusterIntegration|Prometheus is an open-source monitoring system
             with %{gitlabIntegrationLink} to monitor deployed applications.`,
-          )), {
-            gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
+          ),
+        ),
+        {
+          gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
               target="_blank" rel="noopener noreferrer">
               ${_.escape(s__('ClusterIntegration|GitLab Integration'))}</a>`,
-          },
-          false,
-        );
-      },
+        },
+        false,
+      );
+    },
+    jupyterInstalled() {
+      return this.applications.jupyter.status === APPLICATION_INSTALLED;
+    },
+    jupyterHostname() {
+      return this.applications.jupyter.hostname;
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -137,11 +152,11 @@
         <application-row
           id="helm"
           :title="applications.helm.title"
-          title-link="https://docs.helm.sh/"
           :status="applications.helm.status"
           :status-reason="applications.helm.statusReason"
           :request-status="applications.helm.requestStatus"
           :request-reason="applications.helm.requestReason"
+          title-link="https://docs.helm.sh/"
         >
           <div slot="description">
             {{ s__(`ClusterIntegration|Helm streamlines installing
@@ -153,11 +168,11 @@
         <application-row
           :id="ingressId"
           :title="applications.ingress.title"
-          title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
           :status="applications.ingress.status"
           :status-reason="applications.ingress.statusReason"
           :request-status="applications.ingress.requestStatus"
           :request-reason="applications.ingress.requestReason"
+          title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
         >
           <div slot="description">
             <p>
@@ -176,17 +191,17 @@
                   class="input-group"
                 >
                   <input
-                    type="text"
                     id="ingress-ip-address"
-                    class="form-control js-ip-address"
                     :value="ingressExternalIp"
+                    type="text"
+                    class="form-control js-ip-address"
                     readonly
                   />
-                  <span class="input-group-btn">
+                  <span class="input-group-append">
                     <clipboard-button
                       :text="ingressExternalIp"
                       :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
-                      class="js-clipboard-btn"
+                      class="input-group-text js-clipboard-btn"
                     />
                   </span>
                 </div>
@@ -205,7 +220,7 @@
               >
                 {{ s__(`ClusterIntegration|The IP address is in
                 the process of being assigned. Please check your Kubernetes
-                cluster or Quotas on GKE if it takes a long time.`) }}
+                cluster or Quotas on Google Kubernetes Engine if it takes a long time.`) }}
 
                 <a
                   :href="ingressHelpPath"
@@ -240,12 +255,12 @@
         <application-row
           id="prometheus"
           :title="applications.prometheus.title"
-          title-link="https://prometheus.io/docs/introduction/overview/"
           :manage-link="managePrometheusPath"
           :status="applications.prometheus.status"
           :status-reason="applications.prometheus.statusReason"
           :request-status="applications.prometheus.requestStatus"
           :request-reason="applications.prometheus.requestReason"
+          title-link="https://prometheus.io/docs/introduction/overview/"
         >
           <div
             slot="description"
@@ -256,11 +271,11 @@
         <application-row
           id="runner"
           :title="applications.runner.title"
-          title-link="https://docs.gitlab.com/runner/"
           :status="applications.runner.status"
           :status-reason="applications.runner.statusReason"
           :request-status="applications.runner.requestStatus"
           :request-reason="applications.runner.requestReason"
+          title-link="https://docs.gitlab.com/runner/"
         >
           <div slot="description">
             {{ s__(`ClusterIntegration|GitLab Runner connects to this
@@ -269,11 +284,67 @@
               applications to production.`) }}
           </div>
         </application-row>
+        <application-row
+          id="jupyter"
+          :title="applications.jupyter.title"
+          :status="applications.jupyter.status"
+          :status-reason="applications.jupyter.statusReason"
+          :request-status="applications.jupyter.requestStatus"
+          :request-reason="applications.jupyter.requestReason"
+          :install-application-request-params="{ hostname: applications.jupyter.hostname }"
+          title-link="https://jupyterhub.readthedocs.io/en/stable/"
+        >
+          <div slot="description">
+            <p>
+              {{ s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
+                manages, and proxies multiple instances of the single-user
+                Jupyter notebook server. JupyterHub can be used to serve
+                notebooks to a class of students, a corporate data science group,
+                or a scientific research group.`) }}
+            </p>
+
+            <template v-if="ingressExternalIp">
+              <div class="form-group">
+                <label for="jupyter-hostname">
+                  {{ s__('ClusterIntegration|Jupyter Hostname') }}
+                </label>
+
+                <div class="input-group">
+                  <input
+                    v-model="applications.jupyter.hostname"
+                    :readonly="jupyterInstalled"
+                    type="text"
+                    class="form-control js-hostname"
+                  />
+                  <span
+                    class="input-group-btn"
+                  >
+                    <clipboard-button
+                      :text="jupyterHostname"
+                      :title="s__('ClusterIntegration|Copy Jupyter Hostname to clipboard')"
+                      class="js-clipboard-btn"
+                    />
+                  </span>
+                </div>
+              </div>
+              <p v-if="ingressInstalled">
+                {{ s__(`ClusterIntegration|Replace this with your own hostname if you want.
+                If you do so, point hostname to Ingress IP Address from above.`) }}
+                <a
+                  :href="ingressDnsHelpPath"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {{ __('More information') }}
+                </a>
+              </p>
+            </template>
+          </div>
+        </application-row>
         <!--
           NOTE: Don't forget to update `clusters.scss`
           min-height for this block and uncomment `application_spec` tests
         -->
-        <!-- Add GitLab Runner row, all other plumbing is complete -->
       </div>
     </div>
   </section>
diff --git a/app/assets/javascripts/clusters/components/gcp_signup_offer.js b/app/assets/javascripts/clusters/components/gcp_signup_offer.js
new file mode 100644
index 00000000000..8bc20a1c09f
--- /dev/null
+++ b/app/assets/javascripts/clusters/components/gcp_signup_offer.js
@@ -0,0 +1,27 @@
+import $ from 'jquery';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import Flash from '~/flash';
+
+export default function gcpSignupOffer() {
+  const alertEl = document.querySelector('.gcp-signup-offer');
+  if (!alertEl) {
+    return;
+  }
+
+  const closeButtonEl = alertEl.getElementsByClassName('close')[0];
+  const { dismissEndpoint, featureId } = closeButtonEl.dataset;
+
+  closeButtonEl.addEventListener('click', () => {
+    axios
+      .post(dismissEndpoint, {
+        feature_name: featureId,
+      })
+      .then(() => {
+        $(alertEl).alert('close');
+      })
+      .catch(() => {
+        Flash(__('An error occurred while dismissing the alert. Refresh the page and try again.'));
+      });
+  });
+}
diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js
index b7179f52bb3..371f71fde44 100644
--- a/app/assets/javascripts/clusters/constants.js
+++ b/app/assets/javascripts/clusters/constants.js
@@ -11,3 +11,4 @@ export const REQUEST_LOADING = 'request-loading';
 export const REQUEST_SUCCESS = 'request-success';
 export const REQUEST_FAILURE = 'request-failure';
 export const INGRESS = 'ingress';
+export const JUPYTER = 'jupyter';
diff --git a/app/assets/javascripts/clusters/services/clusters_service.js b/app/assets/javascripts/clusters/services/clusters_service.js
index 13468578f4f..a7d82292ba9 100644
--- a/app/assets/javascripts/clusters/services/clusters_service.js
+++ b/app/assets/javascripts/clusters/services/clusters_service.js
@@ -8,6 +8,7 @@ export default class ClusterService {
       ingress: this.options.installIngressEndpoint,
       runner: this.options.installRunnerEndpoint,
       prometheus: this.options.installPrometheusEndpoint,
+      jupyter: this.options.installJupyterEndpoint,
     };
   }
 
@@ -15,8 +16,8 @@ export default class ClusterService {
     return axios.get(this.options.endpoint);
   }
 
-  installApplication(appId) {
-    return axios.post(this.appInstallEndpointMap[appId]);
+  installApplication(appId, params) {
+    return axios.post(this.appInstallEndpointMap[appId], params);
   }
 
   static updateCluster(endpoint, data) {
diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js
index 348bbec3b25..d90db7b103c 100644
--- a/app/assets/javascripts/clusters/stores/clusters_store.js
+++ b/app/assets/javascripts/clusters/stores/clusters_store.js
@@ -1,5 +1,5 @@
 import { s__ } from '../../locale';
-import { INGRESS } from '../constants';
+import { INGRESS, JUPYTER } from '../constants';
 
 export default class ClusterStore {
   constructor() {
@@ -38,6 +38,14 @@ export default class ClusterStore {
           requestStatus: null,
           requestReason: null,
         },
+        jupyter: {
+          title: s__('ClusterIntegration|JupyterHub'),
+          status: null,
+          statusReason: null,
+          requestStatus: null,
+          requestReason: null,
+          hostname: null,
+        },
       },
     };
   }
@@ -83,6 +91,12 @@ export default class ClusterStore {
 
       if (appId === INGRESS) {
         this.state.applications.ingress.externalIp = serverAppEntry.external_ip;
+      } else if (appId === JUPYTER) {
+        this.state.applications.jupyter.hostname =
+          serverAppEntry.hostname ||
+          (this.state.applications.ingress.externalIp
+            ? `jupyter.${this.state.applications.ingress.externalIp}.nip.io`
+            : '');
       }
     });
   }
diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index 7f3d04655a7..410580b4c25 100644
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-use-before-define, prefer-arrow-callback, no-else-return, consistent-return, prefer-template, quotes, one-var, one-var-declaration-per-line, no-unused-vars, no-return-assign, comma-dangle, quote-props, no-unused-expressions, no-sequences, object-shorthand, max-len */
+/* eslint-disable func-names, wrap-iife, no-var, prefer-arrow-callback, no-else-return, consistent-return, prefer-template, quotes, one-var, one-var-declaration-per-line, no-unused-vars, no-return-assign, comma-dangle, quote-props, no-unused-expressions, no-sequences, max-len */
 
 import $ from 'jquery';
 
@@ -95,7 +95,7 @@ export default class ImageFile {
     });
     return [maxWidth, maxHeight];
   }
-  // eslint-disable-next-line
+
   views = {
     'two-up': function() {
       return $('.two-up.view .wrap', this.file).each((function(_this) {
@@ -122,7 +122,7 @@ export default class ImageFile {
       return $('.swipe.view', this.file).each((function(_this) {
         return function(index, view) {
           var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
-          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          ref = _this.prepareFrames(view), [maxWidth, maxHeight] = ref;
           $swipeFrame = $('.swipe-frame', view);
           $swipeWrap = $('.swipe-wrap', view);
           $swipeBar = $('.swipe-bar', view);
@@ -159,7 +159,7 @@ export default class ImageFile {
       return $('.onion-skin.view', this.file).each((function(_this) {
         return function(index, view) {
           var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
-          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          ref = _this.prepareFrames(view), [maxWidth, maxHeight] = ref;
           $frame = $('.onion-skin-frame', view);
           $frameAdded = $('.frame.added', view);
           $track = $('.drag-track', view);
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 466a5b5d635..95c4be64d35 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -55,22 +55,20 @@
     },
     methods: {
       successCallback(resp) {
-        return resp.json().then((response) => {
-          // depending of the endpoint the response can either bring a `pipelines` key or not.
-          const pipelines = response.pipelines || response;
-          this.setCommonData(pipelines);
+        // depending of the endpoint the response can either bring a `pipelines` key or not.
+        const pipelines = resp.data.pipelines || resp.data;
+        this.setCommonData(pipelines);
 
-          const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
-            detail: {
-              pipelines: response,
-            },
-          });
-
-          // notifiy to update the count in tabs
-          if (this.$el.parentElement) {
-            this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
-          }
+        const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
+          detail: {
+            pipelines: resp.data,
+          },
         });
+
+        // notifiy to update the count in tabs
+        if (this.$el.parentElement) {
+          this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
+        }
       },
     },
   };
@@ -79,9 +77,9 @@
   <div class="content-list pipelines">
 
     <loading-icon
+      v-if="isLoading"
       :label="s__('Pipelines|Loading Pipelines')"
       size="3"
-      v-if="isLoading"
       class="prepend-top-20"
     />
 
@@ -93,8 +91,8 @@
     />
 
     <div
-      class="table-holder"
       v-else-if="shouldRenderTable"
+      class="table-holder"
     >
       <pipelines-table-component
         :pipelines="state.pipelines"
diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js
index 7e2a3573f81..9a3ea7a55b6 100644
--- a/app/assets/javascripts/commits.js
+++ b/app/assets/javascripts/commits.js
@@ -45,7 +45,7 @@ export default class CommitsList {
         this.content.fadeTo('fast', 1.0);
 
         // Change url so if user reload a page - search results are saved
-        history.replaceState({
+        window.history.replaceState({
           page: commitsUrl,
         }, document.title, commitsUrl);
       })
diff --git a/app/assets/javascripts/commons/bootstrap.js b/app/assets/javascripts/commons/bootstrap.js
index db96da4ccba..50e2949ab55 100644
--- a/app/assets/javascripts/commons/bootstrap.js
+++ b/app/assets/javascripts/commons/bootstrap.js
@@ -1,15 +1,7 @@
 import $ from 'jquery';
 
 // bootstrap jQuery plugins
-import 'bootstrap-sass/assets/javascripts/bootstrap/affix';
-import 'bootstrap-sass/assets/javascripts/bootstrap/alert';
-import 'bootstrap-sass/assets/javascripts/bootstrap/button';
-import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown';
-import 'bootstrap-sass/assets/javascripts/bootstrap/modal';
-import 'bootstrap-sass/assets/javascripts/bootstrap/tab';
-import 'bootstrap-sass/assets/javascripts/bootstrap/transition';
-import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip';
-import 'bootstrap-sass/assets/javascripts/bootstrap/popover';
+import 'bootstrap';
 
 // custom jQuery functions
 $.fn.extend({
diff --git a/app/assets/javascripts/commons/polyfills.js b/app/assets/javascripts/commons/polyfills.js
index 46232726510..d62d3c23654 100644
--- a/app/assets/javascripts/commons/polyfills.js
+++ b/app/assets/javascripts/commons/polyfills.js
@@ -1,4 +1,5 @@
 // ECMAScript polyfills
+import 'core-js/fn/array/fill';
 import 'core-js/fn/array/find';
 import 'core-js/fn/array/find-index';
 import 'core-js/fn/array/from';
diff --git a/app/assets/javascripts/compare.js b/app/assets/javascripts/compare.js
deleted file mode 100644
index 303a5bf4a53..00000000000
--- a/app/assets/javascripts/compare.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, no-var, object-shorthand, consistent-return, no-unused-vars, comma-dangle, vars-on-top, prefer-template, max-len */
-
-import $ from 'jquery';
-import { localTimeAgo } from './lib/utils/datetime_utility';
-import axios from './lib/utils/axios_utils';
-
-export default class Compare {
-  constructor(opts) {
-    this.opts = opts;
-    this.source_loading = $(".js-source-loading");
-    this.target_loading = $(".js-target-loading");
-    $('.js-compare-dropdown').each((function(_this) {
-      return function(i, dropdown) {
-        var $dropdown;
-        $dropdown = $(dropdown);
-        return $dropdown.glDropdown({
-          selectable: true,
-          fieldName: $dropdown.data('fieldName'),
-          filterable: true,
-          id: function(obj, $el) {
-            return $el.data('id');
-          },
-          toggleLabel: function(obj, $el) {
-            return $el.text().trim();
-          },
-          clicked: function(e, el) {
-            if ($dropdown.is('.js-target-branch')) {
-              return _this.getTargetHtml();
-            } else if ($dropdown.is('.js-source-branch')) {
-              return _this.getSourceHtml();
-            } else if ($dropdown.is('.js-target-project')) {
-              return _this.getTargetProject();
-            }
-          }
-        });
-      };
-    })(this));
-    this.initialState();
-  }
-
-  initialState() {
-    this.getSourceHtml();
-    this.getTargetHtml();
-  }
-
-  getTargetProject() {
-    $('.mr_target_commit').empty();
-
-    return axios.get(this.opts.targetProjectUrl, {
-      params: {
-        target_project_id: $("input[name='merge_request[target_project_id]']").val(),
-      },
-    }).then(({ data }) => {
-      $('.js-target-branch-dropdown .dropdown-content').html(data);
-    });
-  }
-
-  getSourceHtml() {
-    return this.constructor.sendAjax(this.opts.sourceBranchUrl, this.source_loading, '.mr_source_commit', {
-      ref: $("input[name='merge_request[source_branch]']").val()
-    });
-  }
-
-  getTargetHtml() {
-    return this.constructor.sendAjax(this.opts.targetBranchUrl, this.target_loading, '.mr_target_commit', {
-      target_project_id: $("input[name='merge_request[target_project_id]']").val(),
-      ref: $("input[name='merge_request[target_branch]']").val()
-    });
-  }
-
-  static sendAjax(url, loading, target, params) {
-    const $target = $(target);
-
-    loading.show();
-    $target.empty();
-
-    return axios.get(url, {
-      params,
-    }).then(({ data }) => {
-      loading.hide();
-      $target.html(data);
-      const className = '.' + $target[0].className.replace(' ', '.');
-      localTimeAgo($('.js-timeago', className));
-    });
-  }
-}
diff --git a/app/assets/javascripts/compare_autocomplete.js b/app/assets/javascripts/compare_autocomplete.js
index 260c91cac24..a252036d657 100644
--- a/app/assets/javascripts/compare_autocomplete.js
+++ b/app/assets/javascripts/compare_autocomplete.js
@@ -1,11 +1,12 @@
-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, object-shorthand, comma-dangle, prefer-arrow-callback, no-else-return, newline-per-chained-call, wrap-iife, max-len */
+/* eslint-disable func-names, one-var, no-var, one-var-declaration-per-line, object-shorthand, no-else-return, max-len */
 
 import $ from 'jquery';
 import { __ } from './locale';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
+import { capitalizeFirstCharacter } from './lib/utils/text_utility';
 
-export default function initCompareAutocomplete() {
+export default function initCompareAutocomplete(limitTo = null, clickHandler = () => {}) {
   $('.js-compare-dropdown').each(function() {
     var $dropdown, selected;
     $dropdown = $(this);
@@ -15,14 +16,27 @@ export default function initCompareAutocomplete() {
     const $filterInput = $('input[type="search"]', $dropdownContainer);
     $dropdown.glDropdown({
       data: function(term, callback) {
-        axios.get($dropdown.data('refsUrl'), {
-          params: {
-            ref: $dropdown.data('ref'),
-            search: term,
-          },
-        }).then(({ data }) => {
-          callback(data);
-        }).catch(() => flash(__('Error fetching refs')));
+        const params = {
+          ref: $dropdown.data('ref'),
+          search: term,
+        };
+
+        if (limitTo) {
+          params.find = limitTo;
+        }
+
+        axios
+          .get($dropdown.data('refsUrl'), {
+            params,
+          })
+          .then(({ data }) => {
+            if (limitTo) {
+              callback(data[capitalizeFirstCharacter(limitTo)] || []);
+            } else {
+              callback(data);
+            }
+          })
+          .catch(() => flash(__('Error fetching refs')));
       },
       selectable: true,
       filterable: true,
@@ -32,9 +46,15 @@ export default function initCompareAutocomplete() {
       renderRow: function(ref) {
         var link;
         if (ref.header != null) {
-          return $('<li />').addClass('dropdown-header').text(ref.header);
+          return $('<li />')
+            .addClass('dropdown-header')
+            .text(ref.header);
         } else {
-          link = $('<a />').attr('href', '#').addClass(ref === selected ? 'is-active' : '').text(ref).attr('data-ref', escape(ref));
+          link = $('<a />')
+            .attr('href', '#')
+            .addClass(ref === selected ? 'is-active' : '')
+            .text(ref)
+            .attr('data-ref', ref);
           return $('<li />').append(link);
         }
       },
@@ -43,9 +63,10 @@ export default function initCompareAutocomplete() {
       },
       toggleLabel: function(obj, $el) {
         return $el.text().trim();
-      }
+      },
+      clicked: () => clickHandler($dropdown),
     });
-    $filterInput.on('keyup', (e) => {
+    $filterInput.on('keyup', e => {
       const keyCode = e.keyCode || e.which;
       if (keyCode !== 13) return;
       const text = $filterInput.val();
@@ -54,10 +75,10 @@ export default function initCompareAutocomplete() {
       $dropdownContainer.removeClass('open');
     });
 
-    $dropdownContainer.on('click', '.dropdown-content a', (e) => {
+    $dropdownContainer.on('click', '.dropdown-content a', e => {
       $dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
       if ($dropdown.hasClass('has-tooltip')) {
-        $dropdown.tooltip('fixTitle');
+        $dropdown.tooltip('_fixTitle');
       }
     });
   });
diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
index fb1fc9cd32e..02aa507ba03 100644
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@@ -61,13 +61,19 @@ export default class CreateMergeRequestDropdown {
   }
 
   available() {
-    this.availableButton.classList.remove('hide');
-    this.unavailableButton.classList.add('hide');
+    this.availableButton.classList.remove('hidden');
+    this.unavailableButton.classList.add('hidden');
   }
 
   bindEvents() {
-    this.createMergeRequestButton.addEventListener('click', this.onClickCreateMergeRequestButton.bind(this));
-    this.createTargetButton.addEventListener('click', this.onClickCreateMergeRequestButton.bind(this));
+    this.createMergeRequestButton.addEventListener(
+      'click',
+      this.onClickCreateMergeRequestButton.bind(this),
+    );
+    this.createTargetButton.addEventListener(
+      'click',
+      this.onClickCreateMergeRequestButton.bind(this),
+    );
     this.branchInput.addEventListener('keyup', this.onChangeInput.bind(this));
     this.dropdownToggle.addEventListener('click', this.onClickSetFocusOnBranchNameInput.bind(this));
     this.refInput.addEventListener('keyup', this.onChangeInput.bind(this));
@@ -77,34 +83,37 @@ export default class CreateMergeRequestDropdown {
   checkAbilityToCreateBranch() {
     this.setUnavailableButtonState();
 
-    axios.get(this.canCreatePath)
+    axios
+      .get(this.canCreatePath)
       .then(({ data }) => {
         this.setUnavailableButtonState(false);
 
         if (data.can_create_branch) {
           this.available();
           this.enable();
+          this.updateBranchName(data.suggested_branch_name);
 
           if (!this.droplabInitialized) {
             this.droplabInitialized = true;
             this.initDroplab();
             this.bindEvents();
           }
-        } else if (data.has_related_branch) {
+        } else {
           this.hide();
         }
       })
       .catch(() => {
         this.unavailable();
         this.disable();
-        Flash('Failed to check if a new branch can be created.');
+        Flash(__('Failed to check related branches.'));
       });
   }
 
   createBranch() {
     this.isCreatingBranch = true;
 
-    return axios.post(this.createBranchPath)
+    return axios
+      .post(this.createBranchPath)
       .then(({ data }) => {
         this.branchCreated = true;
         window.location.href = data.url;
@@ -115,7 +124,8 @@ export default class CreateMergeRequestDropdown {
   createMergeRequest() {
     this.isCreatingMergeRequest = true;
 
-    return axios.post(this.createMrPath)
+    return axios
+      .post(this.createMrPath)
       .then(({ data }) => {
         this.mergeRequestCreated = true;
         window.location.href = data.url;
@@ -194,7 +204,8 @@ export default class CreateMergeRequestDropdown {
   getRef(ref, target = 'all') {
     if (!ref) return false;
 
-    return axios.get(this.refsPath + ref)
+    return axios
+      .get(`${this.refsPath}${encodeURIComponent(ref)}`)
       .then(({ data }) => {
         const branches = data[Object.keys(data)[0]];
         const tags = data[Object.keys(data)[1]];
@@ -203,7 +214,8 @@ export default class CreateMergeRequestDropdown {
         if (target === 'branch') {
           result = CreateMergeRequestDropdown.findByValue(branches, ref);
         } else {
-          result = CreateMergeRequestDropdown.findByValue(branches, ref, true) ||
+          result =
+            CreateMergeRequestDropdown.findByValue(branches, ref, true) ||
             CreateMergeRequestDropdown.findByValue(tags, ref, true);
           this.suggestedRef = result;
         }
@@ -231,7 +243,7 @@ export default class CreateMergeRequestDropdown {
   }
 
   hide() {
-    this.wrapperEl.classList.add('hide');
+    this.wrapperEl.classList.add('hidden');
   }
 
   init() {
@@ -254,11 +266,13 @@ export default class CreateMergeRequestDropdown {
   }
 
   isBusy() {
-    return this.isCreatingMergeRequest ||
+    return (
+      this.isCreatingMergeRequest ||
       this.mergeRequestCreated ||
       this.isCreatingBranch ||
       this.branchCreated ||
-      this.isGettingRef;
+      this.isGettingRef
+    );
   }
 
   onChangeInput(event) {
@@ -267,10 +281,11 @@ export default class CreateMergeRequestDropdown {
 
     if (event.target === this.branchInput) {
       target = 'branch';
-      value = this.branchInput.value;
+      ({ value } = this.branchInput);
     } else if (event.target === this.refInput) {
       target = 'ref';
-      value = event.target.value.slice(0, event.target.selectionStart) +
+      value =
+        event.target.value.slice(0, event.target.selectionStart) +
         event.target.value.slice(event.target.selectionEnd);
     } else {
       return false;
@@ -351,7 +366,7 @@ export default class CreateMergeRequestDropdown {
   removeMessage(target) {
     const { input, message } = this.getTargetData(target);
     const inputClasses = ['gl-field-error-outline', 'gl-field-success-outline'];
-    const messageClasses = ['gl-field-hint', 'gl-field-error-message', 'gl-field-success-message'];
+    const messageClasses = ['text-muted', 'text-danger', 'text-success'];
 
     inputClasses.forEach(cssClass => input.classList.remove(cssClass));
     messageClasses.forEach(cssClass => message.classList.remove(cssClass));
@@ -378,7 +393,7 @@ export default class CreateMergeRequestDropdown {
 
     this.removeMessage(target);
     input.classList.add('gl-field-success-outline');
-    message.classList.add('gl-field-success-message');
+    message.classList.add('text-success');
     message.textContent = sprintf(__('%{text} is available'), { text });
     message.style.display = 'inline-block';
   }
@@ -388,25 +403,31 @@ export default class CreateMergeRequestDropdown {
     const text = target === 'branch' ? __('branch name') : __('source');
 
     this.removeMessage(target);
-    message.classList.add('gl-field-hint');
+    message.classList.add('text-muted');
     message.textContent = sprintf(__('Checking %{text} availability…'), { text });
     message.style.display = 'inline-block';
   }
 
   showNotAvailableMessage(target) {
     const { input, message } = this.getTargetData(target);
-    const text = target === 'branch' ? __('Branch is already taken') : __('Source is not available');
+    const text =
+      target === 'branch' ? __('Branch is already taken') : __('Source is not available');
 
     this.removeMessage(target);
     input.classList.add('gl-field-error-outline');
-    message.classList.add('gl-field-error-message');
+    message.classList.add('text-danger');
     message.textContent = text;
     message.style.display = 'inline-block';
   }
 
   unavailable() {
-    this.availableButton.classList.add('hide');
-    this.unavailableButton.classList.remove('hide');
+    this.availableButton.classList.add('hidden');
+    this.unavailableButton.classList.remove('hidden');
+  }
+
+  updateBranchName(suggestedBranchName) {
+    this.branchInput.value = suggestedBranchName;
+    this.updateCreatePaths('branch', suggestedBranchName);
   }
 
   updateInputState(target, ref, result) {
@@ -414,8 +435,6 @@ export default class CreateMergeRequestDropdown {
     // ref - string - what a user typed.
     // result - string - what has been found on backend.
 
-    const pathReplacement = `$1${ref}`;
-
     // If a found branch equals exact the same text a user typed,
     // that means a new branch cannot be created as it already exists.
     if (ref === result) {
@@ -426,18 +445,12 @@ export default class CreateMergeRequestDropdown {
         this.refIsValid = true;
         this.refInput.dataset.value = ref;
         this.showAvailableMessage('ref');
-        this.createBranchPath = this.createBranchPath.replace(this.regexps.ref.createBranchPath,
-          pathReplacement);
-        this.createMrPath = this.createMrPath.replace(this.regexps.ref.createMrPath,
-          pathReplacement);
+        this.updateCreatePaths(target, ref);
       }
     } else if (target === 'branch') {
       this.branchIsValid = true;
       this.showAvailableMessage('branch');
-      this.createBranchPath = this.createBranchPath.replace(this.regexps.branch.createBranchPath,
-        pathReplacement);
-      this.createMrPath = this.createMrPath.replace(this.regexps.branch.createMrPath,
-        pathReplacement);
+      this.updateCreatePaths(target, ref);
     } else {
       this.refIsValid = false;
       this.refInput.dataset.value = ref;
@@ -457,4 +470,19 @@ export default class CreateMergeRequestDropdown {
       this.disableCreateAction();
     }
   }
+
+  // target - 'branch' or 'ref'
+  // ref - string - the new value to use as branch or ref
+  updateCreatePaths(target, ref) {
+    const pathReplacement = `$1${encodeURIComponent(ref)}`;
+
+    this.createBranchPath = this.createBranchPath.replace(
+      this.regexps[target].createBranchPath,
+      pathReplacement,
+    );
+    this.createMrPath = this.createMrPath.replace(
+      this.regexps[target].createMrPath,
+      pathReplacement,
+    );
+  }
 }
diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
index 3204b8dd8e7..410d4873e55 100644
--- a/app/assets/javascripts/cycle_analytics/components/banner.vue
+++ b/app/assets/javascripts/cycle_analytics/components/banner.vue
@@ -23,9 +23,9 @@
 <template>
   <div class="landing content-block">
     <button
+      :aria-label="__('Dismiss Cycle Analytics introduction box')"
       class="js-ca-dismiss-button dismiss-button"
       type="button"
-      :aria-label="__('Dismiss Cycle Analytics introduction box')"
       @click="dismissOverviewDialog"
     >
       <i
diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
index 32ae0cc1476..b626b187651 100644
--- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
@@ -16,17 +16,17 @@
 <template>
   <span
     v-if="count === 50"
-    class="events-info pull-right"
+    class="events-info float-right"
   >
     <i
-      class="fa fa-warning"
       v-tooltip
-      aria-hidden="true"
       :title="n__(
         'Limited to showing %d event at most',
         'Limited to showing %d events at most',
         50
       )"
+      class="fa fa-warning"
+      aria-hidden="true"
       data-placement="top"
     >
     </i>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
index 907638d798a..312fe75dde4 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
@@ -38,8 +38,8 @@
           <user-avatar-image :img-src="issue.author.avatarUrl"/>
           <h5 class="item-title issue-title">
             <a
-              class="issue-title"
               :href="issue.url"
+              class="issue-title"
             >
               {{ issue.title }}
             </a>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
index 34aa04083e6..d4735d030fc 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -74,12 +74,12 @@
           </template>
           <template v-else>
             <span
-              class="merge-request-branch"
               v-if="mergeRequest.branch"
+              class="merge-request-branch"
             >
               <icon
-                name="fork"
                 :size="16"
+                name="fork"
               />
               <a :href="mergeRequest.branch.url">
                 {{ mergeRequest.branch.name }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
index 92f2a95a66a..22637485c01 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -38,8 +38,8 @@
     <ul class="stage-event-list">
       <li
         v-for="(build, i) in items"
-        class="stage-event-item item-build-component"
         :key="i"
+        class="stage-event-item item-build-component"
       >
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
@@ -52,8 +52,8 @@
               #{{ build.id }}
             </a>
             <icon
-              name="fork"
               :size="16"
+              name="fork"
             />
             <a
               :href="build.branch.url"
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
index b84bb6ed792..a0796f299e7 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -64,8 +64,8 @@
               #{{ build.id }}
             </a>
             <icon
-              name="fork"
               :size="16"
+              name="fork"
             />
             <a
               :href="build.branch.url"
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 87f8854f940..1c43fc3cdc7 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -82,7 +82,6 @@ export default () => {
 
         this.service
           .fetchCycleAnalyticsData(fetchOptions)
-          .then(resp => resp.json())
           .then((response) => {
             this.store.setCycleAnalyticsData(response);
             this.selectDefaultStage();
@@ -116,7 +115,6 @@ export default () => {
             stage,
             startDate: this.startDate,
           })
-          .then(resp => resp.json())
           .then((response) => {
             this.isEmptyStage = !response.events.length;
             this.store.setStageEvents(response.events, stage);
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
index f496c38208d..4cf416c50e5 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
@@ -1,16 +1,20 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '~/lib/utils/axios_utils';
 
 export default class CycleAnalyticsService {
   constructor(options) {
-    this.requestPath = options.requestPath;
-    this.cycleAnalytics = Vue.resource(this.requestPath);
+    this.axios = axios.create({
+      baseURL: options.requestPath,
+    });
   }
 
   fetchCycleAnalyticsData(options = { startDate: 30 }) {
-    return this.cycleAnalytics.get({ cycle_analytics: { start_date: options.startDate } });
+    return this.axios
+      .get('', {
+        params: {
+          'cycle_analytics[start_date]': options.startDate,
+        },
+      })
+      .then(x => x.data);
   }
 
   fetchStageData(options) {
@@ -19,12 +23,12 @@ export default class CycleAnalyticsService {
       startDate,
     } = options;
 
-    return Vue.http.get(`${this.requestPath}/events/${stage.name}.json`, {
-      params: {
-        cycle_analytics: {
-          start_date: startDate,
+    return this.axios
+      .get(`events/${stage.name}.json`, {
+        params: {
+          'cycle_analytics[start_date]': startDate,
         },
-      },
-    });
+      })
+      .then(x => x.data);
   }
 }
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue
index b839b9f286f..7399fc97d45 100644
--- a/app/assets/javascripts/deploy_keys/components/action_btn.vue
+++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue
@@ -1,55 +1,50 @@
 <script>
-  import eventHub from '../eventhub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+import eventHub from '../eventhub';
 
-  export default {
-    components: {
-      loadingIcon,
+export default {
+  components: {
+    loadingIcon,
+  },
+  props: {
+    deployKey: {
+      type: Object,
+      required: true,
     },
-    props: {
-      deployKey: {
-        type: Object,
-        required: true,
-      },
-      type: {
-        type: String,
-        required: true,
-      },
-      btnCssClass: {
-        type: String,
-        required: false,
-        default: 'btn-default',
-      },
+    type: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        isLoading: false,
-      };
+    btnCssClass: {
+      type: String,
+      required: false,
+      default: 'btn-default',
     },
-    computed: {
-      text() {
-        return `${this.type.charAt(0).toUpperCase()}${this.type.slice(1)}`;
-      },
-    },
-    methods: {
-      doAction() {
-        this.isLoading = true;
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  methods: {
+    doAction() {
+      this.isLoading = true;
 
-        eventHub.$emit(`${this.type}.key`, this.deployKey, () => {
-          this.isLoading = false;
-        });
-      },
+      eventHub.$emit(`${this.type}.key`, this.deployKey, () => {
+        this.isLoading = false;
+      });
     },
-  };
+  },
+};
 </script>
 
 <template>
   <button
-    class="btn btn-sm prepend-left-10"
     :class="[{ disabled: isLoading }, btnCssClass]"
     :disabled="isLoading"
+    class="btn"
     @click="doAction">
-    {{ text }}
+    <slot></slot>
     <loading-icon
       v-if="isLoading"
       :inline="true"
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index 5a782237b7d..d91e4809126 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -1,110 +1,154 @@
 <script>
-  import Flash from '../../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';
+import { s__ } from '~/locale';
+import Flash from '~/flash';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
+import eventHub from '../eventhub';
+import DeployKeysService from '../service';
+import DeployKeysStore from '../store';
+import KeysPanel from './keys_panel.vue';
 
-  export default {
-    components: {
-      keysPanel,
-      loadingIcon,
+export default {
+  components: {
+    KeysPanel,
+    LoadingIcon,
+    NavigationTabs,
+  },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
     },
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
+    projectId: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        isLoading: false,
-        store: new DeployKeysStore(),
-      };
+  },
+  data() {
+    return {
+      currentTab: 'enabled_keys',
+      isLoading: false,
+      store: new DeployKeysStore(),
+    };
+  },
+  scopes: {
+    enabled_keys: s__('DeployKeys|Enabled deploy keys'),
+    available_project_keys: s__('DeployKeys|Privately accessible deploy keys'),
+    public_keys: s__('DeployKeys|Publicly accessible deploy keys'),
+  },
+  computed: {
+    tabs() {
+      return Object.keys(this.$options.scopes).map(scope => {
+        const count = Array.isArray(this.keys[scope]) ? this.keys[scope].length : null;
+
+        return {
+          name: this.$options.scopes[scope],
+          scope,
+          isActive: scope === this.currentTab,
+          count,
+        };
+      });
+    },
+    hasKeys() {
+      return Object.keys(this.keys).length;
     },
-    computed: {
-      hasKeys() {
-        return Object.keys(this.keys).length;
-      },
-      keys() {
-        return this.store.keys;
-      },
+    keys() {
+      return this.store.keys;
     },
-    created() {
-      this.service = new DeployKeysService(this.endpoint);
+  },
+  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);
+    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);
+  },
+  methods: {
+    onChangeTab(tab) {
+      this.currentTab = tab;
     },
-    mounted() {
-      this.fetchKeys();
+    fetchKeys() {
+      this.isLoading = true;
+
+      return this.service
+        .getKeys()
+        .then(data => {
+          this.isLoading = false;
+          this.store.keys = data;
+        })
+        .catch(() => {
+          this.isLoading = false;
+          this.store.keys = {};
+          return new Flash(s__('DeployKeys|Error getting deploy keys'));
+        });
     },
-    beforeDestroy() {
-      eventHub.$off('enable.key', this.enableKey);
-      eventHub.$off('remove.key', this.disableKey);
-      eventHub.$off('disable.key', this.disableKey);
+    enableKey(deployKey) {
+      this.service
+        .enableKey(deployKey.id)
+        .then(this.fetchKeys)
+        .catch(() => new Flash(s__('DeployKeys|Error enabling deploy key')));
     },
-    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, callback) {
-        // 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())
-            .then(callback)
-            .catch(() => new Flash('Error removing deploy key'));
-        } else {
-          callback();
-        }
-      },
+    disableKey(deployKey, callback) {
+      // eslint-disable-next-line no-alert
+      if (window.confirm(s__('DeployKeys|You are going to remove this deploy key. Are you sure?'))) {
+        this.service
+          .disableKey(deployKey.id)
+          .then(this.fetchKeys)
+          .then(callback)
+          .catch(() => new Flash(s__('DeployKeys|Error removing deploy key')));
+      } else {
+        callback();
+      }
     },
-  };
+  },
+};
 </script>
 
 <template>
   <div class="append-bottom-default deploy-keys">
     <loading-icon
       v-if="isLoading && !hasKeys"
+      :label="s__('DeployKeys|Loading deploy keys')"
       size="2"
-      label="Loading deploy keys"
     />
-    <div v-else-if="hasKeys">
-      <keys-panel
-        title="Enabled deploy keys for this project"
-        class="qa-project-deploy-keys"
-        :keys="keys.enabled_keys"
-        :store="store"
-        :endpoint="endpoint"
-      />
-      <keys-panel
-        title="Deploy keys from projects you have access to"
-        :keys="keys.available_project_keys"
-        :store="store"
-        :endpoint="endpoint"
-      />
+    <template v-else-if="hasKeys">
+      <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
+        <div class="fade-left">
+          <i
+            class="fa fa-angle-left"
+            aria-hidden="true"
+          >
+          </i>
+        </div>
+        <div class="fade-right">
+          <i
+            class="fa fa-angle-right"
+            aria-hidden="true"
+          >
+          </i>
+        </div>
+
+        <navigation-tabs
+          :tabs="tabs"
+          scope="deployKeys"
+          @onChangeTab="onChangeTab"
+        />
+      </div>
       <keys-panel
-        v-if="keys.public_keys.length"
-        title="Public deploy keys available to any project"
-        :keys="keys.public_keys"
+        :project-id="projectId"
+        :keys="keys[currentTab]"
         :store="store"
         :endpoint="endpoint"
+        class="qa-project-deploy-keys"
       />
-    </div>
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue
index c6091efd62f..f66ca070445 100644
--- a/app/assets/javascripts/deploy_keys/components/key.vue
+++ b/app/assets/javascripts/deploy_keys/components/key.vue
@@ -1,111 +1,235 @@
 <script>
-  import actionBtn from './action_btn.vue';
-  import { getTimeago } from '../../lib/utils/datetime_utility';
-  import tooltip from '../../vue_shared/directives/tooltip';
+import _ from 'underscore';
+import { s__, sprintf } from '~/locale';
+import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
 
-  export default {
-    components: {
-      actionBtn,
-    },
-    directives: {
-      tooltip,
-    },
-    props: {
-      deployKey: {
-        type: Object,
-        required: true,
-      },
-      store: {
-        type: Object,
-        required: true,
-      },
-      endpoint: {
-        type: String,
-        required: true,
-      },
-    },
-    computed: {
-      timeagoDate() {
-        return getTimeago().format(this.deployKey.created_at);
-      },
-      editDeployKeyPath() {
-        return `${this.endpoint}/${this.deployKey.id}/edit`;
-      },
-    },
-    methods: {
-      isEnabled(id) {
-        return this.store.findEnabledKey(id) !== undefined;
-      },
-      tooltipTitle(project) {
-        return project.can_push ? 'Write access allowed' : 'Read access only';
-      },
-    },
-  };
+import actionBtn from './action_btn.vue';
+
+export default {
+  components: {
+    actionBtn,
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    deployKey: {
+      type: Object,
+      required: true,
+    },
+    store: {
+      type: Object,
+      required: true,
+    },
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    projectId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      projectsExpanded: false,
+    };
+  },
+  computed: {
+    editDeployKeyPath() {
+      return `${this.endpoint}/${this.deployKey.id}/edit`;
+    },
+    projects() {
+      const projects = [...this.deployKey.deploy_keys_projects];
+
+      if (this.projectId !== null) {
+        const indexOfCurrentProject = _.findIndex(
+          projects,
+          project =>
+            project &&
+            project.project &&
+            project.project.id &&
+            project.project.id.toString() === this.projectId,
+        );
+
+        if (indexOfCurrentProject > -1) {
+          const currentProject = projects.splice(indexOfCurrentProject, 1);
+          currentProject[0].project.full_name = s__('DeployKeys|Current project');
+          return currentProject.concat(projects);
+        }
+      }
+      return projects;
+    },
+    firstProject() {
+      return _.head(this.projects);
+    },
+    restProjects() {
+      return _.tail(this.projects);
+    },
+    restProjectsTooltip() {
+      return sprintf(s__('DeployKeys|Expand %{count} other projects'), {
+        count: this.restProjects.length,
+      });
+    },
+    restProjectsLabel() {
+      return sprintf(s__('DeployKeys|+%{count} others'), { count: this.restProjects.length });
+    },
+    isEnabled() {
+      return this.store.isEnabled(this.deployKey.id);
+    },
+    isRemovable() {
+      return (
+        this.store.isEnabled(this.deployKey.id) &&
+        this.deployKey.destroyed_when_orphaned &&
+        this.deployKey.almost_orphaned
+      );
+    },
+    isExpandable() {
+      return !this.projectsExpanded && this.restProjects.length > 1;
+    },
+    isExpanded() {
+      return this.projectsExpanded || this.restProjects.length === 1;
+    },
+  },
+  methods: {
+    projectTooltipTitle(project) {
+      return project.can_push
+        ? s__('DeployKeys|Write access allowed')
+        : s__('DeployKeys|Read access only');
+    },
+    toggleExpanded() {
+      this.projectsExpanded = !this.projectsExpanded;
+    },
+  },
+};
 </script>
 
 <template>
-  <div>
-    <div class="pull-left append-right-10 hidden-xs">
-      <i
-        aria-hidden="true"
-        class="fa fa-key key-icon"
-      >
-      </i>
+  <div class="gl-responsive-table-row deploy-key">
+    <div class="table-section section-40">
+      <div
+        role="rowheader"
+        class="table-mobile-header">
+        {{ s__('DeployKeys|Deploy key') }}
+      </div>
+      <div class="table-mobile-content">
+        <strong class="title qa-key-title">
+          {{ deployKey.title }}
+        </strong>
+        <div class="fingerprint qa-key-fingerprint">
+          {{ deployKey.fingerprint }}
+        </div>
+      </div>
     </div>
-    <div class="deploy-key-content key-list-item-info">
-      <strong class="title qa-key-title">
-        {{ deployKey.title }}
-      </strong>
-      <div class="description qa-key-fingerprint">
-        {{ deployKey.fingerprint }}
+    <div class="table-section section-30 section-wrap">
+      <div
+        role="rowheader"
+        class="table-mobile-header">
+        {{ s__('DeployKeys|Project usage') }}
+      </div>
+      <div class="table-mobile-content deploy-project-list">
+        <template v-if="projects.length > 0">
+          <a
+            v-tooltip
+            :title="projectTooltipTitle(firstProject)"
+            class="label deploy-project-label"
+          >
+            <span>
+              {{ firstProject.project.full_name }}
+            </span>
+            <icon :name="firstProject.can_push ? 'lock-open' : 'lock'"/>
+          </a>
+          <a
+            v-tooltip
+            v-if="isExpandable"
+            :title="restProjectsTooltip"
+            class="label deploy-project-label"
+            @click="toggleExpanded"
+          >
+            <span>{{ restProjectsLabel }}</span>
+          </a>
+          <a
+            v-tooltip
+            v-for="deployKeysProject in restProjects"
+            v-else-if="isExpanded"
+            :key="deployKeysProject.project.full_path"
+            :href="deployKeysProject.project.full_path"
+            :title="projectTooltipTitle(deployKeysProject)"
+            class="label deploy-project-label"
+          >
+            <span>
+              {{ deployKeysProject.project.full_name }}
+            </span>
+            <icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'"/>
+          </a>
+        </template>
+        <span
+          v-else
+          class="text-secondary">{{ __('None') }}</span>
       </div>
     </div>
-    <div class="deploy-key-content prepend-left-default deploy-key-projects">
-      <a
-        v-for="(deployKeysProject, i) in deployKey.deploy_keys_projects"
-        :key="i"
-        class="label deploy-project-label"
-        :href="deployKeysProject.project.full_path"
-        :title="tooltipTitle(deployKeysProject)"
-        v-tooltip
-      >
-        {{ deployKeysProject.project.full_name }}
-        <i
-          v-if="!deployKeysProject.can_push"
-          aria-hidden="true"
-          class="fa fa-lock"
-        >
-        </i>
-      </a>
+    <div class="table-section section-15 text-right">
+      <div
+        role="rowheader"
+        class="table-mobile-header">
+        {{ __('Created') }}
+      </div>
+      <div class="table-mobile-content text-secondary key-created-at">
+        <span
+          v-tooltip
+          :title="tooltipTitle(deployKey.created_at)">
+          <icon name="calendar"/>
+          <span>{{ timeFormated(deployKey.created_at) }}</span>
+        </span>
+      </div>
     </div>
-    <div class="deploy-key-content">
-      <span class="key-created-at">
-        created {{ timeagoDate }}
-      </span>
-      <a
-        v-if="deployKey.can_edit"
-        class="btn btn-sm"
-        :href="editDeployKeyPath"
-      >
-        Edit
-      </a>
-      <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 class="table-section section-15 table-button-footer deploy-key-actions">
+      <div class="btn-group table-action-buttons">
+        <action-btn
+          v-if="!isEnabled"
+          :deploy-key="deployKey"
+          type="enable"
+        >
+          {{ __('Enable') }}
+        </action-btn>
+        <a
+          v-tooltip
+          v-if="deployKey.can_edit"
+          :href="editDeployKeyPath"
+          :title="__('Edit')"
+          class="btn btn-default text-secondary"
+          data-container="body"
+        >
+          <icon name="pencil"/>
+        </a>
+        <action-btn
+          v-tooltip
+          v-if="isRemovable"
+          :deploy-key="deployKey"
+          :title="__('Remove')"
+          btn-css-class="btn-danger"
+          type="remove"
+          data-container="body"
+        >
+          <icon name="remove"/>
+        </action-btn>
+        <action-btn
+          v-tooltip
+          v-else-if="isEnabled"
+          :deploy-key="deployKey"
+          :title="__('Disable')"
+          btn-css-class="btn-warning"
+          type="disable"
+          data-container="body"
+        >
+          <icon name="cancel"/>
+        </action-btn>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/deploy_keys/components/keys_panel.vue b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
index 822b0323156..2f057ca29f6 100644
--- a/app/assets/javascripts/deploy_keys/components/keys_panel.vue
+++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
@@ -1,62 +1,68 @@
 <script>
-  import key from './key.vue';
+import deployKey from './key.vue';
 
-  export default {
-    components: {
-      key,
+export default {
+  components: {
+    deployKey,
+  },
+  props: {
+    keys: {
+      type: Array,
+      required: true,
     },
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      keys: {
-        type: Array,
-        required: true,
-      },
-      showHelpBox: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      store: {
-        type: Object,
-        required: true,
-      },
-      endpoint: {
-        type: String,
-        required: true,
-      },
+    store: {
+      type: Object,
+      required: true,
     },
-  };
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    projectId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+};
 </script>
 
 <template>
-  <div class="deploy-keys-panel">
-    <h5>
-      {{ title }}
-      ({{ keys.length }})
-    </h5>
-    <ul
-      class="well-list"
-      v-if="keys.length"
-    >
-      <li
+  <div class="deploy-keys-panel table-holder">
+    <template v-if="keys.length > 0">
+      <div
+        role="row"
+        class="gl-responsive-table-row table-row-header">
+        <div
+          role="rowheader"
+          class="table-section section-40">
+          {{ s__('DeployKeys|Deploy key') }}
+        </div>
+        <div
+          role="rowheader"
+          class="table-section section-30">
+          {{ s__('DeployKeys|Project usage') }}
+        </div>
+        <div
+          role="rowheader"
+          class="table-section section-15 text-right">
+          {{ __('Created') }}
+        </div>
+      </div>
+      <deploy-key
         v-for="deployKey in keys"
         :key="deployKey.id"
-      >
-        <key
-          :deploy-key="deployKey"
-          :store="store"
-          :endpoint="endpoint"
-        />
-      </li>
-    </ul>
+        :deploy-key="deployKey"
+        :store="store"
+        :endpoint="endpoint"
+        :project-id="projectId"
+      />
+    </template>
     <div
+      v-else
       class="settings-message text-center"
-      v-else-if="showHelpBox"
     >
-      No deploy keys found. Create one with the form above.
+      {{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }}
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/deploy_keys/index.js b/app/assets/javascripts/deploy_keys/index.js
index b727261648c..6e439be42ae 100644
--- a/app/assets/javascripts/deploy_keys/index.js
+++ b/app/assets/javascripts/deploy_keys/index.js
@@ -1,21 +1,24 @@
 import Vue from 'vue';
 import deployKeysApp from './components/app.vue';
 
-export default () => new Vue({
-  el: document.getElementById('js-deploy-keys'),
-  components: {
-    deployKeysApp,
-  },
-  data() {
-    return {
-      endpoint: this.$options.el.dataset.endpoint,
-    };
-  },
-  render(createElement) {
-    return createElement('deploy-keys-app', {
-      props: {
-        endpoint: this.endpoint,
-      },
-    });
-  },
-});
+export default () =>
+  new Vue({
+    el: document.getElementById('js-deploy-keys'),
+    components: {
+      deployKeysApp,
+    },
+    data() {
+      return {
+        endpoint: this.$options.el.dataset.endpoint,
+        projectId: this.$options.el.dataset.projectId,
+      };
+    },
+    render(createElement) {
+      return createElement('deploy-keys-app', {
+        props: {
+          endpoint: this.endpoint,
+          projectId: this.projectId,
+        },
+      });
+    },
+  });
diff --git a/app/assets/javascripts/deploy_keys/service/index.js b/app/assets/javascripts/deploy_keys/service/index.js
index fe6dbaa9498..9dc3b21f6f6 100644
--- a/app/assets/javascripts/deploy_keys/service/index.js
+++ b/app/assets/javascripts/deploy_keys/service/index.js
@@ -1,34 +1,24 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '~/lib/utils/axios_utils';
 
 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`,
-      },
+    this.axios = axios.create({
+      baseURL: endpoint,
     });
   }
 
   getKeys() {
-    return this.resource.get()
-      .then(response => response.json());
+    return this.axios.get()
+      .then(response => response.data);
   }
 
   enableKey(id) {
-    return this.resource.enable({ id }, {});
+    return this.axios.put(`${id}/enable`)
+      .then(response => response.data);
   }
 
   disableKey(id) {
-    return this.resource.disable({ id }, {});
+    return this.axios.put(`${id}/disable`)
+      .then(response => response.data);
   }
 }
diff --git a/app/assets/javascripts/deploy_keys/store/index.js b/app/assets/javascripts/deploy_keys/store/index.js
index 6210361af26..a350bc99a70 100644
--- a/app/assets/javascripts/deploy_keys/store/index.js
+++ b/app/assets/javascripts/deploy_keys/store/index.js
@@ -3,7 +3,7 @@ export default class DeployKeysStore {
     this.keys = {};
   }
 
-  findEnabledKey(id) {
-    return this.keys.enabled_keys.find(key => key.id === id);
+  isEnabled(id) {
+    return this.keys.enabled_keys.some(key => key.id === id);
   }
 }
diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
index d1260ff5373..ed24d1775f4 100644
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
@@ -6,7 +6,10 @@ import Vue from 'vue';
 
 const CommentAndResolveBtn = Vue.extend({
   props: {
-    discussionId: String,
+    discussionId: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
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 180a6bd67e7..5528d2a542b 100644
--- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
+++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
@@ -7,7 +7,15 @@ import Notes from '../../notes';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const DiffNoteAvatars = Vue.extend({
-  props: ['discussionId'],
+  components: {
+    userAvatarImage,
+  },
+  props: {
+    discussionId: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       isVisible: false,
@@ -17,77 +25,6 @@ const DiffNoteAvatars = Vue.extend({
       collapseIcon,
     };
   },
-  components: {
-    userAvatarImage,
-  },
-  template: `
-    <div class="diff-comment-avatar-holders"
-      :class="discussionClassName"
-      v-show="notesCount !== 0">
-      <div v-if="!isVisible">
-        <!-- FIXME: Pass an alt attribute here for accessibility -->
-        <user-avatar-image
-          v-for="note in notesSubset"
-          :key="note.id"
-          class="diff-comment-avatar js-diff-comment-avatar"
-          @click.native="clickedAvatar($event)"
-          :img-src="note.authorAvatar"
-          :tooltip-text="getTooltipText(note)"
-          :data-line-type="lineType"
-          :size="19"
-          data-html="true"
-        />
-        <span v-if="notesCount > shownAvatars"
-          class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
-          data-container="body"
-          data-placement="top"
-          ref="extraComments"
-          role="button"
-          :data-line-type="lineType"
-          :title="extraNotesTitle"
-          @click="clickedAvatar($event)">{{ moreText }}</span>
-      </div>
-      <button class="diff-notes-collapse js-diff-comment-avatar"
-        type="button"
-        aria-label="Show comments"
-        :data-line-type="lineType"
-        @click="clickedAvatar($event)"
-        v-if="isVisible"
-        v-html="collapseIcon">
-      </button>
-    </div>
-  `,
-  mounted() {
-    this.$nextTick(() => {
-      this.addNoCommentClass();
-      this.setDiscussionVisible();
-
-      this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new';
-    });
-
-    $(document).on('toggle.comments', () => {
-      this.$nextTick(() => {
-        this.setDiscussionVisible();
-      });
-    });
-  },
-  beforeDestroy() {
-    this.addNoCommentClass();
-    $(document).off('toggle.comments');
-  },
-  watch: {
-    storeState: {
-      handler() {
-        this.$nextTick(() => {
-          $('.has-tooltip', this.$el).tooltip('fixTitle');
-
-          // We need to add/remove a class to an element that is outside the Vue instance
-          this.addNoCommentClass();
-        });
-      },
-      deep: true,
-    },
-  },
   computed: {
     discussionClassName() {
       return `js-diff-avatars-${this.discussionId}`;
@@ -128,6 +65,37 @@ const DiffNoteAvatars = Vue.extend({
       return `${plusSign}${this.notesCount - this.shownAvatars}`;
     },
   },
+  watch: {
+    storeState: {
+      handler() {
+        this.$nextTick(() => {
+          $('.has-tooltip', this.$el).tooltip('_fixTitle');
+
+          // We need to add/remove a class to an element that is outside the Vue instance
+          this.addNoCommentClass();
+        });
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.addNoCommentClass();
+      this.setDiscussionVisible();
+
+      this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new';
+    });
+
+    $(document).on('toggle.comments', () => {
+      this.$nextTick(() => {
+        this.setDiscussionVisible();
+      });
+    });
+  },
+  beforeDestroy() {
+    this.addNoCommentClass();
+    $(document).off('toggle.comments');
+  },
   methods: {
     clickedAvatar(e) {
       Notes.instance.onAddDiffNote(e);
@@ -138,12 +106,12 @@ const DiffNoteAvatars = Vue.extend({
       this.$nextTick(() => {
         this.setDiscussionVisible();
 
-        $('.has-tooltip', this.$el).tooltip('fixTitle');
+        $('.has-tooltip', this.$el).tooltip('_fixTitle');
         $('.has-tooltip', this.$el).tooltip('hide');
       });
     },
     addNoCommentClass() {
-      const notesCount = this.notesCount;
+      const { notesCount } = this;
 
       $(this.$el).closest('.js-avatar-container')
         .toggleClass('no-comment-btn', notesCount > 0)
@@ -164,6 +132,43 @@ const DiffNoteAvatars = Vue.extend({
       return `${note.authorName}: ${note.noteTruncated}`;
     },
   },
+  template: `
+    <div class="diff-comment-avatar-holders"
+      :class="discussionClassName"
+      v-show="notesCount !== 0">
+      <div v-if="!isVisible">
+        <!-- FIXME: Pass an alt attribute here for accessibility -->
+        <user-avatar-image
+          v-for="note in notesSubset"
+          :key="note.id"
+          class="diff-comment-avatar js-diff-comment-avatar"
+          @click.native="clickedAvatar($event)"
+          :img-src="note.authorAvatar"
+          :tooltip-text="getTooltipText(note)"
+          :data-line-type="lineType"
+          :size="19"
+          data-html="true"
+        />
+        <span v-if="notesCount > shownAvatars"
+          class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
+          data-container="body"
+          data-placement="top"
+          ref="extraComments"
+          role="button"
+          :data-line-type="lineType"
+          :title="extraNotesTitle"
+          @click="clickedAvatar($event)">{{ moreText }}</span>
+      </div>
+      <button class="diff-notes-collapse js-diff-comment-avatar"
+        type="button"
+        aria-label="Show comments"
+        :data-line-type="lineType"
+        @click="clickedAvatar($event)"
+        v-if="isVisible"
+        v-html="collapseIcon">
+      </button>
+    </div>
+  `,
 });
 
 Vue.component('diff-note-avatars', DiffNoteAvatars);
diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
index 8f9186dfb9a..2b893e35b6d 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
@@ -1,16 +1,18 @@
-/* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, guard-for-in, no-restricted-syntax, one-var, space-before-function-paren, no-lonely-if, no-continue, brace-style, max-len, quotes */
-/* global DiscussionMixins */
+/* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, guard-for-in, no-restricted-syntax, no-lonely-if, no-continue, brace-style, max-len, quotes */
 /* global CommentsStore */
 
 import $ from 'jquery';
 import Vue from 'vue';
 
-import '../mixins/discussion';
+import DiscussionMixins from '../mixins/discussion';
 
 const JumpToDiscussion = Vue.extend({
   mixins: [DiscussionMixins],
   props: {
-    discussionId: String
+    discussionId: {
+      type: String,
+      required: true,
+    },
   },
   data: function () {
     return {
@@ -52,6 +54,9 @@ const JumpToDiscussion = Vue.extend({
       return lastId;
     }
   },
+  created() {
+    this.discussion = this.discussions[this.discussionId];
+  },
   methods: {
     jumpToNextUnresolvedDiscussion: function () {
       let discussionsSelector;
@@ -68,7 +73,7 @@ const JumpToDiscussion = Vue.extend({
         }).toArray();
       };
 
-      const discussions = this.discussions;
+      const { discussions } = this;
 
       if (activeTab === 'diffs') {
         discussionsSelector = '.diffs .notes[data-discussion-id]';
@@ -202,9 +207,6 @@ const JumpToDiscussion = Vue.extend({
       });
     }
   },
-  created() {
-    this.discussion = this.discussions[this.discussionId];
-  },
 });
 
 Vue.component('jump-to-discussion', JumpToDiscussion);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js
index df4c72ba0ed..a69b34b0db8 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js
@@ -1,4 +1,3 @@
-/* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, max-len */
 /* global CommentsStore */
 /* global ResolveService */
 
@@ -8,113 +7,135 @@ import Flash from '../../flash';
 
 const ResolveBtn = Vue.extend({
   props: {
-    noteId: Number,
-    discussionId: String,
-    resolved: Boolean,
-    canResolve: Boolean,
-    resolvedBy: String,
-    authorName: String,
-    authorAvatar: String,
-    noteTruncated: String,
+    noteId: {
+      type: Number,
+      required: true,
+    },
+    discussionId: {
+      type: String,
+      required: true,
+    },
+    resolved: {
+      type: Boolean,
+      required: true,
+    },
+    canResolve: {
+      type: Boolean,
+      required: true,
+    },
+    resolvedBy: {
+      type: String,
+      required: true,
+    },
+    authorName: {
+      type: String,
+      required: true,
+    },
+    authorAvatar: {
+      type: String,
+      required: true,
+    },
+    noteTruncated: {
+      type: String,
+      required: true,
+    },
   },
-  data: function () {
+  data() {
     return {
       discussions: CommentsStore.state,
-      loading: false
+      loading: false,
     };
   },
-  watch: {
-    'discussions': {
-      handler: 'updateTooltip',
-      deep: true
-    }
-  },
   computed: {
-    discussion: function () {
+    discussion() {
       return this.discussions[this.discussionId];
     },
-    note: function () {
+    note() {
       return this.discussion ? this.discussion.getNote(this.noteId) : {};
     },
-    buttonText: function () {
+    buttonText() {
       if (this.isResolved) {
         return `Resolved by ${this.resolvedByName}`;
       } else if (this.canResolve) {
         return 'Mark as resolved';
-      } else {
-        return 'Unable to resolve';
       }
+
+      return 'Unable to resolve';
     },
-    isResolved: function () {
+    isResolved() {
       if (this.note) {
         return this.note.resolved;
-      } else {
-        return false;
       }
+
+      return false;
     },
-    resolvedByName: function () {
+    resolvedByName() {
       return this.note.resolved_by;
     },
   },
+  watch: {
+    discussions: {
+      handler: 'updateTooltip',
+      deep: true,
+    },
+  },
+  mounted() {
+    $(this.$refs.button).tooltip({
+      container: 'body',
+    });
+  },
+  beforeDestroy() {
+    CommentsStore.delete(this.discussionId, this.noteId);
+  },
+  created() {
+    CommentsStore.create({
+      discussionId: this.discussionId,
+      noteId: this.noteId,
+      canResolve: this.canResolve,
+      resolved: this.resolved,
+      resolvedBy: this.resolvedBy,
+      authorName: this.authorName,
+      authorAvatar: this.authorAvatar,
+      noteTruncated: this.noteTruncated,
+    });
+  },
   methods: {
-    updateTooltip: function () {
+    updateTooltip() {
       this.$nextTick(() => {
         $(this.$refs.button)
           .tooltip('hide')
-          .tooltip('fixTitle');
+          .tooltip('_fixTitle');
       });
     },
-    resolve: function () {
+    resolve() {
       if (!this.canResolve) return;
 
       let promise;
       this.loading = true;
 
       if (this.isResolved) {
-        promise = ResolveService
-          .unresolve(this.noteId);
+        promise = ResolveService.unresolve(this.noteId);
       } else {
-        promise = ResolveService
-          .resolve(this.noteId);
+        promise = ResolveService.resolve(this.noteId);
       }
 
       promise
         .then(resp => resp.json())
-        .then((data) => {
+        .then(data => {
           this.loading = false;
 
-          const resolved_by = data ? data.resolved_by : null;
+          const resolvedBy = data ? data.resolved_by : null;
 
-          CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
+          CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolvedBy);
           this.discussion.updateHeadline(data);
           gl.mrWidget.checkStatus();
-          document.dispatchEvent(new CustomEvent('refreshVueNotes'));
-
           this.updateTooltip();
         })
-        .catch(() => new Flash('An error occurred when trying to resolve a comment. Please try again.'));
-    }
-  },
-  mounted: function () {
-    $(this.$refs.button).tooltip({
-      container: 'body'
-    });
-  },
-  beforeDestroy: function () {
-    CommentsStore.delete(this.discussionId, this.noteId);
+        .catch(
+          () => new Flash('An error occurred when trying to resolve a comment. Please try again.'),
+        );
+    },
   },
-  created: function () {
-    CommentsStore.create({
-      discussionId: this.discussionId,
-      noteId: this.noteId,
-      canResolve: this.canResolve,
-      resolved: this.resolved,
-      resolvedBy: this.resolvedBy,
-      authorName: this.authorName,
-      authorAvatar: this.authorAvatar,
-      noteTruncated: this.noteTruncated,
-    });
-  }
 });
 
 Vue.component('resolve-btn', ResolveBtn);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js b/app/assets/javascripts/diff_notes/components/resolve_count.js
index fe7cf8f5fc1..e2683e09f40 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js
@@ -1,15 +1,17 @@
-/* eslint-disable comma-dangle, object-shorthand, func-names, no-param-reassign */
-/* global DiscussionMixins */
+/* eslint-disable comma-dangle, object-shorthand, func-names */
 /* global CommentsStore */
 
 import Vue from 'vue';
 
-import '../mixins/discussion';
+import DiscussionMixins from '../mixins/discussion';
 
 window.ResolveCount = Vue.extend({
   mixins: [DiscussionMixins],
   props: {
-    loggedOut: Boolean
+    loggedOut: {
+      type: Boolean,
+      required: true,
+    },
   },
   data: function () {
     return {
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
index 6a036e96171..5ed13488788 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
@@ -1,4 +1,4 @@
-/* eslint-disable object-shorthand, func-names, space-before-function-paren, comma-dangle, no-else-return, quotes, max-len */
+/* eslint-disable object-shorthand, func-names, comma-dangle, no-else-return, quotes */
 /* global CommentsStore */
 /* global ResolveService */
 
@@ -6,9 +6,18 @@ import Vue from 'vue';
 
 const ResolveDiscussionBtn = Vue.extend({
   props: {
-    discussionId: String,
-    mergeRequestId: Number,
-    canResolve: Boolean,
+    discussionId: {
+      type: String,
+      required: true,
+    },
+    mergeRequestId: {
+      type: Number,
+      required: true,
+    },
+    canResolve: {
+      type: Boolean,
+      required: true,
+    },
   },
   data: function() {
     return {
@@ -45,16 +54,16 @@ const ResolveDiscussionBtn = Vue.extend({
       }
     }
   },
+  created: function () {
+    CommentsStore.createDiscussion(this.discussionId, this.canResolve);
+
+    this.discussion = CommentsStore.state[this.discussionId];
+  },
   methods: {
     resolve: function () {
       ResolveService.toggleResolveForDiscussion(this.mergeRequestId, this.discussionId);
     }
   },
-  created: function () {
-    CommentsStore.createDiscussion(this.discussionId, this.canResolve);
-
-    this.discussion = CommentsStore.state[this.discussionId];
-  }
 });
 
 Vue.component('resolve-discussion-btn', ResolveDiscussionBtn);
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
index e17daec6a92..7dcf3594471 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
@@ -1,5 +1,4 @@
-/* eslint-disable func-names, comma-dangle, new-cap, no-new, max-len */
-/* global ResolveCount */
+/* eslint-disable func-names, new-cap */
 
 import $ from 'jquery';
 import Vue from 'vue';
@@ -15,12 +14,13 @@ import './components/resolve_count';
 import './components/resolve_discussion_btn';
 import './components/diff_note_avatars';
 import './components/new_issue_for_discussion';
-import { hasVueMRDiscussionsCookie } from '../lib/utils/common_utils';
 
 export default () => {
-  const projectPathHolder = document.querySelector('.merge-request') || document.querySelector('.commit-box');
-  const projectPath = projectPathHolder.dataset.projectPath;
-  const COMPONENT_SELECTOR = 'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn, new-issue-for-discussion-btn';
+  const projectPathHolder =
+    document.querySelector('.merge-request') || document.querySelector('.commit-box');
+  const { projectPath } = projectPathHolder.dataset;
+  const COMPONENT_SELECTOR =
+    'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn, new-issue-for-discussion-btn';
 
   window.gl = window.gl || {};
   window.gl.diffNoteApps = {};
@@ -28,9 +28,9 @@ export default () => {
   window.ResolveService = new gl.DiffNotesResolveServiceClass(projectPath);
 
   gl.diffNotesCompileComponents = () => {
-    $('diff-note-avatars').each(function () {
+    $('diff-note-avatars').each(function() {
       const tmp = Vue.extend({
-        template: $(this).get(0).outerHTML
+        template: $(this).get(0).outerHTML,
       });
       const tmpApp = new tmp().$mount();
 
@@ -41,12 +41,12 @@ export default () => {
       });
     });
 
-    const $components = $(COMPONENT_SELECTOR).filter(function () {
+    const $components = $(COMPONENT_SELECTOR).filter(function() {
       return $(this).closest('resolve-count').length !== 1;
     });
 
     if ($components) {
-      $components.each(function () {
+      $components.each(function() {
         const $this = $(this);
         const noteId = $this.attr(':note-id');
         const discussionId = $this.attr(':discussion-id');
@@ -54,7 +54,7 @@ export default () => {
         if ($this.is('comment-and-resolve-btn') && !discussionId) return;
 
         const tmp = Vue.extend({
-          template: $this.get(0).outerHTML
+          template: $this.get(0).outerHTML,
         });
         const tmpApp = new tmp().$mount();
 
@@ -69,14 +69,5 @@ export default () => {
 
   gl.diffNotesCompileComponents();
 
-  if (!hasVueMRDiscussionsCookie()) {
-    new Vue({
-      el: '#resolve-count-app',
-      components: {
-        'resolve-count': ResolveCount
-      },
-    });
-  }
-
   $(window).trigger('resize.nav');
 };
diff --git a/app/assets/javascripts/diff_notes/mixins/discussion.js b/app/assets/javascripts/diff_notes/mixins/discussion.js
index 36c4abf02cf..ef35b589e58 100644
--- a/app/assets/javascripts/diff_notes/mixins/discussion.js
+++ b/app/assets/javascripts/diff_notes/mixins/discussion.js
@@ -1,6 +1,6 @@
-/* eslint-disable object-shorthand, func-names, guard-for-in, no-restricted-syntax, comma-dangle, no-param-reassign, max-len */
+/* eslint-disable object-shorthand, func-names, guard-for-in, no-restricted-syntax, comma-dangle, */
 
-window.DiscussionMixins = {
+const DiscussionMixins = {
   computed: {
     discussionCount: function () {
       return Object.keys(this.discussions).length;
@@ -33,3 +33,5 @@ window.DiscussionMixins = {
     }
   }
 };
+
+export default DiscussionMixins;
diff --git a/app/assets/javascripts/diff_notes/models/discussion.js b/app/assets/javascripts/diff_notes/models/discussion.js
index c97c559dd14..787e6d8855f 100644
--- a/app/assets/javascripts/diff_notes/models/discussion.js
+++ b/app/assets/javascripts/diff_notes/models/discussion.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, camelcase, guard-for-in, no-restricted-syntax, no-unused-vars, max-len */
+/* eslint-disable camelcase, guard-for-in, no-restricted-syntax */
 /* global NoteModel */
 
 import $ from 'jquery';
diff --git a/app/assets/javascripts/diff_notes/models/note.js b/app/assets/javascripts/diff_notes/models/note.js
index 04465aa507e..825a69deeec 100644
--- a/app/assets/javascripts/diff_notes/models/note.js
+++ b/app/assets/javascripts/diff_notes/models/note.js
@@ -1,5 +1,3 @@
-/* eslint-disable camelcase, no-unused-vars */
-
 class NoteModel {
   constructor(discussionId, noteObj) {
     this.discussionId = discussionId;
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js b/app/assets/javascripts/diff_notes/services/resolve.js
index d16f9297de1..0b3568e432d 100644
--- a/app/assets/javascripts/diff_notes/services/resolve.js
+++ b/app/assets/javascripts/diff_notes/services/resolve.js
@@ -8,8 +8,12 @@ window.gl = window.gl || {};
 
 class ResolveServiceClass {
   constructor(root) {
-    this.noteResource = Vue.resource(`${root}/notes{/noteId}/resolve?html=true`);
-    this.discussionResource = Vue.resource(`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve?html=true`);
+    this.noteResource = Vue.resource(
+      `${root}/notes{/noteId}/resolve?html=true`,
+    );
+    this.discussionResource = Vue.resource(
+      `${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve?html=true`,
+    );
   }
 
   resolve(noteId) {
@@ -33,7 +37,7 @@ class ResolveServiceClass {
 
     promise
       .then(resp => resp.json())
-      .then((data) => {
+      .then(data => {
         discussion.loading = false;
         const resolvedBy = data ? data.resolved_by : null;
 
@@ -45,9 +49,13 @@ class ResolveServiceClass {
 
         if (gl.mrWidget) gl.mrWidget.checkStatus();
         discussion.updateHeadline(data);
-        document.dispatchEvent(new CustomEvent('refreshVueNotes'));
       })
-      .catch(() => new Flash('An error occurred when trying to resolve a discussion. Please try again.'));
+      .catch(
+        () =>
+          new Flash(
+            'An error occurred when trying to resolve a discussion. Please try again.',
+          ),
+      );
   }
 
   resolveAll(mergeRequestId, discussionId) {
@@ -55,10 +63,13 @@ class ResolveServiceClass {
 
     discussion.loading = true;
 
-    return this.discussionResource.save({
-      mergeRequestId,
-      discussionId,
-    }, {});
+    return this.discussionResource.save(
+      {
+        mergeRequestId,
+        discussionId,
+      },
+      {},
+    );
   }
 
   unResolveAll(mergeRequestId, discussionId) {
@@ -66,10 +77,13 @@ class ResolveServiceClass {
 
     discussion.loading = true;
 
-    return this.discussionResource.delete({
-      mergeRequestId,
-      discussionId,
-    }, {});
+    return this.discussionResource.delete(
+      {
+        mergeRequestId,
+        discussionId,
+      },
+      {},
+    );
   }
 }
 
diff --git a/app/assets/javascripts/diff_notes/stores/comments.js b/app/assets/javascripts/diff_notes/stores/comments.js
index d802db7d3af..d7da7d974f3 100644
--- a/app/assets/javascripts/diff_notes/stores/comments.js
+++ b/app/assets/javascripts/diff_notes/stores/comments.js
@@ -1,4 +1,4 @@
-/* eslint-disable object-shorthand, func-names, camelcase, no-restricted-syntax, guard-for-in, comma-dangle, max-len, no-param-reassign */
+/* eslint-disable object-shorthand, func-names, camelcase, no-restricted-syntax, guard-for-in, comma-dangle, max-len */
 /* global DiscussionModel */
 
 import Vue from 'vue';
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
new file mode 100644
index 00000000000..deddb61ca31
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -0,0 +1,199 @@
+<script>
+import { mapState, mapGetters, mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import { __ } from '~/locale';
+import createFlash from '~/flash';
+import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
+import CompareVersions from './compare_versions.vue';
+import ChangedFiles from './changed_files.vue';
+import DiffFile from './diff_file.vue';
+import NoChanges from './no_changes.vue';
+import HiddenFilesWarning from './hidden_files_warning.vue';
+
+export default {
+  name: 'DiffsApp',
+  components: {
+    Icon,
+    LoadingIcon,
+    CompareVersions,
+    ChangedFiles,
+    DiffFile,
+    NoChanges,
+    HiddenFilesWarning,
+  },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    shouldShow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    currentUser: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      activeFile: '',
+    };
+  },
+  computed: {
+    ...mapState({
+      isLoading: state => state.diffs.isLoading,
+      diffFiles: state => state.diffs.diffFiles,
+      diffViewType: state => state.diffs.diffViewType,
+      mergeRequestDiffs: state => state.diffs.mergeRequestDiffs,
+      mergeRequestDiff: state => state.diffs.mergeRequestDiff,
+      latestVersionPath: state => state.diffs.latestVersionPath,
+      startVersion: state => state.diffs.startVersion,
+      commit: state => state.diffs.commit,
+      targetBranchName: state => state.diffs.targetBranchName,
+      renderOverflowWarning: state => state.diffs.renderOverflowWarning,
+      numTotalFiles: state => state.diffs.realSize,
+      numVisibleFiles: state => state.diffs.size,
+      plainDiffPath: state => state.diffs.plainDiffPath,
+      emailPatchPath: state => state.diffs.emailPatchPath,
+    }),
+    ...mapGetters(['isParallelView']),
+    targetBranch() {
+      return {
+        branchName: this.targetBranchName,
+        versionIndex: -1,
+        path: '',
+      };
+    },
+    notAllCommentsDisplayed() {
+      if (this.commit) {
+        return __('Only comments from the following commit are shown below');
+      } else if (this.startVersion) {
+        return __(
+          "Not all comments are displayed because you're comparing two versions of the diff.",
+        );
+      }
+      return __(
+        "Not all comments are displayed because you're viewing an old version of the diff.",
+      );
+    },
+    showLatestVersion() {
+      if (this.commit) {
+        return __('Show latest version of the diff');
+      }
+      return __('Show latest version');
+    },
+  },
+  watch: {
+    diffViewType() {
+      this.adjustView();
+    },
+    shouldShow() {
+      this.adjustView();
+    },
+  },
+  mounted() {
+    this.setBaseConfig({ endpoint: this.endpoint, projectPath: this.projectPath });
+    this.fetchDiffFiles().catch(() => {
+      createFlash(__('Fetching diff files failed. Please reload the page to try again!'));
+    });
+  },
+  created() {
+    this.adjustView();
+  },
+  methods: {
+    ...mapActions(['setBaseConfig', 'fetchDiffFiles']),
+    setActive(filePath) {
+      this.activeFile = filePath;
+    },
+    unsetActive(filePath) {
+      if (this.activeFile === filePath) {
+        this.activeFile = '';
+      }
+    },
+    adjustView() {
+      if (this.shouldShow && this.isParallelView) {
+        window.mrTabs.expandViewContainer();
+      } else {
+        window.mrTabs.resetViewContainer();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="shouldShow">
+    <div
+      v-if="isLoading"
+      class="loading"
+    >
+      <loading-icon />
+    </div>
+    <div
+      v-else
+      id="diffs"
+      :class="{ active: shouldShow }"
+      class="diffs tab-pane"
+    >
+      <compare-versions
+        v-if="!commit && mergeRequestDiffs.length > 1"
+        :merge-request-diffs="mergeRequestDiffs"
+        :merge-request-diff="mergeRequestDiff"
+        :start-version="startVersion"
+        :target-branch="targetBranch"
+      />
+
+      <hidden-files-warning
+        v-if="renderOverflowWarning"
+        :visible="numVisibleFiles"
+        :total="numTotalFiles"
+        :plain-diff-path="plainDiffPath"
+        :email-patch-path="emailPatchPath"
+      />
+
+      <div
+        v-if="commit || startVersion || (mergeRequestDiff && !mergeRequestDiff.latest)"
+        class="mr-version-controls"
+      >
+        <div class="content-block comments-disabled-notif clearfix">
+          <i class="fa fa-info-circle"></i>
+          {{ notAllCommentsDisplayed }}
+          <div class="pull-right">
+            <a
+              :href="latestVersionPath"
+              class="btn btn-sm"
+            >
+              {{ showLatestVersion }}
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <changed-files
+        :diff-files="diffFiles"
+        :active-file="activeFile"
+      />
+
+      <div
+        v-if="diffFiles.length > 0"
+        class="files"
+      >
+        <diff-file
+          v-for="file in diffFiles"
+          :key="file.newPath"
+          :file="file"
+          :current-user="currentUser"
+          @setActive="setActive(file.filePath)"
+          @unsetActive="unsetActive(file.filePath)"
+        />
+      </div>
+      <no-changes v-else />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/changed_files.vue b/app/assets/javascripts/diffs/components/changed_files.vue
new file mode 100644
index 00000000000..c5ef9fefc2f
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/changed_files.vue
@@ -0,0 +1,184 @@
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import { pluralize } from '~/lib/utils/text_utility';
+import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
+import { contentTop } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
+import ChangedFilesDropdown from './changed_files_dropdown.vue';
+import changedFilesMixin from '../mixins/changed_files';
+
+export default {
+  components: {
+    Icon,
+    ChangedFilesDropdown,
+    ClipboardButton,
+  },
+  mixins: [changedFilesMixin],
+  props: {
+    activeFile: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isStuck: false,
+      maxWidth: 'auto',
+      offsetTop: 0,
+    };
+  },
+  computed: {
+    ...mapGetters(['isInlineView', 'isParallelView', 'areAllFilesCollapsed']),
+    sumAddedLines() {
+      return this.sumValues('addedLines');
+    },
+    sumRemovedLines() {
+      return this.sumValues('removedLines');
+    },
+    whitespaceVisible() {
+      return !getParameterValues('w')[0];
+    },
+    toggleWhitespaceText() {
+      if (this.whitespaceVisible) {
+        return __('Hide whitespace changes');
+      }
+      return __('Show whitespace changes');
+    },
+    toggleWhitespacePath() {
+      if (this.whitespaceVisible) {
+        return mergeUrlParams({ w: 1 }, window.location.href);
+      }
+
+      return mergeUrlParams({ w: 0 }, window.location.href);
+    },
+    top() {
+      return `${this.offsetTop}px`;
+    },
+  },
+  created() {
+    document.addEventListener('scroll', this.handleScroll);
+    this.offsetTop = contentTop();
+  },
+  beforeDestroy() {
+    document.removeEventListener('scroll', this.handleScroll);
+  },
+  methods: {
+    ...mapActions(['setInlineDiffViewType', 'setParallelDiffViewType', 'expandAllFiles']),
+    pluralize,
+    handleScroll() {
+      if (!this.updating) {
+        requestAnimationFrame(this.updateIsStuck);
+        this.updating = true;
+      }
+    },
+    updateIsStuck() {
+      if (!this.$refs.wrapper) {
+        return;
+      }
+
+      const scrollPosition = window.scrollY;
+
+      this.isStuck = scrollPosition + this.offsetTop >= this.$refs.placeholder.offsetTop;
+      this.updating = false;
+    },
+    sumValues(key) {
+      return this.diffFiles.reduce((total, file) => total + file[key], 0);
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <div ref="placeholder"></div>
+    <div
+      ref="wrapper"
+      :style="{ top }"
+      :class="{'is-stuck': isStuck}"
+      class="content-block oneline-block diff-files-changed diff-files-changed-merge-request
+      files-changed js-diff-files-changed"
+    >
+      <div class="files-changed-inner">
+        <div
+          class="inline-parallel-buttons d-none d-md-block"
+        >
+          <a
+            v-if="areAllFilesCollapsed"
+            class="btn btn-default"
+            @click="expandAllFiles"
+          >
+            {{ __('Expand all') }}
+          </a>
+          <a
+            :href="toggleWhitespacePath"
+            class="btn btn-default"
+          >
+            {{ toggleWhitespaceText }}
+          </a>
+          <div class="btn-group">
+            <button
+              id="inline-diff-btn"
+              :class="{ active: isInlineView }"
+              type="button"
+              class="btn js-inline-diff-button"
+              data-view-type="inline"
+              @click="setInlineDiffViewType"
+            >
+              {{ __('Inline') }}
+            </button>
+            <button
+              id="parallel-diff-btn"
+              :class="{ active: isParallelView }"
+              type="button"
+              class="btn js-parallel-diff-button"
+              data-view-type="parallel"
+              @click="setParallelDiffViewType"
+            >
+              {{ __('Side-by-side') }}
+            </button>
+          </div>
+        </div>
+
+        <div class="commit-stat-summary dropdown">
+          <changed-files-dropdown
+            :diff-files="diffFiles"
+          />
+
+          <span
+            v-show="activeFile"
+            class="prepend-left-5"
+          >
+            <strong class="prepend-right-5">
+              {{ truncatedDiffPath(activeFile) }}
+            </strong>
+            <clipboard-button
+              :text="activeFile"
+              :title="s__('Copy file name to clipboard')"
+              tooltip-placement="bottom"
+              tooltip-container="body"
+              class="btn btn-default btn-transparent btn-clipboard"
+            />
+          </span>
+
+          <span
+            v-show="!isStuck"
+            id="diff-stats"
+            class="diff-stats-additions-deletions-expanded"
+          >
+            with
+            <strong class="cgreen">
+              {{ pluralize(`${sumAddedLines} addition`, sumAddedLines) }}
+            </strong>
+            and
+            <strong class="cred">
+              {{ pluralize(`${sumRemovedLines} deletion`, sumRemovedLines) }}
+            </strong>
+          </span>
+        </div>
+      </div>
+    </div>
+  </span>
+</template>
diff --git a/app/assets/javascripts/diffs/components/changed_files_dropdown.vue b/app/assets/javascripts/diffs/components/changed_files_dropdown.vue
new file mode 100644
index 00000000000..f224b9dd246
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/changed_files_dropdown.vue
@@ -0,0 +1,124 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import changedFilesMixin from '../mixins/changed_files';
+
+export default {
+  components: {
+    Icon,
+  },
+  mixins: [changedFilesMixin],
+  data() {
+    return {
+      searchText: '',
+    };
+  },
+  computed: {
+    filteredDiffFiles() {
+      return this.diffFiles.filter(file =>
+        file.filePath.toLowerCase().includes(this.searchText.toLowerCase()),
+      );
+    },
+  },
+  methods: {
+    clearSearch() {
+      this.searchText = '';
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    Showing
+    <button
+      class="diff-stats-summary-toggler"
+      data-toggle="dropdown"
+      type="button"
+      aria-expanded="false"
+    >
+      <span>
+        {{ n__('%d changed file', '%d changed files', diffFiles.length) }}
+      </span>
+      <icon
+        :size="8"
+        name="chevron-down"
+      />
+    </button>
+    <div class="dropdown-menu diff-file-changes">
+      <div class="dropdown-input">
+        <input
+          v-model="searchText"
+          type="search"
+          class="dropdown-input-field"
+          placeholder="Search files"
+          autocomplete="off"
+        />
+        <i
+          v-if="searchText.length === 0"
+          aria-hidden="true"
+          data-hidden="true"
+          class="fa fa-search dropdown-input-search">
+        </i>
+        <i
+          v-else
+          role="button"
+          class="fa fa-times dropdown-input-search"
+          @click="clearSearch"
+        ></i>
+      </div>
+      <ul>
+        <li
+          v-for="diffFile in filteredDiffFiles"
+          :key="diffFile.name"
+        >
+          <a
+            :href="`#${diffFile.fileHash}`"
+            :title="diffFile.newPath"
+            class="diff-changed-file"
+          >
+            <icon
+              :name="fileChangedIcon(diffFile)"
+              :size="16"
+              :class="fileChangedClass(diffFile)"
+              class="diff-file-changed-icon append-right-8"
+            />
+            <span class="diff-changed-file-content append-right-8">
+              <strong
+                v-if="diffFile.blob && diffFile.blob.name"
+                class="diff-changed-file-name"
+              >
+                {{ diffFile.blob.name }}
+              </strong>
+              <strong
+                v-else
+                class="diff-changed-blank-file-name"
+              >
+                {{ s__('Diffs|No file name available') }}
+              </strong>
+              <span class="diff-changed-file-path prepend-top-5">
+                {{ truncatedDiffPath(diffFile.blob.path) }}
+              </span>
+            </span>
+            <span class="diff-changed-stats">
+              <span class="cgreen">
+                +{{ diffFile.addedLines }}
+              </span>
+              <span class="cred">
+                -{{ diffFile.removedLines }}
+              </span>
+            </span>
+          </a>
+        </li>
+
+        <li
+          v-show="filteredDiffFiles.length === 0"
+          class="dropdown-menu-empty-item"
+        >
+          <a>
+            {{ __('No files found') }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </span>
+</template>
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
new file mode 100644
index 00000000000..1c9ad8e77f1
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -0,0 +1,55 @@
+<script>
+import CompareVersionsDropdown from './compare_versions_dropdown.vue';
+
+export default {
+  components: {
+    CompareVersionsDropdown,
+  },
+  props: {
+    mergeRequestDiffs: {
+      type: Array,
+      required: true,
+    },
+    mergeRequestDiff: {
+      type: Object,
+      required: true,
+    },
+    startVersion: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    targetBranch: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    comparableDiffs() {
+      return this.mergeRequestDiffs.slice(1);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="mr-version-controls">
+    <div class="mr-version-menus-container content-block">
+      Changes between
+      <compare-versions-dropdown
+        :other-versions="mergeRequestDiffs"
+        :merge-request-version="mergeRequestDiff"
+        :show-commit-count="true"
+        class="mr-version-dropdown"
+      />
+      and
+      <compare-versions-dropdown
+        :other-versions="comparableDiffs"
+        :start-version="startVersion"
+        :target-branch="targetBranch"
+        class="mr-version-compare-dropdown"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
new file mode 100644
index 00000000000..96cccb49378
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
@@ -0,0 +1,165 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import { n__, __ } from '~/locale';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    Icon,
+    TimeAgo,
+  },
+  props: {
+    otherVersions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    mergeRequestVersion: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    startVersion: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    targetBranch: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    showCommitCount: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    baseVersion() {
+      return {
+        name: 'hii',
+        versionIndex: -1,
+      };
+    },
+    targetVersions() {
+      if (this.mergeRequestVersion) {
+        return this.otherVersions;
+      }
+      return [...this.otherVersions, this.targetBranch];
+    },
+    selectedVersionName() {
+      const selectedVersion = this.startVersion || this.targetBranch || this.mergeRequestVersion;
+      return this.versionName(selectedVersion);
+    },
+  },
+  methods: {
+    commitsText(version) {
+      return n__(
+        `${version.commitsCount} commit,`,
+        `${version.commitsCount} commits,`,
+        version.commitsCount,
+      );
+    },
+    href(version) {
+      if (this.showCommitCount) {
+        return version.versionPath;
+      }
+      return version.comparePath;
+    },
+    versionName(version) {
+      if (this.isLatest(version)) {
+        return __('latest version');
+      }
+      if (this.targetBranch && (this.isBase(version) || !version)) {
+        return this.targetBranch.branchName;
+      }
+      return `version ${version.versionIndex}`;
+    },
+    isActive(version) {
+      if (!version) {
+        return false;
+      }
+
+      if (this.targetBranch) {
+        return (
+          (this.isBase(version) && !this.startVersion) ||
+          (this.startVersion && this.startVersion.versionIndex === version.versionIndex)
+        );
+      }
+
+      return version.versionIndex === this.mergeRequestVersion.versionIndex;
+    },
+    isBase(version) {
+      if (!version || !this.targetBranch) {
+        return false;
+      }
+      return version.versionIndex === -1;
+    },
+    isLatest(version) {
+      return (
+        this.mergeRequestVersion && version.versionIndex === this.targetVersions[0].versionIndex
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <span class="dropdown inline">
+    <a
+      class="dropdown-toggle btn btn-default"
+      data-toggle="dropdown"
+      aria-expanded="false"
+    >
+      <span>
+        {{ selectedVersionName }}
+      </span>
+      <Icon
+        :size="12"
+        name="angle-down"
+      />
+    </a>
+    <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
+      <div class="dropdown-content">
+        <ul>
+          <li
+            v-for="version in targetVersions"
+            :key="version.id"
+          >
+            <a
+              :class="{ 'is-active': isActive(version) }"
+              :href="href(version)"
+            >
+              <div>
+                <strong>
+                  {{ versionName(version) }}
+                  <template v-if="isBase(version)">
+                    (base)
+                  </template>
+                </strong>
+              </div>
+              <div>
+                <small class="commit-sha">
+                  {{ version.truncatedCommitSha }}
+                </small>
+              </div>
+              <div>
+                <small>
+                  <template v-if="showCommitCount">
+                    {{ commitsText(version) }}
+                  </template>
+                  <time-ago
+                    v-if="version.createdAt"
+                    :time="version.createdAt"
+                    class="js-timeago js-timeago-render"
+                  />
+                </small>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </span>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
new file mode 100644
index 00000000000..48ba967285f
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -0,0 +1,62 @@
+<script>
+import { mapGetters, mapState } from 'vuex';
+import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
+import { diffModes } from '~/ide/constants';
+import InlineDiffView from './inline_diff_view.vue';
+import ParallelDiffView from './parallel_diff_view.vue';
+
+export default {
+  components: {
+    InlineDiffView,
+    ParallelDiffView,
+    DiffViewer,
+  },
+  props: {
+    diffFile: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState({
+      projectPath: state => state.diffs.projectPath,
+      endpoint: state => state.diffs.endpoint,
+    }),
+    ...mapGetters(['isInlineView', 'isParallelView']),
+    diffMode() {
+      const diffModeKey = Object.keys(diffModes).find(key => this.diffFile[`${key}File`]);
+      return diffModes[diffModeKey] || diffModes.replaced;
+    },
+    isTextFile() {
+      return this.diffFile.text;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="diff-content">
+    <div class="diff-viewer">
+      <template v-if="isTextFile">
+        <inline-diff-view
+          v-if="isInlineView"
+          :diff-file="diffFile"
+          :diff-lines="diffFile.highlightedDiffLines || []"
+        />
+        <parallel-diff-view
+          v-else-if="isParallelView"
+          :diff-file="diffFile"
+          :diff-lines="diffFile.parallelDiffLines || []"
+        />
+      </template>
+      <diff-viewer
+        v-else
+        :diff-mode="diffMode"
+        :new-path="diffFile.newPath"
+        :new-sha="diffFile.diffRefs.headSha"
+        :old-path="diffFile.oldPath"
+        :old-sha="diffFile.diffRefs.baseSha"
+        :project-path="projectPath"/>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_discussions.vue b/app/assets/javascripts/diffs/components/diff_discussions.vue
new file mode 100644
index 00000000000..39d535036f6
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_discussions.vue
@@ -0,0 +1,39 @@
+<script>
+import noteableDiscussion from '../../notes/components/noteable_discussion.vue';
+
+export default {
+  components: {
+    noteableDiscussion,
+  },
+  props: {
+    discussions: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="discussions.length"
+  >
+    <div
+      v-for="discussion in discussions"
+      :key="discussion.id"
+      class="discussion-notes diff-discussions"
+    >
+      <ul
+        :data-discussion-id="discussion.id"
+        class="notes"
+      >
+        <noteable-discussion
+          :discussion="discussion"
+          :render-header="false"
+          :render-diff-file="false"
+          :always-expanded="true"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
new file mode 100644
index 00000000000..108eefdac5f
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -0,0 +1,191 @@
+<script>
+import { mapActions } from 'vuex';
+import _ from 'underscore';
+import { __, sprintf } from '~/locale';
+import createFlash from '~/flash';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import DiffFileHeader from './diff_file_header.vue';
+import DiffContent from './diff_content.vue';
+
+export default {
+  components: {
+    DiffFileHeader,
+    DiffContent,
+    LoadingIcon,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    currentUser: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isActive: false,
+      isLoadingCollapsedDiff: false,
+      forkMessageVisible: false,
+    };
+  },
+  computed: {
+    isDiscussionsExpanded() {
+      return true; // TODO: @fatihacet - Fix this.
+    },
+    isCollapsed() {
+      return this.file.collapsed || false;
+    },
+    viewBlobLink() {
+      return sprintf(
+        __('You can %{linkStart}view the blob%{linkEnd} instead.'),
+        {
+          linkStart: `<a href="${_.escape(this.file.viewPath)}">`,
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
+  },
+  mounted() {
+    document.addEventListener('scroll', this.handleScroll);
+  },
+  beforeDestroy() {
+    document.removeEventListener('scroll', this.handleScroll);
+  },
+  methods: {
+    ...mapActions(['loadCollapsedDiff']),
+    handleToggle() {
+      const { collapsed, highlightedDiffLines, parallelDiffLines } = this.file;
+
+      if (collapsed && !highlightedDiffLines && !parallelDiffLines.length) {
+        this.handleLoadCollapsedDiff();
+      } else {
+        this.file.collapsed = !this.file.collapsed;
+      }
+    },
+    handleScroll() {
+      if (!this.updating) {
+        requestAnimationFrame(this.scrollUpdate.bind(this));
+        this.updating = true;
+      }
+    },
+    scrollUpdate() {
+      const header = document.querySelector('.js-diff-files-changed');
+      if (!header) {
+        this.updating = false;
+        return;
+      }
+
+      const { top, bottom } = this.$el.getBoundingClientRect();
+      const { top: topOfFixedHeader, bottom: bottomOfFixedHeader } = header.getBoundingClientRect();
+
+      const headerOverlapsContent = top < topOfFixedHeader && bottom > bottomOfFixedHeader;
+      const fullyAboveHeader = bottom < bottomOfFixedHeader;
+      const fullyBelowHeader = top > topOfFixedHeader;
+
+      if (headerOverlapsContent && !this.isActive) {
+        this.$emit('setActive');
+        this.isActive = true;
+      } else if (this.isActive && (fullyAboveHeader || fullyBelowHeader)) {
+        this.$emit('unsetActive');
+        this.isActive = false;
+      }
+
+      this.updating = false;
+    },
+    handleLoadCollapsedDiff() {
+      this.isLoadingCollapsedDiff = true;
+
+      this.loadCollapsedDiff(this.file)
+        .then(() => {
+          this.isLoadingCollapsedDiff = false;
+          this.file.collapsed = false;
+        })
+        .catch(() => {
+          this.isLoadingCollapsedDiff = false;
+          createFlash(__('Something went wrong on our end. Please try again!'));
+        });
+    },
+    showForkMessage() {
+      this.forkMessageVisible = true;
+    },
+    hideForkMessage() {
+      this.forkMessageVisible = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :id="file.fileHash"
+    class="diff-file file-holder"
+  >
+    <diff-file-header
+      :current-user="currentUser"
+      :diff-file="file"
+      :collapsible="true"
+      :expanded="!isCollapsed"
+      :discussions-expanded="isDiscussionsExpanded"
+      :add-merge-request-buttons="true"
+      class="js-file-title file-title"
+      @toggleFile="handleToggle"
+      @showForkMessage="showForkMessage"
+    />
+
+    <div
+      v-if="forkMessageVisible"
+      class="js-file-fork-suggestion-section file-fork-suggestion">
+      <span class="file-fork-suggestion-note">
+        You're not allowed to <span class="js-file-fork-suggestion-section-action">edit</span>
+        files in this project directly. Please fork this project,
+        make your changes there, and submit a merge request.
+      </span>
+      <a
+        :href="file.forkPath"
+        class="js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
+      >
+        Fork
+      </a>
+      <button
+        class="js-cancel-fork-suggestion-button btn btn-grouped"
+        type="button"
+        @click="hideForkMessage"
+      >
+        Cancel
+      </button>
+    </div>
+
+    <diff-content
+      v-show="!isCollapsed"
+      :class="{ hidden: isCollapsed || file.tooLarge }"
+      :diff-file="file"
+    />
+    <loading-icon
+      v-if="isLoadingCollapsedDiff"
+      class="diff-content loading"
+    />
+    <div
+      v-show="isCollapsed && !isLoadingCollapsedDiff && !file.tooLarge"
+      class="nothing-here-block diff-collapsed"
+    >
+      {{ __('This diff is collapsed.') }}
+      <a
+        class="click-to-expand js-click-to-expand"
+        href="#"
+        @click.prevent="handleToggle"
+      >
+        {{ __('Click to expand it.') }}
+      </a>
+    </div>
+    <div
+      v-if="file.tooLarge"
+      class="nothing-here-block diff-collapsed js-too-large-diff"
+    >
+      {{ __('This source diff could not be displayed because it is too large.') }}
+      <span v-html="viewBlobLink"></span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
new file mode 100644
index 00000000000..6bad389f778
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -0,0 +1,254 @@
+<script>
+import _ from 'underscore';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import Tooltip from '~/vue_shared/directives/tooltip';
+import { truncateSha } from '~/lib/utils/text_utility';
+import { __, s__, sprintf } from '~/locale';
+import EditButton from './edit_button.vue';
+
+export default {
+  components: {
+    ClipboardButton,
+    EditButton,
+    Icon,
+  },
+  directives: {
+    Tooltip,
+  },
+  props: {
+    diffFile: {
+      type: Object,
+      required: true,
+    },
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    addMergeRequestButtons: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    expanded: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    discussionsExpanded: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    currentUser: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      blobForkSuggestion: null,
+    };
+  },
+  computed: {
+    icon() {
+      if (this.diffFile.submodule) {
+        return 'archive';
+      }
+
+      return this.diffFile.blob.icon;
+    },
+    titleLink() {
+      if (this.diffFile.submodule) {
+        return this.diffFile.submoduleTreeUrl || this.diffFile.submoduleLink;
+      }
+
+      return `#${this.diffFile.fileHash}`;
+    },
+    filePath() {
+      if (this.diffFile.submodule) {
+        return `${this.diffFile.filePath} @ ${truncateSha(this.diffFile.blob.id)}`;
+      }
+
+      if (this.diffFile.deletedFile) {
+        return sprintf(__('%{filePath} deleted'), { filePath: this.diffFile.filePath }, false);
+      }
+
+      return this.diffFile.filePath;
+    },
+    titleTag() {
+      return this.diffFile.fileHash ? 'a' : 'span';
+    },
+    isUsingLfs() {
+      return this.diffFile.storedExternally && this.diffFile.externalStorage === 'lfs';
+    },
+    collapseIcon() {
+      return this.expanded ? 'chevron-down' : 'chevron-right';
+    },
+    isDiscussionsExpanded() {
+      return this.discussionsExpanded && this.expanded;
+    },
+    viewFileButtonText() {
+      const truncatedContentSha = _.escape(truncateSha(this.diffFile.contentSha));
+      return sprintf(
+        s__('MergeRequests|View file @ %{commitId}'),
+        {
+          commitId: `<span class="commit-sha">${truncatedContentSha}</span>`,
+        },
+        false,
+      );
+    },
+    viewReplacedFileButtonText() {
+      const truncatedBaseSha = _.escape(truncateSha(this.diffFile.diffRefs.baseSha));
+      return sprintf(
+        s__('MergeRequests|View replaced file @ %{commitId}'),
+        {
+          commitId: `<span class="commit-sha">${truncatedBaseSha}</span>`,
+        },
+        false,
+      );
+    },
+  },
+  methods: {
+    handleToggle(e, checkTarget) {
+      if (!checkTarget || e.target === this.$refs.header) {
+        this.$emit('toggleFile');
+      }
+    },
+    showForkMessage() {
+      this.$emit('showForkMessage');
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    ref="header"
+    class="js-file-title file-title file-title-flex-parent"
+    @click="handleToggle($event, true)"
+  >
+    <div class="file-header-content">
+      <icon
+        v-if="collapsible"
+        :name="collapseIcon"
+        :size="16"
+        aria-hidden="true"
+        class="diff-toggle-caret"
+        @click.stop="handleToggle"
+      />
+      <a
+        ref="titleWrapper"
+        :href="titleLink"
+      >
+        <i
+          :class="`fa-${icon}`"
+          class="fa fa-fw"
+          aria-hidden="true"
+        ></i>
+        <span v-if="diffFile.renamedFile">
+          <strong
+            v-tooltip
+            :title="diffFile.oldPath"
+            class="file-title-name"
+            data-container="body"
+          >
+            {{ diffFile.oldPath }}
+          </strong>
+          →
+          <strong
+            v-tooltip
+            :title="diffFile.newPath"
+            class="file-title-name"
+            data-container="body"
+          >
+            {{ diffFile.newPath }}
+          </strong>
+        </span>
+
+        <strong
+          v-tooltip
+          v-else
+          :title="filePath"
+          class="file-title-name"
+          data-container="body"
+        >
+          {{ filePath }}
+        </strong>
+      </a>
+
+      <clipboard-button
+        :title="__('Copy file path to clipboard')"
+        :text="diffFile.filePath"
+        css-class="btn-default btn-transparent btn-clipboard"
+      />
+
+      <small
+        v-if="diffFile.modeChanged"
+        ref="fileMode"
+      >
+        {{ diffFile.aMode }} → {{ diffFile.bMode }}
+      </small>
+
+      <span
+        v-if="isUsingLfs"
+        class="label label-lfs append-right-5"
+      >
+        {{ __('LFS') }}
+      </span>
+    </div>
+
+    <div
+      v-if="!diffFile.submodule && addMergeRequestButtons"
+      class="file-actions d-none d-md-block"
+    >
+      <template
+        v-if="diffFile.blob && diffFile.blob.readableText"
+      >
+        <button
+          :class="{ active: isDiscussionsExpanded }"
+          :title="s__('MergeRequests|Toggle comments for this file')"
+          class="btn js-toggle-diff-comments"
+          type="button"
+        >
+          <icon name="comment" />
+        </button>
+
+        <edit-button
+          v-if="!diffFile.deletedFile"
+          :current-user="currentUser"
+          :edit-path="diffFile.editPath"
+          :can-modify-blob="diffFile.canModifyBlob"
+          @showForkMessage="showForkMessage"
+        />
+      </template>
+
+      <a
+        v-if="diffFile.replacedViewPath"
+        :href="diffFile.replacedViewPath"
+        class="btn view-file js-view-file"
+        v-html="viewReplacedFileButtonText"
+      >
+      </a>
+      <a
+        :href="diffFile.viewPath"
+        class="btn view-file js-view-file"
+        v-html="viewFileButtonText"
+      >
+      </a>
+
+      <a
+        v-tooltip
+        v-if="diffFile.externalUrl"
+        :href="diffFile.externalUrl"
+        :title="`View on ${diffFile.formattedExternalUrl}`"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="btn btn-file-option"
+      >
+        <icon name="external-link" />
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
new file mode 100644
index 00000000000..7e50a0aed84
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
@@ -0,0 +1,105 @@
+<script>
+import { mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { pluralize, truncate } from '~/lib/utils/text_utility';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import { COUNT_OF_AVATARS_IN_GUTTER, LENGTH_OF_AVATAR_TOOLTIP } from '../constants';
+
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+    UserAvatarImage,
+  },
+  props: {
+    discussions: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    discussionsExpanded() {
+      return this.discussions.every(discussion => discussion.expanded);
+    },
+    allDiscussions() {
+      return this.discussions.reduce((acc, note) => acc.concat(note.notes), []);
+    },
+    notesInGutter() {
+      return this.allDiscussions.slice(0, COUNT_OF_AVATARS_IN_GUTTER).map(n => ({
+        note: n.note,
+        author: n.author,
+      }));
+    },
+    moreCount() {
+      return this.allDiscussions.length - this.notesInGutter.length;
+    },
+    moreText() {
+      if (this.moreCount === 0) {
+        return '';
+      }
+
+      return pluralize(`${this.moreCount} more comment`, this.moreCount);
+    },
+  },
+  methods: {
+    ...mapActions(['toggleDiscussion']),
+    getTooltipText(noteData) {
+      let { note } = noteData;
+
+      if (note.length > LENGTH_OF_AVATAR_TOOLTIP) {
+        note = truncate(note, LENGTH_OF_AVATAR_TOOLTIP);
+      }
+
+      return `${noteData.author.name}: ${note}`;
+    },
+    toggleDiscussions() {
+      this.discussions.forEach(discussion => {
+        this.toggleDiscussion({
+          discussionId: discussion.id,
+        });
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="diff-comment-avatar-holders">
+    <button
+      v-if="discussionsExpanded"
+      type="button"
+      aria-label="Show comments"
+      class="diff-notes-collapse js-diff-comment-avatar js-diff-comment-button"
+      @click="toggleDiscussions"
+    >
+      <icon
+        :size="12"
+        name="collapse"
+      />
+    </button>
+    <template v-else>
+      <user-avatar-image
+        v-for="note in notesInGutter"
+        :key="note.id"
+        :img-src="note.author.avatar_url"
+        :tooltip-text="getTooltipText(note)"
+        :size="19"
+        class="diff-comment-avatar js-diff-comment-avatar"
+        @click.native="toggleDiscussions"
+      />
+      <span
+        v-tooltip
+        v-if="moreText"
+        :title="moreText"
+        class="diff-comments-more-count has-tooltip js-diff-comment-avatar js-diff-comment-plus"
+        data-container="body"
+        data-placement="top"
+        role="button"
+        @click="toggleDiscussions"
+      >+{{ moreCount }}</span>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
new file mode 100644
index 00000000000..8999fd2ac96
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
@@ -0,0 +1,203 @@
+<script>
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+import { mapState, mapGetters, mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import DiffGutterAvatars from './diff_gutter_avatars.vue';
+import {
+  MATCH_LINE_TYPE,
+  CONTEXT_LINE_TYPE,
+  OLD_NO_NEW_LINE_TYPE,
+  NEW_NO_NEW_LINE_TYPE,
+  LINE_POSITION_RIGHT,
+  UNFOLD_COUNT,
+} from '../constants';
+import * as utils from '../store/utils';
+
+export default {
+  components: {
+    DiffGutterAvatars,
+    Icon,
+  },
+  props: {
+    fileHash: {
+      type: String,
+      required: true,
+    },
+    contextLinesPath: {
+      type: String,
+      required: true,
+    },
+    lineType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    lineNumber: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    lineCode: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    linePosition: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    metaData: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    showCommentButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isBottom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState({
+      diffViewType: state => state.diffs.diffViewType,
+      diffFiles: state => state.diffs.diffFiles,
+    }),
+    ...mapGetters(['isLoggedIn', 'discussionsByLineCode']),
+    isMatchLine() {
+      return this.lineType === MATCH_LINE_TYPE;
+    },
+    isContextLine() {
+      return this.lineType === CONTEXT_LINE_TYPE;
+    },
+    isMetaLine() {
+      return this.lineType === OLD_NO_NEW_LINE_TYPE || this.lineType === NEW_NO_NEW_LINE_TYPE;
+    },
+    lineHref() {
+      return this.lineCode ? `#${this.lineCode}` : '#';
+    },
+    shouldShowCommentButton() {
+      return (
+        this.isLoggedIn &&
+        this.showCommentButton &&
+        !this.isMatchLine &&
+        !this.isContextLine &&
+        !this.hasDiscussions &&
+        !this.isMetaLine
+      );
+    },
+    discussions() {
+      return this.discussionsByLineCode[this.lineCode] || [];
+    },
+    hasDiscussions() {
+      return this.discussions.length > 0;
+    },
+    shouldShowAvatarsOnGutter() {
+      let render = this.hasDiscussions && this.showCommentButton;
+
+      if (!this.lineType && this.linePosition === LINE_POSITION_RIGHT) {
+        render = false;
+      }
+
+      return render;
+    },
+  },
+  methods: {
+    ...mapActions(['loadMoreLines']),
+    handleCommentButton() {
+      this.$emit('showCommentForm', { lineCode: this.lineCode });
+    },
+    handleLoadMoreLines() {
+      if (this.isRequesting) {
+        return;
+      }
+
+      this.isRequesting = true;
+      const endpoint = this.contextLinesPath;
+      const oldLineNumber = this.metaData.oldPos || 0;
+      const newLineNumber = this.metaData.newPos || 0;
+      const offset = newLineNumber - oldLineNumber;
+      const bottom = this.isBottom;
+      const { fileHash } = this;
+      const view = this.diffViewType;
+      let unfold = true;
+      let lineNumber = newLineNumber - 1;
+      let since = lineNumber - UNFOLD_COUNT;
+      let to = lineNumber;
+
+      if (bottom) {
+        lineNumber = newLineNumber + 1;
+        since = lineNumber;
+        to = lineNumber + UNFOLD_COUNT;
+      } else {
+        const diffFile = utils.findDiffFile(this.diffFiles, this.fileHash);
+        const indexForInline = utils.findIndexInInlineLines(diffFile.highlightedDiffLines, {
+          oldLineNumber,
+          newLineNumber,
+        });
+        const prevLine = diffFile.highlightedDiffLines[indexForInline - 2];
+        const prevLineNumber = (prevLine && prevLine.newLine) || 0;
+
+        if (since <= prevLineNumber + 1) {
+          since = prevLineNumber + 1;
+          unfold = false;
+        }
+      }
+
+      const params = { since, to, bottom, offset, unfold, view };
+      const lineNumbers = { oldLineNumber, newLineNumber };
+      this.loadMoreLines({ endpoint, params, lineNumbers, fileHash })
+        .then(() => {
+          this.isRequesting = false;
+        })
+        .catch(() => {
+          createFlash(s__('Diffs|Something went wrong while fetching diff lines.'));
+          this.isRequesting = false;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <span
+      v-if="isMatchLine"
+      class="context-cell"
+      role="button"
+      @click="handleLoadMoreLines"
+    >...</span>
+    <template
+      v-else
+    >
+      <button
+        v-show="shouldShowCommentButton"
+        type="button"
+        class="add-diff-note js-add-diff-note-button"
+        title="Add a comment to this line"
+        @click="handleCommentButton"
+      >
+        <icon
+          :size="12"
+          name="comment"
+        />
+      </button>
+      <a
+        v-if="lineNumber"
+        :data-linenumber="lineNumber"
+        :href="lineHref"
+      >
+      </a>
+      <diff-gutter-avatars
+        v-if="shouldShowAvatarsOnGutter"
+        :discussions="discussions"
+      />
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
new file mode 100644
index 00000000000..6943b462e86
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -0,0 +1,114 @@
+<script>
+import $ from 'jquery';
+import { mapState, mapGetters, mapActions } from 'vuex';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+import noteForm from '../../notes/components/note_form.vue';
+import { getNoteFormData } from '../store/utils';
+import Autosave from '../../autosave';
+import { DIFF_NOTE_TYPE, NOTE_TYPE } from '../constants';
+
+export default {
+  components: {
+    noteForm,
+  },
+  props: {
+    diffFile: {
+      type: Object,
+      required: true,
+    },
+    diffLines: {
+      type: Array,
+      required: true,
+    },
+    line: {
+      type: Object,
+      required: true,
+    },
+    position: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    noteTargetLine: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState({
+      noteableData: state => state.notes.noteableData,
+      diffViewType: state => state.diffs.diffViewType,
+    }),
+    ...mapGetters(['isLoggedIn', 'noteableType', 'getNoteableData', 'getNotesDataByProp']),
+  },
+  mounted() {
+    if (this.isLoggedIn) {
+      const noteableData = this.getNoteableData;
+      const keys = [
+        NOTE_TYPE,
+        this.noteableType,
+        noteableData.id,
+        noteableData.diff_head_sha,
+        DIFF_NOTE_TYPE,
+        noteableData.source_project_id,
+        this.line.lineCode,
+      ];
+
+      this.autosave = new Autosave($(this.$refs.noteForm.$refs.textarea), keys);
+    }
+  },
+  methods: {
+    ...mapActions(['cancelCommentForm', 'saveNote', 'fetchDiscussions']),
+    handleCancelCommentForm() {
+      this.autosave.reset();
+      this.cancelCommentForm({
+        lineCode: this.line.lineCode,
+      });
+    },
+    handleSaveNote(note) {
+      const postData = getNoteFormData({
+        note,
+        noteableData: this.noteableData,
+        noteableType: this.noteableType,
+        noteTargetLine: this.noteTargetLine,
+        diffViewType: this.diffViewType,
+        diffFile: this.diffFile,
+        linePosition: this.position,
+      });
+
+      this.saveNote(postData)
+        .then(() => {
+          const endpoint = this.getNotesDataByProp('discussionsPath');
+
+          this.fetchDiscussions(endpoint)
+            .then(() => {
+              this.handleCancelCommentForm();
+            })
+            .catch(() => {
+              createFlash(s__('MergeRequests|Updating discussions failed'));
+            });
+        })
+        .catch(() => {
+          createFlash(s__('MergeRequests|Saving the comment failed'));
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="content discussion-form discussion-form-container discussion-notes"
+  >
+    <note-form
+      ref="noteForm"
+      :is-editing="true"
+      :line-code="line.lineCode"
+      save-button-title="Comment"
+      class="diff-comment-form"
+      @cancelForm="handleCancelCommentForm"
+      @handleFormUpdate="handleSaveNote"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue
new file mode 100644
index 00000000000..ebf90631d76
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/edit_button.vue
@@ -0,0 +1,42 @@
+<script>
+export default {
+  props: {
+    editPath: {
+      type: String,
+      required: true,
+    },
+    currentUser: {
+      type: Object,
+      required: true,
+    },
+    canModifyBlob: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    handleEditClick(evt) {
+      if (!this.currentUser || this.canModifyBlob) {
+        // if we can Edit, do default Edit button behavior
+        return;
+      }
+
+      if (this.currentUser.canFork && this.currentUser.canCreateMergeRequest) {
+        evt.preventDefault();
+        this.$emit('showForkMessage');
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <a
+    :href="editPath"
+    class="btn btn-default js-edit-blob"
+    @click="handleEditClick"
+  >
+    Edit
+  </a>
+</template>
diff --git a/app/assets/javascripts/diffs/components/hidden_files_warning.vue b/app/assets/javascripts/diffs/components/hidden_files_warning.vue
new file mode 100644
index 00000000000..017dcfcc357
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/hidden_files_warning.vue
@@ -0,0 +1,51 @@
+<script>
+export default {
+  props: {
+    total: {
+      type: String,
+      required: true,
+    },
+    visible: {
+      type: Number,
+      required: true,
+    },
+    plainDiffPath: {
+      type: String,
+      required: true,
+    },
+    emailPatchPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="alert alert-warning">
+    <h4>
+      {{ __('Too many changes to show.') }}
+      <div class="pull-right">
+        <a
+          :href="plainDiffPath"
+          class="btn btn-sm"
+        >
+          {{ __('Plain diff') }}
+        </a>
+        <a
+          :href="emailPatchPath"
+          class="btn btn-sm"
+        >
+          {{ __('Email patch') }}
+        </a>
+      </div>
+    </h4>
+    <p>
+      To preserve performance only
+      <strong>
+        {{ visible }} of {{ total }}
+      </strong>
+      files are displayed.
+    </p>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
new file mode 100644
index 00000000000..21376117bef
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -0,0 +1,117 @@
+<script>
+import diffContentMixin from '../mixins/diff_content';
+import {
+  MATCH_LINE_TYPE,
+  CONTEXT_LINE_TYPE,
+  OLD_NO_NEW_LINE_TYPE,
+  NEW_NO_NEW_LINE_TYPE,
+  LINE_HOVER_CLASS_NAME,
+  LINE_UNFOLD_CLASS_NAME,
+} from '../constants';
+
+export default {
+  mixins: [diffContentMixin],
+  methods: {
+    handleMouse(lineCode, isOver) {
+      this.hoveredLineCode = isOver ? lineCode : null;
+    },
+    getLineClass(line) {
+      const isSameLine = this.hoveredLineCode && this.hoveredLineCode === line.lineCode;
+      const isMatchLine = line.type === MATCH_LINE_TYPE;
+      const isContextLine = line.type === CONTEXT_LINE_TYPE;
+      const isMetaLine = line.type === OLD_NO_NEW_LINE_TYPE || line.type === NEW_NO_NEW_LINE_TYPE;
+
+      return {
+        [line.type]: line.type,
+        [LINE_UNFOLD_CLASS_NAME]: isMatchLine,
+        [LINE_HOVER_CLASS_NAME]:
+          this.isLoggedIn && isSameLine && !isMatchLine && !isContextLine && !isMetaLine,
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <table
+    :class="userColorScheme"
+    :data-commit-id="commitId"
+    class="code diff-wrap-lines js-syntax-highlight text-file js-diff-inline-view">
+    <tbody>
+      <template
+        v-for="(line, index) in normalizedDiffLines"
+      >
+        <tr
+          :id="line.lineCode || `${fileHash}_${line.oldLine}_${line.newLine}`"
+          :key="line.lineCode"
+          :class="getRowClass(line)"
+          class="line_holder"
+          @mouseover="handleMouse(line.lineCode, true)"
+          @mouseout="handleMouse(line.lineCode, false)"
+        >
+          <td
+            :class="getLineClass(line)"
+            class="diff-line-num old_line"
+          >
+            <diff-line-gutter-content
+              :file-hash="fileHash"
+              :line-type="line.type"
+              :line-code="line.lineCode"
+              :line-number="line.oldLine"
+              :meta-data="line.metaData"
+              :show-comment-button="true"
+              :context-lines-path="diffFile.contextLinesPath"
+              :is-bottom="index + 1 === diffLinesLength"
+              @showCommentForm="handleShowCommentForm"
+            />
+          </td>
+          <td
+            :class="getLineClass(line)"
+            class="diff-line-num new_line"
+          >
+            <diff-line-gutter-content
+              :file-hash="fileHash"
+              :line-type="line.type"
+              :line-code="line.lineCode"
+              :line-number="line.newLine"
+              :meta-data="line.metaData"
+              :is-bottom="index + 1 === diffLinesLength"
+              :context-lines-path="diffFile.contextLinesPath"
+            />
+          </td>
+          <td
+            :class="line.type"
+            class="line_content"
+            v-html="line.richText"
+          >
+          </td>
+        </tr>
+        <tr
+          v-if="isDiscussionExpanded(line.lineCode) || diffLineCommentForms[line.lineCode]"
+          :key="index"
+          :class="discussionsByLineCode[line.lineCode] ? '' : 'js-temp-notes-holder'"
+          class="notes_holder"
+        >
+          <td
+            class="notes_line"
+            colspan="2"
+          ></td>
+          <td class="notes_content">
+            <div class="content">
+              <diff-discussions
+                :discussions="discussionsByLineCode[line.lineCode] || []"
+              />
+              <diff-line-note-form
+                v-if="diffLineCommentForms[line.lineCode]"
+                :diff-file="diffFile"
+                :diff-lines="diffLines"
+                :line="line"
+                :note-target-line="diffLines[index]"
+              />
+            </div>
+          </td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+</template>
diff --git a/app/assets/javascripts/diffs/components/no_changes.vue b/app/assets/javascripts/diffs/components/no_changes.vue
new file mode 100644
index 00000000000..d817157fbcd
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/no_changes.vue
@@ -0,0 +1,49 @@
+<script>
+import { mapState } from 'vuex';
+import emptyImage from '~/../../views/shared/icons/_mr_widget_empty_state.svg';
+
+export default {
+  data() {
+    return {
+      emptyImage,
+    };
+  },
+  computed: {
+    ...mapState({
+      sourceBranch: state => state.notes.noteableData.source_branch,
+      targetBranch: state => state.notes.noteableData.target_branch,
+      newBlobPath: state => state.notes.noteableData.new_blob_path,
+    }),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="row empty-state nothing-here-block"
+  >
+    <div class="col-xs-12">
+      <div class="svg-content">
+        <span
+          v-html="emptyImage"
+        ></span>
+      </div>
+    </div>
+    <div class="col-xs-12">
+      <div class="text-content text-center">
+        No changes between
+        <span class="ref-name">{{ sourceBranch }}</span>
+        and
+        <span class="ref-name">{{ targetBranch }}</span>
+        <div class="text-center">
+          <a
+            :href="newBlobPath"
+            class="btn btn-save"
+          >
+            {{ __('Create commit') }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
new file mode 100644
index 00000000000..60edbcbbda8
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -0,0 +1,224 @@
+<script>
+import diffContentMixin from '../mixins/diff_content';
+import {
+  EMPTY_CELL_TYPE,
+  MATCH_LINE_TYPE,
+  CONTEXT_LINE_TYPE,
+  OLD_NO_NEW_LINE_TYPE,
+  NEW_NO_NEW_LINE_TYPE,
+  LINE_HOVER_CLASS_NAME,
+  LINE_UNFOLD_CLASS_NAME,
+  LINE_POSITION_RIGHT,
+} from '../constants';
+
+export default {
+  mixins: [diffContentMixin],
+  computed: {
+    parallelDiffLines() {
+      return this.normalizedDiffLines.map(line => {
+        if (!line.left) {
+          Object.assign(line, { left: { type: EMPTY_CELL_TYPE } });
+        } else if (!line.right) {
+          Object.assign(line, { right: { type: EMPTY_CELL_TYPE } });
+        }
+
+        return line;
+      });
+    },
+  },
+  methods: {
+    hasDiscussion(line) {
+      const discussions = this.discussionsByLineCode;
+      const hasDiscussion = discussions[line.left.lineCode] || discussions[line.right.lineCode];
+
+      return hasDiscussion;
+    },
+    getClassName(line, position) {
+      const { type, lineCode } = line[position];
+      const isMatchLine = type === MATCH_LINE_TYPE;
+      const isContextLine = !isMatchLine && type !== EMPTY_CELL_TYPE && type !== CONTEXT_LINE_TYPE;
+      const isMetaLine = type === OLD_NO_NEW_LINE_TYPE || type === NEW_NO_NEW_LINE_TYPE;
+      const isSameLine = this.hoveredLineCode && this.hoveredLineCode === lineCode;
+      const isSameSection = position === this.hoveredSection;
+
+      return {
+        [type]: type,
+        [LINE_UNFOLD_CLASS_NAME]: isMatchLine,
+        [LINE_HOVER_CLASS_NAME]:
+          this.isLoggedIn && isContextLine && isSameLine && isSameSection && !isMetaLine,
+      };
+    },
+    handleMouse(e, line, isHover) {
+      if (isHover) {
+        const cell = e.target.closest('td');
+
+        if (this.$refs.leftLines.indexOf(cell) > -1) {
+          this.hoveredLineCode = line.left.lineCode;
+          this.hoveredSection = 'left';
+        } else if (this.$refs.rightLines.indexOf(cell) > -1) {
+          this.hoveredLineCode = line.right.lineCode;
+          this.hoveredSection = 'right';
+        }
+      } else {
+        this.hoveredLineCode = null;
+        this.hoveredSection = null;
+      }
+    },
+    shouldRenderDiscussionsRow(line) {
+      const hasDiscussion = this.hasDiscussion(line) && this.hasAnyExpandedDiscussion(line);
+      const hasCommentFormOnLeft = this.diffLineCommentForms[line.left.lineCode];
+      const hasCommentFormOnRight = this.diffLineCommentForms[line.right.lineCode];
+
+      return hasDiscussion || hasCommentFormOnLeft || hasCommentFormOnRight;
+    },
+    shouldRenderDiscussions(line, position) {
+      const { lineCode } = line[position];
+      let render = this.discussionsByLineCode[lineCode] && this.isDiscussionExpanded(lineCode);
+
+      // Avoid rendering context line discussions on the right side in parallel view
+      if (position === LINE_POSITION_RIGHT) {
+        render = render && line.right.type;
+      }
+
+      return render;
+    },
+    hasAnyExpandedDiscussion(line) {
+      const isLeftExpanded = this.isDiscussionExpanded(line.left.lineCode);
+      const isRightExpanded = this.isDiscussionExpanded(line.right.lineCode);
+
+      return isLeftExpanded || isRightExpanded;
+    },
+    getLineCode(line, side) {
+      const { lineCode } = side;
+      if (lineCode) {
+        return lineCode;
+      }
+
+      return `${this.fileHash}_${line.left.oldLine}_${line.right.newLine}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :class="userColorScheme"
+    :data-commit-id="commitId"
+    class="code diff-wrap-lines js-syntax-highlight text-file">
+    <table>
+      <tbody>
+        <template
+          v-for="(line, index) in parallelDiffLines"
+        >
+          <tr
+            :key="index"
+            :class="getRowClass(line)"
+            class="line_holder parallel"
+            @mouseover="handleMouse($event, line, true)"
+            @mouseout="handleMouse($event, line, false)"
+          >
+            <td
+              ref="leftLines"
+              :class="getClassName(line, 'left')"
+              class="diff-line-num old_line"
+            >
+              <diff-line-gutter-content
+                :file-hash="fileHash"
+                :line-type="line.left.type"
+                :line-code="line.left.lineCode"
+                :line-number="line.left.oldLine"
+                :meta-data="line.left.metaData"
+                :show-comment-button="true"
+                :context-lines-path="diffFile.contextLinesPath"
+                :is-bottom="index + 1 === diffLinesLength"
+                line-position="left"
+                @showCommentForm="handleShowCommentForm"
+              />
+            </td>
+            <td
+              ref="leftLines"
+              :class="getClassName(line, 'left')"
+              :id="getLineCode(line, line.left)"
+              class="line_content parallel left-side"
+              v-html="line.left.richText"
+            >
+            </td>
+            <td
+              ref="rightLines"
+              :class="getClassName(line, 'right')"
+              class="diff-line-num new_line"
+            >
+              <diff-line-gutter-content
+                :file-hash="fileHash"
+                :line-type="line.right.type"
+                :line-code="line.right.lineCode"
+                :line-number="line.right.newLine"
+                :meta-data="line.right.metaData"
+                :show-comment-button="true"
+                :context-lines-path="diffFile.contextLinesPath"
+                :is-bottom="index + 1 === diffLinesLength"
+                line-position="right"
+                @showCommentForm="handleShowCommentForm"
+              />
+            </td>
+            <td
+              ref="rightLines"
+              :class="getClassName(line, 'right')"
+              :id="getLineCode(line, line.right)"
+              class="line_content parallel right-side"
+              v-html="line.right.richText"
+            >
+            </td>
+          </tr>
+          <tr
+            v-if="shouldRenderDiscussionsRow(line)"
+            :key="line.left.lineCode || line.right.lineCode"
+            :class="hasDiscussion(line) ? '' : 'js-temp-notes-holder'"
+            class="notes_holder"
+          >
+            <td class="notes_line old"></td>
+            <td class="notes_content parallel old">
+              <div
+                v-if="shouldRenderDiscussions(line, 'left')"
+                class="content"
+              >
+                <diff-discussions
+                  :discussions="discussionsByLineCode[line.left.lineCode]"
+                />
+              </div>
+              <diff-line-note-form
+                v-if="diffLineCommentForms[line.left.lineCode] &&
+                diffLineCommentForms[line.left.lineCode]"
+                :diff-file="diffFile"
+                :diff-lines="diffLines"
+                :line="line.left"
+                :note-target-line="diffLines[index].left"
+                position="left"
+              />
+            </td>
+            <td class="notes_line new"></td>
+            <td class="notes_content parallel new">
+              <div
+                v-if="shouldRenderDiscussions(line, 'right')"
+                class="content"
+              >
+                <diff-discussions
+                  :discussions="discussionsByLineCode[line.right.lineCode]"
+                />
+              </div>
+              <diff-line-note-form
+                v-if="diffLineCommentForms[line.right.lineCode] &&
+                diffLineCommentForms[line.right.lineCode] && line.right.type"
+                :diff-file="diffFile"
+                :diff-lines="diffLines"
+                :line="line.right"
+                :note-target-line="diffLines[index].right"
+                position="right"
+              />
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
new file mode 100644
index 00000000000..d314f08e60e
--- /dev/null
+++ b/app/assets/javascripts/diffs/constants.js
@@ -0,0 +1,25 @@
+export const INLINE_DIFF_VIEW_TYPE = 'inline';
+export const PARALLEL_DIFF_VIEW_TYPE = 'parallel';
+export const MATCH_LINE_TYPE = 'match';
+export const OLD_NO_NEW_LINE_TYPE = 'old-nonewline';
+export const NEW_NO_NEW_LINE_TYPE = 'new-nonewline';
+export const CONTEXT_LINE_TYPE = 'context';
+export const EMPTY_CELL_TYPE = 'empty-cell';
+export const COMMENT_FORM_TYPE = 'commentForm';
+export const DIFF_NOTE_TYPE = 'DiffNote';
+export const NOTE_TYPE = 'Note';
+export const NEW_LINE_TYPE = 'new';
+export const OLD_LINE_TYPE = 'old';
+export const TEXT_DIFF_POSITION_TYPE = 'text';
+
+export const LINE_POSITION_LEFT = 'left';
+export const LINE_POSITION_RIGHT = 'right';
+
+export const DIFF_VIEW_COOKIE_NAME = 'diff_view';
+export const LINE_HOVER_CLASS_NAME = 'is-over';
+export const LINE_UNFOLD_CLASS_NAME = 'unfold js-unfold';
+export const CONTEXT_LINE_CLASS_NAME = 'diff-expanded';
+
+export const UNFOLD_COUNT = 20;
+export const COUNT_OF_AVATARS_IN_GUTTER = 3;
+export const LENGTH_OF_AVATAR_TOOLTIP = 17;
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
new file mode 100644
index 00000000000..aae89109c27
--- /dev/null
+++ b/app/assets/javascripts/diffs/index.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import { mapState } from 'vuex';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import diffsApp from './components/app.vue';
+
+export default function initDiffsApp(store) {
+  return new Vue({
+    el: '#js-diffs-app',
+    name: 'MergeRequestDiffs',
+    components: {
+      diffsApp,
+    },
+    store,
+    data() {
+      const { dataset } = document.querySelector(this.$options.el);
+
+      return {
+        endpoint: dataset.endpoint,
+        projectPath: dataset.projectPath,
+        currentUser: convertObjectPropsToCamelCase(JSON.parse(dataset.currentUserData), {
+          deep: true,
+        }),
+      };
+    },
+    computed: {
+      ...mapState({
+        activeTab: state => state.page.activeTab,
+      }),
+    },
+    render(createElement) {
+      return createElement('diffs-app', {
+        props: {
+          endpoint: this.endpoint,
+          currentUser: this.currentUser,
+          projectPath: this.projectPath,
+          shouldShow: this.activeTab === 'diffs',
+        },
+      });
+    },
+  });
+}
diff --git a/app/assets/javascripts/diffs/mixins/changed_files.js b/app/assets/javascripts/diffs/mixins/changed_files.js
new file mode 100644
index 00000000000..da1339f0ffa
--- /dev/null
+++ b/app/assets/javascripts/diffs/mixins/changed_files.js
@@ -0,0 +1,38 @@
+export default {
+  props: {
+    diffFiles: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    fileChangedIcon(diffFile) {
+      if (diffFile.deletedFile) {
+        return 'file-deletion';
+      } else if (diffFile.newFile) {
+        return 'file-addition';
+      }
+      return 'file-modified';
+    },
+    fileChangedClass(diffFile) {
+      if (diffFile.deletedFile) {
+        return 'cred';
+      } else if (diffFile.newFile) {
+        return 'cgreen';
+      }
+
+      return '';
+    },
+    truncatedDiffPath(path) {
+      const maxLength = 60;
+
+      if (path.length > maxLength) {
+        const start = path.length - maxLength;
+        const end = start + maxLength;
+        return `...${path.slice(start, end)}`;
+      }
+
+      return path;
+    },
+  },
+};
diff --git a/app/assets/javascripts/diffs/mixins/diff_content.js b/app/assets/javascripts/diffs/mixins/diff_content.js
new file mode 100644
index 00000000000..bef06ad2b52
--- /dev/null
+++ b/app/assets/javascripts/diffs/mixins/diff_content.js
@@ -0,0 +1,89 @@
+import { mapState, mapGetters, mapActions } from 'vuex';
+import diffDiscussions from '../components/diff_discussions.vue';
+import diffLineGutterContent from '../components/diff_line_gutter_content.vue';
+import diffLineNoteForm from '../components/diff_line_note_form.vue';
+import { trimFirstCharOfLineContent } from '../store/utils';
+import { CONTEXT_LINE_TYPE, CONTEXT_LINE_CLASS_NAME } from '../constants';
+
+export default {
+  props: {
+    diffFile: {
+      type: Object,
+      required: true,
+    },
+    diffLines: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      hoveredLineCode: null,
+      hoveredSection: null,
+    };
+  },
+  components: {
+    diffDiscussions,
+    diffLineNoteForm,
+    diffLineGutterContent,
+  },
+  computed: {
+    ...mapState({
+      diffLineCommentForms: state => state.diffs.diffLineCommentForms,
+    }),
+    ...mapGetters(['discussionsByLineCode', 'isLoggedIn', 'commit']),
+    commitId() {
+      return this.commit && this.commit.id;
+    },
+    userColorScheme() {
+      return window.gon.user_color_scheme;
+    },
+    normalizedDiffLines() {
+      return this.diffLines.map(line => {
+        if (line.richText) {
+          return this.trimFirstChar(line);
+        }
+
+        if (line.left) {
+          Object.assign(line, { left: this.trimFirstChar(line.left) });
+        }
+
+        if (line.right) {
+          Object.assign(line, { right: this.trimFirstChar(line.right) });
+        }
+
+        return line;
+      });
+    },
+    diffLinesLength() {
+      return this.normalizedDiffLines.length;
+    },
+    fileHash() {
+      return this.diffFile.fileHash;
+    },
+  },
+  methods: {
+    ...mapActions(['showCommentForm', 'cancelCommentForm']),
+    getRowClass(line) {
+      const isContextLine = line.left
+        ? line.left.type === CONTEXT_LINE_TYPE
+        : line.type === CONTEXT_LINE_TYPE;
+
+      return {
+        [line.type]: line.type,
+        [CONTEXT_LINE_CLASS_NAME]: isContextLine,
+      };
+    },
+    trimFirstChar(line) {
+      return trimFirstCharOfLineContent(line);
+    },
+    handleShowCommentForm(params) {
+      this.showCommentForm({ lineCode: params.lineCode });
+    },
+    isDiscussionExpanded(lineCode) {
+      const discussions = this.discussionsByLineCode[lineCode];
+
+      return discussions ? discussions.every(discussion => discussion.expanded) : false;
+    },
+  },
+};
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
new file mode 100644
index 00000000000..bf188a44022
--- /dev/null
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -0,0 +1,100 @@
+import Vue from 'vue';
+import axios from '~/lib/utils/axios_utils';
+import Cookies from 'js-cookie';
+import { handleLocationHash, historyPushState } from '~/lib/utils/common_utils';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+import * as types from './mutation_types';
+import {
+  PARALLEL_DIFF_VIEW_TYPE,
+  INLINE_DIFF_VIEW_TYPE,
+  DIFF_VIEW_COOKIE_NAME,
+} from '../constants';
+
+export const setBaseConfig = ({ commit }, options) => {
+  const { endpoint, projectPath } = options;
+  commit(types.SET_BASE_CONFIG, { endpoint, projectPath });
+};
+
+export const setLoadingState = ({ commit }, state) => {
+  commit(types.SET_LOADING, state);
+};
+
+export const fetchDiffFiles = ({ state, commit }) => {
+  commit(types.SET_LOADING, true);
+
+  return axios
+    .get(state.endpoint)
+    .then(res => {
+      commit(types.SET_LOADING, false);
+      commit(types.SET_MERGE_REQUEST_DIFFS, res.data.merge_request_diffs || []);
+      commit(types.SET_DIFF_DATA, res.data);
+      return Vue.nextTick();
+    })
+    .then(handleLocationHash);
+};
+
+export const setInlineDiffViewType = ({ commit }) => {
+  commit(types.SET_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE);
+
+  Cookies.set(DIFF_VIEW_COOKIE_NAME, INLINE_DIFF_VIEW_TYPE);
+  const url = mergeUrlParams({ view: INLINE_DIFF_VIEW_TYPE }, window.location.href);
+  historyPushState(url);
+};
+
+export const setParallelDiffViewType = ({ commit }) => {
+  commit(types.SET_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE);
+
+  Cookies.set(DIFF_VIEW_COOKIE_NAME, PARALLEL_DIFF_VIEW_TYPE);
+  const url = mergeUrlParams({ view: PARALLEL_DIFF_VIEW_TYPE }, window.location.href);
+  historyPushState(url);
+};
+
+export const showCommentForm = ({ commit }, params) => {
+  commit(types.ADD_COMMENT_FORM_LINE, params);
+};
+
+export const cancelCommentForm = ({ commit }, params) => {
+  commit(types.REMOVE_COMMENT_FORM_LINE, params);
+};
+
+export const loadMoreLines = ({ commit }, options) => {
+  const { endpoint, params, lineNumbers, fileHash } = options;
+
+  params.from_merge_request = true;
+
+  return axios.get(endpoint, { params }).then(res => {
+    const contextLines = res.data || [];
+
+    commit(types.ADD_CONTEXT_LINES, {
+      lineNumbers,
+      contextLines,
+      params,
+      fileHash,
+    });
+  });
+};
+
+export const loadCollapsedDiff = ({ commit }, file) =>
+  axios.get(file.loadCollapsedDiffUrl).then(res => {
+    commit(types.ADD_COLLAPSED_DIFFS, {
+      file,
+      data: res.data,
+    });
+  });
+
+export const expandAllFiles = ({ commit }) => {
+  commit(types.EXPAND_ALL_FILES);
+};
+
+export default {
+  setBaseConfig,
+  setLoadingState,
+  fetchDiffFiles,
+  setInlineDiffViewType,
+  setParallelDiffViewType,
+  showCommentForm,
+  cancelCommentForm,
+  loadMoreLines,
+  loadCollapsedDiff,
+  expandAllFiles,
+};
diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js
new file mode 100644
index 00000000000..66d0f47d102
--- /dev/null
+++ b/app/assets/javascripts/diffs/store/getters.js
@@ -0,0 +1,16 @@
+import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '../constants';
+
+export default {
+  isParallelView(state) {
+    return state.diffViewType === PARALLEL_DIFF_VIEW_TYPE;
+  },
+  isInlineView(state) {
+    return state.diffViewType === INLINE_DIFF_VIEW_TYPE;
+  },
+  areAllFilesCollapsed(state) {
+    return state.diffFiles.every(file => file.collapsed);
+  },
+  commit(state) {
+    return state.commit;
+  },
+};
diff --git a/app/assets/javascripts/diffs/store/index.js b/app/assets/javascripts/diffs/store/index.js
new file mode 100644
index 00000000000..e6aa8f5b12a
--- /dev/null
+++ b/app/assets/javascripts/diffs/store/index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import diffsModule from './modules';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  modules: {
+    diffs: diffsModule,
+  },
+});
diff --git a/app/assets/javascripts/diffs/store/modules/index.js b/app/assets/javascripts/diffs/store/modules/index.js
new file mode 100644
index 00000000000..94caa131506
--- /dev/null
+++ b/app/assets/javascripts/diffs/store/modules/index.js
@@ -0,0 +1,26 @@
+import Cookies from 'js-cookie';
+import { getParameterValues } from '~/lib/utils/url_utility';
+import actions from '../actions';
+import getters from '../getters';
+import mutations from '../mutations';
+import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME } from '../../constants';
+
+const viewTypeFromQueryString = getParameterValues('view')[0];
+const viewTypeFromCookie = Cookies.get(DIFF_VIEW_COOKIE_NAME);
+const defaultViewType = INLINE_DIFF_VIEW_TYPE;
+
+export default {
+  state: {
+    isLoading: true,
+    endpoint: '',
+    basePath: '',
+    commit: null,
+    diffFiles: [],
+    mergeRequestDiffs: [],
+    diffLineCommentForms: {},
+    diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType,
+  },
+  getters,
+  actions,
+  mutations,
+};
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
new file mode 100644
index 00000000000..63e9239dce4
--- /dev/null
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -0,0 +1,11 @@
+export const SET_BASE_CONFIG = 'SET_BASE_CONFIG';
+export const SET_LOADING = 'SET_LOADING';
+export const SET_DIFF_DATA = 'SET_DIFF_DATA';
+export const SET_DIFF_FILES = 'SET_DIFF_FILES';
+export const SET_DIFF_VIEW_TYPE = 'SET_DIFF_VIEW_TYPE';
+export const SET_MERGE_REQUEST_DIFFS = 'SET_MERGE_REQUEST_DIFFS';
+export const ADD_COMMENT_FORM_LINE = 'ADD_COMMENT_FORM_LINE';
+export const REMOVE_COMMENT_FORM_LINE = 'REMOVE_COMMENT_FORM_LINE';
+export const ADD_CONTEXT_LINES = 'ADD_CONTEXT_LINES';
+export const ADD_COLLAPSED_DIFFS = 'ADD_COLLAPSED_DIFFS';
+export const EXPAND_ALL_FILES = 'EXPAND_ALL_FILES';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
new file mode 100644
index 00000000000..339a33f8b71
--- /dev/null
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -0,0 +1,86 @@
+import Vue from 'vue';
+import _ from 'underscore';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { findDiffFile, addLineReferences, removeMatchLine, addContextLines } from './utils';
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_BASE_CONFIG](state, options) {
+    const { endpoint, projectPath } = options;
+    Object.assign(state, { endpoint, projectPath });
+  },
+
+  [types.SET_LOADING](state, isLoading) {
+    Object.assign(state, { isLoading });
+  },
+
+  [types.SET_DIFF_DATA](state, data) {
+    Object.assign(state, {
+      ...convertObjectPropsToCamelCase(data, { deep: true }),
+    });
+  },
+
+  [types.SET_DIFF_FILES](state, diffFiles) {
+    Object.assign(state, {
+      diffFiles: convertObjectPropsToCamelCase(diffFiles, { deep: true }),
+    });
+  },
+
+  [types.SET_MERGE_REQUEST_DIFFS](state, mergeRequestDiffs) {
+    Object.assign(state, {
+      mergeRequestDiffs: convertObjectPropsToCamelCase(mergeRequestDiffs, { deep: true }),
+    });
+  },
+
+  [types.SET_DIFF_VIEW_TYPE](state, diffViewType) {
+    Object.assign(state, { diffViewType });
+  },
+
+  [types.ADD_COMMENT_FORM_LINE](state, { lineCode }) {
+    Vue.set(state.diffLineCommentForms, lineCode, true);
+  },
+
+  [types.REMOVE_COMMENT_FORM_LINE](state, { lineCode }) {
+    Vue.delete(state.diffLineCommentForms, lineCode);
+  },
+
+  [types.ADD_CONTEXT_LINES](state, options) {
+    const { lineNumbers, contextLines, fileHash } = options;
+    const { bottom } = options.params;
+    const diffFile = findDiffFile(state.diffFiles, fileHash);
+    const { highlightedDiffLines, parallelDiffLines } = diffFile;
+
+    removeMatchLine(diffFile, lineNumbers, bottom);
+    const lines = addLineReferences(contextLines, lineNumbers, bottom);
+    addContextLines({
+      inlineLines: highlightedDiffLines,
+      parallelLines: parallelDiffLines,
+      contextLines: lines,
+      bottom,
+      lineNumbers,
+    });
+  },
+
+  [types.ADD_COLLAPSED_DIFFS](state, { file, data }) {
+    const normalizedData = convertObjectPropsToCamelCase(data, { deep: true });
+    const [newFileData] = normalizedData.diffFiles.filter(f => f.fileHash === file.fileHash);
+
+    if (newFileData) {
+      const index = _.findIndex(state.diffFiles, f => f.fileHash === file.fileHash);
+      state.diffFiles.splice(index, 1, newFileData);
+    }
+  },
+
+  [types.EXPAND_ALL_FILES](state) {
+    const diffFiles = [];
+
+    state.diffFiles.forEach(file => {
+      diffFiles.push({
+        ...file,
+        collapsed: false,
+      });
+    });
+
+    Object.assign(state, { diffFiles });
+  },
+};
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
new file mode 100644
index 00000000000..da7ae16aaf1
--- /dev/null
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -0,0 +1,172 @@
+import _ from 'underscore';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import {
+  LINE_POSITION_LEFT,
+  LINE_POSITION_RIGHT,
+  TEXT_DIFF_POSITION_TYPE,
+  DIFF_NOTE_TYPE,
+  NEW_LINE_TYPE,
+  OLD_LINE_TYPE,
+  MATCH_LINE_TYPE,
+} from '../constants';
+
+export function findDiffFile(files, hash) {
+  return files.filter(file => file.fileHash === hash)[0];
+}
+
+export const getReversePosition = linePosition => {
+  if (linePosition === LINE_POSITION_RIGHT) {
+    return LINE_POSITION_LEFT;
+  }
+
+  return LINE_POSITION_RIGHT;
+};
+
+export function getNoteFormData(params) {
+  const {
+    note,
+    noteableType,
+    noteableData,
+    diffFile,
+    noteTargetLine,
+    diffViewType,
+    linePosition,
+  } = params;
+
+  const position = JSON.stringify({
+    base_sha: diffFile.diffRefs.baseSha,
+    start_sha: diffFile.diffRefs.startSha,
+    head_sha: diffFile.diffRefs.headSha,
+    old_path: diffFile.oldPath,
+    new_path: diffFile.newPath,
+    position_type: TEXT_DIFF_POSITION_TYPE,
+    old_line: noteTargetLine.oldLine,
+    new_line: noteTargetLine.newLine,
+  });
+
+  const postData = {
+    view: diffViewType,
+    line_type: linePosition === LINE_POSITION_RIGHT ? NEW_LINE_TYPE : OLD_LINE_TYPE,
+    merge_request_diff_head_sha: diffFile.diffRefs.headSha,
+    in_reply_to_discussion_id: '',
+    note_project_id: '',
+    target_type: noteableData.targetType,
+    target_id: noteableData.id,
+    note: {
+      note,
+      position,
+      noteable_type: noteableType,
+      noteable_id: noteableData.id,
+      commit_id: '',
+      type: DIFF_NOTE_TYPE,
+      line_code: noteTargetLine.lineCode,
+    },
+  };
+
+  return {
+    endpoint: noteableData.create_note_path,
+    data: postData,
+  };
+}
+
+export const findIndexInInlineLines = (lines, lineNumbers) => {
+  const { oldLineNumber, newLineNumber } = lineNumbers;
+
+  return _.findIndex(
+    lines,
+    line => line.oldLine === oldLineNumber && line.newLine === newLineNumber,
+  );
+};
+
+export const findIndexInParallelLines = (lines, lineNumbers) => {
+  const { oldLineNumber, newLineNumber } = lineNumbers;
+
+  return _.findIndex(
+    lines,
+    line =>
+      line.left &&
+      line.right &&
+      line.left.oldLine === oldLineNumber &&
+      line.right.newLine === newLineNumber,
+  );
+};
+
+export function removeMatchLine(diffFile, lineNumbers, bottom) {
+  const indexForInline = findIndexInInlineLines(diffFile.highlightedDiffLines, lineNumbers);
+  const indexForParallel = findIndexInParallelLines(diffFile.parallelDiffLines, lineNumbers);
+  const factor = bottom ? 1 : -1;
+
+  diffFile.highlightedDiffLines.splice(indexForInline + factor, 1);
+  diffFile.parallelDiffLines.splice(indexForParallel + factor, 1);
+}
+
+export function addLineReferences(lines, lineNumbers, bottom) {
+  const { oldLineNumber, newLineNumber } = lineNumbers;
+  const lineCount = lines.length;
+  let matchLineIndex = -1;
+
+  const linesWithNumbers = lines.map((l, index) => {
+    const line = convertObjectPropsToCamelCase(l);
+
+    if (line.type === MATCH_LINE_TYPE) {
+      matchLineIndex = index;
+    } else {
+      Object.assign(line, {
+        oldLine: bottom ? oldLineNumber + index + 1 : oldLineNumber + index - lineCount,
+        newLine: bottom ? newLineNumber + index + 1 : newLineNumber + index - lineCount,
+      });
+    }
+
+    return line;
+  });
+
+  if (matchLineIndex > -1) {
+    const line = linesWithNumbers[matchLineIndex];
+    const targetLine = bottom
+      ? linesWithNumbers[matchLineIndex - 1]
+      : linesWithNumbers[matchLineIndex + 1];
+
+    Object.assign(line, {
+      metaData: {
+        oldPos: targetLine.oldLine,
+        newPos: targetLine.newLine,
+      },
+    });
+  }
+
+  return linesWithNumbers;
+}
+
+export function addContextLines(options) {
+  const { inlineLines, parallelLines, contextLines, lineNumbers } = options;
+  const normalizedParallelLines = contextLines.map(line => ({
+    left: line,
+    right: line,
+  }));
+
+  if (options.bottom) {
+    inlineLines.push(...contextLines);
+    parallelLines.push(...normalizedParallelLines);
+  } else {
+    const inlineIndex = findIndexInInlineLines(inlineLines, lineNumbers);
+    const parallelIndex = findIndexInParallelLines(parallelLines, lineNumbers);
+    inlineLines.splice(inlineIndex, 0, ...contextLines);
+    parallelLines.splice(parallelIndex, 0, ...normalizedParallelLines);
+  }
+}
+
+export function trimFirstCharOfLineContent(line) {
+  if (!line.richText) {
+    return line;
+  }
+
+  const firstChar = line.richText.charAt(0);
+
+  if (firstChar === ' ' || firstChar === '+' || firstChar === '-') {
+    Object.assign(line, {
+      richText: line.richText.substring(1),
+    });
+  }
+
+  return line;
+}
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 72f21f13860..b755458aa4b 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
+/* eslint-disable consistent-return, no-new */
 
 import $ from 'jquery';
 import Flash from './flash';
diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js
index 842a4255f08..4164149dd06 100644
--- a/app/assets/javascripts/due_date_select.js
+++ b/app/assets/javascripts/due_date_select.js
@@ -2,7 +2,9 @@
 
 import $ from 'jquery';
 import Pikaday from 'pikaday';
+import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
+import { timeFor } from './lib/utils/datetime_utility';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
 
 class DueDateSelect {
@@ -14,6 +16,7 @@ class DueDateSelect {
     this.$dropdownParent = $dropdownParent;
     this.$datePicker = $dropdownParent.find('.js-due-date-calendar');
     this.$block = $block;
+    this.$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
     this.$selectbox = $dropdown.closest('.selectbox');
     this.$value = $block.find('.value');
     this.$valueContent = $block.find('.value-content');
@@ -128,7 +131,8 @@ class DueDateSelect {
 
   submitSelectedDate(isDropdown) {
     const selectedDateValue = this.datePayload[this.abilityName].due_date;
-    const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
+    const hasDueDate = this.displayedDate !== 'No due date';
+    const displayedDateStyle = hasDueDate ? 'bold' : 'no-value';
 
     this.$loading.removeClass('hidden').fadeIn();
 
@@ -145,10 +149,13 @@ class DueDateSelect {
 
     return axios.put(this.issueUpdateURL, this.datePayload)
       .then(() => {
+        const tooltipText = hasDueDate ? `${__('Due date')}<br />${selectedDateValue} (${timeFor(selectedDateValue)})` : __('Due date');
         if (isDropdown) {
           this.$dropdown.trigger('loaded.gl.dropdown');
           this.$dropdown.dropdown('toggle');
         }
+        this.$sidebarCollapsedValue.attr('data-original-title', tooltipText);
+
         return this.$loading.fadeOut();
       });
   }
diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js
index dc7672560ea..cd8dff40b88 100644
--- a/app/assets/javascripts/emoji/index.js
+++ b/app/assets/javascripts/emoji/index.js
@@ -34,7 +34,7 @@ export function getEmojiCategoryMap() {
       symbols: [],
       flags: [],
     };
-    Object.keys(emojiMap).forEach((name) => {
+    Object.keys(emojiMap).forEach(name => {
       const emoji = emojiMap[name];
       if (emojiCategoryMap[emoji.category]) {
         emojiCategoryMap[emoji.category].push(name);
@@ -79,7 +79,9 @@ export function glEmojiTag(inputName, options) {
     classList.push(fallbackSpriteClass);
   }
   const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
-  const fallbackSpriteAttribute = opts.sprite ? `data-fallback-sprite-class="${fallbackSpriteClass}"` : '';
+  const fallbackSpriteAttribute = opts.sprite
+    ? `data-fallback-sprite-class="${fallbackSpriteClass}"`
+    : '';
   let contents = emojiInfo.moji;
   if (opts.forceFallback && !opts.sprite) {
     contents = emojiImageTag(name, fallbackImageSrc);
diff --git a/app/assets/javascripts/emoji/support/unicode_support_map.js b/app/assets/javascripts/emoji/support/unicode_support_map.js
index c18d07dad43..8c1861c56db 100644
--- a/app/assets/javascripts/emoji/support/unicode_support_map.js
+++ b/app/assets/javascripts/emoji/support/unicode_support_map.js
@@ -54,7 +54,8 @@ const unicodeSupportTestMap = {
 function checkPixelInImageDataArray(pixelOffset, imageDataArray) {
   // `4 *` because RGBA
   const indexOffset = 4 * pixelOffset;
-  const hasColor = imageDataArray[indexOffset + 0] ||
+  const hasColor =
+    imageDataArray[indexOffset + 0] ||
     imageDataArray[indexOffset + 1] ||
     imageDataArray[indexOffset + 2];
   const isVisible = imageDataArray[indexOffset + 3];
@@ -75,23 +76,23 @@ const chromeVersion = chromeMatches && chromeMatches[1] && parseInt(chromeMatche
 const fontSize = 16;
 function generateUnicodeSupportMap(testMap) {
   const testMapKeys = Object.keys(testMap);
-  const numTestEntries = testMapKeys
-    .reduce((list, testKey) => list.concat(testMap[testKey]), []).length;
+  const numTestEntries = testMapKeys.reduce((list, testKey) => list.concat(testMap[testKey]), [])
+    .length;
 
   const canvas = document.createElement('canvas');
   (window.gl || window).testEmojiUnicodeSupportMapCanvas = canvas;
   const ctx = canvas.getContext('2d');
-  canvas.width = (2 * fontSize);
-  canvas.height = (numTestEntries * fontSize);
+  canvas.width = 2 * fontSize;
+  canvas.height = numTestEntries * fontSize;
   ctx.fillStyle = '#000000';
   ctx.textBaseline = 'middle';
   ctx.font = `${fontSize}px "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
   // Write each emoji to the canvas vertically
   let writeIndex = 0;
-  testMapKeys.forEach((testKey) => {
+  testMapKeys.forEach(testKey => {
     const testEntry = testMap[testKey];
-    [].concat(testEntry).forEach((emojiUnicode) => {
-      ctx.fillText(emojiUnicode, 0, (writeIndex * fontSize) + (fontSize / 2));
+    [].concat(testEntry).forEach(emojiUnicode => {
+      ctx.fillText(emojiUnicode, 0, writeIndex * fontSize + fontSize / 2);
       writeIndex += 1;
     });
   });
@@ -99,29 +100,25 @@ function generateUnicodeSupportMap(testMap) {
   // Read from the canvas
   const resultMap = {};
   let readIndex = 0;
-  testMapKeys.forEach((testKey) => {
+  testMapKeys.forEach(testKey => {
     const testEntry = testMap[testKey];
     // This needs to be a `reduce` instead of `every` because we need to
     // keep the `readIndex` in sync from the writes by running all entries
-    const isTestSatisfied = [].concat(testEntry).reduce((isSatisfied) => {
+    const isTestSatisfied = [].concat(testEntry).reduce(isSatisfied => {
       // Sample along the vertical-middle for a couple of characters
-      const imageData = ctx.getImageData(
-          0,
-          (readIndex * fontSize) + (fontSize / 2),
-          2 * fontSize,
-          1,
-        ).data;
+      const imageData = ctx.getImageData(0, readIndex * fontSize + fontSize / 2, 2 * fontSize, 1)
+        .data;
 
       let isValidEmoji = false;
       for (let currentPixel = 0; currentPixel < 64; currentPixel += 1) {
         const isLookingAtFirstChar = currentPixel < fontSize;
-        const isLookingAtSecondChar = currentPixel >= (fontSize + (fontSize / 2));
+        const isLookingAtSecondChar = currentPixel >= fontSize + fontSize / 2;
         // Check for the emoji somewhere along the row
         if (isLookingAtFirstChar && checkPixelInImageDataArray(currentPixel, imageData)) {
           isValidEmoji = true;
 
-        // Check to see that nothing is rendered next to the first character
-        // to ensure that the ZWJ sequence rendered as one piece
+          // Check to see that nothing is rendered next to the first character
+          // to ensure that the ZWJ sequence rendered as one piece
         } else if (isLookingAtSecondChar && checkPixelInImageDataArray(currentPixel, imageData)) {
           isValidEmoji = false;
           break;
@@ -170,7 +167,10 @@ export default function getUnicodeSupportMap() {
     if (isLocalStorageAvailable) {
       window.localStorage.setItem('gl-emoji-version', GL_EMOJI_VERSION);
       window.localStorage.setItem('gl-emoji-user-agent', navigator.userAgent);
-      window.localStorage.setItem('gl-emoji-unicode-support-map', JSON.stringify(unicodeSupportMap));
+      window.localStorage.setItem(
+        'gl-emoji-unicode-support-map',
+        JSON.stringify(unicodeSupportMap),
+      );
     }
   }
 
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index dbee81fa320..9aa224fa407 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -43,16 +43,17 @@
   <div class="environments-container">
 
     <loading-icon
-      label="Loading environments"
       v-if="isLoading"
+      class="prepend-top-default"
+      label="Loading environments"
       size="3"
     />
 
     <slot name="emptyState"></slot>
 
     <div
-      class="table-holder"
-      v-if="!isLoading && environments.length > 0">
+      v-if="!isLoading && environments.length > 0"
+      class="table-holder">
 
       <environment-table
         :environments="environments"
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 16bd2f5feb3..e3652fe739e 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -1,5 +1,5 @@
 <script>
-  import playIconSvg from 'icons/_icon_play.svg';
+  import Icon from '~/vue_shared/components/icon.vue';
   import eventHub from '../event_hub';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -8,9 +8,9 @@
     directives: {
       tooltip,
     },
-
     components: {
       loadingIcon,
+      Icon,
     },
     props: {
       actions: {
@@ -19,20 +19,16 @@
         default: () => [],
       },
     },
-
     data() {
       return {
-        playIconSvg,
         isLoading: false,
       };
     },
-
     computed: {
       title() {
         return 'Deploy to...';
       },
     },
-
     methods: {
       onClickAction(endpoint) {
         this.isLoading = true;
@@ -56,16 +52,19 @@
     role="group">
     <button
       v-tooltip
+      :title="title"
+      :aria-label="title"
+      :disabled="isLoading"
       type="button"
       class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
       data-container="body"
       data-toggle="dropdown"
-      :title="title"
-      :aria-label="title"
-      :disabled="isLoading"
     >
       <span>
-        <span v-html="playIconSvg"></span>
+        <icon
+          :size="12"
+          name="play"
+        />
         <i
           class="fa fa-caret-down"
           aria-hidden="true"
@@ -75,18 +74,21 @@
       </span>
     </button>
 
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(action, i) in actions"
         :key="i">
         <button
+          :class="{ disabled: isActionDisabled(action) }"
+          :disabled="isActionDisabled(action)"
           type="button"
           class="js-manual-action-link no-btn btn"
           @click="onClickAction(action.play_path)"
-          :class="{ disabled: isActionDisabled(action) }"
-          :disabled="isActionDisabled(action)"
         >
-          <span v-html="playIconSvg"></span>
+          <icon
+            :size="12"
+            name="play"
+          />
           <span>
             {{ action.name }}
           </span>
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
index c9a68cface6..68195225d50 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.vue
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -1,4 +1,5 @@
 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
   import { s__ } from '../../locale';
 
@@ -6,6 +7,9 @@
   * Renders the external url link in environments table.
   */
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
@@ -15,7 +19,6 @@
         required: true,
       },
     },
-
     computed: {
       title() {
         return s__('Environments|Open');
@@ -26,18 +29,17 @@
 <template>
   <a
     v-tooltip
+    :title="title"
+    :aria-label="title"
+    :href="externalUrl"
     class="btn external-url"
     data-container="body"
     target="_blank"
     rel="noopener noreferrer nofollow"
-    :title="title"
-    :aria-label="title"
-    :href="externalUrl"
   >
-    <i
-      class="fa fa-external-link"
-      aria-hidden="true"
-    >
-    </i>
+    <icon
+      :size="12"
+      name="external-link"
+    />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 79326ca3487..5ecdccf63ad 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -292,7 +292,7 @@
         if (this.model &&
           this.model.last_deployment &&
           this.model.last_deployment.deployable) {
-          const deployable = this.model.last_deployment.deployable;
+          const { deployable } = this.model.last_deployment;
           return `${deployable.name} #${deployable.id}`;
         }
         return '';
@@ -427,11 +427,11 @@
 </script>
 <template>
   <div
-    class="gl-responsive-table-row"
     :class="{
       'js-child-row environment-child-row': model.isChildren,
       'folder-row': model.isFolder,
     }"
+    class="gl-responsive-table-row"
     role="row">
     <div
       class="table-section section-10"
@@ -446,19 +446,19 @@
       </div>
       <a
         v-if="!model.isFolder"
-        class="environment-name flex-truncate-parent table-mobile-content"
-        :href="environmentPath">
+        :href="environmentPath"
+        class="environment-name flex-truncate-parent table-mobile-content">
         <span
-          class="flex-truncate-child"
           v-tooltip
           :title="model.name"
+          class="flex-truncate-child"
         >{{ model.name }}</span>
       </a>
       <span
         v-else
         class="folder-name"
-        @click="onClickFolder"
-        role="button">
+        role="button"
+        @click="onClickFolder">
 
         <span class="folder-icon">
           <i
@@ -486,14 +486,14 @@
           {{ model.folderName }}
         </span>
 
-        <span class="badge">
+        <span class="badge badge-pill">
           {{ model.size }}
         </span>
       </span>
     </div>
 
     <div
-      class="table-section section-10 deployment-column hidden-xs hidden-sm"
+      class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
       role="gridcell"
     >
       <span v-if="shouldRenderDeploymentID">
@@ -503,23 +503,23 @@
       <span v-if="!model.isFolder && deploymentHasUser">
         by
         <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"
+          class="js-deploy-user-container"
         />
       </span>
     </div>
 
     <div
-      class="table-section section-15 hidden-xs hidden-sm"
+      class="table-section section-15 d-none d-sm-none d-md-block"
       role="gridcell"
     >
       <a
         v-if="shouldRenderBuildName"
-        class="build-link flex-truncate-parent"
         :href="buildPath"
+        class="build-link flex-truncate-parent"
       >
         <span class="flex-truncate-child">{{ buildName }}</span>
       </a>
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 081537cf218..947e8c901e9 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -2,20 +2,22 @@
   /**
   * Renders the Monitoring (Metrics) link in environments table.
   */
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
-
     props: {
       monitoringUrl: {
         type: String,
         required: true,
       },
     },
-
     computed: {
       title() {
         return 'Monitoring';
@@ -26,17 +28,16 @@
 <template>
   <a
     v-tooltip
-    class="btn monitoring-url hidden-xs hidden-sm"
-    data-container="body"
-    rel="noopener noreferrer nofollow"
     :href="monitoringUrl"
     :title="title"
     :aria-label="title"
+    class="btn monitoring-url d-none d-sm-none d-md-block"
+    data-container="body"
+    rel="noopener noreferrer nofollow"
   >
-    <i
-      class="fa fa-area-chart"
-      aria-hidden="true"
-    >
-    </i>
+    <icon
+      :size="12"
+      name="chart"
+    />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 605a88e997e..310835c5ea9 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -12,7 +12,6 @@
     components: {
       loadingIcon,
     },
-
     props: {
       retryUrl: {
         type: String,
@@ -24,13 +23,11 @@
         default: true,
       },
     },
-
     data() {
       return {
         isLoading: false,
       };
     },
-
     methods: {
       onClick() {
         this.isLoading = true;
@@ -42,10 +39,10 @@
 </script>
 <template>
   <button
+    :disabled="isLoading"
     type="button"
-    class="btn hidden-xs hidden-sm"
+    class="btn d-none d-sm-none d-md-block"
     @click="onClick"
-    :disabled="isLoading"
   >
 
     <span v-if="isLastDeployment">
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index dda7429a726..eba58bedd6d 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -40,10 +40,10 @@
     methods: {
       onClick() {
         // eslint-disable-next-line no-alert
-        if (confirm('Are you sure you want to stop this environment?')) {
+        if (window.confirm('Are you sure you want to stop this environment?')) {
           this.isLoading = true;
 
-          $(this.$el).tooltip('destroy');
+          $(this.$el).tooltip('dispose');
 
           eventHub.$emit('postAction', this.stopUrl);
         }
@@ -54,13 +54,13 @@
 <template>
   <button
     v-tooltip
-    type="button"
-    class="btn stop-env-link hidden-xs hidden-sm"
-    data-container="body"
-    @click="onClick"
     :disabled="isLoading"
     :title="title"
     :aria-label="title"
+    type="button"
+    class="btn stop-env-link d-none d-sm-none d-md-block"
+    data-container="body"
+    @click="onClick"
   >
     <i
       class="fa fa-stop stop-env-icon"
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
index 407d5333c0e..f8e3165f8cd 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.vue
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -3,14 +3,16 @@
   * Renders a terminal button to open a web terminal.
   * Used in environments table.
   */
-  import terminalIconSvg from 'icons/_icon_terminal.svg';
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
-
     props: {
       terminalPath: {
         type: String,
@@ -18,13 +20,6 @@
         default: '',
       },
     },
-
-    data() {
-      return {
-        terminalIconSvg,
-      };
-    },
-
     computed: {
       title() {
         return 'Terminal';
@@ -35,12 +30,15 @@
 <template>
   <a
     v-tooltip
-    class="btn terminal-button hidden-xs hidden-sm"
-    data-container="body"
     :title="title"
     :aria-label="title"
     :href="terminalPath"
-    v-html="terminalIconSvg"
+    class="btn terminal-button d-none d-sm-none d-md-block"
+    data-container="body"
   >
+    <icon
+      :size="12"
+      name="terminal"
+    />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index c0be72f7401..b18f02343d6 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -68,8 +68,7 @@
         this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', showLoader);
 
         this.service.getFolderContent(folder.folder_path)
-          .then(resp => resp.json())
-          .then(response => this.store.setfolderContent(folder, response.environments))
+          .then(response => this.store.setfolderContent(folder, response.data.environments))
           .then(() => this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false))
           .catch(() => {
             Flash(s__('Environments|An error occurred while fetching the environments.'));
@@ -94,8 +93,8 @@
     <div class="top-area">
       <tabs
         :tabs="tabs"
-        @onChangeTab="onChangeTab"
         scope="environments"
+        @onChangeTab="onChangeTab"
       />
 
       <div
@@ -120,8 +119,8 @@
       @onChangePage="onChangePage"
     >
       <empty-state
-        slot="emptyState"
         v-if="!isLoading && state.environments.length === 0"
+        slot="emptyState"
         :new-path="newEnvironmentPath"
         :help-path="helpPagePath"
         :can-create-environment="canCreateEnvironment"
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index 5ef5e347387..5f72a39c5cb 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -39,8 +39,8 @@
 <template>
   <div :class="cssContainerClass">
     <div
-      class="top-area"
       v-if="!isLoading"
+      class="top-area"
     >
 
       <h4 class="js-folder-name environments-folder-name">
@@ -49,8 +49,8 @@
 
       <tabs
         :tabs="tabs"
-        @onChangeTab="onChangeTab"
         scope="environments"
+        @onChangeTab="onChangeTab"
       />
     </div>
 
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index 34d18d55120..a7a79dbca70 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -6,7 +6,6 @@ import Visibility from 'visibilityjs';
 import Poll from '../../lib/utils/poll';
 import {
   getParameterByName,
-  parseQueryStringIntoObject,
 } from '../../lib/utils/common_utils';
 import { s__ } from '../../locale';
 import Flash from '../../flash';
@@ -46,17 +45,14 @@ export default {
 
   methods: {
     saveData(resp) {
-      const headers = resp.headers;
-      return resp.json().then((response) => {
-        this.isLoading = false;
-
-        if (_.isEqual(parseQueryStringIntoObject(resp.url.split('?')[1]), this.requestData)) {
-          this.store.storeAvailableCount(response.available_count);
-          this.store.storeStoppedCount(response.stopped_count);
-          this.store.storeEnvironments(response.environments);
-          this.store.setPagination(headers);
-        }
-      });
+      this.isLoading = false;
+
+      if (_.isEqual(resp.config.params, this.requestData)) {
+        this.store.storeAvailableCount(resp.data.available_count);
+        this.store.storeStoppedCount(resp.data.stopped_count);
+        this.store.storeEnvironments(resp.data.environments);
+        this.store.setPagination(resp.headers);
+      }
     },
 
     /**
@@ -70,7 +66,7 @@ export default {
     updateContent(parameters) {
       this.updateInternalState(parameters);
       // fetch new data
-      return this.service.get(this.requestData)
+      return this.service.fetchEnvironments(this.requestData)
         .then(response => this.successCallback(response))
         .then(() => {
           // restart polling
@@ -105,7 +101,7 @@ export default {
     fetchEnvironments() {
       this.isLoading = true;
 
-      return this.service.get(this.requestData)
+      return this.service.fetchEnvironments(this.requestData)
         .then(this.successCallback)
         .catch(this.errorCallback);
     },
@@ -141,7 +137,7 @@ export default {
 
     this.poll = new Poll({
       resource: this.service,
-      method: 'get',
+      method: 'fetchEnvironments',
       data: this.requestData,
       successCallback: this.successCallback,
       errorCallback: this.errorCallback,
diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
index 03ab74b3338..3b121551aca 100644
--- a/app/assets/javascripts/environments/services/environments_service.js
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -1,25 +1,22 @@
-/* eslint-disable class-methods-use-this */
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '~/lib/utils/axios_utils';
 
 export default class EnvironmentsService {
   constructor(endpoint) {
-    this.environments = Vue.resource(endpoint);
+    this.environmentsEndpoint = endpoint;
     this.folderResults = 3;
   }
 
-  get(options = {}) {
+  fetchEnvironments(options = {}) {
     const { scope, page } = options;
-    return this.environments.get({ scope, page });
+    return axios.get(this.environmentsEndpoint, { params: { scope, page } });
   }
 
+  // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return Vue.http.post(endpoint, {}, { emulateJSON: true });
+    return axios.post(endpoint, {}, { emulateJSON: true });
   }
 
   getFolderContent(folderUrl) {
-    return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`);
+    return axios.get(`${folderUrl}.json?per_page=${this.folderResults}`);
   }
 }
diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js
index 5f2989ab854..5ce9225a4bb 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js
+++ b/app/assets/javascripts/environments/stores/environments_store.js
@@ -146,7 +146,7 @@ export default class EnvironmentsStore {
    * @return {Array}
    */
   updateEnvironmentProp(environment, prop, newValue) {
-    const environments = this.state.environments;
+    const { environments } = this.state;
 
     const updatedEnvironments = environments.map((env) => {
       const updateEnv = Object.assign({}, env);
@@ -161,7 +161,7 @@ export default class EnvironmentsStore {
   }
 
   getOpenFolders() {
-    const environments = this.state.environments;
+    const { environments } = this.state;
 
     return environments.filter(env => env.isFolder && env.isOpen);
   }
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js
index c50ac667c20..2f27c9351bc 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight.js
@@ -1,19 +1,19 @@
 import $ from 'jquery';
-import _ from 'underscore';
 import {
   getSelector,
-  togglePopover,
   inserted,
-  mouseenter,
-  mouseleave,
 } from './feature_highlight_helper';
+import {
+  togglePopover,
+  mouseenter,
+  debouncedMouseleave,
+} from '../shared/popover';
 
 export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
   const $selector = $(getSelector(id));
   const $parent = $selector.parent();
   const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
   const hideOnScroll = togglePopover.bind($selector, false);
-  const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout);
 
   $selector
     // Setup popover
@@ -24,18 +24,15 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
       template: `
         <div class="popover feature-highlight-popover" role="tooltip">
           <div class="arrow"></div>
-          <div class="popover-content"></div>
+          <div class="popover-body"></div>
         </div>
       `,
     })
     .on('mouseenter', mouseenter)
-    .on('mouseleave', debouncedMouseleave)
+    .on('mouseleave', debouncedMouseleave(debounceTimeout))
     .on('inserted.bs.popover', inserted)
     .on('show.bs.popover', () => {
-      window.addEventListener('scroll', hideOnScroll);
-    })
-    .on('hide.bs.popover', () => {
-      window.removeEventListener('scroll', hideOnScroll);
+      window.addEventListener('scroll', hideOnScroll, { once: true });
     })
     // Display feature highlight
     .removeAttr('disabled');
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
index f480e72961c..d5b97ebb264 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -3,20 +3,10 @@ import axios from '../lib/utils/axios_utils';
 import { __ } from '../locale';
 import Flash from '../flash';
 import LazyLoader from '../lazy_loader';
+import { togglePopover } from '../shared/popover';
 
 export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
-export function togglePopover(show) {
-  const isAlreadyShown = this.hasClass('js-popover-show');
-  if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) {
-    return false;
-  }
-  this.popover(show ? 'show' : 'hide');
-  this.toggleClass('disable-animation js-popover-show', show);
-
-  return true;
-}
-
 export function dismiss(highlightId) {
   axios.post(this.attr('data-dismiss-endpoint'), {
     feature_name: highlightId,
@@ -27,23 +17,6 @@ export function dismiss(highlightId) {
   this.hide();
 }
 
-export function mouseleave() {
-  if (!$('.popover:hover').length > 0) {
-    const $featureHighlight = $(this);
-    togglePopover.call($featureHighlight, false);
-  }
-}
-
-export function mouseenter() {
-  const $featureHighlight = $(this);
-
-  const showedPopover = togglePopover.call($featureHighlight, true);
-  if (showedPopover) {
-    $('.popover')
-      .on('mouseleave', mouseleave.bind($featureHighlight));
-  }
-}
-
 export function inserted() {
   const popoverId = this.getAttribute('aria-describedby');
   const highlightId = this.dataset.highlight;
diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
index 26618af9515..a8eb8d94be3 100644
--- a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
+++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
@@ -72,9 +72,9 @@ export default {
           @click="onItemActivated(item.text)">
           <span>
             <span
-              class="filtered-search-history-dropdown-token"
               v-for="(token, index) in item.tokens"
               :key="`dropdown-token-${index}`"
+              class="filtered-search-history-dropdown-token"
             >
               <span class="name">{{ token.prefix }}</span>
               <span class="value">{{ token.suffix }}</span>
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index 9bc36c1f9b6..27fff488603 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -35,7 +35,7 @@ export default class DropdownUtils {
 
     // Remove the symbol for filter
     if (value[0] === filterSymbol) {
-      symbol = value[0];
+      [symbol] = value;
       value = value.slice(1);
     }
 
@@ -162,7 +162,7 @@ export default class DropdownUtils {
 
   // Determines the full search query (visual tokens + input)
   static getSearchQuery(untilInput = false) {
-    const container = FilteredSearchContainer.container;
+    const { container } = FilteredSearchContainer;
     const tokens = [].slice.call(container.querySelectorAll('.tokens-container li'));
     const values = [];
 
@@ -220,7 +220,7 @@ export default class DropdownUtils {
   }
 
   static getInputSelectionPosition(input) {
-    const selectionStart = input.selectionStart;
+    const { selectionStart } = input;
     let inputValue = input.value;
     // Replace all spaces inside quote marks with underscores
     // (will continue to match entire string until an end quote is found if any)
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 e6390f0855b..296571606d6 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -26,8 +26,8 @@ export default class FilteredSearchDropdownManager {
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
     this.page = page;
     this.groupsOnly = isGroup;
-    this.groupAncestor = isGroupAncestor;
-    this.isGroupDecendent = isGroupDecendent;
+    this.includeAncestorGroups = isGroupAncestor;
+    this.includeDescendantGroups = isGroupDecendent;
 
     this.setupMapping();
 
@@ -108,7 +108,19 @@ export default class FilteredSearchDropdownManager {
   }
 
   getLabelsEndpoint() {
-    const endpoint = `${this.baseEndpoint}/labels.json`;
+    let endpoint = `${this.baseEndpoint}/labels.json?`;
+
+    if (this.groupsOnly) {
+      endpoint = `${endpoint}only_group_labels=true&`;
+    }
+
+    if (this.includeAncestorGroups) {
+      endpoint = `${endpoint}include_ancestor_groups=true&`;
+    }
+
+    if (this.includeDescendantGroups) {
+      endpoint = `${endpoint}include_descendant_groups=true`;
+    }
 
     return endpoint;
   }
@@ -147,7 +159,7 @@ export default class FilteredSearchDropdownManager {
   load(key, firstLoad = false) {
     const mappingKey = this.mapping[key];
     const glClass = mappingKey.gl;
-    const element = mappingKey.element;
+    const { element } = mappingKey;
     let forceShowList = false;
 
     if (!mappingKey.reference) {
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 71b7e80335b..81286c54c4c 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -21,7 +21,7 @@ export default class FilteredSearchManager {
   constructor({
     page,
     isGroup = false,
-    isGroupAncestor = false,
+    isGroupAncestor = true,
     isGroupDecendent = false,
     filteredSearchTokenKeys = FilteredSearchTokenKeys,
     stateFiltersSelector = '.issues-state-filters',
@@ -86,6 +86,7 @@ export default class FilteredSearchManager {
         page: this.page,
         isGroup: this.isGroup,
         isGroupAncestor: this.isGroupAncestor,
+        isGroupDecendent: this.isGroupDecendent,
         filteredSearchTokenKeys: this.filteredSearchTokenKeys,
       });
 
@@ -234,7 +235,7 @@ export default class FilteredSearchManager {
 
   checkForEnter(e) {
     if (e.keyCode === 38 || e.keyCode === 40) {
-      const selectionStart = this.filteredSearchInput.selectionStart;
+      const { selectionStart } = this.filteredSearchInput;
 
       e.preventDefault();
       this.filteredSearchInput.setSelectionRange(selectionStart, selectionStart);
@@ -495,7 +496,7 @@ export default class FilteredSearchManager {
           // Replace underscore with hyphen in the sanitizedkey.
           // e.g. 'my_reaction' => 'my-reaction'
           sanitizedKey = sanitizedKey.replace('_', '-');
-          const symbol = match.symbol;
+          const { symbol } = match;
           let quotationsToUse = '';
 
           if (sanitizedValue.indexOf(' ') !== -1) {
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 600024c21c3..56fe1ab4e90 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -101,7 +101,7 @@ export default class FilteredSearchVisualTokens {
 
   static updateLabelTokenColor(tokenValueContainer, tokenValue) {
     const filteredSearchInput = FilteredSearchContainer.container.querySelector('.filtered-search');
-    const baseEndpoint = filteredSearchInput.dataset.baseEndpoint;
+    const { baseEndpoint } = filteredSearchInput.dataset;
     const labelsEndpoint = FilteredSearchVisualTokens.getEndpointWithQueryParams(
       `${baseEndpoint}/labels.json`,
       filteredSearchInput.dataset.endpointQueryParams,
@@ -215,7 +215,7 @@ export default class FilteredSearchVisualTokens {
   static addFilterVisualToken(tokenName, tokenValue, canEdit) {
     const { lastVisualToken, isLastVisualTokenValid }
       = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
-    const addVisualTokenElement = FilteredSearchVisualTokens.addVisualTokenElement;
+    const { addVisualTokenElement } = FilteredSearchVisualTokens;
 
     if (isLastVisualTokenValid) {
       addVisualTokenElement(tokenName, tokenValue, false, canEdit);
diff --git a/app/assets/javascripts/filtered_search/recent_searches_root.js b/app/assets/javascripts/filtered_search/recent_searches_root.js
index f9338b82acf..c1efa9c86f4 100644
--- a/app/assets/javascripts/filtered_search/recent_searches_root.js
+++ b/app/assets/javascripts/filtered_search/recent_searches_root.js
@@ -29,7 +29,7 @@ class RecentSearchesRoot {
   }
 
   render() {
-    const state = this.store.state;
+    const { state } = this.store;
     this.vm = new Vue({
       el: this.wrapperElement,
       components: {
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 8259133c95b..09186a865e4 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -7,6 +7,16 @@ function sanitize(str) {
   return str.replace(/<(?:.|\n)*?>/gm, '');
 }
 
+export const defaultAutocompleteConfig = {
+  emojis: true,
+  members: true,
+  issues: true,
+  mergeRequests: true,
+  epics: false,
+  milestones: true,
+  labels: true,
+};
+
 class GfmAutoComplete {
   constructor(dataSources) {
     this.dataSources = dataSources || {};
@@ -14,14 +24,7 @@ class GfmAutoComplete {
     this.isLoadingData = {};
   }
 
-  setup(input, enableMap = {
-    emojis: true,
-    members: true,
-    issues: true,
-    milestones: true,
-    mergeRequests: true,
-    labels: true,
-  }) {
+  setup(input, enableMap = defaultAutocompleteConfig) {
     // Add GFM auto-completion to all input fields, that accept GFM input.
     this.input = input || $('.js-gfm-input');
     this.enableMap = enableMap;
@@ -54,6 +57,7 @@ class GfmAutoComplete {
       alias: 'commands',
       searchKey: 'search',
       skipSpecialCharacterTest: true,
+      skipMarkdownCharacterTest: true,
       data: GfmAutoComplete.defaultLoadingData,
       displayTpl(value) {
         if (GfmAutoComplete.isLoading(value)) return GfmAutoComplete.Loading.template;
@@ -76,7 +80,7 @@ class GfmAutoComplete {
         let tpl = '/${name} ';
         let referencePrefix = null;
         if (value.params.length > 0) {
-          referencePrefix = value.params[0][0];
+          [[referencePrefix]] = value.params;
           if (/^[@%~]/.test(referencePrefix)) {
             tpl += '<%- referencePrefix %>';
           }
@@ -376,15 +380,23 @@ class GfmAutoComplete {
         return $.fn.atwho.default.callbacks.filter(query, data, searchKey);
       },
       beforeInsert(value) {
-        let resultantValue = value;
+        let withoutAt = value.substring(1);
+        const at = value.charAt();
+
         if (value && !this.setting.skipSpecialCharacterTest) {
-          const withoutAt = value.substring(1);
-          const regex = value.charAt() === '~' ? /\W|^\d+$/ : /\W/;
+          const regex = at === '~' ? /\W|^\d+$/ : /\W/;
           if (withoutAt && regex.test(withoutAt)) {
-            resultantValue = `${value.charAt()}"${withoutAt}"`;
+            withoutAt = `"${withoutAt}"`;
           }
         }
-        return resultantValue;
+
+        // We can ignore this for quick actions because they are processed
+        // before Markdown.
+        if (!this.setting.skipMarkdownCharacterTest) {
+          withoutAt = withoutAt.replace(/([~\-_*`])/g, '\\$&');
+        }
+
+        return `${at}${withoutAt}`;
       },
       matcher(flag, subtext) {
         const match = GfmAutoComplete.defaultMatcher(flag, subtext, this.app.controllers);
@@ -399,7 +411,10 @@ class GfmAutoComplete {
 
   fetchData($input, at) {
     if (this.isLoadingData[at]) return;
+
     this.isLoadingData[at] = true;
+    const dataSource = this.dataSources[GfmAutoComplete.atTypeMap[at]];
+
     if (this.cachedData[at]) {
       this.loadData($input, at, this.cachedData[at]);
     } else if (GfmAutoComplete.atTypeMap[at] === 'emojis') {
@@ -409,12 +424,14 @@ class GfmAutoComplete {
           GfmAutoComplete.glEmojiTag = glEmojiTag;
         })
         .catch(() => { this.isLoadingData[at] = false; });
-    } else {
-      AjaxCache.retrieve(this.dataSources[GfmAutoComplete.atTypeMap[at]], true)
+    } else if (dataSource) {
+      AjaxCache.retrieve(dataSource, true)
         .then((data) => {
           this.loadData($input, at, data);
         })
         .catch(() => { this.isLoadingData[at] = false; });
+    } else {
+      this.isLoadingData[at] = false;
     }
   }
 
@@ -441,7 +458,7 @@ class GfmAutoComplete {
   static isLoading(data) {
     let dataToInspect = data;
     if (data && data.length > 0) {
-      dataToInspect = data[0];
+      [dataToInspect] = data;
     }
 
     const loadingState = GfmAutoComplete.defaultLoadingData[0];
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 86b34a6e360..8d231e6c405 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, no-underscore-dangle, 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 */
+/* eslint-disable func-names, no-underscore-dangle, no-var, one-var, one-var-declaration-per-line, 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 */
 /* global fuzzaldrinPlus */
 
 import $ from 'jquery';
@@ -374,7 +374,7 @@ GitLabDropdown = (function() {
           $relatedTarget = $(e.relatedTarget);
           $dropdownMenu = $relatedTarget.closest('.dropdown-menu');
           if ($dropdownMenu.length === 0) {
-            return _this.dropdown.removeClass('open');
+            return _this.dropdown.removeClass('show');
           }
         }
       };
@@ -602,14 +602,18 @@ GitLabDropdown = (function() {
     var selector;
     selector = '.dropdown-content';
     if (this.dropdown.find(".dropdown-toggle-page").length) {
-      selector = ".dropdown-page-one .dropdown-content";
+      if (this.options.containerSelector) {
+        selector = this.options.containerSelector;
+      } else {
+        selector = '.dropdown-page-one .dropdown-content';
+      }
     }
 
     return $(selector, this.dropdown).empty();
   };
 
   GitLabDropdown.prototype.renderItem = function(data, group, index) {
-    var field, fieldName, html, selected, text, url, value, rowHidden;
+    var field, html, selected, text, url, value, rowHidden;
 
     if (!this.options.renderRow) {
       value = this.options.id ? this.options.id(data) : data.id;
@@ -647,7 +651,7 @@ GitLabDropdown = (function() {
       html = this.options.renderRow.call(this.options, data, this);
     } else {
       if (!selected) {
-        fieldName = this.options.fieldName;
+        const { fieldName } = this.options;
 
         if (value) {
           field = this.dropdown.parent().find(`input[name='${fieldName}'][value='${value}']`);
@@ -701,7 +705,8 @@ GitLabDropdown = (function() {
 
   GitLabDropdown.prototype.highlightTextMatches = function(text, term) {
     const occurrences = fuzzaldrinPlus.match(text, term);
-    const indexOf = [].indexOf;
+    const { indexOf } = [];
+
     return text.split('').map(function(character, i) {
       if (indexOf.call(occurrences, i) !== -1) {
         return "<b>" + character + "</b>";
@@ -717,9 +722,9 @@ GitLabDropdown = (function() {
   };
 
   GitLabDropdown.prototype.rowClicked = function(el) {
-    var field, fieldName, groupName, isInput, selectedIndex, selectedObject, value, isMarking;
+    var field, groupName, isInput, selectedIndex, selectedObject, value, isMarking;
 
-    fieldName = this.options.fieldName;
+    const { fieldName } = this.options;
     isInput = $(this.el).is('input');
     if (this.renderedData) {
       groupName = el.data('group');
@@ -753,7 +758,7 @@ GitLabDropdown = (function() {
     }
 
     if (this.options.isSelectable && !this.options.isSelectable(selectedObject, el)) {
-      return;
+      return [selectedObject];
     }
 
     if (el.hasClass(ACTIVE_CLASS) && value !== 0) {
@@ -801,7 +806,7 @@ GitLabDropdown = (function() {
     if (this.options.filterable) {
       const initialScrollTop = $(window).scrollTop();
 
-      if (this.dropdown.is('.open')) {
+      if (this.dropdown.is('.show') && !this.filterInput.is(':focus')) {
         this.filterInput.focus();
       }
 
diff --git a/app/assets/javascripts/gl_field_error.js b/app/assets/javascripts/gl_field_error.js
index 972b2252acb..87c6e37b9fb 100644
--- a/app/assets/javascripts/gl_field_error.js
+++ b/app/assets/javascripts/gl_field_error.js
@@ -62,7 +62,7 @@ export default class GlFieldError {
     this.inputDomElement = this.inputElement.get(0);
     this.form = formErrors;
     this.errorMessage = this.inputElement.attr('title') || 'This field is required.';
-    this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${this.errorMessage}</p>`);
+    this.fieldErrorElement = $(`<p class='${errorMessageClass} hidden'>${this.errorMessage}</p>`);
 
     this.state = {
       valid: false,
@@ -146,8 +146,8 @@ export default class GlFieldError {
 
   renderInvalid() {
     this.inputElement.addClass(inputErrorClass);
-    this.scopedSiblings.hide();
-    return this.fieldErrorElement.show();
+    this.scopedSiblings.addClass('hidden');
+    return this.fieldErrorElement.removeClass('hidden');
   }
 
   renderClear() {
@@ -157,7 +157,7 @@ export default class GlFieldError {
       this.accessCurrentValue(trimmedInput);
     }
     this.inputElement.removeClass(inputErrorClass);
-    this.scopedSiblings.hide();
-    this.fieldErrorElement.hide();
+    this.scopedSiblings.addClass('hidden');
+    this.fieldErrorElement.addClass('hidden');
   }
 }
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index 9f5eba353d7..f802971a3ca 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -1,14 +1,14 @@
 import $ from 'jquery';
 import autosize from 'autosize';
-import GfmAutoComplete from './gfm_auto_complete';
+import GfmAutoComplete, * as GFMConfig from './gfm_auto_complete';
 import dropzoneInput from './dropzone_input';
 import { addMarkdownListeners, removeMarkdownListeners } from './lib/utils/text_markdown';
 
 export default class GLForm {
-  constructor(form, enableGFM = false) {
+  constructor(form, enableGFM = {}) {
     this.form = form;
     this.textarea = this.form.find('textarea.js-gfm-input');
-    this.enableGFM = enableGFM;
+    this.enableGFM = Object.assign({}, GFMConfig.defaultAutocompleteConfig, enableGFM);
     // Before we start, we should clean up any previous data for this form
     this.destroy();
     // Setup the form
@@ -34,14 +34,7 @@ export default class GLForm {
       // 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'));
       this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
-      this.autoComplete.setup(this.form.find('.js-gfm-input'), {
-        emojis: true,
-        members: this.enableGFM,
-        issues: this.enableGFM,
-        milestones: this.enableGFM,
-        mergeRequests: this.enableGFM,
-        labels: this.enableGFM,
-      });
+      this.autoComplete.setup(this.form.find('.js-gfm-input'), this.enableGFM);
       dropzoneInput(this.form);
       autosize(this.textarea);
     }
diff --git a/app/assets/javascripts/gpg_badges.js b/app/assets/javascripts/gpg_badges.js
index 502e3569321..029fd6a67d4 100644
--- a/app/assets/javascripts/gpg_badges.js
+++ b/app/assets/javascripts/gpg_badges.js
@@ -7,12 +7,12 @@ import { __ } from '~/locale';
 export default class GpgBadges {
   static fetch() {
     const badges = $('.js-loading-gpg-badge');
-    const form = $('.commits-search-form');
+    const tag = $('.js-signature-container');
 
     badges.html('<i class="fa fa-spinner fa-spin"></i>');
 
-    const params = parseQueryStringIntoObject(form.serialize());
-    return axios.get(form.data('signaturesPath'), { params })
+    const params = parseQueryStringIntoObject(tag.serialize());
+    return axios.get(tag.data('signaturesPath'), { params })
     .then(({ data }) => {
       data.signatures.forEach((signature) => {
         badges.filter(`[data-commit-sha="${signature.commit_sha}"]`).replaceWith(signature.html);
diff --git a/app/assets/javascripts/group_label_subscription.js b/app/assets/javascripts/group_label_subscription.js
index 5648cb9a888..d33e3a37580 100644
--- a/app/assets/javascripts/group_label_subscription.js
+++ b/app/assets/javascripts/group_label_subscription.js
@@ -1,7 +1,12 @@
 import $ from 'jquery';
+import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
-import { __ } from './locale';
+
+const tooltipTitles = {
+  group: __('Unsubscribe at group level'),
+  project: __('Unsubscribe at project level'),
+};
 
 export default class GroupLabelSubscription {
   constructor(container) {
@@ -35,6 +40,7 @@ export default class GroupLabelSubscription {
     this.$unsubscribeButtons.attr('data-url', url);
 
     axios.post(url)
+      .then(() => GroupLabelSubscription.setNewTooltip($btn))
       .then(() => this.toggleSubscriptionButtons())
       .catch(() => flash(__('There was an error when subscribing to this label.')));
   }
@@ -44,4 +50,14 @@ export default class GroupLabelSubscription {
     this.$subscribeButtons.toggleClass('hidden');
     this.$unsubscribeButtons.toggleClass('hidden');
   }
+
+  static setNewTooltip($button) {
+    if (!$button.hasClass('js-subscribe-button')) return;
+
+    const type = $button.hasClass('js-group-level') ? 'group' : 'project';
+    const newTitle = tooltipTitles[type];
+
+    $('.js-unsubscribe-button', $button.closest('.label-actions-list'))
+      .tooltip('hide').attr('title', newTitle).tooltip('_fixTitle');
+  }
 }
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 63bb5832bd0..b0765747a36 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -4,7 +4,7 @@
 import $ from 'jquery';
 import { s__ } from '~/locale';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-import modal from '~/vue_shared/components/modal.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 
@@ -15,7 +15,7 @@ import groupsComponent from './groups.vue';
 export default {
   components: {
     loadingIcon,
-    modal,
+    DeprecatedModal,
     groupsComponent,
   },
   props: {
@@ -52,8 +52,9 @@ export default {
     },
   },
   created() {
-    this.searchEmptyMessage = this.hideProjects ?
-      COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
+    this.searchEmptyMessage = this.hideProjects
+      ? COMMON_STR.GROUP_SEARCH_EMPTY
+      : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
 
     eventHub.$on('fetchPage', this.fetchPage);
     eventHub.$on('toggleChildren', this.toggleChildren);
@@ -72,22 +73,30 @@ export default {
     eventHub.$off('updateGroups', this.updateGroups);
   },
   methods: {
-    fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
-      return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived)
-                .then((res) => {
-                  if (updatePagination) {
-                    this.updatePagination(res.headers);
-                  }
+    fetchGroups({
+      parentId,
+      page,
+      filterGroupsBy,
+      sortBy,
+      archived,
+      updatePagination,
+    }) {
+      return this.service
+        .getGroups(parentId, page, filterGroupsBy, sortBy, archived)
+        .then(res => {
+          if (updatePagination) {
+            this.updatePagination(res.headers);
+          }
 
-                  return res;
-                })
-                .then(res => res.json())
-                .catch(() => {
-                  this.isLoading = false;
-                  $.scrollTo(0);
+          return res;
+        })
+        .then(res => res.json())
+        .catch(() => {
+          this.isLoading = false;
+          $.scrollTo(0);
 
-                  Flash(COMMON_STR.FAILURE);
-                });
+          Flash(COMMON_STR.FAILURE);
+        });
     },
     fetchAllGroups() {
       const page = getParameterByName('page') || null;
@@ -103,7 +112,7 @@ export default {
         sortBy,
         archived,
         updatePagination: true,
-      }).then((res) => {
+      }).then(res => {
         this.isLoading = false;
         this.updateGroups(res, Boolean(filterGroupsBy));
       });
@@ -118,14 +127,18 @@ export default {
         sortBy,
         archived,
         updatePagination: true,
-      }).then((res) => {
+      }).then(res => {
         this.isLoading = false;
         $.scrollTo(0);
 
         const currentPath = mergeUrlParams({ page }, window.location.href);
-        window.history.replaceState({
-          page: currentPath,
-        }, document.title, currentPath);
+        window.history.replaceState(
+          {
+            page: currentPath,
+          },
+          document.title,
+          currentPath,
+        );
 
         this.updateGroups(res);
       });
@@ -135,14 +148,15 @@ export default {
       if (!parentGroup.isOpen) {
         if (parentGroup.children.length === 0) {
           parentGroup.isChildrenLoading = true;
-          // eslint-disable-next-line promise/catch-or-return
           this.fetchGroups({
             parentId: parentGroup.id,
-          }).then((res) => {
-            this.store.setGroupChildren(parentGroup, res);
-          }).catch(() => {
-            parentGroup.isChildrenLoading = false;
-          });
+          })
+            .then(res => {
+              this.store.setGroupChildren(parentGroup, res);
+            })
+            .catch(() => {
+              parentGroup.isChildrenLoading = false;
+            });
         } else {
           parentGroup.isOpen = true;
         }
@@ -154,7 +168,11 @@ export default {
       this.targetGroup = group;
       this.targetParentGroup = parentGroup;
       this.showModal = true;
-      this.groupLeaveConfirmationMessage = s__(`GroupsTree|Are you sure you want to leave the "${group.fullName}" group?`);
+      this.groupLeaveConfirmationMessage = s__(
+        `GroupsTree|Are you sure you want to leave the "${
+          group.fullName
+        }" group?`,
+      );
     },
     hideLeaveGroupModal() {
       this.showModal = false;
@@ -162,14 +180,15 @@ export default {
     leaveGroup() {
       this.showModal = false;
       this.targetGroup.isBeingRemoved = true;
-      this.service.leaveGroup(this.targetGroup.leavePath)
+      this.service
+        .leaveGroup(this.targetGroup.leavePath)
         .then(res => res.json())
-        .then((res) => {
+        .then(res => {
           $.scrollTo(0);
           this.store.removeGroup(this.targetGroup, this.targetParentGroup);
           Flash(res.notice, 'notice');
         })
-        .catch((err) => {
+        .catch(err => {
           let message = COMMON_STR.FAILURE;
           if (err.status === 403) {
             message = COMMON_STR.LEAVE_FORBIDDEN;
@@ -196,10 +215,10 @@ export default {
 <template>
   <div>
     <loading-icon
-      class="loading-animation prepend-top-20"
-      size="2"
       v-if="isLoading"
       :label="s__('GroupsTree|Loading groups')"
+      class="loading-animation prepend-top-20"
+      size="2"
     />
     <groups-component
       v-if="!isLoading"
@@ -208,12 +227,12 @@ export default {
       :search-empty-message="searchEmptyMessage"
       :page-info="pageInfo"
     />
-    <modal
-      v-if="showModal"
-      kind="warning"
+    <deprecated-modal
+      v-show="showModal"
       :primary-button-label="__('Leave')"
       :title="__('Are you sure?')"
       :text="groupLeaveConfirmationMessage"
+      kind="warning"
       @cancel="hideLeaveGroupModal"
       @submit="leaveGroup"
     />
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 764b130fdb8..efbf2e3a295 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -71,14 +71,14 @@ export default {
 
 <template>
   <li
-    @click.stop="onClickRowGroup"
     :id="groupDomId"
     :class="rowClass"
     class="group-row"
+    @click.stop="onClickRowGroup"
   >
     <div
-      class="group-row-contents"
-      :class="{ 'project-row-contents': !isGroup }">
+      :class="{ 'project-row-contents': !isGroup }"
+      class="group-row-contents">
       <item-actions
         v-if="isGroup"
         :group="group"
@@ -99,8 +99,8 @@ export default {
         />
       </div>
       <div
-        class="avatar-container prepend-top-8 prepend-left-5 s24 hidden-xs"
         :class="{ 'content-loading': group.isChildrenLoading }"
+        class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block"
       >
         <a
           :href="group.relativePath"
@@ -108,14 +108,14 @@ export default {
         >
           <img
             v-if="hasAvatar"
-            class="avatar s24"
             :src="group.avatarUrl"
+            class="avatar s24"
           />
           <identicon
             v-else
-            size-class="s24"
             :entity-id="group.id"
             :entity-name="group.name"
+            size-class="s24"
           />
         </a>
       </div>
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 87065b3d6e3..24eec4901ec 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -54,13 +54,13 @@ export default {
     <a
       v-tooltip
       v-if="group.canLeave"
-      @click.prevent="onLeaveGroup"
       :href="group.leavePath"
       :title="leaveBtnTitle"
       :aria-label="leaveBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="leave-group btn no-expand">
+      class="leave-group btn no-expand"
+      @click.prevent="onLeaveGroup">
       <icon name="leave"/>
     </a>
   </div>
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index 168b4e4af2c..87ab5480c15 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -45,44 +45,44 @@
   <div class="stats">
     <item-stats-value
       v-if="isGroup"
-      css-class="number-subgroups"
-      icon-name="folder"
       :title="__('Subgroups')"
       :value="item.subgroupCount"
+      css-class="number-subgroups"
+      icon-name="folder"
     />
     <item-stats-value
       v-if="isGroup"
-      css-class="number-projects"
-      icon-name="bookmark"
       :title="__('Projects')"
       :value="item.projectCount"
+      css-class="number-projects"
+      icon-name="bookmark"
     />
     <item-stats-value
       v-if="isGroup"
-      css-class="number-users"
-      icon-name="users"
       :title="__('Members')"
       :value="item.memberCount"
+      css-class="number-users"
+      icon-name="users"
     />
     <item-stats-value
       v-if="isProject"
+      :value="item.starCount"
       css-class="project-stars"
       icon-name="star"
-      :value="item.starCount"
     />
     <item-stats-value
-      css-class="item-visibility"
-      tooltip-placement="left"
       :icon-name="visibilityIcon"
       :title="visibilityTooltip"
+      css-class="item-visibility"
+      tooltip-placement="left"
     />
     <div
-      class="last-updated"
       v-if="isProject"
+      class="last-updated"
     >
       <time-ago-tooltip
-        tooltip-placement="bottom"
         :time="item.updatedAt"
+        tooltip-placement="bottom"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue
index 4d86ac8023c..ef9f2bca76c 100644
--- a/app/assets/javascripts/groups/components/item_stats_value.vue
+++ b/app/assets/javascripts/groups/components/item_stats_value.vue
@@ -52,10 +52,10 @@
 <template>
   <span
     v-tooltip
-    data-container="body"
     :data-placement="tooltipPlacement"
     :class="cssClass"
     :title="title"
+    data-container="body"
   >
     <icon :name="iconName" />
     <span
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index 57eaac72906..83a9008a94b 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -29,7 +29,7 @@ export default () => {
       groupsApp,
     },
     data() {
-      const dataset = this.$options.el.dataset;
+      const { dataset } = this.$options.el;
       const hideProjects = dataset.hideProjects === 'true';
       const store = new GroupsStore(hideProjects);
       const service = new GroupsService(dataset.endpoint);
@@ -42,7 +42,7 @@ export default () => {
       };
     },
     beforeMount() {
-      const dataset = this.$options.el.dataset;
+      const { dataset } = this.$options.el;
       let groupFilterList = null;
       const form = document.querySelector(dataset.formSel);
       const filter = document.querySelector(dataset.filterSel);
diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
new file mode 100644
index 00000000000..62697e0ecc3
--- /dev/null
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -0,0 +1,114 @@
+<script>
+import $ from 'jquery';
+import { mapActions, mapGetters, mapState } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { activityBarViews } from '../constants';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  computed: {
+    ...mapGetters(['currentProject', 'hasChanges']),
+    ...mapState(['currentActivityView']),
+    goBackUrl() {
+      return document.referrer || this.currentProject.web_url;
+    },
+  },
+  methods: {
+    ...mapActions(['updateActivityBarView']),
+    changedActivityView(e, view) {
+      e.currentTarget.blur();
+
+      this.updateActivityBarView(view);
+
+      $(e.currentTarget).tooltip('hide');
+    },
+  },
+  activityBarViews,
+};
+</script>
+
+<template>
+  <nav class="ide-activity-bar">
+    <ul class="list-unstyled">
+      <li v-once>
+        <a
+          v-tooltip
+          :href="goBackUrl"
+          :title="s__('IDE|Go back')"
+          :aria-label="s__('IDE|Go back')"
+          data-container="body"
+          data-placement="right"
+          class="ide-sidebar-link"
+        >
+          <icon
+            :size="16"
+            name="go-back"
+          />
+        </a>
+      </li>
+      <li>
+        <button
+          v-tooltip
+          :class="{
+            active: currentActivityView === $options.activityBarViews.edit
+          }"
+          :title="s__('IDE|Edit')"
+          :aria-label="s__('IDE|Edit')"
+          data-container="body"
+          data-placement="right"
+          type="button"
+          class="ide-sidebar-link js-ide-edit-mode"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.edit)"
+        >
+          <icon
+            name="code"
+          />
+        </button>
+      </li>
+      <li>
+        <button
+          v-tooltip
+          :class="{
+            active: currentActivityView === $options.activityBarViews.review
+          }"
+          :title="s__('IDE|Review')"
+          :aria-label="s__('IDE|Review')"
+          data-container="body"
+          data-placement="right"
+          type="button"
+          class="ide-sidebar-link js-ide-review-mode"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.review)"
+        >
+          <icon
+            name="file-modified"
+          />
+        </button>
+      </li>
+      <li v-show="hasChanges">
+        <button
+          v-tooltip
+          :class="{
+            active: currentActivityView === $options.activityBarViews.commit
+          }"
+          :title="s__('IDE|Commit')"
+          :aria-label="s__('IDE|Commit')"
+          data-container="body"
+          data-placement="right"
+          type="button"
+          class="ide-sidebar-link js-ide-commit-mode"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.commit)"
+        >
+          <icon
+            name="commit"
+          />
+        </button>
+      </li>
+    </ul>
+  </nav>
+</template>
diff --git a/app/assets/javascripts/ide/components/changed_file_icon.vue b/app/assets/javascripts/ide/components/changed_file_icon.vue
index 0c54c992e51..a4e06bbbe3c 100644
--- a/app/assets/javascripts/ide/components/changed_file_icon.vue
+++ b/app/assets/javascripts/ide/components/changed_file_icon.vue
@@ -1,31 +1,88 @@
 <script>
-  import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+import { pluralize } from '~/lib/utils/text_utility';
+import { __, sprintf } from '~/locale';
 
-  export default {
-    components: {
-      icon,
-    },
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
-    },
-    computed: {
-      changedIcon() {
-        return this.file.tempFile ? 'file-addition' : 'file-modified';
-      },
-      changedIconClass() {
-        return `multi-${this.changedIcon}`;
-      },
-    },
-  };
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    showTooltip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showStagedIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    forceModifiedIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    changedIcon() {
+      const suffix = this.file.staged && !this.showStagedIcon ? '-solid' : '';
+      return this.file.tempFile && !this.forceModifiedIcon
+        ? `file-addition${suffix}`
+        : `file-modified${suffix}`;
+    },
+    stagedIcon() {
+      return `${this.changedIcon}-solid`;
+    },
+    changedIconClass() {
+      return `multi-${this.changedIcon} float-left`;
+    },
+    tooltipTitle() {
+      if (!this.showTooltip) return undefined;
+
+      const type = this.file.tempFile ? 'addition' : 'modification';
+
+      if (this.file.changed && !this.file.staged) {
+        return sprintf(__('Unstaged %{type}'), {
+          type,
+        });
+      } else if (!this.file.changed && this.file.staged) {
+        return sprintf(__('Staged %{type}'), {
+          type,
+        });
+      } else if (this.file.changed && this.file.staged) {
+        return sprintf(__('Unstaged and staged %{type}'), {
+          type: pluralize(type),
+        });
+      }
+
+      return undefined;
+    },
+  },
+};
 </script>
 
 <template>
-  <icon
-    :name="changedIcon"
-    :size="12"
-    :css-classes="`ide-file-changed-icon ${changedIconClass}`"
-  />
+  <span
+    v-tooltip
+    :title="tooltipTitle"
+    data-container="body"
+    data-placement="right"
+    class="ide-file-changed-icon"
+  >
+    <icon
+      v-if="file.changed || file.tempFile || file.staged"
+      :name="changedIcon"
+      :size="12"
+      :css-classes="changedIconClass"
+    />
+  </span>
 </template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
index 2cbd982af19..b4f3778d946 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
@@ -1,41 +1,39 @@
 <script>
-  import { mapState } from 'vuex';
-  import { sprintf, __ } from '~/locale';
-  import * as consts from '../../stores/modules/commit/constants';
-  import RadioGroup from './radio_group.vue';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import { sprintf, __ } from '~/locale';
+import * as consts from '../../stores/modules/commit/constants';
+import RadioGroup from './radio_group.vue';
 
-  export default {
-    components: {
-      RadioGroup,
+export default {
+  components: {
+    RadioGroup,
+  },
+  computed: {
+    ...mapState(['currentBranchId', 'changedFiles', 'stagedFiles']),
+    ...mapGetters(['currentProject']),
+    commitToCurrentBranchText() {
+      return sprintf(
+        __('Commit to %{branchName} branch'),
+        { branchName: `<strong class="monospace">${this.currentBranchId}</strong>` },
+        false,
+      );
     },
-    computed: {
-      ...mapState([
-        'currentBranchId',
-      ]),
-      newMergeRequestHelpText() {
-        return sprintf(
-          __('Creates a new branch from %{branchName} and re-directs to create a new merge request'),
-          { branchName: this.currentBranchId },
-        );
-      },
-      commitToCurrentBranchText() {
-        return sprintf(
-          __('Commit to %{branchName} branch'),
-          { branchName: `<strong>${this.currentBranchId}</strong>` },
-          false,
-        );
-      },
-      commitToNewBranchText() {
-        return sprintf(
-          __('Creates a new branch from %{branchName}'),
-          { branchName: this.currentBranchId },
-        );
-      },
+    disableMergeRequestRadio() {
+      return this.changedFiles.length > 0 && this.stagedFiles.length > 0;
     },
-    commitToCurrentBranch: consts.COMMIT_TO_CURRENT_BRANCH,
-    commitToNewBranch: consts.COMMIT_TO_NEW_BRANCH,
-    commitToNewBranchMR: consts.COMMIT_TO_NEW_BRANCH_MR,
-  };
+  },
+  mounted() {
+    if (this.disableMergeRequestRadio) {
+      this.updateCommitAction(consts.COMMIT_TO_CURRENT_BRANCH);
+    }
+  },
+  methods: {
+    ...mapActions('commit', ['updateCommitAction']),
+  },
+  commitToCurrentBranch: consts.COMMIT_TO_CURRENT_BRANCH,
+  commitToNewBranch: consts.COMMIT_TO_NEW_BRANCH,
+  commitToNewBranchMR: consts.COMMIT_TO_NEW_BRANCH_MR,
+};
 </script>
 
 <template>
@@ -53,13 +51,13 @@
       :value="$options.commitToNewBranch"
       :label="__('Create a new branch')"
       :show-input="true"
-      :help-text="commitToNewBranchText"
     />
     <radio-group
+      v-if="currentProject.merge_requests_enabled"
       :value="$options.commitToNewBranchMR"
       :label="__('Create a new branch and merge request')"
       :show-input="true"
-      :help-text="newMergeRequestHelpText"
+      :disabled="disableMergeRequestRadio"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
new file mode 100644
index 00000000000..d0a60d647e5
--- /dev/null
+++ b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
@@ -0,0 +1,36 @@
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  computed: {
+    ...mapState(['lastCommitMsg', 'noChangesStateSvgPath']),
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="!lastCommitMsg"
+    class="multi-file-commit-panel-section ide-commit-empty-state js-empty-state"
+  >
+    <div
+      class="ide-commit-empty-state-container"
+    >
+      <div class="svg-content svg-80">
+        <img :src="noChangesStateSvgPath" />
+      </div>
+      <div class="append-right-default prepend-left-default">
+        <div
+          class="text-content text-center"
+        >
+          <h4>
+            {{ __('No changes') }}
+          </h4>
+          <p>
+            {{ __('Edit files in the editor and commit changes here') }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
new file mode 100644
index 00000000000..14c74687ab4
--- /dev/null
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -0,0 +1,170 @@
+<script>
+import { mapState, mapActions, mapGetters } from 'vuex';
+import { sprintf, __ } from '~/locale';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import CommitMessageField from './message_field.vue';
+import Actions from './actions.vue';
+import SuccessMessage from './success_message.vue';
+import { activityBarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants';
+
+export default {
+  components: {
+    Actions,
+    LoadingButton,
+    CommitMessageField,
+    SuccessMessage,
+  },
+  data() {
+    return {
+      isCompact: true,
+      componentHeight: null,
+    };
+  },
+  computed: {
+    ...mapState(['changedFiles', 'stagedFiles', 'currentActivityView', 'lastCommitMsg']),
+    ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
+    ...mapGetters(['hasChanges']),
+    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
+    overviewText() {
+      return sprintf(
+        __(
+          '<strong>%{changedFilesLength} unstaged</strong> and <strong>%{stagedFilesLength} staged</strong> changes',
+        ),
+        {
+          stagedFilesLength: this.stagedFiles.length,
+          changedFilesLength: this.changedFiles.length,
+        },
+      );
+    },
+  },
+  watch: {
+    currentActivityView() {
+      if (this.lastCommitMsg) {
+        this.isCompact = false;
+      } else {
+        this.isCompact = !(
+          this.currentActivityView === activityBarViews.commit &&
+          window.innerHeight >= MAX_WINDOW_HEIGHT_COMPACT
+        );
+      }
+    },
+    lastCommitMsg() {
+      this.isCompact =
+        this.currentActivityView !== activityBarViews.commit && this.lastCommitMsg === '';
+    },
+  },
+  methods: {
+    ...mapActions(['updateActivityBarView']),
+    ...mapActions('commit', ['updateCommitMessage', 'discardDraft', 'commitChanges']),
+    toggleIsSmall() {
+      this.updateActivityBarView(activityBarViews.commit)
+        .then(() => {
+          this.isCompact = !this.isCompact;
+        })
+        .catch(e => {
+          throw e;
+        });
+    },
+    beforeEnterTransition() {
+      const elHeight = this.isCompact
+        ? this.$refs.formEl && this.$refs.formEl.offsetHeight
+        : this.$refs.compactEl && this.$refs.compactEl.offsetHeight;
+
+      this.componentHeight = elHeight;
+    },
+    enterTransition() {
+      this.$nextTick(() => {
+        const elHeight = this.isCompact
+          ? this.$refs.compactEl && this.$refs.compactEl.offsetHeight
+          : this.$refs.formEl && this.$refs.formEl.offsetHeight;
+
+        this.componentHeight = elHeight;
+      });
+    },
+    afterEndTransition() {
+      this.componentHeight = null;
+    },
+  },
+  activityBarViews,
+};
+</script>
+
+<template>
+  <div
+    :class="{
+      'is-compact': isCompact,
+      'is-full': !isCompact
+    }"
+    :style="{
+      height: componentHeight ? `${componentHeight}px` : null,
+    }"
+    class="multi-file-commit-form"
+  >
+    <transition
+      name="commit-form-slide-up"
+      @before-enter="beforeEnterTransition"
+      @enter="enterTransition"
+      @after-enter="afterEndTransition"
+    >
+      <div
+        v-if="isCompact"
+        ref="compactEl"
+        class="commit-form-compact"
+      >
+        <button
+          :disabled="!hasChanges"
+          type="button"
+          class="btn btn-primary btn-sm btn-block"
+          @click="toggleIsSmall"
+        >
+          {{ __('Commit…') }}
+        </button>
+        <p
+          class="text-center"
+          v-html="overviewText"
+        ></p>
+      </div>
+      <form
+        v-if="!isCompact"
+        ref="formEl"
+        @submit.prevent.stop="commitChanges"
+      >
+        <transition name="fade">
+          <success-message
+            v-show="lastCommitMsg"
+          />
+        </transition>
+        <commit-message-field
+          :text="commitMessage"
+          @input="updateCommitMessage"
+        />
+        <div class="clearfix prepend-top-15">
+          <actions />
+          <loading-button
+            :loading="submitCommitLoading"
+            :disabled="commitButtonDisabled"
+            :label="__('Commit')"
+            container-class="btn btn-success btn-sm float-left"
+            @click="commitChanges"
+          />
+          <button
+            v-if="!discardDraftButtonDisabled"
+            type="button"
+            class="btn btn-default btn-sm float-right"
+            @click="discardDraft"
+          >
+            {{ __('Discard draft') }}
+          </button>
+          <button
+            v-else
+            type="button"
+            class="btn btn-default btn-sm float-right"
+            @click="toggleIsSmall"
+          >
+            {{ __('Collapse') }}
+          </button>
+        </div>
+      </form>
+    </transition>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 453208f3f19..d0fb0e3d99e 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -1,66 +1,151 @@
 <script>
-  import { mapState } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import listItem from './list_item.vue';
-  import listCollapsed from './list_collapsed.vue';
+import { mapActions } from 'vuex';
+import { __, sprintf } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import ListItem from './list_item.vue';
 
-  export default {
-    components: {
-      icon,
-      listItem,
-      listCollapsed,
+export default {
+  components: {
+    Icon,
+    ListItem,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
     },
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      fileList: {
-        type: Array,
-        required: true,
-      },
+    fileList: {
+      type: Array,
+      required: true,
     },
-    computed: {
-      ...mapState([
-        'currentProjectId',
-        'currentBranchId',
-        'rightPanelCollapsed',
-      ]),
-      isCommitInfoShown() {
-        return this.rightPanelCollapsed || this.fileList.length;
-      },
+    iconName: {
+      type: String,
+      required: true,
     },
-    methods: {
-      toggleCollapsed() {
-        this.$emit('toggleCollapsed');
-      },
+    action: {
+      type: String,
+      required: true,
     },
-  };
+    actionBtnText: {
+      type: String,
+      required: true,
+    },
+    actionBtnIcon: {
+      type: String,
+      required: true,
+    },
+    itemActionComponent: {
+      type: String,
+      required: true,
+    },
+    stagedList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    activeFileKey: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    keyPrefix: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    titleText() {
+      return sprintf(__('%{title} changes'), {
+        title: this.title,
+      });
+    },
+    filesLength() {
+      return this.fileList.length;
+    },
+  },
+  methods: {
+    ...mapActions(['stageAllChanges', 'unstageAllChanges']),
+    actionBtnClicked() {
+      this[this.action]();
+    },
+  },
+};
 </script>
 
 <template>
   <div
-    :class="{
-      'multi-file-commit-list': isCommitInfoShown
-    }"
+    class="ide-commit-list-container"
   >
-    <list-collapsed
-      v-if="rightPanelCollapsed"
-    />
-    <template v-else>
-      <ul
-        v-if="fileList.length"
-        class="list-unstyled append-bottom-0"
+    <header
+      class="multi-file-commit-panel-header"
+    >
+      <div
+        class="multi-file-commit-panel-header-title"
+      >
+        <icon
+          v-once
+          :name="iconName"
+          :size="18"
+        />
+        {{ titleText }}
+        <div class="d-flex ml-auto">
+          <button
+            v-tooltip
+            v-show="filesLength"
+            :class="{
+              'd-flex': filesLength
+            }"
+            :title="actionBtnText"
+            type="button"
+            class="btn btn-default ide-staged-action-btn p-0 order-1 align-items-center"
+            data-placement="bottom"
+            data-container="body"
+            data-boundary="viewport"
+            @click="actionBtnClicked"
+          >
+            <icon
+              :name="actionBtnIcon"
+              :size="12"
+              class="ml-auto mr-auto"
+            />
+          </button>
+          <span
+            :class="{
+              'rounded-right': !filesLength
+            }"
+            class="ide-commit-file-count order-0 rounded-left text-center"
+          >
+            {{ filesLength }}
+          </span>
+        </div>
+      </div>
+    </header>
+    <ul
+      v-if="filesLength"
+      class="multi-file-commit-list list-unstyled append-bottom-0"
+    >
+      <li
+        v-for="file in fileList"
+        :key="file.key"
       >
-        <li
-          v-for="file in fileList"
-          :key="file.key"
-        >
-          <list-item
-            :file="file"
-          />
-        </li>
-      </ul>
-    </template>
+        <list-item
+          :file="file"
+          :action-component="itemActionComponent"
+          :key-prefix="keyPrefix"
+          :staged-list="stagedList"
+          :active-file-key="activeFileKey"
+        />
+      </li>
+    </ul>
+    <p
+      v-else
+      class="multi-file-commit-list form-text text-muted"
+    >
+      {{ __('No changes') }}
+    </p>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
index 15918ac9631..d376a004e84 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
@@ -1,35 +1,113 @@
 <script>
-  import { mapGetters } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { sprintf, n__, __ } from '~/locale';
 
-  export default {
-    components: {
-      icon,
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    files: {
+      type: Array,
+      required: true,
     },
-    computed: {
-      ...mapGetters([
-        'addedFiles',
-        'modifiedFiles',
-      ]),
+    iconName: {
+      type: String,
+      required: true,
     },
-  };
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    addedFilesLength() {
+      return this.files.filter(f => f.tempFile).length;
+    },
+    modifiedFilesLength() {
+      return this.files.filter(f => !f.tempFile).length;
+    },
+    addedFilesIconClass() {
+      return this.addedFilesLength ? 'multi-file-addition' : '';
+    },
+    modifiedFilesClass() {
+      return this.modifiedFilesLength ? 'multi-file-modified' : '';
+    },
+    additionsTooltip() {
+      return sprintf(n__('1 %{type} addition', '%{count} %{type} additions', this.addedFilesLength), {
+        type: this.title.toLowerCase(),
+        count: this.addedFilesLength,
+      });
+    },
+    modifiedTooltip() {
+      return sprintf(
+        n__('1 %{type} modification', '%{count} %{type} modifications', this.modifiedFilesLength), {
+          type: this.title.toLowerCase(),
+          count: this.modifiedFilesLength,
+        },
+      );
+    },
+    titleTooltip() {
+      return sprintf(__('%{title} changes'), { title: this.title });
+    },
+    additionIconName() {
+      return this.title.toLowerCase() === 'staged' ? 'file-addition-solid' : 'file-addition';
+    },
+    modifiedIconName() {
+      return this.title.toLowerCase() === 'staged' ? 'file-modified-solid' : 'file-modified';
+    },
+  },
+};
 </script>
 
 <template>
   <div
     class="multi-file-commit-list-collapsed text-center"
   >
-    <icon
-      name="file-addition"
-      :size="18"
-      css-classes="multi-file-addition append-bottom-10"
-    />
-    {{ addedFiles.length }}
-    <icon
-      name="file-modified"
-      :size="18"
-      css-classes="multi-file-modified prepend-top-10 append-bottom-10"
-    />
-    {{ modifiedFiles.length }}
+    <div
+      v-tooltip
+      :title="titleTooltip"
+      data-container="body"
+      data-placement="left"
+      class="append-bottom-15"
+    >
+      <icon
+        v-once
+        :name="iconName"
+        :size="18"
+      />
+    </div>
+    <div
+      v-tooltip
+      :title="additionsTooltip"
+      data-container="body"
+      data-placement="left"
+      class="append-bottom-10"
+    >
+      <icon
+        :name="additionIconName"
+        :size="18"
+        :css-classes="addedFilesIconClass"
+      />
+    </div>
+    {{ addedFilesLength }}
+    <div
+      v-tooltip
+      :title="modifiedTooltip"
+      data-container="body"
+      data-placement="left"
+      class="prepend-top-10 append-bottom-10"
+    >
+      <icon
+        :name="modifiedIconName"
+        :size="18"
+        :css-classes="modifiedFilesClass"
+      />
+    </div>
+    {{ modifiedFilesLength }}
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 18934af004a..ee21eeda3cd 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -1,60 +1,117 @@
 <script>
-  import { mapActions } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import router from '../../ide_router';
+import { mapActions } from 'vuex';
+import tooltip from '~/vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+import StageButton from './stage_button.vue';
+import UnstageButton from './unstage_button.vue';
+import { viewerTypes } from '../../constants';
 
-  export default {
-    components: {
-      icon,
-    },
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
-    },
-    computed: {
-      iconName() {
-        return this.file.tempFile ? 'file-addition' : 'file-modified';
-      },
-      iconClass() {
-        return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
-      },
-    },
-    methods: {
-      ...mapActions([
-        'discardFileChanges',
-        'updateViewer',
-      ]),
-      openFileInEditor(file) {
-        this.updateViewer('diff');
-
-        router.push(`/project${file.url}`);
-      },
+export default {
+  components: {
+    Icon,
+    StageButton,
+    UnstageButton,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    actionComponent: {
+      type: String,
+      required: true,
+    },
+    keyPrefix: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    stagedList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    activeFileKey: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    iconName() {
+      const prefix = this.stagedList ? '-solid' : '';
+      return this.file.tempFile ? `file-addition${prefix}` : `file-modified${prefix}`;
+    },
+    iconClass() {
+      return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
     },
-  };
+    fullKey() {
+      return `${this.keyPrefix}-${this.file.key}`;
+    },
+    isActive() {
+      return this.activeFileKey === this.fullKey;
+    },
+    tooltipTitle() {
+      return this.file.path === this.file.name ? '' : this.file.path;
+    },
+  },
+  methods: {
+    ...mapActions([
+      'discardFileChanges',
+      'updateViewer',
+      'openPendingTab',
+      'unstageChange',
+      'stageChange',
+    ]),
+    openFileInEditor() {
+      return this.openPendingTab({
+        file: this.file,
+        keyPrefix: this.keyPrefix,
+      }).then(changeViewer => {
+        if (changeViewer) {
+          this.updateViewer(viewerTypes.diff);
+        }
+      });
+    },
+    fileAction() {
+      if (this.file.staged) {
+        this.unstageChange(this.file.path);
+      } else {
+        this.stageChange(this.file.path);
+      }
+    },
+  },
+};
 </script>
 
 <template>
-  <div class="multi-file-commit-list-item">
-    <button
-      type="button"
-      class="multi-file-commit-list-path"
-      @click="openFileInEditor(file)">
-      <span class="multi-file-commit-list-file-path">
+  <div class="multi-file-commit-list-item position-relative">
+    <div
+      v-tooltip
+      :title="tooltipTitle"
+      :class="{
+        'is-active': isActive
+      }"
+      class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0"
+      role="button"
+      @dblclick="fileAction"
+      @click="openFileInEditor"
+    >
+      <span class="multi-file-commit-list-file-path d-flex align-items-center">
         <icon
           :name="iconName"
           :size="16"
           :css-classes="iconClass"
-        />{{ file.path }}
+        />{{ file.name }}
       </span>
-    </button>
-    <button
-      type="button"
-      class="btn btn-blank multi-file-discard-btn"
-      @click="discardFileChanges(file.path)"
-    >
-      Discard
-    </button>
+    </div>
+    <component
+      :is="actionComponent"
+      :path="file.path"
+      class="d-flex position-absolute"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
new file mode 100644
index 00000000000..40496c80a46
--- /dev/null
+++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
@@ -0,0 +1,130 @@
+<script>
+import { __, sprintf } from '../../../locale';
+import Icon from '../../../vue_shared/components/icon.vue';
+import popover from '../../../vue_shared/directives/popover';
+import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '../../constants';
+
+export default {
+  directives: {
+    popover,
+  },
+  components: {
+    Icon,
+  },
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      scrollTop: 0,
+      isFocused: false,
+    };
+  },
+  computed: {
+    allLines() {
+      return this.text.split('\n').map((line, i) => ({
+        text: line.substr(0, this.getLineLength(i)) || ' ',
+        highlightedText: line.substr(this.getLineLength(i)),
+      }));
+    },
+  },
+  methods: {
+    handleScroll() {
+      if (this.$refs.textarea) {
+        this.$nextTick(() => {
+          this.scrollTop = this.$refs.textarea.scrollTop;
+        });
+      }
+    },
+    getLineLength(i) {
+      return i === 0 ? MAX_TITLE_LENGTH : MAX_BODY_LENGTH;
+    },
+    onInput(e) {
+      this.$emit('input', e.target.value);
+    },
+    updateIsFocused(isFocused) {
+      this.isFocused = isFocused;
+    },
+  },
+  popoverOptions: {
+    trigger: 'hover',
+    placement: 'top',
+    content: sprintf(
+      __(`
+        The character highlighter helps you keep the subject line to %{titleLength} characters
+        and wrap the body at %{bodyLength} so they are readable in git.
+      `),
+      { titleLength: MAX_TITLE_LENGTH, bodyLength: MAX_BODY_LENGTH },
+    ),
+  },
+};
+</script>
+
+<template>
+  <fieldset class="common-note-form ide-commit-message-field">
+    <div
+      :class="{
+        'is-focused': isFocused
+      }"
+      class="md-area"
+    >
+      <div
+        v-once
+        class="md-header"
+      >
+        <ul class="nav-links">
+          <li>
+            {{ __('Commit Message') }}
+            <span
+              v-popover="$options.popoverOptions"
+              class="form-text text-muted prepend-left-10"
+            >
+              <icon
+                name="question"
+              />
+            </span>
+          </li>
+        </ul>
+      </div>
+      <div class="ide-commit-message-textarea-container">
+        <div class="ide-commit-message-highlights-container">
+          <div
+            :style="{
+              transform: `translate3d(0, ${-scrollTop}px, 0)`
+            }"
+            class="note-textarea highlights monospace"
+          >
+            <div
+              v-for="(line, index) in allLines"
+              :key="index"
+            >
+              <span
+                v-text="line.text"
+              >
+              </span><mark
+                v-show="line.highlightedText"
+                v-text="line.highlightedText"
+              >
+              </mark>
+            </div>
+          </div>
+        </div>
+        <textarea
+          ref="textarea"
+          :placeholder="__('Write a commit message...')"
+          :value="text"
+          class="note-textarea ide-commit-message-textarea"
+          name="commit-message"
+          @scroll="handleScroll"
+          @input="onInput"
+          @focus="updateIsFocused(true)"
+          @blur="updateIsFocused(false)"
+        >
+        </textarea>
+      </div>
+    </div>
+  </fieldset>
+</template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
index 4310d762c78..35ab3fd11df 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
@@ -1,82 +1,78 @@
 <script>
-  import { mapActions, mapState, mapGetters } from 'vuex';
-  import tooltip from '~/vue_shared/directives/tooltip';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import { __ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
     },
-    props: {
-      value: {
-        type: String,
-        required: true,
-      },
-      label: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      checked: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      showInput: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      helpText: {
-        type: String,
-        required: false,
-        default: null,
-      },
+    label: {
+      type: String,
+      required: false,
+      default: null,
     },
-    computed: {
-      ...mapState('commit', [
-        'commitAction',
-      ]),
-      ...mapGetters('commit', [
-        'newBranchName',
-      ]),
+    checked: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    methods: {
-      ...mapActions('commit', [
-        'updateCommitAction',
-        'updateBranchName',
-      ]),
+    showInput: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-  };
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState('commit', ['commitAction']),
+    ...mapGetters('commit', ['newBranchName']),
+    tooltipTitle() {
+      return this.disabled
+        ? __('This option is disabled while you still have unstaged changes')
+        : '';
+    },
+  },
+  methods: {
+    ...mapActions('commit', ['updateCommitAction', 'updateBranchName']),
+  },
+};
 </script>
 
 <template>
   <fieldset>
-    <label>
+    <label
+      v-tooltip
+      :title="tooltipTitle"
+      :class="{
+        'is-disabled': disabled
+      }"
+    >
       <input
+        :value="value"
+        :checked="commitAction === value"
+        :disabled="disabled"
         type="radio"
         name="commit-action"
-        :value="value"
         @change="updateCommitAction($event.target.value)"
-        :checked="checked"
-        v-once
       />
       <span class="prepend-left-10">
-        <template v-if="label">
-          {{ label }}
-        </template>
-        <slot v-else></slot>
         <span
-          v-if="helpText"
-          v-tooltip
-          class="help-block inline"
-          :title="helpText"
+          v-if="label"
+          class="ide-radio-label"
         >
-          <i
-            class="fa fa-question-circle"
-            aria-hidden="true"
-          >
-          </i>
+          {{ label }}
         </span>
+        <slot v-else></slot>
       </span>
     </label>
     <div
@@ -84,9 +80,9 @@
       class="ide-commit-new-branch"
     >
       <input
-        type="text"
-        class="form-control"
         :placeholder="newBranchName"
+        type="text"
+        class="form-control monospace"
         @input="updateBranchName($event.target.value)"
       />
     </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
new file mode 100644
index 00000000000..7014b9f605e
--- /dev/null
+++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
@@ -0,0 +1,75 @@
+<script>
+import { mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    ...mapActions(['stageChange', 'discardFileChanges']),
+  },
+};
+</script>
+
+<template>
+  <div
+    v-once
+    class="multi-file-discard-btn dropdown"
+  >
+    <button
+      v-tooltip
+      :aria-label="__('Stage changes')"
+      :title="__('Stage changes')"
+      type="button"
+      class="btn btn-blank append-right-5 d-flex align-items-center"
+      data-container="body"
+      data-boundary="viewport"
+      data-placement="bottom"
+      @click.stop="stageChange(path)"
+    >
+      <icon
+        :size="12"
+        name="mobile-issue-close"
+      />
+    </button>
+    <button
+      v-tooltip
+      :title="__('More actions')"
+      type="button"
+      class="btn btn-blank d-flex align-items-center"
+      data-container="body"
+      data-boundary="viewport"
+      data-placement="bottom"
+      data-toggle="dropdown"
+      data-display="static"
+    >
+      <icon
+        :size="12"
+        name="more"
+      />
+    </button>
+    <div class="dropdown-menu dropdown-menu-right">
+      <ul>
+        <li>
+          <button
+            type="button"
+            @click.stop="discardFileChanges(path)"
+          >
+            {{ __('Discard changes') }}
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
new file mode 100644
index 00000000000..a6df91b79c2
--- /dev/null
+++ b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
@@ -0,0 +1,33 @@
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  computed: {
+    ...mapState(['lastCommitMsg', 'committedStateSvgPath']),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-panel-success-message"
+    aria-live="assertive"
+  >
+    <div class="svg-content svg-80">
+      <img
+        :src="committedStateSvgPath"
+        alt=""
+      />
+    </div>
+    <div class="append-right-default prepend-left-default">
+      <div
+        class="text-content text-center"
+      >
+        <h4>
+          {{ __('All changes are committed') }}
+        </h4>
+        <p v-html="lastCommitMsg"></p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
new file mode 100644
index 00000000000..9cec73ec00e
--- /dev/null
+++ b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
@@ -0,0 +1,47 @@
+<script>
+import { mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    ...mapActions(['unstageChange']),
+  },
+};
+</script>
+
+<template>
+  <div
+    v-once
+    class="multi-file-discard-btn"
+  >
+    <button
+      v-tooltip
+      :aria-label="__('Unstage changes')"
+      :title="__('Unstage changes')"
+      type="button"
+      class="btn btn-blank d-flex align-items-center"
+      data-container="body"
+      data-boundary="viewport"
+      data-placement="bottom"
+      @click="unstageChange(path)"
+    >
+      <icon
+        :size="12"
+        name="history"
+      />
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
index 170347881e0..95598c9aca6 100644
--- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
+++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
@@ -1,83 +1,70 @@
 <script>
-  import Icon from '~/vue_shared/components/icon.vue';
+import { __, sprintf } from '~/locale';
+import { viewerTypes } from '../constants';
 
-  export default {
-    components: {
-      Icon,
+export default {
+  props: {
+    viewer: {
+      type: String,
+      required: true,
     },
-    props: {
-      hasChanges: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      viewer: {
-        type: String,
-        required: true,
-      },
-      showShadow: {
-        type: Boolean,
-        required: true,
-      },
+    mergeRequestId: {
+      type: Number,
+      required: true,
     },
-    methods: {
-      changeMode(mode) {
-        this.$emit('click', mode);
-      },
+  },
+  computed: {
+    mergeReviewLine() {
+      return sprintf(__('Reviewing (merge request !%{mergeRequestId})'), {
+        mergeRequestId: this.mergeRequestId,
+      });
     },
-  };
+  },
+  methods: {
+    changeMode(mode) {
+      this.$emit('click', mode);
+    },
+  },
+  viewerTypes,
+};
 </script>
 
 <template>
   <div
     class="dropdown"
-    :class="{
-      shadow: showShadow,
-    }"
   >
     <button
       type="button"
-      class="btn btn-primary btn-sm"
-      :class="{
-        'btn-inverted': hasChanges,
-      }"
+      class="btn btn-link"
       data-toggle="dropdown"
     >
-      <template v-if="viewer === 'editor'">
-        {{ __('Editing') }}
-      </template>
-      <template v-else>
-        {{ __('Reviewing') }}
-      </template>
-      <icon
-        name="angle-down"
-        :size="12"
-        css-classes="caret-down"
-      />
+      {{ __('Edit') }}
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
       <ul>
         <li>
           <a
-            href="#"
-            @click.prevent="changeMode('editor')"
             :class="{
-              'is-active': viewer === 'editor',
+              'is-active': viewer === $options.viewerTypes.mr,
             }"
+            href="#"
+            @click.prevent="changeMode($options.viewerTypes.mr)"
           >
-            <strong class="dropdown-menu-inner-title">{{ __('Editing') }}</strong>
+            <strong class="dropdown-menu-inner-title">
+              {{ mergeReviewLine }}
+            </strong>
             <span class="dropdown-menu-inner-content">
-              {{ __('View and edit lines') }}
+              {{ __('Compare changes with the merge request target branch') }}
             </span>
           </a>
         </li>
         <li>
           <a
-            href="#"
-            @click.prevent="changeMode('diff')"
             :class="{
-              'is-active': viewer === 'diff',
+              'is-active': viewer === $options.viewerTypes.diff,
             }"
+            href="#"
+            @click.prevent="changeMode($options.viewerTypes.diff)"
           >
             <strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong>
             <span class="dropdown-menu-inner-content">
diff --git a/app/assets/javascripts/ide/components/external_link.vue b/app/assets/javascripts/ide/components/external_link.vue
new file mode 100644
index 00000000000..e24fe5bbccb
--- /dev/null
+++ b/app/assets/javascripts/ide/components/external_link.vue
@@ -0,0 +1,41 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    showButtons() {
+      return this.file.permalink;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="showButtons"
+    class="pull-right ide-btn-group"
+  >
+    <a
+      :href="file.permalink"
+      :title="s__('IDE|Open in file view')"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <span class="vertical-align-middle">Open in file view</span>
+      <icon
+        :size="16"
+        name="external-link"
+        css-classes="vertical-align-middle space-right"
+      />
+    </a>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
new file mode 100644
index 00000000000..0ba33053717
--- /dev/null
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -0,0 +1,243 @@
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import VirtualList from 'vue-virtual-scroll-list';
+import Item from './item.vue';
+import router from '../../ide_router';
+import {
+  MAX_FILE_FINDER_RESULTS,
+  FILE_FINDER_ROW_HEIGHT,
+  FILE_FINDER_EMPTY_ROW_HEIGHT,
+} from '../../constants';
+import {
+  UP_KEY_CODE,
+  DOWN_KEY_CODE,
+  ENTER_KEY_CODE,
+  ESC_KEY_CODE,
+} from '../../../lib/utils/keycodes';
+
+export default {
+  components: {
+    Item,
+    VirtualList,
+  },
+  data() {
+    return {
+      focusedIndex: 0,
+      searchText: '',
+      mouseOver: false,
+      cancelMouseOver: false,
+    };
+  },
+  computed: {
+    ...mapGetters(['allBlobs']),
+    ...mapState(['fileFindVisible', 'loading']),
+    filteredBlobs() {
+      const searchText = this.searchText.trim();
+
+      if (searchText === '') {
+        return this.allBlobs.slice(0, MAX_FILE_FINDER_RESULTS);
+      }
+
+      return fuzzaldrinPlus.filter(this.allBlobs, searchText, {
+        key: 'path',
+        maxResults: MAX_FILE_FINDER_RESULTS,
+      });
+    },
+    filteredBlobsLength() {
+      return this.filteredBlobs.length;
+    },
+    listShowCount() {
+      return this.filteredBlobsLength ? Math.min(this.filteredBlobsLength, 5) : 1;
+    },
+    listHeight() {
+      return this.filteredBlobsLength ? FILE_FINDER_ROW_HEIGHT : FILE_FINDER_EMPTY_ROW_HEIGHT;
+    },
+    showClearInputButton() {
+      return this.searchText.trim() !== '';
+    },
+  },
+  watch: {
+    fileFindVisible() {
+      this.$nextTick(() => {
+        if (!this.fileFindVisible) {
+          this.searchText = '';
+        } else {
+          this.focusedIndex = 0;
+
+          if (this.$refs.searchInput) {
+            this.$refs.searchInput.focus();
+          }
+        }
+      });
+    },
+    searchText() {
+      this.focusedIndex = 0;
+    },
+    focusedIndex() {
+      if (!this.mouseOver) {
+        this.$nextTick(() => {
+          const el = this.$refs.virtualScrollList.$el;
+          const scrollTop = this.focusedIndex * FILE_FINDER_ROW_HEIGHT;
+          const bottom = this.listShowCount * FILE_FINDER_ROW_HEIGHT;
+
+          if (this.focusedIndex === 0) {
+            // if index is the first index, scroll straight to start
+            el.scrollTop = 0;
+          } else if (this.focusedIndex === this.filteredBlobsLength - 1) {
+            // if index is the last index, scroll to the end
+            el.scrollTop = this.filteredBlobsLength * FILE_FINDER_ROW_HEIGHT;
+          } else if (scrollTop >= bottom + el.scrollTop) {
+            // if element is off the bottom of the scroll list, scroll down one item
+            el.scrollTop = scrollTop - bottom + FILE_FINDER_ROW_HEIGHT;
+          } else if (scrollTop < el.scrollTop) {
+            // if element is off the top of the scroll list, scroll up one item
+            el.scrollTop = scrollTop;
+          }
+        });
+      }
+    },
+  },
+  methods: {
+    ...mapActions(['toggleFileFinder']),
+    clearSearchInput() {
+      this.searchText = '';
+
+      this.$nextTick(() => {
+        this.$refs.searchInput.focus();
+      });
+    },
+    onKeydown(e) {
+      switch (e.keyCode) {
+        case UP_KEY_CODE:
+          e.preventDefault();
+          this.mouseOver = false;
+          this.cancelMouseOver = true;
+          if (this.focusedIndex > 0) {
+            this.focusedIndex -= 1;
+          } else {
+            this.focusedIndex = this.filteredBlobsLength - 1;
+          }
+          break;
+        case DOWN_KEY_CODE:
+          e.preventDefault();
+          this.mouseOver = false;
+          this.cancelMouseOver = true;
+          if (this.focusedIndex < this.filteredBlobsLength - 1) {
+            this.focusedIndex += 1;
+          } else {
+            this.focusedIndex = 0;
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    onKeyup(e) {
+      switch (e.keyCode) {
+        case ENTER_KEY_CODE:
+          this.openFile(this.filteredBlobs[this.focusedIndex]);
+          break;
+        case ESC_KEY_CODE:
+          this.toggleFileFinder(false);
+          break;
+        default:
+          break;
+      }
+    },
+    openFile(file) {
+      this.toggleFileFinder(false);
+      router.push(`/project${file.url}`);
+    },
+    onMouseOver(index) {
+      if (!this.cancelMouseOver) {
+        this.mouseOver = true;
+        this.focusedIndex = index;
+      }
+    },
+    onMouseMove(index) {
+      this.cancelMouseOver = false;
+      this.onMouseOver(index);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="ide-file-finder-overlay"
+    @mousedown.self="toggleFileFinder(false)"
+  >
+    <div
+      class="dropdown-menu diff-file-changes ide-file-finder show"
+    >
+      <div class="dropdown-input">
+        <input
+          ref="searchInput"
+          :placeholder="__('Search files')"
+          v-model="searchText"
+          type="search"
+          class="dropdown-input-field"
+          autocomplete="off"
+          @keydown="onKeydown($event)"
+          @keyup="onKeyup($event)"
+        />
+        <i
+          :class="{
+            hidden: showClearInputButton
+          }"
+          aria-hidden="true"
+          class="fa fa-search dropdown-input-search"
+        ></i>
+        <i
+          :aria-label="__('Clear search input')"
+          :class="{
+            show: showClearInputButton
+          }"
+          role="button"
+          class="fa fa-times dropdown-input-clear"
+          @click="clearSearchInput"
+        ></i>
+      </div>
+      <div>
+        <virtual-list
+          ref="virtualScrollList"
+          :size="listHeight"
+          :remain="listShowCount"
+          wtag="ul"
+        >
+          <template v-if="filteredBlobsLength">
+            <li
+              v-for="(file, index) in filteredBlobs"
+              :key="file.key"
+            >
+              <item
+                :file="file"
+                :search-text="searchText"
+                :focused="index === focusedIndex"
+                :index="index"
+                class="disable-hover"
+                @click="openFile"
+                @mouseover="onMouseOver"
+                @mousemove="onMouseMove"
+              />
+            </li>
+          </template>
+          <li
+            v-else
+            class="dropdown-menu-empty-item"
+          >
+            <div class="append-right-default prepend-left-default prepend-top-8 append-bottom-8">
+              <template v-if="loading">
+                {{ __('Loading...') }}
+              </template>
+              <template v-else>
+                {{ __('No files found.') }}
+              </template>
+            </div>
+          </li>
+        </virtual-list>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
new file mode 100644
index 00000000000..f5252ce7706
--- /dev/null
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -0,0 +1,113 @@
+<script>
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import FileIcon from '../../../vue_shared/components/file_icon.vue';
+import ChangedFileIcon from '../changed_file_icon.vue';
+
+const MAX_PATH_LENGTH = 60;
+
+export default {
+  components: {
+    ChangedFileIcon,
+    FileIcon,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    focused: {
+      type: Boolean,
+      required: true,
+    },
+    searchText: {
+      type: String,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    pathWithEllipsis() {
+      const { path } = this.file;
+
+      return path.length < MAX_PATH_LENGTH
+        ? path
+        : `...${path.substr(path.length - MAX_PATH_LENGTH)}`;
+    },
+    nameSearchTextOccurences() {
+      return fuzzaldrinPlus.match(this.file.name, this.searchText);
+    },
+    pathSearchTextOccurences() {
+      return fuzzaldrinPlus.match(this.pathWithEllipsis, this.searchText);
+    },
+  },
+  methods: {
+    clickRow() {
+      this.$emit('click', this.file);
+    },
+    mouseOverRow() {
+      this.$emit('mouseover', this.index);
+    },
+    mouseMove() {
+      this.$emit('mousemove', this.index);
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    :class="{
+      'is-focused': focused,
+    }"
+    type="button"
+    class="diff-changed-file"
+    @click.prevent="clickRow"
+    @mouseover="mouseOverRow"
+    @mousemove="mouseMove"
+  >
+    <file-icon
+      :file-name="file.name"
+      :size="16"
+      css-classes="diff-file-changed-icon append-right-8"
+    />
+    <span class="diff-changed-file-content append-right-8">
+      <strong
+        class="diff-changed-file-name"
+      >
+        <span
+          v-for="(char, index) in file.name.split('')"
+          :key="index + char"
+          :class="{
+            highlighted: nameSearchTextOccurences.indexOf(index) >= 0,
+          }"
+          v-text="char"
+        >
+        </span>
+      </strong>
+      <span
+        class="diff-changed-file-path prepend-top-5"
+      >
+        <span
+          v-for="(char, index) in pathWithEllipsis.split('')"
+          :key="index + char"
+          :class="{
+            highlighted: pathSearchTextOccurences.indexOf(index) >= 0,
+          }"
+          v-text="char"
+        >
+        </span>
+      </span>
+    </span>
+    <span
+      v-if="file.changed || file.tempFile"
+      class="diff-changed-stats"
+    >
+      <changed-file-icon
+        :file="file"
+      />
+    </span>
+  </button>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 015e750525a..f5f7f967a92 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -1,111 +1,134 @@
 <script>
-  import { mapState, mapGetters } from 'vuex';
-  import ideSidebar from './ide_side_bar.vue';
-  import ideContextbar from './ide_context_bar.vue';
-  import repoTabs from './repo_tabs.vue';
-  import repoFileButtons from './repo_file_buttons.vue';
-  import ideStatusBar from './ide_status_bar.vue';
-  import repoEditor from './repo_editor.vue';
+import Mousetrap from 'mousetrap';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import IdeSidebar from './ide_side_bar.vue';
+import RepoTabs from './repo_tabs.vue';
+import IdeStatusBar from './ide_status_bar.vue';
+import RepoEditor from './repo_editor.vue';
+import FindFile from './file_finder/index.vue';
+import RightPane from './panes/right.vue';
 
-  export default {
-    components: {
-      ideSidebar,
-      ideContextbar,
-      repoTabs,
-      repoFileButtons,
-      ideStatusBar,
-      repoEditor,
-    },
-    props: {
-      emptyStateSvgPath: {
-        type: String,
-        required: true,
-      },
-      noChangesStateSvgPath: {
-        type: String,
-        required: true,
-      },
-      committedStateSvgPath: {
-        type: String,
-        required: true,
-      },
-    },
-    computed: {
-      ...mapState(['changedFiles', 'openFiles', 'viewer']),
-      ...mapGetters(['activeFile', 'hasChanges']),
-    },
-    mounted() {
-      const returnValue = 'Are you sure you want to lose unsaved changes?';
-      window.onbeforeunload = e => {
-        if (!this.changedFiles.length) return undefined;
+const originalStopCallback = Mousetrap.stopCallback;
+
+export default {
+  components: {
+    IdeSidebar,
+    RepoTabs,
+    IdeStatusBar,
+    RepoEditor,
+    FindFile,
+    RightPane,
+  },
+  computed: {
+    ...mapState([
+      'changedFiles',
+      'openFiles',
+      'viewer',
+      'currentMergeRequestId',
+      'fileFindVisible',
+      'emptyStateSvgPath',
+      'currentProjectId',
+    ]),
+    ...mapGetters(['activeFile', 'hasChanges']),
+  },
+  mounted() {
+    const returnValue = 'Are you sure you want to lose unsaved changes?';
+    window.onbeforeunload = e => {
+      if (!this.changedFiles.length) return undefined;
+
+      Object.assign(e, {
+        returnValue,
+      });
+      return returnValue;
+    };
+
+    Mousetrap.bind(['t', 'command+p', 'ctrl+p'], e => {
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
 
-        Object.assign(e, {
-          returnValue,
-        });
-        return returnValue;
-      };
+      this.toggleFileFinder(!this.fileFindVisible);
+    });
+
+    Mousetrap.stopCallback = (e, el, combo) => this.mousetrapStopCallback(e, el, combo);
+  },
+  methods: {
+    ...mapActions(['toggleFileFinder']),
+    mousetrapStopCallback(e, el, combo) {
+      if (
+        (combo === 't' && el.classList.contains('dropdown-input-field')) ||
+        el.classList.contains('inputarea')
+      ) {
+        return true;
+      } else if (combo === 'command+p' || combo === 'ctrl+p') {
+        return false;
+      }
+
+      return originalStopCallback(e, el, combo);
     },
-  };
+  },
+};
 </script>
 
 <template>
-  <div
-    class="ide-view"
-  >
-    <ide-sidebar />
+  <article class="ide">
     <div
-      class="multi-file-edit-pane"
+      class="ide-view"
     >
-      <template
-        v-if="activeFile"
-      >
-        <repo-tabs
-          :files="openFiles"
-          :viewer="viewer"
-          :has-changes="hasChanges"
-        />
-        <repo-editor
-          class="multi-file-edit-pane-content"
-          :file="activeFile"
-        />
-        <repo-file-buttons
-          :file="activeFile"
-        />
-        <ide-status-bar
-          :file="activeFile"
-        />
-      </template>
-      <template
-        v-else
+      <find-file
+        v-show="fileFindVisible"
+      />
+      <ide-sidebar />
+      <div
+        class="multi-file-edit-pane"
       >
-        <div
-          v-once
-          class="ide-empty-state"
+        <template
+          v-if="activeFile"
         >
-          <div class="row js-empty-state">
-            <div class="col-xs-12">
-              <div class="svg-content svg-250">
-                <img :src="emptyStateSvgPath" />
+          <repo-tabs
+            :active-file="activeFile"
+            :files="openFiles"
+            :viewer="viewer"
+            :has-changes="hasChanges"
+            :merge-request-id="currentMergeRequestId"
+          />
+          <repo-editor
+            :file="activeFile"
+            class="multi-file-edit-pane-content"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <div
+            v-once
+            class="ide-empty-state"
+          >
+            <div class="row js-empty-state">
+              <div class="col-12">
+                <div class="svg-content svg-250">
+                  <img :src="emptyStateSvgPath" />
+                </div>
               </div>
-            </div>
-            <div class="col-xs-12">
-              <div class="text-content text-center">
-                <h4>
-                  Welcome to the GitLab IDE
-                </h4>
-                <p>
-                  You can select a file in the left sidebar to begin
-                  editing and use the right sidebar to commit your changes.
-                </p>
+              <div class="col-12">
+                <div class="text-content text-center">
+                  <h4>
+                    Welcome to the GitLab IDE
+                  </h4>
+                  <p>
+                    Select a file from the left sidebar to begin editing.
+                    Afterwards, you'll be able to commit your changes.
+                  </p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </template>
+        </template>
+      </div>
+      <right-pane
+        v-if="currentProjectId"
+      />
     </div>
-    <ide-contextbar
-      :no-changes-state-svg-path="noChangesStateSvgPath"
-      :committed-state-svg-path="committedStateSvgPath"
-    />
-  </div>
+    <ide-status-bar :file="activeFile"/>
+  </article>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_context_bar.vue b/app/assets/javascripts/ide/components/ide_context_bar.vue
deleted file mode 100644
index 79a83b47994..00000000000
--- a/app/assets/javascripts/ide/components/ide_context_bar.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script>
-import { mapActions, mapGetters, mapState } from 'vuex';
-import icon from '~/vue_shared/components/icon.vue';
-import panelResizer from '~/vue_shared/components/panel_resizer.vue';
-import repoCommitSection from './repo_commit_section.vue';
-import ResizablePanel from './resizable_panel.vue';
-
-export default {
-  components: {
-    repoCommitSection,
-    icon,
-    panelResizer,
-    ResizablePanel,
-  },
-  props: {
-    noChangesStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    committedStateSvgPath: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['changedFiles', 'rightPanelCollapsed']),
-    ...mapGetters(['currentIcon']),
-  },
-  methods: {
-    ...mapActions(['setPanelCollapsedStatus']),
-  },
-};
-</script>
-
-<template>
-  <resizable-panel
-    :collapsible="true"
-    :initial-width="340"
-    side="right"
-  >
-    <div
-      class="multi-file-commit-panel-section"
-    >
-      <header
-        class="multi-file-commit-panel-header"
-        :class="{
-          'is-collapsed': rightPanelCollapsed,
-        }"
-      >
-        <div
-          class="multi-file-commit-panel-header-title"
-          v-if="!rightPanelCollapsed"
-        >
-          <div
-            v-if="changedFiles.length"
-          >
-            <icon
-              name="list-bulleted"
-              :size="18"
-            />
-            Staged
-          </div>
-        </div>
-        <button
-          type="button"
-          class="btn btn-transparent multi-file-commit-panel-collapse-btn"
-          @click.stop="setPanelCollapsedStatus({
-            side: 'right',
-            collapsed: !rightPanelCollapsed,
-          })"
-        >
-          <icon
-            :name="currentIcon"
-            :size="18"
-          />
-        </button>
-      </header>
-      <repo-commit-section
-        :no-changes-state-svg-path="noChangesStateSvgPath"
-        :committed-state-svg-path="committedStateSvgPath"
-      />
-    </div>
-  </resizable-panel>
-</template>
diff --git a/app/assets/javascripts/ide/components/ide_external_links.vue b/app/assets/javascripts/ide/components/ide_external_links.vue
deleted file mode 100644
index c6f6e0d2348..00000000000
--- a/app/assets/javascripts/ide/components/ide_external_links.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-import icon from '~/vue_shared/components/icon.vue';
-
-export default {
-  components: {
-    icon,
-  },
-  props: {
-    projectUrl: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    goBackUrl() {
-      return document.referrer || this.projectUrl;
-    },
-  },
-};
-</script>
-
-<template>
-  <nav
-    class="ide-external-links"
-    v-once
-  >
-    <p>
-      <a
-        :href="goBackUrl"
-        class="ide-sidebar-link"
-      >
-        <icon
-          :size="16"
-          class="append-right-8"
-          name="go-back"
-        />
-        <span class="ide-external-links-text">
-          {{ s__('Go back') }}
-        </span>
-      </a>
-    </p>
-  </nav>
-</template>
diff --git a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue b/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
deleted file mode 100644
index eb2749e6151..00000000000
--- a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-  import icon from '~/vue_shared/components/icon.vue';
-  import repoTree from './ide_repo_tree.vue';
-  import newDropdown from './new_dropdown/index.vue';
-
-  export default {
-    components: {
-      repoTree,
-      icon,
-      newDropdown,
-    },
-    props: {
-      projectId: {
-        type: String,
-        required: true,
-      },
-      branch: {
-        type: Object,
-        required: true,
-      },
-    },
-  };
-</script>
-
-<template>
-  <div class="branch-container">
-    <div class="branch-header">
-      <div class="branch-header-title str-truncated ref-name">
-        <icon
-          name="branch"
-          :size="12"
-        />
-        {{ branch.name }}
-      </div>
-      <div class="branch-header-btns">
-        <new-dropdown
-          :project-id="projectId"
-          :branch="branch.name"
-          path=""
-        />
-      </div>
-    </div>
-    <repo-tree
-      :tree="branch.tree"
-    />
-  </div>
-</template>
diff --git a/app/assets/javascripts/ide/components/ide_project_tree.vue b/app/assets/javascripts/ide/components/ide_project_tree.vue
deleted file mode 100644
index a6f40286ac1..00000000000
--- a/app/assets/javascripts/ide/components/ide_project_tree.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script>
-import ProjectAvatarImage from '~/vue_shared/components/project_avatar/image.vue';
-import Identicon from '../../vue_shared/components/identicon.vue';
-import BranchesTree from './ide_project_branches_tree.vue';
-import ExternalLinks from './ide_external_links.vue';
-
-export default {
-  components: {
-    BranchesTree,
-    ExternalLinks,
-    ProjectAvatarImage,
-    Identicon,
-  },
-  props: {
-    project: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="projects-sidebar">
-    <div class="context-header">
-      <a
-        :title="project.name"
-        :href="project.web_url"
-      >
-        <div
-          v-if="project.avatar_url"
-          class="avatar-container s40 project-avatar"
-        >
-          <project-avatar-image
-            class="avatar-container project-avatar"
-            :link-href="project.path"
-            :img-src="project.avatar_url"
-            :img-alt="project.name"
-            :img-size="40"
-          />
-        </div>
-        <identicon
-          v-else
-          size-class="s40"
-          :entity-id="project.id"
-          :entity-name="project.name"
-        />
-        <div class="sidebar-context-title">
-          {{ project.name }}
-        </div>
-      </a>
-    </div>
-    <external-links
-      :project-url="project.web_url"
-    />
-    <div class="multi-file-commit-panel-inner-scroll">
-      <branches-tree
-        v-for="branch in project.branches"
-        :key="branch.name"
-        :project-id="project.path_with_namespace"
-        :branch="branch"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/ide/components/ide_repo_tree.vue b/app/assets/javascripts/ide/components/ide_repo_tree.vue
deleted file mode 100644
index e6af88e04bc..00000000000
--- a/app/assets/javascripts/ide/components/ide_repo_tree.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import RepoFile from './repo_file.vue';
-
-export default {
-  components: {
-    RepoFile,
-    SkeletonLoadingContainer,
-  },
-  props: {
-    tree: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="ide-file-list"
-  >
-    <template v-if="tree.loading">
-      <div
-        class="multi-file-loading-container"
-        v-for="n in 3"
-        :key="n"
-      >
-        <skeleton-loading-container />
-      </div>
-    </template>
-    <template v-else>
-      <repo-file
-        v-for="file in tree.tree"
-        :key="file.key"
-        :file="file"
-        :level="0"
-      />
-    </template>
-  </div>
-</template>
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
new file mode 100644
index 00000000000..f9978762c45
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -0,0 +1,69 @@
+<script>
+import { mapGetters, mapState, mapActions } from 'vuex';
+import IdeTreeList from './ide_tree_list.vue';
+import EditorModeDropdown from './editor_mode_dropdown.vue';
+import { viewerTypes } from '../constants';
+
+export default {
+  components: {
+    IdeTreeList,
+    EditorModeDropdown,
+  },
+  computed: {
+    ...mapGetters(['currentMergeRequest']),
+    ...mapState(['viewer', 'currentMergeRequestId']),
+    showLatestChangesText() {
+      return !this.currentMergeRequestId || this.viewer === viewerTypes.diff;
+    },
+    showMergeRequestText() {
+      return this.currentMergeRequestId && this.viewer === viewerTypes.mr;
+    },
+    mergeRequestId() {
+      return `!${this.currentMergeRequest.iid}`;
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.updateViewer(this.currentMergeRequestId ? viewerTypes.mr : viewerTypes.diff);
+    });
+  },
+  methods: {
+    ...mapActions(['updateViewer']),
+  },
+};
+</script>
+
+<template>
+  <ide-tree-list
+    :viewer-type="viewer"
+    :disable-action-dropdown="true"
+    header-class="ide-review-header"
+  >
+    <template
+      slot="header"
+    >
+      <div class="ide-review-button-holder">
+        {{ __('Review') }}
+        <editor-mode-dropdown
+          v-if="currentMergeRequest"
+          :viewer="viewer"
+          :merge-request-id="currentMergeRequest.iid"
+          @click="updateViewer"
+        />
+      </div>
+      <div class="prepend-top-5 ide-review-sub-header">
+        <template v-if="showLatestChangesText">
+          {{ __('Latest changes') }}
+        </template>
+        <template v-else-if="showMergeRequestText">
+          {{ __('Merge request') }}
+          (<a
+            v-if="currentMergeRequest"
+            :href="currentMergeRequest.web_url"
+            v-text="mergeRequestId"
+          ></a>)
+        </template>
+      </div>
+    </template>
+  </ide-tree-list>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 8cf1ccb4fce..21906674c4b 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,51 +1,201 @@
 <script>
-  import { mapState, mapGetters } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import panelResizer from '~/vue_shared/components/panel_resizer.vue';
-  import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-  import projectTree from './ide_project_tree.vue';
-  import ResizablePanel from './resizable_panel.vue';
+import $ from 'jquery';
+import { mapState, mapGetters } from 'vuex';
+import ProjectAvatarImage from '~/vue_shared/components/project_avatar/image.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import Identicon from '../../vue_shared/components/identicon.vue';
+import IdeTree from './ide_tree.vue';
+import ResizablePanel from './resizable_panel.vue';
+import ActivityBar from './activity_bar.vue';
+import CommitSection from './repo_commit_section.vue';
+import CommitForm from './commit_sidebar/form.vue';
+import IdeReview from './ide_review.vue';
+import SuccessMessage from './commit_sidebar/success_message.vue';
+import MergeRequestDropdown from './merge_requests/dropdown.vue';
+import { activityBarViews } from '../constants';
 
-  export default {
-    components: {
-      projectTree,
-      icon,
-      panelResizer,
-      skeletonLoadingContainer,
-      ResizablePanel,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+    PanelResizer,
+    SkeletonLoadingContainer,
+    ResizablePanel,
+    ActivityBar,
+    ProjectAvatarImage,
+    Identicon,
+    CommitSection,
+    IdeTree,
+    CommitForm,
+    IdeReview,
+    SuccessMessage,
+    MergeRequestDropdown,
+  },
+  data() {
+    return {
+      showTooltip: false,
+      showMergeRequestsDropdown: false,
+    };
+  },
+  computed: {
+    ...mapState([
+      'loading',
+      'currentBranchId',
+      'currentActivityView',
+      'changedFiles',
+      'stagedFiles',
+      'lastCommitMsg',
+      'currentMergeRequestId',
+    ]),
+    ...mapGetters(['currentProject', 'someUncommitedChanges']),
+    showSuccessMessage() {
+      return (
+        this.currentActivityView === activityBarViews.edit &&
+        (this.lastCommitMsg && !this.someUncommitedChanges)
+      );
     },
-    computed: {
-      ...mapState([
-        'loading',
-      ]),
-      ...mapGetters([
-        'projectsWithTrees',
-      ]),
+    branchTooltipTitle() {
+      return this.showTooltip ? this.currentBranchId : undefined;
     },
-  };
+  },
+  watch: {
+    currentBranchId() {
+      this.$nextTick(() => {
+        if (!this.$refs.branchId) return;
+
+        this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth;
+      });
+    },
+    loading() {
+      this.$nextTick(() => {
+        this.addDropdownListeners();
+      });
+    },
+  },
+  mounted() {
+    this.addDropdownListeners();
+  },
+  beforeDestroy() {
+    $(this.$refs.mergeRequestDropdown)
+      .off('show.bs.dropdown')
+      .off('hide.bs.dropdown');
+  },
+  methods: {
+    addDropdownListeners() {
+      if (!this.$refs.mergeRequestDropdown) return;
+
+      $(this.$refs.mergeRequestDropdown)
+        .on('show.bs.dropdown', () => {
+          this.toggleMergeRequestDropdown();
+        }).on('hide.bs.dropdown', () => {
+          this.toggleMergeRequestDropdown();
+        });
+    },
+    toggleMergeRequestDropdown() {
+      this.showMergeRequestsDropdown = !this.showMergeRequestsDropdown;
+    },
+  },
+};
 </script>
 
 <template>
   <resizable-panel
     :collapsible="false"
-    :initial-width="290"
+    :initial-width="340"
     side="left"
   >
+    <activity-bar
+      v-if="!loading"
+    />
     <div class="multi-file-commit-panel-inner">
       <template v-if="loading">
         <div
-          class="multi-file-loading-container"
           v-for="n in 3"
           :key="n"
+          class="multi-file-loading-container"
         >
           <skeleton-loading-container />
         </div>
       </template>
-      <project-tree
-        v-for="project in projectsWithTrees"
-        :key="project.id"
-        :project="project"
-      />
+      <template v-else>
+        <div
+          ref="mergeRequestDropdown"
+          class="context-header ide-context-header dropdown"
+        >
+          <button
+            type="button"
+            data-toggle="dropdown"
+          >
+            <div
+              v-if="currentProject.avatar_url"
+              class="avatar-container s40 project-avatar"
+            >
+              <project-avatar-image
+                :link-href="currentProject.path"
+                :img-src="currentProject.avatar_url"
+                :img-alt="currentProject.name"
+                :img-size="40"
+                class="avatar-container project-avatar"
+              />
+            </div>
+            <identicon
+              v-else
+              :entity-id="currentProject.id"
+              :entity-name="currentProject.name"
+              size-class="s40"
+            />
+            <div class="ide-sidebar-project-title">
+              <div class="sidebar-context-title">
+                {{ currentProject.name }}
+              </div>
+              <div class="d-flex">
+                <div
+                  v-tooltip
+                  v-if="currentBranchId"
+                  ref="branchId"
+                  :title="branchTooltipTitle"
+                  class="sidebar-context-title ide-sidebar-branch-title"
+                >
+                  <icon
+                    name="branch"
+                    css-classes="append-right-5"
+                  />{{ currentBranchId }}
+                </div>
+                <div
+                  v-if="currentMergeRequestId"
+                  :class="{
+                    'prepend-left-8': currentBranchId
+                  }"
+                  class="sidebar-context-title ide-sidebar-branch-title"
+                >
+                  <icon
+                    name="git-merge"
+                    css-classes="append-right-5"
+                  />!{{ currentMergeRequestId }}
+                </div>
+              </div>
+            </div>
+            <icon
+              class="ml-auto"
+              name="chevron-down"
+            />
+          </button>
+          <merge-request-dropdown
+            :show="showMergeRequestsDropdown"
+          />
+        </div>
+        <div class="multi-file-commit-panel-inner-scroll">
+          <component
+            :is="currentActivityView"
+          />
+        </div>
+        <commit-form />
+      </template>
     </div>
   </resizable-panel>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index 9c386896448..0582ad32e92 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -1,60 +1,143 @@
 <script>
-  import icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import timeAgoMixin from '~/vue_shared/mixins/timeago';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import timeAgoMixin from '~/vue_shared/mixins/timeago';
+import CiIcon from '../../vue_shared/components/ci_icon.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
-  export default {
-    components: {
-      icon,
+export default {
+  components: {
+    icon,
+    userAvatarImage,
+    CiIcon,
+  },
+  directives: {
+    tooltip,
+  },
+  mixins: [timeAgoMixin],
+  props: {
+    file: {
+      type: Object,
+      required: false,
+      default: null,
     },
-    directives: {
-      tooltip,
+  },
+  data() {
+    return {
+      lastCommitFormatedAge: null,
+    };
+  },
+  computed: {
+    ...mapState(['currentBranchId', 'currentProjectId']),
+    ...mapGetters(['currentProject', 'lastCommit']),
+    ...mapState('pipelines', ['latestPipeline']),
+  },
+  watch: {
+    lastCommit() {
+      this.initPipelinePolling();
     },
-    mixins: [
-      timeAgoMixin,
-    ],
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
+  },
+  mounted() {
+    this.startTimer();
+  },
+  beforeDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+
+    this.stopPipelinePolling();
+  },
+  methods: {
+    ...mapActions('pipelines', ['fetchLatestPipeline', 'stopPipelinePolling']),
+    startTimer() {
+      this.intervalId = setInterval(() => {
+        this.commitAgeUpdate();
+      }, 1000);
+    },
+    initPipelinePolling() {
+      if (this.lastCommit) {
+        this.fetchLatestPipeline();
+      }
+    },
+    commitAgeUpdate() {
+      if (this.lastCommit) {
+        this.lastCommitFormatedAge = this.timeFormated(this.lastCommit.committed_date);
+      }
     },
-  };
+    getCommitPath(shortSha) {
+      return `${this.currentProject.web_url}/commit/${shortSha}`;
+    },
+  },
+};
 </script>
 
 <template>
-  <div class="ide-status-bar">
-    <div class="ref-name">
+  <footer class="ide-status-bar">
+    <div
+      v-if="lastCommit && lastCommitFormatedAge"
+      class="ide-status-branch"
+    >
+      <span
+        v-if="latestPipeline && latestPipeline.details"
+        class="ide-status-pipeline"
+      >
+        <ci-icon
+          v-tooltip
+          :status="latestPipeline.details.status"
+          :title="latestPipeline.details.status.text"
+        />
+        Pipeline
+        <a
+          :href="latestPipeline.details.status.details_path"
+          class="monospace">#{{ latestPipeline.id }}</a>
+        {{ latestPipeline.details.status.text }}
+        for
+      </span>
+
       <icon
-        name="branch"
-        :size="12"
+        name="commit"
       />
-      {{ file.branchId }}
-    </div>
-    <div>
-      <div v-if="file.lastCommit && file.lastCommit.id">
-        Last commit:
-        <a
-          v-tooltip
-          :title="file.lastCommit.message"
-          :href="file.lastCommit.url"
-        >
-          {{ timeFormated(file.lastCommit.updatedAt) }} by
-          {{ file.lastCommit.author }}
-        </a>
-      </div>
+      <a
+        v-tooltip
+        :title="lastCommit.message"
+        :href="getCommitPath(lastCommit.short_id)"
+        class="commit-sha"
+      >{{ lastCommit.short_id }}</a>
+      by
+      {{ lastCommit.author_name }}
+      <time
+        v-tooltip
+        :datetime="lastCommit.committed_date"
+        :title="tooltipTitle(lastCommit.committed_date)"
+        data-placement="top"
+        data-container="body"
+      >
+        {{ lastCommitFormatedAge }}
+      </time>
     </div>
-    <div class="text-right">
+    <div
+      v-if="file"
+      class="ide-status-file"
+    >
       {{ file.name }}
     </div>
-    <div class="text-right">
+    <div
+      v-if="file"
+      class="ide-status-file"
+    >
       {{ file.eol }}
     </div>
-    <div class="text-right">
+    <div
+      v-if="file && !file.binary"
+      class="ide-status-file">
       {{ file.editorRow }}:{{ file.editorColumn }}
     </div>
-    <div class="text-right">
+    <div
+      v-if="file"
+      class="ide-status-file"
+    >
       {{ file.fileLanguage }}
     </div>
-  </div>
+  </footer>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
new file mode 100644
index 00000000000..8fc4ebe6ca6
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -0,0 +1,42 @@
+<script>
+import { mapState, mapGetters, mapActions } from 'vuex';
+import NewDropdown from './new_dropdown/index.vue';
+import IdeTreeList from './ide_tree_list.vue';
+
+export default {
+  components: {
+    NewDropdown,
+    IdeTreeList,
+  },
+  computed: {
+    ...mapState(['currentBranchId']),
+    ...mapGetters(['currentProject', 'currentTree', 'activeFile']),
+  },
+  mounted() {
+    if (this.activeFile && this.activeFile.pending) {
+      this.$router.push(`/project${this.activeFile.url}`, () => {
+        this.updateViewer('editor');
+      });
+    }
+  },
+  methods: {
+    ...mapActions(['updateViewer']),
+  },
+};
+</script>
+
+<template>
+  <ide-tree-list
+    viewer-type="editor"
+  >
+    <template
+      slot="header"
+    >
+      {{ __('Edit') }}
+      <new-dropdown
+        :project-id="currentProject.name_with_namespace"
+        :branch="currentBranchId"
+      />
+    </template>
+  </ide-tree-list>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
new file mode 100644
index 00000000000..0df99798d21
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -0,0 +1,76 @@
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import RepoFile from './repo_file.vue';
+import NewDropdown from './new_dropdown/index.vue';
+
+export default {
+  components: {
+    Icon,
+    RepoFile,
+    SkeletonLoadingContainer,
+    NewDropdown,
+  },
+  props: {
+    viewerType: {
+      type: String,
+      required: true,
+    },
+    headerClass: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    disableActionDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState(['currentBranchId']),
+    ...mapGetters(['currentProject', 'currentTree']),
+    showLoading() {
+      return !this.currentTree || this.currentTree.loading;
+    },
+  },
+  mounted() {
+    this.updateViewer(this.viewerType);
+  },
+  methods: {
+    ...mapActions(['updateViewer']),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="ide-file-list"
+  >
+    <template v-if="showLoading">
+      <div
+        v-for="n in 3"
+        :key="n"
+        class="multi-file-loading-container"
+      >
+        <skeleton-loading-container />
+      </div>
+    </template>
+    <template v-else>
+      <header
+        :class="headerClass"
+        class="ide-tree-header"
+      >
+        <slot name="header"></slot>
+      </header>
+      <repo-file
+        v-for="file in currentTree.tree"
+        :key="file.key"
+        :file="file"
+        :level="0"
+        :disable-action-dropdown="disableActionDropdown"
+      />
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue
new file mode 100644
index 00000000000..f39ce545656
--- /dev/null
+++ b/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -0,0 +1,137 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+import _ from 'underscore';
+import { __ } from '../../../locale';
+import tooltip from '../../../vue_shared/directives/tooltip';
+import Icon from '../../../vue_shared/components/icon.vue';
+import ScrollButton from './detail/scroll_button.vue';
+import JobDescription from './detail/description.vue';
+
+const scrollPositions = {
+  top: 0,
+  bottom: 1,
+};
+
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+    ScrollButton,
+    JobDescription,
+  },
+  data() {
+    return {
+      scrollPos: scrollPositions.top,
+    };
+  },
+  computed: {
+    ...mapState('pipelines', ['detailJob']),
+    isScrolledToBottom() {
+      return this.scrollPos === scrollPositions.bottom;
+    },
+    isScrolledToTop() {
+      return this.scrollPos === scrollPositions.top;
+    },
+    jobOutput() {
+      return this.detailJob.output || __('No messages were logged');
+    },
+  },
+  mounted() {
+    this.getTrace();
+  },
+  methods: {
+    ...mapActions('pipelines', ['fetchJobTrace', 'setDetailJob']),
+    scrollDown() {
+      if (this.$refs.buildTrace) {
+        this.$refs.buildTrace.scrollTo(0, this.$refs.buildTrace.scrollHeight);
+      }
+    },
+    scrollUp() {
+      if (this.$refs.buildTrace) {
+        this.$refs.buildTrace.scrollTo(0, 0);
+      }
+    },
+    scrollBuildLog: _.throttle(function buildLogScrollDebounce() {
+      const { scrollTop } = this.$refs.buildTrace;
+      const { offsetHeight, scrollHeight } = this.$refs.buildTrace;
+
+      if (scrollTop + offsetHeight === scrollHeight) {
+        this.scrollPos = scrollPositions.bottom;
+      } else if (scrollTop === 0) {
+        this.scrollPos = scrollPositions.top;
+      } else {
+        this.scrollPos = '';
+      }
+    }),
+    getTrace() {
+      return this.fetchJobTrace().then(() => this.scrollDown());
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="ide-pipeline build-page d-flex flex-column flex-fill">
+    <header class="ide-job-header d-flex align-items-center">
+      <button
+        class="btn btn-default btn-sm d-flex"
+        @click="setDetailJob(null)"
+      >
+        <icon
+          name="chevron-left"
+        />
+        {{ __('View jobs') }}
+      </button>
+    </header>
+    <div class="top-bar d-flex border-left-0">
+      <job-description
+        :job="detailJob"
+      />
+      <div class="controllers ml-auto">
+        <a
+          v-tooltip
+          :title="__('Show complete raw log')"
+          :href="detailJob.rawPath"
+          data-placement="top"
+          data-container="body"
+          class="controllers-buttons"
+          target="_blank"
+        >
+          <i
+            aria-hidden="true"
+            class="fa fa-file-text-o"
+          ></i>
+        </a>
+        <scroll-button
+          :disabled="isScrolledToTop"
+          direction="up"
+          @click="scrollUp"
+        />
+        <scroll-button
+          :disabled="isScrolledToBottom"
+          direction="down"
+          @click="scrollDown"
+        />
+      </div>
+    </div>
+    <pre
+      ref="buildTrace"
+      class="build-trace mb-0 h-100"
+      @scroll="scrollBuildLog"
+    >
+      <code
+        v-show="!detailJob.isLoading"
+        class="bash"
+        v-html="jobOutput"
+      >
+      </code>
+      <div
+        v-show="detailJob.isLoading"
+        class="build-loader-animation"
+      >
+      </div>
+    </pre>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue
new file mode 100644
index 00000000000..7e24974f7e5
--- /dev/null
+++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue
@@ -0,0 +1,47 @@
+<script>
+import Icon from '../../../../vue_shared/components/icon.vue';
+import CiIcon from '../../../../vue_shared/components/ci_icon.vue';
+
+export default {
+  components: {
+    Icon,
+    CiIcon,
+  },
+  props: {
+    job: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    jobId() {
+      return `#${this.job.id}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex align-items-center">
+    <ci-icon
+      :status="job.status"
+      :borderless="true"
+      :size="24"
+      class="d-flex"
+    />
+    <span class="prepend-left-8">
+      {{ job.name }}
+      <a
+        :href="job.path"
+        target="_blank"
+        class="ide-external-link"
+      >
+        {{ jobId }}
+        <icon
+          :size="12"
+          name="external-link"
+        />
+      </a>
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
new file mode 100644
index 00000000000..103a407987f
--- /dev/null
+++ b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
@@ -0,0 +1,66 @@
+<script>
+import { __ } from '../../../../locale';
+import Icon from '../../../../vue_shared/components/icon.vue';
+import tooltip from '../../../../vue_shared/directives/tooltip';
+
+const directions = {
+  up: 'up',
+  down: 'down',
+};
+
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+  },
+  props: {
+    direction: {
+      type: String,
+      required: true,
+      validator(value) {
+        return Object.keys(directions).includes(value);
+      },
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    tooltipTitle() {
+      return this.direction === directions.up ? __('Scroll to top') : __('Scroll to bottom');
+    },
+    iconName() {
+      return `scroll_${this.direction}`;
+    },
+  },
+  methods: {
+    clickedScroll() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-tooltip
+    :title="tooltipTitle"
+    class="controllers-buttons"
+    data-container="body"
+    data-placement="top"
+  >
+    <button
+      :disabled="disabled"
+      class="btn-scroll btn-transparent btn-blank"
+      type="button"
+      @click="clickedScroll"
+    >
+      <icon
+        :name="iconName"
+      />
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
new file mode 100644
index 00000000000..7f4695a0451
--- /dev/null
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -0,0 +1,44 @@
+<script>
+import JobDescription from './detail/description.vue';
+
+export default {
+  components: {
+    JobDescription,
+  },
+  props: {
+    job: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    jobId() {
+      return `#${this.job.id}`;
+    },
+  },
+  methods: {
+    clickViewLog() {
+      this.$emit('clickViewLog', this.job);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="ide-job-item">
+    <job-description
+      :job="job"
+      class="append-right-default"
+    />
+    <div class="ml-auto align-self-center">
+      <button
+        v-if="job.started"
+        type="button"
+        class="btn btn-default btn-sm"
+        @click="clickViewLog"
+      >
+        {{ __('View log') }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue
new file mode 100644
index 00000000000..3b16b860ecd
--- /dev/null
+++ b/app/assets/javascripts/ide/components/jobs/list.vue
@@ -0,0 +1,45 @@
+<script>
+import { mapActions } from 'vuex';
+import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import Stage from './stage.vue';
+
+export default {
+  components: {
+    LoadingIcon,
+    Stage,
+  },
+  props: {
+    stages: {
+      type: Array,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  methods: {
+    ...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed', 'setDetailJob']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <loading-icon
+      v-if="loading && !stages.length"
+      class="prepend-top-default"
+      size="2"
+    />
+    <template v-else>
+      <stage
+        v-for="stage in stages"
+        :key="stage.id"
+        :stage="stage"
+        @fetch="fetchJobs"
+        @toggleCollapsed="toggleStageCollapsed"
+        @clickViewLog="setDetailJob"
+      />
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
new file mode 100644
index 00000000000..15e881b7bc8
--- /dev/null
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -0,0 +1,112 @@
+<script>
+import tooltip from '../../../vue_shared/directives/tooltip';
+import Icon from '../../../vue_shared/components/icon.vue';
+import CiIcon from '../../../vue_shared/components/ci_icon.vue';
+import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import Item from './item.vue';
+
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+    CiIcon,
+    LoadingIcon,
+    Item,
+  },
+  props: {
+    stage: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showTooltip: false,
+    };
+  },
+  computed: {
+    collapseIcon() {
+      return this.stage.isCollapsed ? 'angle-left' : 'angle-down';
+    },
+    showLoadingIcon() {
+      return this.stage.isLoading && !this.stage.jobs.length;
+    },
+    jobsCount() {
+      return this.stage.jobs.length;
+    },
+  },
+  mounted() {
+    const { stageTitle } = this.$refs;
+
+    this.showTooltip = stageTitle.scrollWidth > stageTitle.offsetWidth;
+
+    this.$emit('fetch', this.stage);
+  },
+  methods: {
+    toggleCollapsed() {
+      this.$emit('toggleCollapsed', this.stage.id);
+    },
+    clickViewLog(job) {
+      this.$emit('clickViewLog', job);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="ide-stage card prepend-top-default"
+  >
+    <div
+      :class="{
+        'border-bottom-0': stage.isCollapsed
+      }"
+      class="card-header"
+      @click="toggleCollapsed"
+    >
+      <ci-icon
+        :status="stage.status"
+        :size="24"
+      />
+      <strong
+        v-tooltip="showTooltip"
+        ref="stageTitle"
+        :title="showTooltip ? stage.name : null"
+        data-container="body"
+        class="prepend-left-8 ide-stage-title"
+      >
+        {{ stage.name }}
+      </strong>
+      <div
+        v-if="!stage.isLoading || stage.jobs.length"
+        class="append-right-8 prepend-left-4"
+      >
+        <span class="badge badge-pill">
+          {{ jobsCount }}
+        </span>
+      </div>
+      <icon
+        :name="collapseIcon"
+        css-classes="ide-stage-collapse-icon"
+      />
+    </div>
+    <div
+      v-show="!stage.isCollapsed"
+      class="card-body"
+    >
+      <loading-icon
+        v-if="showLoadingIcon"
+      />
+      <template v-else>
+        <item
+          v-for="job in stage.jobs"
+          :key="job.id"
+          :job="job"
+          @clickViewLog="clickViewLog"
+        />
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
new file mode 100644
index 00000000000..4b9824bf04b
--- /dev/null
+++ b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
@@ -0,0 +1,63 @@
+<script>
+import { mapGetters } from 'vuex';
+import Tabs from '../../../vue_shared/components/tabs/tabs';
+import Tab from '../../../vue_shared/components/tabs/tab.vue';
+import List from './list.vue';
+
+export default {
+  components: {
+    Tabs,
+    Tab,
+    List,
+  },
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters('mergeRequests', ['assignedData', 'createdData']),
+    createdMergeRequestLength() {
+      return this.createdData.mergeRequests.length;
+    },
+    assignedMergeRequestLength() {
+      return this.assignedData.mergeRequests.length;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="dropdown-menu ide-merge-requests-dropdown p-0">
+    <tabs
+      v-if="show"
+      stop-propagation
+    >
+      <tab active>
+        <template slot="title">
+          {{ __('Created by me') }}
+          <span class="badge badge-pill">
+            {{ createdMergeRequestLength }}
+          </span>
+        </template>
+        <list
+          :empty-text="__('You have not created any merge requests')"
+          type="created"
+        />
+      </tab>
+      <tab>
+        <template slot="title">
+          {{ __('Assigned to me') }}
+          <span class="badge badge-pill">
+            {{ assignedMergeRequestLength }}
+          </span>
+        </template>
+        <list
+          :empty-text="__('You do not have any assigned merge requests')"
+          type="assigned"
+        />
+      </tab>
+    </tabs>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue
new file mode 100644
index 00000000000..4e18376bd48
--- /dev/null
+++ b/app/assets/javascripts/ide/components/merge_requests/item.vue
@@ -0,0 +1,63 @@
+<script>
+import Icon from '../../../vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    currentId: {
+      type: String,
+      required: true,
+    },
+    currentProjectId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isActive() {
+      return (
+        this.item.iid === parseInt(this.currentId, 10) &&
+        this.currentProjectId === this.item.projectPathWithNamespace
+      );
+    },
+    pathWithID() {
+      return `${this.item.projectPathWithNamespace}!${this.item.iid}`;
+    },
+  },
+  methods: {
+    clickItem() {
+      this.$emit('click', this.item);
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    class="btn-link d-flex align-items-center"
+    @click="clickItem"
+  >
+    <span class="d-flex append-right-default ide-merge-request-current-icon">
+      <icon
+        v-if="isActive"
+        :size="18"
+        name="mobile-issue-close"
+      />
+    </span>
+    <span>
+      <strong>
+        {{ item.title }}
+      </strong>
+      <span class="ide-merge-request-project-path d-block mt-1">
+        {{ pathWithID }}
+      </span>
+    </span>
+  </button>
+</template>
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
new file mode 100644
index 00000000000..19d3e48ee10
--- /dev/null
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -0,0 +1,132 @@
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import _ from 'underscore';
+import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import Item from './item.vue';
+
+export default {
+  components: {
+    LoadingIcon,
+    Item,
+  },
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+    emptyText: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      search: '',
+    };
+  },
+  computed: {
+    ...mapGetters('mergeRequests', ['getData']),
+    ...mapState(['currentMergeRequestId', 'currentProjectId']),
+    data() {
+      return this.getData(this.type);
+    },
+    isLoading() {
+      return this.data.isLoading;
+    },
+    mergeRequests() {
+      return this.data.mergeRequests;
+    },
+    hasMergeRequests() {
+      return this.mergeRequests.length !== 0;
+    },
+    hasNoSearchResults() {
+      return this.search !== '' && !this.hasMergeRequests;
+    },
+  },
+  watch: {
+    isLoading: {
+      handler: 'focusSearch',
+    },
+  },
+  mounted() {
+    this.loadMergeRequests();
+  },
+  methods: {
+    ...mapActions('mergeRequests', ['fetchMergeRequests', 'openMergeRequest']),
+    loadMergeRequests() {
+      this.fetchMergeRequests({ type: this.type, search: this.search });
+    },
+    viewMergeRequest(item) {
+      this.openMergeRequest({
+        projectPath: item.projectPathWithNamespace,
+        id: item.iid,
+      });
+    },
+    searchMergeRequests: _.debounce(function debounceSearch() {
+      this.loadMergeRequests();
+    }, 250),
+    focusSearch() {
+      if (!this.isLoading) {
+        this.$nextTick(() => {
+          this.$refs.searchInput.focus();
+        });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom">
+      <input
+        ref="searchInput"
+        :placeholder="__('Search merge requests')"
+        v-model="search"
+        type="search"
+        class="dropdown-input-field"
+        @input="searchMergeRequests"
+      />
+      <i
+        aria-hidden="true"
+        class="fa fa-search dropdown-input-search"
+      ></i>
+    </div>
+    <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
+      <loading-icon
+        v-if="isLoading"
+        class="mt-3 mb-3 align-self-center ml-auto mr-auto"
+        size="2"
+      />
+      <ul
+        v-else
+        class="mb-3 w-100"
+      >
+        <template v-if="hasMergeRequests">
+          <li
+            v-for="item in mergeRequests"
+            :key="item.id"
+          >
+            <item
+              :item="item"
+              :current-id="currentMergeRequestId"
+              :current-project-id="currentProjectId"
+              @click="viewMergeRequest"
+            />
+          </li>
+        </template>
+        <li
+          v-else
+          class="ide-merge-requests-empty d-flex align-items-center justify-content-center"
+        >
+          <template v-if="hasNoSearchResults">
+            {{ __('No merge requests found') }}
+          </template>
+          <template v-else>
+            {{ emptyText }}
+          </template>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/mr_file_icon.vue b/app/assets/javascripts/ide/components/mr_file_icon.vue
new file mode 100644
index 00000000000..821be319cce
--- /dev/null
+++ b/app/assets/javascripts/ide/components/mr_file_icon.vue
@@ -0,0 +1,23 @@
+<script>
+import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+};
+</script>
+
+<template>
+  <icon
+    v-tooltip
+    :title="__('Part of merge request changes')"
+    :size="12"
+    name="git-merge"
+    css-classes="append-right-8"
+  />
+</template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index 769e9b79cad..1e398d7e1aa 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -1,58 +1,64 @@
 <script>
-  import { mapActions } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import newModal from './modal.vue';
-  import upload from './upload.vue';
+import { mapActions } from 'vuex';
+import icon from '~/vue_shared/components/icon.vue';
+import newModal from './modal.vue';
+import upload from './upload.vue';
 
-  export default {
-    components: {
-      icon,
-      newModal,
-      upload,
+export default {
+  components: {
+    icon,
+    newModal,
+    upload,
+  },
+  props: {
+    branch: {
+      type: String,
+      required: true,
     },
-    props: {
-      branch: {
-        type: String,
-        required: true,
-      },
-      path: {
-        type: String,
-        required: true,
-      },
+    path: {
+      type: String,
+      required: false,
+      default: '',
     },
-    data() {
-      return {
-        openModal: false,
-        modalType: '',
-        dropdownOpen: false,
-      };
+  },
+  data() {
+    return {
+      openModal: false,
+      modalType: '',
+      dropdownOpen: false,
+    };
+  },
+  watch: {
+    dropdownOpen() {
+      this.$nextTick(() => {
+        this.$refs.dropdownMenu.scrollIntoView();
+      });
     },
-    methods: {
-      ...mapActions([
-        'createTempEntry',
-      ]),
-      createNewItem(type) {
-        this.modalType = type;
-        this.openModal = true;
-        this.dropdownOpen = false;
-      },
-      hideModal() {
-        this.openModal = false;
-      },
-      openDropdown() {
-        this.dropdownOpen = !this.dropdownOpen;
-      },
+  },
+  methods: {
+    ...mapActions(['createTempEntry']),
+    createNewItem(type) {
+      this.modalType = type;
+      this.openModal = true;
+      this.dropdownOpen = false;
     },
-  };
+    hideModal() {
+      this.openModal = false;
+    },
+    openDropdown() {
+      this.dropdownOpen = !this.dropdownOpen;
+    },
+  },
+};
 </script>
 
 <template>
   <div class="ide-new-btn">
     <div
-      class="dropdown"
       :class="{
-        open: dropdownOpen,
+        show: dropdownOpen,
       }"
+      class="dropdown"
     >
       <button
         type="button"
@@ -61,17 +67,20 @@
         @click.stop="openDropdown()"
       >
         <icon
-          name="plus"
           :size="12"
-          css-classes="pull-left"
+          name="plus"
+          css-classes="float-left"
         />
         <icon
-          name="arrow-down"
           :size="12"
-          css-classes="pull-left"
+          name="arrow-down"
+          css-classes="float-left"
         />
       </button>
-      <ul class="dropdown-menu dropdown-menu-right">
+      <ul
+        ref="dropdownMenu"
+        class="dropdown-menu dropdown-menu-right"
+      >
         <li>
           <a
             href="#"
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index 5723891d130..1e9668d5154 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -1,75 +1,68 @@
 <script>
-  import { __ } from '~/locale';
-  import modal from '~/vue_shared/components/modal.vue';
+import { __ } from '~/locale';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 
-  export default {
-    components: {
-      modal,
+export default {
+  components: {
+    DeprecatedModal,
+  },
+  props: {
+    branchId: {
+      type: String,
+      required: true,
     },
-    props: {
-      branchId: {
-        type: String,
-        required: true,
-      },
-      type: {
-        type: String,
-        required: true,
-      },
-      path: {
-        type: String,
-        required: true,
-      },
+    type: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        entryName: this.path !== '' ? `${this.path}/` : '',
-      };
+    path: {
+      type: String,
+      required: true,
     },
-    computed: {
-      modalTitle() {
-        if (this.type === 'tree') {
-          return __('Create new directory');
-        }
+  },
+  data() {
+    return {
+      entryName: this.path !== '' ? `${this.path}/` : '',
+    };
+  },
+  computed: {
+    modalTitle() {
+      if (this.type === 'tree') {
+        return __('Create new directory');
+      }
 
-        return __('Create new file');
-      },
-      buttonLabel() {
-        if (this.type === 'tree') {
-          return __('Create directory');
-        }
-
-        return __('Create file');
-      },
-      formLabelName() {
-        if (this.type === 'tree') {
-          return __('Directory name');
-        }
-
-        return __('File name');
-      },
+      return __('Create new file');
     },
-    mounted() {
-      this.$refs.fieldName.focus();
+    buttonLabel() {
+      if (this.type === 'tree') {
+        return __('Create directory');
+      }
+
+      return __('Create file');
     },
-    methods: {
-      createEntryInStore() {
-        this.$emit('create', {
-          branchId: this.branchId,
-          name: this.entryName,
-          type: this.type,
-        });
+  },
+  mounted() {
+    this.$refs.fieldName.focus();
+  },
+  methods: {
+    createEntryInStore() {
+      this.$emit('create', {
+        branchId: this.branchId,
+        name: this.entryName,
+        type: this.type,
+      });
 
-        this.hideModal();
-      },
-      hideModal() {
-        this.$emit('hide');
-      },
+      this.hideModal();
+    },
+    hideModal() {
+      this.$emit('hide');
     },
-  };
+  },
+};
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     :title="modalTitle"
     :primary-button-label="buttonLabel"
     kind="success"
@@ -77,23 +70,21 @@
     @submit="createEntryInStore"
   >
     <form
-      class="form-horizontal"
       slot="body"
+      class="form-group row"
       @submit.prevent="createEntryInStore"
     >
-      <fieldset class="form-group append-bottom-0">
-        <label class="label-light col-sm-3">
-          {{ formLabelName }}
-        </label>
-        <div class="col-sm-9">
-          <input
-            type="text"
-            class="form-control"
-            v-model="entryName"
-            ref="fieldName"
-          />
-        </div>
-      </fieldset>
+      <label class="label-light col-form-label col-sm-3">
+        {{ __('Name') }}
+      </label>
+      <div class="col-sm-9">
+        <input
+          ref="fieldName"
+          v-model="entryName"
+          type="text"
+          class="form-control"
+        />
+      </div>
     </form>
-  </modal>
+  </deprecated-modal>
 </template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index c165af5ce52..677b282bd61 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -23,6 +23,7 @@
         let { result } = target;
 
         if (!isText) {
+          // eslint-disable-next-line prefer-destructuring
           result = result.split('base64,')[1];
         }
 
@@ -67,9 +68,9 @@
     </a>
     <input
       id="file-upload"
+      ref="fileUpload"
       type="file"
       class="hidden"
-      ref="fileUpload"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue
new file mode 100644
index 00000000000..5cd2c9ce188
--- /dev/null
+++ b/app/assets/javascripts/ide/components/panes/right.vue
@@ -0,0 +1,79 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+import tooltip from '../../../vue_shared/directives/tooltip';
+import Icon from '../../../vue_shared/components/icon.vue';
+import { rightSidebarViews } from '../../constants';
+import PipelinesList from '../pipelines/list.vue';
+import JobsDetail from '../jobs/detail.vue';
+import ResizablePanel from '../resizable_panel.vue';
+
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+    PipelinesList,
+    JobsDetail,
+    ResizablePanel,
+  },
+  computed: {
+    ...mapState(['rightPane']),
+    pipelinesActive() {
+      return (
+        this.rightPane === rightSidebarViews.pipelines ||
+        this.rightPane === rightSidebarViews.jobsDetail
+      );
+    },
+  },
+  methods: {
+    ...mapActions(['setRightPane']),
+    clickTab(e, view) {
+      e.target.blur();
+
+      this.setRightPane(view);
+    },
+  },
+  rightSidebarViews,
+};
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-panel ide-right-sidebar"
+  >
+    <resizable-panel
+      v-if="rightPane"
+      :collapsible="false"
+      :initial-width="350"
+      :min-size="350"
+      class="multi-file-commit-panel-inner"
+      side="right"
+    >
+      <component :is="rightPane" />
+    </resizable-panel>
+    <nav class="ide-activity-bar">
+      <ul class="list-unstyled">
+        <li>
+          <button
+            v-tooltip
+            :title="__('Pipelines')"
+            :class="{
+              active: pipelinesActive
+            }"
+            data-container="body"
+            data-placement="left"
+            class="ide-sidebar-link is-right"
+            type="button"
+            @click="clickTab($event, $options.rightSidebarViews.pipelines)"
+          >
+            <icon
+              :size="16"
+              name="rocket"
+            />
+          </button>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
new file mode 100644
index 00000000000..5757dfdc925
--- /dev/null
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -0,0 +1,146 @@
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import _ from 'underscore';
+import { sprintf, __ } from '../../../locale';
+import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import Icon from '../../../vue_shared/components/icon.vue';
+import CiIcon from '../../../vue_shared/components/ci_icon.vue';
+import Tabs from '../../../vue_shared/components/tabs/tabs';
+import Tab from '../../../vue_shared/components/tabs/tab.vue';
+import EmptyState from '../../../pipelines/components/empty_state.vue';
+import JobsList from '../jobs/list.vue';
+
+export default {
+  components: {
+    LoadingIcon,
+    Icon,
+    CiIcon,
+    Tabs,
+    Tab,
+    JobsList,
+    EmptyState,
+  },
+  computed: {
+    ...mapState(['pipelinesEmptyStateSvgPath', 'links']),
+    ...mapGetters(['currentProject']),
+    ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages', 'pipelineFailed']),
+    ...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline', 'stages', 'isLoadingJobs']),
+    ciLintText() {
+      return sprintf(
+        __('You can also test your .gitlab-ci.yml in the %{linkStart}Lint%{linkEnd}'),
+        {
+          linkStart: `<a href="${_.escape(this.currentProject.web_url)}/-/ci/lint">`,
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
+    showLoadingIcon() {
+      return this.isLoadingPipeline && this.latestPipeline === null;
+    },
+  },
+  created() {
+    this.fetchLatestPipeline();
+  },
+  methods: {
+    ...mapActions('pipelines', ['fetchLatestPipeline']),
+  },
+};
+</script>
+
+<template>
+  <div class="ide-pipeline">
+    <loading-icon
+      v-if="showLoadingIcon"
+      class="prepend-top-default"
+      size="2"
+    />
+    <template v-else-if="latestPipeline !== null">
+      <header
+        v-if="latestPipeline"
+        class="ide-tree-header ide-pipeline-header"
+      >
+        <ci-icon
+          :status="latestPipeline.details.status"
+          :size="24"
+        />
+        <span class="prepend-left-8">
+          <strong>
+            {{ __('Pipeline') }}
+          </strong>
+          <a
+            :href="latestPipeline.path"
+            target="_blank"
+            class="ide-external-link"
+          >
+            #{{ latestPipeline.id }}
+            <icon
+              :size="12"
+              name="external-link"
+            />
+          </a>
+        </span>
+      </header>
+      <empty-state
+        v-if="latestPipeline === false"
+        :help-page-path="links.ciHelpPagePath"
+        :empty-state-svg-path="pipelinesEmptyStateSvgPath"
+        :can-set-ci="true"
+      />
+      <div
+        v-else-if="latestPipeline.yamlError"
+        class="bs-callout bs-callout-danger"
+      >
+        <p class="append-bottom-0">
+          {{ __('Found errors in your .gitlab-ci.yml:') }}
+        </p>
+        <p class="append-bottom-0 break-word">
+          {{ latestPipeline.yamlError }}
+        </p>
+        <p
+          class="append-bottom-0"
+          v-html="ciLintText"
+        ></p>
+      </div>
+      <tabs
+        v-else
+        class="ide-pipeline-list"
+      >
+        <tab
+          :active="!pipelineFailed"
+        >
+          <template slot="title">
+            {{ __('Jobs') }}
+            <span
+              v-if="jobsCount"
+              class="badge badge-pill"
+            >
+              {{ jobsCount }}
+            </span>
+          </template>
+          <jobs-list
+            :loading="isLoadingJobs"
+            :stages="stages"
+          />
+        </tab>
+        <tab
+          :active="pipelineFailed"
+        >
+          <template slot="title">
+            {{ __('Failed Jobs') }}
+            <span
+              v-if="failedJobsCount"
+              class="badge badge-pill"
+            >
+              {{ failedJobsCount }}
+            </span>
+          </template>
+          <jobs-list
+            :loading="isLoadingJobs"
+            :stages="failedStages"
+          />
+        </tab>
+      </tabs>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index d772cab2d0e..c2c678ff0be 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -1,174 +1,121 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
-import modal from '~/vue_shared/components/modal.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
-import commitFilesList from './commit_sidebar/list.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+import CommitFilesList from './commit_sidebar/list.vue';
+import EmptyState from './commit_sidebar/empty_state.vue';
 import * as consts from '../stores/modules/commit/constants';
-import Actions from './commit_sidebar/actions.vue';
+import { activityBarViews, stageKeys } from '../constants';
 
 export default {
   components: {
-    modal,
-    icon,
-    commitFilesList,
-    Actions,
-    LoadingButton,
+    DeprecatedModal,
+    Icon,
+    CommitFilesList,
+    EmptyState,
   },
   directives: {
     tooltip,
   },
-  props: {
-    noChangesStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    committedStateSvgPath: {
-      type: String,
-      required: true,
-    },
-  },
   computed: {
     ...mapState([
-      'currentProjectId',
-      'currentBranchId',
+      'changedFiles',
+      'stagedFiles',
       'rightPanelCollapsed',
       'lastCommitMsg',
-      'changedFiles',
+      'unusedSeal',
     ]),
-    ...mapState('commit', [
-      'commitMessage',
-      'submitCommitLoading',
-    ]),
-    ...mapGetters('commit', [
-      'commitButtonDisabled',
-      'discardDraftButtonDisabled',
-      'branchName',
-    ]),
-    statusSvg() {
-      return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
+    ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
+    ...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommitedChanges', 'activeFile']),
+    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
+    showStageUnstageArea() {
+      return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal);
+    },
+    activeFileKey() {
+      return this.activeFile ? this.activeFile.key : null;
     },
   },
-  methods: {
-    ...mapActions([
-      'setPanelCollapsedStatus',
-    ]),
-    ...mapActions('commit', [
-      'updateCommitMessage',
-      'discardDraft',
-      'commitChanges',
-      'updateCommitAction',
-    ]),
-    toggleCollapsed() {
-      this.setPanelCollapsedStatus({
-        side: 'right',
-        collapsed: !this.rightPanelCollapsed,
-      });
+  watch: {
+    hasChanges() {
+      if (!this.hasChanges) {
+        this.updateActivityBarView(activityBarViews.edit);
+      }
     },
+  },
+  mounted() {
+    if (this.lastOpenedFile) {
+      this.openPendingTab({
+        file: this.lastOpenedFile,
+        keyPrefix: this.lastOpenedFile.changed ? stageKeys.unstaged : stageKeys.staged,
+      })
+        .then(changeViewer => {
+          if (changeViewer) {
+            this.updateViewer('diff');
+          }
+        })
+        .catch(e => {
+          throw e;
+        });
+    }
+  },
+  methods: {
+    ...mapActions(['openPendingTab', 'updateViewer', 'updateActivityBarView']),
+    ...mapActions('commit', ['commitChanges', 'updateCommitAction']),
     forceCreateNewBranch() {
-      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH)
-        .then(() => this.commitChanges());
+      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges());
     },
   },
+  stageKeys,
 };
 </script>
 
 <template>
   <div
     class="multi-file-commit-panel-section"
-    :class="{
-      'multi-file-commit-empty-state-container': !changedFiles.length
-    }"
   >
-    <modal
+    <deprecated-modal
       id="ide-create-branch-modal"
       :primary-button-label="__('Create new branch')"
-      kind="success"
       :title="__('Branch has changed')"
+      kind="success"
       @submit="forceCreateNewBranch"
     >
       <template slot="body">
         {{ __(`This branch has changed since you started editing.
           Would you like to create a new branch?`) }}
       </template>
-    </modal>
-    <commit-files-list
-      title="Staged"
-      :file-list="changedFiles"
-      :collapsed="rightPanelCollapsed"
-      @toggleCollapsed="toggleCollapsed"
-    />
+    </deprecated-modal>
     <template
-      v-if="changedFiles.length"
+      v-if="showStageUnstageArea"
     >
-      <form
-        class="form-horizontal multi-file-commit-form"
-        @submit.prevent.stop="commitChanges"
-        v-if="!rightPanelCollapsed"
-      >
-        <div class="multi-file-commit-fieldset">
-          <textarea
-            class="form-control multi-file-commit-message"
-            name="commit-message"
-            :value="commitMessage"
-            :placeholder="__('Write a commit message...')"
-            @input="updateCommitMessage($event.target.value)"
-          >
-          </textarea>
-        </div>
-        <div class="clearfix prepend-top-15">
-          <actions />
-          <loading-button
-            :loading="submitCommitLoading"
-            :disabled="commitButtonDisabled"
-            container-class="btn btn-success btn-sm pull-left"
-            :label="__('Commit')"
-            @click="commitChanges"
-          />
-          <button
-            v-if="!discardDraftButtonDisabled"
-            type="button"
-            class="btn btn-default btn-sm pull-right"
-            @click="discardDraft"
-          >
-            {{ __('Discard draft') }}
-          </button>
-        </div>
-      </form>
+      <commit-files-list
+        :title="__('Unstaged')"
+        :key-prefix="$options.stageKeys.unstaged"
+        :file-list="changedFiles"
+        :action-btn-text="__('Stage all changes')"
+        :active-file-key="activeFileKey"
+        action="stageAllChanges"
+        action-btn-icon="mobile-issue-close"
+        item-action-component="stage-button"
+        class="is-first"
+        icon-name="unstaged"
+      />
+      <commit-files-list
+        :title="__('Staged')"
+        :key-prefix="$options.stageKeys.staged"
+        :file-list="stagedFiles"
+        :action-btn-text="__('Unstage all changes')"
+        :staged-list="true"
+        :active-file-key="activeFileKey"
+        action="unstageAllChanges"
+        action-btn-icon="history"
+        item-action-component="unstage-button"
+        icon-name="staged"
+      />
     </template>
-    <div
-      v-else-if="!rightPanelCollapsed"
-      class="row js-empty-state"
-    >
-      <div class="col-xs-10 col-xs-offset-1">
-        <div class="svg-content svg-80">
-          <img :src="statusSvg" />
-        </div>
-      </div>
-      <div class="col-xs-10 col-xs-offset-1">
-        <div
-          class="text-content text-center"
-          v-if="!lastCommitMsg"
-        >
-          <h4>
-            {{ __('No changes') }}
-          </h4>
-          <p>
-            {{ __('Edit files in the editor and commit changes here') }}
-          </p>
-        </div>
-        <div
-          class="text-content text-center"
-          v-else
-        >
-          <h4>
-            {{ __('All changes are committed') }}
-          </h4>
-          <p v-html="lastCommitMsg">
-          </p>
-        </div>
-      </div>
-    </div>
+    <empty-state
+      v-if="unusedSeal"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index e73d1ce839f..08ee12fd98f 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -1,11 +1,18 @@
 <script>
-/* global monaco */
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapGetters, mapActions } from 'vuex';
 import flash from '~/flash';
-import monacoLoader from '../monaco_loader';
+import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
+import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
+import { activityBarViews, viewerTypes } from '../constants';
 import Editor from '../lib/editor';
+import ExternalLink from './external_link.vue';
 
 export default {
+  components: {
+    ContentViewer,
+    DiffViewer,
+    ExternalLink,
+  },
   props: {
     file: {
       type: Object,
@@ -14,23 +21,67 @@ export default {
   },
   computed: {
     ...mapState([
-      'leftPanelCollapsed',
       'rightPanelCollapsed',
       'viewer',
-      'delayViewerUpdated',
+      'panelResizing',
+      'currentActivityView',
+      'rightPane',
+    ]),
+    ...mapGetters([
+      'currentMergeRequest',
+      'getStagedFile',
+      'isEditModeActive',
+      'isCommitModeActive',
+      'isReviewModeActive',
     ]),
     shouldHideEditor() {
-      return this.file && this.file.binary && !this.file.raw;
+      return this.file && this.file.binary && !this.file.content;
+    },
+    showContentViewer() {
+      return (
+        (this.shouldHideEditor || this.file.viewMode === 'preview') &&
+        (this.viewer !== viewerTypes.mr || !this.file.mrChange)
+      );
+    },
+    showDiffViewer() {
+      return this.shouldHideEditor && this.file.mrChange && this.viewer === viewerTypes.mr;
+    },
+    editTabCSS() {
+      return {
+        active: this.file.viewMode === 'editor',
+      };
+    },
+    previewTabCSS() {
+      return {
+        active: this.file.viewMode === 'preview',
+      };
     },
   },
   watch: {
-    file(oldVal, newVal) {
-      if (newVal.path !== this.file.path) {
-        this.initMonaco();
+    file(newVal, oldVal) {
+      if (oldVal.pending) {
+        this.removePendingTab(oldVal);
+      }
+
+      // Compare key to allow for files opened in review mode to be cached differently
+      if (oldVal.key !== this.file.key) {
+        this.initEditor();
+
+        if (this.currentActivityView !== activityBarViews.edit) {
+          this.setFileViewMode({
+            file: this.file,
+            viewMode: 'editor',
+          });
+        }
       }
     },
-    leftPanelCollapsed() {
-      this.editor.updateDimensions();
+    currentActivityView() {
+      if (this.currentActivityView !== activityBarViews.edit) {
+        this.setFileViewMode({
+          file: this.file,
+          viewMode: 'editor',
+        });
+      }
     },
     rightPanelCollapsed() {
       this.editor.updateDimensions();
@@ -38,20 +89,23 @@ export default {
     viewer() {
       this.createEditorInstance();
     },
+    panelResizing() {
+      if (!this.panelResizing) {
+        this.editor.updateDimensions();
+      }
+    },
+    rightPane() {
+      this.editor.updateDimensions();
+    },
   },
   beforeDestroy() {
     this.editor.dispose();
   },
   mounted() {
-    if (this.editor && monaco) {
-      this.initMonaco();
-    } else {
-      monacoLoader(['vs/editor/editor.main'], () => {
-        this.editor = Editor.create(monaco);
-
-        this.initMonaco();
-      });
+    if (!this.editor) {
+      this.editor = Editor.create();
     }
+    this.initEditor();
   },
   methods: {
     ...mapActions([
@@ -59,27 +113,25 @@ export default {
       'changeFileContent',
       'setFileLanguage',
       'setEditorPosition',
+      'setFileViewMode',
       'setFileEOL',
       'updateViewer',
-      'updateDelayViewerUpdated',
+      'removePendingTab',
     ]),
-    initMonaco() {
+    initEditor() {
       if (this.shouldHideEditor) return;
 
       this.editor.clearEditor();
 
-      this.getRawFileData(this.file)
+      this.getRawFileData({
+        path: this.file.path,
+        baseSha: this.currentMergeRequest ? this.currentMergeRequest.baseCommitSha : '',
+      })
         .then(() => {
-          const viewerPromise = this.delayViewerUpdated ? this.updateViewer('editor') : Promise.resolve();
-
-          return viewerPromise;
-        })
-        .then(() => {
-          this.updateDelayViewerUpdated(false);
           this.createEditorInstance();
         })
-        .catch((err) => {
-          flash('Error setting up monaco. Please try again.', 'alert', document, null, false, true);
+        .catch(err => {
+          flash('Error setting up editor. Please try again.', 'alert', document, null, false, true);
           throw err;
         });
     },
@@ -87,10 +139,10 @@ export default {
       this.editor.dispose();
 
       this.$nextTick(() => {
-        if (this.viewer === 'editor') {
+        if (this.viewer === viewerTypes.edit) {
           this.editor.createInstance(this.$refs.editor);
         } else {
-          this.editor.createDiffInstance(this.$refs.editor);
+          this.editor.createDiffInstance(this.$refs.editor, !this.isReviewModeActive);
         }
 
         this.setupEditor();
@@ -99,11 +151,20 @@ export default {
     setupEditor() {
       if (!this.file || !this.editor.instance) return;
 
-      this.model = this.editor.createModel(this.file);
+      const head = this.getStagedFile(this.file.path);
+
+      this.model = this.editor.createModel(
+        this.file,
+        this.file.staged && this.file.key.indexOf('unstaged-') === 0 ? head : null,
+      );
 
-      this.editor.attachModel(this.model);
+      if (this.viewer === viewerTypes.mr && this.file.mrChange) {
+        this.editor.attachMergeRequestModel(this.model);
+      } else {
+        this.editor.attachModel(this.model);
+      }
 
-      this.model.onChange((model) => {
+      this.model.onChange(model => {
         const { file } = model;
 
         if (file.active) {
@@ -138,6 +199,7 @@ export default {
       });
     },
   },
+  viewerTypes,
 };
 </script>
 
@@ -146,16 +208,61 @@ export default {
     id="ide"
     class="blob-viewer-container blob-editor-container"
   >
-    <div
-      v-if="shouldHideEditor"
-      v-html="file.html"
-    >
+    <div class="ide-mode-tabs clearfix" >
+      <ul
+        v-if="!shouldHideEditor && isEditModeActive"
+        class="nav-links float-left"
+      >
+        <li :class="editTabCSS">
+          <a
+            href="javascript:void(0);"
+            role="button"
+            @click.prevent="setFileViewMode({ file, viewMode: 'editor' })">
+            <template v-if="viewer === $options.viewerTypes.edit">
+              {{ __('Edit') }}
+            </template>
+            <template v-else>
+              {{ __('Review') }}
+            </template>
+          </a>
+        </li>
+        <li
+          v-if="file.previewMode"
+          :class="previewTabCSS">
+          <a
+            href="javascript:void(0);"
+            role="button"
+            @click.prevent="setFileViewMode({ file, viewMode:'preview' })">
+            {{ file.previewMode.previewTitle }}
+          </a>
+        </li>
+      </ul>
+      <external-link
+        :file="file"
+      />
     </div>
     <div
-      v-show="!shouldHideEditor"
+      v-show="!shouldHideEditor && file.viewMode ==='editor'"
       ref="editor"
+      :class="{
+        'is-readonly': isCommitModeActive,
+      }"
       class="multi-file-editor-holder"
     >
     </div>
+    <content-viewer
+      v-if="showContentViewer"
+      :content="file.content || file.raw"
+      :path="file.rawPath || file.path"
+      :file-size="file.size"
+      :project-path="file.projectId"/>
+    <diff-viewer
+      v-if="showDiffViewer"
+      :diff-mode="file.mrChange.diffMode"
+      :new-path="file.mrChange.new_path"
+      :new-sha="currentMergeRequest.sha"
+      :old-path="file.mrChange.old_path"
+      :old-sha="currentMergeRequest.baseCommitSha"
+      :project-path="file.projectId"/>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 297b9c2628f..f490a3a2a39 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -1,20 +1,29 @@
 <script>
-import { mapActions } from 'vuex';
-import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import fileIcon from '~/vue_shared/components/file_icon.vue';
+import { mapActions, mapGetters } from 'vuex';
+import { n__, __, sprintf } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 import router from '../ide_router';
-import newDropdown from './new_dropdown/index.vue';
-import fileStatusIcon from './repo_file_status_icon.vue';
-import changedFileIcon from './changed_file_icon.vue';
+import NewDropdown from './new_dropdown/index.vue';
+import FileStatusIcon from './repo_file_status_icon.vue';
+import ChangedFileIcon from './changed_file_icon.vue';
+import MrFileIcon from './mr_file_icon.vue';
 
 export default {
   name: 'RepoFile',
+  directives: {
+    tooltip,
+  },
   components: {
-    skeletonLoadingContainer,
-    newDropdown,
-    fileStatusIcon,
-    fileIcon,
-    changedFileIcon,
+    SkeletonLoadingContainer,
+    NewDropdown,
+    FileStatusIcon,
+    FileIcon,
+    ChangedFileIcon,
+    MrFileIcon,
+    Icon,
   },
   props: {
     file: {
@@ -25,8 +34,41 @@ export default {
       type: Number,
       required: true,
     },
+    disableActionDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
+    ...mapGetters([
+      'getChangesInFolder',
+      'getUnstagedFilesCountForPath',
+      'getStagedFilesCountForPath',
+    ]),
+    folderUnstagedCount() {
+      return this.getUnstagedFilesCountForPath(this.file.path);
+    },
+    folderStagedCount() {
+      return this.getStagedFilesCountForPath(this.file.path);
+    },
+    changesCount() {
+      return this.getChangesInFolder(this.file.path);
+    },
+    folderChangesTooltip() {
+      if (this.changesCount === 0) return undefined;
+
+      if (this.folderUnstagedCount > 0 && this.folderStagedCount === 0) {
+        return n__('%d unstaged change', '%d unstaged changes', this.folderUnstagedCount);
+      } else if (this.folderUnstagedCount === 0 && this.folderStagedCount > 0) {
+        return n__('%d staged change', '%d staged changes', this.folderStagedCount);
+      }
+
+      return sprintf(__('%{unstaged} unstaged and %{staged} staged changes'), {
+        unstaged: this.folderUnstagedCount,
+        staged: this.folderStagedCount,
+      });
+    },
     isTree() {
       return this.file.type === 'tree';
     },
@@ -46,31 +88,60 @@ export default {
         'is-open': this.file.opened,
       };
     },
+    showTreeChangesCount() {
+      return this.isTree && this.changesCount > 0 && !this.file.opened;
+    },
+    showChangedFileIcon() {
+      return this.file.changed || this.file.tempFile || this.file.staged;
+    },
+  },
+  mounted() {
+    if (this.hasPathAtCurrentRoute()) {
+      this.scrollIntoView(true);
+    }
   },
   updated() {
     if (this.file.type === 'blob' && this.file.active) {
-      this.$el.scrollIntoView();
+      this.scrollIntoView();
     }
   },
   methods: {
-    ...mapActions(['toggleTreeOpen', 'updateDelayViewerUpdated']),
+    ...mapActions(['toggleTreeOpen']),
     clickFile() {
       // Manual Action if a tree is selected/opened
-      if (
-        this.isTree &&
-        this.$router.currentRoute.path === `/project${this.file.url}`
-      ) {
+      if (this.isTree && this.hasUrlAtCurrentRoute()) {
         this.toggleTreeOpen(this.file.path);
       }
 
-      const delayPromise = this.file.changed
-        ? Promise.resolve()
-        : this.updateDelayViewerUpdated(true);
+      router.push(`/project${this.file.url}`);
+    },
+    scrollIntoView(isInit = false) {
+      const block = isInit && this.isTree ? 'center' : 'nearest';
 
-      return delayPromise.then(() => {
-        router.push(`/project${this.file.url}`);
+      this.$el.scrollIntoView({
+        behavior: 'smooth',
+        block,
       });
     },
+    hasPathAtCurrentRoute() {
+      if (!this.$router || !this.$router.currentRoute) {
+        return false;
+      }
+
+      // - strip route up to "/-/" and ending "/"
+      const routePath = this.$router.currentRoute.path
+        .replace(/^.*?[/]-[/]/g, '')
+        .replace(/[/]$/g, '');
+
+      // - strip ending "/"
+      const filePath = this.file.path
+        .replace(/[/]$/g, '');
+
+      return filePath === routePath;
+    },
+    hasUrlAtCurrentRoute() {
+      return this.$router.currentRoute.path === `/project${this.file.url}`;
+    },
   },
 };
 </script>
@@ -78,17 +149,17 @@ export default {
 <template>
   <div>
     <div
-      class="file"
       :class="fileClass"
+      class="file"
+      role="button"
+      @click="clickFile"
     >
       <div
         class="file-name"
-        @click="clickFile"
-        role="button"
       >
         <span
-          class="ide-file-name str-truncated"
           :style="levelIndentation"
+          class="ide-file-name str-truncated"
         >
           <file-icon
             :file-name="file.name"
@@ -102,17 +173,40 @@ export default {
             :file="file"
           />
         </span>
-        <changed-file-icon
-          :file="file"
-          v-if="file.changed || file.tempFile"
-          class="prepend-top-5 pull-right"
-        />
+        <span class="float-right ide-file-icon-holder">
+          <mr-file-icon
+            v-if="file.mrChange"
+          />
+          <span
+            v-if="showTreeChangesCount"
+            class="ide-tree-changes"
+          >
+            {{ changesCount }}
+            <icon
+              v-tooltip
+              :title="folderChangesTooltip"
+              :size="12"
+              data-container="body"
+              data-placement="right"
+              name="file-modified"
+              css-classes="prepend-left-5 multi-file-modified"
+            />
+          </span>
+          <changed-file-icon
+            v-else-if="showChangedFileIcon"
+            :file="file"
+            :show-tooltip="true"
+            :show-staged-icon="true"
+            :force-modified-icon="true"
+            class="float-right"
+          />
+        </span>
         <new-dropdown
-          v-if="isTree"
+          v-if="isTree && !disableActionDropdown"
           :project-id="file.projectId"
           :branch="file.branchId"
           :path="file.path"
-          class="pull-right prepend-left-8"
+          class="float-right prepend-left-8"
         />
       </div>
     </div>
diff --git a/app/assets/javascripts/ide/components/repo_file_buttons.vue b/app/assets/javascripts/ide/components/repo_file_buttons.vue
deleted file mode 100644
index 4ea8cf7504b..00000000000
--- a/app/assets/javascripts/ide/components/repo_file_buttons.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-export default {
-  props: {
-    file: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    showButtons() {
-      return this.file.rawPath ||
-        this.file.blamePath ||
-        this.file.commitsPath ||
-        this.file.permalink;
-    },
-    rawDownloadButtonLabel() {
-      return this.file.binary ? 'Download' : 'Raw';
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    v-if="showButtons"
-    class="multi-file-editor-btn-group"
-  >
-    <a
-      :href="file.rawPath"
-      target="_blank"
-      class="btn btn-default btn-sm raw"
-      rel="noopener noreferrer">
-      {{ rawDownloadButtonLabel }}
-    </a>
-
-    <div
-      class="btn-group"
-      role="group"
-      aria-label="File actions"
-    >
-      <a
-        :href="file.blamePath"
-        class="btn btn-default btn-sm blame"
-      >
-        Blame
-      </a>
-      <a
-        :href="file.commitsPath"
-        class="btn btn-default btn-sm history"
-      >
-        History
-      </a>
-      <a
-        :href="file.permalink"
-        class="btn btn-default btn-sm permalink"
-      >
-        Permalink
-      </a>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
index 25d311142d5..76a3333be50 100644
--- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue
+++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
@@ -1,33 +1,33 @@
 <script>
-  import icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import '~/lib/utils/datetime_utility';
+import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import '~/lib/utils/datetime_utility';
 
-  export default {
-    components: {
-      icon,
+export default {
+  components: {
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
+  },
+  computed: {
+    lockTooltip() {
+      return `Locked by ${this.file.file_lock.user.name}`;
     },
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
-    },
-    computed: {
-      lockTooltip() {
-        return `Locked by ${this.file.file_lock.user.name}`;
-      },
-    },
-  };
+  },
+};
 </script>
 
 <template>
   <span
-    v-if="file.file_lock"
     v-tooltip
+    v-if="file.file_lock"
     :title="lockTooltip"
     data-container="body"
   >
diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue
index 79af8c0b0c7..7a5ede82253 100644
--- a/app/assets/javascripts/ide/components/repo_loading_file.vue
+++ b/app/assets/javascripts/ide/components/repo_loading_file.vue
@@ -25,16 +25,16 @@
       />
     </td>
     <template v-if="!leftPanelCollapsed">
-      <td class="hidden-sm hidden-xs">
+      <td class="d-none d-sm-none d-md-block">
         <skeleton-loading-container
           :small="true"
         />
       </td>
 
-      <td class="hidden-xs">
+      <td class="d-none d-sm-block">
         <skeleton-loading-container
-          class="animation-container-right"
           :small="true"
+          class="animation-container-right"
         />
       </td>
     </template>
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index c337bc813e6..03772ae4a4c 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -1,98 +1,112 @@
 <script>
-  import { mapActions } from 'vuex';
+import { mapActions } from 'vuex';
 
-  import fileIcon from '~/vue_shared/components/file_icon.vue';
-  import icon from '~/vue_shared/components/icon.vue';
-  import fileStatusIcon from './repo_file_status_icon.vue';
-  import changedFileIcon from './changed_file_icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import FileStatusIcon from './repo_file_status_icon.vue';
+import ChangedFileIcon from './changed_file_icon.vue';
 
-  export default {
-    components: {
-      fileStatusIcon,
-      fileIcon,
-      icon,
-      changedFileIcon,
+export default {
+  components: {
+    FileStatusIcon,
+    FileIcon,
+    Icon,
+    ChangedFileIcon,
+  },
+  props: {
+    tab: {
+      type: Object,
+      required: true,
     },
-    props: {
-      tab: {
-        type: Object,
-        required: true,
-      },
+  },
+  data() {
+    return {
+      tabMouseOver: false,
+    };
+  },
+  computed: {
+    closeLabel() {
+      if (this.fileHasChanged) {
+        return `${this.tab.name} changed`;
+      }
+      return `Close ${this.tab.name}`;
     },
-    data() {
-      return {
-        tabMouseOver: false,
-      };
+    showChangedIcon() {
+      if (this.tab.pending) return true;
+
+      return this.fileHasChanged ? !this.tabMouseOver : false;
     },
-    computed: {
-      closeLabel() {
-        if (this.tab.changed || this.tab.tempFile) {
-          return `${this.tab.name} changed`;
-        }
-        return `Close ${this.tab.name}`;
-      },
-      showChangedIcon() {
-        return this.tab.changed ? !this.tabMouseOver : false;
-      },
+    fileHasChanged() {
+      return this.tab.changed || this.tab.tempFile || this.tab.staged;
     },
+  },
+
+  methods: {
+    ...mapActions(['closeFile', 'updateDelayViewerUpdated', 'openPendingTab']),
+    clickFile(tab) {
+      if (tab.active) return;
+
+      this.updateDelayViewerUpdated(true);
 
-    methods: {
-      ...mapActions([
-        'closeFile',
-      ]),
-      clickFile(tab) {
+      if (tab.pending) {
+        this.openPendingTab({ file: tab, keyPrefix: tab.staged ? 'staged' : 'unstaged' });
+      } else {
         this.$router.push(`/project${tab.url}`);
-      },
-      mouseOverTab() {
-        if (this.tab.changed) {
-          this.tabMouseOver = true;
-        }
-      },
-      mouseOutTab() {
-        if (this.tab.changed) {
-          this.tabMouseOver = false;
-        }
-      },
+      }
+    },
+    mouseOverTab() {
+      if (this.fileHasChanged) {
+        this.tabMouseOver = true;
+      }
+    },
+    mouseOutTab() {
+      if (this.fileHasChanged) {
+        this.tabMouseOver = false;
+      }
     },
-  };
+  },
+};
 </script>
 
 <template>
   <li
+    :class="{
+      active: tab.active
+    }"
     @click="clickFile(tab)"
     @mouseover="mouseOverTab"
     @mouseout="mouseOutTab"
   >
+    <div
+      :title="tab.url"
+      class="multi-file-tab"
+    >
+      <file-icon
+        :file-name="tab.name"
+        :size="16"
+      />
+      {{ tab.name }}
+      <file-status-icon
+        :file="tab"
+      />
+    </div>
     <button
+      :aria-label="closeLabel"
+      :disabled="tab.pending"
       type="button"
       class="multi-file-tab-close"
-      @click.stop.prevent="closeFile(tab.path)"
-      :aria-label="closeLabel"
+      @click.stop.prevent="closeFile(tab)"
     >
       <icon
         v-if="!showChangedIcon"
-        name="close"
         :size="12"
+        name="close"
       />
       <changed-file-icon
         v-else
         :file="tab"
+        :force-modified-icon="true"
       />
     </button>
-
-    <div
-      class="multi-file-tab"
-      :class="{active : tab.active }"
-      :title="tab.url"
-    >
-      <file-icon
-        :file-name="tab.name"
-        :size="16"
-      />
-      {{ tab.name }}
-      <file-status-icon
-        :file="tab"
-      />
-    </div>
   </li>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index 8ea64ddf84a..c12a63e26be 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -1,49 +1,59 @@
 <script>
-  import { mapActions } from 'vuex';
-  import RepoTab from './repo_tab.vue';
-  import EditorMode from './editor_mode_dropdown.vue';
+import { mapActions } from 'vuex';
+import RepoTab from './repo_tab.vue';
+import EditorMode from './editor_mode_dropdown.vue';
+import router from '../ide_router';
 
-  export default {
-    components: {
-      RepoTab,
-      EditorMode,
+export default {
+  components: {
+    RepoTab,
+    EditorMode,
+  },
+  props: {
+    activeFile: {
+      type: Object,
+      required: true,
     },
-    props: {
-      files: {
-        type: Array,
-        required: true,
-      },
-      viewer: {
-        type: String,
-        required: true,
-      },
-      hasChanges: {
-        type: Boolean,
-        required: true,
-      },
+    files: {
+      type: Array,
+      required: true,
     },
-    data() {
-      return {
-        showShadow: false,
-      };
+    viewer: {
+      type: String,
+      required: true,
     },
-    updated() {
-      if (!this.$refs.tabsScroller) return;
-
-      this.showShadow =
-        this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
+    hasChanges: {
+      type: Boolean,
+      required: true,
+    },
+    mergeRequestId: {
+      type: String,
+      required: false,
+      default: '',
     },
-    methods: {
-      ...mapActions(['updateViewer']),
+  },
+  methods: {
+    ...mapActions(['updateViewer', 'removePendingTab']),
+    openFileViewer(viewer) {
+      this.updateViewer(viewer);
+
+      if (this.activeFile.pending) {
+        return this.removePendingTab(this.activeFile).then(() => {
+          router.push(`/project${this.activeFile.url}`);
+        });
+      }
+
+      return null;
     },
-  };
+  },
+};
 </script>
 
 <template>
   <div class="multi-file-tabs">
     <ul
-      class="list-unstyled append-bottom-0"
       ref="tabsScroller"
+      class="list-unstyled append-bottom-0"
     >
       <repo-tab
         v-for="tab in files"
@@ -51,11 +61,5 @@
         :tab="tab"
       />
     </ul>
-    <editor-mode
-      :viewer="viewer"
-      :show-shadow="showShadow"
-      :has-changes="hasChanges"
-      @click="updateViewer"
-    />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/resizable_panel.vue b/app/assets/javascripts/ide/components/resizable_panel.vue
index faa690ecba0..7277fcb7617 100644
--- a/app/assets/javascripts/ide/components/resizable_panel.vue
+++ b/app/assets/javascripts/ide/components/resizable_panel.vue
@@ -1,76 +1,73 @@
 <script>
-  import { mapActions, mapState } from 'vuex';
-  import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
+import { mapActions, mapState } from 'vuex';
+import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 
-  export default {
-    components: {
-      PanelResizer,
+export default {
+  components: {
+    PanelResizer,
+  },
+  props: {
+    collapsible: {
+      type: Boolean,
+      required: true,
     },
-    props: {
-      collapsible: {
-        type: Boolean,
-        required: true,
-      },
-      initialWidth: {
-        type: Number,
-        required: true,
-      },
-      minSize: {
-        type: Number,
-        required: false,
-        default: 200,
-      },
-      side: {
-        type: String,
-        required: true,
-      },
+    initialWidth: {
+      type: Number,
+      required: true,
     },
-    data() {
-      return {
-        width: this.initialWidth,
-      };
+    minSize: {
+      type: Number,
+      required: false,
+      default: 340,
     },
-    computed: {
-      ...mapState({
-        collapsed(state) {
-          return state[`${this.side}PanelCollapsed`];
-        },
-      }),
-      panelStyle() {
-        if (!this.collapsed) {
-          return {
-            width: `${this.width}px`,
-          };
-        }
-
-        return {};
-      },
+    side: {
+      type: String,
+      required: true,
     },
-    methods: {
-      ...mapActions([
-        'setPanelCollapsedStatus',
-        'setResizingStatus',
-      ]),
-      toggleFullbarCollapsed() {
-        if (this.collapsed && this.collapsible) {
-          this.setPanelCollapsedStatus({
-            side: this.side,
-            collapsed: !this.collapsed,
-          });
-        }
+  },
+  data() {
+    return {
+      width: this.initialWidth,
+    };
+  },
+  computed: {
+    ...mapState({
+      collapsed(state) {
+        return state[`${this.side}PanelCollapsed`];
       },
+    }),
+    panelStyle() {
+      if (!this.collapsed) {
+        return {
+          width: `${this.width}px`,
+        };
+      }
+
+      return {};
+    },
+  },
+  methods: {
+    ...mapActions(['setPanelCollapsedStatus', 'setResizingStatus']),
+    toggleFullbarCollapsed() {
+      if (this.collapsed && this.collapsible) {
+        this.setPanelCollapsedStatus({
+          side: this.side,
+          collapsed: !this.collapsed,
+        });
+      }
     },
-    maxSize: (window.innerWidth / 2),
-  };
+  },
+  maxSize: window.innerWidth / 2,
+};
 </script>
 
 <template>
   <div
-    class="multi-file-commit-panel"
     :class="{
       'is-collapsed': collapsed && collapsible,
     }"
     :style="panelStyle"
+    class="multi-file-commit-panel"
     @click="toggleFullbarCollapsed"
   >
     <slot></slot>
@@ -80,9 +77,9 @@
       :start-size="initialWidth"
       :min-size="minSize"
       :max-size="$options.maxSize"
+      :side="side === 'right' ? 'left' : 'right'"
       @resize-start="setResizingStatus(true)"
       @resize-end="setResizingStatus(false)"
-      :side="side === 'right' ? 'left' : 'right'"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
new file mode 100644
index 00000000000..12e0c3aeef0
--- /dev/null
+++ b/app/assets/javascripts/ide/constants.js
@@ -0,0 +1,39 @@
+// Fuzzy file finder
+export const MAX_FILE_FINDER_RESULTS = 40;
+export const FILE_FINDER_ROW_HEIGHT = 55;
+export const FILE_FINDER_EMPTY_ROW_HEIGHT = 33;
+
+export const MAX_WINDOW_HEIGHT_COMPACT = 750;
+
+// Commit message textarea
+export const MAX_TITLE_LENGTH = 50;
+export const MAX_BODY_LENGTH = 72;
+
+export const activityBarViews = {
+  edit: 'ide-tree',
+  commit: 'commit-section',
+  review: 'ide-review',
+};
+
+export const viewerTypes = {
+  mr: 'mrdiff',
+  edit: 'editor',
+  diff: 'diff',
+};
+
+export const diffModes = {
+  replaced: 'replaced',
+  new: 'new',
+  deleted: 'deleted',
+  renamed: 'renamed',
+};
+
+export const rightSidebarViews = {
+  pipelines: 'pipelines-list',
+  jobsDetail: 'jobs-detail',
+};
+
+export const stageKeys = {
+  unstaged: 'unstaged',
+  staged: 'staged',
+};
diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index db89c1d44db..b52618f4fde 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import flash from '~/flash';
 import store from './stores';
+import { activityBarViews } from './constants';
 
 Vue.use(VueRouter);
 
@@ -36,15 +37,15 @@ const router = new VueRouter({
   base: `${gon.relative_url_root}/-/ide/`,
   routes: [
     {
-      path: '/project/:namespace/:project',
+      path: '/project/:namespace/:project+',
       component: EmptyRouterComponent,
       children: [
         {
-          path: ':targetmode/:branch/*',
+          path: ':targetmode(edit|tree|blob)/*',
           component: EmptyRouterComponent,
         },
         {
-          path: 'mr/:mrid',
+          path: 'merge_requests/:mrid',
           component: EmptyRouterComponent,
         },
       ],
@@ -62,24 +63,32 @@ router.beforeEach((to, from, next) => {
       .then(() => {
         const fullProjectId = `${to.params.namespace}/${to.params.project}`;
 
-        if (to.params.branch) {
+        const baseSplit = (to.params[0] && to.params[0].split('/-/')) || [''];
+        const branchId = baseSplit[0].slice(-1) === '/' ? baseSplit[0].slice(0, -1) : baseSplit[0];
+
+        if (branchId) {
+          const basePath = baseSplit.length > 1 ? baseSplit[1] : '';
+
+          store.dispatch('setCurrentBranchId', branchId);
+
           store.dispatch('getBranchData', {
             projectId: fullProjectId,
-            branchId: to.params.branch,
+            branchId,
           });
 
           store
             .dispatch('getFiles', {
               projectId: fullProjectId,
-              branchId: to.params.branch,
+              branchId,
             })
             .then(() => {
-              if (to.params[0]) {
-                const path =
-                  to.params[0].slice(-1) === '/'
-                    ? to.params[0].slice(0, -1)
-                    : to.params[0];
-                const treeEntry = store.state.entries[path];
+              if (basePath) {
+                const path = basePath.slice(-1) === '/' ? basePath.slice(0, -1) : basePath;
+                const treeEntryKey = Object.keys(store.state.entries).find(
+                  key => key === path && !store.state.entries[key].pending,
+                );
+                const treeEntry = store.state.entries[treeEntryKey];
+
                 if (treeEntry) {
                   store.dispatch('handleTreeEntryAction', treeEntry);
                 }
@@ -96,6 +105,60 @@ router.beforeEach((to, from, next) => {
               );
               throw e;
             });
+        } else if (to.params.mrid) {
+          store
+            .dispatch('getMergeRequestData', {
+              projectId: fullProjectId,
+              mergeRequestId: to.params.mrid,
+            })
+            .then(mr => {
+              store.dispatch('updateActivityBarView', activityBarViews.review);
+
+              store.dispatch('getBranchData', {
+                projectId: fullProjectId,
+                branchId: mr.source_branch,
+              });
+
+              return store.dispatch('getFiles', {
+                projectId: fullProjectId,
+                branchId: mr.source_branch,
+              });
+            })
+            .then(() =>
+              store.dispatch('getMergeRequestVersions', {
+                projectId: fullProjectId,
+                mergeRequestId: to.params.mrid,
+              }),
+            )
+            .then(() =>
+              store.dispatch('getMergeRequestChanges', {
+                projectId: fullProjectId,
+                mergeRequestId: to.params.mrid,
+              }),
+            )
+            .then(mrChanges => {
+              mrChanges.changes.forEach((change, ind) => {
+                const changeTreeEntry = store.state.entries[change.new_path];
+
+                if (changeTreeEntry) {
+                  store.dispatch('setFileMrChange', {
+                    file: changeTreeEntry,
+                    mrChange: change,
+                  });
+
+                  if (ind < 10) {
+                    store.dispatch('getFileData', {
+                      path: change.new_path,
+                      makeFileActive: ind === 0,
+                    });
+                  }
+                }
+              });
+            })
+            .catch(e => {
+              flash('Error while loading the merge request. Please try again.');
+              throw e;
+            });
         }
       })
       .catch(e => {
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index cbfb3dc54f2..2d74192e6b3 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -1,10 +1,13 @@
 import Vue from 'vue';
+import { mapActions } from 'vuex';
 import Translate from '~/vue_shared/translate';
 import ide from './components/ide.vue';
 import store from './stores';
 import router from './ide_router';
 
-function initIde(el) {
+Vue.use(Translate);
+
+export function initIde(el) {
   if (!el) return null;
 
   return new Vue({
@@ -14,20 +17,32 @@ function initIde(el) {
     components: {
       ide,
     },
-    render(createElement) {
-      return createElement('ide', {
-        props: {
-          emptyStateSvgPath: el.dataset.emptyStateSvgPath,
-          noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
-          committedStateSvgPath: el.dataset.committedStateSvgPath,
-        },
+    created() {
+      this.setEmptyStateSvgs({
+        emptyStateSvgPath: el.dataset.emptyStateSvgPath,
+        noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
+        committedStateSvgPath: el.dataset.committedStateSvgPath,
+        pipelinesEmptyStateSvgPath: el.dataset.pipelinesEmptyStateSvgPath,
       });
+      this.setLinks({
+        ciHelpPagePath: el.dataset.ciHelpPagePath,
+      });
+    },
+    methods: {
+      ...mapActions(['setEmptyStateSvgs', 'setLinks']),
+    },
+    render(createElement) {
+      return createElement('ide');
     },
   });
 }
 
-const ideElement = document.getElementById('ide');
-
-Vue.use(Translate);
-
-initIde(ideElement);
+// tell webpack to load assets from origin so that web workers don't break
+export function resetServiceWorkersPublicPath() {
+  // __webpack_public_path__ is a global variable that can be used to adjust
+  // the webpack publicPath setting at runtime.
+  // see: https://webpack.js.org/guides/public-path/
+  const relativeRootPath = (gon && gon.relative_url_root) || '';
+  const webpackAssetPath = `${relativeRootPath}/assets/webpack/`;
+  __webpack_public_path__ = webpackAssetPath; // eslint-disable-line camelcase
+}
diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index 73cd684351c..78e6f632728 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/app/assets/javascripts/ide/lib/common/model.js
@@ -1,37 +1,45 @@
-/* global monaco */
+import { editor as monacoEditor, Uri } from 'monaco-editor';
 import Disposable from './disposable';
 import eventHub from '../../eventhub';
 
 export default class Model {
-  constructor(monaco, file) {
-    this.monaco = monaco;
+  constructor(file, head = null) {
     this.disposable = new Disposable();
     this.file = file;
+    this.head = head;
     this.content = file.content !== '' ? file.content : file.raw;
 
     this.disposable.add(
-      (this.originalModel = this.monaco.editor.createModel(
-        this.file.raw,
+      (this.originalModel = monacoEditor.createModel(
+        head ? head.content : this.file.raw,
         undefined,
-        new this.monaco.Uri(null, null, `original/${this.file.path}`),
+        new Uri(false, false, `original/${this.path}`),
       )),
-      (this.model = this.monaco.editor.createModel(
+      (this.model = monacoEditor.createModel(
         this.content,
         undefined,
-        new this.monaco.Uri(null, null, this.file.path),
+        new Uri(false, false, this.path),
       )),
     );
-
-    this.events = new Map();
+    if (this.file.mrChange) {
+      this.disposable.add(
+        (this.baseModel = monacoEditor.createModel(
+          this.file.baseRaw,
+          undefined,
+          new Uri(false, false, `target/${this.path}`),
+        )),
+      );
+    }
+
+    this.events = new Set();
 
     this.updateContent = this.updateContent.bind(this);
+    this.updateNewContent = this.updateNewContent.bind(this);
     this.dispose = this.dispose.bind(this);
 
-    eventHub.$on(`editor.update.model.dispose.${this.file.path}`, this.dispose);
-    eventHub.$on(
-      `editor.update.model.content.${this.file.path}`,
-      this.updateContent,
-    );
+    eventHub.$on(`editor.update.model.dispose.${this.file.key}`, this.dispose);
+    eventHub.$on(`editor.update.model.content.${this.file.key}`, this.updateContent);
+    eventHub.$on(`editor.update.model.new.content.${this.file.key}`, this.updateNewContent);
   }
 
   get url() {
@@ -47,7 +55,7 @@ export default class Model {
   }
 
   get path() {
-    return this.file.path;
+    return this.file.key;
   }
 
   getModel() {
@@ -58,33 +66,45 @@ export default class Model {
     return this.originalModel;
   }
 
+  getBaseModel() {
+    return this.baseModel;
+  }
+
   setValue(value) {
     this.getModel().setValue(value);
   }
 
   onChange(cb) {
-    this.events.set(
-      this.path,
-      this.disposable.add(this.model.onDidChangeContent(e => cb(this, e))),
-    );
+    this.events.add(this.disposable.add(this.model.onDidChangeContent(e => cb(this, e))));
+  }
+
+  onDispose(cb) {
+    this.events.add(cb);
   }
 
-  updateContent(content) {
+  updateContent({ content, changed }) {
     this.getOriginalModel().setValue(content);
+
+    if (!changed) {
+      this.getModel().setValue(content);
+    }
+  }
+
+  updateNewContent(content) {
     this.getModel().setValue(content);
   }
 
   dispose() {
     this.disposable.dispose();
+
+    this.events.forEach(cb => {
+      if (typeof cb === 'function') cb();
+    });
+
     this.events.clear();
 
-    eventHub.$off(
-      `editor.update.model.dispose.${this.file.path}`,
-      this.dispose,
-    );
-    eventHub.$off(
-      `editor.update.model.content.${this.file.path}`,
-      this.updateContent,
-    );
+    eventHub.$off(`editor.update.model.dispose.${this.file.key}`, this.dispose);
+    eventHub.$off(`editor.update.model.content.${this.file.key}`, this.updateContent);
+    eventHub.$off(`editor.update.model.new.content.${this.file.key}`, this.updateNewContent);
   }
 }
diff --git a/app/assets/javascripts/ide/lib/common/model_manager.js b/app/assets/javascripts/ide/lib/common/model_manager.js
index 57d5e59a88b..bd9b8fc3fcc 100644
--- a/app/assets/javascripts/ide/lib/common/model_manager.js
+++ b/app/assets/javascripts/ide/lib/common/model_manager.js
@@ -3,31 +3,30 @@ import Disposable from './disposable';
 import Model from './model';
 
 export default class ModelManager {
-  constructor(monaco) {
-    this.monaco = monaco;
+  constructor() {
     this.disposable = new Disposable();
     this.models = new Map();
   }
 
-  hasCachedModel(path) {
-    return this.models.has(path);
+  hasCachedModel(key) {
+    return this.models.has(key);
   }
 
-  getModel(path) {
-    return this.models.get(path);
+  getModel(key) {
+    return this.models.get(key);
   }
 
-  addModel(file) {
-    if (this.hasCachedModel(file.path)) {
-      return this.getModel(file.path);
+  addModel(file, head = null) {
+    if (this.hasCachedModel(file.key)) {
+      return this.getModel(file.key);
     }
 
-    const model = new Model(this.monaco, file);
+    const model = new Model(file, head);
     this.models.set(model.path, model);
     this.disposable.add(model);
 
     eventHub.$on(
-      `editor.update.model.dispose.${file.path}`,
+      `editor.update.model.dispose.${file.key}`,
       this.removeCachedModel.bind(this, file),
     );
 
@@ -35,12 +34,9 @@ export default class ModelManager {
   }
 
   removeCachedModel(file) {
-    this.models.delete(file.path);
+    this.models.delete(file.key);
 
-    eventHub.$off(
-      `editor.update.model.dispose.${file.path}`,
-      this.removeCachedModel,
-    );
+    eventHub.$off(`editor.update.model.dispose.${file.key}`, this.removeCachedModel);
   }
 
   dispose() {
diff --git a/app/assets/javascripts/ide/lib/decorations/controller.js b/app/assets/javascripts/ide/lib/decorations/controller.js
index 42904774747..13d477bb2cf 100644
--- a/app/assets/javascripts/ide/lib/decorations/controller.js
+++ b/app/assets/javascripts/ide/lib/decorations/controller.js
@@ -38,6 +38,15 @@ export default class DecorationsController {
     );
   }
 
+  hasDecorations(model) {
+    return this.decorations.has(model.url);
+  }
+
+  removeDecorations(model) {
+    this.decorations.delete(model.url);
+    this.editorDecorations.delete(model.url);
+  }
+
   dispose() {
     this.decorations.clear();
     this.editorDecorations.clear();
diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js
index b136545ad11..046e562ba2b 100644
--- a/app/assets/javascripts/ide/lib/diff/controller.js
+++ b/app/assets/javascripts/ide/lib/diff/controller.js
@@ -1,9 +1,9 @@
-/* global monaco */
+import { Range } from 'monaco-editor';
 import { throttle } from 'underscore';
 import DirtyDiffWorker from './diff_worker';
 import Disposable from '../common/disposable';
 
-export const getDiffChangeType = (change) => {
+export const getDiffChangeType = change => {
   if (change.modified) {
     return 'modified';
   } else if (change.added) {
@@ -16,12 +16,7 @@ export const getDiffChangeType = (change) => {
 };
 
 export const getDecorator = change => ({
-  range: new monaco.Range(
-    change.lineNumber,
-    1,
-    change.endLineNumber,
-    1,
-  ),
+  range: new Range(change.lineNumber, 1, change.endLineNumber, 1),
   options: {
     isWholeLine: true,
     linesDecorationsClassName: `dirty-diff dirty-diff-${getDiffChangeType(change)}`,
@@ -31,6 +26,7 @@ export const getDecorator = change => ({
 export default class DirtyDiffController {
   constructor(modelManager, decorationsController) {
     this.disposable = new Disposable();
+    this.models = new Map();
     this.editorSimpleWorker = null;
     this.modelManager = modelManager;
     this.decorationsController = decorationsController;
@@ -42,7 +38,15 @@ export default class DirtyDiffController {
   }
 
   attachModel(model) {
+    if (this.models.has(model.url)) return;
+
     model.onChange(() => this.throttledComputeDiff(model));
+    model.onDispose(() => {
+      this.decorationsController.removeDecorations(model);
+      this.models.delete(model.url);
+    });
+
+    this.models.set(model.url, model);
   }
 
   computeDiff(model) {
@@ -54,7 +58,11 @@ export default class DirtyDiffController {
   }
 
   reDecorate(model) {
-    this.decorationsController.decorate(model);
+    if (this.decorationsController.hasDecorations(model)) {
+      this.decorationsController.decorate(model);
+    } else {
+      this.computeDiff(model);
+    }
   }
 
   decorate({ data }) {
@@ -65,6 +73,7 @@ export default class DirtyDiffController {
 
   dispose() {
     this.disposable.dispose();
+    this.models.clear();
 
     this.dirtyDiffWorker.removeEventListener('message', this.decorate);
     this.dirtyDiffWorker.terminate();
diff --git a/app/assets/javascripts/ide/lib/diff/diff_worker.js b/app/assets/javascripts/ide/lib/diff/diff_worker.js
index e74c4046330..78b2eab6399 100644
--- a/app/assets/javascripts/ide/lib/diff/diff_worker.js
+++ b/app/assets/javascripts/ide/lib/diff/diff_worker.js
@@ -1,8 +1,10 @@
 import { computeDiff } from './diff';
 
+// eslint-disable-next-line no-restricted-globals
 self.addEventListener('message', (e) => {
-  const data = e.data;
+  const { data } = e;
 
+  // eslint-disable-next-line no-restricted-globals
   self.postMessage({
     path: data.path,
     changes: computeDiff(data.originalContent, data.newContent),
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 38de2fe2b27..02038fcb534 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -1,10 +1,18 @@
 import _ from 'underscore';
+import { editor as monacoEditor, KeyCode, KeyMod } from 'monaco-editor';
+import store from '../stores';
 import DecorationsController from './decorations/controller';
 import DirtyDiffController from './diff/controller';
 import Disposable from './common/disposable';
 import ModelManager from './common/model_manager';
 import editorOptions, { defaultEditorOptions } from './editor_options';
 import gitlabTheme from './themes/gl_theme';
+import keymap from './keymap.json';
+
+function setupMonacoTheme() {
+  monacoEditor.defineTheme(gitlabTheme.themeName, gitlabTheme.monacoTheme);
+  monacoEditor.setTheme('gitlab');
+}
 
 export const clearDomElement = el => {
   if (!el || !el.firstChild) return;
@@ -15,24 +23,22 @@ export const clearDomElement = el => {
 };
 
 export default class Editor {
-  static create(monaco) {
-    if (this.editorInstance) return this.editorInstance;
-
-    this.editorInstance = new Editor(monaco);
-
+  static create() {
+    if (!this.editorInstance) {
+      this.editorInstance = new Editor();
+    }
     return this.editorInstance;
   }
 
-  constructor(monaco) {
-    this.monaco = monaco;
+  constructor() {
     this.currentModel = null;
     this.instance = null;
     this.dirtyDiffController = null;
     this.disposable = new Disposable();
-    this.modelManager = new ModelManager(this.monaco);
+    this.modelManager = new ModelManager();
     this.decorationsController = new DecorationsController(this);
 
-    this.setupMonacoTheme();
+    setupMonacoTheme();
 
     this.debouncedUpdate = _.debounce(() => {
       this.updateDimensions();
@@ -44,7 +50,7 @@ export default class Editor {
       clearDomElement(domElement);
 
       this.disposable.add(
-        (this.instance = this.monaco.editor.create(domElement, {
+        (this.instance = monacoEditor.create(domElement, {
           ...defaultEditorOptions,
         })),
         (this.dirtyDiffController = new DirtyDiffController(
@@ -53,31 +59,40 @@ export default class Editor {
         )),
       );
 
+      this.addCommands();
+
       window.addEventListener('resize', this.debouncedUpdate, false);
     }
   }
 
-  createDiffInstance(domElement) {
+  createDiffInstance(domElement, readOnly = true) {
     if (!this.instance) {
       clearDomElement(domElement);
 
       this.disposable.add(
-        (this.instance = this.monaco.editor.createDiffEditor(domElement, {
+        (this.instance = monacoEditor.createDiffEditor(domElement, {
           ...defaultEditorOptions,
-          readOnly: true,
+          quickSuggestions: false,
+          occurrencesHighlight: false,
+          renderSideBySide: Editor.renderSideBySide(domElement),
+          readOnly,
+          renderLineHighlight: readOnly ? 'all' : 'none',
+          hideCursorInOverviewRuler: !readOnly,
         })),
       );
 
+      this.addCommands();
+
       window.addEventListener('resize', this.debouncedUpdate, false);
     }
   }
 
-  createModel(file) {
-    return this.modelManager.addModel(file);
+  createModel(file, head = null) {
+    return this.modelManager.addModel(file, head);
   }
 
   attachModel(model) {
-    if (this.instance.getEditorType() === 'vs.editor.IDiffEditor') {
+    if (this.isDiffEditorType) {
       this.instance.setModel({
         original: model.getOriginalModel(),
         modified: model.getModel(),
@@ -105,13 +120,15 @@ export default class Editor {
     if (this.dirtyDiffController) this.dirtyDiffController.reDecorate(model);
   }
 
-  setupMonacoTheme() {
-    this.monaco.editor.defineTheme(
-      gitlabTheme.themeName,
-      gitlabTheme.monacoTheme,
-    );
+  attachMergeRequestModel(model) {
+    this.instance.setModel({
+      original: model.getBaseModel(),
+      modified: model.getModel(),
+    });
 
-    this.monaco.editor.setTheme('gitlab');
+    monacoEditor.createDiffNavigator(this.instance, {
+      alwaysRevealFirst: true,
+    });
   }
 
   clearEditor() {
@@ -141,6 +158,7 @@ export default class Editor {
 
   updateDimensions() {
     this.instance.layout();
+    this.updateDiffView();
   }
 
   setPosition({ lineNumber, column }) {
@@ -157,8 +175,49 @@ export default class Editor {
   onPositionChange(cb) {
     if (!this.instance.onDidChangeCursorPosition) return;
 
-    this.disposable.add(
-      this.instance.onDidChangeCursorPosition(e => cb(this.instance, e)),
-    );
+    this.disposable.add(this.instance.onDidChangeCursorPosition(e => cb(this.instance, e)));
+  }
+
+  updateDiffView() {
+    if (!this.isDiffEditorType) return;
+
+    this.instance.updateOptions({
+      renderSideBySide: Editor.renderSideBySide(this.instance.getDomNode()),
+    });
+  }
+
+  get isDiffEditorType() {
+    return this.instance.getEditorType() === 'vs.editor.IDiffEditor';
+  }
+
+  static renderSideBySide(domElement) {
+    return domElement.offsetWidth >= 700;
+  }
+
+  addCommands() {
+    const getKeyCode = key => {
+      const monacoKeyMod = key.indexOf('KEY_') === 0;
+
+      return monacoKeyMod ? KeyCode[key] : KeyMod[key];
+    };
+
+    keymap.forEach(command => {
+      const keybindings = command.bindings.map(binding => {
+        const keys = binding.split('+');
+
+        // eslint-disable-next-line no-bitwise
+        return keys.length > 1 ? getKeyCode(keys[0]) | getKeyCode(keys[1]) : getKeyCode(keys[0]);
+      });
+
+      this.instance.addAction({
+        id: command.id,
+        label: command.label,
+        keybindings,
+        run() {
+          store.dispatch(command.action.name, command.action.params);
+          return null;
+        },
+      });
+    });
   }
 }
diff --git a/app/assets/javascripts/ide/lib/editor_options.js b/app/assets/javascripts/ide/lib/editor_options.js
index d69d4b8c615..e35595ab1fd 100644
--- a/app/assets/javascripts/ide/lib/editor_options.js
+++ b/app/assets/javascripts/ide/lib/editor_options.js
@@ -6,10 +6,12 @@ export const defaultEditorOptions = {
   minimap: {
     enabled: false,
   },
+  wordWrap: 'on',
 };
 
 export default [
   {
     readOnly: model => !!model.file.file_lock,
+    quickSuggestions: model => !(model.language === 'markdown'),
   },
 ];
diff --git a/app/assets/javascripts/ide/lib/keymap.json b/app/assets/javascripts/ide/lib/keymap.json
new file mode 100644
index 00000000000..131abfebbed
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/keymap.json
@@ -0,0 +1,11 @@
+[
+  {
+    "id": "file-finder",
+    "label": "File finder",
+    "bindings": ["CtrlCmd+KEY_P"],
+    "action": {
+      "name": "toggleFileFinder",
+      "params": true
+    }
+  }
+]
diff --git a/app/assets/javascripts/ide/monaco_loader.js b/app/assets/javascripts/ide/monaco_loader.js
deleted file mode 100644
index 142a220097b..00000000000
--- a/app/assets/javascripts/ide/monaco_loader.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import monacoContext from 'monaco-editor/dev/vs/loader';
-
-monacoContext.require.config({
-  paths: {
-    vs: `${__webpack_public_path__}monaco-editor/vs`, // eslint-disable-line camelcase
-  },
-});
-
-// ignore CDN config and use local assets path for service worker which cannot be cross-domain
-const relativeRootPath = (gon && gon.relative_url_root) || '';
-const monacoPath = `${relativeRootPath}/assets/webpack/monaco-editor/vs`;
-window.MonacoEnvironment = { getWorkerUrl: () => `${monacoPath}/base/worker/workerMain.js` };
-
-// eslint-disable-next-line no-underscore-dangle
-window.__monaco_context__ = monacoContext;
-export default monacoContext.require;
diff --git a/app/assets/javascripts/ide/services/index.js b/app/assets/javascripts/ide/services/index.js
index 5f1fb6cf843..da9de25302a 100644
--- a/app/assets/javascripts/ide/services/index.js
+++ b/app/assets/javascripts/ide/services/index.js
@@ -9,7 +9,7 @@ export default {
     return Vue.http.get(endpoint, { params: { format: 'json' } });
   },
   getFileData(endpoint) {
-    return Vue.http.get(endpoint, { params: { format: 'json' } });
+    return Vue.http.get(endpoint, { params: { format: 'json', viewer: 'none' } });
   },
   getRawFileData(file) {
     if (file.tempFile) {
@@ -20,12 +20,35 @@ export default {
       return Promise.resolve(file.raw);
     }
 
-    return Vue.http.get(file.rawPath, { params: { format: 'json' } })
+    return Vue.http.get(file.rawPath, { params: { format: 'json' } }).then(res => res.text());
+  },
+  getBaseRawFileData(file, sha) {
+    if (file.tempFile) {
+      return Promise.resolve(file.baseRaw);
+    }
+
+    if (file.baseRaw) {
+      return Promise.resolve(file.baseRaw);
+    }
+
+    return Vue.http
+      .get(file.rawPath.replace(`/raw/${file.branchId}/${file.path}`, `/raw/${sha}/${file.path}`), {
+        params: { format: 'json' },
+      })
       .then(res => res.text());
   },
   getProjectData(namespace, project) {
     return Api.project(`${namespace}/${project}`);
   },
+  getProjectMergeRequestData(projectId, mergeRequestId) {
+    return Api.mergeRequest(projectId, mergeRequestId);
+  },
+  getProjectMergeRequestChanges(projectId, mergeRequestId) {
+    return Api.mergeRequestChanges(projectId, mergeRequestId);
+  },
+  getProjectMergeRequestVersions(projectId, mergeRequestId) {
+    return Api.mergeRequestVersions(projectId, mergeRequestId);
+  },
   getBranchData(projectId, currentBranchId) {
     return Api.branchSingle(projectId, currentBranchId);
   },
@@ -52,4 +75,8 @@ export default {
       },
     });
   },
+  lastCommitPipelines({ getters }) {
+    const commitSha = getters.lastCommit.id;
+    return Api.commitPipelines(getters.currentProject.path_with_namespace, commitSha);
+  },
 };
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index 7e920aa9f30..3dc365eaead 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import Vue from 'vue';
 import { visitUrl } from '~/lib/utils/url_utility';
 import flash from '~/flash';
@@ -6,8 +7,7 @@ import FilesDecoratorWorker from './workers/files_decorator_worker';
 
 export const redirectToUrl = (_, url) => visitUrl(url);
 
-export const setInitialData = ({ commit }, data) =>
-  commit(types.SET_INITIAL_DATA, data);
+export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DATA, data);
 
 export const discardAllChanges = ({ state, commit, dispatch }) => {
   state.changedFiles.forEach(file => {
@@ -22,7 +22,7 @@ export const discardAllChanges = ({ state, commit, dispatch }) => {
 };
 
 export const closeAllFiles = ({ state, dispatch }) => {
-  state.openFiles.forEach(file => dispatch('closeFile', file.path));
+  state.openFiles.forEach(file => dispatch('closeFile', file));
 };
 
 export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => {
@@ -33,6 +33,19 @@ export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => {
   }
 };
 
+export const toggleRightPanelCollapsed = ({ dispatch, state }, e = undefined) => {
+  if (e) {
+    $(e.currentTarget)
+      .tooltip('hide')
+      .blur();
+  }
+
+  dispatch('setPanelCollapsedStatus', {
+    side: 'right',
+    collapsed: !state.rightPanelCollapsed,
+  });
+};
+
 export const setResizingStatus = ({ commit }, resizing) => {
   commit(types.SET_RESIZING_STATUS, resizing);
 };
@@ -43,14 +56,11 @@ export const createTempEntry = (
 ) =>
   new Promise(resolve => {
     const worker = new FilesDecoratorWorker();
-    const fullName =
-      name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
+    const fullName = name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
 
     if (state.entries[name]) {
       flash(
-        `The name "${name
-          .split('/')
-          .pop()}" is already taken in this directory.`,
+        `The name "${name.split('/').pop()}" is already taken in this directory.`,
         'alert',
         document,
         null,
@@ -64,7 +74,7 @@ export const createTempEntry = (
     }
 
     worker.addEventListener('message', ({ data }) => {
-      const { file } = data;
+      const { file, parentPath } = data;
 
       worker.terminate();
 
@@ -80,6 +90,10 @@ export const createTempEntry = (
         dispatch('setFileActive', file.path);
       }
 
+      if (parentPath && !state.entries[parentPath].opened) {
+        commit(types.TOGGLE_TREE_OPEN, parentPath);
+      }
+
       resolve(file);
     });
 
@@ -108,6 +122,16 @@ export const scrollToTab = () => {
   });
 };
 
+export const stageAllChanges = ({ state, commit }) => {
+  commit(types.SET_LAST_COMMIT_MSG, '');
+
+  state.changedFiles.forEach(file => commit(types.STAGE_CHANGE, file.path));
+};
+
+export const unstageAllChanges = ({ state, commit }) => {
+  state.stagedFiles.forEach(file => commit(types.UNSTAGE_CHANGE, file.path));
+};
+
 export const updateViewer = ({ commit }, viewer) => {
   commit(types.UPDATE_VIEWER, viewer);
 };
@@ -116,6 +140,45 @@ export const updateDelayViewerUpdated = ({ commit }, delay) => {
   commit(types.UPDATE_DELAY_VIEWER_CHANGE, delay);
 };
 
+export const updateActivityBarView = ({ commit }, view) => {
+  commit(types.UPDATE_ACTIVITY_BAR_VIEW, view);
+};
+
+export const setEmptyStateSvgs = ({ commit }, svgs) => {
+  commit(types.SET_EMPTY_STATE_SVGS, svgs);
+};
+
+export const setCurrentBranchId = ({ commit }, currentBranchId) => {
+  commit(types.SET_CURRENT_BRANCH, currentBranchId);
+};
+
+export const updateTempFlagForEntry = ({ commit, dispatch, state }, { file, tempFile }) => {
+  commit(types.UPDATE_TEMP_FLAG, { path: file.path, tempFile });
+
+  if (file.parentPath) {
+    dispatch('updateTempFlagForEntry', { file: state.entries[file.parentPath], tempFile });
+  }
+};
+
+export const toggleFileFinder = ({ commit }, fileFindVisible) =>
+  commit(types.TOGGLE_FILE_FINDER, fileFindVisible);
+
+export const burstUnusedSeal = ({ state, commit }) => {
+  if (state.unusedSeal) {
+    commit(types.BURST_UNUSED_SEAL);
+  }
+};
+
+export const setRightPane = ({ commit }, view) => {
+  commit(types.SET_RIGHT_PANE, view);
+};
+
+export const setLinks = ({ commit }, links) => commit(types.SET_LINKS, links);
+
 export * from './actions/tree';
 export * from './actions/file';
 export * from './actions/project';
+export * from './actions/merge_request';
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index ddc4b757bf9..29995a29d1a 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -5,25 +5,38 @@ import service from '../../services';
 import * as types from '../mutation_types';
 import router from '../../ide_router';
 import { setPageTitle } from '../utils';
+import { viewerTypes } from '../../constants';
 
-export const closeFile = ({ commit, state, getters, dispatch }, path) => {
-  const indexOfClosedFile = state.openFiles.findIndex(f => f.path === path);
-  const file = state.entries[path];
+export const closeFile = ({ commit, state, dispatch }, file) => {
+  const { path } = file;
+  const indexOfClosedFile = state.openFiles.findIndex(f => f.key === file.key);
   const fileWasActive = file.active;
 
-  commit(types.TOGGLE_FILE_OPEN, path);
-  commit(types.SET_FILE_ACTIVE, { path, active: false });
+  if (file.pending) {
+    commit(types.REMOVE_PENDING_TAB, file);
+  } else {
+    commit(types.TOGGLE_FILE_OPEN, path);
+    commit(types.SET_FILE_ACTIVE, { path, active: false });
+  }
 
   if (state.openFiles.length > 0 && fileWasActive) {
     const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
-    const nextFileToOpen = state.entries[state.openFiles[nextIndexToOpen].path];
-
-    router.push(`/project${nextFileToOpen.url}`);
+    const nextFileToOpen = state.openFiles[nextIndexToOpen];
+
+    if (nextFileToOpen.pending) {
+      dispatch('updateViewer', viewerTypes.diff);
+      dispatch('openPendingTab', {
+        file: nextFileToOpen,
+        keyPrefix: nextFileToOpen.staged ? 'staged' : 'unstaged',
+      });
+    } else {
+      router.push(`/project${nextFileToOpen.url}`);
+    }
   } else if (!state.openFiles.length) {
     router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
   }
 
-  eventHub.$emit(`editor.update.model.dispose.${file.path}`);
+  eventHub.$emit(`editor.update.model.dispose.${file.key}`);
 };
 
 export const setFileActive = ({ commit, state, getters, dispatch }, path) => {
@@ -46,55 +59,67 @@ export const setFileActive = ({ commit, state, getters, dispatch }, path) => {
   commit(types.SET_CURRENT_BRANCH, file.branchId);
 };
 
-export const getFileData = ({ state, commit, dispatch }, file) => {
+export const getFileData = ({ state, commit, dispatch }, { path, makeFileActive = true }) => {
+  const file = state.entries[path];
   commit(types.TOGGLE_LOADING, { entry: file });
-
   return service
-    .getFileData(file.url)
+    .getFileData(
+      `${gon.relative_url_root ? gon.relative_url_root : ''}${file.url.replace('/-/', '/')}`,
+    )
     .then(res => {
       const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
-
       setPageTitle(pageTitle);
 
       return res.json();
     })
     .then(data => {
       commit(types.SET_FILE_DATA, { data, file });
-      commit(types.TOGGLE_FILE_OPEN, file.path);
-      dispatch('setFileActive', file.path);
+      commit(types.TOGGLE_FILE_OPEN, path);
+      if (makeFileActive) dispatch('setFileActive', path);
       commit(types.TOGGLE_LOADING, { entry: file });
     })
     .catch(() => {
       commit(types.TOGGLE_LOADING, { entry: file });
-      flash(
-        'Error loading file data. Please try again.',
-        'alert',
-        document,
-        null,
-        false,
-        true,
-      );
+      flash('Error loading file data. Please try again.', 'alert', document, null, false, true);
     });
 };
 
-export const getRawFileData = ({ commit, dispatch }, file) =>
-  service
-    .getRawFileData(file)
-    .then(raw => {
-      commit(types.SET_FILE_RAW_DATA, { file, raw });
-    })
-    .catch(() =>
-      flash(
-        'Error loading file content. Please try again.',
-        'alert',
-        document,
-        null,
-        false,
-        true,
-      ),
-    );
-
-export const changeFileContent = ({ state, commit }, { path, content }) => {
+export const setFileMrChange = ({ commit }, { file, mrChange }) => {
+  commit(types.SET_FILE_MERGE_REQUEST_CHANGE, { file, mrChange });
+};
+
+export const getRawFileData = ({ state, commit }, { path, baseSha }) => {
+  const file = state.entries[path];
+  return new Promise((resolve, reject) => {
+    service
+      .getRawFileData(file)
+      .then(raw => {
+        commit(types.SET_FILE_RAW_DATA, { file, raw });
+        if (file.mrChange && file.mrChange.new_file === false) {
+          service
+            .getBaseRawFileData(file, baseSha)
+            .then(baseRaw => {
+              commit(types.SET_FILE_BASE_RAW_DATA, {
+                file,
+                baseRaw,
+              });
+              resolve(raw);
+            })
+            .catch(e => {
+              reject(e);
+            });
+        } else {
+          resolve(raw);
+        }
+      })
+      .catch(() => {
+        flash('Error loading file content. Please try again.');
+        reject();
+      });
+  });
+};
+
+export const changeFileContent = ({ commit, dispatch, state }, { path, content }) => {
   const file = state.entries[path];
   commit(types.UPDATE_FILE_CONTENT, { path, content });
 
@@ -105,6 +130,8 @@ export const changeFileContent = ({ state, commit }, { path, content }) => {
   } else if (!file.changed && indexOfChangedFile !== -1) {
     commit(types.REMOVE_FILE_FROM_CHANGED, path);
   }
+
+  dispatch('burstUnusedSeal', {}, { root: true });
 };
 
 export const setFileLanguage = ({ getters, commit }, { fileLanguage }) => {
@@ -119,10 +146,7 @@ export const setFileEOL = ({ getters, commit }, { eol }) => {
   }
 };
 
-export const setEditorPosition = (
-  { getters, commit },
-  { editorRow, editorColumn },
-) => {
+export const setEditorPosition = ({ getters, commit }, { editorRow, editorColumn }) => {
   if (getters.activeFile) {
     commit(types.SET_FILE_POSITION, {
       file: getters.activeFile,
@@ -132,7 +156,11 @@ export const setEditorPosition = (
   }
 };
 
-export const discardFileChanges = ({ state, commit }, path) => {
+export const setFileViewMode = ({ commit }, { file, viewMode }) => {
+  commit(types.SET_FILE_VIEWMODE, { file, viewMode });
+};
+
+export const discardFileChanges = ({ dispatch, state, commit, getters }, path) => {
   const file = state.entries[path];
 
   commit(types.DISCARD_FILE_CHANGES, path);
@@ -140,7 +168,51 @@ export const discardFileChanges = ({ state, commit }, path) => {
 
   if (file.tempFile && file.opened) {
     commit(types.TOGGLE_FILE_OPEN, path);
+  } else if (getters.activeFile && file.path === getters.activeFile.path) {
+    dispatch('updateDelayViewerUpdated', true)
+      .then(() => {
+        router.push(`/project${file.url}`);
+      })
+      .catch(e => {
+        throw e;
+      });
+  }
+
+  eventHub.$emit(`editor.update.model.new.content.${file.key}`, file.content);
+  eventHub.$emit(`editor.update.model.dispose.unstaged-${file.key}`, file.content);
+};
+
+export const stageChange = ({ commit, state }, path) => {
+  const stagedFile = state.stagedFiles.find(f => f.path === path);
+
+  commit(types.STAGE_CHANGE, path);
+  commit(types.SET_LAST_COMMIT_MSG, '');
+
+  if (stagedFile) {
+    eventHub.$emit(`editor.update.model.new.content.staged-${stagedFile.key}`, stagedFile.content);
   }
+};
+
+export const unstageChange = ({ commit }, path) => {
+  commit(types.UNSTAGE_CHANGE, path);
+};
+
+export const openPendingTab = ({ commit, getters, dispatch, state }, { file, keyPrefix }) => {
+  if (getters.activeFile && getters.activeFile.key === `${keyPrefix}-${file.key}`) return false;
+
+  state.openFiles.forEach(f => eventHub.$emit(`editor.update.model.dispose.${f.key}`));
+
+  commit(types.ADD_PENDING_TAB, { file, keyPrefix });
+
+  dispatch('scrollToTab');
+
+  router.push(`/project/${file.projectId}/tree/${state.currentBranchId}/`);
+
+  return true;
+};
+
+export const removePendingTab = ({ commit }, file) => {
+  commit(types.REMOVE_PENDING_TAB, file);
 
-  eventHub.$emit(`editor.update.model.content.${file.path}`, file.raw);
+  eventHub.$emit(`editor.update.model.dispose.${file.key}`);
 };
diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js
new file mode 100644
index 00000000000..edb20ff96fc
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/actions/merge_request.js
@@ -0,0 +1,82 @@
+import flash from '~/flash';
+import service from '../../services';
+import * as types from '../mutation_types';
+
+export const getMergeRequestData = (
+  { commit, state },
+  { projectId, mergeRequestId, force = false } = {},
+) =>
+  new Promise((resolve, reject) => {
+    if (!state.projects[projectId].mergeRequests[mergeRequestId] || force) {
+      service
+        .getProjectMergeRequestData(projectId, mergeRequestId)
+        .then(res => res.data)
+        .then(data => {
+          commit(types.SET_MERGE_REQUEST, {
+            projectPath: projectId,
+            mergeRequestId,
+            mergeRequest: data,
+          });
+          commit(types.SET_CURRENT_MERGE_REQUEST, mergeRequestId);
+          resolve(data);
+        })
+        .catch(() => {
+          flash('Error loading merge request data. Please try again.');
+          reject(new Error(`Merge Request not loaded ${projectId}`));
+        });
+    } else {
+      resolve(state.projects[projectId].mergeRequests[mergeRequestId]);
+    }
+  });
+
+export const getMergeRequestChanges = (
+  { commit, state },
+  { projectId, mergeRequestId, force = false } = {},
+) =>
+  new Promise((resolve, reject) => {
+    if (!state.projects[projectId].mergeRequests[mergeRequestId].changes.length || force) {
+      service
+        .getProjectMergeRequestChanges(projectId, mergeRequestId)
+        .then(res => res.data)
+        .then(data => {
+          commit(types.SET_MERGE_REQUEST_CHANGES, {
+            projectPath: projectId,
+            mergeRequestId,
+            changes: data,
+          });
+          resolve(data);
+        })
+        .catch(() => {
+          flash('Error loading merge request changes. Please try again.');
+          reject(new Error(`Merge Request Changes not loaded ${projectId}`));
+        });
+    } else {
+      resolve(state.projects[projectId].mergeRequests[mergeRequestId].changes);
+    }
+  });
+
+export const getMergeRequestVersions = (
+  { commit, state },
+  { projectId, mergeRequestId, force = false } = {},
+) =>
+  new Promise((resolve, reject) => {
+    if (!state.projects[projectId].mergeRequests[mergeRequestId].versions.length || force) {
+      service
+        .getProjectMergeRequestVersions(projectId, mergeRequestId)
+        .then(res => res.data)
+        .then(data => {
+          commit(types.SET_MERGE_REQUEST_VERSIONS, {
+            projectPath: projectId,
+            mergeRequestId,
+            versions: data,
+          });
+          resolve(data);
+        })
+        .catch(() => {
+          flash('Error loading merge request versions. Please try again.');
+          reject(new Error(`Merge Request Versions not loaded ${projectId}`));
+        });
+    } else {
+      resolve(state.projects[projectId].mergeRequests[mergeRequestId].versions);
+    }
+  });
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index b3882cb8d21..0b99bce4a8e 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -1,49 +1,82 @@
 import flash from '~/flash';
+import { __ } from '~/locale';
 import service from '../../services';
 import * as types from '../mutation_types';
 
-export const getProjectData = (
-  { commit, state, dispatch },
-  { namespace, projectId, force = false } = {},
-) => new Promise((resolve, reject) => {
-  if (!state.projects[`${namespace}/${projectId}`] || force) {
-    commit(types.TOGGLE_LOADING, { entry: state });
-    service.getProjectData(namespace, projectId)
-    .then(res => res.data)
-    .then((data) => {
+export const getProjectData = ({ commit, state }, { namespace, projectId, force = false } = {}) =>
+  new Promise((resolve, reject) => {
+    if (!state.projects[`${namespace}/${projectId}`] || force) {
       commit(types.TOGGLE_LOADING, { entry: state });
-      commit(types.SET_PROJECT, { projectPath: `${namespace}/${projectId}`, project: data });
-      if (!state.currentProjectId) commit(types.SET_CURRENT_PROJECT, `${namespace}/${projectId}`);
-      resolve(data);
+      service
+        .getProjectData(namespace, projectId)
+        .then(res => res.data)
+        .then(data => {
+          commit(types.TOGGLE_LOADING, { entry: state });
+          commit(types.SET_PROJECT, { projectPath: `${namespace}/${projectId}`, project: data });
+          commit(types.SET_CURRENT_PROJECT, `${namespace}/${projectId}`);
+          resolve(data);
+        })
+        .catch(() => {
+          flash(
+            __('Error loading project data. Please try again.'),
+            'alert',
+            document,
+            null,
+            false,
+            true,
+          );
+          reject(new Error(`Project not loaded ${namespace}/${projectId}`));
+        });
+    } else {
+      resolve(state.projects[`${namespace}/${projectId}`]);
+    }
+  });
+
+export const getBranchData = ({ commit, state }, { projectId, branchId, force = false } = {}) =>
+  new Promise((resolve, reject) => {
+    if (
+      typeof state.projects[`${projectId}`] === 'undefined' ||
+      !state.projects[`${projectId}`].branches[branchId] ||
+      force
+    ) {
+      service
+        .getBranchData(`${projectId}`, branchId)
+        .then(({ data }) => {
+          const { id } = data.commit;
+          commit(types.SET_BRANCH, {
+            projectPath: `${projectId}`,
+            branchName: branchId,
+            branch: data,
+          });
+          commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });
+          resolve(data);
+        })
+        .catch(() => {
+          flash(
+            __('Error loading branch data. Please try again.'),
+            'alert',
+            document,
+            null,
+            false,
+            true,
+          );
+          reject(new Error(`Branch not loaded - ${projectId}/${branchId}`));
+        });
+    } else {
+      resolve(state.projects[`${projectId}`].branches[branchId]);
+    }
+  });
+
+export const refreshLastCommitData = ({ commit }, { projectId, branchId } = {}) =>
+  service
+    .getBranchData(projectId, branchId)
+    .then(({ data }) => {
+      commit(types.SET_BRANCH_COMMIT, {
+        projectId,
+        branchId,
+        commit: data.commit,
+      });
     })
     .catch(() => {
-      flash('Error loading project data. Please try again.', 'alert', document, null, false, true);
-      reject(new Error(`Project not loaded ${namespace}/${projectId}`));
+      flash(__('Error loading last commit.'), 'alert', document, null, false, true);
     });
-  } else {
-    resolve(state.projects[`${namespace}/${projectId}`]);
-  }
-});
-
-export const getBranchData = (
-  { commit, state, dispatch },
-  { projectId, branchId, force = false } = {},
-) => new Promise((resolve, reject) => {
-  if ((typeof state.projects[`${projectId}`] === 'undefined' ||
-        !state.projects[`${projectId}`].branches[branchId])
-        || force) {
-    service.getBranchData(`${projectId}`, branchId)
-      .then(({ data }) => {
-        const { id } = data.commit;
-        commit(types.SET_BRANCH, { projectPath: `${projectId}`, branchName: branchId, branch: data });
-        commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });
-        resolve(data);
-      })
-      .catch(() => {
-        flash('Error loading branch data. Please try again.', 'alert', document, null, false, true);
-        reject(new Error(`Branch not loaded - ${projectId}/${branchId}`));
-      });
-  } else {
-    resolve(state.projects[`${projectId}`].branches[branchId]);
-  }
-});
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index 70a969a0325..2fbc9990fa2 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -2,15 +2,24 @@ import { normalizeHeaders } from '~/lib/utils/common_utils';
 import flash from '~/flash';
 import service from '../../services';
 import * as types from '../mutation_types';
-import {
-  findEntry,
-} from '../utils';
+import { findEntry } from '../utils';
 import FilesDecoratorWorker from '../workers/files_decorator_worker';
 
-export const toggleTreeOpen = ({ commit, dispatch }, path) => {
+export const toggleTreeOpen = ({ commit }, path) => {
   commit(types.TOGGLE_TREE_OPEN, path);
 };
 
+export const showTreeEntry = ({ commit, dispatch, state }, path) => {
+  const entry = state.entries[path];
+  const parentPath = entry ? entry.parentPath : '';
+
+  if (parentPath) {
+    commit(types.SET_TREE_OPEN, parentPath);
+
+    dispatch('showTreeEntry', parentPath);
+  }
+};
+
 export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
   if (row.type === 'tree') {
     dispatch('toggleTreeOpen', row.path);
@@ -21,23 +30,26 @@ export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
 
     dispatch('setFileActive', row.path);
   } else {
-    dispatch('getFileData', row);
+    dispatch('getFileData', { path: row.path });
   }
+
+  dispatch('showTreeEntry', row.path);
 };
 
-export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => {
+export const getLastCommitData = ({ state, commit, dispatch }, tree = state) => {
   if (!tree || tree.lastCommitPath === null || !tree.lastCommitPath) return;
 
-  service.getTreeLastCommit(tree.lastCommitPath)
-    .then((res) => {
+  service
+    .getTreeLastCommit(tree.lastCommitPath)
+    .then(res => {
       const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
 
       commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
 
       return res.json();
     })
-    .then((data) => {
-      data.forEach((lastCommit) => {
+    .then(data => {
+      data.forEach(lastCommit => {
         const entry = findEntry(tree.tree, lastCommit.type, lastCommit.file_name);
 
         if (entry) {
@@ -50,44 +62,47 @@ export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = s
     .catch(() => flash('Error fetching log data.', 'alert', document, null, false, true));
 };
 
-export const getFiles = (
-  { state, commit, dispatch },
-  { projectId, branchId } = {},
-) => new Promise((resolve, reject) => {
-  if (!state.trees[`${projectId}/${branchId}`]) {
-    const selectedProject = state.projects[projectId];
-    commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
-
-    service
-      .getFiles(selectedProject.web_url, branchId)
-      .then(res => res.json())
-      .then((data) => {
-        const worker = new FilesDecoratorWorker();
-        worker.addEventListener('message', (e) => {
-          const { entries, treeList } = e.data;
-          const selectedTree = state.trees[`${projectId}/${branchId}`];
-
-          commit(types.SET_ENTRIES, entries);
-          commit(types.SET_DIRECTORY_DATA, { treePath: `${projectId}/${branchId}`, data: treeList });
-          commit(types.TOGGLE_LOADING, { entry: selectedTree, forceValue: false });
-
-          worker.terminate();
-
-          resolve();
+export const getFiles = ({ state, commit }, { projectId, branchId } = {}) =>
+  new Promise((resolve, reject) => {
+    if (!state.trees[`${projectId}/${branchId}`]) {
+      const selectedProject = state.projects[projectId];
+      commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
+
+      service
+        .getFiles(selectedProject.web_url, branchId)
+        .then(res => res.json())
+        .then(data => {
+          const worker = new FilesDecoratorWorker();
+          worker.addEventListener('message', e => {
+            const { entries, treeList } = e.data;
+            const selectedTree = state.trees[`${projectId}/${branchId}`];
+
+            commit(types.SET_ENTRIES, entries);
+            commit(types.SET_DIRECTORY_DATA, {
+              treePath: `${projectId}/${branchId}`,
+              data: treeList,
+            });
+            commit(types.TOGGLE_LOADING, {
+              entry: selectedTree,
+              forceValue: false,
+            });
+
+            worker.terminate();
+
+            resolve();
+          });
+
+          worker.postMessage({
+            data,
+            projectId,
+            branchId,
+          });
+        })
+        .catch(e => {
+          flash('Error loading tree data. Please try again.', 'alert', document, null, false, true);
+          reject(e);
         });
-
-        worker.postMessage({
-          data,
-          projectId,
-          branchId,
-        });
-      })
-      .catch((e) => {
-        flash('Error loading tree data. Please try again.', 'alert', document, null, false, true);
-        reject(e);
-      });
-  } else {
-    resolve();
-  }
-});
-
+    } else {
+      resolve();
+    }
+  });
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index eba325a31df..b239a605371 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -1,10 +1,11 @@
-export const activeFile = state =>
-  state.openFiles.find(file => file.active) || null;
+import { getChangesCountForFiles, filePathMatches } from './utils';
+import { activityBarViews } from '../constants';
+
+export const activeFile = state => state.openFiles.find(file => file.active) || null;
 
 export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
 
-export const modifiedFiles = state =>
-  state.changedFiles.filter(f => !f.tempFile);
+export const modifiedFiles = state => state.changedFiles.filter(f => !f.tempFile);
 
 export const projectsWithTrees = state =>
   Object.keys(state.projects).map(projectId => {
@@ -23,8 +24,68 @@ export const projectsWithTrees = state =>
     };
   });
 
-// eslint-disable-next-line no-confusing-arrow
-export const currentIcon = state =>
-  state.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
+export const currentMergeRequest = state => {
+  if (state.projects[state.currentProjectId]) {
+    return state.projects[state.currentProjectId].mergeRequests[state.currentMergeRequestId];
+  }
+  return null;
+};
+
+export const currentProject = state => state.projects[state.currentProjectId];
+
+export const currentTree = state =>
+  state.trees[`${state.currentProjectId}/${state.currentBranchId}`];
+
+export const hasChanges = state => !!state.changedFiles.length || !!state.stagedFiles.length;
+
+export const hasMergeRequest = state => !!state.currentMergeRequestId;
+
+export const allBlobs = state =>
+  Object.keys(state.entries)
+    .reduce((acc, key) => {
+      const entry = state.entries[key];
+
+      if (entry.type === 'blob') {
+        acc.push(entry);
+      }
+
+      return acc;
+    }, [])
+    .sort((a, b) => b.lastOpenedAt - a.lastOpenedAt);
+
+export const getChangedFile = state => path => state.changedFiles.find(f => f.path === path);
+export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
+
+export const lastOpenedFile = state =>
+  [...state.changedFiles, ...state.stagedFiles].sort((a, b) => b.lastOpenedAt - a.lastOpenedAt)[0];
+
+export const isEditModeActive = state => state.currentActivityView === activityBarViews.edit;
+export const isCommitModeActive = state => state.currentActivityView === activityBarViews.commit;
+export const isReviewModeActive = state => state.currentActivityView === activityBarViews.review;
+
+export const someUncommitedChanges = state =>
+  !!(state.changedFiles.length || state.stagedFiles.length);
+
+export const getChangesInFolder = state => path => {
+  const changedFilesCount = state.changedFiles.filter(f => filePathMatches(f, path)).length;
+  const stagedFilesCount = state.stagedFiles.filter(
+    f => filePathMatches(f, path) && !getChangedFile(state)(f.path),
+  ).length;
+
+  return changedFilesCount + stagedFilesCount;
+};
+
+export const getUnstagedFilesCountForPath = state => path =>
+  getChangesCountForFiles(state.changedFiles, path);
+
+export const getStagedFilesCountForPath = state => path =>
+  getChangesCountForFiles(state.stagedFiles, path);
+
+export const lastCommit = (state, getters) => {
+  const branch = getters.currentProject && getters.currentProject.branches[state.currentBranchId];
+
+  return branch ? branch.commit : null;
+};
 
-export const hasChanges = state => !!state.changedFiles.length;
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/ide/stores/index.js b/app/assets/javascripts/ide/stores/index.js
index 7c82ce7976b..f8ce8a67ec0 100644
--- a/app/assets/javascripts/ide/stores/index.js
+++ b/app/assets/javascripts/ide/stores/index.js
@@ -5,15 +5,22 @@ import * as actions from './actions';
 import * as getters from './getters';
 import mutations from './mutations';
 import commitModule from './modules/commit';
+import pipelines from './modules/pipelines';
+import mergeRequests from './modules/merge_requests';
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
-  state: state(),
-  actions,
-  mutations,
-  getters,
-  modules: {
-    commit: commitModule,
-  },
-});
+export const createStore = () =>
+  new Vuex.Store({
+    state: state(),
+    actions,
+    mutations,
+    getters,
+    modules: {
+      commit: commitModule,
+      pipelines,
+      mergeRequests,
+    },
+  });
+
+export default createStore();
diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js
index f536ce6344b..7219abc4185 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js
@@ -8,6 +8,7 @@ import router from '../../../ide_router';
 import service from '../../../services';
 import * as types from './mutation_types';
 import * as consts from './constants';
+import { activityBarViews } from '../../../constants';
 import eventHub from '../../../eventhub';
 
 export const updateCommitMessage = ({ commit }, message) => {
@@ -30,16 +31,16 @@ export const setLastCommitMessage = ({ rootState, commit }, data) => {
   const currentProject = rootState.projects[rootState.currentProjectId];
   const commitStats = data.stats
     ? sprintf(__('with %{additions} additions, %{deletions} deletions.'), {
-        additions: data.stats.additions, // eslint-disable-line indent
-        deletions: data.stats.deletions, // eslint-disable-line indent
-      }) // eslint-disable-line indent
+        additions: data.stats.additions, // eslint-disable-line indent-legacy
+        deletions: data.stats.deletions, // eslint-disable-line indent-legacy
+      }) // eslint-disable-line indent-legacy
     : '';
   const commitMsg = sprintf(
     __('Your changes have been committed. Commit %{commitId} %{commitStats}'),
     {
-      commitId: `<a href="${currentProject.web_url}/commit/${
+      commitId: `<a href="${currentProject.web_url}/commit/${data.short_id}" class="commit-sha">${
         data.short_id
-      }" class="commit-sha">${data.short_id}</a>`,
+      }</a>`,
       commitStats,
     },
     false,
@@ -48,37 +49,7 @@ export const setLastCommitMessage = ({ rootState, commit }, data) => {
   commit(rootTypes.SET_LAST_COMMIT_MSG, commitMsg, { root: true });
 };
 
-export const checkCommitStatus = ({ rootState }) =>
-  service
-    .getBranchData(rootState.currentProjectId, rootState.currentBranchId)
-    .then(({ data }) => {
-      const { id } = data.commit;
-      const selectedBranch =
-        rootState.projects[rootState.currentProjectId].branches[
-          rootState.currentBranchId
-        ];
-
-      if (selectedBranch.workingReference !== id) {
-        return true;
-      }
-
-      return false;
-    })
-    .catch(() =>
-      flash(
-        __('Error checking branch data. Please try again.'),
-        'alert',
-        document,
-        null,
-        false,
-        true,
-      ),
-    );
-
-export const updateFilesAfterCommit = (
-  { commit, dispatch, state, rootState, rootGetters },
-  { data, branch },
-) => {
+export const updateFilesAfterCommit = ({ commit, dispatch, rootState }, { data }) => {
   const selectedProject = rootState.projects[rootState.currentProjectId];
   const lastCommit = {
     commit_path: `${selectedProject.web_url}/commit/${data.id}`,
@@ -100,23 +71,14 @@ export const updateFilesAfterCommit = (
     { root: true },
   );
 
-  rootState.changedFiles.forEach(entry => {
-    commit(
-      rootTypes.SET_LAST_COMMIT_DATA,
-      {
-        entry,
-        lastCommit,
-      },
-      { root: true },
-    );
-
-    eventHub.$emit(`editor.update.model.content.${entry.path}`, entry.content);
+  rootState.stagedFiles.forEach(file => {
+    const changedFile = rootState.changedFiles.find(f => f.path === file.path);
 
     commit(
-      rootTypes.SET_FILE_RAW_DATA,
+      rootTypes.UPDATE_FILE_AFTER_COMMIT,
       {
-        file: entry,
-        raw: entry.content,
+        file,
+        lastCommit,
       },
       { root: true },
     );
@@ -124,95 +86,122 @@ export const updateFilesAfterCommit = (
     commit(
       rootTypes.TOGGLE_FILE_CHANGED,
       {
-        file: entry,
+        file,
         changed: false,
       },
       { root: true },
     );
-  });
 
-  commit(rootTypes.REMOVE_ALL_CHANGES_FILES, null, { root: true });
+    dispatch('updateTempFlagForEntry', { file, tempFile: false }, { root: true });
 
-  if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH) {
-    router.push(
-      `/project/${rootState.currentProjectId}/blob/${branch}/${
-        rootGetters.activeFile.path
-      }`,
-    );
-  }
-
-  dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH);
+    eventHub.$emit(`editor.update.model.content.${file.key}`, {
+      content: file.content,
+      changed: !!changedFile,
+    });
+  });
 };
 
-export const commitChanges = ({
-  commit,
-  state,
-  getters,
-  dispatch,
-  rootState,
-}) => {
+export const commitChanges = ({ commit, state, getters, dispatch, rootState, rootGetters }) => {
   const newBranch = state.commitAction !== consts.COMMIT_TO_CURRENT_BRANCH;
-  const payload = createCommitPayload(
-    getters.branchName,
+  const payload = createCommitPayload({
+    branch: getters.branchName,
     newBranch,
     state,
     rootState,
-  );
-  const getCommitStatus = newBranch
-    ? Promise.resolve(false)
-    : dispatch('checkCommitStatus');
+  });
 
   commit(types.UPDATE_LOADING, true);
 
-  return getCommitStatus
-    .then(
-      branchChanged =>
-        new Promise(resolve => {
-          if (branchChanged) {
-            // show the modal with a Bootstrap call
-            $('#ide-create-branch-modal').modal('show');
-          } else {
-            resolve();
-          }
-        }),
-    )
-    .then(() => service.commit(rootState.currentProjectId, payload))
+  return service
+    .commit(rootState.currentProjectId, payload)
     .then(({ data }) => {
       commit(types.UPDATE_LOADING, false);
 
       if (!data.short_id) {
         flash(data.message, 'alert', document, null, false, true);
-        return;
+        return null;
       }
 
       dispatch('setLastCommitMessage', data);
       dispatch('updateCommitMessage', '');
+      return dispatch('updateFilesAfterCommit', {
+        data,
+        branch: getters.branchName,
+      })
+        .then(() => {
+          if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH_MR) {
+            dispatch(
+              'redirectToUrl',
+              createNewMergeRequestUrl(
+                rootState.projects[rootState.currentProjectId].web_url,
+                getters.branchName,
+                rootState.currentBranchId,
+              ),
+              { root: true },
+            );
+          }
 
-      if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH_MR) {
-        dispatch(
-          'redirectToUrl',
-          createNewMergeRequestUrl(
-            rootState.projects[rootState.currentProjectId].web_url,
-            getters.branchName,
-            rootState.currentBranchId,
+          commit(rootTypes.CLEAR_STAGED_CHANGES, null, { root: true });
+
+          setTimeout(() => {
+            commit(rootTypes.SET_LAST_COMMIT_MSG, '', { root: true });
+          }, 5000);
+        })
+        .then(() => {
+          if (rootGetters.lastOpenedFile) {
+            dispatch(
+              'openPendingTab',
+              {
+                file: rootGetters.lastOpenedFile,
+              },
+              { root: true },
+            )
+              .then(changeViewer => {
+                if (changeViewer) {
+                  dispatch('updateViewer', 'diff', { root: true });
+                }
+              })
+              .catch(e => {
+                throw e;
+              });
+          } else {
+            dispatch('updateActivityBarView', activityBarViews.edit, { root: true });
+            dispatch('updateViewer', 'editor', { root: true });
+
+            router.push(
+              `/project/${rootState.currentProjectId}/blob/${getters.branchName}/-/${
+                rootGetters.activeFile.path
+              }`,
+            );
+          }
+        })
+        .then(() => dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH))
+        .then(() =>
+          dispatch(
+            'refreshLastCommitData',
+            {
+              projectId: rootState.currentProjectId,
+              branchId: rootState.currentBranchId,
+            },
+            { root: true },
           ),
-          { root: true },
         );
-      } else {
-        dispatch('updateFilesAfterCommit', {
-          data,
-          branch: getters.branchName,
-        });
-      }
     })
     .catch(err => {
-      let errMsg = __('Error committing changes. Please try again.');
-      if (err.response.data && err.response.data.message) {
-        errMsg += ` (${stripHtml(err.response.data.message)})`;
+      if (err.response.status === 400) {
+        $('#ide-create-branch-modal').modal('show');
+      } else {
+        let errMsg = __('Error committing changes. Please try again.');
+        if (err.response.data && err.response.data.message) {
+          errMsg += ` (${stripHtml(err.response.data.message)})`;
+        }
+        flash(errMsg, 'alert', document, null, false, true);
+        window.dispatchEvent(new Event('resize'));
       }
-      flash(errMsg, 'alert', document, null, false, true);
-      window.dispatchEvent(new Event('resize'));
 
       commit(types.UPDATE_LOADING, false);
     });
 };
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/ide/stores/modules/commit/getters.js b/app/assets/javascripts/ide/stores/modules/commit/getters.js
index f7cdd6adb0c..d01060201f2 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/getters.js
@@ -1,12 +1,17 @@
 import * as consts from './constants';
 
-export const discardDraftButtonDisabled = state => state.commitMessage === '' || state.submitCommitLoading;
+const BRANCH_SUFFIX_COUNT = 5;
+
+export const discardDraftButtonDisabled = state =>
+  state.commitMessage === '' || state.submitCommitLoading;
 
 export const commitButtonDisabled = (state, getters, rootState) =>
-  getters.discardDraftButtonDisabled || !rootState.changedFiles.length;
+  getters.discardDraftButtonDisabled || !rootState.stagedFiles.length;
 
 export const newBranchName = (state, _, rootState) =>
-  `${gon.current_username}-${rootState.currentBranchId}-patch-${`${new Date().getTime()}`.substr(-5)}`;
+  `${gon.current_username}-${rootState.currentBranchId}-patch-${`${new Date().getTime()}`.substr(
+    -BRANCH_SUFFIX_COUNT,
+  )}`;
 
 export const branchName = (state, getters, rootState) => {
   if (
@@ -22,3 +27,6 @@ export const branchName = (state, getters, rootState) => {
 
   return rootState.currentBranchId;
 };
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
new file mode 100644
index 00000000000..551dd322c9b
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
@@ -0,0 +1,48 @@
+import { __ } from '../../../../locale';
+import Api from '../../../../api';
+import flash from '../../../../flash';
+import router from '../../../ide_router';
+import { scopes } from './constants';
+import * as types from './mutation_types';
+import * as rootTypes from '../../mutation_types';
+
+export const requestMergeRequests = ({ commit }, type) =>
+  commit(types.REQUEST_MERGE_REQUESTS, type);
+export const receiveMergeRequestsError = ({ commit }, type) => {
+  flash(__('Error loading merge requests.'));
+  commit(types.RECEIVE_MERGE_REQUESTS_ERROR, type);
+};
+export const receiveMergeRequestsSuccess = ({ commit }, { type, data }) =>
+  commit(types.RECEIVE_MERGE_REQUESTS_SUCCESS, { type, data });
+
+export const fetchMergeRequests = ({ dispatch, state: { state } }, { type, search = '' }) => {
+  const scope = scopes[type];
+  dispatch('requestMergeRequests', type);
+  dispatch('resetMergeRequests', type);
+
+  Api.mergeRequests({ scope, state, search })
+    .then(({ data }) => dispatch('receiveMergeRequestsSuccess', { type, data }))
+    .catch(() => dispatch('receiveMergeRequestsError', type));
+};
+
+export const resetMergeRequests = ({ commit }, type) => commit(types.RESET_MERGE_REQUESTS, type);
+
+export const openMergeRequest = ({ commit, dispatch }, { projectPath, id }) => {
+  commit(rootTypes.CLEAR_PROJECTS, null, { root: true });
+  commit(rootTypes.SET_CURRENT_MERGE_REQUEST, `${id}`, { root: true });
+  commit(rootTypes.RESET_OPEN_FILES, null, { root: true });
+  dispatch('setCurrentBranchId', '', { root: true });
+  dispatch('pipelines/stopPipelinePolling', null, { root: true })
+    .then(() => {
+      dispatch('pipelines/resetLatestPipeline', null, { root: true });
+      dispatch('pipelines/clearEtagPoll', null, { root: true });
+    })
+    .catch(e => {
+      throw e;
+    });
+  dispatch('setRightPane', null, { root: true });
+
+  router.push(`/project/${projectPath}/merge_requests/${id}`);
+};
+
+export default () => {};
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/constants.js b/app/assets/javascripts/ide/stores/modules/merge_requests/constants.js
new file mode 100644
index 00000000000..a7085c7d04c
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/constants.js
@@ -0,0 +1,10 @@
+export const scopes = {
+  assigned: 'assigned-to-me',
+  created: 'created-by-me',
+};
+
+export const states = {
+  opened: 'opened',
+  closed: 'closed',
+  merged: 'merged',
+};
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/getters.js b/app/assets/javascripts/ide/stores/modules/merge_requests/getters.js
new file mode 100644
index 00000000000..8e2b234be8d
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/getters.js
@@ -0,0 +1,4 @@
+export const getData = state => type => state[type];
+
+export const assignedData = state => state.assigned;
+export const createdData = state => state.created;
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/index.js b/app/assets/javascripts/ide/stores/modules/merge_requests/index.js
new file mode 100644
index 00000000000..2e6dfb420f4
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/index.js
@@ -0,0 +1,12 @@
+import state from './state';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+
+export default {
+  namespaced: true,
+  state: state(),
+  actions,
+  mutations,
+  getters,
+};
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/mutation_types.js b/app/assets/javascripts/ide/stores/modules/merge_requests/mutation_types.js
new file mode 100644
index 00000000000..0badddcbae7
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/mutation_types.js
@@ -0,0 +1,5 @@
+export const REQUEST_MERGE_REQUESTS = 'REQUEST_MERGE_REQUESTS';
+export const RECEIVE_MERGE_REQUESTS_ERROR = 'RECEIVE_MERGE_REQUESTS_ERROR';
+export const RECEIVE_MERGE_REQUESTS_SUCCESS = 'RECEIVE_MERGE_REQUESTS_SUCCESS';
+
+export const RESET_MERGE_REQUESTS = 'RESET_MERGE_REQUESTS';
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js b/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js
new file mode 100644
index 00000000000..971da0806bd
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js
@@ -0,0 +1,26 @@
+/* eslint-disable no-param-reassign */
+import * as types from './mutation_types';
+
+export default {
+  [types.REQUEST_MERGE_REQUESTS](state, type) {
+    state[type].isLoading = true;
+  },
+  [types.RECEIVE_MERGE_REQUESTS_ERROR](state, type) {
+    state[type].isLoading = false;
+  },
+  [types.RECEIVE_MERGE_REQUESTS_SUCCESS](state, { type, data }) {
+    state[type].isLoading = false;
+    state[type].mergeRequests = data.map(mergeRequest => ({
+      id: mergeRequest.id,
+      iid: mergeRequest.iid,
+      title: mergeRequest.title,
+      projectId: mergeRequest.project_id,
+      projectPathWithNamespace: mergeRequest.web_url
+        .replace(`${gon.gitlab_url}/`, '')
+        .replace(`/merge_requests/${mergeRequest.iid}`, ''),
+    }));
+  },
+  [types.RESET_MERGE_REQUESTS](state, type) {
+    state[type].mergeRequests = [];
+  },
+};
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/state.js b/app/assets/javascripts/ide/stores/modules/merge_requests/state.js
new file mode 100644
index 00000000000..57eb6b04283
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/state.js
@@ -0,0 +1,13 @@
+import { states } from './constants';
+
+export default () => ({
+  created: {
+    isLoading: false,
+    mergeRequests: [],
+  },
+  assigned: {
+    isLoading: false,
+    mergeRequests: [],
+  },
+  state: states.opened,
+});
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
new file mode 100644
index 00000000000..fe1dc9ac8f8
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
@@ -0,0 +1,114 @@
+import Visibility from 'visibilityjs';
+import axios from 'axios';
+import { __ } from '../../../../locale';
+import flash from '../../../../flash';
+import Poll from '../../../../lib/utils/poll';
+import service from '../../../services';
+import { rightSidebarViews } from '../../../constants';
+import * as types from './mutation_types';
+
+let eTagPoll;
+
+export const clearEtagPoll = () => {
+  eTagPoll = null;
+};
+export const stopPipelinePolling = () => {
+  if (eTagPoll) eTagPoll.stop();
+};
+export const restartPipelinePolling = () => {
+  if (eTagPoll) eTagPoll.restart();
+};
+
+export const requestLatestPipeline = ({ commit }) => commit(types.REQUEST_LATEST_PIPELINE);
+export const receiveLatestPipelineError = ({ commit, dispatch }) => {
+  flash(__('There was an error loading latest pipeline'));
+  commit(types.RECEIVE_LASTEST_PIPELINE_ERROR);
+  dispatch('stopPipelinePolling');
+};
+export const receiveLatestPipelineSuccess = ({ rootGetters, commit }, { pipelines }) => {
+  let lastCommitPipeline = false;
+
+  if (pipelines && pipelines.length) {
+    const lastCommitHash = rootGetters.lastCommit && rootGetters.lastCommit.id;
+    lastCommitPipeline = pipelines.find(pipeline => pipeline.commit.id === lastCommitHash);
+  }
+
+  commit(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, lastCommitPipeline);
+};
+
+export const fetchLatestPipeline = ({ dispatch, rootGetters }) => {
+  if (eTagPoll) return;
+
+  dispatch('requestLatestPipeline');
+
+  eTagPoll = new Poll({
+    resource: service,
+    method: 'lastCommitPipelines',
+    data: { getters: rootGetters },
+    successCallback: ({ data }) => dispatch('receiveLatestPipelineSuccess', data),
+    errorCallback: () => dispatch('receiveLatestPipelineError'),
+  });
+
+  if (!Visibility.hidden()) {
+    eTagPoll.makeRequest();
+  }
+
+  Visibility.change(() => {
+    if (!Visibility.hidden()) {
+      dispatch('restartPipelinePolling');
+    } else {
+      dispatch('stopPipelinePolling');
+    }
+  });
+};
+
+export const requestJobs = ({ commit }, id) => commit(types.REQUEST_JOBS, id);
+export const receiveJobsError = ({ commit }, id) => {
+  flash(__('There was an error loading jobs'));
+  commit(types.RECEIVE_JOBS_ERROR, id);
+};
+export const receiveJobsSuccess = ({ commit }, { id, data }) =>
+  commit(types.RECEIVE_JOBS_SUCCESS, { id, data });
+
+export const fetchJobs = ({ dispatch }, stage) => {
+  dispatch('requestJobs', stage.id);
+
+  axios
+    .get(stage.dropdownPath)
+    .then(({ data }) => dispatch('receiveJobsSuccess', { id: stage.id, data }))
+    .catch(() => dispatch('receiveJobsError', stage.id));
+};
+
+export const toggleStageCollapsed = ({ commit }, stageId) =>
+  commit(types.TOGGLE_STAGE_COLLAPSE, stageId);
+
+export const setDetailJob = ({ commit, dispatch }, job) => {
+  commit(types.SET_DETAIL_JOB, job);
+  dispatch('setRightPane', job ? rightSidebarViews.jobsDetail : rightSidebarViews.pipelines, {
+    root: true,
+  });
+};
+
+export const requestJobTrace = ({ commit }) => commit(types.REQUEST_JOB_TRACE);
+export const receiveJobTraceError = ({ commit }) => {
+  flash(__('Error fetching job trace'));
+  commit(types.RECEIVE_JOB_TRACE_ERROR);
+};
+export const receiveJobTraceSuccess = ({ commit }, data) =>
+  commit(types.RECEIVE_JOB_TRACE_SUCCESS, data);
+
+export const fetchJobTrace = ({ dispatch, state }) => {
+  dispatch('requestJobTrace');
+
+  return axios
+    .get(`${state.detailJob.path}/trace`, { params: { format: 'json' } })
+    .then(({ data }) => dispatch('receiveJobTraceSuccess', data))
+    .catch(() => dispatch('receiveJobTraceError'));
+};
+
+export const resetLatestPipeline = ({ commit }) => {
+  commit(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, null);
+  commit(types.SET_DETAIL_JOB, null);
+};
+
+export default () => {};
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/constants.js b/app/assets/javascripts/ide/stores/modules/pipelines/constants.js
new file mode 100644
index 00000000000..f5b96327e40
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/constants.js
@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export const states = {
+  failed: 'failed',
+};
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/getters.js b/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
new file mode 100644
index 00000000000..f545453806f
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
@@ -0,0 +1,22 @@
+import { states } from './constants';
+
+export const hasLatestPipeline = state => !state.isLoadingPipeline && !!state.latestPipeline;
+
+export const pipelineFailed = state =>
+  state.latestPipeline && state.latestPipeline.details.status.text === states.failed;
+
+export const failedStages = state =>
+  state.stages.filter(stage => stage.status.text.toLowerCase() === states.failed).map(stage => ({
+    ...stage,
+    jobs: stage.jobs.filter(job => job.status.text.toLowerCase() === states.failed),
+  }));
+
+export const failedJobsCount = state =>
+  state.stages.reduce(
+    (acc, stage) => acc + stage.jobs.filter(j => j.status.text === states.failed).length,
+    0,
+  );
+
+export const jobsCount = state => state.stages.reduce((acc, stage) => acc + stage.jobs.length, 0);
+
+export default () => {};
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/index.js b/app/assets/javascripts/ide/stores/modules/pipelines/index.js
new file mode 100644
index 00000000000..b44c3141b81
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/index.js
@@ -0,0 +1,12 @@
+import state from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+import * as getters from './getters';
+
+export default {
+  namespaced: true,
+  state: state(),
+  actions,
+  mutations,
+  getters,
+};
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js b/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js
new file mode 100644
index 00000000000..f4c36b9d96f
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js
@@ -0,0 +1,15 @@
+export const REQUEST_LATEST_PIPELINE = 'REQUEST_LATEST_PIPELINE';
+export const RECEIVE_LASTEST_PIPELINE_ERROR = 'RECEIVE_LASTEST_PIPELINE_ERROR';
+export const RECEIVE_LASTEST_PIPELINE_SUCCESS = 'RECEIVE_LASTEST_PIPELINE_SUCCESS';
+
+export const REQUEST_JOBS = 'REQUEST_JOBS';
+export const RECEIVE_JOBS_ERROR = 'RECEIVE_JOBS_ERROR';
+export const RECEIVE_JOBS_SUCCESS = 'RECEIVE_JOBS_SUCCESS';
+
+export const TOGGLE_STAGE_COLLAPSE = 'TOGGLE_STAGE_COLLAPSE';
+
+export const SET_DETAIL_JOB = 'SET_DETAIL_JOB';
+
+export const REQUEST_JOB_TRACE = 'REQUEST_JOB_TRACE';
+export const RECEIVE_JOB_TRACE_ERROR = 'RECEIVE_JOB_TRACE_ERROR';
+export const RECEIVE_JOB_TRACE_SUCCESS = 'RECEIVE_JOB_TRACE_SUCCESS';
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
new file mode 100644
index 00000000000..5a2213bbe89
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
@@ -0,0 +1,79 @@
+/* eslint-disable no-param-reassign */
+import * as types from './mutation_types';
+import { normalizeJob } from './utils';
+
+export default {
+  [types.REQUEST_LATEST_PIPELINE](state) {
+    state.isLoadingPipeline = true;
+  },
+  [types.RECEIVE_LASTEST_PIPELINE_ERROR](state) {
+    state.isLoadingPipeline = false;
+  },
+  [types.RECEIVE_LASTEST_PIPELINE_SUCCESS](state, pipeline) {
+    state.isLoadingPipeline = false;
+
+    if (pipeline) {
+      state.latestPipeline = {
+        id: pipeline.id,
+        path: pipeline.path,
+        commit: pipeline.commit,
+        details: {
+          status: pipeline.details.status,
+        },
+        yamlError: pipeline.yaml_errors,
+      };
+      state.stages = pipeline.details.stages.map((stage, i) => {
+        const foundStage = state.stages.find(s => s.id === i);
+        return {
+          id: i,
+          dropdownPath: stage.dropdown_path,
+          name: stage.name,
+          status: stage.status,
+          isCollapsed: foundStage ? foundStage.isCollapsed : false,
+          isLoading: foundStage ? foundStage.isLoading : false,
+          jobs: foundStage ? foundStage.jobs : [],
+        };
+      });
+    } else {
+      state.latestPipeline = false;
+    }
+  },
+  [types.REQUEST_JOBS](state, id) {
+    state.stages = state.stages.map(stage => ({
+      ...stage,
+      isLoading: stage.id === id ? true : stage.isLoading,
+    }));
+  },
+  [types.RECEIVE_JOBS_ERROR](state, id) {
+    state.stages = state.stages.map(stage => ({
+      ...stage,
+      isLoading: stage.id === id ? false : stage.isLoading,
+    }));
+  },
+  [types.RECEIVE_JOBS_SUCCESS](state, { id, data }) {
+    state.stages = state.stages.map(stage => ({
+      ...stage,
+      isLoading: stage.id === id ? false : stage.isLoading,
+      jobs: stage.id === id ? data.latest_statuses.map(normalizeJob) : stage.jobs,
+    }));
+  },
+  [types.TOGGLE_STAGE_COLLAPSE](state, id) {
+    state.stages = state.stages.map(stage => ({
+      ...stage,
+      isCollapsed: stage.id === id ? !stage.isCollapsed : stage.isCollapsed,
+    }));
+  },
+  [types.SET_DETAIL_JOB](state, job) {
+    state.detailJob = { ...job };
+  },
+  [types.REQUEST_JOB_TRACE](state) {
+    state.detailJob.isLoading = true;
+  },
+  [types.RECEIVE_JOB_TRACE_ERROR](state) {
+    state.detailJob.isLoading = false;
+  },
+  [types.RECEIVE_JOB_TRACE_SUCCESS](state, data) {
+    state.detailJob.isLoading = false;
+    state.detailJob.output = data.html;
+  },
+};
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/state.js b/app/assets/javascripts/ide/stores/modules/pipelines/state.js
new file mode 100644
index 00000000000..8651e267b53
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/state.js
@@ -0,0 +1,7 @@
+export default () => ({
+  isLoadingPipeline: true,
+  isLoadingJobs: false,
+  latestPipeline: null,
+  stages: [],
+  detailJob: null,
+});
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/utils.js b/app/assets/javascripts/ide/stores/modules/pipelines/utils.js
new file mode 100644
index 00000000000..a6caca2d2dc
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/utils.js
@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/prefer-default-export
+export const normalizeJob = job => ({
+  id: job.id,
+  name: job.name,
+  status: job.status,
+  path: job.build_path,
+  rawPath: `${job.build_path}/raw`,
+  started: job.started,
+  output: '',
+  isLoading: false,
+});
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index e28f190897c..fda606dbf01 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -5,20 +5,30 @@ export const SET_LAST_COMMIT_MSG = 'SET_LAST_COMMIT_MSG';
 export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';
 export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED';
 export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS';
+export const SET_EMPTY_STATE_SVGS = 'SET_EMPTY_STATE_SVGS';
+export const SET_LINKS = 'SET_LINKS';
 
 // Project Mutation Types
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_CURRENT_PROJECT = 'SET_CURRENT_PROJECT';
 export const TOGGLE_PROJECT_OPEN = 'TOGGLE_PROJECT_OPEN';
 
+// Merge Request Mutation Types
+export const SET_MERGE_REQUEST = 'SET_MERGE_REQUEST';
+export const SET_CURRENT_MERGE_REQUEST = 'SET_CURRENT_MERGE_REQUEST';
+export const SET_MERGE_REQUEST_CHANGES = 'SET_MERGE_REQUEST_CHANGES';
+export const SET_MERGE_REQUEST_VERSIONS = 'SET_MERGE_REQUEST_VERSIONS';
+
 // Branch Mutation Types
 export const SET_BRANCH = 'SET_BRANCH';
+export const SET_BRANCH_COMMIT = 'SET_BRANCH_COMMIT';
 export const SET_BRANCH_WORKING_REFERENCE = 'SET_BRANCH_WORKING_REFERENCE';
 export const TOGGLE_BRANCH_OPEN = 'TOGGLE_BRANCH_OPEN';
 
 // Tree mutation types
 export const SET_DIRECTORY_DATA = 'SET_DIRECTORY_DATA';
 export const TOGGLE_TREE_OPEN = 'TOGGLE_TREE_OPEN';
+export const SET_TREE_OPEN = 'SET_TREE_OPEN';
 export const SET_LAST_COMMIT_URL = 'SET_LAST_COMMIT_URL';
 export const CREATE_TREE = 'CREATE_TREE';
 export const REMOVE_ALL_CHANGES_FILES = 'REMOVE_ALL_CHANGES_FILES';
@@ -28,9 +38,11 @@ export const SET_FILE_DATA = 'SET_FILE_DATA';
 export const TOGGLE_FILE_OPEN = 'TOGGLE_FILE_OPEN';
 export const SET_FILE_ACTIVE = 'SET_FILE_ACTIVE';
 export const SET_FILE_RAW_DATA = 'SET_FILE_RAW_DATA';
+export const SET_FILE_BASE_RAW_DATA = 'SET_FILE_BASE_RAW_DATA';
 export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
 export const SET_FILE_LANGUAGE = 'SET_FILE_LANGUAGE';
 export const SET_FILE_POSITION = 'SET_FILE_POSITION';
+export const SET_FILE_VIEWMODE = 'SET_FILE_VIEWMODE';
 export const SET_FILE_EOL = 'SET_FILE_EOL';
 export const DISCARD_FILE_CHANGES = 'DISCARD_FILE_CHANGES';
 export const ADD_FILE_TO_CHANGED = 'ADD_FILE_TO_CHANGED';
@@ -39,5 +51,24 @@ export const TOGGLE_FILE_CHANGED = 'TOGGLE_FILE_CHANGED';
 export const SET_CURRENT_BRANCH = 'SET_CURRENT_BRANCH';
 export const SET_ENTRIES = 'SET_ENTRIES';
 export const CREATE_TMP_ENTRY = 'CREATE_TMP_ENTRY';
+export const SET_FILE_MERGE_REQUEST_CHANGE = 'SET_FILE_MERGE_REQUEST_CHANGE';
 export const UPDATE_VIEWER = 'UPDATE_VIEWER';
 export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';
+
+export const CLEAR_STAGED_CHANGES = 'CLEAR_STAGED_CHANGES';
+export const STAGE_CHANGE = 'STAGE_CHANGE';
+export const UNSTAGE_CHANGE = 'UNSTAGE_CHANGE';
+
+export const UPDATE_FILE_AFTER_COMMIT = 'UPDATE_FILE_AFTER_COMMIT';
+export const ADD_PENDING_TAB = 'ADD_PENDING_TAB';
+export const REMOVE_PENDING_TAB = 'REMOVE_PENDING_TAB';
+
+export const UPDATE_ACTIVITY_BAR_VIEW = 'UPDATE_ACTIVITY_BAR_VIEW';
+export const UPDATE_TEMP_FLAG = 'UPDATE_TEMP_FLAG';
+export const TOGGLE_FILE_FINDER = 'TOGGLE_FILE_FINDER';
+export const BURST_UNUSED_SEAL = 'BURST_UNUSED_SEAL';
+
+export const SET_RIGHT_PANE = 'SET_RIGHT_PANE';
+
+export const CLEAR_PROJECTS = 'CLEAR_PROJECTS';
+export const RESET_OPEN_FILES = 'RESET_OPEN_FILES';
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index da41fc9285c..48f1da4eccf 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -1,8 +1,10 @@
 import * as types from './mutation_types';
 import projectMutations from './mutations/project';
+import mergeRequestMutation from './mutations/merge_request';
 import fileMutations from './mutations/file';
 import treeMutations from './mutations/tree';
 import branchMutations from './mutations/branch';
+import { sortTree } from './utils';
 
 export default {
   [types.SET_INITIAL_DATA](state, data) {
@@ -11,10 +13,7 @@ export default {
   [types.TOGGLE_LOADING](state, { entry, forceValue = undefined }) {
     if (entry.path) {
       Object.assign(state.entries[entry.path], {
-        loading:
-          forceValue !== undefined
-            ? forceValue
-            : !state.entries[entry.path].loading,
+        loading: forceValue !== undefined ? forceValue : !state.entries[entry.path].loading,
       });
     } else {
       Object.assign(entry, {
@@ -51,6 +50,11 @@ export default {
       lastCommitMsg,
     });
   },
+  [types.CLEAR_STAGED_CHANGES](state) {
+    Object.assign(state, {
+      stagedFiles: [],
+    });
+  },
   [types.SET_ENTRIES](state, entries) {
     Object.assign(state, {
       entries,
@@ -70,7 +74,7 @@ export default {
           f => foundEntry.tree.find(e => e.path === f.path) === undefined,
         );
         Object.assign(foundEntry, {
-          tree: foundEntry.tree.concat(tree),
+          tree: sortTree(foundEntry.tree.concat(tree)),
         });
       }
 
@@ -83,12 +87,16 @@ export default {
 
     if (!foundEntry) {
       Object.assign(state.trees[`${projectId}/${branchId}`], {
-        tree: state.trees[`${projectId}/${branchId}`].tree.concat(
-          data.treeList,
-        ),
+        tree: sortTree(state.trees[`${projectId}/${branchId}`].tree.concat(data.treeList)),
       });
     }
   },
+  [types.UPDATE_TEMP_FLAG](state, { path, tempFile }) {
+    Object.assign(state.entries[path], {
+      tempFile,
+      changed: tempFile,
+    });
+  },
   [types.UPDATE_VIEWER](state, viewer) {
     Object.assign(state, {
       viewer,
@@ -99,7 +107,64 @@ export default {
       delayViewerUpdated,
     });
   },
+  [types.UPDATE_ACTIVITY_BAR_VIEW](state, currentActivityView) {
+    Object.assign(state, {
+      currentActivityView,
+    });
+  },
+  [types.SET_EMPTY_STATE_SVGS](
+    state,
+    { emptyStateSvgPath, noChangesStateSvgPath, committedStateSvgPath, pipelinesEmptyStateSvgPath },
+  ) {
+    Object.assign(state, {
+      emptyStateSvgPath,
+      noChangesStateSvgPath,
+      committedStateSvgPath,
+      pipelinesEmptyStateSvgPath,
+    });
+  },
+  [types.TOGGLE_FILE_FINDER](state, fileFindVisible) {
+    Object.assign(state, {
+      fileFindVisible,
+    });
+  },
+  [types.UPDATE_FILE_AFTER_COMMIT](state, { file, lastCommit }) {
+    const changedFile = state.changedFiles.find(f => f.path === file.path);
+
+    Object.assign(state.entries[file.path], {
+      raw: file.content,
+      changed: !!changedFile,
+      staged: false,
+      lastCommit: Object.assign(state.entries[file.path].lastCommit, {
+        id: lastCommit.commit.id,
+        url: lastCommit.commit_path,
+        message: lastCommit.commit.message,
+        author: lastCommit.commit.author_name,
+        updatedAt: lastCommit.commit.authored_date,
+      }),
+    });
+  },
+  [types.BURST_UNUSED_SEAL](state) {
+    Object.assign(state, {
+      unusedSeal: false,
+    });
+  },
+  [types.SET_RIGHT_PANE](state, view) {
+    Object.assign(state, {
+      rightPane: state.rightPane === view ? null : view,
+    });
+  },
+  [types.SET_LINKS](state, links) {
+    Object.assign(state, { links });
+  },
+  [types.CLEAR_PROJECTS](state) {
+    Object.assign(state, { projects: {}, trees: {} });
+  },
+  [types.RESET_OPEN_FILES](state) {
+    Object.assign(state, { openFiles: [] });
+  },
   ...projectMutations,
+  ...mergeRequestMutation,
   ...fileMutations,
   ...treeMutations,
   ...branchMutations,
diff --git a/app/assets/javascripts/ide/stores/mutations/branch.js b/app/assets/javascripts/ide/stores/mutations/branch.js
index 2972ba5e38e..e09f88878f4 100644
--- a/app/assets/javascripts/ide/stores/mutations/branch.js
+++ b/app/assets/javascripts/ide/stores/mutations/branch.js
@@ -23,4 +23,9 @@ export default {
       workingReference: reference,
     });
   },
+  [types.SET_BRANCH_COMMIT](state, { projectId, branchId, commit }) {
+    Object.assign(state.projects[projectId].branches[branchId], {
+      commit,
+    });
+  },
 };
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 2500f13db7c..46547820425 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -1,10 +1,21 @@
+/* eslint-disable no-param-reassign */
 import * as types from '../mutation_types';
+import { diffModes } from '../../constants';
 
 export default {
   [types.SET_FILE_ACTIVE](state, { path, active }) {
     Object.assign(state.entries[path], {
       active,
+      lastOpenedAt: new Date().getTime(),
     });
+
+    if (active && !state.entries[path].pending) {
+      Object.assign(state, {
+        openFiles: state.openFiles.map(f =>
+          Object.assign(f, { active: f.pending ? false : f.active }),
+        ),
+      });
+    }
   },
   [types.TOGGLE_FILE_OPEN](state, path) {
     Object.assign(state.entries[path], {
@@ -12,10 +23,14 @@ export default {
     });
 
     if (state.entries[path].opened) {
-      state.openFiles.push(state.entries[path]);
+      Object.assign(state, {
+        openFiles: state.openFiles.filter(f => f.path !== path).concat(state.entries[path]),
+      });
     } else {
+      const file = state.entries[path];
+
       Object.assign(state, {
-        openFiles: state.openFiles.filter(f => f.path !== path),
+        openFiles: state.openFiles.filter(f => f.key !== file.key),
       });
     }
   },
@@ -28,6 +43,11 @@ export default {
       rawPath: data.raw_path,
       binary: data.binary,
       renderError: data.render_error,
+      raw: null,
+      baseRaw: null,
+      html: data.html,
+      size: data.size,
+      lastCommitSha: data.last_commit_sha,
     });
   },
   [types.SET_FILE_RAW_DATA](state, { file, raw }) {
@@ -35,8 +55,15 @@ export default {
       raw,
     });
   },
+  [types.SET_FILE_BASE_RAW_DATA](state, { file, baseRaw }) {
+    Object.assign(state.entries[file.path], {
+      baseRaw,
+    });
+  },
   [types.UPDATE_FILE_CONTENT](state, { path, content }) {
-    const changed = content !== state.entries[path].raw;
+    const stagedFile = state.stagedFiles.find(f => f.path === path);
+    const rawContent = stagedFile ? stagedFile.content : state.entries[path].raw;
+    const changed = content !== rawContent;
 
     Object.assign(state.entries[path], {
       content,
@@ -59,9 +86,32 @@ export default {
       editorColumn,
     });
   },
+  [types.SET_FILE_MERGE_REQUEST_CHANGE](state, { file, mrChange }) {
+    let diffMode = diffModes.replaced;
+    if (mrChange.new_file) {
+      diffMode = diffModes.new;
+    } else if (mrChange.deleted_file) {
+      diffMode = diffModes.deleted;
+    } else if (mrChange.renamed_file) {
+      diffMode = diffModes.renamed;
+    }
+    Object.assign(state.entries[file.path], {
+      mrChange: {
+        ...mrChange,
+        diffMode,
+      },
+    });
+  },
+  [types.SET_FILE_VIEWMODE](state, { file, viewMode }) {
+    Object.assign(state.entries[file.path], {
+      viewMode,
+    });
+  },
   [types.DISCARD_FILE_CHANGES](state, path) {
+    const stagedFile = state.stagedFiles.find(f => f.path === path);
+
     Object.assign(state.entries[path], {
-      content: state.entries[path].raw,
+      content: stagedFile ? stagedFile.content : state.entries[path].raw,
       changed: false,
     });
   },
@@ -75,9 +125,86 @@ export default {
       changedFiles: state.changedFiles.filter(f => f.path !== path),
     });
   },
+  [types.STAGE_CHANGE](state, path) {
+    const stagedFile = state.stagedFiles.find(f => f.path === path);
+
+    Object.assign(state, {
+      changedFiles: state.changedFiles.filter(f => f.path !== path),
+      entries: Object.assign(state.entries, {
+        [path]: Object.assign(state.entries[path], {
+          staged: true,
+          changed: false,
+        }),
+      }),
+    });
+
+    if (stagedFile) {
+      Object.assign(stagedFile, {
+        ...state.entries[path],
+      });
+    } else {
+      Object.assign(state, {
+        stagedFiles: state.stagedFiles.concat({
+          ...state.entries[path],
+        }),
+      });
+    }
+  },
+  [types.UNSTAGE_CHANGE](state, path) {
+    const changedFile = state.changedFiles.find(f => f.path === path);
+    const stagedFile = state.stagedFiles.find(f => f.path === path);
+
+    if (!changedFile && stagedFile) {
+      Object.assign(state.entries[path], {
+        ...stagedFile,
+        key: state.entries[path].key,
+        active: state.entries[path].active,
+        opened: state.entries[path].opened,
+        changed: true,
+      });
+
+      Object.assign(state, {
+        changedFiles: state.changedFiles.concat(state.entries[path]),
+      });
+    }
+
+    Object.assign(state, {
+      stagedFiles: state.stagedFiles.filter(f => f.path !== path),
+      entries: Object.assign(state.entries, {
+        [path]: Object.assign(state.entries[path], {
+          staged: false,
+        }),
+      }),
+    });
+  },
   [types.TOGGLE_FILE_CHANGED](state, { file, changed }) {
     Object.assign(state.entries[file.path], {
       changed,
     });
   },
+  [types.ADD_PENDING_TAB](state, { file, keyPrefix = 'pending' }) {
+    state.entries[file.path].opened = false;
+    state.entries[file.path].active = false;
+    state.entries[file.path].lastOpenedAt = new Date().getTime();
+    state.openFiles.forEach(f =>
+      Object.assign(f, {
+        opened: false,
+        active: false,
+      }),
+    );
+    state.openFiles = [
+      {
+        ...file,
+        key: `${keyPrefix}-${file.key}`,
+        pending: true,
+        opened: true,
+        active: true,
+      },
+    ];
+  },
+  [types.REMOVE_PENDING_TAB](state, file) {
+    Object.assign(state, {
+      openFiles: state.openFiles.filter(f => f.key !== file.key),
+    });
+  },
 };
diff --git a/app/assets/javascripts/ide/stores/mutations/merge_request.js b/app/assets/javascripts/ide/stores/mutations/merge_request.js
new file mode 100644
index 00000000000..334819fe702
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/mutations/merge_request.js
@@ -0,0 +1,33 @@
+import * as types from '../mutation_types';
+
+export default {
+  [types.SET_CURRENT_MERGE_REQUEST](state, currentMergeRequestId) {
+    Object.assign(state, {
+      currentMergeRequestId,
+    });
+  },
+  [types.SET_MERGE_REQUEST](state, { projectPath, mergeRequestId, mergeRequest }) {
+    Object.assign(state.projects[projectPath], {
+      mergeRequests: {
+        [mergeRequestId]: {
+          ...mergeRequest,
+          active: true,
+          changes: [],
+          versions: [],
+          baseCommitSha: null,
+        },
+      },
+    });
+  },
+  [types.SET_MERGE_REQUEST_CHANGES](state, { projectPath, mergeRequestId, changes }) {
+    Object.assign(state.projects[projectPath].mergeRequests[mergeRequestId], {
+      changes,
+    });
+  },
+  [types.SET_MERGE_REQUEST_VERSIONS](state, { projectPath, mergeRequestId, versions }) {
+    Object.assign(state.projects[projectPath].mergeRequests[mergeRequestId], {
+      versions,
+      baseCommitSha: versions.length ? versions[0].base_commit_sha : null,
+    });
+  },
+};
diff --git a/app/assets/javascripts/ide/stores/mutations/project.js b/app/assets/javascripts/ide/stores/mutations/project.js
index 2816562a919..284b39a2c72 100644
--- a/app/assets/javascripts/ide/stores/mutations/project.js
+++ b/app/assets/javascripts/ide/stores/mutations/project.js
@@ -11,6 +11,7 @@ export default {
     Object.assign(project, {
       tree: [],
       branches: {},
+      mergeRequests: {},
       active: true,
     });
 
diff --git a/app/assets/javascripts/ide/stores/mutations/tree.js b/app/assets/javascripts/ide/stores/mutations/tree.js
index 7f7e470c9bb..2cf34af9274 100644
--- a/app/assets/javascripts/ide/stores/mutations/tree.js
+++ b/app/assets/javascripts/ide/stores/mutations/tree.js
@@ -6,6 +6,11 @@ export default {
       opened: !state.entries[path].opened,
     });
   },
+  [types.SET_TREE_OPEN](state, path) {
+    Object.assign(state.entries[path], {
+      opened: true,
+    });
+  },
   [types.CREATE_TREE](state, { treePath }) {
     Object.assign(state, {
       trees: Object.assign({}, state.trees, {
@@ -17,12 +22,8 @@ export default {
     });
   },
   [types.SET_DIRECTORY_DATA](state, { data, treePath }) {
-    Object.assign(state, {
-      trees: Object.assign(state.trees, {
-        [treePath]: {
-          tree: data,
-        },
-      }),
+    Object.assign(state.trees[treePath], {
+      tree: data,
     });
   },
   [types.SET_LAST_COMMIT_URL](state, { tree = state, url }) {
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index 6110f54951c..4aac4696075 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -1,7 +1,11 @@
+import { activityBarViews, viewerTypes } from '../constants';
+
 export default () => ({
   currentProjectId: '',
   currentBranchId: '',
+  currentMergeRequestId: '',
   changedFiles: [],
+  stagedFiles: [],
   endpoints: {},
   lastCommitMsg: '',
   lastCommitPath: '',
@@ -14,6 +18,11 @@ export default () => ({
   rightPanelCollapsed: false,
   panelResizing: false,
   entries: {},
-  viewer: 'editor',
+  viewer: viewerTypes.edit,
   delayViewerUpdated: false,
+  currentActivityView: activityBarViews.edit,
+  unusedSeal: true,
+  fileFindVisible: false,
+  rightPane: null,
+  links: {},
 });
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 487ea1ead8e..10368a4d97c 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -1,5 +1,7 @@
 export const dataStructure = () => ({
   id: '',
+  // Key will contain a mixture of ID and path
+  // it can also contain a prefix `pending-` for files opened in review mode
   key: '',
   type: '',
   projectId: '',
@@ -13,7 +15,9 @@ export const dataStructure = () => ({
   opened: false,
   active: false,
   changed: false,
+  staged: false,
   lastCommitPath: '',
+  lastCommitSha: '',
   lastCommit: {
     id: '',
     url: '',
@@ -36,9 +40,15 @@ export const dataStructure = () => ({
   editorColumn: 1,
   fileLanguage: '',
   eol: '',
+  viewMode: 'editor',
+  previewMode: null,
+  size: 0,
+  parentPath: null,
+  lastOpenedAt: 0,
+  mrChange: null,
 });
 
-export const decorateData = (entity) => {
+export const decorateData = entity => {
   const {
     id,
     projectId,
@@ -55,9 +65,10 @@ export const decorateData = (entity) => {
     changed = false,
     parentTreeUrl = '',
     base64 = false,
-
+    previewMode,
     file_lock,
-
+    html,
+    parentPath = '',
   } = entity;
 
   return {
@@ -78,30 +89,31 @@ export const decorateData = (entity) => {
     renderError,
     content,
     base64,
-
+    previewMode,
     file_lock,
-
+    html,
+    parentPath,
   };
 };
 
-export const findEntry = (tree, type, name, prop = 'name') => tree.find(
-  f => f.type === type && f[prop] === name,
-);
+export const findEntry = (tree, type, name, prop = 'name') =>
+  tree.find(f => f.type === type && f[prop] === name);
 
 export const findIndexOfFile = (state, file) => state.findIndex(f => f.path === file.path);
 
-export const setPageTitle = (title) => {
+export const setPageTitle = title => {
   document.title = title;
 };
 
-export const createCommitPayload = (branch, newBranch, state, rootState) => ({
+export const createCommitPayload = ({ branch, newBranch, state, rootState }) => ({
   branch,
   commit_message: state.commitMessage,
-  actions: rootState.changedFiles.map(f => ({
+  actions: rootState.stagedFiles.map(f => ({
     action: f.tempFile ? 'create' : 'update',
     file_path: f.path,
     content: f.content,
     encoding: f.base64 ? 'base64' : 'text',
+    last_commit_id: newBranch ? undefined : f.lastCommitSha,
   })),
   start_branch: newBranch ? rootState.currentBranchId : undefined,
 });
@@ -115,11 +127,22 @@ const sortTreesByTypeAndName = (a, b) => {
   } else if (a.type === 'blob' && b.type === 'tree') {
     return 1;
   }
-  if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
-  if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
+  if (a.name < b.name) return -1;
+  if (a.name > b.name) return 1;
   return 0;
 };
 
-export const sortTree = sortedTree => sortedTree.map(entity => Object.assign(entity, {
-  tree: entity.tree.length ? sortTree(entity.tree) : [],
-})).sort(sortTreesByTypeAndName);
+export const sortTree = sortedTree =>
+  sortedTree
+    .map(entity =>
+      Object.assign(entity, {
+        tree: entity.tree.length ? sortTree(entity.tree) : [],
+      }),
+    )
+    .sort(sortTreesByTypeAndName);
+
+export const filePathMatches = (f, path) =>
+  f.path.replace(new RegExp(`${f.name}$`), '').indexOf(`${path}/`) === 0;
+
+export const getChangesCountForFiles = (files, path) =>
+  files.filter(f => filePathMatches(f, path)).length;
diff --git a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
index a4cd1ab099f..fa35c215880 100644
--- a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
+++ b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
@@ -1,17 +1,13 @@
+import { viewerInformationForPath } from '~/vue_shared/components/content_viewer/lib/viewer_utils';
 import { decorateData, sortTree } from '../utils';
 
+// eslint-disable-next-line no-restricted-globals
 self.addEventListener('message', e => {
-  const {
-    data,
-    projectId,
-    branchId,
-    tempFile = false,
-    content = '',
-    base64 = false,
-  } = e.data;
+  const { data, projectId, branchId, tempFile = false, content = '', base64 = false } = e.data;
 
   const treeList = [];
   let file;
+  let parentPath;
   const entries = data.reduce((acc, path) => {
     const pathSplit = path.split('/');
     const blobName = pathSplit.pop().trim();
@@ -19,26 +15,25 @@ self.addEventListener('message', e => {
     if (pathSplit.length > 0) {
       pathSplit.reduce((pathAcc, folderName) => {
         const parentFolder = acc[pathAcc[pathAcc.length - 1]];
-        const folderPath = `${
-          parentFolder ? `${parentFolder.path}/` : ''
-        }${folderName}`;
+        const folderPath = `${parentFolder ? `${parentFolder.path}/` : ''}${folderName}`;
         const foundEntry = acc[folderPath];
 
         if (!foundEntry) {
+          parentPath = parentFolder ? parentFolder.path : null;
+
           const tree = decorateData({
             projectId,
             branchId,
             id: folderPath,
             name: folderName,
             path: folderPath,
-            url: `/${projectId}/tree/${branchId}/${folderPath}/`,
+            url: `/${projectId}/tree/${branchId}/-/${folderPath}/`,
             type: 'tree',
-            parentTreeUrl: parentFolder
-              ? parentFolder.url
-              : `/${projectId}/tree/${branchId}/`,
+            parentTreeUrl: parentFolder ? parentFolder.url : `/${projectId}/tree/${branchId}/`,
             tempFile,
             changed: tempFile,
             opened: tempFile,
+            parentPath,
           });
 
           Object.assign(acc, {
@@ -62,21 +57,23 @@ self.addEventListener('message', e => {
 
     if (blobName !== '') {
       const fileFolder = acc[pathSplit.join('/')];
+      parentPath = fileFolder ? fileFolder.path : null;
+
       file = decorateData({
         projectId,
         branchId,
         id: path,
         name: blobName,
         path,
-        url: `/${projectId}/blob/${branchId}/${path}`,
+        url: `/${projectId}/blob/${branchId}/-/${path}`,
         type: 'blob',
-        parentTreeUrl: fileFolder
-          ? fileFolder.url
-          : `/${projectId}/blob/${branchId}`,
+        parentTreeUrl: fileFolder ? fileFolder.url : `/${projectId}/blob/${branchId}`,
         tempFile,
         changed: tempFile,
         content,
         base64,
+        previewMode: viewerInformationForPath(blobName),
+        parentPath,
       });
 
       Object.assign(acc, {
@@ -93,9 +90,11 @@ self.addEventListener('message', e => {
     return acc;
   }, {});
 
+  // eslint-disable-next-line no-restricted-globals
   self.postMessage({
     entries,
     treeList: sortTree(treeList),
     file,
+    parentPath,
   });
 });
diff --git a/app/assets/javascripts/image_diff/helpers/dom_helper.js b/app/assets/javascripts/image_diff/helpers/dom_helper.js
index 12d56714b34..a319bcccb8f 100644
--- a/app/assets/javascripts/image_diff/helpers/dom_helper.js
+++ b/app/assets/javascripts/image_diff/helpers/dom_helper.js
@@ -2,7 +2,8 @@ export function setPositionDataAttribute(el, options) {
   // Update position data attribute so that the
   // new comment form can use this data for ajax request
   const { x, y, width, height } = options;
-  const position = el.dataset.position;
+  const { position } = el.dataset;
+
   const positionObject = Object.assign({}, JSON.parse(position), {
     x,
     y,
diff --git a/app/assets/javascripts/image_diff/helpers/utils_helper.js b/app/assets/javascripts/image_diff/helpers/utils_helper.js
index 28d9a969143..beec99e6934 100644
--- a/app/assets/javascripts/image_diff/helpers/utils_helper.js
+++ b/app/assets/javascripts/image_diff/helpers/utils_helper.js
@@ -40,8 +40,7 @@ export function getTargetSelection(event) {
   const x = event.offsetX;
   const y = event.offsetY;
 
-  const width = imageEl.width;
-  const height = imageEl.height;
+  const { width, height } = imageEl;
 
   const actualWidth = imageEl.naturalWidth;
   const actualHeight = imageEl.naturalHeight;
diff --git a/app/assets/javascripts/importer_status.js b/app/assets/javascripts/importer_status.js
index b469e1e2adc..f9ff0722c01 100644
--- a/app/assets/javascripts/importer_status.js
+++ b/app/assets/javascripts/importer_status.js
@@ -58,7 +58,7 @@ class ImporterStatus {
       job.find('.import-target').html(`<a href="${data.full_path}">${data.full_path}</a>`);
       $('table.import-jobs tbody').prepend(job);
 
-      job.addClass('active');
+      job.addClass('table-active');
       const connectingVerb = this.ciCdOnly ? __('connecting') : __('importing');
       job.find('.import-actions').html(sprintf(
         _.escape(__('%{loadingIcon} Started')), {
@@ -67,7 +67,15 @@ class ImporterStatus {
         false,
       ));
     })
-    .catch(() => flash(__('An error occurred while importing project')));
+    .catch((error) => {
+      let details = error;
+
+      if (error.response && error.response.data && error.response.data.errors) {
+        details = error.response.data.errors;
+      }
+
+      flash(__(`An error occurred while importing project: ${details}`));
+    });
   }
 
   autoUpdate() {
@@ -81,7 +89,7 @@ class ImporterStatus {
 
           switch (job.import_status) {
             case 'finished':
-              jobItem.removeClass('active').addClass('success');
+              jobItem.removeClass('table-active').addClass('table-success');
               statusField.html(`<span><i class="fa fa-check"></i> ${__('Done')}</span>`);
               break;
             case 'scheduled':
diff --git a/app/assets/javascripts/init_changes_dropdown.js b/app/assets/javascripts/init_changes_dropdown.js
index 09cca1dc7d9..5c5a6e01848 100644
--- a/app/assets/javascripts/init_changes_dropdown.js
+++ b/app/assets/javascripts/init_changes_dropdown.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import stickyMonitor from './lib/utils/sticky';
+import { stickyMonitor } from './lib/utils/sticky';
 
 export default (stickyTop) => {
   stickyMonitor(document.querySelector('.js-diff-files-changed'), stickyTop);
diff --git a/app/assets/javascripts/init_notes.js b/app/assets/javascripts/init_notes.js
index 882aedfcc76..3c71258e53b 100644
--- a/app/assets/javascripts/init_notes.js
+++ b/app/assets/javascripts/init_notes.js
@@ -7,10 +7,10 @@ export default () => {
     notesIds,
     now,
     diffView,
-    autocomplete,
+    enableGFM,
   } = JSON.parse(dataEl.innerHTML);
 
   // Create a singleton so that we don't need to assign
   // into the window object, we can just access the current isntance with Notes.instance
-  Notes.initialize(notesUrl, notesIds, now, diffView, autocomplete);
+  Notes.initialize(notesUrl, notesIds, now, diffView, enableGFM);
 };
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
index 741894b5e6c..bd90d0eaa32 100644
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -91,7 +91,6 @@ export default class IntegrationSettingsForm {
     }
   }
 
-  /* eslint-disable promise/catch-or-return, no-new */
   /**
    * Test Integration config
    */
@@ -101,13 +100,19 @@ export default class IntegrationSettingsForm {
     return axios.put(this.testEndPoint, formData)
       .then(({ data }) => {
         if (data.error) {
-          flash(`${data.message} ${data.service_response}`, 'alert', document, {
-            title: 'Save anyway',
-            clickHandler: (e) => {
-              e.preventDefault();
-              this.$form.submit();
-            },
-          });
+          let flashActions;
+
+          if (data.test_failed) {
+            flashActions = {
+              title: 'Save anyway',
+              clickHandler: (e) => {
+                e.preventDefault();
+                this.$form.submit();
+              },
+            };
+          }
+
+          flash(`${data.message} ${data.service_response}`, 'alert', document, flashActions);
         } else {
           this.$form.submit();
         }
diff --git a/app/assets/javascripts/issuable/auto_width_dropdown_select.js b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
index b2c2de9e5de..07cf1eff279 100644
--- a/app/assets/javascripts/issuable/auto_width_dropdown_select.js
+++ b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
@@ -10,7 +10,7 @@ class AutoWidthDropdownSelect {
   }
 
   init() {
-    const dropdownClass = this.dropdownClass;
+    const { dropdownClass } = this;
     this.$selectElement.select2({
       dropdownCssClass: dropdownClass,
       ...AutoWidthDropdownSelect.selectOptions(this.dropdownClass),
diff --git a/app/assets/javascripts/issuable_bulk_update_actions.js b/app/assets/javascripts/issuable_bulk_update_actions.js
index e003fb1d127..35eaf21a836 100644
--- a/app/assets/javascripts/issuable_bulk_update_actions.js
+++ b/app/assets/javascripts/issuable_bulk_update_actions.js
@@ -1,4 +1,4 @@
-/* eslint-disable comma-dangle, quotes, consistent-return, func-names, array-callback-return, space-before-function-paren, prefer-arrow-callback, max-len, no-unused-expressions, no-sequences, no-underscore-dangle, no-unused-vars, no-param-reassign */
+/* eslint-disable comma-dangle, quotes, consistent-return, func-names, array-callback-return, prefer-arrow-callback, max-len, no-unused-vars */
 
 import $ from 'jquery';
 import _ from 'underscore';
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index 7470d634b99..f3d722409b0 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -30,10 +30,10 @@ export default class IssuableContext {
         const $selectbox = $block.find('.selectbox');
         if ($selectbox.is(':visible')) {
           $selectbox.hide();
-          $block.find('.value').show();
+          $block.find('.value:not(.dont-hide)').show();
         } else {
           $selectbox.show();
-          $block.find('.value').hide();
+          $block.find('.value:not(.dont-hide)').hide();
         }
 
         if ($selectbox.is(':visible')) {
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index bb8b3d91e40..0140960b367 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, 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 */
+/* eslint-disable no-new, no-unused-vars, consistent-return, no-else-return */
 /* global GitLab */
 
 import $ from 'jquery';
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 5113ac6775d..8c225cd7d91 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -1,4 +1,4 @@
-/* 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 */
+/* eslint-disable no-var, one-var, one-var-declaration-per-line, no-unused-vars, consistent-return, quotes, max-len */
 
 import $ from 'jquery';
 import axios from './lib/utils/axios_utils';
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index e87a8ed7fea..b6364318537 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -226,7 +226,7 @@
           .then(res => res.data)
           .then(data => this.checkForSpam(data))
           .then((data) => {
-            if (location.pathname !== data.web_url) {
+            if (window.location.pathname !== data.web_url) {
               visitUrl(data.web_url);
             }
 
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index ae577e04a56..1174177f561 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -110,25 +110,25 @@
 <template>
   <div
     v-if="descriptionHtml"
-    class="description"
     :class="{
       'js-task-list-container': canUpdate
     }"
+    class="description"
   >
     <div
-      class="wiki"
+      ref="gfm-content"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation
       }"
-      v-html="descriptionHtml"
-      ref="gfm-content">
+      class="wiki"
+      v-html="descriptionHtml">
     </div>
     <textarea
-      class="hidden js-task-list-field"
       v-if="descriptionText"
       v-model="descriptionText"
       :data-update-url="updateUrl"
+      class="hidden js-task-list-field"
     >
     </textarea>
 
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
index a539506bce2..597c6d69a81 100644
--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -38,7 +38,7 @@
       },
       deleteIssuable() {
         // eslint-disable-next-line no-alert
-        if (confirm('Issue will be removed! Are you sure?')) {
+        if (window.confirm('Issue will be removed! Are you sure?')) {
           this.deleteLoading = true;
 
           eventHub.$emit('delete.issuable');
@@ -51,36 +51,36 @@
 <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"
+      class="btn btn-save float-left"
+      type="submit"
       @click.prevent="updateIssuable">
       Save changes
       <i
+        v-if="formState.updateLoading"
         class="fa fa-spinner fa-spin"
-        aria-hidden="true"
-        v-if="formState.updateLoading">
+        aria-hidden="true">
       </i>
     </button>
     <button
-      class="btn btn-default pull-right"
+      class="btn btn-default float-right"
       type="button"
       @click="closeForm">
       Cancel
     </button>
     <button
       v-if="shouldShowDeleteButton"
-      class="btn btn-danger pull-right append-right-default"
       :class="{ disabled: deleteLoading }"
-      type="button"
       :disabled="deleteLoading"
+      class="btn btn-danger float-right append-right-default"
+      type="button"
       @click="deleteIssuable">
       Delete
       <i
+        v-if="deleteLoading"
         class="fa fa-spinner fa-spin"
-        aria-hidden="true"
-        v-if="deleteLoading">
+        aria-hidden="true">
       </i>
     </button>
   </div>
diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue
index 01097b5b35e..5ff5b1630b1 100644
--- a/app/assets/javascripts/issue_show/components/edited.vue
+++ b/app/assets/javascripts/issue_show/components/edited.vue
@@ -37,16 +37,16 @@
     Edited
     <time-ago-tooltip
       v-if="updatedAt"
-      tooltip-placement="bottom"
       :time="updatedAt"
+      tooltip-placement="bottom"
     />
     <span
       v-if="hasUpdatedBy"
     >
       by
       <a
-        class="author_link"
         :href="updatedByPath"
+        class="author_link"
       >
         <span>{{ updatedByName }}</span>
       </a>
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index d9fa2764d65..5f58f671c73 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -52,13 +52,13 @@
     >
       <textarea
         id="issue-description"
+        ref="textarea"
+        slot="textarea"
+        v-model="formState.description"
         class="note-textarea js-gfm-input js-autosize markdown-area"
         data-supports-quick-actions="false"
         aria-label="Description"
-        v-model="formState.description"
-        ref="textarea"
-        slot="textarea"
-        placeholder="Write a comment or drag your files here..."
+        placeholder="Write a comment or drag your files here…"
         @keydown.meta.enter="updateIssuable"
         @keydown.ctrl.enter="updateIssuable">
       </textarea>
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue
index 7db0488e306..e90d9fad94e 100644
--- a/app/assets/javascripts/issue_show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue
@@ -48,15 +48,15 @@
     class="dropdown js-issuable-selector-wrap"
     data-issuable-type="issue">
     <button
+      ref="toggle"
+      :data-namespace-path="projectNamespace"
+      :data-project-path="projectPath"
+      :data-data="issuableTemplatesJson"
       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">
+      data-toggle="dropdown">
       <span class="dropdown-toggle-text">
         Choose a template
       </span>
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
index c3abb9fd9d5..7d1526a64b4 100644
--- a/app/assets/javascripts/issue_show/components/fields/title.vue
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -21,11 +21,11 @@
     </label>
     <input
       id="issuable-title"
+      v-model="formState.title"
       class="form-control"
       type="text"
       placeholder="Title"
       aria-label="Title"
-      v-model="formState.title"
       @keydown.meta.enter="updateIssuable"
       @keydown.ctrl.enter="updateIssuable" />
   </fieldset>
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index 779705e19ac..5bfc072e3da 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -72,8 +72,8 @@
     <locked-warning v-if="formState.lockedWarningVisible" />
     <div class="row">
       <div
-        class="col-sm-4 col-lg-3"
-        v-if="hasIssuableTemplates">
+        v-if="hasIssuableTemplates"
+        class="col-sm-4 col-lg-3">
         <description-template
           :form-state="formState"
           :issuable-templates="issuableTemplates"
@@ -84,7 +84,7 @@
       <div
         :class="{
           'col-sm-8 col-lg-9': hasIssuableTemplates,
-          'col-xs-12': !hasIssuableTemplates,
+          'col-12': !hasIssuableTemplates,
         }"
       >
         <title-field
diff --git a/app/assets/javascripts/issue_show/components/locked_warning.vue b/app/assets/javascripts/issue_show/components/locked_warning.vue
index 1c2789f154a..ad0d40faf32 100644
--- a/app/assets/javascripts/issue_show/components/locked_warning.vue
+++ b/app/assets/javascripts/issue_show/components/locked_warning.vue
@@ -2,7 +2,7 @@
   export default {
     computed: {
       currentPath() {
-        return location.pathname;
+        return window.location.pathname;
       },
     },
   };
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index aec890a2ff6..12101c0daa5 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -67,11 +67,11 @@
 <template>
   <div class="title-container">
     <h2
-      class="title"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation
       }"
+      class="title"
       v-html="titleHtml"
     >
     </h2>
@@ -80,11 +80,11 @@
       v-if="showInlineEditButton && canUpdate"
       type="button"
       class="btn btn-default btn-edit btn-svg js-issuable-edit"
-      v-html="pencilIcon"
       title="Edit title and description"
       data-placement="bottom"
       data-container="body"
       @click="edit"
+      v-html="pencilIcon"
     >
     </button>
   </div>
diff --git a/app/assets/javascripts/job.js b/app/assets/javascripts/job.js
index ace45e9dd29..fc13f467675 100644
--- a/app/assets/javascripts/job.js
+++ b/app/assets/javascripts/job.js
@@ -1,13 +1,17 @@
 import $ from 'jquery';
 import _ from 'underscore';
+import { polyfillSticky } from './lib/utils/sticky';
 import axios from './lib/utils/axios_utils';
 import { visitUrl } from './lib/utils/url_utility';
 import bp from './breakpoints';
 import { numberToHumanSize } from './lib/utils/number_utils';
 import { setCiStatusFavicon } from './lib/utils/common_utils';
+import { isScrolledToBottom, scrollDown } from './lib/utils/scroll_utils';
+import LogOutputBehaviours from './lib/utils/logoutput_behaviours';
 
-export default class Job {
+export default class Job extends LogOutputBehaviours {
   constructor(options) {
+    super();
     this.timeout = null;
     this.state = null;
     this.fetchingStatusFavicon = false;
@@ -28,10 +32,6 @@ export default class Job {
     this.$buildTraceOutput = $('.js-build-output');
     this.$topBar = $('.js-top-bar');
 
-    // Scroll controllers
-    this.$scrollTopBtn = $('.js-scroll-up');
-    this.$scrollBottomBtn = $('.js-scroll-down');
-
     clearTimeout(this.timeout);
 
     this.initSidebar();
@@ -47,23 +47,14 @@ export default class Job {
       .off('click', '.stage-item')
       .on('click', '.stage-item', this.updateDropdown);
 
-    // 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));
-
     this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
 
     this.$window
       .off('scroll')
       .on('scroll', () => {
-        if (!this.isScrolledToBottom()) {
+        if (!isScrolledToBottom()) {
           this.toggleScrollAnimation(false);
-        } else if (this.isScrolledToBottom() && !this.isLogComplete) {
+        } else if (isScrolledToBottom() && !this.isLogComplete) {
           this.toggleScrollAnimation(true);
         }
         this.scrollThrottled();
@@ -79,76 +70,11 @@ export default class Job {
   }
 
   initAffixTopArea() {
-    /**
-      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 (this.$topBar.css('position') !== 'static') return;
-
-    const offsetTop = this.$buildTrace.offset().top;
-
-    this.$topBar.affix({
-      offset: {
-        top: offsetTop,
-      },
-    });
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  canScroll() {
-    return $(document).height() > $(window).height();
-  }
-
-  toggleScroll() {
-    const $document = $(document);
-    const currentPosition = $document.scrollTop();
-    const scrollHeight = $document.height();
-
-    const windowHeight = $(window).height();
-    if (this.canScroll()) {
-      if (currentPosition > 0 &&
-        (scrollHeight - currentPosition !== windowHeight)) {
-      // User is in the middle of the log
-
-        this.toggleDisableButton(this.$scrollTopBtn, false);
-        this.toggleDisableButton(this.$scrollBottomBtn, false);
-      } else if (currentPosition === 0) {
-        // User is at Top of  Log
-
-        this.toggleDisableButton(this.$scrollTopBtn, true);
-        this.toggleDisableButton(this.$scrollBottomBtn, false);
-      } else if (this.isScrolledToBottom()) {
-        // User is at the bottom of the build log.
-
-        this.toggleDisableButton(this.$scrollTopBtn, false);
-        this.toggleDisableButton(this.$scrollBottomBtn, true);
-      }
-    } else {
-      this.toggleDisableButton(this.$scrollTopBtn, true);
-      this.toggleDisableButton(this.$scrollBottomBtn, true);
-    }
-  }
-  // eslint-disable-next-line class-methods-use-this
-  isScrolledToBottom() {
-    const $document = $(document);
-
-    const currentPosition = $document.scrollTop();
-    const scrollHeight = $document.height();
-
-    const windowHeight = $(window).height();
-
-    return scrollHeight - currentPosition === windowHeight;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  scrollDown() {
-    const $document = $(document);
-    $document.scrollTop($document.height());
+    polyfillSticky(this.$topBar);
   }
 
   scrollToBottom() {
-    this.scrollDown();
+    scrollDown();
     this.hasBeenScrolled = true;
     this.toggleScroll();
   }
@@ -159,12 +85,6 @@ export default class Job {
     this.toggleScroll();
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  toggleDisableButton($button, disable) {
-    if (disable && $button.prop('disabled')) return;
-    $button.prop('disabled', disable);
-  }
-
   toggleScrollAnimation(toggle) {
     this.$scrollBottomBtn.toggleClass('animate', toggle);
   }
@@ -196,7 +116,7 @@ export default class Job {
           this.state = log.state;
         }
 
-        this.isScrollInBottom = this.isScrolledToBottom();
+        this.isScrollInBottom = isScrolledToBottom();
 
         if (log.append) {
           this.$buildTraceOutput.append(log.html);
@@ -236,7 +156,7 @@ export default class Job {
       })
       .then(() => {
         if (this.isScrollInBottom) {
-          this.scrollDown();
+          scrollDown();
         }
       })
       .then(() => this.toggleScroll());
diff --git a/app/assets/javascripts/jobs/components/header.vue b/app/assets/javascripts/jobs/components/header.vue
index 357bc9aab17..1e7f4b2c3f7 100644
--- a/app/assets/javascripts/jobs/components/header.vue
+++ b/app/assets/javascripts/jobs/components/header.vue
@@ -1,82 +1,97 @@
 <script>
-  import ciHeader from '../../vue_shared/components/header_ci_component.vue';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import ciHeader from '../../vue_shared/components/header_ci_component.vue';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import callout from '../../vue_shared/components/callout.vue';
 
-  export default {
-    name: 'JobHeaderSection',
-    components: {
-      ciHeader,
-      loadingIcon,
+export default {
+  name: 'JobHeaderSection',
+  components: {
+    ciHeader,
+    loadingIcon,
+    callout,
+  },
+  props: {
+    job: {
+      type: Object,
+      required: true,
     },
-    props: {
-      job: {
-        type: Object,
-        required: true,
-      },
-      isLoading: {
-        type: Boolean,
-        required: true,
-      },
+    isLoading: {
+      type: Boolean,
+      required: true,
     },
-    data() {
-      return {
-        actions: this.getActions(),
-      };
+  },
+  data() {
+    return {
+      actions: this.getActions(),
+    };
+  },
+  computed: {
+    status() {
+      return this.job && this.job.status;
     },
-    computed: {
-      status() {
-        return this.job && this.job.status;
-      },
-      shouldRenderContent() {
-        return !this.isLoading && Object.keys(this.job).length;
-      },
-      /**
-       * When job has not started the key will be `false`
-       * When job started the key will be a string with a date.
-       */
-      jobStarted() {
-        return !this.job.started === false;
-      },
+    shouldRenderContent() {
+      return !this.isLoading && Object.keys(this.job).length;
     },
-    watch: {
-      job() {
-        this.actions = this.getActions();
-      },
+    shouldRenderReason() {
+      return !!(this.job.status && this.job.callout_message);
     },
-    methods: {
-      getActions() {
-        const actions = [];
+    /**
+     * When job has not started the key will be `false`
+     * When job started the key will be a string with a date.
+     */
+    jobStarted() {
+      return !this.job.started === false;
+    },
+    headerTime() {
+      return this.jobStarted ? this.job.started : this.job.created_at;
+    },
+  },
+  watch: {
+    job() {
+      this.actions = this.getActions();
+    },
+  },
+  methods: {
+    getActions() {
+      const actions = [];
 
-        if (this.job.new_issue_path) {
-          actions.push({
-            label: 'New issue',
-            path: this.job.new_issue_path,
-            cssClass: 'js-new-issue btn btn-new btn-inverted visible-md-block visible-lg-block',
-            type: 'link',
-          });
-        }
-        return actions;
-      },
+      if (this.job.new_issue_path) {
+        actions.push({
+          label: 'New issue',
+          path: this.job.new_issue_path,
+          cssClass: 'js-new-issue btn btn-new btn-inverted d-none d-md-block d-lg-block d-xl-block',
+          type: 'link',
+        });
+      }
+      return actions;
     },
-  };
+  },
+};
 </script>
 <template>
-  <div class="js-build-header build-header top-area">
-    <ci-header
-      v-if="shouldRenderContent"
-      :status="status"
-      item-name="Job"
-      :item-id="job.id"
-      :time="job.created_at"
-      :user="job.user"
-      :actions="actions"
-      :has-sidebar-button="true"
-      :should-render-triggered-label="jobStarted"
-    />
-    <loading-icon
-      v-if="isLoading"
-      size="2"
-      class="prepend-top-default append-bottom-default"
+  <header>
+    <div class="js-build-header build-header top-area">
+      <ci-header
+        v-if="shouldRenderContent"
+        :status="status"
+        :item-id="job.id"
+        :time="headerTime"
+        :user="job.user"
+        :actions="actions"
+        :has-sidebar-button="true"
+        :should-render-triggered-label="jobStarted"
+        item-name="Job"
+      />
+      <loading-icon
+        v-if="isLoading"
+        size="2"
+        class="prepend-top-default append-bottom-default"
+      />
+    </div>
+
+    <callout
+      v-if="shouldRenderReason"
+      :message="job.callout_message"
     />
-  </div>
+  </header>
 </template>
diff --git a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
index a6819aaeb12..83560a8ff0e 100644
--- a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
@@ -11,11 +11,19 @@
         type: String,
         required: true,
       },
+      helpUrl: {
+        type: String,
+        required: false,
+        default: '',
+      },
     },
     computed: {
       hasTitle() {
         return this.title.length > 0;
       },
+      hasHelpURL() {
+        return this.helpUrl.length > 0;
+      },
     },
   };
 </script>
@@ -28,5 +36,21 @@
       {{ title }}:
     </span>
     {{ value }}
+
+    <span
+      v-if="hasHelpURL"
+      class="help-button float-right"
+    >
+      <a
+        :href="helpUrl"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+      >
+        <i
+          class="fa fa-question-circle"
+          aria-hidden="true"
+        ></i>
+      </a>
+    </span>
   </p>
 </template>
diff --git a/app/assets/javascripts/jobs/components/sidebar_details_block.vue b/app/assets/javascripts/jobs/components/sidebar_details_block.vue
index 56814a52525..d2adf628050 100644
--- a/app/assets/javascripts/jobs/components/sidebar_details_block.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_details_block.vue
@@ -1,89 +1,146 @@
 <script>
-  import detailRow from './sidebar_detail_row.vue';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import timeagoMixin from '../../vue_shared/mixins/timeago';
-  import { timeIntervalInWords } from '../../lib/utils/datetime_utility';
+import detailRow from './sidebar_detail_row.vue';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import timeagoMixin from '../../vue_shared/mixins/timeago';
+import { timeIntervalInWords } from '../../lib/utils/datetime_utility';
 
-  export default {
-    name: 'SidebarDetailsBlock',
-    components: {
-      detailRow,
-      loadingIcon,
+export default {
+  name: 'SidebarDetailsBlock',
+  components: {
+    detailRow,
+    loadingIcon,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    job: {
+      type: Object,
+      required: true,
     },
-    mixins: [
-      timeagoMixin,
-    ],
-    props: {
-      job: {
-        type: Object,
-        required: true,
-      },
-      isLoading: {
-        type: Boolean,
-        required: true,
-      },
+    isLoading: {
+      type: Boolean,
+      required: true,
     },
-    computed: {
-      shouldRenderContent() {
-        return !this.isLoading && Object.keys(this.job).length > 0;
-      },
-      coverage() {
-        return `${this.job.coverage}%`;
-      },
-      duration() {
-        return timeIntervalInWords(this.job.duration);
-      },
-      queued() {
-        return timeIntervalInWords(this.job.queued);
-      },
-      runnerId() {
-        return `#${this.job.runner.id}`;
-      },
-      renderBlock() {
-        return this.job.merge_request ||
-          this.job.duration ||
-          this.job.finished_data ||
-          this.job.erased_at ||
-          this.job.queued ||
-          this.job.runner ||
-          this.job.coverage ||
-          this.job.tags.length ||
-          this.job.cancel_path;
-      },
+    canUserRetry: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-  };
+    runnerHelpUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    shouldRenderContent() {
+      return !this.isLoading && Object.keys(this.job).length > 0;
+    },
+    coverage() {
+      return `${this.job.coverage}%`;
+    },
+    duration() {
+      return timeIntervalInWords(this.job.duration);
+    },
+    queued() {
+      return timeIntervalInWords(this.job.queued);
+    },
+    runnerId() {
+      return `${this.job.runner.description} (#${this.job.runner.id})`;
+    },
+    retryButtonClass() {
+      let className =
+        'js-retry-button float-right btn btn-retry d-none d-md-block d-lg-block d-xl-block';
+      className +=
+        this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary';
+      return className;
+    },
+    hasTimeout() {
+      return this.job.metadata != null && this.job.metadata.timeout_human_readable !== null;
+    },
+    timeout() {
+      if (this.job.metadata == null) {
+        return '';
+      }
+
+      let t = this.job.metadata.timeout_human_readable;
+      if (this.job.metadata.timeout_source !== '') {
+        t += ` (from ${this.job.metadata.timeout_source})`;
+      }
+
+      return t;
+    },
+    renderBlock() {
+      return (
+        this.job.merge_request ||
+        this.job.duration ||
+        this.job.finished_data ||
+        this.job.erased_at ||
+        this.job.queued ||
+        this.job.runner ||
+        this.job.coverage ||
+        this.job.tags.length ||
+        this.job.cancel_path
+      );
+    },
+  },
+};
 </script>
 <template>
   <div>
+    <div class="block">
+      <strong class="inline prepend-top-8">
+        {{ job.name }}
+      </strong>
+      <a
+        v-if="canUserRetry"
+        :class="retryButtonClass"
+        :href="job.retry_path"
+        data-method="post"
+        rel="nofollow"
+      >
+        {{ __('Retry') }}
+      </a>
+      <button
+        :aria-label="__('Toggle Sidebar')"
+        type="button"
+        class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle"
+      >
+        <i
+          aria-hidden="true"
+          data-hidden="true"
+          class="fa fa-angle-double-right"
+        ></i>
+      </button>
+    </div>
     <template v-if="shouldRenderContent">
       <div
-        class="block retry-link"
         v-if="job.retry_path || job.new_issue_path"
+        class="block retry-link"
       >
         <a
           v-if="job.new_issue_path"
-          class="js-new-issue btn btn-new btn-inverted"
           :href="job.new_issue_path"
+          class="js-new-issue btn btn-new btn-inverted"
         >
-          New issue
+          {{ __('New issue') }}
         </a>
         <a
-          v-if="job.retry_path"
-          class="js-retry-job btn btn-inverted-secondary"
+          v-if="canUserRetry"
           :href="job.retry_path"
+          class="js-retry-job btn btn-inverted-secondary"
           data-method="post"
           rel="nofollow"
         >
-          Retry
+          {{ __('Retry') }}
         </a>
       </div>
       <div :class="{block : renderBlock }">
         <p
-          class="build-detail-row js-job-mr"
           v-if="job.merge_request"
+          class="build-detail-row js-job-mr"
         >
           <span class="build-light-text">
-            Merge Request:
+            {{ __('Merge Request:') }}
           </span>
           <a :href="job.merge_request.path">
             !{{ job.merge_request.iid }}
@@ -91,47 +148,54 @@
         </p>
 
         <detail-row
-          class="js-job-duration"
           v-if="job.duration"
-          title="Duration"
           :value="duration"
+          class="js-job-duration"
+          title="Duration"
         />
         <detail-row
-          class="js-job-finished"
           v-if="job.finished_at"
-          title="Finished"
           :value="timeFormated(job.finished_at)"
+          class="js-job-finished"
+          title="Finished"
         />
         <detail-row
-          class="js-job-erased"
           v-if="job.erased_at"
-          title="Erased"
           :value="timeFormated(job.erased_at)"
+          class="js-job-erased"
+          title="Erased"
         />
         <detail-row
-          class="js-job-queued"
           v-if="job.queued"
-          title="Queued"
           :value="queued"
+          class="js-job-queued"
+          title="Queued"
+        />
+        <detail-row
+          v-if="hasTimeout"
+          :help-url="runnerHelpUrl"
+          :value="timeout"
+          class="js-job-timeout"
+          title="Timeout"
         />
         <detail-row
-          class="js-job-runner"
           v-if="job.runner"
-          title="Runner"
           :value="runnerId"
+          class="js-job-runner"
+          title="Runner"
         />
         <detail-row
-          class="js-job-coverage"
           v-if="job.coverage"
-          title="Coverage"
           :value="coverage"
+          class="js-job-coverage"
+          title="Coverage"
         />
         <p
-          class="build-detail-row js-job-tags"
           v-if="job.tags.length"
+          class="build-detail-row js-job-tags"
         >
           <span class="build-light-text">
-            Tags:
+            {{ __('Tags:') }}
           </span>
           <span
             v-for="(tag, i) in job.tags"
@@ -146,19 +210,19 @@
           class="btn-group prepend-top-5"
           role="group">
           <a
-            class="js-cancel-job btn btn-sm btn-default"
             :href="job.cancel_path"
+            class="js-cancel-job btn btn-sm btn-default"
             data-method="post"
             rel="nofollow"
           >
-            Cancel
+            {{ __('Cancel') }}
           </a>
         </div>
       </div>
     </template>
     <loading-icon
-      class="prepend-top-10"
       v-if="isLoading"
+      class="prepend-top-10"
       size="2"
     />
   </div>
diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js
index 85a88ae409b..0db7b95636c 100644
--- a/app/assets/javascripts/jobs/job_details_bundle.js
+++ b/app/assets/javascripts/jobs/job_details_bundle.js
@@ -4,7 +4,7 @@ import jobHeader from './components/header.vue';
 import detailsBlock from './components/sidebar_details_block.vue';
 
 export default () => {
-  const dataset = document.getElementById('js-job-details-vue').dataset;
+  const { dataset } = document.getElementById('js-job-details-vue');
   const mediator = new JobMediator({ endpoint: dataset.endpoint });
 
   mediator.fetchJob();
@@ -35,9 +35,11 @@ export default () => {
   });
 
   // Sidebar information block
+  const detailsBlockElement = document.getElementById('js-details-block-vue');
+  const detailsBlockDataset = detailsBlockElement.dataset;
   // eslint-disable-next-line
   new Vue({
-    el: '#js-details-block-vue',
+    el: detailsBlockElement,
     components: {
       detailsBlock,
     },
@@ -50,7 +52,9 @@ export default () => {
       return createElement('details-block', {
         props: {
           isLoading: this.mediator.state.isLoading,
+          canUserRetry: !!('canUserRetry' in detailsBlockDataset),
           job: this.mediator.store.state.job,
+          runnerHelpUrl: dataset.runnerHelpUrl,
         },
       });
     },
diff --git a/app/assets/javascripts/jobs/job_details_mediator.js b/app/assets/javascripts/jobs/job_details_mediator.js
index 5a216f8fae2..89019da9d1e 100644
--- a/app/assets/javascripts/jobs/job_details_mediator.js
+++ b/app/assets/javascripts/jobs/job_details_mediator.js
@@ -1,5 +1,3 @@
-/* global Build */
-
 import Visibility from 'visibilityjs';
 import Flash from '../flash';
 import Poll from '../lib/utils/poll';
@@ -50,7 +48,8 @@ export default class JobMediator {
   }
 
   getJob() {
-    return this.service.getJob()
+    return this.service
+      .getJob()
       .then(response => this.successCallback(response))
       .catch(() => this.errorCallback());
   }
diff --git a/app/assets/javascripts/label_manager.js b/app/assets/javascripts/label_manager.js
index e230dbbd4ac..c10b1a2b233 100644
--- a/app/assets/javascripts/label_manager.js
+++ b/app/assets/javascripts/label_manager.js
@@ -1,7 +1,7 @@
-/* eslint-disable comma-dangle, class-methods-use-this, no-underscore-dangle, no-param-reassign, no-unused-vars, consistent-return, func-names, space-before-function-paren, max-len */
+/* eslint-disable  class-methods-use-this, no-underscore-dangle, no-param-reassign, no-unused-vars, func-names, max-len */
 
 import $ from 'jquery';
-import Sortable from 'vendor/Sortable';
+import Sortable from 'sortablejs';
 
 import flash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -13,6 +13,7 @@ export default class LabelManager {
     this.otherLabels = otherLabels || $('.js-other-labels');
     this.errorMessage = 'Unable to update label prioritization at this time';
     this.emptyState = document.querySelector('#js-priority-labels-empty-state');
+    this.$badgeItemTemplate = $('#js-badge-item-template');
     this.sortable = Sortable.create(this.prioritizedLabels.get(0), {
       filter: '.empty-message',
       forceFallback: true,
@@ -35,7 +36,7 @@ export default class LabelManager {
     const $label = $(`#${$btn.data('domId')}`);
     const action = $btn.parents('.js-prioritized-labels').length ? 'remove' : 'add';
     const $tooltip = $(`#${$btn.find('.has-tooltip:visible').attr('aria-describedby')}`);
-    $tooltip.tooltip('destroy');
+    $tooltip.tooltip('dispose');
     _this.toggleLabelPriority($label, action);
     _this.toggleEmptyState($label, $btn, action);
   }
@@ -63,7 +64,11 @@ export default class LabelManager {
       $target = this.otherLabels;
       $from = this.prioritizedLabels;
     }
-    $label.detach().appendTo($target);
+
+    const $detachedLabel = $label.detach();
+    this.toggleLabelPriorityBadge($detachedLabel, action);
+    $detachedLabel.appendTo($target);
+
     if ($from.find('li').length) {
       $from.find('.empty-message').removeClass('hidden');
     }
@@ -88,6 +93,14 @@ export default class LabelManager {
     }
   }
 
+  toggleLabelPriorityBadge($label, action) {
+    if (action === 'remove') {
+      $('.js-priority-badge', $label).remove();
+    } else {
+      $('.label-links', $label).append(this.$badgeItemTemplate.clone().html());
+    }
+  }
+
   onPrioritySortUpdate() {
     this.savePrioritySort()
       .catch(() => flash(this.errorMessage));
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 824d3f7ca09..37a45d1d1a2 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-useless-return, func-names, space-before-function-paren, wrap-iife, no-var, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, no-unused-vars, one-var-declaration-per-line, prefer-template, no-new, consistent-return, object-shorthand, comma-dangle, no-shadow, no-param-reassign, brace-style, vars-on-top, quotes, no-lonely-if, no-else-return, dot-notation, no-empty, no-return-assign, camelcase, prefer-spread */
+/* eslint-disable no-useless-return, func-names, no-var, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, no-unused-vars, one-var-declaration-per-line, prefer-template, no-new, consistent-return, object-shorthand, comma-dangle, no-shadow, no-param-reassign, brace-style, vars-on-top, quotes, no-lonely-if, no-else-return, dot-notation, no-empty */
 /* global Issuable */
 /* global ListLabel */
 
@@ -10,6 +10,7 @@ import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
 import DropdownUtils from './filtered_search/dropdown_utils';
 import CreateLabelDropdown from './create_label';
 import flash from './flash';
+import ModalStore from './boards/stores/modal_store';
 
 export default class LabelsSelect {
   constructor(els, options = {}) {
@@ -55,7 +56,7 @@ export default class LabelsSelect {
         .map(function () {
           return this.value;
         }).get();
-      const handleClick = options.handleClick;
+      const { handleClick } = options;
 
       $sidebarLabelTooltip.tooltip();
 
@@ -82,7 +83,7 @@ export default class LabelsSelect {
         $dropdown.trigger('loading.gl.dropdown');
         axios.put(issueUpdateURL, data)
           .then(({ data }) => {
-            var labelCount, template, labelTooltipTitle, labelTitles;
+            var labelCount, template, labelTooltipTitle, labelTitles, formattedLabels;
             $loading.fadeOut();
             $dropdown.trigger('loaded.gl.dropdown');
             $selectbox.hide();
@@ -114,13 +115,12 @@ export default class LabelsSelect {
               labelTooltipTitle = labelTitles.join(', ');
             }
             else {
-              labelTooltipTitle = '';
-              $sidebarLabelTooltip.tooltip('destroy');
+              labelTooltipTitle = __('Labels');
             }
 
             $sidebarLabelTooltip
               .attr('title', labelTooltipTitle)
-              .tooltip('fixTitle');
+              .tooltip('_fixTitle');
 
             $('.has-tooltip', $value).tooltip({
               container: 'body'
@@ -215,7 +215,7 @@ export default class LabelsSelect {
           }
           else {
             if (label.color != null) {
-              color = label.color[0];
+              [color] = label.color;
             }
           }
           if (color) {
@@ -243,7 +243,8 @@ export default class LabelsSelect {
           var $dropdownParent = $dropdown.parent();
           var $dropdownInputField = $dropdownParent.find('.dropdown-input-field');
           var isSelected = el !== null ? el.hasClass('is-active') : false;
-          var title = selected.title;
+
+          var { title } = selected;
           var selectedLabels = this.selected;
 
           if ($dropdownInputField.length && $dropdownInputField.val().length) {
@@ -350,7 +351,7 @@ export default class LabelsSelect {
           }
 
           if ($dropdown.closest('.add-issues-modal').length) {
-            boardsModel = gl.issueBoards.ModalStore.store.filter;
+            boardsModel = ModalStore.store.filter;
           }
 
           if (boardsModel) {
@@ -382,7 +383,7 @@ export default class LabelsSelect {
               }));
             }
             else {
-              var labels = gl.issueBoards.BoardsStore.detail.issue.labels;
+              var { labels } = gl.issueBoards.BoardsStore.detail.issue;
               labels = labels.filter(function (selectedLabel) {
                 return selectedLabel.id !== label.id;
               });
@@ -426,7 +427,7 @@ export default class LabelsSelect {
     const tpl = _.template([
       '<% _.each(labels, function(label){ %>',
       '<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>">',
-      '<span class="label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;">',
+      '<span class="badge label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;">',
       '<%- label.title %>',
       '</span>',
       '</a>',
diff --git a/app/assets/javascripts/lazy_loader.js b/app/assets/javascripts/lazy_loader.js
index dbbf1637a47..9482d131344 100644
--- a/app/assets/javascripts/lazy_loader.js
+++ b/app/assets/javascripts/lazy_loader.js
@@ -44,8 +44,8 @@ export default class LazyLoader {
     requestAnimationFrame(() => this.checkElementsInView());
   }
   checkElementsInView() {
-    const scrollTop = pageYOffset;
-    const visHeight = scrollTop + innerHeight + SCROLL_THRESHOLD;
+    const scrollTop = window.pageYOffset;
+    const visHeight = scrollTop + window.innerHeight + SCROLL_THRESHOLD;
 
     // Loading Images which are in the current viewport or close to them
     this.lazyImages = this.lazyImages.filter((selectedImage) => {
diff --git a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
index 3873f4528ce..c28ed04f94f 100644
--- a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
+++ b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
@@ -93,7 +93,7 @@ export default class LinkedTabs {
 
     const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`;
 
-    history.replaceState({
+    window.history.replaceState({
       url: newState,
     }, document.title, newState);
     return newState;
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 0830ebe9e4e..5c249f3068e 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -1,10 +1,14 @@
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import axios from './axios_utils';
 import { getLocationHash } from './url_utility';
 import { convertToCamelCase } from './text_utility';
+import { isObject } from './type_utility';
 
-export const getPagePath = (index = 0) => $('body').attr('data-page').split(':')[index];
+export const getPagePath = (index = 0) => {
+  const page = $('body').attr('data-page') || '';
+
+  return page.split(':')[index];
+};
 
 export const isInGroupsPage = () => getPagePath() === 'groups';
 
@@ -33,24 +37,26 @@ export const checkPageAndAction = (page, action) => {
 
 export const isInIssuePage = () => checkPageAndAction('issues', 'show');
 export const isInMRPage = () => checkPageAndAction('merge_requests', 'show');
-export const isInNoteablePage = () => isInIssuePage() || isInMRPage();
-export const hasVueMRDiscussionsCookie = () => Cookies.get('vue_mr_discussions');
-
-export const ajaxGet = url => axios.get(url, {
-  params: { format: 'js' },
-  responseType: 'text',
-}).then(({ data }) => {
-  $.globalEval(data);
-});
+export const isInEpicPage = () => checkPageAndAction('epics', 'show');
+
+export const ajaxGet = url =>
+  axios
+    .get(url, {
+      params: { format: 'js' },
+      responseType: 'text',
+    })
+    .then(({ data }) => {
+      $.globalEval(data);
+    });
 
-export const rstrip = (val) => {
+export const rstrip = val => {
   if (val) {
     return val.replace(/\s+$/, '');
   }
   return val;
 };
 
-export const updateTooltipTitle = ($tooltipEl, newTitle) => $tooltipEl.attr('title', newTitle).tooltip('fixTitle');
+export const updateTooltipTitle = ($tooltipEl, newTitle) => $tooltipEl.attr('title', newTitle).tooltip('_fixTitle');
 
 export const disableButtonIfEmptyField = (fieldSelector, buttonSelector, eventName = 'input') => {
   const field = $(fieldSelector);
@@ -59,7 +65,7 @@ export const disableButtonIfEmptyField = (fieldSelector, buttonSelector, eventNa
     closestSubmit.disable();
   }
   // eslint-disable-next-line func-names
-  return field.on(eventName, function () {
+  return field.on(eventName, function() {
     if (rstrip($(this).val()) === '') {
       return closestSubmit.disable();
     }
@@ -78,7 +84,7 @@ export const handleLocationHash = () => {
 
   const target = document.getElementById(hash) || document.getElementById(`user-content-${hash}`);
   const fixedTabs = document.querySelector('.js-tabs-affix');
-  const fixedDiffStats = document.querySelector('.js-diff-files-changed.is-stuck');
+  const fixedDiffStats = document.querySelector('.js-diff-files-changed');
   const fixedNav = document.querySelector('.navbar-gitlab');
 
   let adjustment = 0;
@@ -101,7 +107,7 @@ export const handleLocationHash = () => {
 
 // Check if element scrolled into viewport from above or below
 // Courtesy http://stackoverflow.com/a/7557433/414749
-export const isInViewport = (el) => {
+export const isInViewport = el => {
   const rect = el.getBoundingClientRect();
 
   return (
@@ -112,13 +118,13 @@ export const isInViewport = (el) => {
   );
 };
 
-export const parseUrl = (url) => {
+export const parseUrl = url => {
   const parser = document.createElement('a');
   parser.href = url;
   return parser;
 };
 
-export const parseUrlPathname = (url) => {
+export const parseUrlPathname = url => {
   const parsedUrl = parseUrl(url);
   // parsedUrl.pathname will return an absolute path for Firefox and a relative path for IE11
   // We have to make sure we always have an absolute path.
@@ -127,10 +133,14 @@ export const parseUrlPathname = (url) => {
 
 // We can trust that each param has one & since values containing & will be encoded
 // Remove the first character of search as it is always ?
-export const getUrlParamsArray = () => window.location.search.slice(1).split('&').map((param) => {
-  const split = param.split('=');
-  return [decodeURI(split[0]), split[1]].join('=');
-});
+export const getUrlParamsArray = () =>
+  window.location.search
+    .slice(1)
+    .split('&')
+    .map(param => {
+      const split = param.split('=');
+      return [decodeURI(split[0]), split[1]].join('=');
+    });
 
 export const isMetaKey = e => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
 
@@ -140,18 +150,28 @@ export const isMetaKey = e => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
 // 3) Middle-click or Mouse Wheel Click (e.which is 2)
 export const isMetaClick = e => e.metaKey || e.ctrlKey || e.which === 2;
 
-export const scrollToElement = (element) => {
+export const contentTop = () => {
+  const perfBar = $('#js-peek').height() || 0;
+  const mrTabsHeight = $('.merge-request-tabs').height() || 0;
+  const headerHeight = $('.navbar-gitlab').height() || 0;
+  const diffFilesChanged = $('.js-diff-files-changed').height() || 0;
+
+  return perfBar + mrTabsHeight + headerHeight + diffFilesChanged;
+};
+
+export const scrollToElement = element => {
   let $el = element;
   if (!(element instanceof $)) {
     $el = $(element);
   }
-  const top = $el.offset().top;
-  const mrTabsHeight = $('.merge-request-tabs').height() || 0;
-  const headerHeight = $('.navbar-gitlab').height() || 0;
+  const { top } = $el.offset();
 
-  return $('body, html').animate({
-    scrollTop: top - mrTabsHeight - headerHeight,
-  }, 200);
+  return $('body, html').animate(
+    {
+      scrollTop: top - contentTop(),
+    },
+    200,
+  );
 };
 
 /**
@@ -183,9 +203,7 @@ export const getSelectedFragment = () => {
 
 export const insertText = (target, text) => {
   // Firefox doesn't support `document.execCommand('insertText', false, text)` on textareas
-  const selectionStart = target.selectionStart;
-  const selectionEnd = target.selectionEnd;
-  const value = target.value;
+  const { selectionStart, selectionEnd, value } = target;
 
   const textBefore = value.substring(0, selectionStart);
   const textAfter = value.substring(selectionEnd, value.length);
@@ -196,7 +214,10 @@ export const insertText = (target, text) => {
   // eslint-disable-next-line no-param-reassign
   target.value = newText;
   // eslint-disable-next-line no-param-reassign
-  target.selectionStart = target.selectionEnd = selectionStart + insertedText.length;
+  target.selectionStart = selectionStart + insertedText.length;
+
+  // eslint-disable-next-line no-param-reassign
+  target.selectionEnd = selectionStart + insertedText.length;
 
   // Trigger autosave
   target.dispatchEvent(new Event('input'));
@@ -208,7 +229,8 @@ export const insertText = (target, text) => {
 };
 
 export const nodeMatchesSelector = (node, selector) => {
-  const matches = Element.prototype.matches ||
+  const matches =
+    Element.prototype.matches ||
     Element.prototype.matchesSelector ||
     Element.prototype.mozMatchesSelector ||
     Element.prototype.msMatchesSelector ||
@@ -221,7 +243,8 @@ export const nodeMatchesSelector = (node, selector) => {
 
   // IE11 doesn't support `node.matches(selector)`
 
-  let parentNode = node.parentNode;
+  let { parentNode } = node;
+
   if (!parentNode) {
     parentNode = document.createElement('div');
     // eslint-disable-next-line no-param-reassign
@@ -237,10 +260,10 @@ export const nodeMatchesSelector = (node, selector) => {
   this will take in the headers from an API response and normalize them
   this way we don't run into production issues when nginx gives us lowercased header keys
 */
-export const normalizeHeaders = (headers) => {
+export const normalizeHeaders = headers => {
   const upperCaseHeaders = {};
 
-  Object.keys(headers || {}).forEach((e) => {
+  Object.keys(headers || {}).forEach(e => {
     upperCaseHeaders[e.toUpperCase()] = headers[e];
   });
 
@@ -251,12 +274,14 @@ export const normalizeHeaders = (headers) => {
   this will take in the getAllResponseHeaders result and normalize them
   this way we don't run into production issues when nginx gives us lowercased header keys
 */
-export const normalizeCRLFHeaders = (headers) => {
+export const normalizeCRLFHeaders = headers => {
   const headersObject = {};
   const headersArray = headers.split('\n');
 
-  headersArray.forEach((header) => {
+  headersArray.forEach(header => {
     const keyValue = header.split(': ');
+
+    // eslint-disable-next-line prefer-destructuring
     headersObject[keyValue[0]] = keyValue[1];
   });
 
@@ -291,15 +316,13 @@ export const parseIntPagination = paginationInformation => ({
 export const parseQueryStringIntoObject = (query = '') => {
   if (query === '') return {};
 
-  return query
-    .split('&')
-    .reduce((acc, element) => {
-      const val = element.split('=');
-      Object.assign(acc, {
-        [val[0]]: decodeURIComponent(val[1]),
-      });
-      return acc;
-    }, {});
+  return query.split('&').reduce((acc, element) => {
+    const val = element.split('=');
+    Object.assign(acc, {
+      [val[0]]: decodeURIComponent(val[1]),
+    });
+    return acc;
+  }, {});
 };
 
 /**
@@ -308,9 +331,13 @@ export const parseQueryStringIntoObject = (query = '') => {
  *
  * @param {Object} params
  */
-export const objectToQueryString = (params = {}) => Object.keys(params).map(param => `${param}=${params[param]}`).join('&');
+export const objectToQueryString = (params = {}) =>
+  Object.keys(params)
+    .map(param => `${param}=${params[param]}`)
+    .join('&');
 
-export const buildUrlWithCurrentLocation = param => (param ? `${window.location.pathname}${param}` : window.location.pathname);
+export const buildUrlWithCurrentLocation = param =>
+  (param ? `${window.location.pathname}${param}` : window.location.pathname);
 
 /**
  * Based on the current location and the string parameters provided
@@ -318,7 +345,7 @@ export const buildUrlWithCurrentLocation = param => (param ? `${window.location.
  *
  * @param {String} param
  */
-export const historyPushState = (newUrl) => {
+export const historyPushState = newUrl => {
   window.history.pushState({}, document.title, newUrl);
 };
 
@@ -367,7 +394,7 @@ export const backOff = (fn, timeout = 60000) => {
   let timeElapsed = 0;
 
   return new Promise((resolve, reject) => {
-    const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
+    const stop = arg => (arg instanceof Error ? reject(arg) : resolve(arg));
 
     const next = () => {
       if (timeElapsed < timeout) {
@@ -383,6 +410,49 @@ export const backOff = (fn, timeout = 60000) => {
   });
 };
 
+export const createOverlayIcon = (iconPath, overlayPath) => {
+  const faviconImage = document.createElement('img');
+
+  return new Promise((resolve) => {
+    faviconImage.onload = () => {
+      const size = 32;
+
+      const canvas = document.createElement('canvas');
+      canvas.width = size;
+      canvas.height = size;
+
+      const context = canvas.getContext('2d');
+      context.clearRect(0, 0, size, size);
+      context.drawImage(
+        faviconImage, 0, 0, faviconImage.width, faviconImage.height, 0, 0, size, size,
+      );
+
+      const overlayImage = document.createElement('img');
+      overlayImage.onload = () => {
+        context.drawImage(
+          overlayImage, 0, 0, overlayImage.width, overlayImage.height, 0, 0, size, size,
+        );
+
+        const faviconWithOverlayUrl = canvas.toDataURL();
+
+        resolve(faviconWithOverlayUrl);
+      };
+      overlayImage.src = overlayPath;
+    };
+    faviconImage.src = iconPath;
+  });
+};
+
+export const setFaviconOverlay = (overlayPath) => {
+  const faviconEl = document.getElementById('favicon');
+
+  if (!faviconEl) { return null; }
+
+  const iconPath = faviconEl.getAttribute('data-original-href');
+
+  return createOverlayIcon(iconPath, overlayPath).then(faviconWithOverlayUrl => faviconEl.setAttribute('href', faviconWithOverlayUrl));
+};
+
 export const setFavicon = (faviconPath) => {
   const faviconEl = document.getElementById('favicon');
   if (faviconEl && faviconPath) {
@@ -392,20 +462,21 @@ export const setFavicon = (faviconPath) => {
 
 export const resetFavicon = () => {
   const faviconEl = document.getElementById('favicon');
-  const originalFavicon = faviconEl ? faviconEl.getAttribute('href') : null;
+
   if (faviconEl) {
+    const originalFavicon = faviconEl.getAttribute('data-original-href');
     faviconEl.setAttribute('href', originalFavicon);
   }
 };
 
 export const setCiStatusFavicon = pageUrl =>
-  axios.get(pageUrl)
+  axios
+    .get(pageUrl)
     .then(({ data }) => {
       if (data && data.favicon) {
-        setFavicon(data.favicon);
-      } else {
-        resetFavicon();
+        return setFaviconOverlay(data.favicon);
       }
+      return resetFavicon();
     })
     .catch(resetFavicon);
 
@@ -422,28 +493,38 @@ export const spriteIcon = (icon, className = '') => {
  * Reasoning for this method is to ensure consistent property
  * naming conventions across JS code.
  */
-export const convertObjectPropsToCamelCase = (obj = {}) => {
+export const convertObjectPropsToCamelCase = (obj = {}, options = {}) => {
   if (obj === null) {
     return {};
   }
 
+  const initial = Array.isArray(obj) ? [] : {};
+
   return Object.keys(obj).reduce((acc, prop) => {
     const result = acc;
+    const val = obj[prop];
 
-    result[convertToCamelCase(prop)] = obj[prop];
+    if (options.deep && (isObject(val) || Array.isArray(val))) {
+      result[convertToCamelCase(prop)] = convertObjectPropsToCamelCase(val, options);
+    } else {
+      result[convertToCamelCase(prop)] = obj[prop];
+    }
     return acc;
-  }, {});
+  }, initial);
 };
 
-export const imagePath = imgUrl => `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
+export const imagePath = imgUrl =>
+  `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
 
 export const addSelectOnFocusBehaviour = (selector = '.js-select-on-focus') => {
   // Click a .js-select-on-focus field, select the contents
   // Prevent a mouseup event from deselecting the input
   $(selector).on('focusin', function selectOnFocusCallback() {
-    $(this).select().one('mouseup', (e) => {
-      e.preventDefault();
-    });
+    $(this)
+      .select()
+      .one('mouseup', e => {
+        e.preventDefault();
+      });
   });
 };
 
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index c3d94d63c13..7cca32dc6fa 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -2,10 +2,7 @@ import $ from 'jquery';
 import timeago from 'timeago.js';
 import dateFormat from 'vendor/date.format';
 import { pluralize } from './text_utility';
-import {
-  languageCode,
-  s__,
-} from '../../locale';
+import { languageCode, s__ } from '../../locale';
 
 window.timeago = timeago;
 window.dateFormat = dateFormat;
@@ -17,11 +14,37 @@ window.dateFormat = dateFormat;
  *
  * @param {Boolean} abbreviated
  */
-const getMonthNames = (abbreviated) => {
+const getMonthNames = abbreviated => {
   if (abbreviated) {
-    return [s__('Jan'), s__('Feb'), s__('Mar'), s__('Apr'), s__('May'), s__('Jun'), s__('Jul'), s__('Aug'), s__('Sep'), s__('Oct'), s__('Nov'), s__('Dec')];
+    return [
+      s__('Jan'),
+      s__('Feb'),
+      s__('Mar'),
+      s__('Apr'),
+      s__('May'),
+      s__('Jun'),
+      s__('Jul'),
+      s__('Aug'),
+      s__('Sep'),
+      s__('Oct'),
+      s__('Nov'),
+      s__('Dec'),
+    ];
   }
-  return [s__('January'), s__('February'), s__('March'), s__('April'), s__('May'), s__('June'), s__('July'), s__('August'), s__('September'), s__('October'), s__('November'), s__('December')];
+  return [
+    s__('January'),
+    s__('February'),
+    s__('March'),
+    s__('April'),
+    s__('May'),
+    s__('June'),
+    s__('July'),
+    s__('August'),
+    s__('September'),
+    s__('October'),
+    s__('November'),
+    s__('December'),
+  ];
 };
 
 /**
@@ -29,7 +52,8 @@ const getMonthNames = (abbreviated) => {
  * @param {date} date
  * @returns {String}
  */
-export const getDayName = date => ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][date.getDay()];
+export const getDayName = date =>
+  ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][date.getDay()];
 
 /**
  * @example
@@ -55,37 +79,37 @@ export function getTimeago() {
   if (!timeagoInstance) {
     const localeRemaining = function getLocaleRemaining(number, index) {
       return [
-        [s__('Timeago|less than a minute ago'), s__('Timeago|in a while')],
-        [s__('Timeago|less than a minute ago'), s__('Timeago|%s seconds remaining')],
-        [s__('Timeago|about a minute ago'), s__('Timeago|1 minute remaining')],
+        [s__('Timeago|just now'), s__('Timeago|right now')],
+        [s__('Timeago|%s seconds ago'), s__('Timeago|%s seconds remaining')],
+        [s__('Timeago|1 minute ago'), s__('Timeago|1 minute remaining')],
         [s__('Timeago|%s minutes ago'), s__('Timeago|%s minutes remaining')],
-        [s__('Timeago|about an hour ago'), s__('Timeago|1 hour remaining')],
-        [s__('Timeago|about %s hours ago'), s__('Timeago|%s hours remaining')],
-        [s__('Timeago|a day ago'), s__('Timeago|1 day remaining')],
+        [s__('Timeago|1 hour ago'), s__('Timeago|1 hour remaining')],
+        [s__('Timeago|%s hours ago'), s__('Timeago|%s hours remaining')],
+        [s__('Timeago|1 day ago'), s__('Timeago|1 day remaining')],
         [s__('Timeago|%s days ago'), s__('Timeago|%s days remaining')],
-        [s__('Timeago|a week ago'), s__('Timeago|1 week remaining')],
+        [s__('Timeago|1 week ago'), s__('Timeago|1 week remaining')],
         [s__('Timeago|%s weeks ago'), s__('Timeago|%s weeks remaining')],
-        [s__('Timeago|a month ago'), s__('Timeago|1 month remaining')],
+        [s__('Timeago|1 month ago'), s__('Timeago|1 month remaining')],
         [s__('Timeago|%s months ago'), s__('Timeago|%s months remaining')],
-        [s__('Timeago|a year ago'), s__('Timeago|1 year remaining')],
+        [s__('Timeago|1 year ago'), s__('Timeago|1 year remaining')],
         [s__('Timeago|%s years ago'), s__('Timeago|%s years remaining')],
       ][index];
     };
     const locale = function getLocale(number, index) {
       return [
-        [s__('Timeago|less than a minute ago'), s__('Timeago|in a while')],
-        [s__('Timeago|less than a minute ago'), s__('Timeago|in %s seconds')],
-        [s__('Timeago|about a minute ago'), s__('Timeago|in 1 minute')],
+        [s__('Timeago|just now'), s__('Timeago|right now')],
+        [s__('Timeago|%s seconds ago'), s__('Timeago|in %s seconds')],
+        [s__('Timeago|1 minute ago'), s__('Timeago|in 1 minute')],
         [s__('Timeago|%s minutes ago'), s__('Timeago|in %s minutes')],
-        [s__('Timeago|about an hour ago'), s__('Timeago|in 1 hour')],
-        [s__('Timeago|about %s hours ago'), s__('Timeago|in %s hours')],
-        [s__('Timeago|a day ago'), s__('Timeago|in 1 day')],
+        [s__('Timeago|1 hour ago'), s__('Timeago|in 1 hour')],
+        [s__('Timeago|%s hours ago'), s__('Timeago|in %s hours')],
+        [s__('Timeago|1 day ago'), s__('Timeago|in 1 day')],
         [s__('Timeago|%s days ago'), s__('Timeago|in %s days')],
-        [s__('Timeago|a week ago'), s__('Timeago|in 1 week')],
+        [s__('Timeago|1 week ago'), s__('Timeago|in 1 week')],
         [s__('Timeago|%s weeks ago'), s__('Timeago|in %s weeks')],
-        [s__('Timeago|a month ago'), s__('Timeago|in 1 month')],
+        [s__('Timeago|1 month ago'), s__('Timeago|in 1 month')],
         [s__('Timeago|%s months ago'), s__('Timeago|in %s months')],
-        [s__('Timeago|a year ago'), s__('Timeago|in 1 year')],
+        [s__('Timeago|1 year ago'), s__('Timeago|in 1 year')],
         [s__('Timeago|%s years ago'), s__('Timeago|in %s years')],
       ][index];
     };
@@ -102,7 +126,7 @@ export function getTimeago() {
  * For the given element, renders a timeago instance.
  * @param {jQuery} $els
  */
-export const renderTimeago = ($els) => {
+export const renderTimeago = $els => {
   const timeagoEls = $els || document.querySelectorAll('.js-timeago-render');
 
   // timeago.js sets timeouts internally for each timeago value to be updated in real time
@@ -119,7 +143,7 @@ export const localTimeAgo = ($timeagoEls, setTimeago = true) => {
     if (setTimeago) {
       // Recreate with custom template
       $(el).tooltip({
-        template: '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
+        template: '<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
       });
     }
 
@@ -141,7 +165,9 @@ export const timeFor = (time, expiredLabel) => {
   if (new Date(time) < new Date()) {
     return expiredLabel || s__('Timeago|Past due');
   }
-  return getTimeago().format(time, `${timeagoLanguageCode}-remaining`).trim();
+  return getTimeago()
+    .format(time, `${timeagoLanguageCode}-remaining`)
+    .trim();
 };
 
 export const getDayDifference = (a, b) => {
@@ -161,7 +187,7 @@ export const getDayDifference = (a, b) => {
 export function timeIntervalInWords(intervalInSeconds) {
   const secondsInteger = parseInt(intervalInSeconds, 10);
   const minutes = Math.floor(secondsInteger / 60);
-  const seconds = secondsInteger - (minutes * 60);
+  const seconds = secondsInteger - minutes * 60;
   let text = '';
 
   if (minutes >= 1) {
@@ -178,8 +204,34 @@ export function dateInWords(date, abbreviated = false, hideYear = false) {
   const month = date.getMonth();
   const year = date.getFullYear();
 
-  const monthNames = [s__('January'), s__('February'), s__('March'), s__('April'), s__('May'), s__('June'), s__('July'), s__('August'), s__('September'), s__('October'), s__('November'), s__('December')];
-  const monthNamesAbbr = [s__('Jan'), s__('Feb'), s__('Mar'), s__('Apr'), s__('May'), s__('Jun'), s__('Jul'), s__('Aug'), s__('Sep'), s__('Oct'), s__('Nov'), s__('Dec')];
+  const monthNames = [
+    s__('January'),
+    s__('February'),
+    s__('March'),
+    s__('April'),
+    s__('May'),
+    s__('June'),
+    s__('July'),
+    s__('August'),
+    s__('September'),
+    s__('October'),
+    s__('November'),
+    s__('December'),
+  ];
+  const monthNamesAbbr = [
+    s__('Jan'),
+    s__('Feb'),
+    s__('Mar'),
+    s__('Apr'),
+    s__('May'),
+    s__('Jun'),
+    s__('Jul'),
+    s__('Aug'),
+    s__('Sep'),
+    s__('Oct'),
+    s__('Nov'),
+    s__('Dec'),
+  ];
 
   const monthName = abbreviated ? monthNamesAbbr[month] : monthNames[month];
 
@@ -210,7 +262,7 @@ export const monthInWords = (date, abbreviated = false) => {
  *
  * @param {Date} date
  */
-export const totalDaysInMonth = (date) => {
+export const totalDaysInMonth = date => {
   if (!date) {
     return 0;
   }
@@ -218,17 +270,36 @@ export const totalDaysInMonth = (date) => {
 };
 
 /**
+ * Returns number of days in a quarter from provided
+ * months array.
+ *
+ * @param {Array} quarter
+ */
+export const totalDaysInQuarter = quarter => quarter.reduce(
+  (acc, month) => acc + totalDaysInMonth(month),
+  0,
+);
+
+/**
  * Returns list of Dates referring to Sundays of the month
  * based on provided date
  *
  * @param {Date} date
  */
-export const getSundays = (date) => {
+export const getSundays = date => {
   if (!date) {
     return [];
   }
 
-  const daysToSunday = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+  const daysToSunday = [
+    'Saturday',
+    'Friday',
+    'Thursday',
+    'Wednesday',
+    'Tuesday',
+    'Monday',
+    'Sunday',
+  ];
 
   const month = date.getMonth();
   const year = date.getFullYear();
@@ -249,42 +320,27 @@ export const getSundays = (date) => {
 };
 
 /**
- * Returns list of Dates representing a timeframe of Months from month of provided date (inclusive)
- * up to provided length
- *
- * For eg;
- *    If current month is January 2018 and `length` provided is `6`
- *    Then this method will return list of Date objects as follows;
- *
- *    [ October 2017, November 2017, December 2017, January 2018, February 2018, March 2018 ]
- *
- *    If current month is March 2018 and `length` provided is `3`
- *    Then this method will return list of Date objects as follows;
- *
- *    [ February 2018, March 2018, April 2018 ]
+ * Returns list of Dates representing a timeframe of months from startDate and length
  *
+ * @param {Date} startDate
  * @param {Number} length
- * @param {Date} date
  */
-export const getTimeframeWindow = (length, date) => {
-  if (!length) {
+export const getTimeframeWindowFrom = (startDate, length) => {
+  if (!(startDate instanceof Date) || !length) {
     return [];
   }
 
-  const currentDate = date instanceof Date ? date : new Date();
-  const currentMonthIndex = Math.floor(length / 2);
-  const timeframe = [];
-
-  // Move date object backward to the first month of timeframe
-  currentDate.setDate(1);
-  currentDate.setMonth(currentDate.getMonth() - currentMonthIndex);
-
-  // Iterate and update date for the size of length
+  // Iterate and set date for the size of length
   // and push date reference to timeframe list
-  for (let i = 0; i < length; i += 1) {
-    timeframe.push(new Date(currentDate.getTime()));
-    currentDate.setMonth(currentDate.getMonth() + 1);
-  }
+  const timeframe = new Array(length)
+                      .fill()
+                      .map(
+                        (val, i) => new Date(
+                          startDate.getFullYear(),
+                          startDate.getMonth() + i,
+                          1,
+                        ),
+                      );
 
   // Change date of last timeframe item to last date of the month
   timeframe[length - 1].setDate(totalDaysInMonth(timeframe[length - 1]));
@@ -292,6 +348,29 @@ export const getTimeframeWindow = (length, date) => {
   return timeframe;
 };
 
+/**
+ * Returns count of day within current quarter from provided date
+ * and array of months for the quarter
+ *
+ * Eg;
+ *   If date is 15 Feb 2018
+ *   and quarter is [Jan, Feb, Mar]
+ *
+ *   Then 15th Feb is 46th day of the quarter
+ *   Where 31 (days in Jan) + 15 (date of Feb).
+ *
+ * @param {Date} date
+ * @param {Array} quarter
+ */
+export const dayInQuarter = (date, quarter) => quarter.reduce((acc, month) => {
+  if (date.getMonth() > month.getMonth()) {
+    return acc + totalDaysInMonth(month);
+  } else if (date.getMonth() === month.getMonth()) {
+    return acc + date.getDate();
+  }
+  return acc + 0;
+}, 0);
+
 window.gl = window.gl || {};
 window.gl.utils = {
   ...(window.gl.utils || {}),
diff --git a/app/assets/javascripts/lib/utils/dom_utils.js b/app/assets/javascripts/lib/utils/dom_utils.js
index de65ea15a60..6f42382246d 100644
--- a/app/assets/javascripts/lib/utils/dom_utils.js
+++ b/app/assets/javascripts/lib/utils/dom_utils.js
@@ -1,7 +1,9 @@
-/* eslint-disable import/prefer-default-export */
+import { isInIssuePage, isInMRPage, isInEpicPage } from './common_utils';
 
 export const addClassIfElementExists = (element, className) => {
   if (element) {
     element.classList.add(className);
   }
 };
+
+export const isInVueNoteablePage = () => isInIssuePage() || isInEpicPage() || isInMRPage();
diff --git a/app/assets/javascripts/lib/utils/http_status.js b/app/assets/javascripts/lib/utils/http_status.js
index bb151929431..229d53b18b0 100644
--- a/app/assets/javascripts/lib/utils/http_status.js
+++ b/app/assets/javascripts/lib/utils/http_status.js
@@ -8,4 +8,5 @@ export default {
   OK: 200,
   MULTIPLE_CHOICES: 300,
   BAD_REQUEST: 400,
+  NOT_FOUND: 404,
 };
diff --git a/app/assets/javascripts/lib/utils/keycodes.js b/app/assets/javascripts/lib/utils/keycodes.js
new file mode 100644
index 00000000000..5e0f9b612a2
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/keycodes.js
@@ -0,0 +1,4 @@
+export const UP_KEY_CODE = 38;
+export const DOWN_KEY_CODE = 40;
+export const ENTER_KEY_CODE = 13;
+export const ESC_KEY_CODE = 27;
diff --git a/app/assets/javascripts/lib/utils/logoutput_behaviours.js b/app/assets/javascripts/lib/utils/logoutput_behaviours.js
new file mode 100644
index 00000000000..1bf99d935ef
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/logoutput_behaviours.js
@@ -0,0 +1,46 @@
+import $ from 'jquery';
+import { canScroll, isScrolledToBottom, toggleDisableButton } from './scroll_utils';
+
+export default class LogOutputBehaviours {
+  constructor() {
+    // Scroll buttons
+    this.$scrollTopBtn = $('.js-scroll-up');
+    this.$scrollBottomBtn = $('.js-scroll-down');
+
+    this.$scrollTopBtn.off('click').on('click', this.scrollToTop.bind(this));
+    this.$scrollBottomBtn.off('click').on('click', this.scrollToBottom.bind(this));
+  }
+
+  toggleScroll() {
+    const $document = $(document);
+    const currentPosition = $document.scrollTop();
+    const scrollHeight = $document.height();
+
+    const windowHeight = $(window).height();
+    if (canScroll()) {
+      if (currentPosition > 0 && scrollHeight - currentPosition !== windowHeight) {
+        // User is in the middle of the log
+
+        toggleDisableButton(this.$scrollTopBtn, false);
+        toggleDisableButton(this.$scrollBottomBtn, false);
+      } else if (currentPosition === 0) {
+        // User is at Top of  Log
+
+        toggleDisableButton(this.$scrollTopBtn, true);
+        toggleDisableButton(this.$scrollBottomBtn, false);
+      } else if (isScrolledToBottom()) {
+        // User is at the bottom of the build log.
+
+        toggleDisableButton(this.$scrollTopBtn, false);
+        toggleDisableButton(this.$scrollBottomBtn, true);
+      }
+    } else {
+      toggleDisableButton(this.$scrollTopBtn, true);
+      toggleDisableButton(this.$scrollBottomBtn, true);
+    }
+  }
+
+  toggleScrollAnimation(toggle) {
+    this.$scrollBottomBtn.toggleClass('animate', toggle);
+  }
+}
diff --git a/app/assets/javascripts/lib/utils/notify.js b/app/assets/javascripts/lib/utils/notify.js
index 973d6119158..305ad3e5e26 100644
--- a/app/assets/javascripts/lib/utils/notify.js
+++ b/app/assets/javascripts/lib/utils/notify.js
@@ -1,4 +1,4 @@
-/* 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 */
+/* eslint-disable func-names, no-var, consistent-return, prefer-arrow-callback, no-return-assign, object-shorthand, comma-dangle, max-len */
 
 function notificationGranted(message, opts, onclick) {
   var notification;
diff --git a/app/assets/javascripts/lib/utils/number_utils.js b/app/assets/javascripts/lib/utils/number_utils.js
index a02c79b787e..afbab59055b 100644
--- a/app/assets/javascripts/lib/utils/number_utils.js
+++ b/app/assets/javascripts/lib/utils/number_utils.js
@@ -12,8 +12,8 @@ export function formatRelevantDigits(number) {
   let digitsLeft = '';
   let relevantDigits = 0;
   let formattedNumber = '';
-  if (!isNaN(Number(number))) {
-    digitsLeft = number.toString().split('.')[0];
+  if (!Number.isNaN(Number(number))) {
+    [digitsLeft] = number.toString().split('.');
     switch (digitsLeft.length) {
       case 1:
         relevantDigits = 3;
diff --git a/app/assets/javascripts/lib/utils/scroll_utils.js b/app/assets/javascripts/lib/utils/scroll_utils.js
new file mode 100644
index 00000000000..9313b570863
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/scroll_utils.js
@@ -0,0 +1,29 @@
+import $ from 'jquery';
+
+export const canScroll = () => $(document).height() > $(window).height();
+
+/**
+ * Checks if the entire page is scrolled down all the way to the bottom
+ */
+export const isScrolledToBottom = () => {
+  const $document = $(document);
+
+  const currentPosition = $document.scrollTop();
+  const scrollHeight = $document.height();
+
+  const windowHeight = $(window).height();
+
+  return scrollHeight - currentPosition === windowHeight;
+};
+
+export const scrollDown = () => {
+  const $document = $(document);
+  $document.scrollTop($document.height());
+};
+
+export const toggleDisableButton = ($button, disable) => {
+  if (disable && $button.prop('disabled')) return;
+  $button.prop('disabled', disable);
+};
+
+export default {};
diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js
index 098afcfa1b4..15a4dd62012 100644
--- a/app/assets/javascripts/lib/utils/sticky.js
+++ b/app/assets/javascripts/lib/utils/sticky.js
@@ -1,3 +1,5 @@
+import StickyFill from 'stickyfilljs';
+
 export const createPlaceholder = () => {
   const placeholder = document.createElement('div');
   placeholder.classList.add('sticky-placeholder');
@@ -28,7 +30,16 @@ export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
   }
 };
 
-export default (el, stickyTop, insertPlaceholder = true) => {
+/**
+ * Create a listener that will toggle a 'is-stuck' class, based on the current scroll position.
+ *
+ * - If the current environment does not support `position: sticky`, do nothing.
+ *
+ * @param {HTMLElement} el The `position: sticky` element.
+ * @param {Number} stickyTop Used to determine when an element is stuck.
+ * @param {Boolean} insertPlaceholder Should a placeholder element be created when element is stuck?
+ */
+export const stickyMonitor = (el, stickyTop, insertPlaceholder = true) => {
   if (!el) return;
 
   if (typeof CSS === 'undefined' || !(CSS.supports('(position: -webkit-sticky) or (position: sticky)'))) return;
@@ -37,3 +48,13 @@ export default (el, stickyTop, insertPlaceholder = true) => {
     passive: true,
   });
 };
+
+/**
+ * Polyfill the `position: sticky` behavior.
+ *
+ * - If the current environment supports `position: sticky`, do nothing.
+ * - Can receive an iterable element list (NodeList, jQuery collection, etc.) or single HTMLElement.
+ */
+export const polyfillSticky = (el) => {
+  StickyFill.add(el);
+};
diff --git a/app/assets/javascripts/lib/utils/text_markdown.js b/app/assets/javascripts/lib/utils/text_markdown.js
index 5a16adea4dc..ce0bc4d40e9 100644
--- a/app/assets/javascripts/lib/utils/text_markdown.js
+++ b/app/assets/javascripts/lib/utils/text_markdown.js
@@ -1,4 +1,4 @@
-/* eslint-disable import/prefer-default-export, 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 */
+/* eslint-disable func-names, no-var, no-param-reassign, quotes, one-var, one-var-declaration-per-line, operator-assignment, no-else-return, prefer-template, prefer-arrow-callback, max-len, consistent-return, no-unused-vars, max-len */
 import $ from 'jquery';
 import { insertText } from '~/lib/utils/common_utils';
 
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 94d03621bff..5f25c6ce1ae 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -7,7 +7,8 @@
  * @param {String} text
  * @returns {String}
  */
-export const addDelimiter = text => (text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : text);
+export const addDelimiter = text =>
+  (text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : text);
 
 /**
  * Returns '99+' for numbers bigger than 99.
@@ -22,7 +23,8 @@ export const highCountTrim = count => (count > 99 ? '99+' : count);
  * @param {String} string
  * @requires {String}
  */
-export const humanize = string => string.charAt(0).toUpperCase() + string.replace(/_/g, ' ').slice(1);
+export const humanize = string =>
+  string.charAt(0).toUpperCase() + string.replace(/_/g, ' ').slice(1);
 
 /**
  * Adds an 's' to the end of the string when count is bigger than 0
@@ -53,7 +55,15 @@ export const slugify = str => str.trim().toLowerCase();
  * @param {Number} maxLength
  * @returns {String}
  */
-export const truncate = (string, maxLength) => `${string.substr(0, (maxLength - 3))}...`;
+export const truncate = (string, maxLength) => `${string.substr(0, maxLength - 3)}...`;
+
+/**
+ * Truncate SHA to 8 characters
+ *
+ * @param {String} sha
+ * @returns {String}
+ */
+export const truncateSha = sha => sha.substr(0, 8);
 
 /**
  * Capitalizes first character
@@ -72,7 +82,11 @@ export function capitalizeFirstCharacter(text) {
  * @param {*} replace
  * @returns {String}
  */
-export const stripHtml = (string, replace = '') => string.replace(/<[^>]*>/g, replace);
+export const stripHtml = (string, replace = '') => {
+  if (!string) return string;
+
+  return string.replace(/<[^>]*>/g, replace);
+};
 
 /**
  * Converts snake_case string to camelCase
@@ -80,3 +94,28 @@ export const stripHtml = (string, replace = '') => string.replace(/<[^>]*>/g, re
  * @param {*} string
  */
 export const convertToCamelCase = string => string.replace(/(_\w)/g, s => s[1].toUpperCase());
+
+/**
+ * Converts a sentence to lower case from the second word onwards
+ * e.g. Hello World => Hello world
+ *
+ * @param {*} string
+ */
+export const convertToSentenceCase = string => {
+  const splitWord = string.split(' ').map((word, index) => (index > 0 ? word.toLowerCase() : word));
+
+  return splitWord.join(' ');
+};
+
+/**
+ * Splits camelCase or PascalCase words
+ * e.g. HelloWorld => Hello World
+ *
+ * @param {*} string
+*/
+export const splitCamelCase = string => (
+  string
+  .replace(/([A-Z]+)([A-Z][a-z])/g, ' $1 $2')
+  .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+  .trim()
+);
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index a266bb6771f..72b72f4247d 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -51,7 +51,7 @@ export function removeParams(params) {
   const url = document.createElement('a');
   url.href = window.location.href;
 
-  params.forEach((param) => {
+  params.forEach(param => {
     url.search = removeParamQueryString(url.search, param);
   });
 
@@ -83,3 +83,11 @@ export function refreshCurrentPage() {
 export function redirectTo(url) {
   return window.location.assign(url);
 }
+
+export function webIDEUrl(route = undefined) {
+  let returnUrl = `${gon.relative_url_root || ''}/-/ide/`;
+  if (route) {
+    returnUrl += `project${route.replace(new RegExp(`^${gon.relative_url_root || ''}`), '')}`;
+  }
+  return returnUrl;
+}
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index f2323f57455..291655235d5 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-underscore-dangle, no-param-reassign, prefer-template, quotes, comma-dangle, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, no-else-return, max-len */
+/* eslint-disable func-names, no-var, no-underscore-dangle, no-param-reassign, prefer-template, quotes, comma-dangle, consistent-return, one-var, one-var-declaration-per-line, no-else-return, max-len */
 
 import $ from 'jquery';
 
@@ -35,7 +35,7 @@ const LineHighlighter = function(options = {}) {
   options.highlightLineClass = options.highlightLineClass || 'hll';
   options.fileHolderSelector = options.fileHolderSelector || '.file-holder';
   options.scrollFileHolder = options.scrollFileHolder || false;
-  options.hash = options.hash || location.hash;
+  options.hash = options.hash || window.location.hash;
 
   this.options = options;
   this._hash = options.hash;
@@ -142,12 +142,14 @@ LineHighlighter.prototype.highlightLine = function(lineNumber) {
 //
 // range - Array containing the starting and ending line numbers
 LineHighlighter.prototype.highlightRange = function(range) {
-  var i, lineNumber, ref, ref1, results;
   if (range[1]) {
-    results = [];
-    for (lineNumber = i = ref = range[0], ref1 = range[1]; ref <= ref1 ? i <= ref1 : i >= ref1; lineNumber = ref <= ref1 ? (i += 1) : (i -= 1)) {
+    const results = [];
+    const ref = range[0] <= range[1] ? range : range.reverse();
+
+    for (let lineNumber = range[0]; lineNumber <= ref[1]; lineNumber += 1) {
       results.push(this.highlightLine(lineNumber));
     }
+
     return results;
   } else {
     return this.highlightLine(range[0]);
@@ -170,7 +172,7 @@ LineHighlighter.prototype.setHash = function(firstLineNumber, lastLineNumber) {
 //
 // This method is stubbed in tests.
 LineHighlighter.prototype.__setLocationHash__ = function(value) {
-  return history.pushState({
+  return window.history.pushState({
     url: value
   // We're using pushState instead of assigning location.hash directly to
   // prevent the page from scrolling on the hashchange event
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index 2f4328b56e1..2cc5fb10027 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -9,7 +9,7 @@ delete window.translations;
   Translates `text`
   @param text The text to be translated
   @returns {String} The translated text
-**/
+*/
 const gettext = locale.gettext.bind(locale);
 
 /**
@@ -21,7 +21,7 @@ const gettext = locale.gettext.bind(locale);
   @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('|');
 
@@ -38,7 +38,7 @@ const ngettext = (text, pluralText, count) => {
                       (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('|');
diff --git a/app/assets/javascripts/locale/sprintf.js b/app/assets/javascripts/locale/sprintf.js
index 5f4a053f98e..599104dcfa0 100644
--- a/app/assets/javascripts/locale/sprintf.js
+++ b/app/assets/javascripts/locale/sprintf.js
@@ -10,7 +10,7 @@ import _ from 'underscore';
 
   @see https://ruby-doc.org/core-2.3.3/Kernel.html#method-i-sprintf
   @see https://gitlab.com/gitlab-org/gitlab-ce/issues/37992
-**/
+*/
 export default (input, parameters, escapeParameters = true) => {
   let output = input;
 
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 2c80baba10b..c9ce838cd48 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -1,22 +1,19 @@
-/* eslint-disable import/first */
 /* global $ */
 
 import jQuery from 'jquery';
 import Cookies from 'js-cookie';
 import svg4everybody from 'svg4everybody';
 
-// expose common libraries as globals (TODO: remove these)
-window.jQuery = jQuery;
-window.$ = jQuery;
+// bootstrap webpack, common libs, polyfills, and behaviors
+import './webpack';
+import './commons';
+import './behaviors';
 
 // lib/utils
 import { handleLocationHash, addSelectOnFocusBehaviour } from './lib/utils/common_utils';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import { getLocationHash, visitUrl } from './lib/utils/url_utility';
 
-// behaviors
-import './behaviors/';
-
 // everything else
 import loadAwardsHandler from './awards_handler';
 import bp from './breakpoints';
@@ -31,9 +28,12 @@ import initLogoAnimation from './logo';
 import './milestone_select';
 import './projects_dropdown';
 import initBreadcrumbs from './breadcrumb';
-
 import initDispatcher from './dispatcher';
 
+// expose jQuery as global (TODO: remove these)
+window.jQuery = jQuery;
+window.$ = jQuery;
+
 // inject test utilities if necessary
 if (process.env.NODE_ENV !== 'production' && gon && gon.test_env) {
   $.fx.off = true;
@@ -46,16 +46,20 @@ document.addEventListener('beforeunload', () => {
   // Unbind scroll events
   $(document).off('scroll');
   // Close any open tooltips
-  $('.has-tooltip, [data-toggle="tooltip"]').tooltip('destroy');
+  $('.has-tooltip, [data-toggle="tooltip"]').tooltip('dispose');
   // Close any open popover
-  $('[data-toggle="popover"]').popover('destroy');
+  $('[data-toggle="popover"]').popover('dispose');
 });
 
 window.addEventListener('hashchange', handleLocationHash);
-window.addEventListener('load', function onLoad() {
-  window.removeEventListener('load', onLoad, false);
-  handleLocationHash();
-}, false);
+window.addEventListener(
+  'load',
+  function onLoad() {
+    window.removeEventListener('load', onLoad, false);
+    handleLocationHash();
+  },
+  false,
+);
 
 gl.lazyLoader = new LazyLoader({
   scrollContainer: window,
@@ -89,9 +93,7 @@ document.addEventListener('DOMContentLoaded', () => {
   if (bootstrapBreakpoint === 'xs') {
     const $rightSidebar = $('aside.right-sidebar, .layout-page');
 
-    $rightSidebar
-      .removeClass('right-sidebar-expanded')
-      .addClass('right-sidebar-collapsed');
+    $rightSidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
   }
 
   // prevent default action for disabled buttons
@@ -108,7 +110,8 @@ document.addEventListener('DOMContentLoaded', () => {
   addSelectOnFocusBehaviour('.js-select-on-focus');
 
   $('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() {
-    $(this).tooltip('destroy')
+    $(this)
+      .tooltip('dispose')
       .closest('li')
       .fadeOut();
   });
@@ -118,7 +121,9 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   $('.js-remove-tr').on('ajax:success', function removeTRAjaxSuccessCallback() {
-    $(this).closest('tr').fadeOut();
+    $(this)
+      .closest('tr')
+      .fadeOut();
   });
 
   // Initialize select2 selects
@@ -136,9 +141,10 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   // Initialize tooltips
-  $.fn.tooltip.Constructor.DEFAULTS.trigger = 'hover';
   $body.tooltip({
     selector: '.has-tooltip, [data-toggle="tooltip"]',
+    trigger: 'hover',
+    boundary: 'viewport',
     placement(tip, el) {
       return $(el).data('placement') || 'bottom';
     },
@@ -155,7 +161,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Form submitter
   $('.trigger-submit').on('change', function triggerSubmitCallback() {
-    $(this).parents('form').submit();
+    $(this)
+      .parents('form')
+      .submit();
   });
 
   localTimeAgo($('abbr.timeago, .js-timeago'), true);
@@ -189,7 +197,7 @@ document.addEventListener('DOMContentLoaded', () => {
     $container.remove();
   });
 
-  $('.navbar-toggle').on('click', () => {
+  $('.navbar-toggler').on('click', () => {
     $('.header-content').toggleClass('menu-expanded');
     gl.lazyLoader.loadCheck();
   });
@@ -204,9 +212,15 @@ document.addEventListener('DOMContentLoaded', () => {
     $this.toggleClass('active');
 
     if ($this.hasClass('active')) {
-      notesHolders.show().find('.hide, .content').show();
+      notesHolders
+        .show()
+        .find('.hide, .content')
+        .show();
     } else {
-      notesHolders.hide().find('.content').hide();
+      notesHolders
+        .hide()
+        .find('.content')
+        .hide();
     }
 
     $(document).trigger('toggle.comments');
@@ -247,9 +261,11 @@ document.addEventListener('DOMContentLoaded', () => {
   const flashContainer = document.querySelector('.flash-container');
 
   if (flashContainer && flashContainer.children.length) {
-    flashContainer.querySelectorAll('.flash-alert, .flash-notice, .flash-success').forEach((flashEl) => {
-      removeFlashClickListener(flashEl);
-    });
+    flashContainer
+      .querySelectorAll('.flash-alert, .flash-notice, .flash-success')
+      .forEach(flashEl => {
+        removeFlashClickListener(flashEl);
+      });
   }
 
   initDispatcher();
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
index 2cb238529aa..81950515ab4 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
@@ -1,4 +1,4 @@
-/* eslint-disable comma-dangle, quote-props, no-useless-computed-key, object-shorthand, no-new, no-param-reassign, max-len */
+/* eslint-disable comma-dangle, quote-props, no-useless-computed-key, object-shorthand, no-param-reassign, max-len */
 /* global ace */
 
 import Vue from 'vue';
@@ -11,9 +11,18 @@ import { __ } from '~/locale';
 
   global.mergeConflicts.diffFileEditor = Vue.extend({
     props: {
-      file: Object,
-      onCancelDiscardConfirmation: Function,
-      onAcceptDiscardConfirmation: Function
+      file: {
+        type: Object,
+        required: true,
+      },
+      onCancelDiscardConfirmation: {
+        type: Function,
+        required: true,
+      },
+      onAcceptDiscardConfirmation: {
+        type: Function,
+        required: true,
+      },
     },
     data() {
       return {
diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
index 56d6678e1bd..827cf5f478d 100644
--- a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
+++ b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
@@ -1,14 +1,19 @@
-/* eslint-disable no-param-reassign, comma-dangle */
+/* eslint-disable no-param-reassign */
 
 import Vue from 'vue';
+import actionsMixin from '../mixins/line_conflict_actions';
+import utilsMixin from '../mixins/line_conflict_utils';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.inlineConflictLines = Vue.extend({
+    mixins: [utilsMixin, actionsMixin],
     props: {
-      file: Object
+      file: {
+        type: Object,
+        required: true,
+      },
     },
-    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
   });
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
index 0fc4a13450a..69208ac2d36 100644
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
+++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
@@ -1,15 +1,20 @@
-/* eslint-disable no-param-reassign, comma-dangle */
+/* eslint-disable no-param-reassign */
 
 import Vue from 'vue';
+import actionsMixin from '../mixins/line_conflict_actions';
+import utilsMixin from '../mixins/line_conflict_utils';
 
 ((global) => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.parallelConflictLines = Vue.extend({
+    mixins: [utilsMixin, actionsMixin],
     props: {
-      file: Object
+      file: {
+        type: Object,
+        required: true,
+      },
     },
-    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
     template: `
       <table>
         <tr class="line_holder parallel" v-for="section in file.parallelLines">
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_service.js b/app/assets/javascripts/merge_conflicts/merge_conflict_service.js
index c68b47c9348..64d69159222 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_service.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_service.js
@@ -1,23 +1,16 @@
-/* eslint-disable no-param-reassign, comma-dangle */
 import axios from '../lib/utils/axios_utils';
 
-((global) => {
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  class mergeConflictsService {
-    constructor(options) {
-      this.conflictsPath = options.conflictsPath;
-      this.resolveConflictsPath = options.resolveConflictsPath;
-    }
-
-    fetchConflictsData() {
-      return axios.get(this.conflictsPath);
-    }
+export default class MergeConflictsService {
+  constructor(options) {
+    this.conflictsPath = options.conflictsPath;
+    this.resolveConflictsPath = options.resolveConflictsPath;
+  }
 
-    submitResolveConflicts(data) {
-      return axios.post(this.resolveConflictsPath, data);
-    }
+  fetchConflictsData() {
+    return axios.get(this.conflictsPath);
   }
 
-  global.mergeConflicts.mergeConflictsService = mergeConflictsService;
-})(window.gl || (window.gl = {}));
+  submitResolveConflicts(data) {
+    return axios.post(this.resolveConflictsPath, data);
+  }
+}
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
index db1d09eb2f2..1501296ac4f 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
@@ -156,7 +156,7 @@ import Cookies from 'js-cookie';
         return 0;
       }
 
-      const files = this.state.conflictsData.files;
+      const { files } = this.state.conflictsData;
       let count = 0;
 
       files.forEach((file) => {
@@ -313,7 +313,7 @@ import Cookies from 'js-cookie';
     },
 
     isReadyToCommit() {
-      const files = this.state.conflictsData.files;
+      const { files } = this.state.conflictsData;
       const hasCommitMessage = $.trim(this.state.conflictsData.commitMessage).length;
       let unresolved = 0;
 
@@ -351,7 +351,7 @@ import Cookies from 'js-cookie';
     },
 
     getCommitButtonText() {
-      const initial = 'Commit conflict resolution';
+      const initial = 'Commit to source branch';
       const inProgress = 'Committing...';
 
       return this.state ? this.state.isSubmitting ? inProgress : initial : initial;
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
index 4abd5433bb5..7badd68089c 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
@@ -1,13 +1,9 @@
-/* eslint-disable new-cap, comma-dangle, no-new */
-
 import $ from 'jquery';
 import Vue from 'vue';
-import Flash from '../flash';
+import createFlash from '../flash';
 import initIssuableSidebar from '../init_issuable_sidebar';
 import './merge_conflict_store';
-import './merge_conflict_service';
-import './mixins/line_conflict_utils';
-import './mixins/line_conflict_actions';
+import MergeConflictsService from './merge_conflict_service';
 import './components/diff_file_editor';
 import './components/inline_conflict_lines';
 import './components/parallel_conflict_lines';
@@ -16,10 +12,10 @@ import syntaxHighlight from '../syntax_highlight';
 export default function initMergeConflicts() {
   const INTERACTIVE_RESOLVE_MODE = 'interactive';
   const conflictsEl = document.querySelector('#conflicts');
-  const mergeConflictsStore = gl.mergeConflicts.mergeConflictsStore;
-  const mergeConflictsService = new gl.mergeConflicts.mergeConflictsService({
+  const { mergeConflictsStore } = gl.mergeConflicts;
+  const mergeConflictsService = new MergeConflictsService({
     conflictsPath: conflictsEl.dataset.conflictsPath,
-    resolveConflictsPath: conflictsEl.dataset.resolveConflictsPath
+    resolveConflictsPath: conflictsEl.dataset.resolveConflictsPath,
   });
 
   initIssuableSidebar();
@@ -29,17 +25,26 @@ export default function initMergeConflicts() {
     components: {
       'diff-file-editor': gl.mergeConflicts.diffFileEditor,
       'inline-conflict-lines': gl.mergeConflicts.inlineConflictLines,
-      'parallel-conflict-lines': gl.mergeConflicts.parallelConflictLines
+      'parallel-conflict-lines': gl.mergeConflicts.parallelConflictLines,
     },
     data: mergeConflictsStore.state,
     computed: {
-      conflictsCountText() { return mergeConflictsStore.getConflictsCountText(); },
-      readyToCommit() { return mergeConflictsStore.isReadyToCommit(); },
-      commitButtonText() { return mergeConflictsStore.getCommitButtonText(); },
-      showDiffViewTypeSwitcher() { return mergeConflictsStore.fileTextTypePresent(); }
+      conflictsCountText() {
+        return mergeConflictsStore.getConflictsCountText();
+      },
+      readyToCommit() {
+        return mergeConflictsStore.isReadyToCommit();
+      },
+      commitButtonText() {
+        return mergeConflictsStore.getCommitButtonText();
+      },
+      showDiffViewTypeSwitcher() {
+        return mergeConflictsStore.fileTextTypePresent();
+      },
     },
     created() {
-      mergeConflictsService.fetchConflictsData()
+      mergeConflictsService
+        .fetchConflictsData()
         .then(({ data }) => {
           if (data.type === 'error') {
             mergeConflictsStore.setFailedRequest(data.message);
@@ -87,9 +92,9 @@ export default function initMergeConflicts() {
           })
           .catch(() => {
             mergeConflictsStore.setSubmitState(false);
-            new Flash('Failed to save merge conflicts resolutions. Please try again!');
+            createFlash('Failed to save merge conflicts resolutions. Please try again!');
           });
-      }
-    }
+      },
+    },
   });
 }
diff --git a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js
index 53e000d7e9e..364ae2b2688 100644
--- a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js
+++ b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js
@@ -1,13 +1,7 @@
-/* eslint-disable no-param-reassign, comma-dangle */
-
-((global) => {
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  global.mergeConflicts.actions = {
-    methods: {
-      handleSelected(file, sectionId, selection) {
-        gl.mergeConflicts.mergeConflictsStore.handleSelected(file, sectionId, selection);
-      }
-    }
-  };
-})(window.gl || (window.gl = {}));
+export default {
+  methods: {
+    handleSelected(file, sectionId, selection) {
+      gl.mergeConflicts.mergeConflictsStore.handleSelected(file, sectionId, selection);
+    },
+  },
+};
diff --git a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js
index 0f475f62ee6..d25032fb142 100644
--- a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js
+++ b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js
@@ -1,19 +1,13 @@
-/* eslint-disable no-param-reassign, quote-props, comma-dangle */
-
-((global) => {
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  global.mergeConflicts.utils = {
-    methods: {
-      lineCssClass(line) {
-        return {
-          'head': line.isHead,
-          'origin': line.isOrigin,
-          'match': line.hasMatch,
-          'selected': line.isSelected,
-          'unselected': line.isUnselected
-        };
-      }
-    }
-  };
-})(window.gl || (window.gl = {}));
+export default {
+  methods: {
+    lineCssClass(line) {
+      return {
+        head: line.isHead,
+        origin: line.isOrigin,
+        match: line.hasMatch,
+        selected: line.isSelected,
+        unselected: line.isUnselected,
+      };
+    },
+  },
+};
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index d8222ebec63..7bf2c56dd5d 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -1,4 +1,4 @@
-/* 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 */
+/* eslint-disable func-names, no-var, wrap-iife, quotes, no-underscore-dangle, one-var, one-var-declaration-per-line, consistent-return, comma-dangle, max-len, prefer-arrow-callback */
 
 import $ from 'jquery';
 import { __ } from '~/locale';
@@ -49,6 +49,7 @@ MergeRequest.prototype.initTabs = function() {
   if (window.mrTabs) {
     window.mrTabs.unbindEvents();
   }
+
   window.mrTabs = new MergeRequestTabs(this.opts);
 };
 
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index e77318fef46..329d4303132 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,17 +1,15 @@
 /* eslint-disable no-new, class-methods-use-this */
 
 import $ from 'jquery';
+import Vue from 'vue';
 import Cookies from 'js-cookie';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import initChangesDropdown from './init_changes_dropdown';
 import bp from './breakpoints';
-import {
-  parseUrlPathname,
-  handleLocationHash,
-  isMetaClick,
-} from './lib/utils/common_utils';
+import { parseUrlPathname, handleLocationHash, isMetaClick } from './lib/utils/common_utils';
+import { isInVueNoteablePage } from './lib/utils/dom_utils';
 import { getLocationHash } from './lib/utils/url_utility';
 import initDiscussionTab from './image_diff/init_discussion_tab';
 import Diff from './diff';
@@ -66,20 +64,21 @@ import Notes from './notes';
 /* eslint-enable max-len */
 
 // Store the `location` object, allowing for easier stubbing in tests
-let location = window.location;
+let { location } = window;
 
 export default class MergeRequestTabs {
-
   constructor({ action, setUrl, stubLocation } = {}) {
     const mergeRequestTabs = document.querySelector('.js-tabs-affix');
     const navbar = document.querySelector('.navbar-gitlab');
-    const peek = document.getElementById('peek');
+    const peek = document.getElementById('js-peek');
     const paddingTop = 16;
+    this.commitsTab = document.querySelector('.tab-content .commits.tab-pane');
 
     this.diffsLoaded = false;
     this.pipelinesLoaded = false;
     this.commitsLoaded = false;
     this.fixedLayoutPref = null;
+    this.eventHub = new Vue();
 
     this.setUrl = setUrl !== undefined ? setUrl : true;
     this.setCurrentAction = this.setCurrentAction.bind(this);
@@ -109,8 +108,7 @@ export default class MergeRequestTabs {
       .on('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
       .on('click', '.js-show-tab', this.showTab);
 
-    $('.merge-request-tabs a[data-toggle="tab"]')
-      .on('click', this.clickTab);
+    $('.merge-request-tabs a[data-toggle="tab"]').on('click', this.clickTab);
   }
 
   // Used in tests
@@ -119,8 +117,7 @@ export default class MergeRequestTabs {
       .off('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
       .off('click', '.js-show-tab', this.showTab);
 
-    $('.merge-request-tabs a[data-toggle="tab"]')
-      .off('click', this.clickTab);
+    $('.merge-request-tabs a[data-toggle="tab"]').off('click', this.clickTab);
   }
 
   destroyPipelinesView() {
@@ -156,7 +153,9 @@ export default class MergeRequestTabs {
       this.resetViewContainer();
       this.destroyPipelinesView();
     } else if (this.isDiffAction(action)) {
-      this.loadDiff($target.attr('href'));
+      if (!isInVueNoteablePage()) {
+        this.loadDiff($target.attr('href'));
+      }
       if (bp.getBreakpointSize() !== 'lg') {
         this.shrinkView();
       }
@@ -164,6 +163,7 @@ export default class MergeRequestTabs {
         this.expandViewContainer();
       }
       this.destroyPipelinesView();
+      this.commitsTab.classList.remove('active');
     } else if (action === 'pipelines') {
       this.resetViewContainer();
       this.mountPipelinesView();
@@ -179,14 +179,13 @@ export default class MergeRequestTabs {
     if (this.setUrl) {
       this.setCurrentAction(action);
     }
+
+    this.eventHub.$emit('MergeRequestTabChange', this.getCurrentAction());
   }
 
   scrollToElement(container) {
     if (location.hash) {
-      const offset = 0 - (
-        $('.navbar-gitlab').outerHeight() +
-        $('.js-tabs-affix').outerHeight()
-      );
+      const offset = 0 - ($('.navbar-gitlab').outerHeight() + $('.js-tabs-affix').outerHeight());
       const $el = $(`${container} ${location.hash}:not(.match)`);
       if ($el.length) {
         $.scrollTo($el[0], { offset });
@@ -240,9 +239,13 @@ export default class MergeRequestTabs {
     // Turbolinks' history.
     //
     // See https://github.com/rails/turbolinks/issues/363
-    window.history.replaceState({
-      url: newState,
-    }, document.title, newState);
+    window.history.replaceState(
+      {
+        url: newState,
+      },
+      document.title,
+      newState,
+    );
 
     return newState;
   }
@@ -258,7 +261,8 @@ export default class MergeRequestTabs {
 
     this.toggleLoading(true);
 
-    axios.get(`${source}.json`)
+    axios
+      .get(`${source}.json`)
       .then(({ data }) => {
         document.querySelector('div#commits').innerHTML = data.html;
         localTimeAgo($('.js-timeago', 'div#commits'));
@@ -275,7 +279,7 @@ export default class MergeRequestTabs {
 
   mountPipelinesView() {
     const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-    const CommitPipelinesTable = gl.CommitPipelinesTable;
+    const { CommitPipelinesTable } = gl;
     this.commitPipelinesTable = new CommitPipelinesTable({
       propsData: {
         endpoint: pipelineTableViewEl.dataset.endpoint,
@@ -303,7 +307,8 @@ export default class MergeRequestTabs {
 
     this.toggleLoading(true);
 
-    axios.get(`${urlPathname}.json${location.search}`)
+    axios
+      .get(`${urlPathname}.json${location.search}`)
       .then(({ data }) => {
         const $container = $('#diffs');
         $container.html(data.html);
@@ -332,8 +337,7 @@ export default class MergeRequestTabs {
             cancelButtons: $(el).find('.js-cancel-fork-suggestion-button'),
             suggestionSections: $(el).find('.js-file-fork-suggestion-section'),
             actionTextPieces: $(el).find('.js-file-fork-suggestion-section-action'),
-          })
-            .init();
+          }).init();
         });
 
         // Scroll any linked note into view
@@ -367,7 +371,7 @@ export default class MergeRequestTabs {
   //
   // status - Boolean, true to show, false to hide
   toggleLoading(status) {
-    $('.mr-loading-status .loading').toggle(status);
+    $('.mr-loading-status .loading').toggleClass('hide', !status);
   }
 
   diffViewType() {
@@ -388,8 +392,7 @@ export default class MergeRequestTabs {
 
   resetViewContainer() {
     if (this.fixedLayoutPref !== null) {
-      $('.content-wrapper .container-fluid')
-        .toggleClass('container-limited', this.fixedLayoutPref);
+      $('.content-wrapper .container-fluid').toggleClass('container-limited', this.fixedLayoutPref);
     }
   }
 
@@ -433,17 +436,16 @@ export default class MergeRequestTabs {
       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')
+    $tabs
+      .off('affix.bs.affix affix-top.bs.affix')
       .affix({
         offset: {
-          top: () => (
-            $diffTabs.offset().top - $tabs.height() - $fixedNav.height()
-          ),
+          top: () => $diffTabs.offset().top - $tabs.height() - $fixedNav.height(),
         },
       })
       .on('affix.bs.affix', () => $diffTabs.css({ marginTop: $tabs.height() }))
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index e6e3a66aa20..6da04020881 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
+import { mouseenter, debouncedMouseleave, togglePopover } from './shared/popover';
 
 export default class Milestone {
   constructor() {
@@ -17,13 +18,13 @@ export default class Milestone {
     return $('a[data-toggle="tab"]').on('show.bs.tab', (e) => {
       const $target = $(e.target);
 
-      location.hash = $target.attr('href');
+      window.location.hash = $target.attr('href');
       this.loadTab($target);
     });
   }
   // eslint-disable-next-line class-methods-use-this
   loadInitialTab() {
-    const $target = $(`.js-milestone-tabs a[href="${location.hash}"]`);
+    const $target = $(`.js-milestone-tabs a[href="${window.location.hash}"]`);
 
     if ($target.length) {
       $target.tab('show');
@@ -43,4 +44,25 @@ export default class Milestone {
         .catch(() => flash('Error loading milestone tab'));
     }
   }
+
+  static initDeprecationMessage() {
+    const deprecationMesssageContainer = document.querySelector('.js-milestone-deprecation-message');
+
+    if (!deprecationMesssageContainer) return;
+
+    const deprecationMessage = deprecationMesssageContainer.querySelector('.js-milestone-deprecation-message-template').innerHTML;
+    const $popover = $('.js-popover-link', deprecationMesssageContainer);
+    const hideOnScroll = togglePopover.bind($popover, false);
+
+    $popover.popover({
+      content: deprecationMessage,
+      html: true,
+      placement: 'bottom',
+    })
+    .on('mouseenter', mouseenter)
+    .on('mouseleave', debouncedMouseleave())
+    .on('show.bs.popover', () => {
+      window.addEventListener('scroll', hideOnScroll, { once: true });
+    });
+  }
 }
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index add07c156a4..77acba6e355 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -1,22 +1,25 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, one-var-declaration-per-line, no-unused-vars, object-shorthand, comma-dangle, no-else-return, no-self-compare, consistent-return, no-param-reassign, no-shadow */
+/* eslint-disable max-len, one-var, one-var-declaration-per-line, no-unused-vars, object-shorthand, no-else-return, no-self-compare, consistent-return, no-param-reassign, no-shadow */
 /* global Issuable */
 /* global ListMilestone */
 
 import $ from 'jquery';
 import _ from 'underscore';
+import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import { timeFor } from './lib/utils/datetime_utility';
+import ModalStore from './boards/stores/modal_store';
 
 export default class MilestoneSelect {
   constructor(currentProject, els, options = {}) {
     if (currentProject !== null) {
-      this.currentProject = typeof currentProject === 'string' ? JSON.parse(currentProject) : currentProject;
+      this.currentProject =
+        typeof currentProject === 'string' ? JSON.parse(currentProject) : currentProject;
     }
 
-    this.init(els, options);
+    MilestoneSelect.init(els, options);
   }
 
-  init(els, options) {
+  static init(els, options) {
     let $els = $(els);
 
     if (!els) {
@@ -24,7 +27,10 @@ export default class MilestoneSelect {
     }
 
     $els.each((i, dropdown) => {
-      let collapsedSidebarLabelTemplate, milestoneLinkNoneTemplate, milestoneLinkTemplate, selectedMilestone, selectedMilestoneDefault;
+      let milestoneLinkNoneTemplate,
+        milestoneLinkTemplate,
+        selectedMilestone,
+        selectedMilestoneDefault;
       const $dropdown = $(dropdown);
       const projectId = $dropdown.data('projectId');
       const milestonesUrl = $dropdown.data('milestones');
@@ -44,46 +50,47 @@ export default class MilestoneSelect {
       const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
       const $value = $block.find('.value');
       const $loading = $block.find('.block-loading').fadeOut();
-      selectedMilestoneDefault = (showAny ? '' : null);
-      selectedMilestoneDefault = (showNo && defaultNo ? 'No Milestone' : selectedMilestoneDefault);
+      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>');
+        milestoneLinkTemplate = _.template(
+          '<a href="<%- web_url %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>',
+        );
         milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
-        collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- name %><br /><%- remaining %>" data-placement="left" data-html="true"> <%- title %> </span>');
       }
       return $dropdown.glDropdown({
         showMenuAbove: showMenuAbove,
-        data: (term, callback) => axios.get(milestonesUrl)
-          .then(({ data }) => {
+        data: (term, callback) =>
+          axios.get(milestonesUrl).then(({ data }) => {
             const extraOptions = [];
             if (showAny) {
               extraOptions.push({
-                id: 0,
-                name: '',
-                title: 'Any Milestone'
+                id: null,
+                name: null,
+                title: 'Any Milestone',
               });
             }
             if (showNo) {
               extraOptions.push({
                 id: -1,
                 name: 'No Milestone',
-                title: 'No Milestone'
+                title: 'No Milestone',
               });
             }
             if (showUpcoming) {
               extraOptions.push({
                 id: -2,
                 name: '#upcoming',
-                title: 'Upcoming'
+                title: 'Upcoming',
               });
             }
             if (showStarted) {
               extraOptions.push({
                 id: -3,
                 name: '#started',
-                title: 'Started'
+                title: 'Started',
               });
             }
             if (extraOptions.length) {
@@ -94,10 +101,10 @@ export default class MilestoneSelect {
             if (showMenuAbove) {
               $dropdown.data('glDropdown').positionMenuAbove();
             }
-            $(`[data-milestone-id="${selectedMilestone}"] > a`).addClass('is-active');
+            $(`[data-milestone-id="${_.escape(selectedMilestone)}"] > a`).addClass('is-active');
           }),
         renderRow: milestone => `
-          <li data-milestone-id="${milestone.name}">
+          <li data-milestone-id="${_.escape(milestone.name)}">
             <a href='#' class='dropdown-menu-milestone-link'>
               ${_.escape(milestone.title)}
             </a>
@@ -105,7 +112,7 @@ export default class MilestoneSelect {
         `,
         filterable: true,
         search: {
-          fields: ['title']
+          fields: ['title'],
         },
         selectable: true,
         toggleLabel: (selected, el, e) => {
@@ -118,29 +125,28 @@ export default class MilestoneSelect {
         defaultLabel: defaultLabel,
         fieldName: $dropdown.data('fieldName'),
         text: milestone => _.escape(milestone.title),
-        id: (milestone) => {
+        id: milestone => {
           if (!useId && !$dropdown.is('.js-issuable-form-dropdown')) {
             return milestone.name;
           } else {
             return milestone.id;
           }
         },
-        isSelected: milestone => milestone.name === selectedMilestone,
         hidden: () => {
           $selectBox.hide();
           // display:block overrides the hide-collapse rule
           return $value.css('display', '');
         },
-        opened: (e) => {
+        opened: e => {
           const $el = $(e.currentTarget);
           if ($dropdown.hasClass('js-issue-board-sidebar') || options.handleClick) {
             selectedMilestone = $dropdown[0].dataset.selected || selectedMilestoneDefault;
           }
           $('a.is-active', $el).removeClass('is-active');
-          $(`[data-milestone-id="${selectedMilestone}"] > a`, $el).addClass('is-active');
+          $(`[data-milestone-id="${_.escape(selectedMilestone)}"] > a`, $el).addClass('is-active');
         },
         vue: $dropdown.hasClass('js-issue-board-sidebar'),
-        clicked: (clickEvent) => {
+        clicked: clickEvent => {
           const { $el, e } = clickEvent;
           let selected = clickEvent.selectedObj;
 
@@ -155,16 +161,20 @@ export default class MilestoneSelect {
 
           const page = $('body').attr('data-page');
           const isIssueIndex = page === 'projects:issues:index';
-          const isMRIndex = (page === page && page === 'projects:merge_requests:index');
-          const isSelecting = (selected.name !== selectedMilestone);
+          const isMRIndex = page === page && page === 'projects:merge_requests:index';
+          const isSelecting = selected.name !== selectedMilestone;
           selectedMilestone = isSelecting ? selected.name : selectedMilestoneDefault;
-          if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
+
+          if (
+            $dropdown.hasClass('js-filter-bulk-update') ||
+            $dropdown.hasClass('js-issuable-form-dropdown')
+          ) {
             e.preventDefault();
             return;
           }
 
           if ($dropdown.closest('.add-issues-modal').length) {
-            boardsStore = gl.issueBoards.ModalStore.store.filter;
+            boardsStore = ModalStore.store.filter;
           }
 
           if (boardsStore) {
@@ -176,10 +186,13 @@ export default class MilestoneSelect {
             return $dropdown.closest('form').submit();
           } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
             if (selected.id !== -1 && isSelecting) {
-              gl.issueBoards.boardStoreIssueSet('milestone', new ListMilestone({
-                id: selected.id,
-                title: selected.name
-              }));
+              gl.issueBoards.boardStoreIssueSet(
+                'milestone',
+                new ListMilestone({
+                  id: selected.id,
+                  title: selected.name,
+                }),
+              );
             } else {
               gl.issueBoards.boardStoreIssueDelete('milestone');
             }
@@ -187,7 +200,8 @@ export default class MilestoneSelect {
             $dropdown.trigger('loading.gl.dropdown');
             $loading.removeClass('hidden').fadeIn();
 
-            gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
+            gl.issueBoards.BoardsStore.detail.issue
+              .update($dropdown.attr('data-issue-update'))
               .then(() => {
                 $dropdown.trigger('loaded.gl.dropdown');
                 $loading.fadeOut();
@@ -202,28 +216,37 @@ export default class MilestoneSelect {
             data[abilityName].milestone_id = selected != null ? selected : null;
             $loading.removeClass('hidden').fadeIn();
             $dropdown.trigger('loading.gl.dropdown');
-            return axios.put(issueUpdateURL, data)
+            return axios
+              .put(issueUpdateURL, data)
               .then(({ data }) => {
                 $dropdown.trigger('loaded.gl.dropdown');
                 $loading.fadeOut();
                 $selectBox.hide();
                 $value.css('display', '');
                 if (data.milestone != null) {
-                  data.milestone.full_path = this.currentProject.full_path;
                   data.milestone.remaining = timeFor(data.milestone.due_date);
                   data.milestone.name = data.milestone.title;
                   $value.html(milestoneLinkTemplate(data.milestone));
-                  return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
+                  return $sidebarCollapsedValue
+                    .attr(
+                      'data-original-title',
+                      `${data.milestone.name}<br />${data.milestone.remaining}`,
+                    )
+                    .find('span')
+                    .text(data.milestone.title);
                 } else {
                   $value.html(milestoneLinkNoneTemplate);
-                  return $sidebarCollapsedValue.find('span').text('No');
+                  return $sidebarCollapsedValue
+                    .attr('data-original-title', __('Milestone'))
+                    .find('span')
+                    .text(__('None'));
                 }
               })
               .catch(() => {
                 $loading.fadeOut();
               });
           }
-        }
+        },
       });
     });
   }
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
index 01399de4c62..f8257b6abab 100644
--- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
@@ -1,5 +1,3 @@
-/* eslint-disable no-new */
-
 import $ from 'jquery';
 import flash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -62,7 +60,7 @@ export default class MiniPipelineGraph {
    */
   renderBuildsList(stageContainer, data) {
     const dropdownContainer = stageContainer.parentElement.querySelector(
-      `${this.dropdownListSelector} .js-builds-dropdown-list`,
+      `${this.dropdownListSelector} .js-builds-dropdown-list ul`,
     );
 
     dropdownContainer.innerHTML = data;
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 10b3a4d2fee..e1c8b6a6d4a 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -1,162 +1,155 @@
 <script>
-  import _ from 'underscore';
-  import Flash from '../../flash';
-  import MonitoringService from '../services/monitoring_service';
-  import GraphGroup from './graph_group.vue';
-  import Graph from './graph.vue';
-  import EmptyState from './empty_state.vue';
-  import MonitoringStore from '../stores/monitoring_store';
-  import eventHub from '../event_hub';
+import _ from 'underscore';
+import Flash from '../../flash';
+import MonitoringService from '../services/monitoring_service';
+import GraphGroup from './graph_group.vue';
+import Graph from './graph.vue';
+import EmptyState from './empty_state.vue';
+import MonitoringStore from '../stores/monitoring_store';
+import eventHub from '../event_hub';
 
-  export default {
-    components: {
-      Graph,
-      GraphGroup,
-      EmptyState,
+export default {
+  components: {
+    Graph,
+    GraphGroup,
+    EmptyState,
+  },
+  props: {
+    hasMetrics: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-
-    props: {
-      hasMetrics: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      showLegend: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      showPanels: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      forceSmallGraph: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      documentationPath: {
-        type: String,
-        required: true,
-      },
-      settingsPath: {
-        type: String,
-        required: true,
-      },
-      clustersPath: {
-        type: String,
-        required: true,
-      },
-      tagsPath: {
-        type: String,
-        required: true,
-      },
-      projectPath: {
-        type: String,
-        required: true,
-      },
-      metricsEndpoint: {
-        type: String,
-        required: true,
-      },
-      deploymentEndpoint: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      emptyGettingStartedSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyLoadingSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyNoDataSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyUnableToConnectSvgPath: {
-        type: String,
-        required: true,
-      },
+    showLegend: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-
-    data() {
-      return {
-        store: new MonitoringStore(),
-        state: 'gettingStarted',
-        showEmptyState: true,
-        updateAspectRatio: false,
-        updatedAspectRatios: 0,
-        hoverData: {},
-        resizeThrottled: {},
-      };
+    showPanels: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-
-    created() {
-      this.service = new MonitoringService({
-        metricsEndpoint: this.metricsEndpoint,
-        deploymentEndpoint: this.deploymentEndpoint,
-      });
-      eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
-      eventHub.$on('hoverChanged', this.hoverChanged);
+    forceSmallGraph: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-
-    beforeDestroy() {
-      eventHub.$off('toggleAspectRatio', this.toggleAspectRatio);
-      eventHub.$off('hoverChanged', this.hoverChanged);
-      window.removeEventListener('resize', this.resizeThrottled, false);
+    documentationPath: {
+      type: String,
+      required: true,
     },
-
-    mounted() {
-      this.resizeThrottled = _.throttle(this.resize, 600);
-      if (!this.hasMetrics) {
-        this.state = 'gettingStarted';
-      } else {
-        this.getGraphsData();
-        window.addEventListener('resize', this.resizeThrottled, false);
+    settingsPath: {
+      type: String,
+      required: true,
+    },
+    clustersPath: {
+      type: String,
+      required: true,
+    },
+    tagsPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    metricsEndpoint: {
+      type: String,
+      required: true,
+    },
+    deploymentEndpoint: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    emptyGettingStartedSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyLoadingSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyNoDataSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyUnableToConnectSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      store: new MonitoringStore(),
+      state: 'gettingStarted',
+      showEmptyState: true,
+      updateAspectRatio: false,
+      updatedAspectRatios: 0,
+      hoverData: {},
+      resizeThrottled: {},
+    };
+  },
+  created() {
+    this.service = new MonitoringService({
+      metricsEndpoint: this.metricsEndpoint,
+      deploymentEndpoint: this.deploymentEndpoint,
+    });
+    eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
+    eventHub.$on('hoverChanged', this.hoverChanged);
+  },
+  beforeDestroy() {
+    eventHub.$off('toggleAspectRatio', this.toggleAspectRatio);
+    eventHub.$off('hoverChanged', this.hoverChanged);
+    window.removeEventListener('resize', this.resizeThrottled, false);
+  },
+  mounted() {
+    this.resizeThrottled = _.throttle(this.resize, 600);
+    if (!this.hasMetrics) {
+      this.state = 'gettingStarted';
+    } else {
+      this.getGraphsData();
+      window.addEventListener('resize', this.resizeThrottled, false);
+    }
+  },
+  methods: {
+    getGraphsData() {
+      this.state = 'loading';
+      Promise.all([
+        this.service.getGraphsData().then(data => this.store.storeMetrics(data)),
+        this.service
+          .getDeploymentData()
+          .then(data => this.store.storeDeploymentData(data))
+          .catch(() => new Flash('Error getting deployment information.')),
+      ])
+        .then(() => {
+          if (this.store.groups.length < 1) {
+            this.state = 'noData';
+            return;
+          }
+          this.showEmptyState = false;
+        })
+        .catch(() => {
+          this.state = 'unableToConnect';
+        });
+    },
+    resize() {
+      this.updateAspectRatio = true;
+    },
+    toggleAspectRatio() {
+      this.updatedAspectRatios += 1;
+      if (this.store.getMetricsCount() === this.updatedAspectRatios) {
+        this.updateAspectRatio = !this.updateAspectRatio;
+        this.updatedAspectRatios = 0;
       }
     },
-
-    methods: {
-      getGraphsData() {
-        this.state = 'loading';
-        Promise.all([
-          this.service.getGraphsData()
-            .then(data => this.store.storeMetrics(data)),
-          this.service.getDeploymentData()
-            .then(data => this.store.storeDeploymentData(data))
-            .catch(() => new Flash('Error getting deployment information.')),
-        ])
-          .then(() => {
-            if (this.store.groups.length < 1) {
-              this.state = 'noData';
-              return;
-            }
-            this.showEmptyState = false;
-          })
-          .catch(() => { this.state = 'unableToConnect'; });
-      },
-
-      resize() {
-        this.updateAspectRatio = true;
-      },
-
-      toggleAspectRatio() {
-        this.updatedAspectRatios = this.updatedAspectRatios += 1;
-        if (this.store.getMetricsCount() === this.updatedAspectRatios) {
-          this.updateAspectRatio = !this.updateAspectRatio;
-          this.updatedAspectRatios = 0;
-        }
-      },
-
-      hoverChanged(data) {
-        this.hoverData = data;
-      },
+    hoverChanged(data) {
+      this.hoverData = data;
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -181,7 +174,10 @@
         :tags-path="tagsPath"
         :show-legend="showLegend"
         :small-graph="forceSmallGraph"
-      />
+      >
+        <!-- EE content -->
+        {{ null }}
+      </graph>
     </graph-group>
   </div>
   <empty-state
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index fbf451fce68..82b9a4b1adb 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -1,91 +1,90 @@
 <script>
-  export default {
-    props: {
-      documentationPath: {
-        type: String,
-        required: true,
-      },
-      settingsPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      clustersPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      selectedState: {
-        type: String,
-        required: true,
-      },
-      emptyGettingStartedSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyLoadingSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyNoDataSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyUnableToConnectSvgPath: {
-        type: String,
-        required: true,
-      },
+export default {
+  props: {
+    documentationPath: {
+      type: String,
+      required: true,
+    },
+    settingsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    clustersPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    selectedState: {
+      type: String,
+      required: true,
+    },
+    emptyGettingStartedSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyLoadingSvgPath: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        states: {
-          gettingStarted: {
-            svgUrl: this.emptyGettingStartedSvgPath,
-            title: 'Get started with performance monitoring',
-            description: `Stay updated about the performance and health
+    emptyNoDataSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyUnableToConnectSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      states: {
+        gettingStarted: {
+          svgUrl: this.emptyGettingStartedSvgPath,
+          title: 'Get started with performance monitoring',
+          description: `Stay updated about the performance and health
               of your environment by configuring Prometheus to monitor your deployments.`,
-            buttonText: 'Install Prometheus on clusters',
-            buttonPath: this.clustersPath,
-            secondaryButtonText: 'Configure existing Prometheus',
-            secondaryButtonPath: this.settingsPath,
-          },
-          loading: {
-            svgUrl: this.emptyLoadingSvgPath,
-            title: 'Waiting for performance data',
-            description: `Creating graphs uses the data from the Prometheus server.
+          buttonText: 'Install Prometheus on clusters',
+          buttonPath: this.clustersPath,
+          secondaryButtonText: 'Configure existing Prometheus',
+          secondaryButtonPath: this.settingsPath,
+        },
+        loading: {
+          svgUrl: this.emptyLoadingSvgPath,
+          title: 'Waiting for performance data',
+          description: `Creating graphs uses the data from the Prometheus server.
               If this takes a long time, ensure that data is available.`,
-            buttonText: 'View documentation',
-            buttonPath: this.documentationPath,
-          },
-          noData: {
-            svgUrl: this.emptyNoDataSvgPath,
-            title: 'No data found',
-            description: `You are connected to the Prometheus server, but there is currently
+          buttonText: 'View documentation',
+          buttonPath: this.documentationPath,
+        },
+        noData: {
+          svgUrl: this.emptyNoDataSvgPath,
+          title: 'No data found',
+          description: `You are connected to the Prometheus server, but there is currently
               no data to display.`,
-            buttonText: 'Configure Prometheus',
-            buttonPath: this.settingsPath,
-          },
-          unableToConnect: {
-            svgUrl: this.emptyUnableToConnectSvgPath,
-            title: 'Unable to connect to Prometheus server',
-            description: 'Ensure connectivity is available from the GitLab server to the ',
-            buttonText: 'View documentation',
-            buttonPath: this.documentationPath,
-          },
+          buttonText: 'Configure Prometheus',
+          buttonPath: this.settingsPath,
+        },
+        unableToConnect: {
+          svgUrl: this.emptyUnableToConnectSvgPath,
+          title: 'Unable to connect to Prometheus server',
+          description: 'Ensure connectivity is available from the GitLab server to the ',
+          buttonText: 'View documentation',
+          buttonPath: this.documentationPath,
         },
-      };
-    },
-    computed: {
-      currentState() {
-        return this.states[this.selectedState];
-      },
-
-      showButtonDescription() {
-        if (this.selectedState === 'unableToConnect') return true;
-        return false;
       },
+    };
+  },
+  computed: {
+    currentState() {
+      return this.states[this.selectedState];
+    },
+    showButtonDescription() {
+      if (this.selectedState === 'unableToConnect') return true;
+      return false;
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -108,8 +107,8 @@
     <div class="state-button">
       <a
         v-if="currentState.buttonPath"
-        class="btn btn-success"
         :href="currentState.buttonPath"
+        class="btn btn-success"
       >
         {{ currentState.buttonText }}
       </a>
@@ -117,8 +116,8 @@
     <div class="state-button">
       <a
         v-if="currentState.secondaryButtonPath"
-        class="btn"
         :href="currentState.secondaryButtonPath"
+        class="btn"
       >
         {{ currentState.secondaryButtonText }}
       </a>
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 42615d2bb8e..e5680a0499f 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -1,236 +1,229 @@
 <script>
-  import { scaleLinear, scaleTime } from 'd3-scale';
-  import { axisLeft, axisBottom } from 'd3-axis';
-  import { max, extent } from 'd3-array';
-  import { select } from 'd3-selection';
-  import GraphLegend from './graph/legend.vue';
-  import GraphFlag from './graph/flag.vue';
-  import GraphDeployment from './graph/deployment.vue';
-  import GraphPath from './graph/path.vue';
-  import MonitoringMixin from '../mixins/monitoring_mixins';
-  import eventHub from '../event_hub';
-  import measurements from '../utils/measurements';
-  import { bisectDate, timeScaleFormat } from '../utils/date_time_formatters';
-  import createTimeSeries from '../utils/multiple_time_series';
-  import bp from '../../breakpoints';
+import { scaleLinear, scaleTime } from 'd3-scale';
+import { axisLeft, axisBottom } from 'd3-axis';
+import _ from 'underscore';
+import { max, extent } from 'd3-array';
+import { select } from 'd3-selection';
+import GraphAxis from './graph/axis.vue';
+import GraphLegend from './graph/legend.vue';
+import GraphFlag from './graph/flag.vue';
+import GraphDeployment from './graph/deployment.vue';
+import GraphPath from './graph/path.vue';
+import MonitoringMixin from '../mixins/monitoring_mixins';
+import eventHub from '../event_hub';
+import measurements from '../utils/measurements';
+import { bisectDate, timeScaleFormat } from '../utils/date_time_formatters';
+import createTimeSeries from '../utils/multiple_time_series';
+import bp from '../../breakpoints';
 
-  const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select };
+const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select };
 
-  export default {
-    components: {
-      GraphLegend,
-      GraphFlag,
-      GraphDeployment,
-      GraphPath,
+export default {
+  components: {
+    GraphAxis,
+    GraphFlag,
+    GraphDeployment,
+    GraphPath,
+    GraphLegend,
+  },
+  mixins: [MonitoringMixin],
+  props: {
+    graphData: {
+      type: Object,
+      required: true,
     },
-
-    mixins: [MonitoringMixin],
-
-    props: {
-      graphData: {
-        type: Object,
-        required: true,
-      },
-      updateAspectRatio: {
-        type: Boolean,
-        required: true,
-      },
-      deploymentData: {
-        type: Array,
-        required: true,
-      },
-      hoverData: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      projectPath: {
-        type: String,
-        required: true,
-      },
-      tagsPath: {
-        type: String,
-        required: true,
-      },
-      showLegend: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      smallGraph: {
-        type: Boolean,
-        required: false,
-        default: false,
+    updateAspectRatio: {
+      type: Boolean,
+      required: true,
+    },
+    deploymentData: {
+      type: Array,
+      required: true,
+    },
+    hoverData: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    tagsPath: {
+      type: String,
+      required: true,
+    },
+    showLegend: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    smallGraph: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      baseGraphHeight: 450,
+      baseGraphWidth: 600,
+      graphHeight: 450,
+      graphWidth: 600,
+      graphHeightOffset: 120,
+      margin: {},
+      unitOfDisplay: '',
+      yAxisLabel: '',
+      legendTitle: '',
+      reducedDeploymentData: [],
+      measurements: measurements.large,
+      currentData: {
+        time: new Date(),
+        value: 0,
       },
+      currentXCoordinate: 0,
+      currentCoordinates: [],
+      showFlag: false,
+      showFlagContent: false,
+      timeSeries: [],
+      realPixelRatio: 1,
+    };
+  },
+  computed: {
+    outerViewBox() {
+      return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
     },
-
-    data() {
+    innerViewBox() {
+      return `0 0 ${this.baseGraphWidth - 150} ${this.baseGraphHeight}`;
+    },
+    axisTransform() {
+      return `translate(70, ${this.graphHeight - 100})`;
+    },
+    paddingBottomRootSvg() {
       return {
-        baseGraphHeight: 450,
-        baseGraphWidth: 600,
-        graphHeight: 450,
-        graphWidth: 600,
-        graphHeightOffset: 120,
-        margin: {},
-        unitOfDisplay: '',
-        yAxisLabel: '',
-        legendTitle: '',
-        reducedDeploymentData: [],
-        measurements: measurements.large,
-        currentData: {
-          time: new Date(),
-          value: 0,
-        },
-        currentDataIndex: 0,
-        currentXCoordinate: 0,
-        currentFlagPosition: 0,
-        showFlag: false,
-        showFlagContent: false,
-        timeSeries: [],
-        realPixelRatio: 1,
+        paddingBottom: `${Math.ceil(this.baseGraphHeight * 100) / this.baseGraphWidth || 0}%`,
       };
     },
-
-    computed: {
-      outerViewBox() {
-        return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
-      },
-
-      innerViewBox() {
-        return `0 0 ${this.baseGraphWidth - 150} ${this.baseGraphHeight}`;
-      },
-
-      axisTransform() {
-        return `translate(70, ${this.graphHeight - 100})`;
-      },
-
-      paddingBottomRootSvg() {
-        return {
-          paddingBottom: `${(Math.ceil(this.baseGraphHeight * 100) / this.baseGraphWidth) || 0}%`,
-        };
-      },
-
-      deploymentFlagData() {
-        return this.reducedDeploymentData.find(deployment => deployment.showDeploymentFlag);
-      },
+    deploymentFlagData() {
+      return this.reducedDeploymentData.find(deployment => deployment.showDeploymentFlag);
     },
-
-    watch: {
-      updateAspectRatio() {
-        if (this.updateAspectRatio) {
-          this.graphHeight = 450;
-          this.graphWidth = 600;
-          this.measurements = measurements.large;
-          this.draw();
-          eventHub.$emit('toggleAspectRatio');
-        }
-      },
-
-      hoverData() {
-        this.positionFlag();
-      },
+  },
+  watch: {
+    updateAspectRatio() {
+      if (this.updateAspectRatio) {
+        this.graphHeight = 450;
+        this.graphWidth = 600;
+        this.measurements = measurements.large;
+        this.draw();
+        eventHub.$emit('toggleAspectRatio');
+      }
     },
-
-    mounted() {
-      this.draw();
+    hoverData() {
+      this.positionFlag();
     },
+  },
+  mounted() {
+    this.draw();
+  },
+  methods: {
+    draw() {
+      const breakpointSize = bp.getBreakpointSize();
+      const query = this.graphData.queries[0];
+      this.margin = measurements.large.margin;
+      if (this.smallGraph || breakpointSize === 'xs' || breakpointSize === 'sm') {
+        this.graphHeight = 300;
+        this.margin = measurements.small.margin;
+        this.measurements = measurements.small;
+      }
+      this.unitOfDisplay = query.unit || '';
+      this.yAxisLabel = this.graphData.y_label || 'Values';
+      this.legendTitle = query.label || 'Average';
+      this.graphWidth = this.$refs.baseSvg.clientWidth - this.margin.left - this.margin.right;
+      this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
+      this.baseGraphHeight = this.graphHeight - 50;
+      this.baseGraphWidth = this.graphWidth;
 
-    methods: {
-      draw() {
-        const breakpointSize = bp.getBreakpointSize();
-        const query = this.graphData.queries[0];
-        this.margin = measurements.large.margin;
-        if (this.smallGraph || breakpointSize === 'xs' || breakpointSize === 'sm') {
-          this.graphHeight = 300;
-          this.margin = measurements.small.margin;
-          this.measurements = measurements.small;
-        }
-        this.unitOfDisplay = query.unit || '';
-        this.yAxisLabel = this.graphData.y_label || 'Values';
-        this.legendTitle = query.label || 'Average';
-        this.graphWidth = this.$refs.baseSvg.clientWidth -
-                     this.margin.left - this.margin.right;
-        this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
-        this.baseGraphHeight = this.graphHeight;
-        this.baseGraphWidth = this.graphWidth;
-
-        // pixel offsets inside the svg and outside are not 1:1
-        this.realPixelRatio = (this.$refs.baseSvg.clientWidth / this.baseGraphWidth);
-
-        this.renderAxesPaths();
-        this.formatDeployments();
-      },
-
-      handleMouseOverGraph(e) {
-        let point = this.$refs.graphData.createSVGPoint();
-        point.x = e.clientX;
-        point.y = e.clientY;
-        point = point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
-        point.x = point.x += 7;
-        const firstTimeSeries = this.timeSeries[0];
-        const timeValueOverlay = firstTimeSeries.timeSeriesScaleX.invert(point.x);
-        const overlayIndex = bisectDate(firstTimeSeries.values, timeValueOverlay, 1);
-        const d0 = firstTimeSeries.values[overlayIndex - 1];
-        const d1 = firstTimeSeries.values[overlayIndex];
-        if (d0 === undefined || d1 === undefined) return;
-        const evalTime = timeValueOverlay - d0[0] > d1[0] - timeValueOverlay;
-        const hoveredDataIndex = evalTime ? overlayIndex : (overlayIndex - 1);
-        const hoveredDate = firstTimeSeries.values[hoveredDataIndex].time;
-        const currentDeployXPos = this.mouseOverDeployInfo(point.x);
+      // pixel offsets inside the svg and outside are not 1:1
+      this.realPixelRatio = this.$refs.baseSvg.clientWidth / this.baseGraphWidth;
 
-        eventHub.$emit('hoverChanged', {
-          hoveredDate,
-          currentDeployXPos,
-        });
-      },
+      this.renderAxesPaths();
+      this.formatDeployments();
+    },
+    handleMouseOverGraph(e) {
+      let point = this.$refs.graphData.createSVGPoint();
+      point.x = e.clientX;
+      point.y = e.clientY;
+      point = point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
+      point.x += 7;
+      const firstTimeSeries = this.timeSeries[0];
+      const timeValueOverlay = firstTimeSeries.timeSeriesScaleX.invert(point.x);
+      const overlayIndex = bisectDate(firstTimeSeries.values, timeValueOverlay, 1);
+      const d0 = firstTimeSeries.values[overlayIndex - 1];
+      const d1 = firstTimeSeries.values[overlayIndex];
+      if (d0 === undefined || d1 === undefined) return;
+      const evalTime = timeValueOverlay - d0[0] > d1[0] - timeValueOverlay;
+      const hoveredDataIndex = evalTime ? overlayIndex : overlayIndex - 1;
+      const hoveredDate = firstTimeSeries.values[hoveredDataIndex].time;
+      const currentDeployXPos = this.mouseOverDeployInfo(point.x);
 
-      renderAxesPaths() {
-        this.timeSeries = createTimeSeries(
-          this.graphData.queries,
-          this.graphWidth,
-          this.graphHeight,
-          this.graphHeightOffset,
-        );
+      eventHub.$emit('hoverChanged', {
+        hoveredDate,
+        currentDeployXPos,
+      });
+    },
+    renderAxesPaths() {
+      this.timeSeries = createTimeSeries(
+        this.graphData.queries,
+        this.graphWidth,
+        this.graphHeight,
+        this.graphHeightOffset,
+      );
 
-        if (!this.showLegend) {
-          this.baseGraphHeight -= 50;
-        } else if (this.timeSeries.length > 3) {
-          this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
-        }
+      if (_.findWhere(this.timeSeries, { renderCanary: true })) {
+        this.timeSeries = this.timeSeries.map(series => ({ ...series, renderCanary: true }));
+      }
 
-        const axisXScale = d3.scaleTime()
-          .range([0, this.graphWidth - 70]);
-        const axisYScale = d3.scaleLinear()
-          .range([this.graphHeight - this.graphHeightOffset, 0]);
+      const axisXScale = d3.scaleTime().range([0, this.graphWidth - 70]);
+      const axisYScale = d3.scaleLinear().range([this.graphHeight - this.graphHeightOffset, 0]);
 
-        const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []);
-        axisXScale.domain(d3.extent(allValues, d => d.time));
-        axisYScale.domain([0, d3.max(allValues.map(d => d.value))]);
+      const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []);
+      axisXScale.domain(d3.extent(allValues, d => d.time));
+      axisYScale.domain([0, d3.max(allValues.map(d => d.value))]);
 
-        const xAxis = d3.axisBottom()
-          .scale(axisXScale)
-          .ticks(this.graphWidth / 120)
-          .tickFormat(timeScaleFormat);
+      const xAxis = d3
+        .axisBottom()
+        .scale(axisXScale)
+        .ticks(this.graphWidth / 120)
+        .tickFormat(timeScaleFormat);
 
-        const yAxis = d3.axisLeft()
-          .scale(axisYScale)
-          .ticks(measurements.yTicks);
+      const yAxis = d3
+        .axisLeft()
+        .scale(axisYScale)
+        .ticks(measurements.yTicks);
 
-        d3.select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
+      d3
+        .select(this.$refs.baseSvg)
+        .select('.x-axis')
+        .call(xAxis);
 
-        const width = this.graphWidth;
-        d3.select(this.$refs.baseSvg).select('.y-axis').call(yAxis)
-          .selectAll('.tick')
-          .each(function createTickLines(d, i) {
-            if (i > 0) {
-              d3.select(this).select('line')
-                .attr('x2', width)
-                .attr('class', 'axis-tick');
-            } // Avoid adding the class to the first tick, to prevent coloring
-          }); // This will select all of the ticks once they're rendered
-      },
+      const width = this.graphWidth;
+      d3
+        .select(this.$refs.baseSvg)
+        .select('.y-axis')
+        .call(yAxis)
+        .selectAll('.tick')
+        .each(function createTickLines(d, i) {
+          if (i > 0) {
+            d3
+              .select(this)
+              .select('line')
+              .attr('x2', width)
+              .attr('class', 'axis-tick');
+          } // Avoid adding the class to the first tick, to prevent coloring
+        }); // This will select all of the ticks once they're rendered
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -239,41 +232,42 @@
     @mouseover="showFlagContent = true"
     @mouseleave="showFlagContent = false"
   >
-    <h5 class="text-center graph-title">
-      {{ graphData.title }}
-    </h5>
+    <div class="prometheus-graph-header">
+      <h5 class="prometheus-graph-title">
+        {{ graphData.title }}
+      </h5>
+      <div class="prometheus-graph-widgets">
+        <slot></slot>
+      </div>
+    </div>
     <div
-      class="prometheus-svg-container"
       :style="paddingBottomRootSvg"
+      class="prometheus-svg-container"
     >
       <svg
-        :viewBox="outerViewBox"
         ref="baseSvg"
+        :viewBox="outerViewBox"
       >
         <g
-          class="x-axis"
           :transform="axisTransform"
+          class="x-axis"
         />
         <g
           class="y-axis"
           transform="translate(70, 20)"
         />
-        <graph-legend
+        <graph-axis
           :graph-width="graphWidth"
           :graph-height="graphHeight"
           :margin="margin"
           :measurements="measurements"
-          :legend-title="legendTitle"
           :y-axis-label="yAxisLabel"
-          :time-series="timeSeries"
           :unit-of-display="unitOfDisplay"
-          :current-data-index="currentDataIndex"
-          :show-legend-group="showLegend"
         />
         <svg
-          class="graph-data"
-          :viewBox="innerViewBox"
           ref="graphData"
+          :viewBox="innerViewBox"
+          class="graph-data"
         >
           <graph-path
             v-for="(path, index) in timeSeries"
@@ -283,6 +277,9 @@
             :line-style="path.lineStyle"
             :line-color="path.lineColor"
             :area-color="path.areaColor"
+            :current-coordinates="currentCoordinates[index]"
+            :current-time-series-index="index"
+            :show-dot="showFlagContent"
           />
           <graph-deployment
             :deployment-data="reducedDeploymentData"
@@ -290,11 +287,11 @@
             :graph-height-offset="graphHeightOffset"
           />
           <rect
-            class="prometheus-graph-overlay"
+            ref="graphOverlay"
             :width="(graphWidth - 70)"
             :height="(graphHeight - 100)"
+            class="prometheus-graph-overlay"
             transform="translate(-5, 20)"
-            ref="graphOverlay"
             @mousemove="handleMouseOverGraph($event)"
           />
         </svg>
@@ -308,10 +305,15 @@
         :show-flag-content="showFlagContent"
         :time-series="timeSeries"
         :unit-of-display="unitOfDisplay"
-        :current-data-index="currentDataIndex"
         :legend-title="legendTitle"
         :deployment-flag-data="deploymentFlagData"
+        :current-coordinates="currentCoordinates"
       />
     </div>
+    <graph-legend
+      v-if="showLegend"
+      :legend-title="legendTitle"
+      :time-series="timeSeries"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue
new file mode 100644
index 00000000000..8a604a51eb2
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/graph/axis.vue
@@ -0,0 +1,142 @@
+<script>
+import { convertToSentenceCase } from '~/lib/utils/text_utility';
+import { s__ } from '~/locale';
+
+export default {
+  props: {
+    graphWidth: {
+      type: Number,
+      required: true,
+    },
+    graphHeight: {
+      type: Number,
+      required: true,
+    },
+    margin: {
+      type: Object,
+      required: true,
+    },
+    measurements: {
+      type: Object,
+      required: true,
+    },
+    yAxisLabel: {
+      type: String,
+      required: true,
+    },
+    unitOfDisplay: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      yLabelWidth: 0,
+      yLabelHeight: 0,
+    };
+  },
+  computed: {
+    textTransform() {
+      const yCoordinate =
+        (this.graphHeight -
+          this.margin.top +
+          this.measurements.axisLabelLineOffset) /
+          2 || 0;
+
+      return `translate(15, ${yCoordinate}) rotate(-90)`;
+    },
+
+    rectTransform() {
+      const yCoordinate =
+        (this.graphHeight -
+          this.margin.top +
+          this.measurements.axisLabelLineOffset) /
+          2 +
+          this.yLabelWidth / 2 || 0;
+
+      return `translate(0, ${yCoordinate}) rotate(-90)`;
+    },
+
+    xPosition() {
+      return (
+        (this.graphWidth + this.measurements.axisLabelLineOffset) / 2 -
+          this.margin.right || 0
+      );
+    },
+
+    yPosition() {
+      return (
+        this.graphHeight -
+          this.margin.top +
+          this.measurements.axisLabelLineOffset || 0
+      );
+    },
+
+    yAxisLabelSentenceCase() {
+      return `${convertToSentenceCase(this.yAxisLabel)} (${this.unitOfDisplay})`;
+    },
+
+    timeString() {
+      return s__('PrometheusDashboard|Time');
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const bbox = this.$refs.ylabel.getBBox();
+      this.yLabelWidth = bbox.width + 10; // Added some padding
+      this.yLabelHeight = bbox.height + 5;
+    });
+  },
+};
+</script>
+<template>
+  <g class="axis-label-container">
+    <line
+      :y1="yPosition"
+      :x2="graphWidth + 20"
+      :y2="yPosition"
+      class="label-x-axis-line"
+      stroke="#000000"
+      stroke-width="1"
+      x1="10"
+    />
+    <line
+      :x2="10"
+      :y2="yPosition"
+      class="label-y-axis-line"
+      stroke="#000000"
+      stroke-width="1"
+      x1="10"
+      y1="0"
+    />
+    <rect
+      :transform="rectTransform"
+      :width="yLabelWidth"
+      :height="yLabelHeight"
+      class="rect-axis-text"
+    />
+    <text
+      ref="ylabel"
+      :transform="textTransform"
+      class="label-axis-text y-label-text"
+      text-anchor="middle"
+    >
+      {{ yAxisLabelSentenceCase }}
+    </text>
+    <rect
+      :x="xPosition + 60"
+      :y="graphHeight - 80"
+      class="rect-axis-text"
+      width="35"
+      height="50"
+    />
+    <text
+      :x="xPosition + 60"
+      :y="yPosition"
+      class="label-axis-text x-label-text"
+      dy=".35em"
+    >
+      {{ timeString }}
+    </text>
+  </g>
+</template>
diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
index 98c25307b74..a7289ed53e8 100644
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue
@@ -1,32 +1,30 @@
 <script>
-  export default {
-    props: {
-      deploymentData: {
-        type: Array,
-        required: true,
-      },
-      graphHeight: {
-        type: Number,
-        required: true,
-      },
-      graphHeightOffset: {
-        type: Number,
-        required: true,
-      },
+export default {
+  props: {
+    deploymentData: {
+      type: Array,
+      required: true,
     },
-
-    computed: {
-      calculatedHeight() {
-        return this.graphHeight - this.graphHeightOffset;
-      },
+    graphHeight: {
+      type: Number,
+      required: true,
     },
-
-    methods: {
-      transformDeploymentGroup(deployment) {
-        return `translate(${Math.floor(deployment.xPos) - 5}, 20)`;
-      },
+    graphHeightOffset: {
+      type: Number,
+      required: true,
     },
-  };
+  },
+  computed: {
+    calculatedHeight() {
+      return this.graphHeight - this.graphHeightOffset;
+    },
+  },
+  methods: {
+    transformDeploymentGroup(deployment) {
+      return `translate(${Math.floor(deployment.xPos) - 5}, 20)`;
+    },
+  },
+};
 </script>
 <template>
   <g class="deploy-info">
@@ -35,18 +33,18 @@
       :key="index"
       :transform="transformDeploymentGroup(deployment)">
       <rect
+        :height="calculatedHeight"
         x="0"
         y="0"
-        :height="calculatedHeight"
         width="3"
         fill="url(#shadow-gradient)"
       />
       <line
+        :y2="calculatedHeight"
         class="deployment-line"
         x1="0"
         y1="0"
         x2="0"
-        :y2="calculatedHeight"
         stroke="#000"
       />
     </g>
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 07aa6a3e5de..92fe98508ad 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -1,145 +1,136 @@
 <script>
-  import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
-  import { formatRelevantDigits } from '../../../lib/utils/number_utils';
-  import icon from '../../../vue_shared/components/icon.vue';
+import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
+import { formatRelevantDigits } from '../../../lib/utils/number_utils';
+import Icon from '../../../vue_shared/components/icon.vue';
+import TrackLine from './track_line.vue';
 
-  export default {
-    components: {
-      icon,
-    },
-    props: {
-      currentXCoordinate: {
-        type: Number,
-        required: true,
-      },
-      currentData: {
-        type: Object,
-        required: true,
-      },
-      deploymentFlagData: {
-        type: Object,
-        required: false,
-        default: null,
-      },
-      graphHeight: {
-        type: Number,
-        required: true,
-      },
-      graphHeightOffset: {
-        type: Number,
-        required: true,
-      },
-      realPixelRatio: {
-        type: Number,
-        required: true,
-      },
-      showFlagContent: {
-        type: Boolean,
-        required: true,
-      },
-      timeSeries: {
-        type: Array,
-        required: true,
-      },
-      unitOfDisplay: {
-        type: String,
-        required: true,
-      },
-      currentDataIndex: {
-        type: Number,
-        required: true,
-      },
-      legendTitle: {
-        type: String,
-        required: true,
-      },
+export default {
+  components: {
+    Icon,
+    TrackLine,
+  },
+  props: {
+    currentXCoordinate: {
+      type: Number,
+      required: true,
     },
-
-    computed: {
-      formatTime() {
-        return this.deploymentFlagData ?
-          timeFormat(this.deploymentFlagData.time) :
-          timeFormat(this.currentData.time);
-      },
-
-      formatDate() {
-        return this.deploymentFlagData ?
-          dateFormat(this.deploymentFlagData.time) :
-          dateFormat(this.currentData.time);
-      },
-
-      cursorStyle() {
-        const xCoordinate = this.deploymentFlagData ?
-          this.deploymentFlagData.xPos :
-          this.currentXCoordinate;
-
-        const offsetTop = 20 * this.realPixelRatio;
-        const offsetLeft = (70 + xCoordinate) * this.realPixelRatio;
-        const height = (this.graphHeight - this.graphHeightOffset) * this.realPixelRatio;
-
-        return {
-          top: `${offsetTop}px`,
-          left: `${offsetLeft}px`,
-          height: `${height}px`,
-        };
-      },
-
-      flagOrientation() {
-        if (this.currentXCoordinate * this.realPixelRatio > 120) {
-          return 'left';
-        }
-        return 'right';
-      },
+    currentData: {
+      type: Object,
+      required: true,
     },
+    deploymentFlagData: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    graphHeight: {
+      type: Number,
+      required: true,
+    },
+    graphHeightOffset: {
+      type: Number,
+      required: true,
+    },
+    realPixelRatio: {
+      type: Number,
+      required: true,
+    },
+    showFlagContent: {
+      type: Boolean,
+      required: true,
+    },
+    timeSeries: {
+      type: Array,
+      required: true,
+    },
+    unitOfDisplay: {
+      type: String,
+      required: true,
+    },
+    legendTitle: {
+      type: String,
+      required: true,
+    },
+    currentCoordinates: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    formatTime() {
+      return this.deploymentFlagData
+        ? timeFormat(this.deploymentFlagData.time)
+        : timeFormat(this.currentData.time);
+    },
+    formatDate() {
+      return this.deploymentFlagData
+        ? dateFormat(this.deploymentFlagData.time)
+        : dateFormat(this.currentData.time);
+    },
+    cursorStyle() {
+      const xCoordinate = this.deploymentFlagData
+        ? this.deploymentFlagData.xPos
+        : this.currentXCoordinate;
 
-    methods: {
-      seriesMetricValue(series) {
-        const index = this.deploymentFlagData ?
-          this.deploymentFlagData.seriesIndex :
-          this.currentDataIndex;
-        const value = series.values[index] &&
-          series.values[index].value;
-        if (isNaN(value)) {
-          return '-';
-        }
-        return `${formatRelevantDigits(value)}${this.unitOfDisplay}`;
-      },
-
-      seriesMetricLabel(index, series) {
-        if (this.timeSeries.length < 2) {
-          return this.legendTitle;
-        }
-        if (series.metricTag) {
-          return series.metricTag;
-        }
-        return `series ${index + 1}`;
-      },
+      const offsetTop = 20 * this.realPixelRatio;
+      const offsetLeft = (70 + xCoordinate) * this.realPixelRatio;
+      const height = (this.graphHeight - this.graphHeightOffset) * this.realPixelRatio;
 
-      strokeDashArray(type) {
-        if (type === 'dashed') return '6, 3';
-        if (type === 'dotted') return '3, 3';
-        return null;
-      },
+      return {
+        top: `${offsetTop}px`,
+        left: `${offsetLeft}px`,
+        height: `${height}px`,
+      };
+    },
+    flagOrientation() {
+      if (this.currentXCoordinate * this.realPixelRatio > 120) {
+        return 'left';
+      }
+      return 'right';
     },
-  };
+  },
+  methods: {
+    seriesMetricValue(seriesIndex, series) {
+      const indexFromCoordinates = this.currentCoordinates[seriesIndex]
+      ? this.currentCoordinates[seriesIndex].currentDataIndex : 0;
+      const index = this.deploymentFlagData
+        ? this.deploymentFlagData.seriesIndex
+        : indexFromCoordinates;
+      const value = series.values[index] && series.values[index].value;
+      if (Number.isNaN(value)) {
+        return '-';
+      }
+      return `${formatRelevantDigits(value)}${this.unitOfDisplay}`;
+    },
+    seriesMetricLabel(index, series) {
+      if (this.timeSeries.length < 2) {
+        return this.legendTitle;
+      }
+      if (series.metricTag) {
+        return series.metricTag;
+      }
+      return `series ${index + 1}`;
+    },
+  },
+};
 </script>
 
 <template>
   <div
-    class="prometheus-graph-cursor"
     :style="cursorStyle"
+    class="prometheus-graph-cursor"
   >
     <div
       v-if="showFlagContent"
-      class="prometheus-graph-flag popover"
       :class="flagOrientation"
+      class="prometheus-graph-flag popover"
     >
       <div class="arrow"></div>
       <div class="popover-title">
         <h5 v-if="deploymentFlagData">
           Deployed
         </h5>
-        {{ formatDate }} at
+        {{ formatDate }}
         <strong>{{ formatTime }}</strong>
       </div>
       <div
@@ -148,8 +139,8 @@
       >
         <div>
           <icon
-            name="commit"
             :size="12"
+            name="commit"
           />
           <a :href="deploymentFlagData.commitUrl">
             {{ deploymentFlagData.sha.slice(0, 8) }}
@@ -159,8 +150,8 @@
           v-if="deploymentFlagData.tag"
         >
           <icon
-            name="label"
             :size="12"
+            name="label"
           />
           <a :href="deploymentFlagData.tagUrl">
             {{ deploymentFlagData.ref }}
@@ -168,30 +159,17 @@
         </div>
       </div>
       <div class="popover-content">
-        <table>
+        <table class="prometheus-table">
           <tr
             v-for="(series, index) in timeSeries"
             :key="index"
           >
+            <track-line :track="series"/>
             <td>
-              <svg
-                width="15"
-                height="6"
-              >
-                <line
-                  :stroke="series.lineColor"
-                  :stroke-dasharray="strokeDashArray(series.lineStyle)"
-                  stroke-width="4"
-                  x1="0"
-                  x2="15"
-                  y1="2"
-                  y2="2"
-                />
-              </svg>
+              {{ series.track }} {{ seriesMetricLabel(index, series) }}
             </td>
-            <td>{{ seriesMetricLabel(index, series) }}</td>
             <td>
-              <strong>{{ seriesMetricValue(series) }}</strong>
+              <strong>{{ seriesMetricValue(index, series) }}</strong>
             </td>
           </tr>
         </table>
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index 3149397b61f..3276f3a1ceb 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -1,212 +1,72 @@
 <script>
-  import { formatRelevantDigits } from '../../../lib/utils/number_utils';
+import TrackLine from './track_line.vue';
+import TrackInfo from './track_info.vue';
 
-  export default {
-    props: {
-      graphWidth: {
-        type: Number,
-        required: true,
-      },
-      graphHeight: {
-        type: Number,
-        required: true,
-      },
-      margin: {
-        type: Object,
-        required: true,
-      },
-      measurements: {
-        type: Object,
-        required: true,
-      },
-      legendTitle: {
-        type: String,
-        required: true,
-      },
-      yAxisLabel: {
-        type: String,
-        required: true,
-      },
-      timeSeries: {
-        type: Array,
-        required: true,
-      },
-      unitOfDisplay: {
-        type: String,
-        required: true,
-      },
-      currentDataIndex: {
-        type: Number,
-        required: true,
-      },
-      showLegendGroup: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+export default {
+  components: {
+    TrackLine,
+    TrackInfo,
+  },
+  props: {
+    legendTitle: {
+      type: String,
+      required: true,
     },
-    data() {
+    timeSeries: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    isStable(track) {
       return {
-        yLabelWidth: 0,
-        yLabelHeight: 0,
-        seriesXPosition: 0,
-        metricUsageXPosition: 0,
+        'prometheus-table-row-highlight': track.trackName !== 'Canary' && track.renderCanary,
       };
     },
-    computed: {
-      textTransform() {
-        const yCoordinate = (((this.graphHeight - this.margin.top)
-                          + this.measurements.axisLabelLineOffset) / 2) || 0;
-
-        return `translate(15, ${yCoordinate}) rotate(-90)`;
-      },
-
-      rectTransform() {
-        const yCoordinate = (((this.graphHeight - this.margin.top)
-                            + this.measurements.axisLabelLineOffset) / 2)
-                            + (this.yLabelWidth / 2) || 0;
-
-        return `translate(0, ${yCoordinate}) rotate(-90)`;
-      },
-
-      xPosition() {
-        return (((this.graphWidth + this.measurements.axisLabelLineOffset) / 2)
-               - this.margin.right) || 0;
-      },
-
-      yPosition() {
-        return ((this.graphHeight - this.margin.top) + this.measurements.axisLabelLineOffset) || 0;
-      },
-
-    },
-    mounted() {
-      this.$nextTick(() => {
-        const bbox = this.$refs.ylabel.getBBox();
-        this.metricUsageXPosition = 0;
-        this.seriesXPosition = 0;
-        if (this.$refs.legendTitleSvg != null) {
-          this.seriesXPosition = this.$refs.legendTitleSvg[0].getBBox().width;
-        }
-        if (this.$refs.seriesTitleSvg != null) {
-          this.metricUsageXPosition = this.$refs.seriesTitleSvg[0].getBBox().width;
-        }
-        this.yLabelWidth = bbox.width + 10; // Added some padding
-        this.yLabelHeight = bbox.height + 5;
-      });
-    },
-    methods: {
-      translateLegendGroup(index) {
-        return `translate(0, ${12 * (index)})`;
-      },
-
-      formatMetricUsage(series) {
-        const value = series.values[this.currentDataIndex] &&
-          series.values[this.currentDataIndex].value;
-        if (isNaN(value)) {
-          return '-';
-        }
-        return `${formatRelevantDigits(value)} ${this.unitOfDisplay}`;
-      },
-
-      createSeriesString(index, series) {
-        if (series.metricTag) {
-          return `${series.metricTag} ${this.formatMetricUsage(series)}`;
-        }
-        return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(series)}`;
-      },
-
-      strokeDashArray(type) {
-        if (type === 'dashed') return '6, 3';
-        if (type === 'dotted') return '3, 3';
-        return null;
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
-  <g class="axis-label-container">
-    <line
-      class="label-x-axis-line"
-      stroke="#000000"
-      stroke-width="1"
-      x1="10"
-      :y1="yPosition"
-      :x2="graphWidth + 20"
-      :y2="yPosition"
-    />
-    <line
-      class="label-y-axis-line"
-      stroke="#000000"
-      stroke-width="1"
-      x1="10"
-      y1="0"
-      :x2="10"
-      :y2="yPosition"
-    />
-    <rect
-      class="rect-axis-text"
-      :transform="rectTransform"
-      :width="yLabelWidth"
-      :height="yLabelHeight"
-    />
-    <text
-      class="label-axis-text y-label-text"
-      text-anchor="middle"
-      :transform="textTransform"
-      ref="ylabel"
-    >
-      {{ yAxisLabel }}
-    </text>
-    <rect
-      class="rect-axis-text"
-      :x="xPosition + 60"
-      :y="graphHeight - 80"
-      width="35"
-      height="50"
-    />
-    <text
-      class="label-axis-text x-label-text"
-      :x="xPosition + 60"
-      :y="yPosition"
-      dy=".35em"
-    >
-      Time
-    </text>
-    <template v-if="showLegendGroup">
-      <g
-        class="legend-group"
+  <div class="prometheus-graph-legends prepend-left-10">
+    <table class="prometheus-table">
+      <tr
         v-for="(series, index) in timeSeries"
+        v-if="series.shouldRenderLegend"
         :key="index"
-        :transform="translateLegendGroup(index)"
+        :class="isStable(series)"
       >
-        <line
-          :stroke="series.lineColor"
-          :stroke-width="measurements.legends.height"
-          :stroke-dasharray="strokeDashArray(series.lineStyle)"
-          :x1="measurements.legends.offsetX"
-          :x2="measurements.legends.offsetX + measurements.legends.width"
-          :y1="graphHeight - measurements.legends.offsetY"
-          :y2="graphHeight - measurements.legends.offsetY"
-        />
-        <text
+        <td>
+          <strong v-if="series.renderCanary">{{ series.trackName }}</strong>
+        </td>
+        <track-line :track="series" />
+        <td
           v-if="timeSeries.length > 1"
-          class="legend-metric-title"
-          ref="legendTitleSvg"
-          x="38"
-          :y="graphHeight - 30"
-        >
-          {{ createSeriesString(index, series) }}
-        </text>
-        <text
-          v-else
-          class="legend-metric-title"
-          ref="legendTitleSvg"
-          x="38"
-          :y="graphHeight - 30"
-        >
-          {{ legendTitle }} {{ formatMetricUsage(series) }}
-        </text>
-      </g>
-    </template>
-  </g>
+          class="legend-metric-title">
+          <track-info
+            v-if="series.metricTag"
+            :track="series" />
+          <track-info
+            v-else
+            :track="series">
+            <strong>{{ legendTitle }}</strong> series {{ index + 1 }}
+          </track-info>
+        </td>
+        <td v-else>
+          <track-info :track="series">
+            <strong>{{ legendTitle }}</strong>
+          </track-info>
+        </td>
+        <template v-for="(track, trackIndex) in series.tracksLegend">
+          <track-line
+            :track="track"
+            :key="`track-line-${trackIndex}`"/>
+          <td :key="`track-info-${trackIndex}`">
+            <track-info
+              :track="track"
+              class="legend-metric-title" />
+          </td>
+        </template>
+      </tr>
+    </table>
+  </div>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/graph/path.vue b/app/assets/javascripts/monitoring/components/graph/path.vue
index c9721c4cb01..a9b7ce586ce 100644
--- a/app/assets/javascripts/monitoring/components/graph/path.vue
+++ b/app/assets/javascripts/monitoring/components/graph/path.vue
@@ -1,53 +1,69 @@
 <script>
-  export default {
-    props: {
-      generatedLinePath: {
-        type: String,
-        required: true,
-      },
-      generatedAreaPath: {
-        type: String,
-        required: true,
-      },
-      lineStyle: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      lineColor: {
-        type: String,
-        required: true,
-      },
-      areaColor: {
-        type: String,
-        required: true,
-      },
-    },
-    computed: {
-      strokeDashArray() {
-        if (this.lineStyle === 'dashed') return '3, 1';
-        if (this.lineStyle === 'dotted') return '1, 1';
-        return null;
-      },
-    },
-  };
+export default {
+  props: {
+    generatedLinePath: {
+      type: String,
+      required: true,
+    },
+    generatedAreaPath: {
+      type: String,
+      required: true,
+    },
+    lineStyle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    lineColor: {
+      type: String,
+      required: true,
+    },
+    areaColor: {
+      type: String,
+      required: true,
+    },
+    currentCoordinates: {
+      type: Object,
+      required: false,
+      default: () => ({ currentX: 0, currentY: 0 }),
+    },
+    showDot: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    strokeDashArray() {
+      if (this.lineStyle === 'dashed') return '3, 1';
+      if (this.lineStyle === 'dotted') return '1, 1';
+      return null;
+    },
+  },
+};
 </script>
 <template>
-  <g>
+  <g transform="translate(-5, 20)">
+    <circle
+      v-if="showDot"
+      :cx="currentCoordinates.currentX"
+      :cy="currentCoordinates.currentY"
+      :fill="lineColor"
+      :stroke="lineColor"
+      class="circle-path"
+      r="3"
+    />
     <path
-      class="metric-area"
       :d="generatedAreaPath"
       :fill="areaColor"
-      transform="translate(-5, 20)"
+      class="metric-area"
     />
     <path
-      class="metric-line"
       :d="generatedLinePath"
       :stroke="lineColor"
+      :stroke-dasharray="strokeDashArray"
+      class="metric-line"
       fill="none"
       stroke-width="1"
-      :stroke-dasharray="strokeDashArray"
-      transform="translate(-5, 20)"
     />
   </g>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/graph/track_info.vue b/app/assets/javascripts/monitoring/components/graph/track_info.vue
new file mode 100644
index 00000000000..ec1c2222af9
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/graph/track_info.vue
@@ -0,0 +1,29 @@
+<script>
+import { formatRelevantDigits } from '~/lib/utils/number_utils';
+
+export default {
+  name: 'TrackInfo',
+  props: {
+    track: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    summaryMetrics() {
+      return `Avg: ${formatRelevantDigits(this.track.average)} · Max: ${formatRelevantDigits(
+        this.track.max,
+      )}`;
+    },
+  },
+};
+</script>
+<template>
+  <span>
+    <slot>
+      <strong> {{ track.metricTag }} </strong>
+    </slot>
+    {{ summaryMetrics }}
+  </span>
+</template>
+
diff --git a/app/assets/javascripts/monitoring/components/graph/track_line.vue b/app/assets/javascripts/monitoring/components/graph/track_line.vue
new file mode 100644
index 00000000000..ba3f93b39ff
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/graph/track_line.vue
@@ -0,0 +1,36 @@
+<script>
+export default {
+  name: 'TrackLine',
+  props: {
+    track: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    stylizedLine() {
+      if (this.track.lineStyle === 'dashed') return '6, 3';
+      if (this.track.lineStyle === 'dotted') return '3, 3';
+      return null;
+    },
+  },
+};
+</script>
+<template>
+  <td>
+    <svg
+      width="16"
+      height="8">
+      <line
+        :stroke-dasharray="stylizedLine"
+        :stroke="track.lineColor"
+        :x1="0"
+        :x2="16"
+        :y1="4"
+        :y2="4"
+        stroke-width="4"
+      />
+    </svg>
+  </td>
+</template>
+
diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
index f71cf614552..241627f9790 100644
--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -1,28 +1,28 @@
 <script>
-  export default {
-    props: {
-      name: {
-        type: String,
-        required: true,
-      },
-      showPanels: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
     },
-  };
+    showPanels: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+};
 </script>
 
 <template>
   <div
     v-if="showPanels"
-    class="panel panel-default prometheus-panel"
+    class="card prometheus-panel"
   >
-    <div class="panel-heading">
+    <div class="card-header">
       <h4>{{ name }}</h4>
     </div>
-    <div class="panel-body prometheus-graph-group">
+    <div class="card-body prometheus-graph-group">
       <slot></slot>
     </div>
   </div>
diff --git a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
index 6cc67ba57ee..4f23814ff3e 100644
--- a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
+++ b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
@@ -52,14 +52,22 @@ const mixins = {
     positionFlag() {
       const timeSeries = this.timeSeries[0];
       const hoveredDataIndex = bisectDate(timeSeries.values, this.hoverData.hoveredDate, 1);
+
       this.currentData = timeSeries.values[hoveredDataIndex];
-      this.currentDataIndex = hoveredDataIndex;
       this.currentXCoordinate = Math.floor(timeSeries.timeSeriesScaleX(this.currentData.time));
-      if (this.currentXCoordinate > (this.graphWidth - 200)) {
-        this.currentFlagPosition = this.currentXCoordinate - 103;
-      } else {
-        this.currentFlagPosition = this.currentXCoordinate;
-      }
+
+      this.currentCoordinates = this.timeSeries.map((series) => {
+        const currentDataIndex = bisectDate(series.values, this.hoverData.hoveredDate, 1);
+        const currentData = series.values[currentDataIndex];
+        const currentX = Math.floor(series.timeSeriesScaleX(currentData.time));
+        const currentY = Math.floor(series.timeSeriesScaleY(currentData.value));
+
+        return {
+          currentX,
+          currentY,
+          currentDataIndex,
+        };
+      });
 
       if (this.hoverData.currentDeployXPos) {
         this.showFlag = false;
diff --git a/app/assets/javascripts/monitoring/stores/monitoring_store.js b/app/assets/javascripts/monitoring/stores/monitoring_store.js
index 854636e9a89..535c415cd6d 100644
--- a/app/assets/javascripts/monitoring/stores/monitoring_store.js
+++ b/app/assets/javascripts/monitoring/stores/monitoring_store.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 
 function sortMetrics(metrics) {
-  return _.chain(metrics).sortBy('weight').sortBy('title').value();
+  return _.chain(metrics).sortBy('title').sortBy('weight').value();
 }
 
 function normalizeMetrics(metrics) {
diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
index f3c9acdd93e..d88c13609dc 100644
--- a/app/assets/javascripts/monitoring/utils/date_time_formatters.js
+++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
@@ -14,7 +14,7 @@ const d3 = {
   timeYear,
 };
 
-export const dateFormat = d3.time('%a, %b %-d');
+export const dateFormat = d3.time('%d %b %Y, ');
 export const timeFormat = d3.time('%-I:%M%p');
 export const dateFormatWithName = d3.time('%a, %b %-d');
 export const bisectDate = d3.bisector(d => d.time).left;
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index b5b8e3c255d..cee39fd0559 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -1,10 +1,21 @@
 import _ from 'underscore';
 import { scaleLinear, scaleTime } from 'd3-scale';
 import { line, area, curveLinear } from 'd3-shape';
-import { extent, max } from 'd3-array';
+import { extent, max, sum } from 'd3-array';
 import { timeMinute } from 'd3-time';
-
-const d3 = { scaleLinear, scaleTime, line, area, curveLinear, extent, max, timeMinute };
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+
+const d3 = {
+  scaleLinear,
+  scaleTime,
+  line,
+  area,
+  curveLinear,
+  extent,
+  max,
+  timeMinute,
+  sum,
+};
 
 const defaultColorPalette = {
   blue: ['#1f78d1', '#8fbce8'],
@@ -20,6 +31,8 @@ const defaultStyleOrder = ['solid', 'dashed', 'dotted'];
 
 function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle) {
   let usedColors = [];
+  let renderCanary = false;
+  const timeSeriesParsed = [];
 
   function pickColor(name) {
     let pick;
@@ -28,40 +41,49 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
     } else {
       const unusedColors = _.difference(defaultColorOrder, usedColors);
       if (unusedColors.length > 0) {
-        pick = unusedColors[0];
+        [pick] = unusedColors;
       } else {
         usedColors = [];
-        pick = defaultColorOrder[0];
+        [pick] = defaultColorOrder;
       }
     }
     usedColors.push(pick);
     return defaultColorPalette[pick];
   }
 
-  return query.result.map((timeSeries, timeSeriesNumber) => {
+  query.result.forEach((timeSeries, timeSeriesNumber) => {
     let metricTag = '';
     let lineColor = '';
     let areaColor = '';
+    let shouldRenderLegend = true;
+    const timeSeriesValues = timeSeries.values.map(d => d.value);
+    const maximumValue = d3.max(timeSeriesValues);
+    const accum = d3.sum(timeSeriesValues);
+    const trackName = capitalizeFirstCharacter(query.track ? query.track : 'Stable');
+
+    if (trackName === 'Canary') {
+      renderCanary = true;
+    }
 
-    const timeSeriesScaleX = d3.scaleTime()
-      .range([0, graphWidth - 70]);
+    const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth - 70]);
 
-    const timeSeriesScaleY = d3.scaleLinear()
-      .range([graphHeight - graphHeightOffset, 0]);
+    const timeSeriesScaleY = d3.scaleLinear().range([graphHeight - graphHeightOffset, 0]);
 
     timeSeriesScaleX.domain(xDom);
     timeSeriesScaleX.ticks(d3.timeMinute, 60);
     timeSeriesScaleY.domain(yDom);
 
-    const defined = d => !isNaN(d.value) && d.value != null;
+    const defined = d => !Number.isNaN(d.value) && d.value != null;
 
-    const lineFunction = d3.line()
+    const lineFunction = d3
+      .line()
       .defined(defined)
       .curve(d3.curveLinear) // d3 v4 uses curbe instead of interpolate
       .x(d => timeSeriesScaleX(d.time))
       .y(d => timeSeriesScaleY(d.value));
 
-    const areaFunction = d3.area()
+    const areaFunction = d3
+      .area()
       .defined(defined)
       .curve(d3.curveLinear)
       .x(d => timeSeriesScaleX(d.time))
@@ -69,38 +91,63 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
       .y1(d => timeSeriesScaleY(d.value));
 
     const timeSeriesMetricLabel = timeSeries.metric[Object.keys(timeSeries.metric)[0]];
-    const seriesCustomizationData = query.series != null &&
-      _.findWhere(query.series[0].when, { value: timeSeriesMetricLabel });
+    const seriesCustomizationData =
+      query.series != null && _.findWhere(query.series[0].when, { value: timeSeriesMetricLabel });
 
     if (seriesCustomizationData) {
       metricTag = seriesCustomizationData.value || timeSeriesMetricLabel;
       [lineColor, areaColor] = pickColor(seriesCustomizationData.color);
+      shouldRenderLegend = false;
     } else {
       metricTag = timeSeriesMetricLabel || query.label || `series ${timeSeriesNumber + 1}`;
       [lineColor, areaColor] = pickColor();
+      if (timeSeriesParsed.length > 1) {
+        shouldRenderLegend = false;
+      }
     }
 
-    if (query.track) {
-      metricTag += ` - ${query.track}`;
+    if (!shouldRenderLegend) {
+      if (!timeSeriesParsed[0].tracksLegend) {
+        timeSeriesParsed[0].tracksLegend = [];
+      }
+      timeSeriesParsed[0].tracksLegend.push({
+        max: maximumValue,
+        average: accum / timeSeries.values.length,
+        lineStyle,
+        lineColor,
+        metricTag,
+      });
     }
 
-    return {
+    timeSeriesParsed.push({
       linePath: lineFunction(timeSeries.values),
       areaPath: areaFunction(timeSeries.values),
       timeSeriesScaleX,
+      timeSeriesScaleY,
       values: timeSeries.values,
+      max: maximumValue,
+      average: accum / timeSeries.values.length,
       lineStyle,
       lineColor,
       areaColor,
       metricTag,
-    };
+      trackName,
+      shouldRenderLegend,
+      renderCanary,
+    });
   });
+
+  return timeSeriesParsed;
 }
 
 export default function createTimeSeries(queries, graphWidth, graphHeight, graphHeightOffset) {
-  const allValues = queries.reduce((allQueryResults, query) => allQueryResults.concat(
-    query.result.reduce((allResults, result) => allResults.concat(result.values), []),
-  ), []);
+  const allValues = queries.reduce(
+    (allQueryResults, query) =>
+      allQueryResults.concat(
+        query.result.reduce((allResults, result) => allResults.concat(result.values), []),
+      ),
+    [],
+  );
 
   const xDom = d3.extent(allValues, d => d.time);
   const yDom = [0, d3.max(allValues.map(d => d.value))];
diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js
index 096c4ef5f31..3c0c9995cc2 100644
--- a/app/assets/javascripts/mr_notes/index.js
+++ b/app/assets/javascripts/mr_notes/index.js
@@ -1,30 +1,75 @@
+import $ from 'jquery';
 import Vue from 'vue';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import initDiffsApp from '../diffs';
 import notesApp from '../notes/components/notes_app.vue';
 import discussionCounter from '../notes/components/discussion_counter.vue';
-import store from '../notes/stores';
+import store from './stores';
+import MergeRequest from '../merge_request';
 
 export default function initMrNotes() {
+  const mrShowNode = document.querySelector('.merge-request');
+  // eslint-disable-next-line no-new
+  new MergeRequest({
+    action: mrShowNode.dataset.mrAction,
+  });
+
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-vue-mr-discussions',
+    name: 'MergeRequestDiscussions',
     components: {
       notesApp,
     },
+    store,
     data() {
-      const notesDataset = document.getElementById('js-vue-mr-discussions')
-        .dataset;
+      const notesDataset = document.getElementById('js-vue-mr-discussions').dataset;
+      const noteableData = JSON.parse(notesDataset.noteableData);
+      noteableData.noteableType = notesDataset.noteableType;
+      noteableData.targetType = notesDataset.targetType;
+
       return {
-        noteableData: JSON.parse(notesDataset.noteableData),
+        noteableData,
         currentUserData: JSON.parse(notesDataset.currentUserData),
         notesData: JSON.parse(notesDataset.notesData),
       };
     },
+    computed: {
+      ...mapGetters(['discussionTabCounter']),
+      ...mapState({
+        activeTab: state => state.page.activeTab,
+      }),
+    },
+    watch: {
+      discussionTabCounter() {
+        this.updateDiscussionTabCounter();
+      },
+    },
+    mounted() {
+      this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge');
+      this.setActiveTab(window.mrTabs.getCurrentAction());
+
+      window.mrTabs.eventHub.$on('MergeRequestTabChange', tab => {
+        this.setActiveTab(tab);
+      });
+      $(document).on('visibilitychange', this.updateDiscussionTabCounter);
+    },
+    beforeDestroy() {
+      $(document).off('visibilitychange', this.updateDiscussionTabCounter);
+    },
+    methods: {
+      ...mapActions(['setActiveTab']),
+      updateDiscussionTabCounter() {
+        this.notesCountBadge.text(this.discussionTabCounter);
+      },
+    },
     render(createElement) {
       return createElement('notes-app', {
         props: {
           noteableData: this.noteableData,
           notesData: this.notesData,
           userData: this.currentUserData,
+          shouldShow: this.activeTab === 'show',
         },
       });
     },
@@ -33,6 +78,7 @@ export default function initMrNotes() {
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-vue-discussion-counter',
+    name: 'DiscussionCounter',
     components: {
       discussionCounter,
     },
@@ -41,4 +87,6 @@ export default function initMrNotes() {
       return createElement('discussion-counter');
     },
   });
+
+  initDiffsApp(store);
 }
diff --git a/app/assets/javascripts/mr_notes/stores/actions.js b/app/assets/javascripts/mr_notes/stores/actions.js
new file mode 100644
index 00000000000..426c6a00d5e
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/actions.js
@@ -0,0 +1,7 @@
+import types from './mutation_types';
+
+export default {
+  setActiveTab({ commit }, tab) {
+    commit(types.SET_ACTIVE_TAB, tab);
+  },
+};
diff --git a/app/assets/javascripts/mr_notes/stores/getters.js b/app/assets/javascripts/mr_notes/stores/getters.js
new file mode 100644
index 00000000000..b10e9f9f9f1
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/getters.js
@@ -0,0 +1,5 @@
+export default {
+  isLoggedIn(state, getters) {
+    return !!getters.getUserData.id;
+  },
+};
diff --git a/app/assets/javascripts/mr_notes/stores/index.js b/app/assets/javascripts/mr_notes/stores/index.js
new file mode 100644
index 00000000000..dd2019001db
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import notesModule from '~/notes/stores/modules';
+import diffsModule from '~/diffs/store/modules';
+import mrPageModule from './modules';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  modules: {
+    page: mrPageModule,
+    notes: notesModule,
+    diffs: diffsModule,
+  },
+});
diff --git a/app/assets/javascripts/mr_notes/stores/modules/index.js b/app/assets/javascripts/mr_notes/stores/modules/index.js
new file mode 100644
index 00000000000..660081f76c8
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/modules/index.js
@@ -0,0 +1,12 @@
+import actions from '../actions';
+import getters from '../getters';
+import mutations from '../mutations';
+
+export default {
+  state: {
+    activeTab: null,
+  },
+  actions,
+  getters,
+  mutations,
+};
diff --git a/app/assets/javascripts/mr_notes/stores/mutation_types.js b/app/assets/javascripts/mr_notes/stores/mutation_types.js
new file mode 100644
index 00000000000..105104361cf
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/mutation_types.js
@@ -0,0 +1,3 @@
+export default {
+  SET_ACTIVE_TAB: 'SET_ACTIVE_TAB',
+};
diff --git a/app/assets/javascripts/mr_notes/stores/mutations.js b/app/assets/javascripts/mr_notes/stores/mutations.js
new file mode 100644
index 00000000000..8175aa9488f
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/mutations.js
@@ -0,0 +1,7 @@
+import types from './mutation_types';
+
+export default {
+  [types.SET_ACTIVE_TAB](state, tab) {
+    Object.assign(state, { activeTab: tab });
+  },
+};
diff --git a/app/assets/javascripts/namespace_select.js b/app/assets/javascripts/namespace_select.js
index c7a8aac79df..17370edeb0c 100644
--- a/app/assets/javascripts/namespace_select.js
+++ b/app/assets/javascripts/namespace_select.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, prefer-arrow-callback, max-len */
+/* eslint-disable func-names, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, prefer-arrow-callback, max-len */
 
 import $ from 'jquery';
 import Api from './api';
diff --git a/app/assets/javascripts/network/branch_graph.js b/app/assets/javascripts/network/branch_graph.js
index bd007c707f2..94da1be4066 100644
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, quotes, comma-dangle, one-var, one-var-declaration-per-line, no-mixed-operators, no-loop-func, no-floating-decimal, consistent-return, no-unused-vars, prefer-template, prefer-arrow-callback, camelcase, max-len */
+/* eslint-disable func-names, no-var, wrap-iife, quotes, comma-dangle, one-var, one-var-declaration-per-line, no-loop-func, no-floating-decimal, consistent-return, no-unused-vars, prefer-template, prefer-arrow-callback, camelcase, max-len */
 
 import $ from 'jquery';
 import { __ } from '../locale';
@@ -101,8 +101,8 @@ export default (function() {
   };
 
   BranchGraph.prototype.buildGraph = function() {
-    var cuday, cumonth, day, j, len, mm, r, ref;
-    r = this.r;
+    var cuday, cumonth, day, j, len, mm, ref;
+    const { r } = this;
     cuday = 0;
     cumonth = "";
     r.rect(0, 0, 40, this.barHeight).attr({
@@ -112,7 +112,8 @@ export default (function() {
       fill: "#444"
     });
     ref = this.days;
-    for (mm = j = 0, len = ref.length; j < len; mm = (j += 1)) {
+
+    for (mm = 0, len = ref.length; mm < len; mm += 1) {
       day = ref[mm];
       if (cuday !== day[0] || cumonth !== day[1]) {
         // Dates
@@ -120,7 +121,7 @@ export default (function() {
           font: "12px Monaco, monospace",
           fill: "#BBB"
         });
-        cuday = day[0];
+        [cuday] = day;
       }
       if (cumonth !== day[1]) {
         // Months
@@ -128,6 +129,8 @@ export default (function() {
           font: "12px Monaco, monospace",
           fill: "#EEE"
         });
+
+        // eslint-disable-next-line prefer-destructuring
         cumonth = day[1];
       }
     }
@@ -168,8 +171,8 @@ export default (function() {
   };
 
   BranchGraph.prototype.bindEvents = function() {
-    var element;
-    element = this.element;
+    const { element } = this;
+
     return $(element).scroll((function(_this) {
       return function(event) {
         return _this.renderPartialGraph();
@@ -206,11 +209,13 @@ export default (function() {
   };
 
   BranchGraph.prototype.appendLabel = function(x, y, commit) {
-    var label, r, rect, shortrefs, text, textbox, triangle;
+    var label, rect, shortrefs, text, textbox, triangle;
+
     if (!commit.refs) {
       return;
     }
-    r = this.r;
+
+    const { r } = this;
     shortrefs = commit.refs;
     // Truncate if longer than 15 chars
     if (shortrefs.length > 17) {
@@ -241,11 +246,8 @@ export default (function() {
   };
 
   BranchGraph.prototype.appendAnchor = function(x, y, commit) {
-    var anchor, options, r, top;
-    r = this.r;
-    top = this.top;
-    options = this.options;
-    anchor = r.circle(x, y, 10).attr({
+    const { r, top, options } = this;
+    const anchor = r.circle(x, y, 10).attr({
       fill: "#000",
       opacity: 0,
       cursor: "pointer"
@@ -261,14 +263,15 @@ export default (function() {
   };
 
   BranchGraph.prototype.drawDot = function(x, y, commit) {
-    var avatar_box_x, avatar_box_y, r;
-    r = this.r;
+    const { r } = this;
     r.circle(x, y, 3).attr({
       fill: this.colors[commit.space],
       stroke: "none"
     });
-    avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
-    avatar_box_y = y - 10;
+
+    const avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
+    const avatar_box_y = y - 10;
+
     r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
       stroke: this.colors[commit.space],
       "stroke-width": 2
@@ -281,11 +284,12 @@ export default (function() {
   };
 
   BranchGraph.prototype.drawLines = function(x, y, commit) {
-    var arrow, color, i, j, len, offset, parent, parentCommit, parentX1, parentX2, parentY, r, ref, results, route;
-    r = this.r;
-    ref = commit.parents;
-    results = [];
-    for (i = j = 0, len = ref.length; j < len; i = (j += 1)) {
+    var arrow, color, i, len, offset, parent, parentCommit, parentX1, parentX2, parentY, route;
+    const { r } = this;
+    const ref = commit.parents;
+    const results = [];
+
+    for (i = 0, len = ref.length; i < len; i += 1) {
       parent = ref[i];
       parentCommit = this.preparedCommits[parent[0]];
       parentY = this.offsetY + this.unitTime * parentCommit.time;
@@ -329,11 +333,10 @@ export default (function() {
   };
 
   BranchGraph.prototype.markCommit = function(commit) {
-    var r, x, y;
     if (commit.id === this.options.commit_id) {
-      r = this.r;
-      x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
-      y = this.offsetY + this.unitTime * commit.time;
+      const { r } = this;
+      const x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
+      const y = this.offsetY + this.unitTime * commit.time;
       r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr({
         fill: "#000",
         "fill-opacity": .5,
diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index 40c08ee0ace..205d9766656 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -1,4 +1,4 @@
-/* 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 */
+/* eslint-disable func-names, no-var, one-var, max-len, 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 */
 
 import $ from 'jquery';
 import RefSelectDropdown from './ref_select_dropdown';
@@ -52,7 +52,7 @@ export default class NewBranchForm {
 
   validate() {
     var errorMessage, errors, formatter, unique, validator;
-    const indexOf = [].indexOf;
+    const { indexOf } = [];
 
     this.branchNameError.empty();
     unique = function(values, value) {
diff --git a/app/assets/javascripts/new_commit_form.js b/app/assets/javascripts/new_commit_form.js
index a2f0a44863f..17ec20f1cc1 100644
--- a/app/assets/javascripts/new_commit_form.js
+++ b/app/assets/javascripts/new_commit_form.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-return-assign, max-len */
+/* eslint-disable no-var, no-return-assign */
 export default class NewCommitForm {
   constructor(form) {
     this.form = form;
diff --git a/app/assets/javascripts/notebook/cells/code.vue b/app/assets/javascripts/notebook/cells/code.vue
index b4067d229aa..18cef82cec0 100644
--- a/app/assets/javascripts/notebook/cells/code.vue
+++ b/app/assets/javascripts/notebook/cells/code.vue
@@ -39,10 +39,10 @@ export default {
 <template>
   <div class="cell">
     <code-cell
-      type="input"
       :raw-code="rawInputCode"
       :count="cell.execution_count"
-      :code-css-class="codeCssClass" />
+      :code-css-class="codeCssClass"
+      type="input" />
     <output-cell
       v-if="hasOutput"
       :count="cell.execution_count"
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index 0f3083f05b2..7d2a1a33b98 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -48,9 +48,9 @@
       :type="promptType"
       :count="count" />
     <pre
-      class="language-python"
-      :class="codeCssClass"
       ref="code"
+      :class="codeCssClass"
+      class="language-python"
       v-text="code">
     </pre>
   </div>
diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue
index 91b2269a83a..4183b976814 100644
--- a/app/assets/javascripts/notebook/cells/output/index.vue
+++ b/app/assets/javascripts/notebook/cells/output/index.vue
@@ -78,10 +78,10 @@
 <template>
   <component
     :is="componentName"
-    type="output"
     :output-type="outputType"
     :count="count"
     :raw-code="rawCode"
     :code-css-class="codeCssClass"
+    type="output"
   />
 </template>
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 09f0ea37103..48cda28a1ae 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1,10 +1,8 @@
-/* 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, class-methods-use-this */
+/* eslint-disable no-restricted-properties, func-names, no-var, wrap-iife, camelcase,
+no-unused-expressions, 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, vars-on-top,
+no-unused-vars, no-shadow, no-useless-escape, class-methods-use-this */
 
 /* global ResolveService */
 /* global mrRefreshWidgetUrl */
@@ -19,10 +17,10 @@ import AjaxCache from '~/lib/utils/ajax_cache';
 import Vue from 'vue';
 import syntaxHighlight from '~/syntax_highlight';
 import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import { getLocationHash } from './lib/utils/url_utility';
 import Flash from './flash';
+import { defaultAutocompleteConfig } from './gfm_auto_complete';
 import CommentTypeToggle from './comment_type_toggle';
 import GLForm from './gl_form';
 import loadAwardsHandler from './awards_handler';
@@ -33,7 +31,7 @@ import {
   getPagePath,
   scrollToElement,
   isMetaKey,
-  hasVueMRDiscussionsCookie,
+  isInMRPage,
 } from './lib/utils/common_utils';
 import imageDiffHelper from './image_diff/helpers/index';
 import { localTimeAgo } from './lib/utils/datetime_utility';
@@ -48,21 +46,9 @@ const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
 const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
 
 export default class Notes {
-  static initialize(
-    notes_url,
-    note_ids,
-    last_fetched_at,
-    view,
-    enableGFM = true,
-  ) {
+  static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM) {
     if (!this.instance) {
-      this.instance = new Notes(
-        notes_url,
-        note_ids,
-        last_fetched_at,
-        view,
-        enableGFM,
-      );
+      this.instance = new Notes(notes_url, note_ids, last_fetched_at, view, enableGFM);
     }
   }
 
@@ -70,7 +56,7 @@ export default class Notes {
     return this.instance;
   }
 
-  constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
+  constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = defaultAutocompleteConfig) {
     this.updateTargetButtons = this.updateTargetButtons.bind(this);
     this.updateComment = this.updateComment.bind(this);
     this.visibilityChange = this.visibilityChange.bind(this);
@@ -105,13 +91,11 @@ export default class Notes {
     this.basePollingInterval = 15000;
     this.maxPollingSteps = 4;
 
-    this.$wrapperEl = hasVueMRDiscussionsCookie()
-      ? $(document).find('.diffs')
-      : $(document);
+    this.$wrapperEl = isInMRPage() ? $(document).find('.diffs') : $(document);
     this.cleanBinding();
     this.addBinding();
     this.setPollingInterval();
-    this.setupMainTargetNoteForm();
+    this.setupMainTargetNoteForm(enableGFM);
     this.taskList = new TaskList({
       dataType: 'note',
       fieldName: 'note',
@@ -147,73 +131,39 @@ export default class Notes {
     // Reopen and close actions for Issue/MR combined with note form submit
     this.$wrapperEl.on('click', '.js-comment-submit-button', this.postComment);
     this.$wrapperEl.on('click', '.js-comment-save-button', this.updateComment);
-    this.$wrapperEl.on(
-      'keyup input',
-      '.js-note-text',
-      this.updateTargetButtons,
-    );
+    this.$wrapperEl.on('keyup input', '.js-note-text', this.updateTargetButtons);
     // resolve a discussion
     this.$wrapperEl.on('click', '.js-comment-resolve-button', this.postComment);
     // remove a note (in general)
     this.$wrapperEl.on('click', '.js-note-delete', this.removeNote);
     // delete note attachment
-    this.$wrapperEl.on(
-      'click',
-      '.js-note-attachment-delete',
-      this.removeAttachment,
-    );
+    this.$wrapperEl.on('click', '.js-note-attachment-delete', this.removeAttachment);
     // reset main target form when clicking discard
     this.$wrapperEl.on('click', '.js-note-discard', this.resetMainTargetForm);
     // update the file name when an attachment is selected
-    this.$wrapperEl.on(
-      'change',
-      '.js-note-attachment-input',
-      this.updateFormAttachment,
-    );
+    this.$wrapperEl.on('change', '.js-note-attachment-input', this.updateFormAttachment);
     // reply to diff/discussion notes
-    this.$wrapperEl.on(
-      'click',
-      '.js-discussion-reply-button',
-      this.onReplyToDiscussionNote,
-    );
+    this.$wrapperEl.on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
     // add diff note
     this.$wrapperEl.on('click', '.js-add-diff-note-button', this.onAddDiffNote);
     // add diff note for images
-    this.$wrapperEl.on(
-      'click',
-      '.js-add-image-diff-note-button',
-      this.onAddImageDiffNote,
-    );
+    this.$wrapperEl.on('click', '.js-add-image-diff-note-button', this.onAddImageDiffNote);
     // hide diff note form
-    this.$wrapperEl.on(
-      'click',
-      '.js-close-discussion-note-form',
-      this.cancelDiscussionForm,
-    );
+    this.$wrapperEl.on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm);
     // toggle commit list
-    this.$wrapperEl.on(
-      'click',
-      '.system-note-commit-list-toggler',
-      this.toggleCommitList,
-    );
+    this.$wrapperEl.on('click', '.system-note-commit-list-toggler', this.toggleCommitList);
 
     this.$wrapperEl.on('click', '.js-toggle-lazy-diff', this.loadLazyDiff);
+    this.$wrapperEl.on('click', '.js-toggle-lazy-diff-retry-button', this.onClickRetryLazyLoad.bind(this));
+
     // fetch notes when tab becomes visible
     this.$wrapperEl.on('visibilitychange', this.visibilityChange);
     // when issue status changes, we need to refresh data
     this.$wrapperEl.on('issuable:change', this.refresh);
     // ajax:events that happen on Form when actions like Reopen, Close are performed on Issues and MRs.
     this.$wrapperEl.on('ajax:success', '.js-main-target-form', this.addNote);
-    this.$wrapperEl.on(
-      'ajax:success',
-      '.js-discussion-note-form',
-      this.addDiscussionNote,
-    );
-    this.$wrapperEl.on(
-      'ajax:success',
-      '.js-main-target-form',
-      this.resetMainTargetForm,
-    );
+    this.$wrapperEl.on('ajax:success', '.js-discussion-note-form', this.addDiscussionNote);
+    this.$wrapperEl.on('ajax:success', '.js-main-target-form', this.resetMainTargetForm);
     this.$wrapperEl.on(
       'ajax:complete',
       '.js-main-target-form',
@@ -223,8 +173,6 @@ export default class Notes {
     this.$wrapperEl.on('keydown', '.js-note-text', this.keydownNoteText);
     // When the URL fragment/hash has changed, `#note_xxx`
     $(window).on('hashchange', this.onHashChange);
-    this.boundGetContent = this.getContent.bind(this);
-    document.addEventListener('refreshLegacyNotes', this.boundGetContent);
   }
 
   cleanBinding() {
@@ -244,24 +192,18 @@ export default class Notes {
     this.$wrapperEl.off('click', '.js-comment-resolve-button');
     this.$wrapperEl.off('click', '.system-note-commit-list-toggler');
     this.$wrapperEl.off('click', '.js-toggle-lazy-diff');
+    this.$wrapperEl.off('click', '.js-toggle-lazy-diff-retry-button');
     this.$wrapperEl.off('ajax:success', '.js-main-target-form');
     this.$wrapperEl.off('ajax:success', '.js-discussion-note-form');
     this.$wrapperEl.off('ajax:complete', '.js-main-target-form');
-    document.removeEventListener('refreshLegacyNotes', this.boundGetContent);
     $(window).off('hashchange', this.onHashChange);
   }
 
   static initCommentTypeToggle(form) {
-    const dropdownTrigger = form.querySelector(
-      '.js-comment-type-dropdown .dropdown-toggle',
-    );
-    const dropdownList = form.querySelector(
-      '.js-comment-type-dropdown .dropdown-menu',
-    );
+    const dropdownTrigger = form.querySelector('.js-comment-type-dropdown .dropdown-toggle');
+    const dropdownList = form.querySelector('.js-comment-type-dropdown .dropdown-menu');
     const noteTypeInput = form.querySelector('#note_type');
-    const submitButton = form.querySelector(
-      '.js-comment-type-dropdown .js-comment-submit-button',
-    );
+    const submitButton = form.querySelector('.js-comment-type-dropdown .js-comment-submit-button');
     const closeButton = form.querySelector('.js-note-target-close');
     const reopenButton = form.querySelector('.js-note-target-reopen');
 
@@ -297,9 +239,7 @@ export default class Notes {
           return;
         }
         myLastNote = $(
-          `li.note[data-author-id='${
-            gon.current_user_id
-          }'][data-editable]:last`,
+          `li.note[data-author-id='${gon.current_user_id}'][data-editable]:last`,
           $textarea.closest('.note, .notes_holder, #notes'),
         );
         if (myLastNote.length) {
@@ -313,7 +253,7 @@ export default class Notes {
         if (discussionNoteForm.length) {
           if ($textarea.val() !== '') {
             if (
-              !confirm('Are you sure you want to cancel creating this comment?')
+              !window.confirm('Are you sure you want to cancel creating this comment?')
             ) {
               return;
             }
@@ -327,7 +267,7 @@ export default class Notes {
           newText = $textarea.val();
           if (originalText !== newText) {
             if (
-              !confirm('Are you sure you want to cancel editing this comment?')
+              !window.confirm('Are you sure you want to cancel editing this comment?')
             ) {
               return;
             }
@@ -371,7 +311,7 @@ export default class Notes {
         },
       })
       .then(({ data }) => {
-        const notes = data.notes;
+        const { notes } = data;
         this.last_fetched_at = data.last_fetched_at;
         this.setPollingInterval(data.notes.length);
         $.each(notes, (i, note) => this.renderNote(note));
@@ -396,8 +336,7 @@ export default class Notes {
     if (shouldReset == null) {
       shouldReset = true;
     }
-    nthInterval =
-      this.basePollingInterval * Math.pow(2, this.maxPollingSteps - 1);
+    nthInterval = this.basePollingInterval * Math.pow(2, this.maxPollingSteps - 1);
     if (shouldReset) {
       this.pollingInterval = this.basePollingInterval;
     } else if (this.pollingInterval < nthInterval) {
@@ -418,10 +357,7 @@ export default class Notes {
 
         loadAwardsHandler()
           .then(awardsHandler => {
-            awardsHandler.addAwardToEmojiBar(
-              votesBlock,
-              noteEntity.commands_changes.emoji_award,
-            );
+            awardsHandler.addAwardToEmojiBar(votesBlock, noteEntity.commands_changes.emoji_award);
             awardsHandler.scrollToAwards();
           })
           .catch(() => {
@@ -471,17 +407,10 @@ export default class Notes {
 
     if (!noteEntity.valid) {
       if (noteEntity.errors && noteEntity.errors.commands_only) {
-        if (
-          noteEntity.commands_changes &&
-          Object.keys(noteEntity.commands_changes).length > 0
-        ) {
+        if (noteEntity.commands_changes && Object.keys(noteEntity.commands_changes).length > 0) {
           $notesList.find('.system-note.being-posted').remove();
         }
-        this.addFlash(
-          noteEntity.errors.commands_only,
-          'notice',
-          this.parentTimeline.get(0),
-        );
+        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline.get(0));
         this.refresh();
       }
       return;
@@ -489,7 +418,7 @@ export default class Notes {
 
     const $note = $notesList.find(`#note_${noteEntity.id}`);
     if (Notes.isNewNote(noteEntity, this.note_ids)) {
-      if (hasVueMRDiscussionsCookie()) {
+      if (isInMRPage()) {
         return;
       }
 
@@ -517,8 +446,7 @@ export default class Notes {
       // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
       const sanitizedNoteNote = normalizeNewlines(noteEntity.note);
       const isTextareaUntouched =
-        currentContent === initialContent ||
-        currentContent === sanitizedNoteNote;
+        currentContent === initialContent || currentContent === sanitizedNoteNote;
 
       if (isEditing && isTextareaUntouched) {
         $textarea.val(noteEntity.note);
@@ -531,8 +459,6 @@ export default class Notes {
         this.setupNewNote($updatedNote);
       }
     }
-
-    Notes.refreshVueNotes();
   }
 
   isParallelView() {
@@ -550,13 +476,7 @@ export default class Notes {
     }
     this.note_ids.push(noteEntity.id);
 
-    form =
-      $form ||
-      $(
-        `.js-discussion-note-form[data-discussion-id="${
-          noteEntity.discussion_id
-        }"]`,
-      );
+    form = $form || $(`.js-discussion-note-form[data-discussion-id="${noteEntity.discussion_id}"]`);
     row =
       form.length || !noteEntity.discussion_line_code
         ? form.closest('tr')
@@ -572,9 +492,7 @@ export default class Notes {
       .first()
       .find('.js-avatar-container.' + lineType + '_line');
     // is this the first note of discussion?
-    discussionContainer = $(
-      `.notes[data-discussion-id="${noteEntity.discussion_id}"]`,
-    );
+    discussionContainer = $(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
     if (!discussionContainer.length) {
       discussionContainer = form.closest('.discussion').find('.notes');
     }
@@ -582,18 +500,12 @@ export default class Notes {
       if (noteEntity.diff_discussion_html) {
         var $discussion = $(noteEntity.diff_discussion_html).renderGFM();
 
-        if (
-          !this.isParallelView() ||
-          row.hasClass('js-temp-notes-holder') ||
-          noteEntity.on_image
-        ) {
+        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder') || noteEntity.on_image) {
           // insert the note and the reply button after the temp row
           row.after($discussion);
         } else {
           // Merge new discussion HTML in
-          var $notes = $discussion.find(
-            `.notes[data-discussion-id="${noteEntity.discussion_id}"]`,
-          );
+          var $notes = $discussion.find(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
           var contentContainerClass =
             '.' +
             $notes
@@ -606,29 +518,15 @@ export default class Notes {
             .find(contentContainerClass + ' .content')
             .append($notes.closest('.content').children());
         }
-      }
-      // Init discussion on 'Discussion' page if it is merge request page
-      const page = $('body').attr('data-page');
-      if (
-        (page && page.indexOf('projects:merge_request') !== -1) ||
-        !noteEntity.diff_discussion_html
-      ) {
-        if (!hasVueMRDiscussionsCookie()) {
-          Notes.animateAppendNote(
-            noteEntity.discussion_html,
-            $('.main-notes-list'),
-          );
-        }
+      } else {
+        Notes.animateAppendNote(noteEntity.discussion_html, $('.main-notes-list'));
       }
     } else {
       // append new note to all matching discussions
       Notes.animateAppendNote(noteEntity.html, discussionContainer);
     }
 
-    if (
-      typeof gl.diffNotesCompileComponents !== 'undefined' &&
-      noteEntity.discussion_resolvable
-    ) {
+    if (typeof gl.diffNotesCompileComponents !== 'undefined' && noteEntity.discussion_resolvable) {
       gl.diffNotesCompileComponents();
 
       this.renderDiscussionAvatar(diffAvatarContainer, noteEntity);
@@ -701,14 +599,14 @@ export default class Notes {
    *
    * Sets some hidden fields in the form.
    */
-  setupMainTargetNoteForm() {
+  setupMainTargetNoteForm(enableGFM) {
     var form;
     // find the form
     form = $('.js-new-note-form');
     // Set a global clone of the form for later cloning
     this.formClone = form.clone();
     // show the form
-    this.setupNoteForm(form);
+    this.setupNoteForm(form, enableGFM);
     // fix classes
     form.removeClass('js-new-note-form');
     form.addClass('js-main-target-form');
@@ -736,9 +634,9 @@ export default class Notes {
    * setup GFM auto complete
    * show the form
    */
-  setupNoteForm(form) {
+  setupNoteForm(form, enableGFM = defaultAutocompleteConfig) {
     var textarea, key;
-    this.glForm = new GLForm(form, this.enableGFM);
+    this.glForm = new GLForm(form, enableGFM);
     textarea = form.find('.js-note-text');
     key = [
       'Note',
@@ -782,6 +680,7 @@ export default class Notes {
   }
 
   updateNoteError($parentTimeline) {
+    // eslint-disable-next-line no-new
     new Flash(
       'Your comment could not be updated! Please check your network connection and try again.',
     );
@@ -937,9 +836,7 @@ export default class Notes {
     form.removeClass('current-note-edit-form');
     form.find('.js-finish-edit-warning').hide();
     // Replace markdown textarea text with original note text.
-    return form
-      .find('.js-note-text')
-      .val(form.find('form.edit-note').data('originalNote'));
+    return form.find('.js-note-text').val(form.find('form.edit-note').data('originalNote'));
   }
 
   /**
@@ -987,21 +884,15 @@ export default class Notes {
 
             // The notes tr can contain multiple lists of notes, like on the parallel diff
             // notesTr does not exist for image diffs
-            if (
-              notesTr.find('.discussion-notes').length > 1 ||
-              notesTr.length === 0
-            ) {
+            if (notesTr.find('.discussion-notes').length > 1 || notesTr.length === 0) {
               const $diffFile = $notes.closest('.diff-file');
               if ($diffFile.length > 0) {
-                const removeBadgeEvent = new CustomEvent(
-                  'removeBadge.imageDiff',
-                  {
-                    detail: {
-                      // badgeNumber's start with 1 and index starts with 0
-                      badgeNumber: $notes.index() + 1,
-                    },
+                const removeBadgeEvent = new CustomEvent('removeBadge.imageDiff', {
+                  detail: {
+                    // badgeNumber's start with 1 and index starts with 0
+                    badgeNumber: $notes.index() + 1,
                   },
-                );
+                });
 
                 $diffFile[0].dispatchEvent(removeBadgeEvent);
               }
@@ -1015,7 +906,6 @@ export default class Notes {
       })(this),
     );
 
-    Notes.refreshVueNotes();
     Notes.checkMergeRequestStatus();
     return this.updateNotesCount(-1);
   }
@@ -1031,7 +921,7 @@ export default class Notes {
     $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();
+    return $note.find('.diffs .current-note-edit-form').remove();
   }
 
   /**
@@ -1105,9 +995,7 @@ export default class Notes {
     form.find('.js-note-new-discussion').remove();
     this.setupNoteForm(form);
 
-    form
-      .removeClass('js-main-target-form')
-      .addClass('discussion-form js-discussion-note-form');
+    form.removeClass('js-main-target-form').addClass('discussion-form js-discussion-note-form');
 
     if (typeof gl.diffNotesCompileComponents !== 'undefined') {
       var $commentBtn = form.find('comment-and-resolve-btn');
@@ -1117,9 +1005,7 @@ export default class Notes {
     }
 
     form.find('.js-note-text').focus();
-    form
-      .find('.js-comment-resolve-button')
-      .attr('data-discussion-id', discussionID);
+    form.find('.js-comment-resolve-button').attr('data-discussion-id', discussionID);
   }
 
   /**
@@ -1152,9 +1038,7 @@ export default class Notes {
 
     // Setup comment form
     let newForm;
-    const $noteContainer = $link
-      .closest('.diff-viewer')
-      .find('.note-container');
+    const $noteContainer = $link.closest('.diff-viewer').find('.note-container');
     const $form = $noteContainer.find('> .discussion-form');
 
     if ($form.length === 0) {
@@ -1223,14 +1107,12 @@ export default class Notes {
       notesContent = targetRow.find(notesContentSelector);
       addForm = true;
     } else {
-      const isCurrentlyShown = targetRow
-        .find('.content:not(:empty)')
-        .is(':visible');
+      const isCurrentlyShown = targetRow.find('.content:not(:empty)').is(':visible');
       const isForced = forceShow === true || forceShow === false;
       const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
 
-      targetRow.toggle(showNow);
-      notesContent.toggle(showNow);
+      targetRow.toggleClass('hide', !showNow);
+      notesContent.toggleClass('hide', !showNow);
     }
 
     if (addForm) {
@@ -1390,9 +1272,7 @@ export default class Notes {
     if ($note.find('.js-conflict-edit-warning').length === 0) {
       const $alert = $(`<div class="js-conflict-edit-warning alert alert-danger">
         This comment has changed since you started editing, please review the
-        <a href="#note_${
-          noteEntity.id
-        }" target="_blank" rel="noopener noreferrer">
+        <a href="#note_${noteEntity.id}" target="_blank" rel="noopener noreferrer">
           updated comment
         </a>
         to ensure information is not lost
@@ -1402,15 +1282,13 @@ export default class Notes {
   }
 
   updateNotesCount(updateCount) {
-    return this.notesCountBadge.text(
-      parseInt(this.notesCountBadge.text(), 10) + updateCount,
-    );
+    return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
   }
 
   static renderPlaceholderComponent($container) {
     const el = $container.find('.js-code-placeholder').get(0);
+    // eslint-disable-next-line no-new
     new Vue({
-      // eslint-disable-line no-new
       el,
       components: {
         SkeletonLoadingContainer,
@@ -1425,22 +1303,21 @@ export default class Notes {
     const { discussion_html } = data;
     const lines = $(discussion_html).find('.line_holder');
     lines.addClass('fade-in');
-    $container.find('tbody').prepend(lines);
+    $container.find('.diff-content > table > tbody').prepend(lines);
     const fileHolder = $container.find('.file-holder');
     $container.find('.line-holder-placeholder').remove();
     syntaxHighlight(fileHolder);
   }
 
-  static renderDiffError($container) {
-    $container.find('.line_content').html(
-      $(`
-        <div class="nothing-here-block">
-          ${__(
-            'Unable to load the diff.',
-          )} <a class="js-toggle-lazy-diff" href="javascript:void(0)">Try again</a>?
-        </div>
-      `),
-    );
+  onClickRetryLazyLoad(e) {
+    const $retryButton = $(e.currentTarget);
+
+    $retryButton.prop('disabled', true);
+
+    return this.loadLazyDiff(e)
+    .then(() => {
+      $retryButton.prop('disabled', false);
+    });
   }
 
   loadLazyDiff(e) {
@@ -1449,27 +1326,40 @@ export default class Notes {
 
     $container.find('.js-toggle-lazy-diff').removeClass('js-toggle-lazy-diff');
 
-    const tableEl = $container.find('tbody');
-    if (tableEl.length === 0) return;
+    const $tableEl = $container.find('tbody');
+    if ($tableEl.length === 0) return;
 
     const fileHolder = $container.find('.file-holder');
     const url = fileHolder.data('linesPath');
 
-    axios
+    const $errorContainer = $container.find('.js-error-lazy-load-diff');
+    const $successContainer = $container.find('.js-success-lazy-load');
+
+    /**
+     * We only fetch resolved discussions.
+     * Unresolved discussions don't have an endpoint being provided.
+     */
+    if (url) {
+      return axios
       .get(url)
       .then(({ data }) => {
+        // Reset state in case last request returned error
+        $successContainer.removeClass('hidden');
+        $errorContainer.addClass('hidden');
+
         Notes.renderDiffContent($container, data);
       })
       .catch(() => {
-        Notes.renderDiffError($container);
+        $successContainer.addClass('hidden');
+        $errorContainer.removeClass('hidden');
       });
+    }
+    return Promise.resolve();
   }
 
   toggleCommitList(e) {
     const $element = $(e.currentTarget);
-    const $closestSystemCommitList = $element.siblings(
-      '.system-note-commit-list',
-    );
+    const $closestSystemCommitList = $element.siblings('.system-note-commit-list');
 
     $element
       .find('.fa')
@@ -1502,9 +1392,7 @@ export default class Notes {
         $systemNote.find('.note-text').addClass('system-note-commit-list');
         $systemNote.find('.system-note-commit-list-toggler').show();
       } else {
-        $systemNote
-          .find('.note-text')
-          .addClass('system-note-commit-list hide-shade');
+        $systemNote.find('.note-text').addClass('system-note-commit-list hide-shade');
       }
     });
   }
@@ -1575,10 +1463,6 @@ export default class Notes {
     return $updatedNote;
   }
 
-  static refreshVueNotes() {
-    document.dispatchEvent(new CustomEvent('refreshVueNotes'));
-  }
-
   /**
    * Get data from Form attributes to use for saving/submitting comment.
    */
@@ -1659,7 +1543,7 @@ export default class Notes {
                <div class="note-header">
                   <div class="note-header-info">
                      <a href="/${_.escape(currentUsername)}">
-                       <span class="hidden-xs">${_.escape(
+                       <span class="d-none d-sm-inline-block">${_.escape(
                          currentUsername,
                        )}</span>
                        <span class="note-headline-light">${_.escape(
@@ -1678,7 +1562,7 @@ export default class Notes {
       </li>`,
     );
 
-    $tempNote.find('.hidden-xs').text(_.escape(currentUserFullname));
+    $tempNote.find('.d-none.d-sm-inline-block').text(_.escape(currentUserFullname));
     $tempNote
       .find('.note-headline-light')
       .text(`@${_.escape(currentUsername)}`);
@@ -1737,15 +1621,8 @@ export default class Notes {
         .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,
-      formContentOriginal,
-    } = this.getFormData($form);
+    const isDiscussionResolve = $submitBtn.hasClass('js-comment-resolve-button');
+    const { formData, formContent, formAction, formContentOriginal } = this.getFormData($form);
     let noteUniqueId;
     let systemNoteUniqueId;
     let hasQuickActions = false;
@@ -1809,9 +1686,10 @@ export default class Notes {
       }
     }
 
-    /* eslint-disable promise/catch-or-return */
+    $closeBtn.text($closeBtn.data('originalText'));
+
     // Make request to submit comment on server
-    axios
+    return axios
       .post(`${formAction}?html=true`, formData)
       .then(res => {
         const note = res.data;
@@ -1831,9 +1709,7 @@ export default class Notes {
 
         // Reset cached commands list when command is applied
         if (hasQuickActions) {
-          $form
-            .find('textarea.js-note-text')
-            .trigger('clear-commands-cache.atwho');
+          $form.find('textarea.js-note-text').trigger('clear-commands-cache.atwho');
         }
 
         // Clear previous form errors
@@ -1878,12 +1754,8 @@ export default class Notes {
 
           // append flash-container to the Notes list
           if ($notesContainer.length) {
-            $notesContainer.append(
-              '<div class="flash-container" style="display: none;"></div>',
-            );
+            $notesContainer.append('<div class="flash-container" style="display: none;"></div>');
           }
-
-          Notes.refreshVueNotes();
         } else if (isMainForm) {
           // Check if this was main thread comment
           // Show final note element on UI and perform form and action buttons cleanup
@@ -1917,9 +1789,7 @@ export default class Notes {
 
         // Show form again on UI on failure
         if (isDiscussionForm && $notesContainer.length) {
-          const replyButton = $notesContainer
-            .parent()
-            .find('.js-discussion-reply-button');
+          const replyButton = $notesContainer.parent().find('.js-discussion-reply-button');
           this.replyToDiscussionNote(replyButton[0]);
           $form = $notesContainer.parent().find('form');
         }
@@ -1928,8 +1798,6 @@ export default class Notes {
         this.reenableTargetFormSubmitButton(e);
         this.addNoteError($form);
       });
-
-    return $closeBtn.text($closeBtn.data('originalText'));
   }
 
   /**
@@ -1964,16 +1832,13 @@ export default class Notes {
 
     // Show updated comment content temporarily
     $noteBodyText.html(formContent);
-    $editingNote
-      .removeClass('is-editing fade-in-full')
-      .addClass('being-posted fade-in-half');
+    $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
     axios
       .post(`${formAction}?html=true`, formData)
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 90dcafd75b7..c6a524f68cb 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -7,10 +7,7 @@ import { __, sprintf } from '~/locale';
 import Flash from '../../flash';
 import Autosave from '../../autosave';
 import TaskList from '../../task_list';
-import {
-  capitalizeFirstCharacter,
-  convertToCamelCase,
-} from '../../lib/utils/text_utility';
+import { capitalizeFirstCharacter, convertToCamelCase, splitCamelCase } from '../../lib/utils/text_utility';
 import * as constants from '../constants';
 import eventHub from '../event_hub';
 import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
@@ -56,21 +53,23 @@ export default {
     ]),
     ...mapState(['isToggleStateButtonLoading']),
     noteableDisplayName() {
-      return this.noteableType.replace(/_/g, ' ');
+      return splitCamelCase(this.noteableType).toLowerCase();
     },
     isLoggedIn() {
       return this.getUserData.id;
     },
     commentButtonTitle() {
-      return this.noteType === constants.COMMENT
-        ? 'Comment'
-        : 'Start discussion';
+      return this.noteType === constants.COMMENT ? 'Comment' : 'Start discussion';
+    },
+    startDiscussionDescription() {
+      let text = 'Discuss a specific suggestion or question';
+      if (this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE) {
+        text += ' that needs to be resolved';
+      }
+      return `${text}.`;
     },
     isOpen() {
-      return (
-        this.openState === constants.OPENED ||
-        this.openState === constants.REOPENED
-      );
+      return this.openState === constants.OPENED || this.openState === constants.REOPENED;
     },
     canCreateNote() {
       return this.getNoteableData.current_user.can_create_note;
@@ -117,6 +116,9 @@ export default {
     endpoint() {
       return this.getNoteableData.create_note_path;
     },
+    issuableTypeTitle() {
+      return this.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE ? 'merge request' : 'issue';
+    },
   },
   watch: {
     note(newNote) {
@@ -129,9 +131,7 @@ export default {
   mounted() {
     // jQuery is needed here because it is a custom event being dispatched with jQuery.
     $(document).on('issuable:change', (e, isClosed) => {
-      this.toggleIssueLocalState(
-        isClosed ? constants.CLOSED : constants.REOPENED,
-      );
+      this.toggleIssueLocalState(isClosed ? constants.CLOSED : constants.REOPENED);
     });
 
     this.initAutoSave();
@@ -168,6 +168,7 @@ export default {
               noteable_id: this.getNoteableData.id,
               note: this.note,
             },
+            merge_request_diff_head_sha: this.getNoteableData.diff_head_sha,
           },
         };
 
@@ -227,9 +228,7 @@ Please check your network connection and try again.`;
             this.toggleStateButtonLoading(false);
             Flash(
               sprintf(
-                __(
-                  'Something went wrong while closing the %{issuable}. Please try again later',
-                ),
+                __('Something went wrong while closing the %{issuable}. Please try again later'),
                 { issuable: this.noteableDisplayName },
               ),
             );
@@ -242,9 +241,7 @@ Please check your network connection and try again.`;
             this.toggleStateButtonLoading(false);
             Flash(
               sprintf(
-                __(
-                  'Something went wrong while reopening the %{issuable}. Please try again later',
-                ),
+                __('Something went wrong while reopening the %{issuable}. Please try again later'),
                 { issuable: this.noteableDisplayName },
               ),
             );
@@ -281,9 +278,7 @@ Please check your network connection and try again.`;
     },
     initAutoSave() {
       if (this.isLoggedIn) {
-        const noteableType = capitalizeFirstCharacter(
-          convertToCamelCase(this.noteableType),
-        );
+        const noteableType = capitalizeFirstCharacter(convertToCamelCase(this.noteableType));
 
         this.autosave = new Autosave($(this.$refs.textarea), [
           'Note',
@@ -312,16 +307,16 @@ Please check your network connection and try again.`;
   <div>
     <note-signed-out-widget v-if="!isLoggedIn" />
     <discussion-locked-widget
-      issuable-type="issue"
       v-else-if="!canCreateNote"
+      :issuable-type="issuableTypeTitle"
     />
     <ul
-      v-else
+      v-else-if="canCreateNote"
       class="notes notes-form timeline">
       <li class="timeline-entry">
         <div class="timeline-entry-inner">
           <div class="flash-container error-alert timeline-content"></div>
-          <div class="timeline-icon hidden-xs hidden-sm">
+          <div class="timeline-icon d-none d-sm-none d-md-block">
             <user-avatar-link
               v-if="author"
               :link-href="author.path"
@@ -345,23 +340,23 @@ Please check your network connection and try again.`;
               />
 
               <markdown-field
+                ref="markdownField"
                 :markdown-preview-path="markdownPreviewPath"
                 :markdown-docs-path="markdownDocsPath"
                 :quick-actions-docs-path="quickActionsDocsPath"
-                :add-spacing-classes="false"
-                ref="markdownField">
+                :add-spacing-classes="false">
                 <textarea
                   id="note-body"
+                  ref="textarea"
+                  slot="textarea"
+                  v-model="note"
+                  :disabled="isSubmitting"
                   name="note[note]"
-                  class="note-textarea js-vue-comment-form
+                  class="note-textarea js-vue-comment-form js-note-text
 js-gfm-input js-autosize markdown-area js-vue-textarea"
                   data-supports-quick-actions="true"
                   aria-label="Description"
-                  v-model="note"
-                  ref="textarea"
-                  slot="textarea"
-                  :disabled="isSubmitting"
-                  placeholder="Write a comment or drag your files here..."
+                  placeholder="Write a comment or drag your files here…"
                   @keydown.up="editCurrentUserLastNote()"
                   @keydown.meta.enter="handleSave()"
                   @keydown.ctrl.enter="handleSave()">
@@ -369,13 +364,13 @@ js-gfm-input js-autosize markdown-area js-vue-textarea"
               </markdown-field>
               <div class="note-form-actions">
                 <div
-                  class="pull-left btn-group
+                  class="float-left btn-group
 append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown">
                   <button
-                    @click.prevent="handleSave()"
                     :disabled="isSubmitButtonDisabled"
                     class="btn btn-create comment-btn js-comment-button js-comment-submit-button"
-                    type="submit">
+                    type="submit"
+                    @click.prevent="handleSave()">
                     {{ __(commentButtonTitle) }}
                   </button>
                   <button
@@ -383,6 +378,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                     name="button"
                     type="button"
                     class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle"
+                    data-display="static"
                     data-toggle="dropdown"
                     aria-label="Open comment type dropdown">
                     <i
@@ -422,7 +418,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                         <div class="description">
                           <strong>Start discussion</strong>
                           <p>
-                            Discuss a specific suggestion or question.
+                            {{ startDiscussionDescription }}
                           </p>
                         </div>
                       </button>
@@ -433,20 +429,20 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                 <loading-button
                   v-if="canUpdateIssue"
                   :loading="isToggleStateButtonLoading"
-                  @click="handleSave(true)"
                   :container-class="[
                     actionButtonClassNames,
                     'btn btn-comment btn-comment-and-close js-action-button'
                   ]"
                   :disabled="isToggleStateButtonLoading || isSubmitting"
                   :label="issueActionButtonTitle"
+                  @click="handleSave(true)"
                 />
 
                 <button
-                  type="button"
                   v-if="note.length"
-                  @click="discard"
-                  class="btn btn-cancel js-note-discard">
+                  type="button"
+                  class="btn btn-cancel js-note-discard"
+                  @click="discard">
                   Discard draft
                 </button>
               </div>
diff --git a/app/assets/javascripts/notes/components/diff_file_header.vue b/app/assets/javascripts/notes/components/diff_file_header.vue
index 94d9dc69964..fc7b52be241 100644
--- a/app/assets/javascripts/notes/components/diff_file_header.vue
+++ b/app/assets/javascripts/notes/components/diff_file_header.vue
@@ -29,12 +29,12 @@ export default {
       <span>
         <icon name="archive" />
         <strong
-          v-html="diffFile.submoduleLink"
           class="file-title-name"
+          v-html="diffFile.submoduleLink"
         ></strong>
         <clipboard-button
-          title="Copy file path to clipboard"
           :text="diffFile.submoduleLink"
+          title="Copy file path to clipboard"
           css-class="btn-default btn-transparent btn-clipboard"
         />
       </span>
@@ -48,16 +48,16 @@ export default {
         <span v-html="diffFile.blobIcon"></span>
         <span v-if="diffFile.renamedFile">
           <strong
-            class="file-title-name has-tooltip"
             :title="diffFile.oldPath"
+            class="file-title-name has-tooltip"
             data-container="body"
           >
             {{ diffFile.oldPath }}
           </strong>
           &rarr;
           <strong
-            class="file-title-name has-tooltip"
             :title="diffFile.newPath"
+            class="file-title-name has-tooltip"
             data-container="body"
           >
             {{ diffFile.newPath }}
@@ -66,8 +66,8 @@ export default {
 
         <strong
           v-else
-          class="file-title-name has-tooltip"
           :title="diffFile.oldPath"
+          class="file-title-name has-tooltip"
           data-container="body"
         >
           {{ diffFile.filePath }}
@@ -78,8 +78,8 @@ export default {
       </component>
 
       <clipboard-button
-        title="Copy file path to clipboard"
         :text="diffFile.filePath"
+        title="Copy file path to clipboard"
         css-class="btn-default btn-transparent btn-clipboard"
       />
 
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index ee01ec85bbb..d321f2ce15e 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -1,13 +1,15 @@
 <script>
-import $ from 'jquery';
-import syntaxHighlight from '~/syntax_highlight';
+import { mapState, mapActions } from 'vuex';
 import imageDiffHelper from '~/image_diff/helpers/index';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import DiffFileHeader from './diff_file_header.vue';
+import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import { trimFirstCharOfLineContent } from '~/diffs/store/utils';
 
 export default {
   components: {
     DiffFileHeader,
+    SkeletonLoadingContainer,
   },
   props: {
     discussion: {
@@ -15,7 +17,24 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      error: false,
+    };
+  },
   computed: {
+    ...mapState({
+      noteableData: state => state.notes.noteableData,
+    }),
+    hasTruncatedDiffLines() {
+      return this.discussion.truncatedDiffLines && this.discussion.truncatedDiffLines.length !== 0;
+    },
+    isDiscussionsExpanded() {
+      return true; // TODO: @fatihacet - Fix this.
+    },
+    isCollapsed() {
+      return this.diffFile.collapsed || false;
+    },
     isImageDiff() {
       return !this.diffFile.text;
     },
@@ -23,36 +42,46 @@ export default {
       const { text } = this.diffFile;
       return text ? 'text-file' : 'js-image-file';
     },
-    diffRows() {
-      return $(this.discussion.truncatedDiffLines);
-    },
     diffFile() {
-      return convertObjectPropsToCamelCase(this.discussion.diffFile);
+      return convertObjectPropsToCamelCase(this.discussion.diffFile, { deep: true });
     },
     imageDiffHtml() {
       return this.discussion.imageDiffHtml;
     },
+    currentUser() {
+      return this.noteableData.current_user;
+    },
+    userColorScheme() {
+      return window.gon.user_color_scheme;
+    },
+    normalizedDiffLines() {
+      const lines = this.discussion.truncatedDiffLines || [];
+
+      return lines.map(line => trimFirstCharOfLineContent(convertObjectPropsToCamelCase(line)));
+    },
   },
   mounted() {
     if (this.isImageDiff) {
       const canCreateNote = false;
       const renderCommentBadge = true;
-      imageDiffHelper.initImageDiff(
-        this.$refs.fileHolder,
-        canCreateNote,
-        renderCommentBadge,
-      );
-    } else {
-      const fileHolder = $(this.$refs.fileHolder);
-      this.$nextTick(() => {
-        syntaxHighlight(fileHolder);
-      });
+      imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge);
+    } else if (!this.hasTruncatedDiffLines) {
+      this.fetchDiff();
     }
   },
   methods: {
+    ...mapActions(['fetchDiscussionDiffLines']),
     rowTag(html) {
       return html.outerHTML ? 'tr' : 'template';
     },
+    fetchDiff() {
+      this.error = false;
+      this.fetchDiscussionDiffLines(this.discussion)
+        .then(this.highlight)
+        .catch(() => {
+          this.error = true;
+        });
+    },
   },
 };
 </script>
@@ -60,26 +89,62 @@ export default {
 <template>
   <div
     ref="fileHolder"
-    class="diff-file file-holder"
     :class="diffFileClass"
+    class="diff-file file-holder"
   >
-    <div class="js-file-title file-title file-title-flex-parent">
-      <diff-file-header
-        :diff-file="diffFile"
-      />
-    </div>
+    <diff-file-header
+      :diff-file="diffFile"
+      :current-user="currentUser"
+      :discussions-expanded="isDiscussionsExpanded"
+      :expanded="!isCollapsed"
+    />
     <div
       v-if="diffFile.text"
-      class="diff-content code js-syntax-highlight"
+      :class="userColorScheme"
+      class="diff-content code"
     >
       <table>
-        <component
-          :is="rowTag(html)"
-          :class="html.className"
-          v-for="(html, index) in diffRows"
-          v-html="html.outerHTML"
-          :key="index"
-        />
+        <tr
+          v-for="line in normalizedDiffLines"
+          :key="line.lineCode"
+          class="line_holder"
+        >
+          <td class="diff-line-num old_line">{{ line.oldLine }}</td>
+          <td class="diff-line-num new_line">{{ line.newLine }}</td>
+          <td
+            :class="line.type"
+            class="line_content"
+            v-html="line.richText"
+          >
+          </td>
+        </tr>
+        <tr
+          v-if="!hasTruncatedDiffLines"
+          class="line_holder line-holder-placeholder"
+        >
+          <td class="old_line diff-line-num"></td>
+          <td class="new_line diff-line-num"></td>
+          <td
+            v-if="error"
+            class="js-error-lazy-load-diff diff-loading-error-block"
+          >
+            Unable to load the diff
+            <button
+              class="btn-link btn-link-retry btn-no-padding js-toggle-lazy-diff-retry-button"
+              @click="fetchDiff"
+            >
+              Try again
+            </button>
+          </td>
+          <td
+            v-else
+            class="line_content js-success-lazy-load"
+          >
+            <span></span>
+            <skeleton-loading-container />
+            <span></span>
+          </td>
+        </tr>
         <tr class="notes_holder">
           <td
             class="notes_line"
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index d492d1cd001..6385b75e557 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import resolveSvg from 'icons/_icon_resolve_discussion.svg';
 import resolvedSvg from 'icons/_icon_status_success_solid.svg';
 import mrIssueSvg from 'icons/_icon_mr_issue.svg';
@@ -48,10 +48,14 @@ export default {
     this.nextDiscussionSvg = nextDiscussionSvg;
   },
   methods: {
-    jumpToFirstDiscussion() {
-      const el = document.querySelector(
-        `[data-discussion-id="${this.firstUnresolvedDiscussionId}"]`,
-      );
+    ...mapActions(['expandDiscussion']),
+    jumpToFirstUnresolvedDiscussion() {
+      const discussionId = this.firstUnresolvedDiscussionId;
+      if (!discussionId) {
+        return;
+      }
+
+      const el = document.querySelector(`[data-discussion-id="${discussionId}"]`);
       const activeTab = window.mrTabs.currentAction;
 
       if (activeTab === 'commits' || activeTab === 'pipelines') {
@@ -59,6 +63,7 @@ export default {
       }
 
       if (el) {
+        this.expandDiscussion({ discussionId });
         scrollToElement(el);
       }
     },
@@ -86,7 +91,7 @@ export default {
             v-html="resolveSvg"
           ></span>
         </span>
-        <span class=".line-resolve-text">
+        <span class="line-resolve-text">
           {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ countText }} resolved
         </span>
       </div>
@@ -95,9 +100,9 @@ export default {
         class="btn-group"
         role="group">
         <a
-          :href="resolveAllDiscussionsIssuePath"
           v-tooltip
-          title="Resolve all discussions in new issue"
+          :href="resolveAllDiscussionsIssuePath"
+          :title="s__('Resolve all discussions in new issue')"
           data-container="body"
           class="new-issue-for-discussion btn btn-default discussion-create-issue-btn">
           <span v-html="mrIssueSvg"></span>
@@ -108,11 +113,11 @@ export default {
         class="btn-group"
         role="group">
         <button
-          @click="jumpToFirstDiscussion"
           v-tooltip
           title="Jump to first unresolved discussion"
           data-container="body"
-          class="btn btn-default discussion-next-btn">
+          class="btn btn-default discussion-next-btn"
+          @click="jumpToFirstUnresolvedDiscussion">
           <span v-html="nextDiscussionSvg"></span>
         </button>
       </div>
diff --git a/app/assets/javascripts/notes/components/discussion_locked_widget.vue b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
index 13283b187d1..de0a5f8489b 100644
--- a/app/assets/javascripts/notes/components/discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
@@ -14,8 +14,8 @@ export default {
   <div class="disabled-comment text-center">
     <span class="issuable-note-warning inline">
       <icon
-        name="lock"
         :size="16"
+        name="lock"
         class="icon"
       />
       <span>
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index a7e2d857013..cdbbb342331 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -27,6 +27,10 @@ export default {
       type: Number,
       required: true,
     },
+    noteUrl: {
+      type: String,
+      required: true,
+    },
     accessLevel: {
       type: String,
       required: false,
@@ -40,10 +44,19 @@ export default {
       type: Boolean,
       required: true,
     },
+    canAwardEmoji: {
+      type: Boolean,
+      required: true,
+    },
     canDelete: {
       type: Boolean,
       required: true,
     },
+    canResolve: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     resolvable: {
       type: Boolean,
       required: false,
@@ -74,9 +87,6 @@ export default {
     shouldShowActionsDropdown() {
       return this.currentUserId && (this.canEdit || this.canReportAsAbuse);
     },
-    canAddAwardEmoji() {
-      return this.currentUserId;
-    },
     isAuthoredByCurrentUser() {
       return this.authorId === this.currentUserId;
     },
@@ -124,16 +134,16 @@ export default {
       {{ accessLevel }}
     </span>
     <div
-      v-if="resolvable"
+      v-if="canResolve"
       class="note-actions-item">
       <button
         v-tooltip
-        @click="onResolve"
         :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
         :title="resolveButtonTitle"
         :aria-label="resolveButtonTitle"
         type="button"
-        class="line-resolve-btn note-action-button">
+        class="line-resolve-btn note-action-button"
+        @click="onResolve">
         <template v-if="!isResolving">
           <div
             v-if="isResolved"
@@ -149,7 +159,7 @@ export default {
       </button>
     </div>
     <div
-      v-if="canAddAwardEmoji"
+      v-if="canAwardEmoji"
       class="note-actions-item">
       <a
         v-tooltip
@@ -163,16 +173,16 @@ export default {
       >
         <loading-icon :inline="true" />
         <span
-          v-html="emojiSmiling"
-          class="link-highlight award-control-icon-neutral">
+          class="link-highlight award-control-icon-neutral"
+          v-html="emojiSmiling">
         </span>
         <span
-          v-html="emojiSmiley"
-          class="link-highlight award-control-icon-positive">
+          class="link-highlight award-control-icon-positive"
+          v-html="emojiSmiley">
         </span>
         <span
-          v-html="emojiSmile"
-          class="link-highlight award-control-icon-super-positive">
+          class="link-highlight award-control-icon-super-positive"
+          v-html="emojiSmile">
         </span>
       </a>
     </div>
@@ -180,16 +190,16 @@ export default {
       v-if="canEdit"
       class="note-actions-item">
       <button
-        @click="onEdit"
         v-tooltip
         type="button"
         title="Edit comment"
         class="note-action-button js-note-edit btn btn-transparent"
         data-container="body"
-        data-placement="bottom">
+        data-placement="bottom"
+        @click="onEdit">
         <span
-          v-html="editSvg"
-          class="link-highlight">
+          class="link-highlight"
+          v-html="editSvg">
         </span>
       </button>
     </div>
@@ -215,11 +225,20 @@ export default {
             Report as abuse
           </a>
         </li>
+        <li>
+          <button
+            :data-clipboard-text="noteUrl"
+            type="button"
+            css-class="btn-default btn-transparent"
+          >
+            Copy link
+          </button>
+        </li>
         <li v-if="canEdit">
           <button
-            @click.prevent="onDelete"
             class="btn btn-transparent js-note-delete js-note-delete"
-            type="button">
+            type="button"
+            @click.prevent="onDelete">
             <span class="text-danger">
               Delete comment
             </span>
diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
index 6cb8229e268..521b4d16286 100644
--- a/app/assets/javascripts/notes/components/note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -28,6 +28,10 @@ export default {
       type: Number,
       required: true,
     },
+    canAwardEmoji: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     ...mapGetters(['getUserData']),
@@ -67,9 +71,6 @@ export default {
     isAuthoredByMe() {
       return this.noteAuthorId === this.getUserData.id;
     },
-    isLoggedIn() {
-      return this.getUserData.id;
-    },
   },
   created() {
     this.emojiSmiling = emojiSmiling;
@@ -156,7 +157,7 @@ export default {
       return title;
     },
     handleAward(awardName) {
-      if (!this.isLoggedIn) {
+      if (!this.canAwardEmoji) {
         return;
       }
 
@@ -198,17 +199,17 @@ export default {
         :key="index"
         :class="getAwardClassBindings(awardList, awardName)"
         :title="awardTitle(awardList)"
-        @click="handleAward(awardName)"
         class="btn award-control"
         data-placement="bottom"
-        type="button">
+        type="button"
+        @click="handleAward(awardName)">
         <span v-html="getAwardHTML(awardName)"></span>
         <span class="award-control-text js-counter">
           {{ awardList.length }}
         </span>
       </button>
       <div
-        v-if="isLoggedIn"
+        v-if="canAwardEmoji"
         class="award-menu-holder">
         <button
           v-tooltip
@@ -219,16 +220,16 @@ export default {
           data-placement="bottom"
           type="button">
           <span
-            v-html="emojiSmiling"
-            class="award-control-icon award-control-icon-neutral">
+            class="award-control-icon award-control-icon-neutral"
+            v-html="emojiSmiling">
           </span>
           <span
-            v-html="emojiSmiley"
-            class="award-control-icon award-control-icon-positive">
+            class="award-control-icon award-control-icon-positive"
+            v-html="emojiSmiley">
           </span>
           <span
-            v-html="emojiSmile"
-            class="award-control-icon award-control-icon-super-positive">
+            class="award-control-icon award-control-icon-super-positive"
+            v-html="emojiSmile">
           </span>
           <i
             aria-hidden="true"
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index 069f94c5845..d2db68df98e 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -40,7 +40,7 @@ export default {
     this.initTaskList();
 
     if (this.isEditing) {
-      this.initAutoSave(this.note.noteable_type);
+      this.initAutoSave(this.note);
     }
   },
   updated() {
@@ -49,7 +49,7 @@ export default {
 
     if (this.isEditing) {
       if (!this.autosave) {
-        this.initAutoSave(this.note.noteable_type);
+        this.initAutoSave(this.note);
       } else {
         this.setAutoSave();
       }
@@ -72,7 +72,7 @@ export default {
       this.$emit('handleFormUpdate', note, parentElement, callback);
     },
     formCancelHandler(shouldConfirm, isDirty) {
-      this.$emit('cancelFormEdition', shouldConfirm, isDirty);
+      this.$emit('cancelForm', shouldConfirm, isDirty);
     },
   },
 };
@@ -80,20 +80,20 @@ export default {
 
 <template>
   <div
-    :class="{ 'js-task-list-container': canEdit }"
     ref="note-body"
+    :class="{ 'js-task-list-container': canEdit }"
     class="note-body">
     <div
-      v-html="note.note_html"
-      class="note-text md"></div>
+      class="note-text md"
+      v-html="note.note_html"></div>
     <note-form
       v-if="isEditing"
       ref="noteForm"
-      @handleFormUpdate="handleFormUpdate"
-      @cancelFormEdition="formCancelHandler"
       :is-editing="isEditing"
       :note-body="noteBody"
       :note-id="note.id"
+      @handleFormUpdate="handleFormUpdate"
+      @cancelForm="formCancelHandler"
     />
     <textarea
       v-if="canEdit"
@@ -105,6 +105,7 @@ export default {
       :edited-at="note.last_edited_at"
       :edited-by="note.last_edited_by"
       action-text="Edited"
+      class="note_edited_ago"
     />
     <note-awards-list
       v-if="note.award_emoji.length"
@@ -112,6 +113,7 @@ export default {
       :note-author-id="note.author.id"
       :awards="note.award_emoji"
       :toggle-award-path="note.toggle_award_path"
+      :can-award-emoji="note.current_user.can_award_emoji"
     />
     <note-attachment
       v-if="note.attachment"
diff --git a/app/assets/javascripts/notes/components/note_edited_text.vue b/app/assets/javascripts/notes/components/note_edited_text.vue
index 4ddca918495..391bb2ae179 100644
--- a/app/assets/javascripts/notes/components/note_edited_text.vue
+++ b/app/assets/javascripts/notes/components/note_edited_text.vue
@@ -11,14 +11,20 @@ export default {
       type: String,
       required: true,
     },
+    actionDetailText: {
+      type: String,
+      required: false,
+      default: '',
+    },
     editedAt: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     editedBy: {
       type: Object,
       required: false,
-      default: () => ({}),
+      default: null,
     },
     className: {
       type: String,
@@ -32,10 +38,6 @@ export default {
 <template>
   <div :class="className">
     {{ actionText }}
-    <time-ago-tooltip
-      :time="editedAt"
-      tooltip-placement="bottom"
-    />
     <template v-if="editedBy">
       by
       <a
@@ -44,5 +46,10 @@ export default {
         {{ editedBy.name }}
       </a>
     </template>
+    {{ actionDetailText }}
+    <time-ago-tooltip
+      :time="editedAt"
+      tooltip-placement="bottom"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index c59a2e7a406..a4e3faa5d75 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -29,7 +29,7 @@ export default {
       required: false,
       default: 'Save comment',
     },
-    note: {
+    discussion: {
       type: Object,
       required: false,
       default: () => ({}),
@@ -38,6 +38,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    lineCode: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -66,9 +71,7 @@ export default {
       return this.getNotesDataByProp('markdownDocsPath');
     },
     quickActionsDocsPath() {
-      return !this.isEditing
-        ? this.getNotesDataByProp('quickActionsDocsPath')
-        : undefined;
+      return !this.isEditing ? this.getNotesDataByProp('quickActionsDocsPath') : undefined;
     },
     currentUserId() {
       return this.getUserDataByProp('id');
@@ -95,24 +98,17 @@ export default {
       const beforeSubmitDiscussionState = this.discussionResolved;
       this.isSubmitting = true;
 
-      this.$emit(
-        'handleFormUpdate',
-        this.updatedNoteBody,
-        this.$refs.editNoteForm,
-        () => {
-          this.isSubmitting = false;
+      this.$emit('handleFormUpdate', this.updatedNoteBody, this.$refs.editNoteForm, () => {
+        this.isSubmitting = false;
 
-          if (shouldResolve) {
-            this.resolveHandler(beforeSubmitDiscussionState);
-          }
-        },
-      );
+        if (shouldResolve) {
+          this.resolveHandler(beforeSubmitDiscussionState);
+        }
+      });
     },
     editMyLastNote() {
       if (this.updatedNoteBody === '') {
-        const lastNoteInDiscussion = this.getDiscussionLastNote(
-          this.updatedNoteBody,
-        );
+        const lastNoteInDiscussion = this.getDiscussionLastNote(this.discussion);
 
         if (lastNoteInDiscussion) {
           eventHub.$emit('enterEditMode', {
@@ -123,11 +119,7 @@ export default {
     },
     cancelHandler(shouldConfirm = false) {
       // Sends information about confirm message and if the textarea has changed
-      this.$emit(
-        'cancelFormEdition',
-        shouldConfirm,
-        this.noteBody !== this.updatedNoteBody,
-      );
+      this.$emit('cancelForm', shouldConfirm, this.noteBody !== this.updatedNoteBody);
     },
   },
 };
@@ -136,7 +128,7 @@ export default {
 <template>
   <div
     ref="editNoteForm"
-    class="note-edit-form current-note-edit-form">
+    class="note-edit-form current-note-edit-form js-discussion-note-form">
     <div
       v-if="conflictWhileEditing"
       class="js-conflict-edit-warning alert alert-danger">
@@ -150,7 +142,10 @@ export default {
       to ensure information is not lost.
     </div>
     <div class="flash-container timeline-content"></div>
-    <form class="edit-note common-note-form js-quick-submit gfm-form">
+    <form
+      :data-line-code="lineCode"
+      class="edit-note common-note-form js-quick-submit gfm-form"
+    >
 
       <issue-warning
         v-if="hasWarning(getNoteableData)"
@@ -165,15 +160,15 @@ export default {
         :add-spacing-classes="false">
         <textarea
           id="note_note"
+          ref="textarea"
+          slot="textarea"
+          :data-supports-quick-actions="!isEditing"
+          v-model="updatedNoteBody"
           name="note[note]"
-          class="note-textarea js-gfm-input
+          class="note-textarea js-gfm-input js-note-text
 js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
-          :data-supports-quick-actions="!isEditing"
           aria-label="Description"
-          v-model="updatedNoteBody"
-          ref="textarea"
-          slot="textarea"
-          placeholder="Write a comment or drag your files here..."
+          placeholder="Write a comment or drag your files here…"
           @keydown.meta.enter="handleUpdate()"
           @keydown.ctrl.enter="handleUpdate()"
           @keydown.up="editMyLastNote()"
@@ -182,24 +177,24 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
       </markdown-field>
       <div class="note-form-actions clearfix">
         <button
-          type="button"
-          @click="handleUpdate()"
           :disabled="isDisabled"
-          class="js-vue-issue-save btn btn-save">
+          type="button"
+          class="js-vue-issue-save btn btn-save js-comment-button "
+          @click="handleUpdate()">
           {{ saveButtonTitle }}
         </button>
         <button
-          v-if="note.resolvable"
-          @click.prevent="handleUpdate(true)"
+          v-if="discussion.resolvable"
           class="btn btn-nr btn-default append-right-10 js-comment-resolve-button"
+          @click.prevent="handleUpdate(true)"
         >
           {{ resolveButtonTitle }}
         </button>
         <button
-          @click="cancelHandler()"
-          class="btn btn-cancel note-edit-cancel"
-          type="button">
-          Cancel
+          class="btn btn-cancel note-edit-cancel js-close-discussion-note-form"
+          type="button"
+          @click="cancelHandler()">
+          {{ __('Discard draft') }}
         </button>
       </div>
     </form>
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index c3d1ef1fcc6..ee3580895df 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -20,11 +20,6 @@ export default {
       required: false,
       default: '',
     },
-    actionTextHtml: {
-      type: String,
-      required: false,
-      default: '',
-    },
     noteId: {
       type: Number,
       required: true,
@@ -62,6 +57,21 @@ export default {
 
 <template>
   <div class="note-header-info">
+    <div
+      v-if="includeToggle"
+      class="discussion-actions">
+      <button
+        class="note-action-button discussion-toggle-button js-vue-toggle-button"
+        type="button"
+        @click="handleToggle">
+        <i
+          :class="toggleChevronClass"
+          class="fa"
+          aria-hidden="true">
+        </i>
+        {{ __('Toggle discussion') }}
+      </button>
+    </div>
     <a :href="author.path">
       <span class="note-header-author-name">{{ author.name }}</span>
       <span class="note-headline-light">
@@ -73,15 +83,16 @@ export default {
         <template v-if="actionText">
           {{ actionText }}
         </template>
-        <span
-          v-if="actionTextHtml"
-          v-html="actionTextHtml"
-          class="system-note-message">
+        <span class="system-note-message">
+          <slot></slot>
+        </span>
+        <span class="system-note-separator">
+          &middot;
         </span>
         <a
           :href="noteTimestampLink"
-          @click="updateTargetNoteHash"
-          class="note-timestamp">
+          class="note-timestamp system-note-separator"
+          @click="updateTargetNoteHash">
           <time-ago-tooltip
             :time="createdAt"
             tooltip-placement="bottom"
@@ -95,20 +106,5 @@ export default {
         </i>
       </span>
     </span>
-    <div
-      v-if="includeToggle"
-      class="discussion-actions">
-      <button
-        @click="handleToggle"
-        class="note-action-button discussion-toggle-button js-vue-toggle-button"
-        type="button">
-        <i
-          :class="toggleChevronClass"
-          class="fa"
-          aria-hidden="true">
-        </i>
-        Toggle discussion
-      </button>
-    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index cf579c5d4dc..bee635398b3 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -1,7 +1,11 @@
 <script>
+import _ from 'underscore';
 import { mapActions, mapGetters } from 'vuex';
 import resolveDiscussionsSvg from 'icons/_icon_mr_issue.svg';
 import nextDiscussionsSvg from 'icons/_next_discussion.svg';
+import { convertObjectPropsToCamelCase, scrollToElement } from '~/lib/utils/common_utils';
+import { truncateSha } from '~/lib/utils/text_utility';
+import systemNote from '~/vue_shared/components/notes/system_note.vue';
 import Flash from '../../flash';
 import { SYSTEM_NOTE } from '../constants';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -17,9 +21,9 @@ import autosave from '../mixins/autosave';
 import noteable from '../mixins/noteable';
 import resolvable from '../mixins/resolvable';
 import tooltip from '../../vue_shared/directives/tooltip';
-import { scrollToElement } from '../../lib/utils/common_utils';
 
 export default {
+  name: 'NoteableDiscussion',
   components: {
     noteableNote,
     diffWithNote,
@@ -30,16 +34,32 @@ export default {
     noteForm,
     placeholderNote,
     placeholderSystemNote,
+    systemNote,
   },
   directives: {
     tooltip,
   },
   mixins: [autosave, noteable, resolvable],
   props: {
-    note: {
+    discussion: {
       type: Object,
       required: true,
     },
+    renderHeader: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    renderDiffFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    alwaysExpanded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -53,19 +73,27 @@ export default {
       'getNoteableData',
       'discussionCount',
       'resolvedDiscussionCount',
+      'allDiscussions',
       'unresolvedDiscussions',
     ]),
-    discussion() {
+    transformedDiscussion() {
       return {
-        ...this.note.notes[0],
-        truncatedDiffLines: this.note.truncated_diff_lines,
-        diffFile: this.note.diff_file,
-        diffDiscussion: this.note.diff_discussion,
-        imageDiffHtml: this.note.image_diff_html,
+        ...this.discussion.notes[0],
+        truncatedDiffLines: this.discussion.truncated_diff_lines || [],
+        truncatedDiffLinesPath: this.discussion.truncated_diff_lines_path,
+        diffFile: this.discussion.diff_file,
+        diffDiscussion: this.discussion.diff_discussion,
+        imageDiffHtml: this.discussion.image_diff_html,
+        active: this.discussion.active,
+        discussionPath: this.discussion.discussion_path,
+        resolved: this.discussion.resolved,
+        resolvedBy: this.discussion.resolved_by,
+        resolvedByPush: this.discussion.resolved_by_push,
+        resolvedAt: this.discussion.resolved_at,
       };
     },
     author() {
-      return this.discussion.author;
+      return this.transformedDiscussion.author;
     },
     canReply() {
       return this.getNoteableData.current_user.can_create_note;
@@ -74,7 +102,7 @@ export default {
       return this.getNoteableData.create_note_path;
     },
     lastUpdatedBy() {
-      const { notes } = this.note;
+      const { notes } = this.discussion;
 
       if (notes.length > 1) {
         return notes[notes.length - 1].author;
@@ -83,7 +111,7 @@ export default {
       return null;
     },
     lastUpdatedAt() {
-      const { notes } = this.note;
+      const { notes } = this.discussion;
 
       if (notes.length > 1) {
         return notes[notes.length - 1].created_at;
@@ -91,27 +119,40 @@ export default {
 
       return null;
     },
-    hasUnresolvedDiscussion() {
-      return this.unresolvedDiscussions.length > 0;
+    resolvedText() {
+      return this.transformedDiscussion.resolvedByPush ? 'Automatically resolved' : 'Resolved';
+    },
+    hasMultipleUnresolvedDiscussions() {
+      return this.unresolvedDiscussions.length > 1;
+    },
+    shouldRenderDiffs() {
+      const { diffDiscussion, diffFile } = this.transformedDiscussion;
+
+      return diffDiscussion && diffFile && this.renderDiffFile;
     },
     wrapperComponent() {
-      return this.discussion.diffDiscussion && this.discussion.diffFile
-        ? diffWithNote
-        : 'div';
+      return this.shouldRenderDiffs ? diffWithNote : 'div';
+    },
+    wrapperComponentProps() {
+      if (this.shouldRenderDiffs) {
+        return { discussion: convertObjectPropsToCamelCase(this.discussion) };
+      }
+
+      return {};
     },
     wrapperClass() {
-      return this.isDiffDiscussion ? '' : 'panel panel-default';
+      return this.isDiffDiscussion ? '' : 'card discussion-wrapper';
     },
   },
   mounted() {
     if (this.isReplying) {
-      this.initAutoSave(this.discussion.noteable_type);
+      this.initAutoSave(this.transformedDiscussion);
     }
   },
   updated() {
     if (this.isReplying) {
       if (!this.autosave) {
-        this.initAutoSave(this.discussion.noteable_type);
+        this.initAutoSave(this.transformedDiscussion);
       } else {
         this.setAutoSave();
       }
@@ -127,7 +168,9 @@ export default {
       'toggleDiscussion',
       'removePlaceholderNotes',
       'toggleResolveNote',
+      'expandDiscussion',
     ]),
+    truncateSha,
     componentName(note) {
       if (note.isPlaceholderNote) {
         if (note.placeholderType === SYSTEM_NOTE) {
@@ -136,23 +179,25 @@ export default {
         return placeholderNote;
       }
 
+      if (note.system) {
+        return systemNote;
+      }
+
       return noteableNote;
     },
     componentData(note) {
-      return note.isPlaceholderNote ? this.note.notes[0] : note;
+      return note.isPlaceholderNote ? this.discussion.notes[0] : note;
     },
     toggleDiscussionHandler() {
-      this.toggleDiscussion({ discussionId: this.note.id });
+      this.toggleDiscussion({ discussionId: this.discussion.id });
     },
     showReplyForm() {
       this.isReplying = true;
     },
     cancelReplyForm(shouldConfirm) {
       if (shouldConfirm && this.$refs.noteForm.isDirty) {
-        const msg = 'Are you sure you want to cancel creating this comment?';
-
         // eslint-disable-next-line no-alert
-        if (!confirm(msg)) {
+        if (!window.confirm('Are you sure you want to cancel creating this comment?')) {
           return;
         }
       }
@@ -161,18 +206,23 @@ export default {
       this.isReplying = false;
     },
     saveReply(noteText, form, callback) {
+      const postData = {
+        in_reply_to_discussion_id: this.discussion.reply_id,
+        target_type: this.getNoteableData.targetType,
+        note: { note: noteText },
+      };
+
+      if (this.discussion.for_commit) {
+        postData.note_project_id = this.discussion.project_id;
+      }
+
       const replyData = {
         endpoint: this.newNotePath,
         flashContainer: this.$el,
-        data: {
-          in_reply_to_discussion_id: this.note.reply_id,
-          target_type: this.noteableType,
-          target_id: this.discussion.noteable_id,
-          note: { note: noteText },
-        },
+        data: postData,
       };
-      this.isReplying = false;
 
+      this.isReplying = false;
       this.saveNote(replyData)
         .then(() => {
           this.resetAutoSave();
@@ -190,15 +240,19 @@ Please check your network connection and try again.`;
           });
         });
     },
-    jumpToDiscussion() {
+    jumpToNextDiscussion() {
+      const discussionIds = this.allDiscussions.map(d => d.id);
       const unresolvedIds = this.unresolvedDiscussions.map(d => d.id);
-      const index = unresolvedIds.indexOf(this.note.id);
+      const currentIndex = discussionIds.indexOf(this.discussion.id);
+      const remainingAfterCurrent = discussionIds.slice(currentIndex + 1);
+      const nextIndex = _.findIndex(remainingAfterCurrent, id => unresolvedIds.indexOf(id) > -1);
 
-      if (index >= 0 && index !== unresolvedIds.length) {
-        const nextId = unresolvedIds[index + 1];
+      if (nextIndex > -1) {
+        const nextId = remainingAfterCurrent[nextIndex];
         const el = document.querySelector(`[data-discussion-id="${nextId}"]`);
 
         if (el) {
+          this.expandDiscussion({ discussionId: nextId });
           scrollToElement(el);
         }
       }
@@ -208,9 +262,7 @@ Please check your network connection and try again.`;
 </script>
 
 <template>
-  <li
-    :data-discussion-id="note.id"
-    class="note note-discussion timeline-entry">
+  <li class="note note-discussion timeline-entry">
     <div class="timeline-entry-inner">
       <div class="timeline-icon">
         <user-avatar-link
@@ -221,20 +273,52 @@ Please check your network connection and try again.`;
         />
       </div>
       <div class="timeline-content">
-        <div class="discussion">
-          <div class="discussion-header">
+        <div
+          :data-discussion-id="transformedDiscussion.discussion_id"
+          class="discussion js-discussion-container"
+        >
+          <div
+            v-if="renderHeader"
+            class="discussion-header"
+          >
             <note-header
               :author="author"
-              :created-at="discussion.created_at"
-              :note-id="discussion.id"
+              :created-at="transformedDiscussion.created_at"
+              :note-id="transformedDiscussion.id"
               :include-toggle="true"
-              :expanded="note.expanded"
+              :expanded="discussion.expanded"
               @toggleHandler="toggleDiscussionHandler"
-              action-text="started a discussion"
-              class="discussion"
+            >
+              <template v-if="transformedDiscussion.diffDiscussion">
+                started a discussion on
+                <a :href="transformedDiscussion.discussionPath">
+                  <template v-if="transformedDiscussion.active">
+                    the diff
+                  </template>
+                  <template v-else>
+                    an old version of the diff
+                  </template>
+                </a>
+              </template>
+              <template v-else-if="discussion.for_commit">
+                started a discussion on commit
+                <a :href="discussion.discussion_path">
+                  {{ truncateSha(discussion.commit_id) }}
+                </a>
+              </template>
+              <template v-else>
+                started a discussion
+              </template>
+            </note-header>
+            <note-edited-text
+              v-if="transformedDiscussion.resolved"
+              :edited-at="transformedDiscussion.resolvedAt"
+              :edited-by="transformedDiscussion.resolvedBy"
+              :action-text="resolvedText"
+              class-name="discussion-headline-light js-discussion-headline"
             />
             <note-edited-text
-              v-if="lastUpdatedAt"
+              v-else-if="lastUpdatedAt"
               :edited-at="lastUpdatedAt"
               :edited-by="lastUpdatedBy"
               action-text="Last updated"
@@ -242,17 +326,17 @@ Please check your network connection and try again.`;
             />
           </div>
           <div
-            v-if="note.expanded"
+            v-if="discussion.expanded || alwaysExpanded"
             class="discussion-body">
             <component
               :is="wrapperComponent"
-              :discussion="discussion"
+              v-bind="wrapperComponentProps"
               :class="wrapperClass"
             >
               <div class="discussion-notes">
                 <ul class="notes">
                   <component
-                    v-for="note in note.notes"
+                    v-for="note in discussion.notes"
                     :is="componentName(note)"
                     :note="componentData(note)"
                     :key="note.id"
@@ -260,28 +344,29 @@ Please check your network connection and try again.`;
                 </ul>
                 <div
                   :class="{ 'is-replying': isReplying }"
-                  class="discussion-reply-holder">
+                  class="discussion-reply-holder"
+                >
                   <template v-if="!isReplying && canReply">
                     <div
-                      class="btn-group-justified discussion-with-resolve-btn"
+                      class="btn-group d-flex discussion-with-resolve-btn"
                       role="group">
                       <div
-                        class="btn-group"
+                        class="btn-group w-100"
                         role="group">
                         <button
-                          @click="showReplyForm"
                           type="button"
-                          class="js-vue-discussion-reply btn btn-text-field"
-                          title="Add a reply">Reply...</button>
+                          class="js-vue-discussion-reply btn btn-text-field mr-2"
+                          title="Add a reply"
+                          @click="showReplyForm">Reply...</button>
                       </div>
                       <div
-                        v-if="note.resolvable"
+                        v-if="discussion.resolvable"
                         class="btn-group"
                         role="group">
                         <button
-                          @click="resolveHandler()"
                           type="button"
-                          class="btn btn-default"
+                          class="btn btn-default mr-2"
+                          @click="resolveHandler()"
                         >
                           <i
                             v-if="isResolving"
@@ -292,33 +377,35 @@ Please check your network connection and try again.`;
                         </button>
                       </div>
                       <div
+                        v-if="discussion.resolvable"
                         class="btn-group discussion-actions"
-                        role="group">
+                        role="group"
+                      >
                         <div
-                          v-if="note.resolvable && !discussionResolved"
+                          v-if="!discussionResolved"
                           class="btn-group"
                           role="group">
                           <a
-                            :href="note.resolve_with_issue_path"
                             v-tooltip
+                            :href="discussion.resolve_with_issue_path"
+                            :title="s__('MergeRequests|Resolve this discussion in a new issue')"
                             class="new-issue-for-discussion btn
                               btn-default discussion-create-issue-btn"
-                            title="Resolve this discussion in a new issue"
                             data-container="body"
                           >
                             <span v-html="resolveDiscussionsSvg"></span>
                           </a>
                         </div>
                         <div
-                          v-if="hasUnresolvedDiscussion"
+                          v-if="hasMultipleUnresolvedDiscussions"
                           class="btn-group"
                           role="group">
                           <button
-                            @click="jumpToDiscussion"
                             v-tooltip
                             class="btn btn-default discussion-next-btn"
                             title="Jump to next unresolved discussion"
                             data-container="body"
+                            @click="jumpToNextDiscussion"
                           >
                             <span v-html="nextDiscussionsSvg"></span>
                           </button>
@@ -328,12 +415,12 @@ Please check your network connection and try again.`;
                   </template>
                   <note-form
                     v-if="isReplying"
-                    save-button-title="Comment"
-                    :note="note"
+                    ref="noteForm"
+                    :discussion="discussion"
                     :is-editing="false"
+                    save-button-title="Comment"
                     @handleFormUpdate="saveReply"
-                    @cancelFormEdition="cancelReplyForm"
-                    ref="noteForm" />
+                    @cancelForm="cancelReplyForm" />
                   <note-signed-out-widget v-if="!canReply" />
                 </div>
               </div>
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 3554027d2b4..4ebeb5599f2 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -12,6 +12,7 @@ import noteable from '../mixins/noteable';
 import resolvable from '../mixins/resolvable';
 
 export default {
+  name: 'NoteableNote',
   components: {
     userAvatarLink,
     noteHeader,
@@ -34,26 +35,31 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['targetNoteHash', 'getUserData']),
+    ...mapGetters(['targetNoteHash', 'getNoteableData', 'getUserData']),
     author() {
       return this.note.author;
     },
     classNameBindings() {
       return {
+        [`note-row-${this.note.id}`]: true,
         'is-editing': this.isEditing && !this.isRequesting,
         'is-requesting being-posted': this.isRequesting,
         'disabled-content': this.isDeleting,
-        target: this.targetNoteHash === this.noteAnchorId,
+        target: this.isTarget,
       };
     },
+    canResolve() {
+      return this.note.resolvable && !!this.getUserData.id;
+    },
     canReportAsAbuse() {
-      return (
-        this.note.report_abuse_path && this.author.id !== this.getUserData.id
-      );
+      return this.note.report_abuse_path && this.author.id !== this.getUserData.id;
     },
     noteAnchorId() {
       return `note_${this.note.id}`;
     },
+    isTarget() {
+      return this.targetNoteHash === this.noteAnchorId;
+    },
   },
 
   created() {
@@ -65,19 +71,20 @@ export default {
     });
   },
 
+  mounted() {
+    if (this.isTarget) {
+      this.scrollToNoteIfNeeded($(this.$el));
+    }
+  },
+
   methods: {
-    ...mapActions([
-      'deleteNote',
-      'updateNote',
-      'toggleResolveNote',
-      'scrollToNoteIfNeeded',
-    ]),
+    ...mapActions(['deleteNote', 'updateNote', 'toggleResolveNote', 'scrollToNoteIfNeeded']),
     editHandler() {
       this.isEditing = true;
     },
     deleteHandler() {
       // eslint-disable-next-line no-alert
-      if (confirm('Are you sure you want to delete this comment?')) {
+      if (window.confirm('Are you sure you want to delete this comment?')) {
         this.isDeleting = true;
 
         this.deleteNote(this.note)
@@ -85,9 +92,7 @@ export default {
             this.isDeleting = false;
           })
           .catch(() => {
-            Flash(
-              'Something went wrong while deleting your note. Please try again.',
-            );
+            Flash('Something went wrong while deleting your note. Please try again.');
             this.isDeleting = false;
           });
       }
@@ -96,7 +101,7 @@ export default {
       const data = {
         endpoint: this.note.path,
         note: {
-          target_type: this.noteableType,
+          target_type: this.getNoteableData.targetType,
           target_id: this.note.noteable_id,
           note: { note: noteText },
         },
@@ -118,8 +123,7 @@ export default {
           this.isRequesting = false;
           this.isEditing = true;
           this.$nextTick(() => {
-            const msg =
-              'Something went wrong while editing your comment. Please try again.';
+            const msg = 'Something went wrong while editing your comment. Please try again.';
             Flash(msg, 'alert', this.$el);
             this.recoverNoteContent(noteText);
             callback();
@@ -129,8 +133,7 @@ export default {
     formCancelHandler(shouldConfirm, isDirty) {
       if (shouldConfirm && isDirty) {
         // eslint-disable-next-line no-alert
-        if (!confirm('Are you sure you want to cancel editing this comment?'))
-          return;
+        if (!window.confirm('Are you sure you want to cancel editing this comment?')) return;
       }
       this.$refs.noteBody.resetAutoSave();
       if (this.oldContent) {
@@ -143,7 +146,7 @@ export default {
       // we need to do this to prevent noteForm inconsistent content warning
       // this is something we intentionally do so we need to recover the content
       this.note.note = noteText;
-      this.$refs.noteBody.$refs.noteForm.note.note = noteText;
+      this.$refs.noteBody.note.note = noteText;
     },
   },
 };
@@ -151,10 +154,12 @@ export default {
 
 <template>
   <li
-    class="note timeline-entry"
     :id="noteAnchorId"
     :class="classNameBindings"
-    :data-award-url="note.toggle_award_path">
+    :data-award-url="note.toggle_award_path"
+    :data-note-id="note.id"
+    class="note timeline-entry"
+  >
     <div class="timeline-entry-inner">
       <div class="timeline-icon">
         <user-avatar-link
@@ -170,15 +175,17 @@ export default {
             :author="author"
             :created-at="note.created_at"
             :note-id="note.id"
-            action-text="commented"
           />
           <note-actions
             :author-id="author.id"
             :note-id="note.id"
+            :note-url="note.noteable_note_url"
             :access-level="note.human_access"
             :can-edit="note.current_user.can_edit"
+            :can-award-emoji="note.current_user.can_award_emoji"
             :can-delete="note.current_user.can_edit"
             :can-report-as-abuse="canReportAsAbuse"
+            :can-resolve="note.current_user.can_resolve"
             :report-abuse-path="note.report_abuse_path"
             :resolvable="note.resolvable"
             :is-resolved="note.resolved"
@@ -190,12 +197,12 @@ export default {
           />
         </div>
         <note-body
+          ref="noteBody"
           :note="note"
           :can-edit="note.current_user.can_edit"
           :is-editing="isEditing"
           @handleFormUpdate="formUpdateHandler"
-          @cancelFormEdition="formCancelHandler"
-          ref="noteBody"
+          @cancelForm="formCancelHandler"
         />
       </div>
     </div>
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index a90c6d6381d..98f8b9af168 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -1,9 +1,7 @@
 <script>
-import $ from 'jquery';
 import { mapGetters, mapActions } from 'vuex';
 import { getLocationHash } from '../../lib/utils/url_utility';
 import Flash from '../../flash';
-import store from '../stores/';
 import * as constants from '../constants';
 import noteableNote from './noteable_note.vue';
 import noteableDiscussion from './noteable_discussion.vue';
@@ -39,24 +37,23 @@ export default {
       required: false,
       default: () => ({}),
     },
+    shouldShow: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
-  store,
   data() {
     return {
       isLoading: true,
     };
   },
   computed: {
-    ...mapGetters(['notes', 'getNotesDataByProp', 'discussionCount']),
+    ...mapGetters(['discussions', 'getNotesDataByProp', 'discussionCount']),
     noteableType() {
-      // FIXME -- @fatihacet Get this from JSON data.
-      const { ISSUE_NOTEABLE_TYPE, MERGE_REQUEST_NOTEABLE_TYPE } = constants;
-
-      return this.noteableData.merge_params
-        ? MERGE_REQUEST_NOTEABLE_TYPE
-        : ISSUE_NOTEABLE_TYPE;
+      return this.noteableData.noteableType;
     },
-    allNotes() {
+    allDiscussions() {
       if (this.isLoading) {
         const totalNotes = parseInt(this.notesData.totalNotes, 10) || 0;
 
@@ -64,36 +61,29 @@ export default {
           isSkeletonNote: true,
         });
       }
-      return this.notes;
+      return this.discussions;
     },
   },
   created() {
     this.setNotesData(this.notesData);
     this.setNoteableData(this.noteableData);
     this.setUserData(this.userData);
+    this.setTargetNoteHash(getLocationHash());
   },
   mounted() {
     this.fetchNotes();
+    const { parentElement } = this.$el;
 
-    const parentElement = this.$el.parentElement;
-
-    if (
-      parentElement &&
-      parentElement.classList.contains('js-vue-notes-event')
-    ) {
+    if (parentElement && parentElement.classList.contains('js-vue-notes-event')) {
       parentElement.addEventListener('toggleAward', event => {
         const { awardName, noteId } = event.detail;
         this.actionToggleAward({ awardName, noteId });
       });
     }
-    document.addEventListener('refreshVueNotes', this.fetchNotes);
-  },
-  beforeDestroy() {
-    document.removeEventListener('refreshVueNotes', this.fetchNotes);
   },
   methods: {
     ...mapActions({
-      actionFetchNotes: 'fetchNotes',
+      fetchDiscussions: 'fetchDiscussions',
       poll: 'poll',
       actionToggleAward: 'toggleAward',
       scrollToNoteIfNeeded: 'scrollToNoteIfNeeded',
@@ -102,28 +92,31 @@ export default {
       setUserData: 'setUserData',
       setLastFetchedAt: 'setLastFetchedAt',
       setTargetNoteHash: 'setTargetNoteHash',
+      toggleDiscussion: 'toggleDiscussion',
     }),
-    getComponentName(note) {
-      if (note.isSkeletonNote) {
+    getComponentName(discussion) {
+      if (discussion.isSkeletonNote) {
         return skeletonLoadingContainer;
       }
-      if (note.isPlaceholderNote) {
-        if (note.placeholderType === constants.SYSTEM_NOTE) {
+      if (discussion.isPlaceholderNote) {
+        if (discussion.placeholderType === constants.SYSTEM_NOTE) {
           return placeholderSystemNote;
         }
         return placeholderNote;
-      } else if (note.individual_note) {
-        return note.notes[0].system ? systemNote : noteableNote;
+      } else if (discussion.individual_note) {
+        return discussion.notes[0].system ? systemNote : noteableNote;
       }
 
       return noteableDiscussion;
     },
-    getComponentData(note) {
-      return note.individual_note ? note.notes[0] : note;
+    getComponentData(discussion) {
+      return discussion.individual_note ? { note: discussion.notes[0] } : { discussion };
     },
     fetchNotes() {
-      return this.actionFetchNotes(this.getNotesDataByProp('discussionsPath'))
-        .then(() => this.initPolling())
+      return this.fetchDiscussions(this.getNotesDataByProp('discussionsPath'))
+        .then(() => {
+          this.initPolling();
+        })
         .then(() => {
           this.isLoading = false;
         })
@@ -131,9 +124,7 @@ export default {
         .then(() => this.checkLocationHash())
         .catch(() => {
           this.isLoading = false;
-          Flash(
-            'Something went wrong while fetching comments. Please try again.',
-          );
+          Flash('Something went wrong while fetching comments. Please try again.');
         });
     },
     initPolling() {
@@ -148,11 +139,19 @@ export default {
     },
     checkLocationHash() {
       const hash = getLocationHash();
-      const element = document.getElementById(hash);
+      const noteId = hash && hash.replace(/^note_/, '');
 
-      if (hash && element) {
-        this.setTargetNoteHash(hash);
-        this.scrollToNoteIfNeeded($(element));
+      if (noteId) {
+        this.discussions.forEach(discussion => {
+          if (discussion.notes) {
+            discussion.notes.forEach(note => {
+              if (`${note.id}` === `${noteId}`) {
+                // FIXME: this modifies the store state without using a mutation/action
+                Object.assign(discussion, { expanded: true });
+              }
+            });
+          }
+        });
       }
     },
   },
@@ -160,16 +159,18 @@ export default {
 </script>
 
 <template>
-  <div id="notes">
+  <div
+    v-if="shouldShow"
+    id="notes">
     <ul
       id="notes-list"
       class="notes main-notes-list timeline">
 
       <component
-        v-for="note in allNotes"
-        :is="getComponentName(note)"
-        :note="getComponentData(note)"
-        :key="note.id"
+        v-for="discussion in allDiscussions"
+        :is="getComponentName(discussion)"
+        v-bind="getComponentData(discussion)"
+        :key="discussion.id"
       />
     </ul>
 
diff --git a/app/assets/javascripts/notes/constants.js b/app/assets/javascripts/notes/constants.js
index f4f407ffd8a..2c3e07c0506 100644
--- a/app/assets/javascripts/notes/constants.js
+++ b/app/assets/javascripts/notes/constants.js
@@ -10,6 +10,14 @@ export const CLOSED = 'closed';
 export const EMOJI_THUMBSUP = 'thumbsup';
 export const EMOJI_THUMBSDOWN = 'thumbsdown';
 export const ISSUE_NOTEABLE_TYPE = 'issue';
-export const MERGE_REQUEST_NOTEABLE_TYPE = 'merge_request';
+export const EPIC_NOTEABLE_TYPE = 'epic';
+export const MERGE_REQUEST_NOTEABLE_TYPE = 'MergeRequest';
 export const UNRESOLVE_NOTE_METHOD_NAME = 'delete';
 export const RESOLVE_NOTE_METHOD_NAME = 'post';
+export const DESCRIPTION_TYPE = 'changed the description';
+
+export const NOTEABLE_TYPE_MAPPING = {
+  Issue: ISSUE_NOTEABLE_TYPE,
+  MergeRequest: MERGE_REQUEST_NOTEABLE_TYPE,
+  Epic: EPIC_NOTEABLE_TYPE,
+};
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index f90775d0157..eed3a82854d 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -1,43 +1,49 @@
 import Vue from 'vue';
 import notesApp from './components/notes_app.vue';
+import createStore from './stores';
 
-document.addEventListener(
-  'DOMContentLoaded',
-  () =>
-    new Vue({
-      el: '#js-vue-notes',
-      components: {
-        notesApp,
-      },
-      data() {
-        const notesDataset = document.getElementById('js-vue-notes').dataset;
-        const parsedUserData = JSON.parse(notesDataset.currentUserData);
-        let currentUserData = {};
+document.addEventListener('DOMContentLoaded', () => {
+  const store = createStore();
 
-        if (parsedUserData) {
-          currentUserData = {
-            id: parsedUserData.id,
-            name: parsedUserData.name,
-            username: parsedUserData.username,
-            avatar_url: parsedUserData.avatar_path || parsedUserData.avatar_url,
-            path: parsedUserData.path,
-          };
-        }
+  return new Vue({
+    el: '#js-vue-notes',
+    components: {
+      notesApp,
+    },
+    store,
+    data() {
+      const notesDataset = document.getElementById('js-vue-notes').dataset;
+      const parsedUserData = JSON.parse(notesDataset.currentUserData);
+      const noteableData = JSON.parse(notesDataset.noteableData);
+      let currentUserData = {};
 
-        return {
-          noteableData: JSON.parse(notesDataset.noteableData),
-          currentUserData,
-          notesData: JSON.parse(notesDataset.notesData),
+      noteableData.noteableType = notesDataset.noteableType;
+      noteableData.targetType = notesDataset.targetType;
+
+      if (parsedUserData) {
+        currentUserData = {
+          id: parsedUserData.id,
+          name: parsedUserData.name,
+          username: parsedUserData.username,
+          avatar_url: parsedUserData.avatar_path || parsedUserData.avatar_url,
+          path: parsedUserData.path,
         };
-      },
-      render(createElement) {
-        return createElement('notes-app', {
-          props: {
-            noteableData: this.noteableData,
-            notesData: this.notesData,
-            userData: this.currentUserData,
-          },
-        });
-      },
-    }),
-);
+      }
+
+      return {
+        noteableData,
+        currentUserData,
+        notesData: JSON.parse(notesDataset.notesData),
+      };
+    },
+    render(createElement) {
+      return createElement('notes-app', {
+        props: {
+          noteableData: this.noteableData,
+          notesData: this.notesData,
+          userData: this.currentUserData,
+        },
+      });
+    },
+  });
+});
diff --git a/app/assets/javascripts/notes/mixins/autosave.js b/app/assets/javascripts/notes/mixins/autosave.js
index 3dff715905f..36cc8d5d056 100644
--- a/app/assets/javascripts/notes/mixins/autosave.js
+++ b/app/assets/javascripts/notes/mixins/autosave.js
@@ -4,11 +4,11 @@ import { capitalizeFirstCharacter } from '../../lib/utils/text_utility';
 
 export default {
   methods: {
-    initAutoSave(noteableType) {
+    initAutoSave(noteable) {
       this.autosave = new Autosave($(this.$refs.noteForm.$refs.textarea), [
         'Note',
-        capitalizeFirstCharacter(noteableType),
-        this.note.id,
+        capitalizeFirstCharacter(noteable.noteable_type),
+        noteable.id,
       ]);
     },
     resetAutoSave() {
diff --git a/app/assets/javascripts/notes/mixins/noteable.js b/app/assets/javascripts/notes/mixins/noteable.js
index 0da4ff49f08..bf1cd6fe5a8 100644
--- a/app/assets/javascripts/notes/mixins/noteable.js
+++ b/app/assets/javascripts/notes/mixins/noteable.js
@@ -1,22 +1,10 @@
 import * as constants from '../constants';
 
 export default {
-  props: {
-    note: {
-      type: Object,
-      required: true,
-    },
-  },
   computed: {
     noteableType() {
-      switch (this.note.noteable_type) {
-        case 'MergeRequest':
-          return constants.MERGE_REQUEST_NOTEABLE_TYPE;
-        case 'Issue':
-          return constants.ISSUE_NOTEABLE_TYPE;
-        default:
-          return '';
-      }
+      const note = this.discussion ? this.discussion.notes[0] : this.note;
+      return constants.NOTEABLE_TYPE_MAPPING[note.noteable_type];
     },
   },
 };
diff --git a/app/assets/javascripts/notes/mixins/resolvable.js b/app/assets/javascripts/notes/mixins/resolvable.js
index f79049b85f6..cd8394e0619 100644
--- a/app/assets/javascripts/notes/mixins/resolvable.js
+++ b/app/assets/javascripts/notes/mixins/resolvable.js
@@ -2,42 +2,39 @@ import Flash from '~/flash';
 import { __ } from '~/locale';
 
 export default {
-  props: {
-    note: {
-      type: Object,
-      required: true,
-    },
-  },
   computed: {
     discussionResolved() {
-      const { notes, resolved } = this.note;
+      if (this.discussion) {
+        const { notes, resolved } = this.discussion;
+
+        if (notes) {
+          // Decide resolved state using store. Only valid for discussions.
+          return notes.filter(note => !note.system).every(note => note.resolved);
+        }
 
-      if (notes) {
-        // Decide resolved state using store. Only valid for discussions.
-        return notes.every(note => note.resolved && !note.system);
+        return resolved;
       }
 
-      return resolved;
+      return this.note.resolved;
     },
     resolveButtonTitle() {
       if (this.updatedNoteBody) {
         if (this.discussionResolved) {
-          return __('Comment and unresolve discussion');
+          return __('Comment & unresolve discussion');
         }
 
-        return __('Comment and resolve discussion');
+        return __('Comment & resolve discussion');
       }
-      return this.discussionResolved
-        ? __('Unresolve discussion')
-        : __('Resolve discussion');
+
+      return this.discussionResolved ? __('Unresolve discussion') : __('Resolve discussion');
     },
   },
   methods: {
     resolveHandler(resolvedState = false) {
       this.isResolving = true;
-      const endpoint = this.note.resolve_path || `${this.note.path}/resolve`;
       const isResolved = this.discussionResolved || resolvedState;
       const discussion = this.resolveAsThread;
+      const endpoint = discussion ? this.discussion.resolve_path : `${this.note.path}/resolve`;
 
       this.toggleResolveNote({ endpoint, isResolved, discussion })
         .then(() => {
@@ -45,9 +42,8 @@ export default {
         })
         .catch(() => {
           this.isResolving = false;
-          const msg = __(
-            'Something went wrong while resolving this discussion. Please try again.',
-          );
+
+          const msg = __('Something went wrong while resolving this discussion. Please try again.');
           Flash(msg, 'alert', this.$el);
         });
     },
diff --git a/app/assets/javascripts/notes/services/notes_service.js b/app/assets/javascripts/notes/services/notes_service.js
index 7c623aac6ed..f5dce94caad 100644
--- a/app/assets/javascripts/notes/services/notes_service.js
+++ b/app/assets/javascripts/notes/services/notes_service.js
@@ -5,7 +5,7 @@ import * as constants from '../constants';
 Vue.use(VueResource);
 
 export default {
-  fetchNotes(endpoint) {
+  fetchDiscussions(endpoint) {
     return Vue.http.get(endpoint);
   },
   deleteNote(endpoint) {
@@ -22,15 +22,13 @@ export default {
   },
   toggleResolveNote(endpoint, isResolved) {
     const { RESOLVE_NOTE_METHOD_NAME, UNRESOLVE_NOTE_METHOD_NAME } = constants;
-    const method = isResolved
-      ? UNRESOLVE_NOTE_METHOD_NAME
-      : RESOLVE_NOTE_METHOD_NAME;
+    const method = isResolved ? UNRESOLVE_NOTE_METHOD_NAME : RESOLVE_NOTE_METHOD_NAME;
 
     return Vue.http[method](endpoint);
   },
   poll(data = {}) {
     const endpoint = data.notesData.notesPath;
-    const lastFetchedAt = data.lastFetchedAt;
+    const { lastFetchedAt } = data;
     const options = {
       headers: {
         'X-Last-Fetched-At': lastFetchedAt ? `${lastFetchedAt}` : undefined,
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 244a6980b5a..0a40b48257f 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import axios from '~/lib/utils/axios_utils';
 import Visibility from 'visibilityjs';
 import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
@@ -12,27 +13,29 @@ import { isInViewport, scrollToElement } from '../../lib/utils/common_utils';
 
 let eTagPoll;
 
-export const setNotesData = ({ commit }, data) =>
-  commit(types.SET_NOTES_DATA, data);
-export const setNoteableData = ({ commit }, data) =>
-  commit(types.SET_NOTEABLE_DATA, data);
-export const setUserData = ({ commit }, data) =>
-  commit(types.SET_USER_DATA, data);
-export const setLastFetchedAt = ({ commit }, data) =>
-  commit(types.SET_LAST_FETCHED_AT, data);
-export const setInitialNotes = ({ commit }, data) =>
-  commit(types.SET_INITIAL_NOTES, data);
-export const setTargetNoteHash = ({ commit }, data) =>
-  commit(types.SET_TARGET_NOTE_HASH, data);
-export const toggleDiscussion = ({ commit }, data) =>
-  commit(types.TOGGLE_DISCUSSION, data);
-
-export const fetchNotes = ({ commit }, path) =>
+export const expandDiscussion = ({ commit }, data) => commit(types.EXPAND_DISCUSSION, data);
+
+export const setNotesData = ({ commit }, data) => commit(types.SET_NOTES_DATA, data);
+
+export const setNoteableData = ({ commit }, data) => commit(types.SET_NOTEABLE_DATA, data);
+
+export const setUserData = ({ commit }, data) => commit(types.SET_USER_DATA, data);
+
+export const setLastFetchedAt = ({ commit }, data) => commit(types.SET_LAST_FETCHED_AT, data);
+
+export const setInitialNotes = ({ commit }, discussions) =>
+  commit(types.SET_INITIAL_DISCUSSIONS, discussions);
+
+export const setTargetNoteHash = ({ commit }, data) => commit(types.SET_TARGET_NOTE_HASH, data);
+
+export const toggleDiscussion = ({ commit }, data) => commit(types.TOGGLE_DISCUSSION, data);
+
+export const fetchDiscussions = ({ commit }, path) =>
   service
-    .fetchNotes(path)
+    .fetchDiscussions(path)
     .then(res => res.json())
-    .then(res => {
-      commit(types.SET_INITIAL_NOTES, res);
+    .then(discussions => {
+      commit(types.SET_INITIAL_DISCUSSIONS, discussions);
     });
 
 export const deleteNote = ({ commit }, note) =>
@@ -69,20 +72,14 @@ export const createNewNote = ({ commit }, { endpoint, data }) =>
       return res;
     });
 
-export const removePlaceholderNotes = ({ commit }) =>
-  commit(types.REMOVE_PLACEHOLDER_NOTES);
+export const removePlaceholderNotes = ({ commit }) => commit(types.REMOVE_PLACEHOLDER_NOTES);
 
-export const toggleResolveNote = (
-  { commit },
-  { endpoint, isResolved, discussion },
-) =>
+export const toggleResolveNote = ({ commit }, { endpoint, isResolved, discussion }) =>
   service
     .toggleResolveNote(endpoint, isResolved)
     .then(res => res.json())
     .then(res => {
-      const mutationType = discussion
-        ? types.UPDATE_DISCUSSION
-        : types.UPDATE_NOTE;
+      const mutationType = discussion ? types.UPDATE_DISCUSSION : types.UPDATE_NOTE;
 
       commit(mutationType, res);
     });
@@ -114,7 +111,7 @@ export const reopenIssue = ({ commit, dispatch, state }) => {
 export const toggleStateButtonLoading = ({ commit }, value) =>
   commit(types.TOGGLE_STATE_BUTTON_LOADING, value);
 
-export const emitStateChangedEvent = ({ commit, getters }, data) => {
+export const emitStateChangedEvent = ({ getters }, data) => {
   const event = new CustomEvent('issuable_vue_app:change', {
     detail: {
       data,
@@ -134,7 +131,8 @@ export const toggleIssueLocalState = ({ commit }, newState) => {
 };
 
 export const saveNote = ({ commit, dispatch }, noteData) => {
-  const { note } = noteData.data.note;
+  // For MR discussuions we need to post as `note[note]` and issue we use `note.note`.
+  const note = noteData.data['note[note]'] || noteData.data.note.note;
   let placeholderText = note;
   const hasQuickActions = utils.hasQuickActions(placeholderText);
   const replyId = noteData.data.in_reply_to_discussion_id;
@@ -179,10 +177,7 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
 
         loadAwardsHandler()
           .then(awardsHandler => {
-            awardsHandler.addAwardToEmojiBar(
-              votesBlock,
-              commandsChanges.emoji_award,
-            );
+            awardsHandler.addAwardToEmojiBar(votesBlock, commandsChanges.emoji_award);
             awardsHandler.scrollToAwards();
           })
           .catch(() => {
@@ -194,10 +189,7 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
           });
       }
 
-      if (
-        commandsChanges.spend_time != null ||
-        commandsChanges.time_estimate != null
-      ) {
+      if (commandsChanges.spend_time != null || commandsChanges.time_estimate != null) {
         sidebarTimeTrackingEventHub.$emit('timeTrackingUpdated', res);
       }
     }
@@ -211,24 +203,20 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
   });
 };
 
-const pollSuccessCallBack = (resp, commit, state, getters) => {
+const pollSuccessCallBack = (resp, commit, state, getters, dispatch) => {
   if (resp.notes && resp.notes.length) {
     const { notesById } = getters;
 
     resp.notes.forEach(note => {
       if (notesById[note.id]) {
         commit(types.UPDATE_NOTE, note);
-      } else if (
-        note.type === constants.DISCUSSION_NOTE ||
-        note.type === constants.DIFF_NOTE
-      ) {
-        const discussion = utils.findNoteObjectById(
-          state.notes,
-          note.discussion_id,
-        );
+      } else if (note.type === constants.DISCUSSION_NOTE || note.type === constants.DIFF_NOTE) {
+        const discussion = utils.findNoteObjectById(state.discussions, note.discussion_id);
 
         if (discussion) {
           commit(types.ADD_NEW_REPLY_TO_DISCUSSION, note);
+        } else if (note.type === constants.DIFF_NOTE) {
+          dispatch('fetchDiscussions', state.notesData.discussionsPath);
         } else {
           commit(types.ADD_NEW_NOTE, note);
         }
@@ -243,17 +231,14 @@ const pollSuccessCallBack = (resp, commit, state, getters) => {
   return resp;
 };
 
-export const poll = ({ commit, state, getters }) => {
+export const poll = ({ commit, state, getters, dispatch }) => {
   eTagPoll = new Poll({
     resource: service,
     method: 'poll',
     data: state,
     successCallback: resp =>
-      resp
-        .json()
-        .then(data => pollSuccessCallBack(data, commit, state, getters)),
-    errorCallback: () =>
-      Flash('Something went wrong while fetching latest comments.'),
+      resp.json().then(data => pollSuccessCallBack(data, commit, state, getters, dispatch)),
+    errorCallback: () => Flash('Something went wrong while fetching latest comments.'),
   });
 
   if (!Visibility.hidden()) {
@@ -292,14 +277,11 @@ export const fetchData = ({ commit, state, getters }) => {
     .catch(() => Flash('Something went wrong while fetching latest comments.'));
 };
 
-export const toggleAward = (
-  { commit, state, getters, dispatch },
-  { awardName, noteId },
-) => {
+export const toggleAward = ({ commit, getters }, { awardName, noteId }) => {
   commit(types.TOGGLE_AWARD, { awardName, note: getters.notesById[noteId] });
 };
 
-export const toggleAwardRequest = ({ commit, getters, dispatch }, data) => {
+export const toggleAwardRequest = ({ dispatch }, data) => {
   const { endpoint, awardName } = data;
 
   return service
@@ -315,3 +297,14 @@ export const scrollToNoteIfNeeded = (context, el) => {
     scrollToElement(el);
   }
 };
+
+export const fetchDiscussionDiffLines = ({ commit }, discussion) =>
+  axios.get(discussion.truncatedDiffLinesPath).then(({ data }) => {
+    commit(types.SET_DISCUSSION_DIFF_LINES, {
+      discussionId: discussion.id,
+      diffLines: data.truncated_diff_lines,
+    });
+  });
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/notes/stores/collapse_utils.js b/app/assets/javascripts/notes/stores/collapse_utils.js
new file mode 100644
index 00000000000..fa4a1c56b20
--- /dev/null
+++ b/app/assets/javascripts/notes/stores/collapse_utils.js
@@ -0,0 +1,108 @@
+import { n__, s__, sprintf } from '~/locale';
+import { DESCRIPTION_TYPE } from '../constants';
+
+/**
+ * Changes the description from a note, returns 'changed the description n number of times'
+ */
+export const changeDescriptionNote = (note, descriptionChangedTimes, timeDifferenceMinutes) => {
+  const descriptionNote = Object.assign({}, note);
+
+  descriptionNote.note_html = sprintf(
+    s__(`MergeRequest|
+  %{paragraphStart}changed the description %{descriptionChangedTimes} times %{timeDifferenceMinutes}%{paragraphEnd}`),
+    {
+      paragraphStart: '<p dir="auto">',
+      paragraphEnd: '</p>',
+      descriptionChangedTimes,
+      timeDifferenceMinutes: n__('within %d minute ', 'within %d minutes ', timeDifferenceMinutes),
+    },
+    false,
+  );
+
+  descriptionNote.times_updated = descriptionChangedTimes;
+
+  return descriptionNote;
+};
+
+/**
+ * Checks the time difference between two notes from their 'created_at' dates
+ * returns an integer
+ */
+
+export const getTimeDifferenceMinutes = (noteBeggining, noteEnd) => {
+  const descriptionNoteBegin = new Date(noteBeggining.created_at);
+  const descriptionNoteEnd = new Date(noteEnd.created_at);
+  const timeDifferenceMinutes = (descriptionNoteEnd - descriptionNoteBegin) / 1000 / 60;
+
+  return Math.ceil(timeDifferenceMinutes);
+};
+
+/**
+ * Checks if a note is a system note and if the content is description
+ *
+ * @param {Object} note
+ * @returns {Boolean}
+ */
+export const isDescriptionSystemNote = note => note.system && note.note === DESCRIPTION_TYPE;
+
+/**
+ * Collapses the system notes of a description type, e.g. Changed the description, n minutes ago
+ * the notes will collapse as long as they happen no more than 10 minutes away from each away
+ * in between the notes can be anything, another type of system note
+ * (such as 'changed the weight') or a comment.
+ *
+ * @param {Array} notes
+ * @returns {Array}
+ */
+export const collapseSystemNotes = notes => {
+  let lastDescriptionSystemNote = null;
+  let lastDescriptionSystemNoteIndex = -1;
+  let descriptionChangedTimes = 1;
+
+  return notes.slice(0).reduce((acc, currentNote) => {
+    const note = currentNote.notes[0];
+
+    if (isDescriptionSystemNote(note)) {
+      // is it the first one?
+      if (!lastDescriptionSystemNote) {
+        lastDescriptionSystemNote = note;
+        lastDescriptionSystemNoteIndex = acc.length;
+      } else if (lastDescriptionSystemNote) {
+        const timeDifferenceMinutes = getTimeDifferenceMinutes(
+          lastDescriptionSystemNote,
+          note,
+        );
+
+        // are they less than 10 minutes appart?
+        if (timeDifferenceMinutes > 10) {
+          // reset counter
+          descriptionChangedTimes = 1;
+          // update the previous system note
+          lastDescriptionSystemNote = note;
+          lastDescriptionSystemNoteIndex = acc.length;
+        } else {
+          // increase counter
+          descriptionChangedTimes += 1;
+
+          // delete the previous one
+          acc.splice(lastDescriptionSystemNoteIndex, 1);
+
+          // replace the text of the current system note with the collapsed note.
+          currentNote.notes.splice(
+            0,
+            1,
+            changeDescriptionNote(note, descriptionChangedTimes, timeDifferenceMinutes),
+          );
+
+          // update the previous system note index
+          lastDescriptionSystemNoteIndex = acc.length;
+        }
+      }
+    }
+    acc.push(currentNote);
+    return acc;
+  }, []);
+};
+
+// for babel-rewire
+export default {};
diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js
index f89591a54d6..ab28bb48e9e 100644
--- a/app/assets/javascripts/notes/stores/getters.js
+++ b/app/assets/javascripts/notes/stores/getters.js
@@ -1,56 +1,89 @@
 import _ from 'underscore';
+import * as constants from '../constants';
+import { collapseSystemNotes } from './collapse_utils';
+
+export const discussions = state => collapseSystemNotes(state.discussions);
 
-export const notes = state => state.notes;
 export const targetNoteHash = state => state.targetNoteHash;
 
 export const getNotesData = state => state.notesData;
+
 export const getNotesDataByProp = state => prop => state.notesData[prop];
 
 export const getNoteableData = state => state.noteableData;
+
 export const getNoteableDataByProp = state => prop => state.noteableData[prop];
+
 export const openState = state => state.noteableData.state;
 
 export const getUserData = state => state.userData || {};
-export const getUserDataByProp = state => prop =>
-  state.userData && state.userData[prop];
+
+export const getUserDataByProp = state => prop => state.userData && state.userData[prop];
 
 export const notesById = state =>
-  state.notes.reduce((acc, note) => {
+  state.discussions.reduce((acc, note) => {
     note.notes.every(n => Object.assign(acc, { [n.id]: n }));
     return acc;
   }, {});
 
+export const discussionsByLineCode = state =>
+  state.discussions.reduce((acc, note) => {
+    if (note.diff_discussion && note.line_code && note.resolvable) {
+      // For context about line notes: there might be multiple notes with the same line code
+      const items = acc[note.line_code] || [];
+      items.push(note);
+
+      Object.assign(acc, { [note.line_code]: items });
+    }
+    return acc;
+  }, {});
+
+export const noteableType = state => {
+  const { ISSUE_NOTEABLE_TYPE, MERGE_REQUEST_NOTEABLE_TYPE, EPIC_NOTEABLE_TYPE } = constants;
+
+  if (state.noteableData.noteableType === EPIC_NOTEABLE_TYPE) {
+    return EPIC_NOTEABLE_TYPE;
+  }
+
+  return state.noteableData.merge_params ? MERGE_REQUEST_NOTEABLE_TYPE : ISSUE_NOTEABLE_TYPE;
+};
+
 const reverseNotes = array => array.slice(0).reverse();
+
 const isLastNote = (note, state) =>
-  !note.system &&
-  state.userData &&
-  note.author &&
-  note.author.id === state.userData.id;
+  !note.system && state.userData && note.author && note.author.id === state.userData.id;
 
 export const getCurrentUserLastNote = state =>
-  _.flatten(
-    reverseNotes(state.notes).map(note => reverseNotes(note.notes)),
-  ).find(el => isLastNote(el, state));
+  _.flatten(reverseNotes(state.discussions).map(note => reverseNotes(note.notes))).find(el =>
+    isLastNote(el, state),
+  );
 
 export const getDiscussionLastNote = state => discussion =>
   reverseNotes(discussion.notes).find(el => isLastNote(el, state));
 
 export const discussionCount = state => {
-  const discussions = state.notes.filter(n => !n.individual_note);
+  const filteredDiscussions = state.discussions.filter(n => !n.individual_note && n.resolvable);
 
-  return discussions.length;
+  return filteredDiscussions.length;
 };
 
 export const unresolvedDiscussions = (state, getters) => {
   const resolvedMap = getters.resolvedDiscussionsById;
 
-  return state.notes.filter(n => !n.individual_note && !resolvedMap[n.id]);
+  return state.discussions.filter(n => !n.individual_note && !resolvedMap[n.id]);
+};
+
+export const allDiscussions = (state, getters) => {
+  const resolved = getters.resolvedDiscussionsById;
+  const unresolved = getters.unresolvedDiscussions;
+
+  return Object.values(resolved).concat(unresolved);
 };
 
 export const resolvedDiscussionsById = state => {
   const map = {};
 
-  state.notes.forEach(n => {
+  state.discussions.forEach(n => {
     if (n.notes) {
       const resolved = n.notes.every(note => note.resolved && !note.system);
 
@@ -68,3 +101,16 @@ export const resolvedDiscussionCount = (state, getters) => {
 
   return Object.keys(resolvedMap).length;
 };
+
+export const discussionTabCounter = state => {
+  let all = [];
+
+  state.discussions.forEach(discussion => {
+    all = all.concat(discussion.notes.filter(note => !note.system && !note.placeholder));
+  });
+
+  return all.length;
+};
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/notes/stores/index.js b/app/assets/javascripts/notes/stores/index.js
index 9ed19bf171e..0f48b8880f4 100644
--- a/app/assets/javascripts/notes/stores/index.js
+++ b/app/assets/javascripts/notes/stores/index.js
@@ -3,24 +3,14 @@ import Vuex from 'vuex';
 import * as actions from './actions';
 import * as getters from './getters';
 import mutations from './mutations';
+import module from './modules';
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
-  state: {
-    notes: [],
-    targetNoteHash: null,
-    lastFetchedAt: null,
-
-    // View layer
-    isToggleStateButtonLoading: false,
-
-    // holds endpoints and permissions provided through haml
-    notesData: {},
-    userData: {},
-    noteableData: {},
-  },
-  actions,
-  getters,
-  mutations,
-});
+export default () =>
+  new Vuex.Store({
+    state: module.state,
+    actions,
+    getters,
+    mutations,
+  });
diff --git a/app/assets/javascripts/notes/stores/modules/index.js b/app/assets/javascripts/notes/stores/modules/index.js
new file mode 100644
index 00000000000..a978490c009
--- /dev/null
+++ b/app/assets/javascripts/notes/stores/modules/index.js
@@ -0,0 +1,26 @@
+import * as actions from '../actions';
+import * as getters from '../getters';
+import mutations from '../mutations';
+
+export default {
+  state: {
+    discussions: [],
+    targetNoteHash: null,
+    lastFetchedAt: null,
+
+    // View layer
+    isToggleStateButtonLoading: false,
+
+    // holds endpoints and permissions provided through haml
+    notesData: {
+      markdownDocsPath: '',
+    },
+    userData: {},
+    noteableData: {
+      current_user: {},
+    },
+  },
+  actions,
+  getters,
+  mutations,
+};
diff --git a/app/assets/javascripts/notes/stores/mutation_types.js b/app/assets/javascripts/notes/stores/mutation_types.js
index b455e23ecde..caead4cb860 100644
--- a/app/assets/javascripts/notes/stores/mutation_types.js
+++ b/app/assets/javascripts/notes/stores/mutation_types.js
@@ -1,11 +1,12 @@
 export const ADD_NEW_NOTE = 'ADD_NEW_NOTE';
 export const ADD_NEW_REPLY_TO_DISCUSSION = 'ADD_NEW_REPLY_TO_DISCUSSION';
 export const DELETE_NOTE = 'DELETE_NOTE';
+export const EXPAND_DISCUSSION = 'EXPAND_DISCUSSION';
 export const REMOVE_PLACEHOLDER_NOTES = 'REMOVE_PLACEHOLDER_NOTES';
 export const SET_NOTES_DATA = 'SET_NOTES_DATA';
 export const SET_NOTEABLE_DATA = 'SET_NOTEABLE_DATA';
 export const SET_USER_DATA = 'SET_USER_DATA';
-export const SET_INITIAL_NOTES = 'SET_INITIAL_NOTES';
+export const SET_INITIAL_DISCUSSIONS = 'SET_INITIAL_DISCUSSIONS';
 export const SET_LAST_FETCHED_AT = 'SET_LAST_FETCHED_AT';
 export const SET_TARGET_NOTE_HASH = 'SET_TARGET_NOTE_HASH';
 export const SHOW_PLACEHOLDER_NOTE = 'SHOW_PLACEHOLDER_NOTE';
@@ -13,6 +14,7 @@ export const TOGGLE_AWARD = 'TOGGLE_AWARD';
 export const TOGGLE_DISCUSSION = 'TOGGLE_DISCUSSION';
 export const UPDATE_NOTE = 'UPDATE_NOTE';
 export const UPDATE_DISCUSSION = 'UPDATE_DISCUSSION';
+export const SET_DISCUSSION_DIFF_LINES = 'SET_DISCUSSION_DIFF_LINES';
 
 // Issue
 export const CLOSE_ISSUE = 'CLOSE_ISSUE';
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index c8edc06349f..ea165709e61 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -6,8 +6,8 @@ import { isInMRPage } from '../../lib/utils/common_utils';
 export default {
   [types.ADD_NEW_NOTE](state, note) {
     const { discussion_id, type } = note;
-    const [exists] = state.notes.filter(n => n.id === note.discussion_id);
-    const isDiscussion = type === constants.DISCUSSION_NOTE;
+    const [exists] = state.discussions.filter(n => n.id === note.discussion_id);
+    const isDiscussion = type === constants.DISCUSSION_NOTE || type === constants.DIFF_NOTE;
 
     if (!exists) {
       const noteData = {
@@ -25,42 +25,44 @@ export default {
         noteData.resolve_with_issue_path = note.resolve_with_issue_path;
       }
 
-      state.notes.push(noteData);
-      document.dispatchEvent(new CustomEvent('refreshLegacyNotes'));
+      state.discussions.push(noteData);
     }
   },
 
   [types.ADD_NEW_REPLY_TO_DISCUSSION](state, note) {
-    const noteObj = utils.findNoteObjectById(state.notes, note.discussion_id);
+    const noteObj = utils.findNoteObjectById(state.discussions, note.discussion_id);
 
     if (noteObj) {
       noteObj.notes.push(note);
-      document.dispatchEvent(new CustomEvent('refreshLegacyNotes'));
     }
   },
 
   [types.DELETE_NOTE](state, note) {
-    const noteObj = utils.findNoteObjectById(state.notes, note.discussion_id);
+    const noteObj = utils.findNoteObjectById(state.discussions, note.discussion_id);
 
     if (noteObj.individual_note) {
-      state.notes.splice(state.notes.indexOf(noteObj), 1);
+      state.discussions.splice(state.discussions.indexOf(noteObj), 1);
     } else {
       const comment = utils.findNoteObjectById(noteObj.notes, note.id);
       noteObj.notes.splice(noteObj.notes.indexOf(comment), 1);
 
       if (!noteObj.notes.length) {
-        state.notes.splice(state.notes.indexOf(noteObj), 1);
+        state.discussions.splice(state.discussions.indexOf(noteObj), 1);
       }
     }
+  },
+
+  [types.EXPAND_DISCUSSION](state, { discussionId }) {
+    const discussion = utils.findNoteObjectById(state.discussions, discussionId);
 
-    document.dispatchEvent(new CustomEvent('refreshLegacyNotes'));
+    discussion.expanded = true;
   },
 
   [types.REMOVE_PLACEHOLDER_NOTES](state) {
-    const { notes } = state;
+    const { discussions } = state;
 
-    for (let i = notes.length - 1; i >= 0; i -= 1) {
-      const note = notes[i];
+    for (let i = discussions.length - 1; i >= 0; i -= 1) {
+      const note = discussions[i];
       const children = note.notes;
 
       if (children.length && !note.individual_note) {
@@ -72,7 +74,7 @@ export default {
         }
       } else if (note.isPlaceholderNote) {
         // remove placeholders from state root
-        notes.splice(i, 1);
+        discussions.splice(i, 1);
       }
     }
   },
@@ -88,29 +90,29 @@ export default {
   [types.SET_USER_DATA](state, data) {
     Object.assign(state, { userData: data });
   },
-  [types.SET_INITIAL_NOTES](state, notesData) {
-    const notes = [];
+  [types.SET_INITIAL_DISCUSSIONS](state, discussionsData) {
+    const discussions = [];
 
-    notesData.forEach(note => {
+    discussionsData.forEach(discussion => {
       // To support legacy notes, should be very rare case.
-      if (note.individual_note && note.notes.length > 1) {
-        note.notes.forEach(n => {
-          notes.push({
-            ...note,
+      if (discussion.individual_note && discussion.notes.length > 1) {
+        discussion.notes.forEach(n => {
+          discussions.push({
+            ...discussion,
             notes: [n], // override notes array to only have one item to mimick individual_note
           });
         });
       } else {
-        const oldNote = utils.findNoteObjectById(state.notes, note.id);
+        const oldNote = utils.findNoteObjectById(state.discussions, discussion.id);
 
-        notes.push({
-          ...note,
-          expanded: oldNote ? oldNote.expanded : note.expanded,
+        discussions.push({
+          ...discussion,
+          expanded: oldNote ? oldNote.expanded : discussion.expanded,
         });
       }
     });
 
-    Object.assign(state, { notes });
+    Object.assign(state, { discussions });
   },
 
   [types.SET_LAST_FETCHED_AT](state, fetchedAt) {
@@ -122,17 +124,17 @@ export default {
   },
 
   [types.SHOW_PLACEHOLDER_NOTE](state, data) {
-    let notesArr = state.notes;
-    if (data.replyId) {
-      notesArr = utils.findNoteObjectById(notesArr, data.replyId).notes;
+    let notesArr = state.discussions;
+
+    const existingDiscussion = utils.findNoteObjectById(notesArr, data.replyId);
+    if (existingDiscussion) {
+      notesArr = existingDiscussion.notes;
     }
 
     notesArr.push({
       individual_note: true,
       isPlaceholderNote: true,
-      placeholderType: data.isSystemNote
-        ? constants.SYSTEM_NOTE
-        : constants.NOTE,
+      placeholderType: data.isSystemNote ? constants.SYSTEM_NOTE : constants.NOTE,
       notes: [
         {
           body: data.noteBody,
@@ -151,28 +153,23 @@ export default {
 
     if (hasEmojiAwardedByCurrentUser.length) {
       // If current user has awarded this emoji, remove it.
-      note.award_emoji.splice(
-        note.award_emoji.indexOf(hasEmojiAwardedByCurrentUser[0]),
-        1,
-      );
+      note.award_emoji.splice(note.award_emoji.indexOf(hasEmojiAwardedByCurrentUser[0]), 1);
     } else {
       note.award_emoji.push({
         name: awardName,
         user: { id, name, username },
       });
     }
-
-    document.dispatchEvent(new CustomEvent('refreshLegacyNotes'));
   },
 
   [types.TOGGLE_DISCUSSION](state, { discussionId }) {
-    const discussion = utils.findNoteObjectById(state.notes, discussionId);
+    const discussion = utils.findNoteObjectById(state.discussions, discussionId);
 
     discussion.expanded = !discussion.expanded;
   },
 
   [types.UPDATE_NOTE](state, note) {
-    const noteObj = utils.findNoteObjectById(state.notes, note.discussion_id);
+    const noteObj = utils.findNoteObjectById(state.discussions, note.discussion_id);
 
     if (noteObj.individual_note) {
       noteObj.notes.splice(0, 1, note);
@@ -180,24 +177,20 @@ export default {
       const comment = utils.findNoteObjectById(noteObj.notes, note.id);
       noteObj.notes.splice(noteObj.notes.indexOf(comment), 1, note);
     }
-
-    // document.dispatchEvent(new CustomEvent('refreshLegacyNotes'));
   },
 
   [types.UPDATE_DISCUSSION](state, noteData) {
     const note = noteData;
     let index = 0;
 
-    state.notes.forEach((n, i) => {
+    state.discussions.forEach((n, i) => {
       if (n.id === note.id) {
         index = i;
       }
     });
 
     note.expanded = true; // override expand flag to prevent collapse
-    state.notes.splice(index, 1, note);
-
-    document.dispatchEvent(new CustomEvent('refreshLegacyNotes'));
+    state.discussions.splice(index, 1, note);
   },
 
   [types.CLOSE_ISSUE](state) {
@@ -211,4 +204,15 @@ export default {
   [types.TOGGLE_STATE_BUTTON_LOADING](state, value) {
     Object.assign(state, { isToggleStateButtonLoading: value });
   },
+
+  [types.SET_DISCUSSION_DIFF_LINES](state, { discussionId, diffLines }) {
+    const discussion = utils.findNoteObjectById(state.discussions, discussionId);
+    const index = state.discussions.indexOf(discussion);
+
+    const discussionWithDiffLines = Object.assign({}, discussion, {
+      truncated_diff_lines: diffLines,
+    });
+
+    state.discussions.splice(index, 1, discussionWithDiffLines);
+  },
 };
diff --git a/app/assets/javascripts/notifications_form.js b/app/assets/javascripts/notifications_form.js
index 9e6cf67dff0..00e27ca0e70 100644
--- a/app/assets/javascripts/notifications_form.js
+++ b/app/assets/javascripts/notifications_form.js
@@ -15,7 +15,7 @@ export default class NotificationsForm {
 
   toggleCheckbox(e) {
     const $checkbox = $(e.currentTarget);
-    const $parent = $checkbox.closest('.checkbox');
+    const $parent = $checkbox.closest('.form-check');
 
     this.saveEvent($checkbox, $parent);
   }
diff --git a/app/assets/javascripts/pages/admin/admin.js b/app/assets/javascripts/pages/admin/admin.js
index 91f154b7ecd..ff4d6ab15f9 100644
--- a/app/assets/javascripts/pages/admin/admin.js
+++ b/app/assets/javascripts/pages/admin/admin.js
@@ -25,7 +25,7 @@ export default function adminInit() {
 
   $('body').on('click', '.js-toggle-colors-link', (e) => {
     e.preventDefault();
-    $('.js-toggle-colors-container').toggle();
+    $('.js-toggle-colors-container').toggleClass('hide');
   });
 
   $('.log-tabs a').on('click', function logTabsClick(e) {
diff --git a/app/assets/javascripts/pages/admin/application_settings/index.js b/app/assets/javascripts/pages/admin/application_settings/index.js
new file mode 100644
index 00000000000..48d75f5443b
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/application_settings/index.js
@@ -0,0 +1,6 @@
+import initSettingsPanels from '~/settings_panels';
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize expandable settings panels
+  initSettingsPanels();
+});
diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
index ba1d8e4d8db..bc84666779e 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
+++ b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
@@ -40,8 +40,8 @@
   <gl-modal
     id="stop-jobs-modal"
     :header-title-text="s__('AdminArea|Stop all jobs?')"
-    footer-primary-button-variant="danger"
     :footer-primary-button-text="s__('AdminArea|Stop jobs')"
+    footer-primary-button-variant="danger"
     @submit="onSubmit"
   >
     {{ text }}
diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
index 14315d5492e..ff66d3a8ac4 100644
--- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
+++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
@@ -1,11 +1,11 @@
 <script>
   import _ from 'underscore';
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { s__, sprintf } from '~/locale';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       deleteProjectUrl: {
@@ -79,13 +79,13 @@
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-project-modal"
     :title="title"
     :text="text"
-    kind="danger"
     :primary-button-label="primaryButtonLabel"
     :submit-disabled="!canSubmit"
+    kind="danger"
     @submit="onSubmit"
     @cancel="onCancel"
   >
@@ -107,19 +107,19 @@
           value="delete"
         />
         <input
+          :value="csrfToken"
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken"
         />
         <input
+          v-model="enteredProjectName"
           name="projectName"
           class="form-control"
           type="text"
-          v-model="enteredProjectName"
           aria-labelledby="input-label"
           autocomplete="off"
         />
       </form>
     </template>
-  </modal>
+  </deprecated-modal>
 </template>
diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
index 7b5e333011e..d6aa4bb95d2 100644
--- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
+++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
@@ -1,11 +1,11 @@
 <script>
   import _ from 'underscore';
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { s__, sprintf } from '~/locale';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       deleteUserUrl: {
@@ -52,16 +52,15 @@
       text() {
         const keepContributionsText = s__(`AdminArea|
           You are about to permanently delete the user %{username}.
-          This will delete all of the issues, merge requests, and groups linked to them.
+          Issues, merge requests, and groups linked to them will be transferred to a system-wide "Ghost-user".
           To avoid data loss, consider using the %{strong_start}block user%{strong_end} feature instead.
           Once you %{strong_start}Delete user%{strong_end}, it cannot be undone or recovered.`);
 
         const deleteContributionsText = s__(`AdminArea|
           You are about to permanently delete the user %{username}.
-          Issues, merge requests, and groups linked to them will be transferred to a system-wide "Ghost-user".
+          This will delete all of the issues, merge requests, and groups linked to them.
           To avoid data loss, consider using the %{strong_start}block user%{strong_end} feature instead.
           Once you %{strong_start}Delete user%{strong_end}, it cannot be undone or recovered.`);
-
         return sprintf(this.deleteContributions ? deleteContributionsText : keepContributionsText,
           {
             username: `<strong>${_.escape(this.username)}</strong>`,
@@ -97,7 +96,7 @@
         this.enteredUsername = '';
       },
       onSecondaryAction() {
-        const form = this.$refs.form;
+        const { form } = this.$refs;
 
         form.action = this.blockUserUrl;
         this.$refs.method.value = 'put';
@@ -113,14 +112,14 @@
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-user-modal"
     :title="title"
     :text="text"
-    kind="danger"
     :primary-button-label="primaryButtonLabel"
     :secondary-button-label="secondaryButtonLabel"
     :submit-disabled="!canSubmit"
+    kind="danger"
     @submit="onSubmit"
     @cancel="onCancel"
   >
@@ -142,15 +141,15 @@
           value="delete"
         />
         <input
+          :value="csrfToken"
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken"
         />
         <input
+          v-model="enteredUsername"
           type="text"
           name="username"
           class="form-control"
-          v-model="enteredUsername"
           aria-labelledby="input-label"
           autocomplete="off"
         />
@@ -161,14 +160,14 @@
       slot-scope="props"
     >
       <button
+        :disabled="!canSubmit"
         type="button"
         class="btn js-secondary-button btn-warning"
-        :disabled="!canSubmit"
-        @click="onSecondaryAction"
         data-dismiss="modal"
+        @click="onSecondaryAction"
       >
         {{ secondaryButtonLabel }}
       </button>
     </template>
-  </modal>
+  </deprecated-modal>
 </template>
diff --git a/app/assets/javascripts/pages/dashboard/milestones/show/index.js b/app/assets/javascripts/pages/dashboard/milestones/show/index.js
index 397149aaa9e..8b529585898 100644
--- a/app/assets/javascripts/pages/dashboard/milestones/show/index.js
+++ b/app/assets/javascripts/pages/dashboard/milestones/show/index.js
@@ -6,4 +6,6 @@ document.addEventListener('DOMContentLoaded', () => {
   new Milestone(); // eslint-disable-line no-new
   new Sidebar(); // eslint-disable-line no-new
   new MountMilestoneSidebar(); // eslint-disable-line no-new
+
+  Milestone.initDeprecationMessage();
 });
diff --git a/app/assets/javascripts/pages/dashboard/todos/index/todos.js b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
index c334eaa90f8..ff19b9a9c30 100644
--- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js
+++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
@@ -1,4 +1,4 @@
-/* eslint-disable class-methods-use-this, no-unneeded-ternary, quote-props */
+/* eslint-disable class-methods-use-this, no-unneeded-ternary */
 
 import $ from 'jquery';
 import { visitUrl } from '~/lib/utils/url_utility';
@@ -61,7 +61,7 @@ export default class Todos {
     e.stopPropagation();
     e.preventDefault();
 
-    const target = e.target;
+    const { target } = e;
     target.setAttribute('disabled', true);
     target.classList.add('disabled');
 
diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js
index bb91ac84ffb..8737f537296 100644
--- a/app/assets/javascripts/pages/groups/edit/index.js
+++ b/app/assets/javascripts/pages/groups/edit/index.js
@@ -1,9 +1,15 @@
 import groupAvatar from '~/group_avatar';
 import TransferDropdown from '~/groups/transfer_dropdown';
 import initConfirmDangerModal from '~/confirm_danger_modal';
+import initSettingsPanels from '~/settings_panels';
 
 document.addEventListener('DOMContentLoaded', () => {
   groupAvatar();
   new TransferDropdown(); // eslint-disable-line no-new
   initConfirmDangerModal();
 });
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize expandable settings panels
+  initSettingsPanels();
+});
diff --git a/app/assets/javascripts/pages/groups/issues/index.js b/app/assets/javascripts/pages/groups/issues/index.js
index d149b307e7f..914f804fdd3 100644
--- a/app/assets/javascripts/pages/groups/issues/index.js
+++ b/app/assets/javascripts/pages/groups/issues/index.js
@@ -5,6 +5,7 @@ import { FILTERED_SEARCH } from '~/pages/constants';
 document.addEventListener('DOMContentLoaded', () => {
   initFilteredSearch({
     page: FILTERED_SEARCH.ISSUES,
+    isGroupDecendent: true,
   });
   projectSelect();
 });
diff --git a/app/assets/javascripts/pages/groups/merge_requests/index.js b/app/assets/javascripts/pages/groups/merge_requests/index.js
index a5cc1f34b63..1600faa3611 100644
--- a/app/assets/javascripts/pages/groups/merge_requests/index.js
+++ b/app/assets/javascripts/pages/groups/merge_requests/index.js
@@ -5,6 +5,7 @@ import { FILTERED_SEARCH } from '~/pages/constants';
 document.addEventListener('DOMContentLoaded', () => {
   initFilteredSearch({
     page: FILTERED_SEARCH.MERGE_REQUESTS,
+    isGroupDecendent: true,
   });
   projectSelect();
 });
diff --git a/app/assets/javascripts/pages/groups/milestones/show/index.js b/app/assets/javascripts/pages/groups/milestones/show/index.js
index 88f40b5278e..74cc4ba42c1 100644
--- a/app/assets/javascripts/pages/groups/milestones/show/index.js
+++ b/app/assets/javascripts/pages/groups/milestones/show/index.js
@@ -1,3 +1,8 @@
 import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show';
+import Milestone from '~/milestone';
 
-document.addEventListener('DOMContentLoaded', initMilestonesShow);
+document.addEventListener('DOMContentLoaded', () => {
+  initMilestonesShow();
+
+  Milestone.initDeprecationMessage();
+});
diff --git a/app/assets/javascripts/pages/groups/settings/badges/index.js b/app/assets/javascripts/pages/groups/settings/badges/index.js
new file mode 100644
index 00000000000..74e96ee4a8f
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/settings/badges/index.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import { GROUP_BADGE } from '~/badges/constants';
+import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
+
+Vue.use(Translate);
+
+document.addEventListener('DOMContentLoaded', () => {
+  mountBadgeSettings(GROUP_BADGE);
+});
diff --git a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
index 04a0d8117cc..d3b2656743d 100644
--- a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
@@ -1,6 +1,10 @@
+import initSettingsPanels from '~/settings_panels';
 import AjaxVariableList from '~/ci_variable_list/ajax_variable_list';
 
 document.addEventListener('DOMContentLoaded', () => {
+  // Initialize expandable settings panels
+  initSettingsPanels();
+
   const variableListEl = document.querySelector('.js-ci-variable-list-section');
   // eslint-disable-next-line no-new
   new AjaxVariableList({
diff --git a/app/assets/javascripts/pages/ide/index.js b/app/assets/javascripts/pages/ide/index.js
new file mode 100644
index 00000000000..efadf6967aa
--- /dev/null
+++ b/app/assets/javascripts/pages/ide/index.js
@@ -0,0 +1,9 @@
+import { initIde, resetServiceWorkersPublicPath } from '~/ide/index';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const ideElement = document.getElementById('ide');
+  if (ideElement) {
+    resetServiceWorkersPublicPath();
+    initIde(ideElement);
+  }
+});
diff --git a/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js b/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js
new file mode 100644
index 00000000000..edd7e38471b
--- /dev/null
+++ b/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js
@@ -0,0 +1,3 @@
+import initU2F from '../../../shared/sessions/u2f';
+
+document.addEventListener('DOMContentLoaded', initU2F);
diff --git a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
index c43e0a0490f..4061c11ba8f 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
@@ -2,14 +2,14 @@
   import axios from '~/lib/utils/axios_utils';
 
   import Flash from '~/flash';
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { n__, s__, sprintf } from '~/locale';
   import { redirectTo } from '~/lib/utils/url_utility';
   import eventHub from '../event_hub';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       issueCount: {
@@ -92,12 +92,12 @@ Once deleted, it cannot be undone or recovered.`),
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-milestone-modal"
     :title="title"
     :text="text"
-    kind="danger"
     :primary-button-label="s__('Milestones|Delete milestone')"
+    kind="danger"
     @submit="onSubmit">
 
     <template
@@ -106,5 +106,5 @@ Once deleted, it cannot be undone or recovered.`),
       <p v-html="props.text"></p>
     </template>
 
-  </modal>
+  </deprecated-modal>
 </template>
diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
index 22248418c41..2c683a39f42 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
@@ -19,15 +19,19 @@
         type: String,
         required: true,
       },
+      groupName: {
+        type: String,
+        required: true,
+      },
     },
     computed: {
       title() {
         return sprintf(s__('Milestones|Promote %{milestoneTitle} to group milestone?'), { milestoneTitle: this.milestoneTitle });
       },
       text() {
-        return s__(`Milestones|Promoting this milestone will make it available for all projects inside the group.
+        return sprintf(s__(`Milestones|Promoting %{milestoneTitle} will make it available for all projects inside %{groupName}.
         Existing project milestones with the same title will be merged.
-        This action cannot be reversed.`);
+        This action cannot be reversed.`), { milestoneTitle: this.milestoneTitle, groupName: this.groupName });
       },
     },
     methods: {
@@ -49,8 +53,8 @@
 <template>
   <gl-modal
     id="promote-milestone-modal"
-    footer-primary-button-variant="warning"
     :footer-primary-button-text="s__('Milestones|Promote Milestone')"
+    footer-primary-button-variant="warning"
     @submit="onSubmit"
   >
     <template
diff --git a/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js
index d00f81c9094..8e79341e96a 100644
--- a/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js
+++ b/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js
@@ -25,6 +25,7 @@ export default () => {
     const modalProps = {
       milestoneTitle: button.dataset.milestoneTitle,
       url: button.dataset.url,
+      groupName: button.dataset.groupName,
     };
     eventHub.$once('promoteMilestoneModal.requestStarted', onRequestStarted);
     eventHub.$emit('promoteMilestoneModal.props', modalProps);
@@ -54,6 +55,7 @@ export default () => {
         return {
           modalProps: {
             milestoneTitle: '',
+            groupName: '',
             url: '',
           },
         };
diff --git a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
index fbdef329ab2..8e8f47c21d8 100644
--- a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
+++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
@@ -5,7 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const twoFactorNode = document.querySelector('.js-two-factor-auth');
   const skippable = twoFactorNode.dataset.twoFactorSkippable === 'true';
   if (skippable) {
-    const button = `<a class="btn btn-xs btn-warning pull-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
+    const button = `<a class="btn btn-sm btn-warning float-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
     const flashAlert = document.querySelector('.flash-alert .container-fluid');
     if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
   }
diff --git a/app/assets/javascripts/pages/ci/lints/ci_lint_editor.js b/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js
index 9ab73be80a0..9ab73be80a0 100644
--- a/app/assets/javascripts/pages/ci/lints/ci_lint_editor.js
+++ b/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js
diff --git a/app/assets/javascripts/pages/ci/lints/new/index.js b/app/assets/javascripts/pages/projects/ci/lints/new/index.js
index 8e8a843da0b..8e8a843da0b 100644
--- a/app/assets/javascripts/pages/ci/lints/new/index.js
+++ b/app/assets/javascripts/pages/projects/ci/lints/new/index.js
diff --git a/app/assets/javascripts/pages/ci/lints/show/index.js b/app/assets/javascripts/pages/projects/ci/lints/show/index.js
index 8e8a843da0b..8e8a843da0b 100644
--- a/app/assets/javascripts/pages/ci/lints/show/index.js
+++ b/app/assets/javascripts/pages/projects/ci/lints/show/index.js
diff --git a/app/assets/javascripts/pages/projects/clusters/gcp/login/index.js b/app/assets/javascripts/pages/projects/clusters/gcp/login/index.js
new file mode 100644
index 00000000000..0c2d7d7c96a
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/clusters/gcp/login/index.js
@@ -0,0 +1,3 @@
+import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
+
+gcpSignupOffer();
diff --git a/app/assets/javascripts/pages/projects/clusters/gcp/new/index.js b/app/assets/javascripts/pages/projects/clusters/gcp/new/index.js
new file mode 100644
index 00000000000..d4f34e32a48
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/clusters/gcp/new/index.js
@@ -0,0 +1,5 @@
+import initGkeDropdowns from '~/projects/gke_cluster_dropdowns';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initGkeDropdowns();
+});
diff --git a/app/assets/javascripts/pages/projects/clusters/new/index.js b/app/assets/javascripts/pages/projects/clusters/new/index.js
new file mode 100644
index 00000000000..0c2d7d7c96a
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/clusters/new/index.js
@@ -0,0 +1,3 @@
+import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
+
+gcpSignupOffer();
diff --git a/app/assets/javascripts/pages/projects/compare/index.js b/app/assets/javascripts/pages/projects/compare/index.js
index d1c78bd61db..768da8fb236 100644
--- a/app/assets/javascripts/pages/projects/compare/index.js
+++ b/app/assets/javascripts/pages/projects/compare/index.js
@@ -1,3 +1,3 @@
 import initCompareAutocomplete from '~/compare_autocomplete';
 
-document.addEventListener('DOMContentLoaded', initCompareAutocomplete);
+document.addEventListener('DOMContentLoaded', () => initCompareAutocomplete());
diff --git a/app/assets/javascripts/pages/projects/compare/show/index.js b/app/assets/javascripts/pages/projects/compare/show/index.js
index 2b4fd3c47c0..a626ed2d30b 100644
--- a/app/assets/javascripts/pages/projects/compare/show/index.js
+++ b/app/assets/javascripts/pages/projects/compare/show/index.js
@@ -1,8 +1,10 @@
 import Diff from '~/diff';
 import initChangesDropdown from '~/init_changes_dropdown';
+import GpgBadges from '~/gpg_badges';
 
 document.addEventListener('DOMContentLoaded', () => {
   new Diff(); // eslint-disable-line no-new
   const paddingTop = 16;
   initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - paddingTop);
+  GpgBadges.fetch();
 });
diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js
index be37df36be8..628913483c6 100644
--- a/app/assets/javascripts/pages/projects/edit/index.js
+++ b/app/assets/javascripts/pages/projects/edit/index.js
@@ -1,12 +1,12 @@
 import initSettingsPanels from '~/settings_panels';
 import setupProjectEdit from '~/project_edit';
 import initConfirmDangerModal from '~/confirm_danger_modal';
-import ProjectNew from '../shared/project_new';
+import initProjectLoadingSpinner from '../shared/save_project_loader';
 import projectAvatar from '../shared/project_avatar';
 import initProjectPermissionsSettings from '../shared/permissions';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new ProjectNew(); // eslint-disable-line no-new
+  initProjectLoadingSpinner();
   setupProjectEdit();
   // Initialize expandable settings panels
   initSettingsPanels();
diff --git a/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors.js b/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors.js
index 653e2502d01..6c1788dc160 100644
--- a/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors.js
+++ b/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, camelcase, one-var-declaration-per-line, quotes, no-param-reassign, quote-props, comma-dangle, prefer-template, max-len, no-return-assign, no-shadow */
+/* eslint-disable func-names, wrap-iife, no-var, one-var, camelcase, one-var-declaration-per-line, quotes, no-param-reassign, quote-props, comma-dangle, prefer-template, max-len, no-return-assign */
 
 import $ from 'jquery';
 import _ from 'underscore';
@@ -36,7 +36,9 @@ export default (function() {
         var author_graph, author_header;
         author_header = _this.create_author_header(d);
         $(".contributors-list").append(author_header);
-        _this.authors[d.author_name] = author_graph = new ContributorsAuthorGraph(d.dates);
+
+        author_graph = new ContributorsAuthorGraph(d.dates);
+        _this.authors[d.author_name] = author_graph;
         return author_graph.draw();
       };
     })(this));
@@ -78,10 +80,11 @@ export default (function() {
   };
 
   ContributorsStatGraph.prototype.redraw_authors = function() {
-    var author_commits, x_domain;
     $("ol").html("");
-    x_domain = ContributorsGraph.prototype.x_domain;
-    author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field, x_domain);
+
+    const { x_domain } = ContributorsGraph.prototype;
+    const author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field, x_domain);
+
     return _.each(author_commits, (function(_this) {
       return function(d) {
         _this.redraw_author_commit_info(d);
@@ -100,7 +103,7 @@ export default (function() {
   };
 
   ContributorsStatGraph.prototype.change_date_header = function() {
-    const x_domain = ContributorsGraph.prototype.x_domain;
+    const { x_domain } = ContributorsGraph.prototype;
     const formattedDateRange = sprintf(
       s__('ContributorsPage|%{startDate} – %{endDate}'),
       {
diff --git a/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_graph.js b/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_graph.js
index a99ce0f1c36..a02ec9e5f00 100644
--- a/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_graph.js
+++ b/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_graph.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, max-len, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return, no-shadow */
+/* eslint-disable func-names, max-len, no-restricted-syntax, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return, no-shadow */
 
 import $ from 'jquery';
 import _ from 'underscore';
@@ -13,17 +13,17 @@ import { dateTickFormat } from '~/lib/utils/tick_formats';
 
 const d3 = { extent, max, select, scaleTime, scaleLinear, axisLeft, axisBottom, area, brushX, timeParse };
 
-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;
+const extend = function(child, parent) { for (const 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; };
 
 export const ContributorsGraph = (function() {
   function ContributorsGraph() {}
 
   ContributorsGraph.prototype.MARGIN = {
     top: 20,
-    right: 20,
+    right: 10,
     bottom: 30,
-    left: 50
+    left: 40
   };
 
   ContributorsGraph.prototype.x_domain = null;
@@ -32,6 +32,12 @@ export const ContributorsGraph = (function() {
 
   ContributorsGraph.prototype.dates = [];
 
+  ContributorsGraph.prototype.determine_width = function(baseWidth, $parentElement) {
+    const parentPaddingWidth = parseFloat($parentElement.css('padding-left')) + parseFloat($parentElement.css('padding-right'));
+    const marginWidth = this.MARGIN.left + this.MARGIN.right;
+    return baseWidth - parentPaddingWidth - marginWidth;
+  };
+
   ContributorsGraph.set_x_domain = function(data) {
     return ContributorsGraph.prototype.x_domain = data;
   };
@@ -105,11 +111,10 @@ export const ContributorsMasterGraph = (function(superClass) {
 
   function ContributorsMasterGraph(data1) {
     const $parentElement = $('#contributors-master');
-    const parentPadding = parseFloat($parentElement.css('padding-left')) + parseFloat($parentElement.css('padding-right'));
 
     this.data = data1;
     this.update_content = this.update_content.bind(this);
-    this.width = $('.content').width() - parentPadding - (this.MARGIN.left + this.MARGIN.right);
+    this.width = this.determine_width($('.js-graphs-show').width(), $parentElement);
     this.height = 200;
     this.x = null;
     this.y = null;
@@ -122,8 +127,7 @@ export const ContributorsMasterGraph = (function(superClass) {
   }
 
   ContributorsMasterGraph.prototype.process_dates = function(data) {
-    var dates;
-    dates = this.get_dates(data);
+    const dates = this.get_dates(data);
     this.parse_dates(data);
     return ContributorsGraph.set_dates(dates);
   };
@@ -133,8 +137,7 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
 
   ContributorsMasterGraph.prototype.parse_dates = function(data) {
-    var parseDate;
-    parseDate = d3.timeParse("%Y-%m-%d");
+    const parseDate = d3.timeParse("%Y-%m-%d");
     return data.forEach(function(d) {
       return d.date = parseDate(d.date);
     });
@@ -152,7 +155,14 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
 
   ContributorsMasterGraph.prototype.create_svg = function() {
-    return this.svg = d3.select("#contributors-master").append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "tint-box").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+    this.svg = d3.select("#contributors-master")
+      .append("svg")
+      .attr("width", this.width + this.MARGIN.left + this.MARGIN.right)
+      .attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom)
+      .attr("class", "tint-box")
+      .append("g")
+      .attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+    return this.svg;
   };
 
   ContributorsMasterGraph.prototype.create_area = function(x, y) {
@@ -218,12 +228,14 @@ export const ContributorsAuthorGraph = (function(superClass) {
   extend(ContributorsAuthorGraph, superClass);
 
   function ContributorsAuthorGraph(data1) {
+    const $parentElements = $('.person');
+
     this.data = data1;
     // Don't split graph size in half for mobile devices.
-    if ($(window).width() < 768) {
-      this.width = $('.content').width() - 80;
+    if ($(window).width() < 790) {
+      this.width = this.determine_width($('.js-graphs-show').width(), $parentElements);
     } else {
-      this.width = ($('.content').width() / 2) - 100;
+      this.width = this.determine_width($('.js-graphs-show').width() / 2, $parentElements);
     }
     this.height = 200;
     this.x = null;
@@ -249,8 +261,7 @@ export const ContributorsAuthorGraph = (function(superClass) {
 
   ContributorsAuthorGraph.prototype.create_area = function(x, y) {
     return this.area = d3.area().x(function(d) {
-      var parseDate;
-      parseDate = d3.timeParse("%Y-%m-%d");
+      const parseDate = d3.timeParse("%Y-%m-%d");
       return x(parseDate(d));
     }).y0(this.height).y1((function(_this) {
       return function(d) {
@@ -264,9 +275,16 @@ export const ContributorsAuthorGraph = (function(superClass) {
   };
 
   ContributorsAuthorGraph.prototype.create_svg = function() {
-    var persons = document.querySelectorAll('.person');
+    const persons = document.querySelectorAll('.person');
     this.list_item = persons[persons.length - 1];
-    return this.svg = d3.select(this.list_item).append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "spark").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+    this.svg = d3.select(this.list_item)
+      .append("svg")
+      .attr("width", this.width + this.MARGIN.left + this.MARGIN.right)
+      .attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom)
+      .attr("class", "spark")
+      .append("g")
+      .attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+    return this.svg;
   };
 
   ContributorsAuthorGraph.prototype.draw_path = function(data) {
diff --git a/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_util.js b/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_util.js
index 77135ad1f0e..d12249bf612 100644
--- a/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_util.js
+++ b/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_util.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, object-shorthand, no-var, one-var, camelcase, one-var-declaration-per-line, comma-dangle, no-param-reassign, no-return-assign, quotes, prefer-arrow-callback, wrap-iife, consistent-return, no-unused-vars, max-len, no-cond-assign, no-else-return, max-len */
+/* eslint-disable func-names, object-shorthand, no-var, one-var, camelcase, one-var-declaration-per-line, comma-dangle, no-param-reassign, no-return-assign, quotes, prefer-arrow-callback, wrap-iife, consistent-return, no-unused-vars, max-len, no-cond-assign, no-else-return, max-len */
 import _ from 'underscore';
 
 export default {
@@ -111,10 +111,15 @@ export default {
   parse_log_entry: function(log_entry, field, date_range) {
     var parsed_entry;
     parsed_entry = {};
+
     parsed_entry.author_name = log_entry.author_name;
     parsed_entry.author_email = log_entry.author_email;
     parsed_entry.dates = {};
-    parsed_entry.commits = parsed_entry.additions = parsed_entry.deletions = 0;
+
+    parsed_entry.commits = 0;
+    parsed_entry.additions = 0;
+    parsed_entry.deletions = 0;
+
     _.each(_.omit(log_entry, 'author_name', 'author_email'), (function(_this) {
       return function(value, key) {
         if (_this.in_range(value.date, date_range)) {
diff --git a/app/assets/javascripts/pages/projects/init_blob.js b/app/assets/javascripts/pages/projects/init_blob.js
index 82143fa875a..56ab3fcdfcb 100644
--- a/app/assets/javascripts/pages/projects/init_blob.js
+++ b/app/assets/javascripts/pages/projects/init_blob.js
@@ -8,7 +8,8 @@ import initBlobBundle from '~/blob_edit/blob_bundle';
 export default () => {
   new LineHighlighter(); // eslint-disable-line no-new
 
-  new BlobLinePermalinkUpdater( // eslint-disable-line no-new
+  // eslint-disable-next-line no-new
+  new BlobLinePermalinkUpdater(
     document.querySelector('#blob-content-holder'),
     '.diff-line-num[data-line-number]',
     document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
@@ -19,12 +20,13 @@ export default () => {
 
   new ShortcutsNavigation(); // eslint-disable-line no-new
 
-  new ShortcutsBlob({ // eslint-disable-line no-new
+  // eslint-disable-next-line no-new
+  new ShortcutsBlob({
     skipResetBindings: true,
     fileBlobPermalinkUrl,
   });
 
-  new BlobForkSuggestion({ // eslint-disable-line no-new
+  new BlobForkSuggestion({
     openButtons: document.querySelectorAll('.js-edit-blob-link-fork-toggler'),
     forkButtons: document.querySelectorAll('.js-fork-suggestion-button'),
     cancelButtons: document.querySelectorAll('.js-cancel-fork-suggestion-button'),
diff --git a/app/assets/javascripts/pages/projects/init_form.js b/app/assets/javascripts/pages/projects/init_form.js
index 0b6c5c1d30b..9f20a3e4e46 100644
--- a/app/assets/javascripts/pages/projects/init_form.js
+++ b/app/assets/javascripts/pages/projects/init_form.js
@@ -3,5 +3,5 @@ import GLForm from '~/gl_form';
 
 export default function ($formEl) {
   new ZenMode(); // eslint-disable-line no-new
-  new GLForm($formEl, true); // eslint-disable-line no-new
+  new GLForm($formEl); // eslint-disable-line no-new
 }
diff --git a/app/assets/javascripts/pages/projects/issues/form.js b/app/assets/javascripts/pages/projects/issues/form.js
index 14fddbc9a05..b2b8e5d2300 100644
--- a/app/assets/javascripts/pages/projects/issues/form.js
+++ b/app/assets/javascripts/pages/projects/issues/form.js
@@ -10,7 +10,7 @@ import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
 
 export default () => {
   new ShortcutsNavigation();
-  new GLForm($('.issue-form'), true);
+  new GLForm($('.issue-form'));
   new IssuableForm($('.issue-form'));
   new LabelsSelect();
   new MilestoneSelect();
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
index 54695dfeb99..5d2247f6c6d 100644
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
@@ -1,4 +1,5 @@
 <script>
+  import _ from 'underscore';
   import axios from '~/lib/utils/axios_utils';
   import createFlash from '~/flash';
   import GlModal from '~/vue_shared/components/gl_modal.vue';
@@ -27,19 +28,26 @@
         type: String,
         required: true,
       },
+      groupName: {
+        type: String,
+        required: true,
+      },
     },
     computed: {
       text() {
-        return s__(`Milestones|Promoting this label will make it available for all projects inside the group. 
-        Existing project labels with the same title will be merged. This action cannot be reversed.`);
+        return sprintf(s__(`Labels|Promoting %{labelTitle} will make it available for all projects inside %{groupName}. 
+        Existing project labels with the same title will be merged. This action cannot be reversed.`), {
+          labelTitle: this.labelTitle,
+          groupName: this.groupName,
+        });
       },
       title() {
         const label = `<span
           class="label color-label"
           style="background-color: ${this.labelColor}; color: ${this.labelTextColor};"
-        >${this.labelTitle}</span>`;
+        >${_.escape(this.labelTitle)}</span>`;
 
-        return sprintf(s__('Labels|Promote label %{labelTitle} to Group Label?'), {
+        return sprintf(s__('Labels|<span>Promote label</span> %{labelTitle} <span>to Group Label?</span>'), {
           labelTitle: label,
         }, false);
       },
@@ -63,12 +71,13 @@
 <template>
   <gl-modal
     id="promote-label-modal"
-    footer-primary-button-variant="warning"
     :footer-primary-button-text="s__('Labels|Promote Label')"
+    footer-primary-button-variant="warning"
     @submit="onSubmit"
   >
     <div
       slot="title"
+      class="modal-title-with-label"
       v-html="title"
     >
       {{ title }}
diff --git a/app/assets/javascripts/pages/projects/labels/index/index.js b/app/assets/javascripts/pages/projects/labels/index/index.js
index 2abcbfab1ed..03cfef61311 100644
--- a/app/assets/javascripts/pages/projects/labels/index/index.js
+++ b/app/assets/javascripts/pages/projects/labels/index/index.js
@@ -30,6 +30,7 @@ const initLabelIndex = () => {
       labelColor: button.dataset.labelColor,
       labelTextColor: button.dataset.labelTextColor,
       url: button.dataset.url,
+      groupName: button.dataset.groupName,
     };
     eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted);
     eventHub.$emit('promoteLabelModal.props', modalProps);
@@ -62,6 +63,7 @@ const initLabelIndex = () => {
             labelColor: '',
             labelTextColor: '',
             url: '',
+            groupName: '',
           },
         };
       },
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
new file mode 100644
index 00000000000..46f3f55a400
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
@@ -0,0 +1,60 @@
+import $ from 'jquery';
+import { localTimeAgo } from '~/lib/utils/datetime_utility';
+import axios from '~/lib/utils/axios_utils';
+import initCompareAutocomplete from '~/compare_autocomplete';
+import initTargetProjectDropdown from './target_project_dropdown';
+
+const updateCommitList = (url, $loadingIndicator, $commitList, params) => {
+  $loadingIndicator.show();
+  $commitList.empty();
+
+  return axios
+    .get(url, {
+      params,
+    })
+    .then(({ data }) => {
+      $loadingIndicator.hide();
+      $commitList.html(data);
+      localTimeAgo($('.js-timeago', $commitList));
+    });
+};
+
+export default mrNewCompareNode => {
+  const { sourceBranchUrl, targetBranchUrl } = mrNewCompareNode.dataset;
+  initTargetProjectDropdown();
+
+  const updateSourceBranchCommitList = () =>
+    updateCommitList(
+      sourceBranchUrl,
+      $(mrNewCompareNode).find('.js-source-loading'),
+      $(mrNewCompareNode).find('.mr_source_commit'),
+      {
+        ref: $(mrNewCompareNode)
+          .find("input[name='merge_request[source_branch]']")
+          .val(),
+      },
+    );
+  const updateTargetBranchCommitList = () =>
+    updateCommitList(
+      targetBranchUrl,
+      $(mrNewCompareNode).find('.js-target-loading'),
+      $(mrNewCompareNode).find('.mr_target_commit'),
+      {
+        target_project_id: $(mrNewCompareNode)
+          .find("input[name='merge_request[target_project_id]']")
+          .val(),
+        ref: $(mrNewCompareNode)
+          .find("input[name='merge_request[target_branch]']")
+          .val(),
+      },
+    );
+  initCompareAutocomplete('branches', $dropdown => {
+    if ($dropdown.is('.js-target-branch')) {
+      updateTargetBranchCommitList();
+    } else if ($dropdown.is('.js-source-branch')) {
+      updateSourceBranchCommitList();
+    }
+  });
+  updateSourceBranchCommitList();
+  updateTargetBranchCommitList();
+};
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
index 6c9afddefac..01a0b4870c1 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
@@ -1,18 +1,15 @@
-import Compare from '~/compare';
 import MergeRequest from '~/merge_request';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
+import initCompare from './compare';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mrNewCompareNode = document.querySelector('.js-merge-request-new-compare');
   if (mrNewCompareNode) {
-    new Compare({ // eslint-disable-line no-new
-      targetProjectUrl: mrNewCompareNode.dataset.targetProjectUrl,
-      sourceBranchUrl: mrNewCompareNode.dataset.sourceBranchUrl,
-      targetBranchUrl: mrNewCompareNode.dataset.targetBranchUrl,
-    });
+    initCompare(mrNewCompareNode);
   } else {
     const mrNewSubmitNode = document.querySelector('.js-merge-request-new-submit');
-    new MergeRequest({ // eslint-disable-line no-new
+    // eslint-disable-next-line no-new
+    new MergeRequest({
       action: mrNewSubmitNode.dataset.mrSubmitAction,
     });
     initPipelines();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js
new file mode 100644
index 00000000000..b72fe6681df
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js
@@ -0,0 +1,22 @@
+import $ from 'jquery';
+
+export default () => {
+  const $targetProjectDropdown = $('.js-target-project');
+  $targetProjectDropdown.glDropdown({
+    selectable: true,
+    fieldName: $targetProjectDropdown.data('fieldName'),
+    filterable: true,
+    id(obj, $el) {
+      return $el.data('id');
+    },
+    toggleLabel(obj, $el) {
+      return $el.text().trim();
+    },
+    clicked({ $el }) {
+      $('.mr_target_commit').empty();
+      const $targetBranchDropdown = $('.js-target-branch');
+      $targetBranchDropdown.data('refsUrl', $el.data('refsUrl'));
+      $targetBranchDropdown.data('glDropdown').clearMenu();
+    },
+  });
+};
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js
index 406fc32f9a2..3a3c21f2202 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js
@@ -12,7 +12,7 @@ import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
 export default () => {
   new Diff();
   new ShortcutsNavigation();
-  new GLForm($('.merge-request-form'), true);
+  new GLForm($('.merge-request-form'));
   new IssuableForm($('.merge-request-form'));
   new LabelsSelect();
   new MilestoneSelect();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
index 28d8761b502..26ead75cec4 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
@@ -1,30 +1,15 @@
-import MergeRequest from '~/merge_request';
 import ZenMode from '~/zen_mode';
-import initNotes from '~/init_notes';
 import initIssuableSidebar from '~/init_issuable_sidebar';
-import initDiffNotes from '~/diff_notes/diff_notes_bundle';
 import ShortcutsIssuable from '~/shortcuts_issuable';
-import Diff from '~/diff';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import howToMerge from '~/how_to_merge';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
 import initWidget from '../../../vue_merge_request_widget';
 
-export default function () {
-  new Diff(); // eslint-disable-line no-new
+export default function() {
   new ZenMode(); // eslint-disable-line no-new
-
   initIssuableSidebar();
-  initNotes();
-  initDiffNotes();
   initPipelines();
-
-  const mrShowNode = document.querySelector('.merge-request');
-
-  window.mergeRequest = new MergeRequest({
-    action: mrShowNode.dataset.mrAction,
-  });
-
   new ShortcutsIssuable(true); // eslint-disable-line no-new
   handleLocationHash();
   howToMerge();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
index e5b2827b50c..f61f4db78d5 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
@@ -1,4 +1,3 @@
-import { hasVueMRDiscussionsCookie } from '~/lib/utils/common_utils';
 import initMrNotes from '~/mr_notes';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
 import initShow from '../init_merge_request_show';
@@ -6,8 +5,5 @@ import initShow from '../init_merge_request_show';
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
   initSidebarBundle();
-
-  if (hasVueMRDiscussionsCookie()) {
-    initMrNotes();
-  }
+  initMrNotes();
 });
diff --git a/app/assets/javascripts/pages/projects/network/network.js b/app/assets/javascripts/pages/projects/network/network.js
index aa50dd4bb25..77368c47451 100644
--- a/app/assets/javascripts/pages/projects/network/network.js
+++ b/app/assets/javascripts/pages/projects/network/network.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, quote-props, prefer-template, comma-dangle, max-len */
+/* eslint-disable func-names, wrap-iife, no-var, quotes, quote-props, prefer-template, comma-dangle, max-len */
 
 import $ from 'jquery';
 import BranchGraph from '../../../network/branch_graph';
diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js
index ea6fd961393..7db644e2477 100644
--- a/app/assets/javascripts/pages/projects/new/index.js
+++ b/app/assets/javascripts/pages/projects/new/index.js
@@ -1,9 +1,9 @@
-import ProjectNew from '../shared/project_new';
+import initProjectLoadingSpinner from '../shared/save_project_loader';
 import initProjectVisibilitySelector from '../../../project_visibility';
 import initProjectNew from '../../../projects/project_new';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new ProjectNew(); // eslint-disable-line no-new
+  initProjectLoadingSpinner();
   initProjectVisibilitySelector();
   initProjectNew.bindEvents();
 });
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index 2d18fa2044b..d0613804067 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -65,11 +65,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="custom"
-        class="label-light"
-        type="radio"
         :name="inputNameAttribute"
         :value="cronInterval"
         :checked="isEditable"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(true)"
       />
 
@@ -90,11 +90,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="every-day"
-        class="label-light"
-        type="radio"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :value="cronIntervalPresets.everyDay"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(false)"
       />
 
@@ -109,11 +109,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="every-week"
-        class="label-light"
-        type="radio"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :value="cronIntervalPresets.everyWeek"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(false)"
       />
 
@@ -128,11 +128,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="every-month"
-        class="label-light"
-        type="radio"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :value="cronIntervalPresets.everyMonth"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(false)"
       />
 
@@ -147,13 +147,13 @@
     <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"
+        class="form-control inline cron-interval-input"
+        type="text"
+        required="true"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/pages/projects/pipelines/new/index.js b/app/assets/javascripts/pages/projects/pipelines/new/index.js
index 9aa8945e268..b0b077a5e4c 100644
--- a/app/assets/javascripts/pages/projects/pipelines/new/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/new/index.js
@@ -1,6 +1,12 @@
 import $ from 'jquery';
 import NewBranchForm from '~/new_branch_form';
+import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list';
 
 document.addEventListener('DOMContentLoaded', () => {
   new NewBranchForm($('.js-new-pipeline-form')); // eslint-disable-line no-new
+
+  setupNativeFormVariableList({
+    container: $('.js-ci-variable-list-section'),
+    formField: 'variables_attributes',
+  });
 });
diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js
index c1e3425ec75..a853624e944 100644
--- a/app/assets/javascripts/pages/projects/project.js
+++ b/app/assets/javascripts/pages/projects/project.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, consistent-return, no-new, prefer-arrow-callback, no-return-assign, one-var, one-var-declaration-per-line, object-shorthand, no-else-return, newline-per-chained-call, no-shadow, vars-on-top, prefer-template, max-len */
+/* eslint-disable func-names, no-var, no-return-assign, one-var,
+ one-var-declaration-per-line, object-shorthand, vars-on-top */
 
 import $ from 'jquery';
 import Cookies from 'js-cookie';
diff --git a/app/assets/javascripts/pages/projects/settings/badges/index/index.js b/app/assets/javascripts/pages/projects/settings/badges/index/index.js
new file mode 100644
index 00000000000..30469550866
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/settings/badges/index/index.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import { PROJECT_BADGE } from '~/badges/constants';
+import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
+
+Vue.use(Translate);
+
+document.addEventListener('DOMContentLoaded', () => {
+  mountBadgeSettings(PROJECT_BADGE);
+});
diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
index 6c2a785c0af..1faa59fb45b 100644
--- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
@@ -22,4 +22,18 @@ document.addEventListener('DOMContentLoaded', () => {
     errorBox: variableListEl.querySelector('.js-ci-variable-error-box'),
     saveEndpoint: variableListEl.dataset.saveEndpoint,
   });
+
+  // hide extra auto devops settings based on data-attributes
+  const autoDevOpsSettings = document.querySelector('.js-auto-devops-settings');
+  const autoDevOpsExtraSettings = document.querySelector('.js-extra-settings');
+
+  autoDevOpsSettings.addEventListener('click', event => {
+    const { target } = event;
+    if (target.classList.contains('js-toggle-extra-settings')) {
+      autoDevOpsExtraSettings.classList.toggle(
+        'hidden',
+        !!(target.dataset && target.dataset.hideExtraSettings),
+      );
+    }
+  });
 });
diff --git a/app/assets/javascripts/pages/projects/settings/repository/create_deploy_token/index.js b/app/assets/javascripts/pages/projects/settings/repository/create_deploy_token/index.js
new file mode 100644
index 00000000000..ffc84dc106b
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/settings/repository/create_deploy_token/index.js
@@ -0,0 +1,3 @@
+import initForm from '../form';
+
+document.addEventListener('DOMContentLoaded', initForm);
diff --git a/app/assets/javascripts/pages/projects/settings/repository/form.js b/app/assets/javascripts/pages/projects/settings/repository/form.js
new file mode 100644
index 00000000000..a52861c9efa
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/settings/repository/form.js
@@ -0,0 +1,19 @@
+/* eslint-disable no-new */
+
+import ProtectedTagCreate from '~/protected_tags/protected_tag_create';
+import ProtectedTagEditList from '~/protected_tags/protected_tag_edit_list';
+import initSettingsPanels from '~/settings_panels';
+import initDeployKeys from '~/deploy_keys';
+import ProtectedBranchCreate from '~/protected_branches/protected_branch_create';
+import ProtectedBranchEditList from '~/protected_branches/protected_branch_edit_list';
+import DueDateSelectors from '~/due_date_select';
+
+export default () => {
+  new ProtectedTagCreate();
+  new ProtectedTagEditList();
+  initDeployKeys();
+  initSettingsPanels();
+  new ProtectedBranchCreate();
+  new ProtectedBranchEditList();
+  new DueDateSelectors();
+};
diff --git a/app/assets/javascripts/pages/projects/settings/repository/show/index.js b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
index 788d86d1192..ffc84dc106b 100644
--- a/app/assets/javascripts/pages/projects/settings/repository/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
@@ -1,17 +1,3 @@
-/* eslint-disable no-new */
+import initForm from '../form';
 
-import ProtectedTagCreate from '~/protected_tags/protected_tag_create';
-import ProtectedTagEditList from '~/protected_tags/protected_tag_edit_list';
-import initSettingsPanels from '~/settings_panels';
-import initDeployKeys from '~/deploy_keys';
-import ProtectedBranchCreate from '~/protected_branches/protected_branch_create';
-import ProtectedBranchEditList from '~/protected_branches/protected_branch_edit_list';
-
-document.addEventListener('DOMContentLoaded', () => {
-  new ProtectedTagCreate();
-  new ProtectedTagEditList();
-  initDeployKeys();
-  initSettingsPanels();
-  new ProtectedBranchCreate(); // eslint-disable-line no-new
-  new ProtectedBranchEditList(); // eslint-disable-line no-new
-});
+document.addEventListener('DOMContentLoaded', initForm);
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
index 9b13b2a524f..06101290f6c 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
@@ -72,25 +72,25 @@
 
 <template>
   <div
-    class="project-feature-controls"
     :data-for="name"
+    class="project-feature-controls"
   >
     <input
       v-if="name"
-      type="hidden"
       :name="name"
       :value="value"
+      type="hidden"
     />
     <project-feature-toggle
       :value="featureEnabled"
-      @change="toggleFeature"
       :disabled-input="disabledInput"
+      @change="toggleFeature"
     />
     <div class="select-wrapper">
       <select
+        :disabled="displaySelectInput"
         class="form-control project-repo-select select-control"
         @change="selectOption"
-        :disabled="displaySelectInput"
       >
         <option
           v-for="[optionValue, optionName] in displayOptions"
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue
index 25a88f846eb..17b91479ea5 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue
@@ -42,7 +42,7 @@
     </label>
     <span
       v-if="helpText"
-      class="help-block"
+      class="form-text text-muted"
     >
       {{ helpText }}
     </span>
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 755a34b7348..ae88b765abf 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -175,16 +175,16 @@
   <div>
     <div class="project-visibility-setting">
       <project-setting-row
-        label="Project visibility"
         :help-path="visibilityHelpPath"
+        label="Project visibility"
       >
         <div class="project-feature-controls">
           <div class="select-wrapper">
             <select
-              name="project[visibility_level]"
               v-model="visibilityLevel"
-              class="form-control select-control"
               :disabled="!canChangeVisibilityLevel"
+              name="project[visibility_level]"
+              class="form-control select-control"
             >
               <option
                 :value="visibilityOptions.PRIVATE"
@@ -213,36 +213,36 @@
             </i>
           </div>
         </div>
-        <span class="help-block">{{ visibilityLevelDescription }}</span>
+        <span class="form-text text-muted">{{ visibilityLevelDescription }}</span>
         <label
           v-if="visibilityLevel !== visibilityOptions.PRIVATE"
           class="request-access"
         >
           <input
+            :value="requestAccessEnabled"
             type="hidden"
             name="project[request_access_enabled]"
-            :value="requestAccessEnabled"
           />
           <input
-            type="checkbox"
             v-model="requestAccessEnabled"
+            type="checkbox"
           />
           Allow users to request access
         </label>
       </project-setting-row>
     </div>
     <div
-      class="project-feature-settings"
       :class="{ 'highlight-changes': highlightChangesClass }"
+      class="project-feature-settings"
     >
       <project-setting-row
         label="Issues"
         help-text="Lightweight issue tracking system for this project"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][issues_access_level]"
           :options="featureAccessLevelOptions"
           v-model="issuesAccessLevel"
+          name="project[project_feature_attributes][issues_access_level]"
         />
       </project-setting-row>
       <project-setting-row
@@ -250,9 +250,9 @@
         help-text="View and edit files in this project"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][repository_access_level]"
           :options="featureAccessLevelOptions"
           v-model="repositoryAccessLevel"
+          name="project[project_feature_attributes][repository_access_level]"
         />
       </project-setting-row>
       <div class="project-feature-setting-group">
@@ -261,10 +261,10 @@
           help-text="Submit changes to be merged upstream"
         >
           <project-feature-setting
-            name="project[project_feature_attributes][merge_requests_access_level]"
             :options="repoFeatureAccessLevelOptions"
             v-model="mergeRequestsAccessLevel"
             :disabled-input="!repositoryEnabled"
+            name="project[project_feature_attributes][merge_requests_access_level]"
           />
         </project-setting-row>
         <project-setting-row
@@ -272,34 +272,34 @@
           help-text="Build, test, and deploy your changes"
         >
           <project-feature-setting
-            name="project[project_feature_attributes][builds_access_level]"
             :options="repoFeatureAccessLevelOptions"
             v-model="buildsAccessLevel"
             :disabled-input="!repositoryEnabled"
+            name="project[project_feature_attributes][builds_access_level]"
           />
         </project-setting-row>
         <project-setting-row
           v-if="registryAvailable"
-          label="Container registry"
           :help-path="registryHelpPath"
+          label="Container registry"
           help-text="Every project can have its own space to store its Docker images"
         >
           <project-feature-toggle
-            name="project[container_registry_enabled]"
             v-model="containerRegistryEnabled"
             :disabled-input="!repositoryEnabled"
+            name="project[container_registry_enabled]"
           />
         </project-setting-row>
         <project-setting-row
           v-if="lfsAvailable"
-          label="Git Large File Storage"
           :help-path="lfsHelpPath"
+          label="Git Large File Storage"
           help-text="Manages large files such as audio, video, and graphics files"
         >
           <project-feature-toggle
-            name="project[lfs_enabled]"
             v-model="lfsEnabled"
             :disabled-input="!repositoryEnabled"
+            name="project[lfs_enabled]"
           />
         </project-setting-row>
       </div>
@@ -308,9 +308,9 @@
         help-text="Pages for project documentation"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][wiki_access_level]"
           :options="featureAccessLevelOptions"
           v-model="wikiAccessLevel"
+          name="project[project_feature_attributes][wiki_access_level]"
         />
       </project-setting-row>
       <project-setting-row
@@ -318,9 +318,9 @@
         help-text="Share code pastes with others out of Git repository"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][snippets_access_level]"
           :options="featureAccessLevelOptions"
           v-model="snippetsAccessLevel"
+          name="project[project_feature_attributes][snippets_access_level]"
         />
       </project-setting-row>
     </div>
diff --git a/app/assets/javascripts/pages/projects/shared/project_new.js b/app/assets/javascripts/pages/projects/shared/project_new.js
deleted file mode 100644
index 56d5574aa2f..00000000000
--- a/app/assets/javascripts/pages/projects/shared/project_new.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/* eslint-disable func-names, no-var, no-underscore-dangle, prefer-template, prefer-arrow-callback*/
-
-import $ from 'jquery';
-import VisibilitySelect from '../../../visibility_select';
-
-function highlightChanges($elm) {
-  $elm.addClass('highlight-changes');
-  setTimeout(() => $elm.removeClass('highlight-changes'), 10);
-}
-
-export default class ProjectNew {
-  constructor() {
-    this.toggleSettings = this.toggleSettings.bind(this);
-    this.$selects = $('.features select');
-    this.$repoSelects = this.$selects.filter('.js-repo-select');
-    this.$projectSelects = this.$selects.not('.js-repo-select');
-
-    $('.project-edit-container').on('ajax:before', () => {
-      $('.project-edit-container').hide();
-      return $('.save-project-loader').show();
-    });
-
-    this.initVisibilitySelect();
-
-    this.toggleSettings();
-    this.toggleSettingsOnclick();
-    this.toggleRepoVisibility();
-  }
-
-  initVisibilitySelect() {
-    const visibilityContainer = document.querySelector('.js-visibility-select');
-    if (!visibilityContainer) return;
-    const visibilitySelect = new VisibilitySelect(visibilityContainer);
-    visibilitySelect.init();
-
-    const $visibilitySelect = $(visibilityContainer).find('select');
-    let projectVisibility = $visibilitySelect.val();
-    const PROJECT_VISIBILITY_PRIVATE = '0';
-
-    $visibilitySelect.on('change', () => {
-      const newProjectVisibility = $visibilitySelect.val();
-
-      if (projectVisibility !== newProjectVisibility) {
-        this.$projectSelects.each((idx, select) => {
-          const $select = $(select);
-          const $options = $select.find('option');
-          const values = $.map($options, e => e.value);
-
-          // if switched to "private", limit visibility options
-          if (newProjectVisibility === PROJECT_VISIBILITY_PRIVATE) {
-            if ($select.val() !== values[0] && $select.val() !== values[1]) {
-              $select.val(values[1]).trigger('change');
-              highlightChanges($select);
-            }
-            $options.slice(2).disable();
-          }
-
-          // if switched from "private", increase visibility for non-disabled options
-          if (projectVisibility === PROJECT_VISIBILITY_PRIVATE) {
-            $options.enable();
-            if ($select.val() !== values[0] && $select.val() !== values[values.length - 1]) {
-              $select.val(values[values.length - 1]).trigger('change');
-              highlightChanges($select);
-            }
-          }
-        });
-
-        projectVisibility = newProjectVisibility;
-      }
-    });
-  }
-
-  toggleSettings() {
-    this.$selects.each(function () {
-      var $select = $(this);
-      var className = $select.data('field')
-        .replace(/_/g, '-')
-        .replace('access-level', 'feature');
-      ProjectNew._showOrHide($select, '.' + className);
-    });
-  }
-
-  toggleSettingsOnclick() {
-    this.$selects.on('change', this.toggleSettings);
-  }
-
-  static _showOrHide(checkElement, container) {
-    const $container = $(container);
-
-    if ($(checkElement).val() !== '0') {
-      return $container.show();
-    }
-    return $container.hide();
-  }
-
-  toggleRepoVisibility() {
-    var $repoAccessLevel = $('.js-repo-access-level select');
-    var $lfsEnabledOption = $('.js-lfs-enabled select');
-    var containerRegistry = document.querySelectorAll('.js-container-registry')[0];
-    var containerRegistryCheckbox = document.getElementById('project_container_registry_enabled');
-    var prevSelectedVal = parseInt($repoAccessLevel.val(), 10);
-
-    this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
-      .nextAll()
-      .hide();
-
-    $repoAccessLevel
-      .off('change')
-      .on('change', function () {
-        var selectedVal = parseInt($repoAccessLevel.val(), 10);
-
-        this.$repoSelects.each(function () {
-          var $this = $(this);
-          var repoSelectVal = parseInt($this.val(), 10);
-
-          $this.find('option').enable();
-
-          if (selectedVal < repoSelectVal || repoSelectVal === prevSelectedVal) {
-            $this.val(selectedVal).trigger('change');
-            highlightChanges($this);
-          }
-
-          $this.find("option[value='" + selectedVal + "']").nextAll().disable();
-        });
-
-        if (selectedVal) {
-          this.$repoSelects.removeClass('disabled');
-
-          if ($lfsEnabledOption.length) {
-            $lfsEnabledOption.removeClass('disabled');
-            highlightChanges($lfsEnabledOption);
-          }
-          if (containerRegistry) {
-            containerRegistry.style.display = '';
-          }
-        } else {
-          this.$repoSelects.addClass('disabled');
-
-          if ($lfsEnabledOption.length) {
-            $lfsEnabledOption.val('false').addClass('disabled');
-            highlightChanges($lfsEnabledOption);
-          }
-          if (containerRegistry) {
-            containerRegistry.style.display = 'none';
-            containerRegistryCheckbox.checked = false;
-          }
-        }
-
-        prevSelectedVal = selectedVal;
-      }.bind(this));
-  }
-}
diff --git a/app/assets/javascripts/pages/projects/shared/save_project_loader.js b/app/assets/javascripts/pages/projects/shared/save_project_loader.js
new file mode 100644
index 00000000000..aa3589ac88d
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/shared/save_project_loader.js
@@ -0,0 +1,12 @@
+import $ from 'jquery';
+
+export default function initProjectLoadingSpinner() {
+  const $formContainer = $('.project-edit-container');
+  const $loadingSpinner = $('.save-project-loader');
+
+  // show loading spinner when saving
+  $formContainer.on('ajax:before', () => {
+    $formContainer.hide();
+    $loadingSpinner.show();
+  });
+}
diff --git a/app/assets/javascripts/pages/projects/snippets/show/index.js b/app/assets/javascripts/pages/projects/snippets/show/index.js
index a134599cb04..c35b9c30058 100644
--- a/app/assets/javascripts/pages/projects/snippets/show/index.js
+++ b/app/assets/javascripts/pages/projects/snippets/show/index.js
@@ -1,11 +1,13 @@
 import initNotes from '~/init_notes';
 import ZenMode from '~/zen_mode';
-import LineHighlighter from '../../../../line_highlighter';
-import BlobViewer from '../../../../blob/viewer';
+import LineHighlighter from '~/line_highlighter';
+import BlobViewer from '~/blob/viewer';
+import snippetEmbed from '~/snippet/snippet_embed';
 
 document.addEventListener('DOMContentLoaded', () => {
   new LineHighlighter(); // eslint-disable-line no-new
   new BlobViewer(); // eslint-disable-line no-new
   initNotes();
   new ZenMode(); // eslint-disable-line no-new
+  snippetEmbed();
 });
diff --git a/app/assets/javascripts/pages/projects/tags/new/index.js b/app/assets/javascripts/pages/projects/tags/new/index.js
index 8d0edf7e06c..b3158f7e939 100644
--- a/app/assets/javascripts/pages/projects/tags/new/index.js
+++ b/app/assets/javascripts/pages/projects/tags/new/index.js
@@ -5,6 +5,6 @@ import GLForm from '../../../../gl_form';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ZenMode(); // eslint-disable-line no-new
-  new GLForm($('.tag-form'), true); // eslint-disable-line no-new
+  new GLForm($('.tag-form')); // eslint-disable-line no-new
   new RefSelectDropdown($('.js-branch-select')); // eslint-disable-line no-new
 });
diff --git a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
new file mode 100644
index 00000000000..0289209ff1e
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
@@ -0,0 +1,77 @@
+<script>
+import _ from 'underscore';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { s__, sprintf } from '~/locale';
+
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    deleteWikiUrl: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    pageTitle: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    csrfToken: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  computed: {
+    message() {
+      return s__('WikiPageConfirmDelete|Are you sure you want to delete this page?');
+    },
+    title() {
+      return sprintf(
+        s__('WikiPageConfirmDelete|Delete page %{pageTitle}?'),
+        {
+          pageTitle: _.escape(this.pageTitle),
+        },
+        false,
+      );
+    },
+  },
+  methods: {
+    onSubmit() {
+      this.$refs.form.submit();
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    id="delete-wiki-modal"
+    :header-title-text="title"
+    :footer-primary-button-text="s__('WikiPageConfirmDelete|Delete page')"
+    footer-primary-button-variant="danger"
+    @submit="onSubmit"
+  >
+    {{ message }}
+    <form
+      ref="form"
+      :action="deleteWikiUrl"
+      method="post"
+      class="js-requires-input"
+    >
+      <input
+        ref="method"
+        type="hidden"
+        name="_method"
+        value="delete"
+      />
+      <input
+        :value="csrfToken"
+        type="hidden"
+        name="authenticity_token"
+      />
+    </form>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/pages/projects/wikis/index.js b/app/assets/javascripts/pages/projects/wikis/index.js
index ec01c66ffda..0a0fe3fc137 100644
--- a/app/assets/javascripts/pages/projects/wikis/index.js
+++ b/app/assets/javascripts/pages/projects/wikis/index.js
@@ -1,12 +1,40 @@
 import $ from 'jquery';
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import csrf from '~/lib/utils/csrf';
 import Wikis from './wikis';
 import ShortcutsWiki from '../../../shortcuts_wiki';
 import ZenMode from '../../../zen_mode';
 import GLForm from '../../../gl_form';
+import deleteWikiModal from './components/delete_wiki_modal.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   new Wikis(); // eslint-disable-line no-new
   new ShortcutsWiki(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new
-  new GLForm($('.wiki-form'), true); // eslint-disable-line no-new
+  new GLForm($('.wiki-form')); // eslint-disable-line no-new
+
+  const deleteWikiButton = document.getElementById('delete-wiki-button');
+
+  if (deleteWikiButton) {
+    Vue.use(Translate);
+
+    const { deleteWikiUrl, pageTitle } = deleteWikiButton.dataset;
+    const deleteWikiModalEl = document.getElementById('delete-wiki-modal');
+    const deleteModal = new Vue({ // eslint-disable-line
+      el: deleteWikiModalEl,
+      data: {
+        deleteWikiUrl: '',
+      },
+      render(createElement) {
+        return createElement(deleteWikiModal, {
+          props: {
+            pageTitle,
+            deleteWikiUrl,
+            csrfToken: csrf.token,
+          },
+        });
+      },
+    });
+  }
 });
diff --git a/app/assets/javascripts/pages/projects/wikis/wikis.js b/app/assets/javascripts/pages/projects/wikis/wikis.js
index 34a12ef76a1..dcd0b9a76ce 100644
--- a/app/assets/javascripts/pages/projects/wikis/wikis.js
+++ b/app/assets/javascripts/pages/projects/wikis/wikis.js
@@ -1,5 +1,7 @@
 import bp from '../../../breakpoints';
 import { slugify } from '../../../lib/utils/text_utility';
+import { parseQueryStringIntoObject } from '../../../lib/utils/common_utils';
+import { mergeUrlParams, redirectTo } from '../../../lib/utils/url_utility';
 
 export default class Wikis {
   constructor() {
@@ -28,7 +30,12 @@ export default class Wikis {
 
     if (slug.length > 0) {
       const wikisPath = slugInput.getAttribute('data-wikis-path');
-      window.location.href = `${wikisPath}/${slug}`;
+
+      // If the wiki is empty, we need to merge the current URL params to keep the "create" view.
+      const params = parseQueryStringIntoObject(window.location.search.substr(1));
+      const url = mergeUrlParams(params, `${wikisPath}/${slug}`);
+      redirectTo(url);
+
       e.preventDefault();
     }
   }
diff --git a/app/assets/javascripts/pages/sessions/new/index.js b/app/assets/javascripts/pages/sessions/new/index.js
index 80a7114f94d..07f32210d93 100644
--- a/app/assets/javascripts/pages/sessions/new/index.js
+++ b/app/assets/javascripts/pages/sessions/new/index.js
@@ -6,7 +6,8 @@ import OAuthRememberMe from './oauth_remember_me';
 document.addEventListener('DOMContentLoaded', () => {
   new UsernameValidator(); // eslint-disable-line no-new
   new SigninTabsMemoizer(); // eslint-disable-line no-new
-  new OAuthRememberMe({ // eslint-disable-line no-new
+
+  new OAuthRememberMe({
     container: $('.omniauth-container'),
   }).bindEvents();
 });
diff --git a/app/assets/javascripts/pages/sessions/new/oauth_remember_me.js b/app/assets/javascripts/pages/sessions/new/oauth_remember_me.js
index 53030045292..761618109a4 100644
--- a/app/assets/javascripts/pages/sessions/new/oauth_remember_me.js
+++ b/app/assets/javascripts/pages/sessions/new/oauth_remember_me.js
@@ -5,7 +5,7 @@ import $ from 'jquery';
  *
  * Toggling this checkbox adds/removes a `remember_me` parameter to the
  * login buttons' href, which is passed on to the omniauth callback.
- **/
+ */
 
 export default class OAuthRememberMe {
   constructor(opts = {}) {
@@ -17,7 +17,6 @@ export default class OAuthRememberMe {
     $('#remember_me', this.container).on('click', this.toggleRememberMe);
   }
 
-  // eslint-disable-next-line class-methods-use-this
   toggleRememberMe(event) {
     const rememberMe = $(event.target).is(':checked');
 
diff --git a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
index 08f0afdcce3..1e7c29aefaa 100644
--- a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
+++ b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
@@ -5,7 +5,7 @@ import AccessorUtilities from '~/lib/utils/accessor';
  * Does that setting the current selected tab in the localStorage
  */
 export default class SigninTabsMemoizer {
-  constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
+  constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.new-session-tabs' } = {}) {
     this.currentTabKey = currentTabKey;
     this.tabSelector = tabSelector;
     this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
@@ -37,6 +37,11 @@ export default class SigninTabsMemoizer {
       const tab = document.querySelector(`${this.tabSelector} a[href="${anchorName}"]`);
       if (tab) {
         tab.click();
+      } else {
+        const firstTab = document.querySelector(`${this.tabSelector} a`);
+        if (firstTab) {
+          firstTab.click();
+        }
       }
     }
   }
diff --git a/app/assets/javascripts/pages/sessions/new/username_validator.js b/app/assets/javascripts/pages/sessions/new/username_validator.js
index 825de01b5a2..97cf1aeaadc 100644
--- a/app/assets/javascripts/pages/sessions/new/username_validator.js
+++ b/app/assets/javascripts/pages/sessions/new/username_validator.js
@@ -1,4 +1,4 @@
-/* eslint-disable comma-dangle, consistent-return, class-methods-use-this, arrow-parens, no-param-reassign, max-len */
+/* eslint-disable comma-dangle, consistent-return, class-methods-use-this */
 
 import $ from 'jquery';
 import _ from 'underscore';
@@ -62,13 +62,13 @@ export default class UsernameValidator {
       return this.setPendingState();
     }
 
-    if (!this.state.available) {
-      return this.setUnavailableState();
-    }
-
     if (!this.state.valid) {
       return this.setInvalidState();
     }
+
+    if (!this.state.available) {
+      return this.setUnavailableState();
+    }
   }
 
   interceptInvalid(event) {
@@ -89,7 +89,6 @@ export default class UsernameValidator {
 
   setAvailabilityState(usernameTaken) {
     if (usernameTaken) {
-      this.state.valid = false;
       this.state.available = false;
     } else {
       this.state.available = true;
diff --git a/app/assets/javascripts/pages/shared/mount_badge_settings.js b/app/assets/javascripts/pages/shared/mount_badge_settings.js
new file mode 100644
index 00000000000..1397c0834ff
--- /dev/null
+++ b/app/assets/javascripts/pages/shared/mount_badge_settings.js
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import BadgeSettings from '~/badges/components/badge_settings.vue';
+import store from '~/badges/store';
+
+export default kind => {
+  const badgeSettingsElement = document.getElementById('badge-settings');
+
+  store.dispatch('loadBadges', {
+    kind,
+    apiEndpointUrl: badgeSettingsElement.dataset.apiEndpointUrl,
+    docsUrl: badgeSettingsElement.dataset.docsUrl,
+  });
+
+  return new Vue({
+    el: badgeSettingsElement,
+    store,
+    components: {
+      BadgeSettings,
+    },
+    render(createElement) {
+      return createElement(BadgeSettings);
+    },
+  });
+};
diff --git a/app/assets/javascripts/pages/snippets/form.js b/app/assets/javascripts/pages/snippets/form.js
index 72d05da1069..758bbafead3 100644
--- a/app/assets/javascripts/pages/snippets/form.js
+++ b/app/assets/javascripts/pages/snippets/form.js
@@ -3,6 +3,13 @@ import GLForm from '~/gl_form';
 import ZenMode from '~/zen_mode';
 
 export default () => {
-  new GLForm($('.snippet-form'), false); // eslint-disable-line no-new
+  // eslint-disable-next-line no-new
+  new GLForm($('.snippet-form'), {
+    members: false,
+    issues: false,
+    mergeRequests: false,
+    milestones: false,
+    labels: false,
+  });
   new ZenMode(); // eslint-disable-line no-new
 };
diff --git a/app/assets/javascripts/pages/snippets/show/index.js b/app/assets/javascripts/pages/snippets/show/index.js
index f548b9fad65..26936110402 100644
--- a/app/assets/javascripts/pages/snippets/show/index.js
+++ b/app/assets/javascripts/pages/snippets/show/index.js
@@ -1,11 +1,13 @@
-import LineHighlighter from '../../../line_highlighter';
-import BlobViewer from '../../../blob/viewer';
-import ZenMode from '../../../zen_mode';
-import initNotes from '../../../init_notes';
+import LineHighlighter from '~/line_highlighter';
+import BlobViewer from '~/blob/viewer';
+import ZenMode from '~/zen_mode';
+import initNotes from '~/init_notes';
+import snippetEmbed from '~/snippet/snippet_embed';
 
 document.addEventListener('DOMContentLoaded', () => {
   new LineHighlighter(); // eslint-disable-line no-new
   new BlobViewer(); // eslint-disable-line no-new
   initNotes();
   new ZenMode(); // eslint-disable-line no-new
+  snippetEmbed();
 });
diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 8ce938c958b..50d042fef29 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -19,7 +19,7 @@ function getSystemDate(systemUtcOffsetSeconds) {
   const date = new Date();
   const localUtcOffsetMinutes = 0 - date.getTimezoneOffset();
   const systemUtcOffsetMinutes = systemUtcOffsetSeconds / 60;
-  date.setMinutes((date.getMinutes() - localUtcOffsetMinutes) + systemUtcOffsetMinutes);
+  date.setMinutes(date.getMinutes() - localUtcOffsetMinutes + systemUtcOffsetMinutes);
   return date;
 }
 
@@ -35,18 +35,36 @@ function formatTooltipText({ date, count }) {
   return `${contribText}<br />${dateDayName} ${dateText}`;
 }
 
-const initColorKey = () => d3.scaleLinear().range(['#acd5f2', '#254e77']).domain([0, 3]);
+const initColorKey = () =>
+  d3
+    .scaleLinear()
+    .range(['#acd5f2', '#254e77'])
+    .domain([0, 3]);
 
 export default class ActivityCalendar {
-  constructor(container, timestamps, calendarActivitiesPath, utcOffset = 0) {
+  constructor(container, timestamps, calendarActivitiesPath, utcOffset = 0, firstDayOfWeek = 0) {
     this.calendarActivitiesPath = calendarActivitiesPath;
     this.clickDay = this.clickDay.bind(this);
     this.currentSelectedDate = '';
     this.daySpace = 1;
     this.daySize = 15;
-    this.daySizeWithSpace = this.daySize + (this.daySpace * 2);
-    this.monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    this.daySizeWithSpace = this.daySize + this.daySpace * 2;
+    this.monthNames = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
     this.months = [];
+    this.firstDayOfWeek = firstDayOfWeek;
 
     // Loop through the timestamps to create a group of objects
     // The group of objects will be grouped based on the day of the week they are
@@ -70,7 +88,7 @@ export default class ActivityCalendar {
 
       // Create a new group array if this is the first day of the week
       // or if is first object
-      if ((day === 0 && i !== 0) || i === 0) {
+      if ((day === this.firstDayOfWeek && i !== 0) || i === 0) {
         this.timestampsTmp.push([]);
         group += 1;
       }
@@ -109,21 +127,30 @@ export default class ActivityCalendar {
   }
 
   renderSvg(container, group) {
-    const width = ((group + 1) * this.daySizeWithSpace) + this.getExtraWidthPadding(group);
-    return d3.select(container)
+    const width = (group + 1) * this.daySizeWithSpace + this.getExtraWidthPadding(group);
+    return d3
+      .select(container)
       .append('svg')
-        .attr('width', width)
-        .attr('height', 167)
-        .attr('class', 'contrib-calendar');
+      .attr('width', width)
+      .attr('height', 167)
+      .attr('class', 'contrib-calendar');
+  }
+
+  dayYPos(day) {
+    return this.daySizeWithSpace * ((day + 7 - this.firstDayOfWeek) % 7);
   }
 
   renderDays() {
-    this.svg.selectAll('g').data(this.timestampsTmp).enter().append('g')
+    this.svg
+      .selectAll('g')
+      .data(this.timestampsTmp)
+      .enter()
+      .append('g')
       .attr('transform', (group, i) => {
         _.each(group, (stamp, a) => {
           if (a === 0 && stamp.day === 0) {
             const month = stamp.date.getMonth();
-            const x = (this.daySizeWithSpace * i) + 1 + this.daySizeWithSpace;
+            const x = this.daySizeWithSpace * i + 1 + this.daySizeWithSpace;
             const lastMonth = _.last(this.months);
             if (
               lastMonth == null ||
@@ -133,86 +160,113 @@ export default class ActivityCalendar {
             }
           }
         });
-        return `translate(${(this.daySizeWithSpace * i) + 1 + this.daySizeWithSpace}, 18)`;
+        return `translate(${this.daySizeWithSpace * i + 1 + this.daySizeWithSpace}, 18)`;
       })
       .selectAll('rect')
-        .data(stamp => stamp)
-        .enter()
-        .append('rect')
-          .attr('x', '0')
-          .attr('y', stamp => this.daySizeWithSpace * stamp.day)
-          .attr('width', this.daySize)
-          .attr('height', this.daySize)
-          .attr('fill', stamp => (
-            stamp.count !== 0 ? this.color(Math.min(stamp.count, 40)) : '#ededed'
-          ))
-          .attr('title', stamp => formatTooltipText(stamp))
-          .attr('class', 'user-contrib-cell js-tooltip')
-          .attr('data-container', 'body')
-          .on('click', this.clickDay);
+      .data(stamp => stamp)
+      .enter()
+      .append('rect')
+      .attr('x', '0')
+      .attr('y', stamp => this.dayYPos(stamp.day))
+      .attr('width', this.daySize)
+      .attr('height', this.daySize)
+      .attr(
+        'fill',
+        stamp => (stamp.count !== 0 ? this.color(Math.min(stamp.count, 40)) : '#ededed'),
+      )
+      .attr('title', stamp => formatTooltipText(stamp))
+      .attr('class', 'user-contrib-cell js-tooltip')
+      .attr('data-container', 'body')
+      .on('click', this.clickDay);
   }
 
   renderDayTitles() {
     const days = [
       {
         text: 'M',
-        y: 29 + (this.daySizeWithSpace * 1),
-      }, {
+        y: 29 + this.dayYPos(1),
+      },
+      {
         text: 'W',
-        y: 29 + (this.daySizeWithSpace * 3),
-      }, {
+        y: 29 + this.dayYPos(3),
+      },
+      {
         text: 'F',
-        y: 29 + (this.daySizeWithSpace * 5),
+        y: 29 + this.dayYPos(5),
       },
     ];
-    this.svg.append('g')
+    this.svg
+      .append('g')
       .selectAll('text')
-        .data(days)
-        .enter()
-        .append('text')
-          .attr('text-anchor', 'middle')
-          .attr('x', 8)
-          .attr('y', day => day.y)
-          .text(day => day.text)
-          .attr('class', 'user-contrib-text');
+      .data(days)
+      .enter()
+      .append('text')
+      .attr('text-anchor', 'middle')
+      .attr('x', 8)
+      .attr('y', day => day.y)
+      .text(day => day.text)
+      .attr('class', 'user-contrib-text');
   }
 
   renderMonths() {
-    this.svg.append('g')
+    this.svg
+      .append('g')
       .attr('direction', 'ltr')
       .selectAll('text')
-        .data(this.months)
-        .enter()
-        .append('text')
-          .attr('x', date => date.x)
-          .attr('y', 10)
-          .attr('class', 'user-contrib-text')
-          .text(date => this.monthNames[date.month]);
+      .data(this.months)
+      .enter()
+      .append('text')
+      .attr('x', date => date.x)
+      .attr('y', 10)
+      .attr('class', 'user-contrib-text')
+      .text(date => this.monthNames[date.month]);
   }
 
   renderKey() {
-    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)];
+    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})`)
+    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');
+      .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');
   }
 
   initColor() {
-    const colorRange = ['#ededed', this.colorKey(0), this.colorKey(1), this.colorKey(2), this.colorKey(3)];
-    return d3.scaleThreshold().domain([0, 10, 20, 30]).range(colorRange);
+    const colorRange = [
+      '#ededed',
+      this.colorKey(0),
+      this.colorKey(1),
+      this.colorKey(2),
+      this.colorKey(3),
+    ];
+    return d3
+      .scaleThreshold()
+      .domain([0, 10, 20, 30])
+      .range(colorRange);
   }
 
   clickDay(stamp) {
@@ -227,14 +281,15 @@ export default class ActivityCalendar {
 
       $('.user-calendar-activities').html(LOADING_HTML);
 
-      axios.get(this.calendarActivitiesPath, {
-        params: {
-          date,
-        },
-        responseType: 'text',
-      })
-      .then(({ data }) => $('.user-calendar-activities').html(data))
-      .catch(() => flash(__('An error occurred while retrieving calendar activity')));
+      axios
+        .get(this.calendarActivitiesPath, {
+          params: {
+            date,
+          },
+          responseType: 'text',
+        })
+        .then(({ data }) => $('.user-calendar-activities').html(data))
+        .catch(() => flash(__('An error occurred while retrieving calendar activity')));
     } else {
       this.currentSelectedDate = '';
       $('.user-calendar-activities').html('');
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 124bc2ba710..a2ca03536f2 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -77,10 +77,9 @@ export default class UserTabs {
     this.action = action || this.defaultAction;
     this.$parentEl = $(parentEl) || $(document);
     this.windowLocation = window.location;
-    this.$parentEl.find('.nav-links a')
-      .each((i, navLink) => {
-        this.loaded[$(navLink).attr('data-action')] = false;
-      });
+    this.$parentEl.find('.nav-links a').each((i, navLink) => {
+      this.loaded[$(navLink).attr('data-action')] = false;
+    });
     this.actions = Object.keys(this.loaded);
     this.bindEvents();
 
@@ -116,8 +115,7 @@ export default class UserTabs {
   }
 
   activateTab(action) {
-    return this.$parentEl.find(`.nav-links .js-${action}-tab a`)
-      .tab('show');
+    return this.$parentEl.find(`.nav-links .js-${action}-tab a`).tab('show');
   }
 
   setTab(action, endpoint) {
@@ -137,7 +135,8 @@ export default class UserTabs {
   loadTab(action, endpoint) {
     this.toggleLoading(true);
 
-    return axios.get(endpoint)
+    return axios
+      .get(endpoint)
       .then(({ data }) => {
         const tabSelector = `div#${action}`;
         this.$parentEl.find(tabSelector).html(data.html);
@@ -161,10 +160,11 @@ export default class UserTabs {
     const utcOffset = $calendarWrap.data('utcOffset');
     let utcFormatted = 'UTC';
     if (utcOffset !== 0) {
-      utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${(utcOffset / 3600)}`;
+      utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${utcOffset / 3600}`;
     }
 
-    axios.get(calendarPath)
+    axios
+      .get(calendarPath)
       .then(({ data }) => {
         $calendarWrap.html(CALENDAR_TEMPLATE);
         $calendarWrap.find('.calendar-hint').append(`(Timezone: ${utcFormatted})`);
@@ -180,21 +180,24 @@ export default class UserTabs {
   }
 
   toggleLoading(status) {
-    return this.$parentEl.find('.loading-status .loading')
-      .toggle(status);
+    return this.$parentEl.find('.loading-status .loading').toggleClass('hide', !status);
   }
 
   setCurrentAction(source) {
     let newState = source;
     newState = newState.replace(/\/+$/, '');
     newState += this.windowLocation.search + this.windowLocation.hash;
-    history.replaceState({
-      url: newState,
-    }, document.title, newState);
+    window.history.replaceState(
+      {
+        url: newState,
+      },
+      document.title,
+      newState,
+    );
     return newState;
   }
 
   getCurrentAction() {
-    return this.$parentEl.find('.nav-links .active a').data('action');
+    return this.$parentEl.find('.nav-links a.active').data('action');
   }
 }
diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
index 00f32d9de78..2f480ecdc69 100644
--- a/app/assets/javascripts/pdf/index.vue
+++ b/app/assets/javascripts/pdf/index.vue
@@ -56,8 +56,8 @@
 
 <template>
   <div
-    class="pdf-viewer"
-    v-if="hasPDF">
+    v-if="hasPDF"
+    class="pdf-viewer">
     <page
       v-for="(page, index) in pages"
       :key="index"
diff --git a/app/assets/javascripts/pdf/page/index.vue b/app/assets/javascripts/pdf/page/index.vue
index fcba819beba..9f06833d560 100644
--- a/app/assets/javascripts/pdf/page/index.vue
+++ b/app/assets/javascripts/pdf/page/index.vue
@@ -43,9 +43,9 @@
 
 <template>
   <canvas
-    class="pdf-page"
     ref="canvas"
     :data-page="number"
+    class="pdf-page"
   >
   </canvas>
 </template>
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index db8a0055acd..dc7d6d29b8f 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -39,9 +39,9 @@ export default {
 </script>
 <template>
   <div
+    v-if="currentRequest.details"
     :id="`peek-view-${metric}`"
     class="view"
-    v-if="currentRequest.details"
   >
     <button
       :data-target="`#modal-peek-${metric}-details`"
@@ -56,6 +56,7 @@ export default {
     <gl-modal
       :id="`modal-peek-${metric}-details`"
       :header-title-text="header"
+      modal-size="xl"
       class="performance-bar-modal"
     >
       <table
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 2fd1715ee79..8ffaa52d9e8 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -5,7 +5,6 @@ import PerformanceBarService from '../services/performance_bar_service';
 import detailedMetric from './detailed_metric.vue';
 import requestSelector from './request_selector.vue';
 import simpleMetric from './simple_metric.vue';
-import upstreamPerformanceBar from './upstream_performance_bar.vue';
 
 import Flash from '../../flash';
 
@@ -14,7 +13,6 @@ export default {
     detailedMetric,
     requestSelector,
     simpleMetric,
-    upstreamPerformanceBar,
   },
   props: {
     store: {
@@ -128,9 +126,6 @@ export default {
           {{ currentRequest.details.host.hostname }}
         </span>
       </div>
-      <upstream-performance-bar
-        v-if="initialRequest && currentRequest.details"
-      />
       <detailed-metric
         v-for="metric in $options.detailedMetrics"
         :key="metric.metric"
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index 3ed07a4a47d..dd9578a6c7f 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -37,7 +37,7 @@ export default {
 <template>
   <div
     id="peek-request-selector"
-    class="pull-right"
+    class="float-right"
   >
     <select v-model="currentRequestId">
       <option
diff --git a/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue b/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue
deleted file mode 100644
index 2b5915f381f..00000000000
--- a/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-export default {
-  mounted() {
-    const upstreamPerformanceBar = document
-      .getElementById('peek-view-performance-bar')
-      .cloneNode(true);
-
-    upstreamPerformanceBar.classList.remove('hidden');
-
-    this.$refs.wrapper.appendChild(upstreamPerformanceBar);
-  },
-};
-</script>
-<template>
-  <div
-    id="peek-view-performance-bar-vue"
-    class="view"
-    ref="wrapper"
-  ></div>
-</template>
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index a0ddf36a672..4a98aed7679 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -1,5 +1,3 @@
-import 'vendor/peek.performance_bar';
-
 import Vue from 'vue';
 import performanceBarApp from './components/performance_bar_app.vue';
 import PerformanceBarStore from './stores/performance_bar_store';
diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
index d8e792446c3..bc71911ae35 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -1,24 +1,41 @@
+import Vue from 'vue';
+import _ from 'underscore';
 import axios from '../../lib/utils/axios_utils';
 
+let vueResourceInterceptor;
+
 export default class PerformanceBarService {
   static fetchRequestDetails(peekUrl, requestId) {
     return axios.get(peekUrl, { params: { request_id: requestId } });
   }
 
   static registerInterceptor(peekUrl, callback) {
-    return axios.interceptors.response.use(response => {
+    const interceptor = response => {
       const requestId = response.headers['x-request-id'];
-      const requestUrl = response.config.url;
+      // Get the request URL from response.config for Axios, and response for
+      // Vue Resource.
+      const requestUrl = (response.config || response).url;
+      const cachedResponse = response.headers['x-gitlab-from-cache'] === 'true';
 
-      if (requestUrl !== peekUrl && requestId) {
+      if (requestUrl !== peekUrl && requestId && !cachedResponse) {
         callback(requestId, requestUrl);
       }
 
       return response;
-    });
+    };
+
+    vueResourceInterceptor = (request, next) => next(interceptor);
+
+    Vue.http.interceptors.push(vueResourceInterceptor);
+
+    return axios.interceptors.response.use(interceptor);
   }
 
   static removeInterceptor(interceptor) {
     axios.interceptors.response.eject(interceptor);
+    Vue.http.interceptors = _.without(
+      Vue.http.interceptors,
+      vueResourceInterceptor,
+    );
   }
 }
diff --git a/app/assets/javascripts/pipelines/components/async_button.vue b/app/assets/javascripts/pipelines/components/async_button.vue
deleted file mode 100644
index 0cdffbde05b..00000000000
--- a/app/assets/javascripts/pipelines/components/async_button.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script>
-  /* eslint-disable no-alert */
-
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import icon from '../../vue_shared/components/icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-
-  export default {
-    directives: {
-      tooltip,
-    },
-    components: {
-      loadingIcon,
-      icon,
-    },
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      icon: {
-        type: String,
-        required: true,
-      },
-      cssClass: {
-        type: String,
-        required: true,
-      },
-      pipelineId: {
-        type: Number,
-        required: true,
-      },
-      type: {
-        type: String,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        isLoading: false,
-      };
-    },
-    computed: {
-      buttonClass() {
-        return `btn ${this.cssClass}`;
-      },
-    },
-    created() {
-      // We're using eventHub to listen to the modal here instead of
-      // using props because it would would make the parent components
-      // much more complex to keep track of the loading state of each button
-      eventHub.$on('postAction', this.setLoading);
-    },
-    beforeDestroy() {
-      eventHub.$off('postAction', this.setLoading);
-    },
-    methods: {
-      onClick() {
-        eventHub.$emit('openConfirmationModal', {
-          pipelineId: this.pipelineId,
-          endpoint: this.endpoint,
-          type: this.type,
-        });
-      },
-      setLoading(endpoint) {
-        if (endpoint === this.endpoint) {
-          this.isLoading = true;
-        }
-      },
-    },
-  };
-</script>
-
-<template>
-  <button
-    v-tooltip
-    type="button"
-    @click="onClick"
-    :class="buttonClass"
-    :title="title"
-    :aria-label="title"
-    data-container="body"
-    data-placement="top"
-    :disabled="isLoading">
-    <icon
-      :name="icon"
-    />
-    <loading-icon v-if="isLoading" />
-  </button>
-</template>
diff --git a/app/assets/javascripts/pipelines/components/blank_state.vue b/app/assets/javascripts/pipelines/components/blank_state.vue
index 8d3d6223d7b..f3219b8291c 100644
--- a/app/assets/javascripts/pipelines/components/blank_state.vue
+++ b/app/assets/javascripts/pipelines/components/blank_state.vue
@@ -17,13 +17,13 @@
 
 <template>
   <div class="row empty-state">
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="svg-content">
         <img :src="svgPath" />
       </div>
     </div>
 
-    <div class="col-xs-12 text-center">
+    <div class="col-12 text-center">
       <div class="text-content">
         <h4>{{ message }}</h4>
       </div>
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index 10ac8c08bed..50c27bed9fd 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -19,13 +19,13 @@
 </script>
 <template>
   <div class="row empty-state js-empty-state">
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="svg-content svg-250">
         <img :src="emptyStateSvgPath" />
       </div>
     </div>
 
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="text-content">
 
         <template v-if="canSetCi">
@@ -34,7 +34,7 @@
           </h4>
 
           <p>
-            {{ s__(`Pipelines|Continous Integration can help
+            {{ s__(`Pipelines|Continuous Integration can help
                 catch bugs by running your tests automatically,
                 while Continuous Deployment can help you deliver
                 code to your product environment.`) }}
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index d7effb27bff..1f152ed438d 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,60 +1,99 @@
 <script>
-  import tooltip from '../../../vue_shared/directives/tooltip';
-  import icon from '../../../vue_shared/components/icon.vue';
-  import { dasherize } from '../../../lib/utils/text_utility';
-  /**
-   * 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 {
-    components: {
-      icon,
+import $ from 'jquery';
+import axios from '~/lib/utils/axios_utils';
+import { dasherize } from '~/lib/utils/text_utility';
+import { __ } from '~/locale';
+import createFlash from '~/flash';
+import tooltip from '~/vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+
+/**
+ * Renders either a cancel, retry or play icon button and handles the post request
+ *
+ * Used in:
+ * - mr widget mini pipeline graph: `mr_widget_pipeline.vue`
+ * - pipelines table
+ * - pipelines table in merge request page
+ * - pipelines table in commit page
+ * - pipelines detail page in big graph
+ */
+export default {
+  components: {
+    Icon,
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  props: {
+    tooltipText: {
+      type: String,
+      required: true,
+    },
+
+    link: {
+      type: String,
+      required: true,
     },
 
-    directives: {
-      tooltip,
+    actionIcon: {
+      type: String,
+      required: true,
     },
 
-    props: {
-      tooltipText: {
-        type: String,
-        required: true,
-      },
-
-      link: {
-        type: String,
-        required: true,
-      },
-
-      actionMethod: {
-        type: String,
-        required: true,
-      },
-
-      actionIcon: {
-        type: String,
-        required: true,
-      },
+  },
+  data() {
+    return {
+      isDisabled: false,
+    };
+  },
+
+  computed: {
+    cssClass() {
+      const actionIconDash = dasherize(this.actionIcon);
+      return `${actionIconDash} js-icon-${actionIconDash}`;
     },
+  },
+  methods: {
+    /**
+     * The request should not be handled here.
+     * However due to this component being used in several
+     * different apps it avoids repetition & complexity.
+     *
+     */
+    onClickAction() {
+      $(this.$el).tooltip('hide');
+
+      this.isDisabled = true;
+
+      axios.post(`${this.link}.json`)
+        .then(() => {
+          this.isDisabled = false;
+          this.$emit('pipelineActionRequestComplete');
+        })
+        .catch(() => {
+          this.isDisabled = false;
 
-    computed: {
-      cssClass() {
-        const actionIconDash = dasherize(this.actionIcon);
-        return `${actionIconDash} js-icon-${actionIconDash}`;
-      },
+          createFlash(__('An error occurred while making the request.'));
+        });
     },
-  };
+  },
+};
 </script>
 <template>
-  <a
+  <button
     v-tooltip
-    :data-method="actionMethod"
     :title="tooltipText"
-    :href="link"
-    class="ci-action-icon-container ci-action-icon-wrapper"
     :class="cssClass"
+    :disabled="isDisabled"
+    type="button"
+    class="js-ci-action btn btn-blank
+btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     data-container="body"
+    data-boundary="viewport"
+    @click="onClickAction"
   >
-    <icon :name="actionIcon" />
-  </a>
+    <icon :name="actionIcon"/>
+  </button>
 </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
deleted file mode 100644
index 7c4fd65e36f..00000000000
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import icon from '../../../vue_shared/components/icon.vue';
-  import tooltip from '../../../vue_shared/directives/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 {
-    components: {
-      icon,
-    },
-
-    directives: {
-      tooltip,
-    },
-    props: {
-      tooltipText: {
-        type: String,
-        required: true,
-      },
-
-      link: {
-        type: String,
-        required: true,
-      },
-
-      actionMethod: {
-        type: String,
-        required: true,
-      },
-
-      actionIcon: {
-        type: String,
-        required: true,
-      },
-    },
-  };
-</script>
-<template>
-  <a
-    v-tooltip
-    :data-method="actionMethod"
-    :title="tooltipText"
-    :href="link"
-    rel="nofollow"
-    class="ci-action-icon-wrapper js-ci-status-icon"
-    data-container="body"
-    aria-label="Job's action"
-  >
-    <icon :name="actionIcon" />
-  </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
index be213c2ee78..e047d10ac93 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -1,87 +1,95 @@
 <script>
-  import $ from 'jquery';
-  import jobNameComponent from './job_name_component.vue';
-  import jobComponent from './job_component.vue';
-  import tooltip from '../../../vue_shared/directives/tooltip';
+import $ from 'jquery';
+import JobNameComponent from './job_name_component.vue';
+import JobComponent from './job_component.vue';
+import tooltip from '../../../vue_shared/directives/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": "retry",
-   *       "title": "Retry",
-   *       "path": "/root/ci-mock/builds/4256/retry",
-   *       "method": "post"
-   *     }
-   *   }
-   * }
-   */
-  export default {
-    directives: {
-      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": "retry",
+ *       "title": "Retry",
+ *       "path": "/root/ci-mock/builds/4256/retry",
+ *       "method": "post"
+ *     }
+ *   }
+ * }
+ */
+export default {
+  directives: {
+    tooltip,
+  },
 
-    components: {
-      jobComponent,
-      jobNameComponent,
-    },
+  components: {
+    JobComponent,
+    JobNameComponent,
+  },
 
-    props: {
-      job: {
-        type: Object,
-        required: true,
-      },
+  props: {
+    job: {
+      type: Object,
+      required: true,
     },
+  },
 
-    computed: {
-      tooltipText() {
-        return `${this.job.name} - ${this.job.status.label}`;
-      },
+  computed: {
+    tooltipText() {
+      return `${this.job.name} - ${this.job.status.label}`;
     },
+  },
 
-    mounted() {
-      this.stopDropdownClickPropagation();
-    },
+  mounted() {
+    this.stopDropdownClickPropagation();
+  },
 
-    methods: {
-      /**
-     * When the user right clicks or cmd/ctrl + click in the job name
-     * the dropdown should not be closed and the link should open in another tab,
-     * so we stop propagation of the click event inside the dropdown.
+  methods: {
+    /**
+     * When the user right clicks or cmd/ctrl + click in the job name or the action icon
+     * the dropdown should not be closed so we stop propagation
+     * of the click event inside the dropdown.
      *
      * Since this component is rendered multiple times per page we need to guarantee we only
      * target the click event of this component.
      */
-      stopDropdownClickPropagation() {
-        $(this.$el
-          .querySelectorAll('.js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item'))
-          .on('click', (e) => {
-            e.stopPropagation();
-          });
-      },
+    stopDropdownClickPropagation() {
+      $(
+        '.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item',
+        this.$el,
+      ).on('click', e => {
+        e.stopPropagation();
+      });
+    },
+
+    pipelineActionRequestComplete() {
+      this.$emit('pipelineActionRequestComplete');
     },
-  };
+  },
+};
 </script>
 <template>
-  <div class="ci-job-dropdown-container">
+  <div class="ci-job-dropdown-container dropdown dropright">
     <button
       v-tooltip
+      :title="tooltipText"
       type="button"
       data-toggle="dropdown"
       data-container="body"
+      data-boundary="viewport"
+      data-display="static"
       class="dropdown-menu-toggle build-content"
-      :title="tooltipText">
+    >
 
       <job-name-component
         :name="job.name"
@@ -98,11 +106,12 @@
         <ul>
           <li
             v-for="(item, i) in job.jobs"
-            :key="i">
+            :key="i"
+          >
             <job-component
               :job="item"
-              :is-dropdown="true"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
+              @pipelineActionRequestComplete="pipelineActionRequestComplete"
             />
           </li>
         </ul>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index ab84711d4a2..4ec67f6c01b 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,54 +1,57 @@
 <script>
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-  import stageColumnComponent from './stage_column_component.vue';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import StageColumnComponent from './stage_column_component.vue';
 
-  export default {
-    components: {
-      stageColumnComponent,
-      loadingIcon,
+export default {
+  components: {
+    StageColumnComponent,
+    LoadingIcon,
+  },
+  props: {
+    isLoading: {
+      type: Boolean,
+      required: true,
     },
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
 
-    props: {
-      isLoading: {
-        type: Boolean,
-        required: true,
-      },
-      pipeline: {
-        type: Object,
-        required: true,
-      },
+  computed: {
+    graph() {
+      return this.pipeline.details && this.pipeline.details.stages;
     },
+  },
 
-    computed: {
-      graph() {
-        return this.pipeline.details && this.pipeline.details.stages;
-      },
+  methods: {
+    capitalizeStageName(name) {
+      return name.charAt(0).toUpperCase() + name.slice(1);
     },
 
-    methods: {
-      capitalizeStageName(name) {
-        return name.charAt(0).toUpperCase() + name.slice(1);
-      },
+    isFirstColumn(index) {
+      return index === 0;
+    },
 
-      isFirstColumn(index) {
-        return index === 0;
-      },
+    stageConnectorClass(index, stage) {
+      let className;
 
-      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';
+      }
 
-        // 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;
+    },
 
-        return className;
-      },
+    refreshPipelineGraph() {
+      this.$emit('refreshPipelineGraph');
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="build-content middle-block js-pipeline-graph">
@@ -70,6 +73,7 @@
           :key="stage.name"
           :stage-connector-class="stageConnectorClass(index, stage)"
           :is-first-column="isFirstColumn(index)"
+          @refreshPipelineGraph="refreshPipelineGraph"
         />
       </ul>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index 9b136573135..886e62ab1a7 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -1,95 +1,90 @@
 <script>
-  import actionComponent from './action_component.vue';
-  import dropdownActionComponent from './dropdown_action_component.vue';
-  import jobNameComponent from './job_name_component.vue';
-  import tooltip from '../../../vue_shared/directives/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": "retry",
-   *       "title": "Retry",
-   *       "path": "/root/ci-mock/builds/4256/retry",
-   *       "method": "post"
-   *     }
-   *   }
-   * }
-   */
-
-  export default {
-    components: {
-      actionComponent,
-      dropdownActionComponent,
-      jobNameComponent,
+import ActionComponent from './action_component.vue';
+import JobNameComponent from './job_name_component.vue';
+import tooltip from '../../../vue_shared/directives/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",
+ *     "tooltip": "passed",
+ *     "details_path": "/root/ci-mock/builds/4256",
+ *     "action": {
+ *       "icon": "retry",
+ *       "title": "Retry",
+ *       "path": "/root/ci-mock/builds/4256/retry",
+ *       "method": "post"
+ *     }
+ *   }
+ * }
+ */
+
+export default {
+  components: {
+    ActionComponent,
+    JobNameComponent,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    job: {
+      type: Object,
+      required: true,
     },
-
-    directives: {
-      tooltip,
+    cssClassJobName: {
+      type: String,
+      required: false,
+      default: '',
     },
-    props: {
-      job: {
-        type: Object,
-        required: true,
-      },
-
-      cssClassJobName: {
-        type: String,
-        required: false,
-        default: '',
-      },
-
-      isDropdown: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+  },
+  computed: {
+    status() {
+      return this.job && this.job.status ? this.job.status : {};
     },
 
-    computed: {
-      status() {
-        return this.job && this.job.status ? this.job.status : {};
-      },
-
-      tooltipText() {
-        const textBuilder = [];
+    tooltipText() {
+      const textBuilder = [];
 
-        if (this.job.name) {
-          textBuilder.push(this.job.name);
-        }
+      if (this.job.name) {
+        textBuilder.push(this.job.name);
+      }
 
-        if (this.job.name && this.status.label) {
-          textBuilder.push('-');
-        }
+      if (this.job.name && this.status.tooltip) {
+        textBuilder.push('-');
+      }
 
-        if (this.status.label) {
-          textBuilder.push(`${this.job.status.label}`);
-        }
+      if (this.status.tooltip) {
+        textBuilder.push(`${this.job.status.tooltip}`);
+      }
 
-        return textBuilder.join(' ');
-      },
+      return textBuilder.join(' ');
+    },
 
-      /**
-       * 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;
-      },
+    /**
+     * 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;
+    },
+  },
+  methods: {
+    pipelineActionRequestComplete() {
+      this.$emit('pipelineActionRequestComplete');
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="ci-job-component">
@@ -100,6 +95,8 @@
       :title="tooltipText"
       :class="cssClassJobName"
       data-container="body"
+      data-html="true"
+      data-boundary="viewport"
       class="js-pipeline-graph-job-link"
     >
 
@@ -110,11 +107,12 @@
     </a>
 
     <div
-      v-else
       v-tooltip
-      class="js-job-component-tooltip"
+      v-else
       :title="tooltipText"
       :class="cssClassJobName"
+      class="js-job-component-tooltip non-details-job-component"
+      data-html="true"
       data-container="body"
     >
 
@@ -125,19 +123,11 @@
     </div>
 
     <action-component
-      v-if="hasAction && !isDropdown"
-      :tooltip-text="status.action.title"
-      :link="status.action.path"
-      :action-icon="status.action.icon"
-      :action-method="status.action.method"
-    />
-
-    <dropdown-action-component
-      v-if="hasAction && isDropdown"
+      v-if="hasAction"
       :tooltip-text="status.action.title"
       :link="status.action.path"
       :action-icon="status.action.icon"
-      :action-method="status.action.method"
+      @pipelineActionRequestComplete="pipelineActionRequestComplete"
     />
   </div>
 </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
index 7adcf4017b8..2c728582b7c 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -1,55 +1,59 @@
 <script>
-  import jobComponent from './job_component.vue';
-  import dropdownJobComponent from './dropdown_job_component.vue';
+import JobComponent from './job_component.vue';
+import DropdownJobComponent from './dropdown_job_component.vue';
 
-  export default {
-    components: {
-      jobComponent,
-      dropdownJobComponent,
+export default {
+  components: {
+    JobComponent,
+    DropdownJobComponent,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
     },
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
 
-      jobs: {
-        type: Array,
-        required: true,
-      },
+    jobs: {
+      type: Array,
+      required: true,
+    },
+
+    isFirstColumn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
 
-      isFirstColumn: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    stageConnectorClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
 
-      stageConnectorClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
+  methods: {
+    firstJob(list) {
+      return list[0];
     },
 
-    methods: {
-      firstJob(list) {
-        return list[0];
-      },
+    jobId(job) {
+      return `ci-badge-${job.name}`;
+    },
 
-      jobId(job) {
-        return `ci-badge-${job.name}`;
-      },
+    buildConnnectorClass(index) {
+      return index === 0 && !this.isFirstColumn ? 'left-connector' : '';
+    },
 
-      buildConnnectorClass(index) {
-        return index === 0 && !this.isFirstColumn ? 'left-connector' : '';
-      },
+    pipelineActionRequestComplete() {
+      this.$emit('refreshPipelineGraph');
     },
-  };
+  },
+};
 </script>
 <template>
   <li
-    class="stage-column"
-    :class="stageConnectorClass">
+    :class="stageConnectorClass"
+    class="stage-column">
     <div class="stage-name">
       {{ title }}
     </div>
@@ -58,9 +62,9 @@
         <li
           v-for="(job, index) in jobs"
           :key="job.id"
-          class="build"
           :class="buildConnnectorClass(index)"
           :id="jobId(job)"
+          class="build"
         >
 
           <div class="curve"></div>
@@ -69,11 +73,13 @@
             v-if="job.size === 1"
             :job="job"
             css-class-job-name="build-content"
+            @pipelineActionRequestComplete="pipelineActionRequestComplete"
           />
 
           <dropdown-job-component
             v-if="job.size > 1"
             :job="job"
+            @pipelineActionRequestComplete="pipelineActionRequestComplete"
           />
 
         </li>
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index e08c2092680..5b212ee8931 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -82,11 +82,11 @@
     <ci-header
       v-if="shouldRenderContent"
       :status="status"
-      item-name="Pipeline"
       :item-id="pipeline.id"
       :time="pipeline.created_at"
       :user="pipeline.user"
       :actions="actions"
+      item-name="Pipeline"
       @actionClicked="postAction"
     />
     <loading-icon
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
index eba5678e3e5..1fce9f16ee0 100644
--- a/app/assets/javascripts/pipelines/components/nav_controls.vue
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -50,10 +50,10 @@
 
     <loading-button
       v-if="resetCachePath"
-      @click="onClickResetCache"
       :loading="isResetCacheButtonLoading"
-      class="btn btn-default js-clear-cache"
       :label="s__('Pipelines|Clear Runner Caches')"
+      class="btn btn-default js-clear-cache"
+      @click="onClickResetCache"
     />
 
     <a
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index ceb4d9ca604..a107e579457 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -46,7 +46,7 @@
   };
 </script>
 <template>
-  <div class="table-section section-15 hidden-xs hidden-sm pipeline-tags">
+  <div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
     <a
       :href="pipeline.path"
       class="js-pipeline-url-link">
@@ -55,10 +55,10 @@
     <span>by</span>
     <user-avatar-link
       v-if="user"
-      class="js-pipeline-url-user"
       :link-href="pipeline.user.path"
       :img-src="pipeline.user.avatar_url"
       :tooltip-text="pipeline.user.name"
+      class="js-pipeline-url-user"
     />
     <span
       v-if="!user"
@@ -67,37 +67,37 @@
     </span>
     <div class="label-container">
       <span
-        v-if="pipeline.flags.latest"
         v-tooltip
-        class="js-pipeline-url-latest label label-success"
+        v-if="pipeline.flags.latest"
+        class="js-pipeline-url-latest badge badge-success"
         title="Latest pipeline for this branch">
         latest
       </span>
       <span
-        v-if="pipeline.flags.yaml_errors"
         v-tooltip
-        class="js-pipeline-url-yaml label label-danger"
-        :title="pipeline.yaml_errors">
+        v-if="pipeline.flags.yaml_errors"
+        :title="pipeline.yaml_errors"
+        class="js-pipeline-url-yaml badge badge-danger">
         yaml invalid
       </span>
       <span
-        v-if="pipeline.flags.failure_reason"
         v-tooltip
-        class="js-pipeline-url-failure label label-danger"
-        :title="pipeline.failure_reason">
+        v-if="pipeline.flags.failure_reason"
+        :title="pipeline.failure_reason"
+        class="js-pipeline-url-failure badge badge-danger">
         error
       </span>
       <a
+        v-popover="popoverOptions"
         v-if="pipeline.flags.auto_devops"
         tabindex="0"
-        class="js-pipeline-url-autodevops label label-info autodevops-badge"
-        v-popover="popoverOptions"
+        class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
         role="button">
         Auto DevOps
       </a>
       <span
         v-if="pipeline.flags.stuck"
-        class="js-pipeline-url-stuck label label-warning">
+        class="js-pipeline-url-stuck badge badge-warning">
         stuck
       </span>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index e0a7284124d..b31b4bad7a0 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -7,10 +7,7 @@
   import TablePagination from '../../vue_shared/components/table_pagination.vue';
   import NavigationTabs from '../../vue_shared/components/navigation_tabs.vue';
   import NavigationControls from './nav_controls.vue';
-  import {
-    getParameterByName,
-    parseQueryStringIntoObject,
-  } from '../../lib/utils/common_utils';
+  import { getParameterByName } from '../../lib/utils/common_utils';
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 
   export default {
@@ -19,10 +16,7 @@
       NavigationTabs,
       NavigationControls,
     },
-    mixins: [
-      pipelinesMixin,
-      CIPaginationMixin,
-    ],
+    mixins: [pipelinesMixin, CIPaginationMixin],
     props: {
       store: {
         type: Object,
@@ -147,25 +141,26 @@
        */
       shouldRenderTabs() {
         const { stateMap } = this.$options;
-        return this.hasMadeRequest &&
-          [
-            stateMap.loading,
-            stateMap.tableList,
-            stateMap.error,
-            stateMap.emptyTab,
-          ].includes(this.stateToRender);
+        return (
+          this.hasMadeRequest &&
+          [stateMap.loading, stateMap.tableList, stateMap.error, stateMap.emptyTab].includes(
+            this.stateToRender,
+          )
+        );
       },
 
       shouldRenderButtons() {
-        return (this.newPipelinePath ||
-          this.resetCachePath ||
-          this.ciLintPath) && this.shouldRenderTabs;
+        return (
+          (this.newPipelinePath || this.resetCachePath || this.ciLintPath) && this.shouldRenderTabs
+        );
       },
 
       shouldRenderPagination() {
-        return !this.isLoading &&
+        return (
+          !this.isLoading &&
           this.state.pipelines.length &&
-          this.state.pageInfo.total > this.state.pageInfo.perPage;
+          this.state.pageInfo.total > this.state.pageInfo.perPage
+        );
       },
 
       emptyTabMessage() {
@@ -229,15 +224,13 @@
     },
     methods: {
       successCallback(resp) {
-        return resp.json().then((response) => {
-          // Because we are polling & the user is interacting verify if the response received
-          // matches the last request made
-          if (_.isEqual(parseQueryStringIntoObject(resp.url.split('?')[1]), this.requestData)) {
-            this.store.storeCount(response.count);
-            this.store.storePagination(resp.headers);
-            this.setCommonData(response.pipelines);
-          }
-        });
+        // Because we are polling & the user is interacting verify if the response received
+        // matches the last request made
+        if (_.isEqual(resp.config.params, this.requestData)) {
+          this.store.storeCount(resp.data.count);
+          this.store.storePagination(resp.headers);
+          this.setCommonData(resp.data.pipelines);
+        }
       },
       /**
        * Handles URL and query parameter changes.
@@ -251,8 +244,9 @@
         this.updateInternalState(parameters);
 
         // fetch new data
-        return this.service.getPipelines(this.requestData)
-          .then((response) => {
+        return this.service
+          .getPipelines(this.requestData)
+          .then(response => {
             this.isLoading = false;
             this.successCallback(response);
 
@@ -271,13 +265,11 @@
       handleResetRunnersCache(endpoint) {
         this.isResetCacheButtonLoading = true;
 
-        this.service.postAction(endpoint)
+        this.service
+          .postAction(endpoint)
           .then(() => {
             this.isResetCacheButtonLoading = false;
-            createFlash(
-              s__('Pipelines|Project cache successfully reset.'),
-              'notice',
-            );
+            createFlash(s__('Pipelines|Project cache successfully reset.'), 'notice');
           })
           .catch(() => {
             this.isResetCacheButtonLoading = false;
@@ -290,8 +282,8 @@
 <template>
   <div class="pipelines-container">
     <div
-      class="top-area scrolling-tabs-container inner-page-scroll-tabs"
       v-if="shouldRenderTabs || shouldRenderButtons"
+      class="top-area scrolling-tabs-container inner-page-scroll-tabs"
     >
       <div class="fade-left">
         <i
@@ -311,8 +303,8 @@
       <navigation-tabs
         v-if="shouldRenderTabs"
         :tabs="tabs"
-        @onChangeTab="onChangeTab"
         scope="pipelines"
+        @onChangeTab="onChangeTab"
       />
 
       <navigation-controls
@@ -320,8 +312,8 @@
         :new-pipeline-path="newPipelinePath"
         :reset-cache-path="resetCachePath"
         :ci-lint-path="ciLintPath"
-        @resetRunnersCache="handleResetRunnersCache"
         :is-reset-cache-button-loading="isResetCacheButtonLoading"
+        @resetRunnersCache="handleResetRunnersCache"
       />
     </div>
 
@@ -355,8 +347,8 @@
       />
 
       <div
-        class="table-holder"
         v-else-if="stateToRender === $options.stateMap.tableList"
+        class="table-holder"
       >
 
         <pipelines-table-component
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index 3297af7bde4..5070c253f11 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -44,13 +44,13 @@
   <div class="btn-group">
     <button
       v-tooltip
+      :disabled="isLoading"
       type="button"
       class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions"
       title="Manual job"
       data-toggle="dropdown"
       data-placement="top"
       aria-label="Manual job"
-      :disabled="isLoading"
     >
       <icon
         name="play"
@@ -63,17 +63,17 @@
       <loading-icon v-if="isLoading" />
     </button>
 
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(action, i) in actions"
         :key="i"
       >
         <button
+          :class="{ disabled: isActionDisabled(action) }"
+          :disabled="isActionDisabled(action)"
           type="button"
           class="js-pipeline-action-link no-btn btn"
           @click="onClickAction(action.path)"
-          :class="{ disabled: isActionDisabled(action) }"
-          :disabled="isActionDisabled(action)"
         >
           {{ action.name }}
         </button>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index 1b9e0f917a4..490df47e154 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -37,14 +37,14 @@
       >
       </i>
     </button>
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(artifact, i) in artifacts"
         :key="i">
         <a
+          :href="artifact.path"
           rel="nofollow"
           download
-          :href="artifact.path"
         >
           Download {{ artifact.name }} artifacts
         </a>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index c9028952ddd..2e777783636 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -1,7 +1,7 @@
 <script>
-  import modal from '~/vue_shared/components/modal.vue';
+  import Modal from '~/vue_shared/components/gl_modal.vue';
   import { s__, sprintf } from '~/locale';
-  import pipelinesTableRowComponent from './pipelines_table_row.vue';
+  import PipelinesTableRowComponent from './pipelines_table_row.vue';
   import eventHub from '../event_hub';
 
   /**
@@ -11,8 +11,8 @@
    */
   export default {
     components: {
-      pipelinesTableRowComponent,
-      modal,
+      PipelinesTableRowComponent,
+      Modal,
     },
     props: {
       pipelines: {
@@ -37,30 +37,19 @@
       return {
         pipelineId: '',
         endpoint: '',
-        type: '',
+        cancelingPipeline: null,
       };
     },
     computed: {
       modalTitle() {
-        return this.type === 'stop' ?
-          sprintf(s__('Pipeline|Stop pipeline #%{pipelineId}?'), {
-            pipelineId: `'${this.pipelineId}'`,
-          }, false) :
-          sprintf(s__('Pipeline|Retry pipeline #%{pipelineId}?'), {
-            pipelineId: `'${this.pipelineId}'`,
-          }, false);
+        return sprintf(s__('Pipeline|Stop pipeline #%{pipelineId}?'), {
+          pipelineId: `${this.pipelineId}`,
+        }, false);
       },
       modalText() {
-        return this.type === 'stop' ?
-          sprintf(s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'), {
-            pipelineId: `<strong>#${this.pipelineId}</strong>`,
-          }, false) :
-          sprintf(s__('Pipeline|You’re about to retry pipeline %{pipelineId}.'), {
-            pipelineId: `<strong>#${this.pipelineId}</strong>`,
-          }, false);
-      },
-      primaryButtonLabel() {
-        return this.type === 'stop' ? s__('Pipeline|Stop pipeline') : s__('Pipeline|Retry pipeline');
+        return sprintf(s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'), {
+          pipelineId: `<strong>#${this.pipelineId}</strong>`,
+        }, false);
       },
     },
     created() {
@@ -73,10 +62,10 @@
       setModalData(data) {
         this.pipelineId = data.pipelineId;
         this.endpoint = data.endpoint;
-        this.type = data.type;
       },
       onSubmit() {
         eventHub.$emit('postAction', this.endpoint);
+        this.cancelingPipeline = this.pipelineId;
       },
     },
   };
@@ -119,21 +108,18 @@
       :update-graph-dropdown="updateGraphDropdown"
       :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
+      :canceling-pipeline="cancelingPipeline"
     />
+
     <modal
       id="confirmation-modal"
-      :title="modalTitle"
-      :text="modalText"
-      kind="danger"
-      :primary-button-label="primaryButtonLabel"
+      :header-title-text="modalTitle"
+      :footer-primary-button-text="s__('Pipeline|Stop pipeline')"
+      footer-primary-button-variant="danger"
       @submit="onSubmit"
     >
-      <template
-        slot="body"
-        slot-scope="props"
-      >
-        <p v-html="props.text"></p>
-      </template>
+      <span v-html="modalText"></span>
     </modal>
+
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index 4cbd67e0372..b2744a30c2a 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -1,13 +1,15 @@
 <script>
-  /* eslint-disable no-param-reassign */
-  import asyncButtonComponent from './async_button.vue';
-  import pipelinesActionsComponent from './pipelines_actions.vue';
-  import pipelinesArtifactsComponent from './pipelines_artifacts.vue';
-  import ciBadge from '../../vue_shared/components/ci_badge_link.vue';
-  import pipelineStage from './stage.vue';
-  import pipelineUrl from './pipeline_url.vue';
-  import pipelinesTimeago from './time_ago.vue';
-  import commitComponent from '../../vue_shared/components/commit.vue';
+  import eventHub from '../event_hub';
+  import PipelinesActionsComponent from './pipelines_actions.vue';
+  import PipelinesArtifactsComponent from './pipelines_artifacts.vue';
+  import CiBadge from '../../vue_shared/components/ci_badge_link.vue';
+  import PipelineStage from './stage.vue';
+  import PipelineUrl from './pipeline_url.vue';
+  import PipelinesTimeago from './time_ago.vue';
+  import CommitComponent from '../../vue_shared/components/commit.vue';
+  import LoadingButton from '../../vue_shared/components/loading_button.vue';
+  import Icon from '../../vue_shared/components/icon.vue';
+  import { PIPELINES_TABLE } from '../constants';
 
   /**
    * Pipeline table row.
@@ -16,14 +18,15 @@
    */
   export default {
     components: {
-      asyncButtonComponent,
-      pipelinesActionsComponent,
-      pipelinesArtifactsComponent,
-      commitComponent,
-      pipelineStage,
-      pipelineUrl,
-      ciBadge,
-      pipelinesTimeago,
+      PipelinesActionsComponent,
+      PipelinesArtifactsComponent,
+      CommitComponent,
+      PipelineStage,
+      PipelineUrl,
+      CiBadge,
+      PipelinesTimeago,
+      LoadingButton,
+      Icon,
     },
     props: {
       pipeline: {
@@ -43,6 +46,17 @@
         type: String,
         required: true,
       },
+      cancelingPipeline: {
+        type: String,
+        required: false,
+        default: null,
+      },
+    },
+    pipelinesTable: PIPELINES_TABLE,
+    data() {
+      return {
+        isRetrying: false,
+      };
     },
     computed: {
       /**
@@ -119,8 +133,10 @@
         if (this.pipeline.ref) {
           return Object.keys(this.pipeline.ref).reduce((accumulator, prop) => {
             if (prop === 'path') {
+              // eslint-disable-next-line no-param-reassign
               accumulator.ref_url = this.pipeline.ref[prop];
             } else {
+              // eslint-disable-next-line no-param-reassign
               accumulator[prop] = this.pipeline.ref[prop];
             }
             return accumulator;
@@ -215,6 +231,23 @@
       isChildView() {
         return this.viewType === 'child';
       },
+
+      isCancelling() {
+        return this.cancelingPipeline === this.pipeline.id;
+      },
+    },
+
+    methods: {
+      handleCancelClick() {
+        eventHub.$emit('openConfirmationModal', {
+          pipelineId: this.pipeline.id,
+          endpoint: this.pipeline.cancel_path,
+        });
+      },
+      handleRetryClick() {
+        this.isRetrying = true;
+        eventHub.$emit('retryPipeline', this.pipeline.retry_path);
+      },
     },
   };
 </script>
@@ -268,10 +301,11 @@
       <div class="table-mobile-content">
         <template v-if="pipeline.details.stages.length > 0">
           <div
-            class="stage-container dropdown js-mini-pipeline-graph"
             v-for="(stage, index) in pipeline.details.stages"
-            :key="index">
+            :key="index"
+            class="stage-container dropdown js-mini-pipeline-graph">
             <pipeline-stage
+              :type="$options.pipelinesTable"
               :stage="stage"
               :update-dropdown="updateGraphDropdown"
             />
@@ -287,7 +321,8 @@
 
     <div
       v-if="displayPipelineActions"
-      class="table-section section-20 table-button-footer pipeline-actions">
+      class="table-section section-20 table-button-footer pipeline-actions"
+    >
       <div class="btn-group table-action-buttons">
         <pipelines-actions-component
           v-if="pipeline.details.manual_actions.length"
@@ -296,33 +331,31 @@
 
         <pipelines-artifacts-component
           v-if="pipeline.details.artifacts.length"
-          class="hidden-xs hidden-sm"
           :artifacts="pipeline.details.artifacts"
+          class="d-none d-sm-none d-md-block"
         />
 
-        <async-button-component
+        <loading-button
           v-if="pipeline.flags.retryable"
-          :endpoint="pipeline.retry_path"
-          css-class="js-pipelines-retry-button btn-default btn-retry"
-          title="Retry"
-          icon="repeat"
-          :pipeline-id="pipeline.id"
-          data-toggle="modal"
-          data-target="#confirmation-modal"
-          type="retry"
-        />
+          :loading="isRetrying"
+          :disabled="isRetrying"
+          container-class="js-pipelines-retry-button btn btn-default btn-retry"
+          @click="handleRetryClick"
+        >
+          <icon name="repeat" />
+        </loading-button>
 
-        <async-button-component
+        <loading-button
           v-if="pipeline.flags.cancelable"
-          :endpoint="pipeline.cancel_path"
-          css-class="js-pipelines-cancel-button btn-remove"
-          title="Stop"
-          icon="close"
-          :pipeline-id="pipeline.id"
+          :loading="isCancelling"
+          :disabled="isCancelling"
           data-toggle="modal"
           data-target="#confirmation-modal"
-          type="stop"
-        />
+          container-class="js-pipelines-cancel-button btn btn-remove"
+          @click="handleCancelClick"
+        >
+          <icon name="close" />
+        </loading-button>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index 8bc7a1f20b2..b9231c002fd 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -1,155 +1,180 @@
 <script>
-  import $ from 'jquery';
-
-  /**
-   * Renders each stage of the pipeline mini graph.
-   *
-   * Given the provided endpoint will make a request to
-   * fetch the dropdown data when the stage is clicked.
-   *
-   * Request is made inside this component to make it reusable between:
-   * 1. Pipelines main table
-   * 2. Pipelines table in commit and Merge request views
-   * 3. Merge request widget
-   * 4. Commit widget
-   */
-
-  import Flash from '../../flash';
-  import icon from '../../vue_shared/components/icon.vue';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-
-  export default {
-    components: {
-      loadingIcon,
-      icon,
+/**
+ * Renders each stage of the pipeline mini graph.
+ *
+ * Given the provided endpoint will make a request to
+ * fetch the dropdown data when the stage is clicked.
+ *
+ * Request is made inside this component to make it reusable between:
+ * 1. Pipelines main table
+ * 2. Pipelines table in commit and Merge request views
+ * 3. Merge request widget
+ * 4. Commit widget
+ */
+
+import $ from 'jquery';
+import { __ } from '../../locale';
+import Flash from '../../flash';
+import axios from '../../lib/utils/axios_utils';
+import eventHub from '../event_hub';
+import Icon from '../../vue_shared/components/icon.vue';
+import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
+import JobComponent from './graph/job_component.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+import { PIPELINES_TABLE } from '../constants';
+
+export default {
+  components: {
+    LoadingIcon,
+    Icon,
+    JobComponent,
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  props: {
+    stage: {
+      type: Object,
+      required: true,
     },
 
-    directives: {
-      tooltip,
+    updateDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
 
-    props: {
-      stage: {
-        type: Object,
-        required: true,
-      },
-
-      updateDropdown: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    type: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+      dropdownContent: '',
+    };
+  },
+
+  computed: {
+    dropdownClass() {
+      return this.dropdownContent.length > 0
+        ? 'js-builds-dropdown-container'
+        : 'js-builds-dropdown-loading';
     },
 
-    data() {
-      return {
-        isLoading: false,
-        dropdownContent: '',
-      };
+    triggerButtonClass() {
+      return `ci-status-icon-${this.stage.status.group}`;
     },
 
-    computed: {
-      dropdownClass() {
-        return this.dropdownContent.length > 0 ? 'js-builds-dropdown-container' : 'js-builds-dropdown-loading';
-      },
+    borderlessIcon() {
+      return `${this.stage.status.icon}_borderless`;
+    },
+  },
 
-      triggerButtonClass() {
-        return `ci-status-icon-${this.stage.status.group}`;
-      },
+  watch: {
+    updateDropdown() {
+      if (this.updateDropdown && this.isDropdownOpen() && !this.isLoading) {
+        this.fetchJobs();
+      }
+    },
+  },
+
+  updated() {
+    if (this.dropdownContent.length > 0) {
+      this.stopDropdownClickPropagation();
+    }
+  },
+
+  methods: {
+    onClickStage() {
+      if (!this.isDropdownOpen()) {
+        eventHub.$emit('clickedDropdown');
+        this.isLoading = true;
+        this.fetchJobs();
+      }
+    },
 
-      borderlessIcon() {
-        return `${this.stage.status.icon}_borderless`;
-      },
+    fetchJobs() {
+      axios
+        .get(this.stage.dropdown_path)
+        .then(({ data }) => {
+          this.dropdownContent = data.latest_statuses;
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.closeDropdown();
+          this.isLoading = false;
+
+          Flash(__('Something went wrong on our end.'));
+        });
     },
 
-    watch: {
-      updateDropdown() {
-        if (this.updateDropdown &&
-          this.isDropdownOpen() &&
-          !this.isLoading) {
-          this.fetchJobs();
-        }
-      },
+    /**
+     * When the user right clicks or cmd/ctrl + click in the job name
+     * the dropdown should not be closed and the link should open in another tab,
+     * so we stop propagation of the click event inside the dropdown.
+     *
+     * Since this component is rendered multiple times per page we need to guarantee we only
+     * target the click event of this component.
+     */
+    stopDropdownClickPropagation() {
+      $(
+        '.js-builds-dropdown-list button, .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item',
+        this.$el,
+      ).on('click', e => {
+        e.stopPropagation();
+      });
     },
 
-    updated() {
-      if (this.dropdownContent.length > 0) {
-        this.stopDropdownClickPropagation();
+    closeDropdown() {
+      if (this.isDropdownOpen()) {
+        $(this.$refs.dropdown).dropdown('toggle');
       }
     },
 
-    methods: {
-      onClickStage() {
-        if (!this.isDropdownOpen()) {
-          this.isLoading = true;
-          this.fetchJobs();
-        }
-      },
-
-      fetchJobs() {
-        this.$http.get(this.stage.dropdown_path)
-          .then(response => response.json())
-          .then((data) => {
-            this.dropdownContent = data.html;
-            this.isLoading = false;
-          })
-          .catch(() => {
-            this.closeDropdown();
-            this.isLoading = false;
-
-            const flash = new Flash('Something went wrong on our end.');
-            return flash;
-          });
-      },
-
-      /**
-       * When the user right clicks or cmd/ctrl + click in the job name
-       * the dropdown should not be closed and the link should open in another tab,
-       * so we stop propagation of the click event inside the dropdown.
-       *
-       * Since this component is rendered multiple times per page we need to guarantee we only
-       * target the click event of this component.
-       */
-      stopDropdownClickPropagation() {
-        $(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item'))
-          .on('click', (e) => {
-            e.stopPropagation();
-          });
-      },
-
-      closeDropdown() {
-        if (this.isDropdownOpen()) {
-          $(this.$refs.dropdown).dropdown('toggle');
-        }
-      },
-
-      isDropdownOpen() {
-        return this.$el.classList.contains('open');
-      },
+    isDropdownOpen() {
+      return this.$el.classList.contains('open');
+    },
+
+    pipelineActionRequestComplete() {
+      if (this.type === PIPELINES_TABLE) {
+        // warn the table to update
+        eventHub.$emit('refreshPipelinesTable');
+      } else {
+        // close the dropdown in mr widget
+        $(this.$refs.dropdown).dropdown('toggle');
+      }
     },
-  };
+  },
+};
 </script>
 
 <template>
   <div class="dropdown">
     <button
       v-tooltip
+      id="stageDropdown"
+      ref="dropdown"
       :class="triggerButtonClass"
-      @click="onClickStage"
-      class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
       :title="stage.title"
+      class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
       data-placement="top"
       data-toggle="dropdown"
+      data-display="static"
       type="button"
-      id="stageDropdown"
       aria-haspopup="true"
       aria-expanded="false"
+      @click="onClickStage"
     >
 
       <span
-        aria-hidden="true"
         :aria-label="stage.title"
+        aria-hidden="true"
       >
         <icon :name="borderlessIcon" />
       </span>
@@ -167,7 +192,6 @@
     >
 
       <li
-        :class="dropdownClass"
         class="js-builds-dropdown-list scrollable-menu"
       >
 
@@ -175,8 +199,17 @@
 
         <ul
           v-else
-          v-html="dropdownContent"
         >
+          <li
+            v-for="job in dropdownContent"
+            :key="job.id"
+          >
+            <job-component
+              :job="job"
+              css-class-job-name="mini-pipeline-graph-dropdown-item"
+              @pipelineActionRequestComplete="pipelineActionRequestComplete"
+            />
+          </li>
         </ul>
       </li>
     </ul>
diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue
index cd54d26c9d3..0a97df2dc18 100644
--- a/app/assets/javascripts/pipelines/components/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/time_ago.vue
@@ -66,8 +66,8 @@
     </div>
     <div class="table-mobile-content">
       <p
-        class="duration"
         v-if="hasDuration"
+        class="duration"
       >
         <span v-html="iconTimerSvg">
         </span>
@@ -75,8 +75,8 @@
       </p>
 
       <p
-        class="finished-at hidden-xs hidden-sm"
         v-if="hasFinishedTime"
+        class="finished-at d-none d-sm-none d-md-block"
       >
 
         <i
@@ -87,9 +87,9 @@
 
         <time
           v-tooltip
+          :title="tooltipTitle(finishedTime)"
           data-placement="top"
-          data-container="body"
-          :title="tooltipTitle(finishedTime)">
+          data-container="body">
           {{ timeFormated(finishedTime) }}
         </time>
       </p>
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
new file mode 100644
index 00000000000..eaa11a84cb9
--- /dev/null
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -0,0 +1,2 @@
+export const CANCEL_REQUEST = 'CANCEL_REQUEST';
+export const PIPELINES_TABLE = 'PIPELINES_TABLE';
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index 522a4277bd7..30b1eee186d 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -7,6 +7,7 @@ import SvgBlankState from '../components/blank_state.vue';
 import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 import PipelinesTableComponent from '../components/pipelines_table.vue';
 import eventHub from '../event_hub';
+import { CANCEL_REQUEST } from '../constants';
 
 export default {
   components: {
@@ -52,34 +53,62 @@ export default {
     });
 
     eventHub.$on('postAction', this.postAction);
+    eventHub.$on('retryPipeline', this.postAction);
+    eventHub.$on('clickedDropdown', this.updateTable);
+    eventHub.$on('refreshPipelinesTable', this.fetchPipelines);
   },
   beforeDestroy() {
     eventHub.$off('postAction', this.postAction);
+    eventHub.$off('retryPipeline', this.postAction);
+    eventHub.$off('clickedDropdown', this.updateTable);
+    eventHub.$off('refreshPipelinesTable', this.fetchPipelines);
   },
   destroyed() {
     this.poll.stop();
   },
   methods: {
+    updateTable() {
+      // Cancel ongoing request
+      if (this.isMakingRequest) {
+        this.service.cancelationSource.cancel(CANCEL_REQUEST);
+      }
+      // Stop polling
+      this.poll.stop();
+      // Update the table
+      return this.getPipelines()
+        .then(() => this.poll.restart());
+    },
     fetchPipelines() {
       if (!this.isMakingRequest) {
         this.isLoading = true;
 
-        this.service.getPipelines(this.requestData)
-          .then(response => this.successCallback(response))
-          .catch(() => this.errorCallback());
+        this.getPipelines();
       }
     },
+    getPipelines() {
+      return this.service.getPipelines(this.requestData)
+        .then(response => this.successCallback(response))
+        .catch((error) => this.errorCallback(error));
+    },
     setCommonData(pipelines) {
       this.store.storePipelines(pipelines);
       this.isLoading = false;
       this.updateGraphDropdown = true;
       this.hasMadeRequest = true;
+
+      // In case the previous polling request returned an error, we need to reset it
+      if (this.hasError) {
+        this.hasError = false;
+      }
     },
-    errorCallback() {
-      this.hasError = true;
-      this.isLoading = false;
-      this.updateGraphDropdown = false;
+    errorCallback(error) {
       this.hasMadeRequest = true;
+      this.isLoading = false;
+
+      if (error && error.message && error.message !== CANCEL_REQUEST) {
+        this.hasError = true;
+        this.updateGraphDropdown = false;
+      }
     },
     setIsMakingRequest(isMakingRequest) {
       this.isMakingRequest = isMakingRequest;
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index 6b26708148c..cf3ff48e608 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -10,7 +10,7 @@ import eventHub from './event_hub';
 Vue.use(Translate);
 
 export default () => {
-  const dataset = document.querySelector('.js-pipeline-details-vue').dataset;
+  const { dataset } = document.querySelector('.js-pipeline-details-vue');
 
   const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
 
@@ -27,12 +27,23 @@ export default () => {
         mediator,
       };
     },
+    methods: {
+      requestRefreshPipelineGraph() {
+        // When an action is clicked
+        // (wether in the dropdown or in the main nodes, we refresh the big graph)
+        this.mediator.refreshPipeline()
+          .catch(() => Flash(__('An error occurred while making the request.')));
+      },
+    },
     render(createElement) {
       return createElement('pipeline-graph', {
         props: {
           isLoading: this.mediator.state.isLoading,
           pipeline: this.mediator.store.state.pipeline,
         },
+        on: {
+          refreshPipelineGraph: this.requestRefreshPipelineGraph,
+        },
       });
     },
   });
@@ -56,7 +67,8 @@ export default () => {
     },
     methods: {
       postAction(action) {
-        this.mediator.service.postAction(action.path)
+        this.mediator.service
+          .postAction(action.path)
           .then(() => this.mediator.refreshPipeline())
           .catch(() => Flash(__('An error occurred while making the request.')));
       },
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediator.js b/app/assets/javascripts/pipelines/pipeline_details_mediator.js
index 10f238fe73b..5633e54b28a 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_mediator.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediator.js
@@ -40,10 +40,8 @@ export default class pipelinesMediator {
   }
 
   successCallback(response) {
-    return response.json().then((data) => {
-      this.state.isLoading = false;
-      this.store.storePipeline(data);
-    });
+    this.state.isLoading = false;
+    this.store.storePipeline(response.data);
   }
 
   errorCallback() {
@@ -52,8 +50,11 @@ export default class pipelinesMediator {
   }
 
   refreshPipeline() {
-    this.service.getPipeline()
+    this.poll.stop();
+
+    return this.service.getPipeline()
       .then(response => this.successCallback(response))
-      .catch(() => this.errorCallback());
+      .catch(() => this.errorCallback())
+      .finally(() => this.poll.restart());
   }
 }
diff --git a/app/assets/javascripts/pipelines/services/pipeline_service.js b/app/assets/javascripts/pipelines/services/pipeline_service.js
index 3e0c52c7726..a53a9cc8365 100644
--- a/app/assets/javascripts/pipelines/services/pipeline_service.js
+++ b/app/assets/javascripts/pipelines/services/pipeline_service.js
@@ -1,19 +1,16 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '../../lib/utils/axios_utils';
 
 export default class PipelineService {
   constructor(endpoint) {
-    this.pipeline = Vue.resource(endpoint);
+    this.pipeline = endpoint;
   }
 
   getPipeline() {
-    return this.pipeline.get();
+    return axios.get(this.pipeline);
   }
 
-  // eslint-disable-next-line
+  // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return Vue.http.post(`${endpoint}.json`);
+    return axios.post(`${endpoint}.json`);
   }
 }
diff --git a/app/assets/javascripts/pipelines/services/pipelines_service.js b/app/assets/javascripts/pipelines/services/pipelines_service.js
index 47736fc5f42..8317d3f4510 100644
--- a/app/assets/javascripts/pipelines/services/pipelines_service.js
+++ b/app/assets/javascripts/pipelines/services/pipelines_service.js
@@ -1,35 +1,32 @@
-/* eslint-disable class-methods-use-this */
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-import '../../vue_shared/vue_resource_interceptor';
-
-Vue.use(VueResource);
+import axios from '../../lib/utils/axios_utils';
 
 export default class PipelinesService {
-
   /**
-  * Commits and merge request endpoints need to be requested with `.json`.
-  *
-  * The url provided to request the pipelines in the new merge request
-  * page already has `.json`.
-  *
-  * @param  {String} root
-  */
+   * Commits and merge request endpoints need to be requested with `.json`.
+   *
+   * The url provided to request the pipelines in the new merge request
+   * page already has `.json`.
+   *
+   * @param  {String} root
+   */
   constructor(root) {
-    let endpoint;
-
     if (root.indexOf('.json') === -1) {
-      endpoint = `${root}.json`;
+      this.endpoint = `${root}.json`;
     } else {
-      endpoint = root;
+      this.endpoint = root;
     }
-
-    this.pipelines = Vue.resource(endpoint);
   }
 
   getPipelines(data = {}) {
     const { scope, page } = data;
-    return this.pipelines.get({ scope, page });
+    const { CancelToken } = axios;
+
+    this.cancelationSource = CancelToken.source();
+
+    return axios.get(this.endpoint, {
+      params: { scope, page },
+      cancelToken: this.cancelationSource.token,
+    });
   }
 
   /**
@@ -38,7 +35,8 @@ export default class PipelinesService {
    * @param  {String} endpoint
    * @return {Promise}
    */
+  // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return Vue.http.post(`${endpoint}.json`);
+    return axios.post(`${endpoint}.json`);
   }
 }
diff --git a/app/assets/javascripts/preview_markdown.js b/app/assets/javascripts/preview_markdown.js
index 246a265ef2b..0e973cab4d2 100644
--- a/app/assets/javascripts/preview_markdown.js
+++ b/app/assets/javascripts/preview_markdown.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, no-var, object-shorthand, comma-dangle, prefer-arrow-callback */
+/* eslint-disable func-names, no-var, object-shorthand, prefer-arrow-callback */
 
 import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
@@ -43,7 +43,7 @@ MarkdownPreview.prototype.showPreview = function ($form) {
     this.fetchMarkdownPreview(mdText, url, (function (response) {
       var body;
       if (response.body.length > 0) {
-        body = response.body;
+        ({ body } = response);
       } else {
         body = this.emptyMessage;
       }
diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
index 1ffe482d782..974629fa2af 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -1,11 +1,11 @@
 <script>
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { __, s__, sprintf } from '~/locale';
   import csrf from '~/lib/utils/csrf';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       actionUrl: {
@@ -76,14 +76,14 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-account-modal"
     :title="s__('Profiles|Delete your account?')"
     :text="text"
-    kind="danger"
     :primary-button-label="s__('Profiles|Delete account')"
-    @submit="onSubmit"
-    :submit-disabled="!canSubmit()">
+    :submit-disabled="!canSubmit()"
+    kind="danger"
+    @submit="onSubmit">
 
     <template
       slot="body"
@@ -101,9 +101,9 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
           value="delete"
         />
         <input
+          :value="csrfToken"
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken"
         />
 
         <p
@@ -114,22 +114,22 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
 
         <input
           v-if="confirmWithPassword"
+          v-model="enteredPassword"
           name="password"
           class="form-control"
           type="password"
-          v-model="enteredPassword"
           aria-labelledby="input-label"
         />
         <input
           v-else
+          v-model="enteredUsername"
           name="username"
           class="form-control"
           type="text"
-          v-model="enteredUsername"
           aria-labelledby="input-label"
         />
       </form>
     </template>
 
-  </modal>
+  </deprecated-modal>
 </template>
diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
new file mode 100644
index 00000000000..ef484ddfd61
--- /dev/null
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -0,0 +1,125 @@
+<script>
+import _ from 'underscore';
+import axios from '~/lib/utils/axios_utils';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { s__, sprintf } from '~/locale';
+import Flash from '~/flash';
+
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    actionUrl: {
+      type: String,
+      required: true,
+    },
+    rootUrl: {
+      type: String,
+      required: true,
+    },
+    initialUsername: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isRequestPending: false,
+      username: this.initialUsername,
+      newUsername: this.initialUsername,
+    };
+  },
+  computed: {
+    path() {
+      return sprintf(s__('Profiles|Current path: %{path}'), {
+        path: `${this.rootUrl}${this.username}`,
+      });
+    },
+    modalText() {
+      return sprintf(
+        s__(`Profiles|
+You are going to change the username %{currentUsernameBold} to %{newUsernameBold}.
+Profile and projects will be redirected to the %{newUsername} namespace but this redirect will expire once the %{currentUsername} namespace is registered by another user or group.
+Please update your Git repository remotes as soon as possible.`),
+        {
+          currentUsernameBold: `<strong>${_.escape(this.username)}</strong>`,
+          newUsernameBold: `<strong>${_.escape(this.newUsername)}</strong>`,
+          currentUsername: _.escape(this.username),
+          newUsername: _.escape(this.newUsername),
+        },
+        false,
+      );
+    },
+  },
+  methods: {
+    onConfirm() {
+      this.isRequestPending = true;
+      const username = this.newUsername;
+      const putData = {
+        user: {
+          username,
+        },
+      };
+
+      return axios
+        .put(this.actionUrl, putData)
+        .then(result => {
+          Flash(result.data.message, 'notice');
+          this.username = username;
+          this.isRequestPending = false;
+        })
+        .catch(error => {
+          Flash(error.response.data.message);
+          this.isRequestPending = false;
+          throw error;
+        });
+    },
+  },
+  modalId: 'username-change-confirmation-modal',
+  inputId: 'username-change-input',
+  buttonText: s__('Profiles|Update username'),
+};
+</script>
+<template>
+  <div>
+    <div class="form-group">
+      <label :for="$options.inputId">{{ s__('Profiles|Path') }}</label>
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <div class="input-group-text">
+            {{ rootUrl }}
+          </div>
+        </div>
+        <input
+          :id="$options.inputId"
+          v-model="newUsername"
+          :disabled="isRequestPending"
+          class="form-control"
+          required="required"
+        />
+      </div>
+      <p class="form-text text-muted">
+        {{ path }}
+      </p>
+    </div>
+    <button
+      :data-target="`#${$options.modalId}`"
+      :disabled="isRequestPending || newUsername === username"
+      class="btn btn-warning"
+      type="button"
+      data-toggle="modal"
+    >
+      {{ $options.buttonText }}
+    </button>
+    <gl-modal
+      :id="$options.modalId"
+      :header-title-text="s__('Profiles|Change username') + '?'"
+      :footer-primary-button-text="$options.buttonText"
+      footer-primary-button-variant="warning"
+      @submit="onConfirm"
+    >
+      <span v-html="modalText"></span>
+    </gl-modal>
+  </div>
+</template>
diff --git a/app/assets/javascripts/profile/account/index.js b/app/assets/javascripts/profile/account/index.js
index 84049a1f0b7..59c13e1a042 100644
--- a/app/assets/javascripts/profile/account/index.js
+++ b/app/assets/javascripts/profile/account/index.js
@@ -1,10 +1,25 @@
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
+import UpdateUsername from './components/update_username.vue';
 import deleteAccountModal from './components/delete_account_modal.vue';
 
 export default () => {
   Vue.use(Translate);
 
+  const updateUsernameElement = document.getElementById('update-username');
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: updateUsernameElement,
+    components: {
+      UpdateUsername,
+    },
+    render(createElement) {
+      return createElement('update-username', {
+        props: { ...updateUsernameElement.dataset },
+      });
+    },
+  });
+
   const deleteAccountButton = document.getElementById('delete-account-button');
   const deleteAccountModalEl = document.getElementById('delete-account-modal');
   // eslint-disable-next-line no-new
diff --git a/app/assets/javascripts/profile/gl_crop.js b/app/assets/javascripts/profile/gl_crop.js
index 8f93156cdd1..f641b23e519 100644
--- a/app/assets/javascripts/profile/gl_crop.js
+++ b/app/assets/javascripts/profile/gl_crop.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-useless-escape, max-len, quotes, no-var, no-underscore-dangle, func-names, space-before-function-paren, no-unused-vars, no-return-assign, object-shorthand, one-var, one-var-declaration-per-line, comma-dangle, consistent-return, class-methods-use-this, new-parens */
+/* eslint-disable no-useless-escape, max-len, no-var, no-underscore-dangle, func-names, no-unused-vars, no-return-assign, object-shorthand, one-var, one-var-declaration-per-line, comma-dangle, consistent-return, class-methods-use-this, new-parens */
 
 import $ from 'jquery';
 import 'cropper';
@@ -47,7 +47,8 @@ import _ from 'underscore';
       var _this;
       _this = this;
       this.fileInput.on('change', function(e) {
-        return _this.onFileInputChange(e, this);
+        _this.onFileInputChange(e, this);
+        this.value = null;
       });
       this.pickImageEl.on('click', this.onPickImageClick);
       this.modalCrop.on('shown.bs.modal', this.onModalShow);
@@ -85,11 +86,10 @@ import _ from 'underscore';
         cropBoxResizable: false,
         toggleDragModeOnDblclick: false,
         built: function() {
-          var $image, container, cropBoxHeight, cropBoxWidth;
-          $image = $(this);
-          container = $image.cropper('getContainerData');
-          cropBoxWidth = _this.cropBoxWidth;
-          cropBoxHeight = _this.cropBoxHeight;
+          const $image = $(this);
+          const container = $image.cropper('getContainerData');
+          const { cropBoxWidth, cropBoxHeight } = _this;
+
           return $image.cropper('setCropBoxData', {
             width: cropBoxWidth,
             height: cropBoxHeight,
@@ -136,12 +136,13 @@ import _ from 'underscore';
     }
 
     dataURLtoBlob(dataURL) {
-      var array, binary, i, k, len, v;
+      var array, binary, i, len, v;
       binary = atob(dataURL.split(',')[1]);
       array = [];
-      for (k = i = 0, len = binary.length; i < len; k = (i += 1)) {
-        v = binary[k];
-        array.push(binary.charCodeAt(k));
+
+      for (i = 0, len = binary.length; i < len; i += 1) {
+        v = binary[i];
+        array.push(binary.charCodeAt(i));
       }
       return new Blob([new Uint8Array(array)], {
         type: 'image/png'
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index 0af34657d72..5d58d968d30 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -1,8 +1,5 @@
-/* eslint-disable comma-dangle, no-unused-vars, class-methods-use-this, quotes, consistent-return, func-names, prefer-arrow-callback, space-before-function-paren, max-len */
-
 import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
-import { __ } from '~/locale';
 import flash from '../flash';
 
 export default class Profile {
diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index 4c4acd487f8..05485e352dc 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, consistent-return, one-var, one-var-declaration-per-line, no-cond-assign, max-len, object-shorthand, no-param-reassign, comma-dangle, prefer-template, no-unused-vars, no-return-assign */
+/* eslint-disable func-names, no-var, wrap-iife, quotes, consistent-return, one-var, one-var-declaration-per-line, no-cond-assign, max-len, prefer-template, no-unused-vars, no-return-assign */
 
 import $ from 'jquery';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
@@ -88,10 +88,11 @@ export default class ProjectFindFile {
 
   // render result
   renderList(filePaths, searchText) {
-    var blobItemUrl, filePath, html, i, j, len, matches, results;
+    var blobItemUrl, filePath, html, i, len, matches, results;
     this.element.find(".tree-table > tbody").empty();
     results = [];
-    for (i = j = 0, len = filePaths.length; j < len; i = (j += 1)) {
+
+    for (i = 0, len = filePaths.length; i < len; i += 1) {
       filePath = filePaths[i];
       if (i === 20) {
         break;
@@ -150,7 +151,7 @@ export default class ProjectFindFile {
   }
 
   goToTree() {
-    return location.href = this.options.treeUrl;
+    return window.location.href = this.options.treeUrl;
   }
 
   goToBlob() {
diff --git a/app/assets/javascripts/project_fork.js b/app/assets/javascripts/project_fork.js
index 6fedd94a6a9..f5cd1c3cc3e 100644
--- a/app/assets/javascripts/project_fork.js
+++ b/app/assets/javascripts/project_fork.js
@@ -4,6 +4,6 @@ export default () => {
   $('.js-fork-thumbnail').on('click', function forkThumbnailClicked() {
     if ($(this).hasClass('disabled')) return false;
 
-    return $('.js-fork-content').toggle();
+    return $('.js-fork-content').toggleClass('hidden');
   });
 };
diff --git a/app/assets/javascripts/project_import.js b/app/assets/javascripts/project_import.js
index d2d26d6f67e..5a0d2b642eb 100644
--- a/app/assets/javascripts/project_import.js
+++ b/app/assets/javascripts/project_import.js
@@ -2,7 +2,7 @@ import { visitUrl } from './lib/utils/url_utility';
 
 export default function projectImport() {
   setTimeout(() => {
-    visitUrl(location.href);
+    visitUrl(window.location.href);
   }, 5000);
 }
 
diff --git a/app/assets/javascripts/project_label_subscription.js b/app/assets/javascripts/project_label_subscription.js
index f31beb4dc78..9049f87e037 100644
--- a/app/assets/javascripts/project_label_subscription.js
+++ b/app/assets/javascripts/project_label_subscription.js
@@ -3,6 +3,17 @@ import { __ } from './locale';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
 
+const tooltipTitles = {
+  group: {
+    subscribed: __('Unsubscribe at group level'),
+    unsubscribed: __('Subscribe at group level'),
+  },
+  project: {
+    subscribed: __('Unsubscribe at project level'),
+    unsubscribed: __('Subscribe at project level'),
+  },
+};
+
 export default class ProjectLabelSubscription {
   constructor(container) {
     this.$container = $(container);
@@ -15,12 +26,10 @@ export default class ProjectLabelSubscription {
     event.preventDefault();
 
     const $btn = $(event.currentTarget);
-    const $span = $btn.find('span');
     const url = $btn.attr('data-url');
     const oldStatus = $btn.attr('data-status');
 
     $btn.addClass('disabled');
-    $span.toggleClass('hidden');
 
     axios.post(url).then(() => {
       let newStatus;
@@ -32,21 +41,28 @@ export default class ProjectLabelSubscription {
         [newStatus, newAction] = ['unsubscribed', 'Subscribe'];
       }
 
-      $span.toggleClass('hidden');
       $btn.removeClass('disabled');
 
       this.$buttons.attr('data-status', newStatus);
       this.$buttons.find('> span').text(newAction);
 
-      this.$buttons.map((button) => {
+      this.$buttons.map((i, button) => {
         const $button = $(button);
+        const originalTitle = $button.attr('data-original-title');
 
-        if ($button.attr('data-original-title')) {
-          $button.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
+        if (originalTitle) {
+          ProjectLabelSubscription.setNewTitle($button, originalTitle, newStatus, newAction);
         }
 
         return button;
       });
     }).catch(() => flash(__('There was an error subscribing to this label.')));
   }
+
+  static setNewTitle($button, originalTitle, newStatus) {
+    const type = /group/.test(originalTitle) ? 'group' : 'project';
+    const newTitle = tooltipTitles[type][newStatus];
+
+    $button.attr('title', newTitle).tooltip('_fixTitle');
+  }
 }
diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index cb2e6855d1d..240dde56325 100644
--- a/app/assets/javascripts/project_select.js
+++ b/app/assets/javascripts/project_select.js
@@ -1,4 +1,4 @@
-/* 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 */
+/* eslint-disable func-names, wrap-iife, no-var, comma-dangle, object-shorthand, one-var, one-var-declaration-per-line, no-else-return, quotes, max-len */
 
 import $ from 'jquery';
 import Api from './api';
diff --git a/app/assets/javascripts/project_visibility.js b/app/assets/javascripts/project_visibility.js
index 7c95c71e239..a52ac768e57 100644
--- a/app/assets/javascripts/project_visibility.js
+++ b/app/assets/javascripts/project_visibility.js
@@ -7,7 +7,7 @@ function setVisibilityOptions(namespaceSelector) {
   const selectedNamespace = namespaceSelector.options[namespaceSelector.selectedIndex];
   const { name, visibility, visibilityLevel, showPath, editPath } = selectedNamespace.dataset;
 
-  document.querySelectorAll('.visibility-level-setting .radio').forEach((option) => {
+  document.querySelectorAll('.visibility-level-setting .form-check').forEach((option) => {
     const optionInput = option.querySelector('input[type=radio]');
     const optionValue = optionInput ? optionInput.value : 0;
     const optionTitle = option.querySelector('.option-title');
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
new file mode 100644
index 00000000000..c15d8ba49e1
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
@@ -0,0 +1,71 @@
+import _ from 'underscore';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
+import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
+import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
+
+import store from '../store';
+
+export default {
+  store,
+  components: {
+    LoadingIcon,
+    DropdownButton,
+    DropdownSearchInput,
+    DropdownHiddenInput,
+  },
+  props: {
+    fieldId: {
+      type: String,
+      required: true,
+    },
+    fieldName: {
+      type: String,
+      required: true,
+    },
+    defaultValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      hasErrors: false,
+      searchQuery: '',
+      gapiError: '',
+    };
+  },
+  computed: {
+    results() {
+      if (!this.items) {
+        return [];
+      }
+
+      return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
+    },
+  },
+  methods: {
+    fetchSuccessHandler() {
+      if (this.defaultValue) {
+        const itemToSelect = _.find(this.items, item => item.name === this.defaultValue);
+
+        if (itemToSelect) {
+          this.setItem(itemToSelect.name);
+        }
+      }
+
+      this.isLoading = false;
+      this.hasErrors = false;
+    },
+    fetchFailureHandler(resp) {
+      this.isLoading = false;
+      this.hasErrors = true;
+
+      if (resp.result && resp.result.error) {
+        this.gapiError = resp.result.error.message;
+      }
+    },
+  },
+};
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
new file mode 100644
index 00000000000..d4497924ad8
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
@@ -0,0 +1,144 @@
+<script>
+import { sprintf, s__ } from '~/locale';
+import { mapState, mapGetters, mapActions } from 'vuex';
+
+import gkeDropdownMixin from './gke_dropdown_mixin';
+
+export default {
+  name: 'GkeMachineTypeDropdown',
+  mixins: [gkeDropdownMixin],
+  computed: {
+    ...mapState([
+      'isValidatingProjectBilling',
+      'projectHasBillingEnabled',
+      'selectedZone',
+      'selectedMachineType',
+    ]),
+    ...mapState({ items: 'machineTypes' }),
+    ...mapGetters(['hasZone', 'hasMachineType']),
+    allDropdownsSelected() {
+      return this.projectHasBillingEnabled && this.hasZone && this.hasMachineType;
+    },
+    isDisabled() {
+      return (
+        this.isLoading ||
+        this.isValidatingProjectBilling ||
+        !this.projectHasBillingEnabled ||
+        !this.hasZone
+      );
+    },
+    toggleText() {
+      if (this.isLoading) {
+        return s__('ClusterIntegration|Fetching machine types');
+      }
+
+      if (this.selectedMachineType) {
+        return this.selectedMachineType;
+      }
+
+      if (!this.projectHasBillingEnabled && !this.hasZone) {
+        return s__('ClusterIntegration|Select project and zone to choose machine type');
+      }
+
+      return !this.hasZone
+        ? s__('ClusterIntegration|Select zone to choose machine type')
+        : s__('ClusterIntegration|Select machine type');
+    },
+    errorMessage() {
+      return sprintf(
+        s__(
+          'ClusterIntegration|An error occured while trying to fetch zone machine types: %{error}',
+        ),
+        { error: this.gapiError },
+      );
+    },
+  },
+  watch: {
+    selectedZone() {
+      this.hasErrors = false;
+
+      if (this.hasZone) {
+        this.isLoading = true;
+
+        this.fetchMachineTypes()
+          .then(this.fetchSuccessHandler)
+          .catch(this.fetchFailureHandler);
+      }
+    },
+    selectedMachineType() {
+      this.enableSubmit();
+    },
+  },
+  methods: {
+    ...mapActions(['fetchMachineTypes']),
+    ...mapActions({ setItem: 'setMachineType' }),
+    enableSubmit() {
+      if (this.allDropdownsSelected) {
+        const submitButtonEl = document.querySelector('.js-gke-cluster-creation-submit');
+
+        if (submitButtonEl) {
+          submitButtonEl.removeAttribute('disabled');
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      class="js-gcp-machine-type-dropdown dropdown"
+    >
+      <dropdown-hidden-input
+        :name="fieldName"
+        :value="selectedMachineType"
+      />
+      <dropdown-button
+        :class="{ 'border-danger': hasErrors }"
+        :is-disabled="isDisabled"
+        :is-loading="isLoading"
+        :toggle-text="toggleText"
+      />
+      <div class="dropdown-menu dropdown-select">
+        <dropdown-search-input
+          v-model="searchQuery"
+          :placeholder-text="s__('ClusterIntegration|Search machine types')"
+        />
+        <div class="dropdown-content">
+          <ul>
+            <li v-show="!results.length">
+              <span class="menu-item">
+                {{ s__('ClusterIntegration|No machine types matched your search') }}
+              </span>
+            </li>
+            <li
+              v-for="result in results"
+              :key="result.id"
+            >
+              <button
+                type="button"
+                @click.prevent="setItem(result.name)"
+              >
+                {{ result.name }}
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div class="dropdown-loading">
+          <loading-icon />
+        </div>
+      </div>
+    </div>
+    <span
+      v-if="hasErrors"
+      :class="{
+        'text-danger': hasErrors,
+        'text-muted': !hasErrors
+      }"
+      class="form-text"
+    >
+      {{ errorMessage }}
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
new file mode 100644
index 00000000000..08d0a122579
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
@@ -0,0 +1,203 @@
+<script>
+import _ from 'underscore';
+import { s__, sprintf } from '~/locale';
+import { mapState, mapGetters, mapActions } from 'vuex';
+
+import gkeDropdownMixin from './gke_dropdown_mixin';
+
+export default {
+  name: 'GkeProjectIdDropdown',
+  mixins: [gkeDropdownMixin],
+  props: {
+    docsUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['selectedProject', 'isValidatingProjectBilling', 'projectHasBillingEnabled']),
+    ...mapState({ items: 'projects' }),
+    ...mapGetters(['hasProject']),
+    hasOneProject() {
+      return this.items && this.items.length === 1;
+    },
+    isDisabled() {
+      return (
+        this.isLoading || this.isValidatingProjectBilling || (this.items && this.items.length < 2)
+      );
+    },
+    toggleText() {
+      if (this.isValidatingProjectBilling) {
+        return s__('ClusterIntegration|Validating project billing status');
+      }
+
+      if (this.isLoading) {
+        return s__('ClusterIntegration|Fetching projects');
+      }
+
+      if (this.hasProject) {
+        return this.selectedProject.name;
+      }
+
+      if (!this.items) {
+        return s__('ClusterIntegration|No projects found');
+      }
+
+      return s__('ClusterIntegration|Select project');
+    },
+    helpText() {
+      let message;
+      if (this.hasErrors) {
+        return this.errorMessage;
+      }
+
+      if (!this.items) {
+        message =
+          'ClusterIntegration|We were unable to fetch any projects. Ensure that you have a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.';
+      }
+
+      message =
+        this.items && this.items.length
+          ? 'ClusterIntegration|To use a new project, first create one on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'
+          : 'ClusterIntegration|To create a cluster, first create a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.';
+
+      return sprintf(
+        s__(message),
+        {
+          docsLinkEnd: '&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>',
+          docsLinkStart: `<a href="${_.escape(
+            this.docsUrl,
+          )}" target="_blank" rel="noopener noreferrer">`,
+        },
+        false,
+      );
+    },
+    errorMessage() {
+      if (!this.projectHasBillingEnabled) {
+        if (this.gapiError) {
+          return s__(
+            'ClusterIntegration|We could not verify that one of your projects on GCP has billing enabled. Please try again.',
+          );
+        }
+
+        return sprintf(
+          s__(
+            'This project does not have billing enabled. To create a cluster, <a href=%{linkToBilling} target="_blank" rel="noopener noreferrer">enable billing <i class="fa fa-external-link" aria-hidden="true"></i></a> and try again.',
+          ),
+          {
+            linkToBilling:
+              'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral',
+          },
+          false,
+        );
+      }
+
+      return sprintf(
+        s__('ClusterIntegration|An error occured while trying to fetch your projects: %{error}'),
+        { error: this.gapiError },
+      );
+    },
+  },
+  watch: {
+    selectedProject() {
+      this.setIsValidatingProjectBilling(true);
+
+      this.validateProjectBilling()
+        .then(this.validateProjectBillingSuccessHandler)
+        .catch(this.validateProjectBillingFailureHandler);
+    },
+  },
+  created() {
+    this.isLoading = true;
+
+    this.fetchProjects()
+      .then(this.fetchSuccessHandler)
+      .catch(this.fetchFailureHandler);
+  },
+  methods: {
+    ...mapActions(['fetchProjects', 'setIsValidatingProjectBilling', 'validateProjectBilling']),
+    ...mapActions({ setItem: 'setProject' }),
+    fetchSuccessHandler() {
+      if (this.defaultValue) {
+        const projectToSelect = _.find(this.items, item => item.projectId === this.defaultValue);
+
+        if (projectToSelect) {
+          this.setItem(projectToSelect);
+        }
+      } else if (this.items.length === 1) {
+        this.setItem(this.items[0]);
+      }
+
+      this.isLoading = false;
+      this.hasErrors = false;
+    },
+    validateProjectBillingSuccessHandler() {
+      this.hasErrors = !this.projectHasBillingEnabled;
+    },
+    validateProjectBillingFailureHandler(resp) {
+      this.hasErrors = true;
+
+      this.gapiError = resp.result ? resp.result.error.message : resp;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      class="js-gcp-project-id-dropdown dropdown"
+    >
+      <dropdown-hidden-input
+        :name="fieldName"
+        :value="selectedProject.projectId"
+      />
+      <dropdown-button
+        :class="{
+          'border-danger': hasErrors,
+          'read-only': hasOneProject
+        }"
+        :is-disabled="isDisabled"
+        :is-loading="isLoading"
+        :toggle-text="toggleText"
+      />
+      <div class="dropdown-menu dropdown-select">
+        <dropdown-search-input
+          v-model="searchQuery"
+          :placeholder-text="s__('ClusterIntegration|Search projects')"
+        />
+        <div class="dropdown-content">
+          <ul>
+            <li v-show="!results.length">
+              <span class="menu-item">
+                {{ s__('ClusterIntegration|No projects matched your search') }}
+              </span>
+            </li>
+            <li
+              v-for="result in results"
+              :key="result.project_number"
+            >
+              <button
+                type="button"
+                @click.prevent="setItem(result)"
+              >
+                {{ result.name }}
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div class="dropdown-loading">
+          <loading-icon />
+        </div>
+      </div>
+    </div>
+    <span
+      :class="{
+        'text-danger': hasErrors,
+        'text-muted': !hasErrors
+      }"
+      class="form-text"
+      v-html="helpText"
+    ></span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
new file mode 100644
index 00000000000..b5476684c6a
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
@@ -0,0 +1,118 @@
+<script>
+import { sprintf, s__ } from '~/locale';
+import { mapState, mapActions } from 'vuex';
+
+import gkeDropdownMixin from './gke_dropdown_mixin';
+
+export default {
+  name: 'GkeZoneDropdown',
+  mixins: [gkeDropdownMixin],
+  computed: {
+    ...mapState([
+      'selectedProject',
+      'selectedZone',
+      'projects',
+      'isValidatingProjectBilling',
+      'projectHasBillingEnabled',
+    ]),
+    ...mapState({ items: 'zones' }),
+    isDisabled() {
+      return this.isLoading || this.isValidatingProjectBilling || !this.projectHasBillingEnabled;
+    },
+    toggleText() {
+      if (this.isLoading) {
+        return s__('ClusterIntegration|Fetching zones');
+      }
+
+      if (this.selectedZone) {
+        return this.selectedZone;
+      }
+
+      return !this.projectHasBillingEnabled
+        ? s__('ClusterIntegration|Select project to choose zone')
+        : s__('ClusterIntegration|Select zone');
+    },
+    errorMessage() {
+      return sprintf(
+        s__('ClusterIntegration|An error occured while trying to fetch project zones: %{error}'),
+        { error: this.gapiError },
+      );
+    },
+  },
+  watch: {
+    isValidatingProjectBilling(isValidating) {
+      this.hasErrors = false;
+
+      if (!isValidating && this.projectHasBillingEnabled) {
+        this.isLoading = true;
+
+        this.fetchZones()
+          .then(this.fetchSuccessHandler)
+          .catch(this.fetchFailureHandler);
+      }
+    },
+  },
+  methods: {
+    ...mapActions(['fetchZones']),
+    ...mapActions({ setItem: 'setZone' }),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      class="js-gcp-zone-dropdown dropdown"
+    >
+      <dropdown-hidden-input
+        :name="fieldName"
+        :value="selectedZone"
+      />
+      <dropdown-button
+        :class="{ 'border-danger': hasErrors }"
+        :is-disabled="isDisabled"
+        :is-loading="isLoading"
+        :toggle-text="toggleText"
+      />
+      <div class="dropdown-menu dropdown-select">
+        <dropdown-search-input
+          v-model="searchQuery"
+          :placeholder-text="s__('ClusterIntegration|Search zones')"
+        />
+        <div class="dropdown-content">
+          <ul>
+            <li v-show="!results.length">
+              <span class="menu-item">
+                {{ s__('ClusterIntegration|No zones matched your search') }}
+              </span>
+            </li>
+            <li
+              v-for="result in results"
+              :key="result.id"
+            >
+              <button
+                type="button"
+                @click.prevent="setItem(result.name)"
+              >
+                {{ result.name }}
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div class="dropdown-loading">
+          <loading-icon />
+        </div>
+      </div>
+    </div>
+    <span
+      v-if="hasErrors"
+      :class="{
+        'text-danger': hasErrors,
+        'text-muted': !hasErrors
+      }"
+      class="form-text"
+    >
+      {{ errorMessage }}
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js
new file mode 100644
index 00000000000..2a1c0819916
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js
@@ -0,0 +1,11 @@
+import { s__ } from '~/locale';
+
+export const GCP_API_ERROR = s__(
+  'ClusterIntegration|An error occurred when trying to contact the Google Cloud API. Please try again later.',
+);
+export const GCP_API_CLOUD_BILLING_ENDPOINT =
+  'https://www.googleapis.com/discovery/v1/apis/cloudbilling/v1/rest';
+export const GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT =
+  'https://www.googleapis.com/discovery/v1/apis/cloudresourcemanager/v1/rest';
+export const GCP_API_COMPUTE_ENDPOINT =
+  'https://www.googleapis.com/discovery/v1/apis/compute/v1/rest';
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js
new file mode 100644
index 00000000000..729b9404b64
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js
@@ -0,0 +1,88 @@
+/* global gapi */
+import Vue from 'vue';
+import Flash from '~/flash';
+import GkeProjectIdDropdown from './components/gke_project_id_dropdown.vue';
+import GkeZoneDropdown from './components/gke_zone_dropdown.vue';
+import GkeMachineTypeDropdown from './components/gke_machine_type_dropdown.vue';
+import * as CONSTANTS from './constants';
+
+const mountComponent = (entryPoint, component, componentName, extraProps = {}) => {
+  const el = document.querySelector(entryPoint);
+  if (!el) return false;
+
+  const hiddenInput = el.querySelector('input');
+
+  return new Vue({
+    el,
+    components: {
+      [componentName]: component,
+    },
+    render: createElement =>
+      createElement(componentName, {
+        props: {
+          fieldName: hiddenInput.getAttribute('name'),
+          fieldId: hiddenInput.getAttribute('id'),
+          defaultValue: hiddenInput.value,
+          ...extraProps,
+        },
+      }),
+  });
+};
+
+const mountGkeProjectIdDropdown = () => {
+  const entryPoint = '.js-gcp-project-id-dropdown-entry-point';
+  const el = document.querySelector(entryPoint);
+
+  mountComponent(entryPoint, GkeProjectIdDropdown, 'gke-project-id-dropdown', {
+    docsUrl: el.dataset.docsurl,
+  });
+};
+
+const mountGkeZoneDropdown = () => {
+  mountComponent('.js-gcp-zone-dropdown-entry-point', GkeZoneDropdown, 'gke-zone-dropdown');
+};
+
+const mountGkeMachineTypeDropdown = () => {
+  mountComponent(
+    '.js-gcp-machine-type-dropdown-entry-point',
+    GkeMachineTypeDropdown,
+    'gke-machine-type-dropdown',
+  );
+};
+
+const gkeDropdownErrorHandler = () => {
+  Flash(CONSTANTS.GCP_API_ERROR);
+};
+
+const initializeGapiClient = () => {
+  const el = document.querySelector('.js-gke-cluster-creation');
+  if (!el) return false;
+
+  return gapi.client
+    .init({
+      discoveryDocs: [
+        CONSTANTS.GCP_API_CLOUD_BILLING_ENDPOINT,
+        CONSTANTS.GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT,
+        CONSTANTS.GCP_API_COMPUTE_ENDPOINT,
+      ],
+    })
+    .then(() => {
+      gapi.client.setToken({ access_token: el.dataset.token });
+
+      mountGkeProjectIdDropdown();
+      mountGkeZoneDropdown();
+      mountGkeMachineTypeDropdown();
+    })
+    .catch(gkeDropdownErrorHandler);
+};
+
+const initGkeDropdowns = () => {
+  if (!gapi) {
+    gkeDropdownErrorHandler();
+    return false;
+  }
+
+  return gapi.load('client', initializeGapiClient);
+};
+
+export default initGkeDropdowns;
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js
new file mode 100644
index 00000000000..4834a856271
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js
@@ -0,0 +1,95 @@
+/* global gapi */
+import * as types from './mutation_types';
+
+const gapiResourceListRequest = ({ resource, params, commit, mutation, payloadKey }) =>
+  new Promise((resolve, reject) => {
+    const request = resource.list(params);
+
+    return request.then(
+      resp => {
+        const { result } = resp;
+
+        commit(mutation, result[payloadKey]);
+
+        resolve();
+      },
+      resp => {
+        reject(resp);
+      },
+    );
+  });
+
+export const setProject = ({ commit }, selectedProject) => {
+  commit(types.SET_PROJECT, selectedProject);
+};
+
+export const setZone = ({ commit }, selectedZone) => {
+  commit(types.SET_ZONE, selectedZone);
+};
+
+export const setMachineType = ({ commit }, selectedMachineType) => {
+  commit(types.SET_MACHINE_TYPE, selectedMachineType);
+};
+
+export const setIsValidatingProjectBilling = ({ commit }, isValidatingProjectBilling) => {
+  commit(types.SET_IS_VALIDATING_PROJECT_BILLING, isValidatingProjectBilling);
+};
+
+export const fetchProjects = ({ commit }) =>
+  gapiResourceListRequest({
+    resource: gapi.client.cloudresourcemanager.projects,
+    params: {},
+    commit,
+    mutation: types.SET_PROJECTS,
+    payloadKey: 'projects',
+  });
+
+export const validateProjectBilling = ({ dispatch, commit, state }) =>
+  new Promise((resolve, reject) => {
+    const request = gapi.client.cloudbilling.projects.getBillingInfo({
+      name: `projects/${state.selectedProject.projectId}`,
+    });
+
+    commit(types.SET_ZONE, '');
+    commit(types.SET_MACHINE_TYPE, '');
+
+    return request.then(
+      resp => {
+        const { billingEnabled } = resp.result;
+
+        commit(types.SET_PROJECT_BILLING_STATUS, !!billingEnabled);
+        dispatch('setIsValidatingProjectBilling', false);
+        resolve();
+      },
+      resp => {
+        dispatch('setIsValidatingProjectBilling', false);
+        reject(resp);
+      },
+    );
+  });
+
+export const fetchZones = ({ commit, state }) =>
+  gapiResourceListRequest({
+    resource: gapi.client.compute.zones,
+    params: {
+      project: state.selectedProject.projectId,
+    },
+    commit,
+    mutation: types.SET_ZONES,
+    payloadKey: 'items',
+  });
+
+export const fetchMachineTypes = ({ commit, state }) =>
+  gapiResourceListRequest({
+    resource: gapi.client.compute.machineTypes,
+    params: {
+      project: state.selectedProject.projectId,
+      zone: state.selectedZone,
+    },
+    commit,
+    mutation: types.SET_MACHINE_TYPES,
+    payloadKey: 'items',
+  });
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/getters.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/getters.js
new file mode 100644
index 00000000000..e39f02d0894
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/getters.js
@@ -0,0 +1,3 @@
+export const hasProject = state => !!state.selectedProject.projectId;
+export const hasZone = state => !!state.selectedZone;
+export const hasMachineType = state => !!state.selectedMachineType;
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/index.js
new file mode 100644
index 00000000000..5f72060633e
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/index.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+import createState from './state';
+
+Vue.use(Vuex);
+
+export const createStore = () =>
+  new Vuex.Store({
+    actions,
+    getters,
+    mutations,
+    state: createState(),
+  });
+
+export default createStore();
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js
new file mode 100644
index 00000000000..45a91efc2d9
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js
@@ -0,0 +1,8 @@
+export const SET_PROJECT = 'SET_PROJECT';
+export const SET_PROJECT_BILLING_STATUS = 'SET_PROJECT_BILLING_STATUS';
+export const SET_IS_VALIDATING_PROJECT_BILLING = 'SET_IS_VALIDATING_PROJECT_BILLING';
+export const SET_ZONE = 'SET_ZONE';
+export const SET_MACHINE_TYPE = 'SET_MACHINE_TYPE';
+export const SET_PROJECTS = 'SET_PROJECTS';
+export const SET_ZONES = 'SET_ZONES';
+export const SET_MACHINE_TYPES = 'SET_MACHINE_TYPES';
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js
new file mode 100644
index 00000000000..88a2c1b630d
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js
@@ -0,0 +1,28 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_PROJECT](state, selectedProject) {
+    Object.assign(state, { selectedProject });
+  },
+  [types.SET_IS_VALIDATING_PROJECT_BILLING](state, isValidatingProjectBilling) {
+    Object.assign(state, { isValidatingProjectBilling });
+  },
+  [types.SET_PROJECT_BILLING_STATUS](state, projectHasBillingEnabled) {
+    Object.assign(state, { projectHasBillingEnabled });
+  },
+  [types.SET_ZONE](state, selectedZone) {
+    Object.assign(state, { selectedZone });
+  },
+  [types.SET_MACHINE_TYPE](state, selectedMachineType) {
+    Object.assign(state, { selectedMachineType });
+  },
+  [types.SET_PROJECTS](state, projects) {
+    Object.assign(state, { projects });
+  },
+  [types.SET_ZONES](state, zones) {
+    Object.assign(state, { zones });
+  },
+  [types.SET_MACHINE_TYPES](state, machineTypes) {
+    Object.assign(state, { machineTypes });
+  },
+};
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js
new file mode 100644
index 00000000000..9f3c473d4bc
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js
@@ -0,0 +1,13 @@
+export default () => ({
+  selectedProject: {
+    projectId: '',
+    name: '',
+  },
+  selectedZone: '',
+  selectedMachineType: '',
+  isValidatingProjectBilling: null,
+  projectHasBillingEnabled: null,
+  projects: [],
+  zones: [],
+  machineTypes: [],
+});
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index 93603dfc14d..002edb4663c 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -66,8 +66,8 @@ const bindEvents = () => {
       .on('click', (e) => { e.preventDefault(); })
       .popover({
         title: $pushNewProjectTipTrigger.data('title'),
-        placement: 'auto bottom',
-        html: 'true',
+        placement: 'bottom',
+        html: true,
         content: $('.push-new-project-tip-template').html(),
       })
       .on('shown.bs.popover', () => {
@@ -90,7 +90,7 @@ const bindEvents = () => {
   function chooseTemplate() {
     $('.template-option').hide();
     $projectFieldsForm.addClass('selected');
-    $selectedIcon.removeClass('active');
+    $selectedIcon.removeClass('d-block');
     const value = $(this).val();
     const templates = {
       rails: {
@@ -109,7 +109,7 @@ const bindEvents = () => {
 
     const selectedTemplate = templates[value];
     $selectedTemplateText.text(selectedTemplate.text);
-    $(selectedTemplate.icon).addClass('active');
+    $(selectedTemplate.icon).addClass('d-block');
     $templateProjectNameInput.focus();
   }
 
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index 63f20a0041d..a4c7c143e56 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -47,7 +47,7 @@
     },
     methods: {
       successCallback(res) {
-        const pipelines = res.data.pipelines;
+        const { pipelines } = res.data;
         if (pipelines.length > 0) {
           // The pipeline entity always keeps the latest pipeline info on the `details.status`
           this.ciStatus = pipelines[0].details.status;
@@ -100,9 +100,9 @@
 <template>
   <div>
     <loading-icon
+      v-if="isLoading"
       label="Loading pipeline status"
       size="3"
-      v-if="isLoading"
     />
     <a
       v-else
@@ -112,8 +112,8 @@
         v-tooltip
         :title="statusTitle"
         :aria-label="statusTitle"
-        data-container="body"
         :status="ciStatus"
+        data-container="body"
       />
     </a>
   </div>
diff --git a/app/assets/javascripts/projects_dropdown/components/app.vue b/app/assets/javascripts/projects_dropdown/components/app.vue
index 34a60dd574b..73d49488299 100644
--- a/app/assets/javascripts/projects_dropdown/components/app.vue
+++ b/app/assets/javascripts/projects_dropdown/components/app.vue
@@ -100,9 +100,10 @@ export default {
     fetchSearchedProjects(searchQuery) {
       this.searchQuery = searchQuery;
       this.toggleLoader(true);
-      this.service.getSearchedProjects(this.searchQuery)
+      this.service
+        .getSearchedProjects(this.searchQuery)
         .then(res => res.json())
-        .then((results) => {
+        .then(results => {
           this.toggleSearchProjectsList(true);
           this.store.setSearchedProjects(results);
         })
@@ -131,14 +132,14 @@ export default {
   <div>
     <search/>
     <loading-icon
-      class="loading-animation prepend-top-20"
-      size="2"
       v-if="isLoadingProjects"
       :label="s__('ProjectsDropdown|Loading projects')"
+      class="loading-animation prepend-top-20"
+      size="2"
     />
     <div
-      class="section-header"
       v-if="isFrequentsListVisible"
+      class="section-header"
     >
       {{ s__('ProjectsDropdown|Frequently visited') }}
     </div>
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue
index 246dbeaaded..625e0aa548c 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue
@@ -37,14 +37,14 @@
       class="list-unstyled"
     >
       <li
-        class="section-empty"
         v-if="isListEmpty"
+        class="section-empty"
       >
         {{ listEmptyMessage }}
       </li>
       <projects-list-item
-        v-else
         v-for="(project, index) in projects"
+        v-else
         :key="index"
         :project-id="project.id"
         :project-name="project.name"
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
index 759cdd1ded9..eafbf6c99e2 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
@@ -79,36 +79,36 @@
     class="projects-list-item-container"
   >
     <a
-      class="clearfix"
       :href="webUrl"
+      class="clearfix"
     >
       <div
         class="project-item-avatar-container"
       >
         <img
           v-if="hasAvatar"
-          class="avatar s32"
           :src="avatarUrl"
+          class="avatar s32"
         />
         <identicon
           v-else
-          size-class="s32"
           :entity-id="projectId"
           :entity-name="projectName"
+          size-class="s32"
         />
       </div>
       <div
         class="project-item-metadata-container"
       >
         <div
-          class="project-title"
           :title="projectName"
+          class="project-title"
           v-html="highlightedProjectName"
         >
         </div>
         <div
-          class="project-namespace"
           :title="namespace"
+          class="project-namespace"
         >{{ truncatedNamespace }}</div>
       </div>
     </a>
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
index 8d0c29177e6..76e9cb9e53f 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
@@ -48,8 +48,8 @@ export default {
         {{ listEmptyMessage }}
       </li>
       <projects-list-item
-        v-else
         v-for="(project, index) in projects"
+        v-else
         :key="index"
         :project-id="project.id"
         :project-name="project.name"
diff --git a/app/assets/javascripts/projects_dropdown/components/search.vue b/app/assets/javascripts/projects_dropdown/components/search.vue
index 0c46ed184be..28f2a18f2a6 100644
--- a/app/assets/javascripts/projects_dropdown/components/search.vue
+++ b/app/assets/javascripts/projects_dropdown/components/search.vue
@@ -46,14 +46,14 @@
 
 <template>
   <div
-    class="search-input-container hidden-xs"
+    class="search-input-container d-none d-sm-block"
   >
     <input
-      type="search"
-      class="form-control"
       ref="search"
       v-model="searchQuery"
       :placeholder="s__('ProjectsDropdown|Search your projects')"
+      type="search"
+      class="form-control"
     />
     <i
       v-if="!searchQuery"
diff --git a/app/assets/javascripts/projects_dropdown/index.js b/app/assets/javascripts/projects_dropdown/index.js
index e1ca70c51a6..6056f12aa4f 100644
--- a/app/assets/javascripts/projects_dropdown/index.js
+++ b/app/assets/javascripts/projects_dropdown/index.js
@@ -31,7 +31,7 @@ document.addEventListener('DOMContentLoaded', () => {
       projectsDropdownApp,
     },
     data() {
-      const dataset = this.$options.el.dataset;
+      const { dataset } = this.$options.el;
       const store = new ProjectsStore();
       const service = new ProjectsService(dataset.userName);
 
diff --git a/app/assets/javascripts/projects_dropdown/service/projects_service.js b/app/assets/javascripts/projects_dropdown/service/projects_service.js
index 7231f520933..ed1c3deead2 100644
--- a/app/assets/javascripts/projects_dropdown/service/projects_service.js
+++ b/app/assets/javascripts/projects_dropdown/service/projects_service.js
@@ -50,7 +50,7 @@ export default class ProjectsService {
       } else {
         // Check if project is already present in frequents list
         // When found, update metadata of it.
-        storedFrequentProjects = JSON.parse(storedRawProjects).map((projectItem) => {
+        storedFrequentProjects = JSON.parse(storedRawProjects).map(projectItem => {
           if (projectItem.id === project.id) {
             matchFound = true;
             const diff = Math.abs(project.lastAccessedOn - projectItem.lastAccessedOn) / HOUR_IN_MS;
@@ -104,13 +104,17 @@ export default class ProjectsService {
       return [];
     }
 
-    if (bp.getBreakpointSize() === 'sm' ||
-        bp.getBreakpointSize() === 'xs') {
+    if (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'xs') {
       frequentProjectsCount = FREQUENT_PROJECTS.LIST_COUNT_MOBILE;
     }
 
-    const frequentProjects = storedFrequentProjects
-      .filter(project => project.frequency >= FREQUENT_PROJECTS.ELIGIBLE_FREQUENCY);
+    const frequentProjects = storedFrequentProjects.filter(
+      project => project.frequency >= FREQUENT_PROJECTS.ELIGIBLE_FREQUENCY,
+    );
+
+    if (!frequentProjects || frequentProjects.length === 0) {
+      return [];
+    }
 
     // Sort all frequent projects in decending order of frequency
     // and then by lastAccessedOn with recent most first
diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
index 0a60f4845b2..078ccbbbac2 100644
--- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -31,7 +31,7 @@ export default class PrometheusMetrics {
   /* eslint-disable class-methods-use-this */
   handlePanelToggle(e) {
     const $toggleBtn = $(e.currentTarget);
-    const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body');
+    const $currentPanelBody = $toggleBtn.closest('.card').find('.card-body');
     $currentPanelBody.toggleClass('hidden');
     if ($toggleBtn.hasClass('fa-caret-down')) {
       $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right');
@@ -107,7 +107,7 @@ export default class PrometheusMetrics {
           if (data && data.success) {
             stop(data);
           } else {
-            this.backOffRequestCounter = this.backOffRequestCounter += 1;
+            this.backOffRequestCounter += 1;
             if (this.backOffRequestCounter < 3) {
               next();
             } else {
diff --git a/app/assets/javascripts/raven/raven_config.js b/app/assets/javascripts/raven/raven_config.js
index ae54fa5f1a9..658caeecde1 100644
--- a/app/assets/javascripts/raven/raven_config.js
+++ b/app/assets/javascripts/raven/raven_config.js
@@ -37,7 +37,7 @@ const IGNORE_URLS = [
   /extensions\//i,
   /^chrome:\/\//i,
   // Other plugins
-  /127\.0\.0\.1:4001\/isrunning/i,  // Cacaoweb
+  /127\.0\.0\.1:4001\/isrunning/i, // Cacaoweb
   /webappstoolbarba\.texthelp\.com\//i,
   /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
 ];
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index ea0f7199a70..31f88675912 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -48,8 +48,8 @@
     />
 
     <collapsible-container
-      v-else-if="!isLoading && repos.length"
       v-for="(item, index) in repos"
+      v-else-if="!isLoading && repos.length"
       :key="index"
       :repo="item"
     />
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index a03180e80e6..4116c4a0489 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -28,11 +28,6 @@
         isOpen: false,
       };
     },
-    computed: {
-      clipboardText() {
-        return `docker pull ${this.repo.location}`;
-      },
-    },
     methods: {
       ...mapActions([
         'fetchRepos',
@@ -67,15 +62,15 @@
     <div class="container-image-head">
       <button
         type="button"
-        @click="toggleRepo"
         class="js-toggle-repo btn-link"
+        @click="toggleRepo"
       >
         <i
-          class="fa"
           :class="{
             'fa-chevron-right': !isOpen,
             'fa-chevron-up': isOpen,
           }"
+          class="fa"
           aria-hidden="true"
         >
         </i>
@@ -84,19 +79,19 @@
 
       <clipboard-button
         v-if="repo.location"
-        :text="clipboardText"
+        :text="repo.location"
         :title="repo.location"
         css-class="btn-default btn-transparent btn-clipboard"
       />
 
-      <div class="controls hidden-xs pull-right">
+      <div class="controls d-none d-sm-block float-right">
         <button
+          v-tooltip
           v-if="repo.canDelete"
-          type="button"
-          class="js-remove-repo btn btn-danger"
           :title="s__('ContainerRegistry|Remove repository')"
           :aria-label="s__('ContainerRegistry|Remove repository')"
-          v-tooltip
+          type="button"
+          class="js-remove-repo btn btn-danger"
           @click="handleDeleteRepository"
         >
           <i
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index ee4eb3581f3..9f4973c3490 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -56,10 +56,6 @@
           .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
       },
 
-      clipboardText(text) {
-        return `docker pull ${text}`;
-      },
-
       showError(message) {
         Flash(errorMessages[message]);
       },
@@ -89,7 +85,7 @@
             <clipboard-button
               v-if="item.location"
               :title="item.location"
-              :text="clipboardText(item.location)"
+              :text="item.location"
               css-class="btn-default btn-transparent btn-clipboard"
             />
           </td>
@@ -111,18 +107,24 @@
           </td>
 
           <td>
-            {{ timeFormated(item.createdAt) }}
+            <span
+              v-tooltip
+              :title="tooltipTitle(item.createdAt)"
+              data-placement="bottom"
+            >
+              {{ timeFormated(item.createdAt) }}
+            </span>
           </td>
 
           <td class="content">
             <button
+              v-tooltip
               v-if="item.canDelete"
-              type="button"
-              class="js-delete-registry btn btn-danger hidden-xs pull-right"
               :title="s__('ContainerRegistry|Remove tag')"
               :aria-label="s__('ContainerRegistry|Remove tag')"
+              type="button"
+              class="js-delete-registry btn btn-danger d-none d-sm-block float-right"
               data-container="body"
-              v-tooltip
               @click="handleDeleteRegistry(item)"
             >
               <i
diff --git a/app/assets/javascripts/registry/index.js b/app/assets/javascripts/registry/index.js
index 6fb125192b2..e15cd94a915 100644
--- a/app/assets/javascripts/registry/index.js
+++ b/app/assets/javascripts/registry/index.js
@@ -10,7 +10,7 @@ export default () => new Vue({
     registryApp,
   },
   data() {
-    const dataset = document.querySelector(this.$options.el).dataset;
+    const { dataset } = document.querySelector(this.$options.el);
     return {
       endpoint: dataset.endpoint,
     };
diff --git a/app/assets/javascripts/registry/stores/actions.js b/app/assets/javascripts/registry/stores/actions.js
index 795b39bb3dc..a78aa90b7b5 100644
--- a/app/assets/javascripts/registry/stores/actions.js
+++ b/app/assets/javascripts/registry/stores/actions.js
@@ -7,9 +7,10 @@ Vue.use(VueResource);
 export const fetchRepos = ({ commit, state }) => {
   commit(types.TOGGLE_MAIN_LOADING);
 
-  return Vue.http.get(state.endpoint)
+  return Vue.http
+    .get(state.endpoint)
     .then(res => res.json())
-    .then((response) => {
+    .then(response => {
       commit(types.TOGGLE_MAIN_LOADING);
       commit(types.SET_REPOS_LIST, response);
     });
@@ -18,20 +19,24 @@ export const fetchRepos = ({ commit, state }) => {
 export const fetchList = ({ commit }, { repo, page }) => {
   commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
 
-  return Vue.http.get(repo.tagsPath, { params: { page } })
-    .then((response) => {
-      const headers = response.headers;
+  return Vue.http.get(repo.tagsPath, { params: { page } }).then(response => {
+    const { headers } = response;
 
-      return response.json().then((resp) => {
-        commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
-        commit(types.SET_REGISTRY_LIST, { repo, resp, headers });
-      });
+    return response.json().then(resp => {
+      commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
+      commit(types.SET_REGISTRY_LIST, { repo, resp, headers });
     });
+  });
 };
 
+// eslint-disable-next-line no-unused-vars
 export const deleteRepo = ({ commit }, repo) => Vue.http.delete(repo.destroyPath);
 
+// eslint-disable-next-line no-unused-vars
 export const deleteRegistry = ({ commit }, image) => Vue.http.delete(image.destroyPath);
 
 export const setMainEndpoint = ({ commit }, data) => commit(types.SET_MAIN_ENDPOINT, data);
 export const toggleLoading = ({ commit }) => commit(types.TOGGLE_MAIN_LOADING);
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/registry/stores/getters.js b/app/assets/javascripts/registry/stores/getters.js
index 588f479c492..f4923512578 100644
--- a/app/assets/javascripts/registry/stores/getters.js
+++ b/app/assets/javascripts/registry/stores/getters.js
@@ -1,2 +1,5 @@
 export const isLoading = state => state.isLoading;
 export const repos = state => state.repos;
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index 2088a49590a..b27d635c6ac 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -1,10 +1,11 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-vars, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, object-shorthand, comma-dangle, no-else-return, no-param-reassign, max-len */
+/* eslint-disable func-names, no-var, no-unused-vars, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, no-else-return, no-param-reassign, max-len */
 
 import $ from 'jquery';
 import _ from 'underscore';
 import Cookies from 'js-cookie';
 import flash from './flash';
 import axios from './lib/utils/axios_utils';
+import { __ } from './locale';
 
 function Sidebar(currentUser) {
   this.toggleTodo = this.toggleTodo.bind(this);
@@ -41,12 +42,14 @@ Sidebar.prototype.addEventListeners = function() {
 };
 
 Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
-  var $allGutterToggleIcons, $this, $thisIcon;
+  var $allGutterToggleIcons, $this, isExpanded, tooltipLabel;
   e.preventDefault();
   $this = $(this);
-  $thisIcon = $this.find('i');
+  isExpanded = $this.find('i').hasClass('fa-angle-double-right');
+  tooltipLabel = isExpanded ? __('Expand sidebar') : __('Collapse sidebar');
   $allGutterToggleIcons = $('.js-sidebar-toggle i');
-  if ($thisIcon.hasClass('fa-angle-double-right')) {
+
+  if (isExpanded) {
     $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
     $('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
     $('.layout-page').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
@@ -57,6 +60,9 @@ Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
 
     if (gl.lazyLoader) gl.lazyLoader.loadCheck();
   }
+
+  $this.attr('data-original-title', tooltipLabel);
+
   if (!triggered) {
     Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
   }
@@ -102,7 +108,7 @@ Sidebar.prototype.todoUpdateDone = function(data) {
       .attr('title', $el.data(`${attrPrefix}Text`));
 
     if ($el.hasClass('has-tooltip')) {
-      $el.tooltip('fixTitle');
+      $el.tooltip('_fixTitle');
     }
 
     if ($el.data(`${attrPrefix}Icon`)) {
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 7dd3e9858c6..5b2e0468784 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-return-assign, one-var, no-var, no-underscore-dangle, one-var-declaration-per-line, no-unused-vars, no-cond-assign, consistent-return, object-shorthand, prefer-arrow-callback, func-names, space-before-function-paren, prefer-template, quotes, class-methods-use-this, no-sequences, wrap-iife, no-lonely-if, no-else-return, no-param-reassign, vars-on-top, max-len */
+/* eslint-disable no-return-assign, one-var, no-var, no-underscore-dangle, one-var-declaration-per-line, no-unused-vars, consistent-return, object-shorthand, prefer-template, quotes, class-methods-use-this, no-lonely-if, no-else-return, vars-on-top, max-len */
 
 import $ from 'jquery';
 import axios from './lib/utils/axios_utils';
@@ -233,21 +233,21 @@ export default class SearchAutocomplete {
     const issueItems = [
       {
         text: 'Issues assigned to me',
-        url: `${issuesPath}/?assignee_username=${userName}`,
+        url: `${issuesPath}/?assignee_id=${userId}`,
       },
       {
         text: "Issues I've created",
-        url: `${issuesPath}/?author_username=${userName}`,
+        url: `${issuesPath}/?author_id=${userId}`,
       },
     ];
     const mergeRequestItems = [
       {
         text: 'Merge requests assigned to me',
-        url: `${mrPath}/?assignee_username=${userName}`,
+        url: `${mrPath}/?assignee_id=${userId}`,
       },
       {
         text: "Merge requests I've created",
-        url: `${mrPath}/?author_username=${userName}`,
+        url: `${mrPath}/?author_id=${userId}`,
       },
     ];
 
@@ -289,7 +289,7 @@ export default class SearchAutocomplete {
     }
 
     // If the dropdown is closed, we'll open it
-    if (!this.dropdown.hasClass('open')) {
+    if (!this.dropdown.hasClass('show')) {
       this.loadingSuggestions = false;
       this.dropdownToggle.dropdown('toggle');
       return this.searchInput.removeClass('disabled');
@@ -424,9 +424,9 @@ export default class SearchAutocomplete {
   }
 
   disableAutocomplete() {
-    if (!this.searchInput.hasClass('disabled') && this.dropdown.hasClass('open')) {
+    if (!this.searchInput.hasClass('disabled') && this.dropdown.hasClass('show')) {
       this.searchInput.addClass('disabled');
-      this.dropdown.removeClass('open').trigger('hidden.bs.dropdown');
+      this.dropdown.removeClass('show').trigger('hidden.bs.dropdown');
       this.restoreMenu();
     }
   }
@@ -438,7 +438,7 @@ export default class SearchAutocomplete {
   }
 
   onClick(item, $el, e) {
-    if (location.pathname.indexOf(item.url) !== -1) {
+    if (window.location.pathname.indexOf(item.url) !== -1) {
       if (!e.metaKey) e.preventDefault();
       if (!this.badgePresent) {
         if (item.category === 'Projects') {
diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
index eecde4550f9..37b4a2a4c63 100644
--- a/app/assets/javascripts/settings_panels.js
+++ b/app/assets/javascripts/settings_panels.js
@@ -42,8 +42,8 @@ export default function initSettingsPanels() {
     }
   });
 
-  if (location.hash) {
-    const $target = $(location.hash);
+  if (window.location.hash) {
+    const $target = $(window.location.hash);
     if ($target.length && $target.hasClass('settings')) {
       expandSection($target);
     }
diff --git a/app/assets/javascripts/shared/milestones/form.js b/app/assets/javascripts/shared/milestones/form.js
index 2f974d6ff9d..060f374310c 100644
--- a/app/assets/javascripts/shared/milestones/form.js
+++ b/app/assets/javascripts/shared/milestones/form.js
@@ -6,5 +6,13 @@ import GLForm from '../../gl_form';
 export default (initGFM = true) => {
   new ZenMode(); // eslint-disable-line no-new
   new DueDateSelectors(); // eslint-disable-line no-new
-  new GLForm($('.milestone-form'), initGFM); // eslint-disable-line no-new
+  // eslint-disable-next-line no-new
+  new GLForm($('.milestone-form'), {
+    emojis: initGFM,
+    members: initGFM,
+    issues: initGFM,
+    mergeRequests: initGFM,
+    milestones: initGFM,
+    labels: initGFM,
+  });
 };
diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js
new file mode 100644
index 00000000000..3fc03553bdd
--- /dev/null
+++ b/app/assets/javascripts/shared/popover.js
@@ -0,0 +1,33 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+export function togglePopover(show) {
+  const isAlreadyShown = this.hasClass('js-popover-show');
+  if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) {
+    return false;
+  }
+  this.popover(show ? 'show' : 'hide');
+  this.toggleClass('disable-animation js-popover-show', show);
+
+  return true;
+}
+
+export function mouseleave() {
+  if (!$('.popover:hover').length > 0) {
+    const $popover = $(this);
+    togglePopover.call($popover, false);
+  }
+}
+
+export function mouseenter() {
+  const $popover = $(this);
+
+  const showedPopover = togglePopover.call($popover, true);
+  if (showedPopover) {
+    $('.popover').on('mouseleave', mouseleave.bind($popover));
+  }
+}
+
+export function debouncedMouseleave(debounceTimeout = 300) {
+  return _.debounce(mouseleave, debounceTimeout);
+}
diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index e31e067033f..99c71d6524a 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -85,6 +85,7 @@ export default class Shortcuts {
 
     if ($modal.length) {
       $modal.modal('toggle');
+      return null;
     }
 
     return axios.get(gon.shortcuts_path, {
diff --git a/app/assets/javascripts/shortcuts_dashboard_navigation.js b/app/assets/javascripts/shortcuts_dashboard_navigation.js
index 25f39e4fdb6..9f69f110d06 100644
--- a/app/assets/javascripts/shortcuts_dashboard_navigation.js
+++ b/app/assets/javascripts/shortcuts_dashboard_navigation.js
@@ -1,12 +1,15 @@
+import { visitUrl } from './lib/utils/url_utility';
+
 /**
  * Helper function that finds the href of the fiven selector and updates the location.
  *
  * @param  {String} selector
  */
-export default (selector) => {
-  const link = document.querySelector(selector).getAttribute('href');
+export default function findAndFollowLink(selector) {
+  const element = document.querySelector(selector);
+  const link = element && element.getAttribute('href');
 
   if (link) {
-    window.location = link;
+    visitUrl(link);
   }
-};
+}
diff --git a/app/assets/javascripts/shortcuts_find_file.js b/app/assets/javascripts/shortcuts_find_file.js
index 1e246a56b85..8658081c6c2 100644
--- a/app/assets/javascripts/shortcuts_find_file.js
+++ b/app/assets/javascripts/shortcuts_find_file.js
@@ -13,8 +13,8 @@ export default class ShortcutsFindFile extends ShortcutsNavigation {
         element === this.projectFindFile.inputElement[0] &&
         (combo === 'up' || combo === 'down' || combo === 'esc' || combo === 'enter')
       ) {
-        // when press up/down key in textbox, cusor prevent to move to home/end
-        event.preventDefault();
+        // when press up/down key in textbox, cursor prevent to move to home/end
+        e.preventDefault();
         return false;
       }
 
diff --git a/app/assets/javascripts/shortcuts_issuable.js b/app/assets/javascripts/shortcuts_issuable.js
index 193788f754f..e9451be31fd 100644
--- a/app/assets/javascripts/shortcuts_issuable.js
+++ b/app/assets/javascripts/shortcuts_issuable.js
@@ -9,12 +9,10 @@ export default class ShortcutsIssuable extends Shortcuts {
   constructor(isMergeRequest) {
     super();
 
-    this.$replyField = isMergeRequest ? $('.js-main-target-form #note_note') : $('.js-main-target-form .js-vue-comment-form');
-
     Mousetrap.bind('a', () => ShortcutsIssuable.openSidebarDropdown('assignee'));
     Mousetrap.bind('m', () => ShortcutsIssuable.openSidebarDropdown('milestone'));
     Mousetrap.bind('l', () => ShortcutsIssuable.openSidebarDropdown('labels'));
-    Mousetrap.bind('r', this.replyWithSelectedText.bind(this));
+    Mousetrap.bind('r', ShortcutsIssuable.replyWithSelectedText);
     Mousetrap.bind('e', ShortcutsIssuable.editIssue);
 
     if (isMergeRequest) {
@@ -24,11 +22,16 @@ export default class ShortcutsIssuable extends Shortcuts {
     }
   }
 
-  replyWithSelectedText() {
+  static replyWithSelectedText() {
+    const $replyField = $('.js-main-target-form .js-vue-comment-form');
     const documentFragment = window.gl.utils.getSelectedFragment();
 
+    if (!$replyField.length) {
+      return false;
+    }
+
     if (!documentFragment) {
-      this.$replyField.focus();
+      $replyField.focus();
       return false;
     }
 
@@ -39,21 +42,22 @@ export default class ShortcutsIssuable extends Shortcuts {
       return false;
     }
 
-    const quote = _.map(selected.split('\n'), val => `${(`> ${val}`).trim()}\n`);
+    const quote = _.map(selected.split('\n'), val => `${`> ${val}`.trim()}\n`);
 
     // If replyField already has some content, add a newline before our quote
-    const separator = (this.$replyField.val().trim() !== '' && '\n\n') || '';
-    this.$replyField.val((a, current) => `${current}${separator}${quote.join('')}\n`)
+    const separator = ($replyField.val().trim() !== '' && '\n\n') || '';
+    $replyField
+      .val((a, current) => `${current}${separator}${quote.join('')}\n`)
       .trigger('input')
       .trigger('change');
 
     // Trigger autosize
     const event = document.createEvent('Event');
     event.initEvent('autosize:update', true, false);
-    this.$replyField.get(0).dispatchEvent(event);
+    $replyField.get(0).dispatchEvent(event);
 
     // Focus the input field
-    this.$replyField.focus();
+    $replyField.focus();
 
     return false;
   }
diff --git a/app/assets/javascripts/shortcuts_navigation.js b/app/assets/javascripts/shortcuts_navigation.js
index a4d10850471..78f7353eb0d 100644
--- a/app/assets/javascripts/shortcuts_navigation.js
+++ b/app/assets/javascripts/shortcuts_navigation.js
@@ -7,7 +7,7 @@ export default class ShortcutsNavigation extends Shortcuts {
     super();
 
     Mousetrap.bind('g p', () => findAndFollowLink('.shortcuts-project'));
-    Mousetrap.bind('g e', () => findAndFollowLink('.shortcuts-project-activity'));
+    Mousetrap.bind('g v', () => findAndFollowLink('.shortcuts-project-activity'));
     Mousetrap.bind('g f', () => findAndFollowLink('.shortcuts-tree'));
     Mousetrap.bind('g c', () => findAndFollowLink('.shortcuts-commits'));
     Mousetrap.bind('g j', () => findAndFollowLink('.shortcuts-builds'));
@@ -16,9 +16,10 @@ export default class ShortcutsNavigation extends Shortcuts {
     Mousetrap.bind('g i', () => findAndFollowLink('.shortcuts-issues'));
     Mousetrap.bind('g b', () => findAndFollowLink('.shortcuts-issue-boards'));
     Mousetrap.bind('g m', () => findAndFollowLink('.shortcuts-merge_requests'));
-    Mousetrap.bind('g t', () => findAndFollowLink('.shortcuts-todos'));
     Mousetrap.bind('g w', () => findAndFollowLink('.shortcuts-wiki'));
     Mousetrap.bind('g s', () => findAndFollowLink('.shortcuts-snippets'));
+    Mousetrap.bind('g k', () => findAndFollowLink('.shortcuts-kubernetes'));
+    Mousetrap.bind('g e', () => findAndFollowLink('.shortcuts-environments'));
     Mousetrap.bind('i', () => findAndFollowLink('.shortcuts-new-issue'));
 
     this.enabledHelp.push('.hidden-shortcut.project');
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
index 5eeb2a41bae..284a258d3c9 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
@@ -41,7 +41,7 @@ export default {
     </i>
     <a
       v-if="editable"
-      class="js-sidebar-dropdown-toggle edit-link pull-right"
+      class="js-sidebar-dropdown-toggle edit-link float-right"
       href="#"
     >
       {{ __('Edit') }}
@@ -49,7 +49,7 @@ export default {
     <a
       v-if="showToggle"
       aria-label="Toggle sidebar"
-      class="gutter-toggle pull-right js-sidebar-toggle"
+      class="gutter-toggle float-right js-sidebar-toggle"
       href="#"
       role="button"
     >
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index 1e7f46454bf..d22a1e1ac66 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -1,6 +1,12 @@
 <script>
+import { __ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+
 export default {
   name: 'Assignees',
+  directives: {
+    tooltip,
+  },
   props: {
     rootPath: {
       type: String,
@@ -14,6 +20,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    issuableType: {
+      type: String,
+      require: true,
+      default: 'issue',
+    },
   },
   data() {
     return {
@@ -62,6 +73,12 @@ export default {
         names.push(`+ ${this.users.length - maxRender} more`);
       }
 
+      if (!this.users.length) {
+        const emptyTooltipLabel = this.issuableType === 'issue' ?
+          __('Assignee(s)') : __('Assignee');
+        names.push(emptyTooltipLabel);
+      }
+
       return names.join(', ');
     },
     sidebarAvatarCounter() {
@@ -108,11 +125,13 @@ export default {
 <template>
   <div>
     <div
+      v-tooltip
+      :class="{ 'multiple-users': hasMoreThanOneAssignee }"
+      :title="collapsedTooltipTitle"
       class="sidebar-collapsed-icon sidebar-collapsed-user"
-      :class="{ 'multiple-users': hasMoreThanOneAssignee, 'has-tooltip': hasAssignees }"
       data-container="body"
       data-placement="left"
-      :title="collapsedTooltipTitle"
+      data-boundary="viewport"
     >
       <i
         v-if="hasNoUsers"
@@ -121,17 +140,17 @@ export default {
       >
       </i>
       <button
-        type="button"
-        class="btn-link"
         v-for="(user, index) in users"
         v-if="shouldRenderCollapsedAssignee(index)"
         :key="user.id"
+        type="button"
+        class="btn-link"
       >
         <img
-          width="24"
-          class="avatar avatar-inline s24"
           :alt="assigneeAlt(user)"
           :src="avatarUrl(user)"
+          width="24"
+          class="avatar avatar-inline s24"
         />
         <span class="author">
           {{ user.name }}
@@ -167,14 +186,14 @@ export default {
       </template>
       <template v-else-if="hasOneUser">
         <a
-          class="author_link bold"
           :href="assigneeUrl(firstUser)"
+          class="author_link bold"
         >
           <img
-            width="32"
-            class="avatar avatar-inline s32"
             :alt="assigneeAlt(firstUser)"
             :src="avatarUrl(firstUser)"
+            width="32"
+            class="avatar avatar-inline s32"
           />
           <span class="author">
             {{ firstUser.name }}
@@ -187,23 +206,23 @@ export default {
       <template v-else>
         <div class="user-list">
           <div
-            class="user-item"
             v-for="(user, index) in users"
             v-if="renderAssignee(index)"
             :key="user.id"
+            class="user-item"
           >
             <a
+              :href="assigneeUrl(user)"
+              :data-title="user.name"
               class="user-link has-tooltip"
               data-container="body"
               data-placement="bottom"
-              :href="assigneeUrl(user)"
-              :data-title="user.name"
             >
               <img
-                width="32"
-                class="avatar avatar-inline s32"
                 :alt="assigneeAlt(user)"
                 :src="avatarUrl(user)"
+                width="32"
+                class="avatar avatar-inline s32"
               />
             </a>
           </div>
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
index 3c6b9c27814..123c92aff64 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
@@ -1,9 +1,9 @@
 <script>
-import Flash from '../../../flash';
+import Flash from '~/flash';
+import eventHub from '~/sidebar/event_hub';
+import Store from '~/sidebar/stores/sidebar_store';
 import AssigneeTitle from './assignee_title.vue';
 import Assignees from './assignees.vue';
-import Store from '../../stores/sidebar_store';
-import eventHub from '../../event_hub';
 
 export default {
   name: 'SidebarAssignees',
@@ -25,6 +25,11 @@ export default {
       required: false,
       default: false,
     },
+    issuableType: {
+      type: String,
+      require: true,
+      default: 'issue',
+    },
   },
   data() {
     return {
@@ -85,10 +90,11 @@ export default {
     />
     <assignees
       v-if="!store.isFetching.assignees"
-      class="value"
       :root-path="store.rootPath"
       :users="store.assignees"
       :editable="store.editable"
+      :issuable-type="issuableType"
+      class="value"
       @assign-self="assignSelf"
     />
   </div>
diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index 8a86c409b62..2b8d6207dea 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -1,59 +1,85 @@
 <script>
-  import Flash from '../../../flash';
-  import editForm from './edit_form.vue';
-  import Icon from '../../../vue_shared/components/icon.vue';
-  import { __ } from '../../../locale';
+import { __ } from '~/locale';
+import Flash from '~/flash';
+import tooltip from '~/vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+import eventHub from '~/sidebar/event_hub';
+import editForm from './edit_form.vue';
 
-  export default {
-    components: {
-      editForm,
-      Icon,
+export default {
+  components: {
+    editForm,
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    isConfidential: {
+      required: true,
+      type: Boolean,
     },
-    props: {
-      isConfidential: {
-        required: true,
-        type: Boolean,
-      },
-      isEditable: {
-        required: true,
-        type: Boolean,
-      },
-      service: {
-        required: true,
-        type: Object,
-      },
+    isEditable: {
+      required: true,
+      type: Boolean,
     },
-    data() {
-      return {
-        edit: false,
-      };
+    service: {
+      required: true,
+      type: Object,
     },
-    computed: {
-      confidentialityIcon() {
-        return this.isConfidential ? 'eye-slash' : 'eye';
-      },
+  },
+  data() {
+    return {
+      edit: false,
+    };
+  },
+  computed: {
+    confidentialityIcon() {
+      return this.isConfidential ? 'eye-slash' : 'eye';
     },
-    methods: {
-      toggleForm() {
-        this.edit = !this.edit;
-      },
-      updateConfidentialAttribute(confidential) {
-        this.service.update('issue', { confidential })
-          .then(() => location.reload())
-          .catch(() => {
-            Flash(__('Something went wrong trying to change the confidentiality of this issue'));
-          });
-      },
+    tooltipLabel() {
+      return this.isConfidential ? __('Confidential') : __('Not confidential');
     },
-  };
+  },
+  created() {
+    eventHub.$on('closeConfidentialityForm', this.toggleForm);
+  },
+  beforeDestroy() {
+    eventHub.$off('closeConfidentialityForm', this.toggleForm);
+  },
+  methods: {
+    toggleForm() {
+      this.edit = !this.edit;
+    },
+    updateConfidentialAttribute(confidential) {
+      this.service
+        .update('issue', { confidential })
+        .then(() => window.location.reload())
+        .catch(() => {
+          Flash(
+            __(
+              'Something went wrong trying to change the confidentiality of this issue',
+            ),
+          );
+        });
+    },
+  },
+};
 </script>
 
 <template>
   <div class="block issuable-sidebar-item confidentiality">
-    <div class="sidebar-collapsed-icon">
+    <div
+      v-tooltip
+      :title="tooltipLabel"
+      class="sidebar-collapsed-icon"
+      data-container="body"
+      data-placement="left"
+      data-boundary="viewport"
+      @click="toggleForm"
+    >
       <icon
         :name="confidentialityIcon"
-        :size="16"
         aria-hidden="true"
       />
     </div>
@@ -61,7 +87,7 @@
       {{ __('Confidentiality') }}
       <a
         v-if="isEditable"
-        class="pull-right confidential-edit"
+        class="float-right confidential-edit"
         href="#"
         @click.prevent="toggleForm"
       >
@@ -71,7 +97,6 @@
     <div class="value sidebar-item-value hide-collapsed">
       <editForm
         v-if="edit"
-        :toggle-form="toggleForm"
         :is-confidential="isConfidential"
         :update-confidential-attribute="updateConfidentialAttribute"
       />
@@ -79,8 +104,8 @@
         v-if="!isConfidential"
         class="no-value sidebar-item-value">
         <icon
-          name="eye"
           :size="16"
+          name="eye"
           aria-hidden="true"
           class="sidebar-item-icon inline"
         />
@@ -90,8 +115,8 @@
         v-else
         class="value sidebar-item-value hide-collapsed">
         <icon
-          name="eye-slash"
           :size="16"
+          name="eye-slash"
           aria-hidden="true"
           class="sidebar-item-icon inline is-active"
         />
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
index c569843b05f..4165aa19acf 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
@@ -1,38 +1,38 @@
 <script>
-  import editFormButtons from './edit_form_buttons.vue';
-  import { s__ } from '../../../locale';
+import editFormButtons from './edit_form_buttons.vue';
+import { s__ } from '../../../locale';
 
-  export default {
-    components: {
-      editFormButtons,
+export default {
+  components: {
+    editFormButtons,
+  },
+  props: {
+    isConfidential: {
+      required: true,
+      type: Boolean,
     },
-    props: {
-      isConfidential: {
-        required: true,
-        type: Boolean,
-      },
-      toggleForm: {
-        required: true,
-        type: Function,
-      },
-      updateConfidentialAttribute: {
-        required: true,
-        type: Function,
-      },
+    updateConfidentialAttribute: {
+      required: true,
+      type: Function,
     },
-    computed: {
-      confidentialityOnWarning() {
-        return s__('confidentiality|You are going to turn on the confidentiality. This means that only team members with <strong>at least Reporter access</strong> are able to see and leave comments on the issue.');
-      },
-      confidentialityOffWarning() {
-        return s__('confidentiality|You are going to turn off the confidentiality. This means <strong>everyone</strong> will be able to see and leave a comment on this issue.');
-      },
+  },
+  computed: {
+    confidentialityOnWarning() {
+      return s__(
+        'confidentiality|You are going to turn on the confidentiality. This means that only team members with <strong>at least Reporter access</strong> are able to see and leave comments on the issue.',
+      );
     },
-  };
+    confidentialityOffWarning() {
+      return s__(
+        'confidentiality|You are going to turn off the confidentiality. This means <strong>everyone</strong> will be able to see and leave a comment on this issue.',
+      );
+    },
+  },
+};
 </script>
 
 <template>
-  <div class="dropdown open">
+  <div class="dropdown show">
     <div class="dropdown-menu sidebar-item-warning-message">
       <div>
         <p
@@ -45,7 +45,6 @@
         </p>
         <edit-form-buttons
           :is-confidential="isConfidential"
-          :toggle-form="toggleForm"
           :update-confidential-attribute="updateConfidentialAttribute"
         />
       </div>
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
index 49d5dfeea1a..38b1ddbfd5b 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
@@ -1,14 +1,13 @@
 <script>
+import $ from 'jquery';
+import eventHub from '../../event_hub';
+
 export default {
   props: {
     isConfidential: {
       required: true,
       type: Boolean,
     },
-    toggleForm: {
-      required: true,
-      type: Function,
-    },
     updateConfidentialAttribute: {
       required: true,
       type: Function,
@@ -22,6 +21,16 @@ export default {
       return !this.isConfidential;
     },
   },
+  methods: {
+    closeForm() {
+      eventHub.$emit('closeConfidentialityForm');
+      $(this.$el).trigger('hidden.gl.dropdown');
+    },
+    submitForm() {
+      this.closeForm();
+      this.updateConfidentialAttribute(this.updateConfidentialBool);
+    },
+  },
 };
 </script>
 
@@ -30,14 +39,14 @@ export default {
     <button
       type="button"
       class="btn btn-default append-right-10"
-      @click="toggleForm"
+      @click="closeForm"
     >
       {{ __('Cancel') }}
     </button>
     <button
       type="button"
       class="btn btn-close"
-      @click.prevent="updateConfidentialAttribute(updateConfidentialBool)"
+      @click.prevent="submitForm"
     >
       {{ toggleButtonText }}
     </button>
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
index bc32e974bc3..4906dad22e1 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -1,60 +1,62 @@
 <script>
-  import editFormButtons from './edit_form_buttons.vue';
-  import issuableMixin from '../../../vue_shared/mixins/issuable';
-  import { __, sprintf } from '../../../locale';
+import editFormButtons from './edit_form_buttons.vue';
+import issuableMixin from '../../../vue_shared/mixins/issuable';
+import { __, sprintf } from '../../../locale';
 
-  export default {
-    components: {
-      editFormButtons,
+export default {
+  components: {
+    editFormButtons,
+  },
+  mixins: [issuableMixin],
+  props: {
+    isLocked: {
+      required: true,
+      type: Boolean,
     },
-    mixins: [
-      issuableMixin,
-    ],
-    props: {
-      isLocked: {
-        required: true,
-        type: Boolean,
-      },
 
-      toggleForm: {
-        required: true,
-        type: Function,
-      },
-
-      updateLockedAttribute: {
-        required: true,
-        type: Function,
-      },
+    updateLockedAttribute: {
+      required: true,
+      type: Function,
+    },
+  },
+  computed: {
+    lockWarning() {
+      return sprintf(
+        __(
+          'Lock this %{issuableDisplayName}? Only <strong>project members</strong> will be able to comment.',
+        ),
+        { issuableDisplayName: this.issuableDisplayName },
+      );
     },
-    computed: {
-      lockWarning() {
-        return sprintf(__('Lock this %{issuableDisplayName}? Only <strong>project members</strong> will be able to comment.'), { issuableDisplayName: this.issuableDisplayName });
-      },
-      unlockWarning() {
-        return sprintf(__('Unlock this %{issuableDisplayName}? <strong>Everyone</strong> will be able to comment.'), { issuableDisplayName: this.issuableDisplayName });
-      },
+    unlockWarning() {
+      return sprintf(
+        __(
+          'Unlock this %{issuableDisplayName}? <strong>Everyone</strong> will be able to comment.',
+        ),
+        { issuableDisplayName: this.issuableDisplayName },
+      );
     },
-  };
+  },
+};
 </script>
 
 <template>
-  <div class="dropdown open">
+  <div class="dropdown show">
     <div class="dropdown-menu sidebar-item-warning-message">
       <p
-        class="text"
         v-if="isLocked"
+        class="text"
         v-html="unlockWarning">
       </p>
 
       <p
-        class="text"
         v-else
+        class="text"
         v-html="lockWarning">
       </p>
 
       <edit-form-buttons
         :is-locked="isLocked"
-        :toggle-form="toggleForm"
         :update-locked-attribute="updateLockedAttribute"
       />
     </div>
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
index c3a553a7605..5e7b8f9698f 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
@@ -1,4 +1,7 @@
 <script>
+import $ from 'jquery';
+import eventHub from '../../event_hub';
+
 export default {
   props: {
     isLocked: {
@@ -6,11 +9,6 @@ export default {
       type: Boolean,
     },
 
-    toggleForm: {
-      required: true,
-      type: Function,
-    },
-
     updateLockedAttribute: {
       required: true,
       type: Function,
@@ -26,6 +24,17 @@ export default {
       return !this.isLocked;
     },
   },
+
+  methods: {
+    closeForm() {
+      eventHub.$emit('closeLockForm');
+      $(this.$el).trigger('hidden.gl.dropdown');
+    },
+    submitForm() {
+      this.closeForm();
+      this.updateLockedAttribute(this.toggleLock);
+    },
+  },
 };
 </script>
 
@@ -34,7 +43,7 @@ export default {
     <button
       type="button"
       class="btn btn-default append-right-10"
-      @click="toggleForm"
+      @click="closeForm"
     >
       {{ __('Cancel') }}
     </button>
@@ -42,7 +51,7 @@ export default {
     <button
       type="button"
       class="btn btn-close"
-      @click.prevent="updateLockedAttribute(toggleLock)"
+      @click.prevent="submitForm"
     >
       {{ buttonText }}
     </button>
diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
index 0686910fc7e..8bbc59f623a 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -1,70 +1,109 @@
 <script>
-  import Flash from '~/flash';
-  import editForm from './edit_form.vue';
-  import issuableMixin from '../../../vue_shared/mixins/issuable';
-  import Icon from '../../../vue_shared/components/icon.vue';
-
-  export default {
-    components: {
-      editForm,
-      Icon,
+import { __ } from '~/locale';
+import Flash from '~/flash';
+import tooltip from '~/vue_shared/directives/tooltip';
+import issuableMixin from '~/vue_shared/mixins/issuable';
+import Icon from '~/vue_shared/components/icon.vue';
+import eventHub from '~/sidebar/event_hub';
+import editForm from './edit_form.vue';
+
+export default {
+  components: {
+    editForm,
+    Icon,
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  mixins: [issuableMixin],
+
+  props: {
+    isLocked: {
+      required: true,
+      type: Boolean,
     },
-    mixins: [
-      issuableMixin,
-    ],
-
-    props: {
-      isLocked: {
-        required: true,
-        type: Boolean,
-      },
 
-      isEditable: {
-        required: true,
-        type: Boolean,
-      },
+    isEditable: {
+      required: true,
+      type: Boolean,
+    },
 
-      mediator: {
-        required: true,
-        type: Object,
-        validator(mediatorObject) {
-          return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
-        },
+    mediator: {
+      required: true,
+      type: Object,
+      validator(mediatorObject) {
+        return (
+          mediatorObject.service &&
+          mediatorObject.service.update &&
+          mediatorObject.store
+        );
       },
     },
+  },
 
-    computed: {
-      lockIcon() {
-        return this.isLocked ? 'lock' : 'lock-open';
-      },
+  computed: {
+    lockIcon() {
+      return this.isLocked ? 'lock' : 'lock-open';
+    },
 
-      isLockDialogOpen() {
-        return this.mediator.store.isLockDialogOpen;
-      },
+    isLockDialogOpen() {
+      return this.mediator.store.isLockDialogOpen;
     },
 
-    methods: {
-      toggleForm() {
-        this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
-      },
+    tooltipLabel() {
+      return this.isLocked ? __('Locked') : __('Unlocked');
+    },
+  },
+
+  created() {
+    eventHub.$on('closeLockForm', this.toggleForm);
+  },
+
+  beforeDestroy() {
+    eventHub.$off('closeLockForm', this.toggleForm);
+  },
+
+  methods: {
+    toggleForm() {
+      this.mediator.store.isLockDialogOpen = !this.mediator.store
+        .isLockDialogOpen;
+    },
 
-      updateLockedAttribute(locked) {
-        this.mediator.service.update(this.issuableType, {
+    updateLockedAttribute(locked) {
+      this.mediator.service
+        .update(this.issuableType, {
           discussion_locked: locked,
         })
-        .then(() => location.reload())
-        .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${this.issuableDisplayName}`)));
-      },
+        .then(() => window.location.reload())
+        .catch(() =>
+          Flash(
+            this.__(
+              `Something went wrong trying to change the locked state of this ${
+                this.issuableDisplayName
+              }`,
+            ),
+          ),
+        );
     },
-  };
+  },
+};
 </script>
 
 <template>
   <div class="block issuable-sidebar-item lock">
-    <div class="sidebar-collapsed-icon">
+    <div
+      v-tooltip
+      :title="tooltipLabel"
+      class="sidebar-collapsed-icon"
+      data-container="body"
+      data-placement="left"
+      data-boundary="viewport"
+      @click="toggleForm"
+    >
       <icon
         :name="lockIcon"
-        :size="16"
         aria-hidden="true"
         class="sidebar-item-icon is-active"
       />
@@ -74,7 +113,7 @@
       {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
       <button
         v-if="isEditable"
-        class="pull-right lock-edit"
+        class="float-right lock-edit"
         type="button"
         @click.prevent="toggleForm"
       >
@@ -85,7 +124,6 @@
     <div class="value sidebar-item-value hide-collapsed">
       <edit-form
         v-if="isLockDialogOpen"
-        :toggle-form="toggleForm"
         :is-locked="isLocked"
         :update-locked-attribute="updateLockedAttribute"
         :issuable-type="issuableType"
@@ -96,8 +134,8 @@
         class="value sidebar-item-value"
       >
         <icon
-          name="lock"
           :size="16"
+          name="lock"
           aria-hidden="true"
           class="sidebar-item-icon inline is-active"
         />
@@ -109,8 +147,8 @@
         class="no-value sidebar-item-value hide-collapsed"
       >
         <icon
-          name="lock-open"
           :size="16"
+          name="lock-open"
           aria-hidden="true"
           class="sidebar-item-icon inline"
         />
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 006a6d2905d..33dd6c981b6 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -1,9 +1,13 @@
 <script>
-  import { __, n__, sprintf } from '../../../locale';
-  import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
-  import userAvatarImage from '../../../vue_shared/components/user_avatar/user_avatar_image.vue';
+  import { __, n__, sprintf } from '~/locale';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+  import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 
   export default {
+    directives: {
+      tooltip,
+    },
     components: {
       loadingIcon,
       userAvatarImage,
@@ -66,13 +70,24 @@
       toggleMoreParticipants() {
         this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
       },
+      onClickCollapsedIcon() {
+        this.$emit('toggleSidebar');
+      },
     },
   };
 </script>
 
 <template>
   <div>
-    <div class="sidebar-collapsed-icon">
+    <div
+      v-tooltip
+      :title="participantLabel"
+      class="sidebar-collapsed-icon"
+      data-container="body"
+      data-placement="left"
+      data-boundary="viewport"
+      @click="onClickCollapsedIcon"
+    >
       <i
         class="fa fa-users"
         aria-hidden="true"
@@ -104,15 +119,15 @@
         class="participants-author js-participants-author"
       >
         <a
-          class="author_link"
           :href="participant.web_url"
+          class="author_link"
         >
           <user-avatar-image
             :lazy="true"
             :img-src="participant.avatar_url"
-            css-classes="avatar-inline"
             :size="24"
             :tooltip-text="participant.name"
+            css-classes="avatar-inline"
             tooltip-placement="bottom"
           />
         </a>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
index 3e8cc7a6630..385717e7c1e 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
@@ -1,6 +1,5 @@
 <script>
 import Store from '../../stores/sidebar_store';
-import eventHub from '../../event_hub';
 import Flash from '../../../flash';
 import { __ } from '../../../locale';
 import subscriptions from './subscriptions.vue';
@@ -20,12 +19,6 @@ export default {
       store: new Store(),
     };
   },
-  created() {
-    eventHub.$on('toggleSubscription', this.onToggleSubscription);
-  },
-  beforeDestroy() {
-    eventHub.$off('toggleSubscription', this.onToggleSubscription);
-  },
   methods: {
     onToggleSubscription() {
       this.mediator.toggleSubscription()
@@ -42,6 +35,7 @@ export default {
     <subscriptions
       :loading="store.isFetching.subscriptions"
       :subscribed="store.subscribed"
+      @toggleSubscription="onToggleSubscription"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index d69d100a26c..448c8fc3602 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -47,8 +47,25 @@
       },
     },
     methods: {
+      /**
+       * We need to emit this event on both component & eventHub
+       * for 2 dependencies;
+       *
+       * 1. eventHub: This component is used in Issue Boards sidebar
+       *              where component template is part of HAML
+       *              and event listeners are tied to app's eventHub.
+       * 2. Component: This compone is also used in Epics in EE
+       *               where listeners are tied to component event.
+       */
       toggleSubscription() {
+        // App's eventHub event emission.
         eventHub.$emit('toggleSubscription', this.id);
+
+        // Component event emission.
+        this.$emit('toggleSubscription', this.id);
+      },
+      onClickCollapsedIcon() {
+        this.$emit('toggleSidebar');
       },
     },
   };
@@ -56,12 +73,16 @@
 
 <template>
   <div>
-    <div class="sidebar-collapsed-icon">
+    <div
+      class="sidebar-collapsed-icon"
+      @click="onClickCollapsedIcon"
+    >
       <span
         v-tooltip
         :title="notificationTooltip"
         data-container="body"
         data-placement="left"
+        data-boundary="viewport"
       >
         <icon
           :name="notificationIcon"
@@ -71,14 +92,14 @@
         />
       </span>
     </div>
-    <span class="issuable-header-text hide-collapsed pull-left">
+    <span class="issuable-header-text hide-collapsed float-left">
       {{ __('Notifications') }}
     </span>
     <toggle-button
       ref="toggleButton"
-      class="pull-right hide-collapsed js-issuable-subscribe-button"
       :is-loading="showLoadingState"
       :value="subscribed"
+      class="float-right hide-collapsed js-issuable-subscribe-button"
       @change="toggleSubscription"
     />
   </div>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
index 3b86f1145d1..1d030c4f67f 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
@@ -1,12 +1,17 @@
 <script>
-  import icon from '../../../vue_shared/components/icon.vue';
-  import { abbreviateTime } from '../../../lib/utils/pretty_time';
+  import { __, sprintf } from '~/locale';
+  import { abbreviateTime } from '~/lib/utils/pretty_time';
+  import icon from '~/vue_shared/components/icon.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
 
   export default {
     name: 'TimeTrackingCollapsedState',
     components: {
       icon,
     },
+    directives: {
+      tooltip,
+    },
     props: {
       showComparisonState: {
         type: Boolean,
@@ -79,6 +84,21 @@
 
         return '';
       },
+      timeTrackedTooltipText() {
+        let title;
+        if (this.showComparisonState) {
+          title = __('Time remaining');
+        } else if (this.showEstimateOnlyState) {
+          title = __('Estimated');
+        } else if (this.showSpentOnlyState) {
+          title = __('Time spent');
+        }
+
+        return sprintf('%{title}: %{text}', ({ title, text: this.text }));
+      },
+      tooltipText() {
+        return this.showNoTimeTrackingState ? __('Time tracking') : this.timeTrackedTooltipText;
+      },
     },
     methods: {
       abbreviateTime(timeStr) {
@@ -89,7 +109,14 @@
 </script>
 
 <template>
-  <div class="sidebar-collapsed-icon">
+  <div
+    v-tooltip
+    :title="tooltipText"
+    class="sidebar-collapsed-icon"
+    data-container="body"
+    data-placement="left"
+    data-boundary="viewport"
+  >
     <icon name="timer" />
     <div class="time-tracking-collapsed-summary">
       <div :class="divClass">
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
index b5ebccd3795..d335c3f55af 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
@@ -1,7 +1,12 @@
+<script>
 import { parseSeconds, stringifyTime } from '../../../lib/utils/pretty_time';
+import tooltip from '../../../vue_shared/directives/tooltip';
 
 export default {
-  name: 'time-tracking-comparison-pane',
+  name: 'TimeTrackingComparisonPane',
+  directives: {
+    tooltip,
+  },
   props: {
     timeSpent: {
       type: Number,
@@ -43,47 +48,48 @@ export default {
       return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
     },
   },
-  template: `
-    <div class="time-tracking-comparison-pane">
+};
+</script>
+
+<template>
+  <div class="time-tracking-comparison-pane">
+    <div
+      v-tooltip
+      :title="timeRemainingTooltip"
+      :class="timeRemainingStatusClass"
+      class="compare-meter"
+      data-toggle="tooltip"
+      data-placement="top"
+      role="timeRemainingDisplay"
+    >
       <div
-        class="compare-meter"
-        data-toggle="tooltip"
-        data-placement="top"
-        role="timeRemainingDisplay"
-        :aria-valuenow="timeRemainingTooltip"
-        :title="timeRemainingTooltip"
-        :data-original-title="timeRemainingTooltip"
-        :class="timeRemainingStatusClass"
+        :aria-valuenow="timeRemainingPercent"
+        class="meter-container"
       >
         <div
-          class="meter-container"
-          role="timeSpentPercent"
-          :aria-valuenow="timeRemainingPercent"
+          :style="{ width: timeRemainingPercent }"
+          class="meter-fill"
         >
-          <div
-            :style="{ width: timeRemainingPercent }"
-            class="meter-fill"
-          />
         </div>
-        <div class="compare-display-container">
-          <div class="compare-display pull-left">
-            <span class="compare-label">
+      </div>
+      <div class="compare-display-container">
+        <div class="compare-display float-left">
+          <span class="compare-label">
             {{ s__('TimeTracking|Spent') }}
-            </span>
-            <span class="compare-value spent">
-              {{ timeSpentHumanReadable }}
-            </span>
-          </div>
-          <div class="compare-display estimated pull-right">
-            <span class="compare-label">
-              {{ s__('TimeTrackingEstimated|Est') }}
-            </span>
-            <span class="compare-value">
-              {{ timeEstimateHumanReadable }}
-            </span>
-          </div>
+          </span>
+          <span class="compare-value spent">
+            {{ timeSpentHumanReadable }}
+          </span>
+        </div>
+        <div class="compare-display estimated float-right">
+          <span class="compare-label">
+            {{ s__('TimeTrackingEstimated|Est') }}
+          </span>
+          <span class="compare-value">
+            {{ timeEstimateHumanReadable }}
+          </span>
         </div>
       </div>
     </div>
-  `,
-};
+  </div>
+</template>
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
deleted file mode 100644
index 2d324c71379..00000000000
--- a/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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">
-        {{ s__('TimeTracking|Estimated:') }}
-      </span>
-      {{ timeEstimateHumanReadable }}
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue
new file mode 100644
index 00000000000..08fce597e50
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue
@@ -0,0 +1,20 @@
+<script>
+export default {
+  name: 'TimeTrackingEstimateOnlyPane',
+  props: {
+    timeEstimateHumanReadable: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="time-tracking-estimate-only-pane">
+    <span class="bold">
+      {{ s__('TimeTracking|Estimated:') }}
+    </span>
+    {{ timeEstimateHumanReadable }}
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.js b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
index 19f74ad3c6d..19ec0f05a26 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.js
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -1,7 +1,8 @@
+<script>
 import { sprintf, s__ } from '../../../locale';
 
 export default {
-  name: 'time-tracking-help-state',
+  name: 'TimeTrackingHelpState',
   props: {
     rootPath: {
       type: String,
@@ -27,26 +28,28 @@ export default {
       );
     },
   },
-  template: `
-    <div class="time-tracking-help-state">
-      <div class="time-tracking-info">
-        <h4>
-          {{ __('Track time with quick actions') }}
-        </h4>
-        <p>
-          {{ __('Quick actions can be used in the issues description and comment boxes.') }}
-        </p>
-        <p v-html="estimateText">
-        </p>
-        <p v-html="spendText">
-        </p>
-        <a
-          class="btn btn-default learn-more-button"
-          :href="href"
-        >
-          {{ __('Learn more') }}
-        </a>
-      </div>
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="time-tracking-help-state">
+    <div class="time-tracking-info">
+      <h4>
+        {{ __('Track time with quick actions') }}
+      </h4>
+      <p>
+        {{ __('Quick actions can be used in the issues description and comment boxes.') }}
+      </p>
+      <p v-html="estimateText">
+      </p>
+      <p v-html="spendText">
+      </p>
+      <a
+        :href="href"
+        class="btn btn-default learn-more-button"
+      >
+        {{ __('Learn more') }}
+      </a>
+    </div>
+  </div>
+</template>
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
deleted file mode 100644
index 38da76c6771..00000000000
--- a/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.js
+++ /dev/null
@@ -1,10 +0,0 @@
-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/no_tracking_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue
new file mode 100644
index 00000000000..9228184df5b
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue
@@ -0,0 +1,13 @@
+<script>
+export default {
+  name: 'TimeTrackingNoTrackingPane',
+};
+</script>
+
+<template>
+  <div class="time-tracking-no-tracking-pane">
+    <span class="no-value">
+      {{ __('No estimate or time spent') }}
+    </span>
+  </div>
+</template>
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.vue
index 5626cccc022..2e1d6e9643a 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js
+++ b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
@@ -1,3 +1,4 @@
+<script>
 import $ from 'jquery';
 import _ from 'underscore';
 
@@ -10,14 +11,17 @@ import Mediator from '../../sidebar_mediator';
 import eventHub from '../../event_hub';
 
 export default {
+  components: {
+    IssuableTimeTracker,
+  },
   data() {
     return {
       mediator: new Mediator(),
       store: new Store(),
     };
   },
-  components: {
-    IssuableTimeTracker,
+  mounted() {
+    this.listenForQuickActions();
   },
   methods: {
     listenForQuickActions() {
@@ -41,18 +45,17 @@ export default {
       }
     },
   },
-  mounted() {
-    this.listenForQuickActions();
-  },
-  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>
-  `,
 };
+</script>
+
+<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"
+      :root-path="store.rootPath"
+    />
+  </div>
+</template>
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
deleted file mode 100644
index bf987562647..00000000000
--- a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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/spent_only_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
new file mode 100644
index 00000000000..59cd99f8f14
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
@@ -0,0 +1,18 @@
+<script>
+export default {
+  name: 'TimeTrackingSpentOnlyPane',
+  props: {
+    timeSpentHumanReadable: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="time-tracking-spend-only-pane">
+    <span class="bold">Spent:</span>
+    {{ timeSpentHumanReadable }}
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 28240468d2c..ca3b9338c29 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -1,10 +1,10 @@
 <script>
-import timeTrackingHelpState from './help_state';
+import TimeTrackingHelpState from './help_state.vue';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
-import timeTrackingSpentOnlyPane from './spent_only_pane';
-import timeTrackingNoTrackingPane from './no_tracking_pane';
-import timeTrackingEstimateOnlyPane from './estimate_only_pane';
-import timeTrackingComparisonPane from './comparison_pane';
+import TimeTrackingSpentOnlyPane from './spent_only_pane.vue';
+import TimeTrackingNoTrackingPane from './no_tracking_pane.vue';
+import TimeTrackingEstimateOnlyPane from './estimate_only_pane.vue';
+import TimeTrackingComparisonPane from './comparison_pane.vue';
 
 import eventHub from '../../event_hub';
 
@@ -12,11 +12,11 @@ export default {
   name: 'IssuableTimeTracker',
   components: {
     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,
+    TimeTrackingEstimateOnlyPane,
+    TimeTrackingSpentOnlyPane,
+    TimeTrackingNoTrackingPane,
+    TimeTrackingComparisonPane,
+    TimeTrackingHelpState,
   },
   props: {
     time_estimate: {
@@ -101,8 +101,8 @@ export default {
 
 <template>
   <div
-    class="time_tracker time-tracking-component-wrap"
     v-cloak
+    class="time_tracker time-tracking-component-wrap"
   >
     <time-tracking-collapsed-state
       :show-comparison-state="showComparisonState"
@@ -116,8 +116,8 @@ export default {
     <div class="title hide-collapsed">
       {{ __('Time tracking') }}
       <div
-        class="help-button pull-right"
         v-if="!showHelpState"
+        class="help-button float-right"
         @click="toggleHelpState(true)"
       >
         <i
@@ -127,8 +127,8 @@ export default {
         </i>
       </div>
       <div
-        class="close-help-button pull-right"
         v-if="showHelpState"
+        class="close-help-button float-right"
         @click="toggleHelpState(false)"
       >
         <i
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
index 1eadebc7004..b267422cd97 100644
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import _ from 'underscore';
 
 function isValidProjectId(id) {
   return id > 0;
@@ -43,7 +44,7 @@ class SidebarMoveIssue {
       renderRow: project => `
         <li>
           <a href="#" class="js-move-issue-dropdown-item">
-            ${project.name_with_namespace}
+            ${_.escape(project.name_with_namespace)}
           </a>
         </li>
       `,
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 9f5d852260e..655bf9198b7 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import Vue from 'vue';
-import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
+import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking.vue';
 import SidebarAssignees from './components/assignees/sidebar_assignees.vue';
 import ConfidentialIssueSidebar from './components/confidential/confidential_issue_sidebar.vue';
 import SidebarMoveIssue from './lib/sidebar_move_issue';
@@ -27,6 +27,7 @@ function mountAssigneesComponent(mediator) {
         mediator,
         field: el.dataset.field,
         signedIn: el.hasAttribute('data-signed-in'),
+        issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
       },
     }),
   });
@@ -74,7 +75,6 @@ function mountLockComponent(mediator) {
 function mountParticipantsComponent(mediator) {
   const el = document.querySelector('.js-sidebar-participants-entry-point');
 
-  // eslint-disable-next-line no-new
   if (!el) return;
 
   // eslint-disable-next-line no-new
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index d86557e870a..d9ca5e46770 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -80,7 +80,7 @@ export default class SidebarMediator {
     return this.service.moveIssue(this.store.moveToProjectId)
       .then(response => response.json())
       .then((data) => {
-        if (location.pathname !== data.web_url) {
+        if (window.location.pathname !== data.web_url) {
           visitUrl(data.web_url);
         }
       });
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 1afff0dba38..99c93952e2a 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -1,4 +1,4 @@
-/* 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 */
+/* eslint-disable func-names, prefer-arrow-callback, consistent-return, */
 
 import $ from 'jquery';
 import { __ } from './locale';
@@ -11,7 +11,7 @@ import syntaxHighlight from './syntax_highlight';
 const WRAPPER = '<div class="diff-content"></div>';
 const LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>';
 const ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>';
-const COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <a class="click-to-expand">Click to expand it.</a></div>';
+const COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <button class="click-to-expand btn btn-link">Click to expand it.</button></div>';
 
 export default class SingleFileDiff {
   constructor(file) {
diff --git a/app/assets/javascripts/smart_interval.js b/app/assets/javascripts/smart_interval.js
index 77ab7c964e6..5e385400747 100644
--- a/app/assets/javascripts/smart_interval.js
+++ b/app/assets/javascripts/smart_interval.js
@@ -42,8 +42,7 @@ export default class SmartInterval {
   /* public */
 
   start() {
-    const cfg = this.cfg;
-    const state = this.state;
+    const { cfg, state } = this;
 
     if (cfg.immediateExecution && !this.isLoading) {
       cfg.immediateExecution = false;
@@ -100,7 +99,7 @@ export default class SmartInterval {
   /* private */
 
   initInterval() {
-    const cfg = this.cfg;
+    const { cfg } = this;
 
     if (!cfg.lazyStart) {
       this.start();
@@ -151,7 +150,7 @@ export default class SmartInterval {
   }
 
   incrementInterval() {
-    const cfg = this.cfg;
+    const { cfg } = this;
     const currentInterval = this.getCurrentInterval();
     if (cfg.hiddenInterval && !this.isPageVisible()) return;
     let nextInterval = currentInterval * cfg.incrementByFactorOf;
@@ -166,7 +165,7 @@ export default class SmartInterval {
   isPageVisible() { return this.state.pageVisibility === 'visible'; }
 
   stopTimer() {
-    const state = this.state;
+    const { state } = this;
 
     state.intervalId = window.clearInterval(state.intervalId);
   }
diff --git a/app/assets/javascripts/snippet/snippet_embed.js b/app/assets/javascripts/snippet/snippet_embed.js
new file mode 100644
index 00000000000..873a506a92f
--- /dev/null
+++ b/app/assets/javascripts/snippet/snippet_embed.js
@@ -0,0 +1,23 @@
+export default () => {
+  const { protocol, host, pathname } = window.location;
+  const shareBtn = document.querySelector('.js-share-btn');
+  const embedBtn = document.querySelector('.js-embed-btn');
+  const snippetUrlArea = document.querySelector('.js-snippet-url-area');
+  const embedAction = document.querySelector('.js-embed-action');
+  const url = `${protocol}//${host + pathname}`;
+
+  shareBtn.addEventListener('click', () => {
+    shareBtn.classList.add('is-active');
+    embedBtn.classList.remove('is-active');
+    snippetUrlArea.value = url;
+    embedAction.innerText = 'Share';
+  });
+
+  embedBtn.addEventListener('click', () => {
+    embedBtn.classList.add('is-active');
+    shareBtn.classList.remove('is-active');
+    const scriptTag = `<script src="${url}.js"></script>`;
+    snippetUrlArea.value = scriptTag;
+    embedAction.innerText = 'Embed';
+  });
+};
diff --git a/app/assets/javascripts/syntax_highlight.js b/app/assets/javascripts/syntax_highlight.js
index f52990ba232..37f3dd4b496 100644
--- a/app/assets/javascripts/syntax_highlight.js
+++ b/app/assets/javascripts/syntax_highlight.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-else-return, prefer-arrow-callback, max-len */
+/* eslint-disable consistent-return, no-else-return */
 
 import $ from 'jquery';
 
diff --git a/app/assets/javascripts/test_utils/simulate_drag.js b/app/assets/javascripts/test_utils/simulate_drag.js
index e39213cb098..a5c18042ce7 100644
--- a/app/assets/javascripts/test_utils/simulate_drag.js
+++ b/app/assets/javascripts/test_utils/simulate_drag.js
@@ -38,14 +38,14 @@ function simulateEvent(el, type, options = {}) {
 
 function isLast(target) {
   const el = typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
-  const children = el.children;
+  const { children } = el;
 
   return children.length - 1 === target.index;
 }
 
 function getTarget(target) {
   const el = typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
-  const children = el.children;
+  const { children } = el;
 
   return (
     children[target.index] ||
diff --git a/app/assets/javascripts/tree.js b/app/assets/javascripts/tree.js
index afbb958d058..85123a63a45 100644
--- a/app/assets/javascripts/tree.js
+++ b/app/assets/javascripts/tree.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, quotes, consistent-return, no-var, one-var, one-var-declaration-per-line, no-else-return, prefer-arrow-callback, class-methods-use-this */
+/* eslint-disable func-names, max-len, quotes, consistent-return, no-var, one-var, one-var-declaration-per-line, no-else-return, prefer-arrow-callback, class-methods-use-this */
 
 import $ from 'jquery';
 import { visitUrl } from './lib/utils/url_utility';
diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js
index 96af6d2fcca..78fd7ad441f 100644
--- a/app/assets/javascripts/u2f/authenticate.js
+++ b/app/assets/javascripts/u2f/authenticate.js
@@ -11,7 +11,6 @@ export default class U2FAuthenticate {
   constructor(container, form, u2fParams, fallbackButton, fallbackUI) {
     this.u2fUtils = null;
     this.container = container;
-    this.renderNotSupported = this.renderNotSupported.bind(this);
     this.renderAuthenticated = this.renderAuthenticated.bind(this);
     this.renderError = this.renderError.bind(this);
     this.renderInProgress = this.renderInProgress.bind(this);
@@ -41,7 +40,6 @@ export default class U2FAuthenticate {
     this.signRequests = u2fParams.sign_requests.map(request => _(request).omit('challenge'));
 
     this.templates = {
-      notSupported: '#js-authenticate-u2f-not-supported',
       setup: '#js-authenticate-u2f-setup',
       inProgress: '#js-authenticate-u2f-in-progress',
       error: '#js-authenticate-u2f-error',
@@ -55,7 +53,7 @@ export default class U2FAuthenticate {
         this.u2fUtils = utils;
         this.renderInProgress();
       })
-      .catch(() => this.renderNotSupported());
+      .catch(() => this.switchToFallbackUI());
   }
 
   authenticate() {
@@ -96,10 +94,6 @@ export default class U2FAuthenticate {
     this.fallbackButton.classList.add('hidden');
   }
 
-  renderNotSupported() {
-    return this.renderTemplate('notSupported');
-  }
-
   switchToFallbackUI() {
     this.fallbackButton.classList.add('hidden');
     this.container[0].classList.add('hidden');
diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index 97d5cf96bcb..96dfff77859 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -15,7 +15,7 @@ export default class UserCallout {
 
   init() {
     if (!this.isCalloutDismissed || this.isCalloutDismissed === 'false') {
-      $('.js-close-callout').on('click', e => this.dismissCallout(e));
+      this.userCalloutBody.find('.js-close-callout').on('click', e => this.dismissCallout(e));
     }
   }
 
@@ -23,12 +23,15 @@ export default class UserCallout {
     const $currentTarget = $(e.currentTarget);
 
     if (this.options.setCalloutPerProject) {
-      Cookies.set(this.cookieName, 'true', { expires: 365, path: this.userCalloutBody.data('projectPath') });
+      Cookies.set(this.cookieName, 'true', {
+        expires: 365,
+        path: this.userCalloutBody.data('projectPath'),
+      });
     } else {
       Cookies.set(this.cookieName, 'true', { expires: 365 });
     }
 
-    if ($currentTarget.hasClass('close')) {
+    if ($currentTarget.hasClass('close') || $currentTarget.hasClass('js-close')) {
       this.userCalloutBody.remove();
     }
   }
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index f3b961eb109..e3d7645040d 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -1,10 +1,12 @@
-/* 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 */
+/* eslint-disable func-names, one-var, no-var, prefer-rest-params, 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, yoda, prefer-spread, no-void, camelcase, no-param-reassign */
 /* global Issuable */
 /* global emitSidebarEvent */
 
 import $ from 'jquery';
 import _ from 'underscore';
 import axios from './lib/utils/axios_utils';
+import { __ } from './locale';
+import ModalStore from './boards/stores/modal_store';
 
 // TODO: remove eventHub hack after code splitting refactor
 window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
@@ -181,7 +183,7 @@ function UsersSelect(currentUser, els, options = {}) {
 
         return axios.put(issueURL, data)
           .then(({ data }) => {
-            var user;
+            var user, tooltipTitle;
             $dropdown.trigger('loaded.gl.dropdown');
             $loading.fadeOut();
             if (data.assignee) {
@@ -190,15 +192,17 @@ function UsersSelect(currentUser, els, options = {}) {
                 username: data.assignee.username,
                 avatar: data.assignee.avatar_url
               };
+              tooltipTitle = _.escape(user.name);
             } else {
               user = {
                 name: 'Unassigned',
                 username: '',
                 avatar: ''
               };
+              tooltipTitle = __('Assignee');
             }
             $value.html(assigneeTemplate(user));
-            $collapsedSidebar.attr('title', _.escape(user.name)).tooltip('fixTitle');
+            $collapsedSidebar.attr('title', tooltipTitle).tooltip('_fixTitle');
             return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
           });
       };
@@ -246,7 +250,6 @@ function UsersSelect(currentUser, els, options = {}) {
 
           let anyUser;
           let index;
-          let j;
           let len;
           let name;
           let obj;
@@ -255,7 +258,7 @@ function UsersSelect(currentUser, els, options = {}) {
             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)) {
+              for (index = 0, len = users.length; index < len; index += 1) {
                 obj = users[index];
                 if (obj.username === firstUser) {
                   users.splice(index, 1);
@@ -441,7 +444,7 @@ function UsersSelect(currentUser, els, options = {}) {
             return;
           }
           if ($el.closest('.add-issues-modal').length) {
-            gl.issueBoards.ModalStore.store.filter[$dropdown.data('fieldName')] = user.id;
+            ModalStore.store.filter[$dropdown.data('fieldName')] = user.id;
           } else if (handleClick) {
             e.preventDefault();
             handleClick(user, isMarking);
@@ -497,7 +500,7 @@ function UsersSelect(currentUser, els, options = {}) {
           if (this.multiSelect) {
             selected = getSelected().find(u => user.id === u);
 
-            const fieldName = this.fieldName;
+            const { fieldName } = this;
             const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");
 
             if (field.length) {
@@ -549,7 +552,7 @@ function UsersSelect(currentUser, els, options = {}) {
         minimumInputLength: 0,
         query: function(query) {
           return _this.users(query.term, options, function(users) {
-            var anyUser, data, emailUser, index, j, len, name, nullUser, obj, ref;
+            var anyUser, data, emailUser, index, len, name, nullUser, obj, ref;
             data = {
               results: users
             };
@@ -557,7 +560,8 @@ function UsersSelect(currentUser, els, options = {}) {
               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)) {
+
+                for (index = 0, len = ref.length; index < len; index += 1) {
                   obj = ref[index];
                   if (obj.username === firstUser) {
                     data.results.splice(index, 1);
diff --git a/app/assets/javascripts/visibility_select.js b/app/assets/javascripts/visibility_select.js
deleted file mode 100644
index 0c928d0d5f6..00000000000
--- a/app/assets/javascripts/visibility_select.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export default class VisibilitySelect {
-  constructor(container) {
-    if (!container) throw new Error('VisibilitySelect requires a container element as argument 1');
-    this.container = container;
-    this.helpBlock = this.container.querySelector('.help-block');
-    this.select = this.container.querySelector('select');
-  }
-
-  init() {
-    if (this.select) {
-      this.updateHelpText();
-      this.select.addEventListener('change', this.updateHelpText.bind(this));
-    } else {
-      this.helpBlock.textContent = this.container.querySelector('.js-locked').dataset.helpBlock;
-    }
-  }
-
-  updateHelpText() {
-    this.helpBlock.textContent = this.select.querySelector('option:checked').dataset.description;
-  }
-}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 7bef2e97349..c44419d24e6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -109,17 +109,17 @@ export default {
               rel="noopener noreferrer nofollow"
               class="deploy-link js-deploy-url"
             >
+              {{ deployment.external_url_formatted }}
               <i
                 class="fa fa-external-link"
                 aria-hidden="true"
               >
               </i>
-              {{ deployment.external_url_formatted }}
             </a>
           </template>
           <span
-            v-if="hasDeploymentTime"
             v-tooltip
+            v-if="hasDeploymentTime"
             :title="deployment.deployed_at_formatted"
             class="js-deploy-time"
           >
@@ -127,9 +127,9 @@ export default {
           </span>
           <loading-button
             v-if="deployment.stop_url"
-            container-class="btn btn-default btn-xs prepend-left-default"
-            label="Stop environment"
             :loading="isStopping"
+            container-class="btn btn-default btn-sm prepend-left-default"
+            label="Stop environment"
             @click="stopEnvironment"
           />
         </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
index a16f9055a6d..5e76f6b1cac 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
@@ -1,4 +1,5 @@
 <script>
+import { sprintf, s__ } from '~/locale';
 import statusCodes from '../../lib/utils/http_status';
 import { bytesToMiB } from '../../lib/utils/number_utils';
 import { backOff } from '../../lib/utils/common_utils';
@@ -45,17 +46,28 @@ export default {
     shouldShowMetricsUnavailable() {
       return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
     },
-    memoryChangeType() {
+    memoryChangeMessage() {
+      const messageProps = {
+        memoryFrom: this.memoryFrom,
+        memoryTo: this.memoryTo,
+        metricsLinkStart: `<a href="${this.metricsMonitoringUrl}">`,
+        metricsLinkEnd: '</a>',
+        emphasisStart: '<b>',
+        emphasisEnd: '</b>',
+      };
       const memoryTo = Number(this.memoryTo);
       const memoryFrom = Number(this.memoryFrom);
+      let memoryUsageMsg = '';
 
       if (memoryTo > memoryFrom) {
-        return 'increased';
+        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB'), messageProps, false);
       } else if (memoryTo < memoryFrom) {
-        return 'decreased';
+        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB'), messageProps, false);
+      } else {
+        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB'), messageProps, false);
       }
 
-      return 'unchanged';
+      return memoryUsageMsg;
     },
   },
   mounted() {
@@ -93,7 +105,7 @@ export default {
         MRWidgetService.fetchMetrics(this.metricsUrl)
           .then((res) => {
             if (res.status === statusCodes.NO_CONTENT) {
-              this.backOffRequestCounter = this.backOffRequestCounter += 1;
+              this.backOffRequestCounter += 1;
               /* eslint-disable no-unused-expressions */
               this.backOffRequestCounter < 3 ? next() : stop(res);
             } else {
@@ -130,24 +142,22 @@ export default {
       <i
         class="fa fa-spinner fa-spin usage-info-load-spinner"
         aria-hidden="true">
-      </i>Loading deployment statistics
+      </i>{{ s__('mrWidget|Loading deployment statistics') }}
     </p>
     <p
       v-if="shouldShowMemoryGraph"
-      class="usage-info js-usage-info">
-      <a
-        :href="metricsMonitoringUrl"
-      >Memory</a> usage <b>{{ memoryChangeType }}</b> from {{ memoryFrom }}MB to {{ memoryTo }}MB
+      class="usage-info js-usage-info"
+      v-html="memoryChangeMessage">
     </p>
     <p
       v-if="shouldShowLoadFailure"
       class="usage-info js-usage-info usage-info-failed">
-      Failed to load deployment statistics
+      {{ s__('mrWidget|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
+      {{ s__('mrWidget|Deployment statistics are not available currently') }}
     </p>
     <memory-graph
       v-if="shouldShowMemoryGraph"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
index cb6e9858736..22c2f74f900 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
@@ -2,7 +2,7 @@
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
-    name: 'MRWidgetAuthor',
+    name: 'MrWidgetAuthor',
     directives: {
       tooltip,
     },
@@ -35,17 +35,17 @@
 <template>
   <a
     :href="authorUrl"
-    class="author-link inline"
     :v-tooltip="showAuthorTooltip"
     :title="author.name"
+    class="author-link inline"
   >
     <img
       :src="avatarUrl"
       class="avatar avatar-inline s16"
     />
     <span
-      class="author"
       v-if="showAuthorName"
+      class="author"
     >
       {{ author.name }}
     </span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
index 8f1fd809a81..ba16cb9e2c8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
@@ -1,10 +1,14 @@
 <script>
-  import mrWidgetAuthor from './mr_widget_author.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import MrWidgetAuthor from './mr_widget_author.vue';
 
   export default {
-    name: 'MRWidgetAuthorTime',
+    name: 'MrWidgetAuthorTime',
     components: {
-      mrWidgetAuthor,
+      MrWidgetAuthor,
+    },
+    directives: {
+      tooltip,
     },
     props: {
       actionText: {
@@ -31,9 +35,8 @@
     {{ actionText }}
     <mr-widget-author :author="author" />
     <time
+      v-tooltip
       :title="dateTitle"
-      data-toggle="tooltip"
-      data-placement="top"
       data-container="body"
     >
       {{ dateReadable }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 3d886e7d628..3ce9d8dc26a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -1,53 +1,57 @@
 <script>
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import { n__ } from '~/locale';
-  import icon from '~/vue_shared/components/icon.vue';
-  import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { n__ } from '~/locale';
+import { webIDEUrl } from '~/lib/utils/url_utility';
+import icon from '~/vue_shared/components/icon.vue';
+import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
-  export default {
-    name: 'MRWidgetHeader',
-    directives: {
-      tooltip,
+export default {
+  name: 'MRWidgetHeader',
+  directives: {
+    tooltip,
+  },
+  components: {
+    icon,
+    clipboardButton,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
     },
-    components: {
-      icon,
-      clipboardButton,
+  },
+  computed: {
+    shouldShowCommitsBehindText() {
+      return this.mr.divergedCommitsCount > 0;
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-      },
+    commitsText() {
+      return n__('%d commit behind', '%d commits behind', this.mr.divergedCommitsCount);
     },
-    computed: {
-      shouldShowCommitsBehindText() {
-        return this.mr.divergedCommitsCount > 0;
-      },
-      commitsText() {
-        return n__('%d commit behind', '%d commits behind', 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}\``,
-        });
-      },
-      isSourceBranchLong() {
-        return this.isBranchTitleLong(this.mr.sourceBranch);
-      },
-      isTargetBranchLong() {
-        return this.isBranchTitleLong(this.mr.targetBranch);
-      },
+    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;
-      },
+    isSourceBranchLong() {
+      return this.isBranchTitleLong(this.mr.sourceBranch);
     },
-  };
+    isTargetBranchLong() {
+      return this.isBranchTitleLong(this.mr.targetBranch);
+    },
+    webIdePath() {
+      return webIDEUrl(this.mr.statusPath.replace('.json', ''));
+    },
+  },
+  methods: {
+    isBranchTitleLong(branchTitle) {
+      return branchTitle.length > 32;
+    },
+  },
+};
 </script>
 <template>
   <div class="mr-source-target">
@@ -55,11 +59,11 @@
       <strong>
         {{ s__("mrWidget|Request to merge") }}
         <span
-          class="label-branch js-source-branch"
           :class="{ 'label-truncated': isSourceBranchLong }"
           :title="isSourceBranchLong ? mr.sourceBranch : ''"
-          data-placement="bottom"
           :v-tooltip="isSourceBranchLong"
+          class="label-branch js-source-branch"
+          data-placement="bottom"
           v-html="mr.sourceBranchLink"
         >
         </span>
@@ -73,10 +77,10 @@
         {{ s__("mrWidget|into") }}
 
         <span
-          class="label-branch"
           :v-tooltip="isTargetBranchLong"
           :class="{ 'label-truncatedtooltip': isTargetBranchLong }"
           :title="isTargetBranchLong ? mr.targetBranch : ''"
+          class="label-branch"
           data-placement="bottom"
         >
           <a
@@ -96,10 +100,17 @@
     </div>
 
     <div v-if="mr.isOpen">
+      <a
+        v-if="!mr.sourceBranchRemoved"
+        :href="webIdePath"
+        class="btn btn-sm btn-default inline js-web-ide"
+      >
+        {{ s__("mrWidget|Web IDE") }}
+      </a>
       <button
+        :disabled="mr.sourceBranchRemoved"
         data-target="#modal_merge_info"
         data-toggle="modal"
-        :disabled="mr.sourceBranchRemoved"
         class="btn btn-sm btn-default inline js-check-out-branch"
         type="button"
       >
@@ -120,11 +131,11 @@
             aria-hidden="true">
           </i>
         </button>
-        <ul class="dropdown-menu dropdown-menu-align-right">
+        <ul class="dropdown-menu dropdown-menu-right">
           <li>
             <a
-              class="js-download-email-patches"
               :href="mr.emailPatchesPath"
+              class="js-download-email-patches"
               download
             >
               {{ s__("mrWidget|Email patches") }}
@@ -132,8 +143,8 @@
           </li>
           <li>
             <a
-              class="js-download-plain-diff"
               :href="mr.plainDiffPath"
+              class="js-download-plain-diff"
               download
             >
               {{ s__("mrWidget|Plain diff") }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue
deleted file mode 100644
index f0298f732ea..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  export default {
-    name: 'MRWidgetMaintainerEdit',
-    props: {
-      maintainerEditAllowed: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
-    },
-  };
-</script>
-
-<template>
-  <section class="mr-info-list mr-links">
-    <p v-if="maintainerEditAllowed">
-      {{ s__("mrWidget|Allows edits from maintainers") }}
-    </p>
-  </section>
-</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index 54a98abf860..2f0b5e12c12 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -1,56 +1,61 @@
 <script>
-  /* eslint-disable vue/require-default-prop */
-  import pipelineStage from '~/pipelines/components/stage.vue';
-  import ciIcon from '~/vue_shared/components/ci_icon.vue';
-  import icon from '~/vue_shared/components/icon.vue';
+/* eslint-disable vue/require-default-prop */
+import PipelineStage from '~/pipelines/components/stage.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
-  export default {
-    name: 'MRWidgetPipeline',
-    components: {
-      pipelineStage,
-      ciIcon,
-      icon,
+export default {
+  name: 'MRWidgetPipeline',
+  components: {
+    PipelineStage,
+    CiIcon,
+    Icon,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
     },
-    props: {
-      pipeline: {
-        type: Object,
-        required: true,
-      },
-      // This prop needs to be camelCase, html attributes are case insensive
-      // https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case
-      hasCi: {
-        type: Boolean,
-        required: false,
-      },
-      ciStatus: {
-        type: String,
-        required: false,
-      },
+    // This prop needs to be camelCase, html attributes are case insensive
+    // https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case
+    hasCi: {
+      type: Boolean,
+      required: false,
     },
-    computed: {
-      hasPipeline() {
-        return this.pipeline && Object.keys(this.pipeline).length > 0;
-      },
-      hasCIError() {
-        return this.hasCi && !this.ciStatus;
-      },
-      status() {
-        return this.pipeline.details &&
-          this.pipeline.details.status ? this.pipeline.details.status : {};
-      },
-      hasStages() {
-        return this.pipeline.details &&
-          this.pipeline.details.stages &&
-          this.pipeline.details.stages.length;
-      },
+    ciStatus: {
+      type: String,
+      required: false,
     },
-  };
+  },
+  computed: {
+    hasPipeline() {
+      return this.pipeline && Object.keys(this.pipeline).length > 0;
+    },
+    hasCIError() {
+      return this.hasCi && !this.ciStatus;
+    },
+    status() {
+      return this.pipeline.details && this.pipeline.details.status
+        ? this.pipeline.details.status
+        : {};
+    },
+    hasStages() {
+      return (
+        this.pipeline.details && this.pipeline.details.stages && this.pipeline.details.stages.length
+      );
+    },
+    hasCommitInfo() {
+      return this.pipeline.commit && Object.keys(this.pipeline.commit).length > 0;
+    },
+  },
+};
 </script>
 
 <template>
   <div
     v-if="hasPipeline || hasCIError"
-    class="mr-widget-heading">
+    class="mr-widget-heading"
+  >
     <div class="ci-widget media">
       <template v-if="hasCIError">
         <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10">
@@ -62,8 +67,8 @@
       </template>
       <template v-else-if="hasPipeline">
         <a
-          class="append-right-10"
           :href="status.details_path"
+          class="append-right-10"
         >
           <ci-icon :status="status" />
         </a>
@@ -77,18 +82,22 @@
             #{{ pipeline.id }}
           </a>
 
-          {{ pipeline.details.status.label }} for
+          {{ pipeline.details.status.label }}
 
-          <a
-            :href="pipeline.commit.commit_path"
-            class="commit-sha js-commit-link"
-          >
-          {{ pipeline.commit.short_id }}</a>.
+          <template v-if="hasCommitInfo">
+            for
+
+            <a
+              :href="pipeline.commit.commit_path"
+              class="commit-sha js-commit-link"
+            >
+            {{ pipeline.commit.short_id }}</a>.
+          </template>
 
           <span class="mr-widget-pipeline-graph">
             <span
-              class="stage-cell"
               v-if="hasStages"
+              class="stage-cell"
             >
               <div
                 v-for="(stage, i) in pipeline.details.stages"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
index 460437ceeff..56879c04d16 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
@@ -25,9 +25,9 @@
     </span>
     <i
       v-tooltip
-      class="fa fa-question-circle"
       :title="tooltipTitle"
       :aria-label="tooltipTitle"
+      class="fa fa-question-circle"
     >
     </i>
   </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index ebaf2b972eb..2133124347c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -39,10 +39,10 @@
         {{ s__("mrWidget|This merge request failed to be merged automatically") }}
       </span>
       <button
-        @click="refreshWidget"
         :disabled="isRefreshing"
         type="button"
-        class="btn btn-xs btn-default"
+        class="btn btn-sm btn-default"
+        @click="refreshWidget"
       >
         <loading-icon
           v-if="isRefreshing"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
index caeaac75b45..ae6630dcd6f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -11,8 +11,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="loading"
       :show-disabled-button="true"
+      status="loading"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
index 68b691fc914..25a57e520ee 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -1,11 +1,11 @@
 <script>
-  import mrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
+  import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
   import statusIcon from '../mr_widget_status_icon.vue';
 
   export default {
     name: 'MRWidgetClosed',
     components: {
-      mrWidgetAuthorTime,
+      MrWidgetAuthorTime,
       statusIcon,
     },
     props: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index dad4b0fe49d..dff9ec657b9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -20,8 +20,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
 
     <div class="media-body space-children">
@@ -43,13 +43,13 @@ To merge this request, first rebase locally.`) }}
         <a
           v-if="mr.canMerge && mr.conflictResolutionPath"
           :href="mr.conflictResolutionPath"
-          class="js-resolve-conflicts-button btn btn-default btn-xs"
+          class="js-resolve-conflicts-button btn btn-default btn-sm"
         >
           {{ s__("mrWidget|Resolve conflicts") }}
         </a>
         <button
           v-if="mr.canMerge"
-          class="js-merge-locally-button btn btn-default btn-xs"
+          class="js-merge-locally-button btn btn-default btn-sm"
           data-toggle="modal"
           data-target="#modal_merge_info"
         >
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
index 602b68ea572..c302960f16e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
@@ -1,66 +1,74 @@
 <script>
-  import { n__ } from '~/locale';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import eventHub from '../../event_hub';
+import { n__ } from '~/locale';
+import { stripHtml } from '~/lib/utils/text_utility';
+import statusIcon from '../mr_widget_status_icon.vue';
+import eventHub from '../../event_hub';
 
-  export default {
-    name: 'MRWidgetFailedToMerge',
+export default {
+  name: 'MRWidgetFailedToMerge',
 
-    components: {
-      statusIcon,
-    },
+  components: {
+    statusIcon,
+  },
 
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
+  },
 
-    data() {
-      return {
-        timer: 10,
-        isRefreshing: false,
-      };
-    },
+  data() {
+    return {
+      timer: 10,
+      isRefreshing: false,
+      intervalId: null,
+    };
+  },
 
-    computed: {
-      timerText() {
-        return n__(
-          'Refreshing in a second to show the updated status...',
-          'Refreshing in %d seconds to show the updated status...',
-          this.timer,
-        );
-      },
+  computed: {
+    mergeError() {
+      return this.mr.mergeError ? stripHtml(this.mr.mergeError, ' ').trim() : '';
     },
-
-    mounted() {
-      setInterval(() => {
-        this.updateTimer();
-      }, 1000);
+    timerText() {
+      return n__(
+        'Refreshing in a second to show the updated status...',
+        'Refreshing in %d seconds to show the updated status...',
+        this.timer,
+      );
     },
+  },
 
-    created() {
-      eventHub.$emit('DisablePolling');
-    },
+  mounted() {
+    this.intervalId = setInterval(this.updateTimer, 1000);
+  },
+
+  created() {
+    eventHub.$emit('DisablePolling');
+  },
 
-    methods: {
-      refresh() {
-        this.isRefreshing = true;
-        eventHub.$emit('MRWidgetUpdateRequested');
-        eventHub.$emit('EnablePolling');
-      },
-      updateTimer() {
-        this.timer = this.timer - 1;
+  beforeDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  },
 
-        if (this.timer === 0) {
-          this.refresh();
-        }
-      },
+  methods: {
+    refresh() {
+      this.isRefreshing = true;
+      eventHub.$emit('MRWidgetUpdateRequested');
+      eventHub.$emit('EnablePolling');
     },
+    updateTimer() {
+      this.timer = this.timer - 1;
 
-  };
+      if (this.timer === 0) {
+        this.refresh();
+      }
+    },
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
@@ -72,16 +80,16 @@
     </template>
     <template v-else>
       <status-icon
-        status="warning"
         :show-disabled-button="true"
+        status="warning"
       />
       <div class="media-body space-children">
         <span class="bold">
           <span
-            class="has-error-message"
             v-if="mr.mergeError"
+            class="has-error-message"
           >
-            {{ mr.mergeError }}.
+            {{ mergeError }}.
           </span>
           <span v-else>
             {{ s__("mrWidget|Merge failed.") }}
@@ -93,9 +101,9 @@
           </span>
         </span>
         <button
-          @click="refresh"
-          class="btn btn-default btn-xs js-refresh-button"
+          class="btn btn-default btn-sm js-refresh-button"
           type="button"
+          @click="refresh"
         >
           {{ s__("mrWidget|Refresh now") }}
         </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
index 7ff7fc7988a..0d9a560c88e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
@@ -1,13 +1,13 @@
 <script>
   import Flash from '../../../flash';
   import statusIcon from '../mr_widget_status_icon.vue';
-  import mrWidgetAuthor from '../../components/mr_widget_author.vue';
+  import MrWidgetAuthor from '../../components/mr_widget_author.vue';
   import eventHub from '../../event_hub';
 
   export default {
     name: 'MRWidgetMergeWhenPipelineSucceeds',
     components: {
-      mrWidgetAuthor,
+      MrWidgetAuthor,
       statusIcon,
     },
     props: {
@@ -90,11 +90,11 @@
         </span>
         <a
           v-if="mr.canCancelAutomaticMerge"
-          @click.prevent="cancelAutomaticMerge"
           :disabled="isCancellingAutoMerge"
           role="button"
           href="#"
-          class="btn btn-xs btn-default js-cancel-auto-merge">
+          class="btn btn-sm btn-default js-cancel-auto-merge"
+          @click.prevent="cancelAutomaticMerge">
           <i
             v-if="isCancellingAutoMerge"
             class="fa fa-spinner fa-spin"
@@ -127,10 +127,10 @@
           <a
             v-if="canRemoveSourceBranch"
             :disabled="isRemovingSourceBranch"
-            @click.prevent="removeSourceBranch"
             role="button"
-            class="btn btn-xs btn-default js-remove-source-branch"
+            class="btn btn-sm btn-default js-remove-source-branch"
             href="#"
+            @click.prevent="removeSourceBranch"
           >
             <i
               v-if="isRemovingSourceBranch"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index c1618bc6ea0..1a444c04a1d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -3,7 +3,8 @@
   import tooltip from '~/vue_shared/directives/tooltip';
   import loadingIcon from '~/vue_shared/components/loading_icon.vue';
   import { s__, __ } from '~/locale';
-  import mrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
+  import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+  import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
   import statusIcon from '../mr_widget_status_icon.vue';
   import eventHub from '../../event_hub';
 
@@ -13,9 +14,10 @@
       tooltip,
     },
     components: {
-      mrWidgetAuthorTime,
+      MrWidgetAuthorTime,
       loadingIcon,
       statusIcon,
+      ClipboardButton,
     },
     props: {
       mr: {
@@ -114,44 +116,44 @@
           :date-readable="mr.metrics.readableMergedAt"
         />
         <a
-          v-if="mr.canRevertInCurrentMR"
           v-tooltip
-          class="btn btn-close btn-xs"
+          v-if="mr.canRevertInCurrentMR"
+          :title="revertTitle"
+          class="btn btn-close btn-sm"
           href="#modal-revert-commit"
           data-toggle="modal"
           data-container="body"
-          :title="revertTitle"
         >
           {{ revertLabel }}
         </a>
         <a
-          v-else-if="mr.revertInForkPath"
           v-tooltip
-          class="btn btn-close btn-xs"
-          data-method="post"
+          v-else-if="mr.revertInForkPath"
           :href="mr.revertInForkPath"
           :title="revertTitle"
+          class="btn btn-close btn-sm"
+          data-method="post"
         >
           {{ revertLabel }}
         </a>
         <a
-          v-if="mr.canCherryPickInCurrentMR"
           v-tooltip
-          class="btn btn-default btn-xs"
+          v-if="mr.canCherryPickInCurrentMR"
+          :title="cherryPickTitle"
+          class="btn btn-default btn-sm"
           href="#modal-cherry-pick-commit"
           data-toggle="modal"
           data-container="body"
-          :title="cherryPickTitle"
         >
           {{ cherryPickLabel }}
         </a>
         <a
-          v-else-if="mr.cherryPickInForkPath"
           v-tooltip
-          class="btn btn-default btn-xs"
-          data-method="post"
+          v-else-if="mr.cherryPickInForkPath"
           :href="mr.cherryPickInForkPath"
           :title="cherryPickTitle"
+          class="btn btn-default btn-sm"
+          data-method="post"
         >
           {{ cherryPickLabel }}
         </a>
@@ -162,6 +164,18 @@
           <span class="label-branch">
             <a :href="mr.targetBranchPath">{{ mr.targetBranch }}</a>
           </span>
+          with
+          <a
+            :href="mr.mergeCommitPath"
+            class="commit-sha js-mr-merged-commit-sha"
+            v-text="mr.shortMergeCommitSha"
+          >
+          </a>
+          <clipboard-button
+            :title="__('Copy commit SHA to clipboard')"
+            :text="mr.mergeCommitSha"
+            css-class="btn-default btn-transparent btn-clipboard js-mr-merged-copy-sha"
+          />
         </p>
         <p v-if="mr.sourceBranchRemoved">
           {{ s__("mrWidget|The source branch has been removed") }}
@@ -172,10 +186,10 @@
         >
           <span>{{ s__("mrWidget|You can remove source branch now") }}</span>
           <button
-            @click="removeSourceBranch"
             :disabled="isMakingRequest"
             type="button"
-            class="btn btn-xs btn-default js-remove-branch-button"
+            class="btn btn-sm btn-default js-remove-branch-button"
+            @click="removeSourceBranch"
           >
             {{ s__("mrWidget|Remove Source Branch") }}
           </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index 718c0e4b3c6..b0e96f74626 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -39,8 +39,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
 
     <div class="media-body space-children">
@@ -51,9 +51,9 @@
         {{ missingBranchNameMessage }}
         <i
           v-tooltip
-          class="fa fa-question-circle"
           :title="message"
           :aria-label="message"
+          class="fa fa-question-circle"
         >
         </i>
       </span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
index e4af50b09f8..92eee2cf5dd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
@@ -12,8 +12,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="success"
       :show-disabled-button="true"
+      status="success"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
index 6d7cc03f7ad..37ee5215cea 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
@@ -11,8 +11,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
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
deleted file mode 100644
index 4d9a2ca530f..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import statusIcon from '../mr_widget_status_icon.vue';
-
-export default {
-  name: 'MRWidgetPipelineBlocked',
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="warning" :show-disabled-button="true" />
-      <div class="media-body space-children">
-        <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>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 143fd328d88..2d8c3d6be87 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -110,9 +110,9 @@
 js-toggle-container accept-action media space-children"
         >
           <button
+            :disabled="isMakingRequest"
             type="button"
             class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button"
-            :disabled="isMakingRequest"
             @click="rebase"
           >
             <loading-icon v-if="isMakingRequest" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
new file mode 100644
index 00000000000..25c1044fe2b
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
@@ -0,0 +1,63 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import eventHub from '~/vue_merge_request_widget/event_hub';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+    isMergeButtonDisabled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      squashBeforeMerge: this.mr.squash,
+    };
+  },
+  methods: {
+    updateSquashModel() {
+      eventHub.$emit('MRWidgetUpdateSquash', this.squashBeforeMerge);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="accept-control inline">
+    <label class="merge-param-checkbox">
+      <input
+        :disabled="isMergeButtonDisabled"
+        v-model="squashBeforeMerge"
+        type="checkbox"
+        name="squash"
+        class="qa-squash-checkbox"
+        @change="updateSquashModel"
+      />
+      {{ __('Squash commits') }}
+    </label>
+    <a
+      v-tooltip
+      :href="mr.squashBeforeMergeHelpPath"
+      data-title="About this feature"
+      data-placement="bottom"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      data-container="body"
+    >
+      <icon
+        name="question-o"
+      />
+    </a>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
index 3d9161f6926..086dbabe77e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
@@ -18,10 +18,10 @@ export default {
 <template>
   <div class="mr-widget-body mr-widget-empty-state">
     <div class="row">
-      <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
+      <div class="artwork col-md-5 order-md-last col-12 text-center">
         <span v-html="emptyStateSVG"></span>
       </div>
-      <div class="text col-sm-7 col-sm-pull-5 col-xs-12">
+      <div class="text col-md-7 order-md-first col-12">
         <span>
           Merge requests are a place to propose changes you have made to a project
           and discuss those changes with others.
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
new file mode 100644
index 00000000000..2bb1a34412e
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
@@ -0,0 +1,25 @@
+<script>
+import statusIcon from '../mr_widget_status_icon.vue';
+
+export default {
+  name: 'PipelineFailed',
+  components: {
+    statusIcon,
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      :show-disabled-button="true"
+      status="warning"
+    />
+    <div class="media-body space-children">
+      <span class="bold">
+        {{ s__(`mrWidget|The pipeline for this merge request failed.
+Please retry the job or push a new commit to fix the failure`) }}
+      </span>
+    </div>
+  </div>
+</template>
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/ready_to_merge.vue
index 3c781ccddc8..fe777a07189 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -1,3 +1,4 @@
+<script>
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
@@ -5,9 +6,14 @@ import MergeRequest from '../../../merge_request';
 import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
+import SquashBeforeMerge from './mr_widget_squash_before_merge.vue';
 
 export default {
-  name: 'MRWidgetReadyToMerge',
+  name: 'ReadyToMerge',
+  components: {
+    statusIcon,
+    'squash-before-merge': SquashBeforeMerge,
+  },
   props: {
     mr: { type: Object, required: true },
     service: { type: Object, required: true },
@@ -26,9 +32,6 @@ export default {
       warningSvg,
     };
   },
-  components: {
-    statusIcon,
-  },
   computed: {
     shouldShowMergeWhenPipelineSucceedsText() {
       return this.mr.isPipelineActive;
@@ -100,6 +103,12 @@ export default {
       return enableSquashBeforeMerge && commitsCount > 1;
     },
   },
+  created() {
+    eventHub.$on('MRWidgetUpdateSquash', this.handleUpdateSquash);
+  },
+  beforeDestroy() {
+    eventHub.$off('MRWidgetUpdateSquash', this.handleUpdateSquash);
+  },
   methods: {
     shouldShowMergeControls() {
       return this.mr.isMergeAllowed || this.shouldShowMergeWhenPipelineSucceedsText;
@@ -127,13 +136,9 @@ export default {
         commit_message: this.commitMessage,
         merge_when_pipeline_succeeds: this.setToMergeWhenPipelineSucceeds,
         should_remove_source_branch: this.removeSourceBranch === true,
+        squash: this.mr.squash,
       };
 
-      // Only truthy in EE extension of this component
-      if (this.setAdditionalParams) {
-        this.setAdditionalParams(options);
-      }
-
       this.isMakingRequest = true;
       this.service.merge(options)
         .then(res => res.data)
@@ -153,6 +158,9 @@ export default {
           new Flash('Something went wrong. Please try again.'); // eslint-disable-line
         });
     },
+    handleUpdateSquash(val) {
+      this.mr.squash = val;
+    },
     initiateMergePolling() {
       simplePoll((continuePolling, stopPolling) => {
         this.handleMergePolling(continuePolling, stopPolling);
@@ -217,136 +225,146 @@ export default {
         });
     },
   },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon :status="iconClass" />
-      <div class="media-body">
-        <div class="mr-widget-body-controls media space-children">
-          <span class="btn-group append-bottom-5">
-            <button
-              @click="handleMergeButtonClick()"
-              :disabled="isMergeButtonDisabled"
-              :class="mergeButtonClass"
-              type="button"
-              class="qa-merge-button">
-              <i
-                v-if="isMakingRequest"
-                class="fa fa-spinner fa-spin"
-                aria-hidden="true" />
-              {{mergeButtonText}}
-            </button>
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon :status="iconClass" />
+    <div class="media-body">
+      <div class="mr-widget-body-controls media space-children">
+        <span class="btn-group append-bottom-5">
+          <button
+            :disabled="isMergeButtonDisabled"
+            :class="mergeButtonClass"
+            type="button"
+            class="qa-merge-button"
+            @click="handleMergeButtonClick()">
+            <i
+              v-if="isMakingRequest"
+              class="fa fa-spinner fa-spin"
+              aria-hidden="true"
+            ></i>
+            {{ mergeButtonText }}
+          </button>
+          <button
+            v-if="shouldShowMergeOptionsDropdown"
+            :disabled="isMergeButtonDisabled"
+            type="button"
+            class="btn btn-sm btn-info dropdown-toggle js-merge-moment"
+            data-toggle="dropdown"
+            aria-label="Select merge moment">
+            <i
+              class="fa fa-chevron-down"
+              aria-hidden="true"
+            ></i>
+          </button>
+          <ul
+            v-if="shouldShowMergeOptionsDropdown"
+            class="dropdown-menu dropdown-menu-right"
+            role="menu">
+            <li>
+              <a
+                class="merge_when_pipeline_succeeds"
+                href="#"
+                @click.prevent="handleMergeButtonClick(true)">
+                <span class="media">
+                  <span
+                    class="merge-opt-icon"
+                    aria-hidden="true"
+                    v-html="successSvg"></span>
+                  <span class="media-body merge-opt-title">Merge when pipeline succeeds</span>
+                </span>
+              </a>
+            </li>
+            <li>
+              <a
+                class="accept-merge-request"
+                href="#"
+                @click.prevent="handleMergeButtonClick(false, true)">
+                <span class="media">
+                  <span
+                    class="merge-opt-icon"
+                    aria-hidden="true"
+                    v-html="warningSvg"></span>
+                  <span class="media-body merge-opt-title">Merge immediately</span>
+                </span>
+              </a>
+            </li>
+          </ul>
+        </span>
+        <div class="media-body-wrap space-children">
+          <template v-if="shouldShowMergeControls()">
+            <label v-if="mr.canRemoveSourceBranch">
+              <input
+                id="remove-source-branch-input"
+                v-model="removeSourceBranch"
+                :disabled="isRemoveSourceBranchButtonDisabled"
+                class="js-remove-source-branch-checkbox"
+                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" />
+
+            <span
+              v-if="mr.ffOnlyEnabled"
+              class="js-fast-forward-message">
+              Fast-forward merge without a merge commit
+            </span>
             <button
-              v-if="shouldShowMergeOptionsDropdown"
+              v-else
               :disabled="isMergeButtonDisabled"
+              class="js-modify-commit-message-button btn btn-default btn-sm"
               type="button"
-              class="btn btn-sm btn-info dropdown-toggle js-merge-moment"
-              data-toggle="dropdown"
-              aria-label="Select merge moment">
-              <i
-                class="fa fa-chevron-down"
-                aria-hidden="true" />
+              @click="toggleCommitMessageEditor">
+              Modify commit message
             </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 class="media">
-                    <span
-                      v-html="successSvg"
-                      class="merge-opt-icon"
-                      aria-hidden="true"></span>
-                    <span class="media-body merge-opt-title">Merge when pipeline succeeds</span>
-                  </span>
-                </a>
-              </li>
-              <li>
-                <a
-                  @click.prevent="handleMergeButtonClick(false, true)"
-                  class="accept-merge-request"
-                  href="#">
-                  <span class="media">
-                    <span
-                      v-html="warningSvg"
-                      class="merge-opt-icon"
-                      aria-hidden="true"></span>
-                    <span class="media-body merge-opt-title">Merge immediately</span>
-                  </span>
-                </a>
-              </li>
-            </ul>
-          </span>
-          <div class="media-body-wrap space-children">
-            <template v-if="shouldShowMergeControls()">
-              <label v-if="mr.canRemoveSourceBranch">
-                <input
-                  id="remove-source-branch-input"
-                  v-model="removeSourceBranch"
-                  class="js-remove-source-branch-checkbox"
-                  :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" />
-
-              <span
-                v-if="mr.ffOnlyEnabled"
-                class="js-fast-forward-message">
-                Fast-forward merge without a merge commit
-              </span>
-              <button
-                v-else
-                @click="toggleCommitMessageEditor"
-                :disabled="isMergeButtonDisabled"
-                class="js-modify-commit-message-button btn btn-default btn-xs"
-                type="button">
-                Modify commit message
-              </button>
-            </template>
-            <template v-else>
-              <span class="bold js-resolve-mr-widget-items-message">
-                You can only merge once the items above are resolved
-              </span>
-            </template>
-          </div>
+          </template>
+          <template v-else>
+            <span class="bold js-resolve-mr-widget-items-message">
+              You can only merge once the items above are resolved
+            </span>
+          </template>
         </div>
-        <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
+        v-if="showCommitMessageEditor"
+        class="prepend-top-default commit-message-editor">
+        <div class="form-group clearfix">
+          <label
+            class="col-form-label"
+            for="commit-message">
+            Commit message
+          </label>
+          <div class="col-sm-10">
+            <div class="commit-message-container">
+              <div class="max-width-marker"></div>
+              <textarea
+                id="commit-message"
+                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
+                href="#"
+                @click.prevent="updateCommitMessage"
+              >
+                {{ commitMessageLinkTitle }}
+              </a>
             </div>
           </div>
         </div>
       </div>
     </div>
-  `,
-};
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
index 04100871a94..16c903c923f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
@@ -12,13 +12,13 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
-        The source branch HEAD has recently changed.
-        Please reload the page and review the changes before merging.
+        {{ s__(`mrWidget|The source branch HEAD has recently changed.
+Please reload the page and review the changes before merging`) }}
       </span>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index 9ade6a91747..5eb2058a03b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -7,7 +7,10 @@ export default {
     statusIcon,
   },
   props: {
-    mr: { type: Object, required: true },
+    mr: {
+      type: Object,
+      required: true,
+    },
   },
 };
 </script>
@@ -15,18 +18,19 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
-        There are unresolved discussions. Please resolve these discussions
+        {{ s__("mrWidget|There are unresolved discussions. Please resolve these discussions") }}
       </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
+        class="btn btn-default btn-sm js-create-issue"
+      >
+        {{ s__("mrWidget|Create an issue to resolve them later") }}
       </a>
     </div>
   </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/work_in_progress.vue
index 44e1a616a19..89c9a41f316 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -1,25 +1,26 @@
+<script>
 import $ from 'jquery';
 import statusIcon from '../mr_widget_status_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
 
 export default {
-  name: 'MRWidgetWIP',
-  props: {
-    mr: { type: Object, required: true },
-    service: { type: Object, required: true },
+  name: 'WorkInProgress',
+  components: {
+    statusIcon,
   },
   directives: {
     tooltip,
   },
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
   data() {
     return {
       isMakingRequest: false,
     };
   },
-  components: {
-    statusIcon,
-  },
   methods: {
     removeWIP() {
       this.isMakingRequest = true;
@@ -36,32 +37,40 @@ export default {
         });
     },
   },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="warning" :show-disabled-button="Boolean(mr.removeWIPPath)" />
-      <div class="media-body space-children">
-        <span class="bold">
-          This is a Work in Progress
-          <i
-            v-tooltip
-            class="fa fa-question-circle"
-            title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged"
-            aria-label="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged">
-           </i>
-        </span>
-        <button
-          v-if="mr.removeWIPPath"
-          @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>
-      </div>
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      :show-disabled-button="Boolean(mr.removeWIPPath)"
+      status="warning"
+    />
+    <div class="media-body space-children">
+      <span class="bold">
+        This is a Work in Progress
+        <i
+          v-tooltip
+          class="fa fa-question-circle"
+          title="When this merge request is ready,
+          remove the WIP: prefix from the title to allow it to be merged"
+          aria-label="When this merge request is ready,
+          remove the WIP: prefix from the title to allow it to be merged">
+        </i>
+      </span>
+      <button
+        v-if="mr.removeWIPPath"
+        :disabled="isMakingRequest"
+        type="button"
+        class="btn btn-default btn-sm js-remove-wip"
+        @click="removeWIP">
+        <i
+          v-if="isMakingRequest"
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true">
+        </i>
+        Resolve WIP status
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index ed15fc6ab0f..15097fa2a3f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -15,23 +15,22 @@ export { default as WidgetHeader } from './components/mr_widget_header.vue';
 export { default as WidgetMergeHelp } from './components/mr_widget_merge_help.vue';
 export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
 export { default as Deployment } from './components/deployment.vue';
-export { default as WidgetMaintainerEdit } from './components/mr_widget_maintainer_edit.vue';
 export { default as WidgetRelatedLinks } from './components/mr_widget_related_links.vue';
 export { default as MergedState } from './components/states/mr_widget_merged.vue';
 export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge.vue';
 export { default as ClosedState } from './components/states/mr_widget_closed.vue';
 export { default as MergingState } from './components/states/mr_widget_merging.vue';
-export { default as WipState } from './components/states/mr_widget_wip';
+export { default as WorkInProgressState } from './components/states/work_in_progress.vue';
 export { default as ArchivedState } from './components/states/mr_widget_archived.vue';
 export { default as ConflictsState } from './components/states/mr_widget_conflicts.vue';
 export { default as NothingToMergeState } from './components/states/nothing_to_merge.vue';
 export { default as MissingBranchState } from './components/states/mr_widget_missing_branch.vue';
 export { default as NotAllowedState } from './components/states/mr_widget_not_allowed.vue';
-export { default as ReadyToMergeState } from './components/states/mr_widget_ready_to_merge';
+export { default as ReadyToMergeState } from './components/states/ready_to_merge.vue';
 export { default as ShaMismatchState } from './components/states/sha_mismatch.vue';
 export { default as UnresolvedDiscussionsState } from './components/states/unresolved_discussions.vue';
 export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked.vue';
-export { default as PipelineFailedState } from './components/states/mr_widget_pipeline_failed';
+export { default as PipelineFailedState } from './components/states/pipeline_failed.vue';
 export { default as MergeWhenPipelineSucceedsState } from './components/states/mr_widget_merge_when_pipeline_succeeds.vue';
 export { default as RebaseState } from './components/states/mr_widget_rebase.vue';
 export { default as AutoMergeFailed } from './components/states/mr_widget_auto_merge_failed.vue';
@@ -41,8 +40,8 @@ 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 stateMaps } from './stores/state_maps';
-export { default as SquashBeforeMerge } from './components/states/mr_widget_squash_before_merge';
+export { default as SquashBeforeMerge } from './components/states/mr_widget_squash_before_merge.vue';
 export { default as notify } from '../lib/utils/notify';
 export { default as SourceBranchRemovalStatus } from './components/source_branch_removal_status.vue';
 
-export { default as mrWidgetOptions } from './mr_widget_options';
+export { default as mrWidgetOptions } from './mr_widget_options.vue';
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.vue
index 0be5d9e5a55..09477da40b5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -1,18 +1,19 @@
+<script>
+
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
-import Flash from '../flash';
+import createFlash from '../flash';
 import {
   WidgetHeader,
   WidgetMergeHelp,
   WidgetPipeline,
   Deployment,
-  WidgetMaintainerEdit,
   WidgetRelatedLinks,
   MergedState,
   ClosedState,
   MergingState,
   RebaseState,
-  WipState,
+  WorkInProgressState,
   ArchivedState,
   ConflictsState,
   NothingToMergeState,
@@ -35,15 +36,44 @@ import {
   notify,
   SourceBranchRemovalStatus,
 } from './dependencies';
-import { setFavicon } from '../lib/utils/common_utils';
+import { setFaviconOverlay } from '../lib/utils/common_utils';
 
 export default {
   el: '#js-vue-mr-widget',
   name: 'MRWidget',
+  components: {
+    'mr-widget-header': WidgetHeader,
+    'mr-widget-merge-help': WidgetMergeHelp,
+    'mr-widget-pipeline': WidgetPipeline,
+    Deployment,
+    'mr-widget-related-links': WidgetRelatedLinks,
+    'mr-widget-merged': MergedState,
+    'mr-widget-closed': ClosedState,
+    'mr-widget-merging': MergingState,
+    'mr-widget-failed-to-merge': FailedToMerge,
+    'mr-widget-wip': WorkInProgressState,
+    '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,
+    '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,
+    'mr-widget-rebase': RebaseState,
+    SourceBranchRemovalStatus,
+  },
   props: {
     mrData: {
       type: Object,
       required: false,
+      default: null,
     },
   },
   data() {
@@ -72,6 +102,13 @@ export default {
         (!this.mr.isNothingToMergeState && !this.mr.isMergedState);
     },
   },
+  created() {
+    this.initPolling();
+    this.bindEventHubListeners();
+  },
+  mounted() {
+    this.handleMounted();
+  },
   methods: {
     createService(store) {
       const endpoints = {
@@ -99,7 +136,7 @@ export default {
             cb.call(null, data);
           }
         })
-        .catch(() => new Flash('Something went wrong. Please try again.'));
+        .catch(() => createFlash('Something went wrong. Please try again.'));
     },
     initPolling() {
       this.pollingInterval = new SmartInterval({
@@ -122,8 +159,9 @@ export default {
     },
     setFaviconHelper() {
       if (this.mr.ciStatusFaviconPath) {
-        setFavicon(this.mr.ciStatusFaviconPath);
+        return setFaviconOverlay(this.mr.ciStatusFaviconPath);
       }
+      return Promise.resolve();
     },
     fetchDeployments() {
       return this.service.fetchDeployments()
@@ -134,7 +172,7 @@ export default {
           }
         })
         .catch(() => {
-          new Flash('Something went wrong while fetching the environments for this merge request. Please try again.'); // eslint-disable-line
+          createFlash('Something went wrong while fetching the environments for this merge request. Please try again.');
         });
     },
     fetchActionsContent() {
@@ -147,13 +185,13 @@ export default {
             Project.initRefSwitcher();
           }
         })
-        .catch(() => new Flash('Something went wrong. Please try again.'));
+        .catch(() => createFlash('Something went wrong. Please try again.'));
     },
     handleNotification(data) {
       if (data.ci_status === this.mr.ciStatus) return;
       if (!data.pipeline) return;
 
-      const label = data.pipeline.details.status.label;
+      const { label } = data.pipeline.details.status;
       const title = `Pipeline ${label}`;
       const message = `Pipeline ${label} for "${data.title}"`;
 
@@ -173,7 +211,7 @@ export default {
       // `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];
+        [this.mr.isRemovingSourceBranch] = params;
       });
 
       eventHub.$on('FailedToMerge', (mergeError) => {
@@ -202,76 +240,53 @@ export default {
       this.initDeploymentsPolling();
     },
   },
-  created() {
-    this.initPolling();
-    this.bindEventHubListeners();
-  },
-  mounted() {
-    this.handleMounted();
-  },
-  components: {
-    'mr-widget-header': WidgetHeader,
-    'mr-widget-merge-help': WidgetMergeHelp,
-    'mr-widget-pipeline': WidgetPipeline,
-    Deployment,
-    'mr-widget-maintainer-edit': WidgetMaintainerEdit,
-    'mr-widget-related-links': WidgetRelatedLinks,
-    'mr-widget-merged': MergedState,
-    'mr-widget-closed': ClosedState,
-    'mr-widget-merging': MergingState,
-    '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,
-    'mr-widget-rebase': RebaseState,
-    SourceBranchRemovalStatus,
-  },
-  template: `
-    <div class="mr-state-widget prepend-top-default">
-      <mr-widget-header :mr="mr" />
-      <mr-widget-pipeline
-        v-if="shouldRenderPipelines"
-        :pipeline="mr.pipeline"
-        :ci-status="mr.ciStatus"
-        :has-ci="mr.hasCI"
-        />
-      <deployment
-        v-for="deployment in mr.deployments"
-        :key="deployment.id"
-        :deployment="deployment"
+};
+</script>
+<template>
+  <div class="mr-state-widget prepend-top-default">
+    <mr-widget-header
+      :mr="mr"
+    />
+    <mr-widget-pipeline
+      v-if="shouldRenderPipelines"
+      :pipeline="mr.pipeline"
+      :ci-status="mr.ciStatus"
+      :has-ci="mr.hasCI"
+    />
+    <deployment
+      v-for="deployment in mr.deployments"
+      :key="deployment.id"
+      :deployment="deployment"
+    />
+    <div class="mr-widget-section">
+      <component
+        :is="componentName"
+        :mr="mr"
+        :service="service"
+      />
+
+      <section
+        v-if="mr.allowCollaboration"
+        class="mr-info-list mr-links"
+      >
+        {{ s__("mrWidget|Allows commits from members who can merge to the target branch") }}
+      </section>
+
+      <mr-widget-related-links
+        v-if="shouldRenderRelatedLinks"
+        :state="mr.state"
+        :related-links="mr.relatedLinks"
+      />
+
+      <source-branch-removal-status
+        v-if="shouldRenderSourceBranchRemovalStatus"
       />
-      <div class="mr-widget-section">
-        <component
-          :is="componentName"
-          :mr="mr"
-          :service="service" />
-        <mr-widget-maintainer-edit
-          :maintainerEditAllowed="mr.maintainerEditAllowed" />
-        <mr-widget-related-links
-          v-if="shouldRenderRelatedLinks"
-          :state="mr.state"
-          :related-links="mr.relatedLinks" />
-        <source-branch-removal-status
-          v-if="shouldRenderSourceBranchRemovalStatus"
-        />
-      </div>
-      <div
-        class="mr-widget-footer"
-        v-if="shouldRenderMergeHelp">
-        <mr-widget-merge-help />
-      </div>
     </div>
-  `,
-};
+    <div
+      v-if="shouldRenderMergeHelp"
+      class="mr-widget-footer"
+    >
+      <mr-widget-merge-help />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index a47ca9fae86..c881cd496d1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -15,11 +15,18 @@ export default class MergeRequestStore {
     const currentUser = data.current_user;
     const pipelineStatus = data.pipeline ? data.pipeline.details.status : null;
 
+    this.squash = data.squash;
+    this.squashBeforeMergeHelpPath = this.squashBeforeMergeHelpPath ||
+      data.squash_before_merge_help_path;
+    this.enableSquashBeforeMerge = this.enableSquashBeforeMerge || true;
+
     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.shortMergeCommitSha = data.short_merge_commit_sha;
+    this.mergeCommitSha = data.merge_commit_sha;
     this.commitMessageWithDescription = data.merge_commit_message_with_description;
     this.commitsCount = data.commits_count;
     this.divergedCommitsCount = data.diverged_commits_count;
@@ -65,6 +72,7 @@ export default class MergeRequestStore {
     this.createIssueToResolveDiscussionsPath = data.create_issue_to_resolve_discussions_path;
     this.mergeCheckPath = data.merge_check_path;
     this.mergeActionsContentPath = data.commit_change_content_path;
+    this.mergeCommitPath = data.merge_commit_path;
     this.isRemovingSourceBranch = this.isRemovingSourceBranch || false;
     this.isOpen = data.state === 'opened';
     this.hasMergeableDiscussionsState = data.mergeable_discussions_state === false;
@@ -76,7 +84,7 @@ export default class MergeRequestStore {
     this.canBeMerged = data.can_be_merged || false;
     this.isMergeAllowed = data.mergeable || false;
     this.mergeOngoing = data.merge_ongoing;
-    this.maintainerEditAllowed = data.allow_maintainer_to_push;
+    this.allowCollaboration = data.allow_collaboration;
 
     // Cherry-pick and Revert actions related
     this.canCherryPickInCurrentMR = currentUser.can_cherry_pick_on_current_merge_request || false;
diff --git a/app/assets/javascripts/vue_shared/components/callout.vue b/app/assets/javascripts/vue_shared/components/callout.vue
new file mode 100644
index 00000000000..ccf802c456c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/callout.vue
@@ -0,0 +1,27 @@
+<script>
+const calloutVariants = ['danger', 'success', 'info', 'warning'];
+
+export default {
+  props: {
+    category: {
+      type: String,
+      required: false,
+      default: calloutVariants[0],
+      validator: value => calloutVariants.includes(value),
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div
+    :class="`bs-callout bs-callout-${category}`"
+    role="alert"
+    aria-live="assertive"
+  >
+    {{ message }}
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 5324d5dc797..a2518e2a611 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -1,58 +1,58 @@
 <script>
-  import ciIcon from './ci_icon.vue';
-  import tooltip from '../directives/tooltip';
-  /**
-   * 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
-   */
+import CiIcon from './ci_icon.vue';
+import tooltip from '../directives/tooltip';
+/**
+ * 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 {
-    components: {
-      ciIcon,
+export default {
+  components: {
+    CiIcon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    status: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
+    showText: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    props: {
-      status: {
-        type: Object,
-        required: true,
-      },
-      showText: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+  },
+  computed: {
+    cssClass() {
+      const className = this.status.group;
+      return className ? `ci-status ci-${className}` : 'ci-status';
     },
-    computed: {
-      cssClass() {
-        const className = this.status.group;
-        return className ? `ci-status ci-${className}` : 'ci-status';
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <a
+    v-tooltip
     :href="status.details_path"
     :class="cssClass"
-    v-tooltip
     :title="!showText ? status.text : ''"
   >
     <ci-icon :status="status" />
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 8fea746f4de..03f924ba99d 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -1,48 +1,68 @@
 <script>
-  import icon from '../../vue_shared/components/icon.vue';
+import Icon from '../../vue_shared/components/icon.vue';
 
-  /**
-   * 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 {
-    components: {
-      icon,
+/**
+ * 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
+ */
+const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    status: {
+      type: Object,
+      required: true,
     },
-    props: {
-      status: {
-        type: Object,
-        required: true,
+    size: {
+      type: Number,
+      required: false,
+      default: 16,
+      validator(value) {
+        return validSizes.includes(value);
       },
     },
-
-    computed: {
-      cssClass() {
-        const status = this.status.group;
-        return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
-      },
+    borderless: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    cssClass() {
+      const status = this.status.group;
+      return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
+    },
+    icon() {
+      return this.borderless ? `${this.status.icon}_borderless` : this.status.icon;
     },
-  };
+  },
+};
 </script>
 <template>
   <span :class="cssClass">
-    <icon :name="status.icon" />
+    <icon
+      :name="icon"
+      :size="size"
+    />
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index cab126a7eca..dc5760bce28 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -1,52 +1,62 @@
 <script>
-  /**
-   * Falls back to the code used in `copy_to_clipboard.js`
-   */
-  import tooltip from '../directives/tooltip';
+/**
+ * Falls back to the code used in `copy_to_clipboard.js`
+ *
+ * Renders a button with a clipboard icon that copies the content of `data-clipboard-text`
+ * when clicked.
+ *
+ * @example
+ * <clipboard-button
+ *   title="Copy to clipbard"
+ *   text="Content to be copied"
+ *    css-class="btn-transparent"
+ * />
+ */
+import tooltip from '../directives/tooltip';
 
-  export default {
-    name: 'ClipboardButton',
-    directives: {
-      tooltip,
+export default {
+  name: 'ClipboardButton',
+  directives: {
+    tooltip,
+  },
+  props: {
+    text: {
+      type: String,
+      required: true,
     },
-    props: {
-      text: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      tooltipPlacement: {
-        type: String,
-        required: false,
-        default: 'top',
-      },
-      tooltipContainer: {
-        type: [String, Boolean],
-        required: false,
-        default: false,
-      },
-      cssClass: {
-        type: String,
-        required: false,
-        default: 'btn-default',
-      },
+    title: {
+      type: String,
+      required: true,
     },
-  };
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    tooltipContainer: {
+      type: [String, Boolean],
+      required: false,
+      default: false,
+    },
+    cssClass: {
+      type: String,
+      required: false,
+      default: 'btn-default',
+    },
+  },
+};
 </script>
 
 <template>
   <button
-    type="button"
-    class="btn"
+    v-tooltip
     :class="cssClass"
     :title="title"
     :data-clipboard-text="text"
-    v-tooltip
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
+    type="button"
+    class="btn"
   >
     <i
       aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index 97789636787..13bca99dcb3 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -1,119 +1,111 @@
 <script>
-  import commitIconSvg from 'icons/_icon_commit.svg';
-  import userAvatarLink from './user_avatar/user_avatar_link.vue';
-  import tooltip from '../directives/tooltip';
-  import icon from '../../vue_shared/components/icon.vue';
+import UserAvatarLink from './user_avatar/user_avatar_link.vue';
+import tooltip from '../directives/tooltip';
+import Icon from '../../vue_shared/components/icon.vue';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    UserAvatarLink,
+    Icon,
+  },
+  props: {
+    /**
+     * Indicates the existance of a tag.
+     * Used to render the correct icon, if true will render `fa-tag` icon,
+     * if false will render a svg sprite fork icon
+     */
+    tag: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    components: {
-      userAvatarLink,
-      icon,
+    /**
+     * If provided is used to render the branch name and url.
+     * Should contain the following properties:
+     * name
+     * ref_url
+     */
+    commitRef: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    /**
+     * Used to link to the commit sha.
+     */
+    commitUrl: {
+      type: String,
+      required: false,
+      default: '',
     },
-    props: {
-      /**
-       * Indicates the existance of a tag.
-       * Used to render the correct icon, if true will render `fa-tag` icon,
-       * if false will render a svg sprite fork icon
-       */
-      tag: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      /**
-       * If provided is used to render the branch name and url.
-       * Should contain the following properties:
-       * name
-       * ref_url
-       */
-      commitRef: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      /**
-       * Used to link to the commit sha.
-       */
-      commitUrl: {
-        type: String,
-        required: false,
-        default: '',
-      },
 
-      /**
-       * Used to show the commit short sha that links to the commit url.
-       */
-      shortSha: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      /**
-       * If provided shows the commit tile.
-       */
-      title: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      /**
-       * If provided renders information about the author of the commit.
-       * When provided should include:
-       * `avatar_url` to render the avatar icon
-       * `web_url` to link to user profile
-       * `username` to render alt and title tags
-       */
-      author: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      showBranch: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    /**
+     * Used to show the commit short sha that links to the commit url.
+     */
+    shortSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * If provided shows the commit tile.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * If provided renders information about the author of the commit.
+     * When provided should include:
+     * `avatar_url` to render the avatar icon
+     * `web_url` to link to user profile
+     * `username` to render alt and title tags
+     */
+    author: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    showBranch: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    /**
+     * Used to verify if all the properties needed to render the commit
+     * ref section were provided.
+     *
+     * @returns {Boolean}
+     */
+    hasCommitRef() {
+      return this.commitRef && this.commitRef.name && this.commitRef.ref_url;
     },
-    computed: {
-      /**
-       * Used to verify if all the properties needed to render the commit
-       * ref section were provided.
-       *
-       * @returns {Boolean}
-       */
-      hasCommitRef() {
-        return this.commitRef && this.commitRef.name && this.commitRef.ref_url;
-      },
-      /**
-       * Used to verify if all the properties needed to render the commit
-       * author section were provided.
-       *
-       * @returns {Boolean}
-       */
-      hasAuthor() {
-        return this.author &&
-          this.author.avatar_url &&
-          this.author.path &&
-          this.author.username;
-      },
-      /**
-       * If information about the author is provided will return a string
-       * to be rendered as the alt attribute of the img tag.
-       *
-       * @returns {String}
-       */
-      userImageAltDescription() {
-        return this.author &&
-          this.author.username ? `${this.author.username}'s avatar` : null;
-      },
+    /**
+     * Used to verify if all the properties needed to render the commit
+     * author section were provided.
+     *
+     * @returns {Boolean}
+     */
+    hasAuthor() {
+      return this.author && this.author.avatar_url && this.author.path && this.author.username;
     },
-    created() {
-      this.commitIconSvg = commitIconSvg;
+    /**
+     * If information about the author is provided will return a string
+     * to be rendered as the alt attribute of the img tag.
+     *
+     * @returns {String}
+     */
+    userImageAltDescription() {
+      return this.author && this.author.username ? `${this.author.username}'s avatar` : null;
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="branch-commit">
@@ -132,24 +124,23 @@
       </div>
 
       <a
-        class="ref-name"
-        :href="commitRef.ref_url"
         v-tooltip
-        data-container="body"
+        :href="commitRef.ref_url"
         :title="commitRef.name"
+        class="ref-name"
+        data-container="body"
       >
         {{ commitRef.name }}
       </a>
     </template>
-    <div
-      v-html="commitIconSvg"
+    <icon
+      name="commit"
       class="commit-icon js-commit-icon"
-    >
-    </div>
+    />
 
     <a
-      class="commit-sha"
       :href="commitUrl"
+      class="commit-sha"
     >
       {{ shortSha }}
     </a>
@@ -161,21 +152,21 @@
       >
         <user-avatar-link
           v-if="hasAuthor"
-          class="avatar-image-container"
           :link-href="author.path"
           :img-src="author.avatar_url"
           :img-alt="userImageAltDescription"
           :tooltip-text="author.username"
+          class="avatar-image-container"
         />
         <a
-          class="commit-row-message"
           :href="commitUrl"
+          class="commit-row-message"
         >
           {{ title }}
         </a>
       </span>
       <span v-else>
-        Cant find HEAD commit for this branch
+        Can't find HEAD commit for this branch
       </span>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue
new file mode 100644
index 00000000000..4155e1bab9c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue
@@ -0,0 +1,58 @@
+<script>
+import { viewerInformationForPath } from './lib/viewer_utils';
+import MarkdownViewer from './viewers/markdown_viewer.vue';
+import ImageViewer from './viewers/image_viewer.vue';
+import DownloadViewer from './viewers/download_viewer.vue';
+
+export default {
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    fileSize: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    viewer() {
+      if (!this.path) return null;
+
+      const previewInfo = viewerInformationForPath(this.path);
+      if (!previewInfo) return DownloadViewer;
+
+      switch (previewInfo.id) {
+        case 'markdown':
+          return MarkdownViewer;
+        case 'image':
+          return ImageViewer;
+        default:
+          return DownloadViewer;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="preview-container">
+    <component
+      :is="viewer"
+      :path="path"
+      :file-size="fileSize"
+      :project-path="projectPath"
+      :content="content"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js b/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js
new file mode 100644
index 00000000000..f01a51da0b3
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js
@@ -0,0 +1,32 @@
+const viewers = {
+  image: {
+    id: 'image',
+  },
+  markdown: {
+    id: 'markdown',
+    previewTitle: 'Preview Markdown',
+  },
+};
+
+const fileNameViewers = {};
+const fileExtensionViewers = {
+  jpg: 'image',
+  jpeg: 'image',
+  gif: 'image',
+  png: 'image',
+  bmp: 'image',
+  ico: 'image',
+  md: 'markdown',
+  markdown: 'markdown',
+};
+
+export function viewerInformationForPath(path) {
+  if (!path) return null;
+  const name = path.split('/').pop();
+  const viewerName =
+    fileNameViewers[name] || fileExtensionViewers[name ? name.split('.').pop() : ''] || '';
+
+  return viewers[viewerName];
+}
+
+export default viewers;
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
new file mode 100644
index 00000000000..f1ef50d0e3d
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
@@ -0,0 +1,55 @@
+<script>
+import Icon from '../../icon.vue';
+import { numberToHumanSize } from '../../../../lib/utils/number_utils';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+    fileSize: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  computed: {
+    fileSizeReadable() {
+      return numberToHumanSize(this.fileSize);
+    },
+    fileName() {
+      return this.path.split('/').pop();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="file-container">
+    <div class="file-content">
+      <p class="prepend-top-10 file-info">
+        {{ fileName }}
+        <template v-if="fileSize > 0">
+          ({{ fileSizeReadable }})
+        </template>
+      </p>
+      <a
+        :href="path"
+        class="btn btn-default"
+        rel="nofollow"
+        download
+        target="_blank">
+        <icon
+          :size="16"
+          name="download"
+          css-classes="float-left append-right-8"
+        />
+        {{ __('Download') }}
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
new file mode 100644
index 00000000000..133bdbb54f7
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@@ -0,0 +1,95 @@
+<script>
+import _ from 'underscore';
+import { numberToHumanSize } from '../../../../lib/utils/number_utils';
+
+export default {
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+    fileSize: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    renderInfo: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      width: 0,
+      height: 0,
+      isZoomable: false,
+      isZoomed: false,
+    };
+  },
+  computed: {
+    fileSizeReadable() {
+      return numberToHumanSize(this.fileSize);
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeThrottled, false);
+  },
+  mounted() {
+    // The onImgLoad may have happened before the control was actually mounted
+    this.onImgLoad();
+    this.resizeThrottled = _.throttle(this.onImgLoad, 400);
+    window.addEventListener('resize', this.resizeThrottled, false);
+  },
+  methods: {
+    onImgLoad() {
+      const { contentImg } = this.$refs;
+
+      if (contentImg) {
+        this.isZoomable =
+          contentImg.naturalWidth > contentImg.width ||
+          contentImg.naturalHeight > contentImg.height;
+
+        this.width = contentImg.naturalWidth;
+        this.height = contentImg.naturalHeight;
+
+        this.$emit('imgLoaded', {
+          width: this.width,
+          height: this.height,
+          renderedWidth: contentImg.clientWidth,
+          renderedHeight: contentImg.clientHeight,
+        });
+      }
+    },
+    onImgClick() {
+      if (this.isZoomable) this.isZoomed = !this.isZoomed;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"/>
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
new file mode 100644
index 00000000000..a10deb93f0f
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@@ -0,0 +1,90 @@
+<script>
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import $ from 'jquery';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+
+const { CancelToken } = axios;
+let axiosSource;
+
+export default {
+  components: {
+    SkeletonLoadingContainer,
+  },
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      previewContent: null,
+      isLoading: false,
+    };
+  },
+  watch: {
+    content() {
+      this.previewContent = null;
+    },
+  },
+  created() {
+    axiosSource = CancelToken.source();
+    this.fetchMarkdownPreview();
+  },
+  updated() {
+    this.fetchMarkdownPreview();
+  },
+  destroyed() {
+    if (this.isLoading) axiosSource.cancel('Cancelling Preview');
+  },
+  methods: {
+    fetchMarkdownPreview() {
+      if (this.content && this.previewContent === null) {
+        this.isLoading = true;
+        const postBody = {
+          text: this.content,
+        };
+        const postOptions = {
+          cancelToken: axiosSource.token,
+        };
+
+        axios
+          .post(
+            `${gon.relative_url_root}/${this.projectPath}/preview_markdown`,
+            postBody,
+            postOptions,
+          )
+          .then(({ data }) => {
+            this.previewContent = data.body;
+            this.isLoading = false;
+
+            this.$nextTick(() => {
+              $(this.$refs['markdown-preview']).renderGFM();
+            });
+          })
+          .catch(() => {
+            this.previewContent = __('An error occurred while fetching markdown preview');
+            this.isLoading = false;
+          });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    ref="markdown-preview"
+    class="md md-previewer">
+    <skeleton-loading-container v-if="isLoading" />
+    <div
+      v-else
+      v-html="previewContent">
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
index 5f1364421aa..9c1e5c68649 100644
--- a/app/assets/javascripts/vue_shared/components/modal.vue
+++ b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
@@ -1,7 +1,7 @@
 <script>
   /* eslint-disable vue/require-default-prop */
   export default {
-    name: 'Modal',
+    name: 'DeprecatedModal', // use GlModal instead
 
     props: {
       id: {
@@ -86,8 +86,8 @@
   <div class="modal-open">
     <div
       :id="id"
+      :class="id ? '' : 'd-block'"
       class="modal"
-      :class="id ? '' : 'show'"
       role="dialog"
       tabindex="-1"
     >
@@ -99,15 +99,15 @@
         <div class="modal-content">
           <div class="modal-header">
             <slot name="header">
-              <h4 class="modal-title pull-left">
+              <h4 class="modal-title float-left">
                 {{ title }}
               </h4>
               <button
                 type="button"
-                class="close pull-right"
-                @click="emitCancel($event)"
+                class="close float-right"
                 data-dismiss="modal"
                 aria-label="Close"
+                @click="emitCancel($event)"
               >
                 <span aria-hidden="true">&times;</span>
               </button>
@@ -115,22 +115,22 @@
           </div>
           <div class="modal-body">
             <slot
-              name="body"
               :text="text"
+              name="body"
             >
               <p>{{ text }}</p>
             </slot>
           </div>
           <div
-            class="modal-footer"
             v-if="!hideFooter"
+            class="modal-footer"
           >
             <button
+              :class="btnCancelKindClass"
               type="button"
               class="btn"
-              :class="btnCancelKindClass"
-              @click="emitCancel($event)"
               data-dismiss="modal"
+              @click="emitCancel($event)"
             >
               {{ closeButtonLabel }}
             </button>
@@ -151,12 +151,12 @@
 
             <button
               v-if="primaryButtonLabel"
-              type="button"
-              class="btn js-primary-button"
               :disabled="submitDisabled"
               :class="btnKindClass"
-              @click="emitSubmit($event)"
+              type="button"
+              class="btn js-primary-button"
               data-dismiss="modal"
+              @click="emitSubmit($event)"
             >
               {{ primaryButtonLabel }}
             </button>
@@ -166,7 +166,7 @@
     </div>
     <div
       v-if="!id"
-      class="modal-backdrop fade in"
+      class="modal-backdrop fade show"
     >
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/constants.js b/app/assets/javascripts/vue_shared/components/diff_viewer/constants.js
new file mode 100644
index 00000000000..6c1840361af
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/constants.js
@@ -0,0 +1,12 @@
+export const diffModes = {
+  replaced: 'replaced',
+  new: 'new',
+  deleted: 'deleted',
+  renamed: 'renamed',
+};
+
+export const imageViewMode = {
+  twoup: 'twoup',
+  swipe: 'swipe',
+  onion: 'onion',
+};
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
new file mode 100644
index 00000000000..d3cbe3c7e74
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
@@ -0,0 +1,74 @@
+<script>
+import { viewerInformationForPath } from '../content_viewer/lib/viewer_utils';
+import ImageDiffViewer from './viewers/image_diff_viewer.vue';
+import DownloadDiffViewer from './viewers/download_diff_viewer.vue';
+
+export default {
+  props: {
+    diffMode: {
+      type: String,
+      required: true,
+    },
+    newPath: {
+      type: String,
+      required: true,
+    },
+    newSha: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    oldSha: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    viewer() {
+      if (!this.newPath) return null;
+
+      const previewInfo = viewerInformationForPath(this.newPath);
+      if (!previewInfo) return DownloadDiffViewer;
+
+      switch (previewInfo.id) {
+        case 'image':
+          return ImageDiffViewer;
+        default:
+          return DownloadDiffViewer;
+      }
+    },
+    basePath() {
+      // We might get the project path from rails with the relative url already setup
+      return this.projectPath.indexOf('/') === 0 ? '' : `${gon.relative_url_root}/`;
+    },
+    fullOldPath() {
+      return `${this.basePath}${this.projectPath}/raw/${this.oldSha}/${this.oldPath}`;
+    },
+    fullNewPath() {
+      return `${this.basePath}${this.projectPath}/raw/${this.newSha}/${this.newPath}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="viewer"
+    class="diff-file preview-container">
+    <component
+      :is="viewer"
+      :diff-mode="diffMode"
+      :new-path="fullNewPath"
+      :old-path="fullOldPath"
+      :project-path="projectPath"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue
new file mode 100644
index 00000000000..50389b6ae63
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue
@@ -0,0 +1,69 @@
+<script>
+import DownloadViewer from '../../content_viewer/viewers/download_viewer.vue';
+import { diffModes } from '../constants';
+
+export default {
+  components: {
+    DownloadViewer,
+  },
+  props: {
+    diffMode: {
+      type: String,
+      required: true,
+    },
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  diffModes,
+};
+</script>
+
+<template>
+  <div class="diff-file-container">
+    <div class="diff-viewer">
+      <div
+        v-if="diffMode === $options.diffModes.replaced"
+        class="two-up view row">
+        <div class="col-sm-6 deleted">
+          <download-viewer
+            :path="oldPath"
+            :project-path="projectPath"
+          />
+        </div>
+        <div class="col-sm-6 added">
+          <download-viewer
+            :path="newPath"
+            :project-path="projectPath"
+          />
+        </div>
+      </div>
+      <div
+        v-else-if="diffMode === $options.diffModes.new"
+        class="added">
+        <download-viewer
+          :path="newPath"
+          :project-path="projectPath"
+        />
+      </div>
+      <div
+        v-else
+        class="deleted">
+        <download-viewer
+          :path="oldPath"
+          :project-path="projectPath"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
new file mode 100644
index 00000000000..38e881d17a2
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
@@ -0,0 +1,160 @@
+<script>
+import { pixeliseValue } from '../../../lib/utils/dom_utils';
+import ImageViewer from '../../../content_viewer/viewers/image_viewer.vue';
+
+export default {
+  components: {
+    ImageViewer,
+  },
+  props: {
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      onionMaxWidth: undefined,
+      onionMaxHeight: undefined,
+      onionOldImgInfo: null,
+      onionNewImgInfo: null,
+      onionDraggerPos: 0,
+      onionOpacity: 1,
+      dragging: false,
+    };
+  },
+  computed: {
+    onionMaxPixelWidth() {
+      return pixeliseValue(this.onionMaxWidth);
+    },
+    onionMaxPixelHeight() {
+      return pixeliseValue(this.onionMaxHeight);
+    },
+    onionDraggerPixelPos() {
+      return pixeliseValue(this.onionDraggerPos);
+    },
+  },
+  beforeDestroy() {
+    document.body.removeEventListener('mouseup', this.stopDrag);
+    this.$refs.dragger.removeEventListener('mousedown', this.startDrag);
+  },
+  methods: {
+    dragMove(e) {
+      if (!this.dragging) return;
+      const left = e.pageX - this.$refs.dragTrack.getBoundingClientRect().left;
+      const dragTrackWidth =
+        this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
+
+      let leftValue = left;
+      if (leftValue < 0) leftValue = 0;
+      if (leftValue > dragTrackWidth) leftValue = dragTrackWidth;
+
+      this.onionOpacity = left / dragTrackWidth;
+      this.onionDraggerPos = leftValue;
+    },
+    startDrag() {
+      this.dragging = true;
+      document.body.style.userSelect = 'none';
+      document.body.addEventListener('mousemove', this.dragMove);
+    },
+    stopDrag() {
+      this.dragging = false;
+      document.body.style.userSelect = '';
+      document.body.removeEventListener('mousemove', this.dragMove);
+    },
+    prepareOnionSkin() {
+      if (this.onionOldImgInfo && this.onionNewImgInfo) {
+        this.onionMaxWidth = Math.max(
+          this.onionOldImgInfo.renderedWidth,
+          this.onionNewImgInfo.renderedWidth,
+        );
+        this.onionMaxHeight = Math.max(
+          this.onionOldImgInfo.renderedHeight,
+          this.onionNewImgInfo.renderedHeight,
+        );
+
+        this.onionOpacity = 1;
+        this.onionDraggerPos =
+          this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
+
+        document.body.addEventListener('mouseup', this.stopDrag);
+      }
+    },
+    onionNewImgLoaded(imgInfo) {
+      this.onionNewImgInfo = imgInfo;
+      this.prepareOnionSkin();
+    },
+    onionOldImgLoaded(imgInfo) {
+      this.onionOldImgInfo = imgInfo;
+      this.prepareOnionSkin();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="onion-skin view">
+    <div
+      :style="{
+        'width': onionMaxPixelWidth,
+        'height': onionMaxPixelHeight,
+        'user-select': dragging === true ? 'none' : '',
+      }"
+      class="onion-skin-frame">
+      <div
+        :style="{
+          'width': onionMaxPixelWidth,
+          'height': onionMaxPixelHeight,
+        }"
+        class="frame deleted">
+        <image-viewer
+          key="onionOldImg"
+          :render-info="false"
+          :path="oldPath"
+          :project-path="projectPath"
+          @imgLoaded="onionOldImgLoaded"
+        />
+      </div>
+      <div
+        ref="addedFrame"
+        :style="{
+          'opacity': onionOpacity,
+          'width': onionMaxPixelWidth,
+          'height': onionMaxPixelHeight,
+        }"
+        class="added frame">
+        <image-viewer
+          key="onionNewImg"
+          :render-info="false"
+          :path="newPath"
+          :project-path="projectPath"
+          @imgLoaded="onionNewImgLoaded"
+        />
+      </div>
+      <div class="controls">
+        <div class="transparent"></div>
+        <div
+          ref="dragTrack"
+          class="drag-track"
+          @mousedown="startDrag"
+          @mouseup="stopDrag">
+          <div
+            ref="dragger"
+            :style="{ 'left': onionDraggerPixelPos }"
+            class="dragger">
+          </div>
+        </div>
+        <div class="opaque"></div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
new file mode 100644
index 00000000000..86366c799a2
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
@@ -0,0 +1,158 @@
+<script>
+import _ from 'underscore';
+import { pixeliseValue } from '../../../lib/utils/dom_utils';
+import ImageViewer from '../../../content_viewer/viewers/image_viewer.vue';
+
+export default {
+  components: {
+    ImageViewer,
+  },
+  props: {
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      dragging: false,
+      swipeOldImgInfo: null,
+      swipeNewImgInfo: null,
+      swipeMaxWidth: undefined,
+      swipeMaxHeight: undefined,
+      swipeBarPos: 1,
+      swipeWrapWidth: undefined,
+    };
+  },
+  computed: {
+    swipeMaxPixelWidth() {
+      return pixeliseValue(this.swipeMaxWidth);
+    },
+    swipeMaxPixelHeight() {
+      return pixeliseValue(this.swipeMaxHeight);
+    },
+    swipeWrapPixelWidth() {
+      return pixeliseValue(this.swipeWrapWidth);
+    },
+    swipeBarPixelPos() {
+      return pixeliseValue(this.swipeBarPos);
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeThrottled, false);
+    document.body.removeEventListener('mouseup', this.stopDrag);
+    document.body.removeEventListener('mousemove', this.dragMove);
+  },
+  mounted() {
+    window.addEventListener('resize', this.resize, false);
+  },
+  methods: {
+    dragMove(e) {
+      if (!this.dragging) return;
+
+      let leftValue = e.pageX - this.$refs.swipeFrame.getBoundingClientRect().left;
+      const spaceLeft = 20;
+      const { clientWidth } = this.$refs.swipeFrame;
+      if (leftValue <= 0) {
+        leftValue = 0;
+      } else if (leftValue > clientWidth - spaceLeft) {
+        leftValue = clientWidth - spaceLeft;
+      }
+
+      this.swipeWrapWidth = this.swipeMaxWidth - leftValue;
+      this.swipeBarPos = leftValue;
+    },
+    startDrag() {
+      this.dragging = true;
+      document.body.style.userSelect = 'none';
+      document.body.addEventListener('mousemove', this.dragMove);
+    },
+    stopDrag() {
+      this.dragging = false;
+      document.body.style.userSelect = '';
+      document.body.removeEventListener('mousemove', this.dragMove);
+    },
+    prepareSwipe() {
+      if (this.swipeOldImgInfo && this.swipeNewImgInfo) {
+        // Add 2 for border width
+        this.swipeMaxWidth =
+          Math.max(this.swipeOldImgInfo.renderedWidth, this.swipeNewImgInfo.renderedWidth) + 2;
+        this.swipeWrapWidth = this.swipeMaxWidth;
+        this.swipeMaxHeight =
+          Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2;
+
+        document.body.addEventListener('mouseup', this.stopDrag);
+      }
+    },
+    swipeNewImgLoaded(imgInfo) {
+      this.swipeNewImgInfo = imgInfo;
+      this.prepareSwipe();
+    },
+    swipeOldImgLoaded(imgInfo) {
+      this.swipeOldImgInfo = imgInfo;
+      this.prepareSwipe();
+    },
+    resize: _.throttle(function throttledResize() {
+      this.swipeBarPos = 0;
+    }, 400),
+  },
+};
+</script>
+
+<template>
+  <div class="swipe view">
+    <div
+      ref="swipeFrame"
+      :style="{
+        'width': swipeMaxPixelWidth,
+        'height': swipeMaxPixelHeight,
+      }"
+      class="swipe-frame">
+      <div class="frame deleted">
+        <image-viewer
+          key="swipeOldImg"
+          ref="swipeOldImg"
+          :render-info="false"
+          :path="oldPath"
+          :project-path="projectPath"
+          @imgLoaded="swipeOldImgLoaded"
+        />
+      </div>
+      <div
+        ref="swipeWrap"
+        :style="{
+          'width': swipeWrapPixelWidth,
+          'height': swipeMaxPixelHeight,
+        }"
+        class="swipe-wrap">
+        <div class="frame added">
+          <image-viewer
+            key="swipeNewImg"
+            :render-info="false"
+            :path="newPath"
+            :project-path="projectPath"
+            @imgLoaded="swipeNewImgLoaded"
+          />
+        </div>
+      </div>
+      <span
+        ref="swipeBar"
+        :style="{ 'left': swipeBarPixelPos }"
+        class="swipe-bar"
+        @mousedown="startDrag"
+        @mouseup="stopDrag">
+        <span class="top-handle"></span>
+        <span class="bottom-handle"></span>
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
new file mode 100644
index 00000000000..9c19266ecdf
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
@@ -0,0 +1,41 @@
+<script>
+import ImageViewer from '../../../content_viewer/viewers/image_viewer.vue';
+
+export default {
+  components: {
+    ImageViewer,
+  },
+  props: {
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="two-up view row">
+    <div class="col-sm-6 frame deleted">
+      <image-viewer
+        :path="oldPath"
+        :project-path="projectPath"
+      />
+    </div>
+    <div class="col-sm-6 frame added">
+      <image-viewer
+        :path="newPath"
+        :project-path="projectPath"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
new file mode 100644
index 00000000000..1af85283277
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
@@ -0,0 +1,109 @@
+<script>
+import ImageViewer from '../../content_viewer/viewers/image_viewer.vue';
+import TwoUpViewer from './image_diff/two_up_viewer.vue';
+import SwipeViewer from './image_diff/swipe_viewer.vue';
+import OnionSkinViewer from './image_diff/onion_skin_viewer.vue';
+import { diffModes, imageViewMode } from '../constants';
+
+export default {
+  components: {
+    ImageViewer,
+    TwoUpViewer,
+    SwipeViewer,
+    OnionSkinViewer,
+  },
+  props: {
+    diffMode: {
+      type: String,
+      required: true,
+    },
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      mode: imageViewMode.twoup,
+    };
+  },
+  methods: {
+    changeMode(newMode) {
+      this.mode = newMode;
+    },
+  },
+  diffModes,
+  imageViewMode,
+};
+</script>
+
+<template>
+  <div class="diff-file-container">
+    <div
+      v-if="diffMode === $options.diffModes.replaced"
+      class="diff-viewer">
+      <div class="image js-replaced-image">
+        <two-up-viewer
+          v-if="mode === $options.imageViewMode.twoup"
+          v-bind="$props"/>
+        <swipe-viewer
+          v-else-if="mode === $options.imageViewMode.swipe"
+          v-bind="$props"/>
+        <onion-skin-viewer
+          v-else-if="mode === $options.imageViewMode.onion"
+          v-bind="$props"/>
+      </div>
+      <div class="view-modes">
+        <ul class="view-modes-menu">
+          <li
+            :class="{
+              active: mode === $options.imageViewMode.twoup
+            }"
+            @click="changeMode($options.imageViewMode.twoup)">
+            {{ s__('ImageDiffViewer|2-up') }}
+          </li>
+          <li
+            :class="{
+              active: mode === $options.imageViewMode.swipe
+            }"
+            @click="changeMode($options.imageViewMode.swipe)">
+            {{ s__('ImageDiffViewer|Swipe') }}
+          </li>
+          <li
+            :class="{
+              active: mode === $options.imageViewMode.onion
+            }"
+            @click="changeMode($options.imageViewMode.onion)">
+            {{ s__('ImageDiffViewer|Onion skin') }}
+          </li>
+        </ul>
+      </div>
+      <div class="note-container"></div>
+    </div>
+    <div
+      v-else-if="diffMode === $options.diffModes.new"
+      class="diff-viewer added">
+      <image-viewer
+        :path="newPath"
+        :project-path="projectPath"
+      />
+    </div>
+    <div
+      v-else
+      class="diff-viewer deleted">
+      <image-viewer
+        :path="oldPath"
+        :project-path="projectPath"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
new file mode 100644
index 00000000000..3cba0c5e633
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -0,0 +1,55 @@
+<script>
+import { __ } from '~/locale';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+
+export default {
+  components: {
+    LoadingIcon,
+  },
+  props: {
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    toggleText: {
+      type: String,
+      required: false,
+      default: __('Select'),
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    :disabled="isDisabled || isLoading"
+    class="dropdown-menu-toggle dropdown-menu-full-width"
+    type="button"
+    data-toggle="dropdown"
+    aria-expanded="false"
+  >
+    <loading-icon
+      v-show="isLoading"
+      :inline="true"
+    />
+    <span class="dropdown-toggle-text">
+      {{ toggleText }}
+    </span>
+    <span
+      v-show="!isLoading"
+      class="dropdown-toggle-icon"
+    >
+      <i
+        class="fa fa-chevron-down"
+        aria-hidden="true"
+        data-hidden="true"
+      ></i>
+    </span>
+  </button>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
index 1832c3c1757..b7a4613bdd2 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
@@ -5,8 +5,8 @@ export default {
       type: String,
       required: true,
     },
-    label: {
-      type: Object,
+    value: {
+      type: [Number, String],
       required: true,
     },
   },
@@ -15,8 +15,8 @@ export default {
 
 <template>
   <input
-    type="hidden"
     :name="name"
-    :value="label.id"
+    :value="value"
+    type="hidden"
   />
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
new file mode 100644
index 00000000000..7f1912f6405
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
@@ -0,0 +1,46 @@
+<script>
+import { __ } from '~/locale';
+
+export default {
+  props: {
+    placeholderText: {
+      type: String,
+      required: true,
+      default: __('Search'),
+    },
+  },
+  data() {
+    return { searchQuery: this.value };
+  },
+  watch: {
+    searchQuery(query) {
+      this.$emit('input', query);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="dropdown-input">
+    <input
+      v-model="searchQuery"
+      :placeholder="placeholderText"
+      class="dropdown-input-field"
+      type="search"
+      autocomplete="off"
+    />
+    <i
+      class="fa fa-search dropdown-input-search"
+      aria-hidden="true"
+      data-hidden="true"
+    >
+    </i>
+    <i
+      class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
+      aria-hidden="true"
+      data-hidden="true"
+      role="button"
+    >
+    </i>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue
index c943c8d98a4..e6e92594b65 100644
--- a/app/assets/javascripts/vue_shared/components/expand_button.vue
+++ b/app/assets/javascripts/vue_shared/components/expand_button.vue
@@ -1,43 +1,54 @@
 <script>
-  import { __ } from '~/locale';
-  /**
-   * Port of detail_behavior expand button.
-   *
-   * @example
-   * <expand-button>
-   *   <template slot="expanded">
-   *      Text goes here.
-   *    </template>
-   * </expand-button>
-   */
-  export default {
-    name: 'ExpandButton',
-    data() {
-      return {
-        isCollapsed: true,
-      };
+import { __ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+
+/**
+ * Port of detail_behavior expand button.
+ *
+ * @example
+ * <expand-button>
+ *   <template slot="expanded">
+ *      Text goes here.
+ *    </template>
+ * </expand-button>
+ */
+export default {
+  name: 'ExpandButton',
+  components: {
+    Icon,
+  },
+  data() {
+    return {
+      isCollapsed: true,
+    };
+  },
+  computed: {
+    ariaLabel() {
+      return __('Click to expand text');
     },
-    computed: {
-      ariaLabel() {
-        return __('Click to expand text');
-      },
+  },
+  destroyed() {
+    this.isCollapsed = true;
+  },
+  methods: {
+    onClick() {
+      this.isCollapsed = !this.isCollapsed;
     },
-    methods: {
-      onClick() {
-        this.isCollapsed = !this.isCollapsed;
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <span>
     <button
-      type="button"
       v-show="isCollapsed"
-      class="text-expander btn-blank"
       :aria-label="ariaLabel"
+      type="button"
+      class="text-expander btn-blank"
       @click="onClick">
-      ...
+      <icon
+        :size="12"
+        name="ellipsis_h"
+      />
     </button>
     <span v-if="!isCollapsed">
       <slot name="expanded"></slot>
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index ee1c3498748..878c805ada5 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -1,9 +1,9 @@
 <script>
-  import getIconForFile from './file_icon/file_icon_map';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import icon from '../../vue_shared/components/icon.vue';
+import getIconForFile from './file_icon/file_icon_map';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
-  /* This is a re-usable vue component for rendering a svg sprite
+/* This is a re-usable vue component for rendering a svg sprite
     icon
 
     Sample configuration:
@@ -15,66 +15,66 @@
     />
 
   */
-  export default {
-    components: {
-      loadingIcon,
-      icon,
+export default {
+  components: {
+    loadingIcon,
+    icon,
+  },
+  props: {
+    fileName: {
+      type: String,
+      required: true,
     },
-    props: {
-      fileName: {
-        type: String,
-        required: true,
-      },
 
-      folder: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    folder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
 
-      opened: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    opened: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
 
-      loading: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
 
-      size: {
-        type: Number,
-        required: false,
-        default: 16,
-      },
+    size: {
+      type: Number,
+      required: false,
+      default: 16,
+    },
 
-      cssClasses: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      spriteHref() {
-        const iconName = getIconForFile(this.fileName) || 'file';
-        return `${gon.sprite_file_icons}#${iconName}`;
-      },
-      folderIconName() {
-        return this.opened ? 'folder-open' : 'folder';
-      },
-      iconSizeClass() {
-        return this.size ? `s${this.size}` : '';
-      },
+  },
+  computed: {
+    spriteHref() {
+      const iconName = getIconForFile(this.fileName) || 'file';
+      return `${gon.sprite_file_icons}#${iconName}`;
     },
-  };
+    folderIconName() {
+      return this.opened ? 'folder-open' : 'folder';
+    },
+    iconSizeClass() {
+      return this.size ? `s${this.size}` : '';
+    },
+  },
+};
 </script>
 <template>
   <span>
     <svg
-      :class="[iconSizeClass, cssClasses]"
       v-if="!loading && !folder"
+      :class="[iconSizeClass, cssClasses]"
     >
       <use v-bind="{ 'xlink:href':spriteHref }" />
     </svg>
@@ -82,6 +82,7 @@
       v-if="!loading && folder"
       :name="folderIconName"
       :size="size"
+      css-classes="folder-icon"
     />
     <loading-icon
       v-if="loading"
diff --git a/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js b/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
index 9ffbaae3ea5..9bca1993ccc 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
+++ b/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
@@ -513,7 +513,7 @@ const fileNameIcons = {
   'credits.md': 'credits',
   'credits.md.rendered': 'credits',
   '.flowconfig': 'flow',
-  'favicon.ico': 'favicon',
+  'favicon.png': 'favicon',
   'karma.conf.js': 'karma',
   'karma.conf.ts': 'karma',
   'karma.conf.coffee': 'karma',
diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
index 67c9181c7b1..b298b989203 100644
--- a/app/assets/javascripts/vue_shared/components/gl_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -1,47 +1,52 @@
 <script>
-  const buttonVariants = [
-    'danger',
-    'primary',
-    'success',
-    'warning',
-  ];
+const buttonVariants = ['danger', 'primary', 'success', 'warning'];
+const sizeVariants = ['sm', 'md', 'lg', 'xl'];
 
-  export default {
-    name: 'GlModal',
-
-    props: {
-      id: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      headerTitleText: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      footerPrimaryButtonVariant: {
-        type: String,
-        required: false,
-        default: 'primary',
-        validator: value => buttonVariants.indexOf(value) !== -1,
-      },
-      footerPrimaryButtonText: {
-        type: String,
-        required: false,
-        default: '',
-      },
+export default {
+  name: 'GlModal',
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: null,
     },
-
-    methods: {
-      emitCancel(event) {
-        this.$emit('cancel', event);
-      },
-      emitSubmit(event) {
-        this.$emit('submit', event);
-      },
+    modalSize: {
+      type: String,
+      required: false,
+      default: 'md',
+      validator: value => sizeVariants.includes(value),
+    },
+    headerTitleText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    footerPrimaryButtonVariant: {
+      type: String,
+      required: false,
+      default: 'primary',
+      validator: value => buttonVariants.includes(value),
+    },
+    footerPrimaryButtonText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    modalSizeClass() {
+      return this.modalSize === 'md' ? '' : `modal-${this.modalSize}`;
     },
-  };
+  },
+  methods: {
+    emitCancel(event) {
+      this.$emit('cancel', event);
+    },
+    emitSubmit(event) {
+      this.$emit('submit', event);
+    },
+  },
+};
 </script>
 
 <template>
@@ -52,26 +57,27 @@
     role="dialog"
   >
     <div
+      :class="modalSizeClass"
       class="modal-dialog"
       role="document"
     >
       <div class="modal-content">
         <div class="modal-header">
           <slot name="header">
+            <h4 class="modal-title">
+              <slot name="title">
+                {{ headerTitleText }}
+              </slot>
+            </h4>
             <button
+              :aria-label="s__('Modal|Close')"
               type="button"
-              class="close"
+              class="close js-modal-close-action"
               data-dismiss="modal"
-              :aria-label="s__('Modal|Close')"
               @click="emitCancel($event)"
             >
               <span aria-hidden="true">&times;</span>
             </button>
-            <h4 class="modal-title">
-              <slot name="title">
-                {{ headerTitleText }}
-              </slot>
-            </h4>
           </slot>
         </div>
 
@@ -83,16 +89,16 @@
           <slot name="footer">
             <button
               type="button"
-              class="btn"
+              class="btn js-modal-cancel-action"
               data-dismiss="modal"
               @click="emitCancel($event)"
             >
               {{ s__('Modal|Cancel') }}
             </button>
             <button
-              type="button"
-              class="btn"
               :class="`btn-${footerPrimaryButtonVariant}`"
+              type="button"
+              class="btn js-modal-primary-action"
               data-dismiss="modal"
               @click="emitSubmit($event)"
             >
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index a0cd0cbd200..62d35f6547d 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -1,78 +1,78 @@
 <script>
-  import ciIconBadge from './ci_badge_link.vue';
-  import loadingIcon from './loading_icon.vue';
-  import timeagoTooltip from './time_ago_tooltip.vue';
-  import tooltip from '../directives/tooltip';
-  import userAvatarImage from './user_avatar/user_avatar_image.vue';
+import CiIconBadge from './ci_badge_link.vue';
+import LoadingIcon from './loading_icon.vue';
+import TimeagoTooltip from './time_ago_tooltip.vue';
+import tooltip from '../directives/tooltip';
+import UserAvatarImage from './user_avatar/user_avatar_image.vue';
 
-  /**
-   * Renders header component for job and pipeline page based on UI mockups
-   *
-   * Used in:
-   * - job show page
-   * - pipeline show page
-   */
-  export default {
-    components: {
-      ciIconBadge,
-      loadingIcon,
-      timeagoTooltip,
-      userAvatarImage,
+/**
+ * Renders header component for job and pipeline page based on UI mockups
+ *
+ * Used in:
+ * - job show page
+ * - pipeline show page
+ */
+export default {
+  components: {
+    CiIconBadge,
+    LoadingIcon,
+    TimeagoTooltip,
+    UserAvatarImage,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    status: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
+    itemName: {
+      type: String,
+      required: true,
     },
-    props: {
-      status: {
-        type: Object,
-        required: true,
-      },
-      itemName: {
-        type: String,
-        required: true,
-      },
-      itemId: {
-        type: Number,
-        required: true,
-      },
-      time: {
-        type: String,
-        required: true,
-      },
-      user: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      actions: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      hasSidebarButton: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      shouldRenderTriggeredLabel: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    itemId: {
+      type: Number,
+      required: true,
     },
+    time: {
+      type: String,
+      required: true,
+    },
+    user: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    hasSidebarButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    shouldRenderTriggeredLabel: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
 
-    computed: {
-      userAvatarAltText() {
-        return `${this.user.name}'s avatar`;
-      },
+  computed: {
+    userAvatarAltText() {
+      return `${this.user.name}'s avatar`;
     },
+  },
 
-    methods: {
-      onClickAction(action) {
-        this.$emit('actionClicked', action);
-      },
+  methods: {
+    onClickAction(action) {
+      this.$emit('actionClicked', action);
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -117,8 +117,8 @@
     </section>
 
     <section
-      class="header-action-buttons"
       v-if="actions.length"
+      class="header-action-buttons"
     >
       <template
         v-for="(action, i) in actions"
@@ -135,21 +135,21 @@
         <a
           v-else-if="action.type === 'ujs-link'"
           :href="action.path"
-          data-method="post"
-          rel="nofollow"
           :class="action.cssClass"
           :key="i"
+          data-method="post"
+          rel="nofollow"
         >
           {{ action.label }}
         </a>
 
         <button
           v-else-if="action.type === 'button'"
-          @click="onClickAction(action)"
           :disabled="action.isLoading"
           :class="action.cssClass"
-          type="button"
           :key="i"
+          type="button"
+          @click="onClickAction(action)"
         >
           {{ action.label }}
           <i
@@ -162,11 +162,11 @@
       </template>
       <button
         v-if="hasSidebarButton"
+        id="toggleSidebar"
         type="button"
-        class="btn btn-default visible-xs-block
-visible-sm-block sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
+        class="btn btn-default d-block d-sm-none d-md-none
+sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
         aria-label="Toggle Sidebar"
-        id="toggleSidebar"
       >
         <i
           class="fa fa-angle-double-left"
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 6a2e05000e1..c42c4a1fbe7 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -1,85 +1,88 @@
 <script>
+/* This is a re-usable vue component for rendering a svg sprite
+  icon
 
-  /* This is a re-usable vue component for rendering a svg sprite
-    icon
+  Sample configuration:
 
-    Sample configuration:
+  <icon
+    name="retry"
+    :size="32"
+    css-classes="top"
+  />
 
-    <icon
-      name="retry"
-      :size="32"
-      css-classes="top"
-    />
+*/
+// only allow classes in images.scss e.g. s12
+const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
 
-  */
-  // only allow classes in images.scss e.g. s12
-  const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
-
-  export default {
-    props: {
-      name: {
-        type: String,
-        required: true,
-      },
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
 
-      size: {
-        type: Number,
-        required: false,
-        default: 16,
-        validator(value) {
-          return validSizes.includes(value);
-        },
+    size: {
+      type: Number,
+      required: false,
+      default: 16,
+      validator(value) {
+        return validSizes.includes(value);
       },
+    },
 
-      cssClasses: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
 
-      width: {
-        type: Number,
-        required: false,
-        default: null,
-      },
+    width: {
+      type: Number,
+      required: false,
+      default: null,
+    },
 
-      height: {
-        type: Number,
-        required: false,
-        default: null,
-      },
+    height: {
+      type: Number,
+      required: false,
+      default: null,
+    },
 
-      y: {
-        type: Number,
-        required: false,
-        default: null,
-      },
+    y: {
+      type: Number,
+      required: false,
+      default: null,
+    },
 
-      x: {
-        type: Number,
-        required: false,
-        default: null,
-      },
+    x: {
+      type: Number,
+      required: false,
+      default: null,
     },
+  },
 
-    computed: {
-      spriteHref() {
-        return `${gon.sprite_icons}#${this.name}`;
-      },
-      iconSizeClass() {
-        return this.size ? `s${this.size}` : '';
-      },
+  computed: {
+    spriteHref() {
+      return `${gon.sprite_icons}#${this.name}`;
+    },
+    iconTestClass() {
+      return `ic-${this.name}`;
+    },
+    iconSizeClass() {
+      return this.size ? `s${this.size}` : '';
     },
-  };
+  },
+};
 </script>
 
 <template>
   <svg
-    :class="[iconSizeClass, cssClasses]"
+    :class="[iconSizeClass, iconTestClass, cssClasses]"
     :width="width"
     :height="height"
     :x="x"
-    :y="y">
+    :y="y"
+  >
     <use v-bind="{ 'xlink:href':spriteHref }" />
   </svg>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue
index 0a30f467b08..4ffc811e714 100644
--- a/app/assets/javascripts/vue_shared/components/identicon.vue
+++ b/app/assets/javascripts/vue_shared/components/identicon.vue
@@ -17,7 +17,7 @@ export default {
   },
   computed: {
     /**
-     * This method is based on app/helpers/application_helper.rb#project_identicon
+     * This method is based on app/helpers/avatars_helper.rb#project_identicon
      */
     identiconStyles() {
       const allowedColors = [
@@ -43,9 +43,9 @@ export default {
 
 <template>
   <div
-    class="avatar identicon"
     :class="sizeClass"
-    :style="identiconStyles">
+    :style="identiconStyles"
+    class="avatar identicon">
     {{ identiconTitle }}
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
index 3d39b3ab173..ca8ce554588 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -33,11 +33,11 @@
 <template>
   <div class="issuable-note-warning">
     <icon
+      v-if="!isLockedAndConfidential"
       :name="warningIcon"
       :size="16"
       class="icon inline"
       aria-hidden="true"
-      v-if="!isLockedAndConfidential"
     />
 
     <span v-if="isLockedAndConfidential">
diff --git a/app/assets/javascripts/vue_shared/components/lib/utils/dom_utils.js b/app/assets/javascripts/vue_shared/components/lib/utils/dom_utils.js
new file mode 100644
index 00000000000..02f28da8bb0
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/lib/utils/dom_utils.js
@@ -0,0 +1,5 @@
+export function pixeliseValue(val) {
+  return val ? `${val}px` : '';
+}
+
+export default {};
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index e832d94d32f..2ff0c056b9c 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -54,28 +54,30 @@
 
 <template>
   <button
-    @click="onClick"
-    type="button"
     :class="containerClass"
     :disabled="loading || disabled"
+    type="button"
+    @click="onClick"
   >
     <transition name="fade">
       <loading-icon
         v-if="loading"
         :inline="true"
-        class="js-loading-button-icon"
         :class="{
           'append-right-5': label
         }"
+        class="js-loading-button-icon"
       />
     </transition>
     <transition name="fade">
-      <span
-        v-if="label"
-        class="js-loading-button-label"
-      >
-        {{ label }}
-      </span>
+      <slot>
+        <span
+          v-if="label"
+          class="js-loading-button-label"
+        >
+          {{ label }}
+        </span>
+      </slot>
     </transition>
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/loading_icon.vue b/app/assets/javascripts/vue_shared/components/loading_icon.vue
index 12a75e016d7..db22c5f02cd 100644
--- a/app/assets/javascripts/vue_shared/components/loading_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_icon.vue
@@ -35,10 +35,10 @@
     :is="rootElementType"
     class="loading-container text-center">
     <i
-      class="fa fa-spin fa-spinner"
       :class="cssClass"
-      aria-hidden="true"
       :aria-label="label"
+      class="fa fa-spin fa-spinner"
+      aria-hidden="true"
     >
     </i>
   </component>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 12c7d125062..fba67681777 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -62,7 +62,14 @@
       /*
         GLForm class handles all the toolbar buttons
       */
-      return new GLForm($(this.$refs['gl-form']), this.enableAutocomplete);
+      return new GLForm($(this.$refs['gl-form']), {
+        emojis: this.enableAutocomplete,
+        members: this.enableAutocomplete,
+        issues: this.enableAutocomplete,
+        mergeRequests: this.enableAutocomplete,
+        milestones: this.enableAutocomplete,
+        labels: this.enableAutocomplete,
+      });
     },
     beforeDestroy() {
       const glForm = $(this.$refs['gl-form']).data('glForm');
@@ -117,17 +124,17 @@
 
 <template>
   <div
-    class="md-area js-vue-markdown-field"
+    ref="gl-form"
     :class="{ 'prepend-top-default append-bottom-default': addSpacingClasses }"
-    ref="gl-form">
+    class="md-area js-vue-markdown-field">
     <markdown-header
       :preview-markdown="previewMarkdown"
       @preview-markdown="showPreviewTab"
       @write-markdown="showWriteTab"
     />
     <div
-      class="md-write-holder"
       v-show="!previewMarkdown"
+      class="md-write-holder"
     >
       <div class="zen-backdrop">
         <slot name="textarea"></slot>
@@ -137,8 +144,8 @@
           aria-label="Enter zen mode"
         >
           <icon
-            name="screen-normal"
             :size="32"
+            name="screen-normal"
           />
         </a>
         <markdown-toolbar
@@ -149,8 +156,8 @@
       </div>
     </div>
     <div
-      class="md md-preview-holder md-preview"
       v-show="previewMarkdown"
+      class="md md-preview-holder md-preview js-vue-md-preview"
     >
       <div
         ref="markdown-preview"
@@ -164,8 +171,8 @@
     <template v-if="previewMarkdown && !markdownPreviewLoading">
       <div
         v-if="referencedCommands"
-        v-html="referencedCommands"
         class="referenced-commands"
+        v-html="referencedCommands"
       >
       </div>
       <div
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index d91fe3cf0c5..83171ae50b8 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -27,20 +27,22 @@
       $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
     },
     methods: {
-      isMarkdownForm(form) {
-        return form && !form.find('.js-vue-markdown-field').length;
+      isValid(form) {
+        return !form ||
+          form.find('.js-vue-markdown-field').length ||
+          $(this.$el).closest('form') === form[0];
       },
 
       previewMarkdownTab(event, form) {
         if (event.target.blur) event.target.blur();
-        if (this.isMarkdownForm(form)) return;
+        if (!this.isValid(form)) return;
 
         this.$emit('preview-markdown');
       },
 
       writeMarkdownTab(event, form) {
         if (event.target.blur) event.target.blur();
-        if (this.isMarkdownForm(form)) return;
+        if (!this.isValid(form)) return;
 
         this.$emit('write-markdown');
       },
@@ -52,8 +54,8 @@
   <div class="md-header">
     <ul class="nav-links clearfix">
       <li
-        class="md-header-tab"
         :class="{ active: !previewMarkdown }"
+        class="md-header-tab"
       >
         <a
           class="js-write-link"
@@ -65,11 +67,11 @@
         </a>
       </li>
       <li
-        class="md-header-tab"
         :class="{ active: previewMarkdown }"
+        class="md-header-tab"
       >
         <a
-          class="js-preview-link"
+          class="js-preview-link js-md-preview-button"
           href="#md-preview-holder"
           tabindex="-1"
           @click.prevent="previewMarkdownTab($event)"
@@ -78,8 +80,8 @@
         </a>
       </li>
       <li
-        class="md-header-toolbar"
         :class="{ active: !previewMarkdown }"
+        class="md-header-toolbar"
       >
         <toolbar-button
           tag="**"
@@ -92,8 +94,8 @@
           icon="italic"
         />
         <toolbar-button
-          tag="> "
           :prepend="true"
+          tag="> "
           button-title="Insert a quote"
           icon="quote"
         />
@@ -104,20 +106,20 @@
           icon="code"
         />
         <toolbar-button
-          tag="* "
           :prepend="true"
+          tag="* "
           button-title="Add a bullet list"
           icon="list-bulleted"
         />
         <toolbar-button
-          tag="1. "
           :prepend="true"
+          tag="1. "
           button-title="Add a numbered list"
           icon="list-numbered"
         />
         <toolbar-button
-          tag="* [ ] "
           :prepend="true"
+          tag="* [ ] "
           button-title="Add a task list"
           icon="task-done"
         />
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index c0ee88bbf72..d63318f3da6 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -111,7 +111,7 @@
         Attach a file
       </button>
       <button
-        class="btn btn-default btn-xs hide button-cancel-uploading-files"
+        class="btn btn-default btn-sm hide button-cancel-uploading-files"
         type="button"
       >
         Cancel
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index 2d2d69ebeb2..9f1e009efdd 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -39,15 +39,15 @@
 <template>
   <button
     v-tooltip
-    type="button"
-    class="toolbar-btn js-md"
-    tabindex="-1"
-    data-container="body"
     :data-md-tag="tag"
     :data-md-block="tagBlock"
     :data-md-prepend="prepend"
     :title="buttonTitle"
     :aria-label="buttonTitle"
+    type="button"
+    class="toolbar-btn js-md"
+    tabindex="-1"
+    data-container="body"
   >
     <icon
       :name="icon"
diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.vue b/app/assets/javascripts/vue_shared/components/memory_graph.vue
index b07f6b07afe..522091ea889 100644
--- a/app/assets/javascripts/vue_shared/components/memory_graph.vue
+++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue
@@ -113,19 +113,19 @@ export default {
 <template>
   <div class="memory-graph-container">
     <svg
-      class="has-tooltip"
       :title="getFormattedMedian"
       :width="width"
       :height="height"
+      class="has-tooltip"
       xmlns="http://www.w3.org/2000/svg">
       <path
         :d="pathD"
         :viewBox="pathViewBox"
       />
       <circle
-        r="1.5"
         :cx="dotX"
         :cy="dotY"
+        r="1.5"
         tranform="translate(0 -1)"
       />
     </svg>
diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
index b33a0101dbf..99d61b5639d 100644
--- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
+++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
@@ -1,53 +1,53 @@
 <script>
-  import $ from 'jquery';
+import $ from 'jquery';
 
-  /**
-   * Given an array of tabs, renders non linked bootstrap tabs.
-   * When a tab is clicked it will trigger an event and provide the clicked scope.
-   *
-   * This component is used in apps that handle the API call.
-   * If you only need to change the URL this component should not be used.
-   *
-   * @example
-   * <navigation-tabs
-   *   :tabs="[
-   *   {
-   *      name: String,
-   *      scope: String,
-   *      count: Number || Undefined,
-   *      isActive: Boolean,
-   *    },
-   *   ]"
-   *   @onChangeTab="onChangeTab"
-   *   />
-   */
-  export default {
-    name: 'NavigationTabs',
-    props: {
-      tabs: {
-        type: Array,
-        required: true,
-      },
-      scope: {
-        type: String,
-        required: false,
-        default: '',
-      },
+/**
+ * Given an array of tabs, renders non linked bootstrap tabs.
+ * When a tab is clicked it will trigger an event and provide the clicked scope.
+ *
+ * This component is used in apps that handle the API call.
+ * If you only need to change the URL this component should not be used.
+ *
+ * @example
+ * <navigation-tabs
+ *   :tabs="[
+ *   {
+ *      name: String,
+ *      scope: String,
+ *      count: Number || Undefined || Null,
+ *      isActive: Boolean,
+ *    },
+ *   ]"
+ *   @onChangeTab="onChangeTab"
+ *   />
+ */
+export default {
+  name: 'NavigationTabs',
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
     },
-    mounted() {
-      $(document).trigger('init.scrolling-tabs');
+    scope: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  mounted() {
+    $(document).trigger('init.scrolling-tabs');
+  },
+  methods: {
+    shouldRenderBadge(count) {
+      // 0 is valid in a badge, but evaluates to false, we need to check for undefined or null
+      return !(count === undefined || count === null);
     },
-    methods: {
-      shouldRenderBadge(count) {
-        // 0 is valid in a badge, but evaluates to false, we need to check for undefined
-        return count !== undefined;
-      },
 
-      onTabClick(tab) {
-        this.$emit('onChangeTab', tab.scope);
-      },
+    onTabClick(tab) {
+      this.$emit('onChangeTab', tab.scope);
     },
-  };
+  },
+};
 </script>
 <template>
   <ul class="nav-links scrolling-tabs separator">
@@ -59,15 +59,15 @@
       }"
     >
       <a
+        :class="`js-${scope}-tab-${tab.scope}`"
         role="button"
         @click="onTabClick(tab)"
-        :class="`js-${scope}-tab-${tab.scope}`"
       >
         {{ tab.name }}
 
         <span
           v-if="shouldRenderBadge(tab.count)"
-          class="badge"
+          class="badge badge-pill"
         >
           {{ tab.count }}
         </span>
diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
index 50b1508691b..38115f268bb 100644
--- a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
@@ -54,7 +54,7 @@
         <div class="note-header">
           <div class="note-header-info">
             <a :href="getUserData.path">
-              <span class="hidden-xs">{{ getUserData.name }}</span>
+              <span class="d-none d-sm-inline-block">{{ getUserData.name }}</span>
               <span class="note-headline-light">@{{ getUserData.username }}</span>
             </a>
           </div>
diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
index 80e3db52cb0..2eb6c20b2c0 100644
--- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
@@ -14,11 +14,12 @@
 </template>
 
 <script>
-  import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
 
-  export default {
-    components: {
-      skeletonLoadingContainer,
-    },
-  };
+export default {
+  name: 'SkeletonNote',
+  components: {
+    skeletonLoadingContainer,
+  },
+};
 </script>
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index aac10f84087..2122d0a508e 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -1,51 +1,75 @@
 <script>
-  /**
-   * Common component to render a system note, icon and user information.
-   *
-   * This component needs to be used with a vuex store.
-   * That vuex store needs to have a `targetNoteHash` getter
-   *
-   * @example
-   * <system-note
-   *   :note="{
-   *     id: String,
-   *     author: Object,
-   *     createdAt: String,
-   *     note_html: String,
-   *     system_note_icon_name: String
-   *    }"
-   *   />
-   */
-  import { mapGetters } from 'vuex';
-  import noteHeader from '~/notes/components/note_header.vue';
-  import { spriteIcon } from '../../../lib/utils/common_utils';
+/**
+ * Common component to render a system note, icon and user information.
+ *
+ * This component needs to be used with a vuex store.
+ * That vuex store needs to have a `targetNoteHash` getter
+ *
+ * @example
+ * <system-note
+ *   :note="{
+ *     id: String,
+ *     author: Object,
+ *     createdAt: String,
+ *     note_html: String,
+ *     system_note_icon_name: String
+ *    }"
+ *   />
+ */
+import $ from 'jquery';
+import { mapGetters } from 'vuex';
+import noteHeader from '~/notes/components/note_header.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import { spriteIcon } from '../../../lib/utils/common_utils';
 
-  export default {
-    name: 'SystemNote',
-    components: {
-      noteHeader,
+const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
+
+export default {
+  name: 'SystemNote',
+  components: {
+    Icon,
+    noteHeader,
+  },
+  props: {
+    note: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      expanded: false,
+    };
+  },
+  computed: {
+    ...mapGetters(['targetNoteHash']),
+    noteAnchorId() {
+      return `note_${this.note.id}`;
+    },
+    isTargetNote() {
+      return this.targetNoteHash === this.noteAnchorId;
     },
-    props: {
-      note: {
-        type: Object,
-        required: true,
-      },
+    iconHtml() {
+      return spriteIcon(this.note.system_note_icon_name);
     },
-    computed: {
-      ...mapGetters([
-        'targetNoteHash',
-      ]),
-      noteAnchorId() {
-        return `note_${this.note.id}`;
-      },
-      isTargetNote() {
-        return this.targetNoteHash === this.noteAnchorId;
-      },
-      iconHtml() {
-        return spriteIcon(this.note.system_note_icon_name);
-      },
+    toggleIcon() {
+      return this.expanded ? 'chevron-up' : 'chevron-down';
     },
-  };
+    // following 2 methods taken from code in `collapseLongCommitList` of notes.js:
+    actionTextHtml() {
+      return $(this.note.note_html)
+        .unwrap()
+        .html();
+    },
+    hasMoreCommits() {
+      return (
+        $(this.note.note_html)
+          .filter('ul')
+          .children().length > MAX_VISIBLE_COMMIT_LIST_COUNT
+      );
+    },
+  },
+};
 </script>
 
 <template>
@@ -64,8 +88,35 @@
             :author="note.author"
             :created-at="note.created_at"
             :note-id="note.id"
-            :action-text-html="note.note_html"
-          />
+          >
+            <span v-html="actionTextHtml"></span>
+          </note-header>
+        </div>
+        <div class="note-body">
+          <div
+            :class="{
+              'system-note-commit-list': hasMoreCommits,
+              'hide-shade': expanded
+            }"
+            class="note-text"
+            v-html="note.note_html"
+          ></div>
+          <div
+            v-if="hasMoreCommits"
+            class="flex-list"
+          >
+            <div
+              class="system-note-commit-list-toggler flex-row"
+              @click="expanded = !expanded"
+            >
+              <Icon
+                :name="toggleIcon"
+                :size="8"
+                class="append-right-5"
+              />
+              <span>Toggle commit list</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
index abbe9a22717..8c2dcc2d902 100644
--- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue
+++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
@@ -82,9 +82,9 @@
 
 <template>
   <div
-    class="dragHandle"
     :class="className"
     :style="cursorStyle"
+    class="dragHandle"
     @mousedown="startDrag"
     @dblclick="resetSize"
   ></div>
diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
index 279cc1de5bb..97ca4d93bd7 100644
--- a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
+++ b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
@@ -85,7 +85,6 @@
 <template>
   <img
     v-tooltip
-    class="avatar"
     :class="{
       lazy: lazy,
       [avatarSizeClass]: true,
@@ -99,5 +98,6 @@
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
     :title="tooltipText"
+    class="avatar"
   />
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
index c35621c9ef3..a2a9a5e6987 100644
--- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
@@ -1,11 +1,11 @@
 <script>
-  import modal from './modal.vue';
+  import DeprecatedModal from './deprecated_modal.vue';
 
   export default {
     name: 'RecaptchaModal',
 
     components: {
-      modal,
+      DeprecatedModal,
     },
 
     props: {
@@ -65,11 +65,11 @@
 </script>
 
 <template>
-  <modal
-    kind="warning"
-    class="recaptcha-modal js-recaptcha-modal"
+  <deprecated-modal
     :hide-footer="true"
     :title="__('Please solve the reCAPTCHA')"
+    kind="warning"
+    class="recaptcha-modal js-recaptcha-modal"
     @cancel="close"
   >
     <div slot="body">
@@ -82,5 +82,5 @@
       >
       </div>
     </div>
-  </modal>
+  </deprecated-modal>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
index 3fcacd156c5..74998a4787d 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
@@ -97,8 +97,8 @@
 
 <template>
   <div
-    class="block"
     :class="blockClass"
+    class="block"
   >
     <div class="issuable-sidebar-header">
       <toggle-sidebar
@@ -107,8 +107,8 @@
       />
     </div>
     <collapsed-calendar-icon
-      class="sidebar-collapsed-icon"
       :text="collapsedText"
+      class="sidebar-collapsed-icon"
     />
     <div class="title">
       {{ label }}
@@ -116,7 +116,7 @@
         v-if="isLoading"
         :inline="true"
       />
-      <div class="pull-right">
+      <div class="float-right">
         <button
           v-if="editable && !editing"
           type="button"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
index 5ede53d8d01..a3fc358130f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
@@ -1,13 +1,14 @@
 <script>
+import $ from 'jquery';
 import { __ } from '~/locale';
 import LabelsSelect from '~/labels_select';
+import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import LoadingIcon from '../../loading_icon.vue';
 
 import DropdownTitle from './dropdown_title.vue';
 import DropdownValue from './dropdown_value.vue';
 import DropdownValueCollapsed from './dropdown_value_collapsed.vue';
 import DropdownButton from './dropdown_button.vue';
-import DropdownHiddenInput from './dropdown_hidden_input.vue';
 import DropdownHeader from './dropdown_header.vue';
 import DropdownSearchInput from './dropdown_search_input.vue';
 import DropdownFooter from './dropdown_footer.vue';
@@ -98,11 +99,18 @@ export default {
     this.labelsDropdown = new LabelsSelect(this.$refs.dropdownButton, {
       handleClick: this.handleClick,
     });
+    $(this.$refs.dropdown).on('hidden.gl.dropdown', this.handleDropdownHidden);
   },
   methods: {
     handleClick(label) {
       this.$emit('onLabelClick', label);
     },
+    handleCollapsedValueClick() {
+      this.$emit('toggleCollapse');
+    },
+    handleDropdownHidden() {
+      this.$emit('onDropdownClose');
+    },
   },
 };
 </script>
@@ -112,6 +120,7 @@ export default {
     <dropdown-value-collapsed
       v-if="showCreate"
       :labels="context.labels"
+      @onValueClick="handleCollapsedValueClick"
     />
     <dropdown-title
       :can-edit="canEdit"
@@ -131,9 +140,12 @@ export default {
         v-for="label in context.labels"
         :key="label.id"
         :name="hiddenInputName"
-        :label="label"
+        :value="label.id"
       />
-      <div class="dropdown">
+      <div
+        ref="dropdown"
+        class="dropdown"
+      >
         <dropdown-button
           :ability-name="abilityName"
           :field-name="hiddenInputName"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
index 47497c1de98..48d2f16f554 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
@@ -53,10 +53,7 @@ export default {
 
 <template>
   <button
-    type="button"
     ref="dropdownButton"
-    class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
-    data-toggle="dropdown"
     :class="{ 'js-extra-options': showExtraOptions }"
     :data-ability-name="abilityName"
     :data-field-name="fieldName"
@@ -64,6 +61,9 @@ export default {
     :data-labels="labelsPath"
     :data-namespace-path="namespace"
     :data-show-any="showExtraOptions"
+    type="button"
+    class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
+    data-toggle="dropdown"
   >
     <span class="dropdown-toggle-text">
       {{ dropdownToggleText }}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
index 34a07f33a23..fe895136ccc 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
@@ -19,9 +19,9 @@ export default {
   <div class="dropdown-page-two dropdown-new-label">
     <div class="dropdown-title">
       <button
+        :aria-label="__('Go back')"
         type="button"
         class="dropdown-title-button dropdown-menu-back"
-        :aria-label="__('Go back')"
       >
         <i
           aria-hidden="true"
@@ -32,9 +32,9 @@ export default {
       </button>
       {{ headerTitle }}
       <button
+        :aria-label="__('Close')"
         type="button"
         class="dropdown-title-button dropdown-menu-close"
-        :aria-label="__('Close')"
       >
         <i
           aria-hidden="true"
@@ -48,19 +48,19 @@ export default {
       <div class="dropdown-labels-error js-label-error"></div>
       <input
         id="new_label_name"
+        :placeholder="__('Name new label')"
         type="text"
         class="default-dropdown-input"
-        :placeholder="__('Name new label')"
       />
       <div class="suggest-colors suggest-colors-dropdown">
         <a
           v-for="(color, index) in suggestedColors"
-          href="#"
           :key="index"
           :data-color="color"
           :style="{
             backgroundColor: color,
           }"
+          href="#"
         >
           &nbsp;
         </a>
@@ -69,21 +69,21 @@ export default {
         <div class="dropdown-label-color-preview js-dropdown-label-color-preview"></div>
         <input
           id="new_label_color"
+          :placeholder="__('Assign custom color like #FF0000')"
           type="text"
           class="default-dropdown-input"
-          :placeholder="__('Assign custom color like #FF0000')"
         />
       </div>
       <div class="clearfix">
         <button
           type="button"
-          class="btn btn-primary pull-left js-new-label-btn disabled"
+          class="btn btn-primary float-left js-new-label-btn disabled"
         >
           {{ __('Create') }}
         </button>
         <button
           type="button"
-          class="btn btn-default pull-right js-cancel-label-btn"
+          class="btn btn-default float-right js-cancel-label-btn"
         >
           {{ __('Cancel') }}
         </button>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue
index 5f61e9fbe80..d64ad016f9b 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue
@@ -34,9 +34,9 @@ export default {
       </li>
       <li>
         <a
+          :href="labelsWebUrl"
           data-is-link="true"
           class="dropdown-external-link"
-          :href="labelsWebUrl"
         >
           {{ manageLabelsTitle }}
         </a>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
index 7664acdf19c..e98b6392827 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
@@ -6,9 +6,9 @@ export default {};
   <div class="dropdown-title">
     <span>{{ __('Assign labels') }}</span>
     <button
+      :aria-label="__('Close')"
       type="button"
       class="dropdown-title-button dropdown-menu-close"
-      :aria-label="__('Close')"
     >
       <i
         aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
index ae633460c95..80d65a2a534 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
@@ -5,10 +5,10 @@ export default {};
 <template>
   <div class="dropdown-input">
     <input
+      :placeholder="__('Search')"
       autocomplete="off"
       class="dropdown-input-field"
       type="search"
-      :placeholder="__('Search')"
     />
     <i
       aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue
index 7da82e90e29..9ac32ff13c6 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue
@@ -21,7 +21,7 @@ export default {
       </i>
       <button
         type="button"
-        class="edit-link btn btn-blank pull-right js-sidebar-dropdown-toggle"
+        class="edit-link btn btn-blank float-right js-sidebar-dropdown-toggle"
       >
         {{ __('Edit') }}
       </button>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
index 69d588eb25d..10e990f8a80 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
@@ -35,7 +35,12 @@ export default {
 </script>
 
 <template>
-  <div class="hide-collapsed value issuable-show-labels js-value">
+  <div
+    :class="{
+      'has-labels':!isEmpty,
+    }"
+    class="hide-collapsed value issuable-show-labels js-value"
+  >
     <span
       v-if="isEmpty"
       class="text-secondary"
@@ -43,18 +48,18 @@ export default {
       <slot>{{ __('None') }}</slot>
     </span>
     <a
-      v-else
       v-for="label in labels"
+      v-else
       :key="label.id"
       :href="labelFilterUrl(label)"
     >
       <span
         v-tooltip
-        class="label color-label"
-        data-placement="bottom"
-        data-container="body"
         :style="labelStyle(label)"
         :title="label.description"
+        class="badge color-label"
+        data-placement="bottom"
+        data-container="body"
       >
         {{ label.title }}
       </span>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
index 5cf728fe050..af297f3c408 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
@@ -26,16 +26,22 @@ export default {
       return labelsString;
     },
   },
+  methods: {
+    handleClick() {
+      this.$emit('onValueClick');
+    },
+  },
 };
 </script>
 
 <template>
   <div
     v-tooltip
+    :title="labelsList"
     class="sidebar-collapsed-icon"
     data-placement="left"
     data-container="body"
-    :title="labelsList"
+    @click="handleClick"
   >
     <i
       aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
index 8211d425b1f..ac2e99abe77 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
@@ -1,33 +1,48 @@
 <script>
-  export default {
-    name: 'ToggleSidebar',
-    props: {
-      collapsed: {
-        type: Boolean,
-        required: true,
-      },
+import { __ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  name: 'ToggleSidebar',
+  directives: {
+    tooltip,
+  },
+  props: {
+    collapsed: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    tooltipLabel() {
+      return this.collapsed ? __('Expand sidebar') : __('Collapse sidebar');
     },
-    methods: {
-      toggle() {
-        this.$emit('toggle');
-      },
+  },
+  methods: {
+    toggle() {
+      this.$emit('toggle');
     },
-  };
+  },
+};
 </script>
 
 <template>
   <button
+    v-tooltip
+    :title="tooltipLabel"
     type="button"
     class="btn btn-blank gutter-toggle btn-sidebar-action"
+    data-container="body"
+    data-placement="left"
     @click="toggle"
   >
     <i
-      aria-label="toggle collapse"
-      class="fa"
       :class="{
         'fa-angle-double-right': !collapsed,
         'fa-angle-double-left': collapsed
       }"
+      aria-label="toggle collapse"
+      class="fa"
     >
     </i>
   </button>
diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
index b06493e6c66..4a5ffbe5d5a 100644
--- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
+++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
@@ -9,7 +9,7 @@
       lines: {
         type: Number,
         required: false,
-        default: 6,
+        default: 3,
       },
     },
     computed: {
@@ -22,10 +22,10 @@
 
 <template>
   <div
-    class="animation-container"
     :class="{
       'animation-container-small': small,
     }"
+    class="animation-container"
   >
     <div
       v-for="(css, index) in lineClasses"
diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
index 86f06c8d266..b1c2df54ef6 100644
--- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
+++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
@@ -84,8 +84,8 @@ export default {
 
 <template>
   <div
-    class="stacked-progress-bar"
     :class="cssClass"
+    class="stacked-progress-bar"
   >
     <span
       v-if="!totalCount"
@@ -96,30 +96,30 @@ export default {
     <span
       v-tooltip
       v-if="successPercent"
-      class="status-green"
-      data-placement="bottom"
       :title="successTooltip"
       :style="successBarStyle"
+      class="status-green"
+      data-placement="bottom"
     >
       {{ successPercent }}%
     </span>
     <span
       v-tooltip
       v-if="neutralPercent"
-      class="status-neutral"
-      data-placement="bottom"
       :title="neutralTooltip"
       :style="neutralBarStyle"
+      class="status-neutral"
+      data-placement="bottom"
     >
       {{ neutralPercent }}%
     </span>
     <span
       v-tooltip
       v-if="failurePercent"
-      class="status-red"
-      data-placement="bottom"
       :title="failureTooltip"
       :style="failureBarStyle"
+      class="status-red"
+      data-placement="bottom"
     >
       {{ failurePercent }}%
     </span>
diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue
index 22fc5757447..8e9621c956f 100644
--- a/app/assets/javascripts/vue_shared/components/table_pagination.vue
+++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue
@@ -55,7 +55,7 @@
       },
       getItems() {
         const total = this.pageInfo.totalPages;
-        const page = this.pageInfo.page;
+        const { page } = this.pageInfo;
         const items = [];
 
         if (page > 1) {
@@ -124,15 +124,18 @@
             break;
         }
       },
+      hideOnSmallScreen(item) {
+        return !item.first && !item.last && !item.next && !item.prev && !item.active;
+      },
     },
   };
 </script>
 <template>
   <div
     v-if="showPagination"
-    class="gl-pagination"
+    class="gl-pagination prepend-top-default"
   >
-    <ul class="pagination clearfix">
+    <ul class="pagination justify-content-center">
       <li
         v-for="(item, index) in getItems"
         :key="index"
@@ -142,12 +145,17 @@
           'js-next-button': item.next,
           'js-last-button': item.last,
           'js-first-button': item.first,
+          'd-none d-md-block': hideOnSmallScreen(item),
           separator: item.separator,
           active: item.active,
-          disabled: item.disabled
+          disabled: item.disabled || item.separator
         }"
+        class="page-item"
       >
-        <a @click.prevent="changePage(item.title, item.disabled)">
+        <a
+          class="page-link"
+          @click.prevent="changePage(item.title, item.disabled)"
+        >
           {{ item.title }}
         </a>
       </li>
diff --git a/app/assets/javascripts/vue_shared/components/tabs/tab.vue b/app/assets/javascripts/vue_shared/components/tabs/tab.vue
new file mode 100644
index 00000000000..1c6011dcfd0
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/tabs/tab.vue
@@ -0,0 +1,47 @@
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    active: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      // props can't be updated, so we map it to data where we can
+      localActive: this.active,
+    };
+  },
+  watch: {
+    active() {
+      this.localActive = this.active;
+    },
+  },
+  created() {
+    this.isTab = true;
+  },
+  updated() {
+    if (this.$parent) {
+      this.$parent.$forceUpdate();
+    }
+  },
+};
+</script>
+
+<template>
+  <div
+    :class="{
+      active: localActive
+    }"
+    class="tab-pane"
+    role="tabpanel"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/tabs/tabs.js b/app/assets/javascripts/vue_shared/components/tabs/tabs.js
new file mode 100644
index 00000000000..9b9e4bb47bd
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/tabs/tabs.js
@@ -0,0 +1,76 @@
+export default {
+  props: {
+    stopPropagation: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      tabs: [],
+    };
+  },
+  mounted() {
+    this.updateTabs();
+  },
+  methods: {
+    updateTabs() {
+      this.tabs = this.$children.filter(child => child.isTab);
+      this.currentIndex = this.tabs.findIndex(tab => tab.localActive);
+    },
+    setTab(e, index) {
+      if (this.stopPropagation) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+
+      this.tabs[this.currentIndex].localActive = false;
+      this.tabs[index].localActive = true;
+
+      this.currentIndex = index;
+    },
+  },
+  render(h) {
+    const navItems = this.tabs.map((tab, i) =>
+      h(
+        'li',
+        {
+          key: i,
+        },
+        [
+          h(
+            'a',
+            {
+              class: tab.localActive ? 'active' : null,
+              attrs: {
+                href: '#',
+              },
+              on: {
+                click: e => this.setTab(e, i),
+              },
+            },
+            tab.$slots.title || tab.title,
+          ),
+        ],
+      ),
+    );
+    const nav = h(
+      'ul',
+      {
+        class: 'nav-links tab-links',
+      },
+      [navItems],
+    );
+    const content = h(
+      'div',
+      {
+        class: ['tab-content'],
+      },
+      [this.$slots.default],
+    );
+
+    return h('div', {}, [[nav], content]);
+  },
+};
diff --git a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
index bec4e7c99b6..368eeb6c453 100644
--- a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
+++ b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
@@ -40,7 +40,7 @@ export default {
     :class="cssClass"
     :title="tooltipTitle(time)"
     :data-placement="tooltipPlacement"
-    data-container="body">
-    {{ timeFormated(time) }}
+    data-container="body"
+    v-text="timeFormated(time)">
   </time>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index 09031d3ffa1..a897300b62b 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -63,26 +63,26 @@
   <label class="toggle-wrapper">
     <input
       v-if="name"
-      type="hidden"
       :name="name"
       :value="value"
+      type="hidden"
     />
     <button
-      type="button"
-      class="project-feature-toggle"
       :aria-label="ariaLabel"
       :class="{
         'is-checked': value,
         'is-disabled': disabledInput,
         'is-loading': isLoading
       }"
+      type="button"
+      class="project-feature-toggle"
       @click="toggleFeature"
     >
       <loadingIcon class="loading-icon" />
       <span class="toggle-icon">
         <icon
-          css-classes="toggle-icon-svg"
-          :name="toggleIcon"/>
+          :name="toggleIcon"
+          css-classes="toggle-icon-svg"/>
       </span>
     </button>
   </label>
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
index cc9cc46bb4c..3a413c74410 100644
--- 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
@@ -85,7 +85,6 @@ export default {
 <template>
   <img
     v-tooltip
-    class="avatar"
     :class="{
       lazy: lazy,
       [avatarSizeClass]: true,
@@ -99,5 +98,7 @@ export default {
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
     :title="tooltipText"
+    class="avatar"
+    data-boundary="window"
   />
 </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
index 6955d164def..01c36fec41a 100644
--- 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
@@ -84,8 +84,8 @@ export default {
 
 <template>
   <a
-    class="user-avatar-link"
-    :href="linkHref">
+    :href="linkHref"
+    class="user-avatar-link">
     <user-avatar-image
       :img-src="imgSrc"
       :img-alt="imgAlt"
@@ -94,8 +94,8 @@ export default {
       :tooltip-text="avatarTooltipText"
       :tooltip-placement="tooltipPlacement"
     /><span
-      v-if="shouldShowUsername"
       v-tooltip
+      v-if="shouldShowUsername"
       :title="tooltipText"
       :tooltip-placement="tooltipPlacement"
     >{{ username }}</span>
diff --git a/app/assets/javascripts/vue_shared/directives/popover.js b/app/assets/javascripts/vue_shared/directives/popover.js
index eb35294906b..c913bc34c68 100644
--- a/app/assets/javascripts/vue_shared/directives/popover.js
+++ b/app/assets/javascripts/vue_shared/directives/popover.js
@@ -17,6 +17,6 @@ export default {
   },
 
   unbind(el) {
-    $(el).popover('destroy');
+    $(el).popover('dispose');
   },
 };
diff --git a/app/assets/javascripts/vue_shared/directives/tooltip.js b/app/assets/javascripts/vue_shared/directives/tooltip.js
index b7f7e9fec15..4f2412ce520 100644
--- a/app/assets/javascripts/vue_shared/directives/tooltip.js
+++ b/app/assets/javascripts/vue_shared/directives/tooltip.js
@@ -2,14 +2,16 @@ import $ from 'jquery';
 
 export default {
   bind(el) {
-    $(el).tooltip();
+    $(el).tooltip({
+      trigger: 'hover',
+    });
   },
 
   componentUpdated(el) {
-    $(el).tooltip('fixTitle');
+    $(el).tooltip('_fixTitle');
   },
 
   unbind(el) {
-    $(el).tooltip('destroy');
+    $(el).tooltip('dispose');
   },
 };
diff --git a/app/assets/javascripts/vue_shared/models/assignee.js b/app/assets/javascripts/vue_shared/models/assignee.js
new file mode 100644
index 00000000000..4a29b0d0581
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/models/assignee.js
@@ -0,0 +1,13 @@
+export default class ListAssignee {
+  constructor(obj, defaultAvatar) {
+    this.id = obj.id;
+    this.name = obj.name;
+    this.username = obj.username;
+    this.avatar = obj.avatar_url || obj.avatar || defaultAvatar;
+    this.path = obj.path;
+    this.state = obj.state;
+    this.webUrl = obj.web_url || obj.webUrl;
+  }
+}
+
+window.ListAssignee = ListAssignee;
diff --git a/app/assets/javascripts/vue_shared/models/label.js b/app/assets/javascripts/vue_shared/models/label.js
index 70b9efe0c68..d29c7fe973a 100644
--- a/app/assets/javascripts/vue_shared/models/label.js
+++ b/app/assets/javascripts/vue_shared/models/label.js
@@ -1,4 +1,4 @@
-class ListLabel {
+export default class ListLabel {
   constructor(obj) {
     this.id = obj.id;
     this.title = obj.title;
diff --git a/app/assets/javascripts/vue_shared/translate.js b/app/assets/javascripts/vue_shared/translate.js
index 2c7886ec308..48c63373b77 100644
--- a/app/assets/javascripts/vue_shared/translate.js
+++ b/app/assets/javascripts/vue_shared/translate.js
@@ -13,7 +13,7 @@ export default (Vue) => {
 
         @param text The text to be translated
         @returns {String} The translated text
-      **/
+      */
       __,
       /**
         Translate the text with a number
@@ -24,7 +24,7 @@ export default (Vue) => {
         @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
@@ -36,7 +36,7 @@ export default (Vue) => {
                             (eg. 'Context')
         @param key Is the dynamic variable you want to be translated
         @returns {String} Translated context based text
-      **/
+      */
       s__,
       sprintf,
     },
diff --git a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
index b9693892f45..73b9131e5ba 100644
--- a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
+++ b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
@@ -28,7 +28,7 @@ Vue.http.interceptors.push((request, next) => {
     response.headers.forEach((value, key) => {
       headers[key] = value;
     });
-    // eslint-disable-next-line no-param-reassign
+
     response.headers = headers;
   });
 });
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index f68a4f28714..0138c9be803 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -1,4 +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, class-methods-use-this */
+/* eslint-disable func-names, wrap-iife, prefer-arrow-callback, no-unused-vars, consistent-return, camelcase, comma-dangle, max-len, class-methods-use-this */
 
 // Zen Mode (full screen) textarea
 //
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 0665622fe4a..f2950308019 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -37,7 +37,11 @@
 /*
  * Code highlight
  */
-@import "highlight/**/*";
+@import "highlight/dark";
+@import "highlight/monokai";
+@import "highlight/solarized_dark";
+@import "highlight/solarized_light";
+@import "highlight/white";
 
 /*
  * Styles for JS behaviors.
diff --git a/app/assets/stylesheets/bootstrap.scss b/app/assets/stylesheets/bootstrap.scss
new file mode 100644
index 00000000000..a040c2f8c20
--- /dev/null
+++ b/app/assets/stylesheets/bootstrap.scss
@@ -0,0 +1,37 @@
+/*
+ *  Includes specific styles from the bootstrap4 foler in node_modules
+ */
+
+@import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/mixins";
+@import "../../../node_modules/bootstrap/scss/root";
+@import "../../../node_modules/bootstrap/scss/reboot";
+@import "../../../node_modules/bootstrap/scss/type";
+@import "../../../node_modules/bootstrap/scss/images";
+@import "../../../node_modules/bootstrap/scss/code";
+@import "../../../node_modules/bootstrap/scss/grid";
+@import "../../../node_modules/bootstrap/scss/tables";
+@import "../../../node_modules/bootstrap/scss/forms";
+@import "../../../node_modules/bootstrap/scss/buttons";
+@import "../../../node_modules/bootstrap/scss/transitions";
+@import "../../../node_modules/bootstrap/scss/dropdown";
+@import "../../../node_modules/bootstrap/scss/button-group";
+@import "../../../node_modules/bootstrap/scss/input-group";
+@import "../../../node_modules/bootstrap/scss/custom-forms";
+@import "../../../node_modules/bootstrap/scss/nav";
+@import "../../../node_modules/bootstrap/scss/navbar";
+@import "../../../node_modules/bootstrap/scss/card";
+@import "../../../node_modules/bootstrap/scss/breadcrumb";
+@import "../../../node_modules/bootstrap/scss/pagination";
+@import "../../../node_modules/bootstrap/scss/badge";
+@import "../../../node_modules/bootstrap/scss/alert";
+@import "../../../node_modules/bootstrap/scss/progress";
+@import "../../../node_modules/bootstrap/scss/media";
+@import "../../../node_modules/bootstrap/scss/list-group";
+@import "../../../node_modules/bootstrap/scss/close";
+@import "../../../node_modules/bootstrap/scss/modal";
+@import "../../../node_modules/bootstrap/scss/tooltip";
+@import "../../../node_modules/bootstrap/scss/popover";
+@import "../../../node_modules/bootstrap/scss/utilities";
+@import "../../../node_modules/bootstrap/scss/print";
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
new file mode 100644
index 00000000000..f610a1aea08
--- /dev/null
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -0,0 +1,335 @@
+/*
+ *  Scss to help with bootstrap 3 to 4 migration
+ */
+
+$text-color: $gl-text-color;
+
+$brand-primary: $gl-primary;
+$brand-success: $gl-success;
+$brand-info: $gl-info;
+$brand-warning: $gl-warning;
+$brand-danger: $gl-danger;
+
+$border-radius-base: 3px !default;
+
+$modal-body-bg: $white-light;
+$input-border: $border-color;
+$input-border-focus: $focus-border-color;
+
+$padding-base-vertical: $gl-vert-padding;
+$padding-base-horizontal: $gl-padding;
+
+html {
+  // Override default font size used in bs4
+  font-size: 14px;
+}
+
+legend {
+  border-bottom: 1px solid $border-color;
+  margin-bottom: 20px;
+}
+
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"],
+[role="button"] {
+  // Override bootstrap reboot
+  -webkit-appearance: inherit;
+  cursor: pointer;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $gl-text-color;
+  font-weight: 600;
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+h5,
+.h5 {
+  font-size: $gl-font-size;
+}
+
+input[type="file"] {
+  // Bootstrap 4 file input height is taller by default
+  // which makes them look ugly
+  line-height: 1;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+a {
+  color: $gl-link-color;
+}
+
+hr {
+  overflow: hidden;
+}
+
+.form-group.row .col-form-label {
+  padding-top: 0;
+  // Bootstrap 4 aligns labels to the left
+  // for horizontal forms
+  @include media-breakpoint-up(md) {
+    text-align: right;
+  }
+}
+
+kbd {
+  display: inline-block;
+}
+
+code {
+  padding: 2px 4px;
+  color: $red-600;
+  background-color: $red-100;
+  border-radius: 3px;
+
+  .code > & {
+    background-color: inherit;
+    padding: unset;
+  }
+
+  .build-trace & {
+    background-color: inherit;
+    padding: inherit;
+  }
+}
+
+table {
+  // Remove any table border lines
+  border-spacing: 0;
+}
+
+.popover {
+  font-size: 14px;
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .d#{$infix}-table-header-group { display: table-header-group !important; }
+  }
+}
+
+.text-secondary {
+  // Override Bootstrap's light secondary color
+  // We have to use !important because bootstrap has that set as well
+  color: $gl-text-color-secondary !important;
+}
+
+.bg-success,
+.bg-primary,
+.bg-info,
+.bg-danger,
+.bg-warning {
+  .card-header {
+    color: $white-light;
+  }
+}
+
+// Polyfill deprecated selectors
+
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.hide {
+  display: none;
+}
+
+.dropdown-toggle::after,
+.dropright .dropdown-menu-toggle::after {
+  // Remove bootstrap's dropdown caret
+  display: none;
+}
+
+h3.popover-header {
+  // Default bootstrap popovers use <h3>
+  // which we default to having a top margin
+  margin-top: 0;
+}
+
+// Add to .label so that old system notes that are saved to the db
+// will still receive the correct styling
+.badge,
+.label {
+  padding: 4px 5px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: $gl-font-weight-normal;
+  display: inline-block;
+
+  &.badge-gray {
+    background-color: $label-gray-bg;
+    color: $gl-text-color;
+    text-shadow: none;
+  }
+
+  &.badge-inverse {
+    background-color: $label-inverse-bg;
+  }
+}
+
+.divider {
+  @extend .dropdown-divider;
+}
+
+.info-well {
+  background: $theme-gray-50;
+  color: $gl-text-color;
+  border: 1px solid $border-color;
+  border-radius: 4px;
+  margin-bottom: 16px;
+
+  .well-segment {
+    padding: 16px;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $well-inner-border;
+    }
+
+    p,
+    ol,
+    ul,
+    .form-group {
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .badge.badge-gray {
+    background-color: $well-expand-item;
+  }
+}
+
+.card {
+  .card-title {
+    margin-bottom: 0;
+  }
+
+  &.card-without-border {
+    @extend .border-0;
+  }
+
+  &.card-without-margin {
+    margin: 0;
+  }
+
+  &.bg-light {
+    @extend .border-0;
+  }
+}
+
+.card-header {
+  h3.card-title,
+  h4.card-title {
+    margin-top: 0;
+  }
+}
+
+.nav-tabs {
+  // Override bootstrap's default border
+  border-bottom: 0;
+
+  .nav-link {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  .nav-item {
+    margin-bottom: 0;
+  }
+}
+
+pre code {
+  white-space: pre-wrap;
+}
+
+.alert,
+.flash-notice {
+  border-radius: 0;
+}
+
+.alert-success {
+  background-color: $green-500;
+  border-color: $green-500;
+}
+
+.alert-info {
+  background-color: $blue-500;
+  border-color: $blue-500;
+}
+
+.alert-warning {
+  background-color: $orange-500;
+  border-color: $orange-500;
+}
+
+.alert-danger {
+  background-color: $red-500;
+  border-color: $red-500;
+}
+
+.alert-success,
+.alert-info,
+.alert-warning,
+.alert-danger,
+.flash-notice {
+  color: $white-light;
+
+  h4,
+  a:not(.btn),
+  .alert-link {
+    color: $white-light;
+  }
+}
+
+input[type=color].form-control {
+  height: $input-height;
+}
+
+.toggle-sidebar-button {
+  .collapse-text,
+  .icon-angle-double-left,
+  .icon-angle-double-right {
+    color: $gl-text-color-secondary;
+  }
+}
+
+.project-templates-buttons {
+  .btn {
+    vertical-align: unset;
+  }
+}
diff --git a/app/assets/stylesheets/emoji_sprites.scss b/app/assets/stylesheets/emoji_sprites.scss
new file mode 100644
index 00000000000..8f6134c474b
--- /dev/null
+++ b/app/assets/stylesheets/emoji_sprites.scss
@@ -0,0 +1,5403 @@
+// Automatic Prettier Formatting for this big file
+// scss-lint:disable EmptyLineBetweenBlocks
+.emoji-zzz {
+  background-position: 0 0;
+}
+.emoji-1234 {
+  background-position: -20px 0;
+}
+.emoji-1F627 {
+  background-position: 0 -20px;
+}
+.emoji-8ball {
+  background-position: -20px -20px;
+}
+.emoji-a {
+  background-position: -40px 0;
+}
+.emoji-ab {
+  background-position: -40px -20px;
+}
+.emoji-abc {
+  background-position: 0 -40px;
+}
+.emoji-abcd {
+  background-position: -20px -40px;
+}
+.emoji-accept {
+  background-position: -40px -40px;
+}
+.emoji-aerial_tramway {
+  background-position: -60px 0;
+}
+.emoji-airplane {
+  background-position: -60px -20px;
+}
+.emoji-airplane_arriving {
+  background-position: -60px -40px;
+}
+.emoji-airplane_departure {
+  background-position: 0 -60px;
+}
+.emoji-airplane_small {
+  background-position: -20px -60px;
+}
+.emoji-alarm_clock {
+  background-position: -40px -60px;
+}
+.emoji-alembic {
+  background-position: -60px -60px;
+}
+.emoji-alien {
+  background-position: -80px 0;
+}
+.emoji-ambulance {
+  background-position: -80px -20px;
+}
+.emoji-amphora {
+  background-position: -80px -40px;
+}
+.emoji-anchor {
+  background-position: -80px -60px;
+}
+.emoji-angel {
+  background-position: 0 -80px;
+}
+.emoji-angel_tone1 {
+  background-position: -20px -80px;
+}
+.emoji-angel_tone2 {
+  background-position: -40px -80px;
+}
+.emoji-angel_tone3 {
+  background-position: -60px -80px;
+}
+.emoji-angel_tone4 {
+  background-position: -80px -80px;
+}
+.emoji-angel_tone5 {
+  background-position: -100px 0;
+}
+.emoji-anger {
+  background-position: -100px -20px;
+}
+.emoji-anger_right {
+  background-position: -100px -40px;
+}
+.emoji-angry {
+  background-position: -100px -60px;
+}
+.emoji-ant {
+  background-position: -100px -80px;
+}
+.emoji-apple {
+  background-position: 0 -100px;
+}
+.emoji-aquarius {
+  background-position: -20px -100px;
+}
+.emoji-aries {
+  background-position: -40px -100px;
+}
+.emoji-arrow_backward {
+  background-position: -60px -100px;
+}
+.emoji-arrow_double_down {
+  background-position: -80px -100px;
+}
+.emoji-arrow_double_up {
+  background-position: -100px -100px;
+}
+.emoji-arrow_down {
+  background-position: -120px 0;
+}
+.emoji-arrow_down_small {
+  background-position: -120px -20px;
+}
+.emoji-arrow_forward {
+  background-position: -120px -40px;
+}
+.emoji-arrow_heading_down {
+  background-position: -120px -60px;
+}
+.emoji-arrow_heading_up {
+  background-position: -120px -80px;
+}
+.emoji-arrow_left {
+  background-position: -120px -100px;
+}
+.emoji-arrow_lower_left {
+  background-position: 0 -120px;
+}
+.emoji-arrow_lower_right {
+  background-position: -20px -120px;
+}
+.emoji-arrow_right {
+  background-position: -40px -120px;
+}
+.emoji-arrow_right_hook {
+  background-position: -60px -120px;
+}
+.emoji-arrow_up {
+  background-position: -80px -120px;
+}
+.emoji-arrow_up_down {
+  background-position: -100px -120px;
+}
+.emoji-arrow_up_small {
+  background-position: -120px -120px;
+}
+.emoji-arrow_upper_left {
+  background-position: -140px 0;
+}
+.emoji-arrow_upper_right {
+  background-position: -140px -20px;
+}
+.emoji-arrows_clockwise {
+  background-position: -140px -40px;
+}
+.emoji-arrows_counterclockwise {
+  background-position: -140px -60px;
+}
+.emoji-art {
+  background-position: -140px -80px;
+}
+.emoji-articulated_lorry {
+  background-position: -140px -100px;
+}
+.emoji-asterisk {
+  background-position: -140px -120px;
+}
+.emoji-astonished {
+  background-position: 0 -140px;
+}
+.emoji-athletic_shoe {
+  background-position: -20px -140px;
+}
+.emoji-atm {
+  background-position: -40px -140px;
+}
+.emoji-atom {
+  background-position: -60px -140px;
+}
+.emoji-avocado {
+  background-position: -80px -140px;
+}
+.emoji-b {
+  background-position: -100px -140px;
+}
+.emoji-baby {
+  background-position: -120px -140px;
+}
+.emoji-baby_bottle {
+  background-position: -140px -140px;
+}
+.emoji-baby_chick {
+  background-position: -160px 0;
+}
+.emoji-baby_symbol {
+  background-position: -160px -20px;
+}
+.emoji-baby_tone1 {
+  background-position: -160px -40px;
+}
+.emoji-baby_tone2 {
+  background-position: -160px -60px;
+}
+.emoji-baby_tone3 {
+  background-position: -160px -80px;
+}
+.emoji-baby_tone4 {
+  background-position: -160px -100px;
+}
+.emoji-baby_tone5 {
+  background-position: -160px -120px;
+}
+.emoji-back {
+  background-position: -160px -140px;
+}
+.emoji-bacon {
+  background-position: 0 -160px;
+}
+.emoji-badminton {
+  background-position: -20px -160px;
+}
+.emoji-baggage_claim {
+  background-position: -40px -160px;
+}
+.emoji-balloon {
+  background-position: -60px -160px;
+}
+.emoji-ballot_box {
+  background-position: -80px -160px;
+}
+.emoji-ballot_box_with_check {
+  background-position: -100px -160px;
+}
+.emoji-bamboo {
+  background-position: -120px -160px;
+}
+.emoji-banana {
+  background-position: -140px -160px;
+}
+.emoji-bangbang {
+  background-position: -160px -160px;
+}
+.emoji-bank {
+  background-position: -180px 0;
+}
+.emoji-bar_chart {
+  background-position: -180px -20px;
+}
+.emoji-barber {
+  background-position: -180px -40px;
+}
+.emoji-baseball {
+  background-position: -180px -60px;
+}
+.emoji-basketball {
+  background-position: -180px -80px;
+}
+.emoji-basketball_player {
+  background-position: -180px -100px;
+}
+.emoji-basketball_player_tone1 {
+  background-position: -180px -120px;
+}
+.emoji-basketball_player_tone2 {
+  background-position: -180px -140px;
+}
+.emoji-basketball_player_tone3 {
+  background-position: -180px -160px;
+}
+.emoji-basketball_player_tone4 {
+  background-position: 0 -180px;
+}
+.emoji-basketball_player_tone5 {
+  background-position: -20px -180px;
+}
+.emoji-bat {
+  background-position: -40px -180px;
+}
+.emoji-bath {
+  background-position: -60px -180px;
+}
+.emoji-bath_tone1 {
+  background-position: -80px -180px;
+}
+.emoji-bath_tone2 {
+  background-position: -100px -180px;
+}
+.emoji-bath_tone3 {
+  background-position: -120px -180px;
+}
+.emoji-bath_tone4 {
+  background-position: -140px -180px;
+}
+.emoji-bath_tone5 {
+  background-position: -160px -180px;
+}
+.emoji-bathtub {
+  background-position: -180px -180px;
+}
+.emoji-battery {
+  background-position: -200px 0;
+}
+.emoji-beach {
+  background-position: -200px -20px;
+}
+.emoji-beach_umbrella {
+  background-position: -200px -40px;
+}
+.emoji-bear {
+  background-position: -200px -60px;
+}
+.emoji-bed {
+  background-position: -200px -80px;
+}
+.emoji-bee {
+  background-position: -200px -100px;
+}
+.emoji-beer {
+  background-position: -200px -120px;
+}
+.emoji-beers {
+  background-position: -200px -140px;
+}
+.emoji-beetle {
+  background-position: -200px -160px;
+}
+.emoji-beginner {
+  background-position: -200px -180px;
+}
+.emoji-bell {
+  background-position: 0 -200px;
+}
+.emoji-bellhop {
+  background-position: -20px -200px;
+}
+.emoji-bento {
+  background-position: -40px -200px;
+}
+.emoji-bicyclist {
+  background-position: -60px -200px;
+}
+.emoji-bicyclist_tone1 {
+  background-position: -80px -200px;
+}
+.emoji-bicyclist_tone2 {
+  background-position: -100px -200px;
+}
+.emoji-bicyclist_tone3 {
+  background-position: -120px -200px;
+}
+.emoji-bicyclist_tone4 {
+  background-position: -140px -200px;
+}
+.emoji-bicyclist_tone5 {
+  background-position: -160px -200px;
+}
+.emoji-bike {
+  background-position: -180px -200px;
+}
+.emoji-bikini {
+  background-position: -200px -200px;
+}
+.emoji-biohazard {
+  background-position: -220px 0;
+}
+.emoji-bird {
+  background-position: -220px -20px;
+}
+.emoji-birthday {
+  background-position: -220px -40px;
+}
+.emoji-black_circle {
+  background-position: -220px -60px;
+}
+.emoji-black_heart {
+  background-position: -220px -80px;
+}
+.emoji-black_joker {
+  background-position: -220px -100px;
+}
+.emoji-black_large_square {
+  background-position: -220px -120px;
+}
+.emoji-black_medium_small_square {
+  background-position: -220px -140px;
+}
+.emoji-black_medium_square {
+  background-position: -220px -160px;
+}
+.emoji-black_nib {
+  background-position: -220px -180px;
+}
+.emoji-black_small_square {
+  background-position: -220px -200px;
+}
+.emoji-black_square_button {
+  background-position: 0 -220px;
+}
+.emoji-blossom {
+  background-position: -20px -220px;
+}
+.emoji-blowfish {
+  background-position: -40px -220px;
+}
+.emoji-blue_book {
+  background-position: -60px -220px;
+}
+.emoji-blue_car {
+  background-position: -80px -220px;
+}
+.emoji-blue_heart {
+  background-position: -100px -220px;
+}
+.emoji-blush {
+  background-position: -120px -220px;
+}
+.emoji-boar {
+  background-position: -140px -220px;
+}
+.emoji-bomb {
+  background-position: -160px -220px;
+}
+.emoji-book {
+  background-position: -180px -220px;
+}
+.emoji-bookmark {
+  background-position: -200px -220px;
+}
+.emoji-bookmark_tabs {
+  background-position: -220px -220px;
+}
+.emoji-books {
+  background-position: -240px 0;
+}
+.emoji-boom {
+  background-position: -240px -20px;
+}
+.emoji-boot {
+  background-position: -240px -40px;
+}
+.emoji-bouquet {
+  background-position: -240px -60px;
+}
+.emoji-bow {
+  background-position: -240px -80px;
+}
+.emoji-bow_and_arrow {
+  background-position: -240px -100px;
+}
+.emoji-bow_tone1 {
+  background-position: -240px -120px;
+}
+.emoji-bow_tone2 {
+  background-position: -240px -140px;
+}
+.emoji-bow_tone3 {
+  background-position: -240px -160px;
+}
+.emoji-bow_tone4 {
+  background-position: -240px -180px;
+}
+.emoji-bow_tone5 {
+  background-position: -240px -200px;
+}
+.emoji-bowling {
+  background-position: -240px -220px;
+}
+.emoji-boxing_glove {
+  background-position: 0 -240px;
+}
+.emoji-boy {
+  background-position: -20px -240px;
+}
+.emoji-boy_tone1 {
+  background-position: -40px -240px;
+}
+.emoji-boy_tone2 {
+  background-position: -60px -240px;
+}
+.emoji-boy_tone3 {
+  background-position: -80px -240px;
+}
+.emoji-boy_tone4 {
+  background-position: -100px -240px;
+}
+.emoji-boy_tone5 {
+  background-position: -120px -240px;
+}
+.emoji-bread {
+  background-position: -140px -240px;
+}
+.emoji-bride_with_veil {
+  background-position: -160px -240px;
+}
+.emoji-bride_with_veil_tone1 {
+  background-position: -180px -240px;
+}
+.emoji-bride_with_veil_tone2 {
+  background-position: -200px -240px;
+}
+.emoji-bride_with_veil_tone3 {
+  background-position: -220px -240px;
+}
+.emoji-bride_with_veil_tone4 {
+  background-position: -240px -240px;
+}
+.emoji-bride_with_veil_tone5 {
+  background-position: -260px 0;
+}
+.emoji-bridge_at_night {
+  background-position: -260px -20px;
+}
+.emoji-briefcase {
+  background-position: -260px -40px;
+}
+.emoji-broken_heart {
+  background-position: -260px -60px;
+}
+.emoji-bug {
+  background-position: -260px -80px;
+}
+.emoji-bulb {
+  background-position: -260px -100px;
+}
+.emoji-bullettrain_front {
+  background-position: -260px -120px;
+}
+.emoji-bullettrain_side {
+  background-position: -260px -140px;
+}
+.emoji-burrito {
+  background-position: -260px -160px;
+}
+.emoji-bus {
+  background-position: -260px -180px;
+}
+.emoji-busstop {
+  background-position: -260px -200px;
+}
+.emoji-bust_in_silhouette {
+  background-position: -260px -220px;
+}
+.emoji-busts_in_silhouette {
+  background-position: -260px -240px;
+}
+.emoji-butterfly {
+  background-position: 0 -260px;
+}
+.emoji-cactus {
+  background-position: -20px -260px;
+}
+.emoji-cake {
+  background-position: -40px -260px;
+}
+.emoji-calendar {
+  background-position: -60px -260px;
+}
+.emoji-calendar_spiral {
+  background-position: -80px -260px;
+}
+.emoji-call_me {
+  background-position: -100px -260px;
+}
+.emoji-call_me_tone1 {
+  background-position: -120px -260px;
+}
+.emoji-call_me_tone2 {
+  background-position: -140px -260px;
+}
+.emoji-call_me_tone3 {
+  background-position: -160px -260px;
+}
+.emoji-call_me_tone4 {
+  background-position: -180px -260px;
+}
+.emoji-call_me_tone5 {
+  background-position: -200px -260px;
+}
+.emoji-calling {
+  background-position: -220px -260px;
+}
+.emoji-camel {
+  background-position: -240px -260px;
+}
+.emoji-camera {
+  background-position: -260px -260px;
+}
+.emoji-camera_with_flash {
+  background-position: -280px 0;
+}
+.emoji-camping {
+  background-position: -280px -20px;
+}
+.emoji-cancer {
+  background-position: -280px -40px;
+}
+.emoji-candle {
+  background-position: -280px -60px;
+}
+.emoji-candy {
+  background-position: -280px -80px;
+}
+.emoji-canoe {
+  background-position: -280px -100px;
+}
+.emoji-capital_abcd {
+  background-position: -280px -120px;
+}
+.emoji-capricorn {
+  background-position: -280px -140px;
+}
+.emoji-card_box {
+  background-position: -280px -160px;
+}
+.emoji-card_index {
+  background-position: -280px -180px;
+}
+.emoji-carousel_horse {
+  background-position: -280px -200px;
+}
+.emoji-carrot {
+  background-position: -280px -220px;
+}
+.emoji-cartwheel {
+  background-position: -280px -240px;
+}
+.emoji-cartwheel_tone1 {
+  background-position: -280px -260px;
+}
+.emoji-cartwheel_tone2 {
+  background-position: 0 -280px;
+}
+.emoji-cartwheel_tone3 {
+  background-position: -20px -280px;
+}
+.emoji-cartwheel_tone4 {
+  background-position: -40px -280px;
+}
+.emoji-cartwheel_tone5 {
+  background-position: -60px -280px;
+}
+.emoji-cat {
+  background-position: -80px -280px;
+}
+.emoji-cat2 {
+  background-position: -100px -280px;
+}
+.emoji-cd {
+  background-position: -120px -280px;
+}
+.emoji-chains {
+  background-position: -140px -280px;
+}
+.emoji-champagne {
+  background-position: -160px -280px;
+}
+.emoji-champagne_glass {
+  background-position: -180px -280px;
+}
+.emoji-chart {
+  background-position: -200px -280px;
+}
+.emoji-chart_with_downwards_trend {
+  background-position: -220px -280px;
+}
+.emoji-chart_with_upwards_trend {
+  background-position: -240px -280px;
+}
+.emoji-checkered_flag {
+  background-position: -260px -280px;
+}
+.emoji-cheese {
+  background-position: -280px -280px;
+}
+.emoji-cherries {
+  background-position: -300px 0;
+}
+.emoji-cherry_blossom {
+  background-position: -300px -20px;
+}
+.emoji-chestnut {
+  background-position: -300px -40px;
+}
+.emoji-chicken {
+  background-position: -300px -60px;
+}
+.emoji-children_crossing {
+  background-position: -300px -80px;
+}
+.emoji-chipmunk {
+  background-position: -300px -100px;
+}
+.emoji-chocolate_bar {
+  background-position: -300px -120px;
+}
+.emoji-christmas_tree {
+  background-position: -300px -140px;
+}
+.emoji-church {
+  background-position: -300px -160px;
+}
+.emoji-cinema {
+  background-position: -300px -180px;
+}
+.emoji-circus_tent {
+  background-position: -300px -200px;
+}
+.emoji-city_dusk {
+  background-position: -300px -220px;
+}
+.emoji-city_sunset {
+  background-position: -300px -240px;
+}
+.emoji-cityscape {
+  background-position: -300px -260px;
+}
+.emoji-cl {
+  background-position: -300px -280px;
+}
+.emoji-clap {
+  background-position: 0 -300px;
+}
+.emoji-clap_tone1 {
+  background-position: -20px -300px;
+}
+.emoji-clap_tone2 {
+  background-position: -40px -300px;
+}
+.emoji-clap_tone3 {
+  background-position: -60px -300px;
+}
+.emoji-clap_tone4 {
+  background-position: -80px -300px;
+}
+.emoji-clap_tone5 {
+  background-position: -100px -300px;
+}
+.emoji-clapper {
+  background-position: -120px -300px;
+}
+.emoji-classical_building {
+  background-position: -140px -300px;
+}
+.emoji-clipboard {
+  background-position: -160px -300px;
+}
+.emoji-clock {
+  background-position: -180px -300px;
+}
+.emoji-clock1 {
+  background-position: -200px -300px;
+}
+.emoji-clock10 {
+  background-position: -220px -300px;
+}
+.emoji-clock1030 {
+  background-position: -240px -300px;
+}
+.emoji-clock11 {
+  background-position: -260px -300px;
+}
+.emoji-clock1130 {
+  background-position: -280px -300px;
+}
+.emoji-clock12 {
+  background-position: -300px -300px;
+}
+.emoji-clock1230 {
+  background-position: -320px 0;
+}
+.emoji-clock130 {
+  background-position: -320px -20px;
+}
+.emoji-clock2 {
+  background-position: -320px -40px;
+}
+.emoji-clock230 {
+  background-position: -320px -60px;
+}
+.emoji-clock3 {
+  background-position: -320px -80px;
+}
+.emoji-clock330 {
+  background-position: -320px -100px;
+}
+.emoji-clock4 {
+  background-position: -320px -120px;
+}
+.emoji-clock430 {
+  background-position: -320px -140px;
+}
+.emoji-clock5 {
+  background-position: -320px -160px;
+}
+.emoji-clock530 {
+  background-position: -320px -180px;
+}
+.emoji-clock6 {
+  background-position: -320px -200px;
+}
+.emoji-clock630 {
+  background-position: -320px -220px;
+}
+.emoji-clock7 {
+  background-position: -320px -240px;
+}
+.emoji-clock730 {
+  background-position: -320px -260px;
+}
+.emoji-clock8 {
+  background-position: -320px -280px;
+}
+.emoji-clock830 {
+  background-position: -320px -300px;
+}
+.emoji-clock9 {
+  background-position: 0 -320px;
+}
+.emoji-clock930 {
+  background-position: -20px -320px;
+}
+.emoji-closed_book {
+  background-position: -40px -320px;
+}
+.emoji-closed_lock_with_key {
+  background-position: -60px -320px;
+}
+.emoji-closed_umbrella {
+  background-position: -80px -320px;
+}
+.emoji-cloud {
+  background-position: -100px -320px;
+}
+.emoji-cloud_lightning {
+  background-position: -120px -320px;
+}
+.emoji-cloud_rain {
+  background-position: -140px -320px;
+}
+.emoji-cloud_snow {
+  background-position: -160px -320px;
+}
+.emoji-cloud_tornado {
+  background-position: -180px -320px;
+}
+.emoji-clown {
+  background-position: -200px -320px;
+}
+.emoji-clubs {
+  background-position: -220px -320px;
+}
+.emoji-cocktail {
+  background-position: -240px -320px;
+}
+.emoji-coffee {
+  background-position: -260px -320px;
+}
+.emoji-coffin {
+  background-position: -280px -320px;
+}
+.emoji-cold_sweat {
+  background-position: -300px -320px;
+}
+.emoji-comet {
+  background-position: -320px -320px;
+}
+.emoji-compression {
+  background-position: -340px 0;
+}
+.emoji-computer {
+  background-position: -340px -20px;
+}
+.emoji-confetti_ball {
+  background-position: -340px -40px;
+}
+.emoji-confounded {
+  background-position: -340px -60px;
+}
+.emoji-confused {
+  background-position: -340px -80px;
+}
+.emoji-congratulations {
+  background-position: -340px -100px;
+}
+.emoji-construction {
+  background-position: -340px -120px;
+}
+.emoji-construction_site {
+  background-position: -340px -140px;
+}
+.emoji-construction_worker {
+  background-position: -340px -160px;
+}
+.emoji-construction_worker_tone1 {
+  background-position: -340px -180px;
+}
+.emoji-construction_worker_tone2 {
+  background-position: -340px -200px;
+}
+.emoji-construction_worker_tone3 {
+  background-position: -340px -220px;
+}
+.emoji-construction_worker_tone4 {
+  background-position: -340px -240px;
+}
+.emoji-construction_worker_tone5 {
+  background-position: -340px -260px;
+}
+.emoji-control_knobs {
+  background-position: -340px -280px;
+}
+.emoji-convenience_store {
+  background-position: -340px -300px;
+}
+.emoji-cookie {
+  background-position: -340px -320px;
+}
+.emoji-cooking {
+  background-position: 0 -340px;
+}
+.emoji-cool {
+  background-position: -20px -340px;
+}
+.emoji-cop {
+  background-position: -40px -340px;
+}
+.emoji-cop_tone1 {
+  background-position: -60px -340px;
+}
+.emoji-cop_tone2 {
+  background-position: -80px -340px;
+}
+.emoji-cop_tone3 {
+  background-position: -100px -340px;
+}
+.emoji-cop_tone4 {
+  background-position: -120px -340px;
+}
+.emoji-cop_tone5 {
+  background-position: -140px -340px;
+}
+.emoji-copyright {
+  background-position: -160px -340px;
+}
+.emoji-corn {
+  background-position: -180px -340px;
+}
+.emoji-couch {
+  background-position: -200px -340px;
+}
+.emoji-couple {
+  background-position: -220px -340px;
+}
+.emoji-couple_mm {
+  background-position: -240px -340px;
+}
+.emoji-couple_with_heart {
+  background-position: -260px -340px;
+}
+.emoji-couple_ww {
+  background-position: -280px -340px;
+}
+.emoji-couplekiss {
+  background-position: -300px -340px;
+}
+.emoji-cow {
+  background-position: -320px -340px;
+}
+.emoji-cow2 {
+  background-position: -340px -340px;
+}
+.emoji-cowboy {
+  background-position: -360px 0;
+}
+.emoji-crab {
+  background-position: -360px -20px;
+}
+.emoji-crayon {
+  background-position: -360px -40px;
+}
+.emoji-credit_card {
+  background-position: -360px -60px;
+}
+.emoji-crescent_moon {
+  background-position: -360px -80px;
+}
+.emoji-cricket {
+  background-position: -360px -100px;
+}
+.emoji-crocodile {
+  background-position: -360px -120px;
+}
+.emoji-croissant {
+  background-position: -360px -140px;
+}
+.emoji-cross {
+  background-position: -360px -160px;
+}
+.emoji-crossed_flags {
+  background-position: -360px -180px;
+}
+.emoji-crossed_swords {
+  background-position: -360px -200px;
+}
+.emoji-crown {
+  background-position: -360px -220px;
+}
+.emoji-cruise_ship {
+  background-position: -360px -240px;
+}
+.emoji-cry {
+  background-position: -360px -260px;
+}
+.emoji-crying_cat_face {
+  background-position: -360px -280px;
+}
+.emoji-crystal_ball {
+  background-position: -360px -300px;
+}
+.emoji-cucumber {
+  background-position: -360px -320px;
+}
+.emoji-cupid {
+  background-position: -360px -340px;
+}
+.emoji-curly_loop {
+  background-position: 0 -360px;
+}
+.emoji-currency_exchange {
+  background-position: -20px -360px;
+}
+.emoji-curry {
+  background-position: -40px -360px;
+}
+.emoji-custard {
+  background-position: -60px -360px;
+}
+.emoji-customs {
+  background-position: -80px -360px;
+}
+.emoji-cyclone {
+  background-position: -100px -360px;
+}
+.emoji-dagger {
+  background-position: -120px -360px;
+}
+.emoji-dancer {
+  background-position: -140px -360px;
+}
+.emoji-dancer_tone1 {
+  background-position: -160px -360px;
+}
+.emoji-dancer_tone2 {
+  background-position: -180px -360px;
+}
+.emoji-dancer_tone3 {
+  background-position: -200px -360px;
+}
+.emoji-dancer_tone4 {
+  background-position: -220px -360px;
+}
+.emoji-dancer_tone5 {
+  background-position: -240px -360px;
+}
+.emoji-dancers {
+  background-position: -260px -360px;
+}
+.emoji-dango {
+  background-position: -280px -360px;
+}
+.emoji-dark_sunglasses {
+  background-position: -300px -360px;
+}
+.emoji-dart {
+  background-position: -320px -360px;
+}
+.emoji-dash {
+  background-position: -340px -360px;
+}
+.emoji-date {
+  background-position: -360px -360px;
+}
+.emoji-deciduous_tree {
+  background-position: -380px 0;
+}
+.emoji-deer {
+  background-position: -380px -20px;
+}
+.emoji-department_store {
+  background-position: -380px -40px;
+}
+.emoji-desert {
+  background-position: -380px -60px;
+}
+.emoji-desktop {
+  background-position: -380px -80px;
+}
+.emoji-diamond_shape_with_a_dot_inside {
+  background-position: -380px -100px;
+}
+.emoji-diamonds {
+  background-position: -380px -120px;
+}
+.emoji-disappointed {
+  background-position: -380px -140px;
+}
+.emoji-disappointed_relieved {
+  background-position: -380px -160px;
+}
+.emoji-dividers {
+  background-position: -380px -180px;
+}
+.emoji-dizzy {
+  background-position: -380px -200px;
+}
+.emoji-dizzy_face {
+  background-position: -380px -220px;
+}
+.emoji-do_not_litter {
+  background-position: -380px -240px;
+}
+.emoji-dog {
+  background-position: -380px -260px;
+}
+.emoji-dog2 {
+  background-position: -380px -280px;
+}
+.emoji-dollar {
+  background-position: -380px -300px;
+}
+.emoji-dolls {
+  background-position: -380px -320px;
+}
+.emoji-dolphin {
+  background-position: -380px -340px;
+}
+.emoji-door {
+  background-position: -380px -360px;
+}
+.emoji-doughnut {
+  background-position: 0 -380px;
+}
+.emoji-dove {
+  background-position: -20px -380px;
+}
+.emoji-dragon {
+  background-position: -40px -380px;
+}
+.emoji-dragon_face {
+  background-position: -60px -380px;
+}
+.emoji-dress {
+  background-position: -80px -380px;
+}
+.emoji-dromedary_camel {
+  background-position: -100px -380px;
+}
+.emoji-drooling_face {
+  background-position: -120px -380px;
+}
+.emoji-droplet {
+  background-position: -140px -380px;
+}
+.emoji-drum {
+  background-position: -160px -380px;
+}
+.emoji-duck {
+  background-position: -180px -380px;
+}
+.emoji-dvd {
+  background-position: -200px -380px;
+}
+.emoji-e-mail {
+  background-position: -220px -380px;
+}
+.emoji-eagle {
+  background-position: -240px -380px;
+}
+.emoji-ear {
+  background-position: -260px -380px;
+}
+.emoji-ear_of_rice {
+  background-position: -280px -380px;
+}
+.emoji-ear_tone1 {
+  background-position: -300px -380px;
+}
+.emoji-ear_tone2 {
+  background-position: -320px -380px;
+}
+.emoji-ear_tone3 {
+  background-position: -340px -380px;
+}
+.emoji-ear_tone4 {
+  background-position: -360px -380px;
+}
+.emoji-ear_tone5 {
+  background-position: -380px -380px;
+}
+.emoji-earth_africa {
+  background-position: -400px 0;
+}
+.emoji-earth_americas {
+  background-position: -400px -20px;
+}
+.emoji-earth_asia {
+  background-position: -400px -40px;
+}
+.emoji-egg {
+  background-position: -400px -60px;
+}
+.emoji-eggplant {
+  background-position: -400px -80px;
+}
+.emoji-eight {
+  background-position: -400px -100px;
+}
+.emoji-eight_pointed_black_star {
+  background-position: -400px -120px;
+}
+.emoji-eight_spoked_asterisk {
+  background-position: -400px -140px;
+}
+.emoji-eject {
+  background-position: -400px -160px;
+}
+.emoji-electric_plug {
+  background-position: -400px -180px;
+}
+.emoji-elephant {
+  background-position: -400px -200px;
+}
+.emoji-end {
+  background-position: -400px -220px;
+}
+.emoji-envelope {
+  background-position: -400px -240px;
+}
+.emoji-envelope_with_arrow {
+  background-position: -400px -260px;
+}
+.emoji-euro {
+  background-position: -400px -280px;
+}
+.emoji-european_castle {
+  background-position: -400px -300px;
+}
+.emoji-european_post_office {
+  background-position: -400px -320px;
+}
+.emoji-evergreen_tree {
+  background-position: -400px -340px;
+}
+.emoji-exclamation {
+  background-position: -400px -360px;
+}
+.emoji-expressionless {
+  background-position: -400px -380px;
+}
+.emoji-eye {
+  background-position: 0 -400px;
+}
+.emoji-eye_in_speech_bubble {
+  background-position: -20px -400px;
+}
+.emoji-eyeglasses {
+  background-position: -40px -400px;
+}
+.emoji-eyes {
+  background-position: -60px -400px;
+}
+.emoji-face_palm {
+  background-position: -80px -400px;
+}
+.emoji-face_palm_tone1 {
+  background-position: -100px -400px;
+}
+.emoji-face_palm_tone2 {
+  background-position: -120px -400px;
+}
+.emoji-face_palm_tone3 {
+  background-position: -140px -400px;
+}
+.emoji-face_palm_tone4 {
+  background-position: -160px -400px;
+}
+.emoji-face_palm_tone5 {
+  background-position: -180px -400px;
+}
+.emoji-factory {
+  background-position: -200px -400px;
+}
+.emoji-fallen_leaf {
+  background-position: -220px -400px;
+}
+.emoji-family {
+  background-position: -240px -400px;
+}
+.emoji-family_mmb {
+  background-position: -260px -400px;
+}
+.emoji-family_mmbb {
+  background-position: -280px -400px;
+}
+.emoji-family_mmg {
+  background-position: -300px -400px;
+}
+.emoji-family_mmgb {
+  background-position: -320px -400px;
+}
+.emoji-family_mmgg {
+  background-position: -340px -400px;
+}
+.emoji-family_mwbb {
+  background-position: -360px -400px;
+}
+.emoji-family_mwg {
+  background-position: -380px -400px;
+}
+.emoji-family_mwgb {
+  background-position: -400px -400px;
+}
+.emoji-family_mwgg {
+  background-position: -420px 0;
+}
+.emoji-family_wwb {
+  background-position: -420px -20px;
+}
+.emoji-family_wwbb {
+  background-position: -420px -40px;
+}
+.emoji-family_wwg {
+  background-position: -420px -60px;
+}
+.emoji-family_wwgb {
+  background-position: -420px -80px;
+}
+.emoji-family_wwgg {
+  background-position: -420px -100px;
+}
+.emoji-fast_forward {
+  background-position: -420px -120px;
+}
+.emoji-fax {
+  background-position: -420px -140px;
+}
+.emoji-fearful {
+  background-position: -420px -160px;
+}
+.emoji-feet {
+  background-position: -420px -180px;
+}
+.emoji-fencer {
+  background-position: -420px -200px;
+}
+.emoji-ferris_wheel {
+  background-position: -420px -220px;
+}
+.emoji-ferry {
+  background-position: -420px -240px;
+}
+.emoji-field_hockey {
+  background-position: -420px -260px;
+}
+.emoji-file_cabinet {
+  background-position: -420px -280px;
+}
+.emoji-file_folder {
+  background-position: -420px -300px;
+}
+.emoji-film_frames {
+  background-position: -420px -320px;
+}
+.emoji-fingers_crossed {
+  background-position: -420px -340px;
+}
+.emoji-fingers_crossed_tone1 {
+  background-position: -420px -360px;
+}
+.emoji-fingers_crossed_tone2 {
+  background-position: -420px -380px;
+}
+.emoji-fingers_crossed_tone3 {
+  background-position: -420px -400px;
+}
+.emoji-fingers_crossed_tone4 {
+  background-position: 0 -420px;
+}
+.emoji-fingers_crossed_tone5 {
+  background-position: -20px -420px;
+}
+.emoji-fire {
+  background-position: -40px -420px;
+}
+.emoji-fire_engine {
+  background-position: -60px -420px;
+}
+.emoji-fireworks {
+  background-position: -80px -420px;
+}
+.emoji-first_place {
+  background-position: -100px -420px;
+}
+.emoji-first_quarter_moon {
+  background-position: -120px -420px;
+}
+.emoji-first_quarter_moon_with_face {
+  background-position: -140px -420px;
+}
+.emoji-fish {
+  background-position: -160px -420px;
+}
+.emoji-fish_cake {
+  background-position: -180px -420px;
+}
+.emoji-fishing_pole_and_fish {
+  background-position: -200px -420px;
+}
+.emoji-fist {
+  background-position: -220px -420px;
+}
+.emoji-fist_tone1 {
+  background-position: -240px -420px;
+}
+.emoji-fist_tone2 {
+  background-position: -260px -420px;
+}
+.emoji-fist_tone3 {
+  background-position: -280px -420px;
+}
+.emoji-fist_tone4 {
+  background-position: -300px -420px;
+}
+.emoji-fist_tone5 {
+  background-position: -320px -420px;
+}
+.emoji-five {
+  background-position: -340px -420px;
+}
+.emoji-flag_ac {
+  background-position: -360px -420px;
+}
+.emoji-flag_ad {
+  background-position: -380px -420px;
+}
+.emoji-flag_ae {
+  background-position: -400px -420px;
+}
+.emoji-flag_af {
+  background-position: -420px -420px;
+}
+.emoji-flag_ag {
+  background-position: -440px 0;
+}
+.emoji-flag_ai {
+  background-position: -440px -20px;
+}
+.emoji-flag_al {
+  background-position: -440px -40px;
+}
+.emoji-flag_am {
+  background-position: -440px -60px;
+}
+.emoji-flag_ao {
+  background-position: -440px -80px;
+}
+.emoji-flag_aq {
+  background-position: -440px -100px;
+}
+.emoji-flag_ar {
+  background-position: -440px -120px;
+}
+.emoji-flag_as {
+  background-position: -440px -140px;
+}
+.emoji-flag_at {
+  background-position: -440px -160px;
+}
+.emoji-flag_au {
+  background-position: -440px -180px;
+}
+.emoji-flag_aw {
+  background-position: -440px -200px;
+}
+.emoji-flag_ax {
+  background-position: -440px -220px;
+}
+.emoji-flag_az {
+  background-position: -440px -240px;
+}
+.emoji-flag_ba {
+  background-position: -440px -260px;
+}
+.emoji-flag_bb {
+  background-position: -440px -280px;
+}
+.emoji-flag_bd {
+  background-position: -440px -300px;
+}
+.emoji-flag_be {
+  background-position: -440px -320px;
+}
+.emoji-flag_bf {
+  background-position: -440px -340px;
+}
+.emoji-flag_bg {
+  background-position: -440px -360px;
+}
+.emoji-flag_bh {
+  background-position: -440px -380px;
+}
+.emoji-flag_bi {
+  background-position: -440px -400px;
+}
+.emoji-flag_bj {
+  background-position: -440px -420px;
+}
+.emoji-flag_bl {
+  background-position: 0 -440px;
+}
+.emoji-flag_black {
+  background-position: -20px -440px;
+}
+.emoji-flag_bm {
+  background-position: -40px -440px;
+}
+.emoji-flag_bn {
+  background-position: -60px -440px;
+}
+.emoji-flag_bo {
+  background-position: -80px -440px;
+}
+.emoji-flag_bq {
+  background-position: -100px -440px;
+}
+.emoji-flag_br {
+  background-position: -120px -440px;
+}
+.emoji-flag_bs {
+  background-position: -140px -440px;
+}
+.emoji-flag_bt {
+  background-position: -160px -440px;
+}
+.emoji-flag_bv {
+  background-position: -180px -440px;
+}
+.emoji-flag_bw {
+  background-position: -200px -440px;
+}
+.emoji-flag_by {
+  background-position: -220px -440px;
+}
+.emoji-flag_bz {
+  background-position: -240px -440px;
+}
+.emoji-flag_ca {
+  background-position: -260px -440px;
+}
+.emoji-flag_cc {
+  background-position: -280px -440px;
+}
+.emoji-flag_cd {
+  background-position: -300px -440px;
+}
+.emoji-flag_cf {
+  background-position: -320px -440px;
+}
+.emoji-flag_cg {
+  background-position: -340px -440px;
+}
+.emoji-flag_ch {
+  background-position: -360px -440px;
+}
+.emoji-flag_ci {
+  background-position: -380px -440px;
+}
+.emoji-flag_ck {
+  background-position: -400px -440px;
+}
+.emoji-flag_cl {
+  background-position: -420px -440px;
+}
+.emoji-flag_cm {
+  background-position: -440px -440px;
+}
+.emoji-flag_cn {
+  background-position: -460px 0;
+}
+.emoji-flag_co {
+  background-position: -460px -20px;
+}
+.emoji-flag_cp {
+  background-position: -460px -40px;
+}
+.emoji-flag_cr {
+  background-position: -460px -60px;
+}
+.emoji-flag_cu {
+  background-position: -460px -80px;
+}
+.emoji-flag_cv {
+  background-position: -460px -100px;
+}
+.emoji-flag_cw {
+  background-position: -460px -120px;
+}
+.emoji-flag_cx {
+  background-position: -460px -140px;
+}
+.emoji-flag_cy {
+  background-position: -460px -160px;
+}
+.emoji-flag_cz {
+  background-position: -460px -180px;
+}
+.emoji-flag_de {
+  background-position: -460px -200px;
+}
+.emoji-flag_dg {
+  background-position: -460px -220px;
+}
+.emoji-flag_dj {
+  background-position: -460px -240px;
+}
+.emoji-flag_dk {
+  background-position: -460px -260px;
+}
+.emoji-flag_dm {
+  background-position: -460px -280px;
+}
+.emoji-flag_do {
+  background-position: -460px -300px;
+}
+.emoji-flag_dz {
+  background-position: -460px -320px;
+}
+.emoji-flag_ea {
+  background-position: -460px -340px;
+}
+.emoji-flag_ec {
+  background-position: -460px -360px;
+}
+.emoji-flag_ee {
+  background-position: -460px -380px;
+}
+.emoji-flag_eg {
+  background-position: -460px -400px;
+}
+.emoji-flag_eh {
+  background-position: -460px -420px;
+}
+.emoji-flag_er {
+  background-position: -460px -440px;
+}
+.emoji-flag_es {
+  background-position: 0 -460px;
+}
+.emoji-flag_et {
+  background-position: -20px -460px;
+}
+.emoji-flag_eu {
+  background-position: -40px -460px;
+}
+.emoji-flag_fi {
+  background-position: -60px -460px;
+}
+.emoji-flag_fj {
+  background-position: -80px -460px;
+}
+.emoji-flag_fk {
+  background-position: -100px -460px;
+}
+.emoji-flag_fm {
+  background-position: -120px -460px;
+}
+.emoji-flag_fo {
+  background-position: -140px -460px;
+}
+.emoji-flag_fr {
+  background-position: -160px -460px;
+}
+.emoji-flag_ga {
+  background-position: -180px -460px;
+}
+.emoji-flag_gb {
+  background-position: -200px -460px;
+}
+.emoji-flag_gd {
+  background-position: -220px -460px;
+}
+.emoji-flag_ge {
+  background-position: -240px -460px;
+}
+.emoji-flag_gf {
+  background-position: -260px -460px;
+}
+.emoji-flag_gg {
+  background-position: -280px -460px;
+}
+.emoji-flag_gh {
+  background-position: -300px -460px;
+}
+.emoji-flag_gi {
+  background-position: -320px -460px;
+}
+.emoji-flag_gl {
+  background-position: -340px -460px;
+}
+.emoji-flag_gm {
+  background-position: -360px -460px;
+}
+.emoji-flag_gn {
+  background-position: -380px -460px;
+}
+.emoji-flag_gp {
+  background-position: -400px -460px;
+}
+.emoji-flag_gq {
+  background-position: -420px -460px;
+}
+.emoji-flag_gr {
+  background-position: -440px -460px;
+}
+.emoji-flag_gs {
+  background-position: -460px -460px;
+}
+.emoji-flag_gt {
+  background-position: -480px 0;
+}
+.emoji-flag_gu {
+  background-position: -480px -20px;
+}
+.emoji-flag_gw {
+  background-position: -480px -40px;
+}
+.emoji-flag_gy {
+  background-position: -480px -60px;
+}
+.emoji-flag_hk {
+  background-position: -480px -80px;
+}
+.emoji-flag_hm {
+  background-position: -480px -100px;
+}
+.emoji-flag_hn {
+  background-position: -480px -120px;
+}
+.emoji-flag_hr {
+  background-position: -480px -140px;
+}
+.emoji-flag_ht {
+  background-position: -480px -160px;
+}
+.emoji-flag_hu {
+  background-position: -480px -180px;
+}
+.emoji-flag_ic {
+  background-position: -480px -200px;
+}
+.emoji-flag_id {
+  background-position: -480px -220px;
+}
+.emoji-flag_ie {
+  background-position: -480px -240px;
+}
+.emoji-flag_il {
+  background-position: -480px -260px;
+}
+.emoji-flag_im {
+  background-position: -480px -280px;
+}
+.emoji-flag_in {
+  background-position: -480px -300px;
+}
+.emoji-flag_io {
+  background-position: -480px -320px;
+}
+.emoji-flag_iq {
+  background-position: -480px -340px;
+}
+.emoji-flag_ir {
+  background-position: -480px -360px;
+}
+.emoji-flag_is {
+  background-position: -480px -380px;
+}
+.emoji-flag_it {
+  background-position: -480px -400px;
+}
+.emoji-flag_je {
+  background-position: -480px -420px;
+}
+.emoji-flag_jm {
+  background-position: -480px -440px;
+}
+.emoji-flag_jo {
+  background-position: -480px -460px;
+}
+.emoji-flag_jp {
+  background-position: 0 -480px;
+}
+.emoji-flag_ke {
+  background-position: -20px -480px;
+}
+.emoji-flag_kg {
+  background-position: -40px -480px;
+}
+.emoji-flag_kh {
+  background-position: -60px -480px;
+}
+.emoji-flag_ki {
+  background-position: -80px -480px;
+}
+.emoji-flag_km {
+  background-position: -100px -480px;
+}
+.emoji-flag_kn {
+  background-position: -120px -480px;
+}
+.emoji-flag_kp {
+  background-position: -140px -480px;
+}
+.emoji-flag_kr {
+  background-position: -160px -480px;
+}
+.emoji-flag_kw {
+  background-position: -180px -480px;
+}
+.emoji-flag_ky {
+  background-position: -200px -480px;
+}
+.emoji-flag_kz {
+  background-position: -220px -480px;
+}
+.emoji-flag_la {
+  background-position: -240px -480px;
+}
+.emoji-flag_lb {
+  background-position: -260px -480px;
+}
+.emoji-flag_lc {
+  background-position: -280px -480px;
+}
+.emoji-flag_li {
+  background-position: -300px -480px;
+}
+.emoji-flag_lk {
+  background-position: -320px -480px;
+}
+.emoji-flag_lr {
+  background-position: -340px -480px;
+}
+.emoji-flag_ls {
+  background-position: -360px -480px;
+}
+.emoji-flag_lt {
+  background-position: -380px -480px;
+}
+.emoji-flag_lu {
+  background-position: -400px -480px;
+}
+.emoji-flag_lv {
+  background-position: -420px -480px;
+}
+.emoji-flag_ly {
+  background-position: -440px -480px;
+}
+.emoji-flag_ma {
+  background-position: -460px -480px;
+}
+.emoji-flag_mc {
+  background-position: -480px -480px;
+}
+.emoji-flag_md {
+  background-position: -500px 0;
+}
+.emoji-flag_me {
+  background-position: -500px -20px;
+}
+.emoji-flag_mf {
+  background-position: -500px -40px;
+}
+.emoji-flag_mg {
+  background-position: -500px -60px;
+}
+.emoji-flag_mh {
+  background-position: -500px -80px;
+}
+.emoji-flag_mk {
+  background-position: -500px -100px;
+}
+.emoji-flag_ml {
+  background-position: -500px -120px;
+}
+.emoji-flag_mm {
+  background-position: -500px -140px;
+}
+.emoji-flag_mn {
+  background-position: -500px -160px;
+}
+.emoji-flag_mo {
+  background-position: -500px -180px;
+}
+.emoji-flag_mp {
+  background-position: -500px -200px;
+}
+.emoji-flag_mq {
+  background-position: -500px -220px;
+}
+.emoji-flag_mr {
+  background-position: -500px -240px;
+}
+.emoji-flag_ms {
+  background-position: -500px -260px;
+}
+.emoji-flag_mt {
+  background-position: -500px -280px;
+}
+.emoji-flag_mu {
+  background-position: -500px -300px;
+}
+.emoji-flag_mv {
+  background-position: -500px -320px;
+}
+.emoji-flag_mw {
+  background-position: -500px -340px;
+}
+.emoji-flag_mx {
+  background-position: -500px -360px;
+}
+.emoji-flag_my {
+  background-position: -500px -380px;
+}
+.emoji-flag_mz {
+  background-position: -500px -400px;
+}
+.emoji-flag_na {
+  background-position: -500px -420px;
+}
+.emoji-flag_nc {
+  background-position: -500px -440px;
+}
+.emoji-flag_ne {
+  background-position: -500px -460px;
+}
+.emoji-flag_nf {
+  background-position: -500px -480px;
+}
+.emoji-flag_ng {
+  background-position: 0 -500px;
+}
+.emoji-flag_ni {
+  background-position: -20px -500px;
+}
+.emoji-flag_nl {
+  background-position: -40px -500px;
+}
+.emoji-flag_no {
+  background-position: -60px -500px;
+}
+.emoji-flag_np {
+  background-position: -80px -500px;
+}
+.emoji-flag_nr {
+  background-position: -100px -500px;
+}
+.emoji-flag_nu {
+  background-position: -120px -500px;
+}
+.emoji-flag_nz {
+  background-position: -140px -500px;
+}
+.emoji-flag_om {
+  background-position: -160px -500px;
+}
+.emoji-flag_pa {
+  background-position: -180px -500px;
+}
+.emoji-flag_pe {
+  background-position: -200px -500px;
+}
+.emoji-flag_pf {
+  background-position: -220px -500px;
+}
+.emoji-flag_pg {
+  background-position: -240px -500px;
+}
+.emoji-flag_ph {
+  background-position: -260px -500px;
+}
+.emoji-flag_pk {
+  background-position: -280px -500px;
+}
+.emoji-flag_pl {
+  background-position: -300px -500px;
+}
+.emoji-flag_pm {
+  background-position: -320px -500px;
+}
+.emoji-flag_pn {
+  background-position: -340px -500px;
+}
+.emoji-flag_pr {
+  background-position: -360px -500px;
+}
+.emoji-flag_ps {
+  background-position: -380px -500px;
+}
+.emoji-flag_pt {
+  background-position: -400px -500px;
+}
+.emoji-flag_pw {
+  background-position: -420px -500px;
+}
+.emoji-flag_py {
+  background-position: -440px -500px;
+}
+.emoji-flag_qa {
+  background-position: -460px -500px;
+}
+.emoji-flag_re {
+  background-position: -480px -500px;
+}
+.emoji-flag_ro {
+  background-position: -500px -500px;
+}
+.emoji-flag_rs {
+  background-position: -520px 0;
+}
+.emoji-flag_ru {
+  background-position: -520px -20px;
+}
+.emoji-flag_rw {
+  background-position: -520px -40px;
+}
+.emoji-flag_sa {
+  background-position: -520px -60px;
+}
+.emoji-flag_sb {
+  background-position: -520px -80px;
+}
+.emoji-flag_sc {
+  background-position: -520px -100px;
+}
+.emoji-flag_sd {
+  background-position: -520px -120px;
+}
+.emoji-flag_se {
+  background-position: -520px -140px;
+}
+.emoji-flag_sg {
+  background-position: -520px -160px;
+}
+.emoji-flag_sh {
+  background-position: -520px -180px;
+}
+.emoji-flag_si {
+  background-position: -520px -200px;
+}
+.emoji-flag_sj {
+  background-position: -520px -220px;
+}
+.emoji-flag_sk {
+  background-position: -520px -240px;
+}
+.emoji-flag_sl {
+  background-position: -520px -260px;
+}
+.emoji-flag_sm {
+  background-position: -520px -280px;
+}
+.emoji-flag_sn {
+  background-position: -520px -300px;
+}
+.emoji-flag_so {
+  background-position: -520px -320px;
+}
+.emoji-flag_sr {
+  background-position: -520px -340px;
+}
+.emoji-flag_ss {
+  background-position: -520px -360px;
+}
+.emoji-flag_st {
+  background-position: -520px -380px;
+}
+.emoji-flag_sv {
+  background-position: -520px -400px;
+}
+.emoji-flag_sx {
+  background-position: -520px -420px;
+}
+.emoji-flag_sy {
+  background-position: -520px -440px;
+}
+.emoji-flag_sz {
+  background-position: -520px -460px;
+}
+.emoji-flag_ta {
+  background-position: -520px -480px;
+}
+.emoji-flag_tc {
+  background-position: -520px -500px;
+}
+.emoji-flag_td {
+  background-position: 0 -520px;
+}
+.emoji-flag_tf {
+  background-position: -20px -520px;
+}
+.emoji-flag_tg {
+  background-position: -40px -520px;
+}
+.emoji-flag_th {
+  background-position: -60px -520px;
+}
+.emoji-flag_tj {
+  background-position: -80px -520px;
+}
+.emoji-flag_tk {
+  background-position: -100px -520px;
+}
+.emoji-flag_tl {
+  background-position: -120px -520px;
+}
+.emoji-flag_tm {
+  background-position: -140px -520px;
+}
+.emoji-flag_tn {
+  background-position: -160px -520px;
+}
+.emoji-flag_to {
+  background-position: -180px -520px;
+}
+.emoji-flag_tr {
+  background-position: -200px -520px;
+}
+.emoji-flag_tt {
+  background-position: -220px -520px;
+}
+.emoji-flag_tv {
+  background-position: -240px -520px;
+}
+.emoji-flag_tw {
+  background-position: -260px -520px;
+}
+.emoji-flag_tz {
+  background-position: -280px -520px;
+}
+.emoji-flag_ua {
+  background-position: -300px -520px;
+}
+.emoji-flag_ug {
+  background-position: -320px -520px;
+}
+.emoji-flag_um {
+  background-position: -340px -520px;
+}
+.emoji-flag_us {
+  background-position: -360px -520px;
+}
+.emoji-flag_uy {
+  background-position: -380px -520px;
+}
+.emoji-flag_uz {
+  background-position: -400px -520px;
+}
+.emoji-flag_va {
+  background-position: -420px -520px;
+}
+.emoji-flag_vc {
+  background-position: -440px -520px;
+}
+.emoji-flag_ve {
+  background-position: -460px -520px;
+}
+.emoji-flag_vg {
+  background-position: -480px -520px;
+}
+.emoji-flag_vi {
+  background-position: -500px -520px;
+}
+.emoji-flag_vn {
+  background-position: -520px -520px;
+}
+.emoji-flag_vu {
+  background-position: -540px 0;
+}
+.emoji-flag_wf {
+  background-position: -540px -20px;
+}
+.emoji-flag_white {
+  background-position: -540px -40px;
+}
+.emoji-flag_ws {
+  background-position: -540px -60px;
+}
+.emoji-flag_xk {
+  background-position: -540px -80px;
+}
+.emoji-flag_ye {
+  background-position: -540px -100px;
+}
+.emoji-flag_yt {
+  background-position: -540px -120px;
+}
+.emoji-flag_za {
+  background-position: -540px -140px;
+}
+.emoji-flag_zm {
+  background-position: -540px -160px;
+}
+.emoji-flag_zw {
+  background-position: -540px -180px;
+}
+.emoji-flags {
+  background-position: -540px -200px;
+}
+.emoji-flashlight {
+  background-position: -540px -220px;
+}
+.emoji-fleur-de-lis {
+  background-position: -540px -240px;
+}
+.emoji-floppy_disk {
+  background-position: -540px -260px;
+}
+.emoji-flower_playing_cards {
+  background-position: -540px -280px;
+}
+.emoji-flushed {
+  background-position: -540px -300px;
+}
+.emoji-fog {
+  background-position: -540px -320px;
+}
+.emoji-foggy {
+  background-position: -540px -340px;
+}
+.emoji-football {
+  background-position: -540px -360px;
+}
+.emoji-footprints {
+  background-position: -540px -380px;
+}
+.emoji-fork_and_knife {
+  background-position: -540px -400px;
+}
+.emoji-fork_knife_plate {
+  background-position: -540px -420px;
+}
+.emoji-fountain {
+  background-position: -540px -440px;
+}
+.emoji-four {
+  background-position: -540px -460px;
+}
+.emoji-four_leaf_clover {
+  background-position: -540px -480px;
+}
+.emoji-fox {
+  background-position: -540px -500px;
+}
+.emoji-frame_photo {
+  background-position: -540px -520px;
+}
+.emoji-free {
+  background-position: 0 -540px;
+}
+.emoji-french_bread {
+  background-position: -20px -540px;
+}
+.emoji-fried_shrimp {
+  background-position: -40px -540px;
+}
+.emoji-fries {
+  background-position: -60px -540px;
+}
+.emoji-frog {
+  background-position: -80px -540px;
+}
+.emoji-frowning {
+  background-position: -100px -540px;
+}
+.emoji-frowning2 {
+  background-position: -120px -540px;
+}
+.emoji-fuelpump {
+  background-position: -140px -540px;
+}
+.emoji-full_moon {
+  background-position: -160px -540px;
+}
+.emoji-full_moon_with_face {
+  background-position: -180px -540px;
+}
+.emoji-game_die {
+  background-position: -200px -540px;
+}
+.emoji-gay_pride_flag {
+  background-position: -220px -540px;
+}
+.emoji-gear {
+  background-position: -240px -540px;
+}
+.emoji-gem {
+  background-position: -260px -540px;
+}
+.emoji-gemini {
+  background-position: -280px -540px;
+}
+.emoji-ghost {
+  background-position: -300px -540px;
+}
+.emoji-gift {
+  background-position: -320px -540px;
+}
+.emoji-gift_heart {
+  background-position: -340px -540px;
+}
+.emoji-girl {
+  background-position: -360px -540px;
+}
+.emoji-girl_tone1 {
+  background-position: -380px -540px;
+}
+.emoji-girl_tone2 {
+  background-position: -400px -540px;
+}
+.emoji-girl_tone3 {
+  background-position: -420px -540px;
+}
+.emoji-girl_tone4 {
+  background-position: -440px -540px;
+}
+.emoji-girl_tone5 {
+  background-position: -460px -540px;
+}
+.emoji-globe_with_meridians {
+  background-position: -480px -540px;
+}
+.emoji-goal {
+  background-position: -500px -540px;
+}
+.emoji-goat {
+  background-position: -520px -540px;
+}
+.emoji-golf {
+  background-position: -540px -540px;
+}
+.emoji-golfer {
+  background-position: -560px 0;
+}
+.emoji-gorilla {
+  background-position: -560px -20px;
+}
+.emoji-grapes {
+  background-position: -560px -40px;
+}
+.emoji-green_apple {
+  background-position: -560px -60px;
+}
+.emoji-green_book {
+  background-position: -560px -80px;
+}
+.emoji-green_heart {
+  background-position: -560px -100px;
+}
+.emoji-grey_exclamation {
+  background-position: -560px -120px;
+}
+.emoji-grey_question {
+  background-position: -560px -140px;
+}
+.emoji-grimacing {
+  background-position: -560px -160px;
+}
+.emoji-grin {
+  background-position: -560px -180px;
+}
+.emoji-grinning {
+  background-position: -560px -200px;
+}
+.emoji-guardsman {
+  background-position: -560px -220px;
+}
+.emoji-guardsman_tone1 {
+  background-position: -560px -240px;
+}
+.emoji-guardsman_tone2 {
+  background-position: -560px -260px;
+}
+.emoji-guardsman_tone3 {
+  background-position: -560px -280px;
+}
+.emoji-guardsman_tone4 {
+  background-position: -560px -300px;
+}
+.emoji-guardsman_tone5 {
+  background-position: -560px -320px;
+}
+.emoji-guitar {
+  background-position: -560px -340px;
+}
+.emoji-gun {
+  background-position: -560px -360px;
+}
+.emoji-haircut {
+  background-position: -560px -380px;
+}
+.emoji-haircut_tone1 {
+  background-position: -560px -400px;
+}
+.emoji-haircut_tone2 {
+  background-position: -560px -420px;
+}
+.emoji-haircut_tone3 {
+  background-position: -560px -440px;
+}
+.emoji-haircut_tone4 {
+  background-position: -560px -460px;
+}
+.emoji-haircut_tone5 {
+  background-position: -560px -480px;
+}
+.emoji-hamburger {
+  background-position: -560px -500px;
+}
+.emoji-hammer {
+  background-position: -560px -520px;
+}
+.emoji-hammer_pick {
+  background-position: -560px -540px;
+}
+.emoji-hamster {
+  background-position: 0 -560px;
+}
+.emoji-hand_splayed {
+  background-position: -20px -560px;
+}
+.emoji-hand_splayed_tone1 {
+  background-position: -40px -560px;
+}
+.emoji-hand_splayed_tone2 {
+  background-position: -60px -560px;
+}
+.emoji-hand_splayed_tone3 {
+  background-position: -80px -560px;
+}
+.emoji-hand_splayed_tone4 {
+  background-position: -100px -560px;
+}
+.emoji-hand_splayed_tone5 {
+  background-position: -120px -560px;
+}
+.emoji-handbag {
+  background-position: -140px -560px;
+}
+.emoji-handball {
+  background-position: -160px -560px;
+}
+.emoji-handball_tone1 {
+  background-position: -180px -560px;
+}
+.emoji-handball_tone2 {
+  background-position: -200px -560px;
+}
+.emoji-handball_tone3 {
+  background-position: -220px -560px;
+}
+.emoji-handball_tone4 {
+  background-position: -240px -560px;
+}
+.emoji-handball_tone5 {
+  background-position: -260px -560px;
+}
+.emoji-handshake {
+  background-position: -280px -560px;
+}
+.emoji-handshake_tone1 {
+  background-position: -300px -560px;
+}
+.emoji-handshake_tone2 {
+  background-position: -320px -560px;
+}
+.emoji-handshake_tone3 {
+  background-position: -340px -560px;
+}
+.emoji-handshake_tone4 {
+  background-position: -360px -560px;
+}
+.emoji-handshake_tone5 {
+  background-position: -380px -560px;
+}
+.emoji-hash {
+  background-position: -400px -560px;
+}
+.emoji-hatched_chick {
+  background-position: -420px -560px;
+}
+.emoji-hatching_chick {
+  background-position: -440px -560px;
+}
+.emoji-head_bandage {
+  background-position: -460px -560px;
+}
+.emoji-headphones {
+  background-position: -480px -560px;
+}
+.emoji-hear_no_evil {
+  background-position: -500px -560px;
+}
+.emoji-heart {
+  background-position: -520px -560px;
+}
+.emoji-heart_decoration {
+  background-position: -540px -560px;
+}
+.emoji-heart_exclamation {
+  background-position: -560px -560px;
+}
+.emoji-heart_eyes {
+  background-position: -580px 0;
+}
+.emoji-heart_eyes_cat {
+  background-position: -580px -20px;
+}
+.emoji-heartbeat {
+  background-position: -580px -40px;
+}
+.emoji-heartpulse {
+  background-position: -580px -60px;
+}
+.emoji-hearts {
+  background-position: -580px -80px;
+}
+.emoji-heavy_check_mark {
+  background-position: -580px -100px;
+}
+.emoji-heavy_division_sign {
+  background-position: -580px -120px;
+}
+.emoji-heavy_dollar_sign {
+  background-position: -580px -140px;
+}
+.emoji-heavy_minus_sign {
+  background-position: -580px -160px;
+}
+.emoji-heavy_multiplication_x {
+  background-position: -580px -180px;
+}
+.emoji-heavy_plus_sign {
+  background-position: -580px -200px;
+}
+.emoji-helicopter {
+  background-position: -580px -220px;
+}
+.emoji-helmet_with_cross {
+  background-position: -580px -240px;
+}
+.emoji-herb {
+  background-position: -580px -260px;
+}
+.emoji-hibiscus {
+  background-position: -580px -280px;
+}
+.emoji-high_brightness {
+  background-position: -580px -300px;
+}
+.emoji-high_heel {
+  background-position: -580px -320px;
+}
+.emoji-hockey {
+  background-position: -580px -340px;
+}
+.emoji-hole {
+  background-position: -580px -360px;
+}
+.emoji-homes {
+  background-position: -580px -380px;
+}
+.emoji-honey_pot {
+  background-position: -580px -400px;
+}
+.emoji-horse {
+  background-position: -580px -420px;
+}
+.emoji-horse_racing {
+  background-position: -580px -440px;
+}
+.emoji-horse_racing_tone1 {
+  background-position: -580px -460px;
+}
+.emoji-horse_racing_tone2 {
+  background-position: -580px -480px;
+}
+.emoji-horse_racing_tone3 {
+  background-position: -580px -500px;
+}
+.emoji-horse_racing_tone4 {
+  background-position: -580px -520px;
+}
+.emoji-horse_racing_tone5 {
+  background-position: -580px -540px;
+}
+.emoji-hospital {
+  background-position: -580px -560px;
+}
+.emoji-hot_pepper {
+  background-position: 0 -580px;
+}
+.emoji-hotdog {
+  background-position: -20px -580px;
+}
+.emoji-hotel {
+  background-position: -40px -580px;
+}
+.emoji-hotsprings {
+  background-position: -60px -580px;
+}
+.emoji-hourglass {
+  background-position: -80px -580px;
+}
+.emoji-hourglass_flowing_sand {
+  background-position: -100px -580px;
+}
+.emoji-house {
+  background-position: -120px -580px;
+}
+.emoji-house_abandoned {
+  background-position: -140px -580px;
+}
+.emoji-house_with_garden {
+  background-position: -160px -580px;
+}
+.emoji-hugging {
+  background-position: -180px -580px;
+}
+.emoji-hushed {
+  background-position: -200px -580px;
+}
+.emoji-ice_cream {
+  background-position: -220px -580px;
+}
+.emoji-ice_skate {
+  background-position: -240px -580px;
+}
+.emoji-icecream {
+  background-position: -260px -580px;
+}
+.emoji-id {
+  background-position: -280px -580px;
+}
+.emoji-ideograph_advantage {
+  background-position: -300px -580px;
+}
+.emoji-imp {
+  background-position: -320px -580px;
+}
+.emoji-inbox_tray {
+  background-position: -340px -580px;
+}
+.emoji-incoming_envelope {
+  background-position: -360px -580px;
+}
+.emoji-information_desk_person {
+  background-position: -380px -580px;
+}
+.emoji-information_desk_person_tone1 {
+  background-position: -400px -580px;
+}
+.emoji-information_desk_person_tone2 {
+  background-position: -420px -580px;
+}
+.emoji-information_desk_person_tone3 {
+  background-position: -440px -580px;
+}
+.emoji-information_desk_person_tone4 {
+  background-position: -460px -580px;
+}
+.emoji-information_desk_person_tone5 {
+  background-position: -480px -580px;
+}
+.emoji-information_source {
+  background-position: -500px -580px;
+}
+.emoji-innocent {
+  background-position: -520px -580px;
+}
+.emoji-interrobang {
+  background-position: -540px -580px;
+}
+.emoji-iphone {
+  background-position: -560px -580px;
+}
+.emoji-island {
+  background-position: -580px -580px;
+}
+.emoji-izakaya_lantern {
+  background-position: -600px 0;
+}
+.emoji-jack_o_lantern {
+  background-position: -600px -20px;
+}
+.emoji-japan {
+  background-position: -600px -40px;
+}
+.emoji-japanese_castle {
+  background-position: -600px -60px;
+}
+.emoji-japanese_goblin {
+  background-position: -600px -80px;
+}
+.emoji-japanese_ogre {
+  background-position: -600px -100px;
+}
+.emoji-jeans {
+  background-position: -600px -120px;
+}
+.emoji-joy {
+  background-position: -600px -140px;
+}
+.emoji-joy_cat {
+  background-position: -600px -160px;
+}
+.emoji-joystick {
+  background-position: -600px -180px;
+}
+.emoji-juggling {
+  background-position: -600px -200px;
+}
+.emoji-juggling_tone1 {
+  background-position: -600px -220px;
+}
+.emoji-juggling_tone2 {
+  background-position: -600px -240px;
+}
+.emoji-juggling_tone3 {
+  background-position: -600px -260px;
+}
+.emoji-juggling_tone4 {
+  background-position: -600px -280px;
+}
+.emoji-juggling_tone5 {
+  background-position: -600px -300px;
+}
+.emoji-kaaba {
+  background-position: -600px -320px;
+}
+.emoji-key {
+  background-position: -600px -340px;
+}
+.emoji-key2 {
+  background-position: -600px -360px;
+}
+.emoji-keyboard {
+  background-position: -600px -380px;
+}
+.emoji-kimono {
+  background-position: -600px -400px;
+}
+.emoji-kiss {
+  background-position: -600px -420px;
+}
+.emoji-kiss_mm {
+  background-position: -600px -440px;
+}
+.emoji-kiss_ww {
+  background-position: -600px -460px;
+}
+.emoji-kissing {
+  background-position: -600px -480px;
+}
+.emoji-kissing_cat {
+  background-position: -600px -500px;
+}
+.emoji-kissing_closed_eyes {
+  background-position: -600px -520px;
+}
+.emoji-kissing_heart {
+  background-position: -600px -540px;
+}
+.emoji-kissing_smiling_eyes {
+  background-position: -600px -560px;
+}
+.emoji-kiwi {
+  background-position: -600px -580px;
+}
+.emoji-knife {
+  background-position: 0 -600px;
+}
+.emoji-koala {
+  background-position: -20px -600px;
+}
+.emoji-koko {
+  background-position: -40px -600px;
+}
+.emoji-label {
+  background-position: -60px -600px;
+}
+.emoji-large_blue_circle {
+  background-position: -80px -600px;
+}
+.emoji-large_blue_diamond {
+  background-position: -100px -600px;
+}
+.emoji-large_orange_diamond {
+  background-position: -120px -600px;
+}
+.emoji-last_quarter_moon {
+  background-position: -140px -600px;
+}
+.emoji-last_quarter_moon_with_face {
+  background-position: -160px -600px;
+}
+.emoji-laughing {
+  background-position: -180px -600px;
+}
+.emoji-leaves {
+  background-position: -200px -600px;
+}
+.emoji-ledger {
+  background-position: -220px -600px;
+}
+.emoji-left_facing_fist {
+  background-position: -240px -600px;
+}
+.emoji-left_facing_fist_tone1 {
+  background-position: -260px -600px;
+}
+.emoji-left_facing_fist_tone2 {
+  background-position: -280px -600px;
+}
+.emoji-left_facing_fist_tone3 {
+  background-position: -300px -600px;
+}
+.emoji-left_facing_fist_tone4 {
+  background-position: -320px -600px;
+}
+.emoji-left_facing_fist_tone5 {
+  background-position: -340px -600px;
+}
+.emoji-left_luggage {
+  background-position: -360px -600px;
+}
+.emoji-left_right_arrow {
+  background-position: -380px -600px;
+}
+.emoji-leftwards_arrow_with_hook {
+  background-position: -400px -600px;
+}
+.emoji-lemon {
+  background-position: -420px -600px;
+}
+.emoji-leo {
+  background-position: -440px -600px;
+}
+.emoji-leopard {
+  background-position: -460px -600px;
+}
+.emoji-level_slider {
+  background-position: -480px -600px;
+}
+.emoji-levitate {
+  background-position: -500px -600px;
+}
+.emoji-libra {
+  background-position: -520px -600px;
+}
+.emoji-lifter {
+  background-position: -540px -600px;
+}
+.emoji-lifter_tone1 {
+  background-position: -560px -600px;
+}
+.emoji-lifter_tone2 {
+  background-position: -580px -600px;
+}
+.emoji-lifter_tone3 {
+  background-position: -600px -600px;
+}
+.emoji-lifter_tone4 {
+  background-position: -620px 0;
+}
+.emoji-lifter_tone5 {
+  background-position: -620px -20px;
+}
+.emoji-light_rail {
+  background-position: -620px -40px;
+}
+.emoji-link {
+  background-position: -620px -60px;
+}
+.emoji-lion_face {
+  background-position: -620px -80px;
+}
+.emoji-lips {
+  background-position: -620px -100px;
+}
+.emoji-lipstick {
+  background-position: -620px -120px;
+}
+.emoji-lizard {
+  background-position: -620px -140px;
+}
+.emoji-lock {
+  background-position: -620px -160px;
+}
+.emoji-lock_with_ink_pen {
+  background-position: -620px -180px;
+}
+.emoji-lollipop {
+  background-position: -620px -200px;
+}
+.emoji-loop {
+  background-position: -620px -220px;
+}
+.emoji-loud_sound {
+  background-position: -620px -240px;
+}
+.emoji-loudspeaker {
+  background-position: -620px -260px;
+}
+.emoji-love_hotel {
+  background-position: -620px -280px;
+}
+.emoji-love_letter {
+  background-position: -620px -300px;
+}
+.emoji-low_brightness {
+  background-position: -620px -320px;
+}
+.emoji-lying_face {
+  background-position: -620px -340px;
+}
+.emoji-m {
+  background-position: -620px -360px;
+}
+.emoji-mag {
+  background-position: -620px -380px;
+}
+.emoji-mag_right {
+  background-position: -620px -400px;
+}
+.emoji-mahjong {
+  background-position: -620px -420px;
+}
+.emoji-mailbox {
+  background-position: -620px -440px;
+}
+.emoji-mailbox_closed {
+  background-position: -620px -460px;
+}
+.emoji-mailbox_with_mail {
+  background-position: -620px -480px;
+}
+.emoji-mailbox_with_no_mail {
+  background-position: -620px -500px;
+}
+.emoji-man {
+  background-position: -620px -520px;
+}
+.emoji-man_dancing {
+  background-position: -620px -540px;
+}
+.emoji-man_dancing_tone1 {
+  background-position: -620px -560px;
+}
+.emoji-man_dancing_tone2 {
+  background-position: -620px -580px;
+}
+.emoji-man_dancing_tone3 {
+  background-position: -620px -600px;
+}
+.emoji-man_dancing_tone4 {
+  background-position: 0 -620px;
+}
+.emoji-man_dancing_tone5 {
+  background-position: -20px -620px;
+}
+.emoji-man_in_tuxedo {
+  background-position: -40px -620px;
+}
+.emoji-man_in_tuxedo_tone1 {
+  background-position: -60px -620px;
+}
+.emoji-man_in_tuxedo_tone2 {
+  background-position: -80px -620px;
+}
+.emoji-man_in_tuxedo_tone3 {
+  background-position: -100px -620px;
+}
+.emoji-man_in_tuxedo_tone4 {
+  background-position: -120px -620px;
+}
+.emoji-man_in_tuxedo_tone5 {
+  background-position: -140px -620px;
+}
+.emoji-man_tone1 {
+  background-position: -160px -620px;
+}
+.emoji-man_tone2 {
+  background-position: -180px -620px;
+}
+.emoji-man_tone3 {
+  background-position: -200px -620px;
+}
+.emoji-man_tone4 {
+  background-position: -220px -620px;
+}
+.emoji-man_tone5 {
+  background-position: -240px -620px;
+}
+.emoji-man_with_gua_pi_mao {
+  background-position: -260px -620px;
+}
+.emoji-man_with_gua_pi_mao_tone1 {
+  background-position: -280px -620px;
+}
+.emoji-man_with_gua_pi_mao_tone2 {
+  background-position: -300px -620px;
+}
+.emoji-man_with_gua_pi_mao_tone3 {
+  background-position: -320px -620px;
+}
+.emoji-man_with_gua_pi_mao_tone4 {
+  background-position: -340px -620px;
+}
+.emoji-man_with_gua_pi_mao_tone5 {
+  background-position: -360px -620px;
+}
+.emoji-man_with_turban {
+  background-position: -380px -620px;
+}
+.emoji-man_with_turban_tone1 {
+  background-position: -400px -620px;
+}
+.emoji-man_with_turban_tone2 {
+  background-position: -420px -620px;
+}
+.emoji-man_with_turban_tone3 {
+  background-position: -440px -620px;
+}
+.emoji-man_with_turban_tone4 {
+  background-position: -460px -620px;
+}
+.emoji-man_with_turban_tone5 {
+  background-position: -480px -620px;
+}
+.emoji-mans_shoe {
+  background-position: -500px -620px;
+}
+.emoji-map {
+  background-position: -520px -620px;
+}
+.emoji-maple_leaf {
+  background-position: -540px -620px;
+}
+.emoji-martial_arts_uniform {
+  background-position: -560px -620px;
+}
+.emoji-mask {
+  background-position: -580px -620px;
+}
+.emoji-massage {
+  background-position: -600px -620px;
+}
+.emoji-massage_tone1 {
+  background-position: -620px -620px;
+}
+.emoji-massage_tone2 {
+  background-position: -640px 0;
+}
+.emoji-massage_tone3 {
+  background-position: -640px -20px;
+}
+.emoji-massage_tone4 {
+  background-position: -640px -40px;
+}
+.emoji-massage_tone5 {
+  background-position: -640px -60px;
+}
+.emoji-meat_on_bone {
+  background-position: -640px -80px;
+}
+.emoji-medal {
+  background-position: -640px -100px;
+}
+.emoji-mega {
+  background-position: -640px -120px;
+}
+.emoji-melon {
+  background-position: -640px -140px;
+}
+.emoji-menorah {
+  background-position: -640px -160px;
+}
+.emoji-mens {
+  background-position: -640px -180px;
+}
+.emoji-metal {
+  background-position: -640px -200px;
+}
+.emoji-metal_tone1 {
+  background-position: -640px -220px;
+}
+.emoji-metal_tone2 {
+  background-position: -640px -240px;
+}
+.emoji-metal_tone3 {
+  background-position: -640px -260px;
+}
+.emoji-metal_tone4 {
+  background-position: -640px -280px;
+}
+.emoji-metal_tone5 {
+  background-position: -640px -300px;
+}
+.emoji-metro {
+  background-position: -640px -320px;
+}
+.emoji-microphone {
+  background-position: -640px -340px;
+}
+.emoji-microphone2 {
+  background-position: -640px -360px;
+}
+.emoji-microscope {
+  background-position: -640px -380px;
+}
+.emoji-middle_finger {
+  background-position: -640px -400px;
+}
+.emoji-middle_finger_tone1 {
+  background-position: -640px -420px;
+}
+.emoji-middle_finger_tone2 {
+  background-position: -640px -440px;
+}
+.emoji-middle_finger_tone3 {
+  background-position: -640px -460px;
+}
+.emoji-middle_finger_tone4 {
+  background-position: -640px -480px;
+}
+.emoji-middle_finger_tone5 {
+  background-position: -640px -500px;
+}
+.emoji-military_medal {
+  background-position: -640px -520px;
+}
+.emoji-milk {
+  background-position: -640px -540px;
+}
+.emoji-milky_way {
+  background-position: -640px -560px;
+}
+.emoji-minibus {
+  background-position: -640px -580px;
+}
+.emoji-minidisc {
+  background-position: -640px -600px;
+}
+.emoji-mobile_phone_off {
+  background-position: -640px -620px;
+}
+.emoji-money_mouth {
+  background-position: 0 -640px;
+}
+.emoji-money_with_wings {
+  background-position: -20px -640px;
+}
+.emoji-moneybag {
+  background-position: -40px -640px;
+}
+.emoji-monkey {
+  background-position: -60px -640px;
+}
+.emoji-monkey_face {
+  background-position: -80px -640px;
+}
+.emoji-monorail {
+  background-position: -100px -640px;
+}
+.emoji-mortar_board {
+  background-position: -120px -640px;
+}
+.emoji-mosque {
+  background-position: -140px -640px;
+}
+.emoji-motor_scooter {
+  background-position: -160px -640px;
+}
+.emoji-motorboat {
+  background-position: -180px -640px;
+}
+.emoji-motorcycle {
+  background-position: -200px -640px;
+}
+.emoji-motorway {
+  background-position: -220px -640px;
+}
+.emoji-mount_fuji {
+  background-position: -240px -640px;
+}
+.emoji-mountain {
+  background-position: -260px -640px;
+}
+.emoji-mountain_bicyclist {
+  background-position: -280px -640px;
+}
+.emoji-mountain_bicyclist_tone1 {
+  background-position: -300px -640px;
+}
+.emoji-mountain_bicyclist_tone2 {
+  background-position: -320px -640px;
+}
+.emoji-mountain_bicyclist_tone3 {
+  background-position: -340px -640px;
+}
+.emoji-mountain_bicyclist_tone4 {
+  background-position: -360px -640px;
+}
+.emoji-mountain_bicyclist_tone5 {
+  background-position: -380px -640px;
+}
+.emoji-mountain_cableway {
+  background-position: -400px -640px;
+}
+.emoji-mountain_railway {
+  background-position: -420px -640px;
+}
+.emoji-mountain_snow {
+  background-position: -440px -640px;
+}
+.emoji-mouse {
+  background-position: -460px -640px;
+}
+.emoji-mouse2 {
+  background-position: -480px -640px;
+}
+.emoji-mouse_three_button {
+  background-position: -500px -640px;
+}
+.emoji-movie_camera {
+  background-position: -520px -640px;
+}
+.emoji-moyai {
+  background-position: -540px -640px;
+}
+.emoji-mrs_claus {
+  background-position: -560px -640px;
+}
+.emoji-mrs_claus_tone1 {
+  background-position: -580px -640px;
+}
+.emoji-mrs_claus_tone2 {
+  background-position: -600px -640px;
+}
+.emoji-mrs_claus_tone3 {
+  background-position: -620px -640px;
+}
+.emoji-mrs_claus_tone4 {
+  background-position: -640px -640px;
+}
+.emoji-mrs_claus_tone5 {
+  background-position: -660px 0;
+}
+.emoji-muscle {
+  background-position: -660px -20px;
+}
+.emoji-muscle_tone1 {
+  background-position: -660px -40px;
+}
+.emoji-muscle_tone2 {
+  background-position: -660px -60px;
+}
+.emoji-muscle_tone3 {
+  background-position: -660px -80px;
+}
+.emoji-muscle_tone4 {
+  background-position: -660px -100px;
+}
+.emoji-muscle_tone5 {
+  background-position: -660px -120px;
+}
+.emoji-mushroom {
+  background-position: -660px -140px;
+}
+.emoji-musical_keyboard {
+  background-position: -660px -160px;
+}
+.emoji-musical_note {
+  background-position: -660px -180px;
+}
+.emoji-musical_score {
+  background-position: -660px -200px;
+}
+.emoji-mute {
+  background-position: -660px -220px;
+}
+.emoji-nail_care {
+  background-position: -660px -240px;
+}
+.emoji-nail_care_tone1 {
+  background-position: -660px -260px;
+}
+.emoji-nail_care_tone2 {
+  background-position: -660px -280px;
+}
+.emoji-nail_care_tone3 {
+  background-position: -660px -300px;
+}
+.emoji-nail_care_tone4 {
+  background-position: -660px -320px;
+}
+.emoji-nail_care_tone5 {
+  background-position: -660px -340px;
+}
+.emoji-name_badge {
+  background-position: -660px -360px;
+}
+.emoji-nauseated_face {
+  background-position: -660px -380px;
+}
+.emoji-necktie {
+  background-position: -660px -400px;
+}
+.emoji-negative_squared_cross_mark {
+  background-position: -660px -420px;
+}
+.emoji-nerd {
+  background-position: -660px -440px;
+}
+.emoji-neutral_face {
+  background-position: -660px -460px;
+}
+.emoji-new {
+  background-position: -660px -480px;
+}
+.emoji-new_moon {
+  background-position: -660px -500px;
+}
+.emoji-new_moon_with_face {
+  background-position: -660px -520px;
+}
+.emoji-newspaper {
+  background-position: -660px -540px;
+}
+.emoji-newspaper2 {
+  background-position: -660px -560px;
+}
+.emoji-ng {
+  background-position: -660px -580px;
+}
+.emoji-night_with_stars {
+  background-position: -660px -600px;
+}
+.emoji-nine {
+  background-position: -660px -620px;
+}
+.emoji-no_bell {
+  background-position: -660px -640px;
+}
+.emoji-no_bicycles {
+  background-position: 0 -660px;
+}
+.emoji-no_entry {
+  background-position: -20px -660px;
+}
+.emoji-no_entry_sign {
+  background-position: -40px -660px;
+}
+.emoji-no_good {
+  background-position: -60px -660px;
+}
+.emoji-no_good_tone1 {
+  background-position: -80px -660px;
+}
+.emoji-no_good_tone2 {
+  background-position: -100px -660px;
+}
+.emoji-no_good_tone3 {
+  background-position: -120px -660px;
+}
+.emoji-no_good_tone4 {
+  background-position: -140px -660px;
+}
+.emoji-no_good_tone5 {
+  background-position: -160px -660px;
+}
+.emoji-no_mobile_phones {
+  background-position: -180px -660px;
+}
+.emoji-no_mouth {
+  background-position: -200px -660px;
+}
+.emoji-no_pedestrians {
+  background-position: -220px -660px;
+}
+.emoji-no_smoking {
+  background-position: -240px -660px;
+}
+.emoji-non-potable_water {
+  background-position: -260px -660px;
+}
+.emoji-nose {
+  background-position: -280px -660px;
+}
+.emoji-nose_tone1 {
+  background-position: -300px -660px;
+}
+.emoji-nose_tone2 {
+  background-position: -320px -660px;
+}
+.emoji-nose_tone3 {
+  background-position: -340px -660px;
+}
+.emoji-nose_tone4 {
+  background-position: -360px -660px;
+}
+.emoji-nose_tone5 {
+  background-position: -380px -660px;
+}
+.emoji-notebook {
+  background-position: -400px -660px;
+}
+.emoji-notebook_with_decorative_cover {
+  background-position: -420px -660px;
+}
+.emoji-notepad_spiral {
+  background-position: -440px -660px;
+}
+.emoji-notes {
+  background-position: -460px -660px;
+}
+.emoji-nut_and_bolt {
+  background-position: -480px -660px;
+}
+.emoji-o {
+  background-position: -500px -660px;
+}
+.emoji-o2 {
+  background-position: -520px -660px;
+}
+.emoji-ocean {
+  background-position: -540px -660px;
+}
+.emoji-octagonal_sign {
+  background-position: -560px -660px;
+}
+.emoji-octopus {
+  background-position: -580px -660px;
+}
+.emoji-oden {
+  background-position: -600px -660px;
+}
+.emoji-office {
+  background-position: -620px -660px;
+}
+.emoji-oil {
+  background-position: -640px -660px;
+}
+.emoji-ok {
+  background-position: -660px -660px;
+}
+.emoji-ok_hand {
+  background-position: -680px 0;
+}
+.emoji-ok_hand_tone1 {
+  background-position: -680px -20px;
+}
+.emoji-ok_hand_tone2 {
+  background-position: -680px -40px;
+}
+.emoji-ok_hand_tone3 {
+  background-position: -680px -60px;
+}
+.emoji-ok_hand_tone4 {
+  background-position: -680px -80px;
+}
+.emoji-ok_hand_tone5 {
+  background-position: -680px -100px;
+}
+.emoji-ok_woman {
+  background-position: -680px -120px;
+}
+.emoji-ok_woman_tone1 {
+  background-position: -680px -140px;
+}
+.emoji-ok_woman_tone2 {
+  background-position: -680px -160px;
+}
+.emoji-ok_woman_tone3 {
+  background-position: -680px -180px;
+}
+.emoji-ok_woman_tone4 {
+  background-position: -680px -200px;
+}
+.emoji-ok_woman_tone5 {
+  background-position: -680px -220px;
+}
+.emoji-older_man {
+  background-position: -680px -240px;
+}
+.emoji-older_man_tone1 {
+  background-position: -680px -260px;
+}
+.emoji-older_man_tone2 {
+  background-position: -680px -280px;
+}
+.emoji-older_man_tone3 {
+  background-position: -680px -300px;
+}
+.emoji-older_man_tone4 {
+  background-position: -680px -320px;
+}
+.emoji-older_man_tone5 {
+  background-position: -680px -340px;
+}
+.emoji-older_woman {
+  background-position: -680px -360px;
+}
+.emoji-older_woman_tone1 {
+  background-position: -680px -380px;
+}
+.emoji-older_woman_tone2 {
+  background-position: -680px -400px;
+}
+.emoji-older_woman_tone3 {
+  background-position: -680px -420px;
+}
+.emoji-older_woman_tone4 {
+  background-position: -680px -440px;
+}
+.emoji-older_woman_tone5 {
+  background-position: -680px -460px;
+}
+.emoji-om_symbol {
+  background-position: -680px -480px;
+}
+.emoji-on {
+  background-position: -680px -500px;
+}
+.emoji-oncoming_automobile {
+  background-position: -680px -520px;
+}
+.emoji-oncoming_bus {
+  background-position: -680px -540px;
+}
+.emoji-oncoming_police_car {
+  background-position: -680px -560px;
+}
+.emoji-oncoming_taxi {
+  background-position: -680px -580px;
+}
+.emoji-one {
+  background-position: -680px -600px;
+}
+.emoji-open_file_folder {
+  background-position: -680px -620px;
+}
+.emoji-open_hands {
+  background-position: -680px -640px;
+}
+.emoji-open_hands_tone1 {
+  background-position: -680px -660px;
+}
+.emoji-open_hands_tone2 {
+  background-position: 0 -680px;
+}
+.emoji-open_hands_tone3 {
+  background-position: -20px -680px;
+}
+.emoji-open_hands_tone4 {
+  background-position: -40px -680px;
+}
+.emoji-open_hands_tone5 {
+  background-position: -60px -680px;
+}
+.emoji-open_mouth {
+  background-position: -80px -680px;
+}
+.emoji-ophiuchus {
+  background-position: -100px -680px;
+}
+.emoji-orange_book {
+  background-position: -120px -680px;
+}
+.emoji-orthodox_cross {
+  background-position: -140px -680px;
+}
+.emoji-outbox_tray {
+  background-position: -160px -680px;
+}
+.emoji-owl {
+  background-position: -180px -680px;
+}
+.emoji-ox {
+  background-position: -200px -680px;
+}
+.emoji-package {
+  background-position: -220px -680px;
+}
+.emoji-page_facing_up {
+  background-position: -240px -680px;
+}
+.emoji-page_with_curl {
+  background-position: -260px -680px;
+}
+.emoji-pager {
+  background-position: -280px -680px;
+}
+.emoji-paintbrush {
+  background-position: -300px -680px;
+}
+.emoji-palm_tree {
+  background-position: -320px -680px;
+}
+.emoji-pancakes {
+  background-position: -340px -680px;
+}
+.emoji-panda_face {
+  background-position: -360px -680px;
+}
+.emoji-paperclip {
+  background-position: -380px -680px;
+}
+.emoji-paperclips {
+  background-position: -400px -680px;
+}
+.emoji-park {
+  background-position: -420px -680px;
+}
+.emoji-parking {
+  background-position: -440px -680px;
+}
+.emoji-part_alternation_mark {
+  background-position: -460px -680px;
+}
+.emoji-partly_sunny {
+  background-position: -480px -680px;
+}
+.emoji-passport_control {
+  background-position: -500px -680px;
+}
+.emoji-pause_button {
+  background-position: -520px -680px;
+}
+.emoji-peace {
+  background-position: -540px -680px;
+}
+.emoji-peach {
+  background-position: -560px -680px;
+}
+.emoji-peanuts {
+  background-position: -580px -680px;
+}
+.emoji-pear {
+  background-position: -600px -680px;
+}
+.emoji-pen_ballpoint {
+  background-position: -620px -680px;
+}
+.emoji-pen_fountain {
+  background-position: -640px -680px;
+}
+.emoji-pencil {
+  background-position: -660px -680px;
+}
+.emoji-pencil2 {
+  background-position: -680px -680px;
+}
+.emoji-penguin {
+  background-position: -700px 0;
+}
+.emoji-pensive {
+  background-position: -700px -20px;
+}
+.emoji-performing_arts {
+  background-position: -700px -40px;
+}
+.emoji-persevere {
+  background-position: -700px -60px;
+}
+.emoji-person_frowning {
+  background-position: -700px -80px;
+}
+.emoji-person_frowning_tone1 {
+  background-position: -700px -100px;
+}
+.emoji-person_frowning_tone2 {
+  background-position: -700px -120px;
+}
+.emoji-person_frowning_tone3 {
+  background-position: -700px -140px;
+}
+.emoji-person_frowning_tone4 {
+  background-position: -700px -160px;
+}
+.emoji-person_frowning_tone5 {
+  background-position: -700px -180px;
+}
+.emoji-person_with_blond_hair {
+  background-position: -700px -200px;
+}
+.emoji-person_with_blond_hair_tone1 {
+  background-position: -700px -220px;
+}
+.emoji-person_with_blond_hair_tone2 {
+  background-position: -700px -240px;
+}
+.emoji-person_with_blond_hair_tone3 {
+  background-position: -700px -260px;
+}
+.emoji-person_with_blond_hair_tone4 {
+  background-position: -700px -280px;
+}
+.emoji-person_with_blond_hair_tone5 {
+  background-position: -700px -300px;
+}
+.emoji-person_with_pouting_face {
+  background-position: -700px -320px;
+}
+.emoji-person_with_pouting_face_tone1 {
+  background-position: -700px -340px;
+}
+.emoji-person_with_pouting_face_tone2 {
+  background-position: -700px -360px;
+}
+.emoji-person_with_pouting_face_tone3 {
+  background-position: -700px -380px;
+}
+.emoji-person_with_pouting_face_tone4 {
+  background-position: -700px -400px;
+}
+.emoji-person_with_pouting_face_tone5 {
+  background-position: -700px -420px;
+}
+.emoji-pick {
+  background-position: -700px -440px;
+}
+.emoji-pig {
+  background-position: -700px -460px;
+}
+.emoji-pig2 {
+  background-position: -700px -480px;
+}
+.emoji-pig_nose {
+  background-position: -700px -500px;
+}
+.emoji-pill {
+  background-position: -700px -520px;
+}
+.emoji-pineapple {
+  background-position: -700px -540px;
+}
+.emoji-ping_pong {
+  background-position: -700px -560px;
+}
+.emoji-pisces {
+  background-position: -700px -580px;
+}
+.emoji-pizza {
+  background-position: -700px -600px;
+}
+.emoji-place_of_worship {
+  background-position: -700px -620px;
+}
+.emoji-play_pause {
+  background-position: -700px -640px;
+}
+.emoji-point_down {
+  background-position: -700px -660px;
+}
+.emoji-point_down_tone1 {
+  background-position: -700px -680px;
+}
+.emoji-point_down_tone2 {
+  background-position: 0 -700px;
+}
+.emoji-point_down_tone3 {
+  background-position: -20px -700px;
+}
+.emoji-point_down_tone4 {
+  background-position: -40px -700px;
+}
+.emoji-point_down_tone5 {
+  background-position: -60px -700px;
+}
+.emoji-point_left {
+  background-position: -80px -700px;
+}
+.emoji-point_left_tone1 {
+  background-position: -100px -700px;
+}
+.emoji-point_left_tone2 {
+  background-position: -120px -700px;
+}
+.emoji-point_left_tone3 {
+  background-position: -140px -700px;
+}
+.emoji-point_left_tone4 {
+  background-position: -160px -700px;
+}
+.emoji-point_left_tone5 {
+  background-position: -180px -700px;
+}
+.emoji-point_right {
+  background-position: -200px -700px;
+}
+.emoji-point_right_tone1 {
+  background-position: -220px -700px;
+}
+.emoji-point_right_tone2 {
+  background-position: -240px -700px;
+}
+.emoji-point_right_tone3 {
+  background-position: -260px -700px;
+}
+.emoji-point_right_tone4 {
+  background-position: -280px -700px;
+}
+.emoji-point_right_tone5 {
+  background-position: -300px -700px;
+}
+.emoji-point_up {
+  background-position: -320px -700px;
+}
+.emoji-point_up_2 {
+  background-position: -340px -700px;
+}
+.emoji-point_up_2_tone1 {
+  background-position: -360px -700px;
+}
+.emoji-point_up_2_tone2 {
+  background-position: -380px -700px;
+}
+.emoji-point_up_2_tone3 {
+  background-position: -400px -700px;
+}
+.emoji-point_up_2_tone4 {
+  background-position: -420px -700px;
+}
+.emoji-point_up_2_tone5 {
+  background-position: -440px -700px;
+}
+.emoji-point_up_tone1 {
+  background-position: -460px -700px;
+}
+.emoji-point_up_tone2 {
+  background-position: -480px -700px;
+}
+.emoji-point_up_tone3 {
+  background-position: -500px -700px;
+}
+.emoji-point_up_tone4 {
+  background-position: -520px -700px;
+}
+.emoji-point_up_tone5 {
+  background-position: -540px -700px;
+}
+.emoji-police_car {
+  background-position: -560px -700px;
+}
+.emoji-poodle {
+  background-position: -580px -700px;
+}
+.emoji-poop {
+  background-position: -600px -700px;
+}
+.emoji-popcorn {
+  background-position: -620px -700px;
+}
+.emoji-post_office {
+  background-position: -640px -700px;
+}
+.emoji-postal_horn {
+  background-position: -660px -700px;
+}
+.emoji-postbox {
+  background-position: -680px -700px;
+}
+.emoji-potable_water {
+  background-position: -700px -700px;
+}
+.emoji-potato {
+  background-position: -720px 0;
+}
+.emoji-pouch {
+  background-position: -720px -20px;
+}
+.emoji-poultry_leg {
+  background-position: -720px -40px;
+}
+.emoji-pound {
+  background-position: -720px -60px;
+}
+.emoji-pouting_cat {
+  background-position: -720px -80px;
+}
+.emoji-pray {
+  background-position: -720px -100px;
+}
+.emoji-pray_tone1 {
+  background-position: -720px -120px;
+}
+.emoji-pray_tone2 {
+  background-position: -720px -140px;
+}
+.emoji-pray_tone3 {
+  background-position: -720px -160px;
+}
+.emoji-pray_tone4 {
+  background-position: -720px -180px;
+}
+.emoji-pray_tone5 {
+  background-position: -720px -200px;
+}
+.emoji-prayer_beads {
+  background-position: -720px -220px;
+}
+.emoji-pregnant_woman {
+  background-position: -720px -240px;
+}
+.emoji-pregnant_woman_tone1 {
+  background-position: -720px -260px;
+}
+.emoji-pregnant_woman_tone2 {
+  background-position: -720px -280px;
+}
+.emoji-pregnant_woman_tone3 {
+  background-position: -720px -300px;
+}
+.emoji-pregnant_woman_tone4 {
+  background-position: -720px -320px;
+}
+.emoji-pregnant_woman_tone5 {
+  background-position: -720px -340px;
+}
+.emoji-prince {
+  background-position: -720px -360px;
+}
+.emoji-prince_tone1 {
+  background-position: -720px -380px;
+}
+.emoji-prince_tone2 {
+  background-position: -720px -400px;
+}
+.emoji-prince_tone3 {
+  background-position: -720px -420px;
+}
+.emoji-prince_tone4 {
+  background-position: -720px -440px;
+}
+.emoji-prince_tone5 {
+  background-position: -720px -460px;
+}
+.emoji-princess {
+  background-position: -720px -480px;
+}
+.emoji-princess_tone1 {
+  background-position: -720px -500px;
+}
+.emoji-princess_tone2 {
+  background-position: -720px -520px;
+}
+.emoji-princess_tone3 {
+  background-position: -720px -540px;
+}
+.emoji-princess_tone4 {
+  background-position: -720px -560px;
+}
+.emoji-princess_tone5 {
+  background-position: -720px -580px;
+}
+.emoji-printer {
+  background-position: -720px -600px;
+}
+.emoji-projector {
+  background-position: -720px -620px;
+}
+.emoji-punch {
+  background-position: -720px -640px;
+}
+.emoji-punch_tone1 {
+  background-position: -720px -660px;
+}
+.emoji-punch_tone2 {
+  background-position: -720px -680px;
+}
+.emoji-punch_tone3 {
+  background-position: -720px -700px;
+}
+.emoji-punch_tone4 {
+  background-position: 0 -720px;
+}
+.emoji-punch_tone5 {
+  background-position: -20px -720px;
+}
+.emoji-purple_heart {
+  background-position: -40px -720px;
+}
+.emoji-purse {
+  background-position: -60px -720px;
+}
+.emoji-pushpin {
+  background-position: -80px -720px;
+}
+.emoji-put_litter_in_its_place {
+  background-position: -100px -720px;
+}
+.emoji-question {
+  background-position: -120px -720px;
+}
+.emoji-rabbit {
+  background-position: -140px -720px;
+}
+.emoji-rabbit2 {
+  background-position: -160px -720px;
+}
+.emoji-race_car {
+  background-position: -180px -720px;
+}
+.emoji-racehorse {
+  background-position: -200px -720px;
+}
+.emoji-radio {
+  background-position: -220px -720px;
+}
+.emoji-radio_button {
+  background-position: -240px -720px;
+}
+.emoji-radioactive {
+  background-position: -260px -720px;
+}
+.emoji-rage {
+  background-position: -280px -720px;
+}
+.emoji-railway_car {
+  background-position: -300px -720px;
+}
+.emoji-railway_track {
+  background-position: -320px -720px;
+}
+.emoji-rainbow {
+  background-position: -340px -720px;
+}
+.emoji-raised_back_of_hand {
+  background-position: -360px -720px;
+}
+.emoji-raised_back_of_hand_tone1 {
+  background-position: -380px -720px;
+}
+.emoji-raised_back_of_hand_tone2 {
+  background-position: -400px -720px;
+}
+.emoji-raised_back_of_hand_tone3 {
+  background-position: -420px -720px;
+}
+.emoji-raised_back_of_hand_tone4 {
+  background-position: -440px -720px;
+}
+.emoji-raised_back_of_hand_tone5 {
+  background-position: -460px -720px;
+}
+.emoji-raised_hand {
+  background-position: -480px -720px;
+}
+.emoji-raised_hand_tone1 {
+  background-position: -500px -720px;
+}
+.emoji-raised_hand_tone2 {
+  background-position: -520px -720px;
+}
+.emoji-raised_hand_tone3 {
+  background-position: -540px -720px;
+}
+.emoji-raised_hand_tone4 {
+  background-position: -560px -720px;
+}
+.emoji-raised_hand_tone5 {
+  background-position: -580px -720px;
+}
+.emoji-raised_hands {
+  background-position: -600px -720px;
+}
+.emoji-raised_hands_tone1 {
+  background-position: -620px -720px;
+}
+.emoji-raised_hands_tone2 {
+  background-position: -640px -720px;
+}
+.emoji-raised_hands_tone3 {
+  background-position: -660px -720px;
+}
+.emoji-raised_hands_tone4 {
+  background-position: -680px -720px;
+}
+.emoji-raised_hands_tone5 {
+  background-position: -700px -720px;
+}
+.emoji-raising_hand {
+  background-position: -720px -720px;
+}
+.emoji-raising_hand_tone1 {
+  background-position: -740px 0;
+}
+.emoji-raising_hand_tone2 {
+  background-position: -740px -20px;
+}
+.emoji-raising_hand_tone3 {
+  background-position: -740px -40px;
+}
+.emoji-raising_hand_tone4 {
+  background-position: -740px -60px;
+}
+.emoji-raising_hand_tone5 {
+  background-position: -740px -80px;
+}
+.emoji-ram {
+  background-position: -740px -100px;
+}
+.emoji-ramen {
+  background-position: -740px -120px;
+}
+.emoji-rat {
+  background-position: -740px -140px;
+}
+.emoji-record_button {
+  background-position: -740px -160px;
+}
+.emoji-recycle {
+  background-position: -740px -180px;
+}
+.emoji-red_car {
+  background-position: -740px -200px;
+}
+.emoji-red_circle {
+  background-position: -740px -220px;
+}
+.emoji-registered {
+  background-position: -740px -240px;
+}
+.emoji-relaxed {
+  background-position: -740px -260px;
+}
+.emoji-relieved {
+  background-position: -740px -280px;
+}
+.emoji-reminder_ribbon {
+  background-position: -740px -300px;
+}
+.emoji-repeat {
+  background-position: -740px -320px;
+}
+.emoji-repeat_one {
+  background-position: -740px -340px;
+}
+.emoji-restroom {
+  background-position: -740px -360px;
+}
+.emoji-revolving_hearts {
+  background-position: -740px -380px;
+}
+.emoji-rewind {
+  background-position: -740px -400px;
+}
+.emoji-rhino {
+  background-position: -740px -420px;
+}
+.emoji-ribbon {
+  background-position: -740px -440px;
+}
+.emoji-rice {
+  background-position: -740px -460px;
+}
+.emoji-rice_ball {
+  background-position: -740px -480px;
+}
+.emoji-rice_cracker {
+  background-position: -740px -500px;
+}
+.emoji-rice_scene {
+  background-position: -740px -520px;
+}
+.emoji-right_facing_fist {
+  background-position: -740px -540px;
+}
+.emoji-right_facing_fist_tone1 {
+  background-position: -740px -560px;
+}
+.emoji-right_facing_fist_tone2 {
+  background-position: -740px -580px;
+}
+.emoji-right_facing_fist_tone3 {
+  background-position: -740px -600px;
+}
+.emoji-right_facing_fist_tone4 {
+  background-position: -740px -620px;
+}
+.emoji-right_facing_fist_tone5 {
+  background-position: -740px -640px;
+}
+.emoji-ring {
+  background-position: -740px -660px;
+}
+.emoji-robot {
+  background-position: -740px -680px;
+}
+.emoji-rocket {
+  background-position: -740px -700px;
+}
+.emoji-rofl {
+  background-position: -740px -720px;
+}
+.emoji-roller_coaster {
+  background-position: 0 -740px;
+}
+.emoji-rolling_eyes {
+  background-position: -20px -740px;
+}
+.emoji-rooster {
+  background-position: -40px -740px;
+}
+.emoji-rose {
+  background-position: -60px -740px;
+}
+.emoji-rosette {
+  background-position: -80px -740px;
+}
+.emoji-rotating_light {
+  background-position: -100px -740px;
+}
+.emoji-round_pushpin {
+  background-position: -120px -740px;
+}
+.emoji-rowboat {
+  background-position: -140px -740px;
+}
+.emoji-rowboat_tone1 {
+  background-position: -160px -740px;
+}
+.emoji-rowboat_tone2 {
+  background-position: -180px -740px;
+}
+.emoji-rowboat_tone3 {
+  background-position: -200px -740px;
+}
+.emoji-rowboat_tone4 {
+  background-position: -220px -740px;
+}
+.emoji-rowboat_tone5 {
+  background-position: -240px -740px;
+}
+.emoji-rugby_football {
+  background-position: -260px -740px;
+}
+.emoji-runner {
+  background-position: -280px -740px;
+}
+.emoji-runner_tone1 {
+  background-position: -300px -740px;
+}
+.emoji-runner_tone2 {
+  background-position: -320px -740px;
+}
+.emoji-runner_tone3 {
+  background-position: -340px -740px;
+}
+.emoji-runner_tone4 {
+  background-position: -360px -740px;
+}
+.emoji-runner_tone5 {
+  background-position: -380px -740px;
+}
+.emoji-running_shirt_with_sash {
+  background-position: -400px -740px;
+}
+.emoji-sa {
+  background-position: -420px -740px;
+}
+.emoji-sagittarius {
+  background-position: -440px -740px;
+}
+.emoji-sailboat {
+  background-position: -460px -740px;
+}
+.emoji-sake {
+  background-position: -480px -740px;
+}
+.emoji-salad {
+  background-position: -500px -740px;
+}
+.emoji-sandal {
+  background-position: -520px -740px;
+}
+.emoji-santa {
+  background-position: -540px -740px;
+}
+.emoji-santa_tone1 {
+  background-position: -560px -740px;
+}
+.emoji-santa_tone2 {
+  background-position: -580px -740px;
+}
+.emoji-santa_tone3 {
+  background-position: -600px -740px;
+}
+.emoji-santa_tone4 {
+  background-position: -620px -740px;
+}
+.emoji-santa_tone5 {
+  background-position: -640px -740px;
+}
+.emoji-satellite {
+  background-position: -660px -740px;
+}
+.emoji-satellite_orbital {
+  background-position: -680px -740px;
+}
+.emoji-saxophone {
+  background-position: -700px -740px;
+}
+.emoji-scales {
+  background-position: -720px -740px;
+}
+.emoji-school {
+  background-position: -740px -740px;
+}
+.emoji-school_satchel {
+  background-position: -760px 0;
+}
+.emoji-scissors {
+  background-position: -760px -20px;
+}
+.emoji-scooter {
+  background-position: -760px -40px;
+}
+.emoji-scorpion {
+  background-position: -760px -60px;
+}
+.emoji-scorpius {
+  background-position: -760px -80px;
+}
+.emoji-scream {
+  background-position: -760px -100px;
+}
+.emoji-scream_cat {
+  background-position: -760px -120px;
+}
+.emoji-scroll {
+  background-position: -760px -140px;
+}
+.emoji-seat {
+  background-position: -760px -160px;
+}
+.emoji-second_place {
+  background-position: -760px -180px;
+}
+.emoji-secret {
+  background-position: -760px -200px;
+}
+.emoji-see_no_evil {
+  background-position: -760px -220px;
+}
+.emoji-seedling {
+  background-position: -760px -240px;
+}
+.emoji-selfie {
+  background-position: -760px -260px;
+}
+.emoji-selfie_tone1 {
+  background-position: -760px -280px;
+}
+.emoji-selfie_tone2 {
+  background-position: -760px -300px;
+}
+.emoji-selfie_tone3 {
+  background-position: -760px -320px;
+}
+.emoji-selfie_tone4 {
+  background-position: -760px -340px;
+}
+.emoji-selfie_tone5 {
+  background-position: -760px -360px;
+}
+.emoji-seven {
+  background-position: -760px -380px;
+}
+.emoji-shallow_pan_of_food {
+  background-position: -760px -400px;
+}
+.emoji-shamrock {
+  background-position: -760px -420px;
+}
+.emoji-shark {
+  background-position: -760px -440px;
+}
+.emoji-shaved_ice {
+  background-position: -760px -460px;
+}
+.emoji-sheep {
+  background-position: -760px -480px;
+}
+.emoji-shell {
+  background-position: -760px -500px;
+}
+.emoji-shield {
+  background-position: -760px -520px;
+}
+.emoji-shinto_shrine {
+  background-position: -760px -540px;
+}
+.emoji-ship {
+  background-position: -760px -560px;
+}
+.emoji-shirt {
+  background-position: -760px -580px;
+}
+.emoji-shopping_bags {
+  background-position: -760px -600px;
+}
+.emoji-shopping_cart {
+  background-position: -760px -620px;
+}
+.emoji-shower {
+  background-position: -760px -640px;
+}
+.emoji-shrimp {
+  background-position: -760px -660px;
+}
+.emoji-shrug {
+  background-position: -760px -680px;
+}
+.emoji-shrug_tone1 {
+  background-position: -760px -700px;
+}
+.emoji-shrug_tone2 {
+  background-position: -760px -720px;
+}
+.emoji-shrug_tone3 {
+  background-position: -760px -740px;
+}
+.emoji-shrug_tone4 {
+  background-position: 0 -760px;
+}
+.emoji-shrug_tone5 {
+  background-position: -20px -760px;
+}
+.emoji-signal_strength {
+  background-position: -40px -760px;
+}
+.emoji-six {
+  background-position: -60px -760px;
+}
+.emoji-six_pointed_star {
+  background-position: -80px -760px;
+}
+.emoji-ski {
+  background-position: -100px -760px;
+}
+.emoji-skier {
+  background-position: -120px -760px;
+}
+.emoji-skull {
+  background-position: -140px -760px;
+}
+.emoji-skull_crossbones {
+  background-position: -160px -760px;
+}
+.emoji-sleeping {
+  background-position: -180px -760px;
+}
+.emoji-sleeping_accommodation {
+  background-position: -200px -760px;
+}
+.emoji-sleepy {
+  background-position: -220px -760px;
+}
+.emoji-slight_frown {
+  background-position: -240px -760px;
+}
+.emoji-slight_smile {
+  background-position: -260px -760px;
+}
+.emoji-slot_machine {
+  background-position: -280px -760px;
+}
+.emoji-small_blue_diamond {
+  background-position: -300px -760px;
+}
+.emoji-small_orange_diamond {
+  background-position: -320px -760px;
+}
+.emoji-small_red_triangle {
+  background-position: -340px -760px;
+}
+.emoji-small_red_triangle_down {
+  background-position: -360px -760px;
+}
+.emoji-smile {
+  background-position: -380px -760px;
+}
+.emoji-smile_cat {
+  background-position: -400px -760px;
+}
+.emoji-smiley {
+  background-position: -420px -760px;
+}
+.emoji-smiley_cat {
+  background-position: -440px -760px;
+}
+.emoji-smiling_imp {
+  background-position: -460px -760px;
+}
+.emoji-smirk {
+  background-position: -480px -760px;
+}
+.emoji-smirk_cat {
+  background-position: -500px -760px;
+}
+.emoji-smoking {
+  background-position: -520px -760px;
+}
+.emoji-snail {
+  background-position: -540px -760px;
+}
+.emoji-snake {
+  background-position: -560px -760px;
+}
+.emoji-sneezing_face {
+  background-position: -580px -760px;
+}
+.emoji-snowboarder {
+  background-position: -600px -760px;
+}
+.emoji-snowflake {
+  background-position: -620px -760px;
+}
+.emoji-snowman {
+  background-position: -640px -760px;
+}
+.emoji-snowman2 {
+  background-position: -660px -760px;
+}
+.emoji-sob {
+  background-position: -680px -760px;
+}
+.emoji-soccer {
+  background-position: -700px -760px;
+}
+.emoji-soon {
+  background-position: -720px -760px;
+}
+.emoji-sos {
+  background-position: -740px -760px;
+}
+.emoji-sound {
+  background-position: -760px -760px;
+}
+.emoji-space_invader {
+  background-position: -780px 0;
+}
+.emoji-spades {
+  background-position: -780px -20px;
+}
+.emoji-spaghetti {
+  background-position: -780px -40px;
+}
+.emoji-sparkle {
+  background-position: -780px -60px;
+}
+.emoji-sparkler {
+  background-position: -780px -80px;
+}
+.emoji-sparkles {
+  background-position: -780px -100px;
+}
+.emoji-sparkling_heart {
+  background-position: -780px -120px;
+}
+.emoji-speak_no_evil {
+  background-position: -780px -140px;
+}
+.emoji-speaker {
+  background-position: -780px -160px;
+}
+.emoji-speaking_head {
+  background-position: -780px -180px;
+}
+.emoji-speech_balloon {
+  background-position: -780px -200px;
+}
+.emoji-speech_left {
+  background-position: -780px -220px;
+}
+.emoji-speedboat {
+  background-position: -780px -240px;
+}
+.emoji-spider {
+  background-position: -780px -260px;
+}
+.emoji-spider_web {
+  background-position: -780px -280px;
+}
+.emoji-spoon {
+  background-position: -780px -300px;
+}
+.emoji-spy {
+  background-position: -780px -320px;
+}
+.emoji-spy_tone1 {
+  background-position: -780px -340px;
+}
+.emoji-spy_tone2 {
+  background-position: -780px -360px;
+}
+.emoji-spy_tone3 {
+  background-position: -780px -380px;
+}
+.emoji-spy_tone4 {
+  background-position: -780px -400px;
+}
+.emoji-spy_tone5 {
+  background-position: -780px -420px;
+}
+.emoji-squid {
+  background-position: -780px -440px;
+}
+.emoji-stadium {
+  background-position: -780px -460px;
+}
+.emoji-star {
+  background-position: -780px -480px;
+}
+.emoji-star2 {
+  background-position: -780px -500px;
+}
+.emoji-star_and_crescent {
+  background-position: -780px -520px;
+}
+.emoji-star_of_david {
+  background-position: -780px -540px;
+}
+.emoji-stars {
+  background-position: -780px -560px;
+}
+.emoji-station {
+  background-position: -780px -580px;
+}
+.emoji-statue_of_liberty {
+  background-position: -780px -600px;
+}
+.emoji-steam_locomotive {
+  background-position: -780px -620px;
+}
+.emoji-stew {
+  background-position: -780px -640px;
+}
+.emoji-stop_button {
+  background-position: -780px -660px;
+}
+.emoji-stopwatch {
+  background-position: -780px -680px;
+}
+.emoji-straight_ruler {
+  background-position: -780px -700px;
+}
+.emoji-strawberry {
+  background-position: -780px -720px;
+}
+.emoji-stuck_out_tongue {
+  background-position: -780px -740px;
+}
+.emoji-stuck_out_tongue_closed_eyes {
+  background-position: -780px -760px;
+}
+.emoji-stuck_out_tongue_winking_eye {
+  background-position: 0 -780px;
+}
+.emoji-stuffed_flatbread {
+  background-position: -20px -780px;
+}
+.emoji-sun_with_face {
+  background-position: -40px -780px;
+}
+.emoji-sunflower {
+  background-position: -60px -780px;
+}
+.emoji-sunglasses {
+  background-position: -80px -780px;
+}
+.emoji-sunny {
+  background-position: -100px -780px;
+}
+.emoji-sunrise {
+  background-position: -120px -780px;
+}
+.emoji-sunrise_over_mountains {
+  background-position: -140px -780px;
+}
+.emoji-surfer {
+  background-position: -160px -780px;
+}
+.emoji-surfer_tone1 {
+  background-position: -180px -780px;
+}
+.emoji-surfer_tone2 {
+  background-position: -200px -780px;
+}
+.emoji-surfer_tone3 {
+  background-position: -220px -780px;
+}
+.emoji-surfer_tone4 {
+  background-position: -240px -780px;
+}
+.emoji-surfer_tone5 {
+  background-position: -260px -780px;
+}
+.emoji-sushi {
+  background-position: -280px -780px;
+}
+.emoji-suspension_railway {
+  background-position: -300px -780px;
+}
+.emoji-sweat {
+  background-position: -320px -780px;
+}
+.emoji-sweat_drops {
+  background-position: -340px -780px;
+}
+.emoji-sweat_smile {
+  background-position: -360px -780px;
+}
+.emoji-sweet_potato {
+  background-position: -380px -780px;
+}
+.emoji-swimmer {
+  background-position: -400px -780px;
+}
+.emoji-swimmer_tone1 {
+  background-position: -420px -780px;
+}
+.emoji-swimmer_tone2 {
+  background-position: -440px -780px;
+}
+.emoji-swimmer_tone3 {
+  background-position: -460px -780px;
+}
+.emoji-swimmer_tone4 {
+  background-position: -480px -780px;
+}
+.emoji-swimmer_tone5 {
+  background-position: -500px -780px;
+}
+.emoji-symbols {
+  background-position: -520px -780px;
+}
+.emoji-synagogue {
+  background-position: -540px -780px;
+}
+.emoji-syringe {
+  background-position: -560px -780px;
+}
+.emoji-taco {
+  background-position: -580px -780px;
+}
+.emoji-tada {
+  background-position: -600px -780px;
+}
+.emoji-tanabata_tree {
+  background-position: -620px -780px;
+}
+.emoji-tangerine {
+  background-position: -640px -780px;
+}
+.emoji-taurus {
+  background-position: -660px -780px;
+}
+.emoji-taxi {
+  background-position: -680px -780px;
+}
+.emoji-tea {
+  background-position: -700px -780px;
+}
+.emoji-telephone {
+  background-position: -720px -780px;
+}
+.emoji-telephone_receiver {
+  background-position: -740px -780px;
+}
+.emoji-telescope {
+  background-position: -760px -780px;
+}
+.emoji-ten {
+  background-position: -780px -780px;
+}
+.emoji-tennis {
+  background-position: -800px 0;
+}
+.emoji-tent {
+  background-position: -800px -20px;
+}
+.emoji-thermometer {
+  background-position: -800px -40px;
+}
+.emoji-thermometer_face {
+  background-position: -800px -60px;
+}
+.emoji-thinking {
+  background-position: -800px -80px;
+}
+.emoji-third_place {
+  background-position: -800px -100px;
+}
+.emoji-thought_balloon {
+  background-position: -800px -120px;
+}
+.emoji-three {
+  background-position: -800px -140px;
+}
+.emoji-thumbsdown {
+  background-position: -800px -160px;
+}
+.emoji-thumbsdown_tone1 {
+  background-position: -800px -180px;
+}
+.emoji-thumbsdown_tone2 {
+  background-position: -800px -200px;
+}
+.emoji-thumbsdown_tone3 {
+  background-position: -800px -220px;
+}
+.emoji-thumbsdown_tone4 {
+  background-position: -800px -240px;
+}
+.emoji-thumbsdown_tone5 {
+  background-position: -800px -260px;
+}
+.emoji-thumbsup {
+  background-position: -800px -280px;
+}
+.emoji-thumbsup_tone1 {
+  background-position: -800px -300px;
+}
+.emoji-thumbsup_tone2 {
+  background-position: -800px -320px;
+}
+.emoji-thumbsup_tone3 {
+  background-position: -800px -340px;
+}
+.emoji-thumbsup_tone4 {
+  background-position: -800px -360px;
+}
+.emoji-thumbsup_tone5 {
+  background-position: -800px -380px;
+}
+.emoji-thunder_cloud_rain {
+  background-position: -800px -400px;
+}
+.emoji-ticket {
+  background-position: -800px -420px;
+}
+.emoji-tickets {
+  background-position: -800px -440px;
+}
+.emoji-tiger {
+  background-position: -800px -460px;
+}
+.emoji-tiger2 {
+  background-position: -800px -480px;
+}
+.emoji-timer {
+  background-position: -800px -500px;
+}
+.emoji-tired_face {
+  background-position: -800px -520px;
+}
+.emoji-tm {
+  background-position: -800px -540px;
+}
+.emoji-toilet {
+  background-position: -800px -560px;
+}
+.emoji-tokyo_tower {
+  background-position: -800px -580px;
+}
+.emoji-tomato {
+  background-position: -800px -600px;
+}
+.emoji-tone1 {
+  background-position: -800px -620px;
+}
+.emoji-tone2 {
+  background-position: -800px -640px;
+}
+.emoji-tone3 {
+  background-position: -800px -660px;
+}
+.emoji-tone4 {
+  background-position: -800px -680px;
+}
+.emoji-tone5 {
+  background-position: -800px -700px;
+}
+.emoji-tongue {
+  background-position: -800px -720px;
+}
+.emoji-tools {
+  background-position: -800px -740px;
+}
+.emoji-top {
+  background-position: -800px -760px;
+}
+.emoji-tophat {
+  background-position: -800px -780px;
+}
+.emoji-track_next {
+  background-position: 0 -800px;
+}
+.emoji-track_previous {
+  background-position: -20px -800px;
+}
+.emoji-trackball {
+  background-position: -40px -800px;
+}
+.emoji-tractor {
+  background-position: -60px -800px;
+}
+.emoji-traffic_light {
+  background-position: -80px -800px;
+}
+.emoji-train {
+  background-position: -100px -800px;
+}
+.emoji-train2 {
+  background-position: -120px -800px;
+}
+.emoji-tram {
+  background-position: -140px -800px;
+}
+.emoji-triangular_flag_on_post {
+  background-position: -160px -800px;
+}
+.emoji-triangular_ruler {
+  background-position: -180px -800px;
+}
+.emoji-trident {
+  background-position: -200px -800px;
+}
+.emoji-triumph {
+  background-position: -220px -800px;
+}
+.emoji-trolleybus {
+  background-position: -240px -800px;
+}
+.emoji-trophy {
+  background-position: -260px -800px;
+}
+.emoji-tropical_drink {
+  background-position: -280px -800px;
+}
+.emoji-tropical_fish {
+  background-position: -300px -800px;
+}
+.emoji-truck {
+  background-position: -320px -800px;
+}
+.emoji-trumpet {
+  background-position: -340px -800px;
+}
+.emoji-tulip {
+  background-position: -360px -800px;
+}
+.emoji-tumbler_glass {
+  background-position: -380px -800px;
+}
+.emoji-turkey {
+  background-position: -400px -800px;
+}
+.emoji-turtle {
+  background-position: -420px -800px;
+}
+.emoji-tv {
+  background-position: -440px -800px;
+}
+.emoji-twisted_rightwards_arrows {
+  background-position: -460px -800px;
+}
+.emoji-two {
+  background-position: -480px -800px;
+}
+.emoji-two_hearts {
+  background-position: -500px -800px;
+}
+.emoji-two_men_holding_hands {
+  background-position: -520px -800px;
+}
+.emoji-two_women_holding_hands {
+  background-position: -540px -800px;
+}
+.emoji-u5272 {
+  background-position: -560px -800px;
+}
+.emoji-u5408 {
+  background-position: -580px -800px;
+}
+.emoji-u55b6 {
+  background-position: -600px -800px;
+}
+.emoji-u6307 {
+  background-position: -620px -800px;
+}
+.emoji-u6708 {
+  background-position: -640px -800px;
+}
+.emoji-u6709 {
+  background-position: -660px -800px;
+}
+.emoji-u6e80 {
+  background-position: -680px -800px;
+}
+.emoji-u7121 {
+  background-position: -700px -800px;
+}
+.emoji-u7533 {
+  background-position: -720px -800px;
+}
+.emoji-u7981 {
+  background-position: -740px -800px;
+}
+.emoji-u7a7a {
+  background-position: -760px -800px;
+}
+.emoji-umbrella {
+  background-position: -780px -800px;
+}
+.emoji-umbrella2 {
+  background-position: -800px -800px;
+}
+.emoji-unamused {
+  background-position: -820px 0;
+}
+.emoji-underage {
+  background-position: -820px -20px;
+}
+.emoji-unicorn {
+  background-position: -820px -40px;
+}
+.emoji-unlock {
+  background-position: -820px -60px;
+}
+.emoji-up {
+  background-position: -820px -80px;
+}
+.emoji-upside_down {
+  background-position: -820px -100px;
+}
+.emoji-urn {
+  background-position: -820px -120px;
+}
+.emoji-v {
+  background-position: -820px -140px;
+}
+.emoji-v_tone1 {
+  background-position: -820px -160px;
+}
+.emoji-v_tone2 {
+  background-position: -820px -180px;
+}
+.emoji-v_tone3 {
+  background-position: -820px -200px;
+}
+.emoji-v_tone4 {
+  background-position: -820px -220px;
+}
+.emoji-v_tone5 {
+  background-position: -820px -240px;
+}
+.emoji-vertical_traffic_light {
+  background-position: -820px -260px;
+}
+.emoji-vhs {
+  background-position: -820px -280px;
+}
+.emoji-vibration_mode {
+  background-position: -820px -300px;
+}
+.emoji-video_camera {
+  background-position: -820px -320px;
+}
+.emoji-video_game {
+  background-position: -820px -340px;
+}
+.emoji-violin {
+  background-position: -820px -360px;
+}
+.emoji-virgo {
+  background-position: -820px -380px;
+}
+.emoji-volcano {
+  background-position: -820px -400px;
+}
+.emoji-volleyball {
+  background-position: -820px -420px;
+}
+.emoji-vs {
+  background-position: -820px -440px;
+}
+.emoji-vulcan {
+  background-position: -820px -460px;
+}
+.emoji-vulcan_tone1 {
+  background-position: -820px -480px;
+}
+.emoji-vulcan_tone2 {
+  background-position: -820px -500px;
+}
+.emoji-vulcan_tone3 {
+  background-position: -820px -520px;
+}
+.emoji-vulcan_tone4 {
+  background-position: -820px -540px;
+}
+.emoji-vulcan_tone5 {
+  background-position: -820px -560px;
+}
+.emoji-walking {
+  background-position: -820px -580px;
+}
+.emoji-walking_tone1 {
+  background-position: -820px -600px;
+}
+.emoji-walking_tone2 {
+  background-position: -820px -620px;
+}
+.emoji-walking_tone3 {
+  background-position: -820px -640px;
+}
+.emoji-walking_tone4 {
+  background-position: -820px -660px;
+}
+.emoji-walking_tone5 {
+  background-position: -820px -680px;
+}
+.emoji-waning_crescent_moon {
+  background-position: -820px -700px;
+}
+.emoji-waning_gibbous_moon {
+  background-position: -820px -720px;
+}
+.emoji-warning {
+  background-position: -820px -740px;
+}
+.emoji-wastebasket {
+  background-position: -820px -760px;
+}
+.emoji-watch {
+  background-position: -820px -780px;
+}
+.emoji-water_buffalo {
+  background-position: -820px -800px;
+}
+.emoji-water_polo {
+  background-position: 0 -820px;
+}
+.emoji-water_polo_tone1 {
+  background-position: -20px -820px;
+}
+.emoji-water_polo_tone2 {
+  background-position: -40px -820px;
+}
+.emoji-water_polo_tone3 {
+  background-position: -60px -820px;
+}
+.emoji-water_polo_tone4 {
+  background-position: -80px -820px;
+}
+.emoji-water_polo_tone5 {
+  background-position: -100px -820px;
+}
+.emoji-watermelon {
+  background-position: -120px -820px;
+}
+.emoji-wave {
+  background-position: -140px -820px;
+}
+.emoji-wave_tone1 {
+  background-position: -160px -820px;
+}
+.emoji-wave_tone2 {
+  background-position: -180px -820px;
+}
+.emoji-wave_tone3 {
+  background-position: -200px -820px;
+}
+.emoji-wave_tone4 {
+  background-position: -220px -820px;
+}
+.emoji-wave_tone5 {
+  background-position: -240px -820px;
+}
+.emoji-wavy_dash {
+  background-position: -260px -820px;
+}
+.emoji-waxing_crescent_moon {
+  background-position: -280px -820px;
+}
+.emoji-waxing_gibbous_moon {
+  background-position: -300px -820px;
+}
+.emoji-wc {
+  background-position: -320px -820px;
+}
+.emoji-weary {
+  background-position: -340px -820px;
+}
+.emoji-wedding {
+  background-position: -360px -820px;
+}
+.emoji-whale {
+  background-position: -380px -820px;
+}
+.emoji-whale2 {
+  background-position: -400px -820px;
+}
+.emoji-wheel_of_dharma {
+  background-position: -420px -820px;
+}
+.emoji-wheelchair {
+  background-position: -440px -820px;
+}
+.emoji-white_check_mark {
+  background-position: -460px -820px;
+}
+.emoji-white_circle {
+  background-position: -480px -820px;
+}
+.emoji-white_flower {
+  background-position: -500px -820px;
+}
+.emoji-white_large_square {
+  background-position: -520px -820px;
+}
+.emoji-white_medium_small_square {
+  background-position: -540px -820px;
+}
+.emoji-white_medium_square {
+  background-position: -560px -820px;
+}
+.emoji-white_small_square {
+  background-position: -580px -820px;
+}
+.emoji-white_square_button {
+  background-position: -600px -820px;
+}
+.emoji-white_sun_cloud {
+  background-position: -620px -820px;
+}
+.emoji-white_sun_rain_cloud {
+  background-position: -640px -820px;
+}
+.emoji-white_sun_small_cloud {
+  background-position: -660px -820px;
+}
+.emoji-wilted_rose {
+  background-position: -680px -820px;
+}
+.emoji-wind_blowing_face {
+  background-position: -700px -820px;
+}
+.emoji-wind_chime {
+  background-position: -720px -820px;
+}
+.emoji-wine_glass {
+  background-position: -740px -820px;
+}
+.emoji-wink {
+  background-position: -760px -820px;
+}
+.emoji-wolf {
+  background-position: -780px -820px;
+}
+.emoji-woman {
+  background-position: -800px -820px;
+}
+.emoji-woman_tone1 {
+  background-position: -820px -820px;
+}
+.emoji-woman_tone2 {
+  background-position: -840px 0;
+}
+.emoji-woman_tone3 {
+  background-position: -840px -20px;
+}
+.emoji-woman_tone4 {
+  background-position: -840px -40px;
+}
+.emoji-woman_tone5 {
+  background-position: -840px -60px;
+}
+.emoji-womans_clothes {
+  background-position: -840px -80px;
+}
+.emoji-womans_hat {
+  background-position: -840px -100px;
+}
+.emoji-womens {
+  background-position: -840px -120px;
+}
+.emoji-worried {
+  background-position: -840px -140px;
+}
+.emoji-wrench {
+  background-position: -840px -160px;
+}
+.emoji-wrestlers {
+  background-position: -840px -180px;
+}
+.emoji-wrestlers_tone1 {
+  background-position: -840px -200px;
+}
+.emoji-wrestlers_tone2 {
+  background-position: -840px -220px;
+}
+.emoji-wrestlers_tone3 {
+  background-position: -840px -240px;
+}
+.emoji-wrestlers_tone4 {
+  background-position: -840px -260px;
+}
+.emoji-wrestlers_tone5 {
+  background-position: -840px -280px;
+}
+.emoji-writing_hand {
+  background-position: -840px -300px;
+}
+.emoji-writing_hand_tone1 {
+  background-position: -840px -320px;
+}
+.emoji-writing_hand_tone2 {
+  background-position: -840px -340px;
+}
+.emoji-writing_hand_tone3 {
+  background-position: -840px -360px;
+}
+.emoji-writing_hand_tone4 {
+  background-position: -840px -380px;
+}
+.emoji-writing_hand_tone5 {
+  background-position: -840px -400px;
+}
+.emoji-x {
+  background-position: -840px -420px;
+}
+.emoji-yellow_heart {
+  background-position: -840px -440px;
+}
+.emoji-yen {
+  background-position: -840px -460px;
+}
+.emoji-yin_yang {
+  background-position: -840px -480px;
+}
+.emoji-yum {
+  background-position: -840px -500px;
+}
+.emoji-zap {
+  background-position: -840px -520px;
+}
+.emoji-zero {
+  background-position: -840px -540px;
+}
+.emoji-zipper_mouth {
+  background-position: -840px -560px;
+}
+.emoji-100 {
+  background-position: -840px -580px;
+}
+
+.emoji-icon {
+  background-image: image-url('emoji.png');
+  background-repeat: no-repeat;
+  color: transparent;
+  text-indent: -99em;
+  height: 20px;
+  width: 20px;
+
+  @media only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+    background-image: image-url('emoji@2x.png');
+    background-size: 860px 840px;
+  }
+}
diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss
new file mode 100644
index 00000000000..658e0ff638e
--- /dev/null
+++ b/app/assets/stylesheets/errors.scss
@@ -0,0 +1,120 @@
+/*
+ * This is a minimal stylesheet, meant to be used for error pages.
+ */
+@import 'framework/variables';
+@import '../../../node_modules/bootstrap/scss/functions';
+@import '../../../node_modules/bootstrap/scss/variables';
+@import '../../../node_modules/bootstrap/scss/mixins';
+@import '../../../node_modules/bootstrap/scss/reboot';
+@import '../../../node_modules/bootstrap/scss/buttons';
+@import '../../../node_modules/bootstrap/scss/forms';
+
+$body-color: #666;
+$header-color: #456;
+
+body {
+  color: $body-color;
+  text-align: center;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: auto;
+  font-size: 14px;
+}
+
+h1 {
+  font-size: 56px;
+  line-height: 100px;
+  font-weight: 400;
+  color: $header-color;
+}
+
+h2 {
+  font-size: 24px;
+  color: $body-color;
+  line-height: 1.5em;
+}
+
+h3 {
+  color: $header-color;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+}
+
+img {
+  max-width: 80vw;
+  display: block;
+  margin: 40px auto;
+}
+
+a {
+  text-decoration: none;
+  color: $blue-600;
+}
+
+.page-container {
+  margin: auto 20px;
+}
+
+.container {
+  margin: auto;
+  max-width: 600px;
+  border-bottom: 1px solid $border-color;
+  padding-bottom: 1em;
+}
+
+.action-container {
+  padding: 0.5em 0;
+}
+
+.form-inline-flex {
+  display: flex;
+  flex-wrap: wrap;
+
+  button {
+    display: block;
+    width: 100%;
+  }
+
+  .field {
+    display: block;
+    width: 100%;
+    margin-bottom: 1em;
+  }
+
+  @include media-breakpoint-up(sm) {
+    flex-wrap: nowrap;
+
+    button {
+      width: auto;
+    }
+
+    .field {
+      margin-bottom: 0;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+.error-nav {
+  padding: 0;
+  text-align: center;
+
+  li {
+    display: block;
+    padding-bottom: 1em;
+  }
+
+  @include media-breakpoint-up(sm) {
+
+    li {
+      display: inline-block;
+      padding-bottom: 0;
+
+      &:not(:first-child)::before {
+        content: '\00B7';
+        display: inline-block;
+        padding: 0 1em;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 2fccfa4011c..c46b0b5db09 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -1,64 +1,65 @@
-@import "framework/variables";
-@import "framework/mixins";
-@import 'framework/tw_bootstrap_variables';
-@import 'framework/tw_bootstrap';
-@import "framework/layout";
+@import 'framework/variables';
+@import 'framework/mixins';
 
-@import "framework/animations";
-@import "framework/vue_transitions";
-@import "framework/avatar";
-@import "framework/asciidoctor";
-@import "framework/banner";
-@import "framework/blocks";
-@import "framework/buttons";
-@import "framework/badges";
-@import "framework/calendar";
-@import "framework/callout";
-@import "framework/common";
-@import "framework/dropdowns";
-@import "framework/files";
-@import "framework/filters";
-@import "framework/flash";
-@import "framework/forms";
-@import "framework/gfm";
-@import "framework/gitlab_theme";
-@import "framework/header";
-@import "framework/highlight";
-@import "framework/issue_box";
-@import "framework/jquery";
-@import "framework/lists";
-@import "framework/logo";
-@import "framework/markdown_area";
-@import "framework/media_object";
-@import "framework/mobile";
-@import "framework/modal";
-@import "framework/pagination";
-@import "framework/panels";
-@import "framework/popup";
-@import "framework/secondary_navigation_elements";
-@import "framework/selects";
-@import "framework/sidebar";
-@import "framework/contextual_sidebar";
-@import "framework/tables";
-@import "framework/notes";
-@import "framework/tabs";
-@import "framework/timeline";
-@import "framework/tooltips";
-@import "framework/toggle";
-@import "framework/typography";
-@import "framework/zen";
-@import "framework/blank";
-@import "framework/wells";
-@import "framework/page_header";
-@import "framework/awards";
-@import "framework/images";
-@import "framework/broadcast_messages";
-@import "framework/emojis";
-@import "framework/emoji_sprites";
-@import "framework/icons";
-@import "framework/snippets";
-@import "framework/memory_graph";
-@import "framework/responsive_tables";
-@import "framework/stacked_progress_bar";
-@import "framework/ci_variable_list";
-@import "framework/feature_highlight";
+@import 'bootstrap';
+@import 'bootstrap_migration';
+@import 'framework/layout';
+
+@import 'framework/animations';
+@import 'framework/vue_transitions';
+@import 'framework/avatar';
+@import 'framework/asciidoctor';
+@import 'framework/banner';
+@import 'framework/blocks';
+@import 'framework/buttons';
+@import 'framework/badges';
+@import 'framework/calendar';
+@import 'framework/callout';
+@import 'framework/common';
+@import 'framework/dropdowns';
+@import 'framework/files';
+@import 'framework/filters';
+@import 'framework/flash';
+@import 'framework/forms';
+@import 'framework/gfm';
+@import 'framework/gitlab_theme';
+@import 'framework/header';
+@import 'framework/highlight';
+@import 'framework/issue_box';
+@import 'framework/jquery';
+@import 'framework/lists';
+@import 'framework/logo';
+@import 'framework/markdown_area';
+@import 'framework/media_object';
+@import 'framework/mobile';
+@import 'framework/modal';
+@import 'framework/pagination';
+@import 'framework/panels';
+@import 'framework/popup';
+@import 'framework/secondary_navigation_elements';
+@import 'framework/selects';
+@import 'framework/sidebar';
+@import 'framework/contextual_sidebar';
+@import 'framework/tables';
+@import 'framework/notes';
+@import 'framework/tabs';
+@import 'framework/timeline';
+@import 'framework/tooltips';
+@import 'framework/toggle';
+@import 'framework/typography';
+@import 'framework/zen';
+@import 'framework/blank';
+@import 'framework/wells';
+@import 'framework/page_header';
+@import 'framework/awards';
+@import 'framework/images';
+@import 'framework/broadcast_messages';
+@import 'framework/emojis';
+@import 'framework/icons';
+@import 'framework/snippets';
+@import 'framework/memory_graph';
+@import 'framework/responsive_tables';
+@import 'framework/stacked_progress_bar';
+@import 'framework/ci_variable_list';
+@import 'framework/feature_highlight';
+@import 'framework/terms';
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 728f9a27aca..549a8730301 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -187,12 +187,9 @@ a {
   animation: fadeInFull $fade-in-duration 1;
 }
 
-
 .animation-container {
-  background: $repo-editor-grey;
   height: 40px;
   overflow: hidden;
-  position: relative;
 
   &.animation-container-small {
     height: 12px;
@@ -205,60 +202,43 @@ a {
     }
   }
 
-  &::before {
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
-    animation-iteration-count: infinite;
-    animation-name: blockTextShine;
-    animation-timing-function: linear;
-    background-image: $repo-editor-linear-gradient;
-    background-repeat: no-repeat;
-    background-size: 800px 45px;
-    content: ' ';
-    display: block;
-    height: 100%;
+  [class^="skeleton-line-"] {
     position: relative;
-  }
-
-  div {
-    background: $white-light;
-    height: 6px;
-    left: 0;
-    position: absolute;
-    right: 0;
-  }
-
-  .skeleton-line-1 {
-    left: 0;
-    top: 8px;
-  }
-
-  .skeleton-line-2 {
-    left: 150px;
-    top: 0;
+    background-color: $theme-gray-100;
     height: 10px;
-  }
+    overflow: hidden;
 
-  .skeleton-line-3 {
-    left: 0;
-    top: 23px;
-  }
+    &:not(:last-of-type) {
+      margin-bottom: 4px;
+    }
 
-  .skeleton-line-4 {
-    left: 0;
-    top: 38px;
+    &::after {
+      content: ' ';
+      display: block;
+      animation: blockTextShine 1s linear infinite forwards;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-image: linear-gradient(
+        to right,
+        $theme-gray-100 0%,
+        $theme-gray-50 20%,
+        $theme-gray-100 40%,
+        $theme-gray-100 100%
+      );
+      height: 10px;
+    }
   }
+}
 
-  .skeleton-line-5 {
-    left: 200px;
-    top: 28px;
-    height: 10px;
-  }
+$skeleton-line-widths: (
+  156px,
+  235px,
+  200px,
+);
 
-  .skeleton-line-6 {
-    top: 14px;
-    left: 230px;
-    height: 10px;
+@for $count from 1 through length($skeleton-line-widths) {
+  .skeleton-line-#{$count} {
+    width: nth($skeleton-line-widths, $count);
   }
 }
 
@@ -271,3 +251,12 @@ a {
     transform: translateX(468px);
   }
 }
+
+.slide-down-enter-active {
+  transition: transform 0.2s;
+}
+
+.slide-down-enter,
+.slide-down-leave-to {
+  transform: translateY(-30%);
+}
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 077d0424093..c1ec11e434a 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -31,7 +31,7 @@
 
 .avatar {
   @extend .avatar-circle;
-  @include transition-property(none);
+  transition-property: none;
 
   width: 40px;
   height: 40px;
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index 6bbe32df772..57df9b969c3 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -1,4 +1,4 @@
-.badge {
+.badge.badge-pill {
   font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
   color: $badge-color;
diff --git a/app/assets/stylesheets/framework/banner.scss b/app/assets/stylesheets/framework/banner.scss
index 6433b0c7855..71bbab2065d 100644
--- a/app/assets/stylesheets/framework/banner.scss
+++ b/app/assets/stylesheets/framework/banner.scss
@@ -1,7 +1,7 @@
 .banner-callout {
   display: flex;
   position: relative;
-  flex-wrap: wrap;
+  align-items: start;
 
   .banner-close {
     position: absolute;
@@ -16,10 +16,25 @@
   }
 
   .banner-graphic {
-    margin: 20px auto;
+    margin: 0 $gl-padding $gl-padding 0;
   }
 
   &.banner-non-empty-state {
     border-bottom: 1px solid $border-color;
   }
+
+  @include media-breakpoint-down(xs) {
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+
+    .banner-title,
+    .banner-buttons {
+      text-align: center;
+    }
+
+    .banner-graphic {
+      margin-left: $gl-padding;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index 9982a5779af..91dbb2a6365 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -37,7 +37,7 @@
   flex: 0 0 100%;
   margin-bottom: 15px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     flex: 0 0 49%;
 
     &:nth-child(odd) {
@@ -67,7 +67,7 @@
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     display: flex;
     align-items: center;
     padding: 50px 30px;
@@ -89,12 +89,12 @@
   }
 
   .blank-state-body {
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       text-align: center;
       margin-top: 20px;
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       padding-left: 20px;
     }
   }
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index c5c7afe25be..1d4828be223 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -13,9 +13,11 @@
 
   &.diff-collapsed {
     padding: 5px;
+    line-height: 34px;
 
     .click-to-expand {
       cursor: pointer;
+      vertical-align: initial;
     }
   }
 }
@@ -46,7 +48,7 @@
   }
 
   &.middle-block {
-    margin-top: 0;
+    margin-top: $gl-padding-24;
     margin-bottom: 0;
   }
 
@@ -61,7 +63,7 @@
   }
 
   &.footer-block {
-    margin-top: 0;
+    margin-top: $gl-padding-24;
     border-bottom: 0;
     margin-bottom: -$gl-padding;
   }
@@ -151,7 +153,7 @@
       display: inline-block;
       margin-left: 5px;
       font-size: 18px;
-      color: $gray;
+      color: color("gray");
     }
 
     p {
@@ -195,7 +197,7 @@
       }
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       text-align: center;
 
       .avatar {
@@ -315,7 +317,7 @@
     }
   }
 
-  @media (max-width: $screen-sm-min) {
+  @include media-breakpoint-down(sm) {
     flex-direction: column;
 
     .inner-content {
@@ -342,7 +344,7 @@
   .btn {
     margin: $btn-side-margin 5px;
 
-    @media(max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
   }
diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss
index 9b54fb94cdc..d3e7d751e63 100644
--- a/app/assets/stylesheets/framework/broadcast_messages.scss
+++ b/app/assets/stylesheets/framework/broadcast_messages.scss
@@ -19,3 +19,9 @@
   @extend .broadcast-message;
   margin-bottom: 20px;
 }
+
+.toggle-colors {
+  input {
+    min-height: 34px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 6b89387ab5f..523fcb05a87 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -106,10 +106,6 @@
   @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-light);
 }
 
-@mixin btn-gray {
-  @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-text-color);
-}
-
 @mixin btn-white {
   @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color);
 }
@@ -125,10 +121,6 @@
   &.btn-sm {
     margin-left: $btn-sm-side-margin;
   }
-
-  &.btn-xs {
-    margin-left: $btn-xs-side-margin;
-  }
 }
 
 @mixin btn-svg {
@@ -154,10 +146,6 @@
     line-height: 18px;
   }
 
-  &.btn-xs {
-    padding: 2px 5px;
-  }
-
   &.btn-success,
   &.btn-new,
   &.btn-create,
@@ -183,10 +171,6 @@
     }
   }
 
-  &.btn-gray {
-    @include btn-gray;
-  }
-
   &.btn-info,
   &.btn-primary,
   &.btn-register {
@@ -312,7 +296,8 @@
   padding: 0 5px;
 }
 
-.input-group-btn {
+.input-group-prepend,
+.input-group-append {
   .btn {
     @include btn-middle;
 
@@ -401,7 +386,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .btn-wide-on-xs {
     width: 100%;
   }
@@ -422,25 +407,43 @@
   }
 }
 
-.btn-link.btn-secondary-hover-link {
-  color: $gl-text-color-secondary;
+.btn-link {
+  padding: 0;
+  background-color: transparent;
+  color: $blue-600;
+  font-weight: normal;
+  border-radius: 0;
+  border-color: transparent;
 
   &:hover,
   &:active,
   &:focus {
-    color: $gl-link-color;
-    text-decoration: none;
+    color: $blue-800;
+    text-decoration: underline;
+    background-color: transparent;
+    border-color: transparent;
   }
-}
 
-.btn-link.btn-primary-hover-link {
-  color: inherit;
+  &.btn-secondary-hover-link {
+    color: $gl-text-color-secondary;
 
-  &:hover,
-  &:active,
-  &:focus {
-    color: $gl-link-color;
-    text-decoration: none;
+    &:hover,
+    &:active,
+    &:focus {
+      color: $gl-link-color;
+      text-decoration: none;
+    }
+  }
+
+  &.btn-primary-hover-link {
+    color: inherit;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $gl-link-color;
+      text-decoration: none;
+    }
   }
 }
 
@@ -485,3 +488,11 @@ fieldset[disabled] .btn,
     @extend %disabled;
   }
 }
+
+[readonly] {
+  cursor: default;
+}
+
+.btn-no-padding {
+  padding: 0;
+}
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index c165ec0b94b..0b9dff64b0b 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -4,7 +4,7 @@
   border-top: 0;
   direction: rtl;
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+  @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
     overflow-x: auto;
   }
 }
diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss
index 5fe835dd8f9..7207e5119ce 100644
--- a/app/assets/stylesheets/framework/ci_variable_list.scss
+++ b/app/assets/stylesheets/framework/ci_variable_list.scss
@@ -10,14 +10,14 @@
   display: flex;
   align-items: flex-start;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     align-items: flex-end;
   }
 
   &:not(:last-child) {
     margin-bottom: $gl-btn-padding;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       margin-bottom: 3 * $gl-btn-padding;
     }
   }
@@ -26,7 +26,7 @@
     .ci-variable-body-item:last-child {
       margin-right: $ci-variable-remove-button-width;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         margin-right: 0;
       }
     }
@@ -35,7 +35,7 @@
       display: none;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       .ci-variable-row-body {
         margin-right: $ci-variable-remove-button-width;
       }
@@ -48,7 +48,7 @@
   align-items: flex-start;
   width: 100%;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
   }
 }
@@ -59,7 +59,7 @@
   &:not(:last-child) {
     margin-right: $gl-btn-padding;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       margin-right: 0;
       margin-bottom: $gl-btn-padding;
     }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index d0dda50a835..326499125fc 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -70,7 +70,7 @@ pre {
     padding: 0;
   }
 
-  &.well-pre {
+  &.card.card-body-pre {
     border: 1px solid $well-pre-bg;
     background: $gray-light;
     border-radius: 0;
@@ -218,7 +218,7 @@ li.note {
 }
 
 .git_error_tips {
-  @extend .col-md-6;
+  @extend .col-lg-6;
   text-align: left;
   margin-top: 40px;
 
@@ -305,14 +305,6 @@ img.emoji {
   margin-bottom: 10px;
 }
 
-.btn-sign-in {
-  text-shadow: none;
-
-  @media (min-width: $screen-sm-min) {
-    margin-top: 8px;
-  }
-}
-
 .side-filters {
   fieldset {
     margin-bottom: 15px;
@@ -327,7 +319,7 @@ img.emoji {
   }
 }
 
-.well {
+.card.card-body {
   margin-bottom: $gl-padding;
 
   hr {
@@ -336,7 +328,7 @@ img.emoji {
 }
 
 .search_box {
-  @extend .well;
+  @extend .card.card-body;
   text-align: center;
 }
 
@@ -452,6 +444,7 @@ img.emoji {
 
 /** COMMON CLASSES **/
 .prepend-top-0 { margin-top: 0; }
+.prepend-top-2 { margin-top: 2px; }
 .prepend-top-5 { margin-top: 5px; }
 .prepend-top-8 { margin-top: $grid-size; }
 .prepend-top-10 { margin-top: 10px; }
@@ -472,6 +465,7 @@ img.emoji {
 .append-right-20 { margin-right: 20px; }
 .append-bottom-0 { margin-bottom: 0; }
 .append-bottom-5 { margin-bottom: 5px; }
+.append-bottom-8 { margin-bottom: $grid-size; }
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-15 { margin-bottom: 15px; }
 .append-bottom-20 { margin-bottom: 20px; }
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index e2d97d0298f..9cbaaa5dc8d 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -1,11 +1,11 @@
 .page-with-contextual-sidebar {
   transition: padding-left $sidebar-transition-duration;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     padding-left: $contextual-sidebar-collapsed-width;
   }
 
-  @media (min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     padding-left: $contextual-sidebar-width;
   }
 
@@ -16,7 +16,7 @@
 }
 
 .page-with-icon-sidebar {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-left: $contextual-sidebar-collapsed-width;
   }
 }
@@ -26,19 +26,25 @@
   margin-right: 2px;
   width: $contextual-sidebar-width;
 
-  a {
+  > a,
+  > button {
     transition: padding $sidebar-transition-duration;
     font-weight: $gl-font-weight-bold;
     display: flex;
+    width: 100%;
     align-items: center;
     padding: 10px 16px 10px 10px;
     color: $gl-text-color;
-  }
+    background-color: transparent;
+    border: 0;
+    text-align: left;
 
-  &:hover,
-  a:hover {
-    background-color: $link-hover-background;
-    color: $gl-text-color;
+    &:hover,
+    &:focus {
+      background-color: $link-hover-background;
+      color: $gl-text-color;
+      outline: 0;
+    }
   }
 
   .avatar-container {
@@ -75,7 +81,7 @@
   transform: translate3d(0, 0, 0);
 
   &:not(.sidebar-collapsed-desktop) {
-    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+    @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
       box-shadow: inset -2px 0 0 $border-color,
         2px 1px 3px $dropdown-shadow-color;
     }
@@ -88,7 +94,7 @@
       overflow-x: hidden;
     }
 
-    .badge:not(.fly-out-badge),
+    .badge.badge-pill:not(.fly-out-badge),
     .sidebar-context-title,
     .nav-item-name {
       display: none;
@@ -142,7 +148,7 @@
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     left: (-$contextual-sidebar-width);
   }
 
@@ -166,7 +172,7 @@
   width: 100%;
   overflow: auto;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     overflow: hidden;
   }
 }
@@ -207,7 +213,7 @@
 
   > li {
     > a {
-      @media (min-width: $screen-sm-min) {
+      @include media-breakpoint-up(sm) {
         margin-right: 2px;
       }
 
@@ -222,7 +228,7 @@
       }
 
       .sidebar-sub-level-items {
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up(sm) {
           position: fixed;
           top: 0;
           left: 0;
@@ -277,7 +283,7 @@
       }
     }
 
-    .badge {
+    .badge.badge-pill {
       background-color: $inactive-badge-background;
       color: $gl-text-color-secondary;
     }
@@ -291,7 +297,7 @@
         padding-left: 11px;
       }
 
-      .badge {
+      .badge.badge-pill {
         font-weight: $gl-font-weight-bold;
       }
 
@@ -339,7 +345,7 @@
 }
 
 .toggle-sidebar-button {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: none;
   }
 }
@@ -420,7 +426,7 @@
     color: $gl-text-color-secondary;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: flex;
     align-items: center;
 
@@ -429,7 +435,7 @@
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     + .breadcrumbs-links {
       padding-left: $gl-padding;
       border-left: 1px solid $gl-text-color-quaternary;
@@ -437,7 +443,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .close-nav-button {
     display: flex;
   }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 6397757bf88..74475daae14 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -24,7 +24,7 @@
   display: none;
 }
 
-.open {
+.show.dropdown {
   .dropdown-menu,
   .dropdown-menu-nav {
     @include set-visible;
@@ -32,9 +32,15 @@
     max-height: $dropdown-max-height;
     overflow-y: auto;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
+
+    &.projects-dropdown-menu {
+      padding: 0;
+      overflow-y: initial;
+      max-height: initial;
+    }
   }
 
   .dropdown-toggle,
@@ -43,7 +49,7 @@
     border-color: $gray-darkest;
   }
 
-  [data-toggle="dropdown"] {
+  [data-toggle='dropdown'] {
     outline: 0;
   }
 }
@@ -63,6 +69,10 @@
   border-radius: $border-radius-base;
   white-space: nowrap;
 
+  &:disabled.read-only {
+    color: $gl-text-color !important;
+  }
+
   &.no-outline {
     outline: 0;
   }
@@ -172,7 +182,11 @@
     color: $brand-danger;
   }
 
-  &:hover,
+  &.disable-hover {
+    text-decoration: none;
+  }
+
+  &:not(.disable-hover):hover,
   &:active,
   &:focus,
   &.is-focused {
@@ -180,7 +194,7 @@
 
     text-decoration: none;
 
-    .badge {
+    .badge.badge-pill {
       background-color: darken($dropdown-link-hover-bg, 5%);
     }
   }
@@ -206,11 +220,10 @@
 
 .dropdown-menu,
 .dropdown-menu-nav {
-  @include set-invisible;
+  display: none;
   position: absolute;
   width: auto;
   top: 100%;
-  left: 0;
   z-index: 300;
   min-width: 240px;
   max-width: 500px;
@@ -324,7 +337,7 @@
     color: $gl-text-color-secondary;
   }
 
-  .badge + span:not(.badge) {
+  .badge.badge-pill + span:not(.badge.badge-pill) {
     // Expects up to 3 digits on the badge
     margin-right: 40px;
   }
@@ -388,7 +401,7 @@
   transform: translateY(0);
 }
 
-.comment-type-dropdown.open .dropdown-menu {
+.comment-type-dropdown.show .dropdown-menu {
   display: block;
 }
 
@@ -469,19 +482,15 @@
 .dropdown-select {
   width: $dropdown-width;
 
-  @media (max-width: $screen-sm-min) {
+  @include media-breakpoint-down(sm) {
     width: 100%;
   }
 }
 
-.dropdown-menu-align-right {
-  left: auto;
-  right: 0;
-}
-
 .dropdown-menu-selectable {
   li {
-    a {
+    a,
+    button {
       padding: 8px 40px;
       position: relative;
 
@@ -507,17 +516,16 @@
       }
 
       &.is-indeterminate::before {
-        content: "\f068";
+        content: '\f068';
       }
 
       &.is-active::before {
-        content: "\f00c";
+        content: '\f00c';
       }
     }
   }
 }
 
-
 .dropdown-title {
   position: relative;
   padding: 2px 25px 10px;
@@ -622,7 +630,7 @@
 }
 
 .dropdown-content {
-  max-height: $dropdown-max-height;
+  max-height: 252px;
   overflow-y: auto;
 }
 
@@ -699,6 +707,30 @@
   border-radius: $border-radius-base;
 }
 
+.git-revision-dropdown {
+  .dropdown-content {
+    max-height: 215px;
+  }
+}
+
+.sidebar-move-issue-dropdown {
+  .dropdown-content {
+    max-height: 160px;
+  }
+}
+
+.dropdown-menu-author {
+  .dropdown-content {
+    max-height: 215px;
+  }
+}
+
+.dropdown-menu-labels {
+  .dropdown-content {
+    max-height: 128px;
+  }
+}
+
 .dropdown-menu-due-date {
   .dropdown-content {
     max-height: 230px;
@@ -755,7 +787,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .navbar-gitlab {
     li.header-projects,
     li.header-more,
@@ -810,7 +842,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     width: 70%;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-direction: column;
     width: 100%;
     height: auto;
@@ -828,9 +860,13 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
   }
 
   .projects-list-frequent-container,
-  .projects-list-search-container, {
+  .projects-list-search-container {
     padding: 8px 0;
     overflow-y: auto;
+
+    li.section-empty.section-failure {
+      color: $callout-danger-color;
+    }
   }
 
   .section-header,
@@ -841,13 +877,6 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     font-size: $gl-font-size;
   }
 
-  .projects-list-frequent-container,
-  .projects-list-search-container {
-    li.section-empty.section-failure {
-      color: $callout-danger-color;
-    }
-  }
-
   .search-input-container {
     position: relative;
     padding: 4px $gl-padding;
@@ -869,7 +898,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     height: 284px;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .projects-list-frequent-container {
       width: auto;
       height: auto;
@@ -879,8 +908,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
 }
 
 .projects-list-item-container {
-  .project-item-avatar-container
-  .project-item-metadata-container {
+  .project-item-avatar-container .project-item-metadata-container {
     float: left;
   }
 
@@ -911,7 +939,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     color: $gl-text-color-secondary;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .project-item-metadata-container {
       float: none;
     }
diff --git a/app/assets/stylesheets/framework/emoji_sprites.scss b/app/assets/stylesheets/framework/emoji_sprites.scss
deleted file mode 100644
index 0174e17b660..00000000000
--- a/app/assets/stylesheets/framework/emoji_sprites.scss
+++ /dev/null
@@ -1,1813 +0,0 @@
-.emoji-zzz { background-position: 0 0; }
-.emoji-1234 { background-position: -20px 0; }
-.emoji-1F627 { background-position: 0 -20px; }
-.emoji-8ball { background-position: -20px -20px; }
-.emoji-a { background-position: -40px 0; }
-.emoji-ab { background-position: -40px -20px; }
-.emoji-abc { background-position: 0 -40px; }
-.emoji-abcd { background-position: -20px -40px; }
-.emoji-accept { background-position: -40px -40px; }
-.emoji-aerial_tramway { background-position: -60px 0; }
-.emoji-airplane { background-position: -60px -20px; }
-.emoji-airplane_arriving { background-position: -60px -40px; }
-.emoji-airplane_departure { background-position: 0 -60px; }
-.emoji-airplane_small { background-position: -20px -60px; }
-.emoji-alarm_clock { background-position: -40px -60px; }
-.emoji-alembic { background-position: -60px -60px; }
-.emoji-alien { background-position: -80px 0; }
-.emoji-ambulance { background-position: -80px -20px; }
-.emoji-amphora { background-position: -80px -40px; }
-.emoji-anchor { background-position: -80px -60px; }
-.emoji-angel { background-position: 0 -80px; }
-.emoji-angel_tone1 { background-position: -20px -80px; }
-.emoji-angel_tone2 { background-position: -40px -80px; }
-.emoji-angel_tone3 { background-position: -60px -80px; }
-.emoji-angel_tone4 { background-position: -80px -80px; }
-.emoji-angel_tone5 { background-position: -100px 0; }
-.emoji-anger { background-position: -100px -20px; }
-.emoji-anger_right { background-position: -100px -40px; }
-.emoji-angry { background-position: -100px -60px; }
-.emoji-ant { background-position: -100px -80px; }
-.emoji-apple { background-position: 0 -100px; }
-.emoji-aquarius { background-position: -20px -100px; }
-.emoji-aries { background-position: -40px -100px; }
-.emoji-arrow_backward { background-position: -60px -100px; }
-.emoji-arrow_double_down { background-position: -80px -100px; }
-.emoji-arrow_double_up { background-position: -100px -100px; }
-.emoji-arrow_down { background-position: -120px 0; }
-.emoji-arrow_down_small { background-position: -120px -20px; }
-.emoji-arrow_forward { background-position: -120px -40px; }
-.emoji-arrow_heading_down { background-position: -120px -60px; }
-.emoji-arrow_heading_up { background-position: -120px -80px; }
-.emoji-arrow_left { background-position: -120px -100px; }
-.emoji-arrow_lower_left { background-position: 0 -120px; }
-.emoji-arrow_lower_right { background-position: -20px -120px; }
-.emoji-arrow_right { background-position: -40px -120px; }
-.emoji-arrow_right_hook { background-position: -60px -120px; }
-.emoji-arrow_up { background-position: -80px -120px; }
-.emoji-arrow_up_down { background-position: -100px -120px; }
-.emoji-arrow_up_small { background-position: -120px -120px; }
-.emoji-arrow_upper_left { background-position: -140px 0; }
-.emoji-arrow_upper_right { background-position: -140px -20px; }
-.emoji-arrows_clockwise { background-position: -140px -40px; }
-.emoji-arrows_counterclockwise { background-position: -140px -60px; }
-.emoji-art { background-position: -140px -80px; }
-.emoji-articulated_lorry { background-position: -140px -100px; }
-.emoji-asterisk { background-position: -140px -120px; }
-.emoji-astonished { background-position: 0 -140px; }
-.emoji-athletic_shoe { background-position: -20px -140px; }
-.emoji-atm { background-position: -40px -140px; }
-.emoji-atom { background-position: -60px -140px; }
-.emoji-avocado { background-position: -80px -140px; }
-.emoji-b { background-position: -100px -140px; }
-.emoji-baby { background-position: -120px -140px; }
-.emoji-baby_bottle { background-position: -140px -140px; }
-.emoji-baby_chick { background-position: -160px 0; }
-.emoji-baby_symbol { background-position: -160px -20px; }
-.emoji-baby_tone1 { background-position: -160px -40px; }
-.emoji-baby_tone2 { background-position: -160px -60px; }
-.emoji-baby_tone3 { background-position: -160px -80px; }
-.emoji-baby_tone4 { background-position: -160px -100px; }
-.emoji-baby_tone5 { background-position: -160px -120px; }
-.emoji-back { background-position: -160px -140px; }
-.emoji-bacon { background-position: 0 -160px; }
-.emoji-badminton { background-position: -20px -160px; }
-.emoji-baggage_claim { background-position: -40px -160px; }
-.emoji-balloon { background-position: -60px -160px; }
-.emoji-ballot_box { background-position: -80px -160px; }
-.emoji-ballot_box_with_check { background-position: -100px -160px; }
-.emoji-bamboo { background-position: -120px -160px; }
-.emoji-banana { background-position: -140px -160px; }
-.emoji-bangbang { background-position: -160px -160px; }
-.emoji-bank { background-position: -180px 0; }
-.emoji-bar_chart { background-position: -180px -20px; }
-.emoji-barber { background-position: -180px -40px; }
-.emoji-baseball { background-position: -180px -60px; }
-.emoji-basketball { background-position: -180px -80px; }
-.emoji-basketball_player { background-position: -180px -100px; }
-.emoji-basketball_player_tone1 { background-position: -180px -120px; }
-.emoji-basketball_player_tone2 { background-position: -180px -140px; }
-.emoji-basketball_player_tone3 { background-position: -180px -160px; }
-.emoji-basketball_player_tone4 { background-position: 0 -180px; }
-.emoji-basketball_player_tone5 { background-position: -20px -180px; }
-.emoji-bat { background-position: -40px -180px; }
-.emoji-bath { background-position: -60px -180px; }
-.emoji-bath_tone1 { background-position: -80px -180px; }
-.emoji-bath_tone2 { background-position: -100px -180px; }
-.emoji-bath_tone3 { background-position: -120px -180px; }
-.emoji-bath_tone4 { background-position: -140px -180px; }
-.emoji-bath_tone5 { background-position: -160px -180px; }
-.emoji-bathtub { background-position: -180px -180px; }
-.emoji-battery { background-position: -200px 0; }
-.emoji-beach { background-position: -200px -20px; }
-.emoji-beach_umbrella { background-position: -200px -40px; }
-.emoji-bear { background-position: -200px -60px; }
-.emoji-bed { background-position: -200px -80px; }
-.emoji-bee { background-position: -200px -100px; }
-.emoji-beer { background-position: -200px -120px; }
-.emoji-beers { background-position: -200px -140px; }
-.emoji-beetle { background-position: -200px -160px; }
-.emoji-beginner { background-position: -200px -180px; }
-.emoji-bell { background-position: 0 -200px; }
-.emoji-bellhop { background-position: -20px -200px; }
-.emoji-bento { background-position: -40px -200px; }
-.emoji-bicyclist { background-position: -60px -200px; }
-.emoji-bicyclist_tone1 { background-position: -80px -200px; }
-.emoji-bicyclist_tone2 { background-position: -100px -200px; }
-.emoji-bicyclist_tone3 { background-position: -120px -200px; }
-.emoji-bicyclist_tone4 { background-position: -140px -200px; }
-.emoji-bicyclist_tone5 { background-position: -160px -200px; }
-.emoji-bike { background-position: -180px -200px; }
-.emoji-bikini { background-position: -200px -200px; }
-.emoji-biohazard { background-position: -220px 0; }
-.emoji-bird { background-position: -220px -20px; }
-.emoji-birthday { background-position: -220px -40px; }
-.emoji-black_circle { background-position: -220px -60px; }
-.emoji-black_heart { background-position: -220px -80px; }
-.emoji-black_joker { background-position: -220px -100px; }
-.emoji-black_large_square { background-position: -220px -120px; }
-.emoji-black_medium_small_square { background-position: -220px -140px; }
-.emoji-black_medium_square { background-position: -220px -160px; }
-.emoji-black_nib { background-position: -220px -180px; }
-.emoji-black_small_square { background-position: -220px -200px; }
-.emoji-black_square_button { background-position: 0 -220px; }
-.emoji-blossom { background-position: -20px -220px; }
-.emoji-blowfish { background-position: -40px -220px; }
-.emoji-blue_book { background-position: -60px -220px; }
-.emoji-blue_car { background-position: -80px -220px; }
-.emoji-blue_heart { background-position: -100px -220px; }
-.emoji-blush { background-position: -120px -220px; }
-.emoji-boar { background-position: -140px -220px; }
-.emoji-bomb { background-position: -160px -220px; }
-.emoji-book { background-position: -180px -220px; }
-.emoji-bookmark { background-position: -200px -220px; }
-.emoji-bookmark_tabs { background-position: -220px -220px; }
-.emoji-books { background-position: -240px 0; }
-.emoji-boom { background-position: -240px -20px; }
-.emoji-boot { background-position: -240px -40px; }
-.emoji-bouquet { background-position: -240px -60px; }
-.emoji-bow { background-position: -240px -80px; }
-.emoji-bow_and_arrow { background-position: -240px -100px; }
-.emoji-bow_tone1 { background-position: -240px -120px; }
-.emoji-bow_tone2 { background-position: -240px -140px; }
-.emoji-bow_tone3 { background-position: -240px -160px; }
-.emoji-bow_tone4 { background-position: -240px -180px; }
-.emoji-bow_tone5 { background-position: -240px -200px; }
-.emoji-bowling { background-position: -240px -220px; }
-.emoji-boxing_glove { background-position: 0 -240px; }
-.emoji-boy { background-position: -20px -240px; }
-.emoji-boy_tone1 { background-position: -40px -240px; }
-.emoji-boy_tone2 { background-position: -60px -240px; }
-.emoji-boy_tone3 { background-position: -80px -240px; }
-.emoji-boy_tone4 { background-position: -100px -240px; }
-.emoji-boy_tone5 { background-position: -120px -240px; }
-.emoji-bread { background-position: -140px -240px; }
-.emoji-bride_with_veil { background-position: -160px -240px; }
-.emoji-bride_with_veil_tone1 { background-position: -180px -240px; }
-.emoji-bride_with_veil_tone2 { background-position: -200px -240px; }
-.emoji-bride_with_veil_tone3 { background-position: -220px -240px; }
-.emoji-bride_with_veil_tone4 { background-position: -240px -240px; }
-.emoji-bride_with_veil_tone5 { background-position: -260px 0; }
-.emoji-bridge_at_night { background-position: -260px -20px; }
-.emoji-briefcase { background-position: -260px -40px; }
-.emoji-broken_heart { background-position: -260px -60px; }
-.emoji-bug { background-position: -260px -80px; }
-.emoji-bulb { background-position: -260px -100px; }
-.emoji-bullettrain_front { background-position: -260px -120px; }
-.emoji-bullettrain_side { background-position: -260px -140px; }
-.emoji-burrito { background-position: -260px -160px; }
-.emoji-bus { background-position: -260px -180px; }
-.emoji-busstop { background-position: -260px -200px; }
-.emoji-bust_in_silhouette { background-position: -260px -220px; }
-.emoji-busts_in_silhouette { background-position: -260px -240px; }
-.emoji-butterfly { background-position: 0 -260px; }
-.emoji-cactus { background-position: -20px -260px; }
-.emoji-cake { background-position: -40px -260px; }
-.emoji-calendar { background-position: -60px -260px; }
-.emoji-calendar_spiral { background-position: -80px -260px; }
-.emoji-call_me { background-position: -100px -260px; }
-.emoji-call_me_tone1 { background-position: -120px -260px; }
-.emoji-call_me_tone2 { background-position: -140px -260px; }
-.emoji-call_me_tone3 { background-position: -160px -260px; }
-.emoji-call_me_tone4 { background-position: -180px -260px; }
-.emoji-call_me_tone5 { background-position: -200px -260px; }
-.emoji-calling { background-position: -220px -260px; }
-.emoji-camel { background-position: -240px -260px; }
-.emoji-camera { background-position: -260px -260px; }
-.emoji-camera_with_flash { background-position: -280px 0; }
-.emoji-camping { background-position: -280px -20px; }
-.emoji-cancer { background-position: -280px -40px; }
-.emoji-candle { background-position: -280px -60px; }
-.emoji-candy { background-position: -280px -80px; }
-.emoji-canoe { background-position: -280px -100px; }
-.emoji-capital_abcd { background-position: -280px -120px; }
-.emoji-capricorn { background-position: -280px -140px; }
-.emoji-card_box { background-position: -280px -160px; }
-.emoji-card_index { background-position: -280px -180px; }
-.emoji-carousel_horse { background-position: -280px -200px; }
-.emoji-carrot { background-position: -280px -220px; }
-.emoji-cartwheel { background-position: -280px -240px; }
-.emoji-cartwheel_tone1 { background-position: -280px -260px; }
-.emoji-cartwheel_tone2 { background-position: 0 -280px; }
-.emoji-cartwheel_tone3 { background-position: -20px -280px; }
-.emoji-cartwheel_tone4 { background-position: -40px -280px; }
-.emoji-cartwheel_tone5 { background-position: -60px -280px; }
-.emoji-cat { background-position: -80px -280px; }
-.emoji-cat2 { background-position: -100px -280px; }
-.emoji-cd { background-position: -120px -280px; }
-.emoji-chains { background-position: -140px -280px; }
-.emoji-champagne { background-position: -160px -280px; }
-.emoji-champagne_glass { background-position: -180px -280px; }
-.emoji-chart { background-position: -200px -280px; }
-.emoji-chart_with_downwards_trend { background-position: -220px -280px; }
-.emoji-chart_with_upwards_trend { background-position: -240px -280px; }
-.emoji-checkered_flag { background-position: -260px -280px; }
-.emoji-cheese { background-position: -280px -280px; }
-.emoji-cherries { background-position: -300px 0; }
-.emoji-cherry_blossom { background-position: -300px -20px; }
-.emoji-chestnut { background-position: -300px -40px; }
-.emoji-chicken { background-position: -300px -60px; }
-.emoji-children_crossing { background-position: -300px -80px; }
-.emoji-chipmunk { background-position: -300px -100px; }
-.emoji-chocolate_bar { background-position: -300px -120px; }
-.emoji-christmas_tree { background-position: -300px -140px; }
-.emoji-church { background-position: -300px -160px; }
-.emoji-cinema { background-position: -300px -180px; }
-.emoji-circus_tent { background-position: -300px -200px; }
-.emoji-city_dusk { background-position: -300px -220px; }
-.emoji-city_sunset { background-position: -300px -240px; }
-.emoji-cityscape { background-position: -300px -260px; }
-.emoji-cl { background-position: -300px -280px; }
-.emoji-clap { background-position: 0 -300px; }
-.emoji-clap_tone1 { background-position: -20px -300px; }
-.emoji-clap_tone2 { background-position: -40px -300px; }
-.emoji-clap_tone3 { background-position: -60px -300px; }
-.emoji-clap_tone4 { background-position: -80px -300px; }
-.emoji-clap_tone5 { background-position: -100px -300px; }
-.emoji-clapper { background-position: -120px -300px; }
-.emoji-classical_building { background-position: -140px -300px; }
-.emoji-clipboard { background-position: -160px -300px; }
-.emoji-clock { background-position: -180px -300px; }
-.emoji-clock1 { background-position: -200px -300px; }
-.emoji-clock10 { background-position: -220px -300px; }
-.emoji-clock1030 { background-position: -240px -300px; }
-.emoji-clock11 { background-position: -260px -300px; }
-.emoji-clock1130 { background-position: -280px -300px; }
-.emoji-clock12 { background-position: -300px -300px; }
-.emoji-clock1230 { background-position: -320px 0; }
-.emoji-clock130 { background-position: -320px -20px; }
-.emoji-clock2 { background-position: -320px -40px; }
-.emoji-clock230 { background-position: -320px -60px; }
-.emoji-clock3 { background-position: -320px -80px; }
-.emoji-clock330 { background-position: -320px -100px; }
-.emoji-clock4 { background-position: -320px -120px; }
-.emoji-clock430 { background-position: -320px -140px; }
-.emoji-clock5 { background-position: -320px -160px; }
-.emoji-clock530 { background-position: -320px -180px; }
-.emoji-clock6 { background-position: -320px -200px; }
-.emoji-clock630 { background-position: -320px -220px; }
-.emoji-clock7 { background-position: -320px -240px; }
-.emoji-clock730 { background-position: -320px -260px; }
-.emoji-clock8 { background-position: -320px -280px; }
-.emoji-clock830 { background-position: -320px -300px; }
-.emoji-clock9 { background-position: 0 -320px; }
-.emoji-clock930 { background-position: -20px -320px; }
-.emoji-closed_book { background-position: -40px -320px; }
-.emoji-closed_lock_with_key { background-position: -60px -320px; }
-.emoji-closed_umbrella { background-position: -80px -320px; }
-.emoji-cloud { background-position: -100px -320px; }
-.emoji-cloud_lightning { background-position: -120px -320px; }
-.emoji-cloud_rain { background-position: -140px -320px; }
-.emoji-cloud_snow { background-position: -160px -320px; }
-.emoji-cloud_tornado { background-position: -180px -320px; }
-.emoji-clown { background-position: -200px -320px; }
-.emoji-clubs { background-position: -220px -320px; }
-.emoji-cocktail { background-position: -240px -320px; }
-.emoji-coffee { background-position: -260px -320px; }
-.emoji-coffin { background-position: -280px -320px; }
-.emoji-cold_sweat { background-position: -300px -320px; }
-.emoji-comet { background-position: -320px -320px; }
-.emoji-compression { background-position: -340px 0; }
-.emoji-computer { background-position: -340px -20px; }
-.emoji-confetti_ball { background-position: -340px -40px; }
-.emoji-confounded { background-position: -340px -60px; }
-.emoji-confused { background-position: -340px -80px; }
-.emoji-congratulations { background-position: -340px -100px; }
-.emoji-construction { background-position: -340px -120px; }
-.emoji-construction_site { background-position: -340px -140px; }
-.emoji-construction_worker { background-position: -340px -160px; }
-.emoji-construction_worker_tone1 { background-position: -340px -180px; }
-.emoji-construction_worker_tone2 { background-position: -340px -200px; }
-.emoji-construction_worker_tone3 { background-position: -340px -220px; }
-.emoji-construction_worker_tone4 { background-position: -340px -240px; }
-.emoji-construction_worker_tone5 { background-position: -340px -260px; }
-.emoji-control_knobs { background-position: -340px -280px; }
-.emoji-convenience_store { background-position: -340px -300px; }
-.emoji-cookie { background-position: -340px -320px; }
-.emoji-cooking { background-position: 0 -340px; }
-.emoji-cool { background-position: -20px -340px; }
-.emoji-cop { background-position: -40px -340px; }
-.emoji-cop_tone1 { background-position: -60px -340px; }
-.emoji-cop_tone2 { background-position: -80px -340px; }
-.emoji-cop_tone3 { background-position: -100px -340px; }
-.emoji-cop_tone4 { background-position: -120px -340px; }
-.emoji-cop_tone5 { background-position: -140px -340px; }
-.emoji-copyright { background-position: -160px -340px; }
-.emoji-corn { background-position: -180px -340px; }
-.emoji-couch { background-position: -200px -340px; }
-.emoji-couple { background-position: -220px -340px; }
-.emoji-couple_mm { background-position: -240px -340px; }
-.emoji-couple_with_heart { background-position: -260px -340px; }
-.emoji-couple_ww { background-position: -280px -340px; }
-.emoji-couplekiss { background-position: -300px -340px; }
-.emoji-cow { background-position: -320px -340px; }
-.emoji-cow2 { background-position: -340px -340px; }
-.emoji-cowboy { background-position: -360px 0; }
-.emoji-crab { background-position: -360px -20px; }
-.emoji-crayon { background-position: -360px -40px; }
-.emoji-credit_card { background-position: -360px -60px; }
-.emoji-crescent_moon { background-position: -360px -80px; }
-.emoji-cricket { background-position: -360px -100px; }
-.emoji-crocodile { background-position: -360px -120px; }
-.emoji-croissant { background-position: -360px -140px; }
-.emoji-cross { background-position: -360px -160px; }
-.emoji-crossed_flags { background-position: -360px -180px; }
-.emoji-crossed_swords { background-position: -360px -200px; }
-.emoji-crown { background-position: -360px -220px; }
-.emoji-cruise_ship { background-position: -360px -240px; }
-.emoji-cry { background-position: -360px -260px; }
-.emoji-crying_cat_face { background-position: -360px -280px; }
-.emoji-crystal_ball { background-position: -360px -300px; }
-.emoji-cucumber { background-position: -360px -320px; }
-.emoji-cupid { background-position: -360px -340px; }
-.emoji-curly_loop { background-position: 0 -360px; }
-.emoji-currency_exchange { background-position: -20px -360px; }
-.emoji-curry { background-position: -40px -360px; }
-.emoji-custard { background-position: -60px -360px; }
-.emoji-customs { background-position: -80px -360px; }
-.emoji-cyclone { background-position: -100px -360px; }
-.emoji-dagger { background-position: -120px -360px; }
-.emoji-dancer { background-position: -140px -360px; }
-.emoji-dancer_tone1 { background-position: -160px -360px; }
-.emoji-dancer_tone2 { background-position: -180px -360px; }
-.emoji-dancer_tone3 { background-position: -200px -360px; }
-.emoji-dancer_tone4 { background-position: -220px -360px; }
-.emoji-dancer_tone5 { background-position: -240px -360px; }
-.emoji-dancers { background-position: -260px -360px; }
-.emoji-dango { background-position: -280px -360px; }
-.emoji-dark_sunglasses { background-position: -300px -360px; }
-.emoji-dart { background-position: -320px -360px; }
-.emoji-dash { background-position: -340px -360px; }
-.emoji-date { background-position: -360px -360px; }
-.emoji-deciduous_tree { background-position: -380px 0; }
-.emoji-deer { background-position: -380px -20px; }
-.emoji-department_store { background-position: -380px -40px; }
-.emoji-desert { background-position: -380px -60px; }
-.emoji-desktop { background-position: -380px -80px; }
-.emoji-diamond_shape_with_a_dot_inside { background-position: -380px -100px; }
-.emoji-diamonds { background-position: -380px -120px; }
-.emoji-disappointed { background-position: -380px -140px; }
-.emoji-disappointed_relieved { background-position: -380px -160px; }
-.emoji-dividers { background-position: -380px -180px; }
-.emoji-dizzy { background-position: -380px -200px; }
-.emoji-dizzy_face { background-position: -380px -220px; }
-.emoji-do_not_litter { background-position: -380px -240px; }
-.emoji-dog { background-position: -380px -260px; }
-.emoji-dog2 { background-position: -380px -280px; }
-.emoji-dollar { background-position: -380px -300px; }
-.emoji-dolls { background-position: -380px -320px; }
-.emoji-dolphin { background-position: -380px -340px; }
-.emoji-door { background-position: -380px -360px; }
-.emoji-doughnut { background-position: 0 -380px; }
-.emoji-dove { background-position: -20px -380px; }
-.emoji-dragon { background-position: -40px -380px; }
-.emoji-dragon_face { background-position: -60px -380px; }
-.emoji-dress { background-position: -80px -380px; }
-.emoji-dromedary_camel { background-position: -100px -380px; }
-.emoji-drooling_face { background-position: -120px -380px; }
-.emoji-droplet { background-position: -140px -380px; }
-.emoji-drum { background-position: -160px -380px; }
-.emoji-duck { background-position: -180px -380px; }
-.emoji-dvd { background-position: -200px -380px; }
-.emoji-e-mail { background-position: -220px -380px; }
-.emoji-eagle { background-position: -240px -380px; }
-.emoji-ear { background-position: -260px -380px; }
-.emoji-ear_of_rice { background-position: -280px -380px; }
-.emoji-ear_tone1 { background-position: -300px -380px; }
-.emoji-ear_tone2 { background-position: -320px -380px; }
-.emoji-ear_tone3 { background-position: -340px -380px; }
-.emoji-ear_tone4 { background-position: -360px -380px; }
-.emoji-ear_tone5 { background-position: -380px -380px; }
-.emoji-earth_africa { background-position: -400px 0; }
-.emoji-earth_americas { background-position: -400px -20px; }
-.emoji-earth_asia { background-position: -400px -40px; }
-.emoji-egg { background-position: -400px -60px; }
-.emoji-eggplant { background-position: -400px -80px; }
-.emoji-eight { background-position: -400px -100px; }
-.emoji-eight_pointed_black_star { background-position: -400px -120px; }
-.emoji-eight_spoked_asterisk { background-position: -400px -140px; }
-.emoji-eject { background-position: -400px -160px; }
-.emoji-electric_plug { background-position: -400px -180px; }
-.emoji-elephant { background-position: -400px -200px; }
-.emoji-end { background-position: -400px -220px; }
-.emoji-envelope { background-position: -400px -240px; }
-.emoji-envelope_with_arrow { background-position: -400px -260px; }
-.emoji-euro { background-position: -400px -280px; }
-.emoji-european_castle { background-position: -400px -300px; }
-.emoji-european_post_office { background-position: -400px -320px; }
-.emoji-evergreen_tree { background-position: -400px -340px; }
-.emoji-exclamation { background-position: -400px -360px; }
-.emoji-expressionless { background-position: -400px -380px; }
-.emoji-eye { background-position: 0 -400px; }
-.emoji-eye_in_speech_bubble { background-position: -20px -400px; }
-.emoji-eyeglasses { background-position: -40px -400px; }
-.emoji-eyes { background-position: -60px -400px; }
-.emoji-face_palm { background-position: -80px -400px; }
-.emoji-face_palm_tone1 { background-position: -100px -400px; }
-.emoji-face_palm_tone2 { background-position: -120px -400px; }
-.emoji-face_palm_tone3 { background-position: -140px -400px; }
-.emoji-face_palm_tone4 { background-position: -160px -400px; }
-.emoji-face_palm_tone5 { background-position: -180px -400px; }
-.emoji-factory { background-position: -200px -400px; }
-.emoji-fallen_leaf { background-position: -220px -400px; }
-.emoji-family { background-position: -240px -400px; }
-.emoji-family_mmb { background-position: -260px -400px; }
-.emoji-family_mmbb { background-position: -280px -400px; }
-.emoji-family_mmg { background-position: -300px -400px; }
-.emoji-family_mmgb { background-position: -320px -400px; }
-.emoji-family_mmgg { background-position: -340px -400px; }
-.emoji-family_mwbb { background-position: -360px -400px; }
-.emoji-family_mwg { background-position: -380px -400px; }
-.emoji-family_mwgb { background-position: -400px -400px; }
-.emoji-family_mwgg { background-position: -420px 0; }
-.emoji-family_wwb { background-position: -420px -20px; }
-.emoji-family_wwbb { background-position: -420px -40px; }
-.emoji-family_wwg { background-position: -420px -60px; }
-.emoji-family_wwgb { background-position: -420px -80px; }
-.emoji-family_wwgg { background-position: -420px -100px; }
-.emoji-fast_forward { background-position: -420px -120px; }
-.emoji-fax { background-position: -420px -140px; }
-.emoji-fearful { background-position: -420px -160px; }
-.emoji-feet { background-position: -420px -180px; }
-.emoji-fencer { background-position: -420px -200px; }
-.emoji-ferris_wheel { background-position: -420px -220px; }
-.emoji-ferry { background-position: -420px -240px; }
-.emoji-field_hockey { background-position: -420px -260px; }
-.emoji-file_cabinet { background-position: -420px -280px; }
-.emoji-file_folder { background-position: -420px -300px; }
-.emoji-film_frames { background-position: -420px -320px; }
-.emoji-fingers_crossed { background-position: -420px -340px; }
-.emoji-fingers_crossed_tone1 { background-position: -420px -360px; }
-.emoji-fingers_crossed_tone2 { background-position: -420px -380px; }
-.emoji-fingers_crossed_tone3 { background-position: -420px -400px; }
-.emoji-fingers_crossed_tone4 { background-position: 0 -420px; }
-.emoji-fingers_crossed_tone5 { background-position: -20px -420px; }
-.emoji-fire { background-position: -40px -420px; }
-.emoji-fire_engine { background-position: -60px -420px; }
-.emoji-fireworks { background-position: -80px -420px; }
-.emoji-first_place { background-position: -100px -420px; }
-.emoji-first_quarter_moon { background-position: -120px -420px; }
-.emoji-first_quarter_moon_with_face { background-position: -140px -420px; }
-.emoji-fish { background-position: -160px -420px; }
-.emoji-fish_cake { background-position: -180px -420px; }
-.emoji-fishing_pole_and_fish { background-position: -200px -420px; }
-.emoji-fist { background-position: -220px -420px; }
-.emoji-fist_tone1 { background-position: -240px -420px; }
-.emoji-fist_tone2 { background-position: -260px -420px; }
-.emoji-fist_tone3 { background-position: -280px -420px; }
-.emoji-fist_tone4 { background-position: -300px -420px; }
-.emoji-fist_tone5 { background-position: -320px -420px; }
-.emoji-five { background-position: -340px -420px; }
-.emoji-flag_ac { background-position: -360px -420px; }
-.emoji-flag_ad { background-position: -380px -420px; }
-.emoji-flag_ae { background-position: -400px -420px; }
-.emoji-flag_af { background-position: -420px -420px; }
-.emoji-flag_ag { background-position: -440px 0; }
-.emoji-flag_ai { background-position: -440px -20px; }
-.emoji-flag_al { background-position: -440px -40px; }
-.emoji-flag_am { background-position: -440px -60px; }
-.emoji-flag_ao { background-position: -440px -80px; }
-.emoji-flag_aq { background-position: -440px -100px; }
-.emoji-flag_ar { background-position: -440px -120px; }
-.emoji-flag_as { background-position: -440px -140px; }
-.emoji-flag_at { background-position: -440px -160px; }
-.emoji-flag_au { background-position: -440px -180px; }
-.emoji-flag_aw { background-position: -440px -200px; }
-.emoji-flag_ax { background-position: -440px -220px; }
-.emoji-flag_az { background-position: -440px -240px; }
-.emoji-flag_ba { background-position: -440px -260px; }
-.emoji-flag_bb { background-position: -440px -280px; }
-.emoji-flag_bd { background-position: -440px -300px; }
-.emoji-flag_be { background-position: -440px -320px; }
-.emoji-flag_bf { background-position: -440px -340px; }
-.emoji-flag_bg { background-position: -440px -360px; }
-.emoji-flag_bh { background-position: -440px -380px; }
-.emoji-flag_bi { background-position: -440px -400px; }
-.emoji-flag_bj { background-position: -440px -420px; }
-.emoji-flag_bl { background-position: 0 -440px; }
-.emoji-flag_black { background-position: -20px -440px; }
-.emoji-flag_bm { background-position: -40px -440px; }
-.emoji-flag_bn { background-position: -60px -440px; }
-.emoji-flag_bo { background-position: -80px -440px; }
-.emoji-flag_bq { background-position: -100px -440px; }
-.emoji-flag_br { background-position: -120px -440px; }
-.emoji-flag_bs { background-position: -140px -440px; }
-.emoji-flag_bt { background-position: -160px -440px; }
-.emoji-flag_bv { background-position: -180px -440px; }
-.emoji-flag_bw { background-position: -200px -440px; }
-.emoji-flag_by { background-position: -220px -440px; }
-.emoji-flag_bz { background-position: -240px -440px; }
-.emoji-flag_ca { background-position: -260px -440px; }
-.emoji-flag_cc { background-position: -280px -440px; }
-.emoji-flag_cd { background-position: -300px -440px; }
-.emoji-flag_cf { background-position: -320px -440px; }
-.emoji-flag_cg { background-position: -340px -440px; }
-.emoji-flag_ch { background-position: -360px -440px; }
-.emoji-flag_ci { background-position: -380px -440px; }
-.emoji-flag_ck { background-position: -400px -440px; }
-.emoji-flag_cl { background-position: -420px -440px; }
-.emoji-flag_cm { background-position: -440px -440px; }
-.emoji-flag_cn { background-position: -460px 0; }
-.emoji-flag_co { background-position: -460px -20px; }
-.emoji-flag_cp { background-position: -460px -40px; }
-.emoji-flag_cr { background-position: -460px -60px; }
-.emoji-flag_cu { background-position: -460px -80px; }
-.emoji-flag_cv { background-position: -460px -100px; }
-.emoji-flag_cw { background-position: -460px -120px; }
-.emoji-flag_cx { background-position: -460px -140px; }
-.emoji-flag_cy { background-position: -460px -160px; }
-.emoji-flag_cz { background-position: -460px -180px; }
-.emoji-flag_de { background-position: -460px -200px; }
-.emoji-flag_dg { background-position: -460px -220px; }
-.emoji-flag_dj { background-position: -460px -240px; }
-.emoji-flag_dk { background-position: -460px -260px; }
-.emoji-flag_dm { background-position: -460px -280px; }
-.emoji-flag_do { background-position: -460px -300px; }
-.emoji-flag_dz { background-position: -460px -320px; }
-.emoji-flag_ea { background-position: -460px -340px; }
-.emoji-flag_ec { background-position: -460px -360px; }
-.emoji-flag_ee { background-position: -460px -380px; }
-.emoji-flag_eg { background-position: -460px -400px; }
-.emoji-flag_eh { background-position: -460px -420px; }
-.emoji-flag_er { background-position: -460px -440px; }
-.emoji-flag_es { background-position: 0 -460px; }
-.emoji-flag_et { background-position: -20px -460px; }
-.emoji-flag_eu { background-position: -40px -460px; }
-.emoji-flag_fi { background-position: -60px -460px; }
-.emoji-flag_fj { background-position: -80px -460px; }
-.emoji-flag_fk { background-position: -100px -460px; }
-.emoji-flag_fm { background-position: -120px -460px; }
-.emoji-flag_fo { background-position: -140px -460px; }
-.emoji-flag_fr { background-position: -160px -460px; }
-.emoji-flag_ga { background-position: -180px -460px; }
-.emoji-flag_gb { background-position: -200px -460px; }
-.emoji-flag_gd { background-position: -220px -460px; }
-.emoji-flag_ge { background-position: -240px -460px; }
-.emoji-flag_gf { background-position: -260px -460px; }
-.emoji-flag_gg { background-position: -280px -460px; }
-.emoji-flag_gh { background-position: -300px -460px; }
-.emoji-flag_gi { background-position: -320px -460px; }
-.emoji-flag_gl { background-position: -340px -460px; }
-.emoji-flag_gm { background-position: -360px -460px; }
-.emoji-flag_gn { background-position: -380px -460px; }
-.emoji-flag_gp { background-position: -400px -460px; }
-.emoji-flag_gq { background-position: -420px -460px; }
-.emoji-flag_gr { background-position: -440px -460px; }
-.emoji-flag_gs { background-position: -460px -460px; }
-.emoji-flag_gt { background-position: -480px 0; }
-.emoji-flag_gu { background-position: -480px -20px; }
-.emoji-flag_gw { background-position: -480px -40px; }
-.emoji-flag_gy { background-position: -480px -60px; }
-.emoji-flag_hk { background-position: -480px -80px; }
-.emoji-flag_hm { background-position: -480px -100px; }
-.emoji-flag_hn { background-position: -480px -120px; }
-.emoji-flag_hr { background-position: -480px -140px; }
-.emoji-flag_ht { background-position: -480px -160px; }
-.emoji-flag_hu { background-position: -480px -180px; }
-.emoji-flag_ic { background-position: -480px -200px; }
-.emoji-flag_id { background-position: -480px -220px; }
-.emoji-flag_ie { background-position: -480px -240px; }
-.emoji-flag_il { background-position: -480px -260px; }
-.emoji-flag_im { background-position: -480px -280px; }
-.emoji-flag_in { background-position: -480px -300px; }
-.emoji-flag_io { background-position: -480px -320px; }
-.emoji-flag_iq { background-position: -480px -340px; }
-.emoji-flag_ir { background-position: -480px -360px; }
-.emoji-flag_is { background-position: -480px -380px; }
-.emoji-flag_it { background-position: -480px -400px; }
-.emoji-flag_je { background-position: -480px -420px; }
-.emoji-flag_jm { background-position: -480px -440px; }
-.emoji-flag_jo { background-position: -480px -460px; }
-.emoji-flag_jp { background-position: 0 -480px; }
-.emoji-flag_ke { background-position: -20px -480px; }
-.emoji-flag_kg { background-position: -40px -480px; }
-.emoji-flag_kh { background-position: -60px -480px; }
-.emoji-flag_ki { background-position: -80px -480px; }
-.emoji-flag_km { background-position: -100px -480px; }
-.emoji-flag_kn { background-position: -120px -480px; }
-.emoji-flag_kp { background-position: -140px -480px; }
-.emoji-flag_kr { background-position: -160px -480px; }
-.emoji-flag_kw { background-position: -180px -480px; }
-.emoji-flag_ky { background-position: -200px -480px; }
-.emoji-flag_kz { background-position: -220px -480px; }
-.emoji-flag_la { background-position: -240px -480px; }
-.emoji-flag_lb { background-position: -260px -480px; }
-.emoji-flag_lc { background-position: -280px -480px; }
-.emoji-flag_li { background-position: -300px -480px; }
-.emoji-flag_lk { background-position: -320px -480px; }
-.emoji-flag_lr { background-position: -340px -480px; }
-.emoji-flag_ls { background-position: -360px -480px; }
-.emoji-flag_lt { background-position: -380px -480px; }
-.emoji-flag_lu { background-position: -400px -480px; }
-.emoji-flag_lv { background-position: -420px -480px; }
-.emoji-flag_ly { background-position: -440px -480px; }
-.emoji-flag_ma { background-position: -460px -480px; }
-.emoji-flag_mc { background-position: -480px -480px; }
-.emoji-flag_md { background-position: -500px 0; }
-.emoji-flag_me { background-position: -500px -20px; }
-.emoji-flag_mf { background-position: -500px -40px; }
-.emoji-flag_mg { background-position: -500px -60px; }
-.emoji-flag_mh { background-position: -500px -80px; }
-.emoji-flag_mk { background-position: -500px -100px; }
-.emoji-flag_ml { background-position: -500px -120px; }
-.emoji-flag_mm { background-position: -500px -140px; }
-.emoji-flag_mn { background-position: -500px -160px; }
-.emoji-flag_mo { background-position: -500px -180px; }
-.emoji-flag_mp { background-position: -500px -200px; }
-.emoji-flag_mq { background-position: -500px -220px; }
-.emoji-flag_mr { background-position: -500px -240px; }
-.emoji-flag_ms { background-position: -500px -260px; }
-.emoji-flag_mt { background-position: -500px -280px; }
-.emoji-flag_mu { background-position: -500px -300px; }
-.emoji-flag_mv { background-position: -500px -320px; }
-.emoji-flag_mw { background-position: -500px -340px; }
-.emoji-flag_mx { background-position: -500px -360px; }
-.emoji-flag_my { background-position: -500px -380px; }
-.emoji-flag_mz { background-position: -500px -400px; }
-.emoji-flag_na { background-position: -500px -420px; }
-.emoji-flag_nc { background-position: -500px -440px; }
-.emoji-flag_ne { background-position: -500px -460px; }
-.emoji-flag_nf { background-position: -500px -480px; }
-.emoji-flag_ng { background-position: 0 -500px; }
-.emoji-flag_ni { background-position: -20px -500px; }
-.emoji-flag_nl { background-position: -40px -500px; }
-.emoji-flag_no { background-position: -60px -500px; }
-.emoji-flag_np { background-position: -80px -500px; }
-.emoji-flag_nr { background-position: -100px -500px; }
-.emoji-flag_nu { background-position: -120px -500px; }
-.emoji-flag_nz { background-position: -140px -500px; }
-.emoji-flag_om { background-position: -160px -500px; }
-.emoji-flag_pa { background-position: -180px -500px; }
-.emoji-flag_pe { background-position: -200px -500px; }
-.emoji-flag_pf { background-position: -220px -500px; }
-.emoji-flag_pg { background-position: -240px -500px; }
-.emoji-flag_ph { background-position: -260px -500px; }
-.emoji-flag_pk { background-position: -280px -500px; }
-.emoji-flag_pl { background-position: -300px -500px; }
-.emoji-flag_pm { background-position: -320px -500px; }
-.emoji-flag_pn { background-position: -340px -500px; }
-.emoji-flag_pr { background-position: -360px -500px; }
-.emoji-flag_ps { background-position: -380px -500px; }
-.emoji-flag_pt { background-position: -400px -500px; }
-.emoji-flag_pw { background-position: -420px -500px; }
-.emoji-flag_py { background-position: -440px -500px; }
-.emoji-flag_qa { background-position: -460px -500px; }
-.emoji-flag_re { background-position: -480px -500px; }
-.emoji-flag_ro { background-position: -500px -500px; }
-.emoji-flag_rs { background-position: -520px 0; }
-.emoji-flag_ru { background-position: -520px -20px; }
-.emoji-flag_rw { background-position: -520px -40px; }
-.emoji-flag_sa { background-position: -520px -60px; }
-.emoji-flag_sb { background-position: -520px -80px; }
-.emoji-flag_sc { background-position: -520px -100px; }
-.emoji-flag_sd { background-position: -520px -120px; }
-.emoji-flag_se { background-position: -520px -140px; }
-.emoji-flag_sg { background-position: -520px -160px; }
-.emoji-flag_sh { background-position: -520px -180px; }
-.emoji-flag_si { background-position: -520px -200px; }
-.emoji-flag_sj { background-position: -520px -220px; }
-.emoji-flag_sk { background-position: -520px -240px; }
-.emoji-flag_sl { background-position: -520px -260px; }
-.emoji-flag_sm { background-position: -520px -280px; }
-.emoji-flag_sn { background-position: -520px -300px; }
-.emoji-flag_so { background-position: -520px -320px; }
-.emoji-flag_sr { background-position: -520px -340px; }
-.emoji-flag_ss { background-position: -520px -360px; }
-.emoji-flag_st { background-position: -520px -380px; }
-.emoji-flag_sv { background-position: -520px -400px; }
-.emoji-flag_sx { background-position: -520px -420px; }
-.emoji-flag_sy { background-position: -520px -440px; }
-.emoji-flag_sz { background-position: -520px -460px; }
-.emoji-flag_ta { background-position: -520px -480px; }
-.emoji-flag_tc { background-position: -520px -500px; }
-.emoji-flag_td { background-position: 0 -520px; }
-.emoji-flag_tf { background-position: -20px -520px; }
-.emoji-flag_tg { background-position: -40px -520px; }
-.emoji-flag_th { background-position: -60px -520px; }
-.emoji-flag_tj { background-position: -80px -520px; }
-.emoji-flag_tk { background-position: -100px -520px; }
-.emoji-flag_tl { background-position: -120px -520px; }
-.emoji-flag_tm { background-position: -140px -520px; }
-.emoji-flag_tn { background-position: -160px -520px; }
-.emoji-flag_to { background-position: -180px -520px; }
-.emoji-flag_tr { background-position: -200px -520px; }
-.emoji-flag_tt { background-position: -220px -520px; }
-.emoji-flag_tv { background-position: -240px -520px; }
-.emoji-flag_tw { background-position: -260px -520px; }
-.emoji-flag_tz { background-position: -280px -520px; }
-.emoji-flag_ua { background-position: -300px -520px; }
-.emoji-flag_ug { background-position: -320px -520px; }
-.emoji-flag_um { background-position: -340px -520px; }
-.emoji-flag_us { background-position: -360px -520px; }
-.emoji-flag_uy { background-position: -380px -520px; }
-.emoji-flag_uz { background-position: -400px -520px; }
-.emoji-flag_va { background-position: -420px -520px; }
-.emoji-flag_vc { background-position: -440px -520px; }
-.emoji-flag_ve { background-position: -460px -520px; }
-.emoji-flag_vg { background-position: -480px -520px; }
-.emoji-flag_vi { background-position: -500px -520px; }
-.emoji-flag_vn { background-position: -520px -520px; }
-.emoji-flag_vu { background-position: -540px 0; }
-.emoji-flag_wf { background-position: -540px -20px; }
-.emoji-flag_white { background-position: -540px -40px; }
-.emoji-flag_ws { background-position: -540px -60px; }
-.emoji-flag_xk { background-position: -540px -80px; }
-.emoji-flag_ye { background-position: -540px -100px; }
-.emoji-flag_yt { background-position: -540px -120px; }
-.emoji-flag_za { background-position: -540px -140px; }
-.emoji-flag_zm { background-position: -540px -160px; }
-.emoji-flag_zw { background-position: -540px -180px; }
-.emoji-flags { background-position: -540px -200px; }
-.emoji-flashlight { background-position: -540px -220px; }
-.emoji-fleur-de-lis { background-position: -540px -240px; }
-.emoji-floppy_disk { background-position: -540px -260px; }
-.emoji-flower_playing_cards { background-position: -540px -280px; }
-.emoji-flushed { background-position: -540px -300px; }
-.emoji-fog { background-position: -540px -320px; }
-.emoji-foggy { background-position: -540px -340px; }
-.emoji-football { background-position: -540px -360px; }
-.emoji-footprints { background-position: -540px -380px; }
-.emoji-fork_and_knife { background-position: -540px -400px; }
-.emoji-fork_knife_plate { background-position: -540px -420px; }
-.emoji-fountain { background-position: -540px -440px; }
-.emoji-four { background-position: -540px -460px; }
-.emoji-four_leaf_clover { background-position: -540px -480px; }
-.emoji-fox { background-position: -540px -500px; }
-.emoji-frame_photo { background-position: -540px -520px; }
-.emoji-free { background-position: 0 -540px; }
-.emoji-french_bread { background-position: -20px -540px; }
-.emoji-fried_shrimp { background-position: -40px -540px; }
-.emoji-fries { background-position: -60px -540px; }
-.emoji-frog { background-position: -80px -540px; }
-.emoji-frowning { background-position: -100px -540px; }
-.emoji-frowning2 { background-position: -120px -540px; }
-.emoji-fuelpump { background-position: -140px -540px; }
-.emoji-full_moon { background-position: -160px -540px; }
-.emoji-full_moon_with_face { background-position: -180px -540px; }
-.emoji-game_die { background-position: -200px -540px; }
-.emoji-gay_pride_flag { background-position: -220px -540px; }
-.emoji-gear { background-position: -240px -540px; }
-.emoji-gem { background-position: -260px -540px; }
-.emoji-gemini { background-position: -280px -540px; }
-.emoji-ghost { background-position: -300px -540px; }
-.emoji-gift { background-position: -320px -540px; }
-.emoji-gift_heart { background-position: -340px -540px; }
-.emoji-girl { background-position: -360px -540px; }
-.emoji-girl_tone1 { background-position: -380px -540px; }
-.emoji-girl_tone2 { background-position: -400px -540px; }
-.emoji-girl_tone3 { background-position: -420px -540px; }
-.emoji-girl_tone4 { background-position: -440px -540px; }
-.emoji-girl_tone5 { background-position: -460px -540px; }
-.emoji-globe_with_meridians { background-position: -480px -540px; }
-.emoji-goal { background-position: -500px -540px; }
-.emoji-goat { background-position: -520px -540px; }
-.emoji-golf { background-position: -540px -540px; }
-.emoji-golfer { background-position: -560px 0; }
-.emoji-gorilla { background-position: -560px -20px; }
-.emoji-grapes { background-position: -560px -40px; }
-.emoji-green_apple { background-position: -560px -60px; }
-.emoji-green_book { background-position: -560px -80px; }
-.emoji-green_heart { background-position: -560px -100px; }
-.emoji-grey_exclamation { background-position: -560px -120px; }
-.emoji-grey_question { background-position: -560px -140px; }
-.emoji-grimacing { background-position: -560px -160px; }
-.emoji-grin { background-position: -560px -180px; }
-.emoji-grinning { background-position: -560px -200px; }
-.emoji-guardsman { background-position: -560px -220px; }
-.emoji-guardsman_tone1 { background-position: -560px -240px; }
-.emoji-guardsman_tone2 { background-position: -560px -260px; }
-.emoji-guardsman_tone3 { background-position: -560px -280px; }
-.emoji-guardsman_tone4 { background-position: -560px -300px; }
-.emoji-guardsman_tone5 { background-position: -560px -320px; }
-.emoji-guitar { background-position: -560px -340px; }
-.emoji-gun { background-position: -560px -360px; }
-.emoji-haircut { background-position: -560px -380px; }
-.emoji-haircut_tone1 { background-position: -560px -400px; }
-.emoji-haircut_tone2 { background-position: -560px -420px; }
-.emoji-haircut_tone3 { background-position: -560px -440px; }
-.emoji-haircut_tone4 { background-position: -560px -460px; }
-.emoji-haircut_tone5 { background-position: -560px -480px; }
-.emoji-hamburger { background-position: -560px -500px; }
-.emoji-hammer { background-position: -560px -520px; }
-.emoji-hammer_pick { background-position: -560px -540px; }
-.emoji-hamster { background-position: 0 -560px; }
-.emoji-hand_splayed { background-position: -20px -560px; }
-.emoji-hand_splayed_tone1 { background-position: -40px -560px; }
-.emoji-hand_splayed_tone2 { background-position: -60px -560px; }
-.emoji-hand_splayed_tone3 { background-position: -80px -560px; }
-.emoji-hand_splayed_tone4 { background-position: -100px -560px; }
-.emoji-hand_splayed_tone5 { background-position: -120px -560px; }
-.emoji-handbag { background-position: -140px -560px; }
-.emoji-handball { background-position: -160px -560px; }
-.emoji-handball_tone1 { background-position: -180px -560px; }
-.emoji-handball_tone2 { background-position: -200px -560px; }
-.emoji-handball_tone3 { background-position: -220px -560px; }
-.emoji-handball_tone4 { background-position: -240px -560px; }
-.emoji-handball_tone5 { background-position: -260px -560px; }
-.emoji-handshake { background-position: -280px -560px; }
-.emoji-handshake_tone1 { background-position: -300px -560px; }
-.emoji-handshake_tone2 { background-position: -320px -560px; }
-.emoji-handshake_tone3 { background-position: -340px -560px; }
-.emoji-handshake_tone4 { background-position: -360px -560px; }
-.emoji-handshake_tone5 { background-position: -380px -560px; }
-.emoji-hash { background-position: -400px -560px; }
-.emoji-hatched_chick { background-position: -420px -560px; }
-.emoji-hatching_chick { background-position: -440px -560px; }
-.emoji-head_bandage { background-position: -460px -560px; }
-.emoji-headphones { background-position: -480px -560px; }
-.emoji-hear_no_evil { background-position: -500px -560px; }
-.emoji-heart { background-position: -520px -560px; }
-.emoji-heart_decoration { background-position: -540px -560px; }
-.emoji-heart_exclamation { background-position: -560px -560px; }
-.emoji-heart_eyes { background-position: -580px 0; }
-.emoji-heart_eyes_cat { background-position: -580px -20px; }
-.emoji-heartbeat { background-position: -580px -40px; }
-.emoji-heartpulse { background-position: -580px -60px; }
-.emoji-hearts { background-position: -580px -80px; }
-.emoji-heavy_check_mark { background-position: -580px -100px; }
-.emoji-heavy_division_sign { background-position: -580px -120px; }
-.emoji-heavy_dollar_sign { background-position: -580px -140px; }
-.emoji-heavy_minus_sign { background-position: -580px -160px; }
-.emoji-heavy_multiplication_x { background-position: -580px -180px; }
-.emoji-heavy_plus_sign { background-position: -580px -200px; }
-.emoji-helicopter { background-position: -580px -220px; }
-.emoji-helmet_with_cross { background-position: -580px -240px; }
-.emoji-herb { background-position: -580px -260px; }
-.emoji-hibiscus { background-position: -580px -280px; }
-.emoji-high_brightness { background-position: -580px -300px; }
-.emoji-high_heel { background-position: -580px -320px; }
-.emoji-hockey { background-position: -580px -340px; }
-.emoji-hole { background-position: -580px -360px; }
-.emoji-homes { background-position: -580px -380px; }
-.emoji-honey_pot { background-position: -580px -400px; }
-.emoji-horse { background-position: -580px -420px; }
-.emoji-horse_racing { background-position: -580px -440px; }
-.emoji-horse_racing_tone1 { background-position: -580px -460px; }
-.emoji-horse_racing_tone2 { background-position: -580px -480px; }
-.emoji-horse_racing_tone3 { background-position: -580px -500px; }
-.emoji-horse_racing_tone4 { background-position: -580px -520px; }
-.emoji-horse_racing_tone5 { background-position: -580px -540px; }
-.emoji-hospital { background-position: -580px -560px; }
-.emoji-hot_pepper { background-position: 0 -580px; }
-.emoji-hotdog { background-position: -20px -580px; }
-.emoji-hotel { background-position: -40px -580px; }
-.emoji-hotsprings { background-position: -60px -580px; }
-.emoji-hourglass { background-position: -80px -580px; }
-.emoji-hourglass_flowing_sand { background-position: -100px -580px; }
-.emoji-house { background-position: -120px -580px; }
-.emoji-house_abandoned { background-position: -140px -580px; }
-.emoji-house_with_garden { background-position: -160px -580px; }
-.emoji-hugging { background-position: -180px -580px; }
-.emoji-hushed { background-position: -200px -580px; }
-.emoji-ice_cream { background-position: -220px -580px; }
-.emoji-ice_skate { background-position: -240px -580px; }
-.emoji-icecream { background-position: -260px -580px; }
-.emoji-id { background-position: -280px -580px; }
-.emoji-ideograph_advantage { background-position: -300px -580px; }
-.emoji-imp { background-position: -320px -580px; }
-.emoji-inbox_tray { background-position: -340px -580px; }
-.emoji-incoming_envelope { background-position: -360px -580px; }
-.emoji-information_desk_person { background-position: -380px -580px; }
-.emoji-information_desk_person_tone1 { background-position: -400px -580px; }
-.emoji-information_desk_person_tone2 { background-position: -420px -580px; }
-.emoji-information_desk_person_tone3 { background-position: -440px -580px; }
-.emoji-information_desk_person_tone4 { background-position: -460px -580px; }
-.emoji-information_desk_person_tone5 { background-position: -480px -580px; }
-.emoji-information_source { background-position: -500px -580px; }
-.emoji-innocent { background-position: -520px -580px; }
-.emoji-interrobang { background-position: -540px -580px; }
-.emoji-iphone { background-position: -560px -580px; }
-.emoji-island { background-position: -580px -580px; }
-.emoji-izakaya_lantern { background-position: -600px 0; }
-.emoji-jack_o_lantern { background-position: -600px -20px; }
-.emoji-japan { background-position: -600px -40px; }
-.emoji-japanese_castle { background-position: -600px -60px; }
-.emoji-japanese_goblin { background-position: -600px -80px; }
-.emoji-japanese_ogre { background-position: -600px -100px; }
-.emoji-jeans { background-position: -600px -120px; }
-.emoji-joy { background-position: -600px -140px; }
-.emoji-joy_cat { background-position: -600px -160px; }
-.emoji-joystick { background-position: -600px -180px; }
-.emoji-juggling { background-position: -600px -200px; }
-.emoji-juggling_tone1 { background-position: -600px -220px; }
-.emoji-juggling_tone2 { background-position: -600px -240px; }
-.emoji-juggling_tone3 { background-position: -600px -260px; }
-.emoji-juggling_tone4 { background-position: -600px -280px; }
-.emoji-juggling_tone5 { background-position: -600px -300px; }
-.emoji-kaaba { background-position: -600px -320px; }
-.emoji-key { background-position: -600px -340px; }
-.emoji-key2 { background-position: -600px -360px; }
-.emoji-keyboard { background-position: -600px -380px; }
-.emoji-kimono { background-position: -600px -400px; }
-.emoji-kiss { background-position: -600px -420px; }
-.emoji-kiss_mm { background-position: -600px -440px; }
-.emoji-kiss_ww { background-position: -600px -460px; }
-.emoji-kissing { background-position: -600px -480px; }
-.emoji-kissing_cat { background-position: -600px -500px; }
-.emoji-kissing_closed_eyes { background-position: -600px -520px; }
-.emoji-kissing_heart { background-position: -600px -540px; }
-.emoji-kissing_smiling_eyes { background-position: -600px -560px; }
-.emoji-kiwi { background-position: -600px -580px; }
-.emoji-knife { background-position: 0 -600px; }
-.emoji-koala { background-position: -20px -600px; }
-.emoji-koko { background-position: -40px -600px; }
-.emoji-label { background-position: -60px -600px; }
-.emoji-large_blue_circle { background-position: -80px -600px; }
-.emoji-large_blue_diamond { background-position: -100px -600px; }
-.emoji-large_orange_diamond { background-position: -120px -600px; }
-.emoji-last_quarter_moon { background-position: -140px -600px; }
-.emoji-last_quarter_moon_with_face { background-position: -160px -600px; }
-.emoji-laughing { background-position: -180px -600px; }
-.emoji-leaves { background-position: -200px -600px; }
-.emoji-ledger { background-position: -220px -600px; }
-.emoji-left_facing_fist { background-position: -240px -600px; }
-.emoji-left_facing_fist_tone1 { background-position: -260px -600px; }
-.emoji-left_facing_fist_tone2 { background-position: -280px -600px; }
-.emoji-left_facing_fist_tone3 { background-position: -300px -600px; }
-.emoji-left_facing_fist_tone4 { background-position: -320px -600px; }
-.emoji-left_facing_fist_tone5 { background-position: -340px -600px; }
-.emoji-left_luggage { background-position: -360px -600px; }
-.emoji-left_right_arrow { background-position: -380px -600px; }
-.emoji-leftwards_arrow_with_hook { background-position: -400px -600px; }
-.emoji-lemon { background-position: -420px -600px; }
-.emoji-leo { background-position: -440px -600px; }
-.emoji-leopard { background-position: -460px -600px; }
-.emoji-level_slider { background-position: -480px -600px; }
-.emoji-levitate { background-position: -500px -600px; }
-.emoji-libra { background-position: -520px -600px; }
-.emoji-lifter { background-position: -540px -600px; }
-.emoji-lifter_tone1 { background-position: -560px -600px; }
-.emoji-lifter_tone2 { background-position: -580px -600px; }
-.emoji-lifter_tone3 { background-position: -600px -600px; }
-.emoji-lifter_tone4 { background-position: -620px 0; }
-.emoji-lifter_tone5 { background-position: -620px -20px; }
-.emoji-light_rail { background-position: -620px -40px; }
-.emoji-link { background-position: -620px -60px; }
-.emoji-lion_face { background-position: -620px -80px; }
-.emoji-lips { background-position: -620px -100px; }
-.emoji-lipstick { background-position: -620px -120px; }
-.emoji-lizard { background-position: -620px -140px; }
-.emoji-lock { background-position: -620px -160px; }
-.emoji-lock_with_ink_pen { background-position: -620px -180px; }
-.emoji-lollipop { background-position: -620px -200px; }
-.emoji-loop { background-position: -620px -220px; }
-.emoji-loud_sound { background-position: -620px -240px; }
-.emoji-loudspeaker { background-position: -620px -260px; }
-.emoji-love_hotel { background-position: -620px -280px; }
-.emoji-love_letter { background-position: -620px -300px; }
-.emoji-low_brightness { background-position: -620px -320px; }
-.emoji-lying_face { background-position: -620px -340px; }
-.emoji-m { background-position: -620px -360px; }
-.emoji-mag { background-position: -620px -380px; }
-.emoji-mag_right { background-position: -620px -400px; }
-.emoji-mahjong { background-position: -620px -420px; }
-.emoji-mailbox { background-position: -620px -440px; }
-.emoji-mailbox_closed { background-position: -620px -460px; }
-.emoji-mailbox_with_mail { background-position: -620px -480px; }
-.emoji-mailbox_with_no_mail { background-position: -620px -500px; }
-.emoji-man { background-position: -620px -520px; }
-.emoji-man_dancing { background-position: -620px -540px; }
-.emoji-man_dancing_tone1 { background-position: -620px -560px; }
-.emoji-man_dancing_tone2 { background-position: -620px -580px; }
-.emoji-man_dancing_tone3 { background-position: -620px -600px; }
-.emoji-man_dancing_tone4 { background-position: 0 -620px; }
-.emoji-man_dancing_tone5 { background-position: -20px -620px; }
-.emoji-man_in_tuxedo { background-position: -40px -620px; }
-.emoji-man_in_tuxedo_tone1 { background-position: -60px -620px; }
-.emoji-man_in_tuxedo_tone2 { background-position: -80px -620px; }
-.emoji-man_in_tuxedo_tone3 { background-position: -100px -620px; }
-.emoji-man_in_tuxedo_tone4 { background-position: -120px -620px; }
-.emoji-man_in_tuxedo_tone5 { background-position: -140px -620px; }
-.emoji-man_tone1 { background-position: -160px -620px; }
-.emoji-man_tone2 { background-position: -180px -620px; }
-.emoji-man_tone3 { background-position: -200px -620px; }
-.emoji-man_tone4 { background-position: -220px -620px; }
-.emoji-man_tone5 { background-position: -240px -620px; }
-.emoji-man_with_gua_pi_mao { background-position: -260px -620px; }
-.emoji-man_with_gua_pi_mao_tone1 { background-position: -280px -620px; }
-.emoji-man_with_gua_pi_mao_tone2 { background-position: -300px -620px; }
-.emoji-man_with_gua_pi_mao_tone3 { background-position: -320px -620px; }
-.emoji-man_with_gua_pi_mao_tone4 { background-position: -340px -620px; }
-.emoji-man_with_gua_pi_mao_tone5 { background-position: -360px -620px; }
-.emoji-man_with_turban { background-position: -380px -620px; }
-.emoji-man_with_turban_tone1 { background-position: -400px -620px; }
-.emoji-man_with_turban_tone2 { background-position: -420px -620px; }
-.emoji-man_with_turban_tone3 { background-position: -440px -620px; }
-.emoji-man_with_turban_tone4 { background-position: -460px -620px; }
-.emoji-man_with_turban_tone5 { background-position: -480px -620px; }
-.emoji-mans_shoe { background-position: -500px -620px; }
-.emoji-map { background-position: -520px -620px; }
-.emoji-maple_leaf { background-position: -540px -620px; }
-.emoji-martial_arts_uniform { background-position: -560px -620px; }
-.emoji-mask { background-position: -580px -620px; }
-.emoji-massage { background-position: -600px -620px; }
-.emoji-massage_tone1 { background-position: -620px -620px; }
-.emoji-massage_tone2 { background-position: -640px 0; }
-.emoji-massage_tone3 { background-position: -640px -20px; }
-.emoji-massage_tone4 { background-position: -640px -40px; }
-.emoji-massage_tone5 { background-position: -640px -60px; }
-.emoji-meat_on_bone { background-position: -640px -80px; }
-.emoji-medal { background-position: -640px -100px; }
-.emoji-mega { background-position: -640px -120px; }
-.emoji-melon { background-position: -640px -140px; }
-.emoji-menorah { background-position: -640px -160px; }
-.emoji-mens { background-position: -640px -180px; }
-.emoji-metal { background-position: -640px -200px; }
-.emoji-metal_tone1 { background-position: -640px -220px; }
-.emoji-metal_tone2 { background-position: -640px -240px; }
-.emoji-metal_tone3 { background-position: -640px -260px; }
-.emoji-metal_tone4 { background-position: -640px -280px; }
-.emoji-metal_tone5 { background-position: -640px -300px; }
-.emoji-metro { background-position: -640px -320px; }
-.emoji-microphone { background-position: -640px -340px; }
-.emoji-microphone2 { background-position: -640px -360px; }
-.emoji-microscope { background-position: -640px -380px; }
-.emoji-middle_finger { background-position: -640px -400px; }
-.emoji-middle_finger_tone1 { background-position: -640px -420px; }
-.emoji-middle_finger_tone2 { background-position: -640px -440px; }
-.emoji-middle_finger_tone3 { background-position: -640px -460px; }
-.emoji-middle_finger_tone4 { background-position: -640px -480px; }
-.emoji-middle_finger_tone5 { background-position: -640px -500px; }
-.emoji-military_medal { background-position: -640px -520px; }
-.emoji-milk { background-position: -640px -540px; }
-.emoji-milky_way { background-position: -640px -560px; }
-.emoji-minibus { background-position: -640px -580px; }
-.emoji-minidisc { background-position: -640px -600px; }
-.emoji-mobile_phone_off { background-position: -640px -620px; }
-.emoji-money_mouth { background-position: 0 -640px; }
-.emoji-money_with_wings { background-position: -20px -640px; }
-.emoji-moneybag { background-position: -40px -640px; }
-.emoji-monkey { background-position: -60px -640px; }
-.emoji-monkey_face { background-position: -80px -640px; }
-.emoji-monorail { background-position: -100px -640px; }
-.emoji-mortar_board { background-position: -120px -640px; }
-.emoji-mosque { background-position: -140px -640px; }
-.emoji-motor_scooter { background-position: -160px -640px; }
-.emoji-motorboat { background-position: -180px -640px; }
-.emoji-motorcycle { background-position: -200px -640px; }
-.emoji-motorway { background-position: -220px -640px; }
-.emoji-mount_fuji { background-position: -240px -640px; }
-.emoji-mountain { background-position: -260px -640px; }
-.emoji-mountain_bicyclist { background-position: -280px -640px; }
-.emoji-mountain_bicyclist_tone1 { background-position: -300px -640px; }
-.emoji-mountain_bicyclist_tone2 { background-position: -320px -640px; }
-.emoji-mountain_bicyclist_tone3 { background-position: -340px -640px; }
-.emoji-mountain_bicyclist_tone4 { background-position: -360px -640px; }
-.emoji-mountain_bicyclist_tone5 { background-position: -380px -640px; }
-.emoji-mountain_cableway { background-position: -400px -640px; }
-.emoji-mountain_railway { background-position: -420px -640px; }
-.emoji-mountain_snow { background-position: -440px -640px; }
-.emoji-mouse { background-position: -460px -640px; }
-.emoji-mouse2 { background-position: -480px -640px; }
-.emoji-mouse_three_button { background-position: -500px -640px; }
-.emoji-movie_camera { background-position: -520px -640px; }
-.emoji-moyai { background-position: -540px -640px; }
-.emoji-mrs_claus { background-position: -560px -640px; }
-.emoji-mrs_claus_tone1 { background-position: -580px -640px; }
-.emoji-mrs_claus_tone2 { background-position: -600px -640px; }
-.emoji-mrs_claus_tone3 { background-position: -620px -640px; }
-.emoji-mrs_claus_tone4 { background-position: -640px -640px; }
-.emoji-mrs_claus_tone5 { background-position: -660px 0; }
-.emoji-muscle { background-position: -660px -20px; }
-.emoji-muscle_tone1 { background-position: -660px -40px; }
-.emoji-muscle_tone2 { background-position: -660px -60px; }
-.emoji-muscle_tone3 { background-position: -660px -80px; }
-.emoji-muscle_tone4 { background-position: -660px -100px; }
-.emoji-muscle_tone5 { background-position: -660px -120px; }
-.emoji-mushroom { background-position: -660px -140px; }
-.emoji-musical_keyboard { background-position: -660px -160px; }
-.emoji-musical_note { background-position: -660px -180px; }
-.emoji-musical_score { background-position: -660px -200px; }
-.emoji-mute { background-position: -660px -220px; }
-.emoji-nail_care { background-position: -660px -240px; }
-.emoji-nail_care_tone1 { background-position: -660px -260px; }
-.emoji-nail_care_tone2 { background-position: -660px -280px; }
-.emoji-nail_care_tone3 { background-position: -660px -300px; }
-.emoji-nail_care_tone4 { background-position: -660px -320px; }
-.emoji-nail_care_tone5 { background-position: -660px -340px; }
-.emoji-name_badge { background-position: -660px -360px; }
-.emoji-nauseated_face { background-position: -660px -380px; }
-.emoji-necktie { background-position: -660px -400px; }
-.emoji-negative_squared_cross_mark { background-position: -660px -420px; }
-.emoji-nerd { background-position: -660px -440px; }
-.emoji-neutral_face { background-position: -660px -460px; }
-.emoji-new { background-position: -660px -480px; }
-.emoji-new_moon { background-position: -660px -500px; }
-.emoji-new_moon_with_face { background-position: -660px -520px; }
-.emoji-newspaper { background-position: -660px -540px; }
-.emoji-newspaper2 { background-position: -660px -560px; }
-.emoji-ng { background-position: -660px -580px; }
-.emoji-night_with_stars { background-position: -660px -600px; }
-.emoji-nine { background-position: -660px -620px; }
-.emoji-no_bell { background-position: -660px -640px; }
-.emoji-no_bicycles { background-position: 0 -660px; }
-.emoji-no_entry { background-position: -20px -660px; }
-.emoji-no_entry_sign { background-position: -40px -660px; }
-.emoji-no_good { background-position: -60px -660px; }
-.emoji-no_good_tone1 { background-position: -80px -660px; }
-.emoji-no_good_tone2 { background-position: -100px -660px; }
-.emoji-no_good_tone3 { background-position: -120px -660px; }
-.emoji-no_good_tone4 { background-position: -140px -660px; }
-.emoji-no_good_tone5 { background-position: -160px -660px; }
-.emoji-no_mobile_phones { background-position: -180px -660px; }
-.emoji-no_mouth { background-position: -200px -660px; }
-.emoji-no_pedestrians { background-position: -220px -660px; }
-.emoji-no_smoking { background-position: -240px -660px; }
-.emoji-non-potable_water { background-position: -260px -660px; }
-.emoji-nose { background-position: -280px -660px; }
-.emoji-nose_tone1 { background-position: -300px -660px; }
-.emoji-nose_tone2 { background-position: -320px -660px; }
-.emoji-nose_tone3 { background-position: -340px -660px; }
-.emoji-nose_tone4 { background-position: -360px -660px; }
-.emoji-nose_tone5 { background-position: -380px -660px; }
-.emoji-notebook { background-position: -400px -660px; }
-.emoji-notebook_with_decorative_cover { background-position: -420px -660px; }
-.emoji-notepad_spiral { background-position: -440px -660px; }
-.emoji-notes { background-position: -460px -660px; }
-.emoji-nut_and_bolt { background-position: -480px -660px; }
-.emoji-o { background-position: -500px -660px; }
-.emoji-o2 { background-position: -520px -660px; }
-.emoji-ocean { background-position: -540px -660px; }
-.emoji-octagonal_sign { background-position: -560px -660px; }
-.emoji-octopus { background-position: -580px -660px; }
-.emoji-oden { background-position: -600px -660px; }
-.emoji-office { background-position: -620px -660px; }
-.emoji-oil { background-position: -640px -660px; }
-.emoji-ok { background-position: -660px -660px; }
-.emoji-ok_hand { background-position: -680px 0; }
-.emoji-ok_hand_tone1 { background-position: -680px -20px; }
-.emoji-ok_hand_tone2 { background-position: -680px -40px; }
-.emoji-ok_hand_tone3 { background-position: -680px -60px; }
-.emoji-ok_hand_tone4 { background-position: -680px -80px; }
-.emoji-ok_hand_tone5 { background-position: -680px -100px; }
-.emoji-ok_woman { background-position: -680px -120px; }
-.emoji-ok_woman_tone1 { background-position: -680px -140px; }
-.emoji-ok_woman_tone2 { background-position: -680px -160px; }
-.emoji-ok_woman_tone3 { background-position: -680px -180px; }
-.emoji-ok_woman_tone4 { background-position: -680px -200px; }
-.emoji-ok_woman_tone5 { background-position: -680px -220px; }
-.emoji-older_man { background-position: -680px -240px; }
-.emoji-older_man_tone1 { background-position: -680px -260px; }
-.emoji-older_man_tone2 { background-position: -680px -280px; }
-.emoji-older_man_tone3 { background-position: -680px -300px; }
-.emoji-older_man_tone4 { background-position: -680px -320px; }
-.emoji-older_man_tone5 { background-position: -680px -340px; }
-.emoji-older_woman { background-position: -680px -360px; }
-.emoji-older_woman_tone1 { background-position: -680px -380px; }
-.emoji-older_woman_tone2 { background-position: -680px -400px; }
-.emoji-older_woman_tone3 { background-position: -680px -420px; }
-.emoji-older_woman_tone4 { background-position: -680px -440px; }
-.emoji-older_woman_tone5 { background-position: -680px -460px; }
-.emoji-om_symbol { background-position: -680px -480px; }
-.emoji-on { background-position: -680px -500px; }
-.emoji-oncoming_automobile { background-position: -680px -520px; }
-.emoji-oncoming_bus { background-position: -680px -540px; }
-.emoji-oncoming_police_car { background-position: -680px -560px; }
-.emoji-oncoming_taxi { background-position: -680px -580px; }
-.emoji-one { background-position: -680px -600px; }
-.emoji-open_file_folder { background-position: -680px -620px; }
-.emoji-open_hands { background-position: -680px -640px; }
-.emoji-open_hands_tone1 { background-position: -680px -660px; }
-.emoji-open_hands_tone2 { background-position: 0 -680px; }
-.emoji-open_hands_tone3 { background-position: -20px -680px; }
-.emoji-open_hands_tone4 { background-position: -40px -680px; }
-.emoji-open_hands_tone5 { background-position: -60px -680px; }
-.emoji-open_mouth { background-position: -80px -680px; }
-.emoji-ophiuchus { background-position: -100px -680px; }
-.emoji-orange_book { background-position: -120px -680px; }
-.emoji-orthodox_cross { background-position: -140px -680px; }
-.emoji-outbox_tray { background-position: -160px -680px; }
-.emoji-owl { background-position: -180px -680px; }
-.emoji-ox { background-position: -200px -680px; }
-.emoji-package { background-position: -220px -680px; }
-.emoji-page_facing_up { background-position: -240px -680px; }
-.emoji-page_with_curl { background-position: -260px -680px; }
-.emoji-pager { background-position: -280px -680px; }
-.emoji-paintbrush { background-position: -300px -680px; }
-.emoji-palm_tree { background-position: -320px -680px; }
-.emoji-pancakes { background-position: -340px -680px; }
-.emoji-panda_face { background-position: -360px -680px; }
-.emoji-paperclip { background-position: -380px -680px; }
-.emoji-paperclips { background-position: -400px -680px; }
-.emoji-park { background-position: -420px -680px; }
-.emoji-parking { background-position: -440px -680px; }
-.emoji-part_alternation_mark { background-position: -460px -680px; }
-.emoji-partly_sunny { background-position: -480px -680px; }
-.emoji-passport_control { background-position: -500px -680px; }
-.emoji-pause_button { background-position: -520px -680px; }
-.emoji-peace { background-position: -540px -680px; }
-.emoji-peach { background-position: -560px -680px; }
-.emoji-peanuts { background-position: -580px -680px; }
-.emoji-pear { background-position: -600px -680px; }
-.emoji-pen_ballpoint { background-position: -620px -680px; }
-.emoji-pen_fountain { background-position: -640px -680px; }
-.emoji-pencil { background-position: -660px -680px; }
-.emoji-pencil2 { background-position: -680px -680px; }
-.emoji-penguin { background-position: -700px 0; }
-.emoji-pensive { background-position: -700px -20px; }
-.emoji-performing_arts { background-position: -700px -40px; }
-.emoji-persevere { background-position: -700px -60px; }
-.emoji-person_frowning { background-position: -700px -80px; }
-.emoji-person_frowning_tone1 { background-position: -700px -100px; }
-.emoji-person_frowning_tone2 { background-position: -700px -120px; }
-.emoji-person_frowning_tone3 { background-position: -700px -140px; }
-.emoji-person_frowning_tone4 { background-position: -700px -160px; }
-.emoji-person_frowning_tone5 { background-position: -700px -180px; }
-.emoji-person_with_blond_hair { background-position: -700px -200px; }
-.emoji-person_with_blond_hair_tone1 { background-position: -700px -220px; }
-.emoji-person_with_blond_hair_tone2 { background-position: -700px -240px; }
-.emoji-person_with_blond_hair_tone3 { background-position: -700px -260px; }
-.emoji-person_with_blond_hair_tone4 { background-position: -700px -280px; }
-.emoji-person_with_blond_hair_tone5 { background-position: -700px -300px; }
-.emoji-person_with_pouting_face { background-position: -700px -320px; }
-.emoji-person_with_pouting_face_tone1 { background-position: -700px -340px; }
-.emoji-person_with_pouting_face_tone2 { background-position: -700px -360px; }
-.emoji-person_with_pouting_face_tone3 { background-position: -700px -380px; }
-.emoji-person_with_pouting_face_tone4 { background-position: -700px -400px; }
-.emoji-person_with_pouting_face_tone5 { background-position: -700px -420px; }
-.emoji-pick { background-position: -700px -440px; }
-.emoji-pig { background-position: -700px -460px; }
-.emoji-pig2 { background-position: -700px -480px; }
-.emoji-pig_nose { background-position: -700px -500px; }
-.emoji-pill { background-position: -700px -520px; }
-.emoji-pineapple { background-position: -700px -540px; }
-.emoji-ping_pong { background-position: -700px -560px; }
-.emoji-pisces { background-position: -700px -580px; }
-.emoji-pizza { background-position: -700px -600px; }
-.emoji-place_of_worship { background-position: -700px -620px; }
-.emoji-play_pause { background-position: -700px -640px; }
-.emoji-point_down { background-position: -700px -660px; }
-.emoji-point_down_tone1 { background-position: -700px -680px; }
-.emoji-point_down_tone2 { background-position: 0 -700px; }
-.emoji-point_down_tone3 { background-position: -20px -700px; }
-.emoji-point_down_tone4 { background-position: -40px -700px; }
-.emoji-point_down_tone5 { background-position: -60px -700px; }
-.emoji-point_left { background-position: -80px -700px; }
-.emoji-point_left_tone1 { background-position: -100px -700px; }
-.emoji-point_left_tone2 { background-position: -120px -700px; }
-.emoji-point_left_tone3 { background-position: -140px -700px; }
-.emoji-point_left_tone4 { background-position: -160px -700px; }
-.emoji-point_left_tone5 { background-position: -180px -700px; }
-.emoji-point_right { background-position: -200px -700px; }
-.emoji-point_right_tone1 { background-position: -220px -700px; }
-.emoji-point_right_tone2 { background-position: -240px -700px; }
-.emoji-point_right_tone3 { background-position: -260px -700px; }
-.emoji-point_right_tone4 { background-position: -280px -700px; }
-.emoji-point_right_tone5 { background-position: -300px -700px; }
-.emoji-point_up { background-position: -320px -700px; }
-.emoji-point_up_2 { background-position: -340px -700px; }
-.emoji-point_up_2_tone1 { background-position: -360px -700px; }
-.emoji-point_up_2_tone2 { background-position: -380px -700px; }
-.emoji-point_up_2_tone3 { background-position: -400px -700px; }
-.emoji-point_up_2_tone4 { background-position: -420px -700px; }
-.emoji-point_up_2_tone5 { background-position: -440px -700px; }
-.emoji-point_up_tone1 { background-position: -460px -700px; }
-.emoji-point_up_tone2 { background-position: -480px -700px; }
-.emoji-point_up_tone3 { background-position: -500px -700px; }
-.emoji-point_up_tone4 { background-position: -520px -700px; }
-.emoji-point_up_tone5 { background-position: -540px -700px; }
-.emoji-police_car { background-position: -560px -700px; }
-.emoji-poodle { background-position: -580px -700px; }
-.emoji-poop { background-position: -600px -700px; }
-.emoji-popcorn { background-position: -620px -700px; }
-.emoji-post_office { background-position: -640px -700px; }
-.emoji-postal_horn { background-position: -660px -700px; }
-.emoji-postbox { background-position: -680px -700px; }
-.emoji-potable_water { background-position: -700px -700px; }
-.emoji-potato { background-position: -720px 0; }
-.emoji-pouch { background-position: -720px -20px; }
-.emoji-poultry_leg { background-position: -720px -40px; }
-.emoji-pound { background-position: -720px -60px; }
-.emoji-pouting_cat { background-position: -720px -80px; }
-.emoji-pray { background-position: -720px -100px; }
-.emoji-pray_tone1 { background-position: -720px -120px; }
-.emoji-pray_tone2 { background-position: -720px -140px; }
-.emoji-pray_tone3 { background-position: -720px -160px; }
-.emoji-pray_tone4 { background-position: -720px -180px; }
-.emoji-pray_tone5 { background-position: -720px -200px; }
-.emoji-prayer_beads { background-position: -720px -220px; }
-.emoji-pregnant_woman { background-position: -720px -240px; }
-.emoji-pregnant_woman_tone1 { background-position: -720px -260px; }
-.emoji-pregnant_woman_tone2 { background-position: -720px -280px; }
-.emoji-pregnant_woman_tone3 { background-position: -720px -300px; }
-.emoji-pregnant_woman_tone4 { background-position: -720px -320px; }
-.emoji-pregnant_woman_tone5 { background-position: -720px -340px; }
-.emoji-prince { background-position: -720px -360px; }
-.emoji-prince_tone1 { background-position: -720px -380px; }
-.emoji-prince_tone2 { background-position: -720px -400px; }
-.emoji-prince_tone3 { background-position: -720px -420px; }
-.emoji-prince_tone4 { background-position: -720px -440px; }
-.emoji-prince_tone5 { background-position: -720px -460px; }
-.emoji-princess { background-position: -720px -480px; }
-.emoji-princess_tone1 { background-position: -720px -500px; }
-.emoji-princess_tone2 { background-position: -720px -520px; }
-.emoji-princess_tone3 { background-position: -720px -540px; }
-.emoji-princess_tone4 { background-position: -720px -560px; }
-.emoji-princess_tone5 { background-position: -720px -580px; }
-.emoji-printer { background-position: -720px -600px; }
-.emoji-projector { background-position: -720px -620px; }
-.emoji-punch { background-position: -720px -640px; }
-.emoji-punch_tone1 { background-position: -720px -660px; }
-.emoji-punch_tone2 { background-position: -720px -680px; }
-.emoji-punch_tone3 { background-position: -720px -700px; }
-.emoji-punch_tone4 { background-position: 0 -720px; }
-.emoji-punch_tone5 { background-position: -20px -720px; }
-.emoji-purple_heart { background-position: -40px -720px; }
-.emoji-purse { background-position: -60px -720px; }
-.emoji-pushpin { background-position: -80px -720px; }
-.emoji-put_litter_in_its_place { background-position: -100px -720px; }
-.emoji-question { background-position: -120px -720px; }
-.emoji-rabbit { background-position: -140px -720px; }
-.emoji-rabbit2 { background-position: -160px -720px; }
-.emoji-race_car { background-position: -180px -720px; }
-.emoji-racehorse { background-position: -200px -720px; }
-.emoji-radio { background-position: -220px -720px; }
-.emoji-radio_button { background-position: -240px -720px; }
-.emoji-radioactive { background-position: -260px -720px; }
-.emoji-rage { background-position: -280px -720px; }
-.emoji-railway_car { background-position: -300px -720px; }
-.emoji-railway_track { background-position: -320px -720px; }
-.emoji-rainbow { background-position: -340px -720px; }
-.emoji-raised_back_of_hand { background-position: -360px -720px; }
-.emoji-raised_back_of_hand_tone1 { background-position: -380px -720px; }
-.emoji-raised_back_of_hand_tone2 { background-position: -400px -720px; }
-.emoji-raised_back_of_hand_tone3 { background-position: -420px -720px; }
-.emoji-raised_back_of_hand_tone4 { background-position: -440px -720px; }
-.emoji-raised_back_of_hand_tone5 { background-position: -460px -720px; }
-.emoji-raised_hand { background-position: -480px -720px; }
-.emoji-raised_hand_tone1 { background-position: -500px -720px; }
-.emoji-raised_hand_tone2 { background-position: -520px -720px; }
-.emoji-raised_hand_tone3 { background-position: -540px -720px; }
-.emoji-raised_hand_tone4 { background-position: -560px -720px; }
-.emoji-raised_hand_tone5 { background-position: -580px -720px; }
-.emoji-raised_hands { background-position: -600px -720px; }
-.emoji-raised_hands_tone1 { background-position: -620px -720px; }
-.emoji-raised_hands_tone2 { background-position: -640px -720px; }
-.emoji-raised_hands_tone3 { background-position: -660px -720px; }
-.emoji-raised_hands_tone4 { background-position: -680px -720px; }
-.emoji-raised_hands_tone5 { background-position: -700px -720px; }
-.emoji-raising_hand { background-position: -720px -720px; }
-.emoji-raising_hand_tone1 { background-position: -740px 0; }
-.emoji-raising_hand_tone2 { background-position: -740px -20px; }
-.emoji-raising_hand_tone3 { background-position: -740px -40px; }
-.emoji-raising_hand_tone4 { background-position: -740px -60px; }
-.emoji-raising_hand_tone5 { background-position: -740px -80px; }
-.emoji-ram { background-position: -740px -100px; }
-.emoji-ramen { background-position: -740px -120px; }
-.emoji-rat { background-position: -740px -140px; }
-.emoji-record_button { background-position: -740px -160px; }
-.emoji-recycle { background-position: -740px -180px; }
-.emoji-red_car { background-position: -740px -200px; }
-.emoji-red_circle { background-position: -740px -220px; }
-.emoji-registered { background-position: -740px -240px; }
-.emoji-relaxed { background-position: -740px -260px; }
-.emoji-relieved { background-position: -740px -280px; }
-.emoji-reminder_ribbon { background-position: -740px -300px; }
-.emoji-repeat { background-position: -740px -320px; }
-.emoji-repeat_one { background-position: -740px -340px; }
-.emoji-restroom { background-position: -740px -360px; }
-.emoji-revolving_hearts { background-position: -740px -380px; }
-.emoji-rewind { background-position: -740px -400px; }
-.emoji-rhino { background-position: -740px -420px; }
-.emoji-ribbon { background-position: -740px -440px; }
-.emoji-rice { background-position: -740px -460px; }
-.emoji-rice_ball { background-position: -740px -480px; }
-.emoji-rice_cracker { background-position: -740px -500px; }
-.emoji-rice_scene { background-position: -740px -520px; }
-.emoji-right_facing_fist { background-position: -740px -540px; }
-.emoji-right_facing_fist_tone1 { background-position: -740px -560px; }
-.emoji-right_facing_fist_tone2 { background-position: -740px -580px; }
-.emoji-right_facing_fist_tone3 { background-position: -740px -600px; }
-.emoji-right_facing_fist_tone4 { background-position: -740px -620px; }
-.emoji-right_facing_fist_tone5 { background-position: -740px -640px; }
-.emoji-ring { background-position: -740px -660px; }
-.emoji-robot { background-position: -740px -680px; }
-.emoji-rocket { background-position: -740px -700px; }
-.emoji-rofl { background-position: -740px -720px; }
-.emoji-roller_coaster { background-position: 0 -740px; }
-.emoji-rolling_eyes { background-position: -20px -740px; }
-.emoji-rooster { background-position: -40px -740px; }
-.emoji-rose { background-position: -60px -740px; }
-.emoji-rosette { background-position: -80px -740px; }
-.emoji-rotating_light { background-position: -100px -740px; }
-.emoji-round_pushpin { background-position: -120px -740px; }
-.emoji-rowboat { background-position: -140px -740px; }
-.emoji-rowboat_tone1 { background-position: -160px -740px; }
-.emoji-rowboat_tone2 { background-position: -180px -740px; }
-.emoji-rowboat_tone3 { background-position: -200px -740px; }
-.emoji-rowboat_tone4 { background-position: -220px -740px; }
-.emoji-rowboat_tone5 { background-position: -240px -740px; }
-.emoji-rugby_football { background-position: -260px -740px; }
-.emoji-runner { background-position: -280px -740px; }
-.emoji-runner_tone1 { background-position: -300px -740px; }
-.emoji-runner_tone2 { background-position: -320px -740px; }
-.emoji-runner_tone3 { background-position: -340px -740px; }
-.emoji-runner_tone4 { background-position: -360px -740px; }
-.emoji-runner_tone5 { background-position: -380px -740px; }
-.emoji-running_shirt_with_sash { background-position: -400px -740px; }
-.emoji-sa { background-position: -420px -740px; }
-.emoji-sagittarius { background-position: -440px -740px; }
-.emoji-sailboat { background-position: -460px -740px; }
-.emoji-sake { background-position: -480px -740px; }
-.emoji-salad { background-position: -500px -740px; }
-.emoji-sandal { background-position: -520px -740px; }
-.emoji-santa { background-position: -540px -740px; }
-.emoji-santa_tone1 { background-position: -560px -740px; }
-.emoji-santa_tone2 { background-position: -580px -740px; }
-.emoji-santa_tone3 { background-position: -600px -740px; }
-.emoji-santa_tone4 { background-position: -620px -740px; }
-.emoji-santa_tone5 { background-position: -640px -740px; }
-.emoji-satellite { background-position: -660px -740px; }
-.emoji-satellite_orbital { background-position: -680px -740px; }
-.emoji-saxophone { background-position: -700px -740px; }
-.emoji-scales { background-position: -720px -740px; }
-.emoji-school { background-position: -740px -740px; }
-.emoji-school_satchel { background-position: -760px 0; }
-.emoji-scissors { background-position: -760px -20px; }
-.emoji-scooter { background-position: -760px -40px; }
-.emoji-scorpion { background-position: -760px -60px; }
-.emoji-scorpius { background-position: -760px -80px; }
-.emoji-scream { background-position: -760px -100px; }
-.emoji-scream_cat { background-position: -760px -120px; }
-.emoji-scroll { background-position: -760px -140px; }
-.emoji-seat { background-position: -760px -160px; }
-.emoji-second_place { background-position: -760px -180px; }
-.emoji-secret { background-position: -760px -200px; }
-.emoji-see_no_evil { background-position: -760px -220px; }
-.emoji-seedling { background-position: -760px -240px; }
-.emoji-selfie { background-position: -760px -260px; }
-.emoji-selfie_tone1 { background-position: -760px -280px; }
-.emoji-selfie_tone2 { background-position: -760px -300px; }
-.emoji-selfie_tone3 { background-position: -760px -320px; }
-.emoji-selfie_tone4 { background-position: -760px -340px; }
-.emoji-selfie_tone5 { background-position: -760px -360px; }
-.emoji-seven { background-position: -760px -380px; }
-.emoji-shallow_pan_of_food { background-position: -760px -400px; }
-.emoji-shamrock { background-position: -760px -420px; }
-.emoji-shark { background-position: -760px -440px; }
-.emoji-shaved_ice { background-position: -760px -460px; }
-.emoji-sheep { background-position: -760px -480px; }
-.emoji-shell { background-position: -760px -500px; }
-.emoji-shield { background-position: -760px -520px; }
-.emoji-shinto_shrine { background-position: -760px -540px; }
-.emoji-ship { background-position: -760px -560px; }
-.emoji-shirt { background-position: -760px -580px; }
-.emoji-shopping_bags { background-position: -760px -600px; }
-.emoji-shopping_cart { background-position: -760px -620px; }
-.emoji-shower { background-position: -760px -640px; }
-.emoji-shrimp { background-position: -760px -660px; }
-.emoji-shrug { background-position: -760px -680px; }
-.emoji-shrug_tone1 { background-position: -760px -700px; }
-.emoji-shrug_tone2 { background-position: -760px -720px; }
-.emoji-shrug_tone3 { background-position: -760px -740px; }
-.emoji-shrug_tone4 { background-position: 0 -760px; }
-.emoji-shrug_tone5 { background-position: -20px -760px; }
-.emoji-signal_strength { background-position: -40px -760px; }
-.emoji-six { background-position: -60px -760px; }
-.emoji-six_pointed_star { background-position: -80px -760px; }
-.emoji-ski { background-position: -100px -760px; }
-.emoji-skier { background-position: -120px -760px; }
-.emoji-skull { background-position: -140px -760px; }
-.emoji-skull_crossbones { background-position: -160px -760px; }
-.emoji-sleeping { background-position: -180px -760px; }
-.emoji-sleeping_accommodation { background-position: -200px -760px; }
-.emoji-sleepy { background-position: -220px -760px; }
-.emoji-slight_frown { background-position: -240px -760px; }
-.emoji-slight_smile { background-position: -260px -760px; }
-.emoji-slot_machine { background-position: -280px -760px; }
-.emoji-small_blue_diamond { background-position: -300px -760px; }
-.emoji-small_orange_diamond { background-position: -320px -760px; }
-.emoji-small_red_triangle { background-position: -340px -760px; }
-.emoji-small_red_triangle_down { background-position: -360px -760px; }
-.emoji-smile { background-position: -380px -760px; }
-.emoji-smile_cat { background-position: -400px -760px; }
-.emoji-smiley { background-position: -420px -760px; }
-.emoji-smiley_cat { background-position: -440px -760px; }
-.emoji-smiling_imp { background-position: -460px -760px; }
-.emoji-smirk { background-position: -480px -760px; }
-.emoji-smirk_cat { background-position: -500px -760px; }
-.emoji-smoking { background-position: -520px -760px; }
-.emoji-snail { background-position: -540px -760px; }
-.emoji-snake { background-position: -560px -760px; }
-.emoji-sneezing_face { background-position: -580px -760px; }
-.emoji-snowboarder { background-position: -600px -760px; }
-.emoji-snowflake { background-position: -620px -760px; }
-.emoji-snowman { background-position: -640px -760px; }
-.emoji-snowman2 { background-position: -660px -760px; }
-.emoji-sob { background-position: -680px -760px; }
-.emoji-soccer { background-position: -700px -760px; }
-.emoji-soon { background-position: -720px -760px; }
-.emoji-sos { background-position: -740px -760px; }
-.emoji-sound { background-position: -760px -760px; }
-.emoji-space_invader { background-position: -780px 0; }
-.emoji-spades { background-position: -780px -20px; }
-.emoji-spaghetti { background-position: -780px -40px; }
-.emoji-sparkle { background-position: -780px -60px; }
-.emoji-sparkler { background-position: -780px -80px; }
-.emoji-sparkles { background-position: -780px -100px; }
-.emoji-sparkling_heart { background-position: -780px -120px; }
-.emoji-speak_no_evil { background-position: -780px -140px; }
-.emoji-speaker { background-position: -780px -160px; }
-.emoji-speaking_head { background-position: -780px -180px; }
-.emoji-speech_balloon { background-position: -780px -200px; }
-.emoji-speech_left { background-position: -780px -220px; }
-.emoji-speedboat { background-position: -780px -240px; }
-.emoji-spider { background-position: -780px -260px; }
-.emoji-spider_web { background-position: -780px -280px; }
-.emoji-spoon { background-position: -780px -300px; }
-.emoji-spy { background-position: -780px -320px; }
-.emoji-spy_tone1 { background-position: -780px -340px; }
-.emoji-spy_tone2 { background-position: -780px -360px; }
-.emoji-spy_tone3 { background-position: -780px -380px; }
-.emoji-spy_tone4 { background-position: -780px -400px; }
-.emoji-spy_tone5 { background-position: -780px -420px; }
-.emoji-squid { background-position: -780px -440px; }
-.emoji-stadium { background-position: -780px -460px; }
-.emoji-star { background-position: -780px -480px; }
-.emoji-star2 { background-position: -780px -500px; }
-.emoji-star_and_crescent { background-position: -780px -520px; }
-.emoji-star_of_david { background-position: -780px -540px; }
-.emoji-stars { background-position: -780px -560px; }
-.emoji-station { background-position: -780px -580px; }
-.emoji-statue_of_liberty { background-position: -780px -600px; }
-.emoji-steam_locomotive { background-position: -780px -620px; }
-.emoji-stew { background-position: -780px -640px; }
-.emoji-stop_button { background-position: -780px -660px; }
-.emoji-stopwatch { background-position: -780px -680px; }
-.emoji-straight_ruler { background-position: -780px -700px; }
-.emoji-strawberry { background-position: -780px -720px; }
-.emoji-stuck_out_tongue { background-position: -780px -740px; }
-.emoji-stuck_out_tongue_closed_eyes { background-position: -780px -760px; }
-.emoji-stuck_out_tongue_winking_eye { background-position: 0 -780px; }
-.emoji-stuffed_flatbread { background-position: -20px -780px; }
-.emoji-sun_with_face { background-position: -40px -780px; }
-.emoji-sunflower { background-position: -60px -780px; }
-.emoji-sunglasses { background-position: -80px -780px; }
-.emoji-sunny { background-position: -100px -780px; }
-.emoji-sunrise { background-position: -120px -780px; }
-.emoji-sunrise_over_mountains { background-position: -140px -780px; }
-.emoji-surfer { background-position: -160px -780px; }
-.emoji-surfer_tone1 { background-position: -180px -780px; }
-.emoji-surfer_tone2 { background-position: -200px -780px; }
-.emoji-surfer_tone3 { background-position: -220px -780px; }
-.emoji-surfer_tone4 { background-position: -240px -780px; }
-.emoji-surfer_tone5 { background-position: -260px -780px; }
-.emoji-sushi { background-position: -280px -780px; }
-.emoji-suspension_railway { background-position: -300px -780px; }
-.emoji-sweat { background-position: -320px -780px; }
-.emoji-sweat_drops { background-position: -340px -780px; }
-.emoji-sweat_smile { background-position: -360px -780px; }
-.emoji-sweet_potato { background-position: -380px -780px; }
-.emoji-swimmer { background-position: -400px -780px; }
-.emoji-swimmer_tone1 { background-position: -420px -780px; }
-.emoji-swimmer_tone2 { background-position: -440px -780px; }
-.emoji-swimmer_tone3 { background-position: -460px -780px; }
-.emoji-swimmer_tone4 { background-position: -480px -780px; }
-.emoji-swimmer_tone5 { background-position: -500px -780px; }
-.emoji-symbols { background-position: -520px -780px; }
-.emoji-synagogue { background-position: -540px -780px; }
-.emoji-syringe { background-position: -560px -780px; }
-.emoji-taco { background-position: -580px -780px; }
-.emoji-tada { background-position: -600px -780px; }
-.emoji-tanabata_tree { background-position: -620px -780px; }
-.emoji-tangerine { background-position: -640px -780px; }
-.emoji-taurus { background-position: -660px -780px; }
-.emoji-taxi { background-position: -680px -780px; }
-.emoji-tea { background-position: -700px -780px; }
-.emoji-telephone { background-position: -720px -780px; }
-.emoji-telephone_receiver { background-position: -740px -780px; }
-.emoji-telescope { background-position: -760px -780px; }
-.emoji-ten { background-position: -780px -780px; }
-.emoji-tennis { background-position: -800px 0; }
-.emoji-tent { background-position: -800px -20px; }
-.emoji-thermometer { background-position: -800px -40px; }
-.emoji-thermometer_face { background-position: -800px -60px; }
-.emoji-thinking { background-position: -800px -80px; }
-.emoji-third_place { background-position: -800px -100px; }
-.emoji-thought_balloon { background-position: -800px -120px; }
-.emoji-three { background-position: -800px -140px; }
-.emoji-thumbsdown { background-position: -800px -160px; }
-.emoji-thumbsdown_tone1 { background-position: -800px -180px; }
-.emoji-thumbsdown_tone2 { background-position: -800px -200px; }
-.emoji-thumbsdown_tone3 { background-position: -800px -220px; }
-.emoji-thumbsdown_tone4 { background-position: -800px -240px; }
-.emoji-thumbsdown_tone5 { background-position: -800px -260px; }
-.emoji-thumbsup { background-position: -800px -280px; }
-.emoji-thumbsup_tone1 { background-position: -800px -300px; }
-.emoji-thumbsup_tone2 { background-position: -800px -320px; }
-.emoji-thumbsup_tone3 { background-position: -800px -340px; }
-.emoji-thumbsup_tone4 { background-position: -800px -360px; }
-.emoji-thumbsup_tone5 { background-position: -800px -380px; }
-.emoji-thunder_cloud_rain { background-position: -800px -400px; }
-.emoji-ticket { background-position: -800px -420px; }
-.emoji-tickets { background-position: -800px -440px; }
-.emoji-tiger { background-position: -800px -460px; }
-.emoji-tiger2 { background-position: -800px -480px; }
-.emoji-timer { background-position: -800px -500px; }
-.emoji-tired_face { background-position: -800px -520px; }
-.emoji-tm { background-position: -800px -540px; }
-.emoji-toilet { background-position: -800px -560px; }
-.emoji-tokyo_tower { background-position: -800px -580px; }
-.emoji-tomato { background-position: -800px -600px; }
-.emoji-tone1 { background-position: -800px -620px; }
-.emoji-tone2 { background-position: -800px -640px; }
-.emoji-tone3 { background-position: -800px -660px; }
-.emoji-tone4 { background-position: -800px -680px; }
-.emoji-tone5 { background-position: -800px -700px; }
-.emoji-tongue { background-position: -800px -720px; }
-.emoji-tools { background-position: -800px -740px; }
-.emoji-top { background-position: -800px -760px; }
-.emoji-tophat { background-position: -800px -780px; }
-.emoji-track_next { background-position: 0 -800px; }
-.emoji-track_previous { background-position: -20px -800px; }
-.emoji-trackball { background-position: -40px -800px; }
-.emoji-tractor { background-position: -60px -800px; }
-.emoji-traffic_light { background-position: -80px -800px; }
-.emoji-train { background-position: -100px -800px; }
-.emoji-train2 { background-position: -120px -800px; }
-.emoji-tram { background-position: -140px -800px; }
-.emoji-triangular_flag_on_post { background-position: -160px -800px; }
-.emoji-triangular_ruler { background-position: -180px -800px; }
-.emoji-trident { background-position: -200px -800px; }
-.emoji-triumph { background-position: -220px -800px; }
-.emoji-trolleybus { background-position: -240px -800px; }
-.emoji-trophy { background-position: -260px -800px; }
-.emoji-tropical_drink { background-position: -280px -800px; }
-.emoji-tropical_fish { background-position: -300px -800px; }
-.emoji-truck { background-position: -320px -800px; }
-.emoji-trumpet { background-position: -340px -800px; }
-.emoji-tulip { background-position: -360px -800px; }
-.emoji-tumbler_glass { background-position: -380px -800px; }
-.emoji-turkey { background-position: -400px -800px; }
-.emoji-turtle { background-position: -420px -800px; }
-.emoji-tv { background-position: -440px -800px; }
-.emoji-twisted_rightwards_arrows { background-position: -460px -800px; }
-.emoji-two { background-position: -480px -800px; }
-.emoji-two_hearts { background-position: -500px -800px; }
-.emoji-two_men_holding_hands { background-position: -520px -800px; }
-.emoji-two_women_holding_hands { background-position: -540px -800px; }
-.emoji-u5272 { background-position: -560px -800px; }
-.emoji-u5408 { background-position: -580px -800px; }
-.emoji-u55b6 { background-position: -600px -800px; }
-.emoji-u6307 { background-position: -620px -800px; }
-.emoji-u6708 { background-position: -640px -800px; }
-.emoji-u6709 { background-position: -660px -800px; }
-.emoji-u6e80 { background-position: -680px -800px; }
-.emoji-u7121 { background-position: -700px -800px; }
-.emoji-u7533 { background-position: -720px -800px; }
-.emoji-u7981 { background-position: -740px -800px; }
-.emoji-u7a7a { background-position: -760px -800px; }
-.emoji-umbrella { background-position: -780px -800px; }
-.emoji-umbrella2 { background-position: -800px -800px; }
-.emoji-unamused { background-position: -820px 0; }
-.emoji-underage { background-position: -820px -20px; }
-.emoji-unicorn { background-position: -820px -40px; }
-.emoji-unlock { background-position: -820px -60px; }
-.emoji-up { background-position: -820px -80px; }
-.emoji-upside_down { background-position: -820px -100px; }
-.emoji-urn { background-position: -820px -120px; }
-.emoji-v { background-position: -820px -140px; }
-.emoji-v_tone1 { background-position: -820px -160px; }
-.emoji-v_tone2 { background-position: -820px -180px; }
-.emoji-v_tone3 { background-position: -820px -200px; }
-.emoji-v_tone4 { background-position: -820px -220px; }
-.emoji-v_tone5 { background-position: -820px -240px; }
-.emoji-vertical_traffic_light { background-position: -820px -260px; }
-.emoji-vhs { background-position: -820px -280px; }
-.emoji-vibration_mode { background-position: -820px -300px; }
-.emoji-video_camera { background-position: -820px -320px; }
-.emoji-video_game { background-position: -820px -340px; }
-.emoji-violin { background-position: -820px -360px; }
-.emoji-virgo { background-position: -820px -380px; }
-.emoji-volcano { background-position: -820px -400px; }
-.emoji-volleyball { background-position: -820px -420px; }
-.emoji-vs { background-position: -820px -440px; }
-.emoji-vulcan { background-position: -820px -460px; }
-.emoji-vulcan_tone1 { background-position: -820px -480px; }
-.emoji-vulcan_tone2 { background-position: -820px -500px; }
-.emoji-vulcan_tone3 { background-position: -820px -520px; }
-.emoji-vulcan_tone4 { background-position: -820px -540px; }
-.emoji-vulcan_tone5 { background-position: -820px -560px; }
-.emoji-walking { background-position: -820px -580px; }
-.emoji-walking_tone1 { background-position: -820px -600px; }
-.emoji-walking_tone2 { background-position: -820px -620px; }
-.emoji-walking_tone3 { background-position: -820px -640px; }
-.emoji-walking_tone4 { background-position: -820px -660px; }
-.emoji-walking_tone5 { background-position: -820px -680px; }
-.emoji-waning_crescent_moon { background-position: -820px -700px; }
-.emoji-waning_gibbous_moon { background-position: -820px -720px; }
-.emoji-warning { background-position: -820px -740px; }
-.emoji-wastebasket { background-position: -820px -760px; }
-.emoji-watch { background-position: -820px -780px; }
-.emoji-water_buffalo { background-position: -820px -800px; }
-.emoji-water_polo { background-position: 0 -820px; }
-.emoji-water_polo_tone1 { background-position: -20px -820px; }
-.emoji-water_polo_tone2 { background-position: -40px -820px; }
-.emoji-water_polo_tone3 { background-position: -60px -820px; }
-.emoji-water_polo_tone4 { background-position: -80px -820px; }
-.emoji-water_polo_tone5 { background-position: -100px -820px; }
-.emoji-watermelon { background-position: -120px -820px; }
-.emoji-wave { background-position: -140px -820px; }
-.emoji-wave_tone1 { background-position: -160px -820px; }
-.emoji-wave_tone2 { background-position: -180px -820px; }
-.emoji-wave_tone3 { background-position: -200px -820px; }
-.emoji-wave_tone4 { background-position: -220px -820px; }
-.emoji-wave_tone5 { background-position: -240px -820px; }
-.emoji-wavy_dash { background-position: -260px -820px; }
-.emoji-waxing_crescent_moon { background-position: -280px -820px; }
-.emoji-waxing_gibbous_moon { background-position: -300px -820px; }
-.emoji-wc { background-position: -320px -820px; }
-.emoji-weary { background-position: -340px -820px; }
-.emoji-wedding { background-position: -360px -820px; }
-.emoji-whale { background-position: -380px -820px; }
-.emoji-whale2 { background-position: -400px -820px; }
-.emoji-wheel_of_dharma { background-position: -420px -820px; }
-.emoji-wheelchair { background-position: -440px -820px; }
-.emoji-white_check_mark { background-position: -460px -820px; }
-.emoji-white_circle { background-position: -480px -820px; }
-.emoji-white_flower { background-position: -500px -820px; }
-.emoji-white_large_square { background-position: -520px -820px; }
-.emoji-white_medium_small_square { background-position: -540px -820px; }
-.emoji-white_medium_square { background-position: -560px -820px; }
-.emoji-white_small_square { background-position: -580px -820px; }
-.emoji-white_square_button { background-position: -600px -820px; }
-.emoji-white_sun_cloud { background-position: -620px -820px; }
-.emoji-white_sun_rain_cloud { background-position: -640px -820px; }
-.emoji-white_sun_small_cloud { background-position: -660px -820px; }
-.emoji-wilted_rose { background-position: -680px -820px; }
-.emoji-wind_blowing_face { background-position: -700px -820px; }
-.emoji-wind_chime { background-position: -720px -820px; }
-.emoji-wine_glass { background-position: -740px -820px; }
-.emoji-wink { background-position: -760px -820px; }
-.emoji-wolf { background-position: -780px -820px; }
-.emoji-woman { background-position: -800px -820px; }
-.emoji-woman_tone1 { background-position: -820px -820px; }
-.emoji-woman_tone2 { background-position: -840px 0; }
-.emoji-woman_tone3 { background-position: -840px -20px; }
-.emoji-woman_tone4 { background-position: -840px -40px; }
-.emoji-woman_tone5 { background-position: -840px -60px; }
-.emoji-womans_clothes { background-position: -840px -80px; }
-.emoji-womans_hat { background-position: -840px -100px; }
-.emoji-womens { background-position: -840px -120px; }
-.emoji-worried { background-position: -840px -140px; }
-.emoji-wrench { background-position: -840px -160px; }
-.emoji-wrestlers { background-position: -840px -180px; }
-.emoji-wrestlers_tone1 { background-position: -840px -200px; }
-.emoji-wrestlers_tone2 { background-position: -840px -220px; }
-.emoji-wrestlers_tone3 { background-position: -840px -240px; }
-.emoji-wrestlers_tone4 { background-position: -840px -260px; }
-.emoji-wrestlers_tone5 { background-position: -840px -280px; }
-.emoji-writing_hand { background-position: -840px -300px; }
-.emoji-writing_hand_tone1 { background-position: -840px -320px; }
-.emoji-writing_hand_tone2 { background-position: -840px -340px; }
-.emoji-writing_hand_tone3 { background-position: -840px -360px; }
-.emoji-writing_hand_tone4 { background-position: -840px -380px; }
-.emoji-writing_hand_tone5 { background-position: -840px -400px; }
-.emoji-x { background-position: -840px -420px; }
-.emoji-yellow_heart { background-position: -840px -440px; }
-.emoji-yen { background-position: -840px -460px; }
-.emoji-yin_yang { background-position: -840px -480px; }
-.emoji-yum { background-position: -840px -500px; }
-.emoji-zap { background-position: -840px -520px; }
-.emoji-zero { background-position: -840px -540px; }
-.emoji-zipper_mouth { background-position: -840px -560px; }
-.emoji-100 { background-position: -840px -580px; }
-
-.emoji-icon {
-  background-image: image-url('emoji.png');
-  background-repeat: no-repeat;
-  color: transparent;
-  text-indent: -99em;
-  height: 20px;
-  width: 20px;
-
-  @media only screen and (-webkit-min-device-pixel-ratio: 2),
-         only screen and (min--moz-device-pixel-ratio: 2),
-         only screen and (-o-min-device-pixel-ratio: 2/1),
-         only screen and (min-device-pixel-ratio: 2),
-         only screen and (min-resolution: 192dpi),
-         only screen and (min-resolution: 2dppx) {
-    background-image: image-url('emoji@2x.png');
-    background-size: 860px 840px;
-  }
-}
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
index 4f26cd015e4..cad915bc86f 100644
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -79,7 +79,7 @@
     border-right-color: $dropdown-border-color;
   }
 
-  .popover-content {
+  .popover-body {
     padding: 0;
   }
 }
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index d835d49d8b2..f060254777c 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -75,7 +75,7 @@
     padding: 8px $gl-padding;
     border-bottom: 1px solid $border-color;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       text-align: left;
     }
 
@@ -125,7 +125,7 @@
     &.wiki {
       padding: $gl-padding;
 
-      @media (min-width: $screen-md-min) {
+      @include media-breakpoint-up(md) {
         padding: $gl-padding * 2;
       }
     }
@@ -364,7 +364,7 @@ span.idiff {
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
 
     .file-actions {
@@ -400,3 +400,51 @@ span.idiff {
   color: $common-gray-light;
   border: 1px solid $common-gray-light;
 }
+
+.preview-container {
+  height: 100%;
+  overflow: auto;
+
+  .file-container {
+    background-color: $gray-darker;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+
+    text-align: center;
+
+    .file-content {
+      padding: $gl-padding;
+      max-width: 100%;
+      max-height: 100%;
+
+      img {
+        max-width: 90%;
+        max-height: 70vh;
+      }
+
+      .is-zoomable {
+        cursor: pointer;
+        cursor: zoom-in;
+
+        &.is-zoomed {
+          cursor: pointer;
+          cursor: zoom-out;
+          max-width: none;
+          max-height: none;
+          margin-right: $gl-padding;
+        }
+      }
+    }
+
+    .file-info {
+      font-size: $label-font-size;
+      color: $diff-image-info-color;
+    }
+  }
+
+  .md-previewer {
+    padding: $gl-padding;
+  }
+}
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 621a4adc0cb..551a7e852ae 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -9,19 +9,19 @@
     float: right;
     margin-right: 0;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       float: none;
     }
   }
 }
 
 .filters-section {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: inline-block;
   }
 }
 
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .filter-item:not(:last-child) {
     margin-right: 6px;
   }
@@ -37,7 +37,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .filter-item {
     display: block;
     margin: 0 0 10px;
@@ -53,7 +53,7 @@
   display: -webkit-flex;
   display: flex;
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     -webkit-flex-direction: column;
     flex-direction: column;
   }
@@ -193,7 +193,7 @@
   border: 1px solid $border-color;
   background-color: $white-light;
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     -webkit-flex: 1 1 auto;
     flex: 1 1 auto;
     margin-bottom: 10px;
@@ -264,7 +264,7 @@
   max-width: 280px;
   overflow: auto;
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     width: auto;
     left: 0;
     right: 0;
@@ -299,6 +299,7 @@
     height: 14px;
     width: 14px;
     vertical-align: middle;
+    margin-bottom: 4px;
   }
 
   .dropdown-toggle-text {
@@ -315,7 +316,7 @@
 .filtered-search-history-dropdown {
   width: 40%;
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     left: 0;
     right: 0;
     max-width: none;
@@ -353,7 +354,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .issues-details-filters {
     padding: 0 0 10px;
     background-color: $white-light;
@@ -361,7 +362,7 @@
   }
 }
 
-@media (max-width: $screen-xs) {
+@include media-breakpoint-down(sm) {
   .filter-dropdown-container {
     .dropdown-toggle,
     .dropdown,
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index cb2f71b0033..a6e324036ae 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -8,19 +8,33 @@
 
   .flash-notice {
     @extend .alert;
-    @extend .alert-info;
+    background-color: $blue-500;
     margin: 0;
+
+    &.flash-notice-persistent {
+      background-color: $blue-100;
+      color: $gl-text-color;
+
+      a {
+        color: $gl-link-color;
+
+        &:hover {
+          color: $gl-link-hover-color;
+          text-decoration: none;
+        }
+      }
+    }
   }
 
   .flash-warning {
     @extend .alert;
-    @extend .alert-warning;
+    background-color: $orange-500;
     margin: 0;
   }
 
   .flash-alert {
     @extend .alert;
-    @extend .alert-danger;
+    background-color: $red-500;
     margin: 0;
 
     .flash-text,
@@ -42,14 +56,16 @@
 
   .flash-success {
     @extend .alert;
-    @extend .alert-success;
+    background-color: $green-500;
     margin: 0;
   }
 
   .flash-notice,
   .flash-alert,
-  .flash-success {
+  .flash-success,
+  .flash-warning {
     border-radius: $border-radius-default;
+    color: $white-light;
 
     .container-fluid,
     .container-fluid.container-limited {
@@ -72,7 +88,7 @@
   }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(sm) {
   ul.notes {
     .flash-container.timeline-content {
       margin-left: 0;
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 2c30311b1c1..2b2e6d69e33 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -36,8 +36,8 @@ label {
   }
 }
 
-.control-label {
-  @extend .col-sm-2;
+.form-control-label {
+  @extend .col-md-2;
 }
 
 .inline-input-group {
@@ -48,21 +48,21 @@ label {
   width: 150px;
 }
 
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .custom-form-control {
     width: 150px;
   }
 }
 
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: $screen-md-min) {
+@include media-breakpoint-up(md) {
   .custom-form-control {
     width: 170px;
   }
 }
 
 /* Large devices (large desktops, 1200px and up) */
-@media (min-width: $screen-lg-min) {
+@include media-breakpoint-up(lg) {
   .custom-form-control {
     width: 200px;
   }
@@ -72,7 +72,7 @@ label {
   margin-left: 0;
   margin-right: 0;
 
-  .control-label {
+  .form-control-label {
     font-weight: $gl-font-weight-bold;
     padding-top: 4px;
   }
@@ -83,7 +83,8 @@ label {
     font-family: $monospace_font;
   }
 
-  .input-group-btn .btn {
+  .input-group-prepend .btn,
+  .input-group-append .btn {
     padding: 3px $gl-btn-padding;
     background-color: $gray-light;
     border: 1px solid $border-color;
@@ -102,10 +103,10 @@ label {
     }
   }
 
-  @media(max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     padding: 0 $gl-padding;
 
-    .control-label,
+    .form-control-label,
     .text-block {
       padding-left: 0;
     }
@@ -120,6 +121,14 @@ label {
   @include box-shadow(none);
   border-radius: 2px;
   padding: $gl-vert-padding $gl-input-padding;
+
+  &.input-short {
+    width: $input-short-width;
+
+    @include media-breakpoint-up(md) {
+      width: $input-short-md-width;
+    }
+  }
 }
 
 .select-wrapper {
@@ -155,13 +164,13 @@ label {
   margin-top: 35px;
 }
 
-.form-group .control-label,
-.form-group .control-label-full-width {
+.form-group .form-control-label,
+.form-group .form-control-label-full-width {
   font-weight: $gl-font-weight-normal;
 }
 
 .form-control::-webkit-input-placeholder {
-  color: $gl-text-color-secondary;
+  color: $placeholder-text-color;
 }
 
 .input-group {
@@ -170,17 +179,19 @@ label {
     max-width: 180px;
   }
 
-  .input-group-addon {
+  .input-group-prepend,
+  .input-group-append {
     background-color: $input-group-addon-bg;
   }
 
-  .input-group-addon:not(:first-child):not(:last-child) {
+  .input-group-prepend:not(:first-child):not(:last-child),
+  .input-group-append:not(:first-child):not(:last-child) {
     border-left: 0;
     border-right: 0;
   }
 }
 
-.help-block {
+.form-text.text-muted {
   margin-bottom: 0;
   margin-top: #{$grid-size / 2};
 }
@@ -190,6 +201,10 @@ label {
 }
 
 .gl-show-field-errors {
+  .form-control {
+    height: 34px;
+  }
+
   .gl-field-success-outline {
     border: 1px solid $green-600;
 
@@ -221,7 +236,7 @@ label {
   }
 }
 
-@media(max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .remember-me {
     .remember-me-checkbox {
       margin-top: 0;
diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index e378e84ca1b..1cf12b1a015 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/app/assets/stylesheets/framework/gfm.scss
@@ -19,6 +19,7 @@
 
 .gfm-color_chip {
   display: inline-block;
+  line-height: 1;
   margin: 0 0 2px 4px;
   vertical-align: middle;
   border-radius: 3px;
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index db36e27fa74..aaa8bed3df0 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -2,19 +2,27 @@
  * Styles the GitLab application with a specific color theme
  */
 
-@mixin gitlab-theme($color-100, $color-200, $color-500, $color-700, $color-800, $color-900, $color-alternate) {
+@mixin gitlab-theme(
+  $location-badge-color,
+  $search-and-nav-links,
+  $active-tab-border,
+  $border-and-box-shadow,
+  $sidebar-text,
+  $nav-svg-color,
+  $color-alternate
+) {
   // Header
 
   .navbar-gitlab {
-    background-color: $color-900;
+    background-color: $nav-svg-color;
 
     .navbar-collapse {
-      color: $color-200;
+      color: $search-and-nav-links;
     }
 
     .container-fluid {
-      .navbar-toggle {
-        border-left: 1px solid lighten($color-700, 10%);
+      .navbar-toggler {
+        border-left: 1px solid lighten($border-and-box-shadow, 10%);
       }
     }
 
@@ -23,40 +31,40 @@
       > li {
         > a:hover,
         > a:focus {
-          background-color: rgba($color-200, .2);
+          background-color: rgba($search-and-nav-links, 0.2);
         }
 
         &.active > a,
-        &.dropdown.open > a {
-          color: $color-900;
+        &.dropdown.show > a {
+          color: $nav-svg-color;
           background-color: $color-alternate;
         }
 
         &.line-separator {
-          border-left: 1px solid rgba($color-200, .2);
+          border-left: 1px solid rgba($search-and-nav-links, 0.2);
         }
       }
     }
 
     .navbar-sub-nav {
-      color: $color-200;
+      color: $search-and-nav-links;
     }
 
     .nav {
       > li {
-        color: $color-200;
+        color: $search-and-nav-links;
 
         > a {
           &.header-user-dropdown-toggle {
             .header-user-avatar {
-              border-color: $color-200;
+              border-color: $search-and-nav-links;
             }
           }
 
           &:hover,
           &:focus {
-            @media (min-width: $screen-sm-min) {
-              background-color: rgba($color-200, .2);
+            @include media-breakpoint-up(sm) {
+              background-color: rgba($search-and-nav-links, 0.2);
             }
 
             svg {
@@ -66,13 +74,13 @@
         }
 
         &.active > a,
-        &.dropdown.open > a {
-          color: $color-900;
+        &.dropdown.show > a {
+          color: $nav-svg-color;
           background-color: $color-alternate;
 
           &:hover {
             svg {
-              fill: $color-900;
+              fill: $nav-svg-color;
             }
           }
         }
@@ -80,7 +88,7 @@
         .impersonated-user,
         .impersonated-user:hover {
           svg {
-            fill: $color-900;
+            fill: $nav-svg-color;
           }
         }
       }
@@ -91,34 +99,34 @@
     > a {
       &:hover,
       &:focus {
-        background-color: rgba($color-200, .2);
+        background-color: rgba($search-and-nav-links, 0.2);
       }
     }
   }
 
   .search {
     form {
-      background-color: rgba($color-200, .2);
+      background-color: rgba($search-and-nav-links, 0.2);
 
       &:hover {
-        background-color: rgba($color-200, .3);
+        background-color: rgba($search-and-nav-links, 0.3);
       }
     }
 
     .location-badge {
-      color: $color-100;
-      background-color: rgba($color-200, .1);
-      border-right: 1px solid $color-800;
+      color: $location-badge-color;
+      background-color: rgba($search-and-nav-links, 0.1);
+      border-right: 1px solid $sidebar-text;
     }
 
     .search-input::placeholder {
-      color: rgba($color-200, .8);
+      color: rgba($search-and-nav-links, 0.8);
     }
 
     .search-input-wrap {
       .search-icon,
       .clear-icon {
-        fill: rgba($color-200, .8);
+        fill: rgba($search-and-nav-links, 0.8);
       }
     }
 
@@ -133,64 +141,176 @@
 
       .search-input-wrap {
         .search-icon {
-          fill: rgba($color-200, .8);
+          fill: rgba($search-and-nav-links, 0.8);
         }
       }
     }
   }
 
-  .btn-sign-in {
-    background-color: $color-100;
-    color: $color-900;
-  }
-
 
   // Sidebar
   .nav-sidebar li.active {
-    box-shadow: inset 4px 0 0 $color-700;
+    box-shadow: inset 4px 0 0 $border-and-box-shadow;
 
     > a {
-      color: $color-800;
+      color: $sidebar-text;
     }
 
     svg {
-      fill: $color-800;
+      fill: $sidebar-text;
     }
   }
 
-  .sidebar-top-level-items > li.active .badge {
-    color: $color-800;
+  .sidebar-top-level-items > li.active .badge.badge-pill {
+    color: $sidebar-text;
   }
 
-  .nav-links li.active a {
-    border-bottom-color: $color-500;
+  .nav-links li {
+    &.active a,
+    a.active {
+      border-bottom: 2px solid $active-tab-border;
 
-    .badge {
-      font-weight: $gl-font-weight-bold;
+      .badge.badge-pill {
+        font-weight: $gl-font-weight-bold;
+      }
     }
   }
-}
 
+  .branch-header-title {
+    color: $border-and-box-shadow;
+  }
+
+  .ide-sidebar-link {
+    &.active {
+      color: $border-and-box-shadow;
+      box-shadow: inset 3px 0 $border-and-box-shadow;
+
+      &.is-right {
+        box-shadow: inset -3px 0 $border-and-box-shadow;
+      }
+    }
+  }
+}
 
 body {
-  &.ui_indigo {
-    @include gitlab-theme($indigo-100, $indigo-200, $indigo-500, $indigo-700, $indigo-800, $indigo-900, $white-light);
+  &.ui-indigo {
+    @include gitlab-theme(
+      $indigo-100,
+      $indigo-200,
+      $indigo-500,
+      $indigo-700,
+      $indigo-800,
+      $indigo-900,
+      $white-light
+    );
+  }
+
+  &.ui-light-indigo {
+    @include gitlab-theme(
+      $indigo-100,
+      $indigo-200,
+      $indigo-500,
+      $indigo-500,
+      $indigo-700,
+      $indigo-700,
+      $white-light
+    );
+  }
+
+  &.ui-blue {
+    @include gitlab-theme(
+      $theme-blue-100,
+      $theme-blue-200,
+      $theme-blue-500,
+      $theme-blue-700,
+      $theme-blue-800,
+      $theme-blue-900,
+      $white-light
+    );
+  }
+
+  &.ui-light-blue {
+    @include gitlab-theme(
+      $theme-light-blue-100,
+      $theme-light-blue-200,
+      $theme-light-blue-500,
+      $theme-light-blue-500,
+      $theme-light-blue-700,
+      $theme-light-blue-700,
+      $white-light
+    );
+  }
+
+  &.ui-green {
+    @include gitlab-theme(
+      $theme-green-100,
+      $theme-green-200,
+      $theme-green-500,
+      $theme-green-700,
+      $theme-green-800,
+      $theme-green-900,
+      $white-light
+    );
+  }
+
+  &.ui-light-green {
+    @include gitlab-theme(
+      $theme-green-100,
+      $theme-green-200,
+      $theme-green-500,
+      $theme-green-500,
+      $theme-light-green-700,
+      $theme-light-green-700,
+      $white-light
+    );
   }
 
-  &.ui_dark {
-    @include gitlab-theme($theme-gray-100, $theme-gray-200, $theme-gray-500, $theme-gray-700, $theme-gray-800, $theme-gray-900, $white-light);
+  &.ui-red {
+    @include gitlab-theme(
+      $theme-red-100,
+      $theme-red-200,
+      $theme-red-500,
+      $theme-red-700,
+      $theme-red-800,
+      $theme-red-900,
+      $white-light
+    );
   }
 
-  &.ui_blue {
-    @include gitlab-theme($theme-blue-100, $theme-blue-200, $theme-blue-500, $theme-blue-700, $theme-blue-800, $theme-blue-900, $white-light);
+  &.ui-light-red {
+    @include gitlab-theme(
+      $theme-light-red-100,
+      $theme-light-red-200,
+      $theme-light-red-500,
+      $theme-light-red-500,
+      $theme-light-red-700,
+      $theme-light-red-700,
+      $white-light
+    );
   }
 
-  &.ui_green {
-    @include gitlab-theme($theme-green-100, $theme-green-200, $theme-green-500, $theme-green-700, $theme-green-800, $theme-green-900, $white-light);
+  &.ui-dark {
+    @include gitlab-theme(
+      $theme-gray-100,
+      $theme-gray-200,
+      $theme-gray-500,
+      $theme-gray-700,
+      $theme-gray-800,
+      $theme-gray-900,
+      $white-light
+    );
   }
 
-  &.ui_light {
-    @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, $theme-gray-700, $theme-gray-100, $theme-gray-700);
+  &.ui-light {
+    @include gitlab-theme(
+      $theme-gray-900,
+      $theme-gray-700,
+      $theme-gray-800,
+      $theme-gray-700,
+      $theme-gray-700,
+      $theme-gray-100,
+      $theme-gray-700
+    );
 
     .navbar-gitlab {
       background-color: $theme-gray-100;
@@ -216,8 +336,8 @@ body {
       }
 
       .container-fluid {
-        .navbar-toggle,
-        .navbar-toggle:hover {
+        .navbar-toggler,
+        .navbar-toggler:hover {
           color: $theme-gray-700;
           border-left: 1px solid $theme-gray-200;
         }
@@ -267,7 +387,7 @@ body {
       }
     }
 
-    .sidebar-top-level-items > li.active .badge {
+    .sidebar-top-level-items > li.active .badge.badge-pill {
       color: $theme-gray-900;
     }
   }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 0136af76a13..5789c3fa1b1 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -37,6 +37,7 @@
   }
 
   .header-content {
+    width: 100%;
     display: -webkit-flex;
     display: flex;
     justify-content: space-between;
@@ -91,7 +92,7 @@
         border-radius: $border-radius-default;
 
         .tanuki-logo {
-          @media (min-width: $screen-sm-min) {
+          @include media-breakpoint-up(sm) {
             margin-right: 8px;
           }
         }
@@ -110,7 +111,7 @@
     }
 
     &.menu-expanded {
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         .title-container {
           display: none;
         }
@@ -133,13 +134,15 @@
     border-top: 0;
     padding: 0;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       flex: 1 1 auto;
     }
 
     .nav {
-      > li:not(.hidden-xs) a {
-        @media (max-width: $screen-xs-max) {
+      flex-wrap: nowrap;
+
+      > li:not(.d-none) a {
+        @include media-breakpoint-down(xs) {
           margin-left: 0;
           min-width: 100%;
         }
@@ -156,12 +159,13 @@
       }
     }
 
-    .navbar-toggle {
+    .navbar-toggler {
+      position: relative;
       right: -10px;
       border-radius: 0;
       min-width: 45px;
       padding: 0;
-      margin-right: -7px;
+      margin: $gl-padding-8 -7px $gl-padding-8 0;
       font-size: 14px;
       text-align: center;
       color: currentColor;
@@ -181,14 +185,15 @@
     }
 
     .navbar-nav {
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         display: -webkit-flex;
         display: flex;
         padding-right: 10px;
+        flex-direction: row;
       }
 
       li {
-        .badge {
+        .badge.badge-pill {
           box-shadow: none;
           font-weight: $gl-font-weight-bold;
         }
@@ -197,7 +202,7 @@
 
     .nav > li {
       &.header-user {
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           padding-left: 10px;
         }
       }
@@ -208,7 +213,7 @@
         padding: 6px 8px;
         height: 32px;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           padding: 0;
         }
 
@@ -263,6 +268,8 @@
 
 .navbar-sub-nav,
 .navbar-nav {
+  align-items: center;
+
   > li {
     > a:hover,
     > a:focus {
@@ -289,6 +296,10 @@
       margin: 8px;
     }
   }
+
+  .dropdown-menu {
+    position: absolute;
+  }
 }
 
 .navbar-sub-nav {
@@ -296,12 +307,6 @@
   display: flex;
   margin: 0 0 0 6px;
 
-  .projects-dropdown-menu {
-    padding: 0;
-    overflow-y: initial;
-    max-height: initial;
-  }
-
   .dropdown-chevron {
     position: relative;
     top: -1px;
@@ -324,8 +329,8 @@
   fill: currentColor;
 }
 
-.header-user .dropdown-menu-nav,
-.header-new .dropdown-menu-nav {
+.header-user .dropdown-menu,
+.header-new .dropdown-menu {
   margin-top: $dropdown-vertical-offset;
 }
 
@@ -378,7 +383,7 @@
   margin-bottom: 0;
   line-height: 16px;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-wrap: wrap;
   }
 
@@ -410,7 +415,7 @@
 .breadcrumb-item-text {
   text-decoration: inherit;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     @include str-truncated(128px);
   }
 }
@@ -442,17 +447,23 @@
 }
 
 .btn-sign-in {
-  margin-top: 3px;
+  background-color: $indigo-100;
+  color: $indigo-900;
   font-weight: $gl-font-weight-bold;
+  line-height: 18px;
 
   &:hover {
     background-color: $white-light;
   }
+
+  @include media-breakpoint-down(xs) {
+    margin-top: $gl-padding-4;
+  }
 }
 
 .navbar-nav {
   li {
-    .badge {
+    .badge.badge-pill {
       position: inherit;
       font-weight: $gl-font-weight-normal;
       margin-left: -6px;
@@ -478,7 +489,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
 
@@ -493,7 +504,7 @@
       margin-left: -8px;
       margin-right: -10px;
 
-      .nav > li:not(.hidden-xs) {
+      .nav > li:not(.d-none) {
         display: table-cell !important;
         width: 25%;
 
@@ -514,9 +525,9 @@
 }
 
 .header-user {
-  .dropdown-menu-nav {
+  .dropdown-menu {
     width: auto;
-    min-width: 160px;
+    min-width: unset;
     margin-top: 4px;
     color: $gl-text-color;
     left: auto;
@@ -528,6 +539,10 @@
         display: block;
       }
     }
+
+    svg {
+      vertical-align: text-top;
+    }
   }
 }
 
@@ -547,7 +562,7 @@
   background: $white-light;
   border-bottom: 1px solid $white-normal;
 
-  .center-logo {
+  .mx-auto {
     margin: 8px 0;
     text-align: center;
 
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index df1cafc9f8e..ab3cceceae9 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -20,7 +20,7 @@
     width: 100%;
   }
 
-  $image-widths: 80 250 306 394 430;
+  $image-widths: 80 130 250 306 394 430;
   @each $width in $image-widths {
     &.svg-#{$width} {
       img,
@@ -39,35 +39,10 @@
 svg {
   fill: currentColor;
 
-  &.s8 {
-    @include svg-size(8px);
-  }
-
-  &.s12 {
-    @include svg-size(12px);
-  }
-
-  &.s16 {
-    @include svg-size(16px);
-  }
-
-  &.s18 {
-    @include svg-size(18px);
-  }
-
-  &.s24 {
-    @include svg-size(24px);
-  }
-
-  &.s32 {
-    @include svg-size(32px);
-  }
-
-  &.s48 {
-    @include svg-size(48px);
-  }
-
-  &.s72 {
-    @include svg-size(72px);
+  $svg-sizes: 8 12 16 18 24 32 48 72;
+  @each $svg-size in $svg-sizes {
+    &.s#{$svg-size} {
+      @include svg-size(#{$svg-size}px);
+    }
   }
 }
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index d8c57a0e2d9..1d247671761 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -11,7 +11,7 @@
   padding: 5px 11px;
   margin-top: 4px;
   /* Small devices (tablets, 768px and up) */
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding: 0 $gl-btn-padding;
     margin-top: 5px;
   }
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index d107422e517..52b5f059f20 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -15,7 +15,7 @@ body {
     background-color: $white-light !important;
   }
 
-  &.card-content {
+  &.board-card-content {
     background-color: $gray-darker;
 
     .content-wrapper {
@@ -54,10 +54,6 @@ body {
   &.limit-container-width {
     max-width: $limited-layout-width;
   }
-
-  &.limit-container-width-sm {
-    max-width: $limited-layout-width-sm;
-  }
 }
 
 .alert-wrapper {
@@ -74,7 +70,7 @@ body {
   }
 
   /* Center alert text and alert action links on smaller screens */
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     .alert {
       text-align: center;
     }
@@ -115,9 +111,3 @@ body {
 .with-performance-bar .layout-page {
   margin-top: $header-height + $performance-bar-height;
 }
-
-.vertical-center {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-}
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 7e829826eba..d54490c87c6 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -2,7 +2,7 @@
  * Well styled list
  *
  */
-.well-list {
+.hover-list {
   position: relative;
   margin: 0;
   padding: 0;
@@ -24,6 +24,10 @@
       color: $list-text-disabled-color;
     }
 
+    &:not(.ui-sort-disabled):hover {
+      background: $row-hover;
+    }
+
     &.unstyled {
       &:hover {
         background: none;
@@ -34,14 +38,15 @@
       background-color: $list-warning-row-bg;
       border-color: $list-warning-row-border;
       color: $list-warning-row-color;
-    }
 
-    &.smoke { background-color: $gray-light; }
+      &:hover {
+        background: $list-warning-row-bg;
+      }
 
-    &:not(.ui-sort-disabled):hover {
-      background: $row-hover;
     }
 
+    &.smoke { background-color: $gray-light; }
+
     &:last-child {
       border-bottom: 0;
 
@@ -67,7 +72,7 @@
       }
     }
 
-    .well-title {
+    .card.card-body-title {
       font-size: $list-font-size;
       line-height: 18px;
     }
@@ -154,7 +159,7 @@ ul.content-list {
         &:last-child {
           margin-right: 0;
 
-          @media(max-width: $screen-xs-max) {
+          @include media-breakpoint-down(xs) {
             margin: 0 auto;
           }
         }
@@ -168,7 +173,7 @@ ul.content-list {
     .member-controls {
       float: none;
 
-      @media (min-width: $screen-sm-min) {
+      @include media-breakpoint-up(sm) {
         float: right;
       }
     }
@@ -223,7 +228,7 @@ ul.content-list {
     }
   }
 
-  .label-default {
+  .badge-secondary {
     color: $gl-text-color-secondary;
   }
 
@@ -232,7 +237,7 @@ ul.content-list {
   }
 }
 
-.panel > .content-list > li {
+.card > .content-list > li {
   padding: $gl-padding-top $gl-padding;
 }
 
@@ -274,251 +279,14 @@ ul.indent-list {
   padding: 10px 0 0 30px;
 }
 
-
 // Specific styles for tree list
 @keyframes spin-avatar {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
 
-.groups-list-tree-container {
-  .has-no-search-results {
-    text-align: center;
-    padding: $gl-padding;
-    font-style: italic;
-    color: $well-light-text-color;
-  }
-
-  > .group-list-tree > .group-row.has-children:first-child {
-    border-top: 0;
-  }
-}
-
-.group-list-tree {
-  .avatar-container.content-loading {
-    position: relative;
-
-    > a,
-    > a .avatar {
-      height: 100%;
-      border-radius: 50%;
-    }
-
-    > a {
-      padding: 2px;
-
-      .avatar {
-        border: 2px solid $white-normal;
-
-        &.identicon {
-          line-height: 15px;
-        }
-      }
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      background-color: transparent;
-      border: 2px outset $kdb-border;
-      border-radius: 50%;
-      animation: spin-avatar 3s infinite linear;
-    }
-  }
-
-  .folder-toggle-wrap {
-    float: left;
-    line-height: $list-text-height;
-    font-size: 0;
-
-    span {
-      font-size: $gl-font-size;
-    }
-  }
-
-  .folder-caret,
-  .item-type-icon {
-    display: inline-block;
-  }
-
-  .folder-caret {
-    width: 15px;
-
-    svg {
-      margin-bottom: 2px;
-    }
-  }
-
-  .item-type-icon {
-    margin-top: 2px;
-    width: 20px;
-  }
-
-  > .group-row:not(.has-children) {
-    .folder-caret {
-      opacity: 0;
-    }
-  }
-
-  .content-list li:last-child {
-    padding-bottom: 0;
-  }
-
-  .group-list-tree {
-    margin-bottom: 0;
-    margin-left: 30px;
-    position: relative;
-
-    &::before {
-      content: '';
-      display: block;
-      width: 0;
-      position: absolute;
-      top: 5px;
-      bottom: 0;
-      left: -16px;
-      border-left: 2px solid $border-white-normal;
-    }
-
-    .group-row {
-      position: relative;
-
-      &::before {
-        content: "";
-        display: block;
-        width: 10px;
-        height: 0;
-        border-top: 2px solid $border-white-normal;
-        position: absolute;
-        top: 30px;
-        left: -16px;
-      }
-
-      &:last-child::before {
-        background: $white-light;
-        height: auto;
-        top: 30px;
-        bottom: 0;
-      }
-
-      &.being-removed {
-        opacity: 0.5;
-      }
-    }
-  }
-
-  .group-row {
-    padding: 0;
-
-    &.has-children {
-      border-top: 0;
-    }
-
-    &:first-child {
-      border-top: 1px solid $white-normal;
-    }
-
-    &:last-of-type {
-      .group-row-contents:not(:hover) {
-        border-bottom: 1px solid transparent;
-      }
-    }
-  }
-
-  .group-row-contents {
-    padding: 10px 10px 8px;
-    border-top: solid 1px transparent;
-    border-bottom: solid 1px $white-normal;
-
-    &:hover {
-      border-color: $row-hover-border;
-      background-color: $row-hover;
-      cursor: pointer;
-    }
-
-    .avatar-container > a {
-      width: 100%;
-      text-decoration: none;
-    }
-
-    &.has-more-items {
-      display: block;
-      padding: 20px 10px;
-    }
-
-    .stats {
-      position: relative;
-      line-height: 46px;
-
-      > span {
-        display: inline-flex;
-        align-items: center;
-        height: 16px;
-        min-width: 30px;
-      }
-
-      > span:last-child {
-        margin-right: 0;
-      }
-
-      .stat-value {
-        margin: 2px 0 0 5px;
-      }
-    }
-
-    .controls {
-      margin-left: 5px;
-
-      > .btn {
-        margin-right: $btn-xs-side-margin;
-      }
-    }
-  }
-
-  .project-row-contents .stats {
-    line-height: inherit;
-
-    > span:first-child {
-      margin-left: 25px;
-    }
-
-    .item-visibility {
-      margin-right: 0;
-    }
-
-    .last-updated {
-      position: absolute;
-      right: 12px;
-      min-width: 250px;
-      text-align: right;
-      color: $gl-text-color-secondary;
-    }
-  }
-}
-
 .namespace-title {
   .tooltip-inner {
     max-width: 350px;
   }
 }
-
-ul.group-list-tree {
-  li.group-row {
-    > .group-row-contents .title {
-      line-height: $list-text-height;
-    }
-
-    &.has-description > .group-row-contents .title {
-      line-height: inherit;
-    }
-  }
-}
-
-.js-groups-list-holder {
-  .groups-list-loading {
-    font-size: 34px;
-    text-align: center;
-  }
-}
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 938f5f49c09..7290a174668 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -61,10 +61,6 @@
       padding-top: 0;
       line-height: 19px;
 
-      &.btn.btn-xs {
-        padding: 2px 5px;
-      }
-
       &:focus {
         margin-top: -10px;
         padding-top: 10px;
@@ -74,7 +70,7 @@
 }
 
 .md-header-tab {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex: 1;
     width: 100%;
     border-bottom: 1px solid $border-color;
@@ -90,7 +86,7 @@
     &.active {
       display: block;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         flex: none;
         display: flex;
         justify-content: center;
@@ -107,6 +103,16 @@
   padding-top: 10px;
 }
 
+.referenced-commands {
+  background: $blue-50;
+  padding: $gl-padding-8 $gl-padding;
+  border-radius: $border-radius-default;
+
+  p {
+    margin: 0;
+  }
+}
+
 .md-preview-holder {
   min-height: 167px;
   padding: 10px 0;
@@ -182,7 +188,7 @@
   margin-left: $gl-padding;
   margin-right: -5px;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     margin-left: 0;
     margin-right: 0;
   }
@@ -258,7 +264,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .atwho-view-ul {
     width: 350px;
   }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index e12b5aab381..0b645eb811b 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -17,6 +17,25 @@
  */
 @mixin markdown-table {
   width: auto;
+  display: inline-block;
+  overflow-x: auto;
+  border: 0;
+  border-color: $md-area-border;
+
+  @supports(width: fit-content) {
+    display: block;
+    width: fit-content;
+  }
+
+  tr {
+    th {
+      border-bottom: solid 2px $md-area-border;
+    }
+
+    td {
+      border-color: $md-area-border;
+    }
+  }
 }
 
 /*
@@ -167,6 +186,7 @@
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   display: flex;
+  flex-wrap: nowrap;
 
   &::-webkit-scrollbar {
     display: none;
@@ -200,3 +220,15 @@
     margin-left: -$size;
   }
 }
+
+/*
+ * Mixin that fixes wrapping issues with long strings (e.g. URLs)
+ *
+ * Note: the width needs to be set for it to work in Firefox
+ */
+@mixin overflow-break-word {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+}
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index 8604e753c18..6244fb86fea 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -1,5 +1,5 @@
 /** Common mobile (screen XS, SM) styles **/
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .container .content {
     margin-top: 20px;
   }
@@ -14,7 +14,7 @@
     font-size: 12px;
     margin-right: 3px;
 
-    .badge {
+    .badge.badge-pill {
       display: none;
     }
   }
@@ -40,10 +40,6 @@
   .project-home-panel {
     padding-left: 0 !important;
 
-    .project-avatar {
-      display: block;
-    }
-
     .project-repo-buttons,
     .git-clone-holder {
       display: none;
@@ -90,7 +86,7 @@
   }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(sm) {
   .issues-filters {
     .milestone-filter {
       display: none;
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 48b981dd31f..ffb40166c15 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -1,12 +1,21 @@
+.modal-xl {
+  max-width: 98%;
+}
+
 .modal-header {
   background-color: $modal-body-bg;
-  padding: #{3 * $grid-size} #{2 * $grid-size};
 
   .page-title,
   .modal-title {
+    .modal-title-with-label span {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
     .color-label {
       font-size: $gl-font-size;
       padding: $gl-vert-padding $label-padding-modal;
+      vertical-align: middle;
     }
   }
 
@@ -40,7 +49,7 @@
     margin-left: $grid-size;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-direction: column;
 
     .btn + .btn {
@@ -49,7 +58,7 @@
     }
   }
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     .btn:first-of-type {
       margin-left: auto;
     }
@@ -68,17 +77,11 @@ body.modal-open {
   }
 }
 
-@media (min-width: $screen-lg-min) {
-  .modal-full {
-    width: 98%;
-  }
-}
-
 .modal {
   background-color: $black-transparent;
   z-index: 2100;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     .modal-dialog {
       margin: 30px auto;
     }
diff --git a/app/assets/stylesheets/framework/page_header.scss b/app/assets/stylesheets/framework/page_header.scss
index 0c879f40930..660e3dcac8d 100644
--- a/app/assets/stylesheets/framework/page_header.scss
+++ b/app/assets/stylesheets/framework/page_header.scss
@@ -3,7 +3,7 @@
   padding: 10px 0;
   margin-bottom: 0;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     display: flex;
     align-items: center;
 
@@ -19,7 +19,7 @@
       margin-right: 3px;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       .btn {
         width: 100%;
         margin-top: 10px;
@@ -35,7 +35,7 @@
     @extend .avatar-inline;
     margin-left: 0;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-left: 4px;
     }
   }
diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss
index c3ec9db0f07..61d02511ff4 100644
--- a/app/assets/stylesheets/framework/pagination.scss
+++ b/app/assets/stylesheets/framework/pagination.scss
@@ -1,90 +1,14 @@
 .gl-pagination {
-  text-align: center;
-  border-top: 1px solid $border-color;
-  margin: 0;
-  margin-top: 0;
-
-  .pagination {
-    padding: 0;
-
-    a {
-      cursor: pointer;
-    }
-
-    .separator,
-    .separator:hover {
-      a {
-        cursor: default;
-        background-color: $gray-light;
-        padding: $gl-vert-padding;
-      }
-    }
+  a {
+    color: inherit;
+    text-decoration: none;
   }
-
-
-  .gap,
-  .gap:hover {
-    background-color: $gray-light;
-    padding: $gl-vert-padding;
-    cursor: default;
-  }
-}
-
-.panel > .gl-pagination {
-  margin: 0;
 }
 
-/**
- * Extra-small screen pagination.
- */
-@media (max-width: 320px) {
-  .gl-pagination {
-    .first,
-    .last {
-      display: none;
-    }
-
-    .page {
-      display: none;
-
-      &.active {
-        display: inline;
-      }
-    }
-  }
-}
-
-/**
- * Small screen pagination
- */
-@media (max-width: $screen-xs-min) {
-  .gl-pagination {
-    .pagination li a {
-      padding: 6px 10px;
-    }
-
-    .page {
-      display: none;
-
-      &.active {
-        display: inline;
-      }
-    }
-  }
-}
-
-/**
- * Medium screen pagination
- */
-@media (min-width: $screen-xs-min) and (max-width: $screen-md-max) {
-  .gl-pagination {
-    .page {
-      display: none;
-
-      &.active,
-      &.sibling {
-        display: inline;
-      }
+.page-item {
+  &.active {
+    .page-link {
+      z-index: 3;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss
index e8d69e62194..a8e28104a94 100644
--- a/app/assets/stylesheets/framework/panels.scss
+++ b/app/assets/stylesheets/framework/panels.scss
@@ -1,14 +1,14 @@
-.panel {
+.card {
   margin-bottom: $gl-padding;
 }
 
-.panel-slim {
-  @extend .panel;
+.card-slim {
+  @extend .card;
   margin-bottom: $gl-vert-padding;
 }
 
 
-.panel-heading {
+.card-header {
   padding: $gl-vert-padding $gl-padding;
   line-height: 36px;
 
@@ -21,7 +21,7 @@
     line-height: 20px;
   }
 
-  .badge {
+  .badge.badge-pill {
     margin-top: -2px;
     margin-left: 5px;
   }
@@ -41,12 +41,13 @@
   }
 }
 
-.panel-empty-heading {
+.card-empty-heading {
   border-bottom: 0;
 }
 
-.panel-body {
+.card-body {
   padding: $gl-padding;
+  background-color: $white-light;
 
   .form-actions {
     margin: -$gl-padding;
@@ -54,7 +55,7 @@
   }
 }
 
-.panel-title {
+.card-title {
   font-size: inherit;
   line-height: inherit;
 }
diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index 7829d722560..764bebd82c6 100644
--- a/app/assets/stylesheets/framework/responsive_tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -6,7 +6,7 @@
 .gl-responsive-table-row-layout {
   width: 100%;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     display: flex;
     align-items: center;
 
@@ -21,7 +21,7 @@
   margin-top: 10px;
   border: 1px solid $border-color;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     margin: 0;
     padding: $gl-padding 0;
     border: 0;
@@ -39,18 +39,18 @@
 .table-section {
   white-space: nowrap;
 
-  $section-widths: 10 15 20 25 30 40 100;
+  $section-widths: 10 15 20 25 30 40 50 100;
   @each $width in $section-widths {
     &.section-#{$width} {
       flex: 0 0 #{$width + '%'};
 
-      @media (min-width: $screen-md-min) {
+      @include media-breakpoint-up(md) {
         max-width: #{$width + '%'};
       }
     }
   }
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     display: flex;
     align-self: stretch;
     padding: 10px;
@@ -65,7 +65,7 @@
   &.section-wrap {
     white-space: normal;
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       flex-wrap: wrap;
     }
   }
@@ -76,11 +76,11 @@
 }
 
 .table-button-footer {
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     text-align: right;
   }
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     display: block;
     align-self: stretch;
     min-height: 0;
@@ -122,7 +122,7 @@
 .table-row-header {
   font-size: 13px;
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     display: none;
   }
 }
@@ -132,13 +132,13 @@
   color: $gl-text-color-secondary;
   text-align: left;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     display: none;
   }
 }
 
 .table-mobile-content {
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     @include flex-max-width(60);
     text-align: right;
   }
@@ -154,7 +154,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     flex: 0 0 90%;
   }
 
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 17c31d6b184..9dbb04e5443 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -27,17 +27,18 @@
         color: $black;
         border-bottom: 2px solid $gray-darkest;
 
-        .badge {
+        .badge.badge-pill {
           color: $black;
         }
       }
     }
 
-    &.active a {
+    &.active a,
+    a.active {
       color: $black;
       font-weight: $gl-font-weight-bold;
 
-      .badge {
+      .badge.badge-pill {
         color: $black;
       }
     }
@@ -56,7 +57,7 @@
     white-space: normal;
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
   }
@@ -80,7 +81,7 @@
     }
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
 
       &.mobile-separator {
@@ -124,21 +125,13 @@
       position: relative;
 
       /* Medium devices (desktops, 992px and up) */
-      @media (min-width: $screen-md-min) { width: 200px; }
+      @include media-breakpoint-up(md) { width: 200px; }
 
       /* Large devices (large desktops, 1200px and up) */
-      @media (min-width: $screen-lg-min) { width: 250px; }
-
-      &.input-short {
-        /* Medium devices (desktops, 992px and up) */
-        @media (min-width: $screen-md-min) { width: 170px; }
-
-        /* Large devices (large desktops, 1200px and up) */
-        @media (min-width: $screen-lg-min) { width: 210px; }
-      }
+      @include media-breakpoint-up(lg) { width: 250px; }
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       padding-bottom: 0;
       width: 100%;
 
@@ -164,10 +157,6 @@
         }
       }
 
-      .input-short {
-        width: 100%;
-      }
-
       .icon-label {
         display: inline-block;
       }
@@ -184,7 +173,7 @@
     .nav-controls {
       width: auto;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         width: 100%;
       }
     }
@@ -204,11 +193,11 @@
     width: 100%;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-flow: row wrap;
 
     .nav-controls {
-      $controls-margin: $btn-xs-side-margin - 2px;
+      $controls-margin: $btn-margin-5 - 2px;
       flex: 0 0 100%;
 
       &.controls-flex {
@@ -272,8 +261,6 @@
 }
 
 .inner-page-scroll-tabs {
-  position: relative;
-
   .fade-right {
     @include fade(left, $white-light);
     right: 0;
@@ -360,7 +347,7 @@
 
 .empty-state .project-item-select-holder.btn-group {
   float: none;
-  display: inline-block;
+  justify-content: center;
 
   .btn {
     // overrides styles applied to plain `.empty-state .btn`
@@ -368,7 +355,7 @@
     max-width: 300px;
     width: auto;
 
-    @media(max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       max-width: 250px;
     }
   }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index d1d98270ad9..8c716400913 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -16,7 +16,7 @@
 .nav-header-btn {
   padding: 10px $gl-sidebar-padding;
   color: inherit;
-  transition-duration: .3s;
+  transition-duration: 0.3s;
   position: absolute;
   top: 0;
   cursor: pointer;
@@ -31,7 +31,7 @@
 .right-sidebar-collapsed {
   padding-right: 0;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
@@ -65,13 +65,13 @@
     display: inline-flex;
   }
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  @include media-breakpoint-only(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     .content-wrapper {
       padding-right: $gutter_width;
     }
@@ -88,7 +88,6 @@
 
 .right-sidebar {
   border-left: 1px solid $border-color;
-  height: calc(100% - #{$header-height});
 }
 
 .with-performance-bar .right-sidebar.affix {
@@ -138,6 +137,12 @@
   }
 }
 
+.issuable-sidebar .labels {
+  .value.dont-hide ~ .selectbox {
+    padding-top: $gl-padding-8;
+  }
+}
+
 .pikaday-container {
   .pika-single {
     margin-top: 2px;
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index 30c15c231d5..7152ef9bcfd 100644
--- a/app/assets/stylesheets/framework/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -29,8 +29,10 @@
 }
 
 .snippet-title {
-  font-size: 24px;
+  color: $gl-text-color;
+  font-size: 2em;
   font-weight: $gl-font-weight-bold;
+  min-height: $header-height;
 }
 
 .snippet-edited-ago {
@@ -38,7 +40,7 @@
 }
 
 .snippet-actions {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     float: right;
   }
 }
@@ -46,3 +48,12 @@
 .snippet-scope-menu .btn-new {
   margin-top: 15px;
 }
+
+.embed-snippet {
+  padding-right: 0;
+  padding-top: $gl-padding;
+
+  .embed-toggle-list li button {
+    padding: 8px 40px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 5bde96caf42..339388392df 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -1,5 +1,6 @@
 .table-holder {
   margin: 0;
+  overflow: auto;
 }
 
 table {
@@ -38,6 +39,11 @@ table {
         &.wide {
           width: 55%;
         }
+
+        &.table-th-transparent {
+          background: none;
+          color: $gl-text-color-secondary;
+        }
       }
 
       td {
@@ -45,10 +51,92 @@ table {
       }
     }
   }
+
+  &.responsive-table {
+    @include media-breakpoint-down(sm) {
+      thead {
+        display: none;
+      }
+
+      &,
+      tbody,
+      td {
+        display: block;
+      }
+
+      td {
+        color: $gl-text-color-secondary;
+      }
+
+      tbody td.responsive-table-cell {
+        padding: $gl-padding 0;
+        width: 100%;
+        display: flex;
+        text-align: right;
+        align-items: center;
+        justify-content: space-between;
+
+        &[data-column]::before {
+          content: attr(data-column);
+          display: block;
+          text-align: left;
+          padding-right: $gl-padding;
+          color: $gl-text-color-secondary;
+        }
+
+        &:not([data-column]) {
+          flex-direction: row-reverse;
+        }
+      }
+
+      tr.responsive-table-border-start,
+      tr.responsive-table-border-end {
+        display: block;
+        border: solid $gl-text-color-quaternary;
+        padding-left: 0;
+        padding-right: 0;
+
+        > td {
+          border-color: $gl-text-color-quaternary;
+
+          &,
+          &:last-child {
+            padding-left: $gl-padding;
+            padding-right: $gl-padding;
+          }
+        }
+      }
+
+      tr.responsive-table-border-start {
+        border-width: 1px 1px 0;
+        border-radius: $border-radius-default $border-radius-default 0 0;
+        padding-top: 0;
+        padding-bottom: 0;
+
+        > td:first-child {
+          border-top: 0; // always have the <table> top border
+        }
+
+        > td:last-child {
+          border-bottom: 1px solid $gl-text-color-quaternary;
+        }
+      }
+
+      tr.responsive-table-border-end {
+        border-width: 0 1px 1px;
+        border-radius: 0 0 $border-radius-default $border-radius-default;
+        margin-bottom: 2 * $gl-padding;
+
+        > :last-child {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
 }
 
-.responsive-table {
-  @media (max-width: $screen-sm-max) {
+.responsive-table:not(table) {
+  @include media-breakpoint-down(sm) {
     th {
       width: 100%;
     }
diff --git a/app/assets/stylesheets/framework/tabs.scss b/app/assets/stylesheets/framework/tabs.scss
index c8ba14b7066..6b60149fbbb 100644
--- a/app/assets/stylesheets/framework/tabs.scss
+++ b/app/assets/stylesheets/framework/tabs.scss
@@ -1,6 +1,7 @@
 .gitlab-tabs {
   background: $gray-light;
   border: 1px solid $border-color;
+  flex-wrap: nowrap;
 
   li {
     width: 50%;
diff --git a/app/assets/stylesheets/framework/terms.scss b/app/assets/stylesheets/framework/terms.scss
new file mode 100644
index 00000000000..7cda674e5c8
--- /dev/null
+++ b/app/assets/stylesheets/framework/terms.scss
@@ -0,0 +1,66 @@
+.terms {
+  .with-performance-bar & {
+    margin-top: 0;
+  }
+
+  .alert-wrapper {
+    min-height: $header-height + $gl-padding;
+  }
+
+  .content {
+    padding-top: $gl-padding;
+  }
+
+  .card {
+    .card-header {
+      display: -webkit-flex;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      line-height: $line-height-base;
+
+      .card-title {
+        display: flex;
+        align-items: center;
+
+        .logo-text {
+          width: 55px;
+          height: 24px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+      }
+
+      .navbar-collapse {
+        padding-right: 0;
+        flex-grow: 0;
+        flex-basis: auto;
+
+        .navbar-nav {
+          margin: 0;
+        }
+      }
+
+      .nav li {
+        float: none;
+      }
+    }
+
+    .panel-content {
+      padding: $gl-padding;
+
+      *:first-child {
+        margin-top: 0;
+      }
+
+      *:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .footer-block {
+      margin: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 373f35e71d8..dfb145debe7 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -4,7 +4,7 @@
   padding: 0;
 
   &::before {
-    @include notes-media('max', $screen-xs-min) {
+    @include notes-media('max', map-get($grid-breakpoints, sm)) {
       background: none;
     }
   }
@@ -34,7 +34,7 @@
   .timeline-entry-inner {
     position: relative;
 
-    @include notes-media('max', $screen-xs-min) {
+    @include notes-media('max', map-get($grid-breakpoints, sm)) {
       .timeline-icon {
         display: none;
       }
diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss
index 0cd83df218f..20394cc1e52 100644
--- a/app/assets/stylesheets/framework/toggle.scss
+++ b/app/assets/stylesheets/framework/toggle.scss
@@ -42,6 +42,10 @@
     background: none;
   }
 
+  &:focus {
+    outline: none;
+  }
+
   .toggle-icon {
     position: relative;
     display: block;
@@ -121,7 +125,7 @@
     cursor: not-allowed;
   }
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     width: 50px;
 
     &::before,
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
deleted file mode 100644
index 1c6e2bf3074..00000000000
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ /dev/null
@@ -1,201 +0,0 @@
-/*
- * Twitter bootstrap with GitLab customizations/additions
- *
- */
-
-// Core variables and mixins
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
-
-// Reset
-@import "bootstrap/normalize";
-@import "bootstrap/print";
-
-// Core CSS
-@import "bootstrap/scaffolding";
-@import "bootstrap/type";
-@import "bootstrap/code";
-@import "bootstrap/grid";
-@import "bootstrap/tables";
-@import "bootstrap/forms";
-@import "bootstrap/buttons";
-
-// Components
-@import "bootstrap/component-animations";
-// @import "bootstrap/dropdowns";
-@import "bootstrap/button-groups";
-@import "bootstrap/input-groups";
-@import "bootstrap/navs";
-@import "bootstrap/navbar";
-@import "bootstrap/breadcrumbs";
-@import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/labels";
-@import "bootstrap/badges";
-@import "bootstrap/alerts";
-@import "bootstrap/progress-bars";
-@import "bootstrap/list-group";
-@import "bootstrap/wells";
-@import "bootstrap/close";
-@import "bootstrap/panels";
-
-// Components w/ JavaScript
-@import "bootstrap/modals";
-@import "bootstrap/tooltip";
-@import "bootstrap/popovers";
-
-// Utility classes
-.clearfix {
-  @include clearfix();
-}
-
-.center-block {
-  @include center-block();
-}
-
-.pull-right {
-  float: right !important;
-}
-
-.pull-left {
-  float: left !important;
-}
-
-.hide {
-  display: none;
-}
-
-.show {
-  display: block !important;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-.text-hide {
-  @include text-hide();
-}
-
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.affix {
-  position: fixed;
-}
-
-/*
- * Fix <summary> elements on firefox
- * See https://github.com/necolas/normalize.css/issues/640
- * and https://github.com/twbs/bootstrap/issues/21060
- *
- */
-summary {
-  display: list-item;
-}
-
-@import "bootstrap/responsive-utilities";
-
-// Labels
-.label {
-  padding: 4px 5px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: $gl-font-weight-normal;
-  display: inline-block;
-
-  &.label-gray {
-    background-color: $label-gray-bg;
-    color: $gl-text-color;
-    text-shadow: none;
-  }
-
-  &.label-inverse {
-    background-color: $label-inverse-bg;
-  }
-}
-
-
-/**
- * fix to keep tooltips position in top navigation bar
- *
- */
-.navbar .nav > li {
-  position: relative;
-  white-space: nowrap;
-}
-
-/**
- * Add some extra stuff to panels
- *
- */
-
-.panel {
-  box-shadow: none;
-
-  .panel-body {
-    form,
-    pre {
-      margin: 0;
-    }
-
-    .form-actions {
-      margin: -15px;
-      margin-top: 18px;
-    }
-  }
-
-  .panel-footer {
-    .pagination {
-      margin: 0;
-    }
-
-    .btn {
-      min-width: 124px;
-    }
-
-    .btn-clipboard {
-      min-width: 0;
-    }
-  }
-
-  &.panel-small {
-    .panel-heading {
-      padding: 6px 15px;
-      font-size: 13px;
-      font-weight: $gl-font-weight-normal;
-
-      a {
-        color: $panel-heading-link-color;
-      }
-    }
-  }
-
-  &.panel-without-border {
-    border: 0;
-  }
-
-  &.panel-without-margin {
-    margin: 0;
-  }
-}
-
-.panel-succes .panel-heading,
-.panel-info .panel-heading,
-.panel-danger .panel-heading,
-.panel-warning .panel-heading,
-.panel-primary .panel-heading,
-.alert {
-  a:not(.btn) {
-    @extend .alert-link;
-    color: $white-light;
-    text-decoration: underline;
-  }
-}
-
-// Prevent datetimes on tooltips to break into two lines
-.local-timeago {
-  white-space: nowrap;
-}
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
deleted file mode 100644
index d04e555769b..00000000000
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ /dev/null
@@ -1,199 +0,0 @@
-// Override Bootstrap variables here (defaults from bootstrap-sass v3.3.3):
-// For all variables see https://github.com/twbs/bootstrap-sass/blob/master/templates/project/_bootstrap-variables.sass
-//
-// Variables
-// --------------------------------------------------
-
-
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
-
-// $gray-base:              #000
-// $gray-darker:            lighten($gray-base, 13.5%) // #222
-// $gray-dark:              lighten($gray-base, 20%)   // #333
-// $gray:                   lighten($gray-base, 33.5%) // #555
-// $gray-light:             lighten($gray-base, 46.7%) // #777
-// $gray-lighter:           lighten($gray-base, 93.5%) // #eee
-
-$brand-primary: $gl-primary;
-$brand-success: $gl-success;
-$brand-info: $gl-info;
-$brand-warning: $gl-warning;
-$brand-danger: $gl-danger;
-
-$border-radius-base: 3px !default;
-$border-radius-large: 3px !default;
-$border-radius-small: 3px !default;
-
-
-//== Scaffolding
-//
-$text-color: $gl-text-color;
-$link-color: $gl-link-color;
-$link-hover-color: $gl-link-hover-color;
-
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
-$font-family-sans-serif: $regular_font;
-$font-family-monospace: $monospace_font;
-$font-size-base: $gl-font-size;
-
-
-//== Components
-//
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-
-$padding-base-vertical: $gl-vert-padding;
-$padding-base-horizontal: $gl-padding;
-$component-active-color: $white-light;
-$component-active-bg: $brand-info;
-
-//== Forms
-//
-//##
-
-$input-color: $text-color;
-$input-border: $border-color;
-$input-border-focus: $focus-border-color;
-$legend-color: $text-color;
-
-
-//== Pagination
-//
-//##
-
-$pagination-color: $gl-text-color;
-$pagination-bg: $white-light;
-$pagination-border: $border-color;
-
-$pagination-hover-color: $gl-text-color;
-$pagination-hover-bg: $row-hover;
-$pagination-hover-border: $border-color;
-
-$pagination-active-color: $white-light;
-$pagination-active-bg: $gl-link-color;
-$pagination-active-border: $gl-link-color;
-
-$pagination-disabled-color: #cdcdcd;
-$pagination-disabled-bg: $gray-light;
-$pagination-disabled-border: $border-color;
-
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-$state-success-text: $white-light;
-$state-success-bg: $brand-success;
-$state-success-border: $brand-success;
-
-$state-info-text: $white-light;
-$state-info-bg: $brand-info;
-$state-info-border: $brand-info;
-
-$state-warning-text: $white-light;
-$state-warning-bg: $brand-warning;
-$state-warning-border: $brand-warning;
-
-$state-danger-text: $white-light;
-$state-danger-bg: $brand-danger;
-$state-danger-border: $brand-danger;
-
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-$alert-border-radius: 0;
-
-
-//== Panels
-//
-//##
-
-$panel-border-radius: 2px;
-$panel-default-text: $text-color;
-$panel-default-border: $border-color;
-$panel-default-heading-bg: $gray-light;
-$panel-footer-bg: $gray-light;
-$panel-inner-border: $border-color;
-
-$badge-bg: $badge-bg;
-$badge-color: $badge-color;
-
-//== Wells
-//
-//##
-
-$well-bg: $gray-light;
-$well-border: #eee;
-
-//== Code
-//
-//##
-
-$code-color: $red-600;
-$code-bg: lighten($red-100, 2%);
-
-$kbd-color: $white-light;
-$kbd-bg: #333;
-
-//== Buttons
-//
-//##
-$btn-default-color: $gl-text-color;
-$btn-default-bg: $white-light;
-$btn-default-border: #e7e9ed;
-
-//== Nav
-//
-//##
-$nav-link-padding: 13px $gl-padding;
-
-//== Code
-//
-//##
-$pre-bg: $gray-light !default;
-$pre-color: $gl-text-color !default;
-$pre-border-color: $border-color;
-
-$table-bg-accent: $gray-light;
-
-$zindex-popover: 900;
-
-//== Modals
-//
-//##
-
-//** Padding applied to the modal body
-$modal-inner-padding: $gl-padding;
-
-//** Padding applied to the modal title
-$modal-title-padding: $gl-padding;
-//** Modal title line-height
-// $modal-title-line-height:     $line-height-base
-
-//** Background color of modal content area
-$modal-content-bg: $gray-light;
-$modal-body-bg: $white-light;
-//** Modal content border color
-// $modal-content-border-color:                   rgba(0,0,0,.2)
-//** Modal content border color **for IE8**
-// $modal-content-fallback-border-color:          #999
-
-//** Modal backdrop background color
-// $modal-backdrop-bg:           #000
-//** Modal backdrop opacity
-// $modal-backdrop-opacity:      .5
-//** Modal header border color
-// $modal-header-border-color:   #e5e5e5
-//** Modal footer border color
-// $modal-footer-border-color:   $modal-header-border-color
-
-$modal-lg: 860px;
-$modal-md: 540px;
-// $modal-sm:                    300px
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 294c59f037f..9e77ea03a24 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -114,26 +114,27 @@
     font-size: 0.95em;
   }
 
-  blockquote {
+  blockquote,
+  .blockquote {
     color: $gl-grayish-blue;
     font-size: inherit;
     padding: 8px 24px;
     margin: 16px 0;
     border-left: 3px solid $white-dark;
-  }
 
-  blockquote:dir(rtl) {
-    border-left: 0;
-    border-right: 3px solid $white-dark;
-  }
+    &:dir(rtl) {
+      border-left: 0;
+      border-right: 3px solid $white-dark;
+    }
 
-  blockquote p {
-    color: $gl-grayish-blue !important;
-    font-size: inherit;
-    line-height: 1.5;
+    p {
+      color: $gl-grayish-blue !important;
+      font-size: inherit;
+      line-height: 1.5;
 
-    &:last-child {
-      margin: 0;
+      &:last-child {
+        margin: 0;
+      }
     }
   }
 
@@ -289,6 +290,11 @@ body {
   &:last-child {
     margin-bottom: 0;
   }
+
+  &.with-button {
+    line-height: 34px;
+  }
+
 }
 
 .page-title-empty {
@@ -316,6 +322,16 @@ h6 {
 /** CODE **/
 pre {
   font-family: $monospace_font;
+  display: block;
+  padding: $gl-padding-8;
+  margin: 0 0 $gl-padding-8;
+  font-size: 13px;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: $gl-text-color;
+  background-color: $gray-light;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-small;
 }
 
 code {
@@ -325,10 +341,6 @@ code {
   }
 }
 
-a > code {
-  color: $link-color;
-}
-
 .monospace {
   font-family: $monospace_font;
 }
@@ -386,7 +398,7 @@ h4 {
 }
 
 .text-right-lg {
-  @media (min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     text-align: right;
   }
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index a81904d5338..f30f296d41f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -99,7 +99,7 @@ $theme-gray-200: #dfdfdf;
 $theme-gray-300: #cccccc;
 $theme-gray-400: #bababa;
 $theme-gray-500: #a7a7a7;
-$theme-gray-600: #949494;
+$theme-gray-600: #919191;
 $theme-gray-700: #707070;
 $theme-gray-800: #4f4f4f;
 $theme-gray-900: #2e2e2e;
@@ -117,6 +117,15 @@ $theme-blue-800: #25496e;
 $theme-blue-900: #1a3652;
 $theme-blue-950: #0f2235;
 
+$theme-light-blue-50: #f2f7fc;
+$theme-light-blue-100: #ebf1f7;
+$theme-light-blue-200: #c9dcf2;
+$theme-light-blue-300: #83abd4;
+$theme-light-blue-400: #4d86bf;
+$theme-light-blue-500: #367cc2;
+$theme-light-blue-600: #3771ab;
+$theme-light-blue-700: #2261a1;
+
 $theme-green-50: #f2faf6;
 $theme-green-100: #e4f3ea;
 $theme-green-200: #c0dfcd;
@@ -129,6 +138,29 @@ $theme-green-800: #145d33;
 $theme-green-900: #0d4524;
 $theme-green-950: #072d16;
 
+$theme-light-green-700: #156b39;
+
+$theme-red-50: #fcf4f2;
+$theme-red-100: #fae9e6;
+$theme-red-200: #ebcac5;
+$theme-red-300: #d99b91;
+$theme-red-400: #b0655a;
+$theme-red-500: #ad4a3b;
+$theme-red-600: #9e4133;
+$theme-red-700: #912f20;
+$theme-red-800: #78291d;
+$theme-red-900: #691a16;
+$theme-red-950: #36140f;
+
+$theme-light-red-50: #fff6f5;
+$theme-light-red-100: #fae2de;
+$theme-light-red-200: #f7d5d0;
+$theme-light-red-300: #d9796a;
+$theme-light-red-400: #cf604e;
+$theme-light-red-500: #c24b38;
+$theme-light-red-600: #b03927;
+$theme-light-red-700: #a62e21;
+
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 $almost-black: #242424;
@@ -159,7 +191,7 @@ $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
 $gl-text-color: #2e2e2e;
 $gl-text-color-secondary: #707070;
-$gl-text-color-tertiary: #949494;
+$gl-text-color-tertiary: #919191;
 $gl-text-color-quaternary: #d6d6d6;
 $gl-text-color-inverted: rgba(255, 255, 255, 1);
 $gl-text-color-secondary-inverted: rgba(255, 255, 255, 0.85);
@@ -212,9 +244,11 @@ $tooltip-font-size: 12px;
 /*
  * Padding
  */
-$gl-padding: 16px;
-$gl-padding-8: 8px;
 $gl-padding-4: 4px;
+$gl-padding-8: 8px;
+$gl-padding: 16px;
+$gl-padding-24: 24px;
+$gl-padding-32: 32px;
 $gl-col-padding: 15px;
 $gl-input-padding: 10px;
 $gl-vert-padding: 6px;
@@ -229,9 +263,9 @@ $row-hover: $blue-50;
 $row-hover-border: $blue-200;
 $progress-color: #c0392b;
 $header-height: 40px;
+$ide-statusbar-height: 25px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
-$limited-layout-width-sm: 790px;
 $container-text-max-width: 540px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: $red-500;
@@ -244,9 +278,10 @@ $active-item-blue: $blue-500;
 $layout-link-gray: #7e7c7c;
 $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
-$btn-xs-side-margin: 5px;
+$btn-margin-5: 5px;
 $issue-status-expired: $orange-500;
 $issuable-sidebar-color: $gl-text-color-secondary;
+$sidebar-block-hover-color: #ebebeb;
 $group-path-color: #999;
 $namespace-kind-color: #aaa;
 $panel-heading-link-color: #777;
@@ -262,6 +297,7 @@ $performance-bar-height: 35px;
 $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
+$gcp-signup-offer-icon-max-width: 125px;
 
 /*
 * Common component specific colors
@@ -302,6 +338,11 @@ $gl-warning: $orange-500;
 $gl-danger: $red-500;
 $gl-btn-active-background: rgba(0, 0, 0, 0.16);
 $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
+// Bootstrap override states
+$success: $gl-success;
+$info: $gl-info;
+$warning: $gl-warning;
+$danger: $gl-danger;
 
 /*
  * Commit Diff Colors
@@ -331,11 +372,10 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 /*
  * Fonts
  */
-$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
-  'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
-$regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-  Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
+  'Courier New', 'andale mono', 'lucida console', monospace;
+$regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+  'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
 /*
 * Dropdowns
@@ -360,6 +400,7 @@ $dropdown-chevron-size: 10px;
 $dropdown-toggle-active-border-color: darken($border-color, 14%);
 $dropdown-item-hover-bg: $gray-darker;
 $dropdown-fade-mask-height: 32px;
+$dropdown-member-form-control-width: 163px;
 
 /*
 * Filtered Search
@@ -373,6 +414,8 @@ $dropdown-hover-color: $blue-400;
 $link-active-background: rgba(0, 0, 0, 0.04);
 $link-hover-background: rgba(0, 0, 0, 0.06);
 $inactive-badge-background: rgba(0, 0, 0, 0.08);
+$sidebar-toggle-height: 60px;
+$sidebar-milestone-toggle-bottom-margin: 10px;
 
 /*
 * Buttons
@@ -392,6 +435,22 @@ $badge-bg: rgba(0, 0, 0, 0.07);
 $badge-color: $gl-text-color-secondary;
 
 /*
+* Pagination
+*/
+$pagination-padding-y: 6px;
+$pagination-padding-x: 16px;
+$pagination-line-height: 20px;
+$pagination-border-color: $border-color;
+$pagination-active-bg: $blue-600;
+$pagination-active-border-color: $blue-600;
+$pagination-hover-bg: $blue-50;
+$pagination-hover-border-color: $border-color;
+$pagination-hover-color: $gl-text-color;
+$pagination-disabled-color: #cdcdcd;
+$pagination-disabled-bg: $gray-light;
+$pagination-disabled-border-color: $border-color;
+
+/*
  *  Status icons
  */
 $status-icon-size: 22px;
@@ -461,11 +520,9 @@ $issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
 */
 $issue-boards-filter-height: 68px;
 $issue-boards-breadcrumbs-height-xs: 63px;
-$issue-board-list-difference-xs: $header-height +
-  $issue-boards-breadcrumbs-height-xs;
+$issue-board-list-difference-xs: $header-height + $issue-boards-breadcrumbs-height-xs;
 $issue-board-list-difference-sm: $header-height + $breadcrumb-min-height;
-$issue-board-list-difference-md: $issue-board-list-difference-sm +
-  $issue-boards-filter-height;
+$issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height;
 
 /*
 * Avatar
@@ -551,6 +608,8 @@ $input-danger-border: $red-400;
 $input-group-addon-bg: #f7f8fa;
 $gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
 $gl-field-focus-shadow-error: rgba($red-500, 0.6);
+$input-short-width: 200px;
+$input-short-md-width: 280px;
 
 /*
 * Help
@@ -686,6 +745,8 @@ $stage-hover-bg: $gray-darker;
 $ci-action-icon-size: 22px;
 $pipeline-dropdown-line-height: 20px;
 $pipeline-dropdown-status-icon-size: 18px;
+$ci-action-dropdown-button-size: 24px;
+$ci-action-dropdown-svg-size: 12px;
 
 /*
 CI variable lists
@@ -714,20 +775,6 @@ $color-average-score: $orange-400;
 $color-low-score: $red-400;
 
 /*
-Repo editor
-*/
-$repo-editor-grey: #f6f7f9;
-$repo-editor-grey-darker: #e9ebee;
-$repo-editor-linear-gradient: linear-gradient(
-  to right,
-  $repo-editor-grey 0%,
-  $repo-editor-grey-darker,
-  20%,
-  $repo-editor-grey 40%,
-  $repo-editor-grey 100%
-);
-
-/*
 Performance Bar
 */
 $perf-bar-text: #999;
@@ -767,3 +814,24 @@ $border-color-settings: #e1e1e1;
 Modals
 */
 $modal-body-height: 134px;
+
+/*
+Prometheus
+*/
+$prometheus-table-row-highlight-color: $theme-gray-100;
+
+$priority-label-empty-state-width: 114px;
+
+/*
+ * Override Bootstrap 4 variables
+ */
+
+$secondary: $gray-light;
+$input-disabled-bg: $gray-light;
+$input-border-color: $theme-gray-200;
+$input-color: $gl-text-color;
+$font-family-sans-serif: $regular_font;
+$font-family-monospace: $monospace_font;
+$input-line-height: 20px;
+$btn-line-height: 20px;
+$table-accent-bg: $gray-light;
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index 2f3a80daa90..514fac82b1e 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -5,7 +5,7 @@
   border-radius: $border-radius-default;
   margin-bottom: $gl-padding;
 
-  .well-segment {
+  .card.card-body-segment {
     padding: $gl-padding;
 
     &:not(:last-of-type) {
@@ -19,6 +19,7 @@
 
         .fork-svg {
           margin-right: 4px;
+          vertical-align: bottom;
         }
       }
 
@@ -58,7 +59,7 @@
     }
   }
 
-  .label.label-gray {
+  .label-gray {
     background-color: $well-expand-item;
   }
 
@@ -107,7 +108,7 @@
   }
 }
 
-.well-centered {
+.card.card-body-centered {
   h1 {
     font-weight: $gl-font-weight-normal;
     text-align: center;
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index f0ac9b46f91..604f806dc58 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -111,7 +111,9 @@ $dark-il: #de935f;
 
   // Diff line
   .line_holder {
-    &.match .line_content {
+    &.match .line_content,
+    &.old-nonewline .line_content,
+    &.new-nonewline .line_content {
       @include dark-diff-match-line;
     }
 
diff --git a/app/assets/stylesheets/highlight/embedded.scss b/app/assets/stylesheets/highlight/embedded.scss
new file mode 100644
index 00000000000..44c8a1d39ec
--- /dev/null
+++ b/app/assets/stylesheets/highlight/embedded.scss
@@ -0,0 +1,3 @@
+.code {
+  @import "white_base";
+}
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index eba7919ada9..8e2720511da 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -111,7 +111,9 @@ $monokai-gi: #a6e22e;
 
   // Diff line
   .line_holder {
-    &.match .line_content {
+    &.match .line_content,
+    &.old-nonewline .line_content,
+    &.new-nonewline .line_content {
       @include dark-diff-match-line;
     }
 
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index ba53ef0352b..cd1f0f6650f 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -115,7 +115,9 @@ $solarized-dark-il: #2aa198;
 
   // Diff line
   .line_holder {
-    &.match .line_content {
+    &.match .line_content,
+    &.old-nonewline .line_content,
+    &.new-nonewline .line_content {
       @include dark-diff-match-line;
     }
 
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index e9fccf1b58a..09c3ea36414 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -122,7 +122,9 @@ $solarized-light-il: #2aa198;
 
   // Diff line
   .line_holder {
-    &.match .line_content {
+    &.match .line_content,
+    &.old-nonewline .line_content,
+    &.new-nonewline .line_content {
       @include matchLine;
     }
 
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index c3d8f0c61a2..355c8d223f7 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -1,292 +1,3 @@
-/* https://github.com/aahan/pygments-github-style */
-
-/*
-* White Syntax Colors
-*/
-$white-code-color: $gl-text-color;
-$white-highlight: #fafe3d;
-$white-pre-hll-bg: #f8eec7;
-$white-hll-bg: #f8f8f8;
-$white-over-bg: #ded7fc;
-$white-expanded-border: #e0e0e0;
-$white-expanded-bg: #f7f7f7;
-$white-c: #998;
-$white-err: #a61717;
-$white-err-bg: #e3d2d2;
-$white-cm: #998;
-$white-cp: #999;
-$white-c1: #998;
-$white-cs: #999;
-$white-gd: $black;
-$white-gd-bg: #fdd;
-$white-gd-x: $black;
-$white-gd-x-bg: #faa;
-$white-gr: #a00;
-$white-gh: #999;
-$white-gi: $black;
-$white-gi-bg: #dfd;
-$white-gi-x: $black;
-$white-gi-x-bg: #afa;
-$white-go: #888;
-$white-gp: #555;
-$white-gu: #800080;
-$white-gt: #a00;
-$white-kt: #458;
-$white-m: #099;
-$white-s: #d14;
-$white-n: #333;
-$white-na: teal;
-$white-nb: #0086b3;
-$white-nc: #458;
-$white-no: teal;
-$white-ni: purple;
-$white-ne: #900;
-$white-nf: #900;
-$white-nn: #555;
-$white-nt: navy;
-$white-nv: teal;
-$white-w: #bbb;
-$white-mf: #099;
-$white-mh: #099;
-$white-mi: #099;
-$white-mo: #099;
-$white-sb: #d14;
-$white-sc: #d14;
-$white-sd: #d14;
-$white-s2: #d14;
-$white-se: #d14;
-$white-sh: #d14;
-$white-si: #d14;
-$white-sx: #d14;
-$white-sr: #009926;
-$white-s1: #d14;
-$white-ss: #990073;
-$white-bp: #999;
-$white-vc: teal;
-$white-vg: teal;
-$white-vi: teal;
-$white-il: #099;
-$white-gc-color: #999;
-$white-gc-bg: #eaf2f5;
-
-
-@mixin matchLine {
-  color: $black-transparent;
-  background-color: $gray-light;
-}
-
 .code.white {
-  // Line numbers
-  .line-numbers,
-  .diff-line-num {
-    background-color: $gray-light;
-  }
-
-  .diff-line-num,
-  .diff-line-num a {
-    color: $black-transparent;
-  }
-
-  // Code itself
-  pre.code,
-  .diff-line-num {
-    border-color: $white-normal;
-  }
-
-  &,
-  pre.code,
-  .line_holder .line_content {
-    background-color: $white-light;
-    color: $white-code-color;
-  }
-
-  // Diff line
-  .line_holder {
-
-    &.match .line_content {
-      @include matchLine;
-    }
-
-    .diff-line-num {
-      &.old {
-        background-color: $line-number-old;
-        border-color: $line-removed-dark;
-
-        a {
-          color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%);
-        }
-      }
-
-      &.new {
-        background-color: $line-number-new;
-        border-color: $line-added-dark;
-
-        a {
-          color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%);
-        }
-      }
-
-      &.is-over,
-      &.hll:not(.empty-cell).is-over {
-        background-color: $white-over-bg;
-        border-color: darken($white-over-bg, 5%);
-
-        a {
-          color: darken($white-over-bg, 15%);
-        }
-      }
-
-      &.hll:not(.empty-cell) {
-        background-color: $line-number-select;
-        border-color: $line-select-yellow-dark;
-      }
-    }
-
-    &:not(.diff-expanded) + .diff-expanded,
-    &.diff-expanded + .line_holder:not(.diff-expanded) {
-      > .diff-line-num,
-      > .line_content {
-        border-top: 1px solid $white-expanded-border;
-      }
-    }
-
-    &.diff-expanded {
-      > .diff-line-num,
-      > .line_content {
-        background: $white-expanded-bg;
-        border-color: $white-expanded-bg;
-      }
-    }
-
-    .line_content {
-      &.old {
-        background-color: $line-removed;
-
-        &::before {
-          color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%);
-        }
-
-        span.idiff {
-          background-color: $line-removed-dark;
-        }
-      }
-
-      &.new {
-        background-color: $line-added;
-
-        &::before {
-          color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%);
-        }
-
-        span.idiff {
-          background-color: $line-added-dark;
-        }
-      }
-
-      &.match {
-        @include matchLine;
-      }
-
-      &.hll:not(.empty-cell) {
-        background-color: $line-select-yellow;
-      }
-    }
-  }
-
-  // highlight line via anchor
-  pre .hll {
-    background-color: $white-pre-hll-bg !important;
-  }
-
-  // Search result highlight
-  span.highlight_word {
-    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; }
-  .k { font-weight: $gl-font-weight-bold; }
-  .o { font-weight: $gl-font-weight-bold; }
-  .cm { color: $white-cm; font-style: italic; }
-  .cp { color: $white-cp; font-weight: $gl-font-weight-bold; }
-  .c1 { color: $white-c1; font-style: italic; }
-  .cs { color: $white-cs; font-weight: $gl-font-weight-bold; font-style: italic; }
-
-  .gd {
-    color: $white-gd;
-    background-color: $white-gd-bg;
-
-    .x {
-      color: $white-gd-x;
-      background-color: $white-gd-x-bg;
-    }
-  }
-
-  .ge { font-style: italic; }
-  .gr { color: $white-gr; }
-  .gh { color: $white-gh; }
-
-  .gi {
-    color: $white-gi;
-    background-color: $white-gi-bg;
-
-    .x {
-      color: $white-gi-x;
-      background-color: $white-gi-x-bg;
-    }
-  }
-
-  .go { color: $white-go; }
-  .gp { color: $white-gp; }
-  .gs { font-weight: $gl-font-weight-bold; }
-  .gu { color: $white-gu; font-weight: $gl-font-weight-bold; }
-  .gt { color: $white-gt; }
-  .kc { font-weight: $gl-font-weight-bold; }
-  .kd { font-weight: $gl-font-weight-bold; }
-  .kn { font-weight: $gl-font-weight-bold; }
-  .kp { font-weight: $gl-font-weight-bold; }
-  .kr { font-weight: $gl-font-weight-bold; }
-  .kt { color: $white-kt; font-weight: $gl-font-weight-bold; }
-  .m { color: $white-m; }
-  .s { color: $white-s; }
-  .n { color: $white-n; }
-  .na { color: $white-na; }
-  .nb { color: $white-nb; }
-  .nc { color: $white-nc; font-weight: $gl-font-weight-bold; }
-  .no { color: $white-no; }
-  .ni { color: $white-ni; }
-  .ne { color: $white-ne; font-weight: $gl-font-weight-bold; }
-  .nf { color: $white-nf; font-weight: $gl-font-weight-bold; }
-  .nn { color: $white-nn; }
-  .nt { color: $white-nt; }
-  .nv { color: $white-nv; }
-  .ow { font-weight: $gl-font-weight-bold; }
-  .w { color: $white-w; }
-  .mf { color: $white-mf; }
-  .mh { color: $white-mh; }
-  .mi { color: $white-mi; }
-  .mo { color: $white-mo; }
-  .sb { color: $white-sb; }
-  .sc { color: $white-sc; }
-  .sd { color: $white-sd; }
-  .s2 { color: $white-s2; }
-  .se { color: $white-se; }
-  .sh { color: $white-sh; }
-  .si { color: $white-si; }
-  .sx { color: $white-sx; }
-  .sr { color: $white-sr; }
-  .s1 { color: $white-s1; }
-  .ss { color: $white-ss; }
-  .bp { color: $white-bp; }
-  .vc { color: $white-vc; }
-  .vg { color: $white-vg; }
-  .vi { color: $white-vi; }
-  .il { color: $white-il; }
-  .gc { color: $white-gc-color; background-color: $white-gc-bg; }
+  @import "white_base";
 }
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
new file mode 100644
index 00000000000..8cc5252648d
--- /dev/null
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -0,0 +1,290 @@
+/* https://github.com/aahan/pygments-github-style */
+
+/*
+* White Syntax Colors
+*/
+$white-code-color: $gl-text-color;
+$white-highlight: #fafe3d;
+$white-pre-hll-bg: #f8eec7;
+$white-hll-bg: #f8f8f8;
+$white-over-bg: #ded7fc;
+$white-expanded-border: #e0e0e0;
+$white-expanded-bg: #f7f7f7;
+$white-c: #998;
+$white-err: #a61717;
+$white-err-bg: #e3d2d2;
+$white-cm: #998;
+$white-cp: #999;
+$white-c1: #998;
+$white-cs: #999;
+$white-gd: $black;
+$white-gd-bg: #fdd;
+$white-gd-x: $black;
+$white-gd-x-bg: #faa;
+$white-gr: #a00;
+$white-gh: #999;
+$white-gi: $black;
+$white-gi-bg: #dfd;
+$white-gi-x: $black;
+$white-gi-x-bg: #afa;
+$white-go: #888;
+$white-gp: #555;
+$white-gu: #800080;
+$white-gt: #a00;
+$white-kt: #458;
+$white-m: #099;
+$white-s: #d14;
+$white-n: #333;
+$white-na: teal;
+$white-nb: #0086b3;
+$white-nc: #458;
+$white-no: teal;
+$white-ni: purple;
+$white-ne: #900;
+$white-nf: #900;
+$white-nn: #555;
+$white-nt: navy;
+$white-nv: teal;
+$white-w: #bbb;
+$white-mf: #099;
+$white-mh: #099;
+$white-mi: #099;
+$white-mo: #099;
+$white-sb: #d14;
+$white-sc: #d14;
+$white-sd: #d14;
+$white-s2: #d14;
+$white-se: #d14;
+$white-sh: #d14;
+$white-si: #d14;
+$white-sx: #d14;
+$white-sr: #009926;
+$white-s1: #d14;
+$white-ss: #990073;
+$white-bp: #999;
+$white-vc: teal;
+$white-vg: teal;
+$white-vi: teal;
+$white-il: #099;
+$white-gc-color: #999;
+$white-gc-bg: #eaf2f5;
+
+
+@mixin matchLine {
+  color: $black-transparent;
+  background-color: $gray-light;
+}
+
+  // Line numbers
+.line-numbers,
+.diff-line-num {
+  background-color: $gray-light;
+}
+
+.diff-line-num,
+.diff-line-num a {
+  color: $black-transparent;
+}
+
+// Code itself
+pre.code,
+.diff-line-num {
+  border-color: $white-normal;
+}
+
+&,
+pre.code,
+.line_holder .line_content {
+  background-color: $white-light;
+  color: $white-code-color;
+}
+
+// Diff line
+.line_holder {
+
+  &.match .line_content {
+    @include matchLine;
+  }
+
+  .diff-line-num {
+    &.old {
+      background-color: $line-number-old;
+      border-color: $line-removed-dark;
+
+      a {
+        color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%);
+      }
+    }
+
+    &.new {
+      background-color: $line-number-new;
+      border-color: $line-added-dark;
+
+      a {
+        color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%);
+      }
+    }
+
+    &.is-over,
+    &.hll:not(.empty-cell).is-over {
+      background-color: $white-over-bg;
+      border-color: darken($white-over-bg, 5%);
+
+      a {
+        color: darken($white-over-bg, 15%);
+      }
+    }
+
+    &.hll:not(.empty-cell) {
+      background-color: $line-number-select;
+      border-color: $line-select-yellow-dark;
+    }
+  }
+
+  &:not(.diff-expanded) + .diff-expanded,
+  &.diff-expanded + .line_holder:not(.diff-expanded) {
+    > .diff-line-num,
+    > .line_content {
+      border-top: 1px solid $white-expanded-border;
+    }
+  }
+
+  &.diff-expanded {
+    > .diff-line-num,
+    > .line_content {
+      background: $white-expanded-bg;
+      border-color: $white-expanded-bg;
+    }
+  }
+
+  .line_content {
+    &.old {
+      background-color: $line-removed;
+
+      &::before {
+        color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%);
+      }
+
+      span.idiff {
+        background-color: $line-removed-dark;
+      }
+    }
+
+    &.new {
+      background-color: $line-added;
+
+      &::before {
+        color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%);
+      }
+
+      span.idiff {
+        background-color: $line-added-dark;
+      }
+    }
+
+    &.match {
+      @include matchLine;
+    }
+
+    &.hll:not(.empty-cell) {
+      background-color: $line-select-yellow;
+    }
+  }
+}
+
+// highlight line via anchor
+pre .hll {
+  background-color: $white-pre-hll-bg !important;
+}
+
+  // Search result highlight
+span.highlight_word {
+  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; }
+.k { font-weight: $gl-font-weight-bold; }
+.o { font-weight: $gl-font-weight-bold; }
+.cm { color: $white-cm; font-style: italic; }
+.cp { color: $white-cp; font-weight: $gl-font-weight-bold; }
+.c1 { color: $white-c1; font-style: italic; }
+.cs { color: $white-cs; font-weight: $gl-font-weight-bold; font-style: italic; }
+
+.gd {
+  color: $white-gd;
+  background-color: $white-gd-bg;
+
+  .x {
+    color: $white-gd-x;
+    background-color: $white-gd-x-bg;
+  }
+}
+
+.ge { font-style: italic; }
+.gr { color: $white-gr; }
+.gh { color: $white-gh; }
+
+.gi {
+  color: $white-gi;
+  background-color: $white-gi-bg;
+
+  .x {
+    color: $white-gi-x;
+    background-color: $white-gi-x-bg;
+  }
+}
+
+.go { color: $white-go; }
+.gp { color: $white-gp; }
+.gs { font-weight: $gl-font-weight-bold; }
+.gu { color: $white-gu; font-weight: $gl-font-weight-bold; }
+.gt { color: $white-gt; }
+.kc { font-weight: $gl-font-weight-bold; }
+.kd { font-weight: $gl-font-weight-bold; }
+.kn { font-weight: $gl-font-weight-bold; }
+.kp { font-weight: $gl-font-weight-bold; }
+.kr { font-weight: $gl-font-weight-bold; }
+.kt { color: $white-kt; font-weight: $gl-font-weight-bold; }
+.m { color: $white-m; }
+.s { color: $white-s; }
+.n { color: $white-n; }
+.na { color: $white-na; }
+.nb { color: $white-nb; }
+.nc { color: $white-nc; font-weight: $gl-font-weight-bold; }
+.no { color: $white-no; }
+.ni { color: $white-ni; }
+.ne { color: $white-ne; font-weight: $gl-font-weight-bold; }
+.nf { color: $white-nf; font-weight: $gl-font-weight-bold; }
+.nn { color: $white-nn; }
+.nt { color: $white-nt; }
+.nv { color: $white-nv; }
+.ow { font-weight: $gl-font-weight-bold; }
+.w { color: $white-w; }
+.mf { color: $white-mf; }
+.mh { color: $white-mh; }
+.mi { color: $white-mi; }
+.mo { color: $white-mo; }
+.sb { color: $white-sb; }
+.sc { color: $white-sc; }
+.sd { color: $white-sd; }
+.s2 { color: $white-s2; }
+.se { color: $white-se; }
+.sh { color: $white-sh; }
+.si { color: $white-si; }
+.sx { color: $white-sx; }
+.sr { color: $white-sr; }
+.s1 { color: $white-s1; }
+.ss { color: $white-ss; }
+.bp { color: $white-bp; }
+.vc { color: $white-vc; }
+.vg { color: $white-vg; }
+.vi { color: $white-vi; }
+.il { color: $white-il; }
+.gc { color: $white-gc-color; background-color: $white-gc-bg; }
diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
index 658ac26fca9..1835c4364d3 100644
--- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -138,7 +138,8 @@ pre {
   margin: 0;
 }
 
-blockquote {
+blockquote,
+.blockquote {
   color: $gl-grayish-blue;
   padding: 0 0 0 15px;
   margin: 0;
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index c03d4c2eebf..750d2c8b990 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -1,5 +1,3 @@
-@import './issues/issue_count_badge';
-
 [v-cloak] {
   display: none;
 }
@@ -31,8 +29,12 @@
 .dropdown-menu-issues-board-new {
   width: 320px;
 
+  .open & {
+    max-height: 400px;
+  }
+
   .dropdown-content {
-    max-height: 150px;
+    max-height: 162px;
   }
 }
 
@@ -56,7 +58,7 @@
 .boards-app {
   position: relative;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     transition: width $sidebar-transition-duration;
     width: 100%;
 
@@ -78,12 +80,13 @@
   overflow-x: scroll;
   white-space: nowrap;
   min-height: 200px;
+  display: flex;
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  @include media-breakpoint-only(sm) {
     height: calc(100vh - #{$issue-board-list-difference-sm});
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     height: calc(100vh - #{$issue-board-list-difference-md});
   }
 
@@ -92,13 +95,13 @@
       100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height}
     );
 
-    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    @include media-breakpoint-only(sm) {
       height: calc(
         100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height}
       );
     }
 
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up(md) {
       height: calc(
         100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height}
       );
@@ -108,17 +111,15 @@
 
 .board {
   display: inline-block;
-  width: calc(85vw - 15px);
+  flex: 1;
+  min-width: 300px;
+  max-width: 400px;
   height: 100%;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
   white-space: normal;
   vertical-align: top;
 
-  @media (min-width: $screen-sm-min) {
-    width: 400px;
-  }
-
   &.is-expandable {
     .board-header {
       cursor: pointer;
@@ -126,6 +127,8 @@
   }
 
   &.is-collapsed {
+    flex: none;
+    min-width: 0;
     width: 50px;
 
     .board-header {
@@ -272,7 +275,7 @@
   font-size: (26px / $issue-boards-font-size) * 1em;
 }
 
-.card {
+.board-card {
   position: relative;
   padding: 11px 10px 11px $gl-padding;
   background: $white-light;
@@ -285,15 +288,11 @@
   }
 
   &.is-active,
-  &.is-active .card-assignee:hover a {
+  &.is-active .board-card-assignee:hover a {
     background-color: $row-hover;
-
-    &:first-child:not(:only-child) {
-      box-shadow: -10px 0 10px 1px $row-hover;
-    }
   }
 
-  .label {
+  .badge {
     border: 0;
     outline: 0;
   }
@@ -305,23 +304,23 @@
   }
 }
 
-.card-title {
+.board-card-title {
+  @include overflow-break-word();
   margin: 0 30px 0 0;
   font-size: 1em;
   line-height: inherit;
 
   a {
     color: $gl-text-color;
-    word-wrap: break-word;
     margin-right: 2px;
   }
 }
 
-.card-header {
+.board-card-header {
   display: flex;
   min-height: 20px;
 
-  .card-assignee {
+  .board-card-assignee {
     display: flex;
     justify-content: flex-end;
     position: absolute;
@@ -392,16 +391,16 @@
   }
 }
 
-.card-footer {
+.board-card-footer {
   margin: 0 0 5px;
 
-  .label {
+  .badge {
     margin-top: 5px;
     margin-right: 6px;
   }
 }
 
-.card-number {
+.board-card-number {
   font-size: 12px;
   color: $gl-text-color-secondary;
 }
@@ -457,6 +456,7 @@
   }
 
   .issuable-header-text {
+    @include overflow-break-word();
     padding-right: 35px;
 
     > strong {
@@ -558,11 +558,11 @@
 .add-issues-list-column {
   width: 100%;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: 50%;
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     width: (100% / 3);
   }
 }
@@ -577,11 +577,11 @@
   margin-right: -$gl-vert-padding;
   overflow-y: scroll;
 
-  .card-parent {
+  .board-card-parent {
     padding: 0 5px 5px;
   }
 
-  .card {
+  .board-card {
     border: 1px solid $border-gray-dark;
     box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3);
     cursor: pointer;
@@ -631,7 +631,7 @@
     display: none;
     margin-right: 10px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: block;
     }
   }
@@ -639,7 +639,7 @@
   .dropdown-menu-toggle {
     width: 100px;
 
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up(md) {
       width: 140px;
     }
   }
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 98d460339cd..f030189af06 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -1,39 +1,52 @@
 @keyframes fade-out-status {
-  0%, 50% { opacity: 1; }
-  100% { opacity: 0; }
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
 }
 
 @keyframes blinking-dots {
   0% {
     background-color: rgba($white-light, 1);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2),
-                24px 0 0 0 rgba($white-light, 0.2);
+    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
   }
 
   25% {
     background-color: rgba($white-light, 0.4);
-    box-shadow: 12px 0 0 0 rgba($white-light, 2),
-                24px 0 0 0 rgba($white-light, 0.2);
+    box-shadow: 12px 0 0 0 rgba($white-light, 2), 24px 0 0 0 rgba($white-light, 0.2);
   }
 
   75% {
     background-color: rgba($white-light, 0.4);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2),
-                24px 0 0 0 rgba($white-light, 1);
+    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 1);
   }
 
   100% {
     background-color: rgba($white-light, 1);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2),
-                24px 0 0 0 rgba($white-light, 0.2);
+    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
   }
 }
 
 @keyframes blinking-scroll-button {
-  0% { opacity: 0.2; }
-  25% { opacity: 0.5; }
-  50% { opacity: 0.7; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0.2;
+  }
+
+  25% {
+    opacity: 0.5;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }
 
 .build-page {
@@ -54,10 +67,15 @@
     .bash {
       display: block;
     }
+
+    &.build-trace-rounded {
+      border-radius: $border-radius-base;
+    }
   }
 
   .top-bar {
     height: 35px;
+    min-height: 35px;
     background: $gray-light;
     border: 1px solid $border-color;
     color: $gl-text-color;
@@ -125,12 +143,12 @@
       .btn-scroll.animate {
         .first-triangle {
           animation: blinking-scroll-button 1s ease infinite;
-          animation-delay: .3s;
+          animation-delay: 0.3s;
         }
 
         .second-triangle {
           animation: blinking-scroll-button 1s ease infinite;
-          animation-delay: .2s;
+          animation-delay: 0.2s;
         }
 
         .third-triangle {
@@ -198,7 +216,7 @@
   }
 
   .header-action-buttons {
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       .sidebar-toggle-btn {
         margin-top: 0;
         margin-left: 10px;
@@ -260,10 +278,6 @@
     &.coverage {
       padding: 0 16px 11px;
     }
-
-    .btn-group-justified {
-      margin-top: 5px;
-    }
   }
 
   .block-last {
@@ -288,7 +302,7 @@
     background-color: $white-light;
   }
 
-  .label {
+  .badge.badge-pill {
     margin-left: 2px;
   }
 
@@ -303,7 +317,7 @@
       }
     }
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       display: block;
 
       .btn {
@@ -391,7 +405,7 @@
       }
 
       &:hover {
-        background-color: $row-hover;
+        background-color: $dropdown-item-hover-bg;
       }
 
       .icon-retry {
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 7b8ee026357..56beb7718a4 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -6,13 +6,17 @@
 
 .cluster-applications-table {
   // Wait for the Vue to kick-in and render the applications block
-  min-height: 400px;
+  min-height: 628px;
 }
 
 .clusters-dropdown-menu {
   max-width: 100%;
 }
 
+.clusters-error-alert {
+  width: 100%;
+}
+
 .clusters-container {
   .nav-bar-right {
     padding: $gl-padding-top $gl-padding;
@@ -26,3 +30,51 @@
     margin-right: 0;
   }
 }
+
+.gcp-signup-offer {
+  background-color: $blue-50;
+  border: 1px solid $blue-300;
+  border-radius: $border-radius-default;
+
+  // TODO: To be superceded by cssLab
+  &.alert {
+    padding: 24px 16px;
+
+    &-dismissable {
+      padding-right: 32px;
+
+      .close {
+        top: -8px;
+        right: -16px;
+        color: $blue-500;
+        opacity: 1;
+      }
+    }
+  }
+
+  .gcp-logo {
+    margin-bottom: $gl-padding;
+    text-align: center;
+  }
+
+  img {
+    max-width: $gcp-signup-offer-icon-max-width;
+  }
+
+  a:not(.btn) {
+    color: $gl-link-color;
+    font-weight: normal;
+    text-decoration: none;
+  }
+
+  @include media-breakpoint-up(sm) {
+    > div {
+      display: flex;
+      align-items: center;
+    }
+
+    .gcp-logo {
+      margin: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index b487f6278c2..49226ae8eac 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -2,7 +2,6 @@
   background: none;
   border: 0;
   padding: 0;
-  margin-top: 10px;
   word-break: normal;
   white-space: pre-wrap;
 }
@@ -21,14 +20,10 @@
     margin: 0;
     color: $gl-text-color;
   }
-
-  .commit-description {
-    margin-top: 15px;
-  }
 }
 
 .commit-hash-full {
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     width: 80px;
     white-space: nowrap;
     overflow: hidden;
@@ -70,7 +65,7 @@
 }
 
 .branch-info .commit-icon {
-  margin-right: 3px;
+  margin-right: 8px;
 
   svg {
     top: 3px;
@@ -107,7 +102,6 @@
   }
 }
 
-
 .commits-compare-switch {
   float: left;
   margin-right: 9px;
@@ -141,10 +135,10 @@
 }
 
 .text-expander {
-  display: inline-block;
+  display: inline-flex;
   background: $white-light;
   color: $gl-text-color-secondary;
-  padding: 0 4px;
+  padding: 1px $gl-padding-4;
   cursor: pointer;
   border: 1px solid $border-gray-dark;
   border-radius: $border-radius-default;
@@ -179,61 +173,91 @@
 .commit-detail {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: start;
   flex-grow: 1;
-
-  .merge-request-branches & {
-    flex-direction: column;
-  }
 }
 
 .commit-content {
   padding-right: 10px;
   white-space: normal;
+
+  .commit-title {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .commit-actions {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     .fa-spinner {
       font-size: 12px;
     }
   }
 
   .ci-status-link {
-    display: inline-block;
-    position: relative;
-    top: 2px;
+    display: inline-flex;
+  }
+
+  .ci-status-icon svg {
+    vertical-align: text-bottom;
   }
 
-  .btn-clipboard,
-  .btn-transparent {
-    padding-left: 0;
-    padding-right: 0;
+  > .ci-status-link,
+  > .btn,
+  > .commit-sha-group {
+    margin-left: $gl-padding-8;
   }
+}
 
+.commit-sha-group {
+  display: inline-flex;
+
+  .label,
   .btn {
-    &:not(:first-child) {
-      margin-left: $gl-padding;
-    }
+    padding: $gl-vert-padding $gl-btn-padding;
+    border: 1px $border-color solid;
+    font-size: $gl-font-size;
+    line-height: $line-height-base;
+    border-radius: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .label-monospace {
+    @extend .monospace;
+    user-select: text;
+    color: $gl-text-color;
+    background-color: $gray-light;
   }
 
-  .commit-sha {
-    font-size: 14px;
-    font-weight: $gl-font-weight-bold;
+  .btn svg {
+    top: auto;
+    fill: $gl-text-color-secondary;
   }
 
-  .ci-status-icon {
-    position: relative;
-    top: 2px;
+  .fa-clipboard {
+    color: $gl-text-color-secondary;
+  }
+
+  :first-child {
+    border-bottom-left-radius: $border-radius-default;
+    border-top-left-radius: $border-radius-default;
+  }
+
+  :not(:first-child) {
+    border-left: 0;
+  }
+
+  :last-child {
+    border-bottom-right-radius: $border-radius-default;
+    border-top-right-radius: $border-radius-default;
   }
 }
 
 .commit,
 .generic_commit_status {
-
   a,
   button {
-    color: $gl-text-color;
     vertical-align: baseline;
   }
 
@@ -247,20 +271,16 @@
 
   .commit-row-description {
     font-size: 14px;
-    padding: 10px 15px;
-    margin: 10px 0;
-    background: $gray-light;
+    padding: 0 0 0 $gl-padding-8;
+    border: 0;
     display: none;
     white-space: pre-wrap;
     word-break: normal;
-
-    pre {
-      border: 0;
-      background: inherit;
-      padding: 0;
-      margin: 0;
-      white-space: pre-wrap;
-    }
+    color: $gl-text-color-secondary;
+    background: none;
+    font-family: inherit;
+    border-left: 2px solid $theme-gray-300;
+    border-radius: unset;
 
     a {
       color: $gl-text-color;
@@ -303,10 +323,8 @@
   }
 }
 
-
 .gpg-status-box {
   padding: 2px 10px;
-  margin-right: $gl-padding;
 
   &:empty {
     display: none;
@@ -317,8 +335,12 @@
   }
 
   &.invalid {
-    @include status-color($gray-dark, $gray, $gray-darkest);
+    @include status-color($gray-dark, color("gray"), $gray-darkest);
     border-color: $gray-darkest;
+
+    &:not(span):hover {
+      color: color("gray");
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/convdev_index.scss b/app/assets/stylesheets/pages/convdev_index.scss
index fb1899284fd..bd338326154 100644
--- a/app/assets/stylesheets/pages/convdev_index.scss
+++ b/app/assets/stylesheets/pages/convdev_index.scss
@@ -53,19 +53,19 @@ $space-between-cards: 8px;
   padding: $space-between-cards / 2;
   position: relative;
 
-  @media (min-width: $screen-xs-min) {
+  @include media-breakpoint-up(xs) {
     width: percentage(1 / 4);
   }
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: percentage(1 / 5);
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     width: percentage(1 / 6);
   }
 
-  @media (min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     width: percentage(1 / 10);
   }
 }
@@ -82,7 +82,7 @@ $space-between-cards: 8px;
 .convdev-card-low {
   border-top-color: $color-low-score;
 
-  .card-score-big {
+  .board-card-score-big {
     background-color: $red-50;
   }
 }
@@ -90,7 +90,7 @@ $space-between-cards: 8px;
 .convdev-card-average {
   border-top-color: $color-average-score;
 
-  .card-score-big {
+  .board-card-score-big {
     background-color: $orange-50;
   }
 }
@@ -98,7 +98,7 @@ $space-between-cards: 8px;
 .convdev-card-high {
   border-top-color: $color-high-score;
 
-  .card-score-big {
+  .board-card-score-big {
     background-color: $green-50;
   }
 }
@@ -112,14 +112,14 @@ $space-between-cards: 8px;
     margin: 0 0 2px;
   }
 
-  .text-light {
+  .light-text {
     font-size: 13px;
     line-height: 1.25;
     color: $gl-text-color-secondary;
   }
 }
 
-.card-scores {
+.board-card-scores {
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -127,22 +127,22 @@ $space-between-cards: 8px;
   line-height: 1;
 }
 
-.card-score {
+.board-card-score {
   color: $gl-text-color-secondary;
 
-  .card-score-name {
+  .board-card-score-name {
     font-size: 13px;
     margin-top: 4px;
   }
 }
 
-.card-score-value {
+.board-card-score-value {
   font-size: 16px;
   color: $gl-text-color;
   font-weight: $gl-font-weight-normal;
 }
 
-.card-score-big {
+.board-card-score-big {
   border-top: 2px solid $border-color;
   border-bottom: 1px solid $border-color;
   font-size: 22px;
@@ -150,7 +150,7 @@ $space-between-cards: 8px;
   font-weight: $gl-font-weight-normal;
 }
 
-.card-buttons {
+.board-card-buttons {
   display: flex;
 
   > * {
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index cfef6476d4d..a22c666a525 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -15,7 +15,7 @@
         max-width: 480px;
         padding: 0 $gl-padding;
 
-        @media (max-width: $screen-sm-min) {
+        @include media-breakpoint-down(sm) {
           margin: 0 auto;
         }
       }
@@ -75,13 +75,13 @@
     }
   }
 
-  .panel {
+  .card {
     .content-block {
       padding: 24px 0;
       border-bottom: 0;
       position: relative;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         padding: 6px 0 24px;
       }
     }
@@ -89,7 +89,7 @@
     .column {
       text-align: center;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         padding: 15px 0;
       }
 
@@ -106,7 +106,7 @@
       }
 
       &:last-child {
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           text-align: center;
         }
       }
@@ -213,7 +213,7 @@
   .stage-panel {
     min-width: 968px;
 
-    .panel-heading {
+    .card-header {
       padding: 0;
       background-color: transparent;
     }
@@ -266,7 +266,9 @@
       &.issue-title,
       &.commit-title,
       &.merge-merquest-title {
-        @include text-overflow();
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         max-width: 100%;
         display: block;
 
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 2f2c04206e2..2e007c52592 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -14,7 +14,7 @@
     white-space: nowrap;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
   }
 }
@@ -23,9 +23,10 @@
   position: relative;
   line-height: 35px;
   display: flex;
-  flex-grow: 1;
+  flex: 1 1;
+  min-width: 0;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-left: 0;
     padding-right: 0;
   }
@@ -36,7 +37,7 @@
   flex-shrink: 0;
   flex: 0 0 auto;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     width: 100%;
     margin-top: 10px;
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 7f037582ca0..7b8e66b6f12 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -24,6 +24,10 @@
     color: $gl-text-color;
     border-radius: 0 0 3px 3px;
 
+    .code {
+      padding: 0;
+    }
+
     .unfold {
       cursor: pointer;
     }
@@ -44,6 +48,12 @@
       }
     }
 
+    .note-text {
+      table {
+        font-family: $font-family-sans-serif;
+      }
+    }
+
     table {
       width: 100%;
       font-family: $monospace_font;
@@ -55,6 +65,7 @@
 
       .diff-line-num {
         width: 50px;
+        position: relative;
 
         a {
           transition: none;
@@ -71,6 +82,12 @@
 
         span {
           white-space: pre-wrap;
+
+          &.context-cell {
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+          }
         }
 
         .line {
@@ -80,13 +97,13 @@
 
       &.left-side-selected {
         td.line_content.parallel.right-side {
-          @include user-select(none);
+          user-select: none;
         }
       }
 
       &.right-side-selected {
         td.line_content.parallel.left-side {
-          @include user-select(none);
+          user-select: none;
         }
       }
     }
@@ -103,7 +120,7 @@
 
     .old_line,
     .new_line {
-      @include user-select(none);
+      user-select: none;
       margin: 0;
       border: 0;
       padding: 0 5px;
@@ -160,6 +177,11 @@
         }
       }
     }
+
+    .diff-loading-error-block {
+      padding: $gl-padding * 2 $gl-padding;
+      text-align: center;
+    }
   }
 
   .image {
@@ -178,8 +200,22 @@
 
       img {
         border: 1px solid $white-light;
-        background-image: linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%),
-        linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%);
+        background-image: linear-gradient(
+            45deg,
+            $border-color 25%,
+            transparent 25%,
+            transparent 75%,
+            $border-color 75%,
+            $border-color 100%
+          ),
+          linear-gradient(
+            45deg,
+            $border-color 25%,
+            transparent 25%,
+            transparent 75%,
+            $border-color 75%,
+            $border-color 100%
+          );
         background-size: 10px 10px;
         background-position: 0 0, 5px 5px;
         max-width: 100%;
@@ -384,6 +420,69 @@
   .line_content {
     white-space: pre-wrap;
   }
+
+  .diff-file-container {
+    .frame.deleted {
+      border: 0;
+      background-color: inherit;
+
+      .image_file img {
+        border: 1px solid $deleted;
+      }
+    }
+
+    .frame.added {
+      border: 0;
+      background-color: inherit;
+
+      .image_file img {
+        border: 1px solid $added;
+      }
+    }
+
+    .swipe.view,
+    .onion-skin.view {
+      .swipe-wrap {
+        top: 0;
+        right: 0;
+      }
+
+      .frame.deleted {
+        top: 0;
+        right: 0;
+      }
+
+      .swipe-bar {
+        top: 0;
+
+        .top-handle {
+          top: -14px;
+          left: -7px;
+        }
+
+        .bottom-handle {
+          bottom: -14px;
+          left: -7px;
+        }
+      }
+
+      .file-container {
+        display: inline-block;
+
+        .file-content {
+          padding: 0;
+
+          img {
+            max-width: none;
+          }
+        }
+      }
+    }
+
+    .onion-skin.view .controls {
+      bottom: -25px;
+    }
+  }
 }
 
 .file-content .diff-file {
@@ -403,6 +502,10 @@
   border-bottom: 0;
 }
 
+.merge-request-details .file-content.image_file img {
+  max-height: 50vh;
+}
+
 .diff-stats-summary-toggler {
   padding: 0;
   background-color: transparent;
@@ -525,7 +628,7 @@
   margin-right: 0;
   border-color: $white-light;
   cursor: pointer;
-  transition: all .1s ease-out;
+  transition: all 0.1s ease-out;
 
   @for $i from 1 through 4 {
     &:nth-child(#{$i}) {
@@ -552,7 +655,7 @@
   height: 24px;
   border-radius: 50%;
   padding: 0;
-  transition: transform .1s ease-out;
+  transition: transform 0.1s ease-out;
   z-index: 100;
 
   .collapse-icon {
@@ -581,43 +684,47 @@
   }
 
   .commit-stat-summary {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-left: -$gl-padding;
       padding-left: $gl-padding;
       background-color: $white-light;
     }
   }
 
-  @media (min-width: $screen-sm-min) {
-    position: -webkit-sticky;
-    position: sticky;
+  @include media-breakpoint-up(sm) {
     top: 24px;
     background-color: $white-light;
-    z-index: 190;
 
     &.diff-files-changed-merge-request {
-      top: 76px;
-    }
-
-    &:not(.is-stuck) .diff-stats-additions-deletions-collapsed {
-      display: none;
+      position: sticky;
+      top: 90px;
+      z-index: 190;
+      margin: $gl-padding 0;
+      padding: 0;
     }
 
     &.is-stuck {
       padding-top: 0;
       padding-bottom: 0;
       border-bottom: 1px solid $white-dark;
-      transform: translateY(16px);
 
       .diff-stats-additions-deletions-expanded,
       .inline-parallel-buttons {
-        display: none;
+        display: none !important;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    &.is-stuck {
+      .diff-stats-additions-deletions-collapsed {
+        display: block !important;
       }
     }
   }
 }
 
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .with-performance-bar {
     .diff-files-changed.diff-files-changed-merge-request {
       top: 76px + $performance-bar-height;
@@ -630,7 +737,7 @@
   width: 100%;
   z-index: 150;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     left: $gl-padding;
   }
 
@@ -693,11 +800,35 @@
     width: 100%;
     height: 10px;
     background-color: $white-light;
-    background-image: linear-gradient(45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
-      linear-gradient(225deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
-      linear-gradient(135deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
-      linear-gradient(-45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%);
-    background-position: 5px 5px,0 5px,0 5px,5px 5px;
+    background-image: linear-gradient(
+        45deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      ),
+      linear-gradient(
+        225deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      ),
+      linear-gradient(
+        135deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      ),
+      linear-gradient(
+        -45deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      );
+    background-position: 5px 5px, 0 5px, 0 5px, 5px 5px;
     background-size: 10px 10px;
     background-repeat: repeat;
   }
@@ -735,11 +866,16 @@
 .frame.click-to-comment {
   position: relative;
   cursor: image-url('illustrations/image_comment_light_cursor.svg')
-    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+      $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    auto;
 
   // Retina cursor
-  cursor: -webkit-image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x, image-url('illustrations/image_comment_light_cursor@2x.svg') 2x)
-    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+  cursor: -webkit-image-set(
+        image-url('illustrations/image_comment_light_cursor.svg') 1x,
+        image-url('illustrations/image_comment_light_cursor@2x.svg') 2x
+      )
+      $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    auto;
 
   .comment-indicator {
     position: absolute;
@@ -761,9 +897,9 @@
   }
 }
 
-.frame .badge,
-.image-diff-avatar-link .badge,
-.notes > .badge {
+.frame .badge.badge-pill,
+.image-diff-avatar-link .badge.badge-pill,
+.notes > .badge.badge-pill {
   position: absolute;
   background-color: $blue-400;
   color: $white-light;
@@ -777,7 +913,7 @@
   }
 }
 
-.frame .badge,
+.frame .badge.badge-pill,
 .frame .image-comment-badge {
   // Center align badges on the frame
   transform: translate(-50%, -50%);
@@ -800,14 +936,14 @@
 .image-diff-avatar-link {
   position: relative;
 
-  .badge,
+  .badge.badge-pill,
   .image-comment-badge {
     top: 25px;
     right: 8px;
   }
 }
 
-.notes > .badge {
+.notes > .badge.badge-pill {
   display: none;
   left: -13px;
 }
@@ -825,11 +961,11 @@
 
     .diff-notes-collapse,
     .note,
-    .discussion-reply-holder, {
+    .discussion-reply-holder {
       display: none;
     }
 
-    .notes > .badge {
+    .notes > .badge.badge-pill {
       display: block;
     }
   }
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 8ecda50602d..437621299e0 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -37,7 +37,7 @@
     padding-top: 7px;
     padding-bottom: 7px;
 
-    .pull-right {
+    .float-right {
       height: 20px;
     }
   }
@@ -63,11 +63,11 @@
     max-width: 450px;
     float: left;
 
-    @media(max-width: $screen-md-max) {
+    @media(max-width: map-get($grid-breakpoints, lg)-1) {
       width: 280px;
     }
 
-    @media(max-width: $screen-sm-max) {
+    @media(max-width: map-get($grid-breakpoints, md)-1) {
       width: 180px;
     }
   }
@@ -111,10 +111,10 @@
 }
 
 
-@media(max-width: $screen-xs-max){
+@include media-breakpoint-down(xs) {
   .file-editor {
     .file-title {
-      .pull-right {
+      .float-right {
         height: auto;
       }
     }
@@ -153,7 +153,7 @@
   vertical-align: top;
   display: inline-block;
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     margin: 19px 0 12px;
   }
@@ -166,7 +166,7 @@
   padding: 0 0 0 14px;
   border-left: 1px solid $border-color;
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     width: 100%;
     margin: 5px 0;
@@ -181,7 +181,7 @@
   margin-top: 6px;
   line-height: 21px;
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     margin: 5px 0;
   }
@@ -193,7 +193,7 @@
   vertical-align: top;
   margin: 5px 0 0 8px;
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     width: 100%;
     margin: 0 0 16px;
@@ -209,7 +209,7 @@
     font-family: $regular_font;
     margin-top: -5px;
 
-    @media(max-width: $screen-sm-max) {
+    @media(max-width: map-get($grid-breakpoints, md)-1) {
       display: block;
       width: 100%;
       margin: 5px 0;
@@ -223,7 +223,7 @@
       width: 250px;
       vertical-align: top;
 
-      @media(max-width: $screen-sm-max) {
+      @media(max-width: map-get($grid-breakpoints, md)-1) {
         display: block;
         width: 100%;
         margin: 5px 0;
@@ -237,7 +237,7 @@
   display: inline-block;
   margin: 7px 0 0 10px;
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     width: 100%;
     margin: 20px 0;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 58700661142..06f08ae2215 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -1,4 +1,4 @@
-@media (max-width: $screen-md-max) {
+@include media-breakpoint-down(md) {
   .deployments-container {
     width: 100%;
     overflow: auto;
@@ -23,7 +23,6 @@
     }
 
     .btn-group {
-
       > a {
         color: $gl-text-color-secondary;
       }
@@ -138,7 +137,7 @@
   border-left: 0;
   border-right: 0;
 
-  @media (min-width: $screen-sm-max) {
+  @media (min-width: map-get($grid-breakpoints, md)-1) {
     border-top: 0;
   }
 }
@@ -245,17 +244,29 @@
 .prometheus-graph {
   flex: 1 0 auto;
   min-width: 450px;
+  max-width: 100%;
   padding: $gl-padding / 2;
 
   h5 {
     font-size: 16px;
   }
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     min-width: 100%;
   }
 }
 
+.prometheus-graph-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $gl-padding-8;
+
+  h5 {
+    margin: 0;
+  }
+}
+
 .prometheus-graph-cursor {
   position: absolute;
   background: $theme-gray-600;
@@ -273,21 +284,6 @@
     line-height: 1.2;
   }
 
-  table {
-    border-collapse: collapse;
-    padding: 0;
-    margin: 0;
-  }
-
-  td {
-    vertical-align: middle;
-
-    + td {
-      padding-left: 5px;
-      vertical-align: top;
-    }
-  }
-
   .deploy-meta-content {
     border-bottom: 1px solid $white-dark;
 
@@ -298,28 +294,79 @@
   }
 
   &.popover {
+    padding: 0;
+    border: 1px solid $border-color;
+
     &.left {
       left: auto;
       right: 0;
       margin-right: 10px;
+
+      > .arrow {
+        right: -16px;
+        border-left-color: $border-color;
+      }
+
+      > .arrow::after {
+        border-left-color: $theme-gray-50;
+      }
     }
 
     &.right {
       left: 0;
       right: auto;
       margin-left: 10px;
+
+      > .arrow {
+        left: -16px;
+        border-right-color: $border-color;
+      }
+
+      > .arrow::after {
+        border-right-color: $theme-gray-50;
+      }
     }
 
     > .arrow {
-      top: 40px;
+      top: 16px;
+      margin-top: -8px;
+      border-width: 8px;
     }
 
     > .popover-title,
     > .popover-content {
-      padding: 5px 8px;
+      padding: 8px;
       font-size: 12px;
       white-space: nowrap;
     }
+
+    > .popover-title {
+      background-color: $theme-gray-50;
+    }
+  }
+
+  strong {
+    font-weight: 600;
+  }
+}
+
+.prometheus-table {
+  border-collapse: collapse;
+  padding: 0;
+  margin: 0;
+
+  td {
+    vertical-align: middle;
+
+    + td {
+      padding-left: 8px;
+      vertical-align: top;
+    }
+  }
+
+  .legend-metric-title {
+    font-size: 12px;
+    vertical-align: middle;
   }
 }
 
@@ -330,8 +377,7 @@
   padding: 0;
   padding-bottom: 100%;
 
-  .text-metric-usage,
-  .legend-metric-title {
+  .text-metric-usage {
     fill: $black;
     font-weight: $gl-font-weight-normal;
     font-size: 12px;
@@ -374,10 +420,6 @@
       }
     }
 
-    .text-metric-title {
-      font-size: 12px;
-    }
-
     .y-label-text,
     .x-label-text {
       fill: $gray-darkest;
@@ -401,7 +443,7 @@
       }
     }
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       .label-axis-text,
       .text-metric-usage,
       .legend-axis-text {
@@ -414,3 +456,7 @@
     }
   }
 }
+
+.prometheus-table-row-highlight {
+  background-color: $prometheus-table-row-highlight-color;
+}
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 8871a069d5d..f79586b68b9 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -70,7 +70,7 @@
       .md {
         font-size: $gl-font-size;
 
-        .label {
+        .badge.badge-pill {
           color: $gl-text-color;
         }
 
@@ -162,21 +162,18 @@
  * Last push widget
  */
 .event-last-push {
-  overflow: auto;
   width: 100%;
+  display: flex;
+  align-items: center;
 
   .event-last-push-text {
     @include str-truncated(100%);
-    padding: 4px 0;
     font-size: 13px;
-    float: left;
-    margin-right: -150px;
-    padding-right: 150px;
-    line-height: 20px;
+    margin-right: $gl-padding;
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .event-item {
     padding-left: 0;
 
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 6ee8b33bd39..05bf5596fb3 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -2,7 +2,7 @@
   @include str-truncated(90%);
 }
 
-.dashboard .side .panel .panel-heading .input-group {
+.dashboard .side .card .card-header .input-group {
 
   .form-control {
     height: 42px;
@@ -18,6 +18,10 @@
 
 .group-row {
   @include basic-list-stats;
+
+  .description p {
+    margin-bottom: 0;
+  }
 }
 
 .ldap-group-links {
@@ -36,7 +40,7 @@
     flex: 1;
   }
 
-  .dropdown-menu-align-right {
+  .dropdown-menu-right {
     margin-top: 0;
   }
 
@@ -98,7 +102,7 @@
     }
   }
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     &,
     .dropdown,
     .dropdown .dropdown-toggle,
@@ -145,14 +149,14 @@
   padding: 50px 100px;
   overflow: hidden;
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     padding: 50px 0;
   }
 
   svg {
     float: right;
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       float: none;
       display: block;
       width: 250px;
@@ -167,7 +171,7 @@
     width: 460px;
     margin-top: 120px;
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       float: none;
       margin-top: 60px;
       width: auto;
@@ -201,7 +205,7 @@
       max-width: 480px;
       padding: 0 $gl-padding;
 
-      @media (max-width: $screen-sm-min) {
+      @include media-breakpoint-down(sm) {
         margin: 0 auto;
       }
     }
@@ -237,3 +241,231 @@
     overflow-y: unset;
   }
 }
+
+.groups-list-tree-container {
+  .has-no-search-results {
+    text-align: center;
+    padding: $gl-padding;
+    font-style: italic;
+    color: $well-light-text-color;
+  }
+
+  > .group-list-tree > .group-row.has-children:first-child {
+    border-top: 0;
+  }
+}
+
+.group-list-tree {
+  .avatar-container.content-loading {
+    position: relative;
+
+    > a,
+    > a .avatar {
+      height: 100%;
+      border-radius: 50%;
+    }
+
+    > a {
+      padding: 2px;
+
+      .avatar {
+        border: 2px solid $white-normal;
+
+        &.identicon {
+          line-height: 15px;
+        }
+      }
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      background-color: transparent;
+      border: 2px outset $kdb-border;
+      border-radius: 50%;
+      animation: spin-avatar 3s infinite linear;
+    }
+  }
+
+  .folder-toggle-wrap {
+    float: left;
+    line-height: $list-text-height;
+    font-size: 0;
+
+    span {
+      font-size: $gl-font-size;
+    }
+  }
+
+  .folder-caret,
+  .item-type-icon {
+    display: inline-block;
+  }
+
+  .folder-caret {
+    width: 15px;
+
+    svg {
+      margin-bottom: 2px;
+    }
+  }
+
+  .item-type-icon {
+    margin-top: 2px;
+    width: 20px;
+  }
+
+  > .group-row:not(.has-children) {
+    .folder-caret {
+      opacity: 0;
+    }
+  }
+
+  .content-list li:last-child {
+    padding-bottom: 0;
+  }
+
+  .group-list-tree {
+    margin-bottom: 0;
+    margin-left: 30px;
+    position: relative;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 0;
+      position: absolute;
+      top: 5px;
+      bottom: 0;
+      left: -16px;
+      border-left: 2px solid $border-white-normal;
+    }
+
+    .group-row {
+      position: relative;
+
+      &::before {
+        content: "";
+        display: block;
+        width: 10px;
+        height: 0;
+        border-top: 2px solid $border-white-normal;
+        position: absolute;
+        top: 30px;
+        left: -16px;
+      }
+
+      &:last-child::before {
+        background: $white-light;
+        height: auto;
+        top: 30px;
+        bottom: 0;
+      }
+
+      &.being-removed {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  .group-row {
+    padding: 0;
+
+    &.has-children {
+      border-top: 0;
+    }
+
+    &:first-child {
+      border-top: 1px solid $white-normal;
+    }
+  }
+
+  .group-row-contents {
+    padding: $gl-padding-top;
+
+    &:hover {
+      border-color: $row-hover-border;
+      background-color: $row-hover;
+      cursor: pointer;
+    }
+
+    .avatar-container > a {
+      width: 100%;
+      text-decoration: none;
+    }
+
+    &.has-more-items {
+      display: block;
+      padding: 20px 10px;
+    }
+
+    .stats {
+      position: relative;
+      line-height: 46px;
+
+      > span {
+        display: inline-flex;
+        align-items: center;
+        height: 16px;
+        min-width: 30px;
+      }
+
+      > span:last-child {
+        margin-right: 0;
+      }
+
+      .stat-value {
+        margin: 2px 0 0 5px;
+      }
+    }
+
+    .controls {
+      margin-left: 5px;
+
+      > .btn {
+        margin-right: $btn-margin-5;
+      }
+    }
+  }
+
+  .project-row-contents .stats {
+    line-height: inherit;
+
+    > span:first-child {
+      margin-left: 25px;
+    }
+
+    .item-visibility {
+      margin-right: 0;
+    }
+
+    .last-updated {
+      position: absolute;
+      right: 12px;
+      min-width: 250px;
+      text-align: right;
+      color: $gl-text-color-secondary;
+    }
+  }
+}
+
+ul.group-list-tree {
+  li.group-row {
+    > .group-row-contents .title {
+      line-height: $list-text-height;
+    }
+
+    &.has-description > .group-row-contents .title {
+      line-height: inherit;
+    }
+  }
+}
+
+.js-groups-list-holder {
+  .groups-list-loading {
+    font-size: 34px;
+    text-align: center;
+  }
+}
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index 9cc9e11bcd1..0350fe5752e 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -28,8 +28,8 @@
   }
 
   .key {
-    @extend .label;
-    @extend .label-inverse;
+    @extend .badge.badge-pill;
+    background-color: $label-inverse-bg;
     font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
     padding: 3px 5px;
   }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index e21a9f0afc9..f9fd9f1ab8b 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -187,14 +187,31 @@
       padding-left: 10px;
 
       &:hover {
-        color: $gray-darkest;
+        color: $gl-text-color;
+      }
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
       }
     }
 
     &.assignee {
-      .author_link:hover {
-        .author {
-          text-decoration: underline;
+      .author_link {
+        display: block;
+        padding-left: 42px;
+        position: relative;
+
+        &:hover {
+          .author {
+            text-decoration: underline;
+          }
+        }
+
+        .avatar {
+          left: 0;
+          position: absolute;
+          top: 0;
         }
       }
     }
@@ -356,7 +373,7 @@
     /* Extra small devices (phones, less than 768px) */
     display: none;
     /* Small devices (tablets, 768px and up) */
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: block;
     }
 
@@ -368,6 +385,14 @@
       padding: 15px 0 0;
       border-bottom: 0;
       overflow: hidden;
+
+      &:hover {
+        background-color: $sidebar-block-hover-color;
+      }
+
+      &.issuable-sidebar-header {
+        padding-top: 0;
+      }
     }
 
     .participants {
@@ -380,8 +405,17 @@
 
     .gutter-toggle {
       width: 100%;
+      height: $sidebar-toggle-height;
       margin-left: 0;
-      padding-left: 25px;
+      padding-left: 0;
+      border-bottom: 1px solid $border-gray-dark;
+    }
+
+    a.gutter-toggle {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      text-align: center;
     }
 
     .sidebar-collapsed-icon {
@@ -428,10 +462,10 @@
 
       .btn-clipboard {
         border: 0;
+        background: transparent;
         color: $issuable-sidebar-color;
 
         &:hover {
-          background: transparent;
           color: $gl-text-color;
         }
       }
@@ -451,6 +485,15 @@
     .sidebar-collapsed-user {
       padding-bottom: 0;
       margin-bottom: 10px;
+
+      .author_link {
+        padding-left: 0;
+
+        .avatar {
+          position: static;
+          margin: 0;
+        }
+      }
     }
 
     .issuable-header-btn {
@@ -522,10 +565,6 @@
 
 .with-performance-bar .right-sidebar {
   top: $header-height + $performance-bar-height;
-
-  .issuable-sidebar {
-    height: calc(100% - #{$performance-bar-height});
-  }
 }
 
 .sidebar-move-issue-confirmation-button {
@@ -626,7 +665,7 @@
 }
 
 .issuable-form-padding-top {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-top: 7px;
   }
 }
@@ -640,7 +679,7 @@
   padding-left: 9px;
   padding-right: 9px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     display: inline-block;
     height: auto;
     align-self: center;
@@ -648,7 +687,7 @@
 }
 
 .issuable-gutter-toggle {
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     margin-left: $btn-side-margin;
   }
 }
@@ -659,6 +698,8 @@
   font-size: 14px;
   line-height: 24px;
   align-self: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .js-issuable-selector-wrap {
@@ -666,7 +707,7 @@
     width: 100%;
   }
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     margin-bottom: $gl-padding;
   }
 }
@@ -707,7 +748,7 @@
         }
       }
 
-      @media(max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         .issuable-meta {
           .controls li {
             margin-right: 0;
@@ -742,7 +783,7 @@
       }
     }
 
-    @media(max-width: $screen-md-max) {
+    @media(max-width: map-get($grid-breakpoints, lg)-1) {
       .task-status,
       .issuable-due-date,
       .project-ref-path {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index b9390450477..19fb99bfa93 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -1,5 +1,3 @@
-@import "./issues/issue_count_badge";
-
 .issues-list {
   .issue {
     padding: 10px 0 10px $gl-padding;
@@ -143,7 +141,7 @@ ul.related-merge-requests > li {
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .detail-page-header {
     .issuable-meta {
       line-height: 18px;
@@ -205,7 +203,7 @@ ul.related-merge-requests > li {
     }
   }
 
-  .btn-group:not(.hide) {
+  .btn-group:not(.hidden) {
     display: flex;
   }
 
@@ -247,7 +245,7 @@ ul.related-merge-requests > li {
   display: block;
 }
 
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .emoji-block .row {
     display: flex;
 
@@ -258,8 +256,8 @@ ul.related-merge-requests > li {
     }
 
     .create-mr-dropdown-wrap {
-      .btn-group:not(.hide) {
-        display: inline-block;
+      .btn-group:not(.hidden) {
+        display: inline-flex;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 0f49d15203b..79cac7f4ff0 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -26,9 +26,15 @@
   }
 }
 
+.dropdown-menu-labels {
+  .dropdown-content {
+    max-height: 135px;
+  }
+}
+
 .dropdown-new-label {
   .dropdown-content {
-    max-height: 260px;
+    max-height: 136px;
   }
 }
 
@@ -51,71 +57,11 @@
   border-bottom-left-radius: $border-radius-base;
 }
 
-.label-row {
-  .label-name {
-    display: inline-block;
-    margin-bottom: 10px;
-
-    @media (min-width: $screen-sm-min) {
-      width: 200px;
-      margin-left: $gl-padding * 2;
-      margin-bottom: 0;
-    }
-
-    .label {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 100%;
-    }
-  }
-
-  .label-type {
-    display: block;
-    margin-bottom: 10px;
-    margin-left: 50px;
-
-    @media (min-width: $screen-sm-min) {
-      display: inline-block;
-      width: 100px;
-      margin-left: 10px;
-      margin-bottom: 0;
-      vertical-align: top;
-    }
-  }
-
-  .label-description {
-    display: block;
-    margin-bottom: 10px;
-
-    .description-text {
-      margin-bottom: $gl-padding;
-    }
-
-    a {
-      color: $blue-600;
-    }
-
-    @media (min-width: $screen-sm-min) {
-      display: inline-block;
-      max-width: 50%;
-      margin-left: 10px;
-      margin-bottom: 0;
-      vertical-align: top;
-    }
-  }
-
-  .label {
-    padding: 4px $grid-size;
-    font-size: $label-font-size;
-    position: relative;
-    top: ($grid-size / 2);
-  }
-}
-
 .color-label {
   padding: 0 $grid-size;
   line-height: 16px;
   border-radius: $label-border-radius;
+  color: $white-light;
 }
 
 .dropdown-labels-error {
@@ -126,26 +72,29 @@
 }
 
 .manage-labels-list {
-  @media(min-width: $screen-md-min) {
-    &.content-list li {
-      padding: $gl-padding 0;
-    }
-  }
-
   > li:not(.empty-message):not(.is-not-draggable) {
     background-color: $white-light;
-    cursor: move;
-    cursor: -webkit-grab;
-    cursor: -moz-grab;
-
-    &:active {
-      cursor: -webkit-grabbing;
-      cursor: -moz-grabbing;
-    }
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: $gl-padding;
+    border-radius: $border-radius-default;
 
     &.sortable-ghost {
       opacity: 0.3;
     }
+
+    .prioritized-labels & {
+      box-shadow: 0 1px 2px $issue-boards-card-shadow;
+      cursor: move;
+      cursor: -webkit-grab;
+      cursor: -moz-grab;
+
+      &:active {
+        cursor: -webkit-grabbing;
+        cursor: -moz-grabbing;
+      }
+    }
   }
 
   .btn-action {
@@ -164,28 +113,11 @@
     }
   }
 
-  .dropdown {
-    @media (min-width: $screen-sm-min) {
-      float: right;
-    }
-  }
-
-  @media (max-width: $screen-xs-max) {
-    .dropdown-menu {
-      min-width: 100%;
-    }
+  .color-label {
+    padding: $gl-padding-4 $grid-size;
   }
 }
 
-.draggable-handler {
-  display: inline-block;
-  vertical-align: top;
-  margin: 5px 0;
-  opacity: 0;
-  transition: opacity .3s;
-  color: $gray-darkest;
-}
-
 .prioritized-labels {
   margin-bottom: 30px;
 
@@ -208,22 +140,6 @@
   }
 }
 
-.toggle-priority {
-  display: inline-block;
-  vertical-align: top;
-
-  button {
-    border-color: transparent;
-    padding: 5px 8px;
-    vertical-align: top;
-    font-size: 14px;
-
-    &:hover {
-      border-color: transparent;
-    }
-  }
-}
-
 .filtered-labels {
   font-size: 0;
   padding: 12px 16px;
@@ -277,10 +193,8 @@
 }
 
 .label-subscribe-button {
-  @media(min-width: $screen-md-min) {
-    min-width: 105px;
-    margin-left: $gl-padding;
-  }
+  width: 105px;
+  font-weight: 200;
 
   .label-subscribe-button-icon {
     &[disabled] {
@@ -306,10 +220,106 @@
 
 .label-link {
   display: inline-flex;
-  vertical-align: top;
+  vertical-align: text-bottom;
+
+  &:hover .color-label {
+    text-decoration: underline;
+  }
 
   .label {
     vertical-align: inherit;
     font-size: $label-font-size;
   }
 }
+
+.labels-container {
+  background-color: $gray-light;
+  border-radius: $border-radius-default;
+  padding: $gl-padding $gl-padding-8;
+}
+
+.label-actions-list {
+  list-style: none;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.label-badge {
+  color: $theme-gray-900;
+  font-weight: $gl-font-weight-normal;
+  padding: $gl-padding-4 $gl-padding-8;
+  border-radius: $border-radius-default;
+  font-size: $label-font-size;
+}
+
+.label-badge-blue {
+  background-color: $theme-blue-100;
+}
+
+.label-badge-gray {
+  background-color: $theme-gray-100;
+}
+
+.label-links {
+  list-style: none;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.label-link-item {
+  padding: 0;
+}
+
+.label-list-item {
+  .content-list &::before,
+  .content-list &::after {
+    content: none;
+  }
+
+  .label-name {
+    width: 150px;
+    flex-shrink: 0;
+
+    .badge {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+  }
+
+  .label-description {
+    flex-grow: 1;
+
+    a {
+      color: $blue-600;
+    }
+  }
+
+  .label {
+    padding: 4px $grid-size;
+    font-size: $label-font-size;
+    position: relative;
+    top: $gl-padding-4;
+  }
+
+  .label-action {
+    color: $theme-gray-800;
+    cursor: pointer;
+
+    svg {
+      fill: $theme-gray-800;
+    }
+
+    &:hover {
+      color: $blue-600;
+
+      svg {
+        fill: $blue-600;
+      }
+    }
+  }
+}
+
+.priority-labels-empty-state .svg-content img {
+  max-width: $priority-label-empty-state-width;
+}
diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss
deleted file mode 100644
index 68b6c5ecbd4..00000000000
--- a/app/assets/stylesheets/pages/lint.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.ci-body {
-  .incorrect-syntax {
-    font-size: 18px;
-    color: $lint-incorrect-color;
-  }
-
-  .correct-syntax {
-    font-size: 18px;
-    color: $lint-correct-color;
-  }
-}
-
-.ci-linter {
-  .ci-editor {
-    height: 400px;
-  }
-
-  .ci-template pre {
-    white-space: pre-wrap;
-  }
-}
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index b2250a1ce2f..c1b1d2e028d 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -154,26 +154,10 @@
       a {
         width: 100%;
         font-size: 18px;
-        margin-right: 0;
-
-        &:hover {
-          border: 1px solid transparent;
-        }
       }
 
-      &.active {
-        border-bottom: 1px solid $border-color;
-
-        a {
-          border: 0;
-          border-bottom: 2px solid $link-underline-blue;
-          margin-right: 0;
-          color: $black;
-
-          &:hover {
-            border-bottom: 2px solid $link-underline-blue;
-          }
-        }
+      &.active > a {
+        cursor: default;
       }
     }
   }
@@ -207,9 +191,9 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .login-page {
-    .col-sm-5.pull-right {
+    .col-md-5.float-right {
       float: none !important;
       margin-bottom: 45px;
     }
@@ -259,7 +243,7 @@
     .navless-container {
       padding: 65px 15px; // height of footer + bottom padding of email confirmation link
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         padding: 0 15px 65px;
       }
     }
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 3422829de58..5fdb2b4a90a 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -9,9 +9,13 @@
   }
 }
 
+.member-sort-dropdown {
+  margin-left: $gl-padding-8;
+}
+
 .member {
   .list-item-name {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       float: left;
       width: 50%;
     }
@@ -22,46 +26,50 @@
   }
 
   .controls {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: -webkit-flex;
       display: flex;
     }
 
-    .dropdown-menu.dropdown-menu-align-right {
+    .dropdown-menu.dropdown-menu-right {
       margin-top: -2px;
     }
   }
 
-  .form-horizontal {
-    margin-top: 20px;
+  .form-group {
+    margin-bottom: 0;
 
-    @media (min-width: $screen-sm-min) {
-      display: -webkit-flex;
-      display: flex;
-      margin-top: 3px;
+    @include media-breakpoint-down(sm) {
+      display: block;
+      margin-left: 5px;
     }
   }
 
   .btn-remove {
     width: 100%;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: auto;
     }
   }
 
   &.existing-title {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       float: left;
     }
   }
 }
 
 .member-form-control {
-  @media (max-width: $screen-xs-max) {
-    padding-bottom: 5px;
+  @include media-breakpoint-down(sm) {
+    width: $dropdown-member-form-control-width;
     margin-left: 0;
+    padding-bottom: 5px;
+  }
+
+  @include media-breakpoint-down(xs) {
     margin-right: 0;
+    width: auto;
   }
 }
 
@@ -73,7 +81,7 @@
 .member-search-form {
   position: relative;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     float: right;
   }
 
@@ -86,7 +94,7 @@
       width: 100%;
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-top: 0;
       width: 155px;
     }
@@ -96,19 +104,9 @@
     width: 100%;
     padding-right: 35px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: 250px;
     }
-
-    &.input-short {
-      @media (min-width: $screen-md-min) {
-        width: 170px;
-      }
-
-      @media (min-width: $screen-lg-min) {
-        width: 210px;
-      }
-    }
   }
 }
 
@@ -123,10 +121,6 @@
   background: transparent;
   border: 0;
   outline: 0;
-
-  @media (min-width: $screen-sm-min) {
-    right: 160px;
-  }
 }
 
 .flex-project-members-panel {
@@ -135,7 +129,7 @@
   align-items: center;
   justify-content: center;
 
-  @media (max-width: $screen-sm-min) {
+  @include media-breakpoint-down(sm) {
     display: block;
 
     .flex-project-title {
@@ -151,7 +145,7 @@
     text-overflow: ellipsis;
   }
 
-  .badge {
+  .badge.badge-pill {
     height: 17px;
     line-height: 16px;
     margin-right: 5px;
@@ -166,14 +160,14 @@
   }
 }
 
-.panel {
-  .panel-heading {
-    .badge {
+.card {
+  .card-header {
+    .badge.badge-pill {
       margin-top: 0;
     }
 
-    @media (max-width: $screen-sm-min) {
-      .badge {
+    @include media-breakpoint-down(sm) {
+      .badge.badge-pill {
         margin-right: 0;
         margin-left: 0;
       }
@@ -213,11 +207,7 @@
     align-self: flex-start;
   }
 
-  .form-horizontal ~ .btn {
-    margin-right: 0;
-  }
-
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
 
     .controls > .btn {
@@ -226,6 +216,12 @@
       display: block;
     }
 
+    .controls > .btn:last-child {
+      margin-left: 5px;
+      margin-right: 5px;
+      width: auto;
+    }
+
     .form-control {
       width: 100%;
     }
@@ -238,14 +234,10 @@
     .member-controls {
       margin-top: 5px;
     }
-
-    .form-horizontal {
-      margin-top: 10px;
-    }
   }
 }
 
-.panel-mobile {
+.card-mobile {
   .content-list.members-list li {
     display: block;
 
@@ -265,10 +257,6 @@
       margin-top: 0;
     }
 
-    .form-horizontal {
-      display: block;
-    }
-
     .member-form-control {
       margin: 5px 0;
     }
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 04bde64c752..e76525fdbf6 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -286,6 +286,14 @@ $colors: (
   }
 
   .resolve-conflicts-form {
-    padding-top: $gl-padding;
+    h4 {
+      margin-top: 0;
+    }
+
+    .resolve-info {
+      @media(max-width: map-get($grid-breakpoints, lg)-1) {
+        margin-bottom: $gl-padding;
+      }
+    }
   }
 }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 4692d0fb873..ccf5d632614 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -51,12 +51,6 @@
       opacity: 0.3;
     }
 
-    &.btn-xs {
-      line-height: 1;
-      padding: 5px 10px;
-      margin-top: 1px;
-    }
-
     &.dropdown-toggle {
       .fa {
         color: inherit;
@@ -131,7 +125,7 @@
     color: $gl-text-color;
     display: flex;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       flex-wrap: wrap;
     }
   }
@@ -156,10 +150,6 @@
     .dropdown-menu {
       z-index: 300;
     }
-
-    .ci-action-icon-wrapper {
-      line-height: 16px;
-    }
   }
 
   .mini-pipeline-graph-dropdown-toggle {
@@ -286,7 +276,7 @@
       display: inline-block;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       p {
         font-size: 13px;
       }
@@ -498,18 +488,18 @@
   }
 }
 
-.panel-new-merge-request {
-  .panel-heading {
+.card-new-merge-request {
+  .card-header {
     padding: 5px 10px;
     font-weight: $gl-font-weight-bold;
     line-height: 25px;
   }
 
-  .panel-body {
+  .card-body {
     padding: 10px 5px;
   }
 
-  .panel-footer {
+  .card-footer {
     padding: 0;
 
     .btn {
@@ -523,7 +513,7 @@
     }
 
     .item-title {
-      @media (min-width: $screen-sm-min) {
+      @include media-breakpoint-up(sm) {
         width: 45%;
       }
     }
@@ -554,7 +544,7 @@
     margin-bottom: 0;
   }
 
-  @media (min-width: $screen-xs-min) {
+  @include media-breakpoint-up(xs) {
     float: left;
     width: 50%;
     margin-bottom: 0;
@@ -609,14 +599,12 @@
   position: relative;
   background: $gray-light;
   color: $gl-text-color;
-  z-index: 199;
 
   .mr-version-menus-container {
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
     padding: 16px;
+    z-index: 199;
   }
 
   .content-block {
@@ -652,7 +640,7 @@
   background-color: $white-light;
   border-bottom: 1px solid $border-color;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     position: sticky;
     position: -webkit-sticky;
   }
@@ -661,7 +649,7 @@
     left: 0;
     transition: right .15s;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       right: 0;
     }
 
@@ -682,6 +670,7 @@
 
 .merge-request-tabs {
   display: flex;
+  flex-wrap: nowrap;
   margin-bottom: 0;
   padding: 0;
 }
@@ -704,7 +693,7 @@
   display: flex;
   justify-content: space-between;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-direction: column-reverse;
   }
 }
@@ -740,7 +729,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  @media (min-width: $screen-xs) {
+  @include media-breakpoint-up(xs) {
     flex-wrap: nowrap;
     white-space: nowrap;
   }
@@ -757,8 +746,25 @@
   min-width: 100px;
   max-width: 150px;
 
-  @media (min-width: $screen-xs) {
+  @include media-breakpoint-up(xs) {
     min-width: 0;
     max-width: 100%;
   }
 }
+
+// Hack alert: we've rewritten `btn` class in a way that
+// we've broken it and it is not possible to use with `btn-link`
+// which causes a blank button when it's disabled and hovering
+// The css in here is the boostrap one
+.btn-link-retry {
+  &[disabled] {
+    cursor: not-allowed;
+    box-shadow: none;
+    opacity: .65;
+
+    &:hover {
+      color: $file-mode-changed;
+      text-decoration: none;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index e5afa8fffcb..dba83e56d72 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -31,7 +31,7 @@
     }
   }
 
-  .panel-heading {
+  .card-header {
     line-height: $line-height-base;
     padding: 14px 16px;
     display: -webkit-flex;
@@ -53,10 +53,6 @@
 }
 
 .milestone-sidebar {
-  .gutter-toggle {
-    margin-bottom: 10px;
-  }
-
   .milestone-progress {
     .title {
       padding-top: 5px;
@@ -102,7 +98,17 @@
     margin-right: 0;
   }
 
+  .right-sidebar-expanded & {
+    .gutter-toggle {
+      margin-bottom: $sidebar-milestone-toggle-bottom-margin;
+    }
+  }
+
   .right-sidebar-collapsed & {
+    .milestone-progress {
+      padding-top: 0;
+    }
+
     .reference {
       border-top: 1px solid $border-gray-normal;
     }
@@ -139,7 +145,7 @@
   padding: 20px 0;
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .milestone-actions {
     @include clearfix();
     padding-top: $gl-vert-padding;
@@ -175,7 +181,7 @@
     width: 100%;
   }
 
-  @media (min-width: $screen-xs-min) {
+  @include media-breakpoint-up(xs) {
     .milestone-buttons .verbose {
       display: inline;
     }
@@ -194,3 +200,38 @@
 .issuable-row {
   background-color: $white-light;
 }
+
+.milestone-deprecation-message {
+  .popover {
+    padding: 0;
+  }
+
+  .popover-content {
+    padding: 0;
+  }
+}
+
+.milestone-popover-body {
+  padding: $gl-padding-8;
+  background-color: $gray-light;
+}
+
+.milestone-popover-footer {
+  padding: $gl-padding-8 $gl-padding;
+  border-top: 1px solid $white-dark;
+}
+
+.milestone-popover-instructions-list {
+  padding-left: 2em;
+
+  > li {
+    padding-left: 1em;
+  }
+}
+
+@include media-breakpoint-down(xs) {
+  .milestone-banner-text,
+  .milestone-banner-link {
+    display: inline;
+  }
+}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 4a528bc2bb1..5e5696b1602 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -51,7 +51,7 @@
 }
 
 .note-image-attach {
-  @extend .col-md-4;
+  @extend .col-lg-4;
   margin-left: 45px;
   float: none;
 }
@@ -93,7 +93,7 @@
   -webkit-flex-flow: row wrap;
   width: 100%;
 
-  .pull-right {
+  .float-right {
     // Flexbox quirk to make sure right-aligned items stay right-aligned.
     margin-left: auto;
   }
@@ -129,7 +129,7 @@
     .icon svg {
       position: relative;
       top: 2px;
-      margin-right: $btn-xs-side-margin;
+      margin-right: $btn-margin-5;
       width: $gl-font-size;
       height: $gl-font-size;
       fill: $orange-600;
@@ -185,12 +185,12 @@
 }
 
 .notes.notes-form > li.timeline-entry {
-  @include notes-media('max', $screen-sm-max) {
+  @include notes-media('max', map-get($grid-breakpoints, md) - 1) {
     padding: 0;
   }
 
   .timeline-content {
-    @include notes-media('max', $screen-sm-max) {
+    @include notes-media('max', map-get($grid-breakpoints, md) - 1) {
       margin: 0;
     }
   }
@@ -247,22 +247,6 @@
 }
 
 .discussion-with-resolve-btn {
-  display: table;
-  width: 100%;
-  border-collapse: separate;
-  table-layout: auto;
-
-  .btn-group {
-    display: table-cell;
-    float: none;
-    width: 1%;
-
-    &:first-child {
-      width: 100%;
-      padding-right: 5px;
-    }
-  }
-
   .discussion-actions {
     display: table;
 
@@ -326,7 +310,7 @@
     outline: 0;
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     float: left;
     margin-right: $gl-padding;
 
@@ -350,13 +334,13 @@
   line-height: 16px;
   margin-top: 2px;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     float: left;
   }
 }
 
 .note-form-actions {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .btn {
       float: none;
       width: 100%;
@@ -375,7 +359,7 @@
   left: 127px;
   top: 2px;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     position: relative;
     top: 0;
     left: 0;
@@ -410,7 +394,7 @@
     width: 298px;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: flex;
     width: 100%;
     margin-bottom: 10px;
@@ -432,7 +416,7 @@
 .uploading-container {
   float: right;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     float: left;
     margin-top: 5px;
   }
@@ -444,7 +428,7 @@
 }
 
 .uploading-error-message {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     &::after {
       content: "\a";
       white-space: pre;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 81e98f358a8..25400d886fb 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -3,9 +3,17 @@
  */
 
 @-webkit-keyframes targe3-note {
-  from { background: $note-targe3-outside; }
-  50% { background: $note-targe3-inside; }
-  to { background: $note-targe3-outside; }
+  from {
+    background: $note-targe3-outside;
+  }
+
+  50% {
+    background: $note-targe3-inside;
+  }
+
+  to {
+    background: $note-targe3-outside;
+  }
 }
 
 ul.notes {
@@ -22,7 +30,7 @@ ul.notes {
   .discussion-body {
     padding-top: 8px;
 
-    .panel {
+    .card {
       margin-bottom: 0;
     }
   }
@@ -33,16 +41,18 @@ ul.notes {
 
     .diff-content {
       overflow: visible;
+      padding: 0;
     }
   }
 
-  > li { // .timeline-entry
+  > li {
+    // .timeline-entry
     padding: 0;
     display: block;
     position: relative;
     border-bottom: 0;
 
-    @include notes-media('min', $screen-sm-min) {
+    @include notes-media('min', map-get($grid-breakpoints, sm)) {
       padding-left: $note-icon-gutter-width;
     }
 
@@ -66,7 +76,7 @@ ul.notes {
     }
 
     .timeline-icon {
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: -$note-icon-gutter-width;
       }
     }
@@ -74,7 +84,7 @@ ul.notes {
     .timeline-content {
       margin-left: $note-icon-gutter-width;
 
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: 0;
       }
     }
@@ -153,8 +163,7 @@ ul.notes {
     }
 
     .note-header {
-
-      @include notes-media('max', $screen-xs-min) {
+      @include notes-media('max', map-get($grid-breakpoints, xs)) {
         .inline {
           display: block;
         }
@@ -217,7 +226,7 @@ ul.notes {
     .timeline-icon {
       float: left;
 
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: 0;
         width: auto;
       }
@@ -231,7 +240,7 @@ ul.notes {
     }
 
     .timeline-content {
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: 30px;
       }
     }
@@ -245,7 +254,6 @@ ul.notes {
 
       .system-note-commit-list-toggler {
         color: $gl-link-color;
-        display: none;
         padding: 10px 0 0;
         cursor: pointer;
         position: relative;
@@ -407,10 +415,6 @@ ul.notes {
 .note-header {
   display: flex;
   justify-content: space-between;
-
-  @include notes-media('max', $screen-xs-max) {
-    flex-flow: row wrap;
-  }
 }
 
 .note-header-info {
@@ -427,7 +431,7 @@ ul.notes {
 }
 
 .note-header-author-name {
-  @include notes-media('max', $screen-xs-max) {
+  @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
     display: none;
   }
 }
@@ -435,7 +439,7 @@ ul.notes {
 .note-headline-light {
   display: inline;
 
-  @include notes-media('max', $screen-xs-min) {
+  @include notes-media('max', map-get($grid-breakpoints, xs)) {
     display: block;
   }
 }
@@ -459,6 +463,10 @@ ul.notes {
     white-space: normal;
   }
 
+  .system-note-separator {
+    color: $gl-text-color-disabled;
+  }
+
   a:hover {
     text-decoration: underline;
   }
@@ -473,11 +481,6 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
 
-  @include notes-media('max', $screen-md-max) {
-    float: none;
-    margin-left: 0;
-  }
-
   .btn-group > .discussion-next-btn {
     margin-left: -1px;
   }
@@ -491,7 +494,7 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
 
-  @include notes-media('max', $screen-xs-max) {
+  @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
     float: none;
     margin-left: 0;
   }
@@ -629,15 +632,17 @@ ul.notes {
 .line_holder .is-over:not(.no-comment-btn) {
   .add-diff-note {
     opacity: 1;
+    z-index: 101;
   }
 }
 
 .add-diff-note {
   @include btn-comment-icon;
   opacity: 0;
-  margin-top: -2px;
   margin-left: -55px;
   position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   z-index: 10;
 }
 
@@ -666,14 +671,13 @@ ul.notes {
     background-color: $white-light;
   }
 
-
   a {
     color: $gl-link-color;
   }
 }
 
 .line-resolve-all-container {
-  @include notes-media('min', $screen-sm-min) {
+  @include notes-media('min', map-get($grid-breakpoints, sm)) {
     margin-right: 0;
     padding-left: $gl-padding;
   }
@@ -773,6 +777,43 @@ ul.notes {
   }
 }
 
-.line-resolve-text {
-  vertical-align: middle;
+// Vue refactored diff discussion adjustments
+.files {
+  .diff-discussions {
+    .note-discussion.timeline-entry {
+      padding-left: 0;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      > .timeline-entry-inner {
+        padding: 0;
+
+        > .timeline-content {
+          margin-left: 0;
+        }
+
+        > .timeline-icon {
+          display: none;
+        }
+      }
+
+      .discussion-body {
+        padding-top: 0;
+
+        .discussion-wrapper {
+          border-color: transparent;
+        }
+      }
+    }
+  }
+
+  .diff-comment-form {
+    display: block;
+  }
+
+  .add-diff-note svg {
+    margin-top: 4px;
+  }
 }
diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss
index bdf07a99daf..e98cb444f0a 100644
--- a/app/assets/stylesheets/pages/notifications.scss
+++ b/app/assets/stylesheets/pages/notifications.scss
@@ -2,7 +2,7 @@
   line-height: 34px;
 
   .dropdown-menu {
-    @extend .dropdown-menu-align-right;
+    @extend .dropdown-menu-right;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/pages.scss b/app/assets/stylesheets/pages/pages.scss
new file mode 100644
index 00000000000..fb42dee66d2
--- /dev/null
+++ b/app/assets/stylesheets/pages/pages.scss
@@ -0,0 +1,60 @@
+.pages-domain-list {
+  &-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .domain-status {
+      display: inline-flex;
+      left: $gl-padding;
+      position: absolute;
+    }
+
+    .domain-name {
+      flex-grow: 1;
+    }
+
+  }
+
+  &.has-verification-status > li {
+    padding-left: 3 * $gl-padding;
+  }
+
+}
+
+.status-badge {
+
+  display: inline-flex;
+  margin-bottom: $gl-padding-8;
+
+  // Most of the following settings "stolen" from btn-sm
+  // Border radius is overwritten for both
+  .label,
+  .btn {
+    padding: $gl-padding-4 $gl-padding-8;
+    font-size: $gl-font-size;
+    line-height: $gl-btn-line-height;
+    border-radius: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .btn svg {
+    top: auto;
+  }
+
+  :first-child {
+    border-bottom-left-radius: $border-radius-default;
+    border-top-left-radius: $border-radius-default;
+  }
+
+  :not(:first-child) {
+    border-left: 0;
+  }
+
+  :last-child {
+    border-bottom-right-radius: $border-radius-default;
+    border-top-right-radius: $border-radius-default;
+  }
+
+}
diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
index bc7fa8a26d9..86e70955389 100644
--- a/app/assets/stylesheets/pages/pipeline_schedules.scss
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -69,7 +69,7 @@
 .cron-preset-radio-input {
   display: inline-block;
 
-  @media (max-width: $screen-md-max) {
+  @include media-breakpoint-down(md) {
     display: block;
     margin: 0 0 5px 5px;
   }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 42772f13155..52332ac97dd 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,3 +1,30 @@
+@mixin flat-connector-before($length: 44px) {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 48%;
+    left: -$length;
+    border-top: 2px solid $border-color;
+    width: $length;
+    height: 1px;
+  }
+}
+
+@mixin build-content($border-radius: 30px) {
+  display: inline-block;
+  padding: 8px 10px 9px;
+  width: 100%;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  background-color: $white-light;
+
+  &:hover {
+    background-color: $stage-hover-bg;
+    border: 1px solid $dropdown-toggle-active-border-color;
+    color: $gl-text-color;
+  }
+}
+
 .pipelines {
   .stage {
     max-width: 90px;
@@ -9,16 +36,21 @@
   }
 
   .table-holder {
+    overflow: unset;
     width: 100%;
   }
 
   .commit-title {
     margin: 0;
+    white-space: normal;
+
+    @include media-breakpoint-down(sm) {
+      justify-content: flex-end;
+    }
   }
 
   .ci-table {
-
-    .label {
+    .badge {
       margin-bottom: 3px;
     }
 
@@ -62,13 +94,9 @@
         }
       }
 
-      .btn-group {
-        &.open {
-          .btn-default {
-            background-color: $white-normal;
-            border-color: $border-white-normal;
-          }
-        }
+      .btn-group.open .btn-default {
+        background-color: $white-normal;
+        border-color: $border-white-normal;
       }
 
       .btn .text-center {
@@ -82,7 +110,7 @@
   }
 }
 
-@media (max-width: $screen-md-max) {
+@include media-breakpoint-down(md) {
   .content-list {
     &.builds-content-list {
       width: 100%;
@@ -118,7 +146,6 @@
   }
 
   .branch-commit {
-
     .ref-name {
       font-weight: $gl-font-weight-bold;
       max-width: 100px;
@@ -151,14 +178,14 @@
       color: $gl-link-color;
     }
 
-    .label {
+    .badge {
       margin-right: 4px;
     }
 
     .label-container {
       font-size: 0;
 
-      .label {
+      .badge {
         margin-top: 5px;
       }
     }
@@ -227,7 +254,7 @@
 
 .stage-cell {
   &.table-section {
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up(md) {
       min-width: 160px; /* Hack alert: Without this the mini graph pipeline won't work properly*/
       margin-right: -4px;
     }
@@ -295,18 +322,17 @@
 }
 
 .build-failures {
+  th {
+    border-top: 0;
+  }
+
   .build-state {
     padding: 20px 2px;
 
     .build-name {
-      float: right;
       font-weight: $gl-font-weight-normal;
     }
 
-    .ci-status-icon-failed svg {
-      vertical-align: middle;
-    }
-
     .stage {
       color: $gl-text-color-secondary;
       font-weight: $gl-font-weight-normal;
@@ -318,6 +344,81 @@
     border: 0;
     line-height: initial;
   }
+
+  .build-trace-row td {
+    border-top: 0;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    padding-top: 0;
+  }
+
+  .build-trace {
+    width: 100%;
+    text-align: left;
+    margin-top: $gl-padding;
+  }
+
+  .build-name {
+    width: 196px;
+
+    a {
+      font-weight: $gl-font-weight-bold;
+      color: $gl-text-color;
+      text-decoration: none;
+
+      &:focus,
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .build-actions {
+    width: 70px;
+    text-align: right;
+  }
+
+  .build-stage {
+    width: 140px;
+  }
+
+  .ci-status-icon-failed {
+    padding: 10px 0 10px 12px;
+    width: 12px + 24px; // padding-left + svg width
+  }
+
+  .build-icon svg {
+    width: 24px;
+    height: 24px;
+    vertical-align: middle;
+  }
+
+  .build-state,
+  .build-trace-row {
+    > td:last-child {
+      padding-right: 0;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    td:empty {
+      display: none;
+    }
+
+    .ci-table {
+      margin-top: 2 * $gl-padding;
+    }
+
+    .build-trace-container {
+      padding-top: $gl-padding;
+      padding-bottom: $gl-padding;
+    }
+
+    .build-trace {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+  }
 }
 
 .pipeline-tab-content {
@@ -344,7 +445,6 @@
 
   svg {
     vertical-align: middle;
-    margin-right: 3px;
   }
 
   .stage-column {
@@ -360,15 +460,7 @@
         margin-left: 44px;
 
         .left-connector {
-          &::before {
-            content: '';
-            position: absolute;
-            top: 48%;
-            left: -44px;
-            border-top: 2px solid $border-color;
-            width: 44px;
-            height: 1px;
-          }
+          @include flat-connector-before;
         }
       }
     }
@@ -384,22 +476,16 @@
     &:last-child {
       .build {
         // Remove right connecting horizontal line from first build in last stage
-        &:first-child {
-          &::after {
-            border: 0;
-          }
+        &:first-child::after {
+          border: 0;
         }
         // Remove right curved connectors from all builds in last stage
-        &:not(:first-child) {
-          &::after {
-            border: 0;
-          }
+        &:not(:first-child)::after {
+          border: 0;
         }
         // Remove opposite curve
-        .curve {
-          &::before {
-            display: none;
-          }
+        .curve::before {
+          display: none;
         }
       }
     }
@@ -407,16 +493,12 @@
     &:first-child {
       .build {
         // Remove left curved connectors from all builds in first stage
-        &:not(:first-child) {
-          &::before {
-            border: 0;
-          }
+        &:not(:first-child)::before {
+          border: 0;
         }
         // Remove opposite curve
-        .curve {
-          &::after {
-            display: none;
-          }
+        .curve::after {
+          display: none;
         }
       }
     }
@@ -464,53 +546,19 @@
     margin-bottom: 10px;
     white-space: normal;
 
+    .ci-job-dropdown-container {
+      // override dropdown.scss
+      .dropdown-menu li button {
+        padding: 0;
+        text-align: center;
+      }
+    }
+
     // ensure .build-content has hover style when action-icon is hovered
     .ci-job-dropdown-container:hover .build-content {
       @extend .build-content:hover;
     }
 
-    .ci-action-icon-container {
-      position: absolute;
-      right: 5px;
-      top: 5px;
-
-      // Action Icons in big pipeline-graph nodes
-      &.ci-action-icon-wrapper {
-        height: 30px;
-        width: 30px;
-        background: $white-light;
-        border: 1px solid $border-color;
-        border-radius: 100%;
-        display: block;
-
-        &:hover {
-          background-color: $stage-hover-bg;
-          border: 1px solid $dropdown-toggle-active-border-color;
-
-          svg {
-            fill: $gl-text-color;
-          }
-        }
-
-        svg {
-          fill: $gl-text-color-secondary;
-          position: relative;
-          left: 5px;
-          top: 2px;
-          width: 18px;
-          height: 18px;
-        }
-
-        &.play {
-          svg {
-            width: #{$ci-action-icon-size - 8};
-            height: #{$ci-action-icon-size - 8};
-            left: 8px;
-          }
-        }
-      }
-    }
-
     .ci-status-icon svg {
       height: 20px;
       width: 20px;
@@ -527,12 +575,7 @@
     }
 
     .build-content {
-      display: inline-block;
-      padding: 8px 10px 9px;
-      width: 100%;
-      border: 1px solid $border-color;
-      border-radius: 30px;
-      background-color: $white-light;
+      @include build-content();
     }
 
     a.build-content:hover,
@@ -541,7 +584,6 @@
       border: 1px solid $dropdown-toggle-active-border-color;
     }
 
-
     // Connect first build in each stage with right horizontal line
     &:first-child {
       &::after {
@@ -595,6 +637,43 @@
       }
     }
   }
+
+  .ci-action-icon-container {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+
+    // Action Icons in big pipeline-graph nodes
+    &.ci-action-icon-wrapper {
+      height: 30px;
+      width: 30px;
+      background: $white-light;
+      border: 1px solid $border-color;
+      border-radius: 100%;
+      display: block;
+
+      &:hover {
+        background-color: $stage-hover-bg;
+        border: 1px solid $dropdown-toggle-active-border-color;
+
+        svg {
+          fill: $gl-text-color;
+        }
+      }
+
+      svg {
+        fill: $gl-text-color-secondary;
+        position: relative;
+        top: -1px;
+      }
+
+      &.play {
+        svg {
+          left: 2px;
+        }
+      }
+    }
+  }
 }
 
 // Triggers the dropdown in the big pipeline graph
@@ -634,8 +713,7 @@
   }
 }
 
-// Dropdown button in mini pipeline graph
-button.mini-pipeline-graph-dropdown-toggle {
+@mixin mini-pipeline-item() {
   border-radius: 100px;
   background-color: $white-light;
   border-width: 1px;
@@ -648,30 +726,6 @@ button.mini-pipeline-graph-dropdown-toggle {
   position: relative;
   vertical-align: middle;
 
-  > .fa.fa-caret-down {
-    position: absolute;
-    left: 20px;
-    top: 5px;
-    display: inline-block;
-    visibility: hidden;
-    opacity: 0;
-    color: inherit;
-    font-size: 12px;
-    transition: visibility 0.1s, opacity 0.1s linear;
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    outline: none;
-    width: 35px;
-
-    .fa.fa-caret-down {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
     @include mini-pipeline-graph-color($green-100, $green-500, $green-600);
@@ -703,93 +757,106 @@ button.mini-pipeline-graph-dropdown-toggle {
   }
 }
 
-// dropdown content for big and mini pipeline
+// Dropdown button in mini pipeline graph
+button.mini-pipeline-graph-dropdown-toggle {
+  @include mini-pipeline-item();
+
+  > .fa.fa-caret-down {
+    position: absolute;
+    left: 20px;
+    top: 5px;
+    display: inline-block;
+    visibility: hidden;
+    opacity: 0;
+    color: inherit;
+    font-size: 12px;
+    transition: visibility 0.1s, opacity 0.1s linear;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    outline: none;
+    width: 35px;
+
+    .fa.fa-caret-down {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}
+
+/**
+ Action icons inside dropdowns:
+ - mini graph in pipelines table
+ - dropdown in big graph
+ - mini graph in MR widget pipeline
+ - mini graph in Commit widget pipeline
+*/
 .big-pipeline-graph-dropdown-menu,
 .mini-pipeline-graph-dropdown-menu {
-  width: 195px;
-  max-width: 195px;
+  width: 240px;
+  max-width: 240px;
 
-  .scrollable-menu {
+  // override dropdown.scss
+  &.dropdown-menu li button,
+  &.dropdown-menu li a.ci-action-icon-container {
     padding: 0;
-    max-height: 245px;
-    overflow: auto;
+    text-align: center;
   }
 
-  li {
-    position: relative;
+  .ci-action-icon-container {
+    position: absolute;
+    right: 8px;
+    top: 8px;
 
-    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
-    &:hover > .mini-pipeline-graph-dropdown-item,
-    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
-      @extend .mini-pipeline-graph-dropdown-item:hover;
-    }
+    &.ci-action-icon-wrapper {
+      height: $ci-action-dropdown-button-size;
+      width: $ci-action-dropdown-button-size;
 
-    // Action icon on the right
-    a.ci-action-icon-wrapper {
-      border-radius: 50%;
+      background: $white-light;
       border: 1px solid $border-color;
-      width: $ci-action-icon-size;
-      height: $ci-action-icon-size;
-      padding: 2px 0 0 5px;
-      font-size: 12px;
-      background-color: $white-light;
-      position: absolute;
-      top: 50%;
-      right: $gl-padding;
-      margin-top: -#{$ci-action-icon-size / 2};
+      border-radius: 50%;
+      display: block;
 
-      &:hover,
-      &:focus {
+      &:hover {
         background-color: $stage-hover-bg;
         border: 1px solid $dropdown-toggle-active-border-color;
+
+        svg {
+          fill: $gl-text-color;
+        }
       }
 
       svg {
+        width: $ci-action-dropdown-svg-size;
+        height: $ci-action-dropdown-svg-size;
         fill: $gl-text-color-secondary;
-        width: #{$ci-action-icon-size - 6};
-        height: #{$ci-action-icon-size - 6};
-        left: -3px;
         position: relative;
-        top: -2px;
-
-        &.icon-action-stop,
-        &.icon-action-cancel {
-          width: 12px;
-          height: 12px;
-          top: 1px;
-          left: -1px;
-        }
-
-        &.icon-action-play {
-          width: 11px;
-          height: 11px;
-          top: 1px;
-          left: 1px;
-        }
-
-        &.icon-action-retry {
-          width: 16px;
-          height: 16px;
-          top: 0;
-          left: -3px;
-        }
+        top: 0;
+        vertical-align: initial;
       }
+    }
+  }
 
-      &:hover svg,
-      &:focus svg {
-        fill: $gl-text-color;
-      }
+  // SVGs in the commit widget and mr widget
+  a.ci-action-icon-container.ci-action-icon-wrapper svg {
+    top: 2px;
+  }
 
-      &.icon-action-retry,
-      &.icon-action-play {
-        svg {
-          width: #{$ci-action-icon-size - 6};
-          height: #{$ci-action-icon-size - 6};
-          left: 8px;
-        }
-      }
+  .scrollable-menu {
+    padding: 0;
+    max-height: 245px;
+    overflow: auto;
+  }
 
+  li {
+    position: relative;
 
+    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
+    &:hover > .mini-pipeline-graph-dropdown-item,
+    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
+      @extend .mini-pipeline-graph-dropdown-item:hover;
     }
 
     // link to the build
@@ -801,6 +868,11 @@ button.mini-pipeline-graph-dropdown-toggle {
       line-height: $line-height-base;
       white-space: nowrap;
 
+      // Match dropdown.scss for all `a` tags
+      &.non-details-job-component {
+        padding: 8px 16px;
+      }
+
       .ci-job-name-component {
         align-items: center;
         display: flex;
@@ -823,7 +895,7 @@ button.mini-pipeline-graph-dropdown-toggle {
           display: block;
         }
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           max-width: 60%;
         }
       }
@@ -910,7 +982,7 @@ button.mini-pipeline-graph-dropdown-toggle {
     transform: translate(-50%, 0);
     border-width: 0 5px 6px;
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       left: 100%;
       margin-left: -12px;
     }
@@ -929,15 +1001,13 @@ button.mini-pipeline-graph-dropdown-toggle {
   /**
    * Center dropdown menu in mini graph
    */
-  &.dropdown-menu {
+  .dropdown &.dropdown-menu {
     transform: translate(-80%, 0);
-    min-width: 150px;
 
-    @media(min-width: $screen-md-min) {
+    @media (min-width: map-get($grid-breakpoints, md)) {
       transform: translate(-50%, 0);
       right: auto;
       left: 50%;
-      min-width: 240px;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index ac745019319..5d0d59e12f2 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -5,7 +5,7 @@
 }
 
 .avatar-image {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     float: left;
     margin-bottom: 0;
   }
@@ -119,7 +119,7 @@
 
 .key-list-item {
   .key-list-item-info {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       float: left;
     }
   }
@@ -188,7 +188,7 @@
   .modal-dialog {
     width: 380px;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: auto;
     }
 
@@ -210,13 +210,8 @@
 }
 
 .created-personal-access-token-container {
-  #created-personal-access-token {
-    width: 90%;
-    display: inline;
-  }
-
   .btn-clipboard {
-    margin-left: 5px;
+    border: 1px solid $border-color;
   }
 }
 
@@ -247,7 +242,7 @@
     left: 0;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .cover-block {
       padding-top: 20px;
     }
@@ -357,7 +352,7 @@ table.u2f-registrations {
     }
   }
 
-  @media(max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     text-align: center;
 
     .bordered-box {
@@ -410,7 +405,7 @@ table.u2f-registrations {
     margin-right: $gl-padding / 4;
   }
 
-  .label-verification-status {
+  .badge-verification-status {
     border-width: 1px;
     border-style: solid;
 
@@ -419,7 +414,7 @@ table.u2f-registrations {
     }
 
     &.unverified {
-      @include status-color($gray-dark, $gray, $common-gray-dark);
+      @include status-color($gray-dark, color("gray"), $common-gray-dark);
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index 68d40b56133..a353f301d07 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -1,25 +1,3 @@
-@mixin application-theme-preview($color-1, $color-2, $color-3, $color-4) {
-  .one {
-    background-color: $color-1;
-    border-top-left-radius: $border-radius-default;
-  }
-
-  .two {
-    background-color: $color-2;
-    border-top-right-radius: $border-radius-default;
-  }
-
-  .three {
-    background-color: $color-3;
-    border-bottom-left-radius: $border-radius-default;
-  }
-
-  .four {
-    background-color: $color-4;
-    border-bottom-right-radius: $border-radius-default;
-  }
-}
-
 .multi-file-editor-options {
   label {
     margin-right: 20px;
@@ -38,49 +16,67 @@
 
 .application-theme {
   label {
-    margin-right: 20px;
+    margin: 0 $gl-padding-32 $gl-padding 0;
     text-align: center;
   }
 
   .preview {
     font-size: 0;
-    margin-bottom: 10px;
+    height: 48px;
+    border-radius: 4px;
+    min-width: 112px;
+    margin-bottom: $gl-padding-8;
+
+    &.ui-indigo {
+      background-color: $indigo-900;
+    }
 
-    &.indigo {
-      @include application-theme-preview($indigo-900, $indigo-700, $indigo-800, $indigo-500);
+    &.ui-light-indigo {
+      background-color: $indigo-700;
     }
 
-    &.dark {
-      @include application-theme-preview($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-600);
+    &.ui-blue {
+      background-color: $theme-blue-900;
     }
 
-    &.light {
-      @include application-theme-preview($theme-gray-600, $theme-gray-200, $theme-gray-400, $theme-gray-100);
+    &.ui-light-blue {
+      background-color: $theme-light-blue-700;
     }
 
-    &.blue {
-      @include application-theme-preview($theme-blue-900, $theme-blue-700, $theme-blue-800, $theme-blue-500);
+    &.ui-green {
+      background-color: $theme-green-900;
     }
 
-    &.green {
-      @include application-theme-preview($theme-green-900, $theme-green-700, $theme-green-800, $theme-green-500);
+    &.ui-light-green {
+      background-color: $theme-light-green-700;
+    }
+
+    &.ui-red {
+      background-color: $theme-red-900;
+    }
+
+    &.ui-light-red {
+      background-color: $theme-light-red-700;
+    }
+
+    &.ui-dark {
+      background-color: $theme-gray-900;
+    }
+
+    &.ui-light {
+      background-color: $theme-gray-200;
     }
   }
 
   .preview-row {
     display: block;
   }
-
-  .quadrant {
-    display: inline-block;
-    height: 50px;
-    width: 80px;
-  }
 }
 
 .syntax-theme {
   label {
-    margin-right: 20px;
+    margin-right: $gl-padding-32;
+    margin-bottom: $gl-padding;
     text-align: center;
 
     .preview {
@@ -89,7 +85,6 @@
 
       img {
         border-radius: 4px;
-
         max-width: 100%;
       }
     }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 584b0579b72..aa83e5bdebc 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -9,7 +9,7 @@
 .new_project,
 .edit-project,
 .import-project {
-  .help-block {
+  .form-text.text-muted {
     margin-bottom: 10px;
   }
 
@@ -34,7 +34,7 @@
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .input-group > div {
       &:last-child {
         margin-bottom: 0;
@@ -46,7 +46,8 @@
     }
   }
 
-  .input-group-addon {
+  .input-group-prepend,
+  .input-group-append {
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: unset;
@@ -82,7 +83,7 @@
   border: 1px solid $border-color;
   padding: 10px 32px;
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     padding: 10px 20px;
   }
 }
@@ -134,7 +135,7 @@
     max-width: 400px;
   }
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     padding-left: 20px;
   }
 }
@@ -144,7 +145,7 @@
   padding-top: 24px;
   padding-bottom: 24px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     border-bottom: 1px solid $border-color;
   }
 
@@ -205,7 +206,6 @@
 .project-repo-buttons,
 .group-buttons {
   .btn {
-    @include btn-gray;
     padding: 3px 10px;
 
     &:last-child {
@@ -231,11 +231,11 @@
   }
 
   .notification-dropdown .dropdown-menu {
-    @extend .dropdown-menu-align-right;
+    @extend .dropdown-menu-right;
   }
 
   .download-button {
-    @media (max-width: $screen-md-max) {
+    @include media-breakpoint-down(md) {
       margin-left: 0;
     }
   }
@@ -294,7 +294,7 @@
     }
 
     .count {
-      @include btn-gray;
+      @include btn-white;
       display: inline-block;
       background: $white-light;
       border-radius: 2px;
@@ -354,30 +354,42 @@
   min-width: 200px;
 }
 
-.deploy-key-content {
-  @media (min-width: $screen-sm-min) {
-    float: left;
+.deploy-key {
+  // Ensure that the fingerprint does not overflow on small screens
+  .fingerprint {
+    word-break: break-all;
+    white-space: normal;
+  }
 
-    &:last-child {
-      float: right;
+  .deploy-project-label,
+  .key-created-at {
+    svg {
+      vertical-align: text-top;
     }
   }
-}
 
-.deploy-key-projects {
-  @media (min-width: $screen-sm-min) {
-    line-height: 42px;
+  .btn svg {
+    vertical-align: top;
+  }
+
+  .key-created-at {
+    line-height: unset;
   }
 }
 
-a.deploy-project-label {
-  padding: 5px;
-  margin-right: 5px;
-  color: $gl-text-color;
-  background-color: $row-hover;
+.deploy-project-list {
+  margin-bottom: -$gl-padding-4;
 
-  &:hover {
-    color: $gl-link-color;
+  a.deploy-project-label {
+    margin-right: $gl-padding-4;
+    margin-bottom: $gl-padding-4;
+    color: $gl-text-color-secondary;
+    background-color: $theme-gray-100;
+    line-height: $gl-btn-line-height;
+
+    &:hover {
+      color: $gl-link-color;
+    }
   }
 }
 
@@ -427,11 +439,11 @@ a.deploy-project-label {
   height: 200px;
   width: calc((100% / 2) - #{$gl-padding * 2});
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     width: calc((100% / 4) - #{$gl-padding * 2});
   }
 
-  @media (min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     width: calc((100% / 5) - #{$gl-padding * 2});
   }
 
@@ -485,6 +497,12 @@ a.deploy-project-label {
     &:not(:first-child) {
       border-top: 1px solid $border-color;
     }
+
+    .btn-template-icon {
+      position: absolute;
+      left: $gl-padding;
+      top: $gl-padding;
+    }
   }
 
   .template-title {
@@ -502,12 +520,6 @@ a.deploy-project-label {
     }
   }
 
-  svg {
-    position: absolute;
-    left: $gl-padding;
-    top: $gl-padding;
-  }
-
   .project-fields-form {
     display: none;
 
@@ -518,33 +530,23 @@ a.deploy-project-label {
   }
 
   .template-input-group {
-    position: relative;
-
-    @media (min-width: $screen-sm-min) {
-      display: flex;
-    }
-
-    .input-group-addon {
+    .input-group-prepend {
       flex: 1;
-      text-align: left;
-      padding-left: ($gl-padding * 3);
-      background-color: $white-light;
     }
 
-    .selected-template {
-      line-height: 20px;
+    .input-group-text {
+      width: 100%;
+      background-color: $white-light;
     }
 
     .selected-icon {
+      padding-right: $gl-padding;
+
       svg {
         display: none;
         top: 7px;
         height: 20px;
         width: 20px;
-
-        &.active {
-          display: block;
-        }
       }
     }
   }
@@ -584,12 +586,12 @@ a.deploy-project-label {
       margin: 0 auto 4px;
       font-size: 24px;
 
-      @media (min-width: $screen-xs-max) {
+      @media (min-width: map-get($grid-breakpoints, sm)-1) {
         top: 0;
       }
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       .btn-template-icon {
         display: inline-block;
         height: 14px;
@@ -608,31 +610,31 @@ a.deploy-project-label {
 .create-project-options {
   display: flex;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
   }
 
   .first-column {
-    @media (min-width: $screen-xs-min) {
+    @include media-breakpoint-up(xs) {
       max-width: 50%;
       padding-right: 30px;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       max-width: 100%;
       width: 100%;
     }
   }
 
   .second-column {
-    @media (min-width: $screen-xs-min) {
+    @include media-breakpoint-up(xs) {
       width: 50%;
       flex: 1;
       padding-left: 30px;
       position: relative;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       max-width: 100%;
       width: 100%;
       padding-left: 0;
@@ -640,7 +642,7 @@ a.deploy-project-label {
     }
 
     // Mobile
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       padding-top: 30px;
     }
 
@@ -660,7 +662,7 @@ a.deploy-project-label {
       line-height: 20px;
 
       // Mobile
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         left: 50%;
         top: 0;
         transform: translateX(-50%);
@@ -680,7 +682,7 @@ a.deploy-project-label {
       top: 0;
 
       // Mobile
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         top: 10px;
         left: 10px;
         right: 10px;
@@ -718,7 +720,7 @@ a.deploy-project-label {
         vertical-align: top;
         margin-top: 0;
 
-        @media (min-width: $screen-lg-min) {
+        @include media-breakpoint-up(lg) {
           float: right;
         }
       }
@@ -849,17 +851,11 @@ pre.light-well {
   }
 }
 
-.panel .projects-list li {
+.card .projects-list li {
   padding: 10px 15px;
   margin: 0;
 }
 
-.commits-search-form {
-  .input-short {
-    min-width: 200px;
-  }
-}
-
 .git-clone-holder {
   width: 380px;
 
@@ -877,11 +873,11 @@ pre.light-well {
 
   .form-control {
     @extend .monospace;
-    background: $white-light;
+    background-color: $white-light;
+    border-color: $border-color;
     font-size: 14px;
     margin-left: -1px;
     cursor: auto;
-    width: 101%;
   }
 }
 
@@ -910,7 +906,8 @@ pre.light-well {
 }
 
 .project-tip-command {
-  > .input-group-btn:first-child {
+  > .input-group-prepend:first-child,
+  > .input-group-append:first-child {
     width: auto;
   }
 }
@@ -935,11 +932,6 @@ pre.light-well {
     }
   }
 
-  .dropdown-menu-toggle {
-    width: 100%;
-    max-width: 300px;
-  }
-
   .flash-container {
     padding: 0;
   }
@@ -966,7 +958,7 @@ pre.light-well {
 .dropdown-menu-projects {
   width: 300px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: 500px;
   }
 
@@ -980,7 +972,7 @@ pre.light-well {
   .inline-input-group {
     width: 100%;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: 300px;
     }
   }
@@ -991,8 +983,8 @@ pre.light-well {
     text-align: center;
     margin-top: -20px;
 
-    @media (min-width: $screen-sm-min) {
-      margin-top: 0;
+    @include media-breakpoint-up(sm) {
+      margin: 0 $gl-padding-8;
       width: auto;
     }
   }
@@ -1030,7 +1022,7 @@ pre.light-well {
   }
 
   &.form-group {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-bottom: 0;
     }
   }
@@ -1058,12 +1050,12 @@ pre.light-well {
 .project-feature {
   padding-top: 10px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-left: 45px;
   }
 
   &.nested {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       padding-left: 90px;
     }
   }
@@ -1121,3 +1113,33 @@ pre.light-well {
   padding-top: $gl-padding;
   padding-bottom: 37px;
 }
+
+.project-ci-body {
+  .incorrect-syntax {
+    font-size: 18px;
+    color: $lint-incorrect-color;
+  }
+
+  .correct-syntax {
+    font-size: 18px;
+    color: $lint-correct-color;
+  }
+}
+
+.project-ci-linter {
+  .ci-editor {
+    height: 400px;
+  }
+
+  .ci-template pre {
+    white-space: pre-wrap;
+  }
+}
+
+.project-badge {
+  opacity: 0.9;
+
+  &:hover {
+    opacity: 1;
+  }
+}
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 7a8fbfc517d..3c24aaa65e8 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -17,12 +17,13 @@
 }
 
 .ide-view {
+  position: relative;
   display: flex;
   height: calc(100vh - #{$header-height});
-  margin-top: 40px;
-  color: $almost-black;
+  margin-top: 0;
   border-top: 1px solid $white-dark;
-  border-bottom: 1px solid $white-dark;
+  padding-bottom: $ide-statusbar-height;
+  color: $gl-text-color;
 
   &.is-collapsed {
     .ide-file-list {
@@ -38,18 +39,25 @@
 
 .ide-file-list {
   flex: 1;
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
+  padding-bottom: $grid-size;
 
   .file {
     cursor: pointer;
 
-    &.file-open {
-      background: $white-normal;
+    &.file-active {
+      background: $theme-gray-100;
     }
 
     .ide-file-name {
       flex: 1;
       white-space: nowrap;
       text-overflow: ellipsis;
+      max-width: inherit;
+      line-height: 16px;
+      display: inline-block;
+      height: 18px;
 
       svg {
         vertical-align: middle;
@@ -62,26 +70,36 @@
       }
     }
 
+    .ide-file-icon-holder {
+      display: flex;
+      align-items: center;
+    }
+
     .ide-file-changed-icon {
       margin-left: auto;
+
+      > svg {
+        display: block;
+      }
     }
 
     .ide-new-btn {
       display: none;
-      margin-bottom: -4px;
-      margin-right: -8px;
+
+      .btn {
+        padding: 2px 5px;
+      }
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       .ide-new-btn {
         display: block;
       }
     }
 
-    &.folder {
-      svg {
-        fill: $gl-text-color-secondary;
-      }
+    .folder-icon {
+      fill: $gl-text-color-secondary;
     }
   }
 
@@ -95,24 +113,16 @@
   }
 }
 
-.file-name,
-.file-col-commit-message {
+.file-name {
   display: flex;
   overflow: visible;
-  padding: 6px 12px;
+  align-items: center;
+  width: 100%;
 }
 
 .multi-file-loading-container {
   margin-top: 10px;
   padding: 10px;
-
-  .animation-container {
-    background: $gray-light;
-
-    div {
-      background: $gray-light;
-    }
-  }
 }
 
 .multi-file-table-col-commit-message {
@@ -139,69 +149,56 @@
   }
 
   li {
-    position: relative;
-  }
-
-  .dropdown {
     display: flex;
-    margin-left: auto;
-    margin-bottom: 1px;
-    padding: 0 $grid-size;
-    border-left: 1px solid $white-dark;
-    background-color: $white-light;
-
-    &.shadow {
-      box-shadow: 0 0 10px $dropdown-shadow-color;
-    }
+    align-items: center;
+    padding: $grid-size $gl-padding;
+    background-color: $gray-normal;
+    border-right: 1px solid $white-dark;
+    border-bottom: 1px solid $white-dark;
 
-    .btn {
-      margin-top: auto;
-      margin-bottom: auto;
+    &.active {
+      background-color: $white-light;
+      border-bottom-color: $white-light;
     }
   }
 }
 
 .multi-file-tab {
-  @include str-truncated(150px);
-  padding: ($gl-padding / 2) ($gl-padding + 12) ($gl-padding / 2) $gl-padding;
-  background-color: $gray-normal;
-  border-right: 1px solid $white-dark;
-  border-bottom: 1px solid $white-dark;
+  @include str-truncated(141px);
   cursor: pointer;
 
   svg {
     vertical-align: middle;
   }
-
-  &.active {
-    background-color: $white-light;
-    border-bottom-color: $white-light;
-  }
 }
 
 .multi-file-tab-close {
-  position: absolute;
-  right: 8px;
-  top: 50%;
   width: 16px;
   height: 16px;
   padding: 0;
+  margin-left: $grid-size;
   background: none;
   border: 0;
   border-radius: $border-radius-default;
   color: $theme-gray-900;
-  transform: translateY(-50%);
 
   svg {
     position: relative;
-    top: -1px;
+    top: -2px;
   }
 
-  &:hover {
+  .ide-file-changed-icon {
+    display: block;
+    position: relative;
+    top: 1px;
+    right: -2px;
+  }
+
+  &:not([disabled]):hover {
     background-color: $theme-gray-200;
   }
 
-  &:focus {
+  &:not([disabled]):focus {
     background-color: $blue-500;
     color: $white-light;
     outline: 0;
@@ -232,6 +229,17 @@
     display: none;
   }
 
+  .is-readonly,
+  .editor.original {
+    .view-lines {
+      cursor: default;
+    }
+
+    .cursors-layer {
+      display: none;
+    }
+  }
+
   .monaco-diff-editor.vs {
     .editor.modified {
       box-shadow: none;
@@ -274,8 +282,8 @@
     }
 
     .margin {
-      background-color: $gray-light;
-      border-right: 1px solid $white-normal;
+      background-color: $white-light;
+      border-right: 1px solid $theme-gray-100;
 
       .line-insert {
         border-right: 1px solid $line-added-dark;
@@ -295,26 +303,126 @@
 
 .multi-file-editor-holder {
   height: 100%;
+  min-height: 0;
+
+  &.is-readonly,
+  .editor.original {
+    .monaco-editor,
+    .monaco-editor-background,
+    .monaco-editor .inputarea.ime-input {
+      background-color: $theme-gray-50;
+    }
+  }
 }
 
-.multi-file-editor-btn-group {
-  padding: $gl-bar-padding $gl-padding;
-  border-top: 1px solid $white-dark;
+.preview-container {
+  flex-grow: 1;
+  position: relative;
+
+  .md-previewer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    padding: $gl-padding;
+  }
+
+  .file-container {
+    background-color: $gray-darker;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+
+    text-align: center;
+
+    .file-content {
+      padding: $gl-padding;
+      max-width: 100%;
+      max-height: 100%;
+
+      img {
+        max-width: 90%;
+      }
+
+      .isZoomable {
+        cursor: pointer;
+        cursor: zoom-in;
+
+        &.isZoomed {
+          cursor: pointer;
+          cursor: zoom-out;
+          max-width: none;
+          max-height: none;
+          margin-right: $gl-padding;
+        }
+      }
+    }
+
+    .file-info {
+      font-size: $label-font-size;
+      color: $diff-image-info-color;
+    }
+  }
+}
+
+.ide-mode-tabs {
   border-bottom: 1px solid $white-dark;
-  background: $white-light;
+
+  .nav-links {
+    border-bottom: 0;
+
+    li a {
+      padding: $gl-padding-8 $gl-padding;
+      line-height: $gl-btn-line-height;
+    }
+  }
+}
+
+.ide-btn-group {
+  padding: $gl-padding-4 $gl-vert-padding;
+  line-height: 24px;
 }
 
 .ide-status-bar {
-  padding: $gl-bar-padding $gl-padding;
+  border-top: 1px solid $white-dark;
+  padding: 2px $gl-padding-8 0;
   background: $white-light;
   display: flex;
   justify-content: space-between;
+  height: $ide-statusbar-height;
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+
+  font-size: 12px;
+  line-height: 22px;
+
+  * {
+    font-size: inherit;
+  }
+
+  > div + div {
+    padding-left: $gl-padding;
+  }
 
   svg {
-    vertical-align: middle;
+    vertical-align: sub;
   }
 }
 
+.ide-status-file {
+  text-align: right;
+
+  .ide-status-branch + &,
+  &:first-child {
+    margin-left: auto;
+  }
+}
 // Not great, but this is to deal with our current output
 .multi-file-preview-holder {
   height: 100%;
@@ -350,26 +458,35 @@
 .multi-file-commit-panel {
   display: flex;
   position: relative;
-  flex-direction: column;
   width: 340px;
   padding: 0;
   background-color: $gray-light;
-  padding-right: 3px;
+  padding-right: 1px;
+
+  .context-header {
+    width: auto;
+    margin-right: 0;
+
+    > a,
+    > button {
+      height: 60px;
+    }
+  }
 
   .projects-sidebar {
+    min-height: 0;
     display: flex;
     flex-direction: column;
-
-    .context-header {
-      width: auto;
-      margin-right: 0;
-    }
+    flex: 1;
   }
 
   .multi-file-commit-panel-inner {
+    position: relative;
     display: flex;
-    flex: 1;
     flex-direction: column;
+    height: 100%;
+    min-width: 0;
+    width: 100%;
   }
 
   .multi-file-commit-panel-inner-scroll {
@@ -377,69 +494,10 @@
     flex: 1;
     flex-direction: column;
     overflow: auto;
-  }
-
-  &.is-collapsed {
-    width: 60px;
-
-    .multi-file-commit-list {
-      padding-top: $gl-padding;
-      overflow: hidden;
-    }
-
-    .multi-file-context-bar-icon {
-      align-items: center;
-
-      svg {
-        float: none;
-        margin: 0;
-      }
-    }
-  }
-
-  .branch-container {
-    border-left: 4px solid $indigo-700;
-    margin-bottom: $gl-bar-padding;
-  }
-
-  .branch-header {
-    background: $white-dark;
-    display: flex;
-  }
-
-  .branch-header-title {
-    flex: 1;
-    padding: $grid-size $gl-padding;
-    color: $indigo-700;
-    font-weight: $gl-font-weight-bold;
-
-    svg {
-      vertical-align: middle;
-    }
-  }
-
-  .branch-header-btns {
-    padding: $gl-vert-padding $gl-padding;
-  }
-
-  .left-collapse-btn {
-    display: none;
-    background: $gray-light;
-    text-align: left;
+    background-color: $white-light;
+    border-left: 1px solid $white-dark;
     border-top: 1px solid $white-dark;
-
-    svg {
-      vertical-align: middle;
-    }
-  }
-}
-
-.multi-file-context-bar-icon {
-  padding: 10px;
-
-  svg {
-    margin-right: 10px;
-    float: left;
+    border-top-left-radius: $border-radius-small;
   }
 }
 
@@ -447,98 +505,77 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  max-height: 100%;
+  overflow: auto;
 }
 
-.multi-file-commit-empty-state-container {
-  align-items: center;
-  justify-content: center;
+.ide-commit-empty-state {
+  padding: 0 $gl-padding;
+}
+
+.ide-commit-empty-state-container {
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
 .multi-file-commit-panel-header {
   display: flex;
   align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: 0;
   border-bottom: 1px solid $white-dark;
-  padding: $gl-btn-padding 0;
-
-  &.is-collapsed {
-    border-bottom: 1px solid $white-dark;
-
-    svg {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .multi-file-commit-panel-collapse-btn {
-      margin-right: auto;
-      margin-left: auto;
-      border-left: 0;
-    }
-  }
+  padding: 12px 0;
 }
 
 .multi-file-commit-panel-header-title {
   display: flex;
   flex: 1;
-  padding: 0 $gl-btn-padding;
+  align-items: center;
 
   svg {
     margin-right: $gl-btn-padding;
+    color: $theme-gray-700;
   }
 }
 
 .multi-file-commit-panel-collapse-btn {
   border-left: 1px solid $white-dark;
+  margin-left: auto;
 }
 
 .multi-file-commit-list {
   flex: 1;
   overflow: auto;
-  padding: $gl-padding 0;
+  padding: $grid-size 0;
+  margin-left: -$grid-size;
+  margin-right: -$grid-size;
   min-height: 60px;
-}
 
-.multi-file-commit-list-item {
-  display: flex;
-  padding: 0;
-  align-items: center;
-
-  .multi-file-discard-btn {
-    display: none;
-    margin-left: auto;
-    color: $gl-link-color;
-    padding: 0 2px;
-
-    &:focus,
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  &:hover {
-    background: $white-normal;
-
-    .multi-file-discard-btn {
-      display: block;
-    }
+  &.form-text.text-muted {
+    margin-left: 0;
+    right: 0;
   }
 }
 
-.multi-file-addition {
-  fill: $green-500;
+.multi-file-addition,
+.multi-file-addition-solid {
+  color: $green-500;
 }
 
-.multi-file-modified {
-  fill: $orange-500;
+.multi-file-modified,
+.multi-file-modified-solid {
+  color: $orange-500;
 }
 
 .multi-file-commit-list-collapsed {
   display: flex;
   flex-direction: column;
+  padding: $gl-padding 0;
 
-  > svg {
+  svg {
+    display: block;
     margin-left: auto;
     margin-right: auto;
+    color: $theme-gray-700;
   }
 
   .file-status-icon {
@@ -548,51 +585,88 @@
   }
 }
 
-.multi-file-commit-list-path {
-  padding: $grid-size / 2;
-  padding-left: $gl-padding;
-  background: none;
-  border: 0;
+.multi-file-commit-list-path,
+.ide-file-list .file {
+  display: flex;
+  align-items: center;
+  margin-left: -$grid-size;
+  margin-right: -$grid-size;
+  padding: $grid-size / 2 $grid-size;
+  border-radius: $border-radius-default;
   text-align: left;
-  width: 100%;
-  min-width: 0;
 
-  svg {
-    min-width: 16px;
-    vertical-align: middle;
-    display: inline-block;
+  &:hover,
+  &:focus {
+    background: $theme-gray-100;
+  }
+
+  &:active {
+    background: $theme-gray-200;
+  }
+}
+
+.multi-file-commit-list-path {
+  cursor: pointer;
+
+  &.is-active {
+    background-color: $white-normal;
   }
 
   &:hover,
   &:focus {
     outline: 0;
   }
+
+  svg {
+    min-width: 16px;
+    vertical-align: middle;
+    display: inline-block;
+  }
 }
 
 .multi-file-commit-list-file-path {
-  @include str-truncated(100%);
-
-  &:hover {
-    text-decoration: underline;
-  }
+  @include str-truncated(calc(100% - 30px));
 
   &:active {
     text-decoration: none;
   }
 }
 
+.multi-file-discard-btn {
+  top: 4px;
+  right: 8px;
+  bottom: 4px;
+
+  svg {
+    top: 0;
+  }
+}
+
 .multi-file-commit-form {
-  padding: $gl-padding;
-  border-top: 1px solid $white-dark;
+  position: relative;
+  background-color: $white-light;
+  border-left: 1px solid $white-dark;
+  transition: all 0.3s ease;
+
+  > form,
+  > .commit-form-compact {
+    padding: $gl-padding 0;
+    margin-left: $gl-padding;
+    margin-right: $gl-padding;
+    border-top: 1px solid $white-dark;
+  }
 
   .btn {
     font-size: $gl-font-size;
   }
+
+  .multi-file-commit-panel-success-message {
+    top: 0;
+  }
 }
 
-.multi-file-commit-message.form-control {
-  height: 160px;
-  resize: none;
+.multi-file-commit-panel-bottom {
+  position: relative;
 }
 
 .dirty-diff {
@@ -643,9 +717,17 @@
 }
 
 .ide-new-btn {
+  .btn {
+    padding-top: 3px;
+    padding-bottom: 3px;
+  }
+
+  .dropdown {
+    display: flex;
+  }
+
   .dropdown-toggle svg {
-    margin-top: -2px;
-    margin-bottom: 2px;
+    top: 0;
   }
 
   .dropdown-menu {
@@ -664,8 +746,14 @@
   overflow: hidden;
 
   &.nav-only {
+    padding-top: $header-height;
+
+    .with-performance-bar & {
+      padding-top: $header-height + $performance-bar-height;
+    }
+
     .flash-container {
-      margin-top: $header-height;
+      margin-top: 0;
       margin-bottom: 0;
     }
 
@@ -675,7 +763,7 @@
     }
 
     .content-wrapper {
-      margin-top: $header-height;
+      margin-top: 0;
       padding-bottom: 0;
     }
 
@@ -699,11 +787,11 @@
 
 .with-performance-bar .ide.nav-only {
   .flash-container {
-    margin-top: #{$header-height + $performance-bar-height};
+    margin-top: 0;
   }
 
   .content-wrapper {
-    margin-top: #{$header-height + $performance-bar-height};
+    margin-top: 0;
     padding-bottom: 0;
   }
 
@@ -712,14 +800,8 @@
   }
 
   &.flash-shown {
-    .content-wrapper {
-      margin-top: 0;
-    }
-
     .ide-view {
-      height: calc(
-        100vh - #{$header-height + $performance-bar-height + $flash-height}
-      );
+      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
     }
   }
 }
@@ -728,7 +810,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 3px;
+  width: 1px;
   background-color: $white-dark;
 
   &.dragright {
@@ -740,12 +822,48 @@
   }
 }
 
+.ide-commit-list-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 140px;
+  margin-left: $gl-padding;
+  margin-right: $gl-padding;
+
+  &.is-first {
+    border-bottom: 1px solid $white-dark;
+  }
+}
+
+.ide-staged-action-btn {
+  width: 22px;
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  > svg {
+    top: 0;
+  }
+}
+
+.ide-commit-file-count {
+  min-width: 22px;
+  background-color: $gray-light;
+  border: 1px solid $white-dark;
+}
+
 .ide-commit-radios {
   label {
     font-weight: normal;
+
+    &.is-disabled {
+      .ide-radio-label {
+        text-decoration: line-through;
+      }
+    }
   }
 
-  .help-block {
+  .form-text.text-muted {
     margin-top: 0;
     line-height: 0;
   }
@@ -755,28 +873,459 @@
   margin-left: 25px;
 }
 
-.ide-external-links {
+.ide-sidebar-link {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 60px;
+  width: 100%;
+  padding: 0 $gl-padding;
+  color: $gl-text-color-secondary;
+  background-color: transparent;
+  border: 0;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  outline: 0;
+  cursor: pointer;
+
+  svg {
+    margin: 0 auto;
+  }
+
+  &:hover {
+    color: $gl-text-color;
+    background-color: $theme-gray-100;
+  }
+
+  &:focus {
+    color: $gl-text-color;
+    background-color: $theme-gray-200;
+  }
+
+  &.active {
+    // extend width over border of sidebar section
+    width: calc(100% + 1px);
+    padding-right: $gl-padding + 1px;
+    background-color: $white-light;
+    border-top-color: $white-dark;
+    border-bottom-color: $white-dark;
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: -1px;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background: $white-light;
+    }
+
+    &.is-right {
+      padding-right: $gl-padding;
+      padding-left: $gl-padding + 1px;
+
+      &::after {
+        right: auto;
+        left: -1px;
+      }
+    }
+  }
+}
+
+.ide-activity-bar {
+  position: relative;
+  flex: 0 0 60px;
+  z-index: 1;
+}
+
+.ide-file-finder-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+}
+
+.ide-file-finder {
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  .highlighted {
+    color: $blue-500;
+    font-weight: $gl-font-weight-bold;
+  }
+}
+
+.ide-commit-message-field {
+  height: 200px;
+  background-color: $white-light;
+
+  .md-area {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .nav-links {
+    height: 30px;
+  }
+
+  .form-text.text-muted {
+    margin-top: 2px;
+    color: $blue-500;
+    cursor: pointer;
+  }
+}
+
+.ide-commit-message-textarea-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .note-textarea {
+    font-family: $monospace_font;
+  }
+}
+
+.ide-commit-message-highlights-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: -100px;
+  bottom: 0;
+  padding-right: 100px;
+  pointer-events: none;
+  z-index: 1;
+
+  .highlights {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    color: transparent;
+  }
+
+  mark {
+    margin-left: -1px;
+    padding: 0 2px;
+    border-radius: $border-radius-small;
+    background-color: $orange-200;
+    color: transparent;
+    opacity: 0.6;
+  }
+}
+
+.ide-commit-message-textarea {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background: transparent;
+  resize: none;
+}
+
+.ide-tree-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: 12px 0;
+  border-bottom: 1px solid $white-dark;
+
+  .ide-new-btn {
+    margin-left: auto;
+  }
+}
+
+.ide-sidebar-branch-title {
+  font-weight: $gl-font-weight-normal;
+
+  svg {
+    position: relative;
+    top: 3px;
+    margin-top: -1px;
+  }
+}
+
+.commit-form-compact {
+  .btn {
+    margin-bottom: 8px;
+  }
+
   p {
-    margin: 0;
+    margin-bottom: 0;
   }
 }
 
-.ide-sidebar-link {
-  padding: $gl-padding-8 $gl-padding;
-  background: $indigo-700;
-  color: $white-light;
-  text-decoration: none;
+.commit-form-slide-up-enter-active,
+.commit-form-slide-up-leave-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: all 0.3s ease;
+}
+
+.is-full .commit-form-slide-up-enter,
+.is-compact .commit-form-slide-up-leave-to {
+  transform: translateY(100%);
+}
+
+.is-full .commit-form-slide-up-enter-to,
+.is-compact .commit-form-slide-up-leave {
+  transform: translateY(0);
+}
+
+.commit-form-slide-up-enter,
+.commit-form-slide-up-leave-to {
+  opacity: 0;
+}
+
+.ide-review-header {
+  flex-direction: column;
+  align-items: flex-start;
+
+  .dropdown {
+    margin-left: auto;
+  }
+
+  a {
+    color: $gl-link-color;
+  }
+}
+
+.ide-review-sub-header {
+  color: $gl-text-color-secondary;
+}
+
+.ide-tree-changes {
   display: flex;
   align-items: center;
+  font-size: 12px;
+}
 
-  &:focus,
-  &:hover {
-    color: $white-light;
-    text-decoration: underline;
-    background: $indigo-500;
+.multi-file-commit-panel-success-message {
+  position: absolute;
+  top: 61px;
+  left: 1px;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  background: $white-light;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.ide-review-button-holder {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.ide-context-header {
+  .avatar {
+    flex: 0 0 38px;
   }
 
-  &:active {
-    background: $indigo-800;
+  .ide-merge-requests-dropdown.dropdown-menu {
+    width: 385px;
+    max-height: initial;
+  }
+}
+
+.ide-sidebar-project-title {
+  min-width: 0;
+
+  .sidebar-context-title {
+    white-space: nowrap;
+  }
+
+  .ide-sidebar-branch-title {
+    min-width: 50px;
+  }
+}
+
+.ide-external-link {
+  position: relative;
+
+  svg {
+    display: none;
+    position: absolute;
+    top: 2px;
+    right: -$gl-padding;
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      display: inline-block;
+    }
+  }
+}
+
+.ide-right-sidebar {
+  width: auto;
+  min-width: 60px;
+
+  .ide-activity-bar {
+    border-left: 1px solid $white-dark;
+  }
+
+  .multi-file-commit-panel-inner {
+    width: 350px;
+    padding: $grid-size $gl-padding;
+    background-color: $white-light;
+    border-left: 1px solid $white-dark;
+  }
+}
+
+.ide-pipeline {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-top: -$grid-size;
+  margin-bottom: -$grid-size;
+
+  .empty-state {
+    margin-top: auto;
+    margin-bottom: auto;
+
+    p {
+      margin: $grid-size 0;
+      text-align: center;
+      line-height: 24px;
+    }
+
+    .btn,
+    h4 {
+      margin: 0;
+    }
+  }
+
+  .build-trace,
+  .top-bar {
+    margin-left: -$gl-padding;
+  }
+
+  &.build-page .top-bar {
+    top: 0;
+    font-size: 12px;
+    border-top-right-radius: $border-radius-default;
+  }
+}
+
+.ide-pipeline-list {
+  flex: 1;
+  overflow: auto;
+}
+
+.ide-pipeline-header {
+  min-height: 55px;
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
+
+  .ci-status-icon {
+    display: flex;
+  }
+}
+
+.ide-job-item {
+  display: flex;
+  padding: 16px;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-color;
+  }
+
+  .ci-status-icon {
+    display: flex;
+    justify-content: center;
+    min-width: 24px;
+    overflow: hidden;
+  }
+}
+
+.ide-stage {
+  .card-header {
+    display: flex;
+    cursor: pointer;
+
+    .ci-status-icon {
+      display: flex;
+      align-items: center;
+    }
   }
+
+  .card-body {
+    padding: 0;
+  }
+}
+
+.ide-stage-collapse-icon {
+  margin: auto 0 auto auto;
+}
+
+.ide-stage-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ide-job-header {
+  min-height: 60px;
+}
+
+.ide-merge-requests-dropdown {
+  .nav-links li {
+    width: 50%;
+    padding-left: 0;
+    padding-right: 0;
+
+    a {
+      text-align: center;
+
+      &:not(.active) {
+        background-color: $gray-light;
+      }
+    }
+  }
+
+  .dropdown-input {
+    padding-left: $gl-padding;
+    padding-right: $gl-padding;
+
+    .fa {
+      right: 26px;
+    }
+  }
+
+  .btn-link {
+    padding-top: $gl-padding;
+    padding-bottom: $gl-padding;
+  }
+}
+
+.ide-merge-request-current-icon {
+  min-width: 18px;
+}
+
+.ide-merge-requests-empty {
+  height: 230px;
+}
+
+.ide-merge-requests-dropdown-content {
+  min-height: 230px;
+  max-height: 470px;
+}
+
+.ide-merge-request-project-path {
+  font-size: 12px;
+  line-height: 16px;
+  color: $gl-text-color-secondary;
 }
diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
index 5fb97b13470..2734faec558 100644
--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
@@ -51,7 +51,7 @@
   }
 }
 
-@media (max-width: $screen-md-max) {
+@include media-breakpoint-down(md) {
   .runners-content {
     width: 100%;
     overflow: auto;
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index c9363188505..2d66f336076 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -18,7 +18,8 @@
 .file-finder-input:hover,
 .issuable-search-form:hover,
 .search-text-input:hover,
-.form-control:hover {
+.form-control:hover,
+:not[readonly] {
   border-color: lighten($dropdown-input-focus-border, 20%);
   box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
 }
@@ -28,7 +29,7 @@ input[type="checkbox"]:hover {
 }
 
 .search {
-  margin: 4px 8px 0;
+  margin: 0 8px;
 
   form {
     @extend .form-control;
@@ -47,6 +48,7 @@ input[type="checkbox"]:hover {
   }
 
   .location-badge {
+    white-space: nowrap;
     height: 32px;
     font-size: 12px;
     margin: -4px 4px -4px -4px;
@@ -112,7 +114,7 @@ input[type="checkbox"]:hover {
     }
 
     .dropdown-content {
-      max-height: 350px;
+      max-height: none;
     }
   }
 
@@ -166,7 +168,7 @@ input[type="checkbox"]:hover {
 }
 
 .search-holder {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     display: -webkit-flex;
     display: flex;
   }
@@ -178,7 +180,7 @@ input[type="checkbox"]:hover {
     position: relative;
     margin-right: 0;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-right: 5px;
     }
   }
@@ -202,7 +204,7 @@ input[type="checkbox"]:hover {
     width: 100%;
     margin-top: 5px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: auto;
       margin-top: 0;
       margin-left: 5px;
@@ -210,7 +212,7 @@ input[type="checkbox"]:hover {
   }
 
   .dropdown {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-left: 5px;
       margin-right: 5px;
     }
@@ -220,7 +222,7 @@ input[type="checkbox"]:hover {
     width: 100%;
     margin-top: 5px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: 180px;
       margin-top: 0;
     }
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index a6ca8ed5016..2f28031b9c8 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -52,7 +52,7 @@
 
 .settings-content {
   max-height: 1px;
-  overflow-y: scroll;
+  overflow-y: hidden;
   padding-right: 110px;
   animation: collapseMaxHeight 300ms ease-out;
   // Keep the section from expanding when we scroll over it
@@ -70,7 +70,7 @@
     animation: none;
   }
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     padding-right: 20px;
   }
 
@@ -98,14 +98,10 @@
   }
 
   .bs-callout,
-  .checkbox:first-child,
-  .help-block {
+  .form-check:first-child,
+  .form-text.text-muted {
     margin-top: 0;
   }
-
-  .label-light {
-    margin-bottom: 0;
-  }
 }
 
 .settings-list-icon {
@@ -131,12 +127,9 @@
   color: $gl-danger;
 }
 
-.service-settings .control-label {
-  padding-top: 0;
-}
-
 .integration-settings-form {
-  .well {
+  .card.card-body,
+  .info-well {
     padding: $gl-padding / 2;
     box-shadow: none;
   }
@@ -158,7 +151,7 @@
 }
 
 .visibility-level-setting {
-  .radio {
+  .form-check {
     margin-bottom: 10px;
 
     i.fa {
@@ -174,7 +167,7 @@
 
     .option-description,
     .option-disabled-reason {
-      margin-left: 29px;
+      margin-left: 30px;
       color: $project-option-descr-color;
     }
 
@@ -199,22 +192,22 @@
 }
 
 .prometheus-metrics-monitoring {
-  .panel {
-    .panel-toggle {
+  .card {
+    .card-toggle {
       width: 14px;
     }
 
-    .badge {
+    .badge.badge-pill {
       font-size: 12px;
       line-height: 12px;
     }
 
-    .panel-heading .badge-count {
+    .card-header .label-count {
       color: $white-light;
       background: $common-gray-dark;
     }
 
-    .panel-body {
+    .card-body {
       padding: 0;
     }
 
@@ -249,7 +242,7 @@
     li {
       padding: $gl-padding;
 
-      .badge {
+      .badge.badge-pill {
         margin-left: 5px;
         background: $badge-bg;
       }
@@ -284,3 +277,24 @@
 .deprecated-service {
   cursor: default;
 }
+
+.personal-access-tokens-never-expires-label {
+  color: $note-disabled-comment-color;
+}
+
+.created-deploy-token-container {
+  .deploy-token-field {
+    width: 90%;
+    display: inline;
+  }
+
+  .btn-clipboard {
+    background-color: $white-light;
+    border: 1px solid $theme-gray-200;
+  }
+
+  .deploy-token-help-block {
+    display: block;
+    margin-bottom: 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss
index a355e2dee24..777fdb3581e 100644
--- a/app/assets/stylesheets/pages/settings_ci_cd.scss
+++ b/app/assets/stylesheets/pages/settings_ci_cd.scss
@@ -16,3 +16,12 @@
 .registry-placeholder {
   min-height: 60px;
 }
+
+.auto-devops-card {
+  margin-bottom: $gl-vert-padding;
+
+  > .card-body {
+    border-radius: $card-border-radius;
+    padding: $gl-padding $gl-padding-24;
+  }
+}
diff --git a/app/assets/stylesheets/pages/stat_graph.scss b/app/assets/stylesheets/pages/stat_graph.scss
index 8e2c42c1bd3..3f6f5f06075 100644
--- a/app/assets/stylesheets/pages/stat_graph.scss
+++ b/app/assets/stylesheets/pages/stat_graph.scss
@@ -14,7 +14,10 @@
 }
 
 #contributors-master {
-  @include make-md-column(12);
+  @include media-breakpoint-up(md) {
+    @include make-col-ready();
+    @include make-col(12);
+  }
 
   svg {
     width: 100%;
@@ -33,10 +36,14 @@
   }
 
   .person {
-    @include make-md-column(6);
+    @include media-breakpoint-up(md) {
+      @include make-col-ready();
+      @include make-col(6);
+    }
+
     margin-top: 10px;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
 
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index ade5ddd147b..620297e589d 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -58,7 +58,7 @@
   }
 }
 
-.visible-xs-inline {
+.d-block.d-sm-none-inline {
   .ci-status-link {
     position: relative;
     top: 2px;
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 4b9824fab0c..e5d7dd13915 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -126,7 +126,7 @@
         color: $gl-grayish-blue;
         font-size: $gl-font-size;
 
-        .label {
+        .badge.badge-pill {
           color: $gl-text-color;
         }
 
@@ -162,7 +162,7 @@
   }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(sm) {
   .todos-filters {
     .dropdown-menu-toggle {
       width: 130px;
@@ -174,7 +174,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .todo {
     .avatar {
       display: none;
@@ -214,7 +214,7 @@
   margin-left: auto;
   margin-right: auto;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     -webkit-flex-direction: row;
     flex-direction: row;
     padding-top: 80px;
@@ -233,7 +233,7 @@
   margin-left: auto;
   margin-right: auto;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: 300px;
     margin-right: 0;
     -webkit-order: 2;
@@ -244,7 +244,7 @@
 .todos-all-done {
   padding-top: 20px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-top: 50px;
   }
 
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index e0ee7e9aa3d..efd26cb1f81 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -7,7 +7,7 @@
       color: $gl-text-color-secondary;
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: flex;
 
       .tree-ref-container {
@@ -41,15 +41,10 @@
           position: relative;
         }
       }
-
-      .add-to-tree-dropdown {
-        position: absolute;
-        left: 18px;
-      }
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .repo-breadcrumb {
       margin-top: 10px;
       position: relative;
@@ -121,7 +116,7 @@
           margin-left: 5px;
         }
 
-        @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+        @include media-breakpoint-only(md) {
           @include str-truncated(450px);
         }
 
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index 9a0ec936979..800f5c68e39 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -65,7 +65,7 @@
     display: block;
   }
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     &.has-sidebar-toggle {
       padding-right: 40px;
     }
@@ -81,7 +81,7 @@
     }
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     &.has-sidebar-toggle {
       padding-right: 0;
     }
@@ -180,11 +180,6 @@ ul.wiki-pages-list.content-list {
   }
 }
 
-.wiki-holder {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
 .wiki {
   table {
     @include markdown-table;
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index d69b390ac27..5127ddfde6e 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -1,5 +1,4 @@
 @import 'framework/variables';
-@import 'peek/views/performance_bar';
 @import 'peek/views/rblineprof';
 
 #js-peek {
@@ -15,6 +14,11 @@
   line-height: $performance-bar-height;
   color: $perf-bar-text;
 
+  select {
+    color: $perf-bar-text;
+    width: 200px;
+  }
+
   &.disabled {
     display: none;
   }
@@ -103,12 +107,12 @@
   }
 
   .performance-bar-modal {
-    .modal-footer {
-      display: none;
+    .modal-body {
+      padding: 0;
     }
 
-    .modal-dialog {
-      width: 860px;
+    .modal-footer {
+      display: none;
     }
   }
 }
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index b07a5ae22cd..bb10928a037 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -22,9 +22,9 @@
 
 header,
 nav,
-nav.main-nav,
 nav.navbar-collapse,
 nav.navbar-collapse.collapse,
+.nav-sidebar,
 .profiler-results,
 .tree-ref-holder,
 .tree-holder .breadcrumb,
@@ -36,7 +36,10 @@ ul.notes-form,
 .gutter-toggle,
 .issuable-details .content-block-small,
 .edit-link,
-.note-action-button {
+.note-action-button,
+.right-sidebar,
+.flash-container,
+#js-peek {
   display: none !important;
 }
 
@@ -53,3 +56,7 @@ pre {
 .right-sidebar {
   top: 0;
 }
+
+a[href]::after {
+  content: none !important;
+}
diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
new file mode 100644
index 00000000000..0d6b0735f70
--- /dev/null
+++ b/app/assets/stylesheets/snippets.scss
@@ -0,0 +1,156 @@
+@import "framework/variables";
+
+.gitlab-embed-snippets {
+  @import "highlight/embedded";
+  @import "framework/images";
+
+  $border-style: 1px solid $border-color;
+
+  font-family: $regular_font;
+  font-size: $gl-font-size;
+  line-height: $code_line_height;
+  color: $gl-text-color;
+  margin: 20px;
+  font-weight: 200;
+
+  .gl-snippet-icon {
+    display: inline-block;
+    background: url(asset_path('ext_snippet_icons/ext_snippet_icons.png')) no-repeat;
+    overflow: hidden;
+    text-align: left;
+    width: 16px;
+    height: 16px;
+    background-size: cover;
+
+    &.gl-snippet-icon-doc_code { background-position: 0 0;  }
+    &.gl-snippet-icon-doc_text {  background-position: 0 -16px; }
+    &.gl-snippet-icon-download {  background-position: 0 -32px; }
+  }
+
+  .blob-viewer {
+    background-color: $white-light;
+    text-align: left;
+  }
+
+  .file-content.code {
+    border: $border-style;
+    border-radius: 0 0 4px 4px;
+    display: flex;
+    box-shadow: none;
+    margin: 0;
+    padding: 0;
+    table-layout: fixed;
+
+    .blob-content {
+      overflow-x: auto;
+
+      pre {
+        padding: 10px;
+        border: 0;
+        border-radius: 0;
+        font-family: $monospace_font;
+        font-size: $code_font_size;
+        line-height: $code_line_height;
+        margin: 0;
+        overflow: auto;
+        overflow-y: hidden;
+        white-space: pre;
+        word-wrap: normal;
+        border-left: $border-style;
+      }
+    }
+
+    .line-numbers {
+      padding: 10px;
+      text-align: right;
+      float: left;
+
+      .diff-line-num {
+        font-family: $monospace_font;
+        display: block;
+        font-size: $code_font_size;
+        min-height: $code_line_height;
+        white-space: nowrap;
+        color: $black-transparent;
+        min-width: 30px;
+      }
+
+      .diff-line-num:hover {
+        color: $almost-black;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .file-title-flex-parent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: $gray-light;
+    border: $border-style;
+    border-bottom: 0;
+    padding: $gl-padding-top $gl-padding;
+    margin: 0;
+    border-radius: $border-radius-default $border-radius-default 0 0;
+
+    .file-header-content {
+      .file-title-name {
+        font-weight: $gl-font-weight-bold;
+      }
+
+      .gitlab-embedded-snippets-title {
+        text-decoration: none;
+        color: $gl-text-color;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      .gitlab-logo {
+        display: inline-block;
+        padding-left: 5px;
+        text-decoration: none;
+        color: $gl-text-color-secondary;
+
+        .logo-text {
+          background: image_url('ext_snippet_icons/logo.png') no-repeat left center;
+          background-size: 18px;
+          font-weight: $gl-font-weight-normal;
+          padding-left: 24px;
+        }
+      }
+    }
+
+    img,
+    .gl-snippet-icon {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  .btn-group {
+    a.btn {
+      background-color: $white-light;
+      text-decoration: none;
+      padding: 7px 9px;
+      border: $border-style;
+      border-right: 0;
+
+      &:hover {
+        background-color: $white-normal;
+        border-color: $border-white-normal;
+        text-decoration: none;
+      }
+
+      &:first-child {
+        border-radius: 3px 0 0 3px;
+      }
+
+      &:last-child {
+        border-radius: 0 3px 3px 0;
+        border-right: $border-style;
+      }
+    }
+  }
+}
diff --git a/app/controllers/admin/appearances_controller.rb b/app/controllers/admin/appearances_controller.rb
index dd0b38970bd..9aaec905734 100644
--- a/app/controllers/admin/appearances_controller.rb
+++ b/app/controllers/admin/appearances_controller.rb
@@ -41,6 +41,13 @@ class Admin::AppearancesController < Admin::ApplicationController
     redirect_to admin_appearances_path, notice: 'Header logo was succesfully removed.'
   end
 
+  def favicon
+    @appearance.remove_favicon!
+    @appearance.save
+
+    redirect_to admin_appearances_path, notice: 'Favicon was succesfully removed.'
+  end
+
   private
 
   # Use callbacks to share common setup or constraints between actions.
@@ -50,9 +57,21 @@ class Admin::AppearancesController < Admin::ApplicationController
 
   # Only allow a trusted parameter "white list" through.
   def appearance_params
-    params.require(:appearance).permit(
-      :title, :description, :logo, :logo_cache, :header_logo, :header_logo_cache,
-      :new_project_guidelines, :updated_by
-    )
+    params.require(:appearance).permit(allowed_appearance_params)
+  end
+
+  def allowed_appearance_params
+    %i[
+      title
+      description
+      logo
+      logo_cache
+      header_logo
+      header_logo_cache
+      favicon
+      favicon_cache
+      new_project_guidelines
+      updated_by
+    ]
   end
 end
diff --git a/app/controllers/admin/application_controller.rb b/app/controllers/admin/application_controller.rb
index c27f2ee3c09..a4648b33cfa 100644
--- a/app/controllers/admin/application_controller.rb
+++ b/app/controllers/admin/application_controller.rb
@@ -3,23 +3,9 @@
 # Automatically sets the layout and ensures an administrator is logged in
 class Admin::ApplicationController < ApplicationController
   before_action :authenticate_admin!
-  before_action :display_read_only_information
   layout 'admin'
 
   def authenticate_admin!
     render_404 unless current_user.admin?
   end
-
-  def display_read_only_information
-    return unless Gitlab::Database.read_only?
-
-    flash.now[:notice] = read_only_message
-  end
-
-  private
-
-  # Overridden in EE
-  def read_only_message
-    _('You are on a read-only GitLab instance.')
-  end
 end
diff --git a/app/controllers/admin/application_settings_controller.rb b/app/controllers/admin/application_settings_controller.rb
index 4dfb397e82c..9723e400574 100644
--- a/app/controllers/admin/application_settings_controller.rb
+++ b/app/controllers/admin/application_settings_controller.rb
@@ -52,25 +52,22 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
   private
 
   def set_application_setting
-    @application_setting = ApplicationSetting.current
+    @application_setting = Gitlab::CurrentSettings.current_application_settings
   end
 
   def application_setting_params
-    import_sources = params[:application_setting][:import_sources]
-    if import_sources.nil?
-      params[:application_setting][:import_sources] = []
-    else
-      import_sources.map! do |source|
-        source.to_str
-      end
-    end
+    params[:application_setting] ||= {}
 
-    enabled_oauth_sign_in_sources = params[:application_setting].delete(:enabled_oauth_sign_in_sources)
+    if params[:application_setting].key?(:enabled_oauth_sign_in_sources)
+      enabled_oauth_sign_in_sources = params[:application_setting].delete(:enabled_oauth_sign_in_sources)
+      enabled_oauth_sign_in_sources&.delete("")
 
-    params[:application_setting][:disabled_oauth_sign_in_sources] =
-      AuthHelper.button_based_providers.map(&:to_s) -
-      Array(enabled_oauth_sign_in_sources)
+      params[:application_setting][:disabled_oauth_sign_in_sources] =
+        AuthHelper.button_based_providers.map(&:to_s) -
+        Array(enabled_oauth_sign_in_sources)
+    end
 
+    params[:application_setting][:import_sources]&.delete("")
     params[:application_setting][:restricted_visibility_levels]&.delete("")
     params.delete(:domain_blacklist_raw) if params[:domain_blacklist_file]
 
diff --git a/app/controllers/admin/dashboard_controller.rb b/app/controllers/admin/dashboard_controller.rb
index e85cdcb8db7..737942f3eb2 100644
--- a/app/controllers/admin/dashboard_controller.rb
+++ b/app/controllers/admin/dashboard_controller.rb
@@ -1,5 +1,11 @@
 class Admin::DashboardController < Admin::ApplicationController
+  include CountHelper
+
+  COUNTED_ITEMS = [Project, User, Group, ForkedProjectLink, Issue, MergeRequest,
+                   Note, Snippet, Key, Milestone].freeze
+
   def index
+    @counts = Gitlab::Database::Count.approximate_counts(COUNTED_ITEMS)
     @projects = Project.order_id_desc.without_deleted.with_route.limit(10)
     @users = User.order_id_desc.limit(10)
     @groups = Group.order_id_desc.with_route.limit(10)
diff --git a/app/controllers/admin/groups_controller.rb b/app/controllers/admin/groups_controller.rb
index cc38608eda5..96b7bc65ac9 100644
--- a/app/controllers/admin/groups_controller.rb
+++ b/app/controllers/admin/groups_controller.rb
@@ -5,7 +5,7 @@ class Admin::GroupsController < Admin::ApplicationController
 
   def index
     @groups = Group.with_statistics.with_route
-    @groups = @groups.sort(@sort = params[:sort])
+    @groups = @groups.sort_by_attribute(@sort = params[:sort])
     @groups = @groups.search(params[:name]) if params[:name].present?
     @groups = @groups.page(params[:page])
   end
@@ -72,10 +72,10 @@ class Admin::GroupsController < Admin::ApplicationController
   end
 
   def group_params
-    params.require(:group).permit(group_params_ce)
+    params.require(:group).permit(allowed_group_params)
   end
 
-  def group_params_ce
+  def allowed_group_params
     [
       :avatar,
       :description,
diff --git a/app/controllers/admin/hooks_controller.rb b/app/controllers/admin/hooks_controller.rb
index 2b47819303e..fb788c47ef1 100644
--- a/app/controllers/admin/hooks_controller.rb
+++ b/app/controllers/admin/hooks_controller.rb
@@ -9,7 +9,7 @@ class Admin::HooksController < Admin::ApplicationController
   end
 
   def create
-    @hook = SystemHook.new(hook_params)
+    @hook = SystemHook.new(hook_params.to_h)
 
     if @hook.save
       redirect_to admin_hooks_path, notice: 'Hook was successfully created.'
diff --git a/app/controllers/admin/runner_projects_controller.rb b/app/controllers/admin/runner_projects_controller.rb
index 7ed2de71028..7aba77d8129 100644
--- a/app/controllers/admin/runner_projects_controller.rb
+++ b/app/controllers/admin/runner_projects_controller.rb
@@ -4,9 +4,7 @@ class Admin::RunnerProjectsController < Admin::ApplicationController
   def create
     @runner = Ci::Runner.find(params[:runner_project][:runner_id])
 
-    runner_project = @runner.assign_to(@project, current_user)
-
-    if runner_project.persisted?
+    if @runner.assign_to(@project, current_user)
       redirect_to admin_runner_path(@runner)
     else
       redirect_to admin_runner_path(@runner), alert: 'Failed adding runner to project'
diff --git a/app/controllers/admin/users_controller.rb b/app/controllers/admin/users_controller.rb
index 156a8e2c515..653f3dfffc4 100644
--- a/app/controllers/admin/users_controller.rb
+++ b/app/controllers/admin/users_controller.rb
@@ -4,7 +4,7 @@ class Admin::UsersController < Admin::ApplicationController
   def index
     @users = User.order_name_asc.filter(params[:filter])
     @users = @users.search_with_secondary_emails(params[:search_query]) if params[:search_query].present?
-    @users = @users.sort(@sort = params[:sort])
+    @users = @users.sort_by_attribute(@sort = params[:sort])
     @users = @users.page(params[:page])
   end
 
@@ -187,10 +187,10 @@ class Admin::UsersController < Admin::ApplicationController
   end
 
   def user_params
-    params.require(:user).permit(user_params_ce)
+    params.require(:user).permit(allowed_user_params)
   end
 
-  def user_params_ce
+  def allowed_user_params
     [
       :access_level,
       :avatar,
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 7f83bd10e93..21cc6dfdd16 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -5,6 +5,7 @@ class ApplicationController < ActionController::Base
   include Gitlab::GonHelper
   include GitlabRoutingHelper
   include PageLayoutHelper
+  include SafeParamsHelper
   include SentryHelper
   include WorkhorseHelper
   include EnforcesTwoFactorAuthentication
@@ -12,12 +13,13 @@ class ApplicationController < ActionController::Base
 
   before_action :authenticate_sessionless_user!
   before_action :authenticate_user!
+  before_action :enforce_terms!, if: :should_enforce_terms?
   before_action :validate_user_service_ticket!
   before_action :check_password_expiration
   before_action :ldap_security_check
   before_action :sentry_context
   before_action :default_headers
-  before_action :add_gon_variables, unless: -> { request.path.start_with?('/-/peek') }
+  before_action :add_gon_variables, unless: :peek_request?
   before_action :configure_permitted_parameters, if: :devise_controller?
   before_action :require_email, unless: :devise_controller?
 
@@ -25,7 +27,7 @@ class ApplicationController < ActionController::Base
 
   after_action :set_page_title_header, if: -> { request.format == :json }
 
-  protect_from_forgery with: :exception
+  protect_from_forgery with: :exception, prepend: true
 
   helper_method :can?
   helper_method :import_sources_enabled?, :github_import_enabled?, :gitea_import_enabled?, :github_import_configured?, :gitlab_import_enabled?, :gitlab_import_configured?, :bitbucket_import_enabled?, :bitbucket_import_configured?, :google_code_import_enabled?, :fogbugz_import_enabled?, :git_import_enabled?, :gitlab_project_import_enabled?
@@ -89,6 +91,10 @@ class ApplicationController < ActionController::Base
       payload[:user_id] = logged_user.try(:id)
       payload[:username] = logged_user.try(:username)
     end
+
+    if response.status == 422 && response.body.present? && response.content_type == 'application/json'.freeze
+      payload[:response] = response.body
+    end
   end
 
   # Controllers such as GitHttpController may use alternative methods
@@ -109,7 +115,8 @@ class ApplicationController < ActionController::Base
   def log_exception(exception)
     Raven.capture_exception(exception) if sentry_enabled?
 
-    application_trace = ActionDispatch::ExceptionWrapper.new(env, exception).application_trace
+    backtrace_cleaner = Gitlab.rails5? ? env["action_dispatch.backtrace_cleaner"] : env
+    application_trace = ActionDispatch::ExceptionWrapper.new(backtrace_cleaner, exception).application_trace
     application_trace.map! { |t| "  #{t}\n" }
     logger.error "\n#{exception.class.name} (#{exception.message}):\n#{application_trace.join}"
   end
@@ -127,12 +134,17 @@ class ApplicationController < ActionController::Base
   end
 
   def access_denied!(message = nil)
+    # If we display a custom access denied message to the user, we don't want to
+    # hide existence of the resource, rather tell them they cannot access it using
+    # the provided message
+    status = message.present? ? :forbidden : :not_found
+
     respond_to do |format|
-      format.any { head :not_found }
+      format.any { head status }
       format.html do
         render "errors/access_denied",
                layout: "errors",
-               status: 404,
+               status: status,
                locals: { message: message }
       end
     end
@@ -143,14 +155,15 @@ class ApplicationController < ActionController::Base
   end
 
   def render_403
-    head :forbidden
+    respond_to do |format|
+      format.any { head :forbidden }
+      format.html { render "errors/access_denied", layout: "errors", status: 403 }
+    end
   end
 
   def render_404
     respond_to do |format|
-      format.html do
-        render file: Rails.root.join("public", "404"), layout: false, status: "404"
-      end
+      format.html { render "errors/not_found", layout: "errors", status: 404 }
       # Prevent the Rails CSRF protector from thinking a missing .js file is a JavaScript file
       format.js { render json: '', status: :not_found, content_type: 'application/json' }
       format.any { head :not_found }
@@ -229,10 +242,6 @@ class ApplicationController < ActionController::Base
     @event_filter ||= EventFilter.new(filters)
   end
 
-  def gitlab_ldap_access(&block)
-    Gitlab::Auth::LDAP::Access.open { |access| yield(access) }
-  end
-
   # JSON for infinite scroll via Pager object
   def pager_json(partial, count, locals = {})
     html = render_to_string(
@@ -271,6 +280,29 @@ class ApplicationController < ActionController::Base
     end
   end
 
+  def enforce_terms!
+    return unless current_user
+    return if current_user.terms_accepted?
+
+    message = _("Please accept the Terms of Service before continuing.")
+
+    if sessionless_user?
+      access_denied!(message)
+    else
+      # Redirect to the destination if the request is a get.
+      # Redirect to the source if it was a post, so the user can re-submit after
+      # accepting the terms.
+      redirect_path = if request.get?
+                        request.fullpath
+                      else
+                        URI(request.referer).path if request.referer
+                      end
+
+      flash[:notice] = message
+      redirect_to terms_path(redirect: redirect_path), status: :found
+    end
+  end
+
   def import_sources_enabled?
     !Gitlab::CurrentSettings.import_sources.empty?
   end
@@ -344,4 +376,18 @@ class ApplicationController < ActionController::Base
     # Per https://tools.ietf.org/html/rfc5987, headers need to be ISO-8859-1, not UTF-8
     response.headers['Page-Title'] = URI.escape(page_title('GitLab'))
   end
+
+  def sessionless_user?
+    current_user && !session.keys.include?('warden.user.user.key')
+  end
+
+  def peek_request?
+    request.path.start_with?('/-/peek')
+  end
+
+  def should_enforce_terms?
+    return false unless Gitlab::CurrentSettings.current_application_settings.enforce_terms
+
+    !(peek_request? || devise_controller?)
+  end
 end
diff --git a/app/controllers/boards/issues_controller.rb b/app/controllers/boards/issues_controller.rb
index 19dbee84c11..09e143c23e8 100644
--- a/app/controllers/boards/issues_controller.rb
+++ b/app/controllers/boards/issues_controller.rb
@@ -94,9 +94,10 @@ module Boards
 
     def serialize_as_json(resource)
       resource.as_json(
-        only: [:id, :iid, :project_id, :title, :confidential, :due_date, :relative_position],
+        only: [:id, :iid, :project_id, :title, :confidential, :due_date, :relative_position, :weight],
         labels: true,
-        sidebar_endpoints: true,
+        issue_endpoints: true,
+        include_full_project_path: board.group_board?,
         include: {
           project: { only: [:id, :path] },
           assignees: { only: [:id, :name, :username], methods: [:avatar_url] },
diff --git a/app/controllers/boards/lists_controller.rb b/app/controllers/boards/lists_controller.rb
index 381fd4d7508..e8b5934f2a9 100644
--- a/app/controllers/boards/lists_controller.rb
+++ b/app/controllers/boards/lists_controller.rb
@@ -56,8 +56,12 @@ module Boards
 
     private
 
+    def list_creation_attrs
+      %i[label_id]
+    end
+
     def list_params
-      params.require(:list).permit(:label_id)
+      params.require(:list).permit(list_creation_attrs)
     end
 
     def move_params
@@ -65,11 +69,15 @@ module Boards
     end
 
     def serialize_as_json(resource)
-      resource.as_json(
+      resource.as_json(serialization_attrs)
+    end
+
+    def serialization_attrs
+      {
         only: [:id, :list_type, :position],
         methods: [:title],
         label: true
-      )
+      }
     end
   end
 end
diff --git a/app/controllers/ci/lints_controller.rb b/app/controllers/ci/lints_controller.rb
index e9bd1689a1e..738a6a5173e 100644
--- a/app/controllers/ci/lints_controller.rb
+++ b/app/controllers/ci/lints_controller.rb
@@ -4,20 +4,5 @@ module Ci
 
     def show
     end
-
-    def create
-      @content = params[:content]
-      @error = Gitlab::Ci::YamlProcessor.validation_message(@content)
-      @status = @error.blank?
-
-      if @error.blank?
-        @config_processor = Gitlab::Ci::YamlProcessor.new(@content)
-        @stages = @config_processor.stages
-        @builds = @config_processor.builds
-        @jobs = @config_processor.jobs
-      end
-
-      render :show
-    end
   end
 end
diff --git a/app/controllers/concerns/accepts_pending_invitations.rb b/app/controllers/concerns/accepts_pending_invitations.rb
new file mode 100644
index 00000000000..6e8aef52b52
--- /dev/null
+++ b/app/controllers/concerns/accepts_pending_invitations.rb
@@ -0,0 +1,15 @@
+module AcceptsPendingInvitations
+  extend ActiveSupport::Concern
+
+  def accept_pending_invitations
+    return unless resource.active_for_authentication?
+
+    clear_stored_location_for_resource if resource.accept_pending_invitations!.any?
+  end
+
+  def clear_stored_location_for_resource
+    session_key = stored_location_key_for(resource)
+
+    session.delete(session_key)
+  end
+end
diff --git a/app/controllers/concerns/authenticates_with_two_factor.rb b/app/controllers/concerns/authenticates_with_two_factor.rb
index 2753f83c3cf..69a053d4246 100644
--- a/app/controllers/concerns/authenticates_with_two_factor.rb
+++ b/app/controllers/concerns/authenticates_with_two_factor.rb
@@ -10,7 +10,7 @@ module AuthenticatesWithTwoFactor
     # This action comes from DeviseController, but because we call `sign_in`
     # manually, not skipping this action would cause a "You are already signed
     # in." error message to be shown upon successful login.
-    skip_before_action :require_no_authentication, only: [:create]
+    skip_before_action :require_no_authentication, only: [:create], raise: false
   end
 
   # Store the user's ID in the session for later retrieval and render the
@@ -23,6 +23,9 @@ module AuthenticatesWithTwoFactor
   #
   # Returns nil
   def prompt_for_two_factor(user)
+    # Set @user for Devise views
+    @user = user # rubocop:disable Gitlab/ModuleWithInstanceVariables
+
     return locked_user_redirect(user) unless user.can?(:log_in)
 
     session[:otp_user_id] = user.id
diff --git a/app/controllers/concerns/checks_collaboration.rb b/app/controllers/concerns/checks_collaboration.rb
new file mode 100644
index 00000000000..81367663a06
--- /dev/null
+++ b/app/controllers/concerns/checks_collaboration.rb
@@ -0,0 +1,21 @@
+module ChecksCollaboration
+  def can_collaborate_with_project?(project, ref: nil)
+    return true if can?(current_user, :push_code, project)
+
+    can_create_merge_request =
+      can?(current_user, :create_merge_request_in, project) &&
+      current_user.already_forked?(project)
+
+    can_create_merge_request ||
+      user_access(project).can_push_to_branch?(ref)
+  end
+
+  # rubocop:disable Gitlab/ModuleWithInstanceVariables
+  # enabling this so we can easily cache the user access value as it might be
+  # used across multiple calls in the view
+  def user_access(project)
+    @user_access ||= {}
+    @user_access[project] ||= Gitlab::UserAccess.new(current_user, project: project)
+  end
+  # rubocop:enable Gitlab/ModuleWithInstanceVariables
+end
diff --git a/app/controllers/concerns/continue_params.rb b/app/controllers/concerns/continue_params.rb
index eb3a623acdd..8b7355974df 100644
--- a/app/controllers/concerns/continue_params.rb
+++ b/app/controllers/concerns/continue_params.rb
@@ -1,4 +1,5 @@
 module ContinueParams
+  include InternalRedirect
   extend ActiveSupport::Concern
 
   def continue_params
@@ -6,8 +7,7 @@ module ContinueParams
     return nil unless continue_params
 
     continue_params = continue_params.permit(:to, :notice, :notice_now)
-    return unless continue_params[:to] && continue_params[:to].start_with?('/')
-    return if continue_params[:to].start_with?('//')
+    continue_params[:to] = safe_redirect_path(continue_params[:to])
 
     continue_params
   end
diff --git a/app/controllers/concerns/group_tree.rb b/app/controllers/concerns/group_tree.rb
index fafb10090ca..56770a17406 100644
--- a/app/controllers/concerns/group_tree.rb
+++ b/app/controllers/concerns/group_tree.rb
@@ -14,7 +14,7 @@ module GroupTree
               end
 
     @groups = @groups.with_selects_for_list(archived: params[:archived])
-                .sort(@sort = params[:sort])
+                .sort_by_attribute(@sort = params[:sort])
                 .page(params[:page])
 
     respond_to do |format|
diff --git a/app/controllers/concerns/internal_redirect.rb b/app/controllers/concerns/internal_redirect.rb
new file mode 100644
index 00000000000..10b9852e329
--- /dev/null
+++ b/app/controllers/concerns/internal_redirect.rb
@@ -0,0 +1,39 @@
+module InternalRedirect
+  extend ActiveSupport::Concern
+
+  def safe_redirect_path(path)
+    return unless path
+    # Verify that the string starts with a `/` but not a double `/`.
+    return unless path =~ %r{^/\w.*$}
+
+    uri = URI(path)
+    # Ignore anything path of the redirect except for the path, querystring and,
+    # fragment, forcing the redirect within the same host.
+    full_path_for_uri(uri)
+  rescue URI::InvalidURIError
+    nil
+  end
+
+  def safe_redirect_path_for_url(url)
+    return unless url
+
+    uri = URI(url)
+    safe_redirect_path(full_path_for_uri(uri)) if host_allowed?(uri)
+  rescue URI::InvalidURIError
+    nil
+  end
+
+  def sanitize_redirect(url_or_path)
+    safe_redirect_path(url_or_path) || safe_redirect_path_for_url(url_or_path)
+  end
+
+  def host_allowed?(uri)
+    uri.host == request.host &&
+      uri.port == request.port
+  end
+
+  def full_path_for_uri(uri)
+    path_with_query = [uri.path, uri.query].compact.join('?')
+    [path_with_query, uri.fragment].compact.join("#")
+  end
+end
diff --git a/app/controllers/concerns/issuable_actions.rb b/app/controllers/concerns/issuable_actions.rb
index a21e658fda1..ba510968684 100644
--- a/app/controllers/concerns/issuable_actions.rb
+++ b/app/controllers/concerns/issuable_actions.rb
@@ -7,6 +7,19 @@ module IssuableActions
     before_action :authorize_admin_issuable!, only: :bulk_update
   end
 
+  def permitted_keys
+    [
+      :issuable_ids,
+      :assignee_id,
+      :milestone_id,
+      :state_event,
+      :subscription_event,
+      label_ids: [],
+      add_label_ids: [],
+      remove_label_ids: []
+    ]
+  end
+
   def show
     respond_to do |format|
       format.html
@@ -18,7 +31,6 @@ module IssuableActions
 
   def update
     @issuable = update_service.execute(issuable) # rubocop:disable Gitlab/ModuleWithInstanceVariables
-
     respond_to do |format|
       format.html do
         recaptcha_check_if_spammable { render :edit }
@@ -78,7 +90,7 @@ module IssuableActions
   end
 
   def discussions
-    notes = issuable.notes
+    notes = issuable.discussion_notes
       .inc_relations_for_view
       .includes(:noteable)
       .fresh
@@ -88,11 +100,15 @@ module IssuableActions
 
     discussions = Discussion.build_collection(notes, issuable)
 
-    render json: DiscussionSerializer.new(project: project, noteable: issuable, current_user: current_user).represent(discussions, context: self)
+    render json: discussion_serializer.represent(discussions, context: self)
   end
 
   private
 
+  def discussion_serializer
+    DiscussionSerializer.new(project: project, noteable: issuable, current_user: current_user, note_entity: ProjectNoteEntity)
+  end
+
   def recaptcha_check_if_spammable(should_redirect = true, &block)
     return yield unless issuable.is_a? Spammable
 
@@ -137,24 +153,15 @@ module IssuableActions
   end
 
   def bulk_update_params
-    permitted_keys = [
-      :issuable_ids,
-      :assignee_id,
-      :milestone_id,
-      :state_event,
-      :subscription_event,
-      label_ids: [],
-      add_label_ids: [],
-      remove_label_ids: []
-    ]
+    permitted_keys_array = permitted_keys.dup
 
     if resource_name == 'issue'
-      permitted_keys << { assignee_ids: [] }
+      permitted_keys_array << { assignee_ids: [] }
     else
-      permitted_keys.unshift(:assignee_id)
+      permitted_keys_array.unshift(:assignee_id)
     end
 
-    params.require(:update).permit(permitted_keys)
+    params.require(:update).permit(permitted_keys_array)
   end
 
   def resource_name
diff --git a/app/controllers/concerns/issuable_collections.rb b/app/controllers/concerns/issuable_collections.rb
index 4114ca6bf7c..2ef2ee76855 100644
--- a/app/controllers/concerns/issuable_collections.rb
+++ b/app/controllers/concerns/issuable_collections.rb
@@ -57,7 +57,7 @@ module IssuableCollections
     out_of_range = @issuables.current_page > total_pages # rubocop:disable Gitlab/ModuleWithInstanceVariables
 
     if out_of_range
-      redirect_to(url_for(params.merge(page: total_pages, only_path: true)))
+      redirect_to(url_for(safe_params.merge(page: total_pages, only_path: true)))
     end
 
     out_of_range
@@ -95,12 +95,7 @@ module IssuableCollections
     elsif @group
       @filter_params[:group_id] = @group.id
       @filter_params[:include_subgroups] = true
-    else
-      # TODO: this filter ignore issues/mr created in public or
-      # internal repos where you are not a member. Enable this filter
-      # or improve current implementation to filter only issues you
-      # created or assigned or mentioned
-      # @filter_params[:authorized_only] = true
+      @filter_params[:use_cte_for_search] = true
     end
 
     @filter_params.permit(finder_type.valid_params)
@@ -165,8 +160,8 @@ module IssuableCollections
                                   [:project, :author, :assignees, :labels, :milestone, project: :namespace]
                                 when 'MergeRequest'
                                   [
-                                    :source_project, :target_project, :author, :assignee, :labels, :milestone,
-                                    head_pipeline: :project, target_project: :namespace, latest_merge_request_diff: :merge_request_diff_commits
+                                    :target_project, :author, :assignee, :labels, :milestone,
+                                    source_project: :route, head_pipeline: :project, target_project: :namespace, latest_merge_request_diff: :merge_request_diff_commits
                                   ]
                                 end
   end
diff --git a/app/controllers/concerns/issues_action.rb b/app/controllers/concerns/issues_action.rb
index 3b11a373368..9d58656773d 100644
--- a/app/controllers/concerns/issues_action.rb
+++ b/app/controllers/concerns/issues_action.rb
@@ -1,6 +1,7 @@
 module IssuesAction
   extend ActiveSupport::Concern
   include IssuableCollections
+  include IssuesCalendar
 
   # rubocop:disable Gitlab/ModuleWithInstanceVariables
   def issues
@@ -17,10 +18,14 @@ module IssuesAction
   end
   # rubocop:enable Gitlab/ModuleWithInstanceVariables
 
+  def issues_calendar
+    render_issues_calendar(issuables_collection)
+  end
+
   private
 
   def finder_type
     (super if defined?(super)) ||
-      (IssuesFinder if action_name == 'issues')
+      (IssuesFinder if %w(issues issues_calendar).include?(action_name))
   end
 end
diff --git a/app/controllers/concerns/issues_calendar.rb b/app/controllers/concerns/issues_calendar.rb
new file mode 100644
index 00000000000..671a204621d
--- /dev/null
+++ b/app/controllers/concerns/issues_calendar.rb
@@ -0,0 +1,24 @@
+module IssuesCalendar
+  extend ActiveSupport::Concern
+
+  # rubocop:disable Gitlab/ModuleWithInstanceVariables
+  def render_issues_calendar(issuables)
+    @issues = issuables
+                  .non_archived
+                  .with_due_date
+                  .limit(100)
+
+    respond_to do |format|
+      format.ics do
+        # NOTE: with text/calendar as Content-Type, the browser always downloads
+        #       the content as a file (even ignoring the Content-Disposition
+        #       header). We want to display the content inline when accessed
+        #       from GitLab, similarly to the RSS feed.
+        if request.referer&.start_with?(::Settings.gitlab.base_url)
+          response.headers['Content-Type'] = 'text/plain'
+        end
+      end
+    end
+  end
+  # rubocop:enable Gitlab/ModuleWithInstanceVariables
+end
diff --git a/app/controllers/concerns/notes_actions.rb b/app/controllers/concerns/notes_actions.rb
index 03ed5b5310b..fe9a030cdf2 100644
--- a/app/controllers/concerns/notes_actions.rb
+++ b/app/controllers/concerns/notes_actions.rb
@@ -41,7 +41,7 @@ module NotesActions
     @note = Notes::CreateService.new(note_project, current_user, create_params).execute
 
     if @note.is_a?(Note)
-      Notes::RenderService.new(current_user).execute([@note], @project)
+      Notes::RenderService.new(current_user).execute([@note])
     end
 
     respond_to do |format|
@@ -56,7 +56,7 @@ module NotesActions
     @note = Notes::UpdateService.new(project, current_user, note_params).execute(note)
 
     if @note.is_a?(Note)
-      Notes::RenderService.new(current_user).execute([@note], @project)
+      Notes::RenderService.new(current_user).execute([@note])
     end
 
     respond_to do |format|
@@ -212,12 +212,12 @@ module NotesActions
   end
 
   def note_serializer
-    NoteSerializer.new(project: project, noteable: noteable, current_user: current_user)
+    ProjectNoteSerializer.new(project: project, noteable: noteable, current_user: current_user)
   end
 
   def note_project
     strong_memoize(:note_project) do
-      return nil unless project
+      next nil unless project
 
       note_project_id = params[:note_project_id]
 
@@ -228,7 +228,7 @@ module NotesActions
           project
         end
 
-      return access_denied! unless can?(current_user, :create_note, the_project)
+      next access_denied! unless can?(current_user, :create_note, the_project)
 
       the_project
     end
@@ -237,10 +237,6 @@ module NotesActions
   def use_note_serializer?
     return false if params['html']
 
-    if noteable.is_a?(MergeRequest)
-      cookies[:vue_mr_discussions] == 'true'
-    else
-      noteable.discussions_rendered_on_frontend?
-    end
+    noteable.discussions_rendered_on_frontend?
   end
 end
diff --git a/app/controllers/concerns/renders_notes.rb b/app/controllers/concerns/renders_notes.rb
index e7ef297879f..36e3d76ecfe 100644
--- a/app/controllers/concerns/renders_notes.rb
+++ b/app/controllers/concerns/renders_notes.rb
@@ -4,7 +4,7 @@ module RendersNotes
     preload_noteable_for_regular_notes(notes)
     preload_max_access_for_authors(notes, @project)
     preload_first_time_contribution_for_authors(noteable, notes)
-    Notes::RenderService.new(current_user).execute(notes, @project)
+    Notes::RenderService.new(current_user).execute(notes)
 
     notes
   end
diff --git a/app/controllers/concerns/send_file_upload.rb b/app/controllers/concerns/send_file_upload.rb
new file mode 100644
index 00000000000..237c93daee8
--- /dev/null
+++ b/app/controllers/concerns/send_file_upload.rb
@@ -0,0 +1,21 @@
+module SendFileUpload
+  def send_upload(file_upload, send_params: {}, redirect_params: {}, attachment: nil, disposition: 'attachment')
+    if attachment
+      redirect_params[:query] = { "response-content-disposition" => "#{disposition};filename=#{attachment.inspect}" }
+      # By default, Rails will send uploads with an extension of .js with a
+      # content-type of text/javascript, which will trigger Rails'
+      # cross-origin JavaScript protection.
+      send_params[:content_type] = 'text/plain' if File.extname(attachment) == '.js'
+      send_params.merge!(filename: attachment, disposition: disposition)
+    end
+
+    if file_upload.file_storage?
+      send_file file_upload.path, send_params
+    elsif file_upload.class.proxy_download_enabled?
+      headers.store(*Gitlab::Workhorse.send_url(file_upload.url(**redirect_params)))
+      head :ok
+    else
+      redirect_to file_upload.url(**redirect_params)
+    end
+  end
+end
diff --git a/app/controllers/concerns/snippets_actions.rb b/app/controllers/concerns/snippets_actions.rb
index 9095cc7f783..120614739aa 100644
--- a/app/controllers/concerns/snippets_actions.rb
+++ b/app/controllers/concerns/snippets_actions.rb
@@ -17,6 +17,10 @@ module SnippetsActions
   end
   # rubocop:enable Gitlab/ModuleWithInstanceVariables
 
+  def js_request?
+    request.format.js?
+  end
+
   private
 
   def convert_line_endings(content)
diff --git a/app/controllers/concerns/uploads_actions.rb b/app/controllers/concerns/uploads_actions.rb
index 3dbfabcae8a..16374146ae4 100644
--- a/app/controllers/concerns/uploads_actions.rb
+++ b/app/controllers/concerns/uploads_actions.rb
@@ -1,7 +1,14 @@
 module UploadsActions
+  extend ActiveSupport::Concern
+
   include Gitlab::Utils::StrongMemoize
+  include SendFileUpload
+
+  UPLOAD_MOUNTS = %w(avatar attachment file logo header_logo favicon).freeze
 
-  UPLOAD_MOUNTS = %w(avatar attachment file logo header_logo).freeze
+  included do
+    prepend_before_action :set_html_format, only: :show
+  end
 
   def create
     link_to_file = UploadService.new(model, params[:file], uploader_class).execute
@@ -26,18 +33,27 @@ module UploadsActions
   def show
     return render_404 unless uploader&.exists?
 
-    if uploader.file_storage?
-      disposition = uploader.image_or_video? ? 'inline' : 'attachment'
-      expires_in 0.seconds, must_revalidate: true, private: true
+    expires_in 0.seconds, must_revalidate: true, private: true
 
-      send_file uploader.file.path, disposition: disposition
-    else
-      redirect_to uploader.url
-    end
+    disposition = uploader.image_or_video? ? 'inline' : 'attachment'
+
+    uploaders = [uploader, *uploader.versions.values]
+    uploader = uploaders.find { |version| version.filename == params[:filename] }
+
+    return render_404 unless uploader
+
+    send_upload(uploader, attachment: uploader.filename, disposition: disposition)
   end
 
   private
 
+  # Explicitly set the format.
+  # Otherwise rails 5 will set it from a file extension.
+  # See https://github.com/rails/rails/commit/84e8accd6fb83031e4c27e44925d7596655285f7#diff-2b8f2fbb113b55ca8e16001c393da8f1
+  def set_html_format
+    request.format = :html
+  end
+
   def uploader_class
     raise NotImplementedError
   end
@@ -62,19 +78,27 @@ module UploadsActions
   end
 
   def build_uploader_from_upload
-    return nil unless params[:secret] && params[:filename]
+    return unless uploader = build_uploader
 
-    upload_path = uploader_class.upload_path(params[:secret], params[:filename])
-    upload = Upload.find_by(uploader: uploader_class.to_s, path: upload_path)
+    upload_paths = uploader.upload_paths(params[:filename])
+    upload = Upload.find_by(uploader: uploader_class.to_s, path: upload_paths)
     upload&.build_uploader
   end
 
   def build_uploader_from_params
+    return unless uploader = build_uploader
+
+    uploader.retrieve_from_store!(params[:filename])
+    uploader
+  end
+
+  def build_uploader
+    return unless params[:secret] && params[:filename]
+
     uploader = uploader_class.new(model, secret: params[:secret])
 
-    return nil unless uploader.model_valid?
+    return unless uploader.model_valid?
 
-    uploader.retrieve_from_store!(params[:filename])
     uploader
   end
 
diff --git a/app/controllers/confirmations_controller.rb b/app/controllers/confirmations_controller.rb
index 6d9c38d9581..7bc46a6ccc0 100644
--- a/app/controllers/confirmations_controller.rb
+++ b/app/controllers/confirmations_controller.rb
@@ -1,4 +1,6 @@
 class ConfirmationsController < Devise::ConfirmationsController
+  include AcceptsPendingInvitations
+
   def almost_there
     flash[:notice] = nil
     render layout: "devise_empty"
@@ -11,6 +13,8 @@ class ConfirmationsController < Devise::ConfirmationsController
   end
 
   def after_confirmation_path_for(resource_name, resource)
+    accept_pending_invitations
+
     # incoming resource can either be a :user or an :email
     if signed_in?(:user)
       after_sign_in(resource)
diff --git a/app/controllers/dashboard/todos_controller.rb b/app/controllers/dashboard/todos_controller.rb
index e89eaf7edda..f9e8fe624e8 100644
--- a/app/controllers/dashboard/todos_controller.rb
+++ b/app/controllers/dashboard/todos_controller.rb
@@ -86,7 +86,7 @@ class Dashboard::TodosController < Dashboard::ApplicationController
     out_of_range = todos.current_page > total_pages
 
     if out_of_range
-      redirect_to url_for(params.merge(page: total_pages, only_path: true))
+      redirect_to url_for(safe_params.merge(page: total_pages, only_path: true))
     end
 
     out_of_range
diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index 280ed93faf8..ff133001b84 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -2,9 +2,17 @@ class DashboardController < Dashboard::ApplicationController
   include IssuesAction
   include MergeRequestsAction
 
+  FILTER_PARAMS = [
+    :author_id,
+    :assignee_id,
+    :milestone_title,
+    :label_name
+  ].freeze
+
   before_action :event_filter, only: :activity
   before_action :projects, only: [:issues, :merge_requests]
   before_action :set_show_full_reference, only: [:issues, :merge_requests]
+  before_action :check_filters_presence!, only: [:issues, :merge_requests]
 
   respond_to :html
 
@@ -39,4 +47,15 @@ class DashboardController < Dashboard::ApplicationController
   def set_show_full_reference
     @show_full_reference = true
   end
+
+  def check_filters_presence!
+    @no_filters_set = FILTER_PARAMS.none? { |k| params.key?(k) }
+
+    return unless @no_filters_set
+
+    respond_to do |format|
+      format.html { render }
+      format.atom { head :bad_request }
+    end
+  end
 end
diff --git a/app/controllers/graphql_controller.rb b/app/controllers/graphql_controller.rb
new file mode 100644
index 00000000000..0a1cf169aca
--- /dev/null
+++ b/app/controllers/graphql_controller.rb
@@ -0,0 +1,45 @@
+class GraphqlController < ApplicationController
+  # Unauthenticated users have access to the API for public data
+  skip_before_action :authenticate_user!
+
+  before_action :check_graphql_feature_flag!
+
+  def execute
+    variables = Gitlab::Graphql::Variables.new(params[:variables]).to_h
+    query = params[:query]
+    operation_name = params[:operationName]
+    context = {
+      current_user: current_user
+    }
+    result = GitlabSchema.execute(query, variables: variables, context: context, operation_name: operation_name)
+    render json: result
+  end
+
+  rescue_from StandardError do |exception|
+    log_exception(exception)
+
+    render_error("Internal server error")
+  end
+
+  rescue_from Gitlab::Graphql::Variables::Invalid do |exception|
+    render_error(exception.message, status: :unprocessable_entity)
+  end
+
+  private
+
+  # Overridden from the ApplicationController to make the response look like
+  # a GraphQL response. That is nicely picked up in Graphiql.
+  def render_404
+    render_error("Not found!", status: :not_found)
+  end
+
+  def render_error(message, status: 500)
+    error = { errors: [message: message] }
+
+    render json: error, status: status
+  end
+
+  def check_graphql_feature_flag!
+    render_404 unless Feature.enabled?(:graphql)
+  end
+end
diff --git a/app/controllers/groups/application_controller.rb b/app/controllers/groups/application_controller.rb
index 9f3bb60b4cc..62213561898 100644
--- a/app/controllers/groups/application_controller.rb
+++ b/app/controllers/groups/application_controller.rb
@@ -33,6 +33,6 @@ class Groups::ApplicationController < ApplicationController
   def build_canonical_path(group)
     params[:group_id] = group.to_param
 
-    url_for(params)
+    url_for(safe_params)
   end
 end
diff --git a/app/controllers/groups/boards_controller.rb b/app/controllers/groups/boards_controller.rb
index 7c2016f0326..e892d1f8dbf 100644
--- a/app/controllers/groups/boards_controller.rb
+++ b/app/controllers/groups/boards_controller.rb
@@ -2,19 +2,24 @@ class Groups::BoardsController < Groups::ApplicationController
   include BoardsResponses
 
   before_action :assign_endpoint_vars
+  before_action :boards, only: :index
 
   def index
-    @boards = Boards::ListService.new(group, current_user).execute
-
     respond_with_boards
   end
 
   def show
-    @board = group.boards.find(params[:id])
+    @board = boards.find(params[:id])
 
     respond_with_board
   end
 
+  private
+
+  def boards
+    @boards ||= Boards::ListService.new(group, current_user).execute
+  end
+
   def assign_endpoint_vars
     @boards_endpoint = group_boards_url(group)
     @namespace_path = group.to_param
diff --git a/app/controllers/groups/group_members_controller.rb b/app/controllers/groups/group_members_controller.rb
index f210434b2d7..ef5d5e5c742 100644
--- a/app/controllers/groups/group_members_controller.rb
+++ b/app/controllers/groups/group_members_controller.rb
@@ -3,21 +3,32 @@ class Groups::GroupMembersController < Groups::ApplicationController
   include MembersPresentation
   include SortingHelper
 
+  def self.admin_not_required_endpoints
+    %i[index leave request_access]
+  end
+
   # Authorize
-  before_action :authorize_admin_group_member!, except: [:index, :leave, :request_access]
+  before_action :authorize_admin_group_member!, except: admin_not_required_endpoints
 
   skip_cross_project_access_check :index, :create, :update, :destroy, :request_access,
                                   :approve_access_request, :leave, :resend_invite,
                                   :override
 
   def index
+    can_manage_members = can?(current_user, :admin_group_member, @group)
+
     @sort = params[:sort].presence || sort_value_name
     @project = @group.projects.find(params[:project_id]) if params[:project_id]
 
     @members = GroupMembersFinder.new(@group).execute
-    @members = @members.non_invite unless can?(current_user, :admin_group, @group)
+    @members = @members.non_invite unless can_manage_members
     @members = @members.search(params[:search]) if params[:search].present?
-    @members = @members.sort(@sort)
+    @members = @members.sort_by_attribute(@sort)
+
+    if can_manage_members && params[:two_factor].present?
+      @members = @members.filter_by_2fa(params[:two_factor])
+    end
+
     @members = @members.page(params[:page]).per(50)
     @members = present_members(@members.includes(:user))
 
diff --git a/app/controllers/groups/labels_controller.rb b/app/controllers/groups/labels_controller.rb
index 58be330f466..863f50e8e66 100644
--- a/app/controllers/groups/labels_controller.rb
+++ b/app/controllers/groups/labels_controller.rb
@@ -2,6 +2,7 @@ class Groups::LabelsController < Groups::ApplicationController
   include ToggleSubscriptionAction
 
   before_action :label, only: [:edit, :update, :destroy]
+  before_action :available_labels, only: [:index]
   before_action :authorize_admin_labels!, only: [:new, :create, :edit, :update, :destroy]
   before_action :save_previous_label_path, only: [:edit]
 
@@ -12,17 +13,8 @@ class Groups::LabelsController < Groups::ApplicationController
       format.html do
         @labels = @group.labels.page(params[:page])
       end
-
       format.json do
-        available_labels = LabelsFinder.new(
-          current_user,
-          group_id: @group.id,
-          only_group_labels: params[:only_group_labels],
-          include_ancestor_groups: params[:include_ancestor_groups],
-          include_descendant_groups: params[:include_descendant_groups]
-        ).execute
-
-        render json: LabelSerializer.new.represent_appearance(available_labels)
+        render json: LabelSerializer.new.represent_appearance(@available_labels)
       end
     end
   end
@@ -113,4 +105,15 @@ class Groups::LabelsController < Groups::ApplicationController
   def save_previous_label_path
     session[:previous_labels_path] = URI(request.referer || '').path
   end
+
+  def available_labels
+    @available_labels ||=
+      LabelsFinder.new(
+        current_user,
+        group_id: @group.id,
+        only_group_labels: params[:only_group_labels],
+        include_ancestor_groups: params[:include_ancestor_groups],
+        include_descendant_groups: params[:include_descendant_groups]
+      ).execute
+  end
 end
diff --git a/app/controllers/groups/milestones_controller.rb b/app/controllers/groups/milestones_controller.rb
index acf6aaf57f4..9bd51de7e97 100644
--- a/app/controllers/groups/milestones_controller.rb
+++ b/app/controllers/groups/milestones_controller.rb
@@ -12,7 +12,7 @@ class Groups::MilestonesController < Groups::ApplicationController
         @milestones = Kaminari.paginate_array(milestones).page(params[:page])
       end
       format.json do
-        render json: milestones.map { |m| m.for_display.slice(:title, :name) }
+        render json: milestones.map { |m| m.for_display.slice(:id, :title, :name) }
       end
     end
   end
@@ -76,12 +76,15 @@ class Groups::MilestonesController < Groups::ApplicationController
 
   def milestones
     milestones = MilestonesFinder.new(search_params).execute
-    legacy_milestones = GroupMilestone.build_collection(group, group_projects, params)
 
     @sort = params[:sort] || 'due_date_asc'
     MilestoneArray.sort(milestones + legacy_milestones, @sort)
   end
 
+  def legacy_milestones
+    GroupMilestone.build_collection(group, group_projects, params)
+  end
+
   def milestone
     @milestone =
       if params[:title]
diff --git a/app/controllers/groups/runners_controller.rb b/app/controllers/groups/runners_controller.rb
new file mode 100644
index 00000000000..78992ec7f46
--- /dev/null
+++ b/app/controllers/groups/runners_controller.rb
@@ -0,0 +1,58 @@
+class Groups::RunnersController < Groups::ApplicationController
+  # Proper policies should be implemented per
+  # https://gitlab.com/gitlab-org/gitlab-ce/issues/45894
+  before_action :authorize_admin_pipeline!
+
+  before_action :runner, only: [:edit, :update, :destroy, :pause, :resume, :show]
+
+  def show
+    render 'shared/runners/show'
+  end
+
+  def edit
+  end
+
+  def update
+    if Ci::UpdateRunnerService.new(@runner).update(runner_params)
+      redirect_to group_runner_path(@group, @runner), notice: 'Runner was successfully updated.'
+    else
+      render 'edit'
+    end
+  end
+
+  def destroy
+    @runner.destroy
+
+    redirect_to group_settings_ci_cd_path(@group, anchor: 'runners-settings'), status: 302
+  end
+
+  def resume
+    if Ci::UpdateRunnerService.new(@runner).update(active: true)
+      redirect_to group_settings_ci_cd_path(@group, anchor: 'runners-settings'), notice: 'Runner was successfully updated.'
+    else
+      redirect_to group_settings_ci_cd_path(@group, anchor: 'runners-settings'), alert: 'Runner was not updated.'
+    end
+  end
+
+  def pause
+    if Ci::UpdateRunnerService.new(@runner).update(active: false)
+      redirect_to group_settings_ci_cd_path(@group, anchor: 'runners-settings'), notice: 'Runner was successfully updated.'
+    else
+      redirect_to group_settings_ci_cd_path(@group, anchor: 'runners-settings'), alert: 'Runner was not updated.'
+    end
+  end
+
+  private
+
+  def runner
+    @runner ||= @group.runners.find(params[:id])
+  end
+
+  def authorize_admin_pipeline!
+    return render_404 unless can?(current_user, :admin_pipeline, group)
+  end
+
+  def runner_params
+    params.require(:runner).permit(Ci::Runner::FORM_EDITABLE)
+  end
+end
diff --git a/app/controllers/groups/settings/badges_controller.rb b/app/controllers/groups/settings/badges_controller.rb
new file mode 100644
index 00000000000..ccbd0a3bc02
--- /dev/null
+++ b/app/controllers/groups/settings/badges_controller.rb
@@ -0,0 +1,13 @@
+module Groups
+  module Settings
+    class BadgesController < Groups::ApplicationController
+      include API::Helpers::RelatedResourcesHelpers
+
+      before_action :authorize_admin_group!
+
+      def index
+        @badge_api_endpoint = expose_url(api_v4_groups_badges_path(id: @group.id))
+      end
+    end
+  end
+end
diff --git a/app/controllers/groups/shared_projects_controller.rb b/app/controllers/groups/shared_projects_controller.rb
new file mode 100644
index 00000000000..7dec1f5f402
--- /dev/null
+++ b/app/controllers/groups/shared_projects_controller.rb
@@ -0,0 +1,33 @@
+module Groups
+  class SharedProjectsController < Groups::ApplicationController
+    respond_to :json
+    before_action :group
+    skip_cross_project_access_check :index
+
+    def index
+      shared_projects = GroupProjectsFinder.new(
+        group: group,
+        current_user: current_user,
+        params: finder_params,
+        options: { only_shared: true }
+      ).execute
+      serializer = GroupChildSerializer.new(current_user: current_user)
+                     .with_pagination(request, response)
+
+      render json: serializer.represent(shared_projects)
+    end
+
+    private
+
+    def finder_params
+      @finder_params ||= begin
+                           # Make the `search` param consistent for the frontend,
+                           # which will be using `filter`.
+                           params[:search] ||= params[:filter] if params[:filter]
+                           # Don't show archived projects
+                           params[:non_archived] = true
+                           params.permit(:sort, :search, :non_archived)
+                         end
+    end
+  end
+end
diff --git a/app/controllers/groups/variables_controller.rb b/app/controllers/groups/variables_controller.rb
index cb8771bc97e..4d8a20de017 100644
--- a/app/controllers/groups/variables_controller.rb
+++ b/app/controllers/groups/variables_controller.rb
@@ -15,7 +15,7 @@ module Groups
     def update
       if @group.update(group_variables_params)
         respond_to do |format|
-          format.json { return render_group_variables }
+          format.json { render_group_variables }
         end
       else
         respond_to do |format|
@@ -39,7 +39,7 @@ module Groups
     end
 
     def variable_params_attributes
-      %i[id key value protected _destroy]
+      %i[id key secret_value protected _destroy]
     end
 
     def authorize_admin_build!
diff --git a/app/controllers/groups_controller.rb b/app/controllers/groups_controller.rb
index 283c3e5f1e0..79fa5818359 100644
--- a/app/controllers/groups_controller.rb
+++ b/app/controllers/groups_controller.rb
@@ -173,7 +173,9 @@ class GroupsController < Groups::ApplicationController
       .new(@projects, offset: params[:offset].to_i, filter: event_filter)
       .to_a
 
-    Events::RenderService.new(current_user).execute(@events, atom_request: request.format.atom?)
+    Events::RenderService
+      .new(current_user)
+      .execute(@events, atom_request: request.format.atom?)
   end
 
   def user_actions
@@ -187,6 +189,6 @@ class GroupsController < Groups::ApplicationController
 
     params[:id] = group.to_param
 
-    url_for(params)
+    url_for(safe_params)
   end
 end
diff --git a/app/controllers/health_controller.rb b/app/controllers/health_controller.rb
index 16abf7bab7e..e54f372344d 100644
--- a/app/controllers/health_controller.rb
+++ b/app/controllers/health_controller.rb
@@ -1,5 +1,5 @@
 class HealthController < ActionController::Base
-  protect_from_forgery with: :exception, except: :storage_check
+  protect_from_forgery with: :exception, except: :storage_check, prepend: true
   include RequiresWhitelistedMonitoringClient
 
   CHECKS = [
diff --git a/app/controllers/import/base_controller.rb b/app/controllers/import/base_controller.rb
index c84fc2d305d..5766c6924cd 100644
--- a/app/controllers/import/base_controller.rb
+++ b/app/controllers/import/base_controller.rb
@@ -1,6 +1,17 @@
 class Import::BaseController < ApplicationController
   private
 
+  def find_already_added_projects(import_type)
+    current_user.created_projects.where(import_type: import_type).includes(:import_state)
+  end
+
+  def find_jobs(import_type)
+    current_user.created_projects
+      .includes(:import_state)
+      .where(import_type: import_type)
+      .to_json(only: [:id], methods: [:import_status])
+  end
+
   def find_or_create_namespace(names, owner)
     names = params[:target_namespace].presence || names
 
@@ -14,4 +25,8 @@ class Import::BaseController < ApplicationController
 
     current_user.namespace
   end
+
+  def project_save_error(project)
+    project.errors.full_messages.join(', ')
+  end
 end
diff --git a/app/controllers/import/bitbucket_controller.rb b/app/controllers/import/bitbucket_controller.rb
index 61d81ad8a71..fa31933e778 100644
--- a/app/controllers/import/bitbucket_controller.rb
+++ b/app/controllers/import/bitbucket_controller.rb
@@ -22,16 +22,14 @@ class Import::BitbucketController < Import::BaseController
 
     @repos, @incompatible_repos = repos.partition { |repo| repo.valid? }
 
-    @already_added_projects = current_user.created_projects.where(import_type: 'bitbucket')
+    @already_added_projects = find_already_added_projects('bitbucket')
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
     @repos.to_a.reject! { |repo| already_added_projects_names.include?(repo.full_name) }
   end
 
   def jobs
-    render json: current_user.created_projects
-                             .where(import_type: 'bitbucket')
-                             .to_json(only: [:id, :import_status])
+    render json: find_jobs('bitbucket')
   end
 
   def create
@@ -57,7 +55,7 @@ class Import::BitbucketController < Import::BaseController
       if project.persisted?
         render json: ProjectSerializer.new.represent(project)
       else
-        render json: { errors: project.errors.full_messages }, status: :unprocessable_entity
+        render json: { errors: project_save_error(project) }, status: :unprocessable_entity
       end
     else
       render json: { errors: 'This namespace has already been taken! Please choose another one.' }, status: :unprocessable_entity
diff --git a/app/controllers/import/fogbugz_controller.rb b/app/controllers/import/fogbugz_controller.rb
index 669eb31a995..2d665e05ac3 100644
--- a/app/controllers/import/fogbugz_controller.rb
+++ b/app/controllers/import/fogbugz_controller.rb
@@ -46,15 +46,14 @@ class Import::FogbugzController < Import::BaseController
 
     @repos = client.repos
 
-    @already_added_projects = current_user.created_projects.where(import_type: 'fogbugz')
+    @already_added_projects = find_already_added_projects('fogbugz')
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
     @repos.reject! { |repo| already_added_projects_names.include? repo.name }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: 'fogbugz').to_json(only: [:id, :import_status])
-    render json: jobs
+    render json: find_jobs('fogbugz')
   end
 
   def create
@@ -67,7 +66,7 @@ class Import::FogbugzController < Import::BaseController
     if project.persisted?
       render json: ProjectSerializer.new.represent(project)
     else
-      render json: { errors: project.errors.full_messages }, status: :unprocessable_entity
+      render json: { errors: project_save_error(project) }, status: :unprocessable_entity
     end
   end
 
diff --git a/app/controllers/import/github_controller.rb b/app/controllers/import/github_controller.rb
index eb7d5fca367..c9870332c0f 100644
--- a/app/controllers/import/github_controller.rb
+++ b/app/controllers/import/github_controller.rb
@@ -24,15 +24,14 @@ class Import::GithubController < Import::BaseController
 
   def status
     @repos = client.repos
-    @already_added_projects = current_user.created_projects.where(import_type: provider)
+    @already_added_projects = find_already_added_projects(provider)
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
     @repos.reject! { |repo| already_added_projects_names.include? repo.full_name }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: provider).to_json(only: [:id, :import_status])
-    render json: jobs
+    render json: find_jobs(provider)
   end
 
   def create
@@ -49,7 +48,7 @@ class Import::GithubController < Import::BaseController
       if project.persisted?
         render json: ProjectSerializer.new.represent(project)
       else
-        render json: { errors: project.errors.full_messages }, status: :unprocessable_entity
+        render json: { errors: project_save_error(project) }, status: :unprocessable_entity
       end
     else
       render json: { errors: 'This namespace has already been taken! Please choose another one.' }, status: :unprocessable_entity
diff --git a/app/controllers/import/gitlab_controller.rb b/app/controllers/import/gitlab_controller.rb
index 18f1d20f5a9..fccbdbca0f6 100644
--- a/app/controllers/import/gitlab_controller.rb
+++ b/app/controllers/import/gitlab_controller.rb
@@ -12,15 +12,14 @@ class Import::GitlabController < Import::BaseController
   def status
     @repos = client.projects
 
-    @already_added_projects = current_user.created_projects.where(import_type: "gitlab")
+    @already_added_projects = find_already_added_projects('gitlab')
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
     @repos = @repos.to_a.reject { |repo| already_added_projects_names.include? repo["path_with_namespace"] }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: "gitlab").to_json(only: [:id, :import_status])
-    render json: jobs
+    render json: find_jobs('gitlab')
   end
 
   def create
@@ -33,7 +32,7 @@ class Import::GitlabController < Import::BaseController
       if project.persisted?
         render json: ProjectSerializer.new.represent(project)
       else
-        render json: { errors: project.errors.full_messages }, status: :unprocessable_entity
+        render json: { errors: project_save_error(project) }, status: :unprocessable_entity
       end
     else
       render json: { errors: 'This namespace has already been taken! Please choose another one.' }, status: :unprocessable_entity
diff --git a/app/controllers/import/google_code_controller.rb b/app/controllers/import/google_code_controller.rb
index baa19fb383d..3bce27e810a 100644
--- a/app/controllers/import/google_code_controller.rb
+++ b/app/controllers/import/google_code_controller.rb
@@ -73,15 +73,14 @@ class Import::GoogleCodeController < Import::BaseController
     @repos = client.repos
     @incompatible_repos = client.incompatible_repos
 
-    @already_added_projects = current_user.created_projects.where(import_type: "google_code")
+    @already_added_projects = find_already_added_projects('google_code')
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
     @repos.reject! { |repo| already_added_projects_names.include? repo.name }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: "google_code").to_json(only: [:id, :import_status])
-    render json: jobs
+    render json: find_jobs('google_code')
   end
 
   def create
@@ -93,7 +92,7 @@ class Import::GoogleCodeController < Import::BaseController
     if project.persisted?
       render json: ProjectSerializer.new.represent(project)
     else
-      render json: { errors: project.errors.full_messages }, status: :unprocessable_entity
+      render json: { errors: project_save_error(project) }, status: :unprocessable_entity
     end
   end
 
diff --git a/app/controllers/jwt_controller.rb b/app/controllers/jwt_controller.rb
index 7d6fe6a0232..67057b5b126 100644
--- a/app/controllers/jwt_controller.rb
+++ b/app/controllers/jwt_controller.rb
@@ -25,8 +25,7 @@ class JwtController < ApplicationController
     authenticate_with_http_basic do |login, password|
       @authentication_result = Gitlab::Auth.find_for_git_client(login, password, project: nil, ip: request.ip)
 
-      if @authentication_result.failed? ||
-          (@authentication_result.actor.present? && !@authentication_result.actor.is_a?(User))
+      if @authentication_result.failed?
         render_unauthorized
       end
     end
diff --git a/app/controllers/ldap/omniauth_callbacks_controller.rb b/app/controllers/ldap/omniauth_callbacks_controller.rb
new file mode 100644
index 00000000000..fb24edb8602
--- /dev/null
+++ b/app/controllers/ldap/omniauth_callbacks_controller.rb
@@ -0,0 +1,31 @@
+class Ldap::OmniauthCallbacksController < OmniauthCallbacksController
+  extend ::Gitlab::Utils::Override
+
+  def self.define_providers!
+    return unless Gitlab::Auth::LDAP::Config.enabled?
+
+    Gitlab::Auth::LDAP::Config.available_servers.each do |server|
+      alias_method server['provider_name'], :ldap
+    end
+  end
+
+  # We only find ourselves here
+  # if the authentication to LDAP was successful.
+  def ldap
+    sign_in_user_flow(Gitlab::Auth::LDAP::User)
+  end
+
+  define_providers!
+
+  override :set_remember_me
+  def set_remember_me(user)
+    user.remember_me = params[:remember_me] if user.persisted?
+  end
+
+  override :fail_login
+  def fail_login(user)
+    flash[:alert] = 'Access denied for your LDAP account.'
+
+    redirect_to new_user_session_path
+  end
+end
diff --git a/app/controllers/metrics_controller.rb b/app/controllers/metrics_controller.rb
index 33b682d2859..0400ffcfee5 100644
--- a/app/controllers/metrics_controller.rb
+++ b/app/controllers/metrics_controller.rb
@@ -1,7 +1,7 @@
 class MetricsController < ActionController::Base
   include RequiresWhitelistedMonitoringClient
 
-  protect_from_forgery with: :exception
+  protect_from_forgery with: :exception, prepend: true
 
   def index
     response = if Gitlab::Metrics.prometheus_metrics_enabled?
diff --git a/app/controllers/omniauth_callbacks_controller.rb b/app/controllers/omniauth_callbacks_controller.rb
index fff249577a2..1547d4b5972 100644
--- a/app/controllers/omniauth_callbacks_controller.rb
+++ b/app/controllers/omniauth_callbacks_controller.rb
@@ -2,74 +2,41 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
   include AuthenticatesWithTwoFactor
   include Devise::Controllers::Rememberable
 
-  protect_from_forgery except: [:kerberos, :saml, :cas3]
+  protect_from_forgery except: [:kerberos, :saml, :cas3], prepend: true
 
-  Gitlab.config.omniauth.providers.each do |provider|
-    define_method provider['name'] do
-      handle_omniauth
-    end
+  def handle_omniauth
+    omniauth_flow(Gitlab::Auth::OAuth)
   end
 
-  if Gitlab::Auth::LDAP::Config.enabled?
-    Gitlab::Auth::LDAP::Config.available_servers.each do |server|
-      define_method server['provider_name'] do
-        ldap
-      end
+  AuthHelper.providers_for_base_controller.each do |provider|
+    alias_method provider, :handle_omniauth
+  end
+
+  # Extend the standard implementation to also increment
+  # the number of failed sign in attempts
+  def failure
+    if params[:username].present? && AuthHelper.form_based_provider?(failed_strategy.name)
+      user = User.by_login(params[:username])
+
+      user&.increment_failed_attempts!
     end
+
+    super
   end
 
   # Extend the standard message generation to accept our custom exception
   def failure_message
-    exception = env["omniauth.error"]
+    exception = request.env["omniauth.error"]
     error   = exception.error_reason if exception.respond_to?(:error_reason)
     error ||= exception.error        if exception.respond_to?(:error)
     error ||= exception.message      if exception.respond_to?(:message)
-    error ||= env["omniauth.error.type"].to_s
-    error.to_s.humanize if error
-  end
-
-  # We only find ourselves here
-  # if the authentication to LDAP was successful.
-  def ldap
-    ldap_user = Gitlab::Auth::LDAP::User.new(oauth)
-    ldap_user.save if ldap_user.changed? # will also save new users
-
-    @user = ldap_user.gl_user
-    @user.remember_me = params[:remember_me] if ldap_user.persisted?
+    error ||= request.env["omniauth.error.type"].to_s
 
-    # Do additional LDAP checks for the user filter and EE features
-    if ldap_user.allowed?
-      if @user.two_factor_enabled?
-        prompt_for_two_factor(@user)
-      else
-        log_audit_event(@user, with: oauth['provider'])
-        sign_in_and_redirect(@user)
-      end
-    else
-      fail_ldap_login
-    end
+    error.to_s.humanize if error
   end
 
   def saml
-    if current_user
-      log_audit_event(current_user, with: :saml)
-      # Update SAML identity if data has changed.
-      identity = current_user.identities.with_extern_uid(:saml, oauth['uid']).take
-      if identity.nil?
-        current_user.identities.create(extern_uid: oauth['uid'], provider: :saml)
-        redirect_to profile_account_path, notice: 'Authentication method updated'
-      else
-        redirect_to after_sign_in_path_for(current_user)
-      end
-    else
-      saml_user = Gitlab::Auth::Saml::User.new(oauth)
-      saml_user.save if saml_user.changed?
-      @user = saml_user.gl_user
-
-      continue_login_process
-    end
-  rescue Gitlab::Auth::OAuth::User::SignupDisabledError
-    handle_signup_error
+    omniauth_flow(Gitlab::Auth::Saml)
   end
 
   def omniauth_error
@@ -105,25 +72,36 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
 
   private
 
-  def handle_omniauth
+  def omniauth_flow(auth_module, identity_linker: nil)
     if current_user
-      # Add new authentication method
-      current_user.identities
-                  .with_extern_uid(oauth['provider'], oauth['uid'])
-                  .first_or_create(extern_uid: oauth['uid'])
       log_audit_event(current_user, with: oauth['provider'])
-      redirect_to profile_account_path, notice: 'Authentication method updated'
-    else
-      oauth_user = Gitlab::Auth::OAuth::User.new(oauth)
-      oauth_user.save
-      @user = oauth_user.gl_user
 
-      continue_login_process
+      identity_linker ||= auth_module::IdentityLinker.new(current_user, oauth)
+
+      identity_linker.link
+
+      if identity_linker.changed?
+        redirect_identity_linked
+      elsif identity_linker.failed?
+        redirect_identity_link_failed(identity_linker.error_message)
+      else
+        redirect_identity_exists
+      end
+    else
+      sign_in_user_flow(auth_module::User)
     end
-  rescue Gitlab::Auth::OAuth::User::SigninDisabledForProviderError
-    handle_disabled_provider
-  rescue Gitlab::Auth::OAuth::User::SignupDisabledError
-    handle_signup_error
+  end
+
+  def redirect_identity_exists
+    redirect_to after_sign_in_path_for(current_user)
+  end
+
+  def redirect_identity_link_failed(error_message)
+    redirect_to profile_account_path, notice: "Authentication failed: #{error_message}"
+  end
+
+  def redirect_identity_linked
+    redirect_to profile_account_path, notice: 'Authentication method updated'
   end
 
   def handle_service_ticket(provider, ticket)
@@ -132,21 +110,27 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
     session[:service_tickets][provider] = ticket
   end
 
-  def continue_login_process
-    # Only allow properly saved users to login.
-    if @user.persisted? && @user.valid?
-      log_audit_event(@user, with: oauth['provider'])
+  def sign_in_user_flow(auth_user_class)
+    auth_user = auth_user_class.new(oauth)
+    user = auth_user.find_and_update!
+
+    if auth_user.valid_sign_in?
+      log_audit_event(user, with: oauth['provider'])
 
-      if @user.two_factor_enabled?
-        params[:remember_me] = '1' if remember_me?
-        prompt_for_two_factor(@user)
+      set_remember_me(user)
+
+      if user.two_factor_enabled? && !auth_user.bypass_two_factor?
+        prompt_for_two_factor(user)
       else
-        remember_me(@user) if remember_me?
-        sign_in_and_redirect(@user)
+        sign_in_and_redirect(user)
       end
     else
-      fail_login
+      fail_login(user)
     end
+  rescue Gitlab::Auth::OAuth::User::SigninDisabledForProviderError
+    handle_disabled_provider
+  rescue Gitlab::Auth::OAuth::User::SignupDisabledError
+    handle_signup_error
   end
 
   def handle_signup_error
@@ -166,18 +150,12 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
     @oauth ||= request.env['omniauth.auth']
   end
 
-  def fail_login
-    error_message = @user.errors.full_messages.to_sentence
+  def fail_login(user)
+    error_message = user.errors.full_messages.to_sentence
 
     return redirect_to omniauth_error_path(oauth['provider'], error: error_message)
   end
 
-  def fail_ldap_login
-    flash[:alert] = 'Access denied for your LDAP account.'
-
-    redirect_to new_user_session_path
-  end
-
   def fail_auth0_login
     flash[:alert] = 'Wrong extern UID provided. Make sure Auth0 is configured correctly.'
 
@@ -196,6 +174,16 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
       .for_authentication.security_event
   end
 
+  def set_remember_me(user)
+    return unless remember_me?
+
+    if user.two_factor_enabled?
+      params[:remember_me] = '1'
+    else
+      remember_me(user)
+    end
+  end
+
   def remember_me?
     request_params = request.env['omniauth.params']
     (request_params['remember_me'] == '1') if request_params.present?
diff --git a/app/controllers/profiles/active_sessions_controller.rb b/app/controllers/profiles/active_sessions_controller.rb
new file mode 100644
index 00000000000..f0cdc228366
--- /dev/null
+++ b/app/controllers/profiles/active_sessions_controller.rb
@@ -0,0 +1,14 @@
+class Profiles::ActiveSessionsController < Profiles::ApplicationController
+  def index
+    @sessions = ActiveSession.list(current_user)
+  end
+
+  def destroy
+    ActiveSession.destroy(current_user, params[:id])
+
+    respond_to do |format|
+      format.html { redirect_to profile_active_sessions_url, status: 302 }
+      format.js { head :ok }
+    end
+  end
+end
diff --git a/app/controllers/profiles/keys_controller.rb b/app/controllers/profiles/keys_controller.rb
index f0e5d2aa94e..12a6cd11f80 100644
--- a/app/controllers/profiles/keys_controller.rb
+++ b/app/controllers/profiles/keys_controller.rb
@@ -23,7 +23,7 @@ class Profiles::KeysController < Profiles::ApplicationController
 
   def destroy
     @key = current_user.keys.find(params[:id])
-    @key.destroy
+    Keys::DestroyService.new(current_user).execute(@key)
 
     respond_to do |format|
       format.html { redirect_to profile_keys_url, status: 302 }
diff --git a/app/controllers/profiles_controller.rb b/app/controllers/profiles_controller.rb
index dbf61a17724..074db361949 100644
--- a/app/controllers/profiles_controller.rb
+++ b/app/controllers/profiles_controller.rb
@@ -34,12 +34,12 @@ class ProfilesController < Profiles::ApplicationController
     redirect_to profile_personal_access_tokens_path
   end
 
-  def reset_rss_token
+  def reset_feed_token
     Users::UpdateService.new(current_user, user: @user).execute! do |user|
-      user.reset_rss_token!
+      user.reset_feed_token!
     end
 
-    flash[:notice] = "RSS token was successfully reset"
+    flash[:notice] = 'Feed token was successfully reset'
 
     redirect_to profile_personal_access_tokens_path
   end
@@ -51,15 +51,21 @@ class ProfilesController < Profiles::ApplicationController
   end
 
   def update_username
-    result = Users::UpdateService.new(current_user, user: @user, username: user_params[:username]).execute
+    result = Users::UpdateService.new(current_user, user: @user, username: username_param).execute
 
-    options = if result[:status] == :success
-                { notice: "Username successfully changed" }
-              else
-                { alert: "Username change failed - #{result[:message]}" }
-              end
+    respond_to do |format|
+      if result[:status] == :success
+        message = s_("Profiles|Username successfully changed")
+
+        format.html { redirect_back_or_default(default: { action: 'show' }, options: { notice: message }) }
+        format.json { render json: { message: message }, status: :ok }
+      else
+        message = s_("Profiles|Username change failed - %{message}") % { message: result[:message] }
 
-    redirect_back_or_default(default: { action: 'show' }, options: options)
+        format.html { redirect_back_or_default(default: { action: 'show' }, options: { alert: message }) }
+        format.json { render json: { message: message }, status: :unprocessable_entity }
+      end
+    end
   end
 
   private
@@ -72,6 +78,10 @@ class ProfilesController < Profiles::ApplicationController
     return render_404 unless @user.can_change_username?
   end
 
+  def username_param
+    @username_param ||= user_params.require(:username)
+  end
+
   def user_params
     @user_params ||= params.require(:user).permit(
       :avatar,
@@ -83,8 +93,6 @@ class ProfilesController < Profiles::ApplicationController
       :linkedin,
       :location,
       :name,
-      :password,
-      :password_confirmation,
       :public_email,
       :skype,
       :twitter,
diff --git a/app/controllers/projects/application_controller.rb b/app/controllers/projects/application_controller.rb
index 6d9b42a2c04..5ab6d103c89 100644
--- a/app/controllers/projects/application_controller.rb
+++ b/app/controllers/projects/application_controller.rb
@@ -1,5 +1,6 @@
 class Projects::ApplicationController < ApplicationController
   include RoutableActions
+  include ChecksCollaboration
 
   skip_before_action :authenticate_user!
   before_action :project
@@ -24,21 +25,13 @@ class Projects::ApplicationController < ApplicationController
     params[:namespace_id] = project.namespace.to_param
     params[:project_id] = project.to_param
 
-    url_for(params)
+    url_for(safe_params)
   end
 
   def repository
     @repository ||= project.repository
   end
 
-  def can_collaborate_with_project?(project = nil, ref: nil)
-    project ||= @project
-
-    can?(current_user, :push_code, project) ||
-      (current_user && current_user.already_forked?(project)) ||
-      user_access(project).can_push_to_branch?(ref)
-  end
-
   def authorize_action!(action)
     unless can?(current_user, action, project)
       return access_denied!
@@ -91,9 +84,4 @@ class Projects::ApplicationController < ApplicationController
   def check_issues_available!
     return render_404 unless @project.feature_available?(:issues, current_user)
   end
-
-  def user_access(project)
-    @user_access ||= {}
-    @user_access[project] ||= Gitlab::UserAccess.new(current_user, project: project)
-  end
 end
diff --git a/app/controllers/projects/artifacts_controller.rb b/app/controllers/projects/artifacts_controller.rb
index 0837451cc49..6484a713f8e 100644
--- a/app/controllers/projects/artifacts_controller.rb
+++ b/app/controllers/projects/artifacts_controller.rb
@@ -1,20 +1,18 @@
 class Projects::ArtifactsController < Projects::ApplicationController
   include ExtractsPath
   include RendersBlob
+  include SendFileUpload
 
   layout 'project'
   before_action :authorize_read_build!
   before_action :authorize_update_build!, only: [:keep]
   before_action :extract_ref_name_and_path
+  before_action :set_request_format, only: [:file]
   before_action :validate_artifacts!
   before_action :entry, only: [:file]
 
   def download
-    if artifacts_file.file_storage?
-      send_file artifacts_file.path, disposition: 'attachment'
-    else
-      redirect_to artifacts_file.url
-    end
+    send_upload(artifacts_file, attachment: artifacts_file.filename)
   end
 
   def browse
@@ -45,8 +43,7 @@ class Projects::ArtifactsController < Projects::ApplicationController
   end
 
   def raw
-    path = Gitlab::Ci::Build::Artifacts::Path
-      .new(params[:path])
+    path = Gitlab::Ci::Build::Artifacts::Path.new(params[:path])
 
     send_artifacts_entry(build, path)
   end
@@ -75,7 +72,7 @@ class Projects::ArtifactsController < Projects::ApplicationController
   end
 
   def validate_artifacts!
-    render_404 unless build && build.artifacts?
+    render_404 unless build&.artifacts?
   end
 
   def build
@@ -105,4 +102,12 @@ class Projects::ArtifactsController < Projects::ApplicationController
 
     render_404 unless @entry.exists?
   end
+
+  def set_request_format
+    request.format = :html if set_request_format?
+  end
+
+  def set_request_format?
+    request.format != :json
+  end
 end
diff --git a/app/controllers/projects/blob_controller.rb b/app/controllers/projects/blob_controller.rb
index 0c1c286a0a4..ebc61264b39 100644
--- a/app/controllers/projects/blob_controller.rb
+++ b/app/controllers/projects/blob_controller.rb
@@ -3,10 +3,11 @@ class Projects::BlobController < Projects::ApplicationController
   include ExtractsPath
   include CreatesCommit
   include RendersBlob
+  include NotesHelper
   include ActionView::Helpers::SanitizeHelper
-
   prepend_before_action :authenticate_user!, only: [:edit]
 
+  before_action :set_request_format, only: [:edit, :show, :update]
   before_action :require_non_empty_project, except: [:new, :create]
   before_action :authorize_download_code!
 
@@ -92,6 +93,7 @@ class Projects::BlobController < Projects::ApplicationController
     @lines = Gitlab::Highlight.highlight(@blob.path, @blob.data, repository: @repository).lines
 
     @form = UnfoldForm.new(params)
+
     @lines = @lines[@form.since - 1..@form.to - 1].map(&:html_safe)
 
     if @form.bottom?
@@ -102,11 +104,50 @@ class Projects::BlobController < Projects::ApplicationController
       @match_line = "@@ -#{line}+#{line} @@"
     end
 
-    render layout: false
+    # We can keep only 'render_diff_lines' from this conditional when
+    # https://gitlab.com/gitlab-org/gitlab-ce/issues/44988 is done
+    if rendered_for_merge_request?
+      render_diff_lines
+    else
+      render layout: false
+    end
   end
 
   private
 
+  # Converts a String array to Gitlab::Diff::Line array
+  def render_diff_lines
+    @lines.map! do |line|
+      # These are marked as context lines but are loaded from blobs.
+      # We also have context lines loaded from diffs in other places.
+      diff_line = Gitlab::Diff::Line.new(line, 'context', nil, nil, nil)
+      diff_line.rich_text = line
+      diff_line
+    end
+
+    add_match_line
+
+    render json: @lines
+  end
+
+  def add_match_line
+    return unless @form.unfold?
+
+    if @form.bottom? && @form.to < @blob.lines.size
+      old_pos = @form.to - @form.offset
+      new_pos = @form.to
+    elsif @form.since != 1
+      old_pos = new_pos = @form.since
+    end
+
+    # Match line is not needed when it reaches the top limit or bottom limit of the file.
+    return unless new_pos
+
+    @match_line = Gitlab::Diff::Line.new(@match_line, 'match', nil, old_pos, new_pos)
+
+    @form.bottom? ? @lines.push(@match_line) : @lines.unshift(@match_line)
+  end
+
   def blob
     @blob ||= @repository.blob_at(@commit.id, @path)
 
@@ -188,6 +229,18 @@ class Projects::BlobController < Projects::ApplicationController
       .last_for_path(@repository, @ref, @path).sha
   end
 
+  # In Rails 4.2 if params[:format] is empty, Rails set it to :html
+  # But since Rails 5.0 the framework now looks for an extension.
+  # E.g. for `blob/master/CHANGELOG.md` in Rails 4 the format would be `:html`, but in Rails 5 on it'd be `:md`
+  # This before_action explicitly sets the `:html` format for all requests unless `:format` is set by a client e.g. by JS for XHR requests.
+  def set_request_format
+    request.format = :html if set_request_format?
+  end
+
+  def set_request_format?
+    params[:id].present? && params[:format].blank? && request.format != "json"
+  end
+
   def show_html
     environment_params = @repository.branch_exists?(@ref) ? { ref: @ref } : { commit: @commit }
     @environment = EnvironmentsFinder.new(@project, current_user, environment_params).execute.last
@@ -197,15 +250,14 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def show_json
-    json = blob_json(@blob)
-    return render_404 unless json
-
+    set_last_commit_sha
     path_segments = @path.split('/')
     path_segments.pop
     tree_path = path_segments.join('/')
 
-    render json: json.merge(
+    json = {
       id: @blob.id,
+      last_commit_sha: @last_commit_sha,
       path: blob.path,
       name: blob.name,
       extension: blob.extension,
@@ -221,6 +273,10 @@ class Projects::BlobController < Projects::ApplicationController
       commits_path: project_commits_path(project, @id),
       tree_path: project_tree_path(project, File.join(@ref, tree_path)),
       permalink: project_blob_path(project, File.join(@commit.id, @path))
-    )
+    }
+
+    json.merge!(blob_json(@blob) || {}) unless params[:viewer] == 'none'
+
+    render json: json
   end
 end
diff --git a/app/controllers/projects/boards_controller.rb b/app/controllers/projects/boards_controller.rb
index 949e54ff819..e7354a9e1f7 100644
--- a/app/controllers/projects/boards_controller.rb
+++ b/app/controllers/projects/boards_controller.rb
@@ -4,22 +4,25 @@ class Projects::BoardsController < Projects::ApplicationController
 
   before_action :check_issues_available!
   before_action :authorize_read_board!, only: [:index, :show]
+  before_action :boards, only: :index
   before_action :assign_endpoint_vars
 
   def index
-    @boards = Boards::ListService.new(project, current_user).execute
-
     respond_with_boards
   end
 
   def show
-    @board = project.boards.find(params[:id])
+    @board = boards.find(params[:id])
 
     respond_with_board
   end
 
   private
 
+  def boards
+    @boards ||= Boards::ListService.new(project, current_user).execute
+  end
+
   def assign_endpoint_vars
     @boards_endpoint = project_boards_path(project)
     @bulk_issues_path = bulk_update_project_issues_path(project)
diff --git a/app/controllers/projects/branches_controller.rb b/app/controllers/projects/branches_controller.rb
index 965cece600e..cd7250b10fc 100644
--- a/app/controllers/projects/branches_controller.rb
+++ b/app/controllers/projects/branches_controller.rb
@@ -21,15 +21,18 @@ class Projects::BranchesController < Projects::ApplicationController
         fetch_branches_by_mode
 
         @refs_pipelines = @project.pipelines.latest_successful_for_refs(@branches.map(&:name))
-        @merged_branch_names =
-          repository.merged_branch_names(@branches.map(&:name))
-        # n+1: https://gitlab.com/gitlab-org/gitlab-ce/issues/37429
+        @merged_branch_names = repository.merged_branch_names(@branches.map(&:name))
+
+        # n+1: https://gitlab.com/gitlab-org/gitaly/issues/992
         Gitlab::GitalyClient.allow_n_plus_1_calls do
           @max_commits = @branches.reduce(0) do |memo, branch|
             diverging_commit_counts = repository.diverging_commit_counts(branch)
             [memo, diverging_commit_counts[:behind], diverging_commit_counts[:ahead]].max
           end
+        end
 
+        # https://gitlab.com/gitlab-org/gitlab-ce/issues/48097
+        Gitlab::GitalyClient.allow_n_plus_1_calls do
           render
         end
       end
diff --git a/app/controllers/projects/ci/lints_controller.rb b/app/controllers/projects/ci/lints_controller.rb
new file mode 100644
index 00000000000..a2185572a20
--- /dev/null
+++ b/app/controllers/projects/ci/lints_controller.rb
@@ -0,0 +1,27 @@
+class Projects::Ci::LintsController < Projects::ApplicationController
+  before_action :authorize_create_pipeline!
+
+  def show
+  end
+
+  def create
+    @content = params[:content]
+    @error = Gitlab::Ci::YamlProcessor.validation_message(@content,  yaml_processor_options)
+    @status = @error.blank?
+
+    if @error.blank?
+      @config_processor = Gitlab::Ci::YamlProcessor.new(@content, yaml_processor_options)
+      @stages = @config_processor.stages
+      @builds = @config_processor.builds
+      @jobs = @config_processor.jobs
+    end
+
+    render :show
+  end
+
+  private
+
+  def yaml_processor_options
+    { project: @project, sha: project.repository.commit.sha }
+  end
+end
diff --git a/app/controllers/projects/clusters/applications_controller.rb b/app/controllers/projects/clusters/applications_controller.rb
index 90c7fa62216..a5c82caa897 100644
--- a/app/controllers/projects/clusters/applications_controller.rb
+++ b/app/controllers/projects/clusters/applications_controller.rb
@@ -5,9 +5,20 @@ class Projects::Clusters::ApplicationsController < Projects::ApplicationControll
   before_action :authorize_create_cluster!, only: [:create]
 
   def create
-    Clusters::Applications::ScheduleInstallationService.new(project, current_user,
-                                                            application_class: @application_class,
-                                                            cluster: @cluster).execute
+    application = @application_class.find_or_initialize_by(cluster: @cluster)
+
+    if application.has_attribute?(:hostname)
+      application.hostname = params[:hostname]
+    end
+
+    if application.respond_to?(:oauth_application)
+      application.oauth_application = create_oauth_application(application)
+    end
+
+    application.save!
+
+    Clusters::Applications::ScheduleInstallationService.new(project, current_user).execute(application)
+
     head :no_content
   rescue StandardError
     head :bad_request
@@ -22,4 +33,15 @@ class Projects::Clusters::ApplicationsController < Projects::ApplicationControll
   def application_class
     @application_class ||= Clusters::Cluster::APPLICATIONS[params[:application]] || render_404
   end
+
+  def create_oauth_application(application)
+    oauth_application_params = {
+      name: params[:application],
+      redirect_uri: application.callback_url,
+      scopes: 'api read_user openid',
+      owner: current_user
+    }
+
+    Applications::CreateService.new(current_user, oauth_application_params).execute(request)
+  end
 end
diff --git a/app/controllers/projects/clusters/gcp_controller.rb b/app/controllers/projects/clusters/gcp_controller.rb
index 6b0b22f8e73..c2c5ad61e01 100644
--- a/app/controllers/projects/clusters/gcp_controller.rb
+++ b/app/controllers/projects/clusters/gcp_controller.rb
@@ -1,9 +1,8 @@
 class Projects::Clusters::GcpController < Projects::ApplicationController
   before_action :authorize_read_cluster!
-  before_action :authorize_google_api, except: [:login]
-  before_action :authorize_google_project_billing, only: [:new, :create]
   before_action :authorize_create_cluster!, only: [:new, :create]
-  before_action :verify_billing, only: [:create]
+  before_action :authorize_google_api, except: :login
+  helper_method :token_in_session
 
   def login
     begin
@@ -37,21 +36,6 @@ class Projects::Clusters::GcpController < Projects::ApplicationController
 
   private
 
-  def verify_billing
-    case google_project_billing_status
-    when nil
-      flash.now[:alert] = _('We could not verify that one of your projects on GCP has billing enabled. Please try again.')
-    when false
-      flash.now[:alert] = _('Please <a href=%{link_to_billing} target="_blank" rel="noopener noreferrer">enable billing for one of your projects to be able to create a Kubernetes cluster</a>, then try again.').html_safe % { link_to_billing: "https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral" }
-    when true
-      return
-    end
-
-    @cluster = ::Clusters::Cluster.new(create_params)
-
-    render :new
-  end
-
   def create_params
     params.require(:cluster).permit(
       :enabled,
@@ -75,18 +59,8 @@ class Projects::Clusters::GcpController < Projects::ApplicationController
     end
   end
 
-  def authorize_google_project_billing
-    redis_token_key = CheckGcpProjectBillingWorker.store_session_token(token_in_session)
-    CheckGcpProjectBillingWorker.perform_async(redis_token_key)
-  end
-
-  def google_project_billing_status
-    CheckGcpProjectBillingWorker.get_billing_state(token_in_session)
-  end
-
   def token_in_session
-    @token_in_session ||=
-      session[GoogleApi::CloudPlatform::Client.session_key_for_token]
+    session[GoogleApi::CloudPlatform::Client.session_key_for_token]
   end
 
   def expires_at_in_session
diff --git a/app/controllers/projects/clusters_controller.rb b/app/controllers/projects/clusters_controller.rb
index aeaba3a0acf..d58039b7d42 100644
--- a/app/controllers/projects/clusters_controller.rb
+++ b/app/controllers/projects/clusters_controller.rb
@@ -71,19 +71,6 @@ class Projects::ClustersController < Projects::ApplicationController
                                  .present(current_user: current_user)
   end
 
-  def create_params
-    params.require(:cluster).permit(
-      :enabled,
-      :name,
-      :provider_type,
-      provider_gcp_attributes: [
-        :gcp_project_id,
-        :zone,
-        :num_nodes,
-        :machine_type
-      ])
-  end
-
   def update_params
     if cluster.managed?
       params.require(:cluster).permit(
diff --git a/app/controllers/projects/commit_controller.rb b/app/controllers/projects/commit_controller.rb
index effb484ef0f..1d1184d46d1 100644
--- a/app/controllers/projects/commit_controller.rb
+++ b/app/controllers/projects/commit_controller.rb
@@ -23,8 +23,12 @@ class Projects::CommitController < Projects::ApplicationController
 
     respond_to do |format|
       format.html  { render }
-      format.diff  { render text: @commit.to_diff }
-      format.patch { render text: @commit.to_patch }
+      format.diff  do
+        send_git_diff(@project.repository, @commit.diff_refs)
+      end
+      format.patch do
+        send_git_patch(@project.repository, @commit.diff_refs)
+      end
     end
   end
 
@@ -34,6 +38,7 @@ class Projects::CommitController < Projects::ApplicationController
 
   def pipelines
     @pipelines = @commit.pipelines.order(id: :desc)
+    @pipelines = @pipelines.where(ref: params[:ref]) if params[:ref]
 
     respond_to do |format|
       format.html
diff --git a/app/controllers/projects/commits_controller.rb b/app/controllers/projects/commits_controller.rb
index 7b7cb52d7ed..9e495061f4e 100644
--- a/app/controllers/projects/commits_controller.rb
+++ b/app/controllers/projects/commits_controller.rb
@@ -9,6 +9,7 @@ class Projects::CommitsController < Projects::ApplicationController
   before_action :assign_ref_vars
   before_action :authorize_download_code!
   before_action :set_commits
+  before_action :set_request_format, only: :show
 
   def show
     @merge_request = MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened
@@ -61,6 +62,19 @@ class Projects::CommitsController < Projects::ApplicationController
     @commits = prepare_commits_for_rendering(@commits)
   end
 
+  # Rails 5 sets request.format from the extension.
+  # Explicitly set to :html.
+  def set_request_format
+    request.format = :html if set_request_format?
+  end
+
+  # Rails 5 sets request.format from extension.
+  # In this case if the ref ends with `.atom`, it's expected to be the html response,
+  # not the atom one. So explicitly set request.format as :html to act like rails4.
+  def set_request_format?
+    request.format.to_s == "text/html" || @commits.ref.ends_with?("atom")
+  end
+
   def whitelist_query_limiting
     Gitlab::QueryLimiting.whitelist('https://gitlab.com/gitlab-org/gitlab-ce/issues/42330')
   end
diff --git a/app/controllers/projects/compare_controller.rb b/app/controllers/projects/compare_controller.rb
index 2b0c2ca97c0..f93e500a07a 100644
--- a/app/controllers/projects/compare_controller.rb
+++ b/app/controllers/projects/compare_controller.rb
@@ -8,8 +8,11 @@ class Projects::CompareController < Projects::ApplicationController
   # Authorize
   before_action :require_non_empty_project
   before_action :authorize_download_code!
-  before_action :define_ref_vars, only: [:index, :show, :diff_for_path]
-  before_action :define_diff_vars, only: [:show, :diff_for_path]
+  # Defining ivars
+  before_action :define_diffs, only: [:show, :diff_for_path]
+  before_action :define_environment, only: [:show]
+  before_action :define_diff_notes_disabled, only: [:show, :diff_for_path]
+  before_action :define_commits, only: [:show, :diff_for_path, :signatures]
   before_action :merge_request, only: [:index, :show]
 
   def index
@@ -22,9 +25,9 @@ class Projects::CompareController < Projects::ApplicationController
   end
 
   def diff_for_path
-    return render_404 unless @compare
+    return render_404 unless compare
 
-    render_diff_for_path(@compare.diffs(diff_options))
+    render_diff_for_path(compare.diffs(diff_options))
   end
 
   def create
@@ -41,30 +44,60 @@ class Projects::CompareController < Projects::ApplicationController
     end
   end
 
+  def signatures
+    respond_to do |format|
+      format.json do
+        render json: {
+          signatures: @commits.select(&:has_signature?).map do |commit|
+            {
+              commit_sha: commit.sha,
+              html: view_to_html_string('projects/commit/_signature', signature: commit.signature)
+            }
+          end
+        }
+      end
+    end
+  end
+
   private
 
-  def define_ref_vars
-    @start_ref = Addressable::URI.unescape(params[:from])
+  def compare
+    return @compare if defined?(@compare)
+
+    @compare = CompareService.new(@project, head_ref).execute(@project, start_ref)
+  end
+
+  def start_ref
+    @start_ref ||= Addressable::URI.unescape(params[:from])
+  end
+
+  def head_ref
+    return @ref if defined?(@ref)
+
     @ref = @head_ref = Addressable::URI.unescape(params[:to])
   end
 
-  def define_diff_vars
-    @compare = CompareService.new(@project, @head_ref)
-      .execute(@project, @start_ref)
+  def define_commits
+    @commits = compare.present? ? prepare_commits_for_rendering(compare.commits) : []
+  end
 
-    if @compare
-      @commits = prepare_commits_for_rendering(@compare.commits)
-      @diffs = @compare.diffs(diff_options)
+  def define_diffs
+    @diffs = compare.present? ? compare.diffs(diff_options) : []
+  end
 
-      environment_params = @repository.branch_exists?(@head_ref) ? { ref: @head_ref } : { commit: @compare.commit }
+  def define_environment
+    if compare
+      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
     end
   end
 
+  def define_diff_notes_disabled
+    @diff_notes_disabled = compare.present?
+  end
+
   def merge_request
     @merge_request ||= MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened
-      .find_by(source_project: @project, source_branch: @head_ref, target_branch: @start_ref)
+      .find_by(source_project: @project, source_branch: head_ref, target_branch: start_ref)
   end
 end
diff --git a/app/controllers/projects/deploy_tokens_controller.rb b/app/controllers/projects/deploy_tokens_controller.rb
new file mode 100644
index 00000000000..2f91b8f36de
--- /dev/null
+++ b/app/controllers/projects/deploy_tokens_controller.rb
@@ -0,0 +1,10 @@
+class Projects::DeployTokensController < Projects::ApplicationController
+  before_action :authorize_admin_project!
+
+  def revoke
+    @token = @project.deploy_tokens.find(params[:id])
+    @token.revoke!
+
+    redirect_to project_settings_repository_path(project)
+  end
+end
diff --git a/app/controllers/projects/discussions_controller.rb b/app/controllers/projects/discussions_controller.rb
index cba9a53dc4b..78b9d53a780 100644
--- a/app/controllers/projects/discussions_controller.rb
+++ b/app/controllers/projects/discussions_controller.rb
@@ -4,8 +4,8 @@ class Projects::DiscussionsController < Projects::ApplicationController
 
   before_action :check_merge_requests_available!
   before_action :merge_request
-  before_action :discussion
-  before_action :authorize_resolve_discussion!
+  before_action :discussion, only: [:resolve, :unresolve]
+  before_action :authorize_resolve_discussion!, only: [:resolve, :unresolve]
 
   def resolve
     Discussions::ResolveService.new(project, current_user, merge_request: merge_request).execute(discussion)
@@ -21,7 +21,7 @@ class Projects::DiscussionsController < Projects::ApplicationController
 
   def show
     render json: {
-      discussion_html: view_to_html_string('discussions/_diff_with_notes', discussion: discussion, expanded: true)
+      truncated_diff_lines: discussion.try(:truncated_diff_lines)
     }
   end
 
@@ -29,11 +29,6 @@ class Projects::DiscussionsController < Projects::ApplicationController
 
   def render_discussion
     if serialize_notes?
-      # TODO - It is not needed to serialize notes when resolving
-      # or unresolving discussions. We should remove this behavior
-      # passing a parameter to DiscussionEntity to return an empty array
-      # for notes.
-      # Check issue: https://gitlab.com/gitlab-org/gitlab-ce/issues/42853
       prepare_notes_for_rendering(discussion.notes, merge_request)
       render_json_with_discussions_serializer
     else
@@ -43,8 +38,8 @@ class Projects::DiscussionsController < Projects::ApplicationController
 
   def render_json_with_discussions_serializer
     render json:
-      DiscussionSerializer.new(project: project, noteable: discussion.noteable, current_user: current_user)
-      .represent(discussion, context: self)
+      DiscussionSerializer.new(project: project, noteable: discussion.noteable, current_user: current_user, note_entity:  ProjectNoteEntity)
+      .represent(discussion, context: self, render_truncated_diff_lines: true)
   end
 
   # Legacy method used to render discussions notes when not using Vue on views.
diff --git a/app/controllers/projects/environments_controller.rb b/app/controllers/projects/environments_controller.rb
index 52d528e816e..0821362f5df 100644
--- a/app/controllers/projects/environments_controller.rb
+++ b/app/controllers/projects/environments_controller.rb
@@ -7,6 +7,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   before_action :authorize_admin_environment!, only: [:terminal, :terminal_websocket_authorize]
   before_action :environment, only: [:show, :edit, :update, :stop, :terminal, :terminal_websocket_authorize, :metrics]
   before_action :verify_api_request!, only: :terminal_websocket_authorize
+  before_action :expire_etag_cache, only: [:index]
 
   def index
     @environments = project.environments
@@ -148,6 +149,15 @@ class Projects::EnvironmentsController < Projects::ApplicationController
     Gitlab::Workhorse.verify_api_request!(request.headers)
   end
 
+  def expire_etag_cache
+    return if request.format.json?
+
+    # this forces to reload json content
+    Gitlab::EtagCaching::Store.new.tap do |store|
+      store.touch(project_environments_path(project, format: :json))
+    end
+  end
+
   def environment_params
     params.require(:environment).permit(:name, :external_url)
   end
diff --git a/app/controllers/projects/git_http_client_controller.rb b/app/controllers/projects/git_http_client_controller.rb
index dd5e66f60e3..07249fe3182 100644
--- a/app/controllers/projects/git_http_client_controller.rb
+++ b/app/controllers/projects/git_http_client_controller.rb
@@ -7,6 +7,7 @@ class Projects::GitHttpClientController < Projects::ApplicationController
   attr_reader :authentication_result, :redirected_path
 
   delegate :actor, :authentication_abilities, to: :authentication_result, allow_nil: true
+  delegate :type, to: :authentication_result, allow_nil: true, prefix: :auth_result
 
   alias_method :user, :actor
   alias_method :authenticated_user, :actor
diff --git a/app/controllers/projects/git_http_controller.rb b/app/controllers/projects/git_http_controller.rb
index 45910a9be44..1dcf837f78e 100644
--- a/app/controllers/projects/git_http_controller.rb
+++ b/app/controllers/projects/git_http_controller.rb
@@ -64,7 +64,7 @@ class Projects::GitHttpController < Projects::GitHttpClientController
     @access ||= access_klass.new(access_actor, project,
       'http', authentication_abilities: authentication_abilities,
               namespace_path: params[:namespace_id], project_path: project_path,
-              redirected_path: redirected_path)
+              redirected_path: redirected_path, auth_result_type: auth_result_type)
   end
 
   def access_actor
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index b14939c4216..7c897b2d86c 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -4,14 +4,15 @@ class Projects::IssuesController < Projects::ApplicationController
   include IssuableActions
   include ToggleAwardEmoji
   include IssuableCollections
+  include IssuesCalendar
   include SpammableActions
 
   prepend_before_action :authenticate_user!, only: [:new]
 
   before_action :whitelist_query_limiting, only: [:create, :create_merge_request, :move, :bulk_update]
   before_action :check_issues_available!
-  before_action :issue, except: [:index, :new, :create, :bulk_update]
-  before_action :set_issuables_index, only: [:index]
+  before_action :issue, except: [:index, :calendar, :new, :create, :bulk_update]
+  before_action :set_issuables_index, only: [:index, :calendar]
 
   # Allow write(create) issue
   before_action :authorize_create_issue!, only: [:new, :create]
@@ -20,7 +21,7 @@ class Projects::IssuesController < Projects::ApplicationController
   before_action :authorize_update_issuable!, only: [:edit, :update, :move]
 
   # Allow create a new branch and empty WIP merge request from current issue
-  before_action :authorize_create_merge_request!, only: [:create_merge_request]
+  before_action :authorize_create_merge_request_from!, only: [:create_merge_request]
 
   respond_to :html
 
@@ -39,6 +40,10 @@ class Projects::IssuesController < Projects::ApplicationController
     end
   end
 
+  def calendar
+    render_issues_calendar(@issuables)
+  end
+
   def new
     params[:issue] ||= ActionController::Parameters.new(
       assignee_ids: ""
@@ -134,11 +139,11 @@ class Projects::IssuesController < Projects::ApplicationController
   def can_create_branch
     can_create = current_user &&
       can?(current_user, :push_code, @project) &&
-      @issue.can_be_worked_on?(current_user)
+      @issue.can_be_worked_on?
 
     respond_to do |format|
       format.json do
-        render json: { can_create_branch: can_create, has_related_branch: @issue.has_related_branch? }
+        render json: { can_create_branch: can_create, suggested_branch_name: @issue.suggested_branch_name }
       end
     end
   end
@@ -177,7 +182,7 @@ class Projects::IssuesController < Projects::ApplicationController
   end
 
   def authorize_create_merge_request!
-    render_404 unless can?(current_user, :push_code, @project) && @issue.can_be_worked_on?(current_user)
+    render_404 unless can?(current_user, :push_code, @project) && @issue.can_be_worked_on?
   end
 
   def render_issue_json
diff --git a/app/controllers/projects/jobs_controller.rb b/app/controllers/projects/jobs_controller.rb
index 8b54ba3ad7c..63f0aea3195 100644
--- a/app/controllers/projects/jobs_controller.rb
+++ b/app/controllers/projects/jobs_controller.rb
@@ -1,6 +1,7 @@
 class Projects::JobsController < Projects::ApplicationController
-  before_action :build, except: [:index, :cancel_all]
+  include SendFileUpload
 
+  before_action :build, except: [:index, :cancel_all]
   before_action :authorize_read_build!,
     only: [:index, :show, :status, :raw, :trace]
   before_action :authorize_update_build!,
@@ -43,8 +44,11 @@ class Projects::JobsController < Projects::ApplicationController
   end
 
   def show
-    @builds = @project.pipelines.find_by_sha(@build.sha).builds.order('id DESC')
-    @builds = @builds.where("id not in (?)", @build.id)
+    @builds = @project.pipelines
+      .find_by_sha(@build.sha)
+      .builds
+      .order('id DESC')
+      .present(current_user: current_user)
     @pipeline = @build.pipeline
 
     respond_to do |format|
@@ -117,11 +121,17 @@ class Projects::JobsController < Projects::ApplicationController
   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
+    if trace_artifact_file
+      send_upload(trace_artifact_file,
+                  send_params: raw_send_params,
+                  redirect_params: raw_redirect_params)
+    else
+      build.trace.read do |stream|
+        if stream.file?
+          send_file stream.path, type: 'text/plain; charset=utf-8', disposition: 'inline'
+        else
+          send_data stream.raw, type: 'text/plain; charset=utf-8', disposition: 'inline', filename: 'job.log'
+        end
       end
     end
   end
@@ -136,6 +146,18 @@ class Projects::JobsController < Projects::ApplicationController
     return access_denied! unless can?(current_user, :erase_build, build)
   end
 
+  def raw_send_params
+    { type: 'text/plain; charset=utf-8', disposition: 'inline' }
+  end
+
+  def raw_redirect_params
+    { query: { 'response-content-type' => 'text/plain; charset=utf-8', 'response-content-disposition' => 'inline' } }
+  end
+
+  def trace_artifact_file
+    @trace_artifact_file ||= build.job_artifacts_trace&.file
+  end
+
   def build
     @build ||= project.builds.find(params[:id])
       .present(current_user: current_user)
diff --git a/app/controllers/projects/labels_controller.rb b/app/controllers/projects/labels_controller.rb
index 99790b8e7e8..91016f6494e 100644
--- a/app/controllers/projects/labels_controller.rb
+++ b/app/controllers/projects/labels_controller.rb
@@ -112,7 +112,7 @@ class Projects::LabelsController < Projects::ApplicationController
     begin
       return render_404 unless promote_service.execute(@label)
 
-      flash[:notice] = "#{@label.title} promoted to group label."
+      flash[:notice] = "#{@label.title} promoted to <a href=\"#{group_labels_path(@project.group)}\">group label</a>.".html_safe
       respond_to do |format|
         format.html do
           redirect_to(project_labels_path(@project), status: 303)
@@ -150,7 +150,8 @@ class Projects::LabelsController < Projects::ApplicationController
   end
 
   def find_labels
-    @available_labels ||= LabelsFinder.new(current_user, project_id: @project.id).execute
+    @available_labels ||=
+      LabelsFinder.new(current_user, project_id: @project.id, include_ancestor_groups: params[:include_ancestor_groups]).execute
   end
 
   def authorize_admin_labels!
diff --git a/app/controllers/projects/lfs_api_controller.rb b/app/controllers/projects/lfs_api_controller.rb
index c77f10ef1dd..ee4ed674110 100644
--- a/app/controllers/projects/lfs_api_controller.rb
+++ b/app/controllers/projects/lfs_api_controller.rb
@@ -41,7 +41,7 @@ class Projects::LfsApiController < Projects::GitHttpClientController
 
   def existing_oids
     @existing_oids ||= begin
-      storage_project.lfs_objects.where(oid: objects.map { |o| o['oid'].to_s }).pluck(:oid)
+      project.all_lfs_objects.where(oid: objects.map { |o| o['oid'].to_s }).pluck(:oid)
     end
   end
 
diff --git a/app/controllers/projects/lfs_storage_controller.rb b/app/controllers/projects/lfs_storage_controller.rb
index 941638db427..45c98d60822 100644
--- a/app/controllers/projects/lfs_storage_controller.rb
+++ b/app/controllers/projects/lfs_storage_controller.rb
@@ -1,6 +1,7 @@
 class Projects::LfsStorageController < Projects::GitHttpClientController
   include LfsRequest
   include WorkhorseRequest
+  include SendFileUpload
 
   skip_before_action :verify_workhorse_api!, only: [:download, :upload_finalize]
 
@@ -11,25 +12,30 @@ class Projects::LfsStorageController < Projects::GitHttpClientController
       return
     end
 
-    send_file lfs_object.file.path, content_type: "application/octet-stream"
+    send_upload(lfs_object.file, send_params: { content_type: "application/octet-stream" })
   end
 
   def upload_authorize
     set_workhorse_internal_api_content_type
-    render json: Gitlab::Workhorse.lfs_upload_ok(oid, size)
+
+    authorized = LfsObjectUploader.workhorse_authorize(has_length: true)
+    authorized.merge!(LfsOid: oid, LfsSize: size)
+
+    render json: authorized
   end
 
   def upload_finalize
-    unless tmp_filename
-      render_lfs_forbidden
-      return
-    end
-
-    if store_file(oid, size, tmp_filename)
+    if store_file!(oid, size)
       head 200
     else
       render plain: 'Unprocessable entity', status: 422
     end
+  rescue ActiveRecord::RecordInvalid
+    render_lfs_forbidden
+  rescue UploadedFile::InvalidPathError
+    render_lfs_forbidden
+  rescue ObjectStorage::RemoteStoreError
+    render_lfs_forbidden
   end
 
   private
@@ -50,38 +56,28 @@ class Projects::LfsStorageController < Projects::GitHttpClientController
     params[:size].to_i
   end
 
-  def tmp_filename
-    name = request.headers['X-Gitlab-Lfs-Tmp']
-    return if name.include?('/')
-    return unless oid.present? && name.start_with?(oid)
-
-    name
-  end
+  def store_file!(oid, size)
+    object = LfsObject.find_by(oid: oid, size: size)
+    unless object&.file&.exists?
+      object = create_file!(oid, size)
+    end
 
-  def store_file(oid, size, tmp_file)
-    # Define tmp_file_path early because we use it in "ensure"
-    tmp_file_path = File.join(LfsObjectUploader.workhorse_upload_path, tmp_file)
+    return unless object
 
-    object = LfsObject.find_or_create_by(oid: oid, size: size)
-    file_exists = object.file.exists? || move_tmp_file_to_storage(object, tmp_file_path)
-    file_exists && link_to_project(object)
-  ensure
-    FileUtils.rm_f(tmp_file_path)
+    link_to_project!(object)
   end
 
-  def move_tmp_file_to_storage(object, path)
-    File.open(path) do |f|
-      object.file = f
-    end
+  def create_file!(oid, size)
+    uploaded_file = UploadedFile.from_params(
+      params, :file, LfsObjectUploader.workhorse_local_upload_path)
+    return unless uploaded_file
 
-    object.file.store!
-    object.save
+    LfsObject.create!(oid: oid, size: size, file: uploaded_file)
   end
 
-  def link_to_project(object)
+  def link_to_project!(object)
     if object && !object.projects.exists?(storage_project.id)
-      object.projects << storage_project
-      object.save
+      object.lfs_objects_projects.create!(project: storage_project)
     end
   end
 end
diff --git a/app/controllers/projects/merge_requests/application_controller.rb b/app/controllers/projects/merge_requests/application_controller.rb
index 67d4ea2ca8f..8e4aeec16dc 100644
--- a/app/controllers/projects/merge_requests/application_controller.rb
+++ b/app/controllers/projects/merge_requests/application_controller.rb
@@ -15,7 +15,7 @@ class Projects::MergeRequests::ApplicationController < Projects::ApplicationCont
 
   def merge_request_params_attributes
     [
-      :allow_maintainer_to_push,
+      :allow_collaboration,
       :assignee_id,
       :description,
       :force_remove_source_branch,
@@ -24,6 +24,7 @@ class Projects::MergeRequests::ApplicationController < Projects::ApplicationCont
       :source_branch,
       :source_project_id,
       :state_event,
+      :squash,
       :target_branch,
       :target_project_id,
       :task_num,
diff --git a/app/controllers/projects/merge_requests/creations_controller.rb b/app/controllers/projects/merge_requests/creations_controller.rb
index a90030a8312..81129456ad8 100644
--- a/app/controllers/projects/merge_requests/creations_controller.rb
+++ b/app/controllers/projects/merge_requests/creations_controller.rb
@@ -5,7 +5,7 @@ class Projects::MergeRequests::CreationsController < Projects::MergeRequests::Ap
 
   skip_before_action :merge_request
   before_action :whitelist_query_limiting, only: [:create]
-  before_action :authorize_create_merge_request!
+  before_action :authorize_create_merge_request_from!
   before_action :apply_diff_view_cookie!, only: [:diffs, :diff_for_path]
   before_action :build_merge_request, except: [:create]
 
@@ -83,13 +83,6 @@ class Projects::MergeRequests::CreationsController < Projects::MergeRequests::Ap
     render layout: false
   end
 
-  def update_branches
-    @target_project = selected_target_project
-    @target_branches = @target_project ? @target_project.repository.branch_names : []
-
-    render layout: false
-  end
-
   private
 
   def build_merge_request
diff --git a/app/controllers/projects/merge_requests/diffs_controller.rb b/app/controllers/projects/merge_requests/diffs_controller.rb
index fe8525a488c..48e02581d54 100644
--- a/app/controllers/projects/merge_requests/diffs_controller.rb
+++ b/app/controllers/projects/merge_requests/diffs_controller.rb
@@ -9,17 +9,21 @@ class Projects::MergeRequests::DiffsController < Projects::MergeRequests::Applic
   before_action :define_diff_comment_vars
 
   def show
-    @environment = @merge_request.environments_for(current_user).last
-
-    render json: { html: view_to_html_string("projects/merge_requests/diffs/_diffs") }
+    render_diffs
   end
 
   def diff_for_path
-    render_diff_for_path(@diffs)
+    render_diffs
   end
 
   private
 
+  def render_diffs
+    @environment = @merge_request.environments_for(current_user).last
+
+    render json: DiffsSerializer.new(current_user: current_user).represent(@diffs, additional_attributes)
+  end
+
   def define_diff_vars
     @merge_request_diffs = @merge_request.merge_request_diffs.viewable.order_id_desc
     @compare = commit || find_merge_request_diff_compare
@@ -63,6 +67,19 @@ class Projects::MergeRequests::DiffsController < Projects::MergeRequests::Applic
     end
   end
 
+  def additional_attributes
+    {
+      environment: @environment,
+      merge_request: @merge_request,
+      merge_request_diff: @merge_request_diff,
+      merge_request_diffs: @merge_request_diffs,
+      start_version: @start_version,
+      start_sha: @start_sha,
+      commit: @commit,
+      latest_diff: @merge_request_diff&.latest?
+    }
+  end
+
   def define_diff_comment_vars
     @new_diff_note_attrs = {
       noteable_type: 'MergeRequest',
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 54e7d81de6a..a7c5f858c42 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -28,21 +28,23 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
   end
 
   def show
-    validates_merge_request
-    close_merge_request_without_source_project
-    check_if_can_be_merged
-
-    # Return if the response has already been rendered
-    return if response_body
+    close_merge_request_if_no_source_project
+    mark_merge_request_mergeable
 
     respond_to do |format|
       format.html do
+        # use next to appease Rubocop
+        next render('invalid') if target_branch_missing?
+
         # Build a note object for comment form
         @note = @project.notes.new(noteable: @merge_request)
 
         @noteable = @merge_request
         @commits_count = @merge_request.commits_count
 
+        # TODO cleanup- Fatih Simon Create an issue to remove these after the refactoring
+        # we no longer render notes here. I see it will require a small frontend refactoring,
+        # since we gather some data from this collection.
         @discussions = @merge_request.discussions
         @notes = prepare_notes_for_rendering(@discussions.flat_map(&:notes), @noteable)
 
@@ -60,13 +62,13 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
       end
 
       format.patch  do
-        return render_404 unless @merge_request.diff_refs
+        break render_404 unless @merge_request.diff_refs
 
         send_git_patch @project.repository, @merge_request.diff_refs
       end
 
       format.diff do
-        return render_404 unless @merge_request.diff_refs
+        break render_404 unless @merge_request.diff_refs
 
         send_git_diff @project.repository, @merge_request.diff_refs
       end
@@ -116,7 +118,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
       end
 
       format.json do
-        render json: @merge_request.to_json(include: { milestone: {}, assignee: { only: [:name, :username], methods: [:avatar_url] }, labels: { methods: :text_color } }, methods: [:task_status, :task_status_short])
+        render json: serializer.represent(@merge_request, serializer: 'basic')
       end
     end
   rescue ActiveRecord::StaleObjectError
@@ -234,26 +236,12 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
   alias_method :issuable, :merge_request
   alias_method :awardable, :merge_request
 
-  def validates_merge_request
-    # Show git not found page
-    # if there is no saved commits between source & target branch
-    if @merge_request.has_no_commits?
-      # and if target branch doesn't exist
-      return invalid_mr unless @merge_request.target_branch_exists?
-    end
-  end
-
-  def invalid_mr
-    # Render special view for MR with removed target branch
-    render 'invalid'
-  end
-
   def merge_params
     params.permit(merge_params_attributes)
   end
 
   def merge_params_attributes
-    [:should_remove_source_branch, :commit_message]
+    [:should_remove_source_branch, :commit_message, :squash]
   end
 
   def merge_when_pipeline_succeeds_active?
@@ -261,7 +249,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
       @merge_request.head_pipeline && @merge_request.head_pipeline.active?
   end
 
-  def close_merge_request_without_source_project
+  def close_merge_request_if_no_source_project
     if !@merge_request.source_project && @merge_request.open?
       @merge_request.close
     end
@@ -269,7 +257,11 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
 
   private
 
-  def check_if_can_be_merged
+  def target_branch_missing?
+    @merge_request.has_no_commits? && !@merge_request.target_branch_exists?
+  end
+
+  def mark_merge_request_mergeable
     @merge_request.check_if_can_be_merged
   end
 
@@ -282,7 +274,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
 
     return :sha_mismatch if params[:sha] != @merge_request.diff_head_sha
 
-    @merge_request.update(merge_error: nil)
+    @merge_request.update(merge_error: nil, squash: merge_params.fetch(:squash, false))
 
     if params[:merge_when_pipeline_succeeds].present?
       return :failed unless @merge_request.actual_head_pipeline
@@ -296,14 +288,14 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
       elsif @merge_request.actual_head_pipeline.success?
         # This can be triggered when a user clicks the auto merge button while
         # the tests finish at about the same time
-        @merge_request.merge_async(current_user.id, params)
+        @merge_request.merge_async(current_user.id, merge_params)
 
         :success
       else
         :failed
       end
     else
-      @merge_request.merge_async(current_user.id, params)
+      @merge_request.merge_async(current_user.id, merge_params)
 
       :success
     end
diff --git a/app/controllers/projects/milestones_controller.rb b/app/controllers/projects/milestones_controller.rb
index ff93147d00f..f85dcfe6bfc 100644
--- a/app/controllers/projects/milestones_controller.rb
+++ b/app/controllers/projects/milestones_controller.rb
@@ -1,4 +1,5 @@
 class Projects::MilestonesController < Projects::ApplicationController
+  include Gitlab::Utils::StrongMemoize
   include MilestoneActions
 
   before_action :check_issuables_available!
@@ -14,7 +15,7 @@ class Projects::MilestonesController < Projects::ApplicationController
 
   def index
     @sort = params[:sort] || 'due_date_asc'
-    @milestones = milestones.sort(@sort)
+    @milestones = milestones.sort_by_attribute(@sort)
 
     respond_to do |format|
       format.html do
@@ -42,6 +43,10 @@ class Projects::MilestonesController < Projects::ApplicationController
 
   def show
     @project_namespace = @project.namespace.becomes(Namespace)
+
+    respond_to do |format|
+      format.html
+    end
   end
 
   def create
@@ -70,9 +75,9 @@ class Projects::MilestonesController < Projects::ApplicationController
   end
 
   def promote
-    Milestones::PromoteService.new(project, current_user).execute(milestone)
+    promoted_milestone = Milestones::PromoteService.new(project, current_user).execute(milestone)
 
-    flash[:notice] = "#{milestone.title} promoted to group milestone"
+    flash[:notice] = "#{milestone.title} promoted to <a href=\"#{group_milestone_path(project.group, promoted_milestone.iid)}\">group milestone</a>.".html_safe
     respond_to do |format|
       format.html do
         redirect_to project_milestones_path(project)
@@ -99,7 +104,7 @@ class Projects::MilestonesController < Projects::ApplicationController
   protected
 
   def milestones
-    @milestones ||= begin
+    strong_memoize(:milestones) do
       MilestonesFinder.new(search_params).execute
     end
   end
@@ -117,10 +122,10 @@ class Projects::MilestonesController < Projects::ApplicationController
   end
 
   def search_params
-    if @project.group && can?(current_user, :read_group, @project.group)
-      group = @project.group
+    if request.format.json? && @project.group && can?(current_user, :read_group, @project.group)
+      groups = @project.group.self_and_ancestors_ids
     end
 
-    params.permit(:state).merge(project_ids: @project.id, group_ids: group&.id)
+    params.permit(:state).merge(project_ids: @project.id, group_ids: groups)
   end
 end
diff --git a/app/controllers/projects/mirrors_controller.rb b/app/controllers/projects/mirrors_controller.rb
new file mode 100644
index 00000000000..5698ff4e706
--- /dev/null
+++ b/app/controllers/projects/mirrors_controller.rb
@@ -0,0 +1,67 @@
+class Projects::MirrorsController < Projects::ApplicationController
+  include RepositorySettingsRedirect
+
+  # Authorize
+  before_action :remote_mirror, only: [:update]
+  before_action :check_mirror_available!
+  before_action :authorize_admin_project!
+
+  layout "project_settings"
+
+  def show
+    redirect_to_repository_settings(project)
+  end
+
+  def update
+    if project.update_attributes(mirror_params)
+      flash[:notice] = 'Mirroring settings were successfully updated.'
+    else
+      flash[:alert] = project.errors.full_messages.join(', ').html_safe
+    end
+
+    respond_to do |format|
+      format.html { redirect_to_repository_settings(project) }
+      format.json do
+        if project.errors.present?
+          render json: project.errors, status: :unprocessable_entity
+        else
+          render json: ProjectMirrorSerializer.new.represent(project)
+        end
+      end
+    end
+  end
+
+  def update_now
+    if params[:sync_remote]
+      project.update_remote_mirrors
+      flash[:notice] = "The remote repository is being updated..."
+    end
+
+    redirect_to_repository_settings(project)
+  end
+
+  private
+
+  def remote_mirror
+    @remote_mirror = project.remote_mirrors.first_or_initialize
+  end
+
+  def check_mirror_available!
+    Gitlab::CurrentSettings.current_application_settings.mirror_available || current_user&.admin?
+  end
+
+  def mirror_params_attributes
+    [
+      remote_mirrors_attributes: %i[
+        url
+        id
+        enabled
+        only_protected_branches
+      ]
+    ]
+  end
+
+  def mirror_params
+    params.require(:project).permit(mirror_params_attributes)
+  end
+end
diff --git a/app/controllers/projects/notes_controller.rb b/app/controllers/projects/notes_controller.rb
index dd41b9648e8..4d4c2af2415 100644
--- a/app/controllers/projects/notes_controller.rb
+++ b/app/controllers/projects/notes_controller.rb
@@ -8,19 +8,6 @@ class Projects::NotesController < Projects::ApplicationController
   before_action :authorize_create_note!, only: [:create]
   before_action :authorize_resolve_note!, only: [:resolve, :unresolve]
 
-  #
-  # This is a fix to make spinach feature tests passing:
-  # Controller actions are returned from AbstractController::Base and methods of parent classes are
-  #   excluded in order to return only specific controller related methods.
-  # That is ok for the app (no :create method in ancestors)
-  #   but fails for tests because there is a :create method on FactoryBot (one of the ancestors)
-  #
-  # see https://github.com/rails/rails/blob/v4.2.7/actionpack/lib/abstract_controller/base.rb#L78
-  #
-  def create
-    super
-  end
-
   def delete_attachment
     note.remove_attachment!
     note.update_attribute(:attachment, nil)
@@ -33,9 +20,7 @@ class Projects::NotesController < Projects::ApplicationController
   def resolve
     return render_404 unless note.resolvable?
 
-    note.resolve!(current_user)
-
-    MergeRequests::ResolvedDiscussionNotificationService.new(project, current_user).execute(note.noteable)
+    Notes::ResolveService.new(project, current_user).execute(note)
 
     discussion = note.discussion
 
@@ -68,7 +53,7 @@ class Projects::NotesController < Projects::ApplicationController
   private
 
   def render_json_with_notes_serializer
-    Notes::RenderService.new(current_user).execute([note], project)
+    Notes::RenderService.new(current_user).execute([note])
 
     render json: note_serializer.represent(note)
   end
diff --git a/app/controllers/projects/pages_controller.rb b/app/controllers/projects/pages_controller.rb
index d421b1a8eb5..cae6e2c40b8 100644
--- a/app/controllers/projects/pages_controller.rb
+++ b/app/controllers/projects/pages_controller.rb
@@ -21,4 +21,26 @@ class Projects::PagesController < Projects::ApplicationController
       end
     end
   end
+
+  def update
+    result = Projects::UpdateService.new(@project, current_user, project_params).execute
+
+    respond_to do |format|
+      format.html do
+        if result[:status] == :success
+          flash[:notice] = 'Your changes have been saved'
+        else
+          flash[:alert] = 'Something went wrong on our end'
+        end
+
+        redirect_to project_pages_path(@project)
+      end
+    end
+  end
+
+  private
+
+  def project_params
+    params.require(:project).permit(:pages_https_only)
+  end
 end
diff --git a/app/controllers/projects/pipeline_schedules_controller.rb b/app/controllers/projects/pipeline_schedules_controller.rb
index b478e7b5e05..fa258f3d9af 100644
--- a/app/controllers/projects/pipeline_schedules_controller.rb
+++ b/app/controllers/projects/pipeline_schedules_controller.rb
@@ -92,7 +92,7 @@ class Projects::PipelineSchedulesController < Projects::ApplicationController
   def schedule_params
     params.require(:schedule)
       .permit(:description, :cron, :cron_timezone, :ref, :active,
-        variables_attributes: [:id, :key, :value, :_destroy] )
+        variables_attributes: [:id, :key, :secret_value, :_destroy] )
   end
 
   def authorize_play_pipeline_schedule!
diff --git a/app/controllers/projects/pipelines_controller.rb b/app/controllers/projects/pipelines_controller.rb
index 78d109cf33e..768595ceeb4 100644
--- a/app/controllers/projects/pipelines_controller.rb
+++ b/app/controllers/projects/pipelines_controller.rb
@@ -18,19 +18,10 @@ class Projects::PipelinesController < Projects::ApplicationController
       .page(params[:page])
       .per(30)
 
-    @running_count = PipelinesFinder
-      .new(project, scope: 'running').execute.count
-
-    @pending_count = PipelinesFinder
-      .new(project, scope: 'pending').execute.count
-
-    @finished_count = PipelinesFinder
-      .new(project, scope: 'finished').execute.count
-
-    @pipelines_count = PipelinesFinder
-      .new(project).execute.count
-
-    @pipelines.map(&:commit) # List commits for batch loading
+    @running_count = limited_pipelines_count(project, 'running')
+    @pending_count = limited_pipelines_count(project, 'pending')
+    @finished_count = limited_pipelines_count(project, 'finished')
+    @pipelines_count = limited_pipelines_count(project)
 
     respond_to do |format|
       format.html
@@ -41,7 +32,7 @@ class Projects::PipelinesController < Projects::ApplicationController
           pipelines: PipelineSerializer
             .new(project: @project, current_user: @current_user)
             .with_pagination(request, response)
-            .represent(@pipelines),
+            .represent(@pipelines, disable_coverage: true, preload: true),
           count: {
             all: @pipelines_count,
             running: @running_count,
@@ -87,7 +78,7 @@ class Projects::PipelinesController < Projects::ApplicationController
   end
 
   def failures
-    if @pipeline.statuses.latest.failed.present?
+    if @pipeline.failed_builds.present?
       render_show
     else
       redirect_to pipeline_path(@pipeline)
@@ -104,9 +95,18 @@ class Projects::PipelinesController < Projects::ApplicationController
     @stage = pipeline.legacy_stage(params[:stage])
     return not_found unless @stage
 
-    respond_to do |format|
-      format.json { render json: { html: view_to_html_string('projects/pipelines/_stage') } }
-    end
+    render json: StageSerializer
+      .new(project: @project, current_user: @current_user)
+      .represent(@stage, details: true)
+  end
+
+  # TODO: This endpoint is used by mini-pipeline-graph
+  # TODO: This endpoint should be migrated to `stage.json`
+  def stage_ajax
+    @stage = pipeline.legacy_stage(params[:stage])
+    return not_found unless @stage
+
+    render json: { html: view_to_html_string('projects/pipelines/_stage') }
   end
 
   def retry
@@ -157,7 +157,7 @@ class Projects::PipelinesController < Projects::ApplicationController
   end
 
   def create_params
-    params.require(:pipeline).permit(:ref)
+    params.require(:pipeline).permit(:ref, variables_attributes: %i[key secret_value])
   end
 
   def pipeline
@@ -172,4 +172,14 @@ class Projects::PipelinesController < Projects::ApplicationController
     # Also see https://gitlab.com/gitlab-org/gitlab-ce/issues/42343
     Gitlab::QueryLimiting.whitelist('https://gitlab.com/gitlab-org/gitlab-ce/issues/42339')
   end
+
+  def authorize_update_pipeline!
+    return access_denied! unless can?(current_user, :update_pipeline, @pipeline)
+  end
+
+  def limited_pipelines_count(project, scope = nil)
+    finder = PipelinesFinder.new(project, scope: scope)
+
+    view_context.limited_counter_with_delimiter(finder.execute)
+  end
 end
diff --git a/app/controllers/projects/pipelines_settings_controller.rb b/app/controllers/projects/pipelines_settings_controller.rb
index 06ce7328fb5..73c613b26f3 100644
--- a/app/controllers/projects/pipelines_settings_controller.rb
+++ b/app/controllers/projects/pipelines_settings_controller.rb
@@ -4,32 +4,4 @@ class Projects::PipelinesSettingsController < Projects::ApplicationController
   def show
     redirect_to project_settings_ci_cd_path(@project, params: params)
   end
-
-  def update
-    Projects::UpdateService.new(project, current_user, update_params).tap do |service|
-      if service.execute
-        flash[:notice] = "Pipelines settings for '#{@project.name}' were successfully updated."
-
-        if service.run_auto_devops_pipeline?
-          CreatePipelineWorker.perform_async(project.id, current_user.id, project.default_branch, :web, ignore_skip_ci: true, save_on_errors: false)
-          flash[:success] = "A new Auto DevOps pipeline has been created, go to <a href=\"#{project_pipelines_path(@project)}\">Pipelines page</a> for details".html_safe
-        end
-
-        redirect_to project_settings_ci_cd_path(@project)
-      else
-        render 'show'
-      end
-    end
-  end
-
-  private
-
-  def update_params
-    params.require(:project).permit(
-      :runners_token, :builds_enabled, :build_allow_git_fetch,
-      :build_timeout_in_minutes, :build_coverage_regex, :public_builds,
-      :auto_cancel_pending_pipelines, :ci_config_path,
-      auto_devops_attributes: [:id, :domain, :enabled]
-    )
-  end
 end
diff --git a/app/controllers/projects/project_members_controller.rb b/app/controllers/projects/project_members_controller.rb
index e9b4679f94c..cfa5e72af64 100644
--- a/app/controllers/projects/project_members_controller.rb
+++ b/app/controllers/projects/project_members_controller.rb
@@ -21,7 +21,7 @@ class Projects::ProjectMembersController < Projects::ApplicationController
       @group_links = @group_links.where(group_id: @project.invited_groups.search(params[:search]).select(:id))
     end
 
-    @project_members = present_members(@project_members.sort(@sort).page(params[:page]))
+    @project_members = present_members(@project_members.sort_by_attribute(@sort).page(params[:page]))
     @requesters = present_members(AccessRequestsFinder.new(@project).execute(current_user))
     @project_member = @project.project_members.new
   end
diff --git a/app/controllers/projects/prometheus/metrics_controller.rb b/app/controllers/projects/prometheus/metrics_controller.rb
index 1dd886409a5..c6b6243b553 100644
--- a/app/controllers/projects/prometheus/metrics_controller.rb
+++ b/app/controllers/projects/prometheus/metrics_controller.rb
@@ -25,7 +25,7 @@ module Projects
       end
 
       def require_prometheus_metrics!
-        render_404 unless prometheus_adapter.can_query?
+        render_404 unless prometheus_adapter&.can_query?
       end
     end
   end
diff --git a/app/controllers/projects/protected_branches_controller.rb b/app/controllers/projects/protected_branches_controller.rb
index d1719f12072..64954ac9a42 100644
--- a/app/controllers/projects/protected_branches_controller.rb
+++ b/app/controllers/projects/protected_branches_controller.rb
@@ -5,12 +5,8 @@ class Projects::ProtectedBranchesController < Projects::ProtectedRefsController
     @project.repository.branches
   end
 
-  def create_service_class
-    ::ProtectedBranches::CreateService
-  end
-
-  def update_service_class
-    ::ProtectedBranches::UpdateService
+  def service_namespace
+    ::ProtectedBranches
   end
 
   def load_protected_ref
diff --git a/app/controllers/projects/protected_refs_controller.rb b/app/controllers/projects/protected_refs_controller.rb
index b51bdf7aa78..9e757a8d25f 100644
--- a/app/controllers/projects/protected_refs_controller.rb
+++ b/app/controllers/projects/protected_refs_controller.rb
@@ -37,7 +37,7 @@ class Projects::ProtectedRefsController < Projects::ApplicationController
   end
 
   def destroy
-    @protected_ref.destroy
+    destroy_service_class.new(@project, current_user).execute(@protected_ref)
 
     respond_to do |format|
       format.html { redirect_to_repository_settings(@project) }
@@ -47,6 +47,18 @@ class Projects::ProtectedRefsController < Projects::ApplicationController
 
   protected
 
+  def create_service_class
+    service_namespace::CreateService
+  end
+
+  def update_service_class
+    service_namespace::UpdateService
+  end
+
+  def destroy_service_class
+    service_namespace::DestroyService
+  end
+
   def access_level_attributes
     %i(access_level id)
   end
diff --git a/app/controllers/projects/protected_tags_controller.rb b/app/controllers/projects/protected_tags_controller.rb
index a5dbd7e46ae..198c938ff35 100644
--- a/app/controllers/projects/protected_tags_controller.rb
+++ b/app/controllers/projects/protected_tags_controller.rb
@@ -5,12 +5,8 @@ class Projects::ProtectedTagsController < Projects::ProtectedRefsController
     @project.repository.tags
   end
 
-  def create_service_class
-    ::ProtectedTags::CreateService
-  end
-
-  def update_service_class
-    ::ProtectedTags::UpdateService
+  def service_namespace
+    ::ProtectedTags
   end
 
   def load_protected_ref
diff --git a/app/controllers/projects/raw_controller.rb b/app/controllers/projects/raw_controller.rb
index a02cc477e08..9bc774b7636 100644
--- a/app/controllers/projects/raw_controller.rb
+++ b/app/controllers/projects/raw_controller.rb
@@ -2,6 +2,7 @@
 class Projects::RawController < Projects::ApplicationController
   include ExtractsPath
   include BlobHelper
+  include SendFileUpload
 
   before_action :require_non_empty_project
   before_action :assign_ref_vars
@@ -31,7 +32,7 @@ class Projects::RawController < Projects::ApplicationController
     lfs_object = find_lfs_object
 
     if lfs_object && lfs_object.project_allowed_access?(@project)
-      send_file lfs_object.file.path, filename: @blob.name, disposition: 'attachment'
+      send_upload(lfs_object.file, attachment: @blob.name)
     else
       render_404
     end
diff --git a/app/controllers/projects/refs_controller.rb b/app/controllers/projects/refs_controller.rb
index 2376f469213..48a09e1ddb8 100644
--- a/app/controllers/projects/refs_controller.rb
+++ b/app/controllers/projects/refs_controller.rb
@@ -25,7 +25,7 @@ class Projects::RefsController < Projects::ApplicationController
           when "graphs_commits"
             commits_project_graph_path(@project, @id)
           when "badges"
-            project_pipelines_settings_path(@project, ref: @id)
+            project_settings_ci_cd_path(@project, ref: @id)
           else
             project_commits_path(@project, @id)
           end
diff --git a/app/controllers/projects/repositories_controller.rb b/app/controllers/projects/repositories_controller.rb
index d5af0341d18..d01f324e6fd 100644
--- a/app/controllers/projects/repositories_controller.rb
+++ b/app/controllers/projects/repositories_controller.rb
@@ -1,6 +1,9 @@
 class Projects::RepositoriesController < Projects::ApplicationController
+  include ExtractsPath
+
   # Authorize
   before_action :require_non_empty_project, except: :create
+  before_action :assign_archive_vars, only: :archive
   before_action :authorize_download_code!
   before_action :authorize_admin_project!, only: :create
 
@@ -11,9 +14,27 @@ class Projects::RepositoriesController < Projects::ApplicationController
   end
 
   def archive
-    send_git_archive @repository, ref: params[:ref], format: params[:format]
+    append_sha = params[:append_sha]
+
+    if @ref
+      shortname = "#{@project.path}-#{@ref.tr('/', '-')}"
+      append_sha = false if @filename == shortname
+    end
+
+    send_git_archive @repository, ref: @ref, format: params[:format], append_sha: append_sha
   rescue => ex
     logger.error("#{self.class.name}: #{ex}")
     return git_not_found!
   end
+
+  def assign_archive_vars
+    if params[:id]
+      @ref, @filename = extract_ref(params[:id])
+    else
+      @ref = params[:ref]
+      @filename = nil
+    end
+  rescue InvalidPathError
+    render_404
+  end
 end
diff --git a/app/controllers/projects/runner_projects_controller.rb b/app/controllers/projects/runner_projects_controller.rb
index 3cb01405b05..a080724634b 100644
--- a/app/controllers/projects/runner_projects_controller.rb
+++ b/app/controllers/projects/runner_projects_controller.rb
@@ -8,10 +8,9 @@ class Projects::RunnerProjectsController < Projects::ApplicationController
 
     return head(403) unless can?(current_user, :assign_runner, @runner)
 
-    path = runners_path(project)
-    runner_project = @runner.assign_to(project, current_user)
+    path = project_runners_path(project)
 
-    if runner_project.persisted?
+    if @runner.assign_to(project, current_user)
       redirect_to path
     else
       redirect_to path, alert: 'Failed adding runner to project'
@@ -22,6 +21,6 @@ class Projects::RunnerProjectsController < Projects::ApplicationController
     runner_project = project.runner_projects.find(params[:id])
     runner_project.destroy
 
-    redirect_to runners_path(project), status: 302
+    redirect_to project_runners_path(project), status: 302
   end
 end
diff --git a/app/controllers/projects/runners_controller.rb b/app/controllers/projects/runners_controller.rb
index c950d0f7001..bef94cea989 100644
--- a/app/controllers/projects/runners_controller.rb
+++ b/app/controllers/projects/runners_controller.rb
@@ -1,6 +1,6 @@
 class Projects::RunnersController < Projects::ApplicationController
   before_action :authorize_admin_build!
-  before_action :set_runner, only: [:edit, :update, :destroy, :pause, :resume, :show]
+  before_action :runner, only: [:edit, :update, :destroy, :pause, :resume, :show]
 
   layout 'project_settings'
 
@@ -13,7 +13,7 @@ class Projects::RunnersController < Projects::ApplicationController
 
   def update
     if Ci::UpdateRunnerService.new(@runner).update(runner_params)
-      redirect_to runner_path(@runner), notice: 'Runner was successfully updated.'
+      redirect_to project_runner_path(@project, @runner), notice: 'Runner was successfully updated.'
     else
       render 'edit'
     end
@@ -24,26 +24,27 @@ class Projects::RunnersController < Projects::ApplicationController
       @runner.destroy
     end
 
-    redirect_to runners_path(@project), status: 302
+    redirect_to project_runners_path(@project), status: 302
   end
 
   def resume
     if Ci::UpdateRunnerService.new(@runner).update(active: true)
-      redirect_to runners_path(@project), notice: 'Runner was successfully updated.'
+      redirect_to project_runners_path(@project), notice: 'Runner was successfully updated.'
     else
-      redirect_to runners_path(@project), alert: 'Runner was not updated.'
+      redirect_to project_runners_path(@project), alert: 'Runner was not updated.'
     end
   end
 
   def pause
     if Ci::UpdateRunnerService.new(@runner).update(active: false)
-      redirect_to runners_path(@project), notice: 'Runner was successfully updated.'
+      redirect_to project_runners_path(@project), notice: 'Runner was successfully updated.'
     else
-      redirect_to runners_path(@project), alert: 'Runner was not updated.'
+      redirect_to project_runners_path(@project), alert: 'Runner was not updated.'
     end
   end
 
   def show
+    render 'shared/runners/show'
   end
 
   def toggle_shared_runners
@@ -52,9 +53,15 @@ class Projects::RunnersController < Projects::ApplicationController
     redirect_to project_settings_ci_cd_path(@project)
   end
 
+  def toggle_group_runners
+    project.toggle_ci_cd_settings!(:group_runners_enabled)
+
+    redirect_to project_settings_ci_cd_path(@project)
+  end
+
   protected
 
-  def set_runner
+  def runner
     @runner ||= project.runners.find(params[:id])
   end
 
diff --git a/app/controllers/projects/services_controller.rb b/app/controllers/projects/services_controller.rb
index f14cb5f6a9f..690596b12db 100644
--- a/app/controllers/projects/services_controller.rb
+++ b/app/controllers/projects/services_controller.rb
@@ -41,11 +41,13 @@ class Projects::ServicesController < Projects::ApplicationController
       if outcome[:success]
         {}
       else
-        { error: true, message: 'Test failed.', service_response: outcome[:result].to_s }
+        { error: true, message: 'Test failed.', service_response: outcome[:result].to_s, test_failed: true }
       end
     else
-      { error: true, message: 'Validations failed.', service_response: @service.errors.full_messages.join(',') }
+      { error: true, message: 'Validations failed.', service_response: @service.errors.full_messages.join(','), test_failed: false }
     end
+  rescue Gitlab::HTTP::BlockedUrlError => e
+    { error: true, message: 'Test failed.', service_response: e.message, test_failed: true }
   end
 
   def success_message
diff --git a/app/controllers/projects/settings/badges_controller.rb b/app/controllers/projects/settings/badges_controller.rb
new file mode 100644
index 00000000000..7887bee49c5
--- /dev/null
+++ b/app/controllers/projects/settings/badges_controller.rb
@@ -0,0 +1,13 @@
+module Projects
+  module Settings
+    class BadgesController < Projects::ApplicationController
+      include API::Helpers::RelatedResourcesHelpers
+
+      before_action :authorize_admin_project!
+
+      def index
+        @badge_api_endpoint = expose_url(api_v4_projects_badges_path(id: @project.id))
+      end
+    end
+  end
+end
diff --git a/app/controllers/projects/settings/ci_cd_controller.rb b/app/controllers/projects/settings/ci_cd_controller.rb
index 259809f3429..fb3f6eec2bd 100644
--- a/app/controllers/projects/settings/ci_cd_controller.rb
+++ b/app/controllers/projects/settings/ci_cd_controller.rb
@@ -2,13 +2,24 @@ module Projects
   module Settings
     class CiCdController < Projects::ApplicationController
       before_action :authorize_admin_pipeline!
+      before_action :define_variables
 
       def show
-        define_runners_variables
-        define_secret_variables
-        define_triggers_variables
-        define_badges_variables
-        define_auto_devops_variables
+      end
+
+      def update
+        Projects::UpdateService.new(project, current_user, update_params).tap do |service|
+          result = service.execute
+          if result[:status] == :success
+            flash[:notice] = "Pipelines settings for '#{@project.name}' were successfully updated."
+
+            run_autodevops_pipeline(service)
+
+            redirect_to project_settings_ci_cd_path(@project)
+          else
+            render 'show'
+          end
+        end
       end
 
       def reset_cache
@@ -25,16 +36,53 @@ module Projects
 
       private
 
+      def update_params
+        params.require(:project).permit(
+          :runners_token, :builds_enabled, :build_allow_git_fetch,
+          :build_timeout_human_readable, :build_coverage_regex, :public_builds,
+          :auto_cancel_pending_pipelines, :ci_config_path,
+          auto_devops_attributes: [:id, :domain, :enabled, :deploy_strategy]
+        )
+      end
+
+      def run_autodevops_pipeline(service)
+        return unless service.run_auto_devops_pipeline?
+
+        if @project.empty_repo?
+          flash[:warning] = "This repository is currently empty. A new Auto DevOps pipeline will be created after a new file has been pushed to a branch."
+          return
+        end
+
+        CreatePipelineWorker.perform_async(project.id, current_user.id, project.default_branch, :web, ignore_skip_ci: true, save_on_errors: false)
+        flash[:success] = "A new Auto DevOps pipeline has been created, go to <a href=\"#{project_pipelines_path(@project)}\">Pipelines page</a> for details".html_safe
+      end
+
+      def define_variables
+        define_runners_variables
+        define_secret_variables
+        define_triggers_variables
+        define_badges_variables
+        define_auto_devops_variables
+      end
+
       def define_runners_variables
         @project_runners = @project.runners.ordered
-        @assignable_runners = current_user.ci_authorized_runners
-          .assignable_for(project).ordered.page(params[:page]).per(20)
-        @shared_runners = Ci::Runner.shared.active
+
+        @assignable_runners = current_user
+          .ci_owned_runners
+          .assignable_for(project)
+          .ordered
+          .page(params[:page]).per(20)
+
+        @shared_runners = ::Ci::Runner.shared.active
+
         @shared_runners_count = @shared_runners.count(:all)
+
+        @group_runners = ::Ci::Runner.belonging_to_parent_group_of_project(@project.id)
       end
 
       def define_secret_variables
-        @variable = Ci::Variable.new(project: project)
+        @variable = ::Ci::Variable.new(project: project)
           .present(current_user: current_user)
         @variables = project.variables.order_key_asc
           .map { |variable| variable.present(current_user: current_user) }
@@ -42,7 +90,7 @@ module Projects
 
       def define_triggers_variables
         @triggers = @project.triggers
-        @trigger = Ci::Trigger.new
+        @trigger = ::Ci::Trigger.new
       end
 
       def define_badges_variables
diff --git a/app/controllers/projects/settings/integrations_controller.rb b/app/controllers/projects/settings/integrations_controller.rb
index 1ff08cce8cb..d9fecfecc40 100644
--- a/app/controllers/projects/settings/integrations_controller.rb
+++ b/app/controllers/projects/settings/integrations_controller.rb
@@ -11,7 +11,14 @@ module Projects
         @hook = ProjectHook.new
 
         # Services
-        @services = @project.find_or_initialize_services
+        @services = @project.find_or_initialize_services(exceptions: service_exceptions)
+      end
+
+      private
+
+      # Returns a list of services that should be hidden from the list
+      def service_exceptions
+        @project.disabled_services.dup
       end
     end
   end
diff --git a/app/controllers/projects/settings/repository_controller.rb b/app/controllers/projects/settings/repository_controller.rb
index d06d18c498b..4697af4f26a 100644
--- a/app/controllers/projects/settings/repository_controller.rb
+++ b/app/controllers/projects/settings/repository_controller.rb
@@ -2,23 +2,51 @@ module Projects
   module Settings
     class RepositoryController < Projects::ApplicationController
       before_action :authorize_admin_project!
+      before_action :remote_mirror, only: [:show]
 
       def show
-        @deploy_keys = DeployKeysPresenter.new(@project, current_user: current_user)
+        render_show
+      end
 
-        define_protected_refs
+      def create_deploy_token
+        @new_deploy_token = DeployTokens::CreateService.new(@project, current_user, deploy_token_params).execute
+
+        if @new_deploy_token.persisted?
+          flash.now[:notice] = s_('DeployTokens|Your new project deploy token has been created.')
+        end
+
+        render_show
       end
 
       private
 
+      def render_show
+        @deploy_keys = DeployKeysPresenter.new(@project, current_user: current_user)
+        @deploy_tokens = @project.deploy_tokens.active
+
+        define_deploy_token
+        define_protected_refs
+        remote_mirror
+
+        render 'show'
+      end
+
       def define_protected_refs
         @protected_branches = @project.protected_branches.order(:name).page(params[:page])
         @protected_tags = @project.protected_tags.order(:name).page(params[:page])
         @protected_branch = @project.protected_branches.new
         @protected_tag = @project.protected_tags.new
+
+        @protected_branches_count = @protected_branches.reduce(0) { |sum, branch| sum + branch.matching(@project.repository.branches).size }
+        @protected_tags_count = @protected_tags.reduce(0) { |sum, tag| sum + tag.matching(@project.repository.tags).size }
+
         load_gon_index
       end
 
+      def remote_mirror
+        @remote_mirror = project.remote_mirrors.first_or_initialize
+      end
+
       def access_levels_options
         {
           create_access_levels: levels_for_dropdown,
@@ -47,6 +75,14 @@ module Projects
         gon.push(protectable_branches_for_dropdown)
         gon.push(access_levels_options)
       end
+
+      def define_deploy_token
+        @new_deploy_token ||= DeployToken.new
+      end
+
+      def deploy_token_params
+        params.require(:deploy_token).permit(:name, :expires_at, :read_repository, :read_registry)
+      end
     end
   end
 end
diff --git a/app/controllers/projects/snippets_controller.rb b/app/controllers/projects/snippets_controller.rb
index 7c19aa7bb23..208a1d19862 100644
--- a/app/controllers/projects/snippets_controller.rb
+++ b/app/controllers/projects/snippets_controller.rb
@@ -5,6 +5,8 @@ class Projects::SnippetsController < Projects::ApplicationController
   include SnippetsActions
   include RendersBlob
 
+  skip_before_action :verify_authenticity_token, only: [:show], if: :js_request?
+
   before_action :check_snippets_available!
   before_action :snippet, only: [:show, :edit, :destroy, :update, :raw, :toggle_award_emoji, :mark_as_spam]
 
@@ -71,6 +73,7 @@ class Projects::SnippetsController < Projects::ApplicationController
       format.json do
         render_blob_json(blob)
       end
+      format.js { render 'shared/snippets/show'}
     end
   end
 
diff --git a/app/controllers/projects/variables_controller.rb b/app/controllers/projects/variables_controller.rb
index 7eb509e2e64..bf09ea7e4d8 100644
--- a/app/controllers/projects/variables_controller.rb
+++ b/app/controllers/projects/variables_controller.rb
@@ -12,7 +12,7 @@ class Projects::VariablesController < Projects::ApplicationController
   def update
     if @project.update(variables_params)
       respond_to do |format|
-        format.json { return render_variables }
+        format.json { render_variables }
       end
     else
       respond_to do |format|
@@ -36,6 +36,6 @@ class Projects::VariablesController < Projects::ApplicationController
   end
 
   def variable_params_attributes
-    %i[id key value protected _destroy]
+    %i[id key secret_value protected _destroy]
   end
 end
diff --git a/app/controllers/projects/wikis_controller.rb b/app/controllers/projects/wikis_controller.rb
index cd7feaaf398..9202a7fe142 100644
--- a/app/controllers/projects/wikis_controller.rb
+++ b/app/controllers/projects/wikis_controller.rb
@@ -14,6 +14,8 @@ class Projects::WikisController < Projects::ApplicationController
   def show
     @page = @project_wiki.find_page(params[:id], params[:version_id])
 
+    view_param = @project_wiki.empty? ? params[:view] : 'create'
+
     if @page
       render 'show'
     elsif file = @project_wiki.find_file(params[:id], params[:version_id])
@@ -26,13 +28,12 @@ class Projects::WikisController < Projects::ApplicationController
         disposition: 'inline',
         filename: file.name
       )
-    else
-      return render('empty') unless can?(current_user, :create_wiki, @project)
-
-      @page = WikiPage.new(@project_wiki)
-      @page.title = params[:id]
+    elsif can?(current_user, :create_wiki, @project) && view_param == 'create'
+      @page = build_page(title: params[:id])
 
       render 'edit'
+    else
+      render 'empty'
     end
   end
 
@@ -54,7 +55,7 @@ class Projects::WikisController < Projects::ApplicationController
     else
       render 'edit'
     end
-  rescue WikiPage::PageChangedError, WikiPage::PageRenameError => e
+  rescue WikiPage::PageChangedError, WikiPage::PageRenameError, Gitlab::Git::Wiki::OperationError => e
     @error = e
     render 'edit'
   end
@@ -70,6 +71,11 @@ class Projects::WikisController < Projects::ApplicationController
     else
       render action: "edit"
     end
+  rescue Gitlab::Git::Wiki::OperationError => e
+    @page = build_page(wiki_params)
+    @error = e
+
+    render 'edit'
   end
 
   def history
@@ -89,11 +95,15 @@ class Projects::WikisController < Projects::ApplicationController
 
   def destroy
     @page = @project_wiki.find_page(params[:id])
+
     WikiPages::DestroyService.new(@project, current_user).execute(@page)
 
     redirect_to project_wiki_path(@project, :home),
                 status: 302,
                 notice: "Page was successfully deleted"
+  rescue Gitlab::Git::Wiki::OperationError => e
+    @error = e
+    render 'edit'
   end
 
   def git_access
@@ -121,4 +131,10 @@ class Projects::WikisController < Projects::ApplicationController
   def wiki_params
     params.require(:wiki).permit(:title, :content, :format, :message, :last_commit_sha)
   end
+
+  def build_page(args)
+    WikiPage.new(@project_wiki).tap do |page|
+      page.update_attributes(args)
+    end
+  end
 end
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index ee197c75764..c2492a137fb 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -63,7 +63,7 @@ class ProjectsController < Projects::ApplicationController
           redirect_to(edit_project_path(@project))
         end
       else
-        flash[:alert] = result[:message]
+        flash.now[:alert] = result[:message]
 
         format.html { render 'edit' }
       end
@@ -247,13 +247,13 @@ class ProjectsController < Projects::ApplicationController
 
     if find_branches
       branches = BranchesFinder.new(@repository, params).execute.take(100).map(&:name)
-      options[s_('RefSwitcher|Branches')] = branches
+      options['Branches'] = branches
     end
 
     if find_tags && @repository.tag_count.nonzero?
       tags = TagsFinder.new(@repository, params).execute.take(100).map(&:name)
 
-      options[s_('RefSwitcher|Tags')] = tags
+      options['Tags'] = tags
     end
 
     # If reference is commit id - we should add it to branch/tag selectbox
@@ -324,7 +324,7 @@ class ProjectsController < Projects::ApplicationController
       :avatar,
       :build_allow_git_fetch,
       :build_coverage_regex,
-      :build_timeout_in_minutes,
+      :build_timeout_human_readable,
       :resolve_outdated_diff_discussions,
       :container_registry_enabled,
       :default_branch,
@@ -404,7 +404,7 @@ class ProjectsController < Projects::ApplicationController
     params[:namespace_id] = project.namespace.to_param
     params[:id] = project.to_param
 
-    url_for(params)
+    url_for(safe_params)
   end
 
   def project_export_enabled
diff --git a/app/controllers/registrations_controller.rb b/app/controllers/registrations_controller.rb
index 1848c806c41..e6d6965036e 100644
--- a/app/controllers/registrations_controller.rb
+++ b/app/controllers/registrations_controller.rb
@@ -1,7 +1,11 @@
 class RegistrationsController < Devise::RegistrationsController
   include Recaptcha::Verify
+  include AcceptsPendingInvitations
 
   before_action :whitelist_query_limiting, only: [:destroy]
+  before_action :ensure_terms_accepted,
+                if: -> { Gitlab::CurrentSettings.current_application_settings.enforce_terms? },
+                only: [:create]
 
   def new
     redirect_to(new_user_session_path)
@@ -16,7 +20,10 @@ class RegistrationsController < Devise::RegistrationsController
     end
 
     if !Gitlab::Recaptcha.load_configurations! || verify_recaptcha
-      super
+      accept_pending_invitations
+      super do |new_user|
+        persist_accepted_terms_if_required(new_user)
+      end
     else
       flash[:alert] = 'There was an error with the reCAPTCHA. Please solve the reCAPTCHA again.'
       flash.delete :recaptcha_error
@@ -38,6 +45,16 @@ class RegistrationsController < Devise::RegistrationsController
 
   protected
 
+  def persist_accepted_terms_if_required(new_user)
+    return unless new_user.persisted?
+    return unless Gitlab::CurrentSettings.current_application_settings.enforce_terms?
+
+    if terms_accepted?
+      terms = ApplicationSetting::Term.latest
+      Users::RespondToTermsService.new(new_user, terms).execute(accepted: true)
+    end
+  end
+
   def destroy_confirmation_valid?
     if current_user.confirm_deletion_with_password?
       current_user.valid_password?(params[:password])
@@ -60,7 +77,7 @@ class RegistrationsController < Devise::RegistrationsController
 
   def after_sign_up_path_for(user)
     Gitlab::AppLogger.info("User Created: username=#{user.username} email=#{user.email} ip=#{request.remote_ip} confirmed:#{user.confirmed?}")
-    user.confirmed? ? dashboard_projects_path : users_almost_there_path
+    user.confirmed? ? stored_location_for(user) || dashboard_projects_path : users_almost_there_path
   end
 
   def after_inactive_sign_up_path_for(resource)
@@ -89,4 +106,14 @@ class RegistrationsController < Devise::RegistrationsController
   def whitelist_query_limiting
     Gitlab::QueryLimiting.whitelist('https://gitlab.com/gitlab-org/gitlab-ce/issues/42380')
   end
+
+  def ensure_terms_accepted
+    return if terms_accepted?
+
+    redirect_to new_user_session_path, alert: _('You must accept our Terms of Service and privacy policy in order to register an account')
+  end
+
+  def terms_accepted?
+    Gitlab::Utils.to_boolean(params[:terms_opt_in])
+  end
 end
diff --git a/app/controllers/root_controller.rb b/app/controllers/root_controller.rb
index 8acefd58e77..651b82f04f4 100644
--- a/app/controllers/root_controller.rb
+++ b/app/controllers/root_controller.rb
@@ -42,6 +42,10 @@ class RootController < Dashboard::ProjectsController
       redirect_to(dashboard_groups_path)
     when 'todos'
       redirect_to(dashboard_todos_path)
+    when 'issues'
+      redirect_to(issues_dashboard_path(assignee_id: current_user.id))
+    when 'merge_requests'
+      redirect_to(merge_requests_dashboard_path(assignee_id: current_user.id))
     end
   end
 
diff --git a/app/controllers/sent_notifications_controller.rb b/app/controllers/sent_notifications_controller.rb
index 04c36b3ebfe..93a71103a09 100644
--- a/app/controllers/sent_notifications_controller.rb
+++ b/app/controllers/sent_notifications_controller.rb
@@ -17,16 +17,20 @@ class SentNotificationsController < ApplicationController
     flash[:notice] = "You have been unsubscribed from this thread."
 
     if current_user
-      case noteable
-      when Issue
-        redirect_to issue_path(noteable)
-      when MergeRequest
-        redirect_to merge_request_path(noteable)
-      else
-        redirect_to root_path
-      end
+      redirect_to noteable_path(noteable)
     else
       redirect_to new_user_session_path
     end
   end
+
+  def noteable_path(noteable)
+    case noteable
+    when Issue
+      issue_path(noteable)
+    when MergeRequest
+      merge_request_path(noteable)
+    else
+      root_path
+    end
+  end
 end
diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
index f3a4aa849c7..7aa277b3614 100644
--- a/app/controllers/sessions_controller.rb
+++ b/app/controllers/sessions_controller.rb
@@ -1,22 +1,29 @@
 class SessionsController < Devise::SessionsController
+  include InternalRedirect
   include AuthenticatesWithTwoFactor
   include Devise::Controllers::Rememberable
   include Recaptcha::ClientHelper
+  include Recaptcha::Verify
 
   skip_before_action :check_two_factor_requirement, only: [:destroy]
 
   prepend_before_action :check_initial_setup, only: [:new]
   prepend_before_action :authenticate_with_two_factor,
     if: :two_factor_enabled?, only: [:create]
+  prepend_before_action :check_captcha, only: [:create]
   prepend_before_action :store_redirect_uri, only: [:new]
+  prepend_before_action :ldap_servers, only: [:new, :create]
   before_action :auto_sign_in_with_provider, only: [:new]
   before_action :load_recaptcha
 
   after_action :log_failed_login, only: [:new], if: :failed_login?
 
+  helper_method :captcha_enabled?
+
+  CAPTCHA_HEADER = 'X-GitLab-Show-Login-Captcha'.freeze
+
   def new
     set_minimum_password_length
-    @ldap_servers = Gitlab::Auth::LDAP::Config.available_servers
 
     super
   end
@@ -45,6 +52,25 @@ class SessionsController < Devise::SessionsController
 
   private
 
+  def captcha_enabled?
+    request.headers[CAPTCHA_HEADER] && Gitlab::Recaptcha.enabled?
+  end
+
+  # From https://github.com/plataformatec/devise/wiki/How-To:-Use-Recaptcha-with-Devise#devisepasswordscontroller
+  def check_captcha
+    return unless user_params[:password].present?
+    return unless captcha_enabled?
+    return unless Gitlab::Recaptcha.load_configurations!
+
+    unless verify_recaptcha
+      self.resource = resource_class.new
+      flash[:alert] = 'There was an error with the reCAPTCHA. Please solve the reCAPTCHA again.'
+      flash.delete :recaptcha_error
+
+      respond_with_navigational(resource) { render :new }
+    end
+  end
+
   def log_failed_login
     Gitlab::AppLogger.info("Failed Login: username=#{user_params[:login]} ip=#{request.remote_ip}")
   end
@@ -102,18 +128,12 @@ class SessionsController < Devise::SessionsController
     # we should never redirect to '/users/sign_in' after signing in successfully.
     return true if redirect_uri.path == new_user_session_path
 
-    redirect_to = redirect_uri.to_s if redirect_allowed_to?(redirect_uri)
+    redirect_to = redirect_uri.to_s if host_allowed?(redirect_uri)
 
     @redirect_to = redirect_to
     store_location_for(:redirect, redirect_to)
   end
 
-  # Overridden in EE
-  def redirect_allowed_to?(uri)
-    uri.host == Gitlab.config.gitlab.host &&
-      uri.port == Gitlab.config.gitlab.port
-  end
-
   def two_factor_enabled?
     find_user&.two_factor_enabled?
   end
@@ -157,6 +177,10 @@ class SessionsController < Devise::SessionsController
     Gitlab::Recaptcha.load_configurations!
   end
 
+  def ldap_servers
+    @ldap_servers ||= Gitlab::Auth::LDAP::Config.available_servers
+  end
+
   def authentication_method
     if user_params[:otp_attempt]
       "two-factor"
diff --git a/app/controllers/snippets_controller.rb b/app/controllers/snippets_controller.rb
index be2d3f638ff..3d51520ddf4 100644
--- a/app/controllers/snippets_controller.rb
+++ b/app/controllers/snippets_controller.rb
@@ -6,6 +6,8 @@ class SnippetsController < ApplicationController
   include RendersBlob
   include PreviewMarkdown
 
+  skip_before_action :verify_authenticity_token, only: [:show], if: :js_request?
+
   before_action :snippet, only: [:show, :edit, :destroy, :update, :raw]
 
   # Allow read snippet
@@ -77,6 +79,8 @@ class SnippetsController < ApplicationController
       format.json do
         render_blob_json(blob)
       end
+
+      format.js { render 'shared/snippets/show' }
     end
   end
 
diff --git a/app/controllers/users/terms_controller.rb b/app/controllers/users/terms_controller.rb
new file mode 100644
index 00000000000..1b1560a2a00
--- /dev/null
+++ b/app/controllers/users/terms_controller.rb
@@ -0,0 +1,75 @@
+module Users
+  class TermsController < ApplicationController
+    include InternalRedirect
+
+    skip_before_action :authenticate_user!
+    skip_before_action :enforce_terms!
+    skip_before_action :check_password_expiration
+    skip_before_action :check_two_factor_requirement
+    skip_before_action :require_email
+
+    before_action :terms
+
+    layout 'terms'
+
+    def index
+      @redirect = redirect_path
+
+      if current_user && @term.accepted_by_user?(current_user)
+        flash.now[:notice] = "You have already accepted the Terms of Service as #{current_user.to_reference}"
+      end
+    end
+
+    def accept
+      agreement = Users::RespondToTermsService.new(current_user, viewed_term)
+                    .execute(accepted: true)
+
+      if agreement.persisted?
+        redirect_to redirect_path
+      else
+        flash[:alert] = agreement.errors.full_messages.join(', ')
+        redirect_to terms_path, redirect: redirect_path
+      end
+    end
+
+    def decline
+      agreement = Users::RespondToTermsService.new(current_user, viewed_term)
+                    .execute(accepted: false)
+
+      if agreement.persisted?
+        sign_out(current_user)
+        redirect_to root_path
+      else
+        flash[:alert] = agreement.errors.full_messages.join(', ')
+        redirect_to terms_path, redirect: redirect_path
+      end
+    end
+
+    private
+
+    def viewed_term
+      @viewed_term ||= ApplicationSetting::Term.find(params[:id])
+    end
+
+    def terms
+      unless @term = Gitlab::CurrentSettings.current_application_settings.latest_terms
+        redirect_to redirect_path
+      end
+    end
+
+    def redirect_path
+      redirect_to_path = safe_redirect_path(params[:redirect]) || safe_redirect_path_for_url(request.referer)
+
+      if redirect_to_path &&
+          excluded_redirect_paths.none? { |excluded| redirect_to_path.include?(excluded) }
+        redirect_to_path
+      else
+        root_path
+      end
+    end
+
+    def excluded_redirect_paths
+      [terms_path, new_user_session_path]
+    end
+  end
+end
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 956df4a0a16..31f47a7aa7c 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -146,6 +146,6 @@ class UsersController < ApplicationController
   end
 
   def build_canonical_path(user)
-    url_for(params.merge(username: user.to_param))
+    url_for(safe_params.merge(username: user.to_param))
   end
 end
diff --git a/app/finders/admin/projects_finder.rb b/app/finders/admin/projects_finder.rb
index 2c8f21c2400..53b77f5fed9 100644
--- a/app/finders/admin/projects_finder.rb
+++ b/app/finders/admin/projects_finder.rb
@@ -62,6 +62,6 @@ class Admin::ProjectsFinder
 
   def sort(items)
     sort = params.fetch(:sort) { 'latest_activity_desc' }
-    items.sort(sort)
+    items.sort_by_attribute(sort)
   end
 end
diff --git a/app/finders/group_descendants_finder.rb b/app/finders/group_descendants_finder.rb
index e72fd8eb3a5..051ea108e06 100644
--- a/app/finders/group_descendants_finder.rb
+++ b/app/finders/group_descendants_finder.rb
@@ -134,10 +134,8 @@ class GroupDescendantsFinder
   end
 
   def direct_child_projects
-    GroupProjectsFinder.new(group: parent_group,
-                            current_user: current_user,
-                            options: { only_owned: true },
-                            params: params).execute
+    GroupProjectsFinder.new(group: parent_group, current_user: current_user, params: params)
+      .execute
   end
 
   # Finds all projects nested under `parent_group` or any of its descendant
diff --git a/app/finders/group_members_finder.rb b/app/finders/group_members_finder.rb
index 067aff408df..2a656c0d31c 100644
--- a/app/finders/group_members_finder.rb
+++ b/app/finders/group_members_finder.rb
@@ -3,17 +3,29 @@ class GroupMembersFinder
     @group = group
   end
 
-  def execute
+  def execute(include_descendants: false)
     group_members = @group.members
+    wheres = []
 
-    return group_members unless @group.parent
+    return group_members unless @group.parent || include_descendants
 
-    parents_members = GroupMember.non_request
-      .where(source_id: @group.ancestors.select(:id))
-      .where.not(user_id: @group.users.select(:id))
+    wheres << "members.id IN (#{group_members.select(:id).to_sql})"
 
-    wheres = ["members.id IN (#{group_members.select(:id).to_sql})"]
-    wheres << "members.id IN (#{parents_members.select(:id).to_sql})"
+    if @group.parent
+      parents_members = GroupMember.non_request
+        .where(source_id: @group.ancestors.select(:id))
+        .where.not(user_id: @group.users.select(:id))
+
+      wheres << "members.id IN (#{parents_members.select(:id).to_sql})"
+    end
+
+    if include_descendants
+      descendant_members = GroupMember.non_request
+        .where(source_id: @group.descendants.select(:id))
+        .where.not(user_id: @group.users.select(:id))
+
+      wheres << "members.id IN (#{descendant_members.select(:id).to_sql})"
+    end
 
     GroupMember.where(wheres.join(' OR '))
   end
diff --git a/app/finders/group_projects_finder.rb b/app/finders/group_projects_finder.rb
index f73cf8adb4d..b6bdb2b7b0f 100644
--- a/app/finders/group_projects_finder.rb
+++ b/app/finders/group_projects_finder.rb
@@ -39,25 +39,15 @@ class GroupProjectsFinder < ProjectsFinder
   end
 
   def collection_with_user
-    if group.users.include?(current_user)
-      if only_shared?
-        [shared_projects]
-      elsif only_owned?
-        [owned_projects]
-      else
-        [shared_projects, owned_projects]
-      end
+    if only_shared?
+      [shared_projects.public_or_visible_to_user(current_user)]
+    elsif only_owned?
+      [owned_projects.public_or_visible_to_user(current_user)]
     else
-      if only_shared?
-        [shared_projects.public_or_visible_to_user(current_user)]
-      elsif only_owned?
-        [owned_projects.public_or_visible_to_user(current_user)]
-      else
-        [
-          owned_projects.public_or_visible_to_user(current_user),
-          shared_projects.public_or_visible_to_user(current_user)
-        ]
-      end
+      [
+        owned_projects.public_or_visible_to_user(current_user),
+        shared_projects.public_or_visible_to_user(current_user)
+      ]
     end
   end
 
diff --git a/app/finders/groups_finder.rb b/app/finders/groups_finder.rb
index 0282b378d88..0754123a3cf 100644
--- a/app/finders/groups_finder.rb
+++ b/app/finders/groups_finder.rb
@@ -39,7 +39,7 @@ class GroupsFinder < UnionFinder
 
   def all_groups
     return [owned_groups] if params[:owned]
-    return [Group.all] if current_user&.full_private_access?
+    return [Group.all] if current_user&.full_private_access? && all_available?
 
     groups = []
     groups << Gitlab::GroupHierarchy.new(groups_for_ancestors, groups_for_descendants).all_groups if current_user
@@ -67,6 +67,10 @@ class GroupsFinder < UnionFinder
   end
 
   def include_public_groups?
-    current_user.nil? || params.fetch(:all_available, true)
+    current_user.nil? || all_available?
+  end
+
+  def all_available?
+    params.fetch(:all_available, true)
   end
 end
diff --git a/app/finders/issuable_finder.rb b/app/finders/issuable_finder.rb
index b2d4f9938ff..5d5f72c4d86 100644
--- a/app/finders/issuable_finder.rb
+++ b/app/finders/issuable_finder.rb
@@ -6,7 +6,7 @@
 #   klass - actual class like Issue or MergeRequest
 #   current_user - which user use
 #   params:
-#     scope: 'created-by-me' or 'assigned-to-me' or 'all'
+#     scope: 'created_by_me' or 'assigned_to_me' or 'all'
 #     state: 'opened' or 'closed' or 'all'
 #     group_id: integer
 #     project_id: integer
@@ -23,6 +23,7 @@
 #     created_before: datetime
 #     updated_after: datetime
 #     updated_before: datetime
+#     use_cte_for_search: boolean
 #
 class IssuableFinder
   prepend FinderWithCrossProjectAccess
@@ -54,6 +55,7 @@ class IssuableFinder
       sort
       state
       include_subgroups
+      use_cte_for_search
     ]
   end
 
@@ -74,19 +76,21 @@ class IssuableFinder
     items = init_collection
     items = filter_items(items)
 
-    # Filtering by project HAS TO be the last because we use the project IDs yielded by the issuable query thus far
-    items = by_project(items)
+    # This has to be last as we may use a CTE as an optimization fence by
+    # passing the use_cte_for_search param
+    # https://www.postgresql.org/docs/current/static/queries-with.html
+    items = by_search(items)
 
     sort(items)
   end
 
   def filter_items(items)
+    items = by_project(items)
     items = by_scope(items)
     items = by_created_at(items)
     items = by_updated_at(items)
     items = by_state(items)
     items = by_group(items)
-    items = by_search(items)
     items = by_assignee(items)
     items = by_author(items)
     items = by_non_archived(items)
@@ -107,7 +111,6 @@ class IssuableFinder
   #
   def count_by_state
     count_params = params.merge(state: nil, sort: nil)
-    labels_count = label_names.any? ? label_names.count : 1
     finder = self.class.new(current_user, count_params)
     counts = Hash.new(0)
 
@@ -116,6 +119,11 @@ class IssuableFinder
     # per issuable, so we have to count those in Ruby - which is bad, but still
     # better than performing multiple queries.
     #
+    # This does not apply when we are using a CTE for the search, as the labels
+    # GROUP BY is inside the subquery in that case, so we set labels_count to 1.
+    labels_count = label_names.any? ? label_names.count : 1
+    labels_count = 1 if use_cte_for_search?
+
     finder.execute.reorder(nil).group(:state).count.each do |key, value|
       counts[Array(key).last.to_sym] += value / labels_count
     end
@@ -159,7 +167,7 @@ class IssuableFinder
         finder_options = { include_subgroups: params[:include_subgroups], only_owned: true }
         GroupProjectsFinder.new(group: group, current_user: current_user, options: finder_options).execute
       else
-        ProjectsFinder.new(current_user: current_user, project_ids_relation: item_project_ids(items)).execute
+        ProjectsFinder.new(current_user: current_user).execute
       end
 
     @projects = projects.with_feature_available_for_user(klass, current_user).reorder(nil)
@@ -279,9 +287,9 @@ class IssuableFinder
     return items.none if current_user_related? && !current_user
 
     case params[:scope]
-    when 'created-by-me', 'authored'
+    when 'created_by_me', 'authored'
       items.where(author_id: current_user.id)
-    when 'assigned-to-me'
+    when 'assigned_to_me'
       items.assigned_to(current_user)
     else
       items
@@ -316,9 +324,9 @@ class IssuableFinder
   def by_project(items)
     items =
       if project?
-        items.of_projects(projects(items)).references_project
-      elsif projects(items)
-        items.merge(projects(items).reorder(nil)).join_project
+        items.of_projects(projects).references_project
+      elsif projects
+        items.merge(projects.reorder(nil)).join_project
       else
         items.none
       end
@@ -326,8 +334,24 @@ class IssuableFinder
     items
   end
 
+  def use_cte_for_search?
+    return false unless search
+    return false unless Gitlab::Database.postgresql?
+
+    params[:use_cte_for_search]
+  end
+
   def by_search(items)
-    search ? items.full_search(search) : items
+    return items unless search
+
+    if use_cte_for_search?
+      cte = Gitlab::SQL::RecursiveCTE.new(klass.table_name)
+      cte << items
+
+      items = klass.with(cte.to_arel).from(klass.table_name)
+    end
+
+    items.full_search(search)
   end
 
   def by_iids(items)
@@ -337,7 +361,7 @@ class IssuableFinder
   def sort(items)
     # Ensure we always have an explicit sort order (instead of inheriting
     # multiple orders when combining ActiveRecord::Relation objects).
-    params[:sort] ? items.sort(params[:sort], excluded_labels: label_names) : items.reorder(id: :desc)
+    params[:sort] ? items.sort_by_attribute(params[:sort], excluded_labels: label_names) : items.reorder(id: :desc)
   end
 
   def by_assignee(items)
@@ -423,6 +447,7 @@ class IssuableFinder
   end
 
   def current_user_related?
-    params[:scope] == 'created-by-me' || params[:scope] == 'authored' || params[:scope] == 'assigned-to-me'
+    scope = params[:scope]
+    scope == 'created_by_me' || scope == 'authored' || scope == 'assigned_to_me'
   end
 end
diff --git a/app/finders/issues_finder.rb b/app/finders/issues_finder.rb
index 2a27ff0e386..24a6b9349a0 100644
--- a/app/finders/issues_finder.rb
+++ b/app/finders/issues_finder.rb
@@ -5,7 +5,7 @@
 # Arguments:
 #   current_user - which user use
 #   params:
-#     scope: 'created-by-me' or 'assigned-to-me' or 'all'
+#     scope: 'created_by_me' or 'assigned_to_me' or 'all'
 #     state: 'open' or 'closed' or 'all'
 #     group_id: integer
 #     project_id: integer
@@ -75,6 +75,8 @@ class IssuesFinder < IssuableFinder
         items = items.due_between(Date.today.beginning_of_week, Date.today.end_of_week)
       elsif filter_by_due_this_month?
         items = items.due_between(Date.today.beginning_of_month, Date.today.end_of_month)
+      elsif filter_by_due_next_month_and_previous_two_weeks?
+        items = items.due_between(Date.today - 2.weeks, (Date.today + 1.month).end_of_month)
       end
     end
 
@@ -97,6 +99,10 @@ class IssuesFinder < IssuableFinder
     due_date? && params[:due_date] == Issue::DueThisMonth.name
   end
 
+  def filter_by_due_next_month_and_previous_two_weeks?
+    due_date? && params[:due_date] == Issue::DueNextMonthAndPreviousTwoWeeks.name
+  end
+
   def due_date?
     params[:due_date].present?
   end
@@ -130,8 +136,4 @@ class IssuesFinder < IssuableFinder
       items
     end
   end
-
-  def item_project_ids(items)
-    items&.reorder(nil)&.select(:project_id)
-  end
 end
diff --git a/app/finders/labels_finder.rb b/app/finders/labels_finder.rb
index 780c0fdb03e..afd1f824b32 100644
--- a/app/finders/labels_finder.rb
+++ b/app/finders/labels_finder.rb
@@ -28,9 +28,10 @@ class LabelsFinder < UnionFinder
       if project
         if project.group.present?
           labels_table = Label.arel_table
+          group_ids = group_ids_for(project.group)
 
           label_ids << Label.where(
-            labels_table[:type].eq('GroupLabel').and(labels_table[:group_id].eq(project.group.id)).or(
+            labels_table[:type].eq('GroupLabel').and(labels_table[:group_id].in(group_ids)).or(
               labels_table[:type].eq('ProjectLabel').and(labels_table[:project_id].eq(project.id))
             )
           )
@@ -38,11 +39,14 @@ class LabelsFinder < UnionFinder
           label_ids << project.labels
         end
       end
-    elsif only_group_labels?
-      label_ids << Label.where(group_id: group_ids)
     else
+      if group?
+        group = Group.find(params[:group_id])
+        label_ids << Label.where(group_id: group_ids_for(group))
+      end
+
       label_ids << Label.where(group_id: projects.group_ids)
-      label_ids << Label.where(project_id: projects.select(:id))
+      label_ids << Label.where(project_id: projects.select(:id)) unless only_group_labels?
     end
 
     label_ids
@@ -59,22 +63,33 @@ class LabelsFinder < UnionFinder
     items.where(title: title)
   end
 
-  def group_ids
+  # Gets redacted array of group ids
+  # which can include the ancestors and descendants of the requested group.
+  def group_ids_for(group)
     strong_memoize(:group_ids) do
-      groups_user_can_read_labels(groups_to_include).map(&:id)
+      groups = groups_to_include(group)
+
+      groups_user_can_read_labels(groups).map(&:id)
     end
   end
 
-  def groups_to_include
-    group = Group.find(params[:group_id])
+  def groups_to_include(group)
     groups = [group]
 
-    groups += group.ancestors if params[:include_ancestor_groups].present?
-    groups += group.descendants if params[:include_descendant_groups].present?
+    groups += group.ancestors if include_ancestor_groups?
+    groups += group.descendants if include_descendant_groups?
 
     groups
   end
 
+  def include_ancestor_groups?
+    params[:include_ancestor_groups]
+  end
+
+  def include_descendant_groups?
+    params[:include_descendant_groups]
+  end
+
   def group?
     params[:group_id].present?
   end
diff --git a/app/finders/members_finder.rb b/app/finders/members_finder.rb
index 4734d97b8c7..4c893ae2de6 100644
--- a/app/finders/members_finder.rb
+++ b/app/finders/members_finder.rb
@@ -7,12 +7,12 @@ class MembersFinder
     @group = project.group
   end
 
-  def execute
+  def execute(include_descendants: false)
     project_members = project.project_members
     project_members = project_members.non_invite unless can?(current_user, :admin_project, project)
 
     if group
-      group_members = GroupMembersFinder.new(group).execute
+      group_members = GroupMembersFinder.new(group).execute(include_descendants: include_descendants)
       group_members = group_members.non_invite
 
       union = Gitlab::SQL::Union.new([project_members, group_members], remove_duplicates: false)
diff --git a/app/finders/merge_request_target_project_finder.rb b/app/finders/merge_request_target_project_finder.rb
index f358938344e..188ec447a94 100644
--- a/app/finders/merge_request_target_project_finder.rb
+++ b/app/finders/merge_request_target_project_finder.rb
@@ -12,6 +12,7 @@ class MergeRequestTargetProjectFinder
     if @source_project.fork_network
       @source_project.fork_network.projects
         .public_or_visible_to_user(current_user)
+        .non_archived
         .with_feature_available_for_user(:merge_requests, current_user)
     else
       Project.where(id: source_project)
diff --git a/app/finders/merge_requests_finder.rb b/app/finders/merge_requests_finder.rb
index 64dc1e6af0f..8d84ed4bdfb 100644
--- a/app/finders/merge_requests_finder.rb
+++ b/app/finders/merge_requests_finder.rb
@@ -5,7 +5,7 @@
 # Arguments:
 #   current_user - which user use
 #   params:
-#     scope: 'created-by-me' or 'assigned-to-me' or 'all'
+#     scope: 'created_by_me' or 'assigned_to_me' or 'all'
 #     state: 'open', 'closed', 'merged', or 'all'
 #     group_id: integer
 #     project_id: integer
@@ -56,8 +56,4 @@ class MergeRequestsFinder < IssuableFinder
 
     items.where(target_branch: target_branch)
   end
-
-  def item_project_ids(items)
-    items&.reorder(nil)&.select(:target_project_id)
-  end
 end
diff --git a/app/finders/notes_finder.rb b/app/finders/notes_finder.rb
index 35f4ff2f62f..9b7a35fb3b5 100644
--- a/app/finders/notes_finder.rb
+++ b/app/finders/notes_finder.rb
@@ -83,7 +83,7 @@ class NotesFinder
     when "personal_snippet"
       PersonalSnippet.all
     else
-      raise 'invalid target_type'
+      raise "invalid target_type '#{noteable_type}'"
     end
   end
 
diff --git a/app/finders/personal_projects_finder.rb b/app/finders/personal_projects_finder.rb
index 3ad4bd5f066..5aea0cb8192 100644
--- a/app/finders/personal_projects_finder.rb
+++ b/app/finders/personal_projects_finder.rb
@@ -13,7 +13,7 @@ class PersonalProjectsFinder < UnionFinder
   def execute(current_user = nil)
     segments = all_projects(current_user)
 
-    find_union(segments, Project).includes(:namespace).order_id_desc
+    find_union(segments, Project).includes(:namespace).order_updated_desc
   end
 
   private
diff --git a/app/finders/pipelines_finder.rb b/app/finders/pipelines_finder.rb
index f187a3b61fe..0a487839aff 100644
--- a/app/finders/pipelines_finder.rb
+++ b/app/finders/pipelines_finder.rb
@@ -14,6 +14,7 @@ class PipelinesFinder
     items = by_scope(items)
     items = by_status(items)
     items = by_ref(items)
+    items = by_sha(items)
     items = by_name(items)
     items = by_username(items)
     items = by_yaml_errors(items)
@@ -69,6 +70,14 @@ class PipelinesFinder
     end
   end
 
+  def by_sha(items)
+    if params[:sha].present?
+      items.where(sha: params[:sha])
+    else
+      items
+    end
+  end
+
   def by_name(items)
     if params[:name].present?
       items.joins(:user).where(users: { name: params[:name] })
diff --git a/app/finders/projects_finder.rb b/app/finders/projects_finder.rb
index 005612ededc..c7d6bc6cfdc 100644
--- a/app/finders/projects_finder.rb
+++ b/app/finders/projects_finder.rb
@@ -124,7 +124,7 @@ class ProjectsFinder < UnionFinder
   end
 
   def sort(items)
-    params[:sort].present? ? items.sort(params[:sort]) : items.order_id_desc
+    params[:sort].present? ? items.sort_by_attribute(params[:sort]) : items.order_id_desc
   end
 
   def by_archived(projects)
diff --git a/app/finders/snippets_finder.rb b/app/finders/snippets_finder.rb
index d498a2d6d11..9d3772d7541 100644
--- a/app/finders/snippets_finder.rb
+++ b/app/finders/snippets_finder.rb
@@ -54,7 +54,10 @@ class SnippetsFinder < UnionFinder
   end
 
   def authorized_snippets
-    Snippet.where(feature_available_projects.or(not_project_related))
+    # This query was intentionally converted to a raw one to get it work in Rails 5.0.
+    # In Rails 5.0 and 5.1 there's a bug: https://github.com/rails/arel/issues/531
+    # Please convert it back when on rails 5.2 as it works again as expected since 5.2.
+    Snippet.where("#{feature_available_projects} OR #{not_project_related}")
       .public_or_visible_to_user(current_user)
   end
 
@@ -86,18 +89,20 @@ class SnippetsFinder < UnionFinder
 
   def feature_available_projects
     # Don't return any project related snippets if the user cannot read cross project
-    return table[:id].eq(nil) unless Ability.allowed?(current_user, :read_cross_project)
+    return table[:id].eq(nil).to_sql unless Ability.allowed?(current_user, :read_cross_project)
 
     projects = projects_for_user do |part|
       part.with_feature_available_for_user(:snippets, current_user)
     end.select(:id)
 
-    arel_query = Arel::Nodes::SqlLiteral.new(projects.to_sql)
-    table[:project_id].in(arel_query)
+    # This query was intentionally converted to a raw one to get it work in Rails 5.0.
+    # In Rails 5.0 and 5.1 there's a bug: https://github.com/rails/arel/issues/531
+    # Please convert it back when on rails 5.2 as it works again as expected since 5.2.
+    "snippets.project_id IN (#{projects.to_sql})"
   end
 
   def not_project_related
-    table[:project_id].eq(nil)
+    table[:project_id].eq(nil).to_sql
   end
 
   def table
diff --git a/app/finders/todos_finder.rb b/app/finders/todos_finder.rb
index 150f4c7688b..09e2c586f2a 100644
--- a/app/finders/todos_finder.rb
+++ b/app/finders/todos_finder.rb
@@ -119,7 +119,7 @@ class TodosFinder
   end
 
   def sort(items)
-    params[:sort] ? items.sort(params[:sort]) : items.order_id_desc
+    params[:sort] ? items.sort_by_attribute(params[:sort]) : items.order_id_desc
   end
 
   def by_action(items)
diff --git a/app/finders/user_recent_events_finder.rb b/app/finders/user_recent_events_finder.rb
index 65d6e019746..74776b2ed1f 100644
--- a/app/finders/user_recent_events_finder.rb
+++ b/app/finders/user_recent_events_finder.rb
@@ -56,7 +56,7 @@ class UserRecentEventsFinder
 
     visible = target_user
       .project_interactions
-      .where(visibility_level: [Gitlab::VisibilityLevel::INTERNAL, Gitlab::VisibilityLevel::PUBLIC])
+      .where(visibility_level: Gitlab::VisibilityLevel.levels_for_user(current_user))
       .select(:id)
 
     Gitlab::SQL::Union.new([authorized, visible]).to_sql
diff --git a/app/finders/users_finder.rb b/app/finders/users_finder.rb
index edde8022ec9..65824a51919 100644
--- a/app/finders/users_finder.rb
+++ b/app/finders/users_finder.rb
@@ -32,6 +32,7 @@ class UsersFinder
     users = by_active(users)
     users = by_external_identity(users)
     users = by_external(users)
+    users = by_2fa(users)
     users = by_created_at(users)
     users = by_custom_attributes(users)
 
@@ -76,4 +77,15 @@ class UsersFinder
 
     users.external
   end
+
+  def by_2fa(users)
+    case params[:two_factor]
+    when 'enabled'
+      users.with_two_factor
+    when 'disabled'
+      users.without_two_factor
+    else
+      users
+    end
+  end
 end
diff --git a/app/graphql/functions/base_function.rb b/app/graphql/functions/base_function.rb
new file mode 100644
index 00000000000..42fb8f99acc
--- /dev/null
+++ b/app/graphql/functions/base_function.rb
@@ -0,0 +1,4 @@
+module Functions
+  class BaseFunction < GraphQL::Function
+  end
+end
diff --git a/app/graphql/functions/echo.rb b/app/graphql/functions/echo.rb
new file mode 100644
index 00000000000..e5bf109b8d7
--- /dev/null
+++ b/app/graphql/functions/echo.rb
@@ -0,0 +1,13 @@
+module Functions
+  class Echo < BaseFunction
+    argument :text, GraphQL::STRING_TYPE
+
+    description "Testing endpoint to validate the API with"
+
+    def call(obj, args, ctx)
+      username = ctx[:current_user]&.username
+
+      "#{username.inspect} says: #{args[:text]}"
+    end
+  end
+end
diff --git a/app/graphql/gitlab_schema.rb b/app/graphql/gitlab_schema.rb
new file mode 100644
index 00000000000..de4fc1d8e32
--- /dev/null
+++ b/app/graphql/gitlab_schema.rb
@@ -0,0 +1,8 @@
+class GitlabSchema < GraphQL::Schema
+  use BatchLoader::GraphQL
+  use Gitlab::Graphql::Authorize
+  use Gitlab::Graphql::Present
+
+  query(Types::QueryType)
+  # mutation(Types::MutationType)
+end
diff --git a/app/graphql/mutations/.keep b/app/graphql/mutations/.keep
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/app/graphql/mutations/.keep
diff --git a/app/graphql/resolvers/base_resolver.rb b/app/graphql/resolvers/base_resolver.rb
new file mode 100644
index 00000000000..89b7f9dad6f
--- /dev/null
+++ b/app/graphql/resolvers/base_resolver.rb
@@ -0,0 +1,4 @@
+module Resolvers
+  class BaseResolver < GraphQL::Schema::Resolver
+  end
+end
diff --git a/app/graphql/resolvers/full_path_resolver.rb b/app/graphql/resolvers/full_path_resolver.rb
new file mode 100644
index 00000000000..4eb28aaed6c
--- /dev/null
+++ b/app/graphql/resolvers/full_path_resolver.rb
@@ -0,0 +1,19 @@
+module Resolvers
+  module FullPathResolver
+    extend ActiveSupport::Concern
+
+    prepended do
+      argument :full_path, GraphQL::ID_TYPE,
+               required: true,
+               description: 'The full path of the project or namespace, e.g., "gitlab-org/gitlab-ce"'
+    end
+
+    def model_by_full_path(model, full_path)
+      BatchLoader.for(full_path).batch(key: "#{model.model_name.param_key}:full_path") do |full_paths, loader|
+        # `with_route` avoids an N+1 calculating full_path
+        results = model.where_full_path_in(full_paths).with_route
+        results.each { |project| loader.call(project.full_path, project) }
+      end
+    end
+  end
+end
diff --git a/app/graphql/resolvers/merge_request_resolver.rb b/app/graphql/resolvers/merge_request_resolver.rb
new file mode 100644
index 00000000000..9f2d348e95f
--- /dev/null
+++ b/app/graphql/resolvers/merge_request_resolver.rb
@@ -0,0 +1,20 @@
+module Resolvers
+  class MergeRequestResolver < BaseResolver
+    argument :iid, GraphQL::ID_TYPE,
+             required: true,
+             description: 'The IID of the merge request, e.g., "1"'
+
+    type Types::MergeRequestType, null: true
+
+    alias_method :project, :object
+
+    def resolve(iid:)
+      return unless project.present?
+
+      BatchLoader.for(iid.to_s).batch(key: project.id) do |iids, loader|
+        results = project.merge_requests.where(iid: iids)
+        results.each { |mr| loader.call(mr.iid.to_s, mr) }
+      end
+    end
+  end
+end
diff --git a/app/graphql/resolvers/project_resolver.rb b/app/graphql/resolvers/project_resolver.rb
new file mode 100644
index 00000000000..ec115bad896
--- /dev/null
+++ b/app/graphql/resolvers/project_resolver.rb
@@ -0,0 +1,11 @@
+module Resolvers
+  class ProjectResolver < BaseResolver
+    prepend FullPathResolver
+
+    type Types::ProjectType, null: true
+
+    def resolve(full_path:)
+      model_by_full_path(Project, full_path)
+    end
+  end
+end
diff --git a/app/graphql/types/base_enum.rb b/app/graphql/types/base_enum.rb
new file mode 100644
index 00000000000..b45a845f74f
--- /dev/null
+++ b/app/graphql/types/base_enum.rb
@@ -0,0 +1,4 @@
+module Types
+  class BaseEnum < GraphQL::Schema::Enum
+  end
+end
diff --git a/app/graphql/types/base_field.rb b/app/graphql/types/base_field.rb
new file mode 100644
index 00000000000..c5740a334d7
--- /dev/null
+++ b/app/graphql/types/base_field.rb
@@ -0,0 +1,5 @@
+module Types
+  class BaseField < GraphQL::Schema::Field
+    prepend Gitlab::Graphql::Authorize
+  end
+end
diff --git a/app/graphql/types/base_input_object.rb b/app/graphql/types/base_input_object.rb
new file mode 100644
index 00000000000..309e336e6c8
--- /dev/null
+++ b/app/graphql/types/base_input_object.rb
@@ -0,0 +1,4 @@
+module Types
+  class BaseInputObject < GraphQL::Schema::InputObject
+  end
+end
diff --git a/app/graphql/types/base_interface.rb b/app/graphql/types/base_interface.rb
new file mode 100644
index 00000000000..69e72dc5808
--- /dev/null
+++ b/app/graphql/types/base_interface.rb
@@ -0,0 +1,5 @@
+module Types
+  module BaseInterface
+    include GraphQL::Schema::Interface
+  end
+end
diff --git a/app/graphql/types/base_object.rb b/app/graphql/types/base_object.rb
new file mode 100644
index 00000000000..e033ef96ce9
--- /dev/null
+++ b/app/graphql/types/base_object.rb
@@ -0,0 +1,7 @@
+module Types
+  class BaseObject < GraphQL::Schema::Object
+    prepend Gitlab::Graphql::Present
+
+    field_class Types::BaseField
+  end
+end
diff --git a/app/graphql/types/base_scalar.rb b/app/graphql/types/base_scalar.rb
new file mode 100644
index 00000000000..c0aa38be239
--- /dev/null
+++ b/app/graphql/types/base_scalar.rb
@@ -0,0 +1,4 @@
+module Types
+  class BaseScalar < GraphQL::Schema::Scalar
+  end
+end
diff --git a/app/graphql/types/base_union.rb b/app/graphql/types/base_union.rb
new file mode 100644
index 00000000000..36337fc6ee5
--- /dev/null
+++ b/app/graphql/types/base_union.rb
@@ -0,0 +1,4 @@
+module Types
+  class BaseUnion < GraphQL::Schema::Union
+  end
+end
diff --git a/app/graphql/types/merge_request_type.rb b/app/graphql/types/merge_request_type.rb
new file mode 100644
index 00000000000..d5d24952984
--- /dev/null
+++ b/app/graphql/types/merge_request_type.rb
@@ -0,0 +1,47 @@
+module Types
+  class MergeRequestType < BaseObject
+    present_using MergeRequestPresenter
+
+    graphql_name 'MergeRequest'
+
+    field :id, GraphQL::ID_TYPE, null: false
+    field :iid, GraphQL::ID_TYPE, null: false
+    field :title, GraphQL::STRING_TYPE, null: false
+    field :description, GraphQL::STRING_TYPE, null: true
+    field :state, GraphQL::STRING_TYPE, null: true
+    field :created_at, Types::TimeType, null: false
+    field :updated_at, Types::TimeType, null: false
+    field :source_project, Types::ProjectType, null: true
+    field :target_project, Types::ProjectType, null: false
+    # Alias for target_project
+    field :project, Types::ProjectType, null: false
+    field :project_id, GraphQL::INT_TYPE, null: false, method: :target_project_id
+    field :source_project_id, GraphQL::INT_TYPE, null: true
+    field :target_project_id, GraphQL::INT_TYPE, null: false
+    field :source_branch, GraphQL::STRING_TYPE, null: false
+    field :target_branch, GraphQL::STRING_TYPE, null: false
+    field :work_in_progress, GraphQL::BOOLEAN_TYPE, method: :work_in_progress?, null: false
+    field :merge_when_pipeline_succeeds, GraphQL::BOOLEAN_TYPE, null: true
+    field :diff_head_sha, GraphQL::STRING_TYPE, null: true
+    field :merge_commit_sha, GraphQL::STRING_TYPE, null: true
+    field :user_notes_count, GraphQL::INT_TYPE, null: true
+    field :should_remove_source_branch, GraphQL::BOOLEAN_TYPE, method: :should_remove_source_branch?, null: true
+    field :force_remove_source_branch, GraphQL::BOOLEAN_TYPE, method: :force_remove_source_branch?, null: true
+    field :merge_status, GraphQL::STRING_TYPE, null: true
+    field :in_progress_merge_commit_sha, GraphQL::STRING_TYPE, null: true
+    field :merge_error, GraphQL::STRING_TYPE, null: true
+    field :allow_collaboration, GraphQL::BOOLEAN_TYPE, null: true
+    field :should_be_rebased, GraphQL::BOOLEAN_TYPE, method: :should_be_rebased?, null: false
+    field :rebase_commit_sha, GraphQL::STRING_TYPE, null: true
+    field :rebase_in_progress, GraphQL::BOOLEAN_TYPE, method: :rebase_in_progress?, null: false
+    field :diff_head_sha, GraphQL::STRING_TYPE, null: true
+    field :merge_commit_message, GraphQL::STRING_TYPE, null: true
+    field :merge_ongoing, GraphQL::BOOLEAN_TYPE, method: :merge_ongoing?, null: false
+    field :source_branch_exists, GraphQL::BOOLEAN_TYPE, method: :source_branch_exists?, null: false
+    field :mergeable_discussions_state, GraphQL::BOOLEAN_TYPE, null: true
+    field :web_url, GraphQL::STRING_TYPE, null: true
+    field :upvotes, GraphQL::INT_TYPE, null: false
+    field :downvotes, GraphQL::INT_TYPE, null: false
+    field :subscribed, GraphQL::BOOLEAN_TYPE, method: :subscribed?, null: false
+  end
+end
diff --git a/app/graphql/types/mutation_type.rb b/app/graphql/types/mutation_type.rb
new file mode 100644
index 00000000000..06ed91c1658
--- /dev/null
+++ b/app/graphql/types/mutation_type.rb
@@ -0,0 +1,7 @@
+module Types
+  class MutationType < BaseObject
+    graphql_name "Mutation"
+
+    # TODO: Add Mutations as fields
+  end
+end
diff --git a/app/graphql/types/project_type.rb b/app/graphql/types/project_type.rb
new file mode 100644
index 00000000000..d9058ae7431
--- /dev/null
+++ b/app/graphql/types/project_type.rb
@@ -0,0 +1,72 @@
+module Types
+  class ProjectType < BaseObject
+    graphql_name 'Project'
+
+    field :id, GraphQL::ID_TYPE, null: false
+
+    field :full_path, GraphQL::ID_TYPE, null: false
+    field :path, GraphQL::STRING_TYPE, null: false
+
+    field :name_with_namespace, GraphQL::STRING_TYPE, null: false
+    field :name, GraphQL::STRING_TYPE, null: false
+
+    field :description, GraphQL::STRING_TYPE, null: true
+
+    field :default_branch, GraphQL::STRING_TYPE, null: true
+    field :tag_list, GraphQL::STRING_TYPE, null: true
+
+    field :ssh_url_to_repo, GraphQL::STRING_TYPE, null: true
+    field :http_url_to_repo, GraphQL::STRING_TYPE, null: true
+    field :web_url, GraphQL::STRING_TYPE, null: true
+
+    field :star_count, GraphQL::INT_TYPE, null: false
+    field :forks_count, GraphQL::INT_TYPE, null: false
+
+    field :created_at, Types::TimeType, null: true
+    field :last_activity_at, Types::TimeType, null: true
+
+    field :archived, GraphQL::BOOLEAN_TYPE, null: true
+
+    field :visibility, GraphQL::STRING_TYPE, null: true
+
+    field :container_registry_enabled, GraphQL::BOOLEAN_TYPE, null: true
+    field :shared_runners_enabled, GraphQL::BOOLEAN_TYPE, null: true
+    field :lfs_enabled, GraphQL::BOOLEAN_TYPE, null: true
+    field :merge_requests_ff_only_enabled, GraphQL::BOOLEAN_TYPE, null: true
+
+    field :avatar_url, GraphQL::STRING_TYPE, null: true, resolve: -> (project, args, ctx) do
+      project.avatar_url(only_path: false)
+    end
+
+    %i[issues merge_requests wiki snippets].each do |feature|
+      field "#{feature}_enabled", GraphQL::BOOLEAN_TYPE, null: true, resolve: -> (project, args, ctx) do
+        project.feature_available?(feature, ctx[:current_user])
+      end
+    end
+
+    field :jobs_enabled, GraphQL::BOOLEAN_TYPE, null: true, resolve: -> (project, args, ctx) do
+      project.feature_available?(:builds, ctx[:current_user])
+    end
+
+    field :public_jobs, GraphQL::BOOLEAN_TYPE, method: :public_builds, null: true
+
+    field :open_issues_count, GraphQL::INT_TYPE, null: true, resolve: -> (project, args, ctx) do
+      project.open_issues_count if project.feature_available?(:issues, ctx[:current_user])
+    end
+
+    field :import_status, GraphQL::STRING_TYPE, null: true
+    field :ci_config_path, GraphQL::STRING_TYPE, null: true
+
+    field :only_allow_merge_if_pipeline_succeeds, GraphQL::BOOLEAN_TYPE, null: true
+    field :request_access_enabled, GraphQL::BOOLEAN_TYPE, null: true
+    field :only_allow_merge_if_all_discussions_are_resolved, GraphQL::BOOLEAN_TYPE, null: true
+    field :printing_merge_request_link_enabled, GraphQL::BOOLEAN_TYPE, null: true
+
+    field :merge_request,
+          Types::MergeRequestType,
+          null: true,
+          resolver: Resolvers::MergeRequestResolver do
+      authorize :read_merge_request
+    end
+  end
+end
diff --git a/app/graphql/types/query_type.rb b/app/graphql/types/query_type.rb
new file mode 100644
index 00000000000..010ec2d7942
--- /dev/null
+++ b/app/graphql/types/query_type.rb
@@ -0,0 +1,14 @@
+module Types
+  class QueryType < BaseObject
+    graphql_name 'Query'
+
+    field :project, Types::ProjectType,
+          null: true,
+          resolver: Resolvers::ProjectResolver,
+          description: "Find a project" do
+      authorize :read_project
+    end
+
+    field :echo, GraphQL::STRING_TYPE, null: false, function: Functions::Echo.new
+  end
+end
diff --git a/app/graphql/types/time_type.rb b/app/graphql/types/time_type.rb
new file mode 100644
index 00000000000..2333d82ad1e
--- /dev/null
+++ b/app/graphql/types/time_type.rb
@@ -0,0 +1,14 @@
+module Types
+  class TimeType < BaseScalar
+    graphql_name 'Time'
+    description 'Time represented in ISO 8601'
+
+    def self.coerce_input(value, ctx)
+      Time.parse(value)
+    end
+
+    def self.coerce_result(value, ctx)
+      value.iso8601
+    end
+  end
+end
diff --git a/app/helpers/active_sessions_helper.rb b/app/helpers/active_sessions_helper.rb
new file mode 100644
index 00000000000..97b6dac67c5
--- /dev/null
+++ b/app/helpers/active_sessions_helper.rb
@@ -0,0 +1,23 @@
+module ActiveSessionsHelper
+  # Maps a device type as defined in `ActiveSession` to an svg icon name and
+  # outputs the icon html.
+  #
+  # see `DeviceDetector::Device::DEVICE_NAMES` about the available device types
+  def active_session_device_type_icon(active_session)
+    icon_name =
+      case active_session.device_type
+      when 'smartphone', 'feature phone', 'phablet'
+        'mobile'
+      when 'tablet'
+        'tablet'
+      when 'tv', 'smart display', 'camera', 'portable media player', 'console'
+        'media'
+      when 'car browser'
+        'car'
+      else
+        'monitor-o'
+      end
+
+    sprite_icon(icon_name, size: 16, css_class: 'prepend-top-2')
+  end
+end
diff --git a/app/helpers/appearances_helper.rb b/app/helpers/appearances_helper.rb
index c037de33c22..f48db024e3f 100644
--- a/app/helpers/appearances_helper.rb
+++ b/app/helpers/appearances_helper.rb
@@ -1,27 +1,27 @@
 module AppearancesHelper
   def brand_title
-    brand_item&.title.presence || 'GitLab Community Edition'
+    current_appearance&.title.presence || 'GitLab Community Edition'
   end
 
   def brand_image
-    image_tag(brand_item.logo) if brand_item&.logo?
+    image_tag(current_appearance.logo) if current_appearance&.logo?
   end
 
   def brand_text
-    markdown_field(brand_item, :description)
+    markdown_field(current_appearance, :description)
   end
 
   def brand_new_project_guidelines
-    markdown_field(brand_item, :new_project_guidelines)
+    markdown_field(current_appearance, :new_project_guidelines)
   end
 
-  def brand_item
+  def current_appearance
     @appearance ||= Appearance.current
   end
 
   def brand_header_logo
-    if brand_item&.header_logo?
-      image_tag brand_item.header_logo
+    if current_appearance&.header_logo?
+      image_tag current_appearance.header_logo
     else
       render 'shared/logo.svg'
     end
@@ -29,7 +29,7 @@ module AppearancesHelper
 
   # Skip the 'GitLab' type logo when custom brand logo is set
   def brand_header_logo_type
-    unless brand_item&.header_logo?
+    unless current_appearance&.header_logo?
       render 'shared/logo_type.svg'
     end
   end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 3ddf8eb3369..f5d94ad96a1 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -2,6 +2,11 @@ require 'digest/md5'
 require 'uri'
 
 module ApplicationHelper
+  # See https://docs.gitlab.com/ee/development/ee_features.html#code-in-app-views
+  def render_if_exists(partial, locals = {})
+    render(partial, locals) if lookup_context.exists?(partial, [], true)
+  end
+
   # Check if a particular controller is the current one
   #
   # args - One or more controller names to check
@@ -32,80 +37,6 @@ module ApplicationHelper
     args.any? { |v| v.to_s.downcase == action_name }
   end
 
-  def project_icon(project_id, options = {})
-    project =
-      if project_id.respond_to?(:avatar_url)
-        project_id
-      else
-        Project.find_by_full_path(project_id)
-      end
-
-    if project.avatar_url
-      image_tag project.avatar_url, options
-    else # generated icon
-      project_identicon(project, options)
-    end
-  end
-
-  def project_identicon(project, options = {})
-    allowed_colors = {
-      red: 'FFEBEE',
-      purple: 'F3E5F5',
-      indigo: 'E8EAF6',
-      blue: 'E3F2FD',
-      teal: 'E0F2F1',
-      orange: 'FBE9E7',
-      gray: 'EEEEEE'
-    }
-
-    options[:class] ||= ''
-    options[:class] << ' identicon'
-    bg_key = project.id % 7
-    style = "background-color: ##{allowed_colors.values[bg_key]}; color: #555"
-
-    content_tag(:div, class: options[:class], style: style) do
-      project.name[0, 1].upcase
-    end
-  end
-
-  # Takes both user and email and returns the avatar_icon by
-  # user (preferred) or email.
-  def avatar_icon_for(user = nil, email = nil, size = nil, scale = 2, only_path: true)
-    if user
-      avatar_icon_for_user(user, size, scale, only_path: only_path)
-    elsif email
-      avatar_icon_for_email(email, size, scale, only_path: only_path)
-    else
-      default_avatar
-    end
-  end
-
-  def avatar_icon_for_email(email = nil, size = nil, scale = 2, only_path: true)
-    user = User.find_by_any_email(email.try(:downcase))
-    if user
-      avatar_icon_for_user(user, size, scale, only_path: only_path)
-    else
-      gravatar_icon(email, size, scale)
-    end
-  end
-
-  def avatar_icon_for_user(user = nil, size = nil, scale = 2, only_path: true)
-    if user
-      user.avatar_url(size: size, only_path: only_path) || default_avatar
-    else
-      gravatar_icon(nil, size, scale)
-    end
-  end
-
-  def gravatar_icon(user_email = '', size = nil, scale = 2)
-    GravatarService.new.execute(user_email, size, scale) ||
-      default_avatar
-  end
-
-  def default_avatar
-    asset_path('no_avatar.png')
-  end
-
   def last_commit(project)
     if project.repo_exists?
       time_ago_with_tooltip(project.repository.commit.committed_date)
@@ -228,9 +159,7 @@ module ApplicationHelper
       scope: params[:scope],
       milestone_title: params[:milestone_title],
       assignee_id: params[:assignee_id],
-      assignee_username: params[:assignee_username],
       author_id: params[:author_id],
-      author_username: params[:author_username],
       search: params[:search],
       label_name: params[:label_name]
     }
@@ -285,6 +214,10 @@ module ApplicationHelper
     class_names
   end
 
+  # EE feature: System header and footer, unavailable in CE
+  def system_message_class
+  end
+
   # Returns active css class when condition returns true
   # otherwise returns nil.
   #
@@ -323,4 +256,24 @@ module ApplicationHelper
   def locale_path
     asset_path("locale/#{Gitlab::I18n.locale}/app.js")
   end
+
+  # Overridden in EE
+  def read_only_message
+    return unless Gitlab::Database.read_only?
+
+    _('You are on a read-only GitLab instance.')
+  end
+
+  def autocomplete_data_sources(object, noteable_type)
+    return {} unless object && noteable_type
+
+    {
+      members: members_project_autocomplete_sources_path(object, type: noteable_type, type_id: params[:id]),
+      issues: issues_project_autocomplete_sources_path(object),
+      merge_requests: merge_requests_project_autocomplete_sources_path(object),
+      labels: labels_project_autocomplete_sources_path(object, type: noteable_type, type_id: params[:id]),
+      milestones: milestones_project_autocomplete_sources_path(object),
+      commands: commands_project_autocomplete_sources_path(object, type: noteable_type, type_id: params[:id])
+    }
+  end
 end
diff --git a/app/helpers/application_settings_helper.rb b/app/helpers/application_settings_helper.rb
index 63e4a5dc45c..ef1bf283d0c 100644
--- a/app/helpers/application_settings_helper.rb
+++ b/app/helpers/application_settings_helper.rb
@@ -36,7 +36,7 @@ module ApplicationSettingsHelper
 
   # Return a group of checkboxes that use Bootstrap's button plugin for a
   # toggle button effect.
-  def restricted_level_checkboxes(help_block_id, checkbox_name)
+  def restricted_level_checkboxes(help_block_id, checkbox_name, options = {})
     Gitlab::VisibilityLevel.values.map do |level|
       checked = restricted_visibility_levels(true).include?(level)
       css_class = checked ? 'active' : ''
@@ -46,6 +46,7 @@ module ApplicationSettingsHelper
         check_box_tag(checkbox_name, level, checked,
                       autocomplete: 'off',
                       'aria-describedby' => help_block_id,
+                      'class' => options[:class],
                       id: tag_name) + visibility_level_icon(level) + visibility_level_label(level)
       end
     end
@@ -53,7 +54,7 @@ module ApplicationSettingsHelper
 
   # Return a group of checkboxes that use Bootstrap's button plugin for a
   # toggle button effect.
-  def import_sources_checkboxes(help_block_id)
+  def import_sources_checkboxes(help_block_id, options = {})
     Gitlab::ImportSources.options.map do |name, source|
       checked = Gitlab::CurrentSettings.import_sources.include?(source)
       css_class = checked ? 'active' : ''
@@ -63,6 +64,7 @@ module ApplicationSettingsHelper
         check_box_tag(checkbox_name, source, checked,
                       autocomplete: 'off',
                       'aria-describedby' => help_block_id,
+                      'class' => options[:class],
                       id: name.tr(' ', '_')) + name
       end
     end
@@ -74,10 +76,12 @@ module ApplicationSettingsHelper
       css_class = 'btn'
       css_class << ' active' unless disabled
       checkbox_name = 'application_setting[enabled_oauth_sign_in_sources][]'
+      name = Gitlab::Auth::OAuth::Provider.label_for(source)
 
       label_tag(checkbox_name, class: css_class) do
         check_box_tag(checkbox_name, source, !disabled,
-                      autocomplete: 'off') + Gitlab::Auth::OAuth::Provider.label_for(source)
+                      autocomplete: 'off',
+                      id: name.tr(' ', '_')) + name
       end
     end
   end
@@ -96,7 +100,7 @@ module ApplicationSettingsHelper
 
   def repository_storages_options_for_select(selected)
     options = Gitlab.config.repositories.storages.map do |name, storage|
-      ["#{name} - #{storage['path']}", name]
+      ["#{name} - #{storage['gitaly_address']}", name]
     end
 
     options_for_select(options, selected)
@@ -202,7 +206,7 @@ module ApplicationSettingsHelper
       :pages_domain_verification_enabled,
       :password_authentication_enabled_for_web,
       :password_authentication_enabled_for_git,
-      :performance_bar_allowed_group_id,
+      :performance_bar_allowed_group_path,
       :performance_bar_enabled,
       :plantuml_enabled,
       :plantuml_url,
@@ -246,7 +250,10 @@ module ApplicationSettingsHelper
       :user_default_external,
       :user_oauth_applications,
       :version_check_enabled,
-      :allow_local_requests_from_hooks_and_services
+      :allow_local_requests_from_hooks_and_services,
+      :enforce_terms,
+      :terms,
+      :mirror_available
     ]
   end
 end
diff --git a/app/helpers/auth_helper.rb b/app/helpers/auth_helper.rb
index c109954f3a3..d2daee22aba 100644
--- a/app/helpers/auth_helper.rb
+++ b/app/helpers/auth_helper.rb
@@ -1,6 +1,6 @@
 module AuthHelper
   PROVIDERS_WITH_ICONS = %w(twitter github gitlab bitbucket google_oauth2 facebook azure_oauth2 authentiq).freeze
-  FORM_BASED_PROVIDERS = [/\Aldap/, 'crowd'].freeze
+  LDAP_PROVIDER = /\Aldap/
 
   def ldap_enabled?
     Gitlab::Auth::LDAP::Config.enabled?
@@ -23,7 +23,7 @@ module AuthHelper
   end
 
   def form_based_provider?(name)
-    FORM_BASED_PROVIDERS.any? { |pattern| pattern === name.to_s }
+    [LDAP_PROVIDER, 'crowd'].any? { |pattern| pattern === name.to_s }
   end
 
   def form_based_providers
@@ -38,6 +38,10 @@ module AuthHelper
     auth_providers.reject { |provider| form_based_provider?(provider) }
   end
 
+  def providers_for_base_controller
+    auth_providers.reject { |provider| LDAP_PROVIDER === provider }
+  end
+
   def enabled_button_based_providers
     disabled_providers = Gitlab::CurrentSettings.disabled_oauth_sign_in_sources || []
 
diff --git a/app/helpers/auto_devops_helper.rb b/app/helpers/auto_devops_helper.rb
index 16451993e93..7b076728685 100644
--- a/app/helpers/auto_devops_helper.rb
+++ b/app/helpers/auto_devops_helper.rb
@@ -24,6 +24,15 @@ module AutoDevopsHelper
     end
   end
 
+  def cluster_ingress_ip(project)
+    project
+      .cluster_ingresses
+      .where("external_ip is not null")
+      .limit(1)
+      .pluck(:external_ip)
+      .first
+  end
+
   private
 
   def missing_auto_devops_domain?(project)
diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb
index 21b6c0a8ad5..43d92bde064 100644
--- a/app/helpers/avatars_helper.rb
+++ b/app/helpers/avatars_helper.rb
@@ -1,10 +1,84 @@
 module AvatarsHelper
+  def project_icon(project_id, options = {})
+    project =
+      if project_id.respond_to?(:avatar_url)
+        project_id
+      else
+        Project.find_by_full_path(project_id)
+      end
+
+    if project.avatar_url
+      image_tag project.avatar_url, options
+    else # generated icon
+      project_identicon(project, options)
+    end
+  end
+
+  def project_identicon(project, options = {})
+    allowed_colors = {
+      red: 'FFEBEE',
+      purple: 'F3E5F5',
+      indigo: 'E8EAF6',
+      blue: 'E3F2FD',
+      teal: 'E0F2F1',
+      orange: 'FBE9E7',
+      gray: 'EEEEEE'
+    }
+
+    options[:class] ||= ''
+    options[:class] << ' identicon'
+    bg_key = project.id % 7
+    style = "background-color: ##{allowed_colors.values[bg_key]}; color: #555"
+
+    content_tag(:div, class: options[:class], style: style) do
+      project.name[0, 1].upcase
+    end
+  end
+
+  # Takes both user and email and returns the avatar_icon by
+  # user (preferred) or email.
+  def avatar_icon_for(user = nil, email = nil, size = nil, scale = 2, only_path: true)
+    if user
+      avatar_icon_for_user(user, size, scale, only_path: only_path)
+    elsif email
+      avatar_icon_for_email(email, size, scale, only_path: only_path)
+    else
+      default_avatar
+    end
+  end
+
+  def avatar_icon_for_email(email = nil, size = nil, scale = 2, only_path: true)
+    user = User.find_by_any_email(email.try(:downcase))
+    if user
+      avatar_icon_for_user(user, size, scale, only_path: only_path)
+    else
+      gravatar_icon(email, size, scale)
+    end
+  end
+
+  def avatar_icon_for_user(user = nil, size = nil, scale = 2, only_path: true)
+    if user
+      user.avatar_url(size: size, only_path: only_path) || default_avatar
+    else
+      gravatar_icon(nil, size, scale)
+    end
+  end
+
+  def gravatar_icon(user_email = '', size = nil, scale = 2)
+    GravatarService.new.execute(user_email, size, scale) ||
+      default_avatar
+  end
+
+  def default_avatar
+    ActionController::Base.helpers.image_path('no_avatar.png')
+  end
+
   def author_avatar(commit_or_event, options = {})
     user_avatar(options.merge({
       user: commit_or_event.author,
       user_name: commit_or_event.author_name,
       user_email: commit_or_event.author_email,
-      css_class: 'hidden-xs'
+      css_class: 'd-none d-sm-inline'
     }))
   end
 
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 2b440e4d584..3db28fd6da3 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -17,7 +17,9 @@ module BlobHelper
   end
 
   def ide_edit_path(project = @project, ref = @ref, path = @path, options = {})
-    "#{ide_path}/project#{edit_blob_path(project, ref, path, options)}"
+    segments = [ide_path, 'project', project.full_path, 'edit', ref]
+    segments.concat(['-', path]) if path.present?
+    File.join(segments)
   end
 
   def edit_blob_button(project = @project, ref = @ref, path = @path, options = {})
@@ -59,7 +61,7 @@ module BlobHelper
       button_tag label, class: "#{common_classes} disabled has-tooltip", title: "It is not possible to #{action} files that are stored in LFS using the web interface", data: { container: 'body' }
     elsif can_modify_blob?(blob, project, ref)
       button_tag label, class: "#{common_classes}", 'data-target' => "#modal-#{modal_type}-blob", 'data-toggle' => 'modal'
-    elsif can?(current_user, :fork_project, project)
+    elsif can?(current_user, :fork_project, project) && can?(current_user, :create_merge_request_in, project)
       edit_fork_button_tag(common_classes, project, label, edit_modify_file_fork_params(action), action)
     end
   end
@@ -259,7 +261,7 @@ module BlobHelper
     options = []
 
     if error == :collapsed
-      options << link_to('load it anyway', url_for(params.merge(viewer: viewer.type, expanded: true, format: nil)))
+      options << link_to('load it anyway', url_for(safe_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,
@@ -280,7 +282,7 @@ module BlobHelper
       options << link_to("submit an issue", new_project_issue_path(project))
     end
 
-    merge_project = can?(current_user, :create_merge_request, project) ? project : (current_user && current_user.fork_of(project))
+    merge_project = merge_request_source_project_for_project(@project)
     if merge_project
       options << link_to("create a merge request", project_new_merge_request_path(project))
     end
@@ -331,10 +333,9 @@ module BlobHelper
     if !on_top_of_branch?(project, ref)
       edit_disabled_button_tag(text, common_classes)
       # This condition only applies to users who are logged in
-      # Web IDE (Beta) requires the user to have this feature enabled
     elsif !current_user || (current_user && can_modify_blob?(blob, project, ref))
       edit_link_tag(text, edit_path, common_classes)
-    elsif current_user && can?(current_user, :fork_project, project)
+    elsif can?(current_user, :fork_project, project) && can?(current_user, :create_merge_request_in, project)
       edit_fork_button_tag(common_classes, project, text, edit_blob_fork_params(edit_path))
     end
   end
diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb
index 275e892b2e6..af878bcf9a0 100644
--- a/app/helpers/boards_helper.rb
+++ b/app/helpers/boards_helper.rb
@@ -53,10 +53,12 @@ module BoardsHelper
   end
 
   def board_list_data
+    include_descendant_groups = @group&.present?
+
     {
       toggle: "dropdown",
-      list_labels_path: labels_filter_path(true),
-      labels: labels_filter_path(true),
+      list_labels_path: labels_filter_path(true, include_ancestor_groups: true),
+      labels: labels_filter_path(true, include_descendant_groups: include_descendant_groups),
       labels_endpoint: @labels_endpoint,
       namespace_path: @namespace_path,
       project_path: @project&.path,
diff --git a/app/helpers/calendar_helper.rb b/app/helpers/calendar_helper.rb
new file mode 100644
index 00000000000..c54b91b0ce5
--- /dev/null
+++ b/app/helpers/calendar_helper.rb
@@ -0,0 +1,8 @@
+module CalendarHelper
+  def calendar_url_options
+    { format: :ics,
+      feed_token: current_user.try(:feed_token),
+      due_date: Issue::DueNextMonthAndPreviousTwoWeeks.name,
+      sort: 'closest_future_date' }
+  end
+end
diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb
index 636316da80a..5fce97164ae 100644
--- a/app/helpers/ci_status_helper.rb
+++ b/app/helpers/ci_status_helper.rb
@@ -92,9 +92,9 @@ module CiStatusHelper
     "pipeline-status/#{pipeline_status.sha}-#{pipeline_status.status}"
   end
 
-  def render_project_pipeline_status(pipeline_status, tooltip_placement: 'auto left')
+  def render_project_pipeline_status(pipeline_status, tooltip_placement: 'left')
     project = pipeline_status.project
-    path = pipelines_project_commit_path(project, pipeline_status.sha)
+    path = pipelines_project_commit_path(project, pipeline_status.sha, ref: pipeline_status.ref)
 
     render_status_with_link(
       'commit',
@@ -103,9 +103,9 @@ module CiStatusHelper
       tooltip_placement: tooltip_placement)
   end
 
-  def render_commit_status(commit, ref: nil, tooltip_placement: 'auto left')
+  def render_commit_status(commit, ref: nil, tooltip_placement: 'left')
     project = commit.project
-    path = pipelines_project_commit_path(project, commit)
+    path = pipelines_project_commit_path(project, commit, ref: ref)
 
     render_status_with_link(
       'commit',
@@ -114,7 +114,7 @@ module CiStatusHelper
       tooltip_placement: tooltip_placement)
   end
 
-  def render_pipeline_status(pipeline, tooltip_placement: 'auto left')
+  def render_pipeline_status(pipeline, tooltip_placement: 'left')
     project = pipeline.project
     path = project_pipeline_path(project, pipeline)
     render_status_with_link('pipeline', pipeline.status, path, tooltip_placement: tooltip_placement)
@@ -125,7 +125,7 @@ module CiStatusHelper
       Ci::Runner.shared.blank?
   end
 
-  def render_status_with_link(type, status, path = nil, tooltip_placement: 'auto left', cssclass: '', container: 'body')
+  def render_status_with_link(type, status, path = nil, tooltip_placement: 'left', cssclass: '', container: 'body')
     klass = "ci-status-link ci-status-icon-#{status.dasherize} #{cssclass}"
     title = "#{type.titleize}: #{ci_label_for_status(status)}"
     data = { toggle: 'tooltip', placement: tooltip_placement, container: container }
diff --git a/app/helpers/clusters_helper.rb b/app/helpers/clusters_helper.rb
index 7e4eb06b99d..c24d340d184 100644
--- a/app/helpers/clusters_helper.rb
+++ b/app/helpers/clusters_helper.rb
@@ -2,4 +2,12 @@ module ClustersHelper
   def has_multiple_clusters?(project)
     false
   end
+
+  def render_gcp_signup_offer
+    return unless show_gcp_signup_offer?
+
+    content_tag :section, class: 'no-animate expanded' do
+      render 'projects/clusters/gcp_signup_offer_banner'
+    end
+  end
 end
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index 0333c29e2fd..e5c3be47801 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -27,7 +27,7 @@ module CommitsHelper
     return unless @project && @ref
 
     # Add the root project link and the arrow icon
-    crumbs = content_tag(:li) do
+    crumbs = content_tag(:li, class: 'breadcrumb-item') do
       link_to(
         @project.path,
         project_commits_path(@project, @ref)
@@ -38,7 +38,7 @@ module CommitsHelper
       parts = @path.split('/')
 
       parts.each_with_index do |part, i|
-        crumbs << content_tag(:li) do
+        crumbs << content_tag(:li, class: 'breadcrumb-item') do
           # The text is just the individual part, but the link needs all the parts before it
           link_to(
             part,
@@ -62,8 +62,8 @@ module CommitsHelper
 
   # Returns a link formatted as a commit branch link
   def commit_branch_link(url, text)
-    link_to(url, class: 'label label-gray ref-name branch-link') do
-      sprite_icon('fork', size: 16, css_class: 'fork-svg') + "#{text}"
+    link_to(url, class: 'badge badge-gray ref-name branch-link') do
+      sprite_icon('branch', size: 12, css_class: 'fork-svg') + "#{text}"
     end
   end
 
@@ -76,8 +76,8 @@ module CommitsHelper
 
   # Returns a link formatted as a commit tag link
   def commit_tag_link(url, text)
-    link_to(url, class: 'label label-gray ref-name') do
-      icon('tag', class: 'append-right-5') + "#{text}"
+    link_to(url, class: 'badge badge-gray ref-name') do
+      sprite_icon('tag', size: 12, css_class: 'append-right-5 vertical-align-middle') + "#{text}"
     end
   end
 
@@ -93,25 +93,18 @@ module CommitsHelper
     return unless current_controller?(:commits)
 
     if @path.blank?
-      return link_to(
-        _("Browse Files"),
-        project_tree_path(project, commit),
-        class: "btn btn-default"
-      )
+      url = project_tree_path(project, commit)
+      tooltip = _("Browse Files")
     elsif @repo.blob_at(commit.id, @path)
-      return link_to(
-        _("Browse File"),
-        project_blob_path(project,
-                                    tree_join(commit.id, @path)),
-        class: "btn btn-default"
-      )
+      url = project_blob_path(project, tree_join(commit.id, @path))
+      tooltip = _("Browse File")
     elsif @path.present?
-      return link_to(
-        _("Browse Directory"),
-        project_tree_path(project,
-                                    tree_join(commit.id, @path)),
-        class: "btn btn-default"
-      )
+      url = project_tree_path(project, tree_join(commit.id, @path))
+      tooltip = _("Browse Directory")
+    end
+
+    link_to url, class: "btn btn-default has-tooltip", title: tooltip, data: { container: "body" } do
+      sprite_icon('folder-open')
     end
   end
 
@@ -170,7 +163,7 @@ module CommitsHelper
     tooltip = "#{action.capitalize} this #{commit.change_type_title(current_user)} in a new merge request" if has_tooltip
     btn_class = "btn btn-#{btn_class}" unless btn_class.nil?
 
-    if can_collaborate_with_project?
+    if can_collaborate_with_project?(@project)
       link_to action.capitalize, "#modal-#{action}-commit", 'data-toggle' => 'modal', 'data-container' => 'body', title: (tooltip if has_tooltip), class: "#{btn_class} #{'has-tooltip' if has_tooltip}"
     elsif can?(current_user, :fork_project, @project)
       continue_params = {
diff --git a/app/helpers/compare_helper.rb b/app/helpers/compare_helper.rb
index 8bf96c0905f..2df5b5d1695 100644
--- a/app/helpers/compare_helper.rb
+++ b/app/helpers/compare_helper.rb
@@ -3,7 +3,7 @@ module CompareHelper
     from.present? &&
       to.present? &&
       from != to &&
-      can?(current_user, :create_merge_request, project) &&
+      can?(current_user, :create_merge_request_from, project) &&
       project.repository.branch_exists?(from) &&
       project.repository.branch_exists?(to)
   end
diff --git a/app/helpers/count_helper.rb b/app/helpers/count_helper.rb
new file mode 100644
index 00000000000..5cd98f40f78
--- /dev/null
+++ b/app/helpers/count_helper.rb
@@ -0,0 +1,9 @@
+module CountHelper
+  def approximate_count_with_delimiters(count_data, model)
+    count = count_data[model]
+
+    raise "Missing model #{model} from count data" unless count
+
+    number_with_delimiter(count)
+  end
+end
diff --git a/app/helpers/deploy_tokens_helper.rb b/app/helpers/deploy_tokens_helper.rb
new file mode 100644
index 00000000000..bd921322476
--- /dev/null
+++ b/app/helpers/deploy_tokens_helper.rb
@@ -0,0 +1,12 @@
+module DeployTokensHelper
+  def expand_deploy_tokens_section?(deploy_token)
+    deploy_token.persisted? ||
+      deploy_token.errors.present? ||
+      Rails.env.test?
+  end
+
+  def container_registry_enabled?(project)
+    Gitlab.config.registry.enabled &&
+      can?(current_user, :read_container_image, project)
+  end
+end
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index b5ca39711bc..1bb82fd8150 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -180,7 +180,7 @@ module DiffHelper
   private
 
   def diff_btn(title, name, selected)
-    params_copy = params.dup
+    params_copy = safe_params.dup
     params_copy[:view] = name
 
     # Always use HTML to handle case where JSON diff rendered this button
diff --git a/app/helpers/dropdowns_helper.rb b/app/helpers/dropdowns_helper.rb
index 5089da519df..5a2360b4661 100644
--- a/app/helpers/dropdowns_helper.rb
+++ b/app/helpers/dropdowns_helper.rb
@@ -41,7 +41,7 @@ module DropdownsHelper
 
   def dropdown_toggle(toggle_text, data_attr, options = {})
     default_label = data_attr[:default_label]
-    content_tag(:button, class: "dropdown-menu-toggle #{options[:toggle_class] if options.key?(:toggle_class)}", id: (options[:id] if options.key?(:id)), type: "button", data: data_attr) do
+    content_tag(:button, disabled: options[:disabled], class: "dropdown-menu-toggle #{options[:toggle_class] if options.key?(:toggle_class)}", id: (options[:id] if options.key?(:id)), type: "button", data: data_attr) do
       output = content_tag(:span, toggle_text, class: "dropdown-toggle-text #{'is-default' if toggle_text == default_label}")
       output << icon('chevron-down')
       output.html_safe
diff --git a/app/helpers/emails_helper.rb b/app/helpers/emails_helper.rb
index 4ddc1dbed49..c86a26ac30f 100644
--- a/app/helpers/emails_helper.rb
+++ b/app/helpers/emails_helper.rb
@@ -54,9 +54,9 @@ module EmailsHelper
   end
 
   def header_logo
-    if brand_item && brand_item.header_logo?
+    if current_appearance&.header_logo?
       image_tag(
-        brand_item.header_logo,
+        current_appearance.header_logo,
         style: 'height: 50px'
       )
     else
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index 079b3cd3aa0..cb6f709c604 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -41,7 +41,7 @@ module EventsHelper
     key = key.to_s
     active = 'active' if @event_filter.active?(key)
     link_opts = {
-      class: "event-filter-link has-tooltip",
+      class: "event-filter-link",
       id:    "#{key}_event_filter",
       title: tooltip
     }
diff --git a/app/helpers/favicon_helper.rb b/app/helpers/favicon_helper.rb
new file mode 100644
index 00000000000..3a5342a8d9d
--- /dev/null
+++ b/app/helpers/favicon_helper.rb
@@ -0,0 +1,7 @@
+module FaviconHelper
+  def favicon_extension_whitelist
+    FaviconUploader::EXTENSION_WHITELIST
+      .map { |extension| "'.#{extension}'"}
+      .to_sentence
+  end
+end
diff --git a/app/helpers/gitlab_routing_helper.rb b/app/helpers/gitlab_routing_helper.rb
index 7f3c118c7ab..61e12b0f31e 100644
--- a/app/helpers/gitlab_routing_helper.rb
+++ b/app/helpers/gitlab_routing_helper.rb
@@ -19,14 +19,6 @@ module GitlabRoutingHelper
     project_commits_path(project, ref_name, *args)
   end
 
-  def runners_path(project, *args)
-    project_runners_path(project, *args)
-  end
-
-  def runner_path(runner, *args)
-    project_runner_path(@project, runner, *args)
-  end
-
   def environment_path(environment, *args)
     project_environment_path(environment.project, environment, *args)
   end
@@ -81,6 +73,14 @@ module GitlabRoutingHelper
     end
   end
 
+  def edit_milestone_path(entity, *args)
+    if entity.parent.is_a?(Group)
+      edit_group_milestone_path(entity.parent, entity, *args)
+    else
+      edit_project_milestone_path(entity.parent, entity, *args)
+    end
+  end
+
   def toggle_subscription_path(entity, *args)
     if entity.is_a?(Issue)
       toggle_subscription_project_issue_path(entity.project, entity)
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index 16eceb3f48f..95fea2f18d1 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -1,6 +1,6 @@
 module GroupsHelper
   def group_nav_link_paths
-    %w[groups#projects groups#edit ci_cd#show ldap_group_links#index hooks#index audit_events#index pipeline_quota#index]
+    %w[groups#projects groups#edit badges#index ci_cd#show ldap_group_links#index hooks#index audit_events#index pipeline_quota#index]
   end
 
   def group_sidebar_links
diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb
index c5522ff7a69..2f304b040c7 100644
--- a/app/helpers/icons_helper.rb
+++ b/app/helpers/icons_helper.rb
@@ -43,6 +43,10 @@ module IconsHelper
     content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{sprite_icon_path}##{icon_name}" } ), class: css_classes.empty? ? nil : css_classes)
   end
 
+  def external_snippet_icon(name)
+    content_tag(:span, "", class: "gl-snippet-icon gl-snippet-icon-#{name}")
+  end
+
   def audit_icon(names, options = {})
     case names
     when "standard"
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index 6d6b840f485..9f501ea55fb 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -9,6 +9,32 @@ module IssuablesHelper
     "right-sidebar-#{sidebar_gutter_collapsed? ? 'collapsed' : 'expanded'}"
   end
 
+  def sidebar_gutter_tooltip_text
+    sidebar_gutter_collapsed? ? _('Expand sidebar') : _('Collapse sidebar')
+  end
+
+  def sidebar_assignee_tooltip_label(issuable)
+    if issuable.assignee
+      issuable.assignee.name
+    else
+      issuable.allows_multiple_assignees? ? _('Assignee(s)') : _('Assignee')
+    end
+  end
+
+  def sidebar_due_date_tooltip_label(issuable)
+    if issuable.due_date
+      "#{_('Due date')}<br />#{due_date_remaining_days(issuable)}"
+    else
+      _('Due date')
+    end
+  end
+
+  def due_date_remaining_days(issuable)
+    remaining_days_in_words = remaining_days_in_words(issuable)
+
+    "#{issuable.due_date.to_s(:medium)} (#{remaining_days_in_words})"
+  end
+
   def multi_label_name(current_labels, default_label)
     if current_labels && current_labels.any?
       title = current_labels.first.try(:title)
@@ -131,15 +157,15 @@ module IssuablesHelper
     output = ""
     output << "Opened #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe
     output << content_tag(:strong) do
-      author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "hidden-xs", tooltip: true)
-      author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "hidden-sm hidden-md hidden-lg")
+      author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "d-none d-sm-inline", tooltip: true)
+      author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "d-block d-sm-none")
     end
 
     output << "&ensp;".html_safe
     output << content_tag(:span, (issuable_first_contribution_icon if issuable.first_contribution?), class: 'has-tooltip', title: _('1st contribution!'))
 
-    output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "hidden-xs hidden-sm")
-    output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "hidden-md hidden-lg")
+    output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "d-none d-sm-none d-md-inline-block")
+    output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "d-md-none")
 
     output.html_safe
   end
@@ -153,22 +179,28 @@ module IssuablesHelper
   def issuable_labels_tooltip(labels, limit: 5)
     first, last = labels.partition.with_index { |_, i| i < limit  }
 
-    label_names = first.collect(&:name)
-    label_names << "and #{last.size} more" unless last.empty?
+    if labels && labels.any?
+      label_names = first.collect(&:name)
+      label_names << "and #{last.size} more" unless last.empty?
 
-    label_names.join(', ')
+      label_names.join(', ')
+    else
+      _("Labels")
+    end
   end
 
-  def issuables_state_counter_text(issuable_type, state)
+  def issuables_state_counter_text(issuable_type, state, display_count)
     titles = {
       opened: "Open"
     }
 
     state_title = titles[state] || state.to_s.humanize
-    count = issuables_count_for_state(issuable_type, state)
-
     html = content_tag(:span, state_title)
-    html << " " << content_tag(:span, number_with_delimiter(count), class: 'badge')
+
+    if display_count
+      count = issuables_count_for_state(issuable_type, state)
+      html << " " << content_tag(:span, number_with_delimiter(count), class: 'badge badge-pill')
+    end
 
     html.html_safe
   end
@@ -191,24 +223,10 @@ module IssuablesHelper
     end
   end
 
-  def issuable_filter_params
-    [
-      :search,
-      :author_id,
-      :assignee_id,
-      :milestone_title,
-      :label_name
-    ]
-  end
-
   def issuable_reference(issuable)
     @show_full_reference ? issuable.to_reference(full: true) : issuable.to_reference(@group || @project)
   end
 
-  def issuable_filter_present?
-    issuable_filter_params.any? { |k| params.key?(k) }
-  end
-
   def issuable_initial_data(issuable)
     data = {
       endpoint: issuable_path(issuable),
@@ -333,7 +351,7 @@ module IssuablesHelper
   def issuable_todo_button_data(issuable, todo, is_collapsed)
     {
       todo_text: "Add todo",
-      mark_text: "Mark done",
+      mark_text: "Mark todo as done",
       todo_icon: (is_collapsed ? icon('plus-square') : nil),
       mark_icon: (is_collapsed ? icon('check-square', class: 'todo-undone') : nil),
       issuable_id: issuable.id,
@@ -341,7 +359,8 @@ module IssuablesHelper
       url: project_todos_path(@project),
       delete_path: (dashboard_todo_path(todo) if todo),
       placement: (is_collapsed ? 'left' : nil),
-      container: (is_collapsed ? 'body' : nil)
+      container: (is_collapsed ? 'body' : nil),
+      boundary: 'viewport'
     }
   end
 
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 0f25d401406..96dc7ae1185 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -82,8 +82,8 @@ module IssuesHelper
     names.to_sentence
   end
 
-  def award_state_class(awards, current_user)
-    if !current_user
+  def award_state_class(awardable, awards, current_user)
+    if !can?(current_user, :award_emoji, awardable)
       "disabled"
     elsif current_user && awards.find { |a| a.user_id == current_user.id }
       "active"
@@ -126,6 +126,17 @@ module IssuesHelper
     link_to link_text, path
   end
 
+  def show_new_issue_link?(project)
+    return false unless project
+    return false if project.archived?
+
+    # We want to show the link to users that are not signed in, that way they
+    # get directed to the sign-in/sign-up flow and afterwards to the new issue page.
+    return true unless current_user
+
+    can?(current_user, :create_issue, project)
+  end
+
   # Required for Banzai::Filter::IssueReferenceFilter
   module_function :url_for_issue
   module_function :url_for_internal_issue
diff --git a/app/helpers/labels_helper.rb b/app/helpers/labels_helper.rb
index 87ff607dc3f..c7df25cecef 100644
--- a/app/helpers/labels_helper.rb
+++ b/app/helpers/labels_helper.rb
@@ -81,7 +81,7 @@ module LabelsHelper
 
     # 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}" ) +
+    span = %(<span class="badge color-label #{"has-tooltip" if tooltip}" ) +
       %(style="background-color: #{label.color}; color: #{text_color}" ) +
       %(title="#{escape_once(label.description)}" data-container="body">) +
       %(#{escape_once(label.name)}#{label_suffix}</span>)
@@ -129,13 +129,17 @@ module LabelsHelper
     end
   end
 
-  def labels_filter_path(only_group_labels = false)
+  def labels_filter_path(only_group_labels = false, include_ancestor_groups: true, include_descendant_groups: false)
     project = @target_project || @project
 
+    options = {}
+    options[:include_ancestor_groups] = include_ancestor_groups if include_ancestor_groups
+    options[:include_descendant_groups] = include_descendant_groups if include_descendant_groups
+
     if project
-      project_labels_path(project, :json)
+      project_labels_path(project, :json, options)
     elsif @group
-      options = { only_group_labels: only_group_labels } if only_group_labels
+      options[:only_group_labels] = only_group_labels if only_group_labels
       group_labels_path(@group, :json, options)
     else
       dashboard_labels_path(:json)
@@ -207,6 +211,14 @@ module LabelsHelper
     end
   end
 
+  def label_status_tooltip(label, status)
+    type = label.is_a?(ProjectLabel) ? 'project' : 'group'
+    level = status.unsubscribed? ? type : status.sub('-level', '')
+    action = status.unsubscribed? ? 'Subscribe' : 'Unsubscribe'
+
+    "#{action} at #{level} level"
+  end
+
   # Required for Banzai::Filter::LabelReferenceFilter
   module_function :render_colored_label, :text_color_for_bg, :escape_once
 end
diff --git a/app/helpers/markup_helper.rb b/app/helpers/markup_helper.rb
index 2fe1927a189..39e7a7fd396 100644
--- a/app/helpers/markup_helper.rb
+++ b/app/helpers/markup_helper.rb
@@ -256,7 +256,7 @@ module MarkupHelper
     return '' unless html.present?
 
     context.merge!(
-      current_user:   (current_user if defined?(current_user)),
+      current_user: (current_user if defined?(current_user)),
 
       # RelativeLinkFilter
       commit:         @commit,
diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb
index fb4fe1c40b7..82a7931c557 100644
--- a/app/helpers/merge_requests_helper.rb
+++ b/app/helpers/merge_requests_helper.rb
@@ -86,6 +86,8 @@ module MergeRequestsHelper
   end
 
   def version_index(merge_request_diff)
+    return nil if @merge_request_diffs.empty?
+
     @merge_request_diffs.size - @merge_request_diffs.index(merge_request_diff)
   end
 
@@ -97,8 +99,9 @@ module MergeRequestsHelper
     {
       merge_when_pipeline_succeeds: true,
       should_remove_source_branch: true,
-      sha: merge_request.diff_head_sha
-    }.merge(merge_params_ee(merge_request))
+      sha: merge_request.diff_head_sha,
+      squash: merge_request.squash
+    }
   end
 
   def tab_link_for(merge_request, tab, options = {}, &block)
@@ -125,8 +128,8 @@ module MergeRequestsHelper
     link_to(url[merge_request.project, merge_request], data: data_attrs, &block)
   end
 
-  def allow_maintainer_push_unavailable_reason(merge_request)
-    return if merge_request.can_allow_maintainer_to_push?(current_user)
+  def allow_collaboration_unavailable_reason(merge_request)
+    return if merge_request.can_allow_collaboration?(current_user)
 
     minimum_visibility = [merge_request.target_project.visibility_level,
                           merge_request.source_project.visibility_level].min
@@ -138,7 +141,15 @@ module MergeRequestsHelper
     end
   end
 
-  def merge_params_ee(merge_request)
-    {}
+  def merge_request_source_project_for_project(project = @project)
+    unless can?(current_user, :create_merge_request_in, project)
+      return nil
+    end
+
+    if can?(current_user, :create_merge_request_from, project)
+      project
+    else
+      current_user.fork_of(project)
+    end
   end
 end
diff --git a/app/helpers/milestones_helper.rb b/app/helpers/milestones_helper.rb
index be8cb358de2..15a15405f1d 100644
--- a/app/helpers/milestones_helper.rb
+++ b/app/helpers/milestones_helper.rb
@@ -1,4 +1,6 @@
 module MilestonesHelper
+  include EntityDateHelper
+
   def milestones_filter_path(opts = {})
     if @project
       project_milestones_path(@project, opts)
@@ -72,9 +74,22 @@ module MilestonesHelper
     end
   end
 
+  def milestone_progress_tooltip_text(milestone)
+    has_issues = milestone.total_issues_count(current_user) > 0
+
+    if has_issues
+      [
+        _('Progress'),
+        _("%{percent}%% complete") % { percent: milestone.percent_complete(current_user) }
+      ].join('<br />')
+    else
+      _('Progress')
+    end
+  end
+
   def milestone_progress_bar(milestone)
     options = {
-      class: 'progress-bar progress-bar-success',
+      class: 'progress-bar bg-success',
       style: "width: #{milestone.percent_complete(current_user)}%;"
     }
 
@@ -95,27 +110,69 @@ module MilestonesHelper
   end
 
   def milestone_tooltip_title(milestone)
-    if milestone.due_date
-      [milestone.due_date.to_s(:medium), "(#{milestone_remaining_days(milestone)})"].join(' ')
+    if milestone
+      "#{milestone.title}<br />#{milestone_tooltip_due_date(milestone)}"
     end
   end
 
-  def milestone_remaining_days(milestone)
-    if milestone.expired?
-      content_tag(:strong, 'Past due')
-    elsif milestone.upcoming?
-      content_tag(:strong, 'Upcoming')
-    elsif milestone.due_date
-      time_ago = time_ago_in_words(milestone.due_date)
-      content = time_ago.gsub(/\d+/) { |match| "<strong>#{match}</strong>" }
-      content.slice!("about ")
-      content << " remaining"
-      content.html_safe
-    elsif milestone.start_date && milestone.start_date.past?
-      days    = milestone.elapsed_days
-      content = content_tag(:strong, days)
-      content << " #{'day'.pluralize(days)} elapsed"
+  def milestone_time_for(date, date_type)
+    title = date_type == :start ? "Start date" : "End date"
+
+    if date
+      time_ago = time_ago_in_words(date)
+      time_ago.slice!("about ")
+
+      time_ago << if date.past?
+                    " ago"
+                  else
+                    " remaining"
+                  end
+
+      content = [
+        title,
+        "<br />",
+        date.to_s(:medium),
+        "(#{time_ago})"
+      ].join(" ")
+
       content.html_safe
+    else
+      title
+    end
+  end
+
+  def milestone_issues_tooltip_text(milestone)
+    issues = milestone.count_issues_by_state(current_user)
+
+    return _("Issues") if issues.empty?
+
+    content = []
+
+    content << n_("1 open issue", "%d open issues", issues["opened"]) % issues["opened"] if issues["opened"]
+    content << n_("1 closed issue", "%d closed issues", issues["closed"]) % issues["closed"] if issues["closed"]
+
+    content.join('<br />').html_safe
+  end
+
+  def milestone_merge_requests_tooltip_text(milestone)
+    merge_requests = milestone.merge_requests
+
+    return _("Merge requests") if merge_requests.empty?
+
+    content = []
+
+    content << n_("1 open merge request", "%d open merge requests", merge_requests.opened.count) % merge_requests.opened.count if merge_requests.opened.any?
+    content << n_("1 closed merge request", "%d closed merge requests", merge_requests.closed.count) % merge_requests.closed.count if merge_requests.closed.any?
+    content << n_("1 merged merge request", "%d merged merge requests", merge_requests.merged.count) % merge_requests.merged.count if merge_requests.merged.any?
+
+    content.join('<br />').html_safe
+  end
+
+  def milestone_tooltip_due_date(milestone)
+    if milestone.due_date
+      "#{milestone.due_date.to_s(:medium)} (#{remaining_days_in_words(milestone)})"
+    else
+      _('Milestone')
     end
   end
 
diff --git a/app/helpers/namespaces_helper.rb b/app/helpers/namespaces_helper.rb
index 40ca666f1bf..9be93fa69ae 100644
--- a/app/helpers/namespaces_helper.rb
+++ b/app/helpers/namespaces_helper.rb
@@ -31,7 +31,7 @@ module NamespacesHelper
 
   def namespace_icon(namespace, size = 40)
     if namespace.is_a?(Group)
-      group_icon(namespace)
+      group_icon_url(namespace)
     else
       avatar_icon_for_user(namespace.owner, size)
     end
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index 56c88e6eab0..a84a39235d8 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -11,6 +11,7 @@ module NavHelper
     class_name = page_gutter_class
     class_name << 'page-with-contextual-sidebar' if defined?(@left_sidebar) && @left_sidebar
     class_name << 'page-with-icon-sidebar' if collapsed_sidebar? && @left_sidebar
+    class_name -= ['right-sidebar-expanded'] if defined?(@right_sidebar) && !@right_sidebar
 
     class_name
   end
@@ -28,7 +29,7 @@ module NavHelper
       end
     elsif current_path?('jobs#show')
       %w[page-gutter build-sidebar right-sidebar-expanded]
-    elsif current_controller?('wikis') && current_action?('show', 'create', 'edit', 'update', 'history', 'git_access')
+    elsif current_controller?('wikis') && current_action?('show', 'create', 'edit', 'update', 'history', 'git_access', 'destroy')
       %w[page-gutter wiki-sidebar right-sidebar-expanded]
     else
       []
diff --git a/app/helpers/notes_helper.rb b/app/helpers/notes_helper.rb
index 20aed60cb7a..e1a0cf1604c 100644
--- a/app/helpers/notes_helper.rb
+++ b/app/helpers/notes_helper.rb
@@ -6,10 +6,6 @@ module NotesHelper
     end
   end
 
-  def note_editable?(note)
-    Ability.can_edit_note?(current_user, note)
-  end
-
   def note_supports_quick_actions?(note)
     Notes::QuickActionsService.supported?(note)
   end
@@ -147,20 +143,28 @@ module NotesHelper
       notesIds: @notes.map(&:id),
       now: Time.now.to_i,
       diffView: diff_view,
-      autocomplete: autocomplete
+      enableGFM: {
+        emojis: true,
+        members: autocomplete,
+        issues: autocomplete,
+        mergeRequests: autocomplete,
+        milestones: autocomplete,
+        labels: autocomplete
+      }
     }
   end
 
-  def notes_data(issuable)
-    discussions_path =
-      if issuable.is_a?(Issue)
-        discussions_project_issue_path(@project, issuable, format: :json)
-      else
-        discussions_project_merge_request_path(@project, issuable, format: :json)
-      end
+  def discussions_path(issuable)
+    if issuable.is_a?(Issue)
+      discussions_project_issue_path(@project, issuable, format: :json)
+    else
+      discussions_project_merge_request_path(@project, issuable, format: :json)
+    end
+  end
 
+  def notes_data(issuable)
     {
-      discussionsPath: discussions_path,
+      discussionsPath: discussions_path(issuable),
       registerPath: new_session_path(:user, redirect_to_referer: 'yes', anchor: 'register-pane'),
       newSessionPath: new_session_path(:user, redirect_to_referer: 'yes'),
       markdownDocsPath: help_page_path('user/markdown'),
@@ -170,7 +174,6 @@ module NotesHelper
       notesPath: notes_url,
       totalNotes: issuable.discussions.length,
       lastFetchedAt: Time.now.to_i
-
     }.to_json
   end
 
@@ -178,11 +181,11 @@ module NotesHelper
     discussion.resolved_by_push? ? 'Automatically resolved' : 'Resolved'
   end
 
-  def has_vue_discussions_cookie?
-    cookies[:vue_mr_discussions] == 'true'
+  def rendered_for_merge_request?
+    params[:from_merge_request].present?
   end
 
   def serialize_notes?
-    has_vue_discussions_cookie? && !params['html']
+    rendered_for_merge_request? || params['html'].nil?
   end
 end
diff --git a/app/helpers/page_layout_helper.rb b/app/helpers/page_layout_helper.rb
index 18b9bf214a3..68d892393ef 100644
--- a/app/helpers/page_layout_helper.rb
+++ b/app/helpers/page_layout_helper.rb
@@ -39,7 +39,7 @@ module PageLayoutHelper
   end
 
   def favicon
-    Rails.env.development? ? 'favicon-blue.ico' : 'favicon.ico'
+    Gitlab::Favicon.main
   end
 
   def page_image
diff --git a/app/helpers/preferences_helper.rb b/app/helpers/preferences_helper.rb
index 373dfd457f7..fb523cb865b 100644
--- a/app/helpers/preferences_helper.rb
+++ b/app/helpers/preferences_helper.rb
@@ -9,12 +9,14 @@ module PreferencesHelper
 
   # Maps `dashboard` values to more user-friendly option text
   DASHBOARD_CHOICES = {
-    projects: 'Your Projects (default)',
-    stars:    'Starred Projects',
-    project_activity: "Your Projects' Activity",
-    starred_project_activity: "Starred Projects' Activity",
-    groups: "Your Groups",
-    todos: "Your Todos"
+    projects: _("Your Projects (default)"),
+    stars:    _("Starred Projects"),
+    project_activity: _("Your Projects' Activity"),
+    starred_project_activity: _("Starred Projects' Activity"),
+    groups: _("Your Groups"),
+    todos: _("Your Todos"),
+    issues: _("Assigned Issues"),
+    merge_requests: _("Assigned Merge Requests")
   }.with_indifferent_access.freeze
 
   # Returns an Array usable by a select field for more user-friendly option text
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index da9fe734f1c..c7a434ea092 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -40,7 +40,8 @@ module ProjectsHelper
       name_tag_options[:class] << 'has-tooltip'
     end
 
-    content_tag(:span, sanitize(username), name_tag_options)
+    # NOTE: ActionView::Helpers::TagHelper#content_tag HTML escapes username
+    content_tag(:span, username, name_tag_options)
   end
 
   def link_to_member(project, author, opts = {}, &block)
@@ -157,40 +158,6 @@ module ProjectsHelper
     current_user&.recent_push(@project)
   end
 
-  def project_feature_access_select(field)
-    # Don't show option "everyone with access" if project is private
-    options = project_feature_options
-
-    level = @project.project_feature.public_send(field) # rubocop:disable GitlabSecurity/PublicSend
-
-    if @project.private?
-      disabled_option = ProjectFeature::ENABLED
-      highest_available_option = ProjectFeature::PRIVATE if level == disabled_option
-    end
-
-    options = options_for_select(
-      options.invert,
-      selected: highest_available_option || level,
-      disabled: disabled_option
-    )
-
-    content_tag :div, class: "select-wrapper" do
-      concat(
-        content_tag(
-          :select,
-          options,
-          name: "project[project_feature_attributes][#{field}]",
-          id: "project_project_feature_attributes_#{field}",
-          class: "pull-right form-control select-control #{repo_children_classes(field)} ",
-          data: { field: field }
-        )
-      )
-      concat(
-        icon('chevron-down')
-      )
-    end.html_safe
-  end
-
   def link_to_autodeploy_doc
     link_to _('About auto deploy'), help_page_path('ci/autodeploy/index'), target: '_blank'
   end
@@ -205,11 +172,12 @@ module ProjectsHelper
     key = [
       project.route.cache_key,
       project.cache_key,
+      project.last_activity_date,
       controller.controller_name,
       controller.action_name,
       Gitlab::CurrentSettings.cache_key,
       "cross-project:#{can?(current_user, :read_cross_project)}",
-      'v2.5'
+      'v2.6'
     ]
 
     key << pipeline_status_cache_key(project.pipeline_status) if project.pipeline_status.has_status?
@@ -272,18 +240,16 @@ module ProjectsHelper
     "git push --set-upstream #{repository_url}/$(git rev-parse --show-toplevel | xargs basename).git $(git rev-parse --abbrev-ref HEAD)"
   end
 
-  private
-
-  def repo_children_classes(field)
-    needs_repo_check = [:merge_requests_access_level, :builds_access_level]
-    return unless needs_repo_check.include?(field)
-
-    classes = "project-repo-select js-repo-select"
-    classes << " disabled" unless @project.feature_available?(:repository, current_user)
+  def show_xcode_link?(project = @project)
+    browser.platform.mac? && project.repository.xcode_project?
+  end
 
-    classes
+  def xcode_uri_to_repo(project = @project)
+    "xcode://clone?repo=#{CGI.escape(default_url_to_repo(project))}"
   end
 
+  private
+
   def get_project_nav_tabs(project, current_user)
     nav_tabs = [:home]
 
@@ -303,6 +269,10 @@ module ProjectsHelper
       nav_tabs << :pipelines
     end
 
+    if can?(current_user, :read_environment, project) || can?(current_user, :read_cluster, project)
+      nav_tabs << :operations
+    end
+
     if project.external_issue_tracker
       nav_tabs << :external_issue_tracker
     end
@@ -381,11 +351,15 @@ module ProjectsHelper
     if allowed_protocols_present?
       enabled_protocol
     else
-      if !current_user || current_user.require_ssh_key?
-        gitlab_config.protocol
-      else
-        'ssh'
-      end
+      extra_default_clone_protocol
+    end
+  end
+
+  def extra_default_clone_protocol
+    if !current_user || current_user.require_ssh_key?
+      gitlab_config.protocol
+    else
+      'ssh'
     end
   end
 
@@ -421,11 +395,11 @@ module ProjectsHelper
   def project_status_css_class(status)
     case status
     when "started"
-      "active"
+      "table-active"
     when "failed"
-      "danger"
+      "table-danger"
     when "finished"
-      "success"
+      "table-success"
     end
   end
 
@@ -438,21 +412,18 @@ module ProjectsHelper
     @ref || @repository.try(:root_ref)
   end
 
+  # Gitaly migration: https://gitlab.com/gitlab-org/gitaly/issues/1235
   def sanitize_repo_path(project, message)
     return '' unless message.present?
 
     exports_path = File.join(Settings.shared['path'], 'tmp/project_exports')
     filtered_message = message.strip.gsub(exports_path, "[REPO EXPORT PATH]")
 
-    filtered_message.gsub(project.repository_storage_path.chomp('/'), "[REPOS PATH]")
-  end
+    disk_path = Gitlab::GitalyClient::StorageSettings.allow_disk_access do
+      Gitlab.config.repositories.storages[project.repository_storage].legacy_disk_path
+    end
 
-  def project_feature_options
-    {
-      ProjectFeature::DISABLED => s_('ProjectFeature|Disabled'),
-      ProjectFeature::PRIVATE => s_('ProjectFeature|Only team members'),
-      ProjectFeature::ENABLED => s_('ProjectFeature|Everyone with access')
-    }
+    filtered_message.gsub(disk_path.chomp('/'), "[REPOS PATH]")
   end
 
   def project_child_container_class(view_path)
@@ -463,20 +434,6 @@ module ProjectsHelper
     IssuesFinder.new(current_user, project_id: project.id).execute
   end
 
-  def visibility_select_options(project, selected_level)
-    level_options = Gitlab::VisibilityLevel.values.each_with_object([]) do |level, level_options|
-      next if restricted_levels.include?(level)
-
-      level_options << [
-        visibility_level_label(level),
-        { data: { description: visibility_level_description(level, project) } },
-        level
-      ]
-    end
-
-    options_for_select(level_options, selected_level)
-  end
-
   def restricted_levels
     return [] if current_user.admin?
 
@@ -507,7 +464,7 @@ module ProjectsHelper
       visibilityHelpPath: help_page_path('public_access/public_access'),
       registryAvailable: Gitlab.config.registry.enabled,
       registryHelpPath: help_page_path('user/project/container_registry'),
-      lfsAvailable: Gitlab.config.lfs.enabled && current_user.admin?,
+      lfsAvailable: Gitlab.config.lfs.enabled,
       lfsHelpPath: help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
     }
 
@@ -531,4 +488,63 @@ module ProjectsHelper
   def can_show_last_commit_in_list?(project)
     can?(current_user, :read_cross_project) && project.commit
   end
+
+  def pages_https_only_disabled?
+    !@project.pages_domains.all?(&:https?)
+  end
+
+  def pages_https_only_title
+    return unless pages_https_only_disabled?
+
+    "You must enable HTTPS for all your domains first"
+  end
+
+  def pages_https_only_label_class
+    if pages_https_only_disabled?
+      "list-label disabled"
+    else
+      "list-label"
+    end
+  end
+
+  def sidebar_projects_paths
+    %w[
+      projects#show
+      projects#activity
+      cycle_analytics#show
+    ]
+  end
+
+  def sidebar_settings_paths
+    %w[
+      projects#edit
+      project_members#index
+      integrations#show
+      services#edit
+      repository#show
+      ci_cd#show
+      badges#index
+      pages#show
+    ]
+  end
+
+  def sidebar_repository_paths
+    %w[
+      tree
+      blob
+      blame
+      edit_tree
+      new_tree
+      find_file
+      commit
+      commits
+      compare
+      projects/repositories
+      tags
+      branches
+      releases
+      graphs
+      network
+    ]
+  end
 end
diff --git a/app/helpers/rss_helper.rb b/app/helpers/rss_helper.rb
index 9ac4df88dc3..7d4fa83a67a 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, rss_token: current_user.try(:rss_token) }
+    { format: :atom, feed_token: current_user.try(:feed_token) }
   end
 end
diff --git a/app/helpers/safe_params_helper.rb b/app/helpers/safe_params_helper.rb
new file mode 100644
index 00000000000..b568e8810cc
--- /dev/null
+++ b/app/helpers/safe_params_helper.rb
@@ -0,0 +1,11 @@
+module SafeParamsHelper
+  # Rails 5.0 requires to permit `params` if they're used in url helpers.
+  # Use this helper when generating links with `params.merge(...)`
+  def safe_params
+    if params.respond_to?(:permit!)
+      params.except(:host, :port, :protocol).permit!
+    else
+      params
+    end
+  end
+end
diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb
index 761c1252fc8..f7dafca7834 100644
--- a/app/helpers/search_helper.rb
+++ b/app/helpers/search_helper.rb
@@ -25,14 +25,22 @@ module SearchHelper
     return unless collection.count > 0
 
     from = collection.offset_value + 1
-    to = collection.offset_value + collection.length
+    to = collection.offset_value + collection.count
     count = collection.total_count
 
     "Showing #{from} - #{to} of #{count} #{scope.humanize(capitalize: false)} for \"#{term}\""
   end
 
+  def find_project_for_result_blob(result)
+    @project
+  end
+
   def parse_search_result(result)
-    Gitlab::ProjectSearchResults.parse_search_result(result)
+    result
+  end
+
+  def search_blob_title(project, filename)
+    filename
   end
 
   private
diff --git a/app/helpers/services_helper.rb b/app/helpers/services_helper.rb
index f435c80c656..f872990122e 100644
--- a/app/helpers/services_helper.rb
+++ b/app/helpers/services_helper.rb
@@ -1,4 +1,29 @@
 module ServicesHelper
+  def service_event_description(event)
+    case event
+    when "push", "push_events"
+      "Event will be triggered by a push to the repository"
+    when "tag_push", "tag_push_events"
+      "Event will be triggered when a new tag is pushed to the repository"
+    when "note", "note_events"
+      "Event will be triggered when someone adds a comment"
+    when "confidential_note", "confidential_note_events"
+      "Event will be triggered when someone adds a comment on a confidential issue"
+    when "issue", "issue_events"
+      "Event will be triggered when an issue is created/updated/closed"
+    when "confidential_issue", "confidential_issues_events"
+      "Event will be triggered when a confidential issue is created/updated/closed"
+    when "merge_request", "merge_request_events"
+      "Event will be triggered when a merge request is created/updated/merged"
+    when "pipeline", "pipeline_events"
+      "Event will be triggered when a pipeline status changes"
+    when "wiki_page", "wiki_page_events"
+      "Event will be triggered when a wiki page is created/updated"
+    when "commit", "commit_events"
+      "Event will be triggered when a commit is created/updated"
+    end
+  end
+
   def service_event_field_name(event)
     event = event.pluralize if %w[merge_request issue confidential_issue].include?(event)
     "#{event}_events"
diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb
index 00e7e4230b9..733832c1bbb 100644
--- a/app/helpers/snippets_helper.rb
+++ b/app/helpers/snippets_helper.rb
@@ -101,4 +101,39 @@ module SnippetsHelper
     # Return snippet with chunk array
     { snippet_object: snippet, snippet_chunks: snippet_chunks }
   end
+
+  def snippet_embed
+    "<script src=\"#{url_for(only_path: false, overwrite_params: nil)}.js\"></script>"
+  end
+
+  def embedded_snippet_raw_button
+    blob = @snippet.blob
+    return if blob.empty? || blob.raw_binary? || blob.stored_externally?
+
+    snippet_raw_url = if @snippet.is_a?(PersonalSnippet)
+                        raw_snippet_url(@snippet)
+                      else
+                        raw_project_snippet_url(@snippet.project, @snippet)
+                      end
+
+    link_to external_snippet_icon('doc_code'), snippet_raw_url, class: 'btn', target: '_blank', rel: 'noopener noreferrer', title: 'Open raw'
+  end
+
+  def embedded_snippet_download_button
+    download_url = if @snippet.is_a?(PersonalSnippet)
+                     raw_snippet_url(@snippet, inline: false)
+                   else
+                     raw_project_snippet_url(@snippet.project, @snippet, inline: false)
+                   end
+
+    link_to external_snippet_icon('download'), download_url, class: 'btn', target: '_blank', title: 'Download', rel: 'noopener noreferrer'
+  end
+
+  def public_snippet?
+    if @snippet.project_id?
+      can?(nil, :read_project_snippet, @snippet)
+    else
+      can?(nil, :read_personal_snippet, @snippet)
+    end
+  end
 end
diff --git a/app/helpers/system_note_helper.rb b/app/helpers/system_note_helper.rb
index 00fe67d6ffb..5b4a141dbcf 100644
--- a/app/helpers/system_note_helper.rb
+++ b/app/helpers/system_note_helper.rb
@@ -1,14 +1,14 @@
 module SystemNoteHelper
   ICON_NAMES_BY_ACTION = {
     'commit' => 'commit',
-    'description' => 'pencil',
+    'description' => 'pencil-square',
     'merge' => 'git-merge',
     'merged' => 'git-merge',
     'opened' => 'issue-open',
     'closed' => 'issue-close',
     'time_tracking' => 'timer',
     'assignee' => 'user',
-    'title' => 'pencil',
+    'title' => 'pencil-square',
     'task' => 'task-done',
     'label' => 'label',
     'cross_reference' => 'comment-dots',
@@ -18,7 +18,7 @@ module SystemNoteHelper
     'milestone' => 'clock',
     'discussion' => 'comment',
     'moved' => 'arrow-right',
-    'outdated' => 'pencil',
+    'outdated' => 'pencil-square',
     'duplicate' => 'issue-duplicate',
     'locked' => 'lock',
     'unlocked' => 'lock-open'
diff --git a/app/helpers/tree_helper.rb b/app/helpers/tree_helper.rb
index b64be89c181..dc42caa70e5 100644
--- a/app/helpers/tree_helper.rb
+++ b/app/helpers/tree_helper.rb
@@ -90,7 +90,7 @@ module TreeHelper
   end
 
   def commit_in_single_accessible_branch
-    branch_name = html_escape(selected_branch)
+    branch_name = ERB::Util.html_escape(selected_branch)
 
     message = _("Your changes can be committed to %{branch_name} because a merge "\
                 "request is open.") % { branch_name: "<strong>#{branch_name}</strong>" }
@@ -123,7 +123,7 @@ module TreeHelper
 
   # returns the relative path of the first subdir that doesn't have only one directory descendant
   def flatten_tree(root_path, tree)
-    return tree.flat_path.sub(%r{\A#{root_path}/}, '') if tree.flat_path.present?
+    return tree.flat_path.sub(%r{\A#{Regexp.escape(root_path)}/}, '') if tree.flat_path.present?
 
     subtree = Gitlab::Git::Tree.where(@repository, @commit.id, tree.path)
     if subtree.count == 1 && subtree.first.dir?
diff --git a/app/helpers/user_callouts_helper.rb b/app/helpers/user_callouts_helper.rb
index 36abfaf19a5..da5fe25c07d 100644
--- a/app/helpers/user_callouts_helper.rb
+++ b/app/helpers/user_callouts_helper.rb
@@ -1,11 +1,16 @@
 module UserCalloutsHelper
   GKE_CLUSTER_INTEGRATION = 'gke_cluster_integration'.freeze
+  GCP_SIGNUP_OFFER = 'gcp_signup_offer'.freeze
 
   def show_gke_cluster_integration_callout?(project)
     can?(current_user, :create_cluster, project) &&
       !user_dismissed?(GKE_CLUSTER_INTEGRATION)
   end
 
+  def show_gcp_signup_offer?
+    !user_dismissed?(GCP_SIGNUP_OFFER)
+  end
+
   private
 
   def user_dismissed?(feature_name)
diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb
index 01af68088df..ce9373f5883 100644
--- a/app/helpers/users_helper.rb
+++ b/app/helpers/users_helper.rb
@@ -23,9 +23,31 @@ module UsersHelper
     profile_tabs.include?(tab)
   end
 
+  def current_user_menu_items
+    @current_user_menu_items ||= get_current_user_menu_items
+  end
+
+  def current_user_menu?(item)
+    current_user_menu_items.include?(item)
+  end
+
   private
 
   def get_profile_tabs
     [:activity, :groups, :contributed, :projects, :snippets]
   end
+
+  def get_current_user_menu_items
+    items = []
+
+    items << :sign_out if current_user
+
+    return items if current_user&.required_terms_not_accepted?
+
+    items << :help
+    items << :profile if can?(current_user, :read_user, current_user)
+    items << :settings if can?(current_user, :update_user, current_user)
+
+    items
+  end
 end
diff --git a/app/helpers/webpack_helper.rb b/app/helpers/webpack_helper.rb
index 8bcced70d63..72f6b397046 100644
--- a/app/helpers/webpack_helper.rb
+++ b/app/helpers/webpack_helper.rb
@@ -1,12 +1,10 @@
-require 'webpack/rails/manifest'
-
 module WebpackHelper
-  def webpack_bundle_tag(bundle, force_same_domain: false)
-    javascript_include_tag(*gitlab_webpack_asset_paths(bundle, force_same_domain: force_same_domain))
+  def webpack_bundle_tag(bundle)
+    javascript_include_tag(*webpack_entrypoint_paths(bundle))
   end
 
   def webpack_controller_bundle_tags
-    bundles = []
+    chunks = []
 
     action = case controller.action_name
              when 'create' then 'new'
@@ -16,37 +14,44 @@ module WebpackHelper
 
     route = [*controller.controller_path.split('/'), action].compact
 
-    until route.empty?
+    until chunks.any? || route.empty?
+      entrypoint = "pages.#{route.join('.')}"
       begin
-        asset_paths = gitlab_webpack_asset_paths("pages.#{route.join('.')}", extension: 'js')
-        bundles.unshift(*asset_paths)
-      rescue Webpack::Rails::Manifest::EntryPointMissingError
+        chunks = webpack_entrypoint_paths(entrypoint, extension: 'js')
+      rescue Gitlab::Webpack::Manifest::AssetMissingError
         # no bundle exists for this path
       end
-
       route.pop
     end
 
-    javascript_include_tag(*bundles)
+    if chunks.empty?
+      chunks = webpack_entrypoint_paths("default", extension: 'js')
+    end
+
+    javascript_include_tag(*chunks)
   end
 
-  # override webpack-rails gem helper until changes can make it upstream
-  def gitlab_webpack_asset_paths(source, extension: nil, force_same_domain: false)
+  def webpack_entrypoint_paths(source, extension: nil, exclude_duplicates: true)
     return "" unless source.present?
 
-    paths = Webpack::Rails::Manifest.asset_paths(source)
+    paths = Gitlab::Webpack::Manifest.entrypoint_paths(source)
     if extension
       paths.select! { |p| p.ends_with? ".#{extension}" }
     end
 
-    unless force_same_domain
-      force_host = webpack_public_host
-      if force_host
-        paths.map! { |p| "#{force_host}#{p}" }
-      end
+    force_host = webpack_public_host
+    if force_host
+      paths.map! { |p| "#{force_host}#{p}" }
     end
 
-    paths
+    if exclude_duplicates
+      @used_paths ||= []
+      new_paths = paths - @used_paths
+      @used_paths += new_paths
+      new_paths
+    else
+      paths
+    end
   end
 
   def webpack_public_host
diff --git a/app/helpers/workhorse_helper.rb b/app/helpers/workhorse_helper.rb
index 88f374be1e5..a82271ce0ee 100644
--- a/app/helpers/workhorse_helper.rb
+++ b/app/helpers/workhorse_helper.rb
@@ -6,7 +6,7 @@ module WorkhorseHelper
     headers.store(*Gitlab::Workhorse.send_git_blob(repository, blob))
     headers['Content-Disposition'] = 'inline'
     headers['Content-Type'] = safe_content_type(blob)
-    head :ok # 'render nothing: true' messes up the Content-Type
+    render plain: ""
   end
 
   # Send a Git diff through Workhorse
@@ -24,8 +24,8 @@ module WorkhorseHelper
   end
 
   # Archive a Git repository and send it through Workhorse
-  def send_git_archive(repository, ref:, format:)
-    headers.store(*Gitlab::Workhorse.send_git_archive(repository, ref: ref, format: format))
+  def send_git_archive(repository, **kwargs)
+    headers.store(*Gitlab::Workhorse.send_git_archive(repository, **kwargs))
     head :ok
   end
 
diff --git a/app/mailers/emails/issues.rb b/app/mailers/emails/issues.rb
index b33131becd3..392cc0bee03 100644
--- a/app/mailers/emails/issues.rb
+++ b/app/mailers/emails/issues.rb
@@ -6,6 +6,12 @@ module Emails
       mail_new_thread(@issue, issue_thread_options(@issue.author_id, recipient_id, reason))
     end
 
+    def issue_due_email(recipient_id, issue_id, reason = nil)
+      setup_issue_mail(issue_id, recipient_id)
+
+      mail_new_thread(@issue, issue_thread_options(@issue.author_id, recipient_id, reason))
+    end
+
     def new_mention_in_issue_email(recipient_id, issue_id, updated_by_user_id, reason = nil)
       setup_issue_mail(issue_id, recipient_id)
       mail_answer_thread(@issue, issue_thread_options(updated_by_user_id, recipient_id, reason))
diff --git a/app/mailers/emails/merge_requests.rb b/app/mailers/emails/merge_requests.rb
index 5fe09cea83f..70509e9066d 100644
--- a/app/mailers/emails/merge_requests.rb
+++ b/app/mailers/emails/merge_requests.rb
@@ -11,6 +11,15 @@ module Emails
       mail_answer_thread(@merge_request, merge_request_thread_options(updated_by_user_id, recipient_id, reason))
     end
 
+    def push_to_merge_request_email(recipient_id, merge_request_id, updated_by_user_id, reason = nil, new_commits: [], existing_commits: [])
+      setup_merge_request_mail(merge_request_id, recipient_id)
+      @new_commits = new_commits
+      @existing_commits = existing_commits
+      @updated_by_user = User.find(updated_by_user_id)
+
+      mail_answer_thread(@merge_request, merge_request_thread_options(updated_by_user_id, recipient_id, reason))
+    end
+
     def reassigned_merge_request_email(recipient_id, merge_request_id, previous_assignee_id, updated_by_user_id, reason = nil)
       setup_merge_request_mail(merge_request_id, recipient_id)
 
@@ -47,6 +56,12 @@ module Emails
       mail_answer_thread(@merge_request, merge_request_thread_options(updated_by_user_id, recipient_id, reason))
     end
 
+    def merge_request_unmergeable_email(recipient_id, merge_request_id, reason = nil)
+      setup_merge_request_mail(merge_request_id, recipient_id)
+
+      mail_answer_thread(@merge_request, merge_request_thread_options(@merge_request.author_id, recipient_id, reason))
+    end
+
     def resolved_all_discussions_email(recipient_id, merge_request_id, resolved_by_user_id, reason = nil)
       setup_merge_request_mail(merge_request_id, recipient_id)
 
diff --git a/app/mailers/emails/notes.rb b/app/mailers/emails/notes.rb
index 50e17fe7717..d9a6fe2a41e 100644
--- a/app/mailers/emails/notes.rb
+++ b/app/mailers/emails/notes.rb
@@ -43,7 +43,7 @@ module Emails
     private
 
     def note_target_url_options
-      [@project, @note.noteable, anchor: "note_#{@note.id}"]
+      [@project || @group, @note.noteable, anchor: "note_#{@note.id}"]
     end
 
     def note_thread_options(recipient_id)
@@ -58,8 +58,9 @@ module Emails
       # `note_id` is a `Note` when originating in `NotifyPreview`
       @note = note_id.is_a?(Note) ? note_id : Note.find(note_id)
       @project = @note.project
+      @group = @note.noteable.try(:group)
 
-      if @project && @note.persisted?
+      if (@project || @group) && @note.persisted?
         @sent_notification = SentNotification.record_note(@note, recipient_id, reply_key)
       end
     end
diff --git a/app/mailers/notify.rb b/app/mailers/notify.rb
index e4212775956..1db1482d6b7 100644
--- a/app/mailers/notify.rb
+++ b/app/mailers/notify.rb
@@ -16,6 +16,7 @@ class Notify < BaseMailer
   helper BlobHelper
   helper EmailsHelper
   helper MembersHelper
+  helper AvatarsHelper
   helper GitlabRoutingHelper
 
   def test_email(recipient_email, subject, body)
@@ -93,6 +94,7 @@ class Notify < BaseMailer
   def subject(*extra)
     subject = ""
     subject << "#{@project.name} | " if @project
+    subject << "#{@group.name} | " if @group
     subject << extra.join(' | ') if extra.present?
     subject << " | #{Gitlab.config.gitlab.email_subject_suffix}" if Gitlab.config.gitlab.email_subject_suffix.present?
     subject
@@ -116,10 +118,9 @@ class Notify < BaseMailer
     @reason = headers['X-GitLab-NotificationReason']
 
     if Gitlab::IncomingEmail.enabled? && @sent_notification
-      address = Mail::Address.new(Gitlab::IncomingEmail.reply_address(reply_key))
-      address.display_name = @project.full_name
-
-      headers['Reply-To'] = address
+      headers['Reply-To'] = Mail::Address.new(Gitlab::IncomingEmail.reply_address(reply_key)).tap do |address|
+        address.display_name = reply_display_name(model)
+      end
 
       fallback_reply_message_id = "<reply-#{reply_key}@#{Gitlab.config.gitlab.host}>".freeze
       headers['References'] ||= []
@@ -131,6 +132,11 @@ class Notify < BaseMailer
     mail(headers)
   end
 
+  # `model` is used on EE code
+  def reply_display_name(_model)
+    @project.full_name
+  end
+
   # Send an email that starts a new conversation thread,
   # with headers suitable for grouping by thread in email clients.
   #
diff --git a/app/models/ability.rb b/app/models/ability.rb
index 6dae49f38dc..bb600eaccba 100644
--- a/app/models/ability.rb
+++ b/app/models/ability.rb
@@ -10,6 +10,14 @@ class Ability
       end
     end
 
+    # Given a list of users and a group this method returns the users that can
+    # read the given group.
+    def users_that_can_read_group(users, group)
+      DeclarativePolicy.subject_scope do
+        users.select { |u| allowed?(u, :read_group, group) }
+      end
+    end
+
     # Given a list of users and a snippet this method returns the users that can
     # read the given snippet.
     def users_that_can_read_personal_snippet(users, snippet)
@@ -46,10 +54,6 @@ class Ability
       end
     end
 
-    def can_edit_note?(user, note)
-      allowed?(user, :edit_note, note)
-    end
-
     def allowed?(user, action, subject = :global, opts = {})
       if subject.is_a?(Hash)
         opts, subject = subject, :global
diff --git a/app/models/active_session.rb b/app/models/active_session.rb
new file mode 100644
index 00000000000..b4a86dbb331
--- /dev/null
+++ b/app/models/active_session.rb
@@ -0,0 +1,110 @@
+class ActiveSession
+  include ActiveModel::Model
+
+  attr_accessor :created_at, :updated_at,
+    :session_id, :ip_address,
+    :browser, :os, :device_name, :device_type
+
+  def current?(session)
+    return false if session_id.nil? || session.id.nil?
+
+    session_id == session.id
+  end
+
+  def human_device_type
+    device_type&.titleize
+  end
+
+  def self.set(user, request)
+    Gitlab::Redis::SharedState.with do |redis|
+      session_id = request.session.id
+      client = DeviceDetector.new(request.user_agent)
+      timestamp = Time.current
+
+      active_user_session = new(
+        ip_address: request.ip,
+        browser: client.name,
+        os: client.os_name,
+        device_name: client.device_name,
+        device_type: client.device_type,
+        created_at: user.current_sign_in_at || timestamp,
+        updated_at: timestamp,
+        session_id: session_id
+      )
+
+      redis.pipelined do
+        redis.setex(
+          key_name(user.id, session_id),
+          Settings.gitlab['session_expire_delay'] * 60,
+          Marshal.dump(active_user_session)
+        )
+
+        redis.sadd(
+          lookup_key_name(user.id),
+          session_id
+        )
+      end
+    end
+  end
+
+  def self.list(user)
+    Gitlab::Redis::SharedState.with do |redis|
+      cleaned_up_lookup_entries(redis, user.id).map do |entry|
+        # rubocop:disable Security/MarshalLoad
+        Marshal.load(entry)
+        # rubocop:enable Security/MarshalLoad
+      end
+    end
+  end
+
+  def self.destroy(user, session_id)
+    Gitlab::Redis::SharedState.with do |redis|
+      redis.srem(lookup_key_name(user.id), session_id)
+
+      deleted_keys = redis.del(key_name(user.id, session_id))
+
+      # only allow deleting the devise session if we could actually find a
+      # related active session. this prevents another user from deleting
+      # someone else's session.
+      if deleted_keys > 0
+        redis.del("#{Gitlab::Redis::SharedState::SESSION_NAMESPACE}:#{session_id}")
+      end
+    end
+  end
+
+  def self.cleanup(user)
+    Gitlab::Redis::SharedState.with do |redis|
+      cleaned_up_lookup_entries(redis, user.id)
+    end
+  end
+
+  def self.key_name(user_id, session_id = '*')
+    "#{Gitlab::Redis::SharedState::USER_SESSIONS_NAMESPACE}:#{user_id}:#{session_id}"
+  end
+
+  def self.lookup_key_name(user_id)
+    "#{Gitlab::Redis::SharedState::USER_SESSIONS_LOOKUP_NAMESPACE}:#{user_id}"
+  end
+
+  def self.cleaned_up_lookup_entries(redis, user_id)
+    lookup_key = lookup_key_name(user_id)
+
+    session_ids = redis.smembers(lookup_key)
+
+    entry_keys = session_ids.map { |session_id| key_name(user_id, session_id) }
+    return [] if entry_keys.empty?
+
+    entries = redis.mget(entry_keys)
+
+    session_ids_and_entries = session_ids.zip(entries)
+
+    # remove expired keys.
+    # only the single key entries are automatically expired by redis, the
+    # lookup entries in the set need to be removed manually.
+    session_ids_and_entries.reject { |_session_id, entry| entry }.each do |session_id, _entry|
+      redis.srem(lookup_key, session_id)
+    end
+
+    session_ids_and_entries.select { |_session_id, entry| entry }.map { |_session_id, entry| entry }
+  end
+end
diff --git a/app/models/appearance.rb b/app/models/appearance.rb
index dcd14c08f3c..b770aadef0e 100644
--- a/app/models/appearance.rb
+++ b/app/models/appearance.rb
@@ -1,5 +1,8 @@
 class Appearance < ActiveRecord::Base
+  include CacheableAttributes
   include CacheMarkdownField
+  include ObjectStorage::BackgroundMove
+  include WithUploads
 
   cache_markdown_field :description
   cache_markdown_field :new_project_guidelines
@@ -11,19 +14,11 @@ class Appearance < ActiveRecord::Base
 
   mount_uploader :logo,         AttachmentUploader
   mount_uploader :header_logo,  AttachmentUploader
+  mount_uploader :favicon,      FaviconUploader
 
-  has_many :uploads, as: :model, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
-
-  CACHE_KEY = 'current_appearance'.freeze
-
-  after_commit :flush_redis_cache
-
-  def self.current
-    Rails.cache.fetch(CACHE_KEY) { first }
-  end
-
-  def flush_redis_cache
-    Rails.cache.delete(CACHE_KEY)
+  # Overrides CacheableAttributes.current_without_cache
+  def self.current_without_cache
+    first
   end
 
   def single_appearance_row
diff --git a/app/models/application_setting.rb b/app/models/application_setting.rb
index 862933bf127..bddeb8b0352 100644
--- a/app/models/application_setting.rb
+++ b/app/models/application_setting.rb
@@ -1,11 +1,11 @@
 class ApplicationSetting < ActiveRecord::Base
+  include CacheableAttributes
   include CacheMarkdownField
   include TokenAuthenticatable
 
   add_authentication_token_field :runners_registration_token
   add_authentication_token_field :health_check_access_token
 
-  CACHE_KEY = 'application_setting.last'.freeze
   DOMAIN_LIST_SEPARATOR = %r{\s*[,;]\s*     # comma or semicolon, optionally surrounded by whitespace
                             |               # or
                             \s              # any whitespace character
@@ -212,13 +212,7 @@ class ApplicationSetting < ActiveRecord::Base
     end
   end
 
-  validates_each :disabled_oauth_sign_in_sources do |record, attr, value|
-    value&.each do |source|
-      unless Devise.omniauth_providers.include?(source.to_sym)
-        record.errors.add(attr, "'#{source}' is not an OAuth sign-in source")
-      end
-    end
-  end
+  validate :terms_exist, if: :enforce_terms?
 
   before_validation :ensure_uuid!
 
@@ -226,41 +220,9 @@ class ApplicationSetting < ActiveRecord::Base
   before_save :ensure_health_check_access_token
 
   after_commit do
-    Rails.cache.write(CACHE_KEY, self)
-  end
-
-  def self.current
-    ensure_cache_setup
-
-    Rails.cache.fetch(CACHE_KEY) do
-      ApplicationSetting.last.tap do |settings|
-        # do not cache nils
-        raise 'missing settings' unless settings
-      end
-    end
-  rescue
-    # Fall back to an uncached value if there are any problems (e.g. redis down)
-    ApplicationSetting.last
-  end
-
-  def self.expire
-    Rails.cache.delete(CACHE_KEY)
-  rescue
-    # Gracefully handle when Redis is not available. For example,
-    # omnibus may fail here during gitlab:assets:compile.
-  end
-
-  def self.cached
-    value = Rails.cache.read(CACHE_KEY)
-    ensure_cache_setup if value.present?
-    value
-  end
-
-  def self.ensure_cache_setup
-    # This is a workaround for a Rails bug that causes attribute methods not
-    # to be loaded when read from cache: https://github.com/rails/rails/issues/27348
-    ApplicationSetting.define_attribute_methods
+    reset_memoized_terms
   end
+  after_commit :expire_performance_bar_allowed_user_ids_cache, if: -> { previous_changes.key?('performance_bar_allowed_group_id') }
 
   def self.defaults
     {
@@ -331,7 +293,8 @@ class ApplicationSetting < ActiveRecord::Base
       gitaly_timeout_fast: 10,
       gitaly_timeout_medium: 30,
       gitaly_timeout_default: 55,
-      allow_local_requests_from_hooks_and_services: false
+      allow_local_requests_from_hooks_and_services: false,
+      mirror_available: true
     }
   end
 
@@ -359,6 +322,11 @@ class ApplicationSetting < ActiveRecord::Base
     ::Gitlab::Database.cached_column_exists?(:application_settings, :sidekiq_throttling_enabled)
   end
 
+  def disabled_oauth_sign_in_sources=(sources)
+    sources = (sources || []).map(&:to_s) & Devise.omniauth_providers.map(&:to_s)
+    super(sources)
+  end
+
   def domain_whitelist_raw
     self.domain_whitelist&.join("\n")
   end
@@ -389,17 +357,6 @@ class ApplicationSetting < ActiveRecord::Base
     Array(read_attribute(:repository_storages))
   end
 
-  # DEPRECATED
-  # repository_storage is still required in the API. Remove in 9.0
-  # Still used in API v3
-  def repository_storage
-    repository_storages.first
-  end
-
-  def repository_storage=(value)
-    self.repository_storages = [value]
-  end
-
   def default_project_visibility=(level)
     super(Gitlab::VisibilityLevel.level_value(level))
   end
@@ -416,31 +373,6 @@ class ApplicationSetting < ActiveRecord::Base
     super(levels.map { |level| Gitlab::VisibilityLevel.level_value(level) })
   end
 
-  def performance_bar_allowed_group_id=(group_full_path)
-    group_full_path = nil if group_full_path.blank?
-
-    if group_full_path.nil?
-      if group_full_path != performance_bar_allowed_group_id
-        super(group_full_path)
-        Gitlab::PerformanceBar.expire_allowed_user_ids_cache
-      end
-
-      return
-    end
-
-    group = Group.find_by_full_path(group_full_path)
-
-    if group
-      if group.id != performance_bar_allowed_group_id
-        super(group.id)
-        Gitlab::PerformanceBar.expire_allowed_user_ids_cache
-      end
-    else
-      super(nil)
-      Gitlab::PerformanceBar.expire_allowed_user_ids_cache
-    end
-  end
-
   def performance_bar_allowed_group
     Group.find_by_id(performance_bar_allowed_group_id)
   end
@@ -450,15 +382,6 @@ class ApplicationSetting < ActiveRecord::Base
     performance_bar_allowed_group_id.present?
   end
 
-  # - If `enable` is true, we early return since the actual attribute that holds
-  #   the enabling/disabling is `performance_bar_allowed_group_id`
-  # - If `enable` is false, we set `performance_bar_allowed_group_id` to `nil`
-  def performance_bar_enabled=(enable)
-    return if Gitlab::Utils.to_boolean(enable)
-
-    self.performance_bar_allowed_group_id = nil
-  end
-
   # Choose one of the available repository storage options. Currently all have
   # equal weighting.
   def pick_repository_storage
@@ -507,6 +430,16 @@ class ApplicationSetting < ActiveRecord::Base
     password_authentication_enabled_for_web? || password_authentication_enabled_for_git?
   end
 
+  delegate :terms, to: :latest_terms, allow_nil: true
+  def latest_terms
+    @latest_terms ||= Term.latest
+  end
+
+  def reset_memoized_terms
+    @latest_terms = nil
+    latest_terms
+  end
+
   private
 
   def ensure_uuid!
@@ -520,4 +453,14 @@ class ApplicationSetting < ActiveRecord::Base
     errors.add(:repository_storages, "can't include: #{invalid.join(", ")}") unless
       invalid.empty?
   end
+
+  def terms_exist
+    return unless enforce_terms?
+
+    errors.add(:terms, "You need to set terms to be enforced") unless terms.present?
+  end
+
+  def expire_performance_bar_allowed_user_ids_cache
+    Gitlab::PerformanceBar.expire_allowed_user_ids_cache
+  end
 end
diff --git a/app/models/application_setting/term.rb b/app/models/application_setting/term.rb
new file mode 100644
index 00000000000..3b1dfe7e4ef
--- /dev/null
+++ b/app/models/application_setting/term.rb
@@ -0,0 +1,19 @@
+class ApplicationSetting
+  class Term < ActiveRecord::Base
+    include CacheMarkdownField
+    has_many :term_agreements
+
+    validates :terms, presence: true
+
+    cache_markdown_field :terms
+
+    def self.latest
+      order(:id).last
+    end
+
+    def accepted_by_user?(user)
+      user.accepted_term_id == id ||
+        term_agreements.accepted.where(user: user).exists?
+    end
+  end
+end
diff --git a/app/models/badge.rb b/app/models/badge.rb
index f7e10c2ebfc..265c5d872d4 100644
--- a/app/models/badge.rb
+++ b/app/models/badge.rb
@@ -18,7 +18,7 @@ class Badge < ActiveRecord::Base
 
   scope :order_created_at_asc, -> { reorder(created_at: :asc) }
 
-  validates :link_url, :image_url, url_placeholder: { protocols: %w(http https), placeholder_regex: PLACEHOLDERS_REGEX }
+  validates :link_url, :image_url, url: { protocols: %w(http https) }
   validates :type, presence: true
 
   def rendered_link_url(project = nil)
diff --git a/app/models/broadcast_message.rb b/app/models/broadcast_message.rb
index 0b561203914..4aa236555cb 100644
--- a/app/models/broadcast_message.rb
+++ b/app/models/broadcast_message.rb
@@ -19,7 +19,7 @@ class BroadcastMessage < ActiveRecord::Base
   after_commit :flush_redis_cache
 
   def self.current
-    messages = Rails.cache.fetch(CACHE_KEY) { current_and_future_messages.to_a }
+    messages = Rails.cache.fetch(CACHE_KEY, expires_in: cache_expires_in) { current_and_future_messages.to_a }
 
     return messages if messages.empty?
 
@@ -36,6 +36,10 @@ class BroadcastMessage < ActiveRecord::Base
     where('ends_at > :now', now: Time.zone.now).order_id_asc
   end
 
+  def self.cache_expires_in
+    nil
+  end
+
   def active?
     started? && !ended?
   end
diff --git a/app/models/ci/artifact_blob.rb b/app/models/ci/artifact_blob.rb
index ec56cc53aea..760f01f225b 100644
--- a/app/models/ci/artifact_blob.rb
+++ b/app/models/ci/artifact_blob.rb
@@ -36,16 +36,15 @@ module Ci
     def external_url(project, job)
       return unless external_link?(job)
 
-      full_path_parts = project.full_path_components
-      top_level_group = full_path_parts.shift
+      url_project_path = project.full_path.partition('/').last
 
       artifact_path = [
-        '-', *full_path_parts, '-',
+        '-', url_project_path, '-',
         'jobs', job.id,
         'artifacts', path
       ].join('/')
 
-      "#{pages_config.protocol}://#{top_level_group}.#{pages_config.host}/#{artifact_path}"
+      "#{project.pages_group_url}/#{artifact_path}"
     end
 
     def external_link?(job)
diff --git a/app/models/ci/build.rb b/app/models/ci/build.rb
index 1e066b69c6e..41446946a5e 100644
--- a/app/models/ci/build.rb
+++ b/app/models/ci/build.rb
@@ -3,8 +3,10 @@ module Ci
     prepend ArtifactMigratable
     include TokenAuthenticatable
     include AfterCommitQueue
+    include ObjectStorage::BackgroundMove
     include Presentable
     include Importable
+    include Gitlab::Utils::StrongMemoize
 
     MissingDependenciesError = Class.new(StandardError)
 
@@ -17,18 +19,26 @@ module Ci
 
     has_one :last_deployment, -> { order('deployments.id DESC') }, as: :deployable, class_name: 'Deployment'
     has_many :trace_sections, class_name: 'Ci::BuildTraceSection'
+    has_many :trace_chunks, class_name: 'Ci::BuildTraceChunk', foreign_key: :build_id
 
-    has_many :job_artifacts, class_name: 'Ci::JobArtifact', foreign_key: :job_id, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
+    has_many :job_artifacts, class_name: 'Ci::JobArtifact', foreign_key: :job_id, dependent: :destroy, inverse_of: :job # rubocop:disable Cop/ActiveRecordDependent
     has_one :job_artifacts_archive, -> { where(file_type: Ci::JobArtifact.file_types[:archive]) }, class_name: 'Ci::JobArtifact', inverse_of: :job, foreign_key: :job_id
     has_one :job_artifacts_metadata, -> { where(file_type: Ci::JobArtifact.file_types[:metadata]) }, class_name: 'Ci::JobArtifact', inverse_of: :job, foreign_key: :job_id
     has_one :job_artifacts_trace, -> { where(file_type: Ci::JobArtifact.file_types[:trace]) }, class_name: 'Ci::JobArtifact', inverse_of: :job, foreign_key: :job_id
 
-    # The "environment" field for builds is a String, and is the unexpanded name
+    has_one :metadata, class_name: 'Ci::BuildMetadata'
+    delegate :timeout, to: :metadata, prefix: true, allow_nil: true
+    delegate :gitlab_deploy_token, to: :project
+
+    ##
+    # The "environment" field for builds is a String, and is the unexpanded name!
+    #
     def persisted_environment
-      @persisted_environment ||= Environment.find_by(
-        name: expanded_environment_name,
-        project: project
-      )
+      return unless has_environment?
+
+      strong_memoize(:persisted_environment) do
+        Environment.find_by(name: expanded_environment_name, project: project)
+      end
     end
 
     serialize :options # rubocop:disable Cop/ActiveRecordSerialize
@@ -45,11 +55,18 @@ module Ci
       where('(artifacts_file IS NOT NULL AND artifacts_file <> ?) OR EXISTS (?)',
         '', Ci::JobArtifact.select(1).where('ci_builds.id = ci_job_artifacts.job_id').archive)
     end
+
+    scope :without_archived_trace, ->() do
+      where('NOT EXISTS (?)', Ci::JobArtifact.select(1).where('ci_builds.id = ci_job_artifacts.job_id').trace)
+    end
+
+    scope :with_artifacts_stored_locally, -> { with_artifacts_archive.where(artifacts_file_store: [nil, LegacyArtifactUploader::Store::LOCAL]) }
     scope :with_artifacts_not_expired, ->() { with_artifacts_archive.where('artifacts_expire_at IS NULL OR artifacts_expire_at > ?', Time.now) }
     scope :with_expired_artifacts, ->() { with_artifacts_archive.where('artifacts_expire_at < ?', Time.now) }
     scope :last_month, ->() { where('created_at > ?', Date.today - 1.month) }
     scope :manual_actions, ->() { where(when: :manual, status: COMPLETED_STATUSES + [:manual]) }
     scope :ref_protected, -> { where(protected: true) }
+    scope :with_live_trace, -> { where('EXISTS (?)', Ci::BuildTraceChunk.where('ci_builds.id = ci_build_trace_chunks.build_id').select(1)) }
 
     scope :matches_tag_ids, -> (tag_ids) do
       matcher = ::ActsAsTaggableOn::Tagging
@@ -81,12 +98,13 @@ module Ci
     before_save :ensure_token
     before_destroy { unscoped_project }
 
+    before_create :ensure_metadata
     after_create unless: :importing? do |build|
       run_after_commit { BuildHooksWorker.perform_async(build.id) }
     end
 
-    after_commit :update_project_statistics_after_save, on: [:create, :update]
-    after_commit :update_project_statistics, on: :destroy
+    after_save :update_project_statistics_after_save, if: :artifacts_size_changed?
+    after_destroy :update_project_statistics_after_destroy, unless: :project_destroyed?
 
     class << self
       # This is needed for url_for to work,
@@ -132,6 +150,7 @@ module Ci
       after_transition any => [:success] do |build|
         build.run_after_commit do
           BuildSuccessWorker.perform_async(id)
+          PagesWorker.perform_async(:deploy, id) if build.pages_generator?
         end
       end
 
@@ -151,6 +170,14 @@ module Ci
       before_transition any => [:running] do |build|
         build.validates_dependencies! unless Feature.enabled?('ci_disable_validates_dependencies')
       end
+
+      after_transition pending: :running do |build|
+        build.ensure_metadata.update_timeout_state
+      end
+    end
+
+    def ensure_metadata
+      metadata || build_metadata(project: project)
     end
 
     def detailed_status(current_user)
@@ -163,8 +190,13 @@ module Ci
       pipeline.manual_actions.where.not(name: name)
     end
 
+    def pages_generator?
+      Gitlab.config.pages.enabled &&
+        self.name == 'pages'
+    end
+
     def playable?
-      action? && (manual? || complete?)
+      action? && (manual? || retryable?)
     end
 
     def action?
@@ -198,7 +230,11 @@ module Ci
     end
 
     def expanded_environment_name
-      ExpandVariables.expand(environment, simple_variables) if environment
+      return unless has_environment?
+
+      strong_memoize(:expanded_environment_name) do
+        ExpandVariables.expand(environment, simple_variables)
+      end
     end
 
     def has_environment?
@@ -229,10 +265,6 @@ module Ci
       latest_builds.where('stage_idx < ?', stage_idx)
     end
 
-    def timeout
-      project.build_timeout
-    end
-
     def triggered_by?(current_user)
       user == current_user
     end
@@ -248,31 +280,52 @@ module Ci
       Gitlab::Utils.slugify(ref.to_s)
     end
 
-    # Variables whose value does not depend on environment
-    def simple_variables
-      variables(environment: nil)
-    end
-
-    # All variables, including those dependent on environment, which could
-    # contain unexpanded variables.
-    def variables(environment: persisted_environment)
-      collection = Gitlab::Ci::Variables::Collection.new.tap do |variables|
+    ##
+    # Variables in the environment name scope.
+    #
+    def scoped_variables(environment: expanded_environment_name)
+      Gitlab::Ci::Variables::Collection.new.tap do |variables|
         variables.concat(predefined_variables)
         variables.concat(project.predefined_variables)
         variables.concat(pipeline.predefined_variables)
         variables.concat(runner.predefined_variables) if runner
-        variables.concat(project.deployment_variables(environment: environment)) if has_environment?
+        variables.concat(project.deployment_variables(environment: environment)) if environment
         variables.concat(yaml_variables)
         variables.concat(user_variables)
-        variables.concat(project.group.secret_variables_for(ref, project)) if project.group
-        variables.concat(secret_variables(environment: environment))
+        variables.concat(secret_group_variables)
+        variables.concat(secret_project_variables(environment: environment))
         variables.concat(trigger_request.user_variables) if trigger_request
         variables.concat(pipeline.variables)
         variables.concat(pipeline.pipeline_schedule.job_variables) if pipeline.pipeline_schedule
-        variables.concat(persisted_environment_variables) if environment
       end
+    end
 
-      collection.to_runner_variables
+    ##
+    # Variables that do not depend on the environment name.
+    #
+    def simple_variables
+      strong_memoize(:simple_variables) do
+        scoped_variables(environment: nil).to_runner_variables
+      end
+    end
+
+    ##
+    # All variables, including persisted environment variables.
+    #
+    def variables
+      Gitlab::Ci::Variables::Collection.new
+        .concat(persisted_variables)
+        .concat(scoped_variables)
+        .concat(persisted_environment_variables)
+        .to_runner_variables
+    end
+
+    ##
+    # Regular Ruby hash of scoped variables, without duplicates that are
+    # possible to be present in an array of hashes returned from `variables`.
+    #
+    def scoped_variables_hash
+      scoped_variables.to_hash
     end
 
     def features
@@ -361,17 +414,21 @@ module Ci
       build_data = Gitlab::DataBuilder::Build.build(self)
       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
+
+    def browsable_artifacts?
+      artifacts_metadata?
     end
 
     def artifacts_metadata_entry(path, **options)
-      metadata = Gitlab::Ci::Build::Artifacts::Metadata.new(
-        artifacts_metadata.path,
-        path,
-        **options)
+      artifacts_metadata.use_file do |metadata_path|
+        metadata = Gitlab::Ci::Build::Artifacts::Metadata.new(
+          metadata_path,
+          path,
+          **options)
 
-      metadata.to_entry
+        metadata.to_entry
+      end
     end
 
     def erase_artifacts!
@@ -434,7 +491,7 @@ module Ci
 
     def user_variables
       Gitlab::Ci::Variables::Collection.new.tap do |variables|
-        return variables if user.blank?
+        break variables if user.blank?
 
         variables.append(key: 'GITLAB_USER_ID', value: user.id.to_s)
         variables.append(key: 'GITLAB_USER_EMAIL', value: user.email)
@@ -443,9 +500,14 @@ module Ci
       end
     end
 
-    def secret_variables(environment: persisted_environment)
+    def secret_group_variables
+      return [] unless project.group
+
+      project.group.secret_variables_for(ref, project)
+    end
+
+    def secret_project_variables(environment: persisted_environment)
       project.secret_variables_for(ref: ref, environment: environment)
-        .map(&:to_runner_variable)
     end
 
     def steps
@@ -542,24 +604,37 @@ module Ci
 
     CI_REGISTRY_USER = 'gitlab-ci-token'.freeze
 
+    def persisted_variables
+      Gitlab::Ci::Variables::Collection.new.tap do |variables|
+        break variables unless persisted?
+
+        variables
+          .concat(pipeline.persisted_variables)
+          .append(key: 'CI_JOB_ID', value: id.to_s)
+          .append(key: 'CI_JOB_URL', value: Gitlab::Routing.url_helpers.project_job_url(project, self))
+          .append(key: 'CI_JOB_TOKEN', value: token, public: false)
+          .append(key: 'CI_BUILD_ID', value: id.to_s)
+          .append(key: 'CI_BUILD_TOKEN', value: token, public: false)
+          .append(key: 'CI_REGISTRY_USER', value: CI_REGISTRY_USER)
+          .append(key: 'CI_REGISTRY_PASSWORD', value: token, public: false)
+          .append(key: 'CI_REPOSITORY_URL', value: repo_url, public: false)
+          .concat(deploy_token_variables)
+      end
+    end
+
     def predefined_variables
       Gitlab::Ci::Variables::Collection.new.tap do |variables|
         variables.append(key: 'CI', value: 'true')
         variables.append(key: 'GITLAB_CI', value: 'true')
-        variables.append(key: 'GITLAB_FEATURES', value: project.namespace.features.join(','))
+        variables.append(key: 'GITLAB_FEATURES', value: project.licensed_features.join(','))
         variables.append(key: 'CI_SERVER_NAME', value: 'GitLab')
         variables.append(key: 'CI_SERVER_VERSION', value: Gitlab::VERSION)
-        variables.append(key: 'CI_SERVER_REVISION', value: Gitlab::REVISION)
-        variables.append(key: 'CI_JOB_ID', value: id.to_s)
+        variables.append(key: 'CI_SERVER_REVISION', value: Gitlab.revision)
         variables.append(key: 'CI_JOB_NAME', value: name)
         variables.append(key: 'CI_JOB_STAGE', value: stage)
-        variables.append(key: 'CI_JOB_TOKEN', value: token, public: false)
         variables.append(key: 'CI_COMMIT_SHA', value: sha)
         variables.append(key: 'CI_COMMIT_REF_NAME', value: ref)
         variables.append(key: 'CI_COMMIT_REF_SLUG', value: ref_slug)
-        variables.append(key: 'CI_REGISTRY_USER', value: CI_REGISTRY_USER)
-        variables.append(key: 'CI_REGISTRY_PASSWORD', value: token, public: false)
-        variables.append(key: 'CI_REPOSITORY_URL', value: repo_url, public: false)
         variables.append(key: "CI_COMMIT_TAG", value: ref) if tag?
         variables.append(key: "CI_PIPELINE_TRIGGERED", value: 'true') if trigger_request
         variables.append(key: "CI_JOB_MANUAL", value: 'true') if action?
@@ -567,9 +642,23 @@ module Ci
       end
     end
 
+    def legacy_variables
+      Gitlab::Ci::Variables::Collection.new.tap do |variables|
+        variables.append(key: 'CI_BUILD_REF', value: sha)
+        variables.append(key: 'CI_BUILD_BEFORE_SHA', value: before_sha)
+        variables.append(key: 'CI_BUILD_REF_NAME', value: ref)
+        variables.append(key: 'CI_BUILD_REF_SLUG', value: ref_slug)
+        variables.append(key: 'CI_BUILD_NAME', value: name)
+        variables.append(key: 'CI_BUILD_STAGE', value: stage)
+        variables.append(key: "CI_BUILD_TAG", value: ref) if tag?
+        variables.append(key: "CI_BUILD_TRIGGERED", value: 'true') if trigger_request
+        variables.append(key: "CI_BUILD_MANUAL", value: 'true') if action?
+      end
+    end
+
     def persisted_environment_variables
       Gitlab::Ci::Variables::Collection.new.tap do |variables|
-        return variables unless persisted_environment
+        break variables unless persisted? && persisted_environment.present?
 
         variables.concat(persisted_environment.predefined_variables)
 
@@ -580,19 +669,12 @@ module Ci
       end
     end
 
-    def legacy_variables
+    def deploy_token_variables
       Gitlab::Ci::Variables::Collection.new.tap do |variables|
-        variables.append(key: 'CI_BUILD_ID', value: id.to_s)
-        variables.append(key: 'CI_BUILD_TOKEN', value: token, public: false)
-        variables.append(key: 'CI_BUILD_REF', value: sha)
-        variables.append(key: 'CI_BUILD_BEFORE_SHA', value: before_sha)
-        variables.append(key: 'CI_BUILD_REF_NAME', value: ref)
-        variables.append(key: 'CI_BUILD_REF_SLUG', value: ref_slug)
-        variables.append(key: 'CI_BUILD_NAME', value: name)
-        variables.append(key: 'CI_BUILD_STAGE', value: stage)
-        variables.append(key: "CI_BUILD_TAG", value: ref) if tag?
-        variables.append(key: "CI_BUILD_TRIGGERED", value: 'true') if trigger_request
-        variables.append(key: "CI_BUILD_MANUAL", value: 'true') if action?
+        break variables unless gitlab_deploy_token
+
+        variables.append(key: 'CI_DEPLOY_USER', value: gitlab_deploy_token.username)
+        variables.append(key: 'CI_DEPLOY_PASSWORD', value: gitlab_deploy_token.token, public: false)
       end
     end
 
@@ -606,16 +688,20 @@ module Ci
       pipeline.config_processor.build_attributes(name)
     end
 
-    def update_project_statistics
-      return unless project
+    def update_project_statistics_after_save
+      update_project_statistics(read_attribute(:artifacts_size).to_i - artifacts_size_was.to_i)
+    end
 
-      ProjectCacheWorker.perform_async(project_id, [], [:build_artifacts_size])
+    def update_project_statistics_after_destroy
+      update_project_statistics(-artifacts_size)
     end
 
-    def update_project_statistics_after_save
-      if previous_changes.include?('artifacts_size')
-        update_project_statistics
-      end
+    def update_project_statistics(difference)
+      ProjectStatistics.increment_statistic(project_id, :build_artifacts_size, difference)
+    end
+
+    def project_destroyed?
+      project.pending_delete?
     end
   end
 end
diff --git a/app/models/ci/build_metadata.rb b/app/models/ci/build_metadata.rb
new file mode 100644
index 00000000000..96762f8845c
--- /dev/null
+++ b/app/models/ci/build_metadata.rb
@@ -0,0 +1,35 @@
+module Ci
+  # The purpose of this class is to store Build related data that can be disposed.
+  # Data that should be persisted forever, should be stored with Ci::Build model.
+  class BuildMetadata < ActiveRecord::Base
+    extend Gitlab::Ci::Model
+    include Presentable
+    include ChronicDurationAttribute
+
+    self.table_name = 'ci_builds_metadata'
+
+    belongs_to :build, class_name: 'Ci::Build'
+    belongs_to :project
+
+    validates :build, presence: true
+    validates :project, presence: true
+
+    chronic_duration_attr_reader :timeout_human_readable, :timeout
+
+    enum timeout_source: {
+        unknown_timeout_source: 1,
+        project_timeout_source: 2,
+        runner_timeout_source: 3
+    }
+
+    def update_timeout_state
+      return unless build.runner.present?
+
+      project_timeout = project&.build_timeout
+      timeout = [project_timeout, build.runner.maximum_timeout].compact.min
+      timeout_source = timeout < project_timeout ? :runner_timeout_source : :project_timeout_source
+
+      update(timeout: timeout, timeout_source: timeout_source)
+    end
+  end
+end
diff --git a/app/models/ci/build_trace_chunk.rb b/app/models/ci/build_trace_chunk.rb
new file mode 100644
index 00000000000..4856f10846c
--- /dev/null
+++ b/app/models/ci/build_trace_chunk.rb
@@ -0,0 +1,180 @@
+module Ci
+  class BuildTraceChunk < ActiveRecord::Base
+    include FastDestroyAll
+    extend Gitlab::Ci::Model
+
+    belongs_to :build, class_name: "Ci::Build", foreign_key: :build_id
+
+    default_value_for :data_store, :redis
+
+    WriteError = Class.new(StandardError)
+
+    CHUNK_SIZE = 128.kilobytes
+    CHUNK_REDIS_TTL = 1.week
+    WRITE_LOCK_RETRY = 10
+    WRITE_LOCK_SLEEP = 0.01.seconds
+    WRITE_LOCK_TTL = 1.minute
+
+    enum data_store: {
+      redis: 1,
+      db: 2
+    }
+
+    class << self
+      def redis_data_key(build_id, chunk_index)
+        "gitlab:ci:trace:#{build_id}:chunks:#{chunk_index}"
+      end
+
+      def redis_data_keys
+        redis.pluck(:build_id, :chunk_index).map do |data|
+          redis_data_key(data.first, data.second)
+        end
+      end
+
+      def redis_delete_data(keys)
+        return if keys.empty?
+
+        Gitlab::Redis::SharedState.with do |redis|
+          redis.del(keys)
+        end
+      end
+
+      ##
+      # FastDestroyAll concerns
+      def begin_fast_destroy
+        redis_data_keys
+      end
+
+      ##
+      # FastDestroyAll concerns
+      def finalize_fast_destroy(keys)
+        redis_delete_data(keys)
+      end
+    end
+
+    ##
+    # Data is memoized for optimizing #size and #end_offset
+    def data
+      @data ||= get_data.to_s
+    end
+
+    def truncate(offset = 0)
+      raise ArgumentError, 'Offset is out of range' if offset > size || offset < 0
+      return if offset == size # Skip the following process as it doesn't affect anything
+
+      self.append("", offset)
+    end
+
+    def append(new_data, offset)
+      raise ArgumentError, 'Offset is out of range' if offset > size || offset < 0
+      raise ArgumentError, 'Chunk size overflow' if CHUNK_SIZE < (offset + new_data.bytesize)
+
+      set_data(data.byteslice(0, offset) + new_data)
+    end
+
+    def size
+      data&.bytesize.to_i
+    end
+
+    def start_offset
+      chunk_index * CHUNK_SIZE
+    end
+
+    def end_offset
+      start_offset + size
+    end
+
+    def range
+      (start_offset...end_offset)
+    end
+
+    def use_database!
+      in_lock do
+        break if db?
+        break unless size > 0
+
+        self.update!(raw_data: data, data_store: :db)
+        self.class.redis_delete_data([redis_data_key])
+      end
+    end
+
+    private
+
+    def get_data
+      if redis?
+        redis_data
+      elsif db?
+        raw_data
+      else
+        raise 'Unsupported data store'
+      end&.force_encoding(Encoding::BINARY) # Redis/Database return UTF-8 string as default
+    end
+
+    def set_data(value)
+      raise ArgumentError, 'too much data' if value.bytesize > CHUNK_SIZE
+
+      in_lock do
+        if redis?
+          redis_set_data(value)
+        elsif db?
+          self.raw_data = value
+        else
+          raise 'Unsupported data store'
+        end
+
+        @data = value
+
+        save! if changed?
+      end
+
+      schedule_to_db if full?
+    end
+
+    def schedule_to_db
+      return if db?
+
+      Ci::BuildTraceChunkFlushWorker.perform_async(id)
+    end
+
+    def full?
+      size == CHUNK_SIZE
+    end
+
+    def redis_data
+      Gitlab::Redis::SharedState.with do |redis|
+        redis.get(redis_data_key)
+      end
+    end
+
+    def redis_set_data(data)
+      Gitlab::Redis::SharedState.with do |redis|
+        redis.set(redis_data_key, data, ex: CHUNK_REDIS_TTL)
+      end
+    end
+
+    def redis_data_key
+      self.class.redis_data_key(build_id, chunk_index)
+    end
+
+    def in_lock
+      write_lock_key = "trace_write:#{build_id}:chunks:#{chunk_index}"
+
+      lease = Gitlab::ExclusiveLease.new(write_lock_key, timeout: WRITE_LOCK_TTL)
+      retry_count = 0
+
+      until uuid = lease.try_obtain
+        # Keep trying until we obtain the lease. To prevent hammering Redis too
+        # much we'll wait for a bit between retries.
+        sleep(WRITE_LOCK_SLEEP)
+        break if WRITE_LOCK_RETRY < (retry_count += 1)
+      end
+
+      raise WriteError, 'Failed to obtain write lock' unless uuid
+
+      self.reload if self.persisted?
+      return yield
+    ensure
+      Gitlab::ExclusiveLease.cancel(write_lock_key, uuid)
+    end
+  end
+end
diff --git a/app/models/ci/group.rb b/app/models/ci/group.rb
index 87898b086c6..9c1046e8715 100644
--- a/app/models/ci/group.rb
+++ b/app/models/ci/group.rb
@@ -31,6 +31,14 @@ module Ci
       end
     end
 
+    def self.fabricate(stage)
+      stage.statuses.ordered.latest
+        .sort_by(&:sortable_name).group_by(&:group_name)
+        .map do |group_name, grouped_statuses|
+          self.new(stage, name: group_name, jobs: grouped_statuses)
+        end
+    end
+
     private
 
     def commit_statuses
diff --git a/app/models/ci/group_variable.rb b/app/models/ci/group_variable.rb
index 1dd0e050ba9..44cb583e1bd 100644
--- a/app/models/ci/group_variable.rb
+++ b/app/models/ci/group_variable.rb
@@ -4,7 +4,9 @@ module Ci
     include HasVariable
     include Presentable
 
-    belongs_to :group
+    belongs_to :group, class_name: "::Group"
+
+    alias_attribute :secret_value, :value
 
     validates :key, uniqueness: {
       scope: :group_id,
diff --git a/app/models/ci/job_artifact.rb b/app/models/ci/job_artifact.rb
index 0a599f72bc7..3b952391b7e 100644
--- a/app/models/ci/job_artifact.rb
+++ b/app/models/ci/job_artifact.rb
@@ -1,15 +1,23 @@
 module Ci
   class JobArtifact < ActiveRecord::Base
+    include AfterCommitQueue
+    include ObjectStorage::BackgroundMove
     extend Gitlab::Ci::Model
 
     belongs_to :project
     belongs_to :job, class_name: "Ci::Build", foreign_key: :job_id
 
+    mount_uploader :file, JobArtifactUploader
+
     before_save :set_size, if: :file_changed?
+    after_save :update_project_statistics_after_save, if: :size_changed?
+    after_destroy :update_project_statistics_after_destroy, unless: :project_destroyed?
 
-    mount_uploader :file, JobArtifactUploader
+    after_save :update_file_store, if: :file_changed?
 
-    delegate :open, :exists?, to: :file
+    scope :with_files_stored_locally, -> { where(file_store: [nil, ::JobArtifactUploader::Store::LOCAL]) }
+
+    delegate :exists?, :open, to: :file
 
     enum file_type: {
       archive: 1,
@@ -17,12 +25,18 @@ module Ci
       trace: 3
     }
 
+    def update_file_store
+      # The file.object_store is set during `uploader.store!`
+      # which happens after object is inserted/updated
+      self.update_column(:file_store, file.object_store)
+    end
+
     def self.artifacts_size_for(project)
       self.where(project: project).sum(:size)
     end
 
-    def set_size
-      self.size = file.size
+    def local_store?
+      [nil, ::JobArtifactUploader::Store::LOCAL].include?(self.file_store)
     end
 
     def expire_in
@@ -35,5 +49,28 @@ module Ci
           ChronicDuration.parse(value)&.seconds&.from_now
         end
     end
+
+    private
+
+    def set_size
+      self.size = file.size
+    end
+
+    def update_project_statistics_after_save
+      update_project_statistics(size.to_i - size_was.to_i)
+    end
+
+    def update_project_statistics_after_destroy
+      update_project_statistics(-self.size)
+    end
+
+    def update_project_statistics(difference)
+      ProjectStatistics.increment_statistic(project_id, :build_artifacts_size, difference)
+    end
+
+    def project_destroyed?
+      # Use job.project to avoid extra DB query for project
+      job.project.pending_delete?
+    end
   end
 end
diff --git a/app/models/ci/legacy_stage.rb b/app/models/ci/legacy_stage.rb
index 9b536af672b..ce691875e42 100644
--- a/app/models/ci/legacy_stage.rb
+++ b/app/models/ci/legacy_stage.rb
@@ -16,11 +16,7 @@ module Ci
     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
+      @groups ||= Ci::Group.fabricate(self)
     end
 
     def to_param
diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index 44f9bdf111e..e5caa3ffa41 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -6,13 +6,20 @@ module Ci
     include AfterCommitQueue
     include Presentable
     include Gitlab::OptimisticLocking
+    include Gitlab::Utils::StrongMemoize
+    include AtomicInternalId
+    include EnumWithNil
 
     belongs_to :project, inverse_of: :pipelines
     belongs_to :user
     belongs_to :auto_canceled_by, class_name: 'Ci::Pipeline'
     belongs_to :pipeline_schedule, class_name: 'Ci::PipelineSchedule'
 
-    has_many :stages
+    has_internal_id :iid, scope: :project, presence: false, init: ->(s) do
+      s&.project&.pipelines&.maximum(:iid) || s&.project&.pipelines&.count
+    end
+
+    has_many :stages, -> { order(position: :asc) }, inverse_of: :pipeline
     has_many :statuses, class_name: 'CommitStatus', foreign_key: :commit_id, inverse_of: :pipeline
     has_many :builds, foreign_key: :commit_id, inverse_of: :pipeline
     has_many :trigger_requests, dependent: :destroy, foreign_key: :commit_id # rubocop:disable Cop/ActiveRecordDependent
@@ -31,18 +38,24 @@ module Ci
     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'
 
+    accepts_nested_attributes_for :variables, reject_if: :persisted?
+
     delegate :id, to: :project, prefix: true
     delegate :full_path, 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? }
     validate :valid_commit_sha, unless: :importing?
 
+    # Replace validator below with
+    # `validates :source, presence: { unless: :importing? }, on: :create`
+    # when removing Gitlab.rails5? code.
+    validate :valid_source, unless: :importing?, on: :create
+
     after_create :keep_around_commits, unless: :importing?
 
-    enum source: {
+    enum_with_nil source: {
       unknown: nil,
       push: 1,
       web: 2,
@@ -52,7 +65,7 @@ module Ci
       external: 6
     }
 
-    enum config_source: {
+    enum_with_nil config_source: {
       unknown_source: nil,
       repository_source: 1,
       auto_devops_source: 2
@@ -242,6 +255,20 @@ module Ci
       stage unless stage.statuses_count.zero?
     end
 
+    ##
+    # TODO We do not completely switch to persisted stages because of
+    # race conditions with setting statuses gitlab-ce#23257.
+    #
+    def ordered_stages
+      return legacy_stages unless complete?
+
+      if Feature.enabled?('ci_pipeline_persisted_stages')
+        stages
+      else
+        legacy_stages
+      end
+    end
+
     def legacy_stages
       # TODO, this needs refactoring, see gitlab-ce#26481.
 
@@ -268,19 +295,39 @@ module Ci
     end
 
     def git_author_name
-      commit.try(:author_name)
+      strong_memoize(:git_author_name) do
+        commit.try(:author_name)
+      end
     end
 
     def git_author_email
-      commit.try(:author_email)
+      strong_memoize(:git_author_email) do
+        commit.try(:author_email)
+      end
     end
 
     def git_commit_message
-      commit.try(:message)
+      strong_memoize(:git_commit_message) do
+        commit.try(:message)
+      end
     end
 
     def git_commit_title
-      commit.try(:title)
+      strong_memoize(:git_commit_title) do
+        commit.try(:title)
+      end
+    end
+
+    def git_commit_full_title
+      strong_memoize(:git_commit_full_title) do
+        commit.try(:full_title)
+      end
+    end
+
+    def git_commit_description
+      strong_memoize(:git_commit_description) do
+        commit.try(:description)
+      end
     end
 
     def short_sha
@@ -361,23 +408,36 @@ module Ci
     def stage_seeds
       return [] unless config_processor
 
-      @stage_seeds ||= config_processor.stage_seeds(self)
+      strong_memoize(:stage_seeds) do
+        seeds = config_processor.stages_attributes.map do |attributes|
+          Gitlab::Ci::Pipeline::Seed::Stage.new(self, attributes)
+        end
+
+        seeds.select(&:included?)
+      end
     end
 
     def seeds_size
-      @seeds_size ||= stage_seeds.sum(&:size)
+      stage_seeds.sum(&:size)
     end
 
     def has_kubernetes_active?
       project.deployment_platform&.active?
     end
 
-    def has_stage_seeds?
-      stage_seeds.any?
+    def has_warnings?
+      number_of_warnings.positive?
     end
 
-    def has_warnings?
-      builds.latest.failed_but_allowed.any?
+    def number_of_warnings
+      BatchLoader.for(id).batch(default_value: 0) do |pipeline_ids, loader|
+        ::Ci::Build.where(commit_id: pipeline_ids)
+          .latest
+          .failed_but_allowed
+          .group(:commit_id)
+          .count
+          .each { |id, amount| loader.call(id, amount) }
+      end
     end
 
     def set_config_source
@@ -388,6 +448,9 @@ module Ci
       end
     end
 
+    ##
+    # TODO, setting yaml_errors should be moved to the pipeline creation chain.
+    #
     def config_processor
       return unless ci_yaml_file
       return @config_processor if defined?(@config_processor)
@@ -460,7 +523,8 @@ module Ci
 
     def update_status
       retry_optimistic_lock(self) do
-        case latest_builds_status
+        case latest_builds_status.to_s
+        when 'created' then nil
         when 'pending' then enqueue
         when 'running' then run
         when 'success' then succeed
@@ -468,15 +532,38 @@ module Ci
         when 'canceled' then cancel
         when 'skipped' then skip
         when 'manual' then block
+        else
+          raise HasStatus::UnknownStatusError,
+                "Unknown status `#{latest_builds_status}`"
         end
       end
     end
 
+    def protected_ref?
+      strong_memoize(:protected_ref) { project.protected_for?(ref) }
+    end
+
+    def legacy_trigger
+      strong_memoize(:legacy_trigger) { trigger_requests.first }
+    end
+
+    def persisted_variables
+      Gitlab::Ci::Variables::Collection.new.tap do |variables|
+        break variables unless persisted?
+
+        variables.append(key: 'CI_PIPELINE_ID', value: id.to_s)
+        variables.append(key: 'CI_PIPELINE_URL', value: Gitlab::Routing.url_helpers.project_pipeline_url(project, self))
+      end
+    end
+
     def predefined_variables
       Gitlab::Ci::Variables::Collection.new
-        .append(key: 'CI_PIPELINE_ID', value: id.to_s)
+        .append(key: 'CI_PIPELINE_IID', value: iid.to_s)
         .append(key: 'CI_CONFIG_PATH', value: ci_yaml_file_path)
         .append(key: 'CI_PIPELINE_SOURCE', value: source.to_s)
+        .append(key: 'CI_COMMIT_MESSAGE', value: git_commit_message.to_s)
+        .append(key: 'CI_COMMIT_TITLE', value: git_commit_full_title.to_s)
+        .append(key: 'CI_COMMIT_DESCRIPTION', value: git_commit_description.to_s)
     end
 
     def queued_duration
@@ -551,5 +638,11 @@ module Ci
       project.repository.keep_around(self.sha)
       project.repository.keep_around(self.before_sha)
     end
+
+    def valid_source
+      if source.nil? || source == "unknown"
+        errors.add(:source, "invalid source")
+      end
+    end
   end
 end
diff --git a/app/models/ci/pipeline_schedule_variable.rb b/app/models/ci/pipeline_schedule_variable.rb
index af989fb14b4..03df4e3e638 100644
--- a/app/models/ci/pipeline_schedule_variable.rb
+++ b/app/models/ci/pipeline_schedule_variable.rb
@@ -5,6 +5,8 @@ module Ci
 
     belongs_to :pipeline_schedule
 
+    alias_attribute :secret_value, :value
+
     validates :key, uniqueness: { scope: :pipeline_schedule_id }
   end
 end
diff --git a/app/models/ci/pipeline_variable.rb b/app/models/ci/pipeline_variable.rb
index de5aae17a15..38e14ffbc0c 100644
--- a/app/models/ci/pipeline_variable.rb
+++ b/app/models/ci/pipeline_variable.rb
@@ -5,6 +5,8 @@ module Ci
 
     belongs_to :pipeline
 
+    alias_attribute :secret_value, :value
+
     validates :key, uniqueness: { scope: :pipeline_id }
   end
 end
diff --git a/app/models/ci/runner.rb b/app/models/ci/runner.rb
index 7173f88f1c7..8c9aacca8de 100644
--- a/app/models/ci/runner.rb
+++ b/app/models/ci/runner.rb
@@ -3,42 +3,67 @@ module Ci
     extend Gitlab::Ci::Model
     include Gitlab::SQL::Pattern
     include RedisCacheable
+    include ChronicDurationAttribute
 
     RUNNER_QUEUE_EXPIRY_TIME = 60.minutes
     ONLINE_CONTACT_TIMEOUT = 1.hour
     UPDATE_DB_RUNNER_INFO_EVERY = 40.minutes
     AVAILABLE_SCOPES = %w[specific shared active paused online].freeze
-    FORM_EDITABLE = %i[description tag_list active run_untagged locked access_level].freeze
+    FORM_EDITABLE = %i[description tag_list active run_untagged locked access_level maximum_timeout_human_readable].freeze
 
     has_many :builds
-    has_many :runner_projects, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
+    has_many :runner_projects, inverse_of: :runner, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
     has_many :projects, through: :runner_projects
+    has_many :runner_namespaces, inverse_of: :runner
+    has_many :groups, through: :runner_namespaces
 
     has_one :last_build, ->() { order('id DESC') }, class_name: 'Ci::Build'
 
     before_validation :set_default_values
 
-    scope :specific, ->() { where(is_shared: false) }
-    scope :shared, ->() { where(is_shared: true) }
-    scope :active, ->() { where(active: true) }
-    scope :paused, ->() { where(active: false) }
-    scope :online, ->() { where('contacted_at > ?', contact_time_deadline) }
-    scope :ordered, ->() { order(id: :desc) }
+    scope :specific, -> { where(is_shared: false) }
+    scope :shared, -> { where(is_shared: true) }
+    scope :active, -> { where(active: true) }
+    scope :paused, -> { where(active: false) }
+    scope :online, -> { where('contacted_at > ?', contact_time_deadline) }
+    scope :ordered, -> { order(id: :desc) }
 
-    scope :owned_or_shared, ->(project_id) do
-      joins('LEFT JOIN ci_runner_projects ON ci_runner_projects.runner_id = ci_runners.id')
-        .where("ci_runner_projects.project_id = :project_id OR ci_runners.is_shared = true", project_id: project_id)
+    scope :belonging_to_project, -> (project_id) {
+      joins(:runner_projects).where(ci_runner_projects: { project_id: project_id })
+    }
+
+    scope :belonging_to_parent_group_of_project, -> (project_id) {
+      project_groups = ::Group.joins(:projects).where(projects: { id: project_id })
+      hierarchy_groups = Gitlab::GroupHierarchy.new(project_groups).base_and_ancestors
+
+      joins(:groups).where(namespaces: { id: hierarchy_groups })
+    }
+
+    scope :owned_or_shared, -> (project_id) do
+      union = Gitlab::SQL::Union.new(
+        [belonging_to_project(project_id), belonging_to_parent_group_of_project(project_id), shared],
+        remove_duplicates: false
+      )
+      from("(#{union.to_sql}) ci_runners")
     end
 
     scope :assignable_for, ->(project) do
       # FIXME: That `to_sql` is needed to workaround a weird Rails bug.
       #        Without that, placeholders would miss one and couldn't match.
       where(locked: false)
-        .where.not("id IN (#{project.runners.select(:id).to_sql})").specific
+        .where.not("ci_runners.id IN (#{project.runners.select(:id).to_sql})")
+        .project_type
     end
 
     validate :tag_constraints
     validates :access_level, presence: true
+    validates :runner_type, presence: true
+
+    validate :no_projects, unless: :project_type?
+    validate :no_groups, unless: :group_type?
+    validate :any_project, if: :project_type?
+    validate :exactly_one_group, if: :group_type?
+    validate :validate_is_shared
 
     acts_as_taggable
 
@@ -49,7 +74,19 @@ module Ci
       ref_protected: 1
     }
 
-    cached_attr_reader :version, :revision, :platform, :architecture, :contacted_at, :ip_address
+    enum runner_type: {
+      instance_type: 1,
+      group_type: 2,
+      project_type: 3
+    }
+
+    cached_attr_reader :version, :revision, :platform, :architecture, :ip_address, :contacted_at
+
+    chronic_duration_attr :maximum_timeout_human_readable, :maximum_timeout
+
+    validates :maximum_timeout, allow_nil: true,
+                                numericality: { greater_than_or_equal_to: 600,
+                                                message: 'needs to be at least 10 minutes' }
 
     # Searches for runners matching the given query.
     #
@@ -76,9 +113,22 @@ module Ci
     end
 
     def assign_to(project, current_user = nil)
-      self.is_shared = false if shared?
-      self.save
-      project.runner_projects.create(runner_id: self.id)
+      if shared?
+        self.is_shared = false if shared?
+        self.runner_type = :project_type
+      elsif group_type?
+        raise ArgumentError, 'Transitioning a group runner to a project runner is not supported'
+      end
+
+      begin
+        transaction do
+          self.projects << project
+          self.save!
+        end
+      rescue ActiveRecord::RecordInvalid => e
+        self.errors.add(:assign_to, e.message)
+        false
+      end
     end
 
     def display_name
@@ -113,6 +163,14 @@ module Ci
       !shared?
     end
 
+    def assigned_to_group?
+      runner_namespaces.any?
+    end
+
+    def assigned_to_project?
+      runner_projects.any?
+    end
+
     def can_pick?(build)
       return false if self.ref_protected? && !build.protected?
 
@@ -161,9 +219,13 @@ module Ci
 
       cache_attributes(values)
 
-      if persist_cached_data?
-        self.assign_attributes(values)
-        self.save if self.changed?
+      # We save data without validation, it will always change due to `contacted_at`
+      self.update_columns(values) if persist_cached_data?
+    end
+
+    def pick_build!(build)
+      if can_pick?(build)
+        tick_runner_queue
       end
     end
 
@@ -198,7 +260,37 @@ module Ci
     end
 
     def assignable_for?(project_id)
-      is_shared? || projects.exists?(id: project_id)
+      self.class.owned_or_shared(project_id).where(id: self.id).any?
+    end
+
+    def no_projects
+      if projects.any?
+        errors.add(:runner, 'cannot have projects assigned')
+      end
+    end
+
+    def no_groups
+      if groups.any?
+        errors.add(:runner, 'cannot have groups assigned')
+      end
+    end
+
+    def any_project
+      unless projects.any?
+        errors.add(:runner, 'needs to be assigned to at least one project')
+      end
+    end
+
+    def exactly_one_group
+      unless groups.one?
+        errors.add(:runner, 'needs to be assigned to exactly one group')
+      end
+    end
+
+    def validate_is_shared
+      unless is_shared? == instance_type?
+        errors.add(:is_shared, 'is not equal to instance_type?')
+      end
     end
 
     def accepting_tags?(build)
diff --git a/app/models/ci/runner_namespace.rb b/app/models/ci/runner_namespace.rb
new file mode 100644
index 00000000000..29508fdd326
--- /dev/null
+++ b/app/models/ci/runner_namespace.rb
@@ -0,0 +1,11 @@
+module Ci
+  class RunnerNamespace < ActiveRecord::Base
+    extend Gitlab::Ci::Model
+
+    belongs_to :runner, inverse_of: :runner_namespaces, validate: true
+    belongs_to :namespace, inverse_of: :runner_namespaces, class_name: '::Namespace'
+    belongs_to :group, class_name: '::Group', foreign_key: :namespace_id
+
+    validates :runner_id, uniqueness: { scope: :namespace_id }
+  end
+end
diff --git a/app/models/ci/runner_project.rb b/app/models/ci/runner_project.rb
index 505d178ba8e..52437047300 100644
--- a/app/models/ci/runner_project.rb
+++ b/app/models/ci/runner_project.rb
@@ -2,8 +2,8 @@ module Ci
   class RunnerProject < ActiveRecord::Base
     extend Gitlab::Ci::Model
 
-    belongs_to :runner
-    belongs_to :project
+    belongs_to :runner, inverse_of: :runner_projects
+    belongs_to :project, inverse_of: :runner_projects
 
     validates :runner_id, uniqueness: { scope: :project_id }
   end
diff --git a/app/models/ci/stage.rb b/app/models/ci/stage.rb
index 75b8ea2a371..ea07f37e6c1 100644
--- a/app/models/ci/stage.rb
+++ b/app/models/ci/stage.rb
@@ -13,14 +13,27 @@ module Ci
     has_many :statuses, class_name: 'CommitStatus', foreign_key: :stage_id
     has_many :builds, foreign_key: :stage_id
 
-    validates :project, presence: true, unless: :importing?
-    validates :pipeline, presence: true, unless: :importing?
-    validates :name, presence: true, unless: :importing?
+    with_options unless: :importing? do
+      validates :project, presence: true
+      validates :pipeline, presence: true
+      validates :name, presence: true
+      validates :position, presence: true
+    end
 
-    after_initialize do |stage|
+    after_initialize do
       self.status = DEFAULT_STATUS if self.status.nil?
     end
 
+    before_validation unless: :importing? do
+      next if position.present?
+
+      self.position = statuses.select(:stage_idx)
+        .where('stage_idx IS NOT NULL')
+        .group(:stage_idx)
+        .order('COUNT(*) DESC')
+        .first&.stage_idx.to_i
+    end
+
     state_machine :status, initial: :created do
       event :enqueue do
         transition created: :pending
@@ -55,16 +68,44 @@ module Ci
     def update_status
       retry_optimistic_lock(self) do
         case statuses.latest.status
+        when 'created' then nil
         when 'pending' then enqueue
         when 'running' then run
         when 'success' then succeed
         when 'failed' then drop
         when 'canceled' then cancel
         when 'manual' then block
-        when 'skipped' then skip
-        else skip
+        when 'skipped', nil then skip
+        else
+          raise HasStatus::UnknownStatusError,
+                "Unknown status `#{statuses.latest.status}`"
         end
       end
     end
+
+    def groups
+      @groups ||= Ci::Group.fabricate(self)
+    end
+
+    def has_warnings?
+      number_of_warnings.positive?
+    end
+
+    def number_of_warnings
+      BatchLoader.for(id).batch(default_value: 0) do |stage_ids, loader|
+        ::Ci::Build.where(stage_id: stage_ids)
+          .latest
+          .failed_but_allowed
+          .group(:stage_id)
+          .count
+          .each { |id, amount| loader.call(id, amount) }
+      end
+    end
+
+    def detailed_status(current_user)
+      Gitlab::Ci::Status::Stage::Factory
+        .new(self, current_user)
+        .fabricate!
+    end
   end
 end
diff --git a/app/models/ci/variable.rb b/app/models/ci/variable.rb
index 7c71291de84..452cb910bca 100644
--- a/app/models/ci/variable.rb
+++ b/app/models/ci/variable.rb
@@ -6,6 +6,8 @@ module Ci
 
     belongs_to :project
 
+    alias_attribute :secret_value, :value
+
     validates :key, uniqueness: {
       scope: [:project_id, :environment_scope],
       message: "(%{value}) has already been taken"
diff --git a/app/models/clusters/applications/jupyter.rb b/app/models/clusters/applications/jupyter.rb
new file mode 100644
index 00000000000..975d434e1a4
--- /dev/null
+++ b/app/models/clusters/applications/jupyter.rb
@@ -0,0 +1,92 @@
+module Clusters
+  module Applications
+    class Jupyter < ActiveRecord::Base
+      VERSION = '0.0.1'.freeze
+
+      self.table_name = 'clusters_applications_jupyter'
+
+      include ::Clusters::Concerns::ApplicationCore
+      include ::Clusters::Concerns::ApplicationStatus
+      include ::Clusters::Concerns::ApplicationData
+
+      belongs_to :oauth_application, class_name: 'Doorkeeper::Application'
+
+      default_value_for :version, VERSION
+
+      def set_initial_status
+        return unless not_installable?
+
+        if cluster&.application_ingress_installed? && cluster.application_ingress.external_ip
+          self.status = 'installable'
+        end
+      end
+
+      def chart
+        "#{name}/jupyterhub"
+      end
+
+      def repository
+        'https://jupyterhub.github.io/helm-chart/'
+      end
+
+      def values
+        content_values.to_yaml
+      end
+
+      def install_command
+        Gitlab::Kubernetes::Helm::InstallCommand.new(
+          name,
+          chart: chart,
+          values: values,
+          repository: repository
+        )
+      end
+
+      def callback_url
+        "http://#{hostname}/hub/oauth_callback"
+      end
+
+      private
+
+      def specification
+        {
+          "ingress" => {
+            "hosts" => [hostname]
+          },
+          "hub" => {
+            "extraEnv" => {
+              "GITLAB_HOST" => gitlab_url
+            },
+            "cookieSecret" => cookie_secret
+          },
+          "proxy" => {
+            "secretToken" => secret_token
+          },
+          "auth" => {
+            "gitlab" => {
+              "clientId" => oauth_application.uid,
+              "clientSecret" => oauth_application.secret,
+              "callbackUrl" => callback_url
+            }
+          }
+        }
+      end
+
+      def gitlab_url
+        Gitlab.config.gitlab.url
+      end
+
+      def content_values
+        YAML.load_file(chart_values_file).deep_merge!(specification)
+      end
+
+      def secret_token
+        @secret_token ||= SecureRandom.hex(32)
+      end
+
+      def cookie_secret
+        @cookie_secret ||= SecureRandom.hex(32)
+      end
+    end
+  end
+end
diff --git a/app/models/clusters/applications/prometheus.rb b/app/models/clusters/applications/prometheus.rb
index 7b25d8c4089..48137c2ed68 100644
--- a/app/models/clusters/applications/prometheus.rb
+++ b/app/models/clusters/applications/prometheus.rb
@@ -3,7 +3,7 @@ module Clusters
     class Prometheus < ActiveRecord::Base
       include PrometheusAdapter
 
-      VERSION = "2.0.0".freeze
+      VERSION = '6.7.3'.freeze
 
       self.table_name = 'clusters_applications_prometheus'
 
@@ -37,6 +37,7 @@ module Clusters
         Gitlab::Kubernetes::Helm::InstallCommand.new(
           name,
           chart: chart,
+          version: version,
           values: values
         )
       end
@@ -49,6 +50,11 @@ module Clusters
         # ensures headers containing auth data are appended to original k8s client options
         options = kube_client.rest_client.options.merge(headers: kube_client.headers)
         RestClient::Resource.new(proxy_url, options)
+      rescue Kubeclient::HttpError
+        # If users have mistakenly set parameters or removed the depended clusters,
+        # `proxy_url` could raise an exception because gitlab can not communicate with the cluster.
+        # Since `PrometheusAdapter#can_query?` is eargely loaded on environement pages in gitlab,
+        # we need to silence the exceptions
       end
 
       private
diff --git a/app/models/clusters/applications/runner.rb b/app/models/clusters/applications/runner.rb
index 16efe90fa27..e6f795f3e0b 100644
--- a/app/models/clusters/applications/runner.rb
+++ b/app/models/clusters/applications/runner.rb
@@ -43,12 +43,21 @@ module Clusters
 
       def create_and_assign_runner
         transaction do
-          project.runners.create!(name: 'kubernetes-cluster', tag_list: %w(kubernetes cluster)).tap do |runner|
+          Ci::Runner.create!(runner_create_params).tap do |runner|
             update!(runner_id: runner.id)
           end
         end
       end
 
+      def runner_create_params
+        {
+          name: 'kubernetes-cluster',
+          runner_type: :project_type,
+          tag_list: %w(kubernetes cluster),
+          projects: [project]
+        }
+      end
+
       def gitlab_url
         Gitlab::Routing.url_helpers.root_url(only_path: false)
       end
diff --git a/app/models/clusters/cluster.rb b/app/models/clusters/cluster.rb
index 49eb069016a..b426b1bf8a1 100644
--- a/app/models/clusters/cluster.rb
+++ b/app/models/clusters/cluster.rb
@@ -8,8 +8,10 @@ module Clusters
       Applications::Helm.application_name => Applications::Helm,
       Applications::Ingress.application_name => Applications::Ingress,
       Applications::Prometheus.application_name => Applications::Prometheus,
-      Applications::Runner.application_name => Applications::Runner
+      Applications::Runner.application_name => Applications::Runner,
+      Applications::Jupyter.application_name => Applications::Jupyter
     }.freeze
+    DEFAULT_ENVIRONMENT = '*'.freeze
 
     belongs_to :user
 
@@ -25,6 +27,7 @@ module Clusters
     has_one :application_ingress, class_name: 'Clusters::Applications::Ingress'
     has_one :application_prometheus, class_name: 'Clusters::Applications::Prometheus'
     has_one :application_runner, class_name: 'Clusters::Applications::Runner'
+    has_one :application_jupyter, class_name: 'Clusters::Applications::Jupyter'
 
     accepts_nested_attributes_for :provider_gcp, update_only: true
     accepts_nested_attributes_for :platform_kubernetes, update_only: true
@@ -38,6 +41,7 @@ module Clusters
 
     delegate :active?, to: :platform_kubernetes, prefix: true, allow_nil: true
     delegate :installed?, to: :application_helm, prefix: true, allow_nil: true
+    delegate :installed?, to: :application_ingress, prefix: true, allow_nil: true
 
     enum platform_type: {
       kubernetes: 1
@@ -50,6 +54,11 @@ module Clusters
 
     scope :enabled, -> { where(enabled: true) }
     scope :disabled, -> { where(enabled: false) }
+    scope :user_provided, -> { where(provider_type: ::Clusters::Cluster.provider_types[:user]) }
+    scope :gcp_provided, -> { where(provider_type: ::Clusters::Cluster.provider_types[:gcp]) }
+    scope :gcp_installed, -> { gcp_provided.includes(:provider_gcp).where(cluster_providers_gcp: { status: ::Clusters::Providers::Gcp.state_machines[:status].states[:created].value }) }
+
+    scope :default_environment, -> { where(environment_scope: DEFAULT_ENVIRONMENT) }
 
     def status_name
       if provider
@@ -68,7 +77,8 @@ module Clusters
         application_helm || build_application_helm,
         application_ingress || build_application_ingress,
         application_prometheus || build_application_prometheus,
-        application_runner || build_application_runner
+        application_runner || build_application_runner,
+        application_jupyter || build_application_jupyter
       ]
     end
 
diff --git a/app/models/clusters/concerns/application_status.rb b/app/models/clusters/concerns/application_status.rb
index 7b7c8eac773..8f3eb75bfa9 100644
--- a/app/models/clusters/concerns/application_status.rb
+++ b/app/models/clusters/concerns/application_status.rb
@@ -4,6 +4,8 @@ module Clusters
       extend ActiveSupport::Concern
 
       included do
+        scope :installed, -> { where(status: self.state_machines[:status].states[:installed].value) }
+
         state_machine :status, initial: :not_installable do
           state :not_installable, value: -2
           state :errored, value: -1
diff --git a/app/models/clusters/platforms/kubernetes.rb b/app/models/clusters/platforms/kubernetes.rb
index ba6552f238f..36631d57ad1 100644
--- a/app/models/clusters/platforms/kubernetes.rb
+++ b/app/models/clusters/platforms/kubernetes.rb
@@ -11,12 +11,12 @@ module Clusters
 
       attr_encrypted :password,
         mode: :per_attribute_iv,
-        key: Gitlab::Application.secrets.db_key_base,
+        key: Settings.attr_encrypted_db_key_base_truncated,
         algorithm: 'aes-256-cbc'
 
       attr_encrypted :token,
         mode: :per_attribute_iv,
-        key: Gitlab::Application.secrets.db_key_base,
+        key: Settings.attr_encrypted_db_key_base_truncated,
         algorithm: 'aes-256-cbc'
 
       before_validation :enforce_namespace_to_lower_case
diff --git a/app/models/clusters/providers/gcp.rb b/app/models/clusters/providers/gcp.rb
index 7fac32466ab..4db1bb35c12 100644
--- a/app/models/clusters/providers/gcp.rb
+++ b/app/models/clusters/providers/gcp.rb
@@ -11,7 +11,7 @@ module Clusters
 
       attr_encrypted :access_token,
         mode: :per_attribute_iv,
-        key: Gitlab::Application.secrets.db_key_base,
+        key: Settings.attr_encrypted_db_key_base_truncated,
         algorithm: 'aes-256-cbc'
 
       validates :gcp_project_id,
diff --git a/app/models/commit.rb b/app/models/commit.rb
index cceae5efb72..56d4c86774e 100644
--- a/app/models/commit.rb
+++ b/app/models/commit.rb
@@ -30,9 +30,12 @@ class Commit
 
   MIN_SHA_LENGTH = Gitlab::Git::Commit::MIN_SHA_LENGTH
   COMMIT_SHA_PATTERN = /\h{#{MIN_SHA_LENGTH},40}/.freeze
+  # Used by GFM to match and present link extensions on node texts and hrefs.
+  LINK_EXTENSION_PATTERN = /(patch)/.freeze
 
   def banzai_render_context(field)
-    context = { pipeline: :single_line, project: self.project }
+    pipeline = field == :description ? :commit_description : :single_line
+    context = { pipeline: pipeline, project: self.project }
     context[:author] = self.author if self.author
 
     context
@@ -102,6 +105,10 @@ class Commit
         end
       end
     end
+
+    def parent_class
+      ::Project
+    end
   end
 
   attr_accessor :raw
@@ -142,7 +149,8 @@ class Commit
   end
 
   def self.link_reference_pattern
-    @link_reference_pattern ||= super("commit", /(?<commit>#{COMMIT_SHA_PATTERN})/)
+    @link_reference_pattern ||=
+      super("commit", /(?<commit>#{COMMIT_SHA_PATTERN})?(\.(?<extension>#{LINK_EXTENSION_PATTERN}))?/)
   end
 
   def to_reference(from = nil, full: false)
@@ -175,7 +183,7 @@ class Commit
       if safe_message.blank?
         no_commit_message
       else
-        safe_message.split("\n", 2).first
+        safe_message.split(/[\r\n]/, 2).first
       end
   end
 
@@ -216,8 +224,34 @@ class Commit
     Gitlab::ClosingIssueExtractor.new(project, current_user).closed_by_message(safe_message)
   end
 
+  def lazy_author
+    BatchLoader.for(author_email.downcase).batch do |emails, loader|
+      # A Hash that maps user Emails to the corresponding User objects. The
+      # Emails at this point are the _primary_ Emails of the Users.
+      users_for_emails = User
+        .by_any_email(emails)
+        .each_with_object({}) { |user, hash| hash[user.email] = user }
+
+      users_for_ids = users_for_emails
+        .values
+        .each_with_object({}) { |user, hash| hash[user.id] = user }
+
+      # Some commits may have used an alternative Email address. In this case we
+      # need to query the "emails" table to map those addresses to User objects.
+      Email
+        .where(email: emails - users_for_emails.keys)
+        .pluck(:email, :user_id)
+        .each { |(email, id)| users_for_emails[email] = users_for_ids[id] }
+
+      users_for_emails.each { |email, user| loader.call(email, user) }
+    end
+  end
+
   def author
-    User.find_by_any_email(author_email.downcase)
+    # We use __sync so that we get the actual objects back (including an actual
+    # nil), instead of a wrapper, as returning a wrapped nil breaks a lot of
+    # code.
+    lazy_author.__sync
   end
   request_cache(:author) { author_email.downcase }
 
@@ -244,7 +278,7 @@ class Commit
   end
 
   def notes_with_associations
-    notes.includes(:author)
+    notes.includes(:author, :award_emoji)
   end
 
   def merge_requests
@@ -416,6 +450,12 @@ class Commit
     # no-op but needs to be defined since #persisted? is defined
   end
 
+  def touch_later
+    # No-op.
+    # This method is called by ActiveRecord.
+    # We don't want to do anything for `Commit` model, so this is empty.
+  end
+
   WIP_REGEX = /\A\s*(((?i)(\[WIP\]|WIP:|WIP)\s|WIP$))|(fixup!|squash!)\s/.freeze
 
   def work_in_progress?
diff --git a/app/models/commit_status.rb b/app/models/commit_status.rb
index 9fb5b7efec6..97516079b66 100644
--- a/app/models/commit_status.rb
+++ b/app/models/commit_status.rb
@@ -2,6 +2,8 @@ class CommitStatus < ActiveRecord::Base
   include HasStatus
   include Importable
   include AfterCommitQueue
+  include Presentable
+  include EnumWithNil
 
   self.table_name = 'ci_builds'
 
@@ -38,7 +40,7 @@ class CommitStatus < ActiveRecord::Base
   scope :retried_ordered, -> { retried.ordered.includes(project: :namespace) }
   scope :after_stage, -> (index) { where('stage_idx > ?', index) }
 
-  enum failure_reason: {
+  enum_with_nil failure_reason: {
     unknown_failure: nil,
     script_failure: 1,
     api_failure: 2,
@@ -87,7 +89,7 @@ class CommitStatus < ActiveRecord::Base
       transition [:created, :pending, :running, :manual] => :canceled
     end
 
-    before_transition created: [:pending, :running] do |commit_status|
+    before_transition [:created, :skipped, :manual] => :pending do |commit_status|
       commit_status.queued_at = Time.now
     end
 
@@ -141,7 +143,7 @@ class CommitStatus < ActiveRecord::Base
   end
 
   def group_name
-    name.to_s.gsub(%r{\d+[\.\s:/\\]+\d+\s*}, '').strip
+    name.to_s.gsub(%r{\d+[\s:/\\]+\d+\s*}, '').strip
   end
 
   def failed_but_allowed?
diff --git a/app/models/concerns/atomic_internal_id.rb b/app/models/concerns/atomic_internal_id.rb
index 4b66725a3e6..164c704260e 100644
--- a/app/models/concerns/atomic_internal_id.rb
+++ b/app/models/concerns/atomic_internal_id.rb
@@ -25,22 +25,23 @@ module AtomicInternalId
   extend ActiveSupport::Concern
 
   module ClassMethods
-    def has_internal_id(column, scope:, init:) # rubocop:disable Naming/PredicateName
-      before_validation(on: :create) do
-        if read_attribute(column).blank?
-          scope_attrs = { scope => association(scope).reader }
+    def has_internal_id(column, scope:, init:, presence: true) # rubocop:disable Naming/PredicateName
+      before_validation :"ensure_#{scope}_#{column}!", on: :create
+      validates column, presence: presence
+
+      define_method("ensure_#{scope}_#{column}!") do
+        scope_value = association(scope).reader
+
+        if read_attribute(column).blank? && scope_value
+          scope_attrs = { scope_value.class.table_name.singularize.to_sym => scope_value }
           usage = self.class.table_name.to_sym
 
           new_iid = InternalId.generate_next(self, scope_attrs, usage, init)
           write_attribute(column, new_iid)
         end
-      end
 
-      validates column, presence: true, numericality: true
+        read_attribute(column)
+      end
     end
   end
-
-  def to_param
-    iid.to_s
-  end
 end
diff --git a/app/models/concerns/avatarable.rb b/app/models/concerns/avatarable.rb
index d35e37935fb..095897b08e3 100644
--- a/app/models/concerns/avatarable.rb
+++ b/app/models/concerns/avatarable.rb
@@ -3,11 +3,15 @@ module Avatarable
 
   included do
     prepend ShadowMethods
+    include ObjectStorage::BackgroundMove
+    include Gitlab::Utils::StrongMemoize
 
     validate :avatar_type, if: ->(user) { user.avatar.present? && user.avatar_changed? }
     validates :avatar, file_size: { maximum: 200.kilobytes.to_i }
 
     mount_uploader :avatar, AvatarUploader
+
+    after_initialize :add_avatar_to_batch
   end
 
   module ShadowMethods
@@ -17,11 +21,22 @@ module Avatarable
 
       avatar_path(only_path: args.fetch(:only_path, true)) || super
     end
+
+    def retrieve_upload(identifier, paths)
+      upload = retrieve_upload_from_batch(identifier)
+
+      # This fallback is needed when deleting an upload, because we may have
+      # already been removed from the DB. We have to check an explicit `#nil?`
+      # because it's a BatchLoader instance.
+      upload = super if upload.nil?
+
+      upload
+    end
   end
 
   def avatar_type
     unless self.avatar.image?
-      self.errors.add :avatar, "only images allowed"
+      errors.add :avatar, "file format is not supported. Please try one of the following supported formats: #{AvatarUploader::IMAGE_EXT.join(', ')}"
     end
   end
 
@@ -30,12 +45,13 @@ module Avatarable
 
     asset_host = ActionController::Base.asset_host
     use_asset_host = asset_host.present?
+    use_authentication = respond_to?(:public?) && !public?
 
     # Avatars for private and internal groups and projects require authentication to be viewed,
     # which means they can only be served by Rails, on the regular GitLab host.
     # If an asset host is configured, we need to return the fully qualified URL
     # instead of only the avatar path, so that Rails doesn't prefix it with the asset host.
-    if use_asset_host && respond_to?(:public?) && !public?
+    if use_asset_host && use_authentication
       use_asset_host = false
       only_path = false
     end
@@ -48,6 +64,39 @@ module Avatarable
       url_base << gitlab_config.relative_url_root
     end
 
-    url_base + avatar.url
+    url_base + avatar.local_url
+  end
+
+  # Path that is persisted in the tracking Upload model. Used to fetch the
+  # upload from the model.
+  def upload_paths(identifier)
+    avatar_mounter.blank_uploader.store_dirs.map { |store, path| File.join(path, identifier) }
+  end
+
+  private
+
+  def retrieve_upload_from_batch(identifier)
+    BatchLoader.for(identifier: identifier, model: self).batch(key: self.class) do |upload_params, loader, args|
+      model_class = args[:key]
+      paths = upload_params.flat_map do |params|
+        params[:model].upload_paths(params[:identifier])
+      end
+
+      Upload.where(uploader: AvatarUploader, path: paths).find_each do |upload|
+        model = model_class.instantiate('id' => upload.model_id)
+
+        loader.call({ model: model, identifier: File.basename(upload.path) }, upload)
+      end
+    end
+  end
+
+  def add_avatar_to_batch
+    return unless avatar_mounter
+
+    avatar_mounter.read_identifiers.each { |identifier| retrieve_upload_from_batch(identifier) }
+  end
+
+  def avatar_mounter
+    strong_memoize(:avatar_mounter) { _mounter(:avatar) }
   end
 end
diff --git a/app/models/concerns/awardable.rb b/app/models/concerns/awardable.rb
index d8394415362..fce37e7f78e 100644
--- a/app/models/concerns/awardable.rb
+++ b/app/models/concerns/awardable.rb
@@ -79,11 +79,7 @@ module Awardable
   end
 
   def user_can_award?(current_user, name)
-    if user_authored?(current_user)
-      !awardable_votes?(normalize_name(name))
-    else
-      true
-    end
+    awardable_by_user?(current_user, name) && Ability.allowed?(current_user, :award_emoji, self)
   end
 
   def user_authored?(current_user)
@@ -119,4 +115,12 @@ module Awardable
   def normalize_name(name)
     Gitlab::Emoji.normalize_emoji_name(name)
   end
+
+  def awardable_by_user?(current_user, name)
+    if user_authored?(current_user)
+      !awardable_votes?(normalize_name(name))
+    else
+      true
+    end
+  end
 end
diff --git a/app/models/concerns/batch_destroy_dependent_associations.rb b/app/models/concerns/batch_destroy_dependent_associations.rb
new file mode 100644
index 00000000000..353ee2e73d0
--- /dev/null
+++ b/app/models/concerns/batch_destroy_dependent_associations.rb
@@ -0,0 +1,28 @@
+# Provides a way to work around Rails issue where dependent objects are all
+# loaded into memory before destroyed: https://github.com/rails/rails/issues/22510.
+#
+# This concern allows an ActiveRecord module to destroy all its dependent
+# associations in batches. The idea is borrowed from https://github.com/thisismydesign/batch_dependent_associations.
+#
+# The differences here with that gem:
+#
+# 1. We allow excluding certain associations.
+# 2. We don't need to support delete_all since we can use the EachBatch concern.
+module BatchDestroyDependentAssociations
+  extend ActiveSupport::Concern
+
+  DEPENDENT_ASSOCIATIONS_BATCH_SIZE = 1000
+
+  def dependent_associations_to_destroy
+    self.class.reflect_on_all_associations(:has_many).select { |assoc| assoc.options[:dependent] == :destroy }
+  end
+
+  def destroy_dependent_associations_in_batches(exclude: [])
+    dependent_associations_to_destroy.each do |association|
+      next if exclude.include?(association.name)
+
+      # rubocop:disable GitlabSecurity/PublicSend
+      public_send(association.name).find_each(batch_size: DEPENDENT_ASSOCIATIONS_BATCH_SIZE, &:destroy)
+    end
+  end
+end
diff --git a/app/models/concerns/cache_markdown_field.rb b/app/models/concerns/cache_markdown_field.rb
index 4ae5dd8c677..9f6358cecbe 100644
--- a/app/models/concerns/cache_markdown_field.rb
+++ b/app/models/concerns/cache_markdown_field.rb
@@ -11,7 +11,9 @@ module CacheMarkdownField
   extend ActiveSupport::Concern
 
   # Increment this number every time the renderer changes its output
-  CACHE_VERSION = 3
+  CACHE_REDCARPET_VERSION         = 3
+  CACHE_COMMONMARK_VERSION_START  = 10
+  CACHE_COMMONMARK_VERSION        = 11
 
   # changes to these attributes cause the cache to be invalidates
   INVALIDATED_BY = %w[author project].freeze
@@ -49,12 +51,14 @@ module CacheMarkdownField
 
     # Always include a project key, or Banzai complains
     project = self.project if self.respond_to?(:project)
-    group = self.group if self.respond_to?(:group)
+    group   = self.group if self.respond_to?(:group)
     context = cached_markdown_fields[field].merge(project: project, group: group)
 
     # Banzai is less strict about authors, so don't always have an author key
     context[:author] = self.author if self.respond_to?(:author)
 
+    context[:markdown_engine] = markdown_engine
+
     context
   end
 
@@ -69,7 +73,7 @@ module CacheMarkdownField
         Banzai::Renderer.cacheless_render_field(self, markdown_field, options)
       ]
     end.to_h
-    updates['cached_markdown_version'] = CacheMarkdownField::CACHE_VERSION
+    updates['cached_markdown_version'] = latest_cached_markdown_version
 
     updates.each {|html_field, data| write_attribute(html_field, data) }
   end
@@ -90,7 +94,7 @@ module CacheMarkdownField
     markdown_changed = attribute_changed?(markdown_field) || false
     html_changed = attribute_changed?(html_field) || false
 
-    CacheMarkdownField::CACHE_VERSION == cached_markdown_version &&
+    latest_cached_markdown_version == cached_markdown_version &&
       (html_changed || markdown_changed == html_changed)
   end
 
@@ -109,6 +113,24 @@ module CacheMarkdownField
     __send__(cached_markdown_fields.html_field(markdown_field)) # rubocop:disable GitlabSecurity/PublicSend
   end
 
+  def latest_cached_markdown_version
+    return CacheMarkdownField::CACHE_COMMONMARK_VERSION unless cached_markdown_version
+
+    if cached_markdown_version < CacheMarkdownField::CACHE_COMMONMARK_VERSION_START
+      CacheMarkdownField::CACHE_REDCARPET_VERSION
+    else
+      CacheMarkdownField::CACHE_COMMONMARK_VERSION
+    end
+  end
+
+  def markdown_engine
+    if latest_cached_markdown_version < CacheMarkdownField::CACHE_COMMONMARK_VERSION_START
+      :redcarpet
+    else
+      :common_mark
+    end
+  end
+
   included do
     cattr_reader :cached_markdown_fields do
       FieldData.new
diff --git a/app/models/concerns/cacheable_attributes.rb b/app/models/concerns/cacheable_attributes.rb
new file mode 100644
index 00000000000..d58d7165969
--- /dev/null
+++ b/app/models/concerns/cacheable_attributes.rb
@@ -0,0 +1,74 @@
+module CacheableAttributes
+  extend ActiveSupport::Concern
+
+  included do
+    after_commit { self.class.expire }
+  end
+
+  class_methods do
+    def cache_key
+      "#{name}:#{Gitlab::VERSION}:#{Gitlab.migrations_hash}:#{Rails.version}".freeze
+    end
+
+    # Can be overriden
+    def current_without_cache
+      last
+    end
+
+    # Can be overriden
+    def defaults
+      {}
+    end
+
+    def build_from_defaults(attributes = {})
+      new(defaults.merge(attributes))
+    end
+
+    def cached
+      if RequestStore.active?
+        RequestStore[:"#{name}_cached_attributes"] ||= retrieve_from_cache
+      else
+        retrieve_from_cache
+      end
+    end
+
+    def retrieve_from_cache
+      record = Rails.cache.read(cache_key)
+      ensure_cache_setup if record.present?
+
+      record
+    end
+
+    def current
+      cached_record = cached
+      return cached_record if cached_record.present?
+
+      current_without_cache.tap { |current_record| current_record&.cache! }
+    rescue => e
+      if Rails.env.production?
+        Rails.logger.warn("Cached record for #{name} couldn't be loaded, falling back to uncached record: #{e}")
+      else
+        raise e
+      end
+      # Fall back to an uncached value if there are any problems (e.g. Redis down)
+      current_without_cache
+    end
+
+    def expire
+      Rails.cache.delete(cache_key)
+    rescue
+      # Gracefully handle when Redis is not available. For example,
+      # omnibus may fail here during gitlab:assets:compile.
+    end
+
+    def ensure_cache_setup
+      # This is a workaround for a Rails bug that causes attribute methods not
+      # to be loaded when read from cache: https://github.com/rails/rails/issues/27348
+      define_attribute_methods
+    end
+  end
+
+  def cache!
+    Rails.cache.write(self.class.cache_key, self)
+  end
+end
diff --git a/app/models/concerns/chronic_duration_attribute.rb b/app/models/concerns/chronic_duration_attribute.rb
new file mode 100644
index 00000000000..593a9b3d71d
--- /dev/null
+++ b/app/models/concerns/chronic_duration_attribute.rb
@@ -0,0 +1,39 @@
+module ChronicDurationAttribute
+  extend ActiveSupport::Concern
+
+  class_methods do
+    def chronic_duration_attr_reader(virtual_attribute, source_attribute)
+      define_method(virtual_attribute) do
+        chronic_duration_attributes[virtual_attribute] || output_chronic_duration_attribute(source_attribute)
+      end
+    end
+
+    def chronic_duration_attr_writer(virtual_attribute, source_attribute, parameters = {})
+      chronic_duration_attr_reader(virtual_attribute, source_attribute)
+
+      define_method("#{virtual_attribute}=") do |value|
+        chronic_duration_attributes[virtual_attribute] = value.presence || parameters[:default].presence.to_s
+
+        begin
+          new_value = value.present? ? ChronicDuration.parse(value).to_i : parameters[:default].presence
+          assign_attributes(source_attribute => new_value)
+        rescue ChronicDuration::DurationParseError
+          # ignore error as it will be caught by validation
+        end
+      end
+
+      validates virtual_attribute, allow_nil: true, duration: true
+    end
+
+    alias_method :chronic_duration_attr, :chronic_duration_attr_writer
+  end
+
+  def chronic_duration_attributes
+    @chronic_duration_attributes ||= {}
+  end
+
+  def output_chronic_duration_attribute(source_attribute)
+    value = attributes[source_attribute.to_s]
+    ChronicDuration.output(value, format: :short) if value
+  end
+end
diff --git a/app/models/concerns/deployment_platform.rb b/app/models/concerns/deployment_platform.rb
index faa94204e33..52851b3d0b2 100644
--- a/app/models/concerns/deployment_platform.rb
+++ b/app/models/concerns/deployment_platform.rb
@@ -1,16 +1,24 @@
 module DeploymentPlatform
-  # EE would override this and utilize the extra argument
+  # EE would override this and utilize environment argument
+  # rubocop:disable Gitlab/ModuleWithInstanceVariables
   def deployment_platform(environment: nil)
-    @deployment_platform ||=
-      find_cluster_platform_kubernetes ||
-      find_kubernetes_service_integration ||
-      build_cluster_and_deployment_platform
+    @deployment_platform ||= {}
+
+    @deployment_platform[environment] ||= find_deployment_platform(environment)
   end
 
   private
 
-  def find_cluster_platform_kubernetes
-    clusters.find_by(enabled: true)&.platform_kubernetes
+  def find_deployment_platform(environment)
+    find_cluster_platform_kubernetes(environment: environment) ||
+      find_kubernetes_service_integration ||
+      build_cluster_and_deployment_platform
+  end
+
+  # EE would override this and utilize environment argument
+  def find_cluster_platform_kubernetes(environment: nil)
+    clusters.enabled.default_environment
+      .last&.platform_kubernetes
   end
 
   def find_kubernetes_service_integration
diff --git a/app/models/concerns/diff_file.rb b/app/models/concerns/diff_file.rb
new file mode 100644
index 00000000000..72332072012
--- /dev/null
+++ b/app/models/concerns/diff_file.rb
@@ -0,0 +1,9 @@
+module DiffFile
+  extend ActiveSupport::Concern
+
+  def to_hash
+    keys = Gitlab::Git::Diff::SERIALIZE_KEYS - [:diff]
+
+    as_json(only: keys).merge(diff: diff).with_indifferent_access
+  end
+end
diff --git a/app/models/concerns/enum_with_nil.rb b/app/models/concerns/enum_with_nil.rb
new file mode 100644
index 00000000000..6b37903da20
--- /dev/null
+++ b/app/models/concerns/enum_with_nil.rb
@@ -0,0 +1,33 @@
+module EnumWithNil
+  extend ActiveSupport::Concern
+
+  included do
+    def self.enum_with_nil(definitions)
+      # use original `enum` to auto-define all methods
+      enum(definitions)
+
+      # override auto-defined methods only for the
+      # key which uses nil value
+      definitions.each do |name, values|
+        next unless key_with_nil = values.key(nil)
+
+        # E.g. for enum_with_nil failure_reason: { unknown_failure: nil }
+        # this overrides auto-generated method `unknown_failure?`
+        define_method("#{key_with_nil}?") do
+          Gitlab.rails5? ? self[name].nil? : super()
+        end
+
+        # E.g. for enum_with_nil failure_reason: { unknown_failure: nil }
+        # this overrides auto-generated method `failure_reason`
+        define_method(name) do
+          orig = super()
+
+          return orig unless Gitlab.rails5?
+          return orig unless orig.nil?
+
+          self.class.public_send(name.to_s.pluralize).key(nil) # rubocop:disable GitlabSecurity/PublicSend
+        end
+      end
+    end
+  end
+end
diff --git a/app/models/concerns/fast_destroy_all.rb b/app/models/concerns/fast_destroy_all.rb
new file mode 100644
index 00000000000..7ea042c6742
--- /dev/null
+++ b/app/models/concerns/fast_destroy_all.rb
@@ -0,0 +1,91 @@
+##
+# This module is for replacing `dependent: :destroy` and `before_destroy` hooks.
+#
+# In general, `destroy_all` is inefficient because it calls each callback with `DELETE` queries i.e. O(n), whereas,
+# `delete_all` is efficient as it deletes all rows with a single `DELETE` query.
+#
+# It's better to use `delete_all` as our best practice, however,
+# if external data (e.g. ObjectStorage, FileStorage or Redis) are assosiated with database records,
+# it is difficult to accomplish it.
+#
+# This module defines a format to use `delete_all` and delete associated external data.
+# Here is an exmaple
+#
+# Situation
+# - `Project` has many `Ci::BuildTraceChunk` through `Ci::Build`
+# - `Ci::BuildTraceChunk` stores associated data in Redis, so it relies on `dependent: :destroy` and `before_destroy` for the deletion
+#
+# How to use
+# - Define `use_fast_destroy :build_trace_chunks` in `Project` model.
+# - Define `begin_fast_destroy` and `finalize_fast_destroy(params)` in `Ci::BuildTraceChunk` model.
+# - Use `fast_destroy_all` instead of `destroy` and `destroy_all`
+# - Remove `dependent: :destroy` and `before_destroy` as it's no longer need
+#
+# Expectation
+# - When a project is `destroy`ed, the associated trace_chunks will be deleted by `delete_all`,
+#   and the associated data will be removed, too.
+# - When `fast_destroy_all` is called, it also performns as same.
+module FastDestroyAll
+  extend ActiveSupport::Concern
+
+  ForbiddenActionError = Class.new(StandardError)
+
+  included do
+    before_destroy do
+      raise ForbiddenActionError, '`destroy` and `destroy_all` are forbbiden. Please use `fast_destroy_all`'
+    end
+  end
+
+  class_methods do
+    ##
+    # This method delete rows and associated external data efficiently
+    #
+    # This method can replace `destroy` and `destroy_all` without having `after_destroy` hook
+    def fast_destroy_all
+      params = begin_fast_destroy
+
+      delete_all
+
+      finalize_fast_destroy(params)
+    end
+
+    ##
+    # This method returns identifiers to delete associated external data (e.g. file paths, redis keys)
+    #
+    # This method must be defined in fast destroyable model
+    def begin_fast_destroy
+      raise NotImplementedError
+    end
+
+    ##
+    # This method deletes associated external data with the identifiers returned by `begin_fast_destroy`
+    #
+    # This method must be defined in fast destroyable model
+    def finalize_fast_destroy(params)
+      raise NotImplementedError
+    end
+  end
+
+  module Helpers
+    extend ActiveSupport::Concern
+
+    class_methods do
+      ##
+      # This method is to be defined on models which have fast destroyable models as children,
+      # and let us avoid to use `dependent: :destroy` hook
+      def use_fast_destroy(relation)
+        before_destroy(prepend: true) do
+          perform_fast_destroy(public_send(relation)) # rubocop:disable GitlabSecurity/PublicSend
+        end
+      end
+    end
+
+    def perform_fast_destroy(subject)
+      params = subject.begin_fast_destroy
+
+      run_after_commit do
+        subject.finalize_fast_destroy(params)
+      end
+    end
+  end
+end
diff --git a/app/models/concerns/group_descendant.rb b/app/models/concerns/group_descendant.rb
index 01957da0bf3..261ace57a17 100644
--- a/app/models/concerns/group_descendant.rb
+++ b/app/models/concerns/group_descendant.rb
@@ -37,7 +37,20 @@ module GroupDescendant
     parent ||= preloaded.detect { |possible_parent| possible_parent.is_a?(Group) && possible_parent.id == child.parent_id }
 
     if parent.nil? && !child.parent_id.nil?
-      raise ArgumentError.new('parent was not preloaded')
+      parent = child.parent
+
+      exception = ArgumentError.new <<~MSG
+        parent: [GroupDescendant: #{parent.inspect}] was not preloaded for [#{child.inspect}]")
+        This error is not user facing, but causes a +1 query.
+      MSG
+      extras = {
+        parent: parent,
+        child: child,
+        preloaded: preloaded.map(&:full_path)
+      }
+      issue_url = 'https://gitlab.com/gitlab-org/gitlab-ce/issues/40785'
+
+      Gitlab::Sentry.track_exception(exception, issue_url: issue_url, extra: extras)
     end
 
     if parent.nil? && hierarchy_top.present?
diff --git a/app/models/concerns/has_status.rb b/app/models/concerns/has_status.rb
index 7c3ed96bc28..72c236a0fc7 100644
--- a/app/models/concerns/has_status.rb
+++ b/app/models/concerns/has_status.rb
@@ -11,6 +11,8 @@ module HasStatus
   STATUSES_ENUM = { created: 0, pending: 1, running: 2, success: 3,
                     failed: 4, canceled: 5, skipped: 6, manual: 7 }.freeze
 
+  UnknownStatusError = Class.new(StandardError)
+
   class_methods do
     def status_sql
       scope_relevant = respond_to?(:exclude_ignored) ? exclude_ignored : all
diff --git a/app/models/concerns/has_variable.rb b/app/models/concerns/has_variable.rb
index 8a241e4374a..c8e20c0ab81 100644
--- a/app/models/concerns/has_variable.rb
+++ b/app/models/concerns/has_variable.rb
@@ -13,7 +13,7 @@ module HasVariable
     attr_encrypted :value,
        mode: :per_attribute_iv_and_salt,
        insecure_mode: true,
-       key: Gitlab::Application.secrets.db_key_base,
+       key: Settings.attr_encrypted_db_key_base,
        algorithm: 'aes-256-cbc'
 
     def key=(new_key)
diff --git a/app/models/concerns/iid_routes.rb b/app/models/concerns/iid_routes.rb
new file mode 100644
index 00000000000..246748cf52c
--- /dev/null
+++ b/app/models/concerns/iid_routes.rb
@@ -0,0 +1,9 @@
+module IidRoutes
+  ##
+  # This automagically enforces all related routes to use `iid` instead of `id`
+  # If you want to use `iid` for some routes and `id` for other routes, this module should not to be included,
+  # instead you should define `iid` or `id` explictly at each route generators. e.g. pipeline_path(project.id, pipeline.iid)
+  def to_param
+    iid.to_s
+  end
+end
diff --git a/app/models/concerns/issuable.rb b/app/models/concerns/issuable.rb
index 5a566f3ac02..b93c1145f82 100644
--- a/app/models/concerns/issuable.rb
+++ b/app/models/concerns/issuable.rb
@@ -97,8 +97,6 @@ module Issuable
 
     strip_attributes :title
 
-    after_save :ensure_metrics, unless: :imported?
-
     # 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?
@@ -109,6 +107,10 @@ module Issuable
       false
     end
 
+    def etag_caching_enabled?
+      false
+    end
+
     def has_multiple_assignees?
       assignees.count > 1
     end
@@ -137,7 +139,7 @@ module Issuable
       fuzzy_search(query, [:title, :description])
     end
 
-    def sort(method, excluded_labels: [])
+    def sort_by_attribute(method, excluded_labels: [])
       sorted =
         case method.to_s
         when 'downvotes_desc'     then order_downvotes_desc
diff --git a/app/models/concerns/milestoneish.rb b/app/models/concerns/milestoneish.rb
index caf8afa97f9..967fd9c5eea 100644
--- a/app/models/concerns/milestoneish.rb
+++ b/app/models/concerns/milestoneish.rb
@@ -45,11 +45,11 @@ module Milestoneish
   end
 
   def sorted_issues(user)
-    issues_visible_to_user(user).preload_associations.sort('label_priority')
+    issues_visible_to_user(user).preload_associations.sort_by_attribute('label_priority')
   end
 
   def sorted_merge_requests
-    merge_requests.sort('label_priority')
+    merge_requests.sort_by_attribute('label_priority')
   end
 
   def upcoming?
@@ -102,14 +102,14 @@ module Milestoneish
     Gitlab::TimeTrackingFormatter.output(total_issue_time_estimate)
   end
 
-  private
-
   def count_issues_by_state(user)
     memoize_per_user(user, :count_issues_by_state) do
       issues_visible_to_user(user).reorder(nil).group(:state).count
     end
   end
 
+  private
+
   def memoize_per_user(user, method_name)
     memoized_users[method_name][user&.id] ||= yield
   end
diff --git a/app/models/concerns/nonatomic_internal_id.rb b/app/models/concerns/nonatomic_internal_id.rb
deleted file mode 100644
index 9d0c9b8512f..00000000000
--- a/app/models/concerns/nonatomic_internal_id.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-module NonatomicInternalId
-  extend ActiveSupport::Concern
-
-  included do
-    validate :set_iid, on: :create
-    validates :iid, presence: true, numericality: true
-  end
-
-  def set_iid
-    if iid.blank?
-      parent = project || group
-      records = parent.public_send(self.class.name.tableize) # rubocop:disable GitlabSecurity/PublicSend
-      max_iid = records.maximum(:iid)
-
-      self.iid = max_iid.to_i + 1
-    end
-  end
-
-  def to_param
-    iid.to_s
-  end
-end
diff --git a/app/models/concerns/participable.rb b/app/models/concerns/participable.rb
index e48bc0be410..01b1ef9f82c 100644
--- a/app/models/concerns/participable.rb
+++ b/app/models/concerns/participable.rb
@@ -98,6 +98,10 @@ module Participable
 
     participants.merge(ext.users)
 
+    filter_by_ability(participants)
+  end
+
+  def filter_by_ability(participants)
     case self
     when PersonalSnippet
       Ability.users_that_can_read_personal_snippet(participants.to_a, self)
diff --git a/app/models/concerns/presentable.rb b/app/models/concerns/presentable.rb
index 7b33b837004..bc4fbd19a02 100644
--- a/app/models/concerns/presentable.rb
+++ b/app/models/concerns/presentable.rb
@@ -1,4 +1,12 @@
 module Presentable
+  extend ActiveSupport::Concern
+
+  class_methods do
+    def present(attributes)
+      all.map { |klass_object| klass_object.present(attributes) }
+    end
+  end
+
   def present(**attributes)
     Gitlab::View::Presenter::Factory
       .new(self, attributes)
diff --git a/app/models/concerns/project_features_compatibility.rb b/app/models/concerns/project_features_compatibility.rb
index b3fec99c816..1f7d78a2efe 100644
--- a/app/models/concerns/project_features_compatibility.rb
+++ b/app/models/concerns/project_features_compatibility.rb
@@ -1,4 +1,4 @@
-# Makes api V3 compatible with old project features permissions methods
+# Makes api V4 compatible with old project features permissions methods
 #
 # After migrating issues_enabled merge_requests_enabled builds_enabled snippets_enabled and wiki_enabled
 # fields to a new table "project_features", support for the old fields is still needed in the API.
diff --git a/app/models/concerns/protected_ref.rb b/app/models/concerns/protected_ref.rb
index 454374121f3..94eef4ff7cd 100644
--- a/app/models/concerns/protected_ref.rb
+++ b/app/models/concerns/protected_ref.rb
@@ -31,7 +31,7 @@ module ProtectedRef
       end
     end
 
-    def protected_ref_accessible_to?(ref, user, action:, protected_refs: nil)
+    def protected_ref_accessible_to?(ref, user, project:, action:, protected_refs: nil)
       access_levels_for_ref(ref, action: action, protected_refs: protected_refs).any? do |access_level|
         access_level.check_access(user)
       end
diff --git a/app/models/concerns/protected_ref_access.rb b/app/models/concerns/protected_ref_access.rb
index bfda5b1678b..e3a7f2d5498 100644
--- a/app/models/concerns/protected_ref_access.rb
+++ b/app/models/concerns/protected_ref_access.rb
@@ -8,8 +8,8 @@ module ProtectedRefAccess
   ].freeze
 
   HUMAN_ACCESS_LEVELS = {
-    Gitlab::Access::MASTER => "Masters".freeze,
-    Gitlab::Access::DEVELOPER => "Developers + Masters".freeze,
+    Gitlab::Access::MASTER => "Maintainers".freeze,
+    Gitlab::Access::DEVELOPER => "Developers + Maintainers".freeze,
     Gitlab::Access::NO_ACCESS => "No one".freeze
   }.freeze
 
diff --git a/app/models/concerns/reactive_caching.rb b/app/models/concerns/reactive_caching.rb
index 2589215ad19..be0a5b49012 100644
--- a/app/models/concerns/reactive_caching.rb
+++ b/app/models/concerns/reactive_caching.rb
@@ -60,22 +60,26 @@ module ReactiveCaching
     end
 
     def with_reactive_cache(*args, &blk)
-      within_reactive_cache_lifetime(*args) do
+      bootstrap = !within_reactive_cache_lifetime?(*args)
+      Rails.cache.write(alive_reactive_cache_key(*args), true, expires_in: self.class.reactive_cache_lifetime)
+
+      if bootstrap
+        ReactiveCachingWorker.perform_async(self.class, id, *args)
+        nil
+      else
         data = Rails.cache.read(full_reactive_cache_key(*args))
         yield data if data.present?
       end
-    ensure
-      Rails.cache.write(alive_reactive_cache_key(*args), true, expires_in: self.class.reactive_cache_lifetime)
-      ReactiveCachingWorker.perform_async(self.class, id, *args)
     end
 
     def clear_reactive_cache!(*args)
       Rails.cache.delete(full_reactive_cache_key(*args))
+      Rails.cache.delete(alive_reactive_cache_key(*args))
     end
 
     def exclusively_update_reactive_cache!(*args)
       locking_reactive_cache(*args) do
-        within_reactive_cache_lifetime(*args) do
+        if within_reactive_cache_lifetime?(*args)
           enqueuing_update(*args) do
             value = calculate_reactive_cache(*args)
             Rails.cache.write(full_reactive_cache_key(*args), value)
@@ -105,8 +109,8 @@ module ReactiveCaching
       Gitlab::ExclusiveLease.cancel(full_reactive_cache_key(*args), uuid)
     end
 
-    def within_reactive_cache_lifetime(*args)
-      yield if Rails.cache.read(alive_reactive_cache_key(*args))
+    def within_reactive_cache_lifetime?(*args)
+      !!Rails.cache.read(alive_reactive_cache_key(*args))
     end
 
     def enqueuing_update(*args)
diff --git a/app/models/concerns/redis_cacheable.rb b/app/models/concerns/redis_cacheable.rb
index b889f4202dc..3bdc1330d23 100644
--- a/app/models/concerns/redis_cacheable.rb
+++ b/app/models/concerns/redis_cacheable.rb
@@ -7,7 +7,11 @@ module RedisCacheable
   class_methods do
     def cached_attr_reader(*attributes)
       attributes.each do |attribute|
-        define_method("#{attribute}") do
+        define_method(attribute) do
+          unless self.has_attribute?(attribute)
+            raise ArgumentError, "`cached_attr_reader` requires the #{self.class.name}\##{attribute} attribute to have a database column"
+          end
+
           cached_attribute(attribute) || read_attribute(attribute)
         end
       end
@@ -15,13 +19,16 @@ module RedisCacheable
   end
 
   def cached_attribute(attribute)
-    (cached_attributes || {})[attribute]
+    cached_value = (cached_attributes || {})[attribute]
+    cast_value_from_cache(attribute, cached_value) if cached_value
   end
 
   def cache_attributes(values)
     Gitlab::Redis::SharedState.with do |redis|
       redis.set(cache_attribute_key, values.to_json, ex: CACHED_ATTRIBUTES_EXPIRY_TIME)
     end
+
+    clear_memoization(:cached_attributes)
   end
 
   private
@@ -38,4 +45,12 @@ module RedisCacheable
       end
     end
   end
+
+  def cast_value_from_cache(attribute, value)
+    if Gitlab.rails5?
+      self.class.type_for_attribute(attribute.to_s).cast(value)
+    else
+      self.class.column_for_attribute(attribute).type_cast_from_database(value)
+    end
+  end
 end
diff --git a/app/models/concerns/resolvable_note.rb b/app/models/concerns/resolvable_note.rb
index 668c5a079e3..4a0f8b92b3a 100644
--- a/app/models/concerns/resolvable_note.rb
+++ b/app/models/concerns/resolvable_note.rb
@@ -32,7 +32,7 @@ module ResolvableNote
 
   # Keep this method in sync with the `potentially_resolvable` scope
   def potentially_resolvable?
-    RESOLVABLE_TYPES.include?(self.class.name) && noteable.supports_resolvable_notes?
+    RESOLVABLE_TYPES.include?(self.class.name) && noteable&.supports_resolvable_notes?
   end
 
   # Keep this method in sync with the `resolvable` scope
diff --git a/app/models/concerns/routable.rb b/app/models/concerns/routable.rb
index dfd7d94450b..0176a12a131 100644
--- a/app/models/concerns/routable.rb
+++ b/app/models/concerns/routable.rb
@@ -4,7 +4,9 @@ module Routable
   extend ActiveSupport::Concern
 
   included do
-    has_one :route, as: :source, autosave: true, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
+    # Remove `inverse_of: source` when upgraded to rails 5.2
+    # See https://github.com/rails/rails/pull/28808
+    has_one :route, as: :source, autosave: true, dependent: :destroy, inverse_of: :source # rubocop:disable Cop/ActiveRecordDependent
     has_many :redirect_routes, as: :source, autosave: true, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
 
     validates :route, presence: true
@@ -102,7 +104,7 @@ module Routable
   # the route. Caching this per request ensures that even if we have multiple instances,
   # we will not have to duplicate work, avoiding N+1 queries in some cases.
   def full_path
-    return uncached_full_path unless RequestStore.active?
+    return uncached_full_path unless RequestStore.active? && persisted?
 
     RequestStore[full_path_key] ||= uncached_full_path
   end
@@ -124,6 +126,11 @@ module Routable
     end
   end
 
+  # Group would override this to check from association
+  def owned_by?(user)
+    owner == user
+  end
+
   private
 
   def set_path_errors
diff --git a/app/models/concerns/sha_attribute.rb b/app/models/concerns/sha_attribute.rb
index 703a72c355c..3796737427a 100644
--- a/app/models/concerns/sha_attribute.rb
+++ b/app/models/concerns/sha_attribute.rb
@@ -4,18 +4,34 @@ module ShaAttribute
   module ClassMethods
     def sha_attribute(name)
       return if ENV['STATIC_VERIFICATION']
-      return unless table_exists?
+
+      validate_binary_column_exists!(name) unless Rails.env.production?
+
+      attribute(name, Gitlab::Database::ShaAttribute.new)
+    end
+
+    # This only gets executed in non-production environments as an additional check to ensure
+    # the column is the correct type.  In production it should behave like any other attribute.
+    # See https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/5502 for more discussion
+    def validate_binary_column_exists!(name)
+      unless table_exists?
+        warn "WARNING: sha_attribute #{name.inspect} is invalid since the table doesn't exist - you may need to run database migrations"
+        return
+      end
 
       column = columns.find { |c| c.name == name.to_s }
 
-      # In case the table doesn't exist we won't be able to find the column,
-      # thus we will only check the type if the column is present.
-      if column && column.type != :binary
-        raise ArgumentError,
-          "sha_attribute #{name.inspect} is invalid since the column type is not :binary"
+      unless column
+        warn "WARNING: sha_attribute #{name.inspect} is invalid since the column doesn't exist - you may need to run database migrations"
+        return
       end
 
-      attribute(name, Gitlab::Database::ShaAttribute.new)
+      unless column.type == :binary
+        raise ArgumentError.new("sha_attribute #{name.inspect} is invalid since the column type is not :binary")
+      end
+    rescue => error
+      Gitlab::AppLogger.error "ShaAttribute initialization: #{error.message}"
+      raise
     end
   end
 end
diff --git a/app/models/concerns/sortable.rb b/app/models/concerns/sortable.rb
index cefa5c13c5f..cb76ae971d4 100644
--- a/app/models/concerns/sortable.rb
+++ b/app/models/concerns/sortable.rb
@@ -12,8 +12,8 @@ module Sortable
     scope :order_created_asc, -> { reorder(created_at: :asc) }
     scope :order_updated_desc, -> { reorder(updated_at: :desc) }
     scope :order_updated_asc, -> { reorder(updated_at: :asc) }
-    scope :order_name_asc, -> { reorder(name: :asc) }
-    scope :order_name_desc, -> { reorder(name: :desc) }
+    scope :order_name_asc, -> { reorder(Arel::Nodes::Ascending.new(arel_table[:name].lower)) }
+    scope :order_name_desc, -> { reorder(Arel::Nodes::Descending.new(arel_table[:name].lower)) }
   end
 
   module ClassMethods
diff --git a/app/models/concerns/storage/legacy_namespace.rb b/app/models/concerns/storage/legacy_namespace.rb
index f05e606995d..f66bdd529f1 100644
--- a/app/models/concerns/storage/legacy_namespace.rb
+++ b/app/models/concerns/storage/legacy_namespace.rb
@@ -45,25 +45,25 @@ module Storage
 
     # Hooks
 
-    # Save the storage paths before the projects are destroyed to use them on after destroy
+    # Save the storages before the projects are destroyed to use them on after destroy
     def prepare_for_destroy
-      old_repository_storage_paths
+      old_repository_storages
     end
 
     private
 
     def move_repositories
-      # Move the namespace directory in all storage paths used by member projects
-      repository_storage_paths.each do |repository_storage_path|
+      # Move the namespace directory in all storages used by member projects
+      repository_storages.each do |repository_storage|
         # Ensure old directory exists before moving it
-        gitlab_shell.add_namespace(repository_storage_path, full_path_was)
+        gitlab_shell.add_namespace(repository_storage, full_path_was)
 
         # Ensure new directory exists before moving it (if there's a parent)
-        gitlab_shell.add_namespace(repository_storage_path, parent.full_path) if parent
+        gitlab_shell.add_namespace(repository_storage, parent.full_path) if parent
 
-        unless gitlab_shell.mv_namespace(repository_storage_path, full_path_was, full_path)
+        unless gitlab_shell.mv_namespace(repository_storage, full_path_was, full_path)
 
-          Rails.logger.error "Exception moving path #{repository_storage_path} from #{full_path_was} to #{full_path}"
+          Rails.logger.error "Exception moving path #{repository_storage} from #{full_path_was} to #{full_path}"
 
           # if we cannot move namespace directory we should rollback
           # db changes in order to prevent out of sync between db and fs
@@ -72,33 +72,33 @@ module Storage
       end
     end
 
-    def old_repository_storage_paths
-      @old_repository_storage_paths ||= repository_storage_paths
+    def old_repository_storages
+      @old_repository_storage_paths ||= repository_storages
     end
 
-    def repository_storage_paths
+    def repository_storages
       # We need to get the storage paths for all the projects, even the ones that are
       # pending delete. Unscoping also get rids of the default order, which causes
       # problems with SELECT DISTINCT.
       Project.unscoped do
-        all_projects.select('distinct(repository_storage)').to_a.map(&:repository_storage_path)
+        all_projects.select('distinct(repository_storage)').to_a.map(&:repository_storage)
       end
     end
 
     def rm_dir
       # Remove the namespace directory in all storages paths used by member projects
-      old_repository_storage_paths.each do |repository_storage_path|
+      old_repository_storages.each do |repository_storage|
         # Move namespace directory into trash.
         # We will remove it later async
         new_path = "#{full_path}+#{id}+deleted"
 
-        if gitlab_shell.mv_namespace(repository_storage_path, full_path, new_path)
+        if gitlab_shell.mv_namespace(repository_storage, full_path, new_path)
           Gitlab::AppLogger.info %Q(Namespace directory "#{full_path}" moved to "#{new_path}")
 
           # Remove namespace directroy async with delay so
           # GitLab has time to remove all projects first
           run_after_commit do
-            GitlabShellWorker.perform_in(5.minutes, :rm_namespace, repository_storage_path, new_path)
+            GitlabShellWorker.perform_in(5.minutes, :rm_namespace, repository_storage, new_path)
           end
         end
       end
diff --git a/app/models/concerns/time_trackable.rb b/app/models/concerns/time_trackable.rb
index 5911b56c34c..0fc321c52bc 100644
--- a/app/models/concerns/time_trackable.rb
+++ b/app/models/concerns/time_trackable.rb
@@ -51,6 +51,10 @@ module TimeTrackable
     Gitlab::TimeTrackingFormatter.output(time_estimate)
   end
 
+  def time_estimate=(val)
+    val.is_a?(Integer) ? super([val, Gitlab::Database::MAX_INT_VALUE].min) : super(val)
+  end
+
   private
 
   def reset_spent_time
diff --git a/app/models/concerns/uniquify.rb b/app/models/concerns/uniquify.rb
index a7fe5951b6e..549a76da20e 100644
--- a/app/models/concerns/uniquify.rb
+++ b/app/models/concerns/uniquify.rb
@@ -1,13 +1,21 @@
+# Uniquify
+#
+# Return a version of the given 'base' string that is unique
+# by appending a counter to it. Uniqueness is determined by
+# repeated calls to the passed block.
+#
+# You can pass an initial value for the counter, if not given
+# counting starts from 1.
+#
+# If `base` is a function/proc, we expect that calling it with a
+# candidate counter returns a string to test/return.
 class Uniquify
-  # Return a version of the given 'base' string that is unique
-  # by appending a counter to it. Uniqueness is determined by
-  # repeated calls to the passed block.
-  #
-  # If `base` is a function/proc, we expect that calling it with a
-  # candidate counter returns a string to test/return.
+  def initialize(counter = nil)
+    @counter = counter
+  end
+
   def string(base)
     @base = base
-    @counter = nil
 
     increment_counter! while yield(base_string)
     base_string
diff --git a/app/models/concerns/with_uploads.rb b/app/models/concerns/with_uploads.rb
new file mode 100644
index 00000000000..4245d083a49
--- /dev/null
+++ b/app/models/concerns/with_uploads.rb
@@ -0,0 +1,43 @@
+# Mounted uploaders are destroyed by carrierwave's after_commit
+# hook. This hook fetches upload location (local vs remote) from
+# Upload model. So it's neccessary to make sure that during that
+# after_commit hook model's associated uploads are not deleted yet.
+# IOW we can not use dependent: :destroy :
+# has_many :uploads, as: :model, dependent: :destroy
+#
+# And because not-mounted uploads require presence of upload's
+# object model when destroying them (FileUploader's `build_upload` method
+# references `model` on delete), we can not use after_commit hook for these
+# uploads.
+#
+# Instead FileUploads are destroyed in before_destroy hook and remaining uploads
+# are destroyed by the carrierwave's after_commit hook.
+
+module WithUploads
+  extend ActiveSupport::Concern
+
+  # Currently there is no simple way how to select only not-mounted
+  # uploads, it should be all FileUploaders so we select them by
+  # `uploader` class
+  FILE_UPLOADERS = %w(PersonalFileUploader NamespaceFileUploader FileUploader).freeze
+
+  included do
+    has_many :uploads, as: :model
+
+    before_destroy :destroy_file_uploads
+  end
+
+  # mounted uploads are deleted in carrierwave's after_commit hook,
+  # but FileUploaders which are not mounted must be deleted explicitly and
+  # it can not be done in after_commit because FileUploader requires loads
+  # associated model on destroy (which is already deleted in after_commit)
+  def destroy_file_uploads
+    self.uploads.where(uploader: FILE_UPLOADERS).find_each do |upload|
+      upload.destroy
+    end
+  end
+
+  def retrieve_upload(_identifier, paths)
+    uploads.find_by(path: paths)
+  end
+end
diff --git a/app/models/deploy_key.rb b/app/models/deploy_key.rb
index c2e0a5fa126..89a74b7dcb1 100644
--- a/app/models/deploy_key.rb
+++ b/app/models/deploy_key.rb
@@ -27,6 +27,10 @@ class DeployKey < Key
     self.private?
   end
 
+  def user
+    super || User.ghost
+  end
+
   def has_access_to?(project)
     deploy_keys_project_for(project).present?
   end
diff --git a/app/models/deploy_token.rb b/app/models/deploy_token.rb
new file mode 100644
index 00000000000..5082dc45368
--- /dev/null
+++ b/app/models/deploy_token.rb
@@ -0,0 +1,66 @@
+class DeployToken < ActiveRecord::Base
+  include Expirable
+  include TokenAuthenticatable
+  add_authentication_token_field :token
+
+  AVAILABLE_SCOPES = %i(read_repository read_registry).freeze
+  GITLAB_DEPLOY_TOKEN_NAME = 'gitlab-deploy-token'.freeze
+
+  default_value_for(:expires_at) { Forever.date }
+
+  has_many :project_deploy_tokens, inverse_of: :deploy_token
+  has_many :projects, through: :project_deploy_tokens
+
+  validate :ensure_at_least_one_scope
+  before_save :ensure_token
+
+  accepts_nested_attributes_for :project_deploy_tokens
+
+  scope :active, -> { where("revoked = false AND expires_at >= NOW()") }
+
+  def self.gitlab_deploy_token
+    active.find_by(name: GITLAB_DEPLOY_TOKEN_NAME)
+  end
+
+  def revoke!
+    update!(revoked: true)
+  end
+
+  def active?
+    !revoked
+  end
+
+  def scopes
+    AVAILABLE_SCOPES.select { |token_scope| read_attribute(token_scope) }
+  end
+
+  def username
+    "gitlab+deploy-token-#{id}"
+  end
+
+  def has_access_to?(requested_project)
+    active? && project == requested_project
+  end
+
+  # This is temporal. Currently we limit DeployToken
+  # to a single project, later we're going to extend
+  # that to be for multiple projects and namespaces.
+  def project
+    projects.first
+  end
+
+  def expires_at
+    expires_at = read_attribute(:expires_at)
+    expires_at != Forever.date ? expires_at : nil
+  end
+
+  def expires_at=(value)
+    write_attribute(:expires_at, value.presence || Forever.date)
+  end
+
+  private
+
+  def ensure_at_least_one_scope
+    errors.add(:base, "Scopes can't be blank") unless read_repository || read_registry
+  end
+end
diff --git a/app/models/deployment.rb b/app/models/deployment.rb
index e18ea8bfea4..ac86e9e8de0 100644
--- a/app/models/deployment.rb
+++ b/app/models/deployment.rb
@@ -1,11 +1,14 @@
 class Deployment < ActiveRecord::Base
-  include NonatomicInternalId
+  include AtomicInternalId
+  include IidRoutes
 
   belongs_to :project, required: true
   belongs_to :environment, required: true
   belongs_to :user
   belongs_to :deployable, polymorphic: true # rubocop:disable Cop/PolymorphicAssociations
 
+  has_internal_id :iid, scope: :project, init: ->(s) { s&.project&.deployments&.maximum(:iid) }
+
   validates :sha, presence: true
   validates :ref, presence: true
 
diff --git a/app/models/diff_note.rb b/app/models/diff_note.rb
index 15122cbc693..d752d5bcdee 100644
--- a/app/models/diff_note.rb
+++ b/app/models/diff_note.rb
@@ -3,6 +3,7 @@
 # A note of this type can be resolvable.
 class DiffNote < Note
   include NoteOnDiff
+  include Gitlab::Utils::StrongMemoize
 
   NOTEABLE_TYPES = %w(MergeRequest Commit).freeze
 
@@ -12,7 +13,6 @@ class DiffNote < Note
 
   validates :original_position, presence: true
   validates :position, presence: true
-  validates :diff_line, presence: true, if: :on_text?
   validates :line_code, presence: true, line_code: true, if: :on_text?
   validates :noteable_type, inclusion: { in: NOTEABLE_TYPES }
   validate :positions_complete
@@ -23,6 +23,7 @@ class DiffNote < Note
   before_validation :update_position, on: :create, if: :on_text?
   before_validation :set_line_code, if: :on_text?
   after_save :keep_around_commits
+  after_commit :create_diff_file, on: :create
 
   def discussion_class(*)
     DiffDiscussion
@@ -53,8 +54,25 @@ class DiffNote < Note
     position.position_type == "image"
   end
 
+  def create_diff_file
+    return unless should_create_diff_file?
+
+    diff_file = fetch_diff_file
+    diff_line = diff_file.line_for_position(self.original_position)
+
+    creation_params = diff_file.diff.to_hash
+      .except(:too_large)
+      .merge(diff: diff_file.diff_hunk(diff_line))
+
+    create_note_diff_file(creation_params)
+  end
+
   def diff_file
-    @diff_file ||= self.original_position.diff_file(self.project.repository)
+    strong_memoize(:diff_file) do
+      enqueue_diff_file_creation_job if should_create_diff_file?
+
+      fetch_diff_file
+    end
   end
 
   def diff_line
@@ -85,6 +103,38 @@ class DiffNote < Note
 
   private
 
+  def enqueue_diff_file_creation_job
+    # Avoid enqueuing multiple file creation jobs at once for a note (i.e.
+    # parallel calls to `DiffNote#diff_file`).
+    lease = Gitlab::ExclusiveLease.new("note_diff_file_creation:#{id}", timeout: 1.hour.to_i)
+    return unless lease.try_obtain
+
+    CreateNoteDiffFileWorker.perform_async(id)
+  end
+
+  def should_create_diff_file?
+    on_text? && note_diff_file.nil? && self == discussion.first_note
+  end
+
+  def fetch_diff_file
+    if note_diff_file
+      diff = Gitlab::Git::Diff.new(note_diff_file.to_hash)
+      Gitlab::Diff::File.new(diff,
+                             repository: project.repository,
+                             diff_refs: original_position.diff_refs)
+    elsif created_at_diff?(noteable.diff_refs)
+      # We're able to use the already persisted diffs (Postgres) if we're
+      # presenting a "current version" of the MR discussion diff.
+      # So no need to make an extra Gitaly diff request for it.
+      # As an extra benefit, the returned `diff_file` already
+      # has `highlighted_diff_lines` data set from Redis on
+      # `Diff::FileCollection::MergeRequestDiff`.
+      noteable.diffs(paths: original_position.paths, expanded: true).diff_files.first
+    else
+      original_position.diff_file(self.project.repository)
+    end
+  end
+
   def supported?
     for_commit? || self.noteable.has_complete_diff_refs?
   end
diff --git a/app/models/discussion.rb b/app/models/discussion.rb
index 92482a1a875..35a0ef00856 100644
--- a/app/models/discussion.rb
+++ b/app/models/discussion.rb
@@ -17,6 +17,10 @@ class Discussion
 
             to: :first_note
 
+  def project_id
+    project&.id
+  end
+
   def self.build(notes, context_noteable = nil)
     notes.first.discussion_class(context_noteable).new(notes, context_noteable)
   end
diff --git a/app/models/environment.rb b/app/models/environment.rb
index 9517723d9d9..8d523dae324 100644
--- a/app/models/environment.rb
+++ b/app/models/environment.rb
@@ -32,7 +32,7 @@ class Environment < ActiveRecord::Base
   validates :external_url,
             length: { maximum: 255 },
             allow_nil: true,
-            addressable_url: true
+            url: true
 
   delegate :stop_action, :manual_actions, to: :last_deployment, allow_nil: true
 
@@ -224,7 +224,7 @@ class Environment < ActiveRecord::Base
   end
 
   def deployment_platform
-    project.deployment_platform(environment: self)
+    project.deployment_platform(environment: self.name)
   end
 
   private
diff --git a/app/models/event.rb b/app/models/event.rb
index 17a198d52c7..ac0b1c7b27c 100644
--- a/app/models/event.rb
+++ b/app/models/event.rb
@@ -40,6 +40,7 @@ class Event < ActiveRecord::Base
   ).freeze
 
   RESET_PROJECT_ACTIVITY_INTERVAL = 1.hour
+  REPOSITORY_UPDATED_AT_INTERVAL = 5.minutes
 
   delegate :name, :email, :public_email, :username, to: :author, prefix: true, allow_nil: true
   delegate :title, to: :issue, prefix: true, allow_nil: true
@@ -52,12 +53,12 @@ class Event < ActiveRecord::Base
   belongs_to :target, -> {
     # If the association for "target" defines an "author" association we want to
     # eager-load this so Banzai & friends don't end up performing N+1 queries to
-    # get the authors of notes, issues, etc.
-    if reflections['events'].active_record.reflect_on_association(:author)
-      includes(:author)
-    else
-      self
+    # get the authors of notes, issues, etc. (likewise for "noteable").
+    incs = %i(author noteable).select do |a|
+      reflections['events'].active_record.reflect_on_association(a)
     end
+
+    incs.reduce(self) { |obj, a| obj.includes(a) }
   }, polymorphic: true # rubocop:disable Cop/PolymorphicAssociations
 
   has_one :push_event_payload
@@ -110,7 +111,10 @@ class Event < ActiveRecord::Base
       end
     end
 
+    # Remove this method when removing Gitlab.rails5? code.
     def subclass_from_attributes(attrs)
+      return super if Gitlab.rails5?
+
       # Without this Rails will keep calling this method on the returned class,
       # resulting in an infinite loop.
       return unless self == Event
@@ -388,6 +392,7 @@ class Event < ActiveRecord::Base
 
   def set_last_repository_updated_at
     Project.unscoped.where(id: project_id)
+      .where("last_repository_updated_at < ? OR last_repository_updated_at IS NULL", REPOSITORY_UPDATED_AT_INTERVAL.ago)
       .update_all(last_repository_updated_at: created_at)
   end
 
diff --git a/app/models/generic_commit_status.rb b/app/models/generic_commit_status.rb
index 532b8f4ad69..5ac8bde44cd 100644
--- a/app/models/generic_commit_status.rb
+++ b/app/models/generic_commit_status.rb
@@ -1,7 +1,7 @@
 class GenericCommitStatus < CommitStatus
   before_validation :set_default_values
 
-  validates :target_url, addressable_url: true,
+  validates :target_url, url: true,
                          length: { maximum: 255 },
                          allow_nil: true
 
diff --git a/app/models/group.rb b/app/models/group.rb
index f669b1a7009..9c171de7fc3 100644
--- a/app/models/group.rb
+++ b/app/models/group.rb
@@ -9,6 +9,9 @@ class Group < Namespace
   include SelectForProjectAuthorization
   include LoadedInGroupList
   include GroupDescendant
+  include TokenAuthenticatable
+  include WithUploads
+  include Gitlab::Utils::StrongMemoize
 
   has_many :group_members, -> { where(requested_at: nil) }, dependent: :destroy, as: :source # rubocop:disable Cop/ActiveRecordDependent
   alias_method :members, :group_members
@@ -24,13 +27,15 @@ class Group < Namespace
   has_many :milestones
   has_many :project_group_links, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
   has_many :shared_projects, through: :project_group_links, source: :project
+
+  # Overridden on another method
+  # Left here just to be dependent: :destroy
   has_many :notification_settings, dependent: :destroy, as: :source # rubocop:disable Cop/ActiveRecordDependent
+
   has_many :labels, class_name: 'GroupLabel'
   has_many :variables, class_name: 'Ci::GroupVariable'
   has_many :custom_attributes, class_name: 'GroupCustomAttribute'
 
-  has_many :uploads, as: :model, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
-
   has_many :boards
   has_many :badges, class_name: 'GroupBadge'
 
@@ -43,6 +48,8 @@ class Group < Namespace
 
   validates :two_factor_grace_period, presence: true, numericality: { greater_than_or_equal_to: 0 }
 
+  add_authentication_token_field :runners_token
+
   after_create :post_create_hook
   after_destroy :post_destroy_hook
   after_save :update_two_factor_requirement
@@ -53,7 +60,7 @@ class Group < Namespace
       Gitlab::Database.postgresql?
     end
 
-    def sort(method)
+    def sort_by_attribute(method)
       if method == 'storage_size_desc'
         # storage_size is a virtual column so we need to
         # pass a string to avoid AR adding the table name
@@ -86,6 +93,15 @@ class Group < Namespace
     end
   end
 
+  # Overrides notification_settings has_many association
+  # This allows to apply notification settings from parent groups
+  # to child groups and projects.
+  def notification_settings
+    source_type = self.class.base_class.name
+
+    NotificationSetting.where(source_type: source_type, source_id: self_and_ancestors_ids)
+  end
+
   def to_reference(_from = nil, full: nil)
     "#{self.class.reference_prefix}#{full_path}"
   end
@@ -125,6 +141,10 @@ class Group < Namespace
     self[:lfs_enabled]
   end
 
+  def owned_by?(user)
+    owners.include?(user)
+  end
+
   def add_users(users, access_level, current_user: nil, expires_at: nil)
     GroupMember.add_users(
       self,
@@ -135,13 +155,14 @@ class Group < Namespace
     )
   end
 
-  def add_user(user, access_level, current_user: nil, expires_at: nil)
+  def add_user(user, access_level, current_user: nil, expires_at: nil, ldap: false)
     GroupMember.add_user(
       self,
       user,
       access_level,
       current_user: current_user,
-      expires_at: expires_at
+      expires_at: expires_at,
+      ldap: ldap
     )
   end
 
@@ -189,10 +210,8 @@ class Group < Namespace
     owners.include?(user) && owners.size == 1
   end
 
-  def avatar_type
-    unless self.avatar.image?
-      self.errors.add :avatar, "only images allowed"
-    end
+  def ldap_synced?
+    false
   end
 
   def post_create_hook
@@ -220,6 +239,12 @@ class Group < Namespace
     members_with_parents.pluck(:user_id)
   end
 
+  def self_and_ancestors_ids
+    strong_memoize(:self_and_ancestors_ids) do
+      self_and_ancestors.pluck(:id)
+    end
+  end
+
   def members_with_parents
     # Avoids an unnecessary SELECT when the group has no parents
     source_ids =
@@ -240,6 +265,13 @@ class Group < Namespace
       .where(source_id: self_and_descendants.reorder(nil).select(:id))
   end
 
+  # Returns all members that are part of the group, it's subgroups, and ancestor groups
+  def direct_and_indirect_members
+    GroupMember
+      .active_without_invites_and_requests
+      .where(source_id: self_and_hierarchy.reorder(nil).select(:id))
+  end
+
   def users_with_parents
     User
       .where(id: members_with_parents.select(:user_id))
@@ -252,6 +284,30 @@ class Group < Namespace
       .reorder(nil)
   end
 
+  # Returns all users that are members of the group because:
+  # 1. They belong to the group
+  # 2. They belong to a project that belongs to the group
+  # 3. They belong to a sub-group or project in such sub-group
+  # 4. They belong to an ancestor group
+  def direct_and_indirect_users
+    union = Gitlab::SQL::Union.new([
+      User
+        .where(id: direct_and_indirect_members.select(:user_id))
+        .reorder(nil),
+      project_users_with_descendants
+    ])
+
+    User.from("(#{union.to_sql}) #{User.table_name}")
+  end
+
+  # Returns all users that are members of projects
+  # belonging to the current group or sub-groups
+  def project_users_with_descendants
+    User
+      .joins(projects: :group)
+      .where(namespaces: { id: self_and_descendants.select(:id) })
+  end
+
   def max_member_access_for_user(user)
     return GroupMember::OWNER if user.admin?
 
@@ -292,6 +348,17 @@ class Group < Namespace
     false
   end
 
+  def refresh_project_authorizations
+    refresh_members_authorized_projects(blocking: false)
+  end
+
+  # each existing group needs to have a `runners_token`.
+  # we do this on read since migrating all existing groups is not a feasible
+  # solution.
+  def runners_token
+    ensure_runners_token!
+  end
+
   private
 
   def update_two_factor_requirement
diff --git a/app/models/hooks/project_hook.rb b/app/models/hooks/project_hook.rb
index b6dd39b860b..ec072882cc9 100644
--- a/app/models/hooks/project_hook.rb
+++ b/app/models/hooks/project_hook.rb
@@ -7,6 +7,7 @@ class ProjectHook < WebHook
     :issue_hooks,
     :confidential_issue_hooks,
     :note_hooks,
+    :confidential_note_hooks,
     :merge_request_hooks,
     :job_hooks,
     :pipeline_hooks,
diff --git a/app/models/hooks/system_hook.rb b/app/models/hooks/system_hook.rb
index 0528266e5b3..6bef00f26ea 100644
--- a/app/models/hooks/system_hook.rb
+++ b/app/models/hooks/system_hook.rb
@@ -11,4 +11,9 @@ class SystemHook < WebHook
   default_value_for :push_events, false
   default_value_for :repository_update_events, true
   default_value_for :merge_requests_events, false
+
+  # Allow urls pointing localhost and the local network
+  def allow_local_requests?
+    true
+  end
 end
diff --git a/app/models/hooks/web_hook.rb b/app/models/hooks/web_hook.rb
index 27729deeac9..e353abdda9c 100644
--- a/app/models/hooks/web_hook.rb
+++ b/app/models/hooks/web_hook.rb
@@ -3,7 +3,9 @@ class WebHook < ActiveRecord::Base
 
   has_many :web_hook_logs, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
 
-  validates :url, presence: true, url: true
+  validates :url, presence: true, public_url: { allow_localhost: lambda(&:allow_local_requests?),
+                                                allow_local_network: lambda(&:allow_local_requests?) }
+
   validates :token, format: { without: /\n/ }
 
   def execute(data, hook_name)
@@ -13,4 +15,9 @@ class WebHook < ActiveRecord::Base
   def async_execute(data, hook_name)
     WebHookService.new(self, data, hook_name).async_execute
   end
+
+  # Allow urls pointing localhost and the local network
+  def allow_local_requests?
+    false
+  end
 end
diff --git a/app/models/identity.rb b/app/models/identity.rb
index 1011b9f1109..3fd0c5e751d 100644
--- a/app/models/identity.rb
+++ b/app/models/identity.rb
@@ -1,12 +1,16 @@
 class Identity < ActiveRecord::Base
+  def self.uniqueness_scope
+    :provider
+  end
+
   include Sortable
   include CaseSensitivity
 
   belongs_to :user
 
   validates :provider, presence: true
-  validates :extern_uid, allow_blank: true, uniqueness: { scope: :provider, case_sensitive: false }
-  validates :user_id, uniqueness: { scope: :provider }
+  validates :extern_uid, allow_blank: true, uniqueness: { scope: uniqueness_scope, case_sensitive: false }
+  validates :user_id, uniqueness: { scope: uniqueness_scope }
 
   before_save :ensure_normalized_extern_uid, if: :extern_uid_changed?
   after_destroy :clear_user_synced_attributes, if: :user_synced_attributes_metadata_from_provider?
diff --git a/app/models/internal_id.rb b/app/models/internal_id.rb
index cbec735c2dd..f50f28deffe 100644
--- a/app/models/internal_id.rb
+++ b/app/models/internal_id.rb
@@ -12,8 +12,9 @@
 # * (Optionally) add columns to `internal_ids` if needed for scope.
 class InternalId < ActiveRecord::Base
   belongs_to :project
+  belongs_to :namespace
 
-  enum usage: { issues: 0 }
+  enum usage: { issues: 0, merge_requests: 1, deployments: 2, milestones: 3, epics: 4, ci_pipelines: 5 }
 
   validates :usage, presence: true
 
diff --git a/app/models/issue.rb b/app/models/issue.rb
index 7bfc45c1f43..d3df2da14e2 100644
--- a/app/models/issue.rb
+++ b/app/models/issue.rb
@@ -2,6 +2,7 @@ require 'carrierwave/orm/activerecord'
 
 class Issue < ActiveRecord::Base
   include AtomicInternalId
+  include IidRoutes
   include Issuable
   include Noteable
   include Referable
@@ -14,15 +15,17 @@ class Issue < ActiveRecord::Base
 
   ignore_column :assignee_id, :branch_name, :deleted_at
 
-  DueDateStruct = Struct.new(:title, :name).freeze
-  NoDueDate     = DueDateStruct.new('No Due Date', '0').freeze
-  AnyDueDate    = DueDateStruct.new('Any Due Date', '').freeze
-  Overdue       = DueDateStruct.new('Overdue', 'overdue').freeze
-  DueThisWeek   = DueDateStruct.new('Due This Week', 'week').freeze
-  DueThisMonth  = DueDateStruct.new('Due This Month', 'month').freeze
+  DueDateStruct                   = Struct.new(:title, :name).freeze
+  NoDueDate                       = DueDateStruct.new('No Due Date', '0').freeze
+  AnyDueDate                      = DueDateStruct.new('Any Due Date', '').freeze
+  Overdue                         = DueDateStruct.new('Overdue', 'overdue').freeze
+  DueThisWeek                     = DueDateStruct.new('Due This Week', 'week').freeze
+  DueThisMonth                    = DueDateStruct.new('Due This Month', 'month').freeze
+  DueNextMonthAndPreviousTwoWeeks = DueDateStruct.new('Due Next Month And Previous Two Weeks', 'next_month_and_previous_two_weeks').freeze
 
   belongs_to :project
   belongs_to :moved_to, class_name: 'Issue'
+  belongs_to :closed_by, class_name: 'User'
 
   has_internal_id :iid, scope: :project, init: ->(s) { s&.project&.issues&.maximum(:iid) }
 
@@ -45,18 +48,22 @@ class Issue < ActiveRecord::Base
   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 :with_due_date, -> { where('due_date IS NOT NULL') }
   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) }
+  scope :due_tomorrow, -> { where(due_date: Date.tomorrow) }
 
   scope :order_due_date_asc, -> { reorder('issues.due_date IS NULL, issues.due_date ASC') }
   scope :order_due_date_desc, -> { reorder('issues.due_date IS NULL, issues.due_date DESC') }
+  scope :order_closest_future_date, -> { reorder('CASE WHEN due_date >= CURRENT_DATE THEN 0 ELSE 1 END ASC, ABS(CURRENT_DATE - due_date) ASC') }
 
   scope :preload_associations, -> { preload(:labels, project: :namespace) }
 
   scope :public_only, -> { where(confidential: false) }
 
   after_save :expire_etag_cache
+  after_save :ensure_metrics, unless: :imported?
 
   attr_spammable :title, spam_title: true
   attr_spammable :description, spam_description: true
@@ -78,6 +85,11 @@ class Issue < ActiveRecord::Base
     before_transition any => :closed do |issue|
       issue.closed_at = Time.zone.now
     end
+
+    before_transition closed: :opened do |issue|
+      issue.closed_at = nil
+      issue.closed_by = nil
+    end
   end
 
   class << self
@@ -110,8 +122,9 @@ class Issue < ActiveRecord::Base
     'project_id'
   end
 
-  def self.sort(method, excluded_labels: [])
+  def self.sort_by_attribute(method, excluded_labels: [])
     case method.to_s
+    when 'closest_future_date' then order_closest_future_date
     when 'due_date'      then order_due_date_asc
     when 'due_date_asc'  then order_due_date_asc
     when 'due_date_desc' then order_due_date_desc
@@ -187,6 +200,15 @@ class Issue < ActiveRecord::Base
     branches_with_iid - branches_with_merge_request
   end
 
+  def suggested_branch_name
+    return to_branch_name unless project.repository.branch_exists?(to_branch_name)
+
+    start_counting_from = 2
+    Uniquify.new(start_counting_from).string(-> (counter) { "#{to_branch_name}-#{counter}" }) do |suggested_branch_name|
+      project.repository.branch_exists?(suggested_branch_name)
+    end
+  end
+
   # Returns boolean if a related branch exists for the current issue
   # ignores merge requests branchs
   def has_related_branch?
@@ -241,11 +263,8 @@ class Issue < ActiveRecord::Base
     end
   end
 
-  def can_be_worked_on?(current_user)
-    !self.closed? &&
-      !self.project.forked? &&
-      self.related_branches(current_user).empty? &&
-      self.closed_by_merge_requests(current_user).empty?
+  def can_be_worked_on?
+    !self.closed? && !self.project.forked?
   end
 
   # Returns `true` if the current issue can be viewed by either a logged in User
@@ -266,11 +285,17 @@ class Issue < ActiveRecord::Base
 
   def as_json(options = {})
     super(options).tap do |json|
-      if options.key?(:sidebar_endpoints) && project
+      if options.key?(:issue_endpoints) && project
         url_helper = Gitlab::Routing.url_helpers
 
-        json.merge!(issue_sidebar_endpoint: url_helper.project_issue_path(project, self, format: :json, serializer: 'sidebar'),
-                    toggle_subscription_endpoint: url_helper.toggle_subscription_project_issue_path(project, self))
+        issue_reference = options[:include_full_project_path] ? to_reference(full: true) : to_reference
+
+        json.merge!(
+          reference_path: issue_reference,
+          real_path: url_helper.project_issue_path(project, self),
+          issue_sidebar_endpoint: url_helper.project_issue_path(project, self, format: :json, serializer: 'sidebar'),
+          toggle_subscription_endpoint: url_helper.toggle_subscription_project_issue_path(project, self)
+        )
       end
 
       if options.key?(:labels)
@@ -283,6 +308,10 @@ class Issue < ActiveRecord::Base
     end
   end
 
+  def etag_caching_enabled?
+    true
+  end
+
   def discussions_rendered_on_frontend?
     true
   end
diff --git a/app/models/label.rb b/app/models/label.rb
index de7f1d56c64..7bbcaa121ca 100644
--- a/app/models/label.rb
+++ b/app/models/label.rb
@@ -85,11 +85,16 @@ class Label < ActiveRecord::Base
       (#{Project.reference_pattern})?
       #{Regexp.escape(reference_prefix)}
       (?:
-        (?<label_id>\d+(?!\S\w)\b) | # Integer-based label ID, or
-        (?<label_name>
-          [A-Za-z0-9_\-\?\.&]+ | # String-based single-word label title, or
-          ".+?"                  # String-based multi-word label surrounded in quotes
-        )
+          (?<label_id>\d+(?!\S\w)\b)
+        | # Integer-based label ID, or
+          (?<label_name>
+              # String-based single-word label title, or
+              [A-Za-z0-9_\-\?\.&]+
+              (?<!\.|\?)
+            |
+              # String-based multi-word label surrounded in quotes
+              ".+?"
+          )
       )
     }x
   end
@@ -137,6 +142,10 @@ class Label < ActiveRecord::Base
     priority.try(:priority)
   end
 
+  def priority?
+    priorities.present?
+  end
+
   def template?
     template
   end
diff --git a/app/models/lfs_object.rb b/app/models/lfs_object.rb
index b444812a4cf..84487031ee5 100644
--- a/app/models/lfs_object.rb
+++ b/app/models/lfs_object.rb
@@ -1,15 +1,32 @@
 class LfsObject < ActiveRecord::Base
+  include AfterCommitQueue
+  include ObjectStorage::BackgroundMove
+
   has_many :lfs_objects_projects, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
   has_many :projects, through: :lfs_objects_projects
 
+  scope :with_files_stored_locally, -> { where(file_store: [nil, LfsObjectUploader::Store::LOCAL]) }
+
   validates :oid, presence: true, uniqueness: true
 
   mount_uploader :file, LfsObjectUploader
 
+  after_save :update_file_store, if: :file_changed?
+
+  def update_file_store
+    # The file.object_store is set during `uploader.store!`
+    # which happens after object is inserted/updated
+    self.update_column(:file_store, file.object_store)
+  end
+
   def project_allowed_access?(project)
     projects.exists?(project.lfs_storage_project.id)
   end
 
+  def local_store?
+    [nil, LfsObjectUploader::Store::LOCAL].include?(self.file_store)
+  end
+
   def self.destroy_unreferenced
     joins("LEFT JOIN lfs_objects_projects ON lfs_objects_projects.lfs_object_id = #{table_name}.id")
         .where(lfs_objects_projects: { id: nil })
diff --git a/app/models/list.rb b/app/models/list.rb
index 918275be142..4edcfa78835 100644
--- a/app/models/list.rb
+++ b/app/models/list.rb
@@ -2,17 +2,27 @@ class List < ActiveRecord::Base
   belongs_to :board
   belongs_to :label
 
-  enum list_type: { backlog: 0, label: 1, closed: 2 }
+  enum list_type: { backlog: 0, label: 1, closed: 2, assignee: 3 }
 
   validates :board, :list_type, presence: true
   validates :label, :position, presence: true, if: :label?
   validates :label_id, uniqueness: { scope: :board_id }, if: :label?
-  validates :position, numericality: { only_integer: true, greater_than_or_equal_to: 0 }, if: :label?
+  validates :position, numericality: { only_integer: true, greater_than_or_equal_to: 0 }, if: :movable?
 
   before_destroy :can_be_destroyed
 
-  scope :destroyable, -> { where(list_type: list_types[:label]) }
-  scope :movable, -> { where(list_type: list_types[:label]) }
+  scope :destroyable, -> { where(list_type: list_types.slice(*destroyable_types).values) }
+  scope :movable, -> { where(list_type: list_types.slice(*movable_types).values) }
+
+  class << self
+    def destroyable_types
+      [:label]
+    end
+
+    def movable_types
+      [:label]
+    end
+  end
 
   def destroyable?
     label?
@@ -31,7 +41,8 @@ class List < ActiveRecord::Base
       if options.key?(:label)
         json[:label] = label.as_json(
           project: board.project,
-          only: [:id, :title, :description, :color]
+          only: [:id, :title, :description, :color],
+          methods: [:text_color]
         )
       end
     end
diff --git a/app/models/member.rb b/app/models/member.rb
index e1a32148538..68572f2e33a 100644
--- a/app/models/member.rb
+++ b/app/models/member.rb
@@ -96,7 +96,18 @@ class Member < ActiveRecord::Base
       joins(:user).merge(User.search(query))
     end
 
-    def sort(method)
+    def filter_by_2fa(value)
+      case value
+      when 'enabled'
+        left_join_users.merge(User.with_two_factor_indistinct)
+      when 'disabled'
+        left_join_users.merge(User.without_two_factor)
+      else
+        all
+      end
+    end
+
+    def sort_by_attribute(method)
       case method.to_s
       when 'access_level_asc' then reorder(access_level: :asc)
       when 'access_level_desc' then reorder(access_level: :desc)
diff --git a/app/models/members/group_member.rb b/app/models/members/group_member.rb
index 661e668dbf9..5da739f9618 100644
--- a/app/models/members/group_member.rb
+++ b/app/models/members/group_member.rb
@@ -37,20 +37,20 @@ class GroupMember < Member
   private
 
   def send_invite
-    notification_service.invite_group_member(self, @raw_invite_token)
+    run_after_commit_or_now { notification_service.invite_group_member(self, @raw_invite_token) }
 
     super
   end
 
   def post_create_hook
-    notification_service.new_group_member(self)
+    run_after_commit_or_now { notification_service.new_group_member(self) }
 
     super
   end
 
   def post_update_hook
     if access_level_changed?
-      notification_service.update_group_member(self)
+      run_after_commit { notification_service.update_group_member(self) }
     end
 
     super
diff --git a/app/models/members/project_member.rb b/app/models/members/project_member.rb
index 1c7ed4a96df..024106056b4 100644
--- a/app/models/members/project_member.rb
+++ b/app/models/members/project_member.rb
@@ -92,7 +92,7 @@ class ProjectMember < Member
   private
 
   def send_invite
-    notification_service.invite_project_member(self, @raw_invite_token)
+    run_after_commit_or_now { notification_service.invite_project_member(self, @raw_invite_token) }
 
     super
   end
@@ -100,7 +100,7 @@ class ProjectMember < Member
   def post_create_hook
     unless owner?
       event_service.join_project(self.project, self.user)
-      notification_service.new_project_member(self)
+      run_after_commit_or_now { notification_service.new_project_member(self) }
     end
 
     super
@@ -108,7 +108,7 @@ class ProjectMember < Member
 
   def post_update_hook
     if access_level_changed?
-      notification_service.update_project_member(self)
+      run_after_commit { notification_service.update_project_member(self) }
     end
 
     super
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index 7e6d89ec9c7..6c96c8ca391 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -1,5 +1,6 @@
 class MergeRequest < ActiveRecord::Base
-  include NonatomicInternalId
+  include AtomicInternalId
+  include IidRoutes
   include Issuable
   include Noteable
   include Referable
@@ -18,6 +19,8 @@ class MergeRequest < ActiveRecord::Base
   belongs_to :source_project, class_name: "Project"
   belongs_to :merge_user, class_name: "User"
 
+  has_internal_id :iid, scope: :target_project, init: ->(s) { s&.target_project&.merge_requests&.maximum(:iid) }
+
   has_many :merge_request_diffs
 
   has_one :merge_request_diff,
@@ -56,6 +59,7 @@ class MergeRequest < ActiveRecord::Base
   after_create :ensure_merge_request_diff, unless: :importing?
   after_update :clear_memoized_shas
   after_update :reload_diff_if_branch_changed
+  after_save :ensure_metrics
 
   # When this attribute is true some MR validation is ignored
   # It allows us to close or modify broken merge requests
@@ -102,24 +106,42 @@ class MergeRequest < ActiveRecord::Base
 
   state_machine :merge_status, initial: :unchecked do
     event :mark_as_unchecked do
-      transition [:can_be_merged, :cannot_be_merged] => :unchecked
+      transition [:can_be_merged, :unchecked] => :unchecked
+      transition [:cannot_be_merged, :cannot_be_merged_recheck] => :cannot_be_merged_recheck
     end
 
     event :mark_as_mergeable do
-      transition [:unchecked, :cannot_be_merged] => :can_be_merged
+      transition [:unchecked, :cannot_be_merged_recheck] => :can_be_merged
     end
 
     event :mark_as_unmergeable do
-      transition [:unchecked, :can_be_merged] => :cannot_be_merged
+      transition [:unchecked, :cannot_be_merged_recheck] => :cannot_be_merged
     end
 
     state :unchecked
+    state :cannot_be_merged_recheck
     state :can_be_merged
     state :cannot_be_merged
 
     around_transition do |merge_request, transition, block|
       Gitlab::Timeless.timeless(merge_request, &block)
     end
+
+    after_transition unchecked: :cannot_be_merged do |merge_request, transition|
+      begin
+        if merge_request.notify_conflict?
+          NotificationService.new.merge_request_unmergeable(merge_request)
+          TodoService.new.merge_request_became_unmergeable(merge_request)
+        end
+      rescue Gitlab::Git::CommandError
+        # Checking mergeability can trigger exception, e.g. non-utf8
+        # We ignore this type of errors.
+      end
+    end
+
+    def check_state?(merge_status)
+      [:unchecked, :cannot_be_merged_recheck].include?(merge_status.to_sym)
+    end
   end
 
   validates :source_project, presence: true, unless: [:allow_broken, :importing?, :closed_without_fork?]
@@ -321,10 +343,20 @@ class MergeRequest < ActiveRecord::Base
   # updates `merge_jid` with the MergeWorker#jid.
   # This helps tracking enqueued and ongoing merge jobs.
   def merge_async(user_id, params)
-    jid = MergeWorker.perform_async(id, user_id, params)
+    jid = MergeWorker.perform_async(id, user_id, params.to_h)
     update_column(:merge_jid, jid)
   end
 
+  def merge_participants
+    participants = [author]
+
+    if merge_when_pipeline_succeeds? && !participants.include?(merge_user)
+      participants << merge_user
+    end
+
+    participants
+  end
+
   def first_commit
     merge_request_diff ? merge_request_diff.first_commit : compare_commits.first
   end
@@ -344,6 +376,10 @@ class MergeRequest < ActiveRecord::Base
     end
   end
 
+  def non_latest_diffs
+    merge_request_diffs.where.not(id: merge_request_diff.id)
+  end
+
   def diff_size
     # Calling `merge_request_diff.diffs.real_size` will also perform
     # highlighting, which we don't need here.
@@ -536,18 +572,25 @@ class MergeRequest < ActiveRecord::Base
     merge_request_diff(true)
   end
 
+  def viewable_diffs
+    @viewable_diffs ||= merge_request_diffs.viewable.to_a
+  end
+
   def merge_request_diff_for(diff_refs_or_sha)
-    @merge_request_diffs_by_diff_refs_or_sha ||= Hash.new do |h, diff_refs_or_sha|
-      diffs = merge_request_diffs.viewable
-      h[diff_refs_or_sha] =
-        if diff_refs_or_sha.is_a?(Gitlab::Diff::DiffRefs)
-          diffs.find_by_diff_refs(diff_refs_or_sha)
-        else
-          diffs.find_by(head_commit_sha: diff_refs_or_sha)
-        end
-    end
+    matcher =
+      if diff_refs_or_sha.is_a?(Gitlab::Diff::DiffRefs)
+        {
+          'start_commit_sha' => diff_refs_or_sha.start_sha,
+          'head_commit_sha' => diff_refs_or_sha.head_sha,
+          'base_commit_sha' => diff_refs_or_sha.base_sha
+        }
+      else
+        { 'head_commit_sha' => diff_refs_or_sha }
+      end
 
-    @merge_request_diffs_by_diff_refs_or_sha[diff_refs_or_sha]
+    viewable_diffs.find do |diff|
+      diff.attributes.slice(*matcher.keys) == matcher
+    end
   end
 
   def version_params_for(diff_refs)
@@ -578,22 +621,11 @@ class MergeRequest < ActiveRecord::Base
   def reload_diff(current_user = nil)
     return unless open?
 
-    old_diff_refs = self.diff_refs
-    new_diff = create_merge_request_diff
-
-    MergeRequests::MergeRequestDiffCacheService.new.execute(self, new_diff)
-
-    new_diff_refs = self.diff_refs
-
-    update_diff_discussion_positions(
-      old_diff_refs: old_diff_refs,
-      new_diff_refs: new_diff_refs,
-      current_user: current_user
-    )
+    MergeRequests::ReloadDiffsService.new(self, current_user).execute
   end
 
   def check_if_can_be_merged
-    return unless unchecked? && Gitlab::Database.read_write?
+    return unless self.class.state_machines[:merge_status].check_state?(merge_status) && Gitlab::Database.read_write?
 
     can_be_merged =
       !broken? && project.repository.can_be_merged?(diff_head_sha, target_branch)
@@ -674,6 +706,10 @@ class MergeRequest < ActiveRecord::Base
     should_remove_source_branch? || force_remove_source_branch?
   end
 
+  def notify_conflict?
+    (opened? || locked?) && !project.repository.can_be_merged?(diff_head_sha, target_branch)
+  end
+
   def related_notes
     # Fetch comments only from last 100 commits
     commits_for_notes_limit = 100
@@ -998,6 +1034,10 @@ class MergeRequest < ActiveRecord::Base
     @merge_commit ||= project.commit(merge_commit_sha) if merge_commit_sha
   end
 
+  def short_merge_commit_sha
+    Commit.truncate_sha(merge_commit_sha) if merge_commit_sha
+  end
+
   def can_be_reverted?(current_user)
     return false unless merge_commit
 
@@ -1079,6 +1119,10 @@ class MergeRequest < ActiveRecord::Base
     true
   end
 
+  def discussions_rendered_on_frontend?
+    true
+  end
+
   def update_project_counter_caches
     Projects::OpenMergeRequestsCountService.new(target_project).refresh_cache
   end
@@ -1089,21 +1133,31 @@ class MergeRequest < ActiveRecord::Base
     project.merge_requests.merged.where(author_id: author_id).empty?
   end
 
-  def allow_maintainer_to_push
-    maintainer_push_possible? && super
+  # TODO: remove once production database rename completes
+  alias_attribute :allow_collaboration, :allow_maintainer_to_push
+
+  def allow_collaboration
+    collaborative_push_possible? && allow_maintainer_to_push
   end
 
-  alias_method :allow_maintainer_to_push?, :allow_maintainer_to_push
+  alias_method :allow_collaboration?, :allow_collaboration
 
-  def maintainer_push_possible?
+  def collaborative_push_possible?
     source_project.present? && for_fork? &&
       target_project.visibility_level > Gitlab::VisibilityLevel::PRIVATE &&
       source_project.visibility_level > Gitlab::VisibilityLevel::PRIVATE &&
       !ProtectedBranch.protected?(source_project, source_branch)
   end
 
-  def can_allow_maintainer_to_push?(user)
-    maintainer_push_possible? &&
+  def can_allow_collaboration?(user)
+    collaborative_push_possible? &&
       Ability.allowed?(user, :push_code, source_project)
   end
+
+  def squash_in_progress?
+    # The source project can be deleted
+    return false unless source_project
+
+    source_project.repository.squash_in_progress?(id)
+  end
 end
diff --git a/app/models/merge_request_diff.rb b/app/models/merge_request_diff.rb
index c1c27ccf3e5..3d72c447b4b 100644
--- a/app/models/merge_request_diff.rb
+++ b/app/models/merge_request_diff.rb
@@ -3,6 +3,7 @@ class MergeRequestDiff < ActiveRecord::Base
   include Importable
   include ManualInverseAssociation
   include IgnorableColumn
+  include EachBatch
 
   # Don't display more than 100 commits at once
   COMMITS_SAFE_SIZE = 100
@@ -17,8 +18,14 @@ class MergeRequestDiff < ActiveRecord::Base
   has_many :merge_request_diff_commits, -> { order(:merge_request_diff_id, :relative_order) }
 
   state_machine :state, initial: :empty do
+    event :clean do
+      transition any => :without_files
+    end
+
     state :collected
     state :overflow
+    # Diff files have been deleted by the system
+    state :without_files
     # Deprecated states: these are no longer used but these values may still occur
     # in the database.
     state :timeout
@@ -27,6 +34,7 @@ class MergeRequestDiff < ActiveRecord::Base
     state :overflow_diff_lines_limit
   end
 
+  scope :with_files, -> { without_states(:without_files, :empty) }
   scope :viewable, -> { without_state(:empty) }
   scope :by_commit_sha, ->(sha) do
     joins(:merge_request_diff_commits).where(merge_request_diff_commits: { sha: sha }).reorder(nil)
@@ -42,6 +50,10 @@ class MergeRequestDiff < ActiveRecord::Base
     find_by(start_commit_sha: diff_refs.start_sha, head_commit_sha: diff_refs.head_sha, base_commit_sha: diff_refs.base_sha)
   end
 
+  def viewable?
+    collected? || without_files? || overflow?
+  end
+
   # Collect information about commits and diff from repository
   # and save it to the database as serialized data
   def save_git_content
@@ -170,6 +182,21 @@ class MergeRequestDiff < ActiveRecord::Base
   end
 
   def diffs(diff_options = nil)
+    if without_files? && comparison = diff_refs.compare_in(project)
+      # It should fetch the repository when diffs are cleaned by the system.
+      # We don't keep these for storage overload purposes.
+      # See https://gitlab.com/gitlab-org/gitlab-ce/issues/37639
+      comparison.diffs(diff_options)
+    else
+      diffs_collection(diff_options)
+    end
+  end
+
+  # Should always return the DB persisted diffs collection
+  # (e.g. Gitlab::Diff::FileCollection::MergeRequestDiff.
+  # It's useful when trying to invalidate old caches through
+  # FileCollection::MergeRequestDiff#clear_cache!
+  def diffs_collection(diff_options = nil)
     Gitlab::Diff::FileCollection::MergeRequestDiff.new(self, diff_options: diff_options)
   end
 
@@ -197,10 +224,6 @@ class MergeRequestDiff < ActiveRecord::Base
     CompareService.new(project, head_commit_sha).execute(project, sha, straight: true)
   end
 
-  def commits_count
-    super || merge_request_diff_commits.size
-  end
-
   private
 
   def create_merge_request_diff_files(diffs)
diff --git a/app/models/merge_request_diff_commit.rb b/app/models/merge_request_diff_commit.rb
index b75387e236e..1c2e57bb01f 100644
--- a/app/models/merge_request_diff_commit.rb
+++ b/app/models/merge_request_diff_commit.rb
@@ -17,7 +17,7 @@ class MergeRequestDiffCommit < ActiveRecord::Base
       commit_hash.merge(
         merge_request_diff_id: merge_request_diff_id,
         relative_order: index,
-        sha: sha_attribute.type_cast_for_database(sha),
+        sha: sha_attribute.serialize(sha), # rubocop:disable Cop/ActiveRecordSerialize
         authored_date: Gitlab::Database.sanitize_timestamp(commit_hash[:authored_date]),
         committed_date: Gitlab::Database.sanitize_timestamp(commit_hash[:committed_date])
       )
diff --git a/app/models/merge_request_diff_file.rb b/app/models/merge_request_diff_file.rb
index 1199ff5af22..cd8ba6b904d 100644
--- a/app/models/merge_request_diff_file.rb
+++ b/app/models/merge_request_diff_file.rb
@@ -1,5 +1,6 @@
 class MergeRequestDiffFile < ActiveRecord::Base
   include Gitlab::EncodingHelper
+  include DiffFile
 
   belongs_to :merge_request_diff
 
@@ -12,10 +13,4 @@ class MergeRequestDiffFile < ActiveRecord::Base
   def diff
     binary? ? super.unpack('m0').first : super
   end
-
-  def to_hash
-    keys = Gitlab::Git::Diff::SERIALIZE_KEYS - [:diff]
-
-    as_json(only: keys).merge(diff: diff).with_indifferent_access
-  end
 end
diff --git a/app/models/milestone.rb b/app/models/milestone.rb
index e7d397f40f5..d05dcfd083a 100644
--- a/app/models/milestone.rb
+++ b/app/models/milestone.rb
@@ -8,7 +8,8 @@ class Milestone < ActiveRecord::Base
   Started = MilestoneStruct.new('Started', '#started', -3)
 
   include CacheMarkdownField
-  include NonatomicInternalId
+  include AtomicInternalId
+  include IidRoutes
   include Sortable
   include Referable
   include StripAttribute
@@ -21,6 +22,9 @@ class Milestone < ActiveRecord::Base
   belongs_to :project
   belongs_to :group
 
+  has_internal_id :iid, scope: :project, init: ->(s) { s&.project&.milestones&.maximum(:iid) }
+  has_internal_id :iid, scope: :group, init: ->(s) { s&.group&.milestones&.maximum(:iid) }
+
   has_many :issues
   has_many :labels, -> { distinct.reorder('labels.title') },  through: :issues
   has_many :merge_requests
@@ -34,8 +38,8 @@ class Milestone < ActiveRecord::Base
 
   scope :for_projects_and_groups, -> (project_ids, group_ids) do
     conditions = []
-    conditions << arel_table[:project_id].in(project_ids) if project_ids.compact.any?
-    conditions << arel_table[:group_id].in(group_ids) if group_ids.compact.any?
+    conditions << arel_table[:project_id].in(project_ids) if project_ids&.compact&.any?
+    conditions << arel_table[:group_id].in(group_ids) if group_ids&.compact&.any?
 
     where(conditions.reduce(:or))
   end
@@ -138,7 +142,7 @@ class Milestone < ActiveRecord::Base
     User.joins(assigned_issues: :milestone).where("milestones.id = ?", id).uniq
   end
 
-  def self.sort(method)
+  def self.sort_by_attribute(method)
     case method.to_s
     when 'due_date_asc'
       reorder(Gitlab::Database.nulls_last_order('due_date', 'ASC'))
diff --git a/app/models/namespace.rb b/app/models/namespace.rb
index e350b675639..7034c633268 100644
--- a/app/models/namespace.rb
+++ b/app/models/namespace.rb
@@ -21,6 +21,9 @@ class Namespace < ActiveRecord::Base
   has_many :projects, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
   has_many :project_statistics
 
+  has_many :runner_namespaces, inverse_of: :namespace, class_name: 'Ci::RunnerNamespace'
+  has_many :runners, through: :runner_namespaces, source: :runner, class_name: 'Ci::Runner'
+
   # This should _not_ be `inverse_of: :namespace`, because that would also set
   # `user.namespace` when this user creates a group with themselves as `owner`.
   belongs_to :owner, class_name: "User"
@@ -163,6 +166,13 @@ class Namespace < ActiveRecord::Base
     projects.with_shared_runners.any?
   end
 
+  # Returns all ancestors, self, and descendants of the current namespace.
+  def self_and_hierarchy
+    Gitlab::GroupHierarchy
+      .new(self.class.where(id: id))
+      .all_groups
+  end
+
   # Returns all the ancestors of the current namespaces.
   def ancestors
     return self.class.none unless parent_id
@@ -218,6 +228,10 @@ class Namespace < ActiveRecord::Base
     parent.present?
   end
 
+  def root_ancestor
+    ancestors.reorder(nil).find_by(parent_id: nil)
+  end
+
   def subgroup?
     has_parent?
   end
@@ -248,8 +262,8 @@ class Namespace < ActiveRecord::Base
     all_projects.with_storage_feature(:repository).find_each(&:remove_exports)
   end
 
-  def features
-    []
+  def refresh_project_authorizations
+    owner.refresh_authorized_projects
   end
 
   private
diff --git a/app/models/note.rb b/app/models/note.rb
index 787a80f0196..abc40d9016e 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -63,6 +63,7 @@ class Note < ActiveRecord::Base
   has_many :todos
   has_many :events, as: :target, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
   has_one :system_note_metadata
+  has_one :note_diff_file, inverse_of: :diff_note, foreign_key: :diff_note_id
 
   delegate :gfm_reference, :local_reference, to: :noteable
   delegate :name, to: :project, prefix: true
@@ -100,7 +101,8 @@ class Note < ActiveRecord::Base
   scope :inc_author_project, -> { includes(:project, :author) }
   scope :inc_author, -> { includes(:author) }
   scope :inc_relations_for_view, -> do
-    includes(:project, :author, :updated_by, :resolved_by, :award_emoji, :system_note_metadata)
+    includes(:project, :author, :updated_by, :resolved_by, :award_emoji,
+             :system_note_metadata, :note_diff_file)
   end
 
   scope :diff_notes, -> { where(type: %w(LegacyDiffNote DiffNote)) }
@@ -268,6 +270,10 @@ class Note < ActiveRecord::Base
     self.special_role = Note::SpecialRole::FIRST_TIME_CONTRIBUTOR
   end
 
+  def confidential?
+    noteable.try(:confidential?)
+  end
+
   def editable?
     !system?
   end
@@ -378,13 +384,17 @@ class Note < ActiveRecord::Base
 
   def expire_etag_cache
     return unless noteable&.discussions_rendered_on_frontend?
+    return unless noteable&.etag_caching_enabled?
+
+    Gitlab::EtagCaching::Store.new.touch(etag_key)
+  end
 
-    key = Gitlab::Routing.url_helpers.project_noteable_notes_path(
+  def etag_key
+    Gitlab::Routing.url_helpers.project_noteable_notes_path(
       project,
       target_type: noteable_type.underscore,
       target_id: noteable_id
     )
-    Gitlab::EtagCaching::Store.new.touch(key)
   end
 
   def touch(*args)
@@ -426,6 +436,10 @@ class Note < ActiveRecord::Base
     super.merge(noteable: noteable)
   end
 
+  def retrieve_upload(_identifier, paths)
+    Upload.find_by(model: self, path: paths)
+  end
+
   private
 
   def keep_around_commit
diff --git a/app/models/note_diff_file.rb b/app/models/note_diff_file.rb
new file mode 100644
index 00000000000..e688018a6d9
--- /dev/null
+++ b/app/models/note_diff_file.rb
@@ -0,0 +1,7 @@
+class NoteDiffFile < ActiveRecord::Base
+  include DiffFile
+
+  belongs_to :diff_note, inverse_of: :note_diff_file
+
+  validates :diff_note, presence: true
+end
diff --git a/app/models/notification_recipient.rb b/app/models/notification_recipient.rb
index e95655e19f8..1a03dd9df56 100644
--- a/app/models/notification_recipient.rb
+++ b/app/models/notification_recipient.rb
@@ -1,4 +1,6 @@
 class NotificationRecipient
+  include Gitlab::Utils::StrongMemoize
+
   attr_reader :user, :type, :reason
   def initialize(user, type, **opts)
     unless NotificationSetting.levels.key?(type) || type == :subscription
@@ -48,7 +50,7 @@ class NotificationRecipient
     when :custom
       custom_enabled? || %i[participating mention].include?(@type)
     when :watch, :participating
-      !excluded_watcher_action?
+      !action_excluded?
     when :mention
       @type == :mention
     else
@@ -64,7 +66,7 @@ class NotificationRecipient
     return false unless @target
     return false unless @target.respond_to?(:subscriptions)
 
-    subscription = @target.subscriptions.find_by_user_id(@user.id)
+    subscription = @target.subscriptions.find { |subscription| subscription.user_id == @user.id }
     subscription && !subscription.subscribed
   end
 
@@ -83,26 +85,35 @@ class NotificationRecipient
 
   def has_access?
     DeclarativePolicy.subject_scope do
-      return false unless user.can?(:receive_notifications)
-      return true if @skip_read_ability
+      break false unless user.can?(:receive_notifications)
+      break true if @skip_read_ability
 
-      return false if @target && !user.can?(:read_cross_project)
-      return false if @project && !user.can?(:read_project, @project)
+      break false if @target && !user.can?(:read_cross_project)
+      break false if @project && !user.can?(:read_project, @project)
 
-      return true unless read_ability
-      return true unless DeclarativePolicy.has_policy?(@target)
+      break true unless read_ability
+      break true unless DeclarativePolicy.has_policy?(@target)
 
       user.can?(read_ability, @target)
     end
   end
 
+  def action_excluded?
+    excluded_watcher_action? || excluded_participating_action?
+  end
+
   def excluded_watcher_action?
-    return false unless @custom_action
-    return false if notification_level == :custom
+    return false unless @custom_action && notification_level == :watch
 
     NotificationSetting::EXCLUDED_WATCHER_EVENTS.include?(@custom_action)
   end
 
+  def excluded_participating_action?
+    return false unless @custom_action && notification_level == :participating
+
+    NotificationSetting::EXCLUDED_PARTICIPATING_EVENTS.include?(@custom_action)
+  end
+
   private
 
   def read_ability
@@ -133,10 +144,33 @@ class NotificationRecipient
 
     return project_setting unless project_setting.nil? || project_setting.global?
 
-    group_setting = @group && user.notification_settings_for(@group)
+    group_setting = closest_non_global_group_notification_settting
 
-    return group_setting unless group_setting.nil? || group_setting.global?
+    return group_setting unless group_setting.nil?
 
     user.global_notification_setting
   end
+
+  # Returns the notificaton_setting of the lowest group in hierarchy with non global level
+  def closest_non_global_group_notification_settting
+    return unless @group
+    return if indexed_group_notification_settings.empty?
+
+    notification_setting = nil
+
+    @group.self_and_ancestors_ids.each do |id|
+      notification_setting = indexed_group_notification_settings[id]
+      break if notification_setting
+    end
+
+    notification_setting
+  end
+
+  def indexed_group_notification_settings
+    strong_memoize(:indexed_group_notification_settings) do
+      @group.notification_settings.where(user_id: user.id)
+        .where.not(level: NotificationSetting.levels[:global])
+        .index_by(&:source_id)
+    end
+  end
 end
diff --git a/app/models/notification_setting.rb b/app/models/notification_setting.rb
index 245f8dddcf9..9195408551f 100644
--- a/app/models/notification_setting.rb
+++ b/app/models/notification_setting.rb
@@ -33,6 +33,7 @@ class NotificationSetting < ActiveRecord::Base
     :close_issue,
     :reassign_issue,
     :new_merge_request,
+    :push_to_merge_request,
     :reopen_merge_request,
     :close_merge_request,
     :reassign_merge_request,
@@ -41,10 +42,15 @@ class NotificationSetting < ActiveRecord::Base
     :success_pipeline
   ].freeze
 
-  EXCLUDED_WATCHER_EVENTS = [
+  EXCLUDED_PARTICIPATING_EVENTS = [
     :success_pipeline
   ].freeze
 
+  EXCLUDED_WATCHER_EVENTS = [
+    :push_to_merge_request,
+    :issue_due
+  ].push(*EXCLUDED_PARTICIPATING_EVENTS).freeze
+
   def self.find_or_create_for(source)
     setting = find_or_initialize_by(source: source)
 
diff --git a/app/models/pages_domain.rb b/app/models/pages_domain.rb
index 588bd50ed77..bfea64c3759 100644
--- a/app/models/pages_domain.rb
+++ b/app/models/pages_domain.rb
@@ -6,8 +6,10 @@ class PagesDomain < ActiveRecord::Base
 
   validates :domain, hostname: { allow_numeric_hostname: true }
   validates :domain, uniqueness: { case_sensitive: false }
-  validates :certificate, certificate: true, allow_nil: true, allow_blank: true
-  validates :key, certificate_key: true, allow_nil: true, allow_blank: true
+  validates :certificate, presence: { message: 'must be present if HTTPS-only is enabled' }, if: ->(domain) { domain.project&.pages_https_only? }
+  validates :certificate, certificate: true, if: ->(domain) { domain.certificate.present? }
+  validates :key, presence: { message: 'must be present if HTTPS-only is enabled' }, if: ->(domain) { domain.project&.pages_https_only? }
+  validates :key, certificate_key: true, if: ->(domain) { domain.key.present? }
   validates :verification_code, presence: true, allow_blank: false
 
   validate :validate_pages_domain
@@ -17,7 +19,7 @@ class PagesDomain < ActiveRecord::Base
   attr_encrypted :key,
     mode: :per_attribute_iv_and_salt,
     insecure_mode: true,
-    key: Gitlab::Application.secrets.db_key_base,
+    key: Settings.attr_encrypted_db_key_base,
     algorithm: 'aes-256-cbc'
 
   after_initialize :set_verification_code
@@ -46,6 +48,10 @@ class PagesDomain < ActiveRecord::Base
     !Gitlab::CurrentSettings.pages_domain_verification_enabled? || enabled_until.present?
   end
 
+  def https?
+    certificate.present?
+  end
+
   def to_param
     domain
   end
diff --git a/app/models/personal_snippet.rb b/app/models/personal_snippet.rb
index 82c1c4de3a0..355624fd552 100644
--- a/app/models/personal_snippet.rb
+++ b/app/models/personal_snippet.rb
@@ -1,2 +1,3 @@
 class PersonalSnippet < Snippet
+  include WithUploads
 end
diff --git a/app/models/project.rb b/app/models/project.rb
index 250680e2a2c..d91d7dcfe9a 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -21,6 +21,11 @@ class Project < ActiveRecord::Base
   include Gitlab::SQL::Pattern
   include DeploymentPlatform
   include ::Gitlab::Utils::StrongMemoize
+  include ChronicDurationAttribute
+  include FastDestroyAll::Helpers
+  include WithUploads
+  include BatchDestroyDependentAssociations
+  extend Gitlab::Cache::RequestCache
 
   extend Gitlab::ConfigHelper
 
@@ -63,15 +68,29 @@ class Project < ActiveRecord::Base
   default_value_for :only_allow_merge_if_all_discussions_are_resolved, false
 
   add_authentication_token_field :runners_token
+
+  before_validation :mark_remote_mirrors_for_removal, if: -> { RemoteMirror.table_exists? }
+
   before_save :ensure_runners_token
 
   after_save :update_project_statistics, if: :namespace_id_changed?
+
+  after_save :create_import_state, if: ->(project) { project.import? && project.import_state.nil? }
+
   after_create :create_project_feature, unless: :project_feature
+
+  after_create :create_ci_cd_settings,
+    unless: :ci_cd_settings,
+    if: proc { ProjectCiCdSetting.available? }
+
   after_create :set_last_activity_at
   after_create :set_last_repository_updated_at
   after_update :update_forks_visibility_level
 
   before_destroy :remove_private_deploy_keys
+
+  use_fast_destroy :build_trace_chunks
+
   after_destroy -> { run_after_commit { remove_pages } }
   after_destroy :remove_exports
 
@@ -151,6 +170,8 @@ class Project < ActiveRecord::Base
   has_one :fork_network_member
   has_one :fork_network, through: :fork_network_member
 
+  has_one :import_state, autosave: true, class_name: 'ProjectImportState', inverse_of: :project
+
   # Merge Requests for target project should be removed with it
   has_many :merge_requests, foreign_key: 'target_project_id'
   has_many :source_of_merge_requests, foreign_key: 'source_project_id', class_name: 'MergeRequest'
@@ -199,6 +220,7 @@ class Project < ActiveRecord::Base
 
   has_one :cluster_project, class_name: 'Clusters::Project'
   has_many :clusters, through: :cluster_project, class_name: 'Clusters::Cluster'
+  has_many :cluster_ingresses, through: :clusters, source: :application_ingress, class_name: 'Clusters::Applications::Ingress'
 
   # Container repositories need to remove data from the container registry,
   # which is not managed by the DB. Hence we're still using dependent: :destroy
@@ -207,6 +229,7 @@ class Project < ActiveRecord::Base
 
   has_many :commit_statuses
   has_many :pipelines, class_name: 'Ci::Pipeline', inverse_of: :project
+  has_many :stages, class_name: 'Ci::Stage', inverse_of: :project
 
   # Ci::Build objects store data on the file system such as artifact files and
   # build traces. Currently there's no efficient way of removing this data in
@@ -214,30 +237,39 @@ class Project < ActiveRecord::Base
   # still using `dependent: :destroy` here.
   has_many :builds, class_name: 'Ci::Build', inverse_of: :project, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
   has_many :build_trace_section_names, class_name: 'Ci::BuildTraceSectionName'
-  has_many :runner_projects, class_name: 'Ci::RunnerProject'
+  has_many :build_trace_chunks, class_name: 'Ci::BuildTraceChunk', through: :builds, source: :trace_chunks
+  has_many :runner_projects, class_name: 'Ci::RunnerProject', inverse_of: :project
   has_many :runners, through: :runner_projects, source: :runner, class_name: 'Ci::Runner'
   has_many :variables, class_name: 'Ci::Variable'
   has_many :triggers, class_name: 'Ci::Trigger'
   has_many :environments
   has_many :deployments
   has_many :pipeline_schedules, class_name: 'Ci::PipelineSchedule'
-
-  has_many :active_runners, -> { active }, through: :runner_projects, source: :runner, class_name: 'Ci::Runner'
+  has_many :project_deploy_tokens
+  has_many :deploy_tokens, through: :project_deploy_tokens
 
   has_one :auto_devops, class_name: 'ProjectAutoDevops'
   has_many :custom_attributes, class_name: 'ProjectCustomAttribute'
 
   has_many :project_badges, class_name: 'ProjectBadge'
+  has_one :ci_cd_settings, class_name: 'ProjectCiCdSetting', inverse_of: :project, autosave: true, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
+
+  has_many :remote_mirrors, inverse_of: :project
 
   accepts_nested_attributes_for :variables, allow_destroy: true
   accepts_nested_attributes_for :project_feature, update_only: true
   accepts_nested_attributes_for :import_data
   accepts_nested_attributes_for :auto_devops, update_only: true
 
+  accepts_nested_attributes_for :remote_mirrors,
+                                allow_destroy: true,
+                                reject_if: ->(attrs) { attrs[:id].blank? && attrs[:url].blank? }
+
   delegate :name, to: :owner, allow_nil: true, prefix: true
   delegate :members, to: :team, prefix: true
   delegate :add_user, :add_users, to: :team
   delegate :add_guest, :add_reporter, :add_developer, :add_master, :add_role, to: :team
+  delegate :group_runners_enabled, :group_runners_enabled=, :group_runners_enabled?, to: :ci_cd_settings
 
   # Validations
   validates :creator, presence: true, on: :create
@@ -259,21 +291,22 @@ class Project < ActiveRecord::Base
 
   validates :namespace, presence: true
   validates :name, uniqueness: { scope: :namespace_id }
-  validates :import_url, addressable_url: true, if: :external_import?
-  validates :import_url, importable_url: true, if: [:external_import?, :import_url_changed?]
+  validates :import_url, url: { protocols: %w(http https ssh git),
+                                allow_localhost: false,
+                                enforce_user: true,
+                                ports: VALID_IMPORT_PORTS }, if: [:external_import?, :import_url_changed?]
   validates :star_count, numericality: { greater_than_or_equal_to: 0 }
   validate :check_limit, on: :create
   validate :check_repository_path_availability, on: :update, if: ->(project) { project.renamed? }
   validate :visibility_level_allowed_by_group
   validate :visibility_level_allowed_as_fork
   validate :check_wiki_path_conflict
+  validate :validate_pages_https_only, if: -> { changes.has_key?(:pages_https_only) }
   validates :repository_storage,
     presence: true,
     inclusion: { in: ->(_object) { Gitlab.config.repositories.storages.keys } }
   validates :variables, variable_duplicates: { scope: :environment_scope }
 
-  has_many :uploads, as: :model, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
-
   # Scopes
   scope :pending_delete, -> { where(pending_delete: true) }
   scope :without_deleted, -> { where(pending_delete: false) }
@@ -321,9 +354,21 @@ class Project < ActiveRecord::Base
   scope :with_issues_enabled, -> { with_feature_enabled(:issues) }
   scope :with_issues_available_for_user, ->(current_user) { with_feature_available_for_user(:issues, current_user) }
   scope :with_merge_requests_enabled, -> { with_feature_enabled(:merge_requests) }
+  scope :with_remote_mirrors, -> { joins(:remote_mirrors).where(remote_mirrors: { enabled: true }).distinct }
+
+  scope :with_group_runners_enabled, -> do
+    joins(:ci_cd_settings)
+    .where(project_ci_cd_settings: { group_runners_enabled: true })
+  end
 
   enum auto_cancel_pending_pipelines: { disabled: 0, enabled: 1 }
 
+  chronic_duration_attr :build_timeout_human_readable, :build_timeout, default: 3600
+
+  validates :build_timeout, allow_nil: true,
+                            numericality: { greater_than_or_equal_to: 600,
+                                            message: 'needs to be at least 10 minutes' }
+
   # Returns a collection of projects that is either public or visible to the
   # logged in user.
   def self.public_or_visible_to_user(user = nil)
@@ -365,55 +410,9 @@ class Project < ActiveRecord::Base
   scope :abandoned, -> { where('projects.last_activity_at < ?', 6.months.ago) }
 
   scope :excluding_project, ->(project) { where.not(id: project) }
-  scope :import_started, -> { where(import_status: 'started') }
-
-  state_machine :import_status, initial: :none do
-    event :import_schedule do
-      transition [:none, :finished, :failed] => :scheduled
-    end
-
-    event :force_import_start do
-      transition [:none, :finished, :failed] => :started
-    end
 
-    event :import_start do
-      transition scheduled: :started
-    end
-
-    event :import_finish do
-      transition started: :finished
-    end
-
-    event :import_fail do
-      transition [:scheduled, :started] => :failed
-    end
-
-    event :import_retry do
-      transition failed: :started
-    end
-
-    state :scheduled
-    state :started
-    state :finished
-    state :failed
-
-    after_transition [:none, :finished, :failed] => :scheduled do |project, _|
-      project.run_after_commit do
-        job_id = add_import_job
-        update(import_jid: job_id) if job_id
-      end
-    end
-
-    after_transition started: :finished do |project, _|
-      project.reset_cache_and_import_attrs
-
-      if Gitlab::ImportSources.importer_names.include?(project.import_type) && project.repo_exists?
-        project.run_after_commit do
-          Projects::AfterImportService.new(project).execute
-        end
-      end
-    end
-  end
+  scope :joins_import_state, -> { joins("LEFT JOIN project_mirror_data import_state ON import_state.project_id = projects.id") }
+  scope :import_started, -> { joins_import_state.where("import_state.status = 'started' OR projects.import_status = 'started'") }
 
   class << self
     # Searches for a list of projects based on the query given in `query`.
@@ -435,7 +434,7 @@ class Project < ActiveRecord::Base
       Gitlab::VisibilityLevel.options
     end
 
-    def sort(method)
+    def sort_by_attribute(method)
       case method.to_s
       when 'storage_size_desc'
         # storage_size is a joined column so we need to
@@ -502,10 +501,6 @@ class Project < ActiveRecord::Base
     repository.empty?
   end
 
-  def repository_storage_path
-    Gitlab.config.repositories.storages[repository_storage].try(:[], 'path')
-  end
-
   def team
     @team ||= ProjectTeam.new(self)
   end
@@ -565,9 +560,7 @@ class Project < ActiveRecord::Base
   def add_import_job
     job_id =
       if forked?
-        RepositoryForkWorker.perform_async(id,
-                                           forked_from_project.repository_storage_path,
-                                           forked_from_project.disk_path)
+        RepositoryForkWorker.perform_async(id)
       elsif gitlab_project_import?
         # Do not retry on Import/Export until https://gitlab.com/gitlab-org/gitlab-ce/issues/26189 is solved.
         RepositoryImportWorker.set(retry: false).perform_async(self.id)
@@ -631,7 +624,7 @@ class Project < ActiveRecord::Base
   end
 
   def create_or_update_import_data(data: nil, credentials: nil)
-    return unless import_url.present? && valid_import_url?
+    return if data.nil? && credentials.nil?
 
     project_import_data = import_data || build_import_data
     if data
@@ -649,10 +642,6 @@ class Project < ActiveRecord::Base
     external_import? || forked? || gitlab_project_import? || bare_repository_import?
   end
 
-  def no_import?
-    import_status == 'none'
-  end
-
   def external_import?
     import_url.present?
   end
@@ -665,6 +654,105 @@ class Project < ActiveRecord::Base
     import_started? || import_scheduled?
   end
 
+  def import_state_args
+    {
+      status: self[:import_status],
+      jid: self[:import_jid],
+      last_error: self[:import_error]
+    }
+  end
+
+  def ensure_import_state(force: false)
+    return if !force && (self[:import_status] == 'none' || self[:import_status].nil?)
+    return unless import_state.nil?
+
+    if persisted?
+      create_import_state(import_state_args)
+
+      update_column(:import_status, 'none')
+    else
+      build_import_state(import_state_args)
+
+      self[:import_status] = 'none'
+    end
+  end
+
+  def human_import_status_name
+    ensure_import_state
+
+    import_state.human_status_name
+  end
+
+  def import_schedule
+    ensure_import_state(force: true)
+
+    import_state.schedule
+  end
+
+  def force_import_start
+    ensure_import_state(force: true)
+
+    import_state.force_start
+  end
+
+  def import_start
+    ensure_import_state(force: true)
+
+    import_state.start
+  end
+
+  def import_fail
+    ensure_import_state(force: true)
+
+    import_state.fail_op
+  end
+
+  def import_finish
+    ensure_import_state(force: true)
+
+    import_state.finish
+  end
+
+  def import_jid=(new_jid)
+    ensure_import_state(force: true)
+
+    import_state.jid = new_jid
+  end
+
+  def import_jid
+    ensure_import_state
+
+    import_state&.jid
+  end
+
+  def import_error=(new_error)
+    ensure_import_state(force: true)
+
+    import_state.last_error = new_error
+  end
+
+  def import_error
+    ensure_import_state
+
+    import_state&.last_error
+  end
+
+  def import_status=(new_status)
+    ensure_import_state(force: true)
+
+    import_state.status = new_status
+  end
+
+  def import_status
+    ensure_import_state
+
+    import_state&.status || 'none'
+  end
+
+  def no_import?
+    import_status == 'none'
+  end
+
   def import_started?
     # import? does SQL work so only run it if it looks like there's an import running
     import_status == 'started' && import?
@@ -698,6 +786,37 @@ class Project < ActiveRecord::Base
     import_type == 'gitea'
   end
 
+  def has_remote_mirror?
+    remote_mirror_available? && remote_mirrors.enabled.exists?
+  end
+
+  def updating_remote_mirror?
+    remote_mirrors.enabled.started.exists?
+  end
+
+  def update_remote_mirrors
+    return unless remote_mirror_available?
+
+    remote_mirrors.enabled.each(&:sync)
+  end
+
+  def mark_stuck_remote_mirrors_as_failed!
+    remote_mirrors.stuck.update_all(
+      update_status: :failed,
+      last_error: 'The remote mirror took to long to complete.',
+      last_update_at: Time.now
+    )
+  end
+
+  def mark_remote_mirrors_for_removal
+    remote_mirrors.each(&:mark_for_delete_if_blank_url)
+  end
+
+  def remote_mirror_available?
+    remote_mirror_available_overridden ||
+      ::Gitlab::CurrentSettings.mirror_available
+  end
+
   def check_limit
     unless creator.can_create_project? || namespace.kind == 'group'
       projects_limit = creator.projects_limit
@@ -737,6 +856,26 @@ class Project < ActiveRecord::Base
     end
   end
 
+  def pages_https_only
+    return false unless Gitlab.config.pages.external_https
+
+    super
+  end
+
+  def pages_https_only?
+    return false unless Gitlab.config.pages.external_https
+
+    super
+  end
+
+  def validate_pages_https_only
+    return unless pages_https_only?
+
+    unless pages_domains.all?(&:https?)
+      errors.add(:pages_https_only, "cannot be enabled unless all domains have TLS certificates")
+    end
+  end
+
   def to_param
     if persisted? && errors.include?(:path)
       path_was
@@ -766,6 +905,13 @@ class Project < ActiveRecord::Base
     Gitlab::Routing.url_helpers.project_url(self)
   end
 
+  def readme_url
+    readme = repository.readme
+    if readme
+      Gitlab::Routing.url_helpers.project_blob_url(self, File.join(default_branch, readme.path))
+    end
+  end
+
   def new_issuable_address(author, address_type)
     return unless Gitlab::IncomingEmail.supports_issue_creation? && author
 
@@ -869,7 +1015,7 @@ class Project < ActiveRecord::Base
 
     available_services_names = Service.available_services_names - exceptions
 
-    available_services_names.map do |service_name|
+    available_services = available_services_names.map do |service_name|
       service = find_service(services, service_name)
 
       if service
@@ -886,6 +1032,14 @@ class Project < ActiveRecord::Base
         end
       end
     end
+
+    available_services.reject do |service|
+      disabled_services.include?(service.to_param)
+    end
+  end
+
+  def disabled_services
+    []
   end
 
   def find_or_initialize_service(name)
@@ -1013,13 +1167,6 @@ class Project < ActiveRecord::Base
     "#{web_url}.git"
   end
 
-  def user_can_push_to_empty_repo?(user)
-    return false unless empty_repo?
-    return false unless Ability.allowed?(user, :push_code, self)
-
-    !ProtectedBranch.default_branch_protected? || team.max_member_access(user.id) > Gitlab::Access::DEVELOPER
-  end
-
   def forked?
     return true if fork_network && fork_network.root_project != self
 
@@ -1047,6 +1194,16 @@ class Project < ActiveRecord::Base
     end
   end
 
+  # This will return all `lfs_objects` that are accessible to the project.
+  # So this might be `self.lfs_objects` if the project is not part of a fork
+  # network, or it is the base of the fork network.
+  #
+  # TODO: refactor this to get the correct lfs objects when implementing
+  #       https://gitlab.com/gitlab-org/gitlab-ce/issues/39769
+  def all_lfs_objects
+    lfs_storage_project.lfs_objects
+  end
+
   def personal?
     !group
   end
@@ -1068,7 +1225,7 @@ class Project < ActiveRecord::Base
   # Check if repository already exists on disk
   def check_repository_path_availability
     return true if skip_disk_validation
-    return false unless repository_storage_path
+    return false unless repository_storage
 
     expires_full_path_cache # we need to clear cache to validate renames correctly
 
@@ -1268,28 +1425,31 @@ class Project < ActiveRecord::Base
     @shared_runners ||= shared_runners_available? ? Ci::Runner.shared : Ci::Runner.none
   end
 
-  def active_shared_runners
-    @active_shared_runners ||= shared_runners.active
+  def group_runners
+    @group_runners ||= group_runners_enabled? ? Ci::Runner.belonging_to_parent_group_of_project(self.id) : Ci::Runner.none
   end
 
-  def any_runners?(&block)
-    active_runners.any?(&block) || active_shared_runners.any?(&block)
+  def all_runners
+    union = Gitlab::SQL::Union.new([runners, group_runners, shared_runners])
+    Ci::Runner.from("(#{union.to_sql}) ci_runners")
   end
 
-  def valid_runners_token?(token)
-    self.runners_token && ActiveSupport::SecurityUtils.variable_size_secure_compare(token, self.runners_token)
+  def active_runners
+    strong_memoize(:active_runners) do
+      all_runners.active
+    end
   end
 
-  def build_timeout_in_minutes
-    build_timeout / 60
+  def any_runners?(&block)
+    active_runners.any?(&block)
   end
 
-  def build_timeout_in_minutes=(value)
-    self.build_timeout = value.to_i * 60
+  def valid_runners_token?(token)
+    self.runners_token && ActiveSupport::SecurityUtils.variable_size_secure_compare(token, self.runners_token)
   end
 
-  def open_issues_count
-    Projects::OpenIssuesCountService.new(self).count
+  def open_issues_count(current_user = nil)
+    Projects::OpenIssuesCountService.new(self, current_user).count
   end
 
   def open_merge_requests_count
@@ -1325,20 +1485,19 @@ class Project < ActiveRecord::Base
     Dir.exist?(public_pages_path)
   end
 
-  def pages_url
-    subdomain, _, url_path = full_path.partition('/')
-
-    # The hostname always needs to be in downcased
-    # All web servers convert hostname to lowercase
-    host = "#{subdomain}.#{Settings.pages.host}".downcase
-
+  def pages_group_url
     # The host in URL always needs to be downcased
-    url = Gitlab.config.pages.url.sub(%r{^https?://}) do |prefix|
-      "#{prefix}#{subdomain}."
+    Gitlab.config.pages.url.sub(%r{^https?://}) do |prefix|
+      "#{prefix}#{pages_subdomain}."
     end.downcase
+  end
+
+  def pages_url
+    url = pages_group_url
+    url_path = full_path.partition('/').last
 
     # If the project path is the same as host, we serve it as group page
-    return url if host == url_path
+    return url if url == "#{Settings.pages.protocol}://#{url_path}"
 
     "#{url}/#{url_path}"
   end
@@ -1445,7 +1604,9 @@ class Project < ActiveRecord::Base
   end
 
   def rename_repo_notify!
-    send_move_instructions(full_path_was)
+    # When we import a project overwriting the original project, there
+    # is a move operation. In that case we don't want to send the instructions.
+    send_move_instructions(full_path_was) unless import_started?
     expires_full_path_cache
 
     self.old_path_with_namespace = full_path_was
@@ -1456,10 +1617,12 @@ class Project < ActiveRecord::Base
 
   def after_import
     repository.after_import
+    wiki.repository.after_import
     import_finish
     remove_import_jid
     update_project_counter_caches
     after_create_default_branch
+    refresh_markdown_cache!
   end
 
   def update_project_counter_caches
@@ -1498,13 +1661,8 @@ class Project < ActiveRecord::Base
     return unless import_jid
 
     Gitlab::SidekiqStatus.unset(import_jid)
-    update_column(:import_jid, nil)
-  end
 
-  def running_or_pending_build_count(force: false)
-    Rails.cache.fetch(['projects', id, 'running_or_pending_build_count'], force: force) do
-      builds.running_or_pending.count(:all)
-    end
+    import_state.update_column(:jid, nil)
   end
 
   # Lazy loading of the `pipeline_status` attribute
@@ -1517,15 +1675,16 @@ class Project < ActiveRecord::Base
     sanitized_message = Gitlab::UrlSanitizer.sanitize(error_message)
 
     import_fail
-    update_column(:import_error, sanitized_message)
+
+    import_state.update_column(:last_error, sanitized_message)
   rescue ActiveRecord::ActiveRecordError => e
     Rails.logger.error("Error setting import status to failed: #{e.message}. Original error: #{sanitized_message}")
   ensure
     @errors = original_errors
   end
 
-  def add_export_job(current_user:, params: {})
-    job_id = ProjectExportWorker.perform_async(current_user.id, self.id, params)
+  def add_export_job(current_user:, after_export_strategy: nil, params: {})
+    job_id = ProjectExportWorker.perform_async(current_user.id, self.id, after_export_strategy, params)
 
     if job_id
       Rails.logger.info "Export job started for project ID #{self.id} with job ID #{job_id}"
@@ -1551,6 +1710,8 @@ class Project < ActiveRecord::Base
   def export_status
     if export_in_progress?
       :started
+    elsif after_export_in_progress?
+      :after_export_action
     elsif export_project_path
       :finished
     else
@@ -1562,12 +1723,22 @@ class Project < ActiveRecord::Base
     import_export_shared.active_export_count > 0
   end
 
+  def after_export_in_progress?
+    import_export_shared.after_export_in_progress?
+  end
+
   def remove_exports
     return nil unless export_path.present?
 
     FileUtils.rm_rf(export_path)
   end
 
+  def remove_exported_project_file
+    return unless export_project_path.present?
+
+    FileUtils.rm_f(export_project_path)
+  end
+
   def full_path_slug
     Gitlab::Utils.slugify(full_path.to_s)
   end
@@ -1593,7 +1764,7 @@ class Project < ActiveRecord::Base
 
   def container_registry_variables
     Gitlab::Ci::Variables::Collection.new.tap do |variables|
-      return variables unless Gitlab.config.registry.enabled
+      break variables unless Gitlab.config.registry.enabled
 
       variables.append(key: 'CI_REGISTRY', value: Gitlab.config.registry.host_port)
 
@@ -1813,24 +1984,45 @@ class Project < ActiveRecord::Base
                                 .limit(1)
                                 .select(1)
     source_of_merge_requests.opened
-      .where(allow_maintainer_to_push: true)
+      .where(allow_collaboration: true)
       .where('EXISTS (?)', developer_access_exists)
   end
 
-  def branch_allows_maintainer_push?(user, branch_name)
+  def branch_allows_collaboration?(user, branch_name)
     return false unless user
 
     cache_key = "user:#{user.id}:#{branch_name}:branch_allows_push"
 
-    memoized_results = strong_memoize(:branch_allows_maintainer_push) do
+    memoized_results = strong_memoize(:branch_allows_collaboration) do
       Hash.new do |result, cache_key|
-        result[cache_key] = fetch_branch_allows_maintainer_push?(user, branch_name)
+        result[cache_key] = fetch_branch_allows_collaboration?(user, branch_name)
       end
     end
 
     memoized_results[cache_key]
   end
 
+  def licensed_features
+    []
+  end
+
+  def toggle_ci_cd_settings!(settings_attribute)
+    ci_cd_settings.toggle!(settings_attribute)
+  end
+
+  def gitlab_deploy_token
+    @gitlab_deploy_token ||= deploy_tokens.gitlab_deploy_token
+  end
+
+  def any_lfs_file_locks?
+    lfs_file_locks.any?
+  end
+  request_cache(:any_lfs_file_locks?) { self.id }
+
+  def auto_cancel_pending_pipelines?
+    auto_cancel_pending_pipelines == 'enabled'
+  end
+
   private
 
   def storage
@@ -1859,14 +2051,14 @@ class Project < ActiveRecord::Base
   def check_repository_absence!
     return if skip_disk_validation
 
-    if repository_storage_path.blank? || repository_with_same_path_already_exists?
+    if repository_storage.blank? || repository_with_same_path_already_exists?
       errors.add(:base, 'There is already a repository with that name on disk')
       throw :abort
     end
   end
 
   def repository_with_same_path_already_exists?
-    gitlab_shell.exists?(repository_storage_path, "#{disk_path}.git")
+    gitlab_shell.exists?(repository_storage, "#{disk_path}.git")
   end
 
   # set last_activity_at to the same as created_at
@@ -1954,17 +2146,22 @@ class Project < ActiveRecord::Base
     raise ex
   end
 
-  def fetch_branch_allows_maintainer_push?(user, branch_name)
+  def fetch_branch_allows_collaboration?(user, branch_name)
     check_access = -> do
-      merge_request = source_of_merge_requests.opened
-                        .where(allow_maintainer_to_push: true)
-                        .find_by(source_branch: branch_name)
+      next false if empty_repo?
+
+      merge_requests = source_of_merge_requests.opened
+                         .where(allow_collaboration: true)
 
-      merge_request&.can_be_merged_by?(user)
+      if branch_name
+        merge_requests.find_by(source_branch: branch_name)&.can_be_merged_by?(user)
+      else
+        merge_requests.any? { |merge_request| merge_request.can_be_merged_by?(user) }
+      end
     end
 
     if RequestStore.active?
-      RequestStore.fetch("project-#{id}:branch-#{branch_name}:user-#{user.id}:branch_allows_maintainer_push") do
+      RequestStore.fetch("project-#{id}:branch-#{branch_name}:user-#{user.id}:branch_allows_collaboration") do
         check_access.call
       end
     else
diff --git a/app/models/project_auto_devops.rb b/app/models/project_auto_devops.rb
index ed6c1eddbc1..faa831b1949 100644
--- a/app/models/project_auto_devops.rb
+++ b/app/models/project_auto_devops.rb
@@ -1,11 +1,18 @@
 class ProjectAutoDevops < ActiveRecord::Base
   belongs_to :project
 
+  enum deploy_strategy: {
+    continuous: 0,
+    manual: 1
+  }
+
   scope :enabled, -> { where(enabled: true) }
   scope :disabled, -> { where(enabled: false) }
 
   validates :domain, allow_blank: true, hostname: { allow_numeric_hostname: true }
 
+  after_save :create_gitlab_deploy_token, if: :needs_to_create_deploy_token?
+
   def instance_domain
     Gitlab::CurrentSettings.auto_devops_domain
   end
@@ -20,6 +27,30 @@ class ProjectAutoDevops < ActiveRecord::Base
         variables.append(key: 'AUTO_DEVOPS_DOMAIN',
                          value: domain.presence || instance_domain)
       end
+
+      if manual?
+        variables.append(key: 'STAGING_ENABLED', value: '1')
+        variables.append(key: 'INCREMENTAL_ROLLOUT_ENABLED', value: '1')
+      end
     end
   end
+
+  private
+
+  def create_gitlab_deploy_token
+    project.deploy_tokens.create!(
+      name: DeployToken::GITLAB_DEPLOY_TOKEN_NAME,
+      read_registry: true
+    )
+  end
+
+  def needs_to_create_deploy_token?
+    auto_devops_enabled? &&
+      !project.public? &&
+      !project.deploy_tokens.find_by(name: DeployToken::GITLAB_DEPLOY_TOKEN_NAME).present?
+  end
+
+  def auto_devops_enabled?
+    Gitlab::CurrentSettings.auto_devops_enabled? || enabled?
+  end
 end
diff --git a/app/models/project_ci_cd_setting.rb b/app/models/project_ci_cd_setting.rb
new file mode 100644
index 00000000000..588cced5781
--- /dev/null
+++ b/app/models/project_ci_cd_setting.rb
@@ -0,0 +1,16 @@
+class ProjectCiCdSetting < ActiveRecord::Base
+  belongs_to :project, inverse_of: :ci_cd_settings
+
+  # The version of the schema that first introduced this model/table.
+  MINIMUM_SCHEMA_VERSION = 20180403035759
+
+  def self.available?
+    @available ||=
+      ActiveRecord::Migrator.current_version >= MINIMUM_SCHEMA_VERSION
+  end
+
+  def self.reset_column_information
+    @available = nil
+    super
+  end
+end
diff --git a/app/models/project_deploy_token.rb b/app/models/project_deploy_token.rb
new file mode 100644
index 00000000000..ab4482f0c0b
--- /dev/null
+++ b/app/models/project_deploy_token.rb
@@ -0,0 +1,8 @@
+class ProjectDeployToken < ActiveRecord::Base
+  belongs_to :project
+  belongs_to :deploy_token, inverse_of: :project_deploy_tokens
+
+  validates :deploy_token, presence: true
+  validates :project, presence: true
+  validates :deploy_token_id, uniqueness: { scope: [:project_id] }
+end
diff --git a/app/models/project_import_data.rb b/app/models/project_import_data.rb
index 6da6632f4f2..1d7089ccfc7 100644
--- a/app/models/project_import_data.rb
+++ b/app/models/project_import_data.rb
@@ -3,7 +3,7 @@ require 'carrierwave/orm/activerecord'
 class ProjectImportData < ActiveRecord::Base
   belongs_to :project, inverse_of: :import_data
   attr_encrypted :credentials,
-                 key: Gitlab::Application.secrets.db_key_base,
+                 key: Settings.attr_encrypted_db_key_base,
                  marshal: true,
                  encode: true,
                  mode: :per_attribute_iv_and_salt,
diff --git a/app/models/project_import_state.rb b/app/models/project_import_state.rb
new file mode 100644
index 00000000000..1605317ae14
--- /dev/null
+++ b/app/models/project_import_state.rb
@@ -0,0 +1,55 @@
+class ProjectImportState < ActiveRecord::Base
+  include AfterCommitQueue
+
+  self.table_name = "project_mirror_data"
+
+  belongs_to :project, inverse_of: :import_state
+
+  validates :project, presence: true
+
+  state_machine :status, initial: :none do
+    event :schedule do
+      transition [:none, :finished, :failed] => :scheduled
+    end
+
+    event :force_start do
+      transition [:none, :finished, :failed] => :started
+    end
+
+    event :start do
+      transition scheduled: :started
+    end
+
+    event :finish do
+      transition started: :finished
+    end
+
+    event :fail_op do
+      transition [:scheduled, :started] => :failed
+    end
+
+    state :scheduled
+    state :started
+    state :finished
+    state :failed
+
+    after_transition [:none, :finished, :failed] => :scheduled do |state, _|
+      state.run_after_commit do
+        job_id = project.add_import_job
+        update(jid: job_id) if job_id
+      end
+    end
+
+    after_transition started: :finished do |state, _|
+      project = state.project
+
+      project.reset_cache_and_import_attrs
+
+      if Gitlab::ImportSources.importer_names.include?(project.import_type) && project.repo_exists?
+        state.run_after_commit do
+          Projects::AfterImportService.new(project).execute
+        end
+      end
+    end
+  end
+end
diff --git a/app/models/project_services/bamboo_service.rb b/app/models/project_services/bamboo_service.rb
index 54e4b3278db..7f4c47a6d14 100644
--- a/app/models/project_services/bamboo_service.rb
+++ b/app/models/project_services/bamboo_service.rb
@@ -3,7 +3,7 @@ class BambooService < CiService
 
   prop_accessor :bamboo_url, :build_key, :username, :password
 
-  validates :bamboo_url, presence: true, url: true, if: :activated?
+  validates :bamboo_url, presence: true, public_url: true, if: :activated?
   validates :build_key, presence: true, if: :activated?
   validates :username,
     presence: true,
diff --git a/app/models/project_services/bugzilla_service.rb b/app/models/project_services/bugzilla_service.rb
index 046e2809f45..e4e3a80976b 100644
--- a/app/models/project_services/bugzilla_service.rb
+++ b/app/models/project_services/bugzilla_service.rb
@@ -1,5 +1,5 @@
 class BugzillaService < IssueTrackerService
-  validates :project_url, :issues_url, :new_issue_url, presence: true, url: true, if: :activated?
+  validates :project_url, :issues_url, :new_issue_url, presence: true, public_url: true, if: :activated?
 
   prop_accessor :title, :description, :project_url, :issues_url, :new_issue_url
 
diff --git a/app/models/project_services/buildkite_service.rb b/app/models/project_services/buildkite_service.rb
index d2aaff8817a..35884c4560c 100644
--- a/app/models/project_services/buildkite_service.rb
+++ b/app/models/project_services/buildkite_service.rb
@@ -8,7 +8,7 @@ class BuildkiteService < CiService
   prop_accessor :project_url, :token
   boolean_accessor :enable_ssl_verification
 
-  validates :project_url, presence: true, url: true, if: :activated?
+  validates :project_url, presence: true, public_url: true, if: :activated?
   validates :token, presence: true, if: :activated?
 
   after_save :compose_service_hook, if: :activated?
diff --git a/app/models/project_services/chat_message/base_message.rb b/app/models/project_services/chat_message/base_message.rb
index 22a65b5145e..f710fa85b5d 100644
--- a/app/models/project_services/chat_message/base_message.rb
+++ b/app/models/project_services/chat_message/base_message.rb
@@ -26,13 +26,18 @@ module ChatMessage
       end
     end
 
-    def pretext
+    def summary
       return message if markdown
 
       format(message)
     end
 
+    def pretext
+      summary
+    end
+
     def fallback
+      format(message)
     end
 
     def attachments
diff --git a/app/models/project_services/chat_message/pipeline_message.rb b/app/models/project_services/chat_message/pipeline_message.rb
index 2135122278a..96fd23aede3 100644
--- a/app/models/project_services/chat_message/pipeline_message.rb
+++ b/app/models/project_services/chat_message/pipeline_message.rb
@@ -23,10 +23,6 @@ module ChatMessage
       ''
     end
 
-    def fallback
-      format(message)
-    end
-
     def attachments
       return message if markdown
 
diff --git a/app/models/project_services/chat_notification_service.rb b/app/models/project_services/chat_notification_service.rb
index dab0ea1a681..a60b4c7fd0d 100644
--- a/app/models/project_services/chat_notification_service.rb
+++ b/app/models/project_services/chat_notification_service.rb
@@ -8,7 +8,7 @@ class ChatNotificationService < Service
   prop_accessor :webhook, :username, :channel
   boolean_accessor :notify_only_broken_pipelines, :notify_only_default_branch
 
-  validates :webhook, presence: true, url: true, if: :activated?
+  validates :webhook, presence: true, public_url: true, if: :activated?
 
   def initialize_properties
     # Custom serialized properties initialization
@@ -21,8 +21,16 @@ class ChatNotificationService < Service
     end
   end
 
+  def confidential_issue_channel
+    properties['confidential_issue_channel'].presence || properties['issue_channel']
+  end
+
+  def confidential_note_channel
+    properties['confidential_note_channel'].presence || properties['note_channel']
+  end
+
   def self.supported_events
-    %w[push issue confidential_issue merge_request note tag_push
+    %w[push issue confidential_issue merge_request note confidential_note tag_push
        pipeline wiki_page]
   end
 
@@ -55,7 +63,9 @@ class ChatNotificationService < Service
 
     return false unless message
 
-    channel_name = get_channel_field(object_kind).presence || channel
+    event_type = data[:event_type] || object_kind
+
+    channel_name = get_channel_field(event_type).presence || channel
 
     opts = {}
     opts[:channel] = channel_name if channel_name
@@ -145,6 +155,7 @@ class ChatNotificationService < Service
   end
 
   def notify_for_ref?(data)
+    return true if data[:object_kind] == 'tag_push'
     return true if data.dig(:object_attributes, :tag)
     return true unless notify_only_default_branch?
 
diff --git a/app/models/project_services/custom_issue_tracker_service.rb b/app/models/project_services/custom_issue_tracker_service.rb
index b9e3e982b64..456c7f5cee2 100644
--- a/app/models/project_services/custom_issue_tracker_service.rb
+++ b/app/models/project_services/custom_issue_tracker_service.rb
@@ -1,5 +1,5 @@
 class CustomIssueTrackerService < IssueTrackerService
-  validates :project_url, :issues_url, :new_issue_url, presence: true, url: true, if: :activated?
+  validates :project_url, :issues_url, :new_issue_url, presence: true, public_url: true, if: :activated?
 
   prop_accessor :title, :description, :project_url, :issues_url, :new_issue_url
 
diff --git a/app/models/project_services/drone_ci_service.rb b/app/models/project_services/drone_ci_service.rb
index 71b10fc6bc1..ab4e46da89f 100644
--- a/app/models/project_services/drone_ci_service.rb
+++ b/app/models/project_services/drone_ci_service.rb
@@ -4,7 +4,7 @@ class DroneCiService < CiService
   prop_accessor :drone_url, :token
   boolean_accessor :enable_ssl_verification
 
-  validates :drone_url, presence: true, url: true, if: :activated?
+  validates :drone_url, presence: true, public_url: true, if: :activated?
   validates :token, presence: true, if: :activated?
 
   after_save :compose_service_hook, if: :activated?
@@ -115,6 +115,6 @@ class DroneCiService < CiService
 
   def merge_request_valid?(data)
     data[:object_attributes][:state] == 'opened' &&
-      data[:object_attributes][:merge_status] == 'unchecked'
+      MergeRequest.state_machines[:merge_status].check_state?(data[:object_attributes][:merge_status])
   end
 end
diff --git a/app/models/project_services/external_wiki_service.rb b/app/models/project_services/external_wiki_service.rb
index 1553f169827..a4b1ef09e93 100644
--- a/app/models/project_services/external_wiki_service.rb
+++ b/app/models/project_services/external_wiki_service.rb
@@ -1,7 +1,7 @@
 class ExternalWikiService < Service
   prop_accessor :external_wiki_url
 
-  validates :external_wiki_url, presence: true, url: true, if: :activated?
+  validates :external_wiki_url, presence: true, public_url: true, if: :activated?
 
   def title
     'External Wiki'
diff --git a/app/models/project_services/flowdock_service.rb b/app/models/project_services/flowdock_service.rb
index 4d23a17a545..da01ac1b7cf 100644
--- a/app/models/project_services/flowdock_service.rb
+++ b/app/models/project_services/flowdock_service.rb
@@ -1,5 +1,51 @@
 require "flowdock-git-hook"
 
+# Flow dock depends on Grit to compute the number of commits between two given
+# commits. To make this depend on Gitaly, a monkey patch is applied
+module Flowdock
+  class Git
+    # pass down a Repository all the way down
+    def repo
+      @options[:repo]
+    end
+
+    def config
+      {}
+    end
+
+    def messages
+      Git::Builder.new(repo: repo,
+                       ref: @ref,
+                       before: @from,
+                       after: @to,
+                       commit_url: @commit_url,
+                       branch_url: @branch_url,
+                       diff_url: @diff_url,
+                       repo_url: @repo_url,
+                       repo_name: @repo_name,
+                       permanent_refs: @permanent_refs,
+                       tags: tags
+                      ).to_hashes
+    end
+
+    class Builder
+      def commits
+        @repo.commits_between(@before, @after).map do |commit|
+          {
+            url: @opts[:commit_url] ? @opts[:commit_url] % [commit.sha] : nil,
+            id: commit.sha,
+            message: commit.message,
+            author: {
+              name: commit.author_name,
+              email: commit.author_email
+            }
+          }
+        end
+      end
+    end
+  end
+end
+
 class FlowdockService < Service
   prop_accessor :token
   validates :token, presence: true, if: :activated?
@@ -34,7 +80,7 @@ class FlowdockService < Service
       data[:before],
       data[:after],
       token: token,
-      repo: project.repository.path_to_repo,
+      repo: project.repository,
       repo_url: "#{Gitlab.config.gitlab.url}/#{project.full_path}",
       commit_url: "#{Gitlab.config.gitlab.url}/#{project.full_path}/commit/%s",
       diff_url: "#{Gitlab.config.gitlab.url}/#{project.full_path}/compare/%s...%s"
diff --git a/app/models/project_services/gemnasium_service.rb b/app/models/project_services/gemnasium_service.rb
index 017a9b2df6e..8a6b0ed1a5f 100644
--- a/app/models/project_services/gemnasium_service.rb
+++ b/app/models/project_services/gemnasium_service.rb
@@ -3,6 +3,7 @@ require "gemnasium/gitlab_service"
 class GemnasiumService < Service
   prop_accessor :token, :api_key
   validates :token, :api_key, presence: true, if: :activated?
+  validate :deprecation_validation
 
   def title
     'Gemnasium'
@@ -27,16 +28,33 @@ class GemnasiumService < Service
     %w(push)
   end
 
+  def deprecated?
+    true
+  end
+
+  def deprecation_message
+    "Gemnasium has been acquired by GitLab in January 2018. Since May 15, 2018, the service provided by Gemnasium is no longer available."
+  end
+
+  def deprecation_validation
+    errors[:base] << deprecation_message
+  end
+
   def execute(data)
     return unless supported_events.include?(data[:object_kind])
 
+    # Gitaly: this class will be removed https://gitlab.com/gitlab-org/gitlab-ee/issues/6010
+    repo_path = Gitlab::GitalyClient::StorageSettings.allow_disk_access do
+      project.repository.path_to_repo
+    end
+
     Gemnasium::GitlabService.execute(
       ref: data[:ref],
       before: data[:before],
       after: data[:after],
       token: token,
       api_key: api_key,
-      repo: project.repository.path_to_repo
+      repo: repo_path
     )
   end
 end
diff --git a/app/models/project_services/gitlab_issue_tracker_service.rb b/app/models/project_services/gitlab_issue_tracker_service.rb
index 88c428b4aae..16e32a4139e 100644
--- a/app/models/project_services/gitlab_issue_tracker_service.rb
+++ b/app/models/project_services/gitlab_issue_tracker_service.rb
@@ -1,7 +1,7 @@
 class GitlabIssueTrackerService < IssueTrackerService
   include Gitlab::Routing
 
-  validates :project_url, :issues_url, :new_issue_url, presence: true, url: true, if: :activated?
+  validates :project_url, :issues_url, :new_issue_url, presence: true, public_url: true, if: :activated?
 
   prop_accessor :title, :description, :project_url, :issues_url, :new_issue_url
 
diff --git a/app/models/project_services/hipchat_service.rb b/app/models/project_services/hipchat_service.rb
index f31c3f02af2..dce878e485f 100644
--- a/app/models/project_services/hipchat_service.rb
+++ b/app/models/project_services/hipchat_service.rb
@@ -46,7 +46,7 @@ class HipchatService < Service
   end
 
   def self.supported_events
-    %w(push issue confidential_issue merge_request note tag_push pipeline)
+    %w(push issue confidential_issue merge_request note confidential_note tag_push pipeline)
   end
 
   def execute(data)
diff --git a/app/models/project_services/jira_service.rb b/app/models/project_services/jira_service.rb
index ed4bbfb6cfc..412d62388f0 100644
--- a/app/models/project_services/jira_service.rb
+++ b/app/models/project_services/jira_service.rb
@@ -3,8 +3,8 @@ class JiraService < IssueTrackerService
   include ApplicationHelper
   include ActionView::Helpers::AssetUrlHelper
 
-  validates :url, url: true, presence: true, if: :activated?
-  validates :api_url, url: true, allow_blank: true
+  validates :url, public_url: true, presence: true, if: :activated?
+  validates :api_url, public_url: true, allow_blank: true
   validates :username, presence: true, if: :activated?
   validates :password, presence: true, if: :activated?
 
@@ -265,7 +265,7 @@ class JiraService < IssueTrackerService
         title: title,
         status: status,
         icon: {
-          title: 'GitLab', url16x16: asset_url('favicon.ico', host: gitlab_config.url)
+          title: 'GitLab', url16x16: asset_url(Gitlab::Favicon.main, host: gitlab_config.url)
         }
       }
     }
diff --git a/app/models/project_services/kubernetes_service.rb b/app/models/project_services/kubernetes_service.rb
index 20fed432e55..ddd4026019b 100644
--- a/app/models/project_services/kubernetes_service.rb
+++ b/app/models/project_services/kubernetes_service.rb
@@ -24,7 +24,7 @@ class KubernetesService < DeploymentService
   prop_accessor :ca_pem
 
   with_options presence: true, if: :activated? do
-    validates :api_url, url: true
+    validates :api_url, public_url: true
     validates :token
   end
 
diff --git a/app/models/project_services/microsoft_teams_service.rb b/app/models/project_services/microsoft_teams_service.rb
index 2facff53e26..99500caec0e 100644
--- a/app/models/project_services/microsoft_teams_service.rb
+++ b/app/models/project_services/microsoft_teams_service.rb
@@ -44,7 +44,7 @@ class MicrosoftTeamsService < ChatNotificationService
   def notify(message, opts)
     MicrosoftTeams::Notifier.new(webhook).ping(
       title: message.project_name,
-      pretext: message.pretext,
+      summary: message.summary,
       activity: message.activity,
       attachments: message.attachments
     )
diff --git a/app/models/project_services/mock_ci_service.rb b/app/models/project_services/mock_ci_service.rb
index 2221459c90b..b89dc07a73e 100644
--- a/app/models/project_services/mock_ci_service.rb
+++ b/app/models/project_services/mock_ci_service.rb
@@ -3,7 +3,7 @@ class MockCiService < CiService
   ALLOWED_STATES = %w[failed canceled running pending success success_with_warnings skipped not_found].freeze
 
   prop_accessor :mock_service_url
-  validates :mock_service_url, presence: true, url: true, if: :activated?
+  validates :mock_service_url, presence: true, public_url: true, if: :activated?
 
   def title
     'MockCI'
diff --git a/app/models/project_services/prometheus_service.rb b/app/models/project_services/prometheus_service.rb
index dcaeb65dc32..df4254e0523 100644
--- a/app/models/project_services/prometheus_service.rb
+++ b/app/models/project_services/prometheus_service.rb
@@ -6,7 +6,7 @@ class PrometheusService < MonitoringService
   boolean_accessor :manual_configuration
 
   with_options presence: true, if: :manual_configuration? do
-    validates :api_url, url: true
+    validates :api_url, public_url: true
   end
 
   before_save :synchronize_service_state
diff --git a/app/models/project_services/redmine_service.rb b/app/models/project_services/redmine_service.rb
index 6acf611eba5..3721093a6d1 100644
--- a/app/models/project_services/redmine_service.rb
+++ b/app/models/project_services/redmine_service.rb
@@ -1,5 +1,5 @@
 class RedmineService < IssueTrackerService
-  validates :project_url, :issues_url, :new_issue_url, presence: true, url: true, if: :activated?
+  validates :project_url, :issues_url, :new_issue_url, presence: true, public_url: true, if: :activated?
 
   prop_accessor :title, :description, :project_url, :issues_url, :new_issue_url
 
diff --git a/app/models/project_services/teamcity_service.rb b/app/models/project_services/teamcity_service.rb
index 145313b8e71..802678147cf 100644
--- a/app/models/project_services/teamcity_service.rb
+++ b/app/models/project_services/teamcity_service.rb
@@ -3,7 +3,7 @@ class TeamcityService < CiService
 
   prop_accessor :teamcity_url, :build_type, :username, :password
 
-  validates :teamcity_url, presence: true, url: true, if: :activated?
+  validates :teamcity_url, presence: true, public_url: true, if: :activated?
   validates :build_type, presence: true, if: :activated?
   validates :username,
     presence: true,
diff --git a/app/models/project_statistics.rb b/app/models/project_statistics.rb
index 87a4350f022..5d4e3c34b39 100644
--- a/app/models/project_statistics.rb
+++ b/app/models/project_statistics.rb
@@ -4,15 +4,15 @@ class ProjectStatistics < ActiveRecord::Base
 
   before_save :update_storage_size
 
-  STORAGE_COLUMNS = [:repository_size, :lfs_objects_size, :build_artifacts_size].freeze
-  STATISTICS_COLUMNS = [:commit_count] + STORAGE_COLUMNS
+  COLUMNS_TO_REFRESH = [:repository_size, :lfs_objects_size, :commit_count].freeze
+  INCREMENTABLE_COLUMNS = [:build_artifacts_size].freeze
 
   def total_repository_size
     repository_size + lfs_objects_size
   end
 
   def refresh!(only: nil)
-    STATISTICS_COLUMNS.each do |column, generator|
+    COLUMNS_TO_REFRESH.each do |column, generator|
       if only.blank? || only.include?(column)
         public_send("update_#{column}") # rubocop:disable GitlabSecurity/PublicSend
       end
@@ -34,13 +34,15 @@ class ProjectStatistics < ActiveRecord::Base
     self.lfs_objects_size = project.lfs_objects.sum(:size)
   end
 
-  def update_build_artifacts_size
-    self.build_artifacts_size =
-      project.builds.sum(:artifacts_size) +
-      Ci::JobArtifact.artifacts_size_for(self.project)
+  def update_storage_size
+    self.storage_size = repository_size + lfs_objects_size + build_artifacts_size
   end
 
-  def update_storage_size
-    self.storage_size = STORAGE_COLUMNS.sum(&method(:read_attribute))
+  def self.increment_statistic(project_id, key, amount)
+    raise ArgumentError, "Cannot increment attribute: #{key}" unless key.in?(INCREMENTABLE_COLUMNS)
+    return if amount == 0
+
+    where(project_id: project_id)
+      .update_all(["#{key} = COALESCE(#{key}, 0) + (?)", amount])
   end
 end
diff --git a/app/models/project_team.rb b/app/models/project_team.rb
index 33280eda0b9..9a38806baab 100644
--- a/app/models/project_team.rb
+++ b/app/models/project_team.rb
@@ -24,7 +24,7 @@ class ProjectTeam
   end
 
   def add_role(user, role, current_user: nil)
-    send(:"add_#{role}", user, current_user: current_user) # rubocop:disable GitlabSecurity/PublicSend
+    public_send(:"add_#{role}", user, current_user: current_user) # rubocop:disable GitlabSecurity/PublicSend
   end
 
   def find_member(user_id)
diff --git a/app/models/project_wiki.rb b/app/models/project_wiki.rb
index e70b7dc2325..05b07804ea8 100644
--- a/app/models/project_wiki.rb
+++ b/app/models/project_wiki.rb
@@ -24,7 +24,7 @@ class ProjectWiki
   end
 
   delegate :empty?, to: :pages
-  delegate :repository_storage_path, :hashed_storage?, to: :project
+  delegate :repository_storage, :hashed_storage?, to: :project
 
   def path
     @project.path + '.wiki'
@@ -147,10 +147,6 @@ class ProjectWiki
     [title, title_array.join("/")]
   end
 
-  def search_files(query)
-    repository.search_files_by_content(query, default_branch)
-  end
-
   def repository
     @repository ||= Repository.new(full_path, @project, disk_path: disk_path, is_wiki: true)
   end
@@ -186,7 +182,11 @@ class ProjectWiki
   def commit_details(action, message = nil, title = nil)
     commit_message = message || default_message(action, title)
 
-    Gitlab::Git::Wiki::CommitDetails.new(@user.name, @user.email, commit_message)
+    Gitlab::Git::Wiki::CommitDetails.new(@user.id,
+                                         @user.username,
+                                         @user.name,
+                                         @user.email,
+                                         commit_message)
   end
 
   def default_message(action, title)
diff --git a/app/models/protected_branch.rb b/app/models/protected_branch.rb
index 609780c5587..dff99cfca35 100644
--- a/app/models/protected_branch.rb
+++ b/app/models/protected_branch.rb
@@ -4,6 +4,15 @@ class ProtectedBranch < ActiveRecord::Base
 
   protected_ref_access_levels :merge, :push
 
+  def self.protected_ref_accessible_to?(ref, user, project:, action:, protected_refs: nil)
+    # Maintainers, owners and admins are allowed to create the default branch
+    if default_branch_protected? && project.empty_repo?
+      return true if user.admin? || project.team.max_member_access(user.id) > Gitlab::Access::DEVELOPER
+    end
+
+    super
+  end
+
   # Check if branch name is marked as protected in the system
   def self.protected?(project, ref_name)
     return true if project.empty_repo? && default_branch_protected?
diff --git a/app/models/redirect_route.rb b/app/models/redirect_route.rb
index 20532527346..31de204d824 100644
--- a/app/models/redirect_route.rb
+++ b/app/models/redirect_route.rb
@@ -17,32 +17,4 @@ class RedirectRoute < ActiveRecord::Base
 
     where(wheres, path, "#{sanitize_sql_like(path)}/%")
   end
-
-  scope :permanent, -> do
-    if column_permanent_exists?
-      where(permanent: true)
-    else
-      none
-    end
-  end
-
-  scope :temporary, -> do
-    if column_permanent_exists?
-      where(permanent: [false, nil])
-    else
-      all
-    end
-  end
-
-  default_value_for :permanent, false
-
-  def permanent=(value)
-    if self.class.column_permanent_exists?
-      super
-    end
-  end
-
-  def self.column_permanent_exists?
-    ActiveRecord::Base.connection.column_exists?(:redirect_routes, :permanent)
-  end
 end
diff --git a/app/models/remote_mirror.rb b/app/models/remote_mirror.rb
new file mode 100644
index 00000000000..c4b5dd2dc96
--- /dev/null
+++ b/app/models/remote_mirror.rb
@@ -0,0 +1,218 @@
+class RemoteMirror < ActiveRecord::Base
+  include AfterCommitQueue
+
+  PROTECTED_BACKOFF_DELAY   = 1.minute
+  UNPROTECTED_BACKOFF_DELAY = 5.minutes
+
+  attr_encrypted :credentials,
+                 key: Settings.attr_encrypted_db_key_base,
+                 marshal: true,
+                 encode: true,
+                 mode: :per_attribute_iv_and_salt,
+                 insecure_mode: true,
+                 algorithm: 'aes-256-cbc'
+
+  default_value_for :only_protected_branches, true
+
+  belongs_to :project, inverse_of: :remote_mirrors
+
+  validates :url, presence: true, url: { protocols: %w(ssh git http https), allow_blank: true, enforce_user: true }
+
+  before_save :set_new_remote_name, if: :mirror_url_changed?
+
+  after_save :set_override_remote_mirror_available, unless: -> { Gitlab::CurrentSettings.current_application_settings.mirror_available }
+  after_save :refresh_remote, if: :mirror_url_changed?
+  after_update :reset_fields, if: :mirror_url_changed?
+
+  after_commit :remove_remote, on: :destroy
+
+  scope :enabled, -> { where(enabled: true) }
+  scope :started, -> { with_update_status(:started) }
+  scope :stuck,   -> { started.where('last_update_at < ? OR (last_update_at IS NULL AND updated_at < ?)', 1.day.ago, 1.day.ago) }
+
+  state_machine :update_status, initial: :none do
+    event :update_start do
+      transition [:none, :finished, :failed] => :started
+    end
+
+    event :update_finish do
+      transition started: :finished
+    end
+
+    event :update_fail do
+      transition started: :failed
+    end
+
+    state :started
+    state :finished
+    state :failed
+
+    after_transition any => :started do |remote_mirror, _|
+      Gitlab::Metrics.add_event(:remote_mirrors_running, path: remote_mirror.project.full_path)
+
+      remote_mirror.update(last_update_started_at: Time.now)
+    end
+
+    after_transition started: :finished do |remote_mirror, _|
+      Gitlab::Metrics.add_event(:remote_mirrors_finished, path: remote_mirror.project.full_path)
+
+      timestamp = Time.now
+      remote_mirror.update_attributes!(
+        last_update_at: timestamp, last_successful_update_at: timestamp, last_error: nil
+      )
+    end
+
+    after_transition started: :failed do |remote_mirror, _|
+      Gitlab::Metrics.add_event(:remote_mirrors_failed, path: remote_mirror.project.full_path)
+
+      remote_mirror.update(last_update_at: Time.now)
+    end
+  end
+
+  def remote_name
+    super || fallback_remote_name
+  end
+
+  def update_failed?
+    update_status == 'failed'
+  end
+
+  def update_in_progress?
+    update_status == 'started'
+  end
+
+  def update_repository(options)
+    raw.update(options)
+  end
+
+  def sync?
+    enabled?
+  end
+
+  def sync
+    return unless sync?
+
+    if recently_scheduled?
+      RepositoryUpdateRemoteMirrorWorker.perform_in(backoff_delay, self.id, Time.now)
+    else
+      RepositoryUpdateRemoteMirrorWorker.perform_async(self.id, Time.now)
+    end
+  end
+
+  def enabled
+    return false unless project && super
+    return false unless project.remote_mirror_available?
+    return false unless project.repository_exists?
+    return false if project.pending_delete?
+
+    true
+  end
+  alias_method :enabled?, :enabled
+
+  def updated_since?(timestamp)
+    last_update_started_at && last_update_started_at > timestamp && !update_failed?
+  end
+
+  def mark_for_delete_if_blank_url
+    mark_for_destruction if url.blank?
+  end
+
+  def mark_as_failed(error_message)
+    update_fail
+    update_column(:last_error, Gitlab::UrlSanitizer.sanitize(error_message))
+  end
+
+  def url=(value)
+    super(value) && return unless Gitlab::UrlSanitizer.valid?(value)
+
+    mirror_url = Gitlab::UrlSanitizer.new(value)
+    self.credentials = mirror_url.credentials
+
+    super(mirror_url.sanitized_url)
+  end
+
+  def url
+    if super
+      Gitlab::UrlSanitizer.new(super, credentials: credentials).full_url
+    end
+  rescue
+    super
+  end
+
+  def safe_url
+    return if url.nil?
+
+    result = URI.parse(url)
+    result.password = '*****' if result.password
+    result.user = '*****' if result.user && result.user != "git" # tokens or other data may be saved as user
+    result.to_s
+  end
+
+  private
+
+  def raw
+    @raw ||= Gitlab::Git::RemoteMirror.new(project.repository.raw, remote_name)
+  end
+
+  def fallback_remote_name
+    return unless id
+
+    "remote_mirror_#{id}"
+  end
+
+  def recently_scheduled?
+    return false unless self.last_update_started_at
+
+    self.last_update_started_at >= Time.now - backoff_delay
+  end
+
+  def backoff_delay
+    if self.only_protected_branches
+      PROTECTED_BACKOFF_DELAY
+    else
+      UNPROTECTED_BACKOFF_DELAY
+    end
+  end
+
+  def reset_fields
+    update_columns(
+      last_error: nil,
+      last_update_at: nil,
+      last_successful_update_at: nil,
+      update_status: 'finished'
+    )
+  end
+
+  def set_override_remote_mirror_available
+    enabled = read_attribute(:enabled)
+
+    project.update(remote_mirror_available_overridden: enabled)
+  end
+
+  def set_new_remote_name
+    self.remote_name = "remote_mirror_#{SecureRandom.hex}"
+  end
+
+  def refresh_remote
+    return unless project
+
+    # Before adding a new remote we have to delete the data from
+    # the previous remote name
+    prev_remote_name = remote_name_was || fallback_remote_name
+    run_after_commit do
+      project.repository.async_remove_remote(prev_remote_name)
+    end
+
+    project.repository.add_remote(remote_name, url)
+  end
+
+  def remove_remote
+    return unless project # could be pending to delete so don't need to touch the git repository
+
+    project.repository.async_remove_remote(remote_name)
+  end
+
+  def mirror_url_changed?
+    url_changed? || encrypted_credentials_changed?
+  end
+end
diff --git a/app/models/repository.rb b/app/models/repository.rb
index 42f1ac43e29..3056c20516a 100644
--- a/app/models/repository.rb
+++ b/app/models/repository.rb
@@ -21,7 +21,7 @@ class Repository
   attr_accessor :full_path, :disk_path, :project, :is_wiki
 
   delegate :ref_name_for_sha, to: :raw_repository
-  delegate :bundle_to_disk, :create_from_bundle, to: :raw_repository
+  delegate :bundle_to_disk, to: :raw_repository
 
   CreateTreeError = Class.new(StandardError)
 
@@ -37,7 +37,7 @@ class Repository
                       changelog license_blob license_key gitignore koding_yml
                       gitlab_ci_yml branch_names tag_names branch_count
                       tag_count avatar exists? root_ref has_visible_content?
-                      issue_template_names merge_request_template_names).freeze
+                      issue_template_names merge_request_template_names xcode_project?).freeze
 
   # Methods that use cache_method but only memoize the value
   MEMOIZED_CACHED_METHODS = %i(license).freeze
@@ -55,7 +55,8 @@ class Repository
     gitlab_ci: :gitlab_ci_yml,
     avatar: :avatar,
     issue_template: :issue_template_names,
-    merge_request_template: :merge_request_template_names
+    merge_request_template: :merge_request_template_names,
+    xcode_config: :xcode_project?
   }.freeze
 
   def initialize(full_path, project, disk_path: nil, is_wiki: false)
@@ -84,19 +85,20 @@ class Repository
 
   # Return absolute path to repository
   def path_to_repo
-    @path_to_repo ||= File.expand_path(
-      File.join(repository_storage_path, disk_path + '.git')
-    )
+    @path_to_repo ||=
+      begin
+        storage = Gitlab.config.repositories.storages[@project.repository_storage]
+
+        File.expand_path(
+          File.join(storage.legacy_disk_path, disk_path + '.git')
+        )
+      end
   end
 
   def inspect
     "#<#{self.class.name}:#{@disk_path}>"
   end
 
-  def create_hooks
-    Gitlab::Git::Repository.create_hooks(path_to_repo, Gitlab.config.gitlab_shell.hooks_path)
-  end
-
   def commit(ref = 'HEAD')
     return nil unless exists?
     return ref if ref.is_a?(::Commit)
@@ -152,7 +154,10 @@ class Repository
 
   # Returns a list of commits that are not present in any reference
   def new_commits(newrev)
-    refs = ::Gitlab::Git::RevList.new(raw, newrev: newrev).new_refs
+    # Gitaly migration: https://gitlab.com/gitlab-org/gitaly/issues/1233
+    refs = Gitlab::GitalyClient::StorageSettings.allow_disk_access do
+      ::Gitlab::Git::RevList.new(raw, newrev: newrev).new_refs
+    end
 
     refs.map { |sha| commit(sha.strip) }
   end
@@ -253,13 +258,13 @@ class Repository
   end
 
   def diverging_commit_counts(branch)
-    root_ref_hash = raw_repository.commit(root_ref).id
+    @root_ref_hash ||= raw_repository.commit(root_ref).id
     cache.fetch(:"diverging_commit_counts_#{branch.name}") do
       # Rugged seems to throw a `ReferenceError` when given branch_names rather
       # than SHA-1 hashes
       number_commits_behind, number_commits_ahead =
         raw_repository.count_commits_between(
-          root_ref_hash,
+          @root_ref_hash,
           branch.dereferenced_target.sha,
           left_right: true,
           max_count: MAX_DIVERGING_COUNT)
@@ -268,6 +273,16 @@ class Repository
     end
   end
 
+  def archive_metadata(ref, storage_path, format = "tar.gz", append_sha:)
+    raw_repository.archive_metadata(
+      ref,
+      storage_path,
+      project.path,
+      format,
+      append_sha: append_sha
+    )
+  end
+
   def expire_tags_cache
     expire_method_caches(%i(tag_names tag_count))
     @tags = nil
@@ -335,6 +350,7 @@ class Repository
     return unless empty?
 
     expire_method_caches(%i(has_visible_content?))
+    raw_repository.expire_has_local_branches_cache
   end
 
   def lookup_cache
@@ -592,6 +608,11 @@ class Repository
   end
   cache_method :gitlab_ci_yml
 
+  def xcode_project?
+    file_on_head(:xcode_config, :tree).present?
+  end
+  cache_method :xcode_project?
+
   def head_commit
     @head_commit ||= commit(self.root_ref)
   end
@@ -829,7 +850,7 @@ class Repository
     @root_ref_sha ||= commit(root_ref).sha
   end
 
-  delegate :merged_branch_names, :can_be_merged?, to: :raw_repository
+  delegate :merged_branch_names, to: :raw_repository
 
   def merge_base(first_commit_id, second_commit_id)
     first_commit_id = commit(first_commit_id).try(:id) || first_commit_id
@@ -852,13 +873,27 @@ class Repository
     add_remote(remote_name, url, mirror_refmap: refmap)
     fetch_remote(remote_name, forced: forced, prune: prune)
   ensure
-    remove_remote(remote_name) if tmp_remote_name
+    async_remove_remote(remote_name) if tmp_remote_name
   end
 
   def fetch_remote(remote, forced: false, ssh_auth: nil, no_tags: false, prune: true)
     gitlab_shell.fetch_remote(raw_repository, remote, ssh_auth: ssh_auth, forced: forced, no_tags: no_tags, prune: prune)
   end
 
+  def async_remove_remote(remote_name)
+    return unless remote_name
+
+    job_id = RepositoryRemoveRemoteWorker.perform_async(project.id, remote_name)
+
+    if job_id
+      Rails.logger.info("Remove remote job scheduled for #{project.id} with remote name: #{remote_name} job ID #{job_id}.")
+    else
+      Rails.logger.info("Remove remote job failed to create for #{project.id} with remote name #{remote_name}.")
+    end
+
+    job_id
+  end
+
   def fetch_source_branch!(source_repository, source_branch, local_ref)
     raw_repository.fetch_source_branch!(source_repository.raw_repository, source_branch, local_ref)
   end
@@ -898,11 +933,21 @@ class Repository
     end
   end
 
-  def file_on_head(type)
-    if head = tree(:head)
-      head.blobs.find do |blob|
-        Gitlab::FileDetector.type_of(blob.path) == type
+  def file_on_head(type, object_type = :blob)
+    return unless head = tree(:head)
+
+    objects =
+      case object_type
+      when :blob
+        head.blobs
+      when :tree
+        head.trees
+      else
+        raise ArgumentError, "Object type #{object_type} is not supported"
       end
+
+    objects.find do |object|
+      Gitlab::FileDetector.type_of(object.path) == type
     end
   end
 
@@ -914,12 +959,12 @@ class Repository
     blob_data_at(sha, path)
   end
 
-  def fetch_ref(source_repository, source_ref:, target_ref:)
-    raw_repository.fetch_ref(source_repository.raw_repository, source_ref: source_ref, target_ref: target_ref)
+  def lfsconfig_for(sha)
+    blob_data_at(sha, '.lfsconfig')
   end
 
-  def repository_storage_path
-    @project.repository_storage_path
+  def fetch_ref(source_repository, source_ref:, target_ref:)
+    raw_repository.fetch_ref(source_repository.raw_repository, source_ref: source_ref, target_ref: target_ref)
   end
 
   def rebase(user, merge_request)
@@ -929,6 +974,22 @@ class Repository
                                        remote_branch: merge_request.target_branch)
   end
 
+  def blob_data_at(sha, path)
+    blob = blob_at(sha, path)
+    return unless blob
+
+    blob.load_all_data!
+    blob.data
+  end
+
+  def squash(user, merge_request)
+    raw.squash(user, merge_request.id, branch: merge_request.target_branch,
+                                       start_sha: merge_request.diff_start_sha,
+                                       end_sha: merge_request.diff_head_sha,
+                                       author: merge_request.author,
+                                       message: merge_request.title)
+  end
+
   private
 
   # TODO Generice finder, later split this on finders by Ref or Oid
@@ -943,14 +1004,6 @@ class Repository
     ::Commit.new(commit, @project) if commit
   end
 
-  def blob_data_at(sha, path)
-    blob = blob_at(sha, path)
-    return unless blob
-
-    blob.load_all_data!
-    blob.data
-  end
-
   def cache
     @cache ||= Gitlab::RepositoryCache.new(self)
   end
diff --git a/app/models/route.rb b/app/models/route.rb
index 07d96c21cf1..2d609920051 100644
--- a/app/models/route.rb
+++ b/app/models/route.rb
@@ -10,8 +10,6 @@ class Route < ActiveRecord::Base
     presence: true,
     uniqueness: { case_sensitive: false }
 
-  validate :ensure_permanent_paths, if: :path_changed?
-
   before_validation :delete_conflicting_orphaned_routes
   after_create :delete_conflicting_redirects
   after_update :delete_conflicting_redirects, if: :path_changed?
@@ -45,7 +43,7 @@ class Route < ActiveRecord::Base
         # 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, permanent: permanent_redirect?) if attributes[:path]
+        route.create_redirect(old_path) if attributes[:path]
       end
     end
   end
@@ -55,31 +53,17 @@ class Route < ActiveRecord::Base
   end
 
   def conflicting_redirects
-    RedirectRoute.temporary.matching_path_and_descendants(path)
+    RedirectRoute.matching_path_and_descendants(path)
   end
 
-  def create_redirect(path, permanent: false)
-    RedirectRoute.create(source: source, path: path, permanent: permanent)
+  def create_redirect(path)
+    RedirectRoute.create(source: source, path: path)
   end
 
   private
 
   def create_redirect_for_old_path
-    create_redirect(path_was, permanent: permanent_redirect?) if path_changed?
-  end
-
-  def permanent_redirect?
-    source_type != "Project"
-  end
-
-  def ensure_permanent_paths
-    return if path.nil?
-
-    errors.add(:path, "has been taken before") if conflicting_redirect_exists?
-  end
-
-  def conflicting_redirect_exists?
-    RedirectRoute.permanent.matching_path_and_descendants(path).exists?
+    create_redirect(path_was) if path_changed?
   end
 
   def delete_conflicting_orphaned_routes
diff --git a/app/models/sent_notification.rb b/app/models/sent_notification.rb
index 6e311806be1..3da7c301d28 100644
--- a/app/models/sent_notification.rb
+++ b/app/models/sent_notification.rb
@@ -5,14 +5,14 @@ class SentNotification < ActiveRecord::Base
   belongs_to :noteable, polymorphic: true # rubocop:disable Cop/PolymorphicAssociations
   belongs_to :recipient, class_name: "User"
 
-  validates :project, :recipient, presence: true
+  validates :recipient, presence: true
   validates :reply_key, presence: true, uniqueness: true
   validates :noteable_id, presence: true, unless: :for_commit?
   validates :commit_id, presence: true, if: :for_commit?
   validates :in_reply_to_discussion_id, format: { with: /\A\h{40}\z/, allow_nil: true }
   validate :note_valid
 
-  after_save :keep_around_commit
+  after_save :keep_around_commit, if: :for_commit?
 
   class << self
     def reply_key
diff --git a/app/models/service.rb b/app/models/service.rb
index 1dcb79157a2..1d259bcfec7 100644
--- a/app/models/service.rb
+++ b/app/models/service.rb
@@ -14,6 +14,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 :confidential_note_events, true
   default_value_for :job_events, true
   default_value_for :pipeline_events, true
   default_value_for :wiki_page_events, true
@@ -42,6 +43,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 :confidential_note_hooks, -> { where(confidential_note_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) }
@@ -168,8 +170,10 @@ class Service < ActiveRecord::Base
   def self.prop_accessor(*args)
     args.each do |arg|
       class_eval %{
-        def #{arg}
-          properties['#{arg}']
+        unless method_defined?(arg)
+          def #{arg}
+            properties['#{arg}']
+          end
         end
 
         def #{arg}=(value)
@@ -202,7 +206,12 @@ class Service < ActiveRecord::Base
     args.each do |arg|
       class_eval %{
         def #{arg}?
-          ActiveRecord::ConnectionAdapters::Column::TRUE_VALUES.include?(#{arg})
+          # '!!' is used because nil or empty string is converted to nil
+          if Gitlab.rails5?
+            !!ActiveRecord::Type::Boolean.new.cast(#{arg})
+          else
+            !!ActiveRecord::Type::Boolean.new.type_cast_from_database(#{arg})
+          end
         end
       }
     end
@@ -245,7 +254,6 @@ class Service < ActiveRecord::Base
       emails_on_push
       external_wiki
       flowdock
-      gemnasium
       hipchat
       irker
       jira
@@ -273,6 +281,7 @@ class Service < ActiveRecord::Base
 
   def self.build_from_template(project_id, template)
     service = template.dup
+    service.active = false unless service.valid?
     service.template = false
     service.project_id = project_id
     service
diff --git a/app/models/storage/hashed_project.rb b/app/models/storage/hashed_project.rb
index fae1b64961a..26b4b78ac64 100644
--- a/app/models/storage/hashed_project.rb
+++ b/app/models/storage/hashed_project.rb
@@ -1,7 +1,7 @@
 module Storage
   class HashedProject
     attr_accessor :project
-    delegate :gitlab_shell, :repository_storage_path, to: :project
+    delegate :gitlab_shell, :repository_storage, to: :project
 
     ROOT_PATH_PREFIX = '@hashed'.freeze
 
@@ -24,7 +24,7 @@ module Storage
     end
 
     def ensure_storage_path_exists
-      gitlab_shell.add_namespace(repository_storage_path, base_dir)
+      gitlab_shell.add_namespace(repository_storage, base_dir)
     end
 
     def rename_repo
diff --git a/app/models/storage/legacy_project.rb b/app/models/storage/legacy_project.rb
index 9d9e5e1d352..27cb388c702 100644
--- a/app/models/storage/legacy_project.rb
+++ b/app/models/storage/legacy_project.rb
@@ -1,7 +1,7 @@
 module Storage
   class LegacyProject
     attr_accessor :project
-    delegate :namespace, :gitlab_shell, :repository_storage_path, to: :project
+    delegate :namespace, :gitlab_shell, :repository_storage, to: :project
 
     def initialize(project)
       @project = project
@@ -24,18 +24,18 @@ module Storage
     def ensure_storage_path_exists
       return unless namespace
 
-      gitlab_shell.add_namespace(repository_storage_path, base_dir)
+      gitlab_shell.add_namespace(repository_storage, base_dir)
     end
 
     def rename_repo
       new_full_path = project.build_full_path
 
-      if gitlab_shell.mv_repository(repository_storage_path, project.full_path_was, new_full_path)
+      if gitlab_shell.mv_repository(repository_storage, project.full_path_was, new_full_path)
         # If repository moved successfully we need to send update instructions to users.
         # However we cannot allow rollback since we moved repository
         # So we basically we mute exceptions in next actions
         begin
-          gitlab_shell.mv_repository(repository_storage_path, "#{project.full_path_was}.wiki", "#{new_full_path}.wiki")
+          gitlab_shell.mv_repository(repository_storage, "#{project.full_path_was}.wiki", "#{new_full_path}.wiki")
           return true
         rescue => e
           Rails.logger.error "Exception renaming #{project.full_path_was} -> #{new_full_path}: #{e}"
diff --git a/app/models/system_note_metadata.rb b/app/models/system_note_metadata.rb
index 29035480371..1c2161accc4 100644
--- a/app/models/system_note_metadata.rb
+++ b/app/models/system_note_metadata.rb
@@ -17,7 +17,11 @@ class SystemNoteMetadata < ActiveRecord::Base
   ].freeze
 
   validates :note, presence: true
-  validates :action, inclusion: ICON_TYPES, allow_nil: true
+  validates :action, inclusion: { in: :icon_types }, allow_nil: true
 
   belongs_to :note
+
+  def icon_types
+    ICON_TYPES
+  end
 end
diff --git a/app/models/term_agreement.rb b/app/models/term_agreement.rb
new file mode 100644
index 00000000000..c317bd0c90b
--- /dev/null
+++ b/app/models/term_agreement.rb
@@ -0,0 +1,8 @@
+class TermAgreement < ActiveRecord::Base
+  belongs_to :term, class_name: 'ApplicationSetting::Term'
+  belongs_to :user
+
+  scope :accepted, -> { where(accepted: true) }
+
+  validates :user, :term, presence: true
+end
diff --git a/app/models/timelog.rb b/app/models/timelog.rb
index e166cf69703..659146f43e4 100644
--- a/app/models/timelog.rb
+++ b/app/models/timelog.rb
@@ -2,8 +2,8 @@ class Timelog < ActiveRecord::Base
   validates :time_spent, :user, presence: true
   validate :issuable_id_is_present
 
-  belongs_to :issue
-  belongs_to :merge_request
+  belongs_to :issue, touch: true
+  belongs_to :merge_request, touch: true
   belongs_to :user
 
   def issuable
@@ -19,4 +19,9 @@ class Timelog < ActiveRecord::Base
       errors.add(:base, 'Issue or Merge Request ID is required')
     end
   end
+
+  # Rails5 defaults to :touch_later, overwrite for normal touch
+  def belongs_to_touch_method
+    :touch
+  end
 end
diff --git a/app/models/todo.rb b/app/models/todo.rb
index 8afacd188e0..a2ab405fdbe 100644
--- a/app/models/todo.rb
+++ b/app/models/todo.rb
@@ -50,7 +50,7 @@ class Todo < ActiveRecord::Base
     # Priority sorting isn't displayed in the dropdown, because we don't show
     # milestones, but still show something if the user has a URL with that
     # selected.
-    def sort(method)
+    def sort_by_attribute(method)
       sorted =
         case method.to_s
         when 'priority', 'label_priority' then order_by_labels_priority
diff --git a/app/models/upload.rb b/app/models/upload.rb
index 99ad37dc892..cf71a7b76fc 100644
--- a/app/models/upload.rb
+++ b/app/models/upload.rb
@@ -9,6 +9,8 @@ class Upload < ActiveRecord::Base
   validates :model, presence: true
   validates :uploader, presence: true
 
+  scope :with_files_stored_locally, -> { where(store: [nil, ObjectStorage::Store::LOCAL]) }
+
   before_save  :calculate_checksum!, if: :foreground_checksummable?
   after_commit :schedule_checksum,   if: :checksummable?
 
@@ -21,6 +23,7 @@ class Upload < ActiveRecord::Base
   end
 
   def absolute_path
+    raise ObjectStorage::RemoteStoreError, "Remote object has no absolute path." unless local?
     return path unless relative_path?
 
     uploader_class.absolute_path(self)
@@ -30,11 +33,11 @@ class Upload < ActiveRecord::Base
     self.checksum = nil
     return unless checksummable?
 
-    self.checksum = self.class.hexdigest(absolute_path)
+    self.checksum = Digest::SHA256.file(absolute_path).hexdigest
   end
 
-  def build_uploader
-    uploader_class.new(model, mount_point, **uploader_context).tap do |uploader|
+  def build_uploader(mounted_as = nil)
+    uploader_class.new(model, mounted_as || mount_point).tap do |uploader|
       uploader.upload = self
       uploader.retrieve_from_store!(identifier)
     end
@@ -51,6 +54,12 @@ class Upload < ActiveRecord::Base
     }.compact
   end
 
+  def local?
+    return true if store.nil?
+
+    store == ObjectStorage::Store::LOCAL
+  end
+
   private
 
   def delete_file!
@@ -61,10 +70,6 @@ class Upload < ActiveRecord::Base
     checksum.nil? && local? && exist?
   end
 
-  def local?
-    true
-  end
-
   def foreground_checksummable?
     checksummable? && size <= CHECKSUM_THRESHOLD
   end
diff --git a/app/models/user.rb b/app/models/user.rb
index b8c55205ab8..8e0dc91b2a7 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -17,6 +17,7 @@ class User < ActiveRecord::Base
   include IgnorableColumn
   include BulkMemberAccessLoad
   include BlocksJsonSerialization
+  include WithUploads
 
   DEFAULT_NOTIFICATION_LEVEL = :participating
 
@@ -25,7 +26,7 @@ class User < ActiveRecord::Base
   ignore_column :authentication_token
 
   add_authentication_token_field :incoming_email_token
-  add_authentication_token_field :rss_token
+  add_authentication_token_field :feed_token
 
   default_value_for :admin, false
   default_value_for(:external) { Gitlab::CurrentSettings.user_default_external }
@@ -82,11 +83,8 @@ class User < ActiveRecord::Base
   has_one :namespace, -> { where(type: nil) }, dependent: :destroy, foreign_key: :owner_id, inverse_of: :owner, autosave: true # rubocop:disable Cop/ActiveRecordDependent
 
   # Profile
-  has_many :keys, -> do
-    type = Key.arel_table[:type]
-    where(type.not_eq('DeployKey').or(type.eq(nil)))
-  end, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
-  has_many :deploy_keys, -> { where(type: 'DeployKey') }, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
+  has_many :keys, -> { where(type: ['Key', nil]) }, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
+  has_many :deploy_keys, -> { where(type: 'DeployKey') }, dependent: :nullify # rubocop:disable Cop/ActiveRecordDependent
   has_many :gpg_keys
 
   has_many :emails, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
@@ -100,8 +98,8 @@ class User < ActiveRecord::Base
   has_many :members
   has_many :group_members, -> { where(requested_at: nil) }, source: 'GroupMember'
   has_many :groups, through: :group_members
-  has_many :owned_groups, -> { where members: { access_level: Gitlab::Access::OWNER } }, through: :group_members, source: :group
-  has_many :masters_groups, -> { where members: { access_level: Gitlab::Access::MASTER } }, through: :group_members, source: :group
+  has_many :owned_groups, -> { where(members: { access_level: Gitlab::Access::OWNER }) }, through: :group_members, source: :group
+  has_many :masters_groups, -> { where(members: { access_level: Gitlab::Access::MASTER }) }, through: :group_members, source: :group
 
   # Projects
   has_many :groups_projects,          through: :groups, source: :projects
@@ -111,7 +109,7 @@ class User < ActiveRecord::Base
   has_many :created_projects,         foreign_key: :creator_id, class_name: 'Project'
   has_many :users_star_projects, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
   has_many :starred_projects, through: :users_star_projects, source: :project
-  has_many :project_authorizations
+  has_many :project_authorizations, dependent: :delete_all # rubocop:disable Cop/ActiveRecordDependent
   has_many :authorized_projects, through: :project_authorizations, source: :project
 
   has_many :user_interacted_projects
@@ -140,7 +138,8 @@ class User < ActiveRecord::Base
 
   has_many :custom_attributes, class_name: 'UserCustomAttribute'
   has_many :callouts, class_name: 'UserCallout'
-  has_many :uploads, as: :model, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
+  has_many :term_agreements
+  belongs_to :accepted_term, class_name: 'ApplicationSetting::Term'
 
   #
   # Validations
@@ -166,19 +165,34 @@ class User < ActiveRecord::Base
   validate :signup_domain_valid?, on: :create, if: ->(user) { !user.created_by_id }
 
   before_validation :sanitize_attrs
-  before_validation :set_notification_email, if: :email_changed?
+  before_validation :set_notification_email, if: :new_record?
   before_validation :set_public_email, if: :public_email_changed?
+  before_save :set_public_email, if: :public_email_changed? # in case validation is skipped
   before_save :ensure_incoming_email_token
   before_save :ensure_user_rights_and_limits, if: ->(user) { user.new_record? || user.external_changed? }
   before_save :skip_reconfirmation!, if: ->(user) { user.email_changed? && user.read_only_attribute?(:email) }
   before_save :check_for_verified_email, if: ->(user) { user.email_changed? && !user.new_record? }
   before_validation :ensure_namespace_correct
+  before_save :ensure_namespace_correct # in case validation is skipped
   after_validation :set_username_errors
   after_update :username_changed_hook, if: :username_changed?
   after_destroy :post_destroy_hook
   after_destroy :remove_key_cache
-  after_commit :update_emails_with_primary_email, on: :update, if: -> { previous_changes.key?('email') }
-  after_commit :update_invalid_gpg_signatures, on: :update, if: -> { previous_changes.key?('email') }
+  after_commit(on: :update) do
+    if previous_changes.key?('email')
+      # Grab previous_email here since previous_changes changes after
+      # #update_emails_with_primary_email and #update_notification_email are called
+      previous_email = previous_changes[:email][0]
+
+      update_emails_with_primary_email(previous_email)
+      update_invalid_gpg_signatures
+
+      if previous_email == notification_email
+        self.notification_email = email
+        save
+      end
+    end
+  end
 
   after_initialize :set_projects_limit
 
@@ -187,7 +201,7 @@ class User < ActiveRecord::Base
 
   # User's Dashboard preference
   # Note: When adding an option, it MUST go on the end of the array.
-  enum dashboard: [:projects, :stars, :project_activity, :starred_project_activity, :groups, :todos]
+  enum dashboard: [:projects, :stars, :project_activity, :starred_project_activity, :groups, :todos, :issues, :merge_requests]
 
   # User's Project preference
   # Note: When adding an option, it MUST go on the end of the array.
@@ -235,14 +249,18 @@ class User < ActiveRecord::Base
   scope :order_recent_sign_in, -> { reorder(Gitlab::Database.nulls_last_order('current_sign_in_at', 'DESC')) }
   scope :order_oldest_sign_in, -> { reorder(Gitlab::Database.nulls_last_order('current_sign_in_at', 'ASC')) }
 
-  def self.with_two_factor
+  def self.with_two_factor_indistinct
     joins("LEFT OUTER JOIN u2f_registrations AS u2f ON u2f.user_id = users.id")
-      .where("u2f.id IS NOT NULL OR otp_required_for_login = ?", true).distinct(arel_table[:id])
+      .where("u2f.id IS NOT NULL OR users.otp_required_for_login = ?", true)
+  end
+
+  def self.with_two_factor
+    with_two_factor_indistinct.distinct(arel_table[:id])
   end
 
   def self.without_two_factor
     joins("LEFT OUTER JOIN u2f_registrations AS u2f ON u2f.user_id = users.id")
-      .where("u2f.id IS NULL AND otp_required_for_login = ?", false)
+      .where("u2f.id IS NULL AND users.otp_required_for_login = ?", false)
   end
 
   #
@@ -259,7 +277,7 @@ class User < ActiveRecord::Base
       end
     end
 
-    def sort(method)
+    def sort_by_attribute(method)
       order_method = method || 'id_desc'
 
       case order_method.to_s
@@ -411,7 +429,6 @@ class User < ActiveRecord::Base
       unique_internal(where(ghost: true), 'ghost', email) do |u|
         u.bio = 'This is a "Ghost User", created to hold all issues authored by users that have since been deleted. This user cannot be removed.'
         u.name = 'Ghost User'
-        u.notification_email = email
       end
     end
   end
@@ -541,8 +558,7 @@ class User < ActiveRecord::Base
   # hash and `_was` variables getting munged.
   # By using an `after_commit` instead of `after_update`, we avoid the recursive callback
   # scenario, though it then requires us to use the `previous_changes` hash
-  def update_emails_with_primary_email
-    previous_email = previous_changes[:email][0]  # grab this before the DestroyService is called
+  def update_emails_with_primary_email(previous_email)
     primary_email_record = emails.find_by(email: email)
     Emails::DestroyService.new(self, user: self).execute(primary_email_record) if primary_email_record
 
@@ -623,9 +639,7 @@ class User < ActiveRecord::Base
   end
 
   def owned_projects
-    @owned_projects ||=
-      Project.where('namespace_id IN (?) OR namespace_id = ?',
-                    owned_groups.select(:id), namespace.id).joins(:namespace)
+    @owned_projects ||= Project.from("(#{owned_projects_union.to_sql}) AS projects")
   end
 
   # Returns projects which user can admin issues on (for example to move an issue to that project).
@@ -703,10 +717,6 @@ class User < ActiveRecord::Base
     projects_limit - personal_projects_count
   end
 
-  def personal_projects_count
-    @personal_projects_count ||= personal_projects.count
-  end
-
   def recent_push(project = nil)
     service = Users::LastPushEventService.new(self)
 
@@ -773,13 +783,13 @@ class User < ActiveRecord::Base
   end
 
   def set_notification_email
-    if notification_email.blank? || !all_emails.include?(notification_email)
+    if notification_email.blank? || all_emails.exclude?(notification_email)
       self.notification_email = email
     end
   end
 
   def set_public_email
-    if public_email.blank? || !all_emails.include?(public_email)
+    if public_email.blank? || all_emails.exclude?(public_email)
       self.public_email = ''
     end
   end
@@ -861,6 +871,16 @@ class User < ActiveRecord::Base
     confirmed? && !temp_oauth_email?
   end
 
+  def accept_pending_invitations!
+    pending_invitations.select do |member|
+      member.accept_invite!(self)
+    end
+  end
+
+  def pending_invitations
+    Member.where(invite_email: verified_emails).invite
+  end
+
   def all_emails
     all_emails = []
     all_emails << email unless temp_oauth_email?
@@ -917,7 +937,7 @@ class User < ActiveRecord::Base
 
   def delete_async(deleted_by:, params: {})
     block if params[:hard_delete]
-    DeleteUserWorker.perform_async(deleted_by.id, id, params)
+    DeleteUserWorker.perform_async(deleted_by.id, id, params.to_h)
   end
 
   def notification_service
@@ -954,10 +974,13 @@ class User < ActiveRecord::Base
   end
 
   def manageable_groups
-    union = Gitlab::SQL::Union.new([owned_groups.select(:id),
-                                    masters_groups.select(:id)])
-    arel_union = Arel::Nodes::SqlLiteral.new(union.to_sql)
-    owned_and_master_groups = Group.where(Group.arel_table[:id].in(arel_union))
+    union_sql = Gitlab::SQL::Union.new([owned_groups.select(:id), masters_groups.select(:id)]).to_sql
+
+    # Update this line to not use raw SQL when migrated to Rails 5.2.
+    # Either ActiveRecord or Arel constructions are fine.
+    # This was replaced with the raw SQL construction because of bugs in the arel gem.
+    # Bugs were fixed in arel 9.0.0 (Rails 5.2).
+    owned_and_master_groups = Group.where("namespaces.id IN (#{union_sql})") # rubocop:disable GitlabSecurity/SqlInjection
 
     Gitlab::GroupHierarchy.new(owned_and_master_groups).base_and_descendants
   end
@@ -997,18 +1020,28 @@ class User < ActiveRecord::Base
     !solo_owned_groups.present?
   end
 
-  def ci_authorized_runners
-    @ci_authorized_runners ||= begin
-      runner_ids = Ci::RunnerProject
-        .where("ci_runner_projects.project_id IN (#{ci_projects_union.to_sql})") # rubocop:disable GitlabSecurity/SqlInjection
+  def ci_owned_runners
+    @ci_owned_runners ||= begin
+      project_runner_ids = Ci::RunnerProject
+        .where(project: authorized_projects(Gitlab::Access::MASTER))
         .select(:runner_id)
-      Ci::Runner.specific.where(id: runner_ids)
+
+      group_runner_ids = Ci::RunnerNamespace
+        .where(namespace_id: owned_or_masters_groups.select(:id))
+        .select(:runner_id)
+
+      union = Gitlab::SQL::Union.new([project_runner_ids, group_runner_ids])
+
+      Ci::Runner.specific.where("ci_runners.id IN (#{union.to_sql})") # rubocop:disable GitlabSecurity/SqlInjection
     end
   end
 
   def notification_settings_for(source)
     if notification_settings.loaded?
-      notification_settings.find { |notification| notification.source == source }
+      notification_settings.find do |notification|
+        notification.source_type == source.class.base_class.name &&
+          notification.source_id == source.id
+      end
     else
       notification_settings.find_or_initialize_by(source: source)
     end
@@ -1049,9 +1082,10 @@ class User < ActiveRecord::Base
     end
   end
 
-  def update_cache_counts
-    assigned_open_merge_requests_count(force: true)
-    assigned_open_issues_count(force: true)
+  def personal_projects_count(force: false)
+    Rails.cache.fetch(['users', id, 'personal_projects_count'], force: force, expires_in: 24.hours, raw: true) do
+      personal_projects.count
+    end.to_i
   end
 
   def update_todos_count_cache
@@ -1064,6 +1098,7 @@ class User < ActiveRecord::Base
     invalidate_merge_request_cache_counts
     invalidate_todos_done_count
     invalidate_todos_pending_count
+    invalidate_personal_projects_count
   end
 
   def invalidate_issue_cache_counts
@@ -1082,6 +1117,10 @@ class User < ActiveRecord::Base
     Rails.cache.delete(['users', id, 'todos_pending_count'])
   end
 
+  def invalidate_personal_projects_count
+    Rails.cache.delete(['users', id, 'personal_projects_count'])
+  end
+
   # This is copied from Devise::Models::Lockable#valid_for_authentication?, as our auth
   # flow means we don't call that automatically (and can't conveniently do so).
   #
@@ -1089,8 +1128,11 @@ class User < ActiveRecord::Base
   #   <https://github.com/plataformatec/devise/blob/v4.0.0/lib/devise/models/lockable.rb#L92>
   #
   def increment_failed_attempts!
+    return if ::Gitlab::Database.read_only?
+
     self.failed_attempts ||= 0
     self.failed_attempts += 1
+
     if attempts_exceeded?
       lock_access! unless access_locked?
     else
@@ -1128,11 +1170,11 @@ class User < ActiveRecord::Base
     save
   end
 
-  # each existing user needs to have an `rss_token`.
+  # each existing user needs to have an `feed_token`.
   # we do this on read since migrating all existing users is not a feasible
   # solution.
-  def rss_token
-    ensure_rss_token!
+  def feed_token
+    ensure_feed_token!
   end
 
   def sync_attribute?(attribute)
@@ -1185,6 +1227,20 @@ class User < ActiveRecord::Base
     max_member_access_for_group_ids([group_id])[group_id]
   end
 
+  def terms_accepted?
+    accepted_term_id.present?
+  end
+
+  def required_terms_not_accepted?
+    Gitlab::CurrentSettings.current_application_settings.enforce_terms? &&
+      !terms_accepted?
+  end
+
+  def owned_or_masters_groups
+    union = Gitlab::SQL::Union.new([owned_groups, masters_groups])
+    Group.from("(#{union.to_sql}) namespaces")
+  end
+
   protected
 
   # override, from Devise::Validatable
@@ -1196,13 +1252,13 @@ class User < ActiveRecord::Base
 
   private
 
-  def ci_projects_union
-    scope  = { access_level: [Gitlab::Access::MASTER, Gitlab::Access::OWNER] }
-    groups = groups_projects.where(members: scope)
-    other  = projects.where(members: scope)
-
-    Gitlab::SQL::Union.new([personal_projects.select(:id), groups.select(:id),
-                            other.select(:id)])
+  def owned_projects_union
+    Gitlab::SQL::Union.new([
+      Project.where(namespace: namespace),
+      Project.joins(:project_authorizations)
+        .where("projects.namespace_id <> ?", namespace.id)
+        .where(project_authorizations: { user_id: id, access_level: Gitlab::Access::OWNER })
+    ], remove_duplicates: false)
   end
 
   # Added according to https://github.com/plataformatec/devise/blob/7df57d5081f9884849ca15e4fde179ef164a575f/README.md#activejob-integration
diff --git a/app/models/user_callout.rb b/app/models/user_callout.rb
index e4b69382626..9d461c6750a 100644
--- a/app/models/user_callout.rb
+++ b/app/models/user_callout.rb
@@ -2,7 +2,8 @@ class UserCallout < ActiveRecord::Base
   belongs_to :user
 
   enum feature_name: {
-    gke_cluster_integration: 1
+    gke_cluster_integration: 1,
+    gcp_signup_offer: 2
   }
 
   validates :user, presence: true
diff --git a/app/models/wiki_page.rb b/app/models/wiki_page.rb
index 0f5536415f7..cde79b95062 100644
--- a/app/models/wiki_page.rb
+++ b/app/models/wiki_page.rb
@@ -265,6 +265,15 @@ class WikiPage
     title.present? && self.class.unhyphenize(@page.url_path) != title
   end
 
+  # Updates the current @attributes hash by merging a hash of params
+  def update_attributes(attrs)
+    attrs[:title] = process_title(attrs[:title]) if attrs[:title].present?
+
+    attrs.slice!(:content, :format, :message, :title)
+
+    @attributes.merge!(attrs)
+  end
+
   private
 
   # Process and format the title based on the user input.
@@ -290,15 +299,6 @@ class WikiPage
     File.join(components)
   end
 
-  # Updates the current @attributes hash by merging a hash of params
-  def update_attributes(attrs)
-    attrs[:title] = process_title(attrs[:title]) if attrs[:title].present?
-
-    attrs.slice!(:content, :format, :message, :title)
-
-    @attributes.merge!(attrs)
-  end
-
   def set_attributes
     attributes[:slug] = @page.url_path
     attributes[:title] = @page.title
diff --git a/app/policies/application_setting/term_policy.rb b/app/policies/application_setting/term_policy.rb
new file mode 100644
index 00000000000..f03bf748c76
--- /dev/null
+++ b/app/policies/application_setting/term_policy.rb
@@ -0,0 +1,28 @@
+class ApplicationSetting
+  class TermPolicy < BasePolicy
+    include Gitlab::Utils::StrongMemoize
+
+    condition(:current_terms, scope: :subject) do
+      Gitlab::CurrentSettings.current_application_settings.latest_terms == @subject
+    end
+
+    condition(:terms_accepted, score: 1) do
+      agreement&.accepted
+    end
+
+    rule { ~anonymous & current_terms }.policy do
+      enable :accept_terms
+      enable :decline_terms
+    end
+
+    rule { terms_accepted }.prevent :accept_terms
+
+    def agreement
+      strong_memoize(:agreement) do
+        next nil if @user.nil? || @subject.nil?
+
+        @user.term_agreements.find_by(term: @subject)
+      end
+    end
+  end
+end
diff --git a/app/policies/ci/build_policy.rb b/app/policies/ci/build_policy.rb
index 1ab391a5a9d..1c0cc7425ec 100644
--- a/app/policies/ci/build_policy.rb
+++ b/app/policies/ci/build_policy.rb
@@ -11,7 +11,11 @@ module Ci
     end
 
     condition(:owner_of_job) do
-      can?(:developer_access) && @subject.triggered_by?(@user)
+      @subject.triggered_by?(@user)
+    end
+
+    condition(:branch_allows_collaboration) do
+      @subject.project.branch_allows_collaboration?(@user, @subject.ref)
     end
 
     rule { protected_ref }.policy do
@@ -19,6 +23,11 @@ module Ci
       prevent :erase_build
     end
 
-    rule { can?(:master_access) | owner_of_job }.enable :erase_build
+    rule { can?(:admin_build) | (can?(:update_build) & owner_of_job) }.enable :erase_build
+
+    rule { can?(:public_access) & branch_allows_collaboration }.policy do
+      enable :update_build
+      enable :update_commit_status
+    end
   end
 end
diff --git a/app/policies/ci/pipeline_policy.rb b/app/policies/ci/pipeline_policy.rb
index 6363c382ff8..b81329d0625 100644
--- a/app/policies/ci/pipeline_policy.rb
+++ b/app/policies/ci/pipeline_policy.rb
@@ -4,8 +4,16 @@ module Ci
 
     condition(:protected_ref) { ref_protected?(@user, @subject.project, @subject.tag?, @subject.ref) }
 
+    condition(:branch_allows_collaboration) do
+      @subject.project.branch_allows_collaboration?(@user, @subject.ref)
+    end
+
     rule { protected_ref }.prevent :update_pipeline
 
+    rule { can?(:public_access) & branch_allows_collaboration }.policy do
+      enable :update_pipeline
+    end
+
     def ref_protected?(user, project, tag, ref)
       access = ::Gitlab::UserAccess.new(user, project: project)
 
diff --git a/app/policies/ci/pipeline_schedule_policy.rb b/app/policies/ci/pipeline_schedule_policy.rb
index dc7a4aed577..ecba0488d3c 100644
--- a/app/policies/ci/pipeline_schedule_policy.rb
+++ b/app/policies/ci/pipeline_schedule_policy.rb
@@ -7,23 +7,17 @@ module Ci
     end
 
     condition(:owner_of_schedule) do
-      can?(:developer_access) && pipeline_schedule.owned_by?(@user)
+      pipeline_schedule.owned_by?(@user)
     end
 
-    condition(:non_owner_of_schedule) do
-      !pipeline_schedule.owned_by?(@user)
-    end
-
-    rule { can?(:developer_access) }.policy do
-      enable :play_pipeline_schedule
-    end
+    rule { can?(:create_pipeline) }.enable :play_pipeline_schedule
 
-    rule { can?(:master_access) | owner_of_schedule }.policy do
+    rule { can?(:admin_pipeline) | (can?(:update_build) & owner_of_schedule) }.policy do
       enable :update_pipeline_schedule
       enable :admin_pipeline_schedule
     end
 
-    rule { can?(:master_access) & non_owner_of_schedule }.policy do
+    rule { can?(:admin_pipeline_schedule) & ~owner_of_schedule }.policy do
       enable :take_ownership_pipeline_schedule
     end
 
diff --git a/app/policies/ci/runner_policy.rb b/app/policies/ci/runner_policy.rb
index 7dff8470e23..895abe87d86 100644
--- a/app/policies/ci/runner_policy.rb
+++ b/app/policies/ci/runner_policy.rb
@@ -1,16 +1,19 @@
 module Ci
   class RunnerPolicy < BasePolicy
     with_options scope: :subject, score: 0
-    condition(:shared) { @subject.is_shared? }
-
-    with_options scope: :subject, score: 0
     condition(:locked, scope: :subject) { @subject.locked? }
 
-    condition(:authorized_runner) { @user.ci_authorized_runners.include?(@subject) }
+    condition(:owned_runner) { @user.ci_owned_runners.exists?(@subject.id) }
 
     rule { anonymous }.prevent_all
-    rule { admin | authorized_runner }.enable :assign_runner
-    rule { ~admin & shared }.prevent :assign_runner
+
+    rule { admin | owned_runner }.policy do
+      enable :assign_runner
+      enable :read_runner
+      enable :update_runner
+      enable :delete_runner
+    end
+
     rule { ~admin & locked }.prevent :assign_runner
   end
 end
diff --git a/app/policies/deploy_token_policy.rb b/app/policies/deploy_token_policy.rb
new file mode 100644
index 00000000000..7aa9106e8b1
--- /dev/null
+++ b/app/policies/deploy_token_policy.rb
@@ -0,0 +1,11 @@
+class DeployTokenPolicy < BasePolicy
+  with_options scope: :subject, score: 0
+  condition(:master) { @subject.project.team.master?(@user) }
+
+  rule { anonymous }.prevent_all
+
+  rule { master }.policy do
+    enable :create_deploy_token
+    enable :update_deploy_token
+  end
+end
diff --git a/app/policies/global_policy.rb b/app/policies/global_policy.rb
index 64e550d19d0..1cf5515d9d7 100644
--- a/app/policies/global_policy.rb
+++ b/app/policies/global_policy.rb
@@ -1,22 +1,24 @@
 class GlobalPolicy < BasePolicy
   desc "User is blocked"
   with_options scope: :user, score: 0
-  condition(:blocked) { @user.blocked? }
+  condition(:blocked) { @user&.blocked? }
 
   desc "User is an internal user"
   with_options scope: :user, score: 0
-  condition(:internal) { @user.internal? }
+  condition(:internal) { @user&.internal? }
 
   desc "User's access has been locked"
   with_options scope: :user, score: 0
-  condition(:access_locked) { @user.access_locked? }
+  condition(:access_locked) { @user&.access_locked? }
 
-  condition(:can_create_fork, scope: :user) { @user.manageable_namespaces.any? { |namespace| @user.can?(:create_projects, namespace) } }
+  condition(:can_create_fork, scope: :user) { @user && @user.manageable_namespaces.any? { |namespace| @user.can?(:create_projects, namespace) } }
+
+  condition(:required_terms_not_accepted, scope: :user, score: 0) do
+    @user&.required_terms_not_accepted?
+  end
 
   rule { anonymous }.policy do
     prevent :log_in
-    prevent :access_api
-    prevent :access_git
     prevent :receive_notifications
     prevent :use_quick_actions
     prevent :create_group
@@ -38,6 +40,11 @@ class GlobalPolicy < BasePolicy
     prevent :use_quick_actions
   end
 
+  rule { required_terms_not_accepted }.policy do
+    prevent :access_api
+    prevent :access_git
+  end
+
   rule { can_create_group }.policy do
     enable :create_group
   end
diff --git a/app/policies/group_policy.rb b/app/policies/group_policy.rb
index c9cb730c4e9..520710b757d 100644
--- a/app/policies/group_policy.rb
+++ b/app/policies/group_policy.rb
@@ -22,7 +22,7 @@ class GroupPolicy < BasePolicy
   condition(:can_change_parent_share_with_group_lock) { can?(:change_share_with_group_lock, @subject.parent) }
 
   condition(:has_projects) do
-    GroupProjectsFinder.new(group: @subject, current_user: @user).execute.any?
+    GroupProjectsFinder.new(group: @subject, current_user: @user, options: { include_subgroups: true }).execute.any?
   end
 
   with_options scope: :subject, score: 0
@@ -43,7 +43,11 @@ class GroupPolicy < BasePolicy
   end
 
   rule { admin }             .enable :read_group
-  rule { has_projects }      .enable :read_group
+
+  rule { has_projects }.policy do
+    enable :read_group
+    enable :read_label
+  end
 
   rule { has_access }.enable :read_namespace
 
diff --git a/app/policies/issuable_policy.rb b/app/policies/issuable_policy.rb
index 3f6d7d04667..b431d376e3d 100644
--- a/app/policies/issuable_policy.rb
+++ b/app/policies/issuable_policy.rb
@@ -2,20 +2,6 @@ class IssuablePolicy < BasePolicy
   delegate { @subject.project }
 
   condition(:locked, scope: :subject, score: 0) { @subject.discussion_locked? }
-
-  # We aren't checking `:read_issue` or `:read_merge_request` in this case
-  # because it could be possible for a user to see an issuable-iid
-  # (`:read_issue_iid` or `:read_merge_request_iid`) but then wouldn't be allowed
-  # to read the actual issue after a more expensive `:read_issue` check.
-  #
-  # `:read_issue` & `:read_issue_iid` could diverge in gitlab-ee.
-  condition(:visible_to_user, score: 4) do
-    Project.where(id: @subject.project)
-      .public_or_visible_to_user(@user)
-      .with_feature_available_for_user(@subject, @user)
-      .any?
-  end
-
   condition(:is_project_member) { @user && @subject.project && @subject.project.team.member?(@user) }
 
   desc "User is the assignee or author"
@@ -32,9 +18,7 @@ class IssuablePolicy < BasePolicy
 
   rule { locked & ~is_project_member }.policy do
     prevent :create_note
-    prevent :update_note
     prevent :admin_note
     prevent :resolve_note
-    prevent :edit_note
   end
 end
diff --git a/app/policies/issue_policy.rb b/app/policies/issue_policy.rb
index ed499511999..263c6e3039c 100644
--- a/app/policies/issue_policy.rb
+++ b/app/policies/issue_policy.rb
@@ -17,6 +17,4 @@ class IssuePolicy < IssuablePolicy
     prevent :update_issue
     prevent :admin_issue
   end
-
-  rule { can?(:read_issue) | visible_to_user }.enable :read_issue_iid
 end
diff --git a/app/policies/merge_request_policy.rb b/app/policies/merge_request_policy.rb
index e003376d219..c3fe857f8a2 100644
--- a/app/policies/merge_request_policy.rb
+++ b/app/policies/merge_request_policy.rb
@@ -1,3 +1,2 @@
 class MergeRequestPolicy < IssuablePolicy
-  rule { can?(:read_merge_request) | visible_to_user }.enable :read_merge_request_iid
 end
diff --git a/app/policies/note_policy.rb b/app/policies/note_policy.rb
index d4cb5a77e63..077a6761ee6 100644
--- a/app/policies/note_policy.rb
+++ b/app/policies/note_policy.rb
@@ -1,26 +1,21 @@
 class NotePolicy < BasePolicy
   delegate { @subject.project }
-  delegate { @subject.noteable if @subject.noteable.lockable? }
+  delegate { @subject.noteable if DeclarativePolicy.has_policy?(@subject.noteable) }
 
   condition(:is_author) { @user && @subject.author == @user }
-  condition(:for_merge_request, scope: :subject) { @subject.for_merge_request? }
   condition(:is_noteable_author) { @user && @subject.noteable.author_id == @user.id }
 
   condition(:editable, scope: :subject) { @subject.editable? }
 
-  rule { ~editable | anonymous }.prevent :edit_note
-
-  rule { is_author | admin }.enable :edit_note
-  rule { can?(:master_access) }.enable :edit_note
+  rule { ~editable }.prevent :admin_note
 
   rule { is_author }.policy do
     enable :read_note
-    enable :update_note
     enable :admin_note
     enable :resolve_note
   end
 
-  rule { for_merge_request & is_noteable_author }.policy do
+  rule { is_noteable_author }.policy do
     enable :resolve_note
   end
 end
diff --git a/app/policies/personal_snippet_policy.rb b/app/policies/personal_snippet_policy.rb
index cac0530b9f7..c1a84727cfa 100644
--- a/app/policies/personal_snippet_policy.rb
+++ b/app/policies/personal_snippet_policy.rb
@@ -25,4 +25,6 @@ class PersonalSnippetPolicy < BasePolicy
   end
 
   rule { anonymous }.prevent :comment_personal_snippet
+
+  rule { can?(:comment_personal_snippet) }.enable :award_emoji
 end
diff --git a/app/policies/project_policy.rb b/app/policies/project_policy.rb
index 57ab0c23dcd..199bcf92b21 100644
--- a/app/policies/project_policy.rb
+++ b/app/policies/project_policy.rb
@@ -1,12 +1,26 @@
 class ProjectPolicy < BasePolicy
-  def self.create_read_update_admin(name)
-    [
-      :"create_#{name}",
-      :"read_#{name}",
-      :"update_#{name}",
-      :"admin_#{name}"
-    ]
-  end
+  extend ClassMethods
+
+  READONLY_FEATURES_WHEN_ARCHIVED = %i[
+    issue
+    list
+    merge_request
+    label
+    milestone
+    project_snippet
+    wiki
+    note
+    pipeline
+    pipeline_schedule
+    build
+    trigger
+    environment
+    deployment
+    commit_status
+    container_image
+    pages
+    cluster
+  ].freeze
 
   desc "User is a project owner"
   condition :owner do
@@ -15,7 +29,7 @@ class ProjectPolicy < BasePolicy
   end
 
   desc "Project has public builds enabled"
-  condition(:public_builds, scope: :subject) { project.public_builds? }
+  condition(:public_builds, scope: :subject, score: 0) { project.public_builds? }
 
   # For guest access we use #team_member? so we can use
   # project.members, which gets cached in subject scope.
@@ -31,11 +45,11 @@ class ProjectPolicy < BasePolicy
   desc "User has developer access"
   condition(:developer) { team_access_level >= Gitlab::Access::DEVELOPER }
 
-  desc "User has master access"
+  desc "User has maintainer access"
   condition(:master) { team_access_level >= Gitlab::Access::MASTER }
 
   desc "Project is public"
-  condition(:public_project, scope: :subject) { project.public? }
+  condition(:public_project, scope: :subject, score: 0) { project.public? }
 
   desc "Project is visible to internal users"
   condition(:internal_access) do
@@ -46,7 +60,7 @@ class ProjectPolicy < BasePolicy
   condition(:group_member, scope: :subject) { project_group_member? }
 
   desc "Project is archived"
-  condition(:archived, scope: :subject) { project.archived? }
+  condition(:archived, scope: :subject, score: 0) { project.archived? }
 
   condition(:default_issues_tracker, scope: :subject) { project.default_issues_tracker? }
 
@@ -56,16 +70,37 @@ class ProjectPolicy < BasePolicy
   end
 
   desc "Project has an external wiki"
-  condition(:has_external_wiki, scope: :subject) { project.has_external_wiki? }
+  condition(:has_external_wiki, scope: :subject, score: 0) { project.has_external_wiki? }
 
   desc "Project has request access enabled"
-  condition(:request_access_enabled, scope: :subject) { project.request_access_enabled }
+  condition(:request_access_enabled, scope: :subject, score: 0) { project.request_access_enabled }
 
   desc "Has merge requests allowing pushes to user"
-  condition(:has_merge_requests_allowing_pushes, scope: :subject) do
+  condition(:has_merge_requests_allowing_pushes) do
     project.merge_requests_allowing_push_to_user(user).any?
   end
 
+  with_scope :global
+  condition(:mirror_available, score: 0) do
+    ::Gitlab::CurrentSettings.current_application_settings.mirror_available
+  end
+
+  # We aren't checking `:read_issue` or `:read_merge_request` in this case
+  # because it could be possible for a user to see an issuable-iid
+  # (`:read_issue_iid` or `:read_merge_request_iid`) but then wouldn't be
+  # allowed to read the actual issue after a more expensive `:read_issue`
+  # check. These checks are intended to be used alongside
+  # `:read_project_for_iids`.
+  #
+  # `:read_issue` & `:read_issue_iid` could diverge in gitlab-ee.
+  condition(:issues_visible_to_user, score: 4) do
+    @subject.feature_available?(:issues, @user)
+  end
+
+  condition(:merge_requests_visible_to_user, score: 4) do
+    @subject.feature_available?(:merge_requests, @user)
+  end
+
   features = %w[
     merge_requests
     issues
@@ -81,6 +116,10 @@ class ProjectPolicy < BasePolicy
     condition(:"#{f}_disabled", score: 32) { !feature_available?(f.to_sym) }
   end
 
+  # `:read_project` may be prevented in EE, but `:read_project_for_iids` should
+  # not.
+  rule { guest | admin }.enable :read_project_for_iids
+
   rule { guest }.enable :guest_access
   rule { reporter }.enable :reporter_access
   rule { developer }.enable :developer_access
@@ -106,6 +145,7 @@ class ProjectPolicy < BasePolicy
 
   rule { can?(:guest_access) }.policy do
     enable :read_project
+    enable :create_merge_request_in
     enable :read_board
     enable :read_list
     enable :read_wiki
@@ -120,10 +160,11 @@ class ProjectPolicy < BasePolicy
     enable :create_note
     enable :upload_file
     enable :read_cycle_analytics
+    enable :award_emoji
   end
 
   # These abilities are not allowed to admins that are not members of the project,
-  # that's why they are defined separatly.
+  # that's why they are defined separately.
   rule { guest & can?(:download_code) }.enable :build_download_code
   rule { guest & can?(:read_container_image) }.enable :build_read_container_image
 
@@ -150,6 +191,7 @@ class ProjectPolicy < BasePolicy
   # where we enable or prevent it based on other coditions.
   rule { (~anonymous & public_project) | internal_access }.policy do
     enable :public_user_access
+    enable :read_project_for_iids
   end
 
   rule { can?(:public_user_access) }.policy do
@@ -176,7 +218,7 @@ class ProjectPolicy < BasePolicy
     enable :create_pipeline
     enable :update_pipeline
     enable :create_pipeline_schedule
-    enable :create_merge_request
+    enable :create_merge_request_from
     enable :create_wiki
     enable :push_code
     enable :resolve_note
@@ -187,7 +229,7 @@ class ProjectPolicy < BasePolicy
   end
 
   rule { can?(:master_access) }.policy do
-    enable :delete_protected_branch
+    enable :push_to_delete_protected_branch
     enable :update_project_snippet
     enable :update_environment
     enable :update_deployment
@@ -209,38 +251,54 @@ class ProjectPolicy < BasePolicy
     enable :create_cluster
   end
 
+  rule { (mirror_available & can?(:admin_project)) | admin }.enable :admin_remote_mirror
+
   rule { archived }.policy do
-    prevent :create_merge_request
     prevent :push_code
-    prevent :delete_protected_branch
-    prevent :update_merge_request
-    prevent :admin_merge_request
+    prevent :push_to_delete_protected_branch
+    prevent :request_access
+    prevent :upload_file
+    prevent :resolve_note
+    prevent :create_merge_request_from
+    prevent :create_merge_request_in
+    prevent :award_emoji
+
+    READONLY_FEATURES_WHEN_ARCHIVED.each do |feature|
+      prevent(*create_update_admin_destroy(feature))
+    end
+  end
+
+  rule { issues_disabled }.policy do
+    prevent(*create_read_update_admin_destroy(:issue))
   end
 
   rule { merge_requests_disabled | repository_disabled }.policy do
-    prevent(*create_read_update_admin(:merge_request))
+    prevent :create_merge_request_in
+    prevent :create_merge_request_from
+    prevent(*create_read_update_admin_destroy(:merge_request))
   end
 
   rule { issues_disabled & merge_requests_disabled }.policy do
-    prevent(*create_read_update_admin(:label))
-    prevent(*create_read_update_admin(:milestone))
+    prevent(*create_read_update_admin_destroy(:label))
+    prevent(*create_read_update_admin_destroy(:milestone))
   end
 
   rule { snippets_disabled }.policy do
-    prevent(*create_read_update_admin(:project_snippet))
+    prevent(*create_read_update_admin_destroy(:project_snippet))
   end
 
   rule { wiki_disabled & ~has_external_wiki }.policy do
-    prevent(*create_read_update_admin(:wiki))
+    prevent(*create_read_update_admin_destroy(:wiki))
     prevent(:download_wiki_code)
   end
 
   rule { builds_disabled | repository_disabled }.policy do
-    prevent(*create_read_update_admin(:build))
-    prevent(*(create_read_update_admin(:pipeline) - [:read_pipeline]))
-    prevent(*create_read_update_admin(:pipeline_schedule))
-    prevent(*create_read_update_admin(:environment))
-    prevent(*create_read_update_admin(:deployment))
+    prevent(*create_update_admin_destroy(:pipeline))
+    prevent(*create_read_update_admin_destroy(:build))
+    prevent(*create_read_update_admin_destroy(:pipeline_schedule))
+    prevent(*create_read_update_admin_destroy(:environment))
+    prevent(*create_read_update_admin_destroy(:cluster))
+    prevent(*create_read_update_admin_destroy(:deployment))
   end
 
   rule { repository_disabled }.policy do
@@ -251,11 +309,15 @@ class ProjectPolicy < BasePolicy
   end
 
   rule { container_registry_disabled }.policy do
-    prevent(*create_read_update_admin(:container_image))
+    prevent(*create_read_update_admin_destroy(:container_image))
   end
 
   rule { anonymous & ~public_project }.prevent_all
-  rule { public_project }.enable(:public_access)
+
+  rule { public_project }.policy do
+    enable :public_access
+    enable :read_project_for_iids
+  end
 
   rule { can?(:public_access) }.policy do
     enable :read_project
@@ -289,22 +351,21 @@ class ProjectPolicy < BasePolicy
     enable :read_pipeline_schedule
   end
 
-  rule { issues_disabled }.policy do
-    prevent :create_issue
-    prevent :update_issue
-    prevent :admin_issue
-    prevent :read_issue
-  end
-
   # These rules are included to allow maintainers of projects to push to certain
   # to run pipelines for the branches they have access to.
   rule { can?(:public_access) & has_merge_requests_allowing_pushes }.policy do
     enable :create_build
-    enable :update_build
     enable :create_pipeline
-    enable :update_pipeline
   end
 
+  rule do
+    (can?(:read_project_for_iids) & issues_visible_to_user) | can?(:read_issue)
+  end.enable :read_issue_iid
+
+  rule do
+    (can?(:read_project_for_iids) & merge_requests_visible_to_user) | can?(:read_merge_request)
+  end.enable :read_merge_request_iid
+
   private
 
   def team_member?
diff --git a/app/policies/project_policy/class_methods.rb b/app/policies/project_policy/class_methods.rb
new file mode 100644
index 00000000000..60e5aba00ba
--- /dev/null
+++ b/app/policies/project_policy/class_methods.rb
@@ -0,0 +1,19 @@
+class ProjectPolicy
+  module ClassMethods
+    def create_read_update_admin_destroy(name)
+      [
+        :"read_#{name}",
+        *create_update_admin_destroy(name)
+      ]
+    end
+
+    def create_update_admin_destroy(name)
+      [
+        :"create_#{name}",
+        :"update_#{name}",
+        :"admin_#{name}",
+        :"destroy_#{name}"
+      ]
+    end
+  end
+end
diff --git a/app/policies/protected_branch_policy.rb b/app/policies/protected_branch_policy.rb
new file mode 100644
index 00000000000..1a7faa4db40
--- /dev/null
+++ b/app/policies/protected_branch_policy.rb
@@ -0,0 +1,9 @@
+class ProtectedBranchPolicy < BasePolicy
+  delegate { @subject.project }
+
+  rule { can?(:admin_project) }.policy do
+    enable :create_protected_branch
+    enable :update_protected_branch
+    enable :destroy_protected_branch
+  end
+end
diff --git a/app/policies/user_policy.rb b/app/policies/user_policy.rb
index 0905ddd9b38..ee219f0a0d0 100644
--- a/app/policies/user_policy.rb
+++ b/app/policies/user_policy.rb
@@ -8,6 +8,8 @@ class UserPolicy < BasePolicy
   rule { ~restricted_public_level }.enable :read_user
   rule { ~anonymous }.enable :read_user
 
-  rule { user_is_self | admin }.enable :destroy_user
-  rule { subject_ghost }.prevent :destroy_user
+  rule { ~subject_ghost & (user_is_self | admin) }.policy do
+    enable :destroy_user
+    enable :update_user
+  end
 end
diff --git a/app/presenters/ci/build_metadata_presenter.rb b/app/presenters/ci/build_metadata_presenter.rb
new file mode 100644
index 00000000000..5048f967ea8
--- /dev/null
+++ b/app/presenters/ci/build_metadata_presenter.rb
@@ -0,0 +1,18 @@
+module Ci
+  class BuildMetadataPresenter < Gitlab::View::Presenter::Delegated
+    TIMEOUT_SOURCES = {
+        unknown_timeout_source: nil,
+        project_timeout_source: 'project',
+        runner_timeout_source: 'runner'
+    }.freeze
+
+    presents :metadata
+
+    def timeout_source
+      return unless metadata.timeout_source?
+
+      TIMEOUT_SOURCES[metadata.timeout_source.to_sym] ||
+        metadata.timeout_source
+    end
+  end
+end
diff --git a/app/presenters/ci/build_presenter.rb b/app/presenters/ci/build_presenter.rb
index 255475e1fe6..e0aaa5cb736 100644
--- a/app/presenters/ci/build_presenter.rb
+++ b/app/presenters/ci/build_presenter.rb
@@ -1,7 +1,5 @@
 module Ci
-  class BuildPresenter < Gitlab::View::Presenter::Delegated
-    presents :build
-
+  class BuildPresenter < CommitStatusPresenter
     def erased_by_user?
       # Build can be erased through API, therefore it does not have
       # `erased_by` user assigned in that case.
@@ -15,6 +13,8 @@ module Ci
     def status_title
       if auto_canceled?
         "Job is redundant and is auto-canceled by Pipeline ##{auto_canceled_by_id}"
+      else
+        tooltip_for_badge
       end
     end
 
@@ -28,5 +28,19 @@ module Ci
           trigger_request.user_variables
         end
     end
+
+    def tooltip_message
+      "#{subject.name} - #{detailed_status.status_tooltip}"
+    end
+
+    private
+
+    def tooltip_for_badge
+      detailed_status.badge_tooltip.capitalize
+    end
+
+    def detailed_status
+      @detailed_status ||= subject.detailed_status(user)
+    end
   end
 end
diff --git a/app/presenters/ci/pipeline_presenter.rb b/app/presenters/ci/pipeline_presenter.rb
index 099b4720fb6..cc2bce9862d 100644
--- a/app/presenters/ci/pipeline_presenter.rb
+++ b/app/presenters/ci/pipeline_presenter.rb
@@ -1,11 +1,21 @@
 module Ci
   class PipelinePresenter < Gitlab::View::Presenter::Delegated
+    include Gitlab::Utils::StrongMemoize
+
     FAILURE_REASONS = {
       config_error: 'CI/CD YAML configuration error!'
     }.freeze
 
     presents :pipeline
 
+    def failed_builds
+      return [] unless can?(current_user, :read_build, pipeline)
+
+      strong_memoize(:failed_builds) do
+        pipeline.builds.latest.failed
+      end
+    end
+
     def failure_reason
       return unless pipeline.failure_reason?
 
diff --git a/app/presenters/commit_status_presenter.rb b/app/presenters/commit_status_presenter.rb
new file mode 100644
index 00000000000..9a7aaf4ef32
--- /dev/null
+++ b/app/presenters/commit_status_presenter.rb
@@ -0,0 +1,23 @@
+class CommitStatusPresenter < Gitlab::View::Presenter::Delegated
+  CALLOUT_FAILURE_MESSAGES = {
+      unknown_failure: 'There is an unknown failure, please try again',
+      api_failure: 'There has been an API failure, please try again',
+      stuck_or_timeout_failure: 'There has been a timeout failure or the job got stuck. Check your timeout limits or try again',
+      runner_system_failure: 'There has been a runner system failure, please try again',
+      missing_dependency_failure: 'There has been a missing dependency failure'
+  }.freeze
+
+  presents :build
+
+  def callout_failure_message
+    CALLOUT_FAILURE_MESSAGES[failure_reason.to_sym]
+  end
+
+  def recoverable?
+    failed? && !unrecoverable?
+  end
+
+  def unrecoverable?
+    script_failure? || missing_dependency_failure?
+  end
+end
diff --git a/app/presenters/generic_commit_status_presenter.rb b/app/presenters/generic_commit_status_presenter.rb
new file mode 100644
index 00000000000..da09df29a37
--- /dev/null
+++ b/app/presenters/generic_commit_status_presenter.rb
@@ -0,0 +1,2 @@
+class GenericCommitStatusPresenter < CommitStatusPresenter
+end
diff --git a/app/presenters/merge_request_presenter.rb b/app/presenters/merge_request_presenter.rb
index 9f3f2637183..eb54ab2cda6 100644
--- a/app/presenters/merge_request_presenter.rb
+++ b/app/presenters/merge_request_presenter.rb
@@ -3,6 +3,7 @@ class MergeRequestPresenter < Gitlab::View::Presenter::Delegated
   include GitlabRoutingHelper
   include MarkupHelper
   include TreeHelper
+  include ChecksCollaboration
   include Gitlab::Utils::StrongMemoize
 
   presents :merge_request
@@ -152,11 +153,11 @@ class MergeRequestPresenter < Gitlab::View::Presenter::Delegated
   end
 
   def can_revert_on_current_merge_request?
-    user_can_collaborate_with_project? && cached_can_be_reverted?
+    can_collaborate_with_project?(project) && cached_can_be_reverted?
   end
 
   def can_cherry_pick_on_current_merge_request?
-    user_can_collaborate_with_project? && can_be_cherry_picked?
+    can_collaborate_with_project?(project) && can_be_cherry_picked?
   end
 
   def can_push_to_source_branch?
@@ -167,6 +168,25 @@ class MergeRequestPresenter < Gitlab::View::Presenter::Delegated
       .can_push_to_branch?(source_branch)
   end
 
+  def mergeable_discussions_state
+    # This avoids calling MergeRequest#mergeable_discussions_state without
+    # considering the state of the MR first. If a MR isn't mergeable, we can
+    # safely short-circuit it.
+    if merge_request.mergeable_state?(skip_ci_check: true, skip_discussions_check: true)
+      merge_request.mergeable_discussions_state?
+    else
+      false
+    end
+  end
+
+  def web_url
+    Gitlab::UrlBuilder.build(merge_request)
+  end
+
+  def subscribed?
+    merge_request.subscribed?(current_user, merge_request.target_project)
+  end
+
   private
 
   def cached_can_be_reverted?
@@ -195,12 +215,6 @@ class MergeRequestPresenter < Gitlab::View::Presenter::Delegated
     end.sort.to_sentence
   end
 
-  def user_can_collaborate_with_project?
-    can?(current_user, :push_code, project) ||
-      (current_user && current_user.already_forked?(project)) ||
-      can_push_to_source_branch?
-  end
-
   def user_can_fork_project?
     can?(current_user, :fork_project, project)
   end
diff --git a/app/presenters/project_presenter.rb b/app/presenters/project_presenter.rb
index 484ac64580d..ad655a7b3f4 100644
--- a/app/presenters/project_presenter.rb
+++ b/app/presenters/project_presenter.rb
@@ -4,6 +4,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
   include GitlabRoutingHelper
   include StorageHelper
   include TreeHelper
+  include ChecksCollaboration
   include Gitlab::Utils::StrongMemoize
 
   presents :project
@@ -170,9 +171,11 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
   end
 
   def can_current_user_push_to_branch?(branch)
-    return false unless repository.branch_exists?(branch)
+    user_access(project).can_push_to_branch?(branch)
+  end
 
-    ::Gitlab::UserAccess.new(current_user, project: project).can_push_to_branch?(branch)
+  def can_current_user_push_to_default_branch?
+    can_current_user_push_to_branch?(default_branch)
   end
 
   def files_anchor_data
@@ -200,7 +203,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
   end
 
   def new_file_anchor_data
-    if current_user && can_current_user_push_code?
+    if current_user && can_current_user_push_to_default_branch?
       OpenStruct.new(enabled: false,
                      label: _('New file'),
                      link: project_new_blob_path(project, default_branch || 'master'),
@@ -209,7 +212,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
   end
 
   def readme_anchor_data
-    if current_user && can_current_user_push_code? && repository.readme.blank?
+    if current_user && can_current_user_push_to_default_branch? && repository.readme.blank?
       OpenStruct.new(enabled: false,
                      label: _('Add Readme'),
                      link: add_readme_path)
@@ -221,7 +224,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
   end
 
   def changelog_anchor_data
-    if current_user && can_current_user_push_code? && repository.changelog.blank?
+    if current_user && can_current_user_push_to_default_branch? && repository.changelog.blank?
       OpenStruct.new(enabled: false,
                      label: _('Add Changelog'),
                      link: add_changelog_path)
@@ -233,7 +236,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
   end
 
   def license_anchor_data
-    if current_user && can_current_user_push_code? && repository.license_blob.blank?
+    if current_user && can_current_user_push_to_default_branch? && repository.license_blob.blank?
       OpenStruct.new(enabled: false,
                      label: _('Add License'),
                      link: add_license_path)
@@ -245,7 +248,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
   end
 
   def contribution_guide_anchor_data
-    if current_user && can_current_user_push_code? && repository.contribution_guide.blank?
+    if current_user && can_current_user_push_to_default_branch? && repository.contribution_guide.blank?
       OpenStruct.new(enabled: false,
                      label: _('Add Contribution guide'),
                      link: add_contribution_guide_path)
@@ -260,7 +263,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
     if current_user && can?(current_user, :admin_pipeline, project) && repository.gitlab_ci_yml.blank? && !show_auto_devops_callout
       OpenStruct.new(enabled: auto_devops_enabled?,
                      label: auto_devops_enabled? ? _('Auto DevOps enabled') : _('Enable Auto DevOps'),
-                     link: project_settings_ci_cd_path(project, anchor: 'js-general-pipeline-settings'))
+                     link: project_settings_ci_cd_path(project, anchor: 'autodevops-settings'))
     elsif auto_devops_enabled?
       OpenStruct.new(enabled: true,
                      label: _('Auto DevOps enabled'),
diff --git a/app/serializers/blob_entity.rb b/app/serializers/blob_entity.rb
index ad039a2623d..b501fd5e964 100644
--- a/app/serializers/blob_entity.rb
+++ b/app/serializers/blob_entity.rb
@@ -3,11 +3,13 @@ class BlobEntity < Grape::Entity
 
   expose :id, :path, :name, :mode
 
+  expose :readable_text?, as: :readable_text
+
   expose :icon do |blob|
     IconsHelper.file_type_icon_class('file', blob.mode, blob.name)
   end
 
-  expose :url do |blob|
+  expose :url, if: -> (*) { request.respond_to?(:ref) } do |blob|
     project_blob_path(request.project, File.join(request.ref, blob.path))
   end
 end
diff --git a/app/serializers/build_details_entity.rb b/app/serializers/build_details_entity.rb
index 69d46f5ec14..ca4480fe2b1 100644
--- a/app/serializers/build_details_entity.rb
+++ b/app/serializers/build_details_entity.rb
@@ -5,6 +5,8 @@ class BuildDetailsEntity < JobEntity
   expose :runner, using: RunnerEntity
   expose :pipeline, using: PipelineEntity
 
+  expose :metadata, using: BuildMetadataEntity
+
   expose :erased_by, if: -> (*) { build.erased? }, using: UserEntity
   expose :erase_path, if: -> (*) { build.erasable? && can?(current_user, :erase_build, build) } do |build|
     erase_project_job_path(project, build)
diff --git a/app/serializers/build_metadata_entity.rb b/app/serializers/build_metadata_entity.rb
new file mode 100644
index 00000000000..f16f3badffa
--- /dev/null
+++ b/app/serializers/build_metadata_entity.rb
@@ -0,0 +1,6 @@
+class BuildMetadataEntity < Grape::Entity
+  expose :timeout_human_readable
+  expose :timeout_source do |metadata|
+    metadata.present.timeout_source
+  end
+end
diff --git a/app/serializers/cluster_application_entity.rb b/app/serializers/cluster_application_entity.rb
index b22a0b666ef..77fc3336521 100644
--- a/app/serializers/cluster_application_entity.rb
+++ b/app/serializers/cluster_application_entity.rb
@@ -3,4 +3,5 @@ class ClusterApplicationEntity < Grape::Entity
   expose :status_name, as: :status
   expose :status_reason
   expose :external_ip, if: -> (e, _) { e.respond_to?(:external_ip) }
+  expose :hostname, if: -> (e, _) { e.respond_to?(:hostname) }
 end
diff --git a/app/serializers/diff_file_entity.rb b/app/serializers/diff_file_entity.rb
index 6e68d275047..aa289a96975 100644
--- a/app/serializers/diff_file_entity.rb
+++ b/app/serializers/diff_file_entity.rb
@@ -1,25 +1,46 @@
 class DiffFileEntity < Grape::Entity
+  include RequestAwareEntity
+  include BlobHelper
+  include CommitsHelper
   include DiffHelper
   include SubmoduleHelper
   include BlobHelper
   include IconsHelper
-  include ActionView::Helpers::TagHelper
+  include TreeHelper
+  include ChecksCollaboration
+  include Gitlab::Utils::StrongMemoize
 
   expose :submodule?, as: :submodule
 
   expose :submodule_link do |diff_file|
-    submodule_links(diff_file.blob, diff_file.content_sha, diff_file.repository).first
+    memoized_submodule_links(diff_file).first
+  end
+
+  expose :submodule_tree_url do |diff_file|
+    memoized_submodule_links(diff_file).last
   end
 
-  expose :blob_path do |diff_file|
-    diff_file.blob.path
+  expose :blob, using: BlobEntity
+
+  expose :can_modify_blob do |diff_file|
+    merge_request = options[:merge_request]
+
+    if merge_request&.source_project && current_user
+      can_modify_blob?(diff_file.blob, merge_request.source_project, merge_request.source_branch)
+    else
+      false
+    end
   end
 
-  expose :blob_icon do |diff_file|
-    blob_icon(diff_file.b_mode, diff_file.file_path)
+  expose :file_hash do |diff_file|
+    Digest::SHA1.hexdigest(diff_file.file_path)
   end
 
   expose :file_path
+  expose :too_large?, as: :too_large
+  expose :collapsed?, as: :collapsed
+  expose :new_file?, as: :new_file
+
   expose :deleted_file?, as: :deleted_file
   expose :renamed_file?, as: :renamed_file
   expose :old_path
@@ -28,6 +49,36 @@ class DiffFileEntity < Grape::Entity
   expose :a_mode
   expose :b_mode
   expose :text?, as: :text
+  expose :added_lines
+  expose :removed_lines
+  expose :diff_refs
+  expose :content_sha
+  expose :stored_externally?, as: :stored_externally
+  expose :external_storage
+
+  expose :load_collapsed_diff_url, if: -> (diff_file, options) { diff_file.text? && options[:merge_request] } do |diff_file|
+    merge_request = options[:merge_request]
+    project = merge_request.target_project
+
+    next unless project
+
+    diff_for_path_namespace_project_merge_request_path(
+      namespace_id: project.namespace.to_param,
+      project_id: project.to_param,
+      id: merge_request.iid,
+      old_path: diff_file.old_path,
+      new_path: diff_file.new_path,
+      file_identifier: diff_file.file_identifier
+    )
+  end
+
+  expose :formatted_external_url, if: -> (_, options) { options[:environment] } do |diff_file|
+    options[:environment].formatted_external_url
+  end
+
+  expose :external_url, if: -> (_, options) { options[:environment] } do |diff_file|
+    options[:environment].external_url_for(diff_file.new_path, diff_file.content_sha)
+  end
 
   expose :old_path_html do |diff_file|
     old_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
@@ -38,4 +89,64 @@ class DiffFileEntity < Grape::Entity
     _, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
     new_path
   end
+
+  expose :edit_path, if: -> (_, options) { options[:merge_request] } do |diff_file|
+    merge_request = options[:merge_request]
+
+    options = merge_request.persisted? ? { from_merge_request_iid: merge_request.iid } : {}
+
+    next unless merge_request.source_project
+
+    project_edit_blob_path(merge_request.source_project,
+      tree_join(merge_request.source_branch, diff_file.new_path),
+      options)
+  end
+
+  expose :view_path, if: -> (_, options) { options[:merge_request] } do |diff_file|
+    merge_request = options[:merge_request]
+
+    project = merge_request.target_project
+
+    next unless project
+
+    project_blob_path(project, tree_join(diff_file.content_sha, diff_file.new_path))
+  end
+
+  expose :replaced_view_path, if: -> (_, options) { options[:merge_request] } do |diff_file|
+    image_diff = diff_file.rich_viewer && diff_file.rich_viewer.partial_name == 'image'
+    image_replaced = diff_file.old_content_sha && diff_file.old_content_sha != diff_file.content_sha
+
+    merge_request = options[:merge_request]
+    project = merge_request.target_project
+
+    next unless project
+
+    project_blob_path(project, tree_join(diff_file.old_content_sha, diff_file.old_path)) if image_diff && image_replaced
+  end
+
+  expose :context_lines_path, if: -> (diff_file, _) { diff_file.text? } do |diff_file|
+    project_blob_diff_path(diff_file.repository.project, tree_join(diff_file.content_sha, diff_file.file_path))
+  end
+
+  # Used for inline diffs
+  expose :highlighted_diff_lines, if: -> (diff_file, _) { diff_file.text? } do |diff_file|
+    diff_file.diff_lines_for_serializer
+  end
+
+  # Used for parallel diffs
+  expose :parallel_diff_lines, if: -> (diff_file, _) { diff_file.text? }
+
+  def current_user
+    request.current_user
+  end
+
+  def memoized_submodule_links(diff_file)
+    strong_memoize(:submodule_links) do
+      if diff_file.submodule?
+        submodule_links(diff_file.blob, diff_file.content_sha, diff_file.repository)
+      else
+        []
+      end
+    end
+  end
 end
diff --git a/app/serializers/diffs_entity.rb b/app/serializers/diffs_entity.rb
new file mode 100644
index 00000000000..bb804e5347a
--- /dev/null
+++ b/app/serializers/diffs_entity.rb
@@ -0,0 +1,65 @@
+class DiffsEntity < Grape::Entity
+  include DiffHelper
+  include RequestAwareEntity
+
+  expose :real_size
+  expose :size
+
+  expose :branch_name do |diffs|
+    merge_request&.source_branch
+  end
+
+  expose :target_branch_name do |diffs|
+    merge_request&.target_branch
+  end
+
+  expose :commit do |diffs|
+    options[:commit]
+  end
+
+  expose :merge_request_diff, using: MergeRequestDiffEntity do |diffs|
+    options[:merge_request_diff]
+  end
+
+  expose :start_version, using: MergeRequestDiffEntity do |diffs|
+    options[:start_version]
+  end
+
+  expose :latest_diff do |diffs|
+    options[:latest_diff]
+  end
+
+  expose :latest_version_path, if: -> (*) { merge_request } do |diffs|
+    diffs_project_merge_request_path(merge_request&.project, merge_request)
+  end
+
+  expose :added_lines do |diffs|
+    diffs.diff_files.sum(&:added_lines)
+  end
+
+  expose :removed_lines do |diffs|
+    diffs.diff_files.sum(&:removed_lines)
+  end
+
+  expose :render_overflow_warning do |diffs|
+    render_overflow_warning?(diffs.diff_files)
+  end
+
+  expose :email_patch_path, if: -> (*) { merge_request } do |diffs|
+    merge_request_path(merge_request, format: :patch)
+  end
+
+  expose :plain_diff_path, if: -> (*) { merge_request } do |diffs|
+    merge_request_path(merge_request, format: :diff)
+  end
+
+  expose :diff_files, using: DiffFileEntity
+
+  expose :merge_request_diffs, using: MergeRequestDiffEntity, if: -> (_, options) { options[:merge_request_diffs]&.any? } do |diffs|
+    options[:merge_request_diffs]
+  end
+
+  def merge_request
+    options[:merge_request]
+  end
+end
diff --git a/app/serializers/diffs_serializer.rb b/app/serializers/diffs_serializer.rb
new file mode 100644
index 00000000000..6771e10c5ac
--- /dev/null
+++ b/app/serializers/diffs_serializer.rb
@@ -0,0 +1,3 @@
+class DiffsSerializer < BaseSerializer
+  entity DiffsEntity
+end
diff --git a/app/serializers/discussion_entity.rb b/app/serializers/discussion_entity.rb
index bbbcf6a97c1..63f28133a64 100644
--- a/app/serializers/discussion_entity.rb
+++ b/app/serializers/discussion_entity.rb
@@ -1,39 +1,49 @@
 class DiscussionEntity < Grape::Entity
   include RequestAwareEntity
+  include NotesHelper
 
   expose :id, :reply_id
+  expose :position, if: -> (d, _) { d.diff_discussion? }
+  expose :line_code, if: -> (d, _) { d.diff_discussion? }
   expose :expanded?, as: :expanded
+  expose :active?, as: :active, if: -> (d, _) { d.diff_discussion? }
+  expose :project_id
 
-  expose :notes, using: NoteEntity
+  expose :notes do |discussion, opts|
+    request.note_entity.represent(discussion.notes, opts)
+  end
+
+  expose :discussion_path do |discussion|
+    discussion_path(discussion)
+  end
 
   expose :individual_note?, as: :individual_note
-  expose :resolvable?, as: :resolvable
+  expose :resolvable do |discussion|
+    discussion.resolvable?
+  end
+
   expose :resolved?, as: :resolved
+  expose :resolved_by_push?, as: :resolved_by_push
+  expose :resolved_by
+  expose :resolved_at
   expose :resolve_path, if: -> (d, _) { d.resolvable? } do |discussion|
     resolve_project_merge_request_discussion_path(discussion.project, discussion.noteable, discussion.id)
   end
-  expose :resolve_with_issue_path do |discussion|
+  expose :resolve_with_issue_path, if: -> (d, _) { d.resolvable? } do |discussion|
     new_project_issue_path(discussion.project, merge_request_to_resolve_discussions_of: discussion.noteable.iid, discussion_to_resolve: discussion.id)
   end
 
-  expose :diff_file, using: DiffFileEntity, if: -> (d, _) { defined? d.diff_file }
+  expose :diff_file, using: DiffFileEntity, if: -> (d, _) { d.diff_discussion? }
 
   expose :diff_discussion?, as: :diff_discussion
 
-  expose :truncated_diff_lines, if: -> (d, _) { (defined? d.diff_file) && d.diff_file.text? } do |discussion|
-    options[:context].render_to_string(
-      partial: "projects/diffs/line",
-      collection: discussion.truncated_diff_lines,
-      as: :line,
-      locals: { diff_file: discussion.diff_file,
-                discussion_expanded: true,
-                plain: true },
-      layout: false,
-      formats: [:html]
-    )
+  expose :truncated_diff_lines_path, if: -> (d, _) { !d.expanded? && !render_truncated_diff_lines? } do |discussion|
+    project_merge_request_discussion_path(discussion.project, discussion.noteable, discussion)
   end
 
-  expose :image_diff_html, if: -> (d, _) { defined? d.diff_file } do |discussion|
+  expose :truncated_diff_lines, if: -> (d, _) { d.diff_discussion? && d.on_text? && (d.expanded? || render_truncated_diff_lines?) }
+
+  expose :image_diff_html, if: -> (d, _) { d.diff_discussion? && d.on_image? } do |discussion|
     diff_file = discussion.diff_file
     partial = diff_file.new_file? || diff_file.deleted_file? ? 'single_image_diff' : 'replaced_image_diff'
     options[:context].render_to_string(
@@ -45,4 +55,17 @@ class DiscussionEntity < Grape::Entity
       formats: [:html]
     )
   end
+
+  expose :for_commit?, as: :for_commit
+  expose :commit_id
+
+  private
+
+  def render_truncated_diff_lines?
+    options[:render_truncated_diff_lines]
+  end
+
+  def current_user
+    request.current_user
+  end
 end
diff --git a/app/serializers/entity_date_helper.rb b/app/serializers/entity_date_helper.rb
index 71d9a65fb58..464217123b4 100644
--- a/app/serializers/entity_date_helper.rb
+++ b/app/serializers/entity_date_helper.rb
@@ -1,5 +1,6 @@
 module EntityDateHelper
   include ActionView::Helpers::DateHelper
+  include ActionView::Helpers::TagHelper
 
   def interval_in_words(diff)
     return 'Not started' unless diff
@@ -34,4 +35,30 @@ module EntityDateHelper
 
     duration_hash
   end
+
+  # Generates an HTML-formatted string for remaining dates based on start_date and due_date
+  #
+  # It returns "Past due" for expired entities
+  # It returns "Upcoming" for upcoming entities
+  # If due date is provided, it returns "# days|weeks|months remaining|ago"
+  # If start date is provided and elapsed, with no due date, it returns "# days elapsed"
+  def remaining_days_in_words(entity)
+    if entity.try(:expired?)
+      content_tag(:strong, 'Past due')
+    elsif entity.try(:upcoming?)
+      content_tag(:strong, 'Upcoming')
+    elsif entity.due_date
+      is_upcoming = (entity.due_date - Date.today).to_i > 0
+      time_ago = time_ago_in_words(entity.due_date)
+      content = time_ago.gsub(/\d+/) { |match| "<strong>#{match}</strong>" }
+      content.slice!("about ")
+      content << " " + (is_upcoming ? _("remaining") : _("ago"))
+      content.html_safe
+    elsif entity.start_date && entity.start_date.past?
+      days    = entity.elapsed_days
+      content = content_tag(:strong, days)
+      content << " #{'day'.pluralize(days)} elapsed"
+      content.html_safe
+    end
+  end
 end
diff --git a/app/serializers/group_child_entity.rb b/app/serializers/group_child_entity.rb
index 15ec0f89bb2..ee150eefd9e 100644
--- a/app/serializers/group_child_entity.rb
+++ b/app/serializers/group_child_entity.rb
@@ -31,7 +31,7 @@ class GroupChildEntity < Grape::Entity
   end
 
   # Project only attributes
-  expose :star_count,
+  expose :star_count, :archived,
          if: lambda { |_instance, _options| project? }
 
   # Group only attributes
diff --git a/app/serializers/issue_entity.rb b/app/serializers/issue_entity.rb
index b5e2334b6e3..840fdbcbf14 100644
--- a/app/serializers/issue_entity.rb
+++ b/app/serializers/issue_entity.rb
@@ -29,6 +29,10 @@ class IssueEntity < IssuableEntity
     expose :can_update do |issue|
       can?(request.current_user, :update_issue, issue)
     end
+
+    expose :can_award_emoji do |issue|
+      can?(request.current_user, :award_emoji, issue)
+    end
   end
 
   expose :create_note_path do |issue|
diff --git a/app/serializers/job_entity.rb b/app/serializers/job_entity.rb
index 523b522d449..960e7291ae6 100644
--- a/app/serializers/job_entity.rb
+++ b/app/serializers/job_entity.rb
@@ -26,6 +26,8 @@ class JobEntity < Grape::Entity
   expose :created_at
   expose :updated_at
   expose :detailed_status, as: :status, with: StatusEntity
+  expose :callout_message, if: -> (*) { failed? && !build.script_failure? }
+  expose :recoverable, if: -> (*) { failed? }
 
   private
 
@@ -50,4 +52,20 @@ class JobEntity < Grape::Entity
   def path_to(route, build)
     send("#{route}_path", build.project.namespace, build.project, build) # rubocop:disable GitlabSecurity/PublicSend
   end
+
+  def failed?
+    build.failed?
+  end
+
+  def callout_message
+    build_presenter.callout_failure_message
+  end
+
+  def recoverable
+    build_presenter.recoverable?
+  end
+
+  def build_presenter
+    @build_presenter ||= build.present
+  end
 end
diff --git a/app/serializers/merge_request_basic_entity.rb b/app/serializers/merge_request_basic_entity.rb
index e4aec977f01..1c06691026d 100644
--- a/app/serializers/merge_request_basic_entity.rb
+++ b/app/serializers/merge_request_basic_entity.rb
@@ -5,4 +5,8 @@ class MergeRequestBasicEntity < IssuableSidebarEntity
   expose :state
   expose :source_branch_exists?, as: :source_branch_exists
   expose :rebase_in_progress?, as: :rebase_in_progress
+  expose :milestone, using: API::Entities::Milestone
+  expose :labels, using: LabelEntity
+  expose :assignee, using: API::Entities::UserBasic
+  expose :task_status, :task_status_short
 end
diff --git a/app/serializers/merge_request_diff_entity.rb b/app/serializers/merge_request_diff_entity.rb
new file mode 100644
index 00000000000..32c761b45ac
--- /dev/null
+++ b/app/serializers/merge_request_diff_entity.rb
@@ -0,0 +1,46 @@
+class MergeRequestDiffEntity < Grape::Entity
+  include Gitlab::Routing
+  include GitHelper
+  include MergeRequestsHelper
+
+  expose :version_index do |merge_request_diff|
+    @merge_request_diffs = options[:merge_request_diffs]
+    diff = options[:merge_request_diff]
+
+    next unless diff.present?
+    next unless @merge_request_diffs.size > 1
+
+    version_index(merge_request_diff)
+  end
+
+  expose :created_at
+  expose :commits_count
+
+  expose :latest?, as: :latest
+
+  expose :short_commit_sha do |merge_request_diff|
+    short_sha(merge_request_diff.head_commit_sha)
+  end
+
+  expose :version_path do |merge_request_diff|
+    start_sha = options[:start_sha]
+    project = merge_request.target_project
+
+    next unless project
+
+    merge_request_version_path(project, merge_request, merge_request_diff, start_sha)
+  end
+
+  expose :compare_path do |merge_request_diff|
+    project = merge_request.target_project
+    diff = options[:merge_request_diff]
+
+    if project && diff
+      merge_request_version_path(project, merge_request, diff, merge_request_diff.head_commit_sha)
+    end
+  end
+
+  def merge_request
+    options[:merge_request]
+  end
+end
diff --git a/app/serializers/merge_request_user_entity.rb b/app/serializers/merge_request_user_entity.rb
new file mode 100644
index 00000000000..33fc7b724d5
--- /dev/null
+++ b/app/serializers/merge_request_user_entity.rb
@@ -0,0 +1,24 @@
+class MergeRequestUserEntity < UserEntity
+  include RequestAwareEntity
+  include BlobHelper
+  include TreeHelper
+
+  expose :can_fork do |user|
+    can?(user, :fork_project, request.project) if project
+  end
+
+  expose :can_create_merge_request do |user|
+    project && can?(user, :create_merge_request_in, project)
+  end
+
+  expose :fork_path, if: -> (*) { project } do |user|
+    params = edit_blob_fork_params("Edit")
+    project_forks_path(project, namespace_key: user.namespace.id, continue: params)
+  end
+
+  def project
+    return false unless request.respond_to?(:project) && request.project
+
+    request.project
+  end
+end
diff --git a/app/serializers/merge_request_widget_entity.rb b/app/serializers/merge_request_widget_entity.rb
index 4a812e39ee1..0426afc1b4a 100644
--- a/app/serializers/merge_request_widget_entity.rb
+++ b/app/serializers/merge_request_widget_entity.rb
@@ -2,6 +2,7 @@ class MergeRequestWidgetEntity < IssuableEntity
   expose :state
   expose :in_progress_merge_commit_sha
   expose :merge_commit_sha
+  expose :short_merge_commit_sha
   expose :merge_error
   expose :merge_params
   expose :merge_status
@@ -9,9 +10,10 @@ class MergeRequestWidgetEntity < IssuableEntity
   expose :merge_when_pipeline_succeeds
   expose :source_branch
   expose :source_project_id
+  expose :squash
   expose :target_branch
   expose :target_project_id
-  expose :allow_maintainer_to_push
+  expose :allow_collaboration
 
   expose :should_be_rebased?, as: :should_be_rebased
   expose :ff_only_enabled do |merge_request|
@@ -118,12 +120,12 @@ class MergeRequestWidgetEntity < IssuableEntity
       presenter(merge_request).can_cherry_pick_on_current_merge_request?
     end
 
-    expose :can_create_note do |issue|
-      can?(request.current_user, :create_note, issue.project)
+    expose :can_create_note do |merge_request|
+      can?(request.current_user, :create_note, merge_request)
     end
 
-    expose :can_update do |issue|
-      can?(request.current_user, :update_issue, issue)
+    expose :can_update do |merge_request|
+      can?(request.current_user, :update_merge_request, merge_request)
     end
   end
 
@@ -207,6 +209,16 @@ class MergeRequestWidgetEntity < IssuableEntity
     commit_change_content_project_merge_request_path(merge_request.project, merge_request)
   end
 
+  expose :preview_note_path do |merge_request|
+    preview_markdown_path(merge_request.project, quick_actions_target_type: 'MergeRequest', quick_actions_target_id: merge_request.id)
+  end
+
+  expose :merge_commit_path do |merge_request|
+    if merge_request.merge_commit_sha
+      project_commit_path(merge_request.project, merge_request.merge_commit_sha)
+    end
+  end
+
   private
 
   delegate :current_user, to: :request
diff --git a/app/serializers/note_entity.rb b/app/serializers/note_entity.rb
index 4ccf0bca476..ce0c31b5806 100644
--- a/app/serializers/note_entity.rb
+++ b/app/serializers/note_entity.rb
@@ -1,14 +1,11 @@
 class NoteEntity < API::Entities::Note
   include RequestAwareEntity
+  include NotesHelper
 
   expose :type
 
   expose :author, using: NoteUserEntity
 
-  expose :human_access do |note|
-    note.project.team.human_max_access(note.author_id)
-  end
-
   unexpose :note, as: :body
   expose :note
 
@@ -19,12 +16,21 @@ class NoteEntity < API::Entities::Note
 
   expose :current_user do
     expose :can_edit do |note|
-      Ability.can_edit_note?(request.current_user, note)
+      can?(current_user, :admin_note, note)
+    end
+
+    expose :can_award_emoji do |note|
+      can?(current_user, :award_emoji, note)
+    end
+
+    expose :can_resolve do |note|
+      note.resolvable? && can?(current_user, :resolve_note, note)
     end
   end
 
   expose :resolved?, as: :resolved
   expose :resolvable?, as: :resolvable
+
   expose :resolved_by, using: NoteUserEntity
 
   expose :system_note_icon_name, if: -> (note, _) { note.system? } do |note|
@@ -37,24 +43,13 @@ class NoteEntity < API::Entities::Note
 
   expose :emoji_awardable?, as: :emoji_awardable
   expose :award_emoji, if: -> (note, _) { note.emoji_awardable? }, using: AwardEmojiEntity
-  expose :toggle_award_path, if: -> (note, _) { note.emoji_awardable? } do |note|
-    if note.for_personal_snippet?
-      toggle_award_emoji_snippet_note_path(note.noteable, note)
-    else
-      toggle_award_emoji_project_note_path(note.project, note.id)
-    end
-  end
 
   expose :report_abuse_path do |note|
     new_abuse_report_path(user_id: note.author.id, ref_url: Gitlab::UrlBuilder.build(note))
   end
 
-  expose :path do |note|
-    if note.for_personal_snippet?
-      snippet_note_path(note.noteable, note)
-    else
-      project_note_path(note.project, note)
-    end
+  expose :noteable_note_url do |note|
+    noteable_note_url(note)
   end
 
   expose :resolve_path, if: -> (note, _) { note.part_of_discussion? && note.resolvable? } do |note|
@@ -66,7 +61,10 @@ class NoteEntity < API::Entities::Note
   end
 
   expose :attachment, using: NoteAttachmentEntity, if: -> (note, _) { note.attachment? }
-  expose :delete_attachment_path, if: -> (note, _) { note.attachment? } do |note|
-    delete_attachment_project_note_path(note.project, note)
+
+  private
+
+  def current_user
+    request.current_user
   end
 end
diff --git a/app/serializers/note_serializer.rb b/app/serializers/note_serializer.rb
deleted file mode 100644
index 2afe40d7a34..00000000000
--- a/app/serializers/note_serializer.rb
+++ /dev/null
@@ -1,3 +0,0 @@
-class NoteSerializer < BaseSerializer
-  entity NoteEntity
-end
diff --git a/app/serializers/pipeline_details_entity.rb b/app/serializers/pipeline_details_entity.rb
index 130968a44c1..8ba9cac53c4 100644
--- a/app/serializers/pipeline_details_entity.rb
+++ b/app/serializers/pipeline_details_entity.rb
@@ -1,6 +1,6 @@
 class PipelineDetailsEntity < PipelineEntity
   expose :details do
-    expose :legacy_stages, as: :stages, using: StageEntity
+    expose :ordered_stages, as: :stages, using: StageEntity
     expose :artifacts, using: BuildArtifactEntity
     expose :manual_actions, using: BuildActionEntity
   end
diff --git a/app/serializers/pipeline_entity.rb b/app/serializers/pipeline_entity.rb
index 6457294b285..f782b411b84 100644
--- a/app/serializers/pipeline_entity.rb
+++ b/app/serializers/pipeline_entity.rb
@@ -4,7 +4,11 @@ class PipelineEntity < Grape::Entity
   expose :id
   expose :user, using: UserEntity
   expose :active?, as: :active
-  expose :coverage
+
+  # Coverage isn't always necessary (e.g. when displaying project pipelines in
+  # the UI). Instead of creating an entirely different entity we just allow the
+  # disabling of this specific field whenever necessary.
+  expose :coverage, unless: proc { options[:disable_coverage] }
   expose :source
 
   expose :created_at, :updated_at
diff --git a/app/serializers/pipeline_serializer.rb b/app/serializers/pipeline_serializer.rb
index 7181f8a6b04..17a022539bb 100644
--- a/app/serializers/pipeline_serializer.rb
+++ b/app/serializers/pipeline_serializer.rb
@@ -1,14 +1,11 @@
 class PipelineSerializer < BaseSerializer
   include WithPagination
-
-  InvalidResourceError = Class.new(StandardError)
-
   entity PipelineDetailsEntity
 
   def represent(resource, opts = {})
     if resource.is_a?(ActiveRecord::Relation)
-
       resource = resource.preload([
+        :stages,
         :retryable_builds,
         :cancelable_statuses,
         :trigger_requests,
@@ -20,10 +17,14 @@ class PipelineSerializer < BaseSerializer
     end
 
     if paginated?
-      super(@paginator.paginate(resource), opts)
-    else
-      super(resource, opts)
+      resource = paginator.paginate(resource)
     end
+
+    if opts.delete(:preload)
+      resource = Gitlab::Ci::Pipeline::Preloader.preload!(resource)
+    end
+
+    super(resource, opts)
   end
 
   def represent_status(resource)
@@ -36,7 +37,7 @@ class PipelineSerializer < BaseSerializer
   def represent_stages(resource)
     return {} unless resource.present?
 
-    data = represent(resource, { only: [{ details: [:stages] }] })
+    data = represent(resource, { only: [{ details: [:stages] }], preload: true })
     data.dig(:details, :stages) || []
   end
 end
diff --git a/app/serializers/project_mirror_entity.rb b/app/serializers/project_mirror_entity.rb
new file mode 100644
index 00000000000..a9c08ac021a
--- /dev/null
+++ b/app/serializers/project_mirror_entity.rb
@@ -0,0 +1,11 @@
+class ProjectMirrorEntity < Grape::Entity
+  expose :id
+
+  expose :remote_mirrors_attributes do |project|
+    next [] unless project.remote_mirrors.present?
+
+    project.remote_mirrors.map do |remote|
+      remote.as_json(only: %i[id url enabled])
+    end
+  end
+end
diff --git a/app/serializers/project_note_entity.rb b/app/serializers/project_note_entity.rb
new file mode 100644
index 00000000000..e541bfbee8d
--- /dev/null
+++ b/app/serializers/project_note_entity.rb
@@ -0,0 +1,25 @@
+class ProjectNoteEntity < NoteEntity
+  expose :human_access do |note|
+    note.project.team.human_max_access(note.author_id)
+  end
+
+  expose :toggle_award_path, if: -> (note, _) { note.emoji_awardable? } do |note|
+    toggle_award_emoji_project_note_path(note.project, note.id)
+  end
+
+  expose :path do |note|
+    project_note_path(note.project, note)
+  end
+
+  expose :resolve_path, if: -> (note, _) { note.part_of_discussion? && note.resolvable? } do |note|
+    resolve_project_merge_request_discussion_path(note.project, note.noteable, note.discussion_id)
+  end
+
+  expose :resolve_with_issue_path, if: -> (note, _) { note.part_of_discussion? && note.resolvable? } do |note|
+    new_project_issue_path(note.project, merge_request_to_resolve_discussions_of: note.noteable.iid, discussion_to_resolve: note.discussion_id)
+  end
+
+  expose :delete_attachment_path, if: -> (note, _) { note.attachment? } do |note|
+    delete_attachment_project_note_path(note.project, note)
+  end
+end
diff --git a/app/serializers/project_note_serializer.rb b/app/serializers/project_note_serializer.rb
new file mode 100644
index 00000000000..763ad0bdb3f
--- /dev/null
+++ b/app/serializers/project_note_serializer.rb
@@ -0,0 +1,3 @@
+class ProjectNoteSerializer < BaseSerializer
+  entity ProjectNoteEntity
+end
diff --git a/app/serializers/stage_entity.rb b/app/serializers/stage_entity.rb
index 4523b15152e..2516df70ad9 100644
--- a/app/serializers/stage_entity.rb
+++ b/app/serializers/stage_entity.rb
@@ -11,6 +11,12 @@ class StageEntity < Grape::Entity
     if: -> (_, opts) { opts[:grouped] },
     with: JobGroupEntity
 
+  expose :latest_statuses,
+    if: -> (_, opts) { opts[:details] },
+    with: JobEntity do |stage|
+    latest_statuses
+  end
+
   expose :detailed_status, as: :status, with: StatusEntity
 
   expose :path do |stage|
@@ -35,4 +41,14 @@ class StageEntity < Grape::Entity
   def detailed_status
     stage.detailed_status(request.current_user)
   end
+
+  def grouped_statuses
+    @grouped_statuses ||= stage.statuses.latest_ordered.group_by(&:status)
+  end
+
+  def latest_statuses
+    HasStatus::ORDERED_STATUSES.map do |ordered_status|
+      grouped_statuses.fetch(ordered_status, [])
+    end.flatten
+  end
 end
diff --git a/app/serializers/stage_serializer.rb b/app/serializers/stage_serializer.rb
new file mode 100644
index 00000000000..091d8e91e43
--- /dev/null
+++ b/app/serializers/stage_serializer.rb
@@ -0,0 +1,7 @@
+class StageSerializer < BaseSerializer
+  include WithPagination
+
+  InvalidResourceError = Class.new(StandardError)
+
+  entity StageEntity
+end
diff --git a/app/serializers/status_entity.rb b/app/serializers/status_entity.rb
index 3e40ecf1c1c..47df7f9dcf9 100644
--- a/app/serializers/status_entity.rb
+++ b/app/serializers/status_entity.rb
@@ -2,15 +2,12 @@ class StatusEntity < Grape::Entity
   include RequestAwareEntity
 
   expose :icon, :text, :label, :group
-
+  expose :status_tooltip, as: :tooltip
   expose :has_details?, as: :has_details
   expose :details_path
 
   expose :favicon do |status|
-    dir = 'ci_favicons'
-    dir = File.join(dir, 'dev') if Rails.env.development?
-
-    ActionController::Base.helpers.image_path(File.join(dir, "#{status.favicon}.ico"))
+    Gitlab::Favicon.status_overlay(status.favicon)
   end
 
   expose :action, if: -> (status, _) { status.has_action? } do
diff --git a/app/services/application_settings/update_service.rb b/app/services/application_settings/update_service.rb
index 61589a07250..7bcb8f49d0d 100644
--- a/app/services/application_settings/update_service.rb
+++ b/app/services/application_settings/update_service.rb
@@ -1,7 +1,36 @@
 module ApplicationSettings
   class UpdateService < ApplicationSettings::BaseService
+    attr_reader :params, :application_setting
+
     def execute
+      update_terms(@params.delete(:terms))
+
+      if params.key?(:performance_bar_allowed_group_path)
+        params[:performance_bar_allowed_group_id] = performance_bar_allowed_group_id
+      end
+
       @application_setting.update(@params)
     end
+
+    private
+
+    def update_terms(terms)
+      return unless terms.present?
+
+      # Avoid creating a new terms record if the text is exactly the same.
+      terms = terms.strip
+      return if terms == @application_setting.terms
+
+      ApplicationSetting::Term.create(terms: terms)
+      @application_setting.reset_memoized_terms
+    end
+
+    def performance_bar_allowed_group_id
+      performance_bar_enabled = !params.key?(:performance_bar_enabled) || params.delete(:performance_bar_enabled)
+      group_full_path = params.delete(:performance_bar_allowed_group_path)
+      return nil unless Gitlab::Utils.to_boolean(performance_bar_enabled)
+
+      Group.find_by_full_path(group_full_path)&.id if group_full_path.present?
+    end
   end
 end
diff --git a/app/services/applications/create_service.rb b/app/services/applications/create_service.rb
index 35d45f25a71..94a434b95dd 100644
--- a/app/services/applications/create_service.rb
+++ b/app/services/applications/create_service.rb
@@ -2,11 +2,10 @@ module Applications
   class CreateService
     def initialize(current_user, params)
       @current_user = current_user
-      @params = params
-      @ip_address = @params.delete(:ip_address)
+      @params = params.except(:ip_address)
     end
 
-    def execute(request = nil)
+    def execute(request)
       Doorkeeper::Application.create(@params)
     end
   end
diff --git a/app/services/auth/container_registry_authentication_service.rb b/app/services/auth/container_registry_authentication_service.rb
index 2b77f6be72a..f28cddb2af3 100644
--- a/app/services/auth/container_registry_authentication_service.rb
+++ b/app/services/auth/container_registry_authentication_service.rb
@@ -109,7 +109,7 @@ module Auth
 
       case requested_action
       when 'pull'
-        build_can_pull?(requested_project) || user_can_pull?(requested_project)
+        build_can_pull?(requested_project) || user_can_pull?(requested_project) || deploy_token_can_pull?(requested_project)
       when 'push'
         build_can_push?(requested_project) || user_can_push?(requested_project)
       when '*'
@@ -123,22 +123,34 @@ module Auth
       Gitlab.config.registry
     end
 
+    def can_user?(ability, project)
+      user = current_user.is_a?(User) ? current_user : nil
+      can?(user, ability, project)
+    end
+
     def build_can_pull?(requested_project)
       # Build can:
       # 1. pull from its own project (for ex. a build)
       # 2. read images from dependent projects if creator of build is a team member
       has_authentication_ability?(:build_read_container_image) &&
-        (requested_project == project || can?(current_user, :build_read_container_image, requested_project))
+        (requested_project == project || can_user?(:build_read_container_image, requested_project))
     end
 
     def user_can_admin?(requested_project)
       has_authentication_ability?(:admin_container_image) &&
-        can?(current_user, :admin_container_image, requested_project)
+        can_user?(:admin_container_image, requested_project)
     end
 
     def user_can_pull?(requested_project)
       has_authentication_ability?(:read_container_image) &&
-        can?(current_user, :read_container_image, requested_project)
+        can_user?(:read_container_image, requested_project)
+    end
+
+    def deploy_token_can_pull?(requested_project)
+      has_authentication_ability?(:read_container_image) &&
+        current_user.is_a?(DeployToken) &&
+        current_user.has_access_to?(requested_project) &&
+        current_user.read_registry?
     end
 
     ##
@@ -154,7 +166,7 @@ module Auth
 
     def user_can_push?(requested_project)
       has_authentication_ability?(:create_container_image) &&
-        can?(current_user, :create_container_image, requested_project)
+        can_user?(:create_container_image, requested_project)
     end
 
     def error(code, status:, message: '')
diff --git a/app/services/base_count_service.rb b/app/services/base_count_service.rb
index f2844854112..975e288301c 100644
--- a/app/services/base_count_service.rb
+++ b/app/services/base_count_service.rb
@@ -17,7 +17,7 @@ class BaseCountService
   end
 
   def refresh_cache(&block)
-    Rails.cache.write(cache_key, block_given? ? yield : uncached_count, raw: raw?)
+    update_cache_for_key(cache_key, &block)
   end
 
   def uncached_count
@@ -41,4 +41,8 @@ class BaseCountService
   def cache_options
     { raw: raw? }
   end
+
+  def update_cache_for_key(key, &block)
+    Rails.cache.write(key, block_given? ? yield : uncached_count, raw: raw?)
+  end
 end
diff --git a/app/services/base_service.rb b/app/services/base_service.rb
index 6883ba36c71..3519b7c5e7d 100644
--- a/app/services/base_service.rb
+++ b/app/services/base_service.rb
@@ -3,7 +3,7 @@ class BaseService
 
   attr_accessor :project, :current_user, :params
 
-  def initialize(project, user, params = {})
+  def initialize(project, user = nil, params = {})
     @project, @current_user, @params = project, user, params.dup
   end
 
diff --git a/app/services/boards/issues/create_service.rb b/app/services/boards/issues/create_service.rb
index 7c4a79f555e..3025029755c 100644
--- a/app/services/boards/issues/create_service.rb
+++ b/app/services/boards/issues/create_service.rb
@@ -10,11 +10,15 @@ module Boards
       end
 
       def execute
-        create_issue(params.merge(label_ids: [list.label_id]))
+        create_issue(params.merge(issue_params))
       end
 
       private
 
+      def issue_params
+        { label_ids: [list.label_id] }
+      end
+
       def board
         @board ||= parent.boards.find(params.delete(:board_id))
       end
diff --git a/app/services/boards/issues/list_service.rb b/app/services/boards/issues/list_service.rb
index ecd74b74f8a..b1dbe73cdf7 100644
--- a/app/services/boards/issues/list_service.rb
+++ b/app/services/boards/issues/list_service.rb
@@ -3,13 +3,18 @@ module Boards
     class ListService < Boards::BaseService
       def execute
         issues = IssuesFinder.new(current_user, filter_params).execute
-        issues = without_board_labels(issues) unless movable_list? || closed_list?
-        issues = with_list_label(issues) if movable_list?
+        issues = filter(issues)
         issues.order_by_position_and_priority
       end
 
       private
 
+      def filter(issues)
+        issues = without_board_labels(issues) unless list&.movable? || list&.closed?
+        issues = with_list_label(issues) if list&.label?
+        issues
+      end
+
       def board
         @board ||= parent.boards.find(params[:board_id])
       end
@@ -20,21 +25,10 @@ module Boards
         @list = board.lists.find(params[:id]) if params.key?(:id)
       end
 
-      def movable_list?
-        return @movable_list if defined?(@movable_list)
-
-        @movable_list = list.present? && list.movable?
-      end
-
-      def closed_list?
-        return @closed_list if defined?(@closed_list)
-
-        @closed_list = list.present? && list.closed?
-      end
-
       def filter_params
         set_parent
         set_state
+        set_scope
 
         params
       end
@@ -51,6 +45,10 @@ module Boards
         params[:state] = list && list.closed? ? 'closed' : 'opened'
       end
 
+      def set_scope
+        params[:include_subgroups] = board.group_board?
+      end
+
       def board_label_ids
         @board_label_ids ||= board.lists.movable.pluck(:label_id)
       end
@@ -58,7 +56,7 @@ module Boards
       def without_board_labels(issues)
         return issues unless board_label_ids.any?
 
-        issues.where.not(issues_label_links.limit(1).arel.exists)
+        issues.where.not('EXISTS (?)', issues_label_links.limit(1))
       end
 
       def issues_label_links
@@ -66,10 +64,8 @@ module Boards
       end
 
       def with_list_label(issues)
-        issues.where(
-          LabelLink.where("label_links.target_type = 'Issue' AND label_links.target_id = issues.id")
-                   .where("label_links.label_id = ?", list.label_id).limit(1).arel.exists
-        )
+        issues.where('EXISTS (?)', LabelLink.where("label_links.target_type = 'Issue' AND label_links.target_id = issues.id")
+                                            .where("label_links.label_id = ?", list.label_id).limit(1))
       end
     end
   end
diff --git a/app/services/boards/issues/move_service.rb b/app/services/boards/issues/move_service.rb
index 15fed7d17c1..ee3112c7571 100644
--- a/app/services/boards/issues/move_service.rb
+++ b/app/services/boards/issues/move_service.rb
@@ -3,7 +3,7 @@ module Boards
     class MoveService < Boards::BaseService
       def execute(issue)
         return false unless can?(current_user, :update_issue, issue)
-        return false if issue_params.empty?
+        return false if issue_params(issue).empty?
 
         update(issue)
       end
@@ -28,10 +28,10 @@ module Boards
       end
 
       def update(issue)
-        ::Issues::UpdateService.new(issue.project, current_user, issue_params).execute(issue)
+        ::Issues::UpdateService.new(issue.project, current_user, issue_params(issue)).execute(issue)
       end
 
-      def issue_params
+      def issue_params(issue)
         attrs = {}
 
         if move_between_lists?
@@ -42,7 +42,10 @@ module Boards
           )
         end
 
-        attrs[:move_between_ids] = move_between_ids if move_between_ids
+        if move_between_ids
+          attrs[:move_between_ids] = move_between_ids
+          attrs[:board_group_id] =  board.group&.id
+        end
 
         attrs
       end
diff --git a/app/services/boards/list_service.rb b/app/services/boards/list_service.rb
index 6d0dd0a9f99..9269b8d2620 100644
--- a/app/services/boards/list_service.rb
+++ b/app/services/boards/list_service.rb
@@ -2,11 +2,15 @@ module Boards
   class ListService < Boards::BaseService
     def execute
       create_board! if parent.boards.empty?
-      parent.boards
+      boards
     end
 
     private
 
+    def boards
+      parent.boards
+    end
+
     def create_board!
       Boards::CreateService.new(parent, current_user).execute
     end
diff --git a/app/services/boards/lists/create_service.rb b/app/services/boards/lists/create_service.rb
index bebc90c7a8d..6fd9885d4f3 100644
--- a/app/services/boards/lists/create_service.rb
+++ b/app/services/boards/lists/create_service.rb
@@ -1,22 +1,38 @@
 module Boards
   module Lists
     class CreateService < Boards::BaseService
+      include Gitlab::Utils::StrongMemoize
+
       def execute(board)
         List.transaction do
-          label    = available_labels_for(board).find(params[:label_id])
+          target = target(board)
           position = next_position(board)
-          create_list(board, label, position)
+          create_list(board, type, target, position)
         end
       end
 
       private
 
+      def type
+        :label
+      end
+
+      def target(board)
+        strong_memoize(:target) do
+          available_labels_for(board).find(params[:label_id])
+        end
+      end
+
       def available_labels_for(board)
+        options = { include_ancestor_groups: true }
+
         if board.group_board?
-          parent.labels
+          options.merge!(group_id: parent.id, only_group_labels: true)
         else
-          LabelsFinder.new(current_user, project_id: parent.id).execute
+          options[:project_id] = parent.id
         end
+
+        LabelsFinder.new(current_user, options).execute
       end
 
       def next_position(board)
@@ -24,8 +40,8 @@ module Boards
         max_position.nil? ? 0 : max_position.succ
       end
 
-      def create_list(board, label, position)
-        board.lists.create(label: label, list_type: :label, position: position)
+      def create_list(board, type, target, position)
+        board.lists.create(type => target, list_type: type, position: position)
       end
     end
   end
diff --git a/app/services/check_gcp_project_billing_service.rb b/app/services/check_gcp_project_billing_service.rb
deleted file mode 100644
index ea82b61b279..00000000000
--- a/app/services/check_gcp_project_billing_service.rb
+++ /dev/null
@@ -1,11 +0,0 @@
-class CheckGcpProjectBillingService
-  def execute(token)
-    client = GoogleApi::CloudPlatform::Client.new(token, nil)
-    client.projects_list.select do |project|
-      begin
-        client.projects_get_billing_info(project.project_id).billing_enabled
-      rescue
-      end
-    end
-  end
-end
diff --git a/app/services/ci/create_pipeline_service.rb b/app/services/ci/create_pipeline_service.rb
index 3b3d9239086..17a53b6a8fd 100644
--- a/app/services/ci/create_pipeline_service.rb
+++ b/app/services/ci/create_pipeline_service.rb
@@ -7,6 +7,7 @@ module Ci
                 Gitlab::Ci::Pipeline::Chain::Validate::Repository,
                 Gitlab::Ci::Pipeline::Chain::Validate::Config,
                 Gitlab::Ci::Pipeline::Chain::Skip,
+                Gitlab::Ci::Pipeline::Chain::Populate,
                 Gitlab::Ci::Pipeline::Chain::Create].freeze
 
     def execute(source, ignore_skip_ci: false, save_on_errors: true, trigger_request: nil, schedule: nil, &block)
@@ -23,6 +24,7 @@ module Ci
         ignore_skip_ci: ignore_skip_ci,
         save_incompleted: save_on_errors,
         seeds_block: block,
+        variables_attributes: params[:variables_attributes],
         project: project,
         current_user: current_user)
 
@@ -65,7 +67,7 @@ module Ci
       project.pipelines
         .where(ref: pipeline.ref)
         .where.not(id: pipeline.id)
-        .where.not(sha: project.repository.sha_from_ref(pipeline.ref))
+        .where.not(sha: project.commit(pipeline.ref).try(:id))
         .created_or_pending
     end
 
diff --git a/app/services/ci/create_pipeline_stages_service.rb b/app/services/ci/create_pipeline_stages_service.rb
deleted file mode 100644
index f2c175adee6..00000000000
--- a/app/services/ci/create_pipeline_stages_service.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-module Ci
-  class CreatePipelineStagesService < BaseService
-    def execute(pipeline)
-      pipeline.stage_seeds.each do |seed|
-        seed.user = current_user
-
-        seed.create! do |build|
-          ##
-          # Create the environment before the build starts. This sets its slug and
-          # makes it available as an environment variable
-          #
-          if build.has_environment?
-            environment_name = build.expanded_environment_name
-            project.environments.find_or_create_by(name: environment_name)
-          end
-        end
-      end
-    end
-  end
-end
diff --git a/app/services/ci/ensure_stage_service.rb b/app/services/ci/ensure_stage_service.rb
index 87f19b333de..b8c7be2d350 100644
--- a/app/services/ci/ensure_stage_service.rb
+++ b/app/services/ci/ensure_stage_service.rb
@@ -42,6 +42,7 @@ module Ci
 
     def create_stage
       Ci::Stage.create!(name: @build.stage,
+                        position: @build.stage_idx,
                         pipeline: @build.pipeline,
                         project: @build.project)
     end
diff --git a/app/services/ci/pipeline_trigger_service.rb b/app/services/ci/pipeline_trigger_service.rb
index a9813d774bb..85533a1cbdb 100644
--- a/app/services/ci/pipeline_trigger_service.rb
+++ b/app/services/ci/pipeline_trigger_service.rb
@@ -16,8 +16,8 @@ module Ci
 
       pipeline = Ci::CreatePipelineService.new(project, trigger.owner, ref: params[:ref])
         .execute(:trigger, ignore_skip_ci: true) do |pipeline|
-          pipeline.trigger_requests.create!(trigger: trigger)
-          create_pipeline_variables!(pipeline)
+          pipeline.trigger_requests.build(trigger: trigger)
+          pipeline.variables.build(variables)
         end
 
       if pipeline.persisted?
@@ -33,14 +33,10 @@ module Ci
       end
     end
 
-    def create_pipeline_variables!(pipeline)
-      return unless params[:variables]
-
-      variables = params[:variables].map do |key, value|
+    def variables
+      params[:variables].to_h.map do |key, value|
         { key: key, value: value }
       end
-
-      pipeline.variables.create!(variables)
     end
   end
 end
diff --git a/app/services/ci/register_job_service.rb b/app/services/ci/register_job_service.rb
index e09b445636f..9bdbb2c0d99 100644
--- a/app/services/ci/register_job_service.rb
+++ b/app/services/ci/register_job_service.rb
@@ -4,6 +4,9 @@ module Ci
   class RegisterJobService
     attr_reader :runner
 
+    JOB_QUEUE_DURATION_SECONDS_BUCKETS = [1, 3, 10, 30].freeze
+    JOBS_RUNNING_FOR_PROJECT_MAX_BUCKET = 5.freeze
+
     Result = Struct.new(:build, :valid?)
 
     def initialize(runner)
@@ -14,20 +17,20 @@ module Ci
       builds =
         if runner.shared?
           builds_for_shared_runner
+        elsif runner.group_type?
+          builds_for_group_runner
         else
-          builds_for_specific_runner
+          builds_for_project_runner
         end
 
       valid = true
 
-      if Feature.enabled?('ci_job_request_with_tags_matcher')
-        # pick builds that does not have other tags than runner's one
-        builds = builds.matches_tag_ids(runner.tags.ids)
+      # pick builds that does not have other tags than runner's one
+      builds = builds.matches_tag_ids(runner.tags.ids)
 
-        # pick builds that have at least one tag
-        unless runner.run_untagged?
-          builds = builds.with_any_tags
-        end
+      # pick builds that have at least one tag
+      unless runner.run_untagged?
+        builds = builds.with_any_tags
       end
 
       builds.find do |build|
@@ -41,7 +44,7 @@ module Ci
             build.run!
             register_success(build)
 
-            return Result.new(build, true)
+            return Result.new(build, true) # rubocop:disable Cop/AvoidReturnFromBlocks
           rescue Ci::Build::MissingDependenciesError
             build.drop!(:missing_dependency_failure)
           end
@@ -72,15 +75,27 @@ module Ci
         .joins('LEFT JOIN project_features ON ci_builds.project_id = project_features.project_id')
         .where('project_features.builds_access_level IS NULL or project_features.builds_access_level > 0').
 
-        # Implement fair scheduling
-        # this returns builds that are ordered by number of running builds
-        # we prefer projects that don't use shared runners at all
-        joins("LEFT JOIN (#{running_builds_for_shared_runners.to_sql}) AS project_builds ON ci_builds.project_id=project_builds.project_id")
+      # Implement fair scheduling
+      # this returns builds that are ordered by number of running builds
+      # we prefer projects that don't use shared runners at all
+      joins("LEFT JOIN (#{running_builds_for_shared_runners.to_sql}) AS project_builds ON ci_builds.project_id=project_builds.project_id")
         .order('COALESCE(project_builds.running_builds, 0) ASC', 'ci_builds.id ASC')
     end
 
-    def builds_for_specific_runner
-      new_builds.where(project: runner.projects.without_deleted.with_builds_enabled).order('created_at ASC')
+    def builds_for_project_runner
+      new_builds.where(project: runner.projects.without_deleted.with_builds_enabled).order('id ASC')
+    end
+
+    def builds_for_group_runner
+      # Workaround for weird Rails bug, that makes `runner.groups.to_sql` to return `runner_id = NULL`
+      groups = ::Group.joins(:runner_namespaces).merge(runner.runner_namespaces)
+
+      hierarchy_groups = Gitlab::GroupHierarchy.new(groups).base_and_descendants
+      projects = Project.where(namespace_id: hierarchy_groups)
+        .with_group_runners_enabled
+        .with_builds_enabled
+        .without_deleted
+      new_builds.where(project: projects).order('id ASC')
     end
 
     def running_builds_for_shared_runners
@@ -94,20 +109,28 @@ module Ci
       builds
     end
 
-    def shared_runner_build_limits_feature_enabled?
-      ENV['DISABLE_SHARED_RUNNER_BUILD_MINUTES_LIMIT'].to_s != 'true'
-    end
-
     def register_failure
       failed_attempt_counter.increment
       attempt_counter.increment
     end
 
     def register_success(job)
-      job_queue_duration_seconds.observe({ shared_runner: @runner.shared? }, Time.now - job.created_at)
+      labels = { shared_runner: runner.shared?,
+                 jobs_running_for_project: jobs_running_for_project(job) }
+
+      job_queue_duration_seconds.observe(labels, Time.now - job.queued_at) unless job.queued_at.nil?
       attempt_counter.increment
     end
 
+    def jobs_running_for_project(job)
+      return '+Inf' unless runner.shared?
+
+      # excluding currently started job
+      running_jobs_count = job.project.builds.running.where(runner: Ci::Runner.shared)
+                              .limit(JOBS_RUNNING_FOR_PROJECT_MAX_BUCKET + 1).count - 1
+      running_jobs_count < JOBS_RUNNING_FOR_PROJECT_MAX_BUCKET ? running_jobs_count : "#{JOBS_RUNNING_FOR_PROJECT_MAX_BUCKET}+"
+    end
+
     def failed_attempt_counter
       @failed_attempt_counter ||= Gitlab::Metrics.counter(:job_register_attempts_failed_total, "Counts the times a runner tries to register a job")
     end
@@ -117,7 +140,7 @@ module Ci
     end
 
     def job_queue_duration_seconds
-      @job_queue_duration_seconds ||= Gitlab::Metrics.histogram(:job_queue_duration_seconds, 'Request handling execution time')
+      @job_queue_duration_seconds ||= Gitlab::Metrics.histogram(:job_queue_duration_seconds, 'Request handling execution time', {}, JOB_QUEUE_DURATION_SECONDS_BUCKETS)
     end
   end
 end
diff --git a/app/services/ci/update_build_queue_service.rb b/app/services/ci/update_build_queue_service.rb
index 152c8ae5006..41b1c144c3e 100644
--- a/app/services/ci/update_build_queue_service.rb
+++ b/app/services/ci/update_build_queue_service.rb
@@ -1,18 +1,14 @@
 module Ci
   class UpdateBuildQueueService
     def execute(build)
-      build.project.runners.each do |runner|
-        if runner.can_pick?(build)
-          runner.tick_runner_queue
-        end
-      end
+      tick_for(build, build.project.all_runners)
+    end
 
-      return unless build.project.shared_runners_enabled?
+    private
 
-      Ci::Runner.shared.each do |runner|
-        if runner.can_pick?(build)
-          runner.tick_runner_queue
-        end
+    def tick_for(build, runners)
+      runners.each do |runner|
+        runner.pick_build!(build)
       end
     end
   end
diff --git a/app/services/clusters/applications/install_service.rb b/app/services/clusters/applications/install_service.rb
index 4c25a09814b..7ec3a9baa6e 100644
--- a/app/services/clusters/applications/install_service.rb
+++ b/app/services/clusters/applications/install_service.rb
@@ -12,8 +12,8 @@ module Clusters
             ClusterWaitForAppInstallationWorker::INTERVAL, app.name, app.id)
         rescue Kubeclient::HttpError => ke
           app.make_errored!("Kubernetes error: #{ke.message}")
-        rescue StandardError
-          app.make_errored!("Can't start installation process")
+        rescue StandardError => e
+          app.make_errored!("Can't start installation process. #{e.message}")
         end
       end
     end
diff --git a/app/services/clusters/applications/schedule_installation_service.rb b/app/services/clusters/applications/schedule_installation_service.rb
index eb8caa68ef7..9c5461e85e1 100644
--- a/app/services/clusters/applications/schedule_installation_service.rb
+++ b/app/services/clusters/applications/schedule_installation_service.rb
@@ -1,21 +1,10 @@
 module Clusters
   module Applications
     class ScheduleInstallationService < ::BaseService
-      def execute
-        application_class.find_or_create_by!(cluster: cluster).try do |application|
-          application.make_scheduled!
-          ClusterInstallAppWorker.perform_async(application.name, application.id)
-        end
-      end
-
-      private
-
-      def application_class
-        params[:application_class]
-      end
+      def execute(application)
+        application.make_scheduled!
 
-      def cluster
-        params[:cluster]
+        ClusterInstallAppWorker.perform_async(application.name, application.id)
       end
     end
   end
diff --git a/app/services/clusters/gcp/finalize_creation_service.rb b/app/services/clusters/gcp/finalize_creation_service.rb
index 15ab2d54404..84944e95542 100644
--- a/app/services/clusters/gcp/finalize_creation_service.rb
+++ b/app/services/clusters/gcp/finalize_creation_service.rb
@@ -13,7 +13,7 @@ module Clusters
       rescue Google::Apis::ServerError, Google::Apis::ClientError, Google::Apis::AuthorizationError => e
         provider.make_errored!("Failed to request to CloudPlatform; #{e.message}")
       rescue ActiveRecord::RecordInvalid => e
-        provider.make_errored!("Failed to configure GKE Cluster: #{e.message}")
+        provider.make_errored!("Failed to configure Google Kubernetes Engine Cluster: #{e.message}")
       end
 
       private
diff --git a/app/services/clusters/gcp/verify_provision_status_service.rb b/app/services/clusters/gcp/verify_provision_status_service.rb
index f994aacd086..7cc4324677e 100644
--- a/app/services/clusters/gcp/verify_provision_status_service.rb
+++ b/app/services/clusters/gcp/verify_provision_status_service.rb
@@ -17,7 +17,7 @@ module Clusters
           when 'DONE'
             finalize_creation
           else
-            return provider.make_errored!("Unexpected operation status; #{operation.status} #{operation.status_message}")
+            provider.make_errored!("Unexpected operation status; #{operation.status} #{operation.status_message}")
           end
         end
       end
diff --git a/app/services/commits/create_service.rb b/app/services/commits/create_service.rb
index f96f2931508..4d0578becbe 100644
--- a/app/services/commits/create_service.rb
+++ b/app/services/commits/create_service.rb
@@ -17,7 +17,7 @@ module Commits
       new_commit = create_commit!
 
       success(result: new_commit)
-    rescue ValidationError, ChangeError, Gitlab::Git::Index::IndexError, Gitlab::Git::CommitError, Gitlab::Git::HooksService::PreReceiveError => ex
+    rescue ValidationError, ChangeError, Gitlab::Git::Index::IndexError, Gitlab::Git::CommitError, Gitlab::Git::PreReceiveError => ex
       error(ex.message)
     end
 
diff --git a/app/services/concerns/exclusive_lease_guard.rb b/app/services/concerns/exclusive_lease_guard.rb
new file mode 100644
index 00000000000..f45436370c1
--- /dev/null
+++ b/app/services/concerns/exclusive_lease_guard.rb
@@ -0,0 +1,52 @@
+#
+# Concern that helps with getting an exclusive lease for running a block
+# of code.
+#
+# `#try_obtain_lease` takes a block which will be run if it was able to
+# obtain  the lease. Implement `#lease_timeout` to configure the timeout
+# for the exclusive lease. Optionally override `#lease_key` to set the
+# lease key, it defaults to the class name with underscores.
+#
+module ExclusiveLeaseGuard
+  extend ActiveSupport::Concern
+
+  def try_obtain_lease
+    lease = exclusive_lease.try_obtain
+
+    unless lease
+      log_error('Cannot obtain an exclusive lease. There must be another instance already in execution.')
+      return
+    end
+
+    begin
+      yield lease
+    ensure
+      release_lease(lease)
+    end
+  end
+
+  def exclusive_lease
+    @lease ||= Gitlab::ExclusiveLease.new(lease_key, timeout: lease_timeout)
+  end
+
+  def lease_key
+    @lease_key ||= self.class.name.underscore
+  end
+
+  def lease_timeout
+    raise NotImplementedError,
+          "#{self.class.name} does not implement #{__method__}"
+  end
+
+  def release_lease(uuid)
+    Gitlab::ExclusiveLease.cancel(lease_key, uuid)
+  end
+
+  def renew_lease!
+    exclusive_lease.renew
+  end
+
+  def log_error(message, extra_args = {})
+    Rails.logger.error(message)
+  end
+end
diff --git a/app/services/concerns/issues/resolve_discussions.rb b/app/services/concerns/issues/resolve_discussions.rb
index 26eb274f4d5..455f761ca9b 100644
--- a/app/services/concerns/issues/resolve_discussions.rb
+++ b/app/services/concerns/issues/resolve_discussions.rb
@@ -14,7 +14,6 @@ module Issues
     def merge_request_to_resolve_discussions_of
       strong_memoize(:merge_request_to_resolve_discussions_of) do
         MergeRequestsFinder.new(current_user, project_id: project.id)
-          .execute
           .find_by(iid: merge_request_to_resolve_discussions_of_iid)
       end
     end
diff --git a/app/services/concerns/users/participable_service.rb b/app/services/concerns/users/participable_service.rb
new file mode 100644
index 00000000000..bf60b96938d
--- /dev/null
+++ b/app/services/concerns/users/participable_service.rb
@@ -0,0 +1,41 @@
+module Users
+  module ParticipableService
+    extend ActiveSupport::Concern
+
+    included do
+      attr_reader :noteable
+    end
+
+    def noteable_owner
+      return [] unless noteable && noteable.author.present?
+
+      [as_hash(noteable.author)]
+    end
+
+    def participants_in_noteable
+      return [] unless noteable
+
+      users = noteable.participants(current_user)
+      sorted(users)
+    end
+
+    def sorted(users)
+      users.uniq.to_a.compact.sort_by(&:username).map do |user|
+        as_hash(user)
+      end
+    end
+
+    def groups
+      current_user.authorized_groups.sort_by(&:path).map do |group|
+        count = group.users.count
+        { username: group.full_path, name: group.full_name, count: count, avatar_url: group.avatar_url }
+      end
+    end
+
+    private
+
+    def as_hash(user)
+      { username: user.username, name: user.name, avatar_url: user.avatar_url }
+    end
+  end
+end
diff --git a/app/services/create_branch_service.rb b/app/services/create_branch_service.rb
index 0ba6a0ac6b5..9b1a4d960e2 100644
--- a/app/services/create_branch_service.rb
+++ b/app/services/create_branch_service.rb
@@ -14,7 +14,7 @@ class CreateBranchService < BaseService
     else
       error('Invalid reference name')
     end
-  rescue Gitlab::Git::HooksService::PreReceiveError => ex
+  rescue Gitlab::Git::PreReceiveError => ex
     error(ex.message)
   end
 
diff --git a/app/services/create_deployment_service.rb b/app/services/create_deployment_service.rb
index 88dfb7a4a90..7e5a77fb056 100644
--- a/app/services/create_deployment_service.rb
+++ b/app/services/create_deployment_service.rb
@@ -19,8 +19,8 @@ class CreateDeploymentService
 
       environment.fire_state_event(action)
 
-      return unless environment.save
-      return if environment.stopped?
+      break unless environment.save
+      break if environment.stopped?
 
       deploy.tap(&:update_merge_request_metrics!)
     end
diff --git a/app/services/delete_branch_service.rb b/app/services/delete_branch_service.rb
index 1f059c31944..e1499dcee64 100644
--- a/app/services/delete_branch_service.rb
+++ b/app/services/delete_branch_service.rb
@@ -16,7 +16,7 @@ class DeleteBranchService < BaseService
     else
       error('Failed to remove branch')
     end
-  rescue Gitlab::Git::HooksService::PreReceiveError => ex
+  rescue Gitlab::Git::PreReceiveError => ex
     error(ex.message)
   end
 
diff --git a/app/services/deploy_tokens/create_service.rb b/app/services/deploy_tokens/create_service.rb
new file mode 100644
index 00000000000..52f545947af
--- /dev/null
+++ b/app/services/deploy_tokens/create_service.rb
@@ -0,0 +1,7 @@
+module DeployTokens
+  class CreateService < BaseService
+    def execute
+      @project.deploy_tokens.create(params)
+    end
+  end
+end
diff --git a/app/services/events/render_service.rb b/app/services/events/render_service.rb
index 0b62d8aedf1..bb72d7685dd 100644
--- a/app/services/events/render_service.rb
+++ b/app/services/events/render_service.rb
@@ -1,15 +1,17 @@
 module Events
   class RenderService < BaseRenderer
     def execute(events, atom_request: false)
-      events.map(&:note).compact.group_by(&:project).each do |project, notes|
-        render_notes(notes, project, atom_request)
-      end
+      notes = events.map(&:note).compact
+
+      render_notes(notes, atom_request)
     end
 
     private
 
-    def render_notes(notes, project, atom_request)
-      Notes::RenderService.new(current_user).execute(notes, project, render_options(atom_request))
+    def render_notes(notes, atom_request)
+      Notes::RenderService
+        .new(current_user)
+        .execute(notes, render_options(atom_request))
     end
 
     def render_options(atom_request)
diff --git a/app/services/git_push_service.rb b/app/services/git_push_service.rb
index c037141fcde..f3bfc53dcd3 100644
--- a/app/services/git_push_service.rb
+++ b/app/services/git_push_service.rb
@@ -55,6 +55,7 @@ class GitPushService < BaseService
     execute_related_hooks
     perform_housekeeping
 
+    update_remote_mirrors
     update_caches
 
     update_signatures
@@ -119,6 +120,13 @@ class GitPushService < BaseService
 
   protected
 
+  def update_remote_mirrors
+    return unless @project.has_remote_mirror?
+
+    @project.mark_stuck_remote_mirrors_as_failed!
+    @project.update_remote_mirrors
+  end
+
   def execute_related_hooks
     # Update merge requests that may be affected by this push. A new branch
     # could cause the last commit of a merge request to change.
diff --git a/app/services/import_export_clean_up_service.rb b/app/services/import_export_clean_up_service.rb
index 6442406d77e..74088b970c9 100644
--- a/app/services/import_export_clean_up_service.rb
+++ b/app/services/import_export_clean_up_service.rb
@@ -10,7 +10,7 @@ class ImportExportCleanUpService
 
   def execute
     Gitlab::Metrics.measure(:import_export_clean_up) do
-      return unless File.directory?(path)
+      next unless File.directory?(path)
 
       clean_up_export_files
     end
diff --git a/app/services/issuable/destroy_service.rb b/app/services/issuable/destroy_service.rb
index 7197a426a72..0b1a33518c6 100644
--- a/app/services/issuable/destroy_service.rb
+++ b/app/services/issuable/destroy_service.rb
@@ -4,6 +4,7 @@ module Issuable
       TodoService.new.destroy_target(issuable) do |issuable|
         if issuable.destroy
           issuable.update_project_counter_caches
+          issuable.assignees.each(&:invalidate_cache_counts)
         end
       end
     end
diff --git a/app/services/issuable_base_service.rb b/app/services/issuable_base_service.rb
index 02fb48108fb..683f64e82ad 100644
--- a/app/services/issuable_base_service.rb
+++ b/app/services/issuable_base_service.rb
@@ -51,9 +51,10 @@ class IssuableBaseService < BaseService
     return unless milestone_id
 
     params[:milestone_id] = '' if milestone_id == IssuableFinder::NONE
+    group_ids = project.group&.self_and_ancestors&.pluck(:id)
 
     milestone =
-      Milestone.for_projects_and_groups([project.id], [project.group&.id]).find_by_id(milestone_id)
+      Milestone.for_projects_and_groups([project.id], group_ids).find_by_id(milestone_id)
 
     params[:milestone_id] = '' unless milestone
   end
@@ -106,7 +107,7 @@ class IssuableBaseService < BaseService
   end
 
   def available_labels
-    @available_labels ||= LabelsFinder.new(current_user, project_id: @project.id).execute
+    @available_labels ||= LabelsFinder.new(current_user, project_id: @project.id, include_ancestor_groups: true).execute
   end
 
   def handle_quick_actions_on_create(issuable)
@@ -182,7 +183,10 @@ class IssuableBaseService < BaseService
     old_associations = associations_before_update(issuable)
 
     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)
+    if labels_changing?(issuable.label_ids, label_ids)
+      params[:label_ids] = label_ids
+      issuable.touch
+    end
 
     if issuable.changed? || params.present?
       issuable.assign_attributes(params.merge(updated_by: current_user))
diff --git a/app/services/issues/close_service.rb b/app/services/issues/close_service.rb
index 0c5cf2c62ad..4a99367c575 100644
--- a/app/services/issues/close_service.rb
+++ b/app/services/issues/close_service.rb
@@ -23,9 +23,10 @@ module Issues
       end
 
       if project.issues_enabled? && issue.close
+        issue.update(closed_by: current_user)
         event_service.close_issue(issue, current_user)
         create_note(issue, commit) if system_note
-        notification_service.close_issue(issue, current_user) if notifications
+        notification_service.async.close_issue(issue, current_user) if notifications
         todo_service.close_issue(issue, current_user)
         execute_hooks(issue, 'close')
         invalidate_cache_counts(issue, users: issue.assignees)
diff --git a/app/services/issues/move_service.rb b/app/services/issues/move_service.rb
index 7140890d201..78e79344c99 100644
--- a/app/services/issues/move_service.rb
+++ b/app/services/issues/move_service.rb
@@ -139,7 +139,7 @@ module Issues
     end
 
     def notify_participants
-      notification_service.issue_moved(@old_issue, @new_issue, @current_user)
+      notification_service.async.issue_moved(@old_issue, @new_issue, @current_user)
     end
   end
 end
diff --git a/app/services/issues/reopen_service.rb b/app/services/issues/reopen_service.rb
index 62b4b4b6a1e..02224f3357a 100644
--- a/app/services/issues/reopen_service.rb
+++ b/app/services/issues/reopen_service.rb
@@ -6,7 +6,7 @@ module Issues
       if issue.reopen
         event_service.reopen_issue(issue, current_user)
         create_note(issue, 'reopened')
-        notification_service.reopen_issue(issue, current_user)
+        notification_service.async.reopen_issue(issue, current_user)
         execute_hooks(issue, 'reopen')
         invalidate_cache_counts(issue, users: issue.assignees)
         issue.update_project_counter_caches
diff --git a/app/services/issues/update_service.rb b/app/services/issues/update_service.rb
index d7aa7e2347e..1000e1842b6 100644
--- a/app/services/issues/update_service.rb
+++ b/app/services/issues/update_service.rb
@@ -30,7 +30,7 @@ module Issues
 
       if issue.assignees != old_assignees
         create_assignee_note(issue, old_assignees)
-        notification_service.reassigned_issue(issue, current_user, old_assignees)
+        notification_service.async.reassigned_issue(issue, current_user, old_assignees)
         todo_service.reassigned_issue(issue, current_user, old_assignees)
       end
 
@@ -41,13 +41,13 @@ module Issues
       added_labels = issue.labels - old_labels
 
       if added_labels.present?
-        notification_service.relabeled_issue(issue, added_labels, current_user)
+        notification_service.async.relabeled_issue(issue, added_labels, current_user)
       end
 
       added_mentions = issue.mentioned_users - old_mentioned_users
 
       if added_mentions.present?
-        notification_service.new_mentions_in_issue(issue, added_mentions, current_user)
+        notification_service.async.new_mentions_in_issue(issue, added_mentions, current_user)
       end
     end
 
@@ -55,9 +55,10 @@ module Issues
       return unless params[:move_between_ids]
 
       after_id, before_id = params.delete(:move_between_ids)
+      board_group_id = params.delete(:board_group_id)
 
-      issue_before = get_issue_if_allowed(issue.project, before_id) if before_id
-      issue_after = get_issue_if_allowed(issue.project, after_id) if after_id
+      issue_before = get_issue_if_allowed(before_id, board_group_id)
+      issue_after = get_issue_if_allowed(after_id, board_group_id)
 
       issue.move_between(issue_before, issue_after)
     end
@@ -84,8 +85,16 @@ module Issues
 
     private
 
-    def get_issue_if_allowed(project, id)
-      issue = project.issues.find(id)
+    def get_issue_if_allowed(id, board_group_id = nil)
+      return unless id
+
+      issue =
+        if board_group_id
+          IssuesFinder.new(current_user, group_id: board_group_id, include_subgroups: true).find_by(id: id)
+        else
+          project.issues.find(id)
+        end
+
       issue if can?(current_user, :update_issue, issue)
     end
 
diff --git a/app/services/keys/base_service.rb b/app/services/keys/base_service.rb
index f78791932a7..df8e82f5f60 100644
--- a/app/services/keys/base_service.rb
+++ b/app/services/keys/base_service.rb
@@ -2,7 +2,7 @@ module Keys
   class BaseService
     attr_accessor :user, :params
 
-    def initialize(user, params)
+    def initialize(user, params = {})
       @user, @params = user, params
       @ip_address = @params.delete(:ip_address)
     end
diff --git a/app/services/keys/destroy_service.rb b/app/services/keys/destroy_service.rb
new file mode 100644
index 00000000000..785cfa3a1d8
--- /dev/null
+++ b/app/services/keys/destroy_service.rb
@@ -0,0 +1,12 @@
+module Keys
+  class DestroyService < ::Keys::BaseService
+    def execute(key)
+      key.destroy if destroy_possible?(key)
+    end
+
+    # overriden in EE::Keys::DestroyService
+    def destroy_possible?(key)
+      true
+    end
+  end
+end
diff --git a/app/services/labels/transfer_service.rb b/app/services/labels/transfer_service.rb
index 775efed48eb..9b7486cf53b 100644
--- a/app/services/labels/transfer_service.rb
+++ b/app/services/labels/transfer_service.rb
@@ -64,9 +64,14 @@ module Labels
     end
 
     def update_label_links(labels, old_label_id:, new_label_id:)
-      LabelLink.joins(:label)
-        .merge(labels)
-        .where(label_id: old_label_id)
+      # use 'labels' relation to get label_link ids only of issues/MRs
+      # in the project being transferred.
+      # IDs are fetched in a separate query because MySQL doesn't
+      # allow referring of 'label_links' table in UPDATE query:
+      # https://gitlab.com/gitlab-org/gitlab-ce/-/jobs/62435068
+      link_ids = labels.pluck('label_links.id')
+
+      LabelLink.where(id: link_ids, label_id: old_label_id)
         .update_all(label_id: new_label_id)
     end
 
diff --git a/app/services/lfs/unlock_file_service.rb b/app/services/lfs/unlock_file_service.rb
index 6c93dc69bb0..7e3edf21d54 100644
--- a/app/services/lfs/unlock_file_service.rb
+++ b/app/services/lfs/unlock_file_service.rb
@@ -2,14 +2,14 @@ module Lfs
   class UnlockFileService < BaseService
     def execute
       unless can?(current_user, :push_code, project)
-        raise Gitlab::GitAccess::UnauthorizedError, 'You have no permissions'
+        raise Gitlab::GitAccess::UnauthorizedError, _('You have no permissions')
       end
 
       unlock_file
     rescue Gitlab::GitAccess::UnauthorizedError => ex
       error(ex.message, 403)
     rescue ActiveRecord::RecordNotFound
-      error('Lock not found', 404)
+      error(_('Lock not found'), 404)
     rescue => ex
       error(ex.message, 500)
     end
@@ -24,9 +24,9 @@ module Lfs
 
         success(lock: lock, http_status: :ok)
       elsif forced
-        error('You must have master access to force delete a lock', 403)
+        error(_('You must have maintainer access to force delete a lock'), 403)
       else
-        error("#{lock.path} is locked by GitLab User #{lock.user_id}", 403)
+        error(_("%{lock_path} is locked by GitLab User %{lock_user_id}") % { lock_path: lock.path, lock_user_id: lock.user_id }, 403)
       end
     end
 
diff --git a/app/services/merge_requests/base_service.rb b/app/services/merge_requests/base_service.rb
index 231ab76fde4..4c420b38258 100644
--- a/app/services/merge_requests/base_service.rb
+++ b/app/services/merge_requests/base_service.rb
@@ -38,8 +38,8 @@ module MergeRequests
     def filter_params(merge_request)
       super
 
-      unless merge_request.can_allow_maintainer_to_push?(current_user)
-        params.delete(:allow_maintainer_to_push)
+      unless merge_request.can_allow_collaboration?(current_user)
+        params.delete(:allow_collaboration)
       end
     end
 
diff --git a/app/services/merge_requests/close_service.rb b/app/services/merge_requests/close_service.rb
index f727ec002e7..db701c1145d 100644
--- a/app/services/merge_requests/close_service.rb
+++ b/app/services/merge_requests/close_service.rb
@@ -10,7 +10,7 @@ module MergeRequests
       if merge_request.close
         create_event(merge_request)
         create_note(merge_request)
-        notification_service.close_mr(merge_request, current_user)
+        notification_service.async.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, users: merge_request.assignees)
diff --git a/app/services/merge_requests/create_from_issue_service.rb b/app/services/merge_requests/create_from_issue_service.rb
index cf687b71d16..3407b312700 100644
--- a/app/services/merge_requests/create_from_issue_service.rb
+++ b/app/services/merge_requests/create_from_issue_service.rb
@@ -41,7 +41,9 @@ module MergeRequests
     end
 
     def ref
-      @ref || project.default_branch || 'master'
+      return @ref if project.repository.branch_exists?(@ref)
+
+      project.default_branch || 'master'
     end
 
     def merge_request
diff --git a/app/services/merge_requests/create_service.rb b/app/services/merge_requests/create_service.rb
index c57a2445341..fe1ac70781e 100644
--- a/app/services/merge_requests/create_service.rb
+++ b/app/services/merge_requests/create_service.rb
@@ -71,8 +71,8 @@ module MergeRequests
       params.delete(:source_project_id)
       params.delete(:target_project_id)
 
-      unless can?(current_user, :read_project, @source_project) &&
-          can?(current_user, :read_project, @project)
+      unless can?(current_user, :create_merge_request_from, @source_project) &&
+          can?(current_user, :create_merge_request_in, @project)
 
         raise Gitlab::Access::AccessDeniedError
       end
diff --git a/app/services/merge_requests/delete_non_latest_diffs_service.rb b/app/services/merge_requests/delete_non_latest_diffs_service.rb
new file mode 100644
index 00000000000..40079b21189
--- /dev/null
+++ b/app/services/merge_requests/delete_non_latest_diffs_service.rb
@@ -0,0 +1,18 @@
+module MergeRequests
+  class DeleteNonLatestDiffsService
+    BATCH_SIZE = 10
+
+    def initialize(merge_request)
+      @merge_request = merge_request
+    end
+
+    def execute
+      diffs = @merge_request.non_latest_diffs.with_files
+
+      diffs.each_batch(of: BATCH_SIZE) do |relation, index|
+        ids = relation.pluck(:id).map { |id| [id] }
+        DeleteDiffFilesWorker.bulk_perform_in(index * 5.minutes, ids)
+      end
+    end
+  end
+end
diff --git a/app/services/merge_requests/ff_merge_service.rb b/app/services/merge_requests/ff_merge_service.rb
index ba6853b835a..bffc09c34f0 100644
--- a/app/services/merge_requests/ff_merge_service.rb
+++ b/app/services/merge_requests/ff_merge_service.rb
@@ -13,7 +13,7 @@ module MergeRequests
                           source,
                           merge_request.target_branch,
                           merge_request: merge_request)
-    rescue Gitlab::Git::HooksService::PreReceiveError => e
+    rescue Gitlab::Git::PreReceiveError => e
       raise MergeError, e.message
     rescue StandardError => e
       raise MergeError, "Something went wrong during merge: #{e.message}"
diff --git a/app/services/merge_requests/merge_request_diff_cache_service.rb b/app/services/merge_requests/merge_request_diff_cache_service.rb
deleted file mode 100644
index 10aa9ae609c..00000000000
--- a/app/services/merge_requests/merge_request_diff_cache_service.rb
+++ /dev/null
@@ -1,17 +0,0 @@
-module MergeRequests
-  class MergeRequestDiffCacheService
-    def execute(merge_request, new_diff)
-      # Executing the iteration we cache all the highlighted diff information
-      merge_request.diffs.diff_files.to_a
-
-      # Remove cache for all diffs on this MR. Do not use the association on the
-      # model, as that will interfere with other actions happening when
-      # reloading the diff.
-      MergeRequestDiff.where(merge_request: merge_request).each do |merge_request_diff|
-        next if merge_request_diff == new_diff
-
-        merge_request_diff.diffs.clear_cache!
-      end
-    end
-  end
-end
diff --git a/app/services/merge_requests/merge_service.rb b/app/services/merge_requests/merge_service.rb
index cedfcb50e09..3d587f97906 100644
--- a/app/services/merge_requests/merge_service.rb
+++ b/app/services/merge_requests/merge_service.rb
@@ -34,6 +34,19 @@ module MergeRequests
       handle_merge_error(log_message: e.message, save_message_on_model: true)
     end
 
+    def source
+      return merge_request.diff_head_sha unless merge_request.squash
+
+      squash_result = ::MergeRequests::SquashService.new(project, current_user, params).execute(merge_request)
+
+      case squash_result[:status]
+      when :success
+        squash_result[:squash_sha]
+      when :error
+        raise ::MergeRequests::MergeService::MergeError, squash_result[:message]
+      end
+    end
+
     private
 
     def error_check!
@@ -50,21 +63,30 @@ module MergeRequests
     end
 
     def commit
-      message = params[:commit_message] || merge_request.merge_commit_message
-
       log_info("Git merge started on JID #{merge_jid}")
-      commit_id = repository.merge(current_user, source, merge_request, message)
-      log_info("Git merge finished on JID #{merge_jid} commit #{commit_id}")
+      commit_id = try_merge
 
-      raise MergeError, 'Conflicts detected during merge' unless commit_id
+      if commit_id
+        log_info("Git merge finished on JID #{merge_jid} commit #{commit_id}")
+      else
+        raise MergeError, 'Conflicts detected during merge'
+      end
+
+      merge_request.update!(merge_commit_sha: commit_id)
+    end
+
+    def try_merge
+      message = params[:commit_message] || merge_request.merge_commit_message
 
-      merge_request.update(merge_commit_sha: commit_id)
-    rescue Gitlab::Git::HooksService::PreReceiveError => e
-      raise MergeError, e.message
-    rescue StandardError => e
-      raise MergeError, "Something went wrong during merge: #{e.message}"
+      repository.merge(current_user, source, merge_request, message)
+    rescue Gitlab::Git::PreReceiveError => e
+      handle_merge_error(log_message: e.message)
+      raise MergeError, 'Something went wrong during merge pre-receive hook'
+    rescue => e
+      handle_merge_error(log_message: e.message)
+      raise MergeError, 'Something went wrong during merge'
     ensure
-      merge_request.update(in_progress_merge_commit_sha: nil)
+      merge_request.update!(in_progress_merge_commit_sha: nil)
     end
 
     def after_merge
@@ -107,9 +129,5 @@ module MergeRequests
     def merge_request_info
       merge_request.to_reference(full: true)
     end
-
-    def source
-      @source ||= @merge_request.diff_head_sha
-    end
   end
 end
diff --git a/app/services/merge_requests/merge_when_pipeline_succeeds_service.rb b/app/services/merge_requests/merge_when_pipeline_succeeds_service.rb
index 850deb0ac7a..9a4e6eb2e88 100644
--- a/app/services/merge_requests/merge_when_pipeline_succeeds_service.rb
+++ b/app/services/merge_requests/merge_when_pipeline_succeeds_service.rb
@@ -24,11 +24,7 @@ module MergeRequests
 
       pipeline_merge_requests(pipeline) do |merge_request|
         next unless merge_request.merge_when_pipeline_succeeds?
-
-        unless merge_request.mergeable?
-          todo_service.merge_request_became_unmergeable(merge_request)
-          next
-        end
+        next unless merge_request.mergeable?
 
         merge_request.merge_async(merge_request.merge_user_id, merge_request.merge_params)
       end
diff --git a/app/services/merge_requests/post_merge_service.rb b/app/services/merge_requests/post_merge_service.rb
index c78e78afcd1..5b160ffba67 100644
--- a/app/services/merge_requests/post_merge_service.rb
+++ b/app/services/merge_requests/post_merge_service.rb
@@ -15,6 +15,7 @@ module MergeRequests
       execute_hooks(merge_request, 'merge')
       invalidate_cache_counts(merge_request, users: merge_request.assignees)
       merge_request.update_project_counter_caches
+      delete_non_latest_diffs(merge_request)
     end
 
     private
@@ -31,6 +32,10 @@ module MergeRequests
       end
     end
 
+    def delete_non_latest_diffs(merge_request)
+      DeleteNonLatestDiffsService.new(merge_request).execute
+    end
+
     def create_merge_event(merge_request, current_user)
       EventCreateService.new.merge_mr(merge_request, current_user)
     end
diff --git a/app/services/merge_requests/refresh_service.rb b/app/services/merge_requests/refresh_service.rb
index 18c40ce8992..0127d781686 100644
--- a/app/services/merge_requests/refresh_service.rb
+++ b/app/services/merge_requests/refresh_service.rb
@@ -3,6 +3,12 @@ module MergeRequests
     def execute(oldrev, newrev, ref)
       return true unless Gitlab::Git.branch_ref?(ref)
 
+      do_execute(oldrev, newrev, ref)
+    end
+
+    private
+
+    def do_execute(oldrev, newrev, ref)
       @oldrev, @newrev = oldrev, newrev
       @branch_name = Gitlab::Git.ref_name(ref)
 
@@ -21,15 +27,13 @@ module MergeRequests
         comment_mr_branch_presence_changed
       end
 
-      comment_mr_with_commits
+      notify_about_push
       mark_mr_as_wip_from_commits
       execute_mr_web_hooks
 
       true
     end
 
-    private
-
     def close_upon_missing_source_branch_ref
       # MergeRequest#reload_diff ignores not opened MRs. This means it won't
       # create an `empty` diff for `closed` MRs without a source branch, keeping
@@ -141,8 +145,8 @@ module MergeRequests
       end
     end
 
-    # Add comment about pushing new commits to merge requests
-    def comment_mr_with_commits
+    # Add comment about pushing new commits to merge requests and send nofitication emails
+    def notify_about_push
       return unless @commits.present?
 
       merge_requests_for_source_branch.each do |merge_request|
@@ -155,6 +159,8 @@ module MergeRequests
         SystemNoteService.add_commits(merge_request, merge_request.project,
                                       @current_user, new_commits,
                                       existing_commits, @oldrev)
+
+        notification_service.push_to_merge_request(merge_request, @current_user, new_commits: new_commits, existing_commits: existing_commits)
       end
     end
 
diff --git a/app/services/merge_requests/reload_diffs_service.rb b/app/services/merge_requests/reload_diffs_service.rb
new file mode 100644
index 00000000000..2ec7b403903
--- /dev/null
+++ b/app/services/merge_requests/reload_diffs_service.rb
@@ -0,0 +1,43 @@
+module MergeRequests
+  class ReloadDiffsService
+    def initialize(merge_request, current_user)
+      @merge_request = merge_request
+      @current_user = current_user
+    end
+
+    def execute
+      old_diff_refs = merge_request.diff_refs
+      new_diff = merge_request.create_merge_request_diff
+
+      clear_cache(new_diff)
+      update_diff_discussion_positions(old_diff_refs)
+    end
+
+    private
+
+    attr_reader :merge_request, :current_user
+
+    def update_diff_discussion_positions(old_diff_refs)
+      new_diff_refs = merge_request.diff_refs
+
+      merge_request.update_diff_discussion_positions(old_diff_refs: old_diff_refs,
+                                                     new_diff_refs: new_diff_refs,
+                                                     current_user: current_user)
+    end
+
+    def clear_cache(new_diff)
+      # Executing the iteration we cache highlighted diffs for each diff file of
+      # MergeRequestDiff.
+      new_diff.diffs_collection.diff_files.to_a
+
+      # Remove cache for all diffs on this MR. Do not use the association on the
+      # model, as that will interfere with other actions happening when
+      # reloading the diff.
+      MergeRequestDiff.where(merge_request: merge_request).each do |merge_request_diff|
+        next if merge_request_diff == new_diff
+
+        merge_request_diff.diffs_collection.clear_cache!
+      end
+    end
+  end
+end
diff --git a/app/services/merge_requests/reopen_service.rb b/app/services/merge_requests/reopen_service.rb
index 120677a7149..8f1c95ac1b7 100644
--- a/app/services/merge_requests/reopen_service.rb
+++ b/app/services/merge_requests/reopen_service.rb
@@ -6,7 +6,7 @@ module MergeRequests
       if merge_request.reopen
         create_event(merge_request)
         create_note(merge_request, 'reopened')
-        notification_service.reopen_mr(merge_request, current_user)
+        notification_service.async.reopen_mr(merge_request, current_user)
         execute_hooks(merge_request, 'reopen')
         merge_request.reload_diff(current_user)
         merge_request.mark_as_unchecked
diff --git a/app/services/merge_requests/resolved_discussion_notification_service.rb b/app/services/merge_requests/resolved_discussion_notification_service.rb
index 3a09350c847..66a0cbc81d4 100644
--- a/app/services/merge_requests/resolved_discussion_notification_service.rb
+++ b/app/services/merge_requests/resolved_discussion_notification_service.rb
@@ -4,7 +4,7 @@ module MergeRequests
       return unless merge_request.discussions_resolved?
 
       SystemNoteService.resolve_all_discussions(merge_request, project, current_user)
-      notification_service.resolve_all_discussions(merge_request, current_user)
+      notification_service.async.resolve_all_discussions(merge_request, current_user)
     end
   end
 end
diff --git a/app/services/merge_requests/squash_service.rb b/app/services/merge_requests/squash_service.rb
new file mode 100644
index 00000000000..a40fb2786bd
--- /dev/null
+++ b/app/services/merge_requests/squash_service.rb
@@ -0,0 +1,28 @@
+module MergeRequests
+  class SquashService < MergeRequests::WorkingCopyBaseService
+    def execute(merge_request)
+      @merge_request = merge_request
+      @repository = target_project.repository
+
+      squash || error('Failed to squash. Should be done manually.')
+    end
+
+    def squash
+      if merge_request.commits_count < 2
+        return success(squash_sha: merge_request.diff_head_sha)
+      end
+
+      if merge_request.squash_in_progress?
+        return error('Squash task canceled: another squash is already in progress.')
+      end
+
+      squash_sha = repository.squash(current_user, merge_request)
+
+      success(squash_sha: squash_sha)
+    rescue => e
+      log_error("Failed to squash merge request #{merge_request.to_reference(full: true)}:")
+      log_error(e.message)
+      false
+    end
+  end
+end
diff --git a/app/services/merge_requests/update_service.rb b/app/services/merge_requests/update_service.rb
index 8a40ad88182..7350725e223 100644
--- a/app/services/merge_requests/update_service.rb
+++ b/app/services/merge_requests/update_service.rb
@@ -21,6 +21,7 @@ module MergeRequests
       update(merge_request)
     end
 
+    # rubocop:disable Metrics/AbcSize
     def handle_changes(merge_request, options)
       old_associations = options.fetch(:old_associations, {})
       old_labels = old_associations.fetch(:labels, [])
@@ -42,8 +43,11 @@ module MergeRequests
       end
 
       if merge_request.previous_changes.include?('assignee_id')
+        old_assignee_id = merge_request.previous_changes['assignee_id'].first
+        old_assignee = User.find(old_assignee_id) if old_assignee_id
+
         create_assignee_note(merge_request)
-        notification_service.reassigned_merge_request(merge_request, current_user)
+        notification_service.async.reassigned_merge_request(merge_request, current_user, old_assignee)
         todo_service.reassigned_merge_request(merge_request, current_user)
       end
 
@@ -54,7 +58,7 @@ module MergeRequests
 
       added_labels = merge_request.labels - old_labels
       if added_labels.present?
-        notification_service.relabeled_merge_request(
+        notification_service.async.relabeled_merge_request(
           merge_request,
           added_labels,
           current_user
@@ -63,13 +67,14 @@ module MergeRequests
 
       added_mentions = merge_request.mentioned_users - old_mentioned_users
       if added_mentions.present?
-        notification_service.new_mentions_in_merge_request(
+        notification_service.async.new_mentions_in_merge_request(
           merge_request,
           added_mentions,
           current_user
         )
       end
     end
+    # rubocop:enable Metrics/AbcSize
 
     def merge_from_quick_action(merge_request)
       last_diff_sha = params.delete(:merge)
diff --git a/app/services/milestones/base_service.rb b/app/services/milestones/base_service.rb
index 4963601ea8b..cce0863d611 100644
--- a/app/services/milestones/base_service.rb
+++ b/app/services/milestones/base_service.rb
@@ -5,6 +5,7 @@ module Milestones
 
     def initialize(parent, user, params = {})
       @parent, @current_user, @params = parent, user, params.dup
+      super
     end
   end
 end
diff --git a/app/services/notes/post_process_service.rb b/app/services/notes/post_process_service.rb
index ad3dcc5010b..199b8028dbc 100644
--- a/app/services/notes/post_process_service.rb
+++ b/app/services/notes/post_process_service.rb
@@ -11,7 +11,7 @@ module Notes
       unless @note.system?
         EventCreateService.new.leave_note(@note, @note.author)
 
-        return unless @note.for_project_noteable?
+        return if @note.for_personal_snippet?
 
         @note.create_cross_references!
         execute_note_hooks
@@ -23,9 +23,13 @@ module Notes
     end
 
     def execute_note_hooks
+      return unless @note.project
+
       note_data = hook_data
-      @note.project.execute_hooks(note_data, :note_hooks)
-      @note.project.execute_services(note_data, :note_hooks)
+      hooks_scope = @note.confidential? ? :confidential_note_hooks : :note_hooks
+
+      @note.project.execute_hooks(note_data, hooks_scope)
+      @note.project.execute_services(note_data, hooks_scope)
     end
   end
 end
diff --git a/app/services/notes/render_service.rb b/app/services/notes/render_service.rb
index a77e98c2b07..efc9d6da2aa 100644
--- a/app/services/notes/render_service.rb
+++ b/app/services/notes/render_service.rb
@@ -3,19 +3,18 @@ module Notes
     # Renders a collection of Note instances.
     #
     # notes - The notes to render.
-    # project - The project to use for redacting.
-    # user - The user viewing the notes.
-
+    #
     # Possible options:
+    #
     # requested_path - The request path.
     # project_wiki - The project's wiki.
     # ref - The current Git reference.
     # only_path - flag to turn relative paths into absolute ones.
     # xhtml - flag to save the html in XHTML
-    def execute(notes, project, **opts)
-      renderer = Banzai::ObjectRenderer.new(project, current_user, **opts)
-
-      renderer.render(notes, :note)
+    def execute(notes, options = {})
+      Banzai::ObjectRenderer
+        .new(user: current_user, redaction_context: options)
+        .render(notes, :note)
     end
   end
 end
diff --git a/app/services/notes/resolve_service.rb b/app/services/notes/resolve_service.rb
new file mode 100644
index 00000000000..0db8ee809a9
--- /dev/null
+++ b/app/services/notes/resolve_service.rb
@@ -0,0 +1,9 @@
+module Notes
+  class ResolveService < ::BaseService
+    def execute(note)
+      note.resolve!(current_user)
+
+      ::MergeRequests::ResolvedDiscussionNotificationService.new(project, current_user).execute(note.noteable)
+    end
+  end
+end
diff --git a/app/services/notification_recipient_service.rb b/app/services/notification_recipient_service.rb
index e4be953e810..4fa38665abc 100644
--- a/app/services/notification_recipient_service.rb
+++ b/app/services/notification_recipient_service.rb
@@ -18,6 +18,10 @@ module NotificationRecipientService
     Builder::NewNote.new(*a).notification_recipients
   end
 
+  def self.build_merge_request_unmergeable_recipients(*a)
+    Builder::MergeRequestUnmergeable.new(*a).notification_recipients
+  end
+
   module Builder
     class Base
       def initialize(*)
@@ -45,6 +49,10 @@ module NotificationRecipientService
         target.project
       end
 
+      def group
+        project&.group || target.try(:group)
+      end
+
       def recipients
         @recipients ||= []
       end
@@ -54,8 +62,7 @@ module NotificationRecipientService
           users = users.includes(:notification_settings)
         end
 
-        users = Array(users)
-        users.compact!
+        users = Array(users).compact
         recipients.concat(users.map { |u| make_recipient(u, type, reason) })
       end
 
@@ -68,6 +75,7 @@ module NotificationRecipientService
           user, type,
           reason: reason,
           project: project,
+          group: group,
           custom_action: custom_action,
           target: target,
           acting_user: acting_user
@@ -108,11 +116,11 @@ module NotificationRecipientService
 
         # Users with a notification setting on group or project
         user_ids += user_ids_notifiable_on(project, :custom)
-        user_ids += user_ids_notifiable_on(project.group, :custom)
+        user_ids += user_ids_notifiable_on(group, :custom)
 
         # Users with global level custom
         user_ids_with_project_level_global = user_ids_notifiable_on(project, :global)
-        user_ids_with_group_level_global   = user_ids_notifiable_on(project.group, :global)
+        user_ids_with_group_level_global   = user_ids_notifiable_on(group, :global)
 
         global_users_ids = user_ids_with_project_level_global.concat(user_ids_with_group_level_global)
         user_ids += user_ids_with_global_level_custom(global_users_ids, custom_action)
@@ -124,6 +132,10 @@ module NotificationRecipientService
         add_recipients(project_watchers, :watch, nil)
       end
 
+      def add_group_watchers
+        add_recipients(group_watchers, :watch, nil)
+      end
+
       # Get project users with WATCH notification level
       def project_watchers
         project_members_ids = user_ids_notifiable_on(project)
@@ -139,6 +151,14 @@ module NotificationRecipientService
         user_scope.where(id: user_ids_with_project_setting.concat(user_ids_with_group_setting).uniq)
       end
 
+      def group_watchers
+        user_ids_with_group_global = user_ids_notifiable_on(group, :global)
+        user_ids = user_ids_with_global_level_watch(user_ids_with_group_global)
+        user_ids_with_group_setting = select_group_members_ids(group, [], user_ids_with_group_global, user_ids)
+
+        user_scope.where(id: user_ids_with_group_setting)
+      end
+
       def add_subscribed_users
         return unless target.respond_to? :subscribers
 
@@ -204,10 +224,11 @@ module NotificationRecipientService
       attr_reader :action
       attr_reader :previous_assignee
       attr_reader :skip_current_user
-      def initialize(target, current_user, action:, previous_assignee: nil, skip_current_user: true)
+      def initialize(target, current_user, action:, custom_action: nil, previous_assignee: nil, skip_current_user: true)
         @target = target
         @current_user = current_user
         @action = action
+        @custom_action = custom_action
         @previous_assignee = previous_assignee
         @skip_current_user = skip_current_user
       end
@@ -237,7 +258,13 @@ module NotificationRecipientService
           add_mentions(current_user, target: target)
 
           # Add the assigned users, if any
-          assignees = custom_action == :new_issue ? target.assignees : target.assignee
+          assignees = case custom_action
+                      when :new_issue
+                        target.assignees
+                      else
+                        target.assignee
+                      end
+
           # We use the `:participating` notification level in order to match existing legacy behavior as captured
           # in existing specs (notification_service_spec.rb ~ line 507)
           add_recipients(assignees, :participating, NotificationReason::ASSIGNED) if assignees
@@ -275,6 +302,14 @@ module NotificationRecipientService
         note.project
       end
 
+      def group
+        if note.for_project_noteable?
+          project.group
+        else
+          target.try(:group)
+        end
+      end
+
       def build!
         # Add all users participating in the thread (author, assignee, comment authors)
         add_participants(note.author)
@@ -283,11 +318,11 @@ module NotificationRecipientService
         if note.for_project_noteable?
           # Merge project watchers
           add_project_watchers
-
-          # Merge project with custom notification
-          add_custom_notifications
+        else
+          add_group_watchers
         end
 
+        add_custom_notifications
         add_subscribed_users
       end
 
@@ -299,5 +334,26 @@ module NotificationRecipientService
         note.author
       end
     end
+
+    class MergeRequestUnmergeable < Base
+      attr_reader :target
+      def initialize(merge_request)
+        @target = merge_request
+      end
+
+      def build!
+        target.merge_participants.each do |user|
+          add_recipients(user, :participating, nil)
+        end
+      end
+
+      def custom_action
+        :unmergeable_merge_request
+      end
+
+      def acting_user
+        nil
+      end
+    end
   end
 end
diff --git a/app/services/notification_service.rb b/app/services/notification_service.rb
index d7d2cde1004..636cfbf5b45 100644
--- a/app/services/notification_service.rb
+++ b/app/services/notification_service.rb
@@ -7,7 +7,32 @@
 # Ex.
 #   NotificationService.new.new_issue(issue, current_user)
 #
+# When calculating the recipients of a notification is expensive (for instance,
+# in the new issue case), `#async` will make that calculation happen in Sidekiq
+# instead:
+#
+#   NotificationService.new.async.new_issue(issue, current_user)
+#
 class NotificationService
+  class Async
+    attr_reader :parent
+    delegate :respond_to_missing, to: :parent
+
+    def initialize(parent)
+      @parent = parent
+    end
+
+    def method_missing(meth, *args)
+      return super unless parent.respond_to?(meth)
+
+      MailScheduler::NotificationServiceWorker.perform_async(meth.to_s, *args)
+    end
+  end
+
+  def async
+    @async ||= Async.new(self)
+  end
+
   # Always notify user about ssh key added
   # only if ssh key is not deploy key
   #
@@ -104,6 +129,7 @@ class NotificationService
 
   # When create a merge request we should send an email to:
   #
+  #  * mr author
   #  * mr assignee if their notification level is not Disabled
   #  * project team members with notification level higher then Participating
   #  * watchers of the mr's labels
@@ -113,6 +139,25 @@ class NotificationService
     new_resource_email(merge_request, :new_merge_request_email)
   end
 
+  def push_to_merge_request(merge_request, current_user, new_commits: [], existing_commits: [])
+    new_commits = new_commits.map { |c| { short_id: c.short_id, title: c.title } }
+    existing_commits = existing_commits.map { |c| { short_id: c.short_id, title: c.title } }
+    recipients = NotificationRecipientService.build_recipients(merge_request, current_user, action: "push_to")
+
+    recipients.each do |recipient|
+      mailer.send(:push_to_merge_request_email, recipient.user.id, merge_request.id, current_user.id, recipient.reason, new_commits: new_commits, existing_commits: existing_commits).deliver_later
+    end
+  end
+
+  # When a merge request is found to be unmergeable, we should send an email to:
+  #
+  #  * mr author
+  #  * mr merge user if set
+  #
+  def merge_request_unmergeable(merge_request)
+    merge_request_unmergeable_email(merge_request)
+  end
+
   # When merge request text is updated, we should send an email to:
   #
   #  * newly mentioned project team members with notification level higher than Participating
@@ -132,8 +177,23 @@ class NotificationService
   #  * merge_request assignee if their notification level is not Disabled
   #  * users with custom level checked with "reassign merge request"
   #
-  def reassigned_merge_request(merge_request, current_user)
-    reassign_resource_email(merge_request, current_user, :reassigned_merge_request_email)
+  def reassigned_merge_request(merge_request, current_user, previous_assignee)
+    recipients = NotificationRecipientService.build_recipients(
+      merge_request,
+      current_user,
+      action: "reassign",
+      previous_assignee: previous_assignee
+    )
+
+    recipients.each do |recipient|
+      mailer.reassigned_merge_request_email(
+        recipient.user.id,
+        merge_request.id,
+        previous_assignee&.id,
+        current_user.id,
+        recipient.reason
+      ).deliver_later
+    end
   end
 
   # When we add labels to a merge request we should send an email to:
@@ -363,6 +423,20 @@ class NotificationService
     end
   end
 
+  def issue_due(issue)
+    recipients = NotificationRecipientService.build_recipients(
+      issue,
+      issue.author,
+      action: 'due',
+      custom_action: :issue_due,
+      skip_current_user: false
+    )
+
+    recipients.each do |recipient|
+      mailer.send(:issue_due_email, recipient.user.id, issue.id, recipient.reason).deliver_later
+    end
+  end
+
   protected
 
   def new_resource_email(target, method)
@@ -397,29 +471,6 @@ class NotificationService
     end
   end
 
-  def reassign_resource_email(target, current_user, method)
-    previous_assignee_id = previous_record(target, 'assignee_id')
-    previous_assignee = User.find_by(id: previous_assignee_id) if previous_assignee_id
-
-    recipients = NotificationRecipientService.build_recipients(
-      target,
-      current_user,
-      action: "reassign",
-      previous_assignee: previous_assignee
-    )
-
-    recipients.each do |recipient|
-      mailer.send(
-        method,
-        recipient.user.id,
-        target.id,
-        previous_assignee_id,
-        current_user.id,
-        recipient.reason
-      ).deliver_later
-    end
-  end
-
   def relabeled_resource_email(target, labels, current_user, method)
     recipients = labels.flat_map { |l| l.subscribers(target.project) }.uniq
     recipients = notifiable_users(
@@ -443,18 +494,18 @@ class NotificationService
     end
   end
 
-  def mailer
-    Notify
-  end
-
-  def previous_record(object, attribute)
-    return unless object && attribute
+  def merge_request_unmergeable_email(merge_request)
+    recipients = NotificationRecipientService.build_merge_request_unmergeable_recipients(merge_request)
 
-    if object.previous_changes.include?(attribute)
-      object.previous_changes[attribute].first
+    recipients.each do |recipient|
+      mailer.merge_request_unmergeable_email(recipient.user.id, merge_request.id).deliver_later
     end
   end
 
+  def mailer
+    Notify
+  end
+
   private
 
   def recipients_for_pages_domain(domain)
diff --git a/app/services/pages_service.rb b/app/services/pages_service.rb
deleted file mode 100644
index 446eeb34d3b..00000000000
--- a/app/services/pages_service.rb
+++ /dev/null
@@ -1,15 +0,0 @@
-class PagesService
-  attr_reader :data
-
-  def initialize(data)
-    @data = data
-  end
-
-  def execute
-    return unless Settings.pages.enabled
-    return unless data[:build_name] == 'pages'
-    return unless data[:build_status] == 'success'
-
-    PagesWorker.perform_async(:deploy, data[:build_id])
-  end
-end
diff --git a/app/services/projects/autocomplete_service.rb b/app/services/projects/autocomplete_service.rb
index e61ecb696d0..aa60661f7f2 100644
--- a/app/services/projects/autocomplete_service.rb
+++ b/app/services/projects/autocomplete_service.rb
@@ -11,7 +11,7 @@ module Projects
         order: { due_date: :asc, title: :asc }
       }
 
-      finder_params[:group_ids] = [@project.group.id] if @project.group
+      finder_params[:group_ids] = @project.group.self_and_ancestors_ids if @project.group
 
       MilestonesFinder.new(finder_params).execute.select([:iid, :title])
     end
@@ -21,7 +21,8 @@ module Projects
     end
 
     def labels(target = nil)
-      labels = LabelsFinder.new(current_user, project_id: project.id).execute.select([:color, :title])
+      labels = LabelsFinder.new(current_user, project_id: project.id, include_ancestor_groups: true)
+        .execute.select([:color, :title])
 
       return labels unless target&.respond_to?(:labels)
 
diff --git a/app/services/projects/base_move_relations_service.rb b/app/services/projects/base_move_relations_service.rb
new file mode 100644
index 00000000000..e8fd3ef57e5
--- /dev/null
+++ b/app/services/projects/base_move_relations_service.rb
@@ -0,0 +1,22 @@
+module Projects
+  class BaseMoveRelationsService < BaseService
+    attr_reader :source_project
+    def execute(source_project, remove_remaining_elements: true)
+      return if source_project.blank?
+
+      @source_project = source_project
+
+      true
+    end
+
+    private
+
+    def prepare_relation(relation, id_param = :id)
+      if Gitlab::Database.postgresql?
+        relation
+      else
+        relation.model.where("#{id_param}": relation.pluck(id_param))
+      end
+    end
+  end
+end
diff --git a/app/services/projects/count_service.rb b/app/services/projects/count_service.rb
index 933829b557b..4c8e000928f 100644
--- a/app/services/projects/count_service.rb
+++ b/app/services/projects/count_service.rb
@@ -22,8 +22,10 @@ module Projects
       )
     end
 
-    def cache_key
-      ['projects', 'count_service', VERSION, @project.id, cache_key_name]
+    def cache_key(key = nil)
+      cache_key = key || cache_key_name
+
+      ['projects', 'count_service', VERSION, @project.id, cache_key]
     end
 
     def self.query(project_ids)
diff --git a/app/services/projects/create_from_template_service.rb b/app/services/projects/create_from_template_service.rb
index a549cfbabea..29b133cc466 100644
--- a/app/services/projects/create_from_template_service.rb
+++ b/app/services/projects/create_from_template_service.rb
@@ -8,9 +8,10 @@ module Projects
       template_name = params.delete(:template_name)
       file = Gitlab::ProjectTemplate.find(template_name).file
 
+      override_params = params.dup
       params[:file] = file
 
-      GitlabProjectsImportService.new(current_user, params).execute
+      GitlabProjectsImportService.new(current_user, params, override_params).execute
 
     ensure
       file&.close
diff --git a/app/services/projects/create_service.rb b/app/services/projects/create_service.rb
index 7fa1387084c..a02a9052fb2 100644
--- a/app/services/projects/create_service.rb
+++ b/app/services/projects/create_service.rb
@@ -46,6 +46,9 @@ module Projects
 
       yield(@project) if block_given?
 
+      # If the block added errors, don't try to save the project
+      return @project if @project.errors.any?
+
       @project.creator = current_user
 
       if forked_from_project_id
@@ -63,6 +66,7 @@ module Projects
       message = "Unable to save #{e.record.type}: #{e.record.errors.full_messages.join(", ")} "
       fail(error: message)
     rescue => e
+      @project.errors.add(:base, e.message) if @project
       fail(error: e.message)
     end
 
@@ -90,15 +94,14 @@ module Projects
       unless @project.gitlab_project_import?
         @project.write_repository_config
         @project.create_wiki unless skip_wiki?
-        create_services_from_active_templates(@project)
-
-        @project.create_labels
       end
 
       event_service.create_project(@project, current_user)
       system_hook_service.execute_hooks_for(@project, :create)
 
       setup_authorizations
+
+      current_user.invalidate_personal_projects_count
     end
 
     # Refresh the current user's authorizations inline (so they can access the
@@ -121,21 +124,28 @@ module Projects
       Project.transaction do
         @project.create_or_update_import_data(data: import_data[:data], credentials: import_data[:credentials]) if import_data
 
-        if @project.save && !@project.import?
-          raise 'Failed to create repository' unless @project.create_repository
+        if @project.save
+          unless @project.gitlab_project_import?
+            create_services_from_active_templates(@project)
+            @project.create_labels
+          end
+
+          unless @project.import?
+            raise 'Failed to create repository' unless @project.create_repository
+          end
         end
       end
     end
 
     def fail(error:)
       message = "Unable to save project. Error: #{error}"
-      message << "Project ID: #{@project.id}" if @project && @project.id
+      log_message = message.dup
 
-      Rails.logger.error(message)
+      log_message << " Project ID: #{@project.id}" if @project&.id
+      Rails.logger.error(log_message)
 
-      if @project && @project.import?
-        @project.errors.add(:base, message)
-        @project.mark_import_as_failed(message)
+      if @project
+        @project.mark_import_as_failed(message) if @project.persisted? && @project.import?
       end
 
       @project
diff --git a/app/services/projects/destroy_service.rb b/app/services/projects/destroy_service.rb
index 4b8f955ae69..02769e72229 100644
--- a/app/services/projects/destroy_service.rb
+++ b/app/services/projects/destroy_service.rb
@@ -34,6 +34,8 @@ module Projects
       system_hook_service.execute_hooks_for(project, :destroy)
       log_info("Project \"#{project.full_path}\" was removed")
 
+      current_user.invalidate_personal_projects_count
+
       true
     rescue => error
       attempt_rollback(project, error.message)
@@ -44,6 +46,20 @@ module Projects
       raise
     end
 
+    def attempt_repositories_rollback
+      return unless @project
+
+      flush_caches(@project)
+
+      unless rollback_repository(removal_path(repo_path), repo_path)
+        raise_error('Failed to restore project repository. Please contact the administrator.')
+      end
+
+      unless rollback_repository(removal_path(wiki_path), wiki_path)
+        raise_error('Failed to restore wiki repository. Please contact the administrator.')
+      end
+    end
+
     private
 
     def repo_path
@@ -69,22 +85,39 @@ module Projects
       return true if params[:skip_repo] == true
 
       # There is a possibility project does not have repository or wiki
-      return true unless gitlab_shell.exists?(project.repository_storage_path, path + '.git')
+      return true unless repo_exists?(path)
 
       new_path = removal_path(path)
 
-      if gitlab_shell.mv_repository(project.repository_storage_path, path, new_path)
-        log_info("Repository \"#{path}\" moved to \"#{new_path}\"")
+      if mv_repository(path, new_path)
+        log_info(%Q{Repository "#{path}" moved to "#{new_path}" for project "#{project.full_path}"})
 
         project.run_after_commit do
           # self is now project
-          GitlabShellWorker.perform_in(5.minutes, :remove_repository, self.repository_storage_path, new_path)
+          GitlabShellWorker.perform_in(5.minutes, :remove_repository, self.repository_storage, new_path)
         end
       else
         false
       end
     end
 
+    def rollback_repository(old_path, new_path)
+      # There is a possibility project does not have repository or wiki
+      return true unless repo_exists?(old_path)
+
+      mv_repository(old_path, new_path)
+    end
+
+    def repo_exists?(path)
+      gitlab_shell.exists?(project.repository_storage, path + '.git')
+    end
+
+    def mv_repository(from_path, to_path)
+      return true unless gitlab_shell.exists?(project.repository_storage, from_path + '.git')
+
+      gitlab_shell.mv_repository(project.repository_storage, from_path, to_path)
+    end
+
     def attempt_rollback(project, message)
       return unless project
 
@@ -102,13 +135,24 @@ module Projects
           raise_error('Failed to remove some tags in project container registry. Please try again or contact administrator.')
         end
 
+        log_destroy_event
         trash_repositories!
 
-        project.team.truncate
+        # Rails attempts to load all related records into memory before
+        # destroying: https://github.com/rails/rails/issues/22510
+        # This ensures we delete records in batches.
+        #
+        # Exclude container repositories because its before_destroy would be
+        # called multiple times, and it doesn't destroy any database records.
+        project.destroy_dependent_associations_in_batches(exclude: [:container_repositories])
         project.destroy!
       end
     end
 
+    def log_destroy_event
+      log_info("Attempting to destroy #{project.full_path} (#{project.id})")
+    end
+
     ##
     # This method makes sure that we correctly remove registry tags
     # for legacy image repository (when repository path equals project path).
@@ -117,7 +161,7 @@ module Projects
       return true unless Gitlab.config.registry.enabled
 
       ContainerRepository.build_root_repository(project).tap do |repository|
-        return repository.has_tags? ? repository.delete_tags! : true
+        break repository.has_tags? ? repository.delete_tags! : true
       end
     end
 
diff --git a/app/services/projects/gitlab_projects_import_service.rb b/app/services/projects/gitlab_projects_import_service.rb
index a68ecb4abe1..a16268f4fd2 100644
--- a/app/services/projects/gitlab_projects_import_service.rb
+++ b/app/services/projects/gitlab_projects_import_service.rb
@@ -5,8 +5,8 @@ module Projects
   class GitlabProjectsImportService
     attr_reader :current_user, :params
 
-    def initialize(user, params)
-      @current_user, @params = user, params.dup
+    def initialize(user, import_params, override_params = nil)
+      @current_user, @params, @override_params = user, import_params.dup, override_params
     end
 
     def execute
@@ -15,8 +15,18 @@ module Projects
       file = params.delete(:file)
       FileUtils.copy_entry(file.path, import_upload_path)
 
+      @overwrite = params.delete(:overwrite)
+      data = {}
+      data[:override_params] = @override_params if @override_params
+
+      if overwrite_project?
+        data[:original_path] = params[:path]
+        params[:path] += "-#{tmp_filename}"
+      end
+
       params[:import_type] = 'gitlab_project'
       params[:import_source] = import_upload_path
+      params[:import_data] = { data: data } if data.present?
 
       ::Projects::CreateService.new(current_user, params).execute
     end
@@ -30,5 +40,17 @@ module Projects
     def tmp_filename
       SecureRandom.hex
     end
+
+    def overwrite_project?
+      @overwrite && project_with_same_full_path?
+    end
+
+    def project_with_same_full_path?
+      Project.find_by_full_path("#{current_namespace.full_path}/#{params[:path]}").present?
+    end
+
+    def current_namespace
+      @current_namespace ||= Namespace.find_by(id: params[:namespace_id])
+    end
   end
 end
diff --git a/app/services/projects/hashed_storage/migrate_repository_service.rb b/app/services/projects/hashed_storage/migrate_repository_service.rb
index 67178de75de..68c1af2396b 100644
--- a/app/services/projects/hashed_storage/migrate_repository_service.rb
+++ b/app/services/projects/hashed_storage/migrate_repository_service.rb
@@ -47,8 +47,8 @@ module Projects
       private
 
       def move_repository(from_name, to_name)
-        from_exists = gitlab_shell.exists?(project.repository_storage_path, "#{from_name}.git")
-        to_exists = gitlab_shell.exists?(project.repository_storage_path, "#{to_name}.git")
+        from_exists = gitlab_shell.exists?(project.repository_storage, "#{from_name}.git")
+        to_exists = gitlab_shell.exists?(project.repository_storage, "#{to_name}.git")
 
         # If we don't find the repository on either original or target we should log that as it could be an issue if the
         # project was not originally empty.
@@ -60,7 +60,7 @@ module Projects
           return true
         end
 
-        gitlab_shell.mv_repository(project.repository_storage_path, from_name, to_name)
+        gitlab_shell.mv_repository(project.repository_storage, from_name, to_name)
       end
 
       def rollback_folder_move
diff --git a/app/services/projects/import_export/export_service.rb b/app/services/projects/import_export/export_service.rb
index d16aa3de639..7bf0b90b491 100644
--- a/app/services/projects/import_export/export_service.rb
+++ b/app/services/projects/import_export/export_service.rb
@@ -1,22 +1,36 @@
 module Projects
   module ImportExport
     class ExportService < BaseService
-      def execute(_options = {})
+      def execute(after_export_strategy = nil, options = {})
         @shared = project.import_export_shared
-        save_all
+
+        save_all!
+        execute_after_export_action(after_export_strategy)
       end
 
       private
 
-      def save_all
-        if [version_saver, avatar_saver, project_tree_saver, uploads_saver, repo_saver, wiki_repo_saver].all?(&:save)
+      def execute_after_export_action(after_export_strategy)
+        return unless after_export_strategy
+
+        unless after_export_strategy.execute(current_user, project)
+          cleanup_and_notify_error
+        end
+      end
+
+      def save_all!
+        if save_services
           Gitlab::ImportExport::Saver.save(project: project, shared: @shared)
           notify_success
         else
-          cleanup_and_notify
+          cleanup_and_notify_error!
         end
       end
 
+      def save_services
+        [version_saver, avatar_saver, project_tree_saver, uploads_saver, repo_saver, wiki_repo_saver, lfs_saver].all?(&:save)
+      end
+
       def version_saver
         Gitlab::ImportExport::VersionSaver.new(shared: @shared)
       end
@@ -41,19 +55,26 @@ module Projects
         Gitlab::ImportExport::WikiRepoSaver.new(project: project, shared: @shared)
       end
 
-      def cleanup_and_notify
+      def lfs_saver
+        Gitlab::ImportExport::LfsSaver.new(project: project, shared: @shared)
+      end
+
+      def cleanup_and_notify_error
         Rails.logger.error("Import/Export - Project #{project.name} with ID: #{project.id} export error - #{@shared.errors.join(', ')}")
 
         FileUtils.rm_rf(@shared.export_path)
 
         notify_error
+      end
+
+      def cleanup_and_notify_error!
+        cleanup_and_notify_error
+
         raise Gitlab::ImportExport::Error.new(@shared.errors.join(', '))
       end
 
       def notify_success
         Rails.logger.info("Import/Export - Project #{project.name} with ID: #{project.id} successfully exported")
-
-        notification_service.project_exported(@project, @current_user)
       end
 
       def notify_error
diff --git a/app/services/projects/import_service.rb b/app/services/projects/import_service.rb
index a34024f4f80..1781a01cbd4 100644
--- a/app/services/projects/import_service.rb
+++ b/app/services/projects/import_service.rb
@@ -17,6 +17,8 @@ module Projects
     def execute
       add_repository_to_project
 
+      download_lfs_objects
+
       import_data
 
       success
@@ -28,12 +30,16 @@ module Projects
 
     def add_repository_to_project
       if project.external_import? && !unknown_url?
-        raise Error, 'Blocked import URL.' if Gitlab::UrlBlocker.blocked_url?(project.import_url, valid_ports: Project::VALID_IMPORT_PORTS)
+        begin
+          Gitlab::UrlBlocker.validate!(project.import_url, ports: Project::VALID_IMPORT_PORTS)
+        rescue Gitlab::UrlBlocker::BlockedUrlError => e
+          raise Error, "Blocked import URL: #{e.message}"
+        end
       end
 
       # We should skip the repository for a GitHub import or GitLab project import,
       # because these importers fetch the project repositories for us.
-      return if has_importer? && importer_class.try(:imports_repository?)
+      return if importer_imports_repository?
 
       if unknown_url?
         # In this case, we only want to import issues, not a repository.
@@ -57,7 +63,7 @@ module Projects
           project.ensure_repository
           project.repository.fetch_as_mirror(project.import_url, refmap: refmap)
         else
-          gitlab_shell.import_repository(project.repository_storage_path, project.disk_path, project.import_url)
+          gitlab_shell.import_repository(project.repository_storage, project.disk_path, project.import_url)
         end
       rescue Gitlab::Shell::Error, Gitlab::Git::RepositoryMirroring::RemoteError => e
         # Expire cache to prevent scenarios such as:
@@ -69,6 +75,27 @@ module Projects
       end
     end
 
+    def download_lfs_objects
+      # In this case, we only want to import issues
+      return if unknown_url?
+
+      # If it has its own repository importer, it has to implements its own lfs import download
+      return if importer_imports_repository?
+
+      return unless project.lfs_enabled?
+
+      oids_to_download = Projects::LfsPointers::LfsImportService.new(project).execute
+      download_service = Projects::LfsPointers::LfsDownloadService.new(project)
+
+      oids_to_download.each do |oid, link|
+        download_service.execute(oid, link)
+      end
+    rescue => e
+      # Right now, to avoid aborting the importing process, we silently fail
+      # if any exception raises.
+      Rails.logger.error("The Lfs import process failed. #{e.message}")
+    end
+
     def import_data
       return unless has_importer?
 
@@ -94,5 +121,9 @@ module Projects
     def unknown_url?
       project.import_url == Project::UNKNOWN_IMPORT_URL
     end
+
+    def importer_imports_repository?
+      has_importer? && importer_class.try(:imports_repository?)
+    end
   end
 end
diff --git a/app/services/projects/lfs_pointers/lfs_download_link_list_service.rb b/app/services/projects/lfs_pointers/lfs_download_link_list_service.rb
new file mode 100644
index 00000000000..d9fb74b090e
--- /dev/null
+++ b/app/services/projects/lfs_pointers/lfs_download_link_list_service.rb
@@ -0,0 +1,93 @@
+# This service lists the download link from a remote source based on the
+# oids provided
+module Projects
+  module LfsPointers
+    class LfsDownloadLinkListService < BaseService
+      DOWNLOAD_ACTION = 'download'.freeze
+
+      DownloadLinksError = Class.new(StandardError)
+      DownloadLinkNotFound = Class.new(StandardError)
+
+      attr_reader :remote_uri
+
+      def initialize(project, remote_uri: nil)
+        super(project)
+
+        @remote_uri = remote_uri
+      end
+
+      # This method accepts two parameters:
+      # - oids: hash of oids to query. The structure is { lfs_file_oid => lfs_file_size }
+      #
+      # Returns a hash with the structure { lfs_file_oids => download_link }
+      def execute(oids)
+        return {} unless project&.lfs_enabled? && remote_uri && oids.present?
+
+        get_download_links(oids)
+      end
+
+      private
+
+      def get_download_links(oids)
+        response = Gitlab::HTTP.post(remote_uri,
+                                     body: request_body(oids),
+                                     headers: headers)
+
+        raise DownloadLinksError, response.message unless response.success?
+
+        parse_response_links(response['objects'])
+      end
+
+      def parse_response_links(objects_response)
+        objects_response.each_with_object({}) do |entry, link_list|
+          begin
+            oid = entry['oid']
+            link = entry.dig('actions', DOWNLOAD_ACTION, 'href')
+
+            raise DownloadLinkNotFound unless link
+
+            link_list[oid] = add_credentials(link)
+          rescue DownloadLinkNotFound, URI::InvalidURIError
+            Rails.logger.error("Link for Lfs Object with oid #{oid} not found or invalid.")
+          end
+        end
+      end
+
+      def request_body(oids)
+        {
+          operation: DOWNLOAD_ACTION,
+          objects: oids.map { |oid, size| { oid: oid, size: size } }
+        }.to_json
+      end
+
+      def headers
+        {
+          'Accept' => LfsRequest::CONTENT_TYPE,
+          'Content-Type' => LfsRequest::CONTENT_TYPE
+        }.freeze
+      end
+
+      def add_credentials(link)
+        uri = URI.parse(link)
+
+        if should_add_credentials?(uri)
+          uri.user = remote_uri.user
+          uri.password = remote_uri.password
+        end
+
+        uri.to_s
+      end
+
+      # The download link can be a local url or an object storage url
+      # If the download link has the some host as the import url then
+      # we add the same credentials because we may need them
+      def should_add_credentials?(link_uri)
+        url_credentials? && link_uri.host == remote_uri.host
+      end
+
+      def url_credentials?
+        remote_uri.user.present? || remote_uri.password.present?
+      end
+    end
+  end
+end
diff --git a/app/services/projects/lfs_pointers/lfs_download_service.rb b/app/services/projects/lfs_pointers/lfs_download_service.rb
new file mode 100644
index 00000000000..6ea43561d61
--- /dev/null
+++ b/app/services/projects/lfs_pointers/lfs_download_service.rb
@@ -0,0 +1,58 @@
+# This service downloads and links lfs objects from a remote URL
+module Projects
+  module LfsPointers
+    class LfsDownloadService < BaseService
+      def execute(oid, url)
+        return unless project&.lfs_enabled? && oid.present? && url.present?
+
+        return if LfsObject.exists?(oid: oid)
+
+        sanitized_uri = Gitlab::UrlSanitizer.new(url)
+
+        with_tmp_file(oid) do |file|
+          size = download_and_save_file(file, sanitized_uri)
+          lfs_object = LfsObject.new(oid: oid, size: size, file: file)
+
+          project.all_lfs_objects << lfs_object
+        end
+      rescue StandardError => e
+        Rails.logger.error("LFS file with oid #{oid} could't be downloaded from #{sanitized_uri.sanitized_url}: #{e.message}")
+      end
+
+      private
+
+      def download_and_save_file(file, sanitized_uri)
+        IO.copy_stream(open(sanitized_uri.sanitized_url, headers(sanitized_uri)), file)
+      end
+
+      def headers(sanitized_uri)
+        {}.tap do |headers|
+          credentials = sanitized_uri.credentials
+
+          if credentials[:user].present? || credentials[:password].present?
+            # Using authentication headers in the request
+            headers[:http_basic_authentication] = [credentials[:user], credentials[:password]]
+          end
+        end
+      end
+
+      def with_tmp_file(oid)
+        create_tmp_storage_dir
+
+        File.open(File.join(tmp_storage_dir, oid), 'w') { |file| yield file }
+      end
+
+      def create_tmp_storage_dir
+        FileUtils.makedirs(tmp_storage_dir) unless Dir.exist?(tmp_storage_dir)
+      end
+
+      def tmp_storage_dir
+        @tmp_storage_dir ||= File.join(storage_dir, 'tmp', 'download')
+      end
+
+      def storage_dir
+        @storage_dir ||= Gitlab.config.lfs.storage_path
+      end
+    end
+  end
+end
diff --git a/app/services/projects/lfs_pointers/lfs_import_service.rb b/app/services/projects/lfs_pointers/lfs_import_service.rb
new file mode 100644
index 00000000000..b6b0dec142f
--- /dev/null
+++ b/app/services/projects/lfs_pointers/lfs_import_service.rb
@@ -0,0 +1,92 @@
+# This service manages the whole worflow of discovering the Lfs files in a
+# repository, linking them to the project and downloading (and linking) the non
+# existent ones.
+module Projects
+  module LfsPointers
+    class LfsImportService < BaseService
+      include Gitlab::Utils::StrongMemoize
+
+      HEAD_REV = 'HEAD'.freeze
+      LFS_ENDPOINT_PATTERN = /^\t?url\s*=\s*(.+)$/.freeze
+      LFS_BATCH_API_ENDPOINT = '/info/lfs/objects/batch'.freeze
+
+      LfsImportError = Class.new(StandardError)
+
+      def execute
+        return {} unless project&.lfs_enabled?
+
+        if external_lfs_endpoint?
+          # If the endpoint host is different from the import_url it means
+          # that the repo is using a third party service for storing the LFS files.
+          # In this case, we have to disable lfs in the project
+          disable_lfs!
+
+          return {}
+        end
+
+        get_download_links
+      rescue LfsDownloadLinkListService::DownloadLinksError => e
+        raise LfsImportError, "The LFS objects download list couldn't be imported. Error: #{e.message}"
+      end
+
+      private
+
+      def external_lfs_endpoint?
+        lfsconfig_endpoint_uri && lfsconfig_endpoint_uri.host != import_uri.host
+      end
+
+      def disable_lfs!
+        project.update(lfs_enabled: false)
+      end
+
+      def get_download_links
+        existent_lfs = LfsListService.new(project).execute
+        linked_oids = LfsLinkService.new(project).execute(existent_lfs.keys)
+
+        # Retrieving those oids not linked and which we need to download
+        not_linked_lfs = existent_lfs.except(*linked_oids)
+
+        LfsDownloadLinkListService.new(project, remote_uri: current_endpoint_uri).execute(not_linked_lfs)
+      end
+
+      def lfsconfig_endpoint_uri
+        strong_memoize(:lfsconfig_endpoint_uri) do
+          # Retrieveing the blob data from the .lfsconfig file
+          data = project.repository.lfsconfig_for(HEAD_REV)
+          # Parsing the data to retrieve the url
+          parsed_data = data&.match(LFS_ENDPOINT_PATTERN)
+
+          if parsed_data
+            URI.parse(parsed_data[1]).tap do |endpoint|
+              endpoint.user ||= import_uri.user
+              endpoint.password ||= import_uri.password
+            end
+          end
+        end
+      rescue URI::InvalidURIError
+        raise LfsImportError, 'Invalid URL in .lfsconfig file'
+      end
+
+      def import_uri
+        @import_uri ||= URI.parse(project.import_url)
+      rescue URI::InvalidURIError
+        raise LfsImportError, 'Invalid project import URL'
+      end
+
+      def current_endpoint_uri
+        (lfsconfig_endpoint_uri || default_endpoint_uri)
+      end
+
+      # The import url must end with '.git' here we ensure it is
+      def default_endpoint_uri
+        @default_endpoint_uri ||= begin
+          import_uri.dup.tap do |uri|
+            path = uri.path.gsub(%r(/$), '')
+            path += '.git' unless path.ends_with?('.git')
+            uri.path = path + LFS_BATCH_API_ENDPOINT
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/app/services/projects/lfs_pointers/lfs_link_service.rb b/app/services/projects/lfs_pointers/lfs_link_service.rb
new file mode 100644
index 00000000000..d20bdf86c58
--- /dev/null
+++ b/app/services/projects/lfs_pointers/lfs_link_service.rb
@@ -0,0 +1,29 @@
+# Given a list of oids, this services links the existent Lfs Objects to the project
+module Projects
+  module LfsPointers
+    class LfsLinkService < BaseService
+      # Accept an array of oids to link
+      #
+      # Returns a hash with the same structure with oids linked
+      def execute(oids)
+        return {} unless project&.lfs_enabled?
+
+        # Search and link existing LFS Object
+        link_existing_lfs_objects(oids)
+      end
+
+      private
+
+      def link_existing_lfs_objects(oids)
+        existent_lfs_objects = LfsObject.where(oid: oids)
+
+        return [] unless existent_lfs_objects.any?
+
+        not_linked_lfs_objects = existent_lfs_objects.where.not(id: project.all_lfs_objects)
+        project.all_lfs_objects << not_linked_lfs_objects
+
+        existent_lfs_objects.pluck(:oid)
+      end
+    end
+  end
+end
diff --git a/app/services/projects/lfs_pointers/lfs_list_service.rb b/app/services/projects/lfs_pointers/lfs_list_service.rb
new file mode 100644
index 00000000000..b770982cbc0
--- /dev/null
+++ b/app/services/projects/lfs_pointers/lfs_list_service.rb
@@ -0,0 +1,19 @@
+# This service list all existent Lfs objects in a repository
+module Projects
+  module LfsPointers
+    class LfsListService < BaseService
+      REV = 'HEAD'.freeze
+
+      # Retrieve all lfs blob pointers and returns a hash
+      # with the structure { lfs_file_oid => lfs_file_size }
+      def execute
+        return {} unless project&.lfs_enabled?
+
+        Gitlab::Git::LfsChanges.new(project.repository, REV)
+                               .all_pointers
+                               .map! { |blob| [blob.lfs_oid, blob.lfs_size] }
+                               .to_h
+      end
+    end
+  end
+end
diff --git a/app/services/projects/move_access_service.rb b/app/services/projects/move_access_service.rb
new file mode 100644
index 00000000000..3af3a22d486
--- /dev/null
+++ b/app/services/projects/move_access_service.rb
@@ -0,0 +1,25 @@
+module Projects
+  class MoveAccessService < BaseMoveRelationsService
+    def execute(source_project, remove_remaining_elements: true)
+      return unless super
+
+      @project.with_transaction_returning_status do
+        if @project.namespace != source_project.namespace
+          @project.run_after_commit do
+            source_project.namespace.refresh_project_authorizations
+            self.namespace.refresh_project_authorizations
+          end
+        end
+
+        ::Projects::MoveProjectMembersService.new(@project, @current_user)
+          .execute(source_project, remove_remaining_elements: remove_remaining_elements)
+        ::Projects::MoveProjectGroupLinksService.new(@project, @current_user)
+          .execute(source_project, remove_remaining_elements: remove_remaining_elements)
+        ::Projects::MoveProjectAuthorizationsService.new(@project, @current_user)
+          .execute(source_project, remove_remaining_elements: remove_remaining_elements)
+
+        success
+      end
+    end
+  end
+end
diff --git a/app/services/projects/move_deploy_keys_projects_service.rb b/app/services/projects/move_deploy_keys_projects_service.rb
new file mode 100644
index 00000000000..dde420655b0
--- /dev/null
+++ b/app/services/projects/move_deploy_keys_projects_service.rb
@@ -0,0 +1,31 @@
+module Projects
+  class MoveDeployKeysProjectsService < BaseMoveRelationsService
+    def execute(source_project, remove_remaining_elements: true)
+      return unless super
+
+      Project.transaction(requires_new: true) do
+        move_deploy_keys_projects
+        remove_remaining_deploy_keys_projects if remove_remaining_elements
+
+        success
+      end
+    end
+
+    private
+
+    def move_deploy_keys_projects
+      prepare_relation(non_existent_deploy_keys_projects)
+        .update_all(project_id: @project.id)
+    end
+
+    def non_existent_deploy_keys_projects
+      source_project.deploy_keys_projects
+                    .joins(:deploy_key)
+                    .where.not(keys: { fingerprint: @project.deploy_keys.select(:fingerprint) })
+    end
+
+    def remove_remaining_deploy_keys_projects
+      source_project.deploy_keys_projects.destroy_all
+    end
+  end
+end
diff --git a/app/services/projects/move_forks_service.rb b/app/services/projects/move_forks_service.rb
new file mode 100644
index 00000000000..d2901ea1457
--- /dev/null
+++ b/app/services/projects/move_forks_service.rb
@@ -0,0 +1,42 @@
+module Projects
+  class MoveForksService < BaseMoveRelationsService
+    def execute(source_project, remove_remaining_elements: true)
+      return unless super && source_project.fork_network
+
+      Project.transaction(requires_new: true) do
+        move_forked_project_links
+        move_fork_network_members
+        update_root_project
+        refresh_forks_count
+
+        success
+      end
+    end
+
+    private
+
+    def move_forked_project_links
+      # Update ancestor
+      ForkedProjectLink.where(forked_to_project: source_project)
+                       .update_all(forked_to_project_id: @project.id)
+
+      # Update the descendants
+      ForkedProjectLink.where(forked_from_project: source_project)
+                       .update_all(forked_from_project_id: @project.id)
+    end
+
+    def move_fork_network_members
+      ForkNetworkMember.where(project: source_project).update_all(project_id: @project.id)
+      ForkNetworkMember.where(forked_from_project: source_project).update_all(forked_from_project_id: @project.id)
+    end
+
+    def update_root_project
+      # Update root network project
+      ForkNetwork.where(root_project: source_project).update_all(root_project_id: @project.id)
+    end
+
+    def refresh_forks_count
+      Projects::ForksCountService.new(@project).refresh_cache
+    end
+  end
+end
diff --git a/app/services/projects/move_lfs_objects_projects_service.rb b/app/services/projects/move_lfs_objects_projects_service.rb
new file mode 100644
index 00000000000..298da5f1a82
--- /dev/null
+++ b/app/services/projects/move_lfs_objects_projects_service.rb
@@ -0,0 +1,29 @@
+module Projects
+  class MoveLfsObjectsProjectsService < BaseMoveRelationsService
+    def execute(source_project, remove_remaining_elements: true)
+      return unless super
+
+      Project.transaction(requires_new: true) do
+        move_lfs_objects_projects
+        remove_remaining_lfs_objects_project if remove_remaining_elements
+
+        success
+      end
+    end
+
+    private
+
+    def move_lfs_objects_projects
+      prepare_relation(non_existent_lfs_objects_projects)
+        .update_all(project_id: @project.lfs_storage_project.id)
+    end
+
+    def remove_remaining_lfs_objects_project
+      source_project.lfs_objects_projects.destroy_all
+    end
+
+    def non_existent_lfs_objects_projects
+      source_project.lfs_objects_projects.where.not(lfs_object: @project.lfs_objects)
+    end
+  end
+end
diff --git a/app/services/projects/move_notification_settings_service.rb b/app/services/projects/move_notification_settings_service.rb
new file mode 100644
index 00000000000..f7be461a5da
--- /dev/null
+++ b/app/services/projects/move_notification_settings_service.rb
@@ -0,0 +1,38 @@
+module Projects
+  class MoveNotificationSettingsService < BaseMoveRelationsService
+    def execute(source_project, remove_remaining_elements: true)
+      return unless super
+
+      Project.transaction(requires_new: true) do
+        move_notification_settings
+        remove_remaining_notification_settings if remove_remaining_elements
+
+        success
+      end
+    end
+
+    private
+
+    def move_notification_settings
+      prepare_relation(non_existent_notifications)
+        .update_all(source_id: @project.id)
+    end
+
+    # Remove remaining notification settings from source_project
+    def remove_remaining_notification_settings
+      source_project.notification_settings.destroy_all
+    end
+
+    # Get users of current notification_settings
+    def users_in_target_project
+      @project.notification_settings.select(:user_id)
+    end
+
+    # Look for notification_settings in source_project that are not in the target project
+    def non_existent_notifications
+      source_project.notification_settings
+        .select(:id)
+        .where.not(user_id: users_in_target_project)
+    end
+  end
+end
diff --git a/app/services/projects/move_project_authorizations_service.rb b/app/services/projects/move_project_authorizations_service.rb
new file mode 100644
index 00000000000..5ef12fc49e5
--- /dev/null
+++ b/app/services/projects/move_project_authorizations_service.rb
@@ -0,0 +1,40 @@
+# NOTE: This service cannot be used directly because it is part of a
+# a bigger process. Instead, use the service MoveAccessService which moves
+# project memberships, project group links, authorizations and refreshes
+# the authorizations if neccessary
+module Projects
+  class MoveProjectAuthorizationsService < BaseMoveRelationsService
+    def execute(source_project, remove_remaining_elements: true)
+      return unless super
+
+      Project.transaction(requires_new: true) do
+        move_project_authorizations
+
+        remove_remaining_authorizations if remove_remaining_elements
+
+        success
+      end
+    end
+
+    private
+
+    def move_project_authorizations
+      prepare_relation(non_existent_authorization, :user_id)
+        .update_all(project_id: @project.id)
+    end
+
+    def remove_remaining_authorizations
+      # I think because the Project Authorization table does not have a primary key
+      # it brings a lot a problems/bugs. First, Rails raises PG::SyntaxException if we use
+      # destroy_all instead of delete_all.
+      source_project.project_authorizations.delete_all(:delete_all)
+    end
+
+    # Look for authorizations in source_project that are not in the target project
+    def non_existent_authorization
+      source_project.project_authorizations
+                    .select(:user_id)
+                    .where.not(user: @project.authorized_users)
+    end
+  end
+end
diff --git a/app/services/projects/move_project_group_links_service.rb b/app/services/projects/move_project_group_links_service.rb
new file mode 100644
index 00000000000..dbeffd7dae9
--- /dev/null
+++ b/app/services/projects/move_project_group_links_service.rb
@@ -0,0 +1,40 @@
+# NOTE: This service cannot be used directly because it is part of a
+# a bigger process. Instead, use the service MoveAccessService which moves
+# project memberships, project group links, authorizations and refreshes
+# the authorizations if neccessary
+module Projects
+  class MoveProjectGroupLinksService < BaseMoveRelationsService
+    def execute(source_project, remove_remaining_elements: true)
+      return unless super
+
+      Project.transaction(requires_new: true) do
+        move_group_links
+        remove_remaining_project_group_links if remove_remaining_elements
+
+        success
+      end
+    end
+
+    private
+
+    def move_group_links
+      prepare_relation(non_existent_group_links)
+        .update_all(project_id: @project.id)
+    end
+
+    # Remove remaining project group links from source_project
+    def remove_remaining_project_group_links
+      source_project.reload.project_group_links.destroy_all
+    end
+
+    def group_links_in_target_project
+      @project.project_group_links.select(:group_id)
+    end
+
+    # Look for groups in source_project that are not in the target project
+    def non_existent_group_links
+      source_project.project_group_links
+                    .where.not(group_id: group_links_in_target_project)
+    end
+  end
+end
diff --git a/app/services/projects/move_project_members_service.rb b/app/services/projects/move_project_members_service.rb
new file mode 100644
index 00000000000..22a5f0a3fe6
--- /dev/null
+++ b/app/services/projects/move_project_members_service.rb
@@ -0,0 +1,40 @@
+# NOTE: This service cannot be used directly because it is part of a
+# a bigger process. Instead, use the service MoveAccessService which moves
+# project memberships, project group links, authorizations and refreshes
+# the authorizations if neccessary
+module Projects
+  class MoveProjectMembersService < BaseMoveRelationsService
+    def execute(source_project, remove_remaining_elements: true)
+      return unless super
+
+      Project.transaction(requires_new: true) do
+        move_project_members
+        remove_remaining_members if remove_remaining_elements
+
+        success
+      end
+    end
+
+    private
+
+    def move_project_members
+      prepare_relation(non_existent_members).update_all(source_id: @project.id)
+    end
+
+    def remove_remaining_members
+      # Remove remaining members and authorizations from source_project
+      source_project.project_members.destroy_all
+    end
+
+    def project_members_in_target_project
+      @project.project_members.select(:user_id)
+    end
+
+    # Look for members in source_project that are not in the target project
+    def non_existent_members
+      source_project.members
+                    .select(:id)
+                    .where.not(user_id: @project.project_members.select(:user_id))
+    end
+  end
+end
diff --git a/app/services/projects/move_users_star_projects_service.rb b/app/services/projects/move_users_star_projects_service.rb
new file mode 100644
index 00000000000..079fd5b9685
--- /dev/null
+++ b/app/services/projects/move_users_star_projects_service.rb
@@ -0,0 +1,20 @@
+module Projects
+  class MoveUsersStarProjectsService < BaseMoveRelationsService
+    def execute(source_project, remove_remaining_elements: true)
+      return unless super
+
+      user_stars = source_project.users_star_projects
+
+      return unless user_stars.any?
+
+      Project.transaction(requires_new: true) do
+        user_stars.update_all(project_id: @project.id)
+
+        Project.reset_counters @project.id, :users_star_projects
+        Project.reset_counters source_project.id, :users_star_projects
+
+        success
+      end
+    end
+  end
+end
diff --git a/app/services/projects/open_issues_count_service.rb b/app/services/projects/open_issues_count_service.rb
index a975a06a05c..78b1477186a 100644
--- a/app/services/projects/open_issues_count_service.rb
+++ b/app/services/projects/open_issues_count_service.rb
@@ -2,14 +2,72 @@ module Projects
   # Service class for counting and caching the number of open issues of a
   # project.
   class OpenIssuesCountService < Projects::CountService
+    include Gitlab::Utils::StrongMemoize
+
+    # Cache keys used to store issues count
+    PUBLIC_COUNT_KEY = 'public_open_issues_count'.freeze
+    TOTAL_COUNT_KEY = 'total_open_issues_count'.freeze
+
+    def initialize(project, user = nil)
+      @user = user
+
+      super(project)
+    end
+
     def cache_key_name
-      'open_issues_count'
+      public_only? ? PUBLIC_COUNT_KEY : TOTAL_COUNT_KEY
+    end
+
+    def public_only?
+      !user_is_at_least_reporter?
+    end
+
+    def relation_for_count
+      self.class.query(@project, public_only: public_only?)
+    end
+
+    def user_is_at_least_reporter?
+      strong_memoize(:user_is_at_least_reporter) do
+        @user && @project.team.member?(@user, Gitlab::Access::REPORTER)
+      end
+    end
+
+    def public_count_cache_key
+      cache_key(PUBLIC_COUNT_KEY)
+    end
+
+    def total_count_cache_key
+      cache_key(TOTAL_COUNT_KEY)
+    end
+
+    def refresh_cache(&block)
+      if block_given?
+        super(&block)
+      else
+        count_grouped_by_confidential = self.class.query(@project, public_only: false).group(:confidential).count
+        public_count = count_grouped_by_confidential[false] || 0
+        total_count = public_count + (count_grouped_by_confidential[true] || 0)
+
+        update_cache_for_key(public_count_cache_key) do
+          public_count
+        end
+
+        update_cache_for_key(total_count_cache_key) do
+          total_count
+        end
+      end
     end
 
-    def self.query(project_ids)
-      # We don't include confidential issues in this number since this would
-      # expose the number of confidential issues to non project members.
-      Issue.opened.public_only.where(project: project_ids)
+    # We only show total issues count for reporters
+    # which are allowed to view confidential issues
+    # This will still show a discrepancy on issues number but should be less than before.
+    # Check https://gitlab.com/gitlab-org/gitlab-ce/issues/38418 description.
+    def self.query(projects, public_only: true)
+      if public_only
+        Issue.opened.public_only.where(project: projects)
+      else
+        Issue.opened.where(project: projects)
+      end
     end
   end
 end
diff --git a/app/services/projects/overwrite_project_service.rb b/app/services/projects/overwrite_project_service.rb
new file mode 100644
index 00000000000..ce94f147aa9
--- /dev/null
+++ b/app/services/projects/overwrite_project_service.rb
@@ -0,0 +1,69 @@
+module Projects
+  class OverwriteProjectService < BaseService
+    def execute(source_project)
+      return unless source_project && source_project.namespace == @project.namespace
+
+      Project.transaction do
+        move_before_destroy_relationships(source_project)
+        destroy_old_project(source_project)
+        rename_project(source_project.name, source_project.path)
+
+        @project
+      end
+    # Projects::DestroyService can raise Exceptions, but we don't want
+    # to pass that kind of exception to the caller. Instead, we change it
+    # for a StandardError exception
+    rescue Exception => e # rubocop:disable Lint/RescueException
+      attempt_restore_repositories(source_project)
+
+      if e.class == Exception
+        raise StandardError, e.message
+      else
+        raise
+      end
+    end
+
+    private
+
+    def move_before_destroy_relationships(source_project)
+      options = { remove_remaining_elements: false }
+
+      ::Projects::MoveUsersStarProjectsService.new(@project, @current_user).execute(source_project, options)
+      ::Projects::MoveAccessService.new(@project, @current_user).execute(source_project, options)
+      ::Projects::MoveDeployKeysProjectsService.new(@project, @current_user).execute(source_project, options)
+      ::Projects::MoveNotificationSettingsService.new(@project, @current_user).execute(source_project, options)
+      ::Projects::MoveForksService.new(@project, @current_user).execute(source_project, options)
+      ::Projects::MoveLfsObjectsProjectsService.new(@project, @current_user).execute(source_project, options)
+      add_source_project_to_fork_network(source_project)
+    end
+
+    def destroy_old_project(source_project)
+      # Delete previous project (synchronously) and unlink relations
+      ::Projects::DestroyService.new(source_project, @current_user).execute
+    end
+
+    def rename_project(name, path)
+      # Update de project's name and path to the original name/path
+      ::Projects::UpdateService.new(@project,
+                                    @current_user,
+                                    { name: name, path: path })
+                               .execute
+    end
+
+    def attempt_restore_repositories(project)
+      ::Projects::DestroyService.new(project, @current_user).attempt_repositories_rollback
+    end
+
+    def add_source_project_to_fork_network(source_project)
+      return unless @project.fork_network
+
+      # Because he have moved all references in the fork network from the source_project
+      # we won't be able to query the database (only through its cached data),
+      # for its former relationships. That's why we're adding it to the network
+      # as a fork of the target project
+      ForkNetworkMember.create!(fork_network: @project.fork_network,
+                                project: source_project,
+                                forked_from_project: @project)
+    end
+  end
+end
diff --git a/app/services/projects/participants_service.rb b/app/services/projects/participants_service.rb
index e6193fcacee..21741913385 100644
--- a/app/services/projects/participants_service.rb
+++ b/app/services/projects/participants_service.rb
@@ -1,48 +1,20 @@
 module Projects
   class ParticipantsService < BaseService
-    attr_reader :noteable
+    include Users::ParticipableService
 
     def execute(noteable)
       @noteable = noteable
 
-      project_members = sorted(project.team.members)
       participants = noteable_owner + participants_in_noteable + all_members + groups + project_members
       participants.uniq
     end
 
-    def noteable_owner
-      return [] unless noteable && noteable.author.present?
-
-      [{
-        name: noteable.author.name,
-        username: noteable.author.username,
-        avatar_url: noteable.author.avatar_url
-      }]
-    end
-
-    def participants_in_noteable
-      return [] unless noteable
-
-      users = noteable.participants(current_user)
-      sorted(users)
-    end
-
-    def sorted(users)
-      users.uniq.to_a.compact.sort_by(&:username).map do |user|
-        { username: user.username, name: user.name, avatar_url: user.avatar_url }
-      end
-    end
-
-    def groups
-      current_user.authorized_groups.sort_by(&:path).map do |group|
-        count = group.users.count
-        { username: group.full_path, name: group.full_name, count: count, avatar_url: group.avatar_url }
-      end
+    def project_members
+      @project_members ||= sorted(project.team.members)
     end
 
     def all_members
-      count = project.team.members.flatten.count
-      [{ username: "all", name: "All Project and Group Members", count: count }]
+      [{ username: "all", name: "All Project and Group Members", count: project_members.count }]
     end
   end
 end
diff --git a/app/services/projects/transfer_service.rb b/app/services/projects/transfer_service.rb
index 26765e5c3f3..61acdd58021 100644
--- a/app/services/projects/transfer_service.rb
+++ b/app/services/projects/transfer_service.rb
@@ -24,6 +24,8 @@ module Projects
 
       transfer(project)
 
+      current_user.invalidate_personal_projects_count
+
       true
     rescue Projects::TransferService::TransferError => ex
       project.reload
@@ -125,7 +127,7 @@ module Projects
     end
 
     def move_repo_folder(from_name, to_name)
-      gitlab_shell.mv_repository(project.repository_storage_path, from_name, to_name)
+      gitlab_shell.mv_repository(project.repository_storage, from_name, to_name)
     end
 
     def execute_system_hooks
diff --git a/app/services/projects/update_pages_configuration_service.rb b/app/services/projects/update_pages_configuration_service.rb
index 52ff64cc938..25017c5cbe3 100644
--- a/app/services/projects/update_pages_configuration_service.rb
+++ b/app/services/projects/update_pages_configuration_service.rb
@@ -18,7 +18,8 @@ module Projects
 
     def pages_config
       {
-        domains: pages_domains_config
+        domains: pages_domains_config,
+        https_only: project.pages_https_only?
       }
     end
 
@@ -27,7 +28,8 @@ module Projects
         {
           domain: domain.domain,
           certificate: domain.certificate,
-          key: domain.key
+          key: domain.key,
+          https_only: project.pages_https_only? && domain.https?
         }
       end
     end
diff --git a/app/services/projects/update_pages_service.rb b/app/services/projects/update_pages_service.rb
index 00fdd047208..1d8caec9c6f 100644
--- a/app/services/projects/update_pages_service.rb
+++ b/app/services/projects/update_pages_service.rb
@@ -1,6 +1,6 @@
 module Projects
   class UpdatePagesService < BaseService
-    InvaildStateError = Class.new(StandardError)
+    InvalidStateError = Class.new(StandardError)
     FailedToExtractError = Class.new(StandardError)
 
     BLOCK_SIZE = 32.kilobytes
@@ -21,8 +21,8 @@ module Projects
       @status.enqueue!
       @status.run!
 
-      raise InvaildStateError, 'missing pages artifacts' unless build.artifacts?
-      raise InvaildStateError, 'pages are outdated' unless latest?
+      raise InvalidStateError, 'missing pages artifacts' unless build.artifacts?
+      raise InvalidStateError, 'pages are outdated' unless latest?
 
       # Create temporary directory in which we will extract the artifacts
       FileUtils.mkdir_p(tmp_path)
@@ -31,31 +31,32 @@ module Projects
 
         # Check if we did extract public directory
         archive_public_path = File.join(archive_path, 'public')
-        raise FailedToExtractError, 'pages miss the public folder' unless Dir.exist?(archive_public_path)
-        raise InvaildStateError, 'pages are outdated' unless latest?
+        raise InvalidStateError, 'pages miss the public folder' unless Dir.exist?(archive_public_path)
+        raise InvalidStateError, 'pages are outdated' unless latest?
 
         deploy_page!(archive_public_path)
         success
       end
-    rescue InvaildStateError, FailedToExtractError => e
-      register_failure
+    rescue InvalidStateError => e
+      error(e.message)
+    rescue => e
       error(e.message)
+      raise e
     end
 
     private
 
     def success
       @status.success
-      delete_artifact!
       super
     end
 
-    def error(message, http_status = nil)
+    def error(message)
+      register_failure
       log_error("Projects::UpdatePagesService: #{message}")
       @status.allow_failure = !latest?
       @status.description = message
       @status.drop(:script_failure)
-      delete_artifact!
       super
     end
 
@@ -71,31 +72,21 @@ module Projects
     end
 
     def extract_archive!(temp_path)
-      if artifacts.ends_with?('.tar.gz') || artifacts.ends_with?('.tgz')
-        extract_tar_archive!(temp_path)
-      elsif artifacts.ends_with?('.zip')
+      if artifacts.ends_with?('.zip')
         extract_zip_archive!(temp_path)
       else
-        raise FailedToExtractError, 'unsupported artifacts format'
+        raise InvalidStateError, 'unsupported artifacts format'
       end
     end
 
-    def extract_tar_archive!(temp_path)
-      results = Open3.pipeline(%W(gunzip -c #{artifacts}),
-                               %W(dd bs=#{BLOCK_SIZE} count=#{blocks}),
-                               %W(tar -x -C #{temp_path} #{SITE_PATH}),
-                               err: '/dev/null')
-      raise FailedToExtractError, 'pages failed to extract' unless results.compact.all?(&:success?)
-    end
-
     def extract_zip_archive!(temp_path)
-      raise FailedToExtractError, 'missing artifacts metadata' unless build.artifacts_metadata?
+      raise InvalidStateError, 'missing artifacts metadata' unless build.artifacts_metadata?
 
       # Calculate page size after extract
       public_entry = build.artifacts_metadata_entry(SITE_PATH, recursive: true)
 
       if public_entry.total_size > max_size
-        raise FailedToExtractError, "artifacts for pages are too large: #{public_entry.total_size}"
+        raise InvalidStateError, "artifacts for pages are too large: #{public_entry.total_size}"
       end
 
       # Requires UnZip at least 6.00 Info-ZIP.
@@ -103,8 +94,10 @@ module Projects
       # -n  never overwrite existing files
       # We add * to end of SITE_PATH, because we want to extract SITE_PATH and all subdirectories
       site_path = File.join(SITE_PATH, '*')
-      unless system(*%W(unzip -qq -n #{artifacts} #{site_path} -d #{temp_path}))
-        raise FailedToExtractError, 'pages failed to extract'
+      build.artifacts_file.use_file do |artifacts_path|
+        unless system(*%W(unzip -n #{artifacts_path} #{site_path} -d #{temp_path}))
+          raise FailedToExtractError, 'pages failed to extract'
+        end
       end
     end
 
@@ -167,13 +160,11 @@ module Projects
       build.artifacts_file.path
     end
 
-    def delete_artifact!
-      build.reload # Reload stable object to prevent erase artifacts with old state
-      build.erase_artifacts! unless build.has_expiring_artifacts?
-    end
-
     def latest_sha
       project.commit(build.ref).try(:sha).to_s
+    ensure
+      # Close any file descriptors that were opened and free libgit2 buffers
+      project.cleanup
     end
 
     def sha
diff --git a/app/services/projects/update_remote_mirror_service.rb b/app/services/projects/update_remote_mirror_service.rb
new file mode 100644
index 00000000000..8183a2f26d7
--- /dev/null
+++ b/app/services/projects/update_remote_mirror_service.rb
@@ -0,0 +1,30 @@
+module Projects
+  class UpdateRemoteMirrorService < BaseService
+    attr_reader :errors
+
+    def execute(remote_mirror)
+      @errors = []
+
+      return success unless remote_mirror.enabled?
+
+      begin
+        repository.fetch_remote(remote_mirror.remote_name, no_tags: true)
+
+        opts = {}
+        if remote_mirror.only_protected_branches?
+          opts[:only_branches_matching] = project.protected_branches.select(:name).map(&:name)
+        end
+
+        remote_mirror.update_repository(opts)
+      rescue => e
+        errors << e.message.strip
+      end
+
+      if errors.present?
+        error(errors.join("\n\n"))
+      else
+        success
+      end
+    end
+  end
+end
diff --git a/app/services/projects/update_service.rb b/app/services/projects/update_service.rb
index 5f2615a2c01..d8250cd8102 100644
--- a/app/services/projects/update_service.rb
+++ b/app/services/projects/update_service.rb
@@ -17,6 +17,11 @@ module Projects
 
       ensure_wiki_exists if enabling_wiki?
 
+      yield if block_given?
+
+      # If the block added errors, don't try to save the project
+      return validation_failed! if project.errors.any?
+
       if project.update_attributes(params.except(:default_branch))
         if project.previous_changes.include?('path')
           project.rename_repo
@@ -24,23 +29,29 @@ module Projects
           system_hook_service.execute_hooks_for(project, :update)
         end
 
+        update_pages_config if changing_pages_https_only?
+
         success
       else
-        model_errors = project.errors.full_messages.to_sentence
-        error_message = model_errors.presence || 'Project could not be updated!'
-
-        error(error_message)
+        validation_failed!
       end
     end
 
     def run_auto_devops_pipeline?
-      return false if project.repository.gitlab_ci_yml || !project.auto_devops.previous_changes.include?('enabled')
+      return false if project.repository.gitlab_ci_yml || !project.auto_devops&.previous_changes&.include?('enabled')
 
       project.auto_devops.enabled? || (project.auto_devops.enabled.nil? && Gitlab::CurrentSettings.auto_devops_enabled?)
     end
 
     private
 
+    def validation_failed!
+      model_errors = project.errors.full_messages.to_sentence
+      error_message = model_errors.presence || 'Project could not be updated!'
+
+      error(error_message)
+    end
+
     def renaming_project_with_container_registry_tags?
       new_path = params[:path]
 
@@ -51,8 +62,8 @@ module Projects
     def changing_default_branch?
       new_branch = params[:default_branch]
 
-      project.repository.exists? &&
-        new_branch && new_branch != project.default_branch
+      new_branch && project.repository.exists? &&
+        new_branch != project.default_branch
     end
 
     def enabling_wiki?
@@ -67,5 +78,13 @@ module Projects
       log_error("Could not create wiki for #{project.full_name}")
       Gitlab::Metrics.counter(:wiki_can_not_be_created_total, 'Counts the times we failed to create a wiki')
     end
+
+    def update_pages_config
+      Projects::UpdatePagesConfigurationService.new(project).execute
+    end
+
+    def changing_pages_https_only?
+      project.previous_changes.include?(:pages_https_only)
+    end
   end
 end
diff --git a/app/services/protected_branches/create_service.rb b/app/services/protected_branches/create_service.rb
index 6212fd69077..9d947f73af1 100644
--- a/app/services/protected_branches/create_service.rb
+++ b/app/services/protected_branches/create_service.rb
@@ -1,11 +1,20 @@
 module ProtectedBranches
   class CreateService < BaseService
-    attr_reader :protected_branch
-
     def execute(skip_authorization: false)
-      raise Gitlab::Access::AccessDeniedError unless skip_authorization || can?(current_user, :admin_project, project)
+      raise Gitlab::Access::AccessDeniedError unless skip_authorization || authorized?
+
+      protected_branch.save
+      protected_branch
+    end
+
+    def authorized?
+      can?(current_user, :create_protected_branch, protected_branch)
+    end
+
+    private
 
-      project.protected_branches.create(params)
+    def protected_branch
+      @protected_branch ||= project.protected_branches.new(params)
     end
   end
 end
diff --git a/app/services/protected_branches/destroy_service.rb b/app/services/protected_branches/destroy_service.rb
new file mode 100644
index 00000000000..8172c896e76
--- /dev/null
+++ b/app/services/protected_branches/destroy_service.rb
@@ -0,0 +1,9 @@
+module ProtectedBranches
+  class DestroyService < BaseService
+    def execute(protected_branch)
+      raise Gitlab::Access::AccessDeniedError unless can?(current_user, :destroy_protected_branch, protected_branch)
+
+      protected_branch.destroy
+    end
+  end
+end
diff --git a/app/services/protected_branches/update_service.rb b/app/services/protected_branches/update_service.rb
index 4b3337a5c9d..95e46645374 100644
--- a/app/services/protected_branches/update_service.rb
+++ b/app/services/protected_branches/update_service.rb
@@ -1,7 +1,7 @@
 module ProtectedBranches
   class UpdateService < BaseService
     def execute(protected_branch)
-      raise Gitlab::Access::AccessDeniedError unless can?(current_user, :admin_project, project)
+      raise Gitlab::Access::AccessDeniedError unless can?(current_user, :update_protected_branch, protected_branch)
 
       protected_branch.update(params)
       protected_branch
diff --git a/app/services/protected_tags/destroy_service.rb b/app/services/protected_tags/destroy_service.rb
new file mode 100644
index 00000000000..c868d7ad8e6
--- /dev/null
+++ b/app/services/protected_tags/destroy_service.rb
@@ -0,0 +1,7 @@
+module ProtectedTags
+  class DestroyService < BaseService
+    def execute(protected_tag)
+      protected_tag.destroy
+    end
+  end
+end
diff --git a/app/services/quick_actions/interpret_service.rb b/app/services/quick_actions/interpret_service.rb
index cba49faac31..9ac8fdb4cff 100644
--- a/app/services/quick_actions/interpret_service.rb
+++ b/app/services/quick_actions/interpret_service.rb
@@ -138,8 +138,10 @@ module QuickActions
         'Remove assignee'
       end
     end
-    explanation do
-      "Removes #{'assignee'.pluralize(issuable.assignees.size)} #{issuable.assignees.map(&:to_reference).to_sentence}."
+    explanation do |users = nil|
+      assignees = issuable.assignees
+      assignees &= users if users.present? && issuable.allows_multiple_assignees?
+      "Removes #{'assignee'.pluralize(assignees.size)} #{assignees.map(&:to_reference).to_sentence}."
     end
     params do
       issuable.allows_multiple_assignees? ? '@user1 @user2' : ''
@@ -200,7 +202,7 @@ module QuickActions
     end
     params '~label1 ~"label 2"'
     condition do
-      available_labels = LabelsFinder.new(current_user, project_id: project.id).execute
+      available_labels = LabelsFinder.new(current_user, project_id: project.id, include_ancestor_groups: true).execute
 
       current_user.can?(:"admin_#{issuable.to_ability_name}", project) &&
         available_labels.any?
@@ -268,6 +270,26 @@ module QuickActions
       end
     end
 
+    desc 'Copy labels and milestone from other issue or merge request'
+    explanation do |source_issuable|
+      "Copy labels and milestone from #{source_issuable.to_reference}."
+    end
+    params '#issue | !merge_request'
+    condition do
+      issuable.persisted? &&
+        current_user.can?(:"update_#{issuable.to_ability_name}", issuable)
+    end
+    parse_params do |issuable_param|
+      extract_references(issuable_param, :issue).first ||
+        extract_references(issuable_param, :merge_request).first
+    end
+    command :copy_metadata do |source_issuable|
+      if source_issuable.present? && source_issuable.project.id == issuable.project.id
+        @updates[:add_label_ids] = source_issuable.labels.map(&:id)
+        @updates[:milestone_id] = source_issuable.milestone.id if source_issuable.milestone
+      end
+    end
+
     desc 'Add a todo'
     explanation 'Adds a todo.'
     condition do
@@ -539,6 +561,17 @@ module QuickActions
       end
     end
 
+    desc 'Make issue confidential.'
+    explanation do
+      'Makes this issue confidential'
+    end
+    condition do
+      issuable.is_a?(Issue) && current_user.can?(:"admin_#{issuable.to_ability_name}", issuable)
+    end
+    command :confidential do
+      @updates[:confidential] = true
+    end
+
     def extract_users(params)
       return [] if params.nil?
 
@@ -562,7 +595,7 @@ module QuickActions
 
     def find_labels(labels_param)
       extract_references(labels_param, :label) |
-        LabelsFinder.new(current_user, project_id: project.id, name: labels_param.split).execute
+        LabelsFinder.new(current_user, project_id: project.id, name: labels_param.split, include_ancestor_groups: true).execute
     end
 
     def find_label_references(labels_param)
@@ -593,6 +626,7 @@ module QuickActions
 
     def extract_references(arg, type)
       ext = Gitlab::ReferenceExtractor.new(project, current_user)
+
       ext.analyze(arg, author: current_user)
 
       ext.references(type)
diff --git a/app/services/repository_archive_clean_up_service.rb b/app/services/repository_archive_clean_up_service.rb
index aa84d36a206..ba7be4b3f89 100644
--- a/app/services/repository_archive_clean_up_service.rb
+++ b/app/services/repository_archive_clean_up_service.rb
@@ -10,7 +10,7 @@ class RepositoryArchiveCleanUpService
 
   def execute
     Gitlab::Metrics.measure(:repository_archive_clean_up) do
-      return unless File.directory?(path)
+      next unless File.directory?(path)
 
       clean_up_old_archives
       clean_up_empty_directories
@@ -20,11 +20,12 @@ class RepositoryArchiveCleanUpService
   private
 
   def clean_up_old_archives
-    run(%W(find #{path} -not -path #{path} -type f \( -name \*.tar -o -name \*.bz2 -o -name \*.tar.gz -o -name \*.zip \) -maxdepth 2 -mmin +#{mmin} -delete))
+    run(%W(find #{path} -mindepth 1 -maxdepth 3 -type f \( -name \*.tar -o -name \*.bz2 -o -name \*.tar.gz -o -name \*.zip \) -mmin +#{mmin} -delete))
   end
 
   def clean_up_empty_directories
-    run(%W(find #{path} -not -path #{path} -type d -empty -name \*.git -maxdepth 1 -delete))
+    run(%W(find #{path} -mindepth 2 -maxdepth 2 -type d -empty -delete))
+    run(%W(find #{path} -mindepth 1 -maxdepth 1 -type d -empty -delete))
   end
 
   def run(cmd)
diff --git a/app/services/system_note_service.rb b/app/services/system_note_service.rb
index 2253d638e93..00bf5434b7f 100644
--- a/app/services/system_note_service.rb
+++ b/app/services/system_note_service.rb
@@ -429,7 +429,7 @@ module SystemNoteService
   def cross_reference(noteable, mentioner, author)
     return if cross_reference_disallowed?(noteable, mentioner)
 
-    gfm_reference = mentioner.gfm_reference(noteable.project)
+    gfm_reference = mentioner.gfm_reference(noteable.project || noteable.group)
     body = cross_reference_note_content(gfm_reference)
 
     if noteable.is_a?(ExternalIssue)
@@ -582,7 +582,7 @@ module SystemNoteService
       text = "#{cross_reference_note_prefix}%#{mentioner.to_reference(nil)}"
       notes.where('(note LIKE ? OR note LIKE ?)', text, text.capitalize)
     else
-      gfm_reference = mentioner.gfm_reference(noteable.project)
+      gfm_reference = mentioner.gfm_reference(noteable.project || noteable.group)
       text = cross_reference_note_content(gfm_reference)
       notes.where(note: [text, text.capitalize])
     end
diff --git a/app/services/tags/create_service.rb b/app/services/tags/create_service.rb
index cc76d0df3a1..3cc88d77ba1 100644
--- a/app/services/tags/create_service.rb
+++ b/app/services/tags/create_service.rb
@@ -13,7 +13,7 @@ module Tags
         new_tag = repository.add_tag(current_user, tag_name, target, message)
       rescue Gitlab::Git::Repository::TagExistsError
         return error("Tag #{tag_name} already exists")
-      rescue Gitlab::Git::HooksService::PreReceiveError => ex
+      rescue Gitlab::Git::PreReceiveError => ex
         return error(ex.message)
       end
 
diff --git a/app/services/tags/destroy_service.rb b/app/services/tags/destroy_service.rb
index d3d46064729..b84b061e460 100644
--- a/app/services/tags/destroy_service.rb
+++ b/app/services/tags/destroy_service.rb
@@ -21,7 +21,7 @@ module Tags
       else
         error('Failed to remove tag')
       end
-    rescue Gitlab::Git::HooksService::PreReceiveError => ex
+    rescue Gitlab::Git::PreReceiveError => ex
       error(ex.message)
     end
 
diff --git a/app/services/test_hooks/base_service.rb b/app/services/test_hooks/base_service.rb
index e9aefb1fb75..aadc1ea644b 100644
--- a/app/services/test_hooks/base_service.rb
+++ b/app/services/test_hooks/base_service.rb
@@ -19,7 +19,7 @@ module TestHooks
       error_message = catch(:validation_error) do
         sample_data = self.__send__(trigger_data_method) # rubocop:disable GitlabSecurity/PublicSend
 
-        return hook.execute(sample_data, trigger_key)
+        return hook.execute(sample_data, trigger_key) # rubocop:disable Cop/AvoidReturnFromBlocks
       end
 
       error(error_message)
diff --git a/app/services/test_hooks/project_service.rb b/app/services/test_hooks/project_service.rb
index 01d5d774cd5..65183e84cce 100644
--- a/app/services/test_hooks/project_service.rb
+++ b/app/services/test_hooks/project_service.rb
@@ -1,11 +1,13 @@
 module TestHooks
   class ProjectService < TestHooks::BaseService
-    private
+    attr_writer :project
 
     def project
       @project ||= hook.project
     end
 
+    private
+
     def push_events_data
       throw(:validation_error, 'Ensure the project has at least one commit.') if project.empty_repo?
 
diff --git a/app/services/todo_service.rb b/app/services/todo_service.rb
index ffd48e842c2..f91cd03bf5c 100644
--- a/app/services/todo_service.rb
+++ b/app/services/todo_service.rb
@@ -98,12 +98,12 @@ class TodoService
 
   # When a build fails on the HEAD of a merge request we should:
   #
-  #  * create a todo for author of MR to fix it
-  #  * create a todo for merge_user to keep an eye on it
+  #  * create a todo for each merge participant
   #
   def merge_request_build_failed(merge_request)
-    create_build_failed_todo(merge_request, merge_request.author)
-    create_build_failed_todo(merge_request, merge_request.merge_user) if merge_request.merge_when_pipeline_succeeds?
+    merge_request.merge_participants.each do |user|
+      create_build_failed_todo(merge_request, user)
+    end
   end
 
   # When a new commit is pushed to a merge request we should:
@@ -116,20 +116,22 @@ class TodoService
 
   # When a build is retried to a merge request we should:
   #
-  #  * mark all pending todos related to the merge request for the author as done
-  #  * mark all pending todos related to the merge request for the merge_user as done
+  #  * mark all pending todos related to the merge request as done for each merge participant
   #
   def merge_request_build_retried(merge_request)
-    mark_pending_todos_as_done(merge_request, merge_request.author)
-    mark_pending_todos_as_done(merge_request, merge_request.merge_user) if merge_request.merge_when_pipeline_succeeds?
+    merge_request.merge_participants.each do |user|
+      mark_pending_todos_as_done(merge_request, user)
+    end
   end
 
-  # When a merge request could not be automatically merged due to its unmergeable state we should:
+  # When a merge request could not be merged due to its unmergeable state we should:
   #
-  #  * create a todo for a merge_user
+  #  * create a todo for each merge participant
   #
   def merge_request_became_unmergeable(merge_request)
-    create_unmergeable_todo(merge_request, merge_request.merge_user) if merge_request.merge_when_pipeline_succeeds?
+    merge_request.merge_participants.each do |user|
+      create_unmergeable_todo(merge_request, user)
+    end
   end
 
   # When create a note we should:
@@ -275,9 +277,9 @@ class TodoService
     create_todos(todo_author, attributes)
   end
 
-  def create_unmergeable_todo(merge_request, merge_user)
-    attributes = attributes_for_todo(merge_request.project, merge_request, merge_user, Todo::UNMERGEABLE)
-    create_todos(merge_user, attributes)
+  def create_unmergeable_todo(merge_request, todo_author)
+    attributes = attributes_for_todo(merge_request.project, merge_request, todo_author, Todo::UNMERGEABLE)
+    create_todos(todo_author, attributes)
   end
 
   def attributes_for_target(target)
diff --git a/app/services/users/migrate_to_ghost_user_service.rb b/app/services/users/migrate_to_ghost_user_service.rb
index 976017dfa82..a2833b1e051 100644
--- a/app/services/users/migrate_to_ghost_user_service.rb
+++ b/app/services/users/migrate_to_ghost_user_service.rb
@@ -49,7 +49,7 @@ module Users
       migrate_merge_requests
       migrate_notes
       migrate_abuse_reports
-      migrate_award_emojis
+      migrate_award_emoji
     end
 
     def migrate_issues
@@ -70,7 +70,7 @@ module Users
       user.reported_abuse_reports.update_all(reporter_id: ghost_user.id)
     end
 
-    def migrate_award_emojis
+    def migrate_award_emoji
       user.award_emoji.update_all(user_id: ghost_user.id)
     end
   end
diff --git a/app/services/users/respond_to_terms_service.rb b/app/services/users/respond_to_terms_service.rb
new file mode 100644
index 00000000000..06d660186cf
--- /dev/null
+++ b/app/services/users/respond_to_terms_service.rb
@@ -0,0 +1,24 @@
+module Users
+  class RespondToTermsService
+    def initialize(user, term)
+      @user, @term = user, term
+    end
+
+    def execute(accepted:)
+      agreement = @user.term_agreements.find_or_initialize_by(term: @term)
+      agreement.accepted = accepted
+
+      if agreement.save
+        store_accepted_term(accepted)
+      end
+
+      agreement
+    end
+
+    private
+
+    def store_accepted_term(accepted)
+      @user.update_column(:accepted_term_id, accepted ? @term.id : nil)
+    end
+  end
+end
diff --git a/app/services/validate_new_branch_service.rb b/app/services/validate_new_branch_service.rb
index 7d1ed768ee8..643f2ce1481 100644
--- a/app/services/validate_new_branch_service.rb
+++ b/app/services/validate_new_branch_service.rb
@@ -13,7 +13,7 @@ class ValidateNewBranchService < BaseService
     end
 
     success
-  rescue Gitlab::Git::HooksService::PreReceiveError => ex
+  rescue Gitlab::Git::PreReceiveError => ex
     error(ex.message)
   end
 end
diff --git a/app/services/verify_pages_domain_service.rb b/app/services/verify_pages_domain_service.rb
index 86166047302..13cb53dee01 100644
--- a/app/services/verify_pages_domain_service.rb
+++ b/app/services/verify_pages_domain_service.rb
@@ -34,7 +34,8 @@ class VerifyPagesDomainService < BaseService
     # Prevent any pre-existing grace period from being truncated
     reverify = [domain.enabled_until, VERIFICATION_PERIOD.from_now].compact.max
 
-    domain.update!(verified_at: Time.now, enabled_until: reverify)
+    domain.assign_attributes(verified_at: Time.now, enabled_until: reverify)
+    domain.save!(validate: false)
 
     if was_disabled
       notify(:enabled)
@@ -47,7 +48,9 @@ class VerifyPagesDomainService < BaseService
 
   def unverify_domain!
     if domain.verified?
-      domain.update!(verified_at: nil)
+      domain.assign_attributes(verified_at: nil)
+      domain.save!(validate: false)
+
       notify(:verification_failed)
     end
 
@@ -55,7 +58,8 @@ class VerifyPagesDomainService < BaseService
   end
 
   def disable_domain!
-    domain.update!(verified_at: nil, enabled_until: nil)
+    domain.assign_attributes(verified_at: nil, enabled_until: nil)
+    domain.save!(validate: false)
 
     notify(:disabled)
 
diff --git a/app/services/web_hook_service.rb b/app/services/web_hook_service.rb
index 809ce1303d8..8a86e47f0ea 100644
--- a/app/services/web_hook_service.rb
+++ b/app/services/web_hook_service.rb
@@ -41,7 +41,7 @@ class WebHookService
       http_status: response.code,
       message: response.to_s
     }
-  rescue SocketError, OpenSSL::SSL::SSLError, Errno::ECONNRESET, Errno::ECONNREFUSED, Errno::EHOSTUNREACH, Net::OpenTimeout, Net::ReadTimeout => e
+  rescue SocketError, OpenSSL::SSL::SSLError, Errno::ECONNRESET, Errno::ECONNREFUSED, Errno::EHOSTUNREACH, Net::OpenTimeout, Net::ReadTimeout, Gitlab::HTTP::BlockedUrlError => e
     log_execution(
       trigger: hook_name,
       url: hook.url,
@@ -82,7 +82,7 @@ class WebHookService
     post_url = hook.url.gsub("#{parsed_url.userinfo}@", '')
     basic_auth = {
       username: CGI.unescape(parsed_url.user),
-      password: CGI.unescape(parsed_url.password)
+      password: CGI.unescape(parsed_url.password.presence || '')
     }
     make_request(post_url, basic_auth)
   end
diff --git a/app/uploaders/attachment_uploader.rb b/app/uploaders/attachment_uploader.rb
index 4930fb2fca7..cd819dc9bff 100644
--- a/app/uploaders/attachment_uploader.rb
+++ b/app/uploaders/attachment_uploader.rb
@@ -1,8 +1,8 @@
 class AttachmentUploader < GitlabUploader
-  include UploaderHelper
   include RecordsUploads::Concern
-
-  storage :file
+  include ObjectStorage::Concern
+  prepend ObjectStorage::Extension::RecordsUploads
+  include UploaderHelper
 
   private
 
diff --git a/app/uploaders/avatar_uploader.rb b/app/uploaders/avatar_uploader.rb
index 5c8e1cea62e..5848e6c6994 100644
--- a/app/uploaders/avatar_uploader.rb
+++ b/app/uploaders/avatar_uploader.rb
@@ -1,18 +1,18 @@
 class AvatarUploader < GitlabUploader
   include UploaderHelper
   include RecordsUploads::Concern
-
-  storage :file
+  include ObjectStorage::Concern
+  prepend ObjectStorage::Extension::RecordsUploads
 
   def exists?
     model.avatar.file && model.avatar.file.present?
   end
 
-  def move_to_cache
+  def move_to_store
     false
   end
 
-  def move_to_store
+  def move_to_cache
     false
   end
 
diff --git a/app/uploaders/favicon_uploader.rb b/app/uploaders/favicon_uploader.rb
new file mode 100644
index 00000000000..3639375d474
--- /dev/null
+++ b/app/uploaders/favicon_uploader.rb
@@ -0,0 +1,13 @@
+class FaviconUploader < AttachmentUploader
+  EXTENSION_WHITELIST = %w[png ico].freeze
+
+  def extension_whitelist
+    EXTENSION_WHITELIST
+  end
+
+  private
+
+  def filename_for_different_format(filename, format)
+    filename.chomp(File.extname(filename)) + ".#{format}"
+  end
+end
diff --git a/app/uploaders/file_mover.rb b/app/uploaders/file_mover.rb
index 8f56f09c9f7..bd7736ad74e 100644
--- a/app/uploaders/file_mover.rb
+++ b/app/uploaders/file_mover.rb
@@ -10,7 +10,11 @@ class FileMover
 
   def execute
     move
-    uploader.record_upload if update_markdown
+
+    if update_markdown
+      uploader.record_upload
+      uploader.schedule_background_upload
+    end
   end
 
   private
@@ -24,11 +28,8 @@ class FileMover
     updated_text = model.read_attribute(update_field)
                         .gsub(temp_file_uploader.markdown_link, uploader.markdown_link)
     model.update_attribute(update_field, updated_text)
-
-    true
   rescue
     revert
-
     false
   end
 
diff --git a/app/uploaders/file_uploader.rb b/app/uploaders/file_uploader.rb
index bde1161dfa8..36bc0a4575a 100644
--- a/app/uploaders/file_uploader.rb
+++ b/app/uploaders/file_uploader.rb
@@ -9,14 +9,18 @@
 class FileUploader < GitlabUploader
   include UploaderHelper
   include RecordsUploads::Concern
+  include ObjectStorage::Concern
+  prepend ObjectStorage::Extension::RecordsUploads
 
   MARKDOWN_PATTERN = %r{\!?\[.*?\]\(/uploads/(?<secret>[0-9a-f]{32})/(?<file>.*?)\)}
   DYNAMIC_PATH_PATTERN = %r{(?<secret>\h{32})/(?<identifier>.*)}
 
-  storage :file
-
   after :remove, :prune_store_dir
 
+  # FileUploader do not run in a model transaction, so we can simply
+  # enqueue a job after the :store hook.
+  after :store, :schedule_background_upload
+
   def self.root
     File.join(options.storage_path, 'uploads')
   end
@@ -28,8 +32,11 @@ class FileUploader < GitlabUploader
     )
   end
 
-  def self.base_dir(model)
-    model_path_segment(model)
+  def self.base_dir(model, store = Store::LOCAL)
+    decorated_model = model
+    decorated_model = Storage::HashedProject.new(model) if store == Store::REMOTE
+
+    model_path_segment(decorated_model)
   end
 
   # used in migrations and import/exports
@@ -47,21 +54,24 @@ class FileUploader < GitlabUploader
   #
   # Returns a String without a trailing slash
   def self.model_path_segment(model)
-    if model.hashed_storage?(:attachments)
-      model.disk_path
+    case model
+    when Storage::HashedProject then model.disk_path
     else
-      model.full_path
+      model.hashed_storage?(:attachments) ? model.disk_path : model.full_path
     end
   end
 
-  def self.upload_path(secret, identifier)
-    File.join(secret, identifier)
-  end
-
   def self.generate_secret
     SecureRandom.hex
   end
 
+  def upload_paths(identifier)
+    [
+      File.join(secret, identifier),
+      File.join(base_dir(Store::REMOTE), secret, identifier)
+    ]
+  end
+
   attr_accessor :model
 
   def initialize(model, mounted_as = nil, **uploader_context)
@@ -71,8 +81,10 @@ class FileUploader < GitlabUploader
     apply_context!(uploader_context)
   end
 
-  def base_dir
-    self.class.base_dir(@model)
+  # enforce the usage of Hashed storage when storing to
+  # remote store as the FileMover doesn't support OS
+  def base_dir(store = nil)
+    self.class.base_dir(@model, store || object_store)
   end
 
   # we don't need to know the actual path, an uploader instance should be
@@ -82,15 +94,19 @@ class FileUploader < GitlabUploader
   end
 
   def upload_path
-    self.class.upload_path(dynamic_segment, identifier)
-  end
-
-  def model_path_segment
-    self.class.model_path_segment(@model)
+    if file_storage?
+      # Legacy path relative to project.full_path
+      File.join(dynamic_segment, identifier)
+    else
+      File.join(store_dir, identifier)
+    end
   end
 
-  def store_dir
-    File.join(base_dir, dynamic_segment)
+  def store_dirs
+    {
+      Store::LOCAL => File.join(base_dir, dynamic_segment),
+      Store::REMOTE => File.join(base_dir(ObjectStorage::Store::REMOTE), dynamic_segment)
+    }
   end
 
   def markdown_link
diff --git a/app/uploaders/gitlab_uploader.rb b/app/uploaders/gitlab_uploader.rb
index 010100f2da1..f8a237178d9 100644
--- a/app/uploaders/gitlab_uploader.rb
+++ b/app/uploaders/gitlab_uploader.rb
@@ -37,12 +37,10 @@ class GitlabUploader < CarrierWave::Uploader::Base
     cache_storage.is_a?(CarrierWave::Storage::File)
   end
 
-  # Reduce disk IO
   def move_to_cache
     file_storage?
   end
 
-  # Reduce disk IO
   def move_to_store
     file_storage?
   end
@@ -51,10 +49,6 @@ class GitlabUploader < CarrierWave::Uploader::Base
     file.present?
   end
 
-  def store_dir
-    File.join(base_dir, dynamic_segment)
-  end
-
   def cache_dir
     File.join(root, base_dir, 'tmp/cache')
   end
@@ -71,11 +65,19 @@ class GitlabUploader < CarrierWave::Uploader::Base
     !!model
   end
 
+  def local_url
+    File.join('/', self.class.base_dir, dynamic_segment, filename)
+  end
+
   private
 
   # Designed to be overridden by child uploaders that have a dynamic path
   # segment -- that is, a path that changes based on mutable attributes of its
   # associated model
+  #
+  # For example, `FileUploader` builds the storage path based on the associated
+  # project model's `path_with_namespace` value, which can change when the
+  # project or its containing namespace is moved or renamed.
   def dynamic_segment
     raise(NotImplementedError)
   end
diff --git a/app/uploaders/job_artifact_uploader.rb b/app/uploaders/job_artifact_uploader.rb
index ad5385f45a4..2a5a830ce4f 100644
--- a/app/uploaders/job_artifact_uploader.rb
+++ b/app/uploaders/job_artifact_uploader.rb
@@ -1,12 +1,15 @@
 class JobArtifactUploader < GitlabUploader
   extend Workhorse::UploadPath
+  include ObjectStorage::Concern
+
+  ObjectNotReadyError = Class.new(StandardError)
 
   storage_options Gitlab.config.artifacts
 
-  def size
-    return super if model.size.nil?
+  def cached_size
+    return model.size if model.size.present? && !model.file_changed?
 
-    model.size
+    size
   end
 
   def store_dir
@@ -14,14 +17,18 @@ class JobArtifactUploader < GitlabUploader
   end
 
   def open
-    raise 'Only File System is supported' unless file_storage?
-
-    File.open(path, "rb") if path
+    if file_storage?
+      File.open(path, "rb") if path
+    else
+      ::Gitlab::Ci::Trace::HttpIO.new(url, cached_size) if url
+    end
   end
 
   private
 
   def dynamic_segment
+    raise ObjectNotReadyError, 'JobArtifact is not ready' unless model.id
+
     creation_date = model.created_at.utc.strftime('%Y_%m_%d')
 
     File.join(disk_hash[0..1], disk_hash[2..3], disk_hash,
diff --git a/app/uploaders/legacy_artifact_uploader.rb b/app/uploaders/legacy_artifact_uploader.rb
index 28c458d3ff1..efb7893d153 100644
--- a/app/uploaders/legacy_artifact_uploader.rb
+++ b/app/uploaders/legacy_artifact_uploader.rb
@@ -1,5 +1,8 @@
 class LegacyArtifactUploader < GitlabUploader
   extend Workhorse::UploadPath
+  include ObjectStorage::Concern
+
+  ObjectNotReadyError = Class.new(StandardError)
 
   storage_options Gitlab.config.artifacts
 
@@ -10,6 +13,8 @@ class LegacyArtifactUploader < GitlabUploader
   private
 
   def dynamic_segment
+    raise ObjectNotReadyError, 'Build is not ready' unless model.id
+
     File.join(model.created_at.utc.strftime('%Y_%m'), model.project_id.to_s, model.id.to_s)
   end
 end
diff --git a/app/uploaders/lfs_object_uploader.rb b/app/uploaders/lfs_object_uploader.rb
index e04c97ce179..eb521a22ebc 100644
--- a/app/uploaders/lfs_object_uploader.rb
+++ b/app/uploaders/lfs_object_uploader.rb
@@ -1,10 +1,6 @@
 class LfsObjectUploader < GitlabUploader
   extend Workhorse::UploadPath
-
-  # LfsObject are in `tmp/upload` instead of `tmp/uploads`
-  def self.workhorse_upload_path
-    File.join(root, 'tmp/upload')
-  end
+  include ObjectStorage::Concern
 
   storage_options Gitlab.config.lfs
 
diff --git a/app/uploaders/namespace_file_uploader.rb b/app/uploaders/namespace_file_uploader.rb
index 993e85fbc13..1085ecb1700 100644
--- a/app/uploaders/namespace_file_uploader.rb
+++ b/app/uploaders/namespace_file_uploader.rb
@@ -4,7 +4,7 @@ class NamespaceFileUploader < FileUploader
     options.storage_path
   end
 
-  def self.base_dir(model)
+  def self.base_dir(model, _store = nil)
     File.join(options.base_dir, 'namespace', model_path_segment(model))
   end
 
@@ -14,6 +14,13 @@ class NamespaceFileUploader < FileUploader
 
   # Re-Override
   def store_dir
-    File.join(base_dir, dynamic_segment)
+    store_dirs[object_store]
+  end
+
+  def store_dirs
+    {
+      Store::LOCAL => File.join(base_dir, dynamic_segment),
+      Store::REMOTE => File.join('namespace', self.class.model_path_segment(model), dynamic_segment)
+    }
   end
 end
diff --git a/app/uploaders/object_storage.rb b/app/uploaders/object_storage.rb
new file mode 100644
index 00000000000..b8ecfc4ee2b
--- /dev/null
+++ b/app/uploaders/object_storage.rb
@@ -0,0 +1,456 @@
+require 'fog/aws'
+require 'carrierwave/storage/fog'
+
+#
+# This concern should add object storage support
+# to the GitlabUploader class
+#
+module ObjectStorage
+  RemoteStoreError = Class.new(StandardError)
+  UnknownStoreError = Class.new(StandardError)
+  ObjectStorageUnavailable = Class.new(StandardError)
+
+  class ExclusiveLeaseTaken < StandardError
+    def initialize(lease_key)
+      @lease_key = lease_key
+    end
+
+    def message
+      *lease_key_group, _ = *@lease_key.split(":")
+      "Exclusive lease for #{lease_key_group.join(':')} is already taken."
+    end
+  end
+
+  TMP_UPLOAD_PATH = 'tmp/uploads'.freeze
+
+  module Store
+    LOCAL = 1
+    REMOTE = 2
+  end
+
+  module Extension
+    # this extension is the glue between the ObjectStorage::Concern and RecordsUploads::Concern
+    module RecordsUploads
+      extend ActiveSupport::Concern
+
+      prepended do |base|
+        raise "#{base} must include ObjectStorage::Concern to use extensions." unless base < Concern
+
+        base.include(::RecordsUploads::Concern)
+      end
+
+      def retrieve_from_store!(identifier)
+        paths = upload_paths(identifier)
+
+        unless current_upload_satisfies?(paths, model)
+          # the upload we already have isn't right, find the correct one
+          self.upload = model&.retrieve_upload(identifier, paths)
+        end
+
+        super
+      end
+
+      def build_upload
+        super.tap do |upload|
+          upload.store = object_store
+        end
+      end
+
+      def upload=(upload)
+        return if upload.nil?
+
+        self.object_store = upload.store
+        super
+      end
+
+      def schedule_background_upload(*args)
+        return unless schedule_background_upload?
+        return unless upload
+
+        ObjectStorage::BackgroundMoveWorker.perform_async(self.class.name,
+                                                upload.class.to_s,
+                                                mounted_as,
+                                                upload.id)
+      end
+
+      def exclusive_lease_key
+        # For FileUploaders, model may have many uploaders. In that case
+        # we want to use exclusive key per upload, not per model to allow
+        # parallel migration
+        key_object = upload || model
+
+        "object_storage_migrate:#{key_object.class}:#{key_object.id}"
+      end
+
+      private
+
+      def current_upload_satisfies?(paths, model)
+        return false unless upload
+        return false unless model
+
+        paths.include?(upload.path) &&
+          upload.model_id == model.id &&
+          upload.model_type == model.class.base_class.sti_name
+      end
+    end
+  end
+
+  # Add support for automatic background uploading after the file is stored.
+  #
+  module BackgroundMove
+    extend ActiveSupport::Concern
+
+    def background_upload(mount_points = [])
+      return unless mount_points.any?
+
+      run_after_commit do
+        mount_points.each { |mount| send(mount).schedule_background_upload } # rubocop:disable GitlabSecurity/PublicSend
+      end
+    end
+
+    def changed_mounts
+      self.class.uploaders.select do |mount, uploader_class|
+        mounted_as = uploader_class.serialization_column(self.class, mount)
+        uploader = send(:"#{mounted_as}") # rubocop:disable GitlabSecurity/PublicSend
+
+        next unless uploader
+        next unless uploader.exists?
+        next unless send(:"#{mounted_as}_changed?") # rubocop:disable GitlabSecurity/PublicSend
+
+        mount
+      end.keys
+    end
+
+    included do
+      include AfterCommitQueue
+      after_save on: [:create, :update] do
+        background_upload(changed_mounts)
+      end
+    end
+  end
+
+  module Concern
+    extend ActiveSupport::Concern
+
+    included do |base|
+      base.include(ObjectStorage)
+
+      after :migrate, :delete_migrated_file
+    end
+
+    class_methods do
+      def object_store_options
+        options.object_store
+      end
+
+      def object_store_enabled?
+        object_store_options.enabled
+      end
+
+      def direct_upload_enabled?
+        object_store_options&.direct_upload
+      end
+
+      def background_upload_enabled?
+        object_store_options.background_upload
+      end
+
+      def proxy_download_enabled?
+        object_store_options.proxy_download
+      end
+
+      def direct_download_enabled?
+        !proxy_download_enabled?
+      end
+
+      def object_store_credentials
+        object_store_options.connection.to_hash.deep_symbolize_keys
+      end
+
+      def remote_store_path
+        object_store_options.remote_directory
+      end
+
+      def serialization_column(model_class, mount_point)
+        model_class.uploader_options.dig(mount_point, :mount_on) || mount_point
+      end
+
+      def workhorse_authorize(has_length:, maximum_size: nil)
+        {
+          RemoteObject: workhorse_remote_upload_options(has_length: has_length, maximum_size: maximum_size),
+          TempPath: workhorse_local_upload_path
+        }.compact
+      end
+
+      def workhorse_local_upload_path
+        File.join(self.root, TMP_UPLOAD_PATH)
+      end
+
+      def workhorse_remote_upload_options(has_length:, maximum_size: nil)
+        return unless self.object_store_enabled?
+        return unless self.direct_upload_enabled?
+
+        id = [CarrierWave.generate_cache_id, SecureRandom.hex].join('-')
+        upload_path = File.join(TMP_UPLOAD_PATH, id)
+        direct_upload = ObjectStorage::DirectUpload.new(self.object_store_credentials, remote_store_path, upload_path,
+          has_length: has_length, maximum_size: maximum_size)
+
+        direct_upload.to_hash.merge(ID: id)
+      end
+    end
+
+    # allow to configure and overwrite the filename
+    def filename
+      @filename || super || file&.filename # rubocop:disable Gitlab/ModuleWithInstanceVariables
+    end
+
+    def filename=(filename)
+      @filename = filename # rubocop:disable Gitlab/ModuleWithInstanceVariables
+    end
+
+    def file_storage?
+      storage.is_a?(CarrierWave::Storage::File)
+    end
+
+    def file_cache_storage?
+      cache_storage.is_a?(CarrierWave::Storage::File)
+    end
+
+    def object_store
+      # We use Store::LOCAL as null value indicates the local storage
+      @object_store ||= model.try(store_serialization_column) || Store::LOCAL
+    end
+
+    # rubocop:disable Gitlab/ModuleWithInstanceVariables
+    def object_store=(value)
+      @object_store = value || Store::LOCAL
+      @storage = storage_for(object_store)
+    end
+    # rubocop:enable Gitlab/ModuleWithInstanceVariables
+
+    # Return true if the current file is part or the model (i.e. is mounted in the model)
+    #
+    def persist_object_store?
+      model.respond_to?(:"#{store_serialization_column}=")
+    end
+
+    # Save the current @object_store to the model <mounted_as>_store column
+    def persist_object_store!
+      return unless persist_object_store?
+
+      updated = model.update_column(store_serialization_column, object_store)
+      raise 'Failed to update object store' unless updated
+    end
+
+    def use_file(&blk)
+      with_exclusive_lease do
+        unsafe_use_file(&blk)
+      end
+    end
+
+    #
+    # Move the file to another store
+    #
+    #   new_store: Enum (Store::LOCAL, Store::REMOTE)
+    #
+    def migrate!(new_store)
+      with_exclusive_lease do
+        unsafe_migrate!(new_store)
+      end
+    end
+
+    def schedule_background_upload(*args)
+      return unless schedule_background_upload?
+
+      ObjectStorage::BackgroundMoveWorker.perform_async(self.class.name,
+                                                          model.class.name,
+                                                          mounted_as,
+                                                          model.id)
+    end
+
+    def fog_directory
+      self.class.remote_store_path
+    end
+
+    def fog_credentials
+      self.class.object_store_credentials
+    end
+
+    def fog_public
+      false
+    end
+
+    def delete_migrated_file(migrated_file)
+      migrated_file.delete
+    end
+
+    def exists?
+      file.present?
+    end
+
+    def store_dir(store = nil)
+      store_dirs[store || object_store]
+    end
+
+    def store_dirs
+      {
+        Store::LOCAL => File.join(base_dir, dynamic_segment),
+        Store::REMOTE => File.join(dynamic_segment)
+      }
+    end
+
+    # Returns all the possible paths for an upload.
+    # the `upload.path` is a lookup parameter, and it may change
+    # depending on the `store` param.
+    def upload_paths(identifier)
+      store_dirs.map { |store, path| File.join(path, identifier) }
+    end
+
+    def cache!(new_file = sanitized_file)
+      # We intercept ::UploadedFile which might be stored on remote storage
+      # We use that for "accelerated" uploads, where we store result on remote storage
+      if new_file.is_a?(::UploadedFile) && new_file.remote_id
+        return cache_remote_file!(new_file.remote_id, new_file.original_filename)
+      end
+
+      super
+    end
+
+    def store!(new_file = nil)
+      # when direct upload is enabled, always store on remote storage
+      if self.class.object_store_enabled? && self.class.direct_upload_enabled?
+        self.object_store = Store::REMOTE
+      end
+
+      super
+    end
+
+    def exclusive_lease_key
+      "object_storage_migrate:#{model.class}:#{model.id}"
+    end
+
+    private
+
+    def schedule_background_upload?
+      self.class.object_store_enabled? &&
+        self.class.background_upload_enabled? &&
+        self.file_storage?
+    end
+
+    def cache_remote_file!(remote_object_id, original_filename)
+      file_path = File.join(TMP_UPLOAD_PATH, remote_object_id)
+      file_path = Pathname.new(file_path).cleanpath.to_s
+      raise RemoteStoreError, 'Bad file path' unless file_path.start_with?(TMP_UPLOAD_PATH + '/')
+
+      # TODO:
+      # This should be changed to make use of `tmp/cache` mechanism
+      # instead of using custom upload directory,
+      # using tmp/cache makes this implementation way easier than it is today
+      CarrierWave::Storage::Fog::File.new(self, storage_for(Store::REMOTE), file_path).tap do |file|
+        raise RemoteStoreError, 'Missing file' unless file.exists?
+
+        # Remote stored file, we force to store on remote storage
+        self.object_store = Store::REMOTE
+
+        # TODO:
+        # We store file internally and force it to be considered as `cached`
+        # This makes CarrierWave to store file in permament location (copy/delete)
+        # once this object is saved, but not sooner
+        @cache_id = "force-to-use-cache" # rubocop:disable Gitlab/ModuleWithInstanceVariables
+        @file = file # rubocop:disable Gitlab/ModuleWithInstanceVariables
+        @filename = original_filename # rubocop:disable Gitlab/ModuleWithInstanceVariables
+      end
+    end
+
+    # this is a hack around CarrierWave. The #migrate method needs to be
+    # able to force the current file to the migrated file upon success.
+    def file=(file)
+      @file = file # rubocop:disable Gitlab/ModuleWithInstanceVariables
+    end
+
+    def serialization_column
+      self.class.serialization_column(model.class, mounted_as)
+    end
+
+    # Returns the column where the 'store' is saved
+    #   defaults to 'store'
+    def store_serialization_column
+      [serialization_column, 'store'].compact.join('_').to_sym
+    end
+
+    def storage
+      @storage ||= storage_for(object_store)
+    end
+
+    def storage_for(store)
+      case store
+      when Store::REMOTE
+        raise 'Object Storage is not enabled' unless self.class.object_store_enabled?
+
+        CarrierWave::Storage::Fog.new(self)
+      when Store::LOCAL
+        CarrierWave::Storage::File.new(self)
+      else
+        raise UnknownStoreError
+      end
+    end
+
+    def with_exclusive_lease
+      lease_key = exclusive_lease_key
+      uuid = Gitlab::ExclusiveLease.new(lease_key, timeout: 1.hour.to_i).try_obtain
+      raise ExclusiveLeaseTaken.new(lease_key) unless uuid
+
+      yield uuid
+    ensure
+      Gitlab::ExclusiveLease.cancel(lease_key, uuid)
+    end
+
+    #
+    # Move the file to another store
+    #
+    #   new_store: Enum (Store::LOCAL, Store::REMOTE)
+    #
+    def unsafe_migrate!(new_store)
+      return unless object_store != new_store
+      return unless file
+
+      new_file = nil
+      file_to_delete = file
+      from_object_store = object_store
+      self.object_store = new_store # changes the storage and file
+
+      cache_stored_file! if file_storage?
+
+      with_callbacks(:migrate, file_to_delete) do
+        with_callbacks(:store, file_to_delete) do # for #store_versions!
+          new_file = storage.store!(file)
+          persist_object_store!
+          self.file = new_file
+        end
+      end
+
+      file
+    rescue => e
+      # in case of failure delete new file
+      new_file.delete unless new_file.nil?
+      # revert back to the old file
+      self.object_store = from_object_store
+      self.file = file_to_delete
+      raise e
+    end
+  end
+
+  def unsafe_use_file
+    if file_storage?
+      return yield path
+    end
+
+    begin
+      cache_stored_file!
+      yield cache_path
+    ensure
+      FileUtils.rm_f(cache_path)
+      cache_storage.delete_dir!(cache_path(nil))
+    end
+  end
+end
diff --git a/app/uploaders/personal_file_uploader.rb b/app/uploaders/personal_file_uploader.rb
index f2ad0badd53..e3898b07730 100644
--- a/app/uploaders/personal_file_uploader.rb
+++ b/app/uploaders/personal_file_uploader.rb
@@ -4,7 +4,7 @@ class PersonalFileUploader < FileUploader
     options.storage_path
   end
 
-  def self.base_dir(model)
+  def self.base_dir(model, _store = nil)
     File.join(options.base_dir, model_path_segment(model))
   end
 
@@ -14,6 +14,12 @@ class PersonalFileUploader < FileUploader
     File.join(model.class.to_s.underscore, model.id.to_s)
   end
 
+  def object_store
+    return Store::LOCAL unless model
+
+    super
+  end
+
   # model_path_segment does not require a model to be passed, so we can always
   # generate a path, even when there's no model.
   def model_valid?
@@ -22,7 +28,14 @@ class PersonalFileUploader < FileUploader
 
   # Revert-Override
   def store_dir
-    File.join(base_dir, dynamic_segment)
+    store_dirs[object_store]
+  end
+
+  def store_dirs
+    {
+      Store::LOCAL => File.join(base_dir, dynamic_segment),
+      Store::REMOTE => File.join(self.class.model_path_segment(model), dynamic_segment)
+    }
   end
 
   private
diff --git a/app/uploaders/records_uploads.rb b/app/uploaders/records_uploads.rb
index 458928bc067..301f4681fcd 100644
--- a/app/uploaders/records_uploads.rb
+++ b/app/uploaders/records_uploads.rb
@@ -22,10 +22,9 @@ module RecordsUploads
 
       Upload.transaction do
         uploads.where(path: upload_path).delete_all
-        upload.destroy! if upload
+        upload.delete if upload
 
-        self.upload = build_upload
-        upload.save!
+        self.upload = build_upload.tap(&:save!)
       end
     end
 
diff --git a/app/uploaders/uploader_helper.rb b/app/uploaders/uploader_helper.rb
index fd446d31092..207928b61d0 100644
--- a/app/uploaders/uploader_helper.rb
+++ b/app/uploaders/uploader_helper.rb
@@ -1,6 +1,6 @@
 # Extra methods for uploader
 module UploaderHelper
-  IMAGE_EXT = %w[png jpg jpeg gif bmp tiff].freeze
+  IMAGE_EXT = %w[png jpg jpeg gif bmp tiff ico].freeze
   # We recommend using the .mp4 format over .mov. Videos in .mov format can
   # still be used but you really need to make sure they are served with the
   # proper MIME type video/mp4 and not video/quicktime or your videos won't play
diff --git a/app/validators/addressable_url_validator.rb b/app/validators/addressable_url_validator.rb
deleted file mode 100644
index 94542125d43..00000000000
--- a/app/validators/addressable_url_validator.rb
+++ /dev/null
@@ -1,45 +0,0 @@
-# AddressableUrlValidator
-#
-# Custom validator for URLs. This is a stricter version of UrlValidator - it also checks
-# for using the right protocol, but it actually parses the URL checking for any syntax errors.
-# The regex is also different from `URI` as we use `Addressable::URI` here.
-#
-# By default, only URLs for http, https, ssh, and git protocols will be considered valid.
-# Provide a `:protocols` option to configure accepted protocols.
-#
-# Example:
-#
-#   class User < ActiveRecord::Base
-#     validates :personal_url, addressable_url: true
-#
-#     validates :ftp_url, addressable_url: { protocols: %w(ftp) }
-#
-#     validates :git_url, addressable_url: { protocols: %w(http https ssh git) }
-#   end
-#
-class AddressableUrlValidator < ActiveModel::EachValidator
-  DEFAULT_OPTIONS = { protocols: %w(http https ssh git) }.freeze
-
-  def validate_each(record, attribute, value)
-    unless valid_url?(value)
-      record.errors.add(attribute, "must be a valid URL")
-    end
-  end
-
-  private
-
-  def valid_url?(value)
-    return false unless value
-
-    valid_protocol?(value) && valid_uri?(value)
-  end
-
-  def valid_uri?(value)
-    Gitlab::UrlSanitizer.valid?(value)
-  end
-
-  def valid_protocol?(value)
-    options = DEFAULT_OPTIONS.merge(self.options)
-    value =~ /\A#{URI.regexp(options[:protocols])}\z/
-  end
-end
diff --git a/app/validators/certificate_fingerprint_validator.rb b/app/validators/certificate_fingerprint_validator.rb
new file mode 100644
index 00000000000..17df756183a
--- /dev/null
+++ b/app/validators/certificate_fingerprint_validator.rb
@@ -0,0 +1,9 @@
+class CertificateFingerprintValidator < ActiveModel::EachValidator
+  FINGERPRINT_PATTERN = /\A([a-zA-Z0-9]{2}[\s\-:]?){16,}\z/.freeze
+
+  def validate_each(record, attribute, value)
+    unless value.try(:match, FINGERPRINT_PATTERN)
+      record.errors.add(attribute, "must be a hash containing only letters, numbers, spaces, : and -")
+    end
+  end
+end
diff --git a/app/validators/certificate_validator.rb b/app/validators/certificate_validator.rb
index 5239e70a326..b0c9a1b92a4 100644
--- a/app/validators/certificate_validator.rb
+++ b/app/validators/certificate_validator.rb
@@ -16,8 +16,6 @@ class CertificateValidator < ActiveModel::EachValidator
   private
 
   def valid_certificate_pem?(value)
-    return false unless value
-
     OpenSSL::X509::Certificate.new(value).present?
   rescue OpenSSL::X509::CertificateError
     false
diff --git a/app/validators/importable_url_validator.rb b/app/validators/importable_url_validator.rb
deleted file mode 100644
index 3ec1594e202..00000000000
--- a/app/validators/importable_url_validator.rb
+++ /dev/null
@@ -1,11 +0,0 @@
-# ImportableUrlValidator
-#
-# This validator blocks projects from using dangerous import_urls to help
-# protect against Server-side Request Forgery (SSRF).
-class ImportableUrlValidator < ActiveModel::EachValidator
-  def validate_each(record, attribute, value)
-    if Gitlab::UrlBlocker.blocked_url?(value, valid_ports: Project::VALID_IMPORT_PORTS)
-      record.errors.add(attribute, "imports are not allowed from that URL")
-    end
-  end
-end
diff --git a/app/validators/public_url_validator.rb b/app/validators/public_url_validator.rb
new file mode 100644
index 00000000000..1e8118fccbb
--- /dev/null
+++ b/app/validators/public_url_validator.rb
@@ -0,0 +1,26 @@
+# PublicUrlValidator
+#
+# Custom validator for URLs. This validator works like UrlValidator but
+# it blocks by default urls pointing to localhost or the local network.
+#
+# This validator accepts the same params UrlValidator does.
+#
+# Example:
+#
+#   class User < ActiveRecord::Base
+#     validates :personal_url, public_url: true
+#
+#     validates :ftp_url, public_url: { protocols: %w(ftp) }
+#
+#     validates :git_url, public_url: { allow_localhost: true, allow_local_network: true}
+#   end
+#
+class PublicUrlValidator < UrlValidator
+  private
+
+  def default_options
+    # By default block all urls pointing to localhost or the local network
+    super.merge(allow_localhost: false,
+                allow_local_network: false)
+  end
+end
diff --git a/app/validators/top_level_group_validator.rb b/app/validators/top_level_group_validator.rb
new file mode 100644
index 00000000000..7e2e735e0cf
--- /dev/null
+++ b/app/validators/top_level_group_validator.rb
@@ -0,0 +1,7 @@
+class TopLevelGroupValidator < ActiveModel::EachValidator
+  def validate_each(record, attribute, value)
+    if value&.subgroup?
+      record.errors.add(attribute, "must be a top level Group")
+    end
+  end
+end
diff --git a/app/validators/url_placeholder_validator.rb b/app/validators/url_placeholder_validator.rb
deleted file mode 100644
index dd681218b6b..00000000000
--- a/app/validators/url_placeholder_validator.rb
+++ /dev/null
@@ -1,32 +0,0 @@
-# UrlValidator
-#
-# Custom validator for URLs.
-#
-# By default, only URLs for the HTTP(S) protocols will be considered valid.
-# Provide a `:protocols` option to configure accepted protocols.
-#
-# Also, this validator can help you validate urls with placeholders inside.
-# Usually, if you have a url like 'http://www.example.com/%{project_path}' the
-# URI parser will reject that URL format. Provide a `:placeholder_regex` option
-# to configure accepted placeholders.
-#
-# Example:
-#
-#   class User < ActiveRecord::Base
-#     validates :personal_url, url: true
-#
-#     validates :ftp_url, url: { protocols: %w(ftp) }
-#
-#     validates :git_url, url: { protocols: %w(http https ssh git) }
-#
-#     validates :placeholder_url, url: { placeholder_regex: /(project_path|project_id|default_branch)/ }
-#   end
-#
-class UrlPlaceholderValidator < UrlValidator
-  def validate_each(record, attribute, value)
-    placeholder_regex = self.options[:placeholder_regex]
-    value = value.gsub(/%{#{placeholder_regex}}/, 'foo') if placeholder_regex && value
-
-    super(record, attribute, value)
-  end
-end
diff --git a/app/validators/url_validator.rb b/app/validators/url_validator.rb
index a77beb2683d..6854fec582e 100644
--- a/app/validators/url_validator.rb
+++ b/app/validators/url_validator.rb
@@ -15,25 +15,71 @@
 #     validates :git_url, url: { protocols: %w(http https ssh git) }
 #   end
 #
+# This validator can also block urls pointing to localhost or the local network to
+# protect against Server-side Request Forgery (SSRF), or check for the right port.
+#
+# The available options are:
+# - protocols: Allowed protocols. Default: http and https
+# - allow_localhost: Allow urls pointing to localhost. Default: true
+# - allow_local_network: Allow urls pointing to private network addresses. Default: true
+# - ports: Allowed ports. Default: all.
+# - enforce_user: Validate user format. Default: false
+#
+# Example:
+#   class User < ActiveRecord::Base
+#     validates :personal_url, url: { allow_localhost: false, allow_local_network: false}
+#
+#     validates :web_url, url: { ports: [80, 443] }
+#   end
 class UrlValidator < ActiveModel::EachValidator
+  DEFAULT_PROTOCOLS = %w(http https).freeze
+
+  attr_reader :record
+
   def validate_each(record, attribute, value)
-    unless valid_url?(value)
-      record.errors.add(attribute, "must be a valid URL")
+    @record = record
+
+    if value.present?
+      value.strip!
+    else
+      record.errors.add(attribute, 'must be a valid URL')
     end
+
+    Gitlab::UrlBlocker.validate!(value, blocker_args)
+  rescue Gitlab::UrlBlocker::BlockedUrlError => e
+    record.errors.add(attribute, "is blocked: #{e.message}")
   end
 
   private
 
   def default_options
-    @default_options ||= { protocols: %w(http https) }
+    # By default the validator doesn't block any url based on the ip address
+    {
+      protocols: DEFAULT_PROTOCOLS,
+      ports: [],
+      allow_localhost: true,
+      allow_local_network: true,
+      enforce_user: false
+    }
   end
 
-  def valid_url?(value)
-    return false if value.nil?
+  def current_options
+    options = self.options.map do |option, value|
+      [option, value.is_a?(Proc) ? value.call(record) : value]
+    end.to_h
 
-    options = default_options.merge(self.options)
+    default_options.merge(options)
+  end
+
+  def blocker_args
+    current_options.slice(*default_options.keys).tap do |args|
+      if allow_setting_local_requests?
+        args[:allow_localhost] = args[:allow_local_network] = true
+      end
+    end
+  end
 
-    value.strip!
-    value =~ /\A#{URI.regexp(options[:protocols])}\z/
+  def allow_setting_local_requests?
+    ApplicationSetting.current&.allow_local_requests_from_hooks_and_services?
   end
 end
diff --git a/app/views/abuse_report_mailer/notify.html.haml b/app/views/abuse_report_mailer/notify.html.haml
index d50b4071745..5abb0dc9182 100644
--- a/app/views/abuse_report_mailer/notify.html.haml
+++ b/app/views/abuse_report_mailer/notify.html.haml
@@ -4,7 +4,7 @@
   #{link_to @abuse_report.reporter.name, user_url(@abuse_report.reporter)}
   (@#{@abuse_report.reporter.username}).
 
-%blockquote
+.blockquote
   = @abuse_report.message
 
 %p
diff --git a/app/views/abuse_reports/new.html.haml b/app/views/abuse_reports/new.html.haml
index 06be1a53318..278ad210543 100644
--- a/app/views/abuse_reports/new.html.haml
+++ b/app/views/abuse_reports/new.html.haml
@@ -2,20 +2,20 @@
 %h3.page-title Report abuse
 %p Please use this form to report users who create spam issues, comments or behave inappropriately.
 %hr
-= form_for @abuse_report, html: { class: 'form-horizontal js-quick-submit js-requires-input'} do |f|
+= form_for @abuse_report, html: { class: 'js-quick-submit js-requires-input'} do |f|
   = form_errors(@abuse_report)
 
   = f.hidden_field :user_id
-  .form-group
-    = f.label :user_id, class: 'control-label'
+  .form-group.row
+    = f.label :user_id, class: 'col-sm-2 col-form-label'
     .col-sm-10
       - name = "#{@abuse_report.user.name} (@#{@abuse_report.user.username})"
       = text_field_tag :user_name, name, class: "form-control", readonly: true
-  .form-group
-    = f.label :message, class: 'control-label'
+  .form-group.row
+    = f.label :message, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.text_area :message, class: "form-control", rows: 2, required: true, value: sanitize(@ref_url)
-      .help-block
+      .form-text.text-muted
         Explain the problem with this user. If appropriate, provide a link to the relevant issue or comment.
 
   .form-actions
diff --git a/app/views/admin/abuse_reports/_abuse_report.html.haml b/app/views/admin/abuse_reports/_abuse_report.html.haml
index 18c6c559049..89a87f38968 100644
--- a/app/views/admin/abuse_reports/_abuse_report.html.haml
+++ b/app/views/admin/abuse_reports/_abuse_report.html.haml
@@ -1,7 +1,7 @@
 - reporter = abuse_report.reporter
 - user = abuse_report.user
 %tr
-  %th.visible-xs-block.visible-sm-block
+  %th.d-block.d-sm-none.d-md-none
     %strong User
   %td
     - if user
@@ -11,7 +11,7 @@
     - else
       (removed)
   %td
-    %strong.subheading.visible-xs-block.visible-sm-block Reported by
+    %strong.subheading.d-block.d-sm-none.d-md-none Reported by
     - if reporter
       = link_to reporter.name, reporter
     - else
@@ -19,7 +19,7 @@
     .light.small
       = time_ago_with_tooltip(abuse_report.created_at)
   %td
-    %strong.subheading.visible-xs-block.visible-sm-block Message
+    %strong.subheading.d-block.d-sm-none.d-md-none Message
     .message
       = markdown_field(abuse_report, :message)
   %td
diff --git a/app/views/admin/abuse_reports/index.html.haml b/app/views/admin/abuse_reports/index.html.haml
index 6a5e170ddd8..cc29657a439 100644
--- a/app/views/admin/abuse_reports/index.html.haml
+++ b/app/views/admin/abuse_reports/index.html.haml
@@ -5,7 +5,7 @@
   - if @abuse_reports.present?
     .table-holder
       %table.table.responsive-table
-        %thead.hidden-sm.hidden-xs
+        %thead.d-none.d-sm-none.d-md-table-header-group
           %tr
             %th User
             %th Reported by
diff --git a/app/views/admin/appearances/_form.html.haml b/app/views/admin/appearances/_form.html.haml
index 15bda97c3b5..a0861870ba4 100644
--- a/app/views/admin/appearances/_form.html.haml
+++ b/app/views/admin/appearances/_form.html.haml
@@ -1,44 +1,63 @@
-= form_for @appearance, url: admin_appearances_path, html: { class: 'form-horizontal'} do |f|
+= form_for @appearance, url: admin_appearances_path do |f|
   = form_errors(@appearance)
 
   %fieldset.app_logo
     %legend
       Navigation bar:
-  .form-group
-    = f.label :header_logo, 'Header logo', class: 'control-label'
+  .form-group.row
+    = f.label :header_logo, 'Header logo', class: 'col-sm-2 col-form-label'
     .col-sm-10
       - if @appearance.header_logo?
         = image_tag @appearance.header_logo_url, class: 'appearance-light-logo-preview'
         - if @appearance.persisted?
           %br
-          = link_to 'Remove header logo', header_logos_admin_appearances_path, data: { confirm: "Header logo will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-sm remove-logo"
+          = link_to 'Remove header logo', header_logos_admin_appearances_path, data: { confirm: "Header logo will be removed. Are you sure?"}, method: :delete, class: "btn btn-inverted btn-remove btn-sm remove-logo"
         %hr
       = f.hidden_field :header_logo_cache
       = f.file_field :header_logo, class: ""
       .hint
         Maximum file size is 1MB. Pages are optimized for a 28px tall header logo
 
+  %fieldset.app_logo
+    %legend
+      Favicon:
+  .form-group.row
+    = f.label :favicon, 'Favicon', class: 'col-sm-2 col-form-label'
+    .col-sm-10
+      - if @appearance.favicon?
+        = image_tag @appearance.favicon_url, class: 'appearance-light-logo-preview'
+        - if @appearance.persisted?
+          %br
+          = link_to 'Remove favicon', favicon_admin_appearances_path, data: { confirm: "Favicon will be removed. Are you sure?"}, method: :delete, class: "btn btn-inverted btn-remove btn-sm remove-logo"
+        %hr
+      = f.hidden_field :favicon_cache
+      = f.file_field :favicon, class: ''
+      .hint
+        Maximum file size is 1MB. Image size must be 32x32px. Allowed image formats are #{favicon_extension_whitelist}.
+        %br
+        Images with incorrect dimensions are not resized automatically, and may result in unexpected behavior.
+
   %fieldset.sign-in
     %legend
       Sign in/Sign up pages:
-  .form-group
-    = f.label :title, class: 'control-label'
+  .form-group.row
+    = f.label :title, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.text_field :title, class: "form-control"
-  .form-group
-    = f.label :description, class: 'control-label'
+  .form-group.row
+    = f.label :description, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.text_area :description, class: "form-control", rows: 10
       .hint
         Description parsed with #{link_to "GitLab Flavored Markdown", help_page_path('user/markdown'), target: '_blank'}.
-  .form-group
-    = f.label :logo, class: 'control-label'
+  .form-group.row
+    = f.label :logo, class: 'col-sm-2 col-form-label'
     .col-sm-10
       - if @appearance.logo?
         = image_tag @appearance.logo_url, class: 'appearance-logo-preview'
         - if @appearance.persisted?
           %br
-          = link_to 'Remove logo', logo_admin_appearances_path, data: { confirm: "Logo will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-sm remove-logo"
+          = link_to 'Remove logo', logo_admin_appearances_path, data: { confirm: "Logo will be removed. Are you sure?"}, method: :delete, class: "btn btn-inverted btn-remove btn-sm remove-logo"
         %hr
       = f.hidden_field :logo_cache
       = f.file_field :logo, class: ""
@@ -48,8 +67,8 @@
   %fieldset
     %legend
       New project pages:
-  .form-group
-    = f.label :new_project_guidelines, class: 'control-label'
+  .form-group.row
+    = f.label :new_project_guidelines, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.text_area :new_project_guidelines, class: "form-control", rows: 10
       .hint
@@ -63,5 +82,5 @@
       = link_to 'New project page', new_project_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer'
 
     - if @appearance.updated_at
-      %span.pull-right
+      %span.float-right
         Last edit #{time_ago_with_tooltip(@appearance.updated_at)}
diff --git a/app/views/admin/application_settings/_abuse.html.haml b/app/views/admin/application_settings/_abuse.html.haml
new file mode 100644
index 00000000000..91993838fc8
--- /dev/null
+++ b/app/views/admin/application_settings/_abuse.html.haml
@@ -0,0 +1,11 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :admin_notification_email, 'Abuse reports notification email', class: 'label-light'
+      = f.text_field :admin_notification_email, class: 'form-control'
+      .form-text.text-muted
+        Abuse reports will be sent to this address if it is set. Abuse reports are always available in the admin area.
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml
new file mode 100644
index 00000000000..f40939747f4
--- /dev/null
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -0,0 +1,33 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :gravatar_enabled, class: 'form-check-input'
+        = f.label :gravatar_enabled, class: 'form-check-label' do
+          Gravatar enabled
+    .form-group
+      = f.label :default_projects_limit, class: 'label-light'
+      = f.number_field :default_projects_limit, class: 'form-control'
+    .form-group
+      = f.label :max_attachment_size, 'Maximum attachment size (MB)', class: 'label-light'
+      = f.number_field :max_attachment_size, class: 'form-control'
+    .form-group
+      = f.label :session_expire_delay, 'Session duration (minutes)', class: 'label-light'
+      = f.number_field :session_expire_delay, class: 'form-control'
+      %span.form-text.text-muted#session_expire_delay_help_block GitLab restart is required to apply changes
+    .form-group
+      = f.label :user_oauth_applications, 'User OAuth applications', class: 'label-light'
+      .form-check
+        = f.check_box :user_oauth_applications, class: 'form-check-input'
+        = f.label :user_oauth_applications, class: 'form-check-label' do
+          Allow users to register any application to use GitLab as an OAuth provider
+    .form-group
+      = f.label :user_default_external, 'New users set to external', class: 'label-light'
+      .form-check
+        = f.check_box :user_default_external, class: 'form-check-input'
+        = f.label :user_default_external, class: 'form-check-label' do
+          Newly registered users will by default be external
+
+  = f.submit 'Save changes', class: 'btn btn-success'
diff --git a/app/views/admin/application_settings/_background_jobs.html.haml b/app/views/admin/application_settings/_background_jobs.html.haml
new file mode 100644
index 00000000000..fd8e695ed49
--- /dev/null
+++ b/app/views/admin/application_settings/_background_jobs.html.haml
@@ -0,0 +1,27 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    %p
+      These settings require a
+      = link_to 'restart', help_page_path('administration/restart_gitlab')
+      to take effect.
+    .form-group
+      .form-check
+        = f.check_box :sidekiq_throttling_enabled, class: 'form-check-input'
+        = f.label :sidekiq_throttling_enabled, class: 'form-check-label' do
+          Enable Sidekiq Job Throttling
+        .form-text.text-muted
+          Limit the amount of resources slow running jobs are assigned.
+    .form-group
+      = f.label :sidekiq_throttling_queues, 'Sidekiq queues to throttle', class: 'label-light'
+      = f.select :sidekiq_throttling_queues, sidekiq_queue_options_for_select, { include_hidden: false }, multiple: true, class: 'select2 select-wide', data: { field: 'sidekiq_throttling_queues' }
+      .form-text.text-muted
+        Choose which queues you wish to throttle.
+    .form-group
+      = f.label :sidekiq_throttling_factor, 'Throttling Factor', class: 'label-light'
+      = f.number_field :sidekiq_throttling_factor, class: 'form-control', min: '0.01', max: '0.99', step: '0.01'
+      .form-text.text-muted
+        The factor by which the queues should be throttled. A value between 0.0 and 1.0, exclusive.
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_ci_cd.html.haml b/app/views/admin/application_settings/_ci_cd.html.haml
new file mode 100644
index 00000000000..7c16cafe13f
--- /dev/null
+++ b/app/views/admin/application_settings/_ci_cd.html.haml
@@ -0,0 +1,41 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :auto_devops_enabled, class: 'form-check-input'
+        = f.label :auto_devops_enabled, class: 'form-check-label' do
+          Enabled Auto DevOps for projects by default
+      .form-text.text-muted
+        It will automatically build, test, and deploy applications based on a predefined CI/CD configuration
+        = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md')
+    .form-group
+      = f.label :auto_devops_domain, class: 'label-light'
+      = f.text_field :auto_devops_domain, class: 'form-control', placeholder: 'domain.com'
+      .form-text.text-muted
+        = s_("AdminSettings|Specify a domain to use by default for every project's Auto Review Apps and Auto Deploy stages.")
+    .form-group
+      .form-check
+        = f.check_box :shared_runners_enabled, class: 'form-check-input'
+        = f.label :shared_runners_enabled, class: 'form-check-label' do
+          Enable shared runners for new projects
+    .form-group
+      = f.label :shared_runners_text, class: 'label-light'
+      = f.text_area :shared_runners_text, class: 'form-control', rows: 4
+      .form-text.text-muted Markdown enabled
+    .form-group
+      = f.label :max_artifacts_size, 'Maximum artifacts size (MB)', class: 'label-light'
+      = f.number_field :max_artifacts_size, class: 'form-control'
+      .form-text.text-muted
+        Set the maximum file size for each job's artifacts
+        = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size')
+    .form-group
+      = f.label :default_artifacts_expire_in, 'Default artifacts expiration', class: 'label-light'
+      = f.text_field :default_artifacts_expire_in, class: 'form-control'
+      .form-text.text-muted
+        Set the default expiration time for each job's artifacts.
+        0 for unlimited.
+        = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'default-artifacts-expiration')
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_email.html.haml b/app/views/admin/application_settings/_email.html.haml
new file mode 100644
index 00000000000..99e44ffa741
--- /dev/null
+++ b/app/views/admin/application_settings/_email.html.haml
@@ -0,0 +1,24 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :email_author_in_body, class: 'form-check-input'
+        = f.label :email_author_in_body, class: 'form-check-label' do
+          Include author name in notification email body
+        .form-text.text-muted
+          Some email servers do not support overriding the email sender name.
+          Enable this option to include the name of the author of the issue,
+          merge request or comment in the email body instead.
+    .form-group
+      .form-check
+        = f.check_box :html_emails_enabled, class: 'form-check-input'
+        = f.label :html_emails_enabled, class: 'form-check-label' do
+          Enable HTML emails
+        .form-text.text-muted
+          By default GitLab sends emails in HTML and plain text formats so mail
+          clients can choose what format to use. Disable this option if you only
+          want to send emails in plain text format.
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_form.html.haml b/app/views/admin/application_settings/_form.html.haml
deleted file mode 100644
index 54b39df8cf3..00000000000
--- a/app/views/admin/application_settings/_form.html.haml
+++ /dev/null
@@ -1,873 +0,0 @@
-= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
-  = form_errors(@application_setting)
-
-  %fieldset
-    %legend Visibility and Access Controls
-    .form-group
-      = f.label :default_branch_protection, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.select :default_branch_protection, options_for_select(Gitlab::Access.protection_options, @application_setting.default_branch_protection), {}, class: 'form-control'
-    .form-group.visibility-level-setting
-      = f.label :default_project_visibility, class: 'control-label col-sm-2'
-      .col-sm-10
-        = render('shared/visibility_radios', model_method: :default_project_visibility, form: f, selected_level: @application_setting.default_project_visibility, form_model: Project.new)
-    .form-group.visibility-level-setting
-      = f.label :default_snippet_visibility, class: 'control-label col-sm-2'
-      .col-sm-10
-        = render('shared/visibility_radios', model_method: :default_snippet_visibility, form: f, selected_level: @application_setting.default_snippet_visibility, form_model: ProjectSnippet.new)
-    .form-group.visibility-level-setting
-      = f.label :default_group_visibility, class: 'control-label col-sm-2'
-      .col-sm-10
-        = render('shared/visibility_radios', model_method: :default_group_visibility, form: f, selected_level: @application_setting.default_group_visibility, form_model: Group.new)
-    .form-group
-      = f.label :restricted_visibility_levels, class: 'control-label col-sm-2'
-      .col-sm-10
-        - checkbox_name = 'application_setting[restricted_visibility_levels][]'
-        = hidden_field_tag(checkbox_name)
-        - restricted_level_checkboxes('restricted-visibility-help', checkbox_name).each do |level|
-          .checkbox
-            = level
-        %span.help-block#restricted-visibility-help
-          Selected levels cannot be used by non-admin users for projects or snippets.
-          If the public level is restricted, user profiles are only visible to logged in users.
-    .form-group
-      = f.label :import_sources, class: 'control-label col-sm-2'
-      .col-sm-10
-        - import_sources_checkboxes('import-sources-help').each do |source|
-          .checkbox= source
-        %span.help-block#import-sources-help
-          Enabled sources for code import during project creation. OmniAuth must be configured for GitHub
-          = link_to "(?)", help_page_path("integration/github")
-          , Bitbucket
-          = link_to "(?)", help_page_path("integration/bitbucket")
-          and GitLab.com
-          = link_to "(?)", help_page_path("integration/gitlab")
-
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :project_export_enabled do
-            = f.check_box :project_export_enabled
-            Project export enabled
-
-    .form-group
-      %label.control-label.col-sm-2 Enabled Git access protocols
-      .col-sm-10
-        = select(:application_setting, :enabled_git_access_protocol, [['Both SSH and HTTP(S)', nil], ['Only SSH', 'ssh'], ['Only HTTP(S)', 'http']], {}, class: 'form-control')
-        %span.help-block#clone-protocol-help
-          Allow only the selected protocols to be used for Git access.
-
-    - ApplicationSetting::SUPPORTED_KEY_TYPES.each do |type|
-      - field_name = :"#{type}_key_restriction"
-      .form-group
-        = f.label field_name, "#{type.upcase} SSH keys", class: 'control-label col-sm-2'
-        .col-sm-10
-          = f.select field_name, key_restriction_options_for_select(type), {}, class: 'form-control'
-
-  %fieldset
-    %legend Account and Limit Settings
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :gravatar_enabled do
-            = f.check_box :gravatar_enabled
-            Gravatar enabled
-    .form-group
-      = f.label :default_projects_limit, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :default_projects_limit, class: 'form-control'
-    .form-group
-      = f.label :max_attachment_size, 'Maximum attachment size (MB)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :max_attachment_size, class: 'form-control'
-    .form-group
-      = f.label :session_expire_delay, 'Session duration (minutes)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :session_expire_delay, class: 'form-control'
-        %span.help-block#session_expire_delay_help_block GitLab restart is required to apply changes
-    .form-group
-      = f.label :user_oauth_applications, 'User OAuth applications', class: 'control-label col-sm-2'
-      .col-sm-10
-        .checkbox
-          = f.label :user_oauth_applications do
-            = f.check_box :user_oauth_applications
-            Allow users to register any application to use GitLab as an OAuth provider
-    .form-group
-      = f.label :user_default_external, 'New users set to external', class: 'control-label col-sm-2'
-      .col-sm-10
-        .checkbox
-          = f.label :user_default_external do
-            = f.check_box :user_default_external
-            Newly registered users will by default be external
-
-  %fieldset
-    %legend Sign-up Restrictions
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :signup_enabled do
-            = f.check_box :signup_enabled
-            Sign-up enabled
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :send_user_confirmation_email do
-            = f.check_box :send_user_confirmation_email
-            Send confirmation email on sign-up
-    .form-group
-      = f.label :domain_whitelist, 'Whitelisted domains for sign-ups', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :domain_whitelist_raw, placeholder: 'domain.com', class: 'form-control', rows: 8
-        .help-block ONLY users with e-mail addresses that match these domain(s) will be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com
-    .form-group
-      = f.label :domain_blacklist_enabled, 'Domain Blacklist', class: 'control-label col-sm-2'
-      .col-sm-10
-        .checkbox
-          = f.label :domain_blacklist_enabled do
-            = f.check_box :domain_blacklist_enabled
-            Enable domain blacklist for sign ups
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .radio
-          = label_tag :blacklist_type_file do
-            = radio_button_tag :blacklist_type, :file
-            .option-title
-              Upload blacklist file
-        .radio
-          = label_tag :blacklist_type_raw do
-            = radio_button_tag :blacklist_type, :raw, @application_setting.domain_blacklist.present? || @application_setting.domain_blacklist.blank?
-            .option-title
-              Enter blacklist manually
-    .form-group.blacklist-file
-      = f.label :domain_blacklist_file, 'Blacklist file', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.file_field :domain_blacklist_file, class: 'form-control', accept: '.txt,.conf'
-        .help-block Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines or commas for multiple entries.
-    .form-group.blacklist-raw
-      = f.label :domain_blacklist, 'Blacklisted domains for sign-ups', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :domain_blacklist_raw, placeholder: 'domain.com', class: 'form-control', rows: 8
-        .help-block Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com
-
-    .form-group
-      = f.label :after_sign_up_text, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :after_sign_up_text, class: 'form-control', rows: 4
-        .help-block Markdown enabled
-
-  %fieldset
-    %legend Sign-in Restrictions
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :password_authentication_enabled_for_web do
-            = f.check_box :password_authentication_enabled_for_web
-            Password authentication enabled for web interface
-            .help-block
-              When disabled, an external authentication provider must be used.
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :password_authentication_enabled_for_git do
-            = f.check_box :password_authentication_enabled_for_git
-            Password authentication enabled for Git over HTTP(S)
-            .help-block
-              When disabled, a Personal Access Token
-              - if Gitlab::Auth::LDAP::Config.enabled?
-                or LDAP password
-              must be used to authenticate.
-    - if omniauth_enabled? && button_based_providers.any?
-      .form-group
-        = f.label :enabled_oauth_sign_in_sources, 'Enabled OAuth sign-in sources', class: 'control-label col-sm-2'
-        .col-sm-10
-          .btn-group{ data: { toggle: 'buttons' } }
-            - oauth_providers_checkboxes.each do |source|
-              = source
-    .form-group
-      = f.label :two_factor_authentication, 'Two-factor authentication', class: 'control-label col-sm-2'
-      .col-sm-10
-        .checkbox
-          = f.label :require_two_factor_authentication do
-            = f.check_box :require_two_factor_authentication
-            Require all users to setup Two-factor authentication
-    .form-group
-      = f.label :two_factor_authentication, 'Two-factor grace period (hours)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :two_factor_grace_period, min: 0, class: 'form-control', placeholder: '0'
-        .help-block Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication
-    .form-group
-      = f.label :home_page_url, 'Home page URL', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :home_page_url, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'home_help_block'
-        %span.help-block#home_help_block We will redirect non-logged in users to this page
-    .form-group
-      = f.label :after_sign_out_path, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :after_sign_out_path, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'after_sign_out_path_help_block'
-        %span.help-block#after_sign_out_path_help_block We will redirect users to this page after they sign out
-    .form-group
-      = f.label :sign_in_text, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :sign_in_text, class: 'form-control', rows: 4
-        .help-block Markdown enabled
-
-  %fieldset
-    %legend Help Page
-    .form-group
-      = f.label :help_page_text, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :help_page_text, class: 'form-control', rows: 4
-        .help-block Markdown enabled
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :help_page_hide_commercial_content do
-            = f.check_box :help_page_hide_commercial_content
-            Hide marketing-related entries from help
-    .form-group
-      = f.label :help_page_support_url, 'Support page URL', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :help_page_support_url, class: 'form-control', placeholder: 'http://company.example.com/getting-help', :'aria-describedby' => 'support_help_block'
-        %span.help-block#support_help_block Alternate support URL for help page
-
-  %fieldset
-    %legend Pages
-    .form-group
-      = f.label :max_pages_size, 'Maximum size of pages (MB)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :max_pages_size, class: 'form-control'
-        .help-block 0 for unlimited
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :pages_domain_verification_enabled do
-            = f.check_box :pages_domain_verification_enabled
-            Require users to prove ownership of custom domains
-        .help-block
-          Domain verification is an essential security measure for public GitLab
-          sites. Users are required to demonstrate they control a domain before
-          it is enabled
-          = link_to icon('question-circle'), help_page_path('user/project/pages/getting_started_part_three.md', anchor: 'dns-txt-record')
-
-  %fieldset
-    %legend Continuous Integration and Deployment
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :auto_devops_enabled do
-            = f.check_box :auto_devops_enabled
-            Enabled Auto DevOps (Beta) for projects by default
-        .help-block
-          It will automatically build, test, and deploy applications based on a predefined CI/CD configuration
-          = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md')
-    .form-group
-      = f.label :auto_devops_domain, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :auto_devops_domain, class: 'form-control', placeholder: 'domain.com'
-        .help-block
-          = s_("AdminSettings|Specify a domain to use by default for every project's Auto Review Apps and Auto Deploy stages.")
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :shared_runners_enabled do
-            = f.check_box :shared_runners_enabled
-            Enable shared runners for new projects
-    .form-group
-      = f.label :shared_runners_text, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :shared_runners_text, class: 'form-control', rows: 4
-        .help-block Markdown enabled
-    .form-group
-      = f.label :max_artifacts_size, 'Maximum artifacts size (MB)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :max_artifacts_size, class: 'form-control'
-        .help-block
-          Set the maximum file size for each job's artifacts
-          = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size')
-    .form-group
-      = f.label :default_artifacts_expire_in, 'Default artifacts expiration', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :default_artifacts_expire_in, class: 'form-control'
-        .help-block
-          Set the default expiration time for each job's artifacts.
-          0 for unlimited.
-          = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'default-artifacts-expiration')
-
-  - if Gitlab.config.registry.enabled
-    %fieldset
-      %legend Container Registry
-      .form-group
-        = f.label :container_registry_token_expire_delay, 'Authorization token duration (minutes)', class: 'control-label col-sm-2'
-        .col-sm-10
-          = f.number_field :container_registry_token_expire_delay, class: 'form-control'
-
-  %fieldset
-    %legend Metrics - Influx
-    %p
-      Setup InfluxDB to measure a wide variety of statistics like the time spent
-      in running SQL queries. These settings require a
-      = link_to 'restart', help_page_path('administration/restart_gitlab')
-      to take effect.
-      = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/introduction')
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :metrics_enabled do
-            = f.check_box :metrics_enabled
-            Enable InfluxDB Metrics
-    .form-group
-      = f.label :metrics_host, 'InfluxDB host', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :metrics_host, class: 'form-control', placeholder: 'influxdb.example.com'
-    .form-group
-      = f.label :metrics_port, 'InfluxDB port', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :metrics_port, class: 'form-control', placeholder: '8089'
-        .help-block
-          The UDP port to use for connecting to InfluxDB. InfluxDB requires that
-          your server configuration specifies a database to store data in when
-          sending messages to this port, without it metrics data will not be
-          saved.
-    .form-group
-      = f.label :metrics_pool_size, 'Connection pool size', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :metrics_pool_size, class: 'form-control'
-        .help-block
-          The amount of InfluxDB connections to open. Connections are opened
-          lazily. Users using multi-threaded application servers should ensure
-          enough connections are available (at minimum the amount of application
-          server threads).
-    .form-group
-      = f.label :metrics_timeout, 'Connection timeout', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :metrics_timeout, class: 'form-control'
-        .help-block
-          The amount of seconds after which an InfluxDB connection will time
-          out.
-    .form-group
-      = f.label :metrics_method_call_threshold, 'Method Call Threshold (ms)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :metrics_method_call_threshold, class: 'form-control'
-        .help-block
-          A method call is only tracked when it takes longer to complete than
-          the given amount of milliseconds.
-    .form-group
-      = f.label :metrics_sample_interval, 'Sampler Interval (sec)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :metrics_sample_interval, class: 'form-control'
-        .help-block
-          The sampling interval in seconds. Sampled data includes memory usage,
-          retained Ruby objects, file descriptors and so on.
-    .form-group
-      = f.label :metrics_packet_size, 'Metrics per packet', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :metrics_packet_size, class: 'form-control'
-        .help-block
-          The amount of points to store in a single UDP packet. More points
-          results in fewer but larger UDP packets being sent.
-
-  %fieldset
-    %legend Metrics - Prometheus
-    %p
-      Enable a Prometheus metrics endpoint at
-      %code= metrics_path
-      to expose a variety of statistics on the health and performance of GitLab. Additional information on authenticating and connecting to the metrics endpoint is available
-      = link_to 'here', admin_health_check_path
-      \. This setting requires a
-      = link_to 'restart', help_page_path('administration/restart_gitlab')
-      to take effect.
-      = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/index')
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :prometheus_metrics_enabled do
-            = f.check_box :prometheus_metrics_enabled
-            Enable Prometheus Metrics
-          - unless Gitlab::Metrics.metrics_folder_present?
-            .help-block
-              %strong.cred WARNING:
-              Environment variable
-              %code prometheus_multiproc_dir
-              does not exist or is not pointing to a valid directory.
-              = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/gitlab_metrics', anchor: 'metrics-shared-directory')
-
-  %fieldset
-    %legend Profiling - Performance Bar
-    %p
-      Enable the Performance Bar for a given group.
-      = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/performance_bar')
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :performance_bar_enabled do
-            = f.check_box :performance_bar_enabled
-            Enable the Performance Bar
-    .form-group
-      = f.label :performance_bar_allowed_group_id, 'Allowed group', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :performance_bar_allowed_group_id, class: 'form-control', placeholder: 'my-org/my-group', value: @application_setting.performance_bar_allowed_group&.full_path
-
-  %fieldset
-    %legend Background Jobs
-    %p
-      These settings require a
-      = link_to 'restart', help_page_path('administration/restart_gitlab')
-      to take effect.
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :sidekiq_throttling_enabled do
-            = f.check_box :sidekiq_throttling_enabled
-            Enable Sidekiq Job Throttling
-          .help-block
-            Limit the amount of resources slow running jobs are assigned.
-    .form-group
-      = f.label :sidekiq_throttling_queues, 'Sidekiq queues to throttle', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.select :sidekiq_throttling_queues, sidekiq_queue_options_for_select, { include_hidden: false }, multiple: true, class: 'select2 select-wide', data: { field: 'sidekiq_throttling_queues' }
-        .help-block
-          Choose which queues you wish to throttle.
-    .form-group
-      = f.label :sidekiq_throttling_factor, 'Throttling Factor', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :sidekiq_throttling_factor, class: 'form-control', min: '0.01', max: '0.99', step: '0.01'
-        .help-block
-          The factor by which the queues should be throttled. A value between 0.0 and 1.0, exclusive.
-
-  %fieldset
-    %legend Spam and Anti-bot Protection
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :recaptcha_enabled do
-            = f.check_box :recaptcha_enabled
-            Enable reCAPTCHA
-          %span.help-block#recaptcha_help_block Helps prevent bots from creating accounts
-
-    .form-group
-      = f.label :recaptcha_site_key, 'reCAPTCHA Site Key', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :recaptcha_site_key, class: 'form-control'
-        .help-block
-          Generate site and private keys at
-          %a{ href: 'http://www.google.com/recaptcha', target: 'blank' } http://www.google.com/recaptcha
-
-    .form-group
-      = f.label :recaptcha_private_key, 'reCAPTCHA Private Key', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :recaptcha_private_key, class: 'form-control'
-
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :akismet_enabled do
-            = f.check_box :akismet_enabled
-            Enable Akismet
-          %span.help-block#akismet_help_block Helps prevent bots from creating issues
-
-    .form-group
-      = f.label :akismet_api_key, 'Akismet API Key', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :akismet_api_key, class: 'form-control'
-        .help-block
-          Generate API key at
-          %a{ href: 'http://www.akismet.com', target: 'blank' } http://www.akismet.com
-
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :unique_ips_limit_enabled do
-            = f.check_box :unique_ips_limit_enabled
-            Limit sign in from multiple ips
-          %span.help-block#unique_ip_help_block
-            Helps prevent malicious users hide their activity
-
-    .form-group
-      = f.label :unique_ips_limit_per_user, 'IPs per user', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :unique_ips_limit_per_user, class: 'form-control'
-        .help-block
-          Maximum number of unique IPs per user
-
-    .form-group
-      = f.label :unique_ips_limit_time_window, 'IP expiration time', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :unique_ips_limit_time_window, class: 'form-control'
-        .help-block
-          How many seconds an IP will be counted towards the limit
-
-  %fieldset
-    %legend Abuse reports
-    .form-group
-      = f.label :admin_notification_email, 'Abuse reports notification email', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :admin_notification_email, class: 'form-control'
-        .help-block
-          Abuse reports will be sent to this address if it is set. Abuse reports are always available in the admin area.
-
-  %fieldset
-    %legend Error Reporting and Logging
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :sentry_enabled do
-            = 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
-
-    .form-group
-      = f.label :sentry_dsn, 'Sentry DSN', class: 'control-label col-sm-2'
-      .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
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :hashed_storage_enabled do
-            = f.check_box :hashed_storage_enabled
-            Create new projects using hashed storage paths
-          .help-block
-            Enable immutable, hash-based paths and repository names to store repositories on disk. This prevents
-            repositories from having to be moved or renamed when the Project URL changes and may improve disk I/O performance.
-            %em (EXPERIMENTAL)
-    .form-group
-      = f.label :repository_storages, 'Storage paths for new projects', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.select :repository_storages, repository_storages_options_for_select(@application_setting.repository_storages),
-          {include_hidden: false}, multiple: true, class: 'form-control'
-        .help-block
-          Manage repository storage paths. Learn more in the
-          = succeed "." do
-            = link_to "repository storages documentation", help_page_path("administration/repository_storages")
-
-  %fieldset
-    %legend Git Storage Circuitbreaker settings
-    .form-group
-      = f.label :circuitbreaker_check_interval, _('Check interval'), class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :circuitbreaker_check_interval, class: 'form-control'
-        .help-block
-          = circuitbreaker_check_interval_help_text
-    .form-group
-      = f.label :circuitbreaker_access_retries, _('Number of access attempts'), class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :circuitbreaker_access_retries, class: 'form-control'
-        .help-block
-          = circuitbreaker_access_retries_help_text
-    .form-group
-      = f.label :circuitbreaker_storage_timeout, _('Seconds to wait for a storage access attempt'), class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :circuitbreaker_storage_timeout, class: 'form-control'
-        .help-block
-          = circuitbreaker_storage_timeout_help_text
-    .form-group
-      = f.label :circuitbreaker_failure_count_threshold, _('Maximum git storage failures'), class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :circuitbreaker_failure_count_threshold, class: 'form-control'
-        .help-block
-          = circuitbreaker_failure_count_help_text
-    .form-group
-      = f.label :circuitbreaker_failure_reset_time, _('Seconds before reseting failure information'), class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :circuitbreaker_failure_reset_time, class: 'form-control'
-        .help-block
-          = circuitbreaker_failure_reset_time_help_text
-
-  %fieldset
-    %legend Repository Checks
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :repository_checks_enabled do
-            = f.check_box :repository_checks_enabled
-            Enable Repository Checks
-          .help-block
-            GitLab will periodically run
-            %a{ href: 'https://www.kernel.org/pub/software/scm/git/docs/git-fsck.html', target: 'blank' } 'git fsck'
-            in all project and wiki repositories to look for silent disk corruption issues.
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        = link_to 'Clear all repository checks', clear_repository_check_states_admin_application_settings_path, data: { confirm: 'This will clear repository check states for ALL projects in the database. This cannot be undone. Are you sure?' }, method: :put, class: "btn btn-sm btn-remove"
-        .help-block
-          If you got a lot of false alarms from repository checks you can choose to clear all repository check information from the database.
-
-  - if koding_enabled?
-    %fieldset
-      %legend Koding
-      .form-group
-        .col-sm-offset-2.col-sm-10
-          .checkbox
-            = f.label :koding_enabled do
-              = f.check_box :koding_enabled
-              Enable Koding
-          .help-block
-            Koding integration has been deprecated since GitLab 10.0. If you disable your Koding integration, you will not be able to enable it again.
-      .form-group
-        = f.label :koding_url, 'Koding URL', class: 'control-label col-sm-2'
-        .col-sm-10
-          = f.text_field :koding_url, class: 'form-control', placeholder: 'http://gitlab.your-koding-instance.com:8090'
-          .help-block
-            Koding has integration enabled out of the box for the
-            %strong gitlab
-            team, and you need to provide that team's URL here. Learn more in the
-            = succeed "." do
-              = link_to "Koding administration documentation", help_page_path("administration/integration/koding")
-
-  %fieldset
-    %legend PlantUML
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :plantuml_enabled do
-            = f.check_box :plantuml_enabled
-            Enable PlantUML
-    .form-group
-      = f.label :plantuml_url, 'PlantUML URL', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :plantuml_url, class: 'form-control', placeholder: 'http://gitlab.your-plantuml-instance.com:8080'
-        .help-block
-          Allow rendering of
-          = link_to "PlantUML", "http://plantuml.com"
-          diagrams in Asciidoc documents using an external PlantUML service.
-
-  %fieldset
-    %legend#usage-statistics Usage statistics
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :version_check_enabled do
-            = f.check_box :version_check_enabled
-            Enable version check
-          .help-block
-            GitLab will inform you if a new version is available.
-            = link_to 'Learn more', help_page_path("user/admin_area/settings/usage_statistics", anchor: "version-check")
-            about what information is shared with GitLab Inc.
-    .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, disabled: !can_be_configured
-            Enable usage ping
-          .help-block
-            - if can_be_configured
-              To help improve GitLab and its user experience, GitLab will
-              periodically collect usage information.
-              = link_to 'Learn more', help_page_path("user/admin_area/settings/usage_statistics", anchor: "usage-ping")
-              about what information is shared with GitLab Inc. Visit
-              = link_to 'Cohorts', admin_cohorts_path(anchor: 'usage-ping')
-              to see the JSON payload sent.
-            - 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
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :email_author_in_body do
-            = f.check_box :email_author_in_body
-            Include author name in notification email body
-          .help-block
-            Some email servers do not support overriding the email sender name.
-            Enable this option to include the name of the author of the issue,
-            merge request or comment in the email body instead.
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :html_emails_enabled do
-            = f.check_box :html_emails_enabled
-            Enable HTML emails
-          .help-block
-            By default GitLab sends emails in HTML and plain text formats so mail
-            clients can choose what format to use. Disable this option if you only
-            want to send emails in plain text format.
-  %fieldset
-    %legend Automatic Git repository housekeeping
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :housekeeping_enabled do
-            = f.check_box :housekeeping_enabled
-            Enable automatic repository housekeeping (git repack, git gc)
-          .help-block
-            If you keep automatic housekeeping disabled for a long time Git
-            repository access on your GitLab server will become slower and your
-            repositories will use more disk space. We recommend to always leave
-            this enabled.
-        .checkbox
-          = f.label :housekeeping_bitmaps_enabled do
-            = f.check_box :housekeeping_bitmaps_enabled
-            Enable Git pack file bitmap creation
-          .help-block
-            Creating pack file bitmaps makes housekeeping take a little longer but
-            bitmaps should accelerate 'git clone' performance.
-    .form-group
-      = f.label :housekeeping_incremental_repack_period, 'Incremental repack period', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :housekeeping_incremental_repack_period, class: 'form-control'
-        .help-block
-          Number of Git pushes after which an incremental 'git repack' is run.
-    .form-group
-      = f.label :housekeeping_full_repack_period, 'Full repack period', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :housekeeping_full_repack_period, class: 'form-control'
-        .help-block
-          Number of Git pushes after which a full 'git repack' is run.
-    .form-group
-      = f.label :housekeeping_gc_period, 'Git GC period', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :housekeeping_gc_period, class: 'form-control'
-        .help-block
-          Number of Git pushes after which 'git gc' is run.
-
-  %fieldset
-    %legend Gitaly Timeouts
-    .form-group
-      = f.label :gitaly_timeout_default, 'Default Timeout Period', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :gitaly_timeout_default, class: 'form-control'
-        .help-block
-          Timeout for Gitaly calls from the GitLab application (in seconds). This timeout is not enforced
-          for git fetch/push operations or Sidekiq jobs.
-    .form-group
-      = f.label :gitaly_timeout_fast, 'Fast Timeout Period', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :gitaly_timeout_fast, class: 'form-control'
-        .help-block
-          Fast operation timeout (in seconds). Some Gitaly operations are expected to be fast.
-          If they exceed this threshold, there may be a problem with a storage shard and 'failing fast'
-          can help maintain the stability of the GitLab instance.
-    .form-group
-      = f.label :gitaly_timeout_medium, 'Medium Timeout Period', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :gitaly_timeout_medium, class: 'form-control'
-        .help-block
-          Medium operation timeout (in seconds). This should be a value between the Fast and the Default timeout.
-
-  %fieldset
-    %legend Web terminal
-    .form-group
-      = f.label :terminal_max_session_time, 'Max session time', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :terminal_max_session_time, class: 'form-control'
-        .help-block
-          Maximum time for web terminal websocket connection (in seconds).
-          0 for unlimited.
-
-  %fieldset
-    %legend Real-time features
-    .form-group
-      = f.label :polling_interval_multiplier, 'Polling interval multiplier', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :polling_interval_multiplier, class: 'form-control'
-        .help-block
-          Change this value to influence how frequently the GitLab UI polls for updates.
-          If you set the value to 2 all polling intervals are multiplied
-          by 2, which means that polling happens half as frequently.
-          The multiplier can also have a decimal value.
-          The default value (1) is a reasonable choice for the majority of GitLab
-          installations. Set to 0 to completely disable polling.
-          = link_to icon('question-circle'), help_page_path('administration/polling')
-
-  %fieldset
-    %legend Performance optimization
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :authorized_keys_enabled do
-            = f.check_box :authorized_keys_enabled
-            Write to "authorized_keys" file
-          .help-block
-            By default, we write to the "authorized_keys" file to support Git
-            over SSH without additional configuration. GitLab can be optimized
-            to authenticate SSH keys via the database file. Only uncheck this
-            if you have configured your OpenSSH server to use the
-            AuthorizedKeysCommand. Click on the help icon for more details.
-            = link_to icon('question-circle'), help_page_path('administration/operations/fast_ssh_key_lookup')
-
-  %fieldset
-    %legend User and IP Rate Limits
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :throttle_unauthenticated_enabled do
-            = f.check_box :throttle_unauthenticated_enabled
-            Enable unauthenticated request rate limit
-          %span.help-block
-            Helps reduce request volume (e.g. from crawlers or abusive bots)
-    .form-group
-      = f.label :throttle_unauthenticated_requests_per_period, 'Max requests per period per IP', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :throttle_unauthenticated_requests_per_period, class: 'form-control'
-    .form-group
-      = f.label :throttle_unauthenticated_period_in_seconds, 'Rate limit period in seconds', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :throttle_unauthenticated_period_in_seconds, class: 'form-control'
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :throttle_authenticated_api_enabled do
-            = f.check_box :throttle_authenticated_api_enabled
-            Enable authenticated API request rate limit
-          %span.help-block
-            Helps reduce request volume (e.g. from crawlers or abusive bots)
-    .form-group
-      = f.label :throttle_authenticated_api_requests_per_period, 'Max requests per period per user', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :throttle_authenticated_api_requests_per_period, class: 'form-control'
-    .form-group
-      = f.label :throttle_authenticated_api_period_in_seconds, 'Rate limit period in seconds', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :throttle_authenticated_api_period_in_seconds, class: 'form-control'
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :throttle_authenticated_web_enabled do
-            = f.check_box :throttle_authenticated_web_enabled
-            Enable authenticated web request rate limit
-          %span.help-block
-            Helps reduce request volume (e.g. from crawlers or abusive bots)
-    .form-group
-      = f.label :throttle_authenticated_web_requests_per_period, 'Max requests per period per user', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :throttle_authenticated_web_requests_per_period, class: 'form-control'
-    .form-group
-      = f.label :throttle_authenticated_web_period_in_seconds, 'Rate limit period in seconds', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :throttle_authenticated_web_period_in_seconds, class: 'form-control'
-
-  %fieldset
-    %legend Outbound requests
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :allow_local_requests_from_hooks_and_services do
-            = f.check_box :allow_local_requests_from_hooks_and_services
-            Allow requests to the local network from hooks and services
-
-  .form-actions
-    = f.submit 'Save', class: 'btn btn-save'
diff --git a/app/views/admin/application_settings/_gitaly.html.haml b/app/views/admin/application_settings/_gitaly.html.haml
new file mode 100644
index 00000000000..0b4001c0824
--- /dev/null
+++ b/app/views/admin/application_settings/_gitaly.html.haml
@@ -0,0 +1,24 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :gitaly_timeout_default, 'Default Timeout Period', class: 'label-light'
+      = f.number_field :gitaly_timeout_default, class: 'form-control'
+      .form-text.text-muted
+        Timeout for Gitaly calls from the GitLab application (in seconds). This timeout is not enforced
+        for git fetch/push operations or Sidekiq jobs.
+    .form-group
+      = f.label :gitaly_timeout_fast, 'Fast Timeout Period', class: 'label-light'
+      = f.number_field :gitaly_timeout_fast, class: 'form-control'
+      .form-text.text-muted
+        Fast operation timeout (in seconds). Some Gitaly operations are expected to be fast.
+        If they exceed this threshold, there may be a problem with a storage shard and 'failing fast'
+        can help maintain the stability of the GitLab instance.
+    .form-group
+      = f.label :gitaly_timeout_medium, 'Medium Timeout Period', class: 'label-light'
+      = f.number_field :gitaly_timeout_medium, class: 'form-control'
+      .form-text.text-muted
+        Medium operation timeout (in seconds). This should be a value between the Fast and the Default timeout.
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_help_page.html.haml b/app/views/admin/application_settings/_help_page.html.haml
new file mode 100644
index 00000000000..1f402fcb786
--- /dev/null
+++ b/app/views/admin/application_settings/_help_page.html.haml
@@ -0,0 +1,19 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :help_page_text, class: 'label-light'
+      = f.text_area :help_page_text, class: 'form-control', rows: 4
+      .form-text.text-muted Markdown enabled
+    .form-group
+      .form-check
+        = f.check_box :help_page_hide_commercial_content, class: 'form-check-input'
+        = f.label :help_page_hide_commercial_content, class: 'form-check-label' do
+          Hide marketing-related entries from help
+    .form-group
+      = f.label :help_page_support_url, 'Support page URL', class: 'label-light'
+      = f.text_field :help_page_support_url, class: 'form-control', placeholder: 'http://company.example.com/getting-help', :'aria-describedby' => 'support_help_block'
+      %span.form-text.text-muted#support_help_block Alternate support URL for help page
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_influx.html.haml b/app/views/admin/application_settings/_influx.html.haml
new file mode 100644
index 00000000000..61e8e3199a9
--- /dev/null
+++ b/app/views/admin/application_settings/_influx.html.haml
@@ -0,0 +1,60 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    %p
+      Setup InfluxDB to measure a wide variety of statistics like the time spent
+      in running SQL queries. These settings require a
+      = link_to 'restart', help_page_path('administration/restart_gitlab')
+      to take effect.
+      = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/introduction')
+    .form-group
+      .form-check
+        = f.check_box :metrics_enabled, class: 'form-check-input'
+        = f.label :metrics_enabled, class: 'form-check-label' do
+          Enable InfluxDB Metrics
+    .form-group
+      = f.label :metrics_host, 'InfluxDB host', class: 'label-light'
+      = f.text_field :metrics_host, class: 'form-control', placeholder: 'influxdb.example.com'
+    .form-group
+      = f.label :metrics_port, 'InfluxDB port', class: 'label-light'
+      = f.text_field :metrics_port, class: 'form-control', placeholder: '8089'
+      .form-text.text-muted
+        The UDP port to use for connecting to InfluxDB. InfluxDB requires that
+        your server configuration specifies a database to store data in when
+        sending messages to this port, without it metrics data will not be
+        saved.
+    .form-group
+      = f.label :metrics_pool_size, 'Connection pool size', class: 'label-light'
+      = f.number_field :metrics_pool_size, class: 'form-control'
+      .form-text.text-muted
+        The amount of InfluxDB connections to open. Connections are opened
+        lazily. Users using multi-threaded application servers should ensure
+        enough connections are available (at minimum the amount of application
+        server threads).
+    .form-group
+      = f.label :metrics_timeout, 'Connection timeout', class: 'label-light'
+      = f.number_field :metrics_timeout, class: 'form-control'
+      .form-text.text-muted
+        The amount of seconds after which an InfluxDB connection will time
+        out.
+    .form-group
+      = f.label :metrics_method_call_threshold, 'Method Call Threshold (ms)', class: 'label-light'
+      = f.number_field :metrics_method_call_threshold, class: 'form-control'
+      .form-text.text-muted
+        A method call is only tracked when it takes longer to complete than
+        the given amount of milliseconds.
+    .form-group
+      = f.label :metrics_sample_interval, 'Sampler Interval (sec)', class: 'label-light'
+      = f.number_field :metrics_sample_interval, class: 'form-control'
+      .form-text.text-muted
+        The sampling interval in seconds. Sampled data includes memory usage,
+        retained Ruby objects, file descriptors and so on.
+    .form-group
+      = f.label :metrics_packet_size, 'Metrics per packet', class: 'label-light'
+      = f.number_field :metrics_packet_size, class: 'form-control'
+      .form-text.text-muted
+        The amount of points to store in a single UDP packet. More points
+        results in fewer but larger UDP packets being sent.
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_ip_limits.html.haml b/app/views/admin/application_settings/_ip_limits.html.haml
new file mode 100644
index 00000000000..73d570a5fee
--- /dev/null
+++ b/app/views/admin/application_settings/_ip_limits.html.haml
@@ -0,0 +1,45 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :throttle_unauthenticated_enabled, class: 'form-check-input'
+        = f.label :throttle_unauthenticated_enabled, class: 'form-check-label' do
+          Enable unauthenticated request rate limit
+        %span.form-text.text-muted
+          Helps reduce request volume (e.g. from crawlers or abusive bots)
+    .form-group
+      = f.label :throttle_unauthenticated_requests_per_period, 'Max requests per period per IP', class: 'label-light'
+      = f.number_field :throttle_unauthenticated_requests_per_period, class: 'form-control'
+    .form-group
+      = f.label :throttle_unauthenticated_period_in_seconds, 'Rate limit period in seconds', class: 'label-light'
+      = f.number_field :throttle_unauthenticated_period_in_seconds, class: 'form-control'
+    .form-group
+      .form-check
+        = f.check_box :throttle_authenticated_api_enabled, class: 'form-check-input'
+        = f.label :throttle_authenticated_api_enabled, class: 'form-check-label' do
+          Enable authenticated API request rate limit
+        %span.form-text.text-muted
+          Helps reduce request volume (e.g. from crawlers or abusive bots)
+    .form-group
+      = f.label :throttle_authenticated_api_requests_per_period, 'Max requests per period per user', class: 'label-light'
+      = f.number_field :throttle_authenticated_api_requests_per_period, class: 'form-control'
+    .form-group
+      = f.label :throttle_authenticated_api_period_in_seconds, 'Rate limit period in seconds', class: 'label-light'
+      = f.number_field :throttle_authenticated_api_period_in_seconds, class: 'form-control'
+    .form-group
+      .form-check
+        = f.check_box :throttle_authenticated_web_enabled, class: 'form-check-input'
+        = f.label :throttle_authenticated_web_enabled, class: 'form-check-label' do
+          Enable authenticated web request rate limit
+        %span.form-text.text-muted
+          Helps reduce request volume (e.g. from crawlers or abusive bots)
+    .form-group
+      = f.label :throttle_authenticated_web_requests_per_period, 'Max requests per period per user', class: 'label-light'
+      = f.number_field :throttle_authenticated_web_requests_per_period, class: 'form-control'
+    .form-group
+      = f.label :throttle_authenticated_web_period_in_seconds, 'Rate limit period in seconds', class: 'label-light'
+      = f.number_field :throttle_authenticated_web_period_in_seconds, class: 'form-control'
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_koding.html.haml b/app/views/admin/application_settings/_koding.html.haml
new file mode 100644
index 00000000000..ae60f68f5fe
--- /dev/null
+++ b/app/views/admin/application_settings/_koding.html.haml
@@ -0,0 +1,22 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :koding_enabled, class: 'form-check-input'
+        = f.label :koding_enabled, class: 'form-check-label' do
+          Enable Koding
+      .form-text.text-muted
+        Koding integration has been deprecated since GitLab 10.0. If you disable your Koding integration, you will not be able to enable it again.
+    .form-group
+      = f.label :koding_url, 'Koding URL', class: 'label-light'
+      = f.text_field :koding_url, class: 'form-control', placeholder: 'http://gitlab.your-koding-instance.com:8090'
+      .form-text.text-muted
+        Koding has integration enabled out of the box for the
+        %strong gitlab
+        team, and you need to provide that team's URL here. Learn more in the
+        = succeed "." do
+          = link_to "Koding administration documentation", help_page_path("administration/integration/koding")
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_logging.html.haml b/app/views/admin/application_settings/_logging.html.haml
new file mode 100644
index 00000000000..a6e549cd1f0
--- /dev/null
+++ b/app/views/admin/application_settings/_logging.html.haml
@@ -0,0 +1,32 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :sentry_enabled, class: 'form-check-input'
+        = f.label :sentry_enabled, class: 'form-check-label' do
+          Enable Sentry
+        .form-text.text-muted
+          %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
+
+    .form-group
+      = f.label :sentry_dsn, 'Sentry DSN', class: 'label-light'
+      = f.text_field :sentry_dsn, class: 'form-control'
+
+    .form-group
+      .form-check
+        = f.check_box :clientside_sentry_enabled, class: 'form-check-input'
+        = f.label :clientside_sentry_enabled, class: 'form-check-label' do
+          Enable Clientside Sentry
+        .form-text.text-muted
+          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: 'label-light'
+      = f.text_field :clientside_sentry_dsn, class: 'form-control'
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_outbound.html.haml b/app/views/admin/application_settings/_outbound.html.haml
new file mode 100644
index 00000000000..e046242bee0
--- /dev/null
+++ b/app/views/admin/application_settings/_outbound.html.haml
@@ -0,0 +1,11 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :allow_local_requests_from_hooks_and_services, class: 'form-check-input'
+        = f.label :allow_local_requests_from_hooks_and_services, class: 'form-check-label' do
+          Allow requests to the local network from hooks and services
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_pages.html.haml b/app/views/admin/application_settings/_pages.html.haml
new file mode 100644
index 00000000000..f168ec62ffd
--- /dev/null
+++ b/app/views/admin/application_settings/_pages.html.haml
@@ -0,0 +1,20 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :max_pages_size, 'Maximum size of pages (MB)', class: 'label-light'
+      = f.number_field :max_pages_size, class: 'form-control'
+      .form-text.text-muted 0 for unlimited
+    .form-group
+      .form-check
+        = f.check_box :pages_domain_verification_enabled, class: 'form-check-input'
+        = f.label :pages_domain_verification_enabled, class: 'form-check-label' do
+          Require users to prove ownership of custom domains
+      .form-text.text-muted
+        Domain verification is an essential security measure for public GitLab
+        sites. Users are required to demonstrate they control a domain before
+        it is enabled
+        = link_to icon('question-circle'), help_page_path('user/project/pages/getting_started_part_three.md', anchor: 'dns-txt-record')
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_performance.html.haml b/app/views/admin/application_settings/_performance.html.haml
new file mode 100644
index 00000000000..ffa25af77ed
--- /dev/null
+++ b/app/views/admin/application_settings/_performance.html.haml
@@ -0,0 +1,18 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :authorized_keys_enabled, class: 'form-check-input'
+        = f.label :authorized_keys_enabled, class: 'form-check-label' do
+          Write to "authorized_keys" file
+        .form-text.text-muted
+          By default, we write to the "authorized_keys" file to support Git
+          over SSH without additional configuration. GitLab can be optimized
+          to authenticate SSH keys via the database file. Only uncheck this
+          if you have configured your OpenSSH server to use the
+          AuthorizedKeysCommand. Click on the help icon for more details.
+          = link_to icon('question-circle'), help_page_path('administration/operations/fast_ssh_key_lookup')
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_performance_bar.html.haml b/app/views/admin/application_settings/_performance_bar.html.haml
new file mode 100644
index 00000000000..ddbfcc6b77b
--- /dev/null
+++ b/app/views/admin/application_settings/_performance_bar.html.haml
@@ -0,0 +1,14 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :performance_bar_enabled, class: 'form-check-input'
+        = f.label :performance_bar_enabled, class: 'form-check-label' do
+          Enable the Performance Bar
+    .form-group
+      = f.label :performance_bar_allowed_group_path, 'Allowed group', class: 'label-light'
+      = f.text_field :performance_bar_allowed_group_path, class: 'form-control', placeholder: 'my-org/my-group', value: @application_setting.performance_bar_allowed_group&.full_path
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_plantuml.html.haml b/app/views/admin/application_settings/_plantuml.html.haml
new file mode 100644
index 00000000000..259f18b3b96
--- /dev/null
+++ b/app/views/admin/application_settings/_plantuml.html.haml
@@ -0,0 +1,18 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :plantuml_enabled, class: 'form-check-input'
+        = f.label :plantuml_enabled, class: 'form-check-label' do
+          Enable PlantUML
+    .form-group
+      = f.label :plantuml_url, 'PlantUML URL', class: 'label-light'
+      = f.text_field :plantuml_url, class: 'form-control', placeholder: 'http://gitlab.your-plantuml-instance.com:8080'
+      .form-text.text-muted
+        Allow rendering of
+        = link_to "PlantUML", "http://plantuml.com"
+        diagrams in Asciidoc documents using an external PlantUML service.
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_prometheus.html.haml b/app/views/admin/application_settings/_prometheus.html.haml
new file mode 100644
index 00000000000..ad92b18b2c9
--- /dev/null
+++ b/app/views/admin/application_settings/_prometheus.html.haml
@@ -0,0 +1,27 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    %p
+      Enable a Prometheus metrics endpoint at
+      %code= metrics_path
+      to expose a variety of statistics on the health and performance of GitLab. Additional information on authenticating and connecting to the metrics endpoint is available
+      = link_to 'here', admin_health_check_path
+      \. This setting requires a
+      = link_to 'restart', help_page_path('administration/restart_gitlab')
+      to take effect.
+      = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/index')
+    .form-group
+      .form-check
+        = f.check_box :prometheus_metrics_enabled, class: 'form-check-input'
+        = f.label :prometheus_metrics_enabled, class: 'form-check-label' do
+          Enable Prometheus Metrics
+        - unless Gitlab::Metrics.metrics_folder_present?
+          .form-text.text-muted
+            %strong.cred WARNING:
+            Environment variable
+            %code prometheus_multiproc_dir
+            does not exist or is not pointing to a valid directory.
+            = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/gitlab_metrics', anchor: 'metrics-shared-directory')
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_realtime.html.haml b/app/views/admin/application_settings/_realtime.html.haml
new file mode 100644
index 00000000000..120cf4909b2
--- /dev/null
+++ b/app/views/admin/application_settings/_realtime.html.haml
@@ -0,0 +1,18 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :polling_interval_multiplier, 'Polling interval multiplier', class: 'label-light'
+      = f.text_field :polling_interval_multiplier, class: 'form-control'
+      .form-text.text-muted
+        Change this value to influence how frequently the GitLab UI polls for updates.
+        If you set the value to 2 all polling intervals are multiplied
+        by 2, which means that polling happens half as frequently.
+        The multiplier can also have a decimal value.
+        The default value (1) is a reasonable choice for the majority of GitLab
+        installations. Set to 0 to completely disable polling.
+        = link_to icon('question-circle'), help_page_path('administration/polling')
+
+  = f.submit 'Save changes', class: "btn btn-success"
+
diff --git a/app/views/admin/application_settings/_registry.html.haml b/app/views/admin/application_settings/_registry.html.haml
new file mode 100644
index 00000000000..beac70482e5
--- /dev/null
+++ b/app/views/admin/application_settings/_registry.html.haml
@@ -0,0 +1,9 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :container_registry_token_expire_delay, 'Authorization token duration (minutes)', class: 'label-light'
+      = f.number_field :container_registry_token_expire_delay, class: 'form-control'
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_repository_check.html.haml b/app/views/admin/application_settings/_repository_check.html.haml
new file mode 100644
index 00000000000..57facc380eb
--- /dev/null
+++ b/app/views/admin/application_settings/_repository_check.html.haml
@@ -0,0 +1,56 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .sub-section
+      %h4 Repository checks
+      .form-group
+        .form-check
+          = f.check_box :repository_checks_enabled, class: 'form-check-input'
+          = f.label :repository_checks_enabled, class: 'form-check-label' do
+            Enable Repository Checks
+          .form-text.text-muted
+            GitLab will periodically run
+            %a{ href: 'https://git-scm.com/docs/git-fsck', target: 'blank' } 'git fsck'
+            in all project and wiki repositories to look for silent disk corruption issues.
+      .form-group
+        = link_to 'Clear all repository checks', clear_repository_check_states_admin_application_settings_path, data: { confirm: 'This will clear repository check states for ALL projects in the database. This cannot be undone. Are you sure?' }, method: :put, class: "btn btn-sm btn-remove"
+        .form-text.text-muted
+          If you got a lot of false alarms from repository checks you can choose to clear all repository check information from the database.
+
+    .sub-section
+      %h4 Housekeeping
+      .form-group
+        .form-check
+          = f.check_box :housekeeping_enabled, class: 'form-check-input'
+          = f.label :housekeeping_enabled, class: 'form-check-label' do
+            Enable automatic repository housekeeping (git repack, git gc)
+          .form-text.text-muted
+            If you keep automatic housekeeping disabled for a long time Git
+            repository access on your GitLab server will become slower and your
+            repositories will use more disk space. We recommend to always leave
+            this enabled.
+        .form-check
+          = f.check_box :housekeeping_bitmaps_enabled, class: 'form-check-input'
+          = f.label :housekeeping_bitmaps_enabled, class: 'form-check-label' do
+            Enable Git pack file bitmap creation
+          .form-text.text-muted
+            Creating pack file bitmaps makes housekeeping take a little longer but
+            bitmaps should accelerate 'git clone' performance.
+      .form-group
+        = f.label :housekeeping_incremental_repack_period, 'Incremental repack period', class: 'label-light'
+        = f.number_field :housekeeping_incremental_repack_period, class: 'form-control'
+        .form-text.text-muted
+          Number of Git pushes after which an incremental 'git repack' is run.
+      .form-group
+        = f.label :housekeeping_full_repack_period, 'Full repack period', class: 'label-light'
+        = f.number_field :housekeeping_full_repack_period, class: 'form-control'
+        .form-text.text-muted
+          Number of Git pushes after which a full 'git repack' is run.
+      .form-group
+        = f.label :housekeeping_gc_period, 'Git GC period', class: 'label-light'
+        = f.number_field :housekeeping_gc_period, class: 'form-control'
+        .form-text.text-muted
+          Number of Git pushes after which 'git gc' is run.
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_repository_mirrors_form.html.haml b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
new file mode 100644
index 00000000000..beeb5169361
--- /dev/null
+++ b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
@@ -0,0 +1,15 @@
+= form_for @application_setting, url: admin_application_settings_path do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :mirror_available, 'Enable mirror configuration', class: 'label-light'
+      .form-check
+        = f.check_box :mirror_available, class: 'form-check-input'
+        = f.label :mirror_available, class: 'form-check-label' do
+          Allow mirrors to be setup for projects
+      %span.form-text.text-muted
+        If disabled, only admins will be able to setup mirrors in projects.
+        = link_to icon('question-circle'), help_page_path('workflow/repository_mirroring')
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_repository_storage.html.haml b/app/views/admin/application_settings/_repository_storage.html.haml
new file mode 100644
index 00000000000..5a303666353
--- /dev/null
+++ b/app/views/admin/application_settings/_repository_storage.html.haml
@@ -0,0 +1,51 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .sub-section
+      .form-group
+        .form-check
+          = f.check_box :hashed_storage_enabled, class: 'form-check-input'
+          = f.label :hashed_storage_enabled, class: 'form-check-label' do
+            Create new projects using hashed storage paths
+          .form-text.text-muted
+            Enable immutable, hash-based paths and repository names to store repositories on disk. This prevents
+            repositories from having to be moved or renamed when the Project URL changes and may improve disk I/O performance.
+            %em (EXPERIMENTAL)
+      .form-group
+        = f.label :repository_storages, 'Storage paths for new projects', class: 'label-light'
+        = f.select :repository_storages, repository_storages_options_for_select(@application_setting.repository_storages),
+          {include_hidden: false}, multiple: true, class: 'form-control'
+        .form-text.text-muted
+          Manage repository storage paths. Learn more in the
+          = succeed "." do
+            = link_to "repository storages documentation", help_page_path("administration/repository_storage_paths")
+    .sub-section
+      %h4 Circuit breaker
+      .form-group
+        = f.label :circuitbreaker_check_interval, _('Check interval'), class: 'label-light'
+        = f.number_field :circuitbreaker_check_interval, class: 'form-control'
+        .form-text.text-muted
+          = circuitbreaker_check_interval_help_text
+      .form-group
+        = f.label :circuitbreaker_access_retries, _('Number of access attempts'), class: 'label-light'
+        = f.number_field :circuitbreaker_access_retries, class: 'form-control'
+        .form-text.text-muted
+          = circuitbreaker_access_retries_help_text
+      .form-group
+        = f.label :circuitbreaker_storage_timeout, _('Seconds to wait for a storage access attempt'), class: 'label-light'
+        = f.number_field :circuitbreaker_storage_timeout, class: 'form-control'
+        .form-text.text-muted
+          = circuitbreaker_storage_timeout_help_text
+      .form-group
+        = f.label :circuitbreaker_failure_count_threshold, _('Maximum git storage failures'), class: 'label-light'
+        = f.number_field :circuitbreaker_failure_count_threshold, class: 'form-control'
+        .form-text.text-muted
+          = circuitbreaker_failure_count_help_text
+      .form-group
+        = f.label :circuitbreaker_failure_reset_time, _('Seconds before reseting failure information'), class: 'label-light'
+        = f.number_field :circuitbreaker_failure_reset_time, class: 'form-control'
+        .form-text.text-muted
+          = circuitbreaker_failure_reset_time_help_text
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml
new file mode 100644
index 00000000000..69d1a43c511
--- /dev/null
+++ b/app/views/admin/application_settings/_signin.html.haml
@@ -0,0 +1,52 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :password_authentication_enabled_for_web, class: 'form-check-input'
+        = f.label :password_authentication_enabled_for_web, class: 'form-check-label' do
+          Password authentication enabled for web interface
+          .form-text.text-muted
+            When disabled, an external authentication provider must be used.
+    .form-group
+      .form-check
+        = f.check_box :password_authentication_enabled_for_git, class: 'form-check-input'
+        = f.label :password_authentication_enabled_for_git, class: 'form-check-label' do
+          Password authentication enabled for Git over HTTP(S)
+          .form-text.text-muted
+            When disabled, a Personal Access Token
+            - if Gitlab::Auth::LDAP::Config.enabled?
+              or LDAP password
+            must be used to authenticate.
+    - if omniauth_enabled? && button_based_providers.any?
+      .form-group
+        = f.label :enabled_oauth_sign_in_sources, 'Enabled OAuth sign-in sources', class: 'label-light'
+        = hidden_field_tag 'application_setting[enabled_oauth_sign_in_sources][]'
+        .btn-group{ data: { toggle: 'buttons' } }
+          - oauth_providers_checkboxes.each do |source|
+            = source
+    .form-group
+      = f.label :two_factor_authentication, 'Two-factor authentication', class: 'label-light'
+      .form-check
+        = f.check_box :require_two_factor_authentication, class: 'form-check-input'
+        = f.label :require_two_factor_authentication, class: 'form-check-label' do
+          Require all users to setup Two-factor authentication
+    .form-group
+      = f.label :two_factor_authentication, 'Two-factor grace period (hours)', class: 'label-light'
+      = f.number_field :two_factor_grace_period, min: 0, class: 'form-control', placeholder: '0'
+      .form-text.text-muted Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication
+    .form-group
+      = f.label :home_page_url, 'Home page URL', class: 'label-light'
+      = f.text_field :home_page_url, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'home_help_block'
+      %span.form-text.text-muted#home_help_block We will redirect non-logged in users to this page
+    .form-group
+      = f.label :after_sign_out_path, class: 'label-light'
+      = f.text_field :after_sign_out_path, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'after_sign_out_path_help_block'
+      %span.form-text.text-muted#after_sign_out_path_help_block We will redirect users to this page after they sign out
+    .form-group
+      = f.label :sign_in_text, class: 'label-light'
+      = f.text_area :sign_in_text, class: 'form-control', rows: 4
+      .form-text.text-muted Markdown enabled
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_signup.html.haml b/app/views/admin/application_settings/_signup.html.haml
new file mode 100644
index 00000000000..b9ba9128cc9
--- /dev/null
+++ b/app/views/admin/application_settings/_signup.html.haml
@@ -0,0 +1,50 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :signup_enabled, class: 'form-check-input'
+        = f.label :signup_enabled, class: 'form-check-label' do
+          Sign-up enabled
+    .form-group
+      .form-check
+        = f.check_box :send_user_confirmation_email, class: 'form-check-input'
+        = f.label :send_user_confirmation_email, class: 'form-check-label' do
+          Send confirmation email on sign-up
+    .form-group
+      = f.label :domain_whitelist, 'Whitelisted domains for sign-ups', class: 'label-light'
+      = f.text_area :domain_whitelist_raw, placeholder: 'domain.com', class: 'form-control', rows: 8
+      .form-text.text-muted ONLY users with e-mail addresses that match these domain(s) will be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com
+    .form-group
+      = f.label :domain_blacklist_enabled, 'Domain Blacklist', class: 'label-light'
+      .form-check
+        = f.check_box :domain_blacklist_enabled, class: 'form-check-input'
+        = f.label :domain_blacklist_enabled, class: 'form-check-label' do
+          Enable domain blacklist for sign ups
+    .form-group
+      .form-check
+        = radio_button_tag :blacklist_type, :file, false, class: 'form-check-input'
+        = label_tag :blacklist_type_file, class: 'form-check-label' do
+          .option-title
+            Upload blacklist file
+      .form-check
+        = radio_button_tag :blacklist_type, :raw, @application_setting.domain_blacklist.present? || @application_setting.domain_blacklist.blank?, class: 'form-check-input'
+        = label_tag :blacklist_type_raw, class: 'form-check-label' do
+          .option-title
+            Enter blacklist manually
+    .form-group.blacklist-file
+      = f.label :domain_blacklist_file, 'Blacklist file', class: 'label-light'
+      = f.file_field :domain_blacklist_file, class: 'form-control', accept: '.txt,.conf'
+      .form-text.text-muted Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines or commas for multiple entries.
+    .form-group.blacklist-raw
+      = f.label :domain_blacklist, 'Blacklisted domains for sign-ups', class: 'label-light'
+      = f.text_area :domain_blacklist_raw, placeholder: 'domain.com', class: 'form-control', rows: 8
+      .form-text.text-muted Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com
+
+    .form-group
+      = f.label :after_sign_up_text, class: 'label-light'
+      = f.text_area :after_sign_up_text, class: 'form-control', rows: 4
+      .form-text.text-muted Markdown enabled
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_spam.html.haml b/app/views/admin/application_settings/_spam.html.haml
new file mode 100644
index 00000000000..8f0dce962a9
--- /dev/null
+++ b/app/views/admin/application_settings/_spam.html.haml
@@ -0,0 +1,57 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :recaptcha_enabled, class: 'form-check-input'
+        = f.label :recaptcha_enabled, class: 'form-check-label' do
+          Enable reCAPTCHA
+        %span.form-text.text-muted#recaptcha_help_block Helps prevent bots from creating accounts
+
+    .form-group
+      = f.label :recaptcha_site_key, 'reCAPTCHA Site Key', class: 'label-light'
+      = f.text_field :recaptcha_site_key, class: 'form-control'
+      .form-text.text-muted
+        Generate site and private keys at
+        %a{ href: 'http://www.google.com/recaptcha', target: 'blank' } http://www.google.com/recaptcha
+
+    .form-group
+      = f.label :recaptcha_private_key, 'reCAPTCHA Private Key', class: 'label-light'
+      = f.text_field :recaptcha_private_key, class: 'form-control'
+
+    .form-group
+      .form-check
+        = f.check_box :akismet_enabled, class: 'form-check-input'
+        = f.label :akismet_enabled, class: 'form-check-label' do
+          Enable Akismet
+        %span.form-text.text-muted#akismet_help_block Helps prevent bots from creating issues
+
+    .form-group
+      = f.label :akismet_api_key, 'Akismet API Key', class: 'label-light'
+      = f.text_field :akismet_api_key, class: 'form-control'
+      .form-text.text-muted
+        Generate API key at
+        %a{ href: 'http://www.akismet.com', target: 'blank' } http://www.akismet.com
+
+    .form-group
+      .form-check
+        = f.check_box :unique_ips_limit_enabled, class: 'form-check-input'
+        = f.label :unique_ips_limit_enabled, class: 'form-check-label' do
+          Limit sign in from multiple ips
+        %span.form-text.text-muted#unique_ip_help_block
+          Helps prevent malicious users hide their activity
+
+    .form-group
+      = f.label :unique_ips_limit_per_user, 'IPs per user', class: 'label-light'
+      = f.number_field :unique_ips_limit_per_user, class: 'form-control'
+      .form-text.text-muted
+        Maximum number of unique IPs per user
+
+    .form-group
+      = f.label :unique_ips_limit_time_window, 'IP expiration time', class: 'label-light'
+      = f.number_field :unique_ips_limit_time_window, class: 'form-control'
+      .form-text.text-muted
+        How many seconds an IP will be counted towards the limit
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_terminal.html.haml b/app/views/admin/application_settings/_terminal.html.haml
new file mode 100644
index 00000000000..543628ff0ee
--- /dev/null
+++ b/app/views/admin/application_settings/_terminal.html.haml
@@ -0,0 +1,12 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :terminal_max_session_time, 'Max session time', class: 'label-light'
+      = f.number_field :terminal_max_session_time, class: 'form-control'
+      .form-text.text-muted
+        Maximum time for web terminal websocket connection (in seconds).
+        0 for unlimited.
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_terms.html.haml b/app/views/admin/application_settings/_terms.html.haml
new file mode 100644
index 00000000000..d3dc8659d1b
--- /dev/null
+++ b/app/views/admin/application_settings/_terms.html.haml
@@ -0,0 +1,19 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :enforce_terms, class: 'form-check-input'
+        = f.label :enforce_terms, class: 'form-check-label' do
+          = _("Require all users to accept Terms of Service and Privacy Policy when they access GitLab.")
+        .form-text.text-muted
+          = _("When enabled, users cannot use GitLab until the terms have been accepted.")
+    .form-group
+      = f.label :terms do
+        = _("Terms of Service Agreement and Privacy Policy")
+      = f.text_area :terms, class: 'form-control', rows: 8
+      .form-text.text-muted
+        = _("Markdown enabled")
+
+  = f.submit _("Save changes"), class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
new file mode 100644
index 00000000000..49a3ee33a85
--- /dev/null
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -0,0 +1,35 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :version_check_enabled, class: 'form-check-input'
+        = f.label :version_check_enabled, class: 'form-check-label' do
+          Enable version check
+        .form-text.text-muted
+          GitLab will inform you if a new version is available.
+          = link_to 'Learn more', help_page_path("user/admin_area/settings/usage_statistics", anchor: "version-check")
+          about what information is shared with GitLab Inc.
+    .form-group
+      - can_be_configured = @application_setting.usage_ping_can_be_configured?
+      .form-check
+        = f.check_box :usage_ping_enabled, disabled: !can_be_configured, class: 'form-check-input'
+        = f.label :usage_ping_enabled, class: 'form-check-label' do
+          Enable usage ping
+        .form-text.text-muted
+          - if can_be_configured
+            To help improve GitLab and its user experience, GitLab will
+            periodically collect usage information.
+            = link_to 'Learn more', help_page_path("user/admin_area/settings/usage_statistics", anchor: "usage-ping")
+            about what information is shared with GitLab Inc. Visit
+            = link_to 'Cohorts', admin_cohorts_path(anchor: 'usage-ping')
+            to see the JSON payload sent.
+          - 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')
+
+  = f.submit 'Save changes', class: "btn btn-success"
+
diff --git a/app/views/admin/application_settings/_visibility_and_access.html.haml b/app/views/admin/application_settings/_visibility_and_access.html.haml
new file mode 100644
index 00000000000..4cc3e6a7d03
--- /dev/null
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -0,0 +1,58 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :default_branch_protection, class: 'label-light'
+      = f.select :default_branch_protection, options_for_select(Gitlab::Access.protection_options, @application_setting.default_branch_protection), {}, class: 'form-control'
+    .form-group.visibility-level-setting
+      = f.label :default_project_visibility, class: 'label-light'
+      = render('shared/visibility_radios', model_method: :default_project_visibility, form: f, selected_level: @application_setting.default_project_visibility, form_model: Project.new)
+    .form-group.visibility-level-setting
+      = f.label :default_snippet_visibility, class: 'label-light'
+      = render('shared/visibility_radios', model_method: :default_snippet_visibility, form: f, selected_level: @application_setting.default_snippet_visibility, form_model: ProjectSnippet.new)
+    .form-group.visibility-level-setting
+      = f.label :default_group_visibility, class: 'label-light'
+      = render('shared/visibility_radios', model_method: :default_group_visibility, form: f, selected_level: @application_setting.default_group_visibility, form_model: Group.new)
+    .form-group
+      = f.label :restricted_visibility_levels, class: 'label-light'
+      - checkbox_name = 'application_setting[restricted_visibility_levels][]'
+      = hidden_field_tag(checkbox_name)
+      - restricted_level_checkboxes('restricted-visibility-help', checkbox_name, class: 'form-check-input').each do |level|
+        .form-check
+          = level
+      %span.form-text.text-muted#restricted-visibility-help
+        Selected levels cannot be used by non-admin users for groups, projects or snippets.
+        If the public level is restricted, user profiles are only visible to logged in users.
+    .form-group
+      = f.label :import_sources, class: 'label-light'
+      = hidden_field_tag 'application_setting[import_sources][]'
+      - import_sources_checkboxes('import-sources-help', class: 'form-check-input').each do |source|
+        .form-check= source
+      %span.form-text.text-muted#import-sources-help
+        Enabled sources for code import during project creation. OmniAuth must be configured for GitHub
+        = link_to "(?)", help_page_path("integration/github")
+        , Bitbucket
+        = link_to "(?)", help_page_path("integration/bitbucket")
+        and GitLab.com
+        = link_to "(?)", help_page_path("integration/gitlab")
+
+    .form-group
+      .form-check
+        = f.check_box :project_export_enabled, class: 'form-check-input'
+        = f.label :project_export_enabled, class: 'form-check-label' do
+          Project export enabled
+
+    .form-group
+      %label.label-light Enabled Git access protocols
+      = select(:application_setting, :enabled_git_access_protocol, [['Both SSH and HTTP(S)', nil], ['Only SSH', 'ssh'], ['Only HTTP(S)', 'http']], {}, class: 'form-control')
+      %span.form-text.text-muted#clone-protocol-help
+        Allow only the selected protocols to be used for Git access.
+
+    - ApplicationSetting::SUPPORTED_KEY_TYPES.each do |type|
+      - field_name = :"#{type}_key_restriction"
+      .form-group
+        = f.label field_name, "#{type.upcase} SSH keys", class: 'label-light'
+        = f.select field_name, key_restriction_options_for_select(type), {}, class: 'form-control'
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/show.html.haml b/app/views/admin/application_settings/show.html.haml
index ecc46d86afe..bd43504dd37 100644
--- a/app/views/admin/application_settings/show.html.haml
+++ b/app/views/admin/application_settings/show.html.haml
@@ -1,5 +1,329 @@
+- breadcrumb_title "Settings"
 - page_title "Settings"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
+
+%section.settings.as-visibility-access.no-animate#js-visibility-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Visibility and access controls')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Set default and restrict visibility levels. Configure import sources and git access protocol.')
+  .settings-content
+    = render 'visibility_and_access'
+
+%section.settings.as-account-limit.no-animate#js-account-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Account and limit')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Session expiration, projects limit and attachment size.')
+  .settings-content
+    = render 'account_and_limit'
+
+%section.settings.as-signup.no-animate#js-signup-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Sign-up restrictions')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure the way a user creates a new account.')
+  .settings-content
+    = render 'signup'
+
+%section.settings.as-signin.no-animate#js-signin-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Sign-in restrictions')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Set requirements for a user to sign-in. Enable mandatory two-factor authentication.')
+  .settings-content
+    = render 'signin'
+
+%section.settings.as-terms.no-animate#js-terms-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Terms of Service and Privacy Policy')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Include a Terms of Service agreement and Privacy Policy that all users must accept.')
+  .settings-content
+    = render 'terms'
+
+%section.settings.as-help-page.no-animate#js-help-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Help page')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Help page text and support page url.')
+  .settings-content
+    = render 'help_page'
+
+%section.settings.as-pages.no-animate#js-pages-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Pages')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Size and domain settings for static websites')
+  .settings-content
+    = render 'pages'
+
+%section.settings.as-ci-cd.no-animate#js-ci-cd-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Continuous Integration and Deployment')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Auto DevOps, runners and job artifacts')
+  .settings-content
+    = render 'ci_cd'
+
+%section.settings.as-influx.no-animate#js-influx-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Metrics - Influx')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable and configure InfluxDB metrics.')
+  .settings-content
+    = render 'influx'
+
+%section.settings.as-prometheus.no-animate#js-prometheus-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Metrics - Prometheus')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable and configure Prometheus metrics.')
+  .settings-content
+    = render 'prometheus'
+
+%section.settings.as-performance-bar.no-animate#js-performance-bar-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Profiling - Performance bar')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable the Performance Bar for a given group.')
+      = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/performance_bar')
+  .settings-content
+    = render 'performance_bar'
+
+%section.settings.as-background.no-animate#js-background-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Background jobs')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure Sidekiq job throttling.')
+  .settings-content
+    = render 'background_jobs'
+
+%section.settings.as-spam.no-animate#js-spam-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Spam and Anti-bot Protection')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable reCAPTCHA or Akismet and set IP limits.')
+  .settings-content
+    = render 'spam'
+
+%section.settings.as-abuse.no-animate#js-abuse-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Abuse reports')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Set notification email for abuse reports.')
+  .settings-content
+    = render 'abuse'
+
+%section.settings.as-logging.no-animate#js-logging-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Error Reporting and Logging')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable Sentry for error reporting and logging.')
+  .settings-content
+    = render 'logging'
+
+%section.qa-repository-storage-settings.settings.as-repository-storage.no-animate#js-repository-storage-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Repository storage')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure storage path and circuit breaker settings.')
+  .settings-content
+    = render 'repository_storage'
+
+%section.settings.as-repository-check.no-animate#js-repository-check-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Repository maintenance')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure automatic git checks and housekeeping on repositories.')
+  .settings-content
+    = render 'repository_check'
+
+- if Gitlab.config.registry.enabled
+  %section.settings.as-registry.no-animate#js-registry-settings{ class: ('expanded' if expanded) }
+    .settings-header
+      %h4
+        = _('Container Registry')
+      %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+        = expanded ? _('Collapse') : _('Expand')
+      %p
+        = _('Various container registry settings.')
+    .settings-content
+      = render 'registry'
+
+- if koding_enabled?
+  %section.settings.as-koding.no-animate#js-koding-settings{ class: ('expanded' if expanded) }
+    .settings-header
+      %h4
+        = _('Koding')
+      %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+        = expanded ? _('Collapse') : _('Expand')
+      %p
+        = _('Online IDE integration settings.')
+    .settings-content
+      = render 'koding'
+
+%section.settings.as-plantuml.no-animate#js-plantuml-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('PlantUML')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Allow rendering of PlantUML diagrams in Asciidoc documents.')
+  .settings-content
+    = render 'plantuml'
+
+%section.settings.as-usage.no-animate#js-usage-settings{ class: ('expanded' if expanded) }
+  .settings-header#usage-statistics
+    %h4
+      = _('Usage statistics')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable or disable version check and usage ping.')
+  .settings-content
+    = render 'usage'
+
+%section.settings.as-email.no-animate#js-email-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Email')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Various email settings.')
+  .settings-content
+    = render 'email'
+
+%section.settings.as-gitaly.no-animate#js-gitaly-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Gitaly')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure Gitaly timeouts.')
+  .settings-content
+    = render 'gitaly'
+
+%section.settings.as-terminal.no-animate#js-terminal-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Web terminal')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Set max session time for web terminal.')
+  .settings-content
+    = render 'terminal'
+
+%section.settings.as-realtime.no-animate#js-realtime-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Real-time features')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Change this value to influence how frequently the GitLab UI polls for updates.')
+  .settings-content
+    = render 'realtime'
+
+%section.settings.as-performance.no-animate#js-performance-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Performance optimization')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Various settings that affect GitLab performance.')
+  .settings-content
+    = render 'performance'
+
+%section.settings.as-ip-limits.no-animate#js-ip-limits-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('User and IP Rate Limits')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure limits for web and API requests.')
+  .settings-content
+    = render 'ip_limits'
+
+%section.settings.as-outbound.no-animate#js-outbound-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Outbound requests')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Allow requests to the local network from hooks and services.')
+  .settings-content
+    = render 'outbound'
+
+%section.settings.as-mirror.no-animate#js-mirror-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Repository mirror')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      = _('Configure push mirrors.')
+  .settings-content
+    = render partial: 'repository_mirrors_form'
+
+= render_if_exists 'admin/application_settings/pseudonymizer_settings', expanded: expanded
 
-%h3.page-title Settings
-%hr
-= render 'form'
diff --git a/app/views/admin/applications/_form.html.haml b/app/views/admin/applications/_form.html.haml
index 93827d6a1ab..7f14cddebd8 100644
--- a/app/views/admin/applications/_form.html.haml
+++ b/app/views/admin/applications/_form.html.haml
@@ -1,34 +1,34 @@
-= form_for [:admin, @application], url: @url, html: {class: 'form-horizontal', role: 'form'} do |f|
+= form_for [:admin, @application], url: @url, html: {role: 'form'} do |f|
   = form_errors(application)
 
-  = content_tag :div, class: 'form-group' do
-    = f.label :name, class: 'col-sm-2 control-label'
+  = content_tag :div, class: 'form-group row' do
+    = f.label :name, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.text_field :name, class: 'form-control'
       = doorkeeper_errors_for application, :name
 
-  = content_tag :div, class: 'form-group' do
-    = f.label :redirect_uri, class: 'col-sm-2 control-label'
+  = content_tag :div, class: 'form-group row' do
+    = f.label :redirect_uri, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.text_area :redirect_uri, class: 'form-control'
       = doorkeeper_errors_for application, :redirect_uri
-      %span.help-block
+      %span.form-text.text-muted
         Use one line per URI
       - if Doorkeeper.configuration.native_redirect_uri
-        %span.help-block
+        %span.form-text.text-muted
           Use
           %code= Doorkeeper.configuration.native_redirect_uri
           for local tests
 
-  = content_tag :div, class: 'form-group' do
-    = f.label :trusted, class: 'col-sm-2 control-label'
+  = content_tag :div, class: 'form-group row' do
+    = f.label :trusted, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.check_box :trusted
-      %span.help-block
+      %span.form-text.text-muted
         Trusted applications are automatically authorized on GitLab OAuth flow.
 
-  .form-group
-    = f.label :scopes, class: 'col-sm-2 control-label'
+  .form-group.row
+    = f.label :scopes, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes
 
diff --git a/app/views/admin/applications/show.html.haml b/app/views/admin/applications/show.html.haml
index 5125aa21b06..593a6d816e3 100644
--- a/app/views/admin/applications/show.html.haml
+++ b/app/views/admin/applications/show.html.haml
@@ -32,5 +32,5 @@
     = render "shared/tokens/scopes_list", token: @application
 
 .form-actions
-  = link_to 'Edit', edit_admin_application_path(@application), class: 'btn btn-primary wide pull-left'
+  = link_to 'Edit', edit_admin_application_path(@application), class: 'btn btn-primary wide float-left'
   = render 'delete_form', application: @application, submit_btn_css: 'btn btn-danger prepend-left-10'
diff --git a/app/views/admin/background_jobs/show.html.haml b/app/views/admin/background_jobs/show.html.haml
index f0cc4d7ee62..faa5854bb40 100644
--- a/app/views/admin/background_jobs/show.html.haml
+++ b/app/views/admin/background_jobs/show.html.haml
@@ -7,9 +7,9 @@
 
   %hr
 
-  .panel.panel-default
-    .panel-heading Sidekiq running processes
-    .panel-body
+  .card
+    .card-header Sidekiq running processes
+    .card-body
       - if @sidekiq_processes.empty?
         %h4.cred
           %i.fa.fa-exclamation-triangle
@@ -41,5 +41,5 @@
 
 
 
-  .panel.panel-default
+  .card
     %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }
diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml
index 5a4ed1c3a2a..7f34357f147 100644
--- a/app/views/admin/broadcast_messages/_form.html.haml
+++ b/app/views/admin/broadcast_messages/_form.html.haml
@@ -6,32 +6,32 @@
     - else
       Your message here
 
-= form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form form-horizontal js-quick-submit js-requires-input'} do |f|
+= form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form js-quick-submit js-requires-input'} do |f|
   = form_errors(@broadcast_message)
 
-  .form-group
-    = f.label :message, class: 'control-label'
+  .form-group.row
+    = f.label :message, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.text_area :message, class: "form-control js-autosize",
         required: true,
         data: { preview_path: preview_admin_broadcast_messages_path }
-  .form-group.js-toggle-colors-container
-    .col-sm-10.col-sm-offset-2
+  .form-group.row.js-toggle-colors-container
+    .col-sm-10.offset-sm-2
       = link_to 'Customize colors', '#', class: 'js-toggle-colors-link'
-  .form-group.js-toggle-colors-container.hide
-    = f.label :color, "Background Color", class: 'control-label'
+  .form-group.row.js-toggle-colors-container.toggle-colors.hide
+    = f.label :color, "Background Color", class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.color_field :color, class: "form-control"
-  .form-group.js-toggle-colors-container.hide
-    = f.label :font, "Font Color", class: 'control-label'
+  .form-group.row.js-toggle-colors-container.toggle-colors.hide
+    = f.label :font, "Font Color", class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.color_field :font, class: "form-control"
-  .form-group
-    = f.label :starts_at, class: 'control-label'
+  .form-group.row
+    = f.label :starts_at, _("Starts at (UTC)"), class: 'col-form-label col-sm-2'
     .col-sm-10.datetime-controls
       = f.datetime_select :starts_at, {}, class: 'form-control form-control-inline'
-  .form-group
-    = f.label :ends_at, class: 'control-label'
+  .form-group.row
+    = f.label :ends_at, _("Ends at (UTC)"), class: 'col-form-label col-sm-2'
     .col-sm-10.datetime-controls
       = f.datetime_select :ends_at, {}, class: 'form-control form-control-inline'
   .form-actions
diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index b806882eee3..9ef58faf8cc 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -32,7 +32,7 @@
           %td
             = message.ends_at
           %td
-            = link_to icon('pencil-square-o'), edit_admin_broadcast_message_path(message), title: 'Edit', class: 'btn btn-xs'
-            = link_to icon('times'), admin_broadcast_message_path(message), method: :delete, remote: true, title: 'Remove', class: 'js-remove-tr btn btn-xs btn-danger'
+            = link_to icon('pencil-square-o'), edit_admin_broadcast_message_path(message), title: 'Edit', class: 'btn btn-sm'
+            = link_to icon('times'), admin_broadcast_message_path(message), method: :delete, remote: true, title: 'Remove', class: 'js-remove-tr btn btn-sm btn-danger'
 
   = paginate @broadcast_messages, theme: 'gitlab'
diff --git a/app/views/admin/conversational_development_index/_card.html.haml b/app/views/admin/conversational_development_index/_card.html.haml
index 6c8688e06ae..57eda06630b 100644
--- a/app/views/admin/conversational_development_index/_card.html.haml
+++ b/app/views/admin/conversational_development_index/_card.html.haml
@@ -3,20 +3,20 @@
     .convdev-card-title
       %h3
         = card.title
-      .text-light
+      .light-text
         = card.description
-    .card-scores
-      .card-score
-        .card-score-value
+    .board-card-scores
+      .board-card-score
+        .board-card-score-value
           = format_score(card.instance_score)
-        .card-score-name You
-      .card-score
-        .card-score-value
+        .board-card-score-name You
+      .board-card-score
+        .board-card-score-value
           = format_score(card.leader_score)
-        .card-score-name Lead
-    .card-score-big
+        .board-card-score-name Lead
+    .board-card-score-big
       = number_to_percentage(card.percentage_score, precision: 1)
-    .card-buttons
+    .board-card-buttons
       - if card.blog
         %a{ href: card.blog }
           = icon('info-circle', 'aria-hidden' => 'true')
diff --git a/app/views/admin/conversational_development_index/_disabled.html.haml b/app/views/admin/conversational_development_index/_disabled.html.haml
index 975d7df3da6..0a741b50960 100644
--- a/app/views/admin/conversational_development_index/_disabled.html.haml
+++ b/app/views/admin/conversational_development_index/_disabled.html.haml
@@ -1,5 +1,5 @@
 .container.convdev-empty
-  .col-sm-6.col-sm-push-3.text-center
+  .col-sm-12.justify-content-center.text-center
     = custom_icon('convdev_no_index')
     %h4 Usage ping is not enabled
     %p
diff --git a/app/views/admin/conversational_development_index/_no_data.html.haml b/app/views/admin/conversational_development_index/_no_data.html.haml
index b23d2b5ec3a..d69c46194b4 100644
--- a/app/views/admin/conversational_development_index/_no_data.html.haml
+++ b/app/views/admin/conversational_development_index/_no_data.html.haml
@@ -1,5 +1,5 @@
 .container.convdev-empty
-  .col-sm-6.col-sm-push-3.text-center
+  .col-sm-12.justify-content-center.text-center
     = custom_icon('convdev_no_data')
     %h4 Data is still calculating...
     %p
diff --git a/app/views/admin/conversational_development_index/show.html.haml b/app/views/admin/conversational_development_index/show.html.haml
index ed40e7b4d00..e3d1aa31dc2 100644
--- a/app/views/admin/conversational_development_index/show.html.haml
+++ b/app/views/admin/conversational_development_index/show.html.haml
@@ -21,11 +21,11 @@
           score
           = link_to icon('question-circle', 'aria-hidden' => 'true'), help_page_path('user/admin_area/monitoring/convdev')
 
-      .convdev-cards.card-container
+      .convdev-cards.board-card-container
         - @metric.cards.each do |card|
           = render 'card', card: card
 
-      .convdev-steps.visible-lg
+      .convdev-steps.d-none.d-lg-block.d-xl-block
         - @metric.idea_to_production_steps.each_with_index do |step, index|
           .convdev-step{ class: "convdev-#{score_level(step.percentage_score)}-score" }
             = custom_icon("i2p_step_#{index + 1}")
diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml
index 05c41082882..3cdeb103bb8 100644
--- a/app/views/admin/dashboard/index.html.haml
+++ b/app/views/admin/dashboard/index.html.haml
@@ -2,6 +2,8 @@
 - breadcrumb_title "Dashboard"
 
 %div{ class: container_class }
+  = render_if_exists "admin/licenses/breakdown", license: @license
+
   .admin-dashboard.prepend-top-default
     .row
       .col-sm-4
@@ -10,7 +12,7 @@
             = link_to admin_projects_path do
               %h3.text-center
                 Projects:
-                = number_with_delimiter(Project.cached_count)
+                = approximate_count_with_delimiters(@counts, Project)
             %hr
             = link_to('New project', new_project_path, class: "btn btn-new")
       .col-sm-4
@@ -19,7 +21,8 @@
             = link_to admin_users_path do
               %h3.text-center
                 Users:
-                = number_with_delimiter(User.count)
+                = approximate_count_with_delimiters(@counts, User)
+            = render_if_exists 'users_statistics'
             %hr
             = link_to 'New user', new_admin_user_path, class: "btn btn-new"
       .col-sm-4
@@ -28,7 +31,7 @@
             = link_to admin_groups_path do
               %h3.text-center
                 Groups:
-                = number_with_delimiter(Group.count)
+                = approximate_count_with_delimiters(@counts, Group)
             %hr
             = link_to 'New group', new_admin_group_path, class: "btn btn-new"
     .row
@@ -38,35 +41,35 @@
             %h4 Statistics
             %p
               Forks
-              %span.light.pull-right
-                = number_with_delimiter(ForkedProjectLink.count)
+              %span.light.float-right
+                = approximate_count_with_delimiters(@counts, ForkedProjectLink)
             %p
               Issues
-              %span.light.pull-right
-                = number_with_delimiter(Issue.count)
+              %span.light.float-right
+                = approximate_count_with_delimiters(@counts, Issue)
             %p
               Merge Requests
-              %span.light.pull-right
-                = number_with_delimiter(MergeRequest.count)
+              %span.light.float-right
+                = approximate_count_with_delimiters(@counts, MergeRequest)
             %p
               Notes
-              %span.light.pull-right
-                = number_with_delimiter(Note.count)
+              %span.light.float-right
+                = approximate_count_with_delimiters(@counts, Note)
             %p
               Snippets
-              %span.light.pull-right
-                = number_with_delimiter(Snippet.count)
+              %span.light.float-right
+                = approximate_count_with_delimiters(@counts, Snippet)
             %p
               SSH Keys
-              %span.light.pull-right
-                = number_with_delimiter(Key.count)
+              %span.light.float-right
+                = approximate_count_with_delimiters(@counts, Key)
             %p
               Milestones
-              %span.light.pull-right
-                = number_with_delimiter(Milestone.count)
+              %span.light.float-right
+                = approximate_count_with_delimiters(@counts, Milestone)
             %p
               Active Users
-              %span.light.pull-right
+              %span.light.float-right
                 = number_with_delimiter(User.active.count)
       .col-md-4
         .info-well
@@ -75,44 +78,47 @@
             - sign_up = "Sign up"
             %p{ "aria-label" => "#{sign_up}: status " + (allow_signup? ? "on" : "off") }
               = sign_up
-              %span.light.pull-right
+              %span.light.float-right
                 = boolean_to_icon allow_signup?
             - ldap = "LDAP"
             %p{ "aria-label" => "#{ldap}: status " + (Gitlab.config.ldap.enabled ? "on" : "off") }
               = ldap
-              %span.light.pull-right
+              %span.light.float-right
                 = boolean_to_icon Gitlab.config.ldap.enabled
             - gravatar = "Gravatar"
             %p{ "aria-label" => "#{gravatar}: status " + (gravatar_enabled? ? "on" : "off") }
               = gravatar
-              %span.light.pull-right
+              %span.light.float-right
                 = boolean_to_icon gravatar_enabled?
             - omniauth = "OmniAuth"
             %p{ "aria-label" => "#{omniauth}: status " + (Gitlab.config.omniauth.enabled ? "on" : "off") }
               = omniauth
-              %span.light.pull-right
+              %span.light.float-right
                 = boolean_to_icon Gitlab.config.omniauth.enabled
             - reply_email = "Reply by email"
             %p{ "aria-label" => "#{reply_email}: status " + (Gitlab::IncomingEmail.enabled? ? "on" : "off") }
               = reply_email
-              %span.light.pull-right
+              %span.light.float-right
                 = boolean_to_icon Gitlab::IncomingEmail.enabled?
+
+            = render_if_exists 'elastic_and_geo'
+
             - container_reg = "Container Registry"
             %p{ "aria-label" => "#{container_reg}: status " + (Gitlab.config.registry.enabled ? "on" : "off") }
               = container_reg
-              %span.light.pull-right
+              %span.light.float-right
                 = boolean_to_icon Gitlab.config.registry.enabled
             - gitlab_pages = 'GitLab Pages'
             - gitlab_pages_enabled = Gitlab.config.pages.enabled
             %p{ "aria-label" => "#{gitlab_pages}: status " + (gitlab_pages_enabled ? "on" : "off") }
               = gitlab_pages
-              %span.light.pull-right
+              %span.light.float-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
+              %span.light.float-right
                 = boolean_to_icon gitlab_shared_runners_enabled
       .col-md-4
         .info-well
@@ -120,40 +126,44 @@
             %h4
               Components
               - if Gitlab::CurrentSettings.version_check_enabled
-                .pull-right
+                .float-right
                   = version_status_badge
             %p
               GitLab
-              %span.pull-right
+              %span.float-right
                 = Gitlab::VERSION
+                = "(#{Gitlab.revision})"
             %p
               GitLab Shell
-              %span.pull-right
+              %span.float-right
                 = Gitlab::Shell.new.version
             %p
               GitLab Workhorse
-              %span.pull-right
+              %span.float-right
                 = gitlab_workhorse_version
             %p
               GitLab API
-              %span.pull-right
+              %span.float-right
                 = API::API::version
             - if Gitlab.config.pages.enabled
               %p
                 GitLab Pages
-                %span.pull-right
+                %span.float-right
                   = Gitlab::Pages::VERSION
+
+            = render_if_exists 'geo'
+
             %p
               Ruby
-              %span.pull-right
+              %span.float-right
                 #{RUBY_VERSION}p#{RUBY_PATCHLEVEL}
             %p
               Rails
-              %span.pull-right
+              %span.float-right
                 #{Rails::VERSION::STRING}
             %p
               = Gitlab::Database.adapter_name
-              %span.pull-right
+              %span.float-right
                 = Gitlab::Database.version
             %p
               = link_to "Gitaly Servers", admin_gitaly_servers_path
@@ -165,7 +175,7 @@
             - @projects.each do |project|
               %p
                 = link_to project.full_name, [:admin, project.namespace.becomes(Namespace), project], class: 'str-truncated-60'
-                %span.light.pull-right
+                %span.light.float-right
                   #{time_ago_with_tooltip(project.created_at)}
       .col-md-4
         .info-well
@@ -175,7 +185,7 @@
               %p
                 = link_to [:admin, user], class: 'str-truncated-60' do
                   = user.name
-                %span.light.pull-right
+                %span.light.float-right
                   #{time_ago_with_tooltip(user.created_at)}
       .col-md-4
         .info-well
@@ -185,5 +195,5 @@
               %p
                 = link_to [:admin, group], class: 'str-truncated-60' do
                   = group.full_name
-                %span.light.pull-right
+                %span.light.float-right
                   #{time_ago_with_tooltip(group.created_at)}
diff --git a/app/views/admin/deploy_keys/edit.html.haml b/app/views/admin/deploy_keys/edit.html.haml
index 3a59282e578..b50adef362f 100644
--- a/app/views/admin/deploy_keys/edit.html.haml
+++ b/app/views/admin/deploy_keys/edit.html.haml
@@ -3,7 +3,7 @@
 %hr
 
 %div
-  = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form form-horizontal' } do |f|
+  = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
     = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
     .form-actions
       = f.submit 'Save changes', class: 'btn-save btn'
diff --git a/app/views/admin/deploy_keys/index.html.haml b/app/views/admin/deploy_keys/index.html.haml
index 1420163fd5a..52ab8bae119 100644
--- a/app/views/admin/deploy_keys/index.html.haml
+++ b/app/views/admin/deploy_keys/index.html.haml
@@ -2,7 +2,7 @@
 
 %h3.page-title.deploy-keys-title
   Public deploy keys (#{@deploy_keys.count})
-  .pull-right
+  .float-right
     = link_to 'New deploy key', new_admin_deploy_key_path, class: 'btn btn-new btn-sm btn-inverted'
 
 - if @deploy_keys.any?
@@ -29,6 +29,6 @@
               %span.cgray
                 added #{time_ago_with_tooltip(deploy_key.created_at)}
             %td
-              .pull-right
+              .float-right
                 = link_to 'Edit', edit_admin_deploy_key_path(deploy_key), class: 'btn btn-sm'
                 = link_to 'Remove', admin_deploy_key_path(deploy_key), data: { confirm: 'Are you sure?'}, method: :delete, class: 'btn btn-sm btn-remove delete-key'
diff --git a/app/views/admin/deploy_keys/new.html.haml b/app/views/admin/deploy_keys/new.html.haml
index 13f5259698f..d4f8e340b69 100644
--- a/app/views/admin/deploy_keys/new.html.haml
+++ b/app/views/admin/deploy_keys/new.html.haml
@@ -3,7 +3,7 @@
 %hr
 
 %div
-  = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form form-horizontal' } do |f|
+  = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
     = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
     .form-actions
       = f.submit 'Create', class: 'btn-create btn'
diff --git a/app/views/admin/gitaly_servers/index.html.haml b/app/views/admin/gitaly_servers/index.html.haml
index 231f94dc95d..9b24f411a75 100644
--- a/app/views/admin/gitaly_servers/index.html.haml
+++ b/app/views/admin/gitaly_servers/index.html.haml
@@ -6,10 +6,10 @@
   - if @gitaly_servers.any?
     .table-holder
       %table.table.responsive-table
-        %thead.hidden-sm.hidden-xs
+        %thead
           %tr
             %th= _("Storage")
-            %th= n_("Gitaly|Address")
+            %th= s_("Gitaly|Address")
             %th= _("Server version")
             %th= _("Git version")
             %th= _("Up to date")
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index d9f05003904..c8008771236 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/app/views/admin/groups/_form.html.haml
@@ -1,23 +1,28 @@
-= form_for [:admin, @group], html: { class: "form-horizontal" } do |f|
+= form_for [:admin, @group] do |f|
   = form_errors(@group)
   = render 'shared/group_form', f: f
 
-  .form-group.group-description-holder
-    = f.label :avatar, "Group avatar", class: 'control-label'
+  = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :group
+  = render_if_exists 'admin/namespace_plan', f: f
+
+  .form-group.row.group-description-holder
+    = f.label :avatar, "Group avatar", class: 'col-form-label col-sm-2'
     .col-sm-10
       = render 'shared/choose_group_avatar_button', f: f
 
   = render 'shared/visibility_level', f: f, visibility_level: visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
 
-  .form-group
-    .col-sm-offset-2.col-sm-10
+  .form-group.row
+    .offset-sm-2.col-sm-10
       = render 'shared/allow_request_access', form: f
 
   = render 'groups/group_admin_settings', f: f
 
+  = render_if_exists 'namespaces/shared_runners_minutes_settings', group: @group, form: f
+
   - if @group.new_record?
-    .form-group
-      .col-sm-offset-2.col-sm-10
+    .form-group.row
+      .offset-sm-2.col-sm-10
         .alert.alert-info
           = render 'shared/group_tips'
     .form-actions
@@ -28,3 +33,5 @@
     .form-actions
       = f.submit 'Save changes', class: "btn btn-save"
       = link_to  'Cancel', admin_group_path(@group), class: "btn btn-cancel"
+
+= render_if_exists 'ldap_group_links/ldap_syncrhonizations', group: @group
diff --git a/app/views/admin/groups/_group.html.haml b/app/views/admin/groups/_group.html.haml
index 47cc2d4d27e..3f96988c203 100644
--- a/app/views/admin/groups/_group.html.haml
+++ b/app/views/admin/groups/_group.html.haml
@@ -1,3 +1,4 @@
+- group = local_assigns.fetch(:group)
 - css_class = 'no-description' if group.description.blank?
 
 %li.group-row{ class: css_class }
@@ -5,9 +6,11 @@
     = link_to 'Edit', admin_group_edit_path(group), id: "edit_#{dom_id(group)}", class: 'btn'
     = link_to 'Delete', [:admin, group], data: { confirm: "Are you sure you want to remove #{group.name}?" }, method: :delete, class: 'btn btn-remove'
   .stats
-    %span.badge
+    %span.badge.badge-pill
       = storage_counter(group.storage_size)
 
+    = render_if_exists 'admin/namespace_plan_badge', namespace: group
+
     %span
       = icon('bookmark')
       = number_with_delimiter(group.projects.count)
@@ -20,7 +23,7 @@
       = visibility_level_icon(group.visibility_level, fw: false)
 
   .avatar-container.s40
-    = group_icon(group, class: "avatar s40 hidden-xs")
+    = group_icon(group, class: "avatar s40 d-none d-sm-block")
   .title
     = link_to [:admin, group], class: 'group-name' do
       = group.full_name
diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index 324f3c0a22f..a40f98ad24f 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -4,16 +4,16 @@
 %h3.page-title
   Group: #{@group.full_name}
 
-  = link_to admin_group_edit_path(@group), class: "btn pull-right" do
+  = link_to admin_group_edit_path(@group), class: "btn float-right" do
     %i.fa.fa-pencil-square-o
     Edit
 %hr
 .row
   .col-md-6
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Group info:
-      %ul.well-list
+      %ul.content-list
         %li
           .avatar-container.s60
             = group_icon(@group, class: "avatar s60")
@@ -40,6 +40,8 @@
           %strong
             = @group.created_at.to_s(:medium)
 
+        = render_if_exists 'admin/namespace_plan_info', namespace: @group
+
         %li
           %span.light Storage:
           %strong= storage_counter(@group.storage_size)
@@ -58,67 +60,71 @@
             = group_lfs_status(@group)
             = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
 
-    .panel.panel-default
-      .panel-heading
-        %h3.panel-title
+        = render_if_exists 'namespaces/shared_runner_status', namespace: @group
+
+    = render_if_exists 'ldap_group_links/ldap_group_links_show', group: @group
+
+    .card
+      .card-header
+        %h3.card-title
           Projects
-          %span.badge
+          %span.badge.badge-pill
             #{@group.projects.count}
-      %ul.well-list
+      %ul.content-list
         - @projects.each do |project|
           %li
             %strong
               = link_to project.full_name, [:admin, project.namespace.becomes(Namespace), project]
-              %span.badge
+              %span.badge.badge-pill
                 = storage_counter(project.statistics.storage_size)
-            %span.pull-right.light
+            %span.float-right.light
               %span.monospace= project.full_path + '.git'
-      .panel-footer
+      .card-footer
         = paginate @projects, param_name: 'projects_page', theme: 'gitlab'
 
     - if @group.shared_projects.any?
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           Projects shared with #{@group.name}
-          %span.badge
+          %span.badge.badge-pill
             #{@group.shared_projects.count}
-        %ul.well-list
+        %ul.content-list
           - @group.shared_projects.sort_by(&:name).each do |project|
             %li
               %strong
                 = link_to project.full_name, [:admin, project.namespace.becomes(Namespace), project]
-                %span.badge
+                %span.badge.badge-pill
                   = storage_counter(project.statistics.storage_size)
-              %span.pull-right.light
+              %span.float-right.light
                 %span.monospace= project.full_path + '.git'
 
   .col-md-6
     - if can?(current_user, :admin_group_member, @group)
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           Add user(s) to the group:
-        .panel-body.form-holder
+        .card-body.form-holder
           %p.light
             Read more about project permissions
             %strong= link_to "here", help_page_path("user/permissions"), class: "vlink"
 
           = form_tag admin_group_members_update_path(@group), id: "new_project_member", class: "bulk_import", method: :put  do
             %div
-              = users_select_tag(:user_ids, multiple: true, email_user: true, scope: :all)
+              = users_select_tag(:user_ids, multiple: true, email_user: true, skip_ldap: @group.ldap_synced?, scope: :all)
             .prepend-top-10
               = select_tag :access_level, options_for_select(GroupMember.access_level_roles), class: "project-access-select select2"
             %hr
             = button_tag 'Add users to group', class: "btn btn-create"
       = render 'shared/members/requests', membership_source: @group, requesters: @requesters, force_mobile_view: true
 
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         %strong= @group.name
         group members
-        %span.badge= @group.members.size
-        .pull-right
-          = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@group, :members]), class: "btn btn-xs"
-      %ul.well-list.group-users-list.content-list.members-list
+        %span.badge.badge-pill= @group.members.size
+        .float-right
+          = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@group, :members]), class: "btn btn-sm"
+      %ul.content-list.group-users-list.content-list.members-list
         = render partial: 'shared/members/member', collection: @members, as: :member, locals: { show_controls: false }
-      .panel-footer
+      .card-footer
         = paginate @members, param_name: 'members_page', theme: 'gitlab'
diff --git a/app/views/admin/health_check/show.html.haml b/app/views/admin/health_check/show.html.haml
index e31fb58b205..d51ac854b04 100644
--- a/app/views/admin/health_check/show.html.haml
+++ b/app/views/admin/health_check/show.html.haml
@@ -5,7 +5,7 @@
 %div{ class: container_class }
   %h3.page-title= page_title
   .bs-callout.clearfix
-    .pull-left
+    .float-left
       %p
     #{ s_('HealthCheck|Access token is') }
     %code#health-check-token= Gitlab::CurrentSettings.health_check_access_token
@@ -25,8 +25,8 @@
         %code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token)
 
   %hr
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Current Status:
       - if no_errors
         = icon('circle', class: 'cgreen')
@@ -34,7 +34,7 @@
       - else
         = icon('warning', class: 'cred')
         #{ s_('HealthCheck|Unhealthy') }
-    .panel-body
+    .card-body
       - if no_errors
         #{ s_('HealthCheck|No Health Problems Detected') }
       - else
diff --git a/app/views/admin/hook_logs/_index.html.haml b/app/views/admin/hook_logs/_index.html.haml
index 91a8c0c62fe..1d7c9930b6a 100644
--- a/app/views/admin/hook_logs/_index.html.haml
+++ b/app/views/admin/hook_logs/_index.html.haml
@@ -18,8 +18,8 @@
           %tr
             %td
               = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
-            %td.hidden-xs
-              %span.label.label-gray.deploy-project-label
+            %td.d-none.d-sm-block
+              %span.badge.badge-gray.deploy-project-label
                 = hook_log.trigger.singularize.titleize
             %td
               = truncate(hook_log.url, length: 50)
diff --git a/app/views/admin/hook_logs/show.html.haml b/app/views/admin/hook_logs/show.html.haml
index 56127bacda2..2eb3ac85722 100644
--- a/app/views/admin/hook_logs/show.html.haml
+++ b/app/views/admin/hook_logs/show.html.haml
@@ -4,7 +4,7 @@
 
 %hr
 
-= link_to 'Resend Request', retry_admin_hook_hook_log_path(@hook, @hook_log), class: "btn btn-default pull-right prepend-left-10"
+= link_to 'Resend Request', retry_admin_hook_hook_log_path(@hook, @hook_log), class: "btn btn-default float-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 a6324a97fd5..3abde755f0f 100644
--- a/app/views/admin/hooks/_form.html.haml
+++ b/app/views/admin/hooks/_form.html.haml
@@ -6,39 +6,39 @@
 .form-group
   = form.label :token, 'Secret Token', class: 'label-light'
   = form.text_field :token, class: 'form-control'
-  %p.help-block
+  %p.form-text.text-muted
     Use this token to validate received payloads
 .form-group
   = form.label :url, 'Trigger', class: 'label-light'
   %ul.list-unstyled
     %li
-      .help-block
+      .form-text.text-muted
         System hook will be triggered on set of events like creating project
         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'
+      = form.check_box :repository_update_events, class: 'float-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
     %li
-      = form.check_box :push_events, class: 'pull-left'
+      = form.check_box :push_events, class: 'float-left'
       .prepend-left-20
         = form.label :push_events, class: 'list-label' do
           %strong Push events
         %p.light
           This URL will be triggered for each branch updated to the repository
     %li
-      = form.check_box :tag_push_events, class: 'pull-left'
+      = form.check_box :tag_push_events, class: 'float-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
     %li
-      = form.check_box :merge_requests_events, class: 'pull-left'
+      = form.check_box :merge_requests_events, class: 'float-left'
       .prepend-left-20
         = form.label :merge_requests_events, class: 'list-label' do
           %strong Merge request events
@@ -46,7 +46,7 @@
           This URL will be triggered when a merge request is created/updated/merged
 .form-group
   = form.label :enable_ssl_verification, 'SSL verification', class: 'label-light checkbox'
-  .checkbox
-    = form.label :enable_ssl_verification do
-      = form.check_box :enable_ssl_verification
+  .form-check
+    = form.check_box :enable_ssl_verification, class: 'form-check-input'
+    = form.label :enable_ssl_verification, class: 'form-check-label' do
       %strong Enable SSL verification
diff --git a/app/views/admin/hooks/edit.html.haml b/app/views/admin/hooks/edit.html.haml
index 629b1a9940f..b9a650e1f1f 100644
--- a/app/views/admin/hooks/edit.html.haml
+++ b/app/views/admin/hooks/edit.html.haml
@@ -9,12 +9,12 @@
 
 %hr
 
-= form_for @hook, as: :hook, url: admin_hook_path, html: { class: 'form-horizontal' } do |f|
+= form_for @hook, as: :hook, url: admin_hook_path do |f|
   = render partial: 'form', locals: { form: f, hook: @hook }
   .form-actions
     = f.submit 'Save changes', class: 'btn btn-create'
     = render 'shared/web_hooks/test_button', triggers: SystemHook.triggers, hook: @hook
-    = link_to 'Remove', admin_hook_path(@hook), method: :delete, class: 'btn btn-remove pull-right', data: { confirm: 'Are you sure?' }
+    = link_to 'Remove', admin_hook_path(@hook), method: :delete, class: 'btn btn-remove float-right', data: { confirm: 'Are you sure?' }
 
 %hr
 
diff --git a/app/views/admin/hooks/index.html.haml b/app/views/admin/hooks/index.html.haml
index d9e2ce5e74c..87f9b0e86a7 100644
--- a/app/views/admin/hooks/index.html.haml
+++ b/app/views/admin/hooks/index.html.haml
@@ -15,8 +15,8 @@
     %hr
 
     - if @hooks.any?
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           System hooks (#{@hooks.count})
         %ul.content-list
           - @hooks.each do |hook|
@@ -29,7 +29,7 @@
               %div
                 - SystemHook.triggers.each_value do |event|
                   - if hook.public_send(event)
-                    %span.label.label-gray= event.to_s.titleize
-                %span.label.label-gray SSL Verification: #{hook.enable_ssl_verification ? 'enabled' : 'disabled'}
+                    %span.badge.badge-gray= event.to_s.titleize
+                %span.badge.badge-gray SSL Verification: #{hook.enable_ssl_verification ? 'enabled' : 'disabled'}
 
 = render 'shared/plugins/index'
diff --git a/app/views/admin/identities/_form.html.haml b/app/views/admin/identities/_form.html.haml
index 5381b854f5c..231c0f70882 100644
--- a/app/views/admin/identities/_form.html.haml
+++ b/app/views/admin/identities/_form.html.haml
@@ -1,13 +1,13 @@
-= form_for [:admin, @user, @identity], html: { class: 'form-horizontal fieldset-form' } do |f|
+= form_for [:admin, @user, @identity], html: { class: 'fieldset-form' } do |f|
   = form_errors(@identity)
 
-  .form-group
-    = f.label :provider, class: 'control-label'
+  .form-group.row
+    = f.label :provider, class: 'col-form-label col-sm-2'
     .col-sm-10
       - values = Gitlab::Auth::OAuth::Provider.providers.map { |name| ["#{Gitlab::Auth::OAuth::Provider.label_for(name)} (#{name})", name] }
       = f.select :provider, values, { allow_blank: false }, class: 'form-control'
-  .form-group
-    = f.label :extern_uid, "Identifier", class: 'control-label'
+  .form-group.row
+    = f.label :extern_uid, "Identifier", class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.text_field :extern_uid, class: 'form-control', required: true
 
diff --git a/app/views/admin/identities/_identity.html.haml b/app/views/admin/identities/_identity.html.haml
index ef5a3f1d969..50fe9478a78 100644
--- a/app/views/admin/identities/_identity.html.haml
+++ b/app/views/admin/identities/_identity.html.haml
@@ -4,9 +4,9 @@
   %td
     = identity.extern_uid
   %td
-    = link_to edit_admin_user_identity_path(@user, identity), class: 'btn btn-xs btn-grouped' do
+    = link_to edit_admin_user_identity_path(@user, identity), class: 'btn btn-sm btn-grouped' do
       Edit
     = link_to [:admin, @user, identity], method: :delete,
-      class: 'btn btn-xs btn-danger',
+      class: 'btn btn-sm btn-danger',
       data: { confirm: "Are you sure you want to remove this identity?" } do
       Delete
diff --git a/app/views/admin/identities/index.html.haml b/app/views/admin/identities/index.html.haml
index ff67e59cdac..ee51fb3fda1 100644
--- a/app/views/admin/identities/index.html.haml
+++ b/app/views/admin/identities/index.html.haml
@@ -1,7 +1,7 @@
 - page_title "Identities", @user.name, "Users"
 = render 'admin/users/head'
 
-= link_to 'New identity', new_admin_user_identity_path, class: 'pull-right btn btn-new'
+= link_to 'New identity', new_admin_user_identity_path, class: 'float-right btn btn-new'
 - if @identities.present?
   .table-holder
     %table.table
diff --git a/app/views/admin/labels/_form.html.haml b/app/views/admin/labels/_form.html.haml
index d5e6bede36a..ee2d4c8430a 100644
--- a/app/views/admin/labels/_form.html.haml
+++ b/app/views/admin/labels/_form.html.haml
@@ -1,24 +1,25 @@
-= form_for [:admin, @label], html: { class: 'form-horizontal label-form js-requires-input' } do |f|
+= form_for [:admin, @label], html: { class: 'label-form js-requires-input' } do |f|
   = form_errors(@label)
 
-  .form-group
-    = f.label :title, class: 'control-label'
+  .form-group.row
+    = f.label :title, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.text_field :title, class: "form-control", required: true
-  .form-group
-    = f.label :description, class: 'control-label'
+  .form-group.row
+    = f.label :description, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.text_field :description, class: "form-control js-quick-submit"
-  .form-group
-    = f.label :color, "Background color", class: 'control-label'
+  .form-group.row
+    = f.label :color, _("Background color"), class: 'col-form-label col-sm-2'
     .col-sm-10
       .input-group
-        .input-group-addon.label-color-preview &nbsp;
+        .input-group-prepend
+          .input-group-text.label-color-preview &nbsp;
         = f.text_field :color, class: "form-control"
-      .help-block
-        Choose any color.
+      .form-text.text-muted
+        = _('Choose any color.')
         %br
-        Or you can choose one of suggested colors below
+        = _("Or you can choose one of the suggested colors below")
 
       .suggest-colors
         - suggested_colors.each do |color|
@@ -26,5 +27,5 @@
             &nbsp;
 
   .form-actions
-    = f.submit 'Save', class: 'btn btn-save js-save-button'
-    = link_to "Cancel", admin_labels_path, class: 'btn btn-cancel'
+    = f.submit _('Save'), class: 'btn btn-save js-save-button'
+    = link_to _("Cancel"), admin_labels_path, class: 'btn btn-cancel'
diff --git a/app/views/admin/labels/_label.html.haml b/app/views/admin/labels/_label.html.haml
index 77b174fbb27..c3ea2352898 100644
--- a/app/views/admin/labels/_label.html.haml
+++ b/app/views/admin/labels/_label.html.haml
@@ -2,6 +2,6 @@
   .label-row
     = render_colored_label(label, tooltip: false)
     = markdown_field(label, :description)
-    .pull-right
-      = link_to 'Edit', edit_admin_label_path(label), class: 'btn btn-sm'
-      = link_to 'Delete', admin_label_path(label), class: 'btn btn-sm btn-remove remove-row', method: :delete, remote: true, data: {confirm: "Delete this label? Are you sure?"}
+    .float-right
+      = link_to _('Edit'), edit_admin_label_path(label), class: 'btn btn-sm'
+      = link_to _('Delete'), admin_label_path(label), class: 'btn btn-sm btn-remove remove-row', method: :delete, remote: true, data: {confirm: "Delete this label? Are you sure?"}
diff --git a/app/views/admin/labels/destroy.js.haml b/app/views/admin/labels/destroy.js.haml
index 9d51762890f..7a0dcbdd1c6 100644
--- a/app/views/admin/labels/destroy.js.haml
+++ b/app/views/admin/labels/destroy.js.haml
@@ -1,2 +1,2 @@
 - if @labels.size == 0
-  $('.labels').load(document.URL + ' .light-well').hide().fadeIn(1000)
+  $('.labels').load(document.URL + ' .card.bg-light').hide().fadeIn(1000)
diff --git a/app/views/admin/labels/edit.html.haml b/app/views/admin/labels/edit.html.haml
index 96f0d404ac4..652ed095d00 100644
--- a/app/views/admin/labels/edit.html.haml
+++ b/app/views/admin/labels/edit.html.haml
@@ -1,7 +1,7 @@
-- add_to_breadcrumbs "Labels", admin_labels_path
-- breadcrumb_title "Edit Label"
-- page_title "Edit", @label.name, "Labels"
+- add_to_breadcrumbs _("Labels"), admin_labels_path
+- breadcrumb_title _("Edit Label")
+- page_title _("Edit"), @label.name, _("Labels")
 %h3.page-title
-  Edit Label
+  = _('Edit Label')
 %hr
 = render 'form'
diff --git a/app/views/admin/labels/index.html.haml b/app/views/admin/labels/index.html.haml
index 05d6b9ed238..d3e5247447a 100644
--- a/app/views/admin/labels/index.html.haml
+++ b/app/views/admin/labels/index.html.haml
@@ -1,10 +1,10 @@
-- page_title "Labels"
+- page_title _("Labels")
 
 %div
-  = link_to new_admin_label_path, class: "pull-right btn btn-nr btn-new" do
-    New label
+  = link_to new_admin_label_path, class: "float-right btn btn-nr btn-new" do
+    = _('New label')
   %h3.page-title
-    Labels
+    = _('Labels')
 %hr
 
 .labels
@@ -13,6 +13,6 @@
       = render @labels
     = paginate @labels, theme: 'gitlab'
   - else
-    .light-well
-      .nothing-here-block There are no labels yet
+    .card.bg-light
+      .nothing-here-block= _('There are no labels yet')
 
diff --git a/app/views/admin/labels/new.html.haml b/app/views/admin/labels/new.html.haml
index 0135ad0723d..20103fb8a29 100644
--- a/app/views/admin/labels/new.html.haml
+++ b/app/views/admin/labels/new.html.haml
@@ -1,5 +1,5 @@
-- page_title "New Label"
+- page_title _("New Label")
 %h3.page-title
-  New Label
+  = _('New Label')
 %hr
 = render 'form'
diff --git a/app/views/admin/logs/show.html.haml b/app/views/admin/logs/show.html.haml
index 78757b6384f..e4c0382a437 100644
--- a/app/views/admin/logs/show.html.haml
+++ b/app/views/admin/logs/show.html.haml
@@ -2,10 +2,10 @@
 - page_title "Logs"
 
 %div{ class: container_class }
-  %ul.nav-links.log-tabs
+  %ul.nav-links.log-tabs.nav.nav-tabs
     - @loggers.each do |klass|
-      %li{ class: active_when(klass == @loggers.first) }>
-        = link_to klass.file_name, "##{klass.file_name_noext}", data: { toggle: 'tab' }
+      %li.nav-item
+        = link_to klass.file_name, "##{klass.file_name_noext}", data: { toggle: 'tab' }, class: "#{active_when(klass == @loggers.first)} nav-link"
   .row-content-block
     To prevent performance issues admin logs output the last 2000 lines
   .tab-content
@@ -15,7 +15,7 @@
           .js-file-title.file-title
             %i.fa.fa-file
             = klass.file_name
-            .pull-right
+            .float-right
               = link_to '#', class: 'log-bottom' do
                 %i.fa.fa-arrow-down
                 Scroll down
diff --git a/app/views/admin/projects/_projects.html.haml b/app/views/admin/projects/_projects.html.haml
index b5d7b889504..00933d726d9 100644
--- a/app/views/admin/projects/_projects.html.haml
+++ b/app/views/admin/projects/_projects.html.haml
@@ -12,10 +12,10 @@
               = s_('AdminProjects|Delete')
 
           .stats
-            %span.badge
+            %span.badge.badge-pill
               = storage_counter(project.statistics.storage_size)
             - if project.archived
-              %span.label.label-warning archived
+              %span.badge.badge-warning archived
           .title
             = link_to [:admin, project.namespace.becomes(Namespace), project] do
               .dash-project-avatar
diff --git a/app/views/admin/projects/index.html.haml b/app/views/admin/projects/index.html.haml
index c37d8ac45b9..57de792f92d 100644
--- a/app/views/admin/projects/index.html.haml
+++ b/app/views/admin/projects/index.html.haml
@@ -15,7 +15,7 @@
             - namespace = Namespace.find(params[:namespace_id])
             - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
           = dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' })
-          .dropdown-menu.dropdown-select.dropdown-menu-align-right
+          .dropdown-menu.dropdown-select.dropdown-menu-right
             = dropdown_title('Namespaces')
             = dropdown_filter("Search for Namespace")
             = dropdown_content
@@ -25,7 +25,7 @@
           New Project
         = button_tag "Search", class: "btn btn-primary btn-search hide"
 
-    %ul.nav-links
+    %ul.nav-links.nav.nav-tabs
       - opts = params[:visibility_level].present? ? {} : { page: admin_projects_path }
       = nav_link(opts) do
         = link_to admin_projects_path do
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index c02ddafe108..ccba1c461fc 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -3,26 +3,26 @@
 - page_title @project.full_name, "Projects"
 %h3.page-title
   Project: #{@project.full_name}
-  = link_to edit_project_path(@project), class: "btn btn-nr pull-right" do
+  = link_to edit_project_path(@project), class: "btn btn-nr float-right" do
     %i.fa.fa-pencil-square-o
     Edit
 %hr
 - if @project.last_repository_check_failed?
   .row
     .col-md-12
-      .panel
-        .panel-heading.alert.alert-danger
+      .card
+        .card-header.alert.alert-danger
           Last repository check
-          = "(#{time_ago_in_words(@project.last_repository_check_at)} ago)"
+          = "(#{time_ago_with_tooltip(@project.last_repository_check_at)})"
           failed. See
           = link_to 'repocheck.log', admin_logs_path
           for error messages.
 .row
   .col-md-6
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Project info:
-      %ul.well-list
+      %ul.content-list
         %li
           %span.light Name:
           %strong
@@ -62,12 +62,16 @@
             = link_to @project.ssh_url_to_repo, project_path(@project)
         - if @project.repository.exists?
           %li
-            %span.light fs:
+            %span.light Gitaly storage name:
             %strong
-              = @project.repository.path_to_repo
+              = @project.repository.storage
+          %li
+            %span.light Gitaly relative path:
+            %strong
+              = @project.repository.relative_path
 
           %li
-            %span.light Storage:
+            %span.light Storage used:
             %strong= storage_counter(@project.statistics.storage_size)
             (
             = storage_counter(@project.statistics.repository_size)
@@ -97,7 +101,7 @@
         - if @project.archived?
           %li
             %span.light archived:
-            %strong repository is read-only
+            %strong project is read-only
 
         %li
           %span.light access:
@@ -106,14 +110,14 @@
               = visibility_level_icon(@project.visibility_level)
               = visibility_level_label(@project.visibility_level)
 
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Transfer project
-      .panel-body
-        = form_for @project, url: transfer_admin_project_path(@project), method: :put, html: { class: 'form-horizontal' } do |f|
-          .form-group
-            = f.label :new_namespace_id, "Namespace", class: 'control-label'
-            .col-sm-10
+      .card-body
+        = form_for @project, url: transfer_admin_project_path(@project), method: :put do |f|
+          .form-group.row
+            = f.label :new_namespace_id, "Namespace", class: 'col-form-label col-sm-3'
+            .col-sm-9
               .dropdown
                 = dropdown_toggle('Search for Namespace', { toggle: 'dropdown', field_name: 'new_namespace_id' }, { toggle_class: 'js-namespace-select large' })
                 .dropdown-menu.dropdown-select
@@ -122,14 +126,14 @@
                   = dropdown_content
                   = dropdown_loading
 
-          .form-group
-            .col-sm-offset-2.col-sm-10
+          .form-group.row
+            .offset-sm-3.col-sm-9
               = f.submit 'Transfer', class: 'btn btn-primary'
 
-    .panel.panel-default.repository-check
-      .panel-heading
+    .card.repository-check
+      .card-header
         Repository check
-      .panel-body
+      .card-body
         = form_for @project, url: repository_check_admin_project_path(@project), method: :post do |f|
           .form-group
             - if @project.last_repository_check_at.nil?
@@ -154,29 +158,29 @@
 
   .col-md-6
     - if @group
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           %strong= @group.name
           group members
-          %span.badge= @group_members.size
-          .pull-right
-            = link_to admin_group_path(@group), class: 'btn btn-xs' do
+          %span.badge.badge-pill= @group_members.size
+          .float-right
+            = link_to admin_group_path(@group), class: 'btn btn-sm' do
               = icon('pencil-square-o', text: 'Manage access')
-        %ul.well-list.content-list.members-list
+        %ul.content-list.members-list
           = render partial: 'shared/members/member', collection: @group_members, as: :member, locals: { show_controls: false }
-        .panel-footer
+        .card-footer
           = paginate @group_members, param_name: 'group_members_page', theme: 'gitlab'
 
     = render 'shared/members/requests', membership_source: @project, requesters: @requesters, force_mobile_view: true
 
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         %strong= @project.name
         project members
-        %span.badge= @project.users.size
-        .pull-right
-          = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@project, :members]), class: "btn btn-xs"
-      %ul.well-list.project_members.content-list.members-list
+        %span.badge.badge-pill= @project.users.size
+        .float-right
+          = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@project, :members]), class: "btn btn-sm"
+      %ul.content-list.project_members.members-list
         = render partial: 'shared/members/member', collection: @project_members, as: :member, locals: { show_controls: false }
-      .panel-footer
+      .card-footer
         = paginate @project_members, param_name: 'project_members_page', theme: 'gitlab'
diff --git a/app/views/admin/requests_profiles/index.html.haml b/app/views/admin/requests_profiles/index.html.haml
index cb02a750490..adfc67d66d0 100644
--- a/app/views/admin/requests_profiles/index.html.haml
+++ b/app/views/admin/requests_profiles/index.html.haml
@@ -13,8 +13,8 @@
   - if @profiles.present?
     .prepend-top-default
       - @profiles.each do |path, profiles|
-        .panel.panel-default.panel-small
-          .panel-heading
+        .card.card-small
+          .card-header
             %code= path
           %ul.content-list
             - profiles.each do |profile|
diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml
index e1cee584929..a6cd39edcf0 100644
--- a/app/views/admin/runners/_runner.html.haml
+++ b/app/views/admin/runners/_runner.html.haml
@@ -1,13 +1,15 @@
 %tr{ id: dom_id(runner) }
   %td
     - if runner.shared?
-      %span.label.label-success shared
+      %span.badge.badge-success shared
+    - elsif runner.group_type?
+      %span.badge.badge-success group
     - else
-      %span.label.label-info specific
+      %span.badge.badge-info specific
     - if runner.locked?
-      %span.label.label-warning locked
+      %span.badge.badge-warning locked
     - unless runner.active?
-      %span.label.label-danger paused
+      %span.badge.badge-danger paused
 
   %td
     = link_to admin_runner_path(runner) do
@@ -19,7 +21,7 @@
   %td
     = runner.ip_address
   %td
-    - if runner.shared?
+    - if runner.shared? || runner.group_type?
       n/a
     - else
       = runner.projects.count(:all)
@@ -27,15 +29,15 @@
     #{runner.builds.count(:all)}
   %td
     - runner.tag_list.sort.each do |tag|
-      %span.label.label-primary
+      %span.badge.badge-primary
         = tag
   %td
     - if runner.contacted_at
-      #{time_ago_in_words(runner.contacted_at)} ago
+      = time_ago_with_tooltip runner.contacted_at
     - else
       Never
   %td.admin-runner-btn-group-cell
-    .pull-right.btn-group
+    .float-right.btn-group
       = link_to admin_runner_path(runner), class: 'btn btn-sm btn-default has-tooltip', title: 'Edit', ref: 'tooltip', aria: { label: 'Edit' }, data: { placement: 'top', container: 'body'} do
         = icon('pencil')
       &nbsp;
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index 9f13dbbbd82..8dfd176f1b7 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -14,20 +14,23 @@
       %span Each Runner can be in one of the following states:
       %ul
         %li
-          %span.label.label-success shared
+          %span.badge.badge-success shared
           \- Runner runs jobs from all unassigned projects
         %li
-          %span.label.label-info specific
+          %span.badge.badge-success group
+          \- Runner runs jobs from all unassigned projects in its group
+        %li
+          %span.badge.badge-info specific
           \- Runner runs jobs from assigned projects
         %li
-          %span.label.label-warning locked
+          %span.badge.badge-warning locked
           \- Runner cannot be assigned to other projects
         %li
-          %span.label.label-danger paused
+          %span.badge.badge-danger paused
           \- Runner will not receive any new jobs
 
   .bs-callout.clearfix
-    .pull-left
+    .float-left
       %p
         You can reset runners registration token by pressing a button below.
       .prepend-top-10
@@ -39,13 +42,13 @@
            locals: { registration_token: Gitlab::CurrentSettings.runners_registration_token }
 
   .append-bottom-20.clearfix
-    .pull-left
+    .float-left
       = form_tag admin_runners_path, id: 'runners-search', class: 'form-inline', method: :get do
         .form-group
-          = search_field_tag :search, params[:search], class: 'form-control', placeholder: 'Runner description or token', spellcheck: false
+          = search_field_tag :search, params[:search], class: 'form-control input-short', placeholder: 'Runner description or token', spellcheck: false
         = submit_tag 'Search', class: 'btn'
 
-    .pull-right.light
+    .float-right.light
       Runners with last contact more than a minute ago: #{@active_runners_cnt}
 
   %br
@@ -64,7 +67,7 @@
               %th Projects
               %th Jobs
               %th Tags
-              %th= link_to 'Last contact', admin_runners_path(params.slice(:search).merge(sort: 'contacted_asc'))
+              %th= link_to 'Last contact', admin_runners_path(safe_params.slice(:search).merge(sort: 'contacted_asc'))
               %th
 
           - @runners.each do |runner|
diff --git a/app/views/admin/runners/show.html.haml b/app/views/admin/runners/show.html.haml
index 37269862de6..8a0c2bf4c5f 100644
--- a/app/views/admin/runners/show.html.haml
+++ b/app/views/admin/runners/show.html.haml
@@ -1,7 +1,7 @@
 = content_for :title do
   %h3.project-title
     Runner ##{@runner.id}
-    .pull-right
+    .float-right
       - if @runner.shared?
         %span.runner-state.runner-state-shared
           Shared
@@ -19,6 +19,9 @@
     %p
       If you want Runners to build only specific projects, enable them in the table below.
       Keep in mind that this is a one way transition.
+- elsif @runner.group_type?
+  .bs-callout.bs-callout-success
+    %h4 This runner will process jobs from all projects in its group and subgroups
 - else
   .bs-callout.bs-callout-info
     %h4 This Runner will process jobs only from ASSIGNED projects
@@ -26,7 +29,7 @@
 %hr
 
 .append-bottom-20
-  = render '/projects/runners/form', runner: @runner, runner_form_url: admin_runner_path(@runner)
+  = render 'shared/runners/form', runner: @runner, runner_form_url: admin_runner_path(@runner)
 
 .row
   .col-md-6
@@ -45,8 +48,8 @@
                 %strong
                   = project.full_name
               %td
-                .pull-right
-                  = link_to 'Disable', [:admin, project.namespace.becomes(Namespace), project, runner_project], method: :delete, class: 'btn btn-danger btn-xs'
+                .float-right
+                  = link_to 'Disable', [:admin, project.namespace.becomes(Namespace), project, runner_project], method: :delete, class: 'btn btn-danger btn-sm'
 
     %table.table.unassigned-projects
       %thead
@@ -67,10 +70,10 @@
           %td
             = project.full_name
           %td
-            .pull-right
+            .float-right
               = form_for [:admin, project.namespace.becomes(Namespace), project, project.runner_projects.new] do |f|
                 = f.hidden_field :runner_id, value: @runner.id
-                = f.submit 'Enable', class: 'btn btn-xs'
+                = f.submit 'Enable', class: 'btn btn-sm'
     = paginate @projects, theme: "gitlab"
 
   .col-md-6
@@ -108,4 +111,4 @@
 
           %td.timestamp
             - if build.finished_at
-              %span #{time_ago_in_words build.finished_at} ago
+              %span= time_ago_with_tooltip build.finished_at
diff --git a/app/views/admin/services/_form.html.haml b/app/views/admin/services/_form.html.haml
index e5b8ebdf613..993006e8745 100644
--- a/app/views/admin/services/_form.html.haml
+++ b/app/views/admin/services/_form.html.haml
@@ -3,9 +3,8 @@
 
 %p #{@service.description} template
 
-= form_for :service, url: admin_application_settings_service_path, method: :put, html: { class: 'form-horizontal fieldset-form' } do |form|
+= form_for :service, url: admin_application_settings_service_path, method: :put, html: { class: 'fieldset-form' } do |form|
   = render 'shared/service_settings', form: form, subject: @service
 
   .footer-block.row-content-block
-    .form-actions
-      = form.submit 'Save', class: 'btn btn-save'
+    = form.submit 'Save', class: 'btn btn-save'
diff --git a/app/views/admin/services/index.html.haml b/app/views/admin/services/index.html.haml
index 50132572096..89872c1b91a 100644
--- a/app/views/admin/services/index.html.haml
+++ b/app/views/admin/services/index.html.haml
@@ -20,5 +20,4 @@
         %td
           = service.description
         %td.light
-          = time_ago_in_words service.updated_at
-          ago
+          = time_ago_with_tooltip service.updated_at
diff --git a/app/views/admin/spam_logs/_spam_log.html.haml b/app/views/admin/spam_logs/_spam_log.html.haml
index ea6a0c4fb77..9d47dc1cce5 100644
--- a/app/views/admin/spam_logs/_spam_log.html.haml
+++ b/app/views/admin/spam_logs/_spam_log.html.haml
@@ -24,16 +24,16 @@
   %td
     - if user
       = link_to 'Remove user', admin_spam_log_path(spam_log, remove_user: true),
-        data: { confirm: "USER #{user.name} WILL BE REMOVED! Are you sure?" }, method: :delete, class: "btn btn-xs btn-remove"
+        data: { confirm: "USER #{user.name} WILL BE REMOVED! Are you sure?" }, method: :delete, class: "btn btn-sm btn-remove"
   %td
     - if spam_log.submitted_as_ham?
-      .btn.btn-xs.disabled
+      .btn.btn-sm.disabled
         Submitted as ham
     - else
-      = link_to 'Submit as ham', mark_as_ham_admin_spam_log_path(spam_log), method: :post, class: 'btn btn-xs btn-warning'
+      = link_to 'Submit as ham', mark_as_ham_admin_spam_log_path(spam_log), method: :post, class: 'btn btn-sm btn-warning'
     - if user && !user.blocked?
-      = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: "btn btn-xs"
+      = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: "btn btn-sm"
     - else
-      .btn.btn-xs.disabled
+      .btn.btn-sm.disabled
         Already blocked
-    = link_to 'Remove log', [:admin, spam_log], remote: true, method: :delete, class: "btn btn-xs btn-close js-remove-tr"
+    = link_to 'Remove log', [:admin, spam_log], remote: true, method: :delete, class: "btn btn-sm btn-close js-remove-tr"
diff --git a/app/views/admin/system_info/show.html.haml b/app/views/admin/system_info/show.html.haml
index 23f9927cfee..b19934e028d 100644
--- a/app/views/admin/system_info/show.html.haml
+++ b/app/views/admin/system_info/show.html.haml
@@ -5,7 +5,7 @@
   .prepend-top-default
   .row
     .col-sm-4
-      .light-well
+      .card.bg-light.light-well
         %h4 CPU
         .data
           - if @cpus
@@ -14,7 +14,7 @@
             = icon('warning', class: 'text-warning')
             Unable to collect CPU info
     .col-sm-4
-      .light-well
+      .card.bg-light.light-well
         %h4 Memory Usage
         .data
           - if @memory
@@ -23,7 +23,7 @@
             = icon('warning', class: 'text-warning')
             Unable to collect memory info
     .col-sm-4
-      .light-well
+      .card.bg-light.light-well
         %h4 Disk Usage
         .data
           - @disks.each do |disk|
@@ -31,7 +31,7 @@
             %p= disk[:disk_name]
             %p= disk[:mount_path]
     .col-sm-4
-      .light-well
+      .card.bg-light.light-well
         %h4 Uptime
         .data
           %h1= distance_of_time_in_words_to_now(Rails.application.config.booted_at)
diff --git a/app/views/admin/users/_access_levels.html.haml b/app/views/admin/users/_access_levels.html.haml
index 794aaec89bd..04acc5f8423 100644
--- a/app/views/admin/users/_access_levels.html.haml
+++ b/app/views/admin/users/_access_levels.html.haml
@@ -1,26 +1,26 @@
 %fieldset
   %legend Access
-  .form-group
-    = f.label :projects_limit, class: 'control-label'
+  .form-group.row
+    = f.label :projects_limit, class: 'col-form-label col-sm-2'
     .col-sm-10= f.number_field :projects_limit, min: 0, max: Gitlab::Database::MAX_INT_VALUE, class: 'form-control'
 
-  .form-group
-    = f.label :can_create_group, class: 'control-label'
+  .form-group.row
+    = f.label :can_create_group, class: 'col-form-label col-sm-2'
     .col-sm-10= f.check_box :can_create_group
 
-  .form-group
-    = f.label :access_level, class: 'control-label'
+  .form-group.row
+    = f.label :access_level, class: 'col-form-label col-sm-2'
     .col-sm-10
       - editing_current_user = (current_user == @user)
 
       = f.radio_button :access_level, :regular, disabled: editing_current_user
-      = label_tag :regular do
+      = label_tag :regular, class: 'font-weight-bold' do
         Regular
       %p.light
         Regular users have access to their groups and projects
 
       = f.radio_button :access_level, :admin, disabled: editing_current_user
-      = label_tag :admin do
+      = label_tag :admin, class: 'font-weight-bold' do
         Admin
       %p.light
         Administrators have access to all groups, projects and users and can manage all features in this installation
@@ -28,8 +28,8 @@
         %p.light
           You cannot remove your own admin rights.
 
-  .form-group
-    = f.label :external, class: 'control-label'
+  .form-group.row
+    = f.label :external, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.check_box :external do
         External
diff --git a/app/views/admin/users/_form.html.haml b/app/views/admin/users/_form.html.haml
index e911af3f6f9..58be07fc83e 100644
--- a/app/views/admin/users/_form.html.haml
+++ b/app/views/admin/users/_form.html.haml
@@ -1,21 +1,21 @@
 .user_new
-  = form_for [:admin, @user], html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_for [:admin, @user], html: { class: 'fieldset-form' } do |f|
     = form_errors(@user)
 
     %fieldset
       %legend Account
-      .form-group
-        = f.label :name, class: 'control-label'
+      .form-group.row
+        = f.label :name, class: 'col-form-label col-sm-2'
         .col-sm-10
           = f.text_field :name, required: true, autocomplete: 'off', class: 'form-control'
           %span.help-inline * required
-      .form-group
-        = f.label :username, class: 'control-label'
+      .form-group.row
+        = f.label :username, class: 'col-form-label col-sm-2'
         .col-sm-10
           = f.text_field :username, required: true, autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', spellcheck: false, class: 'form-control'
           %span.help-inline * required
-      .form-group
-        = f.label :email, class: 'control-label'
+      .form-group.row
+        = f.label :email, class: 'col-form-label col-sm-2'
         .col-sm-10
           = f.text_field :email, required: true, autocomplete: 'off', class: 'form-control'
           %span.help-inline * required
@@ -23,8 +23,8 @@
     - if @user.new_record?
       %fieldset
         %legend Password
-        .form-group
-          = f.label :password, class: 'control-label'
+        .form-group.row
+          = f.label :password, class: 'col-form-label col-sm-2'
           .col-sm-10
             %strong
               Reset link will be generated and sent to the user.
@@ -33,33 +33,33 @@
     - else
       %fieldset
         %legend Password
-        .form-group
-          = f.label :password, class: 'control-label'
+        .form-group.row
+          = f.label :password, class: 'col-form-label col-sm-2'
           .col-sm-10= f.password_field :password, disabled: f.object.force_random_password, class: 'form-control'
-        .form-group
-          = f.label :password_confirmation, class: 'control-label'
+        .form-group.row
+          = f.label :password_confirmation, class: 'col-form-label col-sm-2'
           .col-sm-10= f.password_field :password_confirmation, disabled: f.object.force_random_password, class: 'form-control'
 
     = render partial: 'access_levels', locals: { f: f }
 
     %fieldset
       %legend Profile
-      .form-group
-        = f.label :avatar, class: 'control-label'
+      .form-group.row
+        = f.label :avatar, class: 'col-form-label col-sm-2'
         .col-sm-10
           = f.file_field :avatar
 
-      .form-group
-        = f.label :skype, class: 'control-label'
+      .form-group.row
+        = f.label :skype, class: 'col-form-label col-sm-2'
         .col-sm-10= f.text_field :skype, class: 'form-control'
-      .form-group
-        = f.label :linkedin, class: 'control-label'
+      .form-group.row
+        = f.label :linkedin, class: 'col-form-label col-sm-2'
         .col-sm-10= f.text_field :linkedin, class: 'form-control'
-      .form-group
-        = f.label :twitter, class: 'control-label'
+      .form-group.row
+        = f.label :twitter, class: 'col-form-label col-sm-2'
         .col-sm-10= f.text_field :twitter, class: 'form-control'
-      .form-group
-        = f.label :website_url, 'Website', class: 'control-label'
+      .form-group.row
+        = f.label :website_url, 'Website', class: 'col-form-label col-sm-2'
         .col-sm-10= f.text_field :website_url, class: 'form-control'
 
     .form-actions
diff --git a/app/views/admin/users/_head.html.haml b/app/views/admin/users/_head.html.haml
index be41c33b853..bfbc16d37a0 100644
--- a/app/views/admin/users/_head.html.haml
+++ b/app/views/admin/users/_head.html.haml
@@ -7,14 +7,14 @@
   - if @user.admin
     %span.cred (Admin)
 
-  .pull-right
+  .float-right
     - if @user != current_user && @user.can?(:log_in)
       = link_to 'Impersonate', impersonate_admin_user_path(@user), method: :post, class: "btn btn-nr btn-grouped btn-info"
     = link_to edit_admin_user_path(@user), class: "btn btn-nr btn-grouped" do
       %i.fa.fa-pencil-square-o
       Edit
 %hr
-%ul.nav-links
+%ul.nav-links.nav.nav-tabs
   = nav_link(path: 'users#show') do
     = link_to "Account", admin_user_path(@user)
   = nav_link(path: 'users#projects') do
diff --git a/app/views/admin/users/_profile.html.haml b/app/views/admin/users/_profile.html.haml
index 6bc217f84cc..4fcb9aad343 100644
--- a/app/views/admin/users/_profile.html.haml
+++ b/app/views/admin/users/_profile.html.haml
@@ -1,7 +1,7 @@
-.panel.panel-default
-  .panel-heading
+.card
+  .card-header
     Profile
-  %ul.well-list
+  %ul.content-list
     %li
       %span.light Member since
       %strong= user.created_at.to_s(:medium)
diff --git a/app/views/admin/users/_projects.html.haml b/app/views/admin/users/_projects.html.haml
index a126a858ea8..81cfb71af16 100644
--- a/app/views/admin/users/_projects.html.haml
+++ b/app/views/admin/users/_projects.html.haml
@@ -1,13 +1,13 @@
 - if local_assigns.has_key?(:contributed_projects) && contributed_projects.present?
-  .panel.panel-default.contributed-projects
-    .panel-heading Projects contributed to
+  .card.contributed-projects
+    .card-header Projects contributed to
     = render 'shared/projects/list',
       projects: contributed_projects.sort_by(&:star_count).reverse,
       projects_limit: 5, stars: true, avatar: false
 
 - if local_assigns.has_key?(:projects) && projects.present?
-  .panel.panel-default
-    .panel-heading Personal projects
+  .card
+    .card-header Personal projects
     = render 'shared/projects/list',
       projects: projects.sort_by(&:star_count).reverse,
       projects_limit: 10, stars: true, avatar: false
diff --git a/app/views/admin/users/_user.html.haml b/app/views/admin/users/_user.html.haml
index bbfeceff5b9..b2163ee85fa 100644
--- a/app/views/admin/users/_user.html.haml
+++ b/app/views/admin/users/_user.html.haml
@@ -5,11 +5,11 @@
     .user-name.row-title.str-truncated-100
       = link_to user.name, [:admin, user]
     - if user.blocked?
-      %span.label.label-danger blocked
+      %span.badge.badge-danger blocked
     - if user.admin?
-      %span.label.label-success Admin
+      %span.badge.badge-success Admin
     - if user.external?
-      %span.label.label-default External
+      %span.badge.badge-secondary External
     - if user == current_user
       %span It's you!
     .row-second-line.str-truncated-100
@@ -21,7 +21,7 @@
         %a.dropdown-new.btn.btn-default#project-settings-button{ href: '#', data: { toggle: 'dropdown' } }
           = icon('cog')
           = icon('caret-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
+        %ul.dropdown-menu.dropdown-menu-right
           %li.dropdown-header
             Settings
             %li
@@ -33,7 +33,7 @@
                 = link_to 'Block', block_admin_user_path(user), data: { confirm: 'USER WILL BE BLOCKED! Are you sure?' }, method: :put
             - if user.access_locked?
               %li
-                = link_to 'Unlock', unlock_admin_user_path(user), method: :put, class: 'btn-grouped btn btn-xs btn-success', data: { confirm: 'Are you sure?' }
+                = link_to _('Unlock'), unlock_admin_user_path(user), method: :put, data: { confirm: _('Are you sure?') }
           - if can?(current_user, :destroy_user, user)
             %li.divider
             - if user.can_be_removed?
@@ -43,7 +43,7 @@
                   delete_user_url: admin_user_path(user),
                   block_user_url: block_admin_user_path(user),
                   username: user.name,
-                  delete_contributions: 'false' }, type: 'button' }
+                  delete_contributions: false }, type: 'button' }
                   = s_('AdminUsers|Delete user')
 
             %li
@@ -52,5 +52,5 @@
                 delete_user_url: admin_user_path(user, hard_delete: true),
                 block_user_url: block_admin_user_path(user),
                 username: user.name,
-                delete_contributions: 'true' }, type: 'button' }
+                delete_contributions: true }, type: 'button' }
                 = s_('AdminUsers|Delete user and contributions')
diff --git a/app/views/admin/users/index.html.haml b/app/views/admin/users/index.html.haml
index 0ef4b71f4fe..faeb82656ba 100644
--- a/app/views/admin/users/index.html.haml
+++ b/app/views/admin/users/index.html.haml
@@ -13,7 +13,7 @@
         .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
+          %ul.dropdown-menu.dropdown-menu-right
             %li.dropdown-header
               Sort by
             %li
@@ -38,35 +38,35 @@
         = icon('angle-left')
       .fade-right
         = icon('angle-right')
-      %ul.nav-links.scrolling-tabs
+      %ul.nav-links.nav.nav-tabs.scrolling-tabs
         = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
           = link_to admin_users_path do
             Active
-            %small.badge= number_with_delimiter(User.active.count)
+            %small.badge.badge-pill= limited_counter_with_delimiter(User.active)
         = nav_link(html_options: { class: active_when(params[:filter] == 'admins') }) do
           = link_to admin_users_path(filter: "admins") do
             Admins
-            %small.badge= number_with_delimiter(User.admins.count)
+            %small.badge.badge-pill= limited_counter_with_delimiter(User.admins)
         = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_enabled')} filter-two-factor-enabled" }) do
           = link_to admin_users_path(filter: 'two_factor_enabled') do
             2FA Enabled
-            %small.badge= number_with_delimiter(User.with_two_factor.count)
+            %small.badge.badge-pill= limited_counter_with_delimiter(User.with_two_factor)
         = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_disabled')} filter-two-factor-disabled" }) do
           = link_to admin_users_path(filter: 'two_factor_disabled') do
             2FA Disabled
-            %small.badge= number_with_delimiter(User.without_two_factor.count)
+            %small.badge.badge-pill= limited_counter_with_delimiter(User.without_two_factor)
         = nav_link(html_options: { class: active_when(params[:filter] == 'external') }) do
           = link_to admin_users_path(filter: 'external') do
             External
-            %small.badge= number_with_delimiter(User.external.count)
+            %small.badge.badge-pill= limited_counter_with_delimiter(User.external)
         = nav_link(html_options: { class: active_when(params[:filter] == 'blocked') }) do
           = link_to admin_users_path(filter: "blocked") do
             Blocked
-            %small.badge= number_with_delimiter(User.blocked.count)
+            %small.badge.badge-pill= limited_counter_with_delimiter(User.blocked)
         = nav_link(html_options: { class: active_when(params[:filter] == 'wop') }) do
           = link_to admin_users_path(filter: "wop") do
             Without projects
-            %small.badge= number_with_delimiter(User.without_projects.count)
+            %small.badge.badge-pill= limited_counter_with_delimiter(User.without_projects)
 
   %ul.flex-list.content-list
     - if @users.empty?
diff --git a/app/views/admin/users/projects.html.haml b/app/views/admin/users/projects.html.haml
index 96835ee9af5..cf50d45f755 100644
--- a/app/views/admin/users/projects.html.haml
+++ b/app/views/admin/users/projects.html.haml
@@ -2,19 +2,19 @@
 = render 'admin/users/head'
 
 - if @user.groups.any?
-  .panel.panel-default
-    .panel-heading Group projects
-    %ul.well-list
+  .card
+    .card-header Group projects
+    %ul.hover-list
       - @user.group_members.includes(:source).each do |group_member|
         - group = group_member.group
         %li.group_member
           %strong= link_to group.name, admin_group_path(group)
           &ndash; access to
           #{pluralize(group.projects.count, 'project')}
-          .pull-right
+          .float-right
             %span.light.vertical-align-middle= group_member.human_access
             - unless group_member.owner?
-              = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member) }, method: :delete, remote: true, class: "btn-xs btn btn-remove prepend-left-10", title: 'Remove user from group' do
+              = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member) }, method: :delete, remote: true, class: "btn-sm btn btn-remove prepend-left-10", title: 'Remove user from group' do
                 %i.fa.fa-times.fa-inverse
 
 .row
@@ -26,9 +26,9 @@
 
 
   .col-md-6
-    .panel.panel-default
-      .panel-heading Joined projects (#{@joined_projects.count})
-      %ul.well-list
+    .card
+      .card-header Joined projects (#{@joined_projects.count})
+      %ul.hover-list
         - @joined_projects.sort_by(&:full_name).each do |project|
           - member = project.team.find_member(@user.id)
           %li.project_member
@@ -37,12 +37,12 @@
                 = project.full_name
 
             - if member
-              .pull-right
+              .float-right
                 - if member.owner?
                   %span.light Owner
                 - else
                   %span.light.vertical-align-middle= member.human_access
 
                   - if member.respond_to? :project
-                    = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn-xs btn btn-remove prepend-left-10", title: 'Remove user from project' do
+                    = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn-sm btn btn-remove prepend-left-10", title: 'Remove user from project' do
                       %i.fa.fa-times
diff --git a/app/views/admin/users/show.html.haml b/app/views/admin/users/show.html.haml
index ec3be869797..b0562226f5f 100644
--- a/app/views/admin/users/show.html.haml
+++ b/app/views/admin/users/show.html.haml
@@ -5,10 +5,10 @@
 
 .row
   .col-md-6
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         = @user.name
-      %ul.well-list
+      %ul.content-list
         %li
           = image_tag avatar_icon_for_user(@user, 60), class: "avatar s60"
         %li
@@ -18,10 +18,10 @@
               = @user.username
     = render 'admin/users/profile', user: @user
 
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Account:
-      %ul.well-list
+      %ul.content-list
         %li
           %span.light Name:
           %strong= @user.name
@@ -37,7 +37,7 @@
           %li
             %span.light Secondary email:
             %strong= email.email
-            = link_to remove_email_admin_user_path(@user, email), data: { confirm: "Are you sure you want to remove #{email.email}?" }, method: :delete, class: "btn-xs btn btn-remove pull-right", title: 'Remove secondary email', id: "remove_email_#{email.id}" do
+            = link_to remove_email_admin_user_path(@user, email), data: { confirm: "Are you sure you want to remove #{email.email}?" }, method: :delete, class: "btn-sm btn btn-remove float-right", title: 'Remove secondary email', id: "remove_email_#{email.id}" do
               %i.fa.fa-times
 
         %li.two-factor-status
@@ -45,7 +45,7 @@
           %strong{ class: @user.two_factor_enabled? ? 'cgreen' : 'cred' }
             - if @user.two_factor_enabled?
               Enabled
-              = link_to 'Disable', disable_two_factor_admin_user_path(@user), data: {confirm: 'Are you sure?'}, method: :patch, class: 'btn btn-xs btn-remove pull-right', title: 'Disable Two-factor Authentication'
+              = link_to 'Disable', disable_two_factor_admin_user_path(@user), data: {confirm: 'Are you sure?'}, method: :patch, class: 'btn btn-sm btn-remove float-right', title: 'Disable Two-factor Authentication'
             - else
               Disabled
 
@@ -128,20 +128,20 @@
   .col-md-6
     - unless @user == current_user
       - unless @user.confirmed?
-        .panel.panel-info
-          .panel-heading
+        .card.bg-info
+          .card-header
             Confirm user
-          .panel-body
+          .card-body
             - if @user.unconfirmed_email.present?
               - email = " (#{@user.unconfirmed_email})"
             %p This user has an unconfirmed email address#{email}. You may force a confirmation.
             %br
             = link_to 'Confirm user', confirm_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' }
       - if @user.blocked?
-        .panel.panel-info
-          .panel-heading
+        .card.bg-info
+          .card-header
             This user is blocked
-          .panel-body
+          .card-body
             %p A blocked user cannot:
             %ul
               %li Log in
@@ -149,10 +149,10 @@
             %br
             = link_to 'Unblock user', unblock_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' }
       - else
-        .panel.panel-warning
-          .panel-heading
+        .card.bg-warning
+          .card-header
             Block this user
-          .panel-body
+          .card-body
             %p Blocking user has the following effects:
             %ul
               %li User will not be able to login
@@ -162,28 +162,28 @@
             %br
             = link_to 'Block user', block_admin_user_path(@user), data: { confirm: 'USER WILL BE BLOCKED! Are you sure?' }, method: :put, class: "btn btn-warning"
       - if @user.access_locked?
-        .panel.panel-info
-          .panel-heading
+        .card.bg-info
+          .card-header
             This account has been locked
-          .panel-body
+          .card-body
             %p This user has been temporarily locked due to excessive number of failed logins. You may manually unlock the account.
             %br
             = link_to 'Unlock user', unlock_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' }
 
-      .panel.panel-danger
-        .panel-heading
+      .card.bg-danger
+        .card-header
           = s_('AdminUsers|Delete user')
-        .panel-body
+        .card-body
           - if @user.can_be_removed? && can?(current_user, :destroy_user, @user)
             %p Deleting a user has the following effects:
             = render 'users/deletion_guidance', user: @user
             %br
-            %button.delete-user-button.btn.text-danger{ data: { toggle: 'modal',
+            %button.delete-user-button.btn.btn-danger{ data: { toggle: 'modal',
               target: '#delete-user-modal',
               delete_user_url: admin_user_path(@user),
               block_user_url: block_admin_user_path(@user),
               username: @user.name,
-              delete_contributions: 'false' }, type: 'button' }
+              delete_contributions: false }, type: 'button' }
               = s_('AdminUsers|Delete user')
           - else
             - if @user.solo_owned_groups.present?
@@ -196,10 +196,10 @@
               %p
                 You don't have access to delete this user.
 
-      .panel.panel-danger
-        .panel-heading
+      .card.bg-danger
+        .card-header
           = s_('AdminUsers|Delete user and contributions')
-        .panel-body
+        .card-body
           - if can?(current_user, :destroy_user, @user)
             %p
               This option deletes the user and any contributions that
@@ -210,12 +210,12 @@
               the user, and projects in them, will also be removed. Commits
               to other projects are unaffected.
             %br
-              %button.delete-user-button.btn.text-danger{ data: { toggle: 'modal',
+              %button.delete-user-button.btn.btn-danger{ data: { toggle: 'modal',
                 target: '#delete-user-modal',
                 delete_user_url: admin_user_path(@user, hard_delete: true),
                 block_user_url: block_admin_user_path(@user),
                 username: @user.name,
-                delete_contributions: 'true' }, type: 'button' }
+                delete_contributions: true }, type: 'button' }
                 = s_('AdminUsers|Delete user and contributions')
           - else
             %p
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index 5f07d2720c2..8ca9fb4512e 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -3,18 +3,18 @@
 .awards.js-awards-block{ class: ("hidden" if !inline && grouped_emojis.empty?), data: { award_url: toggle_award_url(awardable) } }
   - awards_sort(grouped_emojis).each do |emoji, awards|
     %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button",
-      class: [(award_state_class(awards, current_user)), (award_user_authored_class(emoji) if user_authored)],
+      class: [(award_state_class(awardable, awards, current_user)), (award_user_authored_class(emoji) if user_authored)],
       data: { placement: "bottom", title: award_user_list(awards, current_user) } }
       = emoji_icon(emoji)
       %span.award-control-text.js-counter
         = awards.count
 
-  - if current_user
+  - if can?(current_user, :award_emoji, awardable)
     .award-menu-holder.js-award-holder
       %button.btn.award-control.has-tooltip.js-add-award{ type: 'button',
-        'aria-label': 'Add reaction',
+        'aria-label': _('Add reaction'),
         class: ("js-user-authored" if user_authored),
-        data: { title: 'Add reaction', 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/lints/show.html.haml b/app/views/ci/lints/show.html.haml
index 3c0881caa06..d4455749803 100644
--- a/app/views/ci/lints/show.html.haml
+++ b/app/views/ci/lints/show.html.haml
@@ -1,27 +1,9 @@
-- page_title "CI Lint"
-- page_description "Validate your GitLab CI configuration file"
-- content_for :library_javascripts do
-  = page_specific_javascript_tag('lib/ace.js')
-
-%h2 Check your .gitlab-ci.yml
-
-.ci-linter
-  .row
-    = form_tag ci_lint_path, method: :post do
-      .form-group
-        .col-sm-12
-          .file-holder
-            .js-file-title.file-title.clearfix
-              Content of .gitlab-ci.yml
-            #ci-editor.ci-editor= @content
-          = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)
-      .col-sm-12
-        .pull-left.prepend-top-10
-          = submit_tag('Validate', class: 'btn btn-success submit-yml')
-        .pull-right.prepend-top-10
-          = button_tag('Clear', type: 'button', class: 'btn btn-default clear-yml')
-
-  .row.prepend-top-20
-    .col-sm-12
-      .results.ci-template
-        = render partial: 'create' if defined?(@status)
+.row.empty-state
+  .col-12
+    .svg-content
+      = image_tag 'illustrations/feature_moved.svg'
+  .col-12
+    .text-content.text-center
+      %h4= _("GitLab CI Linter has been moved")
+      %p
+        = _("To validate your GitLab CI configurations, go to 'CI/CD → Pipelines' inside your project, and click on the 'CI Lint' button.")
diff --git a/app/views/ci/status/_badge.html.haml b/app/views/ci/status/_badge.html.haml
index 35a3563dff1..5114387984b 100644
--- a/app/views/ci/status/_badge.html.haml
+++ b/app/views/ci/status/_badge.html.haml
@@ -4,10 +4,10 @@
 - css_classes = "ci-status ci-#{status.group} #{'has-tooltip' if title.present?}"
 
 - if link && status.has_details?
-  = link_to status.details_path, class: css_classes, title: title do
+  = link_to status.details_path, class: css_classes, title: title, data: { html: title.present? } do
     = sprite_icon(status.icon)
     = status.text
 - else
-  %span{ class: css_classes, title: title }
+  %span{ class: css_classes, title: title, data: { html: title.present? } }
     = sprite_icon(status.icon)
     = status.text
diff --git a/app/views/ci/status/_dropdown_graph_badge.html.haml b/app/views/ci/status/_dropdown_graph_badge.html.haml
index c5b4439e273..8b0463db000 100644
--- a/app/views/ci/status/_dropdown_graph_badge.html.haml
+++ b/app/views/ci/status/_dropdown_graph_badge.html.haml
@@ -3,17 +3,18 @@
 - subject = local_assigns.fetch(:subject)
 - status = subject.detailed_status(current_user)
 - klass = "ci-status-icon ci-status-icon-#{status.group}"
-- tooltip = "#{subject.name} - #{status.label}"
+- tooltip = "#{subject.name} - #{status.status_tooltip}"
 
 - if status.has_details?
-  = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, container: 'body' }  do
+  = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, html: 'true', container: 'body' }  do
     %span{ class: klass }= sprite_icon(status.icon)
     %span.ci-build-text= subject.name
+
 - else
-  .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } }
+  .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', html: 'true', title: tooltip, container: 'body' } }
     %span{ class: klass }= sprite_icon(status.icon)
     %span.ci-build-text= subject.name
 
 - if status.has_action?
-  = link_to status.action_path, class: "ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' }  do
+  = link_to status.action_path, class: "ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' }  do
     = sprite_icon(status.action_icon, css_class: "icon-action-#{status.action_icon}")
diff --git a/app/views/ci/variables/_variable_row.html.haml b/app/views/ci/variables/_variable_row.html.haml
index 15201780451..6ee55836dd2 100644
--- a/app/views/ci/variables/_variable_row.html.haml
+++ b/app/views/ci/variables/_variable_row.html.haml
@@ -10,21 +10,21 @@
 - id_input_name = "#{form_field}[variables_attributes][][id]"
 - destroy_input_name = "#{form_field}[variables_attributes][][_destroy]"
 - key_input_name = "#{form_field}[variables_attributes][][key]"
-- value_input_name = "#{form_field}[variables_attributes][][value]"
+- value_input_name = "#{form_field}[variables_attributes][][secret_value]"
 - protected_input_name = "#{form_field}[variables_attributes][][protected]"
 
 %li.js-row.ci-variable-row{ data: { is_persisted: "#{!id.nil?}" } }
   .ci-variable-row-body
     %input.js-ci-variable-input-id{ type: "hidden", name: id_input_name, value: id }
     %input.js-ci-variable-input-destroy{ type: "hidden", name: destroy_input_name }
-    %input.js-ci-variable-input-key.ci-variable-body-item.form-control{ type: "text",
+    %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control{ type: "text",
       name: key_input_name,
       value: key,
       placeholder: s_('CiVariables|Input variable key') }
     .ci-variable-body-item
-      .form-control.js-secret-value-placeholder{ class: ('hide' unless id) }
+      .form-control.js-secret-value-placeholder.qa-ci-variable-input-value{ class: ('hide' unless id) }
         = '*' * 20
-      %textarea.js-ci-variable-input-value.js-secret-value.form-control{ class: ('hide' if id),
+      %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control{ class: ('hide' if id),
         rows: 1,
         name: value_input_name,
         placeholder: s_('CiVariables|Input variable value') }
@@ -43,7 +43,6 @@
           %span.toggle-icon
             = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
             = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
-      -# EE-specific start
-      -# EE-specific end
+      = render_if_exists 'ci/variables/environment_scope', form_field: form_field, variable: variable
   %button.js-row-remove-button.ci-variable-row-remove-button{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
     = icon('minus-circle')
diff --git a/app/views/dashboard/_activity_head.html.haml b/app/views/dashboard/_activity_head.html.haml
index 7a3f3667ac1..7503548fa3d 100644
--- a/app/views/dashboard/_activity_head.html.haml
+++ b/app/views/dashboard/_activity_head.html.haml
@@ -1,5 +1,5 @@
 .top-area
-  %ul.nav-links
+  %ul.nav-links.nav.nav-tabs
     %li{ class: active_when(params[:filter].nil?) }>
       = link_to activity_dashboard_path, class: 'shortcuts-activity', data: {placement: 'right'} do
         Your projects
diff --git a/app/views/dashboard/_groups_head.html.haml b/app/views/dashboard/_groups_head.html.haml
index 617c20b9635..d8f1e50544c 100644
--- a/app/views/dashboard/_groups_head.html.haml
+++ b/app/views/dashboard/_groups_head.html.haml
@@ -1,5 +1,5 @@
 .top-area
-  %ul.nav-links.mobile-separator
+  %ul.nav-links.mobile-separator.nav.nav-tabs
     = nav_link(page: dashboard_groups_path) do
       = link_to dashboard_groups_path, title: _("Your groups") do
         Your groups
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index 449a2ce625e..9b1d9b659f9 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -4,7 +4,7 @@
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
-  %ul.nav-links.scrolling-tabs.mobile-separator
+  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs
     = nav_link(page: [dashboard_projects_path, root_path]) do
       = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
         Your projects
diff --git a/app/views/dashboard/_snippets_head.html.haml b/app/views/dashboard/_snippets_head.html.haml
index a9488df07bd..e7e323a8683 100644
--- a/app/views/dashboard/_snippets_head.html.haml
+++ b/app/views/dashboard/_snippets_head.html.haml
@@ -1,5 +1,5 @@
 .top-area
-  %ul.nav-links
+  %ul.nav-links.nav.nav-tabs
     = nav_link(page: dashboard_snippets_path, html_options: {class: 'home'}) do
       = link_to dashboard_snippets_path, title: 'Your snippets', data: {placement: 'right'} do
         Your snippets
@@ -8,5 +8,5 @@
         Explore snippets
 
   - if current_user
-    .nav-controls.hidden-xs
+    .nav-controls.d-none.d-sm-block
       = link_to "New snippet", new_snippet_path, class: "btn btn-new", title: "New snippet"
diff --git a/app/views/dashboard/issues.atom.builder b/app/views/dashboard/issues.atom.builder
index 70ec6bc6257..d7b6fb9a4a1 100644
--- a/app/views/dashboard/issues.atom.builder
+++ b/app/views/dashboard/issues.atom.builder
@@ -1,5 +1,5 @@
 xml.title   "#{current_user.name} issues"
-xml.link    href: url_for(params), rel: "self", type: "application/atom+xml"
+xml.link    href: url_for(safe_params), rel: "self", type: "application/atom+xml"
 xml.link    href: issues_dashboard_url, rel: "alternate", type: "text/html"
 xml.id      issues_dashboard_url
 xml.updated @issues.first.updated_at.xmlschema if @issues.reorder(nil).any?
diff --git a/app/views/dashboard/issues.html.haml b/app/views/dashboard/issues.html.haml
index 3e85535dae0..86a21e24ac9 100644
--- a/app/views/dashboard/issues.html.haml
+++ b/app/views/dashboard/issues.html.haml
@@ -1,15 +1,18 @@
 - @hide_top_links = true
-- page_title "Issues"
-- header_title  "Issues", issues_dashboard_path(assignee_id: current_user.id)
+- page_title _("Issues")
+- @breadcrumb_link = issues_dashboard_path(assignee_id: current_user.id)
 = content_for :meta_tags do
-  = auto_discovery_link_tag(:atom, params.merge(rss_url_options), title: "#{current_user.name} issues")
+  = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{current_user.name} issues")
 
 .top-area
-  = render 'shared/issuable/nav', type: :issues
+  = render 'shared/issuable/nav', type: :issues, display_count: !@no_filters_set
   .nav-controls
-    = link_to params.merge(rss_url_options), class: 'btn has-tooltip', data: { container: 'body' }, title: 'Subscribe' do
-      = icon('rss')
+    = render 'shared/issuable/feed_buttons'
     = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", with_feature_enabled: 'issues', type: :issues
 
 = render 'shared/issuable/filter', type: :issues
-= render 'shared/issues'
+
+- if current_user && @no_filters_set
+  = render 'shared/dashboard/no_filter_selected'
+- else
+  = render 'shared/issues'
diff --git a/app/views/dashboard/issues_calendar.ics.haml b/app/views/dashboard/issues_calendar.ics.haml
new file mode 100644
index 00000000000..59573e5fecf
--- /dev/null
+++ b/app/views/dashboard/issues_calendar.ics.haml
@@ -0,0 +1 @@
+= render 'issues/issues_calendar', issues: @issues
diff --git a/app/views/dashboard/merge_requests.html.haml b/app/views/dashboard/merge_requests.html.haml
index 53cd1130299..61aae31be60 100644
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@@ -1,11 +1,15 @@
 - @hide_top_links = true
-- page_title "Merge Requests"
-- header_title  "Merge Requests", merge_requests_dashboard_path(assignee_id: current_user.id)
+- page_title _("Merge Requests")
+- @breadcrumb_link = merge_requests_dashboard_path(assignee_id: current_user.id)
 
 .top-area
-  = render 'shared/issuable/nav', type: :merge_requests
+  = render 'shared/issuable/nav', type: :merge_requests, display_count: !@no_filters_set
   .nav-controls
     = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request", with_feature_enabled: 'merge_requests', type: :merge_requests
 
 = render 'shared/issuable/filter', type: :merge_requests
-= render 'shared/merge_requests'
+
+- if current_user && @no_filters_set
+  = render 'shared/dashboard/no_filter_selected'
+- else
+  = render 'shared/merge_requests'
diff --git a/app/views/dashboard/projects/_nav.html.haml b/app/views/dashboard/projects/_nav.html.haml
index 97f854cc5f0..da3cf5807b0 100644
--- a/app/views/dashboard/projects/_nav.html.haml
+++ b/app/views/dashboard/projects/_nav.html.haml
@@ -1,5 +1,5 @@
 .nav-block
-  %ul.nav-links.mobile-separator
+  %ul.nav-links.mobile-separator.nav.nav-tabs
     = nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do
       = link_to s_('DashboardProjects|All'), dashboard_projects_path
     = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do
diff --git a/app/views/dashboard/projects/starred.html.haml b/app/views/dashboard/projects/starred.html.haml
index b1efe59aadc..8933d9e31ff 100644
--- a/app/views/dashboard/projects/starred.html.haml
+++ b/app/views/dashboard/projects/starred.html.haml
@@ -11,5 +11,5 @@
   - if params[:filter_projects] || any_projects?(@projects)
     = render 'projects'
   - else
-    %h3 You don't have starred projects yet
+    %h3.page-title 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/dashboard/snippets/index.html.haml b/app/views/dashboard/snippets/index.html.haml
index e86b1ab3116..4391624196b 100644
--- a/app/views/dashboard/snippets/index.html.haml
+++ b/app/views/dashboard/snippets/index.html.haml
@@ -5,7 +5,7 @@
 = render 'dashboard/snippets_head'
 = render partial: 'snippets/snippets_scope_menu', locals: { include_private: true }
 
-.visible-xs
+.d-block.d-sm-none
   &nbsp;
   = link_to new_snippet_path, class: "btn btn-new btn-block", title: "New snippet" do
     New snippet
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 664966989db..d5a9cc646a6 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -4,18 +4,18 @@
 
 - if current_user.todos.any?
   .top-area
-    %ul.nav-links.mobile-separator
+    %ul.nav-links.mobile-separator.nav.nav-tabs
       %li.todos-pending{ class: active_when(params[:state].blank? || params[:state] == 'pending') }>
         = link_to todos_filter_path(state: 'pending') do
           %span
             Todos
-          %span.badge
+          %span.badge.badge-pill
             = number_with_delimiter(todos_pending_count)
       %li.todos-done{ class: active_when(params[:state] == 'done') }>
         = link_to todos_filter_path(state: 'done') do
           %span
             Done
-          %span.badge
+          %span.badge.badge-pill
             = number_with_delimiter(todos_done_count)
 
     .nav-controls
@@ -35,7 +35,7 @@
           - if params[:project_id].present?
             = hidden_field_tag(:project_id, params[:project_id])
           = dropdown_tag(project_dropdown_label(params[:project_id], 'Project'), options: { toggle_class: 'js-project-search js-filter-submit', title: 'Filter by project', filter: true, filterInput: 'input#project-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
-            placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project' } })
+            placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project', display: 'static' } })
         .filter-item.inline
           - if params[:author_id].present?
             = hidden_field_tag(:author_id, params[:author_id])
@@ -60,7 +60,7 @@
               - else
                 = sort_title_recently_created
               = icon('chevron-down')
-            %ul.dropdown-menu.dropdown-menu-sort
+            %ul.dropdown-menu.dropdown-menu-sort.dropdown-menu-right
               %li
                 = link_to todos_filter_path(sort: sort_value_label_priority) do
                   = sort_title_label_priority
@@ -73,7 +73,7 @@
   - if @todos.any?
     .js-todos-list-container
       .js-todos-options{ data: { per_page: @todos.limit_value, current_page: @todos.current_page, total_pages: @todos.total_pages } }
-        .panel.panel-default.panel-without-border.panel-without-margin
+        .card.card-without-border.card-without-margin
           %ul.content-list.todos-list
             = render @todos
       = paginate @todos, theme: "gitlab"
diff --git a/app/views/devise/mailer/unlock_instructions.html.haml b/app/views/devise/mailer/unlock_instructions.html.haml
index 79e3a35cc9a..8ddfd3ea74a 100644
--- a/app/views/devise/mailer/unlock_instructions.html.haml
+++ b/app/views/devise/mailer/unlock_instructions.html.haml
@@ -2,7 +2,7 @@
   = email_default_heading("Hello, #{@resource.name}!")
   %p
     Your GitLab account has been locked due to an excessive amount of unsuccessful
-    sign in attempts. Your account will automatically unlock in #{time_ago_in_words(Devise.unlock_in.from_now)}
+    sign in attempts. Your account will automatically unlock in #{distance_of_time_in_words(Devise.unlock_in)}
     or you may click the link below to unlock now.
   #cta
     = link_to('Unlock account', unlock_url(@resource, unlock_token: @token))
diff --git a/app/views/devise/mailer/unlock_instructions.text.erb b/app/views/devise/mailer/unlock_instructions.text.erb
index 3aea3e20145..8d4abbf3500 100644
--- a/app/views/devise/mailer/unlock_instructions.text.erb
+++ b/app/views/devise/mailer/unlock_instructions.text.erb
@@ -1,7 +1,7 @@
 Hello, <%= @resource.name %>!
 
 Your GitLab account has been locked due to an excessive amount of unsuccessful
-sign in attempts. Your account will automatically unlock in <%= time_ago_in_words(Devise.unlock_in.from_now) %>
+sign in attempts. Your account will automatically unlock in <%= distance_of_time_in_words(Devise.unlock_in) %>
 or you may click the link below to unlock now.
 
 <%= unlock_url(@resource, unlock_token: @token) %>
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index 41462f503cb..0ee563ac066 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -6,11 +6,15 @@
     = f.label :password
     = f.password_field :password, class: "form-control bottom", required: true, title: "This field is required."
   - if devise_mapping.rememberable?
-    .remember-me.checkbox
+    .remember-me
       %label{ for: "user_remember_me" }
         = f.check_box :remember_me, class: 'remember-me-checkbox'
         %span Remember me
-      .pull-right.forgot-password
+      .float-right.forgot-password
         = link_to "Forgot your password?", new_password_path(:user)
+    %div
+    - if captcha_enabled?
+      = recaptcha_tags
+
   .submit-container.move-submit-down
     = f.submit "Sign in", class: "btn btn-save"
diff --git a/app/views/devise/sessions/_new_crowd.html.haml b/app/views/devise/sessions/_new_crowd.html.haml
index 2556cb6f59b..36ff42090be 100644
--- a/app/views/devise/sessions/_new_crowd.html.haml
+++ b/app/views/devise/sessions/_new_crowd.html.haml
@@ -6,7 +6,7 @@
     = label_tag :password
     = password_field_tag :password, nil, { class: "form-control bottom", title: "This field is required.", required: true }
   - if devise_mapping.rememberable?
-    .remember-me.checkbox
+    .remember-me
       %label{ for: "remember_me" }
         = check_box_tag :remember_me, '1', false, id: 'remember_me'
         %span Remember me
diff --git a/app/views/devise/sessions/_new_ldap.html.haml b/app/views/devise/sessions/_new_ldap.html.haml
index 3159d21598a..6bf7349f602 100644
--- a/app/views/devise/sessions/_new_ldap.html.haml
+++ b/app/views/devise/sessions/_new_ldap.html.haml
@@ -6,7 +6,7 @@
     = label_tag :password
     = password_field_tag :password, nil, { class: "form-control bottom", title: "This field is required.", required: true }
   - if devise_mapping.rememberable?
-    .remember-me.checkbox
+    .remember-me
       %label{ for: "remember_me" }
         = check_box_tag :remember_me, '1', false, id: 'remember_me'
         %span Remember me
diff --git a/app/views/devise/sessions/two_factor.html.haml b/app/views/devise/sessions/two_factor.html.haml
index 6e54b9b5645..ba168c4eab8 100644
--- a/app/views/devise/sessions/two_factor.html.haml
+++ b/app/views/devise/sessions/two_factor.html.haml
@@ -9,7 +9,7 @@
           %div
             = f.label 'Two-Factor Authentication code', name:  :otp_attempt
             = f.text_field :otp_attempt, class: 'form-control', required: true, autofocus: true, autocomplete: 'off', title: 'This field is required.'
-            %p.help-block.hint Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes.
+            %p.form-text.text-muted.hint Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes.
             .prepend-top-20
               = f.submit "Verify code", class: "btn btn-save"
 
diff --git a/app/views/devise/shared/_omniauth_box.html.haml b/app/views/devise/shared/_omniauth_box.html.haml
index 546cec4d565..3723814debe 100644
--- a/app/views/devise/shared/_omniauth_box.html.haml
+++ b/app/views/devise/shared/_omniauth_box.html.haml
@@ -7,7 +7,7 @@
       %span.light
         - has_icon = provider_has_icon?(provider)
         = link_to provider_image_tag(provider), omniauth_authorize_path(:user, provider), method: :post, class: 'oauth-login' + (has_icon ? ' oauth-image-link' : ' btn'), id: "oauth-login-#{provider}"
-    %fieldset.prepend-top-10.checkbox.remember-me
+    %fieldset.prepend-top-10.remember-me
       %label
         = check_box_tag :remember_me, nil, false, class: 'remember-me-checkbox'
         %span
diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml
index 2554b2688bb..ee7369f54a9 100644
--- a/app/views/devise/shared/_signup_box.html.haml
+++ b/app/views/devise/shared/_signup_box.html.haml
@@ -22,6 +22,13 @@
         = f.label :password
         = f.password_field :password, class: "form-control bottom", required: true, pattern: ".{#{@minimum_password_length},}", title: "Minimum length is #{@minimum_password_length} characters."
         %p.gl-field-hint Minimum length is #{@minimum_password_length} characters
+      - if Gitlab::CurrentSettings.current_application_settings.enforce_terms?
+        .form-group
+          = check_box_tag :terms_opt_in, '1', false, required: true
+          = label_tag :terms_opt_in do
+            - terms_link = link_to s_("I accept the|Terms of Service and Privacy Policy"), terms_path, target: "_blank"
+            - accept_terms_label = _("I accept the %{terms_link}") % { terms_link: terms_link }
+            = accept_terms_label.html_safe
       %div
       - if Gitlab::Recaptcha.enabled?
         = recaptcha_tags
diff --git a/app/views/devise/shared/_tab_single.html.haml b/app/views/devise/shared/_tab_single.html.haml
index f943d25e41a..5683b4207b4 100644
--- a/app/views/devise/shared/_tab_single.html.haml
+++ b/app/views/devise/shared/_tab_single.html.haml
@@ -1,3 +1,3 @@
-%ul.nav-links.nav-tabs.new-session-tabs.single-tab
-  %li.active
-    %a= tab_title
+%ul.nav-links.new-session-tabs.single-tab.nav-tabs.nav
+  %li.nav-item
+    %a.nav-link.active= tab_title
diff --git a/app/views/devise/shared/_tabs_ldap.html.haml b/app/views/devise/shared/_tabs_ldap.html.haml
index 270191f9452..58c585a29ff 100644
--- a/app/views/devise/shared/_tabs_ldap.html.haml
+++ b/app/views/devise/shared/_tabs_ldap.html.haml
@@ -1,13 +1,13 @@
-%ul.new-session-tabs.nav-links.nav-tabs{ class: ('custom-provider-tabs' if form_based_providers.any?) }
+%ul.nav-links.new-session-tabs.nav-tabs.nav{ class: ('custom-provider-tabs' if form_based_providers.any?) }
   - if crowd_enabled?
-    %li.active
-      = link_to "Crowd", "#crowd", 'data-toggle' => 'tab'
+    %li.nav-item
+      = link_to "Crowd", "#crowd", class: 'nav-link active', 'data-toggle' => 'tab'
   - @ldap_servers.each_with_index do |server, i|
-    %li{ class: active_when(i.zero? && !crowd_enabled?) }
-      = link_to server['label'], "##{server['provider_name']}",  'data-toggle' => 'tab'
+    %li.nav-item
+      = link_to server['label'], "##{server['provider_name']}", class: "nav-link #{active_when(i.zero? && !crowd_enabled?)}", 'data-toggle' => 'tab'
   - if password_authentication_enabled_for_web?
-    %li
-      = link_to 'Standard', '#login-pane', 'data-toggle' => 'tab'
+    %li.nav-item
+      = link_to 'Standard', '#login-pane', class: 'nav-link', 'data-toggle' => 'tab'
   - if allow_signup?
-    %li
-      = link_to 'Register', '#register-pane', 'data-toggle' => 'tab'
+    %li.nav-item
+      = link_to 'Register', '#register-pane', class: 'nav-link', 'data-toggle' => 'tab'
diff --git a/app/views/devise/shared/_tabs_normal.html.haml b/app/views/devise/shared/_tabs_normal.html.haml
index 1ba6d390875..284d4fa1b89 100644
--- a/app/views/devise/shared/_tabs_normal.html.haml
+++ b/app/views/devise/shared/_tabs_normal.html.haml
@@ -1,6 +1,6 @@
-%ul.nav-links.new-session-tabs.nav-tabs{ role: 'tablist' }
-  %li.active{ role: 'presentation' }
-    %a{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in
+%ul.nav-links.new-session-tabs.nav-tabs.nav{ role: 'tablist' }
+  %li.nav-item{ role: 'presentation' }
+    %a.nav-link.active{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in
   - if allow_signup?
-    %li{ role: 'presentation' }
-      %a{ href: '#register-pane', data: { toggle: 'tab' }, role: 'tab' } Register
+    %li.nav-item{ role: 'presentation' }
+      %a.nav-link{ href: '#register-pane', data: { toggle: 'tab' }, role: 'tab' } Register
diff --git a/app/views/discussions/_diff_with_notes.html.haml b/app/views/discussions/_diff_with_notes.html.haml
index 8680ec2e298..646e89e9bd1 100644
--- a/app/views/discussions/_diff_with_notes.html.haml
+++ b/app/views/discussions/_diff_with_notes.html.haml
@@ -7,7 +7,7 @@
 - unless expanded
   - diff_data = { lines_path: project_merge_request_discussion_path(discussion.project, discussion.noteable, discussion) }
 
-.diff-file.file-holder{ class: diff_file_class, data: diff_data }
+.diff-file.file-holder.js-lazy-load-discussion{ class: diff_file_class, data: diff_data }
   .js-file-title.file-title.file-title-flex-parent
     .file-header-content
       = render "projects/diffs/file_header", diff_file: diff_file, url: discussion_path(discussion), show_toggle: false
@@ -28,8 +28,11 @@
           %tr.line_holder.line-holder-placeholder
             %td.old_line.diff-line-num
             %td.new_line.diff-line-num
-            %td.line_content
+            %td.line_content.js-success-lazy-load
               .js-code-placeholder
+            %td.js-error-lazy-load-diff.hidden.diff-loading-error-block
+              - button = button_tag(_("Try again"), class: "btn-link btn-link-retry btn-no-padding js-toggle-lazy-diff-retry-button")
+              = _("Unable to load the diff. %{button_try_again}").html_safe % { button_try_again: button}
           = render "discussions/diff_discussion", discussions: [discussion], expanded: true
   - else
     - partial = (diff_file.new_file? || diff_file.deleted_file?) ? 'single_image_diff' : 'replaced_image_diff'
diff --git a/app/views/discussions/_discussion.html.haml b/app/views/discussions/_discussion.html.haml
index e9589213f80..1765251c93d 100644
--- a/app/views/discussions/_discussion.html.haml
+++ b/app/views/discussions/_discussion.html.haml
@@ -13,7 +13,7 @@
                 = icon("chevron-up")
               - else
                 = icon("chevron-down")
-              Toggle discussion
+              = _('Toggle discussion')
           = link_to_member(@project, discussion.author, avatar: false)
 
           .inline.discussion-headline-light
@@ -51,5 +51,5 @@
           - if discussion.diff_discussion? && discussion.diff_file
             = render "discussions/diff_with_notes", discussion: discussion
           - else
-            .panel.panel-default
+            .card
               = render partial: "discussions/notes", locals: { discussion: discussion, disable_collapse_class: true }
diff --git a/app/views/discussions/_notes.html.haml b/app/views/discussions/_notes.html.haml
index 1cc227428e9..30b00ca86b3 100644
--- a/app/views/discussions/_notes.html.haml
+++ b/app/views/discussions/_notes.html.haml
@@ -11,7 +11,7 @@
     - if discussion.try(:on_image?) && show_toggle
       %button.diff-notes-collapse.js-diff-notes-toggle{ type: 'button' }
         = sprite_icon('collapse', css_class: 'collapse-icon')
-      %button.btn-transparent.badge.js-diff-notes-toggle{ type: 'button' }
+      %button.btn-transparent.badge.badge-pill.js-diff-notes-toggle{ type: 'button' }
         = badge_counter
     = render partial: "shared/notes/note", collection: discussion.notes, as: :note, locals: { badge_counter: badge_counter, show_image_comment_badge: show_image_comment_badge }
 
@@ -22,7 +22,7 @@
       - if discussion.potentially_resolvable?
         - line_type = local_assigns.fetch(:line_type, nil)
 
-        .btn-group-justified.discussion-with-resolve-btn{ role: "group" }
+        .btn-group.discussion-with-resolve-btn{ role: "group" }
           .btn-group{ role: "group" }
             = link_to_reply_discussion(discussion, line_type)
 
diff --git a/app/views/doorkeeper/applications/_form.html.haml b/app/views/doorkeeper/applications/_form.html.haml
index cf0e0de1ca4..be0935b8313 100644
--- a/app/views/doorkeeper/applications/_form.html.haml
+++ b/app/views/doorkeeper/applications/_form.html.haml
@@ -9,10 +9,10 @@
     = f.label :redirect_uri, class: 'label-light'
     = f.text_area :redirect_uri, class: 'form-control', required: true
 
-    %span.help-block
+    %span.form-text.text-muted
       Use one line per URI
     - if Doorkeeper.configuration.native_redirect_uri
-      %span.help-block
+      %span.form-text.text-muted
         Use
         %code= Doorkeeper.configuration.native_redirect_uri
         for local tests
diff --git a/app/views/doorkeeper/applications/index.html.haml b/app/views/doorkeeper/applications/index.html.haml
index d1237d7bf6f..cdf3ff81bd9 100644
--- a/app/views/doorkeeper/applications/index.html.haml
+++ b/app/views/doorkeeper/applications/index.html.haml
@@ -73,7 +73,7 @@
                 %tr
                   %td
                     Anonymous
-                    .help-block
+                    .form-text.text-muted
                       %em Authorization was granted by entering your username and password in the application.
                   %td= token.created_at
                   %td= token.scopes
diff --git a/app/views/doorkeeper/applications/show.html.haml b/app/views/doorkeeper/applications/show.html.haml
index 6364f0be4a3..89ad626f73f 100644
--- a/app/views/doorkeeper/applications/show.html.haml
+++ b/app/views/doorkeeper/applications/show.html.haml
@@ -30,5 +30,5 @@
     = render "shared/tokens/scopes_list", token: @application
 
 .form-actions
-  = link_to 'Edit', edit_oauth_application_path(@application), class: 'btn btn-primary wide pull-left'
+  = link_to 'Edit', edit_oauth_application_path(@application), class: 'btn btn-primary wide float-left'
   = render 'delete_form', application: @application, submit_btn_css: 'btn btn-danger prepend-left-10'
diff --git a/app/views/doorkeeper/authorized_applications/index.html.haml b/app/views/doorkeeper/authorized_applications/index.html.haml
index c8a585560a2..30c9d02b72e 100644
--- a/app/views/doorkeeper/authorized_applications/index.html.haml
+++ b/app/views/doorkeeper/authorized_applications/index.html.haml
@@ -1,4 +1,4 @@
-%header.page-header
+%header
   %h1 Your authorized applications
 %main{ :role => "main" }
   .table-holder
diff --git a/app/views/email_rejection_mailer/rejection.html.haml b/app/views/email_rejection_mailer/rejection.html.haml
index 7f7d841fe21..c4ae7befe4e 100644
--- a/app/views/email_rejection_mailer/rejection.html.haml
+++ b/app/views/email_rejection_mailer/rejection.html.haml
@@ -2,3 +2,4 @@
   Unfortunately, your email message to GitLab could not be processed.
 
 = markdown @reason
+= render_if_exists 'shared/additional_email_text'
diff --git a/app/views/email_rejection_mailer/rejection.text.haml b/app/views/email_rejection_mailer/rejection.text.haml
index 6693e6f90e8..0e13b2a6473 100644
--- a/app/views/email_rejection_mailer/rejection.text.haml
+++ b/app/views/email_rejection_mailer/rejection.text.haml
@@ -1,4 +1,4 @@
 Unfortunately, your email message to GitLab could not be processed.
-
-
+\
 = @reason
+= render_if_exists 'shared/additional_email_text'
diff --git a/app/views/errors/_footer.html.haml b/app/views/errors/_footer.html.haml
new file mode 100644
index 00000000000..e67a3a142f6
--- /dev/null
+++ b/app/views/errors/_footer.html.haml
@@ -0,0 +1,11 @@
+%nav
+  %ul.error-nav
+    %li
+      = link_to s_('Nav|Home'), root_path
+    %li
+      - if current_user
+        = link_to s_('Nav|Sign out and sign in with a different account'), destroy_user_session_path
+      - else
+        = link_to s_('Nav|Sign In / Register'), new_session_path(:user, redirect_to_referer: 'yes')
+    %li
+      = link_to s_('Nav|Help'), help_path
diff --git a/app/views/errors/access_denied.html.haml b/app/views/errors/access_denied.html.haml
index bf540439c79..8ae29b9d337 100644
--- a/app/views/errors/access_denied.html.haml
+++ b/app/views/errors/access_denied.html.haml
@@ -1,15 +1,16 @@
-- message = local_assigns.fetch(:message)
-
+- message = local_assigns.fetch(:message, nil)
 - content_for(:title, 'Access Denied')
-%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
-  %h1
-    403
+
+= image_tag('illustrations/error-403.svg', alt: '403', lazy: false)
 .container
-  %h3 Access Denied
-  %hr
+  %h3
+    = s_("403|You don't have the permission to access this page.")
   - if message
     %p
       = message
-  - else
-    %p You are not allowed to access this page.
-    %p Read more about project permissions #{link_to "here", help_page_path("user/permissions"), class: "vlink"}
+  %p
+    = s_('403|Please contact your GitLab administrator to get the permission.')
+  .action-container.js-go-back{ style: 'display: none' }
+    %a{ href: 'javascript:history.back()', class: 'btn btn-success' }
+      = s_('Go Back')
+= render "errors/footer"
diff --git a/app/views/errors/not_found.html.haml b/app/views/errors/not_found.html.haml
index a0b9a632e22..ae055f398ac 100644
--- a/app/views/errors/not_found.html.haml
+++ b/app/views/errors/not_found.html.haml
@@ -1,8 +1,15 @@
 - content_for(:title, 'Not Found')
-%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
-  %h1
-    404
+= image_tag('illustrations/error-404.svg', alt: '404', lazy: false)
 .container
-  %h3 The resource you were looking for doesn't exist.
-  %hr
-  %p You may have mistyped the address or the page may have moved.
+  %h3
+    = s_('404|Page Not Found')
+  %p
+    = s_("404|Make sure the address is correct and the page hasn't moved.")
+  %p
+    = s_('404|Please contact your GitLab administrator if you think this is a mistake.')
+  .action-container
+    = form_tag search_path, method: :get, class: 'form-inline-flex' do |f|
+      .field
+        = search_field_tag :search, '', placeholder: _('Search for projects, issues, etc.'), class: 'form-control'
+      = button_tag 'Search', class: 'btn btn-success', name: nil, type: 'submit'
+= render 'errors/footer'
diff --git a/app/views/events/_event_push.atom.haml b/app/views/events/_event_push.atom.haml
index e3c5fd55f08..bc1d32607e4 100644
--- a/app/views/events/_event_push.atom.haml
+++ b/app/views/events/_event_push.atom.haml
@@ -6,7 +6,7 @@
       at
       = event.created_at.to_s(:short)
   - unless event.rm_ref?
-    %blockquote= markdown(escape_once(event.commit_title), pipeline: :atom, project: event.project, author: event.author)
+    .blockquote= markdown(escape_once(event.commit_title), pipeline: :atom, project: event.project, author: event.author)
     - if event.commits_count > 1
       %p
         %i
diff --git a/app/views/events/event/_push.html.haml b/app/views/events/event/_push.html.haml
index f85f5c5be88..85f2d00bde3 100644
--- a/app/views/events/event/_push.html.haml
+++ b/app/views/events/event/_push.html.haml
@@ -14,7 +14,7 @@
 
 - if event.push_with_commits?
   .event-body
-    %ul.well-list.event_commits
+    %ul.content-list.event_commits
       = render "events/commit", project: project, event: event
 
       - create_mr = event.new_ref? && create_mr_button?(project.default_branch, event.ref_name, project) && event.authored_by?(current_user)
diff --git a/app/views/explore/groups/_nav.html.haml b/app/views/explore/groups/_nav.html.haml
index c8d95b52156..ab4787c6d05 100644
--- a/app/views/explore/groups/_nav.html.haml
+++ b/app/views/explore/groups/_nav.html.haml
@@ -1,5 +1,5 @@
 .top-area
-  %ul.nav-links
+  %ul.nav-links.nav.nav-tabs
     = nav_link(page: explore_groups_path) do
       = link_to explore_groups_path do
         Explore Groups
diff --git a/app/views/explore/groups/index.html.haml b/app/views/explore/groups/index.html.haml
index efa8b2706da..0643b9cfbc5 100644
--- a/app/views/explore/groups/index.html.haml
+++ b/app/views/explore/groups/index.html.haml
@@ -9,7 +9,7 @@
   = render 'nav'
 
 - if cookies[:explore_groups_landing_dismissed] != 'true'
-  .explore-groups.landing.content-block.js-explore-groups-landing.hidden
+  .explore-groups.landing.content-block.js-explore-groups-landing.hide
     %button.dismiss-button{ type: 'button', 'aria-label' => 'Dismiss' }= icon('times')
     .svg-container
       = custom_icon('icon_explore_groups_splash')
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index f630f1effdc..6abb56ba6d2 100644
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@@ -1,6 +1,6 @@
 - if current_user
   .dropdown
-    %button.dropdown-toggle{ href: '#', "data-toggle" => "dropdown" }
+    %button.dropdown-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
       = icon('globe')
       %span.light Visibility:
       - if params[:visibility_level].present?
@@ -8,7 +8,7 @@
       - else
         Any
       = icon('chevron-down')
-    %ul.dropdown-menu.dropdown-menu-align-right
+    %ul.dropdown-menu.dropdown-menu-right
       %li
         = link_to filter_projects_path(visibility_level: nil) do
           Any
diff --git a/app/views/explore/projects/_nav.html.haml b/app/views/explore/projects/_nav.html.haml
index e0a2a1e9c96..558cd26f1e0 100644
--- a/app/views/explore/projects/_nav.html.haml
+++ b/app/views/explore/projects/_nav.html.haml
@@ -1,5 +1,5 @@
 .top-area
-  %ul.nav-links
+  %ul.nav-links.nav.nav-tabs
     = nav_link(page: [trending_explore_projects_path, explore_root_path]) do
       = link_to trending_explore_projects_path do
         Trending
diff --git a/app/views/groups/_activities.html.haml b/app/views/groups/_activities.html.haml
index fd6e7111f38..577c63503a8 100644
--- a/app/views/groups/_activities.html.haml
+++ b/app/views/groups/_activities.html.haml
@@ -1,4 +1,4 @@
-.nav-block
+.nav-block.activities
   .controls
     = link_to group_path(@group, rss_url_options), class: 'btn rss-btn has-tooltip' , title: 'Subscribe' do
       %i.fa.fa-rss
diff --git a/app/views/groups/_create_chat_team.html.haml b/app/views/groups/_create_chat_team.html.haml
index 20de1b4c973..f950968030f 100644
--- a/app/views/groups/_create_chat_team.html.haml
+++ b/app/views/groups/_create_chat_team.html.haml
@@ -1,12 +1,12 @@
 .form-group
-  = f.label :create_chat_team, class: 'control-label' do
+  = f.label :create_chat_team, class: 'col-form-label' do
     %span.mattermost-icon
       = custom_icon('icon_mattermost')
     Mattermost
   .col-sm-10
-    .checkbox.js-toggle-container
-      = f.label :create_chat_team do
-        .js-toggle-button= f.check_box(:create_chat_team, { checked: true }, true, false)
+    .form-check.js-toggle-container
+      .js-toggle-button.form-check-input= f.check_box(:create_chat_team, { checked: true }, true, false)
+      = f.label :create_chat_team, class: 'form-check-label' do
         Create a Mattermost team for this group
       %br
       %small.light.js-toggle-content
diff --git a/app/views/groups/_group_admin_settings.html.haml b/app/views/groups/_group_admin_settings.html.haml
index 2ace1e2dd1e..f7cc62c6929 100644
--- a/app/views/groups/_group_admin_settings.html.haml
+++ b/app/views/groups/_group_admin_settings.html.haml
@@ -1,28 +1,26 @@
-- if current_user.admin?
-  .form-group
-    = f.label :lfs_enabled, 'Large File Storage', class: 'control-label'
-    .col-sm-10
-      .checkbox
-        = f.label :lfs_enabled do
-          = f.check_box :lfs_enabled, checked: @group.lfs_enabled?
-          %strong
-            Allow projects within this group to use Git LFS
-            = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
-          %br/
-          %span.descr This setting can be overridden in each project.
+.form-group.row
+  = f.label :lfs_enabled, 'Large File Storage', class: 'col-form-label col-sm-2'
+  .col-sm-10
+    .form-check
+      = f.check_box :lfs_enabled, checked: @group.lfs_enabled?, class: 'form-check-input'
+      = f.label :lfs_enabled, class: 'form-check-label' do
+        %strong
+          Allow projects within this group to use Git LFS
+          = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
+        %br/
+        %span.descr This setting can be overridden in each project.
 
-- if can? current_user, :admin_group, @group
-  .form-group
-    = f.label :require_two_factor_authentication, 'Two-factor authentication', class: 'control-label col-sm-2'
-    .col-sm-10
-      .checkbox
-        = f.label :require_two_factor_authentication do
-          = f.check_box :require_two_factor_authentication
-          %strong
-            Require all users in this group to setup Two-factor authentication
-            = link_to icon('question-circle'), help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group')
-  .form-group
-    .col-sm-offset-2.col-sm-10
-      .checkbox
-        = f.text_field :two_factor_grace_period, class: 'form-control'
-        .help-block Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication
+.form-group.row
+  = f.label :require_two_factor_authentication, 'Two-factor authentication', class: 'col-form-label col-sm-2'
+  .col-sm-10
+    .form-check
+      = f.check_box :require_two_factor_authentication, class: 'form-check-input'
+      = f.label :require_two_factor_authentication, class: 'form-check-label' do
+        %strong
+          Require all users in this group to setup Two-factor authentication
+          = link_to icon('question-circle'), help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group')
+.form-group.row
+  .offset-sm-2.col-sm-10
+    .form-check
+      = f.text_field :two_factor_grace_period, class: 'form-control'
+      .form-text.text-muted Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index 86cd0759a2c..cae2df4699e 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -1,76 +1,39 @@
 - breadcrumb_title "General Settings"
-.panel.panel-default.prepend-top-default
-  .panel-heading
-    Group settings
-  .panel-body
-    = form_for @group, html: { multipart: true, class: "form-horizontal gl-show-field-errors" }, authenticity_token: true do |f|
-      = form_errors(@group)
-      = render 'shared/group_form', f: f
-
-      .form-group
-        .col-sm-offset-2.col-sm-10
-          .avatar-container.s160
-            = group_icon(@group, alt: '', class: 'avatar group-avatar s160')
-          %p.light
-            - if @group.avatar?
-              You can change the group avatar here
-            - else
-              You can upload a group avatar here
-          = render 'shared/choose_group_avatar_button', f: f
-          - if @group.avatar?
-            %hr
-            = link_to _('Remove avatar'), group_avatar_path(@group.to_param), data: { confirm: _("Avatar will be removed. Are you sure?")}, method: :delete, class: "btn btn-danger btn-inverted"
-
-      = render 'shared/visibility_level', f: f, visibility_level: @group.visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
-
-      .form-group
-        .col-sm-offset-2.col-sm-10
-          = render 'shared/allow_request_access', form: f
-
-      .form-group
-        %label.control-label
-          = s_("GroupSettings|Share with group lock")
-        .col-sm-10
-          .checkbox
-            = f.label :share_with_group_lock do
-              = f.check_box :share_with_group_lock, disabled: !can_change_share_with_group_lock?(@group)
-              %strong
-                - group_link = link_to @group.name, group_path(@group)
-                = s_("GroupSettings|Prevent sharing a project within %{group} with other groups").html_safe % { group: group_link }
-              %br
-              %span.descr= share_with_group_lock_help_text(@group)
-
-      = render 'group_admin_settings', f: f
-
-      .form-actions
-        = f.submit 'Save group', class: "btn btn-save"
-
-.panel.panel-danger
-  .panel-heading Remove group
-  .panel-body
-    = form_tag(@group, method: :delete) do
-      %p
-        Removing group will cause all child projects and resources to be removed.
-        %br
-        %strong Removed group can not be restored!
-
-      .form-actions
-        = button_to 'Remove group', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_group_message(@group) }
-
-- if supports_nested_groups?
-  .panel.panel-warning
-    .panel-heading Transfer group
-    .panel-body
-      = form_for @group, url: transfer_group_path(@group), method: :put do |f|
-        .form-group
-          = dropdown_tag('Select parent group', options: { toggle_class: 'js-groups-dropdown', title: 'Parent Group', filter: true, dropdown_class: 'dropdown-open-top dropdown-group-transfer', placeholder: "Search groups", data: { data: parent_group_options(@group) } })
-          = hidden_field_tag 'new_parent_group_id'
-
-        %ul
-          %li Be careful. Changing a group's parent can have unintended #{link_to 'side effects', 'https://docs.gitlab.com/ce/user/project/index.html#redirects-when-changing-repository-paths', target: 'blank'}.
-          %li You can only transfer the group to a group you manage.
-          %li You will need to update your local repositories to point to the new location.
-          %li If the parent group's visibility is lower than the group current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.
-        = f.submit 'Transfer group', class: "btn btn-warning"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
+
+
+%section.settings.gs-general.no-animate#js-general-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('General')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Update your group name, description, avatar, and other general settings.')
+  .settings-content
+    = render 'groups/settings/general'
+
+%section.settings.gs-permissions.no-animate#js-permissions-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Permissions')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable or disable certain group features and choose access levels.')
+  .settings-content
+    = render 'groups/settings/permissions'
+
+%section.settings.gs-advanced.no-animate#js-advanced-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Advanced')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Perform advanced options such as changing path, transferring, or removing the group.')
+  .settings-content
+    = render 'groups/settings/advanced'
 
 = render 'shared/confirm_modal', phrase: @group.path
diff --git a/app/views/groups/group_members/_new_group_member.html.haml b/app/views/groups/group_members/_new_group_member.html.haml
index 5b1a4630c56..aa03f8365f9 100644
--- a/app/views/groups/group_members/_new_group_member.html.haml
+++ b/app/views/groups/group_members/_new_group_member.html.haml
@@ -2,12 +2,12 @@
   .row
     .col-md-4.col-lg-6
       = users_select_tag(:user_ids, multiple: true, class: 'input-clamp', scope: :all, email_user: true)
-      .help-block.append-bottom-10
+      .form-text.text-muted.append-bottom-10
         Search for members by name, username, or email, or invite new ones using their email address.
 
     .col-md-3.col-lg-2
       = select_tag :access_level, options_for_select(GroupMember.access_level_roles, @group_member.access_level), class: "form-control project-access-select"
-      .help-block.append-bottom-10
+      .form-text.text-muted.append-bottom-10
         = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
         about role permissions
 
@@ -15,7 +15,7 @@
       .clearable-input
         = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date'
         %i.clear-icon.js-clear-input
-      .help-block.append-bottom-10
+      .form-text.text-muted.append-bottom-10
         On this date, the member(s) will automatically lose access to this group and all of its projects.
 
     .col-md-2
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index ad9d5562ded..13d584f5f1d 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -1,10 +1,11 @@
 - page_title "Members"
+- can_manage_members = can?(current_user, :admin_group_member, @group)
 
 .project-members-page.prepend-top-default
   %h4
     Members
   %hr
-  - if can?(current_user, :admin_group_member, @group)
+  - if can_manage_members
     .project-members-new.append-bottom-default
       %p.clearfix
         Add new member to
@@ -13,20 +14,24 @@
 
     = render 'shared/members/requests', membership_source: @group, requesters: @requesters
 
-  .append-bottom-default.clearfix
+  .clearfix
     %h5.member.existing-title
       Existing members
-    = form_tag group_group_members_path(@group), method: :get, class: 'form-inline member-search-form'  do
-      .form-group
-        = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
-        %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
-          = icon("search")
-        = render 'shared/members/sort_dropdown'
-  .panel.panel-default
-    .panel-heading
-      Members with access to
-      %strong= @group.name
+  .card
+    .card-header.flex-project-members-panel
+      %span.flex-project-title
+        Members with access to
+        %strong= @group.name
       %span.badge= @members.total_count
+      = form_tag group_group_members_path(@group), method: :get, class: 'form-inline member-search-form flex-project-members-form'  do
+        .form-group
+          .position-relative.append-right-8
+            = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
+            %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
+              = icon("search")
+          - if can_manage_members
+            = render 'shared/members/filter_2fa_dropdown'
+          = render 'shared/members/sort_dropdown'
     %ul.content-list.members-list
       = render partial: 'shared/members/member', collection: @members, as: :member
     = paginate @members, theme: 'gitlab'
diff --git a/app/views/groups/issues.atom.builder b/app/views/groups/issues.atom.builder
index a239ea8caf0..2a385b661e5 100644
--- a/app/views/groups/issues.atom.builder
+++ b/app/views/groups/issues.atom.builder
@@ -1,5 +1,5 @@
 xml.title   "#{@group.name} issues"
-xml.link    href: url_for(params), rel: "self", type: "application/atom+xml"
+xml.link    href: url_for(safe_params), rel: "self", type: "application/atom+xml"
 xml.link    href: issues_group_url, rel: "alternate", type: "text/html"
 xml.id      issues_group_url
 xml.updated @issues.first.updated_at.xmlschema if @issues.reorder(nil).any?
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index 36df03302e8..8037cf4b69d 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -1,6 +1,6 @@
 - page_title "Issues"
 = content_for :meta_tags do
-  = auto_discovery_link_tag(:atom, params.merge(rss_url_options), title: "#{@group.name} issues")
+  = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@group.name} issues")
 
 - if group_issues_count(state: 'all').zero?
   = render 'shared/empty_states/issues', project_select_button: true
@@ -8,10 +8,7 @@
   .top-area
     = render 'shared/issuable/nav', type: :issues
     .nav-controls
-      = link_to params.merge(rss_url_options), class: 'btn' do
-        = icon('rss')
-        %span.icon-label
-          Subscribe
+      = render 'shared/issuable/feed_buttons'
       = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", type: :issues
 
   = render 'shared/issuable/search_bar', type: :issues
diff --git a/app/views/groups/issues_calendar.ics.haml b/app/views/groups/issues_calendar.ics.haml
new file mode 100644
index 00000000000..59573e5fecf
--- /dev/null
+++ b/app/views/groups/issues_calendar.ics.haml
@@ -0,0 +1 @@
+= render 'issues/issues_calendar', issues: @issues
diff --git a/app/views/groups/labels/index.html.haml b/app/views/groups/labels/index.html.haml
index ac7e12fcd0b..db7eaff6658 100644
--- a/app/views/groups/labels/index.html.haml
+++ b/app/views/groups/labels/index.html.haml
@@ -1,21 +1,32 @@
-- page_title 'Labels'
-
+- @no_container = true
+- page_title "Labels"
+- can_admin_label = can?(current_user, :admin_label, @group)
+- hide_class = ''
+- hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
 - issuables = ['issues', 'merge requests']
 
-.top-area.adjust
-  .nav-text
-    = _("Labels can be applied to %{features}. Group labels are available for any project within the group.") % { features: issuables.to_sentence }
+- if can_admin_label
+  - content_for(:header_content) do
+    .nav-controls
+      = link_to _('New label'), new_group_label_path(@group), class: "btn btn-new"
+
+- if @labels.exists?
+  #promote-label-modal
+  %div{ class: container_class }
+    .top-area.adjust
+      .nav-text
+        = _('Labels can be applied to %{features}. Group labels are available for any project within the group.') % { features: issuables.to_sentence }
 
-  .nav-controls
-    - if can?(current_user, :admin_label, @group)
-      = link_to "New label", new_group_label_path(@group), class: "btn btn-new"
+    .labels-container.prepend-top-5
+      .other-labels
+        - if can_admin_label
+          %h5{ class: ('hide' if hide) } Labels
+        %ul.content-list.manage-labels-list.js-other-labels
+          = render partial: 'shared/label', subject: @group, collection: @labels, as: :label, locals: { use_label_priority: false }
+          = paginate @labels, theme: 'gitlab'
+- else
+  = render 'shared/empty_states/labels'
 
-.labels
-  .other-labels
-    - if @labels.present?
-      %ul.content-list.manage-labels-list.js-other-labels
-        = render partial: 'shared/label', subject: @group, collection: @labels, as: :label
-        = paginate @labels, theme: 'gitlab'
-    - else
-      .nothing-here-block
-        = _("No labels created yet.")
+%template#js-badge-item-template
+  %li.label-link-item.js-priority-badge.inline.prepend-left-10
+    .label-badge.label-badge-blue= _('Prioritized label')
diff --git a/app/views/groups/milestones/_form.html.haml b/app/views/groups/milestones/_form.html.haml
index a1be0d3220a..6d35457a0ec 100644
--- a/app/views/groups/milestones/_form.html.haml
+++ b/app/views/groups/milestones/_form.html.haml
@@ -1,14 +1,14 @@
-= form_for [@group, @milestone], html: { class: 'form-horizontal milestone-form common-note-form js-quick-submit js-requires-input' }  do |f|
+= form_for [@group, @milestone], html: { class: 'milestone-form common-note-form js-quick-submit js-requires-input' }  do |f|
   .row
     = form_errors(@milestone)
 
     .col-md-6
-      .form-group
-        = f.label :title, "Title", class: "control-label"
+      .form-group.row
+        = f.label :title, "Title", class: "col-form-label col-sm-2"
         .col-sm-10
           = f.text_field :title, maxlength: 255, class: "form-control", required: true, autofocus: true
-      .form-group.milestone-description
-        = f.label :description, "Description", class: "control-label"
+      .form-group.row.milestone-description
+        = f.label :description, "Description", class: "col-form-label col-sm-2"
         .col-sm-10
           = render layout: 'projects/md_preview', locals: { url: group_preview_markdown_path } do
             = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...', supports_autocomplete: false
diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml
index e9daac95ca1..53f54db1ddf 100644
--- a/app/views/groups/new.html.haml
+++ b/app/views/groups/new.html.haml
@@ -4,27 +4,37 @@
 - page_title    'New Group'
 - header_title  "Groups", dashboard_groups_path
 
-%h3.page-title
-  New Group
-%hr
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      = _('New group')
+    %p
+      - group_docs_path = help_page_path('user/group/index')
+      - group_docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: group_docs_path }
+      = s_('%{group_docs_link_start}Groups%{group_docs_link_end} allow you to manage and collaborate across multiple projects. Members of a group have access to all of its projects.').html_safe % { group_docs_link_start: group_docs_link_start, group_docs_link_end: '</a>'.html_safe }
+    %p
+      - subgroup_docs_path = help_page_path('user/group/subgroups/index')
+      - subgroup_docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: subgroup_docs_path }
+      = s_('Groups can also be nested by creating %{subgroup_docs_link_start}subgroups%{subgroup_docs_link_end}.').html_safe % { subgroup_docs_link_start: subgroup_docs_link_start, subgroup_docs_link_end: '</a>'.html_safe }
 
-= form_for @group, html: { class: 'group-form form-horizontal gl-show-field-errors' } do |f|
-  = form_errors(@group)
-  = render 'shared/group_form', f: f, autofocus: true
+  .col-lg-9
+    = form_for @group, html: { class: 'group-form gl-show-field-errors' } do |f|
+      = form_errors(@group)
+      = render 'shared/group_form', f: f, autofocus: true
 
-  .form-group.group-description-holder
-    = f.label :avatar, "Group avatar", class: 'control-label'
-    .col-sm-10
-      = render 'shared/choose_group_avatar_button', f: f
+      .form-group.row.group-description-holder
+        = f.label :avatar, "Group avatar", class: 'col-form-label col-sm-2'
+        .col-sm-10
+          = render 'shared/choose_group_avatar_button', f: f
 
-  = render 'shared/visibility_level', f: f, visibility_level: default_group_visibility, can_change_visibility_level: true, form_model: @group
+      = render 'shared/visibility_level', f: f, visibility_level: default_group_visibility, can_change_visibility_level: true, form_model: @group
 
-  = render 'create_chat_team', f: f if Gitlab.config.mattermost.enabled
+      = render 'create_chat_team', f: f if Gitlab.config.mattermost.enabled
 
-  .form-group
-    .col-sm-offset-2.col-sm-10
-      = render 'shared/group_tips'
+      .form-group.row
+        .offset-sm-2.col-sm-10
+          = render 'shared/group_tips'
 
-  .form-actions
-    = f.submit 'Create group', class: "btn btn-create"
-    = link_to 'Cancel', dashboard_groups_path, class: 'btn btn-cancel'
+      .form-actions
+        = f.submit 'Create group', class: "btn btn-create"
+        = link_to 'Cancel', dashboard_groups_path, class: 'btn btn-cancel'
diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml
index ef181b425bc..ba186875a86 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -1,24 +1,24 @@
 - breadcrumb_title "Projects"
 
-.panel.panel-default.prepend-top-default
-  .panel-heading
+.card.prepend-top-default
+  .card-header
     %strong= @group.name
     projects:
     - if can? current_user, :admin_group, @group
       .controls
         = link_to new_project_path(namespace_id: @group.id), class: "btn btn-sm btn-success" do
           New project
-  %ul.well-list
+  %ul.content-list
     - @projects.each do |project|
       %li
         .list-item-name
           %span{ class: visibility_level_color(project.visibility_level) }
             = visibility_level_icon(project.visibility_level)
           %strong= link_to project.full_name, project
-        .pull-right
+        .float-right
           - if project.archived
-            %span.label.label-warning archived
-          %span.badge
+            %span.badge.badge-warning archived
+          %span.badge.badge-pill
             = storage_counter(project.statistics.storage_size)
           = link_to 'Members', project_project_members_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-sm"
           = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-sm"
diff --git a/app/views/groups/runners/_group_runners.html.haml b/app/views/groups/runners/_group_runners.html.haml
new file mode 100644
index 00000000000..e6c089c3494
--- /dev/null
+++ b/app/views/groups/runners/_group_runners.html.haml
@@ -0,0 +1,24 @@
+- link = link_to _('Runners API'), help_page_path('api/runners.md')
+
+%h3
+  = _('Group Runners')
+
+.bs-callout.bs-callout-warning
+  = _('GitLab Group Runners can execute code for all the projects in this group.')
+  = _('They can be managed using the %{link}.').html_safe % { link: link }
+
+-# Proper policies should be implemented per
+-# https://gitlab.com/gitlab-org/gitlab-ce/issues/45894
+- if can?(current_user, :admin_pipeline, @group)
+  = render partial: 'ci/runner/how_to_setup_runner',
+           locals: { registration_token: @group.runners_token, type: 'group' }
+
+- if @group.runners.empty?
+  %h4.underlined-title
+    = _('This group does not provide any group Runners yet.')
+
+- else
+  %h4.underlined-title
+    = _('Available group Runners : %{runners}.').html_safe % { runners: @group.runners.count }
+  %ul.bordered-list
+    = render partial: 'groups/runners/runner', collection: @group.runners, as: :runner
diff --git a/app/views/groups/runners/_index.html.haml b/app/views/groups/runners/_index.html.haml
new file mode 100644
index 00000000000..0cf9011b471
--- /dev/null
+++ b/app/views/groups/runners/_index.html.haml
@@ -0,0 +1,9 @@
+= render 'shared/runners/runner_description'
+
+%hr
+
+%p.lead
+  = _('To start serving your jobs you can add Runners to your group')
+.row
+  .col-sm-6
+    = render 'groups/runners/group_runners'
diff --git a/app/views/groups/runners/_runner.html.haml b/app/views/groups/runners/_runner.html.haml
new file mode 100644
index 00000000000..3f89b04a5fc
--- /dev/null
+++ b/app/views/groups/runners/_runner.html.haml
@@ -0,0 +1,27 @@
+%li.runner{ id: dom_id(runner) }
+  %h4
+    = runner_status_icon(runner)
+
+    = link_to runner.short_sha, group_runner_path(@group, runner), class: 'commit-sha'
+
+    %small.edit-runner
+      = link_to edit_group_runner_path(@group, runner) do
+        = icon('edit')
+
+    .float-right
+      - if runner.active?
+        = link_to _('Pause'), pause_group_runner_path(@group, runner), method: :post, class: 'btn btn-sm btn-danger', data: { confirm: _("Are you sure?") }
+      - else
+        = link_to _('Resume'), resume_group_runner_path(@group, runner), method: :post, class: 'btn btn-success btn-sm'
+      = link_to _('Remove Runner'), group_runner_path(@group, runner), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn btn-danger btn-sm'
+  .float-right
+    %small.light
+      \##{runner.id}
+  - if runner.description.present?
+    %p.runner-description
+      = runner.description
+  - if runner.tag_list.present?
+    %p
+      - runner.tag_list.sort.each do |tag|
+        %span.label.label-primary
+          = tag
diff --git a/app/views/groups/runners/edit.html.haml b/app/views/groups/runners/edit.html.haml
new file mode 100644
index 00000000000..fcd096eeaa0
--- /dev/null
+++ b/app/views/groups/runners/edit.html.haml
@@ -0,0 +1,6 @@
+- page_title _('Edit'), "#{@runner.description} ##{@runner.id}", 'Runners'
+
+%h4 Runner ##{@runner.id}
+
+%hr
+  = render 'shared/runners/form', runner: @runner, runner_form_url: group_runner_path(@group, @runner)
diff --git a/app/views/groups/settings/_advanced.html.haml b/app/views/groups/settings/_advanced.html.haml
new file mode 100644
index 00000000000..b7c673db705
--- /dev/null
+++ b/app/views/groups/settings/_advanced.html.haml
@@ -0,0 +1,49 @@
+.sub-section
+  %h4.warning-title Change group path
+  = form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
+    = form_errors(@group)
+    .form-group
+      %p
+        Changing group path can have unintended side effects.
+        = succeed '.' do
+          = link_to 'Learn more', help_page_path('user/group/index', anchor: 'changing-a-groups-path'), target: '_blank'
+
+      .input-group.gl-field-error-anchor
+        .group-root-path.input-group-prepend.has-tooltip{ title: group_path(@group), :'data-placement' => 'bottom' }
+          .input-group-text
+            %span>= root_url
+            - if parent
+              %strong= parent.full_path + '/'
+        = f.hidden_field :parent_id
+        = f.text_field :path, placeholder: 'open-source', class: 'form-control',
+          autofocus: local_assigns[:autofocus] || false, required: true,
+          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}"
+
+    = f.submit 'Change group path', class: 'btn btn-warning'
+
+.sub-section
+  %h4.danger-title Remove group
+  = form_tag(@group, method: :delete) do
+    %p
+      Removing group will cause all child projects and resources to be removed.
+      %br
+      %strong Removed group can not be restored!
+
+    = button_to 'Remove group', '#', class: 'btn btn-remove js-confirm-danger', data: { 'confirm-danger-message' => remove_group_message(@group) }
+
+- if supports_nested_groups?
+  .sub-section
+    %h4.warning-title Transfer group
+    = form_for @group, url: transfer_group_path(@group), method: :put do |f|
+      .form-group
+        = dropdown_tag('Select parent group', options: { toggle_class: 'js-groups-dropdown', title: 'Parent Group', filter: true, dropdown_class: 'dropdown-open-top dropdown-group-transfer', placeholder: 'Search groups', data: { data: parent_group_options(@group) } })
+        = hidden_field_tag 'new_parent_group_id'
+
+      %ul
+        %li Be careful. Changing a group's parent can have unintended #{link_to 'side effects', 'https://docs.gitlab.com/ce/user/project/index.html#redirects-when-changing-repository-paths', target: 'blank'}.
+        %li You can only transfer the group to a group you manage.
+        %li You will need to update your local repositories to point to the new location.
+        %li If the parent group's visibility is lower than the group current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.
+      = f.submit 'Transfer group', class: 'btn btn-warning'
diff --git a/app/views/groups/settings/_general.html.haml b/app/views/groups/settings/_general.html.haml
new file mode 100644
index 00000000000..64786d24266
--- /dev/null
+++ b/app/views/groups/settings/_general.html.haml
@@ -0,0 +1,38 @@
+= form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
+  = form_errors(@group)
+
+  %fieldset
+    .row
+      .form-group.col-md-9
+        = f.label :name, class: 'label-light' do
+          Group name
+        = f.text_field :name, class: 'form-control'
+
+      .form-group.col-md-3
+        = f.label :id, class: 'label-light' do
+          Group ID
+        = f.text_field :id, class: 'form-control', readonly: true
+
+    .form-group
+      = f.label :description, class: 'label-light' do
+        Group description
+        %span.light (optional)
+      = f.text_area :description, class: 'form-control', rows: 3, maxlength: 250
+
+    = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :group
+
+    .form-group.row
+      .col-sm-12
+        .avatar-container.s160
+          = group_icon(@group, alt: '', class: 'avatar group-avatar s160')
+        %p.light
+          - if @group.avatar?
+            You can change the group avatar here
+          - else
+            You can upload a group avatar here
+        = render 'shared/choose_group_avatar_button', f: f
+        - if @group.avatar?
+          %hr
+          = link_to _('Remove avatar'), group_avatar_path(@group.to_param), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-danger btn-inverted'
+
+  = f.submit 'Save group', class: 'btn btn-success'
diff --git a/app/views/groups/settings/_permissions.html.haml b/app/views/groups/settings/_permissions.html.haml
new file mode 100644
index 00000000000..f1f67af1d1e
--- /dev/null
+++ b/app/views/groups/settings/_permissions.html.haml
@@ -0,0 +1,28 @@
+= form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
+  = form_errors(@group)
+
+  %fieldset
+    = render 'shared/visibility_level', f: f, visibility_level: @group.visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
+
+    .form-group.row
+      .offset-sm-2.col-sm-10
+        = render 'shared/allow_request_access', form: f
+
+    .form-group.row
+      %label.col-form-label.col-sm-2
+        = s_('GroupSettings|Share with group lock')
+      .col-sm-10
+        .form-check
+          = f.check_box :share_with_group_lock, disabled: !can_change_share_with_group_lock?(@group), class: 'form-check-input'
+          = f.label :share_with_group_lock, class: 'form-check-label' do
+            %strong
+              - group_link = link_to @group.name, group_path(@group)
+              = s_('GroupSettings|Prevent sharing a project within %{group} with other groups').html_safe % { group: group_link }
+            %br
+            %span.descr= share_with_group_lock_help_text(@group)
+
+    = render 'groups/group_admin_settings', f: f
+
+    = render_if_exists 'groups/member_lock_setting', f: f, group: @group
+
+  = f.submit 'Save group', class: 'btn btn-success'
diff --git a/app/views/groups/settings/badges/index.html.haml b/app/views/groups/settings/badges/index.html.haml
new file mode 100644
index 00000000000..c7afb25d0f8
--- /dev/null
+++ b/app/views/groups/settings/badges/index.html.haml
@@ -0,0 +1,4 @@
+- breadcrumb_title _('Project Badges')
+- page_title _('Project Badges')
+
+= render 'shared/badges/badge_settings'
diff --git a/app/views/groups/settings/ci_cd/show.html.haml b/app/views/groups/settings/ci_cd/show.html.haml
index dd82922ec55..647948c7dff 100644
--- a/app/views/groups/settings/ci_cd/show.html.haml
+++ b/app/views/groups/settings/ci_cd/show.html.haml
@@ -1,11 +1,27 @@
 - breadcrumb_title "CI / CD Settings"
 - page_title "CI / CD"
 
-%h4
-  = _('Secret variables')
-  = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'secret-variables'), target: '_blank', rel: 'noopener noreferrer'
+- expanded = Rails.env.test?
 
-%p
-  = render "ci/variables/content"
+%section.settings#secret-variables.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Variables')
+      = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'variables'), target: '_blank', rel: 'noopener noreferrer'
+    %button.btn.btn-default.js-settings-toggle{ type: "button" }
+      = expanded ? _('Collapse') : _('Expand')
+    %p.append-bottom-0
+      = render "ci/variables/content"
+  .settings-content
+    = render 'ci/variables/index', save_endpoint: group_variables_path
 
-= render 'ci/variables/index', save_endpoint: group_variables_path
+%section.settings#runners-settings.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Runners')
+    %button.btn.btn-default.js-settings-toggle{ type: "button" }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Register and see your runners for this group.')
+  .settings-content
+    = render 'groups/runners/index'
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 7f9486d08d9..5a88619f769 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -1,5 +1,5 @@
 - @no_container = true
-- breadcrumb_title "Details"
+- breadcrumb_title _("Details")
 - can_create_subgroups = can?(current_user, :create_subgroup, @group)
 
 = content_for :meta_tags do
@@ -18,9 +18,9 @@
         - if can_create_subgroups
           .btn-group.new-project-subgroup.droplab-dropdown.js-new-project-subgroup{ data: { project_path: new_project_path(namespace_id: @group.id), subgroup_path: new_group_path(parent_id: @group.id) } }
             %input.btn.btn-success.dropdown-primary.js-new-group-child{ type: "button", value: new_project_label, data: { action: "new-project" } }
-            %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown" } }
+            %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown", 'display' => 'static' } }
               = icon("caret-down", class: "dropdown-btn-icon")
-            %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-align-right{ data: { dropdown: true } }
+            %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-right{ data: { dropdown: true } }
               %li.droplab-item-selected{ role: "button", data: { value: "new-project", text: new_project_label } }
                 .menu-item
                   .icon-container
diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml
index 29b23ae2e52..c23fe0b5c49 100644
--- a/app/views/help/_shortcuts.html.haml
+++ b/app/views/help/_shortcuts.html.haml
@@ -1,12 +1,13 @@
 #modal-shortcuts.modal{ tabindex: -1 }
-  .modal-dialog
+  .modal-dialog.modal-lg
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
-        %h4
+        %h4.modal-title
           Keyboard Shortcuts
           %small
             = link_to '(Show all)', '#', class: 'js-more-help-button'
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
       .modal-body
         .row
           .col-lg-4
@@ -17,71 +18,71 @@
                   %th Global Shortcuts
                 %tr
                   %td.shortcut
-                    .key s
+                    %kbd s
                   %td Focus Search
                 %tr
                   %td.shortcut
-                    .key f
+                    %kbd f
                   %td Focus Filter
                 - if performance_bar_enabled?
                   %tr
                     %td.shortcut
-                      .key p b
+                      %kbd p b
                     %td Show/hide the Performance Bar
                 %tr
                   %td.shortcut
-                    .key ?
+                    %kbd ?
                   %td Show/hide this dialog
                 %tr
                   %td.shortcut
                     - if browser.platform.mac?
-                      .key &#8984; shift p
+                      %kbd &#8984; shift p
                     - else
-                      .key ctrl shift p
+                      %kbd ctrl shift p
                   %td Toggle Markdown preview
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       %i.fa.fa-arrow-up
                   %td Edit last comment (when focused on an empty textarea)
                 %tr
                   %td.shortcut
-                    .key shift t
+                    %kbd shift t
                   %td
                     Go to todos
                 %tr
                   %td.shortcut
-                    .key shift a
+                    %kbd shift a
                   %td
                     Go to the activity feed
                 %tr
                   %td.shortcut
-                    .key shift p
+                    %kbd shift p
                   %td
                     Go to projects
                 %tr
                   %td.shortcut
-                    .key shift i
+                    %kbd shift i
                   %td
                     Go to issues
                 %tr
                   %td.shortcut
-                    .key shift m
+                    %kbd shift m
                   %td
                     Go to merge requests
                 %tr
                   %td.shortcut
-                    .key shift g
+                    %kbd shift g
                   %td
                     Go to groups
                 %tr
                   %td.shortcut
-                    .key shift l
+                    %kbd shift l
                   %td
                     Go to milestones
                 %tr
                   %td.shortcut
-                    .key shift s
+                    %kbd shift s
                   %td
                     Go to snippets
               %tbody
@@ -90,21 +91,21 @@
                   %th Finding Project File
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       %i.fa.fa-arrow-up
                   %td Move selection up
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       %i.fa.fa-arrow-down
                   %td Move selection down
                 %tr
                   %td.shortcut
-                    .key enter
+                    %kbd enter
                   %td Open Selection
                 %tr
                   %td.shortcut
-                    .key esc
+                    %kbd esc
                   %td Go back
           .col-lg-4
             %table.shortcut-mappings
@@ -114,83 +115,95 @@
                   %th Project
                 %tr
                   %td.shortcut
-                    .key g
-                    .key p
+                    %kbd g
+                    %kbd p
                   %td
                     Go to the project's overview page
                 %tr
                   %td.shortcut
-                    .key g
-                    .key e
+                    %kbd g
+                    %kbd v
                   %td
                     Go to the project's activity feed
                 %tr
                   %td.shortcut
-                    .key g
-                    .key f
+                    %kbd g
+                    %kbd f
                   %td
                     Go to files
                 %tr
                   %td.shortcut
-                    .key g
-                    .key c
+                    %kbd g
+                    %kbd c
                   %td
                     Go to commits
                 %tr
                   %td.shortcut
-                    .key g
-                    .key j
+                    %kbd g
+                    %kbd j
                   %td
                     Go to jobs
                 %tr
                   %td.shortcut
-                    .key g
-                    .key n
+                    %kbd g
+                    %kbd n
                   %td
                     Go to network graph
                 %tr
                   %td.shortcut
-                    .key g
-                    .key d
+                    %kbd g
+                    %kbd d
                   %td
                     Go to repository charts
                 %tr
                   %td.shortcut
-                    .key g
-                    .key i
+                    %kbd g
+                    %kbd i
                   %td
                     Go to issues
                 %tr
                   %td.shortcut
-                    .key g
-                    .key b
+                    %kbd g
+                    %kbd b
                   %td
                     Go to issue boards
                 %tr
                   %td.shortcut
-                    .key g
-                    .key m
+                    %kbd g
+                    %kbd m
                   %td
                     Go to merge requests
                 %tr
                   %td.shortcut
-                    .key g
-                    .key s
+                    %kbd g
+                    %kbd e
+                  %td
+                    Go to environments
+                %tr
+                  %td.shortcut
+                    %kbd g
+                    %kbd k
+                  %td
+                    Go to kubernetes
+                %tr
+                  %td.shortcut
+                    %kbd g
+                    %kbd s
                   %td
                     Go to snippets
                 %tr
                   %td.shortcut
-                    .key g
-                    .key w
+                    %kbd g
+                    %kbd w
                   %td
                     Go to wiki
                 %tr
                   %td.shortcut
-                    .key t
+                    %kbd t
                   %td Go to finding file
                 %tr
                   %td.shortcut
-                    .key i
+                    %kbd i
                   %td New issue
 
               %tbody
@@ -199,17 +212,17 @@
                   %th Project Files browsing
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       %i.fa.fa-arrow-up
                   %td Move selection up
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       %i.fa.fa-arrow-down
                   %td Move selection down
                 %tr
                   %td.shortcut
-                    .key enter
+                    %kbd enter
                   %td Open Selection
               %tbody
                 %tr
@@ -217,113 +230,124 @@
                   %th Project File
                 %tr
                   %td.shortcut
-                    .key y
+                    %kbd y
                   %td Go to file permalink
+              %tbody
+                %tr
+                  %th
+                  %th Web IDE
+                %tr
+                  %td.shortcut
+                    - if browser.platform.mac?
+                      %kbd &#8984; p
+                    - else
+                      %kbd ctrl p
+                  %td Go to file
           .col-lg-4
             %table.shortcut-mappings
-              %tbody.hidden-shortcut.network{ style: 'display:none' }
+              %tbody.hidden-shortcut{ style: 'display:none' }
                 %tr
                   %th
                   %th Network Graph
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       %i.fa.fa-arrow-left
                     \/
-                    .key h
+                    %kbd h
                   %td Scroll left
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       %i.fa.fa-arrow-right
                     \/
-                    .key l
+                    %kbd l
                   %td Scroll right
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       %i.fa.fa-arrow-up
                     \/
-                    .key k
+                    %kbd k
                   %td Scroll up
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       %i.fa.fa-arrow-down
                     \/
-                    .key j
+                    %kbd j
                   %td Scroll down
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       shift
                       %i.fa.fa-arrow-up
                     \/
-                    .key
+                    %kbd
                       shift k
                   %td Scroll to top
                 %tr
                   %td.shortcut
-                    .key
+                    %kbd
                       shift
                       %i.fa.fa-arrow-down
                     \/
-                    .key
+                    %kbd
                       shift j
                   %td Scroll to bottom
-              %tbody.hidden-shortcut.issues{ style: 'display:none' }
+              %tbody.hidden-shortcut{ style: 'display:none' }
                 %tr
                   %th
                   %th Issues
                 %tr
                   %td.shortcut
-                    .key a
+                    %kbd a
                   %td Change assignee
                 %tr
                   %td.shortcut
-                    .key m
+                    %kbd m
                   %td Change milestone
                 %tr
                   %td.shortcut
-                    .key r
+                    %kbd r
                   %td Reply (quoting selected text)
                 %tr
                   %td.shortcut
-                    .key e
+                    %kbd e
                   %td Edit issue
                 %tr
                   %td.shortcut
-                    .key l
+                    %kbd l
                   %td Change Label
-              %tbody.hidden-shortcut.merge_requests{ style: 'display:none' }
+              %tbody.hidden-shortcut{ style: 'display:none' }
                 %tr
                   %th
                   %th Merge Requests
                 %tr
                   %td.shortcut
-                    .key a
+                    %kbd a
                   %td Change assignee
                 %tr
                   %td.shortcut
-                    .key m
+                    %kbd m
                   %td Change milestone
                 %tr
                   %td.shortcut
-                    .key r
+                    %kbd r
                   %td Reply (quoting selected text)
                 %tr
                   %td.shortcut
-                    .key e
+                    %kbd e
                   %td Edit merge request
                 %tr
                   %td.shortcut
-                    .key l
+                    %kbd l
                   %td Change Label
-              %tbody.hidden-shortcut.wiki{ style: 'display:none' }
+              %tbody.hidden-shortcut{ style: 'display:none' }
                 %tr
                   %th
                   %th Wiki pages
                 %tr
                   %td.shortcut
-                    .key e
+                    %kbd e
                   %td Edit wiki page
diff --git a/app/views/help/index.html.haml b/app/views/help/index.html.haml
index bf2725dc328..7a66bac09cb 100644
--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
@@ -8,7 +8,7 @@
   Community Edition
   - if user_signed_in?
     %span= Gitlab::VERSION
-    %small= link_to Gitlab::REVISION, Gitlab::COM_URL + namespace_project_commits_path('gitlab-org', 'gitlab-ce', Gitlab::REVISION)
+    %small= link_to Gitlab.revision, Gitlab::COM_URL + namespace_project_commits_path('gitlab-org', 'gitlab-ce', Gitlab.revision)
     = version_status_badge
   %hr
 
@@ -33,10 +33,10 @@
     .documentation-index.wiki
       = markdown(@help_index)
   .col-md-4
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Quick help
-      %ul.well-list
+      %ul.content-list
         %li= link_to 'See our website for getting help', support_url
         %li
           %button.btn-blank.btn-link.js-trigger-search-bar{ type: 'button' }
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index ce09b44fbb2..b32b602ceb3 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -74,10 +74,10 @@
         = lorem
 
       .cover-controls
-        = link_to '#', class: 'btn btn-gray' do
+        = link_to '#', class: 'btn btn-default' do
           = icon('pencil')
         &nbsp;
-        = link_to '#', class: 'btn btn-gray' do
+        = link_to '#', class: 'btn btn-default' do
           = icon('rss')
 
   %h2#lists Lists
@@ -116,9 +116,9 @@
 
   .lead
     List with hover effect
-    %code .well-list
+    %code .hover-list
   .example
-    %ul.well-list
+    %ul.hover-list
       %li
         One item
       %li
@@ -129,9 +129,9 @@
   .lead
     List inside panel
   .example
-    .panel.panel-default
-      .panel-heading Your list
-      %ul.well-list
+    .card
+      .card-header Your list
+      %ul.content-list
         %li
           One item
         %li
@@ -174,7 +174,7 @@
 
   .example
     .top-area
-      %ul.nav-links
+      %ul.nav-links.nav.nav-tabs
         %li.active
           %a Open
         %li
@@ -205,8 +205,7 @@
   %h2#buttons Buttons
 
   .example
-    %button.btn.btn-default{ :type => "button" } Default
-    %button.btn.btn-gray{ :type => "button" } Gray
+    %button.btn.btn-default{ :type => "button" } Secondary
     %button.btn.btn-primary{ :type => "button" } Primary
     %button.btn.btn-success{ :type => "button" } Success
     %button.btn.btn-info{ :type => "button" } Info
@@ -218,7 +217,7 @@
 
   .example
     .clearfix
-      .dropdown.inline.pull-left
+      .dropdown.inline.float-left
         %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
@@ -226,11 +225,11 @@
           %li
             %a{ href: "#" }
               Dropdown option
-      .dropdown.inline.pull-right
+      .dropdown.inline.float-right
         %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
+        %ul.dropdown-menu.dropdown-menu-right
           %li
             %a{ href: "#" }
               Dropdown option
@@ -416,26 +415,26 @@
 
   .row
     .col-md-6
-      .panel.panel-success
-        .panel-heading Success
-        .panel-body
+      .card.bg-success
+        .card-header Success
+        .card-body
           = lorem
-      .panel.panel-primary
-        .panel-heading Primary
-        .panel-body
+      .card.bg-primary
+        .card-header Primary
+        .card-body
           = lorem
-      .panel.panel-info
-        .panel-heading Info
-        .panel-body
+      .card.bg-info
+        .card-header Info
+        .card-body
           = lorem
     .col-md-6
-      .panel.panel-warning
-        .panel-heading Warning
-        .panel-body
+      .card.bg-warning
+        .card-header Warning
+        .card-body
           = lorem
-      .panel.panel-danger
-        .panel-heading Danger
-        .panel-body
+      .card.bg-danger
+        .card-header Danger
+        .card-body
           = lorem
 
   %h2#alerts Alerts
@@ -444,8 +443,6 @@
     .col-md-6
       .alert.alert-success
         = lorem
-      .alert.alert-primary
-        = lorem
       .alert.alert-info
         = lorem
     .col-md-6
@@ -461,23 +458,23 @@
     %code form.horizontal-form
 
   .example
-    %form.form-horizontal
-      .form-group
-        %label.col-sm-2.control-label{ :for => "inputEmail3" } Email
+    %form
+      .form-group.row
+        %label.col-sm-2.col-form-label{ :for => "inputEmail3" } Email
         .col-sm-10
           %input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/
-      .form-group
-        %label.col-sm-2.control-label{ :for => "inputPassword3" } Password
+      .form-group.row
+        %label.col-sm-2.col-form-label{ :for => "inputPassword3" } Password
         .col-sm-10
           %input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/
-      .form-group
-        .col-sm-offset-2.col-sm-10
-          .checkbox
-            %label
-              %input{ :type => "checkbox" }/
+      .form-group.row
+        .offset-sm-2.col-sm-10
+          .form-check
+            %input.form-check-input{ :type => "checkbox" }/
+            %label.form-check-label
               Remember me
-      .form-group
-        .col-sm-offset-2.col-sm-10
+      .form-group.row
+        .offset-sm-2.col-sm-10
           %button.btn.btn-default{ :type => "submit" } Sign in
 
   .lead
@@ -492,9 +489,9 @@
       .form-group
         %label{ :for => "exampleInputPassword1" } Password
         %input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/
-      .checkbox
-        %label
-          %input{ :type => "checkbox" }/
+      .form-check
+        %input.form-check-input{ :type => "checkbox" }/
+        %label.form-check-label
           Remember me
       %button.btn.btn-default{ :type => "submit" } Sign in
 
diff --git a/app/views/ide/index.html.haml b/app/views/ide/index.html.haml
index e0e8fe548d0..9f8b0acd763 100644
--- a/app/views/ide/index.html.haml
+++ b/app/views/ide/index.html.haml
@@ -1,12 +1,11 @@
 - @body_class = 'ide'
 - page_title 'IDE'
 
-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag 'ide', force_same_domain: true
-
 #ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg'),
   "no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'),
-  "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg') } }
+  "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg'),
+  "pipelines-empty-state-svg-path": image_path('illustrations/pipelines_empty.svg'),
+  "ci-help-page-path" => help_page_path('ci/quick_start/README'), } }
   .text-center
     = icon('spinner spin 2x')
     %h2.clgray= _('Loading the GitLab IDE...')
diff --git a/app/views/import/_githubish_status.html.haml b/app/views/import/_githubish_status.html.haml
index 638c8b5a672..f7094375023 100644
--- a/app/views/import/_githubish_status.html.haml
+++ b/app/views/import/_githubish_status.html.haml
@@ -46,14 +46,15 @@
           %td.import-target
             %fieldset.row
             .input-group
-              .project-path.input-group-btn
+              .project-path.input-group-prepend
                 - if current_user.can_select_namespace?
                   - selected = params[:namespace_id] || :current_user
                   - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner.login, path: repo.owner.login) } : {}
-                  = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 }
+                  = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'input-group-text select2 js-select-namespace', tabindex: 1 }
                 - else
-                  = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
-              %span.input-group-addon /
+                  = text_field_tag :path, current_user.namespace_path, class: "input-group-text input-large form-control", tabindex: 1, disabled: true
+              %span.input-group-prepend
+                .input-group-text /
               = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
diff --git a/app/views/import/bitbucket/status.html.haml b/app/views/import/bitbucket/status.html.haml
index 9589e0956f4..4e8f715db4f 100644
--- a/app/views/import/bitbucket/status.html.haml
+++ b/app/views/import/bitbucket/status.html.haml
@@ -54,14 +54,15 @@
           %td.import-target
             %fieldset.row
             .input-group
-              .project-path.input-group-btn
+              .project-path.input-group-prepend
                 - if current_user.can_select_namespace?
                   - selected = params[:namespace_id] || :current_user
                   - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner, path: repo.owner) } : {}
-                  = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 }
+                  = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'input-group-text select2 js-select-namespace', tabindex: 1 }
                 - else
-                  = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
-              %span.input-group-addon /
+                  = text_field_tag :path, current_user.namespace_path, class: "input-group-text input-large form-control", tabindex: 1, disabled: true
+              %span.input-group-prepend
+                .input-group-text /
               = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
           %td.import-actions.job-status
             = button_tag class: 'btn btn-import js-add-to-import' do
@@ -73,7 +74,7 @@
             = link_to repo.full_name, "https://bitbucket.org/#{repo.full_name}", target: '_blank', rel: 'noopener noreferrer'
           %td.import-target
           %td.import-actions-job-status
-            = label_tag 'Incompatible Project', nil, class: 'label label-danger'
+            = label_tag 'Incompatible Project', nil, class: 'label badge-danger'
 
 - if @incompatible_repos.any?
   %p
diff --git a/app/views/import/fogbugz/new.html.haml b/app/views/import/fogbugz/new.html.haml
index 5515fad6f48..74d686b6703 100644
--- a/app/views/import/fogbugz/new.html.haml
+++ b/app/views/import/fogbugz/new.html.haml
@@ -5,22 +5,22 @@
   Import projects from FogBugz
 %hr
 
-= form_tag callback_import_fogbugz_path, class: 'form-horizontal' do
+= form_tag callback_import_fogbugz_path do
   %p
     To get started you enter your FogBugz URL and login information below.
     In the next steps, you'll be able to map users and select the projects
     you want to import.
-  .form-group
-    = label_tag :uri, 'FogBugz URL', class: 'control-label'
-    .col-sm-4
+  .form-group.row
+    = label_tag :uri, 'FogBugz URL', class: 'col-form-label col-md-2'
+    .col-md-4
       = text_field_tag :uri, nil, placeholder: 'https://mycompany.fogbugz.com', class: 'form-control'
-  .form-group
-    = label_tag :email, 'FogBugz Email', class: 'control-label'
-    .col-sm-4
+  .form-group.row
+    = label_tag :email, 'FogBugz Email', class: 'col-form-label col-md-2'
+    .col-md-4
       = text_field_tag :email, nil, class: 'form-control'
-  .form-group
-    = label_tag :password, 'FogBugz Password', class: 'control-label'
-    .col-sm-4
+  .form-group.row
+    = label_tag :password, 'FogBugz Password', class: 'col-form-label col-md-2'
+    .col-md-4
       = password_field_tag :password, nil, class: 'form-control'
   .form-actions
     = submit_tag 'Continue to the next step', class: 'btn btn-create'
diff --git a/app/views/import/fogbugz/new_user_map.html.haml b/app/views/import/fogbugz/new_user_map.html.haml
index 84e0009487f..d27c5d3c36d 100644
--- a/app/views/import/fogbugz/new_user_map.html.haml
+++ b/app/views/import/fogbugz/new_user_map.html.haml
@@ -5,7 +5,7 @@
   Import projects from FogBugz
 %hr
 
-= form_tag create_user_map_import_fogbugz_path, class: 'form-horizontal' do
+= form_tag create_user_map_import_fogbugz_path do
   %p
     Customize how FogBugz email addresses and usernames are imported into GitLab.
     In the next step, you'll be able to select the projects you want to import.
diff --git a/app/views/import/gitea/new.html.haml b/app/views/import/gitea/new.html.haml
index 02a116f996b..581576a8a3d 100644
--- a/app/views/import/gitea/new.html.haml
+++ b/app/views/import/gitea/new.html.haml
@@ -10,13 +10,13 @@
   = succeed '.' do
     = link_to 'Personal Access Token', 'https://github.com/gogits/go-gogs-client/wiki#access-token'
 
-= form_tag personal_access_token_import_gitea_path, class: 'form-horizontal' do
-  .form-group
-    = label_tag :gitea_host_url, 'Gitea Host URL', class: 'control-label'
+= form_tag personal_access_token_import_gitea_path do
+  .form-group.row
+    = label_tag :gitea_host_url, 'Gitea Host URL', class: 'col-form-label col-sm-2'
     .col-sm-4
       = text_field_tag :gitea_host_url, nil, placeholder: 'https://try.gitea.io', class: 'form-control'
-  .form-group
-    = label_tag :personal_access_token, 'Personal Access Token', class: 'control-label'
+  .form-group.row
+    = label_tag :personal_access_token, 'Personal Access Token', class: 'col-form-label col-sm-2'
     .col-sm-4
       = text_field_tag :personal_access_token, nil, class: 'form-control'
   .form-actions
diff --git a/app/views/import/github/new.html.haml b/app/views/import/github/new.html.haml
index 54ef51b30e3..b9ebb1a39d9 100644
--- a/app/views/import/github/new.html.haml
+++ b/app/views/import/github/new.html.haml
@@ -19,12 +19,9 @@
 
 = form_tag personal_access_token_import_github_path, method: :post, class: 'form-inline' do
   .form-group
-    = text_field_tag :personal_access_token, '', class: 'form-control', placeholder: _('Personal Access Token'), size: 40
+    = text_field_tag :personal_access_token, '', class: 'form-control append-right-8', placeholder: _('Personal Access Token'), size: 40
     = submit_tag _('List your GitHub repositories'), class: 'btn btn-success'
 
-  -# EE-specific start
-  -# EE-specific end
-
 - unless github_import_configured?
   %hr
   %p
diff --git a/app/views/import/gitlab_projects/new.html.haml b/app/views/import/gitlab_projects/new.html.haml
index dec85368d10..cc672a5ea7c 100644
--- a/app/views/import/gitlab_projects/new.html.haml
+++ b/app/views/import/gitlab_projects/new.html.haml
@@ -8,20 +8,22 @@
 
 = form_tag import_gitlab_project_path, class: 'new_project', multipart: true do
   .row
-    .form-group.col-xs-12.col-sm-6
+    .form-group.col-12.col-sm-6
       = label_tag :namespace_id, 'Project path', class: 'label-light'
       .form-group
         .input-group
           - if current_user.can_select_namespace?
-            .input-group-addon.has-tooltip{ title: root_url }
-              = root_url
+            .input-group-prepend.has-tooltip{ title: root_url }
+              .input-group-text
+                = root_url
             = select_tag :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), class: 'select2 js-select-namespace', tabindex: 1
 
           - else
-            .input-group-addon.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
-              #{user_url(current_user.username)}/
+            .input-group-prepend.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
+              .input-group-text.border-0
+                #{user_url(current_user.username)}/
             = hidden_field_tag :namespace_id, value: current_user.namespace_id
-    .form-group.col-xs-12.col-sm-6.project-path
+    .form-group.col-12.col-sm-6.project-path
       = label_tag :path, 'Project name', class: 'label-light'
       = text_field_tag :path, @path, placeholder: "my-awesome-project", class: "js-path-name form-control", tabindex: 2, autofocus: true, required: true
 
@@ -35,6 +37,6 @@
       .form-group
         = file_field_tag :file, class: ''
   .row
-    .form-actions
+    .form-actions.col-sm-12
       = submit_tag 'Import project', class: 'btn btn-create'
       = link_to 'Cancel', new_project_path, class: 'btn btn-cancel'
diff --git a/app/views/import/google_code/new.html.haml b/app/views/import/google_code/new.html.haml
index c5800a1cca0..2f1fb8d9c56 100644
--- a/app/views/import/google_code/new.html.haml
+++ b/app/views/import/google_code/new.html.haml
@@ -5,7 +5,7 @@
   Import projects from Google Code
 %hr
 
-= form_tag callback_import_google_code_path, class: 'form-horizontal', multipart: true do
+= form_tag callback_import_google_code_path, multipart: true do
   %p
     Follow the steps below to export your Google Code project data.
     In the next step, you'll be able to select the projects you want to import.
diff --git a/app/views/import/google_code/new_user_map.html.haml b/app/views/import/google_code/new_user_map.html.haml
index 0738b3db1eb..91c774f575c 100644
--- a/app/views/import/google_code/new_user_map.html.haml
+++ b/app/views/import/google_code/new_user_map.html.haml
@@ -5,7 +5,7 @@
   Import projects from Google Code
 %hr
 
-= form_tag create_user_map_import_google_code_path, class: 'form-horizontal' do
+= form_tag create_user_map_import_google_code_path do
   %p
     Customize how Google Code email addresses and usernames are imported into GitLab.
     In the next step, you'll be able to select the projects you want to import.
@@ -36,7 +36,7 @@
         will add "By <a href="#">johnsmith@example.com</a>" to all issues and comments originally created by johnsmith@example.com.
         By default, the email address or username is masked to ensure the user's privacy. Use this option if you want to show the full email address.
 
-  .form-group
+  .form-group.row
     .col-sm-12
       = text_area_tag :user_map, JSON.pretty_generate(@user_map), class: 'form-control', rows: 15
 
diff --git a/app/views/import/google_code/status.html.haml b/app/views/import/google_code/status.html.haml
index bc61aeece72..acf7a108cb0 100644
--- a/app/views/import/google_code/status.html.haml
+++ b/app/views/import/google_code/status.html.haml
@@ -66,7 +66,7 @@
             = link_to repo.name, "https://code.google.com/p/#{repo.name}", target: "_blank", rel: 'noopener noreferrer'
           %td.import-target
           %td.import-actions-job-status
-            = label_tag "Incompatible Project", nil, class: "label label-danger"
+            = label_tag "Incompatible Project", nil, class: "label badge-danger"
 
 - if @incompatible_repos.any?
   %p
diff --git a/app/views/issues/_issues_calendar.ics.ruby b/app/views/issues/_issues_calendar.ics.ruby
new file mode 100644
index 00000000000..3563635d33d
--- /dev/null
+++ b/app/views/issues/_issues_calendar.ics.ruby
@@ -0,0 +1,15 @@
+cal = Icalendar::Calendar.new
+cal.prodid = '-//GitLab//NONSGML GitLab//EN'
+cal.x_wr_calname = 'GitLab Issues'
+
+@issues.includes(project: :namespace).each do |issue|
+  cal.event do |event|
+    event.dtstart     = Icalendar::Values::Date.new(issue.due_date)
+    event.summary     = "#{issue.title} (in #{issue.project.full_path})"
+    event.description = "Find out more at #{issue_url(issue)}"
+    event.url         = issue_url(issue)
+    event.transp      = 'TRANSPARENT'
+  end
+end
+
+cal.to_ical
diff --git a/app/views/kaminari/gitlab/_first_page.html.haml b/app/views/kaminari/gitlab/_first_page.html.haml
index e7a70e3bb28..3b7d4a1c578 100644
--- a/app/views/kaminari/gitlab/_first_page.html.haml
+++ b/app/views/kaminari/gitlab/_first_page.html.haml
@@ -5,5 +5,5 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li.first
-  = link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote
+%li.page-item.js-first-button
+  = link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote, class: 'page-link'
diff --git a/app/views/kaminari/gitlab/_gap.html.haml b/app/views/kaminari/gitlab/_gap.html.haml
index 889514c4755..849f92fdc95 100644
--- a/app/views/kaminari/gitlab/_gap.html.haml
+++ b/app/views/kaminari/gitlab/_gap.html.haml
@@ -4,6 +4,5 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li
-  %span.gap
-    = raw(t 'views.pagination.truncate')
+%li.page-item.disabled.d-none.d-md-block
+  = link_to raw(t 'views.pagination.truncate'), '#', class: 'page-link'
diff --git a/app/views/kaminari/gitlab/_last_page.html.haml b/app/views/kaminari/gitlab/_last_page.html.haml
index 53f780d1d1b..7836e17f877 100644
--- a/app/views/kaminari/gitlab/_last_page.html.haml
+++ b/app/views/kaminari/gitlab/_last_page.html.haml
@@ -5,5 +5,5 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li.last
-  = link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {remote: remote}
+%li.page-item.js-last-button
+  = link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {remote: remote, class: 'page-link'}
diff --git a/app/views/kaminari/gitlab/_next_page.html.haml b/app/views/kaminari/gitlab/_next_page.html.haml
index c93dc7a50e8..a7fa1a21a6c 100644
--- a/app/views/kaminari/gitlab/_next_page.html.haml
+++ b/app/views/kaminari/gitlab/_next_page.html.haml
@@ -5,9 +5,8 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-- if current_page.last?
-  %li.next.disabled
-    %span= raw(t 'views.pagination.next')
-- else
-  %li.next
-    = link_to raw(t 'views.pagination.next'), url, rel: 'next', remote: remote
+
+- page_url = current_page.last? ? '#' : url
+
+%li.page-item.js-next-button{ class: ('disabled' if current_page.last?) }
+  = link_to raw(t 'views.pagination.next'), page_url, rel: 'next', remote: remote, class: 'page-link'
diff --git a/app/views/kaminari/gitlab/_page.html.haml b/app/views/kaminari/gitlab/_page.html.haml
index 5c5be03a7cd..d0dc1784540 100644
--- a/app/views/kaminari/gitlab/_page.html.haml
+++ b/app/views/kaminari/gitlab/_page.html.haml
@@ -6,5 +6,5 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li.page{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?)] }
-  = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil }
+%li.page-item.js-pagination-page{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?), ('d-none d-md-block' if !page.current?) ] }
+  = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil, class: 'page-link' }
diff --git a/app/views/kaminari/gitlab/_paginator.html.haml b/app/views/kaminari/gitlab/_paginator.html.haml
index 8fe6bd653ae..ac9e274dbc7 100644
--- a/app/views/kaminari/gitlab/_paginator.html.haml
+++ b/app/views/kaminari/gitlab/_paginator.html.haml
@@ -6,8 +6,8 @@
 -#    remote:        data-remote
 -#    paginator:     the paginator that renders the pagination tags inside
 = paginator.render do
-  .gl-pagination
-    %ul.pagination.clearfix
+  .gl-pagination.prepend-top-default
+    %ul.pagination.justify-content-center
       - unless current_page.first?
         = first_page_tag unless total_pages < 5 # As kaminari will always show the first 5 pages
       = prev_page_tag
diff --git a/app/views/kaminari/gitlab/_prev_page.html.haml b/app/views/kaminari/gitlab/_prev_page.html.haml
index b7c6caf7ff4..12b0e106a62 100644
--- a/app/views/kaminari/gitlab/_prev_page.html.haml
+++ b/app/views/kaminari/gitlab/_prev_page.html.haml
@@ -5,9 +5,8 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-- if current_page.first?
-  %li.prev.disabled
-    %span= raw(t 'views.pagination.previous')
-- else
-  %li.prev
-    = link_to raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote
+
+- page_url = current_page.first? ? '#' : url
+
+%li.page-item.js-previous-button{ class: ('disabled' if current_page.first?) }
+  = link_to raw(t 'views.pagination.previous'), page_url, rel: 'prev', remote: remote, class: 'page-link'
diff --git a/app/views/kaminari/gitlab/_without_count.html.haml b/app/views/kaminari/gitlab/_without_count.html.haml
index 250029c4475..f780400ebcb 100644
--- a/app/views/kaminari/gitlab/_without_count.html.haml
+++ b/app/views/kaminari/gitlab/_without_count.html.haml
@@ -1,8 +1,8 @@
-.gl-pagination
-  %ul.pagination.clearfix
+.gl-pagination.prepend-top-default
+  %ul.pagination.justify-content-center
     - if previous_path
-      %li.prev
-        = link_to(t('views.pagination.previous'), previous_path, rel: 'prev')
+      %li.page-item.prev
+        = link_to(t('views.pagination.previous'), previous_path, rel: 'prev', class: 'page-link')
     - if next_path
-      %li.next
-        = link_to(t('views.pagination.next'), next_path, rel: 'next')
+      %li.page-item.next
+        = link_to(t('views.pagination.next'), next_path, rel: 'next', class: 'page-link')
diff --git a/app/views/layouts/_flash.html.haml b/app/views/layouts/_flash.html.haml
index 05ddd0ec733..8bd5708d490 100644
--- a/app/views/layouts/_flash.html.haml
+++ b/app/views/layouts/_flash.html.haml
@@ -1,8 +1,10 @@
+- extra_flash_class = local_assigns.fetch(:extra_flash_class, nil)
+
 .flash-container.flash-container-page
   -# We currently only support `alert`, `notice`, `success`
   - flash.each do |key, value|
     -# Don't show a flash message if the message is nil
     - if value
       %div{ class: "flash-#{key}" }
-        %div{ class: (container_class) }
+        %div{ class: "#{container_class} #{extra_flash_class}" }
           %span= value
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index b981b5fdafa..9253a0652da 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -25,7 +25,7 @@
   %title= page_title(site_name)
   %meta{ name: "description", content: page_description }
 
-  = favicon_link_tag favicon, id: 'favicon'
+  = favicon_link_tag favicon, id: 'favicon', data: { original_href: favicon }, type: 'image/png'
 
   = stylesheet_link_tag "application", media: "all"
   = stylesheet_link_tag "print",       media: "print"
@@ -38,9 +38,6 @@
     = yield :library_javascripts
 
   = javascript_include_tag locale_path unless I18n.locale == :en
-  = webpack_bundle_tag "webpack_runtime"
-  = webpack_bundle_tag "common"
-  = webpack_bundle_tag "main"
   = webpack_bundle_tag "raven" if Gitlab::CurrentSettings.clientside_sentry_enabled
 
   - if content_for?(:page_specific_javascripts)
diff --git a/app/views/layouts/_init_auto_complete.html.haml b/app/views/layouts/_init_auto_complete.html.haml
index 4276e6ee4bb..240e03a5d53 100644
--- a/app/views/layouts/_init_auto_complete.html.haml
+++ b/app/views/layouts/_init_auto_complete.html.haml
@@ -1,16 +1,11 @@
-- project = @target_project || @project
+- object = @target_project || @project || @group
 - noteable_type = @noteable.class if @noteable.present?
 
-- if project
+- datasources = autocomplete_data_sources(object, noteable_type)
+
+- if object
   -# haml-lint:disable InlineJavaScript
   :javascript
     gl = window.gl || {};
     gl.GfmAutoComplete = gl.GfmAutoComplete || {};
-    gl.GfmAutoComplete.dataSources = {
-      members: "#{members_project_autocomplete_sources_path(project, type: noteable_type, type_id: params[:id])}",
-      issues: "#{issues_project_autocomplete_sources_path(project)}",
-      mergeRequests: "#{merge_requests_project_autocomplete_sources_path(project)}",
-      labels: "#{labels_project_autocomplete_sources_path(project, type: noteable_type, type_id: params[:id])}",
-      milestones: "#{milestones_project_autocomplete_sources_path(project)}",
-      commands: "#{commands_project_autocomplete_sources_path(project, type: noteable_type, type_id: params[:id])}"
-    };
+    gl.GfmAutoComplete.dataSources = #{datasources.to_json};
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index f0963cf9da8..f67a8878c80 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -6,6 +6,7 @@
     .mobile-overlay
     .alert-wrapper
       = render "layouts/broadcast"
+      = render 'layouts/header/read_only_banner'
       = yield :flash_message
       - unless @hide_breadcrumbs
         = render "layouts/nav/breadcrumbs"
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index 52587760ba4..91f796adb2e 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -7,7 +7,7 @@
 - if @project && @project.persisted?
   - project_data_attrs = { project_path: j(@project.path), name: j(@project.name), issues_path: project_issues_path(@project), mr_path: project_merge_requests_path(@project), issues_disabled: !@project.issues_enabled? }
 .search.search-form{ class: "#{'has-location-badge' if label.present?}" }
-  = form_tag search_path, method: :get, class: 'navbar-form' do |f|
+  = form_tag search_path, method: :get, class: 'form-inline' do |f|
     .search-input-container
       - if label.present?
         .location-badge= label
diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml
index 257f7326409..81f35615555 100644
--- a/app/views/layouts/devise.html.haml
+++ b/app/views/layouts/devise.html.haml
@@ -1,7 +1,7 @@
 !!! 5
-%html.devise-layout-html
+%html.devise-layout-html{ class: system_message_class }
   = render "layouts/head"
-  %body.ui_indigo.login-page.application.navless{ data: { page: body_data_page } }
+  %body.ui-indigo.login-page.application.navless{ data: { page: body_data_page } }
     .page-wrap
       = render "layouts/header/empty"
       .login-page-broadcast
@@ -10,13 +10,11 @@
         .content
           = render "layouts/flash"
           .row
-            .col-sm-5.pull-right.new-session-forms-container
-              = yield
-            .col-sm-7.brand-holder.pull-left
+            .col-sm-7.brand-holder
               %h1
                 = brand_title
               = brand_image
-              - if brand_item&.description?
+              - if current_appearance&.description?
                 = brand_text
               - else
                 %h3 Open source software to collaborate on code
@@ -28,6 +26,8 @@
 
               - if Gitlab::CurrentSettings.sign_in_text.present?
                 = markdown_field(Gitlab::CurrentSettings.current_application_settings, :sign_in_text)
+            .col-sm-5.new-session-forms-container
+              = yield
 
       %hr.footer-fixed
       .container.footer-container
diff --git a/app/views/layouts/devise_empty.html.haml b/app/views/layouts/devise_empty.html.haml
index 8718bb3db1a..52805e0da73 100644
--- a/app/views/layouts/devise_empty.html.haml
+++ b/app/views/layouts/devise_empty.html.haml
@@ -1,7 +1,7 @@
 !!! 5
-%html{ lang: "en" }
+%html{ lang: "en", class: system_message_class }
   = render "layouts/head"
-  %body.ui_indigo.login-page.application.navless
+  %body.ui-indigo.login-page.application.navless
     = render "layouts/header/empty"
     = render "layouts/broadcast"
     .container.navless-container
diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml
index 9382ee8715e..06069a72951 100644
--- a/app/views/layouts/errors.html.haml
+++ b/app/views/layouts/errors.html.haml
@@ -3,57 +3,17 @@
   %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: 14px;
-      }
+    %style
+      = Rails.application.assets_manifest.find_sources('errors.css').first.to_s.html_safe
+  %body
+    .page-container
+      = yield
+    -# haml-lint:disable InlineJavaScript
+    :javascript
+      (function(){
+        var goBackElement = document.querySelector('.js-go-back');
 
-      h1 {
-        font-size: 56px;
-        line-height: 100px;
-        font-weight: 400;
-        color: #456;
-      }
-
-      h2 {
-        font-size: 24px;
-        color: #666;
-        line-height: 1.5em;
-      }
-
-      h3 {
-        color: #456;
-        font-size: 20px;
-        font-weight: 400;
-        line-height: 28px;
-      }
-
-      hr {
-        max-width: 800px;
-        margin: 18px auto;
-        border: 0;
-        border-top: 1px solid #EEE;
-        border-bottom: 1px solid white;
-      }
-
-      img {
-        max-width: 40vw;
-        display: block;
-        margin: 40px auto;
-      }
-
-      .container {
-        margin: auto 20px;
-      }
-
-      ul {
-      margin: auto;
-      text-align: left;
-      display:inline-block;
-      }
-%body
-  = yield
+        if (goBackElement && history.length > 1) {
+          goBackElement.style.display = 'block';
+        }
+      }());
diff --git a/app/views/layouts/header/_current_user_dropdown.html.haml b/app/views/layouts/header/_current_user_dropdown.html.haml
new file mode 100644
index 00000000000..a74ea246eaf
--- /dev/null
+++ b/app/views/layouts/header/_current_user_dropdown.html.haml
@@ -0,0 +1,27 @@
+- return unless current_user
+
+%ul
+  %li.current-user
+    .user-name.bold
+      = current_user.name
+    = current_user.to_reference
+  %li.divider
+  - if current_user_menu?(:profile)
+    %li
+      = link_to s_("CurrentUser|Profile"), current_user, class: 'profile-link', data: { user: current_user.username }
+  - if current_user_menu?(:settings)
+    %li
+      = link_to s_("CurrentUser|Settings"), profile_path
+  - if current_user_menu?(:help)
+    %li
+      = link_to _("Help"), help_path
+  - if current_user_menu?(:help) || current_user_menu?(:settings) || current_user_menu?(:profile)
+    %li.divider
+  %li
+    = link_to "https://about.gitlab.com/contributing", target: '_blank', class: 'text-nowrap' do
+      = _("Contribute to GitLab")
+      = sprite_icon('external-link', size: 16)
+  %li.divider
+  - if current_user_menu?(:sign_out)
+    %li
+      = link_to _("Sign out"), destroy_user_session_path, class: "sign-out-link"
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index e6238c0dddb..5cec443e969 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,4 +1,4 @@
-%header.navbar.navbar-gitlab.qa-navbar
+%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm
   %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
   .container-fluid
     .header-content
@@ -8,7 +8,7 @@
             = brand_header_logo
             - logo_text = brand_header_logo_type
             - if logo_text.present?
-              %span.logo-text.hidden-xs
+              %span.logo-text.d-none.d-sm-block
                 = logo_text
 
         - if current_user
@@ -21,9 +21,9 @@
           - if current_user
             = render 'layouts/header/new_dropdown'
           - if header_link?(:search)
-            %li.hidden-sm.hidden-xs
+            %li.nav-item.d-none.d-sm-none.d-md-block
               = render 'layouts/search' unless current_controller?(:search)
-            %li.visible-sm-inline-block.visible-xs-inline-block
+            %li.nav-item.d-inline-block.d-sm-none.d-md-none
               = link_to search_path, title: 'Search', aria: { label: "Search" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = sprite_icon('search', size: 16)
 
@@ -32,53 +32,38 @@
               = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = sprite_icon('issues', size: 16)
                 - issues_count = assigned_issuables_count(:issues)
-                %span.badge.issues-count{ class: ('hidden' if issues_count.zero?) }
+                %span.badge.badge-pill.issues-count{ class: ('hidden' if issues_count.zero?) }
                   = number_with_delimiter(issues_count)
           - if header_link?(:merge_requests)
             = nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter" }) do
               = link_to assigned_mrs_dashboard_path, title: 'Merge requests', class: 'dashboard-shortcuts-merge_requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = sprite_icon('git-merge', size: 16)
                 - merge_requests_count = assigned_issuables_count(:merge_requests)
-                %span.badge.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) }
+                %span.badge.badge-pill.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) }
                   = number_with_delimiter(merge_requests_count)
           - if header_link?(:todos)
             = nav_link(controller: 'dashboard/todos', html_options: { class: "user-counter" }) do
               = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = sprite_icon('todo-done', size: 16)
-                %span.badge.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
+                %span.badge.badge-pill.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
                   = todos_count_format(todos_pending_count)
           - if header_link?(:user_dropdown)
-            %li.header-user.dropdown
+            %li.nav-item.header-user.dropdown
               = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
                 = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar"
                 = sprite_icon('angle-down', css_class: 'caret-down')
-              .dropdown-menu-nav.dropdown-menu-align-right
-                %ul
-                  %li.current-user
-                    .user-name.bold
-                      = current_user.name
-                    @#{current_user.username}
-                  %li.divider
-                  %li
-                    = link_to "Profile", current_user, class: 'profile-link', data: { user: current_user.username }
-                  %li
-                    = link_to "Settings", profile_path
-                  - if current_user
-                    %li
-                      = link_to "Help", help_path
-                  %li.divider
-                  %li
-                    = link_to "Sign out", destroy_user_session_path, class: "sign-out-link"
+              .dropdown-menu.dropdown-menu-right
+                = render 'layouts/header/current_user_dropdown'
           - if header_link?(:admin_impersonation)
-            %li.impersonation
-              = link_to admin_impersonation_path, class: 'impersonation-btn', method: :delete, title: "Stop impersonation", aria: { label: 'Stop impersonation' }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
+            %li.nav-item.impersonation
+              = link_to admin_impersonation_path, class: 'nav-link impersonation-btn', method: :delete, title: "Stop impersonation", aria: { label: 'Stop impersonation' }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
                 = icon('user-secret')
           - if header_link?(:sign_in)
-            %li
+            %li.nav-item
               %div
                 = link_to "Sign in / Register", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in'
 
-      %button.navbar-toggle.hidden-sm.hidden-md.hidden-lg{ type: 'button' }
+      %button.navbar-toggler.d-block.d-sm-none{ type: 'button' }
         %span.sr-only Toggle navigation
         = sprite_icon('more', size: 12, css_class: 'more-icon js-navbar-toggle-right')
         = sprite_icon('close', size: 12, css_class: 'close-icon js-navbar-toggle-left')
diff --git a/app/views/layouts/header/_empty.html.haml b/app/views/layouts/header/_empty.html.haml
index 2ed4edb1136..2dfc787b7a8 100644
--- a/app/views/layouts/header/_empty.html.haml
+++ b/app/views/layouts/header/_empty.html.haml
@@ -1,4 +1,4 @@
-%header.navbar.navbar-fixed-top.navbar-empty
+%header.navbar.fixed-top.navbar-empty
   .container
-    .center-logo
+    .mx-auto
       = brand_header_logo
diff --git a/app/views/layouts/header/_new_dropdown.haml b/app/views/layouts/header/_new_dropdown.haml
index eb32f393310..d35df706036 100644
--- a/app/views/layouts/header/_new_dropdown.haml
+++ b/app/views/layouts/header/_new_dropdown.haml
@@ -1,8 +1,8 @@
 %li.header-new.dropdown
-  = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip qa-new-menu-toggle", title: "New...", ref: 'tooltip', aria: { label: "New..." }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body' } do
+  = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip qa-new-menu-toggle", title: "New...", ref: 'tooltip', aria: { label: "New..." }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body', display: 'static' } do
     = sprite_icon('plus-square', size: 16)
     = sprite_icon('angle-down', css_class: 'caret-down')
-  .dropdown-menu-nav.dropdown-menu-align-right
+  .dropdown-menu.dropdown-menu-right
     %ul
       - if @group&.persisted?
         - create_group_project = can?(current_user, :create_projects, @group)
@@ -19,8 +19,8 @@
           %li.dropdown-bold-header GitLab
 
       - if @project&.persisted?
-        - create_project_issue = can?(current_user, :create_issue, @project)
-        - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
+        - create_project_issue = show_new_issue_link?(@project)
+        - merge_project = merge_request_source_project_for_project(@project)
         - create_project_snippet = can?(current_user, :create_project_snippet, @project)
         - if create_project_issue || merge_project || create_project_snippet
           %li.dropdown-bold-header This project
diff --git a/app/views/layouts/header/_read_only_banner.html.haml b/app/views/layouts/header/_read_only_banner.html.haml
new file mode 100644
index 00000000000..f3d563c362f
--- /dev/null
+++ b/app/views/layouts/header/_read_only_banner.html.haml
@@ -0,0 +1,7 @@
+- message = read_only_message
+- if message
+  .flash-container.flash-container-page
+    .flash-notice
+      %div{ class: (container_class) }
+        %span
+          = message
diff --git a/app/views/layouts/mailer.text.erb b/app/views/layouts/mailer.text.erb
index 198f30a1dc4..8e20c4a4b2a 100644
--- a/app/views/layouts/mailer.text.erb
+++ b/app/views/layouts/mailer.text.erb
@@ -1,4 +1,4 @@
 <%= yield -%>
 
----
+-- <%# signature marker %>
 You're receiving this email because of your account on <%= Gitlab.config.gitlab.host %>.
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index f773bd0832d..7647e25e804 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -8,34 +8,34 @@
         = render "layouts/nav/projects_dropdown/show"
 
   - if dashboard_nav_link?(:groups)
-    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "hidden-xs" }) do
+    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "d-none d-sm-block" }) do
       = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups qa-groups-link', title: 'Groups' do
         Groups
 
   - if dashboard_nav_link?(:activity)
-    = nav_link(path: 'dashboard#activity', html_options: { class: "visible-lg" }) do
+    = nav_link(path: 'dashboard#activity', html_options: { class: "d-none d-lg-block d-xl-block" }) do
       = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
         Activity
 
   - if dashboard_nav_link?(:milestones)
-    = nav_link(controller: 'dashboard/milestones', html_options: { class: "visible-lg" }) do
+    = nav_link(controller: 'dashboard/milestones', html_options: { class: "d-none d-lg-block d-xl-block" }) do
       = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones', title: 'Milestones' do
         Milestones
 
   - if dashboard_nav_link?(:snippets)
-    = nav_link(controller: 'dashboard/snippets', html_options: { class: "visible-lg" }) do
+    = nav_link(controller: 'dashboard/snippets', html_options: { class: "d-none d-lg-block d-xl-block" }) do
       = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: 'Snippets' do
         Snippets
 
   - if any_dashboard_nav_link?([:groups, :milestones, :activity, :snippets])
-    %li.header-more.dropdown.hidden-lg
+    %li.header-more.dropdown.d-lg-none.d-xl-none
       %a{ href: "#", data: { toggle: "dropdown" } }
         More
         = sprite_icon('angle-down', css_class: 'caret-down')
       .dropdown-menu
         %ul
           - if dashboard_nav_link?(:groups)
-            = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "visible-xs" }) do
+            = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "d-block d-sm-none" }) do
               = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups', title: 'Groups' do
                 Groups
 
@@ -61,13 +61,13 @@
         Projects
 
   - if current_controller?('ide')
-    %li.line-separator.hidden-xs
+    %li.line-separator.d-none.d-sm-block
       = nav_link(controller: 'ide') do
         = link_to '#', class: 'dashboard-shortcuts-web-ide', title: 'Web IDE' do
           Web IDE
 
   - if current_user.admin? || Gitlab::Sherlock.enabled?
-    %li.line-separator.hidden-xs
+    %li.line-separator.d-none.d-sm-block
   - if current_user.admin?
     = nav_link(controller: 'admin/dashboard') do
       = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: 'Admin area', aria: { label: "Admin area" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
diff --git a/app/views/layouts/nav/sidebar/_admin.html.haml b/app/views/layouts/nav/sidebar/_admin.html.haml
index dd086f70641..62402c32e08 100644
--- a/app/views/layouts/nav/sidebar/_admin.html.haml
+++ b/app/views/layouts/nav/sidebar/_admin.html.haml
@@ -127,13 +127,13 @@
             = sprite_icon('slight-frown')
           %span.nav-item-name
             Abuse Reports
-          %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
+          %span.badge.badge-pill.count= number_with_delimiter(AbuseReport.count(:all))
         %ul.sidebar-sub-level-items.is-fly-out-only
           = nav_link(controller: :abuse_reports, html_options: { class: "fly-out-top-item" } ) do
             = link_to admin_abuse_reports_path do
               %strong.fly-out-top-item-name
                 #{ _('Abuse Reports') }
-              %span.badge.count.merge_counter.js-merge-counter.fly-out-badge= number_with_delimiter(AbuseReport.count(:all))
+              %span.badge.badge-pill.count.merge_counter.js-merge-counter.fly-out-badge= number_with_delimiter(AbuseReport.count(:all))
 
       - if akismet_enabled?
         = nav_link(controller: :spam_logs) do
diff --git a/app/views/layouts/nav/sidebar/_group.html.haml b/app/views/layouts/nav/sidebar/_group.html.haml
index 5ea19c9882d..39a033337ff 100644
--- a/app/views/layouts/nav/sidebar/_group.html.haml
+++ b/app/views/layouts/nav/sidebar/_group.html.haml
@@ -43,14 +43,14 @@
               = sprite_icon('issues')
             %span.nav-item-name
               Issues
-            %span.badge.count= number_with_delimiter(issues_count)
+            %span.badge.badge-pill.count= number_with_delimiter(issues_count)
 
           %ul.sidebar-sub-level-items
             = nav_link(path: ['groups#issues', 'labels#index', 'milestones#index'], html_options: { class: "fly-out-top-item" } ) do
               = link_to issues_group_path(@group) do
                 %strong.fly-out-top-item-name
                   #{ _('Issues') }
-                %span.badge.count.issue_counter.fly-out-badge= number_with_delimiter(issues_count)
+                %span.badge.badge-pill.count.issue_counter.fly-out-badge= number_with_delimiter(issues_count)
 
             %li.divider.fly-out-top-item
             = nav_link(path: 'groups#issues', html_options: { class: 'home' }) do
@@ -83,13 +83,13 @@
               = sprite_icon('git-merge')
             %span.nav-item-name
               Merge Requests
-            %span.badge.count= number_with_delimiter(merge_requests_count)
+            %span.badge.badge-pill.count= number_with_delimiter(merge_requests_count)
           %ul.sidebar-sub-level-items.is-fly-out-only
             = nav_link(path: 'groups#merge_requests', html_options: { class: "fly-out-top-item" } ) do
               = link_to merge_requests_group_path(@group) do
                 %strong.fly-out-top-item-name
                   #{ _('Merge Requests') }
-                %span.badge.count.merge_counter.js-merge-counter.fly-out-badge= number_with_delimiter(merge_requests_count)
+                %span.badge.badge-pill.count.merge_counter.js-merge-counter.fly-out-badge= number_with_delimiter(merge_requests_count)
 
       - if group_sidebar_link?(:group_members)
         = nav_link(path: 'group_members#index') do
@@ -112,7 +112,7 @@
             %span.nav-item-name
               Settings
           %ul.sidebar-sub-level-items
-            = nav_link(path: %w[groups#projects groups#edit ci_cd#show], html_options: { class: "fly-out-top-item" } ) do
+            = nav_link(path: %w[groups#projects groups#edit badges#index ci_cd#show], html_options: { class: "fly-out-top-item" } ) do
               = link_to edit_group_path(@group) do
                 %strong.fly-out-top-item-name
                   #{ _('Settings') }
@@ -122,6 +122,12 @@
                 %span
                   General
 
+            = nav_link(controller: :badges) do
+              = link_to group_settings_badges_path(@group), title: _('Project Badges') do
+                %span
+                  = _('Project Badges')
+
+
             = nav_link(path: 'groups#projects') do
               = link_to projects_group_path(@group), title: 'Projects' do
                 %span
diff --git a/app/views/layouts/nav/sidebar/_profile.html.haml b/app/views/layouts/nav/sidebar/_profile.html.haml
index c878fcf2808..6cbd163dd41 100644
--- a/app/views/layouts/nav/sidebar/_profile.html.haml
+++ b/app/views/layouts/nav/sidebar/_profile.html.haml
@@ -129,6 +129,17 @@
             = link_to profile_preferences_path do
               %strong.fly-out-top-item-name
                 #{ _('Preferences') }
+      = nav_link(controller: :active_sessions) do
+        = link_to profile_active_sessions_path do
+          .nav-icon-container
+            = sprite_icon('monitor-lines')
+          %span.nav-item-name
+            Active Sessions
+        %ul.sidebar-sub-level-items.is-fly-out-only
+          = nav_link(controller: :active_sessions, html_options: { class: "fly-out-top-item" } ) do
+            = link_to profile_active_sessions_path do
+              %strong.fly-out-top-item-name
+                #{ _('Active Sessions') }
       = nav_link(path: 'profiles#audit_log') do
         = link_to audit_log_profile_path do
           .nav-icon-container
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index 059571f795f..33416bf76d7 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -8,18 +8,18 @@
         .sidebar-context-title
           = @project.name
     %ul.sidebar-top-level-items
-      = nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do
+      = nav_link(path: sidebar_projects_paths, html_options: { class: 'home' }) do
         = link_to project_path(@project), class: 'shortcuts-project' do
           .nav-icon-container
             = sprite_icon('project')
           %span.nav-item-name
-            Overview
+            = _('Project')
 
         %ul.sidebar-sub-level-items
           = nav_link(path: 'projects#show', html_options: { class: "fly-out-top-item" } ) do
             = link_to project_path(@project) do
               %strong.fly-out-top-item-name
-                #{ _('Overview') }
+                = _('Project')
           %li.divider.fly-out-top-item
           = nav_link(path: 'projects#show') do
             = link_to project_path(@project), title: _('Project details'), class: 'shortcuts-project' do
@@ -29,64 +29,60 @@
             = link_to activity_project_path(@project), title: _('Activity'), class: 'shortcuts-project-activity' do
               %span= _('Activity')
 
+          = render_if_exists 'projects/sidebar/security_dashboard'
+
           - if can?(current_user, :read_cycle_analytics, @project)
             = nav_link(path: 'cycle_analytics#show') do
               = link_to project_cycle_analytics_path(@project), title: _('Cycle Analytics'), class: 'shortcuts-project-cycle-analytics' do
                 %span= _('Cycle Analytics')
 
       - if project_nav_tab? :files
-        = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file commit commits compare projects/repositories tags branches releases graphs network)) do
+        = nav_link(controller: sidebar_repository_paths) do
           = link_to project_tree_path(@project), class: 'shortcuts-tree' do
             .nav-icon-container
               = sprite_icon('doc_text')
             %span.nav-item-name
-              Repository
+              = _('Repository')
 
           %ul.sidebar-sub-level-items
-            = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file commit commits compare projects/repositories tags branches releases graphs network), html_options: { class: "fly-out-top-item" } ) do
+            = nav_link(controller: sidebar_repository_paths, html_options: { class: "fly-out-top-item" } ) do
               = link_to project_tree_path(@project) do
                 %strong.fly-out-top-item-name
-                  #{ _('Repository') }
+                  = _('Repository')
             %li.divider.fly-out-top-item
             = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
               = link_to project_tree_path(@project) do
-                #{ _('Files') }
+                = _('Files')
 
             = nav_link(controller: [:commit, :commits]) do
               = link_to project_commits_path(@project, current_ref) do
-                #{ _('Commits') }
+                = _('Commits')
 
             = nav_link(html_options: {class: branches_tab_class}) do
               = link_to project_branches_path(@project) do
-                #{ _('Branches') }
+                = _('Branches')
 
             = nav_link(controller: [:tags, :releases]) do
               = link_to project_tags_path(@project) do
-                #{ _('Tags') }
+                = _('Tags')
 
             = nav_link(path: 'graphs#show') do
               = link_to project_graph_path(@project, current_ref) do
-                #{ _('Contributors') }
+                = _('Contributors')
 
             = nav_link(controller: %w(network)) do
               = link_to project_network_path(@project, current_ref) do
-                #{ s_('ProjectNetworkGraph|Graph') }
+                = _('Graph')
 
             = nav_link(controller: :compare) do
               = link_to project_compare_index_path(@project, from: @repository.root_ref, to: current_ref) do
-                #{ _('Compare') }
+                = _('Compare')
 
             = nav_link(path: 'graphs#charts') do
               = link_to charts_project_graph_path(@project, current_ref) do
-                #{ _('Charts') }
+                = _('Charts')
 
-      - if project_nav_tab? :container_registry
-        = nav_link(controller: %w[projects/registry/repositories]) do
-          = link_to project_container_registry_index_path(@project), class: 'shortcuts-container-registry' do
-            .nav-icon-container
-              = sprite_icon('disk')
-            %span.nav-item-name
-              Registry
+            = render_if_exists 'projects/sidebar/repository_locked_files'
 
       - if project_nav_tab? :issues
         = nav_link(controller: @project.issues_enabled? ? [:issues, :labels, :milestones, :boards] : :issues) do
@@ -94,24 +90,24 @@
             .nav-icon-container
               = sprite_icon('issues')
             %span.nav-item-name
-              Issues
+              = _('Issues')
             - if @project.issues_enabled?
-              %span.badge.count.issue_counter
-                = number_with_delimiter(@project.open_issues_count)
+              %span.badge.badge-pill.count.issue_counter
+                = number_with_delimiter(@project.open_issues_count(current_user))
 
           %ul.sidebar-sub-level-items
-            = nav_link(controller: :issues, html_options: { class: "fly-out-top-item" } ) do
+            = nav_link(controller: :issues, action: :index, html_options: { class: "fly-out-top-item" } ) do
               = link_to project_issues_path(@project) do
                 %strong.fly-out-top-item-name
-                  #{ _('Issues') }
+                  = _('Issues')
                 - if @project.issues_enabled?
-                  %span.badge.count.issue_counter.fly-out-badge
-                    = number_with_delimiter(@project.open_issues_count)
+                  %span.badge.badge-pill.count.issue_counter.fly-out-badge
+                    = number_with_delimiter(@project.open_issues_count(current_user))
             %li.divider.fly-out-top-item
             = nav_link(controller: :issues, action: :index) do
               = link_to project_issues_path(@project), title: 'Issues' do
                 %span
-                  List
+                  = _('List')
 
             = nav_link(controller: :boards) do
               = link_to project_boards_path(@project), title: boards_link_text do
@@ -121,12 +117,14 @@
             = nav_link(controller: :labels) do
               = link_to project_labels_path(@project), title: 'Labels' do
                 %span
-                  Labels
+                  = _('Labels')
+
+            = render_if_exists 'projects/sidebar/issues_service_desk'
 
             = nav_link(controller: :milestones) do
               = link_to project_milestones_path(@project), title: 'Milestones' do
                 %span
-                  Milestones
+                  = _('Milestones')
       - if project_nav_tab? :external_issue_tracker
         = nav_link do
           - issue_tracker = @project.external_issue_tracker
@@ -147,59 +145,80 @@
             .nav-icon-container
               = sprite_icon('git-merge')
             %span.nav-item-name
-              Merge Requests
-            %span.badge.count.merge_counter.js-merge-counter
+              = _('Merge Requests')
+            %span.badge.badge-pill.count.merge_counter.js-merge-counter
               = number_with_delimiter(@project.open_merge_requests_count)
           %ul.sidebar-sub-level-items.is-fly-out-only
             = nav_link(controller: :merge_requests, html_options: { class: "fly-out-top-item" } ) do
               = link_to project_merge_requests_path(@project) do
                 %strong.fly-out-top-item-name
-                  #{ _('Merge Requests') }
-                %span.badge.count.merge_counter.js-merge-counter.fly-out-badge
+                  = _('Merge Requests')
+                %span.badge.badge-pill.count.merge_counter.js-merge-counter.fly-out-badge
                   = number_with_delimiter(@project.open_merge_requests_count)
 
       - if project_nav_tab? :pipelines
-        = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :environments, :artifacts, :clusters, :user, :gcp]) do
+        = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :artifacts]) do
           = link_to project_pipelines_path(@project), class: 'shortcuts-pipelines' do
             .nav-icon-container
-              = sprite_icon('pipeline')
+              = sprite_icon('rocket')
             %span.nav-item-name
-              CI / CD
+              = _('CI / CD')
 
           %ul.sidebar-sub-level-items
-            = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :environments, :artifacts, :clusters, :user, :gcp], html_options: { class: "fly-out-top-item" } ) do
+            = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :artifacts], html_options: { class: "fly-out-top-item" }  ) do
               = link_to project_pipelines_path(@project) do
                 %strong.fly-out-top-item-name
-                  #{ _('CI / CD') }
+                  =  _('CI / CD')
             %li.divider.fly-out-top-item
             - if project_nav_tab? :pipelines
               = nav_link(path: ['pipelines#index', 'pipelines#show']) do
                 = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
                   %span
-                    Pipelines
+                    = _('Pipelines')
 
             - if project_nav_tab? :builds
               = nav_link(controller: [:jobs, :artifacts]) do
                 = link_to project_jobs_path(@project), title: 'Jobs', class: 'shortcuts-builds' do
                   %span
-                    Jobs
+                    = _('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
+                    = _('Schedules')
+
+            - if @project.feature_available?(:builds, current_user) && !@project.empty_repo?
+              = nav_link(path: 'pipelines#charts') do
+                = link_to charts_project_pipelines_path(@project), title: 'Charts', class: 'shortcuts-pipelines-charts' do
+                  %span
+                    = _('Charts')
+
+      - if project_nav_tab? :operations
+        = nav_link(controller: [:environments, :clusters, :user, :gcp]) do
+          = link_to project_environments_path(@project), class: 'shortcuts-operations' do
+            .nav-icon-container
+              = sprite_icon('cloud-gear')
+            %span.nav-item-name
+              = _('Operations')
+
+          %ul.sidebar-sub-level-items
+            = nav_link(controller: [:environments, :clusters, :user, :gcp], html_options: { class: "fly-out-top-item" } ) do
+              = link_to project_environments_path(@project) do
+                %strong.fly-out-top-item-name
+                  =  _('Operations')
+            %li.divider.fly-out-top-item
 
             - if project_nav_tab? :environments
               = nav_link(controller: :environments) do
                 = link_to project_environments_path(@project), title: 'Environments', class: 'shortcuts-environments' do
                   %span
-                    Environments
+                    = _('Environments')
 
             - if project_nav_tab? :clusters
               - show_cluster_hint = show_gke_cluster_integration_callout?(@project)
               = nav_link(controller: [:clusters, :user, :gcp]) do
-                = link_to project_clusters_path(@project), title: _('Kubernetes'), class: 'shortcuts-cluster' do
+                = link_to project_clusters_path(@project), title: _('Kubernetes'), class: 'shortcuts-kubernetes' do
                   %span
                     = _('Kubernetes')
                   - if show_cluster_hint
@@ -221,15 +240,22 @@
                         = link_to 'Auto DevOps', help_page_path('topics/autodevops/index.md')
                         %span= _('uses Kubernetes clusters to deploy your code!')
                       %hr
-                      %button.btn.btn-create.btn-xs.dismiss-feature-highlight{ type: 'button' }
+                      %button.btn.btn-create.btn-sm.dismiss-feature-highlight{ type: 'button' }
                         %span= _("Got it!")
                         = sprite_icon('thumb-up')
 
-            - if @project.feature_available?(:builds, current_user) && !@project.empty_repo?
-              = nav_link(path: 'pipelines#charts') do
-                = link_to charts_project_pipelines_path(@project), title: 'Charts', class: 'shortcuts-pipelines-charts' do
-                  %span
-                    Charts
+      - if project_nav_tab? :container_registry
+        = nav_link(controller: %w[projects/registry/repositories]) do
+          = link_to project_container_registry_index_path(@project), class: 'shortcuts-container-registry' do
+            .nav-icon-container
+              = sprite_icon('disk')
+            %span.nav-item-name
+              = _('Registry')
+          %ul.sidebar-sub-level-items.is-fly-out-only
+            = nav_link(controller: %w[projects/registry/repositories], html_options: { class: "fly-out-top-item" } ) do
+              = link_to project_container_registry_index_path(@project) do
+                %strong.fly-out-top-item-name
+                  = _('Registry')
 
       - if project_nav_tab? :wiki
         = nav_link(controller: :wikis) do
@@ -237,12 +263,12 @@
             .nav-icon-container
               = sprite_icon('book')
             %span.nav-item-name
-              Wiki
+              = _('Wiki')
           %ul.sidebar-sub-level-items.is-fly-out-only
             = nav_link(controller: :wikis, html_options: { class: "fly-out-top-item" } ) do
               = link_to get_project_wiki_path(@project) do
                 %strong.fly-out-top-item-name
-                  #{ _('Wiki') }
+                  = _('Wiki')
 
       - if project_nav_tab? :snippets
         = nav_link(controller: :snippets) do
@@ -250,56 +276,63 @@
             .nav-icon-container
               = sprite_icon('snippet')
             %span.nav-item-name
-              Snippets
+              = _('Snippets')
           %ul.sidebar-sub-level-items.is-fly-out-only
             = nav_link(controller: :snippets, html_options: { class: "fly-out-top-item" } ) do
               = link_to project_snippets_path(@project) do
                 %strong.fly-out-top-item-name
-                  #{ _('Snippets') }
+                  = _('Snippets')
 
       - if project_nav_tab? :settings
-        = nav_link(path: %w[projects#edit project_members#index integrations#show services#edit repository#show ci_cd#show pages#show]) do
+        = nav_link(path: sidebar_settings_paths) do
           = link_to edit_project_path(@project), class: 'shortcuts-tree' do
             .nav-icon-container
               = sprite_icon('settings')
             %span.nav-item-name.qa-settings-item
-              Settings
+              = _('Settings')
 
           %ul.sidebar-sub-level-items
             - can_edit = can?(current_user, :admin_project, @project)
             - if can_edit
-              = nav_link(path: %w[projects#edit project_members#index integrations#show services#edit repository#show ci_cd#show pages#show], html_options: { class: "fly-out-top-item" } ) do
+              = nav_link(path: sidebar_settings_paths, html_options: { class: "fly-out-top-item" } ) do
                 = link_to edit_project_path(@project) do
                   %strong.fly-out-top-item-name
-                    #{ _('Settings') }
+                    = _('Settings')
               %li.divider.fly-out-top-item
               = nav_link(path: %w[projects#edit]) do
                 = link_to edit_project_path(@project), title: 'General' do
                   %span
-                    General
+                    = _('General')
             = nav_link(controller: :project_members) do
               = link_to project_project_members_path(@project), title: 'Members' do
                 %span
-                  Members
+                  = _('Members')
+            - if can_edit
+              = nav_link(controller: :badges) do
+                = link_to project_settings_badges_path(@project), title: _('Badges') do
+                  %span
+                    = _('Badges')
             - if can_edit
               = nav_link(controller: [:integrations, :services, :hooks, :hook_logs]) do
                 = link_to project_settings_integrations_path(@project), title: 'Integrations' do
                   %span
-                    Integrations
+                    = _('Integrations')
               = nav_link(controller: :repository) do
                 = link_to project_settings_repository_path(@project), title: 'Repository' do
                   %span
-                    Repository
+                    = _('Repository')
               - if @project.feature_available?(:builds, current_user)
                 = nav_link(controller: :ci_cd) do
                   = link_to project_settings_ci_cd_path(@project), title: 'CI / CD' do
                     %span
-                      CI / CD
+                      = _('CI / CD')
               - if @project.pages_available?
                 = nav_link(controller: :pages) do
                   = link_to project_pages_path(@project), title: 'Pages' do
                     %span
-                      Pages
+                      = _('Pages')
+
+              = render_if_exists 'projects/sidebar/settings_audit_events'
 
       - else
         = nav_link(controller: :project_members) do
@@ -307,12 +340,12 @@
             .nav-icon-container
               = sprite_icon('users')
             %span.nav-item-name
-              Members
+              = _('Members')
           %ul.sidebar-sub-level-items.is-fly-out-only
             = nav_link(path: %w[members#show], html_options: { class: "fly-out-top-item" } ) do
               = link_to project_project_members_path(@project) do
                 %strong.fly-out-top-item-name
-                  #{ _('Members') }
+                  = _('Members')
 
       = render 'shared/sidebar_toggle_button'
 
diff --git a/app/views/layouts/notify.text.erb b/app/views/layouts/notify.text.erb
index de48f548a1b..9dc490efa9a 100644
--- a/app/views/layouts/notify.text.erb
+++ b/app/views/layouts/notify.text.erb
@@ -1,6 +1,6 @@
 <%= yield -%>
 
----
+-- <%# signature marker %>
 <%  if @target_url -%>
 <%    if @reply_by_email -%>
 <%=     "Reply to this email directly or view it on GitLab: #{@target_url}" -%>
diff --git a/app/views/layouts/terms.html.haml b/app/views/layouts/terms.html.haml
new file mode 100644
index 00000000000..977eb350365
--- /dev/null
+++ b/app/views/layouts/terms.html.haml
@@ -0,0 +1,34 @@
+!!! 5
+- @hide_breadcrumbs = true
+%html{ lang: I18n.locale, class: page_class }
+  = render "layouts/head"
+
+  %body{ data: { page: body_data_page } }
+    .layout-page.terms{ class: page_class }
+      .content-wrapper.prepend-top-0
+        .mobile-overlay
+        .alert-wrapper
+          = render "layouts/broadcast"
+          = render 'layouts/header/read_only_banner'
+          = render "layouts/flash", extra_flash_class: 'limit-container-width'
+
+        %div{ class: "#{container_class} limit-container-width" }
+          .content{ id: "content-body" }
+            .card
+              .card-header
+                .card-title
+                  = brand_header_logo
+                  - logo_text = brand_header_logo_type
+                  - if logo_text.present?
+                    %span.logo-text.prepend-left-8
+                      = logo_text
+                - if header_link?(:user_dropdown)
+                  .navbar-collapse
+                    %ul.nav.navbar-nav
+                      %li.header-user.dropdown
+                        = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
+                          = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar"
+                          = sprite_icon('angle-down', css_class: 'caret-down')
+                        .dropdown-menu.dropdown-menu-right
+                          = render 'layouts/header/current_user_dropdown'
+              = yield
diff --git a/app/views/notify/issue_due_email.html.haml b/app/views/notify/issue_due_email.html.haml
new file mode 100644
index 00000000000..e81144b8fcb
--- /dev/null
+++ b/app/views/notify/issue_due_email.html.haml
@@ -0,0 +1,12 @@
+%p.details
+  #{link_to @issue.author_name, user_url(@issue.author)}'s issue is due soon.
+
+- if @issue.assignees.any?
+  %p
+    Assignee: #{@issue.assignee_list}
+%p
+  This issue is due on: #{@issue.due_date.to_s(:medium)}
+
+- if @issue.description
+  %div
+  = markdown(@issue.description, pipeline: :email, author: @issue.author)
diff --git a/app/views/notify/issue_due_email.text.erb b/app/views/notify/issue_due_email.text.erb
new file mode 100644
index 00000000000..3c7a57a8a2e
--- /dev/null
+++ b/app/views/notify/issue_due_email.text.erb
@@ -0,0 +1,7 @@
+The following issue is due on <%= @issue.due_date %>:
+
+Issue <%= @issue.iid %>: <%= url_for(project_issue_url(@issue.project, @issue)) %>
+Author:    <%= @issue.author_name %>
+Assignee:  <%= @issue.assignee_list %>
+
+<%= @issue.description %>
diff --git a/app/views/notify/member_invited_email.html.haml b/app/views/notify/member_invited_email.html.haml
index b8b75da3f2f..6730172242b 100644
--- a/app/views/notify/member_invited_email.html.haml
+++ b/app/views/notify/member_invited_email.html.haml
@@ -4,7 +4,7 @@
     by
     = link_to member.created_by.name, user_url(member.created_by)
   to join the
-  = link_to member_source.human_name, member_source.web_url
+  = link_to member_source.human_name, member_source.public? ? member_source.web_url : invite_url(@token)
   #{member_source.model_name.singular} as #{member.human_access}.
 
 %p
diff --git a/app/views/notify/merge_request_unmergeable_email.html.haml b/app/views/notify/merge_request_unmergeable_email.html.haml
new file mode 100644
index 00000000000..7ec0c1ef390
--- /dev/null
+++ b/app/views/notify/merge_request_unmergeable_email.html.haml
@@ -0,0 +1,2 @@
+%p
+  Merge Request #{link_to @merge_request.to_reference, project_merge_request_url(@merge_request.target_project, @merge_request)} can no longer be merged due to conflict.
diff --git a/app/views/notify/merge_request_unmergeable_email.text.haml b/app/views/notify/merge_request_unmergeable_email.text.haml
new file mode 100644
index 00000000000..dcdd6db69d6
--- /dev/null
+++ b/app/views/notify/merge_request_unmergeable_email.text.haml
@@ -0,0 +1,8 @@
+Merge Request #{@merge_request.to_reference} can no longer be merged due to conflict.
+
+Merge Request url: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
+
+= merge_path_description(@merge_request, 'to')
+
+Author: #{@merge_request.author_name}
+Assignee: #{@merge_request.assignee_name}
diff --git a/app/views/notify/new_merge_request_email.html.haml b/app/views/notify/new_merge_request_email.html.haml
index 0a9adc6f243..dd6a84e503d 100644
--- a/app/views/notify/new_merge_request_email.html.haml
+++ b/app/views/notify/new_merge_request_email.html.haml
@@ -9,6 +9,8 @@
   %p
     Assignee: #{@merge_request.assignee_name}
 
+= render_if_exists 'notify/merge_request_approvers', merge_request: @merge_request
+
 - if @merge_request.description
   %div
     = markdown(@merge_request.description, pipeline: :email, author: @merge_request.author)
diff --git a/app/views/notify/new_merge_request_email.text.erb b/app/views/notify/new_merge_request_email.text.erb
index 7d98400e6fe..d5b8f8d764f 100644
--- a/app/views/notify/new_merge_request_email.text.erb
+++ b/app/views/notify/new_merge_request_email.text.erb
@@ -5,6 +5,6 @@ New Merge Request <%= @merge_request.to_reference %>
 <%= merge_path_description(@merge_request, 'to') %>
 Author:    <%= @merge_request.author_name %>
 Assignee:  <%= @merge_request.assignee_name %>
+<%= render_if_exists 'notify/merge_request_approvers', merge_request: @merge_request %>
 
 <%= @merge_request.description %>
-
diff --git a/app/views/notify/pipeline_failed_email.html.haml b/app/views/notify/pipeline_failed_email.html.haml
index 38dab104eb5..baafaa6e3a0 100644
--- a/app/views/notify/pipeline_failed_email.html.haml
+++ b/app/views/notify/pipeline_failed_email.html.haml
@@ -12,7 +12,7 @@
     &nbsp;
 %tr.section
   %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
-    %table.info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" }
+    %table.table-info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" }
       %tbody
         %tr
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;" } Project
@@ -114,7 +114,7 @@
     = failed.size
     failed
     #{'build'.pluralize(failed.size)}.
-%tr.warning
+%tr.table-warning
   %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;border:1px solid #ededed;border-bottom:0;border-radius:3px 3px 0 0;overflow:hidden;background-color:#fdf4f6;color:#d22852;font-size:14px;line-height:1.4;text-align:center;padding:8px 15px;" }
     Logs may contain sensitive data. Please consider before forwarding this email.
 %tr.section
diff --git a/app/views/notify/pipeline_success_email.html.haml b/app/views/notify/pipeline_success_email.html.haml
index 7b06e8afa0b..4fe3c4c8269 100644
--- a/app/views/notify/pipeline_success_email.html.haml
+++ b/app/views/notify/pipeline_success_email.html.haml
@@ -1,4 +1,4 @@
-%tr.success
+%tr.table-success
   %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;border-radius:3px;font-size:14px;line-height:1.3;text-align:center;overflow:hidden;color:#ffffff;background-color:#31af64;" }
     %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;" }
       %tbody
@@ -12,7 +12,7 @@
     &nbsp;
 %tr.section
   %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
-    %table.info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" }
+    %table.table-info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" }
       %tbody
         %tr
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;" } Project
diff --git a/app/views/notify/push_to_merge_request_email.html.haml b/app/views/notify/push_to_merge_request_email.html.haml
new file mode 100644
index 00000000000..67744ec1cee
--- /dev/null
+++ b/app/views/notify/push_to_merge_request_email.html.haml
@@ -0,0 +1,26 @@
+%h3
+  = @updated_by_user.name
+  pushed new commits to merge request
+  = link_to(@merge_request.to_reference, project_merge_request_url(@merge_request.target_project, @merge_request))
+
+- if @existing_commits.any?
+  - count = @existing_commits.size
+  %ul
+    %li
+      - if count == 1
+        - commit_id = @existing_commits.first[:short_id]
+        = link_to(commit_id, project_commit_url(@merge_request.target_project, commit_id))
+      - else
+        = link_to(project_compare_url(@merge_request.target_project, from: @existing_commits.first[:short_id], to: @existing_commits.last[:short_id])) do
+          #{@existing_commits.first[:short_id]}...#{@existing_commits.last[:short_id]}
+      = precede '&nbsp;- ' do
+        - commits_text = "#{count} commit".pluralize(count)
+        #{commits_text} from branch `#{@merge_request.target_branch}`
+
+- if @new_commits.any?
+  %ul
+    - @new_commits.each do |commit|
+      %li
+        = link_to(commit[:short_id], project_commit_url(@merge_request.target_project, commit[:short_id]))
+        = precede ' - ' do
+          #{commit[:title]}
diff --git a/app/views/notify/push_to_merge_request_email.text.haml b/app/views/notify/push_to_merge_request_email.text.haml
new file mode 100644
index 00000000000..95759d127e2
--- /dev/null
+++ b/app/views/notify/push_to_merge_request_email.text.haml
@@ -0,0 +1,13 @@
+#{@updated_by_user.name} pushed new commits to merge request #{@merge_request.to_reference}
+\
+#{url_for(project_merge_request_url(@merge_request.target_project, @merge_request))}
+\
+- if @existing_commits.any?
+  - count = @existing_commits.size
+  - commits_id = count == 1 ? @existing_commits.first[:short_id] : "#{@existing_commits.first[:short_id]}...#{@existing_commits.last[:short_id]}"
+  - commits_text = "#{count} commit".pluralize(count)
+
+  * #{commits_id} - #{commits_text} from branch `#{@merge_request.target_branch}`
+\
+- @new_commits.each do |commit|
+  * #{commit[:short_id]} - #{raw commit[:title]}
diff --git a/app/views/peek/_bar.html.haml b/app/views/peek/_bar.html.haml
index b4d86e1601c..89d3b931f88 100644
--- a/app/views/peek/_bar.html.haml
+++ b/app/views/peek/_bar.html.haml
@@ -2,11 +2,6 @@
 
 #js-peek{ data: { env: Peek.env,
          request_id: Peek.request_id,
-         peek_url: peek_routes.results_url,
-         profile_url: url_for(params.merge(lineprofiler: 'true')) },
+         peek_url: "#{peek_routes_path}/results",
+         profile_url: url_for(safe_params.merge(lineprofiler: 'true')) },
          class: Peek.env }
-
-#peek-view-performance-bar.hidden
-  = render_server_response_time
-  %span#serverstats
-  %ul.performance-bar
diff --git a/app/views/profiles/_event_table.html.haml b/app/views/profiles/_event_table.html.haml
index d0ad90ac6cc..9f525547dd9 100644
--- a/app/views/profiles/_event_table.html.haml
+++ b/app/views/profiles/_event_table.html.haml
@@ -1,7 +1,7 @@
 %h5.prepend-top-0
   History of authentications
 
-%ul.well-list
+%ul.content-list
   - events.each do |event|
     %li
       %span.description
@@ -9,6 +9,6 @@
         Signed in with
         = event.details[:with]
         authentication
-      %span.pull-right= time_ago_with_tooltip(event.created_at)
+      %span.float-right= time_ago_with_tooltip(event.created_at)
 
 = paginate events, theme: "gitlab"
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 02263095599..9c95b6281ba 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -57,20 +57,8 @@
         = succeed '.' do
           = link_to 'Learn more', help_page_path('user/profile/index', anchor: 'changing-your-username'), target: '_blank'
     .col-lg-8
-      = form_for @user, url: update_username_profile_path, method: :put, html: {class: "update-username"} do |f|
-        .form-group
-          = f.label :username, "Path", class: "label-light"
-          .input-group
-            .input-group-addon
-              = root_url
-            = f.text_field :username, required: true, class: 'form-control'
-        .help-block
-          Current path:
-          #{root_url}#{current_user.username}
-        .prepend-top-default
-          = f.button class: "btn btn-warning", type: "submit" do
-            = icon "spinner spin", class: "hidden loading-username"
-            Update username
+      - data = { initial_username: current_user.username, root_url: root_url, action_url: update_username_profile_path(format: :json) }
+      #update-username{ data: data }
   %hr
 
 .row.prepend-top-default
diff --git a/app/views/profiles/active_sessions/_active_session.html.haml b/app/views/profiles/active_sessions/_active_session.html.haml
new file mode 100644
index 00000000000..23ef31a0c85
--- /dev/null
+++ b/app/views/profiles/active_sessions/_active_session.html.haml
@@ -0,0 +1,31 @@
+- is_current_session = active_session.current?(session)
+
+%li.list-group-item
+  .float-left.append-right-10{ data: { toggle: 'tooltip' }, title: active_session.human_device_type }
+    = active_session_device_type_icon(active_session)
+
+  .description.float-left
+    %div
+      %strong= active_session.ip_address
+    - if is_current_session
+      %div This is your current session
+    - else
+      %div
+        Last accessed on
+        = l(active_session.updated_at, format: :short)
+
+    %div
+      %strong= active_session.browser
+      on
+      %strong= active_session.os
+
+    %div
+      %strong Signed in
+      on
+      = l(active_session.created_at, format: :short)
+
+  - unless is_current_session
+    .float-right
+      = link_to profile_active_session_path(active_session.session_id), data: { confirm: 'Are you sure? The device will be signed out of GitLab.' }, method: :delete, class: "btn btn-danger prepend-left-10" do
+        %span.sr-only Revoke
+        Revoke
diff --git a/app/views/profiles/active_sessions/index.html.haml b/app/views/profiles/active_sessions/index.html.haml
new file mode 100644
index 00000000000..8688a52843d
--- /dev/null
+++ b/app/views/profiles/active_sessions/index.html.haml
@@ -0,0 +1,15 @@
+- page_title 'Active Sessions'
+- @content_class = "limit-container-width" unless fluid_layout
+
+.row.prepend-top-default
+  .col-lg-4.profile-settings-sidebar
+    %h4.prepend-top-0
+      = page_title
+    %p
+      This is a list of devices that have logged into your account. Revoke any sessions that you do not recognize.
+  .col-lg-8
+    .append-bottom-default
+
+      .card.border-0
+        %ul.list-group.list-group-flush
+          = render partial: 'profiles/active_sessions/active_session', collection: @sessions
diff --git a/app/views/profiles/chat_names/_chat_name.html.haml b/app/views/profiles/chat_names/_chat_name.html.haml
index c7094800fb2..9e82e47c1e1 100644
--- a/app/views/profiles/chat_names/_chat_name.html.haml
+++ b/app/views/profiles/chat_names/_chat_name.html.haml
@@ -24,4 +24,4 @@
       Never
 
   %td
-    = link_to 'Remove', profile_chat_name_path(chat_name), method: :delete, class: 'btn btn-danger pull-right', data: { confirm: 'Are you sure you want to revoke this nickname?' }
+    = link_to 'Remove', profile_chat_name_path(chat_name), method: :delete, class: 'btn btn-danger float-right', data: { confirm: 'Are you sure you want to revoke this nickname?' }
diff --git a/app/views/profiles/chat_names/new.html.haml b/app/views/profiles/chat_names/new.html.haml
index 5bf22aa94f1..d86941b7a29 100644
--- a/app/views/profiles/chat_names/new.html.haml
+++ b/app/views/profiles/chat_names/new.html.haml
@@ -9,7 +9,7 @@
   .actions
     = form_tag profile_chat_names_path, method: :post do
       = hidden_field_tag :token, @chat_name_token.token
-      = submit_tag "Authorize", class: "btn btn-success wide pull-left"
+      = submit_tag "Authorize", class: "btn btn-success wide float-left"
     = form_tag deny_profile_chat_names_path, method: :delete do
       = hidden_field_tag :token, @chat_name_token.token
       = submit_tag "Deny", class: "btn btn-danger prepend-left-10"
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index e3c2bd1150e..a5db9dbe7f8 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -29,23 +29,23 @@
           Your Public Email will be displayed on your public profile.
         %li
           All email addresses will be used to identify your commits.
-    %ul.well-list
+    %ul.content-list
       %li
         = render partial: 'shared/email_with_badge', locals: { email: @primary_email, verified: current_user.confirmed? }
-        %span.pull-right
-          %span.label.label-success Primary email
+        %span.float-right
+          %span.badge.badge-success Primary email
           - if @primary_email === current_user.public_email
-            %span.label.label-info Public email
+            %span.badge.badge-info Public email
           - if @primary_email === current_user.notification_email
-            %span.label.label-info Notification email
+            %span.badge.badge-info Notification email
       - @emails.each do |email|
         %li
           = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
-          %span.pull-right
+          %span.float-right
             - if email.email === current_user.public_email
-              %span.label.label-info Public email
+              %span.badge.badge-info Public email
             - if email.email === current_user.notification_email
-              %span.label.label-info Notification email
+              %span.badge.badge-info Notification email
             - unless email.confirmed?
               - confirm_title = "#{email.confirmation_sent_at ? 'Resend' : 'Send'} confirmation email"
               = link_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, class: 'btn btn-sm btn-warning prepend-left-10'
diff --git a/app/views/profiles/gpg_keys/_key.html.haml b/app/views/profiles/gpg_keys/_key.html.haml
index 5ed517c1ef6..d1fd7bc8e71 100644
--- a/app/views/profiles/gpg_keys/_key.html.haml
+++ b/app/views/profiles/gpg_keys/_key.html.haml
@@ -1,6 +1,6 @@
 %li.key-list-item
-  .pull-left.append-right-10
-    = icon 'key', class: "settings-list-icon hidden-xs"
+  .float-left.append-right-10
+    = icon 'key', class: "settings-list-icon d-none d-sm-block"
   .key-list-item-info
     - key.emails_with_verified_status.map do |email, verified|
       = render partial: 'shared/email_with_badge', locals: { email: email, verified: verified }
@@ -14,7 +14,7 @@
           - key.subkeys.each do |subkey|
             %li
               %code= subkey.fingerprint
-  .pull-right
+  .float-right
     %span.key-created-at
       created #{time_ago_with_tooltip(key.created_at)}
     = link_to profile_gpg_key_path(key), data: { confirm: 'Are you sure? Removing this GPG key does not affect already signed commits.' }, method: :delete, class: "btn btn-danger prepend-left-10" do
diff --git a/app/views/profiles/gpg_keys/_key_table.html.haml b/app/views/profiles/gpg_keys/_key_table.html.haml
index cabb92c5a24..b9b60c218fd 100644
--- a/app/views/profiles/gpg_keys/_key_table.html.haml
+++ b/app/views/profiles/gpg_keys/_key_table.html.haml
@@ -1,7 +1,7 @@
 - is_admin = local_assigns.fetch(:admin, false)
 
 - if @gpg_keys.any?
-  %ul.well-list
+  %ul.content-list
     = render partial: 'profiles/gpg_keys/key', collection: @gpg_keys, locals: { is_admin: is_admin }
 - else
   %p.settings-message.text-center
diff --git a/app/views/profiles/keys/_form.html.haml b/app/views/profiles/keys/_form.html.haml
index 6ea358d9f63..c14700794ce 100644
--- a/app/views/profiles/keys/_form.html.haml
+++ b/app/views/profiles/keys/_form.html.haml
@@ -4,10 +4,12 @@
 
     .form-group
       = f.label :key, class: 'label-light'
-      = f.text_area :key, class: "form-control", rows: 8, required: true, placeholder: "Don't paste the private part of the SSH key. Paste the public part, which is usually contained in the file '~/.ssh/id_rsa.pub' and begins with 'ssh-rsa'."
+      %p= _("Paste your public SSH key, which is usually contained in the file '~/.ssh/id_rsa.pub' and begins with 'ssh-rsa'. Don't use your private SSH key.")
+      = f.text_area :key, class: "form-control", rows: 8, required: true, placeholder: 'Typically starts with "ssh-rsa …"'
     .form-group
       = f.label :title, class: 'label-light'
-      = f.text_field :title, class: "form-control", required: true
+      = f.text_field :title, class: "form-control", required: true, placeholder: 'e.g. My MacBook key'
+      %p.form-text.text-muted= _('Name your individual key via a title')
 
     .prepend-top-default
       = f.submit 'Add key', class: "btn btn-create"
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index 103446243e5..ce20994b0f4 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -1,9 +1,9 @@
 %li.key-list-item
-  .pull-left.append-right-10
+  .float-left.append-right-10
     - if key.valid?
-      = icon 'key', class: 'settings-list-icon hidden-xs'
+      = icon 'key', class: 'settings-list-icon d-none d-sm-block'
     - else
-      = icon 'exclamation-triangle', class: 'settings-list-icon hidden-xs has-tooltip',
+      = icon 'exclamation-triangle', class: 'settings-list-icon d-none d-sm-block has-tooltip',
         title: key.errors.full_messages.join(', ')
 
 
@@ -15,7 +15,7 @@
     .last-used-at
       last used:
       = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : 'n/a'
-  .pull-right
+  .float-right
     %span.key-created-at
       created #{time_ago_with_tooltip(key.created_at)}
     = link_to path_to_key(key, is_admin), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-transparent prepend-left-10" do
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index 77521417f47..2ac514d3f6f 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -1,10 +1,10 @@
 - is_admin = defined?(admin) ? true : false
 .row.prepend-top-default
   .col-md-4
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         SSH Key
-      %ul.well-list
+      %ul.content-list
         %li
           %span.light Title:
           %strong= @key.title
@@ -23,5 +23,5 @@
     %pre.well-pre
       = @key.key
   .col-md-12
-    .pull-right
+    .float-right
       = link_to 'Remove', path_to_key(@key, is_admin), data: {confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove delete-key"
diff --git a/app/views/profiles/keys/_key_table.html.haml b/app/views/profiles/keys/_key_table.html.haml
index e78763bdcb2..e088140fdd2 100644
--- a/app/views/profiles/keys/_key_table.html.haml
+++ b/app/views/profiles/keys/_key_table.html.haml
@@ -1,7 +1,7 @@
 - is_admin = local_assigns.fetch(:admin, false)
 
 - if @keys.any?
-  %ul.well-list
+  %ul.content-list
     = render partial: 'profiles/keys/key', collection: @keys, locals: { is_admin: is_admin }
 - else
   %p.settings-message.text-center
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index 1e206def7ee..55ca8d0ebd4 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -11,10 +11,11 @@
     %h5.prepend-top-0
       Add an SSH key
     %p.profile-settings-content
-      Before you can add an SSH key you need to
-      = link_to "generate one", help_page_path("ssh/README", anchor: 'generating-a-new-ssh-key-pair')
-      or use an
-      = link_to "existing key.", help_page_path("ssh/README", anchor: 'locating-an-existing-ssh-key-pair')
+      - generate_link_url = help_page_path("ssh/README", anchor: 'generating-a-new-ssh-key-pair')
+      - existing_link_url = help_page_path("ssh/README", anchor: 'locating-an-existing-ssh-key-pair')
+      - generate_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: generate_link_url }
+      - existing_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: existing_link_url }
+      = _('To add an SSH key you need to %{generate_link_start}generate one%{link_end} or use an %{existing_link_start}existing key%{link_end}.').html_safe % { generate_link_start: generate_link_start, existing_link_start: existing_link_start, link_end: '</a>'.html_safe }
     = render 'form'
     %hr
     %h5
diff --git a/app/views/profiles/notifications/_group_settings.html.haml b/app/views/profiles/notifications/_group_settings.html.haml
index 537bba21f4a..a12246bcdcc 100644
--- a/app/views/profiles/notifications/_group_settings.html.haml
+++ b/app/views/profiles/notifications/_group_settings.html.haml
@@ -8,5 +8,5 @@
   %span.str-truncated
     = link_to group.name, group_path(group)
 
-  .pull-right
+  .float-right
     = render 'shared/notifications/button', notification_setting: setting
diff --git a/app/views/profiles/notifications/_project_settings.html.haml b/app/views/profiles/notifications/_project_settings.html.haml
index 5b2a69b8891..823fec3fab4 100644
--- a/app/views/profiles/notifications/_project_settings.html.haml
+++ b/app/views/profiles/notifications/_project_settings.html.haml
@@ -8,5 +8,5 @@
   %span.str-truncated
     = link_to_project(project)
 
-  .pull-right
+  .float-right
     = render 'shared/notifications/button', notification_setting: setting
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index 8f099aa6dd7..71ea625e5d5 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -29,7 +29,7 @@
       = label_tag :global_notification_level, "Global notification level", class: "label-light"
       %br
       .clearfix
-      .form-group.pull-left.global-notification-setting
+      .form-group.float-left.global-notification-setting
         = render 'shared/notifications/button', notification_setting: @global_notification_setting
 
       .clearfix
diff --git a/app/views/profiles/passwords/edit.html.haml b/app/views/profiles/passwords/edit.html.haml
index c606b5a1e6c..8a51a30191a 100644
--- a/app/views/profiles/passwords/edit.html.haml
+++ b/app/views/profiles/passwords/edit.html.haml
@@ -20,7 +20,7 @@
         .form-group
           = f.label :current_password, class: 'label-light'
           = f.password_field :current_password, required: true, class: 'form-control'
-          %p.help-block
+          %p.form-text.text-muted
             You must provide your current password in order to change it.
       .form-group
         = f.label :password, 'New password', class: 'label-light'
diff --git a/app/views/profiles/passwords/new.html.haml b/app/views/profiles/passwords/new.html.haml
index 2eb9fac57c3..2176d7f8a31 100644
--- a/app/views/profiles/passwords/new.html.haml
+++ b/app/views/profiles/passwords/new.html.haml
@@ -2,7 +2,7 @@
 - header_title  "New Password"
 %h3.page-title Setup new password
 %hr
-= form_for @user, url: profile_password_path, method: :post, html: { class: 'form-horizontal '} do |f|
+= form_for @user, url: profile_password_path, method: :post do |f|
   %p.slead
     Please set a new password before proceeding.
     %br
@@ -11,14 +11,14 @@
   = form_errors(@user)
 
   - unless @user.password_automatically_set?
-    .form-group
-      = f.label :current_password, class: 'control-label'
+    .form-group.row
+      = f.label :current_password, class: 'col-form-label col-sm-2'
       .col-sm-10= f.password_field :current_password, required: true, class: 'form-control'
-  .form-group
-    = f.label :password, class: 'control-label'
+  .form-group.row
+    = f.label :password, class: 'col-form-label col-sm-2'
     .col-sm-10= f.password_field :password, required: true, class: 'form-control'
-  .form-group
-    = f.label :password_confirmation, class: 'control-label'
+  .form-group.row
+    = f.label :password_confirmation, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.password_field :password_confirmation, required: true, class: 'form-control'
   .form-actions
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 78848542810..d111113c646 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -2,7 +2,6 @@
 - page_title "Personal Access Tokens"
 - @content_class = "limit-container-width" unless fluid_layout
 
-
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
@@ -19,9 +18,11 @@
         %h5.prepend-top-0
           Your New Personal Access Token
         .form-group
-          = text_field_tag 'created-personal-access-token', @new_personal_access_token, readonly: true, class: "form-control js-select-on-focus", 'aria-describedby' => "created-personal-access-token-help-block"
-          = clipboard_button(text: @new_personal_access_token, title: "Copy personal access token to clipboard", placement: "left")
-          %span#created-personal-access-token-help-block.help-block.text-danger Make sure you save it - you won't be able to access it again.
+          .input-group
+            = text_field_tag 'created-personal-access-token', @new_personal_access_token, readonly: true, class: "form-control js-select-on-focus", 'aria-describedby' => "created-personal-access-token-help-block"
+            %span.input-group-append
+              = clipboard_button(text: @new_personal_access_token, title: "Copy personal access token to clipboard", placement: "left", class: "input-group-text btn-default btn-clipboard")
+          %span#created-personal-access-token-help-block.form-text.text-muted.text-danger Make sure you save it - you won't be able to access it again.
 
       %hr
 
@@ -33,18 +34,18 @@
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
-      RSS token
+      Feed token
     %p
-      Your RSS token is used to authenticate you when your RSS reader loads a personalized RSS feed, and is included in your personal RSS feed URLs.
+      Your feed token is used to authenticate you when your RSS reader loads a personalized RSS feed or when when your calendar application loads a personalized calendar, and is included in those feed URLs.
     %p
       It cannot be used to access any other data.
-  .col-lg-8.rss-token-reset
-    = label_tag :rss_token, 'RSS token', class: "label-light"
-    = text_field_tag :rss_token, current_user.rss_token, class: 'form-control', readonly: true, onclick: 'this.select()'
-    %p.help-block
-      Keep this token secret. Anyone who gets ahold of it can read activity and issue RSS feeds as if they were you.
+  .col-lg-8.feed-token-reset
+    = label_tag :feed_token, 'Feed token', class: "label-light"
+    = text_field_tag :feed_token, current_user.feed_token, class: 'form-control', readonly: true, onclick: 'this.select()'
+    %p.form-text.text-muted
+      Keep this token secret. Anyone who gets ahold of it can read activity and issue RSS feeds or your calendar feed as if they were you.
       You should
-      = link_to 'reset it', [:reset, :rss_token, :profile], method: :put, data: { confirm: 'Are you sure? Any RSS URLs currently in use will stop working.' }
+      = link_to 'reset it', [:reset, :feed_token, :profile], method: :put, data: { confirm: 'Are you sure? Any RSS or calendar URLs currently in use will stop working.' }
       if that ever happens.
 
 - if incoming_email_token_enabled?
@@ -60,7 +61,7 @@
     .col-lg-8.incoming-email-token-reset
       = 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
+      %p.form-text.text-muted
         Keep this token secret. Anyone who gets ahold of it can create issues as if they were you.
         You should
         = link_to 'reset it', [:reset, :incoming_email_token, :profile], method: :put, data: { confirm: 'Are you sure? Any issue email addresses currently in use will stop working.' }
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 6aefd97bb96..8f1078bd41d 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -4,18 +4,12 @@
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
   .col-lg-4.application-theme
     %h4.prepend-top-0
-      GitLab navigation theme
+      = s_('Preferences|Navigation theme')
     %p Customize the appearance of the application header and navigation sidebar.
   .col-lg-8.application-theme
     - Gitlab::Themes.each do |theme|
       = label_tag do
-        .preview{ class: theme.name.downcase }
-          .preview-row
-            .quadrant.one
-            .quadrant.two
-          .preview-row
-            .quadrant.three
-            .quadrant.four
+        .preview{ class: theme.css_class }
         = f.radio_button :theme_id, theme.id, checked: Gitlab::Themes.for_user(@user).id == theme.id
         = theme.name
 
@@ -51,7 +45,7 @@
       = f.label :layout, class: 'label-light' do
         Layout width
       = f.select :layout, layout_choices, {}, class: 'form-control'
-      .help-block
+      .form-text.text-muted
         Choose between fixed (max. 1200px) and fluid (100%) application layout.
     .form-group
       = f.label :dashboard, class: 'label-light' do
@@ -61,7 +55,7 @@
       = f.label :project_view, class: 'label-light' do
         Project overview content
       = f.select :project_view, project_view_choices, {}, class: 'form-control'
-      .help-block
+      .form-text.text-muted
         Choose what content you want to see on a project’s overview 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 e497eab32e0..507cd5dcc12 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -26,7 +26,7 @@
         %button.btn.js-choose-user-avatar-button{ type: 'button' }= _("Choose file...")
         %span.avatar-file-name.prepend-left-default.js-avatar-filename= _("No file chosen")
         = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
-      .help-block= _("The maximum file size allowed is 200KB.")
+      .form-text.text-muted= _("The maximum file size allowed is 200KB.")
       - if @user.avatar?
         %hr
         = link_to _('Remove avatar'), profile_avatar_path, data: { confirm: _('Avatar will be removed. Are you sure?') }, method: :delete, class: 'btn btn-danger btn-inverted'
@@ -77,11 +77,10 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{ type: 'button', 'data-dismiss': 'modal' }
-          %span
-            &times;
         %h4.modal-title
           Position and size your new avatar
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
       .modal-body
         .profile-crop-image-container
           %img.modal-profile-crop-image{ alt: 'Avatar cropper' }
diff --git a/app/views/profiles/two_factor_auths/_codes.html.haml b/app/views/profiles/two_factor_auths/_codes.html.haml
index 43b58be7f98..93722d7b034 100644
--- a/app/views/profiles/two_factor_auths/_codes.html.haml
+++ b/app/views/profiles/two_factor_auths/_codes.html.haml
@@ -4,7 +4,7 @@
   %b will
   lose access to your account.
 
-.codes.well
+.codes.card
   %ul
     - @codes.each do |code|
       %li
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 1bd10018b40..e35ebdea435 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -20,7 +20,7 @@
       - else
         %p
           Download the Google Authenticator application from App Store or Google Play Store and scan this code.
-          More information is available in the #{link_to('documentation', help_page_path('profile/two_factor_authentication'))}.
+          More information is available in the #{link_to('documentation', help_page_path('user/profile/account/two_factor_authentication'))}.
         .row.append-bottom-10
           .col-md-4
             = raw @qr_code
@@ -86,7 +86,7 @@
                 %tr
                   %td= registration.name.presence || "<no name set>"
                   %td= registration.created_at.to_date.to_s(:medium)
-                  %td= link_to "Delete", profile_u2f_registration_path(registration), method: :delete, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to delete this device? This action cannot be undone." }
+                  %td= link_to "Delete", profile_u2f_registration_path(registration), method: :delete, class: "btn btn-danger float-right", data: { confirm: "Are you sure you want to delete this device? This action cannot be undone." }
 
       - else
         .settings-message.text-center
diff --git a/app/views/projects/_bitbucket_import_modal.html.haml b/app/views/projects/_bitbucket_import_modal.html.haml
index c24a496486c..c54a4ceb890 100644
--- a/app/views/projects/_bitbucket_import_modal.html.haml
+++ b/app/views/projects/_bitbucket_import_modal.html.haml
@@ -2,8 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
-        %h3 Import projects from Bitbucket
+        %h3.modal-title Import projects from Bitbucket
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
       .modal-body
         To enable importing projects from Bitbucket,
         - if current_user.admin?
diff --git a/app/views/projects/_export.html.haml b/app/views/projects/_export.html.haml
index 5dfe973f33c..1e7d9444986 100644
--- a/app/views/projects/_export.html.haml
+++ b/app/views/projects/_export.html.haml
@@ -7,7 +7,7 @@
   .settings-header
     %h4
       Export project
-    %button.btn.js-settings-toggle
+    %button.btn.js-settings-toggle{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
       Export this project with all its related data in order to move your project to a new GitLab instance. Once the export is finished, you can import the file from the "New Project" page.
@@ -21,11 +21,11 @@
           %li Project uploads
           %li Project configuration including web hooks and services
           %li Issues with comments, merge requests with diffs and comments, labels, milestones, snippets, and other project entities
+          %li LFS objects
         %p
           The following items will NOT be exported:
         %ul
           %li Job traces and artifacts
-          %li LFS objects
           %li Container registry images
           %li CI variables
           %li Any encrypted tokens
diff --git a/app/views/projects/_gitlab_import_modal.html.haml b/app/views/projects/_gitlab_import_modal.html.haml
index 00aef66e1f8..5519415cdc3 100644
--- a/app/views/projects/_gitlab_import_modal.html.haml
+++ b/app/views/projects/_gitlab_import_modal.html.haml
@@ -2,8 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
-        %h3 Import projects from GitLab.com
+        %h3.modal-title Import projects from GitLab.com
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
       .modal-body
         To enable importing projects from GitLab.com,
         - if current_user.admin?
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index a2ecfddb163..89940512bc6 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -23,22 +23,29 @@
             - deleted_message = s_('ForkedFromProjectPath|Forked from %{project_name} (deleted)')
             = deleted_message % { project_name: fork_source_name(@project) }
 
-    .project-badges
+    .project-badges.prepend-top-default.append-bottom-default
       - @project.badges.each do |badge|
-        - badge_link_url = badge.rendered_link_url(@project)
-        %a{ href: badge_link_url, target: '_blank', rel: 'noopener noreferrer' }
-          %img{ src: badge.rendered_image_url(@project), alt: badge_link_url }
+        %a.append-right-8{ href: badge.rendered_link_url(@project),
+          target: '_blank',
+          rel: 'noopener noreferrer' }>
+          %img.project-badge{ src: badge.rendered_image_url(@project),
+            'aria-hidden': true,
+            alt: '' }>
 
     .project-repo-buttons
       .count-buttons
         = render 'projects/buttons/star'
         = render 'projects/buttons/fork'
 
-      %span.hidden-xs
+      %span.d-none.d-sm-inline
         - if can?(current_user, :download_code, @project)
           .project-clone-holder
             = render "shared/clone_panel"
 
+          - if show_xcode_link?(@project)
+            .project-action-button.project-xcode.inline
+              = render "projects/buttons/xcode_link"
+
         - if current_user
           - if can?(current_user, :download_code, @project)
             = render 'projects/buttons/download', project: @project, ref: @ref
diff --git a/app/views/projects/_import_project_pane.html.haml b/app/views/projects/_import_project_pane.html.haml
new file mode 100644
index 00000000000..8f535b9d789
--- /dev/null
+++ b/app/views/projects/_import_project_pane.html.haml
@@ -0,0 +1,49 @@
+- active_tab = local_assigns.fetch(:active_tab, 'blank')
+- f = local_assigns.fetch(:f)
+
+.project-import
+  .form-group.import-btn-container.clearfix
+    = f.label :visibility_level, class: 'label-light' do #the label here seems wrong
+      Import project from
+    .import-buttons
+      - if gitlab_project_import_enabled?
+        .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
+          = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
+            = icon('gitlab', text: 'GitLab export')
+      %div
+        - if github_import_enabled?
+          = link_to new_import_github_path, class: 'btn js-import-github' do
+            = icon('github', text: 'GitHub')
+      %div
+        - if bitbucket_import_enabled?
+          = link_to status_import_bitbucket_path, class: "btn import_bitbucket #{'how_to_import_link' unless bitbucket_import_configured?}" do
+            = icon('bitbucket', text: 'Bitbucket')
+          - unless bitbucket_import_configured?
+            = render 'bitbucket_import_modal'
+      %div
+        - if gitlab_import_enabled?
+          = link_to status_import_gitlab_path, class: "btn import_gitlab #{'how_to_import_link' unless gitlab_import_configured?}" do
+            = icon('gitlab', text: 'GitLab.com')
+          - unless gitlab_import_configured?
+            = render 'gitlab_import_modal'
+      %div
+        - if google_code_import_enabled?
+          = link_to new_import_google_code_path, class: 'btn import_google_code' do
+            = icon('google', text: 'Google Code')
+      %div
+        - if fogbugz_import_enabled?
+          = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
+            = icon('bug', text: 'Fogbugz')
+      %div
+        - if gitea_import_enabled?
+          = link_to new_import_gitea_path, class: 'btn import_gitea' do
+            = custom_icon('go_logo')
+            Gitea
+      %div
+        - if git_import_enabled?
+          %button.btn.js-toggle-button.js-import-git-toggle-button{ type: "button", data: { toggle_open_class: 'active' } }
+            = icon('git', text: 'Repo by URL')
+  .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
+    %hr
+      = render "shared/import_form", f: f
+      = render 'new_project_fields', f: f, project_name_id: "import-url-name"
diff --git a/app/views/projects/_issuable_by_email.html.haml b/app/views/projects/_issuable_by_email.html.haml
index c137e38ed50..22adf5b4008 100644
--- a/app/views/projects/_issuable_by_email.html.haml
+++ b/app/views/projects/_issuable_by_email.html.haml
@@ -8,17 +8,17 @@
   .modal-dialog{ role: "document" }
     .modal-content
       .modal-header
-        %button.close{ type: "button", data: { dismiss: "modal" }, aria: { label: "close" } }
-          %span{ aria: { hidden: "true" } }= icon("times")
         %h4.modal-title
           Create new #{name} by email
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
       .modal-body
         %p
           You can create a new #{name} inside this project by sending an email to the following email address:
         .email-modal-input-group.input-group
           = text_field_tag :issuable_email, email, class: "monospace js-select-on-focus form-control", readonly: true
-          .input-group-btn
-            = clipboard_button(target: '#issuable_email', class: 'btn btn-clipboard btn-transparent hidden-xs')
+          .input-group-append
+            = clipboard_button(target: '#issuable_email', class: 'btn btn-clipboard input-group-text btn-transparent d-none d-sm-block')
             = mail_to email, class: 'btn btn-clipboard btn-transparent',
               subject: _("Enter the #{name} title"),
               body: _("Enter the #{name} description"),
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 6f5eb828902..3b66fdbdf1a 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -1,6 +1,6 @@
 - event = last_push_event
 - if event && show_last_push_widget?(event)
-  .row-content-block.top-block.hidden-xs.white
+  .row-content-block.top-block.d-none.d-sm-block.white
     .event-last-push
       .event-last-push-text
         %span= s_("LastPushEvent|You pushed to")
@@ -13,6 +13,7 @@
 
         #{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 qa-create-merge-request" do
-          #{ _('Create merge request') }
+      - if can?(current_user, :create_merge_request_in, event.project.default_merge_request_target)
+        .flex-right
+          = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn btn-info btn-sm qa-create-merge-request" do
+            #{ _('Create merge request') }
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index 8212ab9a31e..8fb6aa55436 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -9,7 +9,7 @@
 
 .md-area
   .md-header
-    %ul.nav-links.clearfix
+    %ul.nav.nav-tabs.nav-links.clearfix
       %li.md-header-tab.active
         %a.js-md-write-button{ href: "#md-write-holder", tabindex: -1 }
           Write
diff --git a/app/views/projects/_merge_request_fast_forward_settings.html.haml b/app/views/projects/_merge_request_fast_forward_settings.html.haml
deleted file mode 100644
index f455522d17c..00000000000
--- a/app/views/projects/_merge_request_fast_forward_settings.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-- form = local_assigns.fetch(:form)
-- project = local_assigns.fetch(:project)
-
-.radio
-  = label_tag :project_merge_method_ff do
-    = form.radio_button :merge_method, :ff, class: "js-merge-method-radio qa-radio-button-merge-ff"
-    %strong Fast-forward merge
-    %br
-    %span.descr
-      No merge commits are created and all merges are fast-forwarded, which means that merging is only allowed if the branch could be fast-forwarded.
-    %br
-    %span.descr
-      When fast-forward merge is not possible, the user is given the option to rebase.
diff --git a/app/views/projects/_merge_request_merge_method_settings.html.haml b/app/views/projects/_merge_request_merge_method_settings.html.haml
new file mode 100644
index 00000000000..3bb220ac6d0
--- /dev/null
+++ b/app/views/projects/_merge_request_merge_method_settings.html.haml
@@ -0,0 +1,36 @@
+- form = local_assigns.fetch(:form)
+- project = local_assigns.fetch(:project)
+
+.form-group
+  = label_tag :merge_method_merge, class: 'label-light' do
+    Merge method
+  .form-check
+    = form.radio_button :merge_method, :merge, class: "js-merge-method-radio form-check-input"
+    = label_tag :project_merge_method_merge, class: 'form-check-label' do
+      %strong Merge commit
+      %br
+      %span.descr
+        A merge commit is created for every merge, and merging is allowed as long as there are no conflicts.
+
+  .form-check
+    = form.radio_button :merge_method, :rebase_merge, class: "js-merge-method-radio form-check-input"
+    = label_tag :project_merge_method_rebase_merge, class: 'form-check-label' do
+      %strong Merge commit with semi-linear history
+      %br
+      %span.descr
+        A merge commit is created for every merge, but merging is only allowed if fast-forward merge is possible.
+        This way you could make sure that if this merge request would build, after merging to target branch it would also build.
+      %br
+      %span.descr
+        When fast-forward merge is not possible, the user is given the option to rebase.
+
+  .form-check
+    = form.radio_button :merge_method, :ff, class: "js-merge-method-radio qa-radio-button-merge-ff form-check-input"
+    = label_tag :project_merge_method_ff, class: 'form-check-label' do
+      %strong Fast-forward merge
+      %br
+      %span.descr
+        No merge commits are created and all merges are fast-forwarded, which means that merging is only allowed if the branch could be fast-forwarded.
+      %br
+      %span.descr
+        When fast-forward merge is not possible, the user is given the option to rebase.
diff --git a/app/views/projects/_merge_request_merge_settings.html.haml b/app/views/projects/_merge_request_merge_settings.html.haml
index f6e5712ce81..f178c94e008 100644
--- a/app/views/projects/_merge_request_merge_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_settings.html.haml
@@ -1,23 +1,23 @@
 - form = local_assigns.fetch(:form)
 
 .form-group
-  .checkbox.builds-feature{ class: ("hidden" if @project && @project.project_feature.send(:builds_access_level) == 0) }
-    = form.label :only_allow_merge_if_pipeline_succeeds do
-      = form.check_box :only_allow_merge_if_pipeline_succeeds
+  .form-check.builds-feature{ class: ("hidden" if @project && @project.project_feature.send(:builds_access_level) == 0) }
+    = form.check_box :only_allow_merge_if_pipeline_succeeds, class: 'form-check-input'
+    = form.label :only_allow_merge_if_pipeline_succeeds, class: 'form-check-label' do
       %strong Only allow merge requests to be merged if the pipeline succeeds
       %br
       %span.descr
         Pipelines need to be configured to enable this feature.
         = link_to icon('question-circle'), help_page_path('user/project/merge_requests/merge_when_pipeline_succeeds', anchor: 'only-allow-merge-requests-to-be-merged-if-the-pipeline-succeeds'), target: '_blank'
-  .checkbox
-    = form.label :only_allow_merge_if_all_discussions_are_resolved do
-      = form.check_box :only_allow_merge_if_all_discussions_are_resolved
+  .form-check
+    = form.check_box :only_allow_merge_if_all_discussions_are_resolved, class: 'form-check-input'
+    = form.label :only_allow_merge_if_all_discussions_are_resolved, class: 'form-check-label' do
       %strong Only allow merge requests to be merged if all discussions are resolved
-  .checkbox
-    = form.label :resolve_outdated_diff_discussions do
-      = form.check_box :resolve_outdated_diff_discussions
+  .form-check
+    = form.check_box :resolve_outdated_diff_discussions, class: 'form-check-input'
+    = form.label :resolve_outdated_diff_discussions, class: 'form-check-label' do
       %strong Automatically resolve merge request diff discussions when they become outdated
-  .checkbox
-    = form.label :printing_merge_request_link_enabled do
-      = form.check_box :printing_merge_request_link_enabled
+  .form-check
+    = form.check_box :printing_merge_request_link_enabled, class: 'form-check-input'
+    = form.label :printing_merge_request_link_enabled, class: 'form-check-label' do
       %strong Show link to create/view merge request when pushing from the command line
diff --git a/app/views/projects/_merge_request_rebase_settings.html.haml b/app/views/projects/_merge_request_rebase_settings.html.haml
deleted file mode 100644
index 54e0b73d24c..00000000000
--- a/app/views/projects/_merge_request_rebase_settings.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-- form = local_assigns.fetch(:form)
-
-.radio
-  = label_tag :project_merge_method_rebase_merge do
-    = form.radio_button :merge_method, :rebase_merge, class: "js-merge-method-radio"
-    %strong Merge commit with semi-linear history
-    %br
-    %span.descr
-      A merge commit is created for every merge, but merging is only allowed if fast-forward merge is possible.
-      This way you could make sure that if this merge request would build, after merging to target branch it would also build.
-    %br
-    %span.descr
-      When fast-forward merge is not possible, the user is given the option to rebase.
diff --git a/app/views/projects/_merge_request_settings.html.haml b/app/views/projects/_merge_request_settings.html.haml
index fd0c419cdac..c80e831dd33 100644
--- a/app/views/projects/_merge_request_settings.html.haml
+++ b/app/views/projects/_merge_request_settings.html.haml
@@ -1,18 +1,5 @@
 - form = local_assigns.fetch(:form)
 
-.form-group
-  = label_tag :merge_method_merge, class: 'label-light' do
-    Merge method
-  .radio
-    = label_tag :project_merge_method_merge do
-      = form.radio_button :merge_method, :merge, class: "js-merge-method-radio"
-      %strong Merge commit
-      %br
-      %span.descr
-        A merge commit is created for every merge, and merging is allowed as long as there are no conflicts.
-
-  = render 'merge_request_rebase_settings', form: form
-
-  = render 'merge_request_fast_forward_settings', project: @project, form: form
+= render 'projects/merge_request_merge_method_settings', project: @project, form: form
 
 = render 'projects/merge_request_merge_settings', form: form
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 241bc3dbca0..6f957533287 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -9,13 +9,15 @@
         Project path
     .input-group
       - if current_user.can_select_namespace?
-        .input-group-addon.has-tooltip{ title: root_url }
-          = root_url
+        .input-group-prepend.has-tooltip{ title: root_url }
+          .input-group-text
+            = root_url
         = f.select :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), {}, { class: 'select2 js-select-namespace qa-project-namespace-select', tabindex: 1}
 
       - else
-        .input-group-addon.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
-          #{user_url(current_user.username)}/
+        .input-group-prepend.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
+          .input-group-text.border-0
+            #{user_url(current_user.username)}/
         = f.hidden_field :namespace_id, value: current_user.namespace_id
   .form-group.project-path.col-sm-6
     = f.label :path, class: 'label-light' do
@@ -23,7 +25,7 @@
         Project name
     = f.text_field :path, placeholder: "my-awesome-project", class: "form-control", tabindex: 2, autofocus: true, required: true
 - if current_user.can_create_group?
-  .help-block
+  .form-text.text-muted
     Want to house several dependent projects under the same namespace?
     = link_to "Create a group", new_group_path
 
@@ -33,11 +35,10 @@
     %span (optional)
   = f.text_area :description, placeholder: 'Description format',  class: "form-control", rows: 3, maxlength: 250
 
-.form-group.visibility-level-setting
-  = f.label :visibility_level, class: 'label-light' do
-    Visibility Level
-    = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
-  = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false
+= f.label :visibility_level, class: 'label-light' do
+  Visibility Level
+  = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
+= render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false
 
 = f.submit 'Create project', class: "btn btn-create project-submit", tabindex: 4
 = link_to 'Cancel', dashboard_projects_path, class: 'btn btn-cancel'
diff --git a/app/views/projects/_new_project_push_tip.html.haml b/app/views/projects/_new_project_push_tip.html.haml
index 9bc69211d12..22e9522c0e7 100644
--- a/app/views/projects/_new_project_push_tip.html.haml
+++ b/app/views/projects/_new_project_push_tip.html.haml
@@ -3,9 +3,9 @@
     = label_tag(:push_to_create_tip, _("Private projects can be created in your personal namespace with:"), class: "weight-normal")
 
   %p.input-group.project-tip-command
-    %span.input-group-btn
+    %span
       = text_field_tag :push_to_create_tip, push_to_create_project_command, class: "js-select-on-focus form-control monospace", readonly: true, aria: { label: _("Push project from command line") }
-    %span.input-group-btn
-      = clipboard_button(text: push_to_create_project_command, title: _("Copy command to clipboard"), placement: "right")
+    %span.input-group-append
+      = clipboard_button(text: push_to_create_project_command, title: _("Copy command to clipboard"), class: 'input-group-text', placement: "right")
   %p
     = link_to("What does this command do?", help_page_path("gitlab-basics/create-project", anchor: "push-to-create-a-new-project"), target: "_blank")
diff --git a/app/views/projects/_project_templates.html.haml b/app/views/projects/_project_templates.html.haml
index d50175727be..d08807b5135 100644
--- a/app/views/projects/_project_templates.html.haml
+++ b/app/views/projects/_project_templates.html.haml
@@ -10,15 +10,18 @@
       %a.btn.btn-default{ href: template.preview, rel: 'noopener noreferrer', target: '_blank' } Preview
 
   .project-fields-form
-    .form-group
-      %label.label-light
-        Template
-      .input-group.template-input-group
-        .input-group-addon
-          .selected-icon
-            - Gitlab::ProjectTemplate.all.each do |template|
-              = custom_icon(template.logo)
-          .selected-template
-        %button.btn.btn-default.change-template{ type: "button" } Change template
+    .row
+      .form-group.col-sm-12
+        %label.label-light
+          Template
+        .input-group.template-input-group
+          .input-group-prepend
+            .input-group-text
+              .selected-icon
+                - Gitlab::ProjectTemplate.all.each do |template|
+                  = custom_icon(template.logo)
+              .selected-template
+          .input-group-append
+            %button.btn.btn-default.change-template{ type: "button" } Change template
 
     = render 'new_project_fields', f: f, project_name_id: "template-project-name"
diff --git a/app/views/projects/_stat_anchor_list.html.haml b/app/views/projects/_stat_anchor_list.html.haml
index a115b65938b..15ec58289e3 100644
--- a/app/views/projects/_stat_anchor_list.html.haml
+++ b/app/views/projects/_stat_anchor_list.html.haml
@@ -1,8 +1,8 @@
 - anchors = local_assigns.fetch(:anchors, [])
 
 - return unless anchors.any?
-%ul.nav
+%ul.nav.justify-content-center
   - anchors.each do |anchor|
-    %li
-      = link_to_if anchor.link, anchor.label, anchor.link, class: anchor.enabled ? 'stat-link' : "btn btn-#{anchor.class_modifier || 'missing'}" do
-        %span.stat-text= anchor.label
+    %li.nav-item
+      = link_to_if anchor.link, anchor.label, anchor.link, class: anchor.enabled ? 'nav-link stat-link' : "nav-link btn btn-#{anchor.class_modifier || 'missing'}" do
+        .stat-text= anchor.label
diff --git a/app/views/projects/_visibility_select.html.haml b/app/views/projects/_visibility_select.html.haml
deleted file mode 100644
index 4026b9e3c46..00000000000
--- a/app/views/projects/_visibility_select.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-- if can_change_visibility_level?(@project, current_user)
-  .select-wrapper
-    = form.select(model_method, visibility_select_options(@project, selected_level), {}, class: 'form-control visibility-select select-control')
-    = icon('chevron-down')
-- else
-  .info.js-locked{ data: { help_block: visibility_level_description(@project.visibility_level, @project) } }
-    = visibility_level_icon(@project.visibility_level)
-    %strong
-      = visibility_level_label(@project.visibility_level)
diff --git a/app/views/projects/_wiki.html.haml b/app/views/projects/_wiki.html.haml
index a56c3503c77..5646dc464f8 100644
--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
@@ -1,6 +1,6 @@
 - if @wiki_home.present?
   %div{ class: container_class }
-    .wiki-holder.prepend-top-default.append-bottom-default
+    .prepend-top-default.append-bottom-default
       .wiki
         = render_wiki_content(@wiki_home)
 - else
diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml
index 7ff7466e561..87b165e581a 100644
--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
@@ -9,10 +9,10 @@
 .tree-holder
   .nav-block
     %ul.breadcrumb.repo-breadcrumb
-      %li
+      %li.breadcrumb-item
         = link_to 'Artifacts', browse_project_job_artifacts_path(@project, @build)
       - path_breadcrumbs do |title, path|
-        %li
+        %li.breadcrumb-item
           = link_to truncate(title, length: 40), browse_project_job_artifacts_path(@project, @build, path)
 
     .tree-controls
diff --git a/app/views/projects/artifacts/file.html.haml b/app/views/projects/artifacts/file.html.haml
index 2942d618a42..aac7a1870df 100644
--- a/app/views/projects/artifacts/file.html.haml
+++ b/app/views/projects/artifacts/file.html.haml
@@ -5,11 +5,11 @@
 .tree-holder
   .nav-block
     %ul.breadcrumb.repo-breadcrumb
-      %li
+      %li.breadcrumb-item
         = link_to 'Artifacts', browse_project_job_artifacts_path(@project, @build)
       - path_breadcrumbs do |title, path|
         - title = truncate(title, length: 40)
-        %li
+        %li.breadcrumb-item
           - if path == @path
             = link_to file_project_job_artifacts_path(@project, @build, path) do
               %strong= title
@@ -22,7 +22,7 @@
     .js-file-title.file-title-flex-parent
       = render 'projects/blob/header_content', blob: blob
 
-      .file-actions.hidden-xs
+      .file-actions.d-none.d-sm-block
         = render 'projects/blob/viewer_switcher', blob: blob
 
         .btn-group{ role: "group" }<
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index e45861ac08d..e90916e340d 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -22,7 +22,7 @@
                   .commit-row-title
                     %span.item-title.str-truncated-100
                       = link_to_markdown commit.title, project_commit_path(@project, commit.id), class: "cdark", title: commit.title
-                    .pull-right
+                    .float-right
                       = link_to commit.short_id, project_commit_path(@project, commit), class: "commit-sha"
                     &nbsp;
                   .light
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 849716a679b..a4b1b496b69 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -1,6 +1,6 @@
 = render "projects/blob/breadcrumb", blob: blob
 
-.info-well.hidden-xs
+.info-well.d-none.d-sm-block
   .well-segment
     %ul.blob-commit-info
       = render 'projects/commits/commit', commit: @last_commit, project: @project, ref: @ref
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
index 1c148de9678..a4fb5f6ba88 100644
--- a/app/views/projects/blob/_breadcrumb.html.haml
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -5,12 +5,12 @@
       = render 'shared/ref_switcher', destination: 'blob', path: @path
 
     %ul.breadcrumb.repo-breadcrumb
-      %li
+      %li.breadcrumb-item
         = link_to project_tree_path(@project, @ref) do
           = @project.path
       - path_breadcrumbs do |title, path|
         - title = truncate(title, length: 40)
-        %li
+        %li.breadcrumb-item
           - if path == @path
             = link_to project_blob_path(@project, tree_join(@ref, path)) do
               %strong= title
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index c9fa90acd11..8560b72fe85 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -16,7 +16,7 @@
       = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
         required: true, class: 'form-control new-file-name js-file-path-name-input'
 
-    .pull-right.file-buttons
+    .float-right.file-buttons
       = button_tag class: 'soft-wrap-toggle btn', type: 'button', tabindex: '-1' do
         %span.no-wrap
           = custom_icon('icon_no_wrap')
diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml
index 1b150ec3e5c..0a0b3ce1d6f 100644
--- a/app/views/projects/blob/_header.html.haml
+++ b/app/views/projects/blob/_header.html.haml
@@ -11,6 +11,7 @@
       = view_on_environment_button(@commit.sha, @path, @environment) if @environment
 
     .btn-group{ role: "group" }<
+      = render_if_exists 'projects/blob/header_file_locks_link'
       = edit_blob_button
       = ide_edit_button
       - if current_user
@@ -18,3 +19,4 @@
         = delete_blob_link
 
 = render 'projects/fork_suggestion'
+= render_if_exists 'projects/blob/header_file_locks', project: @project, path: @path
diff --git a/app/views/projects/blob/_header_content.html.haml b/app/views/projects/blob/_header_content.html.haml
index 5d457a50c49..4bef45932d0 100644
--- a/app/views/projects/blob/_header_content.html.haml
+++ b/app/views/projects/blob/_header_content.html.haml
@@ -10,4 +10,4 @@
     = number_to_human_size(blob.raw_size)
 
   - if blob.stored_externally? && blob.external_storage == :lfs
-    %span.label.label-lfs.append-right-5 LFS
+    %span.badge.label-lfs.append-right-5 LFS
diff --git a/app/views/projects/blob/_new_dir.html.haml b/app/views/projects/blob/_new_dir.html.haml
index 48ff66900be..6f3a691518b 100644
--- a/app/views/projects/blob/_new_dir.html.haml
+++ b/app/views/projects/blob/_new_dir.html.haml
@@ -2,12 +2,13 @@
   .modal-dialog.modal-lg
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title= _('Create New Directory')
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
       .modal-body
-        = form_tag project_create_dir_path(@project, @id), method: :post, remote: false, class: 'form-horizontal js-create-dir-form js-quick-submit js-requires-input' do
-          .form-group
-            = label_tag :dir_name, _('Directory name'), class: 'control-label'
+        = form_tag project_create_dir_path(@project, @id), method: :post, remote: false, class: 'js-create-dir-form js-quick-submit js-requires-input' do
+          .form-group.row
+            = label_tag :dir_name, _('Directory name'), class: 'col-form-label col-sm-2'
             .col-sm-10
               = text_field_tag :dir_name, params[:dir_name], required: true, class: 'form-control'
 
diff --git a/app/views/projects/blob/_remove.html.haml b/app/views/projects/blob/_remove.html.haml
index 750bdef3308..f80bae5c88c 100644
--- a/app/views/projects/blob/_remove.html.haml
+++ b/app/views/projects/blob/_remove.html.haml
@@ -2,14 +2,15 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title Delete #{@blob.name}
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
 
       .modal-body
-        = form_tag project_blob_path(@project, @id), method: :delete, class: 'form-horizontal js-delete-blob-form js-quick-submit js-requires-input' do
+        = form_tag project_blob_path(@project, @id), method: :delete, class: 'js-delete-blob-form js-quick-submit js-requires-input' do
           = render 'shared/new_commit_form', placeholder: "Delete #{@blob.name}"
 
-          .form-group
-            .col-sm-offset-2.col-sm-10
+          .form-group.row
+            .offset-sm-2.col-sm-10
               = button_tag 'Delete file', class: 'btn btn-remove btn-remove-file'
               = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index 182d02376bf..0a5c73c9037 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -2,10 +2,11 @@
   .modal-dialog.modal-lg
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } &times;
         %h3.page-title= title
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
       .modal-body
-        = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form form-horizontal', data: { method: method } do
+        = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form', data: { method: method } do
           .dropzone
             .dropzone-previews.blob-upload-dropzone-previews
               %p.dz-message.light
diff --git a/app/views/projects/blob/_viewer.html.haml b/app/views/projects/blob/_viewer.html.haml
index 3124443b4e4..b9663bbba15 100644
--- a/app/views/projects/blob/_viewer.html.haml
+++ b/app/views/projects/blob/_viewer.html.haml
@@ -2,13 +2,16 @@
 - render_error = viewer.render_error
 - rich_type = viewer.type == :rich ? viewer.partial_name : nil
 - load_async = local_assigns.fetch(:load_async, viewer.load_async? && render_error.nil?)
+- external_embed = local_assigns.fetch(:external_embed, false)
 
-- viewer_url = local_assigns.fetch(:viewer_url) { url_for(params.merge(viewer: viewer.type, format: :json)) } if load_async
+- viewer_url = local_assigns.fetch(:viewer_url) { url_for(safe_params.merge(viewer: viewer.type, format: :json)) } if load_async
 .blob-viewer{ data: { type: viewer.type, rich_type: rich_type, url: viewer_url }, class: ('hidden' if hidden) }
   - if render_error
     = render 'projects/blob/render_error', viewer: viewer
   - elsif load_async
     = render viewer.loading_partial_path, viewer: viewer
+  - elsif external_embed
+    = render 'projects/blob/viewers/highlight_embed', blob: viewer.blob
   - else
     - viewer.prepare!
 
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index 9d90251ab66..27cf040da7c 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -15,7 +15,7 @@
       Edit file
     = render 'template_selectors'
   .file-editor
-    %ul.nav-links.no-bottom.js-edit-mode
+    %ul.nav-links.no-bottom.js-edit-mode.nav.nav-tabs
       %li.active
         = link_to '#editor' do
           Write
@@ -24,7 +24,7 @@
         = link_to '#preview', 'data-preview-url' => project_preview_blob_path(@project, @id) do
           = editing_preview_title(@blob.name)
 
-    = form_tag(project_update_blob_path(@project, @id), method: :put, class: 'form-horizontal js-quick-submit js-requires-input js-edit-blob-form', data: blob_editor_paths) do
+    = form_tag(project_update_blob_path(@project, @id), method: :put, class: 'js-quick-submit js-requires-input js-edit-blob-form', data: blob_editor_paths) do
       = render 'projects/blob/editor', ref: @ref, path: @path, blob_data: @blob.data
       = render 'shared/new_commit_form', placeholder: "Update #{@blob.name}"
       = hidden_field_tag 'last_commit_sha', @last_commit_sha
diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml
index fa091d8f6ef..39442564a2b 100644
--- a/app/views/projects/blob/new.html.haml
+++ b/app/views/projects/blob/new.html.haml
@@ -7,7 +7,7 @@
     New file
   = render 'template_selectors'
 .file-editor
-  = form_tag(project_create_blob_path(@project, @id), method: :post, class: 'form-horizontal js-edit-blob-form js-new-blob-form js-quick-submit js-requires-input', data: blob_editor_paths) do
+  = form_tag(project_create_blob_path(@project, @id), method: :post, class: 'js-edit-blob-form js-new-blob-form js-quick-submit js-requires-input', data: blob_editor_paths) do
     = render 'projects/blob/editor', ref: @ref
     = render 'shared/new_commit_form', placeholder: "Add new file"
 
diff --git a/app/views/projects/blob/viewers/_download.html.haml b/app/views/projects/blob/viewers/_download.html.haml
index f9b1da05a00..fda4b9c92cd 100644
--- a/app/views/projects/blob/viewers/_download.html.haml
+++ b/app/views/projects/blob/viewers/_download.html.haml
@@ -1,5 +1,5 @@
 .file-content.blob_file.blob-no-preview
-  .center.render-error.vertical-center
+  .center.render-error
     = link_to blob_raw_path do
       %h1.light
         = sprite_icon('download')
diff --git a/app/views/projects/blob/viewers/_highlight_embed.html.haml b/app/views/projects/blob/viewers/_highlight_embed.html.haml
new file mode 100644
index 00000000000..9bd4ef6ad0b
--- /dev/null
+++ b/app/views/projects/blob/viewers/_highlight_embed.html.haml
@@ -0,0 +1,7 @@
+.file-content.code.js-syntax-highlight
+  .line-numbers
+    - if blob.data.present?
+      - blob.data.each_line.each_with_index do |_, index|
+        %span.diff-line-num= index + 1
+  .blob-content{ data: { blob_id: blob.id } }
+    = highlight(blob.path, blob.data, repository: nil, plain: blob.no_highlighting?)
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 883dfb3e6c8..88f9b7dfc9f 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -4,22 +4,21 @@
 - diverging_commit_counts = @repository.diverging_commit_counts(branch)
 - number_commits_behind = diverging_commit_counts[:behind]
 - number_commits_ahead = diverging_commit_counts[:ahead]
-- merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
+- merge_project = merge_request_source_project_for_project(@project)
 %li{ class: "branch-item js-branch-#{branch.name}" }
   .branch-info
     .branch-title
-      = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name' do
-        = sprite_icon('fork', size: 12)
+      = sprite_icon('fork', size: 12)
+      = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name prepend-left-8' do
         = branch.name
-      &nbsp;
       - if branch.name == @repository.root_ref
-        %span.label.label-primary default
+        %span.badge.badge-primary.prepend-left-5 default
       - elsif merged
-        %span.label.label-info.has-tooltip{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
+        %span.badge.badge-info.has-tooltip.prepend-left-5{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
           = s_('Branches|merged')
 
       - if protected_branch?(@project, branch)
-        %span.label.label-success
+        %span.badge.badge-success.prepend-left-5
           = s_('Branches|protected')
 
     .block-truncated
@@ -29,7 +28,7 @@
         = s_('Branches|Cant find HEAD commit for this branch')
 
   - if branch.name != @repository.root_ref
-    .divergence-graph{ title: s_('%{number_commits_behind} commits behind %{default_branch}, %{number_commits_ahead} commits ahead') % { number_commits_behind: diverging_count_label(number_commits_behind),
+    .divergence-graph.d-none.d-md-block{ title: s_('%{number_commits_behind} commits behind %{default_branch}, %{number_commits_ahead} commits ahead') % { number_commits_behind: diverging_count_label(number_commits_behind),
       default_branch: @repository.root_ref,
       number_commits_ahead: diverging_count_label(number_commits_ahead) } }
       .graph-side
@@ -40,7 +39,7 @@
         .bar.bar-ahead{ style: "width: #{number_commits_ahead * bar_graph_width_factor}%" }
         %span.count.count-ahead= diverging_count_label(number_commits_ahead)
 
-  .controls.hidden-xs<
+  .controls.d-none.d-md-block<
     - if merge_project && create_mr_button?(@repository.root_ref, branch.name)
       = link_to create_mr_path(@repository.root_ref, branch.name), class: 'btn btn-default' do
         = _('Merge request')
@@ -61,7 +60,7 @@
           title: s_('Branches|The default branch cannot be deleted') }
           = icon("trash-o")
       - elsif protected_branch?(@project, branch)
-        - if can?(current_user, :delete_protected_branch, @project)
+        - if can?(current_user, :push_to_delete_protected_branch, @project)
           %button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip",
             title: s_('Branches|Delete protected branch'),
             data: { toggle: "modal",
@@ -73,7 +72,7 @@
         - else
           %button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip disabled",
             disabled: true,
-            title: s_('Branches|Only a project master or owner can delete a protected branch') }
+            title: s_('Branches|Only a project maintainer or owner can delete a protected branch') }
             = icon("trash-o")
       - else
         = link_to project_branch_path(@project, branch.name),
diff --git a/app/views/projects/branches/_delete_protected_modal.html.haml b/app/views/projects/branches/_delete_protected_modal.html.haml
index e0008e322a0..8aa79d2d464 100644
--- a/app/views/projects/branches/_delete_protected_modal.html.haml
+++ b/app/views/projects/branches/_delete_protected_modal.html.haml
@@ -2,11 +2,12 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{ data: { dismiss: 'modal' } } ×
         %h3.page-title
           - title_branch_name = capture do
             %span.js-branch-name.ref-name>[branch name]
           = s_("Branches|Delete protected branch '%{branch_name}'?").html_safe % { branch_name: title_branch_name }
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
 
       .modal-body
         %p
diff --git a/app/views/projects/branches/_panel.html.haml b/app/views/projects/branches/_panel.html.haml
index 12e5a8e8d69..398f76d379a 100644
--- a/app/views/projects/branches/_panel.html.haml
+++ b/app/views/projects/branches/_panel.html.haml
@@ -7,13 +7,13 @@
 
 - return unless branches.any?
 
-.panel.panel-default.prepend-top-10
-  .panel-heading
-    %h4.panel-title
+.card.prepend-top-10
+  .card-header
+    %h4.card-title
       = panel_title
   %ul.content-list.all-branches
     - branches.first(overview_max_branches).each do |branch|
       = render "projects/branches/branch", branch: branch, merged: project.repository.merged_to_root_ref?(branch)
   - if branches.size > overview_max_branches
-    .panel-footer.text-center
+    .card-footer.text-center
       = link_to show_more_text, project_branches_filtered_path(project, state: state), id: "state-#{state}", data: { state: state }
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 5dcc72d8263..d6568c9f64a 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -3,7 +3,7 @@
 
 %div{ class: container_class }
   .top-area.adjust
-    %ul.nav-links.issues-state-filters
+    %ul.nav-links.issues-state-filters.nav.nav-tabs
       %li{ class: active_when(@mode == 'overview') }>
         = link_to s_('Branches|Overview'), project_branches_path(@project), title: s_('Branches|Show overview of the branches')
 
@@ -26,7 +26,7 @@
             %span.light
               = branches_sort_options_hash[@sort]
             = icon('chevron-down')
-          %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
             %li.dropdown-header
               = s_('Branches|Sort by')
             - branches_sort_options_hash.each do |value, title|
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index c7fc5a98ca8..65b414c8af2 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -9,14 +9,14 @@
   New Branch
 %hr
 
-= form_tag namespace_project_branches_path, method: :post, id: "new-branch-form", class: "form-horizontal js-create-branch-form js-requires-input" do
-  .form-group
-    = label_tag :branch_name, nil, class: 'control-label'
+= form_tag namespace_project_branches_path, method: :post, id: "new-branch-form", class: "js-create-branch-form js-requires-input" do
+  .form-group.row
+    = label_tag :branch_name, nil, class: 'col-form-label col-sm-2'
     .col-sm-10
       = text_field_tag :branch_name, params[:branch_name], required: true, autofocus: true, class: 'form-control js-branch-name'
-      .help-block.text-danger.js-branch-name-error
-  .form-group
-    = label_tag :ref, 'Create from', class: 'control-label'
+      .form-text.text-muted.text-danger.js-branch-name-error
+  .form-group.row
+    = label_tag :ref, 'Create from', class: 'col-form-label col-sm-2'
     .col-sm-10.create-from
       .dropdown
         = hidden_field_tag :ref, default_ref
@@ -24,7 +24,7 @@
           .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-text.text-muted Existing branch name, tag, or commit SHA
   .form-actions
     = button_tag 'Create branch', class: 'btn btn-create', tabindex: 3
     = link_to 'Cancel', project_branches_path(@project), class: 'btn btn-cancel'
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index fa9a9bfc8f7..f7551434d47 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -1,25 +1,26 @@
 - pipeline = local_assigns.fetch(:pipeline) { project.latest_successful_pipeline_for(ref) }
 
 - if !project.empty_repo? && can?(current_user, :download_code, project)
+  - archive_prefix = "#{project.path}-#{ref.tr('/', '-')}"
   .project-action-button.dropdown.inline>
-    %button.btn.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download') }
+    %button.btn.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static' }
       = sprite_icon('download')
       = icon("caret-down")
       %span.sr-only=  _('Select Archive Format')
-    %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
+    %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
       %li.dropdown-header
         #{ _('Source code') }
       %li
-        = link_to archive_project_repository_path(project, ref: ref, format: 'zip'), rel: 'nofollow', download: '' do
+        = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'zip'), rel: 'nofollow', download: '' do
           %span=  _('Download zip')
       %li
-        = link_to archive_project_repository_path(project, ref: ref, format: 'tar.gz'), rel: 'nofollow', download: '' do
+        = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'tar.gz'), rel: 'nofollow', download: '' do
           %span= _('Download tar.gz')
       %li
-        = link_to archive_project_repository_path(project, ref: ref, format: 'tar.bz2'), rel: 'nofollow', download: '' do
+        = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'tar.bz2'), rel: 'nofollow', download: '' do
           %span= _('Download tar.bz2')
       %li
-        = link_to archive_project_repository_path(project, ref: ref, format: 'tar'), rel: 'nofollow', download: '' do
+        = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'tar'), rel: 'nofollow', download: '' do
           %span= _('Download tar')
 
       - if pipeline && pipeline.latest_builds_with_artifacts.any?
diff --git a/app/views/projects/buttons/_dropdown.html.haml b/app/views/projects/buttons/_dropdown.html.haml
index 18e948ce35a..8b9c52f0802 100644
--- a/app/views/projects/buttons/_dropdown.html.haml
+++ b/app/views/projects/buttons/_dropdown.html.haml
@@ -1,13 +1,17 @@
-- if current_user
+- can_create_issue = show_new_issue_link?(@project)
+- can_create_project_snippet = can?(current_user, :create_project_snippet, @project)
+- can_push_code = can?(current_user, :push_code, @project)
+- create_mr_from_new_fork = can?(current_user, :fork_project, @project) && can?(current_user, :create_merge_request_in, @project)
+- merge_project = merge_request_source_project_for_project(@project)
+
+- show_menu = can_create_issue || can_create_project_snippet || can_push_code || create_mr_from_new_fork || merge_project
+
+- if show_menu
   .project-action-button.dropdown.inline
-    %a.btn.dropdown-toggle.has-tooltip{ href: '#', title: _('Create new...'), 'data-toggle' => 'dropdown', 'data-container' => 'body', 'aria-label' => _('Create new...') }
+    %a.btn.dropdown-toggle.has-tooltip{ href: '#', title: _('Create new...'), 'data-toggle' => 'dropdown', 'data-container' => 'body', 'aria-label' => _('Create new...'), 'data-display' => 'static' }
       = icon('plus')
       = icon("caret-down")
-    %ul.dropdown-menu.dropdown-menu-align-right.project-home-dropdown
-      - can_create_issue = can?(current_user, :create_issue, @project)
-      - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
-      - can_create_project_snippet = can?(current_user, :create_project_snippet, @project)
-
+    %ul.dropdown-menu.dropdown-menu-right.project-home-dropdown
       - if can_create_issue || merge_project || can_create_project_snippet
         %li.dropdown-header= _('This project')
 
@@ -20,17 +24,17 @@
       - if can_create_project_snippet
         %li= link_to _('New snippet'), new_project_snippet_path(@project)
 
-      - if can?(current_user, :push_code, @project)
+      - if can_push_code
         %li.dropdown-header= _('This repository')
 
-      - if can?(current_user, :push_code, @project)
+      - if can_push_code
         %li= link_to _('New file'), project_new_blob_path(@project, @project.default_branch || 'master')
         - unless @project.empty_repo?
           %li= link_to _('New branch'), new_project_branch_path(@project)
           %li= link_to _('New tag'), new_project_tag_path(@project)
-      - elsif current_user && current_user.already_forked?(@project)
+      - elsif can_collaborate_with_project?(@project)
         %li= link_to _('New file'), project_new_blob_path(@project, @project.default_branch || 'master')
-      - elsif can?(current_user, :fork_project, @project)
+      - elsif create_mr_from_new_fork
         - continue_params = { to:         project_new_blob_path(@project, @project.default_branch || 'master'),
                               notice:     edit_in_new_fork_notice,
                               notice_now: edit_in_new_fork_notice_now }
diff --git a/app/views/projects/buttons/_xcode_link.html.haml b/app/views/projects/buttons/_xcode_link.html.haml
new file mode 100644
index 00000000000..a8b32fb0ef5
--- /dev/null
+++ b/app/views/projects/buttons/_xcode_link.html.haml
@@ -0,0 +1,2 @@
+%a.btn.btn-default{ href: xcode_uri_to_repo(@project) }
+  = _("Open in Xcode")
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index 9126476e79e..44c1453e239 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -41,14 +41,14 @@
     .label-container
       - if job.tags.any?
         - job.tags.each do |tag|
-          %span.label.label-primary
+          %span.badge.badge-primary
             = tag
       - if job.try(:trigger_request)
-        %span.label.label-info triggered
+        %span.badge.badge-info triggered
       - if job.try(:allow_failure)
-        %span.label.label-danger allowed to fail
+        %span.badge.badge-danger allowed to fail
       - if job.action?
-        %span.label.label-info manual
+        %span.badge.badge-info manual
 
   - if pipeline_link
     %td
@@ -93,7 +93,7 @@
       #{job.coverage}%
 
   %td
-    .pull-right
+    .float-right
       - if can?(current_user, :read_build, job) && job.artifacts?
         = link_to download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: 'Download artifacts', class: 'btn btn-build' do
           = sprite_icon('download')
diff --git a/app/views/ci/lints/_create.html.haml b/app/views/projects/ci/lints/_create.html.haml
index 30bf1384b22..30bf1384b22 100644
--- a/app/views/ci/lints/_create.html.haml
+++ b/app/views/projects/ci/lints/_create.html.haml
diff --git a/app/views/projects/ci/lints/show.html.haml b/app/views/projects/ci/lints/show.html.haml
new file mode 100644
index 00000000000..cbda6bf2107
--- /dev/null
+++ b/app/views/projects/ci/lints/show.html.haml
@@ -0,0 +1,26 @@
+- page_title "CI Lint"
+- page_description "Validate your GitLab CI configuration file"
+- content_for :library_javascripts do
+  = page_specific_javascript_tag('lib/ace.js')
+
+%h2.pt-3.pb-3 Check your .gitlab-ci.yml
+
+.project-ci-linter
+  = form_tag project_ci_lint_path(@project), method: :post do
+    .row
+      .col-sm-12
+        .file-holder
+          .js-file-title.file-title.clearfix
+            Content of .gitlab-ci.yml
+          #ci-editor.ci-editor= @content
+        = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)
+      .col-sm-12
+        .float-left.prepend-top-10
+          = submit_tag('Validate', class: 'btn btn-success submit-yml')
+        .float-right.prepend-top-10
+          = button_tag('Clear', type: 'button', class: 'btn btn-default clear-yml')
+
+  .row.prepend-top-20
+    .col-sm-12
+      .results.project-ci-template
+        = render partial: 'create' if defined?(@status)
diff --git a/app/views/projects/clusters/_advanced_settings.html.haml b/app/views/projects/clusters/_advanced_settings.html.haml
index 14979bee714..243e8cd9ba0 100644
--- a/app/views/projects/clusters/_advanced_settings.html.haml
+++ b/app/views/projects/clusters/_advanced_settings.html.haml
@@ -7,8 +7,8 @@
         - link_gke = link_to(s_('ClusterIntegration|Google Kubernetes Engine'), @cluster.gke_cluster_url, target: '_blank', rel: 'noopener noreferrer')
         = s_('ClusterIntegration|Manage your Kubernetes cluster by visiting %{link_gke}').html_safe % { link_gke: link_gke }
 
-  .well.form-group
-    %label.text-danger
+  .sub-section.form-group
+    %h4.text-danger
       = s_('ClusterIntegration|Remove Kubernetes cluster integration')
     %p
       = s_("ClusterIntegration|Remove this Kubernetes cluster's configuration from this project. This will not delete your actual Kubernetes cluster.")
diff --git a/app/views/projects/clusters/_empty_state.html.haml b/app/views/projects/clusters/_empty_state.html.haml
index 112dde66ff7..b8a3556a206 100644
--- a/app/views/projects/clusters/_empty_state.html.haml
+++ b/app/views/projects/clusters/_empty_state.html.haml
@@ -1,11 +1,12 @@
 .row.empty-state
-  .col-xs-12
+  .col-12
     .svg-content= image_tag 'illustrations/clusters_empty.svg'
-  .col-xs-12
+  .col-12
     .text-content
       %h4.text-center= s_('ClusterIntegration|Integrate Kubernetes cluster automation')
       - link_to_help_page = link_to(_('Learn more about Kubernetes'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
       %p= s_('ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way. %{link_to_help_page}').html_safe % { link_to_help_page: link_to_help_page}
 
-      .text-center
-        = link_to s_('ClusterIntegration|Add Kubernetes cluster'), new_project_cluster_path(@project), class: 'btn btn-success'
+      - if can?(current_user, :create_cluster, @project)
+        .text-center
+          = link_to s_('ClusterIntegration|Add Kubernetes cluster'), new_project_cluster_path(@project), class: 'btn btn-success'
diff --git a/app/views/projects/clusters/_gcp_signup_offer_banner.html.haml b/app/views/projects/clusters/_gcp_signup_offer_banner.html.haml
new file mode 100644
index 00000000000..9298d93663d
--- /dev/null
+++ b/app/views/projects/clusters/_gcp_signup_offer_banner.html.haml
@@ -0,0 +1,12 @@
+- link = link_to(s_('ClusterIntegration|sign up'), 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', target: '_blank', rel: 'noopener noreferrer')
+.gcp-signup-offer.alert.alert-block.alert-dismissable.prepend-top-default.append-bottom-default{ role: 'alert' }
+  %button.close{ type: "button", data: { feature_id: UserCalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: user_callouts_path } }  &times;
+  %div
+    .col-sm-2.gcp-logo
+      = image_tag 'illustrations/logos/google-cloud-platform_logo.svg'
+    .col-sm-10
+      %h4= s_('ClusterIntegration|Redeem up to $500 in free credit for Google Cloud Platform')
+      %p= s_('ClusterIntegration|Every new Google Cloud Platform (GCP) account receives $300 in credit upon %{sign_up_link}. In partnership with Google, GitLab is able to offer an additional $200 for both new and existing GCP accounts to get started with GitLab\'s Google Kubernetes Engine Integration.').html_safe % { sign_up_link: link }
+      %a.btn.btn-info{ href: 'https://goo.gl/AaJzRW', target: '_blank', rel: 'noopener noreferrer' }
+        Apply for credit
+
diff --git a/app/views/projects/clusters/_integration_form.html.haml b/app/views/projects/clusters/_integration_form.html.haml
index db97203a2aa..b46b45fea49 100644
--- a/app/views/projects/clusters/_integration_form.html.haml
+++ b/app/views/projects/clusters/_integration_form.html.haml
@@ -1,6 +1,6 @@
 = form_for @cluster, url: namespace_project_cluster_path(@project.namespace, @project, @cluster), as: :cluster do |field|
   = form_errors(@cluster)
-  .form-group.append-bottom-20
+  .form-group
     %h5= s_('ClusterIntegration|Integration status')
     %p
       - if @cluster.enabled?
@@ -10,7 +10,7 @@
           = s_('ClusterIntegration|Kubernetes cluster integration is enabled for this project.')
       - else
         = s_('ClusterIntegration|Kubernetes cluster integration is disabled for this project.')
-    %label.append-bottom-10.js-cluster-enable-toggle-area
+    %label.append-bottom-0.js-cluster-enable-toggle-area
       %button{ type: 'button',
         class: "js-project-feature-toggle project-feature-toggle #{'is-checked' if @cluster.enabled?} #{'is-disabled' unless can?(current_user, :update_cluster, @cluster)}",
         "aria-label": s_("ClusterIntegration|Toggle Kubernetes cluster"),
@@ -20,19 +20,26 @@
           = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
           = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
 
-  .form-group
-    %h5= s_('ClusterIntegration|Security')
-    %p
-      = s_("ClusterIntegration|The default cluster configuration grants access to a wide set of functionalities needed to successfully build and deploy a containerised application.")
-      = link_to s_("ClusterIntegration|Learn more about security configuration"),  help_page_path('user/project/clusters/index.md', anchor: 'security-implications')
-
-  .form-group
-    %h5= s_('ClusterIntegration|Environment scope')
-    %p
-      = s_("ClusterIntegration|Choose which of your project's environments will use this Kubernetes cluster.")
-      = link_to s_("ClusterIntegration|Learn more about environments"), help_page_path('ci/environments')
-    = field.text_field :environment_scope, class: 'form-control js-select-on-focus', readonly: !has_multiple_clusters?(@project), placeholder: s_('ClusterIntegration|Environment scope')
+  - if has_multiple_clusters?(@project)
+    .form-group
+      %h5= s_('ClusterIntegration|Environment scope')
+      %p
+        = s_("ClusterIntegration|Choose which of your project's environments will use this Kubernetes cluster.")
+        = link_to s_("ClusterIntegration|Learn more about environments"), help_page_path('ci/environments')
+      = field.text_field :environment_scope, class: 'form-control js-select-on-focus', placeholder: s_('ClusterIntegration|Environment scope')
 
   - if can?(current_user, :update_cluster, @cluster)
     .form-group
       = field.submit _('Save changes'), class: 'btn btn-success'
+
+  - unless has_multiple_clusters?(@project)
+    %h5= s_('ClusterIntegration|Environment scope')
+    %p
+      %code *
+      is the default environment scope for this cluster. This means that all jobs, regardless of their environment, will use this cluster.
+      = link_to 'More information', ('https://docs.gitlab.com/ee/user/project/clusters/#setting-the-environment-scope')
+
+  %h5= s_('ClusterIntegration|Security')
+  %p
+    = s_("ClusterIntegration|The default cluster configuration grants access to a wide set of functionalities needed to successfully build and deploy a containerised application.")
+    = link_to s_("ClusterIntegration|Learn more about security configuration"),  help_page_path('user/project/clusters/index.md', anchor: 'security-implications')
diff --git a/app/views/projects/clusters/_sidebar.html.haml b/app/views/projects/clusters/_sidebar.html.haml
index 73cd7c50922..3d10348212f 100644
--- a/app/views/projects/clusters/_sidebar.html.haml
+++ b/app/views/projects/clusters/_sidebar.html.haml
@@ -1,7 +1,9 @@
+- clusters_help_url = help_page_path('user/project/clusters/index.md')
+- help_link_start = "<a href=\"%{url}\" target=\"_blank\" rel=\"noopener noreferrer\">".html_safe
+- help_link_end = '</a>'.html_safe
 %h4.prepend-top-0
   = s_('ClusterIntegration|Kubernetes cluster integration')
 %p
   = s_('ClusterIntegration|With a Kubernetes cluster associated to this project, you can use review apps, deploy your applications, run your pipelines, and much more in an easy way.')
 %p
-  - link = link_to(_('Kubernetes'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
-  = s_('ClusterIntegration|Learn more about %{link_to_documentation}').html_safe % { link_to_documentation: link }
+  = s_('ClusterIntegration|Learn more about %{help_link_start}Kubernetes%{help_link_end}.').html_safe % { help_link_start: help_link_start % { url: clusters_help_url }, help_link_end: help_link_end }
diff --git a/app/views/projects/clusters/gcp/_form.html.haml b/app/views/projects/clusters/gcp/_form.html.haml
index 5739a57dcfe..b8e40b0a38b 100644
--- a/app/views/projects/clusters/gcp/_form.html.haml
+++ b/app/views/projects/clusters/gcp/_form.html.haml
@@ -1,35 +1,63 @@
+= javascript_include_tag 'https://apis.google.com/js/api.js'
+- external_link_icon = icon('external-link')
+- zones_link_url = 'https://cloud.google.com/compute/docs/regions-zones/regions-zones'
+- machine_type_link_url = 'https://cloud.google.com/compute/docs/machine-types'
+- pricing_link_url = 'https://cloud.google.com/compute/pricing#machinetype'
+- help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
+- help_link_end = ' %{external_link_icon}</a>'.html_safe % { external_link_icon: external_link_icon }
+
 %p
   - link_to_help_page = link_to(s_('ClusterIntegration|help page'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
   = s_('ClusterIntegration|Read our %{link_to_help_page} on Kubernetes cluster integration.').html_safe % { link_to_help_page: link_to_help_page}
 
-= form_for @cluster, html: { class: 'prepend-top-20' }, url: gcp_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
+= form_for @cluster, html: { class: 'js-gke-cluster-creation prepend-top-20', data: { token: token_in_session } }, url: gcp_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
   = form_errors(@cluster)
   .form-group
-    = field.label :name, s_('ClusterIntegration|Kubernetes cluster name')
+    = field.label :name, s_('ClusterIntegration|Kubernetes cluster name'), class: 'label-light'
     = field.text_field :name, class: 'form-control', placeholder: s_('ClusterIntegration|Kubernetes cluster name')
   .form-group
-    = field.label :environment_scope, s_('ClusterIntegration|Environment scope')
+    = field.label :environment_scope, s_('ClusterIntegration|Environment scope'), class: 'label-light'
     = field.text_field :environment_scope, class: 'form-control', readonly: !has_multiple_clusters?(@project), placeholder: s_('ClusterIntegration|Environment scope')
 
   = field.fields_for :provider_gcp, @cluster.provider_gcp do |provider_gcp_field|
     .form-group
-      = provider_gcp_field.label :gcp_project_id, s_('ClusterIntegration|Google Cloud Platform project ID')
-      = link_to(s_('ClusterIntegration|See your projects'), 'https://console.cloud.google.com/home/dashboard', target: '_blank', rel: 'noopener noreferrer')
-      = provider_gcp_field.text_field :gcp_project_id, class: 'form-control', placeholder: s_('ClusterIntegration|Project ID')
+      = provider_gcp_field.label :gcp_project_id, s_('ClusterIntegration|Google Cloud Platform project'), class: 'label-light'
+      .js-gcp-project-id-dropdown-entry-point{ data: { docsUrl: 'https://console.cloud.google.com/home/dashboard' } }
+        = provider_gcp_field.hidden_field :gcp_project_id
+        .dropdown
+          %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
+            %span.dropdown-toggle-text
+              = _('Select project')
+            = icon('chevron-down')
+        %span.form-text.text-muted &nbsp;
 
     .form-group
-      = provider_gcp_field.label :zone, s_('ClusterIntegration|Zone')
-      = link_to(s_('ClusterIntegration|See zones'), 'https://cloud.google.com/compute/docs/regions-zones/regions-zones', target: '_blank', rel: 'noopener noreferrer')
-      = provider_gcp_field.text_field :zone, class: 'form-control', placeholder: 'us-central1-a'
+      = provider_gcp_field.label :zone, s_('ClusterIntegration|Zone'), class: 'label-light'
+      .js-gcp-zone-dropdown-entry-point
+        = provider_gcp_field.hidden_field :zone
+        .dropdown
+          %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
+            %span.dropdown-toggle-text
+              = _('Select project to choose zone')
+            = icon('chevron-down')
+      %p.form-text.text-muted
+        = s_('ClusterIntegration|Learn more about %{help_link_start}zones%{help_link_end}.').html_safe % { help_link_start: help_link_start % { url: zones_link_url }, help_link_end: help_link_end }
 
     .form-group
-      = provider_gcp_field.label :num_nodes, s_('ClusterIntegration|Number of nodes')
+      = provider_gcp_field.label :num_nodes, s_('ClusterIntegration|Number of nodes'), class: 'label-light'
       = provider_gcp_field.text_field :num_nodes, class: 'form-control', placeholder: '3'
 
     .form-group
-      = provider_gcp_field.label :machine_type, s_('ClusterIntegration|Machine type')
-      = link_to(s_('ClusterIntegration|See machine types'), 'https://cloud.google.com/compute/docs/machine-types', target: '_blank', rel: 'noopener noreferrer')
-      = provider_gcp_field.text_field :machine_type, class: 'form-control', placeholder: 'n1-standard-4'
+      = provider_gcp_field.label :machine_type, s_('ClusterIntegration|Machine type'), class: 'label-light'
+      .js-gcp-machine-type-dropdown-entry-point
+        = provider_gcp_field.hidden_field :machine_type
+        .dropdown
+          %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
+            %span.dropdown-toggle-text
+              = _('Select project and zone to choose machine type')
+            = icon('chevron-down')
+      %p.form-text.text-muted
+        = s_('ClusterIntegration|Learn more about %{help_link_start_machine_type}machine types%{help_link_end} and %{help_link_start_pricing}pricing%{help_link_end}.').html_safe % { help_link_start_machine_type: help_link_start % { url: machine_type_link_url }, help_link_start_pricing: help_link_start % { url: pricing_link_url }, help_link_end: help_link_end }
 
     .form-group
-      = field.submit s_('ClusterIntegration|Create Kubernetes cluster'), class: 'btn btn-success'
+      = field.submit s_('ClusterIntegration|Create Kubernetes cluster'), class: 'js-gke-cluster-creation-submit btn btn-success', disabled: true
diff --git a/app/views/projects/clusters/gcp/_show.html.haml b/app/views/projects/clusters/gcp/_show.html.haml
index 78cd687ef93..877e0cc876c 100644
--- a/app/views/projects/clusters/gcp/_show.html.haml
+++ b/app/views/projects/clusters/gcp/_show.html.haml
@@ -3,8 +3,8 @@
     = s_('ClusterIntegration|Kubernetes cluster name')
   .input-group
     %input.form-control.cluster-name.js-select-on-focus{ value: @cluster.name, readonly: true }
-    %span.input-group-btn
-      = clipboard_button(text: @cluster.name, title: s_('ClusterIntegration|Copy Kubernetes cluster name'), class: 'btn-default')
+    %span.input-group-append
+      = clipboard_button(text: @cluster.name, title: s_('ClusterIntegration|Copy Kubernetes cluster name'), class: 'input-group-text btn-default')
 
 = form_for @cluster, url: namespace_project_cluster_path(@project.namespace, @project, @cluster), as: :cluster do |field|
   = form_errors(@cluster)
@@ -14,22 +14,22 @@
       = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')
       .input-group
         = platform_kubernetes_field.text_field :api_url, class: 'form-control js-select-on-focus', placeholder: s_('ClusterIntegration|API URL'), readonly: true
-        %span.input-group-btn
-          = clipboard_button(text: @cluster.platform_kubernetes.api_url, title: s_('ClusterIntegration|Copy API URL'), class: 'btn-default')
+        %span.input-group-append
+          = clipboard_button(text: @cluster.platform_kubernetes.api_url, title: s_('ClusterIntegration|Copy API URL'), class: 'input-group-text btn-default')
 
     .form-group
       = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
       .input-group
         = platform_kubernetes_field.text_area :ca_cert, class: 'form-control js-select-on-focus', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'), readonly: true
-        %span.input-group-addon.clipboard-addon
-          = clipboard_button(text: @cluster.platform_kubernetes.ca_cert, title: s_('ClusterIntegration|Copy CA Certificate'), class: 'btn-blank')
+        %span.input-group-append.clipboard-addon
+          = clipboard_button(text: @cluster.platform_kubernetes.ca_cert, title: s_('ClusterIntegration|Copy CA Certificate'), class: 'input-group-text btn-blank')
 
     .form-group
       = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
       .input-group
         = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token js-select-on-focus', type: 'password', placeholder: s_('ClusterIntegration|Token'), readonly: true
-        %span.input-group-btn
-          %button.btn.btn-default.js-show-cluster-token{ type: 'button' }
+        %span.input-group-append
+          %button.btn.btn-default.input-group-text.js-show-cluster-token{ type: 'button' }
             = s_('ClusterIntegration|Show')
           = clipboard_button(text: @cluster.platform_kubernetes.token, title: s_('ClusterIntegration|Copy Token'), class: 'btn-default')
 
diff --git a/app/views/projects/clusters/gcp/login.html.haml b/app/views/projects/clusters/gcp/login.html.haml
index dada51f39da..96c7a648676 100644
--- a/app/views/projects/clusters/gcp/login.html.haml
+++ b/app/views/projects/clusters/gcp/login.html.haml
@@ -1,6 +1,8 @@
 - breadcrumb_title 'Kubernetes'
 - page_title _("Login")
 
+= render_gcp_signup_offer
+
 .row.prepend-top-default
   .col-sm-4
     = render 'projects/clusters/sidebar'
@@ -8,12 +10,12 @@
     = render 'projects/clusters/dropdown', dropdown_text: s_('ClusterIntegration|Create Kubernetes cluster on Google Kubernetes Engine')
     = render 'header'
 .row
-  .col-sm-8.col-sm-offset-4.signin-with-google
+  .col-sm-8.offset-sm-4.signin-with-google
     - if @authorize_url
-      = link_to @authorize_url do
-        = image_tag('auth_buttons/signin_with_google.png', width: '191px')
+      = link_to(image_tag('auth_buttons/signin_with_google.png', width: '191px'), @authorize_url)
       = _('or')
       = link_to('create a new Google account', 'https://accounts.google.com/SignUpWithoutGmail?service=cloudconsole&continue=https%3A%2F%2Fconsole.cloud.google.com%2Ffreetrial%3Futm_campaign%3D2018_cpanel%26utm_source%3Dgitlab%26utm_medium%3Dreferral', target: '_blank', rel: 'noopener noreferrer')
     - else
-      - link = link_to(s_('ClusterIntegration|properly configured'), help_page_path("integration/google"), target: '_blank', rel: 'noopener noreferrer')
-      = s_('Google authentication is not %{link_to_documentation}. Ask your GitLab administrator if you want to use this service.').html_safe % { link_to_documentation: link }
+      .settings-message.text-center
+        - link = link_to(s_('ClusterIntegration|properly configured'), help_page_path("integration/google"), target: '_blank', rel: 'noopener noreferrer')
+        = s_('Google authentication is not %{link_to_documentation}. Ask your GitLab administrator if you want to use this service.').html_safe % { link_to_documentation: link }
diff --git a/app/views/projects/clusters/index.html.haml b/app/views/projects/clusters/index.html.haml
index 17b244f4bf7..a55de84b5cd 100644
--- a/app/views/projects/clusters/index.html.haml
+++ b/app/views/projects/clusters/index.html.haml
@@ -1,6 +1,8 @@
 - breadcrumb_title 'Kubernetes'
 - page_title "Kubernetes Clusters"
 
+= render_gcp_signup_offer
+
 .clusters-container
   - if @clusters.empty?
     = render "empty_state"
diff --git a/app/views/projects/clusters/new.html.haml b/app/views/projects/clusters/new.html.haml
index ebb7d247125..828e2a84753 100644
--- a/app/views/projects/clusters/new.html.haml
+++ b/app/views/projects/clusters/new.html.haml
@@ -1,6 +1,8 @@
 - breadcrumb_title 'Kubernetes'
 - page_title _("Kubernetes Cluster")
 
+= render_gcp_signup_offer
+
 .row.prepend-top-default
   .col-sm-4
     = render 'sidebar'
@@ -8,6 +10,6 @@
     %h4.prepend-top-0= s_('ClusterIntegration|Choose how to set up Kubernetes cluster integration')
 
     %p= s_('ClusterIntegration|Create a new Kubernetes cluster on Google Kubernetes Engine right from GitLab')
-    = link_to s_('ClusterIntegration|Create on GKE'), gcp_new_namespace_project_clusters_path(@project.namespace, @project), class: 'btn append-bottom-20'
+    = link_to s_('ClusterIntegration|Create on Google Kubernetes Engine'), gcp_new_namespace_project_clusters_path(@project.namespace, @project), class: 'btn append-bottom-20'
     %p= s_('ClusterIntegration|Enter the details for an existing Kubernetes cluster')
     = link_to s_('ClusterIntegration|Add an existing Kubernetes cluster'), user_new_namespace_project_clusters_path(@project.namespace, @project), class: 'btn append-bottom-20'
diff --git a/app/views/projects/clusters/show.html.haml b/app/views/projects/clusters/show.html.haml
index 2ee0eafcf1a..08d2deff6f8 100644
--- a/app/views/projects/clusters/show.html.haml
+++ b/app/views/projects/clusters/show.html.haml
@@ -11,6 +11,7 @@
   install_ingress_path: install_applications_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster, :ingress),
   install_prometheus_path: install_applications_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster, :prometheus),
   install_runner_path: install_applications_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster, :runner),
+  install_jupyter_path: install_applications_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster, :jupyter),
   toggle_status: @cluster.enabled? ? 'true': 'false',
   cluster_status: @cluster.status_name,
   cluster_status_reason: @cluster.status_reason,
@@ -31,7 +32,7 @@
   %section.settings#js-cluster-details{ class: ('expanded' if expanded) }
     .settings-header
       %h4= s_('ClusterIntegration|Kubernetes cluster details')
-      %button.btn.js-settings-toggle
+      %button.btn.js-settings-toggle{ type: 'button' }
         = expanded ? 'Collapse' : 'Expand'
       %p= s_('ClusterIntegration|See and edit the details for your Kubernetes cluster')
     .settings-content
@@ -43,7 +44,7 @@
   %section.settings.no-animate#js-cluster-advanced-settings{ class: ('expanded' if expanded) }
     .settings-header
       %h4= _('Advanced settings')
-      %button.btn.js-settings-toggle
+      %button.btn.js-settings-toggle{ type: 'button' }
         = expanded ? 'Collapse' : 'Expand'
       %p= s_("ClusterIntegration|Advanced options on this Kubernetes cluster's integration")
     .settings-content
diff --git a/app/views/projects/clusters/user/_form.html.haml b/app/views/projects/clusters/user/_form.html.haml
index 2e92524ce8f..db57da99ec7 100644
--- a/app/views/projects/clusters/user/_form.html.haml
+++ b/app/views/projects/clusters/user/_form.html.haml
@@ -1,27 +1,27 @@
 = form_for @cluster, url: user_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
   = form_errors(@cluster)
   .form-group
-    = field.label :name, s_('ClusterIntegration|Kubernetes cluster name')
+    = field.label :name, s_('ClusterIntegration|Kubernetes cluster name'), class: 'label-light'
     = field.text_field :name, class: 'form-control', placeholder: s_('ClusterIntegration|Kubernetes cluster name')
   .form-group
-    = field.label :environment_scope, s_('ClusterIntegration|Environment scope')
+    = field.label :environment_scope, s_('ClusterIntegration|Environment scope'), class: 'label-light'
     = field.text_field :environment_scope, class: 'form-control', readonly: !has_multiple_clusters?(@project), placeholder: s_('ClusterIntegration|Environment scope')
 
   = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
     .form-group
-      = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')
+      = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL'), class: 'label-light'
       = platform_kubernetes_field.text_field :api_url, class: 'form-control', placeholder: s_('ClusterIntegration|API URL')
 
     .form-group
-      = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
+      = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate'), class: 'label-light'
       = platform_kubernetes_field.text_area :ca_cert, class: 'form-control', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)')
 
     .form-group
-      = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
+      = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token'), class: 'label-light'
       = platform_kubernetes_field.text_field :token, class: 'form-control', placeholder: s_('ClusterIntegration|Service token'), autocomplete: 'off'
 
     .form-group
-      = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)')
+      = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)'), class: 'label-light'
       = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: s_('ClusterIntegration|Project namespace')
 
     .form-group
diff --git a/app/views/projects/clusters/user/_header.html.haml b/app/views/projects/clusters/user/_header.html.haml
index 04c7ce96a4b..37f6a788518 100644
--- a/app/views/projects/clusters/user/_header.html.haml
+++ b/app/views/projects/clusters/user/_header.html.haml
@@ -1,5 +1,5 @@
 %h4.prepend-top-20
   = s_('ClusterIntegration|Enter the details for your Kubernetes cluster')
 %p
-  - link_to_help_page = link_to(s_('ClusterIntegration|documentation'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
+  - link_to_help_page = link_to(s_('ClusterIntegration|documentation'), help_page_path('user/project/clusters/index', anchor: 'adding-an-existing-kubernetes-cluster'), target: '_blank', rel: 'noopener noreferrer')
   = s_('ClusterIntegration|Please enter access information for your Kubernetes cluster. If you need help, you can read our %{link_to_help_page} on Kubernetes').html_safe % { link_to_help_page: link_to_help_page }
diff --git a/app/views/projects/clusters/user/_show.html.haml b/app/views/projects/clusters/user/_show.html.haml
index ebbf7e775c7..4d117f435dc 100644
--- a/app/views/projects/clusters/user/_show.html.haml
+++ b/app/views/projects/clusters/user/_show.html.haml
@@ -1,28 +1,29 @@
 = form_for @cluster, url: namespace_project_cluster_path(@project.namespace, @project, @cluster), as: :cluster do |field|
   = form_errors(@cluster)
   .form-group
-    = field.label :name, s_('ClusterIntegration|Kubernetes cluster name')
+    = field.label :name, s_('ClusterIntegration|Kubernetes cluster name'), class: 'label-light'
     = field.text_field :name, class: 'form-control', placeholder: s_('ClusterIntegration|Kubernetes cluster name')
 
   = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
     .form-group
-      = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')
+      = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL'), class: 'label-light'
       = platform_kubernetes_field.text_field :api_url, class: 'form-control', placeholder: s_('ClusterIntegration|API URL')
 
     .form-group
-      = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
+      = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate'), class: 'label-light'
       = platform_kubernetes_field.text_area :ca_cert, class: 'form-control', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)')
 
     .form-group
-      = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
+      = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token'), class: 'label-light'
       .input-group
         = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token', type: 'password', placeholder: s_('ClusterIntegration|Token'), autocomplete: 'off'
-        %span.input-group-addon.clipboard-addon
-          %button.js-show-cluster-token.btn-blank{ type: 'button' }
-            = s_('ClusterIntegration|Show')
+        %span.input-group-append.clipboard-addon
+          .input-group-text
+            %button.js-show-cluster-token.btn-blank{ type: 'button' }
+              = s_('ClusterIntegration|Show')
 
     .form-group
-      = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)')
+      = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)'), class: 'label-light'
       = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: s_('ClusterIntegration|Project namespace')
 
     .form-group
diff --git a/app/views/projects/commit/_ajax_signature.html.haml b/app/views/projects/commit/_ajax_signature.html.haml
index 36b28c731a1..eb677cff5f0 100644
--- a/app/views/projects/commit/_ajax_signature.html.haml
+++ b/app/views/projects/commit/_ajax_signature.html.haml
@@ -1,2 +1,2 @@
 - if commit.has_signature?
-  %a{ href: 'javascript:void(0)', tabindex: 0, class: commit_signature_badge_classes('js-loading-gpg-badge'), data: { toggle: 'tooltip', placement: 'auto top', title: 'GPG signature (loading...)', 'commit-sha' => commit.sha } }
+  %a{ href: 'javascript:void(0)', tabindex: 0, class: commit_signature_badge_classes('js-loading-gpg-badge'), data: { toggle: 'tooltip', placement: 'top', title: 'GPG signature (loading...)', 'commit-sha' => commit.sha } }
diff --git a/app/views/projects/commit/_change.html.haml b/app/views/projects/commit/_change.html.haml
index 21e4664d4e4..3d97e93c9e9 100644
--- a/app/views/projects/commit/_change.html.haml
+++ b/app/views/projects/commit/_change.html.haml
@@ -15,22 +15,23 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title= title
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
       .modal-body
         - if description
-          %p.append-bottom-20= description
-        = form_tag [type.underscore, @project.namespace.becomes(Namespace), @project, commit], method: :post, remote: false, class: "form-horizontal js-#{type}-form js-requires-input" do
+          %p= description
+        = form_tag [type.underscore, @project.namespace.becomes(Namespace), @project, commit], method: :post, remote: false, class: "js-#{type}-form js-requires-input" do
           .form-group.branch
-            = label_tag 'start_branch', branch_label, class: 'control-label'
-            .col-sm-10
-              = hidden_field_tag :start_branch, @project.default_branch, id: 'start_branch'
-              = dropdown_tag(@project.default_branch, options: { title: s_("BranchSwitcherTitle|Switch branch"), filter: true, placeholder: s_("BranchSwitcherPlaceholder|Search branches"), toggle_class: 'js-project-refs-dropdown dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "start_branch", selected: @project.default_branch, start_branch: @project.default_branch, refs_url: project_branches_path(@project), submit_form_on_click: false } })
+            = label_tag 'start_branch', branch_label, class: 'label-light'
 
-              - if can?(current_user, :push_code, @project)
-                = render 'shared/new_merge_request_checkbox'
-              - else
-                = hidden_field_tag 'create_merge_request', 1, id: nil
+            = hidden_field_tag :start_branch, @project.default_branch, id: 'start_branch'
+            = dropdown_tag(@project.default_branch, options: { title: s_("BranchSwitcherTitle|Switch branch"), filter: true, placeholder: s_("BranchSwitcherPlaceholder|Search branches"), toggle_class: 'js-project-refs-dropdown dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "start_branch", selected: @project.default_branch, start_branch: @project.default_branch, refs_url: project_branches_path(@project), submit_form_on_click: false } })
+
+            - if can?(current_user, :push_code, @project)
+              = render 'shared/new_merge_request_checkbox'
+            - else
+              = hidden_field_tag 'create_merge_request', 1, id: nil
           .form-actions
             = submit_tag label, class: 'btn btn-create'
             = link_to _("Cancel"), '#', class: "btn btn-cancel", "data-dismiss" => "modal"
diff --git a/app/views/projects/commit/_ci_menu.html.haml b/app/views/projects/commit/_ci_menu.html.haml
index 7338468967f..f6666921a25 100644
--- a/app/views/projects/commit/_ci_menu.html.haml
+++ b/app/views/projects/commit/_ci_menu.html.haml
@@ -1,10 +1,10 @@
-%ul.nav-links.no-top.no-bottom.commit-ci-menu
+%ul.nav-links.no-top.no-bottom.commit-ci-menu.nav.nav-tabs
   = nav_link(path: 'commit#show') do
     = link_to project_commit_path(@project, @commit.id) do
       Changes
-      %span.badge= @diffs.size
+      %span.badge.badge-pill= @diffs.size
   - if can?(current_user, :read_pipeline, @project)
     = nav_link(path: 'commit#pipelines') do
       = link_to pipelines_project_commit_path(@project, @commit.id) do
         Pipelines
-        %span.badge.js-pipelines-mr-count= @commit.pipelines.size
+        %span.badge.badge-pill.js-pipelines-mr-count= @commit.pipelines.size
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 461129a3e0e..886dd73c33b 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,3 +1,5 @@
+- can_collaborate = can_collaborate_with_project?(@project)
+
 .page-content-header.js-commit-box{ 'data-commit-path' => branches_project_commit_path(@project, @commit.id) }
   .header-main-content
     = render partial: 'signature', object: @commit.signature
@@ -5,7 +7,7 @@
       #{ s_('CommitBoxTitle|Commit') }
       %span.commit-sha= @commit.short_id
     = clipboard_button(text: @commit.id, title: _("Copy commit SHA to clipboard"))
-    %span.hidden-xs authored
+    %span.d-none.d-sm-inline authored
     #{time_ago_with_tooltip(@commit.authored_date)}
     %span= s_('ByAuthor|by')
     = author_avatar(@commit, size: 24)
@@ -19,25 +21,26 @@
 
   .header-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
-      %span.btn.disabled.btn-grouped.hidden-xs.append-right-10
+      %span.btn.disabled.btn-grouped.d-none.d-sm-block.append-right-10
         = icon('comment')
         = @notes_count
-    = link_to project_tree_path(@project, @commit), class: "btn btn-default append-right-10 hidden-xs hidden-sm" do
+    = link_to project_tree_path(@project, @commit), class: "btn btn-default append-right-10 d-none d-sm-none d-md-inline" do
       #{ _('Browse files') }
     .dropdown.inline
       %a.btn.btn-default.dropdown-toggle{ data: { toggle: "dropdown" } }
         %span= _('Options')
         = icon('caret-down')
-      %ul.dropdown-menu.dropdown-menu-align-right
-        %li.visible-xs-block.visible-sm-block
+      %ul.dropdown-menu.dropdown-menu-right
+        %li.d-block.d-sm-none.d-md-none
           = link_to project_tree_path(@project, @commit) do
             #{ _('Browse Files') }
-        - unless @commit.has_been_reverted?(current_user)
+        - if can_collaborate && !@commit.has_been_reverted?(current_user)
           %li.clearfix
             = revert_commit_link(@commit, project_commit_path(@project, @commit.id), has_tooltip: false)
-        %li.clearfix
-          = cherry_pick_commit_link(@commit, project_commit_path(@project, @commit.id), has_tooltip: false)
-        - if can_collaborate_with_project?
+        - if can_collaborate
+          %li.clearfix
+            = cherry_pick_commit_link(@commit, project_commit_path(@project, @commit.id), has_tooltip: false)
+        - if can?(current_user, :push_code, @project)
           %li.clearfix
             = link_to s_("CreateTag|Tag"), new_project_tag_path(@project, ref: @commit)
         %li.divider
@@ -49,10 +52,10 @@
 
 .commit-box{ data: { project_path: project_path(@project) } }
   %h3.commit-title
-    = markdown(@commit.title, pipeline: :single_line, author: @commit.author)
+    = markdown_field(@commit, :title)
   - if @commit.description.present?
-    %pre.commit-description
-      = preserve(markdown(@commit.description, pipeline: :single_line, author: @commit.author))
+    .commit-description<
+      = preserve(markdown_field(@commit, :description))
 
 .info-well
   .well-segment.branch-info
diff --git a/app/views/projects/commit/_signature_badge.html.haml b/app/views/projects/commit/_signature_badge.html.haml
index aac020b42c5..c4d986ef742 100644
--- a/app/views/projects/commit/_signature_badge.html.haml
+++ b/app/views/projects/commit/_signature_badge.html.haml
@@ -24,5 +24,5 @@
 
   = link_to('Learn more about signing commits', help_page_path('user/project/repository/gpg_signed_commits/index.md'), class: 'gpg-popover-help-link')
 
-%a{ href: 'javascript:void(0)', tabindex: 0, class: css_classes, data: { toggle: 'popover', html: 'true', placement: 'auto top', title: title, content: content } }
+%a{ href: 'javascript:void(0)', tabindex: 0, class: css_classes, data: { toggle: 'popover', html: 'true', placement: 'top', title: title, content: content } }
   = label
diff --git a/app/views/projects/commit/branches.html.haml b/app/views/projects/commit/branches.html.haml
index 8611129b356..0b8e5105bc0 100644
--- a/app/views/projects/commit/branches.html.haml
+++ b/app/views/projects/commit/branches.html.haml
@@ -6,7 +6,8 @@
 
 - if @branches.any? || @tags.any? || @tags_limit_exceeded
   %span
-    = link_to "…", "#", class: "js-details-expand label label-gray"
+    = link_to "#", class: "js-details-expand badge badge-gray ref-name" do
+      = sprite_icon('ellipsis_h', size: 12, css_class: 'vertical-align-middle')
     %span.js-details-content.hide
       = commit_branches_links(@project, @branches)
       - if @tags_limit_exceeded
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index abb292f8f27..541ae905246 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -17,6 +17,6 @@
 
   .limited-width-notes
     = render "shared/notes/notes_with_form", :autocomplete => true
-    - if can_collaborate_with_project?
+    - if can_collaborate_with_project?(@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.atom.builder b/app/views/projects/commits/_commit.atom.builder
index 50f7e7a3a33..640b5ecf99e 100644
--- a/app/views/projects/commits/_commit.atom.builder
+++ b/app/views/projects/commits/_commit.atom.builder
@@ -10,5 +10,5 @@ xml.entry do
     xml.email commit.author_email
   end
 
-  xml.summary markdown(commit.description, pipeline: :single_line), type: 'html'
+  xml.summary markdown_field(commit, :description), type: 'html'
 end
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 078bd0eee63..90e55fd0fb0 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -5,6 +5,7 @@
 
 - link = commit_path(project, commit, merge_request: merge_request)
 - cache_key = [project.full_path,
+               ref,
                commit.id,
                Gitlab::CurrentSettings.current_application_settings,
                @path.presence,
@@ -17,24 +18,24 @@
 = cache(cache_key, expires_in: 1.day) do
   %li.commit.flex-row.js-toggle-container{ id: "commit-#{commit.short_id}" }
 
-    .avatar-cell.hidden-xs
+    .avatar-cell.d-none.d-sm-block
       = author_avatar(commit, size: 36)
 
     .commit-detail.flex-list
-      .commit-content
-        = link_to_markdown_field(commit, :title, link, class: "commit-row-message item-title")
-        %span.commit-row-message.visible-xs-inline
+      .commit-content.qa-commit-content
+        - if view_details && merge_request
+          = link_to commit.title, project_commit_path(project, commit.id, merge_request_iid: merge_request.iid), class: "commit-row-message item-title"
+        - else
+          = link_to_markdown_field(commit, :title, link, class: "commit-row-message item-title")
+        %span.commit-row-message.d-block.d-sm-none
           &middot;
           = commit.short_id
         - if commit.status(ref)
-          .visible-xs-inline
+          .d-block.d-sm-none
             = render_commit_status(commit, ref: ref)
         - if commit.description?
-          %button.text-expander.hidden-xs.js-toggle-button{ type: "button" } ...
-
-        - if commit.description?
-          %pre.commit-row-description.js-toggle-content
-            = preserve(markdown_field(commit, :description))
+          %button.text-expander.js-toggle-button
+            = sprite_icon('ellipsis_h', size: 12)
 
         .commiter
           - commit_author_link = commit_author_link(commit, avatar: false, size: 24)
@@ -42,7 +43,11 @@
           - commit_text =  _('%{commit_author_link} authored %{commit_timeago}') % { commit_author_link: commit_author_link, commit_timeago: commit_timeago }
           #{ commit_text.html_safe }
 
-      .commit-actions.flex-row.hidden-xs
+        - if commit.description?
+          %pre.commit-row-description.js-toggle-content.prepend-top-8.append-bottom-8
+            = preserve(markdown_field(commit, :description))
+
+      .commit-actions.flex-row.d-none.d-sm-flex
         - if request.xhr?
           = render partial: 'projects/commit/signature', object: commit.signature
         - else
@@ -51,10 +56,10 @@
         - if commit.status(ref)
           = render_commit_status(commit, ref: ref)
 
-        .js-commit-pipeline-status{ data: { endpoint: pipelines_project_commit_path(project, commit.id) } }
-        = link_to commit.short_id, link, class: "commit-sha btn btn-transparent btn-link"
-        = clipboard_button(text: commit.id, title: _("Copy commit SHA to clipboard"))
-        = link_to_browse_code(project, commit)
+        .js-commit-pipeline-status{ data: { endpoint: pipelines_project_commit_path(project, commit.id, ref: ref) } }
 
-        - if view_details && merge_request
-          = link_to "View details", project_commit_path(project, commit.id, merge_request_iid: merge_request.iid), class: "btn btn-default"
+        .commit-sha-group
+          .label.label-monospace
+            = commit.short_id
+          = clipboard_button(text: commit.id, title: _("Copy commit SHA to clipboard"), class: "btn btn-default", container: "body")
+          = link_to_browse_code(project, commit)
diff --git a/app/views/projects/commits/_commit_list.html.haml b/app/views/projects/commits/_commit_list.html.haml
index 6f5835cb9be..8f8eb2c3d5a 100644
--- a/app/views/projects/commits/_commit_list.html.haml
+++ b/app/views/projects/commits/_commit_list.html.haml
@@ -1,8 +1,8 @@
 - commits, hidden = limited_commits(@commits)
 - commits = Commit.decorate(commits, @project)
 
-.panel.panel-default
-  .panel-heading
+.card
+  .card-header
     Commits (#{@commits.count})
   - if hidden > 0
     %ul.content-list
diff --git a/app/views/projects/commits/_inline_commit.html.haml b/app/views/projects/commits/_inline_commit.html.haml
index 26385d2f534..caaff082cc3 100644
--- a/app/views/projects/commits/_inline_commit.html.haml
+++ b/app/views/projects/commits/_inline_commit.html.haml
@@ -4,5 +4,5 @@
     &nbsp;
     %span.str-truncated
       = link_to_markdown_field(commit, :title, project_commit_path(project, commit.id), class: "commit-row-message")
-    .pull-right
+    .float-right
       #{time_ago_with_tooltip(commit.committed_date)}
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index ab371521840..9d254463fb6 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -15,7 +15,7 @@
 
           %ul.breadcrumb.repo-breadcrumb
             = commits_breadcrumbs
-        .tree-controls.hidden-xs.hidden-sm
+        .tree-controls.d-none.d-sm-none.d-md-block
           - if @merge_request.present?
             .control
               = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn'
@@ -24,7 +24,7 @@
               = link_to _("Create merge request"), create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success'
 
           .control
-            = form_tag(project_commits_path(@project, @id), method: :get, class: 'commits-search-form', data: { 'signatures-path' => namespace_project_signatures_path }) do
+            = form_tag(project_commits_path(@project, @id), method: :get, class: 'commits-search-form js-signature-container', data: { 'signatures-path' => namespace_project_signatures_path }) do
               = search_field_tag :search, params[:search], { placeholder: _('Filter by commit message'), id: 'commits-search', class: 'form-control search-text-input input-short', spellcheck: false }
           .control
             = link_to project_commits_path(@project, @ref, rss_url_options), title: _("Commits feed"), class: 'btn' do
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index d0c8a699608..07112c98804 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -1,28 +1,29 @@
-= form_tag project_compare_index_path(@project), method: :post, class: 'form-inline js-requires-input' do
-  .clearfix
-    - if params[:to] && params[:from]
-      .compare-switch-container
-        = link_to icon('exchange'), { from: params[:to], to: params[:from] }, class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Swap revisions'
-    .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
-      .input-group.inline-input-group
-        %span.input-group-addon
+= form_tag project_compare_index_path(@project), method: :post, class: 'form-inline js-requires-input js-signature-container', data: { 'signatures-path' => signatures_namespace_project_compare_index_path } do
+  - if params[:to] && params[:from]
+    .compare-switch-container
+      = link_to icon('exchange'), { from: params[:to], to: params[:from] }, class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Swap revisions'
+  .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
+    .input-group.inline-input-group
+      %span.input-group-prepend
+        .input-group-text
           = s_("CompareBranches|Source")
-        = hidden_field_tag :to, params[:to]
-        = 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_project_path(@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 'shared/ref_dropdown'
-    .compare-ellipsis.inline ...
-    .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
-      .input-group.inline-input-group
-        %span.input-group-addon
+      = hidden_field_tag :to, params[:to]
+      = 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_project_path(@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 'shared/ref_dropdown'
+  .compare-ellipsis.inline ...
+  .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
+    .input-group.inline-input-group
+      %span.input-group-prepend
+        .input-group-text
           = s_("CompareBranches|Target")
-        = hidden_field_tag :from, params[:from]
-        = 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_project_path(@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 'shared/ref_dropdown'
-    &nbsp;
-    = button_tag s_("CompareBranches|Compare"), class: "btn btn-create commits-compare-btn"
-    - if @merge_request.present?
-      = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'prepend-left-10 btn'
-    - elsif create_mr_button?
-      = link_to _("Create merge request"), create_mr_path, class: 'prepend-left-10 btn'
+      = hidden_field_tag :from, params[:from]
+      = 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_project_path(@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 'shared/ref_dropdown'
+  &nbsp;
+  = button_tag s_("CompareBranches|Compare"), class: "btn btn-create commits-compare-btn"
+  - if @merge_request.present?
+    = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'prepend-left-10 btn'
+  - elsif create_mr_button?
+    = link_to _("Create merge request"), create_mr_path, class: 'prepend-left-10 btn'
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 8da55664878..b6bebbabed0 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -10,7 +10,7 @@
     = render "projects/commits/commit_list"
     = render "projects/diffs/diffs", diffs: @diffs, environment: @environment
   - else
-    .light-well
+    .card.bg-light
       .center
         %h4
           = s_("CompareBranches|There isn't anything to compare.")
diff --git a/app/views/projects/cycle_analytics/_overview.html.haml b/app/views/projects/cycle_analytics/_overview.html.haml
index 9007f2c24ba..5b0d73b8c68 100644
--- a/app/views/projects/cycle_analytics/_overview.html.haml
+++ b/app/views/projects/cycle_analytics/_overview.html.haml
@@ -1,7 +1,7 @@
 .cycle-analytics-overview
   .container
     .row
-      .col-md-10.col-md-offset-1
+      .col-md-10.offset-md-1
         .row.overview-details
           .col-md-6.overview-text
             %h4 Introducing Cycle Analytics
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 5041f322612..bdf021fd87f 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -8,21 +8,21 @@
       "v-on:dismiss-overview-dialog" => "dismissOverviewDialog()" }
   = icon("spinner spin", "v-show" => "isLoading")
   .wrapper{ "v-show" => "!isLoading && !hasError" }
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         {{ __('Pipeline Health') }}
       .content-block
         .container-fluid
           .row
-            .col-sm-3.col-xs-12.column{ "v-for" => "item in state.summary" }
+            .col-sm-3.col-12.column{ "v-for" => "item in state.summary" }
               %h3.header {{ item.value }}
               %p.text {{ item.title }}
-            .col-sm-3.col-xs-12.column
+            .col-sm-3.col-12.column
               .dropdown.inline.js-ca-dropdown
                 %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
                   %span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }}
                   %i.fa.fa-chevron-down
-                %ul.dropdown-menu.dropdown-menu-align-right
+                %ul.dropdown-menu.dropdown-menu-right
                   %li
                     %a{ "href" => "#", "data-value" => "7" }
                       {{ n__('Last %d day', 'Last %d days', 7) }}
@@ -33,8 +33,8 @@
                     %a{ "href" => "#", "data-value" => "90" }
                       {{ n__('Last %d day', 'Last %d days', 90) }}
     .stage-panel-container
-      .panel.panel-default.stage-panel
-        .panel-heading
+      .card.stage-panel
+        .card-header
           %nav.col-headers
             %ul
               %li.stage-header
diff --git a/app/views/projects/deploy_keys/_form.html.haml b/app/views/projects/deploy_keys/_form.html.haml
index c363180d0db..5ad8091a02b 100644
--- a/app/views/projects/deploy_keys/_form.html.haml
+++ b/app/views/projects/deploy_keys/_form.html.haml
@@ -1,24 +1,24 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @deploy_keys.new_key], url: namespace_project_deploy_keys_path, html: { class: "js-requires-input" } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @deploy_keys.new_key], url: namespace_project_deploy_keys_path, html: { class: "js-requires-input container" } do |f|
   = form_errors(@deploy_keys.new_key)
-  .form-group
+  .form-group.row
     = f.label :title, class: "label-light"
     = f.text_field :title, class: 'form-control', required: true
-  .form-group
+  .form-group.row
     = f.label :key, class: "label-light"
     = f.text_area :key, class: "form-control", rows: 5, required: true
-  .form-group
+  .form-group.row
     %p.light.append-bottom-0
       Paste a machine public key here. Read more about how to generate it
       = link_to "here", help_page_path("ssh/README")
 
   = f.fields_for :deploy_keys_projects do |deploy_keys_project_form|
-    .form-group
-      .checkbox
-        = deploy_keys_project_form.label :can_push do
-          = deploy_keys_project_form.check_box :can_push
-          %strong Write access allowed
-    .form-group
+    .form-group.row
+      = deploy_keys_project_form.label :can_push do
+        = deploy_keys_project_form.check_box :can_push
+        %strong Write access allowed
+    .form-group.row
       %p.light.append-bottom-0
         Allow this key to push to repository as well? (Default only allows pull access.)
 
-  = f.submit "Add key", class: "btn-create btn"
+  .form-group.row
+    = f.submit "Add key", class: "btn-create btn"
diff --git a/app/views/projects/deploy_keys/_index.html.haml b/app/views/projects/deploy_keys/_index.html.haml
index 75dd4c9ae15..fb1ea471dec 100644
--- a/app/views/projects/deploy_keys/_index.html.haml
+++ b/app/views/projects/deploy_keys/_index.html.haml
@@ -1,9 +1,9 @@
 - expanded = Rails.env.test?
-%section.settings.no-animate{ class: ('expanded' if expanded) }
+%section.qa-deploy-keys-settings.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Deploy Keys
-    %button.btn.js-settings-toggle.qa-expand-deploy-keys
+    %button.btn.js-settings-toggle.qa-expand-deploy-keys{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
       Deploy keys allow read-only or read-write (if enabled) access to your repository. Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.
@@ -12,4 +12,4 @@
       Create a new deploy key for this project
     = render @deploy_keys.form_partial_path
     %hr
-    #js-deploy-keys{ data: { endpoint: project_deploy_keys_path(@project) } }
+    #js-deploy-keys{ data: { endpoint: project_deploy_keys_path(@project), project_id: @project.id } }
diff --git a/app/views/projects/deploy_keys/edit.html.haml b/app/views/projects/deploy_keys/edit.html.haml
index cd910b82b57..e009b6fef0e 100644
--- a/app/views/projects/deploy_keys/edit.html.haml
+++ b/app/views/projects/deploy_keys/edit.html.haml
@@ -3,7 +3,7 @@
 %hr
 
 %div
-  = form_for [@project.namespace.becomes(Namespace), @project, @deploy_key], html: { class: 'form-horizontal js-requires-input' } do |f|
+  = form_for [@project.namespace.becomes(Namespace), @project, @deploy_key], html: { class: 'js-requires-input' } do |f|
     = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
     .form-actions
       = f.submit 'Save changes', class: 'btn-save btn'
diff --git a/app/views/projects/deploy_tokens/_form.html.haml b/app/views/projects/deploy_tokens/_form.html.haml
new file mode 100644
index 00000000000..f8db30df7b4
--- /dev/null
+++ b/app/views/projects/deploy_tokens/_form.html.haml
@@ -0,0 +1,29 @@
+%p.profile-settings-content
+  = s_("DeployTokens|Pick a name for the application, and we'll give you a unique deploy token.")
+
+= form_for token, url: create_deploy_token_namespace_project_settings_repository_path(project.namespace, project), method: :post do |f|
+  = form_errors(token)
+
+  .form-group
+    = f.label :name, class: 'label-light'
+    = f.text_field :name, class: 'form-control', required: true
+
+  .form-group
+    = f.label :expires_at, class: 'label-light'
+    = f.text_field :expires_at, class: 'datepicker form-control', value: f.object.expires_at
+
+  .form-group
+    = f.label :scopes, class: 'label-light'
+    %fieldset
+      = f.check_box :read_repository
+      = label_tag ("deploy_token_read_repository"), 'read_repository'
+      %span= s_('DeployTokens|Allows read-only access to the repository')
+
+    - if container_registry_enabled?(project)
+      %fieldset
+        = f.check_box :read_registry
+        = label_tag ("deploy_token_read_registry"), 'read_registry'
+        %span= s_('DeployTokens|Allows read-only access to the registry images')
+
+  .prepend-top-default
+    = f.submit s_('DeployTokens|Create deploy token'), class: 'btn btn-success'
diff --git a/app/views/projects/deploy_tokens/_index.html.haml b/app/views/projects/deploy_tokens/_index.html.haml
new file mode 100644
index 00000000000..725720d2222
--- /dev/null
+++ b/app/views/projects/deploy_tokens/_index.html.haml
@@ -0,0 +1,17 @@
+- expanded = expand_deploy_tokens_section?(@new_deploy_token)
+
+%section.settings.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4= s_('DeployTokens|Deploy Tokens')
+    %button.btn.js-settings-toggle.qa-expand-deploy-keys{ type: 'button' }
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      = s_('DeployTokens|Deploy tokens allow read-only access to your repository and registry images.')
+  .settings-content
+    - if @new_deploy_token.persisted?
+      = render 'projects/deploy_tokens/new_deploy_token', deploy_token: @new_deploy_token
+    %h5.prepend-top-0
+      = s_('DeployTokens|Add a deploy token')
+    = render 'projects/deploy_tokens/form', project: @project, token: @new_deploy_token, presenter: @deploy_tokens
+    %hr
+    = render 'projects/deploy_tokens/table', project: @project, active_tokens: @deploy_tokens
diff --git a/app/views/projects/deploy_tokens/_new_deploy_token.html.haml b/app/views/projects/deploy_tokens/_new_deploy_token.html.haml
new file mode 100644
index 00000000000..5dd9ffba074
--- /dev/null
+++ b/app/views/projects/deploy_tokens/_new_deploy_token.html.haml
@@ -0,0 +1,18 @@
+.created-deploy-token-container.info-well
+  .well-segment
+    %h5.prepend-top-0
+      = s_('DeployTokens|Your New Deploy Token')
+
+    .form-group
+      .input-group
+        = text_field_tag 'deploy-token-user', deploy_token.username, readonly: true, class: 'deploy-token-field form-control js-select-on-focus'
+        .input-group-append
+          = clipboard_button(text: deploy_token.username, title: s_('DeployTokens|Copy username to clipboard'), placement: 'left')
+      %span.deploy-token-help-block.prepend-top-5.text-success= s_("DeployTokens|Use this username as a login.")
+
+    .form-group
+      .input-group
+        = text_field_tag 'deploy-token', deploy_token.token, readonly: true, class: 'deploy-token-field form-control js-select-on-focus'
+        .input-group-append
+          = clipboard_button(text: deploy_token.token, title: s_('DeployTokens|Copy deploy token to clipboard'), placement: 'left')
+      %span.deploy-token-help-block.prepend-top-5.text-danger= s_("DeployTokens|Use this token as a password. Make sure you save it - you won't be able to access it again.")
diff --git a/app/views/projects/deploy_tokens/_revoke_modal.html.haml b/app/views/projects/deploy_tokens/_revoke_modal.html.haml
new file mode 100644
index 00000000000..a67c3a0c841
--- /dev/null
+++ b/app/views/projects/deploy_tokens/_revoke_modal.html.haml
@@ -0,0 +1,17 @@
+.modal{ id: "revoke-modal-#{token.id}" }
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %h4.modal-title
+          = s_('DeployTokens|Revoke')
+          %b #{token.name}?
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
+      .modal-body
+        %p
+          = s_('DeployTokens|You are about to revoke')
+          %b #{token.name}.
+          = s_('DeployTokens|This action cannot be undone.')
+      .modal-footer
+        %a{ href: '#', data: { dismiss: 'modal' }, class: 'btn btn-default' }= _('Cancel')
+        = link_to s_('DeployTokens|Revoke %{name}') % { name: token.name }, revoke_project_deploy_token_path(project, token), method: :put, class: 'btn btn-danger'
diff --git a/app/views/projects/deploy_tokens/_table.html.haml b/app/views/projects/deploy_tokens/_table.html.haml
new file mode 100644
index 00000000000..91466a6736b
--- /dev/null
+++ b/app/views/projects/deploy_tokens/_table.html.haml
@@ -0,0 +1,31 @@
+%h5= s_("DeployTokens|Active Deploy Tokens (%{active_tokens})") % { active_tokens: active_tokens.length }
+
+- if active_tokens.present?
+  .table-responsive.deploy-tokens
+    %table.table
+      %thead
+        %tr
+          %th= s_('DeployTokens|Name')
+          %th= s_('DeployTokens|Username')
+          %th= s_('DeployTokens|Created')
+          %th= s_('DeployTokens|Expires')
+          %th= s_('DeployTokens|Scopes')
+          %th
+      %tbody
+        - active_tokens.each do |token|
+          %tr
+            %td= token.name
+            %td= token.username
+            %td= token.created_at.to_date.to_s(:medium)
+            %td
+              - if token.expires?
+                %span{ class: ('text-warning' if token.expires_soon?) }
+                  In #{distance_of_time_in_words_to_now(token.expires_at)}
+              - else
+                %span.token-never-expires-label Never
+            %td= token.scopes.present? ? token.scopes.join(", ") : "<no scopes selected>"
+            %td= link_to s_('DeployTokens|Revoke'), "#", class: "btn btn-danger float-right", data: { toggle: "modal", target: "#revoke-modal-#{token.id}"}
+            = render 'projects/deploy_tokens/revoke_modal', token: token, project: project
+- else
+  .settings-message.text-center
+    = s_('DeployTokens|This project has no active Deploy Tokens.')
diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml
index e2baaa625ae..e0ecf56525a 100644
--- a/app/views/projects/deployments/_actions.haml
+++ b/app/views/projects/deployments/_actions.haml
@@ -6,7 +6,7 @@
         %button.dropdown.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' }
           = custom_icon('icon_play')
           = icon('caret-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
+        %ul.dropdown-menu.dropdown-menu-right
           - actions.each do |action|
             - next unless can?(current_user, :update_build, action)
             %li
diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml
index c7ac687e4a6..282566eeadc 100644
--- a/app/views/projects/deployments/_commit.html.haml
+++ b/app/views/projects/deployments/_commit.html.haml
@@ -14,4 +14,4 @@
           = author_avatar(deployment.commit, size: 20)
           = link_to_markdown commit_title, project_commit_path(@project, deployment.sha), class: "commit-row-message"
         - else
-          Cant find HEAD commit for this branch
+          = _("Can't find HEAD commit for this branch")
diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml
index 520696b01c6..85bc8ec07e3 100644
--- a/app/views/projects/deployments/_deployment.html.haml
+++ b/app/views/projects/deployments/_deployment.html.haml
@@ -1,14 +1,14 @@
 .gl-responsive-table-row.deployment{ role: 'row' }
   .table-section.section-10{ role: 'gridcell' }
-    .table-mobile-header{ role: 'rowheader' } ID
+    .table-mobile-header{ role: 'rowheader' }= _("ID")
     %strong.table-mobile-content ##{deployment.iid}
 
   .table-section.section-30{ role: 'gridcell' }
-    .table-mobile-header{ role: 'rowheader' } Commit
+    .table-mobile-header{ role: 'rowheader' }= _("Commit")
     = render 'projects/deployments/commit', deployment: deployment
 
   .table-section.section-25.build-column{ role: 'gridcell' }
-    .table-mobile-header{ role: 'rowheader' } Job
+    .table-mobile-header{ role: 'rowheader' }= _("Job")
     - if deployment.deployable
       .table-mobile-content
         .flex-truncate-parent
@@ -21,7 +21,7 @@
             = user_avatar(user: deployment.user, size: 20)
 
   .table-section.section-15{ role: 'gridcell' }
-    .table-mobile-header{ role: 'rowheader' } Created
+    .table-mobile-header{ role: 'rowheader' }= _("Created")
     %span.table-mobile-content= time_ago_with_tooltip(deployment.created_at)
 
   .table-section.section-20.table-button-footer{ role: 'gridcell' }
diff --git a/app/views/projects/deployments/_rollback.haml b/app/views/projects/deployments/_rollback.haml
index 5941e01c6f1..95f950948ab 100644
--- a/app/views/projects/deployments/_rollback.haml
+++ b/app/views/projects/deployments/_rollback.haml
@@ -1,6 +1,6 @@
 - if can?(current_user, :create_deployment, deployment) && deployment.deployable
   = link_to [:retry, @project.namespace.becomes(Namespace), @project, deployment.deployable], method: :post, class: 'btn btn-build' do
     - if deployment.last?
-      Re-deploy
+      = _("Re-deploy")
     - else
-      Rollback
+      = _("Rollback")
diff --git a/app/views/projects/diffs/_collapsed.html.haml b/app/views/projects/diffs/_collapsed.html.haml
index 8772bd4705f..9bd1255fe00 100644
--- a/app/views/projects/diffs/_collapsed.html.haml
+++ b/app/views/projects/diffs/_collapsed.html.haml
@@ -1,5 +1,5 @@
 - diff_file = viewer.diff_file
-- 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))
+- url = url_for(safe_params.merge(action: :diff_for_path, old_path: diff_file.old_path, new_path: diff_file.new_path, file_identifier: diff_file.file_identifier))
 .nothing-here-block.diff-collapsed{ data: { diff_for_path: url } }
   This diff is collapsed.
-  %a.click-to-expand Click to expand it.
+  %button.click-to-expand.btn.btn-link Click to expand it.
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 376f672f424..077c6c68f7e 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -6,16 +6,16 @@
 
 .content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed{ class: ("diff-files-changed-merge-request" if merge_request) }
   .files-changed-inner
-    .inline-parallel-buttons.hidden-xs.hidden-sm
+    .inline-parallel-buttons.d-none.d-sm-none.d-md-block
       - 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'
+        = link_to 'Expand all', url_for(safe_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')
+          = commit_diff_whitespace_link(diffs.project, @commit, class: 'd-none d-sm-inline-block')
         - elsif current_controller?('projects/merge_requests/diffs')
-          = diff_merge_request_whitespace_link(diffs.project, @merge_request, class: 'hidden-xs')
+          = diff_merge_request_whitespace_link(diffs.project, @merge_request, class: 'd-none d-sm-inline-block')
         - elsif current_controller?(:compare)
-          = diff_compare_whitespace_link(diffs.project, params[:from], params[:to], class: 'hidden-xs')
+          = diff_compare_whitespace_link(diffs.project, params[:from], params[:to], class: 'd-none d-sm-inline-block')
       .btn-group
         = inline_diff_btn
         = parallel_diff_btn
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 47bfcb21cf4..b4df654c839 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -10,7 +10,7 @@
 
     - unless diff_file.submodule?
       - blob = diff_file.blob
-      .file-actions.hidden-xs
+      .file-actions.d-none.d-sm-block
         - 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
             = icon('comment')
diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml
index dbeddf6689a..4cb04d744dc 100644
--- a/app/views/projects/diffs/_file_header.html.haml
+++ b/app/views/projects/diffs/_file_header.html.haml
@@ -37,4 +37,4 @@
       #{diff_file.a_mode} → #{diff_file.b_mode}
 
   - if diff_file.stored_externally? && diff_file.external_storage == :lfs
-    %span.label.label-lfs.append-right-5 LFS
+    %span.badge.label-lfs.append-right-5 LFS
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
index 6fd6018dea3..aa1112c3313 100644
--- a/app/views/projects/diffs/_stats.html.haml
+++ b/app/views/projects/diffs/_stats.html.haml
@@ -2,7 +2,7 @@
 - sum_removed_lines = diff_files.sum(&:removed_lines)
 .commit-stat-summary.dropdown
   Showing
-  %button.diff-stats-summary-toggler.js-diff-stats-dropdown{ type: "button", data: { toggle: "dropdown" } }<
+  %button.diff-stats-summary-toggler.js-diff-stats-dropdown{ type: "button", data: { toggle: "dropdown", display: "static" } }<
     = pluralize(diff_files.size, "changed file")
     = icon("caret-down", class: "prepend-left-5")
   %span.diff-stats-additions-deletions-expanded#diff-stats
@@ -10,7 +10,7 @@
     %strong.cgreen= pluralize(sum_added_lines, 'addition')
     and
     %strong.cred= pluralize(sum_removed_lines, 'deletion')
-  .diff-stats-additions-deletions-collapsed.pull-right.hidden-xs.hidden-sm{ "aria-hidden": "true", "aria-describedby": "diff-stats" }
+  .diff-stats-additions-deletions-collapsed.float-right.d-none.d-sm-none{ "aria-hidden": "true", "aria-describedby": "diff-stats" }
     %strong.cgreen<
       +#{sum_added_lines}
     %strong.cred<
diff --git a/app/views/projects/diffs/_warning.html.haml b/app/views/projects/diffs/_warning.html.haml
index da34a83d8e0..abe494f2974 100644
--- a/app/views/projects/diffs/_warning.html.haml
+++ b/app/views/projects/diffs/_warning.html.haml
@@ -1,7 +1,7 @@
 .alert.alert-warning
   %h4
     Too many changes to show.
-    .pull-right
+    .float-right
       - if current_controller?(:commit)
         = link_to "Plain diff", project_commit_path(@project, @commit, format: :diff), class: "btn btn-sm"
         = link_to "Email patch", project_commit_path(@project, @commit, format: :patch), class: "btn btn-sm"
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index a96485ab155..9f175d2376f 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -7,8 +7,8 @@
   %section.settings.general-settings.no-animate{ class: ('expanded' if expanded) }
     .settings-header
       %h4
-        General project settings
-      %button.btn.js-settings-toggle
+        General project
+      %button.btn.js-settings-toggle{ type: 'button' }
         = expanded ? 'Collapse' : 'Expand'
       %p
         Update your project name, description, avatar, and other general settings.
@@ -33,14 +33,19 @@
               %span.light (optional)
             = f.text_area :description, class: "form-control", rows: 3, maxlength: 250
 
+          = render_if_exists 'projects/classification_policy_settings', f: f
+
           - unless @project.empty_repo?
             .form-group
               = f.label :default_branch, "Default Branch", class: 'label-light'
               = f.select(:default_branch, @project.repository.branch_names, {}, {class: 'select2 select-wide'})
+
+        = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :project
+
         .form-group
           = f.label :tag_list, "Tags", class: 'label-light'
           = f.text_field :tag_list, value: @project.tag_list.sort.join(', '), maxlength: 2000, class: "form-control"
-          %p.help-block Separate tags with commas.
+          %p.form-text.text-muted Separate tags with commas.
         %fieldset.features
           %h5.prepend-top-0= _("Project avatar")
           .form-group
@@ -54,7 +59,7 @@
               %button.btn.js-choose-project-avatar-button{ type: 'button' }= _("Choose file...")
               %span.file_name.prepend-left-default.js-avatar-filename= _("No file chosen")
               = f.file_field :avatar, class: "js-project-avatar-input hidden"
-            .help-block= _("The maximum file size allowed is 200KB.")
+            .form-text.text-muted= _("The maximum file size allowed is 200KB.")
             - if @project.avatar?
               %hr
               = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _("Avatar will be removed. Are you sure?") }, method: :delete, class: "btn btn-danger btn-inverted"
@@ -64,7 +69,7 @@
     .settings-header
       %h4
         Permissions
-      %button.btn.js-settings-toggle
+      %button.btn.js-settings-toggle{ type: 'button' }
         = expanded ? 'Collapse' : 'Expand'
       %p
         Enable or disable certain project features and choose access levels.
@@ -75,26 +80,32 @@
         .js-project-permissions-form
         = f.submit 'Save changes', class: "btn btn-save"
 
-  %section.settings.merge-requests-feature.no-animate{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
+  = render_if_exists 'projects/issues_settings'
+
+  %section.qa-merge-request-settings.settings.merge-requests-feature.no-animate{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
     .settings-header
       %h4
-        Merge request settings
-      %button.btn.js-settings-toggle
+        Merge request
+      %button.btn.js-settings-toggle{ type: 'button' }
         = expanded ? 'Collapse' : 'Expand'
       %p
         Customize your merge request restrictions.
     .settings-content
+      = render_if_exists 'shared/promotions/promote_mr_features'
+
       = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "merge-request-settings-form" }, authenticity_token: true do |f|
-        = render 'merge_request_settings', form: f
+        = render 'projects/merge_request_settings', form: f
         = f.submit 'Save changes', class: "btn btn-save qa-save-merge-request-changes"
 
+  = render_if_exists 'projects/service_desk_settings'
+
   = render 'export', project: @project
 
-  %section.settings.advanced-settings.no-animate{ class: ('expanded' if expanded) }
+  %section.qa-advanced-settings.settings.advanced-settings.no-animate{ class: ('expanded' if expanded) }
     .settings-header
       %h4
-        Advanced settings
-      %button.btn.js-settings-toggle
+        Advanced
+      %button.btn.js-settings-toggle{ type: 'button' }
         = expanded ? 'Collapse' : 'Expand'
       %p
         Perform advanced options such as housekeeping, archiving, renaming, transferring, or removing your project.
@@ -114,17 +125,18 @@
               Archive project
           - if @project.archived?
             %p
-              Unarchiving the project will mark its repository as active. The project can be committed to.
+              Unarchiving the project will restore people's ability to make changes to it.
+              The repository can be committed to, and issues, comments and other entities can be created.
               %strong Once active this project shows up in the search and on the dashboard.
             = link_to 'Unarchive project', unarchive_project_path(@project),
-                data: { confirm: "Are you sure that you want to unarchive this project?\nWhen this project is unarchived it is active and can be committed to again." },
+                data: { confirm: "Are you sure that you want to unarchive this project?" },
                 method: :post, class: "btn btn-success"
           - else
             %p
-              Archiving the project will mark its repository as read-only. It is hidden from the dashboard and doesn't show up in searches.
-              %strong Archived projects cannot be committed to!
+              Archiving the project will make it entirely read-only. It is hidden from the dashboard and doesn't show up in searches.
+              %strong The repository cannot be committed to, and no issues, comments or other entities can be created.
             = link_to 'Archive project', archive_project_path(@project),
-                data: { confirm: "Are you sure that you want to archive this project?\nAn archived project cannot be committed to." },
+                data: { confirm: "Are you sure that you want to archive this project?" },
                 method: :post, class: "btn btn-warning"
       .sub-section.rename-respository
         %h4.warning-title
@@ -141,8 +153,9 @@
               %span Path
             .form-group
               .input-group
-                .input-group-addon
-                  #{URI.join(root_url, @project.namespace.full_path)}/
+                .input-group-prepend
+                  .input-group-text
+                    #{URI.join(root_url, @project.namespace.full_path)}/
                 = f.text_field :path, class: 'form-control'
             %ul
               %li Be careful. Renaming a project's repository can have unintended side effects.
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 8a36fada389..d47dc3d8143 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -1,12 +1,13 @@
+- @content_class = "limit-container-width" unless fluid_layout
 - @no_container = true
-- breadcrumb_title "Details"
+- breadcrumb_title _("Details")
 
 = render partial: 'flash_messages', locals: { project: @project }
 
 = render "home_panel"
 
 .project-empty-note-panel
-  %div{ class: [container_class, ("limit-container-width-sm" unless fluid_layout)] }
+  %div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
     .prepend-top-20
     %h4
       = _('The repository for this project is empty')
@@ -22,7 +23,7 @@
 
       %hr
       %p
-        - link_to_auto_devops_settings = link_to(s_('AutoDevOps|enable Auto DevOps (Beta)'), project_settings_ci_cd_path(@project, anchor: 'js-general-pipeline-settings'))
+        - link_to_auto_devops_settings = link_to(s_('AutoDevOps|enable Auto DevOps'), project_settings_ci_cd_path(@project, anchor: 'autodevops-settings'))
         - link_to_add_kubernetes_cluster = link_to(s_('AutoDevOps|add a Kubernetes cluster'), new_project_cluster_path(@project))
         = s_('AutoDevOps|You can automatically build and test your application if you %{link_to_auto_devops_settings} for this project. You can automatically deploy it as well, if you %{link_to_add_kubernetes_cluster}.').html_safe % { link_to_auto_devops_settings: link_to_auto_devops_settings, link_to_add_kubernetes_cluster: link_to_add_kubernetes_cluster }
 
@@ -36,7 +37,7 @@
   = render 'stat_anchor_list', anchors: @project.empty_repo_statistics_buttons
 
 - if can?(current_user, :push_code, @project)
-  %div{ class: [container_class, ("limit-container-width-sm" unless fluid_layout)] }
+  %div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
     .prepend-top-20
     .empty_wrapper
       %h3#repo-command-line-instructions.page-title-empty
@@ -44,43 +45,49 @@
       .git-empty
         %fieldset
           %h5 Git global setup
-          %pre.light-well
+          %pre.bg-light
             :preserve
               git config --global user.name "#{h git_user_name}"
               git config --global user.email "#{h git_user_email}"
 
         %fieldset
           %h5 Create a new repository
-          %pre.light-well
+          %pre.bg-light
             :preserve
               git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')}
               cd #{h @project.path}
               touch README.md
               git add README.md
               git commit -m "add README"
-              git push -u origin master
+            - if @project.can_current_user_push_to_default_branch?
+              %span><
+                git push -u origin master
 
         %fieldset
           %h5 Existing folder
-          %pre.light-well
+          %pre.bg-light
             :preserve
               cd existing_folder
               git init
               git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')}
               git add .
               git commit -m "Initial commit"
-              git push -u origin master
+            - if @project.can_current_user_push_to_default_branch?
+              %span><
+                git push -u origin master
 
         %fieldset
           %h5 Existing Git repository
-          %pre.light-well
+          %pre.bg-light
             :preserve
               cd existing_repo
               git remote rename origin old-origin
               git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')}
-              git push -u origin --all
-              git push -u origin --tags
+            - if @project.can_current_user_push_to_default_branch?
+              %span><
+                git push -u origin --all
+                git push -u origin --tags
 
           - if can? current_user, :remove_project, @project
             .prepend-top-20
-              = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-inverted btn-remove pull-right"
+              = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-inverted btn-remove float-right"
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index a3467eb6f05..a966bfb2dd9 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -5,10 +5,10 @@
     .tree-ref-holder
       = render 'shared/ref_switcher', destination: 'find_file', path: @path
     %ul.breadcrumb.repo-breadcrumb
-      %li
+      %li.breadcrumb-item
         = link_to project_tree_path(@project, @ref) do
           = @project.path
-      %li.file-finder
+      %li.file-finder.breadcrumb-item
         %input#file_find.form-control.file-finder-input{ type: "text", placeholder: _('Find by path'), autocomplete: 'off' }
 
   .tree-content-holder
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index 21a4702a2a9..57afc7ac9c3 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -16,7 +16,7 @@
         - else
           = sort_title_recently_created
         = icon('chevron-down')
-      %ul.dropdown-menu.dropdown-menu-align-right
+      %ul.dropdown-menu.dropdown-menu-right
         %li
           - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
           = link_to page_filter_path(sort: sort_value_recently_created, without: excluded_filters) do
diff --git a/app/views/projects/forks/new.html.haml b/app/views/projects/forks/new.html.haml
index 475c6ba4d3d..a603b1024eb 100644
--- a/app/views/projects/forks/new.html.haml
+++ b/app/views/projects/forks/new.html.haml
@@ -12,7 +12,7 @@
     - if @namespaces.present?
       .fork-thumbnail-container.js-fork-content
         %h5.prepend-top-0.append-bottom-0.prepend-left-default.append-right-default
-          Click to fork the project
+          = _("Select a namespace to fork the project")
         - @namespaces.each do |namespace|
           = render 'fork_button', namespace: namespace
     - else
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 620fd1906ba..639efd34a74 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
@@ -35,10 +35,10 @@
     .label-container
       - if generic_commit_status.tags.any?
         - generic_commit_status.tags.each do |tag|
-          %span.label.label-primary
+          %span.badge.badge-primary
             = tag
       - if retried
-        %span.label.label-warning retried
+        %span.badge.badge-warning retried
 
   - if pipeline_link
     %td
diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml
index 14c47a5d91c..3f1974d05f4 100644
--- a/app/views/projects/graphs/charts.html.haml
+++ b/app/views/projects/graphs/charts.html.haml
@@ -14,7 +14,7 @@
               = icon('circle')
             &nbsp;
             = language[:label]
-            .pull-right
+            .float-right
               = language[:value]
               \%
     .col-md-8
@@ -30,7 +30,7 @@
           #{@commits_graph.start_date.strftime('%b %d')}
         - end_time = capture do
           #{@commits_graph.end_date.strftime('%b %d')}
-        = (_("Commit statistics for %{ref} %{start_time} - %{end_time}") % { ref: "<strong>#{@ref}</strong>", start_time: start_time, end_time: end_time }).html_safe
+        = (_("Commit statistics for %{ref} %{start_time} - %{end_time}") % { ref: "<strong>#{h @ref}</strong>", start_time: start_time, end_time: end_time }).html_safe
 
     .col-md-6
       .tree-ref-container
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index c81ee6874e3..f1b14d4c4d1 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -24,4 +24,4 @@
     .graphs.row
       #contributors-master
       #contributors.clearfix
-        %ol.contributors-list.clearfix
+        %ol.contributors-list.row
diff --git a/app/views/projects/hook_logs/_index.html.haml b/app/views/projects/hook_logs/_index.html.haml
index 8096d9530c3..3e54c3ca9f8 100644
--- a/app/views/projects/hook_logs/_index.html.haml
+++ b/app/views/projects/hook_logs/_index.html.haml
@@ -18,8 +18,8 @@
           %tr
             %td
               = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
-            %td.hidden-xs
-              %span.label.label-gray.deploy-project-label
+            %td.d-none.d-sm-block
+              %span.badge.badge-gray.deploy-project-label
                 = hook_log.trigger.singularize.titleize
             %td
               = truncate(hook_log.url, length: 50)
diff --git a/app/views/projects/hook_logs/show.html.haml b/app/views/projects/hook_logs/show.html.haml
index 1cf4105bd27..e51efa85df0 100644
--- a/app/views/projects/hook_logs/show.html.haml
+++ b/app/views/projects/hook_logs/show.html.haml
@@ -4,6 +4,6 @@
       Request details
   .col-lg-9
 
-    = link_to 'Resend Request', retry_project_hook_hook_log_path(@project, @hook, @hook_log), class: "btn btn-default pull-right prepend-left-10"
+    = link_to 'Resend Request', retry_project_hook_hook_log_path(@project, @hook, @hook_log), class: "btn btn-default float-right prepend-left-10"
 
     = render partial: 'shared/hook_logs/content', locals: { hook_log: @hook_log }
diff --git a/app/views/projects/hooks/_index.html.haml b/app/views/projects/hooks/_index.html.haml
index 776681ea09a..5990582fd55 100644
--- a/app/views/projects/hooks/_index.html.haml
+++ b/app/views/projects/hooks/_index.html.haml
@@ -15,7 +15,7 @@
     %h5.prepend-top-default
       Webhooks (#{@hooks.count})
     - if @hooks.any?
-      %ul.well-list
+      %ul.content-list
         - @hooks.each do |hook|
           = render 'project_hook', hook: hook
     - else
diff --git a/app/views/projects/hooks/edit.html.haml b/app/views/projects/hooks/edit.html.haml
index dcc1f0e3fbe..c31aef60453 100644
--- a/app/views/projects/hooks/edit.html.haml
+++ b/app/views/projects/hooks/edit.html.haml
@@ -13,7 +13,7 @@
 
       = f.submit 'Save changes', class: 'btn btn-create'
       = render 'shared/web_hooks/test_button', triggers: ProjectHook.triggers, hook: @hook
-      = link_to 'Remove', project_hook_path(@project, @hook), method: :delete, class: 'btn btn-remove pull-right', data: { confirm: 'Are you sure?' }
+      = link_to 'Remove', project_hook_path(@project, @hook), method: :delete, class: 'btn btn-remove float-right', data: { confirm: 'Are you sure?' }
 
 %hr
 
diff --git a/app/views/projects/imports/new.html.haml b/app/views/projects/imports/new.html.haml
index 778ff91362d..16c4f21279d 100644
--- a/app/views/projects/imports/new.html.haml
+++ b/app/views/projects/imports/new.html.haml
@@ -5,14 +5,14 @@
 %hr
 
 - if @project.import_failed?
-  .panel.panel-danger
-    .panel-heading The repository could not be imported.
-    .panel-body
+  .card.bg-danger
+    .card-header The repository could not be imported.
+    .card-body
       %pre
         :preserve
           #{h(sanitize_repo_path(@project, @project.import_error))}
 
-= form_for @project, url: project_import_path(@project), method: :post, html: { class: 'form-horizontal' } do |f|
+= form_for @project, url: project_import_path(@project), method: :post do |f|
   = render "shared/import_form", f: f
 
   .form-actions
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index cdfc3e232c5..665968a64e1 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -8,4 +8,6 @@
 %section.js-vue-notes-event
   #js-vue-notes{ data: { notes_data: notes_data(@issue),
     noteable_data: serialize_issuable(@issue),
+    noteable_type: 'Issue',
+    target_type: 'issue',
     current_user_data: UserSerializer.new.represent(current_user, only_path: true).to_json } }
diff --git a/app/views/projects/issues/_form.html.haml b/app/views/projects/issues/_form.html.haml
index 8b011af78eb..2c5ffd85372 100644
--- a/app/views/projects/issues/_form.html.haml
+++ b/app/views/projects/issues/_form.html.haml
@@ -1,2 +1,2 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @issue], html: { class: 'form-horizontal issue-form common-note-form js-quick-submit js-requires-input' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @issue], html: { class: 'issue-form common-note-form js-quick-submit js-requires-input' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @issue
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 0c58dd60e2c..8a14146cb87 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -12,25 +12,25 @@
                 = confidential_icon(issue)
             = link_to issue.title, issue_path(issue)
           - if issue.tasks?
-            %span.task-status.hidden-xs
+            %span.task-status.d-none.d-sm-inline-block
               &nbsp;
               = issue.task_status
 
         .issuable-info
           %span.issuable-reference
             #{issuable_reference(issue)}
-          %span.issuable-authored.hidden-xs
+          %span.issuable-authored.d-none.d-sm-inline-block
             &middot;
             opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
             by #{link_to_member(@project, issue.author, avatar: false)}
           - if issue.milestone
-            %span.issuable-milestone.hidden-xs
+            %span.issuable-milestone.d-none.d-sm-inline-block
               &nbsp;
-              = link_to project_issues_path(issue.project, milestone_title: issue.milestone.title), data: { html: 1, toggle: 'tooltip', title: issuable_milestone_tooltip_title(issue) } do
+              = link_to project_issues_path(issue.project, milestone_title: issue.milestone.title), data: { html: 'true', toggle: 'tooltip', title: milestone_tooltip_due_date(issue.milestone) } do
                 = icon('clock-o')
                 = issue.milestone.title
           - if issue.due_date
-            %span.issuable-due-date.hidden-xs.has-tooltip{ class: "#{'cred' if issue.overdue?}", title: _('Due date') }
+            %span.issuable-due-date.d-none.d-sm-inline-block.has-tooltip{ class: "#{'cred' if issue.overdue?}", title: _('Due date') }
               &nbsp;
               = icon('calendar')
               = issue.due_date.to_s(:medium)
@@ -50,5 +50,5 @@
 
           = render 'shared/issuable_meta_data', issuable: issue
 
-        .pull-right.issuable-updated-at.hidden-xs
+        .float-right.issuable-updated-at.d-none.d-sm-inline-block
           %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
diff --git a/app/views/projects/issues/_nav_btns.html.haml b/app/views/projects/issues/_nav_btns.html.haml
index 0d39edb7bfd..0dd2d2e6c5d 100644
--- a/app/views/projects/issues/_nav_btns.html.haml
+++ b/app/views/projects/issues/_nav_btns.html.haml
@@ -1,10 +1,11 @@
-= link_to params.merge(rss_url_options), class: 'btn btn-default append-right-10 has-tooltip', title: 'Subscribe' do
-  = icon('rss')
+= render 'shared/issuable/feed_buttons'
+
 - if @can_bulk_update
   = button_tag "Edit issues", class: "btn btn-default append-right-10 js-bulk-update-toggle"
-= link_to "New issue", new_project_issue_path(@project,
-                                              issue: { assignee_id: finder.assignee.try(:id),
-                                                       milestone_id: finder.milestones.first.try(:id) }),
-                                              class: "btn btn-new",
-                                              title: "New issue",
-                                              id: "new_issue_link"
+- if show_new_issue_link?(@project)
+  = link_to "New issue", new_project_issue_path(@project,
+                                                issue: { assignee_id: finder.assignee.try(:id),
+                                                         milestone_id: finder.milestones.first.try(:id) }),
+                                                class: "btn btn-new",
+                                                title: "New issue",
+                                                id: "new_issue_link"
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 36e24037214..a678cb6f058 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -1,8 +1,8 @@
-- can_create_merge_request = can?(current_user, :create_merge_request, @project)
-- data_action = can_create_merge_request ? 'create-mr' : 'create-branch'
-- value = can_create_merge_request ? 'Create merge request' : 'Create branch'
-
 - if can?(current_user, :push_code, @project)
+  - can_create_merge_request = can?(current_user, :create_merge_request_in, @project)
+  - data_action = can_create_merge_request ? 'create-mr' : 'create-branch'
+  - value = can_create_merge_request ? 'Create merge request' : 'Create branch'
+
   - can_create_path = can_create_branch_project_issue_path(@project, @issue)
   - create_mr_path = create_merge_request_project_issue_path(@project, @issue, branch_name: @issue.to_branch_name, ref: @project.default_branch)
   - create_branch_path = project_branches_path(@project, branch_name: @issue.to_branch_name, ref: @project.default_branch, issue_iid: @issue.iid)
@@ -14,15 +14,15 @@
         = icon('spinner', class: 'fa-spin')
         %span.text
           Checking branch availability…
-    .btn-group.available.hide
+    .btn-group.available.hidden
       %button.btn.js-create-merge-request.btn-success.btn-inverted{ type: 'button', data: { action: data_action } }
         = value
 
-      %button.btn.create-merge-request-dropdown-toggle.dropdown-toggle.btn-success.btn-inverted.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' } } }
+      %button.btn.create-merge-request-dropdown-toggle.dropdown-toggle.btn-success.btn-inverted.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
         = icon('caret-down')
 
       .droplab-dropdown
-        %ul#create-merge-request-dropdown.create-merge-request-dropdown-menu.dropdown-menu.dropdown-menu-align-right.gl-show-field-errors{ data: { dropdown: true } }
+        %ul#create-merge-request-dropdown.create-merge-request-dropdown-menu.dropdown-menu.dropdown-menu-right.gl-show-field-errors{ data: { dropdown: true } }
           - if can_create_merge_request
             %li.droplab-item-selected{ role: 'button', data: { value: 'create-mr', text: _('Create merge request') } }
               .menu-item
@@ -40,13 +40,13 @@
               %label{ for: 'new-branch-name' }
                 = _('Branch name')
               %input#new-branch-name.js-branch-name.form-control{ type: 'text', placeholder: "#{@issue.to_branch_name}", value: "#{@issue.to_branch_name}" }
-              %span.js-branch-message.help-block
+              %span.js-branch-message.form-text
 
             .form-group
               %label{ for: 'source-name' }
                 = _('Source (branch or tag)')
               %input#source-name.js-ref.ref.form-control{ type: 'text', placeholder: "#{@project.default_branch}", value: "#{@project.default_branch}", data: { value: "#{@project.default_branch}" } }
-              %span.js-ref-message.help-block
+              %span.js-ref-message.form-text.text-muted
 
             .form-group
               %button.btn.btn-success.js-create-target{ type: 'button', data: { action: 'create-mr' } }
diff --git a/app/views/projects/issues/calendar.ics.haml b/app/views/projects/issues/calendar.ics.haml
new file mode 100644
index 00000000000..59573e5fecf
--- /dev/null
+++ b/app/views/projects/issues/calendar.ics.haml
@@ -0,0 +1 @@
+= render 'issues/issues_calendar', issues: @issues
diff --git a/app/views/projects/issues/index.atom.builder b/app/views/projects/issues/index.atom.builder
index 4029926f373..6330245954e 100644
--- a/app/views/projects/issues/index.atom.builder
+++ b/app/views/projects/issues/index.atom.builder
@@ -1,5 +1,5 @@
 xml.title   "#{@project.name} issues"
-xml.link    href: url_for(params), rel: "self", type: "application/atom+xml"
+xml.link    href: url_for(safe_params), rel: "self", type: "application/atom+xml"
 xml.link    href: project_issues_url(@project), rel: "alternate", type: "text/html"
 xml.id      project_issues_url(@project)
 xml.updated @issues.first.updated_at.xmlschema if @issues.reorder(nil).any?
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index c427a9eedc2..1e7737aeb97 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -5,7 +5,7 @@
 - new_issue_email = @project.new_issuable_address(current_user, 'issue')
 
 = content_for :meta_tags do
-  = auto_discovery_link_tag(:atom, params.merge(rss_url_options), title: "#{@project.name} issues")
+  = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")
 
 - if project_issues(@project).exists?
   %div{ class: (container_class) }
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index ec7e87219f5..2d036bd4e3e 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -7,16 +7,17 @@
 
 - can_update_issue = can?(current_user, :update_issue, @issue)
 - can_report_spam = @issue.submittable_as_spam_by?(current_user)
+- can_create_issue = show_new_issue_link?(@project)
 
 .detail-page-header
   .detail-page-header-body
     .issuable-status-box.status-box.status-box-issue-closed{ class: issue_button_visibility(@issue, false) }
-      = sprite_icon('mobile-issue-close', size: 16, css_class: 'hidden-sm hidden-md hidden-lg')
-      %span.hidden-xs
+      = sprite_icon('mobile-issue-close', size: 16, css_class: 'd-block d-sm-none')
+      %span.d-none.d-sm-block
         Closed
     .issuable-status-box.status-box.status-box-open{ class: issue_button_visibility(@issue, true) }
-      = sprite_icon('issue-open-m', size: 16, css_class: 'hidden-sm hidden-md hidden-lg')
-      %span.hidden-xs Open
+      = sprite_icon('issue-open-m', size: 16, css_class: 'd-block d-sm-none')
+      %span.d-none.d-sm-block Open
 
     .issuable-meta
       - if @issue.confidential
@@ -25,15 +26,15 @@
         .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
       = issuable_meta(@issue, @project, "Issue")
 
-    %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
+    %a.btn.btn-default.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
       = icon('angle-double-left')
 
   .detail-page-header-actions.js-issuable-actions
     .clearfix.issue-btn-group.dropdown
-      %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
+      %button.btn.btn-default.float-left.d-md-none.d-lg-none.d-xl-none{ type: "button", data: { toggle: "dropdown" } }
         Options
         = icon('caret-down')
-      .dropdown-menu.dropdown-menu-align-right.hidden-lg
+      .dropdown-menu.dropdown-menu-right.d-lg-none.d-xl-none
         %ul
           - unless current_user == @issue.author
             %li= link_to 'Report abuse', new_abuse_report_path(user_id: @issue.author.id, ref_url: issue_url(@issue))
@@ -42,16 +43,18 @@
             %li= link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, format: 'json'), class: "btn-reopen js-btn-issue-action #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
           - if can_report_spam
             %li= link_to 'Submit as spam', mark_as_spam_project_issue_path(@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_project_issue_path(@project), title: 'New issue', id: 'new_issue_link'
+          - if can_create_issue
+            - if can_update_issue || can_report_spam
+              %li.divider
+            %li= link_to 'New issue', new_project_issue_path(@project), title: 'New issue', id: 'new_issue_link'
 
     = render 'shared/issuable/close_reopen_button', issuable: @issue, can_update: can_update_issue
 
     - if can_report_spam
-      = link_to 'Submit as spam', mark_as_spam_project_issue_path(@project, @issue), method: :post, class: 'hidden-xs hidden-sm btn btn-grouped btn-spam', title: 'Submit as spam'
-    = link_to new_project_issue_path(@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
+      = link_to 'Submit as spam', mark_as_spam_project_issue_path(@project, @issue), method: :post, class: 'd-none d-sm-none d-md-block btn btn-grouped btn-spam', title: 'Submit as spam'
+    - if can_create_issue
+      = link_to new_project_issue_path(@project), class: 'd-none d-sm-none d-md-block btn btn-grouped new-issue-link btn-new btn-inverted', title: 'New issue', id: 'new_issue_link' do
+        New issue
 
 .issue-details.issuable-details
   .detail-page-description.content-block
diff --git a/app/views/projects/jobs/_empty_state.html.haml b/app/views/projects/jobs/_empty_state.html.haml
index c66313bdbf3..ea552c73c92 100644
--- a/app/views/projects/jobs/_empty_state.html.haml
+++ b/app/views/projects/jobs/_empty_state.html.haml
@@ -1,17 +1,18 @@
 - illustration = local_assigns.fetch(:illustration)
 - illustration_size = local_assigns.fetch(:illustration_size)
 - title = local_assigns.fetch(:title)
-- content = local_assigns.fetch(:content)
+- content = local_assigns.fetch(:content, nil)
 - action = local_assigns.fetch(:action, nil)
 
 .row.empty-state
-  .col-xs-12
+  .col-12
     .svg-content{ class: illustration_size }
       = image_tag illustration
-  .col-xs-12
+  .col-12
     .text-content
       %h4.text-center= title
-      %p= content
+      - if content
+        %p= content
       - if action
         .text-center
           = action
diff --git a/app/views/projects/jobs/_empty_states.html.haml b/app/views/projects/jobs/_empty_states.html.haml
new file mode 100644
index 00000000000..e5198d047df
--- /dev/null
+++ b/app/views/projects/jobs/_empty_states.html.haml
@@ -0,0 +1,9 @@
+- detailed_status = @build.detailed_status(current_user)
+- illustration = detailed_status.illustration
+
+= render 'empty_state',
+    illustration: illustration[:image],
+    illustration_size: illustration[:size],
+    title: illustration[:title],
+    content: illustration[:content],
+    action: detailed_status.has_action? ? link_to(detailed_status.action_button_title, detailed_status.action_path, method: detailed_status.action_method, class: 'btn btn-primary', title: detailed_status.action_button_title) : nil
diff --git a/app/views/projects/jobs/_header.html.haml b/app/views/projects/jobs/_header.html.haml
index 83a2af1dc74..b83e8dddccb 100644
--- a/app/views/projects/jobs/_header.html.haml
+++ b/app/views/projects/jobs/_header.html.haml
@@ -27,5 +27,5 @@
         = link_to "New issue", new_project_issue_path(@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_project_job_path(@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" }
+    %button.btn.btn-default.float-right.d-block.d-sm-none.d-md-none.build-gutter-toggle.js-sidebar-build-toggle{ role: "button", type: "button" }
       = icon('angle-double-left')
diff --git a/app/views/projects/jobs/_sidebar.html.haml b/app/views/projects/jobs/_sidebar.html.haml
index e779473c239..459150c1067 100644
--- a/app/views/projects/jobs/_sidebar.html.haml
+++ b/app/views/projects/jobs/_sidebar.html.haml
@@ -1,17 +1,8 @@
-- builds = @build.pipeline.builds.to_a
-
 %aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" } }
   .sidebar-container
     .blocks-container
-      .block
-        %strong.inline.prepend-top-8
-          = @build.name
-        - if can?(current_user, :update_build, @build) && @build.retryable?
-          = link_to "Retry", retry_namespace_project_job_path(@project.namespace, @project, @build), class: 'js-retry-button pull-right btn btn-inverted-secondary btn-retry visible-md-block visible-lg-block', method: :post
-        %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-build-toggle{ href: "#", 'aria-label': 'Toggle Sidebar', role: 'button' }
-          = icon('angle-double-right')
 
-      #js-details-block-vue
+      #js-details-block-vue{ data: { can_user_retry: can?(current_user, :update_build, @build) && @build.retryable? } }
 
       - if can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?)
         .block
@@ -24,10 +15,10 @@
           - elsif @build.has_expiring_artifacts?
             %p.build-detail-row
               The artifacts will be removed in
-              %span= time_ago_in_words @build.artifacts_expire_at
+              %span= time_ago_with_tooltip @build.artifacts_expire_at
 
           - if @build.artifacts?
-            .btn-group.btn-group-justified{ role: :group }
+            .btn-group.d-flex{ role: :group }
               - if @build.has_expiring_artifacts? && can?(current_user, :update_build, @build)
                 = link_to keep_project_job_artifacts_path(@project, @build), class: 'btn btn-sm btn-default', method: :post do
                   Keep
@@ -35,7 +26,7 @@
               = link_to download_project_job_artifacts_path(@project, @build), rel: 'nofollow', download: '', class: 'btn btn-sm btn-default' do
                 Download
 
-              - if @build.artifacts_metadata?
+              - if @build.browsable_artifacts?
                 = link_to browse_project_job_artifacts_path(@project, @build), class: 'btn btn-sm btn-default' do
                   Browse
 
@@ -51,7 +42,7 @@
 
           - if @build.trigger_variables.any?
             %p
-              %button.btn.group.btn-group-justified.js-reveal-variables Reveal Variables
+              %button.btn.group.js-reveal-variables Reveal Variables
 
             %dl.js-build-variables.trigger-build-variables.hide
               - @build.trigger_variables.each do |trigger_variable|
@@ -91,7 +82,8 @@
       - 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 project_job_path(@project, build) do
+            - tooltip = build.tooltip_message
+            = link_to(project_job_path(@project, build), data: { toggle: 'tooltip', html: 'true', title: tooltip, container: 'body' }) do
               = sprite_icon('arrow-right', size:16, css_class: 'icon-arrow-right')
               %span{ class: "ci-status-icon-#{build.status}" }
                 = ci_icon_for_status(build.status)
@@ -101,5 +93,4 @@
                 - else
                   = build.id
               - if build.retried?
-                %span.has-tooltip{ data: { container: 'body', placement: 'bottom' }, title: 'Job was retried' }
-                  = sprite_icon('retry', size:16, css_class: 'icon-retry')
+                = sprite_icon('retry', size:16, css_class: 'icon-retry')
diff --git a/app/views/projects/jobs/_user.html.haml b/app/views/projects/jobs/_user.html.haml
index 461d503f95d..90ce581a903 100644
--- a/app/views/projects/jobs/_user.html.haml
+++ b/app/views/projects/jobs/_user.html.haml
@@ -1,7 +1,7 @@
 by
 %a{ href: user_path(@build.user) }
-  %span.hidden-xs
+  %span.d-none.d-sm-inline
     = image_tag avatar_icon_for_user(@build.user, 24), class: "avatar s24"
     %strong{ data: { toggle: 'tooltip', placement: 'top', title: @build.user.to_reference } }
       = @build.user.name
-  %strong.visible-xs-inline= @build.user.to_reference
+  %strong.d-inline.d-sm-none= @build.user.to_reference
diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml
index 9963cc93633..fe1c338b634 100644
--- a/app/views/projects/jobs/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -15,7 +15,7 @@
         - unless @repository.gitlab_ci_yml
           = 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
+        = link_to project_ci_lint_path(@project), class: 'btn btn-default' do
           %span CI lint
 
   .content-list.builds-content-list
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index 849c273db8c..1f33bb3a129 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -15,7 +15,7 @@
             - elsif @build.tags.any?
               This job is stuck, because you don't have any active runners online with any of these tags assigned to them:
               - @build.tags.each do |tag|
-                %span.label.label-primary
+                %span.badge.badge-primary
                   = tag
             - else
               This job is stuck, because you don't have any active runners that can run this job.
@@ -54,16 +54,17 @@
             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)}
-    - if @build.started?
+
+    - if @build.running? || @build.has_trace?
       .build-trace-container.prepend-top-default
         .top-bar.js-top-bar
-          .js-truncated-info.truncated-info.hidden-xs.pull-left.hidden<
+          .js-truncated-info.truncated-info.d-none.d-sm-block.float-left.hidden<
             Showing last
             %span.js-truncated-info-size.truncated-info-size><
             of log -
             %a.js-raw-link.raw-link{ href: raw_project_job_path(@project, @build) }>< Complete Raw
 
-          .controllers.pull-right
+          .controllers.float-right
             - if @build.has_trace?
               = link_to raw_project_job_path(@project, @build),
                       title: 'Show complete raw',
@@ -85,30 +86,12 @@
               %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
                 = custom_icon('scroll_down')
 
-        %pre.build-trace#build-trace
-          %code.bash.js-build-output
-          .build-loader-animation.js-build-refresh
-    - elsif @build.playable?
-      = render 'empty_state',
-        illustration: 'illustrations/manual_action.svg',
-        illustration_size: 'svg-394',
-        title: _('This job requires a manual action'),
-        content: _('This job depends on a user to trigger its process. Often they are used to deploy code to production environments'),
-        action: ( link_to _('Trigger this manual action'), play_project_job_path(@project, @build), method: :post, class: 'btn btn-primary', title: _('Trigger this manual action') )
-    - elsif @build.created?
-      = render 'empty_state',
-        illustration: 'illustrations/job_not_triggered.svg',
-        illustration_size: 'svg-306',
-        title: _('This job has not been triggered yet'),
-        content: _('This job depends on upstream jobs that need to succeed in order for this job to be triggered')
+        = render 'shared/builds/build_output'
     - else
-      = render 'empty_state',
-        illustration: 'illustrations/pending_job_empty.svg',
-        illustration_size: 'svg-430',
-        title: _('This job has not started yet'),
-        content: _('This job is in pending state and is waiting to be picked by a runner')
-  = render "sidebar"
+      = render "empty_states"
+
+  = render "sidebar", builds: @builds
 
 .js-build-options{ data: javascript_build_options }
 
-#js-job-details-vue{ data: { endpoint: project_job_path(@project, @build, format: :json) } }
+#js-job-details-vue{ data: { endpoint: project_job_path(@project, @build, format: :json), runner_help_url: help_page_path('ci/runners/README.html', anchor: 'setting-maximum-job-timeout-for-a-runner') } }
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index 9c78bade254..fb5b0fc15c9 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -1,40 +1,44 @@
 - @no_container = true
 - page_title "Labels"
-- hide_class = ''
 - can_admin_label = can?(current_user, :admin_label, @project)
+- hide_class = ''
+
+- if can_admin_label
+  - content_for(:header_content) do
+    .nav-controls
+      = link_to _('New label'), new_project_label_path(@project), class: "btn btn-new"
 
 - if @labels.exists? || @prioritized_labels.exists?
   #promote-label-modal
   %div{ class: container_class }
     .top-area.adjust
       .nav-text
-        Labels can be applied to issues and merge requests.
+        = _('Labels can be applied to issues and merge requests.')
         - if can_admin_label
-          Star a label to make it a priority label. Order the prioritized labels to change their relative priority, by dragging.
+          = _('Star a label to make it a priority label. Order the prioritized labels to change their relative priority, by dragging.')
 
-      - if can_admin_label
-        .nav-controls
-          = link_to new_project_label_path(@project), class: "btn btn-new" do
-            New label
-
-    .labels
+    .labels-container.prepend-top-5
       - if can_admin_label
         -# Only show it in the first page
         - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
         .prioritized-labels{ class: ('hide' if hide) }
-          %h5 Prioritized Labels
-          %ul.content-list.manage-labels-list.js-prioritized-labels{ "data-url" => set_priorities_project_labels_path(@project) }
-            #js-priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty?}" }
+          %h5.prepend-top-10= _('Prioritized Labels')
+          .content-list.manage-labels-list.js-prioritized-labels{ "data-url" => set_priorities_project_labels_path(@project) }
+            #js-priority-labels-empty-state.priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty?}" }
               = render 'shared/empty_states/priority_labels'
             - if @prioritized_labels.present?
-              = render partial: 'shared/label', subject: @project, collection: @prioritized_labels, as: :label
+              = render partial: 'shared/label', subject: @project, collection: @prioritized_labels, as: :label, locals: { force_priority: true }
 
       - if @labels.present?
         .other-labels
           - if can_admin_label
-            %h5{ class: ('hide' if hide) } Other Labels
-          %ul.content-list.manage-labels-list.js-other-labels
+            %h5{ class: ('hide' if hide) }= _('Other Labels')
+          .content-list.manage-labels-list.js-other-labels
             = render partial: 'shared/label', subject: @project, collection: @labels, as: :label
             = paginate @labels, theme: 'gitlab'
 - else
   = render 'shared/empty_states/labels'
+
+%template#js-badge-item-template
+  %li.label-link-item.js-priority-badge.inline.prepend-left-10
+    .label-badge.label-badge-blue= _('Prioritized label')
diff --git a/app/views/projects/mattermosts/_no_teams.html.haml b/app/views/projects/mattermosts/_no_teams.html.haml
index 243dcfdc187..0377cd6586e 100644
--- a/app/views/projects/mattermosts/_no_teams.html.haml
+++ b/app/views/projects/mattermosts/_no_teams.html.haml
@@ -13,4 +13,4 @@
   and try again.
 %hr
 .clearfix
-  = link_to 'Go back', edit_project_service_path(@project, @service), class: 'btn btn-lg pull-right'
+  = link_to 'Go back', edit_project_service_path(@project, @service), class: 'btn btn-lg float-right'
diff --git a/app/views/projects/mattermosts/_team_selection.html.haml b/app/views/projects/mattermosts/_team_selection.html.haml
index 20acd476f73..37c09f12f63 100644
--- a/app/views/projects/mattermosts/_team_selection.html.haml
+++ b/app/views/projects/mattermosts/_team_selection.html.haml
@@ -11,11 +11,11 @@
   - options = options_for_select(mattermost_teams_options(@teams), selected_id)
   = f.select(:team_id, options, { include_blank: 'Select team...'}, { class: 'form-control', disabled: @teams.one?, selected: selected_id, required: true })
   = f.hidden_field(:team_id, value: selected_id, required: true) if @teams.one?
-  .help-block
+  .form-text.text-muted
     - if @teams.one?
-      This is the only available team.
+      This is the only available team that you are a member of.
     - else
-      The list shows all available teams.
+      The list shows all available teams that you are a member of.
     To create a team,
     = link_to "#{Gitlab.config.mattermost.host}/create_team" do
       use Mattermost's interface
@@ -25,7 +25,7 @@
   %h4 Command trigger word
   %p Choose the word that will trigger commands
   = f.text_field(:trigger, value: @project.path, class: 'form-control', required: true)
-  .help-block
+  .form-text.text-muted
     %p
       Trigger word must be unique, and can't begin with a slash or contain any spaces.
       Use the word that works best for your team.
@@ -41,6 +41,6 @@
         = icon('external-link')
   %hr
   .clearfix
-    .pull-right
+    .float-right
       = link_to 'Cancel', edit_project_service_path(@project, @service), class: 'btn btn-lg'
       = f.submit 'Install', class: 'btn btn-save btn-lg'
diff --git a/app/views/projects/mattermosts/new.html.haml b/app/views/projects/mattermosts/new.html.haml
index 15829a3f143..9e293d07cb7 100644
--- a/app/views/projects/mattermosts/new.html.haml
+++ b/app/views/projects/mattermosts/new.html.haml
@@ -1,7 +1,7 @@
 - @body_class = 'card-content'
 
 .service-installation
-  .inline.pull-right
+  .inline.float-right
     = custom_icon('mattermost_logo', size: 48)
   %h3 Install Mattermost Command
   - if @teams.empty?
diff --git a/app/views/projects/merge_requests/_form.html.haml b/app/views/projects/merge_requests/_form.html.haml
index 9607a7b5d06..179c1fcc684 100644
--- a/app/views/projects/merge_requests/_form.html.haml
+++ b/app/views/projects/merge_requests/_form.html.haml
@@ -1,2 +1,2 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal common-note-form js-requires-input js-quick-submit' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @merge_request
diff --git a/app/views/projects/merge_requests/_how_to_merge.html.haml b/app/views/projects/merge_requests/_how_to_merge.html.haml
index 54a661040ea..62dd21ef6e0 100644
--- a/app/views/projects/merge_requests/_how_to_merge.html.haml
+++ b/app/views/projects/merge_requests/_how_to_merge.html.haml
@@ -1,9 +1,10 @@
-#modal_merge_info.modal
+#modal_merge_info.modal{ tabindex: '-1' }
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
-        %h3 Check out, review, and merge locally
+        %h3.modal-title Check out, review, and merge locally
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
       .modal-body
         %p
           %strong Step 1.
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index a94267deeb2..cd3d896fff2 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -9,21 +9,21 @@
         %span.merge-request-title-text
           = link_to merge_request.title, merge_request_path(merge_request)
         - if merge_request.tasks?
-          %span.task-status.hidden-xs
+          %span.task-status.d-none.d-sm-inline-block
             &nbsp;
             = merge_request.task_status
 
       .issuable-info
         %span.issuable-reference
           #{issuable_reference(merge_request)}
-        %span.issuable-authored.hidden-xs
+        %span.issuable-authored.d-none.d-sm-inline-block
           &middot;
           opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
           by #{link_to_member(@project, merge_request.author, avatar: false)}
         - if merge_request.milestone
-          %span.issuable-milestone.hidden-xs
+          %span.issuable-milestone.d-none.d-sm-inline-block
             &nbsp;
-            = link_to project_merge_requests_path(merge_request.project, milestone_title: merge_request.milestone.title), data: { html: 1, toggle: 'tooltip', title: issuable_milestone_tooltip_title(merge_request) } do
+            = link_to project_merge_requests_path(merge_request.project, milestone_title: merge_request.milestone.title), data: { html: 'true', toggle: 'tooltip', title: milestone_tooltip_due_date(merge_request.milestone) } do
               = icon('clock-o')
               = merge_request.milestone.title
         - if merge_request.target_project.default_branch != merge_request.target_branch
@@ -40,17 +40,17 @@
     .issuable-meta
       %ul.controls
         - if merge_request.merged?
-          %li.issuable-status.hidden-xs
+          %li.issuable-status.d-none.d-sm-inline-block
             MERGED
         - elsif merge_request.closed?
-          %li.issuable-status.hidden-xs
+          %li.issuable-status.d-none.d-sm-inline-block
             = icon('ban')
             CLOSED
         - if merge_request.head_pipeline
-          %li.issuable-pipeline-status.hidden-xs
+          %li.issuable-pipeline-status.d-none.d-sm-inline-block
             = render_pipeline_status(merge_request.head_pipeline)
         - if merge_request.open? && merge_request.broken?
-          %li.issuable-pipeline-broken.hidden-xs
+          %li.issuable-pipeline-broken.d-none.d-sm-inline-block
             = link_to merge_request_path(merge_request), class: "has-tooltip", title: _('Cannot be merged automatically') do
               = icon('exclamation-triangle')
         - if merge_request.assignee
@@ -59,5 +59,5 @@
 
         = render 'shared/issuable_meta_data', issuable: merge_request
 
-      .pull-right.issuable-updated-at.hidden-xs
+      .float-right.issuable-updated-at.d-none.d-sm-inline-block
         %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 22c8b6b513d..a58179091ae 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -7,8 +7,8 @@
 .detail-page-header
   .detail-page-header-body
     .issuable-status-box.status-box{ class: status_box_class(@merge_request) }
-      = sprite_icon(@merge_request.state_icon_name, size: 16, css_class: 'hidden-sm hidden-md hidden-lg')
-      %span.hidden-xs
+      = sprite_icon(@merge_request.state_icon_name, size: 16, css_class: 'd-block d-sm-none')
+      %span.d-none.d-sm-block
         = @merge_request.state_human_name
 
     .issuable-meta
@@ -16,15 +16,15 @@
         .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
       = issuable_meta(@merge_request, @project, "Merge request")
 
-    %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
+    %a.btn.btn-default.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
       = icon('angle-double-left')
 
   .detail-page-header-actions.js-issuable-actions
     .clearfix.issue-btn-group.dropdown
-      %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
+      %button.btn.btn-default.float-left.d-md-none.d-lg-none.d-xl-none{ type: "button", data: { toggle: "dropdown" } }
         Options
         = icon('caret-down')
-      .dropdown-menu.dropdown-menu-align-right.hidden-lg
+      .dropdown-menu.dropdown-menu-right.d-lg-none.d-xl-none
         %ul
           - if can_update_merge_request
             %li= link_to 'Edit', edit_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
@@ -37,6 +37,6 @@
               = link_to 'Reopen', merge_request_path(@merge_request, merge_request: { state_event: :reopen }), method: :put, class: 'reopen-mr-link', title: 'Reopen merge request'
 
       - if can_update_merge_request
-        = link_to 'Edit', edit_project_merge_request_path(@project, @merge_request), class: "hidden-xs hidden-sm btn btn-grouped js-issuable-edit"
+        = link_to 'Edit', edit_project_merge_request_path(@project, @merge_request), class: "d-none d-sm-none d-md-block btn btn-grouped js-issuable-edit"
 
       = render 'shared/issuable/close_reopen_button', issuable: @merge_request, can_update: can_update_merge_request
diff --git a/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml b/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
index 964dc40a213..e6205f24ae6 100644
--- a/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
+++ b/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
@@ -11,6 +11,6 @@
       Showing
       %strong.cred {{conflictsCountText}}
       between
-      %strong {{conflictsData.sourceBranch}}
+      %strong.ref-name {{conflictsData.sourceBranch}}
       and
-      %strong {{conflictsData.targetBranch}}
+      %strong.ref-name {{conflictsData.targetBranch}}
diff --git a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml b/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
index 13026b7566a..4d84ee2488b 100644
--- a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
+++ b/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
@@ -1,16 +1,24 @@
-.form-horizontal.resolve-conflicts-form
-  .form-group
-    %label.col-sm-2.control-label{ "for" => "commit-message" }
-      #{ _('Commit message') }
-    .col-sm-10
+- branch_name = link_to @merge_request.source_branch, project_tree_path(@merge_request.project, @merge_request.source_branch), class: "ref-name"
+- translation =_('You can resolve the merge conflict using either the Interactive mode, by choosing %{use_ours} or %{use_theirs} buttons, or by editing the files directly. Commit these changes into %{branch_name}') % { use_ours: '<code>Use Ours</code>', use_theirs: '<code>Use Theirs</code>', branch_name: branch_name }
+
+%hr
+.resolve-conflicts-form
+  .form-group.row
+    .col-md-4
+      %h4= _('Resolve conflicts on source branch')
+      .resolve-info
+        = translation.html_safe
+    .col-md-8
+      %label.label-light{ "for" => "commit-message" }
+        #{ _('Commit message') }
       .commit-message-container
         .max-width-marker
         %textarea.form-control.js-commit-message#commit-message{ "v-model" => "conflictsData.commitMessage", "rows" => "5" }
-  .form-group
-    .col-sm-offset-2.col-sm-10
+  .form-group.row
+    .offset-md-4.col-md-8
       .row
-        .col-xs-6
+        .col-6
           %button.btn.btn-success.js-submit-button{ type: "button", "@click" => "commit()", ":disabled" => "!readyToCommit" }
             %span {{commitButtonText}}
-        .col-xs-6.text-right
+        .col-6.text-right
           = link_to "Cancel", project_merge_request_path(@merge_request.project, @merge_request), class: "btn btn-cancel"
diff --git a/app/views/projects/merge_requests/creations/_new_compare.html.haml b/app/views/projects/merge_requests/creations/_new_compare.html.haml
index 9d5cebdda53..ca0f7d6098f 100644
--- a/app/views/projects/merge_requests/creations/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml
@@ -1,17 +1,17 @@
 %h3.page-title
   New Merge Request
 
-= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], url: project_new_merge_request_path(@project), method: :get, html: { class: "merge-request-form form-inline js-requires-input" } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], url: project_new_merge_request_path(@project), method: :get, html: { class: "merge-request-form js-requires-input" } do |f|
   .hide.alert.alert-danger.mr-compare-errors
-  .merge-request-branches.js-merge-request-new-compare.row{ 'data-target-project-url': project_new_merge_request_update_branches_path(@source_project), 'data-source-branch-url': project_new_merge_request_branch_from_path(@source_project), 'data-target-branch-url': project_new_merge_request_branch_to_path(@source_project) }
-    .col-md-6
-      .panel.panel-default.panel-new-merge-request
-        .panel-heading
+  .js-merge-request-new-compare.row{ 'data-source-branch-url': project_new_merge_request_branch_from_path(@source_project), 'data-target-branch-url': project_new_merge_request_branch_to_path(@source_project) }
+    .col-lg-6
+      .card.card-new-merge-request
+        .card-header
           Source branch
-        .panel-body.clearfix
+        .card-body.clearfix
           .merge-request-select.dropdown
             = f.hidden_field :source_project_id
-            = dropdown_toggle @merge_request.source_project_path, { toggle: "dropdown", field_name: "#{f.object_name}[source_project_id]", disabled: @merge_request.persisted? }, { toggle_class: "js-compare-dropdown js-source-project" }
+            = dropdown_toggle @merge_request.source_project_path, { toggle: "dropdown", 'field-name': "#{f.object_name}[source_project_id]", disabled: @merge_request.persisted? }, { toggle_class: "js-compare-dropdown js-source-project" }
             .dropdown-menu.dropdown-menu-selectable.dropdown-source-project
               = dropdown_title("Select source project")
               = dropdown_filter("Search projects")
@@ -21,27 +21,25 @@
                   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 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
-                = render 'projects/merge_requests/dropdowns/branch',
-                  branches: @merge_request.source_branches,
-                  selected: f.object.source_branch
+            = dropdown_toggle f.object.source_branch || _("Select source branch"), { toggle: "dropdown", 'field-name': "#{f.object_name}[source_branch]", 'refs-url': refs_project_path(@source_project), selected: f.object.source_branch }, { toggle_class: "js-compare-dropdown js-source-branch git-revision-dropdown-toggle" }
+            .dropdown-menu.dropdown-menu-selectable.js-source-branch-dropdown.git-revision-dropdown
+              = dropdown_title(_("Select source branch"))
+              = dropdown_filter(_("Search branches"))
+              = dropdown_content
+              = dropdown_loading
         .panel-footer
           .text-center= icon('spinner spin', class: 'js-source-loading')
           %ul.list-unstyled.mr_source_commit
 
-    .col-md-6
-      .panel.panel-default.panel-new-merge-request
-        .panel-heading
+    .col-lg-6
+      .card.card-new-merge-request
+        .card-header
           Target branch
-        .panel-body.clearfix
+        .card-body.clearfix
           - projects = target_projects(@project)
           .merge-request-select.dropdown
             = f.hidden_field :target_project_id
-            = dropdown_toggle f.object.target_project.full_path, { toggle: "dropdown", field_name: "#{f.object_name}[target_project_id]", disabled: @merge_request.persisted? }, { toggle_class: "js-compare-dropdown js-target-project" }
+            = dropdown_toggle f.object.target_project.full_path, { toggle: "dropdown", 'field-name': "#{f.object_name}[target_project_id]", disabled: @merge_request.persisted? }, { toggle_class: "js-compare-dropdown js-target-project" }
             .dropdown-menu.dropdown-menu-selectable.dropdown-target-project
               = dropdown_title("Select target project")
               = dropdown_filter("Search projects")
@@ -51,15 +49,13 @@
                   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 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
-                = render 'projects/merge_requests/dropdowns/branch',
-                  branches: @merge_request.target_branches,
-                  selected: f.object.target_branch
-        .panel-footer
+            = dropdown_toggle f.object.target_branch, { toggle: "dropdown", 'field-name': "#{f.object_name}[target_branch]", 'refs-url': refs_project_path(f.object.target_project), selected: f.object.target_branch }, { toggle_class: "js-compare-dropdown js-target-branch git-revision-dropdown-toggle" }
+            .dropdown-menu.dropdown-menu-selectable.js-target-branch-dropdown.git-revision-dropdown
+              = dropdown_title(_("Select target branch"))
+              = dropdown_filter(_("Search branches"))
+              = dropdown_content
+              = dropdown_loading
+        .card-footer
           .text-center= icon('spinner spin', class: "js-target-loading")
           %ul.list-unstyled.mr_target_commit
 
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index 376ac377562..b2eacabc21a 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -7,10 +7,10 @@
   %span into
   %strong.ref-name= target_title
 
-  %span.pull-right
+  %span.float-right
     = link_to 'Change branches', mr_change_branches_path(@merge_request)
 %hr
-= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal common-note-form js-requires-input js-quick-submit' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @merge_request, commits: @commits
   = f.hidden_field :source_project_id
   = f.hidden_field :source_branch
@@ -24,20 +24,20 @@
         There are no commits yet.
       = custom_icon ('illustration_no_commits')
   - else
-    %ul.merge-request-tabs.nav-links.no-top.no-bottom
-      %li.commits-tab.active
-        = link_to url_for(params), data: {target: 'div#commits', action: 'new', toggle: 'tab'} do
+    %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom
+      %li.commits-tab
+        = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tab'} do
           Commits
-          %span.badge= @commits.size
+          %span.badge.badge-pill= @commits.size
       - if @pipelines.any?
         %li.builds-tab
-          = link_to url_for(params.merge(action: 'pipelines')), data: {target: 'div#pipelines', action: 'pipelines', toggle: 'tab'} do
+          = link_to url_for(safe_params.merge(action: 'pipelines')), data: {target: 'div#pipelines', action: 'pipelines', toggle: 'tab'} do
             Pipelines
-            %span.badge= @pipelines.size
+            %span.badge.badge-pill= @pipelines.size
       %li.diffs-tab
-        = link_to url_for(params.merge(action: 'diffs')), data: {target: 'div#diffs', action: 'diffs', toggle: 'tab'} do
+        = link_to url_for(safe_params.merge(action: 'diffs')), data: {target: 'div#diffs', action: 'diffs', toggle: 'tab'} do
           Changes
-          %span.badge= @merge_request.diff_size
+          %span.badge.badge-pill= @merge_request.diff_size
 
     .tab-content
       #commits.commits.tab-pane.active
@@ -46,7 +46,7 @@
         -# This tab is always loaded via AJAX
       - if @pipelines.any?
         #pipelines.pipelines.tab-pane
-          = render 'projects/merge_requests/pipelines', endpoint: url_for(params.merge(action: 'pipelines', format: :json)), disable_initialization: true
+          = render 'projects/merge_requests/pipelines', endpoint: url_for(safe_params.merge(action: 'pipelines', format: :json)), disable_initialization: true
 
   .mr-loading-status
     = spinner
diff --git a/app/views/projects/merge_requests/diffs/_commit_widget.html.haml b/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
index 2e5594f8cbe..dab95b97346 100644
--- a/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
+++ b/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
@@ -1,5 +1,5 @@
 - if @commit
-  .info-well.hidden-xs.prepend-top-default
+  .info-well.d-none.d-sm-block.prepend-top-default
     .well-segment
       %ul.blob-commit-info
         = render 'projects/commits/commit', commit: @commit, merge_request: @merge_request, view_details: true
diff --git a/app/views/projects/merge_requests/diffs/_diffs.html.haml b/app/views/projects/merge_requests/diffs/_diffs.html.haml
index 986ba5ae02d..bf3df0abf86 100644
--- a/app/views/projects/merge_requests/diffs/_diffs.html.haml
+++ b/app/views/projects/merge_requests/diffs/_diffs.html.haml
@@ -5,9 +5,9 @@
 
 - if @merge_request_diff&.empty?
   .row.empty-state.nothing-here-block
-    .col-xs-12
+    .col-12
       .svg-content= image_tag 'illustrations/merge_request_changes_empty.svg'
-    .col-xs-12
+    .col-12
       .text-content.text-center
         %p
           No changes between
@@ -16,6 +16,6 @@
           %span.ref-name= @merge_request.target_branch
           .text-center= link_to 'Create commit', project_new_blob_path(@project, @merge_request.source_branch), class: 'btn btn-save'
 - else
-  - diff_viewable = @merge_request_diff ? @merge_request_diff.collected? || @merge_request_diff.overflow? : true
+  - diff_viewable = @merge_request_diff ? @merge_request_diff.viewable? : true
   - if diff_viewable
     = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, merge_request: true
diff --git a/app/views/projects/merge_requests/diffs/_not_all_comments_displayed.html.haml b/app/views/projects/merge_requests/diffs/_not_all_comments_displayed.html.haml
index 529fbb8547a..8d7138747fb 100644
--- a/app/views/projects/merge_requests/diffs/_not_all_comments_displayed.html.haml
+++ b/app/views/projects/merge_requests/diffs/_not_all_comments_displayed.html.haml
@@ -11,7 +11,7 @@
             comparing two versions of the diff
           - else
             viewing an old version of the diff
-      .pull-right
+      .float-right
         = link_to diffs_project_merge_request_path(@merge_request.project, @merge_request), class: 'btn btn-sm' do
           Show latest version
           = "of the diff" if @commit
diff --git a/app/views/projects/merge_requests/diffs/_version_controls.html.haml b/app/views/projects/merge_requests/diffs/_version_controls.html.haml
index 1c26f0405d2..52bf584d550 100644
--- a/app/views/projects/merge_requests/diffs/_version_controls.html.haml
+++ b/app/views/projects/merge_requests/diffs/_version_controls.html.haml
@@ -3,7 +3,7 @@
     .mr-version-menus-container.content-block
       Changes between
       %span.dropdown.inline.mr-version-dropdown
-        %a.dropdown-toggle.btn.btn-default{ data: {toggle: :dropdown} }
+        %a.dropdown-toggle.btn.btn-default{ data: { toggle: :dropdown, display: 'static' } }
           %span
             - if @merge_request_diff.latest?
               latest version
@@ -36,7 +36,7 @@
       - if @merge_request_diff.base_commit_sha
         and
         %span.dropdown.inline.mr-version-compare-dropdown
-          %a.btn.btn-default.dropdown-toggle{ data: {toggle: :dropdown} }
+          %a.btn.btn-default.dropdown-toggle{ data: { toggle: :dropdown, display: 'static' } }
             - if @start_version
               version #{version_index(@start_version)}
             - else
diff --git a/app/views/projects/merge_requests/dropdowns/_project.html.haml b/app/views/projects/merge_requests/dropdowns/_project.html.haml
index aaf1ab00eeb..b3cf3c1d369 100644
--- a/app/views/projects/merge_requests/dropdowns/_project.html.haml
+++ b/app/views/projects/merge_requests/dropdowns/_project.html.haml
@@ -1,5 +1,5 @@
 %ul
   - projects.each do |project|
     %li
-      %a{ href: "#", class: "#{('is-active' if selected == project.id)}", data: { id: project.id } }
+      %a{ href: "#", class: "#{('is-active' if selected == project.id)}", data: { id: project.id, 'refs-url': refs_project_path(project) } }
         = project.full_path
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index b2c0d9e1cfa..623380c9c61 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -1,6 +1,6 @@
 - @no_container = true
 - @can_bulk_update = can?(current_user, :admin_merge_request, @project)
-- merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
+- merge_project = merge_request_source_project_for_project(@project)
 - new_merge_request_path = project_new_merge_request_path(merge_project) if merge_project
 
 - page_title "Merge Requests"
diff --git a/app/views/projects/merge_requests/invalid.html.haml b/app/views/projects/merge_requests/invalid.html.haml
index 6df19d6438b..749228a9664 100644
--- a/app/views/projects/merge_requests/invalid.html.haml
+++ b/app/views/projects/merge_requests/invalid.html.haml
@@ -10,13 +10,13 @@
       - if @merge_request.for_fork? && !@merge_request.source_project
         fork project was removed
       - elsif !@merge_request.source_branch_exists?
-        %span.label.label-inverse= @merge_request.source_branch
+        %span.badge.badge-inverse= @merge_request.source_branch
         does not exist in
-        %span.label.label-info= @merge_request.source_project_path
+        %span.badge.badge-info= @merge_request.source_project_path
       - elsif !@merge_request.target_branch_exists?
-        %span.label.label-inverse= @merge_request.target_branch
+        %span.badge.badge-inverse= @merge_request.target_branch
         does not exist in
-        %span.label.label-info= @merge_request.target_project_path
+        %span.badge.badge-info= @merge_request.target_project_path
       - else
         of internal error
 
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 9866cc716ee..b23baa22d8b 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -20,6 +20,8 @@
       window.gl = window.gl || {};
       window.gl.mrWidgetData = #{serialize_issuable(@merge_request, serializer: 'widget')}
 
+      window.gl.mrWidgetData.squash_before_merge_help_path = '#{help_page_path("user/project/merge_requests/squash_and_merge")}';
+
     #js-vue-mr-widget.mr-widget
 
     .content-block.content-block-small.emoji-list-container.js-noteable-awards
@@ -30,45 +32,27 @@
         .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
-                = tab_link_for @merge_request, :show, force_link: @commit.present? do
-                  Discussion
-                  %span.badge= @merge_request.related_notes.user.count
-              - if @merge_request.source_project
-                %li.commits-tab
-                  = tab_link_for @merge_request, :commits do
-                    Commits
-                    %span.badge= @commits_count
-              - if @pipelines.any?
-                %li.pipelines-tab
-                  = tab_link_for @merge_request, :pipelines do
-                    Pipelines
-                    %span.badge.js-pipelines-mr-count= @pipelines.size
-              %li.diffs-tab
-                = tab_link_for @merge_request, :diffs do
-                  Changes
-                  %span.badge= @merge_request.diff_size
+          %ul.merge-request-tabs.nav-tabs.nav.nav-links.scrolling-tabs
+            %li.notes-tab
+              = tab_link_for @merge_request, :show, force_link: @commit.present? do
+                Discussion
+                %span.badge.badge-pill= @merge_request.related_notes.user.count
+            - if @merge_request.source_project
+              %li.commits-tab
+                = tab_link_for @merge_request, :commits do
+                  Commits
+                  %span.badge.badge-pill= @commits_count
+            - if @pipelines.any?
+              %li.pipelines-tab
+                = tab_link_for @merge_request, :pipelines do
+                  Pipelines
+                  %span.badge.badge-pill.js-pipelines-mr-count= @pipelines.size
+            %li.diffs-tab
+              = tab_link_for @merge_request, :diffs do
+                Changes
+                %span.badge.badge-pill= @merge_request.diff_size
 
-        - if has_vue_discussions_cookie?
-          #js-vue-discussion-counter
-        - else
-          #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 }" }
-                    %template{ 'v-if' => 'resolvedDiscussionCount === discussionCount' }
-                      = render 'shared/icons/icon_status_success_solid.svg'
-                    %template{ 'v-else' => '' }
-                      = render 'shared/icons/icon_resolve_discussion.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"
+        #js-vue-discussion-counter
 
     .tab-content#diff-notes-app
       #notes.notes.tab-pane.voting_notes
@@ -76,19 +60,21 @@
           %section.col-md-12
             %script.js-notes-data{ type: "application/json" }= initial_notes_data(true).to_json.html_safe
             .issuable-discussion.js-vue-notes-event
-              = render "projects/merge_requests/discussion"
-              - if has_vue_discussions_cookie?
-                #js-vue-mr-discussions{ data: { notes_data: notes_data(@merge_request),
-                  noteable_data: serialize_issuable(@merge_request),
-                  current_user_data: UserSerializer.new.represent(current_user).to_json} }
+              #js-vue-mr-discussions{ data: { notes_data: notes_data(@merge_request),
+                noteable_data: serialize_issuable(@merge_request),
+                noteable_type: 'MergeRequest',
+                target_type: 'merge_request',
+                current_user_data: UserSerializer.new(project: @project).represent(current_user, {}, MergeRequestUserEntity).to_json} }
 
       #commits.commits.tab-pane
         -# This tab is always loaded via AJAX
       #pipelines.pipelines.tab-pane
         - if @pipelines.any?
           = render 'projects/commit/pipelines_list', disable_initialization: true, endpoint: pipelines_project_merge_request_path(@project, @merge_request)
-      #diffs.diffs.tab-pane{ data: { "is-locked" => @merge_request.discussion_locked? } }
-        -# This tab is always loaded via AJAX
+      #js-diffs-app.diffs.tab-pane{ data: { "is-locked" => @merge_request.discussion_locked?,
+        endpoint: diffs_project_merge_request_path(@project, @merge_request, 'json', request.query_parameters),
+        current_user_data: UserSerializer.new(project: @project).represent(current_user, {}, MergeRequestUserEntity).to_json,
+        project_path: project_path(@merge_request.project)} }
 
     .mr-loading-status
       = spinner
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index 2e74b1b83cb..4cc59718715 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -1,13 +1,13 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @milestone], html: {class: 'form-horizontal milestone-form common-note-form js-quick-submit js-requires-input'}  do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @milestone], html: {class: 'milestone-form common-note-form js-quick-submit js-requires-input'}  do |f|
   = form_errors(@milestone)
   .row
     .col-md-6
-      .form-group
-        = f.label :title, "Title", class: "control-label"
+      .form-group.row
+        = f.label :title, "Title", class: "col-form-label col-sm-2"
         .col-sm-10
           = f.text_field :title, maxlength: 255, class: "form-control", required: true, autofocus: true
-      .form-group.milestone-description
-        = f.label :description, "Description", class: "control-label"
+      .form-group.row.milestone-description
+        = f.label :description, "Description", class: "col-form-label col-sm-2"
         .col-sm-10
           = 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...'
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index b423888c875..f7b04c436a6 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -30,6 +30,7 @@
           %button.js-promote-project-milestone-button.btn.btn-grouped{ data: { toggle: 'modal',
             target: '#promote-milestone-modal',
             milestone_title: @milestone.title,
+            group_name: @project.group.name,
             url: promote_project_milestone_path(@milestone.project, @milestone),
             container: 'body' },
             disabled: true,
@@ -55,7 +56,7 @@
 
         #delete-milestone-modal
 
-      %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" }
+      %a.btn.btn-default.btn-grouped.float-right.d-block.d-sm-none.js-sidebar-toggle{ href: "#" }
         = icon('angle-double-left')
 
   .detail-page-description.milestone-detail
@@ -68,6 +69,8 @@
           .wiki
             = markdown_field(@milestone, :description)
 
+  = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
+
   - if can?(current_user, :read_issue, @project) && @milestone.total_items_count(current_user).zero?
     .alert.alert-success.prepend-top-default
       %span Assign some issues to this milestone.
diff --git a/app/views/projects/mirrors/_instructions.html.haml b/app/views/projects/mirrors/_instructions.html.haml
new file mode 100644
index 00000000000..64f0fde30cf
--- /dev/null
+++ b/app/views/projects/mirrors/_instructions.html.haml
@@ -0,0 +1,10 @@
+.account-well.prepend-top-default.append-bottom-default
+  %ul
+    %li
+      The repository must be accessible over <code>http://</code>, <code>https://</code>, <code>ssh://</code> or <code>git://</code>.
+    %li
+      Include the username in the URL if required: <code>https://username@gitlab.company.com/group/project.git</code>.
+    %li
+      The update action will time out after 10 minutes. For big repositories, use a clone/push combination.
+    %li
+      The Git LFS objects will <strong>not</strong> be synced.
diff --git a/app/views/projects/mirrors/_push.html.haml b/app/views/projects/mirrors/_push.html.haml
new file mode 100644
index 00000000000..c3dcd9617a6
--- /dev/null
+++ b/app/views/projects/mirrors/_push.html.haml
@@ -0,0 +1,50 @@
+- expanded = Rails.env.test?
+%section.settings.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      Push to a remote repository
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Set up the remote repository that you want to update with the content of the current repository
+      every time someone pushes to it.
+      = link_to 'Read more', help_page_path('workflow/repository_mirroring', anchor: 'pushing-to-a-remote-repository'), target: '_blank'
+  .settings-content
+    = form_for @project, url: project_mirror_path(@project) do |f|
+      %div
+        = form_errors(@project)
+      = render "shared/remote_mirror_update_button", remote_mirror: @remote_mirror
+      - if @remote_mirror.last_error.present?
+        .panel.panel-danger
+          .panel-heading
+            - if @remote_mirror.last_update_at
+              The remote repository failed to update #{time_ago_with_tooltip(@remote_mirror.last_update_at)}.
+            - else
+              The remote repository failed to update.
+
+            - if @remote_mirror.last_successful_update_at
+              Last successful update #{time_ago_with_tooltip(@remote_mirror.last_successful_update_at)}.
+          .panel-body
+            %pre
+              :preserve
+                #{h(@remote_mirror.last_error.strip)}
+      = f.fields_for :remote_mirrors, @remote_mirror do |rm_form|
+        .form-group
+          = rm_form.check_box :enabled, class: "float-left"
+          .prepend-left-20
+            = rm_form.label :enabled, "Remote mirror repository", class: "label-light append-bottom-0"
+            %p.light.append-bottom-0
+              Automatically update the remote mirror's branches, tags, and commits from this repository every time someone pushes to it.
+        .form-group.has-feedback
+          = rm_form.label :url, "Git repository URL", class: "label-light"
+          = rm_form.text_field :url, class: "form-control", placeholder: 'https://username:password@gitlab.company.com/group/project.git'
+
+          = render "projects/mirrors/instructions"
+
+        .form-group
+          = rm_form.check_box :only_protected_branches, class: 'float-left'
+          .prepend-left-20
+            = rm_form.label :only_protected_branches, class: 'label-light'
+            = link_to icon('question-circle'), help_page_path('user/project/protected_branches')
+
+        = f.submit 'Save changes', class: 'btn btn-create', name: 'update_remote_mirror'
diff --git a/app/views/projects/mirrors/_show.html.haml b/app/views/projects/mirrors/_show.html.haml
new file mode 100644
index 00000000000..de77701a373
--- /dev/null
+++ b/app/views/projects/mirrors/_show.html.haml
@@ -0,0 +1,3 @@
+- if can?(current_user, :admin_remote_mirror, @project)
+  = render 'projects/mirrors/push'
+
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 4b7be9a223f..2d3f9116703 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -9,9 +9,9 @@
         = button_tag class: 'btn btn-success' do
           = icon('search')
         .inline.prepend-left-20
-          .checkbox.light
-            = label_tag :filter_ref do
-              = check_box_tag :filter_ref, 1, @options[:filter_ref]
+          .form-check.light
+            = check_box_tag :filter_ref, 1, @options[:filter_ref], class: 'form-check-input'
+            = label_tag :filter_ref, class: 'form-check-label' do
               %span= _("Begin with the selected commit")
 
     - if @commit
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 8cdb0a6aff4..5bb1bfb7059 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -18,8 +18,6 @@
         = _('A project is where you house your files (repository), plan your work (issues), and publish your documentation (wiki), %{among_other_things_link}.').html_safe % { among_other_things_link: among_other_things_link }
       %p
         = _('All features are enabled for blank projects, from templates, or when importing, but you can disable them afterward in the project settings.')
-      -# EE-specific start
-      -# EE-specific end
       .md
         = brand_new_project_guidelines
       %p
@@ -30,21 +28,19 @@
         %template.push-new-project-tip-template= render partial: "new_project_push_tip"
 
     .col-lg-9.js-toggle-container
-      %ul.nav-links.gitlab-tabs{ role: 'tablist' }
-        %li{ class: active_when(active_tab == 'blank'), role: 'presentation' }
-          %a{ href: '#blank-project-pane', id: 'blank-project-tab', data: { toggle: 'tab' }, role: 'tab' }
-            %span.hidden-xs Blank project
-            %span.visible-xs Blank
-        %li{ class: active_when(active_tab == 'template'), role: 'presentation' }
-          %a{ href: '#create-from-template-pane', id: 'create-from-template-tab', data: { toggle: 'tab' }, role: 'tab' }
-            %span.hidden-xs Create from template
-            %span.visible-xs Template
-        %li{ class: active_when(active_tab == 'import'), role: 'presentation' }
-          %a{ href: '#import-project-pane', id: 'import-project-tab', data: { toggle: 'tab' }, role: 'tab' }
-            %span.hidden-xs Import project
-            %span.visible-xs Import
-        -# EE-specific start
-        -# EE-specific end
+      %ul.nav.nav-tabs.nav-links.gitlab-tabs{ role: 'tablist' }
+        %li.nav-item{ role: 'presentation' }
+          %a.nav-link.active{ href: '#blank-project-pane', id: 'blank-project-tab', data: { toggle: 'tab' }, role: 'tab' }
+            %span.d-none.d-sm-block Blank project
+            %span.d-block.d-sm-none Blank
+        %li.nav-item{ role: 'presentation' }
+          %a.nav-link{ href: '#create-from-template-pane', id: 'create-from-template-tab', data: { toggle: 'tab' }, role: 'tab' }
+            %span.d-none.d-sm-block Create from template
+            %span.d-block.d-sm-none Template
+        %li.nav-item{ role: 'presentation' }
+          %a.nav-link{ href: '#import-project-pane', id: 'import-project-tab', data: { toggle: 'tab' }, role: 'tab' }
+            %span.d-none.d-sm-block Import project
+            %span.d-block.d-sm-none Import
 
       .tab-content.gitlab-tab-content
         .tab-pane{ id: 'blank-project-pane', class: active_when(active_tab == 'blank'), role: 'tabpanel' }
@@ -61,60 +57,13 @@
         .tab-pane.import-project-pane.js-toggle-container{ id: 'import-project-pane', class: active_when(active_tab == 'import'), role: 'tabpanel' }
           = form_for @project, html: { class: 'new_project' } do |f|
             - if import_sources_enabled?
-              .project-import.row
-                .col-lg-12
-                  .form-group.import-btn-container.clearfix
-                    = f.label :visibility_level, class: 'label-light' do #the label here seems wrong
-                      Import project from
-                    .import-buttons
-                      - if gitlab_project_import_enabled?
-                        .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
-                          = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
-                            = icon('gitlab', text: 'GitLab export')
-                      %div
-                        - if github_import_enabled?
-                          = link_to new_import_github_path, class: 'btn js-import-github' do
-                            = icon('github', text: 'GitHub')
-                      %div
-                        - if bitbucket_import_enabled?
-                          = link_to status_import_bitbucket_path, class: "btn import_bitbucket #{'how_to_import_link' unless bitbucket_import_configured?}" do
-                            = icon('bitbucket', text: 'Bitbucket')
-                          - unless bitbucket_import_configured?
-                            = render 'bitbucket_import_modal'
-                      %div
-                        - if gitlab_import_enabled?
-                          = link_to status_import_gitlab_path, class: "btn import_gitlab #{'how_to_import_link' unless gitlab_import_configured?}" do
-                            = icon('gitlab', text: 'GitLab.com')
-                          - unless gitlab_import_configured?
-                            = render 'gitlab_import_modal'
-                      %div
-                        - if google_code_import_enabled?
-                          = link_to new_import_google_code_path, class: 'btn import_google_code' do
-                            = icon('google', text: 'Google Code')
-                      %div
-                        - if fogbugz_import_enabled?
-                          = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
-                            = icon('bug', text: 'Fogbugz')
-                      %div
-                        - if gitea_import_enabled?
-                          = link_to new_import_gitea_path, class: 'btn import_gitea' do
-                            = custom_icon('go_logo')
-                            Gitea
-                      %div
-                        - if git_import_enabled?
-                          %button.btn.js-toggle-button.js-import-git-toggle-button{ type: "button", data: { toggle_open_class: 'active' } }
-                            = icon('git', text: 'Repo by URL')
-                .col-lg-12
-                  .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
-                    %hr
-                      = render "shared/import_form", f: f
-                      = render 'new_project_fields', f: f, project_name_id: "import-url-name"
+              = render 'import_project_pane', f: f, active_tab: active_tab
+            - else
+              .nothing-here-block
+                %h4 No import options available
+                %p Contact an administrator to enable options for importing your project.
 
-
-        -# EE-specific start
-        -# EE-specific end
-
-.save-project-loader.hide
+.save-project-loader.d-none
   .center
     %h2
       %i.fa.fa-spinner.fa-spin
diff --git a/app/views/projects/no_repo.html.haml b/app/views/projects/no_repo.html.haml
index ba5845877e5..08772a0188b 100644
--- a/app/views/projects/no_repo.html.haml
+++ b/app/views/projects/no_repo.html.haml
@@ -1,3 +1,5 @@
+- breadcrumb_title _("Details")
+
 %h2
   %i.fa.fa-warning
   #{ _('No repository') }
@@ -10,7 +12,7 @@
 
 .no-repo-actions
   = link_to project_repository_path(@project), method: :post, class: 'btn btn-primary' do
-    #{ _('Create empty bare repository') }
+    #{ _('Create empty repository') }
 
   %strong.prepend-left-10.append-right-10 or
 
@@ -19,4 +21,4 @@
 
 - if can? current_user, :remove_project, @project
   .prepend-top-20
-    = link_to _('Remove project'), project_path(@project), data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right"
+    = link_to _('Remove project'), project_path(@project), data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-inverted btn-remove float-right"
diff --git a/app/views/projects/notes/_actions.html.haml b/app/views/projects/notes/_actions.html.haml
index 5ea653ccad5..b4fe1cabdfd 100644
--- a/app/views/projects/notes/_actions.html.haml
+++ b/app/views/projects/notes/_actions.html.haml
@@ -36,7 +36,7 @@
           %template{ 'v-else' => '' }
             = render 'shared/icons/icon_resolve_discussion.svg'
 
-- if current_user
+- if can?(current_user, :award_emoji, note)
   - if note.emoji_awardable?
     - user_authored = note.user_authored?(current_user)
     .note-actions-item
diff --git a/app/views/projects/pages/_access.html.haml b/app/views/projects/pages/_access.html.haml
index 82e20eeebb3..73ea30e1d3d 100644
--- a/app/views/projects/pages/_access.html.haml
+++ b/app/views/projects/pages/_access.html.haml
@@ -1,8 +1,8 @@
 - if @project.pages_deployed?
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Access pages
-    .panel-body
+    .card-body
       %p
         %strong
           Congratulations! Your pages are served under:
diff --git a/app/views/projects/pages/_destroy.haml b/app/views/projects/pages/_destroy.haml
index 7d6c30b7f8d..9b77c4e3494 100644
--- a/app/views/projects/pages/_destroy.haml
+++ b/app/views/projects/pages/_destroy.haml
@@ -1,11 +1,11 @@
 - if @project.pages_deployed?
   - if can?(current_user, :remove_pages, @project)
-    .panel.panel-default.panel.panel-danger
-      .panel-heading Remove pages
+    .card.bg-danger
+      .card-header Remove pages
       .errors-holder
-      .panel-body
+      .card-body
         %p
-          Removing the pages will prevent from exposing them to outside world.
+          Removing pages will prevent them from being exposed to the outside world.
         .form-actions
           = link_to 'Remove pages', project_pages_path(@project), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove"
   - else
diff --git a/app/views/projects/pages/_https_only.html.haml b/app/views/projects/pages/_https_only.html.haml
new file mode 100644
index 00000000000..57345edb90b
--- /dev/null
+++ b/app/views/projects/pages/_https_only.html.haml
@@ -0,0 +1,10 @@
+= form_for @project, url: namespace_project_pages_path(@project.namespace.becomes(Namespace), @project), html: { class: 'inline', title: pages_https_only_title } do |f|
+  = f.check_box :pages_https_only, class: 'float-left', disabled: pages_https_only_disabled?
+
+  .prepend-left-20
+    = f.label :pages_https_only, class: pages_https_only_label_class do
+      %strong Force domains with SSL certificates to use HTTPS
+
+  - unless pages_https_only_disabled?
+    .prepend-top-10
+    = f.submit 'Save', class: 'btn btn-success'
diff --git a/app/views/projects/pages/_list.html.haml b/app/views/projects/pages/_list.html.haml
index 75df92b05a7..e7178f9160c 100644
--- a/app/views/projects/pages/_list.html.haml
+++ b/app/views/projects/pages/_list.html.haml
@@ -1,28 +1,29 @@
+- verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
+
 - if can?(current_user, :update_pages, @project) && @domains.any?
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Domains (#{@domains.count})
-    %ul.well-list
-      - verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
+    %ul.content-list.pages-domain-list{ class: ("has-verification-status" if verification_enabled) }
       - @domains.each do |domain|
-        %li
-          .pull-right
+        %li.pages-domain-list-item.unstyled
+          - if verification_enabled
+            - tooltip, status = domain.unverified? ? [_('Unverified'), 'failed'] : [_('Verified'), 'success']
+            .domain-status.ci-status-icon.has-tooltip{ class: "ci-status-icon-#{status}", title: tooltip }
+              = sprite_icon("status_#{status}", size: 16 )
+          .domain-name
+            = link_to domain.url do
+              = domain.url
+              = icon('external-link')
+            - if domain.subject
+              %p
+                %span.badge.badge-gray Certificate: #{domain.subject}
+                - if domain.expired?
+                  %span.badge.badge-danger Expired
+          %div
             = link_to 'Details', project_pages_domain_path(@project, domain), class: "btn btn-sm btn-grouped"
             = link_to 'Remove', project_pages_domain_path(@project, domain), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove btn-sm btn-grouped"
-          .clearfix
-            - if verification_enabled
-              - tooltip, status = domain.unverified? ? ['Unverified', 'failed'] : ['Verified', 'success']
-              = link_to domain.url, title: tooltip, class: 'has-tooltip' do
-                = sprite_icon("status_#{status}", size: 16, css_class: "has-tooltip ci-status-icon ci-status-icon-#{status}")
-                = domain.domain
-            - else
-              = link_to domain.domain, domain.url
-          %p
-            - if domain.subject
-              %span.label.label-gray Certificate: #{domain.subject}
-            - if domain.expired?
-              %span.label.label-danger Expired
         - if verification_enabled && domain.unverified?
           %li.warning-row
             #{domain.domain} is not verified. To learn how to verify ownership, visit your
-            = link_to 'domain details', project_pages_domain_path(@project, domain)
+            #{link_to 'domain details', project_pages_domain_path(@project, domain)}.
diff --git a/app/views/projects/pages/_no_domains.html.haml b/app/views/projects/pages/_no_domains.html.haml
index 7cea5f3e70b..8c93cf7a8ad 100644
--- a/app/views/projects/pages/_no_domains.html.haml
+++ b/app/views/projects/pages/_no_domains.html.haml
@@ -1,6 +1,6 @@
 - if can?(current_user, :update_pages, @project)
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Domains
     .nothing-here-block
       Support for domains and certificates is disabled.
diff --git a/app/views/projects/pages/_use.html.haml b/app/views/projects/pages/_use.html.haml
index e442e6e9a09..cd9177c0f9e 100644
--- a/app/views/projects/pages/_use.html.haml
+++ b/app/views/projects/pages/_use.html.haml
@@ -1,8 +1,8 @@
 - unless @project.pages_deployed?
-  .panel.panel-info
-    .panel-heading
+  .card.bg-info
+    .card-header
       Configure pages
-    .panel-body
+    .card-body
       %p
         Learn how to upload your static site and have it served by
         GitLab by following the
diff --git a/app/views/projects/pages/show.html.haml b/app/views/projects/pages/show.html.haml
index 04e647c0dc6..7e1a3b9bea6 100644
--- a/app/views/projects/pages/show.html.haml
+++ b/app/views/projects/pages/show.html.haml
@@ -1,11 +1,10 @@
 - page_title 'Pages'
 
-%h3.page_title
+%h3.page-title.with-button
   Pages
 
   - if can?(current_user, :update_pages, @project) && (Gitlab.config.pages.external_http || Gitlab.config.pages.external_https)
-    = link_to new_project_pages_domain_path(@project), class: 'btn btn-new pull-right', title: 'New Domain' do
-      %i.fa.fa-plus
+    = link_to new_project_pages_domain_path(@project), class: 'btn btn-new float-right', title: 'New Domain' do
       New Domain
 
 %p.light
@@ -13,6 +12,9 @@
   Combined with the power of GitLab CI and the help of GitLab Runner
   you can deploy static pages for your individual projects, your user or your group.
 
+- if Gitlab.config.pages.external_https
+  = render 'https_only'
+
 %hr.clearfix
 
 = render 'access'
diff --git a/app/views/projects/pages_domains/_form.html.haml b/app/views/projects/pages_domains/_form.html.haml
index d81b07832bb..0d848f7899c 100644
--- a/app/views/projects/pages_domains/_form.html.haml
+++ b/app/views/projects/pages_domains/_form.html.haml
@@ -4,22 +4,22 @@
       - @domain.errors.full_messages.each do |msg|
         %p= msg
 
-.form-group
-  = f.label :domain, class: 'control-label' do
+.form-group.row
+  = f.label :domain, class: 'col-form-label col-sm-2' do
     Domain
   .col-sm-10
     = f.text_field :domain, required: true, autocomplete: 'off', class: 'form-control', disabled: @domain.persisted?
 
 - if Gitlab.config.pages.external_https
-  .form-group
-    = f.label :certificate, class: 'control-label' do
+  .form-group.row
+    = f.label :certificate, class: 'col-form-label col-sm-2' do
       Certificate (PEM)
     .col-sm-10
       = f.text_area :certificate, rows: 5, class: 'form-control'
       %span.help-inline Upload a certificate for your domain with all intermediates
 
-  .form-group
-    = f.label :key, class: 'control-label' do
+  .form-group.row
+    = f.label :key, class: 'col-form-label col-sm-2' do
       Key (PEM)
     .col-sm-10
       = f.text_area :key, rows: 5, class: 'form-control'
diff --git a/app/views/projects/pages_domains/edit.html.haml b/app/views/projects/pages_domains/edit.html.haml
index 5645a4604bf..ee70de22f13 100644
--- a/app/views/projects/pages_domains/edit.html.haml
+++ b/app/views/projects/pages_domains/edit.html.haml
@@ -1,11 +1,11 @@
 - add_to_breadcrumbs "Pages", project_pages_path(@project)
 - breadcrumb_title @domain.domain
 - page_title @domain.domain
-%h3.page_title
+%h3.page-title
   = @domain.domain
 %hr.clearfix
 %div
-  = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'fieldset-form' } do |f|
     = render 'form', { f: f }
     .form-actions
       = f.submit 'Save Changes', class: "btn btn-save"
diff --git a/app/views/projects/pages_domains/new.html.haml b/app/views/projects/pages_domains/new.html.haml
index 5a397c9d3c7..376ce3f68aa 100644
--- a/app/views/projects/pages_domains/new.html.haml
+++ b/app/views/projects/pages_domains/new.html.haml
@@ -1,10 +1,12 @@
 - add_to_breadcrumbs "Pages", project_pages_path(@project)
 - page_title 'New Pages Domain'
-%h3.page_title
+%h3.page-title
   New Pages Domain
 %hr.clearfix
 %div
-  = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'fieldset-form' } do |f|
     = render 'form', { f: f }
     .form-actions
       = f.submit 'Create New Domain', class: "btn btn-save"
+      .float-right
+        = link_to _('Cancel'), project_pages_path(@project), class: 'btn btn-cancel'
diff --git a/app/views/projects/pages_domains/show.html.haml b/app/views/projects/pages_domains/show.html.haml
index ba0713daee9..a8484187493 100644
--- a/app/views/projects/pages_domains/show.html.haml
+++ b/app/views/projects/pages_domains/show.html.haml
@@ -1,17 +1,19 @@
 - add_to_breadcrumbs "Pages", project_pages_path(@project)
 - breadcrumb_title @domain.domain
 - page_title "#{@domain.domain}", 'Pages Domains'
+- dns_record = "#{@domain.domain} CNAME #{@domain.project.pages_subdomain}.#{Settings.pages.host}."
 
 - verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
+
 - if verification_enabled && @domain.unverified?
-  %p.alert.alert-warning
-    %strong
-      This domain is not verified. You will need to verify ownership before
-      access is enabled.
+  = content_for :flash_message do
+    .alert.alert-warning
+      .container-fluid.container-limited
+        This domain is not verified. You will need to verify ownership before access is enabled.
 
-%h3.page-title
+%h3.page-title.with-button
+  = link_to 'Edit', edit_project_pages_domain_path(@project, @domain), class: 'btn btn-success float-right'
   Pages Domain
-  = link_to 'Edit', edit_project_pages_domain_path(@project, @domain), class: 'btn btn-success pull-right'
 
 .table-holder
   %table.table
@@ -19,31 +21,41 @@
       %td
         Domain
       %td
-        = link_to @domain.domain, @domain.url
+        = link_to @domain.url do
+          = @domain.url
+          = icon('external-link')
     %tr
       %td
         DNS
       %td
-        %p
-          To access this domain create a new DNS record:
-        %pre
-          #{@domain.domain} CNAME #{@domain.project.pages_subdomain}.#{Settings.pages.host}.
+        .input-group
+          = text_field_tag :domain_dns, dns_record , class: "monospace js-select-on-focus form-control", readonly: true
+          .input-group-append
+            = clipboard_button(target: '#domain_dns', class: 'btn-default input-group-text d-none d-sm-block')
+        %p.form-text.text-muted
+          To access this domain create a new DNS record
+
     - if verification_enabled
+      - verification_record = "#{@domain.verification_domain} TXT #{@domain.keyed_verification_code}"
       %tr
         %td
           Verification status
         %td
-          %p
+          = form_tag verify_project_pages_domain_path(@project, @domain) do
+            .status-badge
+              - text, status = @domain.unverified? ? [_('Unverified'), 'badge-danger'] : [_('Verified'), 'badge-success']
+              .badge{ class: status }
+                = text
+              %button.btn.has-tooltip{ type: "submit", data: { container: 'body' }, title: _("Retry verification") }
+                = sprite_icon('redo')
+          .input-group
+            = text_field_tag :domain_verification, verification_record, class: "monospace js-select-on-focus form-control", readonly: true
+            .input-group-append
+              = clipboard_button(target: '#domain_verification', class: 'btn-default d-none d-sm-block')
+          %p.form-text.text-muted
             - help_link = help_page_path('user/project/pages/getting_started_part_three.md', anchor: 'dns-txt-record')
-            To #{link_to 'verify ownership', help_link} of your domain, create
-            this DNS record:
-          %pre
-            #{@domain.verification_domain} TXT #{@domain.keyed_verification_code}
-          %p
-            - if @domain.verified?
-              #{@domain.domain} has been successfully verified.
-            - else
-              = button_to 'Verify ownership', verify_project_pages_domain_path(@project, @domain), class: 'btn btn-save btn-sm'
+            To #{link_to 'verify ownership', help_link} of your domain,
+            add the above key to a TXT record within to your DNS configuration.
 
     %tr
       %td
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
index 160e325996a..1cdf981fcb4 100644
--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -1,24 +1,24 @@
-= 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_for [@project.namespace.becomes(Namespace), @project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: "js-pipeline-schedule-form" } do |f|
   = form_errors(@schedule)
-  .form-group
+  .form-group.row
     .col-md-9
       = f.label :description, _('Description'), class: 'label-light'
       = f.text_field :description, class: 'form-control', required: true, autofocus: true, placeholder: s_('PipelineSchedules|Provide a short description for this pipeline')
-  .form-group
+  .form-group.row
     .col-md-9
       = f.label :cron, _('Interval Pattern'), class: 'label-light'
       #interval-pattern-input{ data: { initial_interval: @schedule.cron } }
-  .form-group
+  .form-group.row
     .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: s_("OfSearchInADropdown|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
+  .form-group.row
     .col-md-9
       = f.label :ref, _('Target Branch'), class: 'label-light'
       = dropdown_tag(_("Select target branch"), options: { toggle_class: 'btn js-target-branch-dropdown', dropdown_class: 'git-revision-dropdown', title: _("Select target branch"), filter: true, placeholder: s_("OfSearchInADropdown|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.js-ci-variable-list-section
+  .form-group.row.js-ci-variable-list-section
     .col-md-9
       %label.label-light
         #{ s_('PipelineSchedules|Variables') }
@@ -32,7 +32,7 @@
             = n_('Hide value', 'Hide values', @schedule.variables.size)
           - else
             = n_('Reveal value', 'Reveal values', @schedule.variables.size)
-  .form-group
+  .form-group.row
     .col-md-9
       = f.label  :active, s_('PipelineSchedules|Activated'), class: 'label-light'
       %div
diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
index 55d0e8bb7f9..8d88f0be083 100644
--- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
+++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
@@ -25,7 +25,7 @@
         = link_to user_path(pipeline_schedule.owner) do
           = pipeline_schedule.owner&.name
     %td
-      .pull-right.btn-group
+      .float-right.btn-group
         - if can?(current_user, :play_pipeline_schedule, pipeline_schedule)
           = link_to play_pipeline_schedule_path(pipeline_schedule), method: :post, title: s_('Play'), class: 'btn' do
             = icon('play')
diff --git a/app/views/projects/pipeline_schedules/_tabs.html.haml b/app/views/projects/pipeline_schedules/_tabs.html.haml
index 8996c1b3e38..61f6ad34052 100644
--- a/app/views/projects/pipeline_schedules/_tabs.html.haml
+++ b/app/views/projects/pipeline_schedules/_tabs.html.haml
@@ -1,18 +1,18 @@
-%ul.nav-links.mobile-separator
+%ul.nav-links.mobile-separator.nav.nav-tabs
   %li{ class: active_when(scope.nil?) }>
     = link_to schedule_path_proc.call(nil) do
       = s_("PipelineSchedules|All")
-      %span.badge.js-totalbuilds-count
+      %span.badge.badge-pill.js-totalbuilds-count
         = number_with_delimiter(all_schedules.count(:id))
 
   %li{ class: active_when(scope == 'active') }>
     = link_to schedule_path_proc.call('active') do
       = s_("PipelineSchedules|Active")
-      %span.badge
+      %span.badge.badge-pill
         = number_with_delimiter(all_schedules.active.count(:id))
 
   %li{ class: active_when(scope == 'inactive') }>
     = link_to schedule_path_proc.call('inactive') do
       = s_("PipelineSchedules|Inactive")
-      %span.badge
+      %span.badge.badge-pill
         = number_with_delimiter(all_schedules.inactive.count(:id))
diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml
index bcb6dddba1a..3677666070e 100644
--- a/app/views/projects/pipeline_schedules/index.html.haml
+++ b/app/views/projects/pipeline_schedules/index.html.haml
@@ -18,5 +18,5 @@
     %ul.content-list
       = render partial: "table"
   - else
-    .light-well
+    .card.bg-light
       .nothing-here-block= _("No schedules")
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index 85946aec1f2..04131a90a57 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -5,7 +5,7 @@
     %h3.commit-title
       = markdown(@commit.title, pipeline: :single_line)
     - if @commit.description.present?
-      %pre.commit-description
+      .commit-description<
         = preserve(markdown(@commit.description, pipeline: :single_line))
 
   .info-well
@@ -27,9 +27,9 @@
       .icon-container.commit-icon
         = custom_icon("icon_commit")
       = link_to @commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha js-details-short"
-      = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
+      = link_to("#", class: "js-details-expand d-none d-sm-none d-md-inline") do
         %span.text-expander
-          \...
+          = sprite_icon('ellipsis_h', size: 12)
       %span.js-details-content.hide
         = link_to @pipeline.sha, project_commit_path(@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 852143ecb2a..951f80b378d 100644
--- a/app/views/projects/pipelines/_with_tabs.html.haml
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -1,19 +1,17 @@
-- failed_builds = @pipeline.statuses.latest.failed
-
 .tabs-holder
-  %ul.pipelines-tabs.nav-links.no-top.no-bottom.mobile-separator
+  %ul.pipelines-tabs.nav-links.no-top.no-bottom.mobile-separator.nav.nav-tabs
     %li.js-pipeline-tab-link
-      = link_to project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-pipeline', action: 'pipelines', toggle: 'tab' },  class: 'pipeline-tab' do
+      = link_to project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-pipeline', action: 'pipelines', toggle: 'tab' }, class: 'pipeline-tab' do
         = _("Pipeline")
     %li.js-builds-tab-link
       = link_to builds_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
         = _("Jobs")
-        %span.badge.js-builds-counter= pipeline.total_size
-    - if failed_builds.present?
+        %span.badge.badge-pill.js-builds-counter= pipeline.total_size
+    - if @pipeline.failed_builds.present?
       %li.js-failures-tab-link
         = link_to failures_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-failures', action: 'failures', toggle: 'tab' }, class: 'failures-tab' do
           = _("Failed Jobs")
-          %span.badge.js-failures-counter= failed_builds.count
+          %span.badge.badge-pill.js-failures-counter= @pipeline.failed_builds.count
 
 .tab-content
   #js-tab-pipeline.tab-pane
@@ -26,7 +24,7 @@
         %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}
+        You can also test your .gitlab-ci.yml in the #{link_to "Lint", project_ci_lint_path(@project)}
 
     - if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
       .bs-callout.bs-callout-warning
@@ -43,13 +41,38 @@
             %th Coverage
             %th
         = render partial: "projects/stage/stage", collection: pipeline.legacy_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)
+
+  - if @pipeline.failed_builds.present?
+    #js-tab-failures.build-failures.tab-pane.build-page
+      %table.table.responsive-table.ci-table.responsive-table-sm-rounded
+        %thead
+          %th.table-th-transparent
+          %th.table-th-transparent= _("Name")
+          %th.table-th-transparent= _("Stage")
+          %th.table-th-transparent= _("Failure")
+
+        %tbody
+          - @pipeline.failed_builds.each_with_index do |build, index|
+            - job = build.present(current_user: current_user)
+            %tr.build-state.responsive-table-border-start
+              %td.responsive-table-cell.ci-status-icon-failed{ data: { column: "Status"} }
+                .d-none.d-md-block.build-icon
+                  = custom_icon("icon_status_#{build.status}")
+                .d-md-none.build-badge
+                  = render "ci/status/badge", link: false, status: job.detailed_status(current_user)
+              %td.responsive-table-cell.build-name{ data: { column: _("Name")} }
+                = link_to build.name, pipeline_job_url(pipeline, build)
+              %td.responsive-table-cell.build-stage{ data: { column: _("Stage")} }
+                = build.stage.titleize
+              %td.responsive-table-cell.build-failure{ data: { column: _("Failure")} }
+                = build.present.callout_failure_message
+              %td.responsive-table-cell.build-actions
+                = link_to retry_project_job_path(build.project, build, return_to: request.original_url), method: :post, title: _('Retry'), class: 'btn btn-build' do
+                  = icon('repeat')
+            %tr.build-trace-row.responsive-table-border-end
+              %td
+              %td.responsive-table-cell.build-trace-container{ colspan: 4 }
+                %pre.build-trace.build-trace-rounded
+                  %code.bash.js-build-output
+                    = build_summary(build)
+
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 3e6b3346787..c0ee81fe28d 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -10,6 +10,6 @@
     "no-pipelines-svg-path" => image_path('illustrations/pipelines_pending.svg'),
     "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
     "new-pipeline-path" => can?(current_user, :create_pipeline, @project) && new_project_pipeline_path(@project),
-    "ci-lint-path" => can?(current_user, :create_pipeline, @project) && ci_lint_path,
+    "ci-lint-path" => can?(current_user, :create_pipeline, @project) && project_ci_lint_path(@project),
     "reset-cache-path" => can?(current_user, :admin_pipeline, @project) && reset_cache_project_settings_ci_cd_path(@project) ,
     "has-gitlab-ci" => (@project.has_ci? && @project.builds_enabled?).to_s } }
diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml
index 877101b05ca..956f8fef6b8 100644
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -1,24 +1,35 @@
 - breadcrumb_title "Pipelines"
-- page_title "New Pipeline"
+- page_title = s_("Pipeline|Run Pipeline")
+- settings_link = link_to _('CI/CD settings'), project_settings_ci_cd_path(@project)
 
 %h3.page-title
-  New Pipeline
+  = s_("Pipeline|Run Pipeline")
 %hr
 
-= form_for @pipeline, as: :pipeline, url: project_pipelines_path(@project), html: { id: "new-pipeline-form", class: "form-horizontal js-new-pipeline-form js-requires-input" } do |f|
+= form_for @pipeline, as: :pipeline, url: project_pipelines_path(@project), html: { id: "new-pipeline-form", class: "js-new-pipeline-form js-requires-input" } do |f|
   = form_errors(@pipeline)
-  .form-group
-    = f.label :ref, 'Create for', class: 'control-label'
-    .col-sm-10
+  .form-group.row
+    .col-sm-12
+      = f.label :ref, s_('Pipeline|Create for')
       = hidden_field_tag 'pipeline[ref]', params[:ref] || @project.default_branch
       = dropdown_tag(params[:ref] || @project.default_branch,
                      options: { toggle_class: 'js-branch-select wide git-revision-dropdown-toggle',
-                                filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: "Search branches",
+                                filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: s_("Pipeline|Search branches"),
                                 data: { selected: params[:ref] || @project.default_branch, field_name: 'pipeline[ref]' } })
-      .help-block Existing branch name, tag
+      .form-text.text-muted
+        = s_("Pipeline|Existing branch name or tag")
+
+    .col-sm-12.prepend-top-10.js-ci-variable-list-section
+      %label
+        = s_('Pipeline|Variables')
+      %ul.ci-variable-list
+        = render 'ci/variables/variable_row', form_field: 'pipeline', only_key_value: true
+      .form-text.text-muted
+        = (s_("Pipeline|Specify variable values to be used in this run. The values specified in %{settings_link} will be used by default.") % {settings_link: settings_link}).html_safe
+
   .form-actions
-    = f.submit 'Create pipeline', class: 'btn btn-create', tabindex: 3
-    = link_to 'Cancel', project_pipelines_path(@project), class: 'btn btn-cancel'
+    = f.submit s_('Pipeline|Create pipeline'), class: 'btn btn-success js-variables-save-button', tabindex: 3
+    = link_to 'Cancel', project_pipelines_path(@project), class: 'btn btn-default float-right'
 
 -# haml-lint:disable InlineJavaScript
 %script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe
diff --git a/app/views/projects/project_members/_groups.html.haml b/app/views/projects/project_members/_groups.html.haml
index fdeb5f21fbe..3f05e06b0c6 100644
--- a/app/views/projects/project_members/_groups.html.haml
+++ b/app/views/projects/project_members/_groups.html.haml
@@ -1,7 +1,7 @@
-.panel.panel-default.project-members-groups
-  .panel-heading
+.card.project-members-groups
+  .card-header
     Groups with access to
     %strong= @project.name
-    %span.badge= group_links.size
-  %ul.content-list
+    %span.badge.badge-pill= group_links.size
+  %ul.content-list.members-list
     = render partial: 'shared/members/group', collection: group_links, as: :group_link
diff --git a/app/views/projects/project_members/_new_project_member.html.haml b/app/views/projects/project_members/_new_project_member.html.haml
index bf5b11ea30c..5064db8d5cd 100644
--- a/app/views/projects/project_members/_new_project_member.html.haml
+++ b/app/views/projects/project_members/_new_project_member.html.haml
@@ -9,7 +9,7 @@
         .select-wrapper
           = select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select select-control"
           = icon('chevron-down')
-        .help-block.append-bottom-10
+        .form-text.text-muted.append-bottom-10
           = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
           about role permissions
       .form-group
diff --git a/app/views/projects/project_members/_new_shared_group.html.haml b/app/views/projects/project_members/_new_shared_group.html.haml
index c10ef648a8f..684219735e2 100644
--- a/app/views/projects/project_members/_new_shared_group.html.haml
+++ b/app/views/projects/project_members/_new_shared_group.html.haml
@@ -9,7 +9,7 @@
         .select-wrapper
           = select_tag :link_group_access, options_for_select(ProjectGroupLink.access_options, ProjectGroupLink.default_access), class: "form-control select-control"
           = icon('chevron-down')
-        .help-block.append-bottom-10
+        .form-text.text-muted.append-bottom-10
           = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
           about role permissions
       .form-group
diff --git a/app/views/projects/project_members/_team.html.haml b/app/views/projects/project_members/_team.html.haml
index 16bcf671c25..0c5a187f208 100644
--- a/app/views/projects/project_members/_team.html.haml
+++ b/app/views/projects/project_members/_team.html.haml
@@ -1,17 +1,18 @@
 - project = local_assigns.fetch(:project)
 - members = local_assigns.fetch(:members)
 
-.panel.panel-default
-  .panel-heading.flex-project-members-panel
+.card
+  .card-header.flex-project-members-panel
     %span.flex-project-title
       Members of
       %strong= project.name
-    %span.badge= members.total_count
+    %span.badge.badge-pill= members.total_count
     = form_tag project_project_members_path(project), method: :get, class: 'form-inline member-search-form flex-project-members-form'  do
       .form-group
-        = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
-        %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
-          = icon("search")
+        .position-relative
+          = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
+          %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
+            = icon("search")
         = render 'shared/members/sort_dropdown'
   %ul.content-list.members-list
     = render partial: 'shared/members/member', collection: members, as: :member
diff --git a/app/views/projects/project_members/import.html.haml b/app/views/projects/project_members/import.html.haml
index 755128af565..6a52e72bfd8 100644
--- a/app/views/projects/project_members/import.html.haml
+++ b/app/views/projects/project_members/import.html.haml
@@ -5,9 +5,9 @@
 %p.light
   Only project members will be imported. Group members will be skipped.
 %hr
-= form_tag apply_import_project_project_members_path(@project), method: 'post', class: 'form-horizontal' do
-  .form-group
-    = label_tag :source_project_id, "Project", class: 'control-label'
+= form_tag apply_import_project_project_members_path(@project), method: 'post' do
+  .form-group.row
+    = label_tag :source_project_id, "Project", class: 'col-form-label col-sm-2'
     .col-sm-10= select_tag(:source_project_id, options_from_collection_for_select(@projects, :id, :name_with_namespace), prompt: "Select project", class: "select2 lg", required: true)
 
   .form-actions
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index d81103c3a92..9716322f8a1 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -12,17 +12,17 @@
     - else
       %p
         Members can be added by project
-        %i Masters
+        %i Maintainers
         or
         %i Owners
     .light
       - if can?(current_user, :admin_project_member, @project)
-        %ul.nav-links.gitlab-tabs{ role: 'tablist' }
-          %li.active{ role: 'presentation' }
-            %a{ href: '#add-member-pane', id: 'add-member-tab', data: { toggle: 'tab' }, role: 'tab' } Add member
+        %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' }
+          %li.nav-tab{ role: 'presentation' }
+            %a.nav-link.active{ href: '#add-member-pane', id: 'add-member-tab', data: { toggle: 'tab' }, role: 'tab' } Add member
           - if @project.allowed_to_share_with_group?
-            %li{ role: 'presentation' }
-              %a{ href: '#share-with-group-pane', id: 'share-with-group-tab', data: { toggle: 'tab' }, role: 'tab' } Share with group
+            %li.nav-tab{ role: 'presentation' }
+              %a.nav-link{ href: '#share-with-group-pane', id: 'share-with-group-tab', data: { toggle: 'tab' }, role: 'tab' } Share with group
 
         .tab-content.gitlab-tab-content
           .tab-pane.active{ id: 'add-member-pane', role: 'tabpanel' }
diff --git a/app/views/projects/protected_branches/_branches_list.html.haml b/app/views/projects/protected_branches/_branches_list.html.haml
index 5377d745371..24d2b971472 100644
--- a/app/views/projects/protected_branches/_branches_list.html.haml
+++ b/app/views/projects/protected_branches/_branches_list.html.haml
@@ -1,4 +1,4 @@
 - can_admin_project = can?(current_user, :admin_project, @project)
 
 = render layout: 'projects/protected_branches/shared/branches_list', locals: { can_admin_project: can_admin_project } do
-  = render partial: 'projects/protected_branches/protected_branch', collection: @protected_branches, locals: { can_admin_project: can_admin_project}
+  = render partial: 'projects/protected_branches/protected_branch', collection: @protected_branches
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 98d56a3e5c5..24b53555cdc 100644
--- a/app/views/projects/protected_branches/_create_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_create_protected_branch.html.haml
@@ -1,14 +1,14 @@
 - content_for :merge_access_levels do
   .merge_access_levels-container
     = dropdown_tag('Select',
-                    options: { toggle_class: 'js-allowed-to-merge wide',
-                    dropdown_class: 'dropdown-menu-selectable capitalize-header',
+                    options: { toggle_class: 'js-allowed-to-merge qa-allowed-to-merge-select wide',
+                    dropdown_class: 'dropdown-menu-selectable qa-allowed-to-merge-dropdown capitalize-header',
                     data: { field_name: 'protected_branch[merge_access_levels_attributes][0][access_level]', input_id: 'merge_access_levels_attributes' }})
 - content_for :push_access_levels do
   .push_access_levels-container
     = dropdown_tag('Select',
-                    options: { toggle_class: 'js-allowed-to-push wide',
-                    dropdown_class: 'dropdown-menu-selectable capitalize-header',
+                    options: { toggle_class: 'js-allowed-to-push qa-allowed-to-push-select wide',
+                    dropdown_class: 'dropdown-menu-selectable qa-allowed-to-push-dropdown capitalize-header',
                     data: { field_name: 'protected_branch[push_access_levels_attributes][0][access_level]', input_id: 'push_access_levels_attributes' }})
 
 = render 'projects/protected_branches/shared/create_protected_branch'
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 c61b2951e1e..f242459f69b 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 capitalize-header',
+                 options: { toggle_class: 'js-allowed-to-merge qa-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 capitalize-header',
+                 options: { toggle_class: 'js-allowed-to-push qa-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/shared/_branches_list.html.haml b/app/views/projects/protected_branches/shared/_branches_list.html.haml
index 2a0704bc7af..9a06eca89bb 100644
--- a/app/views/projects/protected_branches/shared/_branches_list.html.haml
+++ b/app/views/projects/protected_branches/shared/_branches_list.html.haml
@@ -1,8 +1,8 @@
-.panel.panel-default.protected-branches-list.js-protected-branches-list
+.protected-branches-list.js-protected-branches-list.qa-protected-branches-list
   - if @protected_branches.empty?
-    .panel-heading
-      %h3.panel-title
-        Protected branch (#{@protected_branches.size})
+    .card-header.bg-white
+      %h3.card-title.mb-0
+        Protected branch (#{@protected_branches_count})
     %p.settings-message.text-center
       There are currently no protected branches, protect a branch with the form above.
   - else
@@ -16,7 +16,7 @@
           %col
       %thead
         %tr
-          %th Protected branch (#{@protected_branches.size})
+          %th Protected branch (#{@protected_branches_count})
           %th Last commit
           %th Allowed to merge
           %th Allowed to push
diff --git a/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml b/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
index 9f0c4f3b3a8..c2d6c034e35 100644
--- a/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
@@ -1,33 +1,32 @@
 = form_for [@project.namespace.becomes(Namespace), @project, @protected_branch], html: { class: 'new-protected-branch js-new-protected-branch' } do |f|
-  .panel.panel-default
-    .panel-heading
-      %h3.panel-title
+  .card
+    .card-header
+      %h3.card-title
         Protect a branch
-    .panel-body
-      .form-horizontal
-        = form_errors(@protected_branch)
-        .form-group
-          = f.label :name, class: 'col-md-2 text-right' do
-            Branch:
-          .col-md-10
-            = render partial: "projects/protected_branches/shared/dropdown", locals: { f: f }
-            .help-block
-              = link_to 'Wildcards', help_page_path('user/project/protected_branches', anchor: 'wildcard-protected-branches')
-              such as
-              %code *-stable
-              or
-              %code production/*
-              are supported
-        .form-group
-          %label.col-md-2.text-right{ for: 'merge_access_levels_attributes' }
-            Allowed to merge:
-          .col-md-10
-            = yield :merge_access_levels
-        .form-group
-          %label.col-md-2.text-right{ for: 'push_access_levels_attributes' }
-            Allowed to push:
-          .col-md-10
-            = yield :push_access_levels
+    .card-body
+      = form_errors(@protected_branch)
+      .form-group.row
+        = f.label :name, class: 'col-md-2 text-right' do
+          Branch:
+        .col-md-10
+          = render partial: "projects/protected_branches/shared/dropdown", locals: { f: f }
+          .form-text.text-muted
+            = link_to 'Wildcards', help_page_path('user/project/protected_branches', anchor: 'wildcard-protected-branches')
+            such as
+            %code *-stable
+            or
+            %code production/*
+            are supported
+      .form-group.row
+        %label.col-md-2.text-right{ for: 'merge_access_levels_attributes' }
+          Allowed to merge:
+        .col-md-10
+          = yield :merge_access_levels
+      .form-group.row
+        %label.col-md-2.text-right{ for: 'push_access_levels_attributes' }
+          Allowed to push:
+        .col-md-10
+          = yield :push_access_levels
 
-    .panel-footer
+    .card-footer
       = f.submit 'Protect', class: 'btn-create btn', disabled: true
diff --git a/app/views/projects/protected_branches/shared/_dropdown.html.haml b/app/views/projects/protected_branches/shared/_dropdown.html.haml
index 74435236808..b3d6068039a 100644
--- a/app/views/projects/protected_branches/shared/_dropdown.html.haml
+++ b/app/views/projects/protected_branches/shared/_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 git-revision-dropdown-toggle',
-                          filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: "Search protected branches",
+               options: { toggle_class: 'js-protected-branch-select js-filter-submit wide git-revision-dropdown-toggle qa-protected-branch-select',
+                          filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown qa-protected-branch-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/shared/_index.html.haml b/app/views/projects/protected_branches/shared/_index.html.haml
index e662b877fbb..4f1c6c92484 100644
--- a/app/views/projects/protected_branches/shared/_index.html.haml
+++ b/app/views/projects/protected_branches/shared/_index.html.haml
@@ -1,10 +1,10 @@
 - expanded = Rails.env.test?
 
-%section.settings.no-animate{ class: ('expanded' if expanded) }
+%section.qa-protected-branches-settings.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Protected Branches
-    %button.btn.js-settings-toggle
+    %button.btn.js-settings-toggle.qa-expand-protected-branches{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
       Keep stable branches secure and force developers to use merge requests.
@@ -12,8 +12,8 @@
     %p
       By default, protected branches are designed to:
       %ul
-        %li prevent their creation, if not already created, from everybody except Masters
-        %li prevent pushes from everybody except Masters
+        %li prevent their creation, if not already created, from everybody except Maintainers
+        %li prevent pushes from everybody except Maintainers
         %li prevent <strong>anyone</strong> from force pushing to the branch
         %li prevent <strong>anyone</strong> from deleting the branch
       %p Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches")} and #{link_to "project permissions", help_page_path("user/permissions")}.
diff --git a/app/views/projects/protected_branches/shared/_matching_branch.html.haml b/app/views/projects/protected_branches/shared/_matching_branch.html.haml
index 98793d632e6..2c76bf87945 100644
--- a/app/views/projects/protected_branches/shared/_matching_branch.html.haml
+++ b/app/views/projects/protected_branches/shared/_matching_branch.html.haml
@@ -3,7 +3,7 @@
     = 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
+      %span.badge.badge-info.prepend-left-5 default
   %td
     - commit = @project.commit(matching_branch.name)
     = link_to(commit.short_id, project_commit_path(@project, commit.id), class: 'commit-sha')
diff --git a/app/views/projects/protected_branches/shared/_protected_branch.html.haml b/app/views/projects/protected_branches/shared/_protected_branch.html.haml
index 10b81e42572..82ef08272d3 100644
--- a/app/views/projects/protected_branches/shared/_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/shared/_protected_branch.html.haml
@@ -2,10 +2,10 @@
 
 %tr.js-protected-branch-edit-form{ data: { url: namespace_project_protected_branch_path(@project.namespace, @project, protected_branch) } }
   %td
-    %span.ref-name= protected_branch.name
+    %span.ref-name.qa-protected-branch-name= protected_branch.name
 
     - if @project.root_ref?(protected_branch.name)
-      %span.label.label-info.prepend-left-5 default
+      %span.badge.badge-info.prepend-left-5 default
   %td
     - if protected_branch.wildcard?
       - matching_branches = protected_branch.matching(repository.branches)
@@ -21,4 +21,4 @@
 
   - if can_admin_project
     %td
-      = link_to 'Unprotect', [@project.namespace.becomes(Namespace), @project, protected_branch], data: { confirm: 'Branch will be writable for developers. Are you sure?' }, method: :delete, class: 'btn btn-warning'
+      = link_to 'Unprotect', [@project.namespace.becomes(Namespace), @project, protected_branch], disabled: local_assigns[:disabled], data: { confirm: 'Branch will be writable for developers. Are you sure?' }, method: :delete, class: "btn btn-warning"
diff --git a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
index 5a53c704fcb..0ae5ca3ff36 100644
--- a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
@@ -1,29 +1,28 @@
 = form_for [@project.namespace.becomes(Namespace), @project, @protected_tag], html: { class: 'new-protected-tag js-new-protected-tag' } do |f|
-  .panel.panel-default
-    .panel-heading
-      %h3.panel-title
+  .card
+    .card-header
+      %h3.card-title
         Protect a tag
-    .panel-body
-      .form-horizontal
-        = form_errors(@protected_tag)
-        .form-group
-          = f.label :name, class: 'col-md-2 text-right' do
-            Tag:
-          .col-md-10.protected-tags-dropdown
-            = render partial: "projects/protected_tags/shared/dropdown", locals: { f: f }
-            .help-block
-              = link_to 'Wildcards', help_page_path('user/project/protected_tags', anchor: 'wildcard-protected-tags')
-              such as
-              %code v*
-              or
-              %code *-release
-              are supported
-        .form-group
-          %label.col-md-2.text-right{ for: 'create_access_levels_attributes' }
-            Allowed to create:
-          .col-md-10
-            .create_access_levels-container
-              = yield :create_access_levels
+    .card-body
+      = form_errors(@protected_tag)
+      .form-group.row
+        = f.label :name, class: 'col-md-2 text-right' do
+          Tag:
+        .col-md-10.protected-tags-dropdown
+          = render partial: "projects/protected_tags/shared/dropdown", locals: { f: f }
+          .form-text.text-muted
+            = link_to 'Wildcards', help_page_path('user/project/protected_tags', anchor: 'wildcard-protected-tags')
+            such as
+            %code v*
+            or
+            %code *-release
+            are supported
+      .form-group.row
+        %label.col-md-2.text-right{ for: 'create_access_levels_attributes' }
+          Allowed to create:
+        .col-md-10
+          .create_access_levels-container
+            = yield :create_access_levels
 
-    .panel-footer
+    .card-footer
       = f.submit 'Protect', class: 'btn-create btn', disabled: true
diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/shared/_index.html.haml
index 24baf1cfc89..fe2903b456f 100644
--- a/app/views/projects/protected_tags/shared/_index.html.haml
+++ b/app/views/projects/protected_tags/shared/_index.html.haml
@@ -4,7 +4,7 @@
   .settings-header
     %h4
       Protected Tags
-    %button.btn.js-settings-toggle
+    %button.btn.js-settings-toggle{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
       Limit access to creating and updating tags.
@@ -12,7 +12,7 @@
     %p
       By default, protected tags are designed to:
       %ul
-        %li Prevent tag creation by everybody except Masters
+        %li Prevent tag creation by everybody except Maintainers
         %li Prevent <strong>anyone</strong> from updating the tag
         %li Prevent <strong>anyone</strong> from deleting the tag
 
diff --git a/app/views/projects/protected_tags/shared/_matching_tag.html.haml b/app/views/projects/protected_tags/shared/_matching_tag.html.haml
index 05f102d1ca3..133c76cd2ad 100644
--- a/app/views/projects/protected_tags/shared/_matching_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_matching_tag.html.haml
@@ -3,7 +3,7 @@
     = 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
+      %span.badge.badge-info.prepend-left-5 default
   %td
     - commit = @project.commit(matching_tag.name)
     = link_to(commit.short_id, project_commit_path(@project, commit.id), class: 'commit-sha')
diff --git a/app/views/projects/protected_tags/shared/_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
index c778f7b9781..1702e38df7e 100644
--- a/app/views/projects/protected_tags/shared/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
@@ -3,7 +3,7 @@
     %span.ref-name= protected_tag.name
 
     - if @project.root_ref?(protected_tag.name)
-      %span.label.label-info.prepend-left-5 default
+      %span.badge.badge-info.prepend-left-5 default
   %td
     - if protected_tag.wildcard?
       - matching_tags = protected_tag.matching(repository.tags)
diff --git a/app/views/projects/protected_tags/shared/_tags_list.html.haml b/app/views/projects/protected_tags/shared/_tags_list.html.haml
index 3f42ae58438..c3081d75fb4 100644
--- a/app/views/projects/protected_tags/shared/_tags_list.html.haml
+++ b/app/views/projects/protected_tags/shared/_tags_list.html.haml
@@ -1,8 +1,8 @@
-.panel.panel-default.protected-tags-list.js-protected-tags-list
+.protected-tags-list.js-protected-tags-list
   - if @protected_tags.empty?
-    .panel-heading
-      %h3.panel-title
-        Protected tag (#{@protected_tags.size})
+    .card-header
+      %h3.card-title
+        Protected tag (#{@protected_tags_count})
     %p.settings-message.text-center
       There are currently no protected tags, protect a tag with the form above.
   - else
@@ -17,7 +17,7 @@
           %col
       %thead
         %tr
-          %th Protected tag (#{@protected_tags.size})
+          %th Protected tag (#{@protected_tags_count})
           %th Last commit
           %th Allowed to create
           - if can_admin_project
diff --git a/app/views/projects/refs/logs_tree.js.haml b/app/views/projects/refs/logs_tree.js.haml
index d07bb661615..506bf54b3f8 100644
--- a/app/views/projects/refs/logs_tree.js.haml
+++ b/app/views/projects/refs/logs_tree.js.haml
@@ -8,6 +8,8 @@
     row.find("td.tree-time-ago").html('#{escape_javascript time_ago_with_tooltip(commit.committed_date)}');
     row.find("td.tree-commit").html('#{escape_javascript render("projects/tree/tree_commit_column", commit: commit)}');
 
+  = render_if_exists 'projects/refs/logs_tree_lock_label', lock_label: content_data[:lock_label]
+
 - if @more_log_url
   :plain
     if($('#tree-slider').length) {
diff --git a/app/views/projects/registry/repositories/_tag.html.haml b/app/views/projects/registry/repositories/_tag.html.haml
index 0b082a2137f..a4cde53e8c6 100644
--- a/app/views/projects/registry/repositories/_tag.html.haml
+++ b/app/views/projects/registry/repositories/_tag.html.haml
@@ -18,13 +18,13 @@
         \-
   %td
     - if tag.created_at
-      = time_ago_in_words(tag.created_at)
+      = time_ago_with_tooltip tag.created_at
     - else
       .light
         \-
   - if can?(current_user, :update_container_image, @project)
     %td.content
-      .controls.hidden-xs.pull-right
+      .controls.d-none.d-sm-block.float-right
         = link_to project_registry_repository_tag_path(@project, tag.repository, tag.name),
                   method: :delete,
                   class: 'btn btn-remove has-tooltip',
diff --git a/app/views/projects/registry/repositories/index.html.haml b/app/views/projects/registry/repositories/index.html.haml
index 12d56e244ce..0426f2215ad 100644
--- a/app/views/projects/registry/repositories/index.html.haml
+++ b/app/views/projects/registry/repositories/index.html.haml
@@ -16,11 +16,11 @@
 
   .row.prepend-top-10
     .col-lg-12
-      .panel.panel-default
-        .panel-heading
-          %h4.panel-title
+      .card
+        .card-header
+          %h4.card-title
             = s_('ContainerRegistry|How to use the Container Registry')
-        .panel-body
+        .card-body
           %p
             - link_token = link_to(_('personal access token'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'personal-access-tokens'), target: '_blank')
             - link_2fa = link_to(_('2FA enabled'), help_page_path('user/profile/account/two_factor_authentication'), target: '_blank')
@@ -29,6 +29,10 @@
             docker login #{Gitlab.config.registry.host_port}
           %br
           %p
+            - deploy_token = link_to(_('deploy token'), help_page_path('user/project/deploy_tokens/index', anchor: 'read-container-registry-images'), target: '_blank')
+            = s_('ContainerRegistry|You can also use a %{deploy_token} for read-only access to the registry images.').html_safe % { deploy_token: deploy_token }
+          %br
+          %p
             = s_('ContainerRegistry|Once you log in, you&rsquo;re free to create and upload a container image using the common %{build} and %{push} commands').html_safe % { build: "<code>build</code>".html_safe, push: "<code>push</code>".html_safe }
           %pre
             :plain
diff --git a/app/views/projects/releases/edit.html.haml b/app/views/projects/releases/edit.html.haml
index 4d962f9433f..d6f758608a0 100644
--- a/app/views/projects/releases/edit.html.haml
+++ b/app/views/projects/releases/edit.html.haml
@@ -11,9 +11,9 @@
         %strong= @tag.name
 
 
-  = form_for(@release, method: :put, url: project_tag_release_path(@project, @tag.name), html: { class: 'form-horizontal common-note-form release-form js-quick-submit' }) do |f|
+  = form_for(@release, method: :put, url: project_tag_release_path(@project, @tag.name), html: { class: 'common-note-form release-form js-quick-submit' }) do |f|
     = 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/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here…"
       = render 'shared/notes/hints'
     .error-alert
     .prepend-top-default
diff --git a/app/views/projects/repositories/_feed.html.haml b/app/views/projects/repositories/_feed.html.haml
index 87895a15239..ae0d9ab9908 100644
--- a/app/views/projects/repositories/_feed.html.haml
+++ b/app/views/projects/repositories/_feed.html.haml
@@ -14,5 +14,5 @@
       = image_tag avatar_icon_for_email(commit.author_email), class: "", width: 16, alt: ''
       = markdown(truncate(commit.title, length: 40), pipeline: :single_line, author: commit.author)
   %td
-    %span.pull-right.cgray
+    %span.float-right.cgray
       = time_ago_with_tooltip(commit.committed_date)
diff --git a/app/views/projects/runners/_form.html.haml b/app/views/projects/runners/_form.html.haml
deleted file mode 100644
index 49c90869146..00000000000
--- a/app/views/projects/runners/_form.html.haml
+++ /dev/null
@@ -1,49 +0,0 @@
-= form_for runner, url: runner_form_url, html: { class: 'form-horizontal' } do |f|
-  = form_errors(runner)
-  .form-group
-    = label :active, "Active", class: 'control-label'
-    .col-sm-10
-      .checkbox
-        = f.check_box :active
-        %span.light Paused Runners don't accept new jobs
-  .form-group
-    = label :protected, "Protected", class: 'control-label'
-    .col-sm-10
-      .checkbox
-        = f.check_box :access_level, {}, 'ref_protected', 'not_protected'
-        %span.light This runner will only run on pipelines triggered on protected branches
-  .form-group
-    = label :run_untagged, 'Run untagged jobs', class: 'control-label'
-    .col-sm-10
-      .checkbox
-        = f.check_box :run_untagged
-        %span.light Indicates whether this runner can pick jobs without tags
-  .form-group
-    = label :locked, 'Lock to current projects', class: 'control-label'
-    .col-sm-10
-      .checkbox
-        = f.check_box :locked
-        %span.light When a runner is locked, it cannot be assigned to other projects
-  .form-group
-    = label_tag :token, class: 'control-label' do
-      Token
-    .col-sm-10
-      = f.text_field :token, class: 'form-control', readonly: true
-  .form-group
-    = label_tag :ip_address, class: 'control-label' do
-      IP Address
-    .col-sm-10
-      = f.text_field :ip_address, class: 'form-control', readonly: true
-  .form-group
-    = label_tag :description, class: 'control-label' do
-      Description
-    .col-sm-10
-      = f.text_field :description, class: 'form-control'
-  .form-group
-    = label_tag :tag_list, class: 'control-label' do
-      Tags
-    .col-sm-10
-      = f.text_field :tag_list, value: runner.tag_list.sort.join(', '), class: 'form-control'
-      .help-block You can setup jobs to only use Runners with specific tags. Separate tags with commas.
-  .form-actions
-    = f.submit 'Save changes', class: 'btn btn-save'
diff --git a/app/views/projects/runners/_group_runners.html.haml b/app/views/projects/runners/_group_runners.html.haml
new file mode 100644
index 00000000000..86de71c732b
--- /dev/null
+++ b/app/views/projects/runners/_group_runners.html.haml
@@ -0,0 +1,37 @@
+- link = link_to _('Runners API'), help_page_path('api/runners.md')
+
+%h3
+  = _('Group Runners')
+
+.bs-callout.bs-callout-warning
+  = _('GitLab Group Runners can execute code for all the projects in this group.')
+  = _('They can be managed using the %{link}.').html_safe % { link: link }
+
+  - if @project.group
+    %hr
+    - if @project.group_runners_enabled?
+      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn btn-close', method: :post do
+        = _('Disable group Runners')
+    - else
+      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn btn-success btn-inverted', method: :post do
+        = _('Enable group Runners')
+    &nbsp;
+    = _('for this project')
+
+- if !@project.group
+  = _('This project does not belong to a group and can therefore not make use of group Runners.')
+
+- elsif @group_runners.empty?
+  = _('This group does not provide any group Runners yet.')
+
+  - if can?(current_user, :admin_pipeline, @project.group)
+    - group_link = link_to _('Group CI/CD settings'), group_settings_ci_cd_path(@project.group)
+    = _('Group maintainers can register group runners in the %{link}').html_safe % { link: group_link }
+  - else
+    = _('Ask your group maintainer to setup a group Runner.')
+
+- else
+  %h4.underlined-title
+    = _('Available group Runners : %{runners}').html_safe % { runners: @group_runners.count }
+  %ul.bordered-list
+    = render partial: 'projects/runners/runner', collection: @group_runners, as: :runner
diff --git a/app/views/projects/runners/_index.html.haml b/app/views/projects/runners/_index.html.haml
index f9808f7c990..022687b831f 100644
--- a/app/views/projects/runners/_index.html.haml
+++ b/app/views/projects/runners/_index.html.haml
@@ -1,19 +1,4 @@
-.light.prepend-top-default
-  %p
-    A 'Runner' is a process which runs a job.
-    You can setup as many Runners as you need.
-    %br
-    Runners can be placed on separate users, servers, and even on your local machine.
-
-  %p Each Runner can be in one of the following states:
-  %div
-    %ul
-      %li
-        %span.label.label-success active
-        \- Runner is active and can process any new jobs
-      %li
-        %span.label.label-danger paused
-        \- Runner is paused and will not receive any new jobs
+= render 'shared/runners/runner_description'
 
 %hr
 
@@ -23,3 +8,4 @@
     = render 'projects/runners/specific_runners'
   .col-sm-6
     = render 'projects/runners/shared_runners'
+    = render 'projects/runners/group_runners'
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index 6376496ee1a..a23f5d6f0c3 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -3,10 +3,10 @@
     = runner_status_icon(runner)
 
     - if @project_runners.include?(runner)
-      = link_to runner.short_sha, runner_path(runner), class: 'commit-sha'
+      = link_to runner.short_sha, project_runner_path(@project, runner), class: 'commit-sha'
 
       - if runner.locked?
-        = icon('lock', class: 'has-tooltip', title: 'Locked to current projects')
+        = icon('lock', class: 'has-tooltip', title: _('Locked to current projects'))
 
       %small.edit-runner
         = link_to edit_project_runner_path(@project, runner) do
@@ -15,22 +15,22 @@
       %span.commit-sha
         = runner.short_sha
 
-    .pull-right
+    .float-right
       - if @project_runners.include?(runner)
         - if runner.active?
-          = link_to 'Pause', pause_project_runner_path(@project, runner), method: :post, class: 'btn btn-sm btn-danger', data: { confirm: "Are you sure?" }
+          = link_to _('Pause'), pause_project_runner_path(@project, runner), method: :post, class: 'btn btn-sm btn-danger', data: { confirm: _("Are you sure?") }
         - else
-          = link_to 'Resume', resume_project_runner_path(@project, runner), method: :post, class: 'btn btn-success btn-sm'
+          = link_to _('Resume'), resume_project_runner_path(@project, runner), method: :post, class: 'btn btn-success btn-sm'
         - if runner.belongs_to_one_project?
-          = link_to 'Remove Runner', runner_path(runner), data: { confirm: "Are you sure?" }, method: :delete, class: 'btn btn-danger btn-sm'
+          = link_to _('Remove Runner'), project_runner_path(@project, runner), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn btn-danger btn-sm'
         - else
           - runner_project = @project.runner_projects.find_by(runner_id: runner)
-          = link_to 'Disable for this project', project_runner_project_path(@project, runner_project), data: { confirm: "Are you sure?" }, method: :delete, class: 'btn btn-danger btn-sm'
-      - elsif runner.specific?
+          = link_to _('Disable for this project'), project_runner_project_path(@project, runner_project), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn btn-danger btn-sm'
+      - elsif !(runner.is_shared? || runner.group_type?) # We can simplify this to `runner.project_type?` when migrating #runner_type is complete
         = form_for [@project.namespace.becomes(Namespace), @project, @project.runner_projects.new] do |f|
           = f.hidden_field :runner_id, value: runner.id
-          = f.submit 'Enable for this project', class: 'btn btn-sm'
-  .pull-right
+          = f.submit _('Enable for this project'), class: 'btn btn-sm'
+  .float-right
     %small.light
       \##{runner.id}
   - if runner.description.present?
@@ -39,5 +39,5 @@
   - if runner.tag_list.present?
     %p
       - runner.tag_list.sort.each do |tag|
-        %span.label.label-primary
+        %span.badge.badge-primary
           = tag
diff --git a/app/views/projects/runners/_shared_runners.html.haml b/app/views/projects/runners/_shared_runners.html.haml
index 4fd4ca355a8..20a5ef039f8 100644
--- a/app/views/projects/runners/_shared_runners.html.haml
+++ b/app/views/projects/runners/_shared_runners.html.haml
@@ -1,4 +1,5 @@
-%h3 Shared Runners
+%h3
+  = _('Shared Runners')
 
 .bs-callout.shared-runners-description
   - if Gitlab::CurrentSettings.shared_runners_text.present?
@@ -17,8 +18,7 @@
   &nbsp; for this project
 
 - if @shared_runners_count.zero?
-  This GitLab server does not provide any shared Runners yet.
-  Please use the specific Runners or ask your administrator to create one.
+  = _('This GitLab instance does not provide any shared Runners yet. Instance administrators can register shared Runners in the admin area.')
 - else
   %h4.underlined-title Available shared Runners : #{@shared_runners_count}
   %ul.bordered-list.available-shared-runners
diff --git a/app/views/projects/runners/_specific_runners.html.haml b/app/views/projects/runners/_specific_runners.html.haml
index f0813e56b71..6c11ce3b394 100644
--- a/app/views/projects/runners/_specific_runners.html.haml
+++ b/app/views/projects/runners/_specific_runners.html.haml
@@ -1,4 +1,5 @@
-%h3 Specific Runners
+%h3
+  = _('Specific Runners')
 
 = render partial: 'ci/runner/how_to_setup_specific_runner',
          locals: { registration_token: @project.runners_token }
diff --git a/app/views/projects/runners/edit.html.haml b/app/views/projects/runners/edit.html.haml
index 78dc4817ed7..d59f9c19862 100644
--- a/app/views/projects/runners/edit.html.haml
+++ b/app/views/projects/runners/edit.html.haml
@@ -1,6 +1,6 @@
-- page_title "Edit", "#{@runner.description} ##{@runner.id}", "Runners"
+- page_title _('Edit'), "#{@runner.description} ##{@runner.id}", 'Runners'
 
 %h4 Runner ##{@runner.id}
 
 %hr
-  = render 'form', runner: @runner, runner_form_url: runner_path(@runner)
+  = render 'shared/runners/form', runner: @runner, runner_form_url: project_runner_path(@project, @runner)
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index 684b082efbb..aa30ebdc3b8 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -9,7 +9,7 @@
     - if @service.respond_to?(:detailed_description)
       %p= @service.detailed_description
   .col-lg-9
-    = form_for(@service, as: :service, url: project_service_path(@project, @service.to_param), method: :put, html: { class: 'gl-show-field-errors form-horizontal integration-settings-form js-integration-settings-form', data: { 'can-test' => @service.can_test?, 'test-url' => test_project_service_path(@project, @service) } }) do |form|
+    = form_for(@service, as: :service, url: project_service_path(@project, @service.to_param), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'can-test' => @service.can_test?, 'test-url' => test_project_service_path(@project, @service) } }) do |form|
       = render 'shared/service_settings', form: form, subject: @service
       - if @service.editable?
         .footer-block.row-content-block
diff --git a/app/views/projects/services/_index.html.haml b/app/views/projects/services/_index.html.haml
index 915c6b22162..16e48814578 100644
--- a/app/views/projects/services/_index.html.haml
+++ b/app/views/projects/services/_index.html.haml
@@ -8,13 +8,13 @@
       %colgroup
         %col
         %col
-        %col.hidden-xs
+        %col
         %col{ width: "120" }
       %thead
         %tr
           %th
           %th Service
-          %th.hidden-xs Description
+          %th.d-none.d-sm-block Description
           %th Last edit
       - @services.sort_by(&:title).each do |service|
         %tr
@@ -23,9 +23,8 @@
           %td
             = link_to edit_project_service_path(@project, service.to_param) do
               %strong= service.title
-          %td.hidden-xs
+          %td.d-none.d-sm-block
             = service.description
           %td.light
             - if service.updated_at.present?
-              = time_ago_in_words service.updated_at
-              ago
+              = time_ago_with_tooltip service.updated_at
diff --git a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
index 2ab0227126a..209b9c71390 100644
--- a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
@@ -18,22 +18,22 @@
 
 .help-form
   .form-group
-    = label_tag :display_name, 'Display name', class: 'col-sm-2 col-xs-12 control-label'
-    .col-sm-10.col-xs-12.input-group
-      = text_field_tag :display_name, "GitLab / #{@project.full_name}", class: 'form-control input-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#display_name')
+    = label_tag :display_name, 'Display name', class: 'col-sm-2 col-12 col-form-label'
+    .col-sm-10.col-12.input-group
+      = text_field_tag :display_name, "GitLab / #{@project.full_name}", class: 'form-control form-control-sm', readonly: 'readonly'
+      .input-group-append
+        = clipboard_button(target: '#display_name', class: 'input-group-text')
 
   .form-group
-    = label_tag :description, 'Description', class: 'col-sm-2 col-xs-12 control-label'
-    .col-sm-10.col-xs-12.input-group
-      = text_field_tag :description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#description')
+    = label_tag :description, 'Description', class: 'col-sm-2 col-12 col-form-label'
+    .col-sm-10.col-12.input-group
+      = text_field_tag :description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
+      .input-group-append
+        = clipboard_button(target: '#description', class: 'input-group-text')
 
   .form-group
-    = label_tag nil, 'Command trigger word', class: 'col-sm-2 col-xs-12 control-label'
-    .col-sm-10.col-xs-12.text-block
+    = label_tag nil, 'Command trigger word', class: 'col-sm-2 col-12 col-form-label'
+    .col-sm-10.col-12.text-block
       %p Fill in the word that works best for your team.
       %p
         Suggestions:
@@ -42,47 +42,47 @@
         %code= @project.full_path
 
   .form-group
-    = label_tag :request_url, 'Request URL', class: 'col-sm-2 col-xs-12 control-label'
-    .col-sm-10.col-xs-12.input-group
-      = text_field_tag :request_url, service_trigger_url(subject), class: 'form-control input-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#request_url')
+    = label_tag :request_url, 'Request URL', class: 'col-sm-2 col-12 col-form-label'
+    .col-sm-10.col-12.input-group
+      = text_field_tag :request_url, service_trigger_url(subject), class: 'form-control form-control-sm', readonly: 'readonly'
+      .input-group-append
+        = clipboard_button(target: '#request_url', class: 'input-group-text')
 
   .form-group
-    = label_tag nil, 'Request method', class: 'col-sm-2 col-xs-12 control-label'
-    .col-sm-10.col-xs-12.text-block POST
+    = label_tag nil, 'Request method', class: 'col-sm-2 col-12 col-form-label'
+    .col-sm-10.col-12.text-block POST
 
   .form-group
-    = label_tag :response_username, 'Response username', class: 'col-sm-2 col-xs-12 control-label'
-    .col-sm-10.col-xs-12.input-group
-      = text_field_tag :response_username, 'GitLab', class: 'form-control input-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#response_username')
+    = label_tag :response_username, 'Response username', class: 'col-sm-2 col-12 col-form-label'
+    .col-sm-10.col-12.input-group
+      = text_field_tag :response_username, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly'
+      .input-group-append
+        = clipboard_button(target: '#response_username', class: 'input-group-text')
 
   .form-group
-    = label_tag :response_icon, 'Response icon', class: 'col-sm-2 col-xs-12 control-label'
-    .col-sm-10.col-xs-12.input-group
-      = text_field_tag :response_icon, asset_url('gitlab_logo.png'), class: 'form-control input-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#response_icon')
+    = label_tag :response_icon, 'Response icon', class: 'col-sm-2 col-12 col-form-label'
+    .col-sm-10.col-12.input-group
+      = text_field_tag :response_icon, asset_url('gitlab_logo.png'), class: 'form-control form-control-sm', readonly: 'readonly'
+      .input-group-append
+        = clipboard_button(target: '#response_icon', class: 'input-group-text')
 
   .form-group
-    = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label'
-    .col-sm-10.col-xs-12.text-block Yes
+    = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 col-form-label'
+    .col-sm-10.col-12.text-block Yes
 
   .form-group
-    = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-sm-2 col-xs-12 control-label'
-    .col-sm-10.col-xs-12.input-group
-      = text_field_tag :autocomplete_hint, '[help]', class: 'form-control input-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#autocomplete_hint')
+    = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-sm-2 col-12 col-form-label'
+    .col-sm-10.col-12.input-group
+      = text_field_tag :autocomplete_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly'
+      .input-group-append
+        = clipboard_button(target: '#autocomplete_hint', class: 'input-group-text')
 
   .form-group
-    = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-xs-12 control-label'
-    .col-sm-10.col-xs-12.input-group
-      = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#autocomplete_description')
+    = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 col-form-label'
+    .col-sm-10.col-12.input-group
+      = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
+      .input-group-append
+        = clipboard_button(target: '#autocomplete_description', class: 'input-group-text')
 
 %hr
 
diff --git a/app/views/projects/services/mattermost_slash_commands/_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
index 2a1b9d4c465..b20614dc88f 100644
--- a/app/views/projects/services/mattermost_slash_commands/_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
@@ -1,18 +1,19 @@
 - enabled = Gitlab.config.mattermost.enabled
 
-.well
-  %p
-    This service allows users to perform common operations on this
-    project by entering slash commands in Mattermost.
-    = link_to help_page_path('user/project/integrations/mattermost_slash_commands.md'), target: '_blank' do
-      View documentation
-      = icon('external-link')
-  %p.inline
-    See list of available commands in Mattermost after setting up this service,
-    by entering
-  %kbd.inline /&lt;trigger&gt; help
-  - unless enabled || @service.template?
-    = render 'projects/services/mattermost_slash_commands/detailed_help', subject: @service
+.info-well
+  .well-segment
+    %p
+      This service allows users to perform common operations on this
+      project by entering slash commands in Mattermost.
+      = link_to help_page_path('user/project/integrations/mattermost_slash_commands.md'), target: '_blank' do
+        View documentation
+        = icon('external-link')
+    %p.inline
+      See list of available commands in Mattermost after setting up this service,
+      by entering
+    %kbd.inline /&lt;trigger&gt; help
+    - unless enabled || @service.template?
+      = render 'projects/services/mattermost_slash_commands/detailed_help', subject: @service
 
 - if enabled && !@service.template?
   = render 'projects/services/mattermost_slash_commands/installation_info', subject: @service
diff --git a/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml b/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml
index 44c0b7a90dc..2da8e5428ec 100644
--- a/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml
@@ -1,7 +1,7 @@
 .services-installation-info
   - unless @service.activated?
     .row
-      .col-sm-9.col-sm-offset-3
+      .col-sm-9.offset-sm-3
         = link_to new_project_mattermost_path(@project), class: 'btn btn-lg' do
           = custom_icon('mattermost_logo', size: 15)
           Add to Mattermost
diff --git a/app/views/projects/services/prometheus/_configuration_banner.html.haml b/app/views/projects/services/prometheus/_configuration_banner.html.haml
index 2cc2a6b2b5b..898b55e4b39 100644
--- a/app/views/projects/services/prometheus/_configuration_banner.html.haml
+++ b/app/views/projects/services/prometheus/_configuration_banner.html.haml
@@ -2,7 +2,7 @@
   = s_('PrometheusService|Auto configuration')
 
 - if service.manual_configuration?
-  .well
+  .info-well
     = s_('PrometheusService|To enable the installation of Prometheus on your clusters, deactivate the manual configuration below')
 - else
   .container-fluid
diff --git a/app/views/projects/services/prometheus/_help.html.haml b/app/views/projects/services/prometheus/_help.html.haml
index 88acb824ba7..35d655e4b32 100644
--- a/app/views/projects/services/prometheus/_help.html.haml
+++ b/app/views/projects/services/prometheus/_help.html.haml
@@ -5,5 +5,5 @@
   = s_('PrometheusService|Manual configuration')
 
 - unless @service.editable?
-  .well
+  .info-well
     = s_('PrometheusService|To enable manual configuration, uninstall Prometheus from your clusters')
diff --git a/app/views/projects/services/prometheus/_show.html.haml b/app/views/projects/services/prometheus/_show.html.haml
index 43e6a173108..bda597cc02b 100644
--- a/app/views/projects/services/prometheus/_show.html.haml
+++ b/app/views/projects/services/prometheus/_show.html.haml
@@ -7,12 +7,12 @@
       = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus')
 
   .col-lg-9
-    .panel.panel-default.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/metrics') } }
-      .panel-heading
-        %h3.panel-title
+    .card.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/metrics') } }
+      .card-header
+        %h3.card-title
           = s_('PrometheusService|Common metrics')
-          %span.badge.js-monitored-count 0
-      .panel-body
+          %span.badge.badge-pill.js-monitored-count 0
+      .card-body
         .loading-metrics.js-loading-metrics
           %p.prepend-top-10.prepend-left-10
             = icon('spinner spin', class: 'metrics-load-spinner')
@@ -22,13 +22,13 @@
             = s_('PrometheusService|Waiting for your first deployment to an environment to find common metrics')
         %ul.list-unstyled.metrics-list.hidden.js-metrics-list
 
-    .panel.panel-default.hidden.js-panel-missing-env-vars
-      .panel-heading
-        %h3.panel-title
+    .card.hidden.js-panel-missing-env-vars
+      .card-header
+        %h3.card-title
           = icon('caret-right lg fw', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
           = s_('PrometheusService|Missing environment variable')
-          %span.badge.js-env-var-count 0
-      .panel-body.hidden
+          %span.badge.badge-pill.js-env-var-count 0
+      .card-body.hidden
         .flash-container
           .flash-notice
             .flash-text
diff --git a/app/views/projects/services/slack_slash_commands/_help.html.haml b/app/views/projects/services/slack_slash_commands/_help.html.haml
index d592a5e4663..9d045d84b52 100644
--- a/app/views/projects/services/slack_slash_commands/_help.html.haml
+++ b/app/views/projects/services/slack_slash_commands/_help.html.haml
@@ -1,99 +1,100 @@
 - pretty_name = defined?(@project) ? @project.full_name : 'namespace / path'
 - run_actions_text = "Perform common operations on GitLab project: #{pretty_name}"
 
-.well
-  %p
-    This service allows users to perform common operations on this
-    project by entering slash commands in Slack.
-    = link_to help_page_path('user/project/integrations/slack_slash_commands.md'), target: '_blank' do
-      View documentation
-      = icon('external-link')
-  %p.inline
-    See list of available commands in Slack after setting up this service,
-    by entering
-  %kbd.inline /&lt;command&gt; help
-  - unless @service.template?
-    %p To setup this service:
-    %ul.list-unstyled.indent-list
-      %li
-        1.
-        = link_to 'https://my.slack.com/services/new/slash-commands', target: '_blank', rel: 'noreferrer noopener nofollow' do
-          Add a slash command
-          = icon('external-link')
-        in your Slack team with these options:
+.info-well
+  .well-segment
+    %p
+      This service allows users to perform common operations on this
+      project by entering slash commands in Slack.
+      = link_to help_page_path('user/project/integrations/slack_slash_commands.md'), target: '_blank' do
+        View documentation
+        = icon('external-link')
+    %p.inline
+      See list of available commands in Slack after setting up this service,
+      by entering
+    %kbd.inline /&lt;command&gt; help
+    - unless @service.template?
+      %p To setup this service:
+      %ul.list-unstyled.indent-list
+        %li
+          1.
+          = link_to 'https://my.slack.com/services/new/slash-commands', target: '_blank', rel: 'noreferrer noopener nofollow' do
+            Add a slash command
+            = icon('external-link')
+          in your Slack team with these options:
 
-    %hr
+      %hr
 
-    .help-form
-      .form-group
-        = label_tag nil, 'Command', class: 'col-sm-2 col-xs-12 control-label'
-        .col-sm-10.col-xs-12.text-block
-          %p Fill in the word that works best for your team.
-          %p
-            Suggestions:
-            %code= 'gitlab'
-            %code= @project.path # Path contains no spaces, but dashes
-            %code= @project.full_path
+      .help-form
+        .form-group
+          = label_tag nil, 'Command', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.text-block
+            %p Fill in the word that works best for your team.
+            %p
+              Suggestions:
+              %code= 'gitlab'
+              %code= @project.path # Path contains no spaces, but dashes
+              %code= @project.full_path
 
-      .form-group
-        = label_tag :url, 'URL', class: 'col-sm-2 col-xs-12 control-label'
-        .col-sm-10.col-xs-12.input-group
-          = text_field_tag :url, service_trigger_url(subject), class: 'form-control input-sm', readonly: 'readonly'
-          .input-group-btn
-            = clipboard_button(target: '#url')
+        .form-group
+          = label_tag :url, 'URL', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.input-group
+            = text_field_tag :url, service_trigger_url(subject), class: 'form-control form-control-sm', readonly: 'readonly'
+            .input-group-append
+              = clipboard_button(target: '#url', class: 'input-group-text')
 
-      .form-group
-        = label_tag nil, 'Method', class: 'col-sm-2 col-xs-12 control-label'
-        .col-sm-10.col-xs-12.text-block POST
+        .form-group
+          = label_tag nil, 'Method', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.text-block POST
 
-      .form-group
-        = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-xs-12 control-label'
-        .col-sm-10.col-xs-12.input-group
-          = text_field_tag :customize_name, 'GitLab', class: 'form-control input-sm', readonly: 'readonly'
-          .input-group-btn
-            = clipboard_button(target: '#customize_name')
+        .form-group
+          = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.input-group
+            = text_field_tag :customize_name, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly'
+            .input-group-append
+              = clipboard_button(target: '#customize_name', class: 'input-group-text')
 
-      .form-group
-        = label_tag nil, 'Customize icon', class: 'col-sm-2 col-xs-12 control-label'
-        .col-sm-10.col-xs-12.text-block
-          = image_tag(asset_url('slash-command-logo.png'), width: 36, height: 36)
-          = link_to('Download image', asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank', rel: 'noopener noreferrer')
+        .form-group
+          = label_tag nil, 'Customize icon', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.text-block
+            = image_tag(asset_url('slash-command-logo.png'), width: 36, height: 36)
+            = link_to('Download image', asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank', rel: 'noopener noreferrer')
 
-      .form-group
-        = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label'
-        .col-sm-10.col-xs-12.text-block Show this command in the autocomplete list
+        .form-group
+          = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.text-block Show this command in the autocomplete list
 
-      .form-group
-        = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-xs-12 control-label'
-        .col-sm-10.col-xs-12.input-group
-          = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
-          .input-group-btn
-            = clipboard_button(target: '#autocomplete_description')
+        .form-group
+          = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.input-group
+            = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
+            .input-group-append
+              = clipboard_button(target: '#autocomplete_description', class: 'input-group-text')
 
-      .form-group
-        = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-xs-12 control-label'
-        .col-sm-10.col-xs-12.input-group
-          = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control input-sm', readonly: 'readonly'
-          .input-group-btn
-            = clipboard_button(target: '#autocomplete_usage_hint')
+        .form-group
+          = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.input-group
+            = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly'
+            .input-group-append
+              = clipboard_button(target: '#autocomplete_usage_hint', class: 'input-group-text')
 
-      .form-group
-        = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-xs-12 control-label'
-        .col-sm-10.col-xs-12.input-group
-          = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control input-sm', readonly: 'readonly'
-          .input-group-btn
-            = clipboard_button(target: '#descriptive_label')
+        .form-group
+          = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.input-group
+            = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control form-control-sm', readonly: 'readonly'
+            .input-group-append
+              = clipboard_button(target: '#descriptive_label', class: 'input-group-text')
 
-    %hr
+      %hr
 
-    %ul.list-unstyled.indent-list
-      %li
-        2. Paste the
-        %strong Token
-        into the field below
-      %li
-        3. Select the
-        %strong Active
-        checkbox, press
-        %strong Save changes
-        and start using GitLab inside Slack!
+      %ul.list-unstyled.indent-list
+        %li
+          2. Paste the
+          %strong Token
+          into the field below
+        %li
+          3. Select the
+          %strong Active
+          checkbox, press
+          %strong Save changes
+          and start using GitLab inside Slack!
diff --git a/app/views/projects/settings/badges/index.html.haml b/app/views/projects/settings/badges/index.html.haml
new file mode 100644
index 00000000000..b68ed70de89
--- /dev/null
+++ b/app/views/projects/settings/badges/index.html.haml
@@ -0,0 +1,4 @@
+- breadcrumb_title _('Badges')
+- page_title _('Badges')
+
+= render 'shared/badges/badge_settings'
diff --git a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
new file mode 100644
index 00000000000..4359362bb05
--- /dev/null
+++ b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
@@ -0,0 +1,66 @@
+.row
+  .col-lg-12
+    = form_for @project, url: project_settings_ci_cd_path(@project) do |f|
+      = form_errors(@project)
+      %fieldset.builds-feature.js-auto-devops-settings
+        .form-group
+          - message = auto_devops_warning_message(@project)
+          - ci_file_formatted = '<code>.gitlab-ci.yml</code>'.html_safe
+          - if message
+            %p.auto-devops-warning-message.settings-message.text-center
+              = message.html_safe
+          = f.fields_for :auto_devops_attributes, @auto_devops do |form|
+            .card.auto-devops-card
+              .card-body
+                .form-check
+                  = form.radio_button :enabled, 'true', class: 'form-check-input js-toggle-extra-settings'
+                  = form.label :enabled_true, class: 'form-check-label' do
+                    %strong= s_('CICD|Enable Auto DevOps')
+                  .form-text.text-muted
+                    = s_('CICD|The Auto DevOps pipeline configuration will be used when there is no %{ci_file} in the project.').html_safe % { ci_file: ci_file_formatted }
+
+            .card.auto-devops-card
+              .card-body
+                .form-check
+                  = form.radio_button :enabled, '', class: 'form-check-input js-toggle-extra-settings'
+                  = form.label :enabled_, class: 'form-check-label' do
+                    %strong= s_('CICD|Instance default (%{state})') % { state: "#{Gitlab::CurrentSettings.auto_devops_enabled? ? _('enabled') : _('disabled')}" }
+                  .form-text.text-muted
+                    = s_('CICD|Follow the instance default to either have Auto DevOps enabled or disabled when there is no project specific %{ci_file}.').html_safe % { ci_file: ci_file_formatted }
+
+            .card.auto-devops-card.js-extra-settings{ class: form.object&.enabled == false ? 'hidden' : nil }
+              .card-body.bg-light
+                = form.label :domain do
+                  %strong= _('Domain')
+                = form.text_field :domain, class: 'form-control', placeholder: 'domain.com'
+                .form-text.text-muted
+                  = s_('CICD|You need to specify a domain if you want to use Auto Review Apps and Auto Deploy stages.')
+                  - if cluster_ingress_ip = cluster_ingress_ip(@project)
+                    = s_('%{nip_domain} can be used as an alternative to a custom domain.').html_safe % { nip_domain: "<code>#{cluster_ingress_ip}.nip.io</code>".html_safe }
+                  = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md', anchor: 'auto-devops-base-domain'), target: '_blank'
+
+                %label.prepend-top-10
+                  %strong= s_('CICD|Deployment strategy')
+                %p.settings-message.text-center
+                  = s_('CICD|Deployment strategy needs a domain name to work correctly.')
+                .form-check
+                  = form.radio_button :deploy_strategy, 'continuous', class: 'form-check-input'
+                  = form.label :deploy_strategy_continuous, class: 'form-check-label' do
+                    %strong= s_('CICD|Continuous deployment to production')
+                    = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md', anchor: 'auto-deploy'), target: '_blank'
+                .form-check
+                  = form.radio_button :deploy_strategy, 'manual', class: 'form-check-input'
+                  = form.label :deploy_strategy_manual, class: 'form-check-label' do
+                    %strong= s_('CICD|Automatic deployment to staging, manual deployment to production')
+                    = link_to icon('question-circle'), help_page_path('ci/environments.md', anchor: 'manually-deploying-to-environments'), target: '_blank'
+
+            .card.auto-devops-card
+              .card-body
+                .form-check
+                  = form.radio_button :enabled, 'false', class: 'form-check-input js-toggle-extra-settings', data: { hide_extra_settings: true }
+                  = form.label :enabled_false, class: 'form-check-label' do
+                    %strong= s_('CICD|Disable Auto DevOps')
+                  .form-text.text-muted
+                    = s_('CICD|An explicit %{ci_file} needs to be specified before you can begin using Continuous Integration and Delivery.').html_safe % { ci_file: ci_file_formatted }
+
+          = f.submit 'Save changes', class: "btn btn-success prepend-top-15"
diff --git a/app/views/projects/pipelines_settings/_badge.html.haml b/app/views/projects/settings/ci_cd/_badge.html.haml
index e8028059487..d14360913a4 100644
--- a/app/views/projects/pipelines_settings/_badge.html.haml
+++ b/app/views/projects/settings/ci_cd/_badge.html.haml
@@ -2,15 +2,15 @@
   .col-lg-12
     %h4
       = badge.title.capitalize
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         %b
           = badge.title.capitalize
           &middot;
         = badge.to_html
-        .pull-right
+        .float-right
           = render 'shared/ref_switcher', destination: 'badges', align_right: true
-      .panel-body
+      .card-body
         .row
           .col-md-2.text-center
             Markdown
diff --git a/app/views/projects/pipelines_settings/_show.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index 646c01c0989..7142a9d635e 100644
--- a/app/views/projects/pipelines_settings/_show.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -1,51 +1,14 @@
 .row.prepend-top-default
   .col-lg-12
-    = form_for @project, url: project_pipelines_settings_path(@project) do |f|
+    = form_for @project, url: project_settings_ci_cd_path(@project) do |f|
+      = form_errors(@project)
       %fieldset.builds-feature
-        .form-group
-          %h5 Auto DevOps (Beta)
-          %p
-            Auto DevOps will automatically build, test, and deploy your application based on a predefined Continuous Integration and Delivery configuration.
-            = link_to 'Learn more about Auto DevOps', help_page_path('topics/autodevops/index.md')
-            - message = auto_devops_warning_message(@project)
-            - if message
-              %p.settings-message.text-center
-                = message.html_safe
-          = f.fields_for :auto_devops_attributes, @auto_devops do |form|
-            .radio
-              = form.label :enabled_true do
-                = form.radio_button :enabled, 'true'
-                %strong Enable Auto DevOps
-                %br
-                %span.descr
-                  The Auto DevOps pipeline configuration will be used when there is no <code>.gitlab-ci.yml</code> in the project.
-
-            .radio
-              = form.label :enabled_false do
-                = form.radio_button :enabled, 'false'
-                %strong Disable Auto DevOps
-                %br
-                %span.descr
-                  An explicit <code>.gitlab-ci.yml</code> needs to be specified before you can begin using Continuous Integration and Delivery.
-
-            .radio
-              = form.label :enabled_ do
-                = form.radio_button :enabled, ''
-                %strong Instance default (#{Gitlab::CurrentSettings.auto_devops_enabled? ? 'enabled' : 'disabled'})
-                %br
-                %span.descr
-                  Follow the instance default to either have Auto DevOps enabled or disabled when there is no project specific <code>.gitlab-ci.yml</code>.
-            %p
-              You need to specify a domain if you want to use Auto Review Apps and Auto Deploy stages.
-            = form.text_field :domain, class: 'form-control', placeholder: 'domain.com'
-
-        %hr
         .form-group.append-bottom-default.js-secret-runner-token
           = f.label :runners_token, "Runner token", class: 'label-light'
           .form-control.js-secret-value-placeholder
             = '*' * 20
           = f.text_field :runners_token, class: "form-control hide js-secret-value", placeholder: 'xEeFCaDAB89'
-          %p.help-block The secure token used by the Runner to checkout the project
+          %p.form-text.text-muted The secure token used by the Runner to checkout the project
           %button.btn.btn-info.prepend-top-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: 'false' } }
             = _('Reveal value')
 
@@ -56,16 +19,16 @@
           %p
             Choose between <code>clone</code> or <code>fetch</code> to get the recent application code
             = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'git-strategy'), target: '_blank'
-          .radio
-            = f.label :build_allow_git_fetch_false do
-              = f.radio_button :build_allow_git_fetch, 'false'
+          .form-check
+            = f.radio_button :build_allow_git_fetch, 'false', { class: 'form-check-input' }
+            = f.label :build_allow_git_fetch_false, class: 'form-check-label' do
               %strong git clone
               %br
               %span.descr
                 Slower but makes sure the project workspace is pristine as it clones the repository from scratch for every job
-          .radio
-            = f.label :build_allow_git_fetch_true do
-              = f.radio_button :build_allow_git_fetch, 'true'
+          .form-check
+            = f.radio_button :build_allow_git_fetch, 'true', { class: 'form-check-input' }
+            = f.label :build_allow_git_fetch_true, class: 'form-check-label' do
               %strong git fetch
               %br
               %span.descr
@@ -73,27 +36,27 @@
 
         %hr
         .form-group
-          = 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
+          = f.label :build_timeout_human_readable, 'Timeout', class: 'label-light'
+          = f.text_field :build_timeout_human_readable, class: 'form-control'
+          %p.form-text.text-muted
+            Per job. 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
         .form-group
           = f.label :ci_config_path, 'Custom CI config path', class: 'label-light'
           = f.text_field :ci_config_path, class: 'form-control', placeholder: '.gitlab-ci.yml'
-          %p.help-block
+          %p.form-text.text-muted
             The path to CI config file. Defaults to <code>.gitlab-ci.yml</code>
             = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'custom-ci-config-path'), target: '_blank'
 
         %hr
         .form-group
-          .checkbox
-            = f.label :public_builds do
-              = f.check_box :public_builds
+          .form-check
+            = f.check_box :public_builds, { class: 'form-check-input' }
+            = f.label :public_builds, class: 'form-check-label' do
               %strong Public pipelines
-            .help-block
+            .form-text.text-muted
               Allow public access to pipelines and job details, including output logs and artifacts
               = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'visibility-of-pipelines'), target: '_blank'
             .bs-callout.bs-callout-info
@@ -111,11 +74,11 @@
 
         %hr
         .form-group
-          .checkbox
-            = f.label :auto_cancel_pending_pipelines do
-              = f.check_box :auto_cancel_pending_pipelines, {}, 'enabled', 'disabled'
+          .form-check
+            = f.check_box :auto_cancel_pending_pipelines, { class: 'form-check-input' }, 'enabled', 'disabled'
+            = f.label :auto_cancel_pending_pipelines, class: 'form-check-label' do
               %strong Auto-cancel redundant, pending pipelines
-            .help-block
+            .form-text.text-muted
               New pipelines will cancel older, pending pipelines on the same branch
               = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'auto-cancel-pending-pipelines'), target: '_blank'
 
@@ -123,10 +86,12 @@
         .form-group
           = f.label :build_coverage_regex, "Test coverage parsing", class: 'label-light'
           .input-group
-            %span.input-group-addon /
+            %span.input-group-prepend
+              .input-group-text /
             = f.text_field :build_coverage_regex, class: 'form-control', placeholder: 'Regular expression'
-            %span.input-group-addon /
-          %p.help-block
+            %span.input-group-append
+              .input-group-text /
+          %p.form-text.text-muted
             A regular expression that will be used to find the test coverage
             output in the job trace. Leave blank to disable
             = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'test-coverage-parsing'), target: '_blank'
@@ -151,10 +116,13 @@
               %li
                 excoveralls (Elixir) -
                 %code \[TOTAL\]\s+(\d+\.\d+)%
+              %li
+                JaCoCo (Java/Kotlin)
+                %code Total.*?([0-9]{1,3})%
 
         = f.submit 'Save changes', class: "btn btn-save"
 
 %hr
 
 .row.prepend-top-default
-  = render partial: 'projects/pipelines_settings/badge', collection: @badges
+  = render partial: 'badge', collection: @badges
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index 756f31f91d9..56c175f5649 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -3,35 +3,48 @@
 - page_title "CI / CD"
 
 - expanded = Rails.env.test?
+- general_expanded = @project.errors.empty? ? expanded : true
 
-%section.settings#js-general-pipeline-settings.no-animate{ class: ('expanded' if expanded) }
+%section.settings#js-general-pipeline-settings.no-animate{ class: ('expanded' if general_expanded) }
   .settings-header
     %h4
-      General pipelines settings
-    %button.btn.js-settings-toggle
+      General pipelines
+    %button.btn.js-settings-toggle{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
-      Update your CI/CD configuration, like job timeout or Auto DevOps.
+      Access your runner token, customize your pipeline configuration, and view your pipeline status and coverage report.
   .settings-content
-    = render 'projects/pipelines_settings/show'
+    = render 'form'
 
-%section.settings.no-animate{ class: ('expanded' if expanded) }
+%section.qa-autodevops-settings.settings#autodevops-settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
-      Runners settings
-    %button.btn.js-settings-toggle
+      = s_('CICD|Auto DevOps')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = s_('CICD|Auto DevOps will automatically build, test, and deploy your application based on a predefined Continuous Integration and Delivery configuration.')
+      = link_to s_('CICD|Learn more about Auto DevOps'), help_page_path('topics/autodevops/index.md')
+  .settings-content
+    = render 'autodevops_form'
+
+%section.qa-runners-settings.settings.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      Runners
+    %button.btn.js-settings-toggle{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
       Register and see your runners for this project.
   .settings-content
     = render 'projects/runners/index'
 
-%section.settings.no-animate{ class: ('expanded' if expanded) }
+%section.qa-variables-settings.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
-      = _('Secret variables')
-      = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'secret-variables'), target: '_blank', rel: 'noopener noreferrer'
-    %button.btn.js-settings-toggle
+      = _('Variables')
+      = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'variables'), target: '_blank', rel: 'noopener noreferrer'
+    %button.btn.js-settings-toggle{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p.append-bottom-0
       = render "ci/variables/content"
@@ -42,7 +55,7 @@
   .settings-header
     %h4
       Pipeline triggers
-    %button.btn.js-settings-toggle
+    %button.btn.js-settings-toggle{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
       Triggers can force a specific branch or tag to get rebuilt with an API call.  These tokens will
diff --git a/app/views/projects/settings/integrations/_project_hook.html.haml b/app/views/projects/settings/integrations/_project_hook.html.haml
index cd003107d66..77d88aed883 100644
--- a/app/views/projects/settings/integrations/_project_hook.html.haml
+++ b/app/views/projects/settings/integrations/_project_hook.html.haml
@@ -5,7 +5,7 @@
       %div
         - ProjectHook.triggers.each_value do |event|
           - if hook.public_send(event)
-            %span.label.label-gray.deploy-project-label= event.to_s.titleize
+            %span.badge.badge-gray.deploy-project-label= event.to_s.titleize
     .col-md-4.col-lg-5.text-right-lg.prepend-top-5
       %span.append-right-10.inline
         SSL Verification: #{hook.enable_ssl_verification ? 'enabled' : 'disabled'}
diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml
index 6bef4d19434..5dda2ec28b4 100644
--- a/app/views/projects/settings/repository/show.html.haml
+++ b/app/views/projects/settings/repository/show.html.haml
@@ -2,6 +2,8 @@
 - page_title "Repository"
 - @content_class = "limit-container-width" unless fluid_layout
 
+= render "projects/mirrors/show"
+
 -# Protected branches & tags use a lot of nested partials.
 -# The shared parts of the views can be found in the `shared` directory.
 -# Those are used throughout the actual views. These `shared` views are then
@@ -9,3 +11,4 @@
 = render "projects/protected_branches/index"
 = render "projects/protected_tags/index"
 = render @deploy_keys
+= render "projects/deploy_tokens/index"
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index fa281327eb7..e28accd5b43 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -1,5 +1,5 @@
 - @no_container = true
-- breadcrumb_title "Details"
+- breadcrumb_title _("Details")
 - @content_class = "limit-container-width" unless fluid_layout
 - show_auto_devops_callout = show_auto_devops_callout?(@project)
 
@@ -24,7 +24,7 @@
     .text-warning.center.prepend-top-20
       %p
         = icon("exclamation-triangle fw")
-        #{ _('Archived project! Repository is read-only') }
+        #{ _('Archived project! Repository and other project resources are read-only') }
 
   - view_path = @project.default_view
 
diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml
index f09871c7fcc..b3a9fa9dd91 100644
--- a/app/views/projects/snippets/_actions.html.haml
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -1,6 +1,6 @@
 - return unless current_user
 
-.hidden-xs
+.d-none.d-sm-block
   - if can?(current_user, :update_project_snippet, @snippet)
     = link_to edit_project_snippet_path(@project, @snippet), class: "btn btn-grouped" do
       Edit
@@ -13,7 +13,7 @@
   - if @snippet.submittable_as_spam_by?(current_user)
     = link_to 'Submit as spam', mark_as_spam_project_snippet_path(@project, @snippet), method: :post, class: 'btn btn-grouped btn-spam', title: 'Submit as spam'
 - if can?(current_user, :create_project_snippet, @project) || can?(current_user, :update_project_snippet, @snippet)
-  .visible-xs-block.dropdown
+  .d-block.d-sm-none.dropdown
     %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
       Options
       = icon('caret-down')
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index 3d5f92f9aaa..f55202c2c5f 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -6,7 +6,7 @@
     = link_to tag.name, project_tag_path(@project, tag.name), class: 'item-title ref-name prepend-left-4'
 
     - if protected_tag?(@project, tag)
-      %span.label.label-success.prepend-left-4
+      %span.badge.badge-success.prepend-left-4
         = s_('TagsPage|protected')
 
     - if tag.message.present?
@@ -31,6 +31,6 @@
       = link_to edit_project_tag_release_path(@project, tag.name), class: 'btn has-tooltip', title: s_('TagsPage|Edit release notes'), data: { container: "body" } do
         = icon("pencil")
 
-    - if can?(current_user, :admin_project, @project)
-      = link_to project_tag_path(@project, tag.name), class: "btn btn-remove remove-row has-tooltip prepend-left-10 #{protected_tag?(@project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), method: :delete, data: { confirm: s_('TagsPage|Deleting the %{tag_name} tag cannot be undone. Are you sure?') % { tag_name: tag.name }, container: 'body' }, remote: true do
-        = icon("trash-o")
+      - if can?(current_user, :admin_project, @project)
+        = link_to project_tag_path(@project, tag.name), class: "btn btn-remove remove-row has-tooltip prepend-left-10 #{protected_tag?(@project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), method: :delete, data: { confirm: s_('TagsPage|Deleting the %{tag_name} tag cannot be undone. Are you sure?') % { tag_name: tag.name }, container: 'body' }, remote: true do
+          = icon("trash-o")
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 10415d011d6..96ecac815c0 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -16,7 +16,7 @@
           %span.light
             = tags_sort_options_hash[@sort]
           = icon('chevron-down')
-        %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+        %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
           %li.dropdown-header
             = s_('TagsPage|Sort by')
           - tags_sort_options_hash.each do |value, title|
diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml
index 1827a3d323c..da822ac5675 100644
--- a/app/views/projects/tags/new.html.haml
+++ b/app/views/projects/tags/new.html.haml
@@ -10,35 +10,35 @@
   = s_('TagsPage|New Tag')
 %hr
 
-= form_tag namespace_project_tags_path, method: :post, id: "new-tag-form", class: "form-horizontal common-note-form tag-form js-quick-submit js-requires-input" do
-  .form-group
-    = label_tag :tag_name, nil, class: 'control-label'
+= form_tag namespace_project_tags_path, method: :post, id: "new-tag-form", class: "common-note-form tag-form js-quick-submit js-requires-input" do
+  .form-group.row
+    = label_tag :tag_name, nil, class: 'col-form-label col-sm-2'
     .col-sm-10
       = text_field_tag :tag_name, params[:tag_name], required: true, autofocus: true, class: 'form-control'
-  .form-group
-    = label_tag :ref, 'Create from', class: 'control-label'
+  .form-group.row
+    = label_tag :ref, 'Create from', class: 'col-form-label col-sm-2'
     .col-sm-10.create-from
       .dropdown
         = hidden_field_tag :ref, default_ref
         = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide 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
+      .form-text.text-muted
         = s_('TagsPage|Existing branch name, tag, or commit SHA')
-  .form-group
-    = label_tag :message, nil, class: 'control-label'
+  .form-group.row
+    = label_tag :message, nil, class: 'col-form-label col-sm-2'
     .col-sm-10
       = text_area_tag :message, @message, required: false, class: 'form-control', rows: 5
-      .help-block
+      .form-text.text-muted
         = s_('TagsPage|Optionally, add a message to the tag.')
   %hr
-  .form-group
-    = label_tag :release_description, s_('TagsPage|Release notes'), class: 'control-label'
+  .form-group.row
+    = label_tag :release_description, s_('TagsPage|Release notes'), class: 'col-form-label col-sm-2'
     .col-sm-10
       = 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: s_('TagsPage|Write your release notes or drag files here...'), current_text: @release_description
+        = render 'projects/zen', attr: :release_description, classes: 'note-textarea', placeholder: s_('TagsPage|Write your release notes or drag files here…'), current_text: @release_description
         = render 'shared/notes/hints'
-      .help-block
+      .form-text.text-muted
         = s_('TagsPage|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 s_('TagsPage|Create tag'), class: 'btn btn-create'
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index dfe2c37ed8e..15a960f81b8 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -11,7 +11,7 @@
           = icon('tag')
           = @tag.name
         - if protected_tag?(@project, @tag)
-          %span.label.label-success
+          %span.badge.badge-success
             = s_('TagsPage|protected')
       - if @commit
         = render 'projects/branches/commit', commit: @commit, project: @project
@@ -28,7 +28,7 @@
         = icon('history')
       .btn-container.controls-item
         = render 'projects/buttons/download', project: @project, ref: @tag.name
-      - if can?(current_user, :admin_project, @project)
+      - if can?(current_user, :push_code, @project) && can?(current_user, :admin_project, @project)
         .btn-container.controls-item-full
           = link_to project_tag_path(@project, @tag.name), class: "btn btn-remove remove-row has-tooltip #{protected_tag?(@project, @tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), method: :delete, data: { confirm: s_('TagsPage|Deleting the %{tag_name} tag cannot be undone. Are you sure?') % { tag_name: @tag.name } } do
             %i.fa.fa-trash-o
diff --git a/app/views/projects/tree/_blob_item.html.haml b/app/views/projects/tree/_blob_item.html.haml
index 8c1c532cb3e..f79f3af36d4 100644
--- a/app/views/projects/tree/_blob_item.html.haml
+++ b/app/views/projects/tree/_blob_item.html.haml
@@ -6,7 +6,7 @@
     = link_to project_blob_path(@project, tree_join(@id || @commit.id, blob_item.name)), class: 'str-truncated', title: file_name do
       %span= file_name
     - if is_lfs_blob
-      %span.label.label-lfs.prepend-left-5 LFS
-  %td.hidden-xs.tree-commit
+      %span.badge.label-lfs.prepend-left-5 LFS
+  %td.d-none.d-sm-table-cell.tree-commit
   %td.tree-time-ago.cgray.text-right
     = render 'projects/tree/spinner'
diff --git a/app/views/projects/tree/_submodule_item.html.haml b/app/views/projects/tree/_submodule_item.html.haml
index 04d52361db0..e563c8c4036 100644
--- a/app/views/projects/tree/_submodule_item.html.haml
+++ b/app/views/projects/tree/_submodule_item.html.haml
@@ -3,4 +3,4 @@
     %i.fa.fa-archive.fa-fw
     = submodule_link(submodule_item, @ref)
   %td
-  %td.hidden-xs
+  %td.d-none.d-sm-table-cell
diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
index 6ea78851b8d..587aeafa82f 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -4,15 +4,15 @@
       %thead
         %tr
           %th= s_('ProjectFileTree|Name')
-          %th.hidden-xs
-            .pull-left= _('Last commit')
+          %th.d-none.d-sm-table-cell
+            .float-left= _('Last commit')
           %th.text-right= _('Last update')
       - if @path.present?
         %tr.tree-item
           %td.tree-item-file-name
             = link_to "..", project_tree_path(@project, up_dir_path), class: 'prepend-left-10'
           %td
-          %td.hidden-xs
+          %td.d-none.d-sm-table-cell
 
       = render_tree(tree)
 
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 5ef5e9c09a2..9d196075bf1 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,25 +1,28 @@
+- can_collaborate = can_collaborate_with_project?(@project)
+- can_create_mr_from_fork = can?(current_user, :fork_project, @project) && can?(current_user, :create_merge_request_in, @project)
+
 .tree-ref-container
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'tree', path: @path, show_create: true
 
     - if on_top_of_branch?
-      - addtotree_toggle_attributes = { href: '#', 'data-toggle': 'dropdown', 'data-target': '.add-to-tree-dropdown' }
+      - addtotree_toggle_attributes = { href: '#', 'data-toggle': 'dropdown', 'data-target': '.add-to-tree-dropdown', 'data-boundary': 'window' }
     - else
       - addtotree_toggle_attributes = { title: _("You can only add files when you are on a branch"), data: { container: 'body' }, class: 'disabled has-tooltip' }
 
   %ul.breadcrumb.repo-breadcrumb
-    %li
+    %li.breadcrumb-item
       = link_to project_tree_path(@project, @ref) do
         = @project.path
     - path_breadcrumbs do |title, path|
-      %li
+      %li.breadcrumb-item
         = link_to truncate(title, length: 40), project_tree_path(@project, tree_join(@ref, path))
 
-    - if current_user
-      %li
+    - if can_collaborate || can_create_mr_from_fork
+      %li.breadcrumb-item
         %a.btn.add-to-tree{ addtotree_toggle_attributes }
-          = sprite_icon('plus', size: 16, css_class: 'pull-left')
-          = sprite_icon('arrow-down', size: 16, css_class: 'pull-left')
+          = sprite_icon('plus', size: 16, css_class: 'float-left')
+          = sprite_icon('arrow-down', size: 16, css_class: 'float-left')
         - if on_top_of_branch?
           .add-to-tree-dropdown
             %ul.dropdown-menu
@@ -35,7 +38,7 @@
                 %li
                   = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
                     #{ _('New directory') }
-              - elsif can?(current_user, :fork_project, @project)
+              - elsif can?(current_user, :fork_project, @project) && can?(current_user, :create_merge_request_in, @project)
                 %li
                   - continue_params = { to:         project_new_blob_path(@project, @id),
                                         notice:     edit_in_new_fork_notice,
@@ -61,23 +64,25 @@
                   = link_to fork_path, method: :post do
                     #{ _('New directory') }
 
-              %li.divider
-              %li.dropdown-header
-                #{ _('This repository') }
-              %li
-                = link_to new_project_branch_path(@project) do
-                  #{ _('New branch') }
-              %li
-                = link_to new_project_tag_path(@project) do
-                  #{ _('New tag') }
+              - if can?(current_user, :push_code, @project)
+                %li.divider
+                %li.dropdown-header
+                  #{ _('This repository') }
+                %li
+                  = link_to new_project_branch_path(@project) do
+                    #{ _('New branch') }
+                %li
+                  = link_to new_project_tag_path(@project) do
+                    #{ _('New tag') }
 
 .tree-controls
   = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
 
   = render 'projects/find_file_link'
 
-  = succeed " " do
-    = link_to ide_edit_path(@project, @id, ""), class: 'btn btn-default' do
-      = _('Web IDE')
+  - if can_collaborate
+    = succeed " " do
+      = link_to ide_edit_path(@project, @ref, @path), class: 'btn btn-default' do
+        = _('Web IDE')
 
   = render 'projects/buttons/download', project: @project, ref: @ref
diff --git a/app/views/projects/tree/_tree_item.html.haml b/app/views/projects/tree/_tree_item.html.haml
index af3816fc9f4..ce0cd95b468 100644
--- a/app/views/projects/tree/_tree_item.html.haml
+++ b/app/views/projects/tree/_tree_item.html.haml
@@ -4,6 +4,6 @@
     - path = flatten_tree(@path, tree_item)
     = link_to project_tree_path(@project, tree_join(@id || @commit.id, path)), class: 'str-truncated', title: path do
       %span= path
-  %td.hidden-xs.tree-commit
+  %td.d-none.d-sm-table-cell.tree-commit
   %td.tree-time-ago.text-right
     = render 'projects/tree/spinner'
diff --git a/app/views/projects/triggers/_content.html.haml b/app/views/projects/triggers/_content.html.haml
index 6c2d603d95d..96a41aa066c 100644
--- a/app/views/projects/triggers/_content.html.haml
+++ b/app/views/projects/triggers/_content.html.haml
@@ -1,6 +1,6 @@
 %p.append-bottom-default
   Triggers with the
-  %span.label.label-primary legacy
+  %span.badge.badge-primary legacy
   label do not have an associated user and only have access to the current project.
   %br
   = succeed '.' do
diff --git a/app/views/projects/triggers/_form.html.haml b/app/views/projects/triggers/_form.html.haml
index 5f708b3a2ed..3539aea3580 100644
--- a/app/views/projects/triggers/_form.html.haml
+++ b/app/views/projects/triggers/_form.html.haml
@@ -4,7 +4,7 @@
   - if @trigger.token
     .form-group
       %label.label-light Token
-      %p.form-control-static= @trigger.token
+      %p.form-control-plaintext= @trigger.token
   .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"
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
index 0f655e4ed83..a15bb4c4f3f 100644
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
@@ -1,11 +1,11 @@
 .row.prepend-top-default.append-bottom-default.triggers-container
   .col-lg-12
     = render "projects/triggers/content"
-    .panel.panel-default
-      .panel-heading
-        %h4.panel-title
+    .card
+      .card-header
+        %h4.card-title
           Manage your project's triggers
-      .panel-body
+      .card-body
         = render "projects/triggers/form", btn_text: "Add trigger"
         %hr
         - if @triggers.any?
@@ -26,7 +26,7 @@
           %p.settings-message.text-center.append-bottom-default
             No triggers have been created yet. Add one using the form above.
 
-      .panel-footer
+      .card-footer
 
         %p
           In the following examples, you can see the exact API call you need to
diff --git a/app/views/projects/triggers/_trigger.html.haml b/app/views/projects/triggers/_trigger.html.haml
index 6249c32b7cc..7e4618e1a88 100644
--- a/app/views/projects/triggers/_trigger.html.haml
+++ b/app/views/projects/triggers/_trigger.html.haml
@@ -8,9 +8,9 @@
 
     .label-container
       - if trigger.legacy?
-        %span.label.label-primary.has-tooltip{ title: "Trigger makes use of deprecated functionality" } legacy
+        %span.badge.badge-primary.has-tooltip{ title: "Trigger makes use of deprecated functionality" } legacy
       - if !trigger.can_access_project?
-        %span.label.label-danger.has-tooltip{ title: "Trigger user has insufficient permissions to project" } invalid
+        %span.badge.badge-danger.has-tooltip{ title: "Trigger user has insufficient permissions to project" } invalid
 
   %td
     - if trigger.description? && trigger.description.length > 15
@@ -25,7 +25,7 @@
 
   %td
     - if trigger.last_used
-      #{time_ago_in_words(trigger.last_used)} ago
+      = time_ago_with_tooltip trigger.last_used
     - else
       Never
 
diff --git a/app/views/projects/wikis/_form.html.haml b/app/views/projects/wikis/_form.html.haml
index d285251d06f..26fe1de31fe 100644
--- a/app/views/projects/wikis/_form.html.haml
+++ b/app/views/projects/wikis/_form.html.haml
@@ -1,13 +1,13 @@
 - commit_message = @page.persisted? ? s_("WikiPageEdit|Update %{page_title}") : s_("WikiPageCreate|Create %{page_title}")
 - commit_message = commit_message % { page_title: @page.title }
 
-= form_for [@project.namespace.becomes(Namespace), @project, @page], method: @page.persisted? ? :put : :post, html: { class: 'form-horizontal wiki-form common-note-form prepend-top-default js-quick-submit' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @page], method: @page.persisted? ? :put : :post, html: { class: 'wiki-form common-note-form prepend-top-default js-quick-submit' } do |f|
   = form_errors(@page)
 
   - if @page.persisted?
     = f.hidden_field :last_commit_sha, value: @page.last_commit_sha
 
-  .form-group
+  .form-group.row
     .col-sm-12= f.label :title, class: 'control-label-full-width'
     .col-sm-12
       = f.text_field :title, class: 'form-control', value: @page.title
@@ -16,22 +16,22 @@
           = icon('lightbulb-o')
           = s_("WikiEditPageTip|Tip: You can move this page by adding the path to the beginning of the title.")
           = link_to icon('question-circle'), help_page_path('user/project/wiki/index', anchor: 'moving-a-wiki-page'), target: '_blank'
-  .form-group
+  .form-group.row
     .col-sm-12= f.label :format, class: 'control-label-full-width'
     .col-sm-12
       = f.select :format, options_for_select(ProjectWiki::MARKUPS, {selected: @page.format}), {}, class: 'form-control'
 
-  .form-group
+  .form-group.row
     .col-sm-12= f.label :content, class: 'control-label-full-width'
     .col-sm-12
       = render layout: 'projects/md_preview', locals: { url: project_wiki_preview_markdown_path(@project, @page.slug) } do
-        = render 'projects/zen', f: f, attr: :content, classes: 'note-textarea', placeholder: s_("WikiPage|Write your content or drag files here...")
+        = render 'projects/zen', f: f, attr: :content, classes: 'note-textarea', placeholder: s_("WikiPage|Write your content or drag files here…")
         = render 'shared/notes/hints'
 
       .clearfix
       .error-alert
 
-      .help-block
+      .form-text.text-muted
         = succeed '.' do
           = (s_("WikiMarkdownTip|To link to a (new) page, simply type %{link_example}") % { link_example: '<code>[Link Title](page-slug)</code>' }).html_safe
 
@@ -39,16 +39,16 @@
           - markdown_link = link_to s_("WikiMarkdownDocs|documentation"), help_page_path('user/markdown', anchor: 'wiki-specific-markdown')
           = (s_("WikiMarkdownDocs|More examples are in the %{docs_link}") % { docs_link: markdown_link }).html_safe
 
-  .form-group
+  .form-group.row
     .col-sm-12= f.label :commit_message, class: 'control-label-full-width'
     .col-sm-12= f.text_field :message, class: 'form-control', rows: 18, value: commit_message
 
   .form-actions
     - if @page && @page.persisted?
       = f.submit _("Save changes"), class: 'btn-save btn'
-      .pull-right
+      .float-right
         = link_to _("Cancel"), project_wiki_path(@project, @page), class: 'btn btn-cancel btn-grouped'
     - else
       = f.submit s_("Wiki|Create page"), class: 'btn-create btn'
-      .pull-right
+      .float-right
         = link_to _("Cancel"), project_wiki_path(@project, :home), class: 'btn btn-cancel'
diff --git a/app/views/projects/wikis/_new.html.haml b/app/views/projects/wikis/_new.html.haml
index 06a3cac12d5..38382aae67c 100644
--- a/app/views/projects/wikis/_new.html.haml
+++ b/app/views/projects/wikis/_new.html.haml
@@ -2,8 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title= s_("WikiNewPageTitle|New Wiki Page")
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
       .modal-body
         %form.new-wiki-page
           .form-group
diff --git a/app/views/projects/wikis/_pages_wiki_page.html.haml b/app/views/projects/wikis/_pages_wiki_page.html.haml
index efa16d38f84..cbb441d7509 100644
--- a/app/views/projects/wikis/_pages_wiki_page.html.haml
+++ b/app/views/projects/wikis/_pages_wiki_page.html.haml
@@ -1,5 +1,5 @@
 %li
   = link_to wiki_page.title, project_wiki_path(@project, wiki_page)
   %small (#{wiki_page.format})
-  .pull-right
+  .float-right
     %small= (s_("Last edited %{date}") % { date: time_ago_with_tooltip(wiki_page.last_version.authored_date) }).html_safe
diff --git a/app/views/projects/wikis/_sidebar.html.haml b/app/views/projects/wikis/_sidebar.html.haml
index 743d6586cf0..d97fcbc9616 100644
--- a/app/views/projects/wikis/_sidebar.html.haml
+++ b/app/views/projects/wikis/_sidebar.html.haml
@@ -1,7 +1,7 @@
 %aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
   .sidebar-container
     .block.wiki-sidebar-header.append-bottom-default
-      %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
+      %a.gutter-toggle.float-right.d-block.d-sm-block.d-md-none.js-sidebar-wiki-toggle{ href: "#" }
         = icon('angle-double-right')
 
       - git_access_url = project_wikis_git_access_path(@project)
diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml
index 9d3d4072027..d80d2957466 100644
--- a/app/views/projects/wikis/edit.html.haml
+++ b/app/views/projects/wikis/edit.html.haml
@@ -1,4 +1,4 @@
-- @content_class = "limit-container-width limit-container-width-sm" unless fluid_layout
+- @content_class = "limit-container-width" unless fluid_layout
 - page_title _("Edit"), @page.title.capitalize, _("Wiki")
 
 = wiki_page_errors(@error)
@@ -28,9 +28,16 @@
       = link_to project_wiki_history_path(@project, @page), class: "btn" do
         = s_("Wiki|Page history")
       - if can?(current_user, :admin_wiki, @project)
-        = link_to project_wiki_path(@project, @page), data: { confirm: s_("WikiPageConfirmDelete|Are you sure you want to delete this page?")}, method: :delete, class: "btn btn-danger" do
-          = _("Delete")
+        %button.btn.btn-danger{ data: { toggle: 'modal',
+          target: '#delete-wiki-modal',
+          delete_wiki_url: project_wiki_path(@project, @page),
+          page_title: @page.title.capitalize },
+          id: 'delete-wiki-button',
+          type: 'button' }
+          = _('Delete')
 
 = render 'form'
 
 = render 'sidebar'
+
+#delete-wiki-modal.modal.fade
diff --git a/app/views/projects/wikis/empty.html.haml b/app/views/projects/wikis/empty.html.haml
index d6e568bac94..62fa6e1907b 100644
--- a/app/views/projects/wikis/empty.html.haml
+++ b/app/views/projects/wikis/empty.html.haml
@@ -1,6 +1,4 @@
 - page_title _("Wiki")
+- @right_sidebar = false
 
-%h3.page-title= s_("Wiki|Empty page")
-%hr
-.error_message
-  = s_("WikiEmptyPageError|You are not allowed to create wiki pages")
+= render 'shared/empty_states/wikis'
diff --git a/app/views/projects/wikis/git_access.html.haml b/app/views/projects/wikis/git_access.html.haml
index 10dbbc0e42c..8c2cbd495a0 100644
--- a/app/views/projects/wikis/git_access.html.haml
+++ b/app/views/projects/wikis/git_access.html.haml
@@ -1,8 +1,8 @@
-- @content_class = "limit-container-width limit-container-width-sm" unless fluid_layout
+- @content_class = "limit-container-width" unless fluid_layout
 - page_title s_("WikiClone|Git Access"), _("Wiki")
 
 .wiki-page-header.has-sidebar-toggle
-  %button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+  %button.btn.btn-default.d-block.d-sm-block.d-md-none.float-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
 
   .git-access-header
diff --git a/app/views/projects/wikis/show.html.haml b/app/views/projects/wikis/show.html.haml
index b3b83cee81a..a08973c7f32 100644
--- a/app/views/projects/wikis/show.html.haml
+++ b/app/views/projects/wikis/show.html.haml
@@ -1,4 +1,4 @@
-- @content_class = "limit-container-width limit-container-width-sm" unless fluid_layout
+- @content_class = "limit-container-width" unless fluid_layout
 - breadcrumb_title @page.title.capitalize
 - wiki_breadcrumb_dropdown_links(@page.slug)
 - page_title @page.title.capitalize, _("Wiki")
@@ -24,7 +24,7 @@
     - history_link = link_to s_("WikiHistoricalPage|history"), project_wiki_history_path(@project, @page)
     = (s_("WikiHistoricalPage|You can view the %{most_recent_link} or browse the %{history_link}.") % { most_recent_link: most_recent_link, history_link: history_link }).html_safe
 
-.wiki-holder.prepend-top-default.append-bottom-default
+.prepend-top-default.append-bottom-default
   .wiki
     = render_wiki_content(@page)
 
diff --git a/app/views/search/_category.html.haml b/app/views/search/_category.html.haml
index 7d43fd61081..ff9a7b53a86 100644
--- a/app/views/search/_category.html.haml
+++ b/app/views/search/_category.html.haml
@@ -1,80 +1,80 @@
 .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
-  %ul.nav-links.search-filter.scrolling-tabs
+  %ul.nav-links.search-filter.scrolling-tabs.nav.nav-tabs
     - if @project
       - if project_search_tabs?(:blobs)
         %li{ class: active_when(@scope == 'blobs') }
           = link_to search_filter_path(scope: 'blobs') do
             Code
-            %span.badge
+            %span.badge.badge-pill
               = @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
+            %span.badge.badge-pill
               = limited_count(@search_results.limited_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
+            %span.badge.badge-pill
               = limited_count(@search_results.limited_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
+            %span.badge.badge-pill
               = limited_count(@search_results.limited_milestones_count)
       - if project_search_tabs?(:notes)
         %li{ class: active_when(@scope == 'notes') }
           = link_to search_filter_path(scope: 'notes') do
             Comments
-            %span.badge
+            %span.badge.badge-pill
               = limited_count(@search_results.limited_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
+            %span.badge.badge-pill
               = @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
+            %span.badge.badge-pill
               = @search_results.commits_count
 
     - elsif @show_snippets
       %li{ class: active_when(@scope == 'snippet_blobs') }
         = link_to search_filter_path(scope: 'snippet_blobs', snippets: true, group_id: nil, project_id: nil) do
           Snippet Contents
-          %span.badge
+          %span.badge.badge-pill
             = @search_results.snippet_blobs_count
       %li{ class: active_when(@scope == 'snippet_titles') }
         = link_to search_filter_path(scope: 'snippet_titles', snippets: true, group_id: nil, project_id: nil) do
           Titles and Filenames
-          %span.badge
+          %span.badge.badge-pill
             = @search_results.snippet_titles_count
     - else
       %li{ class: active_when(@scope == 'projects') }
         = link_to search_filter_path(scope: 'projects') do
           Projects
-          %span.badge
+          %span.badge.badge-pill
             = limited_count(@search_results.limited_projects_count)
       %li{ class: active_when(@scope == 'issues') }
         = link_to search_filter_path(scope: 'issues') do
           Issues
-          %span.badge
+          %span.badge.badge-pill
             = limited_count(@search_results.limited_issues_count)
       %li{ class: active_when(@scope == 'merge_requests') }
         = link_to search_filter_path(scope: 'merge_requests') do
           Merge requests
-          %span.badge
+          %span.badge.badge-pill
             = limited_count(@search_results.limited_merge_requests_count)
       %li{ class: active_when(@scope == 'milestones') }
         = link_to search_filter_path(scope: 'milestones') do
           Milestones
-          %span.badge
+          %span.badge.badge-pill
             = limited_count(@search_results.limited_milestones_count)
diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index e4902d368e7..6837f64f132 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -11,7 +11,7 @@
       - else
         Any
     = icon("chevron-down")
-  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-align-right
+  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-right
     = dropdown_title("Filter results by group")
     = dropdown_filter("Search groups")
     = dropdown_content
@@ -26,7 +26,7 @@
       - else
         Any
     = icon("chevron-down")
-  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-align-right
+  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-right
     = dropdown_title("Filter results by project")
     = dropdown_filter("Search projects")
     = dropdown_content
diff --git a/app/views/search/results/_blob.html.haml b/app/views/search/results/_blob.html.haml
index de473c23d66..fdcd126e7a3 100644
--- a/app/views/search/results/_blob.html.haml
+++ b/app/views/search/results/_blob.html.haml
@@ -1,13 +1,5 @@
-- file_name, blob = blob
-.blob-result
-  .file-holder
-    .js-file-title.file-title
-      - ref = @search_results.repository_ref
-      - blob_link = project_blob_path(@project, tree_join(ref, file_name))
-      = link_to blob_link do
-        %i.fa.fa-file
-        %strong
-          = file_name
-    - if blob
-      .file-content.code.term
-        = render 'shared/file_highlight', blob: blob, first_line_number: blob.startline, blob_link: blob_link
+- project = find_project_for_result_blob(blob)
+- file_name, blob = parse_search_result(blob)
+- blob_link = project_blob_path(project, tree_join(blob.ref, file_name))
+
+= render partial: 'search/results/blob_data', locals: { blob: blob, project: project, file_name: file_name, blob_link: blob_link }
diff --git a/app/views/search/results/_blob_data.html.haml b/app/views/search/results/_blob_data.html.haml
new file mode 100644
index 00000000000..143e9f91ca3
--- /dev/null
+++ b/app/views/search/results/_blob_data.html.haml
@@ -0,0 +1,10 @@
+.blob-result
+  .file-holder
+    .js-file-title.file-title
+      = link_to blob_link do
+        %i.fa.fa-file
+        %strong
+          = search_blob_title(project, file_name)
+    - if blob.data
+      .file-content.code.term
+        = render 'shared/file_highlight', blob: blob, first_line_number: blob.startline
diff --git a/app/views/search/results/_commit.html.haml b/app/views/search/results/_commit.html.haml
index f34eaf89027..ed5a3badf11 100644
--- a/app/views/search/results/_commit.html.haml
+++ b/app/views/search/results/_commit.html.haml
@@ -1 +1 @@
-= render 'projects/commits/commit', project: @project, commit: commit, ref: nil
+= render 'projects/commits/commit', project: commit.project, commit: commit, ref: nil, show_project_name: @project.nil?
diff --git a/app/views/search/results/_issue.html.haml b/app/views/search/results/_issue.html.haml
index b7a27ef6be2..c413c3d4abb 100644
--- a/app/views/search/results/_issue.html.haml
+++ b/app/views/search/results/_issue.html.haml
@@ -4,8 +4,8 @@
     = link_to [issue.project.namespace.becomes(Namespace), issue.project, issue] do
       %span.term.str-truncated= issue.title
     - if issue.closed?
-      %span.label.label-danger.prepend-left-5 Closed
-    .pull-right ##{issue.iid}
+      %span.badge.badge-danger.prepend-left-5 Closed
+    .float-right ##{issue.iid}
   - if issue.description.present?
     .description.term
       = search_md_sanitize(issue, :description)
diff --git a/app/views/search/results/_merge_request.html.haml b/app/views/search/results/_merge_request.html.haml
index 8b0fd74f680..519176af108 100644
--- a/app/views/search/results/_merge_request.html.haml
+++ b/app/views/search/results/_merge_request.html.haml
@@ -3,10 +3,10 @@
     = link_to [merge_request.target_project.namespace.becomes(Namespace), merge_request.target_project, merge_request] do
       %span.term.str-truncated= merge_request.title
     - if merge_request.merged?
-      %span.label.label-primary.prepend-left-5 Merged
+      %span.badge.badge-primary.prepend-left-5 Merged
     - elsif merge_request.closed?
-      %span.label.label-danger.prepend-left-5 Closed
-    .pull-right= merge_request.to_reference
+      %span.badge.badge-danger.prepend-left-5 Closed
+    .float-right= merge_request.to_reference
   - if merge_request.description.present?
     .description.term
       = search_md_sanitize(merge_request, :description)
diff --git a/app/views/search/results/_snippet_title.html.haml b/app/views/search/results/_snippet_title.html.haml
index d46c4d11e51..9c8afb2165b 100644
--- a/app/views/search/results/_snippet_title.html.haml
+++ b/app/views/search/results/_snippet_title.html.haml
@@ -3,13 +3,13 @@
     = link_to reliable_snippet_path(snippet_title) do
       = truncate(snippet_title.title, length: 60)
       - if snippet_title.private?
-        %span.label.label-gray
+        %span.badge.badge-gray
           %i.fa.fa-lock
           private
-    %span.cgray.monospace.tiny.pull-right.term
+    %span.cgray.monospace.tiny.float-right.term
       = snippet_title.file_name
 
-  %small.pull-right.cgray
+  %small.float-right.cgray
     - if snippet_title.project_id?
       = link_to snippet_title.project.full_name, project_path(snippet_title.project)
 
diff --git a/app/views/search/results/_wiki_blob.html.haml b/app/views/search/results/_wiki_blob.html.haml
index 16a0e432d62..4346217c230 100644
--- a/app/views/search/results/_wiki_blob.html.haml
+++ b/app/views/search/results/_wiki_blob.html.haml
@@ -1,10 +1,5 @@
-- wiki_blob = parse_search_result(wiki_blob)
-.blob-result
-  .file-holder
-    .js-file-title.file-title
-      = link_to project_wiki_path(@project, wiki_blob.basename) do
-        %i.fa.fa-file
-        %strong
-          = wiki_blob.basename
-    .file-content.code.term
-      = render 'shared/file_highlight', blob: wiki_blob, first_line_number: wiki_blob.startline
+- project = find_project_for_result_blob(wiki_blob)
+- file_name, wiki_blob = parse_search_result(wiki_blob)
+- wiki_blob_link = project_wiki_path(project, wiki_blob.basename)
+
+= render partial: 'search/results/blob_data', locals: { blob: wiki_blob, project: project, file_name: file_name, blob_link: wiki_blob_link }
diff --git a/app/views/shared/_allow_request_access.html.haml b/app/views/shared/_allow_request_access.html.haml
index 53a99a736c0..92268e74b1e 100644
--- a/app/views/shared/_allow_request_access.html.haml
+++ b/app/views/shared/_allow_request_access.html.haml
@@ -1,6 +1,6 @@
-.checkbox
-  = form.label :request_access_enabled do
-    = form.check_box :request_access_enabled
+.form-check
+  = form.check_box :request_access_enabled, class: 'form-check-input'
+  = form.label :request_access_enabled, class: 'form-check-label' do
     %strong Allow users to request access
     %br
     %span.descr Allow users to request access if visibility is public or internal.
diff --git a/app/views/shared/_auto_devops_callout.html.haml b/app/views/shared/_auto_devops_callout.html.haml
index 934d65e8b42..084d295f2c1 100644
--- a/app/views/shared/_auto_devops_callout.html.haml
+++ b/app/views/shared/_auto_devops_callout.html.haml
@@ -1,15 +1,15 @@
-.js-autodevops-banner.banner-callout.banner-non-empty-state.append-bottom-20{ data: { uid: 'auto_devops_settings_dismissed', project_path: project_path(@project) } }
+.js-autodevops-banner.banner-callout.banner-non-empty-state.append-bottom-20.prepend-top-10{ data: { uid: 'auto_devops_settings_dismissed', project_path: project_path(@project) } }
   .banner-graphic
     = custom_icon('icon_autodevops')
 
-  .prepend-top-10.prepend-left-10.append-bottom-10
-    %h5= s_('AutoDevOps|Auto DevOps (Beta)')
+  .banner-body.prepend-left-10.append-bottom-10
+    %h5.banner-title= s_('AutoDevOps|Auto DevOps')
     %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.')
     %p
       - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer')
       = s_('AutoDevOps|Learn more in the %{link_to_documentation}').html_safe % { link_to_documentation: link }
-    .prepend-top-10
-      = link_to s_('AutoDevOps|Enable in settings'), project_settings_ci_cd_path(@project, anchor: 'js-general-pipeline-settings'), class: 'btn js-close-callout'
+    .banner-buttons
+      = link_to s_('AutoDevOps|Enable in settings'), project_settings_ci_cd_path(@project, anchor: 'autodevops-settings'), class: 'btn js-close-callout'
 
   %button.btn-transparent.banner-close.close.js-close-callout{ type: 'button',
   'aria-label' => 'Dismiss Auto DevOps box' }
diff --git a/app/views/shared/_choose_group_avatar_button.html.haml b/app/views/shared/_choose_group_avatar_button.html.haml
index 75c65520350..0552fe62090 100644
--- a/app/views/shared/_choose_group_avatar_button.html.haml
+++ b/app/views/shared/_choose_group_avatar_button.html.haml
@@ -1,4 +1,4 @@
 %button.btn.js-choose-group-avatar-button{ type: 'button' }= _("Choose File ...")
 %span.file_name.js-avatar-filename= _("No file chosen")
 = f.file_field :avatar, class: "js-group-avatar-input hidden"
-.help-block= _("The maximum file size allowed is 200KB.")
+.form-text.text-muted= _("The maximum file size allowed is 200KB.")
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index 687cd4d1532..3655c2a1d42 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -1,22 +1,22 @@
 - project = project || @project
 
 .git-clone-holder.input-group
-  .input-group-btn
+  .input-group-prepend
     - if allowed_protocols_present?
-      .clone-dropdown-btn.btn
+      .input-group-text.clone-dropdown-btn.btn
         %span
           = enabled_project_button(project, enabled_protocol)
     - else
-      %a#clone-dropdown.btn.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
+      %a#clone-dropdown.input-group-text.btn.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
         %span
           = default_clone_protocol.upcase
         = icon('caret-down')
-      %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right.clone-options-dropdown
+      %ul.dropdown-menu.dropdown-menu-selectable.clone-options-dropdown
         %li
           = ssh_clone_button(project)
         %li
           = http_clone_button(project)
 
   = 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"), class: "btn-default btn-clipboard")
+  .input-group-append
+    = clipboard_button(target: '#project_clone', title: _("Copy URL to clipboard"), class: "input-group-text btn-default btn-clipboard")
diff --git a/app/views/shared/_commit_message_container.html.haml b/app/views/shared/_commit_message_container.html.haml
index 2329de9e11f..68c14c307ac 100644
--- a/app/views/shared/_commit_message_container.html.haml
+++ b/app/views/shared/_commit_message_container.html.haml
@@ -1,7 +1,7 @@
-.form-group.commit_message-group
+.form-group.row.commit_message-group
   - nonce = SecureRandom.hex
   - descriptions = local_assigns.slice(:message_with_description, :message_without_description)
-  = label_tag "commit_message-#{nonce}", class: 'control-label' do
+  = label_tag "commit_message-#{nonce}", class: 'col-form-label col-sm-2' do
     #{ _('Commit message') }
   .col-sm-10
     .commit-message-container
diff --git a/app/views/shared/_commit_well.html.haml b/app/views/shared/_commit_well.html.haml
index 50e3d80a84d..6f1fe9bfdc5 100644
--- a/app/views/shared/_commit_well.html.haml
+++ b/app/views/shared/_commit_well.html.haml
@@ -1,4 +1,4 @@
-.info-well.hidden-xs.project-last-commit.append-bottom-default
+.info-well.d-none.d-sm-block.project-last-commit.append-bottom-default
   .well-segment
     %ul.blob-commit-info
       = render 'projects/commits/commit', commit: commit, ref: ref, project: project
diff --git a/app/views/shared/_confirm_modal.html.haml b/app/views/shared/_confirm_modal.html.haml
index f94f8ffc604..1dcf4369253 100644
--- a/app/views/shared/_confirm_modal.html.haml
+++ b/app/views/shared/_confirm_modal.html.haml
@@ -2,9 +2,10 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title
           Confirmation required
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
 
       .modal-body
         %p.text-danger.js-confirm-text
diff --git a/app/views/shared/_delete_label_modal.html.haml b/app/views/shared/_delete_label_modal.html.haml
index 01effefc34d..b96380923ac 100644
--- a/app/views/shared/_delete_label_modal.html.haml
+++ b/app/views/shared/_delete_label_modal.html.haml
@@ -2,8 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{ data: {dismiss: 'modal' } } &times;
         %h3.page-title Delete #{render_colored_label(label, tooltip: false)} ?
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
 
       .modal-body
         %p
diff --git a/app/views/shared/_email_with_badge.html.haml b/app/views/shared/_email_with_badge.html.haml
index b7bbc109238..ad863b1967d 100644
--- a/app/views/shared/_email_with_badge.html.haml
+++ b/app/views/shared/_email_with_badge.html.haml
@@ -1,4 +1,4 @@
-- css_classes = %w(label label-verification-status)
+- css_classes = %w(badge badge-verification-status)
 - css_classes << (verified ? 'verified': 'unverified')
 - text = verified ? 'Verified' : 'Unverified'
 
diff --git a/app/views/shared/_event_filter.html.haml b/app/views/shared/_event_filter.html.haml
index e7fa7477e0c..ecb5b1c6ebc 100644
--- a/app/views/shared/_event_filter.html.haml
+++ b/app/views/shared/_event_filter.html.haml
@@ -1,7 +1,7 @@
 .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
-  %ul.nav-links.event-filter.scrolling-tabs
+  %ul.nav-links.event-filter.scrolling-tabs.nav.nav-tabs
     = event_filter_link EventFilter.all, _('All'), s_('EventFilterBy|Filter by all')
     - if event_filter_visible(:repository)
       = event_filter_link EventFilter.push, _('Push events'), s_('EventFilterBy|Filter by push events')
diff --git a/app/views/shared/_field.html.haml b/app/views/shared/_field.html.haml
index aea0a8fd8e0..b89045e726a 100644
--- a/app/views/shared/_field.html.haml
+++ b/app/views/shared/_field.html.haml
@@ -9,11 +9,11 @@
 - help = field[:help]
 - disabled = disable_fields_service?(@service)
 
-.form-group
+.form-group.row
   - if type == "password" && value.present?
-    = form.label name, "Enter new #{title.downcase}", class: "control-label"
+    = form.label name, "Enter new #{title.downcase}", class: "col-form-label col-sm-2"
   - else
-    = form.label name, title, class: "control-label"
+    = form.label name, title, class: "col-form-label col-sm-2"
   .col-sm-10
     - if type == 'text'
       = form.text_field name, class: "form-control", placeholder: placeholder, required: required, disabled: disabled
@@ -26,4 +26,4 @@
     - elsif type == 'password'
       = form.password_field name, autocomplete: "new-password", class: "form-control", required: value.blank? && required, disabled: disabled
     - if help
-      %span.help-block= help
+      %span.form-text.text-muted= help
diff --git a/app/views/shared/_group_form.html.haml b/app/views/shared/_group_form.html.haml
index cb21f90696f..dbed4b94d61 100644
--- a/app/views/shared/_group_form.html.haml
+++ b/app/views/shared/_group_form.html.haml
@@ -2,15 +2,16 @@
 - group_path = root_url
 - group_path << parent.full_path + '/' if parent
 
-.form-group
-  = f.label :path, class: 'control-label' do
+.form-group.row
+  = f.label :path, class: 'col-form-label col-sm-2' do
     Group path
   .col-sm-10
     .input-group.gl-field-error-anchor
-      .group-root-path.input-group-addon.has-tooltip{ title: group_path, :'data-placement' => 'bottom' }
-        %span>= root_url
-        - if parent
-          %strong= parent.full_path + '/'
+      .group-root-path.input-group-prepend.has-tooltip{ title: group_path, :'data-placement' => 'bottom' }
+        .input-group-text
+          %span>= root_url
+          - if parent
+            %strong= parent.full_path + '/'
       = f.hidden_field :parent_id
       = f.text_field :path, placeholder: 'open-source', class: 'form-control',
         autofocus: local_assigns[:autofocus] || false, required: true,
@@ -24,16 +25,23 @@
         = succeed '.' do
           = link_to 'Learn more', help_page_path('user/group/index', anchor: 'changing-a-groups-path'), target: '_blank'
 
-.form-group.group-name-holder
-  = f.label :name, class: 'control-label' do
+.form-group.row.group-name-holder
+  = f.label :name, class: 'col-form-label col-sm-2' do
     Group name
   .col-sm-10
     = f.text_field :name, class: 'form-control',
       required: true,
       title: 'You can choose a descriptive name different from the path.'
 
-.form-group.group-description-holder
-  = f.label :description, class: 'control-label'
+- if @group.persisted?
+  .form-group.row.group-name-holder
+    = f.label :id, class: 'col-form-label col-sm-2' do
+      = _("Group ID")
+    .col-sm-10
+      = f.text_field :id, class: 'form-control', readonly: true
+
+.form-group.row.group-description-holder
+  = f.label :description, class: 'col-form-label col-sm-2'
   .col-sm-10
     = f.text_area :description, maxlength: 250,
         class: 'form-control js-gfm-input', rows: 4
diff --git a/app/views/shared/_import_form.html.haml b/app/views/shared/_import_form.html.haml
index 5eaaa1448d5..356e12cf9f8 100644
--- a/app/views/shared/_import_form.html.haml
+++ b/app/views/shared/_import_form.html.haml
@@ -7,16 +7,14 @@
 
   = f.text_field :import_url, autocomplete: 'off', class: 'form-control', placeholder: 'https://username:password@gitlab.company.com/group/project.git', required: true
 
-  .well.prepend-top-20
-    %ul
-      %li
-        = _('The repository must be accessible over <code>http://</code>, <code>https://</code> or <code>git://</code>.').html_safe
-      %li
-        = _('If your HTTP repository is not publicly accessible, add authentication information to the URL: <code>https://username:password@gitlab.company.com/group/project.git</code>.').html_safe
-      %li
-        = import_will_timeout_message(ci_cd_only)
-      %li
-        = import_svn_message(ci_cd_only)
-
--# EE-specific start
--# EE-specific end
+  .info-well.prepend-top-20
+    .well-segment
+      %ul
+        %li
+          = _('The repository must be accessible over <code>http://</code>, <code>https://</code> or <code>git://</code>.').html_safe
+        %li
+          = _('If your HTTP repository is not publicly accessible, add authentication information to the URL: <code>https://username:password@gitlab.company.com/group/project.git</code>.').html_safe
+        %li
+          = import_will_timeout_message(ci_cd_only)
+        %li
+          = import_svn_message(ci_cd_only)
diff --git a/app/views/shared/_issuable_meta_data.html.haml b/app/views/shared/_issuable_meta_data.html.haml
index 430d9a9dd76..6cc8c485666 100644
--- a/app/views/shared/_issuable_meta_data.html.haml
+++ b/app/views/shared/_issuable_meta_data.html.haml
@@ -5,21 +5,21 @@
 - issuable_mr        = @issuable_meta_data[issuable.id].merge_requests_count
 
 - if issuable_mr > 0
-  %li.issuable-mr.hidden-xs.has-tooltip{ title: _('Related merge requests') }
+  %li.issuable-mr.d-none.d-sm-block.has-tooltip{ title: _('Related merge requests') }
     = image_tag('icon-merge-request-unmerged.svg', class: 'icon-merge-request-unmerged')
     = issuable_mr
 
 - if upvotes > 0
-  %li.issuable-upvotes.hidden-xs.has-tooltip{ title: _('Upvotes') }
+  %li.issuable-upvotes.d-none.d-sm-block.has-tooltip{ title: _('Upvotes') }
     = icon('thumbs-up')
     = upvotes
 
 - if downvotes > 0
-  %li.issuable-downvotes.hidden-xs.has-tooltip{ title: _('Downvotes') }
+  %li.issuable-downvotes.d-none.d-sm-block.has-tooltip{ title: _('Downvotes') }
     = icon('thumbs-down')
     = downvotes
 
-%li.issuable-comments.hidden-xs
+%li.issuable-comments.d-none.d-sm-block
   = link_to issuable_url, class: ['has-tooltip', ('no-comments' if note_count.zero?)], title: _('Comments') do
     = icon('comments')
     = note_count
diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml
index 49555b6ff4e..987a5d4f13f 100644
--- a/app/views/shared/_issues.html.haml
+++ b/app/views/shared/_issues.html.haml
@@ -1,5 +1,5 @@
 - if @issues.to_a.any?
-  .panel.panel-default.panel-small.panel-without-border
+  .card.card-small.card-without-border
     %ul.content-list.issues-list.issuable-list
       = render partial: 'projects/issues/issue', collection: @issues
   = paginate @issues, theme: "gitlab"
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index 5afbc78df53..5eec7b02b54 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -1,92 +1,70 @@
 - label_css_id = dom_id(label)
 - status = label_subscription_status(label, @project).inquiry if current_user
 - subject = local_assigns[:subject]
+- use_label_priority = local_assigns.fetch(:use_label_priority, false)
+- force_priority = local_assigns.fetch(:force_priority, use_label_priority ? label.priority.present? : false)
 - toggle_subscription_path = toggle_subscription_label_path(label, @project) if current_user
 - show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project)
 - show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project)
+- tooltip_title = label_status_tooltip(label, status) if status
 
 %li.label-list-item{ id: label_css_id, data: { id: label.id } }
-  = render "shared/label_row", label: label
-
-  .visible-xs.visible-sm-inline-block.dropdown
-    %button.btn.btn-default.label-options-toggle{ type: 'button', data: { toggle: "dropdown" } }
-      Options
-      = icon('caret-down')
-    .dropdown-menu.dropdown-menu-align-right
-      %ul
-        - if show_label_merge_requests_link
-          %li
-            = link_to_label(label, subject: subject, type: :merge_request) do
-              View merge requests
-        - if show_label_issues_link
-          %li
-            = link_to_label(label, subject: subject) do
-              View open issues
-        - if current_user
-          %li.label-subscription
-            - if can_subscribe_to_label_in_different_levels?(label)
-              %a.js-unsubscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path } }
-                %span Unsubscribe
-              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_project_label_path(@project, label) } }
-                %span Subscribe at project level
-              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_group_label_path(label.group, label) } }
-                %span Subscribe at group level
-            - else
-              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', data: { status: status, url: toggle_subscription_path } }
-                %span= label_subscription_toggle_button_text(label, @project)
-
-        - if can?(current_user, :admin_label, label)
-          %li
-            = link_to 'Edit', edit_label_path(label)
-          %li
-            = link_to 'Delete',
-              destroy_label_path(label),
-              title: 'Delete',
-              method: :delete,
-              data: {confirm: 'Remove this label? Are you sure?'},
-              class: 'text-danger'
-
-  .pull-right.hidden-xs.hidden-sm
-    - if label.is_a?(ProjectLabel) && label.project.group && can?(current_user, :admin_label, label.project.group)
-      %button.js-promote-project-label-button.btn.btn-transparent.btn-action.has-tooltip{ title: _('Promote to Group Label'),
-        disabled: true,
-        type: 'button',
-        data: { url: promote_project_label_path(label.project, label),
-                label_title: label.title,
-                label_color: label.color,
-                label_text_color: label.text_color,
-                target: '#promote-label-modal',
-                container: 'body',
-                toggle: 'modal' } }
-        = sprite_icon('level-up')
-    - if can?(current_user, :admin_label, label)
-      = link_to edit_label_path(label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do
-        %span.sr-only Edit
-        = sprite_icon('pencil')
-      %span{ data: { toggle: 'modal', target: "#modal-delete-label-#{label.id}" } }
-        = link_to "#", title: "Delete", class: 'btn btn-transparent btn-action remove-row', data: { toggle: "tooltip" } do
-          %span.sr-only Delete
-          = sprite_icon('remove')
+  = render "shared/label_row", label: label, subject: subject, force_priority: force_priority
+  %ul.label-actions-list
+    - if @project
+      %li.inline
+        .label-badge.label-badge-gray= label.model_name.human.capitalize
+    - if can?(current_user, :admin_label, @project)
+      %li.inline.js-toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
+        dom_id: dom_id(label), type: label.type } }
+        %button.label-action.add-priority.btn.btn-transparent.has-tooltip{ title: _('Prioritize'), type: 'button', data: { placement: 'top' }, aria_label: _('Prioritize label') }
+          = sprite_icon('star-o')
+        %button.label-action.remove-priority.btn.btn-transparent.has-tooltip{ title: _('Remove priority'), type: 'button', data: { placement: 'top' }, aria_label: _('Deprioritize label') }
+          = sprite_icon('star')
+      %li.inline
+        = link_to edit_label_path(label), class: 'btn btn-transparent label-action', aria_label: 'Edit label' do
+          = sprite_icon('pencil')
+    %li.inline
+      .dropdown
+        %button{ type: 'button', class: 'btn btn-transparent js-label-options-dropdown label-action', data: { toggle: 'dropdown' }, aria_label: _('Label actions dropdown') }
+          = sprite_icon('ellipsis_v')
+        .dropdown-menu.dropdown-open-left
+          %ul
+            - if label.is_a?(ProjectLabel) && label.project.group && can?(current_user, :admin_label, label.project.group)
+              %li
+                %button.js-promote-project-label-button.btn.btn-transparent.btn-action{ disabled: true, type: 'button',
+                  data: { url: promote_project_label_path(label.project, label),
+                          label_title: label.title,
+                          label_color: label.color,
+                          label_text_color: label.text_color,
+                          group_name: label.project.group.name,
+                          target: '#promote-label-modal',
+                          container: 'body',
+                          toggle: 'modal' } }
+                  = _('Promote to group label')
+            %li
+              %span{ data: { toggle: 'modal', target: "#modal-delete-label-#{label.id}" } }
+                %button.text-danger.remove-row{ type: 'button' }= _('Delete')
     - if current_user
-      .label-subscription.inline
+      %li.inline.label-subscription
         - if can_subscribe_to_label_in_different_levels?(label)
-          %button.js-unsubscribe-button.label-subscribe-button.btn.btn-default{ type: 'button', class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path } }
-            %span Unsubscribe
-            = icon('spinner spin', class: 'label-subscribe-button-loading')
-
+          %button.js-unsubscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
+            %span= _('Unsubscribe')
           .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) }
-            %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
-              %span Subscribe
-              = icon('chevron-down')
-            %ul.dropdown-menu
-              %li
-                %a.js-subscribe-button{ class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_project_label_path(@project, label) } }
-                  Project level
-                %a.js-subscribe-button{ class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_group_label_path(label.group, label) } }
-                  Group level
+            %button.label-subscribe-button.btn.btn-default{ data: { toggle: 'dropdown' } }
+              %span
+                = _('Subscribe')
+                = sprite_icon('chevron-down')
+            .dropdown-menu.dropdown-open-left
+              %ul
+                %li
+                  %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_project_label_path(@project, label) } }
+                    %span= _('Subscribe at project level')
+                %li
+                  %button.js-subscribe-button.js-group-level.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } }
+                    %span= _('Subscribe at group level')
         - else
-          %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ type: 'button', data: { status: status, url: toggle_subscription_path } }
+          %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ data: { status: status, url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
             %span= label_subscription_toggle_button_text(label, @project)
-            = icon('spinner spin', class: 'label-subscribe-button-loading')
 
 = render 'shared/delete_label_modal', label: label
diff --git a/app/views/shared/_label_row.html.haml b/app/views/shared/_label_row.html.haml
index bd4f191502e..0ae3ab8f090 100644
--- a/app/views/shared/_label_row.html.haml
+++ b/app/views/shared/_label_row.html.haml
@@ -1,30 +1,23 @@
 - subject = local_assigns[:subject]
+- force_priority = local_assigns.fetch(:force_priority, false)
 - show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project)
 - show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project)
 
-%span.label-row
-  - if can?(current_user, :admin_label, @project)
-    .draggable-handler
-      = icon('bars')
-    .js-toggle-priority.toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
-      dom_id: dom_id(label), type: label.type } }
-      %button.add-priority.btn.has-tooltip{ title: 'Prioritize', type: 'button', :'data-placement' => 'top' }
-        = icon('star-o')
-      %button.remove-priority.btn.has-tooltip{ title: 'Remove priority', type: 'button', :'data-placement' => 'top' }
-        = icon('star')
-  %span.label-name
-    = link_to_label(label, subject: @project, tooltip: false)
-  - if defined?(@project) && @project.group.present?
-    %span.label-type
-      = label.model_name.human.titleize
-
-  %span.label-description
+.label-name
+  = link_to_label(label, subject: @project, tooltip: false)
+.label-description
+  .append-right-default.prepend-left-default
     - if label.description.present?
-      .description-text
+      .description-text.append-bottom-10
         = markdown_field(label, :description)
-    .hidden-xs.hidden-sm
+    %ul.label-links
       - if show_label_issues_link
-        = link_to_label(label, subject: subject) { 'Issues' }
+        %li.label-link-item.inline
+          = link_to_label(label, subject: subject) { 'Issues' }
       - if show_label_merge_requests_link
         &middot;
-        = link_to_label(label, subject: subject, type: :merge_request) { 'Merge requests' }
+        %li.label-link-item.inline
+          = link_to_label(label, subject: subject, type: :merge_request) { _('Merge requests') }
+      - if force_priority
+        %li.label-link-item.js-priority-badge.inline.prepend-left-10
+          .label-badge.label-badge-blue= _('Prioritized label')
diff --git a/app/views/shared/_merge_requests.html.haml b/app/views/shared/_merge_requests.html.haml
index 0517896cfbd..700ec4b606f 100644
--- a/app/views/shared/_merge_requests.html.haml
+++ b/app/views/shared/_merge_requests.html.haml
@@ -1,5 +1,5 @@
 - if @merge_requests.to_a.any?
-  .panel.panel-default.panel-small.panel-without-border
+  .card.card-small.card-without-border
     %ul.content-list.mr-list.issuable-list
       = render partial: 'projects/merge_requests/merge_request', collection: @merge_requests
 
diff --git a/app/views/shared/_milestones_filter.html.haml b/app/views/shared/_milestones_filter.html.haml
index 034b76b978f..6c1ac20d544 100644
--- a/app/views/shared/_milestones_filter.html.haml
+++ b/app/views/shared/_milestones_filter.html.haml
@@ -1,13 +1,13 @@
-%ul.nav-links.mobile-separator
+%ul.nav-links.mobile-separator.nav.nav-tabs
   %li{ class: milestone_class_for_state(params[:state], 'opened', true) }>
     = link_to milestones_filter_path(state: 'opened') do
       Open
-      %span.badge= counts[:opened]
+      %span.badge.badge-pill= counts[:opened]
   %li{ class: milestone_class_for_state(params[:state], 'closed') }>
     = link_to milestones_filter_path(state: 'closed', sort: 'due_date_desc') do
       Closed
-      %span.badge= counts[:closed]
+      %span.badge.badge-pill= counts[:closed]
   %li{ class: milestone_class_for_state(params[:state], 'all') }>
     = link_to milestones_filter_path(state: 'all', sort: 'due_date_desc') do
       All
-      %span.badge= counts[:all]
+      %span.badge.badge-pill= counts[:all]
diff --git a/app/views/shared/_milestones_sort_dropdown.html.haml b/app/views/shared/_milestones_sort_dropdown.html.haml
index 9b2f2fdcc93..a6ba3b59365 100644
--- a/app/views/shared/_milestones_sort_dropdown.html.haml
+++ b/app/views/shared/_milestones_sort_dropdown.html.haml
@@ -6,7 +6,7 @@
     - else
       = sort_title_due_date_soon
     = icon('chevron-down')
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-sort
     %li
       = link_to page_filter_path(sort: sort_value_due_date_soon, label: true) do
         = sort_title_due_date_soon
diff --git a/app/views/shared/_mini_pipeline_graph.html.haml b/app/views/shared/_mini_pipeline_graph.html.haml
index 901a177323b..ac2164a4a71 100644
--- a/app/views/shared/_mini_pipeline_graph.html.haml
+++ b/app/views/shared/_mini_pipeline_graph.html.haml
@@ -6,12 +6,13 @@
       - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}"
 
       .stage-container.dropdown{ class: klass }
-        %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } }
+        %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_ajax_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } }
           = sprite_icon(icon_status)
           = icon('caret-down')
 
         %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
           %li.js-builds-dropdown-list.scrollable-menu
+            %ul
 
           %li.js-builds-dropdown-loading.hidden
             .text-center
diff --git a/app/views/shared/_new_commit_form.html.haml b/app/views/shared/_new_commit_form.html.haml
index 9221fd1e025..81c33eeea4f 100644
--- a/app/views/shared/_new_commit_form.html.haml
+++ b/app/views/shared/_new_commit_form.html.haml
@@ -7,8 +7,8 @@
   = hidden_field_tag 'branch_name', @ref
 - else
   - if can?(current_user, :push_code, @project)
-    .form-group.branch
-      = label_tag 'branch_name', _('Target Branch'), class: 'control-label'
+    .form-group.row.branch
+      = label_tag 'branch_name', _('Target Branch'), class: 'col-form-label col-sm-2'
       .col-sm-10
         = text_field_tag 'branch_name', branch_name, required: true, class: "form-control js-branch-name ref-name"
 
diff --git a/app/views/shared/_new_merge_request_checkbox.html.haml b/app/views/shared/_new_merge_request_checkbox.html.haml
index 133c31f09c4..24c0dfe247f 100644
--- a/app/views/shared/_new_merge_request_checkbox.html.haml
+++ b/app/views/shared/_new_merge_request_checkbox.html.haml
@@ -1,7 +1,7 @@
-.checkbox
+.form-check.prepend-top-8
   - nonce = SecureRandom.hex
-  = label_tag "create_merge_request-#{nonce}" do
-    = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request', id: "create_merge_request-#{nonce}"
+  = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request form-check-input', id: "create_merge_request-#{nonce}"
+  = label_tag "create_merge_request-#{nonce}", class: 'form-check-label' do
     - translation_variables = { new_merge_request: "<strong>#{_('new merge request')}</strong>" }
     - translation = _('Start a %{new_merge_request} with these changes') % translation_variables
     #{ translation.html_safe }
diff --git a/app/views/shared/_personal_access_tokens_table.html.haml b/app/views/shared/_personal_access_tokens_table.html.haml
index c5e4d6e2871..cadac1cc99d 100644
--- a/app/views/shared/_personal_access_tokens_table.html.haml
+++ b/app/views/shared/_personal_access_tokens_table.html.haml
@@ -35,7 +35,7 @@
                 = text_field_tag 'impersonation-token-token', token.token, readonly: true, class: "form-control"
                 = clipboard_button(text: token.token)
             - path = impersonation ? revoke_admin_user_impersonation_token_path(token.user, token) : revoke_profile_personal_access_token_path(token)
-            %td= link_to "Revoke", path, method: :put, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to revoke this #{type} Token? This action cannot be undone." }
+            %td= link_to "Revoke", path, method: :put, class: "btn btn-danger float-right", data: { confirm: "Are you sure you want to revoke this #{type} Token? This action cannot be undone." }
 - else
   .settings-message.text-center
     This user has no active #{type} Tokens.
diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml
index f4eb8e491b9..2c52eccccb6 100644
--- a/app/views/shared/_project_limit.html.haml
+++ b/app/views/shared/_project_limit.html.haml
@@ -1,8 +1,8 @@
 - if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0
-  .project-limit-message.alert.alert-warning.hidden-xs
+  .project-limit-message.alert.alert-warning.d-none.d-sm-block
     You won't be able to create new projects because you have reached your project limit.
 
-    .pull-right
+    .float-right
       = link_to "Don't show again", profile_path(user: {hide_project_limit: true}), method: :put, class: 'alert-link'
       |
       = link_to 'Remind later', '#', class: 'hide-project-limit-message alert-link'
diff --git a/app/views/shared/_recaptcha_form.html.haml b/app/views/shared/_recaptcha_form.html.haml
index 93a4301f366..a0ba1afc284 100644
--- a/app/views/shared/_recaptcha_form.html.haml
+++ b/app/views/shared/_recaptcha_form.html.haml
@@ -10,7 +10,7 @@
       = hidden_field(resource_name, field, value: value)
     = hidden_field_tag(:spam_log_id, spammable.spam_log.id)
     = hidden_field_tag(:recaptcha_verification, true)
-    = recaptcha_tags script: script, callback: 'recaptchaDialogCallback'
+    = recaptcha_tags script: script, callback: 'recaptchaDialogCallback' unless Rails.env.test?
 
     -# Yields a block with given extra params.
     = yield
diff --git a/app/views/shared/_ref_switcher.html.haml b/app/views/shared/_ref_switcher.html.haml
index 4c8c92d722a..4e7061eef1c 100644
--- a/app/views/shared/_ref_switcher.html.haml
+++ b/app/views/shared/_ref_switcher.html.haml
@@ -8,8 +8,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_project_path(@project, sort: 'updated_desc'), field_name: 'ref', submit_form_on_click: true, visit: true }, { toggle_class: "js-project-refs-dropdown" }
-    .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown.dropdown-menu-paging{ 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_project_path(@project, sort: 'updated_desc'), field_name: 'ref', submit_form_on_click: true, visit: true }, { toggle_class: "js-project-refs-dropdown qa-branches-select" }
+    .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown.dropdown-menu-paging.qa-branches-dropdown{ class: ("dropdown-menu-right" if local_assigns[:align_right]) }
       .dropdown-page-one
         = dropdown_title _("Switch branch/tag")
         = dropdown_filter _("Search branches and tags")
diff --git a/app/views/shared/_remote_mirror_update_button.html.haml b/app/views/shared/_remote_mirror_update_button.html.haml
new file mode 100644
index 00000000000..34de1c0695f
--- /dev/null
+++ b/app/views/shared/_remote_mirror_update_button.html.haml
@@ -0,0 +1,13 @@
+- if @project.has_remote_mirror?
+  .append-bottom-default
+    - if remote_mirror.update_in_progress?
+      %span.btn.disabled
+        = icon("refresh spin")
+        Updating&hellip;
+    - else
+      = link_to update_now_project_mirror_path(@project, sync_remote: true), method: :post, class: "btn" do
+        = icon("refresh")
+        Update Now
+    - if @remote_mirror.last_successful_update_at
+      %p.inline.prepend-left-10
+        Successfully updated #{time_ago_with_tooltip(@remote_mirror.last_successful_update_at)}.
diff --git a/app/views/shared/_service_settings.html.haml b/app/views/shared/_service_settings.html.haml
index a41aaed66a3..6fa61c15493 100644
--- a/app/views/shared/_service_settings.html.haml
+++ b/app/views/shared/_service_settings.html.haml
@@ -3,37 +3,37 @@
 - if lookup_context.template_exists?('help', "projects/services/#{@service.to_param}", true)
   = render "projects/services/#{@service.to_param}/help", subject: subject
 - elsif @service.help.present?
-  .well
-    = markdown @service.help
+  .info-well
+    .well-segment
+      = markdown @service.help
 
 .service-settings
   - if @service.show_active_box?
-    .form-group
-      = form.label :active, "Active", class: "control-label"
+    .form-group.row
+      = form.label :active, "Active", class: "col-form-label col-sm-2"
       .col-sm-10
         = form.check_box :active, disabled: disable_fields_service?(@service)
 
   - if @service.configurable_events.present?
-    .form-group
-      = form.label :url, "Trigger", class: 'control-label'
+    .form-group.row
+      .col-sm-2.text-right Trigger
 
       .col-sm-10
         - @service.configurable_events.each do |event|
-          %div
-            = form.check_box service_event_field_name(event), class: 'pull-left'
-            .prepend-left-20
-              = form.label service_event_field_name(event), class: 'list-label' do
+          .form-group
+            .form-check
+              = form.check_box service_event_field_name(event), class: 'form-check-input'
+              = form.label service_event_field_name(event), class: 'form-check-label' do
                 %strong
                   = event.humanize
 
-          - field = @service.event_field(event)
+            - field = @service.event_field(event)
 
-          - if field
-            %p
+            - if field
               = form.text_field field[:name], class: "form-control", placeholder: field[:placeholder]
 
-          %p.light
-            = @service.class.event_description(event)
+            %p.text-muted
+              = @service.class.event_description(event)
 
   - @service.global_fields.each do |field|
     - type = field[:type]
diff --git a/app/views/shared/_sort_dropdown.html.haml b/app/views/shared/_sort_dropdown.html.haml
index 7ff5e679f17..be6d4f1c32b 100644
--- a/app/views/shared/_sort_dropdown.html.haml
+++ b/app/views/shared/_sort_dropdown.html.haml
@@ -2,10 +2,10 @@
 - viewing_issues = controller.controller_name == 'issues' || controller.action_name == 'issues'
 
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
     = sorted_by
     = icon('chevron-down')
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable.dropdown-menu-sort
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
     %li
       = sortable_item(sort_title_priority,         page_filter_path(sort: sort_value_priority,         label: true), sorted_by)
       = sortable_item(sort_title_created_date,     page_filter_path(sort: sort_value_created_date,     label: true), sorted_by)
diff --git a/app/views/shared/_visibility_level.html.haml b/app/views/shared/_visibility_level.html.haml
index 192d2502aaf..01ce1225b8d 100644
--- a/app/views/shared/_visibility_level.html.haml
+++ b/app/views/shared/_visibility_level.html.haml
@@ -1,11 +1,11 @@
 - with_label = local_assigns.fetch(:with_label, true)
 
-.form-group.visibility-level-setting
+.form-group.row.visibility-level-setting
   - if with_label
-    = f.label :visibility_level, class: 'control-label' do
+    = f.label :visibility_level, class: 'col-form-label col-sm-2' do
       Visibility Level
       = link_to icon('question-circle'), help_page_path("public_access/public_access")
-  %div{ :class => ("col-sm-10" if with_label) }
+  %div{ :class => (with_label ? "col-sm-10" : "col-sm-12") }
     - if can_change_visibility_level
       = render('shared/visibility_radios', model_method: :visibility_level, form: f, selected_level: visibility_level, form_model: form_model)
     - else
diff --git a/app/views/shared/_visibility_radios.html.haml b/app/views/shared/_visibility_radios.html.haml
index 0ec7677a566..dd6b9cce58e 100644
--- a/app/views/shared/_visibility_radios.html.haml
+++ b/app/views/shared/_visibility_radios.html.haml
@@ -2,9 +2,9 @@
   - disallowed = disallowed_visibility_level?(form_model, level)
   - restricted = restricted_visibility_levels.include?(level)
   - disabled = disallowed || restricted
-  .radio{ class: [('disabled' if disabled), ('restricted' if restricted)] }
-    = form.label "#{model_method}_#{level}" do
-      = form.radio_button model_method, level, checked: (selected_level == level), disabled: disabled
+  .form-check{ class: [('disabled' if disabled), ('restricted' if restricted)] }
+    = form.radio_button model_method, level, checked: (selected_level == level), disabled: disabled, class: 'form-check-input'
+    = form.label "#{model_method}_#{level}", class: 'form-check-label' do
       = visibility_level_icon(level)
       .option-title
         = visibility_level_label(level)
diff --git a/app/views/shared/badges/_badge_settings.html.haml b/app/views/shared/badges/_badge_settings.html.haml
new file mode 100644
index 00000000000..b7c250d3b1c
--- /dev/null
+++ b/app/views/shared/badges/_badge_settings.html.haml
@@ -0,0 +1,4 @@
+#badge-settings{ data: { api_endpoint_url: @badge_api_endpoint,
+  docs_url: help_page_path('user/project/badges')} }
+  .text-center.prepend-top-default
+    = icon('spinner spin 2x')
diff --git a/app/views/shared/boards/_show.html.haml b/app/views/shared/boards/_show.html.haml
index dac60094686..a88d8f61fb4 100644
--- a/app/views/shared/boards/_show.html.haml
+++ b/app/views/shared/boards/_show.html.haml
@@ -3,8 +3,8 @@
 - @no_breadcrumb_container = true
 - @no_container = true
 - @content_class = "issue-boards-content"
-- breadcrumb_title "Issue Board"
-- page_title "Boards"
+- breadcrumb_title _("Issue Board")
+- page_title _("Boards")
 
 - content_for :page_specific_javascripts do
 
@@ -13,7 +13,7 @@
   %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal
 
 #board-app.boards-app{ "v-cloak" => true, data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
-  .hidden-xs.hidden-sm
+  .d-none.d-sm-none.d-md-block
     = render 'shared/issuable/search_bar', type: :boards
 
   .boards-list
diff --git a/app/views/shared/boards/components/_board.html.haml b/app/views/shared/boards/components/_board.html.haml
index 149bf8da4b9..65de6172d89 100644
--- a/app/views/shared/boards/components/_board.html.haml
+++ b/app/views/shared/boards/components/_board.html.haml
@@ -1,4 +1,4 @@
-.board{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded }',
+.board{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }',
   ":data-id" => "list.id" }
   .board-inner
     %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", "@click" => "toggleExpanded($event)" }
@@ -7,31 +7,40 @@
           ":class": "{ \"fa-caret-down\": list.isExpanded, \"fa-caret-right\": !list.isExpanded }",
           "aria-hidden": "true" }
 
+        %a.user-avatar-link.js-no-trigger{ "v-if": "list.type === \"assignee\"", ":href": "list.assignee.path" }
+          -# haml-lint:disable AltText
+          %img.avatar.s20.has-tooltip{ height: "20", width: "20", ":src": "list.assignee.avatar", ":alt": "list.assignee.name" }
+
         %span.board-title-text.has-tooltip{ "v-if": "list.type !== \"label\"",
-          ":title" => '(list.label ? list.label.description : "")', data: { container: "body" } }
+          ":title" => '((list.label && list.label.description) || list.title || "")', data: { container: "body" } }
           {{ list.title }}
 
+        %span.board-title-sub-text.prepend-left-5.has-tooltip{ "v-if": "list.type === \"assignee\"",
+          ":title" => '(list.assignee && list.assignee.username || "")' }
+          @{{ list.assignee.username }}
+
         %span.has-tooltip{ "v-if": "list.type === \"label\"",
           ":title" => '(list.label ? list.label.description : "")',
           data: { container: "body", placement: "bottom" },
-          class: "label color-label title board-title-text",
-          ":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.color ? list.label.text_color : \"#2e2e2e\") }" }
+          class: "badge color-label title board-title-text",
+          ":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.textColor ? list.label.textColor : \"#2e2e2e\") }" }
           {{ list.title }}
+
         - if can?(current_user, :admin_list, current_board_parent)
           %board-delete{ "inline-template" => true,
             ":list" => "list",
             "v-if" => "!list.preset && list.id" }
-            %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
+            %button.board-delete.has-tooltip.float-right{ type: "button", title: _("Delete list"), "aria-label" => _("Delete list"), data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
               = icon("trash")
         .issue-count-badge.clearfix{ "v-if" => 'list.type !== "blank"' }
-          %span.issue-count-badge-count.pull-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' }
+          %span.issue-count-badge-count.float-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' }
             {{ list.issuesSize }}
           - if can?(current_user, :admin_list, current_board_parent)
             %button.issue-count-badge-add-button.btn.btn-sm.btn-default.has-tooltip.js-no-trigger-collapse{ type: "button",
               "@click" => "showNewIssueForm",
               "v-if" => 'list.type !== "closed"',
-              "aria-label" => "New issue",
-              "title" => "New issue",
+              "aria-label" => _("New issue"),
+              "title" => _("New issue"),
               data: { placement: "top", container: "body" } }
               = icon("plus", class: "js-no-trigger-collapse")
 
diff --git a/app/views/shared/boards/components/_sidebar.html.haml b/app/views/shared/boards/components/_sidebar.html.haml
index 8e5e32e9f16..774dafe5f2c 100644
--- a/app/views/shared/boards/components/_sidebar.html.haml
+++ b/app/views/shared/boards/components/_sidebar.html.haml
@@ -3,14 +3,14 @@
     %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
       .issuable-sidebar
         .block.issuable-sidebar-header
-          %span.issuable-header-text.hide-collapsed.pull-left
+          %span.issuable-header-text.hide-collapsed.float-left
             %strong
               {{ issue.title }}
             %br/
             %span
               = precede "#" do
                 {{ issue.iid }}
-          %a.gutter-toggle.pull-right{ role: "button",
+          %a.gutter-toggle.float-right{ role: "button",
             href: "#",
             "@click.prevent" => "closeSidebar",
             "aria-label" => "Toggle sidebar" }
@@ -22,6 +22,6 @@
           = render "shared/boards/components/sidebar/labels"
           = render "shared/boards/components/sidebar/notifications"
           %remove-btn{ ":issue" => "issue",
-            ":issue-update" => "'#{build_issue_link_base}/' + issue.iid + '.json'",
+            ":issue-update" => "issue.sidebarInfoEndpoint",
             ":list" => "list",
             "v-if" => "canRemove" }
diff --git a/app/views/shared/boards/components/sidebar/_assignee.html.haml b/app/views/shared/boards/components/sidebar/_assignee.html.haml
index 3d2e8471a60..1374da9d82c 100644
--- a/app/views/shared/boards/components/sidebar/_assignee.html.haml
+++ b/app/views/shared/boards/components/sidebar/_assignee.html.haml
@@ -21,8 +21,7 @@
       .dropdown
         - dropdown_options = issue_assignees_dropdown_options
         %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: board_sidebar_user_data,
-          ":data-issuable-id" => "issue.iid",
-          ":data-issue-update" => "'#{build_issue_link_base}/' + issue.iid + '.json'" }
+          ":data-issuable-id" => "issue.iid" }
           = dropdown_options[:title]
           = icon("chevron-down")
         .dropdown-menu.dropdown-select.dropdown-menu-user.dropdown-menu-selectable.dropdown-menu-author
diff --git a/app/views/shared/boards/components/sidebar/_due_date.html.haml b/app/views/shared/boards/components/sidebar/_due_date.html.haml
index db794d6f855..5630375f428 100644
--- a/app/views/shared/boards/components/sidebar/_due_date.html.haml
+++ b/app/views/shared/boards/components/sidebar/_due_date.html.haml
@@ -1,20 +1,20 @@
 .block.due_date
   .title
-    Due date
+    = _("Due date")
     - if can_admin_issue?
       = icon("spinner spin", class: "block-loading")
-      = link_to "Edit", "#", class: "js-sidebar-dropdown-toggle edit-link pull-right"
+      = link_to _("Edit"), "#", class: "js-sidebar-dropdown-toggle edit-link float-right"
   .value
     .value-content
       %span.no-value{ "v-if" => "!issue.dueDate" }
-        No due date
+        = _("No due date")
       %span.bold{ "v-if" => "issue.dueDate" }
         {{ issue.dueDate | due-date }}
       - if can_admin_issue?
         %span.no-value.js-remove-due-date-holder{ "v-if" => "issue.dueDate" }
           \-
           %a.js-remove-due-date{ href: "#", role: "button" }
-            remove due date
+            = _('remove due date')
   - if can_admin_issue?
     .selectbox
       %input{ type: "hidden",
@@ -22,11 +22,10 @@
         ":value" => "issue.dueDate" }
       .dropdown
         %button.dropdown-menu-toggle.js-due-date-select.js-issue-boards-due-date{ type: 'button',
-          data: { toggle: 'dropdown', field_name: "issue[due_date]", ability_name: "issue" },
-          ":data-issue-update" => "'#{build_issue_link_base}/' + issue.iid + '.json'" }
-          %span.dropdown-toggle-text Due date
+          data: { toggle: 'dropdown', field_name: "issue[due_date]", ability_name: "issue" } }
+          %span.dropdown-toggle-text= _("Due date")
           = icon('chevron-down')
         .dropdown-menu.dropdown-menu-due-date
-          = dropdown_title('Due date')
+          = dropdown_title(_('Due date'))
           = dropdown_content do
             .js-due-date-calendar
diff --git a/app/views/shared/boards/components/sidebar/_labels.html.haml b/app/views/shared/boards/components/sidebar/_labels.html.haml
index dfc0f9be321..607e7f471c9 100644
--- a/app/views/shared/boards/components/sidebar/_labels.html.haml
+++ b/app/views/shared/boards/components/sidebar/_labels.html.haml
@@ -1,15 +1,15 @@
 .block.labels
   .title
-    Labels
+    = _("Labels")
     - if can_admin_issue?
       = icon("spinner spin", class: "block-loading")
-      = link_to "Edit", "#", class: "js-sidebar-dropdown-toggle edit-link pull-right"
-  .value.issuable-show-labels
+      = link_to _("Edit"), "#", class: "js-sidebar-dropdown-toggle edit-link float-right"
+  .value.issuable-show-labels.dont-hide
     %span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" }
-      None
+      = _("None")
     %a{ href: "#",
       "v-for" => "label in issue.labels" }
-      %span.label.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
+      .badge.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
         {{ label.title }}
   - if can_admin_issue?
     .selectbox
@@ -26,10 +26,9 @@
             project_id: @project&.try(:id),
             labels: labels_filter_path(false),
             namespace_path: @namespace_path,
-            project_path: @project.try(:path) },
-          ":data-issue-update" => "'#{build_issue_link_base}/' + issue.iid + '.json'" }
+            project_path: @project.try(:path) } }
           %span.dropdown-toggle-text
-            Label
+            = _("Label")
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
           = render partial: "shared/issuable/label_page_default"
diff --git a/app/views/shared/boards/components/sidebar/_milestone.html.haml b/app/views/shared/boards/components/sidebar/_milestone.html.haml
index d09c7c218e0..b15d60002fc 100644
--- a/app/views/shared/boards/components/sidebar/_milestone.html.haml
+++ b/app/views/shared/boards/components/sidebar/_milestone.html.haml
@@ -1,12 +1,12 @@
 .block.milestone
   .title
-    Milestone
+    = _("Milestone")
     - if can_admin_issue?
       = icon("spinner spin", class: "block-loading")
-      = link_to "Edit", "#", class: "js-sidebar-dropdown-toggle edit-link pull-right"
+      = link_to _("Edit"), "#", class: "js-sidebar-dropdown-toggle edit-link float-right"
   .value
     %span.no-value{ "v-if" => "!issue.milestone" }
-      None
+      = _("None")
     %span.bold.has-tooltip{ "v-if" => "issue.milestone" }
       {{ issue.milestone.title }}
   - if can_admin_issue?
@@ -18,12 +18,11 @@
       .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]", milestones: milestones_filter_path(format: :json), ability_name: "issue", use_id: "true", default_no: "true" },
           ":data-selected" => "milestoneTitle",
-          ":data-issuable-id" => "issue.iid",
-          ":data-issue-update" => "'#{build_issue_link_base}/' + issue.iid + '.json'" }
-          Milestone
+          ":data-issuable-id" => "issue.iid" }
+          = _("Milestone")
           = icon("chevron-down")
         .dropdown-menu.dropdown-select.dropdown-menu-selectable
-          = dropdown_title("Assign milestone")
-          = dropdown_filter("Search milestones")
+          = dropdown_title(_("Assign milestone"))
+          = dropdown_filter(_("Search milestones"))
           = dropdown_content
           = dropdown_loading
diff --git a/app/views/shared/builds/_build_output.html.haml b/app/views/shared/builds/_build_output.html.haml
new file mode 100644
index 00000000000..0e18128a8f1
--- /dev/null
+++ b/app/views/shared/builds/_build_output.html.haml
@@ -0,0 +1,3 @@
+%pre.build-trace#build-trace
+  %code.bash.js-build-output
+  .build-loader-animation.js-build-refresh
diff --git a/app/views/shared/builds/_tabs.html.haml b/app/views/shared/builds/_tabs.html.haml
index 0b003125912..5c74e71b644 100644
--- a/app/views/shared/builds/_tabs.html.haml
+++ b/app/views/shared/builds/_tabs.html.haml
@@ -1,24 +1,24 @@
-%ul.nav-links.mobile-separator
+%ul.nav-links.mobile-separator.nav.nav-tabs
   %li{ class: active_when(scope.nil?) }>
     = link_to build_path_proc.call(nil) do
       All
-      %span.badge.js-totalbuilds-count
+      %span.badge.badge-pill.js-totalbuilds-count
         = limited_counter_with_delimiter(all_builds)
 
   %li{ class: active_when(scope == 'pending') }>
     = link_to build_path_proc.call('pending') do
       Pending
-      %span.badge
+      %span.badge.badge-pill
         = limited_counter_with_delimiter(all_builds.pending)
 
   %li{ class: active_when(scope == 'running') }>
     = link_to build_path_proc.call('running') do
       Running
-      %span.badge
+      %span.badge.badge-pill
         = limited_counter_with_delimiter(all_builds.running)
 
   %li{ class: active_when(scope == 'finished') }>
     = link_to build_path_proc.call('finished') do
       Finished
-      %span.badge
+      %span.badge.badge-pill
         = limited_counter_with_delimiter(all_builds.finished)
diff --git a/app/views/shared/dashboard/_no_filter_selected.html.haml b/app/views/shared/dashboard/_no_filter_selected.html.haml
new file mode 100644
index 00000000000..32246dac4c7
--- /dev/null
+++ b/app/views/shared/dashboard/_no_filter_selected.html.haml
@@ -0,0 +1,8 @@
+.row.empty-state.text-center
+  .col-12
+    .svg-130.prepend-top-default
+      = image_tag 'illustrations/issue-dashboard_results-without-filter.svg'
+  .col-12
+    .text-content
+      %h4
+        = _("Please select at least one filter to see results")
diff --git a/app/views/shared/deploy_keys/_form.html.haml b/app/views/shared/deploy_keys/_form.html.haml
index 87c2965bb21..913c065e188 100644
--- a/app/views/shared/deploy_keys/_form.html.haml
+++ b/app/views/shared/deploy_keys/_form.html.haml
@@ -5,26 +5,26 @@
 = form_errors(deploy_key)
 
 .form-group
-  = form.label :title, class: 'control-label'
+  = form.label :title, class: 'col-form-label col-sm-2'
   .col-sm-10= form.text_field :title, class: 'form-control'
 
 .form-group
   - if deploy_key.new_record?
-    = form.label :key, class: 'control-label'
+    = form.label :key, class: 'col-form-label col-sm-2'
     .col-sm-10
       %p.light
         Paste a machine public key here. Read more about how to generate it
         = link_to 'here', help_page_path('ssh/README')
       = form.text_area :key, class: 'form-control thin_area', rows: 5
   - else
-    = form.label :fingerprint, class: 'control-label'
+    = form.label :fingerprint, class: 'col-form-label col-sm-2'
     .col-sm-10
       = form.text_field :fingerprint, class: 'form-control', readonly: 'readonly'
 
 - if deploy_keys_project.present?
   = form.fields_for :deploy_keys_projects, deploy_keys_project do |deploy_keys_project_form|
     .form-group
-      .control-label
+      .col-form-label.col-sm-2
       .col-sm-10
         = deploy_keys_project_form.label :can_push do
           = deploy_keys_project_form.check_box :can_push
diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml
index 62437f5fc9d..c7c33288e9d 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
-  .col-xs-12
+  .col-12
     .svg-content
       = image_tag 'illustrations/issues.svg'
-  .col-xs-12
+  .col-12
     .text-content
       - if current_user
         %h4
diff --git a/app/views/shared/empty_states/_labels.html.haml b/app/views/shared/empty_states/_labels.html.haml
index 04db9de3606..e8749ee3956 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
-  .col-xs-12
+  .col-12
     .svg-content
       = image_tag 'illustrations/labels.svg'
-  .col-xs-12
+  .col-12
     .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 2edf3557df4..014220761a9 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
+  .col-12
     .svg-content
       = image_tag 'illustrations/merge_requests.svg'
-  .col-xs-12
+  .col-12
     .text-content
       - if has_button
         %h4
diff --git a/app/views/shared/empty_states/_wikis.html.haml b/app/views/shared/empty_states/_wikis.html.haml
new file mode 100644
index 00000000000..f1a41074c28
--- /dev/null
+++ b/app/views/shared/empty_states/_wikis.html.haml
@@ -0,0 +1,30 @@
+- layout_path = 'shared/empty_states/wikis_layout'
+
+- if can?(current_user, :create_wiki, @project)
+  - create_path = project_wiki_path(@project, params[:id], { view: 'create' })
+  - create_link = link_to s_('WikiEmpty|Create your first page'), create_path, class: 'btn btn-new', title: s_('WikiEmpty|Create your first page')
+
+  = render layout: layout_path, locals: { image_path: 'illustrations/wiki_login_empty.svg' } do
+    %h4
+      = s_('WikiEmpty|The wiki lets you write documentation for your project')
+    %p.text-left
+      = s_("WikiEmpty|A wiki is where you can store all the details about your project. This can include why you've created it, its principles, how to use it, and so on.")
+    = create_link
+
+- elsif can?(current_user, :read_issue, @project)
+  - issues_link = link_to s_('WikiEmptyIssueMessage|issue tracker'), project_issues_path(@project)
+  - new_issue_link = link_to s_('WikiEmpty|Suggest wiki improvement'), new_project_issue_path(@project), class: 'btn btn-new', title: s_('WikiEmptyIssueMessage|Suggest wiki improvement')
+
+  = render layout: layout_path, locals: { image_path: 'illustrations/wiki_logout_empty.svg' } do
+    %h4
+      = s_('WikiEmpty|This project has no wiki pages')
+    %p.text-left
+      = s_('WikiEmptyIssueMessage|You must be a project member in order to add wiki pages. If you have suggestions for how to improve the wiki for this project, consider opening an issue in the %{issues_link}.').html_safe % { issues_link: issues_link }
+    = new_issue_link
+
+- else
+  = render layout: layout_path, locals: { image_path: 'illustrations/wiki_logout_empty.svg' } do
+    %h4
+      = s_('WikiEmpty|This project has no wiki pages')
+    %p
+      = s_('WikiEmpty|You must be a project member in order to add wiki pages.')
diff --git a/app/views/shared/empty_states/_wikis_layout.html.haml b/app/views/shared/empty_states/_wikis_layout.html.haml
new file mode 100644
index 00000000000..a5f100e3469
--- /dev/null
+++ b/app/views/shared/empty_states/_wikis_layout.html.haml
@@ -0,0 +1,7 @@
+.row.empty-state
+  .col-12
+    .svg-content
+      = image_tag image_path
+  .col-12
+    .text-content.text-center
+      = yield
diff --git a/app/views/shared/form_elements/_description.html.haml b/app/views/shared/form_elements/_description.html.haml
index 38e9899ca4b..25df2fe5cd6 100644
--- a/app/views/shared/form_elements/_description.html.haml
+++ b/app/views/shared/form_elements/_description.html.haml
@@ -9,14 +9,14 @@
 - else
   - preview_url = preview_markdown_path(project)
 
-.form-group.detail-page-description
-  = form.label :description, 'Description', class: 'control-label'
+.form-group.row.detail-page-description
+  = form.label :description, 'Description', class: 'col-form-label col-sm-2'
   .col-sm-10
 
     = render layout: 'projects/md_preview', locals: { url: preview_url, referenced_users: true } do
       = render 'projects/zen', f: form, attr: :description,
                                classes: 'note-textarea qa-issuable-form-description',
-                               placeholder: "Write a comment or drag your files here...",
+                               placeholder: "Write a comment or drag your files here…",
                                supports_quick_actions: supports_quick_actions
       = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
       .clearfix
diff --git a/app/views/shared/groups/_dropdown.html.haml b/app/views/shared/groups/_dropdown.html.haml
index 8607be9cd06..2237b93a10b 100644
--- a/app/views/shared/groups/_dropdown.html.haml
+++ b/app/views/shared/groups/_dropdown.html.haml
@@ -13,7 +13,7 @@
     %span.dropdown-label
       = options_hash[default_sort_by]
     = icon('chevron-down')
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
     %li.dropdown-header
       = _("Sort by")
     - options_hash.each do |value, title|
diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml
index 90395600d4e..a1b901aaffa 100644
--- a/app/views/shared/groups/_group.html.haml
+++ b/app/views/shared/groups/_group.html.haml
@@ -16,7 +16,7 @@
 
   .avatar-container.s40
     = link_to group do
-      = group_icon(group, class: "avatar s40 hidden-xs")
+      = group_icon(group, class: "avatar s40 d-none d-sm-block")
   .title
     = link_to group.full_name, group, class: 'group-name'
 
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
index c80b179d525..532712ee6d1 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -6,8 +6,8 @@
 
 %p
   %strong Trigger:
-  %td.hidden-xs
-    %span.label.label-gray.deploy-project-label
+  %td.d-none.d-sm-block
+    %span.badge.badge-gray.deploy-project-label
       = hook_log.trigger.singularize.titleize
 %p
   %strong Elapsed time:
diff --git a/app/views/shared/hook_logs/_status_label.html.haml b/app/views/shared/hook_logs/_status_label.html.haml
index b4ea8e6f952..993880b7d6e 100644
--- a/app/views/shared/hook_logs/_status_label.html.haml
+++ b/app/views/shared/hook_logs/_status_label.html.haml
@@ -1,3 +1,3 @@
-- label_status = hook_log.success? ? 'label-success' : 'label-danger'
+- label_status = hook_log.success? ? 'badge-success' : 'badge-danger'
 %span{ class: "label #{label_status}" }
   = hook_log.response_status
diff --git a/app/views/shared/icons/_icon_calendar.svg b/app/views/shared/icons/_icon_calendar.svg
new file mode 100644
index 00000000000..4d0a703f9a0
--- /dev/null
+++ b/app/views/shared/icons/_icon_calendar.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M15 5v7a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2h1V2a1 1 0 1 1 2 0v1h4V2a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2zM3 6v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6H3zm2 2h2a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/app/views/shared/issuable/_board_create_list_dropdown.html.haml b/app/views/shared/issuable/_board_create_list_dropdown.html.haml
new file mode 100644
index 00000000000..23b2e1b91e5
--- /dev/null
+++ b/app/views/shared/issuable/_board_create_list_dropdown.html.haml
@@ -0,0 +1,8 @@
+.dropdown.prepend-left-10#js-add-list
+  %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: board_list_data }
+    Add list
+  .dropdown-menu.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable.js-tab-container-labels
+    = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
+    - if can?(current_user, :admin_label, board.parent)
+      = render partial: "shared/issuable/label_page_create"
+    = dropdown_loading
diff --git a/app/views/shared/issuable/_bulk_update_sidebar.html.haml b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
index 0d507cc7a6e..ca02424215c 100644
--- a/app/views/shared/issuable/_bulk_update_sidebar.html.haml
+++ b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
@@ -4,9 +4,9 @@
   .issuable-sidebar.hidden
     = form_tag [:bulk_update, @project.namespace.becomes(Namespace), @project, type], method: :post, class: "bulk-update"  do
       .block.issuable-sidebar-header
-        .filter-item.inline.update-issues-btn.pull-left
+        .filter-item.inline.update-issues-btn.float-left
           = button_tag "Update all", class: "btn update-selected-issues btn-info", disabled: true
-        = button_tag "Cancel", class: "btn btn-default js-bulk-update-menu-hide pull-right"
+        = button_tag "Cancel", class: "btn btn-default js-bulk-update-menu-hide float-right"
       .block
         .title
           Status
diff --git a/app/views/shared/issuable/_close_reopen_button.html.haml b/app/views/shared/issuable/_close_reopen_button.html.haml
index 9ef015047c9..933d4b2ea65 100644
--- a/app/views/shared/issuable/_close_reopen_button.html.haml
+++ b/app/views/shared/issuable/_close_reopen_button.html.haml
@@ -4,11 +4,11 @@
 
 - if can_update && is_current_user
   = link_to "Close #{display_issuable_type}", close_issuable_path(issuable), method: button_method,
-            class: "hidden-xs hidden-sm btn btn-grouped btn-close js-btn-issue-action #{issuable_button_visibility(issuable, true)}", title: "Close #{display_issuable_type}"
+            class: "d-none d-sm-none d-md-block btn btn-grouped btn-close js-btn-issue-action #{issuable_button_visibility(issuable, true)}", title: "Close #{display_issuable_type}"
   = link_to "Reopen #{display_issuable_type}", reopen_issuable_path(issuable), method: button_method,
-            class: "hidden-xs hidden-sm btn btn-grouped btn-reopen js-btn-issue-action #{issuable_button_visibility(issuable, false)}", title: "Reopen #{display_issuable_type}"
+            class: "d-none d-sm-none d-md-block btn btn-grouped btn-reopen js-btn-issue-action #{issuable_button_visibility(issuable, false)}", title: "Reopen #{display_issuable_type}"
 - elsif can_update && !is_current_user
   = render 'shared/issuable/close_reopen_report_toggle', issuable: issuable
 - else
   = link_to 'Report abuse', new_abuse_report_path(user_id: issuable.author.id, ref_url: issuable_url(issuable)),
-            class: 'hidden-xs hidden-sm btn btn-grouped btn-close-color', title: 'Report abuse'
+            class: 'd-none d-sm-none d-md-block btn btn-grouped btn-close-color', title: 'Report abuse'
diff --git a/app/views/shared/issuable/_close_reopen_report_toggle.html.haml b/app/views/shared/issuable/_close_reopen_report_toggle.html.haml
index 39a5171c1d6..0d59c9304b4 100644
--- a/app/views/shared/issuable/_close_reopen_report_toggle.html.haml
+++ b/app/views/shared/issuable/_close_reopen_report_toggle.html.haml
@@ -1,12 +1,12 @@
 - display_issuable_type = issuable_display_type(issuable)
 - button_action = issuable.closed? ? 'reopen' : 'close'
 - display_button_action = button_action.capitalize
-- button_responsive_class = 'hidden-xs hidden-sm'
+- button_responsive_class = 'd-none d-sm-none d-md-block'
 - button_class = "#{button_responsive_class} btn btn-grouped js-issuable-close-button js-btn-issue-action issuable-close-button"
 - toggle_class = "#{button_responsive_class} btn btn-nr dropdown-toggle js-issuable-close-toggle"
 - button_method = issuable_close_reopen_button_method(issuable)
 
-.pull-left.btn-group.prepend-left-10.issuable-close-dropdown.droplab-dropdown.js-issuable-close-dropdown
+.float-left.btn-group.prepend-left-10.issuable-close-dropdown.droplab-dropdown.js-issuable-close-dropdown
   = link_to "#{display_button_action} #{display_issuable_type}", close_reopen_issuable_path(issuable),
             method: button_method, class: "#{button_class} btn-#{button_action}", title: "#{display_button_action} #{display_issuable_type}"
 
@@ -14,7 +14,7 @@
                data: { 'dropdown-trigger' => '#issuable-close-menu' }, 'aria-label' => 'Toggle dropdown' do
     = icon('caret-down', class: 'toggle-icon icon')
 
-  %ul#issuable-close-menu.js-issuable-close-menu.dropdown-menu{ class: button_responsive_class, data: { dropdown: true } }
+  %ul#issuable-close-menu.js-issuable-close-menu.dropdown-menu{ data: { dropdown: true } }
     %li.close-item{ class: "#{issuable_button_visibility(issuable, true) || 'droplab-item-selected'}",
                     data: { text: "Close #{display_issuable_type}", url: close_issuable_path(issuable),
                     button_class: "#{button_class} btn-close", toggle_class: "#{toggle_class} btn-close-color", method: button_method } }
diff --git a/app/views/shared/issuable/_feed_buttons.html.haml b/app/views/shared/issuable/_feed_buttons.html.haml
new file mode 100644
index 00000000000..d4834090413
--- /dev/null
+++ b/app/views/shared/issuable/_feed_buttons.html.haml
@@ -0,0 +1,4 @@
+= link_to safe_params.merge(rss_url_options), class: 'btn has-tooltip', data: { container: 'body' }, title: 'Subscribe to RSS feed' do
+  = icon('rss')
+= link_to safe_params.merge(calendar_url_options), class: 'btn has-tooltip', data: { container: 'body' }, title: 'Subscribe to calendar' do
+  = custom_icon('icon_calendar')
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index 7704c88905b..1cd8ce0826c 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -24,12 +24,9 @@
         .filter-item.inline.labels-filter
           = render "shared/issuable/label_dropdown", selected: selected_labels, use_id: false, selected_toggle: params[:label_name], data_options: { field_name: "label_name[]" }
 
-        - if issuable_filter_present?
-          .filter-item.inline.reset-filters
-            %a{ href: page_filter_path(without: issuable_filter_params) } Reset filters
-
-        .pull-right
-          = render 'shared/sort_dropdown'
+        - unless @no_filters_set
+          .float-right
+            = render 'shared/sort_dropdown'
 
   - has_labels = @labels && @labels.any?
   .row-content-block.second-block.filtered-labels{ class: ("hidden" unless has_labels) }
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 4c8f03f1498..b49e47a7266 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -11,8 +11,8 @@
     = link_to "the #{issuable.class.model_name.human.downcase}", polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), target: "_blank", rel: 'noopener noreferrer'
     and make sure your changes will not unintentionally remove theirs
 
-.form-group
-  = form.label :title, class: 'control-label'
+.form-group.row
+  = form.label :title, class: 'col-form-label col-sm-2'
 
   = 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?)
@@ -20,15 +20,17 @@
 = render 'shared/form_elements/description', model: issuable, form: form, project: project
 
 - if issuable.respond_to?(:confidential)
-  .form-group
-    .col-sm-offset-2.col-sm-10
-      .checkbox
-        = form.label :confidential do
-          = form.check_box :confidential
+  .form-group.row
+    .offset-sm-2.col-sm-10
+      .form-check
+        = form.check_box :confidential, class: 'form-check-input'
+        = form.label :confidential, class: 'form-check-label' do
           This issue is confidential and should only be visible to team members with at least Reporter access.
 
 = render 'shared/issuable/form/metadata', issuable: issuable, form: form
 
+= render_if_exists 'shared/issuable/approvals', issuable: issuable, form: form
+
 = render 'shared/issuable/form/branch_chooser', issuable: issuable, form: form
 
 = render 'shared/issuable/form/merge_params', issuable: issuable
@@ -36,8 +38,8 @@
 = render 'shared/issuable/form/contribution', issuable: issuable, form: form
 
 - if @merge_request_to_resolve_discussions_of
-  .form-group
-    .col-sm-10.col-sm-offset-2
+  .form-group.row
+    .col-sm-10.offset-sm-2
       = icon('info-circle')
       - if @merge_request_to_resolve_discussions_of.discussions_can_be_resolved_by?(current_user)
         = hidden_field_tag 'merge_request_to_resolve_discussions_of', @merge_request_to_resolve_discussions_of.iid
@@ -57,7 +59,7 @@
 
 - is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?)
 .row-content-block{ class: (is_footer ? "footer-block" : "middle-block") }
-  .pull-right
+  .float-right
     - if issuable.new_record?
       = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class]), class: 'btn btn-cancel'
     - else
@@ -77,5 +79,6 @@
       %strong= link_to('contribution guidelines', guide_url)
       for this project.
 
+= render_if_exists 'shared/issuable/remove_approver'
 
 = form.hidden_field :lock_version
diff --git a/app/views/shared/issuable/_label_page_create.html.haml b/app/views/shared/issuable/_label_page_create.html.haml
index 91aa329eb93..55edaa7eda4 100644
--- a/app/views/shared/issuable/_label_page_create.html.haml
+++ b/app/views/shared/issuable/_label_page_create.html.haml
@@ -1,6 +1,7 @@
+- show_close = local_assigns.fetch(:show_close, true)
 - subject = @project || @group
 .dropdown-page-two.dropdown-new-label
-  = dropdown_title(create_label_title(subject), options: { back: true })
+  = dropdown_title(create_label_title(subject), options: { back: true, close: show_close })
   = dropdown_content do
     .dropdown-labels-error.js-label-error
     %input#new_label_name.default-dropdown-input{ type: "text", placeholder: _('Name new label') }
@@ -12,7 +13,7 @@
       .dropdown-label-color-preview.js-dropdown-label-color-preview
       %input#new_label_color.default-dropdown-input{ type: "text", placeholder: _('Assign custom color like #FF0000') }
     .clearfix
-      %button.btn.btn-primary.pull-left.js-new-label-btn{ type: "button" }
+      %button.btn.btn-primary.float-left.js-new-label-btn{ type: "button" }
         = _('Create')
-      %button.btn.btn-default.pull-right.js-cancel-label-btn{ type: "button" }
+      %button.btn.btn-default.float-right.js-cancel-label-btn{ type: "button" }
         = _('Cancel')
diff --git a/app/views/shared/issuable/_label_page_default.html.haml b/app/views/shared/issuable/_label_page_default.html.haml
index 2bd922bca2b..aa4a5f0e0d3 100644
--- a/app/views/shared/issuable/_label_page_default.html.haml
+++ b/app/views/shared/issuable/_label_page_default.html.haml
@@ -1,15 +1,18 @@
 - title = local_assigns.fetch(:title, _('Assign labels'))
+- content_title = local_assigns.fetch(:content_title, _('Create lists from labels. Issues with that label appear in that list.'))
+- show_title = local_assigns.fetch(:show_title, true)
 - show_create = local_assigns.fetch(:show_create, true)
 - show_footer = local_assigns.fetch(:show_footer, true)
 - filter_placeholder = local_assigns.fetch(:filter_placeholder, 'Search')
 - show_boards_content = local_assigns.fetch(:show_boards_content, false)
 - subject = @project || @group
 .dropdown-page-one
-  = dropdown_title(title)
+  - if show_title
+    = dropdown_title(title)
   - if show_boards_content
     .issue-board-dropdown-content
       %p
-        = _('Create lists from labels. Issues with that label appear in that list.')
+        = content_title
   = dropdown_filter(filter_placeholder)
   = dropdown_content
   - if current_board_parent && show_footer
diff --git a/app/views/shared/issuable/_milestone_dropdown.html.haml b/app/views/shared/issuable/_milestone_dropdown.html.haml
index 955b8866c2c..37625a4a163 100644
--- a/app/views/shared/issuable/_milestone_dropdown.html.haml
+++ b/app/views/shared/issuable/_milestone_dropdown.html.haml
@@ -1,6 +1,8 @@
 - project = @target_project || @project
 - extra_class = extra_class || ''
 - show_menu_above = show_menu_above || false
+- selected = local_assigns.fetch(:selected, nil)
+
 - selected_text = selected.try(:title) || params[:milestone_title]
 - dropdown_title = local_assigns.fetch(:dropdown_title, "Filter by milestone")
 - if selected.present? || params[:milestone_title].present?
diff --git a/app/views/shared/issuable/_nav.html.haml b/app/views/shared/issuable/_nav.html.haml
index 4d8109eb90c..157637dbd11 100644
--- a/app/views/shared/issuable/_nav.html.haml
+++ b/app/views/shared/issuable/_nav.html.haml
@@ -1,22 +1,23 @@
 - type = local_assigns.fetch(:type, :issues)
 - page_context_word = type.to_s.humanize(capitalize: false)
+- display_count = local_assigns.fetch(:display_count, :true)
 
-%ul.nav-links.issues-state-filters.mobile-separator
+%ul.nav-links.issues-state-filters.mobile-separator.nav.nav-tabs
   %li{ class: active_when(params[:state] == 'opened') }>
     = link_to page_filter_path(state: 'opened', label: true), id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", data: { state: 'opened' } do
-      #{issuables_state_counter_text(type, :opened)}
+      #{issuables_state_counter_text(type, :opened, display_count)}
 
   - if type == :merge_requests
     %li{ class: active_when(params[:state] == 'merged') }>
       = link_to page_filter_path(state: 'merged', label: true), id: 'state-merged', title: 'Filter by merge requests that are currently merged.', data: { state: 'merged' } do
-        #{issuables_state_counter_text(type, :merged)}
+        #{issuables_state_counter_text(type, :merged, display_count)}
 
     %li{ class: active_when(params[:state] == 'closed') }>
       = link_to page_filter_path(state: 'closed', label: true), id: 'state-closed', title: 'Filter by merge requests that are currently closed and unmerged.', data: { state: 'closed' } do
-        #{issuables_state_counter_text(type, :closed)}
+        #{issuables_state_counter_text(type, :closed, display_count)}
   - else
     %li{ class: active_when(params[:state] == 'closed') }>
       = link_to page_filter_path(state: 'closed', label: true), id: 'state-closed', title: 'Filter by issues that are currently closed.', data: { state: 'closed' } do
-        #{issuables_state_counter_text(type, :closed)}
+        #{issuables_state_counter_text(type, :closed, display_count)}
 
-  = render 'shared/issuable/nav_links/all', page_context_word: page_context_word, counter: issuables_state_counter_text(type, :all)
+  = render 'shared/issuable/nav_links/all', page_context_word: page_context_word, counter: issuables_state_counter_text(type, :all, display_count)
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index fc6f71ef60f..ef9ea2194ee 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -104,14 +104,7 @@
         .filter-dropdown-container
           - if type == :boards
             - if can?(current_user, :admin_list, board.parent)
-              .dropdown.prepend-left-10#js-add-list
-                %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: board_list_data }
-                  Add list
-                .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
-                  = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
-                  - if can?(current_user, :admin_label, board.parent)
-                    = render partial: "shared/issuable/label_page_create"
-                  = dropdown_loading
+              = render_if_exists 'shared/issuable/board_create_list_dropdown', board: board
               - if @project
                 #js-add-issues-btn.prepend-left-10{ data: { can_admin_list: can?(current_user, :admin_list, @project) } }
           - elsif type != :boards_modal
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index adaddda13eb..0ca35ea1298 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -5,9 +5,9 @@
     - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
     .block.issuable-sidebar-header
       - if current_user
-        %span.issuable-header-text.hide-collapsed.pull-left
+        %span.issuable-header-text.hide-collapsed.float-left
           = _('Todo')
-      %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => "Toggle sidebar" }
+      %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
         = sidebar_gutter_toggle_icon
       - if current_user
         = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable
@@ -18,30 +18,32 @@
           = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable, is_collapsed: true
       .block.assignee
         = render "shared/issuable/sidebar_assignees", issuable: issuable, can_edit_issuable: can_edit_issuable, signed_in: current_user.present?
+
+      = render_if_exists 'shared/issuable/sidebar_item_epic', issuable: issuable
+
       .block.milestone
-        .sidebar-collapsed-icon
+        .sidebar-collapsed-icon.has-tooltip{ title: milestone_tooltip_title(issuable.milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
           = icon('clock-o', 'aria-hidden': 'true')
           %span.milestone-title
             - if issuable.milestone
-              %span.has-tooltip{ title: "#{issuable.milestone.title}<br>#{milestone_tooltip_title(issuable.milestone)}", data: { container: 'body', html: 1, placement: 'left' } }
-                = issuable.milestone.title
+              = issuable.milestone.title
             - else
               = _('None')
         .title.hide-collapsed
           = _('Milestone')
           = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
           - if can_edit_issuable
-            = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right'
+            = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right'
         .value.hide-collapsed
           - if issuable.milestone
-            = link_to issuable.milestone.title, milestone_path(issuable.milestone), class: "bold has-tooltip", title: milestone_tooltip_title(issuable.milestone), data: { container: "body", html: 1 }
+            = link_to issuable.milestone.title, milestone_path(issuable.milestone), class: "bold has-tooltip", title: milestone_tooltip_due_date(issuable.milestone), data: { container: "body", html: 'true', boundary: 'viewport' }
           - else
             %span.no-value
               = _('None')
 
         .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: project_milestones_path(@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 }})
+          = 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: project_milestones_path(@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, display: 'static' }})
       - if issuable.has_attribute?(:time_estimate)
         #issuable-time-tracker.block
           // Fallback while content is loading
@@ -50,7 +52,7 @@
             = icon('spinner spin', 'aria-hidden': 'true')
       - if issuable.has_attribute?(:due_date)
         .block.due_date
-          .sidebar-collapsed-icon
+          .sidebar-collapsed-icon.has-tooltip{ data: { placement: 'left', container: 'body', html: 'true', boundary: 'viewport' }, title: sidebar_due_date_tooltip_label(issuable) }
             = icon('calendar', 'aria-hidden': 'true')
             %span.js-due-date-sidebar-value
               = issuable.due_date.try(:to_s, :medium) || 'None'
@@ -58,7 +60,7 @@
             = _('Due date')
             = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-              = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right'
+              = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right'
           .value.hide-collapsed
             %span.value-content
               - if issuable.due_date
@@ -75,7 +77,7 @@
             .selectbox.hide-collapsed
               = f.hidden_field :due_date, value: issuable.due_date.try(:strftime, 'yy-mm-dd')
               .dropdown
-                %button.dropdown-menu-toggle.js-due-date-select{ type: 'button', data: { toggle: 'dropdown', field_name: "#{issuable.to_ability_name}[due_date]", ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable) } }
+                %button.dropdown-menu-toggle.js-due-date-select{ type: 'button', data: { toggle: 'dropdown', field_name: "#{issuable.to_ability_name}[due_date]", ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), display: 'static' } }
                   %span.dropdown-toggle-text
                     = _('Due date')
                   = icon('chevron-down', 'aria-hidden': 'true')
@@ -84,10 +86,10 @@
                   = dropdown_content do
                     .js-due-date-calendar
 
-      - if @labels && @labels.any?
+      - if @labels
         - selected_labels = issuable.labels
         .block.labels
-          .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body" } }
+          .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body", boundary: 'viewport' } }
             = icon('tags', 'aria-hidden': 'true')
             %span
               = selected_labels.size
@@ -95,8 +97,8 @@
             = _('Labels')
             = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
             - if can_edit_issuable
-              = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right'
-          .value.issuable-show-labels.hide-collapsed{ class: ("has-labels" if selected_labels.any?) }
+              = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right'
+          .value.issuable-show-labels.dont-hide.hide-collapsed{ class: ("has-labels" if selected_labels.any?) }
             - if selected_labels.any?
               - selected_labels.each do |label|
                 = link_to_label(label, subject: issuable.project, type: issuable.to_ability_name)
@@ -107,7 +109,7 @@
             - selected_labels.each do |label|
               = hidden_field_tag "#{issuable.to_ability_name}[label_names][]", label.id, id: nil
             .dropdown
-              %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-label-sidebar-dropdown{ type: "button", data: {toggle: "dropdown", default_label: "Labels", field_name: "#{issuable.to_ability_name}[label_names][]", ability_name: issuable.to_ability_name, show_no: "true", show_any: "true", namespace_path: @project.try(:namespace).try(:full_path), project_path: @project.try(:path), issue_update: issuable_json_path(issuable), labels: (project_labels_path(@project, :json) if @project) } }
+              %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-label-sidebar-dropdown{ type: "button", data: {toggle: "dropdown", default_label: "Labels", field_name: "#{issuable.to_ability_name}[label_names][]", ability_name: issuable.to_ability_name, show_no: "true", show_any: "true", namespace_path: @project.try(:namespace).try(:full_path), project_path: @project.try(:path), issue_update: issuable_json_path(issuable), labels: (labels_filter_path(false) if @project), display: 'static' } }
                 %span.dropdown-toggle-text{ class: ("is-default" if selected_labels.empty?) }
                   = multi_label_name(selected_labels, "Labels")
                 = icon('chevron-down', 'aria-hidden': 'true')
@@ -116,6 +118,8 @@
                 - if can? current_user, :admin_label, @project and @project
                   = render partial: "shared/issuable/label_page_create"
 
+      = render_if_exists 'shared/issuable/sidebar_weight', issuable: issuable
+
       - if issuable.has_attribute?(:confidential)
         -# haml-lint:disable InlineJavaScript
         %script#js-confidential-issue-data{ type: "application/json" }= { is_confidential: @issue.confidential, is_editable: can_edit_issuable }.to_json.html_safe
@@ -134,20 +138,20 @@
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference
         .sidebar-collapsed-icon.dont-change-state
-          = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left")
+          = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left", boundary: 'viewport')
         .cross-project-reference.hide-collapsed
           %span
             = _('Reference:')
             %cite{ title: project_ref }
               = project_ref
-          = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left")
+          = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left", boundary: 'viewport')
       - if current_user && issuable.can_move?(current_user)
         .block.js-sidebar-move-issue-block
-          .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body' }, title: _('Move issue') }
+          .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body', boundary: 'viewport' }, title: _('Move issue') }
             = custom_icon('icon_arrow_right')
           .dropdown.sidebar-move-issue-dropdown.hide-collapsed
             %button.btn.btn-default.btn-block.js-sidebar-dropdown-toggle.js-move-issue{ type: 'button',
-              data: { toggle: 'dropdown' } }
+              data: { toggle: 'dropdown', display: 'static' } }
               = _('Move issue')
             .dropdown-menu.dropdown-menu-selectable
               = dropdown_title(_('Move issue'))
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
index 304df38a096..8a13c7a3b83 100644
--- a/app/views/shared/issuable/_sidebar_assignees.html.haml
+++ b/app/views/shared/issuable/_sidebar_assignees.html.haml
@@ -4,7 +4,7 @@
       = _('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) }
+  .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body", boundary: 'viewport' }, title: sidebar_assignee_tooltip_label(issuable) }
     - if issuable.assignee
       = link_to_member(@project, issuable.assignee, size: 24)
     - else
@@ -13,15 +13,15 @@
     = _('Assignee')
     = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
     - if can_edit_issuable
-      = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right'
+      = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right'
     - if !signed_in
-      %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => _('Toggle sidebar') }
+      %a.gutter-toggle.float-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => _('Toggle sidebar') }
         = sidebar_gutter_toggle_icon
   .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') }
+          %span.float-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
@@ -37,7 +37,7 @@
   - 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, current_user: true, project_id: @project&.id, 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 } }
+  - 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, current_user: true, project_id: @project&.id, 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, display: 'static' } }
   - title = _('Select assignee')
 
   - if issuable.is_a?(Issue)
@@ -50,7 +50,7 @@
     - data[:multi_select] = true
     - data['dropdown-title'] = title
     - data['dropdown-header'] = dropdown_options[:data][:'dropdown-header']
-    - data['max-select'] = dropdown_options[:data][:'max-select']
+    - data['max-select'] = dropdown_options[:data][:'max-select'] if dropdown_options[:data][:'max-select']
     - options[:data].merge!(data)
 
   = dropdown_tag(title, options: options)
diff --git a/app/views/shared/issuable/_sidebar_todo.html.haml b/app/views/shared/issuable/_sidebar_todo.html.haml
index b77e104c072..583b33a8a1b 100644
--- a/app/views/shared/issuable/_sidebar_todo.html.haml
+++ b/app/views/shared/issuable/_sidebar_todo.html.haml
@@ -1,11 +1,11 @@
 - is_collapsed = local_assigns.fetch(:is_collapsed, false)
-- mark_content = is_collapsed ? icon('check-square', class: 'todo-undone') : _('Mark done')
+- mark_content = is_collapsed ? icon('check-square', class: 'todo-undone') : _('Mark todo as done')
 - todo_content = is_collapsed ? icon('plus-square') : _('Add todo')
 
 %button.issuable-todo-btn.js-issuable-todo{ type: 'button',
-  class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'btn btn-default issuable-header-btn pull-right'),
-  title: (todo.nil? ? _('Add todo') : _('Mark done')),
-  'aria-label' => (todo.nil? ? _('Add todo') : _('Mark done')),
+  class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'btn btn-default issuable-header-btn float-right'),
+  title: (todo.nil? ? _('Add todo') : _('Mark todo as done')),
+  'aria-label' => (todo.nil? ? _('Add todo') : _('Mark todo as done')),
   data: issuable_todo_button_data(issuable, todo, is_collapsed) }
   %span.issuable-todo-inner.js-issuable-todo-inner<
     - if todo
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
index 9a589387255..fbc96baa0f7 100644
--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -6,13 +6,13 @@
 
 %hr
 - if issuable.new_record?
-  .form-group
-    = form.label :source_branch, class: 'control-label'
+  .form-group.row
+    = form.label :source_branch, class: 'col-form-label col-sm-2'
     .col-sm-10
       .issuable-form-select-holder
         = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2 ref-name', disabled: true })
-.form-group
-  = form.label :target_branch, class: 'control-label'
+.form-group.row
+  = form.label :target_branch, class: 'col-form-label col-sm-2'
   .col-sm-10.target-branch-select-dropdown-container
     .issuable-form-select-holder
       = form.hidden_field(:target_branch,
diff --git a/app/views/shared/issuable/form/_contribution.html.haml b/app/views/shared/issuable/form/_contribution.html.haml
index de508278d7c..bc9a1edc39c 100644
--- a/app/views/shared/issuable/form/_contribution.html.haml
+++ b/app/views/shared/issuable/form/_contribution.html.haml
@@ -7,14 +7,14 @@
 
 %hr
 
-.form-group
-  .control-label
+.form-group.row
+  %label.col-form-label.col-sm-2
     = _('Contribution')
   .col-sm-10
-    .checkbox
-      = form.label :allow_maintainer_to_push do
-        = form.check_box :allow_maintainer_to_push, disabled: !issuable.can_allow_maintainer_to_push?(current_user)
-        = _('Allow edits from maintainers.')
-        = link_to 'About this feature', help_page_path('user/project/merge_requests/maintainer_access')
-        .help-block
-          = allow_maintainer_push_unavailable_reason(issuable)
+    .form-check.prepend-top-5
+      = form.check_box :allow_collaboration, disabled: !issuable.can_allow_collaboration?(current_user), class: 'form-check-input'
+      = form.label :allow_collaboration, class: 'form-check-label' do
+        = _('Allow commits from members who can merge to the target branch.')
+        = link_to 'About this feature', help_page_path('user/project/merge_requests/allow_collaboration')
+        .form-text.text-muted
+          = allow_collaboration_unavailable_reason(issuable)
diff --git a/app/views/shared/issuable/form/_default_templates.html.haml b/app/views/shared/issuable/form/_default_templates.html.haml
new file mode 100644
index 00000000000..49a5ce926b3
--- /dev/null
+++ b/app/views/shared/issuable/form/_default_templates.html.haml
@@ -0,0 +1,4 @@
+%p.form-text.text-muted
+  Add
+  = link_to 'description templates', help_page_path('user/project/description_templates'), tabindex: -1
+  to help your contributors communicate effectively!
diff --git a/app/views/shared/issuable/form/_issue_assignee.html.haml b/app/views/shared/issuable/form/_issue_assignee.html.haml
index 9b2b6e572e7..0d13fccaf3e 100644
--- a/app/views/shared/issuable/form/_issue_assignee.html.haml
+++ b/app/views/shared/issuable/form/_issue_assignee.html.haml
@@ -11,7 +11,7 @@
     Assignee
     = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
     - if can_edit_issuable
-      = link_to 'Edit', '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right'
+      = link_to 'Edit', '#', class: 'js-sidebar-dropdown-toggle edit-link float-right'
   .value.hide-collapsed
     - if assignees.any?
       - assignees.each do |assignee|
diff --git a/app/views/shared/issuable/form/_merge_params.html.haml b/app/views/shared/issuable/form/_merge_params.html.haml
index 8f6509a8ce8..1881875b7c0 100644
--- a/app/views/shared/issuable/form/_merge_params.html.haml
+++ b/app/views/shared/issuable/form/_merge_params.html.haml
@@ -3,15 +3,20 @@
 - return unless issuable.is_a?(MergeRequest)
 - return if issuable.closed_without_fork?
 
--# This check is duplicated below to avoid CE -> EE merge conflicts.
--# This comment and the following line should only exist in CE.
-- return unless issuable.can_remove_source_branch?(current_user)
-
-.form-group
-  .col-sm-10.col-sm-offset-2
-    - if issuable.can_remove_source_branch?(current_user)
-      .checkbox
-        = 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?
+- if issuable.can_remove_source_branch?(current_user)
+  .form-group.row
+    .col-sm-10.offset-sm-2
+      .form-check
+        = 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?, class: 'form-check-input'
+        = label_tag 'merge_request[force_remove_source_branch]', class: 'form-check-label' do
           Remove source branch when merge request is accepted.
+
+.form-group.row
+  .col-sm-10.offset-sm-2
+    .form-check
+      = hidden_field_tag 'merge_request[squash]', '0', id: nil
+      = check_box_tag 'merge_request[squash]', '1', issuable.squash, class: 'form-check-input'
+      = label_tag 'merge_request[squash]', class: 'form-check-label' do
+        Squash commits when merge request is accepted.
+        = link_to 'About this feature', help_page_path('user/project/merge_requests/squash_and_merge')
diff --git a/app/views/shared/issuable/form/_merge_request_assignee.html.haml b/app/views/shared/issuable/form/_merge_request_assignee.html.haml
index bf8613b0f0d..05c03dedd91 100644
--- a/app/views/shared/issuable/form/_merge_request_assignee.html.haml
+++ b/app/views/shared/issuable/form/_merge_request_assignee.html.haml
@@ -1,6 +1,6 @@
 - 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) }
+  .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: sidebar_assignee_tooltip_label(issuable) }
     - if merge_request.assignee
       = link_to_member(@project, merge_request.assignee, size: 24)
     - else
@@ -9,12 +9,12 @@
     Assignee
     = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
     - if can_edit_issuable
-      = link_to 'Edit', '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right'
+      = link_to 'Edit', '#', class: 'js-sidebar-dropdown-toggle edit-link float-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' }
+          %span.float-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
diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml
index 1608bd59cf1..bd87bb38e77 100644
--- a/app/views/shared/issuable/form/_metadata.html.haml
+++ b/app/views/shared/issuable/form/_metadata.html.haml
@@ -8,28 +8,31 @@
 
 %hr
 .row
-  %div{ class: (has_due_date ? "col-lg-6" : "col-sm-12") }
-    .form-group.issue-assignee
+  %div{ class: (has_due_date ? "col-lg-6" : "col-12") }
+    .form-group.row.issue-assignee
       - 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) }
+    .form-group.row.issue-milestone
+      = form.label :milestone_id, "Milestone", class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
+      .col-sm-10{ class: ("col-md-8" if has_due_date) }
         .issuable-form-select-holder
           = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, show_started: false, extra_class: "js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: "Select milestone"
-    .form-group
+    .form-group.row
       - has_labels = @labels && @labels.any?
-      = form.label :label_ids, "Labels", class: "control-label #{"col-lg-4" if has_due_date}"
+      = form.label :label_ids, "Labels", class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
       = form.hidden_field :label_ids, multiple: true, value: ''
-      .col-sm-10{ class: "#{"col-lg-8" if has_due_date} #{'issuable-form-padding-top' if !has_labels}" }
+      .col-sm-10{ class: "#{"col-md-8" if has_due_date} #{'issuable-form-padding-top' if !has_labels}" }
         .issuable-form-select-holder
-          = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false}, dropdown_title: "Select label"
+          = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false }, dropdown_title: "Select label"
+
+    = render_if_exists "shared/issuable/form/weight", issuable: issuable, form: form
+
   - if has_due_date
     .col-lg-6
-      .form-group
-        = form.label :due_date, "Due date", class: "control-label"
-        .col-sm-10
+      .form-group.row
+        = form.label :due_date, "Due date", class: "col-form-label col-md-2 col-lg-4"
+        .col-8
           .issuable-form-select-holder
             = form.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select 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
index 567cde764e2..6d4f9ccd66f 100644
--- a/app/views/shared/issuable/form/_metadata_issue_assignee.html.haml
+++ b/app/views/shared/issuable/form/_metadata_issue_assignee.html.haml
@@ -1,5 +1,5 @@
-= 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) }
+= form.label :assignee_ids, "Assignee", class: "col-form-label #{"col-md-2 col-lg-4" if has_due_date}"
+.col-sm-10{ class: ("col-md-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 }
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
index d0ea4e149df..3521f71f409 100644
--- a/app/views/shared/issuable/form/_metadata_merge_request_assignee.html.haml
+++ b/app/views/shared/issuable/form/_metadata_merge_request_assignee.html.haml
@@ -1,4 +1,4 @@
-= form.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
+= form.label :assignee_id, "Assignee", class: "col-form-label #{has_due_date ? "col-lg-4" : "col-sm-2"}"
 .col-sm-10{ class: ("col-lg-8" if has_due_date) }
   .issuable-form-select-holder
     = form.hidden_field :assignee_id
diff --git a/app/views/shared/issuable/form/_title.html.haml b/app/views/shared/issuable/form/_title.html.haml
index e81639f35ea..c35d0b3751f 100644
--- a/app/views/shared/issuable/form/_title.html.haml
+++ b/app/views/shared/issuable/form/_title.html.haml
@@ -9,7 +9,7 @@
       autocomplete: 'off', class: 'form-control pad qa-issuable-form-title'
 
   - if issuable.respond_to?(:work_in_progress?)
-    %p.help-block
+    %p.form-text.text-muted
       .js-wip-explanation
         %a.js-toggle-wip{ href: '', tabindex: -1 }
           Remove the
@@ -30,7 +30,4 @@
         merge request from being merged before it's ready.
 
   - if no_issuable_templates && can?(current_user, :push_code, issuable.project)
-    %p.help-block
-      Add
-      = link_to 'description templates', help_page_path('user/project/description_templates'), tabindex: -1
-      to help your contributors communicate effectively!
+    = render 'shared/issuable/form/default_templates'
diff --git a/app/views/shared/labels/_form.html.haml b/app/views/shared/labels/_form.html.haml
index e8b04f56839..2bf5efae1e6 100644
--- a/app/views/shared/labels/_form.html.haml
+++ b/app/views/shared/labels/_form.html.haml
@@ -1,24 +1,25 @@
-= form_for @label, as: :label, url: url, html: { class: 'form-horizontal label-form js-quick-submit js-requires-input' } do |f|
+= form_for @label, as: :label, url: url, html: { class: 'label-form js-quick-submit js-requires-input' } do |f|
   = form_errors(@label)
 
-  .form-group
-    = f.label :title, class: 'control-label'
+  .form-group.row
+    = f.label :title, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.text_field :title, class: "form-control", required: true, autofocus: true
-  .form-group
-    = f.label :description, class: 'control-label'
+  .form-group.row
+    = f.label :description, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.text_field :description, class: "form-control js-quick-submit"
-  .form-group
-    = f.label :color, "Background color", class: 'control-label'
+  .form-group.row
+    = f.label :color, "Background color", class: 'col-form-label col-sm-2'
     .col-sm-10
       .input-group
-        .input-group-addon.label-color-preview &nbsp;
+        .input-group-prepend
+          .input-group-text.label-color-preview &nbsp;
         = f.text_field :color, class: "form-control"
-      .help-block
+      .form-text.text-muted
         Choose any color.
         %br
-        Or you can choose one of suggested colors below
+        Or you can choose one of the suggested colors below
 
       .suggest-colors
         - suggested_colors.each do |color|
diff --git a/app/views/shared/members/_filter_2fa_dropdown.html.haml b/app/views/shared/members/_filter_2fa_dropdown.html.haml
new file mode 100644
index 00000000000..95c35c56b3c
--- /dev/null
+++ b/app/views/shared/members/_filter_2fa_dropdown.html.haml
@@ -0,0 +1,11 @@
+- filter = params[:two_factor] || 'everyone'
+- filter_options = { 'everyone' => 'Everyone', 'enabled' => 'Enabled', 'disabled' => 'Disabled' }
+.dropdown.inline.member-filter-2fa-dropdown
+  = dropdown_toggle('2FA: ' + filter_options[filter], { toggle: 'dropdown' })
+  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+    %li.dropdown-header
+      Filter by two-factor authentication
+    - filter_options.each do |value, title|
+      %li
+        = link_to filter_group_project_member_path(two_factor: value), class: ("is-active" if filter == value) do
+          = title
diff --git a/app/views/shared/members/_group.html.haml b/app/views/shared/members/_group.html.haml
index 5868c52566d..d0b492b43f3 100644
--- a/app/views/shared/members/_group.html.haml
+++ b/app/views/shared/members/_group.html.haml
@@ -5,16 +5,16 @@
 %li.member.group_member{ id: dom_id }
   %span.list-item-name
     = group_icon(group, class: "avatar s40", alt: '')
-    %strong
-      = link_to group.full_name, group_path(group)
-    .cgray
-      Joined #{time_ago_with_tooltip(group.created_at)}
-      - if group_link.expires?
-        ·
-        %span{ class: ('text-warning' if group_link.expires_soon?) }
-          Expires in #{distance_of_time_in_words_to_now(group_link.expires_at)}
+    .user-info
+      = link_to group.full_name, group_path(group), class: 'member'
+      .cgray
+        Given access #{time_ago_with_tooltip(group_link.created_at)}
+        - if group_link.expires?
+          ·
+          %span{ class: ('text-warning' if group_link.expires_soon?) }
+            Expires in #{distance_of_time_in_words_to_now(group_link.expires_at)}
   .controls.member-controls
-    = form_tag project_group_link_path(@project, group_link), method: :put, remote: true, class: 'form-horizontal js-edit-member-form' do
+    = form_tag project_group_link_path(@project, group_link), method: :put, remote: true, class: 'js-edit-member-form form-group row append-right-5' do
       = hidden_field_tag "group_link[group_access]", group_link.group_access
       .member-form-control.dropdown.append-right-5
         %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
@@ -23,7 +23,7 @@
           %span.dropdown-toggle-text
             = group_link.human_access
           = icon("chevron-down")
-        .dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
+        .dropdown-menu.dropdown-select.dropdown-menu-right.dropdown-menu-selectable
           = dropdown_title("Change permissions")
           .dropdown-content
             %ul
@@ -40,6 +40,6 @@
         method: :delete,
         data: { confirm: "Are you sure you want to remove #{group.name}?" },
         class: 'btn btn-remove prepend-left-10' do
-        %span.visible-xs-block
+        %span.d-block.d-sm-none
           Delete
-        = icon('trash', class: 'hidden-xs')
+        = icon('trash', class: 'd-none d-sm-block')
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index ba57d922c6d..46debe1f2b9 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -14,12 +14,16 @@
         %span.cgray= user.to_reference
 
         - if user == current_user
-          %span.label.label-success.prepend-left-5 It's you
+          %span.badge.badge-success.prepend-left-5 It's you
 
         - if user.blocked?
-          %label.label.label-danger
+          %label.badge.badge-danger
             %strong Blocked
 
+        - if user.two_factor_enabled?
+          %label.label.label-info
+            2FA
+
         - if source.instance_of?(Group) && source != @group
           &middot;
           = link_to source.full_name, source, class: "member-group-link"
@@ -29,7 +33,7 @@
             Requested
             = time_ago_with_tooltip(member.requested_at)
           - else
-            Joined #{time_ago_with_tooltip(member.created_at)}
+            Given access #{time_ago_with_tooltip(member.created_at)}
           - if member.expires?
             ·
             %span{ class: "#{"text-warning" if member.expires_soon?} has-tooltip", title: member.expires_at.to_time.in_time_zone.to_s(:medium) }
@@ -53,11 +57,11 @@
         - if member.can_resend_invite?
           = link_to icon('paper-plane'), polymorphic_path([:resend_invite, member]),
                     method: :post,
-                    class: 'btn btn-default prepend-left-10 hidden-xs',
+                    class: 'btn btn-default prepend-left-10 d-none d-sm-block',
                     title: 'Resend invite'
 
         - if user != current_user && member.can_update?
-          = form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
+          = form_for member, remote: true, html: { class: 'js-edit-member-form form-group row append-right-5' } do |f|
             = f.hidden_field :access_level
             .member-form-control.dropdown.append-right-5
               %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
@@ -65,7 +69,7 @@
                 %span.dropdown-toggle-text
                   = member.human_access
                 = icon("chevron-down")
-              .dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
+              .dropdown-menu.dropdown-select.dropdown-menu-right.dropdown-menu-selectable
                 = dropdown_title("Change permissions")
                 .dropdown-content
                   %ul
@@ -89,10 +93,10 @@
                     method: :post,
                     class: 'btn btn-success prepend-left-10',
                     title: 'Grant access' do
-            %span{ class: ('visible-xs-block' unless force_mobile_view) }
+            %span{ class: ('d-block d-sm-none' unless force_mobile_view) }
               Grant access
             - unless force_mobile_view
-              = icon('check inverse', class: 'hidden-xs')
+              = icon('check inverse', class: 'd-none d-sm-block')
 
         - if member.can_remove?
           - if current_user == user
@@ -106,9 +110,9 @@
                       data: { confirm: remove_member_message(member) },
                       class: 'btn btn-remove prepend-left-10',
                       title: remove_member_title(member) do
-              %span{ class: ('visible-xs-block' unless force_mobile_view) }
+              %span{ class: ('d-block d-sm-none' unless force_mobile_view) }
                 Delete
               - unless force_mobile_view
-                = icon('trash', class: 'hidden-xs')
+                = icon('trash', class: 'd-none d-sm-block')
       - else
         %span.member-access-text= member.human_access
diff --git a/app/views/shared/members/_requests.html.haml b/app/views/shared/members/_requests.html.haml
index 1fbd6bcc4cb..54679ab86cc 100644
--- a/app/views/shared/members/_requests.html.haml
+++ b/app/views/shared/members/_requests.html.haml
@@ -4,10 +4,10 @@
 
 - return if requesters.empty?
 
-.panel.panel-default.prepend-top-default{ class: ('panel-mobile' if force_mobile_view ) }
-  .panel-heading
+.card.prepend-top-default{ class: ('card-mobile' if force_mobile_view ) }
+  .card-header
     Users requesting access to
     %strong= membership_source.name
-    %span.badge= requesters.size
+    %span.badge.badge-pill= requesters.size
   %ul.content-list.members-list
     = render partial: 'shared/members/member', collection: requesters, as: :member, locals: { force_mobile_view: force_mobile_view }
diff --git a/app/views/shared/members/_sort_dropdown.html.haml b/app/views/shared/members/_sort_dropdown.html.haml
index bad0891f9f2..56b8c8f033e 100644
--- a/app/views/shared/members/_sort_dropdown.html.haml
+++ b/app/views/shared/members/_sort_dropdown.html.haml
@@ -1,6 +1,6 @@
 .dropdown.inline.member-sort-dropdown
   = dropdown_toggle(member_sort_options_hash[@sort], { toggle: 'dropdown' })
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
     %li.dropdown-header
       Sort by
     - member_sort_options_hash.each do |value, title|
diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml
new file mode 100644
index 00000000000..4a8f90937ea
--- /dev/null
+++ b/app/views/shared/milestones/_deprecation_message.html.haml
@@ -0,0 +1,14 @@
+.banner-callout.compact.milestone-deprecation-message.js-milestone-deprecation-message.prepend-top-20
+  .banner-graphic= image_tag 'illustrations/milestone_removing-page.svg'
+  .banner-body.prepend-left-10.append-right-10
+    %h5.banner-title.prepend-top-0= _('This page will be removed in a future release.')
+    %p.milestone-banner-text= _('Use group milestones to manage issues from multiple projects in the same milestone.')
+    = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn btn-link js-popover-link text-align-left milestone-banner-link'
+    .milestone-banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank'
+
+  %template.js-milestone-deprecation-message-template
+    .milestone-popover-body
+      %ol.milestone-popover-instructions-list.append-bottom-0
+        %li= _('Click any <strong>project name</strong> in the project list below to navigate to the project milestone.').html_safe
+        %li= _('Click the <strong>Promote</strong> button in the top right corner to promote it to a group milestone.').html_safe
+    .milestone-popover-footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-link prepend-left-0', target: '_blank'
diff --git a/app/views/shared/milestones/_form_dates.html.haml b/app/views/shared/milestones/_form_dates.html.haml
index a74cdbe274b..922805958a5 100644
--- a/app/views/shared/milestones/_form_dates.html.haml
+++ b/app/views/shared/milestones/_form_dates.html.haml
@@ -1,12 +1,11 @@
 .col-md-6
-  .form-group
-    = f.label :start_date, "Start Date", class: "control-label"
+  .form-group.row
+    = f.label :start_date, "Start Date", class: "col-form-label col-sm-2"
     .col-sm-10
-      = f.text_field :start_date, class: "datepicker form-control", placeholder: "Select start date"
-      %a.inline.pull-right.prepend-top-5.js-clear-start-date{ href: "#" } Clear start date
-.col-md-6
-  .form-group
-    = f.label :due_date, "Due Date", class: "control-label"
+      = f.text_field :start_date, class: "datepicker form-control", placeholder: "Select start date", autocomplete: 'off'
+      %a.inline.float-right.prepend-top-5.js-clear-start-date{ href: "#" } Clear start date
+  .form-group.row
+    = f.label :due_date, "Due Date", class: "col-form-label col-sm-2"
     .col-sm-10
-      = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date"
-      %a.inline.pull-right.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date
+      = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date", autocomplete: 'off'
+      %a.inline.float-right.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date
diff --git a/app/views/shared/milestones/_issuables.html.haml b/app/views/shared/milestones/_issuables.html.haml
index 7175e275f95..ee6354b1c28 100644
--- a/app/views/shared/milestones/_issuables.html.haml
+++ b/app/views/shared/milestones/_issuables.html.haml
@@ -1,9 +1,9 @@
 - show_counter = local_assigns.fetch(:show_counter, false)
 - primary = local_assigns.fetch(:primary, false)
-- panel_class = primary ? 'panel-primary' : 'panel-default'
+- panel_class = primary ? 'bg-primary text-white' : ''
 
-.panel{ class: panel_class }
-  .panel-heading
+.card{ class: panel_class }
+  .card-header
     .title
       = title
     - if show_counter
@@ -11,7 +11,7 @@
         = number_with_delimiter(issuables.length)
 
   - class_prefix = dom_class(issuables).pluralize
-  %ul{ class: "well-list milestone-#{class_prefix}-list", id: "#{class_prefix}-list-#{id}" }
+  %ul{ class: "content-list milestone-#{class_prefix}-list", id: "#{class_prefix}-list-#{id}" }
     = render partial: 'shared/milestones/issuable',
              collection: issuables,
              as: :issuable,
diff --git a/app/views/shared/milestones/_labels_tab.html.haml b/app/views/shared/milestones/_labels_tab.html.haml
index a26b3b8009e..6797520650d 100644
--- a/app/views/shared/milestones/_labels_tab.html.haml
+++ b/app/views/shared/milestones/_labels_tab.html.haml
@@ -10,7 +10,7 @@
         %span.prepend-description-left
           = markdown_field(label, :description)
 
-      .pull-right.hidden-xs.hidden-sm.hidden-md
+      .float-right.d-none.d-lg-block.d-xl-block
         = 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
diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml
index 5926867e2d7..09bbd04c2bf 100644
--- a/app/views/shared/milestones/_milestone.html.haml
+++ b/app/views/shared/milestones/_milestone.html.haml
@@ -11,7 +11,7 @@
         %span - Project Milestone
 
     .col-sm-6
-      .pull-right.light #{milestone.percent_complete(current_user)}% complete
+      .float-right.light #{milestone.percent_complete(current_user)}% complete
   .row
     .col-sm-6
       = link_to pluralize(milestone.total_issues_count(current_user), 'Issue'), issues_path
@@ -26,19 +26,19 @@
           .projects
             - milestone.milestones.each do |milestone|
               = link_to milestone_path(milestone) do
-                %span.label.label-gray
+                %span.badge.badge-gray
                   = dashboard ? milestone.project.full_name : milestone.project.name
       - if @group
         .col-sm-6.milestone-actions
           - if can?(current_user, :admin_milestones, @group)
             - if milestone.group_milestone?
-              = link_to edit_group_milestone_path(@group, milestone), class: "btn btn-xs btn-grouped" do
+              = link_to edit_group_milestone_path(@group, milestone), class: "btn btn-sm btn-grouped" do
                 Edit
               \
             - if milestone.closed?
-              = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-xs btn-grouped btn-reopen"
+              = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-sm btn-grouped btn-reopen"
             - else
-              = link_to 'Close Milestone', group_milestone_route(milestone, {state_event: :close }), method: :put, class: "btn btn-xs btn-grouped btn-close"
+              = link_to 'Close Milestone', group_milestone_route(milestone, {state_event: :close }), method: :put, class: "btn btn-sm btn-grouped btn-close"
 
   - if @project
     .row
@@ -46,24 +46,25 @@
         = render('shared/milestone_expired', milestone: milestone)
       .col-sm-6.milestone-actions
         - if can?(current_user, :admin_milestone, milestone.project) and milestone.active?
-          = link_to edit_project_milestone_path(milestone.project, milestone), class: "btn btn-xs btn-grouped" do
+          = link_to edit_project_milestone_path(milestone.project, milestone), class: "btn btn-sm btn-grouped" do
             Edit
           \
 
           - if @project.group
-            %button.js-promote-project-milestone-button.btn.btn-xs.btn-grouped.has-tooltip{ title: _('Promote to Group Milestone'),
+            %button.js-promote-project-milestone-button.btn.btn-sm.btn-grouped.has-tooltip{ title: _('Promote to Group Milestone'),
               disabled: true,
               type: 'button',
               data: { url: promote_project_milestone_path(milestone.project, milestone),
                       milestone_title: milestone.title,
+                      group_name: @project.group.name,
                       target: '#promote-milestone-modal',
                       container: 'body',
                       toggle: 'modal' } }
               = _('Promote')
 
-          = link_to 'Close Milestone', project_milestone_path(@project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close btn-grouped"
+          = link_to 'Close Milestone', project_milestone_path(@project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-sm btn-close btn-grouped"
 
-          %button.js-delete-milestone-button.btn.btn-xs.btn-grouped.btn-danger{ data: { toggle: 'modal',
+          %button.js-delete-milestone-button.btn.btn-sm.btn-grouped.btn-danger{ data: { toggle: 'modal',
             target: '#delete-milestone-modal',
             milestone_id: milestone.id,
             milestone_title: markdown_field(milestone, :title),
diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml
index a942ebc328b..becd1c4884e 100644
--- a/app/views/shared/milestones/_sidebar.html.haml
+++ b/app/views/shared/milestones/_sidebar.html.haml
@@ -4,12 +4,8 @@
 %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
   .issuable-sidebar.milestone-sidebar
     .block.milestone-progress.issuable-sidebar-header
-      %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => "Toggle sidebar" }
+      %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
         = sidebar_gutter_toggle_icon
-
-      .sidebar-collapsed-icon
-        %span== #{milestone.percent_complete(current_user)}%
-        = milestone_progress_bar(milestone)
       .title.hide-collapsed
         %strong.bold== #{milestone.percent_complete(current_user)}%
         %span.hide-collapsed
@@ -17,11 +13,16 @@
       .value.hide-collapsed
         = milestone_progress_bar(milestone)
 
+    .block.milestone-progress.hide-expanded
+      .sidebar-collapsed-icon.has-tooltip{ title: milestone_progress_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
+        %span== #{milestone.percent_complete(current_user)}%
+        = milestone_progress_bar(milestone)
+
     .block.start_date.hide-collapsed
       .title
         Start date
         - if @project && can?(current_user, :admin_milestone, @project)
-          = link_to 'Edit', edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link pull-right'
+          = link_to 'Edit', edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link float-right'
       .value
         %span.value-content
           - if milestone.start_date
@@ -35,45 +36,51 @@
         %span.collapsed-milestone-date
           - if milestone.start_date && milestone.due_date
             - if milestone.start_date.year == milestone.due_date.year
-              .milestone-date= milestone.start_date.strftime('%b %-d')
+              .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
+                = milestone.start_date.strftime('%b %-d')
             - else
-              .milestone-date= milestone.start_date.strftime('%b %-d %Y')
+              .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
+                = milestone.start_date.strftime('%b %-d %Y')
             .date-separator -
-            .due_date= milestone.due_date.strftime('%b %-d %Y')
+            .due_date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
+              = milestone.due_date.strftime('%b %-d %Y')
           - elsif milestone.start_date
             From
-            .milestone-date= milestone.start_date.strftime('%b %-d %Y')
+            .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
+              = milestone.start_date.strftime('%b %-d %Y')
           - elsif milestone.due_date
             Until
-            .milestone-date= milestone.due_date.strftime('%b %-d %Y')
+            .milestone-date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
+              = milestone.due_date.strftime('%b %-d %Y')
           - else
-            None
+            .has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
+              None
       .title.hide-collapsed
         Due date
         - if @project && can?(current_user, :admin_milestone, @project)
-          = link_to 'Edit', edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link pull-right'
+          = link_to 'Edit', edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link float-right'
       .value.hide-collapsed
         %span.value-content
           - if milestone.due_date
             %span.bold= milestone.due_date.to_s(:medium)
           - else
             %span.no-value No due date
-        - remaining_days = milestone_remaining_days(milestone)
+        - remaining_days = remaining_days_in_words(milestone)
         - if remaining_days.present?
           = surround '(', ')' do
             %span.remaining-days= remaining_days
 
     - if !project || can?(current_user, :read_issue, project)
       .block.issues
-        .sidebar-collapsed-icon
+        .sidebar-collapsed-icon.has-tooltip{ title: milestone_issues_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
           %strong
             = custom_icon('issues')
           %span= milestone.issues_visible_to_user(current_user).count
         .title.hide-collapsed
           Issues
-          %span.badge= milestone.issues_visible_to_user(current_user).count
-          - if project && can?(current_user, :create_issue, project)
-            = link_to new_project_issue_path(project, issue: { milestone_id: milestone.id }), class: "pull-right", title: "New Issue" do
+          %span.badge.badge-pill= milestone.issues_visible_to_user(current_user).count
+          - if show_new_issue_link?(project)
+            = link_to new_project_issue_path(project, issue: { milestone_id: milestone.id }), class: "float-right", title: "New Issue" do
               New issue
         .value.hide-collapsed.bold
           %span.milestone-stat
@@ -92,14 +99,16 @@
           = _('Time tracking')
           = icon('spinner spin')
 
+    = render_if_exists 'shared/milestones/weight', milestone: milestone
+
     .block.merge-requests
-      .sidebar-collapsed-icon
+      .sidebar-collapsed-icon.has-tooltip{ title: milestone_merge_requests_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
         %strong
           = custom_icon('mr_bold')
         %span= milestone.merge_requests.count
       .title.hide-collapsed
         Merge requests
-        %span.badge= milestone.merge_requests.count
+        %span.badge.badge-pill= milestone.merge_requests.count
       .value.hide-collapsed.bold
         - if !project || can?(current_user, :read_merge_request, project)
           %span.milestone-stat
@@ -129,10 +138,10 @@
     - if milestone_ref.present?
       .block.reference
         .sidebar-collapsed-icon.dont-change-state
-          = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left")
+          = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left", boundary: 'viewport')
         .cross-project-reference.hide-collapsed
           %span
             Reference:
             %cite{ title: milestone_ref }
               = milestone_ref
-          = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left")
+          = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left", boundary: 'viewport')
diff --git a/app/views/shared/milestones/_tabs.html.haml b/app/views/shared/milestones/_tabs.html.haml
index b95a4ea674d..55460acab8f 100644
--- a/app/views/shared/milestones/_tabs.html.haml
+++ b/app/views/shared/milestones/_tabs.html.haml
@@ -3,29 +3,29 @@
 .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
-  %ul.nav-links.scrolling-tabs.js-milestone-tabs
+  %ul.nav-links.scrolling-tabs.js-milestone-tabs.nav.nav-tabs
     - if issues_accessible
-      %li.active
-        = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
+      %li.nav-item
+        = link_to '#tab-issues', class: 'nav-link active', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
           Issues
-          %span.badge= milestone.issues_visible_to_user(current_user).size
-      %li
-        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
+          %span.badge.badge-pill= milestone.issues_visible_to_user(current_user).size
+      %li.nav-item
+        = link_to '#tab-merge-requests', class: 'nav-link', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
           Merge Requests
-          %span.badge= milestone.merge_requests.size
+          %span.badge.badge-pill= milestone.merge_requests.size
     - else
-      %li.active
-        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
+      %li.nav-item
+        = link_to '#tab-merge-requests', class: 'nav-link active', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
           Merge Requests
-          %span.badge= milestone.merge_requests.size
-    %li
-      = link_to '#tab-participants', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_tab_path(milestone) do
+          %span.badge.badge-pill= milestone.merge_requests.size
+    %li.nav-item
+      = link_to '#tab-participants', class: 'nav-link', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_tab_path(milestone) do
         Participants
-        %span.badge= milestone.participants.count
-    %li
-      = link_to '#tab-labels', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_tab_path(milestone) do
+        %span.badge.badge-pill= milestone.participants.count
+    %li.nav-item
+      = link_to '#tab-labels', class: 'nav-link', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_tab_path(milestone) do
         Labels
-        %span.badge= milestone.labels.count
+        %span.badge.badge-pill= milestone.labels.count
 
 - issues = milestone.sorted_issues(current_user)
 - show_project_name = local_assigns.fetch(:show_project_name, false)
diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml
index 6006ab8b43f..320e3788a0f 100644
--- a/app/views/shared/milestones/_top.html.haml
+++ b/app/views/shared/milestones/_top.html.haml
@@ -1,9 +1,11 @@
-- page_title milestone.title, "Milestones"
+- page_title milestone.title
+- @breadcrumb_link = dashboard_milestone_path(milestone.safe_title, title: milestone.title)
 
 - group = local_assigns[:group]
+- is_dynamic_milestone = milestone.legacy_group_milestone? || milestone.dashboard_milestone?
 
 .detail-page-header
-  %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" }
+  %a.btn.btn-default.btn-grouped.float-right.d-block.d-sm-none.js-sidebar-toggle{ href: "#" }
     = icon('angle-double-left')
 
   .status-box{ class: "status-box-#{milestone.closed? ? 'closed' : 'open'}" }
@@ -17,10 +19,10 @@
     Milestone #{milestone.title}
   - if milestone.due_date || milestone.start_date
     %span.creator
-      &middot;
+      &nbsp;&middot;
       = milestone_date_range(milestone)
   - if group
-    .pull-right
+    .float-right
       - if can?(current_user, :admin_milestones, group)
         - if milestone.group_milestone?
           = link_to edit_group_milestone_path(group, milestone), class: "btn btn btn-grouped" do
@@ -30,21 +32,25 @@
         - else
           = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen"
 
+= render 'shared/milestones/deprecation_message' if is_dynamic_milestone
+
 .detail-page-description.milestone-detail
   %h2.title
     = markdown_field(milestone, :title)
-  - if @milestone.group_milestone? && @milestone.description.present?
+  - if milestone.group_milestone? && milestone.description.present?
     %div
       .description
         .wiki
-          = markdown_field(@milestone, :description)
+          = markdown_field(milestone, :description)
 
 - if milestone.complete?(current_user) && milestone.active?
   .alert.alert-success.prepend-top-default
     - close_msg = group ? 'You may close the milestone now.' : 'Navigate to the project to close the milestone.'
     %span All issues for this milestone are closed. #{close_msg}
 
-- if @milestone.legacy_group_milestone? || @milestone.dashboard_milestone?
+= render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
+
+- if is_dynamic_milestone
   .table-holder
     %table.table
       %thead
@@ -67,7 +73,7 @@
               Open
           %td
             = ms.expires_at
-- elsif @milestone.group_milestone?
+- elsif milestone.group_milestone?
   %br
   View
   = link_to 'Issues', issues_group_path(@group, milestone_title: milestone.title)
diff --git a/app/views/shared/notes/_comment_button.html.haml b/app/views/shared/notes/_comment_button.html.haml
index 4b9af78bc1a..ed336df4e9d 100644
--- a/app/views/shared/notes/_comment_button.html.haml
+++ b/app/views/shared/notes/_comment_button.html.haml
@@ -1,6 +1,6 @@
 - noteable_name = @note.noteable.human_class_name
 
-.pull-left.btn-group.append-right-10.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown
+.float-left.btn-group.append-right-10.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown
   %input.btn.btn-nr.btn-create.comment-btn.js-comment-button.js-comment-submit-button{ type: 'submit', value: 'Comment' }
 
   - if @note.can_be_discussion_note?
diff --git a/app/views/shared/notes/_edit_form.html.haml b/app/views/shared/notes/_edit_form.html.haml
index 8923e5602a4..71a5b94e958 100644
--- a/app/views/shared/notes/_edit_form.html.haml
+++ b/app/views/shared/notes/_edit_form.html.haml
@@ -3,7 +3,7 @@
     = 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: { 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/zen', attr: 'note[note]', classes: 'note-textarea js-note-text js-task-list-field', placeholder: "Write a comment or drag your files here…"
       = render 'shared/notes/hints'
 
     .note-form-actions.clearfix
diff --git a/app/views/shared/notes/_form.html.haml b/app/views/shared/notes/_form.html.haml
index 71c0d740bc8..6b2715b47a7 100644
--- a/app/views/shared/notes/_form.html.haml
+++ b/app/views/shared/notes/_form.html.haml
@@ -29,7 +29,7 @@
       = render 'projects/zen', f: f,
         attr: :note,
         classes: 'note-textarea js-note-text',
-        placeholder: "Write a comment or drag your files here...",
+        placeholder: "Write a comment or drag your files here…",
         supports_quick_actions: supports_quick_actions,
         supports_autocomplete: supports_autocomplete
       = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
@@ -40,5 +40,5 @@
 
       = yield(:note_actions)
 
-      %a.btn.btn-cancel.js-note-discard{ role: "button", data: {cancel_text: "Cancel" } }
+      %a.btn.btn-cancel.js-note-discard{ role: "button", data: {cancel_text: "Discard draft" } }
         Discard draft
diff --git a/app/views/shared/notes/_hints.html.haml b/app/views/shared/notes/_hints.html.haml
index bc1ac3d8ac2..00eae553279 100644
--- a/app/views/shared/notes/_hints.html.haml
+++ b/app/views/shared/notes/_hints.html.haml
@@ -32,4 +32,4 @@
       = 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
+    %button.btn.btn-default.btn-sm.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 bf359774ead..d4e8f30e458 100644
--- a/app/views/shared/notes/_note.html.haml
+++ b/app/views/shared/notes/_note.html.haml
@@ -2,7 +2,7 @@
 - return if note.cross_reference_not_visible_for?(current_user)
 
 - show_image_comment_badge = local_assigns.fetch(:show_image_comment_badge, false)
-- note_editable = note_editable?(note)
+- note_editable = can?(current_user, :admin_note, note)
 - note_counter = local_assigns.fetch(:note_counter, 0)
 
 %li.timeline-entry{ id: dom_id(note),
@@ -25,7 +25,7 @@
             - elsif note_counter == 0
               - counter = badge_counter if local_assigns[:badge_counter]
               - badge_class = "hidden" if @fresh_discussion || counter.nil?
-              %span.badge{ class: badge_class }
+              %span.badge.badge-pill{ class: badge_class }
                 = counter
     .timeline-content
       .note-header
@@ -36,13 +36,12 @@
               = note.author.to_reference
           %span.note-headline-light
             %span.note-headline-meta
-              - unless note.system
-                commented
               - if note.system
                 %span.system-note-message
                   = markdown_field(note, :note)
-              %a{ href: "##{dom_id(note)}" }
-                = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
+              %span.system-note-separator
+                &middot;
+              %a.system-note-separator{ href: "##{dom_id(note)}" }= time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
         - unless note.system?
           .note-actions
             - if note.for_personal_snippet?
@@ -60,7 +59,7 @@
         .note-awards
           = render 'award_emoji/awards_block', awardable: note, inline: false
         - if note.system
-          .system-note-commit-list-toggler
+          .system-note-commit-list-toggler.hide
             Toggle commit list
             %i.fa.fa-angle-down
       - if note.attachment.url
diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml
index 1db7c4e67cf..e0832fd9136 100644
--- a/app/views/shared/notes/_notes_with_form.html.haml
+++ b/app/views/shared/notes/_notes_with_form.html.haml
@@ -1,19 +1,18 @@
 - issuable = @issue || @merge_request
 - discussion_locked = issuable&.discussion_locked?
 
-- unless has_vue_discussions_cookie?
-  %ul#notes-list.notes.main-notes-list.timeline
-    = render "shared/notes/notes"
+%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{ :class => ('hidden' if has_vue_discussions_cookie?) }
+  %ul.notes.notes-form.timeline
     %li.timeline-entry
       .timeline-entry-inner
         .flash-container.timeline-content
 
-        .timeline-icon.hidden-xs.hidden-sm
+        .timeline-icon.d-none.d-sm-none.d-md-block
           %a.author_link{ href: user_path(current_user) }
             = image_tag avatar_icon_for_user(current_user), alt: current_user.to_reference, class: 'avatar s40'
         .timeline-content.timeline-content-form
diff --git a/app/views/shared/notifications/_button.html.haml b/app/views/shared/notifications/_button.html.haml
index e99d8d0973f..09ddf732ada 100644
--- a/app/views/shared/notifications/_button.html.haml
+++ b/app/views/shared/notifications/_button.html.haml
@@ -6,14 +6,14 @@
       .js-notification-toggle-btns
         %div{ class: ("btn-group" if notification_setting.custom?) }
           - if notification_setting.custom?
-            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: "Notification setting", "aria-label" => "Notification setting: #{notification_title(notification_setting.level)}", data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting) } }
+            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: "Notification setting", "aria-label" => "Notification setting: #{notification_title(notification_setting.level)}", data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
               = icon("bell", class: "js-notification-loading")
               = notification_title(notification_setting.level)
             %button.btn.dropdown-toggle{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting) } }
               = icon('caret-down')
               .sr-only Toggle dropdown
           - else
-            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: "Notification setting", "aria-label" => "Notification setting: #{notification_title(notification_setting.level)}", data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting) } }
+            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: "Notification setting", "aria-label" => "Notification setting: #{notification_title(notification_setting.level)}", data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), display: 'static' } }
               = icon("bell", class: "js-notification-loading")
               = notification_title(notification_setting.level)
               = icon("caret-down")
diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml
index 9186c2ba9c9..1f6e8f98bbb 100644
--- a/app/views/shared/notifications/_custom_notifications.html.haml
+++ b/app/views/shared/notifications/_custom_notifications.html.haml
@@ -2,10 +2,10 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{ type: "button",  "aria-label": "close", data: { dismiss: "modal" } }
-          %span{ "aria-hidden": "true" } ×
         %h4#custom-notifications-title.modal-title
           #{ _('Custom notification events') }
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } &times;
 
       .modal-body
         .container-fluid
@@ -22,9 +22,9 @@
                 - NotificationSetting::EMAIL_EVENTS.each_with_index do |event, index|
                   - field_id = "#{notifications_menu_identifier("modal", notification_setting)}_notification_setting[#{event}]"
                   .form-group
-                    .checkbox{ class: ("prepend-top-0" if index == 0) }
-                      %label{ for: field_id }
-                        = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event", checked: notification_setting.public_send(event))
+                    .form-check{ class: ("prepend-top-0" if index == 0) }
+                      = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event form-check-input", checked: notification_setting.public_send(event))
+                      %label.form-check-label{ for: field_id }
                         %strong
                           = notification_event_name(event)
                           = icon("spinner spin", class: "custom-notification-event-loading")
diff --git a/app/views/shared/plugins/_index.html.haml b/app/views/shared/plugins/_index.html.haml
index fc643c3ecc2..7bcc54e7459 100644
--- a/app/views/shared/plugins/_index.html.haml
+++ b/app/views/shared/plugins/_index.html.haml
@@ -10,8 +10,8 @@
 
   .col-lg-8.append-bottom-default
     - if plugins.any?
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           Plugins (#{plugins.count})
         %ul.content-list
           - plugins.each do |file|
@@ -19,5 +19,5 @@
               .monospace
                 = File.basename(file)
     - else
-      %p.light-well.text-center
+      %p.card.bg-light.text-center
         No plugins found.
diff --git a/app/views/shared/projects/_dropdown.html.haml b/app/views/shared/projects/_dropdown.html.haml
index 3d917346f6b..98b258d9275 100644
--- a/app/views/shared/projects/_dropdown.html.haml
+++ b/app/views/shared/projects/_dropdown.html.haml
@@ -1,8 +1,8 @@
 - @sort ||= sort_value_latest_activity
 .dropdown.js-project-filter-dropdown-wrap
   - toggle_text = projects_sort_options_hash[@sort]
-  = dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { id: 'sort-projects-dropdown' })
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+  = dropdown_toggle(toggle_text, { toggle: 'dropdown', display: 'static' }, { id: 'sort-projects-dropdown' })
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
     %li.dropdown-header
       Sort by
     - projects_sort_options_hash.each do |value, title|
diff --git a/app/views/shared/projects/_edit_information.html.haml b/app/views/shared/projects/_edit_information.html.haml
index ec9dc8f62c2..9230e045a81 100644
--- a/app/views/shared/projects/_edit_information.html.haml
+++ b/app/views/shared/projects/_edit_information.html.haml
@@ -1,6 +1,6 @@
 - unless can?(current_user, :push_code, @project)
   .inline.prepend-left-10
-    - if @project.branch_allows_maintainer_push?(current_user, selected_branch)
+    - if @project.branch_allows_collaboration?(current_user, selected_branch)
       = commit_in_single_accessible_branch
     - else
       = commit_in_fork_help
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 0687f6d961d..88f0675f795 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -46,7 +46,7 @@
     .controls
       .prepend-top-0
         - if project.archived
-          %span.prepend-left-10.label.label-warning archived
+          %span.prepend-left-10.badge.badge-warning archived
         - if can?(current_user, :read_cross_project) && project.pipeline_status.has_status?
           %span.prepend-left-10
             = render_project_pipeline_status(project.pipeline_status)
diff --git a/app/views/shared/runners/_form.html.haml b/app/views/shared/runners/_form.html.haml
new file mode 100644
index 00000000000..0337680d79b
--- /dev/null
+++ b/app/views/shared/runners/_form.html.haml
@@ -0,0 +1,56 @@
+= form_for runner, url: runner_form_url do |f|
+  = form_errors(runner)
+  .form-group.row
+    = label :active, "Active", class: 'col-form-label col-sm-2'
+    .col-sm-10
+      .form-check
+        = f.check_box :active, { class: 'form-check-input' }
+        %span.light Paused Runners don't accept new jobs
+  .form-group.row
+    = label :protected, "Protected", class: 'col-form-label col-sm-2'
+    .col-sm-10
+      .form-check
+        = f.check_box :access_level, { class: 'form-check-input' }, 'ref_protected', 'not_protected'
+        %span.light This runner will only run on pipelines triggered on protected branches
+  .form-group.row
+    = label :run_untagged, 'Run untagged jobs', class: 'col-form-label col-sm-2'
+    .col-sm-10
+      .form-check
+        = f.check_box :run_untagged, { class: 'form-check-input' }
+        %span.light Indicates whether this runner can pick jobs without tags
+  - unless runner.group_type?
+    .form-group.row
+      = label :locked, _('Lock to current projects'), class: 'col-form-label col-sm-2'
+      .col-sm-10
+        .form-check
+          = f.check_box :locked, { class: 'form-check-input' }
+          %span.light= _('When a runner is locked, it cannot be assigned to other projects')
+  .form-group.row
+    = label_tag :token, class: 'col-form-label col-sm-2' do
+      Token
+    .col-sm-10
+      = f.text_field :token, class: 'form-control', readonly: true
+  .form-group.row
+    = label_tag :ip_address, class: 'col-form-label col-sm-2' do
+      IP Address
+    .col-sm-10
+      = f.text_field :ip_address, class: 'form-control', readonly: true
+  .form-group.row
+    = label_tag :description, class: 'col-form-label col-sm-2' do
+      Description
+    .col-sm-10
+      = f.text_field :description, class: 'form-control'
+  .form-group.row
+    = label_tag :maximum_timeout_human_readable, class: 'col-form-label col-sm-2' do
+      Maximum job timeout
+    .col-sm-10
+      = f.text_field :maximum_timeout_human_readable, class: 'form-control'
+      .form-text.text-muted This timeout will take precedence when lower than Project-defined timeout
+  .form-group.row
+    = label_tag :tag_list, class: 'col-form-label col-sm-2' do
+      Tags
+    .col-sm-10
+      = f.text_field :tag_list, value: runner.tag_list.sort.join(', '), class: 'form-control'
+      .form-text.text-muted You can setup jobs to only use Runners with specific tags. Separate tags with commas.
+  .form-actions
+    = f.submit 'Save changes', class: 'btn btn-save'
diff --git a/app/views/shared/runners/_runner_description.html.haml b/app/views/shared/runners/_runner_description.html.haml
new file mode 100644
index 00000000000..da5c032add5
--- /dev/null
+++ b/app/views/shared/runners/_runner_description.html.haml
@@ -0,0 +1,16 @@
+.light.prepend-top-default
+  %p
+    = _("A 'Runner' is a process which runs a job. You can setup as many Runners as you need.")
+    %br
+    = _('Runners can be placed on separate users, servers, and even on your local machine.')
+
+  %p
+    = _('Each Runner can be in one of the following states:')
+  %div
+    %ul
+      %li
+        %span.badge.badge-success active
+        = _('- Runner is active and can process any new jobs')
+      %li
+        %span.badge.badge-danger paused
+        = _('- Runner is paused and will not receive any new jobs')
diff --git a/app/views/projects/runners/show.html.haml b/app/views/shared/runners/show.html.haml
index 4e57f5f844d..96527fcb4f2 100644
--- a/app/views/projects/runners/show.html.haml
+++ b/app/views/shared/runners/show.html.haml
@@ -2,10 +2,13 @@
 
 %h3.page-title
   Runner ##{@runner.id}
-  .pull-right
+  .float-right
     - if @runner.shared?
       %span.runner-state.runner-state-shared
         Shared
+    - elsif @runner.group_type?
+      %span.runner-state.runner-state-shared
+        Group
     - else
       %span.runner-state.runner-state-specific
         Specific
@@ -21,18 +24,19 @@
       %td= @runner.active? ? 'Yes' : 'No'
     %tr
       %td Protected
-      %td= @runner.ref_protected? ? 'Yes' : 'No'
+      %td= @runner.active? ? _('Yes') : _('No')
     %tr
       %td Can run untagged jobs
       %td= @runner.run_untagged? ? 'Yes' : 'No'
-    %tr
-      %td Locked to this project
-      %td= @runner.locked? ? 'Yes' : 'No'
+    - unless @runner.group_type?
+      %tr
+        %td Locked to this project
+        %td= @runner.locked? ? 'Yes' : 'No'
     %tr
       %td Tags
       %td
         - @runner.tag_list.sort.each do |tag|
-          %span.label.label-primary
+          %span.badge.badge-primary
             = tag
     %tr
       %td Name
@@ -56,9 +60,12 @@
       %td Description
       %td= @runner.description
     %tr
+      %td Maximum job timeout
+      %td= @runner.maximum_timeout_human_readable
+    %tr
       %td Last contact
       %td
         - if @runner.contacted_at
-          #{time_ago_in_words(@runner.contacted_at)} ago
+          = time_ago_with_tooltip @runner.contacted_at
         - else
           Never
diff --git a/app/views/shared/snippets/_blob.html.haml b/app/views/shared/snippets/_blob.html.haml
index 11f0fa7c49f..2132fcbccc5 100644
--- a/app/views/shared/snippets/_blob.html.haml
+++ b/app/views/shared/snippets/_blob.html.haml
@@ -2,7 +2,7 @@
 .js-file-title.file-title-flex-parent
   = render 'projects/blob/header_content', blob: blob
 
-  .file-actions.hidden-xs
+  .file-actions.d-none.d-sm-block
     = render 'projects/blob/viewer_switcher', blob: blob
 
     .btn-group{ role: "group" }<
diff --git a/app/views/shared/snippets/_embed.html.haml b/app/views/shared/snippets/_embed.html.haml
new file mode 100644
index 00000000000..36f56fbad1a
--- /dev/null
+++ b/app/views/shared/snippets/_embed.html.haml
@@ -0,0 +1,24 @@
+- blob = @snippet.blob
+.gitlab-embed-snippets
+  .js-file-title.file-title-flex-parent
+    .file-header-content
+      = external_snippet_icon('doc_text')
+
+      %strong.file-title-name
+        %a.gitlab-embedded-snippets-title{ href: url_for(only_path: false, overwrite_params: nil) }
+          = blob.name
+
+      %small
+        = number_to_human_size(blob.raw_size)
+      %a.gitlab-logo{ href: url_for(only_path: false, overwrite_params: nil), title: 'view on gitlab' }
+        on &nbsp;
+        %span.logo-text
+          GitLab
+
+    .file-actions.d-none.d-sm-block
+      .btn-group{ role: "group" }<
+        = embedded_snippet_raw_button
+
+        = embedded_snippet_download_button
+  %article.file-holder.snippet-file-content
+    = render 'projects/blob/viewer', viewer: @snippet.blob.simple_viewer, load_async: false, external_embed: true
diff --git a/app/views/shared/snippets/_form.html.haml b/app/views/shared/snippets/_form.html.haml
index c75c882a693..858adc8be37 100644
--- a/app/views/shared/snippets/_form.html.haml
+++ b/app/views/shared/snippets/_form.html.haml
@@ -2,11 +2,11 @@
   = page_specific_javascript_tag('lib/ace.js')
 
 .snippet-form-holder
-  = form_for @snippet, url: url, html: { class: "form-horizontal snippet-form js-requires-input js-quick-submit common-note-form" } do |f|
+  = form_for @snippet, url: url, html: { class: "snippet-form js-requires-input js-quick-submit common-note-form" } do |f|
     = form_errors(@snippet)
 
-    .form-group
-      = f.label :title, class: 'control-label'
+    .form-group.row
+      = f.label :title, class: 'col-form-label col-sm-2'
       .col-sm-10
         = f.text_field :title, class: 'form-control', required: true, autofocus: true
 
@@ -15,8 +15,8 @@
     = render 'shared/visibility_level', f: f, visibility_level: @snippet.visibility_level, can_change_visibility_level: true, form_model: @snippet
 
     .file-editor
-      .form-group
-        = f.label :file_name, "File", class: 'control-label'
+      .form-group.row
+        = f.label :file_name, "File", class: 'col-form-label col-sm-2'
         .col-sm-10
           .file-holder.snippet
             .js-file-title.file-title
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index 12df79a28c7..828ec870dc0 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -7,7 +7,7 @@
     %span.creator
       Authored
       = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
-      by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")}
+      by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "d-none d-sm-inline")}
 
   .detail-page-header-actions
     - if @snippet.project_id?
@@ -19,11 +19,31 @@
   %h2.snippet-title.prepend-top-0.append-bottom-0
     = markdown_field(@snippet, :title)
 
-  - if @snippet.updated_at != @snippet.created_at
-    = edited_time_ago_with_tooltip(@snippet, placement: 'bottom', html_class: 'snippet-edited-ago', exclude_author: true)
   - if @snippet.description.present?
     .description
       .wiki
         = markdown_field(@snippet, :description)
       %textarea.hidden.js-task-list-field
         = @snippet.description
+
+  - if @snippet.updated_at != @snippet.created_at
+    = edited_time_ago_with_tooltip(@snippet, placement: 'bottom', html_class: 'snippet-edited-ago', exclude_author: true)
+
+  - if public_snippet?
+    .embed-snippet
+      .input-group
+        .input-group-prepend
+          %button.btn.btn-svg.embed-toggle.input-group-text{ 'data-toggle': 'dropdown', type: 'button' }
+            %span.js-embed-action= _("Embed")
+            = sprite_icon('angle-down', size: 12, css_class: 'caret-down')
+          %ul.dropdown-menu.dropdown-menu-selectable.embed-toggle-list
+            %li
+              %button.js-embed-btn.btn.btn-transparent.is-active{ type: 'button' }
+                %strong.embed-toggle-list-item= _("Embed")
+            %li
+              %button.js-share-btn.btn.btn-transparent{ type: 'button' }
+                %strong.embed-toggle-list-item= _("Share")
+        %input.js-snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed }
+        .input-group-append
+          = clipboard_button(title: s_('Copy to clipboard'), class: 'js-clipboard-btn snippet-clipboard-btn btn btn-default', target: '.js-snippet-url-area')
+    .clearfix
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index 3acec88c2e3..5069e2e4ca6 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -1,13 +1,13 @@
 - link_project = local_assigns.fetch(:link_project, false)
 
 %li.snippet-row
-  = image_tag avatar_icon_for_user(snippet.author), class: "avatar s40 hidden-xs", alt: ''
+  = image_tag avatar_icon_for_user(snippet.author), class: "avatar s40 d-none d-sm-block", alt: ''
 
   .title
     = link_to reliable_snippet_path(snippet) do
       = snippet.title
     - if snippet.file_name
-      %span.snippet-filename.monospace.hidden-xs
+      %span.snippet-filename.monospace.d-none.d-sm-inline-block
         = snippet.file_name
 
     %ul.controls
@@ -28,10 +28,10 @@
     = link_to user_snippets_path(snippet.author) do
       = snippet.author_name
     - if link_project && snippet.project_id?
-      %span.hidden-xs
+      %span.d-none.d-sm-inline-block
         in
         = link_to project_path(snippet.project) do
           = snippet.project.full_name
 
-    .pull-right.snippet-updated-at
+    .float-right.snippet-updated-at
       %span updated #{time_ago_with_tooltip(snippet.updated_at, placement: 'bottom')}
diff --git a/app/views/shared/snippets/show.js.haml b/app/views/shared/snippets/show.js.haml
new file mode 100644
index 00000000000..a9af732bbb5
--- /dev/null
+++ b/app/views/shared/snippets/show.js.haml
@@ -0,0 +1,2 @@
+document.write('#{escape_javascript(stylesheet_link_tag "#{stylesheet_url 'snippets'}")}');
+document.write('#{escape_javascript(render 'shared/snippets/embed')}');
diff --git a/app/views/shared/tokens/_scopes_form.html.haml b/app/views/shared/tokens/_scopes_form.html.haml
index ae437dd16d6..e5c82962f82 100644
--- a/app/views/shared/tokens/_scopes_form.html.haml
+++ b/app/views/shared/tokens/_scopes_form.html.haml
@@ -5,6 +5,5 @@
 - scopes.each do |scope|
   %fieldset
     = check_box_tag "#{prefix}[scopes][]", scope, token.scopes.include?(scope), id: "#{prefix}_scopes_#{scope}"
-    = label_tag ("#{prefix}_scopes_#{scope}"), scope
-    %span= t(scope, scope: [:doorkeeper, :scopes])
+    = label_tag ("#{prefix}_scopes_#{scope}"), scope, class: "label-light"
     .scope-description= t scope, scope: [:doorkeeper, :scope_desc]
diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml
index ad4d39b4aa1..660769fa50d 100644
--- a/app/views/shared/web_hooks/_form.html.haml
+++ b/app/views/shared/web_hooks/_form.html.haml
@@ -6,77 +6,74 @@
 .form-group
   = form.label :token, 'Secret Token', class: 'label-light'
   = form.text_field :token, class: 'form-control', placeholder: ''
-  %p.help-block
+  %p.form-text.text-muted
     Use this token to validate received payloads. It will be sent with the request in the X-Gitlab-Token HTTP header.
 .form-group
   = form.label :url, 'Trigger', class: 'label-light'
-  %ul.list-unstyled
+  %ul.list-unstyled.prepend-left-20
     %li
-      = 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
+      = form.check_box :push_events, class: 'form-check-input'
+      = form.label :push_events, class: 'list-label form-check-label ml-1' do
+        %strong Push events
+      %p.light.ml-1
+        This URL will be triggered by a push to the repository
     %li
-      = 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
+      = form.check_box :tag_push_events, class: 'form-check-input'
+      = form.label :tag_push_events, class: 'list-label form-check-label ml-1' do
+        %strong Tag push events
+      %p.light.ml-1
+        This URL will be triggered when a new tag is pushed to the repository
     %li
-      = form.check_box :note_events, class: 'pull-left'
-      .prepend-left-20
-        = form.label :note_events, class: 'list-label' do
-          %strong Comments
-        %p.light
-          This URL will be triggered when someone adds a comment
+      = form.check_box :note_events, class: 'form-check-input'
+      = form.label :note_events, class: 'list-label form-check-label ml-1' do
+        %strong Comments
+      %p.light.ml-1
+        This URL will be triggered when someone adds a comment
     %li
-      = form.check_box :issues_events, class: 'pull-left'
-      .prepend-left-20
-        = form.label :issues_events, class: 'list-label' do
-          %strong Issues events
-        %p.light
-          This URL will be triggered when an issue is created/updated/merged
+      = form.check_box :confidential_note_events, class: 'form-check-input'
+      = form.label :confidential_note_events, class: 'list-label form-check-label ml-1' do
+        %strong Confidential Comments
+      %p.light.ml-1
+        This URL will be triggered when someone adds a comment on a confidential issue
     %li
-      = form.check_box :confidential_issues_events, class: 'pull-left'
-      .prepend-left-20
-        = form.label :confidential_issues_events, class: 'list-label' do
-          %strong Confidential Issues events
-        %p.light
-          This URL will be triggered when a confidential issue is created/updated/merged
+      = form.check_box :issues_events, class: 'form-check-input'
+      = form.label :issues_events, class: 'list-label form-check-label ml-1' do
+        %strong Issues events
+      %p.light.ml-1
+        This URL will be triggered when an issue is created/updated/merged
     %li
-      = form.check_box :merge_requests_events, class: 'pull-left'
-      .prepend-left-20
-        = form.label :merge_requests_events, class: 'list-label' do
-          %strong Merge request events
-        %p.light
-          This URL will be triggered when a merge request is created/updated/merged
+      = form.check_box :confidential_issues_events, class: 'form-check-input'
+      = form.label :confidential_issues_events, class: 'list-label form-check-label ml-1' do
+        %strong Confidential Issues events
+      %p.light.ml-1
+        This URL will be triggered when a confidential issue is created/updated/merged
     %li
-      = form.check_box :job_events, class: 'pull-left'
-      .prepend-left-20
-        = form.label :job_events, class: 'list-label' do
-          %strong Job events
-        %p.light
-          This URL will be triggered when the job status changes
+      = form.check_box :merge_requests_events, class: 'form-check-input'
+      = form.label :merge_requests_events, class: 'list-label form-check-label ml-1' do
+        %strong Merge request events
+      %p.light.ml-1
+        This URL will be triggered when a merge request is created/updated/merged
     %li
-      = form.check_box :pipeline_events, class: 'pull-left'
-      .prepend-left-20
-        = form.label :pipeline_events, class: 'list-label' do
-          %strong Pipeline events
-        %p.light
-          This URL will be triggered when the pipeline status changes
+      = form.check_box :job_events, class: 'form-check-input'
+      = form.label :job_events, class: 'list-label form-check-label ml-1' do
+        %strong Job events
+      %p.light.ml-1
+        This URL will be triggered when the job status changes
     %li
-      = form.check_box :wiki_page_events, class: 'pull-left'
-      .prepend-left-20
-        = form.label :wiki_page_events, class: 'list-label' do
-          %strong Wiki Page events
-        %p.light
-          This URL will be triggered when a wiki page is created/updated
+      = form.check_box :pipeline_events, class: 'form-check-input'
+      = form.label :pipeline_events, class: 'list-label form-check-label ml-1' do
+        %strong Pipeline events
+      %p.light.ml-1
+        This URL will be triggered when the pipeline status changes
+    %li
+      = form.check_box :wiki_page_events, class: 'form-check-input'
+      = form.label :wiki_page_events, class: 'list-label form-check-label ml-1' do
+        %strong Wiki Page events
+      %p.light.ml-1
+        This URL will be triggered when a wiki page is created/updated
 .form-group
   = form.label :enable_ssl_verification, 'SSL verification', class: 'label-light checkbox'
-  .checkbox
-    = form.label :enable_ssl_verification do
-      = form.check_box :enable_ssl_verification
+  .form-check
+    = form.check_box :enable_ssl_verification, class: 'form-check-input'
+    = form.label :enable_ssl_verification, class: 'form-check-label ml-1' do
       %strong Enable SSL verification
diff --git a/app/views/shared/web_hooks/_test_button.html.haml b/app/views/shared/web_hooks/_test_button.html.haml
index cf1d5e061c6..5ece8b1d4c7 100644
--- a/app/views/shared/web_hooks/_test_button.html.haml
+++ b/app/views/shared/web_hooks/_test_button.html.haml
@@ -6,7 +6,7 @@
   %button.btn{ 'data-toggle' => 'dropdown', class: button_class }
     Test
     = icon('caret-down')
-  %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
+  %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
     - triggers.each_value do |event|
       %li
         = link_to_test_hook(hook, event)
diff --git a/app/views/sherlock/file_samples/show.html.haml b/app/views/sherlock/file_samples/show.html.haml
index 1a6e2542dc1..7255d352775 100644
--- a/app/views/sherlock/file_samples/show.html.haml
+++ b/app/views/sherlock/file_samples/show.html.haml
@@ -4,7 +4,7 @@
 - header_title t('sherlock.title'), sherlock_transactions_path
 
 .row-content-block
-  .pull-right
+  .float-right
     = link_to(sherlock_transaction_path(@transaction), class: 'btn') do
       %i.fa.fa-arrow-left
       = t('sherlock.transaction')
diff --git a/app/views/sherlock/queries/_backtrace.html.haml b/app/views/sherlock/queries/_backtrace.html.haml
index 30e956e5f40..38b4d2c6102 100644
--- a/app/views/sherlock/queries/_backtrace.html.haml
+++ b/app/views/sherlock/queries/_backtrace.html.haml
@@ -1,9 +1,9 @@
 .prepend-top-default
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.application_backtrace')
-    %ul.well-list
+    %ul.content-list
       - @query.application_backtrace.each do |location|
         %li
           %strong
@@ -15,11 +15,11 @@
             = t('sherlock.line')
             = location.line
 
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.full_backtrace')
-    %ul.well-list
+    %ul.content-list
       - @query.backtrace.each do |location|
         %li
           - if location.application?
diff --git a/app/views/sherlock/queries/_general.html.haml b/app/views/sherlock/queries/_general.html.haml
index 5a447f791dc..37747faed62 100644
--- a/app/views/sherlock/queries/_general.html.haml
+++ b/app/views/sherlock/queries/_general.html.haml
@@ -1,9 +1,9 @@
 .prepend-top-default
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.general')
-    %ul.well-list
+    %ul.content-list
       %li
         %span.light
           #{t('sherlock.time')}:
@@ -23,31 +23,31 @@
           = t('sherlock.line')
           = frame.line
 
-  .panel.panel-default
-    .panel-heading
-      .pull-right
-        %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button }
+  .card
+    .card-header
+      .float-right
+        %button.js-clipboard-trigger.btn.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
           %i.fa.fa-clipboard
         %pre.hidden
           = @query.formatted_query
       %strong
         = t('sherlock.query')
-    %ul.well-list
+    %ul.content-list
       %li
         .code.js-syntax-highlight.sherlock-code
           :preserve
             #{highlight("#{@query.id}.sql", @query.formatted_query)}
 
-  .panel.panel-default
-    .panel-heading
-      .pull-right
-        %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button }
+  .card
+    .card-header
+      .float-right
+        %button.js-clipboard-trigger.btn.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
           %i.fa.fa-clipboard
         %pre.hidden
           = @query.explain
       %strong
         = t('sherlock.query_plan')
-    %ul.well-list
+    %ul.content-list
       %li
         .code.js-syntax-highlight.sherlock-code
           %pre
diff --git a/app/views/sherlock/queries/show.html.haml b/app/views/sherlock/queries/show.html.haml
index c45da6ee9a4..413130a2907 100644
--- a/app/views/sherlock/queries/show.html.haml
+++ b/app/views/sherlock/queries/show.html.haml
@@ -1,7 +1,7 @@
 - page_title t('sherlock.title'), t('sherlock.transaction'), t('sherlock.query')
 - header_title t('sherlock.title'), sherlock_transactions_path
 
-%ul.nav-links
+%ul.nav-links.nav.nav-tabs
   %li.active
     %a{ href: "#tab-general", data: { toggle: "tab" } }
       = t('sherlock.general')
@@ -10,7 +10,7 @@
       = t('sherlock.backtrace')
 
 .row-content-block
-  .pull-right
+  .float-right
     = link_to(sherlock_transaction_path(@transaction), class: 'btn') do
       %i.fa.fa-arrow-left
       = t('sherlock.transaction')
diff --git a/app/views/sherlock/transactions/_file_samples.html.haml b/app/views/sherlock/transactions/_file_samples.html.haml
index 4349c9b7ace..5b3448605f2 100644
--- a/app/views/sherlock/transactions/_file_samples.html.haml
+++ b/app/views/sherlock/transactions/_file_samples.html.haml
@@ -21,4 +21,4 @@
             %td
               = link_to(t('sherlock.view'),
                 sherlock_transaction_file_sample_path(@transaction, sample),
-                class: 'btn btn-xs')
+                class: 'btn btn-sm')
diff --git a/app/views/sherlock/transactions/_general.html.haml b/app/views/sherlock/transactions/_general.html.haml
index 8533b130da6..9c028b5c741 100644
--- a/app/views/sherlock/transactions/_general.html.haml
+++ b/app/views/sherlock/transactions/_general.html.haml
@@ -1,9 +1,9 @@
 .prepend-top-default
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.general')
-    %ul.well-list
+    %ul.content-list
       %li
         %span.light
           #{t('sherlock.id')}:
@@ -35,5 +35,4 @@
         %span.light
           #{t('sherlock.finished_at')}:
         %strong
-          = time_ago_in_words(@transaction.finished_at)
-          = t('sherlock.ago')
+          = time_ago_with_tooltip @transaction.finished_at
diff --git a/app/views/sherlock/transactions/_queries.html.haml b/app/views/sherlock/transactions/_queries.html.haml
index b8d93e9ff45..c1ec4b91bb6 100644
--- a/app/views/sherlock/transactions/_queries.html.haml
+++ b/app/views/sherlock/transactions/_queries.html.haml
@@ -21,4 +21,4 @@
             %td
               = link_to(t('sherlock.view'),
                 sherlock_transaction_query_path(@transaction, query),
-                class: 'btn btn-xs')
+                class: 'btn btn-sm')
diff --git a/app/views/sherlock/transactions/index.html.haml b/app/views/sherlock/transactions/index.html.haml
index bc05659dfa8..4d9df01ae31 100644
--- a/app/views/sherlock/transactions/index.html.haml
+++ b/app/views/sherlock/transactions/index.html.haml
@@ -2,7 +2,7 @@
 - header_title t('sherlock.title'), sherlock_transactions_path
 
 .row-content-block
-  .pull-right
+  .float-right
     = link_to(destroy_all_sherlock_transactions_path,
       class: 'btn btn-danger',
       method: :delete) do
@@ -35,8 +35,7 @@
               = t('sherlock.seconds')
             %td= trans.queries.length
             %td
-              = time_ago_in_words(trans.finished_at)
-              = t('sherlock.ago')
+              = time_ago_with_tooltip trans.finished_at
             %td
-              = link_to(sherlock_transaction_path(trans), class: 'btn btn-xs') do
+              = link_to(sherlock_transaction_path(trans), class: 'btn btn-sm') do
                 = t('sherlock.view')
diff --git a/app/views/sherlock/transactions/show.html.haml b/app/views/sherlock/transactions/show.html.haml
index eab91e8fbe4..565b337d446 100644
--- a/app/views/sherlock/transactions/show.html.haml
+++ b/app/views/sherlock/transactions/show.html.haml
@@ -1,23 +1,23 @@
 - page_title t('sherlock.title'), t('sherlock.transaction')
 - header_title t('sherlock.title'), sherlock_transactions_path
 
-%ul.nav-links
+%ul.nav-links.nav.nav-tabs
   %li.active
     %a{ href: "#tab-general", data: { toggle: "tab" } }
       = t('sherlock.general')
   %li
     %a{ href: "#tab-queries", data: { toggle: "tab" } }
       = t('sherlock.queries')
-      %span.badge
+      %span.badge.badge-pill
         #{@transaction.queries.length}
   %li
     %a{ href: "#tab-file-samples", data: { toggle: "tab" } }
       = t('sherlock.file_samples')
-      %span.badge
+      %span.badge.badge-pill
         #{@transaction.file_samples.length}
 
 .row-content-block
-  .pull-right
+  .float-right
     = link_to(sherlock_transactions_path, class: 'btn') do
       %i.fa.fa-arrow-left
       = t('sherlock.all_transactions')
diff --git a/app/views/snippets/_actions.html.haml b/app/views/snippets/_actions.html.haml
index a7f118d3f7d..ae69d0d07c7 100644
--- a/app/views/snippets/_actions.html.haml
+++ b/app/views/snippets/_actions.html.haml
@@ -1,6 +1,6 @@
 - return unless current_user
 
-.hidden-xs
+.d-none.d-sm-block
   - if can?(current_user, :update_personal_snippet, @snippet)
     = link_to edit_snippet_path(@snippet), class: "btn btn-grouped" do
       Edit
@@ -11,7 +11,7 @@
     New snippet
   - if @snippet.submittable_as_spam_by?(current_user)
     = link_to 'Submit as spam', mark_as_spam_snippet_path(@snippet), method: :post, class: 'btn btn-grouped btn-spam', title: 'Submit as spam'
-.visible-xs-block.dropdown
+.d-block.d-sm-none.dropdown
   %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
     Options
     = icon('caret-down')
diff --git a/app/views/snippets/_snippets_scope_menu.html.haml b/app/views/snippets/_snippets_scope_menu.html.haml
index 65aa4fbc757..dc4b0fd9ba0 100644
--- a/app/views/snippets/_snippets_scope_menu.html.haml
+++ b/app/views/snippets/_snippets_scope_menu.html.haml
@@ -1,11 +1,11 @@
 - subject = local_assigns.fetch(:subject, current_user)
 - include_private = local_assigns.fetch(:include_private, false)
 
-.nav-links.snippet-scope-menu.mobile-separator
+.nav-links.snippet-scope-menu.mobile-separator.nav.nav-tabs
   %li{ class: active_when(params[:scope].nil?) }
     = link_to subject_snippets_path(subject) do
       All
-      %span.badge
+      %span.badge.badge-pill
         - if include_private
           = subject.snippets.count
         - else
@@ -15,17 +15,17 @@
     %li{ class: active_when(params[:scope] == "are_private") }
       = link_to subject_snippets_path(subject, scope: 'are_private') do
         Private
-        %span.badge
+        %span.badge.badge-pill
           = subject.snippets.are_private.count
 
   %li{ class: active_when(params[:scope] == "are_internal") }
     = link_to subject_snippets_path(subject, scope: 'are_internal') do
       Internal
-      %span.badge
+      %span.badge.badge-pill
         = subject.snippets.are_internal.count
 
   %li{ class: active_when(params[:scope] == "are_public") }
     = link_to subject_snippets_path(subject, scope: 'are_public') do
       Public
-      %span.badge
+      %span.badge.badge-pill
         = subject.snippets.are_public.count
diff --git a/app/views/snippets/index.html.haml b/app/views/snippets/index.html.haml
index 7e4918a6085..9b4a7dbe68d 100644
--- a/app/views/snippets/index.html.haml
+++ b/app/views/snippets/index.html.haml
@@ -1,12 +1,12 @@
 - page_title "By #{@user.name}", "Snippets"
 
 %ol.breadcrumb
-  %li
+  %li.breadcrumb-item
     = link_to snippets_path do
       Snippets
-  %li
+  %li.breadcrumb-item
     = @user.name
-  .pull-right.hidden-xs
+  .float-right.d-none.d-sm-block
     = link_to user_path(@user) do
       #{@user.name} profile page
 
diff --git a/app/views/u2f/_authenticate.html.haml b/app/views/u2f/_authenticate.html.haml
index 7eb221620ad..1c788b9a737 100644
--- a/app/views/u2f/_authenticate.html.haml
+++ b/app/views/u2f/_authenticate.html.haml
@@ -2,9 +2,6 @@
 %a.btn.btn-block.btn-info#js-login-2fa-device{ href: '#' } Sign in via 2FA code
 
 -# haml-lint:disable InlineJavaScript
-%script#js-authenticate-u2f-not-supported{ type: "text/template" }
-  %p Your browser doesn't support U2F. Please use Google Chrome desktop (version 41 or newer).
-
 %script#js-authenticate-u2f-in-progress{ type: "text/template" }
   %p Trying to communicate with your device. Plug it in (if you haven't already) and press the button on the device now.
 
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 4bf01ecb48c..b2ec7166832 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -12,7 +12,7 @@
   .cover-block.user-cover-block.top-area
     .cover-controls
       - if @user == current_user
-        = link_to profile_path, class: 'btn btn-gray has-tooltip', title: 'Edit profile', 'aria-label': 'Edit profile' do
+        = link_to profile_path, class: 'btn btn-default has-tooltip', title: 'Edit profile', 'aria-label': 'Edit profile' do
           = icon('pencil')
       - elsif current_user
         - if @user.abuse_report
@@ -20,13 +20,13 @@
             data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } }
             = icon('exclamation-circle')
         - else
-          = link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referrer), class: 'btn btn-gray',
+          = link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referrer), class: 'btn',
             title: 'Report abuse', data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
             = icon('exclamation-circle')
-      = link_to user_path(@user, rss_url_options), class: 'btn btn-gray has-tooltip', title: 'Subscribe', 'aria-label': 'Subscribe' do
+      = link_to user_path(@user, rss_url_options), class: 'btn btn-default has-tooltip', title: 'Subscribe', 'aria-label': 'Subscribe' do
         = icon('rss')
       - if current_user && current_user.admin?
-        = link_to [:admin, @user], class: 'btn btn-gray', title: 'View user in admin area',
+        = link_to [:admin, @user], class: 'btn btn-default', title: 'View user in admin area',
           data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
           = icon('users')
 
@@ -35,7 +35,7 @@
         = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
           = image_tag avatar_icon_for_user(@user, 90), class: "avatar s90", alt: ''
 
-      .user-info
+      .user-info.prepend-left-default.append-right-default
         .cover-title
           = @user.name
 
@@ -81,7 +81,7 @@
     .scrolling-tabs-container
       .fade-left= icon('angle-left')
       .fade-right= icon('angle-right')
-      %ul.nav-links.user-profile-nav.scrolling-tabs
+      %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs
         - if profile_tab?(:activity)
           %li.js-activity-tab
             = link_to user_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
@@ -107,7 +107,7 @@
     .tab-content
       - if profile_tab?(:activity)
         #activity.tab-pane
-          .row-content-block.calender-block.white.second-block.hidden-xs
+          .row-content-block.calender-block.white.second-block.d-none.d-sm-block
             .user-calendar{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } }
               %h4.center.light
                 %i.fa.fa-spinner.fa-spin
diff --git a/app/views/users/terms/index.html.haml b/app/views/users/terms/index.html.haml
new file mode 100644
index 00000000000..a869cf9cdee
--- /dev/null
+++ b/app/views/users/terms/index.html.haml
@@ -0,0 +1,18 @@
+- redirect_params = { redirect: @redirect } if @redirect
+
+.card-body.rendered-terms
+  = markdown_field(@term, :terms)
+- if current_user
+  .card-footer.footer-block.clearfix
+    - if can?(current_user, :accept_terms, @term)
+      .float-right
+        = button_to accept_term_path(@term, redirect_params), class: 'btn btn-success prepend-left-8' do
+          = _('Accept terms')
+    - else
+      .pull-right
+        = link_to root_path, class: 'btn btn-success prepend-left-8' do
+          = _('Continue')
+    - if can?(current_user, :decline_terms, @term)
+      .float-right
+        = button_to decline_term_path(@term, redirect_params), class: 'btn btn-default prepend-left-8' do
+          =  _('Decline and sign out')
diff --git a/app/workers/admin_email_worker.rb b/app/workers/admin_email_worker.rb
index bec0a003a1c..06324575ffc 100644
--- a/app/workers/admin_email_worker.rb
+++ b/app/workers/admin_email_worker.rb
@@ -1,8 +1,16 @@
+# frozen_string_literal: true
+
 class AdminEmailWorker
   include ApplicationWorker
   include CronjobQueue
 
   def perform
+    send_repository_check_mail if Gitlab::CurrentSettings.repository_checks_enabled
+  end
+
+  private
+
+  def send_repository_check_mail
     repository_check_failed_count = Project.where(last_repository_check_failed: true).count
     return if repository_check_failed_count.zero?
 
diff --git a/app/workers/all_queues.yml b/app/workers/all_queues.yml
index f65e8385ac8..026f756582d 100644
--- a/app/workers/all_queues.yml
+++ b/app/workers/all_queues.yml
@@ -17,33 +17,44 @@
 - cronjob:stuck_ci_jobs
 - cronjob:stuck_import_jobs
 - cronjob:stuck_merge_jobs
+- cronjob:ci_archive_traces_cron
 - cronjob:trending_projects
+- cronjob:issue_due_scheduler
 
 - gcp_cluster:cluster_install_app
 - gcp_cluster:cluster_provision
 - gcp_cluster:cluster_wait_for_app_installation
 - gcp_cluster:wait_for_cluster_creation
-- gcp_cluster:check_gcp_project_billing
 - gcp_cluster:cluster_wait_for_ingress_ip_address
 
 - github_import_advance_stage
 - github_importer:github_import_import_diff_note
 - github_importer:github_import_import_issue
 - github_importer:github_import_import_note
+- github_importer:github_import_import_lfs_object
 - github_importer:github_import_import_pull_request
 - github_importer:github_import_refresh_import_jid
 - github_importer:github_import_stage_finish_import
 - github_importer:github_import_stage_import_base_data
 - github_importer:github_import_stage_import_issues_and_diff_notes
 - github_importer:github_import_stage_import_notes
+- github_importer:github_import_stage_import_lfs_objects
 - github_importer:github_import_stage_import_pull_requests
 - github_importer:github_import_stage_import_repository
 
+- mail_scheduler:mail_scheduler_issue_due
+- mail_scheduler:mail_scheduler_notification_service
+
+- object_storage_upload
+- object_storage:object_storage_background_move
+- object_storage:object_storage_migrate_uploads
+
 - pipeline_cache:expire_job_cache
 - pipeline_cache:expire_pipeline_cache
 - pipeline_creation:create_pipeline
 - pipeline_creation:run_pipeline_schedule
 - pipeline_background:archive_trace
+- pipeline_background:ci_build_trace_chunk_flush
 - pipeline_default:build_coverage
 - pipeline_default:build_trace_sections
 - pipeline_default:pipeline_metrics
@@ -98,9 +109,13 @@
 - rebase
 - repository_fork
 - repository_import
+- repository_remove_remote
 - storage_migrator
 - system_hook_push
 - update_merge_requests
 - update_user_activity
 - upload_checksum
 - web_hook
+- repository_update_remote_mirror
+- create_note_diff_file
+- delete_diff_files
diff --git a/app/workers/archive_trace_worker.rb b/app/workers/archive_trace_worker.rb
index dea7425ad88..9169f21af2a 100644
--- a/app/workers/archive_trace_worker.rb
+++ b/app/workers/archive_trace_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ArchiveTraceWorker
   include ApplicationWorker
   include PipelineBackgroundQueue
diff --git a/app/workers/authorized_projects_worker.rb b/app/workers/authorized_projects_worker.rb
index d7e24491516..dd62bb0f33d 100644
--- a/app/workers/authorized_projects_worker.rb
+++ b/app/workers/authorized_projects_worker.rb
@@ -1,7 +1,17 @@
+# frozen_string_literal: true
+
 class AuthorizedProjectsWorker
   include ApplicationWorker
   prepend WaitableWorker
 
+  # This is a workaround for a Ruby 2.3.7 bug. rspec-mocks cannot restore the
+  # visibility of prepended modules. See https://github.com/rspec/rspec-mocks/issues/1231
+  # for more details.
+  if Rails.env.test?
+    def self.bulk_perform_and_wait(args_list, timeout: 10)
+    end
+  end
+
   def perform(user_id)
     user = User.find_by(id: user_id)
 
diff --git a/app/workers/background_migration_worker.rb b/app/workers/background_migration_worker.rb
index 376703f6319..eaec7d48f35 100644
--- a/app/workers/background_migration_worker.rb
+++ b/app/workers/background_migration_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class BackgroundMigrationWorker
   include ApplicationWorker
 
diff --git a/app/workers/build_coverage_worker.rb b/app/workers/build_coverage_worker.rb
index 62b212c79be..53d77dc4524 100644
--- a/app/workers/build_coverage_worker.rb
+++ b/app/workers/build_coverage_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class BuildCoverageWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/build_finished_worker.rb b/app/workers/build_finished_worker.rb
index 46f1ac09915..9dc2c7f3601 100644
--- a/app/workers/build_finished_worker.rb
+++ b/app/workers/build_finished_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class BuildFinishedWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/build_hooks_worker.rb b/app/workers/build_hooks_worker.rb
index cbfca8c342c..f1f71dc589c 100644
--- a/app/workers/build_hooks_worker.rb
+++ b/app/workers/build_hooks_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class BuildHooksWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/build_queue_worker.rb b/app/workers/build_queue_worker.rb
index e4f4e6c1d9e..1b3f1fd3c2a 100644
--- a/app/workers/build_queue_worker.rb
+++ b/app/workers/build_queue_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class BuildQueueWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/build_success_worker.rb b/app/workers/build_success_worker.rb
index 4b9097bc5e4..e1c1cc24a94 100644
--- a/app/workers/build_success_worker.rb
+++ b/app/workers/build_success_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class BuildSuccessWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/build_trace_sections_worker.rb b/app/workers/build_trace_sections_worker.rb
index c0f5c144e10..f4114b3353c 100644
--- a/app/workers/build_trace_sections_worker.rb
+++ b/app/workers/build_trace_sections_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class BuildTraceSectionsWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/check_gcp_project_billing_worker.rb b/app/workers/check_gcp_project_billing_worker.rb
deleted file mode 100644
index 363f81590ab..00000000000
--- a/app/workers/check_gcp_project_billing_worker.rb
+++ /dev/null
@@ -1,92 +0,0 @@
-require 'securerandom'
-
-class CheckGcpProjectBillingWorker
-  include ApplicationWorker
-  include ClusterQueue
-
-  LEASE_TIMEOUT = 3.seconds.to_i
-  SESSION_KEY_TIMEOUT = 5.minutes
-  BILLING_TIMEOUT = 1.hour
-  BILLING_CHANGED_LABELS = { state_transition: nil }.freeze
-
-  def self.get_session_token(token_key)
-    Gitlab::Redis::SharedState.with do |redis|
-      redis.get(get_redis_session_key(token_key))
-    end
-  end
-
-  def self.store_session_token(token)
-    generate_token_key.tap do |token_key|
-      Gitlab::Redis::SharedState.with do |redis|
-        redis.set(get_redis_session_key(token_key), token, ex: SESSION_KEY_TIMEOUT)
-      end
-    end
-  end
-
-  def self.get_billing_state(token)
-    Gitlab::Redis::SharedState.with do |redis|
-      value = redis.get(redis_shared_state_key_for(token))
-      ActiveRecord::Type::Boolean.new.type_cast_from_user(value)
-    end
-  end
-
-  def perform(token_key)
-    return unless token_key
-
-    token = self.class.get_session_token(token_key)
-    return unless token
-    return unless try_obtain_lease_for(token)
-
-    billing_enabled_state = !CheckGcpProjectBillingService.new.execute(token).empty?
-    update_billing_change_counter(self.class.get_billing_state(token), billing_enabled_state)
-    self.class.set_billing_state(token, billing_enabled_state)
-  end
-
-  private
-
-  def self.generate_token_key
-    SecureRandom.uuid
-  end
-
-  def self.get_redis_session_key(token_key)
-    "gitlab:gcp:session:#{token_key}"
-  end
-
-  def self.redis_shared_state_key_for(token)
-    "gitlab:gcp:#{Digest::SHA1.hexdigest(token)}:billing_enabled"
-  end
-
-  def self.set_billing_state(token, value)
-    Gitlab::Redis::SharedState.with do |redis|
-      redis.set(redis_shared_state_key_for(token), value, ex: BILLING_TIMEOUT)
-    end
-  end
-
-  def try_obtain_lease_for(token)
-    Gitlab::ExclusiveLease
-      .new("check_gcp_project_billing_worker:#{token.hash}", timeout: LEASE_TIMEOUT)
-      .try_obtain
-  end
-
-  def billing_changed_counter
-    @billing_changed_counter ||= Gitlab::Metrics.counter(
-      :gcp_billing_change_count,
-      "Counts the number of times a GCP project changed billing_enabled state from false to true",
-      BILLING_CHANGED_LABELS
-    )
-  end
-
-  def state_transition(previous_state, current_state)
-    if previous_state.nil? && !current_state
-      'no_billing'
-    elsif previous_state.nil? && current_state
-      'with_billing'
-    elsif !previous_state && current_state
-      'billing_configured'
-    end
-  end
-
-  def update_billing_change_counter(previous_state, current_state)
-    billing_changed_counter.increment(state_transition: state_transition(previous_state, current_state))
-  end
-end
diff --git a/app/workers/ci/archive_traces_cron_worker.rb b/app/workers/ci/archive_traces_cron_worker.rb
new file mode 100644
index 00000000000..2ac65f41f4e
--- /dev/null
+++ b/app/workers/ci/archive_traces_cron_worker.rb
@@ -0,0 +1,26 @@
+module Ci
+  class ArchiveTracesCronWorker
+    include ApplicationWorker
+    include CronjobQueue
+
+    def perform
+      # Archive stale live traces which still resides in redis or database
+      # This could happen when ArchiveTraceWorker sidekiq jobs were lost by receiving SIGKILL
+      # More details in https://gitlab.com/gitlab-org/gitlab-ce/issues/36791
+      Ci::Build.finished.with_live_trace.find_each(batch_size: 100) do |build|
+        begin
+          build.trace.archive!
+        rescue => e
+          failed_archive_counter.increment
+          Rails.logger.error "Failed to archive stale live trace. id: #{build.id} message: #{e.message}"
+        end
+      end
+    end
+
+    private
+
+    def failed_archive_counter
+      @failed_archive_counter ||= Gitlab::Metrics.counter(:job_trace_archive_failed_total, "Counter of failed attempts of traces archiving")
+    end
+  end
+end
diff --git a/app/workers/ci/build_trace_chunk_flush_worker.rb b/app/workers/ci/build_trace_chunk_flush_worker.rb
new file mode 100644
index 00000000000..218d6688bd9
--- /dev/null
+++ b/app/workers/ci/build_trace_chunk_flush_worker.rb
@@ -0,0 +1,12 @@
+module Ci
+  class BuildTraceChunkFlushWorker
+    include ApplicationWorker
+    include PipelineBackgroundQueue
+
+    def perform(build_trace_chunk_id)
+      ::Ci::BuildTraceChunk.find_by(id: build_trace_chunk_id).try do |build_trace_chunk|
+        build_trace_chunk.use_database!
+      end
+    end
+  end
+end
diff --git a/app/workers/cluster_install_app_worker.rb b/app/workers/cluster_install_app_worker.rb
index f771cb4939f..32e2ea7996c 100644
--- a/app/workers/cluster_install_app_worker.rb
+++ b/app/workers/cluster_install_app_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ClusterInstallAppWorker
   include ApplicationWorker
   include ClusterQueue
diff --git a/app/workers/cluster_provision_worker.rb b/app/workers/cluster_provision_worker.rb
index 1ab4de3b647..59de7903c1c 100644
--- a/app/workers/cluster_provision_worker.rb
+++ b/app/workers/cluster_provision_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ClusterProvisionWorker
   include ApplicationWorker
   include ClusterQueue
diff --git a/app/workers/cluster_wait_for_app_installation_worker.rb b/app/workers/cluster_wait_for_app_installation_worker.rb
index d564d5e48bf..e8d7e52f70f 100644
--- a/app/workers/cluster_wait_for_app_installation_worker.rb
+++ b/app/workers/cluster_wait_for_app_installation_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ClusterWaitForAppInstallationWorker
   include ApplicationWorker
   include ClusterQueue
diff --git a/app/workers/cluster_wait_for_ingress_ip_address_worker.rb b/app/workers/cluster_wait_for_ingress_ip_address_worker.rb
index 8ba5951750c..6865384df44 100644
--- a/app/workers/cluster_wait_for_ingress_ip_address_worker.rb
+++ b/app/workers/cluster_wait_for_ingress_ip_address_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ClusterWaitForIngressIpAddressWorker
   include ApplicationWorker
   include ClusterQueue
diff --git a/app/workers/concerns/mail_scheduler_queue.rb b/app/workers/concerns/mail_scheduler_queue.rb
new file mode 100644
index 00000000000..f3e9680d756
--- /dev/null
+++ b/app/workers/concerns/mail_scheduler_queue.rb
@@ -0,0 +1,11 @@
+module MailSchedulerQueue
+  extend ActiveSupport::Concern
+
+  included do
+    queue_namespace :mail_scheduler
+  end
+
+  def notification_service
+    @notification_service ||= NotificationService.new
+  end
+end
diff --git a/app/workers/concerns/object_storage_queue.rb b/app/workers/concerns/object_storage_queue.rb
new file mode 100644
index 00000000000..a80f473a6d4
--- /dev/null
+++ b/app/workers/concerns/object_storage_queue.rb
@@ -0,0 +1,8 @@
+# Concern for setting Sidekiq settings for the various GitLab ObjectStorage workers.
+module ObjectStorageQueue
+  extend ActiveSupport::Concern
+
+  included do
+    queue_namespace :object_storage
+  end
+end
diff --git a/app/workers/create_gpg_signature_worker.rb b/app/workers/create_gpg_signature_worker.rb
index f371731f68c..a2da1bda11f 100644
--- a/app/workers/create_gpg_signature_worker.rb
+++ b/app/workers/create_gpg_signature_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class CreateGpgSignatureWorker
   include ApplicationWorker
 
diff --git a/app/workers/create_note_diff_file_worker.rb b/app/workers/create_note_diff_file_worker.rb
new file mode 100644
index 00000000000..0850250f7e3
--- /dev/null
+++ b/app/workers/create_note_diff_file_worker.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class CreateNoteDiffFileWorker
+  include ApplicationWorker
+
+  def perform(diff_note_id)
+    diff_note = DiffNote.find(diff_note_id)
+
+    diff_note.create_diff_file
+  end
+end
diff --git a/app/workers/create_pipeline_worker.rb b/app/workers/create_pipeline_worker.rb
index c3ac35e54f5..037b4a57d4b 100644
--- a/app/workers/create_pipeline_worker.rb
+++ b/app/workers/create_pipeline_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class CreatePipelineWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/delete_diff_files_worker.rb b/app/workers/delete_diff_files_worker.rb
new file mode 100644
index 00000000000..bb8fbb9c373
--- /dev/null
+++ b/app/workers/delete_diff_files_worker.rb
@@ -0,0 +1,17 @@
+class DeleteDiffFilesWorker
+  include ApplicationWorker
+
+  def perform(merge_request_diff_id)
+    merge_request_diff = MergeRequestDiff.find(merge_request_diff_id)
+
+    return if merge_request_diff.without_files?
+
+    MergeRequestDiff.transaction do
+      merge_request_diff.clean!
+
+      MergeRequestDiffFile
+        .where(merge_request_diff_id: merge_request_diff.id)
+        .delete_all
+    end
+  end
+end
diff --git a/app/workers/delete_merged_branches_worker.rb b/app/workers/delete_merged_branches_worker.rb
index 07cd1f02fb5..017d7fd1cb0 100644
--- a/app/workers/delete_merged_branches_worker.rb
+++ b/app/workers/delete_merged_branches_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class DeleteMergedBranchesWorker
   include ApplicationWorker
 
diff --git a/app/workers/delete_user_worker.rb b/app/workers/delete_user_worker.rb
index 6c431b02979..4d0295f8d2e 100644
--- a/app/workers/delete_user_worker.rb
+++ b/app/workers/delete_user_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class DeleteUserWorker
   include ApplicationWorker
 
diff --git a/app/workers/email_receiver_worker.rb b/app/workers/email_receiver_worker.rb
index dd8a6cbbef1..f9f0efb302a 100644
--- a/app/workers/email_receiver_worker.rb
+++ b/app/workers/email_receiver_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class EmailReceiverWorker
   include ApplicationWorker
 
diff --git a/app/workers/emails_on_push_worker.rb b/app/workers/emails_on_push_worker.rb
index 2a4d65b5cb3..8d0cfc73ccd 100644
--- a/app/workers/emails_on_push_worker.rb
+++ b/app/workers/emails_on_push_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class EmailsOnPushWorker
   include ApplicationWorker
 
diff --git a/app/workers/expire_build_artifacts_worker.rb b/app/workers/expire_build_artifacts_worker.rb
index 87e5dca01fd..5d3a9a39b93 100644
--- a/app/workers/expire_build_artifacts_worker.rb
+++ b/app/workers/expire_build_artifacts_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ExpireBuildArtifactsWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/expire_build_instance_artifacts_worker.rb b/app/workers/expire_build_instance_artifacts_worker.rb
index 234b4357cf7..3b57ecb36e3 100644
--- a/app/workers/expire_build_instance_artifacts_worker.rb
+++ b/app/workers/expire_build_instance_artifacts_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ExpireBuildInstanceArtifactsWorker
   include ApplicationWorker
 
diff --git a/app/workers/expire_job_cache_worker.rb b/app/workers/expire_job_cache_worker.rb
index 7217364a9f2..14a57b90114 100644
--- a/app/workers/expire_job_cache_worker.rb
+++ b/app/workers/expire_job_cache_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ExpireJobCacheWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/expire_pipeline_cache_worker.rb b/app/workers/expire_pipeline_cache_worker.rb
index db73d37868a..992fc63c451 100644
--- a/app/workers/expire_pipeline_cache_worker.rb
+++ b/app/workers/expire_pipeline_cache_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ExpirePipelineCacheWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/git_garbage_collect_worker.rb b/app/workers/git_garbage_collect_worker.rb
index 55fb817ca6e..fd49bc18161 100644
--- a/app/workers/git_garbage_collect_worker.rb
+++ b/app/workers/git_garbage_collect_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class GitGarbageCollectWorker
   include ApplicationWorker
 
@@ -6,12 +8,6 @@ class GitGarbageCollectWorker
   # Timeout set to 24h
   LEASE_TIMEOUT = 86400
 
-  GITALY_MIGRATED_TASKS = {
-    gc: :garbage_collect,
-    full_repack: :repack_full,
-    incremental_repack: :repack_incremental
-  }.freeze
-
   def perform(project_id, task = :gc, lease_key = nil, lease_uuid = nil)
     project = Project.find(project_id)
     active_uuid = get_lease_uuid(lease_key)
@@ -27,20 +23,7 @@ class GitGarbageCollectWorker
     end
 
     task = task.to_sym
-    cmd = command(task)
-    repo_path = project.repository.path_to_repo
-    description = "'#{cmd.join(' ')}' in #{repo_path}"
-
-    Gitlab::GitLogger.info(description)
-
-    gitaly_migrate(GITALY_MIGRATED_TASKS[task]) do |is_enabled|
-      if is_enabled
-        gitaly_call(task, project.repository.raw_repository)
-      else
-        output, status = Gitlab::Popen.popen(cmd, repo_path)
-        Gitlab::GitLogger.error("#{description} failed:\n#{output}") unless status.zero?
-      end
-    end
+    gitaly_call(task, project.repository.raw_repository)
 
     # Refresh the branch cache in case garbage collection caused a ref lookup to fail
     flush_ref_caches(project) if task == :gc
@@ -81,21 +64,12 @@ class GitGarbageCollectWorker
     when :incremental_repack
       client.repack_incremental
     end
-  end
-
-  def command(task)
-    case task
-    when :gc
-      git(write_bitmaps: bitmaps_enabled?) + %w[gc]
-    when :full_repack
-      git(write_bitmaps: bitmaps_enabled?) + %w[repack -A -d --pack-kept-objects]
-    when :incremental_repack
-      # Normal git repack fails when bitmaps are enabled. It is impossible to
-      # create a bitmap here anyway.
-      git(write_bitmaps: false) + %w[repack -d]
-    else
-      raise "Invalid gc task: #{task.inspect}"
-    end
+  rescue GRPC::NotFound => e
+    Gitlab::GitLogger.error("#{method} failed:\nRepository not found")
+    raise Gitlab::Git::Repository::NoRepository.new(e)
+  rescue GRPC::BadStatus => e
+    Gitlab::GitLogger.error("#{method} failed:\n#{e}")
+    raise Gitlab::Git::CommandError.new(e)
   end
 
   def flush_ref_caches(project)
@@ -107,19 +81,4 @@ class GitGarbageCollectWorker
   def bitmaps_enabled?
     Gitlab::CurrentSettings.housekeeping_bitmaps_enabled
   end
-
-  def git(write_bitmaps:)
-    config_value = write_bitmaps ? 'true' : 'false'
-    %W[git -c repack.writeBitmaps=#{config_value}]
-  end
-
-  def gitaly_migrate(method, &block)
-    Gitlab::GitalyClient.migrate(method, &block)
-  rescue GRPC::NotFound => e
-    Gitlab::GitLogger.error("#{method} failed:\nRepository not found")
-    raise Gitlab::Git::Repository::NoRepository.new(e)
-  rescue GRPC::BadStatus => e
-    Gitlab::GitLogger.error("#{method} failed:\n#{e}")
-    raise Gitlab::Git::CommandError.new(e)
-  end
 end
diff --git a/app/workers/gitlab/github_import/advance_stage_worker.rb b/app/workers/gitlab/github_import/advance_stage_worker.rb
index f7f498af840..be0b6c180b0 100644
--- a/app/workers/gitlab/github_import/advance_stage_worker.rb
+++ b/app/workers/gitlab/github_import/advance_stage_worker.rb
@@ -21,6 +21,7 @@ module Gitlab
       STAGES = {
         issues_and_diff_notes: Stage::ImportIssuesAndDiffNotesWorker,
         notes: Stage::ImportNotesWorker,
+        lfs_objects: Stage::ImportLfsObjectsWorker,
         finish: Stage::FinishImportWorker
       }.freeze
 
@@ -63,11 +64,10 @@ module Gitlab
       end
 
       def find_project(id)
-        # We only care about the import JID so we can refresh it. We also only
-        # want the project if it hasn't been marked as failed yet. It's possible
-        # the import gets marked as stuck when jobs of the current stage failed
-        # somehow.
-        Project.select(:import_jid).import_started.find_by(id: id)
+        # TODO: Only select the JID
+        # This is due to the fact that the JID could be present in either the project record or
+        # its associated import_state record
+        Project.import_started.find_by(id: id)
       end
     end
   end
diff --git a/app/workers/gitlab/github_import/import_lfs_object_worker.rb b/app/workers/gitlab/github_import/import_lfs_object_worker.rb
new file mode 100644
index 00000000000..520c5cb091a
--- /dev/null
+++ b/app/workers/gitlab/github_import/import_lfs_object_worker.rb
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Gitlab
+  module GithubImport
+    class ImportLfsObjectWorker
+      include ObjectImporter
+
+      def representation_class
+        Representation::LfsObject
+      end
+
+      def importer_class
+        Importer::LfsObjectImporter
+      end
+
+      def counter_name
+        :github_importer_imported_lfs_objects
+      end
+
+      def counter_description
+        'The number of imported GitHub Lfs Objects'
+      end
+    end
+  end
+end
diff --git a/app/workers/gitlab/github_import/refresh_import_jid_worker.rb b/app/workers/gitlab/github_import/refresh_import_jid_worker.rb
index 7108b531bc2..68d2c5c4331 100644
--- a/app/workers/gitlab/github_import/refresh_import_jid_worker.rb
+++ b/app/workers/gitlab/github_import/refresh_import_jid_worker.rb
@@ -31,7 +31,10 @@ module Gitlab
       end
 
       def find_project(id)
-        Project.select(:import_jid).import_started.find_by(id: id)
+        # TODO: Only select the JID
+        # This is due to the fact that the JID could be present in either the project record or
+        # its associated import_state record
+        Project.import_started.find_by(id: id)
       end
     end
   end
diff --git a/app/workers/gitlab/github_import/stage/import_lfs_objects_worker.rb b/app/workers/gitlab/github_import/stage/import_lfs_objects_worker.rb
new file mode 100644
index 00000000000..29257603a9d
--- /dev/null
+++ b/app/workers/gitlab/github_import/stage/import_lfs_objects_worker.rb
@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Gitlab
+  module GithubImport
+    module Stage
+      class ImportLfsObjectsWorker
+        include ApplicationWorker
+        include GithubImport::Queue
+        include StageMethods
+
+        def perform(project_id)
+          return unless (project = find_project(project_id))
+
+          import(project)
+        end
+
+        # project - An instance of Project.
+        def import(project)
+          waiter = Importer::LfsObjectsImporter
+            .new(project, nil)
+            .execute
+
+          AdvanceStageWorker.perform_async(
+            project.id,
+            { waiter.key => waiter.jobs_remaining },
+            :finish
+          )
+        end
+      end
+    end
+  end
+end
diff --git a/app/workers/gitlab/github_import/stage/import_notes_worker.rb b/app/workers/gitlab/github_import/stage/import_notes_worker.rb
index 5f4678a595f..ccf0013180d 100644
--- a/app/workers/gitlab/github_import/stage/import_notes_worker.rb
+++ b/app/workers/gitlab/github_import/stage/import_notes_worker.rb
@@ -18,7 +18,7 @@ module Gitlab
           AdvanceStageWorker.perform_async(
             project.id,
             { waiter.key => waiter.jobs_remaining },
-            :finish
+            :lfs_objects
           )
         end
       end
diff --git a/app/workers/gitlab_shell_worker.rb b/app/workers/gitlab_shell_worker.rb
index a0028e41332..0e4d40acc5c 100644
--- a/app/workers/gitlab_shell_worker.rb
+++ b/app/workers/gitlab_shell_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class GitlabShellWorker
   include ApplicationWorker
   include Gitlab::ShellAdapter
diff --git a/app/workers/gitlab_usage_ping_worker.rb b/app/workers/gitlab_usage_ping_worker.rb
index 6dd281b1147..b75e724ca98 100644
--- a/app/workers/gitlab_usage_ping_worker.rb
+++ b/app/workers/gitlab_usage_ping_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class GitlabUsagePingWorker
   LEASE_TIMEOUT = 86400
 
diff --git a/app/workers/group_destroy_worker.rb b/app/workers/group_destroy_worker.rb
index 509bd09dc2e..b4a3ddcae51 100644
--- a/app/workers/group_destroy_worker.rb
+++ b/app/workers/group_destroy_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class GroupDestroyWorker
   include ApplicationWorker
   include ExceptionBacktrace
diff --git a/app/workers/import_export_project_cleanup_worker.rb b/app/workers/import_export_project_cleanup_worker.rb
index 9788c8df3a3..da3debdeede 100644
--- a/app/workers/import_export_project_cleanup_worker.rb
+++ b/app/workers/import_export_project_cleanup_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ImportExportProjectCleanupWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/invalid_gpg_signature_update_worker.rb b/app/workers/invalid_gpg_signature_update_worker.rb
index 6774ab307c6..4724ab7ad98 100644
--- a/app/workers/invalid_gpg_signature_update_worker.rb
+++ b/app/workers/invalid_gpg_signature_update_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class InvalidGpgSignatureUpdateWorker
   include ApplicationWorker
 
diff --git a/app/workers/irker_worker.rb b/app/workers/irker_worker.rb
index 9ae5456be4c..29631c6b7ac 100644
--- a/app/workers/irker_worker.rb
+++ b/app/workers/irker_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'json'
 require 'socket'
 
@@ -69,8 +71,8 @@ class IrkerWorker
     newbranch = "#{Gitlab.config.gitlab.url}/#{repo_path}/branches"
     newbranch = "\x0302\x1f#{newbranch}\x0f" if @colors
 
-    privmsg = "[#{repo_name}] #{committer} has created a new branch "
-    privmsg += "#{branch}: #{newbranch}"
+    privmsg = "[#{repo_name}] #{committer} has created a new branch " \
+              "#{branch}: #{newbranch}"
     sendtoirker privmsg
   end
 
@@ -112,9 +114,7 @@ class IrkerWorker
     url = compare_url data, project.full_path
     commits = colorize_commits data['total_commits_count']
 
-    new_commits = 'new commit'
-    new_commits += 's' if data['total_commits_count'] > 1
-
+    new_commits = 'new commit'.pluralize(data['total_commits_count'])
     sendtoirker "[#{repo}] #{committer} pushed #{commits} #{new_commits} " \
                 "to #{branch}: #{url}"
   end
@@ -122,8 +122,8 @@ class IrkerWorker
   def compare_url(data, repo_path)
     sha1 = Commit.truncate_sha(data['before'])
     sha2 = Commit.truncate_sha(data['after'])
-    compare_url = "#{Gitlab.config.gitlab.url}/#{repo_path}/compare"
-    compare_url += "/#{sha1}...#{sha2}"
+    compare_url = "#{Gitlab.config.gitlab.url}/#{repo_path}/compare" \
+                  "/#{sha1}...#{sha2}"
     colorize_url compare_url
   end
 
@@ -144,8 +144,7 @@ class IrkerWorker
   def files_count(commit)
     diff_size = commit.raw_deltas.size
 
-    files = "#{diff_size} file"
-    files += 's' if diff_size > 1
+    files = "#{diff_size} file".pluralize(diff_size)
     files
   end
 
diff --git a/app/workers/issue_due_scheduler_worker.rb b/app/workers/issue_due_scheduler_worker.rb
new file mode 100644
index 00000000000..c04a2d75e0b
--- /dev/null
+++ b/app/workers/issue_due_scheduler_worker.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class IssueDueSchedulerWorker
+  include ApplicationWorker
+  include CronjobQueue
+
+  def perform
+    project_ids = Issue.opened.due_tomorrow.group(:project_id).pluck(:project_id).map { |id| [id] }
+
+    MailScheduler::IssueDueWorker.bulk_perform_async(project_ids)
+  end
+end
diff --git a/app/workers/mail_scheduler/issue_due_worker.rb b/app/workers/mail_scheduler/issue_due_worker.rb
new file mode 100644
index 00000000000..54285884a52
--- /dev/null
+++ b/app/workers/mail_scheduler/issue_due_worker.rb
@@ -0,0 +1,12 @@
+module MailScheduler
+  class IssueDueWorker
+    include ApplicationWorker
+    include MailSchedulerQueue
+
+    def perform(project_id)
+      Issue.opened.due_tomorrow.in_projects(project_id).preload(:project).find_each do |issue|
+        notification_service.issue_due(issue)
+      end
+    end
+  end
+end
diff --git a/app/workers/mail_scheduler/notification_service_worker.rb b/app/workers/mail_scheduler/notification_service_worker.rb
new file mode 100644
index 00000000000..7cfe0aa0df1
--- /dev/null
+++ b/app/workers/mail_scheduler/notification_service_worker.rb
@@ -0,0 +1,19 @@
+require 'active_job/arguments'
+
+module MailScheduler
+  class NotificationServiceWorker
+    include ApplicationWorker
+    include MailSchedulerQueue
+
+    def perform(meth, *args)
+      deserialized_args = ActiveJob::Arguments.deserialize(args)
+
+      notification_service.public_send(meth, *deserialized_args) # rubocop:disable GitlabSecurity/PublicSend
+    rescue ActiveJob::DeserializationError
+    end
+
+    def self.perform_async(*args)
+      super(*ActiveJob::Arguments.serialize(args))
+    end
+  end
+end
diff --git a/app/workers/merge_worker.rb b/app/workers/merge_worker.rb
index ba832fe30c6..ee864b733cd 100644
--- a/app/workers/merge_worker.rb
+++ b/app/workers/merge_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class MergeWorker
   include ApplicationWorker
 
diff --git a/app/workers/namespaceless_project_destroy_worker.rb b/app/workers/namespaceless_project_destroy_worker.rb
index adb25c2a170..d9df42c9e17 100644
--- a/app/workers/namespaceless_project_destroy_worker.rb
+++ b/app/workers/namespaceless_project_destroy_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 # Worker to destroy projects that do not have a namespace
 #
 # It destroys everything it can without having the info about the namespace it
diff --git a/app/workers/new_issue_worker.rb b/app/workers/new_issue_worker.rb
index 3bc030f9c62..85b53973f56 100644
--- a/app/workers/new_issue_worker.rb
+++ b/app/workers/new_issue_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class NewIssueWorker
   include ApplicationWorker
   include NewIssuable
diff --git a/app/workers/new_merge_request_worker.rb b/app/workers/new_merge_request_worker.rb
index bda2a0ab59d..5d8b8904502 100644
--- a/app/workers/new_merge_request_worker.rb
+++ b/app/workers/new_merge_request_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class NewMergeRequestWorker
   include ApplicationWorker
   include NewIssuable
diff --git a/app/workers/new_note_worker.rb b/app/workers/new_note_worker.rb
index 67c54fbf10e..74f34dcf9aa 100644
--- a/app/workers/new_note_worker.rb
+++ b/app/workers/new_note_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class NewNoteWorker
   include ApplicationWorker
 
diff --git a/app/workers/object_storage/background_move_worker.rb b/app/workers/object_storage/background_move_worker.rb
new file mode 100644
index 00000000000..9c4d72e0ecf
--- /dev/null
+++ b/app/workers/object_storage/background_move_worker.rb
@@ -0,0 +1,29 @@
+module ObjectStorage
+  class BackgroundMoveWorker
+    include ApplicationWorker
+    include ObjectStorageQueue
+
+    sidekiq_options retry: 5
+
+    def perform(uploader_class_name, subject_class_name, file_field, subject_id)
+      uploader_class = uploader_class_name.constantize
+      subject_class = subject_class_name.constantize
+
+      return unless uploader_class < ObjectStorage::Concern
+      return unless uploader_class.object_store_enabled?
+      return unless uploader_class.background_upload_enabled?
+
+      subject = subject_class.find(subject_id)
+      uploader = build_uploader(subject, file_field&.to_sym)
+      uploader.migrate!(ObjectStorage::Store::REMOTE)
+    end
+
+    def build_uploader(subject, mount_point)
+      case subject
+      when Upload then subject.build_uploader(mount_point)
+      else
+        subject.send(mount_point) # rubocop:disable GitlabSecurity/PublicSend
+      end
+    end
+  end
+end
diff --git a/app/workers/object_storage/migrate_uploads_worker.rb b/app/workers/object_storage/migrate_uploads_worker.rb
new file mode 100644
index 00000000000..a3ecfa8e711
--- /dev/null
+++ b/app/workers/object_storage/migrate_uploads_worker.rb
@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+# rubocop:disable Metrics/LineLength
+# rubocop:disable Style/Documentation
+
+module ObjectStorage
+  class MigrateUploadsWorker
+    include ApplicationWorker
+    include ObjectStorageQueue
+
+    SanityCheckError = Class.new(StandardError)
+
+    class MigrationResult
+      attr_reader :upload
+      attr_accessor :error
+
+      def initialize(upload, error = nil)
+        @upload, @error = upload, error
+      end
+
+      def success?
+        error.nil?
+      end
+
+      def to_s
+        success? ? "Migration successful." : "Error while migrating #{upload.id}: #{error.message}"
+      end
+    end
+
+    module Report
+      class MigrationFailures < StandardError
+        attr_reader :errors
+
+        def initialize(errors)
+          @errors = errors
+        end
+
+        def message
+          errors.map(&:message).join("\n")
+        end
+      end
+
+      def report!(results)
+        success, failures = results.partition(&:success?)
+
+        Rails.logger.info header(success, failures)
+        Rails.logger.warn failures(failures)
+
+        raise MigrationFailures.new(failures.map(&:error)) if failures.any?
+      end
+
+      def header(success, failures)
+        "Migrated #{success.count}/#{success.count + failures.count} files."
+      end
+
+      def failures(failures)
+        failures.map { |f| "\t#{f}" }.join('\n')
+      end
+    end
+
+    include Report
+
+    def self.enqueue!(uploads, model_class, mounted_as, to_store)
+      sanity_check!(uploads, model_class, mounted_as)
+
+      perform_async(uploads.ids, model_class.to_s, mounted_as, to_store)
+    end
+
+    # We need to be sure all the uploads are for the same uploader and model type
+    # and that the mount point exists if provided.
+    #
+    def self.sanity_check!(uploads, model_class, mounted_as)
+      upload = uploads.first
+      uploader_class = upload.uploader.constantize
+      uploader_types = uploads.map(&:uploader).uniq
+      model_types = uploads.map(&:model_type).uniq
+      model_has_mount = mounted_as.nil? || model_class.uploaders[mounted_as] == uploader_class
+
+      raise(SanityCheckError, "Multiple uploaders found: #{uploader_types}") unless uploader_types.count == 1
+      raise(SanityCheckError, "Multiple model types found: #{model_types}") unless model_types.count == 1
+      raise(SanityCheckError, "Mount point #{mounted_as} not found in #{model_class}.") unless model_has_mount
+    end
+
+    def perform(*args)
+      args_check!(args)
+
+      (ids, model_type, mounted_as, to_store) = args
+
+      @model_class = model_type.constantize
+      @mounted_as = mounted_as&.to_sym
+      @to_store = to_store
+
+      uploads = Upload.preload(:model).where(id: ids)
+
+      sanity_check!(uploads)
+      results = migrate(uploads)
+
+      report!(results)
+    rescue SanityCheckError => e
+      # do not retry: the job is insane
+      Rails.logger.warn "#{self.class}: Sanity check error (#{e.message})"
+    end
+
+    def sanity_check!(uploads)
+      self.class.sanity_check!(uploads, @model_class, @mounted_as)
+    end
+
+    def args_check!(args)
+      return if args.count == 4
+
+      case args.count
+      when 3 then raise SanityCheckError, "Job is missing the `model_type` argument."
+      else
+        raise SanityCheckError, "Job has wrong arguments format."
+      end
+    end
+
+    def build_uploaders(uploads)
+      uploads.map { |upload| upload.build_uploader(@mounted_as) }
+    end
+
+    def migrate(uploads)
+      build_uploaders(uploads).map(&method(:process_uploader))
+    end
+
+    def process_uploader(uploader)
+      MigrationResult.new(uploader.upload).tap do |result|
+        begin
+          uploader.migrate!(@to_store)
+        rescue => e
+          result.error = e
+        end
+      end
+    end
+  end
+end
diff --git a/app/workers/object_storage_upload_worker.rb b/app/workers/object_storage_upload_worker.rb
new file mode 100644
index 00000000000..f17980a83d8
--- /dev/null
+++ b/app/workers/object_storage_upload_worker.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# @Deprecated - remove once the `object_storage_upload` queue is empty
+# The queue has been renamed `object_storage:object_storage_background_upload`
+#
+class ObjectStorageUploadWorker
+  include ApplicationWorker
+
+  sidekiq_options retry: 5
+
+  def perform(uploader_class_name, subject_class_name, file_field, subject_id)
+    uploader_class = uploader_class_name.constantize
+    subject_class = subject_class_name.constantize
+
+    return unless uploader_class < ObjectStorage::Concern
+    return unless uploader_class.object_store_enabled?
+    return unless uploader_class.background_upload_enabled?
+
+    subject = subject_class.find(subject_id)
+    uploader = subject.public_send(file_field) # rubocop:disable GitlabSecurity/PublicSend
+    uploader.migrate!(ObjectStorage::Store::REMOTE)
+  end
+end
diff --git a/app/workers/pages_domain_verification_cron_worker.rb b/app/workers/pages_domain_verification_cron_worker.rb
index a3ff4bd2101..92d62a15aee 100644
--- a/app/workers/pages_domain_verification_cron_worker.rb
+++ b/app/workers/pages_domain_verification_cron_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PagesDomainVerificationCronWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/pages_domain_verification_worker.rb b/app/workers/pages_domain_verification_worker.rb
index 2e93489113c..4610b688189 100644
--- a/app/workers/pages_domain_verification_worker.rb
+++ b/app/workers/pages_domain_verification_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PagesDomainVerificationWorker
   include ApplicationWorker
 
diff --git a/app/workers/pages_worker.rb b/app/workers/pages_worker.rb
index 66a0ff83bef..13a6576a301 100644
--- a/app/workers/pages_worker.rb
+++ b/app/workers/pages_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PagesWorker
   include ApplicationWorker
 
diff --git a/app/workers/pipeline_hooks_worker.rb b/app/workers/pipeline_hooks_worker.rb
index c94918ff4ee..58023e0af1b 100644
--- a/app/workers/pipeline_hooks_worker.rb
+++ b/app/workers/pipeline_hooks_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PipelineHooksWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/pipeline_metrics_worker.rb b/app/workers/pipeline_metrics_worker.rb
index d46d1f122fc..a97019b100a 100644
--- a/app/workers/pipeline_metrics_worker.rb
+++ b/app/workers/pipeline_metrics_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PipelineMetricsWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/pipeline_notification_worker.rb b/app/workers/pipeline_notification_worker.rb
index a9a1168a6e3..3a8846b3747 100644
--- a/app/workers/pipeline_notification_worker.rb
+++ b/app/workers/pipeline_notification_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PipelineNotificationWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/pipeline_process_worker.rb b/app/workers/pipeline_process_worker.rb
index 24424b3f472..83744c5338a 100644
--- a/app/workers/pipeline_process_worker.rb
+++ b/app/workers/pipeline_process_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PipelineProcessWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/pipeline_schedule_worker.rb b/app/workers/pipeline_schedule_worker.rb
index c49758878a4..a1815757735 100644
--- a/app/workers/pipeline_schedule_worker.rb
+++ b/app/workers/pipeline_schedule_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PipelineScheduleWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/pipeline_success_worker.rb b/app/workers/pipeline_success_worker.rb
index 2ab0739a17f..68e9af6a619 100644
--- a/app/workers/pipeline_success_worker.rb
+++ b/app/workers/pipeline_success_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PipelineSuccessWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/pipeline_update_worker.rb b/app/workers/pipeline_update_worker.rb
index fc9da2d45b1..c33468c1f14 100644
--- a/app/workers/pipeline_update_worker.rb
+++ b/app/workers/pipeline_update_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PipelineUpdateWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/plugin_worker.rb b/app/workers/plugin_worker.rb
index bfcc683d99a..c293e28be4a 100644
--- a/app/workers/plugin_worker.rb
+++ b/app/workers/plugin_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PluginWorker
   include ApplicationWorker
 
diff --git a/app/workers/post_receive.rb b/app/workers/post_receive.rb
index 3909dbf7d7f..09a594cdb4e 100644
--- a/app/workers/post_receive.rb
+++ b/app/workers/post_receive.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PostReceive
   include ApplicationWorker
 
@@ -33,7 +35,7 @@ class PostReceive
 
       unless @user
         log("Triggered hook for non-existing user \"#{post_received.identifier}\"")
-        return false
+        return false # rubocop:disable Cop/AvoidReturnFromBlocks
       end
 
       if Gitlab::Git.tag_ref?(ref)
diff --git a/app/workers/process_commit_worker.rb b/app/workers/process_commit_worker.rb
index 201e7f332b4..ed39b4a1ea8 100644
--- a/app/workers/process_commit_worker.rb
+++ b/app/workers/process_commit_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 # Worker for processing individiual commit messages pushed to a repository.
 #
 # Jobs for this worker are scheduled for every commit that is being pushed. As a
diff --git a/app/workers/project_cache_worker.rb b/app/workers/project_cache_worker.rb
index a993b4b2680..b0e1d8837d9 100644
--- a/app/workers/project_cache_worker.rb
+++ b/app/workers/project_cache_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 # Worker for updating any project specific caches.
 class ProjectCacheWorker
   include ApplicationWorker
diff --git a/app/workers/project_destroy_worker.rb b/app/workers/project_destroy_worker.rb
index 1ba854ca4cb..4447e867240 100644
--- a/app/workers/project_destroy_worker.rb
+++ b/app/workers/project_destroy_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ProjectDestroyWorker
   include ApplicationWorker
   include ExceptionBacktrace
diff --git a/app/workers/project_export_worker.rb b/app/workers/project_export_worker.rb
index 0b502143e5d..ed9da39c7c3 100644
--- a/app/workers/project_export_worker.rb
+++ b/app/workers/project_export_worker.rb
@@ -1,14 +1,24 @@
+# frozen_string_literal: true
+
 class ProjectExportWorker
   include ApplicationWorker
   include ExceptionBacktrace
 
   sidekiq_options retry: 3
 
-  def perform(current_user_id, project_id, params = {})
-    params = params.with_indifferent_access
+  def perform(current_user_id, project_id, after_export_strategy = {}, params = {})
     current_user = User.find(current_user_id)
     project = Project.find(project_id)
+    after_export = build!(after_export_strategy)
+
+    ::Projects::ImportExport::ExportService.new(project, current_user, params).execute(after_export)
+  end
+
+  private
+
+  def build!(after_export_strategy)
+    strategy_klass = after_export_strategy&.delete('klass')
 
-    ::Projects::ImportExport::ExportService.new(project, current_user, params).execute
+    Gitlab::ImportExport::AfterExportStrategyBuilder.build!(strategy_klass, after_export_strategy)
   end
 end
diff --git a/app/workers/project_migrate_hashed_storage_worker.rb b/app/workers/project_migrate_hashed_storage_worker.rb
index d01eb744e5d..9e4d66250a4 100644
--- a/app/workers/project_migrate_hashed_storage_worker.rb
+++ b/app/workers/project_migrate_hashed_storage_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ProjectMigrateHashedStorageWorker
   include ApplicationWorker
 
diff --git a/app/workers/project_service_worker.rb b/app/workers/project_service_worker.rb
index 75c4b8b3663..a0bc9288cf0 100644
--- a/app/workers/project_service_worker.rb
+++ b/app/workers/project_service_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ProjectServiceWorker
   include ApplicationWorker
 
diff --git a/app/workers/propagate_service_template_worker.rb b/app/workers/propagate_service_template_worker.rb
index 635a97c99af..c9da1cae255 100644
--- a/app/workers/propagate_service_template_worker.rb
+++ b/app/workers/propagate_service_template_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 # Worker for updating any project specific caches.
 class PropagateServiceTemplateWorker
   include ApplicationWorker
diff --git a/app/workers/prune_old_events_worker.rb b/app/workers/prune_old_events_worker.rb
index 5ff62ab1369..c1d05ebbcfd 100644
--- a/app/workers/prune_old_events_worker.rb
+++ b/app/workers/prune_old_events_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class PruneOldEventsWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/reactive_caching_worker.rb b/app/workers/reactive_caching_worker.rb
index ef3ddb9024b..9b331f15dc5 100644
--- a/app/workers/reactive_caching_worker.rb
+++ b/app/workers/reactive_caching_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ReactiveCachingWorker
   include ApplicationWorker
 
diff --git a/app/workers/rebase_worker.rb b/app/workers/rebase_worker.rb
index 090987778a2..a6baebc1443 100644
--- a/app/workers/rebase_worker.rb
+++ b/app/workers/rebase_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class RebaseWorker
   include ApplicationWorker
 
diff --git a/app/workers/remove_expired_group_links_worker.rb b/app/workers/remove_expired_group_links_worker.rb
index 7e64c3070a8..6b8b972a440 100644
--- a/app/workers/remove_expired_group_links_worker.rb
+++ b/app/workers/remove_expired_group_links_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class RemoveExpiredGroupLinksWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/remove_expired_members_worker.rb b/app/workers/remove_expired_members_worker.rb
index 68960f72bf6..41913900571 100644
--- a/app/workers/remove_expired_members_worker.rb
+++ b/app/workers/remove_expired_members_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class RemoveExpiredMembersWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/remove_old_web_hook_logs_worker.rb b/app/workers/remove_old_web_hook_logs_worker.rb
index 87fed42d7ce..17140ac4450 100644
--- a/app/workers/remove_old_web_hook_logs_worker.rb
+++ b/app/workers/remove_old_web_hook_logs_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class RemoveOldWebHookLogsWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/remove_unreferenced_lfs_objects_worker.rb b/app/workers/remove_unreferenced_lfs_objects_worker.rb
index 8daf079fc31..95e7a9f537f 100644
--- a/app/workers/remove_unreferenced_lfs_objects_worker.rb
+++ b/app/workers/remove_unreferenced_lfs_objects_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class RemoveUnreferencedLfsObjectsWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/repository_archive_cache_worker.rb b/app/workers/repository_archive_cache_worker.rb
index 86a258cf94f..c1dff8ced90 100644
--- a/app/workers/repository_archive_cache_worker.rb
+++ b/app/workers/repository_archive_cache_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class RepositoryArchiveCacheWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/repository_check/batch_worker.rb b/app/workers/repository_check/batch_worker.rb
index 76688cf51c1..72f0a9b0619 100644
--- a/app/workers/repository_check/batch_worker.rb
+++ b/app/workers/repository_check/batch_worker.rb
@@ -4,8 +4,11 @@ module RepositoryCheck
     include CronjobQueue
 
     RUN_TIME = 3600
+    BATCH_SIZE = 10_000
 
     def perform
+      return unless Gitlab::CurrentSettings.repository_checks_enabled
+
       start = Time.now
 
       # This loop will break after a little more than one hour ('a little
@@ -15,7 +18,6 @@ module RepositoryCheck
       # check, only one (or two) will be checked at a time.
       project_ids.each do |project_id|
         break if Time.now - start >= RUN_TIME
-        break unless current_settings.repository_checks_enabled
 
         next unless try_obtain_lease(project_id)
 
@@ -31,12 +33,20 @@ module RepositoryCheck
     # getting ID's from Postgres is not terribly slow, and because no user
     # has to sit and wait for this query to finish.
     def project_ids
-      limit = 10_000
-      never_checked_projects = Project.where('last_repository_check_at IS NULL AND created_at < ?', 24.hours.ago)
-        .limit(limit).pluck(:id)
-      old_check_projects = Project.where('last_repository_check_at < ?', 1.month.ago)
-        .reorder('last_repository_check_at ASC').limit(limit).pluck(:id)
-      never_checked_projects + old_check_projects
+      never_checked_project_ids(BATCH_SIZE) + old_checked_project_ids(BATCH_SIZE)
+    end
+
+    def never_checked_project_ids(batch_size)
+      Project.where(last_repository_check_at: nil)
+        .where('created_at < ?', 24.hours.ago)
+        .limit(batch_size).pluck(:id)
+    end
+
+    def old_checked_project_ids(batch_size)
+      Project.where.not(last_repository_check_at: nil)
+        .where('last_repository_check_at < ?', 1.month.ago)
+        .reorder(last_repository_check_at: :asc)
+        .limit(batch_size).pluck(:id)
     end
 
     def try_obtain_lease(id)
@@ -47,16 +57,5 @@ module RepositoryCheck
         timeout: 24.hours
       ).try_obtain
     end
-
-    def current_settings
-      # No caching of the settings! If we cache them and an admin disables
-      # this feature, an active RepositoryCheckWorker would keep going for up
-      # to 1 hour after the feature was disabled.
-      if Rails.env.test?
-        Gitlab::CurrentSettings.fake_application_settings
-      else
-        ApplicationSetting.current
-      end
-    end
   end
 end
diff --git a/app/workers/repository_check/single_repository_worker.rb b/app/workers/repository_check/single_repository_worker.rb
index 116bc185b38..3cffb8b14e4 100644
--- a/app/workers/repository_check/single_repository_worker.rb
+++ b/app/workers/repository_check/single_repository_worker.rb
@@ -5,27 +5,34 @@ module RepositoryCheck
 
     def perform(project_id)
       project = Project.find(project_id)
+      healthy = project_healthy?(project)
+
+      update_repository_check_status(project, healthy)
+    end
+
+    private
+
+    def update_repository_check_status(project, healthy)
       project.update_columns(
-        last_repository_check_failed: !check(project),
+        last_repository_check_failed: !healthy,
         last_repository_check_at: Time.now
       )
     end
 
-    private
+    def project_healthy?(project)
+      repo_healthy?(project) && wiki_repo_healthy?(project)
+    end
 
-    def check(project)
-      if has_pushes?(project) && !git_fsck(project.repository)
-        false
-      elsif project.wiki_enabled?
-        # Historically some projects never had their wiki repos initialized;
-        # this happens on project creation now. Let's initialize an empty repo
-        # if it is not already there.
-        project.create_wiki
+    def repo_healthy?(project)
+      return true unless has_changes?(project)
 
-        git_fsck(project.wiki.repository)
-      else
-        true
-      end
+      git_fsck(project.repository)
+    end
+
+    def wiki_repo_healthy?(project)
+      return true unless has_wiki_changes?(project)
+
+      git_fsck(project.wiki.repository)
     end
 
     def git_fsck(repository)
@@ -39,8 +46,19 @@ module RepositoryCheck
       false
     end
 
-    def has_pushes?(project)
+    def has_changes?(project)
       Project.with_push.exists?(project.id)
     end
+
+    def has_wiki_changes?(project)
+      return false unless project.wiki_enabled?
+
+      # Historically some projects never had their wiki repos initialized;
+      # this happens on project creation now. Let's initialize an empty repo
+      # if it is not already there.
+      return false unless project.create_wiki
+
+      has_changes?(project)
+    end
   end
 end
diff --git a/app/workers/repository_fork_worker.rb b/app/workers/repository_fork_worker.rb
index 07584fab7c8..5ef9b744db3 100644
--- a/app/workers/repository_fork_worker.rb
+++ b/app/workers/repository_fork_worker.rb
@@ -1,27 +1,39 @@
+# frozen_string_literal: true
+
 class RepositoryForkWorker
   include ApplicationWorker
   include Gitlab::ShellAdapter
   include ProjectStartImport
   include ProjectImportOptions
 
-  def perform(project_id, forked_from_repository_storage_path, source_disk_path)
-    project = Project.find(project_id)
+  def perform(*args)
+    target_project_id = args.shift
+    target_project = Project.find(target_project_id)
+
+    source_project = target_project.forked_from_project
+    unless source_project
+      return target_project.mark_import_as_failed('Source project cannot be found.')
+    end
+
+    fork_repository(target_project, source_project.repository_storage, source_project.disk_path)
+  end
+
+  private
 
-    return unless start_fork(project)
+  def fork_repository(target_project, source_repository_storage_name, source_disk_path)
+    return unless start_fork(target_project)
 
     Gitlab::Metrics.add_event(:fork_repository,
                               source_path: source_disk_path,
-                              target_path: project.disk_path)
+                              target_path: target_project.disk_path)
 
-    result = gitlab_shell.fork_repository(forked_from_repository_storage_path, source_disk_path,
-                                          project.repository_storage_path, project.disk_path)
-    raise "Unable to fork project #{project_id} for repository #{source_disk_path} -> #{project.disk_path}" unless result
+    result = gitlab_shell.fork_repository(source_repository_storage_name, source_disk_path,
+                                          target_project.repository_storage, target_project.disk_path)
+    raise "Unable to fork project #{target_project.id} for repository #{source_disk_path} -> #{target_project.disk_path}" unless result
 
-    project.after_import
+    target_project.after_import
   end
 
-  private
-
   def start_fork(project)
     return true if start(project)
 
diff --git a/app/workers/repository_import_worker.rb b/app/workers/repository_import_worker.rb
index d79b5ee5346..25fec542ac7 100644
--- a/app/workers/repository_import_worker.rb
+++ b/app/workers/repository_import_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class RepositoryImportWorker
   include ApplicationWorker
   include ExceptionBacktrace
diff --git a/app/workers/repository_remove_remote_worker.rb b/app/workers/repository_remove_remote_worker.rb
new file mode 100644
index 00000000000..a85e9fa9394
--- /dev/null
+++ b/app/workers/repository_remove_remote_worker.rb
@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class RepositoryRemoveRemoteWorker
+  include ApplicationWorker
+  include ExclusiveLeaseGuard
+
+  LEASE_TIMEOUT = 1.hour
+
+  attr_reader :project, :remote_name
+
+  def perform(project_id, remote_name)
+    @remote_name = remote_name
+    @project = Project.find_by_id(project_id)
+
+    return unless @project
+
+    logger.info("Removing remote #{remote_name} from project #{project.id}")
+
+    try_obtain_lease do
+      remove_remote = @project.repository.remove_remote(remote_name)
+
+      if remove_remote
+        logger.info("Remote #{remote_name} was successfully removed from project #{project.id}")
+      else
+        logger.error("Could not remove remote #{remote_name} from project #{project.id}")
+      end
+    end
+  end
+
+  def lease_timeout
+    LEASE_TIMEOUT
+  end
+
+  def lease_key
+    "remove_remote_#{project.id}_#{remote_name}"
+  end
+end
diff --git a/app/workers/repository_update_remote_mirror_worker.rb b/app/workers/repository_update_remote_mirror_worker.rb
new file mode 100644
index 00000000000..9d4e67deb9c
--- /dev/null
+++ b/app/workers/repository_update_remote_mirror_worker.rb
@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class RepositoryUpdateRemoteMirrorWorker
+  UpdateAlreadyInProgressError = Class.new(StandardError)
+  UpdateError = Class.new(StandardError)
+
+  include ApplicationWorker
+  include Gitlab::ShellAdapter
+
+  sidekiq_options retry: 3, dead: false
+
+  sidekiq_retry_in { |count| 30 * count }
+
+  sidekiq_retries_exhausted do |msg, _|
+    Sidekiq.logger.warn "Failed #{msg['class']} with #{msg['args']}: #{msg['error_message']}"
+  end
+
+  def perform(remote_mirror_id, scheduled_time)
+    remote_mirror = RemoteMirror.find(remote_mirror_id)
+    return if remote_mirror.updated_since?(scheduled_time)
+
+    raise UpdateAlreadyInProgressError if remote_mirror.update_in_progress?
+
+    remote_mirror.update_start
+
+    project = remote_mirror.project
+    current_user = project.creator
+    result = Projects::UpdateRemoteMirrorService.new(project, current_user).execute(remote_mirror)
+    raise UpdateError, result[:message] if result[:status] == :error
+
+    remote_mirror.update_finish
+  rescue UpdateAlreadyInProgressError
+    raise
+  rescue UpdateError => ex
+    fail_remote_mirror(remote_mirror, ex.message)
+    raise
+  rescue => ex
+    return unless remote_mirror
+
+    fail_remote_mirror(remote_mirror, ex.message)
+    raise UpdateError, "#{ex.class}: #{ex.message}"
+  end
+
+  private
+
+  def fail_remote_mirror(remote_mirror, message)
+    remote_mirror.mark_as_failed(message)
+
+    Rails.logger.error(message)
+  end
+end
diff --git a/app/workers/requests_profiles_worker.rb b/app/workers/requests_profiles_worker.rb
index 55c236e9e9d..ae022d43e29 100644
--- a/app/workers/requests_profiles_worker.rb
+++ b/app/workers/requests_profiles_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class RequestsProfilesWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/run_pipeline_schedule_worker.rb b/app/workers/run_pipeline_schedule_worker.rb
index 8f5138fc873..1f6cb18c812 100644
--- a/app/workers/run_pipeline_schedule_worker.rb
+++ b/app/workers/run_pipeline_schedule_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class RunPipelineScheduleWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/schedule_update_user_activity_worker.rb b/app/workers/schedule_update_user_activity_worker.rb
index d9376577597..ff42fb8f0e5 100644
--- a/app/workers/schedule_update_user_activity_worker.rb
+++ b/app/workers/schedule_update_user_activity_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ScheduleUpdateUserActivityWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/stage_update_worker.rb b/app/workers/stage_update_worker.rb
index e4b683fca33..ec8c8e3689f 100644
--- a/app/workers/stage_update_worker.rb
+++ b/app/workers/stage_update_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class StageUpdateWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/storage_migrator_worker.rb b/app/workers/storage_migrator_worker.rb
index f92421a667d..fa76fbac55c 100644
--- a/app/workers/storage_migrator_worker.rb
+++ b/app/workers/storage_migrator_worker.rb
@@ -1,29 +1,10 @@
+# frozen_string_literal: true
+
 class StorageMigratorWorker
   include ApplicationWorker
 
-  BATCH_SIZE = 100
-
   def perform(start, finish)
-    projects = build_relation(start, finish)
-
-    projects.with_route.find_each(batch_size: BATCH_SIZE) do |project|
-      Rails.logger.info "Starting storage migration of #{project.full_path} (ID=#{project.id})..."
-
-      begin
-        project.migrate_to_hashed_storage!
-      rescue => err
-        Rails.logger.error("#{err.message} migrating storage of #{project.full_path} (ID=#{project.id}), trace - #{err.backtrace}")
-      end
-    end
-  end
-
-  def build_relation(start, finish)
-    relation = Project
-    table = Project.arel_table
-
-    relation = relation.where(table[:id].gteq(start)) if start
-    relation = relation.where(table[:id].lteq(finish)) if finish
-
-    relation
+    migrator = Gitlab::HashedStorage::Migrator.new
+    migrator.bulk_migrate(start, finish)
   end
 end
diff --git a/app/workers/stuck_ci_jobs_worker.rb b/app/workers/stuck_ci_jobs_worker.rb
index fb26fa4c515..c78b7fac589 100644
--- a/app/workers/stuck_ci_jobs_worker.rb
+++ b/app/workers/stuck_ci_jobs_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class StuckCiJobsWorker
   include ApplicationWorker
   include CronjobQueue
@@ -38,7 +40,7 @@ class StuckCiJobsWorker
 
   def drop_stuck(status, timeout)
     search(status, timeout) do |build|
-      return unless build.stuck?
+      break unless build.stuck?
 
       drop_build :stuck, build, status, timeout
     end
diff --git a/app/workers/stuck_import_jobs_worker.rb b/app/workers/stuck_import_jobs_worker.rb
index fbb14efc525..79ce06dd66e 100644
--- a/app/workers/stuck_import_jobs_worker.rb
+++ b/app/workers/stuck_import_jobs_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class StuckImportJobsWorker
   include ApplicationWorker
   include CronjobQueue
@@ -22,7 +24,8 @@ class StuckImportJobsWorker
   end
 
   def mark_projects_with_jid_as_failed!
-    jids_and_ids = enqueued_projects_with_jid.pluck(:import_jid, :id).to_h
+    # TODO: Rollback this change to use SQL through #pluck
+    jids_and_ids = enqueued_projects_with_jid.map { |project| [project.import_jid, project.id] }.to_h
 
     # Find the jobs that aren't currently running or that exceeded the threshold.
     completed_jids = Gitlab::SidekiqStatus.completed_jids(jids_and_ids.keys)
@@ -42,15 +45,15 @@ class StuckImportJobsWorker
   end
 
   def enqueued_projects
-    Project.with_import_status(:scheduled, :started)
+    Project.joins_import_state.where("(import_state.status = 'scheduled' OR import_state.status = 'started') OR (projects.import_status = 'scheduled' OR projects.import_status = 'started')")
   end
 
   def enqueued_projects_with_jid
-    enqueued_projects.where.not(import_jid: nil)
+    enqueued_projects.where.not("import_state.jid IS NULL AND projects.import_jid IS NULL")
   end
 
   def enqueued_projects_without_jid
-    enqueued_projects.where(import_jid: nil)
+    enqueued_projects.where("import_state.jid IS NULL AND projects.import_jid IS NULL")
   end
 
   def error_message
diff --git a/app/workers/stuck_merge_jobs_worker.rb b/app/workers/stuck_merge_jobs_worker.rb
index 16394293c79..b0a62f76e94 100644
--- a/app/workers/stuck_merge_jobs_worker.rb
+++ b/app/workers/stuck_merge_jobs_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class StuckMergeJobsWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/system_hook_push_worker.rb b/app/workers/system_hook_push_worker.rb
index ceeaaf8d189..15e369ebcfb 100644
--- a/app/workers/system_hook_push_worker.rb
+++ b/app/workers/system_hook_push_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class SystemHookPushWorker
   include ApplicationWorker
 
diff --git a/app/workers/trending_projects_worker.rb b/app/workers/trending_projects_worker.rb
index 7eb65452a7d..3297a1fe3d0 100644
--- a/app/workers/trending_projects_worker.rb
+++ b/app/workers/trending_projects_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class TrendingProjectsWorker
   include ApplicationWorker
   include CronjobQueue
diff --git a/app/workers/update_head_pipeline_for_merge_request_worker.rb b/app/workers/update_head_pipeline_for_merge_request_worker.rb
index 76f84ff920f..0487a393566 100644
--- a/app/workers/update_head_pipeline_for_merge_request_worker.rb
+++ b/app/workers/update_head_pipeline_for_merge_request_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class UpdateHeadPipelineForMergeRequestWorker
   include ApplicationWorker
   include PipelineQueue
diff --git a/app/workers/update_merge_requests_worker.rb b/app/workers/update_merge_requests_worker.rb
index 74bb9993275..742841219b3 100644
--- a/app/workers/update_merge_requests_worker.rb
+++ b/app/workers/update_merge_requests_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class UpdateMergeRequestsWorker
   include ApplicationWorker
 
diff --git a/app/workers/update_user_activity_worker.rb b/app/workers/update_user_activity_worker.rb
index 27ec5cd33fb..15f01a70337 100644
--- a/app/workers/update_user_activity_worker.rb
+++ b/app/workers/update_user_activity_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class UpdateUserActivityWorker
   include ApplicationWorker
 
diff --git a/app/workers/upload_checksum_worker.rb b/app/workers/upload_checksum_worker.rb
index 65d40336f18..2a0536106d7 100644
--- a/app/workers/upload_checksum_worker.rb
+++ b/app/workers/upload_checksum_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class UploadChecksumWorker
   include ApplicationWorker
 
diff --git a/app/workers/wait_for_cluster_creation_worker.rb b/app/workers/wait_for_cluster_creation_worker.rb
index 19cdb279aaa..8aa1d9290fd 100644
--- a/app/workers/wait_for_cluster_creation_worker.rb
+++ b/app/workers/wait_for_cluster_creation_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class WaitForClusterCreationWorker
   include ApplicationWorker
   include ClusterQueue
diff --git a/app/workers/web_hook_worker.rb b/app/workers/web_hook_worker.rb
index dfc3f33ad9d..09219a24a16 100644
--- a/app/workers/web_hook_worker.rb
+++ b/app/workers/web_hook_worker.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class WebHookWorker
   include ApplicationWorker