Merge remote-tracking branch 'origin/master' into 21698-redis-runner-last-build

833 files changed, 12378 insertions, 4775 deletions

diff --git a/app/assets/images/auth_buttons/authentiq_64.png b/app/assets/images/auth_buttons/authentiq_64.png
new file mode 100644
index 00000000000..81767bbcc54
--- /dev/null
+++ b/app/assets/images/auth_buttons/authentiq_64.png
diff --git a/app/assets/javascripts/abuse_reports.js.es6 b/app/assets/javascripts/abuse_reports.js.es6
index 82e526ae0ef..8a260aae1b1 100644
--- a/app/assets/javascripts/abuse_reports.js.es6
+++ b/app/assets/javascripts/abuse_reports.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable no-param-reassign */
+
 ((global) => {
   const MAX_MESSAGE_LENGTH = 500;
   const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
diff --git a/app/assets/javascripts/admin.js b/app/assets/javascripts/admin.js
index 31852e4750c..5a7d823e84c 100644
--- a/app/assets/javascripts/admin.js
+++ b/app/assets/javascripts/admin.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, no-else-return, prefer-arrow-callback, camelcase, quotes, comma-dangle, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, no-else-return, prefer-arrow-callback, camelcase, quotes, comma-dangle, padded-blocks, max-len */
+/* global Turbolinks */
+
 (function() {
   this.Admin = (function() {
     function Admin() {
diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index 1c625e2f2b1..f60f27d1210 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -1,6 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, quotes, object-shorthand, camelcase, no-var, no-undef, comma-dangle, prefer-arrow-callback, indent, object-curly-spacing, quote-props, no-param-reassign, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, quotes, object-shorthand, camelcase, no-var, comma-dangle, prefer-arrow-callback, indent, object-curly-spacing, quote-props, no-param-reassign, padded-blocks, max-len */
+
 (function() {
-  this.Api = {
+  var Api = {
     groupsPath: "/api/:version/groups.json",
     groupPath: "/api/:version/groups/:id.json",
     namespacesPath: "/api/:version/namespaces.json",
@@ -10,6 +11,7 @@
     licensePath: "/api/:version/templates/licenses/:key",
     gitignorePath: "/api/:version/templates/gitignores/:key",
     gitlabCiYmlPath: "/api/:version/templates/gitlab_ci_ymls/:key",
+    dockerfilePath: "/api/:version/dockerfiles/:key",
     issuableTemplatePath: "/:namespace_path/:project_path/templates/:type/:key",
     group: function(group_id, callback) {
       var url = Api.buildUrl(Api.groupPath)
@@ -119,6 +121,10 @@
         return callback(file);
       });
     },
+    dockerfileYml: function(key, callback) {
+      var url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
+      $.get(url, callback);
+    },
     issueTemplate: function(namespacePath, projectPath, key, type, callback) {
       var url = Api.buildUrl(Api.issuableTemplatePath)
         .replace(':key', key)
@@ -140,4 +146,5 @@
     }
   };
 
+  window.Api = Api;
 }).call(this);
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index b7c4673c8e3..f0615481ed2 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -1,4 +1,11 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, no-undef, quotes, consistent-return, prefer-arrow-callback, comma-dangle, object-shorthand, no-new, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, quotes, consistent-return, prefer-arrow-callback, comma-dangle, object-shorthand, no-new, max-len */
+/* global bp */
+/* global Cookies */
+/* global Flash */
+/* global ConfirmDangerModal */
+/* global AwardsHandler */
+/* global Aside */
+
 // This is a manifest file that'll be compiled into including all the files listed below.
 // Add new JavaScript code in separate files in this directory and they'll automatically
 // be included in the compiled file accessible from http://example.com/assets/application.js
@@ -51,6 +58,7 @@
 /*= require_directory ./extensions */
 /*= require_directory ./lib/utils */
 /*= require_directory ./u2f */
+/*= require_directory ./droplab */
 /*= require_directory . */
 /*= require fuzzaldrin-plus */
 /*= require es6-promise.auto */
@@ -82,6 +90,14 @@
     // Set the default path for all cookies to GitLab's root directory
     Cookies.defaults.path = gon.relative_url_root || '/';
 
+    // `hashchange` is not triggered when link target is already in window.location
+    $body.on('click', 'a[href^="#"]', function() {
+      var href = this.getAttribute('href');
+      if (href.substr(1) === gl.utils.getLocationHash()) {
+        setTimeout(gl.utils.handleLocationHash, 1);
+      }
+    });
+
     // prevent default action for disabled buttons
     $('.btn').click(function(e) {
       if ($(this).hasClass('disabled')) {
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index f4302e2e9f6..107a7978a87 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, no-var, spaced-comment, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, no-unused-vars, no-else-return, prefer-template, quotes, comma-dangle, no-param-reassign, no-void, radix, keyword-spacing, space-before-blocks, brace-style, no-underscore-dangle, no-undef, no-plusplus, no-return-assign, camelcase, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, no-var, spaced-comment, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, no-unused-vars, no-else-return, prefer-template, quotes, comma-dangle, no-param-reassign, no-void, radix, keyword-spacing, space-before-blocks, brace-style, no-underscore-dangle, no-plusplus, no-return-assign, camelcase, padded-blocks */
+/* global Cookies */
+
 (function() {
   this.AwardsHandler = (function() {
     var FROM_SENTENCE_REGEX = /(?:, and | and |, )/; //For separating lists produced by ruby's Array#toSentence
diff --git a/app/assets/javascripts/behaviors/autosize.js b/app/assets/javascripts/behaviors/autosize.js
index a5d62f881fe..c62a4c5a456 100644
--- a/app/assets/javascripts/behaviors/autosize.js
+++ b/app/assets/javascripts/behaviors/autosize.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, consistent-return, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, consistent-return, padded-blocks, max-len */
+/* global autosize */
 
 /*= require jquery.ba-resize */
 /*= require autosize */
diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js
index 4edcaa15fe5..586f941a6e3 100644
--- a/app/assets/javascripts/behaviors/quick_submit.js
+++ b/app/assets/javascripts/behaviors/quick_submit.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, no-undef, prefer-arrow-callback, camelcase, max-len, consistent-return, quotes, object-shorthand, comma-dangle, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, camelcase, consistent-return, quotes, object-shorthand, comma-dangle, padded-blocks, max-len */
+
 // Quick Submit behavior
 //
 // When a child field of a form with a `js-quick-submit` class receives a
diff --git a/app/assets/javascripts/blob/blob_ci_yaml.js.es6 b/app/assets/javascripts/blob/blob_ci_yaml.js.es6
index 37531aaec9b..57bd13eecf8 100644
--- a/app/assets/javascripts/blob/blob_ci_yaml.js.es6
+++ b/app/assets/javascripts/blob/blob_ci_yaml.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable padded-blocks, no-param-reassign, comma-dangle */
+/* global Api */
+
 /*= require blob/template_selector */
 ((global) => {
 
diff --git a/app/assets/javascripts/blob/blob_dockerfile_selector.js.es6 b/app/assets/javascripts/blob/blob_dockerfile_selector.js.es6
new file mode 100644
index 00000000000..bdf95017613
--- /dev/null
+++ b/app/assets/javascripts/blob/blob_dockerfile_selector.js.es6
@@ -0,0 +1,18 @@
+/* global Api */
+/*= require blob/template_selector */
+
+(() => {
+  const global = window.gl || (window.gl = {});
+
+  class BlobDockerfileSelector extends gl.TemplateSelector {
+    requestFile(query) {
+      return Api.dockerfileYml(query.name, this.requestFileSuccess.bind(this));
+    }
+
+    requestFileSuccess(file) {
+      return super.requestFileSuccess(file);
+    }
+  }
+
+  global.BlobDockerfileSelector = BlobDockerfileSelector;
+})();
diff --git a/app/assets/javascripts/blob/blob_dockerfile_selectors.js.es6 b/app/assets/javascripts/blob/blob_dockerfile_selectors.js.es6
new file mode 100644
index 00000000000..9cee79fa5d5
--- /dev/null
+++ b/app/assets/javascripts/blob/blob_dockerfile_selectors.js.es6
@@ -0,0 +1,27 @@
+(() => {
+  const global = window.gl || (window.gl = {});
+
+  class BlobDockerfileSelectors {
+    constructor({ editor, $dropdowns } = {}) {
+      this.editor = editor;
+      this.$dropdowns = $dropdowns || $('.js-dockerfile-selector');
+      this.initSelectors();
+    }
+
+    initSelectors() {
+      const editor = this.editor;
+      this.$dropdowns.each((i, dropdown) => {
+        const $dropdown = $(dropdown);
+        return new gl.BlobDockerfileSelector({
+          editor,
+          pattern: /(Dockerfile)/,
+          data: $dropdown.data('data'),
+          wrapper: $dropdown.closest('.js-dockerfile-selector-wrap'),
+          dropdown: $dropdown,
+        });
+      });
+    }
+  }
+
+  global.BlobDockerfileSelectors = BlobDockerfileSelectors;
+})();
diff --git a/app/assets/javascripts/blob/blob_file_dropzone.js b/app/assets/javascripts/blob/blob_file_dropzone.js
index e0a2e8ac12e..eab686c45c3 100644
--- a/app/assets/javascripts/blob/blob_file_dropzone.js
+++ b/app/assets/javascripts/blob/blob_file_dropzone.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, camelcase, no-undef, object-shorthand, quotes, comma-dangle, prefer-arrow-callback, no-unused-vars, prefer-template, no-useless-escape, no-alert, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, camelcase, object-shorthand, quotes, comma-dangle, prefer-arrow-callback, no-unused-vars, prefer-template, no-useless-escape, no-alert, padded-blocks, max-len */
+/* global Dropzone */
+
 (function() {
   this.BlobFileDropzone = (function() {
     function BlobFileDropzone(form, method) {
diff --git a/app/assets/javascripts/blob/blob_gitignore_selector.js b/app/assets/javascripts/blob/blob_gitignore_selector.js
index 7e8f1062ab3..15563e429a0 100644
--- a/app/assets/javascripts/blob/blob_gitignore_selector.js
+++ b/app/assets/javascripts/blob/blob_gitignore_selector.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-rest-params, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-rest-params, padded-blocks */
+/* global Api */
 
 /*= require blob/template_selector */
 
diff --git a/app/assets/javascripts/blob/blob_gitignore_selectors.js b/app/assets/javascripts/blob/blob_gitignore_selectors.js
index 9a694daa010..d7f95093688 100644
--- a/app/assets/javascripts/blob/blob_gitignore_selectors.js
+++ b/app/assets/javascripts/blob/blob_gitignore_selectors.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-unused-expressions, no-cond-assign, no-sequences, no-undef, comma-dangle, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-unused-expressions, no-cond-assign, no-sequences, comma-dangle, padded-blocks, max-len */
+/* global BlobGitignoreSelector */
+
 (function() {
   this.BlobGitignoreSelectors = (function() {
     function BlobGitignoreSelectors(opts) {
diff --git a/app/assets/javascripts/blob/blob_license_selector.js b/app/assets/javascripts/blob/blob_license_selector.js
index 9a77fe35d55..d9c6f65a083 100644
--- a/app/assets/javascripts/blob/blob_license_selector.js
+++ b/app/assets/javascripts/blob/blob_license_selector.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-rest-params, comma-dangle, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-rest-params, comma-dangle, padded-blocks */
+/* global Api */
 
 /*= require blob/template_selector */
 
diff --git a/app/assets/javascripts/blob/blob_license_selectors.js.es6 b/app/assets/javascripts/blob/blob_license_selectors.js.es6
index adeb8ba1318..268640681d4 100644
--- a/app/assets/javascripts/blob/blob_license_selectors.js.es6
+++ b/app/assets/javascripts/blob/blob_license_selectors.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable no-unused-vars, no-param-reassign, padded-blocks */
+/* global BlobLicenseSelector */
+
 ((global) => {
   class BlobLicenseSelectors {
     constructor({ $dropdowns, editor }) {
diff --git a/app/assets/javascripts/blob/template_selector.js.es6 b/app/assets/javascripts/blob/template_selector.js.es6
index 0ff5c0fab05..7a1ee9998c8 100644
--- a/app/assets/javascripts/blob/template_selector.js.es6
+++ b/app/assets/javascripts/blob/template_selector.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable indent, comma-dangle, object-shorthand, func-names, space-before-function-paren, arrow-parens, no-unused-vars, class-methods-use-this, no-var, consistent-return, prefer-const, no-param-reassign, space-in-parens, max-len */
+
 ((global) => {
     class TemplateSelector {
       constructor({ dropdown, data, pattern, wrapper, editor, fileEndpoint, $input } = {}) {
diff --git a/app/assets/javascripts/blob_edit/blob_edit_bundle.js b/app/assets/javascripts/blob_edit/blob_edit_bundle.js
index b8eb0f60a8e..8c40e36a80a 100644
--- a/app/assets/javascripts/blob_edit/blob_edit_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_edit_bundle.js
@@ -1,4 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, vars-on-top, no-unused-vars, no-undef, no-new, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, vars-on-top, no-unused-vars, no-new, padded-blocks, max-len */
+/* global EditBlob */
+/* global NewCommitForm */
+
 /*= require_tree . */
 
 (function() {
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index 0c74aaaa852..fa43ff611cc 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -1,4 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, camelcase, no-param-reassign, no-undef, quotes, prefer-template, no-new, comma-dangle, one-var, one-var-declaration-per-line, prefer-arrow-callback, no-else-return, no-unused-vars, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, camelcase, no-param-reassign, quotes, prefer-template, no-new, comma-dangle, one-var, one-var-declaration-per-line, prefer-arrow-callback, no-else-return, no-unused-vars, padded-blocks, max-len */
+/* global ace */
+/* global BlobGitignoreSelectors */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
@@ -33,6 +36,9 @@
       new gl.BlobCiYamlSelectors({
         editor: this.editor
       });
+      new gl.BlobDockerfileSelectors({
+        editor: this.editor
+      });
     }
 
     EditBlob.prototype.initModePanesAndLinks = function() {
@@ -57,7 +63,7 @@
           content: this.editor.getValue()
         }, function(response) {
           currentPane.empty().append(response);
-          return currentPane.syntaxHighlight();
+          return currentPane.renderGFM();
         });
       } else {
         this.$toggleButton.show();
diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 7ba918a05f8..2c9ab61c94d 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable one-var, indent, quote-props, comma-dangle, space-before-function-paren */
+/* global Vue */
+/* global BoardService */
+
 //= require vue
 //= require vue-resource
 //= require Sortable
@@ -70,7 +73,7 @@ $(() => {
   });
 
   gl.IssueBoardsSearch = new Vue({
-    el: '#js-boards-seach',
+    el: '#js-boards-search',
     data: {
       filters: Store.state.filters
     },
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index 31de3b25284..8d1a0f482f9 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, space-before-function-paren, one-var, indent, radix */
+/* global Vue */
+/* global Sortable */
+
 //= require ./board_blank_state
 //= require ./board_delete
 //= require ./board_list
@@ -42,14 +45,28 @@
           const issue = this.list.findIssue(this.detailIssue.issue.id);
 
           if (issue) {
+            const offsetLeft = this.$el.offsetLeft;
             const boardsList = document.querySelectorAll('.boards-list')[0];
-            const right = (this.$el.offsetLeft + this.$el.offsetWidth) - boardsList.offsetWidth;
-            const left = boardsList.scrollLeft - this.$el.offsetLeft;
+            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.scrollLeft = right;
+              $(boardsList).animate({
+                scrollLeft: right
+              }, this.sortableOptions.animation);
             } else if (left > 0) {
-              boardsList.scrollLeft = this.$el.offsetLeft;
+              $(boardsList).animate({
+                scrollLeft: offsetLeft
+              }, this.sortableOptions.animation);
             }
           }
         },
@@ -62,7 +79,7 @@
       }
     },
     mounted () {
-      const options = gl.issueBoards.getBoardSortableDefaultOptions({
+      this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,
         group: 'boards',
         draggable: '.is-draggable',
@@ -81,7 +98,7 @@
         }
       });
 
-      this.sortable = Sortable.create(this.$el.parentNode, options);
+      this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
     },
   });
 })();
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js.es6 b/app/assets/javascripts/boards/components/board_blank_state.js.es6
index 691487b272a..0a47a22fad2 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.js.es6
+++ b/app/assets/javascripts/boards/components/board_blank_state.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable space-before-function-paren, comma-dangle, semi */
+/* global Vue */
+/* global ListLabel */
+
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index 2299dafd217..5fc50280811 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, space-before-function-paren, dot-notation */
+/* global Vue */
+
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/boards/components/board_delete.js.es6 b/app/assets/javascripts/boards/components/board_delete.js.es6
index c45e1926c5c..861600424a5 100644
--- a/app/assets/javascripts/boards/components/board_delete.js.es6
+++ b/app/assets/javascripts/boards/components/board_delete.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, space-before-function-paren, no-alert */
+/* global Vue */
+
 (() => {
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 43ebeef39c4..6711930622b 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, space-before-function-paren, max-len, no-plusplus */
+/* global Vue */
+/* global Sortable */
+
 //= require ./board_card
 //= require ./board_new_issue
 
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js.es6 b/app/assets/javascripts/boards/components/board_new_issue.js.es6
index a7989a2ff4c..2386d3a613c 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js.es6
+++ b/app/assets/javascripts/boards/components/board_new_issue.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, no-unused-vars */
+/* global Vue */
+/* global ListIssue */
+
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
index 1644a772737..02459722bbf 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -1,4 +1,10 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, space-before-function-paren, no-new */
+/* global Vue */
+/* global IssuableContext */
+/* global MilestoneSelect */
+/* global LabelsSelect */
+/* global Sidebar */
+
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6 b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
index 10ce746deb5..3f5cf8420a8 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, func-names, no-new, space-before-function-paren, one-var, indent */
+
 (() => {
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
@@ -45,10 +46,10 @@
 
           return $li.append($a.prepend($labelColor));
         },
-  			search: {
-  				fields: ['title']
-  			},
-  			filterable: true,
+        search: {
+          fields: ['title']
+        },
+        filterable: true,
         selectable: true,
         multiSelect: true,
         clicked (label, $el, e) {
diff --git a/app/assets/javascripts/boards/filters/due_date_filters.js.es6 b/app/assets/javascripts/boards/filters/due_date_filters.js.es6
index 9eceac4eddd..7e192e90fe6 100644
--- a/app/assets/javascripts/boards/filters/due_date_filters.js.es6
+++ b/app/assets/javascripts/boards/filters/due_date_filters.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* global Vue */
+
 Vue.filter('due-date', (value) => {
   const date = new Date(value);
   return $.datepicker.formatDate('M d, yy', date);
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
index 5f99de39122..d5859444a32 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable no-unused-vars, no-mixed-operators, prefer-const, comma-dangle, semi */
+/* global DocumentTouch */
+
 ((w) => {
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
@@ -18,6 +20,7 @@
 
   gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
     let defaultSortOptions = {
+      animation: 200,
       forceFallback: true,
       fallbackClass: 'is-dragging',
       fallbackOnBody: true,
diff --git a/app/assets/javascripts/boards/models/issue.js.es6 b/app/assets/javascripts/boards/models/issue.js.es6
index 21d735e8231..cd942c8332b 100644
--- a/app/assets/javascripts/boards/models/issue.js.es6
+++ b/app/assets/javascripts/boards/models/issue.js.es6
@@ -1,4 +1,9 @@
-/* eslint-disable */
+/* eslint-disable no-unused-vars, space-before-function-paren, arrow-body-style, space-in-parens, arrow-parens, comma-dangle, max-len */
+/* global Vue */
+/* global ListLabel */
+/* global ListMilestone */
+/* global ListUser */
+
 class ListIssue {
   constructor (obj) {
     this.id = obj.iid;
@@ -66,3 +71,5 @@ class ListIssue {
     return Vue.http.patch(url, data);
   }
 }
+
+window.ListIssue = ListIssue;
diff --git a/app/assets/javascripts/boards/models/label.js.es6 b/app/assets/javascripts/boards/models/label.js.es6
index 0910fe9a854..9af88d167d6 100644
--- a/app/assets/javascripts/boards/models/label.js.es6
+++ b/app/assets/javascripts/boards/models/label.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable no-unused-vars, space-before-function-paren */
+
 class ListLabel {
   constructor (obj) {
     this.id = obj.id;
@@ -9,3 +10,5 @@ class ListLabel {
     this.priority = (obj.priority !== null) ? obj.priority : Infinity;
   }
 }
+
+window.ListLabel = ListLabel;
diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6
index 429bd27c3fb..fb13f529b11 100644
--- a/app/assets/javascripts/boards/models/list.js.es6
+++ b/app/assets/javascripts/boards/models/list.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable space-before-function-paren, no-underscore-dangle, class-methods-use-this, consistent-return, no-plusplus, prefer-const, space-in-parens, no-shadow, no-param-reassign, max-len, no-unused-vars */
+/* global ListIssue */
+/* global ListLabel */
+
 class List {
   constructor (obj) {
     this.id = obj.id;
@@ -145,3 +148,5 @@ class List {
     });
   }
 }
+
+window.List = List;
diff --git a/app/assets/javascripts/boards/models/milestone.js.es6 b/app/assets/javascripts/boards/models/milestone.js.es6
index a48969e19c9..c867b06d320 100644
--- a/app/assets/javascripts/boards/models/milestone.js.es6
+++ b/app/assets/javascripts/boards/models/milestone.js.es6
@@ -1,7 +1,10 @@
-/* eslint-disable */
+/* eslint-disable no-unused-vars */
+
 class ListMilestone {
-  constructor (obj) {
+  constructor(obj) {
     this.id = obj.id;
     this.title = obj.title;
   }
 }
+
+window.ListMilestone = ListMilestone;
diff --git a/app/assets/javascripts/boards/models/user.js.es6 b/app/assets/javascripts/boards/models/user.js.es6
index 583a973fc46..8e9de4d4cbb 100644
--- a/app/assets/javascripts/boards/models/user.js.es6
+++ b/app/assets/javascripts/boards/models/user.js.es6
@@ -1,9 +1,12 @@
-/* eslint-disable */
+/* eslint-disable no-unused-vars */
+
 class ListUser {
-  constructor (user) {
+  constructor(user) {
     this.id = user.id;
     this.name = user.name;
     this.username = user.username;
     this.avatar = user.avatar_url;
   }
 }
+
+window.ListUser = ListUser;
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index f59a2ed7937..f18633f0913 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable space-before-function-paren, comma-dangle, no-param-reassign, camelcase, prefer-const, no-extra-semi, max-len, no-unused-vars */
+/* global Vue */
+
 class BoardService {
   constructor (root, boardId) {
     this.lists = Vue.resource(`${root}/${boardId}/lists{/id}`, {}, {
@@ -63,4 +65,6 @@ class BoardService {
       issue
     });
   }
-};
+}
+
+window.BoardService = BoardService;
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index bb2a4de8b18..e7a14ea5bca 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, space-before-function-paren, one-var, indent, space-in-parens, no-shadow, radix, dot-notation, semi, max-len */
+/* global Cookies */
+/* global List */
+
 (() => {
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
diff --git a/app/assets/javascripts/boards/vue_resource_interceptor.js.es6 b/app/assets/javascripts/boards/vue_resource_interceptor.js.es6
index 80f137ca12e..3723a2039f9 100644
--- a/app/assets/javascripts/boards/vue_resource_interceptor.js.es6
+++ b/app/assets/javascripts/boards/vue_resource_interceptor.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable func-names, prefer-arrow-callback, no-unused-vars, no-plusplus */
+/* global Vue */
+
 Vue.http.interceptors.push((request, next) => {
   Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1;
 
diff --git a/app/assets/javascripts/breakpoints.js b/app/assets/javascripts/breakpoints.js
index e7ceb602601..a7e72430141 100644
--- a/app/assets/javascripts/breakpoints.js
+++ b/app/assets/javascripts/breakpoints.js
@@ -1,6 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, quotes, no-shadow, prefer-arrow-callback, prefer-template, consistent-return, padded-blocks, no-return-assign, new-parens, no-param-reassign, no-undef, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, quotes, no-shadow, prefer-arrow-callback, prefer-template, consistent-return, padded-blocks, no-return-assign, new-parens, no-param-reassign, max-len */
+
 (function() {
-  this.Breakpoints = (function() {
+  var Breakpoints = (function() {
     var BreakpointInstance, instance;
 
     function Breakpoints() {}
@@ -68,4 +69,5 @@
     };
   })(this));
 
+  window.Breakpoints = Breakpoints;
 }).call(this);
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index 116a47b0907..fca47002870 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -1,6 +1,11 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-use-before-define, no-param-reassign, no-undef, quotes, yoda, no-else-return, consistent-return, comma-dangle, semi, object-shorthand, prefer-template, one-var, one-var-declaration-per-line, no-unused-vars, max-len, vars-on-top, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-use-before-define, no-param-reassign, quotes, yoda, no-else-return, consistent-return, comma-dangle, semi, object-shorthand, prefer-template, one-var, one-var-declaration-per-line, no-unused-vars, max-len, vars-on-top, padded-blocks */
+/* global Breakpoints */
+/* global Turbolinks */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var AUTO_SCROLL_OFFSET = 75;
+  var DOWN_BUILD_TRACE = '#down-build-trace';
 
   this.Build = (function() {
     Build.interval = null;
@@ -16,6 +21,17 @@
       this.buildStage = options.buildStage;
       this.updateDropdown = bind(this.updateDropdown, this);
       this.$document = $(document);
+      this.$body = $('body');
+      this.$buildTrace = $('#build-trace');
+      this.$autoScrollContainer = $('.autoscroll-container');
+      this.$autoScrollStatus = $('#autoscroll-status');
+      this.$autoScrollStatusText = this.$autoScrollStatus.find('.status-text');
+      this.$upBuildTrace = $('#up-build-trace');
+      this.$downBuildTrace = $(DOWN_BUILD_TRACE);
+      this.$scrollTopBtn = $('#scroll-top');
+      this.$scrollBottomBtn = $('#scroll-bottom');
+      this.$buildRefreshAnimation = $('.js-build-refresh');
+
       clearInterval(Build.interval);
       // Init breakpoint checker
       this.bp = Breakpoints.get();
@@ -29,6 +45,7 @@
 
       this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
       this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
+      this.$document.on('scroll', this.initScrollMonitor.bind(this));
       $(window).off('resize.build').on('resize.build', this.sidebarOnResize.bind(this));
       $('a', this.$buildScroll).off('click.stepTrace').on('click.stepTrace', this.stepTrace);
       this.updateArtifactRemoveDate();
@@ -37,18 +54,6 @@
         this.initScrollButtonAffix();
       }
       if (this.buildStatus === "running" || this.buildStatus === "pending") {
-        // Bind autoscroll button to follow build output
-        $('#autoscroll-button').on('click', function() {
-          var state;
-          state = $(this).data("state");
-          if ("enabled" === state) {
-            $(this).data("state", "disabled");
-            return $(this).text("Enable autoscroll");
-          } else {
-            $(this).data("state", "enabled");
-            return $(this).text("Disable autoscroll");
-          }
-        });
         Build.interval = setInterval((function(_this) {
           // Check for new build output if user still watching build page
           // Only valid for runnig build when output changes during time
@@ -87,10 +92,14 @@
         dataType: 'json',
         success: function(buildData) {
           $('.js-build-output').html(buildData.trace_html);
+          if (window.location.hash === DOWN_BUILD_TRACE) {
+            $("html,body").scrollTop(this.$buildTrace.height());
+          }
           if (removeRefreshStatuses.indexOf(buildData.status) >= 0) {
-            return $('.js-build-refresh').remove();
+            this.$buildRefreshAnimation.remove();
+            return this.initScrollMonitor();
           }
-        }
+        }.bind(this)
       });
     };
 
@@ -100,6 +109,8 @@
         dataType: "json",
         success: (function(_this) {
           return function(log) {
+            var pageUrl;
+
             if (log.state) {
               _this.state = log.state;
             }
@@ -111,7 +122,12 @@
               }
               return _this.checkAutoscroll();
             } else if (log.status !== _this.buildStatus) {
-              return Turbolinks.visit(_this.pageUrl);
+              pageUrl = _this.pageUrl;
+              if (_this.$autoScrollStatus.data('state') === 'enabled') {
+                pageUrl += DOWN_BUILD_TRACE;
+              }
+
+              return Turbolinks.visit(pageUrl);
             }
           };
         })(this)
@@ -119,22 +135,95 @@
     };
 
     Build.prototype.checkAutoscroll = function() {
-      if ("enabled" === $("#autoscroll-button").data("state")) {
-        return $("html,body").scrollTop($("#build-trace").height());
+      if (this.$autoScrollStatus.data("state") === "enabled") {
+        return $("html,body").scrollTop(this.$buildTrace.height());
+      }
+
+      // Handle a situation where user started new build
+      // but never scrolled a page
+      if (!this.$scrollTopBtn.is(':visible') &&
+          !this.$scrollBottomBtn.is(':visible') &&
+          !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+        this.$scrollBottomBtn.show();
       }
     };
 
     Build.prototype.initScrollButtonAffix = function() {
-      var $body, $buildTrace;
-      $body = $('body');
-      $buildTrace = $('#build-trace');
-      return this.$buildScroll.affix({
-        offset: {
-          bottom: function() {
-            return $body.outerHeight() - ($buildTrace.outerHeight() + $buildTrace.offset().top);
-          }
+      // Hide everything initially
+      this.$scrollTopBtn.hide();
+      this.$scrollBottomBtn.hide();
+      this.$autoScrollContainer.hide();
+    }
+
+    // Page scroll listener to detect if user has scrolling page
+    // and handle following cases
+    // 1) User is at Top of Build Log;
+    //      - Hide Top Arrow button
+    //      - Show Bottom Arrow button
+    //      - Disable Autoscroll and hide indicator (when build is running)
+    // 2) User is at Bottom of Build Log;
+    //      - Show Top Arrow button
+    //      - Hide Bottom Arrow button
+    //      - Enable Autoscroll and show indicator (when build is running)
+    // 3) User is somewhere in middle of Build Log;
+    //      - Show Top Arrow button
+    //      - Show Bottom Arrow button
+    //      - Disable Autoscroll and hide indicator (when build is running)
+    Build.prototype.initScrollMonitor = function() {
+      if (!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+        // User is somewhere in middle of Build Log
+
+        this.$scrollTopBtn.show();
+
+        if (this.buildStatus === 'success' || this.buildStatus === 'failed') { // Check if Build is completed
+          this.$scrollBottomBtn.show();
+        } else if (this.$buildRefreshAnimation.is(':visible') && !gl.utils.isInViewport(this.$buildRefreshAnimation.get(0))) {
+          this.$scrollBottomBtn.show();
+        } else {
+          this.$scrollBottomBtn.hide();
         }
-      });
+
+        // Hide Autoscroll Status Indicator
+        if (this.$scrollBottomBtn.is(':visible')) {
+          this.$autoScrollContainer.hide();
+          this.$autoScrollStatusText.removeClass('animate');
+        } else {
+          this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
+          this.$autoScrollStatusText.addClass('animate');
+        }
+      } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+        // User is at Top of Build Log
+
+        this.$scrollTopBtn.hide();
+        this.$scrollBottomBtn.show();
+
+        this.$autoScrollContainer.hide();
+        this.$autoScrollStatusText.removeClass('animate');
+      } else if ((!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) ||
+                 (this.$buildRefreshAnimation.is(':visible') && gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)))) {
+        // User is at Bottom of Build Log
+
+        this.$scrollTopBtn.show();
+        this.$scrollBottomBtn.hide();
+
+        // Show and Reposition Autoscroll Status Indicator
+        this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
+        this.$autoScrollStatusText.addClass('animate');
+      } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+        // Build Log height is small
+
+        this.$scrollTopBtn.hide();
+        this.$scrollBottomBtn.hide();
+
+        // Hide Autoscroll Status Indicator
+        this.$autoScrollContainer.hide();
+        this.$autoScrollStatusText.removeClass('animate');
+      }
+
+      if (this.buildStatus === "running" || this.buildStatus === "pending") {
+        // Check if Refresh Animation is in Viewport and enable Autoscroll, disable otherwise.
+        this.$autoScrollStatus.data("state", gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)) ? 'enabled' : 'disabled');
+      }
     };
 
     Build.prototype.shouldHideSidebarForViewport = function() {
@@ -193,6 +282,7 @@
     };
 
     Build.prototype.stepTrace = function(e) {
+      var $currentTarget;
       e.preventDefault();
       $currentTarget = $(e.currentTarget);
       $.scrollTo($currentTarget.attr('href'), {
diff --git a/app/assets/javascripts/build_variables.js.es6 b/app/assets/javascripts/build_variables.js.es6
index 0ecd20bc11e..993424d422f 100644
--- a/app/assets/javascripts/build_variables.js.es6
+++ b/app/assets/javascripts/build_variables.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable func-names, prefer-arrow-callback, space-before-blocks, space-before-function-paren, comma-spacing, max-len */
+
 $(function(){
   $('.reveal-variables').off('click').on('click',function(){
     $('.js-build').toggle().niceScroll();
diff --git a/app/assets/javascripts/ci_lint_editor.js.es6 b/app/assets/javascripts/ci_lint_editor.js.es6
new file mode 100644
index 00000000000..56ffaa765a8
--- /dev/null
+++ b/app/assets/javascripts/ci_lint_editor.js.es6
@@ -0,0 +1,18 @@
+(() => {
+  window.gl = window.gl || {};
+
+  class CILintEditor {
+    constructor() {
+      this.editor = window.ace.edit('ci-editor');
+      this.textarea = document.querySelector('#content');
+
+      this.editor.getSession().setMode('ace/mode/yaml');
+      this.editor.on('input', () => {
+        const content = this.editor.getSession().getValue();
+        this.textarea.value = content;
+      });
+    }
+  }
+
+  gl.CILintEditor = CILintEditor;
+})();
diff --git a/app/assets/javascripts/commit.js b/app/assets/javascripts/commit.js
index 67509ea7d91..67b33a4d7ee 100644
--- a/app/assets/javascripts/commit.js
+++ b/app/assets/javascripts/commit.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-undef, padded-blocks */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, padded-blocks */
+/* global CommitFile */
+
 (function() {
   this.Commit = (function() {
     function Commit() {
diff --git a/app/assets/javascripts/commit/file.js b/app/assets/javascripts/commit/file.js
index 600bac8834a..27512312c7c 100644
--- a/app/assets/javascripts/commit/file.js
+++ b/app/assets/javascripts/commit/file.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, padded-blocks */
+/* global ImageFile */
+
 (function() {
   this.CommitFile = (function() {
     function CommitFile(file) {
diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js
index 3627aaf5080..24a6e4ff0e9 100644
--- a/app/assets/javascripts/commits.js
+++ b/app/assets/javascripts/commits.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, consistent-return, no-undef, no-return-assign, no-param-reassign, one-var, no-var, one-var-declaration-per-line, no-unused-vars, prefer-template, object-shorthand, comma-dangle, padded-blocks, max-len, prefer-arrow-callback */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, consistent-return, no-return-assign, no-param-reassign, one-var, no-var, one-var-declaration-per-line, no-unused-vars, prefer-template, object-shorthand, comma-dangle, padded-blocks, max-len, prefer-arrow-callback */
+/* global Pager */
+
 (function() {
   this.CommitsList = (function() {
     function CommitsList() {}
@@ -6,8 +8,8 @@
     CommitsList.timer = null;
 
     CommitsList.init = function(limit) {
-      $("body").on("click", ".day-commits-table li.commit", function(event) {
-        if (event.target.nodeName !== "A") {
+      $("body").on("click", ".day-commits-table li.commit", function(e) {
+        if (e.target.nodeName !== "A") {
           location.href = $(this).attr("url");
           e.stopPropagation();
           return false;
diff --git a/app/assets/javascripts/compare_autocomplete.js.es6 b/app/assets/javascripts/compare_autocomplete.js.es6
index bd980f87e72..251f2ded347 100644
--- a/app/assets/javascripts/compare_autocomplete.js.es6
+++ b/app/assets/javascripts/compare_autocomplete.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* 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, no-dupe-keys, wrap-iife, padded-blocks, max-len */
+
 (function() {
   this.CompareAutocomplete = (function() {
     function CompareAutocomplete() {
@@ -54,6 +55,13 @@
           $('.dropdown-toggle-text', $dropdown).text(text);
           $dropdownContainer.removeClass('open');
         });
+
+        $dropdownContainer.on('click', '.dropdown-content a', (e) => {
+          $dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
+          if ($dropdown.hasClass('has-tooltip')) {
+            $dropdown.tooltip('fixTitle');
+          }
+        });
       });
     };
 
diff --git a/app/assets/javascripts/copy_to_clipboard.js b/app/assets/javascripts/copy_to_clipboard.js
index efa228a75d9..6a13f38588d 100644
--- a/app/assets/javascripts/copy_to_clipboard.js
+++ b/app/assets/javascripts/copy_to_clipboard.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, no-undef, prefer-template, quotes, no-unused-vars, prefer-arrow-callback, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, prefer-arrow-callback, padded-blocks, max-len */
+/* global Clipboard */
 
 /*= require clipboard */
 
diff --git a/app/assets/javascripts/create_label.js.es6 b/app/assets/javascripts/create_label.js.es6
index 744aa0afa03..947c129d5b5 100644
--- a/app/assets/javascripts/create_label.js.es6
+++ b/app/assets/javascripts/create_label.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-param-reassign, wrap-iife, max-len */
+/* global Api */
+
 (function (w) {
   class CreateLabelDropdown {
     constructor ($el, namespacePath, projectPath) {
diff --git a/app/assets/javascripts/diff.js.es6 b/app/assets/javascripts/diff.js.es6
index 9cf33e62958..5e1a4c948aa 100644
--- a/app/assets/javascripts/diff.js.es6
+++ b/app/assets/javascripts/diff.js.es6
@@ -20,7 +20,7 @@
         .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
         .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this));
 
-      this.highlighSelectedLine();
+      this.openAnchoredDiff();
     }
 
     handleClickUnfold(e) {
@@ -61,13 +61,22 @@
       $.get(link, params, response => $target.parent().replaceWith(response));
     }
 
-    openAnchoredDiff(anchoredDiff, cb) {
-      const diffTitle = $(`#file-path-${anchoredDiff}`);
+    openAnchoredDiff(cb) {
+      const locationHash = gl.utils.getLocationHash();
+      const anchoredDiff = locationHash && locationHash.split('_')[0];
+
+      if (!anchoredDiff) return;
+
+      const diffTitle = $(`#${anchoredDiff}`);
       const diffFile = diffTitle.closest('.diff-file');
       const nothingHereBlock = $('.nothing-here-block:visible', diffFile);
       if (nothingHereBlock.length) {
-        diffFile.singleFileDiff(true, cb);
-      } else {
+        const clickTarget = $('.file-title, .click-to-expand', diffFile);
+        diffFile.data('singleFileDiff').toggleDiff(clickTarget, () => {
+          this.highlighSelectedLine();
+          if (cb) cb();
+        });
+      } else if (cb) {
         cb();
       }
     }
diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
index 52e2846d279..c59d3996fab 100644
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, quotes, no-lonely-if, semi, max-len */
+/* global Vue */
+/* global CommentsStore */
+
 (() => {
   const CommentAndResolveBtn = Vue.extend({
     props: {
diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6 b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
index 983e554b9c1..f47867fc3b0 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
@@ -1,6 +1,10 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, guard-for-in, no-restricted-syntax, one-var, indent, space-before-function-paren, no-plusplus, no-lonely-if, no-continue, brace-style, max-len, quotes, semi */
+/* global Vue */
+/* global DiscussionMixins */
+/* global CommentsStore */
+
 (() => {
-  JumpToDiscussion = Vue.extend({
+  const JumpToDiscussion = Vue.extend({
     mixins: [DiscussionMixins],
     props: {
       discussionId: String
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
index 27af9fc96ad..5852b8bbdb7 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
@@ -1,4 +1,9 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, no-new, max-len */
+/* global Vue */
+/* global CommentsStore */
+/* global ResolveService */
+/* global Flash */
+
 (() => {
   const ResolveBtn = Vue.extend({
     props: {
@@ -54,9 +59,11 @@
     },
     methods: {
       updateTooltip: function () {
-        $(this.$refs.button)
-          .tooltip('hide')
-          .tooltip('fixTitle');
+        this.$nextTick(() => {
+          $(this.$refs.button)
+            .tooltip('hide')
+            .tooltip('fixTitle');
+        });
       },
       resolve: function () {
         if (!this.canResolve) return;
@@ -85,7 +92,7 @@
             new Flash('An error occurred when trying to resolve a comment. Please try again.', 'alert');
           }
 
-          this.$nextTick(this.updateTooltip);
+          this.updateTooltip();
         });
       }
     },
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
index 9522ccb49da..72cdae812bc 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
@@ -1,4 +1,8 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, object-shorthand, func-names, no-param-reassign */
+/* global Vue */
+/* global DiscussionMixins */
+/* global CommentsStore */
+
 ((w) => {
   w.ResolveCount = Vue.extend({
     mixins: [DiscussionMixins],
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
index b945a09fcbe..ee5f62b2d9e 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
@@ -1,4 +1,8 @@
-/* eslint-disable */
+/* eslint-disable object-shorthand, func-names, space-before-function-paren, comma-dangle, no-else-return, quotes, max-len */
+/* global Vue */
+/* global CommentsStore */
+/* global ResolveService */
+
 (() => {
   const ResolveDiscussionBtn = Vue.extend({
     props: {
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
index bd4c20aed8b..1b3a57d0962 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
@@ -1,6 +1,7 @@
-/* eslint-disable */
-//= require vue
-//= require vue-resource
+/* eslint-disable func-names, comma-dangle, new-cap, no-new */
+/* global Vue */
+/* global ResolveCount */
+
 //= require_directory ./models
 //= require_directory ./stores
 //= require_directory ./services
diff --git a/app/assets/javascripts/diff_notes/mixins/discussion.js.es6 b/app/assets/javascripts/diff_notes/mixins/discussion.js.es6
index 7a929017f36..a9ea18bf82b 100644
--- a/app/assets/javascripts/diff_notes/mixins/discussion.js.es6
+++ b/app/assets/javascripts/diff_notes/mixins/discussion.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable object-shorthand, func-names, guard-for-in, no-restricted-syntax, comma-dangle, no-plusplus, no-param-reassign, max-len */
+
 ((w) => {
   w.DiscussionMixins = {
     computed: {
diff --git a/app/assets/javascripts/diff_notes/models/discussion.js.es6 b/app/assets/javascripts/diff_notes/models/discussion.js.es6
index badcdccc840..fa518ba4d33 100644
--- a/app/assets/javascripts/diff_notes/models/discussion.js.es6
+++ b/app/assets/javascripts/diff_notes/models/discussion.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable space-before-function-paren, camelcase, guard-for-in, no-restricted-syntax, no-unused-vars, max-len */
+/* global Vue */
+/* global NoteModel */
+
 class DiscussionModel {
   constructor (discussionId) {
     this.id = discussionId;
@@ -69,7 +72,7 @@ class DiscussionModel {
 
       gl.utils.localTimeAgo($('.js-timeago', `${discussionSelector}`));
     } else {
-       $discussionHeadline.remove();
+      $discussionHeadline.remove();
     }
   }
 
@@ -89,3 +92,5 @@ class DiscussionModel {
     return false;
   }
 }
+
+window.DiscussionModel = DiscussionModel;
diff --git a/app/assets/javascripts/diff_notes/models/note.js.es6 b/app/assets/javascripts/diff_notes/models/note.js.es6
index d0541b02632..f3a7cba5ef6 100644
--- a/app/assets/javascripts/diff_notes/models/note.js.es6
+++ b/app/assets/javascripts/diff_notes/models/note.js.es6
@@ -1,6 +1,7 @@
-/* eslint-disable */
+/* eslint-disable camelcase, no-unused-vars */
+
 class NoteModel {
-  constructor (discussionId, noteId, canResolve, resolved, resolved_by) {
+  constructor(discussionId, noteId, canResolve, resolved, resolved_by) {
     this.discussionId = discussionId;
     this.id = noteId;
     this.canResolve = canResolve;
@@ -8,3 +9,5 @@ class NoteModel {
     this.resolved_by = resolved_by;
   }
 }
+
+window.NoteModel = NoteModel;
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js.es6 b/app/assets/javascripts/diff_notes/services/resolve.js.es6
index 86953ce7ffb..78c74985f78 100644
--- a/app/assets/javascripts/diff_notes/services/resolve.js.es6
+++ b/app/assets/javascripts/diff_notes/services/resolve.js.es6
@@ -1,4 +1,8 @@
-/* eslint-disable */
+/* eslint-disable class-methods-use-this, one-var, indent, camelcase, no-new, comma-dangle, semi, no-param-reassign, max-len */
+/* global Vue */
+/* global Flash */
+/* global CommentsStore */
+
 ((w) => {
   class ResolveServiceClass {
     constructor() {
diff --git a/app/assets/javascripts/diff_notes/stores/comments.js.es6 b/app/assets/javascripts/diff_notes/stores/comments.js.es6
index f42ca406bb1..1a7abbc6f75 100644
--- a/app/assets/javascripts/diff_notes/stores/comments.js.es6
+++ b/app/assets/javascripts/diff_notes/stores/comments.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable object-shorthand, func-names, camelcase, prefer-const, no-restricted-syntax, guard-for-in, comma-dangle, max-len, no-param-reassign */
+/* global Vue */
+/* global DiscussionModel */
+
 ((w) => {
   w.CommentsStore = {
     state: {},
diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
index 413117c2226..99a34651639 100644
--- a/app/assets/javascripts/dispatcher.js.es6
+++ b/app/assets/javascripts/dispatcher.js.es6
@@ -1,4 +1,42 @@
-/* eslint-disable */
+/* 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, padded-blocks */
+/* global UsernameValidator */
+/* global ActiveTabMemoizer */
+/* global ShortcutsNavigation */
+/* global Build */
+/* global Issuable */
+/* global Issue */
+/* global ShortcutsIssuable */
+/* global ZenMode */
+/* global Milestone */
+/* global GLForm */
+/* global IssuableForm */
+/* global LabelsSelect */
+/* global MilestoneSelect */
+/* global MergedButtons */
+/* global Commit */
+/* global NotificationsForm */
+/* global TreeView */
+/* global NotificationsDropdown */
+/* global UsersSelect */
+/* global GroupAvatar */
+/* global LineHighlighter */
+/* global ShortcutsBlob */
+/* global ProjectFork */
+/* global BuildArtifacts */
+/* global GroupsSelect */
+/* global Search */
+/* global Admin */
+/* global NamespaceSelects */
+/* global ShortcutsDashboardNavigation */
+/* global Project */
+/* global ProjectAvatar */
+/* global CompareAutocomplete */
+/* global ProjectNew */
+/* global Star */
+/* global ProjectShow */
+/* global Labels */
+/* global Shortcuts */
+
 (function() {
   var Dispatcher;
 
@@ -26,6 +64,17 @@
           new UsernameValidator();
           new ActiveTabMemoizer();
           break;
+        case 'sessions:create':
+          if (!gon.u2f) break;
+          window.gl.u2fAuthenticate = new gl.U2FAuthenticate(
+            $("#js-authenticate-u2f"),
+            '#js-login-u2f-form',
+            gon.u2f,
+            document.querySelector('#js-login-2fa-device'),
+            document.querySelector('.js-2fa-form'),
+          );
+          window.gl.u2fAuthenticate.start();
+          break;
         case 'projects:boards:show':
         case 'projects:boards:index':
           shortcut_handler = new ShortcutsNavigation();
@@ -35,8 +84,13 @@
           break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
+          if (gl.FilteredSearchManager) {
+            new gl.FilteredSearchManager();
+          }
           Issuable.init();
-          new gl.IssuableBulkActions();
+          new gl.IssuableBulkActions({
+            prefixId: page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_',
+          });
           shortcut_handler = new ShortcutsNavigation();
           break;
         case 'projects:issues:show':
@@ -98,7 +152,6 @@
           new MergedButtons();
           break;
         case 'projects:merge_requests:commits':
-        case 'projects:merge_requests:builds':
           new MergedButtons();
           break;
         case "projects:merge_requests:diffs":
@@ -106,10 +159,6 @@
           new ZenMode();
           new MergedButtons();
           break;
-        case 'projects:merge_requests:index':
-          shortcut_handler = new ShortcutsNavigation();
-          Issuable.init();
-          break;
         case 'dashboard:activity':
           new gl.Activities();
           break;
@@ -122,8 +171,10 @@
           new ZenMode();
           shortcut_handler = new ShortcutsNavigation();
           break;
-        case 'projects:commit:builds':
-          new gl.Pipelines();
+        case 'projects:commit:pipelines':
+          new gl.MiniPipelineGraph({
+            container: '.js-pipeline-table',
+          });
           break;
         case 'projects:commits:show':
         case 'projects:activity':
@@ -162,7 +213,9 @@
           new gl.Members();
           new UsersSelect();
           break;
-        case 'projects:project_members:index':
+        case 'projects:members:show':
+          new gl.MemberExpirationDate('.js-access-expiration-date-groups');
+          new GroupsSelect();
           new gl.MemberExpirationDate();
           new gl.Members();
           new UsersSelect();
@@ -208,10 +261,6 @@
         case 'projects:artifacts:browse':
           new BuildArtifacts();
           break;
-        case 'projects:group_links:index':
-          new gl.MemberExpirationDate();
-          new GroupsSelect();
-          break;
         case 'search:show':
           new Search();
           break;
@@ -222,6 +271,10 @@
         case 'projects:variables:index':
           new gl.ProjectVariables();
           break;
+        case 'ci:lints:create':
+        case 'ci:lints:show':
+          new gl.CILintEditor();
+          break;
       }
       switch (path.first()) {
         case 'admin':
diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js
new file mode 100644
index 00000000000..ed545ec8748
--- /dev/null
+++ b/app/assets/javascripts/droplab/droplab.js
@@ -0,0 +1,701 @@
+/* eslint-disable */
+// Determine where to place this
+if (typeof Object.assign != 'function') {
+  Object.assign = function (target, varArgs) { // .length of function is 2
+    'use strict';
+    if (target == null) { // TypeError if undefined or null
+      throw new TypeError('Cannot convert undefined or null to object');
+    }
+
+    var to = Object(target);
+
+    for (var index = 1; index < arguments.length; index++) {
+      var nextSource = arguments[index];
+
+      if (nextSource != null) { // Skip over if undefined or null
+        for (var nextKey in nextSource) {
+          // Avoid bugs when hasOwnProperty is shadowed
+          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+            to[nextKey] = nextSource[nextKey];
+          }
+        }
+      }
+    }
+    return to;
+  };
+}
+
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.droplab = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+var DATA_TRIGGER = 'data-dropdown-trigger';
+var DATA_DROPDOWN = 'data-dropdown';
+
+module.exports = {
+  DATA_TRIGGER: DATA_TRIGGER,
+  DATA_DROPDOWN: DATA_DROPDOWN,
+}
+
+},{}],2:[function(require,module,exports){
+// Custom event support for IE
+if ( typeof CustomEvent === "function" ) {
+  module.exports = CustomEvent;
+} else {
+  require('./window')(function(w){
+    var CustomEvent = function ( event, params ) {
+      params = params || { bubbles: false, cancelable: false, detail: undefined };
+      var evt = document.createEvent( 'CustomEvent' );
+      evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+      return evt;
+    }
+    CustomEvent.prototype = w.Event.prototype;
+
+    w.CustomEvent = CustomEvent;
+  });
+  module.exports = CustomEvent;
+}
+
+},{"./window":11}],3:[function(require,module,exports){
+var CustomEvent = require('./custom_event_polyfill');
+var utils = require('./utils');
+
+var DropDown = function(list) {
+  this.hidden = true;
+  this.list = list;
+  this.items = [];
+  this.getItems();
+  this.addEvents();
+  this.initialState = list.innerHTML;
+};
+
+Object.assign(DropDown.prototype, {
+  getItems: function() {
+    this.items = [].slice.call(this.list.querySelectorAll('li'));
+    return this.items;
+  },
+
+  clickEvent: function(e) {
+    // climb up the tree to find the LI
+    var selected = utils.closest(e.target, 'LI');
+
+    if(selected) {
+      e.preventDefault();
+      this.hide();
+      var listEvent = new CustomEvent('click.dl', {
+        detail: {
+          list: this,
+          selected: selected,
+          data: e.target.dataset,
+        },
+      });
+      this.list.dispatchEvent(listEvent);
+    }
+  },
+
+  addEvents: function() {
+    this.clickWrapper = this.clickEvent.bind(this);
+    // event delegation.
+    this.list.addEventListener('click', this.clickWrapper);
+  },
+
+  toggle: function() {
+    if(this.hidden) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  },
+
+  setData: function(data) {
+    this.data = data;
+    this.render(data);
+  },
+
+  addData: function(data) {
+    this.data = (this.data || []).concat(data);
+    this.render(data);
+  },
+
+  // call render manually on data;
+  render: function(data){
+    // debugger
+    // empty the list first
+    var sampleItem;
+    var newChildren = [];
+    var toAppend;
+
+    for(var i = 0; i < this.items.length; i++) {
+      var item = this.items[i];
+      sampleItem = item;
+      if(item.parentNode && item.parentNode.dataset.hasOwnProperty('dynamic')) {
+        item.parentNode.removeChild(item);  
+      }
+    }
+
+    newChildren = this.data.map(function(dat){
+      var html = utils.t(sampleItem.outerHTML, dat);
+      var template = document.createElement('div');
+      template.innerHTML = html;
+      // console.log(template.content)
+
+      // Help set the image src template
+      var imageTags = template.querySelectorAll('img[data-src]');
+      // debugger
+      for(var i = 0; i < imageTags.length; i++) {
+        var imageTag = imageTags[i];
+        imageTag.src = imageTag.getAttribute('data-src');
+        imageTag.removeAttribute('data-src');
+      }
+
+      if(dat.hasOwnProperty('droplab_hidden') && dat.droplab_hidden){
+        template.firstChild.style.display = 'none'
+      }else{
+        template.firstChild.style.display = 'block';
+      }
+      return template.firstChild.outerHTML;
+    });
+    toAppend = this.list.querySelector('ul[data-dynamic]');
+    if(toAppend) {
+      toAppend.innerHTML = newChildren.join('');
+    } else {
+      this.list.innerHTML = newChildren.join('');  
+    }
+  },
+
+  show: function() {
+    // debugger
+    this.list.style.display = 'block';
+    this.hidden = false;
+  },
+
+  hide: function() {
+    // debugger
+    this.list.style.display = 'none';
+    this.hidden = true;
+  },
+
+  destroy: function() {
+    if (!this.hidden) {
+      this.hide();
+    }
+
+    this.list.removeEventListener('click', this.clickWrapper);
+  }
+});
+
+module.exports = DropDown;
+
+},{"./custom_event_polyfill":2,"./utils":10}],4:[function(require,module,exports){
+require('./window')(function(w){
+  module.exports = function(deps) {
+    deps = deps || {};
+    var window = deps.window || w;
+    var document = deps.document || window.document;
+    var CustomEvent = deps.CustomEvent || require('./custom_event_polyfill');
+    var HookButton = deps.HookButton || require('./hook_button');
+    var HookInput = deps.HookInput || require('./hook_input');
+    var utils = deps.utils || require('./utils');
+    var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
+
+    var DropLab = function(hook){
+      if (!(this instanceof DropLab)) return new DropLab(hook);
+      this.ready = false;
+      this.hooks = [];
+      this.queuedData = [];
+      this.config = {};
+      this.loadWrapper;
+      if(typeof hook !== 'undefined'){
+        this.addHook(hook);
+      }
+    };
+
+
+    Object.assign(DropLab.prototype, {
+      load: function() {
+        this.loadWrapper();
+      },
+
+      loadWrapper: function(){
+        var dropdownTriggers = [].slice.apply(document.querySelectorAll('['+DATA_TRIGGER+']'));
+        this.addHooks(dropdownTriggers).init();
+      },
+
+      addData: function () {
+        var args = [].slice.apply(arguments);
+        this.applyArgs(args, '_addData');
+      },
+
+      setData: function() {
+        var args = [].slice.apply(arguments);
+        this.applyArgs(args, '_setData');
+      },
+
+      destroy: function() {
+        for(var i = 0; i < this.hooks.length; i++) {
+          this.hooks[i].destroy();
+        }
+        this.hooks = [];
+        this.removeEvents();
+      },
+
+      applyArgs: function(args, methodName) {
+        if(this.ready) {
+          this[methodName].apply(this, args);
+        } else {
+          this.queuedData = this.queuedData || [];
+          this.queuedData.push(args);
+        }
+      },
+
+      _addData: function(trigger, data) {
+        this._processData(trigger, data, 'addData');
+      },
+
+      _setData: function(trigger, data) {
+        this._processData(trigger, data, 'setData');
+      },
+
+      _processData: function(trigger, data, methodName) {
+        for(var i = 0; i < this.hooks.length; i++) {
+          var hook = this.hooks[i];
+          if(hook.trigger.dataset.hasOwnProperty('id')) {
+            if(hook.trigger.dataset.id === trigger) {
+              hook.list[methodName](data);
+            }
+          }
+        }
+      },
+
+      addEvents: function() {
+        var self = this;
+        this.windowClickedWrapper = function(e){
+          var thisTag = e.target;
+          if(thisTag.tagName !== 'UL'){
+            // climb up the tree to find the UL
+            thisTag = utils.closest(thisTag, 'UL');
+          }
+          if(utils.isDropDownParts(thisTag)){ return }
+          if(utils.isDropDownParts(e.target)){ return }
+          for(var i = 0; i < self.hooks.length; i++) {
+            self.hooks[i].list.hide();
+          }
+        }.bind(this);
+        w.addEventListener('click', this.windowClickedWrapper);
+      },
+
+      removeEvents: function(){
+        w.removeEventListener('click', this.windowClickedWrapper);
+        w.removeEventListener('load', this.loadWrapper);
+      },
+
+      changeHookList: function(trigger, list, plugins, config) {
+        trigger = document.querySelector('[data-id="'+trigger+'"]');
+        // list = document.querySelector(list);
+        this.hooks.every(function(hook, i) {
+          if(hook.trigger === trigger) {
+            hook.destroy();
+            this.hooks.splice(i, 1);
+            this.addHook(trigger, list, plugins, config);
+            return false;
+          }
+          return true
+        }.bind(this));
+      },
+
+      addHook: function(hook, list, plugins, config) {
+        if(!(hook instanceof HTMLElement) && typeof hook === 'string'){
+          hook = document.querySelector(hook);
+        }
+        if(!list){
+          list = document.querySelector(hook.dataset[utils.toDataCamelCase(DATA_TRIGGER)]);
+        }
+        
+        if(hook) {
+          if(hook.tagName === 'A' || hook.tagName === 'BUTTON') {
+            this.hooks.push(new HookButton(hook, list, plugins, config));
+          } else if(hook.tagName === 'INPUT') {
+            this.hooks.push(new HookInput(hook, list, plugins, config));
+          }
+        }
+        return this;
+      },
+
+      addHooks: function(hooks, plugins, config) {
+        for(var i = 0; i < hooks.length; i++) {
+          var hook = hooks[i];
+          this.addHook(hook, null, plugins, config);
+        }
+        return this;
+      },
+
+      setConfig: function(obj){
+        this.config = obj;
+      },
+
+      init: function () {
+        this.addEvents();
+        var readyEvent = new CustomEvent('ready.dl', {
+          detail: {
+            dropdown: this,
+          },
+        });
+        window.dispatchEvent(readyEvent);
+        this.ready = true;
+        for(var i = 0; i < this.queuedData.length; i++) {
+          this.addData.apply(this, this.queuedData[i]);
+        }
+        this.queuedData = [];
+        return this;
+      },
+    });
+
+    return DropLab;
+  };
+});
+
+},{"./constants":1,"./custom_event_polyfill":2,"./hook_button":6,"./hook_input":7,"./utils":10,"./window":11}],5:[function(require,module,exports){
+var DropDown = require('./dropdown');
+
+var Hook = function(trigger, list, plugins, config){
+  this.trigger = trigger;
+  this.list = new DropDown(list);
+  this.type = 'Hook';
+  this.event = 'click';
+  this.plugins = plugins || [];
+  this.config = config || {};
+  this.id = trigger.dataset.id;
+};
+
+Object.assign(Hook.prototype, {
+
+  addEvents: function(){},
+
+  constructor: Hook,
+});
+
+module.exports = Hook;
+
+},{"./dropdown":3}],6:[function(require,module,exports){
+var CustomEvent = require('./custom_event_polyfill');
+var Hook = require('./hook');
+
+var HookButton = function(trigger, list, plugins, config) {
+  Hook.call(this, trigger, list, plugins, config);
+  this.type = 'button';
+  this.event = 'click';
+  this.addEvents();
+  this.addPlugins();
+};
+
+HookButton.prototype = Object.create(Hook.prototype);
+
+Object.assign(HookButton.prototype, {
+  addPlugins: function() {
+    for(var i = 0; i < this.plugins.length; i++) {
+      this.plugins[i].init(this);
+    }
+  },
+
+  clicked: function(e){
+    var buttonEvent = new CustomEvent('click.dl', {
+      detail: {
+        hook: this,
+      },
+      bubbles: true,
+      cancelable: true
+    });
+    this.list.show();
+    e.target.dispatchEvent(buttonEvent);
+  },
+
+  addEvents: function(){
+    this.clickedWrapper = this.clicked.bind(this);
+    this.trigger.addEventListener('click', this.clickedWrapper);
+  },
+
+  removeEvents: function(){
+    this.trigger.removeEventListener('click', this.clickedWrapper);
+  },
+
+  restoreInitialState: function() {
+    this.list.list.innerHTML = this.list.initialState;
+  },
+
+  removePlugins: function() {
+    for(var i = 0; i < this.plugins.length; i++) {
+      this.plugins[i].destroy();
+    }
+  },
+
+  destroy: function() {
+    this.restoreInitialState();
+    this.removeEvents();
+    this.removePlugins();
+  },
+
+
+  constructor: HookButton,
+});
+
+
+module.exports = HookButton;
+
+},{"./custom_event_polyfill":2,"./hook":5}],7:[function(require,module,exports){
+var CustomEvent = require('./custom_event_polyfill');
+var Hook = require('./hook');
+
+var HookInput = function(trigger, list, plugins, config) {
+  Hook.call(this, trigger, list, plugins, config);
+  this.type = 'input';
+  this.event = 'input';
+  this.addPlugins();
+  this.addEvents();
+};
+
+Object.assign(HookInput.prototype, {
+  addPlugins: function() {
+    var self = this;
+    for(var i = 0; i < this.plugins.length; i++) {
+      this.plugins[i].init(self);
+    }
+  },
+
+  addEvents: function(){
+    var self = this;
+
+    this.mousedown = function mousedown(e) {
+      var mouseEvent = new CustomEvent('mousedown.dl', {
+        detail: {
+          hook: self,
+          text: e.target.value,
+        },
+        bubbles: true,
+        cancelable: true
+      });
+      e.target.dispatchEvent(mouseEvent);
+    }
+
+    this.input = function input(e) {
+      var inputEvent = new CustomEvent('input.dl', {
+        detail: {
+          hook: self,
+          text: e.target.value,
+        },
+        bubbles: true,
+        cancelable: true
+      });
+      e.target.dispatchEvent(inputEvent);
+      self.list.show();
+    }
+
+    this.keyup = function keyup(e) {
+      keyEvent(e, 'keyup.dl');
+    }
+
+    this.keydown = function keydown(e) {
+      keyEvent(e, 'keydown.dl');
+    }
+
+    function keyEvent(e, keyEventName){
+      var keyEvent = new CustomEvent(keyEventName, {
+        detail: {
+          hook: self,
+          text: e.target.value,
+          which: e.which,
+          key: e.key,
+        },
+        bubbles: true,
+        cancelable: true
+      });
+      e.target.dispatchEvent(keyEvent);
+      self.list.show();
+    }
+
+    this.events = this.events || {};
+    this.events.mousedown = this.mousedown;
+    this.events.input = this.input;
+    this.events.keyup = this.keyup;
+    this.events.keydown = this.keydown;
+    this.trigger.addEventListener('mousedown', this.mousedown);
+    this.trigger.addEventListener('input', this.input);
+    this.trigger.addEventListener('keyup', this.keyup);
+    this.trigger.addEventListener('keydown', this.keydown);
+  },
+
+  removeEvents: function(){
+    this.trigger.removeEventListener('mousedown', this.mousedown);
+    this.trigger.removeEventListener('input', this.input);
+    this.trigger.removeEventListener('keyup', this.keyup);
+    this.trigger.removeEventListener('keydown', this.keydown);
+  },
+
+  restoreInitialState: function() {
+    this.list.list.innerHTML = this.list.initialState;
+  },
+
+  removePlugins: function() {
+    for(var i = 0; i < this.plugins.length; i++) {
+      this.plugins[i].destroy();
+    }
+  },
+
+  destroy: function() {
+    this.restoreInitialState();
+    this.removeEvents();
+    this.removePlugins();
+    this.list.destroy();
+  }
+});
+
+module.exports = HookInput;
+
+},{"./custom_event_polyfill":2,"./hook":5}],8:[function(require,module,exports){
+var DropLab = require('./droplab')();
+var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
+var keyboard = require('./keyboard')();
+var setup = function() {
+  window.DropLab = DropLab;
+};
+
+
+module.exports = setup();
+
+},{"./constants":1,"./droplab":4,"./keyboard":9}],9:[function(require,module,exports){
+require('./window')(function(w){
+  module.exports = function(){
+    var currentKey;
+    var currentFocus;
+    var currentIndex = 0;
+    var isUpArrow = false;
+    var isDownArrow = false;
+    var removeHighlight = function removeHighlight(list) {
+      var listItems = list.list.querySelectorAll('li');
+      for(var i = 0; i < listItems.length; i++) {
+        listItems[i].classList.remove('dropdown-active');
+      }
+      return listItems;
+    };
+
+    var setMenuForArrows = function setMenuForArrows(list) {
+      var listItems = removeHighlight(list);
+      if(currentIndex>0){
+        if(!listItems[currentIndex-1]){
+          currentIndex = currentIndex-1; 
+        }
+        listItems[currentIndex-1].classList.add('dropdown-active');
+      }
+    };
+
+    var mousedown = function mousedown(e) {
+      var list = e.detail.hook.list;
+      removeHighlight(list);
+      list.show();
+      currentIndex = 0;
+      isUpArrow = false;
+      isDownArrow = false;
+    };
+    var selectItem = function selectItem(list) {
+      var listItems = removeHighlight(list);
+      var currentItem = listItems[currentIndex-1];
+      var listEvent = new CustomEvent('click.dl', {
+        detail: {
+          list: list,
+          selected: currentItem,
+          data: currentItem.dataset,
+        },
+      });
+      list.list.dispatchEvent(listEvent);
+      list.hide();
+    }
+
+    var keydown = function keydown(e){
+      var typedOn = e.target;
+      isUpArrow = false;
+      isDownArrow = false;
+
+      if(e.detail.which){
+        currentKey = e.detail.which;
+        if(currentKey === 13){
+          selectItem(e.detail.hook.list);
+          return;
+        }
+        if(currentKey === 38) {
+          isUpArrow = true;
+        }
+        if(currentKey === 40) {
+          isDownArrow = true;
+        }
+      } else if(e.detail.key) {
+        currentKey = e.detail.key;
+        if(currentKey === 'Enter'){
+          selectItem(e.detail.hook.list);
+          return;
+        }
+        if(currentKey === 'ArrowUp') {
+          isUpArrow = true; 
+        }
+        if(currentKey === 'ArrowDown') {
+          isDownArrow = true;
+        }
+      }
+      if(isUpArrow){ currentIndex--; }
+      if(isDownArrow){ currentIndex++; }
+      if(currentIndex < 0){ currentIndex = 0; }
+      setMenuForArrows(e.detail.hook.list);
+    };
+
+    w.addEventListener('mousedown.dl', mousedown);
+    w.addEventListener('keydown.dl', keydown);
+  };
+});
+},{"./window":11}],10:[function(require,module,exports){
+var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
+var DATA_DROPDOWN = require('./constants').DATA_DROPDOWN;
+
+var toDataCamelCase = function(attr){
+  return this.camelize(attr.split('-').slice(1).join(' '));
+};
+
+// the tiniest damn templating I can do
+var t = function(s,d){
+  for(var p in d)
+    s=s.replace(new RegExp('{{'+p+'}}','g'), d[p]);
+  return s;
+};
+
+var camelize = function(str) {
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) {
+    return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
+  }).replace(/\s+/g, '');
+};
+
+var closest = function(thisTag, stopTag) {
+  while(thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){
+    thisTag = thisTag.parentNode;
+  }
+  return thisTag;
+};
+
+var isDropDownParts = function(target) {
+  if(target.tagName === 'HTML') { return false; }
+  return (
+    target.hasAttribute(DATA_TRIGGER) || 
+      target.hasAttribute(DATA_DROPDOWN)
+  );
+};
+
+module.exports = {
+  toDataCamelCase: toDataCamelCase,
+  t: t,
+  camelize: camelize,
+  closest: closest,
+  isDropDownParts: isDropDownParts,
+};
+
+},{"./constants":1}],11:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[8])(8)
+});
diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js
new file mode 100644
index 00000000000..f20610b3811
--- /dev/null
+++ b/app/assets/javascripts/droplab/droplab_ajax.js
@@ -0,0 +1,79 @@
+/* eslint-disable */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/* global droplab */
+
+require('../window')(function(w){
+  function droplabAjaxException(message) {
+    this.message = message;
+  }
+
+  w.droplabAjax = {
+    _loadUrlData: function _loadUrlData(url) {
+      return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest;
+        xhr.open('GET', url, true);
+        xhr.onreadystatechange = function () {
+          if(xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+              var data = JSON.parse(xhr.responseText);
+              return resolve(data);
+            } else {
+              return reject([xhr.responseText, xhr.status]);
+            }
+          }
+        };
+        xhr.send();
+      });
+    },
+
+    init: function init(hook) {
+      var self = this;
+      var config = hook.config.droplabAjax;
+
+      if (!config || !config.endpoint || !config.method) {
+        return;
+      }
+
+      if (config.method !== 'setData' && config.method !== 'addData') {
+        return;
+      }
+
+      if (config.loadingTemplate) {
+        var dynamicList = hook.list.list.querySelector('[data-dynamic]');
+
+        var loadingTemplate = document.createElement('div');
+        loadingTemplate.innerHTML = config.loadingTemplate;
+        loadingTemplate.setAttribute('data-loading-template', '');
+
+        this.listTemplate = dynamicList.outerHTML;
+        dynamicList.outerHTML = loadingTemplate.outerHTML;
+      }
+
+      this._loadUrlData(config.endpoint)
+        .then(function(d) {
+          if (config.loadingTemplate) {
+            var dataLoadingTemplate = hook.list.list.querySelector('[data-loading-template]');
+
+            if (dataLoadingTemplate) {
+              dataLoadingTemplate.outerHTML = self.listTemplate;
+            }
+          }
+          hook.list[config.method].call(hook.list, d);
+        }).catch(function(e) {
+          throw new droplabAjaxException(e.message || e);
+        });
+    },
+
+    destroy: function() {
+    }
+  };
+});
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[1])(1)
+});
\ No newline at end of file
diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js
new file mode 100644
index 00000000000..af163f76851
--- /dev/null
+++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js
@@ -0,0 +1,145 @@
+/* eslint-disable */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/* global droplab */
+
+require('../window')(function(w){
+  w.droplabAjaxFilter = {
+    init: function(hook) {
+      this.destroyed = false;
+      this.hook = hook;
+      this.notLoading();
+
+      this.debounceTriggerWrapper = this.debounceTrigger.bind(this);
+      this.hook.trigger.addEventListener('keydown.dl', this.debounceTriggerWrapper);
+      this.hook.trigger.addEventListener('focus', this.debounceTriggerWrapper);
+      this.trigger(true);
+    },
+
+    notLoading: function notLoading() {
+      this.loading = false;
+    },
+
+    debounceTrigger: function debounceTrigger(e) {
+      var NON_CHARACTER_KEYS = [16, 17, 18, 20, 37, 38, 39, 40, 91, 93];
+      var invalidKeyPressed = NON_CHARACTER_KEYS.indexOf(e.detail.which || e.detail.keyCode) > -1;
+      var focusEvent = e.type === 'focus';
+
+      if (invalidKeyPressed || this.loading) {
+        return;
+      }
+
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+      }
+
+      this.timeout = setTimeout(this.trigger.bind(this, focusEvent), 200);
+    },
+
+    trigger: function trigger(getEntireList) {
+      var config = this.hook.config.droplabAjaxFilter;
+      var searchValue = this.trigger.value;
+
+      if (!config || !config.endpoint || !config.searchKey) {
+        return;
+      }
+
+      if (config.searchValueFunction) {
+        searchValue = config.searchValueFunction();
+      }
+
+      if (config.loadingTemplate && this.hook.list.data === undefined ||
+        this.hook.list.data.length === 0) {
+        var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
+
+        var loadingTemplate = document.createElement('div');
+        loadingTemplate.innerHTML = config.loadingTemplate;
+        loadingTemplate.setAttribute('data-loading-template', true);
+
+        this.listTemplate = dynamicList.outerHTML;
+        dynamicList.outerHTML = loadingTemplate.outerHTML;
+      }
+
+      if (getEntireList) {
+        searchValue = '';
+      }
+
+      if (config.searchKey === searchValue) {
+        return this.list.show();
+      }
+
+      this.loading = true;
+
+      var params = config.params || {};
+      params[config.searchKey] = searchValue;
+      var self = this;
+      this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) {
+        if (config.loadingTemplate && self.hook.list.data === undefined ||
+          self.hook.list.data.length === 0) {
+          const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
+
+          if (dataLoadingTemplate) {
+            dataLoadingTemplate.outerHTML = self.listTemplate;
+          }
+        }
+
+        if (!self.destroyed) {
+          var hookListChildren = self.hook.list.list.children;
+          var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
+
+          if (onlyDynamicList && data.length === 0) {
+            self.hook.list.hide();
+          }
+
+          self.hook.list.setData.call(self.hook.list, data);
+        }
+        self.notLoading();
+      });
+    },
+
+    _loadUrlData: function _loadUrlData(url) {
+      return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest;
+        xhr.open('GET', url, true);
+        xhr.onreadystatechange = function () {
+          if(xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+              var data = JSON.parse(xhr.responseText);
+              return resolve(data);
+            } else {
+              return reject([xhr.responseText, xhr.status]);
+            }
+          }
+        };
+        xhr.send();
+      });
+    },
+
+    buildParams: function(params) {
+      if (!params) return '';
+      var paramsArray = Object.keys(params).map(function(param) {
+        return param + '=' + (params[param] || '');
+      });
+      return '?' + paramsArray.join('&');
+    },
+
+    destroy: function destroy() {
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+      }
+
+      this.destroyed = true;
+
+      this.hook.trigger.removeEventListener('keydown.dl', this.debounceTriggerWrapper);
+      this.hook.trigger.removeEventListener('focus', this.debounceTriggerWrapper);
+    }
+  };
+});
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[1])(1)
+});
\ No newline at end of file
diff --git a/app/assets/javascripts/droplab/droplab_filter.js b/app/assets/javascripts/droplab/droplab_filter.js
new file mode 100644
index 00000000000..41a220831f9
--- /dev/null
+++ b/app/assets/javascripts/droplab/droplab_filter.js
@@ -0,0 +1,60 @@
+/* eslint-disable */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.filter||(g.filter = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/* global droplab */
+
+require('../window')(function(w){
+  w.droplabFilter = {
+
+    keydownWrapper: function(e){
+        var list = e.detail.hook.list;
+        var data = list.data;
+        var value = e.detail.hook.trigger.value.toLowerCase();
+        var config = e.detail.hook.config.droplabFilter;
+        var matches = [];
+        var filterFunction;
+        // will only work on dynamically set data
+        if(!data){
+          return;
+        }
+
+        if (config && config.filterFunction && typeof config.filterFunction === 'function') {
+          filterFunction = config.filterFunction;
+        } else {
+          filterFunction = function(o){
+            // cheap string search
+            o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
+            return o;
+          };
+        }
+
+        matches = data.map(function(o) {
+          return filterFunction(o, value);
+        });
+        list.render(matches);
+    },
+
+    init: function init(hookInput) {
+      var config = hookInput.config.droplabFilter;
+
+      if (!config || (!config.template && !config.filterFunction)) {
+        return;
+      }
+
+      this.hookInput = hookInput;
+      this.hookInput.trigger.addEventListener('keyup.dl', this.keydownWrapper);
+    },
+
+    destroy: function destroy(){
+      this.hookInput.trigger.removeEventListener('keyup.dl', this.keydownWrapper);
+    }
+  };
+});
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[1])(1)
+});
\ No newline at end of file
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index e1e76bca6ad..56cb39be642 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, one-var, no-var, one-var-declaration-per-line, no-unused-vars, camelcase, no-undef, quotes, no-useless-concat, prefer-template, quote-props, comma-dangle, object-shorthand, consistent-return, no-plusplus, prefer-arrow-callback, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, one-var, no-var, one-var-declaration-per-line, no-unused-vars, camelcase, quotes, no-useless-concat, prefer-template, quote-props, comma-dangle, object-shorthand, consistent-return, no-plusplus, prefer-arrow-callback, padded-blocks */
+/* global Dropzone */
 
 /*= require preview_markdown */
 
diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6
index e84f5ac9183..201f9fdc3fe 100644
--- a/app/assets/javascripts/due_date_select.js.es6
+++ b/app/assets/javascripts/due_date_select.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable wrap-iife, func-names, space-before-function-paren, comma-dangle, prefer-template, consistent-return, class-methods-use-this, arrow-body-style, prefer-const, padded-blocks, no-unused-vars, no-underscore-dangle, no-new, max-len, semi, no-sequences, no-unused-expressions, no-param-reassign */
+
 (function(global) {
   class DueDateSelect {
     constructor({ $dropdown, $loading } = {}) {
@@ -79,9 +80,12 @@
     }
 
     parseSelectedDate() {
-      this.rawSelectedDate = $("input[name='" + this.fieldName + "']").val();
+      this.rawSelectedDate = $(`input[name='${this.fieldName}']`).val();
+
       if (this.rawSelectedDate.length) {
-        let dateObj = new Date(this.rawSelectedDate);
+        // Construct Date object manually to avoid buggy dateString support within Date constructor
+        const dateArray = this.rawSelectedDate.split('-').map(v => parseInt(v, 10));
+        const dateObj = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
         this.displayedDate = $.datepicker.formatDate('M d, yy', dateObj);
       } else {
         this.displayedDate = 'No due date';
diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
index 1db29dd47fb..8b6fafb6104 100644
--- a/app/assets/javascripts/environments/components/environment.js.es6
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -18,7 +18,7 @@
    * The environments array is a recursive tree structure and we need to filter
    * both root level environments and children environments.
    *
-   * In order to acomplish that, both `filterState` and `filterEnvironmnetsByState`
+   * In order to acomplish that, both `filterState` and `filterEnvironmentsByState`
    * functions work together.
    * The first one works as the filter that verifies if the given environment matches
    * the given state.
@@ -34,9 +34,9 @@
    * @param {Array} array
    * @return {Array}
    */
-  const filterEnvironmnetsByState = (fn, arr) => arr.map((item) => {
+  const filterEnvironmentsByState = (fn, arr) => arr.map((item) => {
     if (item.children) {
-      const filteredChildren = filterEnvironmnetsByState(fn, item.children).filter(Boolean);
+      const filteredChildren = filterEnvironmentsByState(fn, item.children).filter(Boolean);
       if (filteredChildren.length) {
         item.children = filteredChildren;
         return item;
@@ -45,7 +45,7 @@
     return fn(item);
   }).filter(Boolean);
 
-  window.gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
+  gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
     props: {
       store: {
         type: Object,
@@ -55,7 +55,7 @@
     },
 
     components: {
-      'environment-item': window.gl.environmentsList.EnvironmentItem,
+      'environment-item': gl.environmentsList.EnvironmentItem,
     },
 
     data() {
@@ -76,12 +76,13 @@
         helpPagePath: environmentsData.helpPagePath,
         commitIconSvg: environmentsData.commitIconSvg,
         playIconSvg: environmentsData.playIconSvg,
+        terminalIconSvg: environmentsData.terminalIconSvg,
       };
     },
 
     computed: {
       filteredEnvironments() {
-        return filterEnvironmnetsByState(filterState(this.visibility), this.state.environments);
+        return filterEnvironmentsByState(filterState(this.visibility), this.state.environments);
       },
 
       scope() {
@@ -102,7 +103,7 @@
     },
 
     /**
-     * Fetches all the environmnets and stores them.
+     * Fetches all the environments and stores them.
      * Toggles loading property.
      */
     created() {
@@ -164,8 +165,7 @@
                   {{state.availableCounter}}
                 </span>
               </a>
-            </li>
-            <li v-bind:class="{ 'active' : scope === 'stopped' }">
+            </li><li v-bind:class="{ 'active' : scope === 'stopped' }">
               <a :href="projectStoppedEnvironmentsPath">
                 Stopped
                 <span class="badge js-stopped-environments-count">
@@ -216,7 +216,7 @@
                   <th class="environments-deploy">Last deployment</th>
                   <th class="environments-build">Build</th>
                   <th class="environments-commit">Commit</th>
-                  <th class="environments-date"></th>
+                  <th class="environments-date">Created</th>
                   <th class="hidden-xs environments-actions"></th>
                 </tr>
               </thead>
@@ -231,6 +231,7 @@
                     :can-create-deployment="canCreateDeploymentParsed"
                     :can-read-environment="canReadEnvironmentParsed"
                     :play-icon-svg="playIconSvg"
+                    :terminal-icon-svg="terminalIconSvg"
                     :commit-icon-svg="commitIconSvg"></tr>
 
                   <tr v-if="model.isOpen && model.children && model.children.length > 0"
@@ -241,6 +242,7 @@
                     :can-create-deployment="canCreateDeploymentParsed"
                     :can-read-environment="canReadEnvironmentParsed"
                     :play-icon-svg="playIconSvg"
+                    :terminal-icon-svg="terminalIconSvg"
                     :commit-icon-svg="commitIconSvg">
                     </tr>
 
diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6
index 7c743705d51..81468f4d3bc 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js.es6
+++ b/app/assets/javascripts/environments/components/environment_actions.js.es6
@@ -5,7 +5,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
 
-  window.gl.environmentsList.ActionsComponent = Vue.component('actions-component', {
+  gl.environmentsList.ActionsComponent = Vue.component('actions-component', {
     props: {
       actions: {
         type: Array,
diff --git a/app/assets/javascripts/environments/components/environment_external_url.js.es6 b/app/assets/javascripts/environments/components/environment_external_url.js.es6
index aed65b33c04..6592c1b5f0f 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.js.es6
+++ b/app/assets/javascripts/environments/components/environment_external_url.js.es6
@@ -5,7 +5,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
 
-  window.gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', {
+  gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', {
     props: {
       externalUrl: {
         type: String,
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 2e046a60146..0e6bc3fdb2c 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -8,6 +8,7 @@
 /*= require ./environment_external_url */
 /*= require ./environment_stop */
 /*= require ./environment_rollback */
+/*= require ./environment_terminal_button */
 
 (() => {
   /**
@@ -28,11 +29,12 @@
   gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
 
     components: {
-      'commit-component': window.gl.CommitComponent,
-      'actions-component': window.gl.environmentsList.ActionsComponent,
-      'external-url-component': window.gl.environmentsList.ExternalUrlComponent,
-      'stop-component': window.gl.environmentsList.StopComponent,
-      'rollback-component': window.gl.environmentsList.RollbackComponent,
+      'commit-component': gl.CommitComponent,
+      'actions-component': gl.environmentsList.ActionsComponent,
+      'external-url-component': gl.environmentsList.ExternalUrlComponent,
+      'stop-component': gl.environmentsList.StopComponent,
+      'rollback-component': gl.environmentsList.RollbackComponent,
+      'terminal-button-component': gl.environmentsList.TerminalButtonComponent,
     },
 
     props: {
@@ -68,6 +70,12 @@
         type: String,
         required: false,
       },
+
+      terminalIconSvg: {
+        type: String,
+        required: false,
+      },
+
     },
 
     data() {
@@ -175,7 +183,7 @@
        * @returns {String}
        */
       createdDate() {
-        return window.gl.environmentsList.timeagoInstance.format(
+        return gl.environmentsList.timeagoInstance.format(
           this.model.last_deployment.deployable.created_at,
         );
       },
@@ -449,7 +457,7 @@
           </span>
         </td>
 
-        <td>
+        <td class="environments-build-cell">
           <a v-if="shouldRenderBuildName"
             class="build-link"
             :href="model.last_deployment.deployable.build_path">
@@ -506,6 +514,14 @@
               </stop-component>
             </div>
 
+            <div v-if="model.terminal_path"
+              class="inline js-terminal-button-container">
+              <terminal-button-component
+                :terminal-icon-svg="terminalIconSvg"
+                :terminal-path="model.terminal_path">
+              </terminal-button-component>
+            </div>
+
             <div v-if="canRetry && canCreateDeployment"
               class="inline js-rollback-component-container">
               <rollback-component
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js.es6 b/app/assets/javascripts/environments/components/environment_rollback.js.es6
index 6d4e8fad604..b52298b4a88 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.js.es6
+++ b/app/assets/javascripts/environments/components/environment_rollback.js.es6
@@ -5,7 +5,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
 
-  window.gl.environmentsList.RollbackComponent = Vue.component('rollback-component', {
+  gl.environmentsList.RollbackComponent = Vue.component('rollback-component', {
     props: {
       retryUrl: {
         type: String,
diff --git a/app/assets/javascripts/environments/components/environment_stop.js.es6 b/app/assets/javascripts/environments/components/environment_stop.js.es6
index 7292f924e5c..0a29f2f36e9 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js.es6
+++ b/app/assets/javascripts/environments/components/environment_stop.js.es6
@@ -5,7 +5,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
 
-  window.gl.environmentsList.StopComponent = Vue.component('stop-component', {
+  gl.environmentsList.StopComponent = Vue.component('stop-component', {
     props: {
       stopUrl: {
         type: String,
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6
new file mode 100644
index 00000000000..050184ba497
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6
@@ -0,0 +1,27 @@
+/*= require vue */
+/* global Vue */
+
+(() => {
+  window.gl = window.gl || {};
+  window.gl.environmentsList = window.gl.environmentsList || {};
+
+  gl.environmentsList.TerminalButtonComponent = Vue.component('terminal-button-component', {
+    props: {
+      terminalPath: {
+        type: String,
+        default: '',
+      },
+      terminalIconSvg: {
+        type: String,
+        default: '',
+      },
+    },
+
+    template: `
+      <a class="btn terminal-button"
+        :href="terminalPath">
+        <span class="js-terminal-icon-container" v-html="terminalIconSvg"></span>
+      </a>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/environments/environments_bundle.js.es6 b/app/assets/javascripts/environments/environments_bundle.js.es6
index 20eee7976ec..9f24a6a4f88 100644
--- a/app/assets/javascripts/environments/environments_bundle.js.es6
+++ b/app/assets/javascripts/environments/environments_bundle.js.es6
@@ -7,15 +7,17 @@
 $(() => {
   window.gl = window.gl || {};
 
-  if (window.gl.EnvironmentsListApp) {
-    window.gl.EnvironmentsListApp.$destroy(true);
+  if (gl.EnvironmentsListApp) {
+    gl.EnvironmentsListApp.$destroy(true);
   }
-  const Store = window.gl.environmentsList.EnvironmentsStore;
+  const Store = gl.environmentsList.EnvironmentsStore;
 
-  window.gl.EnvironmentsListApp = new window.gl.environmentsList.EnvironmentsComponent({
+  gl.EnvironmentsListApp = new gl.environmentsList.EnvironmentsComponent({
     el: document.querySelector('#environments-list-view'),
+
     propsData: {
       store: Store.create(),
     },
+
   });
 });
diff --git a/app/assets/javascripts/environments/services/environments_service.js.es6 b/app/assets/javascripts/environments/services/environments_service.js.es6
index 15ec7b76c3d..575a45d9802 100644
--- a/app/assets/javascripts/environments/services/environments_service.js.es6
+++ b/app/assets/javascripts/environments/services/environments_service.js.es6
@@ -20,3 +20,5 @@ class EnvironmentsService {
     return this.environments.get();
   }
 }
+
+window.EnvironmentsService = EnvironmentsService;
diff --git a/app/assets/javascripts/extensions/object.js.es6 b/app/assets/javascripts/extensions/object.js.es6
new file mode 100644
index 00000000000..70a2d765abd
--- /dev/null
+++ b/app/assets/javascripts/extensions/object.js.es6
@@ -0,0 +1,26 @@
+/* eslint-disable no-restricted-syntax */
+
+// Adapted from https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill
+if (typeof Object.assign !== 'function') {
+  Object.assign = function assign(target, ...args) {
+    if (target == null) { // TypeError if undefined or null
+      throw new TypeError('Cannot convert undefined or null to object');
+    }
+
+    const to = Object(target);
+
+    for (let index = 0; index < args.length; index += 1) {
+      const nextSource = args[index];
+
+      if (nextSource != null) { // Skip over if undefined or null
+        for (const nextKey in nextSource) {
+          // Avoid bugs when hasOwnProperty is shadowed
+          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+            to[nextKey] = nextSource[nextKey];
+          }
+        }
+      }
+    }
+    return to;
+  };
+}
diff --git a/app/assets/javascripts/files_comment_button.js b/app/assets/javascripts/files_comment_button.js
index 0122e847161..785f2869970 100644
--- a/app/assets/javascripts/files_comment_button.js
+++ b/app/assets/javascripts/files_comment_button.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, max-len, one-var, one-var-declaration-per-line, quotes, prefer-template, newline-per-chained-call, comma-dangle, new-cap, no-else-return, padded-blocks, consistent-return, no-undef, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, max-len, one-var, one-var-declaration-per-line, quotes, prefer-template, newline-per-chained-call, comma-dangle, new-cap, no-else-return, padded-blocks, consistent-return */
+/* global FilesCommentButton */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
new file mode 100644
index 00000000000..63c20f57520
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
@@ -0,0 +1,66 @@
+/*= require filtered_search/filtered_search_dropdown */
+
+/* global droplabFilter */
+
+(() => {
+  class DropdownHint extends gl.FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter) {
+      super(droplab, dropdown, input, filter);
+      this.config = {
+        droplabFilter: {
+          template: 'hint',
+          filterFunction: gl.DropdownUtils.filterHint,
+        },
+      };
+    }
+
+    itemClicked(e) {
+      const { selected } = e.detail;
+
+      if (selected.tagName === 'LI') {
+        if (selected.hasAttribute('data-value')) {
+          this.dismissDropdown();
+        } else {
+          const token = selected.querySelector('.js-filter-hint').innerText.trim();
+          const tag = selected.querySelector('.js-filter-tag').innerText.trim();
+
+          if (tag.length) {
+            gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''));
+          }
+          this.dismissDropdown();
+          this.dispatchInputEvent();
+        }
+      }
+    }
+
+    renderContent() {
+      const dropdownData = [{
+        icon: 'fa-pencil',
+        hint: 'author:',
+        tag: '&lt;@author&gt;',
+      }, {
+        icon: 'fa-user',
+        hint: 'assignee:',
+        tag: '&lt;@assignee&gt;',
+      }, {
+        icon: 'fa-clock-o',
+        hint: 'milestone:',
+        tag: '&lt;%milestone&gt;',
+      }, {
+        icon: 'fa-tag',
+        hint: 'label:',
+        tag: '&lt;~label&gt;',
+      }];
+
+      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
+      this.droplab.setData(this.hookId, dropdownData);
+    }
+
+    init() {
+      this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownHint = DropdownHint;
+})();
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6
new file mode 100644
index 00000000000..f06c3fc9c6f
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6
@@ -0,0 +1,44 @@
+/*= require filtered_search/filtered_search_dropdown */
+
+/* global droplabAjax */
+/* global droplabFilter */
+
+(() => {
+  class DropdownNonUser extends gl.FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter, endpoint, symbol) {
+      super(droplab, dropdown, input, filter);
+      this.symbol = symbol;
+      this.config = {
+        droplabAjax: {
+          endpoint,
+          method: 'setData',
+          loadingTemplate: this.loadingTemplate,
+        },
+        droplabFilter: {
+          filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol),
+        },
+      };
+    }
+
+    itemClicked(e) {
+      super.itemClicked(e, (selected) => {
+        const title = selected.querySelector('.js-data-value').innerText.trim();
+        return `${this.symbol}${gl.DropdownUtils.getEscapedText(title)}`;
+      });
+    }
+
+    renderContent(forceShowList = false) {
+      this.droplab
+        .changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
+      super.renderContent(forceShowList);
+    }
+
+    init() {
+      this.droplab
+        .addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownNonUser = DropdownNonUser;
+})();
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6
new file mode 100644
index 00000000000..e80d266ae89
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6
@@ -0,0 +1,53 @@
+/*= require filtered_search/filtered_search_dropdown */
+
+/* global droplabAjaxFilter */
+
+(() => {
+  class DropdownUser extends gl.FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter) {
+      super(droplab, dropdown, input, filter);
+      this.config = {
+        droplabAjaxFilter: {
+          endpoint: '/autocomplete/users.json',
+          searchKey: 'search',
+          params: {
+            per_page: 20,
+            active: true,
+            project_id: this.getProjectId(),
+            current_user: true,
+          },
+          searchValueFunction: this.getSearchInput.bind(this),
+          loadingTemplate: this.loadingTemplate,
+        },
+      };
+    }
+
+    itemClicked(e) {
+      super.itemClicked(e,
+        selected => selected.querySelector('.dropdown-light-content').innerText.trim());
+    }
+
+    renderContent(forceShowList = false) {
+      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config);
+      super.renderContent(forceShowList);
+    }
+
+    getProjectId() {
+      return this.input.getAttribute('data-project-id');
+    }
+
+    getSearchInput() {
+      const query = this.input.value.trim();
+      const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
+
+      return lastToken.value || '';
+    }
+
+    init() {
+      this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownUser = DropdownUser;
+})();
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6
new file mode 100644
index 00000000000..c27ef3042d1
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6
@@ -0,0 +1,79 @@
+(() => {
+  class DropdownUtils {
+    static getEscapedText(text) {
+      let escapedText = text;
+      const hasSpace = text.indexOf(' ') !== -1;
+      const hasDoubleQuote = text.indexOf('"') !== -1;
+
+      // Encapsulate value with quotes if it has spaces
+      // Known side effect: values's with both single and double quotes
+      // won't escape properly
+      if (hasSpace) {
+        if (hasDoubleQuote) {
+          escapedText = `'${text}'`;
+        } else {
+          // Encapsulate singleQuotes or if it hasSpace
+          escapedText = `"${text}"`;
+        }
+      }
+
+      return escapedText;
+    }
+
+    static filterWithSymbol(filterSymbol, item, query) {
+      const updatedItem = item;
+      const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(query);
+
+      if (lastToken !== searchToken) {
+        const title = updatedItem.title.toLowerCase();
+        let value = lastToken.value.toLowerCase();
+
+        if ((value[0] === '"' || value[0] === '\'') && title.indexOf(' ') !== -1) {
+          value = value.slice(1);
+        }
+
+        // Eg. filterSymbol = ~ for labels
+        const matchWithoutSymbol = lastToken.symbol === filterSymbol && title.indexOf(value) !== -1;
+        const match = title.indexOf(`${lastToken.symbol}${value}`) !== -1;
+
+        updatedItem.droplab_hidden = !match && !matchWithoutSymbol;
+      } else {
+        updatedItem.droplab_hidden = false;
+      }
+
+      return updatedItem;
+    }
+
+    static filterHint(item, query) {
+      const updatedItem = item;
+      let { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
+      lastToken = lastToken.key || lastToken || '';
+
+      if (!lastToken || query.split('').last() === ' ') {
+        updatedItem.droplab_hidden = false;
+      } else if (lastToken) {
+        const split = lastToken.split(':');
+        const tokenName = split[0].split(' ').last();
+
+        const match = updatedItem.hint.indexOf(tokenName.toLowerCase()) === -1;
+        updatedItem.droplab_hidden = tokenName ? match : false;
+      }
+
+      return updatedItem;
+    }
+
+    static setDataValueIfSelected(filter, selected) {
+      const dataValue = selected.getAttribute('data-value');
+
+      if (dataValue) {
+        gl.FilteredSearchDropdownManager.addWordToInput(filter, dataValue);
+      }
+
+      // Return boolean based on whether it was set
+      return dataValue !== null;
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownUtils = DropdownUtils;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_bundle.js b/app/assets/javascripts/filtered_search/filtered_search_bundle.js
new file mode 100644
index 00000000000..d188718c5f3
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_bundle.js
@@ -0,0 +1,7 @@
+ // This is a manifest file that'll be compiled into including all the files listed below.
+ // Add new JavaScript code in separate files in this directory and they'll automatically
+ // be included in the compiled file accessible from http://example.com/assets/application.js
+ // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+ // the compiled file.
+ //
+ /*= require_tree . */
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
new file mode 100644
index 00000000000..886d8113f4a
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
@@ -0,0 +1,102 @@
+(() => {
+  const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
+
+  class FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter) {
+      this.droplab = droplab;
+      this.hookId = input.getAttribute('data-id');
+      this.input = input;
+      this.filter = filter;
+      this.dropdown = dropdown;
+      this.loadingTemplate = `<div class="filter-dropdown-loading">
+        <i class="fa fa-spinner fa-spin"></i>
+      </div>`;
+      this.bindEvents();
+    }
+
+    bindEvents() {
+      this.itemClickedWrapper = this.itemClicked.bind(this);
+      this.dropdown.addEventListener('click.dl', this.itemClickedWrapper);
+    }
+
+    unbindEvents() {
+      this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper);
+    }
+
+    getCurrentHook() {
+      return this.droplab.hooks.filter(h => h.id === this.hookId)[0] || null;
+    }
+
+    itemClicked(e, getValueFunction) {
+      const { selected } = e.detail;
+
+      if (selected.tagName === 'LI' && selected.innerHTML) {
+        const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(this.filter, selected);
+
+        if (!dataValueSet) {
+          const value = getValueFunction(selected);
+          gl.FilteredSearchDropdownManager.addWordToInput(this.filter, value);
+        }
+
+        this.dismissDropdown();
+      }
+    }
+
+    setAsDropdown() {
+      this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.dropdown.id}`);
+    }
+
+    setOffset(offset = 0) {
+      this.dropdown.style.left = `${offset}px`;
+    }
+
+    renderContent(forceShowList = false) {
+      if (forceShowList && this.getCurrentHook().list.hidden) {
+        this.getCurrentHook().list.show();
+      }
+    }
+
+    render(forceRenderContent = false, forceShowList = false) {
+      this.setAsDropdown();
+
+      const currentHook = this.getCurrentHook();
+      const firstTimeInitialized = currentHook === null;
+
+      if (firstTimeInitialized || forceRenderContent) {
+        this.renderContent(forceShowList);
+      } else if (currentHook.list.list.id !== this.dropdown.id) {
+        this.renderContent(forceShowList);
+      }
+    }
+
+    dismissDropdown() {
+      // Focusing on the input will dismiss dropdown
+      // (default droplab functionality)
+      this.input.focus();
+    }
+
+    dispatchInputEvent() {
+      // Propogate input change to FilteredSearchDropdownManager
+      // so that it can determine which dropdowns to open
+      this.input.dispatchEvent(new Event('input'));
+    }
+
+    hideDropdown() {
+      this.getCurrentHook().list.hide();
+    }
+
+    resetFilters() {
+      const hook = this.getCurrentHook();
+      const data = hook.list.data;
+      const results = data.map((o) => {
+        const updated = o;
+        updated.droplab_hidden = false;
+        return updated;
+      });
+      hook.list.render(results);
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchDropdown = FilteredSearchDropdown;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
new file mode 100644
index 00000000000..1cd0483877a
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
@@ -0,0 +1,193 @@
+/* global DropLab */
+
+(() => {
+  class FilteredSearchDropdownManager {
+    constructor() {
+      this.tokenizer = gl.FilteredSearchTokenizer;
+      this.filteredSearchInput = document.querySelector('.filtered-search');
+
+      this.setupMapping();
+
+      this.cleanupWrapper = this.cleanup.bind(this);
+      document.addEventListener('page:fetch', this.cleanupWrapper);
+    }
+
+    cleanup() {
+      if (this.droplab) {
+        this.droplab.destroy();
+        this.droplab = null;
+      }
+
+      this.setupMapping();
+
+      document.removeEventListener('page:fetch', this.cleanupWrapper);
+    }
+
+    setupMapping() {
+      this.mapping = {
+        author: {
+          reference: null,
+          gl: 'DropdownUser',
+          element: document.querySelector('#js-dropdown-author'),
+        },
+        assignee: {
+          reference: null,
+          gl: 'DropdownUser',
+          element: document.querySelector('#js-dropdown-assignee'),
+        },
+        milestone: {
+          reference: null,
+          gl: 'DropdownNonUser',
+          extraArguments: ['milestones.json', '%'],
+          element: document.querySelector('#js-dropdown-milestone'),
+        },
+        label: {
+          reference: null,
+          gl: 'DropdownNonUser',
+          extraArguments: ['labels.json', '~'],
+          element: document.querySelector('#js-dropdown-label'),
+        },
+        hint: {
+          reference: null,
+          gl: 'DropdownHint',
+          element: document.querySelector('#js-dropdown-hint'),
+        },
+      };
+    }
+
+    static addWordToInput(tokenName, tokenValue = '') {
+      const input = document.querySelector('.filtered-search');
+      const word = `${tokenName}:${tokenValue}`;
+
+      const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(input.value);
+      const lastSearchToken = searchToken.split(' ').last();
+      const lastInputCharacter = input.value[input.value.length - 1];
+      const lastInputTrimmedCharacter = input.value.trim()[input.value.trim().length - 1];
+
+      // Remove the typed tokenName
+      if (word.indexOf(lastSearchToken) === 0 && searchToken !== '') {
+        // Remove spaces after the colon
+        if (lastInputCharacter === ' ' && lastInputTrimmedCharacter === ':') {
+          input.value = input.value.trim();
+        }
+
+        input.value = input.value.slice(0, -1 * lastSearchToken.length);
+      } else if (lastInputCharacter !== ' ' || (lastToken && lastToken.value[lastToken.value.length - 1] === ' ')) {
+        // Remove the existing tokenValue
+        const lastTokenString = `${lastToken.key}:${lastToken.symbol}${lastToken.value}`;
+        input.value = input.value.slice(0, -1 * lastTokenString.length);
+      }
+
+      input.value += word;
+    }
+
+    updateCurrentDropdownOffset() {
+      this.updateDropdownOffset(this.currentDropdown);
+    }
+
+    updateDropdownOffset(key) {
+      if (!this.font) {
+        this.font = window.getComputedStyle(this.filteredSearchInput).font;
+      }
+
+      const filterIconPadding = 27;
+      const offset = gl.text
+        .getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding;
+
+      this.mapping[key].reference.setOffset(offset);
+    }
+
+    load(key, firstLoad = false) {
+      const mappingKey = this.mapping[key];
+      const glClass = mappingKey.gl;
+      const element = mappingKey.element;
+      let forceShowList = false;
+
+      if (!mappingKey.reference) {
+        const dl = this.droplab;
+        const defaultArguments = [null, dl, element, this.filteredSearchInput, key];
+        const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
+
+        // Passing glArguments to `new gl[glClass](<arguments>)`
+        mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
+      }
+
+      if (firstLoad) {
+        mappingKey.reference.init();
+      }
+
+      if (this.currentDropdown === 'hint') {
+        // Force the dropdown to show if it was clicked from the hint dropdown
+        forceShowList = true;
+      }
+
+      this.updateDropdownOffset(key);
+      mappingKey.reference.render(firstLoad, forceShowList);
+
+      this.currentDropdown = key;
+    }
+
+    loadDropdown(dropdownName = '') {
+      let firstLoad = false;
+
+      if (!this.droplab) {
+        firstLoad = true;
+        this.droplab = new DropLab();
+      }
+
+      const match = gl.FilteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
+      const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key
+        && this.mapping[match.key];
+      const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
+
+      if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
+        const key = match && match.key ? match.key : 'hint';
+        this.load(key, firstLoad);
+      }
+    }
+
+    setDropdown() {
+      const { lastToken, searchToken } = this.tokenizer
+        .processTokens(this.filteredSearchInput.value);
+
+      if (this.filteredSearchInput.value.split('').last() === ' ') {
+        this.updateCurrentDropdownOffset();
+      }
+
+      if (lastToken === searchToken && lastToken !== null) {
+        // Token is not fully initialized yet because it has no value
+        // Eg. token = 'label:'
+
+        const split = lastToken.split(':');
+        const dropdownName = split[0].split(' ').last();
+        this.loadDropdown(split.length > 1 ? dropdownName : '');
+      } else if (lastToken) {
+        // Token has been initialized into an object because it has a value
+        this.loadDropdown(lastToken.key);
+      } else {
+        this.loadDropdown('hint');
+      }
+    }
+
+    resetDropdowns() {
+      // Force current dropdown to hide
+      this.mapping[this.currentDropdown].reference.hideDropdown();
+
+      // Re-Load dropdown
+      this.setDropdown();
+
+      // Reset filters for current dropdown
+      this.mapping[this.currentDropdown].reference.resetFilters();
+
+      // Reposition dropdown so that it is aligned with cursor
+      this.updateDropdownOffset(this.currentDropdown);
+    }
+
+    destroyDroplab() {
+      this.droplab.destroy();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
new file mode 100644
index 00000000000..ffd0d7e9cba
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -0,0 +1,171 @@
+/* global Turbolinks */
+
+(() => {
+  class FilteredSearchManager {
+    constructor() {
+      this.filteredSearchInput = document.querySelector('.filtered-search');
+      this.clearSearchButton = document.querySelector('.clear-search');
+
+      if (this.filteredSearchInput) {
+        this.tokenizer = gl.FilteredSearchTokenizer;
+        this.dropdownManager = new gl.FilteredSearchDropdownManager();
+
+        this.bindEvents();
+        this.loadSearchParamsFromURL();
+        this.dropdownManager.setDropdown();
+
+        this.cleanupWrapper = this.cleanup.bind(this);
+        document.addEventListener('page:fetch', this.cleanupWrapper);
+      }
+    }
+
+    cleanup() {
+      this.unbindEvents();
+      document.removeEventListener('page:fetch', this.cleanupWrapper);
+    }
+
+    bindEvents() {
+      this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
+      this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this);
+      this.checkForEnterWrapper = this.checkForEnter.bind(this);
+      this.clearSearchWrapper = this.clearSearch.bind(this);
+      this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
+
+      this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
+      this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
+      this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
+      this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
+      this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
+    }
+
+    unbindEvents() {
+      this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
+      this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
+      this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
+      this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
+      this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
+    }
+
+    checkForBackspace(e) {
+      // 8 = Backspace Key
+      // 46 = Delete Key
+      if (e.keyCode === 8 || e.keyCode === 46) {
+        // Reposition dropdown so that it is aligned with cursor
+        this.dropdownManager.updateCurrentDropdownOffset();
+      }
+    }
+
+    checkForEnter(e) {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+
+        // Prevent droplab from opening dropdown
+        this.dropdownManager.destroyDroplab();
+
+        this.search();
+      }
+    }
+
+    toggleClearSearchButton(e) {
+      if (e.target.value) {
+        this.clearSearchButton.classList.remove('hidden');
+      } else {
+        this.clearSearchButton.classList.add('hidden');
+      }
+    }
+
+    clearSearch(e) {
+      e.preventDefault();
+
+      this.filteredSearchInput.value = '';
+      this.clearSearchButton.classList.add('hidden');
+
+      this.dropdownManager.resetDropdowns();
+    }
+
+    loadSearchParamsFromURL() {
+      const params = gl.utils.getUrlParamsArray();
+      const inputValues = [];
+
+      params.forEach((p) => {
+        const split = p.split('=');
+        const keyParam = decodeURIComponent(split[0]);
+        const value = split[1];
+
+        // Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys
+        const condition = gl.FilteredSearchTokenKeys.searchByConditionUrl(p);
+
+        if (condition) {
+          inputValues.push(`${condition.tokenKey}:${condition.value}`);
+        } else {
+          // Sanitize value since URL converts spaces into +
+          // Replace before decode so that we know what was originally + versus the encoded +
+          const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value;
+          const match = gl.FilteredSearchTokenKeys.searchByKeyParam(keyParam);
+
+          if (match) {
+            const indexOf = keyParam.indexOf('_');
+            const sanitizedKey = indexOf !== -1 ? keyParam.slice(0, keyParam.indexOf('_')) : keyParam;
+            const symbol = match.symbol;
+            let quotationsToUse = '';
+
+            if (sanitizedValue.indexOf(' ') !== -1) {
+              // Prefer ", but use ' if required
+              quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\'';
+            }
+
+            inputValues.push(`${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
+          } else if (!match && keyParam === 'search') {
+            inputValues.push(sanitizedValue);
+          }
+        }
+      });
+
+      // Trim the last space value
+      this.filteredSearchInput.value = inputValues.join(' ');
+
+      if (inputValues.length > 0) {
+        this.clearSearchButton.classList.remove('hidden');
+      }
+    }
+
+    search() {
+      const paths = [];
+      const { tokens, searchToken } = this.tokenizer.processTokens(this.filteredSearchInput.value);
+      const currentState = gl.utils.getParameterByName('state') || 'opened';
+      paths.push(`state=${currentState}`);
+
+      tokens.forEach((token) => {
+        const condition = gl.FilteredSearchTokenKeys
+          .searchByConditionKeyValue(token.key, token.value.toLowerCase());
+        const { param } = gl.FilteredSearchTokenKeys.searchByKey(token.key);
+        const keyParam = param ? `${token.key}_${param}` : token.key;
+        let tokenPath = '';
+
+        if (condition) {
+          tokenPath = condition.url;
+        } else {
+          let tokenValue = token.value;
+
+          if ((tokenValue[0] === '\'' && tokenValue[tokenValue.length - 1] === '\'') ||
+            (tokenValue[0] === '"' && tokenValue[tokenValue.length - 1] === '"')) {
+            tokenValue = tokenValue.slice(1, tokenValue.length - 1);
+          }
+
+          tokenPath = `${keyParam}=${encodeURIComponent(tokenValue)}`;
+        }
+
+        paths.push(tokenPath);
+      });
+
+      if (searchToken) {
+        paths.push(`search=${encodeURIComponent(searchToken)}`);
+      }
+
+      Turbolinks.visit(`?scope=all&utf8=✓&${paths.join('&')}`);
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchManager = FilteredSearchManager;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6
new file mode 100644
index 00000000000..e46373024b6
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6
@@ -0,0 +1,83 @@
+(() => {
+  const tokenKeys = [{
+    key: 'author',
+    type: 'string',
+    param: 'username',
+    symbol: '@',
+  }, {
+    key: 'assignee',
+    type: 'string',
+    param: 'username',
+    symbol: '@',
+  }, {
+    key: 'milestone',
+    type: 'string',
+    param: 'title',
+    symbol: '%',
+  }, {
+    key: 'label',
+    type: 'array',
+    param: 'name[]',
+    symbol: '~',
+  }];
+
+  const conditions = [{
+    url: 'assignee_id=0',
+    tokenKey: 'assignee',
+    value: 'none',
+  }, {
+    url: 'milestone_title=No+Milestone',
+    tokenKey: 'milestone',
+    value: 'none',
+  }, {
+    url: 'milestone_title=%23upcoming',
+    tokenKey: 'milestone',
+    value: 'upcoming',
+  }, {
+    url: 'label_name[]=No+Label',
+    tokenKey: 'label',
+    value: 'none',
+  }];
+
+  class FilteredSearchTokenKeys {
+    static get() {
+      return tokenKeys;
+    }
+
+    static getConditions() {
+      return conditions;
+    }
+
+    static searchByKey(key) {
+      return tokenKeys.find(tokenKey => tokenKey.key === key) || null;
+    }
+
+    static searchBySymbol(symbol) {
+      return tokenKeys.find(tokenKey => tokenKey.symbol === symbol) || null;
+    }
+
+    static searchByKeyParam(keyParam) {
+      return tokenKeys.find((tokenKey) => {
+        let tokenKeyParam = tokenKey.key;
+
+        if (tokenKey.param) {
+          tokenKeyParam += `_${tokenKey.param}`;
+        }
+
+        return keyParam === tokenKeyParam;
+      }) || null;
+    }
+
+    static searchByConditionUrl(url) {
+      return conditions.find(condition => condition.url === url) || null;
+    }
+
+    static searchByConditionKeyValue(key, value) {
+      return conditions
+        .find(condition => condition.tokenKey === key && condition.value === value) || null;
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchTokenKeys = FilteredSearchTokenKeys;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6
new file mode 100644
index 00000000000..cf53845a48b
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6
@@ -0,0 +1,45 @@
+(() => {
+  class FilteredSearchTokenizer {
+    static processTokens(input) {
+      // Regex extracts `(token):(symbol)(value)`
+      // Values that start with a double quote must end in a double quote (same for single)
+      const tokenRegex = /(\w+):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\S+))/g;
+      const tokens = [];
+      let lastToken = null;
+      const searchToken = input.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => {
+        let tokenValue = v1 || v2 || v3;
+        let tokenSymbol = symbol;
+
+        if (tokenValue === '~' || tokenValue === '%' || tokenValue === '@') {
+          tokenSymbol = tokenValue;
+          tokenValue = '';
+        }
+
+        tokens.push({
+          key,
+          value: tokenValue || '',
+          symbol: tokenSymbol || '',
+        });
+        return '';
+      }).replace(/\s{2,}/g, ' ').trim() || '';
+
+      if (tokens.length > 0) {
+        const last = tokens[tokens.length - 1];
+        const lastString = `${last.key}:${last.symbol}${last.value}`;
+        lastToken = input.lastIndexOf(lastString) ===
+          input.length - lastString.length ? last : searchToken;
+      } else {
+        lastToken = searchToken;
+      }
+
+      return {
+        tokens,
+        lastToken,
+        searchToken,
+      };
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchTokenizer = FilteredSearchTokenizer;
+})();
diff --git a/app/assets/javascripts/gfm_auto_complete.js.es6 b/app/assets/javascripts/gfm_auto_complete.js.es6
index 2f3da745119..6ca543c2b00 100644
--- a/app/assets/javascripts/gfm_auto_complete.js.es6
+++ b/app/assets/javascripts/gfm_auto_complete.js.es6
@@ -1,19 +1,29 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-template-curly-in-string, comma-dangle, object-shorthand, quotes, dot-notation, no-else-return, one-var, no-var, no-underscore-dangle, one-var-declaration-per-line, no-param-reassign, no-useless-escape, prefer-template, consistent-return, wrap-iife, prefer-arrow-callback, camelcase, no-unused-vars, no-useless-return, padded-blocks, vars-on-top, indent, no-extra-semi, no-multi-spaces, semi, max-len */
+
 // Creates the variables for setting up GFM auto-completion
 (function() {
-  if (window.GitLab == null) {
-    window.GitLab = {};
+  if (window.gl == null) {
+    window.gl = {};
   }
 
   function sanitize(str) {
     return str.replace(/<(?:.|\n)*?>/gm, '');
   }
 
-  GitLab.GfmAutoComplete = {
-    dataLoading: false,
-    dataLoaded: false,
+  window.gl.GfmAutoComplete = {
+    dataSources: {},
+    defaultLoadingData: ['loading'],
     cachedData: {},
-    dataSource: '',
+    isLoadingData: {},
+    atTypeMap: {
+      ':': 'emojis',
+      '@': 'members',
+      '#': 'issues',
+      '!': 'mergeRequests',
+      '~': 'labels',
+      '%': 'milestones',
+      '/': 'commands'
+    },
     // Emoji
     Emoji: {
       template: '<li>${name} <img alt="${name}" height="20" src="${path}" width="20" /></li>'
@@ -34,46 +44,45 @@
       template: '<li>${title}</li>'
     },
     Loading: {
-      template: '<li><i class="fa fa-refresh fa-spin"></i> Loading...</li>'
+      template: '<li style="pointer-events: none;"><i class="fa fa-refresh fa-spin"></i> Loading...</li>'
     },
     DefaultOptions: {
       sorter: function(query, items, searchKey) {
-        // Highlight first item only if at least one char was typed
-        this.setting.highlightFirst = this.setting.alwaysHighlightFirst || query.length > 0;
-        if ((items[0].name != null) && items[0].name === 'loading') {
+        this.setting.highlightFirst = query.length > 0;
+        if (gl.GfmAutoComplete.isLoading(items)) {
           return items;
         }
         return $.fn.atwho["default"].callbacks.sorter(query, items, searchKey);
       },
       filter: function(query, data, searchKey) {
-        if (data[0] === 'loading') {
+        if (gl.GfmAutoComplete.isLoading(data)) {
+          gl.GfmAutoComplete.fetchData(this.$inputor, this.at);
           return data;
+        } else {
+          return $.fn.atwho["default"].callbacks.filter(query, data, searchKey);
         }
-        return $.fn.atwho["default"].callbacks.filter(query, data, searchKey);
       },
       beforeInsert: function(value) {
         if (value && !this.setting.skipSpecialCharacterTest) {
           var withoutAt = value.substring(1);
           if (withoutAt && /[^\w\d]/.test(withoutAt)) value = value.charAt() + '"' + withoutAt + '"';
         }
-        if (!GitLab.GfmAutoComplete.dataLoaded) {
-          return this.at;
-        } else {
-          return value;
-        }
+        return value;
       },
       matcher: function (flag, subtext) {
         // The below is taken from At.js source
         // Tweaked to commands to start without a space only if char before is a non-word character
         // https://github.com/ichord/At.js
-        var _a, _y, regexp, match;
-        subtext = subtext.split(' ').pop();
+        var _a, _y, regexp, match, atSymbolsWithBar, atSymbolsWithoutBar;
+        atSymbolsWithBar = Object.keys(this.app.controllers).join('|');
+        atSymbolsWithoutBar = Object.keys(this.app.controllers).join('');
+        subtext = subtext.split(/\s+/g).pop();
         flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
 
         _a = decodeURI("%C3%80");
         _y = decodeURI("%C3%BF");
 
-        regexp = new RegExp("(?:\\B|\\W|\\s)" + flag + "(?!\\W)([A-Za-z" + _a + "-" + _y + "0-9_\'\.\+\-]*)|([^\\x00-\\xff]*)$", 'gi');
+        regexp = new RegExp("^(?:\\B|[^a-zA-Z0-9_" + atSymbolsWithoutBar + "]|\\s)" + flag + "(?![" + atSymbolsWithBar + "])([A-Za-z" + _a + "-" + _y + "0-9_\'\.\+\-]*)$", 'gi');
 
         match = regexp.exec(subtext);
 
@@ -84,69 +93,44 @@
         }
       }
     },
-    setup: _.debounce(function(input) {
+    setup: function(input) {
       // Add GFM auto-completion to all input fields, that accept GFM input.
       this.input = input || $('.js-gfm-input');
-      // destroy previous instances
-      this.destroyAtWho();
-      // set up instances
-      this.setupAtWho();
-
-      if (this.dataSource && !this.dataLoading && !this.cachedData) {
-        this.dataLoading = true;
-        return this.fetchData(this.dataSource)
-          .done((data) => {
-            this.dataLoading = false;
-            this.loadData(data);
-          });
-        };
-
-      if (this.cachedData != null) {
-        return this.loadData(this.cachedData);
-      }
-    }, 1000),
-    setupAtWho: function() {
+      this.setupLifecycle();
+    },
+    setupLifecycle() {
+      this.input.each((i, input) => {
+        const $input = $(input);
+        $input.off('focus.setupAtWho').on('focus.setupAtWho', this.setupAtWho.bind(this, $input));
+      });
+    },
+    setupAtWho: function($input) {
       // Emoji
-      this.input.atwho({
+      $input.atwho({
         at: ':',
-        displayTpl: (function(_this) {
-          return function(value) {
-            if (value.path != null) {
-              return _this.Emoji.template;
-            } else {
-              return _this.Loading.template;
-            }
-          };
-        })(this),
+        displayTpl: function(value) {
+          return value.path != null ? this.Emoji.template : this.Loading.template;
+        }.bind(this),
         insertTpl: ':${name}:',
-        data: ['loading'],
-        startWithSpace: false,
         skipSpecialCharacterTest: true,
+        data: this.defaultLoadingData,
         callbacks: {
           sorter: this.DefaultOptions.sorter,
-          filter: this.DefaultOptions.filter,
           beforeInsert: this.DefaultOptions.beforeInsert,
-          matcher: this.DefaultOptions.matcher
+          filter: this.DefaultOptions.filter
         }
       });
       // Team Members
-      this.input.atwho({
+      $input.atwho({
         at: '@',
-        displayTpl: (function(_this) {
-          return function(value) {
-            if (value.username != null) {
-              return _this.Members.template;
-            } else {
-              return _this.Loading.template;
-            }
-          };
-        })(this),
+        displayTpl: function(value) {
+          return value.username != null ? this.Members.template : this.Loading.template;
+        }.bind(this),
         insertTpl: '${atwho-at}${username}',
         searchKey: 'search',
-        data: ['loading'],
-        startWithSpace: false,
         alwaysHighlightFirst: true,
         skipSpecialCharacterTest: true,
+        data: this.defaultLoadingData,
         callbacks: {
           sorter: this.DefaultOptions.sorter,
           filter: this.DefaultOptions.filter,
@@ -177,22 +161,15 @@
           }
         }
       });
-      this.input.atwho({
+      $input.atwho({
         at: '#',
         alias: 'issues',
         searchKey: 'search',
-        displayTpl: (function(_this) {
-          return function(value) {
-            if (value.title != null) {
-              return _this.Issues.template;
-            } else {
-              return _this.Loading.template;
-            }
-          };
-        })(this),
-        data: ['loading'],
+        displayTpl: function(value) {
+          return value.title != null ? this.Issues.template : this.Loading.template;
+        }.bind(this),
+        data: this.defaultLoadingData,
         insertTpl: '${atwho-at}${id}',
-        startWithSpace: false,
         callbacks: {
           sorter: this.DefaultOptions.sorter,
           filter: this.DefaultOptions.filter,
@@ -212,26 +189,20 @@
           }
         }
       });
-      this.input.atwho({
+      $input.atwho({
         at: '%',
         alias: 'milestones',
         searchKey: 'search',
-        displayTpl: (function(_this) {
-          return function(value) {
-            if (value.title != null) {
-              return _this.Milestones.template;
-            } else {
-              return _this.Loading.template;
-            }
-          };
-        })(this),
         insertTpl: '${atwho-at}${title}',
-        data: ['loading'],
-        startWithSpace: false,
+        displayTpl: function(value) {
+          return value.title != null ? this.Milestones.template : this.Loading.template;
+        }.bind(this),
+        data: this.defaultLoadingData,
         callbacks: {
           matcher: this.DefaultOptions.matcher,
           sorter: this.DefaultOptions.sorter,
           beforeInsert: this.DefaultOptions.beforeInsert,
+          filter: this.DefaultOptions.filter,
           beforeSave: function(milestones) {
             return $.map(milestones, function(m) {
               if (m.title == null) {
@@ -246,21 +217,14 @@
           }
         }
       });
-      this.input.atwho({
+      $input.atwho({
         at: '!',
         alias: 'mergerequests',
         searchKey: 'search',
-        displayTpl: (function(_this) {
-          return function(value) {
-            if (value.title != null) {
-              return _this.Issues.template;
-            } else {
-              return _this.Loading.template;
-            }
-          };
-        })(this),
-        data: ['loading'],
-        startWithSpace: false,
+        displayTpl: function(value) {
+          return value.title != null ? this.Issues.template : this.Loading.template;
+        }.bind(this),
+        data: this.defaultLoadingData,
         insertTpl: '${atwho-at}${id}',
         callbacks: {
           sorter: this.DefaultOptions.sorter,
@@ -281,18 +245,30 @@
           }
         }
       });
-      this.input.atwho({
+      $input.atwho({
         at: '~',
         alias: 'labels',
         searchKey: 'search',
-        displayTpl: this.Labels.template,
+        data: this.defaultLoadingData,
+        displayTpl: function(value) {
+          return this.isLoading(value) ? this.Loading.template : this.Labels.template;
+        }.bind(this),
         insertTpl: '${atwho-at}${title}',
-        startWithSpace: false,
         callbacks: {
           matcher: this.DefaultOptions.matcher,
-          sorter: this.DefaultOptions.sorter,
           beforeInsert: this.DefaultOptions.beforeInsert,
+          filter: this.DefaultOptions.filter,
+          sorter: this.DefaultOptions.sorter,
           beforeSave: function(merges) {
+            if (gl.GfmAutoComplete.isLoading(merges)) return merges;
+            var sanitizeLabelTitle;
+            sanitizeLabelTitle = function(title) {
+              if (/[\w\?&]+\s+[\w\?&]+/g.test(title)) {
+                return "\"" + (sanitize(title)) + "\"";
+              } else {
+                return sanitize(title);
+              }
+            };
             return $.map(merges, function(m) {
               return {
                 title: sanitize(m.title),
@@ -304,12 +280,14 @@
         }
       });
       // We don't instantiate the slash commands autocomplete for note and issue/MR edit forms
-      this.input.filter('[data-supports-slash-commands="true"]').atwho({
+      $input.filter('[data-supports-slash-commands="true"]').atwho({
         at: '/',
         alias: 'commands',
         searchKey: 'search',
         skipSpecialCharacterTest: true,
+        data: this.defaultLoadingData,
         displayTpl: function(value) {
+          if (this.isLoading(value)) return this.Loading.template;
           var tpl = '<li>/${name}';
           if (value.aliases.length > 0) {
             tpl += ' <small>(or /<%- aliases.join(", /") %>)</small>';
@@ -322,7 +300,7 @@
           }
           tpl += '</li>';
           return _.template(tpl)(value);
-        },
+        }.bind(this),
         insertTpl: function(value) {
           var tpl = "/${name} ";
           var reference_prefix = null;
@@ -340,6 +318,7 @@
           filter: this.DefaultOptions.filter,
           beforeInsert: this.DefaultOptions.beforeInsert,
           beforeSave: function(commands) {
+            if (gl.GfmAutoComplete.isLoading(commands)) return commands;
             return $.map(commands, function(c) {
               var search = c.name;
               if (c.aliases.length > 0) {
@@ -367,32 +346,29 @@
       });
       return;
     },
-    destroyAtWho: function() {
-      return this.input.atwho('destroy');
-    },
-    fetchData: function(dataSource) {
-      return $.getJSON(dataSource);
+    fetchData: function($input, at) {
+      if (this.isLoadingData[at]) return;
+      this.isLoadingData[at] = true;
+      if (this.cachedData[at]) {
+        this.loadData($input, at, this.cachedData[at]);
+      } else {
+        $.getJSON(this.dataSources[this.atTypeMap[at]], (data) => {
+          this.loadData($input, at, data);
+        }).fail(() => { this.isLoadingData[at] = false; });
+      }
     },
-    loadData: function(data) {
-      this.cachedData = data;
-      this.dataLoaded = true;
-      // load members
-      this.input.atwho('load', '@', data.members);
-      // load issues
-      this.input.atwho('load', 'issues', data.issues);
-      // load milestones
-      this.input.atwho('load', 'milestones', data.milestones);
-      // load merge requests
-      this.input.atwho('load', 'mergerequests', data.mergerequests);
-      // load emojis
-      this.input.atwho('load', ':', data.emojis);
-      // load labels
-      this.input.atwho('load', '~', data.labels);
-      // load commands
-      this.input.atwho('load', '/', data.commands);
+    loadData: function($input, at, data) {
+      this.isLoadingData[at] = false;
+      this.cachedData[at] = data;
+      $input.atwho('load', at, data);
       // This trigger at.js again
       // otherwise we would be stuck with loading until the user types
-      return $(':focus').trigger('keyup');
+      return $input.trigger('keyup');
+    },
+    isLoading(data) {
+      if (!data || !data.length) return false;
+      if (Array.isArray(data)) data = data[0];
+      return data === this.defaultLoadingData[0] || data.name === this.defaultLoadingData[0];
     }
   };
 
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 9a91018a8e4..00859728c30 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -1,4 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, space-before-blocks, prefer-rest-params, max-len, vars-on-top, no-plusplus, wrap-iife, no-unused-vars, quotes, no-shadow, no-cond-assign, prefer-arrow-callback, semi, no-return-assign, no-else-return, camelcase, no-undef, comma-dangle, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, padded-blocks, prefer-template, no-param-reassign, no-loop-func, no-extra-semi, keyword-spacing, no-mixed-operators, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, space-before-blocks, prefer-rest-params, max-len, vars-on-top, no-plusplus, wrap-iife, no-unused-vars, quotes, no-shadow, no-cond-assign, prefer-arrow-callback, semi, no-return-assign, no-else-return, camelcase, comma-dangle, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, padded-blocks, prefer-template, no-param-reassign, no-loop-func, no-extra-semi, keyword-spacing, no-mixed-operators */
+/* global fuzzaldrinPlus */
+/* global Turbolinks */
+
 (function() {
   var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote,
     bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
@@ -20,7 +23,6 @@
       this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true;
       $inputContainer = this.input.parent();
       $clearButton = $inputContainer.find('.js-dropdown-input-clear');
-      this.indeterminateIds = [];
       $clearButton.on('click', (function(_this) {
         // Clear click
         return function(e) {
@@ -188,7 +190,7 @@
   })();
 
   GitLabDropdown = (function() {
-    var ACTIVE_CLASS, FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, currentIndex;
+    var ACTIVE_CLASS, FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, CURSOR_SELECT_SCROLL_PADDING, currentIndex;
 
     LOADING_CLASS = "is-loading";
 
@@ -341,16 +343,18 @@
           selector = ".dropdown-page-one .dropdown-content a";
         }
         this.dropdown.on("click", selector, function(e) {
-          var $el, selected;
+          var $el, selected, selectedObj, isMarking;
           $el = $(this);
           selected = self.rowClicked($el);
+          selectedObj = selected ? selected[0] : null;
+          isMarking = selected ? selected[1] : null;
           if (self.options.clicked) {
-            self.options.clicked(selected, $el, e);
+            self.options.clicked(selectedObj, $el, e, isMarking);
           }
 
           // Update label right after all modifications in dropdown has been done
           if (self.options.toggleLabel) {
-            self.updateLabel(selected, $el, self);
+            self.updateLabel(selectedObj, $el, self);
           }
 
           $el.trigger('blur');
@@ -441,12 +445,6 @@
       this.resetRows();
       this.addArrowKeyEvent();
 
-      if (this.options.setIndeterminateIds) {
-        this.options.setIndeterminateIds.call(this);
-      }
-      if (this.options.setActiveIds) {
-        this.options.setActiveIds.call(this);
-      }
       // Makes indeterminate items effective
       if (this.fullData && this.dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')) {
         this.parseData(this.fullData);
@@ -478,12 +476,7 @@
       this.removeArrayKeyEvent();
       $input = this.dropdown.find(".dropdown-input-field");
       if (this.options.filterable) {
-        $input.blur().val("");
-      }
-      // Triggering 'keyup' will re-render the dropdown which is not always required
-      // specially if we want to keep the state of the dropdown needed for bulk-assignment
-      if (!this.options.persistWhenHide) {
-        $input.trigger("input");
+        $input.blur();
       }
       if (this.dropdown.find(".dropdown-toggle-page").length) {
         $('.dropdown-menu', this.dropdown).removeClass(PAGE_TWO_CLASS);
@@ -617,7 +610,8 @@
     };
 
     GitLabDropdown.prototype.rowClicked = function(el) {
-      var field, fieldName, groupName, isInput, selectedIndex, selectedObject, value;
+      var field, fieldName, groupName, isInput, selectedIndex, selectedObject, value, isMarking;
+
       fieldName = this.options.fieldName;
       isInput = $(this.el).is('input');
       if (this.renderedData) {
@@ -638,7 +632,7 @@
           el.addClass(ACTIVE_CLASS);
         }
 
-        return selectedObject;
+        return [selectedObject];
       }
 
       field = [];
@@ -656,6 +650,7 @@
       }
 
       if (el.hasClass(ACTIVE_CLASS)) {
+        isMarking = false;
         el.removeClass(ACTIVE_CLASS);
         if (field && field.length) {
           if (isInput) {
@@ -665,6 +660,7 @@
           }
         }
       } else if (el.hasClass(INDETERMINATE_CLASS)) {
+        isMarking = true;
         el.addClass(ACTIVE_CLASS);
         el.removeClass(INDETERMINATE_CLASS);
         if (field && field.length && value == null) {
@@ -674,6 +670,7 @@
           this.addInput(fieldName, value, selectedObject);
         }
       } else {
+        isMarking = true;
         if (!this.options.multiSelect || el.hasClass('dropdown-clear-active')) {
           this.dropdown.find("." + ACTIVE_CLASS).removeClass(ACTIVE_CLASS);
           if (!isInput) {
@@ -694,7 +691,7 @@
         }
       }
 
-      return selectedObject;
+      return [selectedObject, isMarking];
     };
 
     GitLabDropdown.prototype.focusTextInput = function() {
diff --git a/app/assets/javascripts/gl_field_errors.js.es6 b/app/assets/javascripts/gl_field_errors.js.es6
index 6ce392d2a5b..63f9cafa8d0 100644
--- a/app/assets/javascripts/gl_field_errors.js.es6
+++ b/app/assets/javascripts/gl_field_errors.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, class-methods-use-this, max-len, space-before-function-paren, arrow-parens, no-param-reassign, padded-blocks */
 
 //= require gl_field_error
 
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index db5d9e75b3a..04814fa0843 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -1,4 +1,8 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-undef, no-new, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-new, padded-blocks, max-len */
+/* global GitLab */
+/* global DropzoneInput */
+/* global autosize */
+
 (function() {
   this.GLForm = (function() {
     function GLForm(form) {
@@ -26,13 +30,13 @@
         this.form.addClass('gfm-form');
         // remove notify commit author checkbox for non-commit notes
         gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button'));
-        GitLab.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
+        gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
         new DropzoneInput(this.form);
         autosize(this.textarea);
         // form and textarea event listeners
         this.addEventListeners();
-        gl.text.init(this.form);
       }
+      gl.text.init(this.form);
       // hide discard button
       this.form.find('.js-note-discard').hide();
       return this.form.show();
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors.js b/app/assets/javascripts/graphs/stat_graph_contributors.js
index c3a132b3c75..2d08a7c6ac3 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors.js
@@ -1,4 +1,9 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, camelcase, one-var-declaration-per-line, no-undef, quotes, no-param-reassign, quote-props, comma-dangle, prefer-template, max-len, no-return-assign, padded-blocks, max-len */
+/* 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, padded-blocks */
+/* global ContributorsGraph */
+/* global ContributorsAuthorGraph */
+/* global ContributorsMasterGraph */
+/* global ContributorsStatGraphUtil */
+/* global d3 */
 
 /*= require d3 */
 
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
index cb2448e8cc7..9c5e9381e52 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, space-before-blocks, 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, padded-blocks, no-undef, newline-per-chained-call, no-else-return, max-len */
+/* eslint-disable func-names, space-before-function-paren, one-var, no-var, space-before-blocks, 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, padded-blocks, newline-per-chained-call, no-else-return */
+/* global d3 */
+/* global ContributorsGraph */
 
 /*= require d3 */
 
diff --git a/app/assets/javascripts/group_label_subscription.js.es6 b/app/assets/javascripts/group_label_subscription.js.es6
index eea6cd40859..8e10e424412 100644
--- a/app/assets/javascripts/group_label_subscription.js.es6
+++ b/app/assets/javascripts/group_label_subscription.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable func-names, object-shorthand, comma-dangle, wrap-iife, space-before-function-paren, no-param-reassign, padded-blocks, max-len */
+
 (function(global) {
   class GroupLabelSubscription {
     constructor(container) {
diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js
index 3dc6f05ca20..99700e7562a 100644
--- a/app/assets/javascripts/groups_select.js
+++ b/app/assets/javascripts/groups_select.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, one-var, camelcase, one-var-declaration-per-line, quotes, object-shorthand, no-undef, prefer-arrow-callback, comma-dangle, consistent-return, yoda, prefer-rest-params, prefer-spread, no-unused-vars, prefer-template, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, one-var, camelcase, one-var-declaration-per-line, quotes, object-shorthand, prefer-arrow-callback, comma-dangle, consistent-return, yoda, prefer-rest-params, prefer-spread, no-unused-vars, prefer-template, padded-blocks, max-len */
+/* global Api */
+
 (function() {
   var slice = [].slice;
 
@@ -14,7 +16,7 @@
             multiple: $(select).hasClass('multiselect'),
             minimumInputLength: 0,
             query: function(query) {
-              options = { all_available: all_available, skip_groups: skip_groups };
+              var options = { all_available: all_available, skip_groups: skip_groups };
               return Api.groups(query.term, options, function(groups) {
                 var data;
                 data = {
diff --git a/app/assets/javascripts/importer_status.js b/app/assets/javascripts/importer_status.js
index 9425b6ed9d4..fa795be07ed 100644
--- a/app/assets/javascripts/importer_status.js
+++ b/app/assets/javascripts/importer_status.js
@@ -1,6 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, camelcase, no-var, one-var, one-var-declaration-per-line, prefer-template, quotes, object-shorthand, comma-dangle, no-unused-vars, prefer-arrow-callback, no-else-return, padded-blocks, vars-on-top, no-new, no-undef, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, camelcase, no-var, one-var, one-var-declaration-per-line, prefer-template, quotes, object-shorthand, comma-dangle, no-unused-vars, prefer-arrow-callback, no-else-return, padded-blocks, vars-on-top, no-new, max-len */
+
 (function() {
-  this.ImporterStatus = (function() {
+  window.ImporterStatus = (function() {
     function ImporterStatus(jobs_url, import_url) {
       this.jobs_url = jobs_url;
       this.import_url = import_url;
@@ -75,7 +76,7 @@
       var jobsImportPath = $('.js-importer-status').data('jobs-import-path');
       var importPath = $('.js-importer-status').data('import-path');
 
-      new ImporterStatus(jobsImportPath, importPath);
+      new window.ImporterStatus(jobsImportPath, importPath);
     }
   });
 }).call(this);
diff --git a/app/assets/javascripts/issuable.js.es6 b/app/assets/javascripts/issuable.js.es6
index 46503c290ae..9c3c96c20ed 100644
--- a/app/assets/javascripts/issuable.js.es6
+++ b/app/assets/javascripts/issuable.js.es6
@@ -1,10 +1,13 @@
-/* eslint-disable */
-(function() {
+/* eslint-disable no-param-reassign, func-names, no-var, camelcase, no-unused-vars, object-shorthand, space-before-function-paren, no-return-assign, comma-dangle, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, prefer-const, padded-blocks, wrap-iife, max-len */
+/* global Issuable */
+/* global Turbolinks */
+
+((global) => {
   var issuable_created;
 
   issuable_created = false;
 
-  this.Issuable = {
+  global.Issuable = {
     init: function() {
       Issuable.initTemplates();
       Issuable.initSearch();
@@ -108,7 +111,11 @@
     filterResults: (function(_this) {
       return function(form) {
         var formAction, formData, issuesUrl;
-        formData = form.serialize();
+        formData = form.serializeArray();
+        formData = formData.filter(function(data) {
+          return data.value !== '';
+        });
+        formData = $.param(formData);
         formAction = form.attr('action');
         issuesUrl = formAction;
         issuesUrl += "" + (formAction.indexOf('?') < 0 ? '?' : '&');
@@ -141,6 +148,9 @@
       const $issuesOtherFilters = $('.issues-other-filters');
       const $issuesBulkUpdate = $('.issues_bulk_update');
 
+      this.issuableBulkActions.willUpdateLabels = false;
+      this.issuableBulkActions.setOriginalDropdownData();
+
       if ($checkedIssues.length > 0) {
         let ids = $.map($checkedIssues, function(value) {
           return $(value).data('id');
@@ -152,7 +162,6 @@
         $updateIssuesIds.val([]);
         $issuesBulkUpdate.hide();
         $issuesOtherFilters.show();
-        this.issuableBulkActions.willUpdateLabels = false;
       }
       return true;
     },
@@ -179,4 +188,4 @@
     }
   };
 
-}).call(this);
+})(window);
diff --git a/app/assets/javascripts/issuable/issuable_bundle.js.es6 b/app/assets/javascripts/issuable/issuable_bundle.js.es6
new file mode 100644
index 00000000000..7d0465aa8b4
--- /dev/null
+++ b/app/assets/javascripts/issuable/issuable_bundle.js.es6
@@ -0,0 +1 @@
+//= require ./time_tracking/time_tracking_bundle
diff --git a/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6
new file mode 100644
index 00000000000..72433df2818
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6
@@ -0,0 +1,42 @@
+/* global Vue */
+//= require lib/utils/pretty_time
+
+(() => {
+  Vue.component('time-tracking-collapsed-state', {
+    name: 'time-tracking-collapsed-state',
+    props: [
+      'showComparisonState',
+      'showSpentOnlyState',
+      'showEstimateOnlyState',
+      'showNoTimeTrackingState',
+      'timeSpentHumanReadable',
+      'timeEstimateHumanReadable',
+      'stopwatchSvg',
+    ],
+    methods: {
+      abbreviateTime(timeStr) {
+        return gl.utils.prettyTime.abbreviateTime(timeStr);
+      },
+    },
+    template: `
+      <div class='sidebar-collapsed-icon'>
+        <div v-html='stopwatchSvg'></div>
+        <div class='time-tracking-collapsed-summary'>
+          <div class='compare' v-if='showComparisonState'>
+            <span>{{ abbreviateTime(timeSpentHumanReadable) }} / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>
+          </div>
+          <div class='estimate-only' v-if='showEstimateOnlyState'>
+            <span class='bold'>-- / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>
+          </div>
+          <div class='spend-only' v-if='showSpentOnlyState'>
+            <span class='bold'>{{ abbreviateTime(timeSpentHumanReadable) }} / --</span>
+          </div>
+          <div class='no-tracking' v-if='showNoTimeTrackingState'>
+            <span class='no-value'>None</span>
+          </div>
+        </div>
+      </div>
+      `,
+  });
+})();
+
diff --git a/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js.es6
new file mode 100644
index 00000000000..6abbd5dd167
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js.es6
@@ -0,0 +1,69 @@
+/* global Vue */
+//= require lib/utils/pretty_time
+
+(() => {
+  const prettyTime = gl.utils.prettyTime;
+
+  Vue.component('time-tracking-comparison-pane', {
+    name: 'time-tracking-comparison-pane',
+    props: [
+      'timeSpent',
+      'timeEstimate',
+      'timeSpentHumanReadable',
+      'timeEstimateHumanReadable',
+    ],
+    computed: {
+      parsedRemaining() {
+        const diffSeconds = this.timeEstimate - this.timeSpent;
+        return prettyTime.parseSeconds(diffSeconds);
+      },
+      timeRemainingHumanReadable() {
+        return prettyTime.stringifyTime(this.parsedRemaining);
+      },
+      timeRemainingTooltip() {
+        const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
+        return `${prefix} ${this.timeRemainingHumanReadable}`;
+      },
+      /* Diff values for comparison meter */
+      timeRemainingMinutes() {
+        return this.timeEstimate - this.timeSpent;
+      },
+      timeRemainingPercent() {
+        return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`;
+      },
+      timeRemainingStatusClass() {
+        return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
+      },
+      /* Parsed time values */
+      parsedEstimate() {
+        return prettyTime.parseSeconds(this.timeEstimate);
+      },
+      parsedSpent() {
+        return prettyTime.parseSeconds(this.timeSpent);
+      },
+    },
+    template: `
+      <div class='time-tracking-comparison-pane'>
+        <div class='compare-meter' data-toggle='tooltip' data-placement='top' role='timeRemainingDisplay'
+          :aria-valuenow='timeRemainingTooltip'
+          :title='timeRemainingTooltip'
+          :data-original-title='timeRemainingTooltip'
+          :class='timeRemainingStatusClass'>
+          <div class='meter-container' role='timeSpentPercent' :aria-valuenow='timeRemainingPercent'>
+            <div :style='{ width: timeRemainingPercent }' class='meter-fill'></div>
+          </div>
+          <div class='compare-display-container'>
+            <div class='compare-display pull-left'>
+              <span class='compare-label'>Spent</span>
+              <span class='compare-value spent'>{{ timeSpentHumanReadable }}</span>
+            </div>
+            <div class='compare-display estimated pull-right'>
+              <span class='compare-label'>Est</span>
+              <span class='compare-value'>{{ timeEstimateHumanReadable }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js.es6
new file mode 100644
index 00000000000..309e9f2f9ef
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js.es6
@@ -0,0 +1,13 @@
+/* global Vue */
+(() => {
+  Vue.component('time-tracking-estimate-only-pane', {
+    name: 'time-tracking-estimate-only-pane',
+    props: ['timeEstimateHumanReadable'],
+    template: `
+      <div class='time-tracking-estimate-only-pane'>
+        <span class='bold'>Estimated:</span>
+        {{ timeEstimateHumanReadable }}
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/help_state.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/help_state.js.es6
new file mode 100644
index 00000000000..d7ced6d7151
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/help_state.js.es6
@@ -0,0 +1,24 @@
+/* global Vue */
+(() => {
+  Vue.component('time-tracking-help-state', {
+    name: 'time-tracking-help-state',
+    props: ['docsUrl'],
+    template: `
+      <div class='time-tracking-help-state'>
+        <div class='time-tracking-info'>
+          <h4>Track time with slash commands</h4>
+          <p>Slash commands can be used in the issues description and comment boxes.</p>
+          <p>
+            <code>/estimate</code>
+            will update the estimated time with the latest command.
+          </p>
+          <p>
+            <code>/spend</code>
+            will update the sum of the time spent.
+          </p>
+          <a class='btn btn-default learn-more-button' :href='docsUrl'>Learn more</a>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js.es6
new file mode 100644
index 00000000000..1d2ca643b5b
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js.es6
@@ -0,0 +1,11 @@
+/* global Vue */
+(() => {
+  Vue.component('time-tracking-no-tracking-pane', {
+    name: 'time-tracking-no-tracking-pane',
+    template: `
+      <div class='time-tracking-no-tracking-pane'>
+        <span class='no-value'>No estimate or time spent</span>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js.es6
new file mode 100644
index 00000000000..ed283fec3c3
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js.es6
@@ -0,0 +1,13 @@
+/* global Vue */
+(() => {
+  Vue.component('time-tracking-spent-only-pane', {
+    name: 'time-tracking-spent-only-pane',
+    props: ['timeSpentHumanReadable'],
+    template: `
+      <div class='time-tracking-spend-only-pane'>
+        <span class='bold'>Spent:</span>
+        {{ timeSpentHumanReadable }}
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6
new file mode 100644
index 00000000000..26563a7713b
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6
@@ -0,0 +1,118 @@
+/* global Vue */
+//= require ./help_state
+//= require ./collapsed_state
+//= require ./spent_only_pane
+//= require ./no_tracking_pane
+//= require ./estimate_only_pane
+//= require ./comparison_pane
+
+(() => {
+  Vue.component('issuable-time-tracker', {
+    name: 'issuable-time-tracker',
+    props: [
+      'time_estimate',
+      'time_spent',
+      'human_time_estimate',
+      'human_time_spent',
+      'stopwatchSvg',
+      'docsUrl',
+    ],
+    data() {
+      return {
+        showHelp: false,
+      };
+    },
+    computed: {
+      timeSpent() {
+        return this.time_spent;
+      },
+      timeEstimate() {
+        return this.time_estimate;
+      },
+      timeEstimateHumanReadable() {
+        return this.human_time_estimate;
+      },
+      timeSpentHumanReadable() {
+        return this.human_time_spent;
+      },
+      hasTimeSpent() {
+        return !!this.timeSpent;
+      },
+      hasTimeEstimate() {
+        return !!this.timeEstimate;
+      },
+      showComparisonState() {
+        return this.hasTimeEstimate && this.hasTimeSpent;
+      },
+      showEstimateOnlyState() {
+        return this.hasTimeEstimate && !this.hasTimeSpent;
+      },
+      showSpentOnlyState() {
+        return this.hasTimeSpent && !this.hasTimeEstimate;
+      },
+      showNoTimeTrackingState() {
+        return !this.hasTimeEstimate && !this.hasTimeSpent;
+      },
+      showHelpState() {
+        return !!this.showHelp;
+      },
+    },
+    methods: {
+      toggleHelpState(show) {
+        this.showHelp = show;
+      },
+    },
+    template: `
+      <div class='time_tracker time-tracking-component-wrap' v-cloak>
+        <time-tracking-collapsed-state
+          :show-comparison-state='showComparisonState'
+          :show-help-state='showHelpState'
+          :show-spent-only-state='showSpentOnlyState'
+          :show-estimate-only-state='showEstimateOnlyState'
+          :time-spent-human-readable='timeSpentHumanReadable'
+          :time-estimate-human-readable='timeEstimateHumanReadable'
+          :stopwatch-svg='stopwatchSvg'>
+        </time-tracking-collapsed-state>
+        <div class='title hide-collapsed'>
+          Time tracking
+          <div class='help-button pull-right'
+            v-if='!showHelpState'
+            @click='toggleHelpState(true)'>
+            <i class='fa fa-question-circle'></i>
+          </div>
+          <div class='close-help-button pull-right'
+            v-if='showHelpState'
+            @click='toggleHelpState(false)'>
+            <i class='fa fa-close'></i>
+          </div>
+        </div>
+        <div class='time-tracking-content hide-collapsed'>
+          <time-tracking-estimate-only-pane
+            v-if='showEstimateOnlyState'
+            :time-estimate-human-readable='timeEstimateHumanReadable'>
+          </time-tracking-estimate-only-pane>
+          <time-tracking-spent-only-pane
+            v-if='showSpentOnlyState'
+            :time-spent-human-readable='timeSpentHumanReadable'>
+          </time-tracking-spent-only-pane>
+          <time-tracking-no-tracking-pane
+            v-if='showNoTimeTrackingState'>
+          </time-tracking-no-tracking-pane>
+          <time-tracking-comparison-pane
+            v-if='showComparisonState'
+            :time-estimate='timeEstimate'
+            :time-spent='timeSpent'
+            :time-spent-human-readable='timeSpentHumanReadable'
+            :time-estimate-human-readable='timeEstimateHumanReadable'>
+          </time-tracking-comparison-pane>
+          <transition name='help-state-toggle'>
+            <time-tracking-help-state
+              v-if='showHelpState'
+              :docs-url='docsUrl'>
+            </time-tracking-help-state>
+          </transition>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6 b/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6
new file mode 100644
index 00000000000..0b8da2b1f4f
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6
@@ -0,0 +1,61 @@
+/* global Vue */
+//= require ./components/time_tracker
+//= require smart_interval
+//= require subbable_resource
+
+(() => {
+  /* This Vue instance represents what will become the parent instance for the
+    * sidebar. It will be responsible for managing `issuable` state and propagating
+    * changes to sidebar components. We will want to create a separate service to
+    * interface with the server at that point.
+   */
+
+  class IssuableTimeTracking {
+    constructor(issuableJSON) {
+      const parsedIssuable = JSON.parse(issuableJSON);
+      return this.initComponent(parsedIssuable);
+    }
+
+    initComponent(parsedIssuable) {
+      this.parentInstance = new Vue({
+        el: '#issuable-time-tracker',
+        data: {
+          issuable: parsedIssuable,
+        },
+        methods: {
+          fetchIssuable() {
+            return gl.IssuableResource.get.call(gl.IssuableResource, {
+              type: 'GET',
+              url: gl.IssuableResource.endpoint,
+            });
+          },
+          updateState(data) {
+            this.issuable = data;
+          },
+          subscribeToUpdates() {
+            gl.IssuableResource.subscribe(data => this.updateState(data));
+          },
+          listenForSlashCommands() {
+            $(document).on('ajax:success', '.gfm-form', (e, data) => {
+              const subscribedCommands = ['spend_time', 'time_estimate'];
+              const changedCommands = data.commands_changes;
+
+              if (changedCommands && _.intersection(subscribedCommands, changedCommands).length) {
+                this.fetchIssuable();
+              }
+            });
+          },
+        },
+        created() {
+          this.fetchIssuable();
+        },
+        mounted() {
+          this.subscribeToUpdates();
+          this.listenForSlashCommands();
+        },
+      });
+    }
+  }
+
+  gl.IssuableTimeTracking = IssuableTimeTracking;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index 317818951fd..4aaad111082 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, no-undef, comma-dangle, quotes, prefer-arrow-callback, consistent-return, one-var, no-var, one-var-declaration-per-line, no-underscore-dangle, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, comma-dangle, quotes, prefer-arrow-callback, consistent-return, one-var, no-var, one-var-declaration-per-line, no-underscore-dangle, padded-blocks, max-len */
+/* global UsersSelect */
+
 (function() {
   this.IssuableContext = (function() {
     function IssuableContext(currentUser) {
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index 50fdbc89c7c..1c4086517fe 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -1,4 +1,9 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-undef, no-new, quotes, object-shorthand, no-unused-vars, comma-dangle, radix, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, quotes, object-shorthand, no-unused-vars, comma-dangle, radix, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, padded-blocks, max-len */
+/* global GitLab */
+/* global UsersSelect */
+/* global ZenMode */
+/* global Autosave */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
@@ -14,7 +19,7 @@
       this.renderWipExplanation = bind(this.renderWipExplanation, this);
       this.resetAutosave = bind(this.resetAutosave, this);
       this.handleSubmit = bind(this.handleSubmit, this);
-      GitLab.GfmAutoComplete.setup();
+      gl.GfmAutoComplete.setup();
       new UsersSelect();
       new ZenMode();
       this.titleField = this.form.find("input[name*='[title]']");
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 8540b199aba..61e8531153b 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-undef, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, 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, padded-blocks, max-len */
+/* global Flash */
 
 /*= require flash */
 /*= require jquery.waitforimages */
@@ -138,15 +139,12 @@
         return;
       }
       return $.getJSON($container.data('path')).error(function() {
-        $container.find('.checking').hide();
         $container.find('.unavailable').show();
         return new Flash('Failed to check if a new branch can be created.', 'alert');
       }).success(function(data) {
         if (data.can_create_branch) {
-          $container.find('.checking').hide();
           $container.find('.available').show();
         } else {
-          $container.find('.checking').hide();
           return $container.find('.unavailable').show();
         }
       });
diff --git a/app/assets/javascripts/issues_bulk_assignment.js.es6 b/app/assets/javascripts/issues_bulk_assignment.js.es6
index 9697fb33566..52fd5d71b18 100644
--- a/app/assets/javascripts/issues_bulk_assignment.js.es6
+++ b/app/assets/javascripts/issues_bulk_assignment.js.es6
@@ -1,10 +1,14 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, quotes, consistent-return, func-names, array-callback-return, space-before-function-paren, prefer-arrow-callback, radix, max-len, padded-blocks, no-unused-expressions, no-sequences, no-underscore-dangle, no-unused-vars, no-param-reassign */
+/* global Issuable */
+/* global Flash */
+
 ((global) => {
 
   class IssuableBulkActions {
-    constructor({ container, form, issues } = {}) {
-      this.container = container || $('.content'),
+    constructor({ container, form, issues, prefixId } = {}) {
+      this.prefixId = prefixId || 'issue_';
       this.form = form || this.getElement('.bulk-update');
+      this.$labelDropdown = this.form.find('.js-label-select');
       this.issues = issues || this.getElement('.issues-list .issue');
       this.form.data('bulkActions', this);
       this.willUpdateLabels = false;
@@ -13,10 +17,6 @@
       Issuable.initChecks();
     }
 
-    getElement(selector) {
-      return this.container.find(selector);
-    }
-
     bindEvents() {
       return this.form.off('submit').on('submit', this.onFormSubmit.bind(this));
     }
@@ -70,10 +70,7 @@
 
     getUnmarkedIndeterminedLabels() {
       const result = [];
-      const labelsToKeep = [];
-
-      this.getElement('.labels-filter .is-indeterminate')
-        .each((i, el) => labelsToKeep.push($(el).data('labelId')));
+      const labelsToKeep = this.$labelDropdown.data('indeterminate');
 
       this.getLabelsFromSelection().forEach((id) => {
         if (labelsToKeep.indexOf(id) === -1) {
@@ -103,45 +100,65 @@
         }
       };
       if (this.willUpdateLabels) {
-        this.getLabelsToApply().map(function(id) {
-          return formData.update.add_label_ids.push(id);
-        });
-        this.getLabelsToRemove().map(function(id) {
-          return formData.update.remove_label_ids.push(id);
-        });
+        formData.update.add_label_ids = this.$labelDropdown.data('marked');
+        formData.update.remove_label_ids = this.$labelDropdown.data('unmarked');
       }
       return formData;
     }
 
-    getLabelsToApply() {
+    setOriginalDropdownData() {
+      const $labelSelect = $('.bulk-update .js-label-select');
+      $labelSelect.data('common', this.getOriginalCommonIds());
+      $labelSelect.data('marked', this.getOriginalMarkedIds());
+      $labelSelect.data('indeterminate', this.getOriginalIndeterminateIds());
+    }
+
+    // From issuable's initial bulk selection
+    getOriginalCommonIds() {
       const labelIds = [];
-      const $labels = this.form.find('.labels-filter input[name="update[label_ids][]"]');
-      $labels.each(function(k, label) {
-        if (label) {
-          return labelIds.push(parseInt($(label).val()));
-        }
+
+      this.getElement('.selected_issue:checked').each((i, el) => {
+        labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
       });
-      return labelIds;
+      return _.intersection.apply(this, labelIds);
     }
 
+    // From issuable's initial bulk selection
+    getOriginalMarkedIds() {
+      const labelIds = [];
+      this.getElement('.selected_issue:checked').each((i, el) => {
+        labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
+      });
+      return _.intersection.apply(this, labelIds);
+    }
 
-    /**
-     * Returns Label IDs that will be removed from issue selection
-     * @return {Array} Array of labels IDs
-     */
-
-    getLabelsToRemove() {
-      const result = [];
-      const indeterminatedLabels = this.getUnmarkedIndeterminedLabels();
-      const labelsToApply = this.getLabelsToApply();
-      indeterminatedLabels.map(function(id) {
-        // We need to exclude label IDs that will be applied
-        // By not doing this will cause issues from selection to not add labels at all
-        if (labelsToApply.indexOf(id) === -1) {
-          return result.push(id);
-        }
+    // From issuable's initial bulk selection
+    getOriginalIndeterminateIds() {
+      const uniqueIds = [];
+      const labelIds = [];
+      let issuableLabels = [];
+
+      // Collect unique label IDs for all checked issues
+      this.getElement('.selected_issue:checked').each((i, el) => {
+        issuableLabels = this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels');
+        issuableLabels.forEach((labelId) => {
+          // Store unique IDs
+          if (uniqueIds.indexOf(labelId) === -1) {
+            uniqueIds.push(labelId);
+          }
+        });
+        // Store array of IDs per issuable
+        labelIds.push(issuableLabels);
       });
-      return result;
+      // Add uniqueIds to add it as argument for _.intersection
+      labelIds.unshift(uniqueIds);
+      // Return IDs that are present but not in all selected issueables
+      return _.difference(uniqueIds, _.intersection.apply(this, labelIds));
+    }
+
+    getElement(selector) {
+      this.scopeEl = this.scopeEl || $('.content');
+      return this.scopeEl.find(selector);
     }
   }
 
diff --git a/app/assets/javascripts/label_manager.js.es6 b/app/assets/javascripts/label_manager.js.es6
index 175623e7448..33c5e35324d 100644
--- a/app/assets/javascripts/label_manager.js.es6
+++ b/app/assets/javascripts/label_manager.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* 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, padded-blocks, max-len */
+/* global Flash */
+
 ((global) => {
 
   class LabelManager {
@@ -104,4 +106,3 @@
   gl.LabelManager = LabelManager;
 
 })(window.gl || (window.gl = {}));
-
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index f334f35594d..ec2fc87bece 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -1,12 +1,16 @@
-/* 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, no-undef, semi, dot-notation, no-empty, no-return-assign, camelcase, prefer-spread, padded-blocks, max-len */
+/* 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, semi, dot-notation, no-empty, no-return-assign, camelcase, prefer-spread, padded-blocks */
+/* global Issuable */
+/* global ListLabel */
+
 (function() {
   this.LabelsSelect = (function() {
     function LabelsSelect() {
       var _this;
       _this = this;
       $('.js-label-select').each(function(i, dropdown) {
-        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, namespacePath, projectPath, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove;
+        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, namespacePath, projectPath, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove, $container, $dropdownContainer;
         $dropdown = $(dropdown);
+        $dropdownContainer = $dropdown.closest('.labels-filter');
         $toggleText = $dropdown.find('.dropdown-toggle-text');
         namespacePath = $dropdown.data('namespace-path');
         projectPath = $dropdown.data('project-path');
@@ -122,7 +126,7 @@
             });
           });
         };
-        return $dropdown.glDropdown({
+        $dropdown.glDropdown({
           showMenuAbove: showMenuAbove,
           data: function(term, callback) {
             return $.ajax({
@@ -169,33 +173,40 @@
             });
           },
           renderRow: function(label, instance) {
-            var $a, $li, active, color, colorEl, indeterminate, removesAll, selectedClass, spacing;
+            var $a, $li, color, colorEl, indeterminate, removesAll, selectedClass, spacing, i, marked, dropdownName, dropdownValue;
             $li = $('<li>');
             $a = $('<a href="#">');
             selectedClass = [];
             removesAll = label.id <= 0 || (label.id == null);
             if ($dropdown.hasClass('js-filter-bulk-update')) {
-              indeterminate = instance.indeterminateIds;
-              active = instance.activeIds;
+              indeterminate = $dropdown.data('indeterminate') || [];
+              marked = $dropdown.data('marked') || [];
+
               if (indeterminate.indexOf(label.id) !== -1) {
                 selectedClass.push('is-indeterminate');
               }
-              if (active.indexOf(label.id) !== -1) {
+
+              if (marked.indexOf(label.id) !== -1) {
                 // Remove is-indeterminate class if the item will be marked as active
                 i = selectedClass.indexOf('is-indeterminate');
                 if (i !== -1) {
                   selectedClass.splice(i, 1);
                 }
                 selectedClass.push('is-active');
-                // Add input manually
-                instance.addInput(this.fieldName, label.id);
               }
-            }
-            if (this.id(label) && $form.find("input[type='hidden'][name='" + ($dropdown.data('fieldName')) + "'][value='" + this.id(label).toString().replace(/'/g, '\\\'') + "']").length) {
-              selectedClass.push('is-active');
-            }
-            if ($dropdown.hasClass('js-multiselect') && removesAll) {
-              selectedClass.push('dropdown-clear-active');
+            } else {
+              if (this.id(label)) {
+                dropdownName = $dropdown.data('fieldName');
+                dropdownValue = this.id(label).toString().replace(/'/g, '\\\'');
+
+                if ($form.find("input[type='hidden'][name='" + dropdownName + "'][value='" + dropdownValue + "']").length) {
+                  selectedClass.push('is-active');
+                }
+              }
+
+              if ($dropdown.hasClass('js-multiselect') && removesAll) {
+                selectedClass.push('dropdown-clear-active');
+              }
             }
             if (label.duplicate) {
               spacing = 100 / label.color.length;
@@ -231,7 +242,6 @@
             // Return generated html
             return $li.html($a).prop('outerHTML');
           },
-          persistWhenHide: $dropdown.data('persistWhenHide'),
           search: {
             fields: ['title']
           },
@@ -310,18 +320,15 @@
                 }
               }
             }
-            if ($dropdown.hasClass('js-filter-bulk-update')) {
-              // If we are persisting state we need the classes
-              if (!this.options.persistWhenHide) {
-                return $dropdown.parent().find('.is-active, .is-indeterminate').removeClass();
-              }
-            }
           },
           multiSelect: $dropdown.hasClass('js-multiselect'),
           vue: $dropdown.hasClass('js-issue-board-sidebar'),
-          clicked: function(label, $el, e) {
+          clicked: function(label, $el, e, isMarking) {
             var isIssueIndex, isMRIndex, page;
-            _this.enableBulkLabelDropdown();
+
+            page = $('body').data('page');
+            isIssueIndex = page === 'projects:issues:index';
+            isMRIndex = page === 'projects:merge_requests:index';
 
             if ($dropdown.parent().find('.is-active:not(.dropdown-clear-active)').length) {
               $dropdown.parent()
@@ -330,12 +337,11 @@
             }
 
             if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
+              _this.enableBulkLabelDropdown();
+              _this.setDropdownData($dropdown, isMarking, this.id(label));
               return;
             }
 
-            page = $('body').data('page');
-            isIssueIndex = page === 'projects:issues:index';
-            isMRIndex = page === 'projects:merge_requests:index';
             if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) {
               if (label.isAny) {
                 gl.issueBoards.BoardsStore.state.filters['label_name'] = [];
@@ -397,17 +403,10 @@
               }
             }
           },
-          setIndeterminateIds: function() {
-            if (this.dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')) {
-              return this.indeterminateIds = _this.getIndeterminateIds();
-            }
-          },
-          setActiveIds: function() {
-            if (this.dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')) {
-              return this.activeIds = _this.getActiveIds();
-            }
-          }
         });
+
+        // Set dropdown data
+        _this.setOriginalDropdownData($dropdownContainer, $dropdown);
       });
       this.bindEvents();
     }
@@ -420,34 +419,9 @@
       if ($('.selected_issue:checked').length) {
         return;
       }
-      // Remove inputs
-      $('.issues_bulk_update .labels-filter input[type="hidden"]').remove();
-      // Also restore button text
       return $('.issues_bulk_update .labels-filter .dropdown-toggle-text').text('Label');
     };
 
-    LabelsSelect.prototype.getIndeterminateIds = function() {
-      var label_ids;
-      label_ids = [];
-      $('.selected_issue:checked').each(function(i, el) {
-        var issue_id;
-        issue_id = $(el).data('id');
-        return label_ids.push($("#issue_" + issue_id).data('labels'));
-      });
-      return _.flatten(label_ids);
-    };
-
-    LabelsSelect.prototype.getActiveIds = function() {
-      var label_ids;
-      label_ids = [];
-      $('.selected_issue:checked').each(function(i, el) {
-        var issue_id;
-        issue_id = $(el).data('id');
-        return label_ids.push($("#issue_" + issue_id).data('labels'));
-      });
-      return _.intersection.apply(_, label_ids);
-    };
-
     LabelsSelect.prototype.enableBulkLabelDropdown = function() {
       var issuableBulkActions;
       if ($('.selected_issue:checked').length) {
@@ -456,8 +430,59 @@
       }
     };
 
-    return LabelsSelect;
+    LabelsSelect.prototype.setDropdownData = function($dropdown, isMarking, value) {
+      var i, markedIds, unmarkedIds, indeterminateIds;
+      var issuableBulkActions = $('.bulk-update').data('bulkActions');
 
+      markedIds = $dropdown.data('marked') || [];
+      unmarkedIds = $dropdown.data('unmarked') || [];
+      indeterminateIds = $dropdown.data('indeterminate') || [];
+
+      if (isMarking) {
+        markedIds.push(value);
+
+        i = indeterminateIds.indexOf(value);
+        if (i > -1) {
+          indeterminateIds.splice(i, 1);
+        }
+
+        i = unmarkedIds.indexOf(value);
+        if (i > -1) {
+          unmarkedIds.splice(i, 1);
+        }
+      } else {
+        // If marked item (not common) is unmarked
+        i = markedIds.indexOf(value);
+        if (i > -1) {
+          markedIds.splice(i, 1);
+        }
+
+        // If an indeterminate item is being unmarked
+        if (issuableBulkActions.getOriginalIndeterminateIds().indexOf(value) > -1) {
+          unmarkedIds.push(value);
+        }
+
+        // If a marked item is being unmarked
+        // (a marked item could also be a label that is present in all selection)
+        if (issuableBulkActions.getOriginalCommonIds().indexOf(value) > -1) {
+          unmarkedIds.push(value);
+        }
+      }
+
+      $dropdown.data('marked', markedIds);
+      $dropdown.data('unmarked', unmarkedIds);
+      $dropdown.data('indeterminate', indeterminateIds);
+    };
+
+    LabelsSelect.prototype.setOriginalDropdownData = function($container, $dropdown) {
+      var labels = [];
+      $container.find('[name="label_name[]"]').map(function() {
+        return labels.push(this.value);
+      });
+      $dropdown.data('marked', labels);
+    };
+
+    return LabelsSelect;
   })();
 
 }).call(this);
diff --git a/app/assets/javascripts/lib/ace.js b/app/assets/javascripts/lib/ace.js
index b1718e89d3d..4cdf99cae72 100644
--- a/app/assets/javascripts/lib/ace.js
+++ b/app/assets/javascripts/lib/ace.js
@@ -1,3 +1,2 @@
-/* eslint-disable */
 /*= require ace-rails-ap */
 /*= require ace/ext-searchbox */
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js.es6
index 8fa80502d92..0c6a3cc3170 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js.es6
@@ -93,8 +93,22 @@
       }
     };
 
-    gl.utils.getPagePath = function() {
-      return $('body').data('page').split(':')[0];
+    // Check if element scrolled into viewport from above or below
+    // Courtesy http://stackoverflow.com/a/7557433/414749
+    w.gl.utils.isInViewport = function(el) {
+      var rect = el.getBoundingClientRect();
+
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth
+      );
+    };
+
+    gl.utils.getPagePath = function(index) {
+      index = index || 0;
+      return $('body').data('page').split(':')[index];
     };
 
     gl.utils.parseUrl = function (url) {
@@ -110,10 +124,42 @@
       return parsedUrl.pathname.charAt(0) === '/' ? parsedUrl.pathname : '/' + parsedUrl.pathname;
     };
 
+    gl.utils.getUrlParamsArray = function () {
+      // We can trust that each param has one & since values containing & will be encoded
+      // Remove the first character of search as it is always ?
+      return window.location.search.slice(1).split('&');
+    };
+
     gl.utils.isMetaKey = function(e) {
       return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
     };
 
+    gl.utils.scrollToElement = function($el) {
+      var top = $el.offset().top;
+      gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height();
+      gl.navLinksHeight = gl.navLinksHeight || $('.nav-links').height();
+      gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height();
+
+      return $('body, html').animate({
+        scrollTop: top - (gl.navBarHeight + gl.navLinksHeight + gl.mrTabsHeight)
+      }, 200);
+    };
+
+    /**
+      this will take in the `name` of the param you want to parse in the url
+      if the name does not exist this function will return `null`
+      otherwise it will return the value of the param key provided
+    */
+    w.gl.utils.getParameterByName = (name) => {
+      const url = window.location.href;
+      name = name.replace(/[[\]]/g, '\\$&');
+      const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
+      const results = regex.exec(url);
+      if (!results) return null;
+      if (!results[2]) return '';
+      return decodeURIComponent(results[2].replace(/\+/g, ' '));
+    };
+
   })(window);
 
 }).call(this);
diff --git a/app/assets/javascripts/lib/utils/custom_event_polyfill.js.es6 b/app/assets/javascripts/lib/utils/custom_event_polyfill.js.es6
deleted file mode 100644
index 5ae978010c9..00000000000
--- a/app/assets/javascripts/lib/utils/custom_event_polyfill.js.es6
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * CustomEvent support for IE
- */
-if (typeof window.CustomEvent !== 'function') {
-  window.CustomEvent = function CustomEvent(e, params) {
-    const options = params || { bubbles: false, cancelable: false, detail: undefined };
-    const evt = document.createEvent('CustomEvent');
-    evt.initCustomEvent(e, options.bubbles, options.cancelable, options.detail);
-    return evt;
-  };
-  window.CustomEvent.prototype = window.Event.prototype;
-}
diff --git a/app/assets/javascripts/lib/utils/notify.js b/app/assets/javascripts/lib/utils/notify.js
index d0fe69260a5..3c9ad0e67c8 100644
--- a/app/assets/javascripts/lib/utils/notify.js
+++ b/app/assets/javascripts/lib/utils/notify.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, consistent-return, no-undef, prefer-arrow-callback, no-return-assign, object-shorthand, comma-dangle, no-param-reassign, padded-blocks, max-len */
+/* 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, padded-blocks, max-len */
+
 (function() {
   (function(w) {
     var notificationGranted, notifyMe, notifyPermissions;
diff --git a/app/assets/javascripts/lib/utils/pretty_time.js.es6 b/app/assets/javascripts/lib/utils/pretty_time.js.es6
index ccaf447eb0b..ae397212e55 100644
--- a/app/assets/javascripts/lib/utils/pretty_time.js.es6
+++ b/app/assets/javascripts/lib/utils/pretty_time.js.es6
@@ -4,13 +4,13 @@
    * stringifyTime condensed or non-condensed, abbreviateTimelengths)
    * */
 
-  class PrettyTime {
-
+  const utils = window.gl.utils = gl.utils || {};
+  const prettyTime = utils.prettyTime = {
     /*
      * Accepts seconds and returns a timeObject { weeks: #, days: #, hours: #, minutes: # }
      * Seconds can be negative or positive, zero or non-zero.
     */
-    static parseSeconds(seconds) {
+    parseSeconds(seconds) {
       const DAYS_PER_WEEK = 5;
       const HOURS_PER_DAY = 8;
       const MINUTES_PER_HOUR = 60;
@@ -24,7 +24,7 @@
         minutes: 1,
       };
 
-      let unorderedMinutes = PrettyTime.secondsToMinutes(seconds);
+      let unorderedMinutes = prettyTime.secondsToMinutes(seconds);
 
       return _.mapObject(timePeriodConstraints, (minutesPerPeriod) => {
         const periodCount = Math.floor(unorderedMinutes / minutesPerPeriod);
@@ -33,35 +33,33 @@
 
         return periodCount;
       });
-    }
+    },
 
     /*
     * Accepts a timeObject and returns a condensed string representation of it
     * (e.g. '1w 2d 3h 1m' or '1h 30m'). Zero value units are not included.
     */
 
-    static stringifyTime(timeObject) {
+    stringifyTime(timeObject) {
       const reducedTime = _.reduce(timeObject, (memo, unitValue, unitName) => {
         const isNonZero = !!unitValue;
         return isNonZero ? `${memo} ${unitValue}${unitName.charAt(0)}` : memo;
       }, '').trim();
       return reducedTime.length ? reducedTime : '0m';
-    }
+    },
 
     /*
     * Accepts a time string of any size (e.g. '1w 2d 3h 5m' or '1w 2d') and returns
     *  the first non-zero unit/value pair.
     */
 
-    static abbreviateTime(timeStr) {
+    abbreviateTime(timeStr) {
       return timeStr.split(' ')
         .filter(unitStr => unitStr.charAt(0) !== '0')[0];
-    }
+    },
 
-    static secondsToMinutes(seconds) {
+    secondsToMinutes(seconds) {
       return Math.abs(seconds / 60);
-    }
-  }
-
-  gl.PrettyTime = PrettyTime;
+    },
+  };
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index ac44b81ee22..c856a26ae40 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -17,6 +17,21 @@
     gl.text.replaceRange = function(s, start, end, substitute) {
       return s.substring(0, start) + substitute + s.substring(end);
     };
+    gl.text.getTextWidth = function(text, font) {
+      /**
+      * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+      *
+      * @param {String} text The text to be rendered.
+      * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+      *
+      * @see http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+      */
+      // re-use canvas object for better performance
+      var canvas = gl.text.getTextWidth.canvas || (gl.text.getTextWidth.canvas = document.createElement('canvas'));
+      var context = canvas.getContext('2d');
+      context.font = font;
+      return context.measureText(text).width;
+    };
     gl.text.selectedText = function(text, textarea) {
       return text.substring(textarea.selectionStart, textarea.selectionEnd);
     };
@@ -44,9 +59,25 @@
       }
     };
     gl.text.insertText = function(textArea, text, tag, blockTag, selected, wrap) {
-      var insertText, inserted, selectedSplit, startChar;
+      var insertText, inserted, selectedSplit, startChar, removedLastNewLine, removedFirstNewLine;
+      removedLastNewLine = false;
+      removedFirstNewLine = false;
+
+      // Remove the first newline
+      if (selected.indexOf('\n') === 0) {
+        removedFirstNewLine = true;
+        selected = selected.replace(/\n+/, '');
+      }
+
+      // Remove the last newline
+      if (textArea.selectionEnd - textArea.selectionStart > selected.replace(/\n$/, '').length) {
+        removedLastNewLine = true;
+        selected = selected.replace(/\n$/, '');
+      }
+
       selectedSplit = selected.split('\n');
       startChar = !wrap && textArea.selectionStart > 0 ? '\n' : '';
+
       if (selectedSplit.length > 1 && (!wrap || (blockTag != null))) {
         if (blockTag != null) {
           insertText = this.blockTagText(text, textArea, blockTag, selected);
@@ -62,6 +93,15 @@
       } else {
         insertText = "" + startChar + tag + selected + (wrap ? tag : ' ');
       }
+
+      if (removedFirstNewLine) {
+        insertText = '\n' + insertText;
+      }
+
+      if (removedLastNewLine) {
+        insertText += '\n';
+      }
+
       if (document.queryCommandSupported('insertText')) {
         inserted = document.execCommand('insertText', false, insertText);
       }
@@ -74,9 +114,9 @@
           document.execCommand("ms-endUndoUnit");
         } catch (error) {}
       }
-      return this.moveCursor(textArea, tag, wrap);
+      return this.moveCursor(textArea, tag, wrap, removedLastNewLine);
     };
-    gl.text.moveCursor = function(textArea, tag, wrapped) {
+    gl.text.moveCursor = function(textArea, tag, wrapped, removedLastNewLine) {
       var pos;
       if (!textArea.setSelectionRange) {
         return;
@@ -87,6 +127,11 @@
         } else {
           pos = textArea.selectionStart;
         }
+
+        if (removedLastNewLine) {
+          pos -= 1;
+        }
+
         return textArea.setSelectionRange(pos, pos);
       }
     };
diff --git a/app/assets/javascripts/lib/vue_resource.js.es6 b/app/assets/javascripts/lib/vue_resource.js.es6
new file mode 100644
index 00000000000..eff1dcabfa2
--- /dev/null
+++ b/app/assets/javascripts/lib/vue_resource.js.es6
@@ -0,0 +1,2 @@
+//= require vue
+//= require vue-resource
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index b0f834705c3..9af89b79f84 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-use-before-define, no-underscore-dangle, no-param-reassign, no-undef, prefer-template, quotes, comma-dangle, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, spaced-comment, radix, no-else-return, max-len, no-plusplus, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, 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, spaced-comment, radix, no-else-return, max-len, no-plusplus, padded-blocks */
+
 // LineHighlighter
 //
 // Handles single- and multi-line selection and highlight for blob views.
diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js.es6
index 7741cd29793..bf6c0ec2798 100644
--- a/app/assets/javascripts/member_expiration_date.js
+++ b/app/assets/javascripts/member_expiration_date.js.es6
@@ -1,30 +1,29 @@
-/* eslint-disable func-names, space-before-function-paren, vars-on-top, no-var, object-shorthand, comma-dangle, max-len */
-(function() {
+(() => {
   // Add datepickers to all `js-access-expiration-date` elements. If those elements are
   // children of an element with the `clearable-input` class, and have a sibling
   // `js-clear-input` element, then show that element when there is a value in the
   // datepicker, and make clicking on that element clear the field.
   //
-  gl.MemberExpirationDate = function() {
+  window.gl = window.gl || {};
+  gl.MemberExpirationDate = (selector = '.js-access-expiration-date') => {
     function toggleClearInput() {
       $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
     }
-
-    var inputs = $('.js-access-expiration-date');
+    const inputs = $(selector);
 
     inputs.datepicker({
       dateFormat: 'yy-mm-dd',
       minDate: 1,
-      onSelect: function () {
+      onSelect: function onSelect() {
         $(this).trigger('change');
         toggleClearInput.call(this);
-      }
+      },
     });
 
-    inputs.next('.js-clear-input').on('click', function(event) {
+    inputs.next('.js-clear-input').on('click', function clicked(event) {
       event.preventDefault();
 
-      var input = $(this).closest('.clearable-input').find('.js-access-expiration-date');
+      const input = $(this).closest('.clearable-input').find(selector);
       input.datepicker('setDate', null)
         .trigger('change');
       toggleClearInput.call(input);
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6 b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
index 9e4ffd07dbd..f95b079c972 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
@@ -1,4 +1,8 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, quote-props, no-useless-computed-key, object-shorthand, prefer-const, no-new, padded-blocks, no-param-reassign, semi, max-len */
+/* global Vue */
+/* global ace */
+/* global Flash */
+
 ((global) => {
 
   global.mergeConflicts = global.mergeConflicts || {};
diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js.es6 b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js.es6
index 23c4618af70..74544b7d0c7 100644
--- a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js.es6
+++ b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable padded-blocks, no-param-reassign, comma-dangle */
+/* global Vue */
+
 ((global) => {
 
   global.mergeConflicts = global.mergeConflicts || {};
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6 b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
index 4ccbdcd6daa..78c00c31c16 100644
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
+++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable padded-blocks, no-param-reassign, comma-dangle */
+/* global Vue */
+
 ((global) => {
 
   global.mergeConflicts = global.mergeConflicts || {};
@@ -19,7 +21,7 @@
             </td>
             <td class="diff-line-num old_line" :class="lineCssClass(line)" v-if="!line.isHeader">{{line.lineNumber}}</td>
             <td class="line_content parallel" :class="lineCssClass(line)" v-if="!line.isHeader" v-html="line.richText"></td>
-          </template> 
+          </template>
         </tr>
       </table>
     `,
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_service.js.es6 b/app/assets/javascripts/merge_conflicts/merge_conflict_service.js.es6
index 8a7519b0786..8df3170edac 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_service.js.es6
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_service.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable no-param-reassign, comma-dangle, no-extra-semi, padded-blocks */
+
 ((global) => {
   global.mergeConflicts = global.mergeConflicts || {};
 
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js.es6 b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js.es6
index f94e51e783c..53b44007510 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js.es6
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, object-shorthand, no-dupe-keys, no-param-reassign, no-plusplus, camelcase, prefer-const, no-nested-ternary, no-continue, semi, func-call-spacing, no-spaced-func, padded-blocks, max-len */
+/* global Cookies */
+/* global Vue */
+
 ((global) => {
   global.mergeConflicts = global.mergeConflicts || {};
 
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6 b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6
index 815443fb54e..83520702f9b 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6
+++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable new-cap, comma-dangle, no-new, semi */
+/* global Vue */
+/* global Flash */
+
 //= require vue
 //= require ./merge_conflict_store
 //= require ./merge_conflict_service
diff --git a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js.es6 b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js.es6
index c8de586aa21..e89b35d5407 100644
--- a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js.es6
+++ b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable no-param-reassign, comma-dangle, padded-blocks */
+
 ((global) => {
   global.mergeConflicts = global.mergeConflicts || {};
 
diff --git a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js.es6 b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js.es6
index 88c3a20ce13..a4aca85d460 100644
--- a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js.es6
+++ b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable no-param-reassign, quote-props, comma-dangle, padded-blocks */
+
 ((global) => {
   global.mergeConflicts = global.mergeConflicts || {};
 
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index 88c3636be6c..244c2f6746c 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, quotes, no-undef, no-underscore-dangle, one-var, one-var-declaration-per-line, consistent-return, dot-notation, quote-props, comma-dangle, object-shorthand, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, 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, padded-blocks, max-len, prefer-arrow-callback */
+/* global MergeRequestTabs */
 
 /*= require jquery.waitforimages */
 /*= require task_list */
@@ -26,6 +27,7 @@
       // Prevent duplicate event bindings
       this.disableTaskList();
       this.initMRBtnListeners();
+      this.initCommitMessageListeners();
       if ($("a.btn-close").length) {
         this.initTaskList();
       }
@@ -107,6 +109,26 @@
     // note so that we can re-use its form here
     };
 
+    MergeRequest.prototype.initCommitMessageListeners = function() {
+      var textarea = $('textarea.js-commit-message');
+
+      $('a.js-with-description-link').on('click', function(e) {
+        e.preventDefault();
+
+        textarea.val(textarea.data('messageWithDescription'));
+        $('p.js-with-description-hint').hide();
+        $('p.js-without-description-hint').show();
+      });
+
+      $('a.js-without-description-link').on('click', function(e) {
+        e.preventDefault();
+
+        textarea.val(textarea.data('messageWithoutDescription'));
+        $('p.js-with-description-hint').show();
+        $('p.js-without-description-hint').hide();
+      });
+    };
+
     return MergeRequest;
 
   })();
diff --git a/app/assets/javascripts/merge_request_tabs.js.es6 b/app/assets/javascripts/merge_request_tabs.js.es6
index 3ec0f1fd613..4c8c28af755 100644
--- a/app/assets/javascripts/merge_request_tabs.js.es6
+++ b/app/assets/javascripts/merge_request_tabs.js.es6
@@ -59,16 +59,13 @@
 
   class MergeRequestTabs {
 
-    constructor({ action, setUrl, buildsLoaded, stubLocation } = {}) {
+    constructor({ action, setUrl, stubLocation } = {}) {
       this.diffsLoaded = false;
-      this.buildsLoaded = false;
       this.pipelinesLoaded = false;
       this.commitsLoaded = false;
       this.fixedLayoutPref = null;
 
       this.setUrl = setUrl !== undefined ? setUrl : true;
-      this.buildsLoaded = buildsLoaded || false;
-
       this.setCurrentAction = this.setCurrentAction.bind(this);
       this.tabShown = this.tabShown.bind(this);
       this.showTab = this.showTab.bind(this);
@@ -119,10 +116,6 @@
         $.scrollTo('.merge-request-details .merge-request-tabs', {
           offset: -navBarHeight,
         });
-      } else if (action === 'builds') {
-        this.loadBuilds($target.attr('href'));
-        this.expandView();
-        this.resetViewContainer();
       } else if (action === 'pipelines') {
         this.loadPipelines($target.attr('href'));
         this.expandView();
@@ -180,8 +173,8 @@
     setCurrentAction(action) {
       this.currentAction = action === 'show' ? 'notes' : action;
 
-      // Remove a trailing '/commits' '/diffs' '/builds' '/pipelines' '/new' '/new/diffs'
-      let newState = location.pathname.replace(/\/(commits|diffs|builds|pipelines|new|new\/diffs)(\.html)?\/?$/, '');
+      // Remove a trailing '/commits' '/diffs' '/pipelines' '/new' '/new/diffs'
+      let newState = location.pathname.replace(/\/(commits|diffs|pipelines|new|new\/diffs)(\.html)?\/?$/, '');
 
       // Append the new action if we're on a tab other than 'notes'
       if (this.currentAction !== 'notes') {
@@ -244,29 +237,8 @@
           }
           this.diffsLoaded = true;
 
-          const diffPage = new gl.Diff();
-
-          const locationHash = gl.utils.getLocationHash();
-          const anchoredDiff = locationHash && locationHash.split('_')[0];
-          if (anchoredDiff) {
-            diffPage.openAnchoredDiff(anchoredDiff, () => this.scrollToElement('#diffs'));
-          }
-        },
-      });
-    }
-
-    loadBuilds(source) {
-      if (this.buildsLoaded) {
-        return;
-      }
-      this.ajaxGet({
-        url: `${source}.json`,
-        success: (data) => {
-          document.querySelector('div#builds').innerHTML = data.html;
-          gl.utils.localTimeAgo($('.js-timeago', 'div#builds'));
-          this.buildsLoaded = true;
-          new gl.Pipelines();
-          this.scrollToElement('#builds');
+          new gl.Diff();
+          this.scrollToElement('#diffs');
         },
       });
     }
@@ -282,6 +254,10 @@
           gl.utils.localTimeAgo($('.js-timeago', '#pipelines'));
           this.pipelinesLoaded = true;
           this.scrollToElement('#pipelines');
+
+          new gl.MiniPipelineGraph({
+            container: '.js-pipeline-table',
+          });
         },
       });
     }
diff --git a/app/assets/javascripts/merge_request_widget.js.es6 b/app/assets/javascripts/merge_request_widget.js.es6
index 7022aa1263b..0305aeb07d9 100644
--- a/app/assets/javascripts/merge_request_widget.js.es6
+++ b/app/assets/javascripts/merge_request_widget.js.es6
@@ -1,5 +1,10 @@
-/* eslint-disable */
- ((global) => {
+/* eslint-disable max-len, no-var, func-names, space-before-function-paren, vars-on-top, no-plusplus, comma-dangle, no-return-assign, consistent-return, no-param-reassign, one-var, one-var-declaration-per-line, quotes, prefer-template, no-else-return, prefer-arrow-callback, no-unused-vars, no-underscore-dangle, no-shadow, no-mixed-operators, template-curly-spacing, camelcase, default-case, wrap-iife, semi, padded-blocks */
+/* global notify */
+/* global notifyPermissions */
+/* global merge_request_widget */
+/* global Turbolinks */
+
+((global) => {
   var indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
   const DEPLOYMENT_TEMPLATE = `<div class="mr-widget-heading" id="<%- id %>">
@@ -27,7 +32,7 @@
        </div>
      </div>`;
 
-   global.MergeRequestWidget = (function() {
+  global.MergeRequestWidget = (function() {
     function MergeRequestWidget(opts) {
       // Initialize MergeRequestWidget behavior
       //
@@ -69,7 +74,7 @@
 
     MergeRequestWidget.prototype.addEventListeners = function() {
       var allowedPages;
-      allowedPages = ['show', 'commits', 'builds', 'pipelines', 'changes'];
+      allowedPages = ['show', 'commits', 'pipelines', 'changes'];
       $(document).on('page:change.merge_request', (function(_this) {
         return function() {
           var page;
@@ -82,10 +87,10 @@
     };
 
     MergeRequestWidget.prototype.retrieveSuccessIcon = function() {
-       const $ciSuccessIcon = $('.js-success-icon');
-       this.$ciSuccessIcon = $ciSuccessIcon.html();
-       $ciSuccessIcon.remove();
-     }
+      const $ciSuccessIcon = $('.js-success-icon');
+      this.$ciSuccessIcon = $ciSuccessIcon.html();
+      $ciSuccessIcon.remove();
+    }
 
     MergeRequestWidget.prototype.mergeInProgress = function(deleteSourceBranch) {
       if (deleteSourceBranch == null) {
@@ -168,7 +173,6 @@
               message = message.replace('{{title}}', data.title);
               notify(title, message, _this.opts.gitlab_icon, function() {
                 this.close();
-                return Turbolinks.visit(_this.opts.builds_path);
               });
             }
           }
@@ -204,7 +208,7 @@
         const template = _.template(templateString)(environment)
         this.$widgetBody.before(template);
       }
-     };
+    };
 
     MergeRequestWidget.prototype.showCIStatus = function(state) {
       var allowed_states;
@@ -246,4 +250,4 @@
 
   })();
 
- })(window.gl || (window.gl = {}));
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6 b/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6
new file mode 100644
index 00000000000..2b074994b4a
--- /dev/null
+++ b/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6
@@ -0,0 +1,42 @@
+/* global merge_request_widget */
+
+(() => {
+  $(() => {
+    /* TODO: This needs a better home, or should be refactored. It was previously contained
+     * in a script tag in app/views/projects/merge_requests/widget/open/_accept.html.haml,
+     * but Vue chokes on script tags and prevents their execution. So it was moved here
+     * temporarily.
+     * */
+
+    if ($('.accept-mr-form').length) {
+      $('.accept-mr-form').on('ajax:send', () => {
+        $('.accept-mr-form :input').disable();
+      });
+
+      $('.accept_merge_request').on('click', () => {
+        $('.js-merge-button').html('<i class="fa fa-spinner fa-spin"></i> Merge in progress');
+      });
+
+      $('.merge_when_build_succeeds').on('click', () => {
+        $('#merge_when_build_succeeds').val('1');
+      });
+
+      $('.js-merge-dropdown a').on('click', (e) => {
+        e.preventDefault();
+        $(this).closest('form').submit();
+      });
+    } else if ($('.rebase-in-progress').length) {
+      merge_request_widget.rebaseInProgress();
+    } else if ($('.rebase-mr-form').length) {
+      $('.rebase-mr-form').on('ajax:send', () => {
+        $('.rebase-mr-form :input').disable();
+      });
+
+      $('.js-rebase-button').on('click', () => {
+        $('.js-rebase-button').html("<i class='fa fa-spinner fa-spin'></i> Rebase in progress");
+      });
+    } else {
+      merge_request_widget.getMergeStatus();
+    }
+  });
+})();
diff --git a/app/assets/javascripts/merged_buttons.js b/app/assets/javascripts/merged_buttons.js
index 15a12c3d985..9f8af46c715 100644
--- a/app/assets/javascripts/merged_buttons.js
+++ b/app/assets/javascripts/merged_buttons.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, padded-blocks, max-len */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index db7561a3a75..42152362e60 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-use-before-define, camelcase, quotes, object-shorthand, no-shadow, no-unused-vars, no-undef, comma-dangle, no-var, prefer-template, no-underscore-dangle, consistent-return, one-var, one-var-declaration-per-line, default-case, prefer-arrow-callback, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-use-before-define, camelcase, quotes, object-shorthand, no-shadow, no-unused-vars, comma-dangle, no-var, prefer-template, no-underscore-dangle, consistent-return, one-var, one-var-declaration-per-line, default-case, prefer-arrow-callback, padded-blocks, max-len */
+/* global Flash */
+
 (function() {
   this.Milestone = (function() {
     Milestone.updateIssue = function(li, issue_url, data) {
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 67796083790..28054b78249 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -1,4 +1,8 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, 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-undef, no-param-reassign, no-shadow, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, 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, padded-blocks */
+/* global Vue */
+/* global Issuable */
+/* global ListMilestone */
+
 (function() {
   this.MilestoneSelect = (function() {
     function MilestoneSelect(currentProject) {
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 b/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6
new file mode 100644
index 00000000000..90b3366f14b
--- /dev/null
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6
@@ -0,0 +1,96 @@
+/* eslint-disable no-new */
+/* global Flash */
+
+/**
+ * In each pipelines table we have a mini pipeline graph for each pipeline.
+ *
+ * When we click in a pipeline stage, we need to make an API call to get the
+ * builds list to render in a dropdown.
+ *
+ * The container should be the table element.
+ *
+ * The stage icon clicked needs to have the following HTML structure:
+ * <div>
+ *   <button class="dropdown js-builds-dropdown-button"></button>
+ *   <div class="js-builds-dropdown-container"></div>
+ * </div>
+ */
+(() => {
+  class MiniPipelineGraph {
+    constructor(opts = {}) {
+      this.container = opts.container || '';
+      this.dropdownListSelector = '.js-builds-dropdown-container';
+      this.getBuildsList = this.getBuildsList.bind(this);
+
+      this.bindEvents();
+    }
+
+    /**
+     * Adds and removes the event listener.
+     */
+    bindEvents() {
+      const dropdownButtonSelector = 'button.js-builds-dropdown-button';
+
+      $(this.container).off('click', dropdownButtonSelector, this.getBuildsList)
+        .on('click', dropdownButtonSelector, this.getBuildsList);
+    }
+
+    /**
+     * For the clicked stage, renders the given data in the dropdown list.
+     *
+     * @param  {HTMLElement} stageContainer
+     * @param  {Object} data
+     */
+    renderBuildsList(stageContainer, data) {
+      const dropdownContainer = stageContainer.parentElement.querySelector(
+        `${this.dropdownListSelector} .js-builds-dropdown-list`,
+      );
+
+      dropdownContainer.innerHTML = data;
+    }
+
+    /**
+     * For the clicked stage, gets the list of builds.
+     *
+     * @param  {Object} e
+     * @return {Promise}
+     */
+    getBuildsList(e) {
+      const button = e.currentTarget;
+      const endpoint = button.dataset.stageEndpoint;
+
+      return $.ajax({
+        dataType: 'json',
+        type: 'GET',
+        url: endpoint,
+        beforeSend: () => {
+          this.renderBuildsList(button, '');
+          this.toggleLoading(button);
+        },
+        success: (data) => {
+          this.toggleLoading(button);
+          this.renderBuildsList(button, data.html);
+        },
+        error: () => {
+          this.toggleLoading(button);
+          new Flash('An error occurred while fetching the builds.', 'alert');
+        },
+      });
+    }
+
+    /**
+     * Toggles the visibility of the loading icon.
+     *
+     * @param  {HTMLElement} stageContainer
+     * @return {type}
+     */
+    toggleLoading(stageContainer) {
+      stageContainer.parentElement.querySelector(
+        `${this.dropdownListSelector} .js-builds-dropdown-loading`,
+      ).classList.toggle('hidden');
+    }
+  }
+
+  window.gl = window.gl || {};
+  window.gl.MiniPipelineGraph = MiniPipelineGraph;
+})();
diff --git a/app/assets/javascripts/namespace_select.js b/app/assets/javascripts/namespace_select.js
index 87c903ec576..6633f2c2709 100644
--- a/app/assets/javascripts/namespace_select.js
+++ b/app/assets/javascripts/namespace_select.js
@@ -1,8 +1,10 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, one-var, vars-on-top, one-var-declaration-per-line, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, no-undef, prefer-arrow-callback, padded-blocks, no-param-reassign, no-cond-assign, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, one-var, vars-on-top, one-var-declaration-per-line, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, prefer-arrow-callback, padded-blocks, no-param-reassign, no-cond-assign, max-len */
+/* global Api */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
-  this.NamespaceSelect = (function() {
+  window.NamespaceSelect = (function() {
     function NamespaceSelect(opts) {
       this.onSelectItem = bind(this.onSelectItem, this);
       var fieldName, showAny;
@@ -64,7 +66,7 @@
 
   })();
 
-  this.NamespaceSelects = (function() {
+  window.NamespaceSelects = (function() {
     function NamespaceSelects(opts) {
       var ref;
       if (opts == null) {
@@ -74,7 +76,7 @@
       this.$dropdowns.each(function(i, dropdown) {
         var $dropdown;
         $dropdown = $(dropdown);
-        return new NamespaceSelect({
+        return new window.NamespaceSelect({
           dropdown: $dropdown
         });
       });
diff --git a/app/assets/javascripts/network/branch_graph.js b/app/assets/javascripts/network/branch_graph.js
index e3dc599b90a..20a68780cd5 100644
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, quotes, comma-dangle, one-var, one-var-declaration-per-line, no-mixed-operators, new-cap, no-undef, no-plusplus, no-loop-func, no-floating-decimal, consistent-return, no-unused-vars, prefer-template, prefer-arrow-callback, camelcase, max-len, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, quotes, comma-dangle, one-var, one-var-declaration-per-line, no-mixed-operators, new-cap, no-plusplus, no-loop-func, no-floating-decimal, consistent-return, no-unused-vars, prefer-template, prefer-arrow-callback, camelcase, max-len, padded-blocks */
+/* global Raphael */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
@@ -354,7 +356,7 @@
     icon = this.image(gon.relative_url_root + commit.author.icon, x, y, 20, 20);
     nameText = this.text(x + 25, y + 10, commit.author.name);
     idText = this.text(x, y + 35, commit.id);
-    messageText = this.text(x, y + 50, commit.message);
+    messageText = this.text(x, y + 50, commit.message.replace(/\r?\n/g, " \n "));
     textSet = this.set(icon, nameText, idText, messageText).attr({
       "text-anchor": "start",
       font: "12px Monaco, monospace"
@@ -366,6 +368,7 @@
     idText.attr({
       fill: "#AAA"
     });
+    messageText.node.style["white-space"] = "pre";
     this.textWrap(messageText, boxWidth - 50);
     rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({
       fill: "#FFF",
@@ -402,16 +405,21 @@
         s.push("\n");
         x = 0;
       }
-      x += word.length * letterWidth;
-      s.push(word + " ");
+      if (word === "\n") {
+        s.push("\n");
+        x = 0;
+      } else {
+        s.push(word + " ");
+        x += word.length * letterWidth;
+      }
     }
     t.attr({
-      text: s.join("")
+      text: s.join("").trim()
     });
     b = t.getBBox();
-    h = Math.abs(b.y2) - Math.abs(b.y) + 1;
+    h = Math.abs(b.y2) + 1;
     return t.attr({
-      y: b.y + h
+      y: h
     });
   };
 
diff --git a/app/assets/javascripts/network/network.js b/app/assets/javascripts/network/network.js
index 5a8f723a27b..2367d2497b2 100644
--- a/app/assets/javascripts/network/network.js
+++ b/app/assets/javascripts/network/network.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, no-undef, quote-props, prefer-template, comma-dangle, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, quote-props, prefer-template, comma-dangle, padded-blocks, max-len */
+/* global BranchGraph */
+
 (function() {
   this.Network = (function() {
     function Network(opts) {
diff --git a/app/assets/javascripts/network/network_bundle.js b/app/assets/javascripts/network/network_bundle.js
index 732d92845cb..17833d3419a 100644
--- a/app/assets/javascripts/network/network_bundle.js
+++ b/app/assets/javascripts/network/network_bundle.js
@@ -1,4 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, quotes, no-var, vars-on-top, camelcase, no-undef, comma-dangle, consistent-return, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, quotes, no-var, vars-on-top, camelcase, comma-dangle, consistent-return, padded-blocks, max-len */
+/* global Network */
+/* global ShortcutsNetwork */
+
 // This is a manifest file that'll be compiled into including all the files listed below.
 // Add new JavaScript code in separate files in this directory and they'll automatically
 // be included in the compiled file accessible from http://example.com/assets/application.js
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 0ca0e255595..fac21f8cd32 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1,4 +1,9 @@
-/* eslint-disable no-restricted-properties, func-names, space-before-function-paren, no-var, space-before-blocks, 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, no-undef, 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, semi, indent, no-sequences, no-shadow, newline-per-chained-call, no-useless-escape, radix, padded-blocks, max-len */
+/* eslint-disable no-restricted-properties, func-names, space-before-function-paren, no-var, space-before-blocks, 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, semi, indent, no-sequences, no-shadow, newline-per-chained-call, no-useless-escape, radix, padded-blocks */
+/* global Flash */
+/* global GLForm */
+/* global Autosave */
+/* global ResolveService */
+/* global mrRefreshWidgetUrl */
 
 /*= require autosave */
 /*= require autosize */
@@ -48,6 +53,12 @@
       this.setupMainTargetNoteForm();
       this.initTaskList();
       this.collapseLongCommitList();
+
+      // We are in the Merge Requests page so we need another edit form for Changes tab
+      if (gl.utils.getPagePath(1) === 'merge_requests') {
+        $('.note-edit-form').clone()
+          .addClass('mr-note-edit-form').insertAfter('.note-edit-form');
+      }
     }
 
     Notes.prototype.addBinding = function() {
@@ -59,7 +70,7 @@
       // change note in UI after update
       $(document).on("ajax:success", "form.edit-note", this.updateNote);
       // Edit note link
-      $(document).on("click", ".js-note-edit", this.showEditForm);
+      $(document).on("click", ".js-note-edit", this.showEditForm.bind(this));
       $(document).on("click", ".note-edit-cancel", this.cancelEdit);
       // Reopen and close actions for Issue/MR combined with note form submit
       $(document).on("click", ".js-comment-button", this.updateCloseButton);
@@ -234,6 +245,16 @@
     };
 
 
+    Notes.prototype.handleCreateChanges = function(note) {
+      if (typeof note === 'undefined') {
+        return;
+      }
+
+      if (note.commands_changes && note.commands_changes.indexOf('merge') !== -1) {
+        $.get(mrRefreshWidgetUrl);
+      }
+    };
+
     /*
     Render note in main comments area.
 
@@ -305,7 +326,7 @@
       }
       row = form.closest("tr");
       note_html = $(note.html);
-      note_html.syntaxHighlight();
+      note_html.renderGFM();
       // is this the first note of discussion?
       discussionContainer = $(".notes[data-discussion-id='" + note.discussion_id + "']");
       if ((note.original_discussion_id != null) && discussionContainer.length === 0) {
@@ -322,7 +343,7 @@
         discussionContainer.append(note_html);
         // Init discussion on 'Discussion' page if it is merge request page
         if ($('body').attr('data-page').indexOf('projects:merge_request') === 0) {
-          $('ul.main-notes-list').append(note.discussion_html).syntaxHighlight();
+          $('ul.main-notes-list').append(note.discussion_html).renderGFM();
         }
       } else {
         // append new note to all matching discussions
@@ -419,6 +440,7 @@
      */
 
     Notes.prototype.addNote = function(xhr, note, status) {
+      this.handleCreateChanges(note);
       return this.renderNote(note);
     };
 
@@ -462,8 +484,9 @@
       var $html, $note_li;
       // Convert returned HTML to a jQuery object so we can modify it further
       $html = $(note.html);
+      this.revertNoteEditForm();
       gl.utils.localTimeAgo($('.js-timeago', $html));
-      $html.syntaxHighlight();
+      $html.renderGFM();
       $html.find('.js-task-list-container').taskList('enable');
       // Find the note's `li` element by ID and replace it with the updated HTML
       $note_li = $('.note-row-' + note.id);
@@ -476,48 +499,56 @@
     };
 
 
+    Notes.prototype.checkContentToAllowEditing = function($el) {
+      var initialContent = $el.find('.original-note-content').text().trim();
+      var currentContent = $el.find('.note-textarea').val();
+      var isAllowed = true;
+
+      if (currentContent === initialContent) {
+        this.removeNoteEditForm($el);
+      }
+      else {
+        var $buttons = $el.find('.note-form-actions');
+        var isWidgetVisible = gl.utils.isInViewport($el.get(0));
+
+        if (!isWidgetVisible) {
+          gl.utils.scrollToElement($el);
+        }
+
+        $el.find('.js-edit-warning').show();
+        isAllowed = false;
+      }
+
+      return isAllowed;
+    }
+
+
     /*
     Called in response to clicking the edit note link
 
     Replaces the note text with the note edit form
     Adds a data attribute to the form with the original content of the note for cancellations
-     */
-
+    */
     Notes.prototype.showEditForm = function(e, scrollTo, myLastNote) {
-      var $noteText, done, form, note;
       e.preventDefault();
-      note = $(this).closest(".note");
-      note.addClass("is-editting");
-      form = note.find(".note-edit-form");
-      form.addClass('current-note-edit-form');
-      // Show the attachment delete link
-      note.find(".js-note-attachment-delete").show();
-      done = function($noteText) {
-        var noteTextVal;
-        // Neat little trick to put the cursor at the end
-        noteTextVal = $noteText.val();
-        // Store the original note text in a data attribute to retrieve if a user cancels edit.
-        form.find('form.edit-note').data('original-note', noteTextVal);
-        return $noteText.val('').val(noteTextVal);
-      };
-      new GLForm(form);
-      if ((scrollTo != null) && (myLastNote != null)) {
-        // scroll to the bottom
-        // so the open of the last element doesn't make a jump
-        $('html, body').scrollTop($(document).height());
-        return $('html, body').animate({
-          scrollTop: myLastNote.offset().top - 150
-        }, 500, function() {
-          var $noteText;
-          $noteText = form.find(".js-note-text");
-          $noteText.focus();
-          return done($noteText);
-        });
-      } else {
-        $noteText = form.find('.js-note-text');
-        $noteText.focus();
-        return done($noteText);
+
+      var $target = $(e.target);
+      var $editForm = $(this.getEditFormSelector($target));
+      var $note = $target.closest('.note');
+      var $currentlyEditing = $('.note.is-editting:visible');
+
+      if ($currentlyEditing.length) {
+        var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing);
+
+        if (!isEditAllowed) {
+          return;
+        }
       }
+
+      $note.find('.js-note-attachment-delete').show();
+      $editForm.addClass('current-note-edit-form');
+      $note.addClass('is-editting');
+      this.putEditFormInPlace($target);
     };
 
 
@@ -528,19 +559,41 @@
      */
 
     Notes.prototype.cancelEdit = function(e) {
-      var note;
       e.preventDefault();
-      note = $(e.target).closest('.note');
+      var $target = $(e.target);
+      var note = $target.closest('.note');
+      note.find('.js-edit-warning').hide();
+      this.revertNoteEditForm($target);
       return this.removeNoteEditForm(note);
     };
 
+    Notes.prototype.revertNoteEditForm = function($target) {
+      $target = $target || $('.note.is-editting:visible');
+      var selector = this.getEditFormSelector($target);
+      var $editForm = $(selector);
+
+      $editForm.insertBefore('.notes-form');
+      $editForm.find('.js-comment-button').enable();
+      $editForm.find('.js-edit-warning').hide();
+    };
+
+    Notes.prototype.getEditFormSelector = function($el) {
+      var selector = '.note-edit-form:not(.mr-note-edit-form)';
+
+      if ($el.parents('#diffs').length) {
+        selector = '.note-edit-form.mr-note-edit-form';
+      }
+
+      return selector;
+    };
+
     Notes.prototype.removeNoteEditForm = function(note) {
-      var form;
-      form = note.find(".current-note-edit-form");
-      note.removeClass("is-editting");
-      form.removeClass("current-note-edit-form");
+      var form = note.find('.current-note-edit-form');
+      note.removeClass('is-editting');
+      form.removeClass('current-note-edit-form');
+      form.find('.js-edit-warning').hide();
       // Replace markdown textarea text with original note text.
-      return form.find(".js-note-text").val(form.find('form.edit-note').data('original-note'));
+      return form.find('.js-note-text').val(form.find('form.edit-note').data('original-note'));
     };
 
 
@@ -671,7 +724,7 @@
      */
 
     Notes.prototype.addDiffNote = function(e) {
-      var $link, addForm, hasNotes, lineType, newForm, nextRow, noteForm, notesContent, replyButton, row, rowCssToAdd, targetContent;
+      var $link, addForm, hasNotes, lineType, newForm, nextRow, noteForm, notesContent, notesContentSelector, replyButton, row, rowCssToAdd, targetContent;
       e.preventDefault();
       $link = $(e.currentTarget);
       row = $link.closest("tr");
@@ -833,15 +886,46 @@
 
     Notes.prototype.initTaskList = function() {
       this.enableTaskList();
-      return $(document).on('tasklist:changed', '.note .js-task-list-container', this.updateTaskList);
+      return $(document).on('tasklist:changed', '.note .js-task-list-container', this.updateTaskList.bind(this));
     };
 
     Notes.prototype.enableTaskList = function() {
       return $('.note .js-task-list-container').taskList('enable');
     };
 
-    Notes.prototype.updateTaskList = function() {
-      return $('form', this).submit();
+    Notes.prototype.putEditFormInPlace = function($el) {
+      var $editForm = $(this.getEditFormSelector($el));
+      var $note = $el.closest('.note');
+
+      $editForm.insertAfter($note.find('.note-text'));
+
+      var $originalContentEl = $note.find('.original-note-content');
+      var originalContent = $originalContentEl.text().trim();
+      var postUrl = $originalContentEl.data('post-url');
+      var targetId = $originalContentEl.data('target-id');
+      var targetType = $originalContentEl.data('target-type');
+
+      new GLForm($editForm.find('form'));
+
+      $editForm.find('form')
+        .attr('action', postUrl)
+        .attr('data-remote', 'true');
+      $editForm.find('.js-form-target-id').val(targetId);
+      $editForm.find('.js-form-target-type').val(targetType);
+      $editForm.find('.js-note-text').focus().val(originalContent);
+      $editForm.find('.js-md-write-button').trigger('click');
+      $editForm.find('.referenced-users').hide();
+    }
+
+    Notes.prototype.updateTaskList = function(e) {
+      var $target = $(e.target);
+      var $list = $target.closest('.js-task-list-container');
+      var $editForm = $(this.getEditFormSelector($target));
+      var $note = $list.closest('.note');
+
+      this.putEditFormInPlace($list);
+      $editForm.find('#note_note').val($note.find('.original-task-list').val());
+      $('form', $list).submit();
     };
 
     Notes.prototype.updateNotesCount = function(updateCount) {
diff --git a/app/assets/javascripts/notifications_dropdown.js b/app/assets/javascripts/notifications_dropdown.js
index b152d26733f..5d0d594073d 100644
--- a/app/assets/javascripts/notifications_dropdown.js
+++ b/app/assets/javascripts/notifications_dropdown.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, consistent-return, prefer-arrow-callback, no-else-return, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, consistent-return, prefer-arrow-callback, no-else-return, padded-blocks, max-len */
+/* global Flash */
+
 (function() {
   this.NotificationsDropdown = (function() {
     function NotificationsDropdown() {
@@ -17,7 +19,7 @@
       });
       $(document).off('ajax:success', '.notification-form').on('ajax:success', '.notification-form', function(e, data) {
         if (data.saved) {
-          return $(e.currentTarget).closest('.notification-dropdown').replaceWith(data.html);
+          return $(e.currentTarget).closest('.js-notification-dropdown').replaceWith(data.html);
         } else {
           return new Flash('Failed to save new settings', 'alert');
         }
diff --git a/app/assets/javascripts/pipelines.js.es6 b/app/assets/javascripts/pipelines.js.es6
index fb95648e1c7..0b09ad113a3 100644
--- a/app/assets/javascripts/pipelines.js.es6
+++ b/app/assets/javascripts/pipelines.js.es6
@@ -1,6 +1,7 @@
+/* eslint-disable no-new, guard-for-in, no-restricted-syntax, no-continue, padded-blocks, no-param-reassign, max-len */
+
 //= require lib/utils/bootstrap_linked_tabs
 
-/* eslint-disable */
 ((global) => {
 
   class Pipelines {
diff --git a/app/assets/javascripts/preview_markdown.js b/app/assets/javascripts/preview_markdown.js
index 3723aa24942..89f7e976934 100644
--- a/app/assets/javascripts/preview_markdown.js
+++ b/app/assets/javascripts/preview_markdown.js
@@ -1,13 +1,17 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, wrap-iife, no-else-return, consistent-return, object-shorthand, comma-dangle, no-param-reassign, padded-blocks, no-undef, camelcase, prefer-arrow-callback, max-len */
+/* eslint-disable func-names, no-var, object-shorthand, comma-dangle, prefer-arrow-callback */
+
 // MarkdownPreview
 //
 // Handles toggling the "Write" and "Preview" tab clicks, rendering the preview,
 // and showing a warning when more than `x` users are referenced.
 //
-(function() {
-  var lastTextareaPreviewed, markdownPreview, previewButtonSelector, writeButtonSelector;
+(function () {
+  var lastTextareaPreviewed;
+  var markdownPreview;
+  var previewButtonSelector;
+  var writeButtonSelector;
 
-  this.MarkdownPreview = (function() {
+  window.MarkdownPreview = (function () {
     function MarkdownPreview() {}
 
     // Minimum number of users referenced before triggering a warning
@@ -15,75 +19,73 @@
 
     MarkdownPreview.prototype.ajaxCache = {};
 
-    MarkdownPreview.prototype.showPreview = function(form) {
-      var mdText, preview;
-      preview = form.find('.js-md-preview');
-      mdText = form.find('textarea.markdown-area').val();
+    MarkdownPreview.prototype.showPreview = function ($form) {
+      var mdText;
+      var preview = $form.find('.js-md-preview');
+      if (preview.hasClass('md-preview-loading')) {
+        return;
+      }
+      mdText = $form.find('textarea.markdown-area').val();
+
       if (mdText.trim().length === 0) {
         preview.text('Nothing to preview.');
-        return this.hideReferencedUsers(form);
+        this.hideReferencedUsers($form);
       } else {
-        preview.text('Loading...');
-        return this.renderMarkdown(mdText, (function(_this) {
-          return function(response) {
-            preview.html(response.body);
-            preview.syntaxHighlight();
-            return _this.renderReferencedUsers(response.references.users, form);
-          };
-        })(this));
+        preview.addClass('md-preview-loading').text('Loading...');
+        this.fetchMarkdownPreview(mdText, (function (response) {
+          preview.removeClass('md-preview-loading').html(response.body);
+          preview.renderGFM();
+          this.renderReferencedUsers(response.references.users, $form);
+        }).bind(this));
       }
     };
 
-    MarkdownPreview.prototype.renderMarkdown = function(text, success) {
+    MarkdownPreview.prototype.fetchMarkdownPreview = function (text, success) {
       if (!window.preview_markdown_path) {
         return;
       }
       if (text === this.ajaxCache.text) {
-        return success(this.ajaxCache.response);
+        success(this.ajaxCache.response);
+        return;
       }
-      return $.ajax({
+      $.ajax({
         type: 'POST',
         url: window.preview_markdown_path,
         data: {
           text: text
         },
         dataType: 'json',
-        success: (function(_this) {
-          return function(response) {
-            _this.ajaxCache = {
-              text: text,
-              response: response
-            };
-            return success(response);
+        success: (function (response) {
+          this.ajaxCache = {
+            text: text,
+            response: response
           };
-        })(this)
+          success(response);
+        }).bind(this)
       });
     };
 
-    MarkdownPreview.prototype.hideReferencedUsers = function(form) {
-      var referencedUsers;
-      referencedUsers = form.find('.referenced-users');
-      return referencedUsers.hide();
+    MarkdownPreview.prototype.hideReferencedUsers = function ($form) {
+      $form.find('.referenced-users').hide();
     };
 
-    MarkdownPreview.prototype.renderReferencedUsers = function(users, form) {
+    MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) {
       var referencedUsers;
-      referencedUsers = form.find('.referenced-users');
+      referencedUsers = $form.find('.referenced-users');
       if (referencedUsers.length) {
         if (users.length >= this.referenceThreshold) {
           referencedUsers.show();
-          return referencedUsers.find('.js-referenced-users-count').text(users.length);
+          referencedUsers.find('.js-referenced-users-count').text(users.length);
         } else {
-          return referencedUsers.hide();
+          referencedUsers.hide();
         }
       }
     };
 
     return MarkdownPreview;
+  }());
 
-  })();
-
-  markdownPreview = new MarkdownPreview();
+  markdownPreview = new window.MarkdownPreview();
 
   previewButtonSelector = '.js-md-preview-button';
 
@@ -91,19 +93,14 @@
 
   lastTextareaPreviewed = null;
 
-  $.fn.setupMarkdownPreview = function() {
-    var $form, form_textarea;
-    $form = $(this);
-    form_textarea = $form.find('textarea.markdown-area');
-    form_textarea.on('input', function() {
-      return markdownPreview.hideReferencedUsers($form);
-    });
-    return form_textarea.on('blur', function() {
-      return markdownPreview.showPreview($form);
+  $.fn.setupMarkdownPreview = function () {
+    var $form = $(this);
+    $form.find('textarea.markdown-area').on('input', function () {
+      markdownPreview.hideReferencedUsers($form);
     });
   };
 
-  $(document).on('markdown-preview:show', function(e, $form) {
+  $(document).on('markdown-preview:show', function (e, $form) {
     if (!$form) {
       return;
     }
@@ -114,10 +111,10 @@
     // toggle content
     $form.find('.md-write-holder').hide();
     $form.find('.md-preview-holder').show();
-    return markdownPreview.showPreview($form);
+    markdownPreview.showPreview($form);
   });
 
-  $(document).on('markdown-preview:hide', function(e, $form) {
+  $(document).on('markdown-preview:hide', function (e, $form) {
     if (!$form) {
       return;
     }
@@ -128,34 +125,33 @@
     // toggle content
     $form.find('.md-write-holder').show();
     $form.find('textarea.markdown-area').focus();
-    return $form.find('.md-preview-holder').hide();
+    $form.find('.md-preview-holder').hide();
   });
 
-  $(document).on('markdown-preview:toggle', function(e, keyboardEvent) {
+  $(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
     var $target;
     $target = $(keyboardEvent.target);
     if ($target.is('textarea.markdown-area')) {
       $(document).triggerHandler('markdown-preview:show', [$target.closest('form')]);
-      return keyboardEvent.preventDefault();
+      keyboardEvent.preventDefault();
     } else if (lastTextareaPreviewed) {
       $target = lastTextareaPreviewed;
       $(document).triggerHandler('markdown-preview:hide', [$target.closest('form')]);
-      return keyboardEvent.preventDefault();
+      keyboardEvent.preventDefault();
     }
   });
 
-  $(document).on('click', previewButtonSelector, function(e) {
+  $(document).on('click', previewButtonSelector, function (e) {
     var $form;
     e.preventDefault();
     $form = $(this).closest('form');
-    return $(document).triggerHandler('markdown-preview:show', [$form]);
+    $(document).triggerHandler('markdown-preview:show', [$form]);
   });
 
-  $(document).on('click', writeButtonSelector, function(e) {
+  $(document).on('click', writeButtonSelector, function (e) {
     var $form;
     e.preventDefault();
     $form = $(this).closest('form');
-    return $(document).triggerHandler('markdown-preview:hide', [$form]);
+    $(document).triggerHandler('markdown-preview:hide', [$form]);
   });
-
-}).call(this);
+}());
diff --git a/app/assets/javascripts/profile/gl_crop.js.es6 b/app/assets/javascripts/profile/gl_crop.js.es6
index 6da6c1d0295..b4b6da41f63 100644
--- a/app/assets/javascripts/profile/gl_crop.js.es6
+++ b/app/assets/javascripts/profile/gl_crop.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable no-useless-escape, max-len, padded-blocks, 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, no-plusplus, new-parens, semi */
+
 ((global) => {
 
   // Matches everything but the file name
diff --git a/app/assets/javascripts/profile/profile.js.es6 b/app/assets/javascripts/profile/profile.js.es6
index 3eb81808bd6..aef2e3a3fa8 100644
--- a/app/assets/javascripts/profile/profile.js.es6
+++ b/app/assets/javascripts/profile/profile.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* 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, padded-blocks */
+/* global Flash */
+
 ((global) => {
 
   class Profile {
@@ -39,15 +41,12 @@
     }
 
     beforeUpdateUsername() {
-      $('.loading-username').show();
-      $(this).find('.update-success').hide();
-      return $(this).find('.update-failed').hide();
+      $('.loading-username', this).removeClass('hidden');
     }
 
     afterUpdateUsername() {
-      $('.loading-username').hide();
-      $(this).find('.btn-save').enable();
-      return $(this).find('.loading-gif').hide();
+      $('.loading-username', this).addClass('hidden');
+      $('button[type=submit]', this).enable();
     }
 
     onUpdateNotifs(e, data) {
diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js
index 016d999d77e..fcf3a4af956 100644
--- a/app/assets/javascripts/project.js
+++ b/app/assets/javascripts/project.js
@@ -1,4 +1,8 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, consistent-return, no-undef, no-new, prefer-arrow-callback, no-return-assign, one-var, one-var-declaration-per-line, object-shorthand, comma-dangle, no-else-return, newline-per-chained-call, no-shadow, semi, vars-on-top, indent, prefer-template, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, consistent-return, no-new, prefer-arrow-callback, no-return-assign, one-var, one-var-declaration-per-line, object-shorthand, comma-dangle, no-else-return, newline-per-chained-call, no-shadow, semi, vars-on-top, indent, prefer-template, padded-blocks, max-len */
+/* global Cookies */
+/* global Turbolinks */
+/* global ProjectSelect */
+
 (function() {
   this.Project = (function() {
     function Project() {
diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index 804306a3293..1bd232314d0 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, quotes, consistent-return, one-var, one-var-declaration-per-line, no-cond-assign, max-len, no-undef, object-shorthand, no-param-reassign, comma-dangle, no-plusplus, prefer-template, no-unused-vars, no-return-assign, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, 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, no-plusplus, prefer-template, no-unused-vars, no-return-assign, padded-blocks */
+/* global fuzzaldrinPlus */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
diff --git a/app/assets/javascripts/project_import.js b/app/assets/javascripts/project_import.js
index c99e55234cf..02dafcfb865 100644
--- a/app/assets/javascripts/project_import.js
+++ b/app/assets/javascripts/project_import.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, padded-blocks, max-len */
+/* global Turbolinks */
+
 (function() {
   this.ProjectImport = (function() {
     function ProjectImport() {
diff --git a/app/assets/javascripts/project_label_subscription.js.es6 b/app/assets/javascripts/project_label_subscription.js.es6
index 03a115cb35b..b8d6a198996 100644
--- a/app/assets/javascripts/project_label_subscription.js.es6
+++ b/app/assets/javascripts/project_label_subscription.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable wrap-iife, func-names, space-before-function-paren, object-shorthand, comma-dangle, one-var, one-var-declaration-per-line, no-restricted-syntax, prefer-const, max-len, no-param-reassign, padded-blocks */
+
 (function(global) {
   class ProjectLabelSubscription {
     constructor(container) {
diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index fe1f96872f3..38bc2e1c3a0 100644
--- a/app/assets/javascripts/project_select.js
+++ b/app/assets/javascripts/project_select.js
@@ -1,4 +1,6 @@
-/* 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-undef, no-else-return, quotes, padded-blocks, max-len */
+/* 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, padded-blocks, max-len */
+/* global Api */
+
 (function() {
   this.ProjectSelect = (function() {
     function ProjectSelect() {
@@ -13,6 +15,7 @@
           },
           data: function(term, callback) {
             var finalCallback, projectsCallback;
+            var orderBy = $dropdown.data('order-by');
             finalCallback = function(projects) {
               return callback(projects);
             };
@@ -32,7 +35,7 @@
             if (this.groupId) {
               return Api.groupProjects(this.groupId, term, projectsCallback);
             } else {
-              return Api.projects(term, this.orderBy, projectsCallback);
+              return Api.projects(term, orderBy, projectsCallback);
             }
           },
           url: function(project) {
diff --git a/app/assets/javascripts/projects_list.js b/app/assets/javascripts/projects_list.js
index dbf530bed41..4548dc68fe1 100644
--- a/app/assets/javascripts/projects_list.js
+++ b/app/assets/javascripts/projects_list.js
@@ -1,6 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, object-shorthand, quotes, no-var, one-var, one-var-declaration-per-line, no-undef, prefer-arrow-callback, consistent-return, no-unused-vars, camelcase, prefer-template, comma-dangle, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, object-shorthand, quotes, no-var, one-var, one-var-declaration-per-line, prefer-arrow-callback, consistent-return, no-unused-vars, camelcase, prefer-template, comma-dangle, padded-blocks, max-len */
+
 (function() {
-  this.ProjectsList = {
+  window.ProjectsList = {
     init: function() {
       $(".projects-list-filter").off('keyup');
       this.initSearch();
@@ -9,7 +10,7 @@
     initSearch: function() {
       var debounceFilter, projectsListFilter;
       projectsListFilter = $('.projects-list-filter');
-      debounceFilter = _.debounce(ProjectsList.filterResults, 500);
+      debounceFilter = _.debounce(window.ProjectsList.filterResults, 500);
       return projectsListFilter.on('keyup', function(e) {
         if (projectsListFilter.val() !== '') {
           return debounceFilter();
diff --git a/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js.es6
index 2d60947a666..4aef1c84b56 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js.es6
+++ b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable arrow-parens, no-param-reassign, no-irregular-whitespace, object-shorthand, no-else-return, comma-dangle, semi, padded-blocks, max-len */
+
 (global => {
   global.gl = global.gl || {};
 
diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_create.js.es6
index c45c9d8ff22..f26fba979a4 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js.es6
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable no-new, arrow-parens, no-param-reassign, no-irregular-whitespace, comma-dangle, padded-blocks, semi, max-len */
+/* global ProtectedBranchDropdown */
+
 (global => {
   global.gl = global.gl || {};
 
diff --git a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6
index e3f226e9a2a..03f4531abf5 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6
+++ b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, no-unused-vars */
+
 class ProtectedBranchDropdown {
   constructor(options) {
     this.onSelect = options.onSelect;
@@ -75,3 +76,5 @@ class ProtectedBranchDropdown {
     this.$dropdownFooter.toggleClass('hidden', !branchName);
   }
 }
+
+window.ProtectedBranchDropdown = ProtectedBranchDropdown;
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6
index ac3142ffb07..4ff2fa5a80f 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable no-new, arrow-parens, no-param-reassign, no-irregular-whitespace, padded-blocks, comma-dangle, no-trailing-spaces, semi, max-len */
+/* global Flash */
+
 (global => {
   global.gl = global.gl || {};
 
@@ -33,7 +35,7 @@
       const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
 
       // Do not update if one dropdown has not selected any option
-      if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return; 
+      if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return;
 
       $.ajax({
         type: 'POST',
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit_list.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_edit_list.js.es6
index 705378a364d..b6972ef2e16 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit_list.js.es6
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit_list.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable arrow-parens, no-param-reassign, no-irregular-whitespace, no-new, comma-dangle, semi, padded-blocks, max-len */
+
 (global => {
   global.gl = global.gl || {};
 
diff --git a/app/assets/javascripts/protected_branches/protected_branches_bundle.js b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
index 17e34163831..15b3affd469 100644
--- a/app/assets/javascripts/protected_branches/protected_branches_bundle.js
+++ b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
@@ -1,2 +1 @@
-/* eslint-disable */
 /*= require_tree . */
diff --git a/app/assets/javascripts/render_gfm.js b/app/assets/javascripts/render_gfm.js
new file mode 100644
index 00000000000..bbb2f186655
--- /dev/null
+++ b/app/assets/javascripts/render_gfm.js
@@ -0,0 +1,16 @@
+/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-undef, no-else-return, prefer-arrow-callback, padded-blocks, max-len */
+// Render Gitlab flavoured Markdown
+//
+// Delegates to syntax highlight and render math
+//
+(function() {
+  $.fn.renderGFM = function() {
+    this.find('.js-syntax-highlight').syntaxHighlight();
+    this.find('.js-render-math').renderMath();
+  };
+
+  $(document).on('ready page:load', function() {
+    return $('body').renderGFM();
+  });
+
+}).call(this);
diff --git a/app/assets/javascripts/render_math.js b/app/assets/javascripts/render_math.js
new file mode 100644
index 00000000000..209e7a8661d
--- /dev/null
+++ b/app/assets/javascripts/render_math.js
@@ -0,0 +1,55 @@
+/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-undef, no-else-return, prefer-arrow-callback, padded-blocks, max-len, no-console */
+// Renders math using KaTeX in any element with the
+// `js-render-math` class
+//
+// ### Example Markup
+//
+//   <code class="js-render-math"></div>
+//
+(function() {
+  // Only load once
+  var katexLoaded = false;
+
+  // Loop over all math elements and render math
+  var renderWithKaTeX = function (elements) {
+    elements.each(function () {
+      var mathNode = $('<span></span>');
+      var $this = $(this);
+
+      var display = $this.attr('data-math-style') === 'display';
+      try {
+        katex.render($this.text(), mathNode.get(0), { displayMode: display });
+        mathNode.insertAfter($this);
+        $this.remove();
+      } catch (err) {
+        // What can we do??
+        console.log(err.message);
+      }
+    });
+  };
+
+  $.fn.renderMath = function() {
+    var $this = this;
+    if ($this.length === 0) return;
+
+    if (katexLoaded) renderWithKaTeX($this);
+    else {
+      // Request CSS file so it is in the cache
+      $.get(gon.katex_css_url, function() {
+        var css = $('<link>',
+          { rel: 'stylesheet',
+            type: 'text/css',
+            href: gon.katex_css_url,
+          });
+        css.appendTo('head');
+
+        // Load KaTeX js
+        $.getScript(gon.katex_js_url, function() {
+          katexLoaded = true;
+          renderWithKaTeX($this); // Run KaTeX
+        });
+      });
+    }
+  };
+
+}).call(this);
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index 440b5da756d..b1e844b7302 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-unused-vars, semi, consistent-return, one-var, one-var-declaration-per-line, no-undef, quotes, prefer-template, object-shorthand, comma-dangle, no-else-return, no-param-reassign, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-unused-vars, semi, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, object-shorthand, comma-dangle, no-else-return, no-param-reassign, padded-blocks, max-len */
+/* global Cookies */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
diff --git a/app/assets/javascripts/search.js b/app/assets/javascripts/search.js
index 1d208f1494c..5945cab4cf0 100644
--- a/app/assets/javascripts/search.js
+++ b/app/assets/javascripts/search.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, object-shorthand, no-undef, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-else-return, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, object-shorthand, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-else-return, padded-blocks, max-len */
+/* global Api */
+
 (function() {
   this.Search = (function() {
     function Search() {
@@ -10,6 +12,9 @@
         selectable: true,
         filterable: true,
         fieldName: 'group_id',
+        search: {
+          fields: ['name']
+        },
         data: function(term, callback) {
           return Api.groups(term, {}, function(data) {
             data.unshift({
@@ -38,6 +43,9 @@
         selectable: true,
         filterable: true,
         fieldName: 'project_id',
+        search: {
+          fields: ['name']
+        },
         data: function(term, callback) {
           return Api.projects(term, 'id', function(data) {
             data.unshift({
diff --git a/app/assets/javascripts/search_autocomplete.js.es6 b/app/assets/javascripts/search_autocomplete.js.es6
index 5fa94556501..cec8856d4e7 100644
--- a/app/assets/javascripts/search_autocomplete.js.es6
+++ b/app/assets/javascripts/search_autocomplete.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, 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, no-plusplus, prefer-template, quotes, class-methods-use-this, no-unused-expressions, no-sequences, wrap-iife, no-lonely-if, no-else-return, no-param-reassign, vars-on-top, padded-blocks, no-extra-semi, indent, max-len */
+
 ((global) => {
 
   const KEYCODE = {
@@ -141,8 +142,9 @@
     }
 
     getCategoryContents() {
-      var dashboardOptions, groupOptions, issuesPath, items, mrPath, name, options, projectOptions, userId, utils;
+      var dashboardOptions, groupOptions, issuesPath, items, mrPath, name, options, projectOptions, userId, userName, utils;
       userId = gon.current_user_id;
+      userName = gon.current_username;
       utils = gl.utils, projectOptions = gl.projectOptions, groupOptions = gl.groupOptions, dashboardOptions = gl.dashboardOptions;
       if (utils.isInGroupsPage() && groupOptions) {
         options = groupOptions[utils.getGroupSlug()];
@@ -157,10 +159,10 @@
           header: "" + name
         }, {
           text: 'Issues assigned to me',
-          url: issuesPath + "/?assignee_id=" + userId
+          url: issuesPath + "/?assignee_username=" + userName
         }, {
           text: "Issues I've created",
-          url: issuesPath + "/?author_id=" + userId
+          url: issuesPath + "/?author_username=" + userName
         }, 'separator', {
           text: 'Merge requests assigned to me',
           url: mrPath + "/?assignee_id=" + userId
diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index fa2168723be..5ea00f408f4 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -1,4 +1,8 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, quotes, no-undef, prefer-arrow-callback, consistent-return, object-shorthand, no-unused-vars, one-var, one-var-declaration-per-line, no-plusplus, no-else-return, comma-dangle, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, quotes, prefer-arrow-callback, consistent-return, object-shorthand, no-unused-vars, one-var, one-var-declaration-per-line, no-plusplus, no-else-return, comma-dangle, padded-blocks, max-len */
+/* global Mousetrap */
+/* global Turbolinks */
+/* global findFileURL */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
diff --git a/app/assets/javascripts/shortcuts_blob.js b/app/assets/javascripts/shortcuts_blob.js
index 65305b8c22f..c26903038b4 100644
--- a/app/assets/javascripts/shortcuts_blob.js
+++ b/app/assets/javascripts/shortcuts_blob.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, consistent-return, padded-blocks, no-undef, max-len */
+/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, consistent-return, padded-blocks */
+/* global Shortcuts */
+/* global Mousetrap */
 
 /*= require shortcuts */
 
diff --git a/app/assets/javascripts/shortcuts_dashboard_navigation.js b/app/assets/javascripts/shortcuts_dashboard_navigation.js
index 1b9a265ba39..4549742bbcb 100644
--- a/app/assets/javascripts/shortcuts_dashboard_navigation.js
+++ b/app/assets/javascripts/shortcuts_dashboard_navigation.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-arrow-callback, consistent-return, no-return-assign, padded-blocks, no-undef, max-len */
+/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-arrow-callback, consistent-return, no-return-assign, padded-blocks */
+/* global Mousetrap */
+/* global Shortcuts */
 
 /*= require shortcuts */
 
diff --git a/app/assets/javascripts/shortcuts_find_file.js b/app/assets/javascripts/shortcuts_find_file.js
index 68cd6fad04e..3a81380eef0 100644
--- a/app/assets/javascripts/shortcuts_find_file.js
+++ b/app/assets/javascripts/shortcuts_find_file.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, padded-blocks, no-undef, max-len */
+/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, padded-blocks */
+/* global Mousetrap */
+/* global ShortcutsNavigation */
 
 /*= require shortcuts_navigation */
 
diff --git a/app/assets/javascripts/shortcuts_issuable.js b/app/assets/javascripts/shortcuts_issuable.js
index c4899f3566a..b892fbc3393 100644
--- a/app/assets/javascripts/shortcuts_issuable.js
+++ b/app/assets/javascripts/shortcuts_issuable.js
@@ -1,4 +1,8 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, one-var-declaration-per-line, quotes, prefer-arrow-callback, consistent-return, prefer-template, no-mixed-operators, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, one-var-declaration-per-line, quotes, prefer-arrow-callback, consistent-return, prefer-template, no-mixed-operators, padded-blocks */
+/* global Mousetrap */
+/* global Turbolinks */
+/* global ShortcutsNavigation */
+/* global sidebar */
 
 /*= require mousetrap */
 /*= require shortcuts_navigation */
diff --git a/app/assets/javascripts/shortcuts_navigation.js b/app/assets/javascripts/shortcuts_navigation.js
index 7d4d6364c70..0776d0a9b67 100644
--- a/app/assets/javascripts/shortcuts_navigation.js
+++ b/app/assets/javascripts/shortcuts_navigation.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-arrow-callback, consistent-return, no-return-assign, padded-blocks, no-undef, max-len */
+/* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-arrow-callback, consistent-return, no-return-assign, padded-blocks */
+/* global Mousetrap */
+/* global Shortcuts */
 
 /*= require shortcuts */
 
diff --git a/app/assets/javascripts/shortcuts_network.js b/app/assets/javascripts/shortcuts_network.js
index a4095d2c06b..ecc3fab84c3 100644
--- a/app/assets/javascripts/shortcuts_network.js
+++ b/app/assets/javascripts/shortcuts_network.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, padded-blocks, no-undef, max-len */
+/* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, padded-blocks, max-len */
+/* global Mousetrap */
+/* global ShortcutsNavigation */
 
 /*= require shortcuts_navigation */
 
diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
index a23ca449c4b..9790a44972d 100644
--- a/app/assets/javascripts/sidebar.js.es6
+++ b/app/assets/javascripts/sidebar.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable arrow-parens, class-methods-use-this, no-param-reassign, padded-blocks */
+/* global Cookies */
+
 ((global) => {
   let singleton;
 
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 0d48e69cce9..9602526063e 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -1,8 +1,9 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, one-var, one-var-declaration-per-line, consistent-return, no-param-reassign, padded-blocks, no-undef, max-len */
+/* eslint-disable func-names, prefer-arrow-callback, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, one-var, one-var-declaration-per-line, consistent-return, no-param-reassign, padded-blocks, max-len */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
-  this.SingleFileDiff = (function() {
+  window.SingleFileDiff = (function() {
     var COLLAPSED_HTML, ERROR_HTML, LOADING_HTML, WRAPPER;
 
     WRAPPER = '<div class="diff-content diff-wrap-lines"></div>';
@@ -13,8 +14,7 @@
 
     COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <a class="click-to-expand">Click to expand it.</a></div>';
 
-    function SingleFileDiff(file, forceLoad, cb) {
-      var clickTarget;
+    function SingleFileDiff(file) {
       this.file = file;
       this.toggleDiff = bind(this.toggleDiff, this);
       this.content = $('.diff-content', this.file);
@@ -32,14 +32,13 @@
         this.content.after(this.collapsedContent);
         this.$toggleIcon.addClass('fa-caret-down');
       }
-      clickTarget = $('.file-title, .click-to-expand', this.file).on('click', this.toggleDiff);
-      if (forceLoad) {
-        this.toggleDiff({ target: clickTarget }, cb);
-      }
+
+      $('.file-title, .click-to-expand', this.file).on('click', (function (e) {
+        this.toggleDiff($(e.target));
+      }).bind(this));
     }
 
-    SingleFileDiff.prototype.toggleDiff = function(e, cb) {
-      var $target = $(e.target);
+    SingleFileDiff.prototype.toggleDiff = function($target, cb) {
       if (!$target.hasClass('file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return;
       this.isOpen = !this.isOpen;
       if (!this.isOpen && !this.hasError) {
@@ -90,10 +89,10 @@
 
   })();
 
-  $.fn.singleFileDiff = function(forceLoad, cb) {
+  $.fn.singleFileDiff = function() {
     return this.each(function() {
-      if (!$.data(this, 'singleFileDiff') || forceLoad) {
-        return $.data(this, 'singleFileDiff', new SingleFileDiff(this, forceLoad, cb));
+      if (!$.data(this, 'singleFileDiff')) {
+        return $.data(this, 'singleFileDiff', new window.SingleFileDiff(this));
       }
     });
   };
diff --git a/app/assets/javascripts/snippet/snippet_bundle.js b/app/assets/javascripts/snippet/snippet_bundle.js
index 2c8ecba7de4..18512d179b3 100644
--- a/app/assets/javascripts/snippet/snippet_bundle.js
+++ b/app/assets/javascripts/snippet/snippet_bundle.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, no-undef, quotes, semi, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, semi, padded-blocks, max-len */
+/* global ace */
+
 /*= require_tree . */
 
 (function() {
diff --git a/app/assets/javascripts/snippets_list.js.es6 b/app/assets/javascripts/snippets_list.js.es6
index c3afc3f2246..6f913326a3a 100644
--- a/app/assets/javascripts/snippets_list.js.es6
+++ b/app/assets/javascripts/snippets_list.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable arrow-parens, no-param-reassign, space-before-function-paren, func-names, no-var, semi, max-len */
+
 (global => {
   global.gl = global.gl || {};
 
diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js
index 32803fa790b..f1fc526bf2e 100644
--- a/app/assets/javascripts/star.js
+++ b/app/assets/javascripts/star.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-unused-vars, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, no-new, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-unused-vars, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, no-new, padded-blocks, max-len */
+/* global Flash */
+
 (function() {
   this.Star = (function() {
     function Star() {
diff --git a/app/assets/javascripts/subbable_resource.js.es6 b/app/assets/javascripts/subbable_resource.js.es6
index 932120157a3..d8191605128 100644
--- a/app/assets/javascripts/subbable_resource.js.es6
+++ b/app/assets/javascripts/subbable_resource.js.es6
@@ -1,6 +1,3 @@
-//= require vue
-//= require vue-resource
-
 (() => {
 /*
 *   SubbableResource can be extended to provide a pubsub-style service for one-off REST
diff --git a/app/assets/javascripts/syntax_highlight.js b/app/assets/javascripts/syntax_highlight.js
index bd37d69165f..5d0fa62c50a 100644
--- a/app/assets/javascripts/syntax_highlight.js
+++ b/app/assets/javascripts/syntax_highlight.js
@@ -1,4 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-undef, no-else-return, prefer-arrow-callback, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-else-return, prefer-arrow-callback, padded-blocks, max-len */
+
 // Syntax Highlighter
 //
 // Applies a syntax highlighting color scheme CSS class to any element with the
@@ -9,8 +10,10 @@
 //   <div class="js-syntax-highlight"></div>
 //
 (function() {
+
   $.fn.syntaxHighlight = function() {
     var $children;
+
     if ($(this).hasClass('js-syntax-highlight')) {
       // Given the element itself, apply highlighting
       return $(this).addClass(gon.user_color_scheme);
@@ -23,8 +26,4 @@
     }
   };
 
-  $(document).on('ready page:load', function() {
-    return $('.js-syntax-highlight').syntaxHighlight();
-  });
-
 }).call(this);
diff --git a/app/assets/javascripts/templates/issuable_template_selector.js.es6 b/app/assets/javascripts/templates/issuable_template_selector.js.es6
index 93a3d67ee9f..bdec948fb63 100644
--- a/app/assets/javascripts/templates/issuable_template_selector.js.es6
+++ b/app/assets/javascripts/templates/issuable_template_selector.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable prefer-const, comma-dangle, max-len, no-useless-return, object-curly-spacing, no-param-reassign, max-len */
+/* global Api */
+
 /*= require ../blob/template_selector */
 
 ((global) => {
@@ -21,7 +23,7 @@
       });
 
       $('.no-template', this.dropdown.parent()).on('click', () => {
-        this.currentTemplate = '';
+        this.currentTemplate.content = '';
         this.setInputValueToTemplateContent();
         $('.dropdown-toggle-text', this.dropdown).text('Choose a template');
       });
diff --git a/app/assets/javascripts/templates/issuable_template_selectors.js.es6 b/app/assets/javascripts/templates/issuable_template_selectors.js.es6
index 0a3890e85fe..7310b9de074 100644
--- a/app/assets/javascripts/templates/issuable_template_selectors.js.es6
+++ b/app/assets/javascripts/templates/issuable_template_selectors.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable no-new, comma-dangle, class-methods-use-this, prefer-const, no-param-reassign */
+
 ((global) => {
   class IssuableTemplateSelectors {
     constructor({ $dropdowns, editor } = {}) {
diff --git a/app/assets/javascripts/terminal/terminal.js.es6 b/app/assets/javascripts/terminal/terminal.js.es6
new file mode 100644
index 00000000000..6b9422b1816
--- /dev/null
+++ b/app/assets/javascripts/terminal/terminal.js.es6
@@ -0,0 +1,62 @@
+/* global Terminal */
+
+(() => {
+  class GLTerminal {
+
+    constructor(options) {
+      this.options = options || {};
+
+      this.options.cursorBlink = options.cursorBlink || true;
+      this.options.screenKeys = options.screenKeys || true;
+      this.container = document.querySelector(options.selector);
+
+      this.setSocketUrl();
+      this.createTerminal();
+      $(window).off('resize.terminal').on('resize.terminal', () => {
+        this.terminal.fit();
+      });
+    }
+
+    setSocketUrl() {
+      const { protocol, hostname, port } = window.location;
+      const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://';
+      const path = this.container.dataset.projectPath;
+
+      this.socketUrl = `${wsProtocol}${hostname}:${port}${path}`;
+    }
+
+    createTerminal() {
+      this.terminal = new Terminal(this.options);
+      this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']);
+      this.socket.binaryType = 'arraybuffer';
+
+      this.terminal.open(this.container);
+      this.socket.onopen = () => { this.runTerminal(); };
+      this.socket.onerror = () => { this.handleSocketFailure(); };
+    }
+
+    runTerminal() {
+      const decoder = new TextDecoder('utf-8');
+      const encoder = new TextEncoder('utf-8');
+
+      this.terminal.on('data', (data) => {
+        this.socket.send(encoder.encode(data));
+      });
+
+      this.socket.addEventListener('message', (ev) => {
+        this.terminal.write(decoder.decode(ev.data));
+      });
+
+      this.isTerminalInitialized = true;
+      this.terminal.fit();
+    }
+
+    handleSocketFailure() {
+      this.terminal.write('\r\nConnection failure');
+    }
+
+  }
+
+  window.gl = window.gl || {};
+  gl.Terminal = GLTerminal;
+})();
diff --git a/app/assets/javascripts/terminal/terminal_bundle.js.es6 b/app/assets/javascripts/terminal/terminal_bundle.js.es6
new file mode 100644
index 00000000000..33d2c1e1a17
--- /dev/null
+++ b/app/assets/javascripts/terminal/terminal_bundle.js.es6
@@ -0,0 +1,7 @@
+//= require xterm/encoding-indexes
+//= require xterm/encoding
+//= require xterm/xterm.js
+//= require xterm/fit.js
+//= require ./terminal.js
+
+$(() => new gl.Terminal({ selector: '#terminal' }));
diff --git a/app/assets/javascripts/todos.js.es6 b/app/assets/javascripts/todos.js.es6
index 213e80825b7..d8713600030 100644
--- a/app/assets/javascripts/todos.js.es6
+++ b/app/assets/javascripts/todos.js.es6
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable padded-blocks, class-methods-use-this, no-new, func-names, prefer-template, no-unneeded-ternary, object-shorthand, space-before-function-paren, comma-dangle, quote-props, consistent-return, no-else-return, semi, no-param-reassign, max-len */
+/* global UsersSelect */
+/* global Turbolinks */
+
 ((global) => {
 
   class Todos {
@@ -72,7 +75,7 @@
     allDoneClicked(e) {
       e.preventDefault();
       e.stopImmediatePropagation();
-      $target = $(e.currentTarget);
+      const $target = $(e.currentTarget);
       $target.disable();
       return $.ajax({
         type: 'POST',
diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js.es6
index 5d991542b51..2b992109a8c 100644
--- a/app/assets/javascripts/u2f/authenticate.js
+++ b/app/assets/javascripts/u2f/authenticate.js.es6
@@ -1,24 +1,33 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, prefer-arrow-callback, no-undef, no-else-return, quotes, quote-props, comma-dangle, one-var, one-var-declaration-per-line, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, prefer-arrow-callback, no-else-return, quotes, quote-props, comma-dangle, one-var, one-var-declaration-per-line, padded-blocks, max-len */
+/* global u2f */
+/* global U2FError */
+/* global U2FUtil */
+
 // Authenticate U2F (universal 2nd factor) devices for users to authenticate with.
 //
 // State Flow #1: setup -> in_progress -> authenticated -> POST to server
 // State Flow #2: setup -> in_progress -> error -> setup
 (function() {
+  const global = window.gl || (window.gl = {});
+
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
-  this.U2FAuthenticate = (function() {
-    function U2FAuthenticate(container, u2fParams) {
+  global.U2FAuthenticate = (function() {
+    function U2FAuthenticate(container, form, u2fParams, fallbackButton, fallbackUI) {
       this.container = container;
       this.renderNotSupported = bind(this.renderNotSupported, this);
       this.renderAuthenticated = bind(this.renderAuthenticated, this);
       this.renderError = bind(this.renderError, this);
       this.renderInProgress = bind(this.renderInProgress, this);
-      this.renderSetup = bind(this.renderSetup, this);
       this.renderTemplate = bind(this.renderTemplate, this);
       this.authenticate = bind(this.authenticate, this);
       this.start = bind(this.start, this);
       this.appId = u2fParams.app_id;
       this.challenge = u2fParams.challenge;
+      this.form = form;
+      this.fallbackButton = fallbackButton;
+      this.fallbackUI = fallbackUI;
+      if (this.fallbackButton) this.fallbackButton.addEventListener('click', this.switchToFallbackUI.bind(this));
       this.signRequests = u2fParams.sign_requests.map(function(request) {
         // The U2F Javascript API v1.1 requires a single challenge, with
         // _no challenges per-request_. The U2F Javascript API v1.0 requires a
@@ -37,7 +46,7 @@
 
     U2FAuthenticate.prototype.start = function() {
       if (U2FUtil.isU2FSupported()) {
-        return this.renderSetup();
+        return this.renderInProgress();
       } else {
         return this.renderNotSupported();
       }
@@ -73,11 +82,6 @@
       return this.container.html(template(params));
     };
 
-    U2FAuthenticate.prototype.renderSetup = function() {
-      this.renderTemplate('setup');
-      return this.container.find('#js-login-u2f-device').on('click', this.renderInProgress);
-    };
-
     U2FAuthenticate.prototype.renderInProgress = function() {
       this.renderTemplate('inProgress');
       return this.authenticate();
@@ -85,24 +89,32 @@
 
     U2FAuthenticate.prototype.renderError = function(error) {
       this.renderTemplate('error', {
-        error_message: error.message()
+        error_message: error.message(),
+        error_code: error.errorCode
       });
-      return this.container.find('#js-u2f-try-again').on('click', this.renderSetup);
+      return this.container.find('#js-u2f-try-again').on('click', this.renderInProgress);
     };
 
     U2FAuthenticate.prototype.renderAuthenticated = function(deviceResponse) {
       this.renderTemplate('authenticated');
-      // Prefer to do this instead of interpolating using Underscore templates
-      // because of JSON escaping issues.
-      return this.container.find("#js-device-response").val(deviceResponse);
+      const container = this.container[0];
+      container.querySelector('#js-device-response').value = deviceResponse;
+      container.querySelector(this.form).submit();
+      this.fallbackButton.classList.add('hidden');
     };
 
     U2FAuthenticate.prototype.renderNotSupported = function() {
       return this.renderTemplate('notSupported');
     };
 
+    U2FAuthenticate.prototype.switchToFallbackUI = function() {
+      this.fallbackButton.classList.add('hidden');
+      this.container[0].classList.add('hidden');
+      this.fallbackUI.classList.remove('hidden');
+    };
+
     return U2FAuthenticate;
 
   })();
 
-}).call(this);
+})();
diff --git a/app/assets/javascripts/u2f/error.js b/app/assets/javascripts/u2f/error.js
index 4c70a6e9bb6..bb9942a3aa0 100644
--- a/app/assets/javascripts/u2f/error.js
+++ b/app/assets/javascripts/u2f/error.js
@@ -1,4 +1,6 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-console, quotes, prefer-template, no-undef, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-console, quotes, prefer-template, padded-blocks, max-len */
+/* global u2f */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
@@ -7,7 +9,6 @@
       this.errorCode = errorCode;
       this.message = bind(this.message, this);
       this.httpsDisabled = window.location.protocol !== 'https:';
-      console.error("U2F Error Code: " + this.errorCode);
     }
 
     U2FError.prototype.message = function() {
diff --git a/app/assets/javascripts/u2f/register.js b/app/assets/javascripts/u2f/register.js
index 97d8993cac2..050c9bfc02e 100644
--- a/app/assets/javascripts/u2f/register.js
+++ b/app/assets/javascripts/u2f/register.js
@@ -1,4 +1,8 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-undef, no-else-return, quotes, quote-props, comma-dangle, one-var, one-var-declaration-per-line, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-else-return, quotes, quote-props, comma-dangle, one-var, one-var-declaration-per-line, padded-blocks, max-len */
+/* global u2f */
+/* global U2FError */
+/* global U2FUtil */
+
 // Register U2F (universal 2nd factor) devices for users to authenticate with.
 //
 // State Flow #1: setup -> in_progress -> registered -> POST to server
@@ -72,7 +76,8 @@
 
     U2FRegister.prototype.renderError = function(error) {
       this.renderTemplate('error', {
-        error_message: error.message()
+        error_message: error.message(),
+        error_code: error.errorCode
       });
       return this.container.find('#js-u2f-try-again').on('click', this.renderSetup);
     };
diff --git a/app/assets/javascripts/user.js.es6 b/app/assets/javascripts/user.js.es6
index 5e869e99fdb..0a2db7c05fe 100644
--- a/app/assets/javascripts/user.js.es6
+++ b/app/assets/javascripts/user.js.es6
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable class-methods-use-this, comma-dangle, arrow-parens, no-param-reassign, semi */
+/* global Cookies */
+
 ((global) => {
   global.User = class {
     constructor({ action }) {
diff --git a/app/assets/javascripts/user_tabs.js.es6 b/app/assets/javascripts/user_tabs.js.es6
index 5a625611987..b9c23b51b4d 100644
--- a/app/assets/javascripts/user_tabs.js.es6
+++ b/app/assets/javascripts/user_tabs.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable max-len, space-before-function-paren, no-underscore-dangle, array-bracket-spacing, consistent-return, comma-dangle, no-unused-vars, dot-notation, no-new, no-return-assign, camelcase, semi, no-param-reassign */
+
 /*
 UserTabs
 
diff --git a/app/assets/javascripts/username_validator.js.es6 b/app/assets/javascripts/username_validator.js.es6
index c4dde575c6e..137cefa3b8e 100644
--- a/app/assets/javascripts/username_validator.js.es6
+++ b/app/assets/javascripts/username_validator.js.es6
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable comma-dangle, consistent-return, class-methods-use-this, arrow-parens, no-param-reassign, max-len */
+
 ((global) => {
   const debounceTimeoutDuration = 1000;
   const invalidInputClass = 'gl-field-error-outline';
@@ -77,7 +78,7 @@
         this.renderState();
         return $.ajax({
           type: 'GET',
-          url: `/users/${username}/exists`,
+          url: `${gon.relative_url_root}/users/${username}/exists`,
           dataType: 'json',
           success: (res) => this.setAvailabilityState(res.exists)
         });
diff --git a/app/assets/javascripts/users/calendar.js b/app/assets/javascripts/users/calendar.js
index ba7f533c349..578be7c3590 100644
--- a/app/assets/javascripts/users/calendar.js
+++ b/app/assets/javascripts/users/calendar.js
@@ -1,4 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, camelcase, vars-on-top, semi, keyword-spacing, no-plusplus, no-undef, object-shorthand, comma-dangle, eqeqeq, no-mixed-operators, no-return-assign, newline-per-chained-call, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, no-else-return, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, camelcase, vars-on-top, semi, keyword-spacing, no-plusplus, object-shorthand, comma-dangle, eqeqeq, no-mixed-operators, no-return-assign, newline-per-chained-call, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, no-else-return, padded-blocks, max-len */
+/* global d3 */
+/* global dateFormat */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index c6e18fad832..d4b5e03aa35 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -1,4 +1,8 @@
-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, space-before-blocks, prefer-rest-params, wrap-iife, quotes, max-len, one-var-declaration-per-line, vars-on-top, prefer-arrow-callback, consistent-return, no-undef, comma-dangle, object-shorthand, no-shadow, no-unused-vars, no-plusplus, no-else-return, no-self-compare, prefer-template, no-unused-expressions, no-lonely-if, yoda, prefer-spread, no-void, camelcase, keyword-spacing, no-param-reassign, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, one-var, no-var, space-before-blocks, 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-plusplus, no-else-return, no-self-compare, prefer-template, no-unused-expressions, no-lonely-if, yoda, prefer-spread, no-void, camelcase, keyword-spacing, no-param-reassign, padded-blocks */
+/* global Vue */
+/* global Issuable */
+/* global ListUser */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
     slice = [].slice;
diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6
new file mode 100644
index 00000000000..605824fa939
--- /dev/null
+++ b/app/assets/javascripts/vue_pagination/index.js.es6
@@ -0,0 +1,148 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign, no-plusplus */
+
+((gl) => {
+  const PAGINATION_UI_BUTTON_LIMIT = 4;
+  const UI_LIMIT = 6;
+  const SPREAD = '...';
+  const PREV = 'Prev';
+  const NEXT = 'Next';
+  const FIRST = '<< First';
+  const LAST = 'Last >>';
+
+  gl.VueGlPagination = Vue.extend({
+    props: {
+
+      /**
+        This function will take the information given by the pagination component
+        And make a new Turbolinks call
+
+        Here is an example `change` method:
+
+        change(pagenum, apiScope) {
+          Turbolinks.visit(`?scope=${apiScope}&p=${pagenum}`);
+        },
+      */
+
+      change: {
+        type: Function,
+        required: true,
+      },
+
+      /**
+        pageInfo will come from the headers of the API call
+        in the `.then` clause of the VueResource API call
+        there should be a function that contructs the pageInfo for this component
+
+        This is an example:
+
+        const pageInfo = headers => ({
+          perPage: +headers['X-Per-Page'],
+          page: +headers['X-Page'],
+          total: +headers['X-Total'],
+          totalPages: +headers['X-Total-Pages'],
+          nextPage: +headers['X-Next-Page'],
+          previousPage: +headers['X-Prev-Page'],
+        });
+      */
+
+      pageInfo: {
+        type: Object,
+        required: true,
+      },
+    },
+    methods: {
+      changePage(e) {
+        let apiScope = gl.utils.getParameterByName('scope');
+
+        if (!apiScope) apiScope = 'all';
+
+        const text = e.target.innerText;
+        const { totalPages, nextPage, previousPage } = this.pageInfo;
+
+        switch (text) {
+          case SPREAD:
+            break;
+          case LAST:
+            this.change(totalPages, apiScope);
+            break;
+          case NEXT:
+            this.change(nextPage, apiScope);
+            break;
+          case PREV:
+            this.change(previousPage, apiScope);
+            break;
+          case FIRST:
+            this.change(1, apiScope);
+            break;
+          default:
+            this.change(+text, apiScope);
+            break;
+        }
+      },
+    },
+    computed: {
+      prev() {
+        return this.pageInfo.previousPage;
+      },
+      next() {
+        return this.pageInfo.nextPage;
+      },
+      getItems() {
+        const total = this.pageInfo.totalPages;
+        const page = this.pageInfo.page;
+        const items = [];
+
+        if (page > 1) items.push({ title: FIRST });
+
+        if (page > 1) {
+          items.push({ title: PREV, prev: true });
+        } else {
+          items.push({ title: PREV, disabled: true, prev: true });
+        }
+
+        if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
+
+        const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
+        const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
+
+        for (let i = start; i <= end; i++) {
+          const isActive = i === page;
+          items.push({ title: i, active: isActive, page: true });
+        }
+
+        if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
+          items.push({ title: SPREAD, separator: true, page: true });
+        }
+
+        if (page === total) {
+          items.push({ title: NEXT, disabled: true, next: true });
+        } else if (total - page >= 1) {
+          items.push({ title: NEXT, next: true });
+        }
+
+        if (total - page >= 1) items.push({ title: LAST, last: true });
+
+        return items;
+      },
+    },
+    template: `
+      <div class="gl-pagination">
+        <ul class="pagination clearfix">
+          <li v-for='item in getItems'
+            :class='{
+              page: item.page,
+              prev: item.prev,
+              next: item.next,
+              separator: item.separator,
+              active: item.active,
+              disabled: item.disabled
+            }'
+          >
+            <a @click="changePage($event)">{{item.title}}</a>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6
new file mode 100644
index 00000000000..edd01f17a97
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6
@@ -0,0 +1,42 @@
+/* global Vue, VueResource, gl */
+/*= require vue_common_component/commit */
+/*= require vue_pagination/index */
+/*= require vue-resource
+/*= require boards/vue_resource_interceptor */
+/*= require ./status.js.es6 */
+/*= require ./store.js.es6 */
+/*= require ./pipeline_url.js.es6 */
+/*= require ./stage.js.es6 */
+/*= require ./stages.js.es6 */
+/*= require ./pipeline_actions.js.es6 */
+/*= require ./time_ago.js.es6 */
+/*= require ./pipelines.js.es6 */
+
+(() => {
+  const project = document.querySelector('.pipelines');
+  const entry = document.querySelector('.vue-pipelines-index');
+  const svgs = document.querySelector('.pipeline-svgs');
+
+  Vue.use(VueResource);
+
+  if (!entry) return null;
+  return new Vue({
+    el: entry,
+    data: {
+      scope: project.dataset.url,
+      store: new gl.PipelineStore(),
+      svgs: svgs.dataset,
+    },
+    components: {
+      'vue-pipelines': gl.VuePipelines,
+    },
+    template: `
+      <vue-pipelines
+        :scope='scope'
+        :store='store'
+        :svgs='svgs'
+      >
+      </vue-pipelines>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
new file mode 100644
index 00000000000..ad5cb30cc42
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
@@ -0,0 +1,99 @@
+/* global Vue, Flash, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelineActions = Vue.extend({
+    props: ['pipeline', 'svgs'],
+    computed: {
+      actions() {
+        return this.pipeline.details.manual_actions.length > 0;
+      },
+      artifacts() {
+        return this.pipeline.details.artifacts.length > 0;
+      },
+    },
+    methods: {
+      download(name) {
+        return `Download ${name} artifacts`;
+      },
+    },
+    template: `
+      <td class="pipeline-actions hidden-xs">
+        <div class="controls pull-right">
+          <div class="btn-group inline">
+            <div class="btn-group">
+              <a
+                v-if='actions'
+                class="dropdown-toggle btn btn-default js-pipeline-dropdown-manual-actions"
+                data-toggle="dropdown"
+                title="Manual build"
+                alt="Manual Build"
+              >
+                <span v-html='svgs.iconPlay'></span>
+                <i class="fa fa-caret-down"></i>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-align-right">
+                <li v-for='action in pipeline.details.manual_actions'>
+                  <a
+                    rel="nofollow"
+                    data-method="post"
+                    :href='action.path'
+                    title="Manual build"
+                  >
+                    <span v-html='svgs.iconPlay'></span>
+                    <span title="Manual build">{{action.name}}</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="btn-group">
+              <a
+                v-if='artifacts'
+                class="dropdown-toggle btn btn-default build-artifacts js-pipeline-dropdown-download"
+                data-toggle="dropdown"
+                type="button"
+              >
+                <i class="fa fa-download"></i>
+                <i class="fa fa-caret-down"></i>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-align-right">
+                <li v-for='artifact in pipeline.details.artifacts'>
+                  <a
+                    rel="nofollow"
+                    :href='artifact.path'
+                  >
+                    <i class="fa fa-download"></i>
+                    <span>{{download(artifact.name)}}</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="cancel-retry-btns inline">
+            <a
+              v-if='pipeline.flags.retryable'
+              class="btn has-tooltip"
+              title="Retry"
+              rel="nofollow"
+              data-method="post"
+              :href='pipeline.retry_path'
+            >
+              <i class="fa fa-repeat"></i>
+            </a>
+            <a
+              v-if='pipeline.flags.cancelable'
+              class="btn btn-remove has-tooltip"
+              title="Cancel"
+              rel="nofollow"
+              data-method="post"
+              :href='pipeline.cancel_path'
+              data-original-title="Cancel"
+            >
+              <i class="fa fa-remove"></i>
+            </a>
+          </div>
+        </div>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6
new file mode 100644
index 00000000000..ae5649f0519
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6
@@ -0,0 +1,63 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelineUrl = Vue.extend({
+    props: [
+      'pipeline',
+    ],
+    computed: {
+      user() {
+        return !!this.pipeline.user;
+      },
+    },
+    template: `
+      <td>
+        <a :href='pipeline.path'>
+          <span class="pipeline-id">#{{pipeline.id}}</span>
+        </a>
+        <span>by</span>
+        <a
+          v-if='user'
+          :href='pipeline.user.web_url'
+        >
+          <img
+            v-if='user'
+            class="avatar has-tooltip s20 "
+            :title='pipeline.user.name'
+            data-container="body"
+            :src='pipeline.user.avatar_url'
+          >
+        </a>
+        <span
+          v-if='!user'
+          class="api monospace"
+        >
+          API
+        </span>
+        <span
+          v-if='pipeline.flags.latest'
+          class="label label-success has-tooltip"
+          title="Latest pipeline for this branch"
+          data-original-title="Latest pipeline for this branch"
+        >
+          latest
+        </span>
+        <span
+          v-if='pipeline.flags.yaml_errors'
+          class="label label-danger has-tooltip"
+          :title='pipeline.yaml_errors'
+          :data-original-title='pipeline.yaml_errors'
+        >
+          yaml invalid
+        </span>
+        <span
+          v-if='pipeline.flags.stuck'
+          class="label label-warning"
+        >
+          stuck
+        </span>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
new file mode 100644
index 00000000000..b2ed05503c9
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
@@ -0,0 +1,131 @@
+/* global Vue, Turbolinks, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelines = Vue.extend({
+    components: {
+      runningPipeline: gl.VueRunningPipeline,
+      pipelineActions: gl.VuePipelineActions,
+      stages: gl.VueStages,
+      commit: gl.CommitComponent,
+      pipelineUrl: gl.VuePipelineUrl,
+      pipelineHead: gl.VuePipelineHead,
+      glPagination: gl.VueGlPagination,
+      statusScope: gl.VueStatusScope,
+      timeAgo: gl.VueTimeAgo,
+    },
+    data() {
+      return {
+        pipelines: [],
+        timeLoopInterval: '',
+        intervalId: '',
+        apiScope: 'all',
+        pageInfo: {},
+        pagenum: 1,
+        count: { all: 0, running_or_pending: 0 },
+        pageRequest: false,
+      };
+    },
+    props: ['scope', 'store', 'svgs'],
+    created() {
+      const pagenum = gl.utils.getParameterByName('p');
+      const scope = gl.utils.getParameterByName('scope');
+      if (pagenum) this.pagenum = pagenum;
+      if (scope) this.apiScope = scope;
+      this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
+    },
+    methods: {
+      change(pagenum, apiScope) {
+        Turbolinks.visit(`?scope=${apiScope}&p=${pagenum}`);
+      },
+      author(pipeline) {
+        if (!pipeline.commit) return { avatar_url: '', web_url: '', username: '' };
+        if (pipeline.commit.author) return pipeline.commit.author;
+        return {
+          avatar_url: pipeline.commit.author_gravatar_url,
+          web_url: `mailto:${pipeline.commit.author_email}`,
+          username: pipeline.commit.author_name,
+        };
+      },
+      ref(pipeline) {
+        const { ref } = pipeline;
+        return { name: ref.name, tag: ref.tag, ref_url: ref.path };
+      },
+      commitTitle(pipeline) {
+        return pipeline.commit ? pipeline.commit.title : '';
+      },
+      commitSha(pipeline) {
+        return pipeline.commit ? pipeline.commit.short_id : '';
+      },
+      commitUrl(pipeline) {
+        return pipeline.commit ? pipeline.commit.commit_path : '';
+      },
+      match(string) {
+        return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase());
+      },
+    },
+    template: `
+      <div>
+        <div class="pipelines realtime-loading" v-if='pipelines.length < 1'>
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+        <div class="table-holder" v-if='pipelines.length'>
+          <table class="table ci-table">
+            <thead>
+              <tr>
+                <th class="pipeline-status">Status</th>
+                <th class="pipeline-info">Pipeline</th>
+                <th class="pipeline-commit">Commit</th>
+                <th class="pipeline-stages">Stages</th>
+                <th class="pipeline-date"></th>
+                <th class="pipeline-actions hidden-xs"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="commit" v-for='pipeline in pipelines'>
+                <status-scope
+                  :pipeline='pipeline'
+                  :match='match'
+                  :svgs='svgs'
+                >
+                </status-scope>
+                <pipeline-url :pipeline='pipeline'></pipeline-url>
+                <td>
+                  <commit
+                    :commit-icon-svg='svgs.commitIconSvg'
+                    :author='author(pipeline)'
+                    :tag="pipeline.ref.tag"
+                    :title='commitTitle(pipeline)'
+                    :commit-ref='ref(pipeline)'
+                    :short-sha='commitSha(pipeline)'
+                    :commit-url='commitUrl(pipeline)'
+                  >
+                  </commit>
+                </td>
+                <stages
+                  :pipeline='pipeline'
+                  :svgs='svgs'
+                  :match='match'
+                >
+                </stages>
+                <time-ago :pipeline='pipeline' :svgs='svgs'></time-ago>
+                <pipeline-actions :pipeline='pipeline' :svgs='svgs'></pipeline-actions>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="pipelines realtime-loading" v-if='pageRequest'>
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+        <gl-pagination
+          v-if='pageInfo.total > pageInfo.perPage'
+          :pagenum='pagenum'
+          :change='change'
+          :count='count.all'
+          :pageInfo='pageInfo'
+        >
+        </gl-pagination>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
new file mode 100644
index 00000000000..f075a995846
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -0,0 +1,69 @@
+/* global Vue, Flash, gl */
+/* eslint-disable no-param-reassign, no-bitwise */
+
+((gl) => {
+  gl.VueStage = Vue.extend({
+    data() {
+      return {
+        count: 0,
+        builds: '',
+        spinner: '<span class="fa fa-spinner fa-spin"></span>',
+      };
+    },
+    props: ['stage', 'svgs', 'match'],
+    methods: {
+      fetchBuilds() {
+        if (this.count > 0) return null;
+        return this.$http.get(this.stage.dropdown_path)
+          .then((response) => {
+            this.count += 1;
+            this.builds = JSON.parse(response.body).html;
+          }, () => {
+            const flash = new Flash('Something went wrong on our end.');
+            return flash;
+          });
+      },
+    },
+    computed: {
+      buildsOrSpinner() {
+        return this.builds ? this.builds : this.spinner;
+      },
+      dropdownClass() {
+        if (this.builds) return 'js-builds-dropdown-container';
+        return 'js-builds-dropdown-loading builds-dropdown-loading';
+      },
+      buildStatus() {
+        return `Build: ${this.stage.status.label}`;
+      },
+      tooltip() {
+        return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
+      },
+      svg() {
+        const icon = this.stage.status.icon;
+        const stageIcon = icon.replace(/icon/i, 'stage_icon');
+        return this.svgs[this.match(stageIcon)];
+      },
+      triggerButtonClass() {
+        return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
+      },
+    },
+    template: `
+      <div>
+        <button
+          @click='fetchBuilds'
+          :class="triggerButtonClass"
+          :title='stage.title'
+          data-placement="top"
+          data-toggle="dropdown"
+          type="button">
+          <span v-html="svg"></span>
+          <i class="fa fa-caret-down "></i>
+        </button>
+        <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
+          <div class="arrow-up"></div>
+          <div :class="dropdownClass" class="js-builds-dropdown-list scrollable-menu" v-html="buildsOrSpinner"></div>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/stages.js.es6 b/app/assets/javascripts/vue_pipelines_index/stages.js.es6
new file mode 100644
index 00000000000..cb176b3f0c6
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/stages.js.es6
@@ -0,0 +1,21 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueStages = Vue.extend({
+    components: {
+      'vue-stage': gl.VueStage,
+    },
+    props: ['pipeline', 'svgs', 'match'],
+    template: `
+      <td class="stage-cell">
+        <div
+          class="stage-container dropdown js-mini-pipeline-graph"
+          v-for='stage in pipeline.details.stages'
+        >
+          <vue-stage :stage='stage' :svgs='svgs' :match='match'></vue-stage>
+        </div>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6
new file mode 100644
index 00000000000..05175082704
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6
@@ -0,0 +1,34 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueStatusScope = Vue.extend({
+    props: [
+      'pipeline', 'svgs', 'match',
+    ],
+    computed: {
+      cssClasses() {
+        const cssObject = { 'ci-status': true };
+        cssObject[`ci-${this.pipeline.details.status.group}`] = true;
+        return cssObject;
+      },
+      svg() {
+        return this.svgs[this.match(this.pipeline.details.status.icon)];
+      },
+      detailsPath() {
+        const { status } = this.pipeline.details;
+        return status.has_details ? status.details_path : false;
+      },
+    },
+    template: `
+      <td class="commit-link">
+        <a
+          :class='cssClasses'
+          :href='detailsPath'
+          v-html='svg + pipeline.details.status.text'
+        >
+        </a>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6
new file mode 100644
index 00000000000..1982142853a
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6
@@ -0,0 +1,69 @@
+/* global gl, Flash */
+/* eslint-disable no-param-reassign, no-underscore-dangle */
+/*= require vue_realtime_listener/index.js */
+
+((gl) => {
+  const pageValues = (headers) => {
+    const normalizedHeaders = {};
+
+    Object.keys(headers).forEach((e) => {
+      normalizedHeaders[e.toUpperCase()] = headers[e];
+    });
+
+    const paginationInfo = {
+      perPage: +normalizedHeaders['X-PER-PAGE'],
+      page: +normalizedHeaders['X-PAGE'],
+      total: +normalizedHeaders['X-TOTAL'],
+      totalPages: +normalizedHeaders['X-TOTAL-PAGES'],
+      nextPage: +normalizedHeaders['X-NEXT-PAGE'],
+      previousPage: +normalizedHeaders['X-PREV-PAGE'],
+    };
+
+    return paginationInfo;
+  };
+
+  gl.PipelineStore = class {
+    fetchDataLoop(Vue, pageNum, url, apiScope) {
+      const updatePipelineNums = (count) => {
+        const { all } = count;
+        const running = count.running_or_pending;
+        document.querySelector('.js-totalbuilds-count').innerHTML = all;
+        document.querySelector('.js-running-count').innerHTML = running;
+      };
+
+      const goFetch = () =>
+        this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
+          .then((response) => {
+            const pageInfo = pageValues(response.headers);
+            this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
+
+            const res = JSON.parse(response.body);
+            this.count = Object.assign({}, this.count, res.count);
+            this.pipelines = Object.assign([], this.pipelines, res.pipelines);
+
+            updatePipelineNums(this.count);
+            this.pageRequest = false;
+          }, () => {
+            this.pageRequest = false;
+            return new Flash('Something went wrong on our end.');
+          });
+
+      goFetch();
+
+      const startTimeLoops = () => {
+        this.timeLoopInterval = setInterval(() => {
+          this.$children
+            .filter(e => e.$options._componentTag === 'time-ago')
+            .forEach(e => e.changeTime());
+        }, 10000);
+      };
+
+      startTimeLoops();
+
+      const removeIntervals = () => clearInterval(this.timeLoopInterval);
+      const startIntervals = () => startTimeLoops();
+
+      gl.VueRealtimeListener(removeIntervals, startIntervals);
+    }
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
new file mode 100644
index 00000000000..655110feba1
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
@@ -0,0 +1,73 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueTimeAgo = Vue.extend({
+    data() {
+      return {
+        currentTime: new Date(),
+      };
+    },
+    props: ['pipeline', 'svgs'],
+    computed: {
+      timeAgo() {
+        return gl.utils.getTimeago();
+      },
+      localTimeFinished() {
+        return gl.utils.formatDate(this.pipeline.details.finished_at);
+      },
+      timeStopped() {
+        const changeTime = this.currentTime;
+        const options = {
+          weekday: 'long',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+        };
+        options.timeZoneName = 'short';
+        const finished = this.pipeline.details.finished_at;
+        if (!finished && changeTime) return false;
+        return ({ words: this.timeAgo.format(finished) });
+      },
+      duration() {
+        const { duration } = this.pipeline.details;
+        const date = new Date(duration * 1000);
+
+        let hh = date.getUTCHours();
+        let mm = date.getUTCMinutes();
+        let ss = date.getSeconds();
+
+        if (hh < 10) hh = `0${hh}`;
+        if (mm < 10) mm = `0${mm}`;
+        if (ss < 10) ss = `0${ss}`;
+
+        if (duration !== null) return `${hh}:${mm}:${ss}`;
+        return false;
+      },
+    },
+    methods: {
+      changeTime() {
+        this.currentTime = new Date();
+      },
+    },
+    template: `
+      <td>
+        <p class="duration" v-if='duration'>
+          <span v-html='svgs.iconTimer'></span>
+          {{duration}}
+        </p>
+        <p class="finished-at" v-if='timeStopped'>
+          <i class="fa fa-calendar"></i>
+          <time
+            data-toggle="tooltip"
+            data-placement="top"
+            data-container="body"
+            :data-original-title='localTimeFinished'
+          >
+            {{timeStopped.words}}
+          </time>
+        </p>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_realtime_listener/index.js.es6 b/app/assets/javascripts/vue_realtime_listener/index.js.es6
new file mode 100644
index 00000000000..23cac1466d2
--- /dev/null
+++ b/app/assets/javascripts/vue_realtime_listener/index.js.es6
@@ -0,0 +1,18 @@
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueRealtimeListener = (removeIntervals, startIntervals) => {
+    const removeAll = () => {
+      removeIntervals();
+      window.removeEventListener('beforeunload', removeIntervals);
+      window.removeEventListener('focus', startIntervals);
+      window.removeEventListener('blur', removeIntervals);
+      document.removeEventListener('page:fetch', removeAll);
+    };
+
+    window.addEventListener('beforeunload', removeIntervals);
+    window.addEventListener('focus', startIntervals);
+    window.addEventListener('blur', removeIntervals);
+    document.addEventListener('page:fetch', removeAll);
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index 82eb761442a..e09b59dd5aa 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -1,4 +1,7 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, consistent-return, no-undef, camelcase, comma-dangle, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, consistent-return, camelcase, comma-dangle, padded-blocks, max-len */
+/* global Dropzone */
+/* global Mousetrap */
+
 // Zen Mode (full screen) textarea
 //
 /*= provides zen_mode:enter */
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index c82a9a2b9e3..3cf49f4ff1b 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -9,6 +9,7 @@
 @import "framework/asciidoctor.scss";
 @import "framework/blocks.scss";
 @import "framework/buttons.scss";
+@import "framework/badges.scss";
 @import "framework/calendar.scss";
 @import "framework/callout.scss";
 @import "framework/common.scss";
@@ -44,3 +45,6 @@
 @import "framework/awards.scss";
 @import "framework/images.scss";
 @import "framework/broadcast-messages";
+@import "framework/emojis.scss";
+@import "framework/icons.scss";
+@import "framework/snippets.scss";
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index f1d36efb3de..8d38fc78a19 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -50,3 +50,77 @@
 .pulse {
   @include webkit-prefix(animation-name, pulse);
 }
+
+/*
+* General hover animations
+*/
+
+
+// Sass multiple transitions mixin | https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
+// Usage:   @include transition(width, height 0.3s ease-in-out);
+// Output:  -webkit-transition(width 0.2s, height 0.3s ease-in-out);
+//          transition(width 0.2s, height 0.3s ease-in-out);
+//
+// Pass in any number of transitions
+@mixin transition($transitions...) {
+  $unfoldedTransitions: ();
+  @each $transition in $transitions {
+    $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
+  }
+
+  transition: $unfoldedTransitions;
+}
+
+@function unfoldTransition ($transition) {
+  // Default values
+  $property: all;
+  $duration: $general-hover-transition-duration;
+  $easing: $general-hover-transition-curve; // Browser default is ease, which is what we want
+  $delay: null; // Browser default is 0, which is what we want
+  $defaultProperties: ($property, $duration, $easing, $delay);
+
+  // Grab transition properties if they exist
+  $unfoldedTransition: ();
+  @for $i from 1 through length($defaultProperties) {
+    $p: null;
+    @if $i <= length($transition) {
+      $p: nth($transition, $i);
+    } @else {
+      $p: nth($defaultProperties, $i);
+    }
+    $unfoldedTransition: append($unfoldedTransition, $p);
+  }
+
+  @return $unfoldedTransition;
+}
+
+.btn,
+.side-nav-toggle {
+  @include transition(background-color, border-color, color, box-shadow);
+}
+
+.dropdown-menu-toggle,
+.avatar-circle,
+.header-user-avatar {
+  @include transition(border-color);
+}
+
+.note-action-button .link-highlight,
+.toolbar-btn,
+.dropdown-toggle-caret,
+.fa:not(.fa-bell) {
+  @include transition(color);
+}
+
+a {
+  @include transition(background-color, color, border);
+}
+
+.tree-table td,
+.well-list > li {
+  @include transition(background-color, border-color);
+}
+
+.stage-nav-item {
+  @include transition(background-color, box-shadow);
+}
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 000e591e09c..8392b98f0a7 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -52,6 +52,10 @@
     border-radius: 0;
     border: none;
   }
+
+  &:not([href]):hover {
+    border-color: rgba($avatar-border, .2);
+  }
 }
 
 .identicon {
@@ -64,7 +68,7 @@
   &.s32 { font-size: 20px; line-height: 30px; }
   &.s40 { font-size: 16px; line-height: 38px; }
   &.s60 { font-size: 32px; line-height: 58px; }
-  &.s70 { font-size: 34px; line-height: 68px; }
+  &.s70 { font-size: 34px; line-height: 70px; }
   &.s90 { font-size: 36px; line-height: 88px; }
   &.s110 { font-size: 40px; line-height: 108px; font-weight: 300; }
   &.s140 { font-size: 72px; line-height: 138px; }
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index dece5c3202b..49907417e26 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -12,8 +12,8 @@
   z-index: 9;
   width: 300px;
   font-size: 14px;
-  background-color: $award-emoji-menu-bg;
-  border: 1px solid $award-emoji-menu-border;
+  background-color: $white-light;
+  border: 1px solid $border-white-light;
   border-radius: $border-radius-base;
   box-shadow: 0 6px 12px $award-emoji-menu-shadow;
   pointer-events: none;
@@ -97,8 +97,20 @@
   padding: 5px 6px;
   outline: 0;
 
-  &:hover,
+  &.disabled {
+    cursor: default;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $white-light;
+      border-color: $border-color;
+      box-shadow: none;
+    }
+  }
+
   &.active,
+  &:hover,
   &:active {
     background-color: $row-hover;
     border-color: $row-hover-border;
@@ -135,7 +147,7 @@
   }
 
   .award-control-icon {
-    color: $award-emoji-new-btn-icon-color;
+    color: $border-gray-normal;
     margin-top: 1px;
   }
 }
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
new file mode 100644
index 00000000000..47a8f44c709
--- /dev/null
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -0,0 +1,6 @@
+.badge {
+  font-weight: normal;
+  background-color: $badge-bg;
+  color: $badge-color;
+  vertical-align: baseline;
+}
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 95c02499271..407c800feb7 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -1,15 +1,15 @@
 .centered-light-block {
   text-align: center;
-  color: $gl-gray;
+  color: $gl-text-color;
   margin: 20px;
 }
 
 .nothing-here-block {
   text-align: center;
   padding: 20px;
-  color: $gl-gray;
+  color: $gl-text-color;
   font-weight: normal;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 36px;
 
   &.diff-collapsed {
@@ -24,12 +24,12 @@
 .row-content-block {
   margin-top: 0;
   margin-bottom: -$gl-padding;
-  background-color: $background-color;
+  background-color: $gray-light;
   padding: $gl-padding;
   margin-bottom: 0;
   border-top: 1px solid $white-dark;
   border-bottom: 1px solid $white-dark;
-  color: $gl-gray;
+  color: $gl-text-color;
 
   &.oneline-block {
     line-height: 42px;
@@ -118,7 +118,7 @@
 
 .cover-block {
   text-align: center;
-  background: $background-color;
+  background: $gray-light;
   padding-top: 44px;
   position: relative;
 
@@ -135,11 +135,11 @@
   }
 
   .cover-title {
-    color: $gl-header-color;
+    color: $gl-text-color;
     font-size: 23px;
 
     h1 {
-      color: $gl-gray-dark;
+      color: $gl-text-color;
       margin-bottom: 6px;
       font-size: 23px;
     }
@@ -153,7 +153,7 @@
 
     p {
       padding: 0 $gl-padding;
-      color: $gl-text-color-dark;
+      color: $gl-text-color;
     }
   }
 
@@ -211,7 +211,7 @@
       display: inline;
       font-weight: normal;
       font-size: 24px;
-      color: $gl-title-color;
+      color: $gl-text-color;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 1c7b2f4df7c..e04a87a7327 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -88,11 +88,11 @@
 }
 
 @mixin btn-gray {
-  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark);
+  @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-white-dark, $gl-text-color);
+  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color);
 }
 
 @mixin btn-with-margin {
@@ -230,12 +230,19 @@
   }
 }
 
+.btn-terminal {
+  svg {
+    height: 14px;
+    width: 18px;
+  }
+}
+
 .btn-lg {
   padding: 12px 20px;
 }
 
 .btn-transparent {
-  color: $btn-transparent-color;
+  color: $gl-text-color-secondary;
   background-color: transparent;
   border: 0;
 
@@ -289,7 +296,7 @@
   .active {
     box-shadow: $gl-btn-active-background;
 
-    border: 1px solid $border-white-dark !important;
+    border: 1px solid $border-gray-dark !important;
     background-color: $btn-active-gray-light !important;
   }
 }
@@ -309,8 +316,8 @@
   text-align: left;
   padding: 6px 16px;
   border-color: $border-color;
-  color: $btn-placeholder-gray;
-  background-color: $background-color;
+  color: $gray-darkest;
+  background-color: $gray-light;
 
   &:hover,
   &:active,
@@ -318,8 +325,8 @@
     cursor: text;
     box-shadow: none;
     border-color: $border-color;
-    color: $btn-placeholder-gray;
-    background-color: $background-color;
+    color: $gray-darkest;
+    background-color: $gray-light;
   }
 }
 
@@ -331,7 +338,7 @@
   margin-left: 10px;
 
   i {
-    color: $gl-icon-color;
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -344,8 +351,8 @@
 }
 
 .btn-static {
-  background-color: $background-color !important;
-  border: 1px solid $border-gray-light;
+  background-color: $gray-light !important;
+  border: 1px solid $border-gray-normal;
   cursor: default;
 
   &:active {
diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss
index 2a100980aca..e0e46dd73af 100644
--- a/app/assets/stylesheets/framework/callout.scss
+++ b/app/assets/stylesheets/framework/callout.scss
@@ -11,7 +11,7 @@
   padding: $gl-padding;
   border-left: 3px solid $border-color;
   color: $text-color;
-  background: $background-color;
+  background: $gray-light;
 }
 
 .bs-callout h4 {
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 251e43d2edd..0ce94a26a7f 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -26,6 +26,7 @@
 .append-bottom-default { margin-bottom: $gl-padding; }
 .inline { display: inline-block; }
 .center { text-align: center; }
+.vertical-align-middle { vertical-align: middle; }
 
 .underlined-link { text-decoration: underline; }
 .hint { font-style: italic; color: $hint-color; }
@@ -57,16 +58,33 @@ pre {
     border-radius: 0;
     color: $well-pre-color;
   }
+
+  &.wrap {
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
 }
 
 hr {
   margin: $gl-padding 0;
+  border-top: 1px solid darken($gray-normal, 8%);
 }
 
 .str-truncated {
   @include str-truncated;
 }
 
+.block-truncated {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  > div,
+  .str-truncated {
+    display: inline;
+  }
+}
+
 .item-title { font-weight: 600; }
 
 /** FLASH message **/
@@ -394,7 +412,7 @@ table {
     padding: 0 10px;
     clip: auto;
     text-decoration: none;
-    color: $gl-title-color;
+    color: $gl-text-color;
     background: $gray-light;
     z-index: 1;
   }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index d5914b900e2..755eddefa42 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -10,7 +10,7 @@
 
 @mixin chevron-active {
   .fa-chevron-down {
-    color: $dropdown-toggle-hover-icon-color;
+    color: $gray-darkest;
   }
 }
 
@@ -28,14 +28,14 @@
   .dropdown-toggle,
   .dropdown-menu-toggle {
     @include chevron-active;
-    border-color: $dropdown-toggle-hover-border-color;
+    border-color: $gray-darkest;
   }
 }
 
 .dropdown-toggle {
   padding: 6px 8px 6px 10px;
-  background-color: $dropdown-toggle-bg;
-  color: $dropdown-toggle-color;
+  background-color: $white-light;
+  color: $gl-text-color;
   font-size: 14px;
   text-align: left;
   border: 1px solid $border-color;
@@ -73,7 +73,7 @@
   }
 
   .fa {
-    color: $dropdown-toggle-icon-color;
+    color: $gray-darkest;
   }
 
   .fa-chevron-down {
@@ -85,7 +85,7 @@
 
   &:hover {
     @include chevron-active;
-    border-color: $dropdown-toggle-hover-border-color;
+    border-color: $gray-darkest;
   }
 
   &:focus:active {
@@ -98,7 +98,7 @@
   @extend .dropdown-toggle;
   padding-right: 20px;
   position: relative;
-  width: 160px;
+  width: 163px;
   text-overflow: ellipsis;
   overflow: hidden;
 
@@ -131,7 +131,7 @@
   font-size: 14px;
   font-weight: normal;
   padding: 8px 0;
-  background-color: $dropdown-bg;
+  background-color: $white-light;
   border: 1px solid $dropdown-border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
@@ -188,7 +188,6 @@
     &.is-focused {
       background-color: $dropdown-link-hover-bg;
       text-decoration: none;
-      outline: 0;
     }
 
     &.dropdown-menu-empty-link {
@@ -202,7 +201,7 @@
     }
 
     .icon-play {
-      fill: $table-text-gray;
+      fill: $gl-text-color-secondary;
       margin-right: 6px;
       height: 12px;
       width: 11px;
@@ -210,7 +209,7 @@
   }
 
   .dropdown-header {
-    color: $dropdown-header-color;
+    color: $gl-text-color-secondary;
     font-size: 13px;
     line-height: 22px;
     padding: 0 10px;
@@ -223,7 +222,7 @@
   .unclickable {
     cursor: not-allowed;
     padding: 5px 8px;
-    color: $dropdown-header-color;
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -593,7 +592,7 @@
     }
 
     .ui-datepicker-title {
-      color: $gl-gray;
+      color: $gl-text-color;
       font-size: 14px;
       line-height: 1;
       font-weight: normal;
@@ -602,30 +601,30 @@
 
   th {
     padding: 2px 0;
-    color: $calendar-header-color;
+    color: $note-disabled-comment-color;
     font-weight: normal;
     text-transform: lowercase;
     border-top: 1px solid $calendar-border-color;
   }
 
   .ui-datepicker-unselectable {
-    background-color: $calendar-unselectable-bg;
+    background-color: $gray-light;
   }
 }
 
 .dropdown-menu-inner-title {
   display: block;
-  color: $gl-title-color;
+  color: $gl-text-color;
   font-weight: 600;
 }
 
 .dropdown-menu-inner-content {
   display: block;
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
 }
 
 .dropdown-toggle-text {
   &.is-default {
-    color: $gl-placeholder-color;
+    color: $gl-text-color-secondary;
   }
 }
diff --git a/app/assets/stylesheets/pages/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index f17797b2381..7158de65143 100644
--- a/app/assets/stylesheets/pages/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -1,4 +1,4 @@
-.emoji-0023-20E3 { background-position: 0 0px; }
+.emoji-0023-20E3 { background-position: 0 0; }
 .emoji-002A-20E3 { background-position: -20px 0; }
 .emoji-0030-20E3 { background-position: 0 -20px; }
 .emoji-0031-20E3 { background-position: -20px -20px; }
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index ab0b81f77f7..c51912b4ac4 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -19,7 +19,7 @@
 
   .file-title {
     position: relative;
-    background-color: $background-color;
+    background-color: $gray-light;
     border-bottom: 1px solid $border-color;
     margin: 0;
     text-align: left;
@@ -182,3 +182,52 @@ span.idiff {
     border-bottom-right-radius: 2px;
   }
 }
+
+.file-stats {
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 10px 0;
+
+    li {
+      padding: 3px 0;
+      line-height: 20px;
+    }
+  }
+
+  .new-file {
+    a {
+      color: $gl-text-green;
+    }
+  }
+
+  .renamed-file {
+    a {
+      color: $gl-text-orange;
+    }
+  }
+
+  .deleted-file {
+    a {
+      color: $gl-text-red;
+    }
+  }
+
+  .edit-file {
+    a {
+      color: $gl-text-color;
+    }
+  }
+
+  a {
+    text-decoration: none;
+
+    .new-file {
+      color: $notify-new-file;
+    }
+
+    .deleted-file {
+      color: $notify-deleted-file;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 19827943385..fee38b05023 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -23,3 +23,118 @@
   }
 }
 
+.filtered-search-container {
+  display: -webkit-flex;
+  display: flex;
+}
+
+.filtered-search-input-container {
+  display: -webkit-flex;
+  display: flex;
+  position: relative;
+  width: 100%;
+
+  .form-control {
+    padding-left: 25px;
+    padding-right: 25px;
+
+    &:focus ~ .fa-filter {
+      color: $common-gray-dark;
+    }
+  }
+
+  .fa-filter {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: $gray-darkest;
+  }
+
+  .fa-times {
+    right: 10px;
+    color: $gray-darkest;
+  }
+
+  .clear-search {
+    width: 35px;
+    background-color: transparent;
+    border: none;
+    position: absolute;
+    right: 0;
+    height: 100%;
+    outline: none;
+
+    &:hover .fa-times {
+      color: $common-gray-dark;
+    }
+  }
+}
+
+.dropdown-menu .filter-dropdown-item {
+  padding: 0;
+}
+
+.filter-dropdown {
+  max-height: 215px;
+  overflow-x: scroll;
+}
+
+.filter-dropdown-item {
+  .btn {
+    border: none;
+    width: 100%;
+    text-align: left;
+    padding: 8px 16px;
+    text-overflow: ellipsis;
+    overflow-y: hidden;
+    border-radius: 0;
+
+    .fa {
+      width: 15px;
+    }
+
+    .dropdown-label-box {
+      border-color: $white-light;
+      border-style: solid;
+      border-width: 1px;
+      width: 17px;
+      height: 17px;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $dropdown-hover-color;
+      color: $white-light;
+      text-decoration: none;
+
+      .avatar {
+        border-color: $white-light;
+      }
+    }
+  }
+
+  .dropdown-light-content {
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .dropdown-user {
+    display: -webkit-flex;
+    display: flex;
+  }
+
+  .dropdown-user-details {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+.hint-dropdown {
+  width: 250px;
+}
+
+.filter-dropdown-loading {
+  padding: 8px 16px;
+}
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 25a2b38baaa..25d6fbe465a 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -22,7 +22,7 @@ input[type='text'].danger {
   margin-top: 0;
   margin-bottom: -$gl-padding;
   padding: $gl-padding;
-  background-color: $background-color;
+  background-color: $gray-light;
   border-top: 1px solid $border-color;
 }
 
@@ -96,6 +96,10 @@ label {
     code {
       line-height: 1.8;
     }
+
+    img {
+      margin-right: $gl-padding;
+    }
   }
 
   @media(max-width: $screen-xs-max) {
@@ -149,7 +153,7 @@ label {
 }
 
 .form-control::-webkit-input-placeholder {
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
 }
 
 .input-group {
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 5cd242af91d..d6566dc4ec9 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -80,29 +80,32 @@
         }
       }
 
+      .about-gitlab {
+        color: $color-light;
+      }
     }
   }
 }
 
-$theme-charcoal: #3d454d;
-$theme-charcoal-light: #485157;
-$theme-charcoal-dark: #383f45;
-$theme-charcoal-text: #b9bbbe;
+$theme-charcoal-light: #b9bbbe;
+$theme-charcoal: #485157;
+$theme-charcoal-dark: #3d454d;
+$theme-charcoal-darker: #383f45;
 
 $theme-blue-light: #becde9;
 $theme-blue: #2980b9;
 $theme-blue-dark: #1970a9;
 $theme-blue-darker: #096099;
 
-$theme-graphite-lighter: #ccc;
-$theme-graphite-light: #777;
-$theme-graphite: #666;
-$theme-graphite-dark: #555;
+$theme-graphite-light: #ccc;
+$theme-graphite: #777;
+$theme-graphite-dark: #666;
+$theme-graphite-darker: #555;
 
-$theme-gray-light: #979797;
-$theme-gray: #373737;
-$theme-gray-dark: #272727;
-$theme-gray-darker: #222;
+$theme-black-light: #979797;
+$theme-black: #373737;
+$theme-black-dark: #272727;
+$theme-black-darker: #222;
 
 $theme-green-light: #adc;
 $theme-green: #019875;
@@ -120,15 +123,15 @@ body {
   }
 
   &.ui_charcoal {
-    @include gitlab-theme($theme-charcoal-text, $theme-charcoal-light, $theme-charcoal, $theme-charcoal-dark);
+    @include gitlab-theme($theme-charcoal-light, $theme-charcoal, $theme-charcoal-dark, $theme-charcoal-darker);
   }
 
   &.ui_graphite {
-    @include gitlab-theme($theme-graphite-lighter, $theme-graphite-light, $theme-graphite, $theme-graphite-dark);
+    @include gitlab-theme($theme-graphite-light, $theme-graphite, $theme-graphite-dark, $theme-graphite-darker);
   }
 
-  &.ui_gray {
-    @include gitlab-theme($theme-gray-light, $theme-gray, $theme-gray-dark, $theme-gray-darker);
+  &.ui_black {
+    @include gitlab-theme($theme-black-light, $theme-black, $theme-black-dark, $theme-black-darker);
   }
 
   &.ui_green {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index cc2286038c0..24a1ce2b84d 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -9,7 +9,7 @@ header {
   &.navbar-empty {
     height: $header-height;
     background: $white-light;
-    border-bottom: 1px solid $btn-gray-hover;
+    border-bottom: 1px solid $white-normal;
 
     .center-logo {
       margin: 8px 0;
@@ -27,7 +27,7 @@ header {
     z-index: 100;
     margin-bottom: 0;
     height: $header-height;
-    background-color: $background-color;
+    background-color: $gray-light;
     border: none;
     border-bottom: 1px solid $border-color;
 
@@ -45,7 +45,7 @@ header {
       padding: 0;
 
       .nav > li > a {
-        color: $gl-icon-color;
+        color: $gl-text-color-secondary;
         font-size: 18px;
         padding: 0;
         margin: ($header-height - 28) / 2 0;
@@ -57,13 +57,21 @@ header {
 
         &.header-user-dropdown-toggle {
           margin-left: 14px;
+
+          &:hover,
+          &:focus,
+          &:active {
+            .header-user-avatar {
+              border-color: rgba($avatar-border, .2);
+            }
+          }
         }
 
         &:hover,
         &:focus,
         &:active {
-          background-color: $background-color;
-          color: darken($gl-icon-color, 30%);
+          background-color: $gray-light;
+          color: darken($gl-text-color-secondary, 30%);
 
           .todos-pending-count {
             background: darken($todo-alert-blue, 10%);
@@ -84,11 +92,11 @@ header {
         padding: 6px 10px;
 
         &:hover {
-          background-color: $btn-gray-hover;
+          background-color: $white-normal;
         }
 
         &.active {
-          color: $gl-icon-color;
+          color: $gl-text-color-secondary;
         }
       }
     }
@@ -100,10 +108,11 @@ header {
       font-size: 18px;
       padding: 6px 10px;
       border: none;
-      background-color: $background-color;
+      background-color: $gray-light;
 
       &:hover {
-        background-color: $btn-gray-hover;
+        background-color: $white-normal;
+        color: $gl-header-nav-hover-color;
       }
     }
   }
@@ -180,6 +189,7 @@ header {
 
         &:hover {
           text-decoration: underline;
+          color: $gl-header-nav-hover-color;
         }
       }
 
@@ -198,7 +208,7 @@ header {
         cursor: pointer;
 
         &:hover {
-          color: darken($color: $gl-text-color, $amount: 30%);
+          color: $gl-header-nav-hover-color;
         }
       }
 
@@ -271,4 +281,5 @@ header {
   float: left;
   margin-right: 5px;
   border-radius: 50%;
+  border: 1px solid $avatar-border;
 }
diff --git a/app/assets/stylesheets/pages/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 226bd2ead31..dccf5177e35 100644
--- a/app/assets/stylesheets/pages/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -34,10 +34,10 @@
 .ci-status-icon-canceled,
 .ci-status-icon-disabled,
 .ci-status-icon-not-found {
-  color: $gl-gray;
+  color: $gl-text-color;
 
   svg {
-    fill: $gl-gray;
+    fill: $gl-text-color;
   }
 }
 
@@ -49,3 +49,11 @@
     fill: $gray-darkest;
   }
 }
+
+.ci-status-icon-manual {
+  color: $gl-text-color;
+
+  svg {
+    fill: $gl-text-color;
+  }
+}
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 878f44116ba..09a569ad415 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -4,7 +4,7 @@
 }
 
 .appearance-light-logo-preview {
-  background-color: $background-color;
+  background-color: $gray-light;
   max-width: 72px;
   padding: 10px;
   margin-bottom: 10px;
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 44834a84234..46632f15f35 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -41,6 +41,6 @@
   }
 
   &.status-box-upcoming {
-    background: $issue-box-upcoming-bg;
+    background: $gl-text-color-secondary;
   }
 }
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index dfaf2f7f1d3..29d55c44699 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -26,6 +26,62 @@ body {
 
 .container-limited {
   max-width: $fixed-layout-width;
+
+  &.limit-container-width {
+    max-width: $limited-layout-width;
+  }
+}
+
+.alert-wrapper {
+  .alert {
+    margin-bottom: 0;
+
+    &:last-child {
+      margin-bottom: $gl-padding;
+    }
+  }
+
+  .alert-link-group {
+    float: right;
+  }
+
+  /* Center alert text and alert action links on smaller screens */
+  @media (max-width: $screen-sm-max) {
+    .alert {
+      text-align: center;
+    }
+
+    .alert-link-group {
+      float: none;
+    }
+  }
+
+  /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
+  .alert-warning {
+    transition: background-color 0.15s, border-color 0.15s;
+    background-color: lighten($gl-warning, 4%);
+    border-color: lighten($gl-warning, 4%);
+  }
+
+  .alert-warning + .alert-warning {
+    background-color: $gl-warning;
+    border-color: $gl-warning;
+  }
+
+  .alert-warning + .alert-warning + .alert-warning {
+    background-color: darken($gl-warning, 4%);
+    border-color: darken($gl-warning, 4%);
+  }
+
+  .alert-warning + .alert-warning + .alert-warning + .alert-warning {
+    background-color: darken($gl-warning, 8%);
+    border-color: darken($gl-warning, 8%);
+  }
+
+  .alert-warning:only-of-type {
+    background-color: $gl-warning;
+    border-color: $gl-warning;
+  }
 }
 
 
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index ed4b60faf92..1c6698ad0c6 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -36,7 +36,7 @@
       color: $list-warning-row-color;
     }
 
-    &.smoke { background-color: $background-color; }
+    &.smoke { background-color: $gray-light; }
 
     &:not(.ui-sort-disabled):hover {
       background: $row-hover;
@@ -46,7 +46,7 @@
       border-bottom: none;
 
       &.bottom {
-        background: $background-color;
+        background: $gray-light;
       }
     }
 
@@ -59,7 +59,7 @@
     p {
       padding-top: 1px;
       margin: 0;
-      color: $gray-dark;
+      color: $white-normal;
 
       img {
         position: relative;
@@ -113,7 +113,7 @@ ul.content-list {
   padding: 0;
 
   li {
-    border-color: $table-border-color;
+    border-color: $white-normal;
     font-size: $list-font-size;
     color: $list-text-color;
 
@@ -128,7 +128,7 @@ ul.content-list {
     }
 
     a {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
 
     .member-group-link {
@@ -163,6 +163,10 @@ ul.content-list {
 
         &:last-child {
           margin-right: 0;
+
+          @media(max-width: $screen-xs-max) {
+            margin: 0 auto;
+          }
         }
       }
 
@@ -186,7 +190,7 @@ ul.content-list {
 
     &.list-placeholder {
       background-color: $gray-light;
-      border: dotted 1px $gray-dark;
+      border: dotted 1px $white-normal;
       margin: 1px 0;
       min-height: 52px;
     }
@@ -199,6 +203,7 @@ ul.content-list {
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
+    align-items: center;
     white-space: nowrap;
   }
 
@@ -208,6 +213,11 @@ ul.content-list {
     padding-right: 8px;
   }
 
+  .row-fixed-content {
+    flex: 0 0 auto;
+    margin-left: auto;
+  }
+
   .row-title {
     font-weight: 600;
   }
@@ -224,22 +234,53 @@ ul.content-list {
   }
 
   .label-default {
-    color: $btn-transparent-color;
+    color: $gl-text-color-secondary;
   }
 }
 
-.panel > .content-list > li {
-  padding: $gl-padding-top $gl-padding;
+// Table list
+.table-list {
+  display: table;
+  width: 100%;
+
+  .table-list-row {
+    display: table-row;
+  }
+
+  .table-list-cell {
+    display: table-cell;
+    vertical-align: top;
+    padding: 10px 16px;
+    border-bottom: 1px solid $gray-darker;
+
+    &.avatar-cell {
+      width: 36px;
+      padding-right: 0;
+
+      img {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.table-wide {
+    .table-list-cell {
+      &:last-of-type {
+        padding-right: 0;
+      }
 
-  &.commit {
-    @media (min-width: $screen-sm-min) {
-      padding-left: 46px + $gl-padding;
+      &:first-of-type {
+        padding-left: 0;
+      }
     }
   }
 }
 
+.panel > .content-list > li {
+  padding: $gl-padding-top $gl-padding;
+}
+
 ul.controls {
-  padding-top: 1px;
   float: right;
   list-style: none;
 
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 59a30d31ac7..5bff694658c 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -73,7 +73,7 @@
 }
 
 .referenced-users {
-  color: $gl-header-color;
+  color: $gl-text-color;
   padding-top: 10px;
 }
 
@@ -114,7 +114,7 @@
 
   // Border around images in issue and MR comments.
   img:not(.emoji) {
-    border: 1px solid $table-border-gray;
+    border: 1px solid $white-normal;
     padding: 5px;
     margin: 5px 0;
     // Ensure that image does not exceed viewport
@@ -135,7 +135,7 @@
 .toolbar-btn {
   float: left;
   padding: 0 5px;
-  color: $note-toolbar-color;
+  color: $gl-text-color-secondary;
   background: transparent;
   border: 0;
   outline: 0;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 4f2ac77f228..1acd06122a3 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -46,7 +46,7 @@
 
     &.light {
       a {
-        color: $gl-gray;
+        color: $gl-text-color;
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index abfdd7a759d..8e2c56a8488 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -23,21 +23,21 @@
     margin-right: 0;
   }
 
-  .issues-details-filters,
+  .issues-details-filters:not(.filtered-search-block),
   .dash-projects-filters,
   .check-all-holder {
     display: none;
   }
 
-  .rss-btn {
+  .issues-holder .issue-check {
     display: none;
   }
 
-  .project-home-links {
+  .rss-btn {
     display: none;
   }
 
-  .project-avatar {
+  .project-home-links {
     display: none;
   }
 
@@ -54,7 +54,7 @@
     }
 
     // Display Star and Fork buttons without counters on mobile.
-    .project-action-buttons {
+    .project-repo-buttons {
       display: block;
 
       .count-buttons .btn {
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index ea77348633d..401c2d0f6ee 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -51,7 +51,7 @@
       margin-bottom: -1px;
       font-size: 14px;
       line-height: 28px;
-      color: $note-toolbar-color;
+      color: $gl-text-color-secondary;
       border-bottom: 2px solid transparent;
 
       &:hover,
@@ -76,21 +76,14 @@
         color: $black;
       }
     }
-
-    .badge {
-      font-weight: normal;
-      background-color: $nav-badge-bg;
-      color: $btn-transparent-color;
-      vertical-align: baseline;
-    }
   }
 
   &.sub-nav {
     text-align: center;
-    background-color: $dark-background-color;
+    background-color: $gray-normal;
 
     .container-fluid {
-      background-color: $dark-background-color;
+      background-color: $gray-normal;
       margin-bottom: 0;
     }
 
@@ -108,7 +101,7 @@
         &:hover,
         &:active,
         &:focus {
-          border-bottom: none;
+          border-color: transparent;
         }
       }
     }
@@ -117,14 +110,14 @@
 
 .top-area {
   @include clearfix;
-  border-bottom: 1px solid $btn-gray-hover;
+  border-bottom: 1px solid $white-normal;
 
   .nav-text {
     padding-top: 16px;
     padding-bottom: 11px;
     display: inline-block;
-    width: 50%;
     line-height: 28px;
+    white-space: normal;
 
     /* Small devices (phones, tablets, 768px and lower) */
     @media (max-width: $screen-xs-max) {
@@ -165,30 +158,24 @@
   }
 
   .nav-controls {
-    width: 50%;
     display: inline-block;
     float: right;
     text-align: right;
     padding: 11px 0;
     margin-bottom: 0;
 
-    > .dropdown {
-      margin-right: $gl-padding-top;
-      display: inline-block;
-      vertical-align: top;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    > .btn {
+    > .btn,
+    > .btn-container,
+    > .dropdown,
+    > input,
+    > form {
       margin-right: $gl-padding-top;
       display: inline-block;
       vertical-align: top;
 
       &:last-child {
         margin-right: 0;
+        float: right;
       }
     }
 
@@ -196,19 +183,21 @@
       float: none;
     }
 
-    > form {
-      display: inline-block;
-    }
-
     .icon-label {
       display: none;
     }
 
-    input {
+    .btn,
+    .dropdown,
+    .dropdown-toggle,
+    input,
+    form {
       height: 35px;
+    }
+
+    input {
       display: inline-block;
       position: relative;
-      margin-right: $gl-padding-top;
 
       /* Medium devices (desktops, 992px and up) */
       @media (min-width: $screen-md-min) { width: 200px; }
@@ -232,6 +221,7 @@
       .btn,
       form,
       .dropdown,
+      .dropdown-toggle,
       .dropdown-menu-toggle,
       .form-control {
         margin: 0 0 10px;
@@ -270,6 +260,10 @@
     .nav-text,
     .nav-controls {
       width: auto;
+
+      @media (max-width: $screen-xs-max) {
+        width: 100%;
+      }
     }
   }
 
@@ -282,6 +276,10 @@
       padding: 17px 0;
     }
   }
+
+  pre {
+    width: 100%;
+  }
 }
 
 .layout-nav {
@@ -289,7 +287,7 @@
   top: $header-height;
   width: 100%;
   z-index: 11;
-  background: $background-color;
+  background: $gray-light;
   border-bottom: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
   text-align: center;
@@ -317,7 +315,7 @@
 
     .fa-caret-down {
       margin-left: 5px;
-      color: $gl-icon-color;
+      color: $gl-text-color-secondary;
     }
 
     .dropdown {
@@ -352,7 +350,7 @@
   }
 
   .fade-right {
-    @include fade(left, $background-color);
+    @include fade(left, $gray-light);
     right: -5px;
 
     .fa {
@@ -361,7 +359,7 @@
   }
 
   .fade-left {
-    @include fade(right, $background-color);
+    @include fade(right, $gray-light);
     left: -5px;
 
     .fa {
@@ -372,7 +370,7 @@
   &.sub-nav-scroll {
 
     .fade-right {
-      @include fade(left, $dark-background-color);
+      @include fade(left, $gray-normal);
       right: 0;
 
       .fa {
@@ -381,7 +379,7 @@
     }
 
     .fade-left {
-      @include fade(right, $dark-background-color);
+      @include fade(right, $gray-normal);
       left: 0;
 
       .fa {
@@ -435,3 +433,40 @@
     }
   }
 }
+
+@media (max-width: $screen-xs-max) {
+  .top-area {
+    flex-flow: row wrap;
+
+    .nav-controls {
+      $controls-margin: $btn-xs-side-margin - 2px;
+      flex: 0 0 100%;
+
+      &.controls-flex {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0 $gl-padding-top;
+      }
+
+      .controls-item,
+      .controls-item-full,
+      .controls-item:last-child {
+        flex: 1 1 35%;
+        display: block;
+        width: 100%;
+        margin: $controls-margin;
+
+        .btn,
+        .dropdown {
+          margin: 0;
+        }
+      }
+
+      .controls-item-full {
+        flex: 1 1 100%;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss
index 85c1385d5d9..4decee2c525 100644
--- a/app/assets/stylesheets/framework/page-header.scss
+++ b/app/assets/stylesheets/framework/page-header.scss
@@ -14,7 +14,7 @@
 
   .header-action-buttons {
     i {
-      color: $gl-icon-color;
+      color: $gl-text-color-secondary;
       font-size: 13px;
       margin-right: 3px;
     }
@@ -42,7 +42,7 @@
 
   .commit-committer-link,
   .commit-author-link {
-    color: $gl-gray;
+    color: $gl-text-color;
     font-weight: bold;
   }
 
@@ -57,7 +57,6 @@
   }
 
   .ci-status-link {
-
     svg {
       position: relative;
       top: 2px;
diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss
index 5ba0486177f..efe93724013 100644
--- a/app/assets/stylesheets/framework/panels.scss
+++ b/app/assets/stylesheets/framework/panels.scss
@@ -18,6 +18,20 @@
       margin-top: -2px;
       margin-left: 5px;
     }
+
+    &.split {
+      display: flex;
+      align-items: center;
+    }
+
+    .left {
+      flex: 1 1 auto;
+    }
+
+    .right {
+      flex: 0 0 auto;
+      text-align: right;
+    }
   }
 
   .panel-body {
@@ -34,3 +48,11 @@
     line-height: inherit;
   }
 }
+
+.panel-default {
+  .table-list-row:last-child {
+    .table-list-cell {
+      border-bottom: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index fde1431b13e..9ab17e67d4c 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -39,7 +39,7 @@
     }
 
     &:hover {
-      background-color: $gray-dark;
+      background-color: $white-normal;
       border-color: $border-white-normal;
       color: $gl-text-color;
     }
@@ -108,7 +108,7 @@
       border-color: $input-border;
       color: $gl-text-color;
       line-height: 15px;
-      background-color: $background-color;
+      background-color: $gray-light;
       background-image: none;
 
       .select2-search-choice-close {
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 0aa609b8dd5..f0b03710c79 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -23,7 +23,7 @@
 
 .sidebar-wrapper {
   z-index: 1000;
-  background: $background-color;
+  background: $gray-light;
 
   .nicescroll-rails-hr {
     // TODO: Figure out why nicescroll doesn't hide horizontal bar
@@ -101,6 +101,17 @@
     padding: 0 8px;
     border-radius: 6px;
   }
+
+  .about-gitlab {
+    padding: 7px $gl-sidebar-padding;
+    font-size: $gl-font-size;
+    line-height: 24px;
+    display: block;
+    text-decoration: none;
+    font-weight: normal;
+    position: absolute;
+    bottom: 10px;
+  }
 }
 
 .sidebar-action-buttons {
@@ -172,7 +183,9 @@
 
   &.right-sidebar-expanded {
     .line-resolve-all-container {
-      display: none;
+      @media (min-width: $sidebar-breakpoint) {
+        display: none;
+      }
     }
   }
 }
@@ -223,9 +236,13 @@ header.header-sidebar-pinned {
   @media (min-width: $screen-md-min) {
     padding-right: $gutter_width;
 
-    .merge-request-tabs-holder.affix {
+    &:not(.with-overlay) .merge-request-tabs-holder.affix {
       right: $gutter_width;
     }
+
+    &.with-overlay .merge-request-tabs-holder.affix {
+      right: $sidebar_collapsed_width;
+    }
   }
 
   &.with-overlay {
diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index ff13b86acf0..5f7e1b17cc7 100644
--- a/app/assets/stylesheets/pages/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -22,16 +22,6 @@
 
 .snippet-file-content {
   border-radius: 3px;
-  margin-bottom: $gl-padding;
-
-  .btn-clipboard {
-    @extend .btn;
-  }
-}
-
-.project-snippets .awards {
-  border-bottom: 1px solid $table-border-color;
-  padding-bottom: $gl-padding;
 }
 
 .snippet-header {
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 5d0ca63ea08..6d9fa74a030 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -31,7 +31,7 @@ table {
       }
 
       th {
-        background-color: $background-color;
+        background-color: $gray-light;
         font-weight: normal;
         border-bottom: none;
 
@@ -41,7 +41,7 @@ table {
       }
 
       td {
-        border-color: $table-border-color;
+        border-color: $white-normal;
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 875cded8b4e..ff185cd8767 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -6,8 +6,8 @@
 
   .timeline-entry {
     padding: $gl-padding $gl-btn-padding 11px;
-    border-color: $table-border-color;
-    color: $gl-gray;
+    border-color: $white-normal;
+    color: $gl-text-color;
     border-bottom: 1px solid $border-white-light;
 
     &:target {
@@ -32,7 +32,7 @@
 
   .system-note {
     .note-text {
-      color: $gl-gray !important;
+      color: $gl-text-color !important;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index 55bc325b858..12d56359d7d 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -91,14 +91,14 @@
 // Labels
 .label {
   padding: 4px 5px;
-  font-size: 13px;
+  font-size: 12px;
   font-style: normal;
   font-weight: normal;
   display: inline-block;
 
   &.label-gray {
     background-color: $label-gray-bg;
-    color: $gl-gray;
+    color: $gl-text-color;
     text-shadow: none;
   }
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index c731a8f222f..0fc89d5976a 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -65,11 +65,11 @@ $legend-color: $text-color;
 //
 //##
 
-$pagination-color: $gl-gray;
+$pagination-color: $gl-text-color;
 $pagination-bg: $white-light;
 $pagination-border: $border-color;
 
-$pagination-hover-color: $gl-gray;
+$pagination-hover-color: $gl-text-color;
 $pagination-hover-bg: $row-hover;
 $pagination-hover-border: $border-color;
 
@@ -78,7 +78,7 @@ $pagination-active-bg: $white-light;
 $pagination-active-border: $border-color;
 
 $pagination-disabled-color: #cdcdcd;
-$pagination-disabled-bg: $background-color;
+$pagination-disabled-bg: $gray-light;
 $pagination-disabled-border: $border-color;
 
 
@@ -117,10 +117,13 @@ $alert-border-radius: 0;
 $panel-border-radius: 2px;
 $panel-default-text: $text-color;
 $panel-default-border: $border-color;
-$panel-default-heading-bg: $background-color;
-$panel-footer-bg: $background-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
 //
 //##
@@ -153,8 +156,8 @@ $nav-link-padding: 13px $gl-padding;
 //== Code
 //
 //##
-$pre-bg: $background-color !default;
-$pre-color: $gl-gray !default;
+$pre-bg: $gray-light !default;
+$pre-color: $gl-text-color !default;
 $pre-border-color: $border-color;
 
-$table-bg-accent: $background-color;
+$table-bg-accent: $gray-light;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index d906d26bba9..bd58a26f429 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,5 +1,5 @@
 @mixin md-typography {
-  color: $md-text-color;
+  color: $gl-text-color;
   word-wrap: break-word;
 
   a {
@@ -50,14 +50,14 @@
     margin: 16px 0 10px;
     padding: 0 0 0.3em;
     border-bottom: 1px solid $white-dark;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
   }
 
   h2 {
     font-size: 1.5em;
     font-weight: 600;
     margin: 16px 0 10px;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
   }
 
   h3 {
@@ -100,7 +100,7 @@
   }
 
   p {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
     margin: 6px 0 0;
   }
 
@@ -108,7 +108,7 @@
     @extend .table;
     @extend .table-bordered;
     margin: 12px 0;
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
 
     th {
       background: $label-gray-bg;
@@ -230,7 +230,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: $gl-title-color;
+  color: $gl-text-color;
   font-weight: 600;
 }
 
@@ -292,7 +292,7 @@ h2,
 h3,
 h4 {
   small {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index a1d5f6427f4..07cb669a46e 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -5,7 +5,7 @@ $sidebar_collapsed_width: 62px;
 $sidebar_width: 220px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
-$gutter_inner_width: 258px;
+$gutter_inner_width: 250px;
 $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
 
@@ -17,16 +17,16 @@ $darken-dark-factor: 10%;
 $darken-border-factor: 5%;
 
 $white-light: #fff;
-$white-normal: darken($white-light, $darken-normal-factor);
-$white-dark: darken($white-light, $darken-dark-factor);
+$white-normal: #f0f0f0;
+$white-dark: #eaeaea;
 
 $gray-lightest: #fdfdfd;
 $gray-light: #fafafa;
 $gray-lighter: #f9f9f9;
-$gray-normal: darken($gray-light, $darken-normal-factor);
+$gray-normal: #f5f5f5;
 $gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
-$gray-darkest: #c9c9c9;
+$gray-darkest: #c4c4c4;
 
 $green-light: #3cbd70;
 $green-normal: darken($green-light, $darken-normal-factor);
@@ -55,11 +55,10 @@ $black-transparent: rgba(0, 0, 0, 0.3);
 
 $border-white-light: darken($white-light, $darken-border-factor);
 $border-white-normal: darken($white-normal, $darken-border-factor);
-$border-white-dark: darken($white-dark, $darken-border-factor);
 
 $border-gray-light: darken($gray-light, $darken-border-factor);
 $border-gray-normal: darken($gray-normal, $darken-border-factor);
-$border-gray-dark: darken($gray-dark, $darken-border-factor);
+$border-gray-dark: darken($white-normal, $darken-border-factor);
 
 $border-green-extra-light: #9adb84;
 $border-green-light: darken($green-light, $darken-border-factor);
@@ -78,9 +77,6 @@ $border-red-light: darken($red-light, $darken-border-factor);
 $border-red-normal: darken($red-normal, $darken-border-factor);
 $border-red-dark: darken($red-dark, $darken-border-factor);
 
-$help-well-bg: $gray-light;
-$help-well-border: #e5e5e5;
-
 $warning-message-bg: #fbf2d9;
 $warning-message-color: #9e8e60;
 $warning-message-border: #f0e2bb;
@@ -90,10 +86,7 @@ $warning-message-border: #f0e2bb;
  */
 $border-color: #e5e5e5;
 $focus-border-color: #3aabf0;
-$table-border-color: #f0f0f0;
-$background-color: $gray-light;
-$dark-background-color: #f5f5f5;
-$table-text-gray: #8f8f8f;
+$sidebar-collapsed-icon-color: #999;
 $well-expand-item: #e8f2f7;
 $well-inner-border: #eef0f2;
 $well-light-border: #f1f1f1;
@@ -103,31 +96,26 @@ $well-light-text-color: #5b6169;
  * Text
  */
 $gl-font-size: 14px;
-$gl-title-color: #333;
-$gl-text-color: #5c5c5c;
-$gl-text-color-dark: #5c5d5e;
-$gl-text-color-light: #8c8c8c;
+$gl-text-color: rgba(0, 0, 0, .85);
+$gl-text-color-secondary: rgba(0, 0, 0, .55);
+$gl-text-color-disabled: rgba(0, 0, 0, .35);
 $gl-text-green: #4a2;
 $gl-text-red: #d12f19;
 $gl-text-orange: #d90;
 $gl-link-color: #3777b0;
-$gl-diff-text-color: #555;
-$gl-dark-link-color: #333;
-$gl-placeholder-color: #8f8f8f;
-$gl-icon-color: $gl-placeholder-color;
 $gl-grayish-blue: #7f8fa4;
 $gl-gray: $gl-text-color;
 $gl-gray-dark: #313236;
-$gl-gray-light: $gl-placeholder-color;
 $gl-header-color: #4c4e54;
+$gl-header-nav-hover-color: #434343;
 
 /*
  * Lists
  */
 $list-font-size: $gl-font-size;
-$list-title-color: $gl-title-color;
+$list-title-color: $gl-text-color;
 $list-text-color: $gl-text-color;
-$list-text-disabled-color: #888;
+$list-text-disabled-color: $gl-text-color-disabled;
 $list-border-light: #eee;
 $list-border: rgba(0, 0, 0, 0.05);
 $list-text-height: 42px;
@@ -138,15 +126,14 @@ $list-warning-row-color: #8a6d3b;
 /*
  * Markdown
  */
-$md-text-color: $gl-text-color;
 $md-link-color: $gl-link-color;
 $md-area-border: #ddd;
 
 /*
  * Code
  */
-$code_font_size: 13px;
-$code_line_height: 1.5;
+$code_font_size: 12px;
+$code_line_height: 1.6;
 
 /*
  * Padding
@@ -166,11 +153,11 @@ $row-hover-border: #b2d7ff;
 $progress-color: #c0392b;
 $header-height: 50px;
 $fixed-layout-width: 1280px;
+$limited-layout-width: 990px;
+$gl-avatar-size: 40px;
 $error-exclamation-point: #e62958;
 $border-radius-default: 2px;
-$btn-transparent-color: #8f8f8f;
 $settings-icon-size: 18px;
-$provider-btn-group-border: #e5e5e5;
 $provider-btn-not-active-color: #4688f1;
 $link-underline-blue: #4a8bee;
 $active-item-blue: #4a8bee;
@@ -179,9 +166,7 @@ $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
 $btn-xs-side-margin: 5px;
 $issue-status-expired: #cea61b;
-$issuable-sidebar-color: #999;
-$issuable-avatar-hover-border: #999;
-$issuable-clipboard-color: #999;
+$issuable-sidebar-color: $gl-text-color-secondary;
 $show-aside-bg: #eee;
 $show-aside-color: #777;
 $show-aside-shadow: #ddd;
@@ -193,7 +178,9 @@ $count-arrow-border: #dce0e5;
 $save-project-loader-color: #555;
 $divergence-graph-bar-bg: #ccc;
 $divergence-graph-separator-bg: #ccc;
-$issue-box-upcoming-bg: #8f8f8f;
+$general-hover-transition-duration: 150ms;
+$general-hover-transition-curve: linear;
+
 
 /*
 * Common component specific colors
@@ -246,8 +233,6 @@ $line-removed-dark: #fac5cd;
 $line-number-old: #f9d7dc;
 $line-number-new: #ddfbe6;
 $line-number-select: #fbf2da;
-$match-line: $gray-light;
-$table-border-gray: #f0f0f0;
 $line-target-blue: #f6faff;
 $line-select-yellow: #fcf8e7;
 $line-select-yellow-dark: #f0e2bd;
@@ -257,7 +242,6 @@ $file-mode-changed: #777;
 $file-mode-changed: #777;
 $diff-image-bg: #ddd;
 $diff-image-info-color: grey;
-$diff-image-img-bg: #e5e5e5;
 $diff-swipe-border: #999;
 $diff-view-modes-color: grey;
 $diff-view-modes-border: #c1c1c1;
@@ -272,14 +256,12 @@ $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San
 * Dropdowns
 */
 $dropdown-width: 300px;
-$dropdown-bg: #fff;
 $dropdown-link-color: #555;
 $dropdown-link-hover-bg: $row-hover;
 $dropdown-empty-row-bg: rgba(#000, .04);
 $dropdown-border-color: $border-color;
 $dropdown-shadow-color: rgba(#000, .1);
 $dropdown-divider-color: rgba(#000, .1);
-$dropdown-header-color: #959494;
 $dropdown-title-btn-color: #bfbfbf;
 $dropdown-input-color: #555;
 $dropdown-input-fa-color: #c7c7c7;
@@ -287,31 +269,31 @@ $dropdown-input-focus-border: $focus-border-color;
 $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
 $dropdown-loading-bg: rgba(#fff, .6);
 $dropdown-chevron-size: 10px;
+$dropdown-toggle-active-border-color: darken($border-color, 14%);
+
 
-$dropdown-toggle-bg: #fff;
-$dropdown-toggle-color: #5c5c5c;
-$dropdown-toggle-border-color: #e5e5e5;
-$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 13%);
-$dropdown-toggle-active-border-color: darken($dropdown-toggle-border-color, 14%);
-$dropdown-toggle-icon-color: #c4c4c4;
-$dropdown-toggle-hover-icon-color: darken($dropdown-toggle-icon-color, 7%);
+/*
+* Filtered Search
+*/
+$dropdown-hover-color: #3b86ff;
 
 /*
 * Buttons
 */
 $btn-active-gray: #ececec;
 $btn-active-gray-light: e4e7ed;
-$btn-placeholder-gray: #c7c7c7;
 $btn-white-active: #848484;
-$btn-gray-hover: #eee;
+
+/*
+* Badges
+*/
+$badge-bg: #eee;
+$badge-color: $gl-text-color-secondary;
 
 /*
  *  Award emoji
  */
-$award-emoji-menu-bg: #fff;
-$award-emoji-menu-border: #f1f2f4;
 $award-emoji-menu-shadow: rgba(0,0,0,.175);
-$award-emoji-new-btn-icon-color: #dcdcdc;
 
 /*
  * Search Box
@@ -319,22 +301,15 @@ $award-emoji-new-btn-icon-color: #dcdcdc;
 $search-input-border-color: rgba(#4688f1, .8);
 $search-input-focus-shadow-color: $dropdown-input-focus-shadow;
 $search-input-width: 220px;
-$location-badge-color: #aaa;
-$location-badge-bg: $dark-background-color;
 $location-badge-active-bg: #4f91f8;
 $location-icon-color: #e7e9ed;
-$location-icon-active-color: #807e7e;
 
 /*
  *  Notes
  */
-$notes-light-color: #8e8e8e;
-$notes-action-color: #c3c3c3;
-$notes-role-color: #8e8e8e;
-$notes-role-border-color: #e4e4e4;
+$notes-light-color: $gl-text-color-secondary;
+$notes-role-color: $gl-text-color-secondary;
 $note-disabled-comment-color: #b2b2b2;
-$note-form-border-color: #e5e5e5;
-$note-toolbar-color: #959494;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
 $note-line2-border: #ddd;
@@ -344,15 +319,12 @@ $note-line2-border: #ddd;
 * Zen
 */
 $zen-control-color: #555;
-$zen-control-hover-color: #111;
 
 /*
 * Calendar
 */
-$calendar-header-color: #b8b8b8;
 $calendar-hover-bg: #ecf3fe;
 $calendar-border-color: rgba(#000, .1);
-$calendar-unselectable-bg: $gray-light;
 $calendar-user-contrib-text: #959494;
 
 /*
@@ -361,20 +333,13 @@ $calendar-user-contrib-text: #959494;
 $cycle-analytics-box-padding: 30px;
 $cycle-analytics-box-text-color: #8c8c8c;
 $cycle-analytics-big-font: 19px;
-$cycle-analytics-dark-text: $gl-title-color;
+$cycle-analytics-dark-text: $gl-text-color;
 $cycle-analytics-light-gray: #bfbfbf;
 $cycle-analytics-dismiss-icon-color: #b2b2b2;
 
 /*
- * Personal Access Tokens
- */
-$personal-access-tokens-disabled-label-color: #bbb;
-
-/*
 * CI
 */
-$ci-output-bg: #1d1f21;
-$ci-text-color: #c5c8c6;
 $ci-skipped-color: #888;
 
 /*
@@ -414,14 +379,13 @@ $callout-success-color: #3c763d;
 /*
 * Commit Page
 */
-$commit-committer-color: #999;
 $commit-max-width-marker-color: rgba(0, 0, 0, 0.0);
 $commit-message-text-area-bg: rgba(0, 0, 0, 0.0);
 
 /*
 * Common
 */
-$common-gray: $gl-gray;
+$common-gray: $gl-text-color;
 $common-gray-light: #bbb;
 $common-gray-dark: #444;
 $common-red: $gl-text-red;
@@ -470,9 +434,9 @@ $help-shortcut-header-color: #333;
 /*
 * Issues
 */
-$issues-border: #e5e5e5;
 $issues-today-bg: #f3fff2;
 $issues-today-border: #e1e8d5;
+$compare-display-color: #888;
 
 /*
 * jQuery UI
@@ -486,7 +450,7 @@ $jq-ui-default-color: #777;
 $label-gray-bg: #f8fafc;
 $label-inverse-bg: #333;
 $label-remove-border: rgba(0, 0, 0, .1);
-$label-border-radius: 14px;
+$label-border-radius: 100px;
 
 /*
 * Lint
@@ -522,16 +486,15 @@ $project-option-descr-color: #54565b;
 $project-breadcrumb-color: #999;
 $project-private-forks-notice-odd: #2aa056;
 $project-network-controls-color: #888;
-$project-limit-message-bg: #f28d35;
 
 /*
 * Runners
 */
 $runner-state-shared-bg: #32b186;
 $runner-state-specific-bg: #3498db;
-$runner-status-online-color: green;
-$runner-status-offline-color: gray;
-$runner-status-paused-color: red;
+$runner-status-online-color: $green-normal;
+$runner-status-offline-color: $gray-darkest;
+$runner-status-paused-color: $red-normal;
 
 /*
 Stat Graph
@@ -572,3 +535,10 @@ $body-text-shadow: rgba(255,255,255,0.01);
 */
 $ui-dev-kit-example-color: #bbb;
 $ui-dev-kit-example-border: #ddd;
+
+/*
+Pipeline Graph
+*/
+$stage-hover-bg: #eaf3fc;
+$stage-hover-border: #d1e7fc;
+$action-icon-color: #d6d6d6;
\ No newline at end of file
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index f2860dfe84d..32eb750180f 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -1,6 +1,6 @@
 .info-well {
-  background: $background-color;
-  color: $gl-gray;
+  background: $gray-light;
+  color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 
@@ -45,7 +45,7 @@
 }
 
 .light-well {
-  background-color: $background-color;
+  background-color: $gray-light;
   padding: 15px;
 }
 
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index e5c7d70d45a..97ade638db6 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -40,7 +40,7 @@
 }
 
 .zen-control-full {
-  color: $note-toolbar-color;
+  color: $gl-text-color-secondary;
 
   &:hover {
     color: $gl-link-color;
@@ -57,6 +57,6 @@
   font-size: 36px;
 
   &:hover {
-    color: $zen-control-hover-color;
+    color: $black;
   }
 }
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 1adab3ffd94..b425c78e0d5 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -3,7 +3,7 @@
 /*
 * White Syntax Colors
 */
-$white-code-color: #333;
+$white-code-color: $gl-text-color;
 $white-highlight: #fafe3d;
 $white-pre-hll-bg: #f8eec7;
 $white-hll-bg: #f8f8f8;
@@ -69,14 +69,14 @@ $white-gc-bg: #eaf2f5;
 
 @mixin matchLine {
   color: $black-transparent;
-  background-color: $match-line;
+  background-color: $gray-light;
 }
 
 .code.white {
   // Line numbers
   .line-numbers,
   .diff-line-num {
-    background-color: $background-color;
+    background-color: $gray-light;
   }
 
   .diff-line-num,
@@ -87,7 +87,7 @@ $white-gc-bg: #eaf2f5;
   // Code itself
   pre.code,
   .diff-line-num {
-    border-color: $table-border-gray;
+    border-color: $white-normal;
   }
 
   &,
diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
index 024b4df6bd0..60ff72c703e 100644
--- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -91,9 +91,9 @@ $highlighted-gc-bg: #eaf2f5;
   padding: 0 5px;
   text-align: right;
   width: 35px;
-  background-color: $background-color;
+  background-color: $gray-light;
   color: $black-transparent;
-  border-right: 1px solid $table-border-gray;
+  border-right: 1px solid $white-normal;
 
   &.old {
     background-color: $line-number-old;
@@ -130,7 +130,7 @@ $highlighted-gc-bg: #eaf2f5;
 
   &.match {
     color: $black-transparent;
-    background-color: $match-line;
+    background-color: $gray-light;
   }
 }
 
diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss
index ddc382362f7..a81e5eb5ebf 100644
--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -18,15 +18,3 @@ p.details {
 pre.commit-message {
   white-space: pre-wrap;
 }
-
-.file-stats > a {
-  text-decoration: none;
-
-  > .new-file {
-    color: $notify-new-file;
-  }
-
-  > .deleted-file {
-    color: $notify-deleted-file;
-  }
-}
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 0d9cf679e7c..f2d60bff2b5 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -31,7 +31,7 @@
 
   .dropdown-content {
     max-height: 150px;
-	}
+  }
 }
 
 .issue-board-dropdown-content {
@@ -74,6 +74,7 @@
     height: 475px; // Needed for PhantomJS
     height: calc(100vh - 220px);
     min-height: 475px;
+    transition: width .2s;
 
     &.is-compact {
       width: calc(100% - 290px);
@@ -98,7 +99,7 @@
 .board-inner {
   height: 100%;
   font-size: $issue-boards-font-size;
-  background: $background-color;
+  background: $gray-light;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 }
@@ -109,6 +110,12 @@
 
   &.has-border {
     border-top: 3px solid;
+    margin-top: -1px;
+    margin-right: -1px;
+    margin-left: -1px;
+    padding-top: 1px;
+    padding-right: 1px;
+    padding-left: 1px;
 
     .board-title {
       padding-top: ($gl-padding - 3px);
@@ -253,7 +260,7 @@
 
 .board-list-count {
   padding: 10px 0;
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
   font-size: 13px;
 
   > .fa {
@@ -332,3 +339,18 @@
     }
   }
 }
+
+.right-sidebar.right-sidebar-expanded {
+  &.boards-sidebar-slide-enter-active,
+  &.boards-sidebar-slide-leave-active {
+    transition: width .2s,
+                padding .2s;
+  }
+
+  &.boards-sidebar-slide-enter,
+  &.boards-sidebar-slide-leave-active {
+    width: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
new file mode 100644
index 00000000000..3e2fa8ca88d
--- /dev/null
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -0,0 +1,55 @@
+.divergence-graph {
+  padding: 12px 12px 0 0;
+  float: right;
+
+  .graph-side {
+    position: relative;
+    width: 80px;
+    height: 22px;
+    padding: 5px 0 13px;
+    float: left;
+
+    .bar {
+      position: absolute;
+      height: 4px;
+      background-color: $divergence-graph-bar-bg;
+    }
+
+    .bar-behind {
+      right: 0;
+      border-radius: 3px 0 0 3px;
+    }
+
+    .bar-ahead {
+      left: 0;
+      border-radius: 0 3px 3px 0;
+    }
+
+    .count {
+      padding-top: 6px;
+      padding-bottom: 0;
+      font-size: 12px;
+      color: $gl-text-color;
+      display: block;
+    }
+
+    .count-behind {
+      padding-right: 4px;
+      text-align: right;
+    }
+
+    .count-ahead {
+      padding-left: 4px;
+      text-align: left;
+    }
+  }
+
+  .graph-separator {
+    position: relative;
+    width: 1px;
+    height: 18px;
+    margin: 5px 0 0;
+    float: left;
+    background-color: $divergence-graph-separator-bg;
+  }
+}
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index dcc13f6d74a..fd101d43b5b 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -1,3 +1,34 @@
+@keyframes fade-out-status {
+  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);
+  }
+
+  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);
+  }
+
+  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);
+  }
+
+  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);
+  }
+}
+
 .build-page {
   pre.trace {
     background: $builds-trace-bg;
@@ -14,45 +45,99 @@
     }
   }
 
-  .scroll-controls {
-    .scroll-step {
-      width: 31px;
-      margin: 0 0 0 auto;
+  .environment-information {
+    background-color: $gray-light;
+    border: 1px solid $border-color;
+    padding: 12px $gl-padding;
+    border-radius: $border-radius-default;
+
+    svg {
+      position: relative;
+      top: 1px;
+      margin-right: 5px;
+    }
+  }
+}
+
+.scroll-controls {
+  height: 100%;
+
+  .scroll-step {
+    width: 31px;
+    margin: 0 0 0 auto;
+  }
+
+  .scroll-link,
+  .autoscroll-container {
+    right: 25px;
+    z-index: 1;
+  }
+
+  .scroll-link {
+    position: fixed;
+    display: block;
+    margin-bottom: 10px;
+
+    &.scroll-top .gitlab-icon-scroll-up-hover,
+    &.scroll-top:hover .gitlab-icon-scroll-up,
+    &.scroll-bottom .gitlab-icon-scroll-down-hover,
+    &.scroll-bottom:hover .gitlab-icon-scroll-down {
+      display: none;
     }
 
-    &.affix-bottom {
-      position: absolute;
-      right: 25px;
+    &.scroll-top:hover .gitlab-icon-scroll-up-hover,
+    &.scroll-bottom:hover .gitlab-icon-scroll-down-hover {
+      display: inline-block;
     }
 
-    &.affix {
-      right: 25px;
-      bottom: 15px;
-      z-index: 1;
+    &.scroll-top {
+      top: 110px;
     }
 
-    &.sidebar-expanded {
-      right: #{$gutter_width + ($gl-padding * 2)};
+    &.scroll-bottom {
+      bottom: -2px;
     }
+  }
 
-    a {
-      display: block;
-      margin-bottom: 10px;
+  .autoscroll-container {
+    position: absolute;
+  }
+
+  &.sidebar-expanded {
+
+    .scroll-link,
+    .autoscroll-container {
+      right: ($gutter_width + ($gl-padding * 2));
     }
   }
+}
 
-  .environment-information {
-    background-color: $background-color;
-    border: 1px solid $border-color;
-    padding: 12px $gl-padding;
-    border-radius: $border-radius-default;
+.status-message {
+  display: inline-block;
+  color: $white-light;
 
-    svg {
-      position: relative;
-      top: 1px;
-      margin-right: 5px;
+  .status-icon {
+    display: inline-block;
+    width: 16px;
+    height: 33px;
+  }
+
+  .status-text {
+    float: left;
+    opacity: 0;
+    margin-right: 10px;
+    font-weight: normal;
+    line-height: 1.8;
+    transition: opacity 1s ease-out;
+
+    &.animate {
+      animation: fade-out-status 2s ease;
     }
   }
+
+  &:hover .status-text {
+    opacity: 1;
+  }
 }
 
 .build-header {
@@ -75,7 +160,7 @@
     flex: 1;
 
     a {
-      color: $gl-gray;
+      color: $gl-text-color;
 
       &:hover {
         color: $gl-link-color;
@@ -96,8 +181,8 @@
 }
 
 .build-trace {
-  background: $ci-output-bg;
-  color: $ci-text-color;
+  background: $black;
+  color: $gray-darkest;
   white-space: pre;
   overflow-x: auto;
   font-size: 12px;
@@ -109,6 +194,15 @@
   .bash {
     display: block;
   }
+
+  .build-loader-animation {
+    position: relative;
+    width: 6px;
+    height: 6px;
+    margin: auto auto 12px 2px;
+    border-radius: 50%;
+    animation: blinking-dots 1s linear infinite;
+  }
 }
 
 .right-sidebar.build-sidebar {
@@ -248,6 +342,12 @@
   }
 }
 
+.build-sidebar {
+  .container-fluid.container-limited {
+    max-width: 100%;
+  }
+}
+
 .build-detail-row {
   margin-bottom: 5px;
 
@@ -257,7 +357,7 @@
 }
 
 .build-light-text {
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
 }
 
 .build-gutter-toggle {
diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss
index d1cd1e5d848..90643832390 100644
--- a/app/assets/stylesheets/pages/ci_projects.scss
+++ b/app/assets/stylesheets/pages/ci_projects.scss
@@ -18,7 +18,7 @@
     }
 
     td {
-      color: $gl-gray;
+      color: $gl-text-color;
       vertical-align: middle !important;
 
       a {
diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
deleted file mode 100644
index bf656d0e28e..00000000000
--- a/app/assets/stylesheets/pages/commit.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-.commit-title {
-  display: block;
-}
-
-.commit-author,
-.commit-committer {
-  display: block;
-  color: $commit-committer-color;
-  font-weight: normal;
-  font-style: italic;
-}
-
-.commit-author strong,
-.commit-committer strong {
-  font-weight: bold;
-  font-style: normal;
-}
-
-.commit-description {
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  margin-top: 10px;
-  word-break: normal;
-  white-space: pre-wrap;
-}
-
-.js-details-expand {
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.ci-status-link {
-  svg {
-    overflow: visible;
-  }
-}
-
-.commit-box {
-  border-top: 1px solid $border-color;
-  padding: $gl-padding 0;
-
-  .commit-title {
-    margin: 0;
-    font-size: 23px;
-    color: $gl-gray-dark;
-  }
-
-  .commit-description {
-    margin-top: 15px;
-  }
-}
-
-.commit-hash-full {
-  @media (max-width: $screen-sm-max) {
-    width: 80px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: inline-block;
-    vertical-align: bottom;
-  }
-}
-
-.file-stats {
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 10px 0;
-
-    li {
-      padding: 3px 0;
-      line-height: 20px;
-    }
-  }
-
-  .new-file {
-    a {
-      color: $gl-text-green;
-    }
-  }
-
-  .renamed-file {
-    a {
-      color: $gl-text-orange;
-    }
-  }
-
-  .deleted-file {
-    a {
-      color: $gl-text-red;
-    }
-  }
-
-  .edit-file {
-    a {
-      color: $gl-text-color;
-    }
-  }
-}
-
-/*
- * Commit message textarea for web editor and
- * custom merge request message
- */
-.commit-message-container {
-  background-color: $body-bg;
-  position: relative;
-  font-family: $monospace_font;
-  $left: 12px;
-  overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
-  .max-width-marker {
-    width: 72ch;
-    color: $commit-max-width-marker-color;
-    font-family: inherit;
-    left: $left;
-    height: 100%;
-    border-right: 1px solid mix($input-border, $white-light);
-    position: absolute;
-    z-index: 1;
-  }
-
-  > textarea {
-    background-color: $commit-message-text-area-bg;
-    font-family: inherit;
-    padding-left: $left;
-    position: relative;
-    z-index: 2;
-  }
-}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index c29b5fdea78..fef8e8eec27 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -1,14 +1,82 @@
+.commit-description {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-top: 10px;
+  word-break: normal;
+  white-space: pre-wrap;
+}
+
+.js-details-expand {
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.commit-box {
+  border-top: 1px solid $border-color;
+  padding: $gl-padding 0;
+
+  .commit-title {
+    margin: 0;
+    color: $gl-text-color;
+  }
+
+  .commit-description {
+    margin-top: 15px;
+  }
+}
+
+.commit-hash-full {
+  @media (max-width: $screen-sm-max) {
+    width: 80px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
+/*
+ * Commit message textarea for web editor and
+ * custom merge request message
+ */
+.commit-message-container {
+  background-color: $body-bg;
+  position: relative;
+  font-family: $monospace_font;
+  $left: 12px;
+  overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
+  .max-width-marker {
+    width: 72ch;
+    color: $commit-max-width-marker-color;
+    font-family: inherit;
+    left: $left;
+    height: 100%;
+    border-right: 1px solid mix($input-border, $white-light);
+    position: absolute;
+    z-index: 1;
+  }
+
+  textarea {
+    background-color: $commit-message-text-area-bg;
+    font-family: inherit;
+    padding-left: $left;
+    position: relative;
+    z-index: 2;
+  }
+}
+
+
 .commits-compare-switch {
-  @include btn-default;
-  @include btn-white;
   float: left;
   margin-right: 9px;
 }
 
 .commit-header {
   padding: 5px 10px;
-  background-color: $background-color;
-  border-top: 1px solid $gray-darker;
+  background-color: $gray-light;
   border-bottom: 1px solid $gray-darker;
   font-size: 14px;
 
@@ -18,8 +86,6 @@
 }
 
 .commit-row-title {
-  line-height: 1.35;
-
   .notes_count {
     float: right;
     margin-right: 10px;
@@ -30,15 +96,14 @@
   }
 
   .commit-row-message {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
-
 }
 
 .text-expander {
   display: inline-block;
   background: $gray-light;
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
   padding: 0 5px;
   cursor: pointer;
   border: 1px solid $border-gray-dark;
@@ -54,9 +119,8 @@
 
 .commit-actions {
   @media (min-width: $screen-sm-min) {
-    float: right;
-    margin-left: $gl-padding;
-    margin-top: 2px;
+    width: 300px;
+    text-align: right;
     font-size: 0;
   }
 
@@ -86,38 +150,16 @@
 
 .commit,
 .generic_commit_status {
-  padding: 10px 0;
-  position: relative;
-
-  @media (min-width: $screen-sm-min) {
-    padding-left: 46px;
-  }
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $gray-darker;
-  }
 
   a,
   button {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
     vertical-align: baseline;
   }
 
-  .avatar {
-    margin-left: -46px;
-  }
-
-  .item-title {
-    display: inline-block;
-
-    @media (min-width: $screen-sm-min) {
-      max-width: 70%;
-    }
-  }
-
   .commit-row-description {
     font-size: 14px;
-    border-left: 1px solid $btn-gray-hover;
+    border-left: 1px solid $white-normal;
     padding: 10px 15px;
     margin: 10px 0;
     background: $gray-light;
@@ -134,20 +176,7 @@
     }
 
     a {
-      color: $gl-dark-link-color;
-    }
-  }
-
-  .commit-row-info {
-    color: $gl-gray;
-    line-height: 1.35;
-
-    a {
-      color: $gl-gray;
-    }
-
-    .avatar {
-      margin-right: 8px;
+      color: $gl-text-color;
     }
   }
 
@@ -164,7 +193,7 @@
 }
 
 .branch-commit {
-  color: $gl-gray;
+  color: $gl-text-color;
 
   .commit-icon {
     text-align: center;
@@ -174,7 +203,7 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $table-text-gray;
+      fill: $gl-text-color-secondary;
     }
   }
 
@@ -183,62 +212,6 @@
   }
 
   .commit-row-message {
-    color: $gl-gray;
-  }
-}
-
-.divergence-graph {
-  padding: 12px 12px 0 0;
-  float: right;
-
-  .graph-side {
-    position: relative;
-    width: 80px;
-    height: 22px;
-    padding: 5px 0 13px;
-    float: left;
-
-    .bar {
-      position: absolute;
-      height: 4px;
-      background-color: $divergence-graph-bar-bg;
-    }
-
-    .bar-behind {
-      right: 0;
-      border-radius: 3px 0 0 3px;
-    }
-
-    .bar-ahead {
-      left: 0;
-      border-radius: 0 3px 3px 0;
-    }
-
-    .count {
-      padding-top: 6px;
-      padding-bottom: 0;
-      font-size: 12px;
-      color: $gl-title-color;
-      display: block;
-    }
-
-    .count-behind {
-      padding-right: 4px;
-      text-align: right;
-    }
-
-    .count-ahead {
-      padding-left: 4px;
-      text-align: left;
-    }
-  }
-
-  .graph-separator {
-    position: relative;
-    width: 1px;
-    height: 18px;
-    margin: 5px 0 0;
-    float: left;
-    background-color: $divergence-graph-separator-bg;
+    color: $gl-text-color;
   }
 }
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 57146e1fccd..cda069e6c0e 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -20,15 +20,19 @@
 
     .fa {
       color: $cycle-analytics-light-gray;
+
+      &:hover {
+        color: $gl-text-color;
+      }
     }
 
     .stage-header {
-      width: 28%;
+      width: 26%;
       padding-left: $gl-padding;
     }
 
     .median-header {
-      width: 12%;
+      width: 14%;
     }
 
     .event-header {
@@ -111,14 +115,14 @@
           line-height: 19px;
           font-size: 14px;
           font-weight: 600;
-          color: $gl-title-color;
+          color: $gl-text-color;
         }
 
         &.text {
           color: $layout-link-gray;
 
           &.value-col {
-            color: $gl-title-color;
+            color: $gl-text-color;
           }
         }
       }
@@ -141,7 +145,7 @@
 
     .dismiss-icon {
       position: absolute;
-      right: $cycle-analytics-dismiss-icon-color;
+      right: $cycle-analytics-box-padding;
       cursor: pointer;
       color: $cycle-analytics-dismiss-icon-color;
     }
@@ -215,7 +219,6 @@
       border-bottom: 1px solid transparent;
       border-right: 1px solid $border-color;
       background-color: $gray-light;
-      cursor: default;
 
       &.active {
         background-color: transparent;
@@ -232,6 +235,7 @@
       &:hover:not(.active) {
         background-color: $gray-lightest;
         box-shadow: inset 2px 0 0 0 $border-color;
+        cursor: pointer;
       }
 
       &:first-child {
@@ -246,11 +250,11 @@
         float: left;
 
         &.stage-name {
-          width: 70%;
+          width: 65%;
         }
 
         &.stage-median {
-          width: 30%;
+          width: 35%;
         }
       }
 
@@ -260,7 +264,7 @@
 
       .stage-empty,
       .not-available {
-        color: $gl-text-color-light;
+        color: $gl-text-color-secondary;
       }
     }
   }
@@ -327,7 +331,7 @@
         @include text-overflow();
 
         a {
-          color: $gl-dark-link-color;
+          color: $gl-text-color;
         }
       }
     }
@@ -355,7 +359,7 @@
     .issue-link,
     .commit-author-link,
     .issue-author-link {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
 
     // Custom CSS for components
@@ -396,11 +400,11 @@
       }
 
       .item-build-name {
-        color: $gl-title-color;
+        color: $gl-text-color;
       }
 
       .pipeline-id {
-        color: $gl-title-color;
+        color: $gl-text-color;
         padding: 0 3px 0 0;
       }
 
@@ -423,7 +427,7 @@
       }
 
       .fa {
-        color: $gl-text-color-light;
+        color: $gl-text-color-secondary;
         font-size: $code_font_size;
       }
     }
@@ -435,7 +439,7 @@
     width: 75%;
     margin: 0 auto;
     padding-top: 130px;
-    color: $gl-text-color-light;
+    color: $gl-text-color-secondary;
 
     h4 {
       color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/deploy_keys.scss b/app/assets/stylesheets/pages/deploy_keys.scss
new file mode 100644
index 00000000000..2fafe052106
--- /dev/null
+++ b/app/assets/stylesheets/pages/deploy_keys.scss
@@ -0,0 +1,13 @@
+.deploy-keys-list {
+  width: 100%;
+  overflow: auto;
+
+  table {
+    border: 1px solid $table-border-color;
+  }
+}
+
+.deploy-keys-title {
+  padding-bottom: 2px;
+  line-height: 2;
+}
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 80baebd5ea3..46fd19c93f9 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -1,16 +1,15 @@
 .detail-page-header {
   padding: $gl-padding-top 0;
   border-bottom: 1px solid $border-color;
-  color: $gl-text-color-dark;
-  font-size: 16px;
+  color: $gl-text-color;
   line-height: 34px;
 
   .author {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .identifier {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .issue_created_ago,
@@ -23,7 +22,7 @@
   .title {
     margin: 0 0 16px;
     font-size: 2em;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
     padding: 0 0 0.3em;
     border-bottom: 1px solid $white-dark;
   }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 737f6e0f4be..96ba7c40634 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -11,10 +11,10 @@
 
   .diff-header {
     position: relative;
-    background: $background-color;
+    background: $gray-light;
     border-bottom: 1px solid $border-color;
     padding: 10px 16px;
-    color: $gl-diff-text-color;
+    color: $gl-text-color;
     z-index: 10;
     border-radius: 3px 3px 0 0;
 
@@ -38,7 +38,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: $dark-background-color;
+      background-color: $gray-normal;
     }
 
     .diff-toggle-caret {
@@ -50,7 +50,7 @@
     overflow: auto;
     overflow-y: hidden;
     background: $white-light;
-    color: $gl-title-color;
+    color: $gl-text-color;
     border-radius: 0 0 3px 3px;
 
     .unfold {
@@ -187,8 +187,8 @@
 
       img {
         border: 1px solid $white-light;
-        background-image: linear-gradient(45deg, $diff-image-img-bg 25%, transparent 25%, transparent 75%, $diff-image-img-bg 75%, $diff-image-img-bg 100%),
-        linear-gradient(45deg, $diff-image-img-bg 25%, transparent 25%, transparent 75%, $diff-image-img-bg 75%, $diff-image-img-bg 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%;
@@ -380,7 +380,7 @@
         }
 
         cursor: default;
-        color: $gl-title-color;
+        color: $gl-text-color;
       }
 
       &.disabled {
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 6cde9c592de..4af267403d8 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -10,7 +10,7 @@
   }
 
   .ace_gutter-cell {
-    background-color: $background-color;
+    background-color: $gray-light;
   }
 
   .cancel-btn {
@@ -34,7 +34,7 @@
   }
 
   .editor-ref {
-    background: $background-color;
+    background: $gray-light;
     padding-right: $gl-padding;
     border-right: 1px solid $border-color;
     display: block;
@@ -51,8 +51,16 @@
 
   .new-file-name {
     display: inline-block;
-    width: 450px;
+    max-width: 450px;
     float: left;
+
+    @media(max-width: $screen-md-max) {
+      width: 280px;
+    }
+
+    @media(max-width: $screen-sm-max) {
+      width: 180px;
+    }
   }
 
   .file-buttons {
@@ -67,7 +75,8 @@
   .soft-wrap-toggle,
   .license-selector,
   .gitignore-selector,
-  .gitlab-ci-yml-selector {
+  .gitlab-ci-yml-selector,
+  .dockerfile-selector {
     display: inline-block;
     vertical-align: top;
     font-family: $regular_font;
@@ -97,7 +106,8 @@
 
   .gitignore-selector,
   .license-selector,
-  .gitlab-ci-yml-selector {
+  .gitlab-ci-yml-selector,
+  .dockerfile-selector {
     .dropdown {
       line-height: 21px;
     }
@@ -114,3 +124,42 @@
     }
   }
 }
+
+@media(max-width: $screen-xs-max){
+  .file-editor {
+    .file-title {
+      .pull-right {
+        height: auto;
+      }
+    }
+
+    .new-file-name {
+      max-width: none;
+      width: 100%;
+      margin-bottom: 3px;
+    }
+
+    .file-buttons {
+      display: block;
+      width: 100%;
+      margin-bottom: 10px;
+
+      .soft-wrap-toggle {
+        width: 100%;
+        margin: 3px 0;
+      }
+
+      .encoding-selector,
+      .license-selector,
+      .gitignore-selector,
+      .gitlab-ci-yml-selector {
+        display: block;
+        margin: 3px 0;
+
+        button {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index e716f24c8e2..778ef01430e 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -30,19 +30,25 @@
     display: table-cell;
   }
 
+  .environments-name,
   .environments-commit,
   .environments-actions {
     width: 20%;
   }
 
-  .environments-deploy,
-  .environments-build,
   .environments-date {
     width: 10%;
   }
 
-  .environments-name {
-    width: 30%;
+  .environments-deploy,
+  .environments-build {
+    width: 15%;
+  }
+
+  .environment-name,
+  .environments-build-cell,
+  .deployment-column {
+    word-break: break-all;
   }
 
   .deployment-column {
@@ -66,25 +72,25 @@
 
   .external-url,
   .dropdown-new {
-    color: $table-text-gray;
+    color: $gl-text-color-secondary;
   }
 
   .dropdown-menu {
 
     .fa {
       margin-right: 6px;
-      color: $table-text-gray;
+      color: $gl-text-color-secondary;
     }
   }
 
   .build-link,
   .branch-name {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .stop-env-link,
   .external-url {
-    color: $table-text-gray;
+    color: $gl-text-color-secondary;
 
     .stop-env-icon {
       font-size: 14px;
@@ -95,7 +101,7 @@
     .build-column {
 
       .build-link {
-        color: $gl-dark-link-color;
+        color: $gl-text-color;
       }
 
       .avatar {
@@ -115,13 +121,6 @@
 
   .folder-name {
     cursor: pointer;
-
-    .badge {
-      font-weight: normal;
-      background-color: $gray-darker;
-      color: $gl-placeholder-color;
-      vertical-align: baseline;
-    }
   }
 }
 
@@ -136,4 +135,4 @@
       margin-right: 0;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index dc67d411c71..b989d72ce1c 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -5,7 +5,7 @@
 .event-item {
   font-size: $gl-font-size;
   padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top);
-  border-bottom: 1px solid $table-border-color;
+  border-bottom: 1px solid $white-normal;
   color: $list-text-color;
 
   &.event-inline {
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .avatar {
diff --git a/app/assets/stylesheets/pages/explore.scss b/app/assets/stylesheets/pages/explore.scss
deleted file mode 100644
index 9b92128624c..00000000000
--- a/app/assets/stylesheets/pages/explore.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.explore-title {
-  text-align: center;
-
-  h3 {
-    font-weight: normal;
-    font-size: 30px;
-  }
-}
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index a9af7af59e2..d377526e655 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -13,7 +13,7 @@
   .stats {
     float: right;
     line-height: $list-text-height;
-    color: $gl-gray;
+    color: $gl-text-color;
 
     span {
       margin-right: 15px;
@@ -27,12 +27,6 @@
   }
 }
 
-.group-buttons {
-  .notification-dropdown {
-    display: inline-block;
-  }
-}
-
 .groups-header {
   @media (min-width: $screen-sm-min) {
     .nav-links {
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index e2e644dc23b..dae8ccdef6c 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -60,7 +60,7 @@
 
   // Border around images in the help pages.
   img:not(.emoji) {
-    border: 1px solid $table-border-gray;
+    border: 1px solid $white-normal;
     padding: 5px;
     margin: 5px;
     max-height: calc(100vh - 100px);
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 407c0afbac8..324c6cec96a 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -1,3 +1,52 @@
+// Limit MR description for side-by-side diff view
+.fixed-width-container {
+  max-width: $limited-layout-width - ($gl-padding * 2);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.limit-container-width {
+  .detail-page-header {
+    @extend .fixed-width-container;
+  }
+
+  .issuable-details {
+    .detail-page-description,
+    .mr-source-target,
+    .mr-state-widget,
+    .merge-manually {
+      @extend .fixed-width-container;
+    }
+
+    .merge-request-tabs-holder {
+      &.affix {
+        border-bottom: 1px solid $border-color;
+
+        .nav-links {
+          border: 0;
+        }
+      }
+
+      .container-fluid {
+        @extend .fixed-width-container;
+      }
+    }
+  }
+
+  .merge-request-details {
+    .emoji-list-container {
+      @extend .fixed-width-container;
+    }
+  }
+
+  .diffs {
+    .mr-version-controls,
+    .files-changed {
+      @extend .fixed-width-container;
+    }
+  }
+}
+
 .issuable-details {
   section {
     .issuable-discussion {
@@ -5,11 +54,16 @@
     }
   }
 
+  .title {
+    padding: 0;
+    margin: 0;
+    border-bottom: none;
+  }
+
   // Border around images in issue and MR descriptions.
   .description img:not(.emoji) {
-    border: 1px solid $table-border-gray;
+    border: 1px solid $white-normal;
     padding: 5px;
-    margin: 5px;
     max-height: calc(100vh - 100px);
   }
 }
@@ -51,7 +105,7 @@
   .block {
     @include clearfix;
     padding: $gl-padding 0;
-    border-bottom: 1px solid $border-gray-light;
+    border-bottom: 1px solid $border-gray-normal;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
     width: $gutter_inner_width;
@@ -98,10 +152,10 @@
     }
 
     .edit-link {
-      color: $gl-gray;
+      color: $gl-text-color;
 
-      &:hover {
-        color: $md-link-color;
+      &:not([href]):hover {
+        color: rgba($avatar-border, .2);
       }
     }
   }
@@ -134,7 +188,7 @@
   }
 
   .btn-clipboard:hover {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
 
@@ -169,7 +223,7 @@
     }
 
     .no-value {
-      color: $gl-placeholder-color;
+      color: $gl-text-color-secondary;
     }
 
     .sidebar-collapsed-icon {
@@ -178,7 +232,7 @@
 
     .gutter-toggle {
       margin-top: 7px;
-      border-left: 1px solid $border-gray-light;
+      border-left: 1px solid $border-gray-normal;
     }
 
     .assignee .avatar {
@@ -216,7 +270,7 @@
     }
 
     .participants {
-      border-bottom: 1px solid $border-gray-light;
+      border-bottom: 1px solid $border-gray-normal;
     }
 
     .hide-collapsed {
@@ -237,7 +291,7 @@
       color: $issuable-sidebar-color;
 
       &:hover {
-        color: $gl-gray;
+        color: $gl-text-color;
       }
 
       span {
@@ -250,16 +304,16 @@
       }
 
       .avatar:hover {
-        border-color: $issuable-avatar-hover-border;
+        border-color: $issuable-sidebar-color;
       }
 
       .btn-clipboard {
         border: none;
-        color: $issuable-clipboard-color;
+        color: $issuable-sidebar-color;
 
         &:hover {
           background: transparent;
-          color: $gl-gray;
+          color: $gl-text-color;
         }
       }
     }
@@ -278,6 +332,10 @@
     &:hover {
       color: $md-link-color;
       text-decoration: none;
+
+      .avatar {
+        border-color: rgba($avatar-border, .2);
+      }
     }
   }
 
@@ -333,7 +391,7 @@
   margin-left: 5px;
 
   a {
-    color: $gl-placeholder-color;
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -388,6 +446,7 @@
 .issuable-meta {
   display: inline-block;
   line-height: 18px;
+  font-size: 14px;
 }
 
 .js-issuable-selector-wrap {
@@ -414,3 +473,102 @@
     }
   }
 }
+
+.time_tracker {
+  padding-bottom: 0;
+  border-bottom: 0;
+
+
+  .sidebar-collapsed-icon {
+
+    > .stopwatch-svg {
+      display: inline-block;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: $sidebar-collapsed-icon-color;
+    }
+
+    &:hover svg {
+      fill: $gl-text-color;
+    }
+  }
+
+  .help-button,
+  .close-help-button {
+    cursor: pointer;
+  }
+
+  .compare-meter {
+    &.within_estimate {
+      .meter-fill {
+        background: $gl-primary;
+      }
+    }
+
+    &.over_estimate {
+      .meter-fill {
+        background: $red-light;
+      }
+
+      .time-remaining,
+      .compare-value.spent {
+        color: $red-light;
+      }
+    }
+  }
+
+  .meter-container {
+    background: $border-gray-light;
+    border-radius: 3px;
+
+    .meter-fill {
+      max-width: 100%;
+      height: 5px;
+      border-radius: 3px;
+      background: $gl-primary;
+    }
+  }
+
+  .compare-display-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 5px;
+
+    .compare-display {
+      font-size: 13px;
+      color: $compare-display-color;
+
+      .compare-value {
+        color: $gl-text-color;
+      }
+    }
+  }
+
+  .time-tracking-help-state {
+    background: $white-light;
+    margin: 16px -20px 0;
+    padding: 16px 20px;
+    border-top: 1px solid $border-gray-light;
+    border-bottom: 1px solid $border-gray-light;
+
+    a:hover {
+      color: $btn-white-active;
+    }
+  }
+
+  .help-state-toggle-enter-active {
+    transition: all .8s ease;
+  }
+
+  .help-state-toggle-leave-active {
+    transition: all .5s ease;
+  }
+
+  .help-state-toggle-enter,
+  .help-state-toggle-leave-active {
+    opacity: 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 3b47f99df2c..8734a3b1598 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -88,12 +88,12 @@ ul.related-merge-requests > li {
 
   &.closed {
     background: $gray-light;
-    border-color: $issues-border;
+    border-color: $border-color;
   }
 
   &.merged {
     background: $gray-light;
-    border-color: $issues-border;
+    border-color: $border-color;
   }
 }
 
@@ -144,7 +144,7 @@ ul.related-merge-requests > li {
   }
 
   .btn {
-    background-color: $background-color;
-    border: 1px solid $border-gray-light;
+    background-color: $gray-light;
+    border: 1px solid $border-gray-normal;
   }
 }
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 25c91203ff4..21d9b4c54ea 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -98,7 +98,7 @@
   }
 
   .label {
-    padding: 9px;
+    padding: 8px 9px 9px;
     font-size: 14px;
   }
 }
@@ -117,7 +117,7 @@
 
 .manage-labels-list {
   .btn-action {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
 
     .fa {
       font-size: 18px;
@@ -201,6 +201,12 @@
   .label-remove {
     border-left: 1px solid $label-remove-border;
     z-index: 3;
+    border-radius: $label-border-radius;
+    padding: 6px 10px 6px 9px;
+
+    &:hover {
+      box-shadow: inset 0 0 0 80px $label-remove-border;
+    }
   }
 
   .btn {
diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss
index a7c80dce424..68b6c5ecbd4 100644
--- a/app/assets/stylesheets/pages/lint.scss
+++ b/app/assets/stylesheets/pages/lint.scss
@@ -9,3 +9,13 @@
     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 dd27a06fcd2..71ed5b1361a 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -17,14 +17,19 @@
     line-height: 1.5;
 
     p {
-      font-size: 18px;
+      font-size: 16px;
       color: $login-brand-holder-color;
     }
 
     h1:first-child {
       font-weight: normal;
-      margin-bottom: 30px;
+      margin-bottom: 0.68em;
       margin-top: 0;
+      font-size: 34px;
+    }
+
+    h3 {
+      font-size: 22px;
     }
 
     img {
@@ -105,19 +110,19 @@
     li {
       flex: 1;
       text-align: center;
+      border-left: 1px solid $border-color;
 
       &:first-of-type {
+        border-left: none;
         border-top-left-radius: $border-radius-default;
       }
 
       &:last-of-type {
-        border-left: 1px solid $border-color;
         border-top-right-radius: $border-radius-default;
       }
 
       &:not(.active) {
         background-color: $gray-light;
-        border-left: 1px solid $border-color;
       }
 
       a {
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 5f3bbb40ba0..be7193bae04 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -25,7 +25,7 @@
   }
 
   .form-horizontal {
-    margin-top: 5px;
+    margin-top: 20px;
 
     @media (min-width: $screen-sm-min) {
       display: -webkit-flex;
@@ -78,19 +78,48 @@
     float: right;
   }
 
+  .dropdown {
+    width: 100%;
+    margin-top: 5px;
+
+    .dropdown-menu-toggle {
+      vertical-align: middle;
+      width: 100%;
+    }
+
+    @media (min-width: $screen-sm-min) {
+      margin-top: 0;
+      width: 155px;
+    }
+  }
+
   .form-control {
     width: 100%;
     padding-right: 35px;
 
     @media (min-width: $screen-sm-min) {
+      width: 250px;
+    }
+
+    @media (min-width: $screen-md-min) {
       width: 350px;
     }
+
+    &.input-short {
+      @media (min-width: $screen-md-min) {
+        width: 170px;
+      }
+
+      @media (min-width: $screen-lg-min) {
+        width: 210px;
+      }
+    }
   }
 }
 
 .member-search-btn {
   position: absolute;
-  right: 0;
+  right: 4px;
   top: 0;
   height: 35px;
   padding-left: 10px;
@@ -99,4 +128,8 @@
   background: transparent;
   border: 0;
   outline: 0;
+
+  @media (min-width: $screen-sm-min) {
+    right: 160px;
+  }
 }
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 7a90713dd3f..5a9f199fb34 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -274,7 +274,7 @@ $colors: (
   }
 
   .discard-changes-alert {
-    background-color: $background-color;
+    background-color: $gray-light;
     text-align: right;
     padding: $gl-padding-top $gl-padding;
     color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 6234779ac19..45ff9f7ff5f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -3,8 +3,8 @@
  *
  */
 .mr-state-widget {
-  background: $background-color;
-  color: $gl-gray;
+  background: $gray-light;
+  color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: 2px;
 
@@ -21,6 +21,14 @@
       display: inline-block;
       float: left;
 
+      .btn-success.dropdown-toggle .fa {
+        color: inherit;
+      }
+
+      .btn-success.dropdown-toggle:disabled {
+        background-color: $gl-success;
+      }
+
       .accept_merge_request {
         &.ci-pending,
         &.ci-running {
@@ -50,7 +58,7 @@
         padding-right: 0;
 
         a {
-          color: $gl-gray;
+          color: $gl-text-color;
         }
       }
 
@@ -62,7 +70,7 @@
 
   .ci_widget {
     border-bottom: 1px solid $well-inner-border;
-    color: $gl-gray;
+    color: $gl-text-color;
 
     svg {
       margin-right: 4px;
@@ -86,7 +94,7 @@
   }
 
   .normal {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .js-deployment-link {
@@ -96,9 +104,9 @@
   .mr-widget-body {
     h4 {
       font-weight: 600;
-      font-size: 17px;
+      font-size: 16px;
       margin: 5px 0;
-      color: $gl-gray-dark;
+      color: $gl-text-color;
 
       &.has-conflicts .fa-exclamation-triangle {
         color: $gl-warning;
@@ -182,7 +190,7 @@
 }
 
 .label-branch {
-  color: $gl-gray-dark;
+  color: $gl-text-color;
   font-family: $monospace_font;
   font-weight: bold;
   overflow: hidden;
@@ -302,10 +310,6 @@
       left: 0;
       top: 2px;
     }
-
-    .commit-row-info {
-      line-height: 20px;
-    }
   }
 
   .btn-clipboard {
@@ -359,7 +363,7 @@
 
     th {
       background-color: $white-light;
-      color: $gl-placeholder-color;
+      color: $gl-text-color-secondary;
     }
   }
 }
@@ -375,7 +379,7 @@
 }
 
 .mr-version-controls {
-  background: $background-color;
+  background: $gray-light;
   border-bottom: 1px solid $border-color;
   color: $gl-text-color;
 
@@ -416,11 +420,19 @@
 .merge-request-tabs-holder {
   background-color: $white-light;
 
+  .container-limited {
+    max-width: $limited-layout-width;
+  }
+
   &.affix {
     top: 100px;
     left: 0;
     z-index: 10;
     transition: right .15s;
+
+    @media (max-width: $screen-xs-max) {
+      right: 0;
+    }
   }
 
   &:not(.affix) .container-fluid {
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index dfc6079bd15..686b64cdd24 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -25,12 +25,6 @@
   }
 
   .issuable-row {
-    .color-label {
-      border-radius: 2px;
-      padding: 3px !important;
-      margin-right: 7px;
-    }
-
     span a {
       color: $gl-text-color;
       word-wrap: break-word;
@@ -108,13 +102,17 @@
     margin-top: 7px;
 
     .issuable-number {
-      color: $gl-placeholder-color;
+      color: $gl-text-color-secondary;
       margin-right: 5px;
     }
 
     .avatar {
       float: none;
     }
+
+    > a:not(:last-of-type) {
+      margin-right: 5px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index c35d71f9e7b..f984b469609 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -27,6 +27,7 @@
 .new-note,
 .note-edit-form {
   .note-form-actions {
+    position: relative;
     margin-top: $gl-padding;
   }
 
@@ -44,7 +45,7 @@
 .note-textarea {
   display: block;
   padding: 10px 0;
-  color: $gl-gray;
+  color: $gl-text-color;
   font-family: $regular_font;
   border: 0;
 
@@ -62,7 +63,7 @@
 .common-note-form {
   .md-area {
     padding: $gl-padding-top $gl-padding;
-    border: 1px solid $note-form-border-color;
+    border: 1px solid $border-color;
     border-radius: $border-radius-base;
     transition: border-color ease-in-out 0.15s,
                 box-shadow ease-in-out 0.15s;
@@ -109,7 +110,7 @@
   margin: auto;
   margin-top: 0;
   text-align: center;
-  font-size: 13px;
+  font-size: 12px;
 
   @media (max-width: $screen-sm-max) {
     // On smaller devices the warning becomes the fourth item in the list,
@@ -204,7 +205,7 @@
 
 .comment-toolbar {
   padding-top: $gl-padding-top;
-  color: $note-toolbar-color;
+  color: $gl-text-color-secondary;
   border-top: 1px solid $border-color;
 }
 
@@ -265,3 +266,18 @@
     }
   }
 }
+
+.note-edit-warning.settings-message {
+  display: none;
+  padding: 5px 10px;
+  position: absolute;
+  left: 127px;
+  top: 2px;
+
+  @media (max-width: $screen-xs-max) {
+    position: relative;
+    top: 0;
+    left: 0;
+    margin-bottom: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 10eb3d4203e..e2a0253da38 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -43,7 +43,7 @@ ul.notes {
     }
 
     .system-note-message {
-      display: inline-block;
+      display: inline;
 
       &::first-letter {
         text-transform: lowercase;
@@ -55,7 +55,7 @@ ul.notes {
       }
 
       p {
-        display: inline-block;
+        display: inline;
         margin: 0;
 
         &::first-letter {
@@ -166,7 +166,7 @@ ul.notes {
   .note {
     display: block;
     position: relative;
-    border-bottom: 1px solid $table-border-gray;
+    border-bottom: 1px solid $white-normal;
 
     &.note-discussion {
       &.timeline-entry {
@@ -291,14 +291,14 @@ ul.notes {
   font-family: $regular_font;
 
   td {
-    border: 1px solid $table-border-gray;
+    border: 1px solid $white-normal;
     border-left: none;
 
     &.notes_line {
       vertical-align: middle;
       text-align: center;
       padding: 10px 0;
-      background: $background-color;
+      background: $gray-light;
       color: $text-color;
     }
 
@@ -309,7 +309,7 @@ ul.notes {
     }
 
     &.notes_content {
-      background-color: $background-color;
+      background-color: $gray-light;
       border-width: 1px 0;
       padding: 0;
       vertical-align: top;
@@ -345,7 +345,7 @@ ul.notes {
   }
 
   .author_link {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
 
@@ -353,6 +353,14 @@ ul.notes {
   font-size: 14px;
 }
 
+.note-headline-light {
+  display: inline;
+
+  @media (max-width: $screen-xs-min) {
+    display: block;
+  }
+}
+
 .note-headline-light,
 .discussion-headline-light {
   color: $notes-light-color;
@@ -372,7 +380,7 @@ ul.notes {
 .note-actions {
   float: right;
   margin-left: 10px;
-  color: $notes-action-color;
+  color: $gray-darkest;
 }
 
 .note-actions {
@@ -383,10 +391,6 @@ ul.notes {
   .note-action-button {
     margin-left: 10px;
   }
-
-  @media (min-width: $screen-sm-min) {
-    position: relative;
-  }
 }
 
 .discussion-actions {
@@ -411,7 +415,7 @@ ul.notes {
   }
 
   .fa {
-    color: $notes-action-color;
+    color: $gray-darkest;
     position: relative;
     font-size: 17px;
   }
@@ -448,15 +452,10 @@ ul.notes {
   color: $notes-role-color;
   font-size: 12px;
   line-height: 20px;
-  border: 1px solid $notes-role-border-color;
+  border: 1px solid $border-color;
   border-radius: $border-radius-base;
 }
 
-.diff-file .note .note-actions {
-  right: 0;
-  top: 0;
-}
-
 
 /**
  * Line note button on the side of diffs
@@ -527,27 +526,24 @@ ul.notes {
 }
 
 .line-resolve-all {
+  vertical-align: middle;
   display: inline-block;
-  padding: 5px 10px;
-  background-color: $background-color;
+  padding: 6px 10px;
+  background-color: $gray-light;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 
   &.has-next-btn {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    border-right: 0;
   }
 
   .line-resolve-btn {
-    vertical-align: middle;
     margin-right: 5px;
   }
 }
 
-.line-resolve-text {
-  vertical-align: middle;
-}
-
 .line-resolve-btn {
   display: inline-block;
   position: relative;
@@ -566,18 +562,14 @@ ul.notes {
   &.is-active {
     color: $gl-text-green;
 
-    svg path {
+    svg {
       fill: $gl-text-green;
     }
   }
 
   svg {
     position: relative;
-    color: $notes-action-color;
-
-    path {
-      fill: $notes-action-color;
-    }
+    fill: $gray-darkest;
   }
 }
 
@@ -590,3 +582,17 @@ ul.notes {
     }
   }
 }
+
+// Merge request notes in diffs
+.diff-file {
+  // Diff is side by side
+  .notes_content.parallel .note-header .note-headline-light {
+    display: block;
+    position: relative;
+  }
+  // Diff is inline
+  .notes_content .note-header .note-headline-light {
+    display: inline-block;
+    position: relative;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss
index 7d61390a439..bdf07a99daf 100644
--- a/app/assets/stylesheets/pages/notifications.scss
+++ b/app/assets/stylesheets/pages/notifications.scss
@@ -10,19 +10,7 @@
   position: relative;
   top: 1px;
 
-  > .fa {
+  .fa {
     font-size: 18px;
   }
 }
-
-.ns-part {
-  color: $gl-text-green;
-}
-
-.ns-watch {
-  color: $gl-success;
-}
-
-.ns-mute {
-  color: $gl-danger;
-}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 6822f916cc5..8861315d776 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,4 +1,9 @@
 .pipelines {
+  .realtime-loading {
+    font-size: 40px;
+    text-align: center;
+  }
+
   .stage {
     max-width: 90px;
     width: 90px;
@@ -22,17 +27,26 @@
 
   .table.ci-table {
     min-width: 1200px;
+    table-layout: fixed;
+
+    .label {
+      margin-bottom: 3px;
+    }
 
     .pipeline-id {
       color: $black;
     }
 
-    .branch-commit {
-      width: 30%;
+    .pipeline-date,
+    .pipeline-status {
+      width: 10%;
+    }
 
-      .branch-name {
-        max-width: 195px;
-      }
+    .pipeline-info,
+    .pipeline-commit,
+    .pipeline-actions,
+    .pipeline-stages {
+      width: 20%;
     }
   }
 }
@@ -47,6 +61,10 @@
   }
 }
 
+.content-list.pipelines .table-holder {
+  min-height: 300px;
+}
+
 .pipeline-holder {
   width: 100%;
   overflow: auto;
@@ -75,6 +93,10 @@
     td {
       padding: 10px 8px;
     }
+
+    .commit-link {
+      padding: 9px 8px 10px;
+    }
   }
 
   tbody {
@@ -106,7 +128,7 @@
 
     .branch-name {
       font-weight: bold;
-      max-width: 150px;
+      max-width: 120px;
       overflow: hidden;
       display: inline-block;
       white-space: nowrap;
@@ -118,7 +140,7 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $table-text-gray;
+      fill: $gl-text-color-secondary;
     }
 
     .fa {
@@ -132,7 +154,7 @@
 
     .commit-title {
       margin-top: 4px;
-      max-width: 300px;
+      max-width: 225px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -164,12 +186,14 @@
   .stage-cell {
     font-size: 0;
 
-    svg {
-      height: 18px;
-      width: 18px;
-      position: relative;
+    > .stage-container > div > button > span > svg,
+    > .stage-container > button > svg {
+      height: 22px;
+      width: 22px;
+      position: absolute;
+      top: -1px;
+      left: -1px;
       z-index: 2;
-      vertical-align: middle;
       overflow: visible;
     }
 
@@ -187,21 +211,17 @@
           content: '';
           width: 8px;
           position: absolute;
-          right: -7px;
-          bottom: 9px;
+          right: -8px;
+          top: 10px;
           border-bottom: 2px solid $border-color;
         }
       }
-
-      a {
-        display: block;
-      }
     }
   }
 
   .duration,
   .finished-at {
-    color: $table-text-gray;
+    color: $gl-text-color-secondary;
     margin: 4px 0;
 
     .fa {
@@ -222,7 +242,7 @@
 
     .btn {
       margin: 0;
-      color: $table-text-gray;
+      color: $gl-text-color-secondary;
     }
 
     .cancel-retry-btns {
@@ -235,10 +255,10 @@
 
     .dropdown-toggle,
     .dropdown-menu {
-      color: $table-text-gray;
+      color: $gl-text-color-secondary;
 
       .fa {
-        color: $table-text-gray;
+        color: $gl-text-color-secondary;
         font-size: 14px;
       }
 
@@ -272,7 +292,7 @@
   .build-link {
 
     a {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
   }
 
@@ -288,69 +308,162 @@
 }
 
 // Pipeline visualization
+.pipeline-actions {
+  border-bottom: none;
+}
+
+.tab-pane {
+  &.pipelines {
+    .ci-table {
+      min-width: 900px;
+    }
 
-.toggle-pipeline-btn {
-  background-color: $gray-dark;
+    .content-list.pipelines {
+      overflow: auto;
+    }
 
-  &.graph-collapsed {
-    background-color: $white-light;
+    .stage {
+      max-width: 100px;
+      width: 100px;
+    }
+
+    .pipeline-actions {
+      min-width: initial;
+    }
+  }
+
+  &.builds {
+    .ci-table {
+      tr {
+        height: 71px;
+      }
+    }
   }
 }
 
+// Pipeline graph
 .pipeline-graph {
   width: 100%;
-  background-color: $background-color;
+  background-color: $gray-light;
   padding: $gl-padding;
-  overflow: auto;
   white-space: nowrap;
   transition: max-height 0.3s, padding 0.3s;
 
-  &.graph-collapsed {
-    max-height: 0;
-    padding: 0 16px;
+  .stage-column-list,
+  .builds-container > ul {
+    padding: 0;
   }
-}
 
-.pipeline-visualization {
-  position: relative;
+  a {
+    text-decoration: none;
+    color: $gl-text-color-secondary;
+  }
 
-  ul {
-    padding: 0;
+  svg {
+    vertical-align: middle;
+    margin-right: 3px;
   }
-}
 
-.stage-column {
-  display: inline-block;
-  vertical-align: top;
+  .stage-column {
+    display: inline-block;
+    vertical-align: top;
 
-  &:not(:last-child) {
-    margin-right: 44px;
-  }
+    &:not(:last-child) {
+      margin-right: 44px;
+    }
 
-  &.left-margin {
-    &:not(:first-child) {
-      margin-left: 44px;
+    &.left-margin {
+      &:not(:first-child) {
+        margin-left: 44px;
 
-      .left-connector {
-        &::before {
-          content: '';
-          position: absolute;
-          top: 48%;
-          left: -48px;
-          border-top: 2px solid $border-color;
-          width: 48px;
-          height: 1px;
+        .left-connector {
+          &::before {
+            content: '';
+            position: absolute;
+            top: 48%;
+            left: -48px;
+            border-top: 2px solid $border-color;
+            width: 48px;
+            height: 1px;
+          }
         }
       }
     }
-  }
 
-  &.no-margin {
-    margin: 0;
-  }
+    &.no-margin {
+      margin: 0;
+    }
 
-  li {
-    list-style: none;
+    li {
+      list-style: none;
+    }
+
+    &:last-child {
+      .build {
+        // Remove right connecting horizontal line from first build in last stage
+        &:first-child {
+          &::after {
+            border: none;
+          }
+        }
+        // Remove right curved connectors from all builds in last stage
+        &:not(:first-child) {
+          &::after {
+            border: none;
+          }
+        }
+        // Remove opposite curve
+        .curve {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &:first-child {
+      .build {
+        // Remove left curved connectors from all builds in first stage
+        &:not(:first-child) {
+          &::before {
+            border: none;
+          }
+        }
+        // Remove opposite curve
+        .curve {
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    // Curve first child connecting lines in opposite direction
+    .curve {
+      display: none;
+
+      &::before,
+      &::after {
+        content: '';
+        width: 21px;
+        height: 25px;
+        position: absolute;
+        top: -31px;
+        border-top: 2px solid $border-color;
+      }
+
+      &::after {
+        left: -44px;
+        border-right: 2px solid $border-color;
+        border-radius: 0 20px;
+      }
+
+      &::before {
+        right: -44px;
+        border-left: 2px solid $border-color;
+        border-radius: 20px 0 0;
+      }
+    }
   }
 
   .stage-name {
@@ -363,167 +476,114 @@
   }
 
   .build {
-    border: 1px solid $border-color;
-    background-color: $white-light;
     position: relative;
-    padding: 7px 10px 8px;
-    border-radius: 30px;
     width: 186px;
     margin-bottom: 10px;
+    white-space: normal;
+    color: $gl-text-color-secondary;
+
+    // Action Icons in big pipeline-graph nodes
+    > .ci-action-icon-container .ci-action-icon-wrapper {
+      i {
+        color: $border-color;
+        border-radius: 100%;
+        border: 1px solid $border-color;
+        padding: 5px 6px;
+        font-size: 13px;
+        background: $white-light;
+        height: 30px;
+        width: 30px;
 
-    &:hover {
-      background-color: $gray-lighter;
-    }
-
-    &.playable {
-
-      svg {
-        height: 13px;
-        width: 20px;
-        position: relative;
-        top: 1px;
-
-        path {
-          fill: $layout-link-gray;
-        }
-      }
-    }
-
-    .build-content {
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      width: 164px;
-
-      .ci-status-icon {
-        svg {
-          height: 20px;
-          width: 20px;
+        &::before {
+          position: relative;
+          top: 3px;
+          left: 3px;
         }
-      }
-
-      .tooltip {
-        white-space: nowrap;
 
-        .tooltip-inner {
-          overflow: hidden;
-          text-overflow: ellipsis;
+        &:hover {
+          color: $gl-text-color;
+          background-color: $stage-hover-bg;
+          border: 1px solid $stage-hover-bg;
         }
       }
 
-      .ci-status-text {
-        width: 135px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-        display: inline-block;
-        position: relative;
-        top: -1px;
-      }
-
-      a {
-        color: $gl-text-color-light;
-        text-decoration: none;
+      .ci-play-icon {
+        padding: 5px 5px 5px 7px;
       }
+    }
 
-      .dropdown-menu-toggle {
-        background-color: transparent;
-        border: none;
-        width: auto;
-        padding: 0;
-        color: $gl-text-color-light;
-        flex-grow: 1;
-
-        .ci-status-text {
-          max-width: 112px;
-          width: auto;
-        }
-      }
+    > .ci-action-icon-container {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+    }
 
-      .grouped-pipeline-dropdown {
-        padding: 0;
-        width: 186px;
-        left: auto;
-        right: -197px;
-        top: -9px;
+    .ci-status-icon svg {
+      height: 20px;
+      width: 20px;
+    }
 
-        ul {
-          max-height: 245px;
-          overflow: auto;
+    .dropdown-menu-toggle {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      color: $gl-text-color-secondary;
 
-          li:first-child {
-            padding-top: 8px;
-          }
+      &:focus {
+        outline: none;
+      }
 
-          li:last-child {
-            padding-bottom: 8px;
-          }
-        }
+      &:hover {
+        color: $gl-text-color;
 
-        a {
+        .dropdown-counter-badge {
           color: $gl-text-color;
-          padding: 7px 8px 8px;
-
-          &:hover {
-            background-color: $blue-light-transparent;
-            border-radius: 3px;
-
-            .ci-status-text {
-              text-decoration: none;
-            }
-          }
-        }
-
-        svg {
-          width: 14px;
-          height: 14px;
         }
+      }
+    }
 
-        .ci-status-text {
-          width: 112px;
-        }
+    > .build-content {
+      display: inline-block;
+      padding: 8px 10px 9px;
+      width: 100%;
+      border: 1px solid $border-color;
+      border-radius: 30px;
+      background-color: $white-light;
 
-        .arrow {
-          &::before,
-          &::after {
-            content: '';
-            display: inline-block;
-            position: absolute;
-            width: 0;
-            height: 0;
-            border-color: transparent;
-            border-style: solid;
-            top: 18px;
-          }
+      &:hover {
+        background-color: $stage-hover-bg;
+        border: 1px solid $stage-hover-border;
+        color: $gl-text-color;
+      }
+    }
 
-          &::before {
-            left: -5px;
-            margin-top: -6px;
-            border-width: 7px 5px 7px 0;
-            border-right-color: $border-color;
-          }
 
-          &::after {
-            left: -4px;
-            margin-top: -9px;
-            border-width: 10px 7px 10px 0;
-            border-right-color: $white-light;
-          }
-        }
+    .arrow {
+      &::before,
+      &::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+        top: 18px;
       }
 
-      .badge {
-        background-color: $gray-darker;
-        color: $gl-text-color-light;
-        font-weight: normal;
-        margin-left: $btn-xs-side-margin;
+      &::before {
+        left: -5px;
+        margin-top: -6px;
+        border-width: 7px 5px 7px 0;
+        border-right-color: $border-color;
       }
-    }
 
-    svg {
-      vertical-align: middle;
-      margin-right: 5px;
+      &::after {
+        left: -4px;
+        margin-top: -9px;
+        border-width: 10px 7px 10px 0;
+        border-right-color: $white-light;
+      }
     }
 
     // Connect first build in each stage with right horizontal line
@@ -579,110 +639,302 @@
       }
     }
   }
+}
 
-  &:last-child {
-    .build {
-      // Remove right connecting horizontal line from first build in last stage
-      &:first-child {
-        &::after {
-          border: none;
-        }
-      }
-      // Remove right curved connectors from all builds in last stage
-      &:not(:first-child) {
-        &::after {
-          border: none;
-        }
-      }
-      // Remove opposite curve
-      .curve {
-        &::before {
-          display: none;
-        }
-      }
+// Triggers the dropdown in the big pipeline graph
+.dropdown-counter-badge {
+  color: $border-color;
+  font-weight: 100;
+  font-size: 15px;
+  position: absolute;
+  right: 5px;
+  top: 8px;
+}
+
+.ci-status-text {
+  max-width: 110px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  display: inline-block;
+  position: relative;
+  font-weight: 200;
+}
+
+// Dropdown button in mini pipeline graph
+.mini-pipeline-graph-dropdown-toggle {
+  border-radius: 100px;
+  background-color: $white-light;
+  border-width: 1px;
+  border-style: solid;
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  transition: all 0.2s linear;
+  position: relative;
+
+  > .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;
     }
   }
 
-  &:first-child {
-    .build {
-      // Remove left curved connectors from all builds in first stage
-      &:not(:first-child) {
-        &::before {
-          border: none;
-        }
-      }
-      // Remove opposite curve
-      .curve {
-        &::after {
-          display: none;
-        }
-      }
+  // Dropdown button animation in mini pipeline graph
+  &.ci-status-icon-success {
+    border-color: $gl-success;
+    color: $gl-success;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-success, 0.1);
+      border-color: $gl-success;
     }
   }
 
-  // Curve first child connecting lines in opposite direction
-  .curve {
-    display: none;
+  &.ci-status-icon-failed {
+    border-color: $gl-danger;
+    color: $gl-danger;
 
-    &::before,
-    &::after {
-      content: '';
-      width: 21px;
-      height: 25px;
-      position: absolute;
-      top: -32px;
-      border-top: 2px solid $border-color;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-danger, 0.1);
+      border-color: $gl-danger;
     }
+  }
 
-    &::after {
-      left: -44px;
-      border-right: 2px solid $border-color;
-      border-radius: 0 20px;
+  &.ci-status-icon-pending,
+  &.ci-status-icon-success_with_warnings {
+    border-color: $gl-warning;
+    color: $gl-warning;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-warning, 0.1);
+      border-color: $gl-warning;
     }
+  }
 
-    &::before {
-      right: -44px;
-      border-left: 2px solid $border-color;
-      border-radius: 20px 0 0;
+  &.ci-status-icon-running {
+    border-color: $blue-normal;
+    color: $blue-normal;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($blue-normal, 0.1);
+      border-color: $blue-normal;
     }
   }
-}
 
-.pipeline-actions {
-  border-bottom: none;
+  &.ci-status-icon-canceled,
+  &.ci-status-icon-disabled,
+  &.ci-status-icon-not-found,
+  &.ci-status-icon-manual {
+    border-color: $gl-text-color;
+    color: $gl-text-color;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-text-color, 0.1);
+      border-color: $gl-text-color;
+    }
+  }
+
+  &.ci-status-icon-created,
+  &.ci-status-icon-skipped {
+    border-color: $gray-darkest;
+    color: $gray-darkest;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gray-darkest, 0.1);
+      border-color: $gray-darkest;
+    }
+  }
 }
 
-.toggle-pipeline-btn {
+// dropdown content for big and mini pipeline
+.big-pipeline-graph-dropdown-menu,
+.mini-pipeline-graph-dropdown-menu {
+  width: 195px;
+  max-width: 195px;
 
-  .fa {
-    color: $dropdown-header-color;
+  li {
+    padding: 2px 3px;
+  }
+
+  .scrollable-menu {
+    max-height: 245px;
+    overflow: auto;
+  }
+
+  // Loading icon
+  .builds-dropdown-loading {
+    margin: 0 auto;
+    width: 20px;
+  }
+
+  // Action icon on the right
+  a.ci-action-icon-wrapper {
+    color: $action-icon-color;
+    border: 1px solid $action-icon-color;
+    border-radius: 20px;
+    width: 22px;
+    height: 22px;
+    padding: 2px 0 0 5px;
+    cursor: pointer;
+    float: right;
+    margin: -26px 9px 0 0;
+    font-size: 12px;
+    background-color: $white-light;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: $gl-text-color;
+      background-color: $stage-hover-bg;
+      border: 1px solid transparent;
+    }
+  }
+
+  // link to the build
+  .mini-pipeline-graph-dropdown-item {
+    padding: 3px 7px 4px;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.428571429;
+    white-space: nowrap;
+    margin: 0 5px;
+    border-radius: 3px;
+
+    // build name
+    .ci-build-text {
+      font-weight: 200;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: 90px;
+      color: $gl-text-color-secondary;
+      margin-left: 2px;
+      display: inline-block;
+      top: 1px;
+      vertical-align: text-bottom;
+      position: relative;
+    }
+
+    // status icon on the left
+    .ci-status-icon {
+      top: 3px;
+      position: relative;
+
+      > svg {
+        overflow: visible;
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      outline: none;
+      text-decoration: none;
+      color: $gl-text-color;
+      background-color: $stage-hover-bg;
+    }
   }
 }
 
-.tab-pane {
+// Dropdown in the big pipeline graph
+.big-pipeline-graph-dropdown-menu {
+  width: 195px;
+  min-width: 195px;
+  left: auto;
+  right: -195px;
+  top: -4px;
+  box-shadow: 0 1px 5px $black-transparent;
 
-  &.pipelines {
+  .mini-pipeline-graph-dropdown-item {
+    .ci-status-icon {
+      top: -1px;
+    }
+  }
+}
 
-    .ci-table {
-      min-width: 900px;
+/**
+ * Top arrow in the dropdown in the mini pipeline graph
+ */
+.mini-pipeline-graph-dropdown-menu {
+  .arrow-up {
+    &::before,
+    &::after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+      top: -6px;
+      left: 2px;
+      border-width: 0 5px 6px;
     }
 
-    .stage {
-      max-width: 100px;
-      width: 100px;
+    &::before {
+      border-width: 0 5px 5px;
+      border-bottom-color: $border-color;
     }
 
-    .pipeline-actions {
-      min-width: initial;
+    &::after {
+      margin-top: 1px;
+      border-bottom-color: $white-light;
     }
   }
+}
+
+/**
+ * Terminal
+ */
+.terminal-icon {
+  margin-left: 3px;
+}
+
+.terminal-container {
+  .content-block {
+    border-bottom: none;
+  }
 
-  &.builds {
+  #terminal {
+    margin-top: 10px;
+    min-height: 450px;
+    box-sizing: border-box;
 
-    .ci-table {
-      tr {
-        height: 71px;
-      }
+    > div {
+      min-height: 450px;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index f8677f93fe0..722b3006f7c 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -60,8 +60,8 @@
 
 .account-well {
   padding: 10px;
-  background-color: $help-well-bg;
-  border: 1px solid $help-well-border;
+  background-color: $gray-light;
+  border: 1px solid $border-color;
   border-radius: $border-radius-base;
 
   ul {
@@ -136,7 +136,7 @@
 .provider-btn-group {
   display: inline-block;
   margin-right: 10px;
-  border: 1px solid $provider-btn-group-border;
+  border: 1px solid $border-color;
   border-radius: 3px;
 
   &:last-child {
@@ -147,7 +147,7 @@
 .provider-btn-image {
   display: inline-block;
   padding: 5px 10px;
-  border-right: 1px solid $provider-btn-group-border;
+  border-right: 1px solid $border-color;
 
   > img {
     width: 20px;
@@ -198,7 +198,7 @@
 }
 
 .personal-access-tokens-never-expires-label {
-  color: $personal-access-tokens-disabled-label-color;
+  color: $note-disabled-comment-color;
 }
 
 .datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
@@ -216,8 +216,8 @@
   }
 }
 
-.user-profile {
 
+.user-profile {
   .cover-controls a {
     margin-left: 5px;
   }
@@ -231,8 +231,11 @@
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  .user-profile-nav {
+    font-size: 0;
+  }
 
+  @media (max-width: $screen-xs-max) {
     .cover-block {
       padding-top: 20px;
     }
@@ -253,6 +256,12 @@
         }
       }
     }
+
+    .user-profile-nav {
+      a {
+        margin-right: 0;
+      }
+    }
   }
 }
 
@@ -262,3 +271,13 @@ table.u2f-registrations {
     border-right: solid 1px transparent;
   }
 }
+
+.oauth-application-show {
+  .scope-name {
+    font-weight: 600;
+  }
+
+  .scopes-list {
+    padding-left: 18px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index f8da0983b77..100ace41f2a 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -22,8 +22,8 @@
         background: $theme-graphite;
       }
 
-      &.ui_gray {
-        background: $theme-gray;
+      &.ui_black {
+        background: $theme-black;
       }
 
       &.ui_green {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 6e0f6b1cd81..9455ba3b98a 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -6,12 +6,6 @@
   }
 }
 
-.no-ssh-key-message,
-.project-limit-message {
-  background-color: $project-limit-message-bg;
-  margin-bottom: 0;
-}
-
 .new_project,
 .edit-project {
 
@@ -32,7 +26,7 @@
       margin-bottom: 5px;
     }
 
-    &> .form-group {
+    & > .form-group {
       padding-left: 0;
     }
   }
@@ -79,7 +73,7 @@
       border: 1px solid $border-color;
     }
 
-    &+ .select2 a {
+    & + .select2 a {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
@@ -99,7 +93,6 @@
   .group-avatar {
     float: none;
     margin: 0 auto;
-    border: none;
 
     &.identicon {
       border-radius: 50%;
@@ -151,8 +144,6 @@
 
 .project-repo-buttons,
 .group-buttons {
-  margin-top: 15px;
-
   .btn {
     @include btn-gray;
     padding: 3px 10px;
@@ -181,11 +172,9 @@
     }
   }
 
-  .download-button,
-  .dropdown-toggle,
-  .notification-dropdown,
-  .project-dropdown {
-    margin-left: 10px;
+  .project-action-button {
+    margin: 15px 5px 0;
+    vertical-align: top;
   }
 
   .notification-dropdown .dropdown-menu {
@@ -201,13 +190,15 @@
   .count-buttons {
     display: inline-block;
     vertical-align: top;
+    margin-top: 15px;
   }
 
   .project-clone-holder {
     display: inline-block;
+    margin: 15px 5px 0 0;
 
     input {
-      height: 29px;
+      height: 28px;
     }
   }
 
@@ -261,7 +252,7 @@
       line-height: 13px;
       padding: $gl-vert-padding $gl-padding;
       letter-spacing: .4px;
-      padding: 7px 14px;
+      padding: 6px 14px;
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
@@ -301,7 +292,7 @@
     .option-title {
       font-weight: normal;
       display: inline-block;
-      color: $gl-gray-dark;
+      color: $gl-text-color;
     }
 
     .option-descr {
@@ -340,7 +331,7 @@
 a.deploy-project-label {
   padding: 5px;
   margin-right: 5px;
-  color: $gl-gray;
+  color: $gl-text-color;
   background-color: $row-hover;
 
   &:hover {
@@ -381,7 +372,7 @@ a.deploy-project-label {
   }
 
   a {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .dropdown-menu {
@@ -420,13 +411,13 @@ a.deploy-project-label {
         width: 100px;
         height: 100px;
         background-color: $gray-light;
-        border: 1px solid $gray-dark;
+        border: 1px solid $white-normal;
         margin: 0 auto;
         border-radius: 50%;
 
         i {
           font-size: 100px;
-          color: $gray-dark;
+          color: $white-normal;
         }
       }
 
@@ -435,7 +426,7 @@ a.deploy-project-label {
         width: 100%;
         height: 100%;
         padding-top: $gl-padding;
-        color: $gl-gray;
+        color: $gl-text-color;
 
         .caption {
           min-height: 30px;
@@ -498,6 +489,7 @@ a.deploy-project-label {
 
 .project-stats {
   font-size: 0;
+  text-align: center;
   border-bottom: 1px solid $border-color;
 
   .nav {
@@ -536,7 +528,7 @@ a.deploy-project-label {
   }
 
   li.missing {
-    border: 1px dashed $border-gray-light;
+    border: 1px dashed $border-gray-normal;
     border-radius: $border-radius-default;
 
     a {
@@ -560,7 +552,7 @@ pre.light-well {
   margin: 0 7px 7px;
 
   h5 {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .light-well {
@@ -591,15 +583,25 @@ pre.light-well {
   @include basic-list;
 
   .project-row {
-    border-color: $table-border-color;
+    border-color: $white-normal;
 
     .project-full-name {
       @include str-truncated;
+
+      @media (max-width: $screen-xs-max) {
+        max-width: 50%;
+      }
     }
 
     .controls {
       line-height: $list-text-height;
 
+      .badge {
+        @media (max-width: $screen-xs-max) {
+          display: none;
+        }
+      }
+
       a:hover {
         text-decoration: none;
       }
@@ -613,6 +615,12 @@ pre.light-well {
         top: 2px;
       }
     }
+
+    .description p {
+      @media (max-width: $screen-xs-max) {
+        max-width: 50%;
+      }
+    }
   }
 
   .bottom {
@@ -626,7 +634,6 @@ pre.light-well {
   margin: 0;
 }
 
-
 .activity-filter-block {
   .controls {
     padding-bottom: 7px;
@@ -635,6 +642,12 @@ pre.light-well {
   }
 }
 
+.commits-search-form {
+  .input-short {
+    min-width: 200px;
+  }
+}
+
 .project-last-commit {
   @media (min-width: $screen-sm-min) {
     margin-top: $gl-padding;
@@ -643,7 +656,7 @@ pre.light-well {
   &.container-fluid {
     padding-top: 12px;
     padding-bottom: 12px;
-    background-color: $background-color;
+    background-color: $gray-light;
     border: 1px solid $border-color;
     border-right-width: 0;
     border-left-width: 0;
@@ -665,7 +678,7 @@ pre.light-well {
   }
 
   .commit-row-message {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 
   .commit_short_id {
@@ -753,7 +766,7 @@ pre.light-well {
 
 .protected-branches-list {
   a {
-    color: $gl-gray;
+    color: $gl-text-color;
 
     &:hover {
       color: $gl-link-color;
@@ -813,7 +826,31 @@ pre.light-well {
 
 .compare-form-group {
   .dropdown-menu {
-    width: 300px;
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: 300px;
+    }
+  }
+
+  + .compare-ellipsis {
+    width: 100%;
+    vertical-align: middle;
+    text-align: center;
+    margin-top: -20px;
+
+    @media (min-width: $screen-sm-min) {
+      margin-top: 0;
+      width: auto;
+    }
+  }
+
+  .inline-input-group {
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: 250px;
+    }
   }
 }
 
@@ -888,3 +925,23 @@ pre.light-well {
     width: 30%;
   }
 }
+
+.services-installation-info .row {
+  margin-bottom: 10px;
+}
+
+.service-installation {
+  padding: 32px;
+  margin: 32px;
+  border-radius: 3px;
+  background-color: $white-light;
+
+  h3 {
+    margin-top: 0;
+  }
+
+  hr {
+    margin: 32px 0;
+    border-color: $border-color;
+  }
+}
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 63d0a34e610..12bff32bbf3 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -14,6 +14,20 @@
   }
 }
 
+.search form:hover,
+.file-finder-input:hover,
+.issuable-search-form:hover,
+.search-text-input:hover,
+textarea:hover,
+.form-control:hover {
+  border-color: lighten($dropdown-input-focus-border, 20%);
+  box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
+}
+
+input[type="checkbox"]:hover {
+  box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%), 0 0 0 1px lighten($search-input-focus-shadow-color, 20%);
+}
+
 .search {
   margin-right: 10px;
   margin-left: 10px;
@@ -51,9 +65,9 @@
     border-radius: $border-radius-default;
     font-size: 14px;
     font-style: normal;
-    color: $location-badge-color;
+    color: $note-disabled-comment-color;
     display: inline-block;
-    background-color: $location-badge-bg;
+    background-color: $gray-normal;
     vertical-align: top;
     cursor: default;
   }
@@ -140,7 +154,7 @@
 
     .search-input-wrap {
       i {
-        color: $location-icon-active-color;
+        color: $layout-link-gray;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 51c926608f9..a28a87ed4f8 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -1,5 +1,5 @@
 .settings-list-icon {
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
   font-size: $settings-icon-size;
   line-height: 42px;
 }
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 5084b466722..f19275770be 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -1,6 +1,6 @@
 .container-fluid {
   .ci-status {
-    padding: 2px 7px;
+    padding: 2px 7px 4px;
     margin-right: 10px;
     border: 1px solid $gray-darker;
     white-space: nowrap;
@@ -15,8 +15,7 @@
       height: 13px;
       width: 13px;
       position: relative;
-      top: 1px;
-      margin-right: 3px;
+      top: 2px;
       overflow: visible;
     }
 
@@ -25,7 +24,7 @@
       border-color: $gl-danger;
 
       &:not(span):hover {
-        background-color: rgba( $gl-danger, .07);
+        background-color: rgba($gl-danger, .07);
       }
 
       svg {
@@ -39,7 +38,7 @@
       border-color: $gl-success;
 
       &:not(span):hover {
-        background-color: rgba( $gl-success, .07);
+        background-color: rgba($gl-success, .07);
       }
 
       svg {
@@ -52,7 +51,7 @@
       border-color: $gl-info;
 
       &:not(span):hover {
-        background-color: rgba( $gl-info, .07);
+        background-color: rgba($gl-info, .07);
       }
 
       svg {
@@ -62,15 +61,15 @@
 
     &.ci-canceled,
     &.ci-disabled {
-      color: $gl-gray;
-      border-color: $gl-gray;
+      color: $gl-text-color;
+      border-color: $gl-text-color;
 
       &:not(span):hover {
-        background-color: rgba( $gl-gray, .07);
+        background-color: rgba($gl-text-color, .07);
       }
 
       svg {
-        fill: $gl-gray;
+        fill: $gl-text-color;
       }
     }
 
@@ -79,7 +78,7 @@
       border-color: $gl-warning;
 
       &:not(span):hover {
-        background-color: rgba( $gl-warning, .07);
+        background-color: rgba($gl-warning, .07);
       }
 
       svg {
@@ -92,7 +91,7 @@
       border-color: $blue-normal;
 
       &:not(span):hover {
-        background-color: rgba( $blue-normal, .07);
+        background-color: rgba($blue-normal, .07);
       }
 
       svg {
@@ -102,15 +101,28 @@
 
     &.ci-created,
     &.ci-skipped {
-      color: $table-text-gray;
-      border-color: $table-text-gray;
+      color: $gl-text-color-secondary;
+      border-color: $gl-text-color-secondary;
 
       &:not(span):hover {
-        background-color: rgba( $table-text-gray, .07);
+        background-color: rgba($gl-text-color-secondary, .07);
       }
 
       svg {
-        fill: $table-text-gray;
+        fill: $gl-text-color-secondary;
+      }
+    }
+
+    &.ci-manual {
+      color: $gl-text-color;
+      border-color: $gl-text-color;
+
+      &:not(span):hover {
+        background-color: rgba($gl-text-color, .07);
+      }
+
+      svg {
+        fill: $gl-text-color;
       }
     }
   }
@@ -123,3 +135,9 @@
     left: 5px;
   }
 }
+
+.ci-status-link {
+  svg {
+    overflow: visible;
+  }
+}
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 508b30f3947..01675acc62e 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -90,7 +90,7 @@
         }
 
         p {
-          color: $gl-text-color-dark;
+          color: $gl-text-color;
         }
       }
 
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 20ad63be045..4cce1c363eb 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -14,14 +14,15 @@
 
   .add-to-tree {
     vertical-align: top;
+    padding: 6px 10px;
   }
 
   .tree-table {
     margin-bottom: 0;
 
     tr {
-      border-bottom: 1px solid $table-border-gray;
-      border-top: 1px solid $table-border-gray;
+      border-bottom: 1px solid $white-normal;
+      border-top: 1px solid $white-normal;
 
       td,
       th {
@@ -39,7 +40,7 @@
 
       .commit-history-link-spacer {
         margin: 0 10px;
-        color: $table-border-color;
+        color: $white-normal;
       }
 
       &:hover {
@@ -53,7 +54,7 @@
 
       &.selected {
         td {
-          background: $gray-dark;
+          background: $white-normal;
           border-top: 1px solid $border-gray-dark;
           border-bottom: 1px solid $border-gray-dark;
         }
@@ -77,7 +78,7 @@
 
       i,
       a {
-        color: $gl-dark-link-color;
+        color: $gl-text-color;
       }
 
       img {
@@ -103,21 +104,21 @@
     padding-right: 8px;
 
     .commit-author-name {
-      color: $gl-gray;
+      color: $gl-text-color;
     }
   }
 
   .tree-time-ago {
     min-width: 135px;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 
   .tree-commit {
     max-width: 320px;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
 
     .tree-commit-link {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
 
       &:hover {
         text-decoration: underline;
@@ -133,21 +134,18 @@
 
 .blob-commit-info {
   list-style: none;
-  padding: $gl-padding;
-  background: $background-color;
+  background: $gray-light;
+  padding: 6px 0;
   border: 1px solid $border-color;
   border-bottom: none;
   margin: 0;
 
-  .commit {
-    padding-top: 0;
-    padding-bottom: 0;
+  .table-list-cell {
+    border-bottom: none;
+  }
 
-    .commit-row-title {
-      .commit-row-message {
-        font-weight: normal;
-      }
-    }
+  .commit-actions {
+    width: 200px;
   }
 }
 
@@ -172,7 +170,7 @@
   position: relative;
   z-index: 2;
 
-  .download-button {
+  .project-action-button {
     margin-left: $btn-side-margin;
   }
 }
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index b9f81533150..d5783e14b21 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -15,7 +15,7 @@
   }
 
   .wiki-last-edit-by {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
 
     strong {
       color: $gl-text-color;
@@ -24,7 +24,7 @@
 
   .light {
     font-weight: normal;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 
   .git-access-header {
diff --git a/app/assets/stylesheets/pages/xterm.scss b/app/assets/stylesheets/pages/xterm.scss
index 9f9d630978a..b085c56390d 100644
--- a/app/assets/stylesheets/pages/xterm.scss
+++ b/app/assets/stylesheets/pages/xterm.scss
@@ -18,7 +18,7 @@
   $l-blue: #81a2be;
   $l-magenta: #b294bb;
   $l-cyan: #8abeb7;
-  $l-white: $ci-text-color;
+  $l-white: $gray-darkest;
 
   /*
   * xterm colors
diff --git a/app/controllers/admin/application_settings_controller.rb b/app/controllers/admin/application_settings_controller.rb
index c2bb8464824..1b4987dd738 100644
--- a/app/controllers/admin/application_settings_controller.rb
+++ b/app/controllers/admin/application_settings_controller.rb
@@ -67,69 +67,78 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
     params.delete(:domain_blacklist_raw) if params[:domain_blacklist_file]
 
     params.require(:application_setting).permit(
-      :default_projects_limit,
-      :default_branch_protection,
-      :signup_enabled,
-      :signin_enabled,
-      :require_two_factor_authentication,
-      :two_factor_grace_period,
-      :gravatar_enabled,
-      :sign_in_text,
-      :after_sign_up_text,
-      :help_page_text,
-      :home_page_url,
+      application_setting_params_ce
+    )
+  end
+
+  def application_setting_params_ce
+    [
+      :admin_notification_email,
       :after_sign_out_path,
-      :max_attachment_size,
-      :session_expire_delay,
+      :after_sign_up_text,
+      :akismet_api_key,
+      :akismet_enabled,
+      :container_registry_token_expire_delay,
+      :default_branch_protection,
+      :default_group_visibility,
       :default_project_visibility,
+      :default_projects_limit,
       :default_snippet_visibility,
-      :default_group_visibility,
-      :domain_whitelist_raw,
       :domain_blacklist_enabled,
-      :domain_blacklist_raw,
       :domain_blacklist_file,
-      :version_check_enabled,
-      :admin_notification_email,
-      :user_oauth_applications,
-      :user_default_external,
-      :shared_runners_enabled,
-      :shared_runners_text,
+      :domain_blacklist_raw,
+      :domain_whitelist_raw,
+      :email_author_in_body,
+      :enabled_git_access_protocol,
+      :gravatar_enabled,
+      :help_page_text,
+      :home_page_url,
+      :housekeeping_bitmaps_enabled,
+      :housekeeping_enabled,
+      :housekeeping_full_repack_period,
+      :housekeeping_gc_period,
+      :housekeeping_incremental_repack_period,
+      :html_emails_enabled,
+      :koding_enabled,
+      :koding_url,
+      :plantuml_enabled,
+      :plantuml_url,
       :max_artifacts_size,
+      :max_attachment_size,
       :metrics_enabled,
       :metrics_host,
-      :metrics_port,
-      :metrics_pool_size,
-      :metrics_timeout,
       :metrics_method_call_threshold,
+      :metrics_packet_size,
+      :metrics_pool_size,
+      :metrics_port,
       :metrics_sample_interval,
+      :metrics_timeout,
       :recaptcha_enabled,
-      :recaptcha_site_key,
       :recaptcha_private_key,
-      :sentry_enabled,
-      :sentry_dsn,
-      :akismet_enabled,
-      :akismet_api_key,
-      :koding_enabled,
-      :koding_url,
-      :email_author_in_body,
-      :html_emails_enabled,
+      :recaptcha_site_key,
       :repository_checks_enabled,
-      :metrics_packet_size,
+      :require_two_factor_authentication,
+      :session_expire_delay,
+      :sign_in_text,
+      :signin_enabled,
+      :signup_enabled,
+      :sentry_dsn,
+      :sentry_enabled,
       :send_user_confirmation_email,
-      :container_registry_token_expire_delay,
-      :enabled_git_access_protocol,
+      :shared_runners_enabled,
+      :shared_runners_text,
       :sidekiq_throttling_enabled,
       :sidekiq_throttling_factor,
-      :housekeeping_enabled,
-      :housekeeping_bitmaps_enabled,
-      :housekeeping_incremental_repack_period,
-      :housekeeping_full_repack_period,
-      :housekeeping_gc_period,
+      :two_factor_grace_period,
+      :user_default_external,
+      :user_oauth_applications,
+      :version_check_enabled,
+
+      disabled_oauth_sign_in_sources: [],
+      import_sources: [],
       repository_storages: [],
       restricted_visibility_levels: [],
-      import_sources: [],
-      disabled_oauth_sign_in_sources: [],
       sidekiq_throttling_queues: []
-    )
+    ]
   end
 end
diff --git a/app/controllers/admin/applications_controller.rb b/app/controllers/admin/applications_controller.rb
index 471d24934a0..62f62e99a97 100644
--- a/app/controllers/admin/applications_controller.rb
+++ b/app/controllers/admin/applications_controller.rb
@@ -1,5 +1,8 @@
 class Admin::ApplicationsController < Admin::ApplicationController
+  include OauthApplications
+
   before_action :set_application, only: [:show, :edit, :update, :destroy]
+  before_action :load_scopes, only: [:new, :edit]
 
   def index
     @applications = Doorkeeper::Application.where("owner_id IS NULL")
@@ -47,6 +50,6 @@ class Admin::ApplicationsController < Admin::ApplicationController
 
   # Only allow a trusted parameter "white list" through.
   def application_params
-    params[:doorkeeper_application].permit(:name, :redirect_uri)
+    params[:doorkeeper_application].permit(:name, :redirect_uri, :scopes)
   end
 end
diff --git a/app/controllers/admin/deploy_keys_controller.rb b/app/controllers/admin/deploy_keys_controller.rb
index 285e8495342..4f6a7e9e2cb 100644
--- a/app/controllers/admin/deploy_keys_controller.rb
+++ b/app/controllers/admin/deploy_keys_controller.rb
@@ -10,7 +10,7 @@ class Admin::DeployKeysController < Admin::ApplicationController
   end
 
   def create
-    @deploy_key = deploy_keys.new(deploy_key_params)
+    @deploy_key = deploy_keys.new(deploy_key_params.merge(user: current_user))
 
     if @deploy_key.save
       redirect_to admin_deploy_keys_path
@@ -39,6 +39,6 @@ class Admin::DeployKeysController < Admin::ApplicationController
   end
 
   def deploy_key_params
-    params.require(:deploy_key).permit(:key, :title)
+    params.require(:deploy_key).permit(:key, :title, :can_push)
   end
 end
diff --git a/app/controllers/admin/groups_controller.rb b/app/controllers/admin/groups_controller.rb
index 1e3d194e9f9..b7722a1d15d 100644
--- a/app/controllers/admin/groups_controller.rb
+++ b/app/controllers/admin/groups_controller.rb
@@ -1,17 +1,18 @@
 class Admin::GroupsController < Admin::ApplicationController
-  before_action :group, only: [:edit, :show, :update, :destroy, :project_update, :members_update]
+  before_action :group, only: [:edit, :update, :destroy, :project_update, :members_update]
 
   def index
-    @groups = Group.all
+    @groups = Group.with_statistics
     @groups = @groups.sort(@sort = params[:sort])
     @groups = @groups.search(params[:name]) if params[:name].present?
     @groups = @groups.page(params[:page])
   end
 
   def show
+    @group = Group.with_statistics.joins(:route).group('routes.path').find_by_full_path(params[:id])
     @members = @group.members.order("access_level DESC").page(params[:members_page])
     @requesters = AccessRequestsFinder.new(@group).execute(current_user)
-    @projects = @group.projects.page(params[:projects_page])
+    @projects = @group.projects.with_statistics.page(params[:projects_page])
   end
 
   def new
@@ -60,7 +61,11 @@ class Admin::GroupsController < Admin::ApplicationController
   end
 
   def group_params
-    params.require(:group).permit(
+    params.require(:group).permit(group_params_ce)
+  end
+
+  def group_params_ce
+    [
       :avatar,
       :description,
       :lfs_enabled,
@@ -68,6 +73,6 @@ class Admin::GroupsController < Admin::ApplicationController
       :path,
       :request_access_enabled,
       :visibility_level
-    )
+    ]
   end
 end
diff --git a/app/controllers/admin/projects_controller.rb b/app/controllers/admin/projects_controller.rb
index 1d963bdf7d5..b09ae423096 100644
--- a/app/controllers/admin/projects_controller.rb
+++ b/app/controllers/admin/projects_controller.rb
@@ -3,7 +3,7 @@ class Admin::ProjectsController < Admin::ApplicationController
   before_action :group, only: [:show, :transfer]
 
   def index
-    @projects = Project.all
+    @projects = Project.with_statistics
     @projects = @projects.in_namespace(params[:namespace_id]) if params[:namespace_id].present?
     @projects = @projects.where(visibility_level: params[:visibility_level]) if params[:visibility_level].present?
     @projects = @projects.with_push if params[:with_push].present?
diff --git a/app/controllers/admin/users_controller.rb b/app/controllers/admin/users_controller.rb
index bb912ed10cc..aa0f8d434dc 100644
--- a/app/controllers/admin/users_controller.rb
+++ b/app/controllers/admin/users_controller.rb
@@ -16,9 +16,6 @@ class Admin::UsersController < Admin::ApplicationController
     @joined_projects = user.projects.joined(@user)
   end
 
-  def groups
-  end
-
   def keys
     @keys = user.keys
   end
@@ -164,15 +161,6 @@ class Admin::UsersController < Admin::ApplicationController
     @user ||= User.find_by!(username: params[:id])
   end
 
-  def user_params
-    params.require(:user).permit(
-      :email, :remember_me, :bio, :name, :username,
-      :skype, :linkedin, :twitter, :website_url, :color_scheme_id, :theme_id, :force_random_password,
-      :extern_uid, :provider, :password_expires_at, :avatar, :hide_no_ssh_key, :hide_no_password,
-      :projects_limit, :can_create_group, :admin, :key_id, :external
-    )
-  end
-
   def redirect_back_or_admin_user(options = {})
     redirect_back_or_default(default: default_route, options: options)
   end
@@ -180,4 +168,36 @@ class Admin::UsersController < Admin::ApplicationController
   def default_route
     [:admin, @user]
   end
+
+  def user_params
+    params.require(:user).permit(user_params_ce)
+  end
+
+  def user_params_ce
+    [
+      :admin,
+      :avatar,
+      :bio,
+      :can_create_group,
+      :color_scheme_id,
+      :email,
+      :extern_uid,
+      :external,
+      :force_random_password,
+      :hide_no_password,
+      :hide_no_ssh_key,
+      :key_id,
+      :linkedin,
+      :name,
+      :password_expires_at,
+      :projects_limit,
+      :provider,
+      :remember_me,
+      :skype,
+      :theme_id,
+      :twitter,
+      :username,
+      :website_url
+    ]
+  end
 end
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index bcc0b17bce2..bb47e2a8bf7 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -25,7 +25,7 @@ class ApplicationController < ActionController::Base
   protect_from_forgery with: :exception
 
   helper_method :can?, :current_application_settings
-  helper_method :import_sources_enabled?, :github_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?
+  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?
 
   rescue_from Encoding::CompatibilityError do |exception|
     log_exception(exception)
@@ -245,6 +245,10 @@ class ApplicationController < ActionController::Base
     current_application_settings.import_sources.include?('github')
   end
 
+  def gitea_import_enabled?
+    current_application_settings.import_sources.include?('gitea')
+  end
+
   def github_import_configured?
     Gitlab::OAuth::Provider.enabled?(:github)
   end
@@ -262,7 +266,7 @@ class ApplicationController < ActionController::Base
   end
 
   def bitbucket_import_configured?
-    Gitlab::OAuth::Provider.enabled?(:bitbucket) && Gitlab::BitbucketImport.public_key.present?
+    Gitlab::OAuth::Provider.enabled?(:bitbucket)
   end
 
   def google_code_import_enabled?
diff --git a/app/controllers/concerns/creates_commit.rb b/app/controllers/concerns/creates_commit.rb
index 936d9bab57e..6f43ce5226d 100644
--- a/app/controllers/concerns/creates_commit.rb
+++ b/app/controllers/concerns/creates_commit.rb
@@ -82,7 +82,7 @@ module CreatesCommit
     return @merge_request if defined?(@merge_request)
 
     @merge_request = MergeRequestsFinder.new(current_user, project_id: @mr_target_project.id).execute.opened.
-      find_by(source_branch: @mr_source_branch, target_branch: @mr_target_branch)
+      find_by(source_branch: @mr_source_branch, target_branch: @mr_target_branch, source_project_id: @mr_source_project)
   end
 
   def different_project?
diff --git a/app/controllers/concerns/cycle_analytics_params.rb b/app/controllers/concerns/cycle_analytics_params.rb
index 2aaf8f2b451..52e06f4945a 100644
--- a/app/controllers/concerns/cycle_analytics_params.rb
+++ b/app/controllers/concerns/cycle_analytics_params.rb
@@ -1,6 +1,10 @@
 module CycleAnalyticsParams
   extend ActiveSupport::Concern
 
+  def options(params)
+    @options ||= { from: start_date(params), current_user: current_user }
+  end
+
   def start_date(params)
     params[:start_date] == '30' ? 30.days.ago : 90.days.ago
   end
diff --git a/app/controllers/concerns/global_milestones.rb b/app/controllers/concerns/global_milestones.rb
deleted file mode 100644
index 5c503c5b698..00000000000
--- a/app/controllers/concerns/global_milestones.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-module GlobalMilestones
-  extend ActiveSupport::Concern
-
-  def milestones
-    epoch = DateTime.parse('1970-01-01')
-    @milestones = MilestonesFinder.new.execute(@projects, params)
-    @milestones = GlobalMilestone.build_collection(@milestones)
-    @milestones = @milestones.sort_by { |x| x.due_date.nil? ? epoch : x.due_date }
-  end
-
-  def milestone
-    milestones = Milestone.of_projects(@projects).where(title: params[:title])
-
-    if milestones.present?
-      @milestone = GlobalMilestone.new(params[:title], milestones)
-    else
-      render_404
-    end
-  end
-end
diff --git a/app/controllers/concerns/oauth_applications.rb b/app/controllers/concerns/oauth_applications.rb
new file mode 100644
index 00000000000..9849aa93fa6
--- /dev/null
+++ b/app/controllers/concerns/oauth_applications.rb
@@ -0,0 +1,19 @@
+module OauthApplications
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :prepare_scopes, only: [:create, :update]
+  end
+
+  def prepare_scopes
+    scopes = params.fetch(:doorkeeper_application, {}).fetch(:scopes, nil)
+
+    if scopes
+      params[:doorkeeper_application][:scopes] = scopes.join(' ')
+    end
+  end
+
+  def load_scopes
+    @scopes = Doorkeeper.configuration.scopes
+  end
+end
diff --git a/app/controllers/concerns/service_params.rb b/app/controllers/concerns/service_params.rb
index c33d7eecb9f..d7f5a4e4682 100644
--- a/app/controllers/concerns/service_params.rb
+++ b/app/controllers/concerns/service_params.rb
@@ -1,31 +1,72 @@
 module ServiceParams
   extend ActiveSupport::Concern
 
-  ALLOWED_PARAMS = [:title, :token, :type, :active, :api_key, :api_url, :api_version, :subdomain,
-                    :room, :recipients, :project_url, :webhook,
-                    :user_key, :device, :priority, :sound, :bamboo_url, :username, :password,
-                    :build_key, :server, :teamcity_url, :drone_url, :build_type,
-                    :description, :issues_url, :new_issue_url, :restrict_to_branch, :channel,
-                    :colorize_messages, :channels,
-                    # We're using `issues_events` and `merge_requests_events`
-                    # in the view so we still need to explicitly state them
-                    # here. `Service#event_names` would only give
-                    # `issue_events` and `merge_request_events` (singular!)
-                    # See app/helpers/services_helper.rb for how we
-                    # make those event names plural as special case.
-                    :issues_events, :confidential_issues_events, :merge_requests_events,
-                    :notify_only_broken_builds, :notify_only_broken_pipelines,
-                    :add_pusher, :send_from_committer_email, :disable_diffs,
-                    :external_wiki_url, :notify, :color,
-                    :server_host, :server_port, :default_irc_uri, :enable_ssl_verification,
-                    :jira_issue_transition_id, :url, :project_key]
+  ALLOWED_PARAMS_CE = [
+    :active,
+    :add_pusher,
+    :api_key,
+    :api_url,
+    :api_version,
+    :bamboo_url,
+    :build_key,
+    :build_type,
+    :ca_pem,
+    :channel,
+    :channels,
+    :color,
+    :colorize_messages,
+    :confidential_issues_events,
+    :default_irc_uri,
+    :description,
+    :device,
+    :disable_diffs,
+    :drone_url,
+    :enable_ssl_verification,
+    :external_wiki_url,
+    # We're using `issues_events` and `merge_requests_events`
+    # in the view so we still need to explicitly state them
+    # here. `Service#event_names` would only give
+    # `issue_events` and `merge_request_events` (singular!)
+    # See app/helpers/services_helper.rb for how we
+    # make those event names plural as special case.
+    :issues_events,
+    :issues_url,
+    :jira_issue_transition_id,
+    :merge_requests_events,
+    :namespace,
+    :new_issue_url,
+    :notify,
+    :notify_only_broken_builds,
+    :notify_only_broken_pipelines,
+    :password,
+    :priority,
+    :project_key,
+    :project_url,
+    :recipients,
+    :restrict_to_branch,
+    :room,
+    :send_from_committer_email,
+    :server,
+    :server_host,
+    :server_port,
+    :sound,
+    :subdomain,
+    :teamcity_url,
+    :title,
+    :token,
+    :type,
+    :url,
+    :user_key,
+    :username,
+    :webhook
+  ]
 
   # Parameters to ignore if no value is specified
   FILTER_BLANK_PARAMS = [:password]
 
   def service_params
     dynamic_params = @service.event_channel_names + @service.event_names
-    service_params = params.permit(:id, service: ALLOWED_PARAMS + dynamic_params)
+    service_params = params.permit(:id, service: ALLOWED_PARAMS_CE + dynamic_params)
 
     if service_params[:service].is_a?(Hash)
       FILTER_BLANK_PARAMS.each do |param|
diff --git a/app/controllers/dashboard/milestones_controller.rb b/app/controllers/dashboard/milestones_controller.rb
index fa9c6c054f0..7051652d109 100644
--- a/app/controllers/dashboard/milestones_controller.rb
+++ b/app/controllers/dashboard/milestones_controller.rb
@@ -1,6 +1,4 @@
 class Dashboard::MilestonesController < Dashboard::ApplicationController
-  include GlobalMilestones
-
   before_action :projects
   before_action :milestone, only: [:show]
 
@@ -17,4 +15,15 @@ class Dashboard::MilestonesController < Dashboard::ApplicationController
 
   def show
   end
+
+  private
+
+  def milestones
+    @milestones = GlobalMilestone.build_collection(@projects, params)
+  end
+
+  def milestone
+    @milestone = GlobalMilestone.build(@projects, params[:title])
+    render_404 unless @milestone
+  end
 end
diff --git a/app/controllers/dashboard/todos_controller.rb b/app/controllers/dashboard/todos_controller.rb
index d425d0f9014..e3933e3d7b1 100644
--- a/app/controllers/dashboard/todos_controller.rb
+++ b/app/controllers/dashboard/todos_controller.rb
@@ -4,6 +4,9 @@ class Dashboard::TodosController < Dashboard::ApplicationController
   def index
     @sort = params[:sort]
     @todos = @todos.page(params[:page])
+    if @todos.out_of_range? && @todos.total_pages != 0
+      redirect_to url_for(params.merge(page: @todos.total_pages))
+    end
   end
 
   def destroy
diff --git a/app/controllers/groups/group_members_controller.rb b/app/controllers/groups/group_members_controller.rb
index 940a3ad20ba..4f273a8d4f0 100644
--- a/app/controllers/groups/group_members_controller.rb
+++ b/app/controllers/groups/group_members_controller.rb
@@ -1,20 +1,20 @@
 class Groups::GroupMembersController < Groups::ApplicationController
   include MembershipActions
+  include SortingHelper
 
   # Authorize
   before_action :authorize_admin_group_member!, except: [:index, :leave, :request_access]
 
   def index
+    @sort = params[:sort].presence || sort_value_name
     @project = @group.projects.find(params[:project_id]) if params[:project_id]
+
     @members = @group.group_members
     @members = @members.non_invite unless can?(current_user, :admin_group, @group)
+    @members = @members.search(params[:search]) if params[:search].present?
+    @members = @members.sort(@sort)
+    @members = @members.page(params[:page]).per(50)
 
-    if params[:search].present?
-      users = @group.users.search(params[:search]).to_a
-      @members = @members.where(user_id: users)
-    end
-
-    @members = @members.order('access_level DESC').page(params[:page]).per(50)
     @requesters = AccessRequestsFinder.new(@group).execute(current_user)
 
     @group_member = @group.group_members.new
diff --git a/app/controllers/groups/milestones_controller.rb b/app/controllers/groups/milestones_controller.rb
index 24ec4eec3f2..0d872c86c8a 100644
--- a/app/controllers/groups/milestones_controller.rb
+++ b/app/controllers/groups/milestones_controller.rb
@@ -1,6 +1,4 @@
 class Groups::MilestonesController < Groups::ApplicationController
-  include GlobalMilestones
-
   before_action :group_projects
   before_action :milestone, only: [:show, :update]
   before_action :authorize_admin_milestones!, only: [:new, :create, :update]
@@ -73,4 +71,13 @@ class Groups::MilestonesController < Groups::ApplicationController
   def milestone_path(title)
     group_milestone_path(@group, title.to_slug.to_s, title: title)
   end
+
+  def milestones
+    @milestones = GroupMilestone.build_collection(@group, @projects, params)
+  end
+
+  def milestone
+    @milestone = GroupMilestone.build(@group, @projects, params[:title])
+    render_404 unless @milestone
+  end
 end
diff --git a/app/controllers/groups_controller.rb b/app/controllers/groups_controller.rb
index b83c3a872cf..f81237db991 100644
--- a/app/controllers/groups_controller.rb
+++ b/app/controllers/groups_controller.rb
@@ -42,6 +42,8 @@ class GroupsController < Groups::ApplicationController
       @notification_setting = current_user.notification_settings_for(group)
     end
 
+    @nested_groups = group.children
+
     setup_projects
 
     respond_to do |format|
@@ -75,13 +77,15 @@ class GroupsController < Groups::ApplicationController
   end
 
   def projects
-    @projects = @group.projects.page(params[:page])
+    @projects = @group.projects.with_statistics.page(params[:page])
   end
 
   def update
     if Groups::UpdateService.new(@group, current_user, group_params).execute
       redirect_to edit_group_path(@group), notice: "Group '#{@group.name}' was successfully updated."
     else
+      @group.reset_path!
+
       render action: "edit"
     end
   end
@@ -121,7 +125,11 @@ class GroupsController < Groups::ApplicationController
   end
 
   def group_params
-    params.require(:group).permit(
+    params.require(:group).permit(group_params_ce)
+  end
+
+  def group_params_ce
+    [
       :avatar,
       :description,
       :lfs_enabled,
@@ -131,7 +139,7 @@ class GroupsController < Groups::ApplicationController
       :request_access_enabled,
       :share_with_group_lock,
       :visibility_level
-    )
+    ]
   end
 
   def load_events
diff --git a/app/controllers/import/bitbucket_controller.rb b/app/controllers/import/bitbucket_controller.rb
index 6ea54744da8..8e42cdf415f 100644
--- a/app/controllers/import/bitbucket_controller.rb
+++ b/app/controllers/import/bitbucket_controller.rb
@@ -2,50 +2,57 @@ class Import::BitbucketController < Import::BaseController
   before_action :verify_bitbucket_import_enabled
   before_action :bitbucket_auth, except: :callback
 
-  rescue_from OAuth::Error, with: :bitbucket_unauthorized
-  rescue_from Gitlab::BitbucketImport::Client::Unauthorized, with: :bitbucket_unauthorized
+  rescue_from OAuth2::Error, with: :bitbucket_unauthorized
+  rescue_from Bitbucket::Error::Unauthorized, with: :bitbucket_unauthorized
 
   def callback
-    request_token = session.delete(:oauth_request_token)
-    raise "Session expired!" if request_token.nil?
+    response = client.auth_code.get_token(params[:code], redirect_uri: callback_import_bitbucket_url)
 
-    request_token.symbolize_keys!
-
-    access_token = client.get_token(request_token, params[:oauth_verifier], callback_import_bitbucket_url)
-
-    session[:bitbucket_access_token] = access_token.token
-    session[:bitbucket_access_token_secret] = access_token.secret
+    session[:bitbucket_token]         = response.token
+    session[:bitbucket_expires_at]    = response.expires_at
+    session[:bitbucket_expires_in]    = response.expires_in
+    session[:bitbucket_refresh_token] = response.refresh_token
 
     redirect_to status_import_bitbucket_url
   end
 
   def status
-    @repos = client.projects
-    @incompatible_repos = client.incompatible_projects
+    bitbucket_client = Bitbucket::Client.new(credentials)
+    repos = bitbucket_client.repos
+
+    @repos, @incompatible_repos = repos.partition { |repo| repo.valid? }
 
-    @already_added_projects = current_user.created_projects.where(import_type: "bitbucket")
+    @already_added_projects = current_user.created_projects.where(import_type: 'bitbucket')
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
-    @repos.to_a.reject!{ |repo| already_added_projects_names.include? "#{repo["owner"]}/#{repo["slug"]}" }
+    @repos.to_a.reject! { |repo| already_added_projects_names.include?(repo.full_name) }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: "bitbucket").to_json(only: [:id, :import_status])
-    render json: jobs
+    render json: current_user.created_projects
+                             .where(import_type: 'bitbucket')
+                             .to_json(only: [:id, :import_status])
   end
 
   def create
+    bitbucket_client = Bitbucket::Client.new(credentials)
+
     @repo_id = params[:repo_id].to_s
-    repo = client.project(@repo_id.gsub('___', '/'))
-    @project_name = repo['slug']
-    @target_namespace = find_or_create_namespace(repo['owner'], client.user['user']['username'])
+    name = @repo_id.gsub('___', '/')
+    repo = bitbucket_client.repo(name)
+    @project_name = params[:new_name].presence || repo.name
 
-    unless Gitlab::BitbucketImport::KeyAdder.new(repo, current_user, access_params).execute
-      render 'deploy_key' and return
-    end
+    repo_owner = repo.owner
+    repo_owner = current_user.username if repo_owner == bitbucket_client.user.username
+    @target_namespace = params[:new_namespace].presence || repo_owner
+
+    namespace = find_or_create_namespace(@target_namespace, current_user)
 
-    if current_user.can?(:create_projects, @target_namespace)
-      @project = Gitlab::BitbucketImport::ProjectCreator.new(repo, @target_namespace, current_user, access_params).execute
+    if current_user.can?(:create_projects, namespace)
+      # The token in a session can be expired, we need to get most recent one because
+      # Bitbucket::Connection class refreshes it.
+      session[:bitbucket_token] = bitbucket_client.connection.token
+      @project = Gitlab::BitbucketImport::ProjectCreator.new(repo, @project_name, namespace, current_user, credentials).execute
     else
       render 'unauthorized'
     end
@@ -54,8 +61,15 @@ class Import::BitbucketController < Import::BaseController
   private
 
   def client
-    @client ||= Gitlab::BitbucketImport::Client.new(session[:bitbucket_access_token],
-                                                    session[:bitbucket_access_token_secret])
+    @client ||= OAuth2::Client.new(provider.app_id, provider.app_secret, options)
+  end
+
+  def provider
+    Gitlab::OAuth::Provider.config_for('bitbucket')
+  end
+
+  def options
+    OmniAuth::Strategies::Bitbucket.default_options[:client_options].deep_symbolize_keys
   end
 
   def verify_bitbucket_import_enabled
@@ -63,26 +77,23 @@ class Import::BitbucketController < Import::BaseController
   end
 
   def bitbucket_auth
-    if session[:bitbucket_access_token].blank?
-      go_to_bitbucket_for_permissions
-    end
+    go_to_bitbucket_for_permissions if session[:bitbucket_token].blank?
   end
 
   def go_to_bitbucket_for_permissions
-    request_token = client.request_token(callback_import_bitbucket_url)
-    session[:oauth_request_token] = request_token
-
-    redirect_to client.authorize_url(request_token, callback_import_bitbucket_url)
+    redirect_to client.auth_code.authorize_url(redirect_uri: callback_import_bitbucket_url)
   end
 
   def bitbucket_unauthorized
     go_to_bitbucket_for_permissions
   end
 
-  def access_params
+  def credentials
     {
-      bitbucket_access_token: session[:bitbucket_access_token],
-      bitbucket_access_token_secret: session[:bitbucket_access_token_secret]
+      token: session[:bitbucket_token],
+      expires_at: session[:bitbucket_expires_at],
+      expires_in: session[:bitbucket_expires_in],
+      refresh_token: session[:bitbucket_refresh_token]
     }
   end
 end
diff --git a/app/controllers/import/gitea_controller.rb b/app/controllers/import/gitea_controller.rb
new file mode 100644
index 00000000000..fbd851c64a7
--- /dev/null
+++ b/app/controllers/import/gitea_controller.rb
@@ -0,0 +1,45 @@
+class Import::GiteaController < Import::GithubController
+  def new
+    if session[access_token_key].present? && session[host_key].present?
+      redirect_to status_import_url
+    end
+  end
+
+  def personal_access_token
+    session[host_key] = params[host_key]
+    super
+  end
+
+  def status
+    @gitea_host_url = session[host_key]
+    super
+  end
+
+  private
+
+  def host_key
+    :"#{provider}_host_url"
+  end
+
+  # Overriden methods
+  def provider
+    :gitea
+  end
+
+  # Gitea is not yet an OAuth provider
+  # See https://github.com/go-gitea/gitea/issues/27
+  def logged_in_with_provider?
+    false
+  end
+
+  def provider_auth
+    if session[access_token_key].blank? || session[host_key].blank?
+      redirect_to new_import_gitea_url,
+        alert: 'You need to specify both an Access Token and a Host URL.'
+    end
+  end
+
+  def client_options
+    { host: session[host_key], api_version: 'v1' }
+  end
+end
diff --git a/app/controllers/import/github_controller.rb b/app/controllers/import/github_controller.rb
index ee7d498c59c..53a5981e564 100644
--- a/app/controllers/import/github_controller.rb
+++ b/app/controllers/import/github_controller.rb
@@ -1,39 +1,37 @@
 class Import::GithubController < Import::BaseController
-  before_action :verify_github_import_enabled
-  before_action :github_auth, only: [:status, :jobs, :create]
+  before_action :verify_import_enabled
+  before_action :provider_auth, only: [:status, :jobs, :create]
 
-  rescue_from Octokit::Unauthorized, with: :github_unauthorized
-
-  helper_method :logged_in_with_github?
+  rescue_from Octokit::Unauthorized, with: :provider_unauthorized
 
   def new
-    if logged_in_with_github?
-      go_to_github_for_permissions
-    elsif session[:github_access_token]
-      redirect_to status_import_github_url
+    if logged_in_with_provider?
+      go_to_provider_for_permissions
+    elsif session[access_token_key]
+      redirect_to status_import_url
     end
   end
 
   def callback
-    session[:github_access_token] = client.get_token(params[:code])
-    redirect_to status_import_github_url
+    session[access_token_key] = client.get_token(params[:code])
+    redirect_to status_import_url
   end
 
   def personal_access_token
-    session[:github_access_token] = params[:personal_access_token]
-    redirect_to status_import_github_url
+    session[access_token_key] = params[:personal_access_token]
+    redirect_to status_import_url
   end
 
   def status
     @repos = client.repos
-    @already_added_projects = current_user.created_projects.where(import_type: "github")
+    @already_added_projects = current_user.created_projects.where(import_type: provider)
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
-    @repos.reject!{ |repo| already_added_projects_names.include? repo.full_name }
+    @repos.reject! { |repo| already_added_projects_names.include? repo.full_name }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: "github").to_json(only: [:id, :import_status])
+    jobs = current_user.created_projects.where(import_type: provider).to_json(only: [:id, :import_status])
     render json: jobs
   end
 
@@ -44,8 +42,8 @@ class Import::GithubController < Import::BaseController
     namespace_path = params[:target_namespace].presence || current_user.namespace_path
     @target_namespace = find_or_create_namespace(namespace_path, current_user.namespace_path)
 
-    if current_user.can?(:create_projects, @target_namespace)
-      @project = Gitlab::GithubImport::ProjectCreator.new(repo, @project_name, @target_namespace, current_user, access_params).execute
+    if can?(current_user, :create_projects, @target_namespace)
+      @project = Gitlab::GithubImport::ProjectCreator.new(repo, @project_name, @target_namespace, current_user, access_params, type: provider).execute
     else
       render 'unauthorized'
     end
@@ -54,34 +52,63 @@ class Import::GithubController < Import::BaseController
   private
 
   def client
-    @client ||= Gitlab::GithubImport::Client.new(session[:github_access_token])
+    @client ||= Gitlab::GithubImport::Client.new(session[access_token_key], client_options)
   end
 
-  def verify_github_import_enabled
-    render_404 unless github_import_enabled?
+  def verify_import_enabled
+    render_404 unless import_enabled?
   end
 
-  def github_auth
-    if session[:github_access_token].blank?
-      go_to_github_for_permissions
-    end
+  def go_to_provider_for_permissions
+    redirect_to client.authorize_url(callback_import_url)
   end
 
-  def go_to_github_for_permissions
-    redirect_to client.authorize_url(callback_import_github_url)
+  def import_enabled?
+    __send__("#{provider}_import_enabled?")
   end
 
-  def github_unauthorized
-    session[:github_access_token] = nil
-    redirect_to new_import_github_url,
-      alert: 'Access denied to your GitHub account.'
+  def new_import_url
+    public_send("new_import_#{provider}_url")
   end
 
-  def logged_in_with_github?
-    current_user.identities.exists?(provider: 'github')
+  def status_import_url
+    public_send("status_import_#{provider}_url")
+  end
+
+  def callback_import_url
+    public_send("callback_import_#{provider}_url")
+  end
+
+  def provider_unauthorized
+    session[access_token_key] = nil
+    redirect_to new_import_url,
+      alert: "Access denied to your #{Gitlab::ImportSources.title(provider.to_s)} account."
+  end
+
+  def access_token_key
+    :"#{provider}_access_token"
   end
 
   def access_params
-    { github_access_token: session[:github_access_token] }
+    { github_access_token: session[access_token_key] }
+  end
+
+  # The following methods are overriden in subclasses
+  def provider
+    :github
+  end
+
+  def logged_in_with_provider?
+    current_user.identities.exists?(provider: provider)
+  end
+
+  def provider_auth
+    if session[access_token_key].blank?
+      go_to_provider_for_permissions
+    end
+  end
+
+  def client_options
+    {}
   end
 end
diff --git a/app/controllers/jwt_controller.rb b/app/controllers/jwt_controller.rb
index c736200a104..c2e4d62b50b 100644
--- a/app/controllers/jwt_controller.rb
+++ b/app/controllers/jwt_controller.rb
@@ -26,7 +26,7 @@ class JwtController < ApplicationController
       @authentication_result = Gitlab::Auth.find_for_git_client(login, password, project: nil, ip: request.ip)
 
       render_unauthorized unless @authentication_result.success? &&
-        (@authentication_result.actor.nil? || @authentication_result.actor.is_a?(User))
+          (@authentication_result.actor.nil? || @authentication_result.actor.is_a?(User))
     end
   rescue Gitlab::Auth::MissingPersonalTokenError
     render_missing_personal_token
diff --git a/app/controllers/oauth/applications_controller.rb b/app/controllers/oauth/applications_controller.rb
index 0f54dfa4efc..2ae4785b12c 100644
--- a/app/controllers/oauth/applications_controller.rb
+++ b/app/controllers/oauth/applications_controller.rb
@@ -2,10 +2,12 @@ class Oauth::ApplicationsController < Doorkeeper::ApplicationsController
   include Gitlab::CurrentSettings
   include Gitlab::GonHelper
   include PageLayoutHelper
+  include OauthApplications
 
   before_action :verify_user_oauth_applications_enabled
   before_action :authenticate_user!
   before_action :add_gon_variables
+  before_action :load_scopes, only: [:index, :create, :edit]
 
   layout 'profile'
 
diff --git a/app/controllers/profiles/personal_access_tokens_controller.rb b/app/controllers/profiles/personal_access_tokens_controller.rb
index 508b82a9a6c..6e007f17913 100644
--- a/app/controllers/profiles/personal_access_tokens_controller.rb
+++ b/app/controllers/profiles/personal_access_tokens_controller.rb
@@ -1,8 +1,6 @@
 class Profiles::PersonalAccessTokensController < Profiles::ApplicationController
-  before_action :load_personal_access_tokens, only: :index
-
   def index
-    @personal_access_token = current_user.personal_access_tokens.build
+    set_index_vars
   end
 
   def create
@@ -12,7 +10,7 @@ class Profiles::PersonalAccessTokensController < Profiles::ApplicationController
       flash[:personal_access_token] = @personal_access_token.token
       redirect_to profile_personal_access_tokens_path, notice: "Your new personal access token has been created."
     else
-      load_personal_access_tokens
+      set_index_vars
       render :index
     end
   end
@@ -32,10 +30,12 @@ class Profiles::PersonalAccessTokensController < Profiles::ApplicationController
   private
 
   def personal_access_token_params
-    params.require(:personal_access_token).permit(:name, :expires_at)
+    params.require(:personal_access_token).permit(:name, :expires_at, scopes: [])
   end
 
-  def load_personal_access_tokens
+  def set_index_vars
+    @personal_access_token ||= current_user.personal_access_tokens.build
+    @scopes = Gitlab::Auth::SCOPES
     @active_personal_access_tokens = current_user.personal_access_tokens.active.order(:expires_at)
     @inactive_personal_access_tokens = current_user.personal_access_tokens.inactive
   end
diff --git a/app/controllers/profiles/two_factor_auths_controller.rb b/app/controllers/profiles/two_factor_auths_controller.rb
index 9eb75bb3891..18044ca78e2 100644
--- a/app/controllers/profiles/two_factor_auths_controller.rb
+++ b/app/controllers/profiles/two_factor_auths_controller.rb
@@ -22,6 +22,7 @@ class Profiles::TwoFactorAuthsController < Profiles::ApplicationController
     end
 
     @qr_code = build_qr_code
+    @account_string = account_string
     setup_u2f_registration
   end
 
@@ -78,11 +79,14 @@ class Profiles::TwoFactorAuthsController < Profiles::ApplicationController
   private
 
   def build_qr_code
-    issuer = "#{issuer_host} | #{current_user.email}"
-    uri = current_user.otp_provisioning_uri(current_user.email, issuer: issuer)
+    uri = current_user.otp_provisioning_uri(account_string, issuer: issuer_host)
     RQRCode::render_qrcode(uri, :svg, level: :m, unit: 3)
   end
 
+  def account_string
+    "#{issuer_host}:#{current_user.email}"
+  end
+
   def issuer_host
     Gitlab.config.gitlab.host
   end
diff --git a/app/controllers/projects/autocomplete_sources_controller.rb b/app/controllers/projects/autocomplete_sources_controller.rb
new file mode 100644
index 00000000000..d9dfa534669
--- /dev/null
+++ b/app/controllers/projects/autocomplete_sources_controller.rb
@@ -0,0 +1,48 @@
+class Projects::AutocompleteSourcesController < Projects::ApplicationController
+  before_action :load_autocomplete_service, except: [:emojis, :members]
+
+  def emojis
+    render json: Gitlab::AwardEmoji.urls
+  end
+
+  def members
+    render json: ::Projects::ParticipantsService.new(@project, current_user).execute(noteable)
+  end
+
+  def issues
+    render json: @autocomplete_service.issues
+  end
+
+  def merge_requests
+    render json: @autocomplete_service.merge_requests
+  end
+
+  def labels
+    render json: @autocomplete_service.labels
+  end
+
+  def milestones
+    render json: @autocomplete_service.milestones
+  end
+
+  def commands
+    render json: @autocomplete_service.commands(noteable, params[:type])
+  end
+
+  private
+
+  def load_autocomplete_service
+    @autocomplete_service = ::Projects::AutocompleteService.new(@project, current_user)
+  end
+
+  def noteable
+    case params[:type]
+    when 'Issue'
+      IssuesFinder.new(current_user, project_id: @project.id).execute.find_by(iid: params[:type_id])
+    when 'MergeRequest'
+      MergeRequestsFinder.new(current_user, project_id: @project.id).execute.find_by(iid: params[:type_id])
+    when 'Commit'
+      @project.commit(params[:type_id])
+    end
+  end
+end
diff --git a/app/controllers/projects/blame_controller.rb b/app/controllers/projects/blame_controller.rb
index f576d0be1fc..863a766a255 100644
--- a/app/controllers/projects/blame_controller.rb
+++ b/app/controllers/projects/blame_controller.rb
@@ -8,6 +8,9 @@ class Projects::BlameController < Projects::ApplicationController
 
   def show
     @blob = @repository.blob_at(@commit.id, @path)
+    
+    return render_404 unless @blob
+
     @blame_groups = Gitlab::Blame.new(@blob, @commit).groups
   end
 end
diff --git a/app/controllers/projects/commit_controller.rb b/app/controllers/projects/commit_controller.rb
index 8197d9e4c99..791ed88db30 100644
--- a/app/controllers/projects/commit_controller.rb
+++ b/app/controllers/projects/commit_controller.rb
@@ -8,13 +8,11 @@ class Projects::CommitController < Projects::ApplicationController
 
   # Authorize
   before_action :require_non_empty_project
-  before_action :authorize_download_code!, except: [:cancel_builds, :retry_builds]
-  before_action :authorize_update_build!, only: [:cancel_builds, :retry_builds]
+  before_action :authorize_download_code!
   before_action :authorize_read_pipeline!, only: [:pipelines]
-  before_action :authorize_read_commit_status!, only: [:builds]
   before_action :commit
-  before_action :define_commit_vars, only: [:show, :diff_for_path, :builds, :pipelines]
-  before_action :define_status_vars, only: [:show, :builds, :pipelines]
+  before_action :define_commit_vars, only: [:show, :diff_for_path, :pipelines]
+  before_action :define_status_vars, only: [:show, :pipelines]
   before_action :define_note_vars, only: [:show, :diff_for_path]
   before_action :authorize_edit_tree!, only: [:revert, :cherry_pick]
 
@@ -35,25 +33,6 @@ class Projects::CommitController < Projects::ApplicationController
   def pipelines
   end
 
-  def builds
-  end
-
-  def cancel_builds
-    ci_builds.running_or_pending.each(&:cancel)
-
-    redirect_back_or_default default: builds_namespace_project_commit_path(project.namespace, project, commit.sha)
-  end
-
-  def retry_builds
-    ci_builds.latest.failed.each do |build|
-      if build.retryable?
-        Ci::Build.retry(build, current_user)
-      end
-    end
-
-    redirect_back_or_default default: builds_namespace_project_commit_path(project.namespace, project, commit.sha)
-  end
-
   def branches
     @branches = @project.repository.branch_names_contains(commit.id)
     @tags = @project.repository.tag_names_contains(commit.id)
@@ -98,10 +77,6 @@ class Projects::CommitController < Projects::ApplicationController
     @noteable = @commit ||= @project.commit(params[:id])
   end
 
-  def ci_builds
-    @ci_builds ||= Ci::Build.where(pipeline: pipelines)
-  end
-
   def define_commit_vars
     return git_not_found! unless commit
 
@@ -133,8 +108,6 @@ class Projects::CommitController < Projects::ApplicationController
 
   def define_status_vars
     @ci_pipelines = project.pipelines.where(sha: commit.sha)
-    @statuses = CommitStatus.where(pipeline: @ci_pipelines).relevant
-    @builds = Ci::Build.where(pipeline: @ci_pipelines).relevant
   end
 
   def assign_change_commit_vars(mr_source_branch)
diff --git a/app/controllers/projects/compare_controller.rb b/app/controllers/projects/compare_controller.rb
index ec02fc15d35..d32966645c8 100644
--- a/app/controllers/projects/compare_controller.rb
+++ b/app/controllers/projects/compare_controller.rb
@@ -25,8 +25,17 @@ class Projects::CompareController < Projects::ApplicationController
   end
 
   def create
-    redirect_to namespace_project_compare_path(@project.namespace, @project,
+    if params[:from].blank? || params[:to].blank?
+      flash[:alert] = "You must select from and to branches"
+      from_to_vars = {
+        from: params[:from].presence,
+        to: params[:to].presence
+      }
+      redirect_to namespace_project_compare_index_path(@project.namespace, @project, from_to_vars)
+    else
+      redirect_to namespace_project_compare_path(@project.namespace, @project,
                                                params[:from], params[:to])
+    end
   end
 
   private
diff --git a/app/controllers/projects/cycle_analytics/events_controller.rb b/app/controllers/projects/cycle_analytics/events_controller.rb
index 13b3eec761f..b69d46f2c41 100644
--- a/app/controllers/projects/cycle_analytics/events_controller.rb
+++ b/app/controllers/projects/cycle_analytics/events_controller.rb
@@ -9,56 +9,52 @@ module Projects
       before_action :authorize_read_merge_request!, only: [:code, :review]
 
       def issue
-        render_events(events.issue_events)
+        render_events(cycle_analytics[:issue].events)
       end
     
       def plan
-        render_events(events.plan_events)
+        render_events(cycle_analytics[:plan].events)
       end
     
       def code
-        render_events(events.code_events)
+        render_events(cycle_analytics[:code].events)
       end
     
       def test
-        options[:branch] = events_params[:branch_name]
+        options(events_params)[:branch] = events_params[:branch_name]
     
-        render_events(events.test_events)
+        render_events(cycle_analytics[:test].events)
       end
     
       def review
-        render_events(events.review_events)
+        render_events(cycle_analytics[:review].events)
       end
     
       def staging
-        render_events(events.staging_events)
+        render_events(cycle_analytics[:staging].events)
       end
     
       def production
-        render_events(events.production_events)
+        render_events(cycle_analytics[:production].events)
       end
     
       private
-    
-      def render_events(events_list)
+
+      def render_events(events)
         respond_to do |format|
           format.html
-          format.json { render json: { events: events_list } }
+          format.json { render json: { events: events } }
         end
       end
     
-      def events
-        @events ||= Gitlab::CycleAnalytics::Events.new(project: project, options: options)
-      end
-    
-      def options
-        @options ||= { from: start_date(events_params), current_user: current_user }
+      def cycle_analytics
+        @cycle_analytics ||= ::CycleAnalytics.new(project, options(events_params))
       end
     
       def events_params
         return {} unless params[:events].present?
     
-        params[:events].slice(:start_date, :branch_name)
+        params[:events].permit(:start_date, :branch_name)
       end
     end
   end
diff --git a/app/controllers/projects/cycle_analytics_controller.rb b/app/controllers/projects/cycle_analytics_controller.rb
index ac639ef015b..88ac3ad046b 100644
--- a/app/controllers/projects/cycle_analytics_controller.rb
+++ b/app/controllers/projects/cycle_analytics_controller.rb
@@ -6,11 +6,9 @@ class Projects::CycleAnalyticsController < Projects::ApplicationController
   before_action :authorize_read_cycle_analytics!
 
   def show
-    @cycle_analytics = ::CycleAnalytics.new(@project, current_user, from: start_date(cycle_analytics_params))
+    @cycle_analytics = ::CycleAnalytics.new(@project, options(cycle_analytics_params))
 
-    stats_values, cycle_analytics_json = generate_cycle_analytics_data
-
-    @cycle_analytics_no_data = stats_values.blank?
+    @cycle_analytics_no_data = @cycle_analytics.no_stats?
 
     respond_to do |format|
       format.html
@@ -23,50 +21,14 @@ class Projects::CycleAnalyticsController < Projects::ApplicationController
   def cycle_analytics_params
     return {} unless params[:cycle_analytics].present?
 
-    { start_date: params[:cycle_analytics][:start_date] }
+    params[:cycle_analytics].permit(:start_date)
   end
 
-  def generate_cycle_analytics_data
-    stats_values = []
-
-    cycle_analytics_view_data = [[:issue, "Issue", "Related Issues", "Time before an issue gets scheduled"],
-                                 [:plan, "Plan", "Related Commits", "Time before an issue starts implementation"],
-                                 [:code, "Code", "Related Merge Requests", "Time spent coding"],
-                                 [:test, "Test", "Relative Builds Trigger by Commits", "The time taken to build and test the application"],
-                                 [:review, "Review", "Relative Merged Requests", "The time taken to review the code"],
-                                 [:staging, "Staging", "Relative Deployed Builds", "The time taken in staging"],
-                                 [:production, "Production", "Related Issues", "The total time taken from idea to production"]]
-
-    stats = cycle_analytics_view_data.reduce([]) do |stats, (stage_method, stage_text, stage_legend, stage_description)|
-      value = @cycle_analytics.send(stage_method).presence
-
-      stats_values << value.abs if value
-
-      stats << {
-        title: stage_text,
-        description: stage_description,
-        legend: stage_legend,
-        value: value && !value.zero? ? distance_of_time_in_words(value) : nil
-      }
-
-      stats
-    end
-
-    issues = @cycle_analytics.summary.new_issues
-    commits = @cycle_analytics.summary.commits
-    deploys = @cycle_analytics.summary.deploys
-
-    summary = [
-      { title: "New Issue".pluralize(issues), value: issues },
-      { title: "Commit".pluralize(commits), value: commits },
-      { title: "Deploy".pluralize(deploys), value: deploys }
-    ]
-
-    cycle_analytics_hash = { summary: summary,
-                             stats: stats,
-                             permissions: @cycle_analytics.permissions(user: current_user)
+  def cycle_analytics_json
+    {
+      summary: @cycle_analytics.summary,
+      stats: @cycle_analytics.stats,
+      permissions: @cycle_analytics.permissions(user: current_user)
     }
-
-    [stats_values, cycle_analytics_hash]
   end
 end
diff --git a/app/controllers/projects/deploy_keys_controller.rb b/app/controllers/projects/deploy_keys_controller.rb
index 529e0aa2d33..b094491e006 100644
--- a/app/controllers/projects/deploy_keys_controller.rb
+++ b/app/controllers/projects/deploy_keys_controller.rb
@@ -16,7 +16,7 @@ class Projects::DeployKeysController < Projects::ApplicationController
   end
 
   def create
-    @key = DeployKey.new(deploy_key_params)
+    @key = DeployKey.new(deploy_key_params.merge(user: current_user))
     set_index_vars
 
     if @key.valid? && @project.deploy_keys << @key
@@ -53,6 +53,6 @@ class Projects::DeployKeysController < Projects::ApplicationController
   end
 
   def deploy_key_params
-    params.require(:deploy_key).permit(:key, :title)
+    params.require(:deploy_key).permit(:key, :title, :can_push)
   end
 end
diff --git a/app/controllers/projects/environments_controller.rb b/app/controllers/projects/environments_controller.rb
index 6bd4cb3f2f5..87cc36253f1 100644
--- a/app/controllers/projects/environments_controller.rb
+++ b/app/controllers/projects/environments_controller.rb
@@ -4,17 +4,19 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   before_action :authorize_create_environment!, only: [:new, :create]
   before_action :authorize_create_deployment!, only: [:stop]
   before_action :authorize_update_environment!, only: [:edit, :update]
-  before_action :environment, only: [:show, :edit, :update, :stop]
+  before_action :authorize_admin_environment!, only: [:terminal, :terminal_websocket_authorize]
+  before_action :environment, only: [:show, :edit, :update, :stop, :terminal, :terminal_websocket_authorize]
+  before_action :verify_api_request!, only: :terminal_websocket_authorize
 
   def index
     @scope = params[:scope]
     @environments = project.environments
-  
+
     respond_to do |format|
       format.html
       format.json do
         render json: EnvironmentSerializer
-          .new(project: @project)
+          .new(project: @project, user: current_user)
           .represent(@environments)
       end
     end
@@ -56,8 +58,33 @@ class Projects::EnvironmentsController < Projects::ApplicationController
     redirect_to polymorphic_path([project.namespace.becomes(Namespace), project, new_action])
   end
 
+  def terminal
+    # Currently, this acts as a hint to load the terminal details into the cache
+    # if they aren't there already. In the future, users will need these details
+    # to choose between terminals to connect to.
+    @terminals = environment.terminals
+  end
+
+  # GET .../terminal.ws : implemented in gitlab-workhorse
+  def terminal_websocket_authorize
+    # Just return the first terminal for now. If the list is in the process of
+    # being looked up, this may result in a 404 response, so the frontend
+    # should retry those errors
+    terminal = environment.terminals.try(:first)
+    if terminal
+      set_workhorse_internal_api_content_type
+      render json: Gitlab::Workhorse.terminal_websocket(terminal)
+    else
+      render text: 'Not found', status: 404
+    end
+  end
+
   private
 
+  def verify_api_request!
+    Gitlab::Workhorse.verify_api_request!(request.headers)
+  end
+
   def environment_params
     params.require(:environment).permit(:name, :external_url)
   end
diff --git a/app/controllers/projects/group_links_controller.rb b/app/controllers/projects/group_links_controller.rb
index 9eaf26a0dbf..66b7bdbd988 100644
--- a/app/controllers/projects/group_links_controller.rb
+++ b/app/controllers/projects/group_links_controller.rb
@@ -4,10 +4,7 @@ class Projects::GroupLinksController < Projects::ApplicationController
   before_action :authorize_admin_project_member!, only: [:update]
 
   def index
-    @group_links = project.project_group_links.all
-
-    @skip_groups = @group_links.pluck(:group_id)
-    @skip_groups << project.namespace_id unless project.personal?
+    redirect_to namespace_project_settings_members_path
   end
 
   def create
@@ -25,7 +22,7 @@ class Projects::GroupLinksController < Projects::ApplicationController
       flash[:alert] = 'Please select a group.'
     end
 
-    redirect_to namespace_project_group_links_path(project.namespace, project)
+    redirect_to namespace_project_settings_members_path(project.namespace, project)
   end
 
   def update
@@ -39,7 +36,7 @@ class Projects::GroupLinksController < Projects::ApplicationController
 
     respond_to do |format|
       format.html do
-        redirect_to namespace_project_group_links_path(project.namespace, project)
+        redirect_to namespace_project_settings_members_path(project.namespace, project)
       end
       format.js { head :ok }
     end
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 4f66e01e0f7..2beb0df8a07 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -25,6 +25,9 @@ class Projects::IssuesController < Projects::ApplicationController
   def index
     @issues = issues_collection
     @issues = @issues.page(params[:page])
+    if @issues.out_of_range? && @issues.total_pages != 0
+      return redirect_to url_for(params.merge(page: @issues.total_pages))
+    end
 
     if params[:label_name].present?
       @labels = LabelsFinder.new(current_user, project_id: @project.id, title: params[:label_name]).execute
diff --git a/app/controllers/projects/mattermosts_controller.rb b/app/controllers/projects/mattermosts_controller.rb
new file mode 100644
index 00000000000..01d99c7df35
--- /dev/null
+++ b/app/controllers/projects/mattermosts_controller.rb
@@ -0,0 +1,43 @@
+class Projects::MattermostsController < Projects::ApplicationController
+  include TriggersHelper
+  include ActionView::Helpers::AssetUrlHelper
+
+  layout 'project_settings'
+
+  before_action :authorize_admin_project!
+  before_action :service
+  before_action :teams, only: [:new]
+
+  def new
+  end
+
+  def create
+    result, message = @service.configure(current_user, configure_params)
+
+    if result
+      flash[:notice] = 'This service is now configured'
+      redirect_to edit_namespace_project_service_path(
+        @project.namespace, @project, service)
+    else
+      flash[:alert] = message || 'Failed to configure service'
+      redirect_to new_namespace_project_mattermost_path(
+        @project.namespace, @project)
+    end
+  end
+
+  private
+
+  def configure_params
+    params.require(:mattermost).permit(:trigger, :team_id).merge(
+      url: service_trigger_url(@service),
+      icon_url: asset_url('slash-command-logo.png'))
+  end
+
+  def teams
+    @teams ||= @service.list_teams(current_user)
+  end
+
+  def service
+    @service ||= @project.find_or_initialize_service('mattermost_slash_commands')
+  end
+end
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index f0cb5a9d4b4..9ac5bf4b9f8 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -9,10 +9,10 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
   before_action :module_enabled
   before_action :merge_request, only: [
-    :edit, :update, :show, :diffs, :commits, :conflicts, :conflict_for_path, :builds, :pipelines, :merge, :merge_check,
+    :edit, :update, :show, :diffs, :commits, :conflicts, :conflict_for_path, :pipelines, :merge, :merge_check,
     :ci_status, :ci_environments_status, :toggle_subscription, :cancel_merge_when_build_succeeds, :remove_wip, :resolve_conflicts, :assign_related_issues
   ]
-  before_action :validates_merge_request, only: [:show, :diffs, :commits, :builds, :pipelines]
+  before_action :validates_merge_request, only: [:show, :diffs, :commits, :pipelines]
   before_action :define_show_vars, only: [:show, :diffs, :commits, :conflicts, :conflict_for_path, :builds, :pipelines]
   before_action :define_widget_vars, only: [:merge, :cancel_merge_when_build_succeeds, :merge_check]
   before_action :define_commit_vars, only: [:diffs]
@@ -38,6 +38,9 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   def index
     @merge_requests = merge_requests_collection
     @merge_requests = @merge_requests.page(params[:page])
+    if @merge_requests.out_of_range? && @merge_requests.total_pages != 0
+      return redirect_to url_for(params.merge(page: @merge_requests.total_pages))
+    end
 
     if params[:label_name].present?
       labels_params = { project_id: @project.id, title: params[:label_name] }
@@ -95,7 +98,8 @@ class Projects::MergeRequestsController < Projects::ApplicationController
       @start_version = @comparable_diffs.find { |diff| diff.head_commit_sha == @start_sha }
 
       unless @start_version
-        render_404
+        @start_sha = @merge_request_diff.head_commit_sha
+        @start_version = @merge_request_diff
       end
     end
 
@@ -201,17 +205,6 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     end
   end
 
-  def builds
-    respond_to do |format|
-      format.html do
-        define_discussion_vars
-
-        render 'show'
-      end
-      format.json { render json: { html: view_to_html_string('projects/merge_requests/show/_builds') } }
-    end
-  end
-
   def pipelines
     @pipelines = @merge_request.all_pipelines
 
@@ -354,6 +347,16 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     end
   end
 
+  def merge_widget_refresh
+    if merge_request.in_progress_merge_commit_sha || merge_request.state == 'merged'
+      @status = :success
+    elsif merge_request.merge_when_build_succeeds
+      @status = :merge_when_build_succeeds
+    end
+
+    render 'merge'
+  end
+
   def branch_from
     # This is always source
     @source_project = @merge_request.nil? ? @project : @merge_request.source_project
@@ -416,10 +419,6 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     else
       ci_service = @merge_request.source_project.try(:ci_service)
       status = ci_service.commit_status(merge_request.diff_head_sha, merge_request.source_branch) if ci_service
-
-      if ci_service.respond_to?(:commit_coverage)
-        coverage = ci_service.commit_coverage(merge_request.diff_head_sha, merge_request.source_branch)
-      end
     end
 
     response = {
diff --git a/app/controllers/projects/notes_controller.rb b/app/controllers/projects/notes_controller.rb
index 15ca080c696..c5d93ce25bc 100644
--- a/app/controllers/projects/notes_controller.rb
+++ b/app/controllers/projects/notes_controller.rb
@@ -23,7 +23,8 @@ class Projects::NotesController < Projects::ApplicationController
   end
 
   def create
-    @note = Notes::CreateService.new(project, current_user, note_params).execute
+    create_params = note_params.merge(merge_request_diff_head_sha: params[:merge_request_diff_head_sha])
+    @note = Notes::CreateService.new(project, current_user, create_params).execute
 
     if @note.is_a?(Note)
       Banzai::NoteRenderer.render([@note], @project, current_user)
@@ -217,6 +218,6 @@ class Projects::NotesController < Projects::ApplicationController
   end
 
   def find_current_user_notes
-    @notes = NotesFinder.new.execute(project, current_user, params)
+    @notes = NotesFinder.new(project, current_user, params).execute.inc_author
   end
 end
diff --git a/app/controllers/projects/pipelines_controller.rb b/app/controllers/projects/pipelines_controller.rb
index 85188cfdd4c..84451257b98 100644
--- a/app/controllers/projects/pipelines_controller.rb
+++ b/app/controllers/projects/pipelines_controller.rb
@@ -7,10 +7,33 @@ class Projects::PipelinesController < Projects::ApplicationController
 
   def index
     @scope = params[:scope]
-    @pipelines = PipelinesFinder.new(project).execute(scope: @scope).page(params[:page]).per(30)
+    @pipelines = PipelinesFinder
+      .new(project)
+      .execute(scope: @scope)
+      .page(params[:page])
+      .per(30)
 
-    @running_or_pending_count = PipelinesFinder.new(project).execute(scope: 'running').count
-    @pipelines_count = PipelinesFinder.new(project).execute.count
+    @running_or_pending_count = PipelinesFinder
+      .new(project).execute(scope: 'running').count
+
+    @pipelines_count = PipelinesFinder
+      .new(project).execute.count
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          pipelines: PipelineSerializer
+            .new(project: @project, user: @current_user)
+            .with_pagination(request, response)
+            .represent(@pipelines),
+          count: {
+            all: @pipelines_count,
+            running_or_pending: @running_or_pending_count
+          }
+        }
+      end
+    end
   end
 
   def new
@@ -40,6 +63,15 @@ class Projects::PipelinesController < Projects::ApplicationController
     end
   end
 
+  def stage
+    @stage = pipeline.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
+  end
+
   def retry
     pipeline.retry_failed(current_user)
 
diff --git a/app/controllers/projects/project_members_controller.rb b/app/controllers/projects/project_members_controller.rb
index 53308948f62..6e158e685e9 100644
--- a/app/controllers/projects/project_members_controller.rb
+++ b/app/controllers/projects/project_members_controller.rb
@@ -1,56 +1,19 @@
 class Projects::ProjectMembersController < Projects::ApplicationController
   include MembershipActions
+  include SortingHelper
 
   # Authorize
   before_action :authorize_admin_project_member!, except: [:index, :leave, :request_access]
 
   def index
-    @group_links = @project.project_group_links
-
-    @project_members = @project.project_members
-    @project_members = @project_members.non_invite unless can?(current_user, :admin_project, @project)
-
-    group = @project.group
-
-    if group
-      # We need `.where.not(user_id: nil)` here otherwise when a group has an
-      # invitee, it would make the following query return 0 rows since a NULL
-      # user_id would be present in the subquery
-      # See http://stackoverflow.com/questions/129077/not-in-clause-and-null-values
-      # FIXME: This whole logic should be moved to a finder!
-      non_null_user_ids = @project_members.where.not(user_id: nil).select(:user_id)
-      group_members = group.group_members.where.not(user_id: non_null_user_ids)
-      group_members = group_members.non_invite unless can?(current_user, :admin_group, @group)
-    end
-
-    if params[:search].present?
-      user_ids = @project.users.search(params[:search]).select(:id)
-      @project_members = @project_members.where(user_id: user_ids)
-
-      if group_members
-        user_ids = group.users.search(params[:search]).select(:id)
-        group_members = group_members.where(user_id: user_ids)
-      end
-
-      @group_links = @project.project_group_links.where(group_id: @project.invited_groups.search(params[:search]).select(:id))
-    end
-
-    wheres = ["id IN (#{@project_members.select(:id).to_sql})"]
-    wheres << "id IN (#{group_members.select(:id).to_sql})" if group_members
-
-    @project_members = Member.
-      where(wheres.join(' OR ')).
-      order(access_level: :desc).page(params[:page])
-
-    @requesters = AccessRequestsFinder.new(@project).execute(current_user)
-
-    @project_member = @project.project_members.new
+    sort = params[:sort].presence || sort_value_name
+    redirect_to namespace_project_settings_members_path(@project.namespace, @project, sort: sort)
   end
 
   def create
     status = Members::CreateService.new(@project, current_user, params).execute
 
-    redirect_url = namespace_project_project_members_path(@project.namespace, @project)
+    redirect_url = namespace_project_settings_members_path(@project.namespace, @project)
 
     if status
       redirect_to redirect_url, notice: 'Users were successfully added.'
@@ -73,14 +36,14 @@ class Projects::ProjectMembersController < Projects::ApplicationController
 
     respond_to do |format|
       format.html do
-        redirect_to namespace_project_project_members_path(@project.namespace, @project)
+        redirect_to namespace_project_settings_members_path(@project.namespace, @project)
       end
       format.js { head :ok }
     end
   end
 
   def resend_invite
-    redirect_path = namespace_project_project_members_path(@project.namespace, @project)
+    redirect_path = namespace_project_settings_members_path(@project.namespace, @project)
 
     @project_member = @project.project_members.find(params[:id])
 
@@ -103,7 +66,7 @@ class Projects::ProjectMembersController < Projects::ApplicationController
       return render_404
     end
 
-    redirect_to(namespace_project_project_members_path(project.namespace, project),
+    redirect_to(namespace_project_settings_members_path(project.namespace, project),
                 notice: notice)
   end
 
diff --git a/app/controllers/projects/settings/members_controller.rb b/app/controllers/projects/settings/members_controller.rb
new file mode 100644
index 00000000000..5735e281f66
--- /dev/null
+++ b/app/controllers/projects/settings/members_controller.rb
@@ -0,0 +1,55 @@
+module Projects
+  module Settings
+    class MembersController < Projects::ApplicationController
+      include SortingHelper
+
+      def show
+        @sort = params[:sort].presence || sort_value_name
+        @group_links = @project.project_group_links
+
+        @project_members = @project.project_members
+        @project_members = @project_members.non_invite unless can?(current_user, :admin_project, @project)
+
+        group = @project.group
+
+        # group links
+        @group_links = @project.project_group_links.all
+
+        @skip_groups = @group_links.pluck(:group_id)
+        @skip_groups << @project.namespace_id unless @project.personal?
+
+        if group
+          # We need `.where.not(user_id: nil)` here otherwise when a group has an
+          # invitee, it would make the following query return 0 rows since a NULL
+          # user_id would be present in the subquery
+          # See http://stackoverflow.com/questions/129077/not-in-clause-and-null-values
+          group_members = MembersFinder.new(@project_members, group).execute(current_user)
+        end
+
+        if params[:search].present?
+          user_ids = @project.users.search(params[:search]).select(:id)
+          @project_members = @project_members.where(user_id: user_ids)
+
+          if group_members
+            user_ids = group.users.search(params[:search]).select(:id)
+            group_members = group_members.where(user_id: user_ids)
+          end
+
+          @group_links = @project.project_group_links.where(group_id: @project.invited_groups.search(params[:search]).select(:id))
+        end
+
+        wheres = ["members.id IN (#{@project_members.select(:id).to_sql})"]
+        wheres << "members.id IN (#{group_members.select(:id).to_sql})" if group_members
+
+        @project_members = Member.
+          where(wheres.join(' OR ')).
+          sort(@sort).
+          page(params[:page])
+
+        @requesters = AccessRequestsFinder.new(@project).execute(current_user)
+
+        @project_member = @project.project_members.new
+      end
+    end
+  end
+end
diff --git a/app/controllers/projects/snippets_controller.rb b/app/controllers/projects/snippets_controller.rb
index 0720be2e55d..02a97c1c574 100644
--- a/app/controllers/projects/snippets_controller.rb
+++ b/app/controllers/projects/snippets_controller.rb
@@ -26,6 +26,9 @@ class Projects::SnippetsController < Projects::ApplicationController
       scope: params[:scope]
     )
     @snippets = @snippets.page(params[:page])
+    if @snippets.out_of_range? && @snippets.total_pages != 0
+      redirect_to namespace_project_snippets_path(page: @snippets.total_pages)
+    end
   end
 
   def new
diff --git a/app/controllers/projects/tags_controller.rb b/app/controllers/projects/tags_controller.rb
index 953091492ae..e2d9d5ed460 100644
--- a/app/controllers/projects/tags_controller.rb
+++ b/app/controllers/projects/tags_controller.rb
@@ -8,7 +8,7 @@ class Projects::TagsController < Projects::ApplicationController
   before_action :authorize_admin_project!, only: [:destroy]
 
   def index
-    params[:sort] = params[:sort].presence || 'name'
+    params[:sort] = params[:sort].presence || sort_value_recently_updated
 
     @sort = params[:sort]
     @tags = TagsFinder.new(@repository, params).execute
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index a8a18b4fa16..444ff837bb3 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -42,19 +42,16 @@ class ProjectsController < Projects::ApplicationController
   end
 
   def update
-    status = ::Projects::UpdateService.new(@project, current_user, project_params).execute
+    result = ::Projects::UpdateService.new(@project, current_user, project_params).execute
 
     # Refresh the repo in case anything changed
-    @repository = project.repository
+    @repository = @project.repository
 
     respond_to do |format|
-      if status
+      if result[:status] == :success
         flash[:notice] = "Project '#{@project.name}' was successfully updated."
         format.html do
-          redirect_to(
-            edit_project_path(@project),
-            notice: "Project '#{@project.name}' was successfully updated."
-          )
+          redirect_to(edit_project_path(@project))
         end
       else
         format.html { render 'edit' }
@@ -127,39 +124,6 @@ class ProjectsController < Projects::ApplicationController
     redirect_to edit_project_path(@project), alert: ex.message
   end
 
-  def autocomplete_sources
-    noteable =
-      case params[:type]
-      when 'Issue'
-        IssuesFinder.new(current_user, project_id: @project.id).
-          execute.find_by(iid: params[:type_id])
-      when 'MergeRequest'
-        MergeRequestsFinder.new(current_user, project_id: @project.id).
-          execute.find_by(iid: params[:type_id])
-      when 'Commit'
-        @project.commit(params[:type_id])
-      else
-        nil
-      end
-
-    autocomplete = ::Projects::AutocompleteService.new(@project, current_user)
-    participants = ::Projects::ParticipantsService.new(@project, current_user).execute(noteable)
-
-    @suggestions = {
-      emojis: Gitlab::AwardEmoji.urls,
-      issues: autocomplete.issues,
-      milestones: autocomplete.milestones,
-      mergerequests: autocomplete.merge_requests,
-      labels: autocomplete.labels,
-      members: participants,
-      commands: autocomplete.commands(noteable, params[:type])
-    }
-
-    respond_to do |format|
-      format.json { render json: @suggestions }
-    end
-  end
-
   def new_issue_address
     return render_404 unless Gitlab::IncomingEmail.supports_issue_creation?
 
diff --git a/app/controllers/registrations_controller.rb b/app/controllers/registrations_controller.rb
index c45196cc3e9..bf27f3d4d51 100644
--- a/app/controllers/registrations_controller.rb
+++ b/app/controllers/registrations_controller.rb
@@ -7,17 +7,17 @@ class RegistrationsController < Devise::RegistrationsController
   end
 
   def create
-    if !Gitlab::Recaptcha.load_configurations! || verify_recaptcha
-      # To avoid duplicate form fields on the login page, the registration form
-      # names fields using `new_user`, but Devise still wants the params in
-      # `user`.
-      if params["new_#{resource_name}"].present? && params[resource_name].blank?
-        params[resource_name] = params.delete(:"new_#{resource_name}")
-      end
+    # To avoid duplicate form fields on the login page, the registration form
+    # names fields using `new_user`, but Devise still wants the params in
+    # `user`.
+    if params["new_#{resource_name}"].present? && params[resource_name].blank?
+      params[resource_name] = params.delete(:"new_#{resource_name}")
+    end
 
+    if !Gitlab::Recaptcha.load_configurations! || verify_recaptcha
       super
     else
-      flash[:alert] = "There was an error with the reCAPTCHA code below. Please re-enter the code."
+      flash[:alert] = 'There was an error with the reCAPTCHA. Please re-solve the reCAPTCHA.'
       flash.delete :recaptcha_error
       render action: 'new'
     end
@@ -57,7 +57,7 @@ class RegistrationsController < Devise::RegistrationsController
   end
 
   def sign_up_params
-    params.require(:user).permit(:username, :email, :name, :password, :password_confirmation)
+    params.require(:user).permit(:username, :email, :email_confirmation, :name, :password)
   end
 
   def resource_name
diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
index 8c698695202..93a180b9036 100644
--- a/app/controllers/sessions_controller.rb
+++ b/app/controllers/sessions_controller.rb
@@ -114,7 +114,7 @@ class SessionsController < Devise::SessionsController
 
   def valid_otp_attempt?(user)
     user.validate_and_consume_otp!(user_params[:otp_attempt]) ||
-    user.invalidate_otp_backup_code!(user_params[:otp_attempt])
+      user.invalidate_otp_backup_code!(user_params[:otp_attempt])
   end
 
   def log_audit_event(user, options = {})
diff --git a/app/finders/issuable_finder.rb b/app/finders/issuable_finder.rb
index b4c14d05eaf..1576fc80a6b 100644
--- a/app/finders/issuable_finder.rb
+++ b/app/finders/issuable_finder.rb
@@ -165,31 +165,53 @@ class IssuableFinder
       end
   end
 
-  def assignee?
-    params[:assignee_id].present?
+  def assignee_id?
+    params[:assignee_id].present? && params[:assignee_id] != NONE
+  end
+
+  def assignee_username?
+    params[:assignee_username].present? && params[:assignee_username] != NONE
+  end
+
+  def no_assignee?
+    # Assignee_id takes precedence over assignee_username
+    params[:assignee_id] == NONE || params[:assignee_username] == NONE
   end
 
   def assignee
     return @assignee if defined?(@assignee)
 
     @assignee =
-      if assignee? && params[:assignee_id] != NONE
-        User.find(params[:assignee_id])
+      if assignee_id?
+        User.find_by(id: params[:assignee_id])
+      elsif assignee_username?
+        User.find_by(username: params[:assignee_username])
       else
         nil
       end
   end
 
-  def author?
-    params[:author_id].present?
+  def author_id?
+    params[:author_id].present? && params[:author_id] != NONE
+  end
+
+  def author_username?
+    params[:author_username].present? && params[:author_username] != NONE
+  end
+
+  def no_author?
+    # author_id takes precedence over author_username
+    params[:author_id] == NONE || params[:author_username] == NONE
   end
 
   def author
     return @author if defined?(@author)
 
     @author =
-      if author? && params[:author_id] != NONE
-        User.find(params[:author_id])
+      if author_id?
+        User.find_by(id: params[:author_id])
+      elsif author_username?
+        User.find_by(username: params[:author_username])
       else
         nil
       end
@@ -263,16 +285,24 @@ class IssuableFinder
   end
 
   def by_assignee(items)
-    if assignee?
-      items = items.where(assignee_id: assignee.try(:id))
+    if assignee
+      items = items.where(assignee_id: assignee.id)
+    elsif no_assignee?
+      items = items.where(assignee_id: nil)
+    elsif assignee_id? || assignee_username? # assignee not found
+      items = items.none
     end
 
     items
   end
 
   def by_author(items)
-    if author?
-      items = items.where(author_id: author.try(:id))
+    if author
+      items = items.where(author_id: author.id)
+    elsif no_author?
+      items = items.where(author_id: nil)
+    elsif author_id? || author_username? # author not found
+      items = items.none
     end
 
     items
diff --git a/app/finders/issues_finder.rb b/app/finders/issues_finder.rb
index be00a219205..707eddd4d29 100644
--- a/app/finders/issues_finder.rb
+++ b/app/finders/issues_finder.rb
@@ -23,10 +23,26 @@ class IssuesFinder < IssuableFinder
   private
 
   def init_collection
-    Issue.visible_to_user(current_user)
+    IssuesFinder.not_restricted_by_confidentiality(current_user)
   end
 
   def iid_pattern
     @iid_pattern ||= %r{\A#{Regexp.escape(Issue.reference_prefix)}(?<iid>\d+)\z}
   end
+
+  def self.not_restricted_by_confidentiality(user)
+    return Issue.where('issues.confidential IS NULL OR issues.confidential IS FALSE') if user.blank?
+
+    return Issue.all if user.admin?
+
+    Issue.where('
+      issues.confidential IS NULL
+      OR issues.confidential IS FALSE
+      OR (issues.confidential = TRUE
+        AND (issues.author_id = :user_id
+          OR issues.assignee_id = :user_id
+          OR issues.project_id IN(:project_ids)))',
+      user_id: user.id,
+      project_ids: user.authorized_projects(Gitlab::Access::REPORTER).select(:id))
+  end
 end
diff --git a/app/finders/members_finder.rb b/app/finders/members_finder.rb
new file mode 100644
index 00000000000..702944404f5
--- /dev/null
+++ b/app/finders/members_finder.rb
@@ -0,0 +1,13 @@
+class MembersFinder < Projects::ApplicationController
+  def initialize(project_members, project_group)
+    @project_members = project_members
+    @project_group = project_group
+  end
+
+  def execute(current_user)
+    non_null_user_ids = @project_members.where.not(user_id: nil).select(:user_id)
+    group_members = @project_group.group_members.where.not(user_id: non_null_user_ids)
+    group_members = group_members.non_invite unless can?(current_user, :admin_group,  @project_group)
+    group_members
+  end
+end
diff --git a/app/finders/notes_finder.rb b/app/finders/notes_finder.rb
index 2484339e3a4..4bd8c83081a 100644
--- a/app/finders/notes_finder.rb
+++ b/app/finders/notes_finder.rb
@@ -1,27 +1,102 @@
 class NotesFinder
   FETCH_OVERLAP = 5.seconds
 
-  def execute(project, current_user, params)
-    target_type = params[:target_type]
-    target_id   = params[:target_id]
-    # Default to 0 to remain compatible with old clients
-    last_fetched_at = Time.at(params.fetch(:last_fetched_at, 0).to_i)
-
-    notes =
-      case target_type
-      when "commit"
-        project.notes.for_commit_id(target_id).non_diff_notes
-      when "issue"
-        IssuesFinder.new(current_user, project_id: project.id).find(target_id).notes.inc_author
-      when "merge_request"
-        MergeRequestsFinder.new(current_user, project_id: project.id).find(target_id).mr_and_commit_notes.inc_author
-      when "snippet", "project_snippet"
-        project.snippets.find(target_id).notes
+  # Used to filter Notes
+  # When used with target_type and target_id this returns notes specifically for the controller
+  #
+  # Arguments:
+  #   current_user - which user check authorizations with
+  #   project - which project to look for notes on
+  #   params:
+  #     target_type: string
+  #     target_id: integer
+  #     last_fetched_at: time
+  #     search: string
+  #
+  def initialize(project, current_user, params = {})
+    @project = project
+    @current_user = current_user
+    @params = params
+    init_collection
+  end
+
+  def execute
+    @notes = since_fetch_at(@params[:last_fetched_at]) if @params[:last_fetched_at]
+    @notes
+  end
+
+  private
+
+  def init_collection
+    if @params[:target_id]
+      @notes = on_target(@params[:target_type], @params[:target_id])
+    else
+      @notes = notes_of_any_type
+    end
+  end
+
+  def notes_of_any_type
+    types = %w(commit issue merge_request snippet)
+    note_relations = types.map { |t| notes_for_type(t) }
+    note_relations.map!{ |notes| search(@params[:search], notes) } if @params[:search]
+    UnionFinder.new.find_union(note_relations, Note)
+  end
+
+  def noteables_for_type(noteable_type)
+    case noteable_type
+    when "issue"
+      IssuesFinder.new(@current_user, project_id: @project.id).execute
+    when "merge_request"
+      MergeRequestsFinder.new(@current_user, project_id: @project.id).execute
+    when "snippet", "project_snippet"
+      SnippetsFinder.new.execute(@current_user, filter: :by_project, project: @project)
+    else
+      raise 'invalid target_type'
+    end
+  end
+
+  def notes_for_type(noteable_type)
+    if noteable_type == "commit"
+      if Ability.allowed?(@current_user, :download_code, @project)
+        @project.notes.where(noteable_type: 'Commit')
+      else
+        Note.none
+      end
+    else
+      finder = noteables_for_type(noteable_type)
+      @project.notes.where(noteable_type: finder.base_class.name, noteable_id: finder.reorder(nil))
+    end
+  end
+
+  def on_target(target_type, target_id)
+    if target_type == "commit"
+      notes_for_type('commit').for_commit_id(target_id)
+    else
+      target = noteables_for_type(target_type).find(target_id)
+
+      if target.respond_to?(:related_notes)
+        target.related_notes
       else
-        raise 'invalid target_type'
+        target.notes
       end
+    end
+  end
+
+  # Searches for notes matching the given query.
+  #
+  # This method uses ILIKE on PostgreSQL and LIKE on MySQL.
+  #
+  def search(query, notes_relation = @notes)
+    pattern = "%#{query}%"
+    notes_relation.where(Note.arel_table[:note].matches(pattern))
+  end
+
+  # Notes changed since last fetch
+  # Uses overlapping intervals to avoid worrying about race conditions
+  def since_fetch_at(fetch_time)
+    # Default to 0 to remain compatible with old clients
+    last_fetched_at = Time.at(@params.fetch(:last_fetched_at, 0).to_i)
 
-    # Use overlapping intervals to avoid worrying about race conditions
-    notes.where('updated_at > ?', last_fetched_at - FETCH_OVERLAP).fresh
+    @notes.where('updated_at > ?', last_fetched_at - FETCH_OVERLAP).fresh
   end
 end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index c816b616631..a112928c6de 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -244,7 +244,9 @@ 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]
     }
diff --git a/app/helpers/auth_helper.rb b/app/helpers/auth_helper.rb
index 92bac149313..1ee6c1d3afa 100644
--- a/app/helpers/auth_helper.rb
+++ b/app/helpers/auth_helper.rb
@@ -1,5 +1,5 @@
 module AuthHelper
-  PROVIDERS_WITH_ICONS = %w(twitter github gitlab bitbucket google_oauth2 facebook azure_oauth2).freeze
+  PROVIDERS_WITH_ICONS = %w(twitter github gitlab bitbucket google_oauth2 facebook azure_oauth2 authentiq).freeze
   FORM_BASED_PROVIDERS = [/\Aldap/, 'crowd'].freeze
 
   def ldap_enabled?
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 07ff6fb9488..c3508443d8a 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -188,7 +188,11 @@ module BlobHelper
   end
 
   def gitlab_ci_ymls
-    @gitlab_ci_ymls ||= Gitlab::Template::GitlabCiYmlTemplate.dropdown_names
+    @gitlab_ci_ymls ||= Gitlab::Template::GitlabCiYmlTemplate.dropdown_names(params[:context])
+  end
+
+  def dockerfile_names
+    @dockerfile_names ||= Gitlab::Template::DockerfileTemplate.dropdown_names
   end
 
   def blob_editor_paths
diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb
index 8e19752a8a1..94f3b480178 100644
--- a/app/helpers/ci_status_helper.rb
+++ b/app/helpers/ci_status_helper.rb
@@ -1,28 +1,10 @@
 module CiStatusHelper
   def ci_status_path(pipeline)
     project = pipeline.project
-    builds_namespace_project_commit_path(project.namespace, project, pipeline.sha)
-  end
-
-  def ci_status_with_icon(status, target = nil)
-    content = ci_icon_for_status(status) + ci_text_for_status(status)
-    klass = "ci-status ci-#{status}"
-
-    if target
-      link_to content, target, class: klass
-    else
-      content_tag :span, content, class: klass
-    end
-  end
-
-  def ci_text_for_status(status)
-    if detailed_status?(status)
-      status.text
-    else
-      status
-    end
+    namespace_project_pipeline_path(project.namespace, project, pipeline)
   end
 
+  # Is used by Commit and Merge Request Widget
   def ci_label_for_status(status)
     if detailed_status?(status)
       return status.label
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index 66a720a9426..e9461b9f859 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -128,50 +128,11 @@ module CommitsHelper
   end
 
   def revert_commit_link(commit, continue_to_path, btn_class: nil, has_tooltip: true)
-    return unless current_user
-
-    tooltip = "Revert this #{commit.change_type_title(current_user)} in a new merge request" if has_tooltip
-
-    if can_collaborate_with_project?
-      btn_class = "btn btn-warning btn-#{btn_class}" unless btn_class.nil?
-      link_to 'Revert', '#modal-revert-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 = {
-        to: continue_to_path,
-        notice: edit_in_new_fork_notice + ' Try to revert this commit again.',
-        notice_now: edit_in_new_fork_notice_now
-      }
-      fork_path = namespace_project_forks_path(@project.namespace, @project,
-        namespace_key: current_user.namespace.id,
-        continue: continue_params)
-
-      btn_class = "btn btn-grouped btn-warning" unless btn_class.nil?
-
-      link_to 'Revert', fork_path, class: btn_class, method: :post, 'data-toggle' => 'tooltip', 'data-container' => 'body', title: (tooltip if has_tooltip)
-    end
+    commit_action_link('revert', commit, continue_to_path, btn_class: btn_class, has_tooltip: has_tooltip)
   end
 
   def cherry_pick_commit_link(commit, continue_to_path, btn_class: nil, has_tooltip: true)
-    return unless current_user
-
-    tooltip = "Cherry-pick this #{commit.change_type_title(current_user)} in a new merge request"
-
-    if can_collaborate_with_project?
-      btn_class = "btn btn-default btn-#{btn_class}" unless btn_class.nil?
-      link_to 'Cherry-pick', '#modal-cherry-pick-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 = {
-        to: continue_to_path,
-        notice: edit_in_new_fork_notice + ' Try to cherry-pick this commit again.',
-        notice_now: edit_in_new_fork_notice_now
-      }
-      fork_path = namespace_project_forks_path(@project.namespace, @project,
-        namespace_key: current_user.namespace.id,
-        continue: continue_params)
-
-      btn_class = "btn btn-grouped btn-close" unless btn_class.nil?
-      link_to 'Cherry-pick', fork_path, class: "#{btn_class}", method: :post, 'data-toggle' => 'tooltip', 'data-container' => 'body', title: (tooltip if has_tooltip)
-    end
+    commit_action_link('cherry-pick', commit, continue_to_path, btn_class: btn_class, has_tooltip: has_tooltip)
   end
 
   protected
@@ -211,6 +172,28 @@ module CommitsHelper
     end
   end
 
+  def commit_action_link(action, commit, continue_to_path, btn_class: nil, has_tooltip: true)
+    return unless current_user
+
+    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?
+      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 = {
+        to: continue_to_path,
+        notice: "#{edit_in_new_fork_notice} Try to #{action} this commit again.",
+        notice_now: edit_in_new_fork_notice_now
+      }
+      fork_path = namespace_project_forks_path(@project.namespace, @project,
+        namespace_key: current_user.namespace.id,
+        continue: continue_params)
+
+      link_to action.capitalize, fork_path, class: btn_class, method: :post, 'data-toggle' => 'tooltip', 'data-container' => 'body', title: (tooltip if has_tooltip)
+    end
+  end
+
   def view_file_btn(commit_sha, diff_new_path, project)
     link_to(
       namespace_project_blob_path(project.namespace, project,
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index c35d6611ab0..aed1d7c839f 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -165,4 +165,10 @@ module DiffHelper
 
     link_to "#{hide_whitespace? ? 'Show' : 'Hide'} whitespace changes", url, class: options[:class]
   end
+
+  def render_overflow_warning?(diff_files)
+    diffs = @merge_request_diff.presence || diff_files
+
+    diffs.overflow?
+  end
 end
diff --git a/app/helpers/form_helper.rb b/app/helpers/form_helper.rb
index 6a43be2cf3e..1182939f656 100644
--- a/app/helpers/form_helper.rb
+++ b/app/helpers/form_helper.rb
@@ -7,12 +7,12 @@ module FormHelper
 
     content_tag(:div, class: 'alert alert-danger', id: 'error_explanation') do
       content_tag(:h4, headline) <<
-      content_tag(:ul) do
-        model.errors.full_messages.
-          map { |msg| content_tag(:li, msg) }.
-          join.
-          html_safe
-      end
+        content_tag(:ul) do
+          model.errors.full_messages.
+            map { |msg| content_tag(:li, msg) }.
+            join.
+            html_safe
+        end
     end
   end
 end
diff --git a/app/helpers/gitlab_markdown_helper.rb b/app/helpers/gitlab_markdown_helper.rb
index eb435cc1783..6d365ea9251 100644
--- a/app/helpers/gitlab_markdown_helper.rb
+++ b/app/helpers/gitlab_markdown_helper.rb
@@ -110,6 +110,28 @@ module GitlabMarkdownHelper
     end
   end
 
+  # Returns the text necessary to reference `entity` across projects
+  #
+  # project - Project to reference
+  # entity  - Object that responds to `to_reference`
+  #
+  # Examples:
+  #
+  #   cross_project_reference(project, project.issues.first)
+  #   # => 'namespace1/project1#123'
+  #
+  #   cross_project_reference(project, project.merge_requests.first)
+  #   # => 'namespace1/project1!345'
+  #
+  # Returns a String
+  def cross_project_reference(project, entity)
+    if entity.respond_to?(:to_reference)
+      entity.to_reference(project, full: true)
+    else
+      ''
+    end
+  end
+
   private
 
   # Return +text+, truncated to +max_chars+ characters, excluding any HTML
@@ -158,28 +180,6 @@ module GitlabMarkdownHelper
     end
   end
 
-  # Returns the text necessary to reference `entity` across projects
-  #
-  # project - Project to reference
-  # entity  - Object that responds to `to_reference`
-  #
-  # Examples:
-  #
-  #   cross_project_reference(project, project.issues.first)
-  #   # => 'namespace1/project1#123'
-  #
-  #   cross_project_reference(project, project.merge_requests.first)
-  #   # => 'namespace1/project1!345'
-  #
-  # Returns a String
-  def cross_project_reference(project, entity)
-    if entity.respond_to?(:to_reference)
-      entity.to_reference(project)
-    else
-      ''
-    end
-  end
-
   def markdown_toolbar_button(options = {})
     data = options[:data].merge({ container: "body" })
     content_tag :button,
diff --git a/app/helpers/gitlab_routing_helper.rb b/app/helpers/gitlab_routing_helper.rb
index 99db73c9ee0..5742fec4458 100644
--- a/app/helpers/gitlab_routing_helper.rb
+++ b/app/helpers/gitlab_routing_helper.rb
@@ -206,4 +206,9 @@ module GitlabRoutingHelper
       file_namespace_project_build_artifacts_path(*args)
     end
   end
+
+  # Settings
+  def project_settings_members_path(project, *args)
+    namespace_project_settings_members_path(project.namespace, project, *args)
+  end
 end
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index f6d4ea4659a..77dc9e7d538 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -12,11 +12,18 @@ module GroupsHelper
   end
 
   def group_title(group, name = nil, url = nil)
-    full_title = link_to(simple_sanitize(group.name), group_path(group))
+    full_title = ''
+
+    group.parents.each do |parent|
+      full_title += link_to(simple_sanitize(parent.name), group_path(parent))
+      full_title += ' / '.html_safe
+    end
+
+    full_title += link_to(simple_sanitize(group.name), group_path(group))
     full_title += ' &middot; '.html_safe + link_to(simple_sanitize(name), url) if name
 
     content_tag :span do
-      full_title
+      full_title.html_safe
     end
   end
 
diff --git a/app/helpers/import_helper.rb b/app/helpers/import_helper.rb
index 021d2b14718..a0642a1894b 100644
--- a/app/helpers/import_helper.rb
+++ b/app/helpers/import_helper.rb
@@ -4,8 +4,10 @@ module ImportHelper
     "#{namespace}/#{name}"
   end
 
-  def github_project_link(path_with_namespace)
-    link_to path_with_namespace, github_project_url(path_with_namespace), target: '_blank'
+  def provider_project_link(provider, path_with_namespace)
+    url = __send__("#{provider}_project_url", path_with_namespace)
+
+    link_to path_with_namespace, url, target: '_blank'
   end
 
   private
@@ -20,4 +22,8 @@ module ImportHelper
     provider = Gitlab.config.omniauth.providers.find { |p| p.name == 'github' }
     @github_url = provider.fetch('url', 'https://github.com') if provider
   end
+
+  def gitea_project_url(path_with_namespace)
+    "#{@gitea_host_url.sub(%r{/+\z}, '')}/#{path_with_namespace}"
+  end
 end
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index 8231f8fa334..e5bb8b93e76 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -30,6 +30,15 @@ module IssuablesHelper
     end
   end
 
+  def serialize_issuable(issuable)
+    case issuable
+    when Issue
+      IssueSerializer.new.represent(issuable).to_json
+    when MergeRequest
+      MergeRequestSerializer.new.represent(issuable).to_json
+    end
+  end
+
   def template_dropdown_tag(issuable, &block)
     title = selected_template(issuable) || "Choose a template"
     options = {
@@ -96,8 +105,8 @@ module IssuablesHelper
 
     if issuable.tasks?
       output << "&ensp;".html_safe
-      output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs")
-      output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-sm hidden-md hidden-lg")
+      output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs hidden-sm")
+      output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-md hidden-lg")
     end
 
     output
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index a8a49e43b05..a2d21b67a77 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -58,13 +58,13 @@ module IssuesHelper
   end
 
   def status_box_class(item)
-    if item.respond_to?(:expired?) && item.expired?
+    if item.try(:expired?)
       'status-box-expired'
-    elsif item.respond_to?(:merged?) && item.merged?
+    elsif item.try(:merged?)
       'status-box-merged'
     elsif item.closed?
       'status-box-closed'
-    elsif item.respond_to?(:upcoming?) && item.upcoming?
+    elsif item.try(:upcoming?)
       'status-box-upcoming'
     else
       'status-box-open'
@@ -128,8 +128,10 @@ module IssuesHelper
     names.to_sentence
   end
 
-  def award_active_class(awards, current_user)
-    if current_user && awards.find { |a| a.user_id == current_user.id }
+  def award_state_class(awards, current_user)
+    if !current_user
+      "disabled"
+    elsif current_user && awards.find { |a| a.user_id == current_user.id }
       "active"
     else
       ""
diff --git a/app/helpers/mattermost_helper.rb b/app/helpers/mattermost_helper.rb
new file mode 100644
index 00000000000..49ac12db832
--- /dev/null
+++ b/app/helpers/mattermost_helper.rb
@@ -0,0 +1,9 @@
+module MattermostHelper
+  def mattermost_teams_options(teams)
+    teams_options = teams.map do |id, options|
+      [options['display_name'] || options['name'], id]
+    end
+
+    teams_options.compact.unshift(['Select team...', '0'])
+  end
+end
diff --git a/app/helpers/members_helper.rb b/app/helpers/members_helper.rb
index 877c77050be..41d471cc92f 100644
--- a/app/helpers/members_helper.rb
+++ b/app/helpers/members_helper.rb
@@ -36,4 +36,12 @@ module MembersHelper
     "Are you sure you want to leave the " \
     "\"#{member_source.human_name}\" #{member_source.class.to_s.humanize(capitalize: false)}?"
   end
+
+  def filter_group_project_member_path(options = {})
+    options = params.slice(:search, :sort).merge(options)
+
+    path = request.path
+    path << "?#{options.to_param}"
+    path
+  end
 end
diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb
index a6659ea2fd1..8c2c4e8833b 100644
--- a/app/helpers/merge_requests_helper.rb
+++ b/app/helpers/merge_requests_helper.rb
@@ -19,6 +19,14 @@ module MergeRequestsHelper
     }
   end
 
+  def mr_widget_refresh_url(mr)
+    if mr && mr.source_project
+      merge_widget_refresh_namespace_project_merge_request_url(mr.source_project.namespace, mr.source_project, mr)
+    else
+      ''
+    end
+  end
+
   def mr_css_classes(mr)
     classes = "merge-request"
     classes << " closed" if mr.closed?
@@ -59,6 +67,10 @@ module MergeRequestsHelper
     @mr_closes_issues ||= @merge_request.closes_issues
   end
 
+  def mr_issues_mentioned_but_not_closing
+    @mr_issues_mentioned_but_not_closing ||= @merge_request.issues_mentioned_but_not_closing
+  end
+
   def mr_change_branches_path(merge_request)
     new_namespace_project_merge_request_path(
       @project.namespace, @project,
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index a3331dc80cb..e21178c7377 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -7,12 +7,12 @@ module NavHelper
 
   def page_gutter_class
     if current_path?('merge_requests#show') ||
-      current_path?('merge_requests#diffs') ||
-      current_path?('merge_requests#commits') ||
-      current_path?('merge_requests#builds') ||
-      current_path?('merge_requests#conflicts') ||
-      current_path?('merge_requests#pipelines') ||
-      current_path?('issues#show')
+        current_path?('merge_requests#diffs') ||
+        current_path?('merge_requests#commits') ||
+        current_path?('merge_requests#builds') ||
+        current_path?('merge_requests#conflicts') ||
+        current_path?('merge_requests#pipelines') ||
+        current_path?('issues#show')
       if cookies[:collapsed_gutter] == 'true'
         "page-gutter right-sidebar-collapsed"
       else
@@ -21,9 +21,9 @@ module NavHelper
     elsif current_path?('builds#show')
       "page-gutter build-sidebar right-sidebar-expanded"
     elsif current_path?('wikis#show') ||
-      current_path?('wikis#edit') ||
-      current_path?('wikis#history') ||
-      current_path?('wikis#git_access')
+        current_path?('wikis#edit') ||
+        current_path?('wikis#history') ||
+        current_path?('wikis#git_access')
       "page-gutter wiki-sidebar right-sidebar-expanded"
     end
   end
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 9cda3b78761..c6c63918fa5 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -52,7 +52,7 @@ module ProjectsHelper
   def project_title(project)
     namespace_link =
       if project.group
-        link_to(simple_sanitize(project.group.name), group_path(project.group))
+        group_title(project.group)
       else
         owner = project.namespace.owner
         link_to(simple_sanitize(owner.name), user_path(owner))
@@ -61,7 +61,7 @@ module ProjectsHelper
     project_link = link_to simple_sanitize(project.name), project_path(project), { class: "project-item-select-holder" }
 
     if current_user
-      project_link << button_tag(type: 'button', class: "dropdown-toggle-caret js-projects-dropdown-toggle", aria: { label: "Toggle switch project dropdown" }, data: { target: ".js-dropdown-menu-projects", toggle: "dropdown" }) do
+      project_link << button_tag(type: 'button', class: 'dropdown-toggle-caret js-projects-dropdown-toggle', aria: { label: 'Toggle switch project dropdown' }, data: { target: '.js-dropdown-menu-projects', toggle: 'dropdown', order_by: 'last_activity_at' }) do
         icon("chevron-down")
       end
     end
@@ -90,10 +90,12 @@ module ProjectsHelper
   end
 
   def project_for_deploy_key(deploy_key)
-    if deploy_key.projects.include?(@project)
+    if deploy_key.has_access_to?(@project)
       @project
     else
-      deploy_key.projects.find { |project| can?(current_user, :read_project, project) }
+      deploy_key.projects.find do |project|
+        can?(current_user, :read_project, project)
+      end
     end
   end
 
@@ -171,48 +173,27 @@ module ProjectsHelper
       nav_tabs << :merge_requests
     end
 
-    if can?(current_user, :read_pipeline, project)
-      nav_tabs << :pipelines
-    end
-
-    if can?(current_user, :read_build, project)
-      nav_tabs << :builds
-    end
-
     if Gitlab.config.registry.enabled && can?(current_user, :read_container_image, project)
       nav_tabs << :container_registry
     end
 
-    if can?(current_user, :read_environment, project)
-      nav_tabs << :environments
-    end
-
-    if can?(current_user, :admin_project, project)
-      nav_tabs << :settings
-    end
-
-    if can?(current_user, :read_project_member, project)
-      nav_tabs << :team
-    end
-
-    if can?(current_user, :read_issue, project)
-      nav_tabs << :issues
-    end
-
-    if can?(current_user, :read_wiki, project)
-      nav_tabs << :wiki
-    end
-
-    if can?(current_user, :read_project_snippet, project)
-      nav_tabs << :snippets
-    end
-
-    if can?(current_user, :read_label, project)
-      nav_tabs << :labels
-    end
+    tab_ability_map = {
+      environments: :read_environment,
+      milestones:   :read_milestone,
+      pipelines:    :read_pipeline,
+      snippets:     :read_project_snippet,
+      settings:     :admin_project,
+      builds:       :read_build,
+      labels:       :read_label,
+      issues:       :read_issue,
+      team:         :read_project_member,
+      wiki:         :read_wiki
+    }
 
-    if can?(current_user, :read_milestone, project)
-      nav_tabs << :milestones
+    tab_ability_map.each do |tab, ability|
+      if can?(current_user, ability, project)
+        nav_tabs << tab
+      end
     end
 
     nav_tabs.flatten
@@ -246,11 +227,6 @@ module ProjectsHelper
     end
   end
 
-  def repository_size(project = @project)
-    size_in_bytes = project.repository_size * 1.megabyte
-    number_to_human_size(size_in_bytes, delimiter: ',', precision: 2)
-  end
-
   def default_url_to_repo(project = @project)
     case default_clone_protocol
     when 'ssh'
@@ -280,13 +256,15 @@ module ProjectsHelper
     end
   end
 
-  def add_special_file_path(project, file_name:, commit_message: nil)
+  def add_special_file_path(project, file_name:, commit_message: nil, target_branch: nil, context: nil)
     namespace_project_new_blob_path(
       project.namespace,
       project,
       project.default_branch || 'master',
       file_name:      file_name,
-      commit_message: commit_message || "Add #{file_name.downcase}"
+      commit_message: commit_message || "Add #{file_name.downcase}",
+      target_branch: target_branch,
+      context: context
     )
   end
 
@@ -390,26 +368,12 @@ module ProjectsHelper
       "success"
     end
   end
-  
+
   def readme_cache_key
     sha = @project.commit.try(:sha) || 'nil'
     [@project.path_with_namespace, sha, "readme"].join('-')
   end
 
-  def round_commit_count(project)
-    count = project.commit_count
-
-    if count > 10000
-      '10000+'
-    elsif count > 5000
-      '5000+'
-    elsif count > 1000
-      '1000+'
-    else
-      count
-    end
-  end
-
   def current_ref
     @ref || @repository.try(:root_ref)
   end
diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb
index cdb9663877c..6654f6997ce 100644
--- a/app/helpers/search_helper.rb
+++ b/app/helpers/search_helper.rb
@@ -39,7 +39,7 @@ module SearchHelper
   # Autocomplete results for various settings pages
   def default_autocomplete
     [
-      { category: "Settings", label: "Profile settings", url: profile_path },
+      { category: "Settings", label: "User settings",    url: profile_path },
       { category: "Settings", label: "SSH Keys",         url: profile_keys_path },
       { category: "Settings", label: "Dashboard",        url: root_path },
       { category: "Settings", label: "Admin Section",    url: admin_root_path },
@@ -75,7 +75,7 @@ module SearchHelper
         { category: "Current Project", label: "Merge Requests", url: namespace_project_merge_requests_path(@project.namespace, @project) },
         { category: "Current Project", label: "Milestones",     url: namespace_project_milestones_path(@project.namespace, @project) },
         { category: "Current Project", label: "Snippets",       url: namespace_project_snippets_path(@project.namespace, @project) },
-        { category: "Current Project", label: "Members",        url: namespace_project_project_members_path(@project.namespace, @project) },
+        { category: "Current Project", label: "Members",        url: namespace_project_settings_members_path(@project.namespace, @project) },
         { category: "Current Project", label: "Wiki",           url: namespace_project_wikis_path(@project.namespace, @project) },
       ]
     else
diff --git a/app/helpers/sorting_helper.rb b/app/helpers/sorting_helper.rb
index 8b138a8e69f..ff787fb4131 100644
--- a/app/helpers/sorting_helper.rb
+++ b/app/helpers/sorting_helper.rb
@@ -11,6 +11,7 @@ module SortingHelper
       sort_value_due_date_soon => sort_title_due_date_soon,
       sort_value_due_date_later => sort_title_due_date_later,
       sort_value_largest_repo => sort_title_largest_repo,
+      sort_value_largest_group => sort_title_largest_group,
       sort_value_recently_signin => sort_title_recently_signin,
       sort_value_oldest_signin => sort_title_oldest_signin,
       sort_value_downvotes => sort_title_downvotes,
@@ -25,7 +26,7 @@ module SortingHelper
       sort_value_recently_updated => sort_title_recently_updated,
       sort_value_oldest_updated => sort_title_oldest_updated,
       sort_value_recently_created => sort_title_recently_created,
-      sort_value_oldest_created => sort_title_oldest_created,
+      sort_value_oldest_created => sort_title_oldest_created
     }
 
     if current_controller?('admin/projects')
@@ -35,6 +36,19 @@ module SortingHelper
     options
   end
 
+  def member_sort_options_hash
+    {
+      sort_value_access_level_asc => sort_title_access_level_asc,
+      sort_value_access_level_desc => sort_title_access_level_desc,
+      sort_value_last_joined => sort_title_last_joined,
+      sort_value_oldest_joined => sort_title_oldest_joined,
+      sort_value_name => sort_title_name_asc,
+      sort_value_name_desc => sort_title_name_desc,
+      sort_value_recently_signin => sort_title_recently_signin,
+      sort_value_oldest_signin => sort_title_oldest_signin
+    }
+  end
+
   def sort_title_priority
     'Priority'
   end
@@ -79,6 +93,10 @@ module SortingHelper
     'Largest repository'
   end
 
+  def sort_title_largest_group
+    'Largest group'
+  end
+
   def sort_title_recently_signin
     'Recent sign in'
   end
@@ -95,6 +113,50 @@ module SortingHelper
     'Most popular'
   end
 
+  def sort_title_last_joined
+    'Last joined'
+  end
+
+  def sort_title_oldest_joined
+    'Oldest joined'
+  end
+
+  def sort_title_access_level_asc
+    'Access level, ascending'
+  end
+
+  def sort_title_access_level_desc
+    'Access level, descending'
+  end
+
+  def sort_title_name_asc
+    'Name, ascending'
+  end
+
+  def sort_title_name_desc
+    'Name, descending'
+  end
+
+  def sort_value_last_joined
+    'last_joined'
+  end
+
+  def sort_value_oldest_joined
+    'oldest_joined'
+  end
+
+  def sort_value_access_level_asc
+    'access_level_asc'
+  end
+
+  def sort_value_access_level_desc
+    'access_level_desc'
+  end
+
+  def sort_value_name_desc
+    'name_desc'
+  end
+
   def sort_value_priority
     'priority'
   end
@@ -136,7 +198,11 @@ module SortingHelper
   end
 
   def sort_value_largest_repo
-    'repository_size_desc'
+    'storage_size_desc'
+  end
+
+  def sort_value_largest_group
+    'storage_size_desc'
   end
 
   def sort_value_recently_signin
diff --git a/app/helpers/storage_helper.rb b/app/helpers/storage_helper.rb
new file mode 100644
index 00000000000..e19c67a37ca
--- /dev/null
+++ b/app/helpers/storage_helper.rb
@@ -0,0 +1,7 @@
+module StorageHelper
+  def storage_counter(size_in_bytes)
+    precision = size_in_bytes < 1.megabyte ? 0 : 1
+
+    number_to_human_size(size_in_bytes, delimiter: ',', precision: precision, significant: false)
+  end
+end
diff --git a/app/helpers/tab_helper.rb b/app/helpers/tab_helper.rb
index 563ddd2a511..547f6258909 100644
--- a/app/helpers/tab_helper.rb
+++ b/app/helpers/tab_helper.rb
@@ -106,9 +106,9 @@ module TabHelper
 
   def branches_tab_class
     if current_controller?(:protected_branches) ||
-      current_controller?(:branches) ||
-      current_page?(namespace_project_repository_path(@project.namespace,
-                                                      @project))
+        current_controller?(:branches) ||
+        current_page?(namespace_project_repository_path(@project.namespace,
+                                                        @project))
       'active'
     end
   end
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index 09c69786791..74de25acf9d 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -35,7 +35,7 @@ module TodosHelper
     else
       path = [todo.project.namespace.becomes(Namespace), todo.project, todo.target]
 
-      path.unshift(:builds) if todo.build_failed?
+      path.unshift(:pipelines) if todo.build_failed?
 
       polymorphic_path(path, anchor: anchor)
     end
diff --git a/app/models/application_setting.rb b/app/models/application_setting.rb
index bf463a3b6bb..8fab77cda0a 100644
--- a/app/models/application_setting.rb
+++ b/app/models/application_setting.rb
@@ -68,6 +68,10 @@ class ApplicationSetting < ActiveRecord::Base
             presence: true,
             if: :koding_enabled
 
+  validates :plantuml_url,
+            presence: true,
+            if: :plantuml_enabled
+
   validates :max_attachment_size,
             presence: true,
             numericality: { only_integer: true, greater_than: 0 }
@@ -184,6 +188,8 @@ class ApplicationSetting < ActiveRecord::Base
       akismet_enabled: false,
       koding_enabled: false,
       koding_url: nil,
+      plantuml_enabled: false,
+      plantuml_url: nil,
       repository_checks_enabled: true,
       disabled_oauth_sign_in_sources: [],
       send_user_confirmation_email: false,
diff --git a/app/models/ci/build.rb b/app/models/ci/build.rb
index 5c84833b806..f6f93debaf3 100644
--- a/app/models/ci/build.rb
+++ b/app/models/ci/build.rb
@@ -9,8 +9,16 @@ module Ci
 
     has_many :deployments, as: :deployable
 
+    # 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_id: gl_project_id
+      )
+    end
+
     serialize :options
-    serialize :yaml_variables
+    serialize :yaml_variables, Gitlab::Serialize::Ci::Variables
 
     validates :coverage, numericality: true, allow_blank: true
     validates_presence_of :ref
@@ -35,6 +43,8 @@ module Ci
     before_destroy { project }
 
     after_create :execute_hooks
+    after_save :update_project_statistics, if: :artifacts_size_changed?
+    after_destroy :update_project_statistics
 
     class << self
       def first_pending
@@ -106,6 +116,12 @@ module Ci
       end
     end
 
+    def detailed_status(current_user)
+      Gitlab::Ci::Status::Build::Factory
+        .new(self, current_user)
+        .fabricate!
+    end
+
     def manual?
       self.when == 'manual'
     end
@@ -129,8 +145,13 @@ module Ci
       end
     end
 
+    def cancelable?
+      active?
+    end
+
     def retryable?
-      project.builds_enabled? && commands.present? && complete?
+      project.builds_enabled? && commands.present? &&
+        (success? || failed? || canceled?)
     end
 
     def retried?
@@ -138,11 +159,11 @@ module Ci
     end
 
     def expanded_environment_name
-      ExpandVariables.expand(environment, variables) if environment
+      ExpandVariables.expand(environment, simple_variables) if environment
     end
 
     def has_environment?
-      self.environment.present?
+      environment.present?
     end
 
     def starts_environment?
@@ -154,7 +175,7 @@ module Ci
     end
 
     def environment_action
-      self.options.fetch(:environment, {}).fetch(:action, 'start')
+      self.options.fetch(:environment, {}).fetch(:action, 'start') if self.options
     end
 
     def outdated_deployment?
@@ -190,12 +211,25 @@ module Ci
       project.build_timeout
     end
 
-    def variables
+    # A slugified version of the build ref, suitable for inclusion in URLs and
+    # domain names. Rules:
+    #
+    #   * Lowercased
+    #   * Anything not matching [a-z0-9-] is replaced with a -
+    #   * Maximum length is 63 bytes
+    def ref_slug
+      slugified = ref.to_s.downcase
+      slugified.gsub(/[^a-z0-9]/, '-')[0..62]
+    end
+
+    # Variables whose value does not depend on other variables
+    def simple_variables
       variables = predefined_variables
       variables += project.predefined_variables
       variables += pipeline.predefined_variables
       variables += runner.predefined_variables if runner
       variables += project.container_registry_variables
+      variables += project.deployment_variables if has_environment?
       variables += yaml_variables
       variables += user_variables
       variables += project.secret_variables
@@ -203,6 +237,13 @@ module Ci
       variables
     end
 
+    # All variables, including those dependent on other variables
+    def variables
+      variables = simple_variables
+      variables += persisted_environment.predefined_variables if persisted_environment.present?
+      variables
+    end
+
     def merge_request
       merge_requests = MergeRequest.includes(:merge_request_diff)
                                    .where(source_branch: ref, source_project_id: pipeline.gl_project_id)
@@ -472,6 +513,10 @@ module Ci
         end
     end
 
+    def has_expiring_artifacts?
+      artifacts_expire_at.present?
+    end
+
     def keep_artifacts!
       self.update(artifacts_expire_at: nil)
     end
@@ -524,6 +569,7 @@ module Ci
         { key: 'CI_BUILD_REF', value: sha, public: true },
         { key: 'CI_BUILD_BEFORE_SHA', value: before_sha, public: true },
         { key: 'CI_BUILD_REF_NAME', value: ref, public: true },
+        { key: 'CI_BUILD_REF_SLUG', value: ref_slug, public: true },
         { key: 'CI_BUILD_NAME', value: name, public: true },
         { key: 'CI_BUILD_STAGE', value: stage, public: true },
         { key: 'CI_SERVER_NAME', value: 'GitLab', public: true },
@@ -550,5 +596,9 @@ module Ci
       Ci::MaskSecret.mask!(trace, token)
       trace
     end
+
+    def update_project_statistics
+      ProjectCacheWorker.perform_async(project_id, [], [:build_artifacts_size])
+    end
   end
 end
diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index fda8228a1e9..2a97e8bae4a 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -88,8 +88,21 @@ module Ci
     end
 
     # ref can't be HEAD or SHA, can only be branch/tag name
+    scope :latest, ->(ref = nil) do
+      max_id = unscope(:select)
+        .select("max(#{quoted_table_name}.id)")
+        .group(:ref, :sha)
+
+      relation = ref ? where(ref: ref) : self
+      relation.where(id: max_id)
+    end
+
+    def self.latest_status(ref = nil)
+      latest(ref).status
+    end
+
     def self.latest_successful_for(ref)
-      where(ref: ref).order(id: :desc).success.first
+      success.latest(ref).order(id: :desc).first
     end
 
     def self.truncate_sha(sha)
@@ -100,6 +113,11 @@ module Ci
       where.not(duration: nil).sum(:duration)
     end
 
+    def stage(name)
+      stage = Ci::Stage.new(self, name: name)
+      stage unless stage.statuses_count.zero?
+    end
+
     def stages_count
       statuses.select(:stage).distinct.count
     end
@@ -124,7 +142,7 @@ module Ci
     end
 
     def artifacts
-      builds.latest.with_artifacts_not_expired
+      builds.latest.with_artifacts_not_expired.includes(project: [:namespace])
     end
 
     def project_id
@@ -173,7 +191,11 @@ module Ci
     end
 
     def manual_actions
-      builds.latest.manual_actions
+      builds.latest.manual_actions.includes(project: [:namespace])
+    end
+
+    def stuck?
+      builds.pending.any?(&:stuck?)
     end
 
     def retryable?
@@ -265,6 +287,10 @@ module Ci
       end
     end
 
+    def has_yaml_errors?
+      yaml_errors.present?
+    end
+
     def environments
       builds.where.not(environment: nil).success.pluck(:environment).uniq
     end
@@ -336,8 +362,10 @@ module Ci
         .select { |merge_request| merge_request.head_pipeline.try(:id) == self.id }
     end
 
-    def detailed_status
-      Gitlab::Ci::Status::Pipeline::Factory.new(self).fabricate!
+    def detailed_status(current_user)
+      Gitlab::Ci::Status::Pipeline::Factory
+        .new(self, current_user)
+        .fabricate!
     end
 
     private
diff --git a/app/models/ci/stage.rb b/app/models/ci/stage.rb
index d2a37c0a827..d035eda6df5 100644
--- a/app/models/ci/stage.rb
+++ b/app/models/ci/stage.rb
@@ -18,12 +18,18 @@ module Ci
       name
     end
 
+    def statuses_count
+      @statuses_count ||= statuses.count
+    end
+
     def status
       @status ||= statuses.latest.status
     end
 
-    def detailed_status
-      Gitlab::Ci::Status::Stage::Factory.new(self).fabricate!
+    def detailed_status(current_user)
+      Gitlab::Ci::Status::Stage::Factory
+        .new(self, current_user)
+        .fabricate!
     end
 
     def statuses
diff --git a/app/models/commit.rb b/app/models/commit.rb
index 1831cc7e175..3365f4ffdbf 100644
--- a/app/models/commit.rb
+++ b/app/models/commit.rb
@@ -91,8 +91,8 @@ class Commit
     @link_reference_pattern ||= super("commit", /(?<commit>\h{7,40})/)
   end
 
-  def to_reference(from_project = nil)
-    commit_reference(from_project, id)
+  def to_reference(from_project = nil, full: false)
+    commit_reference(from_project, id, full: full)
   end
 
   def reference_link_text(from_project = nil)
@@ -228,13 +228,9 @@ class Commit
   def status(ref = nil)
     @statuses ||= {}
 
-    if @statuses.key?(ref)
-      @statuses[ref]
-    elsif ref
-      @statuses[ref] = pipelines.where(ref: ref).status
-    else
-      @statuses[ref] = pipelines.status
-    end
+    return @statuses[ref] if @statuses.key?(ref)
+
+    @statuses[ref] = pipelines.latest_status(ref)
   end
 
   def revert_branch_name
@@ -270,7 +266,7 @@ class Commit
     @merged_merge_request_hash ||= Hash.new do |hash, user|
       hash[user] = merged_merge_request_no_cache(user)
     end
-    
+
     @merged_merge_request_hash[current_user]
   end
 
@@ -322,10 +318,18 @@ class Commit
     Gitlab::Diff::FileCollection::Commit.new(self, diff_options: diff_options)
   end
 
+  def persisted?
+    true
+  end
+
+  def touch
+    # no-op but needs to be defined since #persisted? is defined
+  end
+
   private
 
-  def commit_reference(from_project, referable_commit_id)
-    reference = project.to_reference(from_project)
+  def commit_reference(from_project, referable_commit_id, full: false)
+    reference = project.to_reference(from_project, full: full)
 
     if reference.present?
       "#{reference}#{self.class.reference_prefix}#{referable_commit_id}"
diff --git a/app/models/commit_range.rb b/app/models/commit_range.rb
index d9af7f6c139..84e2e8a5dd5 100644
--- a/app/models/commit_range.rb
+++ b/app/models/commit_range.rb
@@ -89,8 +89,8 @@ class CommitRange
 
   alias_method :id, :to_s
 
-  def to_reference(from_project = nil)
-    project_reference = project.to_reference(from_project)
+  def to_reference(from_project = nil, full: false)
+    project_reference = project.to_reference(from_project, full: full)
 
     if project_reference.present?
       project_reference + self.class.reference_prefix + self.id
diff --git a/app/models/commit_status.rb b/app/models/commit_status.rb
index cf90475f4d4..9547c57b2ae 100644
--- a/app/models/commit_status.rb
+++ b/app/models/commit_status.rb
@@ -131,4 +131,16 @@ class CommitStatus < ActiveRecord::Base
   def has_trace?
     false
   end
+
+  def detailed_status(current_user)
+    Gitlab::Ci::Status::Factory
+      .new(self, current_user)
+      .fabricate!
+  end
+
+  def sortable_name
+    name.split(/(\d+)/).map do |v|
+      v =~ /\d+/ ? v.to_i : v
+    end
+  end
 end
diff --git a/app/models/concerns/issuable.rb b/app/models/concerns/issuable.rb
index 0ea7b1b1098..3517969eabc 100644
--- a/app/models/concerns/issuable.rb
+++ b/app/models/concerns/issuable.rb
@@ -13,6 +13,7 @@ module Issuable
   include StripAttribute
   include Awardable
   include Taskable
+  include TimeTrackable
 
   included do
     cache_markdown_field :title, pipeline: :single_line
@@ -92,8 +93,9 @@ module Issuable
     after_save :record_metrics
 
     def update_assignee_cache_counts
-      # make sure we flush the cache for both the old *and* new assignee
-      User.find(assignee_id_was).update_cache_counts if assignee_id_was
+      # make sure we flush the cache for both the old *and* new assignees(if they exist)
+      previous_assignee = User.find_by_id(assignee_id_was) if assignee_id_was
+      previous_assignee.update_cache_counts if previous_assignee
       assignee.update_cache_counts if assignee
     end
 
diff --git a/app/models/concerns/milestoneish.rb b/app/models/concerns/milestoneish.rb
index 875e9834487..e9450dd0c26 100644
--- a/app/models/concerns/milestoneish.rb
+++ b/app/models/concerns/milestoneish.rb
@@ -1,10 +1,18 @@
 module Milestoneish
   def closed_items_count(user)
-    issues_visible_to_user(user).closed.size + merge_requests.closed_and_merged.size
+    memoize_per_user(user, :closed_items_count) do
+      (count_issues_by_state(user)['closed'] || 0) + merge_requests.closed_and_merged.size
+    end
   end
 
   def total_items_count(user)
-    issues_visible_to_user(user).size + merge_requests.size
+    memoize_per_user(user, :total_items_count) do
+      total_issues_count(user) + merge_requests.size
+    end
+  end
+
+  def total_issues_count(user)
+    count_issues_by_state(user).values.sum
   end
 
   def complete?(user)
@@ -30,7 +38,10 @@ module Milestoneish
   end
 
   def issues_visible_to_user(user)
-    issues.visible_to_user(user)
+    memoize_per_user(user, :issues_visible_to_user) do
+      IssuesFinder.new(user, issues_finder_params)
+        .execute.where(milestone_id: milestoneish_ids)
+    end
   end
 
   def upcoming?
@@ -50,4 +61,24 @@ module Milestoneish
   def expired?
     due_date && due_date.past?
   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
+
+  def memoize_per_user(user, method_name)
+    @memoized ||= {}
+    @memoized[method_name] ||= {}
+    @memoized[method_name][user.try!(:id)] ||= yield
+  end
+
+  # override in a class that includes this module to get a faster query
+  # from IssuesFinder
+  def issues_finder_params
+    {}
+  end
 end
diff --git a/app/models/concerns/project_features_compatibility.rb b/app/models/concerns/project_features_compatibility.rb
index 6d88951c713..60734bc6660 100644
--- a/app/models/concerns/project_features_compatibility.rb
+++ b/app/models/concerns/project_features_compatibility.rb
@@ -32,6 +32,6 @@ module ProjectFeaturesCompatibility
     build_project_feature unless project_feature
 
     access_level = Gitlab::Utils.to_boolean(value) ? ProjectFeature::ENABLED : ProjectFeature::DISABLED
-    project_feature.update_attribute(field, access_level)
+    project_feature.send(:write_attribute, field, access_level)
   end
 end
diff --git a/app/models/concerns/reactive_caching.rb b/app/models/concerns/reactive_caching.rb
new file mode 100644
index 00000000000..2589215ad19
--- /dev/null
+++ b/app/models/concerns/reactive_caching.rb
@@ -0,0 +1,118 @@
+# The ReactiveCaching concern is used to fetch some data in the background and
+# store it in the Rails cache, keeping it up-to-date for as long as it is being
+# requested.  If the data hasn't been requested for +reactive_cache_lifetime+,
+# it stop being refreshed, and then be removed.
+#
+# Example of use:
+#
+#    class Foo < ActiveRecord::Base
+#      include ReactiveCaching
+#
+#      self.reactive_cache_key = ->(thing) { ["foo", thing.id] }
+#
+#      after_save :clear_reactive_cache!
+#
+#      def calculate_reactive_cache
+#        # Expensive operation here. The return value of this method is cached
+#      end
+#
+#      def result
+#        with_reactive_cache do |data|
+#          # ...
+#        end
+#      end
+#    end
+#
+# In this example, the first time `#result` is called, it will return `nil`.
+# However, it will enqueue a background worker to call `#calculate_reactive_cache`
+# and set an initial cache lifetime of ten minutes.
+#
+# Each time the background job completes, it stores the return value of
+# `#calculate_reactive_cache`. It is also re-enqueued to run again after
+# `reactive_cache_refresh_interval`, so keeping the stored value up to date.
+# Calculations are never run concurrently.
+#
+# Calling `#result` while a value is in the cache will call the block given to
+# `#with_reactive_cache`, yielding the cached value. It will also extend the
+# lifetime by `reactive_cache_lifetime`.
+#
+# Once the lifetime has expired, no more background jobs will be enqueued and
+# calling `#result` will again return `nil` - starting the process all over
+# again
+module ReactiveCaching
+  extend ActiveSupport::Concern
+
+  included do
+    class_attribute :reactive_cache_lease_timeout
+
+    class_attribute :reactive_cache_key
+    class_attribute :reactive_cache_lifetime
+    class_attribute :reactive_cache_refresh_interval
+
+    # defaults
+    self.reactive_cache_lease_timeout = 2.minutes
+
+    self.reactive_cache_refresh_interval = 1.minute
+    self.reactive_cache_lifetime = 10.minutes
+
+    def calculate_reactive_cache(*args)
+      raise NotImplementedError
+    end
+
+    def with_reactive_cache(*args, &blk)
+      within_reactive_cache_lifetime(*args) do
+        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))
+    end
+
+    def exclusively_update_reactive_cache!(*args)
+      locking_reactive_cache(*args) do
+        within_reactive_cache_lifetime(*args) do
+          enqueuing_update(*args) do
+            value = calculate_reactive_cache(*args)
+            Rails.cache.write(full_reactive_cache_key(*args), value)
+          end
+        end
+      end
+    end
+
+    private
+
+    def full_reactive_cache_key(*qualifiers)
+      prefix = self.class.reactive_cache_key
+      prefix = prefix.call(self) if prefix.respond_to?(:call)
+
+      ([prefix].flatten + qualifiers).join(':')
+    end
+
+    def alive_reactive_cache_key(*qualifiers)
+      full_reactive_cache_key(*(qualifiers + ['alive']))
+    end
+
+    def locking_reactive_cache(*args)
+      lease = Gitlab::ExclusiveLease.new(full_reactive_cache_key(*args), timeout: reactive_cache_lease_timeout)
+      uuid = lease.try_obtain
+      yield if uuid
+    ensure
+      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))
+    end
+
+    def enqueuing_update(*args)
+      yield
+    ensure
+      ReactiveCachingWorker.perform_in(self.class.reactive_cache_refresh_interval, self.class, id, *args)
+    end
+  end
+end
diff --git a/app/models/concerns/reactive_service.rb b/app/models/concerns/reactive_service.rb
new file mode 100644
index 00000000000..e1f868a299b
--- /dev/null
+++ b/app/models/concerns/reactive_service.rb
@@ -0,0 +1,10 @@
+module ReactiveService
+  extend ActiveSupport::Concern
+
+  included do
+    include ReactiveCaching
+
+    # Default cache key: class name + project_id
+    self.reactive_cache_key = ->(service) { [ service.class.model_name.singular, service.project_id ] }
+  end
+end
diff --git a/app/models/concerns/referable.rb b/app/models/concerns/referable.rb
index 8ba009fe04f..da803c7f481 100644
--- a/app/models/concerns/referable.rb
+++ b/app/models/concerns/referable.rb
@@ -17,7 +17,7 @@ module Referable
   #   Issue.last.to_reference(other_project) # => "cross-project#1"
   #
   # Returns a String
-  def to_reference(_from_project = nil)
+  def to_reference(_from_project = nil, full:)
     ''
   end
 
diff --git a/app/models/concerns/time_trackable.rb b/app/models/concerns/time_trackable.rb
new file mode 100644
index 00000000000..040e3a2884e
--- /dev/null
+++ b/app/models/concerns/time_trackable.rb
@@ -0,0 +1,72 @@
+# == TimeTrackable concern
+#
+# Contains functionality related to objects that support time tracking.
+#
+# Used by Issue and MergeRequest.
+#
+
+module TimeTrackable
+  extend ActiveSupport::Concern
+
+  included do
+    attr_reader :time_spent, :time_spent_user
+
+    alias_method :time_spent?, :time_spent
+
+    default_value_for :time_estimate, value: 0, allows_nil: false
+
+    validates :time_estimate, numericality: { message: 'has an invalid format' }, allow_nil: false
+    validate  :check_negative_time_spent
+
+    has_many :timelogs, as: :trackable, dependent: :destroy
+  end
+
+  def spend_time(options)
+    @time_spent = options[:duration]
+    @time_spent_user = options[:user]
+    @original_total_time_spent = nil
+
+    return if @time_spent == 0
+
+    if @time_spent == :reset
+      reset_spent_time
+    else
+      add_or_subtract_spent_time
+    end
+  end
+  alias_method :spend_time=, :spend_time
+
+  def total_time_spent
+    timelogs.sum(:time_spent)
+  end
+
+  def human_total_time_spent
+    Gitlab::TimeTrackingFormatter.output(total_time_spent)
+  end
+
+  def human_time_estimate
+    Gitlab::TimeTrackingFormatter.output(time_estimate)
+  end
+
+  private
+
+  def reset_spent_time
+    timelogs.new(time_spent: total_time_spent * -1, user: @time_spent_user)
+  end
+
+  def add_or_subtract_spent_time
+    timelogs.new(time_spent: time_spent, user: @time_spent_user)
+  end
+
+  def check_negative_time_spent
+    return if time_spent.nil? || time_spent == :reset
+
+    # we need to cache the total time spent so multiple calls to #valid?
+    # doesn't give a false error
+    @original_total_time_spent ||= total_time_spent
+
+    if time_spent < 0 && (time_spent.abs > @original_total_time_spent)
+      errors.add(:time_spent, 'Time to subtract exceeds the total time spent')
+    end
+  end
+end
diff --git a/app/models/concerns/token_authenticatable.rb b/app/models/concerns/token_authenticatable.rb
index 04d30f46210..1ca7f91dc03 100644
--- a/app/models/concerns/token_authenticatable.rb
+++ b/app/models/concerns/token_authenticatable.rb
@@ -39,6 +39,10 @@ module TokenAuthenticatable
         current_token.blank? ? write_new_token(token_field) : current_token
       end
 
+      define_method("set_#{token_field}") do |token|
+        write_attribute(token_field, token) if token
+      end
+
       define_method("ensure_#{token_field}!") do
         send("reset_#{token_field}!") if read_attribute(token_field).blank?
         read_attribute(token_field)
diff --git a/app/models/concerns/valid_attribute.rb b/app/models/concerns/valid_attribute.rb
new file mode 100644
index 00000000000..8c35cea8d58
--- /dev/null
+++ b/app/models/concerns/valid_attribute.rb
@@ -0,0 +1,10 @@
+module ValidAttribute
+  extend ActiveSupport::Concern
+
+  # Checks whether an attribute has failed validation or not
+  #
+  # +attribute+ The symbolised name of the attribute i.e :name
+  def valid_attribute?(attribute)
+    self.errors.empty? || self.errors.messages[attribute].nil?
+  end
+end
diff --git a/app/models/cycle_analytics.rb b/app/models/cycle_analytics.rb
index ba4ee6fcf9d..d2e626c22e8 100644
--- a/app/models/cycle_analytics.rb
+++ b/app/models/cycle_analytics.rb
@@ -1,62 +1,38 @@
 class CycleAnalytics
   STAGES = %i[issue plan code test review staging production].freeze
 
-  def initialize(project, current_user, from:)
+  def initialize(project, options)
     @project = project
-    @current_user = current_user
-    @from = from
-    @fetcher = Gitlab::CycleAnalytics::MetricsFetcher.new(project: project, from: from, branch: nil)
+    @options = options
   end
 
   def summary
-    @summary ||= Summary.new(@project, @current_user, from: @from)
+    @summary ||= ::Gitlab::CycleAnalytics::StageSummary.new(@project,
+                                                            from: @options[:from],
+                                                            current_user: @options[:current_user]).data
   end
 
-  def permissions(user:)
-    Gitlab::CycleAnalytics::Permissions.get(user: user, project: @project)
+  def stats
+    @stats ||= stats_per_stage
   end
 
-  def issue
-    @fetcher.calculate_metric(:issue,
-                     Issue.arel_table[:created_at],
-                     [Issue::Metrics.arel_table[:first_associated_with_milestone_at],
-                      Issue::Metrics.arel_table[:first_added_to_board_at]])
+  def no_stats?
+    stats.all? { |hash| hash[:value].nil? }
   end
 
-  def plan
-    @fetcher.calculate_metric(:plan,
-                     [Issue::Metrics.arel_table[:first_associated_with_milestone_at],
-                      Issue::Metrics.arel_table[:first_added_to_board_at]],
-                     Issue::Metrics.arel_table[:first_mentioned_in_commit_at])
-  end
-
-  def code
-    @fetcher.calculate_metric(:code,
-                     Issue::Metrics.arel_table[:first_mentioned_in_commit_at],
-                     MergeRequest.arel_table[:created_at])
-  end
-
-  def test
-    @fetcher.calculate_metric(:test,
-                     MergeRequest::Metrics.arel_table[:latest_build_started_at],
-                     MergeRequest::Metrics.arel_table[:latest_build_finished_at])
+  def permissions(user:)
+    Gitlab::CycleAnalytics::Permissions.get(user: user, project: @project)
   end
 
-  def review
-    @fetcher.calculate_metric(:review,
-                     MergeRequest.arel_table[:created_at],
-                     MergeRequest::Metrics.arel_table[:merged_at])
+  def [](stage_name)
+    Gitlab::CycleAnalytics::Stage[stage_name].new(project: @project, options: @options)
   end
 
-  def staging
-    @fetcher.calculate_metric(:staging,
-                     MergeRequest::Metrics.arel_table[:merged_at],
-                     MergeRequest::Metrics.arel_table[:first_deployed_to_production_at])
-  end
+  private
 
-  def production
-    @fetcher.calculate_metric(:production,
-                     Issue.arel_table[:created_at],
-                     MergeRequest::Metrics.arel_table[:first_deployed_to_production_at])
+  def stats_per_stage
+    STAGES.map do |stage_name|
+      self[stage_name].as_json
+    end
   end
 end
diff --git a/app/models/cycle_analytics/summary.rb b/app/models/cycle_analytics/summary.rb
index 82f53d17ddd..e69de29bb2d 100644
--- a/app/models/cycle_analytics/summary.rb
+++ b/app/models/cycle_analytics/summary.rb
@@ -1,43 +0,0 @@
-class CycleAnalytics
-  class Summary
-    def initialize(project, current_user, from:)
-      @project = project
-      @current_user = current_user
-      @from = from
-    end
-
-    def new_issues
-      IssuesFinder.new(@current_user, project_id: @project.id).execute.created_after(@from).count
-    end
-
-    def commits
-      ref = @project.default_branch.presence
-      count_commits_for(ref)
-    end
-
-    def deploys
-      @project.deployments.where("created_at > ?", @from).count
-    end
-
-    private
-
-    # Don't use the `Gitlab::Git::Repository#log` method, because it enforces
-    # a limit. Since we need a commit count, we _can't_ enforce a limit, so
-    # the easiest way forward is to replicate the relevant portions of the
-    # `log` function here.
-    def count_commits_for(ref)
-      return unless ref
-
-      repository = @project.repository.raw_repository
-      sha = @project.repository.commit(ref).sha
-
-      cmd = %W(git --git-dir=#{repository.path} log)
-      cmd << '--format=%H'
-      cmd << "--after=#{@from.iso8601}"
-      cmd << sha
-
-      raw_output = IO.popen(cmd) { |io| io.read }
-      raw_output.lines.count
-    end
-  end
-end
diff --git a/app/models/deploy_key.rb b/app/models/deploy_key.rb
index 2c525d4cd7a..053f2a11aa0 100644
--- a/app/models/deploy_key.rb
+++ b/app/models/deploy_key.rb
@@ -20,4 +20,18 @@ class DeployKey < Key
   def destroyed_when_orphaned?
     self.private?
   end
+
+  def has_access_to?(project)
+    projects.include?(project)
+  end
+
+  def can_push_to?(project)
+    can_push? && has_access_to?(project)
+  end
+
+  private
+
+  # we don't want to notify the user for deploy keys
+  def notify_user
+  end
 end
diff --git a/app/models/environment.rb b/app/models/environment.rb
index 96700143ddd..652abf18a8a 100644
--- a/app/models/environment.rb
+++ b/app/models/environment.rb
@@ -1,9 +1,15 @@
 class Environment < ActiveRecord::Base
+  # Used to generate random suffixes for the slug
+  NUMBERS = '0'..'9'
+  SUFFIX_CHARS = ('a'..'z').to_a + NUMBERS.to_a
+
   belongs_to :project, required: true, validate: true
 
   has_many :deployments
 
   before_validation :nullify_external_url
+  before_validation :generate_slug, if: ->(env) { env.slug.blank? }
+
   before_save :set_environment_type
 
   validates :name,
@@ -13,6 +19,13 @@ class Environment < ActiveRecord::Base
             format: { with: Gitlab::Regex.environment_name_regex,
                       message: Gitlab::Regex.environment_name_regex_message }
 
+  validates :slug,
+            presence: true,
+            uniqueness: { scope: :project_id },
+            length: { maximum: 24 },
+            format: { with: Gitlab::Regex.environment_slug_regex,
+                      message: Gitlab::Regex.environment_slug_regex_message }
+
   validates :external_url,
             uniqueness: { scope: :project_id },
             length: { maximum: 255 },
@@ -37,6 +50,13 @@ class Environment < ActiveRecord::Base
     state :stopped
   end
 
+  def predefined_variables
+    [
+      { key: 'CI_ENVIRONMENT_NAME', value: name, public: true },
+      { key: 'CI_ENVIRONMENT_SLUG', value: slug, public: true },
+    ]
+  end
+
   def recently_updated_on_branch?(ref)
     ref.to_s == last_deployment.try(:ref)
   end
@@ -67,7 +87,7 @@ class Environment < ActiveRecord::Base
   end
 
   def update_merge_request_metrics?
-    self.name == "production"
+    (environment_type || name) == "production"
   end
 
   def first_deployment_for(commit)
@@ -107,4 +127,49 @@ class Environment < ActiveRecord::Base
       action.expanded_environment_name == environment
     end
   end
+
+  def has_terminals?
+    project.deployment_service.present? && available? && last_deployment.present?
+  end
+
+  def terminals
+    project.deployment_service.terminals(self) if has_terminals?
+  end
+
+  # An environment name is not necessarily suitable for use in URLs, DNS
+  # or other third-party contexts, so provide a slugified version. A slug has
+  # the following properties:
+  #   * contains only lowercase letters (a-z), numbers (0-9), and '-'
+  #   * begins with a letter
+  #   * has a maximum length of 24 bytes (OpenShift limitation)
+  #   * cannot end with `-`
+  def generate_slug
+    # Lowercase letters and numbers only
+    slugified = name.to_s.downcase.gsub(/[^a-z0-9]/, '-')
+
+    # Must start with a letter
+    slugified = "env-" + slugified if NUMBERS.cover?(slugified[0])
+
+    # Maximum length: 24 characters (OpenShift limitation)
+    slugified = slugified[0..23]
+
+    # Cannot end with a "-" character (Kubernetes label limitation)
+    slugified = slugified[0..-2] if slugified[-1] == "-"
+
+    # Add a random suffix, shortening the current string if necessary, if it
+    # has been slugified. This ensures uniqueness.
+    slugified = slugified[0..16] + "-" + random_suffix if slugified != name
+
+    self.slug = slugified
+  end
+
+  private
+
+  # Slugifying a name may remove the uniqueness guarantee afforded by it being
+  # based on name (which must be unique). To compensate, we add a random
+  # 6-byte suffix in those circumstances. This is not *guaranteed* uniqueness,
+  # but the chance of collisions is vanishingly small
+  def random_suffix
+    (0..5).map { SUFFIX_CHARS.sample }.join
+  end
 end
diff --git a/app/models/external_issue.rb b/app/models/external_issue.rb
index 91b508eb325..26712c19b5a 100644
--- a/app/models/external_issue.rb
+++ b/app/models/external_issue.rb
@@ -38,7 +38,7 @@ class ExternalIssue
     @reference_pattern ||= %r{(?<issue>\b([A-Z][A-Z0-9_]+-)\d+)}
   end
 
-  def to_reference(_from_project = nil)
+  def to_reference(_from_project = nil, full: nil)
     id
   end
 
diff --git a/app/models/forked_project_link.rb b/app/models/forked_project_link.rb
index 9803bae0bee..36cf7ad6a28 100644
--- a/app/models/forked_project_link.rb
+++ b/app/models/forked_project_link.rb
@@ -1,4 +1,4 @@
 class ForkedProjectLink < ActiveRecord::Base
-  belongs_to :forked_to_project, class_name: Project
-  belongs_to :forked_from_project, class_name: Project
+  belongs_to :forked_to_project, class_name: 'Project'
+  belongs_to :forked_from_project, class_name: 'Project'
 end
diff --git a/app/models/global_milestone.rb b/app/models/global_milestone.rb
index b01607dcda9..b991d78e27f 100644
--- a/app/models/global_milestone.rb
+++ b/app/models/global_milestone.rb
@@ -1,6 +1,8 @@
 class GlobalMilestone
   include Milestoneish
 
+  EPOCH = DateTime.parse('1970-01-01')
+
   attr_accessor :title, :milestones
   alias_attribute :name, :title
 
@@ -8,13 +10,22 @@ class GlobalMilestone
     @first_milestone
   end
 
-  def self.build_collection(milestones)
-    milestones = milestones.group_by(&:title)
+  def self.build_collection(projects, params)
+    child_milestones = MilestonesFinder.new.execute(projects, params)
 
-    milestones.map do |title, milestones|
-      milestones_relation = Milestone.where(id: milestones.map(&:id))
+    milestones = child_milestones.select(:id, :title).group_by(&:title).map do |title, grouped|
+      milestones_relation = Milestone.where(id: grouped.map(&:id))
       new(title, milestones_relation)
     end
+
+    milestones.sort_by { |milestone| milestone.due_date || EPOCH }
+  end
+
+  def self.build(projects, title)
+    child_milestones = Milestone.of_projects(projects).where(title: title)
+    return if child_milestones.blank?
+
+    new(title, child_milestones)
   end
 
   def initialize(title, milestones)
@@ -24,12 +35,16 @@ class GlobalMilestone
     @first_milestone = milestones.find {|m| m.description.present? } || milestones.first
   end
 
+  def milestoneish_ids
+    milestones.select(:id)
+  end
+
   def safe_title
     @title.to_slug.normalize.to_s
   end
 
   def projects
-    @projects ||= Project.for_milestones(milestones.select(:id))
+    @projects ||= Project.for_milestones(milestoneish_ids)
   end
 
   def state
@@ -49,11 +64,11 @@ class GlobalMilestone
   end
 
   def issues
-    @issues ||= Issue.of_milestones(milestones.select(:id)).includes(:project, :assignee, :labels)
+    @issues ||= Issue.of_milestones(milestoneish_ids).includes(:project, :assignee, :labels)
   end
 
   def merge_requests
-    @merge_requests ||= MergeRequest.of_milestones(milestones.select(:id)).includes(:target_project, :assignee, :labels)
+    @merge_requests ||= MergeRequest.of_milestones(milestoneish_ids).includes(:target_project, :assignee, :labels)
   end
 
   def participants
diff --git a/app/models/group.rb b/app/models/group.rb
index 4248e1162d8..99675ddb366 100644
--- a/app/models/group.rb
+++ b/app/models/group.rb
@@ -48,7 +48,13 @@ class Group < Namespace
     end
 
     def sort(method)
-      order_by(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
+        reorder('storage_size DESC, namespaces.id DESC')
+      else
+        order_by(method)
+      end
     end
 
     def reference_prefix
@@ -74,7 +80,7 @@ class Group < Namespace
     end
   end
 
-  def to_reference(_from_project = nil)
+  def to_reference(_from_project = nil, full: nil)
     "#{self.class.reference_prefix}#{name}"
   end
 
@@ -83,7 +89,7 @@ class Group < Namespace
   end
 
   def human_name
-    name
+    full_name
   end
 
   def visibility_level_field
@@ -155,15 +161,17 @@ class Group < Namespace
   end
 
   def has_owner?(user)
-    owners.include?(user)
+    members_with_parents.owners.where(user_id: user).any?
   end
 
   def has_master?(user)
-    members.masters.where(user_id: user).any?
+    members_with_parents.masters.where(user_id: user).any?
   end
 
+  # Check if user is a last owner of the group.
+  # Parent owners are ignored for nested groups.
   def last_owner?(user)
-    has_owner?(user) && owners.size == 1
+    owners.include?(user) && owners.size == 1
   end
 
   def avatar_type
@@ -189,6 +197,14 @@ class Group < Namespace
   end
 
   def refresh_members_authorized_projects
-    UserProjectAccessChangedService.new(users.pluck(:id)).execute
+    UserProjectAccessChangedService.new(users_with_parents.pluck(:id)).execute
+  end
+
+  def members_with_parents
+    GroupMember.where(requested_at: nil, source_id: parents.map(&:id).push(id))
+  end
+
+  def users_with_parents
+    User.where(id: members_with_parents.select(:user_id))
   end
 end
diff --git a/app/models/group_label.rb b/app/models/group_label.rb
index 68841ace2e6..92c83b54861 100644
--- a/app/models/group_label.rb
+++ b/app/models/group_label.rb
@@ -8,8 +8,4 @@ class GroupLabel < Label
   def subject_foreign_key
     'group_id'
   end
-
-  def to_reference(source_project = nil, target_project = nil, format: :id)
-    super(source_project, target_project, format: format)
-  end
 end
diff --git a/app/models/group_milestone.rb b/app/models/group_milestone.rb
new file mode 100644
index 00000000000..7b6db2634b7
--- /dev/null
+++ b/app/models/group_milestone.rb
@@ -0,0 +1,19 @@
+class GroupMilestone < GlobalMilestone
+  attr_accessor :group
+
+  def self.build_collection(group, projects, params)
+    super(projects, params).each do |milestone|
+      milestone.group = group
+    end
+  end
+
+  def self.build(group, projects, title)
+    super(projects, title).tap do |milestone|
+      milestone.group = group if milestone
+    end
+  end
+
+  def issues_finder_params
+    { group_id: group.id }
+  end
+end
diff --git a/app/models/issue.rb b/app/models/issue.rb
index 7fe92051037..65638d9a299 100644
--- a/app/models/issue.rb
+++ b/app/models/issue.rb
@@ -39,6 +39,8 @@ class Issue < ActiveRecord::Base
 
   scope :created_after, -> (datetime) { where("created_at >= ?", datetime) }
 
+  scope :include_associations, -> { includes(:assignee, :labels, project: :namespace) }
+
   attr_spammable :title, spam_title: true
   attr_spammable :description, spam_description: true
 
@@ -60,61 +62,6 @@ class Issue < ActiveRecord::Base
     attributes
   end
 
-  class << self
-    private
-
-    # Returns the project that the current scope belongs to if any, nil otherwise.
-    #
-    # Examples:
-    # - my_project.issues.without_due_date.owner_project => my_project
-    # - Issue.all.owner_project => nil
-    def owner_project
-      # No owner if we're not being called from an association
-      return unless all.respond_to?(:proxy_association)
-
-      owner = all.proxy_association.owner
-
-      # Check if the association is or belongs to a project
-      if owner.is_a?(Project)
-        owner
-      else
-        begin
-          owner.association(:project).target
-        rescue ActiveRecord::AssociationNotFoundError
-          nil
-        end
-      end
-    end
-  end
-
-  def self.visible_to_user(user)
-    return where('issues.confidential IS NULL OR issues.confidential IS FALSE') if user.blank?
-    return all if user.admin?
-
-    # Check if we are scoped to a specific project's issues
-    if owner_project
-      if owner_project.team.member?(user, Gitlab::Access::REPORTER)
-        # If the project is authorized for the user, they can see all issues in the project
-        return all
-      else
-        # else only non confidential and authored/assigned to them
-        return where('issues.confidential IS NULL OR issues.confidential IS FALSE
-          OR issues.author_id = :user_id OR issues.assignee_id = :user_id',
-          user_id: user.id)
-      end
-    end
-
-    where('
-      issues.confidential IS NULL
-      OR issues.confidential IS FALSE
-      OR (issues.confidential = TRUE
-        AND (issues.author_id = :user_id
-          OR issues.assignee_id = :user_id
-          OR issues.project_id IN(:project_ids)))',
-      user_id: user.id,
-      project_ids: user.authorized_projects(Gitlab::Access::REPORTER).select(:id))
-  end
-
   def self.reference_prefix
     '#'
   end
@@ -150,10 +97,10 @@ class Issue < ActiveRecord::Base
     end
   end
 
-  def to_reference(from_project = nil)
+  def to_reference(from_project = nil, full: false)
     reference = "#{self.class.reference_prefix}#{iid}"
 
-    "#{project.to_reference(from_project)}#{reference}"
+    "#{project.to_reference(from_project, full: full)}#{reference}"
   end
 
   def referenced_merge_requests(current_user = nil)
diff --git a/app/models/key.rb b/app/models/key.rb
index a5d25409730..8be29c697f1 100644
--- a/app/models/key.rb
+++ b/app/models/key.rb
@@ -49,6 +49,10 @@ class Key < ActiveRecord::Base
     "key-#{id}"
   end
 
+  def update_last_used_at
+    UseKeyWorker.perform_async(self.id)
+  end
+
   def add_to_shell
     GitlabShellWorker.perform_async(
       :add_key,
@@ -57,10 +61,6 @@ class Key < ActiveRecord::Base
     )
   end
 
-  def notify_user
-    run_after_commit { NotificationService.new.new_key(self) }
-  end
-
   def post_create_hook
     SystemHooksService.new.execute_hooks_for(self, :create)
   end
@@ -86,4 +86,8 @@ class Key < ActiveRecord::Base
 
     self.fingerprint = Gitlab::KeyFingerprint.new(self.key).fingerprint
   end
+
+  def notify_user
+    run_after_commit { NotificationService.new.new_key(self) }
+  end
 end
diff --git a/app/models/label.rb b/app/models/label.rb
index d38c37344c9..5b6b9a7a736 100644
--- a/app/models/label.rb
+++ b/app/models/label.rb
@@ -26,6 +26,7 @@ class Label < ActiveRecord::Base
   # Don't allow ',' for label titles
   validates :title, presence: true, format: { with: /\A[^,]+\z/ }
   validates :title, uniqueness: { scope: [:group_id, :project_id] }
+  validates :title, length: { maximum: 255 }
 
   default_scope { order(title: :asc) }
 
@@ -146,17 +147,17 @@ class Label < ActiveRecord::Base
   #
   #   Label.first.to_reference                                     # => "~1"
   #   Label.first.to_reference(format: :name)                      # => "~\"bug\""
-  #   Label.first.to_reference(project, same_namespace_project)    # => "gitlab-ce~1"
-  #   Label.first.to_reference(project, another_namespace_project) # => "gitlab-org/gitlab-ce~1"
+  #   Label.first.to_reference(project, target_project: same_namespace_project)    # => "gitlab-ce~1"
+  #   Label.first.to_reference(project, target_project: another_namespace_project) # => "gitlab-org/gitlab-ce~1"
   #
   # Returns a String
   #
-  def to_reference(source_project = nil, target_project = nil, format: :id)
+  def to_reference(from_project = nil, target_project: nil, format: :id, full: false)
     format_reference = label_format_reference(format)
     reference = "#{self.class.reference_prefix}#{format_reference}"
 
-    if source_project
-      "#{source_project.to_reference(target_project)}#{reference}"
+    if from_project
+      "#{from_project.to_reference(target_project, full: full)}#{reference}"
     else
       reference
     end
diff --git a/app/models/lfs_objects_project.rb b/app/models/lfs_objects_project.rb
index 0fd5f089db9..007eed5600a 100644
--- a/app/models/lfs_objects_project.rb
+++ b/app/models/lfs_objects_project.rb
@@ -5,4 +5,13 @@ class LfsObjectsProject < ActiveRecord::Base
   validates :lfs_object_id, presence: true
   validates :lfs_object_id, uniqueness: { scope: [:project_id], message: "already exists in project" }
   validates :project_id, presence: true
+
+  after_create :update_project_statistics
+  after_destroy :update_project_statistics
+
+  private
+
+  def update_project_statistics
+    ProjectCacheWorker.perform_async(project_id, [], [:lfs_objects_size])
+  end
 end
diff --git a/app/models/member.rb b/app/models/member.rb
index 3b65587c66b..c585e0b450e 100644
--- a/app/models/member.rb
+++ b/app/models/member.rb
@@ -57,6 +57,11 @@ class Member < ActiveRecord::Base
   scope :owners,  -> { active.where(access_level: OWNER) }
   scope :owners_and_masters,  -> { active.where(access_level: [OWNER, MASTER]) }
 
+  scope :order_name_asc, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.name', 'ASC')) }
+  scope :order_name_desc, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.name', 'DESC')) }
+  scope :order_recent_sign_in, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.last_sign_in_at', 'DESC')) }
+  scope :order_oldest_sign_in, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.last_sign_in_at', 'ASC')) }
+
   before_validation :generate_invite_token, on: :create, if: -> (member) { member.invite_email.present? }
 
   after_create :send_invite, if: :invite?, unless: :importing?
@@ -72,6 +77,34 @@ class Member < ActiveRecord::Base
   default_value_for :notification_level, NotificationSetting.levels[:global]
 
   class << self
+    def search(query)
+      joins(:user).merge(User.search(query))
+    end
+
+    def sort(method)
+      case method.to_s
+      when 'access_level_asc' then reorder(access_level: :asc)
+      when 'access_level_desc' then reorder(access_level: :desc)
+      when 'recent_sign_in' then order_recent_sign_in
+      when 'oldest_sign_in' then order_oldest_sign_in
+      when 'last_joined' then order_created_desc
+      when 'oldest_joined' then order_created_asc
+      else
+        order_by(method)
+      end
+    end
+
+    def left_join_users
+      users = User.arel_table
+      members = Member.arel_table
+
+      member_users = members.join(users, Arel::Nodes::OuterJoin).
+                             on(members[:user_id].eq(users[:id])).
+                             join_sources
+
+      joins(member_users)
+    end
+
     def access_for_user_ids(user_ids)
       where(user_id: user_ids).has_access.pluck(:user_id, :access_level).to_h
     end
@@ -89,8 +122,8 @@ class Member < ActiveRecord::Base
       member =
         if user.is_a?(User)
           source.members.find_by(user_id: user.id) ||
-          source.requesters.find_by(user_id: user.id) ||
-          source.members.build(user_id: user.id)
+            source.requesters.find_by(user_id: user.id) ||
+            source.members.build(user_id: user.id)
         else
           source.members.build(invite_email: user)
         end
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index ea3cf1cdaac..10251302db8 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -97,7 +97,7 @@ class MergeRequest < ActiveRecord::Base
   validates :source_branch, presence: true
   validates :target_project, presence: true
   validates :target_branch, presence: true
-  validates :merge_user, presence: true, if: :merge_when_build_succeeds?
+  validates :merge_user, presence: true, if: :merge_when_build_succeeds?, unless: :importing?
   validate :validate_branches, unless: [:allow_broken, :importing?, :closed_without_fork?]
   validate :validate_fork, unless: :closed_without_fork?
 
@@ -175,10 +175,10 @@ class MergeRequest < ActiveRecord::Base
     work_in_progress?(title) ? title : "WIP: #{title}"
   end
 
-  def to_reference(from_project = nil)
+  def to_reference(from_project = nil, full: false)
     reference = "#{self.class.reference_prefix}#{iid}"
 
-    "#{project.to_reference(from_project)}#{reference}"
+    "#{project.to_reference(from_project, full: full)}#{reference}"
   end
 
   def first_commit
@@ -198,7 +198,9 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def diff_size
-    diffs(diff_options).size
+    opts = diff_options || {}
+
+    raw_diffs(opts).size
   end
 
   def diff_base_commit
@@ -219,7 +221,7 @@ class MergeRequest < ActiveRecord::Base
   # true base commit, so we can't simply have `#diff_base_commit` fall back on
   # this method.
   def likely_diff_base_commit
-    first_commit.parent || first_commit
+    first_commit.try(:parent) || first_commit
   end
 
   def diff_start_commit
@@ -452,7 +454,7 @@ class MergeRequest < ActiveRecord::Base
     should_remove_source_branch? || force_remove_source_branch?
   end
 
-  def mr_and_commit_notes
+  def related_notes
     # Fetch comments only from last 100 commits
     commits_for_notes_limit = 100
     commit_ids = commits.last(commits_for_notes_limit).map(&:id)
@@ -468,7 +470,7 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def discussions
-    @discussions ||= self.mr_and_commit_notes.
+    @discussions ||= self.related_notes.
       inc_relations_for_view.
       fresh.
       discussions
@@ -568,6 +570,15 @@ class MergeRequest < ActiveRecord::Base
     end
   end
 
+  def issues_mentioned_but_not_closing(current_user = self.author)
+    return [] unless target_branch == project.default_branch
+
+    ext = Gitlab::ReferenceExtractor.new(project, current_user)
+    ext.analyze(description)
+
+    ext.issues - closes_issues
+  end
+
   def target_project_path
     if target_project
       target_project.path_with_namespace
@@ -612,13 +623,24 @@ class MergeRequest < ActiveRecord::Base
     self.target_project.repository.branch_names.include?(self.target_branch)
   end
 
-  def merge_commit_message
-    message = "Merge branch '#{source_branch}' into '#{target_branch}'\n\n"
-    message << "#{title}\n\n"
-    message << "#{description}\n\n" if description.present?
+  def merge_commit_message(include_description: false)
+    closes_issues_references = closes_issues.map do |issue|
+      issue.to_reference(target_project)
+    end
+
+    message = [
+      "Merge branch '#{source_branch}' into '#{target_branch}'",
+      title
+    ]
+
+    if !include_description && closes_issues_references.present?
+      message << "Closes #{closes_issues_references.to_sentence}"
+    end
+
+    message << "#{description}" if include_description && description.present?
     message << "See merge request #{to_reference}"
 
-    message
+    message.join("\n\n")
   end
 
   def reset_merge_when_build_succeeds
@@ -876,10 +898,22 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def has_commits?
-    commits_count > 0
+    merge_request_diff && commits_count > 0
   end
 
   def has_no_commits?
     !has_commits?
   end
+
+  def mergeable_with_slash_command?(current_user, autocomplete_precheck: false, last_diff_sha: nil)
+    return false unless can_be_merged_by?(current_user)
+
+    return true if autocomplete_precheck
+
+    return false unless mergeable?(skip_ci_check: true)
+    return false if head_pipeline && !(head_pipeline.success? || head_pipeline.active?)
+    return false if last_diff_sha != diff_head_sha
+
+    true
+  end
 end
diff --git a/app/models/merge_request_diff.rb b/app/models/merge_request_diff.rb
index b8f36a2c958..dadb81f9b6e 100644
--- a/app/models/merge_request_diff.rb
+++ b/app/models/merge_request_diff.rb
@@ -1,7 +1,7 @@
 class MergeRequestDiff < ActiveRecord::Base
   include Sortable
   include Importable
-  include EncodingHelper
+  include Gitlab::Git::EncodingHelper
 
   # Prevent store of diff if commits amount more then 500
   COMMITS_SAFE_SIZE = 100
@@ -234,28 +234,28 @@ class MergeRequestDiff < ActiveRecord::Base
   # and save it as array of hashes in st_diffs db field
   def save_diffs
     new_attributes = {}
-    new_diffs = []
 
     if commits.size.zero?
       new_attributes[:state] = :empty
     else
       diff_collection = compare.diffs(Commit.max_diff_options)
-
-      if diff_collection.overflow?
-        # Set our state to 'overflow' to make the #empty? and #collected?
-        # methods (generated by StateMachine) return false.
-        new_attributes[:state] = :overflow
-      end
-
-      new_attributes[:real_size] = diff_collection.real_size
+      new_attributes[:real_size] = compare.diffs.real_size
 
       if diff_collection.any?
         new_diffs = dump_diffs(diff_collection)
         new_attributes[:state] = :collected
       end
+
+      new_attributes[:st_diffs] = new_diffs || []
+
+      # Set our state to 'overflow' to make the #empty? and #collected?
+      # methods (generated by StateMachine) return false.
+      #
+      # This attribution has to come at the end of the method so 'overflow'
+      # state does not get overridden by 'collected'.
+      new_attributes[:state] = :overflow if diff_collection.overflow?
     end
 
-    new_attributes[:st_diffs] = new_diffs
     update_columns_serialized(new_attributes)
   end
 
diff --git a/app/models/milestone.rb b/app/models/milestone.rb
index 45ca97adad1..7331000a9f2 100644
--- a/app/models/milestone.rb
+++ b/app/models/milestone.rb
@@ -118,17 +118,21 @@ class Milestone < ActiveRecord::Base
   #   Milestone.first.to_reference(cross_namespace_project)  # => "gitlab-org/gitlab-ce%1"
   #   Milestone.first.to_reference(same_namespace_project)   # => "gitlab-ce%1"
   #
-  def to_reference(from_project = nil, format: :iid)
+  def to_reference(from_project = nil, format: :iid, full: false)
     format_reference = milestone_format_reference(format)
     reference = "#{self.class.reference_prefix}#{format_reference}"
 
-    "#{project.to_reference(from_project)}#{reference}"
+    "#{project.to_reference(from_project, full: full)}#{reference}"
   end
 
   def reference_link_text(from_project = nil)
     self.title
   end
 
+  def milestoneish_ids
+    id
+  end
+
   def can_be_closed?
     active? && issues.opened.count.zero?
   end
@@ -198,4 +202,8 @@ class Milestone < ActiveRecord::Base
       errors.add(:start_date, "Can't be greater than due date")
     end
   end
+
+  def issues_finder_params
+    { project_id: project_id }
+  end
 end
diff --git a/app/models/namespace.rb b/app/models/namespace.rb
index 37374044551..d41833de66f 100644
--- a/app/models/namespace.rb
+++ b/app/models/namespace.rb
@@ -9,6 +9,7 @@ class Namespace < ActiveRecord::Base
   cache_markdown_field :description, pipeline: :description
 
   has_many :projects, dependent: :destroy
+  has_many :project_statistics
   belongs_to :owner, class_name: "User"
 
   belongs_to :parent, class_name: "Namespace"
@@ -17,14 +18,13 @@ class Namespace < ActiveRecord::Base
   validates :owner, presence: true, unless: ->(n) { n.type == "Group" }
   validates :name,
     presence: true,
-    uniqueness: true,
+    uniqueness: { scope: :parent_id },
     length: { maximum: 255 },
     namespace_name: true
 
   validates :description, length: { maximum: 255 }
   validates :path,
     presence: true,
-    uniqueness: { case_sensitive: false },
     length: { maximum: 255 },
     namespace: true
 
@@ -39,6 +39,18 @@ class Namespace < ActiveRecord::Base
 
   scope :root, -> { where('type IS NULL') }
 
+  scope :with_statistics, -> do
+    joins('LEFT JOIN project_statistics ps ON ps.namespace_id = namespaces.id')
+      .group('namespaces.id')
+      .select(
+        'namespaces.*',
+        'COALESCE(SUM(ps.storage_size), 0) AS storage_size',
+        'COALESCE(SUM(ps.repository_size), 0) AS repository_size',
+        'COALESCE(SUM(ps.lfs_objects_size), 0) AS lfs_objects_size',
+        'COALESCE(SUM(ps.build_artifacts_size), 0) AS build_artifacts_size',
+      )
+  end
+
   class << self
     def by_path(path)
       find_by('lower(path) = :value', value: path.downcase)
@@ -99,7 +111,7 @@ class Namespace < ActiveRecord::Base
 
   def move_dir
     if any_project_has_container_registry_tags?
-      raise Exception.new('Namespace cannot be moved, because at least one project has tags in container registry')
+      raise Gitlab::UpdatePathError.new('Namespace cannot be moved, because at least one project has tags in container registry')
     end
 
     # Move the namespace directory in all storages paths used by member projects
@@ -112,7 +124,7 @@ class Namespace < ActiveRecord::Base
 
         # if we cannot move namespace directory we should rollback
         # db changes in order to prevent out of sync between db and fs
-        raise Exception.new('namespace directory cannot be moved')
+        raise Gitlab::UpdatePathError.new('namespace directory cannot be moved')
       end
     end
 
@@ -162,6 +174,19 @@ class Namespace < ActiveRecord::Base
     end
   end
 
+  def full_name
+    @full_name ||=
+      if parent
+        parent.full_name + ' / ' + name
+      else
+        name
+      end
+  end
+
+  def parents
+    @parents ||= parent ? parent.parents + [parent] : []
+  end
+
   private
 
   def repository_storage_paths
diff --git a/app/models/network/graph.rb b/app/models/network/graph.rb
index 345041a6ad1..b524ca50ee8 100644
--- a/app/models/network/graph.rb
+++ b/app/models/network/graph.rb
@@ -161,8 +161,8 @@ module Network
     def is_overlap?(range, overlap_space)
       range.each do |i|
         if i != range.first &&
-          i != range.last &&
-          @commits[i].spaces.include?(overlap_space)
+            i != range.last &&
+            @commits[i].spaces.include?(overlap_space)
 
           return true
         end
diff --git a/app/models/note.rb b/app/models/note.rb
index 08bd08743ef..0c1b05dabf2 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -107,23 +107,6 @@ class Note < ActiveRecord::Base
       Discussion.for_diff_notes(active_notes).
         map { |d| [d.line_code, d] }.to_h
     end
-
-    # Searches for notes matching the given query.
-    #
-    # This method uses ILIKE on PostgreSQL and LIKE on MySQL.
-    #
-    # query   - The search query as a String.
-    # as_user - Limit results to those viewable by a specific user
-    #
-    # Returns an ActiveRecord::Relation.
-    def search(query, as_user: nil)
-      table   = arel_table
-      pattern = "%#{query}%"
-
-      Note.joins('LEFT JOIN issues ON issues.id = noteable_id').
-        where(table[:note].matches(pattern)).
-        merge(Issue.visible_to_user(as_user))
-    end
   end
 
   def cross_reference?
diff --git a/app/models/notification_setting.rb b/app/models/notification_setting.rb
index 43fc218de2b..58f6214bea7 100644
--- a/app/models/notification_setting.rb
+++ b/app/models/notification_setting.rb
@@ -37,6 +37,10 @@ class NotificationSetting < ActiveRecord::Base
     :success_pipeline
   ]
 
+  EXCLUDED_WATCHER_EVENTS = [
+    :success_pipeline
+  ]
+
   store :events, accessors: EMAIL_EVENTS, coder: JSON
 
   before_create :set_events
diff --git a/app/models/personal_access_token.rb b/app/models/personal_access_token.rb
index c4b095e0c04..10a34c42fd8 100644
--- a/app/models/personal_access_token.rb
+++ b/app/models/personal_access_token.rb
@@ -2,6 +2,8 @@ class PersonalAccessToken < ActiveRecord::Base
   include TokenAuthenticatable
   add_authentication_token_field :token
 
+  serialize :scopes, Array
+
   belongs_to :user
 
   scope :active, -> { where(revoked: false).where("expires_at >= NOW() OR expires_at IS NULL") }
diff --git a/app/models/project.rb b/app/models/project.rb
index 77d740081c6..1630975b0d3 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -12,6 +12,7 @@ class Project < ActiveRecord::Base
   include AfterCommitQueue
   include CaseSensitivity
   include TokenAuthenticatable
+  include ValidAttribute
   include ProjectFeaturesCompatibility
   include SelectForProjectAuthorization
   include Routable
@@ -44,6 +45,7 @@ class Project < ActiveRecord::Base
   after_create :ensure_dir_exist
   after_create :create_project_feature, unless: :project_feature
   after_save :ensure_dir_exist, if: :namespace_id_changed?
+  after_save :update_project_statistics, if: :namespace_id_changed?
 
   # set last_activity_at to the same as created_at
   after_create :set_last_activity_at
@@ -64,6 +66,8 @@ class Project < ActiveRecord::Base
     end
   end
 
+  after_validation :check_pending_delete
+
   ActsAsTaggableOn.strict_case_match = true
   acts_as_taggable_on :tags
 
@@ -79,7 +83,6 @@ class Project < ActiveRecord::Base
 
   has_one :last_event, -> {order 'events.created_at DESC'}, class_name: 'Event'
   has_many :boards, before_add: :validate_board_limit, dependent: :destroy
-  has_many :chat_services
 
   # Project services
   has_one :campfire_service, dependent: :destroy
@@ -95,6 +98,8 @@ class Project < ActiveRecord::Base
   has_one :asana_service, dependent: :destroy
   has_one :gemnasium_service, dependent: :destroy
   has_one :mattermost_slash_commands_service, dependent: :destroy
+  has_one :mattermost_service, dependent: :destroy
+  has_one :slack_slash_commands_service, dependent: :destroy
   has_one :slack_service, dependent: :destroy
   has_one :buildkite_service, dependent: :destroy
   has_one :bamboo_service, dependent: :destroy
@@ -106,6 +111,7 @@ class Project < ActiveRecord::Base
   has_one :bugzilla_service, dependent: :destroy
   has_one :gitlab_issue_tracker_service, dependent: :destroy, inverse_of: :project
   has_one :external_wiki_service, dependent: :destroy
+  has_one :kubernetes_service, dependent: :destroy, inverse_of: :project
 
   has_one  :forked_project_link,  dependent: :destroy, foreign_key: "forked_to_project_id"
   has_one  :forked_from_project,  through:   :forked_project_link
@@ -116,7 +122,7 @@ class Project < ActiveRecord::Base
   # Merge Requests for target project should be removed with it
   has_many :merge_requests,     dependent: :destroy, foreign_key: 'target_project_id'
   # Merge requests from source project should be kept when source project was removed
-  has_many :fork_merge_requests, foreign_key: 'source_project_id', class_name: MergeRequest
+  has_many :fork_merge_requests, foreign_key: 'source_project_id', class_name: 'MergeRequest'
   has_many :issues,             dependent: :destroy
   has_many :labels,             dependent: :destroy, class_name: 'ProjectLabel'
   has_many :services,           dependent: :destroy
@@ -127,7 +133,7 @@ class Project < ActiveRecord::Base
   has_many :hooks,              dependent: :destroy, class_name: 'ProjectHook'
   has_many :protected_branches, dependent: :destroy
 
-  has_many :project_authorizations, dependent: :destroy
+  has_many :project_authorizations
   has_many :authorized_users, through: :project_authorizations, source: :user, class_name: 'User'
   has_many :project_members, -> { where(requested_at: nil) }, dependent: :destroy, as: :source
   alias_method :members, :project_members
@@ -149,6 +155,7 @@ class Project < ActiveRecord::Base
 
   has_one :import_data, dependent: :destroy, class_name: "ProjectImportData"
   has_one :project_feature, dependent: :destroy
+  has_one :statistics, class_name: 'ProjectStatistics', dependent: :delete
 
   has_many :commit_statuses, dependent: :destroy, foreign_key: :gl_project_id
   has_many :pipelines, dependent: :destroy, class_name: 'Ci::Pipeline', foreign_key: :gl_project_id
@@ -218,6 +225,7 @@ class Project < ActiveRecord::Base
   scope :with_push, -> { joins(:events).where('events.action = ?', Event::PUSHED) }
 
   scope :with_project_feature, -> { joins('LEFT JOIN project_features ON projects.id = project_features.project_id') }
+  scope :with_statistics, -> { includes(:statistics) }
 
   # "enabled" here means "not disabled". It includes private features!
   scope :with_feature_enabled, ->(feature) {
@@ -330,8 +338,10 @@ class Project < ActiveRecord::Base
     end
 
     def sort(method)
-      if method == 'repository_size_desc'
-        reorder(repository_size: :desc, id: :desc)
+      if method == 'storage_size_desc'
+        # storage_size is a joined column so we need to
+        # pass a string to avoid AR adding the table name
+        reorder('project_statistics.storage_size DESC, projects.id DESC')
       else
         order_by(method)
       end
@@ -531,6 +541,10 @@ class Project < ActiveRecord::Base
     import_type == 'gitlab_project'
   end
 
+  def gitea_import?
+    import_type == 'gitea'
+  end
+
   def check_limit
     unless creator.can_create_project? or namespace.kind == 'group'
       projects_limit = creator.projects_limit
@@ -578,8 +592,8 @@ class Project < ActiveRecord::Base
     end
   end
 
-  def to_reference(from_project = nil)
-    if cross_namespace_reference?(from_project)
+  def to_reference(from_project = nil, full: false)
+    if full || cross_namespace_reference?(from_project)
       path_with_namespace
     elsif cross_project_reference?(from_project)
       path
@@ -598,10 +612,6 @@ class Project < ActiveRecord::Base
     Gitlab::Routing.url_helpers.namespace_project_url(self.namespace, self)
   end
 
-  def web_url_without_protocol
-    web_url.split('://')[1]
-  end
-
   def new_issue_address(author)
     return unless Gitlab::IncomingEmail.supports_issue_creation? && author
 
@@ -742,6 +752,14 @@ class Project < ActiveRecord::Base
     @ci_service ||= ci_services.reorder(nil).find_by(active: true)
   end
 
+  def deployment_services
+    services.where(category: :deployment)
+  end
+
+  def deployment_service
+    @deployment_service ||= deployment_services.reorder(nil).find_by(active: true)
+  end
+
   def jira_tracker?
     issues_tracker.to_param == 'jira'
   end
@@ -907,7 +925,7 @@ class Project < ActiveRecord::Base
       Rails.logger.error "Project #{old_path_with_namespace} cannot be renamed because container registry tags are present"
 
       # we currently doesn't support renaming repository if it contains tags in container registry
-      raise Exception.new('Project cannot be renamed, because tags are present in its container registry')
+      raise StandardError.new('Project cannot be renamed, because tags are present in its container registry')
     end
 
     if gitlab_shell.mv_repository(repository_storage_path, old_path_with_namespace, new_path_with_namespace)
@@ -934,7 +952,7 @@ class Project < ActiveRecord::Base
 
       # if we cannot move namespace directory we should rollback
       # db changes in order to prevent out of sync between db and fs
-      raise Exception.new('repository cannot be renamed')
+      raise StandardError.new('repository cannot be renamed')
     end
 
     Gitlab::AppLogger.info "Project was renamed: #{old_path_with_namespace} -> #{new_path_with_namespace}"
@@ -1014,7 +1032,7 @@ class Project < ActiveRecord::Base
                                         "refs/heads/#{branch}",
                                         force: true)
     repository.copy_gitattributes(branch)
-    repository.expire_avatar_cache
+    repository.after_change_head
     reload_default_branch
   end
 
@@ -1022,14 +1040,6 @@ class Project < ActiveRecord::Base
     forked? && project == forked_from_project
   end
 
-  def update_repository_size
-    update_attribute(:repository_size, repository.size)
-  end
-
-  def update_commit_count
-    update_attribute(:commit_count, repository.commit_count)
-  end
-
   def forks_count
     forks.count
   end
@@ -1220,6 +1230,12 @@ class Project < ActiveRecord::Base
     end
   end
 
+  def deployment_variables
+    return [] unless deployment_service
+
+    deployment_service.predefined_variables
+  end
+
   def append_or_update_attribute(name, value)
     old_values = public_send(name.to_s)
 
@@ -1302,4 +1318,26 @@ class Project < ActiveRecord::Base
   def full_path_changed?
     path_changed? || namespace_id_changed?
   end
+
+  def update_project_statistics
+    stats = statistics || build_statistics
+    stats.update(namespace_id: namespace_id)
+  end
+
+  def check_pending_delete
+    return if valid_attribute?(:name) && valid_attribute?(:path)
+    return unless pending_delete_twin
+
+    %i[route route.path name path].each do |error|
+      errors.delete(error)
+    end
+
+    errors.add(:base, "The project is still being deleted. Please try again later.")
+  end
+
+  def pending_delete_twin
+    return false unless path
+
+    Project.unscoped.where(pending_delete: true).find_with_namespace(path_with_namespace)
+  end
 end
diff --git a/app/models/project_authorization.rb b/app/models/project_authorization.rb
index a00d43773d9..4c7f4f5a429 100644
--- a/app/models/project_authorization.rb
+++ b/app/models/project_authorization.rb
@@ -5,4 +5,17 @@ class ProjectAuthorization < ActiveRecord::Base
   validates :project, presence: true
   validates :access_level, inclusion: { in: Gitlab::Access.all_values }, presence: true
   validates :user, uniqueness: { scope: [:project, :access_level] }, presence: true
+
+  def self.insert_authorizations(rows, per_batch = 1000)
+    rows.each_slice(per_batch) do |slice|
+      tuples = slice.map do |tuple|
+        tuple.map { |value| connection.quote(value) }
+      end
+
+      connection.execute <<-EOF.strip_heredoc
+      INSERT INTO project_authorizations (user_id, project_id, access_level)
+      VALUES #{tuples.map { |tuple| "(#{tuple.join(', ')})" }.join(', ')}
+      EOF
+    end
+  end
 end
diff --git a/app/models/project_label.rb b/app/models/project_label.rb
index 82f47f0e8fd..313815e5869 100644
--- a/app/models/project_label.rb
+++ b/app/models/project_label.rb
@@ -16,8 +16,8 @@ class ProjectLabel < Label
     'project_id'
   end
 
-  def to_reference(target_project = nil, format: :id)
-    super(project, target_project, format: format)
+  def to_reference(target_project = nil, format: :id, full: false)
+    super(project, target_project: target_project, format: format, full: full)
   end
 
   private
diff --git a/app/models/project_services/bamboo_service.rb b/app/models/project_services/bamboo_service.rb
index b5c76e4d4fe..4819bdbef8c 100644
--- a/app/models/project_services/bamboo_service.rb
+++ b/app/models/project_services/bamboo_service.rb
@@ -1,4 +1,6 @@
 class BambooService < CiService
+  include ReactiveService
+
   prop_accessor :bamboo_url, :build_key, :username, :password
 
   validates :bamboo_url, presence: true, url: true, if: :activated?
@@ -58,31 +60,46 @@ class BambooService < CiService
     %w(push)
   end
 
-  def build_info(sha)
-    @response = get_path("rest/api/latest/result?label=#{sha}")
+  def build_page(sha, ref)
+    with_reactive_cache(sha, ref) {|cached| cached[:build_page] }
   end
 
-  def build_page(sha, ref)
-    build_info(sha) if @response.nil? || !@response.code
+  def commit_status(sha, ref)
+    with_reactive_cache(sha, ref) {|cached| cached[:commit_status] }
+  end
 
-    if @response.code != 200 || @response['results']['results']['size'] == '0'
+  def execute(data)
+    return unless supported_events.include?(data[:object_kind])
+
+    get_path("updateAndBuild.action?buildKey=#{build_key}")
+  end
+
+  def calculate_reactive_cache(sha, ref)
+    response = get_path("rest/api/latest/result?label=#{sha}")
+
+    { build_page: read_build_page(response), commit_status: read_commit_status(response) }
+  end
+
+  private
+
+  def read_build_page(response)
+    if response.code != 200 || response['results']['results']['size'] == '0'
       # If actual build link can't be determined, send user to build summary page.
       URI.join("#{bamboo_url}/", "browse/#{build_key}").to_s
     else
       # If actual build link is available, go to build result page.
-      result_key = @response['results']['results']['result']['planResultKey']['key']
+      result_key = response['results']['results']['result']['planResultKey']['key']
       URI.join("#{bamboo_url}/", "browse/#{result_key}").to_s
     end
   end
 
-  def commit_status(sha, ref)
-    build_info(sha) if @response.nil? || !@response.code
-    return :error unless @response.code == 200 || @response.code == 404
+  def read_commit_status(response)
+    return :error unless response.code == 200 || response.code == 404
 
-    status = if @response.code == 404 || @response['results']['results']['size'] == '0'
+    status = if response.code == 404 || response['results']['results']['size'] == '0'
                'Pending'
              else
-               @response['results']['results']['result']['buildState']
+               response['results']['results']['result']['buildState']
              end
 
     if status.include?('Success')
@@ -96,14 +113,6 @@ class BambooService < CiService
     end
   end
 
-  def execute(data)
-    return unless supported_events.include?(data[:object_kind])
-
-    get_path("updateAndBuild.action?buildKey=#{build_key}")
-  end
-
-  private
-
   def build_url(path)
     URI.join("#{bamboo_url}/", path).to_s
   end
diff --git a/app/models/project_services/buildkite_service.rb b/app/models/project_services/buildkite_service.rb
index fe6d7aabb22..e77942d8f3c 100644
--- a/app/models/project_services/buildkite_service.rb
+++ b/app/models/project_services/buildkite_service.rb
@@ -1,6 +1,8 @@
 require "addressable/uri"
 
 class BuildkiteService < CiService
+  include ReactiveService
+
   ENDPOINT = "https://buildkite.com"
 
   prop_accessor :project_url, :token
@@ -33,13 +35,7 @@ class BuildkiteService < CiService
   end
 
   def commit_status(sha, ref)
-    response = HTTParty.get(commit_status_path(sha), verify: false)
-
-    if response.code == 200 && response['status']
-      response['status']
-    else
-      :error
-    end
+    with_reactive_cache(sha, ref) {|cached| cached[:commit_status] }
   end
 
   def commit_status_path(sha)
@@ -78,6 +74,19 @@ class BuildkiteService < CiService
     ]
   end
 
+  def calculate_reactive_cache(sha, ref)
+    response = HTTParty.get(commit_status_path(sha), verify: false)
+
+    status =
+      if response.code == 200 && response['status']
+        response['status']
+      else
+        :error
+      end
+
+    { commit_status: status }
+  end
+
   private
 
   def webhook_token
diff --git a/app/models/project_services/slack_service/base_message.rb b/app/models/project_services/chat_message/base_message.rb
index f1182824687..a03605d01fb 100644
--- a/app/models/project_services/slack_service/base_message.rb
+++ b/app/models/project_services/chat_message/base_message.rb
@@ -1,6 +1,6 @@
 require 'slack-notifier'
 
-class SlackService
+module ChatMessage
   class BaseMessage
     def initialize(params)
       raise NotImplementedError
diff --git a/app/models/project_services/slack_service/build_message.rb b/app/models/project_services/chat_message/build_message.rb
index 0fca4267bad..53e35cb21bf 100644
--- a/app/models/project_services/slack_service/build_message.rb
+++ b/app/models/project_services/chat_message/build_message.rb
@@ -1,4 +1,4 @@
-class SlackService
+module ChatMessage
   class BuildMessage < BaseMessage
     attr_reader :sha
     attr_reader :ref_type
diff --git a/app/models/project_services/slack_service/issue_message.rb b/app/models/project_services/chat_message/issue_message.rb
index cd87a79d0c6..14fd64e5332 100644
--- a/app/models/project_services/slack_service/issue_message.rb
+++ b/app/models/project_services/chat_message/issue_message.rb
@@ -1,4 +1,4 @@
-class SlackService
+module ChatMessage
   class IssueMessage < BaseMessage
     attr_reader :user_name
     attr_reader :title
diff --git a/app/models/project_services/slack_service/merge_message.rb b/app/models/project_services/chat_message/merge_message.rb
index b7615c96068..ab5e8b24167 100644
--- a/app/models/project_services/slack_service/merge_message.rb
+++ b/app/models/project_services/chat_message/merge_message.rb
@@ -1,4 +1,4 @@
-class SlackService
+module ChatMessage
   class MergeMessage < BaseMessage
     attr_reader :user_name
     attr_reader :project_name
diff --git a/app/models/project_services/slack_service/note_message.rb b/app/models/project_services/chat_message/note_message.rb
index 797c5937f09..ca1d7207034 100644
--- a/app/models/project_services/slack_service/note_message.rb
+++ b/app/models/project_services/chat_message/note_message.rb
@@ -1,4 +1,4 @@
-class SlackService
+module ChatMessage
   class NoteMessage < BaseMessage
     attr_reader :message
     attr_reader :user_name
diff --git a/app/models/project_services/slack_service/pipeline_message.rb b/app/models/project_services/chat_message/pipeline_message.rb
index f8d03c0e2fa..210027565a8 100644
--- a/app/models/project_services/slack_service/pipeline_message.rb
+++ b/app/models/project_services/chat_message/pipeline_message.rb
@@ -1,4 +1,4 @@
-class SlackService
+module ChatMessage
   class PipelineMessage < BaseMessage
     attr_reader :ref_type, :ref, :status, :project_name, :project_url,
                 :user_name, :duration, :pipeline_id
@@ -13,7 +13,7 @@ class SlackService
 
       @project_name = data[:project][:path_with_namespace]
       @project_url = data[:project][:web_url]
-      @user_name = data[:user] && data[:user][:name]
+      @user_name = (data[:user] && data[:user][:name]) || 'API'
     end
 
     def pretext
diff --git a/app/models/project_services/slack_service/push_message.rb b/app/models/project_services/chat_message/push_message.rb
index b26f3e9ddce..2d73b71ec37 100644
--- a/app/models/project_services/slack_service/push_message.rb
+++ b/app/models/project_services/chat_message/push_message.rb
@@ -1,4 +1,4 @@
-class SlackService
+module ChatMessage
   class PushMessage < BaseMessage
     attr_reader :after
     attr_reader :before
diff --git a/app/models/project_services/slack_service/wiki_page_message.rb b/app/models/project_services/chat_message/wiki_page_message.rb
index 160ca3ac115..134083e4504 100644
--- a/app/models/project_services/slack_service/wiki_page_message.rb
+++ b/app/models/project_services/chat_message/wiki_page_message.rb
@@ -1,4 +1,4 @@
-class SlackService
+module ChatMessage
   class WikiPageMessage < BaseMessage
     attr_reader :user_name
     attr_reader :title
diff --git a/app/models/project_services/chat_notification_service.rb b/app/models/project_services/chat_notification_service.rb
new file mode 100644
index 00000000000..b7ef44c3054
--- /dev/null
+++ b/app/models/project_services/chat_notification_service.rb
@@ -0,0 +1,149 @@
+# Base class for Chat notifications services
+# This class is not meant to be used directly, but only to inherit from.
+class ChatNotificationService < Service
+  include ChatMessage
+
+  default_value_for :category, 'chat'
+
+  prop_accessor :webhook, :username, :channel
+  boolean_accessor :notify_only_broken_builds, :notify_only_broken_pipelines
+
+  validates :webhook, presence: true, url: true, if: :activated?
+
+  def initialize_properties
+    # Custom serialized properties initialization
+    self.supported_events.each { |event| self.class.prop_accessor(event_channel_name(event)) }
+
+    if properties.nil?
+      self.properties = {}
+      self.notify_only_broken_builds = true
+      self.notify_only_broken_pipelines = true
+    end
+  end
+
+  def can_test?
+    valid?
+  end
+
+  def supported_events
+    %w[push issue confidential_issue merge_request note tag_push
+       build pipeline wiki_page]
+  end
+
+  def execute(data)
+    return unless supported_events.include?(data[:object_kind])
+    return unless webhook.present?
+
+    object_kind = data[:object_kind]
+
+    data = data.merge(
+      project_url: project_url,
+      project_name: project_name
+    )
+
+    # WebHook events often have an 'update' event that follows a 'open' or
+    # 'close' action. Ignore update events for now to prevent duplicate
+    # messages from arriving.
+
+    message = get_message(object_kind, data)
+
+    return false unless message
+
+    channel_name = get_channel_field(object_kind).presence || channel
+
+    opts = {}
+    opts[:channel] = channel_name if channel_name
+    opts[:username] = username if username
+
+    notifier = Slack::Notifier.new(webhook, opts)
+    notifier.ping(message.pretext, attachments: message.attachments, fallback: message.fallback)
+
+    true
+  end
+
+  def event_channel_names
+    supported_events.map { |event| event_channel_name(event) }
+  end
+
+  def event_field(event)
+    fields.find { |field| field[:name] == event_channel_name(event) }
+  end
+
+  def global_fields
+    fields.reject { |field| field[:name].end_with?('channel') }
+  end
+
+  def default_channel_placeholder
+    raise NotImplementedError
+  end
+
+  private
+
+  def get_message(object_kind, data)
+    case object_kind
+    when "push", "tag_push"
+      PushMessage.new(data)
+    when "issue"
+      IssueMessage.new(data) unless is_update?(data)
+    when "merge_request"
+      MergeMessage.new(data) unless is_update?(data)
+    when "note"
+      NoteMessage.new(data)
+    when "build"
+      BuildMessage.new(data) if should_build_be_notified?(data)
+    when "pipeline"
+      PipelineMessage.new(data) if should_pipeline_be_notified?(data)
+    when "wiki_page"
+      WikiPageMessage.new(data)
+    end
+  end
+
+  def get_channel_field(event)
+    field_name = event_channel_name(event)
+    self.public_send(field_name)
+  end
+
+  def build_event_channels
+    supported_events.reduce([]) do |channels, event|
+      channels << { type: 'text', name: event_channel_name(event), placeholder: default_channel_placeholder }
+    end
+  end
+
+  def event_channel_name(event)
+    "#{event}_channel"
+  end
+
+  def project_name
+    project.name_with_namespace.gsub(/\s/, '')
+  end
+
+  def project_url
+    project.web_url
+  end
+
+  def is_update?(data)
+    data[:object_attributes][:action] == 'update'
+  end
+
+  def should_build_be_notified?(data)
+    case data[:commit][:status]
+    when 'success'
+      !notify_only_broken_builds?
+    when 'failed'
+      true
+    else
+      false
+    end
+  end
+
+  def should_pipeline_be_notified?(data)
+    case data[:object_attributes][:status]
+    when 'success'
+      !notify_only_broken_pipelines?
+    when 'failed'
+      true
+    else
+      false
+    end
+  end
+end
diff --git a/app/models/project_services/chat_service.rb b/app/models/project_services/chat_service.rb
deleted file mode 100644
index d36beff5fa6..00000000000
--- a/app/models/project_services/chat_service.rb
+++ /dev/null
@@ -1,21 +0,0 @@
-# Base class for Chat services
-# This class is not meant to be used directly, but only to inherrit from.
-class ChatService < Service
-  default_value_for :category, 'chat'
-
-  has_many :chat_names, foreign_key: :service_id
-
-  def valid_token?(token)
-    self.respond_to?(:token) &&
-      self.token.present? &&
-      ActiveSupport::SecurityUtils.variable_size_secure_compare(token, self.token)
-  end
-
-  def supported_events
-    []
-  end
-
-  def trigger(params)
-    raise NotImplementedError
-  end
-end
diff --git a/app/models/project_services/chat_slash_commands_service.rb b/app/models/project_services/chat_slash_commands_service.rb
new file mode 100644
index 00000000000..0bc160af604
--- /dev/null
+++ b/app/models/project_services/chat_slash_commands_service.rb
@@ -0,0 +1,56 @@
+# Base class for Chat services
+# This class is not meant to be used directly, but only to inherrit from.
+class ChatSlashCommandsService < Service
+  default_value_for :category, 'chat'
+
+  prop_accessor :token
+
+  has_many :chat_names, foreign_key: :service_id, dependent: :destroy
+
+  def valid_token?(token)
+    self.respond_to?(:token) &&
+      self.token.present? &&
+      ActiveSupport::SecurityUtils.variable_size_secure_compare(token, self.token)
+  end
+
+  def supported_events
+    []
+  end
+
+  def can_test?
+    false
+  end
+
+  def fields
+    [
+      { type: 'text', name: 'token', placeholder: '' }
+    ]
+  end
+
+  def trigger(params)
+    return unless valid_token?(params[:token])
+
+    user = find_chat_user(params)
+    unless user
+      url = authorize_chat_name_url(params)
+      return presenter.authorize_chat_name(url)
+    end
+
+    Gitlab::ChatCommands::Command.new(project, user,
+      params).execute
+  end
+
+  private
+
+  def find_chat_user(params)
+    ChatNames::FindUserService.new(self, params).execute
+  end
+
+  def authorize_chat_name_url(params)
+    ChatNames::AuthorizeUserService.new(self, params).execute
+  end
+
+  def presenter
+    Gitlab::ChatCommands::Presenter.new
+  end
+end
diff --git a/app/models/project_services/ci_service.rb b/app/models/project_services/ci_service.rb
index 596c00705ad..4de0106707e 100644
--- a/app/models/project_services/ci_service.rb
+++ b/app/models/project_services/ci_service.rb
@@ -12,15 +12,7 @@ class CiService < Service
     %w(push)
   end
 
-  def merge_request_page(iid, sha, ref)
-    commit_page(sha, ref)
-  end
-
-  def commit_page(sha, ref)
-    build_page(sha, ref)
-  end
-
-  # Return complete url to merge_request page
+  # Return complete url to build page
   #
   # Ex.
   #   http://jenkins.example.com:8888/job/test1/scm/bySHA1/12d65c
@@ -35,23 +27,6 @@ class CiService < Service
   #
   #
   # Ex.
-  #   @service.merge_request_status(9, '13be4ac', 'dev')
-  #   # => 'success'
-  #
-  #   @service.merge_request_status(10, '2abe4ac', 'dev)
-  #   # => 'running'
-  #
-  #
-  def merge_request_status(iid, sha, ref)
-    commit_status(sha, ref)
-  end
-
-  # Return string with build status or :error symbol
-  #
-  # Allowed states: 'success', 'failed', 'running', 'pending', 'skipped'
-  #
-  #
-  # Ex.
   #   @service.commit_status('13be4ac', 'master')
   #   # => 'success'
   #
diff --git a/app/models/project_services/deployment_service.rb b/app/models/project_services/deployment_service.rb
new file mode 100644
index 00000000000..ab353a1abe6
--- /dev/null
+++ b/app/models/project_services/deployment_service.rb
@@ -0,0 +1,33 @@
+# Base class for deployment services
+#
+# These services integrate with a deployment solution like Kubernetes/OpenShift,
+# Mesosphere, etc, to provide additional features to environments.
+class DeploymentService < Service
+  default_value_for :category, 'deployment'
+
+  def supported_events
+    []
+  end
+
+  def predefined_variables
+    []
+  end
+
+  # Environments may have a number of terminals. Should return an array of
+  # hashes describing them, e.g.:
+  #
+  #     [{
+  #       :selectors    => {"a" => "b", "foo" => "bar"},
+  #       :url          => "wss://external.example.com/exec",
+  #       :headers      => {"Authorization" => "Token xxx"},
+  #       :subprotocols => ["foo"],
+  #       :ca_pem       => "----BEGIN CERTIFICATE...", # optional
+  #       :created_at   => Time.now.utc
+  #     }]
+  #
+  # Selectors should be a set of values that uniquely identify a particular
+  # terminal
+  def terminals(environment)
+    raise NotImplementedError
+  end
+end
diff --git a/app/models/project_services/drone_ci_service.rb b/app/models/project_services/drone_ci_service.rb
index adc78a427ee..4bbbebf54cb 100644
--- a/app/models/project_services/drone_ci_service.rb
+++ b/app/models/project_services/drone_ci_service.rb
@@ -1,4 +1,6 @@
 class DroneCiService < CiService
+  include ReactiveService
+
   prop_accessor :drone_url, :token
   boolean_accessor :enable_ssl_verification
 
@@ -34,14 +36,6 @@ class DroneCiService < CiService
     %w(push merge_request tag_push)
   end
 
-  def merge_request_status_path(iid, sha = nil, ref = nil)
-    url = [drone_url,
-           "gitlab/#{project.namespace.path}/#{project.path}/pulls/#{iid}",
-           "?access_token=#{token}"]
-
-    URI.join(*url).to_s
-  end
-
   def commit_status_path(sha, ref)
     url = [drone_url,
            "gitlab/#{project.namespace.path}/#{project.path}/commits/#{sha}",
@@ -50,54 +44,34 @@ class DroneCiService < CiService
     URI.join(*url).to_s
   end
 
-  def merge_request_status(iid, sha, ref)
-    response = HTTParty.get(merge_request_status_path(iid), verify: enable_ssl_verification)
-
-    if response.code == 200 and response['status']
-      case response['status']
-      when 'killed'
-        :canceled
-      when 'failure', 'error'
-        # Because drone return error if some test env failed
-        :failed
-      else
-        response["status"]
-      end
-    else
-      :error
-    end
-  rescue Errno::ECONNREFUSED
-    :error
+  def commit_status(sha, ref)
+    with_reactive_cache(sha, ref) {|cached| cached[:commit_status] }
   end
 
-  def commit_status(sha, ref)
+  def calculate_reactive_cache(sha, ref)
     response = HTTParty.get(commit_status_path(sha, ref), verify: enable_ssl_verification)
 
-    if response.code == 200 and response['status']
-      case response['status']
-      when 'killed'
-        :canceled
-      when 'failure', 'error'
-        # Because drone return error if some test env failed
-        :failed
+    status =
+      if response.code == 200 and response['status']
+        case response['status']
+        when 'killed'
+          :canceled
+        when 'failure', 'error'
+          # Because drone return error if some test env failed
+          :failed
+        else
+          response["status"]
+        end
       else
-        response["status"]
+        :error
       end
-    else
-      :error
-    end
-  rescue Errno::ECONNREFUSED
-    :error
-  end
 
-  def merge_request_page(iid, sha, ref)
-    url = [drone_url,
-           "gitlab/#{project.namespace.path}/#{project.path}/redirect/pulls/#{iid}"]
-
-    URI.join(*url).to_s
+    { commit_status: status }
+  rescue Errno::ECONNREFUSED
+    { commit_status: :error }
   end
 
-  def commit_page(sha, ref)
+  def build_page(sha, ref)
     url = [drone_url,
            "gitlab/#{project.namespace.path}/#{project.path}/redirect/commits/#{sha}",
            "?branch=#{URI::encode(ref.to_s)}"]
@@ -105,14 +79,6 @@ class DroneCiService < CiService
     URI.join(*url).to_s
   end
 
-  def commit_coverage(sha, ref)
-    nil
-  end
-
-  def build_page(sha, ref)
-    commit_page(sha, ref)
-  end
-
   def title
     'Drone CI'
   end
diff --git a/app/models/project_services/issue_tracker_service.rb b/app/models/project_services/issue_tracker_service.rb
index 207bb816ad1..bce2cdd5516 100644
--- a/app/models/project_services/issue_tracker_service.rb
+++ b/app/models/project_services/issue_tracker_service.rb
@@ -85,8 +85,8 @@ class IssueTrackerService < Service
 
   def enabled_in_gitlab_config
     Gitlab.config.issues_tracker &&
-    Gitlab.config.issues_tracker.values.any? &&
-    issues_tracker
+      Gitlab.config.issues_tracker.values.any? &&
+      issues_tracker
   end
 
   def issues_tracker
diff --git a/app/models/project_services/kubernetes_service.rb b/app/models/project_services/kubernetes_service.rb
new file mode 100644
index 00000000000..085125ca9dc
--- /dev/null
+++ b/app/models/project_services/kubernetes_service.rb
@@ -0,0 +1,173 @@
+class KubernetesService < DeploymentService
+  include Gitlab::Kubernetes
+  include ReactiveCaching
+
+  self.reactive_cache_key = ->(service) { [ service.class.model_name.singular, service.project_id ] }
+
+  # Namespace defaults to the project path, but can be overridden in case that
+  # is an invalid or inappropriate name
+  prop_accessor :namespace
+
+  #  Access to kubernetes is directly through the API
+  prop_accessor :api_url
+
+  # Bearer authentication
+  # TODO:  user/password auth, client certificates
+  prop_accessor :token
+
+  # Provide a custom CA bundle for self-signed deployments
+  prop_accessor :ca_pem
+
+  with_options presence: true, if: :activated? do
+    validates :api_url, url: true
+    validates :token
+
+    validates :namespace,
+      format: {
+        with: Gitlab::Regex.kubernetes_namespace_regex,
+        message: Gitlab::Regex.kubernetes_namespace_regex_message,
+      },
+      length: 1..63
+  end
+
+  after_save :clear_reactive_cache!
+
+  def initialize_properties
+    if properties.nil?
+      self.properties = {}
+      self.namespace = project.path if project.present?
+    end
+  end
+
+  def title
+    'Kubernetes'
+  end
+
+  def description
+    'Kubernetes / Openshift integration'
+  end
+
+  def help
+    'To enable terminal access to Kubernetes environments, label your ' \
+    'deployments with `app=$CI_ENVIRONMENT_SLUG`'
+  end
+
+  def to_param
+    'kubernetes'
+  end
+
+  def fields
+    [
+        { type: 'text',
+          name: 'namespace',
+          title: 'Kubernetes namespace',
+          placeholder: 'Kubernetes namespace',
+        },
+        { type: 'text',
+          name: 'api_url',
+          title: 'API URL',
+          placeholder: 'Kubernetes API URL, like https://kube.example.com/',
+        },
+        { type: 'text',
+          name: 'token',
+          title: 'Service token',
+          placeholder: 'Service token',
+        },
+        { type: 'textarea',
+          name: 'ca_pem',
+          title: 'Custom CA bundle',
+          placeholder: 'Certificate Authority bundle (PEM format)',
+        },
+    ]
+  end
+
+  # Check we can connect to the Kubernetes API
+  def test(*args)
+    kubeclient = build_kubeclient!
+
+    kubeclient.discover
+    { success: kubeclient.discovered, result: "Checked API discovery endpoint" }
+  rescue => err
+    { success: false, result: err }
+  end
+
+  def predefined_variables
+    variables = [
+      { key: 'KUBE_URL', value: api_url, public: true },
+      { key: 'KUBE_TOKEN', value: token, public: false },
+      { key: 'KUBE_NAMESPACE', value: namespace, public: true }
+    ]
+    variables << { key: 'KUBE_CA_PEM', value: ca_pem, public: true } if ca_pem.present?
+    variables
+  end
+
+  # Constructs a list of terminals from the reactive cache
+  #
+  # Returns nil if the cache is empty, in which case you should try again a
+  # short time later
+  def terminals(environment)
+    with_reactive_cache do |data|
+      pods = data.fetch(:pods, nil)
+      filter_pods(pods, app: environment.slug).
+        flat_map { |pod| terminals_for_pod(api_url, namespace, pod) }.
+        map { |terminal| add_terminal_auth(terminal, token, ca_pem) }
+    end
+  end
+
+  # Caches all pods in the namespace so other calls don't need to block on
+  # network access.
+  def calculate_reactive_cache
+    return unless active? && project && !project.pending_delete?
+
+    kubeclient = build_kubeclient!
+
+    # Store as hashes, rather than as third-party types
+    pods = begin
+      kubeclient.get_pods(namespace: namespace).as_json
+    rescue KubeException => err
+      raise err unless err.error_code == 404
+      []
+    end
+
+    # We may want to cache extra things in the future
+    { pods: pods }
+  end
+
+  private
+
+  def build_kubeclient!(api_path: 'api', api_version: 'v1')
+    raise "Incomplete settings" unless api_url && namespace && token
+
+    ::Kubeclient::Client.new(
+      join_api_url(api_path),
+      api_version,
+      auth_options: kubeclient_auth_options,
+      ssl_options: kubeclient_ssl_options,
+      http_proxy_uri: ENV['http_proxy']
+    )
+  end
+
+  def kubeclient_ssl_options
+    opts = { verify_ssl: OpenSSL::SSL::VERIFY_PEER }
+
+    if ca_pem.present?
+      opts[:cert_store] = OpenSSL::X509::Store.new
+      opts[:cert_store].add_cert(OpenSSL::X509::Certificate.new(ca_pem))
+    end
+
+    opts
+  end
+
+  def kubeclient_auth_options
+    { bearer_token: token }
+  end
+
+  def join_api_url(*parts)
+    url = URI.parse(api_url)
+    prefix = url.path.sub(%r{/+\z}, '')
+
+    url.path = [ prefix, *parts ].join("/")
+
+    url.to_s
+  end
+end
diff --git a/app/models/project_services/mattermost_service.rb b/app/models/project_services/mattermost_service.rb
new file mode 100644
index 00000000000..ee8a0b55275
--- /dev/null
+++ b/app/models/project_services/mattermost_service.rb
@@ -0,0 +1,41 @@
+class MattermostService < ChatNotificationService
+  def title
+    'Mattermost notifications'
+  end
+
+  def description
+    'Receive event notifications in Mattermost'
+  end
+
+  def to_param
+    'mattermost'
+  end
+
+  def help
+    'This service sends notifications about projects events to Mattermost channels.<br />
+    To set up this service:
+    <ol>
+      <li><a href="https://docs.mattermost.com/developer/webhooks-incoming.html#enabling-incoming-webhooks">Enable incoming webhooks</a> in your Mattermost installation. </li>
+      <li><a href="https://docs.mattermost.com/developer/webhooks-incoming.html#creating-integrations-using-incoming-webhooks">Add an incoming webhook</a> in your Mattermost team. The default channel can be overridden for each event. </li>
+      <li>Paste the webhook <strong>URL</strong> into the field bellow. </li>
+      <li>Select events below to enable notifications. The channel and username are optional. </li>
+    </ol>'
+  end
+
+  def fields
+    default_fields + build_event_channels
+  end
+
+  def default_fields
+    [
+      { type: 'text', name: 'webhook', placeholder: 'http://mattermost_host/hooks/...' },
+      { type: 'text', name: 'username', placeholder: 'username' },
+      { type: 'checkbox', name: 'notify_only_broken_builds' },
+      { type: 'checkbox', name: 'notify_only_broken_pipelines' },
+    ]
+  end
+
+  def default_channel_placeholder
+    "#town-square"
+  end
+end
diff --git a/app/models/project_services/mattermost_slash_commands_service.rb b/app/models/project_services/mattermost_slash_commands_service.rb
index 33431f41dc2..2cb481182d7 100644
--- a/app/models/project_services/mattermost_slash_commands_service.rb
+++ b/app/models/project_services/mattermost_slash_commands_service.rb
@@ -1,4 +1,4 @@
-class MattermostSlashCommandsService < ChatService
+class MattermostSlashCommandsService < ChatSlashCommandsService
   include TriggersHelper
 
   prop_accessor :token
@@ -19,31 +19,33 @@ class MattermostSlashCommandsService < ChatService
     'mattermost_slash_commands'
   end
 
-  def fields
-    [
-      { type: 'text', name: 'token', placeholder: '' }
-    ]
-  end
-
-  def trigger(params)
-    return nil unless valid_token?(params[:token])
+  def configure(user, params)
+    token = Mattermost::Command.new(user).
+      create(command(params))
 
-    user = find_chat_user(params)
-    unless user
-      url = authorize_chat_name_url(params)
-      return Mattermost::Presenter.authorize_chat_name(url)
-    end
+    update(active: true, token: token) if token
+  rescue Mattermost::Error => e
+    [false, e.message]
+  end
 
-    Gitlab::ChatCommands::Command.new(project, user, params).execute
+  def list_teams(user)
+    Mattermost::Team.new(user).all
+  rescue Mattermost::Error => e
+    [[], e.message]
   end
 
   private
 
-  def find_chat_user(params)
-    ChatNames::FindUserService.new(self, params).execute
-  end
-
-  def authorize_chat_name_url(params)
-    ChatNames::AuthorizeUserService.new(self, params).execute
+  def command(params)
+    pretty_project_name = project.name_with_namespace
+
+    params.merge(
+      auto_complete: true,
+      auto_complete_desc: "Perform common operations on: #{pretty_project_name}",
+      auto_complete_hint: '[help]',
+      description: "Perform common operations on: #{pretty_project_name}",
+      display_name: "GitLab / #{pretty_project_name}",
+      method: 'P',
+      username: 'GitLab')
   end
 end
diff --git a/app/models/project_services/slack_service.rb b/app/models/project_services/slack_service.rb
index e1b937817f4..76d233a3cca 100644
--- a/app/models/project_services/slack_service.rb
+++ b/app/models/project_services/slack_service.rb
@@ -1,25 +1,10 @@
-class SlackService < Service
-  prop_accessor :webhook, :username, :channel
-  boolean_accessor :notify_only_broken_builds, :notify_only_broken_pipelines
-  validates :webhook, presence: true, url: true, if: :activated?
-
-  def initialize_properties
-    # Custom serialized properties initialization
-    self.supported_events.each { |event| self.class.prop_accessor(event_channel_name(event)) }
-
-    if properties.nil?
-      self.properties = {}
-      self.notify_only_broken_builds = true
-      self.notify_only_broken_pipelines = true
-    end
-  end
-
+class SlackService < ChatNotificationService
   def title
-    'Slack'
+    'Slack notifications'
   end
 
   def description
-    'A team communication tool for the 21st century'
+    'Receive event notifications in Slack'
   end
 
   def to_param
@@ -27,150 +12,29 @@ class SlackService < Service
   end
 
   def help
-    'This service sends notifications to your Slack channel.<br/>
-    To setup this Service you need to create a new <b>"Incoming webhook"</b> in your Slack integration panel,
-    and enter the Webhook URL below.'
+    'This service sends notifications about projects events to Slack channels.<br />
+    To setup this service:
+    <ol>
+      <li><a href="https://slack.com/apps/A0F7XDUAZ-incoming-webhooks">Add an incoming webhook</a> in your Slack team. The default channel can be overridden for each event. </li>
+      <li>Paste the <strong>Webhook URL</strong> into the field below. </li>
+      <li>Select events below to enable notifications. The channel and username are optional. </li>
+    </ol>'
   end
 
   def fields
-    default_fields =
-      [
-        { type: 'text', name: 'webhook',   placeholder: 'https://hooks.slack.com/services/...' },
-        { type: 'text', name: 'username', placeholder: 'username' },
-        { type: 'text', name: 'channel', placeholder: "#general" },
-        { type: 'checkbox', name: 'notify_only_broken_builds' },
-        { type: 'checkbox', name: 'notify_only_broken_pipelines' },
-      ]
-
     default_fields + build_event_channels
   end
 
-  def supported_events
-    %w[push issue confidential_issue merge_request note tag_push
-       build pipeline wiki_page]
-  end
-
-  def execute(data)
-    return unless supported_events.include?(data[:object_kind])
-    return unless webhook.present?
-
-    object_kind = data[:object_kind]
-
-    data = data.merge(
-      project_url: project_url,
-      project_name: project_name
-    )
-
-    # WebHook events often have an 'update' event that follows a 'open' or
-    # 'close' action. Ignore update events for now to prevent duplicate
-    # messages from arriving.
-
-    message = get_message(object_kind, data)
-
-    if message
-      opt = {}
-
-      event_channel = get_channel_field(object_kind) || channel
-
-      opt[:channel] = event_channel if event_channel
-      opt[:username] = username if username
-
-      notifier = Slack::Notifier.new(webhook, opt)
-      notifier.ping(message.pretext, attachments: message.attachments, fallback: message.fallback)
-
-      true
-    else
-      false
-    end
-  end
-
-  def event_channel_names
-    supported_events.map { |event| event_channel_name(event) }
-  end
-
-  def event_field(event)
-    fields.find { |field| field[:name] == event_channel_name(event) }
+  def default_fields
+    [
+      { type: 'text', name: 'webhook', placeholder: 'https://hooks.slack.com/services/...' },
+      { type: 'text', name: 'username', placeholder: 'username' },
+      { type: 'checkbox', name: 'notify_only_broken_builds' },
+      { type: 'checkbox', name: 'notify_only_broken_pipelines' },
+    ]
   end
 
-  def global_fields
-    fields.reject { |field| field[:name].end_with?('channel') }
-  end
-
-  private
-
-  def get_message(object_kind, data)
-    case object_kind
-    when "push", "tag_push"
-      PushMessage.new(data)
-    when "issue"
-      IssueMessage.new(data) unless is_update?(data)
-    when "merge_request"
-      MergeMessage.new(data) unless is_update?(data)
-    when "note"
-      NoteMessage.new(data)
-    when "build"
-      BuildMessage.new(data) if should_build_be_notified?(data)
-    when "pipeline"
-      PipelineMessage.new(data) if should_pipeline_be_notified?(data)
-    when "wiki_page"
-      WikiPageMessage.new(data)
-    end
-  end
-
-  def get_channel_field(event)
-    field_name = event_channel_name(event)
-    self.public_send(field_name)
-  end
-
-  def build_event_channels
-    supported_events.reduce([]) do |channels, event|
-      channels << { type: 'text', name: event_channel_name(event), placeholder: "#general" }
-    end
-  end
-
-  def event_channel_name(event)
-    "#{event}_channel"
-  end
-
-  def project_name
-    project.name_with_namespace.gsub(/\s/, '')
-  end
-
-  def project_url
-    project.web_url
-  end
-
-  def is_update?(data)
-    data[:object_attributes][:action] == 'update'
-  end
-
-  def should_build_be_notified?(data)
-    case data[:commit][:status]
-    when 'success'
-      !notify_only_broken_builds?
-    when 'failed'
-      true
-    else
-      false
-    end
-  end
-
-  def should_pipeline_be_notified?(data)
-    case data[:object_attributes][:status]
-    when 'success'
-      !notify_only_broken_pipelines?
-    when 'failed'
-      true
-    else
-      false
-    end
+  def default_channel_placeholder
+    "#general"
   end
 end
-
-require "slack_service/issue_message"
-require "slack_service/push_message"
-require "slack_service/merge_message"
-require "slack_service/note_message"
-require "slack_service/build_message"
-require "slack_service/pipeline_message"
-require "slack_service/wiki_page_message"
diff --git a/app/models/project_services/slack_slash_commands_service.rb b/app/models/project_services/slack_slash_commands_service.rb
new file mode 100644
index 00000000000..5a7cc0fb329
--- /dev/null
+++ b/app/models/project_services/slack_slash_commands_service.rb
@@ -0,0 +1,28 @@
+class SlackSlashCommandsService < ChatSlashCommandsService
+  include TriggersHelper
+
+  def title
+    'Slack Command'
+  end
+
+  def description
+    "Perform common operations on GitLab in Slack"
+  end
+
+  def to_param
+    'slack_slash_commands'
+  end
+
+  def trigger(params)
+    # Format messages to be Slack-compatible
+    super.tap do |result|
+      result[:text] = format(result[:text]) if result.is_a?(Hash)
+    end
+  end
+
+  private
+
+  def format(text)
+    Slack::Notifier::LinkFormatter.format(text) if text
+  end
+end
diff --git a/app/models/project_services/teamcity_service.rb b/app/models/project_services/teamcity_service.rb
index a4a967c9bc9..6726082048f 100644
--- a/app/models/project_services/teamcity_service.rb
+++ b/app/models/project_services/teamcity_service.rb
@@ -1,4 +1,6 @@
 class TeamcityService < CiService
+  include ReactiveService
+
   prop_accessor :teamcity_url, :build_type, :username, :password
 
   validates :teamcity_url, presence: true, url: true, if: :activated?
@@ -61,43 +63,18 @@ class TeamcityService < CiService
     ]
   end
 
-  def build_info(sha)
-    @response = get_path("httpAuth/app/rest/builds/branch:unspecified:any,number:#{sha}")
-  end
-
   def build_page(sha, ref)
-    build_info(sha) if @response.nil? || !@response.code
-
-    if @response.code != 200
-      # If actual build link can't be determined,
-      # send user to build summary page.
-      build_url("viewLog.html?buildTypeId=#{build_type}")
-    else
-      # If actual build link is available, go to build result page.
-      built_id = @response['build']['id']
-      build_url("viewLog.html?buildId=#{built_id}&buildTypeId=#{build_type}")
-    end
+    with_reactive_cache(sha, ref) {|cached| cached[:build_page] }
   end
 
   def commit_status(sha, ref)
-    build_info(sha) if @response.nil? || !@response.code
-    return :error unless @response.code == 200 || @response.code == 404
+    with_reactive_cache(sha, ref) {|cached| cached[:commit_status] }
+  end
 
-    status = if @response.code == 404
-               'Pending'
-             else
-               @response['build']['status']
-             end
+  def calculate_reactive_cache(sha, ref)
+    response = get_path("httpAuth/app/rest/builds/branch:unspecified:any,number:#{sha}")
 
-    if status.include?('SUCCESS')
-      'success'
-    elsif status.include?('FAILURE')
-      'failed'
-    elsif status.include?('Pending')
-      'pending'
-    else
-      :error
-    end
+    { build_page: read_build_page(response), commit_status: read_commit_status(response) }
   end
 
   def execute(data)
@@ -122,6 +99,40 @@ class TeamcityService < CiService
 
   private
 
+  def read_build_page(response)
+    if response.code != 200
+      # If actual build link can't be determined,
+      # send user to build summary page.
+      build_url("viewLog.html?buildTypeId=#{build_type}")
+    else
+      # If actual build link is available, go to build result page.
+      built_id = response['build']['id']
+      build_url("viewLog.html?buildId=#{built_id}&buildTypeId=#{build_type}")
+    end
+  end
+
+  def read_commit_status(response)
+    return :error unless response.code == 200 || response.code == 404
+
+    status = if response.code == 404
+               'Pending'
+             else
+               response['build']['status']
+             end
+
+    return :error unless status.present?
+
+    if status.include?('SUCCESS')
+      'success'
+    elsif status.include?('FAILURE')
+      'failed'
+    elsif status.include?('Pending')
+      'pending'
+    else
+      :error
+    end
+  end
+
   def build_url(path)
     URI.join("#{teamcity_url}/", path).to_s
   end
diff --git a/app/models/project_statistics.rb b/app/models/project_statistics.rb
new file mode 100644
index 00000000000..06abd406523
--- /dev/null
+++ b/app/models/project_statistics.rb
@@ -0,0 +1,44 @@
+class ProjectStatistics < ActiveRecord::Base
+  belongs_to :project
+  belongs_to :namespace
+
+  before_save :update_storage_size
+
+  STORAGE_COLUMNS = [:repository_size, :lfs_objects_size, :build_artifacts_size]
+  STATISTICS_COLUMNS = [:commit_count] + STORAGE_COLUMNS
+
+  def total_repository_size
+    repository_size + lfs_objects_size
+  end
+
+  def refresh!(only: nil)
+    STATISTICS_COLUMNS.each do |column, generator|
+      if only.blank? || only.include?(column)
+        public_send("update_#{column}")
+      end
+    end
+
+    save!
+  end
+
+  def update_commit_count
+    self.commit_count = project.repository.commit_count
+  end
+
+  # Repository#size needs to be converted from MB to Byte.
+  def update_repository_size
+    self.repository_size = project.repository.size * 1.megabyte
+  end
+
+  def update_lfs_objects_size
+    self.lfs_objects_size = project.lfs_objects.sum(:size)
+  end
+
+  def update_build_artifacts_size
+    self.build_artifacts_size = project.builds.sum(:artifacts_size)
+  end
+
+  def update_storage_size
+    self.storage_size = STORAGE_COLUMNS.sum(&method(:read_attribute))
+  end
+end
diff --git a/app/models/repository.rb b/app/models/repository.rb
index 1ccabdb7c1f..43dba86e5ed 100644
--- a/app/models/repository.rb
+++ b/app/models/repository.rb
@@ -439,6 +439,11 @@ class Repository
     expire_content_cache
   end
 
+  # Runs code after the HEAD of a repository is changed.
+  def after_change_head
+    expire_method_caches(METHOD_CACHES_FOR_FILE_TYPES.keys)
+  end
+
   # Runs code after a repository has been forked/imported.
   def after_import
     expire_content_cache
@@ -654,11 +659,19 @@ class Repository
   end
 
   def last_commit_for_path(sha, path)
-    args = %W(#{Gitlab.config.git.bin_path} rev-list --max-count=1 #{sha} -- #{path})
-    sha = Gitlab::Popen.popen(args, path_to_repo).first.strip
+    sha = last_commit_id_for_path(sha, path)
     commit(sha)
   end
 
+  def last_commit_id_for_path(sha, path)
+    key = path.blank? ? "last_commit_id_for_path:#{sha}" : "last_commit_id_for_path:#{sha}:#{Digest::SHA1.hexdigest(path)}"
+
+    cache.fetch(key) do
+      args = %W(#{Gitlab.config.git.bin_path} rev-list --max-count=1 #{sha} -- #{path})
+      Gitlab::Popen.popen(args, path_to_repo).first.strip
+    end
+  end
+
   def next_branch(name, opts = {})
     branch_ids = self.branch_names.map do |n|
       next 1 if n == name
diff --git a/app/models/route.rb b/app/models/route.rb
index d40214b9da6..caf596efa79 100644
--- a/app/models/route.rb
+++ b/app/models/route.rb
@@ -13,7 +13,7 @@ class Route < ActiveRecord::Base
   def rename_children
     # We update each row separately because MySQL does not have regexp_replace.
     # rubocop:disable Rails/FindEach
-    Route.where('path LIKE ?', "#{path_was}%").each do |route|
+    Route.where('path LIKE ?', "#{path_was}/%").each do |route|
       # Note that update column skips validation and callbacks.
       # We need this to avoid recursive call of rename_children method
       route.update_column(:path, route.path.sub(path_was, path))
diff --git a/app/models/service.rb b/app/models/service.rb
index 0c36acfc1b7..19ef3ba9c23 100644
--- a/app/models/service.rb
+++ b/app/models/service.rb
@@ -214,11 +214,14 @@ class Service < ActiveRecord::Base
       hipchat
       irker
       jira
+      kubernetes
       mattermost_slash_commands
+      mattermost
       pipelines_email
       pivotaltracker
       pushover
       redmine
+      slack_slash_commands
       slack
       teamcity
     ]
diff --git a/app/models/snippet.rb b/app/models/snippet.rb
index 98ccf5f331f..771a7350556 100644
--- a/app/models/snippet.rb
+++ b/app/models/snippet.rb
@@ -64,11 +64,11 @@ class Snippet < ActiveRecord::Base
     @link_reference_pattern ||= super("snippets", /(?<snippet>\d+)/)
   end
 
-  def to_reference(from_project = nil)
+  def to_reference(from_project = nil, full: false)
     reference = "#{self.class.reference_prefix}#{id}"
 
     if project.present?
-      "#{project.to_reference(from_project)}#{reference}"
+      "#{project.to_reference(from_project, full: full)}#{reference}"
     else
       reference
     end
diff --git a/app/models/timelog.rb b/app/models/timelog.rb
new file mode 100644
index 00000000000..f768c4e3da5
--- /dev/null
+++ b/app/models/timelog.rb
@@ -0,0 +1,6 @@
+class Timelog < ActiveRecord::Base
+  validates :time_spent, :user, presence: true
+
+  belongs_to :trackable, polymorphic: true
+  belongs_to :user
+end
diff --git a/app/models/user.rb b/app/models/user.rb
index 1bd28203523..06dd98a3188 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -73,7 +73,7 @@ class User < ActiveRecord::Base
   has_many :created_projects,         foreign_key: :creator_id, class_name: 'Project'
   has_many :users_star_projects, dependent: :destroy
   has_many :starred_projects, through: :users_star_projects, source: :project
-  has_many :project_authorizations, dependent: :destroy
+  has_many :project_authorizations
   has_many :authorized_projects, through: :project_authorizations, source: :project
 
   has_many :snippets,                 dependent: :destroy, foreign_key: :author_id
@@ -99,6 +99,7 @@ class User < ActiveRecord::Base
   #
   # Note: devise :validatable above adds validations for :email and :password
   validates :name, presence: true
+  validates_confirmation_of :email
   validates :notification_email, presence: true
   validates :notification_email, email: true, if: ->(user) { user.notification_email != user.email }
   validates :public_email, presence: true, uniqueness: true, email: true, allow_blank: true
@@ -178,6 +179,8 @@ class User < ActiveRecord::Base
   scope :not_in_project, ->(project) { project.users.present? ? where("id not in (:ids)", ids: project.users.map(&:id) ) : all }
   scope :without_projects, -> { where('id NOT IN (SELECT DISTINCT(user_id) FROM members WHERE user_id IS NOT NULL AND requested_at IS NULL)') }
   scope :todo_authors, ->(user_id, state) { where(id: Todo.where(user_id: user_id, state: state).select(:author_id)) }
+  scope :order_recent_sign_in, -> { reorder(last_sign_in_at: :desc) }
+  scope :order_oldest_sign_in, -> { reorder(last_sign_in_at: :asc) }
 
   def self.with_two_factor
     joins("LEFT OUTER JOIN u2f_registrations AS u2f ON u2f.user_id = users.id").
@@ -205,8 +208,8 @@ class User < ActiveRecord::Base
 
     def sort(method)
       case method.to_s
-      when 'recent_sign_in' then reorder(last_sign_in_at: :desc)
-      when 'oldest_sign_in' then reorder(last_sign_in_at: :asc)
+      when 'recent_sign_in' then order_recent_sign_in
+      when 'oldest_sign_in' then order_oldest_sign_in
       else
         order_by(method)
       end
@@ -309,10 +312,6 @@ class User < ActiveRecord::Base
       find_by(id: Key.unscoped.select(:user_id).where(id: key_id))
     end
 
-    def build_user(attrs = {})
-      User.new(attrs)
-    end
-
     def reference_prefix
       '@'
     end
@@ -334,7 +333,7 @@ class User < ActiveRecord::Base
     username
   end
 
-  def to_reference(_from_project = nil, _target_project = nil)
+  def to_reference(_from_project = nil, target_project: nil, full: nil)
     "#{self.class.reference_prefix}#{username}"
   end
 
@@ -390,7 +389,7 @@ class User < ActiveRecord::Base
   def namespace_uniq
     # Return early if username already failed the first uniqueness validation
     return if errors.key?(:username) &&
-      errors[:username].include?('has already been taken')
+        errors[:username].include?('has already been taken')
 
     existing_namespace = Namespace.by_path(username)
     if existing_namespace && existing_namespace != namespace
@@ -441,22 +440,16 @@ class User < ActiveRecord::Base
   end
 
   def refresh_authorized_projects
-    transaction do
-      project_authorizations.delete_all
-
-      # project_authorizations_union can return multiple records for the same
-      # project/user with different access_level so we take row with the maximum
-      # access_level
-      project_authorizations.connection.execute <<-SQL
-      INSERT INTO project_authorizations (user_id, project_id, access_level)
-      SELECT user_id, project_id, MAX(access_level) AS access_level
-      FROM (#{project_authorizations_union.to_sql}) sub
-      GROUP BY user_id, project_id
-      SQL
-
-      unless authorized_projects_populated
-        update_column(:authorized_projects_populated, true)
-      end
+    Users::RefreshAuthorizedProjectsService.new(self).execute
+  end
+
+  def remove_project_authorizations(project_ids)
+    project_authorizations.where(project_id: project_ids).delete_all
+  end
+
+  def set_authorized_projects_column
+    unless authorized_projects_populated
+      update_column(:authorized_projects_populated, true)
     end
   end
 
@@ -903,18 +896,6 @@ class User < ActiveRecord::Base
 
   private
 
-  # Returns a union query of projects that the user is authorized to access
-  def project_authorizations_union
-    relations = [
-      personal_projects.select("#{id} AS user_id, projects.id AS project_id, #{Gitlab::Access::MASTER} AS access_level"),
-      groups_projects.select_for_project_authorization,
-      projects.select_for_project_authorization,
-      groups.joins(:shared_projects).select_for_project_authorization
-    ]
-
-    Gitlab::SQL::Union.new(relations)
-  end
-
   def ci_projects_union
     scope  = { access_level: [Gitlab::Access::MASTER, Gitlab::Access::OWNER] }
     groups = groups_projects.where(members: scope)
diff --git a/app/policies/group_policy.rb b/app/policies/group_policy.rb
index 6f943feb2a7..0be6e113655 100644
--- a/app/policies/group_policy.rb
+++ b/app/policies/group_policy.rb
@@ -4,7 +4,7 @@ class GroupPolicy < BasePolicy
     return unless @user
 
     globally_viewable = @subject.public? || (@subject.internal? && !@user.external?)
-    member = @subject.users.include?(@user)
+    member = @subject.users_with_parents.include?(@user)
     owner = @user.admin? || @subject.has_owner?(@user)
     master = owner || @subject.has_master?(@user)
 
diff --git a/app/policies/note_policy.rb b/app/policies/note_policy.rb
index 83847466ee2..5326061bd07 100644
--- a/app/policies/note_policy.rb
+++ b/app/policies/note_policy.rb
@@ -12,7 +12,7 @@ class NotePolicy < BasePolicy
     end
 
     if @subject.for_merge_request? &&
-       @subject.noteable.author == @user
+        @subject.noteable.author == @user
       can! :resolve_note
     end
   end
diff --git a/app/policies/project_policy.rb b/app/policies/project_policy.rb
index d5aadfce76a..71ef8901932 100644
--- a/app/policies/project_policy.rb
+++ b/app/policies/project_policy.rb
@@ -3,7 +3,7 @@ class ProjectPolicy < BasePolicy
     team_access!(user)
 
     owner = project.owner == user ||
-            (project.group && project.group.has_owner?(user))
+      (project.group && project.group.has_owner?(user))
 
     owner_access! if user.admin? || owner
     team_member_owner_access! if owner
@@ -13,7 +13,7 @@ class ProjectPolicy < BasePolicy
       public_access!
 
       if project.request_access_enabled &&
-         !(owner || user.admin? || project.team.member?(user) || project_group_member?(user))
+          !(owner || user.admin? || project.team.member?(user) || project_group_member?(user))
         can! :request_access
       end
     end
@@ -171,9 +171,7 @@ class ProjectPolicy < BasePolicy
   def disabled_features!
     repository_enabled = project.feature_available?(:repository, user)
 
-    unless project.feature_available?(:issues, user)
-      cannot!(*named_abilities(:issue))
-    end
+    block_issues_abilities
 
     unless project.feature_available?(:merge_requests, user) && repository_enabled
       cannot!(*named_abilities(:merge_request))
@@ -244,10 +242,19 @@ class ProjectPolicy < BasePolicy
 
   def project_group_member?(user)
     project.group &&
-    (
-      project.group.members.exists?(user_id: user.id) ||
-      project.group.requesters.exists?(user_id: user.id)
-    )
+      (
+        project.group.members_with_parents.exists?(user_id: user.id) ||
+        project.group.requesters.exists?(user_id: user.id)
+      )
+  end
+
+  def block_issues_abilities
+    unless project.feature_available?(:issues, user)
+      cannot! :read_issue if project.default_issues_tracker?
+      cannot! :create_issue
+      cannot! :update_issue
+      cannot! :admin_issue
+    end
   end
 
   def named_abilities(name)
diff --git a/app/serializers/analytics_stage_entity.rb b/app/serializers/analytics_stage_entity.rb
new file mode 100644
index 00000000000..a559d0850c4
--- /dev/null
+++ b/app/serializers/analytics_stage_entity.rb
@@ -0,0 +1,10 @@
+class AnalyticsStageEntity < Grape::Entity
+  include EntityDateHelper
+
+  expose :title
+  expose :description
+
+  expose :median, as: :value do |stage|
+    stage.median && !stage.median.zero? ? distance_of_time_in_words(stage.median) : nil
+  end
+end
diff --git a/app/serializers/analytics_stage_serializer.rb b/app/serializers/analytics_stage_serializer.rb
new file mode 100644
index 00000000000..613cf6874d8
--- /dev/null
+++ b/app/serializers/analytics_stage_serializer.rb
@@ -0,0 +1,3 @@
+class AnalyticsStageSerializer < BaseSerializer
+  entity AnalyticsStageEntity
+end
diff --git a/app/serializers/analytics_summary_entity.rb b/app/serializers/analytics_summary_entity.rb
new file mode 100644
index 00000000000..91803ec07f5
--- /dev/null
+++ b/app/serializers/analytics_summary_entity.rb
@@ -0,0 +1,7 @@
+class AnalyticsSummaryEntity < Grape::Entity
+  expose :value, safe: true
+
+  expose :title do |object|
+    object.title.pluralize(object.value)
+  end
+end
diff --git a/app/serializers/analytics_summary_serializer.rb b/app/serializers/analytics_summary_serializer.rb
new file mode 100644
index 00000000000..c87a24aa47c
--- /dev/null
+++ b/app/serializers/analytics_summary_serializer.rb
@@ -0,0 +1,3 @@
+class AnalyticsSummarySerializer < BaseSerializer
+  entity AnalyticsSummaryEntity
+end
diff --git a/app/serializers/build_action_entity.rb b/app/serializers/build_action_entity.rb
new file mode 100644
index 00000000000..184f5fd4b52
--- /dev/null
+++ b/app/serializers/build_action_entity.rb
@@ -0,0 +1,14 @@
+class BuildActionEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :name do |build|
+    build.name
+  end
+
+  expose :path do |build|
+    play_namespace_project_build_path(
+      build.project.namespace,
+      build.project,
+      build)
+  end
+end
diff --git a/app/serializers/build_artifact_entity.rb b/app/serializers/build_artifact_entity.rb
new file mode 100644
index 00000000000..8b643d8e783
--- /dev/null
+++ b/app/serializers/build_artifact_entity.rb
@@ -0,0 +1,14 @@
+class BuildArtifactEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :name do |build|
+    build.name
+  end
+
+  expose :path do |build|
+    download_namespace_project_build_artifacts_path(
+      build.project.namespace,
+      build.project,
+      build)
+  end
+end
diff --git a/app/serializers/commit_entity.rb b/app/serializers/commit_entity.rb
index acc20f6dc52..31763955f97 100644
--- a/app/serializers/commit_entity.rb
+++ b/app/serializers/commit_entity.rb
@@ -3,17 +3,21 @@ class CommitEntity < API::Entities::RepoCommit
 
   expose :author, using: UserEntity
 
+  expose :author_gravatar_url do |commit|
+    GravatarService.new.execute(commit.author_email)
+  end
+
   expose :commit_url do |commit|
-    namespace_project_tree_url(
+    namespace_project_commit_url(
       request.project.namespace,
       request.project,
-      id: commit.id)
+      commit)
   end
 
   expose :commit_path do |commit|
-    namespace_project_tree_path(
+    namespace_project_commit_path(
       request.project.namespace,
       request.project,
-      id: commit.id)
+      commit)
   end
 end
diff --git a/app/serializers/environment_entity.rb b/app/serializers/environment_entity.rb
index 7e0fc9c071e..5d15eb8d3d3 100644
--- a/app/serializers/environment_entity.rb
+++ b/app/serializers/environment_entity.rb
@@ -23,5 +23,13 @@ class EnvironmentEntity < Grape::Entity
       environment)
   end
 
+  expose :terminal_path, if: ->(environment, _) { environment.has_terminals? } do |environment|
+    can?(request.user, :admin_environment, environment.project) &&
+      terminal_namespace_project_environment_path(
+        environment.project.namespace,
+        environment.project,
+        environment)
+  end
+
   expose :created_at, :updated_at
 end
diff --git a/app/serializers/issuable_entity.rb b/app/serializers/issuable_entity.rb
index 17c9160cb19..29aecb50849 100644
--- a/app/serializers/issuable_entity.rb
+++ b/app/serializers/issuable_entity.rb
@@ -13,4 +13,8 @@ class IssuableEntity < Grape::Entity
   expose :created_at
   expose :updated_at
   expose :deleted_at
+  expose :time_estimate
+  expose :total_time_spent
+  expose :human_time_estimate
+  expose :human_total_time_spent
 end
diff --git a/app/serializers/pipeline_entity.rb b/app/serializers/pipeline_entity.rb
new file mode 100644
index 00000000000..d04a4990cb0
--- /dev/null
+++ b/app/serializers/pipeline_entity.rb
@@ -0,0 +1,83 @@
+class PipelineEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :id
+  expose :user, using: UserEntity
+
+  expose :path do |pipeline|
+    namespace_project_pipeline_path(
+      pipeline.project.namespace,
+      pipeline.project,
+      pipeline)
+  end
+
+  expose :details do
+    expose :status do |pipeline, options|
+      StatusEntity.represent(
+        pipeline.detailed_status(request.user),
+        options)
+    end
+
+    expose :duration
+    expose :finished_at
+    expose :stages, using: StageEntity
+    expose :artifacts, using: BuildArtifactEntity
+    expose :manual_actions, using: BuildActionEntity
+  end
+
+  expose :flags do
+    expose :latest?, as: :latest
+    expose :triggered?, as: :triggered
+    expose :stuck?, as: :stuck
+    expose :has_yaml_errors?, as: :yaml_errors
+    expose :can_retry?, as: :retryable
+    expose :can_cancel?, as: :cancelable
+  end
+
+  expose :ref do
+    expose :name do |pipeline|
+      pipeline.ref
+    end
+
+    expose :path do |pipeline|
+      namespace_project_tree_path(
+        pipeline.project.namespace,
+        pipeline.project,
+        id: pipeline.ref)
+    end
+
+    expose :tag?, as: :tag
+    expose :branch?, as: :branch
+  end
+
+  expose :commit, using: CommitEntity
+  expose :yaml_errors, if: ->(pipeline, _) { pipeline.has_yaml_errors? }
+
+  expose :retry_path, if: proc { can_retry? }  do |pipeline|
+    retry_namespace_project_pipeline_path(pipeline.project.namespace,
+                                          pipeline.project,
+                                          pipeline.id)
+  end
+
+  expose :cancel_path, if: proc { can_cancel? } do |pipeline|
+    cancel_namespace_project_pipeline_path(pipeline.project.namespace,
+                                           pipeline.project,
+                                           pipeline.id)
+  end
+
+  expose :created_at, :updated_at
+
+  private
+
+  alias_method :pipeline, :object
+
+  def can_retry?
+    pipeline.retryable? &&
+      can?(request.user, :update_pipeline, pipeline)
+  end
+
+  def can_cancel?
+    pipeline.cancelable? &&
+      can?(request.user, :update_pipeline, pipeline)
+  end
+end
diff --git a/app/serializers/pipeline_serializer.rb b/app/serializers/pipeline_serializer.rb
new file mode 100644
index 00000000000..cfa86cc2553
--- /dev/null
+++ b/app/serializers/pipeline_serializer.rb
@@ -0,0 +1,40 @@
+class PipelineSerializer < BaseSerializer
+  entity PipelineEntity
+  class InvalidResourceError < StandardError; end
+  include API::Helpers::Pagination
+  Struct.new('Pagination', :request, :response)
+
+  def represent(resource, opts = {})
+    if paginated?
+      raise InvalidResourceError unless resource.respond_to?(:page)
+
+      super(paginate(resource.includes(project: :namespace)), opts)
+    else
+      super(resource, opts)
+    end
+  end
+
+  def paginated?
+    defined?(@pagination)
+  end
+
+  def with_pagination(request, response)
+    tap { @pagination = Struct::Pagination.new(request, response) }
+  end
+
+  private
+
+  # Methods needed by `API::Helpers::Pagination`
+  #
+  def params
+    @pagination.request.query_parameters
+  end
+
+  def request
+    @pagination.request
+  end
+
+  def header(header, value)
+    @pagination.response.headers[header] = value
+  end
+end
diff --git a/app/serializers/request_aware_entity.rb b/app/serializers/request_aware_entity.rb
index ff8c1142abc..3039014aaaa 100644
--- a/app/serializers/request_aware_entity.rb
+++ b/app/serializers/request_aware_entity.rb
@@ -2,10 +2,11 @@ module RequestAwareEntity
   extend ActiveSupport::Concern
 
   included do
-    include Gitlab::Routing.url_helpers
+    include Gitlab::Routing
+    include Gitlab::Allowable
   end
 
   def request
-    @options.fetch(:request)
+    options.fetch(:request)
   end
 end
diff --git a/app/serializers/stage_entity.rb b/app/serializers/stage_entity.rb
new file mode 100644
index 00000000000..7a047bdc712
--- /dev/null
+++ b/app/serializers/stage_entity.rb
@@ -0,0 +1,38 @@
+class StageEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :name
+
+  expose :title do |stage|
+    "#{stage.name}: #{detailed_status.label}"
+  end
+
+  expose :detailed_status,
+    as: :status,
+    with: StatusEntity
+
+  expose :path do |stage|
+    namespace_project_pipeline_path(
+      stage.pipeline.project.namespace,
+      stage.pipeline.project,
+      stage.pipeline,
+      anchor: stage.name)
+  end
+
+  expose :dropdown_path do |stage|
+    stage_namespace_project_pipeline_path(
+      stage.pipeline.project.namespace,
+      stage.pipeline.project,
+      stage.pipeline,
+      stage: stage.name,
+      format: :json)
+  end
+
+  private
+
+  alias_method :stage, :object
+
+  def detailed_status
+    stage.detailed_status(request.user)
+  end
+end
diff --git a/app/serializers/status_entity.rb b/app/serializers/status_entity.rb
new file mode 100644
index 00000000000..47066bebfb1
--- /dev/null
+++ b/app/serializers/status_entity.rb
@@ -0,0 +1,8 @@
+class StatusEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :icon, :text, :label, :group
+
+  expose :has_details?, as: :has_details
+  expose :details_path
+end
diff --git a/app/services/access_token_validation_service.rb b/app/services/access_token_validation_service.rb
new file mode 100644
index 00000000000..ddaaed90e5b
--- /dev/null
+++ b/app/services/access_token_validation_service.rb
@@ -0,0 +1,32 @@
+AccessTokenValidationService = Struct.new(:token) do
+  # Results:
+  VALID = :valid
+  EXPIRED = :expired
+  REVOKED = :revoked
+  INSUFFICIENT_SCOPE = :insufficient_scope
+
+  def validate(scopes: [])
+    if token.expired?
+      return EXPIRED
+
+    elsif token.revoked?
+      return REVOKED
+
+    elsif !self.include_any_scope?(scopes)
+      return INSUFFICIENT_SCOPE
+
+    else
+      return VALID
+    end
+  end
+
+  # True if the token's scope contains any of the passed scopes.
+  def include_any_scope?(scopes)
+    if scopes.blank?
+      true
+    else
+      # Check whether the token is allowed access to any of the required scopes.
+      Set.new(scopes).intersection(Set.new(token.scopes)).present?
+    end
+  end
+end
diff --git a/app/services/ci/create_pipeline_builds_service.rb b/app/services/ci/create_pipeline_builds_service.rb
index 005014fa1de..b7da3f8e7eb 100644
--- a/app/services/ci/create_pipeline_builds_service.rb
+++ b/app/services/ci/create_pipeline_builds_service.rb
@@ -10,18 +10,29 @@ module Ci
       end
     end
 
+    def project
+      pipeline.project
+    end
+
     private
 
     def create_build(build_attributes)
       build_attributes = build_attributes.merge(
         pipeline: pipeline,
-        project: pipeline.project,
+        project: project,
         ref: pipeline.ref,
         tag: pipeline.tag,
         user: current_user,
         trigger_request: trigger_request
       )
-      pipeline.builds.create(build_attributes)
+      build = pipeline.builds.create(build_attributes)
+
+      # Create the environment before the build starts. This sets its slug and
+      # makes it available as an environment variable
+      project.environments.find_or_create_by(name: build.expanded_environment_name) if
+        build.has_environment?
+
+      build
     end
 
     def new_builds
diff --git a/app/services/ci/image_for_build_service.rb b/app/services/ci/image_for_build_service.rb
index 75d847d5bee..240ddabec36 100644
--- a/app/services/ci/image_for_build_service.rb
+++ b/app/services/ci/image_for_build_service.rb
@@ -1,13 +1,13 @@
 module Ci
   class ImageForBuildService
     def execute(project, opts)
-      sha = opts[:sha] || ref_sha(project, opts[:ref])
-
+      ref = opts[:ref]
+      sha = opts[:sha] || ref_sha(project, ref)
       pipelines = project.pipelines.where(sha: sha)
-      pipelines = pipelines.where(ref: opts[:ref]) if opts[:ref]
-      image_name = image_for_status(pipelines.status)
 
+      image_name = image_for_status(pipelines.latest_status(ref))
       image_path = Rails.root.join('public/ci', image_name)
+
       OpenStruct.new(path: image_path, name: image_name)
     end
 
diff --git a/app/services/git_push_service.rb b/app/services/git_push_service.rb
index 185556c12cc..dbe2fda27b5 100644
--- a/app/services/git_push_service.rb
+++ b/app/services/git_push_service.rb
@@ -3,6 +3,9 @@ class GitPushService < BaseService
   include Gitlab::CurrentSettings
   include Gitlab::Access
 
+  # The N most recent commits to process in a single push payload.
+  PROCESS_COMMIT_LIMIT = 100
+
   # This method will be called after each git update
   # and only if the provided user and project are present in GitLab.
   #
@@ -74,7 +77,17 @@ class GitPushService < BaseService
       types = []
     end
 
-    ProjectCacheWorker.perform_async(@project.id, types)
+    ProjectCacheWorker.perform_async(@project.id, types, [:commit_count, :repository_size])
+  end
+
+  # Schedules processing of commit messages.
+  def process_commit_messages
+    default = is_default_branch?
+
+    push_commits.last(PROCESS_COMMIT_LIMIT).each do |commit|
+      ProcessCommitWorker.
+        perform_async(project.id, current_user.id, commit.to_hash, default)
+    end
   end
 
   protected
@@ -128,17 +141,6 @@ class GitPushService < BaseService
     end
   end
 
-  # Extract any GFM references from the pushed commit messages. If the configured issue-closing regex is matched,
-  # close the referenced Issue. Create cross-reference Notes corresponding to any other referenced Mentionables.
-  def process_commit_messages
-    default = is_default_branch?
-
-    @push_commits.each do |commit|
-      ProcessCommitWorker.
-        perform_async(project.id, current_user.id, commit.to_hash, default)
-    end
-  end
-
   def build_push_data
     @push_data ||= Gitlab::DataBuilder::Push.build(
       @project,
diff --git a/app/services/git_tag_push_service.rb b/app/services/git_tag_push_service.rb
index 20a4445bddf..96432837481 100644
--- a/app/services/git_tag_push_service.rb
+++ b/app/services/git_tag_push_service.rb
@@ -12,7 +12,7 @@ class GitTagPushService < BaseService
     project.execute_hooks(@push_data.dup, :tag_push_hooks)
     project.execute_services(@push_data.dup, :tag_push_hooks)
     Ci::CreatePipelineService.new(project, current_user, @push_data).execute
-    ProjectCacheWorker.perform_async(project.id)
+    ProjectCacheWorker.perform_async(project.id, [], [:commit_count, :repository_size])
 
     true
   end
diff --git a/app/services/groups/create_service.rb b/app/services/groups/create_service.rb
index 2bccd584dde..febeb661fb5 100644
--- a/app/services/groups/create_service.rb
+++ b/app/services/groups/create_service.rb
@@ -12,6 +12,13 @@ module Groups
         return @group
       end
 
+      if @group.parent && !can?(current_user, :admin_group, @group.parent)
+        @group.parent = nil
+        @group.errors.add(:parent_id, 'manage access required to create subgroup')
+
+        return @group
+      end
+
       @group.name ||= @group.path.dup
       @group.save
       @group.add_owner(current_user)
diff --git a/app/services/groups/update_service.rb b/app/services/groups/update_service.rb
index 99ad12b1003..4e878ec556a 100644
--- a/app/services/groups/update_service.rb
+++ b/app/services/groups/update_service.rb
@@ -5,7 +5,7 @@ module Groups
       new_visibility = params[:visibility_level]
       if new_visibility && new_visibility.to_i != group.visibility_level
         unless can?(current_user, :change_visibility_level, group) &&
-          Gitlab::VisibilityLevel.allowed_for?(current_user, new_visibility)
+            Gitlab::VisibilityLevel.allowed_for?(current_user, new_visibility)
 
           deny_visibility_level(group, new_visibility)
           return group
@@ -14,7 +14,13 @@ module Groups
 
       group.assign_attributes(params)
 
-      group.save
+      begin
+        group.save
+      rescue Gitlab::UpdatePathError => e
+        group.errors.add(:base, e.message)
+
+        false
+      end
     end
   end
 end
diff --git a/app/services/issuable_base_service.rb b/app/services/issuable_base_service.rb
index b5f63cc5a1a..5f3ced49665 100644
--- a/app/services/issuable_base_service.rb
+++ b/app/services/issuable_base_service.rb
@@ -36,14 +36,18 @@ class IssuableBaseService < BaseService
     end
   end
 
-  def filter_params(issuable_ability_name = :issue)
-    filter_assignee
-    filter_milestone
-    filter_labels
+  def create_time_estimate_note(issuable)
+    SystemNoteService.change_time_estimate(issuable, issuable.project, current_user)
+  end
 
-    ability = :"admin_#{issuable_ability_name}"
+  def create_time_spent_note(issuable)
+    SystemNoteService.change_time_spent(issuable, issuable.project, current_user)
+  end
+
+  def filter_params(issuable)
+    ability_name = :"admin_#{issuable.to_ability_name}"
 
-    unless can?(current_user, ability, project)
+    unless can?(current_user, ability_name, project)
       params.delete(:milestone_id)
       params.delete(:labels)
       params.delete(:add_label_ids)
@@ -52,14 +56,35 @@ class IssuableBaseService < BaseService
       params.delete(:assignee_id)
       params.delete(:due_date)
     end
+
+    filter_assignee(issuable)
+    filter_milestone
+    filter_labels
   end
 
-  def filter_assignee
-    if params[:assignee_id] == IssuableFinder::NONE
-      params[:assignee_id] = ''
+  def filter_assignee(issuable)
+    return unless params[:assignee_id].present?
+
+    assignee_id = params[:assignee_id]
+
+    if assignee_id.to_s == IssuableFinder::NONE
+      params[:assignee_id] = ""
+    else
+      params.delete(:assignee_id) unless assignee_can_read?(issuable, assignee_id)
     end
   end
 
+  def assignee_can_read?(issuable, assignee_id)
+    new_assignee = User.find_by_id(assignee_id)
+
+    return false unless new_assignee.present?
+
+    ability_name = :"read_#{issuable.to_ability_name}"
+    resource     = issuable.persisted? ? issuable : project
+
+    can?(new_assignee, ability_name, resource)
+  end
+
   def filter_milestone
     milestone_id = params[:milestone_id]
     return unless milestone_id
@@ -138,7 +163,7 @@ class IssuableBaseService < BaseService
 
   def create(issuable)
     merge_slash_commands_into_params!(issuable)
-    filter_params
+    filter_params(issuable)
 
     params.delete(:state_event)
     params[:author] ||= current_user
@@ -180,11 +205,12 @@ class IssuableBaseService < BaseService
     change_state(issuable)
     change_subscription(issuable)
     change_todo(issuable)
-    filter_params
+    filter_params(issuable)
     old_labels = issuable.labels.to_a
     old_mentioned_users = issuable.mentioned_users.to_a
 
-    params[:label_ids] = process_label_ids(params, existing_label_ids: issuable.label_ids)
+    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 params.present? && update_issuable(issuable, params)
       # We do not touch as it will affect a update on updated_at field
@@ -201,6 +227,10 @@ class IssuableBaseService < BaseService
     issuable
   end
 
+  def labels_changing?(old_label_ids, new_label_ids)
+    old_label_ids.sort != new_label_ids.sort
+  end
+
   def change_state(issuable)
     case params.delete(:state_event)
     when 'reopen'
@@ -250,6 +280,14 @@ class IssuableBaseService < BaseService
       create_task_status_note(issuable)
     end
 
+    if issuable.previous_changes.include?('time_estimate')
+      create_time_estimate_note(issuable)
+    end
+
+    if issuable.time_spent?
+      create_time_spent_note(issuable)
+    end
+
     create_labels_note(issuable, old_labels) if issuable.labels != old_labels
   end
 end
diff --git a/app/services/issues/base_service.rb b/app/services/issues/base_service.rb
index 742e834df97..35af867a098 100644
--- a/app/services/issues/base_service.rb
+++ b/app/services/issues/base_service.rb
@@ -17,10 +17,6 @@ module Issues
 
     private
 
-    def filter_params
-      super(:issue)
-    end
-
     def execute_hooks(issue, action = 'open')
       issue_data  = hook_data(issue, action)
       hooks_scope = issue.confidential? ? :confidential_issue_hooks : :issue_hooks
diff --git a/app/services/issues/update_service.rb b/app/services/issues/update_service.rb
index a2111b3806b..78cbf94ec69 100644
--- a/app/services/issues/update_service.rb
+++ b/app/services/issues/update_service.rb
@@ -10,7 +10,7 @@ module Issues
       end
 
       if issue.previous_changes.include?('title') ||
-         issue.previous_changes.include?('description')
+          issue.previous_changes.include?('description')
         todo_service.update_issue(issue, current_user)
       end
 
diff --git a/app/services/merge_requests/base_service.rb b/app/services/merge_requests/base_service.rb
index 800fd39c424..70e25956dc7 100644
--- a/app/services/merge_requests/base_service.rb
+++ b/app/services/merge_requests/base_service.rb
@@ -38,10 +38,6 @@ module MergeRequests
 
     private
 
-    def filter_params
-      super(:merge_request)
-    end
-
     def merge_requests_for(branch)
       origin_merge_requests = @project.origin_merge_requests
         .opened.where(source_branch: branch).to_a
diff --git a/app/services/merge_requests/build_service.rb b/app/services/merge_requests/build_service.rb
index bebfca7537b..6a7393a9921 100644
--- a/app/services/merge_requests/build_service.rb
+++ b/app/services/merge_requests/build_service.rb
@@ -42,7 +42,7 @@ module MergeRequests
       end
 
       if merge_request.source_project == merge_request.target_project &&
-         merge_request.target_branch == merge_request.source_branch
+          merge_request.target_branch == merge_request.source_branch
 
         messages << 'You must select different branches'
       end
diff --git a/app/services/merge_requests/update_service.rb b/app/services/merge_requests/update_service.rb
index fda0da19d87..3cb9aae83f6 100644
--- a/app/services/merge_requests/update_service.rb
+++ b/app/services/merge_requests/update_service.rb
@@ -7,6 +7,8 @@ module MergeRequests
       params.except!(:target_project_id)
       params.except!(:source_branch)
 
+      merge_from_slash_command(merge_request) if params[:merge]
+
       if merge_request.closed_without_fork?
         params.except!(:target_branch, :force_remove_source_branch)
       end
@@ -25,7 +27,7 @@ module MergeRequests
       end
 
       if merge_request.previous_changes.include?('title') ||
-         merge_request.previous_changes.include?('description')
+          merge_request.previous_changes.include?('description')
         todo_service.update_merge_request(merge_request, current_user)
       end
 
@@ -69,6 +71,19 @@ module MergeRequests
       end
     end
 
+    def merge_from_slash_command(merge_request)
+      last_diff_sha = params.delete(:merge)
+      return unless merge_request.mergeable_with_slash_command?(current_user, last_diff_sha: last_diff_sha)
+
+      merge_request.update(merge_error: nil)
+
+      if merge_request.head_pipeline && merge_request.head_pipeline.active?
+        MergeRequests::MergeWhenPipelineSucceedsService.new(project, current_user).execute(merge_request)
+      else
+        MergeWorker.perform_async(merge_request.id, current_user.id, {})
+      end
+    end
+
     def reopen_service
       MergeRequests::ReopenService
     end
diff --git a/app/services/notes/create_service.rb b/app/services/notes/create_service.rb
index d75592e31f3..cdd765c85eb 100644
--- a/app/services/notes/create_service.rb
+++ b/app/services/notes/create_service.rb
@@ -1,6 +1,8 @@
 module Notes
   class CreateService < BaseService
     def execute
+      merge_request_diff_head_sha = params.delete(:merge_request_diff_head_sha)
+
       note = project.notes.new(params)
       note.author = current_user
       note.system = false
@@ -19,7 +21,8 @@ module Notes
       slash_commands_service = SlashCommandsService.new(project, current_user)
 
       if slash_commands_service.supported?(note)
-        content, command_params = slash_commands_service.extract_commands(note)
+        options = { merge_request_diff_head_sha: merge_request_diff_head_sha }
+        content, command_params = slash_commands_service.extract_commands(note, options)
 
         only_commands = content.empty?
 
@@ -41,7 +44,7 @@ module Notes
         # We must add the error after we call #save because errors are reset
         # when #save is called
         if only_commands
-          note.errors.add(:commands_only, 'Your commands have been executed!')
+          note.errors.add(:commands_only, 'Commands applied')
         end
 
         note.commands_changes = command_params.keys
diff --git a/app/services/notes/slash_commands_service.rb b/app/services/notes/slash_commands_service.rb
index 2edbd39a9e7..aaea9717fc4 100644
--- a/app/services/notes/slash_commands_service.rb
+++ b/app/services/notes/slash_commands_service.rb
@@ -19,10 +19,10 @@ module Notes
       self.class.supported?(note, current_user)
     end
 
-    def extract_commands(note)
+    def extract_commands(note, options = {})
       return [note.note, {}] unless supported?(note)
 
-      SlashCommands::InterpretService.new(project, current_user).
+      SlashCommands::InterpretService.new(project, current_user, options).
         execute(note.note, note.noteable)
     end
 
diff --git a/app/services/notification_service.rb b/app/services/notification_service.rb
index 9a7af5730d2..c3b61e68eab 100644
--- a/app/services/notification_service.rb
+++ b/app/services/notification_service.rb
@@ -591,7 +591,10 @@ class NotificationService
     custom_action = build_custom_key(action, target)
 
     recipients = target.participants(current_user)
-    recipients = add_project_watchers(recipients, project)
+
+    unless NotificationSetting::EXCLUDED_WATCHER_EVENTS.include?(custom_action)
+      recipients = add_project_watchers(recipients, project)
+    end
 
     recipients = add_custom_notifications(recipients, project, custom_action)
     recipients = reject_mention_users(recipients, project)
diff --git a/app/services/oauth2/access_token_validation_service.rb b/app/services/oauth2/access_token_validation_service.rb
deleted file mode 100644
index 264fdccde8f..00000000000
--- a/app/services/oauth2/access_token_validation_service.rb
+++ /dev/null
@@ -1,42 +0,0 @@
-module Oauth2::AccessTokenValidationService
-  # Results:
-  VALID = :valid
-  EXPIRED = :expired
-  REVOKED = :revoked
-  INSUFFICIENT_SCOPE = :insufficient_scope
-
-  class << self
-    def validate(token, scopes: [])
-      if token.expired?
-        return EXPIRED
-
-      elsif token.revoked?
-        return REVOKED
-
-      elsif !self.sufficient_scope?(token, scopes)
-        return INSUFFICIENT_SCOPE
-
-      else
-        return VALID
-      end
-    end
-
-    protected
-
-    # True if the token's scope is a superset of required scopes,
-    # or the required scopes is empty.
-    def sufficient_scope?(token, scopes)
-      if scopes.blank?
-        # if no any scopes required, the scopes of token is sufficient.
-        return true
-      else
-        # If there are scopes required, then check whether
-        # the set of authorized scopes is a superset of the set of required scopes
-        required_scopes = Set.new(scopes)
-        authorized_scopes = Set.new(token.scopes)
-
-        return authorized_scopes >= required_scopes
-      end
-    end
-  end
-end
diff --git a/app/services/projects/import_service.rb b/app/services/projects/import_service.rb
index d7221fe993c..cd230528743 100644
--- a/app/services/projects/import_service.rb
+++ b/app/services/projects/import_service.rb
@@ -4,15 +4,6 @@ module Projects
 
     class Error < StandardError; end
 
-    ALLOWED_TYPES = [
-      'bitbucket',
-      'fogbugz',
-      'gitlab',
-      'github',
-      'google_code',
-      'gitlab_project'
-    ]
-
     def execute
       add_repository_to_project unless project.gitlab_project_import?
 
@@ -64,14 +55,11 @@ module Projects
     end
 
     def has_importer?
-      ALLOWED_TYPES.include?(project.import_type)
+      Gitlab::ImportSources.importer_names.include?(project.import_type)
     end
 
     def importer
-      return Gitlab::ImportExport::Importer.new(project) if @project.gitlab_project_import?
-
-      class_name = "Gitlab::#{project.import_type.camelize}Import::Importer"
-      class_name.constantize.new(project)
+      Gitlab::ImportSources.importer(project.import_type).new(project)
     end
 
     def unknown_url?
diff --git a/app/services/projects/participants_service.rb b/app/services/projects/participants_service.rb
index 6040391fd94..96c363c8d1a 100644
--- a/app/services/projects/participants_service.rb
+++ b/app/services/projects/participants_service.rb
@@ -36,7 +36,7 @@ module Projects
     def groups
       current_user.authorized_groups.sort_by(&:path).map do |group|
         count = group.users.count
-        { username: group.path, name: group.name, count: count, avatar_url: group.avatar.url }
+        { username: group.path, name: group.name, count: count, avatar_url: group.avatar_url }
       end
     end
 
diff --git a/app/services/projects/update_service.rb b/app/services/projects/update_service.rb
index 921ca6748d3..842e23eb6b6 100644
--- a/app/services/projects/update_service.rb
+++ b/app/services/projects/update_service.rb
@@ -6,10 +6,10 @@ module Projects
 
       if new_visibility && new_visibility.to_i != project.visibility_level
         unless can?(current_user, :change_visibility_level, project) &&
-          Gitlab::VisibilityLevel.allowed_for?(current_user, new_visibility)
+            Gitlab::VisibilityLevel.allowed_for?(current_user, new_visibility)
 
           deny_visibility_level(project, new_visibility)
-          return project
+          return error('Visibility level unallowed')
         end
       end
 
@@ -23,6 +23,10 @@ module Projects
         if project.previous_changes.include?('path')
           project.rename_repo
         end
+
+        success
+      else
+        error('Project could not be updated')
       end
     end
   end
diff --git a/app/services/slash_commands/interpret_service.rb b/app/services/slash_commands/interpret_service.rb
index d75c5b1800e..3566a8ba92f 100644
--- a/app/services/slash_commands/interpret_service.rb
+++ b/app/services/slash_commands/interpret_service.rb
@@ -2,7 +2,7 @@ module SlashCommands
   class InterpretService < BaseService
     include Gitlab::SlashCommands::Dsl
 
-    attr_reader :issuable
+    attr_reader :issuable, :options
 
     # Takes a text and interprets the commands that are extracted from it.
     # Returns the content without commands, and hash of changes to be applied to a record.
@@ -13,7 +13,8 @@ module SlashCommands
       opts = {
         issuable:     issuable,
         current_user: current_user,
-        project:      project
+        project:      project,
+        params:       params
       }
 
       content, commands = extractor.extract_commands(content, opts)
@@ -58,6 +59,17 @@ module SlashCommands
       @updates[:state_event] = 'reopen'
     end
 
+    desc 'Merge (when build succeeds)'
+    condition do
+      last_diff_sha = params && params[:merge_request_diff_head_sha]
+      issuable.is_a?(MergeRequest) &&
+        issuable.persisted? &&
+        issuable.mergeable_with_slash_command?(current_user, autocomplete_precheck: !last_diff_sha, last_diff_sha: last_diff_sha)
+    end
+    command :merge do
+      @updates[:merge] = params[:merge_request_diff_head_sha]
+    end
+
     desc 'Change title'
     params '<New title>'
     condition do
@@ -243,6 +255,50 @@ module SlashCommands
       @updates[:wip_event] = issuable.work_in_progress? ? 'unwip' : 'wip'
     end
 
+    desc 'Set time estimate'
+    params '<1w 3d 2h 14m>'
+    condition do
+      current_user.can?(:"admin_#{issuable.to_ability_name}", project)
+    end
+    command :estimate do |raw_duration|
+      time_estimate = Gitlab::TimeTrackingFormatter.parse(raw_duration)
+
+      if time_estimate
+        @updates[:time_estimate] = time_estimate
+      end
+    end
+
+    desc 'Add or substract spent time'
+    params '<1h 30m | -1h 30m>'
+    condition do
+      current_user.can?(:"admin_#{issuable.to_ability_name}", issuable)
+    end
+    command :spend do |raw_duration|
+      time_spent = Gitlab::TimeTrackingFormatter.parse(raw_duration)
+
+      if time_spent
+        @updates[:spend_time] = { duration: time_spent, user: current_user }
+      end
+    end
+
+    desc 'Remove time estimate'
+    condition do
+      issuable.persisted? &&
+        current_user.can?(:"admin_#{issuable.to_ability_name}", project)
+    end
+    command :remove_estimate do
+      @updates[:time_estimate] = 0
+    end
+
+    desc 'Remove spent time'
+    condition do
+      issuable.persisted? &&
+        current_user.can?(:"admin_#{issuable.to_ability_name}", project)
+    end
+    command :remove_time_spent do
+      @updates[:spend_time] = { duration: :reset, user: current_user }
+    end
+
     # This is a dummy command, so that it appears in the autocomplete commands
     desc 'CC'
     params '@user'
diff --git a/app/services/system_note_service.rb b/app/services/system_note_service.rb
index 8b48d90f60b..5ca2551ee61 100644
--- a/app/services/system_note_service.rb
+++ b/app/services/system_note_service.rb
@@ -109,6 +109,57 @@ module SystemNoteService
     create_note(noteable: noteable, project: project, author: author, note: body)
   end
 
+  # Called when the estimated time of a Noteable is changed
+  #
+  # noteable      - Noteable object
+  # project       - Project owning noteable
+  # author        - User performing the change
+  # time_estimate - Estimated time
+  #
+  # Example Note text:
+  #
+  #   "Changed estimate of this issue to 3d 5h"
+  #
+  # Returns the created Note object
+
+  def change_time_estimate(noteable, project, author)
+    parsed_time = Gitlab::TimeTrackingFormatter.output(noteable.time_estimate)
+    body = if noteable.time_estimate == 0
+             "Removed time estimate on this #{noteable.human_class_name}"
+           else
+             "Changed time estimate of this #{noteable.human_class_name} to #{parsed_time}"
+           end
+
+    create_note(noteable: noteable, project: project, author: author, note: body)
+  end
+
+  # Called when the spent time of a Noteable is changed
+  #
+  # noteable   - Noteable object
+  # project    - Project owning noteable
+  # author     - User performing the change
+  # time_spent - Spent time
+  #
+  # Example Note text:
+  #
+  #   "Added 2h 30m of time spent on this issue"
+  #
+  # Returns the created Note object
+
+  def change_time_spent(noteable, project, author)
+    time_spent = noteable.time_spent
+
+    if time_spent == :reset
+      body = "Removed time spent on this #{noteable.human_class_name}"
+    else
+      parsed_time = Gitlab::TimeTrackingFormatter.output(time_spent.abs)
+      action = time_spent > 0 ? 'Added' : 'Subtracted'
+      body = "#{action} #{parsed_time} of time spent on this #{noteable.human_class_name}"
+    end
+
+    create_note(noteable: noteable, project: project, author: author, note: body)
+  end
+
   # Called when the status of a Noteable is changed
   #
   # noteable - Noteable object
@@ -146,7 +197,7 @@ module SystemNoteService
   end
 
   def remove_merge_request_wip(noteable, project, author)
-    body = 'unmarked as a Work In Progress'
+    body = 'unmarked as a **Work In Progress**'
 
     create_note(noteable: noteable, project: project, author: author, note: body)
   end
diff --git a/app/services/users/refresh_authorized_projects_service.rb b/app/services/users/refresh_authorized_projects_service.rb
new file mode 100644
index 00000000000..2d211d5ebbe
--- /dev/null
+++ b/app/services/users/refresh_authorized_projects_service.rb
@@ -0,0 +1,127 @@
+module Users
+  # Service for refreshing the authorized projects of a user.
+  #
+  # This particular service class can not be used to update data for the same
+  # user concurrently. Doing so could lead to an incorrect state. To ensure this
+  # doesn't happen a caller must synchronize access (e.g. using
+  # `Gitlab::ExclusiveLease`).
+  #
+  # Usage:
+  #
+  #     user = User.find_by(username: 'alice')
+  #     service = Users::RefreshAuthorizedProjectsService.new(some_user)
+  #     service.execute
+  class RefreshAuthorizedProjectsService
+    attr_reader :user
+
+    LEASE_TIMEOUT = 1.minute.to_i
+
+    # user - The User for which to refresh the authorized projects.
+    def initialize(user)
+      @user = user
+
+      # We need an up to date User object that has access to all relations that
+      # may have been created earlier. The only way to ensure this is to reload
+      # the User object.
+      user.reload
+    end
+
+    def execute
+      lease_key = "refresh_authorized_projects:#{user.id}"
+      lease = Gitlab::ExclusiveLease.new(lease_key, timeout: LEASE_TIMEOUT)
+
+      until uuid = lease.try_obtain
+        # Keep trying until we obtain the lease. If we don't do so we may end up
+        # not updating the list of authorized projects properly. To prevent
+        # hammering Redis too much we'll wait for a bit between retries.
+        sleep(1)
+      end
+
+      begin
+        execute_without_lease
+      ensure
+        Gitlab::ExclusiveLease.cancel(lease_key, uuid)
+      end
+    end
+
+    # This method returns the updated User object.
+    def execute_without_lease
+      current = current_authorizations_per_project
+      fresh = fresh_access_levels_per_project
+
+      remove = current.each_with_object([]) do |(project_id, row), array|
+        # rows not in the new list or with a different access level should be
+        # removed.
+        if !fresh[project_id] || fresh[project_id] != row.access_level
+          array << row.project_id
+        end
+      end
+
+      add = fresh.each_with_object([]) do |(project_id, level), array|
+        # rows not in the old list or with a different access level should be
+        # added.
+        if !current[project_id] || current[project_id].access_level != level
+          array << [user.id, project_id, level]
+        end
+      end
+
+      update_authorizations(remove, add)
+    end
+
+    # Updates the list of authorizations for the current user.
+    #
+    # remove - The IDs of the authorization rows to remove.
+    # add - Rows to insert in the form `[user id, project id, access level]`
+    def update_authorizations(remove = [], add = [])
+      return if remove.empty? && add.empty? && user.authorized_projects_populated
+
+      User.transaction do
+        user.remove_project_authorizations(remove) unless remove.empty?
+        ProjectAuthorization.insert_authorizations(add) unless add.empty?
+        user.set_authorized_projects_column
+      end
+
+      # Since we batch insert authorization rows, Rails' associations may get
+      # out of sync. As such we force a reload of the User object.
+      user.reload
+    end
+
+    def fresh_access_levels_per_project
+      fresh_authorizations.each_with_object({}) do |row, hash|
+        hash[row.project_id] = row.access_level
+      end
+    end
+
+    def current_authorizations_per_project
+      current_authorizations.each_with_object({}) do |row, hash|
+        hash[row.project_id] = row
+      end
+    end
+
+    def current_authorizations
+      user.project_authorizations.select(:project_id, :access_level)
+    end
+
+    def fresh_authorizations
+      ProjectAuthorization.
+        unscoped.
+        select('project_id, MAX(access_level) AS access_level').
+        from("(#{project_authorizations_union.to_sql}) #{ProjectAuthorization.table_name}").
+        group(:project_id)
+    end
+
+    private
+
+    # Returns a union query of projects that the user is authorized to access
+    def project_authorizations_union
+      relations = [
+        user.personal_projects.select("#{user.id} AS user_id, projects.id AS project_id, #{Gitlab::Access::MASTER} AS access_level"),
+        user.groups_projects.select_for_project_authorization,
+        user.projects.select_for_project_authorization,
+        user.groups.joins(:shared_projects).select_for_project_authorization
+      ]
+
+      Gitlab::SQL::Union.new(relations)
+    end
+  end
+end
diff --git a/app/uploaders/artifact_uploader.rb b/app/uploaders/artifact_uploader.rb
index b6c52ddac7a..86f317dcd18 100644
--- a/app/uploaders/artifact_uploader.rb
+++ b/app/uploaders/artifact_uploader.rb
@@ -1,4 +1,4 @@
-class ArtifactUploader < CarrierWave::Uploader::Base
+class ArtifactUploader < GitlabUploader
   storage :file
 
   attr_accessor :build, :field
@@ -38,12 +38,4 @@ class ArtifactUploader < CarrierWave::Uploader::Base
   def exists?
     file.try(:exists?)
   end
-
-  def move_to_cache
-    true
-  end
-
-  def move_to_store
-    true
-  end
 end
diff --git a/app/uploaders/attachment_uploader.rb b/app/uploaders/attachment_uploader.rb
index fb3b5dfecd0..cfcb877cc3e 100644
--- a/app/uploaders/attachment_uploader.rb
+++ b/app/uploaders/attachment_uploader.rb
@@ -1,4 +1,4 @@
-class AttachmentUploader < CarrierWave::Uploader::Base
+class AttachmentUploader < GitlabUploader
   include UploaderHelper
 
   storage :file
diff --git a/app/uploaders/avatar_uploader.rb b/app/uploaders/avatar_uploader.rb
index 38683fdf6d7..265cea2d2c6 100644
--- a/app/uploaders/avatar_uploader.rb
+++ b/app/uploaders/avatar_uploader.rb
@@ -1,4 +1,4 @@
-class AvatarUploader < CarrierWave::Uploader::Base
+class AvatarUploader < GitlabUploader
   include UploaderHelper
 
   storage :file
@@ -10,4 +10,15 @@ class AvatarUploader < CarrierWave::Uploader::Base
   def exists?
     model.avatar.file && model.avatar.file.exists?
   end
+
+  # We set move_to_store and move_to_cache to 'false' to prevent stealing
+  # the avatar file from a project when forking it.
+  # https://gitlab.com/gitlab-org/gitlab-ce/issues/26158
+  def move_to_store
+    false
+  end
+
+  def move_to_cache
+    false
+  end
 end
diff --git a/app/uploaders/file_uploader.rb b/app/uploaders/file_uploader.rb
index 3ac6030c21c..47bef7cd1e4 100644
--- a/app/uploaders/file_uploader.rb
+++ b/app/uploaders/file_uploader.rb
@@ -1,4 +1,4 @@
-class FileUploader < CarrierWave::Uploader::Base
+class FileUploader < GitlabUploader
   include UploaderHelper
   MARKDOWN_PATTERN = %r{\!?\[.*?\]\(/uploads/(?<secret>[0-9a-f]{32})/(?<file>.*?)\)}
 
diff --git a/app/uploaders/gitlab_uploader.rb b/app/uploaders/gitlab_uploader.rb
new file mode 100644
index 00000000000..02d7c601d6c
--- /dev/null
+++ b/app/uploaders/gitlab_uploader.rb
@@ -0,0 +1,11 @@
+class GitlabUploader < CarrierWave::Uploader::Base
+  # Reduce disk IO
+  def move_to_cache
+    true
+  end
+
+  # Reduce disk IO
+  def move_to_store
+    true
+  end
+end
diff --git a/app/uploaders/lfs_object_uploader.rb b/app/uploaders/lfs_object_uploader.rb
index 4f356dd663e..faab539b8e0 100644
--- a/app/uploaders/lfs_object_uploader.rb
+++ b/app/uploaders/lfs_object_uploader.rb
@@ -1,4 +1,4 @@
-class LfsObjectUploader < CarrierWave::Uploader::Base
+class LfsObjectUploader < GitlabUploader
   storage :file
 
   def store_dir
@@ -9,14 +9,6 @@ class LfsObjectUploader < CarrierWave::Uploader::Base
     "#{Gitlab.config.lfs.storage_path}/tmp/cache"
   end
 
-  def move_to_cache
-    true
-  end
-
-  def move_to_store
-    true
-  end
-
   def exists?
     file.try(:exists?)
   end
diff --git a/app/validators/project_path_validator.rb b/app/validators/project_path_validator.rb
index 927c67b65b0..36279daa743 100644
--- a/app/validators/project_path_validator.rb
+++ b/app/validators/project_path_validator.rb
@@ -14,7 +14,8 @@ class ProjectPathValidator < ActiveModel::EachValidator
   #  without tree as reserved name routing can match 'group/project' as group name,
   #  'tree' as project name and 'deploy_keys' as route.
   #
-  RESERVED = (NamespaceValidator::RESERVED +
+  RESERVED = (NamespaceValidator::RESERVED -
+              %w[dashboard help ci admin search notes services assets profile public] +
               %w[tree commits wikis new edit create update logs_tree
                  preview blob blame raw files create_dir find_file]).freeze
 
diff --git a/app/views/abuse_report_mailer/notify.html.haml b/app/views/abuse_report_mailer/notify.html.haml
index 2741eb44357..d50b4071745 100644
--- a/app/views/abuse_report_mailer/notify.html.haml
+++ b/app/views/abuse_report_mailer/notify.html.haml
@@ -1,7 +1,7 @@
 %p
-  #{link_to @abuse_report.user.name, user_url(@abuse_report.user)} 
-  (@#{@abuse_report.user.username}) was reported for abuse by 
-  #{link_to @abuse_report.reporter.name, user_url(@abuse_report.reporter)} 
+  #{link_to @abuse_report.user.name, user_url(@abuse_report.user)}
+  (@#{@abuse_report.user.username}) was reported for abuse by
+  #{link_to @abuse_report.reporter.name, user_url(@abuse_report.reporter)}
   (@#{@abuse_report.reporter.username}).
 
 %blockquote
diff --git a/app/views/admin/application_settings/_form.html.haml b/app/views/admin/application_settings/_form.html.haml
index 7accd2529af..558bbe07b16 100644
--- a/app/views/admin/application_settings/_form.html.haml
+++ b/app/views/admin/application_settings/_form.html.haml
@@ -321,7 +321,7 @@
         = 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
+          %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'
@@ -342,7 +342,7 @@
         = 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
+          %a{ href: 'http://www.akismet.com', target: 'blank' } http://www.akismet.com
 
   %fieldset
     %legend Abuse reports
@@ -421,6 +421,23 @@
             = 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
     .form-group
       .col-sm-offset-2.col-sm-10
diff --git a/app/views/admin/applications/_delete_form.html.haml b/app/views/admin/applications/_delete_form.html.haml
index 042971e1eed..82781f6716d 100644
--- a/app/views/admin/applications/_delete_form.html.haml
+++ b/app/views/admin/applications/_delete_form.html.haml
@@ -1,4 +1,4 @@
 - submit_btn_css ||= 'btn btn-link btn-remove btn-sm'
 = form_tag admin_application_path(application) do
-  %input{:name => "_method", :type => "hidden", :value => "delete"}/
+  %input{ :name => "_method", :type => "hidden", :value => "delete" }/
   = submit_tag 'Destroy', onclick: "return confirm('Are you sure?')", class: submit_btn_css
diff --git a/app/views/admin/applications/_form.html.haml b/app/views/admin/applications/_form.html.haml
index 4aacbb8cd77..c689b26d6e6 100644
--- a/app/views/admin/applications/_form.html.haml
+++ b/app/views/admin/applications/_form.html.haml
@@ -18,6 +18,12 @@
           Use
           %code= Doorkeeper.configuration.native_redirect_uri
           for local tests
+
+  .form-group
+    = f.label :scopes, class: 'col-sm-2 control-label'
+    .col-sm-10
+      = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes
+
   .form-actions
     = f.submit 'Submit', class: "btn btn-save wide"
     = link_to "Cancel", admin_applications_path, class: "btn btn-default"
diff --git a/app/views/admin/applications/index.html.haml b/app/views/admin/applications/index.html.haml
index f8cd98f0ec4..b3a3b4c1d45 100644
--- a/app/views/admin/applications/index.html.haml
+++ b/app/views/admin/applications/index.html.haml
@@ -15,7 +15,7 @@
       %th
   %tbody.oauth-applications
     - @applications.each do |application|
-      %tr{:id => "application_#{application.id}"}
+      %tr{ :id => "application_#{application.id}" }
         %td= link_to application.name, admin_application_path(application)
         %td= application.redirect_uri
         %td= application.access_tokens.map(&:resource_owner_id).uniq.count
diff --git a/app/views/admin/applications/show.html.haml b/app/views/admin/applications/show.html.haml
index 3eb9d61972b..14683cc66e9 100644
--- a/app/views/admin/applications/show.html.haml
+++ b/app/views/admin/applications/show.html.haml
@@ -2,8 +2,7 @@
 %h3.page-title
   Application: #{@application.name}
 
-
-.table-holder
+.table-holder.oauth-application-show
   %table.table
     %tr
       %td
@@ -23,6 +22,9 @@
         - @application.redirect_uri.split.each do |uri|
           %div
             %span.monospace= uri
+
+    = render "shared/tokens/scopes_list", token: @application
+
 .form-actions
   = link_to 'Edit', edit_admin_application_path(@application), class: 'btn btn-primary wide pull-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 05855db963a..4f982a6e369 100644
--- a/app/views/admin/background_jobs/show.html.haml
+++ b/app/views/admin/background_jobs/show.html.haml
@@ -43,4 +43,4 @@
 
 
   .panel.panel-default
-    %iframe{src: sidekiq_path, width: '100%', height: 970, style: "border: none"}
+    %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: none" }
diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index c05538a393c..4f2ae081d7a 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -10,7 +10,7 @@
 
 %br.clearfix
 
--if @broadcast_messages.any?
+- if @broadcast_messages.any?
   %table.table
     %thead
       %tr
diff --git a/app/views/admin/dashboard/_head.html.haml b/app/views/admin/dashboard/_head.html.haml
index ec40391a3e3..b5f96363230 100644
--- a/app/views/admin/dashboard/_head.html.haml
+++ b/app/views/admin/dashboard/_head.html.haml
@@ -8,7 +8,7 @@
             %span
               Overview
         = nav_link(controller: [:admin, :projects]) do
-          = link_to admin_namespaces_projects_path, title: 'Projects' do
+          = link_to admin_projects_path, title: 'Projects' do
             %span
               Projects
         = nav_link(controller: :users) do
diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml
index e51f4ac1d93..5238623e936 100644
--- a/app/views/admin/dashboard/index.html.haml
+++ b/app/views/admin/dashboard/index.html.haml
@@ -116,7 +116,7 @@
         .light-well.well-centered
           %h4 Projects
           .data
-            = link_to admin_namespaces_projects_path do
+            = link_to admin_projects_path do
               %h1= number_with_delimiter(Project.cached_count)
             %hr
             = link_to('New Project', new_project_path, class: "btn btn-new")
diff --git a/app/views/admin/deploy_keys/index.html.haml b/app/views/admin/deploy_keys/index.html.haml
index 149593e7f46..7b71bb5b287 100644
--- a/app/views/admin/deploy_keys/index.html.haml
+++ b/app/views/admin/deploy_keys/index.html.haml
@@ -1,27 +1,34 @@
 - page_title "Deploy Keys"
-.panel.panel-default.prepend-top-default
-  .panel-heading
-    Public deploy keys (#{@deploy_keys.count})
-    .controls
-      = link_to 'New Deploy Key', new_admin_deploy_key_path, class: "btn btn-new btn-sm"
-  - if @deploy_keys.any?
-    .table-holder
-      %table.table
-        %thead.panel-heading
+
+%h3.page-title.deploy-keys-title
+  Public deploy keys (#{@deploy_keys.count})
+  .pull-right
+    = link_to 'New Deploy Key', new_admin_deploy_key_path, class: 'btn btn-new btn-sm btn-inverted'
+
+- if @deploy_keys.any?
+  .table-holder.deploy-keys-list
+    %table.table
+      %thead
+        %tr
+          %th.col-sm-2 Title
+          %th.col-sm-4 Fingerprint
+          %th.col-sm-2 Write access allowed
+          %th.col-sm-2 Added at
+          %th.col-sm-2
+      %tbody
+        - @deploy_keys.each do |deploy_key|
           %tr
-            %th Title
-            %th Fingerprint
-            %th Added at
-            %th
-        %tbody
-          - @deploy_keys.each do |deploy_key|
-            %tr
-              %td
-                %strong= deploy_key.title
-              %td
-                %code.key-fingerprint= deploy_key.fingerprint
-              %td
-                %span.cgray
-                  added #{time_ago_with_tooltip(deploy_key.created_at)}
-              %td
-                = link_to 'Remove', admin_deploy_key_path(deploy_key), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-sm btn-remove delete-key pull-right"
+            %td
+              %strong= deploy_key.title
+            %td
+              %code.key-fingerprint= deploy_key.fingerprint
+            %td
+              - if deploy_key.can_push?
+                Yes
+              - else
+                No
+            %td
+              %span.cgray
+                added #{time_ago_with_tooltip(deploy_key.created_at)}
+            %td
+              = link_to 'Remove', admin_deploy_key_path(deploy_key), data: { confirm: 'Are you sure?'}, method: :delete, class: 'btn btn-sm btn-remove delete-key pull-right'
diff --git a/app/views/admin/deploy_keys/new.html.haml b/app/views/admin/deploy_keys/new.html.haml
index 5c410a695bf..a064efc231f 100644
--- a/app/views/admin/deploy_keys/new.html.haml
+++ b/app/views/admin/deploy_keys/new.html.haml
@@ -16,6 +16,14 @@
           Paste a machine public key here. Read more about how to generate it
           = link_to "here", help_page_path("ssh/README")
         = f.text_area :key, class: "form-control thin_area", rows: 5
+    .form-group
+      .control-label
+      .col-sm-10
+        = f.label :can_push do
+          = f.check_box :can_push
+          %strong Write access allowed
+        %p.light.append-bottom-0
+          Allow this key to push to repository as well? (Default only allows pull access.)
 
     .form-actions
       = f.submit 'Create', class: "btn-create btn"
diff --git a/app/views/admin/groups/_group.html.haml b/app/views/admin/groups/_group.html.haml
index 664bb417c6a..e3a77dfdf10 100644
--- a/app/views/admin/groups/_group.html.haml
+++ b/app/views/admin/groups/_group.html.haml
@@ -2,9 +2,12 @@
 
 %li.group-row{ class: css_class }
   .controls
-    = link_to 'Edit', edit_admin_group_path(group), id: "edit_#{dom_id(group)}", class: 'btn'
+    = 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
+      = storage_counter(group.storage_size)
+
     %span
       = icon('bookmark')
       = number_with_delimiter(group.projects.count)
@@ -13,14 +16,14 @@
       = icon('users')
       = number_with_delimiter(group.users.count)
 
-    %span.visibility-icon.has-tooltip{data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group)}
+    %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
       = visibility_level_icon(group.visibility_level, fw: false)
 
   .avatar-container.s40
     = image_tag group_icon(group), class: "avatar s40 hidden-xs"
   .title
     = link_to [:admin, group], class: 'group-name' do
-      = group.name
+      = group.full_name
 
   - if group.description.present?
     .description
diff --git a/app/views/admin/groups/index.html.haml b/app/views/admin/groups/index.html.haml
index 794f910a61f..07775247cfd 100644
--- a/app/views/admin/groups/index.html.haml
+++ b/app/views/admin/groups/index.html.haml
@@ -27,6 +27,8 @@
                   = sort_title_recently_updated
                 = link_to admin_groups_path(sort: sort_value_oldest_updated, name: project_name) do
                   = sort_title_oldest_updated
+                = link_to admin_groups_path(sort: sort_value_largest_group, name: project_name) do
+                  = sort_title_largest_group
           = link_to new_admin_group_path, class: "btn btn-new" do
             New Group
   %ul.content-list
diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index 40871e32913..30b3fabdd7e 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -1,8 +1,8 @@
 - page_title @group.name, "Groups"
 %h3.page-title
-  Group: #{@group.name}
+  Group: #{@group.full_name}
 
-  = link_to edit_admin_group_path(@group), class: "btn pull-right" do
+  = link_to admin_group_edit_path(@group), class: "btn pull-right" do
     %i.fa.fa-pencil-square-o
     Edit
 %hr
@@ -39,6 +39,18 @@
             = @group.created_at.to_s(:medium)
 
         %li
+          %span.light Storage:
+          %strong= storage_counter(@group.storage_size)
+          (
+          = storage_counter(@group.repository_size)
+          repositories,
+          = storage_counter(@group.build_artifacts_size)
+          build artifacts,
+          = storage_counter(@group.lfs_objects_size)
+          LFS
+          )
+
+        %li
           %span.light Group Git LFS status:
           %strong
             = group_lfs_status(@group)
@@ -55,8 +67,8 @@
           %li
             %strong
               = link_to project.name_with_namespace, [:admin, project.namespace.becomes(Namespace), project]
-              %span.label.label-gray
-                = repository_size(project)
+              %span.badge
+                = storage_counter(project.statistics.storage_size)
             %span.pull-right.light
               %span.monospace= project.path_with_namespace + ".git"
       .panel-footer
@@ -73,8 +85,8 @@
             %li
               %strong
                 = link_to project.name_with_namespace, [:admin, project.namespace.becomes(Namespace), project]
-                %span.label.label-gray
-                  = repository_size(project)
+                %span.badge
+                  = storage_counter(project.statistics.storage_size)
               %span.pull-right.light
                 %span.monospace= project.path_with_namespace + ".git"
 
@@ -88,10 +100,10 @@
             Read more about project permissions
             %strong= link_to "here", help_page_path("user/permissions"), class: "vlink"
 
-          = form_tag members_update_admin_group_path(@group), id: "new_project_member", class: "bulk_import", method: :put  do
+          = 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)
-            %div.prepend-top-10
+            .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"
diff --git a/app/views/admin/hooks/index.html.haml b/app/views/admin/hooks/index.html.haml
index c217490963f..551edf14361 100644
--- a/app/views/admin/hooks/index.html.haml
+++ b/app/views/admin/hooks/index.html.haml
@@ -29,7 +29,7 @@
         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.
 
-      %div.prepend-top-default
+      .prepend-top-default
         = f.check_box :push_events, class: 'pull-left'
         .prepend-left-20
           = f.label :push_events, class: 'list-label' do
@@ -54,7 +54,7 @@
     = f.submit "Add System Hook", class: "btn btn-create"
 %hr
 
--if @hooks.any?
+- if @hooks.any?
   .panel.panel-default
     .panel-heading
       System hooks (#{@hooks.count})
@@ -70,4 +70,3 @@
               - if hook.send(trigger)
                 %span.label.label-gray= trigger.titleize
             %span.label.label-gray SSL Verification: #{hook.enable_ssl_verification ? "enabled" : "disabled"}
-
diff --git a/app/views/admin/labels/_label.html.haml b/app/views/admin/labels/_label.html.haml
index be224d66855..77b174fbb27 100644
--- a/app/views/admin/labels/_label.html.haml
+++ b/app/views/admin/labels/_label.html.haml
@@ -1,4 +1,4 @@
-%li{id: dom_id(label)}
+%li{ id: dom_id(label) }
   .label-row
     = render_colored_label(label, tooltip: false)
     = markdown_field(label, :description)
diff --git a/app/views/admin/logs/show.html.haml b/app/views/admin/logs/show.html.haml
index 824edd171f3..0a954c20fcd 100644
--- a/app/views/admin/logs/show.html.haml
+++ b/app/views/admin/logs/show.html.haml
@@ -8,7 +8,7 @@
 %div{ class: container_class }
   %ul.nav-links.log-tabs
     - loggers.each do |klass|
-      %li{ class: (klass == Gitlab::GitLogger ? 'active' : '') }
+      %li{ class: (klass == Gitlab::GitLogger ? 'active' : '') }>
         = link_to klass::file_name, "##{klass::file_name_noext}",
             'data-toggle' => 'tab'
   .row-content-block
diff --git a/app/views/admin/projects/index.html.haml b/app/views/admin/projects/index.html.haml
index b37b8d4fee7..2e6f03fcde0 100644
--- a/app/views/admin/projects/index.html.haml
+++ b/app/views/admin/projects/index.html.haml
@@ -7,7 +7,7 @@
 %div{ class: container_class }
   .top-area
     .prepend-top-default
-      = form_tag admin_namespaces_projects_path, method: :get do |f|
+      = form_tag admin_projects_path, method: :get do |f|
         .search-holder
           .search-field-holder
             = search_field_tag :name, params[:name], class: "form-control search-text-input js-search-input", id: "dashboard_search", autofocus: true, spellcheck: false, placeholder: 'Search by name'
@@ -41,19 +41,19 @@
           = button_tag "Search", class: "btn btn-primary btn-search"
 
     %ul.nav-links
-      - opts = params[:visibility_level].present? ? {} : { page: admin_namespaces_projects_path }
+      - opts = params[:visibility_level].present? ? {} : { page: admin_projects_path }
       = nav_link(opts) do
-        = link_to admin_namespaces_projects_path do
+        = link_to admin_projects_path do
           All
 
       = nav_link(html_options: { class: params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s ? 'active' : '' }) do
-        = link_to admin_namespaces_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE) do
+        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE) do
           Private
       = nav_link(html_options: { class: params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s ? 'active' : '' }) do
-        = link_to admin_namespaces_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL) do
+        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL) do
           Internal
       = nav_link(html_options: { class: params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s ? 'active' : '' }) do
-        = link_to admin_namespaces_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
+        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
           Public
 
     .nav-controls
@@ -69,8 +69,8 @@
             .controls
               - if project.archived
                 %span.label.label-warning archived
-              %span.label.label-gray
-                = repository_size(project)
+              %span.badge
+                = storage_counter(project.statistics.storage_size)
               = link_to 'Edit', edit_namespace_project_path(project.namespace, project), id: "edit_#{dom_id(project)}", class: "btn"
               = link_to 'Delete', [project.namespace.becomes(Namespace), project], data: { confirm: remove_project_message(project) }, method: :delete, class: "btn btn-remove"
             .title
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index 6c7c3c48604..2967da6e692 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -65,9 +65,16 @@
               = @project.repository.path_to_repo
 
           %li
-            %span.light Size
-            %strong
-              = repository_size(@project)
+            %span.light Storage:
+            %strong= storage_counter(@project.statistics.storage_size)
+            (
+            = storage_counter(@project.statistics.repository_size)
+            repository,
+            = storage_counter(@project.statistics.build_artifacts_size)
+            build artifacts,
+            = storage_counter(@project.statistics.lfs_objects_size)
+            LFS
+            )
 
           %li
             %span.light last commit:
diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml
index 64893b38c58..975bd950ae1 100644
--- a/app/views/admin/runners/_runner.html.haml
+++ b/app/views/admin/runners/_runner.html.haml
@@ -1,4 +1,4 @@
-%tr{id: dom_id(runner)}
+%tr{ id: dom_id(runner) }
   %td
     - if runner.shared?
       %span.label.label-success shared
diff --git a/app/views/admin/runners/show.html.haml b/app/views/admin/runners/show.html.haml
index 73038164056..ca503e35623 100644
--- a/app/views/admin/runners/show.html.haml
+++ b/app/views/admin/runners/show.html.haml
@@ -91,7 +91,7 @@
               %strong ##{build.id}
 
           %td.status
-            = ci_status_with_icon(build.status)
+            = render 'ci/status/badge', status: build.detailed_status(current_user)
 
           %td.status
             - if project
diff --git a/app/views/admin/users/_head.html.haml b/app/views/admin/users/_head.html.haml
index ce5e21e54cc..9984e733956 100644
--- a/app/views/admin/users/_head.html.haml
+++ b/app/views/admin/users/_head.html.haml
@@ -15,10 +15,8 @@
 %ul.nav-links
   = nav_link(path: 'users#show') do
     = link_to "Account", admin_user_path(@user)
-  = nav_link(path: 'users#groups') do
-    = link_to "Groups", groups_admin_user_path(@user)
   = nav_link(path: 'users#projects') do
-    = link_to "Projects", projects_admin_user_path(@user)
+    = link_to "Groups and projects", projects_admin_user_path(@user)
   = nav_link(path: 'users#keys') do
     = link_to "SSH keys", keys_admin_user_path(@user)
   = nav_link(controller: :identities) do
diff --git a/app/views/admin/users/_user.html.haml b/app/views/admin/users/_user.html.haml
index 2d9588f9d27..3b5c713ac2d 100644
--- a/app/views/admin/users/_user.html.haml
+++ b/app/views/admin/users/_user.html.haml
@@ -18,7 +18,7 @@
     = link_to 'Edit', edit_admin_user_path(user), id: "edit_#{dom_id(user)}", class: 'btn'
     - unless user == current_user
       .dropdown.inline
-        %a.dropdown-new.btn.btn-default#project-settings-button{href: '#', data: { toggle: 'dropdown' } }
+        %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
diff --git a/app/views/admin/users/groups.html.haml b/app/views/admin/users/groups.html.haml
deleted file mode 100644
index 8f6d13b881a..00000000000
--- a/app/views/admin/users/groups.html.haml
+++ /dev/null
@@ -1,20 +0,0 @@
-- page_title "Groups", @user.name, "Users"
-= render 'admin/users/head'
-
-- group_members = @user.group_members.includes(:source)
-- if group_members.any?
-  .panel.panel-default
-    .panel-heading Groups:
-    %ul.well-list
-      - group_members.each do |group_member|
-        - group = group_member.group
-        %li.group_member
-          %span{class: ("list-item-name" unless group_member.owner?)}
-            %strong= link_to group.name, admin_group_path(group)
-          .pull-right
-            %span.light= 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", title: 'Remove user from group' do
-                %i.fa.fa-times.fa-inverse
-- else
-  .nothing-here-block This user has no groups.
diff --git a/app/views/admin/users/projects.html.haml b/app/views/admin/users/projects.html.haml
index dd6b7303493..15eaf1c0e67 100644
--- a/app/views/admin/users/projects.html.haml
+++ b/app/views/admin/users/projects.html.haml
@@ -1,15 +1,21 @@
-- page_title "Projects", @user.name, "Users"
+- page_title "Groups and projects", @user.name, "Users"
 = render 'admin/users/head'
 
 - if @user.groups.any?
   .panel.panel-default
     .panel-heading Group projects
     %ul.well-list
-      - @user.groups.each do |group|
-        %li
+      - @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
+            %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
+                %i.fa.fa-times.fa-inverse
 
 .row
   .col-md-6
@@ -35,8 +41,8 @@
                 - if member.owner?
                   %span.light Owner
                 - else
-                  %span.light= member.human_access
+                  %span.light.vertical-align-middle= member.human_access
 
                   - if member.respond_to? :project
-                    = link_to namespace_project_project_member_path(project.namespace, project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn-xs btn btn-remove", title: 'Remove user from project' do
+                    = link_to namespace_project_project_member_path(project.namespace, 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
                       %i.fa.fa-times
diff --git a/app/views/admin/users/show.html.haml b/app/views/admin/users/show.html.haml
index 76c9ed0ee8b..a71240986c9 100644
--- a/app/views/admin/users/show.html.haml
+++ b/app/views/admin/users/show.html.haml
@@ -40,7 +40,7 @@
 
         %li.two-factor-status
           %span.light Two-factor Authentication:
-          %strong{class: @user.two_factor_enabled? ? 'cgreen' : 'cred'}
+          %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'
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index d8912eda314..e3305e21e96 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -2,8 +2,7 @@
 .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",
-      disabled: !current_user,
-      class: (award_active_class(awards, current_user)),
+      class: (award_state_class(awards, current_user)),
       data: { placement: "bottom", title: award_user_list(awards, current_user) } }
       = emoji_icon(emoji, sprite: false)
       %span.award-control-text.js-counter
diff --git a/app/views/ci/lints/_create.html.haml b/app/views/ci/lints/_create.html.haml
index 61c7cce20b2..c91602fcff7 100644
--- a/app/views/ci/lints/_create.html.haml
+++ b/app/views/ci/lints/_create.html.haml
@@ -36,7 +36,7 @@
                 - if build[:allow_failure]
                   %b Allowed to fail
 
--else
+- else
   %p
     %b Status:
     syntax is incorrect
diff --git a/app/views/ci/lints/show.html.haml b/app/views/ci/lints/show.html.haml
index 889086c62b1..95eb9a57152 100644
--- a/app/views/ci/lints/show.html.haml
+++ b/app/views/ci/lints/show.html.haml
@@ -1,20 +1,25 @@
 - page_title "CI Lint"
 - page_description "Validate your GitLab CI configuration file"
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/ace.js')
 
 %h2 Check your .gitlab-ci.yml
-%hr
 
-.row
-  = form_tag ci_lint_path, method: :post do
-    .form-group
-      = label_tag(:content, 'Content of .gitlab-ci.yml', class: 'control-label text-nowrap')
+.ci-linter
+  .row
+    = form_tag ci_lint_path, method: :post do
+      .form-group
+        .col-sm-12
+          .file-holder
+            .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
-        = text_area_tag(:content, @content, class: '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-left.prepend-top-10
+          = submit_tag('Validate', class: 'btn btn-success submit-yml')
 
-.row.prepend-top-20
-  .col-sm-12
-    .results
-      = render partial: 'create' if defined?(@status)
+  .row.prepend-top-20
+    .col-sm-12
+      .results.ci-template
+        = render partial: 'create' if defined?(@status)
diff --git a/app/views/ci/status/_badge.html.haml b/app/views/ci/status/_badge.html.haml
new file mode 100644
index 00000000000..601fb7f0f3f
--- /dev/null
+++ b/app/views/ci/status/_badge.html.haml
@@ -0,0 +1,11 @@
+- status = local_assigns.fetch(:status)
+- css_classes = "ci-status ci-#{status.group}"
+
+- if status.has_details?
+  = link_to status.details_path, class: css_classes do
+    = custom_icon(status.icon)
+    = status.text
+- else
+  %span{ class: css_classes }
+    = custom_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
new file mode 100644
index 00000000000..8dea3479f82
--- /dev/null
+++ b/app/views/ci/status/_dropdown_graph_badge.html.haml
@@ -0,0 +1,19 @@
+-# Renders the content of each li in the dropdown
+
+- 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}"
+
+- if status.has_details?
+  = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip }  do
+    %span{ class: klass }= custom_icon(status.icon)
+    %span.ci-build-text= subject.name
+- else
+  .mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip } }
+    %span{ class: klass }= custom_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 }  do
+    = icon(status.action_icon, class: status.action_class)
diff --git a/app/views/ci/status/_graph_badge.html.haml b/app/views/ci/status/_graph_badge.html.haml
new file mode 100644
index 00000000000..dd2f649de9a
--- /dev/null
+++ b/app/views/ci/status/_graph_badge.html.haml
@@ -0,0 +1,20 @@
+-# Renders the graph node with both the status icon, status name and action icon
+
+- subject = local_assigns.fetch(:subject)
+- status = subject.detailed_status(current_user)
+- klass = "ci-status-icon ci-status-icon-#{status.group}"
+- tooltip = "#{subject.name} - #{status.label}"
+
+- if status.has_details?
+  = link_to status.details_path, class: 'build-content has-tooltip', data: { toggle: 'tooltip', title: tooltip }  do
+    %span{ class: klass }= custom_icon(status.icon)
+    .ci-status-text= subject.name
+- else
+  .build-content.has-tooltip{ data: { toggle: 'tooltip', title: tooltip } }
+    %span{ class: klass }= custom_icon(status.icon)
+    .ci-status-text= subject.name
+
+- if status.has_action?
+  = link_to status.action_path, class: 'ci-action-icon-container has-tooltip', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title }  do
+    %i.ci-action-icon-wrapper
+      = icon(status.action_icon, class: status.action_class)
diff --git a/app/views/dashboard/_activity_head.html.haml b/app/views/dashboard/_activity_head.html.haml
index b78e70ebc1e..02b94beee92 100644
--- a/app/views/dashboard/_activity_head.html.haml
+++ b/app/views/dashboard/_activity_head.html.haml
@@ -1,7 +1,7 @@
 %ul.nav-links
-  %li{ class: ("active" unless params[:filter]) }
+  %li{ class: ("active" unless params[:filter]) }>
     = link_to activity_dashboard_path, class: 'shortcuts-activity', data: {placement: 'right'} do
       Your Projects
-  %li{ class: ("active" if params[:filter] == 'starred') }
+  %li{ class: ("active" if params[:filter] == 'starred') }>
     = link_to activity_dashboard_path(filter: 'starred'), data: {placement: 'right'} do
       Starred Projects
diff --git a/app/views/dashboard/projects/_zero_authorized_projects.html.haml b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
index 4a55aac0df6..1bbd4602ecf 100644
--- a/app/views/dashboard/projects/_zero_authorized_projects.html.haml
+++ b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
@@ -33,7 +33,7 @@
     = link_to new_project_path, class: "btn btn-new" do
       New project
 
--if publicish_project_count > 0
+- if publicish_project_count > 0
   .blank-state
     .blank-state-icon
       = icon("globe")
diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index cc077fad32a..9849b31d7e2 100644
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -1,4 +1,4 @@
-%li{class: "todo todo-#{todo.done? ? 'done' : 'pending'}", id: dom_id(todo), data:{url: todo_target_path(todo)} }
+%li{ class: "todo todo-#{todo.done? ? 'done' : 'pending'}", id: dom_id(todo), data: { url: todo_target_path(todo) } }
   = author_avatar(todo, size: 40)
 
   .todo-item.todo-block
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 62f52086be4..f4efcfb27b2 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -5,14 +5,14 @@
   .top-area
     %ul.nav-links
       - todo_pending_active = ('active' if params[:state].blank? || params[:state] == 'pending')
-      %li{class: "todos-pending #{todo_pending_active}"}
+      %li{ class: "todos-pending #{todo_pending_active}" }>
         = link_to todos_filter_path(state: 'pending') do
           %span
             To do
           %span.badge
             = number_with_delimiter(todos_pending_count)
       - todo_done_active = ('active' if params[:state] == 'done')
-      %li{class: "todos-done #{todo_done_active}"}
+      %li{ class: "todos-done #{todo_done_active}" }>
         = link_to todos_filter_path(state: 'done') do
           %span
             Done
@@ -32,7 +32,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 } })
+            placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project' } })
         .filter-item.inline
           - if params[:author_id].present?
             = hidden_field_tag(:author_id, params[:author_id])
@@ -42,15 +42,15 @@
           - if params[:type].present?
             = hidden_field_tag(:type, params[:type])
           = dropdown_tag(todo_types_dropdown_label(params[:type], 'Type'), options: { toggle_class: 'js-type-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-type js-filter-submit',
-            data: { data: todo_types_options } })
+            data: { data: todo_types_options, default_label: 'Type' } })
         .filter-item.inline.actions-filter
           - if params[:action_id].present?
             = hidden_field_tag(:action_id, params[:action_id])
           = dropdown_tag(todo_actions_dropdown_label(params[:action_id], 'Action'), options: { toggle_class: 'js-action-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-action js-filter-submit',
-            data: { data: todo_actions_options }})
+            data: { data: todo_actions_options, default_label: 'Action' } })
         .pull-right
           .dropdown.inline.prepend-left-10
-            %button.dropdown-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+            %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
               %span.light
               - if @sort.present?
                 = sort_options_hash[@sort]
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index 84e13693dfd..5d359538efe 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -1,16 +1,16 @@
 = form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive'}) do |f|
-  %div.form-group
+  .form-group
     = f.label "Username or email", for: :login
     = f.text_field :login, class: "form-control top", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required."
-  %div.form-group
+  .form-group
     = 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
-      %label{for: "user_remember_me"}
+      %label{ for: "user_remember_me" }
         = f.check_box :remember_me
         %span Remember me
       .pull-right.forgot-password
         = link_to "Forgot your password?", new_password_path(resource_name)
-  %div.submit-container.move-submit-down
+  .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 a6cadbcbdff..2556cb6f59b 100644
--- a/app/views/devise/sessions/_new_crowd.html.haml
+++ b/app/views/devise/sessions/_new_crowd.html.haml
@@ -1,13 +1,13 @@
 = form_tag(omniauth_authorize_path(:user, :crowd), id: 'new_crowd_user', class: 'gl-show-field-errors') do
   .form-group
     = label_tag :username, 'Username or email'
-    = text_field_tag :username, nil, {class: "form-control top", title: "This field is required", autofocus: "autofocus", required: true }
+    = text_field_tag :username, nil, { class: "form-control top", title: "This field is required", autofocus: "autofocus", required: true }
   .form-group
     = 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
-      %label{for: "remember_me"}
+      %label{ for: "remember_me" }
         = check_box_tag :remember_me, '1', false, id: 'remember_me'
         %span Remember me
   = submit_tag "Sign in", class: "btn-save btn"
diff --git a/app/views/devise/sessions/_new_ldap.html.haml b/app/views/devise/sessions/_new_ldap.html.haml
index 3ab5461f929..3159d21598a 100644
--- a/app/views/devise/sessions/_new_ldap.html.haml
+++ b/app/views/devise/sessions/_new_ldap.html.haml
@@ -1,13 +1,13 @@
 = form_tag(omniauth_callback_path(:user, server['provider_name']), id: 'new_ldap_user', class: "gl-show-field-errors") do
   .form-group
     = label_tag :username, "#{server['label']} Username"
-    = text_field_tag :username, nil, {class: "form-control top", title: "This field is required.", autofocus: "autofocus", required: true }
+    = text_field_tag :username, nil, { class: "form-control top", title: "This field is required.", autofocus: "autofocus", required: true }
   .form-group
     = 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
-      %label{for: "remember_me"}
+      %label{ for: "remember_me" }
         = check_box_tag :remember_me, '1', false, id: 'remember_me'
         %span Remember me
   = submit_tag "Sign in", class: "btn-save btn"
diff --git a/app/views/devise/sessions/two_factor.html.haml b/app/views/devise/sessions/two_factor.html.haml
index 2cadc424668..951f03083bf 100644
--- a/app/views/devise/sessions/two_factor.html.haml
+++ b/app/views/devise/sessions/two_factor.html.haml
@@ -7,7 +7,7 @@
   .login-box
     .login-body
       - if @user.two_factor_otp_enabled?
-        = form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: 'edit_user gl-show-field-errors' }) do |f|
+        = form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: "edit_user gl-show-field-errors js-2fa-form #{'hidden' if @user.two_factor_u2f_enabled?}" }) do |f|
           - resource_params = params[resource_name].presence || params
           = f.hidden_field :remember_me, value: resource_params.fetch(:remember_me, 0)
           %div
diff --git a/app/views/devise/shared/_omniauth_box.html.haml b/app/views/devise/shared/_omniauth_box.html.haml
index 8908b64cdac..e87a16a5157 100644
--- a/app/views/devise/shared/_omniauth_box.html.haml
+++ b/app/views/devise/shared/_omniauth_box.html.haml
@@ -1,4 +1,4 @@
-%div.omniauth-container
+.omniauth-container
   %p
     %span.light
       Sign in with &nbsp;
diff --git a/app/views/devise/shared/_signin_box.html.haml b/app/views/devise/shared/_signin_box.html.haml
index 86edaf14e43..eddfce363a7 100644
--- a/app/views/devise/shared/_signin_box.html.haml
+++ b/app/views/devise/shared/_signin_box.html.haml
@@ -1,18 +1,18 @@
 - if form_based_providers.any?
   - if crowd_enabled?
-    .login-box.tab-pane.active{id: "crowd", role: 'tabpanel', class: 'tab-pane'}
+    .login-box.tab-pane.active{ id: "crowd", role: 'tabpanel' }
       .login-body
         = render 'devise/sessions/new_crowd'
   - @ldap_servers.each_with_index do |server, i|
-    .login-box.tab-pane{id: "#{server['provider_name']}", role: 'tabpanel', class: (:active if i.zero? && !crowd_enabled?)}
+    .login-box.tab-pane{ id: "#{server['provider_name']}", role: 'tabpanel', class: (:active if i.zero? && !crowd_enabled?) }
       .login-body
         = render 'devise/sessions/new_ldap', server: server
   - if signin_enabled?
-    .login-box.tab-pane{id: 'ldap-standard', role: 'tabpanel'}
+    .login-box.tab-pane{ id: 'ldap-standard', role: 'tabpanel' }
       .login-body
         = render 'devise/sessions/new_base'
 
 - elsif signin_enabled?
-  .login-box.tab-pane.active{id: 'login-pane', role: 'tabpanel'}
+  .login-box.tab-pane.active{ id: 'login-pane', role: 'tabpanel' }
     .login-body
       = render 'devise/sessions/new_base'
diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml
index 3133f6de2e8..01ecf237925 100644
--- a/app/views/devise/shared/_signup_box.html.haml
+++ b/app/views/devise/shared/_signup_box.html.haml
@@ -1,20 +1,23 @@
-#register-pane.login-box{ role: 'tabpanel', class: 'tab-pane' }
+#register-pane.tab-pane.login-box{ role: 'tabpanel' }
   .login-body
     = form_for(resource, as: "new_#{resource_name}", url: registration_path(resource_name), html: { class: "new_new_user gl-show-field-errors", "aria-live" => "assertive" }) do |f|
       .devise-errors
         = devise_error_messages!
-      %div.form-group
+      .form-group
         = f.label :name
         = f.text_field :name, class: "form-control top", required: true, title: "This field is required."
-      %div.username.form-group
+      .username.form-group
         = f.label :username
         = f.text_field :username, class: "form-control middle", pattern: Gitlab::Regex::NAMESPACE_REGEX_STR_SIMPLE, required: true, title: 'Please create a username with only alphanumeric characters.'
         %p.validation-error.hide Username is already taken.
         %p.validation-success.hide Username is available.
         %p.validation-pending.hide Checking username availability...
-      %div.form-group
+      .form-group
         = f.label :email
         = f.email_field :email, class: "form-control middle", required: true, title: "Please provide a valid email address."
+      .form-group
+        = f.label :email_confirmation
+        = f.email_field :email_confirmation, class: "form-control middle", required: true, title: "Please retype the email address."
       .form-group.append-bottom-20#password-strength
         = 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."
diff --git a/app/views/devise/shared/_tabs_ldap.html.haml b/app/views/devise/shared/_tabs_ldap.html.haml
index aec1b31ce62..8c4ad30c832 100644
--- a/app/views/devise/shared/_tabs_ldap.html.haml
+++ b/app/views/devise/shared/_tabs_ldap.html.haml
@@ -3,7 +3,7 @@
     %li.active
       = link_to "Crowd", "#crowd", 'data-toggle' => 'tab'
   - @ldap_servers.each_with_index do |server, i|
-    %li{class: (:active if i.zero? && !crowd_enabled?)}
+    %li{ class: (:active if i.zero? && !crowd_enabled?) }
       = link_to server['label'], "##{server['provider_name']}",  'data-toggle' => 'tab'
   - if signin_enabled?
     %li
diff --git a/app/views/devise/shared/_tabs_normal.html.haml b/app/views/devise/shared/_tabs_normal.html.haml
index 05246303fb6..c225d800a98 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'}
+%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
+    %a{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in
   - if signin_enabled? && signup_enabled?
-    %li{ role: 'presentation'}
-      %a{ href: '#register-pane', data: { toggle: 'tab' }, role: 'tab'} Register
+    %li{ role: 'presentation' }
+      %a{ href: '#register-pane', data: { toggle: 'tab' }, role: 'tab' } Register
diff --git a/app/views/discussions/_diff_discussion.html.haml b/app/views/discussions/_diff_discussion.html.haml
index 1411daeb4a6..2deadbeeceb 100644
--- a/app/views/discussions/_diff_discussion.html.haml
+++ b/app/views/discussions/_diff_discussion.html.haml
@@ -1,5 +1,5 @@
 - expanded = local_assigns.fetch(:expanded, true)
-%tr.notes_holder{class: ('hide' unless expanded)}
+%tr.notes_holder{ class: ('hide' unless expanded) }
   %td.notes_line{ colspan: 2 }
   %td.notes_content
     .content
diff --git a/app/views/discussions/_jump_to_next.html.haml b/app/views/discussions/_jump_to_next.html.haml
index 7ed09dd1a98..69bd416c4de 100644
--- a/app/views/discussions/_jump_to_next.html.haml
+++ b/app/views/discussions/_jump_to_next.html.haml
@@ -5,5 +5,5 @@
       %button.btn.btn-default.discussion-next-btn.has-tooltip{ "@click" => "jumpToNextUnresolvedDiscussion",
         title: "Jump to next unresolved discussion",
         "aria-label" => "Jump to next unresolved discussion",
-        data: { container: "body" }}
+        data: { container: "body" } }
         = custom_icon("next_discussion")
diff --git a/app/views/discussions/_parallel_diff_discussion.html.haml b/app/views/discussions/_parallel_diff_discussion.html.haml
index f1072ce0feb..ef16b516e2c 100644
--- a/app/views/discussions/_parallel_diff_discussion.html.haml
+++ b/app/views/discussions/_parallel_diff_discussion.html.haml
@@ -1,9 +1,9 @@
 - expanded = discussion_left.try(:expanded?) || discussion_right.try(:expanded?)
-%tr.notes_holder{class: ('hide' unless expanded)}
+%tr.notes_holder{ class: ('hide' unless expanded) }
   - if discussion_left
     %td.notes_line.old
     %td.notes_content.parallel.old
-      .content{class: ('hide' unless discussion_left.expanded?)}
+      .content{ class: ('hide' unless discussion_left.expanded?) }
         = render "discussions/notes", discussion: discussion_left, line_type: 'old'
   - else
     %td.notes_line.old= ""
@@ -13,7 +13,7 @@
   - if discussion_right
     %td.notes_line.new
     %td.notes_content.parallel.new
-      .content{class: ('hide' unless discussion_right.expanded?)}
+      .content{ class: ('hide' unless discussion_right.expanded?) }
         = render "discussions/notes", discussion: discussion_right, line_type: 'new'
   - else
     %td.notes_line.new= ""
diff --git a/app/views/doorkeeper/applications/_delete_form.html.haml b/app/views/doorkeeper/applications/_delete_form.html.haml
index 001a711b1dd..84b4ce5b606 100644
--- a/app/views/doorkeeper/applications/_delete_form.html.haml
+++ b/app/views/doorkeeper/applications/_delete_form.html.haml
@@ -1,6 +1,6 @@
 - submit_btn_css ||= 'btn btn-link btn-remove btn-sm'
 = form_tag oauth_application_path(application) do
-  %input{:name => "_method", :type => "hidden", :value => "delete"}/
+  %input{ :name => "_method", :type => "hidden", :value => "delete" }/
   - if defined? small
     = button_tag type: "submit", class: "btn btn-transparent", data: { confirm: "Are you sure?" } do
       %span.sr-only
diff --git a/app/views/doorkeeper/applications/_form.html.haml b/app/views/doorkeeper/applications/_form.html.haml
index 5c98265727a..b3313c7c985 100644
--- a/app/views/doorkeeper/applications/_form.html.haml
+++ b/app/views/doorkeeper/applications/_form.html.haml
@@ -17,5 +17,9 @@
         %code= Doorkeeper.configuration.native_redirect_uri
         for local tests
 
+  .form-group
+    = f.label :scopes, class: 'label-light'
+    = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes
+
   .prepend-top-default
     = f.submit 'Save application', class: "btn btn-create"
diff --git a/app/views/doorkeeper/applications/index.html.haml b/app/views/doorkeeper/applications/index.html.haml
index 3998e66f40d..aa271150b07 100644
--- a/app/views/doorkeeper/applications/index.html.haml
+++ b/app/views/doorkeeper/applications/index.html.haml
@@ -31,7 +31,7 @@
                   %th.last-heading
               %tbody
                 - @applications.each do |application|
-                  %tr{id: "application_#{application.id}"}
+                  %tr{ id: "application_#{application.id}" }
                     %td= link_to application.name, oauth_application_path(application)
                     %td
                       - application.redirect_uri.split.each do |uri|
@@ -63,7 +63,7 @@
             %tbody
               - @authorized_apps.each do |app|
                 - token = app.authorized_tokens.order('created_at desc').first
-                %tr{id: "application_#{app.id}"}
+                %tr{ id: "application_#{app.id}" }
                   %td= app.name
                   %td= token.created_at
                   %td= token.scopes
@@ -72,7 +72,7 @@
                 %tr
                   %td
                     Anonymous
-                    %div.help-block
+                    .help-block
                       %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 47442b78d48..559de63d96d 100644
--- a/app/views/doorkeeper/applications/show.html.haml
+++ b/app/views/doorkeeper/applications/show.html.haml
@@ -2,7 +2,7 @@
 %h3.page-title
   Application: #{@application.name}
 
-.table-holder
+.table-holder.oauth-application-show
   %table.table
     %tr
       %td
@@ -22,6 +22,9 @@
         - @application.redirect_uri.split.each do |uri|
           %div
             %span.monospace= uri
+
+    = render "shared/tokens/scopes_list", token: @application
+
 .form-actions
   = link_to 'Edit', edit_oauth_application_path(@application), class: 'btn btn-primary wide pull-left'
   = render 'delete_form', application: @application, submit_btn_css: 'btn btn-danger prepend-left-10'
diff --git a/app/views/doorkeeper/authorizations/error.html.haml b/app/views/doorkeeper/authorizations/error.html.haml
index a4c607cea60..6117b00149f 100644
--- a/app/views/doorkeeper/authorizations/error.html.haml
+++ b/app/views/doorkeeper/authorizations/error.html.haml
@@ -1,3 +1,3 @@
 %h3.page-title An error has occurred
-%main{:role => "main"}
+%main{ :role => "main" }
   %pre= @pre_auth.error_response.body[:error_description]
diff --git a/app/views/doorkeeper/authorizations/new.html.haml b/app/views/doorkeeper/authorizations/new.html.haml
index ce050007204..2a0e301c8dd 100644
--- a/app/views/doorkeeper/authorizations/new.html.haml
+++ b/app/views/doorkeeper/authorizations/new.html.haml
@@ -1,5 +1,5 @@
 %h3.page-title Authorization required
-%main{:role => "main"}
+%main{ :role => "main" }
   %p.h4
     Authorize
     %strong.text-info= @pre_auth.client.name
diff --git a/app/views/doorkeeper/authorizations/show.html.haml b/app/views/doorkeeper/authorizations/show.html.haml
index 01f9e46f142..44e868e6782 100644
--- a/app/views/doorkeeper/authorizations/show.html.haml
+++ b/app/views/doorkeeper/authorizations/show.html.haml
@@ -1,3 +1,3 @@
 %h3.page-title Authorization code:
-%main{:role => "main"}
+%main{ :role => "main" }
   %code#authorization_code= params[:code]
diff --git a/app/views/doorkeeper/authorized_applications/_delete_form.html.haml b/app/views/doorkeeper/authorized_applications/_delete_form.html.haml
index 9f02a8d2ed9..11c1e67878e 100644
--- a/app/views/doorkeeper/authorized_applications/_delete_form.html.haml
+++ b/app/views/doorkeeper/authorized_applications/_delete_form.html.haml
@@ -3,7 +3,7 @@
   - path = oauth_authorized_application_path(0, token_id: token)
 - else
   - path = oauth_authorized_application_path(application)
-  
+
 = form_tag path do
-  %input{:name => "_method", :type => "hidden", :value => "delete"}/
+  %input{ :name => "_method", :type => "hidden", :value => "delete" }/
   = submit_tag 'Revoke', onclick: "return confirm('Are you sure?')", class: 'btn btn-remove btn-sm'
diff --git a/app/views/doorkeeper/authorized_applications/index.html.haml b/app/views/doorkeeper/authorized_applications/index.html.haml
index b184b9c01d4..c8a585560a2 100644
--- a/app/views/doorkeeper/authorized_applications/index.html.haml
+++ b/app/views/doorkeeper/authorized_applications/index.html.haml
@@ -1,6 +1,6 @@
 %header.page-header
   %h1 Your authorized applications
-%main{:role => "main"}
+%main{ :role => "main" }
   .table-holder
     %table.table.table-striped
       %thead
diff --git a/app/views/emojis/index.html.haml b/app/views/emojis/index.html.haml
index 790d90ad3ee..49bd9acd2db 100644
--- a/app/views/emojis/index.html.haml
+++ b/app/views/emojis/index.html.haml
@@ -7,5 +7,5 @@
       %ul.clearfix.emoji-menu-list
         - emojis.each do |emoji|
           %li.pull-left.text-center.emoji-menu-list-item
-            %button.emoji-menu-btn.text-center.js-emoji-btn{type: "button"}
+            %button.emoji-menu-btn.text-center.js-emoji-btn{ type: "button" }
               = emoji_icon(emoji["name"], emoji["unicode"], emoji["aliases"])
diff --git a/app/views/errors/access_denied.html.haml b/app/views/errors/access_denied.html.haml
index 8bddbef3562..a97cbd4d4b3 100644
--- a/app/views/errors/access_denied.html.haml
+++ b/app/views/errors/access_denied.html.haml
@@ -1,6 +1,5 @@
 - content_for(:title, 'Access Denied')
-%img{:alt => "GitLab Logo",
-     :src => image_path('logo.svg')}
+%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
   %h1
     403
 .container
diff --git a/app/views/errors/encoding.html.haml b/app/views/errors/encoding.html.haml
index 064ff14ad2c..64f7f8e0836 100644
--- a/app/views/errors/encoding.html.haml
+++ b/app/views/errors/encoding.html.haml
@@ -1,6 +1,5 @@
 - content_for(:title, 'Encoding Error')
-%img{:alt => "GitLab Logo",
-     :src => image_path('logo.svg')}
+%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
   %h1
     500
 .container
diff --git a/app/views/errors/git_not_found.html.haml b/app/views/errors/git_not_found.html.haml
index c5c12a410ac..d860957665b 100644
--- a/app/views/errors/git_not_found.html.haml
+++ b/app/views/errors/git_not_found.html.haml
@@ -1,6 +1,5 @@
 - content_for(:title, 'Git Resource Not Found')
-%img{:alt => "GitLab Logo",
-     :src => image_path('logo.svg')}
+%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
   %h1
     404
 .container
diff --git a/app/views/errors/not_found.html.haml b/app/views/errors/not_found.html.haml
index 50a54a93cb5..a0b9a632e22 100644
--- a/app/views/errors/not_found.html.haml
+++ b/app/views/errors/not_found.html.haml
@@ -1,6 +1,5 @@
 - content_for(:title, 'Not Found')
-%img{:alt => "GitLab Logo",
-     :src => image_path('logo.svg')}
+%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
   %h1
     404
 .container
diff --git a/app/views/errors/omniauth_error.html.haml b/app/views/errors/omniauth_error.html.haml
index d91f1878cb6..72508b91134 100644
--- a/app/views/errors/omniauth_error.html.haml
+++ b/app/views/errors/omniauth_error.html.haml
@@ -1,6 +1,5 @@
 - content_for(:title, 'Auth Error')
-%img{:alt => "GitLab Logo",
-     :src => image_path('logo.svg')}
+%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
   %h1
     422
 .container
diff --git a/app/views/events/_event_issue.atom.haml b/app/views/events/_event_issue.atom.haml
index 083c3936212..51585314a62 100644
--- a/app/views/events/_event_issue.atom.haml
+++ b/app/views/events/_event_issue.atom.haml
@@ -1,2 +1,2 @@
-%div{xmlns: "http://www.w3.org/1999/xhtml"}
+%div{ xmlns: "http://www.w3.org/1999/xhtml" }
   = markdown(issue.description, pipeline: :atom, project: issue.project, author: issue.author)
diff --git a/app/views/events/_event_merge_request.atom.haml b/app/views/events/_event_merge_request.atom.haml
index d7e05600627..56fc8b86217 100644
--- a/app/views/events/_event_merge_request.atom.haml
+++ b/app/views/events/_event_merge_request.atom.haml
@@ -1,2 +1,2 @@
-%div{xmlns: "http://www.w3.org/1999/xhtml"}
+%div{ xmlns: "http://www.w3.org/1999/xhtml" }
   = markdown(merge_request.description, pipeline: :atom, project: merge_request.project, author: merge_request.author)
diff --git a/app/views/events/_event_note.atom.haml b/app/views/events/_event_note.atom.haml
index 1154f982821..6fa2f9bd4db 100644
--- a/app/views/events/_event_note.atom.haml
+++ b/app/views/events/_event_note.atom.haml
@@ -1,2 +1,2 @@
-%div{xmlns: "http://www.w3.org/1999/xhtml"}
+%div{ xmlns: "http://www.w3.org/1999/xhtml" }
   = markdown(note.note, pipeline: :atom, project: note.project, author: note.author)
diff --git a/app/views/events/_event_push.atom.haml b/app/views/events/_event_push.atom.haml
index 28bee1d0a33..f8f0bcb7608 100644
--- a/app/views/events/_event_push.atom.haml
+++ b/app/views/events/_event_push.atom.haml
@@ -1,4 +1,4 @@
-%div{xmlns: "http://www.w3.org/1999/xhtml"}
+%div{ xmlns: "http://www.w3.org/1999/xhtml" }
   - event.commits.first(15).each do |commit|
     %p
       %strong= commit[:author][:name]
diff --git a/app/views/events/event/_common.html.haml b/app/views/events/event/_common.html.haml
index bba6e0d2c20..2fb6b5647da 100644
--- a/app/views/events/event/_common.html.haml
+++ b/app/views/events/event/_common.html.haml
@@ -1,6 +1,6 @@
 .event-title
   %span.author_name= link_to_author event
-  %span{class: event.action_name}
+  %span{ class: event.action_name }
   - if event.target
     = event.action_name
     %strong
diff --git a/app/views/events/event/_created_project.html.haml b/app/views/events/event/_created_project.html.haml
index aba64dd17d0..80cf2344fe1 100644
--- a/app/views/events/event/_created_project.html.haml
+++ b/app/views/events/event/_created_project.html.haml
@@ -1,6 +1,6 @@
 .event-title
   %span.author_name= link_to_author event
-  %span{class: event.action_name}
+  %span{ class: event.action_name }
     = event_action_name(event)
 
   - if event.project
diff --git a/app/views/explore/_head.html.haml b/app/views/explore/_head.html.haml
index d8a57560788..a3b0709e261 100644
--- a/app/views/explore/_head.html.haml
+++ b/app/views/explore/_head.html.haml
@@ -1,5 +1,5 @@
-.explore-title
-  %h3
+.explore-title.text-center
+  %h2
     Explore GitLab
   %p.lead
     Discover projects, groups and snippets. Share your projects with others
diff --git a/app/views/explore/groups/index.html.haml b/app/views/explore/groups/index.html.haml
index 4e5d965ccbe..73cf6e87eb4 100644
--- a/app/views/explore/groups/index.html.haml
+++ b/app/views/explore/groups/index.html.haml
@@ -17,7 +17,7 @@
 
   .pull-right
     .dropdown.inline
-      %button.dropdown-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+      %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
         %span.light
         - if @sort.present?
           = sort_options_hash[@sort]
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index 5ea154c36b4..e3088848492 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" }
       = icon('globe')
       %span.light Visibility:
       - if params[:visibility_level].present?
@@ -20,7 +20,7 @@
 
 - if @tags.present?
   .dropdown
-    %button.dropdown-toggle{href: '#', "data-toggle" => "dropdown"}
+    %button.dropdown-toggle{ href: '#', "data-toggle" => "dropdown" }
       = icon('tags')
       %span.light Tags:
       - if params[:tag].present?
diff --git a/app/views/groups/_group_lfs_settings.html.haml b/app/views/groups/_group_lfs_settings.html.haml
index af57065f0fc..3c622ca5c3c 100644
--- a/app/views/groups/_group_lfs_settings.html.haml
+++ b/app/views/groups/_group_lfs_settings.html.haml
@@ -8,4 +8,4 @@
             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.
\ No newline at end of file
+          %span.descr This setting can be overridden in each project.
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index ebf9aca7700..bc5d3c797ac 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -21,6 +21,7 @@
         = 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
       Users with access to
diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml
index d19eaa6add9..38d63fd9acc 100644
--- a/app/views/groups/new.html.haml
+++ b/app/views/groups/new.html.haml
@@ -21,5 +21,5 @@
       = render 'shared/group_tips'
 
   .form-actions
-    = f.submit 'Create group', class: "btn btn-create", tabindex: 3
+    = 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 33fee334d93..2e7e5e5c309 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -18,8 +18,8 @@
         .pull-right
           - if project.archived
             %span.label.label-warning archived
-          %span.label.label-gray
-            = repository_size(project)
+          %span.badge
+            = storage_counter(project.statistics.storage_size)
           = link_to 'Members', namespace_project_project_members_path(project.namespace, project), id: "edit_#{dom_id(project)}", class: "btn btn-sm"
           = link_to 'Edit', edit_namespace_project_path(project.namespace, project), id: "edit_#{dom_id(project)}", class: "btn btn-sm"
           = link_to 'Remove', project, data: { confirm: remove_project_message(project)}, method: :delete, class: "btn btn-sm btn-remove"
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 52ce26a20b1..d256d14609e 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -22,7 +22,7 @@
         = render 'shared/members/access_request_buttons', source: @group
         = render 'shared/notifications/button', notification_setting: @notification_setting
 
-%div.groups-header{ class: container_class }
+.groups-header{ class: container_class }
   .top-area
     %ul.nav-links
       %li.active
@@ -32,6 +32,10 @@
         %li
           = link_to "#shared", 'data-toggle' => 'tab' do
             Shared Projects
+      - if @nested_groups.present?
+        %li
+          = link_to "#groups", 'data-toggle' => 'tab' do
+            Subgroups
     .nav-controls
       = form_tag request.path, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
         = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control', spellcheck: false
@@ -47,3 +51,8 @@
     - if @shared_projects.present?
       .tab-pane#shared
         = render "shared_projects", projects: @shared_projects
+
+    - if @nested_groups.present?
+      .tab-pane#groups
+        %ul.content-list
+          = render partial: 'shared/groups/group', collection: @nested_groups
diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml
index 65842a0479b..b74cc822295 100644
--- a/app/views/help/_shortcuts.html.haml
+++ b/app/views/help/_shortcuts.html.haml
@@ -1,8 +1,8 @@
-#modal-shortcuts.modal{tabindex: -1}
+#modal-shortcuts.modal{ tabindex: -1 }
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h4
           Keyboard Shortcuts
           %small
@@ -82,7 +82,7 @@
 
           .col-lg-4
             %table.shortcut-mappings
-              %tbody{ class: 'hidden-shortcut project', style: 'display:none' }
+              %tbody.hidden-shortcut.project{ style: 'display:none' }
                 %tr
                   %th
                   %th Global Dashboard
@@ -190,7 +190,7 @@
                   %td New issue
           .col-lg-4
             %table.shortcut-mappings
-              %tbody{ class: 'hidden-shortcut network', style: 'display:none' }
+              %tbody.hidden-shortcut.network{ style: 'display:none' }
                 %tr
                   %th
                   %th Network Graph
@@ -240,7 +240,7 @@
                     .key
                       shift j
                   %td Scroll to bottom
-              %tbody{ class: 'hidden-shortcut issues', style: 'display:none' }
+              %tbody.hidden-shortcut.issues{ style: 'display:none' }
                 %tr
                   %th
                   %th Issues
@@ -264,7 +264,7 @@
                   %td.shortcut
                     .key l
                   %td Change Label
-              %tbody{ class: 'hidden-shortcut merge_requests', style: 'display:none' }
+              %tbody.hidden-shortcut.merge_requests{ style: 'display:none' }
                 %tr
                   %th
                   %th Merge Requests
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index 070ed90da6d..dd1df46792b 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -182,7 +182,7 @@
       .nav-controls
         = text_field_tag 'sample', nil, class: 'form-control'
         .dropdown
-          %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+          %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
             %span Sort by name
             = icon('chevron-down')
           %ul.dropdown-menu
@@ -205,121 +205,121 @@
   %h2#buttons Buttons
 
   .example
-    %button.btn.btn-default{:type => "button"} Default
-    %button.btn.btn-gray{:type => "button"} Gray
-    %button.btn.btn-primary{:type => "button"} Primary
-    %button.btn.btn-success{:type => "button"} Success
-    %button.btn.btn-info{:type => "button"} Info
-    %button.btn.btn-warning{:type => "button"} Warning
-    %button.btn.btn-danger{:type => "button"} Danger
-    %button.btn.btn-link{:type => "button"} Link
+    %button.btn.btn-default{ :type => "button" } Default
+    %button.btn.btn-gray{ :type => "button" } Gray
+    %button.btn.btn-primary{ :type => "button" } Primary
+    %button.btn.btn-success{ :type => "button" } Success
+    %button.btn.btn-info{ :type => "button" } Info
+    %button.btn.btn-warning{ :type => "button" } Warning
+    %button.btn.btn-danger{ :type => "button" } Danger
+    %button.btn.btn-link{ :type => "button" } Link
 
   %h2#dropdowns Dropdowns
 
   .example
     .clearfix
       .dropdown.inline.pull-left
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         %ul.dropdown-menu
           %li
-            %a{href: "#"}
+            %a{ href: "#" }
               Dropdown Option
       .dropdown.inline.pull-right
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-align-right
           %li
-            %a{href: "#"}
+            %a{ href: "#" }
               Dropdown Option
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-selectable
           %li
-            %a.is-active{href: "#"}
+            %a.is-active{ href: "#" }
               Dropdown Option
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable
           .dropdown-title
             %span Dropdown Title
-            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
               = icon('times')
           .dropdown-input
-            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
+            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
             = icon('search')
           .dropdown-content
             %ul
               %li
-                %a.is-active{href: "#"}
+                %a.is-active{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li.divider
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
           .dropdown-footer
             %strong Tip:
             If an author is not a member of this project, you can still filter by his name while using the search field.
       .dropdown.inline
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown loading
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
           .dropdown-title
             %span Dropdown Title
-            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
               = icon('times')
           .dropdown-input
-            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
+            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
             = icon('search')
           .dropdown-content
             %ul
               %li
-                %a.is-active{href: "#"}
+                %a.is-active{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li.divider
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
           .dropdown-footer
             %strong Tip:
@@ -330,21 +330,21 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: {toggle: 'dropdown' } }
           Dropdown user
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
           .dropdown-title
             %span Dropdown Title
-            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
               = icon('times')
           .dropdown-input
-            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
+            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
             = icon('search')
           .dropdown-content
             %ul
               %li
-                %a.dropdown-menu-user-link.is-active{href: "#"}
+                %a.dropdown-menu-user-link.is-active{ href: "#" }
                   = link_to_member_avatar(@user, size: 30)
                   %strong.dropdown-menu-user-full-name
                     = @user.name
@@ -354,24 +354,24 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown page 2
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
           .dropdown-page-one
             .dropdown-title
-              %button.dropdown-title-button.dropdown-menu-back{aria: {label: "Go back"}}
+              %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
                 = icon('arrow-left')
               %span Dropdown Title
-              %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
                 = icon('times')
             .dropdown-input
-              %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
+              %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
               = icon('search')
             .dropdown-content
               %ul
                 %li
-                  %a.dropdown-menu-user-link.is-active{href: "#"}
+                  %a.dropdown-menu-user-link.is-active{ href: "#" }
                     = link_to_member_avatar(@user, size: 30)
                     %strong.dropdown-menu-user-full-name
                       = @user.name
@@ -379,13 +379,13 @@
                       = @user.to_reference
           .dropdown-page-two
             .dropdown-title
-              %button.dropdown-title-button.dropdown-menu-back{aria: {label: "Go back"}}
+              %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
                 = icon('arrow-left')
               %span Create label
-              %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
                 = icon('times')
             .dropdown-input
-              %input.dropdown-input-field{type: "search", placeholder: "Name new label"}
+              %input.dropdown-input-field{ type: "search", placeholder: "Name new label" }
             .dropdown-content
               %button.btn.btn-primary
                 Create
@@ -393,16 +393,16 @@
   .example
     %div
       .dropdown.inline
-        %button#js-project-dropdown.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button#js-project-dropdown.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Projects
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable
           .dropdown-title
             %span Go to project
-            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
               = icon('times')
           .dropdown-input
-            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
+            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
             = icon('search')
           .dropdown-content
           .dropdown-loading
@@ -486,22 +486,22 @@
   .example
     %form.form-horizontal
       .form-group
-        %label.col-sm-2.control-label{:for => "inputEmail3"} Email
+        %label.col-sm-2.control-label{ :for => "inputEmail3" } Email
         .col-sm-10
-          %input#inputEmail3.form-control{:placeholder => "Email", :type => "email"}/
+          %input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/
       .form-group
-        %label.col-sm-2.control-label{:for => "inputPassword3"} Password
+        %label.col-sm-2.control-label{ :for => "inputPassword3" } Password
         .col-sm-10
-          %input#inputPassword3.form-control{:placeholder => "Password", :type => "password"}/
+          %input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/
       .form-group
         .col-sm-offset-2.col-sm-10
           .checkbox
             %label
-              %input{:type => "checkbox"}/
+              %input{ :type => "checkbox" }/
               Remember me
       .form-group
         .col-sm-offset-2.col-sm-10
-          %button.btn.btn-default{:type => "submit"} Sign in
+          %button.btn.btn-default{ :type => "submit" } Sign in
 
   .lead
     Form when label rendered above input
@@ -510,16 +510,16 @@
   .example
     %form
       .form-group
-        %label{:for => "exampleInputEmail1"} Email address
-        %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email"}/
+        %label{ :for => "exampleInputEmail1" } Email address
+        %input#exampleInputEmail1.form-control{ :placeholder => "Enter email", :type => "email" }/
       .form-group
-        %label{:for => "exampleInputPassword1"} Password
-        %input#exampleInputPassword1.form-control{:placeholder => "Password", :type => "password"}/
+        %label{ :for => "exampleInputPassword1" } Password
+        %input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/
       .checkbox
         %label
-          %input{:type => "checkbox"}/
+          %input{ :type => "checkbox" }/
           Remember me
-      %button.btn.btn-default{:type => "submit"} Sign in
+      %button.btn.btn-default{ :type => "submit" } Sign in
 
   %h2#file File
   %h4
diff --git a/app/views/import/_githubish_status.html.haml b/app/views/import/_githubish_status.html.haml
new file mode 100644
index 00000000000..864c5c0ff95
--- /dev/null
+++ b/app/views/import/_githubish_status.html.haml
@@ -0,0 +1,61 @@
+- provider = local_assigns.fetch(:provider)
+- provider_title = Gitlab::ImportSources.title(provider)
+
+%p.light
+  Select projects you want to import.
+%hr
+%p
+  = button_tag class: "btn btn-import btn-success js-import-all" do
+    Import all projects
+    = icon("spinner spin", class: "loading-icon")
+
+.table-responsive
+  %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
+    %thead
+      %tr
+        %th= "From #{provider_title}"
+        %th To GitLab
+        %th Status
+    %tbody
+      - @already_added_projects.each do |project|
+        %tr{ id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}" }
+          %td
+            = provider_project_link(provider, project.import_source)
+          %td
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+          %td.job-status
+            - if project.import_status == 'finished'
+              %span
+                %i.fa.fa-check
+                done
+            - elsif project.import_status == 'started'
+              %i.fa.fa-spinner.fa-spin
+              started
+            - else
+              = project.human_import_status_name
+
+      - @repos.each do |repo|
+        %tr{ id: "repo_#{repo.id}" }
+          %td
+            = provider_project_link(provider, repo.full_name)
+          %td.import-target
+            %fieldset.row
+            .input-group
+              .project-path.input-group-btn
+                - 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 }
+                - 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, 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
+              Import
+              = icon("spinner spin", class: "loading-icon")
+
+.js-importer-status{ data: { jobs_import_path: "#{url_for([:jobs, :import, provider])}", import_path: "#{url_for([:import, provider])}" } }
diff --git a/app/views/import/bitbucket/status.html.haml b/app/views/import/bitbucket/status.html.haml
index f8b4b107513..7f1b9ee7141 100644
--- a/app/views/import/bitbucket/status.html.haml
+++ b/app/views/import/bitbucket/status.html.haml
@@ -1,5 +1,6 @@
-- page_title "Bitbucket import"
-- header_title "Projects", root_path
+- page_title 'Bitbucket import'
+- header_title 'Projects', root_path
+
 %h3.page-title
   %i.fa.fa-bitbucket
   Import projects from Bitbucket
@@ -10,13 +11,13 @@
   %hr
   %p
   - if @incompatible_repos.any?
-    = button_tag class: "btn btn-import btn-success js-import-all" do
+    = button_tag class: 'btn btn-import btn-success js-import-all' do
       Import all compatible projects
-      = icon("spinner spin", class: "loading-icon")
+      = icon('spinner spin', class: 'loading-icon')
   - else
-    = button_tag class: "btn btn-success js-import-all" do
+    = button_tag class: 'btn btn-import btn-success js-import-all' do
       Import all projects
-      = icon("spinner spin", class: "loading-icon")
+      = icon('spinner spin', class: 'loading-icon')
 
 .table-responsive
   %table.table.import-jobs
@@ -30,9 +31,9 @@
         %th Status
     %tbody
       - @already_added_projects.each do |project|
-        %tr{id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}"}
+        %tr{ id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}" }
           %td
-            = link_to project.import_source, "https://bitbucket.org/#{project.import_source}", target: "_blank"
+            = link_to project.import_source, "https://bitbucket.org/#{project.import_source}", target: '_blank'
           %td
             = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
@@ -47,31 +48,41 @@
               = project.human_import_status_name
 
       - @repos.each do |repo|
-        %tr{id: "repo_#{repo["owner"]}___#{repo["slug"]}"}
+        %tr{ id: "repo_#{repo.owner}___#{repo.slug}" }
           %td
-            = link_to "#{repo["owner"]}/#{repo["slug"]}", "https://bitbucket.org/#{repo["owner"]}/#{repo["slug"]}", target: "_blank"
+            = link_to repo.full_name, "https://bitbucket.org/#{repo.full_name}", target: "_blank"
           %td.import-target
-            = import_project_target(repo['owner'], repo['slug'])
+            %fieldset.row
+            .input-group
+              .project-path.input-group-btn
+                - 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 }
+                - 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, 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
+            = button_tag class: 'btn btn-import js-add-to-import' do
               Import
-              = icon("spinner spin", class: "loading-icon")
+              = icon('spinner spin', class: 'loading-icon')
       - @incompatible_repos.each do |repo|
-        %tr{id: "repo_#{repo["owner"]}___#{repo["slug"]}"}
+        %tr{ id: "repo_#{repo.owner}___#{repo.slug}" }
           %td
-            = link_to "#{repo["owner"]}/#{repo["slug"]}", "https://bitbucket.org/#{repo["owner"]}/#{repo["slug"]}", target: "_blank"
+            = link_to repo.full_name, "https://bitbucket.org/#{repo.full_name}", target: '_blank'
           %td.import-target
           %td.import-actions-job-status
-            = label_tag "Incompatible Project", nil, class: "label label-danger"
+            = label_tag 'Incompatible Project', nil, class: 'label label-danger'
 
 - if @incompatible_repos.any?
   %p
     One or more of your Bitbucket projects cannot be imported into GitLab
     directly because they use Subversion or Mercurial for version control,
     rather than Git. Please convert
-    = link_to "them to Git,", "https://www.atlassian.com/git/tutorials/migrating-overview"
+    = link_to 'them to Git,', 'https://www.atlassian.com/git/tutorials/migrating-overview'
     and go through the
-    = link_to "import flow", status_import_bitbucket_path, "data-no-turbolink" => "true"
+    = link_to 'import flow', status_import_bitbucket_path, 'data-no-turbolink' => 'true'
     again.
 
 .js-importer-status{ data: { jobs_import_path: "#{jobs_import_bitbucket_path}", import_path: "#{import_bitbucket_path}" } }
diff --git a/app/views/import/fogbugz/status.html.haml b/app/views/import/fogbugz/status.html.haml
index c8a6fa1aa9e..97e5e51abe0 100644
--- a/app/views/import/fogbugz/status.html.haml
+++ b/app/views/import/fogbugz/status.html.haml
@@ -29,7 +29,7 @@
         %th Status
     %tbody
       - @already_added_projects.each do |project|
-        %tr{id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}"}
+        %tr{ id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}" }
           %td
             = project.import_source
           %td
@@ -46,7 +46,7 @@
               = project.human_import_status_name
 
       - @repos.each do |repo|
-        %tr{id: "repo_#{repo.id}"}
+        %tr{ id: "repo_#{repo.id}" }
           %td
             = repo.name
           %td.import-target
diff --git a/app/views/import/gitea/new.html.haml b/app/views/import/gitea/new.html.haml
new file mode 100644
index 00000000000..02a116f996b
--- /dev/null
+++ b/app/views/import/gitea/new.html.haml
@@ -0,0 +1,23 @@
+- page_title "Gitea Import"
+- header_title "Projects", root_path
+
+%h3.page-title
+  = custom_icon('go_logo')
+  Import Projects from Gitea
+
+%p
+  To get started, please enter your Gitea Host URL and a
+  = 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'
+    .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'
+    .col-sm-4
+      = text_field_tag :personal_access_token, nil, class: 'form-control'
+  .form-actions
+    = submit_tag 'List Your Gitea Repositories', class: 'btn btn-create'
diff --git a/app/views/import/gitea/status.html.haml b/app/views/import/gitea/status.html.haml
new file mode 100644
index 00000000000..589ca27e45d
--- /dev/null
+++ b/app/views/import/gitea/status.html.haml
@@ -0,0 +1,7 @@
+- page_title "Gitea Import"
+- header_title "Projects", root_path
+%h3.page-title
+  = custom_icon('go_logo')
+  Import Projects from Gitea
+
+= render 'import/githubish_status', provider: 'gitea'
diff --git a/app/views/import/github/status.html.haml b/app/views/import/github/status.html.haml
index 4c721d40b55..0fe578a0036 100644
--- a/app/views/import/github/status.html.haml
+++ b/app/views/import/github/status.html.haml
@@ -1,64 +1,6 @@
-- page_title "GitHub import"
+- page_title "GitHub Import"
 - header_title "Projects", root_path
 %h3.page-title
-  %i.fa.fa-github
-  Import projects from GitHub
+  = icon 'github', text: 'Import Projects from GitHub'
 
-%p.light
-  Select projects you want to import.
-%hr
-%p
-  = button_tag class: "btn btn-import btn-success js-import-all" do
-    Import all projects
-    = icon("spinner spin", class: "loading-icon")
-
-.table-responsive
-  %table.table.import-jobs
-    %colgroup.import-jobs-from-col
-    %colgroup.import-jobs-to-col
-    %colgroup.import-jobs-status-col
-    %thead
-      %tr
-        %th From GitHub
-        %th To GitLab
-        %th Status
-    %tbody
-      - @already_added_projects.each do |project|
-        %tr{id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}"}
-          %td
-            = github_project_link(project.import_source)
-          %td
-            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
-          %td.job-status
-            - if project.import_status == 'finished'
-              %span
-                %i.fa.fa-check
-                done
-            - elsif project.import_status == 'started'
-              %i.fa.fa-spinner.fa-spin
-              started
-            - else
-              = project.human_import_status_name
-
-      - @repos.each do |repo|
-        %tr{id: "repo_#{repo.id}"}
-          %td
-            = github_project_link(repo.full_name)
-          %td.import-target
-            %fieldset.row
-            .input-group
-              .project-path.input-group-btn
-                - 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 }
-                - 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, 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
-              Import
-              = icon("spinner spin", class: "loading-icon")
-
-.js-importer-status{ data: { jobs_import_path: "#{jobs_import_github_path}", import_path: "#{import_github_path}" } }
+= render 'import/githubish_status', provider: 'github'
diff --git a/app/views/import/gitlab/status.html.haml b/app/views/import/gitlab/status.html.haml
index d31fc2e6adb..d5b88709a34 100644
--- a/app/views/import/gitlab/status.html.haml
+++ b/app/views/import/gitlab/status.html.haml
@@ -24,7 +24,7 @@
         %th Status
     %tbody
       - @already_added_projects.each do |project|
-        %tr{id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}"}
+        %tr{ id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}" }
           %td
             = link_to project.import_source, "https://gitlab.com/#{project.import_source}", target: "_blank"
           %td
@@ -41,7 +41,7 @@
               = project.human_import_status_name
 
       - @repos.each do |repo|
-        %tr{id: "repo_#{repo["id"]}"}
+        %tr{ id: "repo_#{repo["id"]}" }
           %td
             = link_to repo["path_with_namespace"], "https://gitlab.com/#{repo["path_with_namespace"]}", target: "_blank"
           %td.import-target
diff --git a/app/views/import/google_code/new.html.haml b/app/views/import/google_code/new.html.haml
index 5d2f149cd5f..336becd229e 100644
--- a/app/views/import/google_code/new.html.haml
+++ b/app/views/import/google_code/new.html.haml
@@ -45,7 +45,7 @@
       %p
         Upload <code>GoogleCodeProjectHosting.json</code> here:
       %p
-        %input{type: "file", name: "dump_file", id: "dump_file"}
+        %input{ type: "file", name: "dump_file", id: "dump_file" }
     %li
       %p
         Do you want to customize how Google Code email addresses and usernames are imported into GitLab?
diff --git a/app/views/import/google_code/status.html.haml b/app/views/import/google_code/status.html.haml
index e79f122940a..9f1507cade6 100644
--- a/app/views/import/google_code/status.html.haml
+++ b/app/views/import/google_code/status.html.haml
@@ -34,7 +34,7 @@
         %th Status
     %tbody
       - @already_added_projects.each do |project|
-        %tr{id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}"}
+        %tr{ id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}" }
           %td
             = link_to project.import_source, "https://code.google.com/p/#{project.import_source}", target: "_blank"
           %td
@@ -51,7 +51,7 @@
               = project.human_import_status_name
 
       - @repos.each do |repo|
-        %tr{id: "repo_#{repo.id}"}
+        %tr{ id: "repo_#{repo.id}" }
           %td
             = link_to repo.name, "https://code.google.com/p/#{repo.name}", target: "_blank"
           %td.import-target
@@ -61,7 +61,7 @@
               Import
               = icon("spinner spin", class: "loading-icon")
       - @incompatible_repos.each do |repo|
-        %tr{id: "repo_#{repo.id}"}
+        %tr{ id: "repo_#{repo.id}" }
           %td
             = link_to repo.name, "https://code.google.com/p/#{repo.name}", target: "_blank"
           %td.import-target
diff --git a/app/views/kaminari/gitlab/_next_page.html.haml b/app/views/kaminari/gitlab/_next_page.html.haml
index 125f09777ba..c93dc7a50e8 100644
--- a/app/views/kaminari/gitlab/_next_page.html.haml
+++ b/app/views/kaminari/gitlab/_next_page.html.haml
@@ -6,8 +6,8 @@
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
 - if current_page.last?
-  %li{ class: "next disabled" }
+  %li.next.disabled
     %span= raw(t 'views.pagination.next')
 - else
-  %li{ class: "next" }
+  %li.next
     = link_to raw(t 'views.pagination.next'), url, rel: 'next', remote: remote
diff --git a/app/views/kaminari/gitlab/_page.html.haml b/app/views/kaminari/gitlab/_page.html.haml
index 750aed8f329..cefe0066a8f 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{class: "page#{' active' if page.current?}#{' sibling' if page.next? || page.prev?}"}
-  = link_to page, url, {remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil}
+%li{ class: "page#{' active' if page.current?}#{' sibling' if page.next? || page.prev?}" }
+  = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil }
diff --git a/app/views/kaminari/gitlab/_paginator.html.haml b/app/views/kaminari/gitlab/_paginator.html.haml
index f5e0d2ed3f3..8fe6bd653ae 100644
--- a/app/views/kaminari/gitlab/_paginator.html.haml
+++ b/app/views/kaminari/gitlab/_paginator.html.haml
@@ -6,7 +6,7 @@
 -#    remote:        data-remote
 -#    paginator:     the paginator that renders the pagination tags inside
 = paginator.render do
-  %div.gl-pagination
+  .gl-pagination
     %ul.pagination.clearfix
       - unless current_page.first?
         = first_page_tag unless total_pages < 5 # As kaminari will always show the first 5 pages
@@ -19,4 +19,3 @@
       = next_page_tag
       - unless current_page.last?
         = last_page_tag unless total_pages < 5
-
diff --git a/app/views/kaminari/gitlab/_prev_page.html.haml b/app/views/kaminari/gitlab/_prev_page.html.haml
index 7edf10498a8..b7c6caf7ff4 100644
--- a/app/views/kaminari/gitlab/_prev_page.html.haml
+++ b/app/views/kaminari/gitlab/_prev_page.html.haml
@@ -6,8 +6,8 @@
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
 - if current_page.first?
-  %li{ class: "prev disabled" }
+  %li.prev.disabled
     %span= raw(t 'views.pagination.previous')
 - else
-  %li{ class: "prev" }
+  %li.prev
     = link_to raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 3e488cf73b9..3096f0ee19e 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -1,27 +1,27 @@
 - page_description brand_title unless page_description
 
 - site_name = "GitLab"
-%head{prefix: "og: http://ogp.me/ns#"}
-  %meta{charset: "utf-8"}
-  %meta{'http-equiv' => 'X-UA-Compatible', content: 'IE=edge'}
+%head{ prefix: "og: http://ogp.me/ns#" }
+  %meta{ charset: "utf-8" }
+  %meta{ 'http-equiv' => 'X-UA-Compatible', content: 'IE=edge' }
 
   -# Open Graph - http://ogp.me/
-  %meta{property: 'og:type',        content: "object"}
-  %meta{property: 'og:site_name',   content: site_name}
-  %meta{property: 'og:title',       content: page_title}
-  %meta{property: 'og:description', content: page_description}
-  %meta{property: 'og:image',       content: page_image}
-  %meta{property: 'og:url',         content: request.base_url + request.fullpath}
+  %meta{ property: 'og:type',        content: "object" }
+  %meta{ property: 'og:site_name',   content: site_name }
+  %meta{ property: 'og:title',       content: page_title }
+  %meta{ property: 'og:description', content: page_description }
+  %meta{ property: 'og:image',       content: page_image }
+  %meta{ property: 'og:url',         content: request.base_url + request.fullpath }
 
   -# Twitter Card - https://dev.twitter.com/cards/types/summary
-  %meta{property: 'twitter:card',         content: "summary"}
-  %meta{property: 'twitter:title',        content: page_title}
-  %meta{property: 'twitter:description',  content: page_description}
-  %meta{property: 'twitter:image',        content: page_image}
+  %meta{ property: 'twitter:card',         content: "summary" }
+  %meta{ property: 'twitter:title',        content: page_title }
+  %meta{ property: 'twitter:description',  content: page_description }
+  %meta{ property: 'twitter:image',        content: page_image }
   = page_card_meta_tags
 
   %title= page_title(site_name)
-  %meta{name: "description", content: page_description}
+  %meta{ name: "description", content: page_description }
 
   = favicon_link_tag 'favicon.ico'
 
@@ -36,20 +36,20 @@
   = csrf_meta_tags
 
   - unless browser.safari?
-    %meta{name: 'referrer', content: 'origin-when-cross-origin'}
-  %meta{name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1'}
-  %meta{name: 'theme-color', content: '#474D57'}
+    %meta{ name: 'referrer', content: 'origin-when-cross-origin' }
+  %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
+  %meta{ name: 'theme-color', content: '#474D57' }
 
   -# Apple Safari/iOS home screen icons
   = favicon_link_tag 'touch-icon-iphone.png',        rel: 'apple-touch-icon'
   = favicon_link_tag 'touch-icon-ipad.png',          rel: 'apple-touch-icon', sizes: '76x76'
   = favicon_link_tag 'touch-icon-iphone-retina.png', rel: 'apple-touch-icon', sizes: '120x120'
   = favicon_link_tag 'touch-icon-ipad-retina.png',   rel: 'apple-touch-icon', sizes: '152x152'
-  %link{rel: 'mask-icon', href: image_path('logo.svg'), color: 'rgb(226, 67, 41)'}
+  %link{ rel: 'mask-icon', href: image_path('logo.svg'), color: 'rgb(226, 67, 41)' }
 
   -# Windows 8 pinned site tile
-  %meta{name: 'msapplication-TileImage', content: image_path('msapplication-tile.png')}
-  %meta{name: 'msapplication-TileColor', content: '#30353E'}
+  %meta{ name: 'msapplication-TileImage', content: image_path('msapplication-tile.png') }
+  %meta{ name: 'msapplication-TileColor', content: '#30353E' }
 
   = yield :meta_tags
 
diff --git a/app/views/layouts/_init_auto_complete.html.haml b/app/views/layouts/_init_auto_complete.html.haml
index e138ebab018..3daa1e90a8c 100644
--- a/app/views/layouts/_init_auto_complete.html.haml
+++ b/app/views/layouts/_init_auto_complete.html.haml
@@ -3,6 +3,14 @@
 
 - if project
   :javascript
-    GitLab.GfmAutoComplete.dataSource = "#{autocomplete_sources_namespace_project_path(project.namespace, project, type: noteable_type, type_id: params[:id])}"
-    GitLab.GfmAutoComplete.cachedData = undefined;
-    GitLab.GfmAutoComplete.setup();
+    gl.GfmAutoComplete.dataSources = {
+      emojis: "#{emojis_namespace_project_autocomplete_sources_path(project.namespace, project)}",
+      members: "#{members_namespace_project_autocomplete_sources_path(project.namespace, project, type: noteable_type, type_id: params[:id])}",
+      issues: "#{issues_namespace_project_autocomplete_sources_path(project.namespace, project)}",
+      mergeRequests: "#{merge_requests_namespace_project_autocomplete_sources_path(project.namespace, project)}",
+      labels: "#{labels_namespace_project_autocomplete_sources_path(project.namespace, project)}",
+      milestones: "#{milestones_namespace_project_autocomplete_sources_path(project.namespace, project)}",
+      commands: "#{commands_namespace_project_autocomplete_sources_path(project.namespace, project, type: noteable_type, type_id: params[:id])}"
+    };
+
+    gl.GfmAutoComplete.setup();
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index a9a0b149049..54d02ee8e4b 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -22,9 +22,10 @@
         = render "layouts/nav/#{nav}"
   .content-wrapper{ class: "#{layout_nav_class}" }
     = yield :sub_nav
-    = render "layouts/broadcast"
-    = render "layouts/flash"
-    = yield :flash_message
+    .alert-wrapper
+      = render "layouts/broadcast"
+      = render "layouts/flash"
+      = yield :flash_message
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
       .content{ id: "content-body" }
         = yield
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index 8e65bd12c56..0e64ebd71b8 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -6,7 +6,7 @@
   - group_data_attrs = { group_path: j(@group.path), name: @group.name, issues_path: issues_group_path(j(@group.path)), mr_path: merge_requests_group_path(j(@group.path)) }
 - if @project && @project.persisted?
   - project_data_attrs = { project_path: j(@project.path), name: j(@project.name), issues_path: namespace_project_issues_path(@project.namespace, @project), mr_path: namespace_project_merge_requests_path(@project.namespace, @project) }
-.search.search-form{class: "#{'has-location-badge' if label.present?}"}
+.search.search-form{ class: "#{'has-location-badge' if label.present?}" }
   = form_tag search_path, method: :get, class: 'navbar-form' do |f|
     .search-input-container
       - if label.present?
@@ -44,4 +44,4 @@
       = hidden_field_tag :snippets, true
     = hidden_field_tag :repository_ref, @ref
     = button_tag 'Go' if ENV['RAILS_ENV'] == 'test'
-    .search-autocomplete-opts.hide{:'data-autocomplete-path' => search_autocomplete_path, :'data-autocomplete-project-id' => @project.try(:id), :'data-autocomplete-project-ref' => @ref }
+    .search-autocomplete-opts.hide{ :'data-autocomplete-path' => search_autocomplete_path, :'data-autocomplete-project-id' => @project.try(:id), :'data-autocomplete-project-ref' => @ref }
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 6c2285fa2b6..935517d4913 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html{ lang: "en", class: "#{page_class}" }
   = render "layouts/head"
-  %body{class: "#{user_application_theme}", data: {page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}"}}
+  %body{ class: "#{user_application_theme}", data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}" } }
     = Gon::Base.render_data
 
     -# Ideally this would be inside the head, but turbolinks only evaluates page-specific JS in the body.
diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml
index afd9958f073..3368a9beb29 100644
--- a/app/views/layouts/devise.html.haml
+++ b/app/views/layouts/devise.html.haml
@@ -1,7 +1,7 @@
 !!! 5
-%html{ lang: "en", class: "devise-layout-html"}
+%html.devise-layout-html
   = render "layouts/head"
-  %body.ui_charcoal.login-page.application.navless{ data: { page: body_data_page }}
+  %body.ui_charcoal.login-page.application.navless{ data: { page: body_data_page } }
     .page-wrap
       = Gon::Base.render_data
       = render "layouts/header/empty"
diff --git a/app/views/layouts/devise_empty.html.haml b/app/views/layouts/devise_empty.html.haml
index 6bd427b02ac..7466423a934 100644
--- a/app/views/layouts/devise_empty.html.haml
+++ b/app/views/layouts/devise_empty.html.haml
@@ -1,5 +1,5 @@
 !!! 5
-%html{ lang: "en"}
+%html{ lang: "en" }
   = render "layouts/head"
   %body.ui_charcoal.login-page.application.navless
     = Gon::Base.render_data
diff --git a/app/views/layouts/devise_mailer.html.haml b/app/views/layouts/devise_mailer.html.haml
index c258eafdd51..e1e1f9ae516 100644
--- a/app/views/layouts/devise_mailer.html.haml
+++ b/app/views/layouts/devise_mailer.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html
   %head
-    %meta(content='text/html; charset=UTF-8' http-equiv='Content-Type')
+    %meta{ content: 'text/html; charset=UTF-8', 'http-equiv'=> 'Content-Type' }
     = stylesheet_link_tag 'mailers/devise'
 
   %body
@@ -9,7 +9,7 @@
       %tr
         %td
           %table#header
-            %td{valign: "top"}
+            %td{ valign: "top" }
               = image_tag('mailers/gitlab_header_logo.png', id: 'logo', alt: 'GitLab Wordmark')
 
           %table#body
diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml
index a3b925f6afd..6d9ec043590 100644
--- a/app/views/layouts/errors.html.haml
+++ b/app/views/layouts/errors.html.haml
@@ -1,7 +1,7 @@
 !!! 5
-%html{ lang: "en"}
+%html{ lang: "en" }
   %head
-    %meta{:content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport"}
+    %meta{ :content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport" }
     %title= yield(:title)
     :css
       body {
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 5456be77aab..9ecc0d11c95 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,11 +1,11 @@
 %header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
-  %a{ href: "#content-body", tabindex: "1", class: "sr-only gl-accessibility" } Skip to content
-  %div{ class: "container-fluid" }
+  %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
+  .container-fluid
     .header-content
       %button.side-nav-toggle{ type: 'button', "aria-label" => "Toggle global navigation" }
         %span.sr-only Toggle navigation
         = icon('bars')
-      %button.navbar-toggle{type: 'button'}
+      %button.navbar-toggle{ type: 'button' }
         %span.sr-only Toggle navigation
         = icon('ellipsis-v')
 
@@ -44,7 +44,7 @@
                   %li
                     = link_to "Profile", current_user, class: 'profile-link', aria: { label: "Profile" }, data: { user: current_user.username }
                   %li
-                    = link_to "Profile Settings", profile_path, aria: { label: "Profile Settings" }
+                    = link_to "Settings", profile_path, aria: { label: "Settings" }
                   %li
                     = link_to "Help", help_path, aria: { label: "Help" }
                   %li.divider
diff --git a/app/views/layouts/nav/_admin_settings.html.haml b/app/views/layouts/nav/_admin_settings.html.haml
index 38e9b80d129..9de0e12a826 100644
--- a/app/views/layouts/nav/_admin_settings.html.haml
+++ b/app/views/layouts/nav/_admin_settings.html.haml
@@ -1,6 +1,6 @@
 .controls
   .dropdown.admin-settings-dropdown
-    %a.dropdown-new.btn.btn-default{href: '#', 'data-toggle' => 'dropdown'}
+    %a.dropdown-new.btn.btn-default{ href: '#', 'data-toggle' => 'dropdown' }
       = icon('cog')
       = icon('caret-down')
     %ul.dropdown-menu.dropdown-menu-align-right
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index 817e4bebb05..205d23178d2 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -35,3 +35,7 @@
       = link_to dashboard_snippets_path, title: 'Snippets' do
         %span
           Snippets
+
+    = link_to help_path, title: 'About GitLab CE', class: 'about-gitlab' do
+      %span
+        About GitLab CE
diff --git a/app/views/layouts/nav/_group_settings.html.haml b/app/views/layouts/nav/_group_settings.html.haml
index 1579d8f1662..30feb6813b4 100644
--- a/app/views/layouts/nav/_group_settings.html.haml
+++ b/app/views/layouts/nav/_group_settings.html.haml
@@ -5,7 +5,7 @@
   - if can_admin_group || can_edit
     .controls
       .dropdown.group-settings-dropdown
-        %a.dropdown-new.btn.btn-default#group-settings-button{href: '#', 'data-toggle' => 'dropdown'}
+        %a.dropdown-new.btn.btn-default#group-settings-button{ href: '#', 'data-toggle' => 'dropdown' }
           = icon('cog')
           = icon('caret-down')
         %ul.dropdown-menu.dropdown-menu-align-right
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index 904d11c2cf4..a8bbd67de80 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -1,7 +1,7 @@
 - if current_user
   .controls
     .dropdown.project-settings-dropdown
-      %a.dropdown-new.btn.btn-default#project-settings-button{href: '#', 'data-toggle' => 'dropdown'}
+      %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
diff --git a/app/views/layouts/nav/_project_settings.html.haml b/app/views/layouts/nav/_project_settings.html.haml
index 613b8b7d301..0fb2bb460cb 100644
--- a/app/views/layouts/nav/_project_settings.html.haml
+++ b/app/views/layouts/nav/_project_settings.html.haml
@@ -1,14 +1,9 @@
 - if project_nav_tab? :team
-  = nav_link(controller: [:project_members, :teams]) do
-    = link_to namespace_project_project_members_path(@project.namespace, @project), title: 'Members', class: 'team-tab tab' do
+  = nav_link(controller: [:members, :teams]) do
+    = link_to namespace_project_settings_members_path(@project.namespace, @project), title: 'Members', class: 'team-tab tab' do
       %span
         Members
 - if can_edit
-  - if @project.allowed_to_share_with_group?
-    = nav_link(controller: :group_links) do
-      = link_to namespace_project_group_links_path(@project.namespace, @project), title: "Groups" do
-        %span
-          Groups
   = nav_link(controller: :deploy_keys) do
     = link_to namespace_project_deploy_keys_path(@project.namespace, @project), title: 'Deploy Keys' do
       %span
diff --git a/app/views/layouts/notify.html.haml b/app/views/layouts/notify.html.haml
index 1ec4c3f0c67..76268c1b705 100644
--- a/app/views/layouts/notify.html.haml
+++ b/app/views/layouts/notify.html.haml
@@ -1,14 +1,14 @@
-%html{lang: "en"}
+%html{ lang: "en" }
   %head
-    %meta{content: "text/html; charset=utf-8", "http-equiv" => "Content-Type"}
+    %meta{ content: "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
     %title
       GitLab
     = stylesheet_link_tag 'notify'
     = yield :head
   %body
-    %div.content
+    .content
       = yield
-    %div.footer{style: "margin-top: 10px;"}
+    .footer{ style: "margin-top: 10px;" }
       %p
         &mdash;
         %br
diff --git a/app/views/layouts/profile.html.haml b/app/views/layouts/profile.html.haml
index b77d3402a2e..0ee8a57dbd4 100644
--- a/app/views/layouts/profile.html.haml
+++ b/app/views/layouts/profile.html.haml
@@ -1,5 +1,5 @@
-- page_title    "Profile Settings"
-- header_title  "Profile Settings", profile_path unless header_title
+- page_title    "User Settings"
+- header_title  "User Settings", profile_path unless header_title
 - sidebar       "dashboard"
 - nav           "profile"
 
diff --git a/app/views/notify/build_fail_email.html.haml b/app/views/notify/build_fail_email.html.haml
index 4bf7c1f4d64..a744c4be9d6 100644
--- a/app/views/notify/build_fail_email.html.haml
+++ b/app/views/notify/build_fail_email.html.haml
@@ -1,5 +1,5 @@
 - content_for :header do
-  %h1{style: "background: #c40834; color: #FFF; font: normal 20px Helvetica, Arial, sans-serif; margin: 0; padding: 5px 10px; line-height: 32px; font-size: 16px;"}
+  %h1{ style: "background: #c40834; color: #FFF; font: normal 20px Helvetica, Arial, sans-serif; margin: 0; padding: 5px 10px; line-height: 32px; font-size: 16px;" }
     GitLab (build failed)
 
 %h3
diff --git a/app/views/notify/build_success_email.html.haml b/app/views/notify/build_success_email.html.haml
index 252a5b7152c..8c2e6db1426 100644
--- a/app/views/notify/build_success_email.html.haml
+++ b/app/views/notify/build_success_email.html.haml
@@ -1,5 +1,5 @@
 - content_for :header do
-  %h1{style: "background: #38CF5B; color: #FFF; font: normal 20px Helvetica, Arial, sans-serif; margin: 0; padding: 5px 10px; line-height: 32px; font-size: 16px;"}
+  %h1{ style: "background: #38CF5B; color: #FFF; font: normal 20px Helvetica, Arial, sans-serif; margin: 0; padding: 5px 10px; line-height: 32px; font-size: 16px;" }
     GitLab (build successful)
 
 %h3
diff --git a/app/views/notify/links/ci/builds/_build.html.haml b/app/views/notify/links/ci/builds/_build.html.haml
index 38cd4e5e145..d35b3839171 100644
--- a/app/views/notify/links/ci/builds/_build.html.haml
+++ b/app/views/notify/links/ci/builds/_build.html.haml
@@ -1,2 +1,2 @@
-%a{href: pipeline_build_url(pipeline, build), style: "color:#3777b0;text-decoration:none;"}
+%a{ href: pipeline_build_url(pipeline, build), style: "color:#3777b0;text-decoration:none;" }
   = build.name
diff --git a/app/views/notify/new_issue_email.html.haml b/app/views/notify/new_issue_email.html.haml
index f42b150c0d6..d1855568215 100644
--- a/app/views/notify/new_issue_email.html.haml
+++ b/app/views/notify/new_issue_email.html.haml
@@ -1,7 +1,7 @@
 - if current_application_settings.email_author_in_body
   %div
     #{link_to @issue.author_name, user_url(@issue.author)} wrote:
--if @issue.description
+- if @issue.description
   = markdown(@issue.description, pipeline: :email, author: @issue.author)
 
 - if @issue.assignee_id.present?
diff --git a/app/views/notify/new_mention_in_issue_email.html.haml b/app/views/notify/new_mention_in_issue_email.html.haml
index 4f3d36bd9ca..02f21baa368 100644
--- a/app/views/notify/new_mention_in_issue_email.html.haml
+++ b/app/views/notify/new_mention_in_issue_email.html.haml
@@ -4,7 +4,7 @@
 - if current_application_settings.email_author_in_body
   %div
     #{link_to @issue.author_name, user_url(@issue.author)} wrote:
--if @issue.description
+- if @issue.description
   = markdown(@issue.description, pipeline: :email, author: @issue.author)
 
 - if @issue.assignee_id.present?
diff --git a/app/views/notify/new_mention_in_merge_request_email.html.haml b/app/views/notify/new_mention_in_merge_request_email.html.haml
index 32aedb9e6b9..cbd434be02a 100644
--- a/app/views/notify/new_mention_in_merge_request_email.html.haml
+++ b/app/views/notify/new_mention_in_merge_request_email.html.haml
@@ -11,5 +11,5 @@
   %p
     Assignee: #{@merge_request.author_name} &rarr; #{@merge_request.assignee_name}
 
--if @merge_request.description
+- if @merge_request.description
   = markdown(@merge_request.description, pipeline: :email, author: @merge_request.author)
diff --git a/app/views/notify/new_merge_request_email.html.haml b/app/views/notify/new_merge_request_email.html.haml
index 158404de396..8890b300f7d 100644
--- a/app/views/notify/new_merge_request_email.html.haml
+++ b/app/views/notify/new_merge_request_email.html.haml
@@ -8,5 +8,5 @@
   %p
     Assignee: #{@merge_request.author_name} &rarr; #{@merge_request.assignee_name}
 
--if @merge_request.description
+- if @merge_request.description
   = markdown(@merge_request.description, pipeline: :email, author: @merge_request.author)
diff --git a/app/views/notify/pipeline_failed_email.html.haml b/app/views/notify/pipeline_failed_email.html.haml
index 001d9c48555..82c7fe229b8 100644
--- a/app/views/notify/pipeline_failed_email.html.haml
+++ b/app/views/notify/pipeline_failed_email.html.haml
@@ -1,9 +1,9 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-%html{lang: "en"}
+%html{ lang: "en" }
   %head
-    %meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
-    %meta{content: "width=device-width, initial-scale=1", name: "viewport"}/
-    %meta{content: "IE=edge", "http-equiv" => "X-UA-Compatible"}/
+    %meta{ content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type" }/
+    %meta{ content: "width=device-width, initial-scale=1", name: "viewport" }/
+    %meta{ content: "IE=edge", "http-equiv" => "X-UA-Compatible" }/
     %title= message.subject
     :css
       /* CLIENT-SPECIFIC STYLES */
@@ -41,139 +41,139 @@
               padding-right: 10px !important;
           }
       }
-  %body{style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"}
-    %table#body{border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;"}
+  %body{ style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+    %table#body{ border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;" }
       %tbody
         %tr.line
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;"}  
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;" }  
         %tr.header
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;"}
-            %img{alt: "GitLab", height: "50", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo.gif'), width: "55"}/
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            %img{ alt: "GitLab", height: "50", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo.gif'), width: "55" }/
         %tr
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"}
-            %table.wrapper{border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;"}
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+            %table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;" }
               %tbody
                 %tr
-                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;"}
-                    %table.content{border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;"}
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+                    %table.content{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;" }
                       %tbody
                         %tr.alert
-                          %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;background-color:#d22f57;color:#ffffff;"}
-                            %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;"}
+                          %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;background-color:#d22f57;color:#ffffff;" }
+                            %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;" }
                               %tbody
                                 %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;"}
-                                    %img{alt: "x", height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-x-red-inverted.gif'), style: "display:block;", width: "13"}/
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;"}
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;" }
+                                    %img{ alt: "x", height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-x-red-inverted.gif'), style: "display:block;", width: "13" }/
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;" }
                                     Your pipeline has failed.
                         %tr.spacer
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;"}
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
                             &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%;"}
+                          %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%;" }
                               %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
-                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;"}
+                                  %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
+                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;" }
                                     - namespace_name = @project.group ? @project.group.name : @project.namespace.owner.name
                                     - namespace_url = @project.group ? group_url(@project.group) : user_url(@project.namespace.owner)
-                                    %a.muted{href: namespace_url, style: "color:#333333;text-decoration:none;"}
+                                    %a.muted{ href: namespace_url, style: "color:#333333;text-decoration:none;" }
                                       = namespace_name
                                     \/
-                                    %a.muted{href: project_url(@project), style: "color:#333333;text-decoration:none;"}
+                                    %a.muted{ href: project_url(@project), style: "color:#333333;text-decoration:none;" }
                                       = @project.name
                                 %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;border-top:1px solid #ededed;"} Branch
-                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
+                                  %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;border-top:1px solid #ededed;" } Branch
+                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+                                    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
                                       %tbody
                                         %tr
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img{height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), style: "display:block;", width: "13"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
-                                            %a.muted{href: commits_url(@pipeline), style: "color:#333333;text-decoration:none;"}
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                                            %img{ height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), style: "display:block;", width: "13", alt: "Branch icon" }/
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                                            %a.muted{ href: commits_url(@pipeline), style: "color:#333333;text-decoration:none;" }
                                               = @pipeline.ref
                                 %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;border-top:1px solid #ededed;"} Commit
-                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
+                                  %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;border-top:1px solid #ededed;" } Commit
+                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+                                    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
                                       %tbody
                                         %tr
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img{height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-commit-gray.gif'), style: "display:block;", width: "13"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
-                                            %a{href: commit_url(@pipeline), style: "color:#3777b0;text-decoration:none;"}
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                                            %img{ height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-commit-gray.gif'), style: "display:block;", width: "13", alt: "Commit icon" }/
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                                            %a{ href: commit_url(@pipeline), style: "color:#3777b0;text-decoration:none;" }
                                               = @pipeline.short_sha
                                             - if @merge_request
                                               in
-                                              %a{href: merge_request_url(@merge_request), style: "color:#3777b0;text-decoration:none;"}
+                                              %a{ href: merge_request_url(@merge_request), style: "color:#3777b0;text-decoration:none;" }
                                                 = @merge_request.to_reference
-                                    .commit{style: "color:#5c5c5c;font-weight:300;"}
+                                    .commit{ style: "color:#5c5c5c;font-weight:300;" }
                                       = @pipeline.git_commit_message.truncate(50)
                                 %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;border-top:1px solid #ededed;"} Author
-                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
+                                  %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;border-top:1px solid #ededed;" } Author
+                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+                                    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
                                       %tbody
                                         %tr
                                           - commit = @pipeline.commit
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img.avatar{height: "24", src: avatar_icon(commit.author || commit.author_email, 24), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                                            %img.avatar{ height: "24", src: avatar_icon(commit.author || commit.author_email, 24), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24", alt: "Avatar" }/
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
                                             - if commit.author
-                                              %a.muted{href: user_url(commit.author), style: "color:#333333;text-decoration:none;"}
+                                              %a.muted{ href: user_url(commit.author), style: "color:#333333;text-decoration:none;" }
                                                 = commit.author.name
                                             - else
                                               %span
                                                 = commit.author_name
                         %tr.spacer
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;"}
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
                             &nbsp;
                         - failed = @pipeline.statuses.latest.failed
                         %tr.pre-section
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333333;font-size:15px;font-weight:400;line-height:1.4;padding:15px 0;"}
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333333;font-size:15px;font-weight:400;line-height:1.4;padding:15px 0;" }
                             Pipeline
-                            %a{href: pipeline_url(@pipeline), style: "color:#3777b0;text-decoration:none;"}
+                            %a{ href: pipeline_url(@pipeline), style: "color:#3777b0;text-decoration:none;" }
                               = "\##{@pipeline.id}"
                             had
                             = failed.size
                             failed
                             = "#{'build'.pluralize(failed.size)}."
                         %tr.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;"}
+                          %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
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;border-top:0;border-radius:0 0 3px 3px;"}
-                            %table.builds{border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:collapse;"}
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;border-top:0;border-radius:0 0 3px 3px;" }
+                            %table.builds{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:collapse;" }
                               %tbody
                                 - failed.each do |build|
                                   %tr.build-state
-                                    %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:20px 0;color:#8c8c8c;font-weight:500;font-size:15px;"}
-                                      %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
+                                    %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:20px 0;color:#8c8c8c;font-weight:500;font-size:15px;" }
+                                      %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
                                         %tbody
                                           %tr
-                                            %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8c8c8c;font-weight:500;font-size:15px;vertical-align:middle;padding-right:5px;"}
-                                              %img{alt: "x", height: "10", src: image_url('mailers/ci_pipeline_notif_v1/icon-x-red.gif'), style: "display:block;", width: "10"}/
-                                            %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8c8c8c;font-weight:500;font-size:15px;vertical-align:middle;"}
+                                            %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8c8c8c;font-weight:500;font-size:15px;vertical-align:middle;padding-right:5px;" }
+                                              %img{ alt: "x", height: "10", src: image_url('mailers/ci_pipeline_notif_v1/icon-x-red.gif'), style: "display:block;", width: "10" }/
+                                            %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8c8c8c;font-weight:500;font-size:15px;vertical-align:middle;" }
                                               = build.stage
-                                    %td{align: "right", style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:20px 0;color:#8c8c8c;font-weight:500;font-size:15px;"}
+                                    %td{ align: "right", style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:20px 0;color:#8c8c8c;font-weight:500;font-size:15px;" }
                                       = render "notify/links/#{build.to_partial_path}", pipeline: @pipeline, build: build
                                   %tr.build-log
                                     - if build.has_trace?
-                                      %td{colspan: "2", style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 0 15px;"}
-                                        %pre{style: "font-family:Monaco,'Lucida Console','Courier New',Courier,monospace;background-color:#fafafa;border-radius:3px;overflow:hidden;white-space:pre-wrap;word-break:break-all;font-size:13px;line-height:1.4;padding:12px;color:#333333;margin:0;"}
+                                      %td{ colspan: "2", style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 0 15px;" }
+                                        %pre{ style: "font-family:Monaco,'Lucida Console','Courier New',Courier,monospace;background-color:#fafafa;border-radius:3px;overflow:hidden;white-space:pre-wrap;word-break:break-all;font-size:13px;line-height:1.4;padding:12px;color:#333333;margin:0;" }
                                           = build.trace_html(last_lines: 10).html_safe
                                     - else
-                                      %td{colspan: "2"}
+                                      %td{ colspan: "2" }
         %tr.footer
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;"}
-            %img{alt: "GitLab", height: "33", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif'), style: "display:block;margin:0 auto 1em;", width: "90"}/
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            %img{ alt: "GitLab", height: "33", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif'), style: "display:block;margin:0 auto 1em;", width: "90" }/
             %div
-              %a{href: profile_notifications_url, style: "color:#3777b0;text-decoration:none;"} Manage all notifications
+              %a{ href: profile_notifications_url, style: "color:#3777b0;text-decoration:none;" } Manage all notifications
               &middot;
-              %a{href: help_url, style: "color:#3777b0;text-decoration:none;"} Help
+              %a{ href: help_url, style: "color:#3777b0;text-decoration:none;" } Help
             %div
               You're receiving this email because of your account on
               = succeed "." do
-                %a{href: root_url, style: "color:#3777b0;text-decoration:none;"}= Gitlab.config.gitlab.host
+                %a{ href: root_url, style: "color:#3777b0;text-decoration:none;" }= Gitlab.config.gitlab.host
diff --git a/app/views/notify/pipeline_success_email.html.haml b/app/views/notify/pipeline_success_email.html.haml
index 56c1949ab2b..6dddb3b6373 100644
--- a/app/views/notify/pipeline_success_email.html.haml
+++ b/app/views/notify/pipeline_success_email.html.haml
@@ -1,9 +1,9 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-%html{lang: "en"}
+%html{ lang: "en" }
   %head
-    %meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
-    %meta{content: "width=device-width, initial-scale=1", name: "viewport"}/
-    %meta{content: "IE=edge", "http-equiv" => "X-UA-Compatible"}/
+    %meta{ content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type" }/
+    %meta{ content: "width=device-width, initial-scale=1", name: "viewport" }/
+    %meta{ content: "IE=edge", "http-equiv" => "X-UA-Compatible" }/
     %title= message.subject
     :css
       /* CLIENT-SPECIFIC STYLES */
@@ -41,114 +41,114 @@
               padding-right: 10px !important;
           }
       }
-  %body{style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"}
-    %table#body{border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;"}
+  %body{ style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+    %table#body{ border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;" }
       %tbody
         %tr.line
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;"}  
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;" }  
         %tr.header
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;"}
-            %img{alt: "GitLab", height: "50", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo.gif'), width: "55"}/
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            %img{ alt: "GitLab", height: "50", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo.gif'), width: "55" }/
         %tr
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"}
-            %table.wrapper{border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;"}
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+            %table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;" }
               %tbody
                 %tr
-                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;"}
-                    %table.content{border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;"}
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+                    %table.content{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;" }
                       %tbody
                         %tr.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;"}
+                          %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
                                 %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;"}
-                                    %img{alt: "✓", height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-check-green-inverted.gif'), style: "display:block;", width: "13"}/
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;"}
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;" }
+                                    %img{ alt: "✓", height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-check-green-inverted.gif'), style: "display:block;", width: "13" }/
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;" }
                                     Your pipeline has passed.
                         %tr.spacer
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;"}
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
                             &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%;"}
+                          %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%;" }
                               %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
-                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;"}
+                                  %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
+                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;" }
                                     - namespace_name = @project.group ? @project.group.name : @project.namespace.owner.name
                                     - namespace_url = @project.group ? group_url(@project.group) : user_url(@project.namespace.owner)
-                                    %a.muted{href: namespace_url, style: "color:#333333;text-decoration:none;"}
+                                    %a.muted{ href: namespace_url, style: "color:#333333;text-decoration:none;" }
                                       = namespace_name
                                     \/
-                                    %a.muted{href: project_url(@project), style: "color:#333333;text-decoration:none;"}
+                                    %a.muted{ href: project_url(@project), style: "color:#333333;text-decoration:none;" }
                                       = @project.name
                                 %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;border-top:1px solid #ededed;"} Branch
-                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
+                                  %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;border-top:1px solid #ededed;" } Branch
+                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+                                    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
                                       %tbody
                                         %tr
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img{height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), style: "display:block;", width: "13"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
-                                            %a.muted{href: commits_url(@pipeline), style: "color:#333333;text-decoration:none;"}
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                                            %img{ height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), style: "display:block;", width: "13", alt: "Branch icon" }/
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                                            %a.muted{ href: commits_url(@pipeline), style: "color:#333333;text-decoration:none;" }
                                               = @pipeline.ref
                                 %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;border-top:1px solid #ededed;"} Commit
-                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
+                                  %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;border-top:1px solid #ededed;" } Commit
+                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+                                    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
                                       %tbody
                                         %tr
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img{height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-commit-gray.gif'), style: "display:block;", width: "13"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
-                                            %a{href: commit_url(@pipeline), style: "color:#3777b0;text-decoration:none;"}
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                                            %img{ height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-commit-gray.gif'), style: "display:block;", width: "13", alt: "Commit icon" }/
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                                            %a{ href: commit_url(@pipeline), style: "color:#3777b0;text-decoration:none;" }
                                               = @pipeline.short_sha
                                             - if @merge_request
                                               in
-                                              %a{href: merge_request_url(@merge_request), style: "color:#3777b0;text-decoration:none;"}
+                                              %a{ href: merge_request_url(@merge_request), style: "color:#3777b0;text-decoration:none;" }
                                                 = @merge_request.to_reference
-                                    .commit{style: "color:#5c5c5c;font-weight:300;"}
+                                    .commit{ style: "color:#5c5c5c;font-weight:300;" }
                                       = @pipeline.git_commit_message.truncate(50)
                                 %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;border-top:1px solid #ededed;"} Author
-                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
+                                  %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;border-top:1px solid #ededed;" } Author
+                                  %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;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+                                    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
                                       %tbody
                                         %tr
                                           - commit = @pipeline.commit
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img.avatar{height: "24", src: avatar_icon(commit.author || commit.author_email, 24), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                                            %img.avatar{ height: "24", src: avatar_icon(commit.author || commit.author_email, 24), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24", alt: "Avatar" }/
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
                                             - if commit.author
-                                              %a.muted{href: user_url(commit.author), style: "color:#333333;text-decoration:none;"}
+                                              %a.muted{ href: user_url(commit.author), style: "color:#333333;text-decoration:none;" }
                                                 = commit.author.name
                                             - else
                                               %span
                                                 = commit.author_name
                         %tr.spacer
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;"}
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
                             &nbsp;
                         %tr.success-message
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333333;font-size:15px;font-weight:400;line-height:1.4;padding:15px 5px;text-align:center;"}
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333333;font-size:15px;font-weight:400;line-height:1.4;padding:15px 5px;text-align:center;" }
                             - build_count = @pipeline.statuses.latest.size
                             - stage_count = @pipeline.stages_count
                             Pipeline
-                            %a{href: pipeline_url(@pipeline), style: "color:#3777b0;text-decoration:none;"}
+                            %a{ href: pipeline_url(@pipeline), style: "color:#3777b0;text-decoration:none;" }
                               = "\##{@pipeline.id}"
                             successfully completed
                             = "#{build_count} #{'build'.pluralize(build_count)}"
                             in
                             = "#{stage_count} #{'stage'.pluralize(stage_count)}."
         %tr.footer
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;"}
-            %img{alt: "GitLab", height: "33", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif'), style: "display:block;margin:0 auto 1em;", width: "90"}/
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            %img{ alt: "GitLab", height: "33", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif'), style: "display:block;margin:0 auto 1em;", width: "90" }/
             %div
-              %a{href: profile_notifications_url, style: "color:#3777b0;text-decoration:none;"} Manage all notifications
+              %a{ href: profile_notifications_url, style: "color:#3777b0;text-decoration:none;" } Manage all notifications
               &middot;
-              %a{href: help_url, style: "color:#3777b0;text-decoration:none;"} Help
+              %a{ href: help_url, style: "color:#3777b0;text-decoration:none;" } Help
             %div
               You're receiving this email because of your account on
               = succeed "." do
-                %a{href: root_url, style: "color:#3777b0;text-decoration:none;"}= Gitlab.config.gitlab.host
+                %a{ href: root_url, style: "color:#3777b0;text-decoration:none;" }= Gitlab.config.gitlab.host
diff --git a/app/views/notify/project_was_not_exported_email.text.haml b/app/views/notify/project_was_not_exported_email.text.haml
index b27cb620b9e..27785165c2d 100644
--- a/app/views/notify/project_was_not_exported_email.text.haml
+++ b/app/views/notify/project_was_not_exported_email.text.haml
@@ -3,4 +3,4 @@
 = "The errors we encountered were:"
 
 - @errors.each do |error|
-  #{error}
\ No newline at end of file
+  #{error}
diff --git a/app/views/notify/repository_push_email.html.haml b/app/views/notify/repository_push_email.html.haml
index 25883de257c..36858fa6f34 100644
--- a/app/views/notify/repository_push_email.html.haml
+++ b/app/views/notify/repository_push_email.html.haml
@@ -29,7 +29,7 @@
   %ul
     - @message.diffs.each do |diff|
       %li.file-stats
-        %a{href: "#{@message.target_url if @message.disable_diffs?}##{hexdigest(diff.file_path)}" }
+        %a{ href: "#{@message.target_url if @message.disable_diffs?}##{hexdigest(diff.file_path)}" }
           - if diff.deleted_file
             %span.deleted-file
               &minus;
@@ -54,8 +54,8 @@
       %h4 Changes:
       - diff_files.each do |diff_file|
         - file_hash = hexdigest(diff_file.file_path)
-        %li{id: file_hash}
-          %a{href: @message.target_url + "##{file_hash}"}<
+        %li{ id: file_hash }
+          %a{ href: @message.target_url + "##{file_hash}" }<
             - if diff_file.deleted_file
               %strong<
                 = diff_file.old_path
diff --git a/app/views/profiles/chat_names/new.html.haml b/app/views/profiles/chat_names/new.html.haml
index f635acf96e2..5bf22aa94f1 100644
--- a/app/views/profiles/chat_names/new.html.haml
+++ b/app/views/profiles/chat_names/new.html.haml
@@ -1,5 +1,5 @@
 %h3.page-title Authorization required
-%main{:role => "main"}
+%main{ :role => "main" }
   %p.h4
     Authorize
     %strong.text-info= @chat_name_params[:chat_name]
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index 3276db6692c..d2a60ac2867 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -6,6 +6,9 @@
       = key.title
     .description
       = key.fingerprint
+    .last-used-at
+      last used:
+      = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : 'n/a'
   .pull-right
     %span.key-created-at
       created #{time_ago_with_tooltip(key.created_at)}
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index dd7615400dc..d44603c638c 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -11,6 +11,9 @@
         %li
           %span.light Created on:
           %strong= @key.created_at.to_s(:medium)
+        %li
+          %span.light Last used on:
+          %strong= @key.last_used_at.try(:to_s, :medium) || 'N/A'
 
   .col-md-8
     %p
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index 93187873501..71b224a413b 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -17,5 +17,5 @@
     %hr
     %h5
       Your SSH keys (#{@keys.count})
-    %div.append-bottom-default
+    .append-bottom-default
       = render 'key_table'
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index d79a1a9f368..5c5e5940365 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -3,7 +3,7 @@
 
 %div
   - if @user.errors.any?
-    %div.alert.alert-danger
+    .alert.alert-danger
       %ul
         - @user.errors.full_messages.each do |msg|
           %li= msg
diff --git a/app/views/profiles/personal_access_tokens/_form.html.haml b/app/views/profiles/personal_access_tokens/_form.html.haml
new file mode 100644
index 00000000000..3f6efa33953
--- /dev/null
+++ b/app/views/profiles/personal_access_tokens/_form.html.haml
@@ -0,0 +1,21 @@
+- personal_access_token = local_assigns.fetch(:personal_access_token)
+- scopes = local_assigns.fetch(:scopes)
+
+= form_for [:profile, personal_access_token], method: :post, html: { class: 'js-requires-input' } do |f|
+
+  = form_errors(personal_access_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"
+
+  .form-group
+    = f.label :scopes, class: 'label-light'
+    = render 'shared/tokens/scopes_form', prefix: 'personal_access_token', token: personal_access_token, scopes: scopes
+
+  .prepend-top-default
+    = f.submit 'Create Personal Access Token', class: "btn btn-create"
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 05a2ea67aa2..60a561c9f9c 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -19,7 +19,7 @@
           Your New Personal Access Token
         .form-group
           = text_field_tag 'created-personal-access-token', flash[:personal_access_token], readonly: true, class: "form-control", 'aria-describedby' => "created-personal-access-token-help-block"
-          = clipboard_button(clipboard_text: flash[:personal_access_token])
+          = clipboard_button(clipboard_text: flash[: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.
 
       %hr
@@ -28,21 +28,8 @@
       Add a Personal Access Token
     %p.profile-settings-content
       Pick a name for the application, and we'll give you a unique token.
-    = form_for [:profile, @personal_access_token],
-                method: :post, html: { class: 'js-requires-input' } do |f|
 
-      = form_errors(@personal_access_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", required: false
-
-      .prepend-top-default
-        = f.submit 'Create Personal Access Token', class: "btn btn-create"
+    = render "form", personal_access_token: @personal_access_token, scopes: @scopes
 
     %hr
 
@@ -56,6 +43,7 @@
               %th Name
               %th Created
               %th Expires
+              %th Scopes
               %th
           %tbody
             - @active_personal_access_tokens.each do |token|
@@ -67,6 +55,7 @@
                     = token.expires_at.to_date.to_s(:medium)
                   - else
                     %span.personal-access-tokens-never-expires-label Never
+                %td= token.scopes.present? ? token.scopes.join(", ") : "<no scopes selected>"
                 %td= link_to "Revoke", revoke_profile_personal_access_token_path(token), method: :put, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to revoke this token? This action cannot be undone." }
 
     - else
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 2afa026847a..feadd863b00 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -1,7 +1,7 @@
 - page_title 'Preferences'
 = render 'profiles/head'
 
-= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: {class: 'row prepend-top-default js-preferences-form'} do |f|
+= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
   .col-lg-3.profile-settings-sidebar
     %h4.prepend-top-0
       Application theme
@@ -10,7 +10,7 @@
   .col-lg-9.application-theme
     - Gitlab::Themes.each do |theme|
       = label_tag do
-        .preview{class: theme.css_class}
+        .preview{ class: theme.css_class }
         = f.radio_button :theme_id, theme.id
         = theme.name
   .col-sm-12
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 578af9fe98d..c0c82cde2f6 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -18,7 +18,8 @@
             or change it at #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host}
     .col-lg-9
       .clearfix.avatar-image.append-bottom-default
-        = image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160'
+        = link_to avatar_icon(@user, 400), target: '_blank' do
+          = image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160'
       %h5.prepend-top-0
         Upload new avatar
       .prepend-top-5.append-bottom-10
@@ -30,7 +31,7 @@
         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-gray"
+        = link_to 'Remove avatar', profile_avatar_path, data: { confirm: "Avatar will be removed. Are you sure?" }, method: :delete, class: "btn btn-gray"
   %hr
   .row
     .col-lg-3.profile-settings-sidebar
@@ -69,7 +70,7 @@
             %span.help-block We also use email for avatar detection if no avatar is uploaded.
       .form-group
         = f.label :public_email, class: "label-light"
-        = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email), {include_blank: 'Do not show on profile'}, class: "select2"
+        = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email), { include_blank: 'Do not show on profile' }, class: "select2"
         %span.help-block This email will be displayed on your public profile.
       .form-group
         = f.label :skype, class: "label-light"
@@ -101,14 +102,14 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{:type => "button", :'data-dismiss' => "modal"}
+        %button.close{ :type => "button", :'data-dismiss' => "modal" }
           %span
             &times;
         %h4.modal-title
           Position and size your new avatar
       .modal-body
         .profile-crop-image-container
-          %img.modal-profile-crop-image
+          %img.modal-profile-crop-image{ alt: "Avatar cropper" }
         .crop-controls
           .btn-group
             %button.btn.btn-primary{ data: { method: "zoom", option: "0.1" } }
@@ -116,5 +117,5 @@
             %button.btn.btn-primary{ data: { method: "zoom", option: "-0.1" } }
               %span.fa.fa-search-minus
       .modal-footer
-        %button.btn.btn-primary.js-upload-user-avatar{:type => "button"}
+        %button.btn.btn-primary.js-upload-user-avatar{ :type => "button" }
           Set new profile picture
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 03ac739ade5..558a1d56151 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -30,7 +30,7 @@
               To add the entry manually, provide the following details to the application on your phone.
             %p.prepend-top-0.append-bottom-0
               Account:
-              = current_user.email
+              = @account_string
             %p.prepend-top-0.append-bottom-0
               Key:
               = current_user.otp_secret.scan(/.{4}/).join(' ')
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index 4f15f2997fb..0ea733cb978 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -9,7 +9,7 @@
 
     = render 'shared/event_filter'
 
-  .content_list.project-activity{:"data-href" => activity_project_path(@project)}
+  .content_list.project-activity{ :"data-href" => activity_project_path(@project) }
   = spinner
 
 :javascript
diff --git a/app/views/projects/_bitbucket_import_modal.html.haml b/app/views/projects/_bitbucket_import_modal.html.haml
index e74fd5b93ea..c24a496486c 100644
--- a/app/views/projects/_bitbucket_import_modal.html.haml
+++ b/app/views/projects/_bitbucket_import_modal.html.haml
@@ -1,8 +1,8 @@
-%div#bitbucket_import_modal.modal
+#bitbucket_import_modal.modal
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3 Import projects from Bitbucket
       .modal-body
         To enable importing projects from Bitbucket,
@@ -10,4 +10,4 @@
           as administrator you need to configure
         - else
           ask your GitLab administrator to configure
-        == #{link_to 'OAuth integration', help_page_path("integration/bitbucket")}.
+        = link_to 'OAuth integration', help_page_path("integration/bitbucket")
diff --git a/app/views/projects/_customize_workflow.html.haml b/app/views/projects/_customize_workflow.html.haml
index d2c1e943db1..e2b73cee5a9 100644
--- a/app/views/projects/_customize_workflow.html.haml
+++ b/app/views/projects/_customize_workflow.html.haml
@@ -1,5 +1,5 @@
 .row-content-block.project-home-empty
-  %div.text-center{ class: container_class }
+  .text-center{ class: container_class }
     %h4
       Customize your workflow!
     %p
diff --git a/app/views/projects/_find_file_link.html.haml b/app/views/projects/_find_file_link.html.haml
index 08e2fc48be7..dbb33090670 100644
--- a/app/views/projects/_find_file_link.html.haml
+++ b/app/views/projects/_find_file_link.html.haml
@@ -1,3 +1,3 @@
-= link_to namespace_project_find_file_path(@project.namespace, @project, @ref), class: 'btn btn-grouped shortcuts-find-file', rel: 'nofollow' do

-  = icon('search')

-  %span Find File

+= link_to namespace_project_find_file_path(@project.namespace, @project, @ref), class: 'btn btn-grouped shortcuts-find-file', rel: 'nofollow' do
+  = icon('search')
+  %span Find File
diff --git a/app/views/projects/_gitlab_import_modal.html.haml b/app/views/projects/_gitlab_import_modal.html.haml
index e9f39b16aa7..00aef66e1f8 100644
--- a/app/views/projects/_gitlab_import_modal.html.haml
+++ b/app/views/projects/_gitlab_import_modal.html.haml
@@ -1,8 +1,8 @@
-%div#gitlab_import_modal.modal
+#gitlab_import_modal.modal
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3 Import projects from GitLab.com
       .modal-body
         To enable importing projects from GitLab.com,
@@ -10,4 +10,4 @@
           as administrator you need to configure
         - else
           ask your GitLab administrator to configure
-        == #{link_to 'OAuth integration', help_page_path("integration/gitlab")}.
+        = link_to 'OAuth integration', help_page_path("integration/gitlab")
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 5a04c3318cf..1b9d87e9969 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -5,7 +5,7 @@
       = project_icon(@project, alt: @project.name, class: 'avatar s70 avatar-tile')
     %h1.project-title
       = @project.name
-      %span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
+      %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
         = visibility_level_icon(@project.visibility_level, fw: false)
 
     .project-home-desc
@@ -18,11 +18,19 @@
           = link_to project_path(forked_from_project) do
             = forked_from_project.namespace.try(:name)
 
-    .project-repo-buttons.project-action-buttons
+    .project-repo-buttons
       .count-buttons
         = render 'projects/buttons/star'
         = render 'projects/buttons/fork'
 
-      - if @project.feature_available?(:repository, current_user)
-        .project-clone-holder
-          = render "shared/clone_panel"
+      %span.hidden-xs
+        - if @project.feature_available?(:repository, current_user)
+          .project-clone-holder
+            = render "shared/clone_panel"
+
+        - if current_user && can?(current_user, :download_code, @project)
+          = render 'projects/buttons/download', project: @project, ref: @ref
+          = render 'projects/buttons/dropdown'
+          = render 'shared/notifications/button', notification_setting: @notification_setting
+          = render 'projects/buttons/koding'
+          = render 'shared/members/access_request_buttons', source: @project
diff --git a/app/views/projects/_last_commit.html.haml b/app/views/projects/_last_commit.html.haml
index 7f530708947..e1fea8ccf3d 100644
--- a/app/views/projects/_last_commit.html.haml
+++ b/app/views/projects/_last_commit.html.haml
@@ -1,7 +1,8 @@
+
 - ref = local_assigns.fetch(:ref)
 - status = commit.status(ref)
 - if status
-  = link_to builds_namespace_project_commit_path(commit.project.namespace, commit.project, commit), class: "ci-status ci-#{status}" do
+  = link_to pipelines_namespace_project_commit_path(commit.project.namespace, commit.project, commit), class: "ci-status ci-#{status}" do
     = ci_icon_for_status(status)
     = ci_label_for_status(status)
 
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index 58d961d93ca..085f79de785 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -15,23 +15,23 @@
 
       %li.pull-right
         .toolbar-group
-          = markdown_toolbar_button({icon: "bold fw", data: { "md-tag" => "**" }, title: "Add bold text" })
-          = markdown_toolbar_button({icon: "italic fw", data: { "md-tag" => "*" }, title: "Add italic text" })
-          = markdown_toolbar_button({icon: "quote-right fw", data: { "md-tag" => "> ", "md-prepend" => true }, title: "Insert a quote" })
-          = markdown_toolbar_button({icon: "code fw", data: { "md-tag" => "`", "md-block" => "```" }, title: "Insert code" })
-          = markdown_toolbar_button({icon: "list-ul fw", data: { "md-tag" => "* ", "md-prepend" => true }, title: "Add a bullet list" })
-          = markdown_toolbar_button({icon: "list-ol fw", data: { "md-tag" => "1. ", "md-prepend" => true }, title: "Add a numbered list" })
-          = markdown_toolbar_button({icon: "check-square-o fw", data: { "md-tag" => "* [ ] ", "md-prepend" => true }, title: "Add a task list" })
+          = markdown_toolbar_button({ icon: "bold fw", data: { "md-tag" => "**" }, title: "Add bold text" })
+          = markdown_toolbar_button({ icon: "italic fw", data: { "md-tag" => "*" }, title: "Add italic text" })
+          = markdown_toolbar_button({ icon: "quote-right fw", data: { "md-tag" => "> ", "md-prepend" => true }, title: "Insert a quote" })
+          = markdown_toolbar_button({ icon: "code fw", data: { "md-tag" => "`", "md-block" => "```" }, title: "Insert code" })
+          = markdown_toolbar_button({ icon: "list-ul fw", data: { "md-tag" => "* ", "md-prepend" => true }, title: "Add a bullet list" })
+          = markdown_toolbar_button({ icon: "list-ol fw", data: { "md-tag" => "1. ", "md-prepend" => true }, title: "Add a numbered list" })
+          = markdown_toolbar_button({ icon: "check-square-o fw", data: { "md-tag" => "* [ ] ", "md-prepend" => true }, title: "Add a task list" })
         .toolbar-group
           %button.toolbar-btn.js-zen-enter.has-tooltip.hidden-xs{ type: "button", tabindex: -1, aria: { label: "Go full screen" }, title: "Go full screen", data: { container: "body" } }
-            =icon("arrows-alt fw")
+            = icon("arrows-alt fw")
 
   .md-write-holder
     = yield
-  .md.md-preview-holder.js-md-preview.hide{class: (preview_class if defined?(preview_class))}
+  .md.md-preview-holder.js-md-preview.hide{ class: (preview_class if defined?(preview_class)) }
 
   - if defined?(referenced_users) && referenced_users
-    %div.referenced-users.hide
+    .referenced-users.hide
       %span
         = icon("exclamation-triangle")
         You are about to add
diff --git a/app/views/projects/_wiki.html.haml b/app/views/projects/_wiki.html.haml
index f00422dd7c0..41d42740f61 100644
--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
@@ -7,7 +7,7 @@
 - else
   - can_create_wiki = can?(current_user, :create_wiki, @project)
   .project-home-empty{ class: [('row-content-block' if can_create_wiki), ('content-block' unless can_create_wiki)] }
-    %div.text-center{ class: container_class }
+    .text-center{ class: container_class }
       %h4
         This project does not have a wiki homepage yet
       - if can_create_wiki
diff --git a/app/views/projects/artifacts/_tree_directory.html.haml b/app/views/projects/artifacts/_tree_directory.html.haml
index def493c56f5..9e49c93388a 100644
--- a/app/views/projects/artifacts/_tree_directory.html.haml
+++ b/app/views/projects/artifacts/_tree_directory.html.haml
@@ -1,6 +1,6 @@
 - path_to_directory = browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: directory.path)
 
-%tr.tree-item{ 'data-link' => path_to_directory}
+%tr.tree-item{ 'data-link' => path_to_directory }
   %td.tree-item-file-name
     = tree_icon('folder', '755', directory.name)
     %span.str-truncated
diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml
index ede01dcc1aa..d0ff14e45e6 100644
--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
@@ -8,7 +8,7 @@
       Download artifacts archive
 
 .tree-holder
-  %div.tree-content-holder
+  .tree-content-holder
     %table.table.tree-table
       %thead
         %tr
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index f63802ac88b..23f54553014 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -36,7 +36,7 @@
               %td.line-numbers
                 - line_count = blame_group[:lines].count
                 - (current_line...(current_line + line_count)).each do |i|
-                  %a.diff-line-num{href: "#L#{i}", id: "L#{i}", 'data-line-number' => i}
+                  %a.diff-line-num{ href: "#L#{i}", id: "L#{i}", 'data-line-number' => i }
                     = icon("link")
                     = i
                   \
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 149ee7c59d6..f75f438ee4f 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -18,11 +18,11 @@
         - else
           = link_to title, '#'
 
-%ul.blob-commit-info.hidden-xs
+%ul.blob-commit-info.table-list.hidden-xs
   - blob_commit = @repository.last_commit_for_path(@commit.id, blob.path)
   = render blob_commit, project: @project, ref: @ref
 
-%div#blob-content-holder.blob-content-holder
+#blob-content-holder.blob-content-holder
   %article.file-holder
     .file-title
       = blob_icon blob.mode, blob.name
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 4a6aa92e3f3..1d058daa094 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -21,6 +21,8 @@
         = dropdown_tag("Choose a .gitignore template", options: { toggle_class: 'btn js-gitignore-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } )
       .gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.hidden
         = dropdown_tag("Choose a GitLab CI Yaml template", options: { toggle_class: 'btn js-gitlab-ci-yml-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } )
+      .dockerfile-selector.js-dockerfile-selector-wrap.hidden
+        = dropdown_tag("Choose a Dockerfile template", options: { toggle_class: 'btn js-dockerfile-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } )
       = button_tag class: 'soft-wrap-toggle btn', type: 'button' do
         %span.no-wrap
           = custom_icon('icon_no_wrap')
diff --git a/app/views/projects/blob/_image.html.haml b/app/views/projects/blob/_image.html.haml
index 4c356d1f07f..a486b2fe491 100644
--- a/app/views/projects/blob/_image.html.haml
+++ b/app/views/projects/blob/_image.html.haml
@@ -5,11 +5,11 @@
       - # be wrong/strange if RawController modified the data.
       - blob.load_all_data!(@repository)
       - blob = sanitize_svg(blob)
-      %img{src: "data:#{blob.mime_type};base64,#{Base64.encode64(blob.data)}"}
+      %img{ src: "data:#{blob.mime_type};base64,#{Base64.encode64(blob.data)}", alt: "#{blob.name}" }
     - else
       .nothing-here-block
         The SVG could not be displayed as it is too large, you can
         #{link_to('view the raw file', namespace_project_raw_path(@project.namespace, @project, @id), target: '_blank')}
         instead.
   - else
-    %img{src: namespace_project_raw_path(@project.namespace, @project, tree_join(@commit.id, blob.path))}
+    %img{ src: namespace_project_raw_path(@project.namespace, @project, tree_join(@commit.id, blob.path)), alt: "#{blob.name}" }
diff --git a/app/views/projects/blob/_new_dir.html.haml b/app/views/projects/blob/_new_dir.html.haml
index 84694203d7d..7f470b890ba 100644
--- a/app/views/projects/blob/_new_dir.html.haml
+++ b/app/views/projects/blob/_new_dir.html.haml
@@ -2,7 +2,7 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title Create New Directory
       .modal-body
         = form_tag namespace_project_create_dir_path(@project.namespace, @project, @id), method: :post, remote: false, class: 'form-horizontal js-create-dir-form js-quick-submit js-requires-input' do
diff --git a/app/views/projects/blob/_remove.html.haml b/app/views/projects/blob/_remove.html.haml
index 2e1f32fd15e..db6662a95ac 100644
--- a/app/views/projects/blob/_remove.html.haml
+++ b/app/views/projects/blob/_remove.html.haml
@@ -2,7 +2,7 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title Delete #{@blob.name}
 
       .modal-body
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index 57a27ec904e..61a7ffdd0ab 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -2,7 +2,7 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title #{title}
       .modal-body
         = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form form-horizontal' do
@@ -12,7 +12,7 @@
                 Attach a file by drag &amp; drop or
                 = link_to 'click to upload', '#', class: "markdown-selector"
           %br
-          .dropzone-alerts{class: "alert alert-danger data", style: "display:none"}
+          .dropzone-alerts.alert.alert-danger.data{ style: "display:none" }
 
           = render 'shared/new_commit_form', placeholder: placeholder
 
diff --git a/app/views/projects/blob/diff.html.haml b/app/views/projects/blob/diff.html.haml
index a79ae53c780..538f8591f13 100644
--- a/app/views/projects/blob/diff.html.haml
+++ b/app/views/projects/blob/diff.html.haml
@@ -13,15 +13,15 @@
       - case diff_view
       - when :inline
         %td.old_line.diff-line-num{ data: { linenumber: line_old } }
-          %a{href: "##{line_old}", data: { linenumber: line_old }}
+          %a{ href: "##{line_old}", data: { linenumber: line_old } }
         %td.new_line.diff-line-num{ data: { linenumber: line_new } }
-          %a{href: "##{line_new}", data: { linenumber: line_new }}
+          %a{ href: "##{line_new}", data: { linenumber: line_new } }
         = line_content
       - when :parallel
-        %td.old_line.diff-line-num{data: { linenumber: line_old }}
+        %td.old_line.diff-line-num{ data: { linenumber: line_old } }
           = link_to raw(line_old), "##{line_old}"
         = line_content
-        %td.new_line.diff-line-num{data: { linenumber: line_new }}
+        %td.new_line.diff-line-num{ data: { linenumber: line_new } }
           = link_to raw(line_new), "##{line_new}"
         = line_content
 
diff --git a/app/views/projects/blob/preview.html.haml b/app/views/projects/blob/preview.html.haml
index 541dc96c45f..5cafb644b40 100644
--- a/app/views/projects/blob/preview.html.haml
+++ b/app/views/projects/blob/preview.html.haml
@@ -20,6 +20,6 @@
                 - else
                   %td.old_line.diff-line-num
                   %td.new_line.diff-line-num
-                  %td.line_content{class: "#{line.type}"}= diff_line_content(line.text)
+                  %td.line_content{ class: "#{line.type}" }= diff_line_content(line.text)
         - else
           .nothing-here-block No changes.
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index 0ab78a39cf9..b6738c3380f 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/app/views/projects/blob/show.html.haml
@@ -5,7 +5,7 @@
 %div{ class: container_class }
   = render 'projects/last_push'
 
-  %div#tree-holder.tree-holder
+  #tree-holder.tree-holder
     = render 'blob', blob: @blob
 
   - if can_edit_blob?(@blob)
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
index 1f31496e73f..e4c2aff46ec 100644
--- a/app/views/projects/boards/components/_card.html.haml
+++ b/app/views/projects/boards/components/_card.html.haml
@@ -17,7 +17,7 @@
       ":title" => '"Assigned to " + issue.assignee.name',
       "v-if" => "issue.assignee",
       data: { container: 'body' } }
-      %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20 }
+      %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20, alt: "Avatar" }
     %button.label.color-label.has-tooltip{ "v-for" => "label in issue.labels",
       type: "button",
       "v-if" => "(!list.label || label.id !== list.label.id)",
diff --git a/app/views/projects/boards/components/_sidebar.html.haml b/app/views/projects/boards/components/_sidebar.html.haml
index 2125c3387c4..df7fa9ddaf2 100644
--- a/app/views/projects/boards/components/_sidebar.html.haml
+++ b/app/views/projects/boards/components/_sidebar.html.haml
@@ -1,23 +1,24 @@
 %board-sidebar{ "inline-template" => true,
   ":current-user" => "#{current_user ? current_user.to_json(only: [:username, :id, :name], methods: [:avatar_url]) : {}}" }
-  %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
-          %strong
-            {{ issue.title }}
-          %br/
-          %span
-            = precede "#" do
-              {{ issue.id }}
-        %a.gutter-toggle.pull-right{ role: "button",
-          href: "#",
-          "@click.prevent" => "closeSidebar",
-          "aria-label" => "Toggle sidebar" }
-          = custom_icon("icon_close", size: 15)
-      .js-issuable-update
-        = render "projects/boards/components/sidebar/assignee"
-        = render "projects/boards/components/sidebar/milestone"
-        = render "projects/boards/components/sidebar/due_date"
-        = render "projects/boards/components/sidebar/labels"
-        = render "projects/boards/components/sidebar/notifications"
+  %transition{ name: "boards-sidebar-slide" }
+    %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
+            %strong
+              {{ issue.title }}
+            %br/
+            %span
+              = precede "#" do
+                {{ issue.id }}
+          %a.gutter-toggle.pull-right{ role: "button",
+            href: "#",
+            "@click.prevent" => "closeSidebar",
+            "aria-label" => "Toggle sidebar" }
+            = custom_icon("icon_close", size: 15)
+        .js-issuable-update
+          = render "projects/boards/components/sidebar/assignee"
+          = render "projects/boards/components/sidebar/milestone"
+          = render "projects/boards/components/sidebar/due_date"
+          = render "projects/boards/components/sidebar/labels"
+          = render "projects/boards/components/sidebar/notifications"
diff --git a/app/views/projects/boards/components/sidebar/_assignee.html.haml b/app/views/projects/boards/components/sidebar/_assignee.html.haml
index 8fe1b832071..e75ce305440 100644
--- a/app/views/projects/boards/components/sidebar/_assignee.html.haml
+++ b/app/views/projects/boards/components/sidebar/_assignee.html.haml
@@ -14,7 +14,7 @@
     %a.author_link.bold{ ":href" => "'#{root_url}' + issue.assignee.username",
       "v-if" => "issue.assignee" }
       %img.avatar.avatar-inline.s32{ ":src" => "issue.assignee.avatar",
-        width: "32" }
+        width: "32", alt: "Avatar" }
       %span.author
         {{ issue.assignee.name }}
       %span.username
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 9135cee8364..04efc2e996c 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -4,7 +4,7 @@
 - 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))
-%li(class="js-branch-#{branch.name}")
+%li{ class: "js-branch-#{branch.name}" }
   %div
     = link_to namespace_project_tree_path(@project.namespace, @project, branch.name), class: 'item-title str-truncated' do
       = branch.name
@@ -12,12 +12,11 @@
     - if branch.name == @repository.root_ref
       %span.label.label-primary default
     - elsif @repository.merged_to_root_ref? branch.name
-      %span.label.label-info.has-tooltip(title="Merged into #{@repository.root_ref}")
+      %span.label.label-info.has-tooltip{ title: "Merged into #{@repository.root_ref}" }
         merged
 
     - if @project.protected_branch? branch.name
       %span.label.label-success
-        %i.fa.fa-lock
         protected
     .controls.hidden-xs
       - if merge_project && create_mr_button?(@repository.root_ref, branch.name)
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 5fd664c7a93..5f8f56150f9 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -3,16 +3,17 @@
 = render "projects/commits/head"
 
 %div{ class: container_class }
-  .top-area
+  .top-area.adjust
     .nav-text
-      Protected branches can be managed in project settings
+      Protected branches can be managed in
+      = link_to 'project settings', namespace_project_protected_branches_path(@project.namespace, @project)
 
     .nav-controls
       = form_tag(filter_branches_path, method: :get) do
         = search_field_tag :search, params[:search], { placeholder: 'Filter by branch name', id: 'branch-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
       .dropdown.inline
-        %button.dropdown-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+        %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
           %span.light
             = projects_sort_options_hash[@sort]
           = icon('chevron-down')
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 5a6c8c243fa..e63bdb38bd8 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -2,7 +2,7 @@
 
 - if @error
   .alert.alert-danger
-    %button{ type: "button", class: "close", "data-dismiss" => "alert"} &times;
+    %button.close{ type: "button", "data-dismiss" => "alert" } &times;
     = @error
 %h3.page-title
   New Branch
diff --git a/app/views/projects/builds/_header.html.haml b/app/views/projects/builds/_header.html.haml
index f6aa20c4579..b15be0d861d 100644
--- a/app/views/projects/builds/_header.html.haml
+++ b/app/views/projects/builds/_header.html.haml
@@ -1,13 +1,13 @@
 .content-block.build-header
   .header-content
-    = ci_status_with_icon(@build.status)
+    = render 'ci/status/badge', status: @build.detailed_status(current_user)
     Build
     %strong ##{@build.id}
     in pipeline
     = link_to pipeline_path(@build.pipeline) do
       %strong ##{@build.pipeline.id}
     for commit
-    = link_to ci_status_path(@build.pipeline) do
+    = link_to namespace_project_commit_path(@project.namespace, @project, @build.pipeline.sha) do
       %strong= @build.pipeline.short_sha
     from
     = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml
index ce8b66b1945..37bf085130a 100644
--- a/app/views/projects/builds/_sidebar.html.haml
+++ b/app/views/projects/builds/_sidebar.html.haml
@@ -22,14 +22,14 @@
           %p.build-detail-row
             The artifacts were removed
             #{time_ago_with_tooltip(@build.artifacts_expire_at)}
-        - elsif @build.artifacts_expire_at
+        - elsif @build.has_expiring_artifacts?
           %p.build-detail-row
             The artifacts will be removed in
             %span.js-artifacts-remove= @build.artifacts_expire_at
 
         - if @build.artifacts?
           .btn-group.btn-group-justified{ role: :group }
-            - if @build.artifacts_expire_at
+            - if @build.has_expiring_artifacts? && can?(current_user, :update_build, @build)
               = link_to keep_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default', method: :post do
                 Keep
 
@@ -114,7 +114,7 @@
     - if @build.pipeline.stages_count > 1
       .dropdown.build-dropdown
         .title Stage
-        %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+        %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
           %span.stage-selection More
           = icon('chevron-down')
         %ul.dropdown-menu
@@ -125,10 +125,10 @@
   .builds-container
     - 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}}
+        .build-job{ class: sidebar_build_class(build, @build), data: { stage: build.stage } }
           = link_to namespace_project_build_path(@project.namespace, @project, build) do
             = icon('arrow-right')
-            %span{class: "ci-status-icon-#{build.status}"}
+            %span{ class: "ci-status-icon-#{build.status}" }
               = ci_icon_for_status(build.status)
             %span
               - if build.name
@@ -136,4 +136,4 @@
               - else
                 = build.id
             - if build.retried?
-              %i.fa.fa-refresh.has-tooltip{data: { container: 'body', placement: 'bottom' }, title: 'Build was retried'}
+              %i.fa.fa-refresh.has-tooltip{ data: { container: 'body', placement: 'bottom' }, title: 'Build was retried' }
diff --git a/app/views/projects/builds/index.html.haml b/app/views/projects/builds/index.html.haml
index 06070f12bbd..c623e39b21f 100644
--- a/app/views/projects/builds/index.html.haml
+++ b/app/views/projects/builds/index.html.haml
@@ -19,5 +19,5 @@
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
 
-  %div.content-list.builds-content-list
+  .content-list.builds-content-list
     = render "table", builds: @builds, project: @project
diff --git a/app/views/projects/builds/show.html.haml b/app/views/projects/builds/show.html.haml
index cdeb81372ee..54724ef5cab 100644
--- a/app/views/projects/builds/show.html.haml
+++ b/app/views/projects/builds/show.html.haml
@@ -56,17 +56,22 @@
       - else
         #js-build-scroll.scroll-controls
           .scroll-step
-            = link_to '#build-trace', class: 'btn' do
-              %i.fa.fa-angle-up
-            = link_to '#down-build-trace', class: 'btn' do
-              %i.fa.fa-angle-down
+            %a.scroll-link.scroll-top{ href: '#up-build-trace', id: 'scroll-top', title: 'Scroll to top' }
+              = custom_icon('scroll_up')
+              = custom_icon('scroll_up_hover_active')
+            %a.scroll-link.scroll-bottom{ href: '#down-build-trace', id: 'scroll-bottom', title: 'Scroll to bottom' }
+              = custom_icon('scroll_down')
+              = custom_icon('scroll_down_hover_active')
           - if @build.active?
             .autoscroll-container
-              %button.btn.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}}
-                Enable autoscroll
+              %span.status-message#autoscroll-status{ data: { state: 'disabled' } }
+                %span.status-text Autoscroll active
+                %i.status-icon
+                  = custom_icon('scroll_down_hover_active')
+        #up-build-trace
         %pre.build-trace#build-trace
           %code.bash.js-build-output
-          = icon("refresh spin", class: "js-build-refresh")
+          .build-loader-animation.js-build-refresh
 
         #down-build-trace
 
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 40bfa01a45a..324a7f8cd3f 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -1,5 +1,5 @@
 - if !project.empty_repo? && can?(current_user, :download_code, project)
-  .dropdown.inline.download-button
+  .project-action-button.dropdown.inline
     %button.btn{ 'data-toggle' => 'dropdown' }
       = icon('download')
       = icon("caret-down")
diff --git a/app/views/projects/buttons/_dropdown.html.haml b/app/views/projects/buttons/_dropdown.html.haml
index d3ccebbe290..67de8699b2e 100644
--- a/app/views/projects/buttons/_dropdown.html.haml
+++ b/app/views/projects/buttons/_dropdown.html.haml
@@ -1,6 +1,6 @@
 - if current_user
-  .dropdown.inline
-    %a.btn.dropdown-toggle{href: '#', "data-toggle" => "dropdown"}
+  .project-action-button.dropdown.inline
+    %a.btn.dropdown-toggle{ href: '#', "data-toggle" => "dropdown" }
       = icon('plus')
       = icon("caret-down")
     %ul.dropdown-menu.dropdown-menu-align-right.project-home-dropdown
diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml
index 27da86b9efe..851fe44a86d 100644
--- a/app/views/projects/buttons/_fork.html.haml
+++ b/app/views/projects/buttons/_fork.html.haml
@@ -8,7 +8,7 @@
       = link_to new_namespace_project_fork_path(@project.namespace, @project), title: 'Fork project', class: 'btn' do
         = custom_icon('icon_fork')
         %span Fork
-    %div.count-with-arrow
+    .count-with-arrow
       %span.arrow
       = link_to namespace_project_forks_path(@project.namespace, @project), title: 'Forks', class: 'count' do
         = @project.forks_count
diff --git a/app/views/projects/buttons/_koding.html.haml b/app/views/projects/buttons/_koding.html.haml
index fdc80d44253..5d9a776da89 100644
--- a/app/views/projects/buttons/_koding.html.haml
+++ b/app/views/projects/buttons/_koding.html.haml
@@ -1,7 +1,3 @@
-- if koding_enabled? && current_user && can_push_branch?(@project, @project.default_branch)
-  - if @repository.koding_yml
-    = link_to koding_project_url(@project), class: 'btn', target: '_blank' do
-      Run in IDE (Koding)
-  - else
-    = link_to add_koding_stack_path(@project), class: 'btn' do
-      Set Up Koding
+- if koding_enabled? && current_user && @repository.koding_yml && can_push_branch?(@project, @project.default_branch)
+  = link_to koding_project_url(@project), class: 'btn project-action-button inline', target: '_blank' do
+    Run in IDE (Koding)
diff --git a/app/views/projects/buttons/_star.html.haml b/app/views/projects/buttons/_star.html.haml
index 12d35101770..d57eb2cbfbc 100644
--- a/app/views/projects/buttons/_star.html.haml
+++ b/app/views/projects/buttons/_star.html.haml
@@ -6,7 +6,7 @@
     - else
       = icon('star-o')
       %span Star
-  %div.count-with-arrow
+  .count-with-arrow
     %span.arrow
     %span.count.star-count
       = @project.star_count
@@ -15,7 +15,7 @@
   = link_to new_user_session_path, class: 'btn has-tooltip star-btn', title: 'You must sign in to star a project' do
     = icon('star')
     Star
-  %div.count-with-arrow
+  .count-with-arrow
     %span.arrow
     %span.count
       = @project.star_count
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index 18b3b04154f..520113639b7 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -7,12 +7,9 @@
 - coverage = local_assigns.fetch(:coverage, false)
 - allow_retry = local_assigns.fetch(:allow_retry, false)
 
-%tr.build.commit{class: ('retried' if retried)}
+%tr.build.commit{ class: ('retried' if retried) }
   %td.status
-    - if can?(current_user, :read_build, build)
-      = ci_status_with_icon(build.status, namespace_project_build_url(build.project.namespace, build.project, build))
-    - else
-      = ci_status_with_icon(build.status)
+    = render "ci/status/badge", status: build.detailed_status(current_user)
 
   %td.branch-commit
     - if can?(current_user, :read_build, build)
diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
deleted file mode 100644
index ad1a7360a8b..00000000000
--- a/app/views/projects/ci/builds/_build_pipeline.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-- is_playable = subject.playable? && can?(current_user, :update_build, @project)
-- if is_playable
-  = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.js-pipeline-graph', placement: 'bottom' } do
-    = ci_icon_for_status('play')
-    .ci-status-text= subject.name
-- elsif can?(current_user, :read_build, @project)
-  = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.js-pipeline-graph', placement: 'bottom' } do
-    %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-      = ci_icon_for_status(subject.status)
-    .ci-status-text= subject.name
-- else
-  %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-    = ci_icon_for_status(subject.status)
diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml
index b58dceb58c9..990bfbcf951 100644
--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ b/app/views/projects/ci/pipelines/_pipeline.html.haml
@@ -1,13 +1,10 @@
 - status = pipeline.status
-- detailed_status = pipeline.detailed_status
 - show_commit = local_assigns.fetch(:show_commit, true)
 - show_branch = local_assigns.fetch(:show_branch, true)
 
 %tr.commit
   %td.commit-link
-    = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "ci-status ci-#{detailed_status}" do
-      = ci_icon_for_status(detailed_status)
-      = ci_text_for_status(detailed_status)
+    = render 'ci/status/badge', status: pipeline.detailed_status(current_user)
 
   %td
     = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id) do
@@ -46,10 +43,22 @@
   %td.stage-cell
     - pipeline.stages.each do |stage|
       - if stage.status
-        - tooltip = "#{stage.name.titleize}: #{stage.status || 'not found'}"
-        .stage-container
-          = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id, anchor: stage.name), class: "has-tooltip ci-status-icon-#{stage.status}", title: tooltip do
-            = ci_icon_for_status(stage.status)
+        - detailed_status = stage.detailed_status(current_user)
+        - icon_status = "#{detailed_status.icon}_borderless"
+        - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}"
+
+        .stage-container.dropdown.js-mini-pipeline-graph
+          %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_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } }
+            = custom_icon(icon_status)
+            = icon('caret-down')
+
+          %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
+            .arrow-up
+            .js-builds-dropdown-list.scrollable-menu
+
+            .js-builds-dropdown-loading.builds-dropdown-loading.hidden
+              %span.fa.fa-spinner.fa-spin
+
 
   %td
     - if pipeline.duration
@@ -69,18 +78,18 @@
         .btn-group.inline
           - if actions.any?
             .btn-group
-              %a.dropdown-toggle.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
+              %button.dropdown-toggle.btn.btn-default.js-pipeline-dropdown-manual-actions{ type: 'button', 'data-toggle' => 'dropdown' }
                 = custom_icon('icon_play')
-                = icon('caret-down')
+                = icon('caret-down', 'aria-hidden' => 'true')
               %ul.dropdown-menu.dropdown-menu-align-right
                 - actions.each do |build|
                   %li
                     = link_to play_namespace_project_build_path(pipeline.project.namespace, pipeline.project, build), method: :post, rel: 'nofollow' do
                       = custom_icon('icon_play')
-                      %span= build.name.humanize
+                      %span= build.name
           - if artifacts.present?
             .btn-group
-              %a.dropdown-toggle.btn.btn-default.build-artifacts{type: 'button', 'data-toggle' => 'dropdown'}
+              %button.dropdown-toggle.btn.btn-default.build-artifacts.js-pipeline-dropdown-download{ type: 'button', 'data-toggle' => 'dropdown' }
                 = icon("download")
                 = icon('caret-down')
               %ul.dropdown-menu.dropdown-menu-align-right
diff --git a/app/views/projects/commit/_builds.html.haml b/app/views/projects/commit/_builds.html.haml
deleted file mode 100644
index b7087749428..00000000000
--- a/app/views/projects/commit/_builds.html.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-- @ci_pipelines.each do |pipeline|
-  = render "pipeline", pipeline: pipeline, pipeline_details: true
diff --git a/app/views/projects/commit/_change.html.haml b/app/views/projects/commit/_change.html.haml
index 782f558e8b0..990908211de 100644
--- a/app/views/projects/commit/_change.html.haml
+++ b/app/views/projects/commit/_change.html.haml
@@ -6,19 +6,19 @@
   - label = 'Cherry-pick'
   - target_label = 'Pick into branch'
 
-.modal{id: "modal-#{type}-commit"}
+.modal{ id: "modal-#{type}-commit" }
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title== #{label} this #{commit.change_type_title(current_user)}
       .modal-body
-        = form_tag send("#{type.underscore}_namespace_project_commit_path", @project.namespace, @project, commit.id), method: :post, remote: false, class: "form-horizontal js-#{type}-form js-requires-input" do
+        = form_tag [type.underscore, @project.namespace, @project, commit], method: :post, remote: false, class: "form-horizontal js-#{type}-form js-requires-input" do
           .form-group.branch
             = label_tag 'target_branch', target_label, class: 'control-label'
             .col-sm-10
               = hidden_field_tag :target_branch, @project.default_branch, id: 'target_branch'
-              = dropdown_tag(@project.default_branch, options: { title: "Switch branch", filter: true, placeholder: "Search branches", toggle_class: 'js-project-refs-dropdown js-target-branch dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "target_branch", selected: @project.default_branch, target_branch: @project.default_branch, refs_url: namespace_project_branches_path(@project.namespace, @project), submit_form_on_click: false }})
+              = dropdown_tag(@project.default_branch, options: { title: "Switch branch", filter: true, placeholder: "Search branches", toggle_class: 'js-project-refs-dropdown js-target-branch dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "target_branch", selected: @project.default_branch, target_branch: @project.default_branch, refs_url: namespace_project_branches_path(@project.namespace, @project), submit_form_on_click: false } })
 
               - if can?(current_user, :push_code, @project)
                 .js-create-merge-request-container
diff --git a/app/views/projects/commit/_ci_menu.html.haml b/app/views/projects/commit/_ci_menu.html.haml
index cbfd99ca448..13ab2253733 100644
--- a/app/views/projects/commit/_ci_menu.html.haml
+++ b/app/views/projects/commit/_ci_menu.html.haml
@@ -8,7 +8,3 @@
       = link_to pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id) do
         Pipelines
         %span.badge= @ci_pipelines.count
-  = nav_link(path: 'commit#builds') do
-    = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id) do
-      Builds
-      %span.badge= @statuses.count
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index c08ed8f6c16..08eb0c57f66 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,7 +1,7 @@
 .page-content-header
   .header-main-content
     %strong
-    = clipboard_button(clipboard_text: @commit.id)
+    = clipboard_button(clipboard_text: @commit.id, title: "Copy commit SHA to clipboard")
     = @commit.short_id
     %span.hidden-xs authored
     #{time_ago_with_tooltip(@commit.authored_date)}
@@ -63,7 +63,7 @@
 
   - if @commit.status
     .well-segment.pipeline-info
-      %div{class: "icon-container ci-status-icon-#{@commit.status}"}
+      %div{ class: "icon-container ci-status-icon-#{@commit.status}" }
         = ci_icon_for_status(@commit.status)
       Pipeline
       = link_to "##{@commit.pipelines.last.id}", pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "monospace"
diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml
index 7f42fde0fea..1164627fa11 100644
--- a/app/views/projects/commit/_pipelines_list.haml
+++ b/app/views/projects/commit/_pipelines_list.haml
@@ -1,15 +1,15 @@
-%ul.content-list.pipelines
+%div
   - if pipelines.blank?
-    %li
+    %div
       .nothing-here-block No pipelines to show
   - else
-    .table-holder
-      %table.table.ci-table
-        %tbody
-          %th Status
-          %th Pipeline
-          %th Commit
-          %th Stages
-          %th
-          %th
+    .table-holder.pipelines
+      %table.table.ci-table.js-pipeline-table
+        %thead
+          %th.pipeline-status Status
+          %th.pipeline-info Pipeline
+          %th.pipeline-commit Commit
+          %th.pipeline-stages Stages
+          %th.pipeline-date
+          %th.pipeline-actions
         = render pipelines, commit_sha: true, stage: true, allow_retry: true, show_commit: false
diff --git a/app/views/projects/commit/builds.html.haml b/app/views/projects/commit/builds.html.haml
deleted file mode 100644
index 077b2d2725b..00000000000
--- a/app/views/projects/commit/builds.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-- @no_container = true
-- page_title "Builds", "#{@commit.title} (#{@commit.short_id})", "Commits"
-= render "projects/commits/head"
-
-%div{ class: container_class }
-  = render "commit_box"
-
-  = render "ci_menu"
-  = render "builds"
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index b8c64d1f13e..7afd3d80ef5 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -8,7 +8,7 @@
   - if @commit.status
     = render "ci_menu"
   - else
-    %div.block-connector
+    .block-connector
   = render "projects/diffs/diffs", diffs: @diffs
   = render "projects/notes/notes_with_form"
   - if can_collaborate_with_project?
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index a940515fadf..002e3d345dc 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -9,33 +9,33 @@
 - cache_key.push(commit.status(ref)) if commit.status(ref)
 
 = cache(cache_key, expires_in: 1.day) do
-  %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
-    = author_avatar(commit, size: 36)
+  %li.commit.table-list-row.js-toggle-container{ id: "commit-#{commit.short_id}" }
 
-    .commit-info-block
-      .commit-row-title
-        %span.item-title
-          = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
-          %span.commit-row-message.visible-xs-inline
-            &middot;
-            = commit.short_id
-          - if commit.status(ref)
-            .visible-xs-inline
-              = render_commit_status(commit, ref: ref)
-          - if commit.description?
-            %a.text-expander.hidden-xs.js-toggle-button ...
+    .table-list-cell.avatar-cell.hidden-xs
+      = author_avatar(commit, size: 36)
 
-        .commit-actions.hidden-xs
-          - if commit.status(ref)
-            = render_commit_status(commit, ref: ref)
-          = clipboard_button(clipboard_text: commit.id)
-          = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
-          = link_to_browse_code(project, commit)
+    .table-list-cell.commit-content
+      = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message item-title"
+      %span.commit-row-message.visible-xs-inline
+        &middot;
+        = commit.short_id
+      - if commit.status(ref)
+        .visible-xs-inline
+          = render_commit_status(commit, ref: ref)
+      - if commit.description?
+        %a.text-expander.hidden-xs.js-toggle-button ...
 
       - if commit.description?
         %pre.commit-row-description.js-toggle-content
           = preserve(markdown(commit.description, pipeline: :single_line, author: commit.author))
+      .commiter
+        = commit_author_link(commit, avatar: false, size: 24)
+        committed
+        #{time_ago_with_tooltip(commit.committed_date)}
 
-      = commit_author_link(commit, avatar: false, size: 24)
-      committed
-      #{time_ago_with_tooltip(commit.committed_date)}
+    .table-list-cell.commit-actions.hidden-xs
+      - if commit.status(ref)
+        = render_commit_status(commit, ref: ref)
+      = clipboard_button(clipboard_text: commit.id, title: "Copy commit SHA to clipboard")
+      = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
+      = link_to_browse_code(project, commit)
diff --git a/app/views/projects/commits/_commit_list.html.haml b/app/views/projects/commits/_commit_list.html.haml
index ce416caa494..64d93e4141c 100644
--- a/app/views/projects/commits/_commit_list.html.haml
+++ b/app/views/projects/commits/_commit_list.html.haml
@@ -1,7 +1,7 @@
 - commits, hidden = limited_commits(@commits)
 - commits = Commit.decorate(commits, @project)
 
-%div.panel.panel-default
+.panel.panel-default
   .panel-heading
     Commits (#{@commits.count})
   - if hidden > 0
@@ -11,4 +11,4 @@
       %li.warning-row.unstyled
         #{number_with_delimiter(hidden)} additional commits have been omitted to prevent performance issues.
   - else
-    %ul.content-list= render commits, project: @project, ref: @ref
+    %ul.content-list.table-list= render commits, project: @project, ref: @ref
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 48756c68941..fcc367951ad 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -4,7 +4,7 @@
 - commits.chunk { |c| c.committed_date.in_time_zone.to_date }.each do |day, commits|
   %li.commit-header= "#{day.strftime('%d %b, %Y')} #{pluralize(commits.count, 'commit')}"
   %li.commits-row
-    %ul.list-unstyled.commit-list
+    %ul.content-list.commit-list.table-list.table-wide
       = render commits, project: project, ref: ref
 
 - if hidden > 0
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 9628cbd1634..e77f23c7fd8 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -28,12 +28,12 @@
           = search_field_tag :search, params[:search], { placeholder: 'Filter by commit message', id: 'commits-search', class: 'form-control search-text-input input-short', spellcheck: false }
       - if current_user && current_user.private_token
         .control
-          = link_to namespace_project_commits_path(@project.namespace, @project, @ref, {format: :atom, private_token: current_user.private_token}), title: "Commits Feed", class: 'btn' do
+          = link_to namespace_project_commits_path(@project.namespace, @project, @ref, { format: :atom, private_token: current_user.private_token }), title: "Commits Feed", class: 'btn' do
             = icon("rss")
     %ul.breadcrumb.repo-breadcrumb
       = commits_breadcrumbs
 
-  %div{id: dom_id(@project)}
+  %div{ id: dom_id(@project) }
     %ol#commits-list.list-unstyled.content_list
       = render 'commits', project: @project, ref: @ref
   = spinner
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index 7bde20c3286..d76d48187cd 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -2,21 +2,21 @@
   .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', title: 'Switch base of comparison'}
+        = link_to icon('exchange'), {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Switch base of comparison'}
     .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
       .input-group.inline-input-group
         %span.input-group-addon from
         = hidden_field_tag :from, params[:from]
-        = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
-          .dropdown-toggle-text= params[:from] || 'Select branch/tag'
+        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
+          .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag'
       = render "ref_dropdown"
     .compare-ellipsis.inline ...
     .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
       .input-group.inline-input-group
         %span.input-group-addon to
         = hidden_field_tag :to, params[:to]
-        = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
-          .dropdown-toggle-text= params[:to] || 'Select branch/tag'
+        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
+          .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag'
       = render "ref_dropdown"
     &nbsp;
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"
diff --git a/app/views/projects/cycle_analytics/_empty_stage.html.haml b/app/views/projects/cycle_analytics/_empty_stage.html.haml
index b200ce22970..c3f95860e92 100644
--- a/app/views/projects/cycle_analytics/_empty_stage.html.haml
+++ b/app/views/projects/cycle_analytics/_empty_stage.html.haml
@@ -2,6 +2,6 @@
   .empty-stage
     .icon-no-data
       = custom_icon ('icon_no_data')
-    %h4 We don’t have enough data to show this stage.
+    %h4 We don't have enough data to show this stage.
     %p
       {{currentStage.emptyStageText}}
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index ef1b38d5e21..479ce44f378 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -7,7 +7,7 @@
 
 #cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
   - if @cycle_analytics_no_data
-    .bordered-box.landing.content-block{"v-if" => "!isOverviewDialogDismissed"}
+    .bordered-box.landing.content-block{ "v-if" => "!isOverviewDialogDismissed" }
       = icon("times", class: "dismiss-icon", "@click" => "dismissOverviewDialog()")
       .row
         .col-sm-3.col-xs-12.svg-container
@@ -20,19 +20,19 @@
 
           = link_to "Read more",  help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
   = icon("spinner spin", "v-show" => "isLoading")
-  .wrapper{"v-show" => "!isLoading && !hasError"}
+  .wrapper{ "v-show" => "!isLoading && !hasError" }
     .panel.panel-default
       .panel-heading
         Pipeline Health
       .content-block
         .container-fluid
           .row
-            .col-sm-3.col-xs-12.column{"v-for" => "item in state.summary"}
-              %h3.header {{item.value}}
-              %p.text {{item.title}}
+            .col-sm-3.col-xs-12.column{ "v-for" => "item in state.summary" }
+              %h3.header {{ item.value }}
+              %p.text {{ item.title }}
             .col-sm-3.col-xs-12.column
               .dropdown.inline.js-ca-dropdown
-                %button.dropdown-menu-toggle{"data-toggle" => "dropdown", :type => "button"}
+                %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
                   %span.dropdown-label Last 30 days
                   %i.fa.fa-chevron-down
                 %ul.dropdown-menu.dropdown-menu-align-right
diff --git a/app/views/projects/deploy_keys/_deploy_key.html.haml b/app/views/projects/deploy_keys/_deploy_key.html.haml
index 450aaeb367c..d1e3cb14022 100644
--- a/app/views/projects/deploy_keys/_deploy_key.html.haml
+++ b/app/views/projects/deploy_keys/_deploy_key.html.haml
@@ -6,6 +6,9 @@
       = deploy_key.title
     .description
       = deploy_key.fingerprint
+    - if deploy_key.can_push?
+      .write-access-allowed
+        Write access allowed
   .deploy-key-content.prepend-left-default.deploy-key-projects
     - deploy_key.projects.each do |project|
       - if can?(current_user, :read_project, project)
diff --git a/app/views/projects/deploy_keys/_form.html.haml b/app/views/projects/deploy_keys/_form.html.haml
index 901605f7ca3..c91bb9c255a 100644
--- a/app/views/projects/deploy_keys/_form.html.haml
+++ b/app/views/projects/deploy_keys/_form.html.haml
@@ -10,4 +10,13 @@
     %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")
+  .form-group
+    .checkbox
+      = f.label :can_push do
+        = f.check_box :can_push
+        %strong Write access allowed
+  .form-group
+    %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"
diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml
index 58a214bdbd1..a680b1ca017 100644
--- a/app/views/projects/deployments/_actions.haml
+++ b/app/views/projects/deployments/_actions.haml
@@ -3,7 +3,7 @@
   - if actions.present?
     .inline
       .dropdown
-        %a.dropdown-new.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
+        %a.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' }
           = custom_icon('icon_play')
           = icon('caret-down')
         %ul.dropdown-menu.dropdown-menu-align-right
diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml
index ff250eeca50..170d786ecbf 100644
--- a/app/views/projects/deployments/_commit.html.haml
+++ b/app/views/projects/deployments/_commit.html.haml
@@ -1,4 +1,4 @@
-%div.branch-commit
+.branch-commit
   - if deployment.ref
     .icon-container
       = deployment.tag? ? icon('tag') : icon('code-fork')
diff --git a/app/views/projects/diffs/_content.html.haml b/app/views/projects/diffs/_content.html.haml
index 6120b2191dd..52a1ece7d60 100644
--- a/app/views/projects/diffs/_content.html.haml
+++ b/app/views/projects/diffs/_content.html.haml
@@ -10,7 +10,7 @@
       .nothing-here-block This diff was suppressed by a .gitattributes entry.
     - elsif diff_file.collapsed?
       - url = url_for(params.merge(action: :diff_for_path, old_path: diff_file.old_path, new_path: diff_file.new_path, file_identifier: diff_file.file_identifier))
-      .nothing-here-block.diff-collapsed{data: { diff_for_path: url } }
+      .nothing-here-block.diff-collapsed{ data: { diff_for_path: url } }
         This diff is collapsed.
         %a.click-to-expand
           Click to expand it.
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index ab4a2dc36e5..58c20e225c6 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -18,8 +18,8 @@
       = parallel_diff_btn
   = render 'projects/diffs/stats', diff_files: diff_files
 
-- if diff_files.overflow?
-  = render 'projects/diffs/warning', diff_files: diff_files
+- if render_overflow_warning?(diff_files)
+  = render 'projects/diffs/warning', diff_files: diffs
 
 .files{ data: { can_create_note: can_create_note } }
   - diff_files.each_with_index do |diff_file|
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 6c33d80becd..c37a33bbcd5 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -1,5 +1,5 @@
-.diff-file.file-holder{id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_commit.id)}
-  .file-title{id: "file-path-#{hexdigest(diff_file.file_path)}"}
+.diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_commit.id) }
+  .file-title
     = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}"
 
     - unless diff_file.submodule?
diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml
index d3ed8e1bf38..90c9a0c6c2b 100644
--- a/app/views/projects/diffs/_file_header.html.haml
+++ b/app/views/projects/diffs/_file_header.html.haml
@@ -21,7 +21,7 @@
       - if diff_file.deleted_file
         deleted
 
-  = clipboard_button(clipboard_text: diff_file.new_path, class: 'btn-clipboard btn-transparent prepend-left-5', title: 'Copy filename to clipboard')
+  = clipboard_button(clipboard_text: diff_file.new_path, class: 'btn-clipboard btn-transparent prepend-left-5', title: 'Copy file path to clipboard')
 
   - if diff_file.mode_changed?
     %small
diff --git a/app/views/projects/diffs/_image.html.haml b/app/views/projects/diffs/_image.html.haml
index 9ec6a7aa5cd..1bccaaf5273 100644
--- a/app/views/projects/diffs/_image.html.haml
+++ b/app/views/projects/diffs/_image.html.haml
@@ -7,16 +7,16 @@
 - if diff.renamed_file || diff.new_file || diff.deleted_file
   .image
     %span.wrap
-      .frame{class: image_diff_class(diff)}
-        %img{src: diff.deleted_file ? old_file_raw_path : file_raw_path}
+      .frame{ class: image_diff_class(diff) }
+        %img{ src: diff.deleted_file ? old_file_raw_path : file_raw_path, alt: diff.new_path }
       %p.image-info= "#{number_to_human_size file.size}"
 - else
   .image
-    %div.two-up.view
+    .two-up.view
       %span.wrap
         .frame.deleted
-          %a{href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.old_ref, diff.old_path))}
-            %img{src: old_file_raw_path}
+          %a{ href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.old_ref, diff.old_path)) }
+            %img{ src: old_file_raw_path, alt: diff.old_path }
         %p.image-info.hide
           %span.meta-filesize= "#{number_to_human_size old_file.size}"
           |
@@ -27,8 +27,8 @@
           %span.meta-height
       %span.wrap
         .frame.added
-          %a{href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.new_ref, diff.new_path))}
-            %img{src: file_raw_path}
+          %a{ href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.new_ref, diff.new_path)) }
+            %img{ src: file_raw_path, alt: diff.new_path }
         %p.image-info.hide
           %span.meta-filesize= "#{number_to_human_size file.size}"
           |
@@ -38,32 +38,32 @@
           %b H:
           %span.meta-height
 
-    %div.swipe.view.hide
+    .swipe.view.hide
       .swipe-frame
         .frame.deleted
-          %img{src: old_file_raw_path}
+          %img{ src: old_file_raw_path, alt: diff.old_path }
         .swipe-wrap
           .frame.added
-            %img{src: file_raw_path}
+            %img{ src: file_raw_path, alt: diff.new_path }
         %span.swipe-bar
           %span.top-handle
           %span.bottom-handle
 
-    %div.onion-skin.view.hide
+    .onion-skin.view.hide
       .onion-skin-frame
         .frame.deleted
-          %img{src: old_file_raw_path}
+          %img{ src: old_file_raw_path, alt: diff.old_path }
         .frame.added
-          %img{src: file_raw_path}
+          %img{ src: file_raw_path, alt: diff.new_path }
         .controls
           .transparent
           .drag-track
-            .dragger{:style => "left: 0px;"}
+            .dragger{ :style => "left: 0px;" }
           .opaque
 
 
   .view-modes.hide
     %ul.view-modes-menu
-      %li.two-up{data: {mode: 'two-up'}} 2-up
-      %li.swipe{data: {mode: 'swipe'}} Swipe
-      %li.onion-skin{data: {mode: 'onion-skin'}} Onion skin
+      %li.two-up{ data: { mode: 'two-up' } } 2-up
+      %li.swipe{ data: { mode: 'swipe' } } Swipe
+      %li.onion-skin{ data: { mode: 'onion-skin' } } Onion skin
diff --git a/app/views/projects/diffs/_line.html.haml b/app/views/projects/diffs/_line.html.haml
index 16c96b66714..cd18ba2ed00 100644
--- a/app/views/projects/diffs/_line.html.haml
+++ b/app/views/projects/diffs/_line.html.haml
@@ -16,13 +16,13 @@
       - if plain
         = link_text
       - else
-        %a{href: "##{line_code}", data: { linenumber: link_text }}
+        %a{ href: "##{line_code}", data: { linenumber: link_text } }
     %td.new_line.diff-line-num{ class: type, data: { linenumber: line.new_pos } }
       - link_text = type == "old" ? " " : line.new_pos
       - if plain
         = link_text
       - else
-        %a{href: "##{line_code}", data: { linenumber: link_text }}
+        %a{ href: "##{line_code}", data: { linenumber: link_text } }
     %td.line_content.noteable_line{ class: type, data: (diff_view_line_data(line_code, diff_file.position(line), type) unless plain) }<
       - if email
         %pre= line.text
diff --git a/app/views/projects/diffs/_parallel_view.html.haml b/app/views/projects/diffs/_parallel_view.html.haml
index 78aa9fb7391..b087485aa17 100644
--- a/app/views/projects/diffs/_parallel_view.html.haml
+++ b/app/views/projects/diffs/_parallel_view.html.haml
@@ -1,5 +1,5 @@
 / Side-by-side diff view
-%div.text-file.diff-wrap-lines.code.js-syntax-highlight{ data: diff_view_data }
+.text-file.diff-wrap-lines.code.js-syntax-highlight{ data: diff_view_data }
   %table
     - last_line = 0
     - diff_file.parallel_diff_lines.each do |line|
@@ -13,9 +13,9 @@
           - else
             - left_line_code = diff_file.line_code(left)
             - left_position = diff_file.position(left)
-            %td.old_line.diff-line-num{id: left_line_code, class: left.type, data: { linenumber: left.old_pos }}
-              %a{href: "##{left_line_code}" }= raw(left.old_pos)
-            %td.line_content.parallel.noteable_line{class: left.type, data: diff_view_line_data(left_line_code, left_position, 'old')}= diff_line_content(left.text)
+            %td.old_line.diff-line-num{ id: left_line_code, class: left.type, data: { linenumber: left.old_pos } }
+              %a{ href: "##{left_line_code}" }= raw(left.old_pos)
+            %td.line_content.parallel.noteable_line{ class: left.type, data: diff_view_line_data(left_line_code, left_position, 'old') }= diff_line_content(left.text)
         - else
           %td.old_line.diff-line-num.empty-cell
           %td.line_content.parallel
@@ -26,9 +26,9 @@
           - else
             - right_line_code = diff_file.line_code(right)
             - right_position = diff_file.position(right)
-            %td.new_line.diff-line-num{id: right_line_code, class: right.type, data: { linenumber: right.new_pos }}
-              %a{href: "##{right_line_code}" }= raw(right.new_pos)
-            %td.line_content.parallel.noteable_line{class: right.type, data: diff_view_line_data(right_line_code, right_position, 'new')}= diff_line_content(right.text)
+            %td.new_line.diff-line-num{ id: right_line_code, class: right.type, data: { linenumber: right.new_pos } }
+              %a{ href: "##{right_line_code}" }= raw(right.new_pos)
+            %td.line_content.parallel.noteable_line{ class: right.type, data: diff_view_line_data(right_line_code, right_position, 'new') }= diff_line_content(right.text)
         - else
           %td.old_line.diff-line-num.empty-cell
           %td.line_content.parallel
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
index 66d6254aa1e..290f696d582 100644
--- a/app/views/projects/diffs/_stats.html.haml
+++ b/app/views/projects/diffs/_stats.html.haml
@@ -14,24 +14,23 @@
         %li
           - if diff_file.deleted_file
             %span.deleted-file
-              %a{href: "##{file_hash}"}
+              %a{ href: "##{file_hash}" }
                 %i.fa.fa-minus
                 = diff_file.old_path
           - elsif diff_file.renamed_file
             %span.renamed-file
-              %a{href: "##{file_hash}"}
+              %a{ href: "##{file_hash}" }
                 %i.fa.fa-minus
                 = diff_file.old_path
                 &rarr;
                 = diff_file.new_path
           - elsif diff_file.new_file
             %span.new-file
-              %a{href: "##{file_hash}"}
+              %a{ href: "##{file_hash}" }
                 %i.fa.fa-plus
                 = diff_file.new_path
           - else
             %span.edit-file
-              %a{href: "##{file_hash}"}
+              %a{ href: "##{file_hash}" }
                 %i.fa.fa-adjust
                 = diff_file.new_path
-
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index c0a83091c8c..58c085cdb9d 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -32,7 +32,7 @@
     .empty_wrapper
       %h3.page-title-empty
         Command line instructions
-      %div.git-empty
+      .git-empty
         %fieldset
           %h5 Git global setup
           %pre.light-well
@@ -52,7 +52,7 @@
               git push -u origin master
 
         %fieldset
-          %h5 Existing folder or Git repository
+          %h5 Existing folder
           %pre.light-well
             :preserve
               cd existing_folder
@@ -62,6 +62,15 @@
               git commit
               git push -u origin master
 
+        %fieldset
+          %h5 Existing Git repository
+          %pre.light-well
+            :preserve
+              cd existing_repo
+              git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')}
+              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-remove pull-right"
diff --git a/app/views/projects/environments/_terminal_button.html.haml b/app/views/projects/environments/_terminal_button.html.haml
new file mode 100644
index 00000000000..97de9c95de7
--- /dev/null
+++ b/app/views/projects/environments/_terminal_button.html.haml
@@ -0,0 +1,3 @@
+- if environment.has_terminals? && can?(current_user, :admin_environment, @project)
+  = link_to terminal_namespace_project_environment_path(@project.namespace, @project, environment), class: 'btn terminal-button' do
+    = icon('terminal')
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index a65a630f2d0..8c728eb0f6a 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -4,10 +4,6 @@
 
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag("environments/environments_bundle.js")
-.commit-icon-svg.hidden
-  = custom_icon("icon_commit")
-.play-icon-svg.hidden
-  = custom_icon("icon_play")
 
 #environments-list-view{ data: { environments_data: environments_list_data,
   "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,
@@ -19,4 +15,5 @@
   "help-page-path" => help_page_path("ci/environments"),
   "css-class" => container_class,
   "commit-icon-svg" => custom_icon("icon_commit"),
-  "play-icon-svg" => custom_icon("icon_play")}}
+  "terminal-icon-svg" => custom_icon("icon_terminal"),
+  "play-icon-svg" => custom_icon("icon_play") } }
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index bcac73d3698..6e0d9456900 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -8,6 +8,7 @@
       %h3.page-title= @environment.name.capitalize
     .col-md-3
       .nav-controls
+        = render 'projects/environments/terminal_button', environment: @environment
         = render 'projects/environments/external_url', environment: @environment
         - if can?(current_user, :update_environment, @environment)
           = link_to 'Edit', edit_namespace_project_environment_path(@project.namespace, @project, @environment), class: 'btn'
diff --git a/app/views/projects/environments/terminal.html.haml b/app/views/projects/environments/terminal.html.haml
new file mode 100644
index 00000000000..431253c1299
--- /dev/null
+++ b/app/views/projects/environments/terminal.html.haml
@@ -0,0 +1,22 @@
+- @no_container = true
+- page_title "Terminal for environment", @environment.name
+= render "projects/pipelines/head"
+
+- content_for :page_specific_javascripts do
+  = stylesheet_link_tag "xterm/xterm"
+  = page_specific_javascript_tag("terminal/terminal_bundle.js")
+
+%div{ class: container_class }
+  .top-area
+    .row
+      .col-sm-6
+        %h3.page-title
+          Terminal for environment
+          = @environment.name
+
+      .col-sm-6
+        .nav-controls
+          = render 'projects/deployments/actions', deployment: @environment.last_deployment
+
+.terminal-container{ class: container_class }
+  #terminal{ data: { project_path: "#{terminal_namespace_project_environment_path(@project.namespace, @project, @environment)}.ws" } }
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index 9322c82904f..4cdb44325b3 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -9,11 +9,11 @@
         = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
           = @project.path
       %li.file-finder
-        %input#file_find.form-control.file-finder-input{type: "text", placeholder: 'Find by path', autocomplete: 'off'}
+        %input#file_find.form-control.file-finder-input{ type: "text", placeholder: 'Find by path', autocomplete: 'off' }
 
-  %div.tree-content-holder
+  .tree-content-holder
     .table-holder
-      %table.table.files-slider{class: "table_#{@hex_path} tree-table table-striped" }
+      %table.table.files-slider{ class: "table_#{@hex_path} tree-table table-striped" }
         %tbody
       = spinner nil, true
 
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index 5ee3979c7e7..6c8a6f051a9 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -1,7 +1,7 @@
 .top-area
   .nav-text
     - full_count_title = "#{@public_forks_count} public and #{@private_forks_count} private"
-    == #{pluralize(@total_forks_count, 'fork')}: #{full_count_title}
+    = "#{pluralize(@total_forks_count, 'fork')}: #{full_count_title}"
 
   .nav-controls
     = form_tag request.original_url, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
@@ -9,7 +9,7 @@
         spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
 
     .dropdown
-      %button.dropdown-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+      %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
         %span.light sort:
         - if @sort.present?
           = sort_options_hash[@sort]
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 7f751d9ae2e..6d7af1685fd 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
@@ -6,12 +6,9 @@
 - stage = local_assigns.fetch(:stage, false)
 - coverage = local_assigns.fetch(:coverage, false)
 
-%tr.generic_commit_status{class: ('retried' if retried)}
+%tr.generic_commit_status{ class: ('retried' if retried) }
   %td.status
-    - if can?(current_user, :read_commit_status, generic_commit_status) && generic_commit_status.target_url
-      = ci_status_with_icon(generic_commit_status.status, generic_commit_status.target_url)
-    - else
-      = ci_status_with_icon(generic_commit_status.status)
+    = render 'ci/status/badge', status: generic_commit_status.detailed_status(current_user)
 
   %td.generic_commit_status-link
     - if can?(current_user, :read_commit_status, generic_commit_status) && generic_commit_status.target_url
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
deleted file mode 100644
index 1bba0443154..00000000000
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-%a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.js-pipeline-graph', placement: 'bottom' } }
-  - if subject.target_url
-    = link_to subject.target_url do
-      %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-        = ci_icon_for_status(subject.status)
-      %span.ci-status-text= subject.name
-  - else
-    %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-      = ci_icon_for_status(subject.status)
-    %span.ci-status-text= subject.name
diff --git a/app/views/projects/graphs/ci/_build_times.haml b/app/views/projects/graphs/ci/_build_times.haml
index 195f18afc76..bb0975a9535 100644
--- a/app/views/projects/graphs/ci/_build_times.haml
+++ b/app/views/projects/graphs/ci/_build_times.haml
@@ -2,7 +2,7 @@
   %p.light
     Commit duration in minutes for last 30 commits
 
-  %canvas#build_timesChart{height: 200}
+  %canvas#build_timesChart{ height: 200 }
 
 :javascript
   var data = {
diff --git a/app/views/projects/graphs/ci/_builds.haml b/app/views/projects/graphs/ci/_builds.haml
index 1fbf6ca2c1c..431657c4dcb 100644
--- a/app/views/projects/graphs/ci/_builds.haml
+++ b/app/views/projects/graphs/ci/_builds.haml
@@ -13,18 +13,18 @@
   %p.light
     Builds for last week
     (#{date_from_to(Date.today - 7.days, Date.today)})
-  %canvas#weekChart{height: 200}
+  %canvas#weekChart{ height: 200 }
 
 .prepend-top-default
   %p.light
     Builds for last month
     (#{date_from_to(Date.today - 30.days, Date.today)})
-  %canvas#monthChart{height: 200}
+  %canvas#monthChart{ height: 200 }
 
 .prepend-top-default
   %p.light
     Builds for last year
-  %canvas#yearChart.padded{height: 250}
+  %canvas#yearChart.padded{ height: 250 }
 
 - [:week, :month, :year].each do |scope|
   :javascript
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index ac5f792d140..5ebb939a109 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -21,7 +21,7 @@
       %h3#date_header.page-title
       %p.light
         Commits to #{@ref}, excluding merge commits. Limited to 6,000 commits.
-      %input#brush_change{:type => "hidden"}
+      %input#brush_change{ :type => "hidden" }
     .graphs.row
       #contributors-master
       #contributors.clearfix
diff --git a/app/views/projects/group_links/index.html.haml b/app/views/projects/group_links/_index.html.haml
index 1b0dbbb8111..99d0df2ac34 100644
--- a/app/views/projects/group_links/index.html.haml
+++ b/app/views/projects/group_links/_index.html.haml
@@ -20,10 +20,10 @@
       .form-group
         = label_tag :expires_at, 'Access expiration date', class: 'label-light'
         .clearable-input
-          = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Select access expiration date'
+          = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date-groups', placeholder: 'Select access expiration date', id: 'expires_at_groups'
           %i.clear-icon.js-clear-input
         .help-block
-          On this date, all users in the group will automatically lose access to this project.
+          On this date, all members in the group will automatically lose access to this project.
       = submit_tag "Share", class: "btn btn-create"
   .col-lg-9.col-lg-offset-3
     %hr
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index c80210d6ff4..bd46af339cf 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -43,7 +43,7 @@
         = icon('clock-o')
         = issue.milestone.title
     - if issue.due_date
-      %span{class: "#{'cred' if issue.overdue?}"}
+      %span{ class: "#{'cred' if issue.overdue?}" }
         &nbsp;
         = icon('calendar')
         = issue.due_date.to_s(:medium)
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index c56b6cc11f5..13e2150f997 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -1,9 +1,6 @@
 - if can?(current_user, :push_code, @project)
   .pull-right
-    #new-branch.new-branch{'data-path' => can_create_branch_namespace_project_issue_path(@project.namespace, @project, @issue)}
-      = link_to '#', class: 'checking btn btn-grouped', disabled: 'disabled' do
-        = icon('spinner spin')
-        Checking branches
+    #new-branch.new-branch{ 'data-path' => can_create_branch_namespace_project_issue_path(@project.namespace, @project, @issue) }
       = link_to namespace_project_branches_path(@project.namespace, @project, branch_name: @issue.to_branch_name, issue_iid: @issue.iid),
         method: :post, class: 'btn btn-new btn-inverted btn-grouped has-tooltip available hide', title: @issue.to_branch_name do
         New branch
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 26f3f0ac292..18e8372ecab 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -6,6 +6,9 @@
 = content_for :sub_nav do
   = render "projects/issues/head"
 
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('filtered_search/filtered_search_bundle.js')
+
 = content_for :meta_tags do
   - if current_user
     = auto_discovery_link_tag(:atom, url_for(params.merge(format: :atom, private_token: current_user.private_token)), title: "#{@project.name} issues")
@@ -20,7 +23,6 @@
             = icon('rss')
             %span.icon-label
               Subscribe
-        = render 'shared/issuable/search_form', path: namespace_project_issues_path(@project.namespace, @project)
         - if can? current_user, :create_issue, @project
           = link_to new_namespace_project_issue_path(@project.namespace,
                                                      @project,
@@ -30,7 +32,7 @@
                                                      title: "New Issue",
                                                      id: "new_issue_link" do
             New Issue
-    = render 'shared/issuable/filter', type: :issues
+    = render 'shared/issuable/search_bar', type: :issues
 
     .issues-holder
       = render 'issues'
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index bd629b5c519..9fa00811af0 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -1,6 +1,9 @@
+- @content_class = "limit-container-width" unless fluid_layout
 - page_title           "#{@issue.title} (#{@issue.to_reference})", "Issues"
 - page_description     @issue.description
 - page_card_attributes @issue.card_attributes
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/vue_resource.js')
 
 .clearfix.detail-page-header
   .issuable-header
diff --git a/app/views/projects/mattermosts/_no_teams.html.haml b/app/views/projects/mattermosts/_no_teams.html.haml
new file mode 100644
index 00000000000..605c7f61dee
--- /dev/null
+++ b/app/views/projects/mattermosts/_no_teams.html.haml
@@ -0,0 +1,12 @@
+%p
+  You aren’t a member of any team on the Mattermost instance at
+  %strong= Gitlab.config.mattermost.host
+%p
+  To install this service,
+  = link_to "#{Gitlab.config.mattermost.host}/select_team", target: '__blank' do
+    join a team
+    = icon('external-link')
+  and try again.
+%hr
+.clearfix
+  = link_to 'Go back', edit_namespace_project_service_path(@project.namespace, @project, @service), class: 'btn btn-lg pull-right'
diff --git a/app/views/projects/mattermosts/_team_selection.html.haml b/app/views/projects/mattermosts/_team_selection.html.haml
new file mode 100644
index 00000000000..a80f9aa4c4a
--- /dev/null
+++ b/app/views/projects/mattermosts/_team_selection.html.haml
@@ -0,0 +1,47 @@
+%p
+  This service will be installed on the Mattermost instance at
+  %strong= link_to Gitlab.config.mattermost.host, Gitlab.config.mattermost.host
+%hr
+= form_for(:mattermost, method: :post, url: namespace_project_mattermost_path(@project.namespace, @project)) do |f|
+  %h4 Team
+  %p
+    = @teams.one? ? 'The team' : 'Select the team'
+    where the slash commands will be used in
+  - selected_id = @teams.one? ? @teams.keys.first : 0
+  - options = mattermost_teams_options(@teams)
+  - options = options_for_select(options, selected_id)
+  = f.select(:team_id, options, {}, { class: 'form-control', disabled: @teams.one?, selected: selected_id })
+  = f.hidden_field(:team_id, value: selected_id) if @teams.one?
+  .help-block
+    - if @teams.one?
+      This is the only available team.
+    - else
+      The list shows all available teams.
+    To create a team,
+    = link_to "#{Gitlab.config.mattermost.host}/create_team" do
+      use Mattermost's interface
+      = icon('external-link')
+    or ask your Mattermost system administrator.
+  %hr
+  %h4 Command trigger word
+  %p Choose the word that will trigger commands
+  = f.text_field(:trigger, value: @project.path, class: 'form-control')
+  .help-block
+    %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.
+    %p
+      Suggestions:
+      %code= 'gitlab'
+      %code= @project.path # Path contains no spaces, but dashes
+      %code= @project.path_with_namespace
+    %p
+      Reserved:
+      = link_to 'https://docs.mattermost.com/help/messaging/executing-commands.html#built-in-commands', target: '__blank' do
+        see list of built-in slash commands
+        = icon('external-link')
+  %hr
+  .clearfix
+    .pull-right
+      = link_to 'Cancel', edit_namespace_project_service_path(@project.namespace, @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
new file mode 100644
index 00000000000..96b1d2aee61
--- /dev/null
+++ b/app/views/projects/mattermosts/new.html.haml
@@ -0,0 +1,8 @@
+.service-installation
+  .inline.pull-right
+    = custom_icon('mattermost_logo', size: 48)
+  %h3 Install Mattermost Command
+  - if @teams.empty?
+    = render 'no_teams'
+  - else
+    = render 'team_selection'
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index fa189ae62d8..e3b0aa7e644 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -1,4 +1,4 @@
-%li{ class: mr_css_classes(merge_request) }
+%li{ id: dom_id(merge_request), class: mr_css_classes(merge_request), data: { labels: merge_request.label_ids, id: merge_request.id } }
   - if @bulk_edit
     .issue-check
       = check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected_issue"
@@ -39,7 +39,7 @@
           = icon('thumbs-down')
           = downvotes
 
-      - note_count = merge_request.mr_and_commit_notes.user.count
+      - note_count = merge_request.related_notes.user.count
       %li
         = link_to merge_request_path(merge_request, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
           = icon('comments')
@@ -65,7 +65,7 @@
       &nbsp;
       - merge_request.labels.each do |label|
         = link_to_label(label, subject: merge_request.project, type: :merge_request)
-        
+
     - if merge_request.tasks?
       &nbsp;
       %span.task-status
diff --git a/app/views/projects/merge_requests/_new_submit.html.haml b/app/views/projects/merge_requests/_new_submit.html.haml
index 4a08ed045f4..34ead6427e0 100644
--- a/app/views/projects/merge_requests/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/_new_submit.html.haml
@@ -10,7 +10,7 @@
   %span.pull-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' } do |f|
+= 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|
   = render 'shared/issuable/form', f: f, issuable: @merge_request
   = f.hidden_field :source_project_id
   = f.hidden_field :source_branch
@@ -34,11 +34,6 @@
           = link_to url_for(params), data: {target: 'div#pipelines', action: 'pipelines', toggle: 'tab'} do
             Pipelines
             %span.badge= @pipelines.size
-      - if @pipeline.present?
-        %li.builds-tab
-          = link_to url_for(params), data: {target: 'div#builds', action: 'builds', toggle: 'tab'} do
-            Builds
-            %span.badge= @statuses_count
       %li.diffs-tab
         = link_to url_for(params.merge(action: 'new_diffs')), data: {target: 'div#diffs', action: 'new/diffs', toggle: 'tab'} do
           Changes
@@ -49,9 +44,6 @@
         = render "projects/merge_requests/show/commits"
       #diffs.diffs.tab-pane
         - # This tab is always loaded via AJAX
-      - if @pipeline.present?
-        #builds.builds.tab-pane
-          = render "projects/merge_requests/show/builds"
       - if @pipelines.any?
         #pipelines.pipelines.tab-pane
           = render "projects/merge_requests/show/pipelines"
@@ -66,6 +58,5 @@
   });
 :javascript
   var merge_request = new MergeRequest({
-    action: "#{(@show_changes_tab ? 'new/diffs' : 'new')}",
-    buildsLoaded: "#{@pipeline.present? ? 'true' : 'false'}"
+    action: "#{(@show_changes_tab ? 'new/diffs' : 'new')}"
   });
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 896f10104fa..2a7cd3a19d0 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -1,13 +1,15 @@
+- @content_class = "limit-container-width" unless fluid_layout
 - page_title           "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests"
 - page_description     @merge_request.description
 - page_card_attributes @merge_request.card_attributes
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/vue_resource.js')
   = page_specific_javascript_tag('diff_notes/diff_notes_bundle.js')
 
-.merge-request{'data-url' => merge_request_path(@merge_request)}
+.merge-request{ 'data-url' => merge_request_path(@merge_request) }
   = render "projects/merge_requests/show/mr_title"
 
-  .merge-request-details.issuable-details{data: {id: @merge_request.project.id}}
+  .merge-request-details.issuable-details{ data: { id: @merge_request.project.id } }
     = render "projects/merge_requests/show/mr_box"
     .append-bottom-default.mr-source-target.prepend-top-default
       - if @merge_request.open?
@@ -41,71 +43,63 @@
     = render "projects/merge_requests/widget/show.html.haml"
 
     - if @merge_request.source_branch_exists? && @merge_request.mergeable? && @merge_request.can_be_merged_by?(current_user)
-      .light.prepend-top-default.append-bottom-default
+      .merge-manually.light.prepend-top-default
         You can also accept this merge request manually using the
         = succeed '.' do
           = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
-    - if @commits_count.nonzero?
-      .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
-        %div{ class: container_class }
-          %ul.merge-request-tabs.nav-links.no-top.no-bottom
-            %li.notes-tab
-              = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
-                Discussion
-                %span.badge= @merge_request.mr_and_commit_notes.user.count
-            - if @merge_request.source_project
-              %li.commits-tab
-                = link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#commits', action: 'commits', toggle: 'tab' } do
-                  Commits
-                  %span.badge= @commits_count
-            - if @pipelines.any?
-              %li.pipelines-tab
-                = link_to pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
-                  Pipelines
-                  %span.badge= @pipelines.size
-            - if @pipeline.present?
-              %li.builds-tab
-                = link_to builds_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#builds', action: 'builds', toggle: 'tab' } do
-                  Builds
-                  %span.badge= @statuses_count
-            %li.diffs-tab
-              = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
-                Changes
-                %span.badge= @merge_request.diff_size
-            %li#resolve-count-app.line-resolve-all-container.pull-right.prepend-top-10.hidden-xs{ "v-cloak" => true }
-              %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}"  }
-                %div
-                  .line-resolve-all{ "v-show" => "discussionCount > 0",
-                    ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
-                    %span.line-resolve-btn.is-disabled{ type: "button",
-                        ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
-                      = render "shared/icons/icon_status_success.svg"
-                    %span.line-resolve-text
-                      {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
-                  = render "discussions/jump_to_next"
-
-      .tab-content#diff-notes-app
-        #notes.notes.tab-pane.voting_notes
-          .content-block.content-block-small
-            = render 'award_emoji/awards_block', awardable: @merge_request, inline: true
-
-          .row
-            %section.col-md-12
-              .issuable-discussion
-                = render "projects/merge_requests/discussion"
-
-        #commits.commits.tab-pane
-          - # This tab is always loaded via AJAX
-        #builds.builds.tab-pane
-          - # This tab is always loaded via AJAX
-        #pipelines.pipelines.tab-pane
-          - # This tab is always loaded via AJAX
-        #diffs.diffs.tab-pane
-          - # This tab is always loaded via AJAX
-
-      .mr-loading-status
-        = spinner
+    .content-block.content-block-small.emoji-list-container
+      = render 'award_emoji/awards_block', awardable: @merge_request, inline: true
+
+    .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
+      %div{ class: container_class }
+        %ul.merge-request-tabs.nav-links.no-top.no-bottom
+          %li.notes-tab
+            = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
+              Discussion
+              %span.badge= @merge_request.related_notes.user.count
+          - if @merge_request.source_project
+            %li.commits-tab
+              = link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#commits', action: 'commits', toggle: 'tab' } do
+                Commits
+                %span.badge= @commits_count
+          - if @pipelines.any?
+            %li.pipelines-tab
+              = link_to pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
+                Pipelines
+                %span.badge= @pipelines.size
+          %li.diffs-tab
+            = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
+              Changes
+              %span.badge= @merge_request.diff_size
+          %li#resolve-count-app.line-resolve-all-container.pull-right.prepend-top-10.hidden-xs{ "v-cloak" => true }
+            %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}" }
+              %div
+                .line-resolve-all{ "v-show" => "discussionCount > 0",
+                  ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
+                  %span.line-resolve-btn.is-disabled{ type: "button",
+                      ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
+                    = render "shared/icons/icon_status_success.svg"
+                  %span.line-resolve-text
+                    {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
+                = render "discussions/jump_to_next"
+
+    .tab-content#diff-notes-app
+      #notes.notes.tab-pane.voting_notes
+        .row
+          %section.col-md-12
+            .issuable-discussion
+              = render "projects/merge_requests/discussion"
+
+      #commits.commits.tab-pane
+        - # This tab is always loaded via AJAX
+      #pipelines.pipelines.tab-pane
+        - # This tab is always loaded via AJAX
+      #diffs.diffs.tab-pane
+        - # This tab is always loaded via AJAX
+
+    .mr-loading-status
+      = spinner
 
 = render 'shared/issuable/sidebar', issuable: @merge_request
 - if @merge_request.can_be_reverted?(current_user)
@@ -119,3 +113,6 @@
   merge_request = new MergeRequest({
     action: "#{controller.action_name}"
   });
+
+  var mrRefreshWidgetUrl = "#{mr_widget_refresh_url(@merge_request)}";
+
diff --git a/app/views/projects/merge_requests/conflicts.html.haml b/app/views/projects/merge_requests/conflicts.html.haml
index 16789f68f70..ebef2157d34 100644
--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/app/views/projects/merge_requests/conflicts.html.haml
@@ -1,5 +1,6 @@
 - page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/vue_resource.js')
   = page_specific_javascript_tag('merge_conflicts/merge_conflicts_bundle.js')
   = page_specific_javascript_tag('lib/ace.js')
 = render "projects/merge_requests/show/mr_title"
@@ -9,29 +10,29 @@
 
 = render 'shared/issuable/sidebar', issuable: @merge_request
 
-#conflicts{"v-cloak" => "true", data: { conflicts_path: conflicts_namespace_project_merge_request_path(@merge_request.project.namespace, @merge_request.project, @merge_request, format: :json),
+#conflicts{ "v-cloak" => "true", data: { conflicts_path: conflicts_namespace_project_merge_request_path(@merge_request.project.namespace, @merge_request.project, @merge_request, format: :json),
     resolve_conflicts_path: resolve_conflicts_namespace_project_merge_request_path(@merge_request.project.namespace, @merge_request.project, @merge_request) } }
-  .loading{"v-if" => "isLoading"}
+  .loading{ "v-if" => "isLoading" }
     %i.fa.fa-spinner.fa-spin
 
-  .nothing-here-block{"v-if" => "hasError"}
+  .nothing-here-block{ "v-if" => "hasError" }
     {{conflictsData.errorMessage}}
 
   = render partial: "projects/merge_requests/conflicts/commit_stats"
 
-  .files-wrapper{"v-if" => "!isLoading && !hasError"}
+  .files-wrapper{ "v-if" => "!isLoading && !hasError" }
     .files
-      .diff-file.file-holder.conflict{"v-for" => "file in conflictsData.files"}
+      .diff-file.file-holder.conflict{ "v-for" => "file in conflictsData.files" }
         .file-title
-          %i.fa.fa-fw{":class" => "file.iconClass"}
+          %i.fa.fa-fw{ ":class" => "file.iconClass" }
           %strong {{file.filePath}}
           = render partial: 'projects/merge_requests/conflicts/file_actions'
         .diff-content.diff-wrap-lines
-          .diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
+          .diff-wrap-lines.code.file-content.js-syntax-highlight{ "v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
             = render partial: "projects/merge_requests/conflicts/components/inline_conflict_lines"
-          .diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
+          .diff-wrap-lines.code.file-content.js-syntax-highlight{ "v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
             %parallel-conflict-lines{ ":file" => "file" }
-          %div{"v-show" => "file.resolveMode === 'edit' ||  file.type === 'text-editor'"}
+          %div{ "v-show" => "file.resolveMode === 'edit' ||  file.type === 'text-editor'" }
             = render partial: "projects/merge_requests/conflicts/components/diff_file_editor"
 
     = render partial: "projects/merge_requests/conflicts/submit_form"
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 5ab3cd96163..964dc40a213 100644
--- a/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
+++ b/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
@@ -1,9 +1,9 @@
-.content-block.oneline-block.files-changed{"v-if" => "!isLoading && !hasError"}
-  .inline-parallel-buttons{"v-if" => "showDiffViewTypeSwitcher"}
+.content-block.oneline-block.files-changed{ "v-if" => "!isLoading && !hasError" }
+  .inline-parallel-buttons{ "v-if" => "showDiffViewTypeSwitcher" }
     .btn-group
-      %button.btn{":class" => "{'active': !isParallel}", "@click" => "handleViewTypeChange('inline')"}
+      %button.btn{ ":class" => "{'active': !isParallel}", "@click" => "handleViewTypeChange('inline')" }
         Inline
-      %button.btn{":class" => "{'active': isParallel}", "@click" => "handleViewTypeChange('parallel')"}
+      %button.btn{ ":class" => "{'active': isParallel}", "@click" => "handleViewTypeChange('parallel')" }
         Side-by-side
 
   .js-toggle-container
diff --git a/app/views/projects/merge_requests/conflicts/_file_actions.html.haml b/app/views/projects/merge_requests/conflicts/_file_actions.html.haml
index 05af57acf03..2595ce74ac0 100644
--- a/app/views/projects/merge_requests/conflicts/_file_actions.html.haml
+++ b/app/views/projects/merge_requests/conflicts/_file_actions.html.haml
@@ -1,5 +1,5 @@
 .file-actions
-  .btn-group{"v-if" => "file.type === 'text'"}
+  .btn-group{ "v-if" => "file.type === 'text'" }
     %button.btn{ ":class" => "{ 'active': file.resolveMode == 'interactive' }",
       '@click' => "onClickResolveModeButton(file, 'interactive')",
       type: 'button' }
@@ -8,5 +8,5 @@
       '@click' => "onClickResolveModeButton(file, 'edit')",
       type: 'button' }
       Edit inline
-  %a.btn.view-file.btn-file-option{":href" => "file.blobPath"}
+  %a.btn.view-file.btn-file-option{ ":href" => "file.blobPath" }
     View file @{{conflictsData.shortCommitSha}}
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 6ffaa9ad4d2..62c9748c510 100644
--- a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
+++ b/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
@@ -10,7 +10,7 @@
     .col-sm-offset-2.col-sm-10
       .row
         .col-xs-6
-          %button{ type: "button", class: "btn btn-success js-submit-button", "@click" => "commit()", ":disabled" => "!readyToCommit" }
+          %button.btn.btn-success.js-submit-button{ type: "button", "@click" => "commit()", ":disabled" => "!readyToCommit" }
             %span {{commitButtonText}}
         .col-xs-6.text-right
           = link_to "Cancel", namespace_project_merge_request_path(@merge_request.project.namespace, @merge_request.project, @merge_request), class: "btn btn-cancel"
diff --git a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
index 3c927d362c2..aff3fb82fa6 100644
--- a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
+++ b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
@@ -1,4 +1,4 @@
-%diff-file-editor{"inline-template" => "true", ":file" => "file", ":on-cancel-discard-confirmation" => "cancelDiscardConfirmation", ":on-accept-discard-confirmation" => "acceptDiscardConfirmation"}
+%diff-file-editor{ "inline-template" => "true", ":file" => "file", ":on-cancel-discard-confirmation" => "cancelDiscardConfirmation", ":on-accept-discard-confirmation" => "acceptDiscardConfirmation" }
   .diff-editor-wrap{ "v-show" => "file.showEditor" }
     .discard-changes-alert-wrap{ "v-if" => "file.promptDiscardConfirmation" }
       .discard-changes-alert
diff --git a/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml b/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
index d35c7bee163..d828cb6cf9e 100644
--- a/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
+++ b/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
@@ -1,14 +1,14 @@
-%inline-conflict-lines{ "inline-template" => "true", ":file" => "file"}
+%inline-conflict-lines{ "inline-template" => "true", ":file" => "file" }
   %table
-    %tr.line_holder.diff-inline{"v-for" => "line in file.inlineLines"}
-      %td.diff-line-num.new_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
+    %tr.line_holder.diff-inline{ "v-for" => "line in file.inlineLines" }
+      %td.diff-line-num.new_line{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader" }
         %a {{line.new_line}}
-      %td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
+      %td.diff-line-num.old_line{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader" }
         %a {{line.old_line}}
-      %td.line_content{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader", "v-html" => "line.richText"}
-      %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-      %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-      %td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-        %strong{"v-html" => "line.richText"}
+      %td.line_content{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader", "v-html" => "line.richText" }
+      %td.diff-line-num.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
+      %td.diff-line-num.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
+      %td.line_content.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
+        %strong{ "v-html" => "line.richText" }
         %button.btn{ "@click" => "handleSelected(file, line.id, line.section)" }
           {{line.buttonTitle}}
diff --git a/app/views/projects/merge_requests/show/_builds.html.haml b/app/views/projects/merge_requests/show/_builds.html.haml
deleted file mode 100644
index 808ef7fed27..00000000000
--- a/app/views/projects/merge_requests/show/_builds.html.haml
+++ /dev/null
@@ -1 +0,0 @@
-= render "projects/commit/pipeline", pipeline: @pipeline, link_to_commit: true
diff --git a/app/views/projects/merge_requests/show/_commits.html.haml b/app/views/projects/merge_requests/show/_commits.html.haml
index a0e12fb3f38..11793919ff7 100644
--- a/app/views/projects/merge_requests/show/_commits.html.haml
+++ b/app/views/projects/merge_requests/show/_commits.html.haml
@@ -1,6 +1,8 @@
-.content-block.oneline-block
-  = icon("sort-amount-desc")
-  Most recent commits displayed first
-
-%ol#commits-list.list-unstyled
-  = render "projects/commits/commits", project: @merge_request.source_project, ref: @merge_request.source_branch
+- if @commits.empty?
+  .commits-empty
+    %h4
+      There are no commits yet.
+    = custom_icon ('illustration_no_commits')
+- else
+  %ol#commits-list.list-unstyled
+    = render "projects/commits/commits", project: @merge_request.source_project, ref: @merge_request.source_branch
diff --git a/app/views/projects/merge_requests/show/_diffs.html.haml b/app/views/projects/merge_requests/show/_diffs.html.haml
index 99c71e1454a..5f048d04b27 100644
--- a/app/views/projects/merge_requests/show/_diffs.html.haml
+++ b/app/views/projects/merge_requests/show/_diffs.html.haml
@@ -1,13 +1,5 @@
-- if @merge_request_diff.collected?
+- if @merge_request_diff.collected? || @merge_request_diff.overflow?
   = render 'projects/merge_requests/show/versions'
   = render "projects/diffs/diffs", diffs: @diffs
 - elsif @merge_request_diff.empty?
   .nothing-here-block Nothing to merge from #{@merge_request.source_branch} into #{@merge_request.target_branch}
-- else
-  .alert.alert-warning
-    %h4
-      Changes view for this comparison is extremely large.
-    %p
-      You can
-      = link_to "download it", merge_request_path(@merge_request, format: :diff), class: "vlink"
-      instead.
diff --git a/app/views/projects/merge_requests/show/_how_to_merge.html.haml b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
index f1d5441f9dd..93ed4b68e0e 100644
--- a/app/views/projects/merge_requests/show/_how_to_merge.html.haml
+++ b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
@@ -1,14 +1,14 @@
-%div#modal_merge_info.modal
+#modal_merge_info.modal
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3 Check out, review, and merge locally
       .modal-body
         %p
           %strong Step 1.
           Fetch and check out the branch for this merge request
-        = clipboard_button(clipboard_target: "pre#merge-info-1")
+        = clipboard_button(clipboard_target: "pre#merge-info-1", title: "Copy commands to clipboard")
         %pre.dark#merge-info-1
           - if @merge_request.for_fork?
             :preserve
@@ -25,7 +25,7 @@
         %p
           %strong Step 3.
           Merge the branch and fix any conflicts that come up
-        = clipboard_button(clipboard_target: "pre#merge-info-3")
+        = clipboard_button(clipboard_target: "pre#merge-info-3", title: "Copy commands to clipboard")
         %pre.dark#merge-info-3
           - if @merge_request.for_fork?
             :preserve
@@ -38,7 +38,7 @@
         %p
           %strong Step 4.
           Push the result of the merge to GitLab
-        = clipboard_button(clipboard_target: "pre#merge-info-4")
+        = clipboard_button(clipboard_target: "pre#merge-info-4", title: "Copy commands to clipboard")
         %pre.dark#merge-info-4
           :preserve
             git push origin #{h @merge_request.target_branch}
diff --git a/app/views/projects/merge_requests/show/_mr_box.html.haml b/app/views/projects/merge_requests/show/_mr_box.html.haml
index ed23d06ee5e..683cb8a5a27 100644
--- a/app/views/projects/merge_requests/show/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_box.html.haml
@@ -4,7 +4,7 @@
 
   %div
     - if @merge_request.description.present?
-      .description{class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''}
+      .description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' }
         .wiki
           = preserve do
             = markdown_field(@merge_request, :description)
diff --git a/app/views/projects/merge_requests/show/_versions.html.haml b/app/views/projects/merge_requests/show/_versions.html.haml
index 5cc92595fe0..b0f3c86fd21 100644
--- a/app/views/projects/merge_requests/show/_versions.html.haml
+++ b/app/views/projects/merge_requests/show/_versions.html.haml
@@ -1,6 +1,6 @@
 - if @merge_request_diffs.size > 1
   .mr-version-controls
-    %div.mr-version-menus-container.content-block
+    .mr-version-menus-container.content-block
       Changes between
       %span.dropdown.inline.mr-version-dropdown
         %a.dropdown-toggle.btn.btn-default{ data: {toggle: :dropdown} }
@@ -13,13 +13,13 @@
         .dropdown-menu.dropdown-select.dropdown-menu-selectable
           .dropdown-title
             %span Version:
-            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
               = icon('times', class: 'dropdown-menu-close-icon')
           .dropdown-content
             %ul
               - @merge_request_diffs.each do |merge_request_diff|
                 %li
-                  = link_to merge_request_version_path(@project, @merge_request, merge_request_diff), class: ('is-active' if merge_request_diff == @merge_request_diff) do
+                  = link_to merge_request_version_path(@project, @merge_request, merge_request_diff, @start_sha), class: ('is-active' if merge_request_diff == @merge_request_diff) do
                     %strong
                       - if merge_request_diff.latest?
                         latest version
@@ -43,7 +43,7 @@
           .dropdown-menu.dropdown-select.dropdown-menu-selectable
             .dropdown-title
               %span Compared with:
-              %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
                 = icon('times', class: 'dropdown-menu-close-icon')
             .dropdown-content
               %ul
diff --git a/app/views/projects/merge_requests/widget/_closed.html.haml b/app/views/projects/merge_requests/widget/_closed.html.haml
index f3cc0e7e8a1..15f47ecf210 100644
--- a/app/views/projects/merge_requests/widget/_closed.html.haml
+++ b/app/views/projects/merge_requests/widget/_closed.html.haml
@@ -6,7 +6,7 @@
       - if @merge_request.closed_event
         by #{link_to_member(@project, @merge_request.closed_event.author, avatar: true)}
         #{time_ago_with_tooltip(@merge_request.closed_event.created_at)}
-    %p 
+    %p
       = succeed '.' do
         The changes were not merged into
         %span.label-branch= @merge_request.target_branch
diff --git a/app/views/projects/merge_requests/widget/_heading.html.haml b/app/views/projects/merge_requests/widget/_heading.html.haml
index 9ab7971b56c..c80dc33058d 100644
--- a/app/views/projects/merge_requests/widget/_heading.html.haml
+++ b/app/views/projects/merge_requests/widget/_heading.html.haml
@@ -17,7 +17,7 @@
   - # TODO, remove in later versions when services like Jenkins will set CI status via Commit status API
   .mr-widget-heading
     - %w[success skipped canceled failed running pending].each do |status|
-      .ci_widget{class: "ci-#{status}", style: "display:none"}
+      .ci_widget{ class: "ci-#{status} ci-status-icon-#{status}", style: "display:none" }
         = ci_icon_for_status(status)
         %span
           CI build
@@ -32,11 +32,11 @@
       = icon("spinner spin")
       Checking CI status for #{@merge_request.diff_head_commit.short_id}&hellip;
 
-    .ci_widget.ci-not_found{style: "display:none"}
+    .ci_widget.ci-not_found{ style: "display:none" }
       = icon("times-circle")
       Could not find CI status for #{@merge_request.diff_head_commit.short_id}.
 
-    .ci_widget.ci-error{style: "display:none"}
+    .ci_widget.ci-error{ style: "display:none" }
       = icon("times-circle")
       Could not connect to the CI server. Please check your settings and try again.
 
diff --git a/app/views/projects/merge_requests/widget/_merged_buttons.haml b/app/views/projects/merge_requests/widget/_merged_buttons.haml
index d836a253507..9eef011b591 100644
--- a/app/views/projects/merge_requests/widget/_merged_buttons.haml
+++ b/app/views/projects/merge_requests/widget/_merged_buttons.haml
@@ -5,10 +5,10 @@
 - if can_remove_source_branch || mr_can_be_reverted || mr_can_be_cherry_picked
   .clearfix.merged-buttons
     - if can_remove_source_branch
-      = link_to namespace_project_branch_path(@merge_request.source_project.namespace, @merge_request.source_project, @merge_request.source_branch), remote: true, method: :delete, class: "btn btn-default btn-sm remove_source_branch" do
+      = link_to namespace_project_branch_path(@merge_request.source_project.namespace, @merge_request.source_project, @merge_request.source_branch), remote: true, method: :delete, class: "btn btn-default remove_source_branch" do
         = icon('trash-o')
         Remove Source Branch
     - if mr_can_be_reverted
-      = revert_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: 'sm')
+      = revert_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: "warning")
     - if mr_can_be_cherry_picked
-      = cherry_pick_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: 'sm')
+      = cherry_pick_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: "default")
diff --git a/app/views/projects/merge_requests/widget/_open.html.haml b/app/views/projects/merge_requests/widget/_open.html.haml
index eee711dc5af..c0d6ab669b8 100644
--- a/app/views/projects/merge_requests/widget/_open.html.haml
+++ b/app/views/projects/merge_requests/widget/_open.html.haml
@@ -30,11 +30,16 @@
     - elsif @merge_request.can_be_merged? || resolved_conflicts
       = render 'projects/merge_requests/widget/open/accept'
 
-  - if mr_closes_issues.present?
+  - if mr_closes_issues.present? || mr_issues_mentioned_but_not_closing.present?
     .mr-widget-footer
       %span
-        %i.fa.fa-check
-        Accepting this merge request will close #{"issue".pluralize(mr_closes_issues.size)}
-        = succeed '.' do
-          != markdown issues_sentence(mr_closes_issues), pipeline: :gfm, author: @merge_request.author
-        = mr_assign_issues_link
+        = icon('check')
+        - if mr_closes_issues.present?
+          Accepting this merge request will close #{"issue".pluralize(mr_closes_issues.size)}
+          = succeed '.' do
+            != markdown issues_sentence(mr_closes_issues), pipeline: :gfm, author: @merge_request.author
+          = mr_assign_issues_link
+        - if mr_issues_mentioned_but_not_closing.present?
+          #{"Issue".pluralize(mr_issues_mentioned_but_not_closing.size)}
+          != markdown issues_sentence(mr_issues_mentioned_but_not_closing), pipeline: :gfm, author: @merge_request.author
+          #{mr_issues_mentioned_but_not_closing.size > 1 ? 'are' : 'is'} mentioned but will not be closed.
diff --git a/app/views/projects/merge_requests/widget/_show.html.haml b/app/views/projects/merge_requests/widget/_show.html.haml
index a8918c85dde..38328501ffd 100644
--- a/app/views/projects/merge_requests/widget/_show.html.haml
+++ b/app/views/projects/merge_requests/widget/_show.html.haml
@@ -24,12 +24,10 @@
       preparing: "{{status}} build",
       normal: "Build {{status}}"
     },
-    builds_path: "#{builds_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
     pipelines_path: "#{pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}"
   };
 
   if (typeof merge_request_widget !== 'undefined') {
-    clearInterval(merge_request_widget.fetchBuildStatusInterval);
     merge_request_widget.cancelPolling();
     merge_request_widget.clearEventListeners();
   }
diff --git a/app/views/projects/merge_requests/widget/open/_accept.html.haml b/app/views/projects/merge_requests/widget/open/_accept.html.haml
index 435fe835fae..7809e9c8c72 100644
--- a/app/views/projects/merge_requests/widget/open/_accept.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_accept.html.haml
@@ -1,3 +1,6 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('merge_request_widget/ci_bundle.js')
+
 - status_class = @pipeline ? " ci-#{@pipeline.status}" : nil
 
 = form_for [:merge, @project.namespace.becomes(Namespace), @project, @merge_request], remote: true, method: :post, html: { class: 'accept-mr-form js-quick-submit js-requires-input' } do |f|
@@ -41,25 +44,9 @@
           Modify commit message
     .js-toggle-content.hide.prepend-top-default
       = render 'shared/commit_message_container', params: params,
+          message_with_description: @merge_request.merge_commit_message(include_description: true),
+          message_without_description: @merge_request.merge_commit_message,
           text: @merge_request.merge_commit_message,
           rows: 14, hint: true
 
     = hidden_field_tag :merge_when_build_succeeds, "", autocomplete: "off"
-
-  :javascript
-    $('.accept-mr-form').on('ajax:send', function() {
-      $(".accept-mr-form :input").disable();
-    });
-
-    $('.accept_merge_request').on('click', function() {
-      $('.js-merge-button').html("<i class='fa fa-spinner fa-spin'></i> Merge in progress");
-    });
-
-    $('.merge_when_build_succeeds').on('click', function() {
-      $("#merge_when_build_succeeds").val("1");
-    });
-
-    $('.js-merge-dropdown a').on('click', function(e) {
-      e.preventDefault();
-      $(this).closest("form").submit();
-    });
diff --git a/app/views/projects/merge_requests/widget/open/_archived.html.haml b/app/views/projects/merge_requests/widget/open/_archived.html.haml
index ab30fa6b243..0d61e56d8fb 100644
--- a/app/views/projects/merge_requests/widget/open/_archived.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_archived.html.haml
@@ -1,4 +1,4 @@
-%h4 
+%h4
   Project is archived
 %p
   This merge request cannot be merged because archived projects cannot be written to.
diff --git a/app/views/projects/merge_requests/widget/open/_check.html.haml b/app/views/projects/merge_requests/widget/open/_check.html.haml
index e16878ba513..50086767446 100644
--- a/app/views/projects/merge_requests/widget/open/_check.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_check.html.haml
@@ -1,9 +1,6 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('merge_request_widget/ci_bundle.js')
+
 %strong
   = icon("spinner spin")
   Checking ability to merge automatically&hellip;
-
-:javascript
-  $(function() {
-    merge_request_widget.getMergeStatus();
-  });
-
diff --git a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
index af3096f04d9..c98b2c42597 100644
--- a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
@@ -1,21 +1,23 @@
+- can_resolve = @merge_request.conflicts_can_be_resolved_by?(current_user)
+- can_resolve_in_ui = @merge_request.conflicts_can_be_resolved_in_ui?
+- can_merge = @merge_request.can_be_merged_via_command_line_by?(current_user)
+
 %h4.has-conflicts
   = icon("exclamation-triangle")
   This merge request contains merge conflicts
 
 %p
-  Please
-  - if @merge_request.conflicts_can_be_resolved_by?(current_user)
-    - if @merge_request.conflicts_can_be_resolved_in_ui?
-      = link_to "resolve these conflicts", conflicts_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
-    - else
-      %span.has-tooltip{title: "These conflicts cannot be resolved through GitLab"}
-        resolve these conflicts locally
-  - else
-    resolve these conflicts
-
+  To merge this request, resolve these conflicts
+  - if can_resolve && !can_resolve_in_ui
+    locally
   or
+  - unless can_merge
+    ask someone with write access to this repository to
+  merge it locally.
 
-  - if @merge_request.can_be_merged_via_command_line_by?(current_user)
-    #{link_to "merge this request manually", "#modal_merge_info", class: "how_to_merge_link vlink", "data-toggle" => "modal"}.
-  - else
-    ask someone with write access to this repository to merge this request manually.
+- if (can_resolve && can_resolve_in_ui) || can_merge
+  .btn-group
+    - if can_resolve && can_resolve_in_ui
+      = link_to "Resolve conflicts", conflicts_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: "btn"
+    - if can_merge
+      = link_to "Merge locally", "#modal_merge_info", class: "btn how_to_merge_link vlink", "data-toggle" => "modal"
diff --git a/app/views/projects/merge_requests/widget/open/_nothing.html.haml b/app/views/projects/merge_requests/widget/open/_nothing.html.haml
index 35626b624b7..7af8c01c134 100644
--- a/app/views/projects/merge_requests/widget/open/_nothing.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_nothing.html.haml
@@ -1,4 +1,4 @@
-%h4 
+%h4
   = icon("exclamation-triangle")
   Nothing to merge from
   %span.label-branch= source_branch_with_namespace(@merge_request)
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index 513710e8e66..0f4a8508751 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -20,6 +20,6 @@
     - if @milestone.new_record?
       = f.submit 'Create milestone', class: "btn-create btn"
       = link_to "Cancel", namespace_project_milestones_path(@project.namespace, @project), class: "btn btn-cancel"
-    -else
+    - else
       = f.submit 'Save changes', class: "btn-save btn"
       = link_to "Cancel", namespace_project_milestone_path(@project.namespace, @project, @milestone), class: "btn btn-cancel"
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 0788924d44a..064e92b15eb 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -69,10 +69,15 @@
                     = 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_url, class: 'btn import_gitea' do
+                      = custom_icon('go_logo')
+                      Gitea
+                %div
                   - if git_import_enabled?
                     = link_to "#", class: 'btn js-toggle-button import_git' do
                       = icon('git', text: 'Repo by URL')
-                %div{ class: 'import_gitlab_project' }
+                .import_gitlab_project
                   - if gitlab_project_import_enabled?
                     = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
                       = icon('gitlab', text: 'GitLab export')
diff --git a/app/views/projects/notes/_edit_form.html.haml b/app/views/projects/notes/_edit_form.html.haml
index 8620f492282..e8e450742b5 100644
--- a/app/views/projects/notes/_edit_form.html.haml
+++ b/app/views/projects/notes/_edit_form.html.haml
@@ -1,11 +1,14 @@
 .note-edit-form
-  = form_for note, url: namespace_project_note_path(@project.namespace, @project, note), method: :put, remote: true, authenticity_token: true, html: { class: 'edit-note common-note-form js-quick-submit' } do |f|
-    = note_target_fields(note)
-    = render layout: 'projects/md_preview', locals: { preview_class: 'md-preview' } do
-      = render 'projects/zen', f: f, attr: :note, classes: 'note-textarea js-note-text js-task-list-field', placeholder: "Write a comment or drag your files here..."
+  = form_tag '#', method: :put, class: 'edit-note common-note-form js-quick-submit' do
+    = hidden_field_tag :target_id, '', class: 'js-form-target-id'
+    = hidden_field_tag :target_type, '', class: 'js-form-target-type'
+    = render layout: 'projects/md_preview', locals: { preview_class: 'md-preview', referenced_users: true } do
+      = render 'projects/zen', attr: 'note[note]', classes: 'note-textarea js-note-text js-task-list-field', placeholder: "Write a comment or drag your files here..."
       = render 'projects/notes/hints'
 
     .note-form-actions.clearfix
-      = f.submit 'Save Comment', class: 'btn btn-nr btn-save js-comment-button'
+      .settings-message.note-edit-warning.js-edit-warning
+        Finish editing this message first!
+      = submit_tag 'Save Comment', class: 'btn btn-nr btn-save js-comment-button'
       %button.btn.btn-nr.btn-cancel.note-edit-cancel{ type: 'button' }
         Cancel
diff --git a/app/views/projects/notes/_form.html.haml b/app/views/projects/notes/_form.html.haml
index 46b402545cd..b561052e721 100644
--- a/app/views/projects/notes/_form.html.haml
+++ b/app/views/projects/notes/_form.html.haml
@@ -3,6 +3,7 @@
 = form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form", "data-noteable-iid" => @note.noteable.try(:iid), }, authenticity_token: true do |f|
   = hidden_field_tag :view, diff_view
   = hidden_field_tag :line_type
+  = hidden_field_tag :merge_request_diff_head_sha, @note.noteable.try(:diff_head_sha)
   = note_target_fields(@note)
   = f.hidden_field :commit_id
   = f.hidden_field :line_code
@@ -23,5 +24,5 @@
   .note-form-actions.clearfix
     = f.submit 'Comment', class: "btn btn-nr btn-create append-right-10 comment-btn js-comment-button"
     = 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: "Cancel" } }
       Discard draft
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index 778a32e6345..36c388c3318 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -5,17 +5,17 @@
 %li.timeline-entry{ id: dom_id(note), class: ["note", "note-row-#{note.id}", ('system-note' if note.system)], data: {author_id: note.author.id, editable: note_editable} }
   .timeline-entry-inner
     .timeline-icon
-      %a{href: user_path(note.author)}
+      %a{ href: user_path(note.author) }
         = image_tag avatar_icon(note.author), alt: '', class: 'avatar s40'
     .timeline-content
       .note-header
         = link_to_member(note.project, note.author, avatar: false)
-        .inline.note-headline-light
+        .note-headline-light
           = note.author.to_reference
           - unless note.system
             commented
           - if note.system
-            %span{class: 'system-note-message'}
+            %span.system-note-message
               = note.redacted_note_html
           %a{ href: "##{dom_id(note)}" }
             = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
@@ -61,13 +61,15 @@
                   = icon('pencil', class: 'link-highlight')
                 = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button hidden-xs js-note-delete danger' do
                   = icon('trash-o', class: 'danger-highlight')
-      .note-body{class: note_editable ? 'js-task-list-container' : ''}
+      .note-body{ class: note_editable ? 'js-task-list-container' : '' }
         .note-text.md
           = preserve do
             = note.redacted_note_html
         = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
         - if note_editable
-          = render 'projects/notes/edit_form', note: note
+          .original-note-content.hidden{ data: { post_url: namespace_project_note_path(@project.namespace, @project, note), target_id: note.noteable.id, target_type: note.noteable.class.name.underscore } }
+            #{note.note}
+          %textarea.hidden.js-task-list-field.original-task-list #{note.note}
         .note-awards
           = render 'award_emoji/awards_block', awardable: note, inline: false
         - if note.system
diff --git a/app/views/projects/notes/_notes_with_form.html.haml b/app/views/projects/notes/_notes_with_form.html.haml
index 00b62a595ff..fbd2bff5bbb 100644
--- a/app/views/projects/notes/_notes_with_form.html.haml
+++ b/app/views/projects/notes/_notes_with_form.html.haml
@@ -1,5 +1,8 @@
 %ul#notes-list.notes.main-notes-list.timeline
   = render "projects/notes/notes"
+
+= render 'projects/notes/edit_form'
+
 %ul.notes.notes-form.timeline
   %li.timeline-entry
     .flash-container.timeline-content
@@ -20,4 +23,4 @@
           to post a comment
 
 :javascript
-  var notes = new Notes("#{namespace_project_notes_path(namespace_id: @project.namespace, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{diff_view}")
+  var notes = new Notes("#{namespace_project_notes_path(namespace_id: @project.namespace, project_id: @project, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{diff_view}")
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index 229bdfb0e8d..ca76f13ef5e 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -1,6 +1,6 @@
 .page-content-header
   .header-main-content
-    = ci_status_with_icon(@pipeline.detailed_status)
+    = render 'ci/status/badge', status: @pipeline.detailed_status(current_user)
     %strong Pipeline ##{@commit.pipelines.last.id}
     triggered #{time_ago_with_tooltip(@commit.authored_date)} by
     = author_avatar(@commit, size: 24)
@@ -23,7 +23,7 @@
 .info-well
   - if @commit.status
     .well-segment.pipeline-info
-      %div{class: "icon-container ci-status-icon-#{@commit.status}"}
+      %div{ class: "icon-container ci-status-icon-#{@commit.status}" }
         = ci_icon_for_status(@commit.status)
       = pluralize @pipeline.statuses.count(:id), "build"
       - if @pipeline.ref
diff --git a/app/views/projects/pipelines/_stage.html.haml b/app/views/projects/pipelines/_stage.html.haml
new file mode 100644
index 00000000000..a0b14a7274a
--- /dev/null
+++ b/app/views/projects/pipelines/_stage.html.haml
@@ -0,0 +1,3 @@
+- @stage.statuses.latest.each do |status|
+  %li
+    = render 'ci/status/dropdown_graph_badge', subject: status
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index e1e787dbde4..df36279ed75 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -5,23 +5,23 @@
 %div{ class: container_class }
   .top-area
     %ul.nav-links
-      %li{class: ('active' if @scope.nil?)}
+      %li{ class: ('active' if @scope.nil?) }>
         = link_to project_pipelines_path(@project) do
           All
           %span.badge.js-totalbuilds-count
             = number_with_delimiter(@pipelines_count)
 
-      %li{class: ('active' if @scope == 'running')}
+      %li{ class: ('active' if @scope == 'running') }>
         = link_to project_pipelines_path(@project, scope: :running) do
           Running
           %span.badge.js-running-count
             = number_with_delimiter(@running_or_pending_count)
 
-      %li{class: ('active' if @scope == 'branches')}
+      %li{ class: ('active' if @scope == 'branches') }>
         = link_to project_pipelines_path(@project, scope: :branches) do
           Branches
 
-      %li{class: ('active' if @scope == 'tags')}
+      %li{ class: ('active' if @scope == 'tags') }>
         = link_to project_pipelines_path(@project, scope: :tags) do
           Tags
 
@@ -35,21 +35,33 @@
 
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
-
-  %div.content-list.pipelines
+  .content-list.pipelines{ data: { url: namespace_project_pipelines_path(@project.namespace, @project, format: :json) } }
     - if @pipelines.blank?
       %div
         .nothing-here-block No pipelines to show
     - else
-      .table-holder
-        %table.table.ci-table
-          %thead
-            %th Status
-            %th Pipeline
-            %th Commit
-            %th Stages
-            %th
-            %th.hidden-xs
-          = render @pipelines, commit_sha: true, stage: true, allow_retry: true
-
-      = paginate @pipelines, theme: 'gitlab'
+      .pipeline-svgs{ "data" => {"commit_icon_svg" => custom_icon("icon_commit"),
+        "icon_status_canceled" => custom_icon("icon_status_canceled"),
+        "icon_status_running" => custom_icon("icon_status_running"),
+        "icon_status_skipped" => custom_icon("icon_status_skipped"),
+        "icon_status_created" => custom_icon("icon_status_created"),
+        "icon_status_pending" => custom_icon("icon_status_pending"),
+        "icon_status_success" => custom_icon("icon_status_success"),
+        "icon_status_failed" => custom_icon("icon_status_failed"),
+        "icon_status_warning" => custom_icon("icon_status_warning"),
+        "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"),
+        "stage_icon_status_running" => custom_icon("icon_status_running_borderless"),
+        "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"),
+        "stage_icon_status_created" => custom_icon("icon_status_created_borderless"),
+        "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"),
+        "stage_icon_status_success" => custom_icon("icon_status_success_borderless"),
+        "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"),
+        "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"),
+        "icon_play" => custom_icon("icon_play"),
+        "icon_timer" => custom_icon("icon_timer"),
+        "icon_status_manual" => custom_icon("icon_status_manual"),
+      } }
+
+      .vue-pipelines-index
+
+= page_specific_javascript_tag('vue_pipelines_index/index.js')
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 29a41bc664b..49c1d886423 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -2,7 +2,7 @@
 - page_title "Pipeline"
 = render "projects/pipelines/head"
 
-%div.js-pipeline-container{ class: container_class, data: { controller_action: "#{controller.action_name}" } }
+.js-pipeline-container{ class: container_class, data: { controller_action: "#{controller.action_name}" } }
   - if @commit
     = render "projects/pipelines/info"
 
diff --git a/app/views/projects/project_members/_index.html.haml b/app/views/projects/project_members/_index.html.haml
new file mode 100644
index 00000000000..ab0771b5751
--- /dev/null
+++ b/app/views/projects/project_members/_index.html.haml
@@ -0,0 +1,22 @@
+.row.prepend-top-default
+  .col-lg-3.settings-sidebar
+    %h4.prepend-top-0
+      Members
+    - if can?(current_user, :admin_project_member, @project)
+      %p
+        Add a new member to
+        %strong= @project.name
+  .col-lg-9
+    .light.prepend-top-default
+      - if can?(current_user, :admin_project_member, @project)
+        = render "projects/project_members/new_project_member"
+
+        = render 'shared/members/requests', membership_source: @project, requesters: @requesters
+        .append-bottom-default.clearfix
+          %h5.member.existing-title
+            Existing members and groups
+        - if @group_links.any?
+          = render 'projects/project_members/groups', group_links: @group_links
+
+    = render 'projects/project_members/team', members: @project_members
+    = paginate @project_members, theme: "gitlab"
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 79dcd7a6ee9..2b1c23f7dda 100644
--- a/app/views/projects/project_members/_new_project_member.html.haml
+++ b/app/views/projects/project_members/_new_project_member.html.haml
@@ -1,22 +1,18 @@
 = form_for @project_member, as: :project_member, url: namespace_project_project_members_path(@project.namespace, @project), html: { class: 'users-project-form' } do |f|
-  .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
-        Search for users 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(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select"
-      .help-block.append-bottom-10
-        = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
-        about role permissions
-
-    .col-md-3.col-lg-2
-      .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
-        On this date, the user(s) will automatically lose access to this project.
-
-    .col-md-2
-      = f.submit "Add to project", class: "btn btn-create btn-block"
+  .form-group
+    = users_select_tag(:user_ids, multiple: true, class: "input-clamp", scope: :all, email_user: true, placeholder: "Search for members to update or invite")
+    .help-block.append-bottom-10
+      Search for members by name, username, or email, or invite new ones using their email address.
+  .form-group
+    = select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select"
+    .help-block.append-bottom-10
+      = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
+      about role permissions
+  .form-group
+    .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
+      On this date, the member(s) will automatically lose access to this project.
+  = f.submit "Add to project", class: "btn btn-create"
+  = link_to "Import", import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-default", title: "Import members from another project"
diff --git a/app/views/projects/project_members/_team.html.haml b/app/views/projects/project_members/_team.html.haml
index c1e894d8f40..5292e73be7a 100644
--- a/app/views/projects/project_members/_team.html.haml
+++ b/app/views/projects/project_members/_team.html.haml
@@ -1,7 +1,13 @@
 .panel.panel-default
   .panel-heading
-    Users with access to
+    Members with access to
     %strong #{@project.name}
     %span.badge= @project_members.total_count
+    = form_tag namespace_project_settings_members_path(@project.namespace, @project), 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'
   %ul.content-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 eef97107d77..42ce4f8001b 100644
--- a/app/views/projects/project_members/import.html.haml
+++ b/app/views/projects/project_members/import.html.haml
@@ -12,5 +12,4 @@
 
   .form-actions
     = button_tag 'Import project members', class: "btn btn-create"
-    = link_to "Cancel", namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-cancel"
-
+    = link_to "Cancel", namespace_project_settings_members_path(@project.namespace, @project), class: "btn btn-cancel"
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
deleted file mode 100644
index bdeb704b6da..00000000000
--- a/app/views/projects/project_members/index.html.haml
+++ /dev/null
@@ -1,28 +0,0 @@
-- page_title "Members"
-
-.project-members-page.prepend-top-default
-  %h4.project-members-title.clearfix
-    Members
-    = link_to "Import", import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-default pull-right hidden-xs", title: "Import members from another project"
-  - if can?(current_user, :admin_project_member, @project)
-    .project-members-new.append-bottom-default
-      %p.clearfix
-        Add new user to
-        %strong= @project.name
-      = render "new_project_member"
-
-      = render 'shared/members/requests', membership_source: @project, requesters: @requesters
-
-  .append-bottom-default.clearfix
-    %h5.member.existing-title
-      Existing users and groups
-    = form_tag namespace_project_project_members_path(@project.namespace, @project), 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")
-  - if @group_links.any?
-    = render 'groups', group_links: @group_links
-
-  = render 'team', members: @project_members
-  = paginate @project_members, theme: "gitlab"
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index 6e58e5a0c78..7036b8a5ccc 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -1,4 +1,4 @@
-%li.runner{id: dom_id(runner)}
+%li.runner{ id: dom_id(runner) }
   %h4
     = runner_status_icon(runner)
     %span.monospace
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index db51c4f8a4e..fc338dcf887 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -8,7 +8,6 @@
   .col-lg-9
     = form_for(@service, as: :service, url: namespace_project_service_path(@project.namespace, @project, @service.to_param), method: :put, html: { class: 'form-horizontal' }) do |form|
       = render 'shared/service_settings', form: form, subject: @service
-
       .footer-block.row-content-block
         = form.submit 'Save changes', class: 'btn btn-save'
         &nbsp;
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
new file mode 100644
index 00000000000..8ca4c51a064
--- /dev/null
+++ b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
@@ -0,0 +1,91 @@
+- run_actions_text = "Perform common operations on this project: #{@project.name_with_namespace}"
+
+To setup this service:
+%ul.list-unstyled
+  %li
+    1.
+    = link_to 'Enable custom slash commands', 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands'
+    on your Mattermost installation
+  %li
+    2.
+    = link_to 'Add a slash command', 'https://docs.mattermost.com/developer/slash-commands.html#set-up-a-custom-command'
+    in Mattermost with these options:
+
+%hr
+
+.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.name_with_namespace}", class: 'form-control input-sm', readonly: 'readonly'
+      .input-group-btn
+        = clipboard_button(clipboard_target: '#display_name')
+
+  .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(clipboard_target: '#description')
+
+  .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
+      %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.path_with_namespace
+
+  .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(clipboard_target: '#request_url')
+
+  .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
+
+  .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(clipboard_target: '#response_username')
+
+  .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(clipboard_target: '#response_icon')
+
+  .form-group
+    = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-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(clipboard_target: '#autocomplete_hint')
+
+  .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(clipboard_target: '#autocomplete_description')
+
+%hr
+
+%ul.list-unstyled
+  %li
+    3. After adding the slash command, paste the
+
+    %strong token
+    into the field below
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 a676c0290a0..63b797cd391 100644
--- a/app/views/projects/services/mattermost_slash_commands/_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
@@ -1,5 +1,4 @@
-- pretty_path_with_namespace = "#{@project ? @project.namespace.name : 'namespace'} / #{@project ? @project.name : 'name'}"
-- run_actions_text = "Perform common operations on this project: #{pretty_path_with_namespace}"
+- enabled = Gitlab.config.mattermost.enabled
 
 .well
   This service allows GitLab users to perform common operations on this
@@ -8,93 +7,9 @@
   See list of available commands in Mattermost after setting up this service,
   by entering
   %code /&lt;command_trigger_word&gt; help
-  %br
-  %br
-  To setup this service:
-  %ul.list-unstyled
-    %li
-      1.
-      = link_to 'Enable custom slash commands', 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands'
-      on your Mattermost installation
-    %li
-      2.
-      = link_to 'Add a slash command', 'https://docs.mattermost.com/developer/slash-commands.html#set-up-a-custom-command'
-      in Mattermost with these options:
-
-  %hr
-
-  .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 / #{pretty_path_with_namespace}", class: 'form-control input-sm', readonly: 'readonly'
-        .input-group-btn
-          = clipboard_button(clipboard_target: '#display_name')
-
-    .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(clipboard_target: '#description')
-
-    .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
-        %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.path_with_namespace
-
-    .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(clipboard_target: '#request_url')
-
-    .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
-
-    .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(clipboard_target: '#response_username')
-
-    .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(clipboard_target: '#response_icon')
-
-    .form-group
-      = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label'
-      .col-sm-10.col-xs-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(clipboard_target: '#autocomplete_hint')
-
-    .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(clipboard_target: '#autocomplete_description')
 
-  %hr
+  - unless enabled
+    = render 'projects/services/mattermost_slash_commands/detailed_help', subject: @service
 
-  %ul.list-unstyled
-    %li
-      3. After adding the slash command, paste the
-      %strong token
-      into the field below
+- if enabled
+  = 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
new file mode 100644
index 00000000000..c929eee3bb9
--- /dev/null
+++ b/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml
@@ -0,0 +1,7 @@
+.services-installation-info
+  - unless @service.activated?
+    .row
+      .col-sm-9.col-sm-offset-3
+        = link_to new_namespace_project_mattermost_path(@project.namespace, @project), class: 'btn btn-lg' do
+          = custom_icon('mattermost_logo', size: 15)
+          = 'Add to Mattermost'
diff --git a/app/views/projects/services/slack_slash_commands/_help.html.haml b/app/views/projects/services/slack_slash_commands/_help.html.haml
new file mode 100644
index 00000000000..6d7c2defe2b
--- /dev/null
+++ b/app/views/projects/services/slack_slash_commands/_help.html.haml
@@ -0,0 +1,93 @@
+- run_actions_text = "Perform common operations on this project: #{@project.name_with_namespace}"
+
+.well
+  This service allows GitLab users to perform common operations on this
+  project by entering slash commands in Slack.
+  %br
+  See list of available commands in Slack after setting up this service,
+  by entering
+  %code /&lt;command&gt; help
+  %br
+  %br
+  To setup this service:
+  %ul.list-unstyled
+    %li
+      1.
+      = link_to 'Add a slash command', 'https://my.slack.com/services/new/slash-commands'
+      in your Slack team with these options:
+
+  %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.path_with_namespace
+
+    .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(clipboard_target: '#url')
+
+    .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 :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(clipboard_target: '#customize_name')
+
+    .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')
+
+    .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 :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(clipboard_target: '#autocomplete_description')
+
+    .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(clipboard_target: '#autocomplete_usage_hint')
+
+    .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(clipboard_target: '#descriptive_label')
+
+  %hr
+
+  %ul.list-unstyled
+    %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/members/show.html.haml b/app/views/projects/settings/members/show.html.haml
new file mode 100644
index 00000000000..d81ed7bb609
--- /dev/null
+++ b/app/views/projects/settings/members/show.html.haml
@@ -0,0 +1,6 @@
+- page_title "Members"
+
+= render "projects/project_members/index"
+- if can?(current_user, :admin_project, @project)
+  - if @project.allowed_to_share_with_group?
+    = render "projects/group_links/index"
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index c50093cf47c..80d4081dd7b 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -17,10 +17,10 @@
     %ul.nav
       %li
         = link_to project_files_path(@project) do
-          Files (#{repository_size})
+          Files (#{storage_counter(@project.statistics.total_repository_size)})
       %li
         = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
-          #{'Commit'.pluralize(@project.commit_count)} (#{number_with_delimiter(@project.commit_count)})
+          #{'Commit'.pluralize(@project.statistics.commit_count)} (#{number_with_delimiter(@project.statistics.commit_count)})
       %li
         = link_to namespace_project_branches_path(@project.namespace, @project) do
           #{'Branch'.pluralize(@repository.branch_count)} (#{number_with_delimiter(@repository.branch_count)})
@@ -64,20 +64,15 @@
         - unless @repository.gitlab_ci_yml
           %li.missing
             = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
-              Set Up CI
-
-      %li.project-repo-buttons.right
-        .project-right-buttons
-          - if current_user
-            = render 'shared/members/access_request_buttons', source: @project
-            = render "projects/buttons/koding"
-
-          .btn-group.project-repo-btn-group
-            = render 'projects/buttons/download', project: @project, ref: @ref
-            = render 'projects/buttons/dropdown'
+              Set up CI
+        - if koding_enabled? && @repository.koding_yml.blank?
+          %li.missing
+            = link_to 'Set up Koding', add_koding_stack_path(@project)
+        - if @repository.gitlab_ci_yml.blank? && @project.deployment_service.present?
+          %li.missing
+            = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml', commit_message: 'Set up auto deploy', target_branch: 'auto-deploy', context: 'autodeploy') do
+              Set up auto deploy
 
-          .pull-right
-            = render 'shared/notifications/button', notification_setting: @notification_setting
   - if @repository.commit
     .project-last-commit{ class: container_class }
       = render 'projects/last_commit', commit: @repository.commit, ref: current_ref, project: @project
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 9503dbded13..485b23815bc 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -8,10 +8,11 @@
       = blob_icon 0, @snippet.file_name
       = @snippet.file_name
       .file-actions
-        = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
+        = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']", class: "btn btn-sm")
         = link_to 'Raw', raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank"
     = render 'shared/snippets/blob'
 
-  = render 'award_emoji/awards_block', awardable: @snippet, inline: true
+  .row-content-block.top-block.content-component-block
+    = render 'award_emoji/awards_block', awardable: @snippet, inline: true
 
-  %div#notes= render "projects/notes/notes_with_form"
+  #notes= render "projects/notes/notes_with_form"
diff --git a/app/views/projects/stage/_graph.html.haml b/app/views/projects/stage/_graph.html.haml
index 1d8fa10db0c..4ee30b023ac 100644
--- a/app/views/projects/stage/_graph.html.haml
+++ b/app/views/projects/stage/_graph.html.haml
@@ -1,6 +1,6 @@
 - stage = local_assigns.fetch(:stage)
 - statuses = stage.statuses.latest
-- status_groups = statuses.sort_by(&:name).group_by(&:group_name)
+- status_groups = statuses.sort_by(&:sortable_name).group_by(&:group_name)
 %li.stage-column
   .stage-name
     %a{ name: stage.name }
@@ -10,13 +10,10 @@
       - status_groups.each do |group_name, grouped_statuses|
         - if grouped_statuses.one?
           - status = grouped_statuses.first
-          - is_playable = status.playable? && can?(current_user, :update_build, @project)
-          %li.build{ class: ("playable" if is_playable) }
+          %li.build{ 'id' => "ci-badge-#{group_name}" }
             .curve
-            .build-content
-              = render "projects/#{status.to_partial_path}_pipeline", subject: status
+            = render 'ci/status/graph_badge', subject: status
         - else
-          %li.build
+          %li.build{ 'id' => "ci-badge-#{group_name}" }
             .curve
-            .dropdown.inline.build-content
-              = render "projects/stage/in_stage_group", name: group_name, subject: grouped_statuses
+            = render 'projects/stage/in_stage_group', name: group_name, subject: grouped_statuses
diff --git a/app/views/projects/stage/_in_stage_group.html.haml b/app/views/projects/stage/_in_stage_group.html.haml
index 2b26ad9d6fa..9c5eb501174 100644
--- a/app/views/projects/stage/_in_stage_group.html.haml
+++ b/app/views/projects/stage/_in_stage_group.html.haml
@@ -1,13 +1,14 @@
 - group_status = CommitStatus.where(id: subject).status
-%button.dropdown-menu-toggle.has-tooltip{ type: 'button', data: { toggle: 'dropdown', title: "#{name} - #{group_status}" } }
-  %span{class: "ci-status-icon ci-status-icon-#{group_status}"}
+%button.dropdown-menu-toggle.build-content.has-tooltip{ type: 'button', data: { toggle: 'dropdown',  title: "#{name} - #{group_status}" } }
+  %span{ class: "ci-status-icon ci-status-icon-#{group_status}" }
     = ci_icon_for_status(group_status)
   %span.ci-status-text
     = name
-  %span.badge= subject.size
-.dropdown-menu.grouped-pipeline-dropdown
+  %span.dropdown-counter-badge= subject.size
+
+%ul.dropdown-menu.big-pipeline-graph-dropdown-menu.js-grouped-pipeline-dropdown
   .arrow
-  %ul
+  .scrollable-menu
     - subject.each do |status|
       %li
-        = render "projects/#{status.to_partial_path}_pipeline", subject: status
+        = render 'ci/status/dropdown_graph_badge', subject: status
diff --git a/app/views/projects/stage/_stage.html.haml b/app/views/projects/stage/_stage.html.haml
index 1684e02fbad..28e1c060875 100644
--- a/app/views/projects/stage/_stage.html.haml
+++ b/app/views/projects/stage/_stage.html.haml
@@ -1,13 +1,13 @@
 %tr
-  %th{colspan: 10}
+  %th{ colspan: 10 }
     %strong
       %a{ name: stage.name }
-      %span{class: "ci-status-link ci-status-icon-#{stage.status}"}
+      %span{ class: "ci-status-link ci-status-icon-#{stage.status}" }
         = ci_icon_for_status(stage.status)
       &nbsp;
       = stage.name.titleize
 = render stage.statuses.latest_ordered, coverage: @project.build_coverage_enabled?, stage: false, ref: false, pipeline_link: false, allow_retry: true
 = render stage.statuses.retried_ordered, coverage: @project.build_coverage_enabled?, stage: false, ref: false, pipeline_link: false, retried: true
 %tr
-  %td{colspan: 10}
+  %td{ colspan: 10 }
     &nbsp;
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index c42641afea0..8ef069b9e05 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -1,7 +1,7 @@
 - commit = @repository.commit(tag.dereferenced_target)
 - release = @releases.find { |release| release.tag == tag.name }
-%li
-  %div
+%li.flex-row
+  .row-main-content.str-truncated
     = link_to namespace_project_tag_path(@project.namespace, @project, tag.name) do
       %span.item-title
         = icon('tag')
@@ -10,24 +10,25 @@
       &nbsp;
       = strip_gpg_signature(tag.message)
 
-    .controls
-      = render 'projects/buttons/download', project: @project, ref: tag.name
+    - if commit
+      .block-truncated
+        = render 'projects/branches/commit', commit: commit, project: @project
+    - else
+      %p
+        Cant find HEAD commit for this tag
+    - if release && release.description.present?
+      .description.prepend-top-default
+        .wiki
+          = preserve do
+            = markdown_field(release, :description)
 
-      - if can?(current_user, :push_code, @project)
-        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, tag.name), class: 'btn has-tooltip', title: "Edit release notes", data: { container: "body" } do
-          = icon("pencil")
+  .row-fixed-content.controls
+    = render 'projects/buttons/download', project: @project, ref: tag.name
 
-      - if can?(current_user, :admin_project, @project)
-        = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{tag.name}' tag cannot be undone. Are you sure?", container: 'body' }, remote: true do
-          = icon("trash-o")
+    - if can?(current_user, :push_code, @project)
+      = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, tag.name), class: 'btn has-tooltip', title: "Edit release notes", data: { container: "body" } do
+        = icon("pencil")
 
-  - if commit
-    = render 'projects/branches/commit', commit: commit, project: @project
-  - else
-    %p
-      Cant find HEAD commit for this tag
-  - if release && release.description.present?
-    .description.prepend-top-default
-      .wiki
-        = preserve do
-          = markdown_field(release, :description)
+    - if can?(current_user, :admin_project, @project)
+      = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{tag.name}' tag cannot be undone. Are you sure?", 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 1d39f3a7534..e2f132f7742 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -2,16 +2,16 @@
 - page_title "Tags"
 = render "projects/commits/head"
 
-%div{ class: container_class }
-  .top-area
-    .nav-text
+.flex-list{ class: container_class }
+  .top-area.flex-row
+    .nav-text.row-main-content
       Tags give the ability to mark specific points in history as being important
 
-    .nav-controls
+    .nav-controls.row-fixed-content
       = form_tag(filter_tags_path, method: :get) do
         = search_field_tag :search, params[:search], { placeholder: 'Filter by tag name', id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
-      .dropdown.inline
+      .dropdown
         %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown'} }
           %span.light
             = projects_sort_options_hash[@sort]
@@ -30,7 +30,7 @@
 
   .tags
     - if @tags.any?
-      %ul.content-list
+      %ul.flex-list.content-list
         = render partial: 'tag', collection: @tags
 
       = paginate @tags, theme: 'gitlab'
diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml
index c06a413eb2f..160d4c7a223 100644
--- a/app/views/projects/tags/new.html.haml
+++ b/app/views/projects/tags/new.html.haml
@@ -2,7 +2,7 @@
 
 - if @error
   .alert.alert-danger
-    %button{ type: "button", class: "close", "data-dismiss" => "alert"} &times;
+    %button.close{ type: "button", "data-dismiss" => "alert" } &times;
     = @error
 
 %h3.page-title
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index 12facb6eb73..fad3c5c2173 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -12,21 +12,23 @@
       - else
         Cant find HEAD commit for this tag
 
-    .nav-controls
+    .nav-controls.controls-flex
       - if can?(current_user, :push_code, @project)
-        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, @tag.name), class: 'btn has-tooltip', title: 'Edit release notes' do
+        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, @tag.name), class: 'btn controls-item has-tooltip', title: 'Edit release notes' do
           = icon("pencil")
-      = link_to namespace_project_tree_path(@project.namespace, @project, @tag.name), class: 'btn has-tooltip', title: 'Browse files' do
+      = link_to namespace_project_tree_path(@project.namespace, @project, @tag.name), class: 'btn controls-item has-tooltip', title: 'Browse files' do
         = icon('files-o')
-      = link_to namespace_project_commits_path(@project.namespace, @project, @tag.name), class: 'btn has-tooltip', title: 'Browse commits' do
+      = link_to namespace_project_commits_path(@project.namespace, @project, @tag.name), class: 'btn controls-item has-tooltip', title: 'Browse commits' do
         = icon('history')
-      = render 'projects/buttons/download', project: @project, ref: @tag.name
+      .btn-container.controls-item
+        = render 'projects/buttons/download', project: @project, ref: @tag.name
       - if can?(current_user, :admin_project, @project)
-        .pull-right
+        .btn-container.controls-item-full
           = link_to namespace_project_tag_path(@project.namespace, @project, @tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{@tag.name}' tag cannot be undone. Are you sure?" } do
             %i.fa.fa-trash-o
+
     - if @tag.message.present?
-      %pre.body
+      %pre.wrap
         = strip_gpg_signature(@tag.message)
 
   .append-bottom-default.prepend-top-default
diff --git a/app/views/projects/tree/_blob_item.html.haml b/app/views/projects/tree/_blob_item.html.haml
index ee417b58cbf..425b460eb09 100644
--- a/app/views/projects/tree/_blob_item.html.haml
+++ b/app/views/projects/tree/_blob_item.html.haml
@@ -6,4 +6,4 @@
       %span.str-truncated= file_name
   %td.hidden-xs.tree-commit
   %td.tree-time-ago.cgray.text-right
-    = render 'projects/tree/spinner'
\ No newline at end of file
+    = 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 2b5f671c09e..04d52361db0 100644
--- a/app/views/projects/tree/_submodule_item.html.haml
+++ b/app/views/projects/tree/_submodule_item.html.haml
@@ -1,4 +1,4 @@
-%tr{ class: "tree-item" }
+%tr.tree-item
   %td.tree-item-file-name
     %i.fa.fa-archive.fa-fw
     = submodule_link(submodule_item, @ref)
diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
index d37c376c36b..2c08221565b 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -1,14 +1,14 @@
-%div.tree-content-holder
+.tree-content-holder
   .table-holder
-    %table.table#tree-slider{class: "table_#{@hex_path} tree-table" }
+    %table.table#tree-slider{ class: "table_#{@hex_path} tree-table" }
       %thead
         %tr
           %th Name
           %th.hidden-xs
             .pull-left Last commit
             .last-commit.hidden-sm.pull-left
-              %small.light              
-                = clipboard_button(clipboard_text: @commit.id)
+              %small.light
+                = clipboard_button(clipboard_text: @commit.id, title: "Copy commit SHA to clipboard")
                 = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
                 = time_ago_with_tooltip(@commit.committed_date)
                 = @commit.full_title
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 1c5f8b3928b..259207a6dfd 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -15,11 +15,11 @@
   - if current_user
     %li
       - if !on_top_of_branch?
-        %span.btn.add-to-tree.disabled.has-tooltip{title: "You can only add files when you are on a branch", data: { container: 'body' }}
+        %span.btn.add-to-tree.disabled.has-tooltip{ title: "You can only add files when you are on a branch", data: { container: 'body' } }
           = icon('plus')
       - else
         %span.dropdown
-          %a.dropdown-toggle.btn.add-to-tree{href: '#', "data-toggle" => "dropdown"}
+          %a.dropdown-toggle.btn.add-to-tree{ href: '#', "data-toggle" => "dropdown" }
             = icon('plus')
           %ul.dropdown-menu
             - if can_edit_tree?
@@ -28,11 +28,11 @@
                   = icon('pencil fw')
                   New file
               %li
-                = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal'} do
+                = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } do
                   = icon('file fw')
                   Upload file
               %li
-                = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal'} do
+                = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
                   = icon('folder fw')
                   New directory
             - elsif can?(current_user, :fork_project, @project)
diff --git a/app/views/projects/tree/_tree_item.html.haml b/app/views/projects/tree/_tree_item.html.haml
index 1ccef6d52ab..15c9536133c 100644
--- a/app/views/projects/tree/_tree_item.html.haml
+++ b/app/views/projects/tree/_tree_item.html.haml
@@ -6,4 +6,4 @@
       %span.str-truncated= path
   %td.hidden-xs.tree-commit
   %td.tree-time-ago.text-right
-    = render 'projects/tree/spinner'
\ No newline at end of file
+    = render 'projects/tree/spinner'
diff --git a/app/views/projects/variables/index.html.haml b/app/views/projects/variables/index.html.haml
index 39303700131..cf7ae0b489f 100644
--- a/app/views/projects/variables/index.html.haml
+++ b/app/views/projects/variables/index.html.haml
@@ -15,4 +15,4 @@
         No variables found, add one with the form above.
     - else
       = render "table"
-      %button.btn.btn-info.js-btn-toggle-reveal-values{"data-status" => 'hidden'} Reveal Values
+      %button.btn.btn-info.js-btn-toggle-reveal-values{ "data-status" => 'hidden' } Reveal Values
diff --git a/app/views/projects/wikis/_new.html.haml b/app/views/projects/wikis/_new.html.haml
index c32cb122c26..c74f53b4c39 100644
--- a/app/views/projects/wikis/_new.html.haml
+++ b/app/views/projects/wikis/_new.html.haml
@@ -1,11 +1,11 @@
 - @no_container = true
 
 %div{ class: container_class }
-  %div#modal-new-wiki.modal
+  #modal-new-wiki.modal
     .modal-dialog
       .modal-content
         .modal-header
-          %a.close{href: "#", "data-dismiss" => "modal"} ×
+          %a.close{ href: "#", "data-dismiss" => "modal" } ×
           %h3.page-title New Wiki Page
         .modal-body
           %form.new-wiki-page
diff --git a/app/views/repository_check_mailer/notify.html.haml b/app/views/repository_check_mailer/notify.html.haml
index a585147ddd1..94e5a5d9709 100644
--- a/app/views/repository_check_mailer/notify.html.haml
+++ b/app/views/repository_check_mailer/notify.html.haml
@@ -2,7 +2,7 @@
   #{@message}.
 
 %p
-  = link_to "See the affected projects in the GitLab admin panel", admin_namespaces_projects_url(last_repository_check_failed: 1)
+  = link_to "See the affected projects in the GitLab admin panel", admin_projects_url(last_repository_check_failed: 1)
 
 %p
   You are receiving this message because you are a GitLab administrator for #{Gitlab.config.gitlab.url}.
diff --git a/app/views/repository_check_mailer/notify.text.haml b/app/views/repository_check_mailer/notify.text.haml
index 93db151329e..0902c50d052 100644
--- a/app/views/repository_check_mailer/notify.text.haml
+++ b/app/views/repository_check_mailer/notify.text.haml
@@ -1,6 +1,6 @@
 #{@message}.
 \
-View details: #{admin_namespaces_projects_url(last_repository_check_failed: 1)}
+View details: #{admin_projects_url(last_repository_check_failed: 1)}
 
 You are receiving this message because you are a GitLab administrator
 for #{Gitlab.config.gitlab.url}.
diff --git a/app/views/search/_category.html.haml b/app/views/search/_category.html.haml
index 2c378231237..8cbecb725b5 100644
--- a/app/views/search/_category.html.haml
+++ b/app/views/search/_category.html.haml
@@ -1,70 +1,70 @@
 %ul.nav-links.search-filter
   - if @project
-    %li{class: ("active" if @scope == 'blobs')}
+    %li{ class: ("active" if @scope == 'blobs') }
       = link_to search_filter_path(scope: 'blobs') do
         Code
         %span.badge
           = @search_results.blobs_count
-    %li{class: ("active" if @scope == 'issues')}
+    %li{ class: ("active" if @scope == 'issues') }
       = link_to search_filter_path(scope: 'issues') do
         Issues
         %span.badge
           = @search_results.issues_count
-    %li{class: ("active" if @scope == 'merge_requests')}
+    %li{ class: ("active" if @scope == 'merge_requests') }
       = link_to search_filter_path(scope: 'merge_requests') do
         Merge requests
         %span.badge
           = @search_results.merge_requests_count
-    %li{class: ("active" if @scope == 'milestones')}
+    %li{ class: ("active" if @scope == 'milestones') }
       = link_to search_filter_path(scope: 'milestones') do
         Milestones
         %span.badge
           = @search_results.milestones_count
-    %li{class: ("active" if @scope == 'notes')}
+    %li{ class: ("active" if @scope == 'notes') }
       = link_to search_filter_path(scope: 'notes') do
         Comments
         %span.badge
           = @search_results.notes_count
-    %li{class: ("active" if @scope == 'wiki_blobs')}
+    %li{ class: ("active" if @scope == 'wiki_blobs') }
       = link_to search_filter_path(scope: 'wiki_blobs') do
         Wiki
         %span.badge
           = @search_results.wiki_blobs_count
-    %li{class: ("active" if @scope == 'commits')}
+    %li{ class: ("active" if @scope == 'commits') }
       = link_to search_filter_path(scope: 'commits') do
         Commits
         %span.badge
           = @search_results.commits_count
 
   - elsif @show_snippets
-    %li{class: ("active" if @scope == 'snippet_blobs')}
+    %li{ class: ("active" if @scope == 'snippet_blobs') }
       = link_to search_filter_path(scope: 'snippet_blobs', snippets: true, group_id: nil, project_id: nil) do
         Snippet Contents
         %span.badge
           = @search_results.snippet_blobs_count
-    %li{class: ("active" if @scope == 'snippet_titles')}
+    %li{ class: ("active" if @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
           = @search_results.snippet_titles_count
 
   - else
-    %li{class: ("active" if @scope == 'projects')}
+    %li{ class: ("active" if @scope == 'projects') }
       = link_to search_filter_path(scope: 'projects') do
         Projects
         %span.badge
           = @search_results.projects_count
-    %li{class: ("active" if @scope == 'issues')}
+    %li{ class: ("active" if @scope == 'issues') }
       = link_to search_filter_path(scope: 'issues') do
         Issues
         %span.badge
           = @search_results.issues_count
-    %li{class: ("active" if @scope == 'merge_requests')}
+    %li{ class: ("active" if @scope == 'merge_requests') }
       = link_to search_filter_path(scope: 'merge_requests') do
         Merge requests
         %span.badge
           = @search_results.merge_requests_count
-    %li{class: ("active" if @scope == 'milestones')}
+    %li{ class: ("active" if @scope == 'milestones') }
       = link_to search_filter_path(scope: 'milestones') do
         Milestones
         %span.badge
diff --git a/app/views/shared/_choose_group_avatar_button.html.haml b/app/views/shared/_choose_group_avatar_button.html.haml
index 000532b1c9a..ee043910548 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 @@
-%a.choose-btn.btn.btn-sm.js-choose-group-avatar-button
+%button.choose-btn.btn.btn-sm.js-choose-group-avatar-button
   %i.fa.fa-paperclip
   %span Choose File ...
 &nbsp;
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index 3b82d8e686f..03684389742 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -2,12 +2,12 @@
 
 .git-clone-holder.input-group
   .input-group-btn
-    -if allowed_protocols_present?
+    - if allowed_protocols_present?
       .clone-dropdown-btn.btn.btn-static
         %span
           = enabled_project_button(project, enabled_protocol)
     - else
-      %a#clone-dropdown.clone-dropdown-btn.btn{href: '#', data: { toggle: 'dropdown' }}
+      %a#clone-dropdown.clone-dropdown-btn.btn{ href: '#', data: { toggle: 'dropdown' } }
         %span
           = default_clone_protocol.upcase
         = icon('caret-down')
@@ -19,7 +19,7 @@
 
   = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true
   .input-group-btn
-    = clipboard_button(clipboard_target: '#project_clone')
+    = clipboard_button(clipboard_target: '#project_clone', title: "Copy URL to clipboard")
 
 :javascript
   $('ul.clone-options-dropdown a').on('click',function(e){
diff --git a/app/views/shared/_commit_message_container.html.haml b/app/views/shared/_commit_message_container.html.haml
index 0a38327baa2..c196bc06b17 100644
--- a/app/views/shared/_commit_message_container.html.haml
+++ b/app/views/shared/_commit_message_container.html.haml
@@ -1,5 +1,6 @@
 .form-group.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
     Commit message
   .col-sm-10
@@ -8,9 +9,17 @@
       = text_area_tag 'commit_message',
           (params[:commit_message] || local_assigns[:text] || local_assigns[:placeholder]),
           class: 'form-control js-commit-message', placeholder: local_assigns[:placeholder],
+          data: descriptions,
           required: true, rows: (local_assigns[:rows] || 3),
           id: "commit_message-#{nonce}"
     - if local_assigns[:hint]
       %p.hint
         Try to keep the first line under 52 characters
         and the others under 72.
+    - if descriptions.present?
+      %p.hint.js-with-description-hint
+        = link_to "#", class: "js-with-description-link" do
+          Include description in commit message
+      %p.hint.js-without-description-hint.hide
+        = link_to "#", class: "js-without-description-link" do
+          Don't include description in commit message
diff --git a/app/views/shared/_confirm_modal.html.haml b/app/views/shared/_confirm_modal.html.haml
index b0fc60573f7..e7cb93b17a7 100644
--- a/app/views/shared/_confirm_modal.html.haml
+++ b/app/views/shared/_confirm_modal.html.haml
@@ -1,8 +1,8 @@
-#modal-confirm-danger.modal{tabindex: -1}
+#modal-confirm-danger.modal{ tabindex: -1 }
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title
           Confirmation required
 
diff --git a/app/views/shared/_file_highlight.html.haml b/app/views/shared/_file_highlight.html.haml
index e26693bf5b9..8d64cb5d698 100644
--- a/app/views/shared/_file_highlight.html.haml
+++ b/app/views/shared/_file_highlight.html.haml
@@ -9,8 +9,8 @@
         - offset = defined?(first_line_number) ? first_line_number : 1
         - i = index + offset
         -# We're not using `link_to` because it is too slow once we get to thousands of lines.
-        %a.diff-line-num{href: "#{link}#L#{i}", id: "L#{i}", 'data-line-number' => i}
+        %a.diff-line-num{ href: "#{link}#L#{i}", id: "L#{i}", 'data-line-number' => i }
           = link_icon
           = i
-  .blob-content{data: {blob_id: blob.id}}
+  .blob-content{ data: { blob_id: blob.id } }
     = highlight(blob.path, blob.data, repository: repository, plain: blob.no_highlighting?)
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index db324d8868e..f11f4471a9d 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -4,7 +4,7 @@
 - status = label_subscription_status(label, @project).inquiry if current_user
 - subject = local_assigns[:subject]
 
-%li{id: label_css_id, data: { id: label.id } }
+%li{ id: label_css_id, data: { id: label.id } }
   = render "shared/label_row", label: label
 
   .visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown
@@ -56,7 +56,7 @@
             = icon('spinner spin', class: 'label-subscribe-button-loading')
 
           .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) }
-            %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+            %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
               %span Subscribe
               = icon('chevron-down')
             %ul.dropdown-menu
diff --git a/app/views/shared/_milestones_filter.html.haml b/app/views/shared/_milestones_filter.html.haml
index 73d288e2236..39294fe1a09 100644
--- a/app/views/shared/_milestones_filter.html.haml
+++ b/app/views/shared/_milestones_filter.html.haml
@@ -2,17 +2,17 @@
   - counts = milestone_counts(@project.milestones)
 
 %ul.nav-links
-  %li{class: milestone_class_for_state(params[:state], 'opened', true)}
+  %li{ class: milestone_class_for_state(params[:state], 'opened', true) }>
     = link_to milestones_filter_path(state: 'opened') do
       Open
       - if @project
         %span.badge #{counts[:opened]}
-  %li{class: milestone_class_for_state(params[:state], 'closed')}
+  %li{ class: milestone_class_for_state(params[:state], 'closed') }>
     = link_to milestones_filter_path(state: 'closed') do
       Closed
       - if @project
         %span.badge #{counts[:closed]}
-  %li{class: milestone_class_for_state(params[:state], 'all')}
+  %li{ class: milestone_class_for_state(params[:state], 'all') }>
     = link_to milestones_filter_path(state: 'all') do
       All
       - if @project
diff --git a/app/views/shared/_nav_scroll.html.haml b/app/views/shared/_nav_scroll.html.haml
index 4e3b1b3a571..61646f150c1 100644
--- a/app/views/shared/_nav_scroll.html.haml
+++ b/app/views/shared/_nav_scroll.html.haml
@@ -1,4 +1,4 @@
 .fade-left
   = icon('angle-left')
 .fade-right
-  = icon('angle-right')
\ No newline at end of file
+  = icon('angle-right')
diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml
index a43bf33751a..ed6fc76c61e 100644
--- a/app/views/shared/_no_password.html.haml
+++ b/app/views/shared/_no_password.html.haml
@@ -1,8 +1,8 @@
 - if cookies[:hide_no_password_message].blank? && !current_user.hide_no_password && current_user.require_password?
-  .no-password-message.alert.alert-warning.hidden-xs
+  .no-password-message.alert.alert-warning
     You won't be able to pull or push project code via #{gitlab_config.protocol.upcase} until you #{link_to 'set a password', edit_profile_password_path} on your account
 
-    .pull-right
+    .alert-link-group
       = link_to "Don't show again", profile_path(user: {hide_no_password: true}), method: :put
       |
       = link_to 'Remind later', '#', class: 'hide-no-password-message'
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index bb5fff2d3bb..d663fa13d10 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -1,8 +1,8 @@
 - if cookies[:hide_no_ssh_message].blank? && !current_user.hide_no_ssh_key && current_user.require_ssh_key?
-  .no-ssh-key-message.alert.alert-warning.hidden-xs
+  .no-ssh-key-message.alert.alert-warning
     You won't be able to pull or push project code via SSH until you #{link_to 'add an SSH key', profile_keys_path, class: 'alert-link'} to your profile
 
-    .pull-right
+    .alert-link-group
       = link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'alert-link'
       |
       = link_to 'Remind later', '#', class: 'hide-no-ssh-message alert-link'
diff --git a/app/views/shared/_sort_dropdown.html.haml b/app/views/shared/_sort_dropdown.html.haml
index ede3c7090d7..0ce0d759e86 100644
--- a/app/views/shared/_sort_dropdown.html.haml
+++ b/app/views/shared/_sort_dropdown.html.haml
@@ -1,5 +1,5 @@
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle{type: 'button', data: {toggle: 'dropdown'}}
+  %button.dropdown-toggle{ type: 'button', data: {toggle: 'dropdown' } }
     %span.light
     - if @sort.present?
       = sort_options_hash[@sort]
diff --git a/app/views/shared/builds/_tabs.html.haml b/app/views/shared/builds/_tabs.html.haml
index 60353aee7f1..b6047ece592 100644
--- a/app/views/shared/builds/_tabs.html.haml
+++ b/app/views/shared/builds/_tabs.html.haml
@@ -1,23 +1,23 @@
 %ul.nav-links
-  %li{ class: ('active' if scope.nil?) }
+  %li{ class: ('active' if scope.nil?) }>
     = link_to build_path_proc.call(nil) do
       All
       %span.badge.js-totalbuilds-count
         = number_with_delimiter(all_builds.count(:id))
 
-  %li{ class: ('active' if scope == 'pending') }
+  %li{ class: ('active' if scope == 'pending') }>
     = link_to build_path_proc.call('pending') do
       Pending
       %span.badge
         = number_with_delimiter(all_builds.pending.count(:id))
 
-  %li{ class: ('active' if scope == 'running') }
+  %li{ class: ('active' if scope == 'running') }>
     = link_to build_path_proc.call('running') do
       Running
       %span.badge
         = number_with_delimiter(all_builds.running.count(:id))
 
-  %li{ class: ('active' if scope == 'finished') }
+  %li{ class: ('active' if scope == 'finished') }>
     = link_to build_path_proc.call('finished') do
       Finished
       %span.badge
diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml
index e939278bc07..e2033654018 100644
--- a/app/views/shared/empty_states/_issues.html.haml
+++ b/app/views/shared/empty_states/_issues.html.haml
@@ -8,12 +8,12 @@
       = render 'shared/empty_states/icons/issues.svg'
   .col-xs-12{ class: "#{'col-sm-6' if has_button}" }
     .text-content
-      - if has_button
+      - if has_button && current_user
         %h4
-          The Issue Tracker is a good place to add things that need to be improved or solved in a project!
+          The Issue Tracker is the place to add things that need to be improved or solved in a project
         %p
-          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.
+          Issues can be bugs, tasks or ideas to be discussed.
+          Also, issues are searchable and filterable.
         - if project_select_button
           = render 'shared/new_project_item_select', path: 'issues/new', label: 'New issue'
         - else
diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml
index 19221e3391f..f9a7aa4e29b 100644
--- a/app/views/shared/groups/_group.html.haml
+++ b/app/views/shared/groups/_group.html.haml
@@ -21,14 +21,14 @@
       = icon('users')
       = number_with_delimiter(group.users.count)
 
-    %span.visibility-icon.has-tooltip{data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group)}
+    %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
       = visibility_level_icon(group.visibility_level, fw: false)
 
   .avatar-container.s40
     = image_tag group_icon(group), class: "avatar s40 hidden-xs"
   .title
     = link_to group, class: 'group-name' do
-      = group.name
+      = group.full_name
 
     - if group_member
       as
diff --git a/app/views/shared/icons/_go_logo.svg.erb b/app/views/shared/icons/_go_logo.svg.erb
new file mode 100644
index 00000000000..5052651c110
--- /dev/null
+++ b/app/views/shared/icons/_go_logo.svg.erb
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="<%= size %>" height="<%= size %>" viewBox="0 0 16 16"><g fill-rule="evenodd" transform="translate(0 1)"><path d="m14 15.01h1v-8.02c0-3.862-3.134-6.991-7-6.991-3.858 0-7 3.13-7 6.991v8.02h1v-8.02c0-3.306 2.691-5.991 6-5.991 3.314 0 6 2.682 6 5.991v8.02m-10.52-13.354c-.366-.402-.894-.655-1.48-.655-1.105 0-2 .895-2 2 0 .868.552 1.606 1.325 1.883.102-.321.226-.631.371-.93-.403-.129-.695-.507-.695-.953 0-.552.448-1 1-1 .306 0 .58.138.764.354.222-.25.461-.483.717-.699m9.04-.002c.366-.401.893-.653 1.479-.653 1.105 0 2 .895 2 2 0 .867-.552 1.606-1.324 1.883-.101-.321-.225-.632-.37-.931.403-.129.694-.507.694-.952 0-.552-.448-1-1-1-.305 0-.579.137-.762.353-.222-.25-.461-.483-.717-.699"/><path d="m5.726 7.04h1.557v.124c0 .283-.033.534-.1.752-.065.202-.175.391-.33.566-.35.394-.795.591-1.335.591-.527 0-.979-.19-1.355-.571-.376-.382-.564-.841-.564-1.377 0-.547.191-1.01.574-1.391.382-.382.848-.574 1.396-.574.295 0 .57.06.825.181.244.12.484.316.72.586l-.405.388c-.309-.412-.686-.618-1.13-.618-.399 0-.733.138-1 .413-.27.27-.405.609-.405 1.015 0 .42.151.766.452 1.037.282.252.587.378.915.378.28 0 .531-.094.754-.283.223-.19.347-.418.373-.683h-.94v-.535m2.884.061c0-.53.194-.986.583-1.367.387-.381.853-.571 1.396-.571.537 0 .998.192 1.382.576.386.384.578.845.578 1.384 0 .542-.194 1-.581 1.379-.389.379-.858.569-1.408.569-.487 0-.923-.168-1.311-.505-.426-.373-.64-.861-.64-1.465m.574.007c0 .417.14.759.42 1.028.278.269.6.403.964.403.395 0 .729-.137 1-.41.272-.277.408-.613.408-1.01 0-.402-.134-.739-.403-1.01-.267-.273-.597-.41-.991-.41-.392 0-.723.137-.993.41-.27.27-.405.604-.405 1m-.184 3.918c.525.026.812.063.812.063.271.025.324-.096.116-.273 0 0-.775-.813-1.933-.813-1.159 0-1.923.813-1.923.813-.211.174-.153.3.12.273 0 0 .286-.037.81-.063v.477c0 .268.224.5.5.5.268 0 .5-.223.5-.498v-.252.25c0 .268.224.5.5.5.268 0 .5-.223.5-.498v-.478m-1-1.023c.552 0 1-.224 1-.5 0-.276-.448-.5-1-.5-.552 0-1 .224-1 .5 0 .276.448.5 1 .5"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_canceled.svg b/app/views/shared/icons/_icon_status_canceled.svg
index 41a210a8ed9..bd5d04e1cd7 100644..100755
--- a/app/views/shared/icons/_icon_status_canceled.svg
+++ b/app/views/shared/icons/_icon_status_canceled.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><rect width="8" height="2" x="3" y="6" transform="rotate(45 7 7)" rx=".5"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M5.2 3.8l4.9 4.9c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0L3.8 5.2c-.2-.2-.2-.5 0-.7l.7-.7c.2-.2.5-.2.7 0"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_canceled_borderless.svg b/app/views/shared/icons/_icon_status_canceled_borderless.svg
new file mode 100644
index 00000000000..bf7fb29185f
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_canceled_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M8.17142857,5.97142857 L15.8714286,13.6714286 C16.1857143,13.9857143 16.1857143,14.4571429 15.8714286,14.7714286 L14.7714286,15.8714286 C14.4571429,16.1857143 13.9857143,16.1857143 13.6714286,15.8714286 L5.97142857,8.17142857 C5.65714286,7.85714286 5.65714286,7.38571429 5.97142857,7.07142857 L7.07142857,5.97142857 C7.38571429,5.65714286 7.85714286,5.65714286 8.17142857,5.97142857" id="Shape"></path></svg>
diff --git a/app/views/shared/icons/_icon_status_created.svg b/app/views/shared/icons/_icon_status_created.svg
index 1f5c3b51b03..326ad04e017 100644..100755
--- a/app/views/shared/icons/_icon_status_created.svg
+++ b/app/views/shared/icons/_icon_status_created.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" enable-background="new 0 0 14 14"><path d="M12.5,7 C12.5,4 10,1.5 7,1.5 C4,1.5 1.5,4 1.5,7 C1.5,10 4,12.5 7,12.5 C10,12.5 12.5,10 12.5,7 L12.5,7 Z M0,7 C0,3.1 3.1,0 7,0 C10.9,0 14,3.1 14,7 C14,10.9 10.9,14 7,14 C3.1,14 0,10.9 0,7 L0,7 Z" /><circle cx="7" cy="7" r="3.25"/></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><circle cx="7" cy="7" r="3.25"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_created_borderless.svg b/app/views/shared/icons/_icon_status_created_borderless.svg
new file mode 100644
index 00000000000..1810d023be8
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_created_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle id="Oval" cx="11" cy="11" r="5.10714286"></circle></svg>
diff --git a/app/views/shared/icons/_icon_status_failed.svg b/app/views/shared/icons/_icon_status_failed.svg
index af267b8938a..64da5aa31fc 100644..100755
--- a/app/views/shared/icons/_icon_status_failed.svg
+++ b/app/views/shared/icons/_icon_status_failed.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7.72916667,6.27083333 L7.72916667,4.28939247 C7.72916667,4.12531853 7.59703895,4 7.43405116,4 L6.56594884,4 C6.40541585,4 6.27083333,4.12956542 6.27083333,4.28939247 L6.27083333,6.27083333 L4.28939247,6.27083333 C4.12531853,6.27083333 4,6.40296105 4,6.56594884 L4,7.43405116 C4,7.59458415 4.12956542,7.72916667 4.28939247,7.72916667 L6.27083333,7.72916667 L6.27083333,9.71060753 C6.27083333,9.87468147 6.40296105,10 6.56594884,10 L7.43405116,10 C7.59458415,10 7.72916667,9.87043458 7.72916667,9.71060753 L7.72916667,7.72916667 L9.71060753,7.72916667 C9.87468147,7.72916667 10,7.59703895 10,7.43405116 L10,6.56594884 C10,6.40541585 9.87043458,6.27083333 9.71060753,6.27083333 L7.72916667,6.27083333 Z" transform="rotate(-45 7 7)"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7 5.969L5.599 4.568a.29.29 0 0 0-.413.004l-.614.614a.294.294 0 0 0-.004.413L5.968 7l-1.4 1.401a.29.29 0 0 0 .004.413l.614.614c.113.114.3.117.413.004L7 8.032l1.401 1.4a.29.29 0 0 0 .413-.004l.614-.614a.294.294 0 0 0 .004-.413L8.032 7l1.4-1.401a.29.29 0 0 0-.004-.413l-.614-.614a.294.294 0 0 0-.413-.004L7 5.968z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_failed_borderless.svg b/app/views/shared/icons/_icon_status_failed_borderless.svg
new file mode 100644
index 00000000000..b7022350c74
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_failed_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.1458333,9.85416667 L12.1458333,6.74047388 C12.1458333,6.4826434 11.9382041,6.28571429 11.6820804,6.28571429 L10.3179196,6.28571429 C10.0656535,6.28571429 9.85416667,6.48931709 9.85416667,6.74047388 L9.85416667,9.85416667 L6.74047388,9.85416667 C6.4826434,9.85416667 6.28571429,10.0617959 6.28571429,10.3179196 L6.28571429,11.6820804 C6.28571429,11.9343465 6.48931709,12.1458333 6.74047388,12.1458333 L9.85416667,12.1458333 L9.85416667,15.2595261 C9.85416667,15.5173566 10.0617959,15.7142857 10.3179196,15.7142857 L11.6820804,15.7142857 C11.9343465,15.7142857 12.1458333,15.5106829 12.1458333,15.2595261 L12.1458333,12.1458333 L15.2595261,12.1458333 C15.5173566,12.1458333 15.7142857,11.9382041 15.7142857,11.6820804 L15.7142857,10.3179196 C15.7142857,10.0656535 15.5106829,9.85416667 15.2595261,9.85416667 L12.1458333,9.85416667 Z" id="Combined-Shape" transform="translate(11.000000, 11.000000) rotate(-45.000000) translate(-11.000000, -11.000000) "></path></svg>
diff --git a/app/views/shared/icons/_icon_status_manual.svg b/app/views/shared/icons/_icon_status_manual.svg
new file mode 100755
index 00000000000..c98839f51a9
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_manual.svg
@@ -0,0 +1 @@
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M10.5 7.63V6.37l-.787-.13c-.044-.175-.132-.349-.263-.61l.481-.652-.918-.913-.657.478a2.346 2.346 0 0 0-.612-.26L7.656 3.5H6.388l-.132.783c-.219.043-.394.13-.612.26l-.657-.478-.918.913.437.652c-.131.218-.175.392-.262.61l-.744.086v1.261l.787.13c.044.218.132.392.263.61l-.438.651.92.913.655-.434c.175.086.394.173.613.26l.131.783h1.313l.131-.783c.219-.043.394-.13.613-.26l.656.478.918-.913-.48-.652c.13-.218.218-.435.262-.61l.656-.13zM7 8.283a1.285 1.285 0 0 1-1.313-1.305c0-.739.57-1.304 1.313-1.304.744 0 1.313.565 1.313 1.304 0 .74-.57 1.305-1.313 1.305z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_manual_borderless.svg b/app/views/shared/icons/_icon_status_manual_borderless.svg
new file mode 100644
index 00000000000..5eec665688b
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_manual_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M16.5,11.9906832 L16.5,10.0093168 L15.2625,9.80434783 C15.19375,9.5310559 15.05625,9.25776398 14.85,8.84782609 L15.60625,7.82298137 L14.1625,6.38819876 L13.13125,7.13975155 C12.7875,6.93478261 12.44375,6.79813665 12.16875,6.72981366 L12.03125,5.5 L10.0375,5.5 L9.83125,6.72981366 C9.4875,6.79813665 9.2125,6.93478261 8.86875,7.13975155 L7.8375,6.38819876 L6.39375,7.82298137 L7.08125,8.84782609 C6.875,9.18944099 6.80625,9.46273292 6.66875,9.80434783 L5.5,9.94099379 L5.5,11.9223602 L6.7375,12.1273292 C6.80625,12.4689441 6.94375,12.742236 7.15,13.0838509 L6.4625,14.1086957 L7.90625,15.5434783 L8.9375,14.8602484 C9.2125,14.9968944 9.55625,15.1335404 9.9,15.2701863 L10.10625,16.5 L12.16875,16.5 L12.375,15.2701863 C12.71875,15.2018634 12.99375,15.0652174 13.3375,14.8602484 L14.36875,15.6118012 L15.8125,14.1770186 L15.05625,13.1521739 C15.2625,12.810559 15.4,12.4689441 15.46875,12.1956522 L16.5,11.9906832 L16.5,11.9906832 Z M11,13.015528 C9.83125,13.015528 8.9375,12.1273292 8.9375,10.9658385 C8.9375,9.80434783 9.83125,8.91614907 11,8.91614907 C12.16875,8.91614907 13.0625,9.80434783 13.0625,10.9658385 C13.0625,12.1273292 12.16875,13.015528 11,13.015528 L11,13.015528 Z" id="Shape" ></path></svg>
diff --git a/app/views/shared/icons/_icon_status_pending.svg b/app/views/shared/icons/_icon_status_pending.svg
index 516231d1b44..02d5da407e3 100644..100755
--- a/app/views/shared/icons/_icon_status_pending.svg
+++ b/app/views/shared/icons/_icon_status_pending.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M4.69999981,5.30065012 C4.69999981,5.13460564 4.83842754,5 5.00354719,5 L5.89645243,5 C6.06409702,5 6.19999981,5.13308716 6.19999981,5.30065012 L6.19999981,8.69934988 C6.19999981,8.86539436 6.06157207,9 5.89645243,9 L5.00354719,9 C4.8359026,9 4.69999981,8.86691284 4.69999981,8.69934988 L4.69999981,5.30065012 Z M7.69999981,5.30065012 C7.69999981,5.13460564 7.83842754,5 8.00354719,5 L8.89645243,5 C9.06409702,5 9.19999981,5.13308716 9.19999981,5.30065012 L9.19999981,8.69934988 C9.19999981,8.86539436 9.06157207,9 8.89645243,9 L8.00354719,9 C7.8359026,9 7.69999981,8.86691284 7.69999981,8.69934988 L7.69999981,5.30065012 Z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M4.7 5.3c0-.2.1-.3.3-.3h.9c.2 0 .3.1.3.3v3.4c0 .2-.1.3-.3.3H5c-.2 0-.3-.1-.3-.3V5.3m3 0c0-.2.1-.3.3-.3h.9c.2 0 .3.1.3.3v3.4c0 .2-.1.3-.3.3H8c-.2 0-.3-.1-.3-.3V5.3"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_pending_borderless.svg b/app/views/shared/icons/_icon_status_pending_borderless.svg
new file mode 100644
index 00000000000..8d66e9e6c9c
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_pending_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M7.38571429,8.32857143 C7.38571429,8.01428571 7.54285714,7.85714286 7.85714286,7.85714286 L9.27142857,7.85714286 C9.58571429,7.85714286 9.74285714,8.01428571 9.74285714,8.32857143 L9.74285714,13.6714286 C9.74285714,13.9857143 9.58571429,14.1428571 9.27142857,14.1428571 L7.85714286,14.1428571 C7.54285714,14.1428571 7.38571429,13.9857143 7.38571429,13.6714286 L7.38571429,8.32857143 M12.1,8.32857143 C12.1,8.01428571 12.2571429,7.85714286 12.5714286,7.85714286 L13.9857143,7.85714286 C14.3,7.85714286 14.4571429,8.01428571 14.4571429,8.32857143 L14.4571429,13.6714286 C14.4571429,13.9857143 14.3,14.1428571 13.9857143,14.1428571 L12.5714286,14.1428571 C12.2571429,14.1428571 12.1,13.9857143 12.1,13.6714286 L12.1,8.32857143" id="Shape"></path></svg>
diff --git a/app/views/shared/icons/_icon_status_running.svg b/app/views/shared/icons/_icon_status_running.svg
index d2618bce200..532f4fee33c 100644..100755
--- a/app/views/shared/icons/_icon_status_running.svg
+++ b/app/views/shared/icons/_icon_status_running.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7,3 C9.209139,3 11,4.790861 11,7 C11,9.209139 9.209139,11 7,11 C5.65802855,11 4.47040669,10.3391508 3.74481446,9.32513253 L7,7 L7,3 L7,3 Z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7 3c2.2 0 4 1.8 4 4s-1.8 4-4 4c-1.3 0-2.5-.7-3.3-1.7L7 7V3"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_running_borderless.svg b/app/views/shared/icons/_icon_status_running_borderless.svg
new file mode 100644
index 00000000000..2757a168ed5
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_running_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M11,4.71428571 C14.4571429,4.71428571 17.2857143,7.54285714 17.2857143,11 C17.2857143,14.4571429 14.4571429,17.2857143 11,17.2857143 C8.95714286,17.2857143 7.07142857,16.1857143 5.81428571,14.6142857 L11,11 L11,4.71428571" id="Shape"></path></svg>
diff --git a/app/views/shared/icons/_icon_status_skipped.svg b/app/views/shared/icons/_icon_status_skipped.svg
index 701f33bcbea..1998dfef9ea 100644..100755
--- a/app/views/shared/icons/_icon_status_skipped.svg
+++ b/app/views/shared/icons/_icon_status_skipped.svg
@@ -1 +1 @@
-<svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M10 17.857c4.286 0 7.857-3.571 7.857-7.857S14.286 2.143 10 2.143 2.143 5.714 2.143 10 5.714 17.857 10 17.857M10 0c5.571 0 10 4.429 10 10s-4.429 10-10 10S0 15.571 0 10 4.429 0 10 0"/><path d="M10.986 11l-1.293 1.293a1 1 0 0 0 1.414 1.414l2.644-2.644a1.505 1.505 0 0 0 0-2.126l-2.644-2.644a1 1 0 0 0-1.414 1.414L10.986 9H6.4a1 1 0 0 0 0 2h4.586z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7.69 7.7l-.905.905a.7.7 0 0 0 .99.99l1.85-1.85c.411-.412.411-1.078 0-1.49l-1.85-1.85a.7.7 0 0 0-.99.99l.905.905H4.48a.7.7 0 0 0 0 1.4h3.21z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_skipped_borderless.svg b/app/views/shared/icons/_icon_status_skipped_borderless.svg
new file mode 100644
index 00000000000..fb3e930b3cb
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_skipped_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.0846,12.1 L10.6623,13.5223 C10.2454306,13.9539168 10.2513924,14.6399933 10.6756996,15.0643004 C11.1000067,15.4886076 11.7860832,15.4945694 12.2177,15.0777 L15.1261,12.1693 C15.7708612,11.5230891 15.7708612,10.4769109 15.1261,9.8307 L12.2177,6.9223 C11.7860832,6.50543057 11.1000067,6.51139239 10.6756996,6.93569957 C10.2513924,7.36000675 10.2454306,8.04608322 10.6623,8.4777 L12.0846,9.9 L7.04,9.9 C6.43248678,9.9 5.94,10.3924868 5.94,11 C5.94,11.6075132 6.43248678,12.1 7.04,12.1 L12.0846,12.1 L12.0846,12.1 Z" id="Shape"></path></svg>
diff --git a/app/views/shared/icons/_icon_status_success.svg b/app/views/shared/icons/_icon_status_success.svg
index b7c21ba6971..eed5006bebe 100644..100755
--- a/app/views/shared/icons/_icon_status_success.svg
+++ b/app/views/shared/icons/_icon_status_success.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7.29166667,7.875 L5.54840803,7.875 C5.38293028,7.875 5.25,8.00712771 5.25,8.17011551 L5.25,9.03821782 C5.25,9.19875081 5.38360183,9.33333333 5.54840803,9.33333333 L8.24853534,9.33333333 C8.52035522,9.33333333 8.75,9.11228506 8.75,8.83960819 L8.75,8.46475969 L8.75,4.07392947 C8.75,3.92144267 8.61787229,3.79166667 8.45488449,3.79166667 L7.58678218,3.79166667 C7.42624919,3.79166667 7.29166667,3.91804003 7.29166667,4.07392947 L7.29166667,7.875 Z" transform="rotate(45 7 6.563)"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_success_borderless.svg b/app/views/shared/icons/_icon_status_success_borderless.svg
new file mode 100644
index 00000000000..8ee5be7ab78
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_success_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M11.4583333,12.375 L8.70008808,12.375 C8.45889044,12.375 8.25,12.5826293 8.25,12.8387529 L8.25,14.2029137 C8.25,14.4551799 8.4515113,14.6666667 8.70008808,14.6666667 L12.9619841,14.6666667 C13.3891296,14.6666667 13.75,14.3193051 13.75,13.8908129 L13.75,13.2899463 L13.75,6.42552703 C13.75,6.16226705 13.5423707,5.95833333 13.2862471,5.95833333 L11.9220863,5.95833333 C11.6698201,5.95833333 11.4583333,6.16750307 11.4583333,6.42552703 L11.4583333,12.375 Z" id="Combined-Shape" transform="translate(11.000000, 10.312500) rotate(-315.000000) translate(-11.000000, -10.312500) "></path></svg>
diff --git a/app/views/shared/icons/_icon_status_warning.svg b/app/views/shared/icons/_icon_status_warning.svg
index 9191e0050a6..cb785635b7e 100644..100755
--- a/app/views/shared/icons/_icon_status_warning.svg
+++ b/app/views/shared/icons/_icon_status_warning.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M6,3.49769878 C6,3.22282734 6.21403503,3 6.50468445,3 L7.49531555,3 C7.77404508,3 8,3.21484375 8,3.49769878 L8,7.50230122 C8,7.77717266 7.78596497,8 7.49531555,8 L6.50468445,8 C6.22595492,8 6,7.78515625 6,7.50230122 L6,3.49769878 Z M6,9.50468445 C6,9.22595492 6.21403503,9 6.50468445,9 L7.49531555,9 C7.77404508,9 8,9.21403503 8,9.50468445 L8,10.4953156 C8,10.7740451 7.78596497,11 7.49531555,11 L6.50468445,11 C6.22595492,11 6,10.785965 6,10.4953156 L6,9.50468445 Z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M6 3.5c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v4c0 .3-.2.5-.5.5h-1c-.3 0-.5-.2-.5-.5v-4m0 6c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5h-1c-.3 0-.5-.2-.5-.5v-1"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_warning_borderless.svg b/app/views/shared/icons/_icon_status_warning_borderless.svg
new file mode 100644
index 00000000000..7b061624521
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_warning_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M9.42857143,5.5 C9.42857143,5.02857143 9.74285714,4.71428571 10.2142857,4.71428571 L11.7857143,4.71428571 C12.2571429,4.71428571 12.5714286,5.02857143 12.5714286,5.5 L12.5714286,11.7857143 C12.5714286,12.2571429 12.2571429,12.5714286 11.7857143,12.5714286 L10.2142857,12.5714286 C9.74285714,12.5714286 9.42857143,12.2571429 9.42857143,11.7857143 L9.42857143,5.5 M9.42857143,14.9285714 C9.42857143,14.4571429 9.74285714,14.1428571 10.2142857,14.1428571 L11.7857143,14.1428571 C12.2571429,14.1428571 12.5714286,14.4571429 12.5714286,14.9285714 L12.5714286,16.5 C12.5714286,16.9714286 12.2571429,17.2857143 11.7857143,17.2857143 L10.2142857,17.2857143 C9.74285714,17.2857143 9.42857143,16.9714286 9.42857143,16.5 L9.42857143,14.9285714" id="Shape"></path></svg>
diff --git a/app/views/shared/icons/_icon_stopwatch.svg b/app/views/shared/icons/_icon_stopwatch.svg
new file mode 100644
index 00000000000..f20de04538e
--- /dev/null
+++ b/app/views/shared/icons/_icon_stopwatch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14" enable-background="new 0 0 12 14"><path d="m11.5 2.4l-1.3-1.1-1 1.1 1.4 1.1.9-1.1"/><path d="m6.8 2v-.5h.5v-1.5h-2.6v1.5h.5v.5c-2.9.4-5.2 2.9-5.2 6 0 3.3 2.7 6 6 6s6-2.7 6-6c0-3-2.3-5.6-5.2-6m-.8 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5"/><path d="m6.2 8.9h-.5c-.1 0-.2-.1-.2-.2v-3.5c0-.1.1-.2.2-.2h.5c.1 0 .2.1.2.2v3.5c0 .1-.1.2-.2.2"/></svg>
\ No newline at end of file
diff --git a/app/views/shared/icons/_icon_terminal.svg b/app/views/shared/icons/_icon_terminal.svg
new file mode 100644
index 00000000000..c80f44c3edf
--- /dev/null
+++ b/app/views/shared/icons/_icon_terminal.svg
@@ -0,0 +1 @@
+<svg width="19" height="14" viewBox="0 0 19 14" xmlns="http://www.w3.org/2000/svg"><rect fill="#848484" x="7.2" y="9.25" width="6.46" height="1.5" rx=".5"/><path d="M5.851 7.016L3.81 9.103a.503.503 0 0 0 .017.709l.35.334c.207.198.524.191.717-.006l2.687-2.748a.493.493 0 0 0 .137-.376.493.493 0 0 0-.137-.376L4.894 3.892a.507.507 0 0 0-.717-.006l-.35.334a.503.503 0 0 0-.017.709L5.85 7.016z"/><path d="M1.25 11.497c0 .691.562 1.253 1.253 1.253h13.994c.694 0 1.253-.56 1.253-1.253V2.503c0-.691-.562-1.253-1.253-1.253H2.503c-.694 0-1.253.56-1.253 1.253v8.994zM2.503 0h13.994A2.504 2.504 0 0 1 19 2.503v8.994A2.501 2.501 0 0 1 16.497 14H2.503A2.504 2.504 0 0 1 0 11.497V2.503A2.501 2.501 0 0 1 2.503 0z"/></svg>
diff --git a/app/views/shared/icons/_mattermost_logo.svg.erb b/app/views/shared/icons/_mattermost_logo.svg.erb
new file mode 100644
index 00000000000..83fbd1a407d
--- /dev/null
+++ b/app/views/shared/icons/_mattermost_logo.svg.erb
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="<%= size %>" height="<%= size %>" version="1" viewBox="0 0 501 501"><path d="M236 .7C137.7 7.5 54 68.2 18.2 158.5c-32 81-19.6 172.8 33 242.5 39.8 53 97.2 87 164.3 97 16.5 2.7 48 3.2 63.5 1.2 48.7-6.3 92.2-24.6 129-54.2 13-10.5 33-31.2 42.2-43.7 26.4-35.5 42.8-75.8 49-120.3 1.6-12.3 1.6-48.7 0-61-4-28.3-12-54.8-24.2-79.5-12.8-26-26.5-45.3-46.8-65.8C417.8 64 400.2 49 398.4 49c-.6 0-.4 10.5.3 26l1.3 26 7 8.7c19 23.7 32.8 53.5 38.2 83 2.5 14 3 43 1 55.8-4.5 27.8-15.2 54-31 76.5-8.6 12.2-28 31.6-40.2 40.2-24 17-50 27.6-80 33-10 1.8-49 1.8-59 0-43-7.7-78.8-26-107.2-54.8-29.3-29.7-46.5-64-52.4-104.4-2-14-1.5-42 1-55C90 121.4 132 72 192 49.7c8-3 18.4-5.8 29.5-8.2 1.7-.4 34.4-38 35.3-40.6.3-1-10.2-1-20.8-.4z"/><path d="M322.2 24.6c-1.3.8-8.4 9.3-16 18.7-7.4 9.5-22.4 28-33.2 41.2-51 62.2-66 81.6-70.6 91-6 12-8.4 21-9 33-1.2 19.8 5 36 19 50C222 268 230 273 243 277.2c9 3 10.4 3.2 24 3.2 13.8 0 15 0 22.6-3 23.2-9 39-28.4 45-55.7 2-8.2 2-28.7.4-79.7l-2-72c-1-36.8-1.4-41.8-3-44-2-3-4.8-3.6-7.8-1.4z"/></svg>
diff --git a/app/views/shared/icons/_scroll_down.svg b/app/views/shared/icons/_scroll_down.svg
new file mode 100644
index 00000000000..acf22ac9314
--- /dev/null
+++ b/app/views/shared/icons/_scroll_down.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="33" class="gitlab-icon-scroll-down" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M1.385 5.534v12.47a4.145 4.145 0 0 0 4.144 4.15h4.942a4.151 4.151 0 0 0 4.144-4.15V5.535a4.145 4.145 0 0 0-4.144-4.15H5.53a4.151 4.151 0 0 0-4.144 4.15zM8.88 30.27v-4.351a.688.688 0 0 0-.69-.688.687.687 0 0 0-.69.688v4.334l-1.345-1.346a.69.69 0 0 0-.976.976l2.526 2.526a.685.685 0 0 0 .494.2.685.685 0 0 0 .493-.2l2.526-2.526a.69.69 0 1 0-.976-.976L8.88 30.27zM0 5.534A5.536 5.536 0 0 1 5.529 0h4.942A5.53 5.53 0 0 1 16 5.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 18.005V5.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0V6.544z" fill-rule="evenodd"/>
+</svg>
diff --git a/app/views/shared/icons/_scroll_down_hover_active.svg b/app/views/shared/icons/_scroll_down_hover_active.svg
new file mode 100644
index 00000000000..262576acf54
--- /dev/null
+++ b/app/views/shared/icons/_scroll_down_hover_active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="33" class="gitlab-icon-scroll-down-hover" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M8.88 30.27v-4.351a.688.688 0 0 0-.69-.688.687.687 0 0 0-.69.688v4.334l-1.345-1.346a.69.69 0 0 0-.976.976l2.526 2.526a.685.685 0 0 0 .494.2.685.685 0 0 0 .493-.2l2.526-2.526a.69.69 0 1 0-.976-.976L8.88 30.27zM0 5.534A5.536 5.536 0 0 1 5.529 0h4.942A5.53 5.53 0 0 1 16 5.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 18.005V5.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0V6.544z" fill-rule="evenodd"/>
+</svg>
diff --git a/app/views/shared/icons/_scroll_up.svg b/app/views/shared/icons/_scroll_up.svg
new file mode 100644
index 00000000000..f11288fd59c
--- /dev/null
+++ b/app/views/shared/icons/_scroll_up.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="33" class="gitlab-icon-scroll-up" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M1.385 14.534v12.47a4.145 4.145 0 0 0 4.144 4.15h4.942a4.151 4.151 0 0 0 4.144-4.15v-12.47a4.145 4.145 0 0 0-4.144-4.15H5.53a4.151 4.151 0 0 0-4.144 4.15zM8.88 2.609V6.96a.688.688 0 0 1-.69.688.687.687 0 0 1-.69-.688V2.627L6.155 3.972a.69.69 0 0 1-.976-.976L7.705.47a.685.685 0 0 1 .494-.2.685.685 0 0 1 .493.2l2.526 2.526a.69.69 0 1 1-.976.976L8.88 2.609zM0 14.534A5.536 5.536 0 0 1 5.529 9h4.942A5.53 5.53 0 0 1 16 14.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 27.005V14.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0v-2.143z" fill-rule="evenodd"/>
+</svg>
diff --git a/app/views/shared/icons/_scroll_up_hover_active.svg b/app/views/shared/icons/_scroll_up_hover_active.svg
new file mode 100644
index 00000000000..4658dbb1bb7
--- /dev/null
+++ b/app/views/shared/icons/_scroll_up_hover_active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="33" class="gitlab-icon-scroll-up-hover" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M8.88 2.646l1.362 1.362a.69.69 0 0 0 .976-.976L8.692.507A.685.685 0 0 0 8.2.306a.685.685 0 0 0-.494.2L5.179 3.033a.69.69 0 1 0 .976.976L7.5 2.663v4.179c0 .38.306.688.69.688.381 0 .69-.306.69-.688V2.646zM0 14.534A5.536 5.536 0 0 1 5.529 9h4.942A5.53 5.53 0 0 1 16 14.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 27.005V14.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0v-2.143z" fill-rule="evenodd"/>
+</svg>
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index e3503981afe..b42eaabb111 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -31,11 +31,11 @@
 
         - if issuable_filter_present?
           .filter-item.inline.reset-filters
-            %a{href: page_filter_path(without: issuable_filter_params)} Reset filters
+            %a{ href: page_filter_path(without: issuable_filter_params) } Reset filters
 
         .pull-right
           - if boards_page
-            #js-boards-seach.issue-boards-search
+            #js-boards-search.issue-boards-search
               %input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" }
               - if can?(current_user, :admin_list, @project)
                 .dropdown.pull-right
@@ -56,9 +56,9 @@
             = dropdown_tag("Status", options: { toggle_class: "js-issue-status", title: "Change status", dropdown_class: "dropdown-menu-status dropdown-menu-selectable", data: { field_name: "update[state_event]" } } ) do
               %ul
                 %li
-                  %a{href: "#", data: {id: "reopen"}} Open
+                  %a{ href: "#", data: { id: "reopen" } } Open
                 %li
-                  %a{href: "#", data: {id: "close"}} Closed
+                  %a{ href: "#", data: {id: "close" } } Closed
           .filter-item.inline
             = dropdown_tag("Assignee", options: { toggle_class: "js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: "Assign to", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
               placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: "update[assignee_id]" } })
@@ -70,9 +70,9 @@
             = dropdown_tag("Subscription", options: { toggle_class: "js-subscription-event", title: "Change subscription", dropdown_class: "dropdown-menu-selectable", data: { field_name: "update[subscription_event]" } } ) do
               %ul
                 %li
-                  %a{href: "#", data: {id: "subscribe"}} Subscribe
+                  %a{ href: "#", data: { id: "subscribe" } } Subscribe
                 %li
-                  %a{href: "#", data: {id: "unsubscribe"}} Unsubscribe
+                  %a{ href: "#", data: { id: "unsubscribe" } } Unsubscribe
 
           = hidden_field_tag 'update[issuable_ids]', []
           = hidden_field_tag :state_event, params[:state_event]
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index bdb00bfa33c..dcc1f3ba676 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -58,7 +58,7 @@
         as resolved. Ask someone with sufficient rights to resolve the them.
 
 - is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?)
-.row-content-block{class: (is_footer ? "footer-block" : "middle-block")}
+.row-content-block{ class: (is_footer ? "footer-block" : "middle-block") }
   - if issuable.new_record?
     = form.submit "Submit #{issuable.class.model_name.human.downcase}", class: 'btn btn-create'
   - else
diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml
index 22b5a6aa11b..93c7fa0c7d6 100644
--- a/app/views/shared/issuable/_label_dropdown.html.haml
+++ b/app/views/shared/issuable/_label_dropdown.html.haml
@@ -19,7 +19,7 @@
     = hidden_field_tag data_options[:field_name], use_id ? label.try(:id) : label.try(:title), id: nil
 
 .dropdown
-  %button.dropdown-menu-toggle.js-label-select.js-multiselect{class: classes.join(' '), type: "button", data: dropdown_data}
+  %button.dropdown-menu-toggle.js-label-select.js-multiselect{ class: classes.join(' '), type: "button", data: dropdown_data }
     %span.dropdown-toggle-text{ class: ("is-default" if selected.nil? || selected.empty?) }
       = multi_label_name(selected, "Labels")
     = icon('chevron-down')
diff --git a/app/views/shared/issuable/_label_page_default.html.haml b/app/views/shared/issuable/_label_page_default.html.haml
index a8f01026ca5..9a8529c6cbb 100644
--- a/app/views/shared/issuable/_label_page_default.html.haml
+++ b/app/views/shared/issuable/_label_page_default.html.haml
@@ -17,7 +17,7 @@
       %ul.dropdown-footer-list
         - if can?(current_user, :admin_label, @project)
           %li
-            %a.dropdown-toggle-page{href: "#"}
+            %a.dropdown-toggle-page{ href: "#" }
               Create new label
         %li
           = link_to namespace_project_labels_path(@project.namespace, @project), :"data-is-link" => true do
diff --git a/app/views/shared/issuable/_milestone_dropdown.html.haml b/app/views/shared/issuable/_milestone_dropdown.html.haml
index 40fe53e6a8d..415361f8fbf 100644
--- a/app/views/shared/issuable/_milestone_dropdown.html.haml
+++ b/app/views/shared/issuable/_milestone_dropdown.html.haml
@@ -3,7 +3,7 @@
 - show_menu_above = show_menu_above || false
 - selected_text = selected.try(:title) || params[:milestone_title]
 - dropdown_title = local_assigns.fetch(:dropdown_title, "Filter by milestone")
-- if selected.present?
+- if selected.present? || params[:milestone_title].present?
   = hidden_field_tag(name, name == :milestone_title ? selected_text : selected.id)
 = dropdown_tag(milestone_dropdown_label(selected_text), options: { title: dropdown_title, toggle_class: "js-milestone-select js-filter-submit #{extra_class}", filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone",
   placeholder: "Search milestones", footer_content: project.present?, data: { show_no: true, show_menu_above: show_menu_above, show_any: show_any, show_upcoming: show_upcoming, field_name: name, selected: selected.try(:title), project_id: project.try(:id), milestones: milestones_filter_dropdown_path, default_label: "Milestone" } }) do
diff --git a/app/views/shared/issuable/_nav.html.haml b/app/views/shared/issuable/_nav.html.haml
index 0af92b59584..1154316c03f 100644
--- a/app/views/shared/issuable/_nav.html.haml
+++ b/app/views/shared/issuable/_nav.html.haml
@@ -3,23 +3,23 @@
 - issuables = @issues || @merge_requests
 
 %ul.nav-links.issues-state-filters
-  %li{class: ("active" if params[:state] == 'opened')}
+  %li{ class: ("active" if 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." do
       #{issuables_state_counter_text(type, :opened)}
 
   - if type == :merge_requests
-    %li{class: ("active" if params[:state] == 'merged')}
+    %li{ class: ("active" if params[:state] == 'merged') }>
       = link_to page_filter_path(state: 'merged', label: true), id: 'state-merged', title: 'Filter by merge requests that are currently merged.' do
         #{issuables_state_counter_text(type, :merged)}
 
-    %li{class: ("active" if params[:state] == 'closed')}
+    %li{ class: ("active" if 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.' do
         #{issuables_state_counter_text(type, :closed)}
   - else
-    %li{class: ("active" if params[:state] == 'closed')}
+    %li{ class: ("active" if params[:state] == 'closed') }>
       = link_to page_filter_path(state: 'closed', label: true), id: 'state-all', title: 'Filter by issues that are currently closed.' do
         #{issuables_state_counter_text(type, :closed)}
 
-  %li{class: ("active" if params[:state] == 'all')}
+  %li{ class: ("active" if params[:state] == 'all') }>
     = link_to page_filter_path(state: 'all', label: true), id: 'state-all', title: "Show all #{page_context_word}." do
       #{issuables_state_counter_text(type, :all)}
diff --git a/app/views/shared/issuable/_participants.html.haml b/app/views/shared/issuable/_participants.html.haml
index 33a9a494857..171da899937 100644
--- a/app/views/shared/issuable/_participants.html.haml
+++ b/app/views/shared/issuable/_participants.html.haml
@@ -13,8 +13,8 @@
       .participants-author.js-participants-author
         = link_to_member(@project, participant, name: false, size: 24)
     - if participants_extra > 0
-      %div.participants-more
-        %a.js-participants-more{href: "#", data: {original_text: "+ #{participants_size - 7} more", less_text: "- show less"}}
+      .participants-more
+        %a.js-participants-more{ href: "#", data: { original_text: "+ #{participants_size - 7} more", less_text: "- show less" } }
           + #{participants_extra} more
 :javascript
   IssuableContext.prototype.PARTICIPANTS_ROW_COUNT = #{participants_row};
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
new file mode 100644
index 00000000000..8d7b1d616f4
--- /dev/null
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -0,0 +1,127 @@
+- type = local_assigns.fetch(:type)
+
+.issues-filters
+  .issues-details-filters.row-content-block.second-block.filtered-search-block
+    = form_tag page_filter_path(without: [:assignee_id, :author_id, :milestone_title, :label_name, :search]), method: :get, class: 'filter-form js-filter-form' do
+      - if params[:search].present?
+        = hidden_field_tag :search, params[:search]
+      - if @bulk_edit
+        .check-all-holder
+          = check_box_tag "check_all_issues", nil, false,
+            class: "check_all_issues left"
+      .issues-other-filters.filtered-search-container
+        .filtered-search-input-container
+          %input.form-control.filtered-search{ placeholder: 'Search or filter results...', 'data-id' => 'filtered-search', 'data-project-id' => @project.id }
+          = icon('filter')
+          %button.clear-search.hidden{ type: 'button' }
+            = icon('times')
+          #js-dropdown-hint.dropdown-menu.hint-dropdown
+            %ul{ 'data-dropdown' => true }
+              %li.filter-dropdown-item{ 'data-value' => '' }
+                %button.btn.btn-link
+                  = icon('search')
+                  %span
+                    Keep typing and press Enter
+            %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
+              %li.filter-dropdown-item
+                %button.btn.btn-link
+                  -# Encapsulate static class name `{{icon}}` inside #{} to bypass
+                  -# haml lint's ClassAttributeWithStaticValue
+                  %i.fa{ class: "#{'{{icon}}'}" }
+                  %span.js-filter-hint
+                    {{hint}}
+                  %span.js-filter-tag.dropdown-light-content
+                    {{tag}}
+          #js-dropdown-author.dropdown-menu
+            %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
+              %li.filter-dropdown-item
+                %button.btn.btn-link.dropdown-user
+                  %img.avatar.avatar-inline{ 'data-src' => '{{avatar_url}}', alt: '{{name}}\'s avatar', width: '30' }
+                  .dropdown-user-details
+                    %span
+                      {{name}}
+                    %span.dropdown-light-content
+                      @{{username}}
+          #js-dropdown-assignee.dropdown-menu
+            %ul{ 'data-dropdown' => true }
+              %li.filter-dropdown-item{ 'data-value' => 'none' }
+                %button.btn.btn-link
+                  No Assignee
+              %li.divider
+            %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
+              %li.filter-dropdown-item
+                %button.btn.btn-link.dropdown-user
+                  %img.avatar.avatar-inline{ 'data-src' => '{{avatar_url}}', alt: '{{name}}\'s avatar', width: '30' }
+                  .dropdown-user-details
+                    %span
+                      {{name}}
+                    %span.dropdown-light-content
+                      @{{username}}
+          #js-dropdown-milestone.dropdown-menu{ 'data-dropdown' => true }
+            %ul{ 'data-dropdown' => true }
+              %li.filter-dropdown-item{ 'data-value' => 'none' }
+                %button.btn.btn-link
+                  No Milestone
+              %li.filter-dropdown-item{ 'data-value' => 'upcoming' }
+                %button.btn.btn-link
+                  Upcoming
+              %li.divider
+            %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
+              %li.filter-dropdown-item
+                %button.btn.btn-link.js-data-value
+                  {{title}}
+          #js-dropdown-label.dropdown-menu{ 'data-dropdown' => true }
+            %ul{ 'data-dropdown' => true }
+              %li.filter-dropdown-item{ 'data-value' => 'none' }
+                %button.btn.btn-link
+                  No Label
+              %li.divider
+            %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
+              %li.filter-dropdown-item
+                %button.btn.btn-link
+                  %span.dropdown-label-box{ style: 'background: {{color}}' }
+                  %span.label-title.js-data-value
+                    {{title}}
+        .pull-right
+          = render 'shared/sort_dropdown'
+
+    - if @bulk_edit
+      .issues_bulk_update.hide
+        = form_tag [:bulk_update, @project.namespace.becomes(Namespace), @project, type], method: :post, class: 'bulk-update'  do
+          .filter-item.inline
+            = dropdown_tag("Status", options: { toggle_class: "js-issue-status", title: "Change status", dropdown_class: "dropdown-menu-status dropdown-menu-selectable", data: { field_name: "update[state_event]" } } ) do
+              %ul
+                %li
+                  %a{ href: "#", data: { id: "reopen" } } Open
+                %li
+                  %a{ href: "#", data: { id: "close" } } Closed
+          .filter-item.inline
+            = dropdown_tag("Assignee", options: { toggle_class: "js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: "Assign to", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
+              placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: "update[assignee_id]" } })
+          .filter-item.inline
+            = dropdown_tag("Milestone", options: { title: "Assign milestone", toggle_class: 'js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update', filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: "Search milestones", data: { show_no: true, field_name: "update[milestone_id]", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), use_id: true } })
+          .filter-item.inline.labels-filter
+            = render "shared/issuable/label_dropdown", classes: ['js-filter-bulk-update', 'js-multiselect'], show_create: false, show_footer: false, extra_options: false, filter_submit: false, data_options: { persist_when_hide: "true", field_name: "update[label_ids][]", show_no: false, show_any: false, use_id: true }
+          .filter-item.inline
+            = dropdown_tag("Subscription", options: { toggle_class: "js-subscription-event", title: "Change subscription", dropdown_class: "dropdown-menu-selectable", data: { field_name: "update[subscription_event]" } } ) do
+              %ul
+                %li
+                  %a{ href: "#", data: { id: "subscribe" } } Subscribe
+                %li
+                  %a{ href: "#", data: { id: "unsubscribe" } } Unsubscribe
+
+          = hidden_field_tag 'update[issuable_ids]', []
+          = hidden_field_tag :state_event, params[:state_event]
+          .filter-item.inline
+            = button_tag "Update #{type.to_s.humanize(capitalize: false)}", class: "btn update_selected_issues btn-save"
+
+:javascript
+  new UsersSelect();
+  new LabelsSelect();
+  new MilestoneSelect();
+  new IssueStatusSelect();
+  new SubscriptionSelect();
+  $('form.filter-form').on('submit', function (event) {
+    event.preventDefault();
+    Turbolinks.visit(this.action + '&' + $(this).serialize());
+  });
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 958f8413e1d..ec9bcaf63dd 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -1,5 +1,7 @@
 - todo = issuable_todo(issuable)
-%aside.right-sidebar{ class: sidebar_gutter_collapsed_class }
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('issuable/issuable_bundle.js')
+%aside.right-sidebar{ class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
   .issuable-sidebar
     - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
     .block.issuable-sidebar-header
@@ -17,9 +19,9 @@
               Add todo
           = icon('spin spinner', class: 'hidden js-issuable-todo-loading')
 
-    = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, format: :json, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
+    = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, format: :json, html: { class: 'issuable-context-form inline-update js-issuable-update' } do |f|
       .block.assignee
-        .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" }, title: (issuable.assignee.name if issuable.assignee) }
           - if issuable.assignee
             = link_to_member(@project, issuable.assignee, size: 24)
           - else
@@ -54,7 +56,7 @@
           = icon('clock-o')
           %span
             - if issuable.milestone
-              %span.has-tooltip{title: milestone_remaining_days(issuable.milestone), data: {container: 'body', html: 1, placement: 'left'}}
+              %span.has-tooltip{ title: milestone_remaining_days(issuable.milestone), data: { container: 'body', html: 1, placement: 'left' } }
                 = issuable.milestone.title
             - else
               None
@@ -72,7 +74,13 @@
         .selectbox.hide-collapsed
           = f.hidden_field 'milestone_id', value: issuable.milestone_id, id: nil
           = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true }})
-
+      - if issuable.has_attribute?(:time_estimate)
+        #issuable-time-tracker.block
+          %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent', 'stopwatch-svg' => custom_icon('icon_stopwatch'), 'docs-url' => help_page_path('workflow/time_tracking.md') }
+            // Fallback while content is loading
+            .title.hide-collapsed
+              Time tracking
+              = icon('spinner spin')
       - if issuable.has_attribute?(:due_date)
         .block.due_date
           .sidebar-collapsed-icon
@@ -97,7 +105,7 @@
                   remove due date
           - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
             .selectbox.hide-collapsed
-              = f.hidden_field :due_date, value: issuable.due_date
+              = 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) } }
                   %span.dropdown-toggle-text Due date
@@ -129,8 +137,8 @@
             - 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(:path), project_path: @project.try(:path), issue_update: issuable_json_path(issuable), labels: (namespace_project_labels_path(@project.namespace, @project, :json) if @project)}}
-                %span.dropdown-toggle-text{ class: ("is-default" if selected_labels.empty?)}
+              %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(:path), project_path: @project.try(:path), issue_update: issuable_json_path(issuable), labels: (namespace_project_labels_path(@project.namespace, @project, :json) if @project) } }
+                %span.dropdown-toggle-text{ class: ("is-default" if selected_labels.empty?) }
                   = multi_label_name(selected_labels, "Labels")
                 = icon('chevron-down')
               .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
@@ -141,7 +149,7 @@
       = render "shared/issuable/participants", participants: issuable.participants(current_user)
       - if current_user
         - subscribed = issuable.subscribed?(current_user, @project)
-        .block.light.subscription{data: {url: toggle_subscription_path(issuable)}}
+        .block.light.subscription{ data: { url: toggle_subscription_path(issuable) } }
           .sidebar-collapsed-icon
             = icon('rss')
           %span.issuable-header-text.hide-collapsed.pull-left
@@ -153,18 +161,20 @@
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference
         .sidebar-collapsed-icon.dont-change-state
-          = clipboard_button(clipboard_text: project_ref)
+          = clipboard_button(clipboard_text: project_ref, title: "Copy reference to clipboard", placement: "left")
         .cross-project-reference.hide-collapsed
           %span
             Reference:
-            %cite{title: project_ref}
+            %cite{ title: project_ref }
               = project_ref
-          = clipboard_button(clipboard_text: project_ref)
+          = clipboard_button(clipboard_text: project_ref, title: "Copy reference to clipboard", placement: "left")
 
     :javascript
+      gl.IssuableResource = new gl.SubbableResource('#{issuable_json_path(issuable)}');
+      new gl.IssuableTimeTracking("#{escape_javascript(serialize_issuable(issuable))}");
       new MilestoneSelect('{"namespace":"#{@project.namespace.path}","path":"#{@project.path}"}');
       new LabelsSelect();
       new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
       gl.Subscription.bindAll('.subscription');
       new gl.DueDateSelectors();
-      sidebar = new Sidebar();
+      window.sidebar = new Sidebar();
diff --git a/app/views/shared/members/_access_request_buttons.html.haml b/app/views/shared/members/_access_request_buttons.html.haml
index e166dfab710..fb795ad1c72 100644
--- a/app/views/shared/members/_access_request_buttons.html.haml
+++ b/app/views/shared/members/_access_request_buttons.html.haml
@@ -1,16 +1,17 @@
 - model_name = source.model_name.to_s.downcase
 
-- if can?(current_user, :"destroy_#{model_name}_member", source.members.find_by(user_id: current_user.id))
-  = link_to "Leave #{model_name}", polymorphic_path([:leave, source, :members]),
-            method: :delete,
-            data: { confirm: leave_confirmation_message(source) },
-            class: 'btn'
-- elsif requester = source.requesters.find_by(user_id: current_user.id)
-  = link_to 'Withdraw Access Request', polymorphic_path([:leave, source, :members]),
-            method: :delete,
-            data: { confirm: remove_member_message(requester) },
-            class: 'btn'
-- elsif source.request_access_enabled && can?(current_user, :request_access, source)
-  = link_to 'Request Access', polymorphic_path([:request_access, source, :members]),
-            method: :post,
-            class: 'btn'
+.project-action-button.inline
+  - if can?(current_user, :"destroy_#{model_name}_member", source.members.find_by(user_id: current_user.id))
+    = link_to "Leave #{model_name}", polymorphic_path([:leave, source, :members]),
+              method: :delete,
+              data: { confirm: leave_confirmation_message(source) },
+              class: 'btn'
+  - elsif requester = source.requesters.find_by(user_id: current_user.id)
+    = link_to 'Withdraw Access Request', polymorphic_path([:leave, source, :members]),
+              method: :delete,
+              data: { confirm: remove_member_message(requester) },
+              class: 'btn'
+  - elsif source.request_access_enabled && can?(current_user, :request_access, source)
+    = link_to 'Request Access', polymorphic_path([:request_access, source, :members]),
+              method: :post,
+              class: 'btn'
diff --git a/app/views/shared/members/_group.html.haml b/app/views/shared/members/_group.html.haml
index 8928de9097b..81b5bc1de30 100644
--- a/app/views/shared/members/_group.html.haml
+++ b/app/views/shared/members/_group.html.haml
@@ -3,7 +3,7 @@
 - can_admin_member = can?(current_user, :admin_project_member, @project)
 - dom_id = "group_member_#{group_link.id}"
 %li.member.group_member{ id: dom_id }
-  %span{ class: "list-item-name" }
+  %span.list-item-name
     = image_tag group_icon(group), class: "avatar s40", alt: ''
     %strong
       = link_to group.name, group_path(group)
@@ -37,7 +37,6 @@
         %i.clear-icon.js-clear-input
     - if can_admin_member
       = link_to namespace_project_group_link_path(@project.namespace, @project, group_link),
-        remote: true,
         method: :delete,
         data: { confirm: "Are you sure you want to remove #{group.name}?" },
         class: 'btn btn-remove prepend-left-10' do
diff --git a/app/views/shared/members/_sort_dropdown.html.haml b/app/views/shared/members/_sort_dropdown.html.haml
new file mode 100644
index 00000000000..bad0891f9f2
--- /dev/null
+++ b/app/views/shared/members/_sort_dropdown.html.haml
@@ -0,0 +1,9 @@
+.dropdown.inline.member-sort-dropdown
+  = dropdown_toggle(member_sort_options_hash[@sort], { toggle: 'dropdown' })
+  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+    %li.dropdown-header
+      Sort by
+    - member_sort_options_hash.each do |value, title|
+      %li
+        = link_to filter_group_project_member_path(sort: value), class: ("is-active" if @sort == value) do
+          = title
diff --git a/app/views/shared/milestones/_issuable.html.haml b/app/views/shared/milestones/_issuable.html.haml
index 9e1b0379428..51c195ffbcd 100644
--- a/app/views/shared/milestones/_issuable.html.haml
+++ b/app/views/shared/milestones/_issuable.html.haml
@@ -14,15 +14,15 @@
     - if issuable.is_a?(Issue)
       = confidential_icon(issuable)
     = link_to_gfm issuable.title, [project.namespace.becomes(Namespace), project, issuable], title: issuable.title
-  %div{class: 'issuable-detail'}
+  .issuable-detail
     = link_to [project.namespace.becomes(Namespace), project, issuable] do
-      %span{ class: 'issuable-number' }>= issuable.to_reference
+      %span.issuable-number >= issuable.to_reference
 
     - issuable.labels.each do |label|
       = link_to polymorphic_path(base_url_args, { milestone_title: @milestone.title, label_name: label.title, state: 'all' }) do
         - render_colored_label(label)
 
-    %span{ class: "assignee-icon" }
+    %span.assignee-icon
       - if assignee
         = link_to polymorphic_path(base_url_args, { milestone_title: @milestone.title, assignee_id: issuable.assignee_id, state: 'all' }),
                   class: 'has-tooltip', title: "Assigned to #{assignee.name}", data: { container: 'body' } do
diff --git a/app/views/shared/milestones/_issuables.html.haml b/app/views/shared/milestones/_issuables.html.haml
index 8619939dde7..c8fd45c4319 100644
--- a/app/views/shared/milestones/_issuables.html.haml
+++ b/app/views/shared/milestones/_issuables.html.haml
@@ -3,10 +3,13 @@
 - panel_class = primary ? 'panel-primary' : 'panel-default'
 
 .panel{ class: panel_class }
-  .panel-heading
-    = title
+  .panel-heading.split
+    .left
+      = title
     - if show_counter
-      .pull-right= issuables.size
+      .right
+        = issuables.size
+      .pull-right= number_with_delimiter(issuables.size)
 
   - class_prefix = dom_class(issuables).pluralize
   %ul{ class: "well-list #{class_prefix}-sortable-list", id: "#{class_prefix}-list-#{id}", "data-state" => id }
diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml
index 3dccfb147bf..9e6a76e1ddb 100644
--- a/app/views/shared/milestones/_milestone.html.haml
+++ b/app/views/shared/milestones/_milestone.html.haml
@@ -1,7 +1,7 @@
 - dashboard = local_assigns[:dashboard]
 - custom_dom_id = dom_id(@project ? milestone : milestone.milestones.first)
 
-%li{class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: custom_dom_id }
+%li{ class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: custom_dom_id }
   .row
     .col-sm-6
       %strong= link_to_gfm truncate(milestone.title, length: 100), milestone_path
@@ -9,7 +9,7 @@
       .pull-right.light #{milestone.percent_complete(current_user)}% complete
   .row
     .col-sm-6
-      = link_to pluralize(milestone.issues_visible_to_user(current_user).size, 'Issue'), issues_path
+      = link_to pluralize(milestone.total_issues_count(current_user), 'Issue'), issues_path
       &middot;
       = link_to pluralize(milestone.merge_requests.size, 'Merge Request'), merge_requests_path
     .col-sm-6= milestone_progress_bar(milestone)
diff --git a/app/views/shared/milestones/_tabs.html.haml b/app/views/shared/milestones/_tabs.html.haml
index 2b6ce2d7e7a..c8f2319d95a 100644
--- a/app/views/shared/milestones/_tabs.html.haml
+++ b/app/views/shared/milestones/_tabs.html.haml
@@ -21,7 +21,7 @@
 
 .tab-content.milestone-content
   .tab-pane.active#tab-issues
-    = render 'shared/milestones/issues_tab', issues: milestone.issues_visible_to_user(current_user), show_project_name: show_project_name, show_full_project_name: show_full_project_name
+    = render 'shared/milestones/issues_tab', issues: milestone.issues_visible_to_user(current_user).include_associations, show_project_name: show_project_name, show_full_project_name: show_full_project_name
   .tab-pane#tab-merge-requests
     = render 'shared/milestones/merge_requests_tab', merge_requests: milestone.merge_requests, show_project_name: show_project_name, show_full_project_name: show_full_project_name
   .tab-pane#tab-participants
diff --git a/app/views/shared/notifications/_button.html.haml b/app/views/shared/notifications/_button.html.haml
index fbad0d05de3..1d072c16b32 100644
--- a/app/views/shared/notifications/_button.html.haml
+++ b/app/views/shared/notifications/_button.html.haml
@@ -1,5 +1,5 @@
 - if notification_setting
-  .dropdown.notification-dropdown
+  .js-notification-dropdown.notification-dropdown.project-action-button.dropdown.inline
     = form_for notification_setting, remote: true, html: { class: "inline notification-form" } do |f|
       = hidden_setting_source_input(notification_setting)
       = f.hidden_field :level, class: "notification_setting_level"
diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml
index a82fc95df84..b5c0a7fd6d4 100644
--- a/app/views/shared/notifications/_custom_notifications.html.haml
+++ b/app/views/shared/notifications/_custom_notifications.html.haml
@@ -18,7 +18,7 @@
                 %p
                   Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out
                   = succeed "." do
-                    %a{ href: "http://docs.gitlab.com/ce/workflow/notifications.html", target: "_blank"} notification emails
+                    %a{ href: "http://docs.gitlab.com/ce/workflow/notifications.html", target: "_blank" } notification emails
               .col-lg-8
                 - NotificationSetting::EMAIL_EVENTS.each_with_index do |event, index|
                   - field_id = "#{notifications_menu_identifier("modal", notification_setting)}_notification_setting[#{event}]"
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 264391fe84f..4a27965754d 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -25,7 +25,7 @@
         %span
           = icon('star')
           = number_with_delimiter(project.star_count)
-      %span.visibility-icon.has-tooltip{data: { container: 'body', placement: 'left' }, title: visibility_icon_description(project)}
+      %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(project) }
         = visibility_level_icon(project.visibility_level, fw: true)
 
     .title
diff --git a/app/views/shared/snippets/_blob.html.haml b/app/views/shared/snippets/_blob.html.haml
index dcdba01aee9..ad5c0c2d8c8 100644
--- a/app/views/shared/snippets/_blob.html.haml
+++ b/app/views/shared/snippets/_blob.html.haml
@@ -1,6 +1,6 @@
 - unless @snippet.content.empty?
   - if markup?(@snippet.file_name)
-    %textarea.markdown-snippet-copy.blob-content{data: {blob_id: @snippet.id}}
+    %textarea.markdown-snippet-copy.blob-content{ data: { blob_id: @snippet.id } }
       = @snippet.content
     .file-content.wiki
       - if gitlab_markdown?(@snippet.file_name)
diff --git a/app/views/shared/tokens/_scopes_form.html.haml b/app/views/shared/tokens/_scopes_form.html.haml
new file mode 100644
index 00000000000..5074afb63a1
--- /dev/null
+++ b/app/views/shared/tokens/_scopes_form.html.haml
@@ -0,0 +1,9 @@
+- scopes = local_assigns.fetch(:scopes)
+- prefix = local_assigns.fetch(:prefix)
+- token = local_assigns.fetch(:token)
+
+- 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])})"
diff --git a/app/views/shared/tokens/_scopes_list.html.haml b/app/views/shared/tokens/_scopes_list.html.haml
new file mode 100644
index 00000000000..f99e905e95c
--- /dev/null
+++ b/app/views/shared/tokens/_scopes_list.html.haml
@@ -0,0 +1,13 @@
+- token = local_assigns.fetch(:token)
+
+- return unless token.scopes.present?
+
+%tr
+  %td
+    Scopes
+  %td
+    %ul.scopes-list.append-bottom-0
+      - token.scopes.each do |scope|
+        %li
+          %span.scope-name= scope
+          = "(#{t(scope, scope: [:doorkeeper, :scopes])})"
diff --git a/app/views/sherlock/file_samples/show.html.haml b/app/views/sherlock/file_samples/show.html.haml
index 94d4dd4fa7d..92151176fce 100644
--- a/app/views/sherlock/file_samples/show.html.haml
+++ b/app/views/sherlock/file_samples/show.html.haml
@@ -41,7 +41,7 @@
             %th= t('sherlock.percent')
         %tbody
           - @file_sample.line_samples.each_with_index do |sample, index|
-            %tr{class: sample.majority_of?(@file_sample.duration) ? 'slow' : ''}
+            %tr{ class: sample.majority_of?(@file_sample.duration) ? 'slow' : '' }
               %td= index + 1
               %td= sample.events
               %td
diff --git a/app/views/sherlock/queries/_general.html.haml b/app/views/sherlock/queries/_general.html.haml
index 7073c0f4d90..5a447f791dc 100644
--- a/app/views/sherlock/queries/_general.html.haml
+++ b/app/views/sherlock/queries/_general.html.haml
@@ -26,7 +26,7 @@
   .panel.panel-default
     .panel-heading
       .pull-right
-        %button.js-clipboard-trigger.btn.btn-xs{title: t('sherlock.copy_to_clipboard'), type: :button}
+        %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button }
           %i.fa.fa-clipboard
         %pre.hidden
           = @query.formatted_query
@@ -41,7 +41,7 @@
   .panel.panel-default
     .panel-heading
       .pull-right
-        %button.js-clipboard-trigger.btn.btn-xs{title: t('sherlock.copy_to_clipboard'), type: :button}
+        %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button }
           %i.fa.fa-clipboard
         %pre.hidden
           = @query.explain
diff --git a/app/views/sherlock/queries/show.html.haml b/app/views/sherlock/queries/show.html.haml
index fc2863dca8e..c45da6ee9a4 100644
--- a/app/views/sherlock/queries/show.html.haml
+++ b/app/views/sherlock/queries/show.html.haml
@@ -3,10 +3,10 @@
 
 %ul.nav-links
   %li.active
-    %a(href="#tab-general" data-toggle="tab")
+    %a{ href: "#tab-general", data: { toggle: "tab" } }
       = t('sherlock.general')
   %li
-    %a(href="#tab-backtrace" data-toggle="tab")
+    %a{ href: "#tab-backtrace", data: { toggle: "tab" } }
       = t('sherlock.backtrace')
 
 .row-content-block
diff --git a/app/views/sherlock/transactions/index.html.haml b/app/views/sherlock/transactions/index.html.haml
index da969c02765..bc05659dfa8 100644
--- a/app/views/sherlock/transactions/index.html.haml
+++ b/app/views/sherlock/transactions/index.html.haml
@@ -28,7 +28,7 @@
           %tr
             %td= trans.type
             %td
-              %span{title: trans.path}
+              %span{ title: trans.path }
                 = truncate(trans.path, length: 70)
             %td
               = trans.duration.round(2)
diff --git a/app/views/sherlock/transactions/show.html.haml b/app/views/sherlock/transactions/show.html.haml
index 8aa6b437d95..eab91e8fbe4 100644
--- a/app/views/sherlock/transactions/show.html.haml
+++ b/app/views/sherlock/transactions/show.html.haml
@@ -3,15 +3,15 @@
 
 %ul.nav-links
   %li.active
-    %a(href="#tab-general" data-toggle="tab")
+    %a{ href: "#tab-general", data: { toggle: "tab" } }
       = t('sherlock.general')
   %li
-    %a(href="#tab-queries" data-toggle="tab")
+    %a{ href: "#tab-queries", data: { toggle: "tab" } }
       = t('sherlock.queries')
       %span.badge
         #{@transaction.queries.length}
   %li
-    %a(href="#tab-file-samples" data-toggle="tab")
+    %a{ href: "#tab-file-samples", data: { toggle: "tab" } }
       = t('sherlock.file_samples')
       %span.badge
         #{@transaction.file_samples.length}
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index 27d7a6c5bb6..837a1a0cc8c 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -7,9 +7,9 @@
     = blob_icon 0, @snippet.file_name
     = @snippet.file_name
     .file-actions
-      = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
+      = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']", class: "btn btn-sm")
       = link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
       = link_to 'Download', download_snippet_path(@snippet), class: "btn btn-sm"
   = render 'shared/snippets/blob'
 
-= render 'award_emoji/awards_block', awardable: @snippet, inline: true
\ No newline at end of file
+= render 'award_emoji/awards_block', awardable: @snippet, inline: true
diff --git a/app/views/u2f/_authenticate.html.haml b/app/views/u2f/_authenticate.html.haml
index 232ca26c1af..f878bece2fa 100644
--- a/app/views/u2f/_authenticate.html.haml
+++ b/app/views/u2f/_authenticate.html.haml
@@ -1,30 +1,21 @@
 #js-authenticate-u2f
+%a.btn.btn-block.btn-info#js-login-2fa-device{ href: '#' } Sign in via 2FA code
 
 %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-setup{ type: "text/template" }
-  %div
-    %p Insert your security key (if you haven't already), and press the button below.
-    %a.btn.btn-info#js-login-u2f-device{ href: 'javascript:void(0)' } Sign in via U2F device
-
 %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.
 
 %script#js-authenticate-u2f-error{ type: "text/template" }
   %div
-    %p <%= error_message %>
-    %a.btn.btn-warning#js-u2f-try-again Try again?
+    %p <%= error_message %> (error code: <%= error_code %>)
+    %a.btn.btn-block.btn-warning#js-u2f-try-again Try again?
 
 %script#js-authenticate-u2f-authenticated{ type: "text/template" }
   %div
-    %p We heard back from your U2F device. Click this button to authenticate with the GitLab server.
-    = form_tag(new_user_session_path, method: :post) do |f|
+    %p We heard back from your U2F device. You have been authenticated.
+    = form_tag(new_user_session_path, method: :post, id: 'js-login-u2f-form') do |f|
       - resource_params = params[resource_name].presence || params
       = hidden_field_tag 'user[remember_me]', resource_params.fetch(:remember_me, 0)
       = hidden_field_tag 'user[device_response]', nil, class: 'form-control', required: true, id: "js-device-response"
-      = submit_tag "Authenticate via U2F Device", class: "btn btn-success"
-
-:javascript
-  var u2fAuthenticate = new U2FAuthenticate($("#js-authenticate-u2f"), gon.u2f);
-  u2fAuthenticate.start();
diff --git a/app/views/u2f/_register.html.haml b/app/views/u2f/_register.html.haml
index 8f7b42eb351..adc07bcba73 100644
--- a/app/views/u2f/_register.html.haml
+++ b/app/views/u2f/_register.html.haml
@@ -23,11 +23,11 @@
 %script#js-register-u2f-error{ type: "text/template" }
   %div
     %p
-      %span <%= error_message %>
+      %span <%= error_message %> (error code: <%= error_code %>)
     %a.btn.btn-warning#js-u2f-try-again Try again?
 
 %script#js-register-u2f-registered{ type: "text/template" }
-  %div.row.append-bottom-10
+  .row.append-bottom-10
     .col-md-12
       %p Your device was successfully set up! Give it a name and register it with the GitLab server.
       = form_tag(create_u2f_profile_two_factor_auth_path, method: :post) do
diff --git a/app/views/users/calendar.html.haml b/app/views/users/calendar.html.haml
index 09ff8a76d27..6228245d8d0 100644
--- a/app/views/users/calendar.html.haml
+++ b/app/views/users/calendar.html.haml
@@ -6,4 +6,4 @@
   new Calendar(
     #{@activity_dates.to_json},
     '#{user_calendar_activities_path}'
-  );
\ No newline at end of file
+  );
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 1e0752bd3c3..fb25eed4f37 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -18,11 +18,11 @@
       - elsif current_user
         - if @user.abuse_report
           %button.btn.btn-danger{ title: 'Already reported for abuse',
-            data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }}
+            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',
-            title: 'Report abuse', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+            title: 'Report abuse', data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
             = icon('exclamation-circle')
       - if current_user
         = link_to user_path(@user, :atom, { private_token: current_user.private_token }), class: 'btn btn-gray' do
@@ -101,12 +101,12 @@
     .tab-content
       #activity.tab-pane
         .row-content-block.calender-block.white.second-block.hidden-xs
-          .user-calendar{data: {href: user_calendar_path}}
+          .user-calendar{ data: { href: user_calendar_path } }
             %h4.center.light
               %i.fa.fa-spinner.fa-spin
           .user-calendar-activities
 
-        .content_list{ data: {href: user_path} }
+        .content_list{ data: { href: user_path } }
         = spinner
 
       #groups.tab-pane
diff --git a/app/workers/authorized_projects_worker.rb b/app/workers/authorized_projects_worker.rb
index fccddb70d18..2badd0680fb 100644
--- a/app/workers/authorized_projects_worker.rb
+++ b/app/workers/authorized_projects_worker.rb
@@ -2,8 +2,6 @@ class AuthorizedProjectsWorker
   include Sidekiq::Worker
   include DedicatedSidekiqQueue
 
-  LEASE_TIMEOUT = 1.minute.to_i
-
   def self.bulk_perform_async(args_list)
     Sidekiq::Client.push_bulk('class' => self, 'args' => args_list)
   end
@@ -11,24 +9,6 @@ class AuthorizedProjectsWorker
   def perform(user_id)
     user = User.find_by(id: user_id)
 
-    refresh(user) if user
-  end
-
-  def refresh(user)
-    lease_key = "refresh_authorized_projects:#{user.id}"
-    lease = Gitlab::ExclusiveLease.new(lease_key, timeout: LEASE_TIMEOUT)
-
-    until uuid = lease.try_obtain
-      # Keep trying until we obtain the lease. If we don't do so we may end up
-      # not updating the list of authorized projects properly. To prevent
-      # hammering Redis too much we'll wait for a bit between retries.
-      sleep(1)
-    end
-
-    begin
-      user.refresh_authorized_projects
-    ensure
-      Gitlab::ExclusiveLease.cancel(lease_key, uuid)
-    end
+    user.refresh_authorized_projects if user
   end
 end
diff --git a/app/workers/project_cache_worker.rb b/app/workers/project_cache_worker.rb
index 27d7e652721..8ff9d07860f 100644
--- a/app/workers/project_cache_worker.rb
+++ b/app/workers/project_cache_worker.rb
@@ -6,26 +6,27 @@ class ProjectCacheWorker
   LEASE_TIMEOUT = 15.minutes.to_i
 
   # project_id - The ID of the project for which to flush the cache.
-  # refresh - An Array containing extra types of data to refresh such as
-  #           `:readme` to flush the README and `:changelog` to flush the
-  #           CHANGELOG.
-  def perform(project_id, refresh = [])
+  # files - An Array containing extra types of files to refresh such as
+  #         `:readme` to flush the README and `:changelog` to flush the
+  #         CHANGELOG.
+  # statistics - An Array containing columns from ProjectStatistics to
+  #              refresh, if empty all columns will be refreshed
+  def perform(project_id, files = [], statistics = [])
     project = Project.find_by(id: project_id)
 
     return unless project && project.repository.exists?
 
-    update_repository_size(project)
-    project.update_commit_count
+    update_statistics(project, statistics.map(&:to_sym))
 
-    project.repository.refresh_method_caches(refresh.map(&:to_sym))
+    project.repository.refresh_method_caches(files.map(&:to_sym))
   end
 
-  def update_repository_size(project)
-    return unless try_obtain_lease_for(project.id, :update_repository_size)
+  def update_statistics(project, statistics = [])
+    return unless try_obtain_lease_for(project.id, :update_statistics)
 
-    Rails.logger.info("Updating repository size for project #{project.id}")
+    Rails.logger.info("Updating statistics for project #{project.id}")
 
-    project.update_repository_size
+    project.statistics.refresh!(only: statistics)
   end
 
   private
diff --git a/app/workers/reactive_caching_worker.rb b/app/workers/reactive_caching_worker.rb
new file mode 100644
index 00000000000..18b8daf4e1e
--- /dev/null
+++ b/app/workers/reactive_caching_worker.rb
@@ -0,0 +1,15 @@
+class ReactiveCachingWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  def perform(class_name, id, *args)
+    klass = begin
+      Kernel.const_get(class_name)
+    rescue NameError
+      nil
+    end
+    return unless klass
+
+    klass.find_by(id: id).try(:exclusively_update_reactive_cache!, *args)
+  end
+end
diff --git a/app/workers/use_key_worker.rb b/app/workers/use_key_worker.rb
new file mode 100644
index 00000000000..c9d382cc5d6
--- /dev/null
+++ b/app/workers/use_key_worker.rb
@@ -0,0 +1,13 @@
+class UseKeyWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  def perform(key_id)
+    key = Key.find(key_id)
+    key.touch(:last_used_at)
+  rescue ActiveRecord::RecordNotFound
+    Rails.logger.error("UseKeyWorker: couldn't find key with ID=#{key_id}, skipping job")
+
+    false
+  end
+end