Merge branch 'master' into 28433-internationalise-cycle-analytics-page

Conflicts:
	lib/gitlab/cycle_analytics/review_stage.rb
	lib/gitlab/cycle_analytics/staging_stage.rb
	lib/gitlab/cycle_analytics/test_stage.rb

43 files changed, 1382 insertions, 448 deletions

diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
index 19a607309e4..23d91fdb259 100644
--- a/app/assets/javascripts/behaviors/gl_emoji.js
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -62,6 +62,7 @@ function glEmojiTag(inputName, options) {
     data-fallback-src="${fallbackImageSrc}"
     ${fallbackSpriteAttribute}
     data-unicode-version="${emojiInfo.unicodeVersion}"
+    title="${emojiInfo.description}"
   >
     ${contents}
   </gl-emoji>
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 004bac09f59..f0066d4ec5d 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -27,6 +27,9 @@ gl.issueBoards.BoardSidebar = Vue.extend({
   computed: {
     showSidebar () {
       return Object.keys(this.issue).length;
+    },
+    assigneeId() {
+      return this.issue.assignee ? this.issue.assignee.id : 0;
     }
   },
   watch: {
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index e704be8b53e..ad9c600b499 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -46,6 +46,7 @@ export default Vue.component('pipelines-table', {
       isLoading: false,
       hasError: false,
       isMakingRequest: false,
+      updateGraphDropdown: false,
     };
   },
 
@@ -130,15 +131,21 @@ export default Vue.component('pipelines-table', {
       const pipelines = response.pipelines || response;
       this.store.storePipelines(pipelines);
       this.isLoading = false;
+      this.updateGraphDropdown = true;
     },
 
     errorCallback() {
       this.hasError = true;
       this.isLoading = false;
+      this.updateGraphDropdown = false;
     },
 
     setIsMakingRequest(isMakingRequest) {
       this.isMakingRequest = isMakingRequest;
+
+      if (isMakingRequest) {
+        this.updateGraphDropdown = false;
+      }
     },
   },
 
@@ -163,7 +170,9 @@ export default Vue.component('pipelines-table', {
         v-if="shouldRenderTable">
         <pipelines-table-component
           :pipelines="state.pipelines"
-          :service="service" />
+          :service="service"
+          :update-graph-dropdown="updateGraphDropdown"
+          />
       </div>
     </div>
   `,
diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
new file mode 100644
index 00000000000..ff2f2c81971
--- /dev/null
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@@ -0,0 +1,193 @@
+/* eslint-disable no-new */
+/* global Flash */
+import DropLab from './droplab/drop_lab';
+import ISetter from './droplab/plugins/input_setter';
+
+// Todo: Remove this when fixing issue in input_setter plugin
+const InputSetter = Object.assign({}, ISetter);
+
+const CREATE_MERGE_REQUEST = 'create-mr';
+const CREATE_BRANCH = 'create-branch';
+
+export default class CreateMergeRequestDropdown {
+  constructor(wrapperEl) {
+    this.wrapperEl = wrapperEl;
+    this.createMergeRequestButton = this.wrapperEl.querySelector('.js-create-merge-request');
+    this.dropdownToggle = this.wrapperEl.querySelector('.js-dropdown-toggle');
+    this.dropdownList = this.wrapperEl.querySelector('.dropdown-menu');
+    this.availableButton = this.wrapperEl.querySelector('.available');
+    this.unavailableButton = this.wrapperEl.querySelector('.unavailable');
+    this.unavailableButtonArrow = this.unavailableButton.querySelector('.fa');
+    this.unavailableButtonText = this.unavailableButton.querySelector('.text');
+
+    this.createBranchPath = this.wrapperEl.dataset.createBranchPath;
+    this.canCreatePath = this.wrapperEl.dataset.canCreatePath;
+    this.createMrPath = this.wrapperEl.dataset.createMrPath;
+    this.droplabInitialized = false;
+    this.isCreatingMergeRequest = false;
+    this.mergeRequestCreated = false;
+    this.isCreatingBranch = false;
+    this.branchCreated = false;
+
+    this.init();
+  }
+
+  init() {
+    this.checkAbilityToCreateBranch();
+  }
+
+  available() {
+    this.availableButton.classList.remove('hide');
+    this.unavailableButton.classList.add('hide');
+  }
+
+  unavailable() {
+    this.availableButton.classList.add('hide');
+    this.unavailableButton.classList.remove('hide');
+  }
+
+  enable() {
+    this.createMergeRequestButton.classList.remove('disabled');
+    this.createMergeRequestButton.removeAttribute('disabled');
+
+    this.dropdownToggle.classList.remove('disabled');
+    this.dropdownToggle.removeAttribute('disabled');
+  }
+
+  disable() {
+    this.createMergeRequestButton.classList.add('disabled');
+    this.createMergeRequestButton.setAttribute('disabled', 'disabled');
+
+    this.dropdownToggle.classList.add('disabled');
+    this.dropdownToggle.setAttribute('disabled', 'disabled');
+  }
+
+  hide() {
+    this.wrapperEl.classList.add('hide');
+  }
+
+  setUnavailableButtonState(isLoading = true) {
+    if (isLoading) {
+      this.unavailableButtonArrow.classList.add('fa-spinner', 'fa-spin');
+      this.unavailableButtonArrow.classList.remove('fa-exclamation-triangle');
+      this.unavailableButtonText.textContent = 'Checking branch availability…';
+    } else {
+      this.unavailableButtonArrow.classList.remove('fa-spinner', 'fa-spin');
+      this.unavailableButtonArrow.classList.add('fa-exclamation-triangle');
+      this.unavailableButtonText.textContent = 'New branch unavailable';
+    }
+  }
+
+  checkAbilityToCreateBranch() {
+    return $.ajax({
+      type: 'GET',
+      dataType: 'json',
+      url: this.canCreatePath,
+      beforeSend: () => this.setUnavailableButtonState(),
+    })
+    .done((data) => {
+      this.setUnavailableButtonState(false);
+
+      if (data.can_create_branch) {
+        this.available();
+        this.enable();
+
+        if (!this.droplabInitialized) {
+          this.droplabInitialized = true;
+          this.initDroplab();
+          this.bindEvents();
+        }
+      } else if (data.has_related_branch) {
+        this.hide();
+      }
+    }).fail(() => {
+      this.unavailable();
+      this.disable();
+      new Flash('Failed to check if a new branch can be created.');
+    });
+  }
+
+  initDroplab() {
+    this.droplab = new DropLab();
+
+    this.droplab.init(this.dropdownToggle, this.dropdownList, [InputSetter],
+      this.getDroplabConfig());
+  }
+
+  getDroplabConfig() {
+    return {
+      InputSetter: [{
+        input: this.createMergeRequestButton,
+        valueAttribute: 'data-value',
+        inputAttribute: 'data-action',
+      }, {
+        input: this.createMergeRequestButton,
+        valueAttribute: 'data-text',
+      }],
+    };
+  }
+
+  bindEvents() {
+    this.createMergeRequestButton
+      .addEventListener('click', this.onClickCreateMergeRequestButton.bind(this));
+  }
+
+  isBusy() {
+    return this.isCreatingMergeRequest ||
+      this.mergeRequestCreated ||
+      this.isCreatingBranch ||
+      this.branchCreated;
+  }
+
+  onClickCreateMergeRequestButton(e) {
+    let xhr = null;
+    e.preventDefault();
+
+    if (this.isBusy()) {
+      return;
+    }
+
+    if (e.target.dataset.action === CREATE_MERGE_REQUEST) {
+      xhr = this.createMergeRequest();
+    } else if (e.target.dataset.action === CREATE_BRANCH) {
+      xhr = this.createBranch();
+    }
+
+    xhr.fail(() => {
+      this.isCreatingMergeRequest = false;
+      this.isCreatingBranch = false;
+    });
+
+    xhr.always(() => this.enable());
+
+    this.disable();
+  }
+
+  createMergeRequest() {
+    return $.ajax({
+      method: 'POST',
+      dataType: 'json',
+      url: this.createMrPath,
+      beforeSend: () => (this.isCreatingMergeRequest = true),
+    })
+    .done((data) => {
+      this.mergeRequestCreated = true;
+      window.location.href = data.url;
+    })
+    .fail(() => new Flash('Failed to create Merge Request. Please try again.'));
+  }
+
+  createBranch() {
+    return $.ajax({
+      method: 'POST',
+      dataType: 'json',
+      url: this.createBranchPath,
+      beforeSend: () => (this.isCreatingBranch = true),
+    })
+    .done((data) => {
+      this.branchCreated = true;
+      window.location.href = data.url;
+    })
+    .fail(() => new Flash('Failed to create a branch for this issue. Please try again.'));
+  }
+}
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue
new file mode 100644
index 00000000000..3ff3a9d977e
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue
@@ -0,0 +1,54 @@
+<script>
+  import eventHub from '../eventhub';
+
+  export default {
+    data() {
+      return {
+        isLoading: false,
+      };
+    },
+    props: {
+      deployKey: {
+        type: Object,
+        required: true,
+      },
+      type: {
+        type: String,
+        required: true,
+      },
+      btnCssClass: {
+        type: String,
+        required: false,
+        default: 'btn-default',
+      },
+    },
+    methods: {
+      doAction() {
+        this.isLoading = true;
+
+        eventHub.$emit(`${this.type}.key`, this.deployKey);
+      },
+    },
+    computed: {
+      text() {
+        return `${this.type.charAt(0).toUpperCase()}${this.type.slice(1)}`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <button
+    class="btn btn-sm prepend-left-10"
+    :class="[{ disabled: isLoading }, btnCssClass]"
+    :disabled="isLoading"
+    @click="doAction">
+    {{ text }}
+    <i
+      v-if="isLoading"
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true"
+      aria-label="Loading">
+    </i>
+  </button>
+</template>
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
new file mode 100644
index 00000000000..7315a9e11cb
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -0,0 +1,102 @@
+<script>
+  /* global Flash */
+  import eventHub from '../eventhub';
+  import DeployKeysService from '../service';
+  import DeployKeysStore from '../store';
+  import keysPanel from './keys_panel.vue';
+
+  export default {
+    data() {
+      return {
+        isLoading: false,
+        store: new DeployKeysStore(),
+      };
+    },
+    props: {
+      endpoint: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      hasKeys() {
+        return Object.keys(this.keys).length;
+      },
+      keys() {
+        return this.store.keys;
+      },
+    },
+    components: {
+      keysPanel,
+    },
+    methods: {
+      fetchKeys() {
+        this.isLoading = true;
+
+        this.service.getKeys()
+          .then((data) => {
+            this.isLoading = false;
+            this.store.keys = data;
+          })
+          .catch(() => new Flash('Error getting deploy keys'));
+      },
+      enableKey(deployKey) {
+        this.service.enableKey(deployKey.id)
+          .then(() => this.fetchKeys())
+          .catch(() => new Flash('Error enabling deploy key'));
+      },
+      disableKey(deployKey) {
+        // eslint-disable-next-line no-alert
+        if (confirm('You are going to remove this deploy key. Are you sure?')) {
+          this.service.disableKey(deployKey.id)
+            .then(() => this.fetchKeys())
+            .catch(() => new Flash('Error removing deploy key'));
+        }
+      },
+    },
+    created() {
+      this.service = new DeployKeysService(this.endpoint);
+
+      eventHub.$on('enable.key', this.enableKey);
+      eventHub.$on('remove.key', this.disableKey);
+      eventHub.$on('disable.key', this.disableKey);
+    },
+    mounted() {
+      this.fetchKeys();
+    },
+    beforeDestroy() {
+      eventHub.$off('enable.key', this.enableKey);
+      eventHub.$off('remove.key', this.disableKey);
+      eventHub.$off('disable.key', this.disableKey);
+    },
+  };
+</script>
+
+<template>
+  <div class="col-lg-9 col-lg-offset-3 append-bottom-default deploy-keys">
+    <div
+      class="text-center"
+      v-if="isLoading && !hasKeys">
+      <i
+        class="fa fa-spinner fa-spin fa-2x"
+        aria-hidden="true"
+        aria-label="Loading deploy keys">
+      </i>
+    </div>
+    <div v-else-if="hasKeys">
+      <keys-panel
+        title="Enabled deploy keys for this project"
+        :keys="keys.enabled_keys"
+        :store="store" />
+      <keys-panel
+        title="Deploy keys from projects you have access to"
+        :keys="keys.available_project_keys"
+        :store="store" />
+      <keys-panel
+        v-if="keys.public_keys.length"
+        title="Public deploy keys available to any project"
+        :keys="keys.public_keys"
+        :store="store" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue
new file mode 100644
index 00000000000..0a06a481b96
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/components/key.vue
@@ -0,0 +1,80 @@
+<script>
+  import actionBtn from './action_btn.vue';
+
+  export default {
+    props: {
+      deployKey: {
+        type: Object,
+        required: true,
+      },
+      store: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      actionBtn,
+    },
+    computed: {
+      timeagoDate() {
+        return gl.utils.getTimeago().format(this.deployKey.created_at);
+      },
+    },
+    methods: {
+      isEnabled(id) {
+        return this.store.findEnabledKey(id) !== undefined;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div>
+    <div class="pull-left append-right-10 hidden-xs">
+      <i
+        aria-hidden="true"
+        class="fa fa-key key-icon">
+      </i>
+    </div>
+    <div class="deploy-key-content key-list-item-info">
+      <strong class="title">
+        {{ deployKey.title }}
+      </strong>
+      <div class="description">
+        {{ deployKey.fingerprint }}
+      </div>
+      <div
+        v-if="deployKey.can_push"
+        class="write-access-allowed">
+        Write access allowed
+      </div>
+    </div>
+    <div class="deploy-key-content prepend-left-default deploy-key-projects">
+      <a
+        v-for="project in deployKey.projects"
+        class="label deploy-project-label"
+        :href="project.full_path">
+        {{ project.full_name }}
+      </a>
+    </div>
+    <div class="deploy-key-content">
+      <span class="key-created-at">
+        created {{ timeagoDate }}
+      </span>
+      <action-btn
+        v-if="!isEnabled(deployKey.id)"
+        :deploy-key="deployKey"
+        type="enable"/>
+      <action-btn
+        v-else-if="deployKey.destroyed_when_orphaned && deployKey.almost_orphaned"
+        :deploy-key="deployKey"
+        btn-css-class="btn-warning"
+        type="remove" />
+      <action-btn
+        v-else
+        :deploy-key="deployKey"
+        btn-css-class="btn-warning"
+        type="disable" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/deploy_keys/components/keys_panel.vue b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
new file mode 100644
index 00000000000..eccc470578b
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
@@ -0,0 +1,52 @@
+<script>
+  import key from './key.vue';
+
+  export default {
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      keys: {
+        type: Array,
+        required: true,
+      },
+      showHelpBox: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      store: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      key,
+    },
+  };
+</script>
+
+<template>
+  <div class="deploy-keys-panel">
+    <h5>
+      {{ title }}
+      ({{ keys.length }})
+    </h5>
+    <ul class="well-list"
+      v-if="keys.length">
+      <li
+        v-for="deployKey in keys"
+        :key="deployKey.id">
+        <key
+          :deploy-key="deployKey"
+          :store="store" />
+      </li>
+    </ul>
+    <div
+      class="settings-message text-center"
+      v-else-if="showHelpBox">
+      No deploy keys found. Create one with the form above.
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/deploy_keys/eventhub.js b/app/assets/javascripts/deploy_keys/eventhub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/eventhub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/deploy_keys/index.js b/app/assets/javascripts/deploy_keys/index.js
new file mode 100644
index 00000000000..a5f232f950a
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import deployKeysApp from './components/app.vue';
+
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: document.getElementById('js-deploy-keys'),
+  data() {
+    return {
+      endpoint: this.$options.el.dataset.endpoint,
+    };
+  },
+  components: {
+    deployKeysApp,
+  },
+  render(createElement) {
+    return createElement('deploy-keys-app', {
+      props: {
+        endpoint: this.endpoint,
+      },
+    });
+  },
+}));
diff --git a/app/assets/javascripts/deploy_keys/service/index.js b/app/assets/javascripts/deploy_keys/service/index.js
new file mode 100644
index 00000000000..fe6dbaa9498
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/service/index.js
@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default class DeployKeysService {
+  constructor(endpoint) {
+    this.endpoint = endpoint;
+
+    this.resource = Vue.resource(`${this.endpoint}{/id}`, {}, {
+      enable: {
+        method: 'PUT',
+        url: `${this.endpoint}{/id}/enable`,
+      },
+      disable: {
+        method: 'PUT',
+        url: `${this.endpoint}{/id}/disable`,
+      },
+    });
+  }
+
+  getKeys() {
+    return this.resource.get()
+      .then(response => response.json());
+  }
+
+  enableKey(id) {
+    return this.resource.enable({ id }, {});
+  }
+
+  disableKey(id) {
+    return this.resource.disable({ id }, {});
+  }
+}
diff --git a/app/assets/javascripts/deploy_keys/store/index.js b/app/assets/javascripts/deploy_keys/store/index.js
new file mode 100644
index 00000000000..6210361af26
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/store/index.js
@@ -0,0 +1,9 @@
+export default class DeployKeysStore {
+  constructor() {
+    this.keys = {};
+  }
+
+  findEnabledKey(id) {
+    return this.keys.enabled_keys.find(key => key.id === id);
+  }
+}
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 0bdce52cc89..b87c57c38fe 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -50,6 +50,7 @@ import UserCallout from './user_callout';
 import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
 import ShortcutsWiki from './shortcuts_wiki';
 import BlobViewer from './blob/viewer/index';
+import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -198,6 +199,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new LabelsSelect();
           new MilestoneSelect();
           new gl.IssuableTemplateSelectors();
+          new AutoWidthDropdownSelect($('.js-target-branch-select')).init();
           break;
         case 'projects:tags:new':
           new ZenMode();
@@ -344,6 +346,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:artifacts:browse':
           new BuildArtifacts();
           break;
+        case 'projects:artifacts:file':
+          new BlobViewer();
+          break;
         case 'help:index':
           gl.VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
           break;
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index b70d242269d..b3a76fbb43e 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -5,7 +5,7 @@ require('./preview_markdown');
 
 window.DropzoneInput = (function() {
   function DropzoneInput(form) {
-    var $mdArea, alertAttr, alertClass, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divAlert, divHover, divSpinner, dropzone, form_dropzone, form_textarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, max_file_size, pasteText, project_uploads_path, showError, showSpinner, uploadFile, uploadProgress;
+    var $mdArea, alertAttr, alertClass, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divAlert, divHover, divSpinner, dropzone, form_dropzone, form_textarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, max_file_size, pasteText, uploads_path, showError, showSpinner, uploadFile, uploadProgress;
     Dropzone.autoDiscover = false;
     alertClass = "alert alert-danger alert-dismissable div-dropzone-alert";
     alertAttr = "class=\"close\" data-dismiss=\"alert\"" + "aria-hidden=\"true\"";
@@ -16,7 +16,7 @@ window.DropzoneInput = (function() {
     iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>";
     uploadProgress = $("<div class=\"div-dropzone-progress\"></div>");
     btnAlert = "<button type=\"button\"" + alertAttr + ">&times;</button>";
-    project_uploads_path = window.project_uploads_path || null;
+    uploads_path = window.uploads_path || null;
     max_file_size = gon.max_file_size || 10;
     form_textarea = $(form).find(".js-gfm-input");
     form_textarea.wrap("<div class=\"div-dropzone\"></div>");
@@ -39,10 +39,10 @@ window.DropzoneInput = (function() {
       "display": "none"
     });
 
-    if (!project_uploads_path) return;
+    if (!uploads_path) return;
 
     dropzone = form_dropzone.dropzone({
-      url: project_uploads_path,
+      url: uploads_path,
       dictDefaultMessage: "",
       clickable: true,
       paramName: "file",
@@ -159,7 +159,7 @@ window.DropzoneInput = (function() {
       formData = new FormData();
       formData.append("file", item, filename);
       return $.ajax({
-        url: project_uploads_path,
+        url: uploads_path,
         type: "POST",
         data: formData,
         dataType: "json",
diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue
index f319d6ca0c8..e0088d496eb 100644
--- a/app/assets/javascripts/environments/components/environment.vue
+++ b/app/assets/javascripts/environments/components/environment.vue
@@ -1,6 +1,4 @@
 <script>
-
-/* eslint-disable no-new */
 /* global Flash */
 import EnvironmentsService from '../services/environments_service';
 import EnvironmentTable from './environments_table.vue';
@@ -71,11 +69,13 @@ export default {
 
     eventHub.$on('refreshEnvironments', this.fetchEnvironments);
     eventHub.$on('toggleFolder', this.toggleFolder);
+    eventHub.$on('postAction', this.postAction);
   },
 
   beforeDestroyed() {
     eventHub.$off('refreshEnvironments');
     eventHub.$off('toggleFolder');
+    eventHub.$off('postAction');
   },
 
   methods: {
@@ -122,6 +122,7 @@ export default {
         })
         .catch(() => {
           this.isLoading = false;
+          // eslint-disable-next-line no-new
           new Flash('An error occurred while fetching the environments.');
         });
     },
@@ -137,9 +138,16 @@ export default {
         })
         .catch(() => {
           this.isLoadingFolderContent = false;
+          // eslint-disable-next-line no-new
           new Flash('An error occurred while fetching the environments.');
         });
     },
+
+    postAction(endpoint) {
+      this.service.postAction(endpoint)
+        .then(() => this.fetchEnvironments())
+        .catch(() => new Flash('An error occured while making the request.'));
+    },
   },
 };
 </script>
@@ -217,7 +225,6 @@ export default {
           :environments="state.environments"
           :can-create-deployment="canCreateDeploymentParsed"
           :can-read-environment="canReadEnvironmentParsed"
-          :service="service"
           :is-loading-folder-content="isLoadingFolderContent" />
       </div>
 
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index e81c97260d7..63bffe8a998 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -1,7 +1,4 @@
 <script>
-/* global Flash */
-/* eslint-disable no-new */
-
 import playIconSvg from 'icons/_icon_play.svg';
 import eventHub from '../event_hub';
 
@@ -12,11 +9,6 @@ export default {
       required: false,
       default: () => [],
     },
-
-    service: {
-      type: Object,
-      required: true,
-    },
   },
 
   data() {
@@ -38,15 +30,7 @@ export default {
 
       $(this.$refs.tooltip).tooltip('destroy');
 
-      this.service.postAction(endpoint)
-      .then(() => {
-        this.isLoading = false;
-        eventHub.$emit('refreshEnvironments');
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occured while making the request.');
-      });
+      eventHub.$emit('postAction', endpoint);
     },
 
     isActionDisabled(action) {
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 73679de6039..0ffe9ea17fa 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -46,11 +46,6 @@ export default {
       required: false,
       default: false,
     },
-
-    service: {
-      type: Object,
-      required: true,
-    },
   },
 
   computed: {
@@ -543,31 +538,34 @@ export default {
 
         <actions-component
           v-if="hasManualActions && canCreateDeployment"
-          :service="service"
-          :actions="manualActions"/>
+          :actions="manualActions"
+          />
 
         <external-url-component
           v-if="externalURL && canReadEnvironment"
-          :external-url="externalURL"/>
+          :external-url="externalURL"
+          />
 
         <monitoring-button-component
           v-if="monitoringUrl && canReadEnvironment"
-          :monitoring-url="monitoringUrl"/>
+          :monitoring-url="monitoringUrl"
+          />
 
         <terminal-button-component
           v-if="model && model.terminal_path"
-          :terminal-path="model.terminal_path"/>
+          :terminal-path="model.terminal_path"
+          />
 
         <stop-component
           v-if="hasStopAction && canCreateDeployment"
           :stop-url="model.stop_path"
-          :service="service"/>
+          />
 
         <rollback-component
           v-if="canRetry && canCreateDeployment"
           :is-last-deployment="isLastDeployment"
           :retry-url="retryUrl"
-          :service="service"/>
+          />
       </div>
     </td>
   </tr>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index f139f24036f..44b8730fd09 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -1,6 +1,4 @@
 <script>
-/* global Flash */
-/* eslint-disable no-new */
 /**
  * Renders Rollback or Re deploy button in environments table depending
  * of the provided property `isLastDeployment`.
@@ -20,11 +18,6 @@ export default {
       type: Boolean,
       default: true,
     },
-
-    service: {
-      type: Object,
-      required: true,
-    },
   },
 
   data() {
@@ -37,17 +30,7 @@ export default {
     onClick() {
       this.isLoading = true;
 
-      $(this.$el).tooltip('destroy');
-
-      this.service.postAction(this.retryUrl)
-      .then(() => {
-        this.isLoading = false;
-        eventHub.$emit('refreshEnvironments');
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occured while making the request.');
-      });
+      eventHub.$emit('postAction', this.retryUrl);
     },
   },
 };
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index 11e9aff7b92..f483ea7e937 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -1,6 +1,4 @@
 <script>
-/* global Flash */
-/* eslint-disable no-new, no-alert */
 /**
  * Renders the stop "button" that allows stop an environment.
  * Used in environments table.
@@ -13,11 +11,6 @@ export default {
       type: String,
       default: '',
     },
-
-    service: {
-      type: Object,
-      required: true,
-    },
   },
 
   data() {
@@ -34,20 +27,13 @@ export default {
 
   methods: {
     onClick() {
+      // eslint-disable-next-line no-alert
       if (confirm('Are you sure you want to stop this environment?')) {
         this.isLoading = true;
 
         $(this.$el).tooltip('destroy');
 
-        this.service.postAction(this.retryUrl)
-        .then(() => {
-          this.isLoading = false;
-          eventHub.$emit('refreshEnvironments');
-        })
-        .catch(() => {
-          this.isLoading = false;
-          new Flash('An error occured while making the request.', 'alert');
-        });
+        eventHub.$emit('postAction', this.stopUrl);
       }
     },
   },
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 87f7cb4a536..15eedaf76e1 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -28,11 +28,6 @@ export default {
       default: false,
     },
 
-    service: {
-      type: Object,
-      required: true,
-    },
-
     isLoadingFolderContent: {
       type: Boolean,
       required: false,
@@ -78,7 +73,7 @@ export default {
           :model="model"
           :can-create-deployment="canCreateDeployment"
           :can-read-environment="canReadEnvironment"
-          :service="service" />
+          />
 
         <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
           <tr v-if="isLoadingFolderContent">
@@ -96,7 +91,7 @@ export default {
               :model="children"
               :can-create-deployment="canCreateDeployment"
               :can-read-environment="canReadEnvironment"
-              :service="service" />
+              />
 
             <tr>
               <td
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index d27b2acfcdf..f4a0c390c91 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable no-new */
 /* global Flash */
 import EnvironmentsService from '../services/environments_service';
 import EnvironmentTable from '../components/environments_table.vue';
@@ -99,6 +98,7 @@ export default {
       })
       .catch(() => {
         this.isLoading = false;
+        // eslint-disable-next-line no-new
         new Flash('An error occurred while fetching the environments.', 'alert');
       });
   },
@@ -169,7 +169,7 @@ export default {
           :environments="state.environments"
           :can-create-deployment="canCreateDeploymentParsed"
           :can-read-environment="canReadEnvironmentParsed"
-          :service="service"/>
+          />
 
         <table-pagination
           v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 687a462a0d4..f1b99023c72 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -101,9 +101,17 @@ window.gl.GfmAutoComplete = {
       }
     }
   },
-  setup: function(input) {
+  setup: function(input, enableMap = {
+    emojis: true,
+    members: true,
+    issues: true,
+    milestones: true,
+    mergeRequests: true,
+    labels: true
+  }) {
     // Add GFM auto-completion to all input fields, that accept GFM input.
     this.input = input || $('.js-gfm-input');
+    this.enableMap = enableMap;
     this.setupLifecycle();
   },
   setupLifecycle() {
@@ -115,7 +123,84 @@ window.gl.GfmAutoComplete = {
       $input.on('inserted-commands.atwho', $input.trigger.bind($input, 'keyup'));
     });
   },
+
   setupAtWho: function($input) {
+    if (this.enableMap.emojis) this.setupEmoji($input);
+    if (this.enableMap.members) this.setupMembers($input);
+    if (this.enableMap.issues) this.setupIssues($input);
+    if (this.enableMap.milestones) this.setupMilestones($input);
+    if (this.enableMap.mergeRequests) this.setupMergeRequests($input);
+    if (this.enableMap.labels) this.setupLabels($input);
+
+    // We don't instantiate the slash commands autocomplete for note and issue/MR edit forms
+    $input.filter('[data-supports-slash-commands="true"]').atwho({
+      at: '/',
+      alias: 'commands',
+      searchKey: 'search',
+      skipSpecialCharacterTest: true,
+      data: this.defaultLoadingData,
+      displayTpl: function(value) {
+        if (this.isLoading(value)) return this.Loading.template;
+        var tpl = '<li>/${name}';
+        if (value.aliases.length > 0) {
+          tpl += ' <small>(or /<%- aliases.join(", /") %>)</small>';
+        }
+        if (value.params.length > 0) {
+          tpl += ' <small><%- params.join(" ") %></small>';
+        }
+        if (value.description !== '') {
+          tpl += '<small class="description"><i><%- description %></i></small>';
+        }
+        tpl += '</li>';
+        return _.template(tpl)(value);
+      }.bind(this),
+      insertTpl: function(value) {
+        var tpl = "/${name} ";
+        var reference_prefix = null;
+        if (value.params.length > 0) {
+          reference_prefix = value.params[0][0];
+          if (/^[@%~]/.test(reference_prefix)) {
+            tpl += '<%- reference_prefix %>';
+          }
+        }
+        return _.template(tpl)({ reference_prefix: reference_prefix });
+      },
+      suffix: '',
+      callbacks: {
+        sorter: this.DefaultOptions.sorter,
+        filter: this.DefaultOptions.filter,
+        beforeInsert: this.DefaultOptions.beforeInsert,
+        beforeSave: function(commands) {
+          if (gl.GfmAutoComplete.isLoading(commands)) return commands;
+          return $.map(commands, function(c) {
+            var search = c.name;
+            if (c.aliases.length > 0) {
+              search = search + " " + c.aliases.join(" ");
+            }
+            return {
+              name: c.name,
+              aliases: c.aliases,
+              params: c.params,
+              description: c.description,
+              search: search
+            };
+          });
+        },
+        matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
+          var regexp = /(?:^|\n)\/([A-Za-z_]*)$/gi;
+          var match = regexp.exec(subtext);
+          if (match) {
+            return match[1];
+          } else {
+            return null;
+          }
+        }
+      }
+    });
+    return;
+  },
+
+  setupEmoji($input) {
     // Emoji
     $input.atwho({
       at: ':',
@@ -139,6 +224,9 @@ window.gl.GfmAutoComplete = {
         }
       }
     });
+  },
+
+  setupMembers($input) {
     // Team Members
     $input.atwho({
       at: '@',
@@ -180,6 +268,9 @@ window.gl.GfmAutoComplete = {
         }
       }
     });
+  },
+
+  setupIssues($input) {
     $input.atwho({
       at: '#',
       alias: 'issues',
@@ -208,6 +299,9 @@ window.gl.GfmAutoComplete = {
         }
       }
     });
+  },
+
+  setupMilestones($input) {
     $input.atwho({
       at: '%',
       alias: 'milestones',
@@ -236,6 +330,9 @@ window.gl.GfmAutoComplete = {
         }
       }
     });
+  },
+
+  setupMergeRequests($input) {
     $input.atwho({
       at: '!',
       alias: 'mergerequests',
@@ -264,6 +361,9 @@ window.gl.GfmAutoComplete = {
         }
       }
     });
+  },
+
+  setupLabels($input) {
     $input.atwho({
       at: '~',
       alias: 'labels',
@@ -298,73 +398,8 @@ window.gl.GfmAutoComplete = {
         }
       }
     });
-    // We don't instantiate the slash commands autocomplete for note and issue/MR edit forms
-    $input.filter('[data-supports-slash-commands="true"]').atwho({
-      at: '/',
-      alias: 'commands',
-      searchKey: 'search',
-      skipSpecialCharacterTest: true,
-      data: this.defaultLoadingData,
-      displayTpl: function(value) {
-        if (this.isLoading(value)) return this.Loading.template;
-        var tpl = '<li>/${name}';
-        if (value.aliases.length > 0) {
-          tpl += ' <small>(or /<%- aliases.join(", /") %>)</small>';
-        }
-        if (value.params.length > 0) {
-          tpl += ' <small><%- params.join(" ") %></small>';
-        }
-        if (value.description !== '') {
-          tpl += '<small class="description"><i><%- description %></i></small>';
-        }
-        tpl += '</li>';
-        return _.template(tpl)(value);
-      }.bind(this),
-      insertTpl: function(value) {
-        var tpl = "/${name} ";
-        var reference_prefix = null;
-        if (value.params.length > 0) {
-          reference_prefix = value.params[0][0];
-          if (/^[@%~]/.test(reference_prefix)) {
-            tpl += '<%- reference_prefix %>';
-          }
-        }
-        return _.template(tpl)({ reference_prefix: reference_prefix });
-      },
-      suffix: '',
-      callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        filter: this.DefaultOptions.filter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        beforeSave: function(commands) {
-          if (gl.GfmAutoComplete.isLoading(commands)) return commands;
-          return $.map(commands, function(c) {
-            var search = c.name;
-            if (c.aliases.length > 0) {
-              search = search + " " + c.aliases.join(" ");
-            }
-            return {
-              name: c.name,
-              aliases: c.aliases,
-              params: c.params,
-              description: c.description,
-              search: search
-            };
-          });
-        },
-        matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
-          var regexp = /(?:^|\n)\/([A-Za-z_]*)$/gi;
-          var match = regexp.exec(subtext);
-          if (match) {
-            return match[1];
-          } else {
-            return null;
-          }
-        }
-      }
-    });
-    return;
   },
+
   fetchData: function($input, at) {
     if (this.isLoadingData[at]) return;
     this.isLoadingData[at] = true;
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index ff10f19a4fe..ff06092e4d6 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -34,9 +34,9 @@ GLForm.prototype.setupForm = function() {
     gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
     new DropzoneInput(this.form);
     autosize(this.textarea);
-    // form and textarea event listeners
-    this.addEventListeners();
   }
+  // form and textarea event listeners
+  this.addEventListeners();
   gl.text.init(this.form);
   // hide discard button
   this.form.find('.js-note-discard').hide();
diff --git a/app/assets/javascripts/issuable/auto_width_dropdown_select.js b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
new file mode 100644
index 00000000000..2203a56315e
--- /dev/null
+++ b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
@@ -0,0 +1,38 @@
+let instanceCount = 0;
+
+class AutoWidthDropdownSelect {
+  constructor(selectElement) {
+    this.$selectElement = $(selectElement);
+    this.dropdownClass = `js-auto-width-select-dropdown-${instanceCount}`;
+    instanceCount += 1;
+  }
+
+  init() {
+    const dropdownClass = this.dropdownClass;
+    this.$selectElement.select2({
+      dropdownCssClass: dropdownClass,
+      dropdownCss() {
+        let resultantWidth = 'auto';
+        const $dropdown = $(`.${dropdownClass}`);
+
+        // We have to look at the parent because
+        // `offsetParent` on a `display: none;` is `null`
+        const offsetParentWidth = $(this).parent().offsetParent().width();
+        // Reset any width to let it naturally flow
+        $dropdown.css('width', 'auto');
+        if ($dropdown.outerWidth(false) > offsetParentWidth) {
+          resultantWidth = offsetParentWidth;
+        }
+
+        return {
+          width: resultantWidth,
+          maxWidth: offsetParentWidth,
+        };
+      },
+    });
+
+    return this;
+  }
+}
+
+export default AutoWidthDropdownSelect;
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 011043e992f..694c6177a07 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -1,5 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
-/* global Flash */
+ /* global Flash */
+import CreateMergeRequestDropdown from './create_merge_request_dropdown';
 
 require('./flash');
 require('~/lib/utils/text_utility');
@@ -18,48 +19,49 @@ class Issue {
           document.querySelector('#task_status_short').innerText = result.task_status_short;
         }
       });
-      Issue.initIssueBtnEventListeners();
+      this.initIssueBtnEventListeners();
     }
 
     Issue.$btnNewBranch = $('#new-branch');
+    Issue.createMrDropdownWrap = document.querySelector('.create-mr-dropdown-wrap');
 
     Issue.initMergeRequests();
     Issue.initRelatedBranches();
-    Issue.initCanCreateBranch();
+
+    if (Issue.createMrDropdownWrap) {
+      this.createMergeRequestDropdown = new CreateMergeRequestDropdown(Issue.createMrDropdownWrap);
+    }
   }
 
-  static initIssueBtnEventListeners() {
+  initIssueBtnEventListeners() {
     const issueFailMessage = 'Unable to update this issue at this time.';
-
     const closeButtons = $('a.btn-close');
     const isClosedBadge = $('div.status-box-closed');
     const isOpenBadge = $('div.status-box-open');
     const projectIssuesCounter = $('.issue_counter');
     const reopenButtons = $('a.btn-reopen');
 
-    return closeButtons.add(reopenButtons).on('click', function(e) {
-      var $this, shouldSubmit, url;
+    return closeButtons.add(reopenButtons).on('click', (e) => {
+      var $button, shouldSubmit, url;
       e.preventDefault();
       e.stopImmediatePropagation();
-      $this = $(this);
-      shouldSubmit = $this.hasClass('btn-comment');
+      $button = $(e.currentTarget);
+      shouldSubmit = $button.hasClass('btn-comment');
       if (shouldSubmit) {
-        Issue.submitNoteForm($this.closest('form'));
+        Issue.submitNoteForm($button.closest('form'));
       }
-      $this.prop('disabled', true);
-      Issue.setNewBranchButtonState(true, null);
-      url = $this.attr('href');
+      $button.prop('disabled', true);
+      url = $button.attr('href');
       return $.ajax({
         type: 'PUT',
         url: url
-      }).fail(function(jqXHR, textStatus, errorThrown) {
-        new Flash(issueFailMessage);
-        Issue.initCanCreateBranch();
-      }).done(function(data, textStatus, jqXHR) {
+      })
+      .fail(() => new Flash(issueFailMessage))
+      .done((data) => {
         if ('id' in data) {
           $(document).trigger('issuable:change');
 
-          const isClosed = $this.hasClass('btn-close');
+          const isClosed = $button.hasClass('btn-close');
           closeButtons.toggleClass('hidden', isClosed);
           reopenButtons.toggleClass('hidden', !isClosed);
           isClosedBadge.toggleClass('hidden', !isClosed);
@@ -68,12 +70,21 @@ class Issue {
           let numProjectIssues = Number(projectIssuesCounter.text().replace(/[^\d]/, ''));
           numProjectIssues = isClosed ? numProjectIssues - 1 : numProjectIssues + 1;
           projectIssuesCounter.text(gl.text.addDelimiter(numProjectIssues));
+
+          if (this.createMergeRequestDropdown) {
+            if (isClosed) {
+              this.createMergeRequestDropdown.unavailable();
+              this.createMergeRequestDropdown.disable();
+            } else {
+              // We should check in case a branch was created in another tab
+              this.createMergeRequestDropdown.checkAbilityToCreateBranch();
+            }
+          }
         } else {
           new Flash(issueFailMessage);
         }
 
-        $this.prop('disabled', false);
-        Issue.initCanCreateBranch();
+        $button.prop('disabled', false);
       });
     });
   }
@@ -109,29 +120,6 @@ class Issue {
       }
     });
   }
-
-  static initCanCreateBranch() {
-    // If the user doesn't have the required permissions the container isn't
-    // rendered at all.
-    if (Issue.$btnNewBranch.length === 0) {
-      return;
-    }
-    return $.getJSON(Issue.$btnNewBranch.data('path')).fail(function() {
-      Issue.setNewBranchButtonState(false, false);
-      new Flash('Failed to check if a new branch can be created.');
-    }).done(function(data) {
-      Issue.setNewBranchButtonState(false, data.can_create_branch);
-    });
-  }
-
-  static setNewBranchButtonState(isPending, canCreate) {
-    if (Issue.$btnNewBranch.length === 0) {
-      return;
-    }
-
-    Issue.$btnNewBranch.find('.available').toggle(!isPending && canCreate);
-    Issue.$btnNewBranch.find('.unavailable').toggle(!isPending && !canCreate);
-  }
 }
 
 export default Issue;
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index 38c673e8907..841b24a60a3 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -19,12 +19,10 @@
       });
     };
 
-    Milestone.sortIssues = function(data) {
-      var sort_issues_url;
-      sort_issues_url = location.href + "/sort_issues";
+    Milestone.sortIssues = function(url, data) {
       return $.ajax({
         type: "PUT",
-        url: sort_issues_url,
+        url,
         data: data,
         success: function(_data) {
           return Milestone.successCallback(_data);
@@ -36,12 +34,10 @@
       });
     };
 
-    Milestone.sortMergeRequests = function(data) {
-      var sort_mr_url;
-      sort_mr_url = location.href + "/sort_merge_requests";
+    Milestone.sortMergeRequests = function(url, data) {
       return $.ajax({
         type: "PUT",
-        url: sort_mr_url,
+        url,
         data: data,
         success: function(_data) {
           return Milestone.successCallback(_data);
@@ -81,42 +77,55 @@
     };
 
     function Milestone() {
-      var oldMouseStart;
+      this.issuesSortEndpoint = $('#tab-issues').data('sort-endpoint');
+      this.mergeRequestsSortEndpoint = $('#tab-merge-requests').data('sort-endpoint');
+
       this.bindIssuesSorting();
-      this.bindMergeRequestSorting();
       this.bindTabsSwitching();
+
+      // Load merge request tab if it is active
+      // merge request tab is active based on different conditions in the backend
+      this.loadTab($('.js-milestone-tabs .active a'));
+
+      this.loadInitialTab();
     }
 
     Milestone.prototype.bindIssuesSorting = function() {
+      if (!this.issuesSortEndpoint) return;
+
       $('#issues-list-unassigned, #issues-list-ongoing, #issues-list-closed').each(function (i, el) {
         this.createSortable(el, {
           group: 'issue-list',
           listEls: $('.issues-sortable-list'),
           fieldName: 'issue',
-          sortCallback: Milestone.sortIssues,
+          sortCallback: (data) => {
+            Milestone.sortIssues(this.issuesSortEndpoint, data);
+          },
           updateCallback: Milestone.updateIssue,
         });
       }.bind(this));
     };
 
     Milestone.prototype.bindTabsSwitching = function() {
-      return $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
-        var currentTabClass, previousTabClass;
-        currentTabClass = $(e.target).data('show');
-        previousTabClass = $(e.relatedTarget).data('show');
-        $(previousTabClass).hide();
-        $(currentTabClass).removeClass('hidden');
-        return $(currentTabClass).show();
+      return $('a[data-toggle="tab"]').on('show.bs.tab', (e) => {
+        const $target = $(e.target);
+
+        location.hash = $target.attr('href');
+        this.loadTab($target);
       });
     };
 
     Milestone.prototype.bindMergeRequestSorting = function() {
+      if (!this.mergeRequestsSortEndpoint) return;
+
       $("#merge_requests-list-unassigned, #merge_requests-list-ongoing, #merge_requests-list-closed").each(function (i, el) {
         this.createSortable(el, {
           group: 'merge-request-list',
           listEls: $(".merge_requests-sortable-list:not(#merge_requests-list-merged)"),
           fieldName: 'merge_request',
-          sortCallback: Milestone.sortMergeRequests,
+          sortCallback: (data) => {
+            Milestone.sortMergeRequests(this.mergeRequestsSortEndpoint, data);
+          },
           updateCallback: Milestone.updateMergeRequest,
         });
       }.bind(this));
@@ -169,6 +178,35 @@
       });
     };
 
+    Milestone.prototype.loadInitialTab = function() {
+      const $target = $(`.js-milestone-tabs a[href="${location.hash}"]`);
+
+      if ($target.length) {
+        $target.tab('show');
+      }
+    };
+
+    Milestone.prototype.loadTab = function($target) {
+      const endpoint = $target.data('endpoint');
+      const tabElId = $target.attr('href');
+
+      if (endpoint && !$target.hasClass('is-loaded')) {
+        $.ajax({
+          url: endpoint,
+          dataType: 'JSON',
+        })
+        .fail(() => new Flash('Error loading milestone tab'))
+        .done((data) => {
+          $(tabElId).html(data.html);
+          $target.addClass('is-loaded');
+
+          if (tabElId === '#tab-merge-requests') {
+            this.bindMergeRequestSorting();
+          }
+        });
+      }
+    };
+
     return Milestone;
   })();
 }).call(window);
diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index 5828f460a23..67046d52a65 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -34,6 +34,7 @@
         filterByText: true,
         remote: false,
         fieldName: $branchSelect.data('field-name'),
+        filterInput: 'input[type="search"]',
         selectable: true,
         isSelectable: function(branch, $el) {
           return !$el.hasClass('is-active');
@@ -50,6 +51,21 @@
           }
         }
       });
+
+      const $dropdownContainer = $branchSelect.closest('.dropdown');
+      const $fieldInput = $(`input[name="${$branchSelect.data('field-name')}"]`, $dropdownContainer);
+      const $filterInput = $('input[type="search"]', $dropdownContainer);
+
+      $filterInput.on('keyup', (e) => {
+        const keyCode = e.keyCode || e.which;
+        if (keyCode !== 13) return;
+
+        const text = $filterInput.val();
+        $fieldInput.val(text);
+        $('.dropdown-toggle-text', $branchSelect).text(text);
+
+        $dropdownContainer.removeClass('open');
+      });
     };
 
     NewBranchForm.prototype.setupRestrictions = function() {
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 974fb0d83da..87f03a40eba 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -4,6 +4,7 @@
 /* global ResolveService */
 /* global mrRefreshWidgetUrl */
 
+import $ from 'jquery';
 import Cookies from 'js-cookie';
 import CommentTypeToggle from './comment_type_toggle';
 
@@ -16,6 +17,10 @@ require('vendor/jquery.caret'); // required by jquery.atwho
 require('vendor/jquery.atwho');
 require('./task_list');
 
+const normalizeNewlines = function(str) {
+  return str.replace(/\r\n/g, '\n');
+};
+
 (function() {
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
@@ -42,13 +47,17 @@ require('./task_list');
       this.refresh = bind(this.refresh, this);
       this.keydownNoteText = bind(this.keydownNoteText, this);
       this.toggleCommitList = bind(this.toggleCommitList, this);
+
       this.notes_url = notes_url;
       this.note_ids = note_ids;
+      // Used to keep track of updated notes while people are editing things
+      this.updatedNotesTrackingMap = {};
       this.last_fetched_at = last_fetched_at;
       this.noteable_url = document.URL;
       this.notesCountBadge || (this.notesCountBadge = $(".issuable-details").find(".notes-tab .badge"));
       this.basePollingInterval = 15000;
       this.maxPollingSteps = 4;
+
       this.cleanBinding();
       this.addBinding();
       this.setPollingInterval();
@@ -128,7 +137,7 @@ require('./task_list');
       $(document).off("click", ".js-discussion-reply-button");
       $(document).off("click", ".js-add-diff-note-button");
       $(document).off("visibilitychange");
-      $(document).off("keyup", ".js-note-text");
+      $(document).off("keyup input", ".js-note-text");
       $(document).off("click", ".js-note-target-reopen");
       $(document).off("click", ".js-note-target-close");
       $(document).off("click", ".js-note-discard");
@@ -267,20 +276,20 @@ require('./task_list');
       return this.initRefresh();
     };
 
-    Notes.prototype.handleCreateChanges = function(note) {
+    Notes.prototype.handleCreateChanges = function(noteEntity) {
       var votesBlock;
-      if (typeof note === 'undefined') {
+      if (typeof noteEntity === 'undefined') {
         return;
       }
 
-      if (note.commands_changes) {
-        if ('merge' in note.commands_changes) {
+      if (noteEntity.commands_changes) {
+        if ('merge' in noteEntity.commands_changes) {
           $.get(mrRefreshWidgetUrl);
         }
 
-        if ('emoji_award' in note.commands_changes) {
+        if ('emoji_award' in noteEntity.commands_changes) {
           votesBlock = $('.js-awards-block').eq(0);
-          gl.awardsHandler.addAwardToEmojiBar(votesBlock, note.commands_changes.emoji_award);
+          gl.awardsHandler.addAwardToEmojiBar(votesBlock, noteEntity.commands_changes.emoji_award);
           return gl.awardsHandler.scrollToAwards();
         }
       }
@@ -292,41 +301,76 @@ require('./task_list');
     Note: for rendering inline notes use renderDiscussionNote
      */
 
-    Notes.prototype.renderNote = function(note, $form) {
-      var $notesList;
-      if (note.discussion_html != null) {
-        return this.renderDiscussionNote(note, $form);
+    Notes.prototype.renderNote = function(noteEntity, $form, $notesList = $('.main-notes-list')) {
+      if (noteEntity.discussion_html != null) {
+        return this.renderDiscussionNote(noteEntity, $form);
       }
 
-      if (!note.valid) {
-        if (note.errors.commands_only) {
-          new Flash(note.errors.commands_only, 'notice', this.parentTimeline);
+      if (!noteEntity.valid) {
+        if (noteEntity.errors.commands_only) {
+          new Flash(noteEntity.errors.commands_only, 'notice', this.parentTimeline);
           this.refresh();
         }
         return;
       }
 
-      if (this.isNewNote(note)) {
-        this.note_ids.push(note.id);
+      const $note = $notesList.find(`#note_${noteEntity.id}`);
+      if (this.isNewNote(noteEntity)) {
+        this.note_ids.push(noteEntity.id);
 
-        $notesList = window.$('ul.main-notes-list');
-        Notes.animateAppendNote(note.html, $notesList);
+        const $newNote = Notes.animateAppendNote(noteEntity.html, $notesList);
 
         // Update datetime format on the recent note
-        gl.utils.localTimeAgo($notesList.find("#note_" + note.id + " .js-timeago"), false);
+        gl.utils.localTimeAgo($newNote.find('.js-timeago'), false);
         this.collapseLongCommitList();
         this.taskList.init();
         this.refresh();
         return this.updateNotesCount(1);
       }
+      // The server can send the same update multiple times so we need to make sure to only update once per actual update.
+      else if (this.isUpdatedNote(noteEntity, $note)) {
+        const isEditing = $note.hasClass('is-editing');
+        const initialContent = normalizeNewlines(
+          $note.find('.original-note-content').text().trim()
+        );
+        const $textarea = $note.find('.js-note-text');
+        const currentContent = $textarea.val();
+        // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
+        const sanitizedNoteNote = normalizeNewlines(noteEntity.note);
+        const isTextareaUntouched = currentContent === initialContent || currentContent === sanitizedNoteNote;
+
+        if (isEditing && isTextareaUntouched) {
+          $textarea.val(noteEntity.note);
+          this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
+        }
+        else if (isEditing && !isTextareaUntouched) {
+          this.putConflictEditWarningInPlace(noteEntity, $note);
+          this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
+        }
+        else {
+          const $updatedNote = Notes.animateUpdateNote(noteEntity.html, $note);
+
+          // Update datetime format on the recent note
+          gl.utils.localTimeAgo($updatedNote.find('.js-timeago'), false);
+        }
+      }
     };
 
     /*
     Check if note does not exists on page
      */
 
-    Notes.prototype.isNewNote = function(note) {
-      return $.inArray(note.id, this.note_ids) === -1;
+    Notes.prototype.isNewNote = function(noteEntity) {
+      return $.inArray(noteEntity.id, this.note_ids) === -1;
+    };
+
+    Notes.prototype.isUpdatedNote = function(noteEntity, $note) {
+      // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
+      const sanitizedNoteNote = normalizeNewlines(noteEntity.note);
+      const currentNoteText = normalizeNewlines(
+        $note.find('.original-note-content').text().trim()
+      );
+      return sanitizedNoteNote !== currentNoteText;
     };
 
     Notes.prototype.isParallelView = function() {
@@ -339,31 +383,31 @@ require('./task_list');
     Note: for rendering inline notes use renderDiscussionNote
      */
 
-    Notes.prototype.renderDiscussionNote = function(note, $form) {
+    Notes.prototype.renderDiscussionNote = function(noteEntity, $form) {
       var discussionContainer, form, row, lineType, diffAvatarContainer;
-      if (!this.isNewNote(note)) {
+      if (!this.isNewNote(noteEntity)) {
         return;
       }
-      this.note_ids.push(note.id);
-      form = $form || $(".js-discussion-note-form[data-discussion-id='" + note.discussion_id + "']");
+      this.note_ids.push(noteEntity.id);
+      form = $form || $(".js-discussion-note-form[data-discussion-id='" + noteEntity.discussion_id + "']");
       row = form.closest("tr");
       lineType = this.isParallelView() ? form.find('#line_type').val() : 'old';
       diffAvatarContainer = row.prevAll('.line_holder').first().find('.js-avatar-container.' + lineType + '_line');
       // is this the first note of discussion?
-      discussionContainer = window.$(`.notes[data-discussion-id="${note.discussion_id}"]`);
+      discussionContainer = $(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
       if (!discussionContainer.length) {
         discussionContainer = form.closest('.discussion').find('.notes');
       }
       if (discussionContainer.length === 0) {
-        if (note.diff_discussion_html) {
-          var $discussion = $(note.diff_discussion_html).renderGFM();
+        if (noteEntity.diff_discussion_html) {
+          var $discussion = $(noteEntity.diff_discussion_html).renderGFM();
 
           if (!this.isParallelView() || row.hasClass('js-temp-notes-holder')) {
             // insert the note and the reply button after the temp row
             row.after($discussion);
           } else {
             // Merge new discussion HTML in
-            var $notes = $discussion.find('.notes[data-discussion-id="' + note.discussion_id + '"]');
+            var $notes = $discussion.find('.notes[data-discussion-id="' + noteEntity.discussion_id + '"]');
             var contentContainerClass = '.' + $notes.closest('.notes_content')
               .attr('class')
               .split(' ')
@@ -373,17 +417,18 @@ require('./task_list');
           }
         }
         // Init discussion on 'Discussion' page if it is merge request page
-        if (window.$('body').attr('data-page').indexOf('projects:merge_request') === 0 || !note.diff_discussion_html) {
-          Notes.animateAppendNote(note.discussion_html, window.$('ul.main-notes-list'));
+        const page = $('body').attr('data-page');
+        if ((page && page.indexOf('projects:merge_request') === 0) || !noteEntity.diff_discussion_html) {
+          Notes.animateAppendNote(noteEntity.discussion_html, $('.main-notes-list'));
         }
       } else {
         // append new note to all matching discussions
-        Notes.animateAppendNote(note.html, discussionContainer);
+        Notes.animateAppendNote(noteEntity.html, discussionContainer);
       }
 
-      if (typeof gl.diffNotesCompileComponents !== 'undefined' && note.discussion_resolvable) {
+      if (typeof gl.diffNotesCompileComponents !== 'undefined' && noteEntity.discussion_resolvable) {
         gl.diffNotesCompileComponents();
-        this.renderDiscussionAvatar(diffAvatarContainer, note);
+        this.renderDiscussionAvatar(diffAvatarContainer, noteEntity);
       }
 
       gl.utils.localTimeAgo($('.js-timeago'), false);
@@ -397,13 +442,13 @@ require('./task_list');
         .get(0);
     };
 
-    Notes.prototype.renderDiscussionAvatar = function(diffAvatarContainer, note) {
+    Notes.prototype.renderDiscussionAvatar = function(diffAvatarContainer, noteEntity) {
       var commentButton = diffAvatarContainer.find('.js-add-diff-note-button');
       var avatarHolder = diffAvatarContainer.find('.diff-comment-avatar-holders');
 
       if (!avatarHolder.length) {
         avatarHolder = document.createElement('diff-note-avatars');
-        avatarHolder.setAttribute('discussion-id', note.discussion_id);
+        avatarHolder.setAttribute('discussion-id', noteEntity.discussion_id);
 
         diffAvatarContainer.append(avatarHolder);
 
@@ -550,16 +595,16 @@ require('./task_list');
     Updates the current note field.
      */
 
-    Notes.prototype.updateNote = function(_xhr, note, _status) {
+    Notes.prototype.updateNote = function(_xhr, noteEntity, _status) {
       var $html, $note_li;
       // Convert returned HTML to a jQuery object so we can modify it further
-      $html = $(note.html);
+      $html = $(noteEntity.html);
       this.revertNoteEditForm();
       gl.utils.localTimeAgo($('.js-timeago', $html));
       $html.renderGFM();
       $html.find('.js-task-list-container').taskList('enable');
       // Find the note's `li` element by ID and replace it with the updated HTML
-      $note_li = $('.note-row-' + note.id);
+      $note_li = $('.note-row-' + noteEntity.id);
 
       $note_li.replaceWith($html);
 
@@ -570,7 +615,7 @@ require('./task_list');
 
     Notes.prototype.checkContentToAllowEditing = function($el) {
       var initialContent = $el.find('.original-note-content').text().trim();
-      var currentContent = $el.find('.note-textarea').val();
+      var currentContent = $el.find('.js-note-text').val();
       var isAllowed = true;
 
       if (currentContent === initialContent) {
@@ -584,7 +629,7 @@ require('./task_list');
           gl.utils.scrollToElement($el);
         }
 
-        $el.find('.js-edit-warning').show();
+        $el.find('.js-finish-edit-warning').show();
         isAllowed = false;
       }
 
@@ -603,7 +648,7 @@ require('./task_list');
       var $target = $(e.target);
       var $editForm = $(this.getEditFormSelector($target));
       var $note = $target.closest('.note');
-      var $currentlyEditing = $('.note.is-editting:visible');
+      var $currentlyEditing = $('.note.is-editing:visible');
 
       if ($currentlyEditing.length) {
         var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing);
@@ -615,7 +660,7 @@ require('./task_list');
 
       $note.find('.js-note-attachment-delete').show();
       $editForm.addClass('current-note-edit-form');
-      $note.addClass('is-editting');
+      $note.addClass('is-editing');
       this.putEditFormInPlace($target);
     };
 
@@ -627,21 +672,34 @@ require('./task_list');
 
     Notes.prototype.cancelEdit = function(e) {
       e.preventDefault();
-      var $target = $(e.target);
-      var note = $target.closest('.note');
-      note.find('.js-edit-warning').hide();
+      const $target = $(e.target);
+      const $note = $target.closest('.note');
+      const noteId = $note.attr('data-note-id');
+
       this.revertNoteEditForm($target);
-      return this.removeNoteEditForm(note);
+
+      if (this.updatedNotesTrackingMap[noteId]) {
+        const $newNote = $(this.updatedNotesTrackingMap[noteId].html);
+        $note.replaceWith($newNote);
+        this.updatedNotesTrackingMap[noteId] = null;
+
+        // Update datetime format on the recent note
+        gl.utils.localTimeAgo($newNote.find('.js-timeago'), false);
+      }
+      else {
+        $note.find('.js-finish-edit-warning').hide();
+        this.removeNoteEditForm($note);
+      }
     };
 
     Notes.prototype.revertNoteEditForm = function($target) {
-      $target = $target || $('.note.is-editting:visible');
+      $target = $target || $('.note.is-editing:visible');
       var selector = this.getEditFormSelector($target);
       var $editForm = $(selector);
 
       $editForm.insertBefore('.notes-form');
       $editForm.find('.js-comment-button').enable();
-      $editForm.find('.js-edit-warning').hide();
+      $editForm.find('.js-finish-edit-warning').hide();
     };
 
     Notes.prototype.getEditFormSelector = function($el) {
@@ -654,11 +712,11 @@ require('./task_list');
       return selector;
     };
 
-    Notes.prototype.removeNoteEditForm = function(note) {
-      var form = note.find('.current-note-edit-form');
-      note.removeClass('is-editting');
+    Notes.prototype.removeNoteEditForm = function($note) {
+      var form = $note.find('.current-note-edit-form');
+      $note.removeClass('is-editing');
       form.removeClass('current-note-edit-form');
-      form.find('.js-edit-warning').hide();
+      form.find('.js-finish-edit-warning').hide();
       // Replace markdown textarea text with original note text.
       return form.find('.js-note-text').val(form.find('form.edit-note').data('original-note'));
     };
@@ -683,9 +741,9 @@ require('./task_list');
         // to remove all. Using $(".note[id='noteId']") ensure we get all the notes,
         // where $("#noteId") would return only one.
         return function(i, el) {
-          var note, notes;
-          note = $(el);
-          notes = note.closest(".discussion-notes");
+          var $note, $notes;
+          $note = $(el);
+          $notes = $note.closest(".discussion-notes");
 
           if (typeof gl.diffNotesCompileComponents !== 'undefined') {
             if (gl.diffNoteApps[noteElId]) {
@@ -693,18 +751,18 @@ require('./task_list');
             }
           }
 
-          note.remove();
+          $note.remove();
 
           // check if this is the last note for this line
-          if (notes.find(".note").length === 0) {
-            var notesTr = notes.closest("tr");
+          if ($notes.find(".note").length === 0) {
+            var notesTr = $notes.closest("tr");
 
             // "Discussions" tab
-            notes.closest(".timeline-entry").remove();
+            $notes.closest(".timeline-entry").remove();
 
             // The notes tr can contain multiple lists of notes, like on the parallel diff
             if (notesTr.find('.discussion-notes').length > 1) {
-              notes.remove();
+              $notes.remove();
             } else {
               notesTr.remove();
             }
@@ -723,12 +781,11 @@ require('./task_list');
      */
 
     Notes.prototype.removeAttachment = function() {
-      var note;
-      note = $(this).closest(".note");
-      note.find(".note-attachment").remove();
-      note.find(".note-body > .note-text").show();
-      note.find(".note-header").show();
-      return note.find(".current-note-edit-form").remove();
+      const $note = $(this).closest(".note");
+      $note.find(".note-attachment").remove();
+      $note.find(".note-body > .note-text").show();
+      $note.find(".note-header").show();
+      return $note.find(".current-note-edit-form").remove();
     };
 
     /*
@@ -1004,6 +1061,19 @@ require('./task_list');
       $editForm.find('.referenced-users').hide();
     };
 
+    Notes.prototype.putConflictEditWarningInPlace = function(noteEntity, $note) {
+      if ($note.find('.js-conflict-edit-warning').length === 0) {
+        const $alert = $(`<div class="js-conflict-edit-warning alert alert-danger">
+          This comment has changed since you started editing, please review the
+          <a href="#note_${noteEntity.id}" target="_blank" rel="noopener noreferrer">
+            updated comment
+          </a>
+          to ensure information is not lost
+        </div>`);
+        $alert.insertAfter($note.find('.note-text'));
+      }
+    };
+
     Notes.prototype.updateNotesCount = function(updateCount) {
       return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
     };
@@ -1064,11 +1134,20 @@ require('./task_list');
       return $form;
     };
 
-    Notes.animateAppendNote = function(noteHTML, $notesList) {
-      const $note = window.$(noteHTML);
+    Notes.animateAppendNote = function(noteHtml, $notesList) {
+      const $note = $(noteHtml);
 
       $note.addClass('fade-in').renderGFM();
       $notesList.append($note);
+      return $note;
+    };
+
+    Notes.animateUpdateNote = function(noteHtml, $note) {
+      const $updatedNote = $(noteHtml);
+
+      $updatedNote.addClass('fade-in').renderGFM();
+      $note.replaceWith($updatedNote);
+      return $updatedNote;
     };
 
     return Notes;
diff --git a/app/assets/javascripts/pipelines/components/stage.js b/app/assets/javascripts/pipelines/components/stage.js
deleted file mode 100644
index 203485f2990..00000000000
--- a/app/assets/javascripts/pipelines/components/stage.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/* global Flash */
-import StatusIconEntityMap from '../../ci_status_icons';
-
-export default {
-  props: {
-    stage: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      builds: '',
-      spinner: '<span class="fa fa-spinner fa-spin"></span>',
-    };
-  },
-
-  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;
-        })
-        .catch(() => {
-          // If dropdown is opened we'll close it.
-          if (this.$el.classList.contains('open')) {
-            $(this.$refs.dropdown).dropdown('toggle');
-          }
-
-          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 StatusIconEntityMap[this.stage.status.icon];
-    },
-  },
-  template: `
-    <div>
-      <button
-        @click="fetchBuilds($event)"
-        :class="triggerButtonClass"
-        :title="stage.title"
-        data-placement="top"
-        data-toggle="dropdown"
-        type="button"
-        :aria-label="stage.title"
-        ref="dropdown">
-        <span
-          v-html="svgHTML"
-          aria-hidden="true">
-        </span>
-        <i
-          class="fa fa-caret-down"
-          aria-hidden="true" />
-      </button>
-      <ul
-        ref="dropdown-content"
-        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/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
new file mode 100644
index 00000000000..2e485f951a1
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -0,0 +1,173 @@
+<script>
+
+/**
+ * Renders each stage of the pipeline mini graph.
+ *
+ * Given the provided endpoint will make a request to
+ * fetch the dropdown data when the stage is clicked.
+ *
+ * Request is made inside this component to make it reusable between:
+ * 1. Pipelines main table
+ * 2. Pipelines table in commit and Merge request views
+ * 3. Merge request widget
+ * 4. Commit widget
+ */
+
+/* global Flash */
+import StatusIconEntityMap from '../../ci_status_icons';
+
+export default {
+  props: {
+    stage: {
+      type: Object,
+      required: true,
+    },
+
+    updateDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+      dropdownContent: '',
+      endpoint: this.stage.dropdown_path,
+    };
+  },
+
+  updated() {
+    if (this.dropdownContent.length > 0) {
+      this.stopDropdownClickPropagation();
+    }
+  },
+
+  watch: {
+    updateDropdown() {
+      if (this.updateDropdown &&
+        this.isDropdownOpen() &&
+        !this.isLoading) {
+        this.fetchJobs();
+      }
+    },
+  },
+
+  methods: {
+    onClickStage() {
+      if (!this.isDropdownOpen()) {
+        this.isLoading = true;
+        this.fetchJobs();
+      }
+    },
+
+    fetchJobs() {
+      this.$http.get(this.endpoint)
+        .then((response) => {
+          this.dropdownContent = response.json().html;
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.closeDropdown();
+          this.isLoading = false;
+
+          const flash = new Flash('Something went wrong on our end.');
+          return flash;
+        });
+    },
+
+    /**
+     * When the user right clicks or cmd/ctrl + click in the job name
+     * the dropdown should not be closed and the link should open in another tab,
+     * so we stop propagation of the click event inside the dropdown.
+     *
+     * Since this component is rendered multiple times per page we need to guarantee we only
+     * target the click event of this component.
+     */
+    stopDropdownClickPropagation() {
+      $(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item'))
+        .on('click', (e) => {
+          e.stopPropagation();
+        });
+    },
+
+    closeDropdown() {
+      if (this.isDropdownOpen()) {
+        $(this.$refs.dropdown).dropdown('toggle');
+      }
+    },
+
+    isDropdownOpen() {
+      return this.$el.classList.contains('open');
+    },
+  },
+
+  computed: {
+    dropdownClass() {
+      return this.dropdownContent.length > 0 ? 'js-builds-dropdown-container' : 'js-builds-dropdown-loading';
+    },
+
+    triggerButtonClass() {
+      return `ci-status-icon-${this.stage.status.group}`;
+    },
+
+    svgIcon() {
+      return StatusIconEntityMap[this.stage.status.icon];
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="dropdown">
+    <button
+      :class="triggerButtonClass"
+      @click="onClickStage"
+      class="mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button"
+      :title="stage.title"
+      data-placement="top"
+      data-toggle="dropdown"
+      type="button"
+      id="stageDropdown"
+      aria-haspopup="true"
+      aria-expanded="false">
+
+      <span
+        v-html="svgIcon"
+        aria-hidden="true"
+        :aria-label="stage.title">
+      </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"
+      aria-labelledby="stageDropdown">
+
+      <li
+        :class="dropdownClass"
+        class="js-builds-dropdown-list scrollable-menu">
+
+        <div
+          class="text-center"
+          v-if="isLoading">
+          <i
+            class="fa fa-spin fa-spinner"
+            aria-hidden="true"
+            aria-label="Loading">
+          </i>
+        </div>
+
+        <ul
+          v-else
+          v-html="dropdownContent">
+        </ul>
+      </li>
+    </ul>
+  </div>
+</script>
diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js
index 93d4818231f..934bd7deb31 100644
--- a/app/assets/javascripts/pipelines/pipelines.js
+++ b/app/assets/javascripts/pipelines/pipelines.js
@@ -49,6 +49,7 @@ export default {
       isLoading: false,
       hasError: false,
       isMakingRequest: false,
+      updateGraphDropdown: false,
     };
   },
 
@@ -198,15 +199,21 @@ export default {
       this.store.storePagination(response.headers);
 
       this.isLoading = false;
+      this.updateGraphDropdown = true;
     },
 
     errorCallback() {
       this.hasError = true;
       this.isLoading = false;
+      this.updateGraphDropdown = false;
     },
 
     setIsMakingRequest(isMakingRequest) {
       this.isMakingRequest = isMakingRequest;
+
+      if (isMakingRequest) {
+        this.updateGraphDropdown = false;
+      }
     },
   },
 
@@ -263,7 +270,9 @@ export default {
 
           <pipelines-table-component
             :pipelines="state.pipelines"
-            :service="service"/>
+            :service="service"
+            :update-graph-dropdown="updateGraphDropdown"
+            />
         </div>
 
         <gl-pagination
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 0344ce9ffb4..68cf9ced3ef 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -30,7 +30,7 @@
       $els.each((function(_this) {
         return function(i, dropdown) {
           var options = {};
-          var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, firstUser, issueURL, selectedId, showAnyUser, showNullUser, showMenuAbove;
+          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');
@@ -38,11 +38,11 @@
           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');
-          selectedId = $dropdown.data('selected');
           defaultLabel = $dropdown.data('default-label');
           issueURL = $dropdown.data('issueUpdate');
           $selectbox = $dropdown.closest('.selectbox');
@@ -51,6 +51,8 @@
           $value = $block.find('.value');
           $collapsedSidebar = $block.find('.sidebar-collapsed-user');
           $loading = $block.find('.block-loading').fadeOut();
+          selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
+          selectedId = $dropdown.data('selected') || selectedIdDefault;
 
           var updateIssueBoardsIssue = function () {
             $loading.removeClass('hidden').fadeIn();
@@ -186,12 +188,14 @@
             fieldName: $dropdown.data('field-name'),
             toggleLabel: function(selected, el) {
               if (selected && 'id' in selected && $(el).hasClass('is-active')) {
+                $dropdown.find('.dropdown-toggle-text').removeClass('is-default');
                 if (selected.text) {
                   return selected.text;
                 } else {
                   return selected.name;
                 }
               } else {
+                $dropdown.find('.dropdown-toggle-text').addClass('is-default');
                 return defaultLabel;
               }
             },
@@ -204,13 +208,14 @@
             },
             vue: $dropdown.hasClass('js-issue-board-sidebar'),
             clicked: function(user, $el, e) {
-              var isIssueIndex, isMRIndex, page, selected;
+              var isIssueIndex, isMRIndex, page, selected, isSelecting;
               page = $('body').data('page');
               isIssueIndex = page === 'projects:issues:index';
               isMRIndex = (page === page && page === 'projects:merge_requests:index');
+              isSelecting = (user.id !== selectedId);
+              selectedId = isSelecting ? user.id : selectedIdDefault;
               if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
                 e.preventDefault();
-                selectedId = user.id;
                 if (selectedId === gon.current_user_id) {
                   $('.assign-to-me-link').hide();
                 } else {
@@ -221,12 +226,11 @@
               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)) {
-                selectedId = user.id;
                 return Issuable.filterResults($dropdown.closest('form'));
               } else if ($dropdown.hasClass('js-filter-submit')) {
                 return $dropdown.closest('form').submit();
               } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-                if (user.id) {
+                if (user.id && isSelecting) {
                   gl.issueBoards.boardStoreIssueSet('assignee', new ListUser({
                     id: user.id,
                     username: user.username,
@@ -248,6 +252,9 @@
             },
             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');
               $el.find(`li[data-user-id="${selectedId}"] .dropdown-menu-user-link`).addClass('is-active');
             },
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table.js b/app/assets/javascripts/vue_shared/components/pipelines_table.js
index afd8d7acf6b..48a39f18112 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table.js
@@ -10,13 +10,18 @@ export default {
     pipelines: {
       type: Array,
       required: true,
-      default: () => ([]),
     },
 
     service: {
       type: Object,
       required: true,
     },
+
+    updateGraphDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   components: {
@@ -40,7 +45,9 @@ export default {
           v-bind:model="model">
           <tr is="pipelines-table-row-component"
             :pipeline="model"
-            :service="service"></tr>
+            :service="service"
+            :update-graph-dropdown="updateGraphDropdown"
+            />
         </template>
       </tbody>
     </table>
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 79806bc7204..fbae85c85f6 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -3,7 +3,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 PipelinesStageComponent from '../../pipelines/components/stage';
+import PipelinesStageComponent from '../../pipelines/components/stage.vue';
 import PipelinesUrlComponent from '../../pipelines/components/pipeline_url';
 import PipelinesTimeagoComponent from '../../pipelines/components/time_ago';
 import CommitComponent from './commit';
@@ -24,6 +24,12 @@ export default {
       type: Object,
       required: true,
     },
+
+    updateGraphDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   components: {
@@ -213,7 +219,10 @@ export default {
         <div class="stage-container dropdown js-mini-pipeline-graph"
           v-if="pipeline.details.stages.length > 0"
           v-for="stage in pipeline.details.stages">
-          <dropdown-stage :stage="stage"/>
+
+          <dropdown-stage
+            :stage="stage"
+            :update-dropdown="updateGraphDropdown"/>
         </div>
       </td>
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 1313ea25c2a..73ded9f30d4 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -390,7 +390,8 @@
       &::before {
         position: absolute;
         left: 6px;
-        top: 6px;
+        top: 50%;
+        transform: translateY(-50%);
         font: normal normal normal 14px/1 FontAwesome;
         font-size: inherit;
         text-rendering: auto;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 1b4694377b3..feefaad8a15 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -425,12 +425,6 @@
   float: right;
 }
 
-.diffs {
-  .content-block {
-    border-bottom: none;
-  }
-}
-
 .files-changed {
   border-bottom: none;
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 97fab513b01..ad6eb9f6fe0 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -6,7 +6,13 @@
 }
 
 .limit-container-width {
-  .detail-page-header {
+  .detail-page-header,
+  .page-content-header,
+  .commit-box,
+  .info-well,
+  .notes,
+  .commit-ci-menu,
+  .files-changed {
     @extend .fixed-width-container;
   }
 
@@ -36,8 +42,7 @@
   }
 
   .diffs {
-    .mr-version-controls,
-    .files-changed {
+    .mr-version-controls {
       @extend .fixed-width-container;
     }
   }
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 2aa52986e0a..b18bbc329c3 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -161,3 +161,86 @@ ul.related-merge-requests > li {
 .recaptcha {
   margin-bottom: 30px;
 }
+
+.new-branch-col {
+  padding-top: 10px;
+}
+
+.create-mr-dropdown-wrap {
+  .btn-group:not(.hide) {
+    display: flex;
+  }
+
+  .js-create-merge-request {
+    flex-grow: 1;
+    flex-shrink: 0;
+  }
+
+  .dropdown-menu {
+    width: 300px;
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    display: none;
+  }
+
+  .dropdown-toggle {
+    .fa-caret-down {
+      pointer-events: none;
+      margin-left: 0;
+      color: inherit;
+      margin-left: 0;
+    }
+  }
+
+  li:not(.divider) {
+    padding: 6px;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      background-color: $dropdown-hover-color;
+      color: $white-light;
+    }
+
+    &.droplab-item-selected {
+      .icon-container {
+        i {
+          visibility: visible;
+        }
+      }
+    }
+
+    .icon-container {
+      float: left;
+      padding-left: 6px;
+
+      i {
+        visibility: hidden;
+      }
+    }
+
+    .description {
+      padding-left: 30px;
+      font-size: 13px;
+
+      strong {
+        display: block;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .new-branch-col {
+    padding-top: 0;
+    text-align: right;
+  }
+
+  .create-mr-dropdown-wrap {
+    .btn-group:not(.hide) {
+      display: inline-block;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index be7193bae04..8dbac76e30a 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -133,3 +133,55 @@
     right: 160px;
   }
 }
+
+.flex-project-members-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: $screen-sm-min) {
+    display: block;
+
+    .flex-project-title {
+      vertical-align: top;
+      display: inline-block;
+      max-width: 90%;
+    }
+  }
+
+  .flex-project-title {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .badge {
+    height: 17px;
+    line-height: 16px;
+    margin-right: 5px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+
+  .flex-project-members-form {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    margin-left: auto;
+  }
+}
+
+.panel {
+  .panel-heading {
+    .badge {
+      margin-top: 0;
+    }
+
+    @media (max-width: $screen-sm-min) {
+      .badge {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 6a419384a34..72660113e3c 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -482,6 +482,10 @@
   }
 }
 
+.target-branch-select-dropdown-container {
+  position: relative;
+}
+
 .assign-to-me-link {
   padding-left: 12px;
   white-space: nowrap;
@@ -511,7 +515,6 @@
 
 .mr-version-controls {
   background: $gray-light;
-  border-bottom: 1px solid $border-color;
   color: $gl-text-color;
 
   .mr-version-menus-container {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 7cf74502a3a..f89150ebead 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -67,7 +67,7 @@ ul.notes {
       }
     }
 
-    &.is-editting {
+    &.is-editing {
       .note-header,
       .note-text,
       .edited-text {
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index a4fe652b52f..9115d26c779 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -781,16 +781,11 @@
   }
 
   .scrollable-menu {
+    padding: 0;
     max-height: 245px;
     overflow: auto;
   }
 
-  // Loading icon
-  .builds-dropdown-loading {
-    margin: 0 auto;
-    width: 20px;
-  }
-
   // Action icon on the right
   a.ci-action-icon-wrapper {
     color: $action-icon-color;
@@ -893,30 +888,29 @@
  * Top arrow in the dropdown in the mini pipeline graph
  */
 .mini-pipeline-graph-dropdown-menu {
-  .arrow-up {
-    &::before,
-    &::after {
-      content: '';
-      display: inline-block;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-      top: -6px;
-      left: 2px;
-      border-width: 0 5px 6px;
-    }
 
-    &::before {
-      border-width: 0 5px 5px;
-      border-bottom-color: $border-color;
-    }
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    top: -6px;
+    left: 2px;
+    border-width: 0 5px 6px;
+  }
 
-    &::after {
-      margin-top: 1px;
-      border-bottom-color: $white-light;
-    }
+  &::before {
+    border-width: 0 5px 5px;
+    border-bottom-color: $border-color;
+  }
+
+  &::after {
+    margin-top: 1px;
+    border-bottom-color: $white-light;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index 04ff2d52b91..b64b89485f7 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -71,7 +71,6 @@
     .nav-controls {
       width: auto;
       min-width: 50%;
-      white-space: nowrap;
     }
   }