Merge branch 'master' into 'dm-copy-mr-source-branch-as-gfm'dm-copy-mr-source-branch-as-gfm

# Conflicts:
#   app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js

202 files changed, 2238 insertions, 1886 deletions

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 88d536fa9b3..7fbfda4a5a8 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -408,9 +408,6 @@ rake gitlab:assets:compile:
     - webpack-report/
 
 rake karma:
-  cache:
-    paths:
-      - vendor/ruby
   stage: test
   <<: *use-pg
   <<: *dedicated-runner
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
index 222084deee9..dec1704395e 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
@@ -33,7 +33,7 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
             <span>
               {{ __('FirstPushedBy|First') }}
               <span class="commit-icon">${iconCommit}</span>
-              <a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
+              <a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{ commit.shortSha }}</a>
               {{ __('FirstPushedBy|pushed by') }}
               <a :href="commit.author.webUrl" class="commit-author-link">
                 {{ commit.author.name }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
index b1e9362434f..1f7c673b1d4 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
@@ -26,9 +26,9 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
             <h5 class="item-title">
               <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
               <i class="fa fa-code-fork"></i>
-              <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+              <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
               <span class="icon-branch">${iconBranch}</span>
-              <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
             </h5>
             <span>
               <a :href="build.url" class="build-date">{{ build.date }}</a>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js
index e306026429e..78cc97eea0b 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js
@@ -29,9 +29,9 @@ global.cycleAnalytics.StageTestComponent = Vue.extend({
               &middot;
               <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
               <i class="fa fa-code-fork"></i>
-              <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+              <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
               <span class="icon-branch">${iconBranch}</span>
-              <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
             </h5>
             <span>
               <a :href="build.url" class="issue-date">
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 43ad127a4db..1a791395d6f 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -14,7 +14,6 @@
 /* global NotificationsForm */
 /* global TreeView */
 /* global NotificationsDropdown */
-/* global UsersSelect */
 /* global GroupAvatar */
 /* global LineHighlighter */
 /* global ProjectFork */
@@ -52,6 +51,7 @@ import ShortcutsWiki from './shortcuts_wiki';
 import Pipelines from './pipelines';
 import BlobViewer from './blob/viewer/index';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
+import UsersSelect from './users_select';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -113,6 +113,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:boards:show':
         case 'projects:boards:index':
           shortcut_handler = new ShortcutsNavigation();
+          new UsersSelect();
           break;
         case 'projects:builds:show':
           new Build();
@@ -127,6 +128,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
             prefixId: page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_',
           });
           shortcut_handler = new ShortcutsNavigation();
+          new UsersSelect();
           break;
         case 'projects:issues:show':
           new Issue();
@@ -139,6 +141,10 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new Milestone();
           new Sidebar();
           break;
+        case 'groups:issues':
+        case 'groups:merge_requests':
+          new UsersSelect();
+          break;
         case 'dashboard:todos:index':
           new gl.Todos();
           break;
@@ -223,6 +229,10 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'dashboard:activity':
           new gl.Activities();
           break;
+        case 'dashboard:issues':
+        case 'dashboard:merge_requests':
+          new UsersSelect();
+          break;
         case 'projects:commit:show':
           new Commit();
           new gl.Diff();
@@ -377,6 +387,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new LineHighlighter();
           new BlobViewer();
           break;
+        case 'import:fogbugz:new_user_map':
+          new UsersSelect();
+          break;
       }
       switch (path.first()) {
         case 'sessions':
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index 834b98e8601..4520e990e6f 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -1,8 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, comma-dangle, quotes, prefer-arrow-callback, consistent-return, one-var, no-var, one-var-declaration-per-line, no-underscore-dangle, max-len */
-/* global UsersSelect */
 /* global bp */
 
 import Cookies from 'js-cookie';
+import UsersSelect from './users_select';
 
 (function() {
   this.IssuableContext = (function() {
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index 544fc91876a..4310663e0b6 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -1,11 +1,12 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, quotes, object-shorthand, no-unused-vars, comma-dangle, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, max-len */
 /* global GitLab */
-/* global UsersSelect */
 /* global ZenMode */
 /* global Autosave */
 /* global dateFormat */
 /* global Pikaday */
 
+import UsersSelect from './users_select';
+
 (function() {
   this.IssuableForm = (function() {
     IssuableForm.prototype.issueMoveConfirmMsg = 'Are you sure you want to move this issue to another project?';
diff --git a/app/assets/javascripts/issue_show/actions/tasks.js b/app/assets/javascripts/issue_show/actions/tasks.js
deleted file mode 100644
index 0740a9f559c..00000000000
--- a/app/assets/javascripts/issue_show/actions/tasks.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export default (newStateData, tasks) => {
-  const $tasks = $('#task_status');
-  const $tasksShort = $('#task_status_short');
-  const $issueableHeader = $('.issuable-header');
-  const tasksStates = { newState: null, currentState: null };
-
-  if ($tasks.length === 0) {
-    if (!(newStateData.task_status.indexOf('0 of 0') === 0)) {
-      $issueableHeader.append(`<span id="task_status">${newStateData.task_status}</span>`);
-    } else {
-      $issueableHeader.append('<span id="task_status"></span>');
-    }
-  } else {
-    tasksStates.newState = newStateData.task_status.indexOf('0 of 0') === 0;
-    tasksStates.currentState = tasks.indexOf('0 of 0') === 0;
-  }
-
-  if ($tasks.length !== 0 && !tasksStates.newState) {
-    $tasks.text(newStateData.task_status);
-    $tasksShort.text(newStateData.task_status);
-  } else if (tasksStates.currentState) {
-    $issueableHeader.append(`<span id="task_status">${newStateData.task_status}</span>`);
-  } else if (tasksStates.newState) {
-    $tasks.remove();
-    $tasksShort.remove();
-  }
-};
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
new file mode 100644
index 00000000000..770a0dcd27e
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -0,0 +1,96 @@
+<script>
+import Visibility from 'visibilityjs';
+import Poll from '../../lib/utils/poll';
+import Service from '../services/index';
+import Store from '../stores';
+import titleComponent from './title.vue';
+import descriptionComponent from './description.vue';
+
+export default {
+  props: {
+    endpoint: {
+      required: true,
+      type: String,
+    },
+    canUpdate: {
+      required: true,
+      type: Boolean,
+    },
+    issuableRef: {
+      type: String,
+      required: true,
+    },
+    initialTitle: {
+      type: String,
+      required: true,
+    },
+    initialDescriptionHtml: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    initialDescriptionText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    const store = new Store({
+      titleHtml: this.initialTitle,
+      descriptionHtml: this.initialDescriptionHtml,
+      descriptionText: this.initialDescriptionText,
+    });
+
+    return {
+      store,
+      state: store.state,
+    };
+  },
+  components: {
+    descriptionComponent,
+    titleComponent,
+  },
+  created() {
+    const resource = new Service(this.endpoint);
+    const poll = new Poll({
+      resource,
+      method: 'getData',
+      successCallback: (res) => {
+        this.store.updateState(res.json());
+      },
+      errorCallback(err) {
+        throw new Error(err);
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        poll.restart();
+      } else {
+        poll.stop();
+      }
+    });
+  },
+};
+</script>
+
+<template>
+  <div>
+    <title-component
+      :issuable-ref="issuableRef"
+      :title-html="state.titleHtml"
+      :title-text="state.titleText" />
+    <description-component
+      v-if="state.descriptionHtml"
+      :can-update="canUpdate"
+      :description-html="state.descriptionHtml"
+      :description-text="state.descriptionText"
+      :updated-at="state.updatedAt"
+      :task-status="state.taskStatus" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
new file mode 100644
index 00000000000..4ad3eb7dfd7
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -0,0 +1,105 @@
+<script>
+  import animateMixin from '../mixins/animate';
+
+  export default {
+    mixins: [animateMixin],
+    props: {
+      canUpdate: {
+        type: Boolean,
+        required: true,
+      },
+      descriptionHtml: {
+        type: String,
+        required: true,
+      },
+      descriptionText: {
+        type: String,
+        required: true,
+      },
+      updatedAt: {
+        type: String,
+        required: true,
+      },
+      taskStatus: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        preAnimation: false,
+        pulseAnimation: false,
+        timeAgoEl: $('.js-issue-edited-ago'),
+      };
+    },
+    watch: {
+      descriptionHtml() {
+        this.animateChange();
+
+        this.$nextTick(() => {
+          const toolTipTime = gl.utils.formatDate(this.updatedAt);
+
+          this.timeAgoEl.attr('datetime', this.updatedAt)
+            .attr('title', toolTipTime)
+            .tooltip('fixTitle');
+
+          this.renderGFM();
+        });
+      },
+      taskStatus() {
+        const taskRegexMatches = this.taskStatus.match(/(\d+) of (\d+)/);
+        const $issuableHeader = $('.issuable-meta');
+        const $tasks = $('#task_status', $issuableHeader);
+        const $tasksShort = $('#task_status_short', $issuableHeader);
+
+        if (taskRegexMatches) {
+          $tasks.text(this.taskStatus);
+          $tasksShort.text(`${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`);
+        } else {
+          $tasks.text('');
+          $tasksShort.text('');
+        }
+      },
+    },
+    methods: {
+      renderGFM() {
+        $(this.$refs['gfm-entry-content']).renderGFM();
+
+        if (this.canUpdate) {
+          // eslint-disable-next-line no-new
+          new gl.TaskList({
+            dataType: 'issue',
+            fieldName: 'description',
+            selector: '.detail-page-description',
+          });
+        }
+      },
+    },
+    mounted() {
+      this.renderGFM();
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="description"
+    :class="{
+      'js-task-list-container': canUpdate
+    }">
+    <div
+      class="wiki"
+      :class="{
+        'issue-realtime-pre-pulse': preAnimation,
+        'issue-realtime-trigger-pulse': pulseAnimation
+      }"
+      v-html="descriptionHtml"
+      ref="gfm-content">
+    </div>
+    <textarea
+      class="hidden js-task-list-field"
+      v-if="descriptionText"
+      v-model="descriptionText">
+    </textarea>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
new file mode 100644
index 00000000000..a9dabd4cff1
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -0,0 +1,53 @@
+<script>
+  import animateMixin from '../mixins/animate';
+
+  export default {
+    mixins: [animateMixin],
+    data() {
+      return {
+        preAnimation: false,
+        pulseAnimation: false,
+        titleEl: document.querySelector('title'),
+      };
+    },
+    props: {
+      issuableRef: {
+        type: String,
+        required: true,
+      },
+      titleHtml: {
+        type: String,
+        required: true,
+      },
+      titleText: {
+        type: String,
+        required: true,
+      },
+    },
+    watch: {
+      titleHtml() {
+        this.setPageTitle();
+        this.animateChange();
+      },
+    },
+    methods: {
+      setPageTitle() {
+        const currentPageTitleScope = this.titleEl.innerText.split('·');
+        currentPageTitleScope[0] = `${this.titleText} (${this.issuableRef}) `;
+        this.titleEl.textContent = currentPageTitleScope.join('·');
+      },
+    },
+  };
+</script>
+
+<template>
+  <h2
+    class="title"
+    :class="{
+      'issue-realtime-pre-pulse': preAnimation,
+      'issue-realtime-trigger-pulse': pulseAnimation
+    }"
+    v-html="titleHtml"
+  >
+  </h2>
+</template>
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index eb20a597bb5..f06e33dee60 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -1,20 +1,42 @@
 import Vue from 'vue';
-import IssueTitle from './issue_title_description.vue';
+import issuableApp from './components/app.vue';
 import '../vue_shared/vue_resource_interceptor';
 
-(() => {
-  const issueTitleData = document.querySelector('.issue-title-data').dataset;
-  const { canUpdateTasksClass, endpoint } = issueTitleData;
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: document.getElementById('js-issuable-app'),
+  components: {
+    issuableApp,
+  },
+  data() {
+    const issuableElement = this.$options.el;
+    const issuableTitleElement = issuableElement.querySelector('.title');
+    const issuableDescriptionElement = issuableElement.querySelector('.wiki');
+    const issuableDescriptionTextarea = issuableElement.querySelector('.js-task-list-field');
+    const {
+      canUpdate,
+      endpoint,
+      issuableRef,
+    } = issuableElement.dataset;
 
-  const vm = new Vue({
-    el: '.issue-title-entrypoint',
-    render: createElement => createElement(IssueTitle, {
+    return {
+      canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
+      endpoint,
+      issuableRef,
+      initialTitle: issuableTitleElement.innerHTML,
+      initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
+      initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+    };
+  },
+  render(createElement) {
+    return createElement('issuable-app', {
       props: {
-        canUpdateTasksClass,
-        endpoint,
+        canUpdate: this.canUpdate,
+        endpoint: this.endpoint,
+        issuableRef: this.issuableRef,
+        initialTitle: this.initialTitle,
+        initialDescriptionHtml: this.initialDescriptionHtml,
+        initialDescriptionText: this.initialDescriptionText,
       },
-    }),
-  });
-
-  return vm;
-})();
+    });
+  },
+}));
diff --git a/app/assets/javascripts/issue_show/issue_title_description.vue b/app/assets/javascripts/issue_show/issue_title_description.vue
deleted file mode 100644
index dc3ba2550c5..00000000000
--- a/app/assets/javascripts/issue_show/issue_title_description.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<script>
-import Visibility from 'visibilityjs';
-import Poll from './../lib/utils/poll';
-import Service from './services/index';
-import tasks from './actions/tasks';
-
-export default {
-  props: {
-    endpoint: {
-      required: true,
-      type: String,
-    },
-    canUpdateTasksClass: {
-      required: true,
-      type: String,
-    },
-  },
-  data() {
-    const resource = new Service(this.$http, this.endpoint);
-
-    const poll = new Poll({
-      resource,
-      method: 'getTitle',
-      successCallback: (res) => {
-        this.renderResponse(res);
-      },
-      errorCallback: (err) => {
-        throw new Error(err);
-      },
-    });
-
-    return {
-      poll,
-      apiData: {},
-      tasks: '0 of 0',
-      title: null,
-      titleText: '',
-      titleFlag: {
-        pre: true,
-        pulse: false,
-      },
-      description: null,
-      descriptionText: '',
-      descriptionChange: false,
-      descriptionFlag: {
-        pre: true,
-        pulse: false,
-      },
-      timeAgoEl: $('.issue_edited_ago'),
-      titleEl: document.querySelector('title'),
-    };
-  },
-  methods: {
-    updateFlag(key, toggle) {
-      this[key].pre = toggle;
-      this[key].pulse = !toggle;
-    },
-    renderResponse(res) {
-      this.apiData = res.json();
-      this.triggerAnimation();
-    },
-    updateTaskHTML() {
-      tasks(this.apiData, this.tasks);
-    },
-    elementsToVisualize(noTitleChange, noDescriptionChange) {
-      if (!noTitleChange) {
-        this.titleText = this.apiData.title_text;
-        this.updateFlag('titleFlag', true);
-      }
-
-      if (!noDescriptionChange) {
-        // only change to true when we need to bind TaskLists the html of description
-        this.descriptionChange = true;
-        this.updateTaskHTML();
-        this.tasks = this.apiData.task_status;
-        this.updateFlag('descriptionFlag', true);
-      }
-    },
-    setTabTitle() {
-      const currentTabTitleScope = this.titleEl.innerText.split('·');
-      currentTabTitleScope[0] = `${this.titleText} (#${this.apiData.issue_number}) `;
-      this.titleEl.innerText = currentTabTitleScope.join('·');
-    },
-    animate(title, description) {
-      this.title = title;
-      this.description = description;
-      this.setTabTitle();
-
-      this.$nextTick(() => {
-        this.updateFlag('titleFlag', false);
-        this.updateFlag('descriptionFlag', false);
-      });
-    },
-    triggerAnimation() {
-      // always reset to false before checking the change
-      this.descriptionChange = false;
-
-      const { title, description } = this.apiData;
-      this.descriptionText = this.apiData.description_text;
-
-      const noTitleChange = this.title === title;
-      const noDescriptionChange = this.description === description;
-
-      /**
-      * since opacity is changed, even if there is no diff for Vue to update
-      * we must check the title/description even on a 304 to ensure no visual change
-      */
-      if (noTitleChange && noDescriptionChange) return;
-
-      this.elementsToVisualize(noTitleChange, noDescriptionChange);
-      this.animate(title, description);
-    },
-    updateEditedTimeAgo() {
-      const toolTipTime = gl.utils.formatDate(this.apiData.updated_at);
-      this.timeAgoEl.attr('datetime', this.apiData.updated_at);
-      this.timeAgoEl.attr('title', toolTipTime).tooltip('fixTitle');
-    },
-  },
-  created() {
-    if (!Visibility.hidden()) {
-      this.poll.makeRequest();
-    }
-
-    Visibility.change(() => {
-      if (!Visibility.hidden()) {
-        this.poll.restart();
-      } else {
-        this.poll.stop();
-      }
-    });
-  },
-  updated() {
-    // if new html is injected (description changed) - bind TaskList and call renderGFM
-    if (this.descriptionChange) {
-      this.updateEditedTimeAgo();
-
-      $(this.$refs['issue-content-container-gfm-entry']).renderGFM();
-
-      const tl = new gl.TaskList({
-        dataType: 'issue',
-        fieldName: 'description',
-        selector: '.detail-page-description',
-      });
-
-      return tl && null;
-    }
-
-    return null;
-  },
-};
-</script>
-
-<template>
-  <div>
-    <h2
-      class="title"
-      :class="{ 'issue-realtime-pre-pulse': titleFlag.pre, 'issue-realtime-trigger-pulse': titleFlag.pulse }"
-      ref="issue-title"
-      v-html="title"
-    >
-    </h2>
-    <div
-      class="description is-task-list-enabled"
-      :class="canUpdateTasksClass"
-      v-if="description"
-    >
-      <div
-        class="wiki"
-        :class="{ 'issue-realtime-pre-pulse': descriptionFlag.pre, 'issue-realtime-trigger-pulse': descriptionFlag.pulse }"
-        v-html="description"
-        ref="issue-content-container-gfm-entry"
-      >
-      </div>
-      <textarea
-        class="hidden js-task-list-field"
-        v-if="descriptionText"
-      >{{descriptionText}}</textarea>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/issue_show/mixins/animate.js b/app/assets/javascripts/issue_show/mixins/animate.js
new file mode 100644
index 00000000000..eda6302aa8b
--- /dev/null
+++ b/app/assets/javascripts/issue_show/mixins/animate.js
@@ -0,0 +1,13 @@
+export default {
+  methods: {
+    animateChange() {
+      this.preAnimation = true;
+      this.pulseAnimation = false;
+
+      this.$nextTick(() => {
+        this.preAnimation = false;
+        this.pulseAnimation = true;
+      });
+    },
+  },
+};
diff --git a/app/assets/javascripts/issue_show/services/index.js b/app/assets/javascripts/issue_show/services/index.js
index c4ab0b1e07a..348ad8d6813 100644
--- a/app/assets/javascripts/issue_show/services/index.js
+++ b/app/assets/javascripts/issue_show/services/index.js
@@ -1,10 +1,16 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
 export default class Service {
-  constructor(resource, endpoint) {
-    this.resource = resource;
+  constructor(endpoint) {
     this.endpoint = endpoint;
+
+    this.resource = Vue.resource(this.endpoint);
   }
 
-  getTitle() {
-    return this.resource.get(this.endpoint);
+  getData() {
+    return this.resource.get();
   }
 }
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
new file mode 100644
index 00000000000..8e89a2b7730
--- /dev/null
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -0,0 +1,25 @@
+export default class Store {
+  constructor({
+    titleHtml,
+    descriptionHtml,
+    descriptionText,
+  }) {
+    this.state = {
+      titleHtml,
+      titleText: '',
+      descriptionHtml,
+      descriptionText,
+      taskStatus: '',
+      updatedAt: '',
+    };
+  }
+
+  updateState(data) {
+    this.state.titleHtml = data.title;
+    this.state.titleText = data.title_text;
+    this.state.descriptionHtml = data.description;
+    this.state.descriptionText = data.description_text;
+    this.state.taskStatus = data.task_status;
+    this.state.updatedAt = data.updated_at;
+  }
+}
diff --git a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js
index 27ffe6ea304..5109b110b31 100644
--- a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js
+++ b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js
@@ -4,8 +4,10 @@ import illustrationSvg from '../icons/intro_illustration.svg';
 const cookieKey = 'pipeline_schedules_callout_dismissed';
 
 export default {
+  name: 'PipelineSchedulesCallout',
   data() {
     return {
+      docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
       illustrationSvg,
       calloutDismissed: Cookies.get(cookieKey) === 'true',
     };
@@ -28,13 +30,15 @@ export default {
         <div class="svg-container" v-html="illustrationSvg"></div>
         <div class="user-callout-copy">
           <h4>Scheduling Pipelines</h4>
-          <p> 
-              The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. 
+          <p>
+              The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags.
               Those scheduled pipelines will inherit limited project access based on their associated user.
           </p>
           <p> Learn more in the
-            <!-- FIXME -->
-            <a href="random.com">pipeline schedules documentation</a>.
+            <a
+              :href="docsUrl"
+              target="_blank"
+              rel="nofollow">pipeline schedules documentation</a>. <!-- oneline to prevent extra space before period -->
           </p>
         </div>
       </div>
diff --git a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js b/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
index e36dc5db2ab..6584549ad06 100644
--- a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
+++ b/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
@@ -1,9 +1,12 @@
 import Vue from 'vue';
 import PipelineSchedulesCallout from './components/pipeline_schedules_callout';
 
-const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
-
-document.addEventListener('DOMContentLoaded', () => {
-  new PipelineSchedulesCalloutComponent()
-    .$mount('#scheduling-pipelines-callout');
-});
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: '#pipeline-schedules-callout',
+  components: {
+    'pipeline-schedules-callout': PipelineSchedulesCallout,
+  },
+  render(createElement) {
+    return createElement('pipeline-schedules-callout');
+  },
+}));
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.js b/app/assets/javascripts/pipelines/components/pipeline_url.js
index 4e183d5c8ec..ea8aaca6c9c 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.js
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.js
@@ -29,7 +29,7 @@ export default {
       </a>
       <span
         v-if="!user"
-        class="js-pipeline-url-api api monospace">
+        class="js-pipeline-url-api api">
         API
       </span>
       <span
diff --git a/app/assets/javascripts/pipelines/components/stage.js b/app/assets/javascripts/pipelines/components/stage.js
deleted file mode 100644
index 034e8d3280e..00000000000
--- a/app/assets/javascripts/pipelines/components/stage.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/* global Flash */
-import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
-
-export default {
-  data() {
-    return {
-      builds: '',
-      spinner: '<span class="fa fa-spinner fa-spin"></span>',
-    };
-  },
-
-  props: {
-    stage: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  updated() {
-    if (this.builds) {
-      this.stopDropdownClickPropagation();
-    }
-  },
-
-  methods: {
-    fetchBuilds(e) {
-      const ariaExpanded = e.currentTarget.attributes['aria-expanded'];
-
-      if (ariaExpanded && (ariaExpanded.textContent === 'true')) return null;
-
-      return this.$http.get(this.stage.dropdown_path)
-        .then((response) => {
-          this.builds = JSON.parse(response.body).html;
-        }, () => {
-          const flash = new Flash('Something went wrong on our end.');
-          return flash;
-        });
-    },
-
-    /**
-     * When the user right clicks or cmd/ctrl + click in the job name
-     * the dropdown should not be closed and the link should open in another tab,
-     * so we stop propagation of the click event inside the dropdown.
-     *
-     * Since this component is rendered multiple times per page we need to guarantee we only
-     * target the click event of this component.
-     */
-    stopDropdownClickPropagation() {
-      $(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item')).on('click', (e) => {
-        e.stopPropagation();
-      });
-    },
-  },
-  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}`;
-    },
-    triggerButtonClass() {
-      return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
-    },
-    svgHTML() {
-      return borderlessStatusIconEntityMap[this.stage.status.icon];
-    },
-  },
-  watch: {
-    'stage.title': function stageTitle() {
-      $(this.$refs.button).tooltip('destroy').tooltip();
-    },
-  },
-  template: `
-    <div>
-      <button
-        @click="fetchBuilds($event)"
-        :class="triggerButtonClass"
-        :title="stage.title"
-        data-placement="top"
-        data-toggle="dropdown"
-        type="button"
-        ref="button"
-        :aria-label="stage.title">
-        <span v-html="svgHTML" aria-hidden="true"></span>
-        <i class="fa fa-caret-down" aria-hidden="true"></i>
-      </button>
-      <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
-        <div class="arrow-up" aria-hidden="true"></div>
-        <div
-          :class="dropdownClass"
-          class="js-builds-dropdown-list scrollable-menu"
-          v-html="buildsOrSpinner">
-        </div>
-      </ul>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/pipelines/components/status.js b/app/assets/javascripts/pipelines/components/status.js
deleted file mode 100644
index 21a281af438..00000000000
--- a/app/assets/javascripts/pipelines/components/status.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import canceledSvg from 'icons/_icon_status_canceled.svg';
-import createdSvg from 'icons/_icon_status_created.svg';
-import failedSvg from 'icons/_icon_status_failed.svg';
-import manualSvg from 'icons/_icon_status_manual.svg';
-import pendingSvg from 'icons/_icon_status_pending.svg';
-import runningSvg from 'icons/_icon_status_running.svg';
-import skippedSvg from 'icons/_icon_status_skipped.svg';
-import successSvg from 'icons/_icon_status_success.svg';
-import warningSvg from 'icons/_icon_status_warning.svg';
-
-export default {
-  props: {
-    pipeline: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  data() {
-    const svgsDictionary = {
-      icon_status_canceled: canceledSvg,
-      icon_status_created: createdSvg,
-      icon_status_failed: failedSvg,
-      icon_status_manual: manualSvg,
-      icon_status_pending: pendingSvg,
-      icon_status_running: runningSvg,
-      icon_status_skipped: skippedSvg,
-      icon_status_success: successSvg,
-      icon_status_warning: warningSvg,
-    };
-
-    return {
-      svg: svgsDictionary[this.pipeline.details.status.icon],
-    };
-  },
-
-  computed: {
-    cssClasses() {
-      return `ci-status ci-${this.pipeline.details.status.group}`;
-    },
-
-    detailsPath() {
-      const { status } = this.pipeline.details;
-      return status.has_details ? status.details_path : false;
-    },
-
-    content() {
-      return `${this.svg} ${this.pipeline.details.status.text}`;
-    },
-  },
-  template: `
-    <td class="commit-link">
-      <a
-        :class="cssClasses"
-        :href="detailsPath"
-        v-html="content">
-      </a>
-    </td>
-  `,
-};
diff --git a/app/assets/javascripts/todos.js b/app/assets/javascripts/todos.js
index 8be58023c84..7230946b484 100644
--- a/app/assets/javascripts/todos.js
+++ b/app/assets/javascripts/todos.js
@@ -1,5 +1,6 @@
 /* eslint-disable class-methods-use-this, no-unneeded-ternary, quote-props */
-/* global UsersSelect */
+
+import UsersSelect from './users_select';
 
 class Todos {
   constructor() {
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 452578d5b98..8119a8cd000 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -5,655 +5,649 @@
 // TODO: remove eventHub hack after code splitting refactor
 window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
 
-(function() {
-  const slice = [].slice;
-
-  this.UsersSelect = (function() {
-    function UsersSelect(currentUser, els) {
-      var $els;
-      this.users = this.users.bind(this);
-      this.user = this.user.bind(this);
-      this.usersPath = "/autocomplete/users.json";
-      this.userPath = "/autocomplete/users/:id.json";
-      if (currentUser != null) {
-        if (typeof currentUser === 'object') {
-          this.currentUser = currentUser;
-        } else {
-          this.currentUser = JSON.parse(currentUser);
+function UsersSelect(currentUser, els) {
+  var $els;
+  this.users = this.users.bind(this);
+  this.user = this.user.bind(this);
+  this.usersPath = "/autocomplete/users.json";
+  this.userPath = "/autocomplete/users/:id.json";
+  if (currentUser != null) {
+    if (typeof currentUser === 'object') {
+      this.currentUser = currentUser;
+    } else {
+      this.currentUser = JSON.parse(currentUser);
+    }
+  }
+
+  $els = $(els);
+
+  if (!els) {
+    $els = $('.js-user-search');
+  }
+
+  $els.each((function(_this) {
+    return function(i, dropdown) {
+      var options = {};
+      var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, defaultNullUser, firstUser, issueURL, selectedId, selectedIdDefault, showAnyUser, showNullUser, showMenuAbove;
+      $dropdown = $(dropdown);
+      options.projectId = $dropdown.data('project-id');
+      options.groupId = $dropdown.data('group-id');
+      options.showCurrentUser = $dropdown.data('current-user');
+      options.todoFilter = $dropdown.data('todo-filter');
+      options.todoStateFilter = $dropdown.data('todo-state-filter');
+      showNullUser = $dropdown.data('null-user');
+      defaultNullUser = $dropdown.data('null-user-default');
+      showMenuAbove = $dropdown.data('showMenuAbove');
+      showAnyUser = $dropdown.data('any-user');
+      firstUser = $dropdown.data('first-user');
+      options.authorId = $dropdown.data('author-id');
+      defaultLabel = $dropdown.data('default-label');
+      issueURL = $dropdown.data('issueUpdate');
+      $selectbox = $dropdown.closest('.selectbox');
+      $block = $selectbox.closest('.block');
+      abilityName = $dropdown.data('ability-name');
+      $value = $block.find('.value');
+      $collapsedSidebar = $block.find('.sidebar-collapsed-user');
+      $loading = $block.find('.block-loading').fadeOut();
+      selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
+      selectedId = $dropdown.data('selected') || selectedIdDefault;
+
+      const assignYourself = function () {
+        const unassignedSelected = $dropdown.closest('.selectbox')
+          .find(`input[name='${$dropdown.data('field-name')}'][value=0]`);
+
+        if (unassignedSelected) {
+          unassignedSelected.remove();
         }
-      }
 
-      $els = $(els);
+        // Save current selected user to the DOM
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = $dropdown.data('field-name');
+
+        const currentUserInfo = $dropdown.data('currentUserInfo');
+
+        if (currentUserInfo) {
+          input.value = currentUserInfo.id;
+          input.dataset.meta = currentUserInfo.name;
+        } else if (_this.currentUser) {
+          input.value = _this.currentUser.id;
+        }
 
-      if (!els) {
-        $els = $('.js-user-search');
+        if ($selectbox) {
+          $dropdown.parent().before(input);
+        } else {
+          $dropdown.after(input);
+        }
+      };
+
+      if ($block[0]) {
+        $block[0].addEventListener('assignYourself', assignYourself);
       }
 
-      $els.each((function(_this) {
-        return function(i, dropdown) {
-          var options = {};
-          var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, defaultNullUser, firstUser, issueURL, selectedId, selectedIdDefault, showAnyUser, showNullUser, showMenuAbove;
-          $dropdown = $(dropdown);
-          options.projectId = $dropdown.data('project-id');
-          options.groupId = $dropdown.data('group-id');
-          options.showCurrentUser = $dropdown.data('current-user');
-          options.todoFilter = $dropdown.data('todo-filter');
-          options.todoStateFilter = $dropdown.data('todo-state-filter');
-          showNullUser = $dropdown.data('null-user');
-          defaultNullUser = $dropdown.data('null-user-default');
-          showMenuAbove = $dropdown.data('showMenuAbove');
-          showAnyUser = $dropdown.data('any-user');
-          firstUser = $dropdown.data('first-user');
-          options.authorId = $dropdown.data('author-id');
-          defaultLabel = $dropdown.data('default-label');
-          issueURL = $dropdown.data('issueUpdate');
-          $selectbox = $dropdown.closest('.selectbox');
-          $block = $selectbox.closest('.block');
-          abilityName = $dropdown.data('ability-name');
-          $value = $block.find('.value');
-          $collapsedSidebar = $block.find('.sidebar-collapsed-user');
-          $loading = $block.find('.block-loading').fadeOut();
-          selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
-          selectedId = $dropdown.data('selected') || selectedIdDefault;
-
-          const assignYourself = function () {
-            const unassignedSelected = $dropdown.closest('.selectbox')
-              .find(`input[name='${$dropdown.data('field-name')}'][value=0]`);
-
-            if (unassignedSelected) {
-              unassignedSelected.remove();
-            }
+      const getSelectedUserInputs = function() {
+        return $selectbox
+          .find(`input[name="${$dropdown.data('field-name')}"]`);
+      };
+
+      const getSelected = function() {
+        return getSelectedUserInputs()
+          .map((index, input) => parseInt(input.value, 10))
+          .get();
+      };
+
+      const checkMaxSelect = function() {
+        const maxSelect = $dropdown.data('max-select');
+        if (maxSelect) {
+          const selected = getSelected();
+
+          if (selected.length > maxSelect) {
+            const firstSelectedId = selected[0];
+            const firstSelected = $dropdown.closest('.selectbox')
+              .find(`input[name='${$dropdown.data('field-name')}'][value=${firstSelectedId}]`);
+
+            firstSelected.remove();
+            emitSidebarEvent('sidebar.removeAssignee', {
+              id: firstSelectedId,
+            });
+          }
+        }
+      };
+
+      const getMultiSelectDropdownTitle = function(selectedUser, isSelected) {
+        const selectedUsers = getSelected()
+          .filter(u => u !== 0);
+
+        const firstUser = getSelectedUserInputs()
+          .map((index, input) => ({
+            name: input.dataset.meta,
+            value: parseInt(input.value, 10),
+          }))
+          .filter(u => u.id !== 0)
+          .get(0);
+
+        if (selectedUsers.length === 0) {
+          return 'Unassigned';
+        } else if (selectedUsers.length === 1) {
+          return firstUser.name;
+        } else if (isSelected) {
+          const otherSelected = selectedUsers.filter(s => s !== selectedUser.id);
+          return `${selectedUser.name} + ${otherSelected.length} more`;
+        } else {
+          return `${firstUser.name} + ${selectedUsers.length - 1} more`;
+        }
+      };
 
-            // Save current selected user to the DOM
-            const input = document.createElement('input');
-            input.type = 'hidden';
-            input.name = $dropdown.data('field-name');
+      $('.assign-to-me-link').on('click', (e) => {
+        e.preventDefault();
+        $(e.currentTarget).hide();
 
-            const currentUserInfo = $dropdown.data('currentUserInfo');
+        if ($dropdown.data('multiSelect')) {
+          assignYourself();
+          checkMaxSelect();
 
-            if (currentUserInfo) {
-              input.value = currentUserInfo.id;
-              input.dataset.meta = currentUserInfo.name;
-            } else if (_this.currentUser) {
-              input.value = _this.currentUser.id;
-            }
+          const currentUserInfo = $dropdown.data('currentUserInfo');
+          $dropdown.find('.dropdown-toggle-text').text(getMultiSelectDropdownTitle(currentUserInfo)).removeClass('is-default');
+        } else {
+          const $input = $(`input[name="${$dropdown.data('field-name')}"]`);
+          $input.val(gon.current_user_id);
+          selectedId = $input.val();
+          $dropdown.find('.dropdown-toggle-text').text(gon.current_user_fullname).removeClass('is-default');
+        }
+      });
 
-            if ($selectbox) {
-              $dropdown.parent().before(input);
-            } else {
-              $dropdown.after(input);
-            }
-          };
+      $block.on('click', '.js-assign-yourself', (e) => {
+        e.preventDefault();
+        return assignTo(_this.currentUser.id);
+      });
 
-          if ($block[0]) {
-            $block[0].addEventListener('assignYourself', assignYourself);
+      assignTo = function(selected) {
+        var data;
+        data = {};
+        data[abilityName] = {};
+        data[abilityName].assignee_id = selected != null ? selected : null;
+        $loading.removeClass('hidden').fadeIn();
+        $dropdown.trigger('loading.gl.dropdown');
+
+        return $.ajax({
+          type: 'PUT',
+          dataType: 'json',
+          url: issueURL,
+          data: data
+        }).done(function(data) {
+          var user;
+          $dropdown.trigger('loaded.gl.dropdown');
+          $loading.fadeOut();
+          if (data.assignee) {
+            user = {
+              name: data.assignee.name,
+              username: data.assignee.username,
+              avatar: data.assignee.avatar_url
+            };
+          } else {
+            user = {
+              name: 'Unassigned',
+              username: '',
+              avatar: ''
+            };
           }
-
-          const getSelectedUserInputs = function() {
-            return $selectbox
-              .find(`input[name="${$dropdown.data('field-name')}"]`);
-          };
-
-          const getSelected = function() {
-            return getSelectedUserInputs()
-              .map((index, input) => parseInt(input.value, 10))
-              .get();
-          };
-
-          const checkMaxSelect = function() {
-            const maxSelect = $dropdown.data('max-select');
-            if (maxSelect) {
-              const selected = getSelected();
-
-              if (selected.length > maxSelect) {
-                const firstSelectedId = selected[0];
-                const firstSelected = $dropdown.closest('.selectbox')
-                  .find(`input[name='${$dropdown.data('field-name')}'][value=${firstSelectedId}]`);
-
-                firstSelected.remove();
-                emitSidebarEvent('sidebar.removeAssignee', {
-                  id: firstSelectedId,
-                });
+          $value.html(assigneeTemplate(user));
+          $collapsedSidebar.attr('title', user.name).tooltip('fixTitle');
+          return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
+        });
+      };
+      collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
+      assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
+      return $dropdown.glDropdown({
+        showMenuAbove: showMenuAbove,
+        data: function(term, callback) {
+          var isAuthorFilter;
+          isAuthorFilter = $('.js-author-search');
+          return _this.users(term, options, function(users) {
+            // GitLabDropdownFilter returns this.instance
+            // GitLabDropdownRemote returns this.options.instance
+            const glDropdown = this.instance || this.options.instance;
+            glDropdown.options.processData(term, users, callback);
+          }.bind(this));
+        },
+        processData: function(term, users, callback) {
+          let anyUser;
+          let index;
+          let j;
+          let len;
+          let name;
+          let obj;
+          let showDivider;
+          if (term.length === 0) {
+            showDivider = 0;
+            if (firstUser) {
+              // Move current user to the front of the list
+              for (index = j = 0, len = users.length; j < len; index = (j += 1)) {
+                obj = users[index];
+                if (obj.username === firstUser) {
+                  users.splice(index, 1);
+                  users.unshift(obj);
+                  break;
+                }
               }
             }
-          };
-
-          const getMultiSelectDropdownTitle = function(selectedUser, isSelected) {
-            const selectedUsers = getSelected()
-              .filter(u => u !== 0);
-
-            const firstUser = getSelectedUserInputs()
-              .map((index, input) => ({
-                name: input.dataset.meta,
-                value: parseInt(input.value, 10),
-              }))
-              .filter(u => u.id !== 0)
-              .get(0);
-
-            if (selectedUsers.length === 0) {
-              return 'Unassigned';
-            } else if (selectedUsers.length === 1) {
-              return firstUser.name;
-            } else if (isSelected) {
-              const otherSelected = selectedUsers.filter(s => s !== selectedUser.id);
-              return `${selectedUser.name} + ${otherSelected.length} more`;
-            } else {
-              return `${firstUser.name} + ${selectedUsers.length - 1} more`;
+            if (showNullUser) {
+              showDivider += 1;
+              users.unshift({
+                beforeDivider: true,
+                name: 'Unassigned',
+                id: 0
+              });
+            }
+            if (showAnyUser) {
+              showDivider += 1;
+              name = showAnyUser;
+              if (name === true) {
+                name = 'Any User';
+              }
+              anyUser = {
+                beforeDivider: true,
+                name: name,
+                id: null
+              };
+              users.unshift(anyUser);
             }
-          };
-
-          $('.assign-to-me-link').on('click', (e) => {
-            e.preventDefault();
-            $(e.currentTarget).hide();
-
-            if ($dropdown.data('multiSelect')) {
-              assignYourself();
-              checkMaxSelect();
 
-              const currentUserInfo = $dropdown.data('currentUserInfo');
-              $dropdown.find('.dropdown-toggle-text').text(getMultiSelectDropdownTitle(currentUserInfo)).removeClass('is-default');
-            } else {
-              const $input = $(`input[name="${$dropdown.data('field-name')}"]`);
-              $input.val(gon.current_user_id);
-              selectedId = $input.val();
-              $dropdown.find('.dropdown-toggle-text').text(gon.current_user_fullname).removeClass('is-default');
+            if (showDivider) {
+              users.splice(showDivider, 0, 'divider');
             }
-          });
 
-          $block.on('click', '.js-assign-yourself', (e) => {
-            e.preventDefault();
-            return assignTo(_this.currentUser.id);
-          });
+            if ($dropdown.hasClass('js-multiselect')) {
+              const selected = getSelected().filter(i => i !== 0);
 
-          assignTo = function(selected) {
-            var data;
-            data = {};
-            data[abilityName] = {};
-            data[abilityName].assignee_id = selected != null ? selected : null;
-            $loading.removeClass('hidden').fadeIn();
-            $dropdown.trigger('loading.gl.dropdown');
-
-            return $.ajax({
-              type: 'PUT',
-              dataType: 'json',
-              url: issueURL,
-              data: data
-            }).done(function(data) {
-              var user;
-              $dropdown.trigger('loaded.gl.dropdown');
-              $loading.fadeOut();
-              if (data.assignee) {
-                user = {
-                  name: data.assignee.name,
-                  username: data.assignee.username,
-                  avatar: data.assignee.avatar_url
-                };
-              } else {
-                user = {
-                  name: 'Unassigned',
-                  username: '',
-                  avatar: ''
-                };
-              }
-              $value.html(assigneeTemplate(user));
-              $collapsedSidebar.attr('title', user.name).tooltip('fixTitle');
-              return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
-            });
-          };
-          collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
-          assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
-          return $dropdown.glDropdown({
-            showMenuAbove: showMenuAbove,
-            data: function(term, callback) {
-              var isAuthorFilter;
-              isAuthorFilter = $('.js-author-search');
-              return _this.users(term, options, function(users) {
-                // GitLabDropdownFilter returns this.instance
-                // GitLabDropdownRemote returns this.options.instance
-                const glDropdown = this.instance || this.options.instance;
-                glDropdown.options.processData(term, users, callback);
-              }.bind(this));
-            },
-            processData: function(term, users, callback) {
-              let anyUser;
-              let index;
-              let j;
-              let len;
-              let name;
-              let obj;
-              let showDivider;
-              if (term.length === 0) {
-                showDivider = 0;
-                if (firstUser) {
-                  // Move current user to the front of the list
-                  for (index = j = 0, len = users.length; j < len; index = (j += 1)) {
-                    obj = users[index];
-                    if (obj.username === firstUser) {
-                      users.splice(index, 1);
-                      users.unshift(obj);
-                      break;
-                    }
-                  }
-                }
-                if (showNullUser) {
+              if (selected.length > 0) {
+                if ($dropdown.data('dropdown-header')) {
                   showDivider += 1;
-                  users.unshift({
-                    beforeDivider: true,
-                    name: 'Unassigned',
-                    id: 0
+                  users.splice(showDivider, 0, {
+                    header: $dropdown.data('dropdown-header'),
                   });
                 }
-                if (showAnyUser) {
-                  showDivider += 1;
-                  name = showAnyUser;
-                  if (name === true) {
-                    name = 'Any User';
-                  }
-                  anyUser = {
-                    beforeDivider: true,
-                    name: name,
-                    id: null
-                  };
-                  users.unshift(anyUser);
-                }
 
-                if (showDivider) {
-                  users.splice(showDivider, 0, 'divider');
-                }
+                const selectedUsers = users
+                  .filter(u => selected.indexOf(u.id) !== -1)
+                  .sort((a, b) => a.name > b.name);
 
-                if ($dropdown.hasClass('js-multiselect')) {
-                  const selected = getSelected().filter(i => i !== 0);
+                users = users.filter(u => selected.indexOf(u.id) === -1);
 
-                  if (selected.length > 0) {
-                    if ($dropdown.data('dropdown-header')) {
-                      showDivider += 1;
-                      users.splice(showDivider, 0, {
-                        header: $dropdown.data('dropdown-header'),
-                      });
-                    }
-
-                    const selectedUsers = users
-                      .filter(u => selected.indexOf(u.id) !== -1)
-                      .sort((a, b) => a.name > b.name);
+                selectedUsers.forEach((selectedUser) => {
+                  showDivider += 1;
+                  users.splice(showDivider, 0, selectedUser);
+                });
 
-                    users = users.filter(u => selected.indexOf(u.id) === -1);
+                users.splice(showDivider + 1, 0, 'divider');
+              }
+            }
+          }
 
-                    selectedUsers.forEach((selectedUser) => {
-                      showDivider += 1;
-                      users.splice(showDivider, 0, selectedUser);
-                    });
+          callback(users);
+          if (showMenuAbove) {
+            $dropdown.data('glDropdown').positionMenuAbove();
+          }
+        },
+        filterable: true,
+        filterRemote: true,
+        search: {
+          fields: ['name', 'username']
+        },
+        selectable: true,
+        fieldName: $dropdown.data('field-name'),
+        toggleLabel: function(selected, el, glDropdown) {
+          const inputValue = glDropdown.filterInput.val();
+
+          if (this.multiSelect && inputValue === '') {
+            // Remove non-users from the fullData array
+            const users = glDropdown.filteredFullData();
+            const callback = glDropdown.parseData.bind(glDropdown);
+
+            // Update the data model
+            this.processData(inputValue, users, callback);
+          }
 
-                    users.splice(showDivider + 1, 0, 'divider');
-                  }
-                }
-              }
+          if (this.multiSelect) {
+            return getMultiSelectDropdownTitle(selected, $(el).hasClass('is-active'));
+          }
 
-              callback(users);
-              if (showMenuAbove) {
-                $dropdown.data('glDropdown').positionMenuAbove();
-              }
-            },
-            filterable: true,
-            filterRemote: true,
-            search: {
-              fields: ['name', 'username']
-            },
-            selectable: true,
-            fieldName: $dropdown.data('field-name'),
-            toggleLabel: function(selected, el, glDropdown) {
-              const inputValue = glDropdown.filterInput.val();
-
-              if (this.multiSelect && inputValue === '') {
-                // Remove non-users from the fullData array
-                const users = glDropdown.filteredFullData();
-                const callback = glDropdown.parseData.bind(glDropdown);
-
-                // Update the data model
-                this.processData(inputValue, users, callback);
-              }
+          if (selected && 'id' in selected && $(el).hasClass('is-active')) {
+            $dropdown.find('.dropdown-toggle-text').removeClass('is-default');
+            if (selected.text) {
+              return selected.text;
+            } else {
+              return selected.name;
+            }
+          } else {
+            $dropdown.find('.dropdown-toggle-text').addClass('is-default');
+            return defaultLabel;
+          }
+        },
+        defaultLabel: defaultLabel,
+        hidden: function(e) {
+          if ($dropdown.hasClass('js-multiselect')) {
+            emitSidebarEvent('sidebar.saveAssignees');
+          }
 
-              if (this.multiSelect) {
-                return getMultiSelectDropdownTitle(selected, $(el).hasClass('is-active'));
-              }
+          if (!$dropdown.data('always-show-selectbox')) {
+            $selectbox.hide();
 
-              if (selected && 'id' in selected && $(el).hasClass('is-active')) {
-                $dropdown.find('.dropdown-toggle-text').removeClass('is-default');
-                if (selected.text) {
-                  return selected.text;
-                } else {
-                  return selected.name;
-                }
-              } else {
-                $dropdown.find('.dropdown-toggle-text').addClass('is-default');
-                return defaultLabel;
-              }
-            },
-            defaultLabel: defaultLabel,
-            hidden: function(e) {
-              if ($dropdown.hasClass('js-multiselect')) {
-                emitSidebarEvent('sidebar.saveAssignees');
-              }
+            // Recalculate where .value is because vue might have changed it
+            $block = $selectbox.closest('.block');
+            $value = $block.find('.value');
+            // display:block overrides the hide-collapse rule
+            $value.css('display', '');
+          }
+        },
+        multiSelect: $dropdown.hasClass('js-multiselect'),
+        inputMeta: $dropdown.data('input-meta'),
+        clicked: function(options) {
+          const { $el, e, isMarking } = options;
+          const user = options.selectedObj;
+
+          if ($dropdown.hasClass('js-multiselect')) {
+            const isActive = $el.hasClass('is-active');
+            const previouslySelected = $dropdown.closest('.selectbox')
+                .find("input[name='" + ($dropdown.data('field-name')) + "'][value!=0]");
+
+            // Enables support for limiting the number of users selected
+            // Automatically removes the first on the list if more users are selected
+            checkMaxSelect();
+
+            if (user.beforeDivider && user.name.toLowerCase() === 'unassigned') {
+              // Unassigned selected
+              previouslySelected.each((index, element) => {
+                const id = parseInt(element.value, 10);
+                element.remove();
+              });
+              emitSidebarEvent('sidebar.removeAllAssignees');
+            } else if (isActive) {
+              // user selected
+              emitSidebarEvent('sidebar.addAssignee', user);
 
-              if (!$dropdown.data('always-show-selectbox')) {
-                $selectbox.hide();
+              // Remove unassigned selection (if it was previously selected)
+              const unassignedSelected = $dropdown.closest('.selectbox')
+                .find("input[name='" + ($dropdown.data('field-name')) + "'][value=0]");
 
-                // Recalculate where .value is because vue might have changed it
-                $block = $selectbox.closest('.block');
-                $value = $block.find('.value');
-                // display:block overrides the hide-collapse rule
-                $value.css('display', '');
+              if (unassignedSelected) {
+                unassignedSelected.remove();
+              }
+            } else {
+              if (previouslySelected.length === 0) {
+              // Select unassigned because there is no more selected users
+                this.addInput($dropdown.data('field-name'), 0, {});
               }
-            },
-            multiSelect: $dropdown.hasClass('js-multiselect'),
-            inputMeta: $dropdown.data('input-meta'),
-            clicked: function(options) {
-              const { $el, e, isMarking } = options;
-              const user = options.selectedObj;
-
-              if ($dropdown.hasClass('js-multiselect')) {
-                const isActive = $el.hasClass('is-active');
-                const previouslySelected = $dropdown.closest('.selectbox')
-                    .find("input[name='" + ($dropdown.data('field-name')) + "'][value!=0]");
-
-                // Enables support for limiting the number of users selected
-                // Automatically removes the first on the list if more users are selected
-                checkMaxSelect();
-
-                if (user.beforeDivider && user.name.toLowerCase() === 'unassigned') {
-                  // Unassigned selected
-                  previouslySelected.each((index, element) => {
-                    const id = parseInt(element.value, 10);
-                    element.remove();
-                  });
-                  emitSidebarEvent('sidebar.removeAllAssignees');
-                } else if (isActive) {
-                  // user selected
-                  emitSidebarEvent('sidebar.addAssignee', user);
 
-                  // Remove unassigned selection (if it was previously selected)
-                  const unassignedSelected = $dropdown.closest('.selectbox')
-                    .find("input[name='" + ($dropdown.data('field-name')) + "'][value=0]");
+              // User unselected
+              emitSidebarEvent('sidebar.removeAssignee', user);
+            }
 
-                  if (unassignedSelected) {
-                    unassignedSelected.remove();
-                  }
-                } else {
-                  if (previouslySelected.length === 0) {
-                  // Select unassigned because there is no more selected users
-                    this.addInput($dropdown.data('field-name'), 0, {});
-                  }
+            if (getSelected().find(u => u === gon.current_user_id)) {
+              $('.assign-to-me-link').hide();
+            } else {
+              $('.assign-to-me-link').show();
+            }
+          }
 
-                  // User unselected
-                  emitSidebarEvent('sidebar.removeAssignee', user);
-                }
+          var isIssueIndex, isMRIndex, page, selected;
+          page = $('body').data('page');
+          isIssueIndex = page === 'projects:issues:index';
+          isMRIndex = (page === page && page === 'projects:merge_requests:index');
+          if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
+            e.preventDefault();
 
-                if (getSelected().find(u => u === gon.current_user_id)) {
-                  $('.assign-to-me-link').hide();
-                } else {
-                  $('.assign-to-me-link').show();
-                }
-              }
+            const isSelecting = (user.id !== selectedId);
+            selectedId = isSelecting ? user.id : selectedIdDefault;
 
-              var isIssueIndex, isMRIndex, page, selected;
-              page = $('body').data('page');
-              isIssueIndex = page === 'projects:issues:index';
-              isMRIndex = (page === page && page === 'projects:merge_requests:index');
-              if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
-                e.preventDefault();
+            if (selectedId === gon.current_user_id) {
+              $('.assign-to-me-link').hide();
+            } else {
+              $('.assign-to-me-link').show();
+            }
+            return;
+          }
+          if ($el.closest('.add-issues-modal').length) {
+            gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = user.id;
+          } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
+            return Issuable.filterResults($dropdown.closest('form'));
+          } else if ($dropdown.hasClass('js-filter-submit')) {
+            return $dropdown.closest('form').submit();
+          } else if (!$dropdown.hasClass('js-multiselect')) {
+            selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
+            return assignTo(selected);
+          }
+        },
+        id: function (user) {
+          return user.id;
+        },
+        opened: function(e) {
+          const $el = $(e.currentTarget);
+          if ($dropdown.hasClass('js-issue-board-sidebar')) {
+            selectedId = parseInt($dropdown[0].dataset.selected, 10) || selectedIdDefault;
+          }
+          $el.find('.is-active').removeClass('is-active');
 
-                const isSelecting = (user.id !== selectedId);
-                selectedId = isSelecting ? user.id : selectedIdDefault;
+          function highlightSelected(id) {
+            $el.find(`li[data-user-id="${id}"] .dropdown-menu-user-link`).addClass('is-active');
+          }
 
-                if (selectedId === gon.current_user_id) {
-                  $('.assign-to-me-link').hide();
-                } else {
-                  $('.assign-to-me-link').show();
-                }
-                return;
-              }
-              if ($el.closest('.add-issues-modal').length) {
-                gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = user.id;
-              } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
-                return Issuable.filterResults($dropdown.closest('form'));
-              } else if ($dropdown.hasClass('js-filter-submit')) {
-                return $dropdown.closest('form').submit();
-              } else if (!$dropdown.hasClass('js-multiselect')) {
-                selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
-                return assignTo(selected);
-              }
-            },
-            id: function (user) {
-              return user.id;
-            },
-            opened: function(e) {
-              const $el = $(e.currentTarget);
-              if ($dropdown.hasClass('js-issue-board-sidebar')) {
-                selectedId = parseInt($dropdown[0].dataset.selected, 10) || selectedIdDefault;
-              }
-              $el.find('.is-active').removeClass('is-active');
+          if ($selectbox[0]) {
+            getSelected().forEach(selectedId => highlightSelected(selectedId));
+          } else {
+            highlightSelected(selectedId);
+          }
+        },
+        updateLabel: $dropdown.data('dropdown-title'),
+        renderRow: function(user) {
+          var avatar, img, listClosingTags, listWithName, listWithUserName, username;
+          username = user.username ? "@" + user.username : "";
+          avatar = user.avatar_url ? user.avatar_url : false;
 
-              function highlightSelected(id) {
-                $el.find(`li[data-user-id="${id}"] .dropdown-menu-user-link`).addClass('is-active');
-              }
+          let selected = user.id === parseInt(selectedId, 10);
 
-              if ($selectbox[0]) {
-                getSelected().forEach(selectedId => highlightSelected(selectedId));
-              } else {
-                highlightSelected(selectedId);
-              }
-            },
-            updateLabel: $dropdown.data('dropdown-title'),
-            renderRow: function(user) {
-              var avatar, img, listClosingTags, listWithName, listWithUserName, username;
-              username = user.username ? "@" + user.username : "";
-              avatar = user.avatar_url ? user.avatar_url : false;
+          if (this.multiSelect) {
+            const fieldName = this.fieldName;
+            const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");
 
-              let selected = user.id === parseInt(selectedId, 10);
+            if (field.length) {
+              selected = true;
+            }
+          }
 
-              if (this.multiSelect) {
-                const fieldName = this.fieldName;
-                const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");
+          img = "";
+          if (user.beforeDivider != null) {
+            `<li><a href='#' class='${selected === true ? 'is-active' : ''}'>${user.name}</a></li>`;
+          } else {
+            if (avatar) {
+              img = "<img src='" + avatar + "' class='avatar avatar-inline' width='32' />";
+            }
+          }
 
-                if (field.length) {
-                  selected = true;
+          return `
+            <li data-user-id=${user.id}>
+              <a href='#' class='dropdown-menu-user-link ${selected === true ? 'is-active' : ''}'>
+                ${img}
+                <strong class='dropdown-menu-user-full-name'>
+                  ${user.name}
+                </strong>
+                ${username ? `<span class='dropdown-menu-user-username'>${username}</span>` : ''}
+              </a>
+            </li>
+          `;
+        }
+      });
+    };
+  })(this));
+  $('.ajax-users-select').each((function(_this) {
+    return function(i, select) {
+      var firstUser, showAnyUser, showEmailUser, showNullUser;
+      var options = {};
+      options.skipLdap = $(select).hasClass('skip_ldap');
+      options.projectId = $(select).data('project-id');
+      options.groupId = $(select).data('group-id');
+      options.showCurrentUser = $(select).data('current-user');
+      options.pushCodeToProtectedBranches = $(select).data('push-code-to-protected-branches');
+      options.authorId = $(select).data('author-id');
+      options.skipUsers = $(select).data('skip-users');
+      showNullUser = $(select).data('null-user');
+      showAnyUser = $(select).data('any-user');
+      showEmailUser = $(select).data('email-user');
+      firstUser = $(select).data('first-user');
+      return $(select).select2({
+        placeholder: "Search for a user",
+        multiple: $(select).hasClass('multiselect'),
+        minimumInputLength: 0,
+        query: function(query) {
+          return _this.users(query.term, options, function(users) {
+            var anyUser, data, emailUser, index, j, len, name, nullUser, obj, ref;
+            data = {
+              results: users
+            };
+            if (query.term.length === 0) {
+              if (firstUser) {
+                // Move current user to the front of the list
+                ref = data.results;
+                for (index = j = 0, len = ref.length; j < len; index = (j += 1)) {
+                  obj = ref[index];
+                  if (obj.username === firstUser) {
+                    data.results.splice(index, 1);
+                    data.results.unshift(obj);
+                    break;
+                  }
                 }
               }
-
-              img = "";
-              if (user.beforeDivider != null) {
-                `<li><a href='#' class='${selected === true ? 'is-active' : ''}'>${user.name}</a></li>`;
-              } else {
-                if (avatar) {
-                  img = "<img src='" + avatar + "' class='avatar avatar-inline' width='32' />";
+              if (showNullUser) {
+                nullUser = {
+                  name: 'Unassigned',
+                  id: 0
+                };
+                data.results.unshift(nullUser);
+              }
+              if (showAnyUser) {
+                name = showAnyUser;
+                if (name === true) {
+                  name = 'Any User';
                 }
+                anyUser = {
+                  name: name,
+                  id: null
+                };
+                data.results.unshift(anyUser);
               }
-
-              return `
-                <li data-user-id=${user.id}>
-                  <a href='#' class='dropdown-menu-user-link ${selected === true ? 'is-active' : ''}'>
-                    ${img}
-                    <strong class='dropdown-menu-user-full-name'>
-                      ${user.name}
-                    </strong>
-                    ${username ? `<span class='dropdown-menu-user-username'>${username}</span>` : ''}
-                  </a>
-                </li>
-              `;
             }
-          });
-        };
-      })(this));
-      $('.ajax-users-select').each((function(_this) {
-        return function(i, select) {
-          var firstUser, showAnyUser, showEmailUser, showNullUser;
-          var options = {};
-          options.skipLdap = $(select).hasClass('skip_ldap');
-          options.projectId = $(select).data('project-id');
-          options.groupId = $(select).data('group-id');
-          options.showCurrentUser = $(select).data('current-user');
-          options.pushCodeToProtectedBranches = $(select).data('push-code-to-protected-branches');
-          options.authorId = $(select).data('author-id');
-          options.skipUsers = $(select).data('skip-users');
-          showNullUser = $(select).data('null-user');
-          showAnyUser = $(select).data('any-user');
-          showEmailUser = $(select).data('email-user');
-          firstUser = $(select).data('first-user');
-          return $(select).select2({
-            placeholder: "Search for a user",
-            multiple: $(select).hasClass('multiselect'),
-            minimumInputLength: 0,
-            query: function(query) {
-              return _this.users(query.term, options, function(users) {
-                var anyUser, data, emailUser, index, j, len, name, nullUser, obj, ref;
-                data = {
-                  results: users
-                };
-                if (query.term.length === 0) {
-                  if (firstUser) {
-                    // Move current user to the front of the list
-                    ref = data.results;
-                    for (index = j = 0, len = ref.length; j < len; index = (j += 1)) {
-                      obj = ref[index];
-                      if (obj.username === firstUser) {
-                        data.results.splice(index, 1);
-                        data.results.unshift(obj);
-                        break;
-                      }
-                    }
-                  }
-                  if (showNullUser) {
-                    nullUser = {
-                      name: 'Unassigned',
-                      id: 0
-                    };
-                    data.results.unshift(nullUser);
-                  }
-                  if (showAnyUser) {
-                    name = showAnyUser;
-                    if (name === true) {
-                      name = 'Any User';
-                    }
-                    anyUser = {
-                      name: name,
-                      id: null
-                    };
-                    data.results.unshift(anyUser);
-                  }
-                }
-                if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
-                  var trimmed = query.term.trim();
-                  emailUser = {
-                    name: "Invite \"" + query.term + "\"",
-                    username: trimmed,
-                    id: trimmed
-                  };
-                  data.results.unshift(emailUser);
-                }
-                return query.callback(data);
-              });
-            },
-            initSelection: function() {
-              var args;
-              args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-              return _this.initSelection.apply(_this, args);
-            },
-            formatResult: function() {
-              var args;
-              args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-              return _this.formatResult.apply(_this, args);
-            },
-            formatSelection: function() {
-              var args;
-              args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-              return _this.formatSelection.apply(_this, args);
-            },
-            dropdownCssClass: "ajax-users-dropdown",
-            // we do not want to escape markup since we are displaying html in results
-            escapeMarkup: function(m) {
-              return m;
+            if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
+              var trimmed = query.term.trim();
+              emailUser = {
+                name: "Invite \"" + query.term + "\"",
+                username: trimmed,
+                id: trimmed
+              };
+              data.results.unshift(emailUser);
             }
+            return query.callback(data);
           });
-        };
-      })(this));
-    }
-
-    UsersSelect.prototype.initSelection = function(element, callback) {
-      var id, nullUser;
-      id = $(element).val();
-      if (id === "0") {
-        nullUser = {
-          name: 'Unassigned'
-        };
-        return callback(nullUser);
-      } else if (id !== "") {
-        return this.user(id, callback);
-      }
-    };
-
-    UsersSelect.prototype.formatResult = function(user) {
-      var avatar;
-      if (user.avatar_url) {
-        avatar = user.avatar_url;
-      } else {
-        avatar = gon.default_avatar_url;
-      }
-      return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar s24' src='" + avatar + "'></div> <div class='user-name'>" + user.name + "</div> <div class='user-username'>" + (user.username || "") + "</div> </div>";
-    };
-
-    UsersSelect.prototype.formatSelection = function(user) {
-      return user.name;
-    };
-
-    UsersSelect.prototype.user = function(user_id, callback) {
-      if (!/^\d+$/.test(user_id)) {
-        return false;
-      }
-
-      var url;
-      url = this.buildUrl(this.userPath);
-      url = url.replace(':id', user_id);
-      return $.ajax({
-        url: url,
-        dataType: "json"
-      }).done(function(user) {
-        return callback(user);
-      });
-    };
-
-    // Return users list. Filtered by query
-    // Only active users retrieved
-    UsersSelect.prototype.users = function(query, options, callback) {
-      var url;
-      url = this.buildUrl(this.usersPath);
-      return $.ajax({
-        url: url,
-        data: {
-          search: query,
-          per_page: 20,
-          active: true,
-          project_id: options.projectId || null,
-          group_id: options.groupId || null,
-          skip_ldap: options.skipLdap || null,
-          todo_filter: options.todoFilter || null,
-          todo_state_filter: options.todoStateFilter || null,
-          current_user: options.showCurrentUser || null,
-          push_code_to_protected_branches: options.pushCodeToProtectedBranches || null,
-          author_id: options.authorId || null,
-          skip_users: options.skipUsers || null
         },
-        dataType: "json"
-      }).done(function(users) {
-        return callback(users);
+        initSelection: function() {
+          var args;
+          args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
+          return _this.initSelection.apply(_this, args);
+        },
+        formatResult: function() {
+          var args;
+          args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
+          return _this.formatResult.apply(_this, args);
+        },
+        formatSelection: function() {
+          var args;
+          args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
+          return _this.formatSelection.apply(_this, args);
+        },
+        dropdownCssClass: "ajax-users-dropdown",
+        // we do not want to escape markup since we are displaying html in results
+        escapeMarkup: function(m) {
+          return m;
+        }
       });
     };
-
-    UsersSelect.prototype.buildUrl = function(url) {
-      if (gon.relative_url_root != null) {
-        url = gon.relative_url_root.replace(/\/$/, '') + url;
-      }
-      return url;
+  })(this));
+}
+
+UsersSelect.prototype.initSelection = function(element, callback) {
+  var id, nullUser;
+  id = $(element).val();
+  if (id === "0") {
+    nullUser = {
+      name: 'Unassigned'
     };
-
-    return UsersSelect;
-  })();
-}).call(window);
+    return callback(nullUser);
+  } else if (id !== "") {
+    return this.user(id, callback);
+  }
+};
+
+UsersSelect.prototype.formatResult = function(user) {
+  var avatar;
+  if (user.avatar_url) {
+    avatar = user.avatar_url;
+  } else {
+    avatar = gon.default_avatar_url;
+  }
+  return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar s24' src='" + avatar + "'></div> <div class='user-name'>" + user.name + "</div> <div class='user-username'>" + (user.username || "") + "</div> </div>";
+};
+
+UsersSelect.prototype.formatSelection = function(user) {
+  return user.name;
+};
+
+UsersSelect.prototype.user = function(user_id, callback) {
+  if (!/^\d+$/.test(user_id)) {
+    return false;
+  }
+
+  var url;
+  url = this.buildUrl(this.userPath);
+  url = url.replace(':id', user_id);
+  return $.ajax({
+    url: url,
+    dataType: "json"
+  }).done(function(user) {
+    return callback(user);
+  });
+};
+
+// Return users list. Filtered by query
+// Only active users retrieved
+UsersSelect.prototype.users = function(query, options, callback) {
+  var url;
+  url = this.buildUrl(this.usersPath);
+  return $.ajax({
+    url: url,
+    data: {
+      search: query,
+      per_page: 20,
+      active: true,
+      project_id: options.projectId || null,
+      group_id: options.groupId || null,
+      skip_ldap: options.skipLdap || null,
+      todo_filter: options.todoFilter || null,
+      todo_state_filter: options.todoStateFilter || null,
+      current_user: options.showCurrentUser || null,
+      push_code_to_protected_branches: options.pushCodeToProtectedBranches || null,
+      author_id: options.authorId || null,
+      skip_users: options.skipUsers || null
+    },
+    dataType: "json"
+  }).done(function(users) {
+    return callback(users);
+  });
+};
+
+UsersSelect.prototype.buildUrl = function(url) {
+  if (gon.relative_url_root != null) {
+    url = gon.relative_url_root.replace(/\/$/, '') + url;
+  }
+  return url;
+};
+
+export default UsersSelect;
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
index 3c23b8e472b..8b59e018836 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
@@ -1,7 +1,7 @@
 /* global Flash */
 
 import '~/lib/utils/datetime_utility';
-import { statusClassToSvgMap } from '../../vue_shared/pipeline_svg_icons';
+import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
 import MemoryUsage from './mr_widget_memory_usage';
 import MRWidgetService from '../services/mr_widget_service';
 
@@ -16,7 +16,7 @@ export default {
   },
   computed: {
     svg() {
-      return statusClassToSvgMap.icon_status_success;
+      return statusIconEntityMap.icon_status_success;
     },
   },
   methods: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index 5440532f559..9e7299fcdeb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -70,32 +70,34 @@ export default {
         </span>
       </div>
       <div class="normal">
-        <b>Request to merge</b>
-        <span
-          class="label-branch"
-          :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
-          :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
-          data-placement="bottom"
-          v-html="mr.sourceBranchLink"></span>
-        <button
-          class="btn btn-transparent btn-clipboard has-tooltip"
-          data-title="Copy branch name to clipboard"
-          :data-clipboard-text="branchNameClipboardData">
-          <i
-            aria-hidden="true"
-            class="fa fa-clipboard"></i>
-        </button>
-        <b>into</b>
-        <span
-          class="label-branch"
-          :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
-          :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
-          data-placement="bottom">
-          <a
-            :href="mr.targetBranchCommitsPath">
-            {{mr.targetBranch}}
-          </a>
-        </span>
+        <strong>
+          Request to merge
+          <span
+            class="label-branch"
+            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
+            :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
+            data-placement="bottom"
+            v-html="mr.sourceBranchLink"></span>
+          <button
+            class="btn btn-transparent btn-clipboard has-tooltip"
+            data-title="Copy branch name to clipboard"
+            :data-clipboard-text="branchNameClipboardData">
+            <i
+              aria-hidden="true"
+              class="fa fa-clipboard"></i>
+          </button>
+          into
+          <span
+            class="label-branch"
+            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
+            :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
+            data-placement="bottom">
+            <a
+              :href="mr.targetBranchPath">
+              {{mr.targetBranch}}
+            </a>
+          </span>
+        </strong>
         <span
           v-if="shouldShowCommitsBehindText"
           class="diverged-commits-count">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
index 801b9fb1ba1..517838f92ac 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
@@ -1,6 +1,6 @@
-import PipelineStage from '../../pipelines/components/stage';
-import pipelineStatusIcon from '../../vue_shared/components/pipeline_status_icon';
-import { statusClassToSvgMap } from '../../vue_shared/pipeline_svg_icons';
+import PipelineStage from '../../pipelines/components/stage.vue';
+import ciIcon from '../../vue_shared/components/ci_icon.vue';
+import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
 
 export default {
   name: 'MRWidgetPipeline',
@@ -9,7 +9,7 @@ export default {
   },
   components: {
     'pipeline-stage': PipelineStage,
-    'pipeline-status-icon': pipelineStatusIcon,
+    ciIcon,
   },
   computed: {
     hasCIError() {
@@ -18,11 +18,14 @@ export default {
       return hasCI && !ciStatus;
     },
     svg() {
-      return statusClassToSvgMap.icon_status_failed;
+      return statusIconEntityMap.icon_status_failed;
     },
     stageText() {
       return this.mr.pipeline.details.stages.length > 1 ? 'stages' : 'stage';
     },
+    status() {
+      return this.mr.pipeline.details.status || {};
+    },
   },
   template: `
     <div class="mr-widget-heading">
@@ -38,13 +41,22 @@ export default {
           <span>Could not connect to the CI server. Please check your settings and try again.</span>
         </template>
         <template v-else>
-          <pipeline-status-icon :pipelineStatus="mr.pipelineDetailedStatus" />
+          <div>
+            <a
+              class="icon-link"
+              :href="this.status.details_path">
+              <ci-icon :status="status" />
+            </a>
+          </div>
           <span>
             Pipeline
             <a
               :href="mr.pipeline.path"
               class="pipeline-id">#{{mr.pipeline.id}}</a>
             {{mr.pipeline.details.status.label}}
+          </span>
+          <span
+            v-if="mr.pipeline.details.stages.length > 0">
             with {{stageText}}
           </span>
           <div class="mr-widget-pipeline-graph">
@@ -61,7 +73,7 @@ export default {
             for
             <a
               :href="mr.pipeline.commit.commit_path"
-              class="monospace js-commit-link">
+              class="commit-sha js-commit-link">
               {{mr.pipeline.commit.short_id}}</a>.
           </span>
           <span
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
index 7e66441e5ff..fc2e42c6821 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
@@ -20,7 +20,7 @@ export default {
         <p>
           The changes were not merged into
           <a
-            :href="mr.targetBranchCommitsPath"
+            :href="mr.targetBranchPath"
             class="label-branch">
             {{mr.targetBranch}}</a>.
         </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
index e3c27dfb76d..0bd31731a0b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
@@ -16,7 +16,7 @@ export default {
           The changes will be merged into
           <span class="label-branch">
             <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
-          </span>
+          </span>.
         </p>
       </section>
     </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
index bcdbedcd46b..419d174f3ff 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
@@ -87,7 +87,7 @@ export default {
             :href="mr.targetBranchPath"
             class="label-branch">
             {{mr.targetBranch}}
-          </a>
+          </a>.
         </p>
         <p v-if="mr.shouldRemoveSourceBranch">
           The source branch will be removed.
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
new file mode 100644
index 00000000000..79f8ef408e6
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
@@ -0,0 +1,16 @@
+export default {
+  name: 'MRWidgetSHAMismatch',
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        The source branch HEAD has recently changed. Please reload the page and review the changes before merging.
+      </span>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index b2eb32ead5f..bfe30ee4c08 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -27,6 +27,7 @@ export { default as NothingToMergeState } from './components/states/mr_widget_no
 export { default as MissingBranchState } from './components/states/mr_widget_missing_branch';
 export { default as NotAllowedState } from './components/states/mr_widget_not_allowed';
 export { default as ReadyToMergeState } from './components/states/mr_widget_ready_to_merge';
+export { default as SHAMismatchState } from './components/states/mr_widget_sha_mismatch';
 export { default as UnresolvedDiscussionsState } from './components/states/mr_widget_unresolved_discussions';
 export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked';
 export { default as PipelineFailedState } from './components/states/mr_widget_pipeline_failed';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 7c6c2d21714..5452e19bd8e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -16,6 +16,7 @@ import {
   MissingBranchState,
   NotAllowedState,
   ReadyToMergeState,
+  SHAMismatchState,
   UnresolvedDiscussionsState,
   PipelineBlockedState,
   PipelineFailedState,
@@ -203,6 +204,7 @@ export default {
     'mr-widget-not-allowed': NotAllowedState,
     'mr-widget-missing-branch': MissingBranchState,
     'mr-widget-ready-to-merge': ReadyToMergeState,
+    'mr-widget-sha-mismatch': SHAMismatchState,
     'mr-widget-squash-before-merge': SquashBeforeMerge,
     'mr-widget-checking': CheckingState,
     'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
index fee4113f3c8..fb78ea92da1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
@@ -21,6 +21,8 @@ export default function deviseState(data) {
     return 'unresolvedDiscussions';
   } else if (this.isPipelineBlocked) {
     return 'pipelineBlocked';
+  } else if (this.hasSHAChanged) {
+    return 'shaMismatch';
   } else if (this.canBeMerged) {
     return 'readyToMerge';
   }
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index faafeae5c5b..05e67706983 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -4,6 +4,7 @@ import { getStateKey } from '../dependencies';
 export default class MergeRequestStore {
 
   constructor(data) {
+    this.startingSha = data.diff_head_sha;
     this.setData(data);
   }
 
@@ -67,6 +68,7 @@ export default class MergeRequestStore {
     this.canMerge = !!data.merge_path;
     this.canCreateIssue = currentUser.can_create_issue || false;
     this.canCancelAutomaticMerge = !!data.cancel_merge_when_pipeline_succeeds_path;
+    this.hasSHAChanged = this.sha !== this.startingSha;
     this.canBeMerged = data.can_be_merged || false;
 
     // Cherry-pick and Revert actions related
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
index 625d7a01c65..605dd3a1ff4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
@@ -16,6 +16,7 @@ const stateToComponentMap = {
   mergeWhenPipelineSucceeds: 'mr-widget-merge-when-pipeline-succeeds',
   failedToMerge: 'mr-widget-failed-to-merge',
   autoMergeFailed: 'mr-widget-auto-merge-failed',
+  shaMismatch: 'mr-widget-sha-mismatch',
 };
 
 const statesToShowHelpWidget = [
diff --git a/app/assets/javascripts/vue_shared/ci_action_icons.js b/app/assets/javascripts/vue_shared/ci_action_icons.js
index ee41dc95beb..b21f0ab49fd 100644
--- a/app/assets/javascripts/vue_shared/ci_action_icons.js
+++ b/app/assets/javascripts/vue_shared/ci_action_icons.js
@@ -3,24 +3,19 @@ import retrySVG from 'icons/_icon_action_retry.svg';
 import playSVG from 'icons/_icon_action_play.svg';
 import stopSVG from 'icons/_icon_action_stop.svg';
 
+/**
+ * For the provided action returns the respective SVG
+ *
+ * @param  {String} action
+ * @return {SVG|String}
+ */
 export default function getActionIcon(action) {
-  let icon;
-  switch (action) {
-    case 'icon_action_cancel':
-      icon = cancelSVG;
-      break;
-    case 'icon_action_retry':
-      icon = retrySVG;
-      break;
-    case 'icon_action_play':
-      icon = playSVG;
-      break;
-    case 'icon_action_stop':
-      icon = stopSVG;
-      break;
-    default:
-      icon = '';
-  }
+  const icons = {
+    icon_action_cancel: cancelSVG,
+    icon_action_play: playSVG,
+    icon_action_retry: retrySVG,
+    icon_action_stop: stopSVG,
+  };
 
-  return icon;
+  return icons[action] || '';
 }
diff --git a/app/assets/javascripts/vue_shared/ci_status_icons.js b/app/assets/javascripts/vue_shared/ci_status_icons.js
index 48ad9214ac8..d9d0cad38e4 100644
--- a/app/assets/javascripts/vue_shared/ci_status_icons.js
+++ b/app/assets/javascripts/vue_shared/ci_status_icons.js
@@ -41,15 +41,3 @@ export const statusIconEntityMap = {
   icon_status_success: SUCCESS_SVG,
   icon_status_warning: WARNING_SVG,
 };
-
-export const statusCssClasses = {
-  icon_status_canceled: 'canceled',
-  icon_status_created: 'created',
-  icon_status_failed: 'failed',
-  icon_status_manual: 'manual',
-  icon_status_pending: 'pending',
-  icon_status_running: 'running',
-  icon_status_skipped: 'skipped',
-  icon_status_success: 'success',
-  icon_status_warning: 'warning',
-};
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
new file mode 100644
index 00000000000..caa28bff6db
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -0,0 +1,52 @@
+<script>
+import ciIcon from './ci_icon.vue';
+/**
+ * Renders CI Badge link with CI icon and status text based on
+ * API response shared between all places where it is used.
+ *
+ * Receives status object containing:
+ * status: {
+ *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   group:"running" // used for CSS class
+ *   icon: "icon_status_running" // used to render the icon
+ *   label:"running" // used for potential tooltip
+ *   text:"running" // text rendered
+ * }
+ *
+ * Used in:
+ * - Pipelines table - first column
+ * - Jobs table - first column
+ * - Pipeline show view - header
+ * - Job show view - header
+ * - MR widget
+ */
+
+export default {
+  props: {
+    status: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  components: {
+    ciIcon,
+  },
+
+  computed: {
+    cssClass() {
+      const className = this.status.group;
+
+      return className ? `ci-status ci-${this.status.group}` : 'ci-status';
+    },
+  },
+};
+</script>
+<template>
+  <a
+    :href="status.details_path"
+    :class="cssClass">
+    <ci-icon :status="status" />
+    {{status.text}}
+  </a>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 4d44baaa3c4..ec88119e16c 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -1,6 +1,27 @@
 <script>
-  import { statusIconEntityMap, statusCssClasses } from '../../vue_shared/ci_status_icons';
+  import { statusIconEntityMap } from '../ci_status_icons';
 
+  /**
+   * Renders CI icon based on API response shared between all places where it is used.
+   *
+   * Receives status object containing:
+   * status: {
+   *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+   *   group:"running" // used for CSS class
+   *   icon: "icon_status_running" // used to render the icon
+   *   label:"running" // used for potential tooltip
+   *   text:"running" // text rendered
+   * }
+   *
+   * Used in:
+   * - Pipelines table Badge
+   * - Pipelines table mini graph
+   * - Pipeline graph
+   * - Pipeline show view badge
+   * - Jobs table
+   * - Jobs show view header
+   * - Jobs show view sidebar
+   */
   export default {
     props: {
       status: {
@@ -15,7 +36,7 @@
       },
 
       cssClass() {
-        const status = statusCssClasses[this.status.icon];
+        const status = this.status.group;
         return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
       },
     },
diff --git a/app/assets/javascripts/vue_shared/components/commit.js b/app/assets/javascripts/vue_shared/components/commit.js
index fb68abd95a2..9b060a0a35f 100644
--- a/app/assets/javascripts/vue_shared/components/commit.js
+++ b/app/assets/javascripts/vue_shared/components/commit.js
@@ -119,14 +119,14 @@ export default {
       </div>
 
       <a v-if="hasCommitRef"
-        class="monospace branch-name"
+        class="ref-name"
         :href="commitRef.ref_url">
         {{commitRef.name}}
       </a>
 
       <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
 
-      <a class="commit-id monospace"
+      <a class="commit-sha"
         :href="commitUrl">
         {{shortSha}}
       </a>
diff --git a/app/assets/javascripts/vue_shared/components/pipeline_status_icon.js b/app/assets/javascripts/vue_shared/components/pipeline_status_icon.js
deleted file mode 100644
index ae246ada01b..00000000000
--- a/app/assets/javascripts/vue_shared/components/pipeline_status_icon.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { statusClassToSvgMap } from '../pipeline_svg_icons';
-
-export default {
-  name: 'PipelineStatusIcon',
-  props: {
-    pipelineStatus: { type: Object, required: true, default: () => ({}) },
-  },
-  computed: {
-    svg() {
-      return statusClassToSvgMap[this.pipelineStatus.icon];
-    },
-    statusClass() {
-      return `ci-status-icon ci-status-icon-${this.pipelineStatus.group}`;
-    },
-  },
-  template: `
-    <div :class="statusClass">
-      <a class="icon-link" :href="pipelineStatus.details_path">
-        <span v-html="svg" aria-hidden="true"></span>
-      </a>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
index 7ac7ceaa4e5..30d16e4ed3e 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -2,7 +2,7 @@
 import AsyncButtonComponent from '../../pipelines/components/async_button.vue';
 import PipelinesActionsComponent from '../../pipelines/components/pipelines_actions';
 import PipelinesArtifactsComponent from '../../pipelines/components/pipelines_artifacts';
-import PipelinesStatusComponent from '../../pipelines/components/status';
+import ciBadge from './ci_badge_link.vue';
 import PipelinesStageComponent from '../../pipelines/components/stage.vue';
 import PipelinesUrlComponent from '../../pipelines/components/pipeline_url';
 import PipelinesTimeagoComponent from '../../pipelines/components/time_ago';
@@ -39,7 +39,7 @@ export default {
     'commit-component': CommitComponent,
     'dropdown-stage': PipelinesStageComponent,
     'pipeline-url': PipelinesUrlComponent,
-    'status-scope': PipelinesStatusComponent,
+    ciBadge,
     'time-ago': PipelinesTimeagoComponent,
   },
 
@@ -196,11 +196,20 @@ export default {
 
       return '';
     },
+
+    pipelineStatus() {
+      if (this.pipeline.details && this.pipeline.details.status) {
+        return this.pipeline.details.status;
+      }
+      return {};
+    },
   },
 
   template: `
     <tr class="commit">
-      <status-scope :pipeline="pipeline"/>
+      <td class="commit-link">
+        <ci-badge :status="pipelineStatus"/>
+      </td>
 
       <pipeline-url :pipeline="pipeline"></pipeline-url>
 
diff --git a/app/assets/javascripts/vue_shared/pipeline_svg_icons.js b/app/assets/javascripts/vue_shared/pipeline_svg_icons.js
deleted file mode 100644
index 5af30ae74f0..00000000000
--- a/app/assets/javascripts/vue_shared/pipeline_svg_icons.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import canceledSvg from 'icons/_icon_status_canceled.svg';
-import createdSvg from 'icons/_icon_status_created.svg';
-import failedSvg from 'icons/_icon_status_failed.svg';
-import manualSvg from 'icons/_icon_status_manual.svg';
-import pendingSvg from 'icons/_icon_status_pending.svg';
-import runningSvg from 'icons/_icon_status_running.svg';
-import skippedSvg from 'icons/_icon_status_skipped.svg';
-import successSvg from 'icons/_icon_status_success.svg';
-import warningSvg from 'icons/_icon_status_warning.svg';
-
-import canceledBorderlessSvg from 'icons/_icon_status_canceled_borderless.svg';
-import createdBorderlessSvg from 'icons/_icon_status_created_borderless.svg';
-import failedBorderlessSvg from 'icons/_icon_status_failed_borderless.svg';
-import manualBorderlessSvg from 'icons/_icon_status_manual_borderless.svg';
-import pendingBorderlessSvg from 'icons/_icon_status_pending_borderless.svg';
-import runningBorderlessSvg from 'icons/_icon_status_running_borderless.svg';
-import skippedBorderlessSvg from 'icons/_icon_status_skipped_borderless.svg';
-import successBorderlessSvg from 'icons/_icon_status_success_borderless.svg';
-import warningBorderlessSvg from 'icons/_icon_status_warning_borderless.svg';
-
-export const statusClassToSvgMap = {
-  icon_status_canceled: canceledSvg,
-  icon_status_created: createdSvg,
-  icon_status_failed: failedSvg,
-  icon_status_manual: manualSvg,
-  icon_status_pending: pendingSvg,
-  icon_status_running: runningSvg,
-  icon_status_skipped: skippedSvg,
-  icon_status_success: successSvg,
-  icon_status_warning: warningSvg,
-};
-
-export const statusClassToBorderlessSvgMap = {
-  icon_status_canceled: canceledBorderlessSvg,
-  icon_status_created: createdBorderlessSvg,
-  icon_status_failed: failedBorderlessSvg,
-  icon_status_manual: manualBorderlessSvg,
-  icon_status_pending: pendingBorderlessSvg,
-  icon_status_running: runningBorderlessSvg,
-  icon_status_skipped: skippedBorderlessSvg,
-  icon_status_success: successBorderlessSvg,
-  icon_status_warning: warningBorderlessSvg,
-};
diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index c0de09f3968..dbdd5a4464b 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/app/assets/stylesheets/framework/gfm.scss
@@ -2,7 +2,7 @@
  * Styles that apply to all GFM related forms.
  */
 
+.gfm-commit,
 .gfm-commit_range {
-  font-family: $monospace_font;
-  font-size: 90%;
+  @extend .commit-sha;
 }
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index eb73f7cc794..678af978edd 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -112,7 +112,7 @@
     }
   }
 
-  .issue_edited_ago,
+  .issue-edited-ago,
   .note_edited_ago {
     display: none;
   }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 96d8a812723..a7c6cbaae21 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -289,11 +289,6 @@ pre {
   }
 }
 
-.monospace {
-  font-family: $monospace_font;
-  font-size: 90%;
-}
-
 code {
   &.key-fingerprint {
     background: $body-bg;
@@ -305,6 +300,24 @@ a > code {
   color: $link-color;
 }
 
+.monospace {
+  font-family: $monospace_font;
+}
+
+.commit-sha,
+.ref-name {
+  @extend .monospace;
+  font-size: 95%;
+}
+
+.git-revision-dropdown-toggle {
+  @extend .monospace;
+}
+
+.git-revision-dropdown .dropdown-content ul li a {
+  @extend .ref-name;
+}
+
 /**
  * Apply Markdown typography
  *
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index 32eb750180f..1c1392f8f67 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -12,10 +12,14 @@
     }
 
     &.branch-info {
-      .monospace,
+      .commit-sha,
       .commit-info {
         margin-left: 4px;
       }
+
+      .ref-name {
+        font-size: 12px;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index c8996753809..bb72f453d1b 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -206,11 +206,11 @@
       margin-left: $gl-padding;
     }
   }
-}
 
-.commit-short-id {
-  font-family: $monospace_font;
-  font-weight: 600;
+  .commit-sha {
+    font-size: 14px;
+    font-weight: 600;
+  }
 }
 
 .commit,
@@ -271,7 +271,7 @@
     }
   }
 
-  .commit-id {
+  .commit-sha {
     color: $gl-link-color;
   }
 
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index d29944207c5..7bec4bd5f56 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -387,7 +387,7 @@
         padding: 0 3px 0 0;
       }
 
-      .branch-name {
+      .ref-name {
         color: $black;
         display: inline-block;
         max-width: 180px;
@@ -398,7 +398,7 @@
         vertical-align: top;
       }
 
-      .short-sha {
+      .commit-sha {
         color: $gl-link-color;
         line-height: 1.3;
         vertical-align: top;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 0d5c4aed971..cfb1df4df84 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -2,11 +2,6 @@
 .diff-file {
   margin-bottom: $gl-padding;
 
-  .commit-short-id {
-    font-family: $regular_font;
-    font-weight: 400;
-  }
-
   .file-title,
   .file-title-flex-parent {
     cursor: pointer;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index af991a128f3..a42ae7e55a5 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -90,7 +90,7 @@
     }
 
     .build-link,
-    .branch-name {
+    .ref-name {
       color: $gl-text-color;
     }
 
@@ -135,7 +135,7 @@
     }
 
     .branch-commit {
-      .commit-id {
+      .commit-sha {
         margin-right: 0;
       }
     }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 87592926930..8f5db1b3b9c 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -90,11 +90,6 @@
     align-items: center;
     padding: $gl-padding-top $gl-padding 0;
 
-    i,
-    svg {
-      margin-right: 8px;
-    }
-
     svg {
       position: relative;
       top: 1px;
@@ -109,9 +104,10 @@
       flex-wrap: wrap;
     }
 
-    .ci-status-icon > .icon-link svg {
+    .icon-link > .ci-status-icon > svg {
       width: 22px;
       height: 22px;
+      margin-right: 8px;
     }
   }
 
@@ -160,6 +156,34 @@
     text-transform: capitalize;
   }
 
+  .label-branch {
+    @extend .ref-name;
+
+    color: $gl-text-color;
+    font-weight: bold;
+    overflow: hidden;
+    margin: 0 3px;
+    word-break: break-all;
+
+    &.label-truncated {
+      position: relative;
+      display: inline-block;
+      width: 250px;
+      margin-bottom: -3px;
+      white-space: nowrap;
+      text-overflow: clip;
+      line-height: 14px;
+
+      &::after {
+        position: absolute;
+        content: '...';
+        right: 0;
+        font-family: $regular_font;
+        background-color: $gray-light;
+      }
+    }
+  }
+
   .js-deployment-link {
     display: inline-block;
   }
@@ -359,34 +383,6 @@
   }
 }
 
-.label-branch {
-  color: $gl-text-color;
-  font-family: $monospace_font;
-  font-weight: bold;
-  overflow: hidden;
-  font-size: 90%;
-  margin: 0 3px;
-  word-break: break-all;
-
-  &.label-truncated {
-    position: relative;
-    display: inline-block;
-    width: 250px;
-    margin-bottom: -3px;
-    white-space: nowrap;
-    text-overflow: clip;
-    line-height: 14px;
-
-    &::after {
-      position: absolute;
-      content: '...';
-      right: 0;
-      font-family: $regular_font;
-      background-color: $gray-light;
-    }
-  }
-}
-
 .commits-empty {
   text-align: center;
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 6d7b7031c30..0600bb1cb1a 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -238,11 +238,6 @@ ul.notes {
 
           ul {
             margin: 3px 0 3px 16px !important;
-
-            .gfm-commit {
-              font-family: $monospace_font;
-              font-size: 12px;
-            }
           }
 
           p:first-child {
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 685b9775fe1..e4f5ab26b4d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -158,9 +158,13 @@
     float: none;
   }
 
+  .api {
+    @extend .monospace;
+  }
+
   .branch-commit {
 
-    .branch-name {
+    .ref-name {
       font-weight: bold;
       max-width: 120px;
       overflow: hidden;
@@ -182,7 +186,7 @@
       color: $gl-text-color;
     }
 
-    .commit-id {
+    .commit-sha {
       color: $gl-link-color;
     }
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c119f0c9b22..ed4a5474034 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -657,9 +657,8 @@ pre.light-well {
     color: $gl-text-color;
   }
 
-  .commit_short_id {
+  .commit-sha {
     margin-right: 5px;
-    color: $gl-link-color;
     font-weight: 600;
   }
 
@@ -825,7 +824,8 @@ pre.light-well {
 }
 
 .compare-form-group {
-  .dropdown-menu {
+  .dropdown-menu,
+  .inline-input-group {
     width: 100%;
 
     @media (min-width: $screen-sm-min) {
@@ -844,14 +844,6 @@ pre.light-well {
       width: auto;
     }
   }
-
-  .inline-input-group {
-    width: 100%;
-
-    @media (min-width: $screen-sm-min) {
-      width: 250px;
-    }
-  }
 }
 
 .clearable-input {
diff --git a/app/controllers/concerns/issuable_actions.rb b/app/controllers/concerns/issuable_actions.rb
index b199f18da1e..4cf645d6341 100644
--- a/app/controllers/concerns/issuable_actions.rb
+++ b/app/controllers/concerns/issuable_actions.rb
@@ -60,17 +60,24 @@ module IssuableActions
   end
 
   def bulk_update_params
-    params.require(:update).permit(
+    permitted_keys = [
       :issuable_ids,
       :assignee_id,
       :milestone_id,
       :state_event,
       :subscription_event,
-      assignee_ids: [],
       label_ids: [],
       add_label_ids: [],
       remove_label_ids: []
-    )
+    ]
+
+    if resource_name == 'issue'
+      permitted_keys << { assignee_ids: [] }
+    else
+      permitted_keys.unshift(:assignee_id)
+    end
+
+    params.require(:update).permit(permitted_keys)
   end
 
   def resource_name
diff --git a/app/controllers/concerns/routable_actions.rb b/app/controllers/concerns/routable_actions.rb
index d4ab6782444..afd110adcad 100644
--- a/app/controllers/concerns/routable_actions.rb
+++ b/app/controllers/concerns/routable_actions.rb
@@ -4,7 +4,7 @@ module RoutableActions
   def find_routable!(routable_klass, requested_full_path, extra_authorization_proc: nil)
     routable = routable_klass.find_by_full_path(requested_full_path, follow_redirects: request.get?)
 
-    if routable_authorized?(routable_klass, routable, extra_authorization_proc)
+    if routable_authorized?(routable, extra_authorization_proc)
       ensure_canonical_path(routable, requested_full_path)
       routable
     else
@@ -13,8 +13,8 @@ module RoutableActions
     end
   end
 
-  def routable_authorized?(routable_klass, routable, extra_authorization_proc)
-    action = :"read_#{routable_klass.to_s.underscore}"
+  def routable_authorized?(routable, extra_authorization_proc)
+    action = :"read_#{routable.class.to_s.underscore}"
     return false unless can?(current_user, action, routable)
 
     if extra_authorization_proc
@@ -30,7 +30,7 @@ module RoutableActions
     canonical_path = routable.full_path
     if canonical_path != requested_path
       if canonical_path.casecmp(requested_path) != 0
-        flash[:notice] = "Project '#{requested_path}' was moved to '#{canonical_path}'. Please update any links and bookmarks that may still have the old path."
+        flash[:notice] = "#{routable.class.to_s.titleize} '#{requested_path}' was moved to '#{canonical_path}'. Please update any links and bookmarks that may still have the old path."
       end
       redirect_to request.original_url.sub(requested_path, canonical_path)
     end
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 7c0459648ef..760ba246e3e 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -208,7 +208,6 @@ class Projects::IssuesController < Projects::ApplicationController
       description: view_context.markdown_field(@issue, :description),
       description_text: @issue.description,
       task_status: @issue.task_status,
-      issue_number: @issue.iid,
       updated_at: @issue.updated_at
     }
   end
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index c85e96cf78d..206d0753f08 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -42,7 +42,10 @@ module ButtonHelper
       class: "btn #{css_class}",
       data: data,
       type: :button,
-      title: title
+      title: title,
+      aria: {
+        label: title
+      }
   end
 
   def http_clone_button(project, placement = 'right', append_link: true)
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index 97b497a0fed..6d6f1361bf9 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -74,12 +74,8 @@ module CommitsHelper
   # Returns the sorted alphabetically links to branches, separated by a comma
   def commit_branches_links(project, branches)
     branches.sort.map do |branch|
-      link_to(
-        namespace_project_tree_path(project.namespace, project, branch)
-      ) do
-        content_tag :span, class: 'label label-gray' do
-          icon('code-fork') + ' ' + branch
-        end
+      link_to(project_ref_path(project, branch), class: "label label-gray ref-name") do
+        icon('code-fork') + " #{branch}"
       end
     end.join(" ").html_safe
   end
@@ -88,13 +84,8 @@ module CommitsHelper
   def commit_tags_links(project, tags)
     sorted = VersionSorter.rsort(tags)
     sorted.map do |tag|
-      link_to(
-        namespace_project_commits_path(project.namespace, project,
-                                       project.repository.find_tag(tag).name)
-      ) do
-        content_tag :span, class: 'label label-gray' do
-          icon('tag') + ' ' + tag
-        end
+      link_to(project_ref_path(project, tag), class: "label label-gray ref-name") do
+        icon('tag') + " #{tag}"
       end
     end.join(" ").html_safe
   end
@@ -198,8 +189,8 @@ module CommitsHelper
                                   tree_join(commit_sha, diff_new_path)),
       class: 'btn view-file js-view-file'
     ) do
-      raw('View file @') + content_tag(:span, commit_sha[0..6],
-                                       class: 'commit-short-id')
+      raw('View file @ ') + content_tag(:span, Commit.truncate_sha(commit_sha),
+                                       class: 'commit-sha')
     end
   end
 
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index 63bc3b11b56..4a06ee653ee 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -63,7 +63,7 @@ module DiffHelper
 
   def parallel_diff_discussions(left, right, diff_file)
     return unless @grouped_diff_discussions
-    
+
     discussions_left = discussions_right = nil
 
     if left && (left.unchanged? || left.removed?)
@@ -98,7 +98,7 @@ module DiffHelper
     [
       content_tag(:span, link_to(truncate(blob.name, length: 40), tree)),
       '@',
-      content_tag(:span, commit_id, class: 'monospace')
+      content_tag(:span, commit_id, class: 'commit-sha')
     ].join(' ').html_safe
   end
 
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index c14438da281..751d61955b7 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -164,9 +164,14 @@ module EventsHelper
 
   def event_note_title_html(event)
     if event.note_target
-      link_to(event_note_target_path(event), title: event.target_title, class: 'has-tooltip') do
-        "#{event.note_target_type} #{event.note_target_reference}"
-      end
+      text = raw("#{event.note_target_type} ") +
+        if event.commit_note?
+          content_tag(:span, event.note_target_reference, class: 'commit-sha')
+        else
+          event.note_target_reference
+        end
+
+      link_to(text, event_note_target_path(event), title: event.target_title, class: 'has-tooltip')
     else
       content_tag(:strong, '(deleted)')
     end
diff --git a/app/helpers/gitlab_routing_helper.rb b/app/helpers/gitlab_routing_helper.rb
index bcf71bc347b..fc308b3960e 100644
--- a/app/helpers/gitlab_routing_helper.rb
+++ b/app/helpers/gitlab_routing_helper.rb
@@ -54,6 +54,10 @@ module GitlabRoutingHelper
     namespace_project_builds_path(project.namespace, project, *args)
   end
 
+  def project_ref_path(project, ref_name, *args)
+    namespace_project_commits_path(project.namespace, project, ref_name, *args)
+  end
+
   def project_container_registry_path(project, *args)
     namespace_project_container_registry_index_path(project.namespace, project, *args)
   end
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index fbbce6876c2..9290e4ec133 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -67,9 +67,10 @@ module IssuablesHelper
   end
 
   def users_dropdown_label(selected_users)
-    if selected_users.length == 0
+    case selected_users.length
+    when 0
       "Unassigned"
-    elsif selected_users.length == 1
+    when 1
       selected_users[0].name
     else
       "#{selected_users[0].name} + #{selected_users.length - 1} more"
@@ -136,11 +137,9 @@ module IssuablesHelper
       author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "hidden-sm hidden-md hidden-lg")
     end
 
-    if issuable.tasks?
-      output << "&ensp;".html_safe
-      output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs hidden-sm")
-      output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-md hidden-lg")
-    end
+    output << "&ensp;".html_safe
+    output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs hidden-sm")
+    output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-md hidden-lg")
 
     output
   end
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index 0ff2d5ce4cd..19286fadb19 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -24,10 +24,13 @@ module TodosHelper
   end
 
   def todo_target_link(todo)
-    target = todo.target_type.titleize.downcase
-    link_to "#{target} #{todo.target_reference}", todo_target_path(todo),
-      class: 'has-tooltip',
-      title: todo.target.title
+    text = raw("#{todo.target_type.titleize.downcase} ") +
+      if todo.for_commit?
+        content_tag(:span, todo.target_reference, class: 'commit-sha')
+      else
+        todo.target_reference
+      end
+    link_to text, todo_target_path(todo), class: 'has-tooltip', title: todo.target.title
   end
 
   def todo_target_path(todo)
diff --git a/app/models/commit.rb b/app/models/commit.rb
index 3a143a5a1f6..8d54ce6eb25 100644
--- a/app/models/commit.rb
+++ b/app/models/commit.rb
@@ -326,10 +326,7 @@ class Commit
   end
 
   def raw_diffs(*args)
-    use_gitaly = Gitlab::GitalyClient.feature_enabled?(:commit_raw_diffs)
-    deltas_only = args.last.is_a?(Hash) && args.last[:deltas_only]
-
-    if use_gitaly && !deltas_only
+    if Gitlab::GitalyClient.feature_enabled?(:commit_raw_diffs)
       Gitlab::GitalyClient::Commit.diff_from_parent(self, *args)
     else
       raw.diffs(*args)
diff --git a/app/models/concerns/mentionable.rb b/app/models/concerns/mentionable.rb
index 6eddeab515e..c034bf9cbc0 100644
--- a/app/models/concerns/mentionable.rb
+++ b/app/models/concerns/mentionable.rb
@@ -44,14 +44,15 @@ module Mentionable
   end
 
   def all_references(current_user = nil, extractor: nil)
+    @extractors ||= {}
+
     # Use custom extractor if it's passed in the function parameters.
     if extractor
-      @extractor = extractor
+      @extractors[current_user] = extractor
     else
-      @extractor ||= Gitlab::ReferenceExtractor.
-        new(project, current_user)
+      extractor = @extractors[current_user] ||= Gitlab::ReferenceExtractor.new(project, current_user)
 
-      @extractor.reset_memoized_values
+      extractor.reset_memoized_values
     end
 
     self.class.mentionable_attrs.each do |attr, options|
@@ -62,10 +63,10 @@ module Mentionable
         skip_project_check: skip_project_check?
       )
 
-      @extractor.analyze(text, options)
+      extractor.analyze(text, options)
     end
 
-    @extractor
+    extractor
   end
 
   def mentioned_users(current_user = nil)
diff --git a/app/models/concerns/protected_branch_access.rb b/app/models/concerns/protected_branch_access.rb
index c41b807df8a..a40148a4394 100644
--- a/app/models/concerns/protected_branch_access.rb
+++ b/app/models/concerns/protected_branch_access.rb
@@ -7,5 +7,27 @@ module ProtectedBranchAccess
     belongs_to :protected_branch
 
     delegate :project, to: :protected_branch
+
+    validates :access_level, presence: true, inclusion: {
+      in: [
+        Gitlab::Access::MASTER,
+        Gitlab::Access::DEVELOPER,
+        Gitlab::Access::NO_ACCESS
+      ]
+    }
+
+    def self.human_access_levels
+      {
+        Gitlab::Access::MASTER => "Masters",
+        Gitlab::Access::DEVELOPER => "Developers + Masters",
+        Gitlab::Access::NO_ACCESS => "No one"
+      }.with_indifferent_access
+    end
+
+    def check_access(user)
+      return false if access_level == Gitlab::Access::NO_ACCESS
+
+      super
+    end
   end
 end
diff --git a/app/models/issue.rb b/app/models/issue.rb
index 27e3ed9bc7f..ecfc33ec1a1 100644
--- a/app/models/issue.rb
+++ b/app/models/issue.rb
@@ -174,7 +174,7 @@ class Issue < ActiveRecord::Base
 
   # Returns boolean if a related branch exists for the current issue
   # ignores merge requests branchs
-  def has_related_branch? 
+  def has_related_branch?
     project.repository.branch_names.any? do |branch|
       /\A#{iid}-(?!\d+-stable)/i =~ branch
     end
diff --git a/app/models/issue_assignee.rb b/app/models/issue_assignee.rb
index 0663d3aaef8..06d760b6a89 100644
--- a/app/models/issue_assignee.rb
+++ b/app/models/issue_assignee.rb
@@ -3,11 +3,4 @@ class IssueAssignee < ActiveRecord::Base
 
   belongs_to :issue
   belongs_to :assignee, class_name: "User", foreign_key: :user_id
-
-  after_create :update_assignee_cache_counts
-  after_destroy :update_assignee_cache_counts
-
-  def update_assignee_cache_counts
-    assignee&.update_cache_counts
-  end
 end
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index 59736f70f24..9e5db53b15e 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -125,7 +125,6 @@ class MergeRequest < ActiveRecord::Base
   participant :assignee
 
   after_save :keep_around_commit
-  after_save :update_assignee_cache_counts, if: :assignee_id_changed?
 
   def self.reference_prefix
     '!'
@@ -187,13 +186,6 @@ class MergeRequest < ActiveRecord::Base
     work_in_progress?(title) ? title : "WIP: #{title}"
   end
 
-  def update_assignee_cache_counts
-    # make sure we flush the cache for both the old *and* new assignees(if they exist)
-    previous_assignee = User.find_by_id(assignee_id_was) if assignee_id_was
-    previous_assignee&.update_cache_counts
-    assignee&.update_cache_counts
-  end
-
   # Returns a Hash of attributes to be used for Twitter card metadata
   def card_attributes
     {
diff --git a/app/models/project_services/chat_message/pipeline_message.rb b/app/models/project_services/chat_message/pipeline_message.rb
index 47b68f00cff..3edc395033c 100644
--- a/app/models/project_services/chat_message/pipeline_message.rb
+++ b/app/models/project_services/chat_message/pipeline_message.rb
@@ -35,7 +35,7 @@ module ChatMessage
 
     def activity
       {
-        title: "Pipeline #{pipeline_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status}",
+        title: "Pipeline #{pipeline_link} of #{ref_type} #{branch_link} by #{user_name} #{humanized_status}",
         subtitle: "in #{project_link}",
         text: "in #{pretty_duration(duration)}",
         image: user_avatar || ''
@@ -45,7 +45,7 @@ module ChatMessage
     private
 
     def message
-      "#{project_link}: Pipeline #{pipeline_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status} in #{pretty_duration(duration)}"
+      "#{project_link}: Pipeline #{pipeline_link} of #{ref_type} #{branch_link} by #{user_name} #{humanized_status} in #{pretty_duration(duration)}"
     end
 
     def humanized_status
@@ -70,7 +70,7 @@ module ChatMessage
     end
 
     def branch_link
-      "[#{ref}](#{branch_url})"
+      "`[#{ref}](#{branch_url})`"
     end
 
     def project_link
diff --git a/app/models/project_services/chat_message/push_message.rb b/app/models/project_services/chat_message/push_message.rb
index c52dd6ef8ef..04a59d559ca 100644
--- a/app/models/project_services/chat_message/push_message.rb
+++ b/app/models/project_services/chat_message/push_message.rb
@@ -61,7 +61,7 @@ module ChatMessage
     end
 
     def removed_branch_message
-      "#{user_name} removed #{ref_type} #{ref} from #{project_link}"
+      "#{user_name} removed #{ref_type} `#{ref}` from #{project_link}"
     end
 
     def push_message
@@ -102,7 +102,7 @@ module ChatMessage
     end
 
     def branch_link
-      "[#{ref}](#{branch_url})"
+      "`[#{ref}](#{branch_url})`"
     end
 
     def project_link
diff --git a/app/models/protected_branch/merge_access_level.rb b/app/models/protected_branch/merge_access_level.rb
index 771e3376613..e8d35ac326f 100644
--- a/app/models/protected_branch/merge_access_level.rb
+++ b/app/models/protected_branch/merge_access_level.rb
@@ -1,13 +1,3 @@
 class ProtectedBranch::MergeAccessLevel < ActiveRecord::Base
   include ProtectedBranchAccess
-
-  validates :access_level, presence: true, inclusion: { in: [Gitlab::Access::MASTER,
-                                                             Gitlab::Access::DEVELOPER] }
-
-  def self.human_access_levels
-    {
-      Gitlab::Access::MASTER => "Masters",
-      Gitlab::Access::DEVELOPER => "Developers + Masters"
-    }.with_indifferent_access
-  end
 end
diff --git a/app/models/protected_branch/push_access_level.rb b/app/models/protected_branch/push_access_level.rb
index 14610cb42b7..7a2e9e5ec5d 100644
--- a/app/models/protected_branch/push_access_level.rb
+++ b/app/models/protected_branch/push_access_level.rb
@@ -1,21 +1,3 @@
 class ProtectedBranch::PushAccessLevel < ActiveRecord::Base
   include ProtectedBranchAccess
-
-  validates :access_level, presence: true, inclusion: { in: [Gitlab::Access::MASTER,
-                                                             Gitlab::Access::DEVELOPER,
-                                                             Gitlab::Access::NO_ACCESS] }
-
-  def self.human_access_levels
-    {
-      Gitlab::Access::MASTER => "Masters",
-      Gitlab::Access::DEVELOPER => "Developers + Masters",
-      Gitlab::Access::NO_ACCESS => "No one"
-    }.with_indifferent_access
-  end
-
-  def check_access(user)
-    return false if access_level == Gitlab::Access::NO_ACCESS
-
-    super
-  end
 end
diff --git a/app/models/repository.rb b/app/models/repository.rb
index 11163ec77e9..b1563bfba8b 100644
--- a/app/models/repository.rb
+++ b/app/models/repository.rb
@@ -517,8 +517,8 @@ class Repository
   cache_method :avatar
 
   def readme
-    if head = tree(:head)
-      ReadmeBlob.new(head.readme, self)
+    if readme = tree(:head)&.readme
+      ReadmeBlob.new(readme, self)
     end
   end
 
diff --git a/app/models/user.rb b/app/models/user.rb
index f713a20233c..c7160a6af14 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -929,6 +929,11 @@ class User < ActiveRecord::Base
     assigned_open_issues_count(force: true)
   end
 
+  def invalidate_cache_counts
+    Rails.cache.delete(['users', id, 'assigned_open_merge_requests_count'])
+    Rails.cache.delete(['users', id, 'assigned_open_issues_count'])
+  end
+
   def todos_done_count(force: false)
     Rails.cache.fetch(['users', id, 'todos_done_count'], force: force) do
       TodosFinder.new(self, state: :done).execute.count
diff --git a/app/serializers/pipeline_entity.rb b/app/serializers/pipeline_entity.rb
index 51ad0a3f8ba..ea57cc97a7e 100644
--- a/app/serializers/pipeline_entity.rb
+++ b/app/serializers/pipeline_entity.rb
@@ -38,10 +38,7 @@ class PipelineEntity < Grape::Entity
 
     expose :path do |pipeline|
       if pipeline.ref
-        namespace_project_tree_path(
-          pipeline.project.namespace,
-          pipeline.project,
-          id: pipeline.ref)
+        project_ref_path(pipeline.project, pipeline.ref)
       end
     end
 
diff --git a/app/serializers/request_aware_entity.rb b/app/serializers/request_aware_entity.rb
index 3039014aaaa..d53fcfb8c1b 100644
--- a/app/serializers/request_aware_entity.rb
+++ b/app/serializers/request_aware_entity.rb
@@ -3,6 +3,7 @@ module RequestAwareEntity
 
   included do
     include Gitlab::Routing
+    include GitlabRoutingHelper
     include Gitlab::Allowable
   end
 
diff --git a/app/services/issuable/bulk_update_service.rb b/app/services/issuable/bulk_update_service.rb
index 40ff9b8b867..5d42a89fced 100644
--- a/app/services/issuable/bulk_update_service.rb
+++ b/app/services/issuable/bulk_update_service.rb
@@ -7,7 +7,7 @@ module Issuable
       ids = params.delete(:issuable_ids).split(",")
       items = model_class.where(id: ids)
 
-      %i(state_event milestone_id assignee_id assignee_ids add_label_ids remove_label_ids subscription_event).each do |key|
+      permitted_attrs(type).each do |key|
         params.delete(key) unless params[key].present?
       end
 
@@ -26,5 +26,17 @@ module Issuable
         success:  !items.count.zero?
       }
     end
+
+    private
+
+    def permitted_attrs(type)
+      attrs = %i(state_event milestone_id assignee_id assignee_ids add_label_ids remove_label_ids subscription_event)
+
+      if type == 'issue'
+        attrs.push(:assignee_ids)
+      else
+        attrs.push(:assignee_id)
+      end
+    end
   end
 end
diff --git a/app/services/issuable_base_service.rb b/app/services/issuable_base_service.rb
index c1e532b504a..dc2ab99b982 100644
--- a/app/services/issuable_base_service.rb
+++ b/app/services/issuable_base_service.rb
@@ -178,6 +178,7 @@ class IssuableBaseService < BaseService
       after_create(issuable)
       issuable.create_cross_references!(current_user)
       execute_hooks(issuable)
+      issuable.assignees.each(&:invalidate_cache_counts)
     end
 
     issuable
@@ -234,6 +235,11 @@ class IssuableBaseService < BaseService
           old_assignees: old_assignees
         )
 
+        if old_assignees != issuable.assignees
+          assignees = old_assignees + issuable.assignees.to_a
+          assignees.compact.each(&:invalidate_cache_counts)
+        end
+
         after_update(issuable)
         issuable.create_new_cross_references!(current_user)
         execute_hooks(issuable, 'update')
diff --git a/app/services/members/authorized_destroy_service.rb b/app/services/members/authorized_destroy_service.rb
index a85b9465c84..7912cac65d3 100644
--- a/app/services/members/authorized_destroy_service.rb
+++ b/app/services/members/authorized_destroy_service.rb
@@ -43,8 +43,9 @@ module Members
         )
 
         project.merge_requests.opened.assigned_to(member.user).update_all(assignee_id: nil)
-        member.user.update_cache_counts
       end
+
+      member.user.invalidate_cache_counts
     end
   end
 end
diff --git a/app/services/system_note_service.rb b/app/services/system_note_service.rb
index 174e7c6e95b..0766df50ed2 100644
--- a/app/services/system_note_service.rb
+++ b/app/services/system_note_service.rb
@@ -79,7 +79,7 @@ module SystemNoteService
 
         text_parts.join(' and ')
       elsif old_assignees.any?
-        "removed all assignees"
+        "removed assignee"
       elsif issue.assignees.any?
         "assigned to #{issue.assignees.map(&:to_reference).to_sentence}"
       end
diff --git a/app/views/discussions/_discussion.html.haml b/app/views/discussions/_discussion.html.haml
index 38e85168f40..74992e439f3 100644
--- a/app/views/discussions/_discussion.html.haml
+++ b/app/views/discussions/_discussion.html.haml
@@ -26,7 +26,7 @@
               - commit = discussion.noteable
               - if commit
                 commit
-                = link_to commit.short_id, url, class: 'monospace'
+                = link_to commit.short_id, url, class: 'commit-sha'
               - else
                 a deleted commit
             - elsif discussion.diff_discussion?
diff --git a/app/views/events/_commit.html.haml b/app/views/events/_commit.html.haml
index 1bc9f604438..3c64f1be5ff 100644
--- a/app/views/events/_commit.html.haml
+++ b/app/views/events/_commit.html.haml
@@ -1,5 +1,5 @@
 %li.commit
   .commit-row-title
-    = link_to truncate_sha(commit[:id]), namespace_project_commit_path(project.namespace, project, commit[:id]), class: "commit_short_id", alt: '', title: truncate_sha(commit[:id])
+    = link_to truncate_sha(commit[:id]), namespace_project_commit_path(project.namespace, project, commit[:id]), class: "commit-sha", alt: '', title: truncate_sha(commit[:id])
     &middot;
     = markdown event_commit_title(commit[:message]), project: project, pipeline: :single_line, author: event.author
diff --git a/app/views/import/fogbugz/new_user_map.html.haml b/app/views/import/fogbugz/new_user_map.html.haml
index 9999a4362c6..c52a515226e 100644
--- a/app/views/import/fogbugz/new_user_map.html.haml
+++ b/app/views/import/fogbugz/new_user_map.html.haml
@@ -46,6 +46,3 @@
 
   .form-actions
     = submit_tag 'Continue to the next step', class: 'btn btn-create'
-
-:javascript
-  new UsersSelect();
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index 0e64ebd71b8..b689991bb6d 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -13,7 +13,7 @@
         .location-badge= label
       .search-input-wrap
         .dropdown{ data: { url: search_autocomplete_path } }
-          = search_field_tag 'search', nil, placeholder: 'Search', class: 'search-input dropdown-menu-toggle no-outline js-search-dashboard-options', spellcheck: false, tabindex: '1', autocomplete: 'off', data: { toggle: 'dropdown', issues_path: issues_dashboard_url, mr_path: merge_requests_dashboard_url }
+          = search_field_tag 'search', nil, placeholder: 'Search', class: 'search-input dropdown-menu-toggle no-outline js-search-dashboard-options', spellcheck: false, tabindex: '1', autocomplete: 'off', data: { toggle: 'dropdown', issues_path: issues_dashboard_url, mr_path: merge_requests_dashboard_url }, aria: { label: 'Search' }
           .dropdown-menu.dropdown-select
             = dropdown_content do
               %ul
diff --git a/app/views/projects/_last_commit.html.haml b/app/views/projects/_last_commit.html.haml
index df3b1c75508..d104cc7c1a3 100644
--- a/app/views/projects/_last_commit.html.haml
+++ b/app/views/projects/_last_commit.html.haml
@@ -5,7 +5,7 @@
     = ci_icon_for_status(status)
     = ci_text_for_status(status)
 
-= link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+= link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-sha"
 = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit), class: "commit-row-message"
 &middot;
 #{time_ago_with_tooltip(commit.committed_date)} by
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 768bc1fb323..f8a6e98d280 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -5,7 +5,7 @@
         .event-last-push
           .event-last-push-text
             %span You pushed to
-            = link_to namespace_project_commits_path(event.project.namespace, event.project, event.ref_name) do
+            = link_to namespace_project_commits_path(event.project.namespace, event.project, event.ref_name, class: 'commit-sha') do
               %strong= event.ref_name
             - if @project && event.project != @project
               %span at
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index ae4658d8ca1..a2ec3d44185 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -22,7 +22,7 @@
                     %strong
                       = link_to_gfm truncate(commit.title, length: 35), namespace_project_commit_path(@project.namespace, @project, commit.id), class: "cdark"
                     .pull-right
-                      = link_to commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit), class: "monospace"
+                      = link_to commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit), class: "commit-sha"
                     &nbsp;
                   .light
                     = commit_author_link(commit, avatar: false)
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 8b35a037c55..304c512e1b5 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -6,7 +6,8 @@
 - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
 %li{ class: "js-branch-#{branch.name}" }
   %div
-    = link_to namespace_project_tree_path(@project.namespace, @project, branch.name), class: 'item-title str-truncated' do
+    = link_to namespace_project_tree_path(@project.namespace, @project, branch.name), class: 'item-title str-truncated ref-name' do
+      = icon('code-fork')
       = branch.name
     &nbsp;
     - if branch.name == @repository.root_ref
diff --git a/app/views/projects/branches/_commit.html.haml b/app/views/projects/branches/_commit.html.haml
index de607772df6..ad8f9da0621 100644
--- a/app/views/projects/branches/_commit.html.haml
+++ b/app/views/projects/branches/_commit.html.haml
@@ -1,7 +1,7 @@
 .branch-commit
   .icon-container.commit-icon
     = custom_icon("icon_commit")
-  = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-id monospace"
+  = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-sha"
   &middot;
   %span.str-truncated
     = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 796ecdfd014..5a0eba3551f 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -17,11 +17,13 @@
       .help-block.text-danger.js-branch-name-error
   .form-group
     = label_tag :ref, 'Create from', class: 'control-label'
-    .col-sm-10.dropdown.create-from
-      = hidden_field_tag :ref, default_ref
-      = button_tag type: 'button', title: default_ref, class: 'dropdown-toggle form-control js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
-        .text-left.dropdown-toggle-text= default_ref
-      = render 'shared/ref_dropdown', dropdown_class: 'wide'
+    .col-sm-10.create-from
+      .dropdown
+        = hidden_field_tag :ref, default_ref
+        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select git-revision-dropdown-toggle', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+          .text-left.dropdown-toggle-text= default_ref
+          = icon('chevron-down')
+        = render 'shared/ref_dropdown', dropdown_class: 'wide'
       .help-block Existing branch name, tag, or commit SHA
   .form-actions
     = button_tag 'Create branch', class: 'btn btn-create', tabindex: 3
diff --git a/app/views/projects/builds/_header.html.haml b/app/views/projects/builds/_header.html.haml
index a0f8f105d9a..d4cdb709b97 100644
--- a/app/views/projects/builds/_header.html.haml
+++ b/app/views/projects/builds/_header.html.haml
@@ -6,18 +6,16 @@
     = render 'ci/status/badge', status: @build.detailed_status(current_user), link: false, title: @build.status_title
     %strong
       Job
-      = link_to namespace_project_build_path(@project.namespace, @project, @build), class: 'js-build-id' do
-        \##{@build.id}
+      = link_to "##{@build.id}", namespace_project_build_path(@project.namespace, @project, @build), class: 'js-build-id'
     in pipeline
-    = link_to pipeline_path(pipeline) do
-      %strong ##{pipeline.id}
-    for commit
-    = link_to namespace_project_commit_path(@project.namespace, @project, pipeline.sha) do
-      %strong= pipeline.short_sha
+    %strong
+      = link_to "##{pipeline.id}", pipeline_path(pipeline)
+    for
+    %strong
+      = link_to pipeline.short_sha, namespace_project_commit_path(@project.namespace, @project, pipeline.sha), class: 'commit-sha'
     from
-    = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
-      %code
-        = @build.ref
+    %strong
+      = link_to @build.ref, project_ref_path(@project, @build.ref), class: 'ref-name'
 
     = render "projects/builds/user" if @build.user
 
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index c0019996176..e796920ac82 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -23,14 +23,14 @@
       - if job.ref
         .icon-container
           = job.tag? ? icon('tag') : icon('code-fork')
-        = link_to job.ref, namespace_project_commits_path(job.project.namespace, job.project, job.ref), class: "monospace branch-name"
+        = link_to job.ref, project_ref_path(job.project, job.ref), class: "ref-name"
       - else
         .light none
       .icon-container.commit-icon
         = custom_icon("icon_commit")
 
     - if commit_sha
-      = link_to job.short_sha, namespace_project_commit_path(job.project.namespace, job.project, job.sha), class: "commit-id monospace"
+      = link_to job.short_sha, namespace_project_commit_path(job.project.namespace, job.project, job.sha), class: "commit-sha"
 
     - if job.stuck?
       = icon('warning', class: 'text-warning has-tooltip', title: 'Job is stuck. Check runners.')
@@ -58,7 +58,7 @@
       - if pipeline.user
         = user_avatar(user: pipeline.user, size: 20)
       - else
-        %span.monospace API
+        %span.api API
 
   - if admin
     %td
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 64adb70cb81..0aef5822f81 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,6 +1,8 @@
 .page-content-header
   .header-main-content
-    %strong Commit #{@commit.short_id}
+    %strong
+      Commit
+      %span.commit-sha= @commit.short_id
     = clipboard_button(text: @commit.id, title: "Copy commit SHA to clipboard")
     %span.hidden-xs authored
     #{time_ago_with_tooltip(@commit.authored_date)}
@@ -57,7 +59,7 @@
       = custom_icon("icon_commit")
     %span.cgray= pluralize(@commit.parents.count, "parent")
     - @commit.parents.each do |parent|
-      = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace"
+      = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "commit-sha"
     %span.commit-info.branches
       %i.fa.fa-spinner.fa-spin
 
@@ -68,9 +70,10 @@
         = link_to namespace_project_pipeline_path(@project.namespace, @project, last_pipeline.id) do
           = ci_icon_for_status(last_pipeline.status)
       Pipeline
-      = link_to "##{last_pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, last_pipeline.id), class: "monospace"
+      = link_to "##{last_pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, last_pipeline.id)
       = ci_label_for_status(last_pipeline.status)
       - if last_pipeline.stages.any?
+        with #{"stage".pluralize(last_pipeline.stages.count)}
         .mr-widget-pipeline-graph
           = render 'shared/mini_pipeline_graph', pipeline: last_pipeline, klass: 'js-commit-pipeline-graph'
       in
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
deleted file mode 100644
index 3ee85723ebe..00000000000
--- a/app/views/projects/commit/_pipeline.html.haml
+++ /dev/null
@@ -1,52 +0,0 @@
-.pipeline-graph-container
-  .row-content-block.build-content.middle-block.pipeline-actions
-    .pull-right
-      - if can?(current_user, :update_pipeline, pipeline.project)
-        - if pipeline.builds.latest.failed.any?(&:retryable?)
-          = link_to "Retry", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'js-retry-button btn btn-grouped btn-primary', method: :post
-
-        - if pipeline.builds.running_or_pending.any?
-          = link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
-
-    .oneline.clearfix
-      - if defined?(pipeline_details) && pipeline_details
-        Pipeline
-        = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
-        with
-        = pluralize pipeline.statuses.count(:id), "job"
-        - if pipeline.ref
-          for
-          = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
-        - if defined?(link_to_commit) && link_to_commit
-          for commit
-          = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
-        - if pipeline.duration
-          in
-          = time_interval_in_words pipeline.duration
-
-  .row-content-block.build-content.middle-block.js-pipeline-graph.hidden
-    = render "projects/pipelines/graph", pipeline: pipeline
-
-- if pipeline.yaml_errors.present?
-  .bs-callout.bs-callout-danger
-    %h4 Found errors in your .gitlab-ci.yml:
-    %ul
-      - pipeline.yaml_errors.split(",").each do |error|
-        %li= error
-    You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
-
-- if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
-  .bs-callout.bs-callout-warning
-    \.gitlab-ci.yml not found in this commit
-
-.table-holder.pipeline-holder
-  %table.table.ci-table.pipeline
-    %thead
-      %tr
-        %th Status
-        %th Job ID
-        %th Name
-        %th
-        %th Coverage
-        %th
-    = render partial: "projects/stage/stage", collection: pipeline.stages, as: :stage
diff --git a/app/views/projects/commit/branches.html.haml b/app/views/projects/commit/branches.html.haml
index 2b0c9a4b4de..911c9ddce06 100644
--- a/app/views/projects/commit/branches.html.haml
+++ b/app/views/projects/commit/branches.html.haml
@@ -1,15 +1,15 @@
-- if @branches.any?
-  %span
-    - branch = commit_default_branch(@project, @branches)
-    = link_to(namespace_project_tree_path(@project.namespace, @project, branch)) do
-      %span.label.label-gray
-        = branch
-    - if @branches.any? || @tags.any?
-      = link_to("#", class: "js-details-expand") do
-        %span.label.label-gray
-          \...
+- if @branches.any? || @tags.any?
+  - branch = commit_default_branch(@project, @branches)
+  = link_to(project_ref_path(@project, branch), class: "label label-gray ref-name") do
+    = icon('code-fork')
+    = branch
+
+  -# `commit_default_branch` deletes the default branch from `@branches`,
+  -# so only render this if we have more branches left
+  - if @branches.any? || @tags.any?
+    %span
+      = link_to "…", "#", class: "js-details-expand label label-gray"
+
       %span.js-details-content.hide
-        - if @branches.any?
-          = commit_branches_links(@project, @branches)
-        - if @tags.any?
-          = commit_tags_links(@project, @tags)
+        = commit_branches_links(@project, @branches) if @branches.any?
+        = commit_tags_links(@project, @tags) if @tags.any?
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 8f32d2b72e5..3350a0ec152 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -37,6 +37,6 @@
       .commit-actions.flex-row.hidden-xs
         - if commit.status(ref)
           = render_commit_status(commit, ref: ref)
+        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-sha btn btn-transparent"
         = clipboard_button(text: commit.id, title: "Copy commit SHA to clipboard")
-        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
         = link_to_browse_code(project, commit)
diff --git a/app/views/projects/commits/_inline_commit.html.haml b/app/views/projects/commits/_inline_commit.html.haml
index c03bc3f9df9..5fb89935467 100644
--- a/app/views/projects/commits/_inline_commit.html.haml
+++ b/app/views/projects/commits/_inline_commit.html.haml
@@ -1,6 +1,6 @@
 %li.commit.inline-commit
   .commit-row-title
-    = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+    = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-sha"
     &nbsp;
     %span.str-truncated
       = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index 1f4c9fac54c..adb724c1b8d 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -7,7 +7,7 @@
       .input-group.inline-input-group
         %span.input-group-addon from
         = hidden_field_tag :from, params[:from]
-        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
+        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
           .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag'
       = render 'shared/ref_dropdown'
     .compare-ellipsis.inline ...
@@ -15,7 +15,7 @@
       .input-group.inline-input-group
         %span.input-group-addon to
         = hidden_field_tag :to, params[:to]
-        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
+        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
           .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag'
       = render 'shared/ref_dropdown'
     &nbsp;
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index 45be6581cfc..2cf14859f30 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -6,10 +6,10 @@
   .sub-header-block
     Compare Git revisions.
     %br
-    Fill input field with commit id like
-    %code.label-branch 4eedf23
+    Fill input field with commit SHA like
+    %code.ref-name 4eedf23
     or branch/tag name like
-    %code.label-branch master
+    %code.ref-name master
     and press compare button for the commits list and a code diff.
     %br
     Changes are shown <b>from</b> the version in the first field <b>to</b> the version in the second field.
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 0dfc9fe20ed..a1bca2cf83a 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -16,9 +16,9 @@
           There isn't anything to compare.
         %p.slead
           - if params[:to] == params[:from]
-            %span.label-branch= params[:from]
+            %span.ref-name= params[:from]
             and
-            %span.label-branch= params[:to]
+            %span.ref-name= params[:to]
             are the same.
           - else
             You'll need to use different branch names to get a valid comparison.
diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml
index 170d786ecbf..31fd982c522 100644
--- a/app/views/projects/deployments/_commit.html.haml
+++ b/app/views/projects/deployments/_commit.html.haml
@@ -2,10 +2,10 @@
   - if deployment.ref
     .icon-container
       = deployment.tag? ? icon('tag') : icon('code-fork')
-    = link_to deployment.ref, namespace_project_commits_path(@project.namespace, @project, deployment.ref), class: "monospace branch-name"
+    = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
   .icon-container.commit-icon
     = custom_icon("icon_commit")
-  = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-id monospace"
+  = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha"
 
   %p.commit-title
     %span
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 160345cfaa5..d9643dc7957 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -40,8 +40,8 @@
           .form_group.prepend-top-20.sharing-and-permissions
             .row.js-visibility-select
               .col-md-9
-                %label.label-light
-                  = label_tag :project_visibility, 'Project Visibility', class: 'label-light'
+                .label-light
+                  = label_tag :project_visibility, 'Project Visibility', class: 'label-light', for: :project_visibility_level
                   = link_to "(?)", help_page_path("public_access/public_access")
                 %span.help-block
               .col-md-3.visibility-select-container
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
index f458646522c..b23bbadbdb4 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -27,7 +27,7 @@
         = custom_icon("icon_commit")
 
     - if commit_sha
-      = link_to generic_commit_status.short_sha, namespace_project_commit_path(generic_commit_status.project.namespace, generic_commit_status.project, generic_commit_status.sha), class: "commit-id monospace"
+      = link_to generic_commit_status.short_sha, namespace_project_commit_path(generic_commit_status.project.namespace, generic_commit_status.project, generic_commit_status.sha), class: "commit-sha"
 
     - if retried
       = icon('warning', class: 'text-warning has-tooltip', title: 'Status was retried.')
@@ -48,7 +48,7 @@
       - if generic_commit_status.pipeline.user
         = user_avatar(user: generic_commit_status.pipeline.user, size: 20)
       - else
-        %span.monospace API
+        %span.api API
 
   - if admin
     %td
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 6bc6bf76e18..dba092c8844 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -17,7 +17,7 @@
             .description
               %strong Create a merge request
               %span
-                Creates a branch named after this issue and a merge request. The source branch is '#{@project.default_branch}' by default.
+                Creates a merge request named after this issue, with source branch created from '#{@project.default_branch}'.
         %li.divider.droplab-item-ignore
         %li{ role: 'button', data: {  value: 'create-branch', 'text' => 'Create a branch' } }
           .menu-item
@@ -26,4 +26,4 @@
             .description
               %strong Create a branch
               %span
-                Creates a branch named after this issue. The source branch is '#{@project.default_branch}' by default.
+                Creates a branch named after this issue, from '#{@project.default_branch}'.
diff --git a/app/views/projects/issues/_related_branches.html.haml b/app/views/projects/issues/_related_branches.html.haml
index 1892ebb512f..8c9f6f3b4df 100644
--- a/app/views/projects/issues/_related_branches.html.haml
+++ b/app/views/projects/issues/_related_branches.html.haml
@@ -11,5 +11,4 @@
             = render_pipeline_status(pipeline)
         %span.related-branch-info
           %strong
-            = link_to namespace_project_compare_path(@project.namespace, @project, from: @project.default_branch, to: branch), class: "label-branch" do
-              = branch
+            = link_to branch, namespace_project_compare_path(@project.namespace, @project, from: @project.default_branch, to: branch), class: "ref-name"
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 9084883eb3e..f66724900de 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -51,12 +51,17 @@
 
 .issue-details.issuable-details
   .detail-page-description.content-block
-    .issue-title-data.hidden{ "data" => { "endpoint" => rendered_title_namespace_project_issue_path(@project.namespace, @project, @issue),
-      "can-update-tasks-class" => can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '',
+    #js-issuable-app{ "data" => { "endpoint" => rendered_title_namespace_project_issue_path(@project.namespace, @project, @issue),
+      "can-update" => can?(current_user, :update_issue, @issue).to_s,
+      "issuable-ref" => @issue.to_reference,
     } }
-    .issue-title-entrypoint
+      %h2.title= markdown_field(@issue, :title)
+      - if @issue.description.present?
+        .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' }
+          .wiki= markdown_field(@issue, :description)
+          %textarea.hidden.js-task-list-field= @issue.description
 
-    = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue_edited_ago')
+    = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')
 
     #merge-requests{ data: { url: referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue) } }
       // This element is filled in using JavaScript.
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 11b7aaec704..94b9577e9eb 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -37,7 +37,7 @@
       by #{link_to_member(@project, merge_request.author, avatar: false)}
       - if merge_request.target_project.default_branch != merge_request.target_branch
         &nbsp;
-        = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch) do
+        = link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do
           = icon('code-fork')
           = merge_request.target_branch
 
diff --git a/app/views/projects/merge_requests/_new_compare.html.haml b/app/views/projects/merge_requests/_new_compare.html.haml
index 9cf24e10842..0f37abb579c 100644
--- a/app/views/projects/merge_requests/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/_new_compare.html.haml
@@ -21,8 +21,8 @@
                   selected: f.object.source_project_id
           .merge-request-select.dropdown
             = f.hidden_field :source_branch
-            = dropdown_toggle f.object.source_branch || "Select source branch", { toggle: "dropdown", field_name: "#{f.object_name}[source_branch]" }, { toggle_class: "js-compare-dropdown js-source-branch" }
-            .dropdown-menu.dropdown-menu-selectable.dropdown-source-branch
+            = dropdown_toggle f.object.source_branch || "Select source branch", { toggle: "dropdown", field_name: "#{f.object_name}[source_branch]" }, { toggle_class: "js-compare-dropdown js-source-branch git-revision-dropdown-toggle" }
+            .dropdown-menu.dropdown-menu-selectable.dropdown-source-branch.git-revision-dropdown
               = dropdown_title("Select source branch")
               = dropdown_filter("Search branches")
               = dropdown_content do
@@ -51,8 +51,8 @@
                   selected: f.object.target_project_id
           .merge-request-select.dropdown
             = f.hidden_field :target_branch
-            = dropdown_toggle f.object.target_branch, { toggle: "dropdown", field_name: "#{f.object_name}[target_branch]" }, { toggle_class: "js-compare-dropdown js-target-branch" }
-            .dropdown-menu.dropdown-menu-selectable.dropdown-target-branch.js-target-branch-dropdown
+            = dropdown_toggle f.object.target_branch, { toggle: "dropdown", field_name: "#{f.object_name}[target_branch]" }, { toggle_class: "js-compare-dropdown js-target-branch git-revision-dropdown-toggle" }
+            .dropdown-menu.dropdown-menu-selectable.dropdown-target-branch.js-target-branch-dropdown.git-revision-dropdown
               = dropdown_title("Select target branch")
               = dropdown_filter("Search branches")
               = dropdown_content do
diff --git a/app/views/projects/merge_requests/_new_submit.html.haml b/app/views/projects/merge_requests/_new_submit.html.haml
index da79ca2ee75..e3ecbee5490 100644
--- a/app/views/projects/merge_requests/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/_new_submit.html.haml
@@ -3,9 +3,9 @@
 %p.slead
   - source_title, target_title = format_mr_branch_names(@merge_request)
   From
-  %strong.label-branch= source_title
+  %strong.ref-name= source_title
   %span into
-  %strong.label-branch= target_title
+  %strong.ref-name= target_title
 
   %span.pull-right
     = link_to 'Change branches', mr_change_branches_path(@merge_request)
diff --git a/app/views/projects/merge_requests/show/_versions.html.haml b/app/views/projects/merge_requests/show/_versions.html.haml
index 11b0c55be0b..37117bc64a3 100644
--- a/app/views/projects/merge_requests/show/_versions.html.haml
+++ b/app/views/projects/merge_requests/show/_versions.html.haml
@@ -20,25 +20,27 @@
               - @merge_request_diffs.each do |merge_request_diff|
                 %li
                   = link_to merge_request_version_path(@project, @merge_request, merge_request_diff, @start_sha), class: ('is-active' if merge_request_diff == @merge_request_diff) do
-                    %strong
-                      - if merge_request_diff.latest?
-                        latest version
-                      - else
-                        version #{version_index(merge_request_diff)}
-                    .monospace= short_sha(merge_request_diff.head_commit_sha)
-                    %small
-                      #{number_with_delimiter(merge_request_diff.commits_count)} #{'commit'.pluralize(merge_request_diff.commits_count)},
-                      = time_ago_with_tooltip(merge_request_diff.created_at)
+                    %div
+                      %strong
+                        - if merge_request_diff.latest?
+                          latest version
+                        - else
+                          version #{version_index(merge_request_diff)}
+                    %div
+                      %small.commit-sha= short_sha(merge_request_diff.head_commit_sha)
+                    %div
+                      %small
+                        #{number_with_delimiter(merge_request_diff.commits_count)} #{'commit'.pluralize(merge_request_diff.commits_count)},
+                        = time_ago_with_tooltip(merge_request_diff.created_at)
 
       - if @merge_request_diff.base_commit_sha
         and
         %span.dropdown.inline.mr-version-compare-dropdown
           %a.btn.btn-default.dropdown-toggle{ data: {toggle: :dropdown} }
-            %span
-              - if @start_version
-                version #{version_index(@start_version)}
-              - else
-                #{@merge_request.target_branch}
+            - if @start_version
+              version #{version_index(@start_version)}
+            - else
+              %span.ref-name= @merge_request.target_branch
             = icon('caret-down')
           .dropdown-menu.dropdown-select.dropdown-menu-selectable
             .dropdown-title
@@ -50,19 +52,25 @@
                 - @comparable_diffs.each do |merge_request_diff|
                   %li
                     = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff, merge_request_diff.head_commit_sha), class: ('is-active' if merge_request_diff == @start_version) do
-                      %strong
-                        - if merge_request_diff.latest?
-                          latest version
-                        - else
-                          version #{version_index(merge_request_diff)}
-                      .monospace= short_sha(merge_request_diff.head_commit_sha)
-                      %small
-                        = time_ago_with_tooltip(merge_request_diff.created_at)
+                      %div
+                        %strong
+                          - if merge_request_diff.latest?
+                            latest version
+                          - else
+                            version #{version_index(merge_request_diff)}
+                      %div
+                        %small.commit-sha= short_sha(merge_request_diff.head_commit_sha)
+                      %div
+                        %small
+                          = time_ago_with_tooltip(merge_request_diff.created_at)
                 %li
                   = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff), class: ('is-active' unless @start_version) do
-                    %strong
-                      #{@merge_request.target_branch} (base)
-                    .monospace= short_sha(@merge_request_diff.base_commit_sha)
+                    %div
+                      %strong
+                        %span.ref-name= @merge_request.target_branch
+                        (base)
+                    %div
+                      %strong.commit-sha= short_sha(@merge_request_diff.base_commit_sha)
 
     - if different_base?(@start_version, @merge_request_diff)
       .content-block
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 9e292729425..e180cb8bad1 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -30,7 +30,7 @@
                     #{root_url}#{current_user.username}/
                   = f.hidden_field :namespace_id, value: current_user.namespace_id
           .form-group.col-xs-12.col-sm-6.project-path
-            = f.label :namespace_id, class: 'label-light' do
+            = f.label :path, class: 'label-light' do
               %span
                 Project name
             = f.text_field :path, placeholder: "my-awesome-project", class: "form-control", tabindex: 2, autofocus: true, required: true
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
index 4a21cce024e..2d272a93b98 100644
--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -19,7 +19,7 @@
   .form-group
     .col-md-6
       = f.label :ref, 'Target Branch', class: 'label-light'
-      = dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names } } )
+      = dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown git-revision-dropdown-toggle', dropdown_class: 'git-revision-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names } } )
       = f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true
   .form-group
     .col-md-6
diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
index 1406868488f..2cd82e1b661 100644
--- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
+++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
@@ -4,12 +4,13 @@
       = pipeline_schedule.description
     %td.branch-name-cell
       = icon('code-fork')
-      = link_to pipeline_schedule.ref, namespace_project_commits_path(@project.namespace, @project, pipeline_schedule.ref), class: "branch-name"
+      = link_to pipeline_schedule.ref, project_ref_path(@project, pipeline_schedule.ref), class: "ref-name"
     %td
       - if pipeline_schedule.last_pipeline
         .status-icon-container{ class: "ci-status-icon-#{pipeline_schedule.last_pipeline.status}" }
           = link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline_schedule.last_pipeline.id) do
             = ci_icon_for_status(pipeline_schedule.last_pipeline.status)
+            %span ##{pipeline_schedule.last_pipeline.id}
       - else
         None
     %td.next-run-cell
diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml
index dd35c3055f2..a597d745e33 100644
--- a/app/views/projects/pipeline_schedules/index.html.haml
+++ b/app/views/projects/pipeline_schedules/index.html.haml
@@ -6,7 +6,7 @@
 = render "projects/pipelines/head"
 
 %div{ class: container_class }
-  #scheduling-pipelines-callout
+  #pipeline-schedules-callout{ data: { docs_url: help_page_path('ci/pipeline_schedules') } }
   .top-area
     - schedule_path_proc = ->(scope) { pipeline_schedules_path(@project, scope: scope) }
     = render "tabs", schedule_path_proc: schedule_path_proc, all_schedules: @all_schedules, scope: @scope
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index ab6baaf35b6..8607da8fcdd 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -30,7 +30,7 @@
       = pluralize @pipeline.statuses.count(:id), "job"
       - if @pipeline.ref
         from
-        = link_to @pipeline.ref, namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), class: "monospace"
+        = link_to @pipeline.ref, project_ref_path(@project, @pipeline.ref), class: "ref-name"
       - if @pipeline.duration
         in
         = time_interval_in_words(@pipeline.duration)
@@ -40,10 +40,10 @@
   .well-segment.branch-info
     .icon-container.commit-icon
       = custom_icon("icon_commit")
-    = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace js-details-short"
+    = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "commit-sha js-details-short"
     = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
       %span.text-expander
         \...
     %span.js-details-content.hide
-      = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace commit-hash-full"
+      = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "commit-sha commit-hash-full"
     = clipboard_button(text: @pipeline.sha, title: "Copy commit SHA to clipboard")
diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml
index 14a270a3039..71a8e490c3e 100644
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -11,8 +11,8 @@
     .col-sm-10
       = hidden_field_tag 'pipeline[ref]', params[:ref] || @project.default_branch
       = dropdown_tag(params[:ref] || @project.default_branch,
-                     options: { toggle_class: 'js-branch-select wide',
-                                filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches",
+                     options: { toggle_class: 'js-branch-select wide git-revision-dropdown-toggle',
+                                filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: "Search branches",
                                 data: { selected: params[:ref] || @project.default_branch, field_name: 'pipeline[ref]' } })
       .help-block Existing branch name, tag
   .form-actions
diff --git a/app/views/projects/protected_branches/_dropdown.html.haml b/app/views/projects/protected_branches/_dropdown.html.haml
index 5af0cc7a2f3..6e9c473494e 100644
--- a/app/views/projects/protected_branches/_dropdown.html.haml
+++ b/app/views/projects/protected_branches/_dropdown.html.haml
@@ -1,8 +1,8 @@
 = f.hidden_field(:name)
 
 = dropdown_tag('Select branch or create wildcard',
-               options: { toggle_class: 'js-protected-branch-select js-filter-submit wide',
-                          filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search protected branches",
+               options: { toggle_class: 'js-protected-branch-select js-filter-submit wide git-revision-dropdown-toggle',
+                          filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: "Search protected branches",
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
                                   selected: params[:protected_branch_name],
diff --git a/app/views/projects/protected_branches/_matching_branch.html.haml b/app/views/projects/protected_branches/_matching_branch.html.haml
index 8a5332ca5bb..27896272733 100644
--- a/app/views/projects/protected_branches/_matching_branch.html.haml
+++ b/app/views/projects/protected_branches/_matching_branch.html.haml
@@ -1,9 +1,10 @@
 %tr
   %td
-    = link_to matching_branch.name, namespace_project_tree_path(@project.namespace, @project, matching_branch.name)
+    = link_to matching_branch.name, project_ref_path(@project, matching_branch.name), class: 'ref-name'
+
     - if @project.root_ref?(matching_branch.name)
       %span.label.label-info.prepend-left-5 default
   %td
     - commit = @project.commit(matching_branch.name)
-    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
     = time_ago_with_tooltip(commit.committed_date)
diff --git a/app/views/projects/protected_branches/_protected_branch.html.haml b/app/views/projects/protected_branches/_protected_branch.html.haml
index b2a6b8469a3..0f80de94392 100644
--- a/app/views/projects/protected_branches/_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_protected_branch.html.haml
@@ -1,6 +1,7 @@
 %tr.js-protected-branch-edit-form{ data: { url: namespace_project_protected_branch_path(@project.namespace, @project, protected_branch) } }
   %td
-    = protected_branch.name
+    %span.ref-name= protected_branch.name
+
     - if @project.root_ref?(protected_branch.name)
       %span.label.label-info.prepend-left-5 default
   %td
@@ -9,7 +10,7 @@
       = link_to pluralize(matching_branches.count, "matching branch"), namespace_project_protected_branch_path(@project.namespace, @project, protected_branch)
     - else
       - if commit = protected_branch.commit
-        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
         = time_ago_with_tooltip(commit.committed_date)
       - else
         (branch was removed from repository)
diff --git a/app/views/projects/protected_branches/show.html.haml b/app/views/projects/protected_branches/show.html.haml
index f8cfe5e4b11..a806a0756ec 100644
--- a/app/views/projects/protected_branches/show.html.haml
+++ b/app/views/projects/protected_branches/show.html.haml
@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.prepend-top-0.ref-name
       = @protected_ref.name
 
   .col-lg-9
diff --git a/app/views/projects/protected_tags/_dropdown.html.haml b/app/views/projects/protected_tags/_dropdown.html.haml
index c50515cfe06..c8531f96f97 100644
--- a/app/views/projects/protected_tags/_dropdown.html.haml
+++ b/app/views/projects/protected_tags/_dropdown.html.haml
@@ -1,8 +1,8 @@
 = f.hidden_field(:name)
 
 = dropdown_tag('Select tag or create wildcard',
-               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide',
-                          filter: true, dropdown_class: "dropdown-menu-selectable  capitalize-header", placeholder: "Search protected tag",
+               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide git-revision-dropdown-toggle',
+                          filter: true, dropdown_class: "dropdown-menu-selectable capitalize-header git-revision-dropdown", placeholder: "Search protected tag",
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
                                   selected: params[:protected_tag_name],
diff --git a/app/views/projects/protected_tags/_matching_tag.html.haml b/app/views/projects/protected_tags/_matching_tag.html.haml
index 97e5cd6f9d2..f17353df122 100644
--- a/app/views/projects/protected_tags/_matching_tag.html.haml
+++ b/app/views/projects/protected_tags/_matching_tag.html.haml
@@ -1,9 +1,10 @@
 %tr
   %td
-    = link_to matching_tag.name, namespace_project_tree_path(@project.namespace, @project, matching_tag.name)
+    = link_to matching_tag.name, project_ref_path(@project, matching_tag.name), class: 'ref-name'
+
     - if @project.root_ref?(matching_tag.name)
       %span.label.label-info.prepend-left-5 default
   %td
     - commit = @project.commit(matching_tag.name)
-    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
     = time_ago_with_tooltip(commit.committed_date)
diff --git a/app/views/projects/protected_tags/_protected_tag.html.haml b/app/views/projects/protected_tags/_protected_tag.html.haml
index 26bd3a1f5ed..54249ec0db1 100644
--- a/app/views/projects/protected_tags/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/_protected_tag.html.haml
@@ -1,6 +1,7 @@
 %tr.js-protected-tag-edit-form{ data: { url: namespace_project_protected_tag_path(@project.namespace, @project, protected_tag) } }
   %td
-    = protected_tag.name
+    %span.ref-name= protected_tag.name
+
     - if @project.root_ref?(protected_tag.name)
       %span.label.label-info.prepend-left-5 default
   %td
@@ -9,7 +10,7 @@
       = link_to pluralize(matching_tags.count, "matching tag"), namespace_project_protected_tag_path(@project.namespace, @project, protected_tag)
     - else
       - if commit = protected_tag.commit
-        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
         = time_ago_with_tooltip(commit.committed_date)
       - else
         (tag was removed from repository)
diff --git a/app/views/projects/protected_tags/show.html.haml b/app/views/projects/protected_tags/show.html.haml
index 63743f28b3c..94c3612a449 100644
--- a/app/views/projects/protected_tags/show.html.haml
+++ b/app/views/projects/protected_tags/show.html.haml
@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.prepend-top-0.ref-name
       = @protected_ref.name
 
   .col-lg-9
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index deeadb609f6..674f87e8220 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -1,15 +1,18 @@
 %li.runner{ id: dom_id(runner) }
   %h4
     = runner_status_icon(runner)
-    %span.monospace
-      - if @project_runners.include?(runner)
-        = link_to runner.short_sha, runner_path(runner)
-        - if runner.locked?
-          = icon('lock', class: 'has-tooltip', title: 'Locked to current projects')
-        %small
-          = link_to edit_namespace_project_runner_path(@project.namespace, @project, runner) do
-            %i.fa.fa-edit.btn
-      - else
+
+    - if @project_runners.include?(runner)
+      = link_to runner.short_sha, runner_path(runner), class: 'commit-sha'
+
+      - if runner.locked?
+        = icon('lock', class: 'has-tooltip', title: 'Locked to current projects')
+
+      %small
+        = link_to edit_namespace_project_runner_path(@project.namespace, @project, runner) do
+          %i.fa.fa-edit.btn
+    - else
+      %span.commit-sha
         = runner.short_sha
 
     .pull-right
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index 4c4f3655b97..44cb734d7b9 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -2,10 +2,9 @@
 - release = @releases.find { |release| release.tag == tag.name }
 %li.flex-row
   .row-main-content.str-truncated
-    = link_to namespace_project_tag_path(@project.namespace, @project, tag.name) do
-      %span.item-title
-        = icon('tag')
-        = tag.name
+    = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'item-title ref-name' do
+      = icon('tag')
+      = tag.name
 
     - if protected_tag?(@project, tag)
       %span.label.label-success
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index e996ae3e4fc..2b81ce4b9fa 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -6,7 +6,9 @@
   .top-area.multi-line
     .nav-text
       .title
-        %span.item-title= @tag.name
+        %span.item-title.ref-name
+          = icon('tag')
+          = @tag.name
         - if protected_tag?(@project, @tag)
           %span.label.label-success
             protected
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index 34a4d7398bc..0992a65f7cd 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -17,7 +17,7 @@
         %li
           = http_clone_button(project)
 
-  = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true
+  = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true, aria: { label: 'Project clone URL' }
   .input-group-btn
     = clipboard_button(target: '#project_clone', title: "Copy URL to clipboard")
 
diff --git a/app/views/shared/_ref_dropdown.html.haml b/app/views/shared/_ref_dropdown.html.haml
index 96f68c80c48..8b2a3bee407 100644
--- a/app/views/shared/_ref_dropdown.html.haml
+++ b/app/views/shared/_ref_dropdown.html.haml
@@ -1,6 +1,6 @@
 - dropdown_class = local_assigns.fetch(:dropdown_class, '')
 
-.dropdown-menu.dropdown-menu-selectable{ class: dropdown_class }
+.dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: dropdown_class }
   = dropdown_title "Select Git revision"
   = dropdown_filter "Filter by Git revision"
   = dropdown_content
diff --git a/app/views/shared/_ref_switcher.html.haml b/app/views/shared/_ref_switcher.html.haml
index 9a8252ab087..2029eb5824a 100644
--- a/app/views/shared/_ref_switcher.html.haml
+++ b/app/views/shared/_ref_switcher.html.haml
@@ -6,8 +6,8 @@
   - @options && @options.each do |key, value|
     = hidden_field_tag key, value, id: nil
   .dropdown
-    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'ref', submit_form_on_click: true }, { toggle_class: "js-project-refs-dropdown" }
-    .dropdown-menu.dropdown-menu-selectable{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
+    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'ref', submit_form_on_click: true }, { toggle_class: "js-project-refs-dropdown git-revision-dropdown-toggle" }
+    .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
       = dropdown_title "Switch branch/tag"
       = dropdown_filter "Search branches and tags"
       = dropdown_content
diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml
index 12d99c3ab4b..046b127f73c 100644
--- a/app/views/shared/empty_states/_issues.html.haml
+++ b/app/views/shared/empty_states/_issues.html.haml
@@ -20,4 +20,3 @@
       - else
         .text-center
           %h4 There are no issues to show.
-          = link_to 'New issue', button_path, class: 'btn btn-new', title: 'New issue', id: 'new_issue_link'
diff --git a/app/views/shared/empty_states/icons/_pipelines_empty.svg b/app/views/shared/empty_states/icons/_pipelines_empty.svg
index 8119d5bebe0..7c672538097 100644
--- a/app/views/shared/empty_states/icons/_pipelines_empty.svg
+++ b/app/views/shared/empty_states/icons/_pipelines_empty.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd" transform="translate(0-3)"><g transform="translate(0 105)"><g fill="#e5e5e5"><rect width="78" height="4" x="34" y="21" opacity=".5" rx="2"/><path d="m152 23c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2"/></g><g transform="translate(0 4)"><path fill="#98d7b2" fill-rule="nonzero" d="m19 38c-10.493 0-19-8.507-19-19 0-10.493 8.507-19 19-19 10.493 0 19 8.507 19 19 0 10.493-8.507 19-19 19m0-4c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15"/><path fill="#31af64" d="m17.07 21.02l-2.829-2.829c-.786-.786-2.047-.781-2.828 0-.786.786-.781 2.047 0 2.828l4.243 4.243c.392.392.902.587 1.412.588.512.002 1.021-.193 1.41-.582l7.79-7.79c.777-.777.775-2.042-.006-2.823-.786-.786-2.045-.784-2.823-.006l-6.37 6.37"/></g><g fill="#e52c5a" transform="translate(102)"><path fill-rule="nonzero" d="m24 47.5c-12.979 0-23.5-10.521-23.5-23.5 0-12.979 10.521-23.5 23.5-23.5 12.979 0 23.5 10.521 23.5 23.5 0 12.979-10.521 23.5-23.5 23.5m0-5c10.217 0 18.5-8.283 18.5-18.5 0-10.217-8.283-18.5-18.5-18.5-10.217 0-18.5 8.283-18.5 18.5 0 10.217 8.283 18.5 18.5 18.5"/><path d="m28.24 24l2.833-2.833c1.167-1.167 1.167-3.067-.004-4.239-1.169-1.169-3.069-1.173-4.239-.004l-2.833 2.833-2.833-2.833c-1.167-1.167-3.067-1.167-4.239.004-1.169 1.169-1.173 3.069-.004 4.239l2.833 2.833-2.833 2.833c-1.167 1.167-1.167 3.067.004 4.239 1.169 1.169 3.069 1.173 4.239.004l2.833-2.833 2.833 2.833c1.167 1.167 3.067 1.167 4.239-.004 1.169-1.169 1.173-3.069.004-4.239l-2.833-2.833"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="m236 37c-7.732 0-14-6.268-14-14 0-7.732 6.268-14 14-14 7.732 0 14 6.268 14 14 0 7.732-6.268 14-14 14m0-4c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10-5.523 0-10 4.477-10 10 0 5.523 4.477 10 10 10"/></g><g transform="translate(69 3)"><path fill="#e5e5e5" fill-rule="nonzero" d="m4 11.99v60.02c0 4.413 3.583 7.99 8 7.99h89.991c4.419 0 8-3.579 8-7.99v-60.02c0-4.413-3.583-7.99-8-7.99h-89.991c-4.419 0-8 3.579-8 7.99m-4 0c0-6.622 5.378-11.99 12-11.99h89.991c6.629 0 12 5.367 12 11.99v60.02c0 6.622-5.378 11.99-12 11.99h-89.991c-6.629 0-12-5.367-12-11.99v-60.02m52.874 80.3l-13.253-15.292h34.76l-13.253 15.292c-2.237 2.582-6.01 2.585-8.253 0m3.02-2.62c.644.743 1.564.743 2.207 0l7.516-8.673h-17.24l7.516 8.673"/><rect width="18" height="6" x="15" y="23" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="39" y="39" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="33" y="55" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="39" y="23" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="57" y="55" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="15" y="55" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="81" y="23" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="15" y="39" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="57" y="23" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="69" y="23" rx="3"/><rect width="6" height="6" x="75" y="39" rx="3"/></g><rect width="6" height="6" x="63" y="39" fill="#e52c5a" rx="3"/></g><g transform="matrix(.70711-.70711.70711.70711 84.34 52.5)"><path fill="#6b4fbb" fill-rule="nonzero" d="m28.02 67.48c-15.927-2.825-28.02-16.738-28.02-33.476 0-18.778 15.222-34 34-34 18.778 0 34 15.222 34 34 0 16.738-12.1 30.652-28.02 33.476.015.173.023.347.023.524v21.999c0 3.314-2.693 6-6 6-3.314 0-6-2.682-6-6v-21.999c0-.177.008-.351.023-.524m5.977-7.476c14.359 0 26-11.641 26-26 0-14.359-11.641-26-26-26-14.359 0-26 11.641-26 26 0 14.359 11.641 26 26 26"/><path fill="#fff" fill-opacity=".3" stroke="#6b4fbb" stroke-width="8" d="m31 71c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30" transform="matrix(.86603.5-.5.86603 26.663-17.507)"/></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd"><g transform="translate(0 102)"><g fill="#e5e5e5"><rect width="74" height="4" x="34" y="21" opacity=".5" rx="2"/><path d="m152 23c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2"/></g><g fill="#31af64" transform="translate(0 4)"><path fill-rule="nonzero" d="m19 38c-10.493 0-19-8.507-19-19 0-10.493 8.507-19 19-19 10.493 0 19 8.507 19 19 0 10.493-8.507 19-19 19m0-4c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15"/><path d="m17.07 21.02l-2.829-2.829c-.786-.786-2.047-.781-2.828 0-.786.786-.781 2.047 0 2.828l4.243 4.243c.392.392.902.587 1.412.588.512.002 1.021-.193 1.41-.582l7.79-7.79c.777-.777.775-2.042-.006-2.823-.786-.786-2.045-.784-2.823-.006l-6.37 6.37"/></g><g fill="#e52c5a" transform="translate(102)"><path fill-rule="nonzero" d="m24 47.5c-12.979 0-23.5-10.521-23.5-23.5 0-12.979 10.521-23.5 23.5-23.5 12.979 0 23.5 10.521 23.5 23.5 0 12.979-10.521 23.5-23.5 23.5m0-5c10.217 0 18.5-8.283 18.5-18.5 0-10.217-8.283-18.5-18.5-18.5-10.217 0-18.5 8.283-18.5 18.5 0 10.217 8.283 18.5 18.5 18.5"/><path d="m28.24 24l2.833-2.833c1.167-1.167 1.167-3.067-.004-4.239-1.169-1.169-3.069-1.173-4.239-.004l-2.833 2.833-2.833-2.833c-1.167-1.167-3.067-1.167-4.239.004-1.169 1.169-1.173 3.069-.004 4.239l2.833 2.833-2.833 2.833c-1.167 1.167-1.167 3.067.004 4.239 1.169 1.169 3.069 1.173 4.239.004l2.833-2.833 2.833 2.833c1.167 1.167 3.067 1.167 4.239-.004 1.169-1.169 1.173-3.069.004-4.239l-2.833-2.833"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="m236 37c-7.732 0-14-6.268-14-14 0-7.732 6.268-14 14-14 7.732 0 14 6.268 14 14 0 7.732-6.268 14-14 14m0-4c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10-5.523 0-10 4.477-10 10 0 5.523 4.477 10 10 10"/></g><g transform="translate(73 4)"><path stroke="#e5e5e5" stroke-width="4" d="m64.82 76h33.18c4.419 0 8-3.579 8-7.99v-60.02c0-4.413-3.583-7.99-8-7.99h-89.991c-4.419 0-8 3.579-8 7.99v60.02c0 4.413 3.583 7.99 8 7.99h31.935l9.263 9.855c1.725 1.835 4.631 1.833 6.354 0l9.263-9.855"/><rect width="18" height="6" x="11" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="35" y="35" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="29" y="51" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="35" y="19" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="53" y="51" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="11" y="51" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="77" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="11" y="35" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="53" y="19" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="65" y="19" rx="3"/><rect width="6" height="6" x="71" y="35" rx="3"/></g><rect width="6" height="6" x="59" y="35" fill="#e52c5a" rx="3"/></g><path fill="#6b4fbb" fill-rule="nonzero" d="m28.02 67.48c-15.927-2.825-28.02-16.738-28.02-33.476 0-18.778 15.222-34 34-34 18.778 0 34 15.222 34 34 0 16.738-12.1 30.652-28.02 33.476.015.173.023.347.023.524v21.999c0 3.314-2.693 6-6 6-3.314 0-6-2.682-6-6v-21.999c0-.177.008-.351.023-.524m5.977-7.476c14.359 0 26-11.641 26-26 0-14.359-11.641-26-26-26-14.359 0-26 11.641-26 26 0 14.359 11.641 26 26 26" transform="matrix(.70711-.70711.70711.70711 84.34 49.5)"/></g></svg>
diff --git a/app/views/shared/issuable/_assignees.html.haml b/app/views/shared/issuable/_assignees.html.haml
index 36bbb1148d4..217af7c9fac 100644
--- a/app/views/shared/issuable/_assignees.html.haml
+++ b/app/views/shared/issuable/_assignees.html.haml
@@ -1,9 +1,8 @@
 - max_render = 3
 - max = [max_render, issue.assignees.length].min
 
-- issue.assignees.each_with_index do |assignee, index|
-  - if index < max
-    = link_to_member(@project, assignee, name: false, title: "Assigned to :name")
+- issue.assignees.take(max).each do |assignee|
+  = link_to_member(@project, assignee, name: false, title: "Assigned to :name")
 
 - if issue.assignees.length > max_render
   - counter = issue.assignees.length - max_render
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index 1a12f110945..6cd03f028a9 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -71,7 +71,6 @@
       = render 'shared/labels_row', labels: @labels
 
 :javascript
-  new UsersSelect();
   new LabelsSelect();
   new MilestoneSelect();
   new IssueStatusSelect();
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index f7b87171573..622e2f33eea 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -150,7 +150,6 @@
 
 - unless type === :boards_modal
   :javascript
-    new UsersSelect();
     new LabelsSelect();
     new MilestoneSelect();
     new IssueStatusSelect();
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
index c36a45098a8..e9ce7b7ce9c 100644
--- a/app/views/shared/issuable/_sidebar_assignees.html.haml
+++ b/app/views/shared/issuable/_sidebar_assignees.html.haml
@@ -1,4 +1,4 @@
-- if issuable.instance_of?(Issue)
+- if issuable.is_a?(Issue)
   #js-vue-sidebar-assignees{ data: { field: "#{issuable.to_ability_name}[assignee_ids]" } }
 - else
   .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) }
@@ -33,17 +33,17 @@
 
   - options = { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_ids][]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true } }
 
-  - if issuable.instance_of?(Issue)
-    - if issuable.assignees.length == 0
+  - title = 'Select assignee'
+
+  - if issuable.is_a?(Issue)
+    - unless issuable.assignees.any?
       = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", 0, id: nil
-    - title = 'Select assignee'
     - options[:toggle_class] += ' js-multiselect js-save-user-data'
-    - options[:data][:field_name] = "#{issuable.to_ability_name}[assignee_ids][]"
-    - options[:data][:multi_select] = true
-    - options[:data]['dropdown-title'] = title
-    - options[:data]['dropdown-header'] = 'Assignee'
-    - options[:data]['max-select'] = 1
-  - else
-    - title = 'Select assignee'
+    - data = { field_name: "#{issuable.to_ability_name}[assignee_ids][]" }
+    - data[:multi_select] = true
+    - data['dropdown-title'] = title
+    - data['dropdown-header'] = 'Assignee'
+    - data['max-select'] = 1
+    - options[:data].merge!(data)
 
   = dropdown_tag(title, options: options)
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
index f57b4d899ce..203d2adc8db 100644
--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -10,14 +10,14 @@
     = form.label :source_branch, class: 'control-label'
     .col-sm-10
       .issuable-form-select-holder
-        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2', disabled: true })
+        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2 ref-name', disabled: true })
 .form-group
   = form.label :target_branch, class: 'control-label'
   .col-sm-10.target-branch-select-dropdown-container
     .issuable-form-select-holder
       = form.select(:target_branch, issuable.target_branches,
         { include_blank: true },
-        { class: 'target_branch js-target-branch-select',
+        { class: 'target_branch js-target-branch-select ref-name',
           disabled: issuable.new_record?,
           data: { placeholder: "Select branch" }})
     - if issuable.new_record?
diff --git a/app/views/shared/issuable/form/_issue_assignee.html.haml b/app/views/shared/issuable/form/_issue_assignee.html.haml
index c33474ac3b4..66091d95a91 100644
--- a/app/views/shared/issuable/form/_issue_assignee.html.haml
+++ b/app/views/shared/issuable/form/_issue_assignee.html.haml
@@ -1,8 +1,9 @@
 - issue = issuable
+- assignees = issue.assignees
 .block.assignee
   .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee_list) }
-    - if issue.assignees.any?
-      - issue.assignees.each do |assignee|
+    - if assignees.any?
+      - assignees.each do |assignee|
         = link_to_member(@project, assignee, size: 24)
     - else
       = icon('user', 'aria-hidden': 'true')
@@ -12,8 +13,8 @@
     - if can_edit_issuable
       = link_to 'Edit', '#', class: 'edit-link pull-right'
   .value.hide-collapsed
-    - if issue.assignees.any?
-      - issue.assignees.each do |assignee|
+    - if assignees.any?
+      - assignees.each do |assignee|
         = link_to_member(@project, assignee, size: 32, extra_class: 'bold') do
           %span.username
             = assignee.to_reference
diff --git a/changelogs/unreleased/30286-ci-badge-component.yml b/changelogs/unreleased/30286-ci-badge-component.yml
new file mode 100644
index 00000000000..13c2a4598c8
--- /dev/null
+++ b/changelogs/unreleased/30286-ci-badge-component.yml
@@ -0,0 +1,4 @@
+---
+title: Refactor all CI vue badges to use the same vue component
+merge_request:
+author:
diff --git a/changelogs/unreleased/31384-new-issue-button-on-no-results-page-after-search-doesn-t-go-to-correct-form.yml b/changelogs/unreleased/31384-new-issue-button-on-no-results-page-after-search-doesn-t-go-to-correct-form.yml
new file mode 100644
index 00000000000..8d586616e07
--- /dev/null
+++ b/changelogs/unreleased/31384-new-issue-button-on-no-results-page-after-search-doesn-t-go-to-correct-form.yml
@@ -0,0 +1,4 @@
+---
+title: Remove 'New issue' button when issues search returns no results.
+merge_request: !11263
+author:
diff --git a/changelogs/unreleased/31978-cross-reference-fix.yml b/changelogs/unreleased/31978-cross-reference-fix.yml
new file mode 100644
index 00000000000..fbcb3d5d482
--- /dev/null
+++ b/changelogs/unreleased/31978-cross-reference-fix.yml
@@ -0,0 +1,4 @@
+---
+title: Fix cross referencing for private and internal projects
+merge_request: 11243
+author:
diff --git a/changelogs/unreleased/32178-prevent-merge-on-sha-change.yml b/changelogs/unreleased/32178-prevent-merge-on-sha-change.yml
new file mode 100644
index 00000000000..d3208973de6
--- /dev/null
+++ b/changelogs/unreleased/32178-prevent-merge-on-sha-change.yml
@@ -0,0 +1,4 @@
+---
+title: Add state to MR widget that prevent merges when branch changes after page load
+merge_request: 11316
+author:
diff --git a/changelogs/unreleased/dm-consistent-commit-sha-style.yml b/changelogs/unreleased/dm-consistent-commit-sha-style.yml
new file mode 100644
index 00000000000..b6dace34d9b
--- /dev/null
+++ b/changelogs/unreleased/dm-consistent-commit-sha-style.yml
@@ -0,0 +1,4 @@
+---
+title: Consistently use monospace font for commit SHAs and branch and tag names
+merge_request:
+author:
diff --git a/changelogs/unreleased/pipeline-schedules-callout-docs-url.yml b/changelogs/unreleased/pipeline-schedules-callout-docs-url.yml
new file mode 100644
index 00000000000..b21bb162380
--- /dev/null
+++ b/changelogs/unreleased/pipeline-schedules-callout-docs-url.yml
@@ -0,0 +1,4 @@
+---
+title: Pass docsUrl to pipeline schedules callout component.
+merge_request: !1126
+author:
diff --git a/changelogs/unreleased/protected-branches-no-one-merge.yml b/changelogs/unreleased/protected-branches-no-one-merge.yml
new file mode 100644
index 00000000000..52d93793f3d
--- /dev/null
+++ b/changelogs/unreleased/protected-branches-no-one-merge.yml
@@ -0,0 +1,4 @@
+---
+title: Allow 'no one' as an option for allowed to merge on a procted branch
+merge_request:
+author:
diff --git a/doc/api/issues.md b/doc/api/issues.md
index 75794cc8d04..3f949ca5667 100644
--- a/doc/api/issues.md
+++ b/doc/api/issues.md
@@ -100,7 +100,7 @@ Example response:
 ]
 ```
 
-**Note**: `assignee` column is deprecated, it shows the first assignee only.
+**Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 ## List group issues
 
@@ -192,7 +192,7 @@ Example response:
 ]
 ```
 
-**Note**: `assignee` column is deprecated, it shows the first assignee only.
+**Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 ## List project issues
 
@@ -284,7 +284,7 @@ Example response:
 ]
 ```
 
-**Note**: `assignee` column is deprecated, it shows the first assignee only.
+**Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 ## Single issue
 
@@ -359,7 +359,7 @@ Example response:
 }
 ```
 
-**Note**: `assignee` column is deprecated, it shows the first assignee only.
+**Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 ## New issue
 
@@ -375,7 +375,7 @@ POST /projects/:id/issues
 | `title`                                   | string  | yes      | The title of an issue |
 | `description`                             | string  | no       | The description of an issue  |
 | `confidential`                            | boolean | no       | Set an issue to be confidential. Default is `false`.  |
-| `assignee_ids`                            | Array[integer] | no       | The ID of a user to assign issue |
+| `assignee_ids`                            | Array[integer] | no       | The ID of the users to assign issue |
 | `milestone_id`                            | integer | no       | The ID of a milestone to assign issue  |
 | `labels`                                  | string  | no       | Comma-separated label names for an issue  |
 | `created_at`                              | string  | no       | Date time string, ISO 8601 formatted, e.g. `2016-03-11T03:45:40Z` (requires admin or project owner rights) |
@@ -421,7 +421,7 @@ Example response:
 }
 ```
 
-**Note**: `assignee` column is deprecated, it shows the first assignee only.
+**Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 ## Edit issue
 
@@ -439,7 +439,7 @@ PUT /projects/:id/issues/:issue_iid
 | `title`        | string  | no       | The title of an issue                                                                                      |
 | `description`  | string  | no       | The description of an issue                                                                                |
 | `confidential` | boolean | no       | Updates an issue to be confidential                                                                        |
-| `assignee_ids`  | Array[integer] | no       | The ID of a user to assign the issue to                                                                    |
+| `assignee_ids`  | Array[integer] | no       | The ID of the users to assign the issue to                                                                    |
 | `milestone_id` | integer | no       | The ID of a milestone to assign the issue to                                                               |
 | `labels`       | string  | no       | Comma-separated label names for an issue                                                                   |
 | `state_event`  | string  | no       | The state event of an issue. Set `close` to close the issue and `reopen` to reopen it                      |
@@ -484,7 +484,7 @@ Example response:
 }
 ```
 
-**Note**: `assignee` column is deprecated, it shows the first assignee only.
+**Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 ## Delete an issue
 
@@ -570,7 +570,7 @@ Example response:
 }
 ```
 
-**Note**: `assignee` column is deprecated, it shows the first assignee only.
+**Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 ## Subscribe to an issue
 
@@ -635,7 +635,7 @@ Example response:
 }
 ```
 
-**Note**: `assignee` column is deprecated, it shows the first assignee only.
+**Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 ## Unsubscribe from an issue
 
@@ -757,7 +757,7 @@ Example response:
 }
 ```
 
-**Note**: `assignee` column is deprecated, it shows the first assignee only.
+**Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 ## Set a time estimate for an issue
 
diff --git a/features/steps/project/builds/artifacts.rb b/features/steps/project/builds/artifacts.rb
index eec375b0532..89132ff068f 100644
--- a/features/steps/project/builds/artifacts.rb
+++ b/features/steps/project/builds/artifacts.rb
@@ -25,7 +25,7 @@ class Spinach::Features::ProjectBuildsArtifacts < Spinach::FeatureSteps
 
   step 'I should see the build header' do
     page.within('.build-header') do
-      expect(page).to have_content "Job ##{@build.id} in pipeline ##{@pipeline.id} for commit #{@pipeline.short_sha}"
+      expect(page).to have_content "Job ##{@build.id} in pipeline ##{@pipeline.id} for #{@pipeline.short_sha}"
     end
   end
 
diff --git a/features/steps/project/forked_merge_requests.rb b/features/steps/project/forked_merge_requests.rb
index 310db6e6dad..29055373a57 100644
--- a/features/steps/project/forked_merge_requests.rb
+++ b/features/steps/project/forked_merge_requests.rb
@@ -5,6 +5,7 @@ class Spinach::Features::ProjectForkedMergeRequests < Spinach::FeatureSteps
   include SharedPaths
   include Select2Helper
   include WaitForVueResource
+  include WaitForAjax
 
   step 'I am a member of project "Shop"' do
     @project = ::Project.find_by(name: "Shop")
@@ -47,6 +48,7 @@ class Spinach::Features::ProjectForkedMergeRequests < Spinach::FeatureSteps
     first('.dropdown-target-project a', text: @project.path_with_namespace)
 
     first('.js-source-branch').click
+    wait_for_ajax
     first('.dropdown-source-branch .dropdown-content a', text: 'fix').click
 
     click_button "Compare branches and continue"
@@ -62,31 +64,6 @@ class Spinach::Features::ProjectForkedMergeRequests < Spinach::FeatureSteps
     click_button "Submit merge request"
   end
 
-  step 'I follow the target commit link' do
-    commit = @project.repository.commit
-    click_link commit.short_id(8)
-  end
-
-  step 'I should see the commit under the forked from project' do
-    commit = @project.repository.commit
-    expect(page).to have_content(commit.message)
-  end
-
-  step 'I click "Create Merge Request on fork" link' do
-    click_link "Create Merge Request on fork"
-  end
-
-  step 'I see prefilled new Merge Request page for the forked project' do
-    expect(current_path).to eq new_namespace_project_merge_request_path(@forked_project.namespace, @forked_project)
-    expect(find("#merge_request_source_project_id").value).to eq @forked_project.id.to_s
-    expect(find("#merge_request_target_project_id").value).to eq @project.id.to_s
-    expect(find("#merge_request_source_branch").value).to have_content "new_design"
-    expect(find("#merge_request_target_branch").value).to have_content "master"
-    expect(find("#merge_request_title").value).to eq "New Design"
-    verify_commit_link(".mr_target_commit", @project)
-    verify_commit_link(".mr_source_commit", @forked_project)
-  end
-
   step 'I update the merge request title' do
     fill_in "merge_request_title", with: "An Edited Forked Merge Request"
   end
@@ -155,10 +132,4 @@ class Spinach::Features::ProjectForkedMergeRequests < Spinach::FeatureSteps
       expect(page).to have_content @project.users.first.name
     end
   end
-
-  # Verify a link is generated against the correct project
-  def verify_commit_link(container_div, container_project)
-    # This should force a wait for the javascript to execute
-    expect(find(:div, container_div).find(".commit_short_id")['href']).to have_content "#{container_project.path_with_namespace}/commit"
-  end
 end
diff --git a/lib/api/helpers/common_helpers.rb b/lib/api/helpers/common_helpers.rb
index 6236fdd43ca..322624c6092 100644
--- a/lib/api/helpers/common_helpers.rb
+++ b/lib/api/helpers/common_helpers.rb
@@ -2,11 +2,11 @@ module API
   module Helpers
     module CommonHelpers
       def convert_parameters_from_legacy_format(params)
-        if params[:assignee_id].present?
-          params[:assignee_ids] = [params.delete(:assignee_id)]
+        params.tap do |params|
+          if params[:assignee_id].present?
+            params[:assignee_ids] = [params.delete(:assignee_id)]
+          end
         end
-
-        params
       end
     end
   end
diff --git a/lib/gitlab/file_finder.rb b/lib/gitlab/file_finder.rb
new file mode 100644
index 00000000000..093d9ed8092
--- /dev/null
+++ b/lib/gitlab/file_finder.rb
@@ -0,0 +1,32 @@
+# This class finds files in a repository by name and content
+# the result is joined and sorted by file name
+module Gitlab
+  class FileFinder
+    BATCH_SIZE = 100
+
+    attr_reader :project, :ref
+
+    def initialize(project, ref)
+      @project = project
+      @ref = ref
+    end
+
+    def find(query)
+      blobs = project.repository.search_files_by_content(query, ref).first(BATCH_SIZE)
+      found_file_names = Set.new
+
+      results = blobs.map do |blob|
+        blob = Gitlab::ProjectSearchResults.parse_search_result(blob)
+        found_file_names << blob.filename
+
+        [blob.filename, blob]
+      end
+
+      project.repository.search_files_by_name(query, ref).first(BATCH_SIZE).each do |filename|
+        results << [filename, OpenStruct.new(ref: ref)] unless found_file_names.include?(filename)
+      end
+
+      results.sort_by(&:first)
+    end
+  end
+end
diff --git a/lib/gitlab/git/diff_collection.rb b/lib/gitlab/git/diff_collection.rb
index 4e45ec7c174..bcbad8ec829 100644
--- a/lib/gitlab/git/diff_collection.rb
+++ b/lib/gitlab/git/diff_collection.rb
@@ -15,7 +15,6 @@ module Gitlab
         @safe_max_bytes = @safe_max_files * 5120 # Average 5 KB per file
         @all_diffs = !!options.fetch(:all_diffs, false)
         @no_collapse = !!options.fetch(:no_collapse, true)
-        @deltas_only = !!options.fetch(:deltas_only, false)
 
         @line_count = 0
         @byte_count = 0
@@ -27,8 +26,6 @@ module Gitlab
         if @populated
           # @iterator.each is slower than just iterating the array in place
           @array.each(&block)
-        elsif @deltas_only
-          each_delta(&block)
         else
           Gitlab::GitalyClient.migrate(:commit_raw_diffs) do
             each_patch(&block)
@@ -81,14 +78,6 @@ module Gitlab
         files >= @safe_max_files || @line_count > @safe_max_lines || @byte_count >= @safe_max_bytes
       end
 
-      def each_delta
-        @iterator.each_delta.with_index do |delta, i|
-          diff = Gitlab::Git::Diff.new(delta)
-
-          yield @array[i] = diff
-        end
-      end
-
       def each_patch
         @iterator.each_with_index do |raw, i|
           # First yield cached Diff instances from @array
diff --git a/lib/gitlab/project_search_results.rb b/lib/gitlab/project_search_results.rb
index 47cfe412715..561aa9e162c 100644
--- a/lib/gitlab/project_search_results.rb
+++ b/lib/gitlab/project_search_results.rb
@@ -84,23 +84,7 @@ module Gitlab
     def blobs
       return [] unless Ability.allowed?(@current_user, :download_code, @project)
 
-      @blobs ||= begin
-        blobs = project.repository.search_files_by_content(query, repository_ref).first(100)
-        found_file_names = Set.new
-
-        results = blobs.map do |blob|
-          blob = self.class.parse_search_result(blob)
-          found_file_names << blob.filename
-
-          [blob.filename, blob]
-        end
-
-        project.repository.search_files_by_name(query, repository_ref).first(100).each do |filename|
-          results << [filename, nil] unless found_file_names.include?(filename)
-        end
-
-        results.sort_by(&:first)
-      end
+      @blobs ||= Gitlab::FileFinder.new(project, repository_ref).find(query)
     end
 
     def wiki_blobs
diff --git a/spec/controllers/groups_controller_spec.rb b/spec/controllers/groups_controller_spec.rb
index df8ea225814..15dae3231ca 100644
--- a/spec/controllers/groups_controller_spec.rb
+++ b/spec/controllers/groups_controller_spec.rb
@@ -101,7 +101,7 @@ describe GroupsController do
         get :issues, id: redirect_route.path
 
         expect(response).to redirect_to(issues_group_path(group.to_param))
-        expect(controller).to set_flash[:notice].to(/moved/)
+        expect(controller).to set_flash[:notice].to(group_moved_message(redirect_route, group))
       end
     end
   end
@@ -146,7 +146,7 @@ describe GroupsController do
         get :merge_requests, id: redirect_route.path
 
         expect(response).to redirect_to(merge_requests_group_path(group.to_param))
-        expect(controller).to set_flash[:notice].to(/moved/)
+        expect(controller).to set_flash[:notice].to(group_moved_message(redirect_route, group))
       end
     end
   end
@@ -249,4 +249,8 @@ describe GroupsController do
       end
     end
   end
+
+  def group_moved_message(redirect_route, group)
+    "Group '#{redirect_route.path}' was moved to '#{group.full_path}'. Please update any links and bookmarks that may still have the old path."
+  end
 end
diff --git a/spec/controllers/projects_controller_spec.rb b/spec/controllers/projects_controller_spec.rb
index e46ef447df2..e230944d52e 100644
--- a/spec/controllers/projects_controller_spec.rb
+++ b/spec/controllers/projects_controller_spec.rb
@@ -227,7 +227,7 @@ describe ProjectsController do
         get :show, namespace_id: 'foo', id: 'bar'
 
         expect(response).to redirect_to(public_project)
-        expect(controller).to set_flash[:notice].to(/moved/)
+        expect(controller).to set_flash[:notice].to(project_moved_message(redirect_route, public_project))
       end
     end
   end
@@ -473,7 +473,7 @@ describe ProjectsController do
         get :refs, namespace_id: 'foo', id: 'bar'
 
         expect(response).to redirect_to(refs_namespace_project_path(namespace_id: public_project.namespace, id: public_project))
-        expect(controller).to set_flash[:notice].to(/moved/)
+        expect(controller).to set_flash[:notice].to(project_moved_message(redirect_route, public_project))
       end
     end
   end
@@ -487,4 +487,8 @@ describe ProjectsController do
       expect(JSON.parse(response.body).keys).to match_array(%w(body references))
     end
   end
+
+  def project_moved_message(redirect_route, project)
+    "Project '#{redirect_route.path}' was moved to '#{project.full_path}'. Please update any links and bookmarks that may still have the old path."
+  end
 end
diff --git a/spec/controllers/users_controller_spec.rb b/spec/controllers/users_controller_spec.rb
index 74c5aa44ba9..1d61719f1d0 100644
--- a/spec/controllers/users_controller_spec.rb
+++ b/spec/controllers/users_controller_spec.rb
@@ -83,7 +83,7 @@ describe UsersController do
         get :show, username: redirect_route.path
 
         expect(response).to redirect_to(user)
-        expect(controller).to set_flash[:notice].to(/moved/)
+        expect(controller).to set_flash[:notice].to(user_moved_message(redirect_route, user))
       end
     end
 
@@ -162,7 +162,7 @@ describe UsersController do
         get :calendar, username: redirect_route.path
 
         expect(response).to redirect_to(user_calendar_path(user))
-        expect(controller).to set_flash[:notice].to(/moved/)
+        expect(controller).to set_flash[:notice].to(user_moved_message(redirect_route, user))
       end
     end
   end
@@ -216,7 +216,7 @@ describe UsersController do
         get :calendar_activities, username: redirect_route.path
 
         expect(response).to redirect_to(user_calendar_activities_path(user))
-        expect(controller).to set_flash[:notice].to(/moved/)
+        expect(controller).to set_flash[:notice].to(user_moved_message(redirect_route, user))
       end
     end
   end
@@ -270,7 +270,7 @@ describe UsersController do
         get :snippets, username: redirect_route.path
 
         expect(response).to redirect_to(user_snippets_path(user))
-        expect(controller).to set_flash[:notice].to(/moved/)
+        expect(controller).to set_flash[:notice].to(user_moved_message(redirect_route, user))
       end
     end
   end
@@ -320,4 +320,8 @@ describe UsersController do
       end
     end
   end
+
+  def user_moved_message(redirect_route, user)
+    "User '#{redirect_route.path}' was moved to '#{user.full_path}'. Please update any links and bookmarks that may still have the old path."
+  end
 end
diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
index 11ef8e1f61b..1238647d3f3 100644
--- a/spec/features/boards/sidebar_spec.rb
+++ b/spec/features/boards/sidebar_spec.rb
@@ -158,7 +158,7 @@ describe 'Issue Boards', feature: true, js: true do
       end
 
       page.within(first('.board')) do
-        find('.card:nth-child(2)').click
+        find('.card:nth-child(2)').trigger('click')
       end
 
       page.within('.assignee') do
diff --git a/spec/features/dashboard/issuables_counter_spec.rb b/spec/features/dashboard/issuables_counter_spec.rb
index 6f7bf0eba6e..354267dbee7 100644
--- a/spec/features/dashboard/issuables_counter_spec.rb
+++ b/spec/features/dashboard/issuables_counter_spec.rb
@@ -19,7 +19,7 @@ describe 'Navigation bar counter', feature: true, caching: true do
 
     issue.assignees = []
 
-    user.update_cache_counts
+    user.invalidate_cache_counts
 
     Timecop.travel(3.minutes.from_now) do
       visit issues_path
@@ -35,6 +35,8 @@ describe 'Navigation bar counter', feature: true, caching: true do
 
     merge_request.update(assignee: nil)
 
+    user.invalidate_cache_counts
+
     Timecop.travel(3.minutes.from_now) do
       visit merge_requests_path
 
diff --git a/spec/features/dashboard/milestone_filter_spec.rb b/spec/features/dashboard/milestone_filter_spec.rb
index 628627f70d4..d60a002a8d7 100644
--- a/spec/features/dashboard/milestone_filter_spec.rb
+++ b/spec/features/dashboard/milestone_filter_spec.rb
@@ -1,6 +1,8 @@
 require 'spec_helper'
 
-describe 'Dashboard > milestone filter', feature: true, js: true do
+describe 'Dashboard > milestone filter', :feature, :js do
+  include WaitForAjax
+
   let(:user) { create(:user) }
   let(:project) { create(:project, name: 'test', namespace: user.namespace) }
   let(:milestone) { create(:milestone, title: "v1.0", project: project) }
@@ -26,30 +28,29 @@ describe 'Dashboard > milestone filter', feature: true, js: true do
 
     before do
       find(milestone_select).click
+      wait_for_ajax
 
       page.within('.dropdown-content') do
         click_link 'v1.0'
       end
 
       find(milestone_select).click
+      wait_for_ajax
     end
 
     it 'shows issues with Milestone v1.0' do
       expect(find('.issues-list')).to have_selector('.issue', count: 1)
-
-      find(milestone_select).click
-
       expect(find('.dropdown-content')).to have_selector('a.is-active', count: 1)
     end
 
     it 'should not change active Milestone unless clicked' do
-      find(milestone_select).click
-
       expect(find('.dropdown-content')).to have_selector('a.is-active', count: 1)
 
       # open & close dropdown
       find('.dropdown-menu-close').click
+      
       expect(find('.milestone-filter')).not_to have_selector('.dropdown.open')
+      
       find(milestone_select).click
 
       expect(find('.dropdown-content')).to have_selector('a.is-active', count: 1)
diff --git a/spec/features/issues/form_spec.rb b/spec/features/issues/form_spec.rb
index 87adce3cddd..095cbb65c16 100644
--- a/spec/features/issues/form_spec.rb
+++ b/spec/features/issues/form_spec.rb
@@ -1,8 +1,9 @@
 require 'rails_helper'
 
-describe 'New/edit issue', feature: true, js: true do
+describe 'New/edit issue', :feature, :js do
   include GitlabRoutingHelper
   include ActionView::Helpers::JavaScriptHelper
+  include WaitForAjax
 
   let!(:project)   { create(:project) }
   let!(:user)      { create(:user)}
@@ -26,6 +27,8 @@ describe 'New/edit issue', feature: true, js: true do
     describe 'multiple assignees' do
       before do
         click_button 'Unassigned'
+        
+        wait_for_ajax
       end
 
       it 'unselects other assignees when unassigned is selected' do
@@ -65,6 +68,9 @@ describe 'New/edit issue', feature: true, js: true do
 
       expect(find('a', text: 'Assign to me')).to be_visible
       click_button 'Unassigned'
+
+      wait_for_ajax
+
       page.within '.dropdown-menu-user' do
         click_link user2.name
       end
@@ -148,16 +154,15 @@ describe 'New/edit issue', feature: true, js: true do
 
     it 'correctly updates the selected user when changing assignee' do
       click_button 'Unassigned'
+      
+      wait_for_ajax
+
       page.within '.dropdown-menu-user' do
         click_link user.name
       end
 
       expect(find('input[name="issue[assignee_ids][]"]', visible: false).value).to match(user.id.to_s)
-
-      click_button user.name
-
       expect(find('.dropdown-menu-user a.is-active').first(:xpath, '..')['data-user-id']).to eq(user.id.to_s)
-
       # check the ::before pseudo element to ensure checkmark icon is present
       expect(before_for_selector('.dropdown-menu-selectable a.is-active')).not_to eq('')
       expect(before_for_selector('.dropdown-menu-selectable a:not(.is-active)')).to eq('')
@@ -167,9 +172,6 @@ describe 'New/edit issue', feature: true, js: true do
       end
 
       expect(find('input[name="issue[assignee_ids][]"]', visible: false).value).to match(user2.id.to_s)
-
-      click_button user2.name
-
       expect(find('.dropdown-menu-user a.is-active').first(:xpath, '..')['data-user-id']).to eq(user2.id.to_s)
     end
   end
diff --git a/spec/features/issues/notes_on_issues_spec.rb b/spec/features/issues/notes_on_issues_spec.rb
new file mode 100644
index 00000000000..a4035324d2b
--- /dev/null
+++ b/spec/features/issues/notes_on_issues_spec.rb
@@ -0,0 +1,77 @@
+require 'spec_helper'
+
+describe 'Create notes on issues', :js, :feature do
+  let(:user) { create(:user) }
+
+  shared_examples 'notes with reference' do
+    let(:issue) { create(:issue, project: project) }
+    let(:note_text) { "Check #{mention.to_reference}" }
+
+    before do
+      project.team << [user, :developer]
+      login_as(user)
+      visit namespace_project_issue_path(project.namespace, project, issue)
+
+      fill_in 'note[note]', with: note_text
+      click_button 'Comment'
+
+      wait_for_ajax
+    end
+
+    it 'creates a note with reference and cross references the issue' do
+      page.within('div#notes li.note div.note-text') do
+        expect(page).to have_content(note_text)
+        expect(page.find('a')).to have_content(mention.to_reference)
+      end
+
+      find('div#notes li.note div.note-text a').click
+
+      page.within('div#notes li.note .system-note-message') do
+        expect(page).to have_content('mentioned in issue')
+        expect(page.find('a')).to have_content(issue.to_reference)
+      end
+    end
+  end
+
+  context 'mentioning issue on a private project' do
+    it_behaves_like 'notes with reference' do
+      let(:project) { create(:project, :private) }
+      let(:mention) { create(:issue, project: project) }
+    end
+  end
+
+  context 'mentioning issue on an internal project' do
+    it_behaves_like 'notes with reference' do
+      let(:project) { create(:project, :internal) }
+      let(:mention) { create(:issue, project: project) }
+    end
+  end
+
+  context 'mentioning issue on a public project' do
+    it_behaves_like 'notes with reference' do
+      let(:project) { create(:project, :public) }
+      let(:mention) { create(:issue, project: project) }
+    end
+  end
+
+  context 'mentioning merge request on a private project' do
+    it_behaves_like 'notes with reference' do
+      let(:project) { create(:project, :private) }
+      let(:mention) { create(:merge_request, source_project: project) }
+    end
+  end
+
+  context 'mentioning merge request on an internal project' do
+    it_behaves_like 'notes with reference' do
+      let(:project) { create(:project, :internal) }
+      let(:mention) { create(:merge_request, source_project: project) }
+    end
+  end
+
+  context 'mentioning merge request on a public project' do
+    it_behaves_like 'notes with reference' do
+      let(:project) { create(:project, :public) }
+      let(:mention) { create(:merge_request, source_project: project) }
+    end
+  end
+end
diff --git a/spec/features/issues_spec.rb b/spec/features/issues_spec.rb
index 5285dda361b..fdd78600a1d 100644
--- a/spec/features/issues_spec.rb
+++ b/spec/features/issues_spec.rb
@@ -573,6 +573,8 @@ describe 'Issues', feature: true do
   end
 
   describe 'new issue' do
+    let!(:issue) { create(:issue, project: project) }
+
     context 'by unauthenticated user' do
       before do
         logout
diff --git a/spec/features/projects/branches/new_branch_ref_dropdown_spec.rb b/spec/features/projects/branches/new_branch_ref_dropdown_spec.rb
index cfc782c98ad..c5e0a0f0517 100644
--- a/spec/features/projects/branches/new_branch_ref_dropdown_spec.rb
+++ b/spec/features/projects/branches/new_branch_ref_dropdown_spec.rb
@@ -3,7 +3,7 @@ require 'spec_helper'
 describe 'New Branch Ref Dropdown', :js, :feature do
   let(:user) { create(:user) }
   let(:project) { create(:project, :public) }
-  let(:toggle) { find('.create-from .dropdown-toggle') }
+  let(:toggle) { find('.create-from .dropdown-menu-toggle') }
 
   before do
     project.add_master(user)
diff --git a/spec/features/projects/pipeline_schedules_spec.rb b/spec/features/projects/pipeline_schedules_spec.rb
index cdac4fe2111..fe9f94db574 100644
--- a/spec/features/projects/pipeline_schedules_spec.rb
+++ b/spec/features/projects/pipeline_schedules_spec.rb
@@ -6,6 +6,7 @@ feature 'Pipeline Schedules', :feature do
 
   let!(:project) { create(:project) }
   let!(:pipeline_schedule) { create(:ci_pipeline_schedule, project: project) }
+  let!(:pipeline) { create(:ci_pipeline, pipeline_schedule: pipeline_schedule) }
   let(:scope) { nil }
   let!(:user) { create(:user) }
 
@@ -32,7 +33,7 @@ feature 'Pipeline Schedules', :feature do
         page.within('.pipeline-schedule-table-row') do
           expect(page).to have_content('pipeline schedule')
           expect(page).to have_link('master')
-          expect(page).to have_content('None')
+          expect(page).to have_link("##{pipeline.id}")
         end
       end
 
diff --git a/spec/features/protected_branches/access_control_ce_spec.rb b/spec/features/protected_branches/access_control_ce_spec.rb
index d30e7947106..7fda4ade665 100644
--- a/spec/features/protected_branches/access_control_ce_spec.rb
+++ b/spec/features/protected_branches/access_control_ce_spec.rb
@@ -31,7 +31,7 @@ RSpec.shared_examples "protected branches > access control > CE" do
 
       within(".protected-branches-list") do
         find(".js-allowed-to-push").click
-        
+
         within('.js-allowed-to-push-container') do
           expect(first("li")).to have_content("Roles")
           click_on access_type_name
diff --git a/spec/javascripts/issue_show/issue_title_description_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 1ec4fe58b08..09bca2c3680 100644
--- a/spec/javascripts/issue_show/issue_title_description_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -1,11 +1,8 @@
 import Vue from 'vue';
-import $ from 'jquery';
 import '~/render_math';
 import '~/render_gfm';
-import issueTitleDescription from '~/issue_show/issue_title_description.vue';
-import issueShowData from './mock_data';
-
-window.$ = $;
+import issuableApp from '~/issue_show/components/app.vue';
+import issueShowData from '../mock_data';
 
 const issueShowInterceptor = data => (request, next) => {
   next(request.respondWith(JSON.stringify(data), {
@@ -16,42 +13,45 @@ const issueShowInterceptor = data => (request, next) => {
   }));
 };
 
-describe('Issue Title', () => {
+describe('Issuable output', () => {
   document.body.innerHTML = '<span id="task_status"></span>';
 
-  let IssueTitleDescriptionComponent;
+  let vm;
 
   beforeEach(() => {
-    IssueTitleDescriptionComponent = Vue.extend(issueTitleDescription);
-  });
-
-  afterEach(() => {
-    Vue.http.interceptors = _.without(Vue.http.interceptors, issueShowInterceptor);
-  });
-
-  it('should render a title/description and update title/description on update', (done) => {
+    const IssuableDescriptionComponent = Vue.extend(issuableApp);
     Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest));
 
-    const issueShowComponent = new IssueTitleDescriptionComponent({
+    vm = new IssuableDescriptionComponent({
       propsData: {
-        canUpdateIssue: '.css-stuff',
+        canUpdate: true,
         endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title',
+        issuableRef: '#1',
+        initialTitle: '',
+        initialDescriptionHtml: '',
+        initialDescriptionText: '',
       },
     }).$mount();
+  });
 
+  afterEach(() => {
+    Vue.http.interceptors = _.without(Vue.http.interceptors, issueShowInterceptor);
+  });
+
+  it('should render a title/description and update title/description on update', (done) => {
     setTimeout(() => {
       expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
-      expect(issueShowComponent.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
-      expect(issueShowComponent.$el.querySelector('.wiki').innerHTML).toContain('<p>this is a description!</p>');
-      expect(issueShowComponent.$el.querySelector('.js-task-list-field').innerText).toContain('this is a description');
+      expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
+      expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>this is a description!</p>');
+      expect(vm.$el.querySelector('.js-task-list-field').value).toContain('this is a description');
 
       Vue.http.interceptors.push(issueShowInterceptor(issueShowData.secondRequest));
 
       setTimeout(() => {
         expect(document.querySelector('title').innerText).toContain('2 (#1)');
-        expect(issueShowComponent.$el.querySelector('.title').innerHTML).toContain('<p>2</p>');
-        expect(issueShowComponent.$el.querySelector('.wiki').innerHTML).toContain('<p>42</p>');
-        expect(issueShowComponent.$el.querySelector('.js-task-list-field').innerText).toContain('42');
+        expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>2</p>');
+        expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>42</p>');
+        expect(vm.$el.querySelector('.js-task-list-field').value).toContain('42');
 
         done();
       });
diff --git a/spec/javascripts/issue_show/components/description_spec.js b/spec/javascripts/issue_show/components/description_spec.js
new file mode 100644
index 00000000000..408349cc42d
--- /dev/null
+++ b/spec/javascripts/issue_show/components/description_spec.js
@@ -0,0 +1,99 @@
+import Vue from 'vue';
+import descriptionComponent from '~/issue_show/components/description.vue';
+
+describe('Description component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(descriptionComponent);
+
+    if (!document.querySelector('.issuable-meta')) {
+      const metaData = document.createElement('div');
+      metaData.classList.add('issuable-meta');
+      metaData.innerHTML = '<span id="task_status"></span><span id="task_status_short"></span>';
+
+      document.body.appendChild(metaData);
+    }
+
+    vm = new Component({
+      propsData: {
+        canUpdate: true,
+        descriptionHtml: 'test',
+        descriptionText: 'test',
+        updatedAt: new Date().toString(),
+        taskStatus: '',
+      },
+    }).$mount();
+  });
+
+  it('animates description changes', (done) => {
+    vm.descriptionHtml = 'changed';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.wiki').classList.contains('issue-realtime-pre-pulse'),
+      ).toBeTruthy();
+
+      setTimeout(() => {
+        expect(
+          vm.$el.querySelector('.wiki').classList.contains('issue-realtime-trigger-pulse'),
+        ).toBeTruthy();
+
+        done();
+      });
+    });
+  });
+
+  it('re-inits the TaskList when description changed', (done) => {
+    spyOn(gl, 'TaskList');
+    vm.descriptionHtml = 'changed';
+
+    setTimeout(() => {
+      expect(
+        gl.TaskList,
+      ).toHaveBeenCalled();
+
+      done();
+    });
+  });
+
+  it('does not re-init the TaskList when canUpdate is false', (done) => {
+    spyOn(gl, 'TaskList');
+    vm.canUpdate = false;
+    vm.descriptionHtml = 'changed';
+
+    setTimeout(() => {
+      expect(
+        gl.TaskList,
+      ).not.toHaveBeenCalled();
+
+      done();
+    });
+  });
+
+  describe('taskStatus', () => {
+    it('adds full taskStatus', (done) => {
+      vm.taskStatus = '1 of 1';
+
+      setTimeout(() => {
+        expect(
+          document.querySelector('.issuable-meta #task_status').textContent.trim(),
+        ).toBe('1 of 1');
+
+        done();
+      });
+    });
+
+    it('adds short taskStatus', (done) => {
+      vm.taskStatus = '1 of 1';
+
+      setTimeout(() => {
+        expect(
+          document.querySelector('.issuable-meta #task_status_short').textContent.trim(),
+        ).toBe('1/1 task');
+
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/issue_show/components/title_spec.js b/spec/javascripts/issue_show/components/title_spec.js
new file mode 100644
index 00000000000..2f953e7e92e
--- /dev/null
+++ b/spec/javascripts/issue_show/components/title_spec.js
@@ -0,0 +1,67 @@
+import Vue from 'vue';
+import titleComponent from '~/issue_show/components/title.vue';
+
+describe('Title component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(titleComponent);
+    vm = new Component({
+      propsData: {
+        issuableRef: '#1',
+        titleHtml: 'Testing <img />',
+        titleText: 'Testing',
+      },
+    }).$mount();
+  });
+
+  it('renders title HTML', () => {
+    expect(
+      vm.$el.innerHTML.trim(),
+    ).toBe('Testing <img>');
+  });
+
+  it('updates page title when changing titleHtml', (done) => {
+    spyOn(vm, 'setPageTitle');
+    vm.titleHtml = 'test';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.setPageTitle,
+      ).toHaveBeenCalled();
+
+      done();
+    });
+  });
+
+  it('animates title changes', (done) => {
+    vm.titleHtml = 'test';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.classList.contains('issue-realtime-pre-pulse'),
+      ).toBeTruthy();
+
+      setTimeout(() => {
+        expect(
+          vm.$el.classList.contains('issue-realtime-trigger-pulse'),
+        ).toBeTruthy();
+
+        done();
+      });
+    });
+  });
+
+  it('updates page title after changing title', (done) => {
+    vm.titleHtml = 'changed';
+    vm.titleText = 'changed';
+
+    Vue.nextTick(() => {
+      expect(
+        document.querySelector('title').textContent.trim(),
+      ).toContain('changed');
+
+      done();
+    });
+  });
+});
diff --git a/spec/javascripts/issue_show/mock_data.js b/spec/javascripts/issue_show/mock_data.js
index ad5a7b63470..6683d581bc5 100644
--- a/spec/javascripts/issue_show/mock_data.js
+++ b/spec/javascripts/issue_show/mock_data.js
@@ -4,23 +4,23 @@ export default {
     title_text: 'this is a title',
     description: '<p>this is a description!</p>',
     description_text: 'this is a description',
-    issue_number: 1,
     task_status: '2 of 4 completed',
+    updated_at: new Date().toString(),
   },
   secondRequest: {
     title: '<p>2</p>',
     title_text: '2',
     description: '<p>42</p>',
     description_text: '42',
-    issue_number: 1,
     task_status: '0 of 0 completed',
+    updated_at: new Date().toString(),
   },
   issueSpecRequest: {
     title: '<p>this is a title</p>',
     title_text: 'this is a title',
     description: '<li class="task-list-item enabled"><input type="checkbox" class="task-list-item-checkbox">Task List Item</li>',
     description_text: '- [ ] Task List Item',
-    issue_number: 1,
     task_status: '0 of 1 completed',
+    updated_at: new Date().toString(),
   },
 };
diff --git a/spec/javascripts/lib/utils/poll_spec.js b/spec/javascripts/lib/utils/poll_spec.js
index 918b6d32c43..22f30191ab9 100644
--- a/spec/javascripts/lib/utils/poll_spec.js
+++ b/spec/javascripts/lib/utils/poll_spec.js
@@ -1,9 +1,5 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
 import Poll from '~/lib/utils/poll';
 
-Vue.use(VueResource);
-
 const waitForAllCallsToFinish = (service, waitForCount, successCallback) => {
   const timer = () => {
     setTimeout(() => {
@@ -12,45 +8,33 @@ const waitForAllCallsToFinish = (service, waitForCount, successCallback) => {
       } else {
         timer();
       }
-    }, 5);
+    }, 0);
   };
 
   timer();
 };
 
-class ServiceMock {
-  constructor(endpoint) {
-    this.service = Vue.resource(endpoint);
-  }
+function mockServiceCall(service, response, shouldFail = false) {
+  const action = shouldFail ? Promise.reject : Promise.resolve;
+  const responseObject = response;
+
+  if (!responseObject.headers) responseObject.headers = {};
 
-  fetch() {
-    return this.service.get();
-  }
+  service.fetch.and.callFake(action.bind(Promise, responseObject));
 }
 
 describe('Poll', () => {
-  let callbacks;
-  let service;
+  const service = jasmine.createSpyObj('service', ['fetch']);
+  const callbacks = jasmine.createSpyObj('callbacks', ['success', 'error']);
 
-  beforeEach(() => {
-    callbacks = {
-      success: () => {},
-      error: () => {},
-    };
-
-    service = new ServiceMock('endpoint');
-
-    spyOn(callbacks, 'success');
-    spyOn(callbacks, 'error');
-    spyOn(service, 'fetch').and.callThrough();
+  afterEach(() => {
+    callbacks.success.calls.reset();
+    callbacks.error.calls.reset();
+    service.fetch.calls.reset();
   });
 
   it('calls the success callback when no header for interval is provided', (done) => {
-    const successInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), { status: 200 }));
-    };
-
-    Vue.http.interceptors.push(successInterceptor);
+    mockServiceCall(service, { status: 200 });
 
     new Poll({
       resource: service,
@@ -63,18 +47,12 @@ describe('Poll', () => {
       expect(callbacks.success).toHaveBeenCalled();
       expect(callbacks.error).not.toHaveBeenCalled();
 
-      Vue.http.interceptors = _.without(Vue.http.interceptors, successInterceptor);
-
       done();
-    }, 0);
+    });
   });
 
   it('calls the error callback whe the http request returns an error', (done) => {
-    const errorInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), { status: 500 }));
-    };
-
-    Vue.http.interceptors.push(errorInterceptor);
+    mockServiceCall(service, { status: 500 }, true);
 
     new Poll({
       resource: service,
@@ -86,42 +64,29 @@ describe('Poll', () => {
     waitForAllCallsToFinish(service, 1, () => {
       expect(callbacks.success).not.toHaveBeenCalled();
       expect(callbacks.error).toHaveBeenCalled();
-      Vue.http.interceptors = _.without(Vue.http.interceptors, errorInterceptor);
 
       done();
     });
   });
 
   it('should call the success callback when the interval header is -1', (done) => {
-    const intervalInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), { status: 200, headers: { 'poll-interval': -1 } }));
-    };
-
-    Vue.http.interceptors.push(intervalInterceptor);
+    mockServiceCall(service, { status: 200, headers: { 'poll-interval': -1 } });
 
     new Poll({
       resource: service,
       method: 'fetch',
       successCallback: callbacks.success,
       errorCallback: callbacks.error,
-    }).makeRequest();
-
-    setTimeout(() => {
+    }).makeRequest().then(() => {
       expect(callbacks.success).toHaveBeenCalled();
       expect(callbacks.error).not.toHaveBeenCalled();
 
-      Vue.http.interceptors = _.without(Vue.http.interceptors, intervalInterceptor);
-
       done();
-    }, 0);
+    }).catch(done.fail);
   });
 
   it('starts polling when http status is 200 and interval header is provided', (done) => {
-    const pollInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), { status: 200, headers: { 'poll-interval': 2 } }));
-    };
-
-    Vue.http.interceptors.push(pollInterceptor);
+    mockServiceCall(service, { status: 200, headers: { 'poll-interval': 1 } });
 
     const Polling = new Poll({
       resource: service,
@@ -141,19 +106,13 @@ describe('Poll', () => {
       expect(callbacks.success).toHaveBeenCalled();
       expect(callbacks.error).not.toHaveBeenCalled();
 
-      Vue.http.interceptors = _.without(Vue.http.interceptors, pollInterceptor);
-
       done();
     });
   });
 
   describe('stop', () => {
     it('stops polling when method is called', (done) => {
-      const pollInterceptor = (request, next) => {
-        next(request.respondWith(JSON.stringify([]), { status: 200, headers: { 'poll-interval': 2 } }));
-      };
-
-      Vue.http.interceptors.push(pollInterceptor);
+      mockServiceCall(service, { status: 200, headers: { 'poll-interval': 1 } });
 
       const Polling = new Poll({
         resource: service,
@@ -174,8 +133,6 @@ describe('Poll', () => {
         expect(service.fetch).toHaveBeenCalledWith({ page: 1 });
         expect(Polling.stop).toHaveBeenCalled();
 
-        Vue.http.interceptors = _.without(Vue.http.interceptors, pollInterceptor);
-
         done();
       });
     });
@@ -183,11 +140,7 @@ describe('Poll', () => {
 
   describe('restart', () => {
     it('should restart polling when its called', (done) => {
-      const pollInterceptor = (request, next) => {
-        next(request.respondWith(JSON.stringify([]), { status: 200, headers: { 'poll-interval': 2 } }));
-      };
-
-      Vue.http.interceptors.push(pollInterceptor);
+      mockServiceCall(service, { status: 200, headers: { 'poll-interval': 1 } });
 
       const Polling = new Poll({
         resource: service,
@@ -215,8 +168,6 @@ describe('Poll', () => {
         expect(Polling.stop).toHaveBeenCalled();
         expect(Polling.restart).toHaveBeenCalled();
 
-        Vue.http.interceptors = _.without(Vue.http.interceptors, pollInterceptor);
-
         done();
       });
     });
diff --git a/spec/javascripts/pipeline_schedules/pipeline_schedule_callout_spec.js b/spec/javascripts/pipeline_schedules/pipeline_schedule_callout_spec.js
index 1d05f37cb36..6120d224ac0 100644
--- a/spec/javascripts/pipeline_schedules/pipeline_schedule_callout_spec.js
+++ b/spec/javascripts/pipeline_schedules/pipeline_schedule_callout_spec.js
@@ -4,8 +4,15 @@ import PipelineSchedulesCallout from '~/pipeline_schedules/components/pipeline_s
 
 const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
 const cookieKey = 'pipeline_schedules_callout_dismissed';
+const docsUrl = 'help/ci/scheduled_pipelines';
 
 describe('Pipeline Schedule Callout', () => {
+  beforeEach(() => {
+    setFixtures(`
+      <div id='pipeline-schedules-callout' data-docs-url=${docsUrl}></div>
+    `);
+  });
+
   describe('independent of cookies', () => {
     beforeEach(() => {
       this.calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
@@ -18,6 +25,10 @@ describe('Pipeline Schedule Callout', () => {
     it('correctly sets illustrationSvg', () => {
       expect(this.calloutComponent.illustrationSvg).toContain('<svg');
     });
+
+    it('correctly sets docsUrl', () => {
+      expect(this.calloutComponent.docsUrl).toContain(docsUrl);
+    });
   });
 
   describe(`when ${cookieKey} cookie is set`, () => {
@@ -61,6 +72,10 @@ describe('Pipeline Schedule Callout', () => {
       expect(this.calloutComponent.$el.outerHTML).toContain('runs pipelines in the future');
     });
 
+    it('renders the documentation url', () => {
+      expect(this.calloutComponent.$el.outerHTML).toContain(docsUrl);
+    });
+
     it('updates calloutDismissed when close button is clicked', (done) => {
       this.calloutComponent.$el.querySelector('#dismiss-callout-btn').click();
 
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js
index 2f971b39d16..d4b200875df 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import deploymentComponent from '~/vue_merge_request_widget/components/mr_widget_deployment';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
-import { statusClassToSvgMap } from '~/vue_shared/pipeline_svg_icons';
+import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
 
 const deploymentMockData = [
   {
@@ -46,7 +46,7 @@ describe('MRWidgetDeployment', () => {
     describe('svg', () => {
       it('should have the proper SVG icon', () => {
         const vm = createComponent(deploymentMockData);
-        expect(vm.svg).toEqual(statusClassToSvgMap.icon_status_success);
+        expect(vm.svg).toEqual(statusIconEntityMap.icon_status_success);
       });
     });
   });
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
index 48f816c8460..7f3eea7d2e5 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
@@ -48,10 +48,12 @@ describe('MRWidgetHeader', () => {
   describe('template', () => {
     let vm;
     let el;
+    const sourceBranchPath = '/foo/bar/mr-widget-refactor';
     const mr = {
       divergedCommitsCount: 12,
       sourceBranch: 'mr-widget-refactor',
-      sourceBranchLink: '/foo/bar/mr-widget-refactor',
+      sourceBranchLink: `<a href="${sourceBranchPath}">mr-widget-refactor</a>`,
+      targetBranchPath: 'foo/bar/commits-path',
       targetBranch: 'master',
       isOpen: true,
       emailPatchesPath: '/mr/email-patches',
@@ -65,8 +67,13 @@ describe('MRWidgetHeader', () => {
 
     it('should render template elements correctly', () => {
       expect(el.classList.contains('mr-source-target')).toBeTruthy();
-      expect(el.querySelectorAll('.label-branch')[0].textContent).toContain(mr.sourceBranch);
-      expect(el.querySelectorAll('.label-branch')[1].textContent).toContain(mr.targetBranch);
+      const sourceBranchLink = el.querySelectorAll('.label-branch')[0];
+      const targetBranchLink = el.querySelectorAll('.label-branch')[1];
+
+      expect(sourceBranchLink.textContent).toContain(mr.sourceBranch);
+      expect(targetBranchLink.textContent).toContain(mr.targetBranch);
+      expect(sourceBranchLink.querySelector('a').getAttribute('href')).toEqual(sourceBranchPath);
+      expect(targetBranchLink.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchPath);
       expect(el.querySelector('.diverged-commits-count').textContent).toContain('12 commits behind');
 
       expect(el.textContent).toContain('Check out branch');
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
index 1b418c7dfcf..647b59520f8 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { statusClassToSvgMap } from '~/vue_shared/pipeline_svg_icons';
+import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
 import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline';
 import mockData from '../mock_data';
 
@@ -24,7 +24,7 @@ describe('MRWidgetPipeline', () => {
   describe('components', () => {
     it('should have components added', () => {
       expect(pipelineComponent.components['pipeline-stage']).toBeDefined();
-      expect(pipelineComponent.components['pipeline-status-icon']).toBeDefined();
+      expect(pipelineComponent.components.ciIcon).toBeDefined();
     });
   });
 
@@ -33,7 +33,7 @@ describe('MRWidgetPipeline', () => {
       it('should have the proper SVG icon', () => {
         const vm = createComponent({ pipeline: mockData.pipeline });
 
-        expect(vm.svg).toEqual(statusClassToSvgMap.icon_status_failed);
+        expect(vm.svg).toEqual(statusIconEntityMap.icon_status_failed);
       });
     });
 
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
index 78a70725e94..47303d1e80f 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
@@ -3,7 +3,7 @@ import closedComponent from '~/vue_merge_request_widget/components/states/mr_wid
 
 const mr = {
   targetBranch: 'good-branch',
-  targetBranchCommitsPath: '/good-branch',
+  targetBranchPath: '/good-branch',
   closedBy: {
     name: 'Fatih Acet',
     username: 'fatihacet',
@@ -44,7 +44,7 @@ describe('MRWidgetClosed', () => {
       expect(el.querySelector('h4').textContent).toContain('Closed by');
       expect(el.querySelector('h4').textContent).toContain(mr.closedBy.name);
       expect(el.textContent).toContain('The changes were not merged into');
-      expect(el.querySelector('.label-branch').getAttribute('href')).toEqual(mr.targetBranchCommitsPath);
+      expect(el.querySelector('.label-branch').getAttribute('href')).toEqual(mr.targetBranchPath);
       expect(el.querySelector('.label-branch').textContent).toContain(mr.targetBranch);
     });
   });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
new file mode 100644
index 00000000000..5fb1d69a8b3
--- /dev/null
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import shaMismatchComponent from '~/vue_merge_request_widget/components/states/mr_widget_sha_mismatch';
+
+describe('MRWidgetSHAMismatch', () => {
+  describe('template', () => {
+    const Component = Vue.extend(shaMismatchComponent);
+    const vm = new Component({
+      el: document.createElement('div'),
+    });
+    it('should have correct elements', () => {
+      expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
+      expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
+      expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging.');
+    });
+  });
+});
diff --git a/spec/javascripts/vue_mr_widget/stores/get_state_key_spec.js b/spec/javascripts/vue_mr_widget/stores/get_state_key_spec.js
index ee944f4d4e5..9a331d99865 100644
--- a/spec/javascripts/vue_mr_widget/stores/get_state_key_spec.js
+++ b/spec/javascripts/vue_mr_widget/stores/get_state_key_spec.js
@@ -25,6 +25,9 @@ describe('getStateKey', () => {
     context.canBeMerged = true;
     expect(bound()).toEqual('readyToMerge');
 
+    context.hasSHAChanged = true;
+    expect(bound()).toEqual('shaMismatch');
+
     context.isPipelineBlocked = true;
     expect(bound()).toEqual('pipelineBlocked');
 
diff --git a/spec/javascripts/vue_mr_widget/stores/mr_widget_store_spec.js b/spec/javascripts/vue_mr_widget/stores/mr_widget_store_spec.js
new file mode 100644
index 00000000000..56dd0198ae2
--- /dev/null
+++ b/spec/javascripts/vue_mr_widget/stores/mr_widget_store_spec.js
@@ -0,0 +1,22 @@
+import MergeRequestStore from '~/vue_merge_request_widget/stores/mr_widget_store';
+import mockData from '../mock_data';
+
+describe('MergeRequestStore', () => {
+  describe('setData', () => {
+    let store;
+
+    beforeEach(() => {
+      store = new MergeRequestStore(mockData);
+    });
+
+    it('should set hasSHAChanged when the diff SHA changes', () => {
+      store.setData({ ...mockData, diff_head_sha: 'a-different-string' });
+      expect(store.hasSHAChanged).toBe(true);
+    });
+
+    it('should not set hasSHAChanged when other data changes', () => {
+      store.setData({ ...mockData, work_in_progress: !mockData.work_in_progress });
+      expect(store.hasSHAChanged).toBe(false);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
new file mode 100644
index 00000000000..daed4da3e15
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
@@ -0,0 +1,89 @@
+import Vue from 'vue';
+import ciBadge from '~/vue_shared/components/ci_badge_link.vue';
+
+describe('CI Badge Link Component', () => {
+  let CIBadge;
+
+  const statuses = {
+    canceled: {
+      text: 'canceled',
+      label: 'canceled',
+      group: 'canceled',
+      icon: 'icon_status_canceled',
+      details_path: 'status/canceled',
+    },
+    created: {
+      text: 'created',
+      label: 'created',
+      group: 'created',
+      icon: 'icon_status_created',
+      details_path: 'status/created',
+    },
+    failed: {
+      text: 'failed',
+      label: 'failed',
+      group: 'failed',
+      icon: 'icon_status_failed',
+      details_path: 'status/failed',
+    },
+    manual: {
+      text: 'manual',
+      label: 'manual action',
+      group: 'manual',
+      icon: 'icon_status_manual',
+      details_path: 'status/manual',
+    },
+    pending: {
+      text: 'pending',
+      label: 'pending',
+      group: 'pending',
+      icon: 'icon_status_pending',
+      details_path: 'status/pending',
+    },
+    running: {
+      text: 'running',
+      label: 'running',
+      group: 'running',
+      icon: 'icon_status_running',
+      details_path: 'status/running',
+    },
+    skipped: {
+      text: 'skipped',
+      label: 'skipped',
+      group: 'skipped',
+      icon: 'icon_status_skipped',
+      details_path: 'status/skipped',
+    },
+    success_warining: {
+      text: 'passed',
+      label: 'passed',
+      group: 'success_with_warnings',
+      icon: 'icon_status_warning',
+      details_path: 'status/warning',
+    },
+    success: {
+      text: 'passed',
+      label: 'passed',
+      group: 'passed',
+      icon: 'icon_status_success',
+      details_path: 'status/passed',
+    },
+  };
+
+  it('should render each status badge', () => {
+    CIBadge = Vue.extend(ciBadge);
+    Object.keys(statuses).map((status) => {
+      const vm = new CIBadge({
+        propsData: {
+          status: statuses[status],
+        },
+      }).$mount();
+
+      expect(vm.$el.getAttribute('href')).toEqual(statuses[status].details_path);
+      expect(vm.$el.textContent.trim()).toEqual(statuses[status].text);
+      expect(vm.$el.getAttribute('class')).toEqual(`ci-status ci-${statuses[status].group}`);
+      expect(vm.$el.querySelector('svg')).toBeDefined();
+      return vm;
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/ci_icon_spec.js b/spec/javascripts/vue_shared/components/ci_icon_spec.js
index 98dc6caa622..d8664408595 100644
--- a/spec/javascripts/vue_shared/components/ci_icon_spec.js
+++ b/spec/javascripts/vue_shared/components/ci_icon_spec.js
@@ -25,6 +25,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_success',
+          group: 'success',
         },
       },
     }).$mount();
@@ -37,6 +38,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_failed',
+          group: 'failed',
         },
       },
     }).$mount();
@@ -49,6 +51,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_warning',
+          group: 'warning',
         },
       },
     }).$mount();
@@ -61,6 +64,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_pending',
+          group: 'pending',
         },
       },
     }).$mount();
@@ -73,6 +77,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_running',
+          group: 'running',
         },
       },
     }).$mount();
@@ -85,6 +90,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_created',
+          group: 'created',
         },
       },
     }).$mount();
@@ -97,6 +103,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_skipped',
+          group: 'skipped',
         },
       },
     }).$mount();
@@ -109,6 +116,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_canceled',
+          group: 'canceled',
         },
       },
     }).$mount();
@@ -121,6 +129,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_manual',
+          group: 'manual',
         },
       },
     }).$mount();
diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js
index df547299d75..242010ba688 100644
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ b/spec/javascripts/vue_shared/components/commit_spec.js
@@ -61,16 +61,16 @@ describe('Commit component', () => {
     });
 
     it('should render a link to the ref url', () => {
-      expect(component.$el.querySelector('.branch-name').getAttribute('href')).toEqual(props.commitRef.ref_url);
+      expect(component.$el.querySelector('.ref-name').getAttribute('href')).toEqual(props.commitRef.ref_url);
     });
 
     it('should render the ref name', () => {
-      expect(component.$el.querySelector('.branch-name').textContent).toContain(props.commitRef.name);
+      expect(component.$el.querySelector('.ref-name').textContent).toContain(props.commitRef.name);
     });
 
     it('should render the commit short sha with a link to the commit url', () => {
-      expect(component.$el.querySelector('.commit-id').getAttribute('href')).toEqual(props.commitUrl);
-      expect(component.$el.querySelector('.commit-id').textContent).toContain(props.shortSha);
+      expect(component.$el.querySelector('.commit-sha').getAttribute('href')).toEqual(props.commitUrl);
+      expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha);
     });
 
     it('should render the given commitIconSvg', () => {
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
index 0a2c66e72d7..14280751053 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
@@ -89,7 +89,7 @@ describe('Pipelines Table Row', () => {
     it('should render link to commit', () => {
       component = buildComponent(pipeline);
 
-      const commitLink = component.$el.querySelector('.branch-commit .commit-id');
+      const commitLink = component.$el.querySelector('.branch-commit .commit-sha');
       expect(commitLink.getAttribute('href')).toEqual(pipeline.commit.commit_path);
     });
 
diff --git a/spec/lib/gitlab/file_finder_spec.rb b/spec/lib/gitlab/file_finder_spec.rb
new file mode 100644
index 00000000000..5a32ffd462c
--- /dev/null
+++ b/spec/lib/gitlab/file_finder_spec.rb
@@ -0,0 +1,21 @@
+require 'spec_helper'
+
+describe Gitlab::FileFinder, lib: true do
+  describe '#find' do
+    let(:project) { create(:project, :public, :repository) }
+    let(:finder) { described_class.new(project, project.default_branch) }
+
+    it 'finds by name' do
+      results = finder.find('files')
+      expect(results.map(&:first)).to include('files/images/wm.svg')
+    end
+
+    it 'finds by content' do
+      results = finder.find('files')
+
+      blob = results.select { |result| result.first == "CHANGELOG" }.flatten.last
+
+      expect(blob.filename).to eq("CHANGELOG")
+    end
+  end
+end
diff --git a/spec/lib/gitlab/project_search_results_spec.rb b/spec/lib/gitlab/project_search_results_spec.rb
index 6e0b1192706..1b8690ba613 100644
--- a/spec/lib/gitlab/project_search_results_spec.rb
+++ b/spec/lib/gitlab/project_search_results_spec.rb
@@ -55,7 +55,7 @@ describe Gitlab::ProjectSearchResults, lib: true do
     end
 
     it 'finds by name' do
-      expect(results).to include(["files/images/wm.svg", nil])
+      expect(results.map(&:first)).to include('files/images/wm.svg')
     end
 
     it 'finds by content' do
diff --git a/spec/models/commit_spec.rb b/spec/models/commit_spec.rb
index 852889d4540..131fea8be43 100644
--- a/spec/models/commit_spec.rb
+++ b/spec/models/commit_spec.rb
@@ -395,24 +395,11 @@ eos
         allow(Gitlab::GitalyClient).to receive(:feature_enabled?).with(:commit_raw_diffs).and_return(true)
       end
 
-      context 'when a truthy deltas_only is not passed to args' do
-        it 'fetches diffs from Gitaly server' do
-          expect(Gitlab::GitalyClient::Commit).to receive(:diff_from_parent).
-            with(commit)
+      it 'fetches diffs from Gitaly server' do
+        expect(Gitlab::GitalyClient::Commit).to receive(:diff_from_parent).
+          with(commit)
 
-          commit.raw_diffs
-        end
-      end
-
-      context 'when a truthy deltas_only is passed to args' do
-        it 'fetches diffs using Rugged' do
-          opts = { deltas_only: true }
-
-          expect(Gitlab::GitalyClient::Commit).not_to receive(:diff_from_parent)
-          expect(commit.raw).to receive(:diffs).with(opts)
-
-          commit.raw_diffs(opts)
-        end
+        commit.raw_diffs
       end
     end
   end
diff --git a/spec/models/issue_spec.rb b/spec/models/issue_spec.rb
index 725f5c2311f..bb4e70db2e9 100644
--- a/spec/models/issue_spec.rb
+++ b/spec/models/issue_spec.rb
@@ -38,46 +38,6 @@ describe Issue, models: true do
     end
   end
 
-  describe "before_save" do
-    describe "#update_cache_counts when an issue is reassigned" do
-      let(:issue) { create(:issue) }
-      let(:assignee) { create(:user) }
-
-      context "when previous assignee exists" do
-        before do
-          issue.project.team << [assignee, :developer]
-          issue.assignees << assignee
-        end
-
-        it "updates cache counts for new assignee" do
-          user = create(:user)
-
-          expect(user).to receive(:update_cache_counts)
-
-          issue.assignees << user
-        end
-
-        it "updates cache counts for previous assignee" do
-          issue.assignees.first
-
-          expect_any_instance_of(User).to receive(:update_cache_counts)
-
-          issue.assignees.destroy_all
-        end
-      end
-
-      context "when previous assignee does not exist" do
-        it "updates cache count for the new assignee" do
-          issue.assignees = []
-
-          expect_any_instance_of(User).to receive(:update_cache_counts)
-
-          issue.assignees << assignee
-        end
-      end
-    end
-  end
-
   describe '#card_attributes' do
     it 'includes the author name' do
       allow(subject).to receive(:author).and_return(double(name: 'Robert'))
diff --git a/spec/models/merge_request_spec.rb b/spec/models/merge_request_spec.rb
index ef349530761..e8124c4cbe9 100644
--- a/spec/models/merge_request_spec.rb
+++ b/spec/models/merge_request_spec.rb
@@ -87,48 +87,6 @@ describe MergeRequest, models: true do
     end
   end
 
-  describe "before_save" do
-    describe "#update_cache_counts when a merge request is reassigned" do
-      let(:project) { create :project }
-      let(:merge_request) { create(:merge_request, source_project: project, target_project: project) }
-      let(:assignee) { create :user }
-
-      context "when previous assignee exists" do
-        before do
-          project.team << [assignee, :developer]
-          merge_request.update(assignee: assignee)
-        end
-
-        it "updates cache counts for new assignee" do
-          user = create(:user)
-
-          expect(user).to receive(:update_cache_counts)
-
-          merge_request.update(assignee: user)
-        end
-
-        it "updates cache counts for previous assignee" do
-          old_assignee = merge_request.assignee
-          allow(User).to receive(:find_by_id).with(old_assignee.id).and_return(old_assignee)
-
-          expect(old_assignee).to receive(:update_cache_counts)
-
-          merge_request.update(assignee: nil)
-        end
-      end
-
-      context "when previous assignee does not exist" do
-        it "updates cache count for the new assignee" do
-          merge_request.update(assignee: nil)
-
-          expect_any_instance_of(User).to receive(:update_cache_counts)
-
-          merge_request.update(assignee: assignee)
-        end
-      end
-    end
-  end
-
   describe '#card_attributes' do
     it 'includes the author name' do
       allow(subject).to receive(:author).and_return(double(name: 'Robert'))
diff --git a/spec/models/project_services/chat_message/pipeline_message_spec.rb b/spec/models/project_services/chat_message/pipeline_message_spec.rb
index e005be42b0d..7d2599dc703 100644
--- a/spec/models/project_services/chat_message/pipeline_message_spec.rb
+++ b/spec/models/project_services/chat_message/pipeline_message_spec.rb
@@ -62,7 +62,7 @@ describe ChatMessage::PipelineMessage do
     def build_message(status_text = status, name = user[:name])
       "<http://example.gitlab.com|project_name>:" \
         " Pipeline <http://example.gitlab.com/pipelines/123|#123>" \
-        " of <http://example.gitlab.com/commits/develop|develop> branch" \
+        " of branch `<http://example.gitlab.com/commits/develop|develop>`" \
         " by #{name} #{status_text} in 02:00:10"
     end
   end
@@ -81,7 +81,7 @@ describe ChatMessage::PipelineMessage do
         expect(subject.pretext).to be_empty
         expect(subject.attachments).to eq(message)
         expect(subject.activity).to eq({
-          title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of [develop](http://example.gitlab.com/commits/develop) branch by hacker passed',
+          title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of branch `[develop](http://example.gitlab.com/commits/develop)` by hacker passed',
           subtitle: 'in [project_name](http://example.gitlab.com)',
           text: 'in 02:00:10',
           image: ''
@@ -98,7 +98,7 @@ describe ChatMessage::PipelineMessage do
         expect(subject.pretext).to be_empty
         expect(subject.attachments).to eq(message)
         expect(subject.activity).to eq({
-          title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of [develop](http://example.gitlab.com/commits/develop) branch by hacker failed',
+          title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of branch `[develop](http://example.gitlab.com/commits/develop)` by hacker failed',
           subtitle: 'in [project_name](http://example.gitlab.com)',
           text: 'in 02:00:10',
           image: ''
@@ -113,7 +113,7 @@ describe ChatMessage::PipelineMessage do
           expect(subject.pretext).to be_empty
           expect(subject.attachments).to eq(message)
           expect(subject.activity).to eq({
-            title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of [develop](http://example.gitlab.com/commits/develop) branch by API failed',
+            title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of branch `[develop](http://example.gitlab.com/commits/develop)` by API failed',
             subtitle: 'in [project_name](http://example.gitlab.com)',
             text: 'in 02:00:10',
             image: ''
@@ -125,8 +125,8 @@ describe ChatMessage::PipelineMessage do
     def build_markdown_message(status_text = status, name = user[:name])
       "[project_name](http://example.gitlab.com):" \
         " Pipeline [#123](http://example.gitlab.com/pipelines/123)" \
-        " of [develop](http://example.gitlab.com/commits/develop)" \
-        " branch by #{name} #{status_text} in 02:00:10"
+        " of branch `[develop](http://example.gitlab.com/commits/develop)`" \
+        " by #{name} #{status_text} in 02:00:10"
     end
   end
 end
diff --git a/spec/models/project_services/chat_message/push_message_spec.rb b/spec/models/project_services/chat_message/push_message_spec.rb
index c794f659c41..e38117b75f6 100644
--- a/spec/models/project_services/chat_message/push_message_spec.rb
+++ b/spec/models/project_services/chat_message/push_message_spec.rb
@@ -28,7 +28,7 @@ describe ChatMessage::PushMessage, models: true do
     context 'without markdown' do
       it 'returns a message regarding pushes' do
         expect(subject.pretext).to eq(
-          'test.user pushed to branch <http://url.com/commits/master|master> of '\
+          'test.user pushed to branch `<http://url.com/commits/master|master>` of '\
             '<http://url.com|project_name> (<http://url.com/compare/before...after|Compare changes>)')
         expect(subject.attachments).to eq([{
           text: "<http://url1.com|abcdefgh>: message1 - author1\n\n"\
@@ -45,7 +45,7 @@ describe ChatMessage::PushMessage, models: true do
 
       it 'returns a message regarding pushes' do
         expect(subject.pretext).to eq(
-          'test.user pushed to branch [master](http://url.com/commits/master) of [project_name](http://url.com) ([Compare changes](http://url.com/compare/before...after))')
+          'test.user pushed to branch `[master](http://url.com/commits/master)` of [project_name](http://url.com) ([Compare changes](http://url.com/compare/before...after))')
         expect(subject.attachments).to eq(
           "[abcdefgh](http://url1.com): message1 - author1\n\n[12345678](http://url2.com): message2 - author2")
         expect(subject.activity).to eq({
@@ -74,7 +74,7 @@ describe ChatMessage::PushMessage, models: true do
     context 'without markdown' do
       it 'returns a message regarding pushes' do
         expect(subject.pretext).to eq('test.user pushed new tag ' \
-          '<http://url.com/commits/new_tag|new_tag> to ' \
+          '`<http://url.com/commits/new_tag|new_tag>` to ' \
           '<http://url.com|project_name>')
         expect(subject.attachments).to be_empty
       end
@@ -87,7 +87,7 @@ describe ChatMessage::PushMessage, models: true do
 
       it 'returns a message regarding pushes' do
         expect(subject.pretext).to eq(
-          'test.user pushed new tag [new_tag](http://url.com/commits/new_tag) to [project_name](http://url.com)')
+          'test.user pushed new tag `[new_tag](http://url.com/commits/new_tag)` to [project_name](http://url.com)')
         expect(subject.attachments).to be_empty
         expect(subject.activity).to eq({
           title: 'test.user created tag',
@@ -107,7 +107,7 @@ describe ChatMessage::PushMessage, models: true do
     context 'without markdown' do
       it 'returns a message regarding a new branch' do
         expect(subject.pretext).to eq(
-          'test.user pushed new branch <http://url.com/commits/master|master> to '\
+          'test.user pushed new branch `<http://url.com/commits/master|master>` to '\
             '<http://url.com|project_name>')
         expect(subject.attachments).to be_empty
       end
@@ -120,7 +120,7 @@ describe ChatMessage::PushMessage, models: true do
 
       it 'returns a message regarding a new branch' do
         expect(subject.pretext).to eq(
-          'test.user pushed new branch [master](http://url.com/commits/master) to [project_name](http://url.com)')
+          'test.user pushed new branch `[master](http://url.com/commits/master)` to [project_name](http://url.com)')
         expect(subject.attachments).to be_empty
         expect(subject.activity).to eq({
           title: 'test.user created branch',
@@ -140,7 +140,7 @@ describe ChatMessage::PushMessage, models: true do
     context 'without markdown' do
       it 'returns a message regarding a removed branch' do
         expect(subject.pretext).to eq(
-          'test.user removed branch master from <http://url.com|project_name>')
+          'test.user removed branch `master` from <http://url.com|project_name>')
         expect(subject.attachments).to be_empty
       end
     end
@@ -152,7 +152,7 @@ describe ChatMessage::PushMessage, models: true do
 
       it 'returns a message regarding a removed branch' do
         expect(subject.pretext).to eq(
-          'test.user removed branch master from [project_name](http://url.com)')
+          'test.user removed branch `master` from [project_name](http://url.com)')
         expect(subject.attachments).to be_empty
         expect(subject.activity).to eq({
           title: 'test.user removed branch',
diff --git a/spec/models/protected_branch/merge_access_level_spec.rb b/spec/models/protected_branch/merge_access_level_spec.rb
new file mode 100644
index 00000000000..1e7242e9fa8
--- /dev/null
+++ b/spec/models/protected_branch/merge_access_level_spec.rb
@@ -0,0 +1,5 @@
+require 'spec_helper'
+
+describe ProtectedBranch::MergeAccessLevel, :models do
+  it { is_expected.to validate_inclusion_of(:access_level).in_array([Gitlab::Access::MASTER, Gitlab::Access::DEVELOPER, Gitlab::Access::NO_ACCESS]) }
+end
diff --git a/spec/models/protected_branch/push_access_level_spec.rb b/spec/models/protected_branch/push_access_level_spec.rb
new file mode 100644
index 00000000000..de68351198c
--- /dev/null
+++ b/spec/models/protected_branch/push_access_level_spec.rb
@@ -0,0 +1,5 @@
+require 'spec_helper'
+
+describe ProtectedBranch::PushAccessLevel, :models do
+  it { is_expected.to validate_inclusion_of(:access_level).in_array([Gitlab::Access::MASTER, Gitlab::Access::DEVELOPER, Gitlab::Access::NO_ACCESS]) }
+end
diff --git a/spec/models/repository_spec.rb b/spec/models/repository_spec.rb
index 00a9f2abeb9..61b748429d7 100644
--- a/spec/models/repository_spec.rb
+++ b/spec/models/repository_spec.rb
@@ -1659,15 +1659,25 @@ describe Repository, models: true do
   describe '#readme', caching: true do
     context 'with a non-existing repository' do
       it 'returns nil' do
-        expect(repository).to receive(:tree).with(:head).and_return(nil)
+        allow(repository).to receive(:tree).with(:head).and_return(nil)
 
         expect(repository.readme).to be_nil
       end
     end
 
     context 'with an existing repository' do
-      it 'returns the README' do
-        expect(repository.readme).to be_an_instance_of(ReadmeBlob)
+      context 'when no README exists' do
+        it 'returns nil' do
+          allow_any_instance_of(Tree).to receive(:readme).and_return(nil)
+
+          expect(repository.readme).to be_nil
+        end
+      end
+
+      context 'when a README exists' do
+        it 'returns the README' do
+          expect(repository.readme).to be_an_instance_of(ReadmeBlob)
+        end
       end
     end
   end
diff --git a/spec/requests/api/issues_spec.rb b/spec/requests/api/issues_spec.rb
index da2b56c040b..79cac721202 100644
--- a/spec/requests/api/issues_spec.rb
+++ b/spec/requests/api/issues_spec.rb
@@ -1124,7 +1124,7 @@ describe API::Issues do
     end
 
     context 'CE restrictions' do
-      it 'updates an issue with several assignee but only one has been applied' do
+      it 'updates an issue with several assignees but only one has been applied' do
         put api("/projects/#{project.id}/issues/#{issue.iid}", user),
           assignee_ids: [user2.id, guest.id]
 
diff --git a/spec/services/issuable/bulk_update_service_spec.rb b/spec/services/issuable/bulk_update_service_spec.rb
index 3ddd0badd39..6437d00e451 100644
--- a/spec/services/issuable/bulk_update_service_spec.rb
+++ b/spec/services/issuable/bulk_update_service_spec.rb
@@ -62,7 +62,7 @@ describe Issuable::BulkUpdateService, services: true do
         expect(result[:count]).to eq(1)
       end
 
-      it 'updates the assignee to the use ID passed' do
+      it 'updates the assignee to the user ID passed' do
         assignee = create(:user)
         project.team << [assignee, :developer]
 
@@ -100,7 +100,7 @@ describe Issuable::BulkUpdateService, services: true do
         expect(result[:count]).to eq(1)
       end
 
-      it 'updates the assignee to the use ID passed' do
+      it 'updates the assignee to the user ID passed' do
         assignee = create(:user)
         project.team << [assignee, :developer]
         expect { bulk_update(issue, assignee_ids: [assignee.id]) }
diff --git a/spec/services/issues/create_service_spec.rb b/spec/services/issues/create_service_spec.rb
index 01edc46496d..dab1a3469f7 100644
--- a/spec/services/issues/create_service_spec.rb
+++ b/spec/services/issues/create_service_spec.rb
@@ -118,6 +118,22 @@ describe Issues::CreateService, services: true do
         end
       end
 
+      context 'when assignee is set' do
+        let(:opts) do
+          { title: 'Title',
+            description: 'Description',
+            assignees: [assignee] }
+        end
+
+        it 'invalidates open issues counter for assignees when issue is assigned' do
+          project.team << [assignee, :master]
+
+          described_class.new(project, user, opts).execute
+
+          expect(assignee.assigned_open_issues_count).to eq 1
+        end
+      end
+
       it 'executes issue hooks when issue is not confidential' do
         opts = { title: 'Title', description: 'Description', confidential: false }
 
diff --git a/spec/services/issues/update_service_spec.rb b/spec/services/issues/update_service_spec.rb
index 1954d8739f6..5184c1d5f19 100644
--- a/spec/services/issues/update_service_spec.rb
+++ b/spec/services/issues/update_service_spec.rb
@@ -59,6 +59,13 @@ describe Issues::UpdateService, services: true do
         expect(issue.due_date).to eq Date.tomorrow
       end
 
+      it 'updates open issue counter for assignees when issue is reassigned' do
+        update_issue(assignee_ids: [user2.id])
+
+        expect(user3.assigned_open_issues_count).to eq 0
+        expect(user2.assigned_open_issues_count).to eq 1
+      end
+
       it 'sorts issues as specified by parameters' do
         issue1 = create(:issue, project: project, assignees: [user3])
         issue2 = create(:issue, project: project, assignees: [user3])
diff --git a/spec/services/merge_requests/create_service_spec.rb b/spec/services/merge_requests/create_service_spec.rb
index ace82380cc9..41752f1a01a 100644
--- a/spec/services/merge_requests/create_service_spec.rb
+++ b/spec/services/merge_requests/create_service_spec.rb
@@ -144,6 +144,26 @@ describe MergeRequests::CreateService, services: true do
           expect(merge_request.assignee).to eq(assignee)
         end
 
+        context 'when assignee is set' do
+          let(:opts) do
+            {
+              title: 'Title',
+              description: 'Description',
+              assignee_id: assignee.id,
+              source_branch: 'feature',
+              target_branch: 'master'
+            }
+          end
+
+          it 'invalidates open merge request counter for assignees when merge request is assigned' do
+            project.team << [assignee, :master]
+
+            described_class.new(project, user, opts).execute
+
+            expect(assignee.assigned_open_merge_requests_count).to eq 1
+          end
+        end
+
         context "when issuable feature is private" do
           before do
             project.project_feature.update(issues_access_level: ProjectFeature::PRIVATE,
diff --git a/spec/services/merge_requests/update_service_spec.rb b/spec/services/merge_requests/update_service_spec.rb
index 07f5440cc36..2c8fbb46e75 100644
--- a/spec/services/merge_requests/update_service_spec.rb
+++ b/spec/services/merge_requests/update_service_spec.rb
@@ -299,6 +299,15 @@ describe MergeRequests::UpdateService, services: true do
         end
       end
 
+      context 'when the assignee changes' do
+        it 'updates open merge request counter for assignees when merge request is reassigned' do
+          update_merge_request(assignee_id: user2.id)
+
+          expect(user3.assigned_open_merge_requests_count).to eq 0
+          expect(user2.assigned_open_merge_requests_count).to eq 1
+        end
+      end
+
       context 'when the target branch change' do
         before do
           update_merge_request({ target_branch: 'target' })
diff --git a/spec/services/system_note_service_spec.rb b/spec/services/system_note_service_spec.rb
index 516566eddef..7a9cd7553b1 100644
--- a/spec/services/system_note_service_spec.rb
+++ b/spec/services/system_note_service_spec.rb
@@ -178,7 +178,7 @@ describe SystemNoteService, services: true do
     end
 
     it 'builds a correct phrase when assignee removed' do
-      expect(build_note([assignee1], [])).to eq 'removed all assignees'
+      expect(build_note([assignee1], [])).to eq 'removed assignee'
     end
 
     it 'builds a correct phrase when assignees changed' do
diff --git a/spec/tasks/gitlab/backup_rake_spec.rb b/spec/tasks/gitlab/backup_rake_spec.rb
index df2f2ce95e6..aee926877e0 100644
--- a/spec/tasks/gitlab/backup_rake_spec.rb
+++ b/spec/tasks/gitlab/backup_rake_spec.rb
@@ -352,7 +352,7 @@ describe 'gitlab:app namespace rake task' do
     end
 
     it 'name has human readable time' do
-      expect(@backup_tar).to match(/\d+_\d{4}_\d{2}_\d{2}_\d+\.\d+\.\d+(-pre)?_gitlab_backup.tar$/)
+      expect(@backup_tar).to match(/\d+_\d{4}_\d{2}_\d{2}_\d+\.\d+\.\d+(-pre|-rc\d+)?_gitlab_backup.tar$/)
     end
   end
 end # gitlab:app namespace