Merge branch 'master' into issue-boards-no-avatar

33 files changed, 1162 insertions, 374 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/blob/pdf/index.js b/app/assets/javascripts/blob/pdf/index.js
index 9161be98853..0ed915c1ac9 100644
--- a/app/assets/javascripts/blob/pdf/index.js
+++ b/app/assets/javascripts/blob/pdf/index.js
@@ -1,11 +1,6 @@
 /* eslint-disable no-new */
 import Vue from 'vue';
-import PDFLab from 'vendor/pdflab';
-import workerSrc from 'vendor/pdf.worker';
-
-Vue.use(PDFLab, {
-  workerSrc,
-});
+import pdfLab from '../../pdf/index.vue';
 
 export default () => {
   const el = document.getElementById('js-pdf-viewer');
@@ -20,6 +15,9 @@ export default () => {
         pdf: el.dataset.endpoint,
       };
     },
+    components: {
+      pdfLab,
+    },
     methods: {
       onLoad() {
         this.loading = false;
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 7efa8537298..07d67d49aa5 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -6,7 +6,7 @@ export default class BlobViewer {
     this.copySourceBtn = document.querySelector('.js-copy-blob-source-btn');
     this.simpleViewer = document.querySelector('.blob-viewer[data-type="simple"]');
     this.richViewer = document.querySelector('.blob-viewer[data-type="rich"]');
-    this.$blobContentHolder = $('#blob-content-holder');
+    this.$fileHolder = $('.file-holder');
 
     let initialViewerName = document.querySelector('.blob-viewer:not(.hidden)').getAttribute('data-type');
 
@@ -82,7 +82,7 @@ export default class BlobViewer {
 
       viewer.setAttribute('data-loaded', 'true');
 
-      this.$blobContentHolder.trigger('highlight:line');
+      this.$fileHolder.trigger('highlight:line');
 
       this.toggleCopyButtonState();
     });
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/dispatcher.js b/app/assets/javascripts/dispatcher.js
index d3d75c4bf4a..0bdce52cc89 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -44,6 +44,7 @@ import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
+import Landing from './landing';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
 import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
@@ -148,8 +149,19 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new ProjectsList();
           break;
         case 'dashboard:groups:index':
+          new GroupsList();
+          break;
         case 'explore:groups:index':
           new GroupsList();
+
+          const landingElement = document.querySelector('.js-explore-groups-landing');
+          if (!landingElement) break;
+          const exploreGroupsLanding = new Landing(
+            landingElement,
+            landingElement.querySelector('.dismiss-button'),
+            'explore_groups_landing_dismissed',
+          );
+          exploreGroupsLanding.toggle();
           break;
         case 'projects:milestones:new':
         case 'projects:milestones:edit':
@@ -356,6 +368,10 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'users:show':
           new UserCallout();
           break;
+        case 'snippets:show':
+          new LineHighlighter();
+          new BlobViewer();
+          break;
       }
       switch (path.first()) {
         case 'sessions':
@@ -434,6 +450,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
               shortcut_handler = new ShortcutsNavigation();
               if (path[2] === 'show') {
                 new ZenMode();
+                new LineHighlighter();
+                new BlobViewer();
               }
               break;
             case 'labels':
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/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/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/landing.js b/app/assets/javascripts/landing.js
new file mode 100644
index 00000000000..8c0950ad5d5
--- /dev/null
+++ b/app/assets/javascripts/landing.js
@@ -0,0 +1,37 @@
+import Cookies from 'js-cookie';
+
+class Landing {
+  constructor(landingElement, dismissButton, cookieName) {
+    this.landingElement = landingElement;
+    this.cookieName = cookieName;
+    this.dismissButton = dismissButton;
+    this.eventWrapper = {};
+  }
+
+  toggle() {
+    const isDismissed = this.isDismissed();
+
+    this.landingElement.classList.toggle('hidden', isDismissed);
+    if (!isDismissed) this.addEvents();
+  }
+
+  addEvents() {
+    this.eventWrapper.dismissLanding = this.dismissLanding.bind(this);
+    this.dismissButton.addEventListener('click', this.eventWrapper.dismissLanding);
+  }
+
+  removeEvents() {
+    this.dismissButton.removeEventListener('click', this.eventWrapper.dismissLanding);
+  }
+
+  dismissLanding() {
+    this.landingElement.classList.add('hidden');
+    Cookies.set(this.cookieName, 'true', { expires: 365 });
+  }
+
+  isDismissed() {
+    return Cookies.get(this.cookieName) === 'true';
+  }
+}
+
+export default Landing;
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index a6f7bea99f5..3ac6dedf131 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -57,9 +57,9 @@ require('vendor/jquery.scrollTo');
     }
 
     LineHighlighter.prototype.bindEvents = function() {
-      const $blobContentHolder = $('#blob-content-holder');
-      $blobContentHolder.on('click', 'a[data-line-number]', this.clickHandler);
-      $blobContentHolder.on('highlight:line', this.highlightHash);
+      const $fileHolder = $('.file-holder');
+      $fileHolder.on('click', 'a[data-line-number]', this.clickHandler);
+      $fileHolder.on('highlight:line', this.highlightHash);
     };
 
     LineHighlighter.prototype.highlightHash = function() {
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/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
new file mode 100644
index 00000000000..c3a8da52404
--- /dev/null
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -0,0 +1,4 @@
+import d3 from 'd3';
+
+export const dateFormat = d3.time.format('%b %d, %Y');
+export const timeFormat = d3.time.format('%H:%M%p');
diff --git a/app/assets/javascripts/monitoring/deployments.js b/app/assets/javascripts/monitoring/deployments.js
new file mode 100644
index 00000000000..fc92ab61b31
--- /dev/null
+++ b/app/assets/javascripts/monitoring/deployments.js
@@ -0,0 +1,211 @@
+/* global Flash */
+import d3 from 'd3';
+import {
+  dateFormat,
+  timeFormat,
+} from './constants';
+
+export default class Deployments {
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+
+    this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
+
+    this.createGradientDef();
+  }
+
+  init(chartData) {
+    this.chartData = chartData;
+
+    this.x = d3.time.scale().range([0, this.width]);
+    this.x.domain(d3.extent(this.chartData, d => d.time));
+
+    this.charts = d3.selectAll('.prometheus-graph');
+
+    this.getData();
+  }
+
+  getData() {
+    $.ajax({
+      url: this.endpoint,
+      dataType: 'JSON',
+    })
+    .fail(() => new Flash('Error getting deployment information.'))
+    .done((data) => {
+      this.data = data.deployments.reduce((deploymentDataArray, deployment) => {
+        const time = new Date(deployment.created_at);
+        const xPos = Math.floor(this.x(time));
+
+        time.setSeconds(this.chartData[0].time.getSeconds());
+
+        if (xPos >= 0) {
+          deploymentDataArray.push({
+            id: deployment.id,
+            time,
+            sha: deployment.sha,
+            tag: deployment.tag,
+            ref: deployment.ref.name,
+            xPos,
+          });
+        }
+
+        return deploymentDataArray;
+      }, []);
+
+      this.plotData();
+    });
+  }
+
+  plotData() {
+    this.charts.each((d, i) => {
+      const svg = d3.select(this.charts[0][i]);
+      const chart = svg.select('.graph-container');
+      const key = svg.node().getAttribute('graph-type');
+
+      this.createLine(chart, key);
+      this.createDeployInfoBox(chart, key);
+    });
+  }
+
+  createGradientDef() {
+    const defs = d3.select('body')
+      .append('svg')
+      .attr({
+        height: 0,
+        width: 0,
+      })
+      .append('defs');
+
+    defs.append('linearGradient')
+      .attr({
+        id: 'shadow-gradient',
+      })
+      .append('stop')
+      .attr({
+        offset: '0%',
+        'stop-color': '#000',
+        'stop-opacity': 0.4,
+      })
+      .select(this.selectParentNode)
+      .append('stop')
+      .attr({
+        offset: '100%',
+        'stop-color': '#000',
+        'stop-opacity': 0,
+      });
+  }
+
+  createLine(chart, key) {
+    chart.append('g')
+      .attr({
+        class: 'deploy-info',
+      })
+      .selectAll('.deploy-info')
+      .data(this.data)
+      .enter()
+      .append('g')
+      .attr({
+        class: d => `deploy-info-${d.id}-${key}`,
+        transform: d => `translate(${Math.floor(d.xPos) + 1}, 0)`,
+      })
+      .append('rect')
+      .attr({
+        x: 1,
+        y: 0,
+        height: this.height + 1,
+        width: 3,
+        fill: 'url(#shadow-gradient)',
+      })
+      .select(this.selectParentNode)
+      .append('line')
+      .attr({
+        class: 'deployment-line',
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: this.height + 1,
+      });
+  }
+
+  createDeployInfoBox(chart, key) {
+    chart.selectAll('.deploy-info')
+      .selectAll('.js-deploy-info-box')
+      .data(this.data)
+      .enter()
+      .select(d => document.querySelector(`.deploy-info-${d.id}-${key}`))
+      .append('svg')
+      .attr({
+        class: 'js-deploy-info-box hidden',
+        x: 3,
+        y: 0,
+        width: 92,
+        height: 60,
+      })
+      .append('rect')
+      .attr({
+        class: 'rect-text-metric deploy-info-rect rect-metric',
+        x: 1,
+        y: 1,
+        rx: 2,
+        width: 90,
+        height: 58,
+      })
+      .select(this.selectParentNode)
+      .append('g')
+      .attr({
+        transform: 'translate(5, 2)',
+      })
+      .append('text')
+      .attr({
+        class: 'deploy-info-text text-metric-bold',
+      })
+      .text(Deployments.refText)
+      .select(this.selectParentNode)
+      .append('text')
+      .attr({
+        class: 'deploy-info-text',
+        y: 18,
+      })
+      .text(d => dateFormat(d.time))
+      .select(this.selectParentNode)
+      .append('text')
+      .attr({
+        class: 'deploy-info-text text-metric-bold',
+        y: 38,
+      })
+      .text(d => timeFormat(d.time));
+  }
+
+  static toggleDeployTextbox(deploy, key, showInfoBox) {
+    d3.selectAll(`.deploy-info-${deploy.id}-${key} .js-deploy-info-box`)
+      .classed('hidden', !showInfoBox);
+  }
+
+  mouseOverDeployInfo(mouseXPos, key) {
+    if (!this.data) return false;
+
+    let dataFound = false;
+
+    this.data.forEach((d) => {
+      if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
+        dataFound = d.xPos + 1;
+
+        Deployments.toggleDeployTextbox(d, key, true);
+      } else {
+        Deployments.toggleDeployTextbox(d, key, false);
+      }
+    });
+
+    return dataFound;
+  }
+
+  /* `this` is bound to the D3 node */
+  selectParentNode() {
+    return this.parentNode;
+  }
+
+  static refText(d) {
+    return d.tag ? d.ref : d.sha.slice(0, 6);
+  }
+}
diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js
index 78bb0e6fb47..6af88769129 100644
--- a/app/assets/javascripts/monitoring/prometheus_graph.js
+++ b/app/assets/javascripts/monitoring/prometheus_graph.js
@@ -3,16 +3,20 @@
 
 import d3 from 'd3';
 import statusCodes from '~/lib/utils/http_status';
-import { formatRelevantDigits } from '~/lib/utils/number_utils';
+import Deployments from './deployments';
+import '../lib/utils/common_utils';
+import { formatRelevantDigits } from '../lib/utils/number_utils';
 import '../flash';
+import {
+  dateFormat,
+  timeFormat,
+} from './constants';
 
 const prometheusContainer = '.prometheus-container';
 const prometheusParentGraphContainer = '.prometheus-graphs';
 const prometheusGraphsContainer = '.prometheus-graph';
 const prometheusStatesContainer = '.prometheus-state';
 const metricsEndpoint = 'metrics.json';
-const timeFormat = d3.time.format('%H:%M');
-const dayFormat = d3.time.format('%b %e, %a');
 const bisectDate = d3.bisector(d => d.time).left;
 const extraAddedWidthParent = 100;
 
@@ -36,6 +40,7 @@ class PrometheusGraph {
       this.width = parentContainerWidth - this.margin.left - this.margin.right;
       this.height = this.originalHeight - this.margin.top - this.margin.bottom;
       this.backOffRequestCounter = 0;
+      this.deployments = new Deployments(this.width, this.height);
       this.configureGraph();
       this.init();
     } else {
@@ -74,6 +79,12 @@ class PrometheusGraph {
         $(prometheusParentGraphContainer).show();
         this.transformData(metricsResponse);
         this.createGraph();
+
+        const firstMetricData = this.graphSpecificProperties[
+          Object.keys(this.graphSpecificProperties)[0]
+        ].data;
+
+        this.deployments.init(firstMetricData);
       }
     });
   }
@@ -96,6 +107,7 @@ class PrometheusGraph {
       .attr('width', this.width + this.margin.left + this.margin.right)
       .attr('height', this.height + this.margin.bottom + this.margin.top)
       .append('g')
+      .attr('class', 'graph-container')
         .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
 
     const axisLabelContainer = d3.select(prometheusGraphContainer)
@@ -116,6 +128,7 @@ class PrometheusGraph {
       .scale(y)
       .ticks(this.commonGraphProperties.axis_no_ticks)
       .tickSize(-this.width)
+      .outerTickSize(0)
       .orient('left');
 
     this.createAxisLabelContainers(axisLabelContainer, key);
@@ -248,7 +261,8 @@ class PrometheusGraph {
       const d1 = currentGraphProps.data[overlayIndex];
       const evalTime = timeValueOverlay - d0.time > d1.time - timeValueOverlay;
       const currentData = evalTime ? d1 : d0;
-      const currentTimeCoordinate = currentGraphProps.xScale(currentData.time);
+      const currentTimeCoordinate = Math.floor(currentGraphProps.xScale(currentData.time));
+      const currentDeployXPos = this.deployments.mouseOverDeployInfo(currentXCoordinate, key);
       const currentPrometheusGraphContainer = `${prometheusGraphsContainer}[graph-type=${key}]`;
       const maxValueFromData = d3.max(currentGraphProps.data.map(metricValue => metricValue.value));
       const maxMetricValue = currentGraphProps.yScale(maxValueFromData);
@@ -256,13 +270,12 @@ class PrometheusGraph {
       // Clear up all the pieces of the flag
       d3.selectAll(`${currentPrometheusGraphContainer} .selected-metric-line`).remove();
       d3.selectAll(`${currentPrometheusGraphContainer} .circle-metric`).remove();
-      d3.selectAll(`${currentPrometheusGraphContainer} .rect-text-metric`).remove();
-      d3.selectAll(`${currentPrometheusGraphContainer} .text-metric`).remove();
+      d3.selectAll(`${currentPrometheusGraphContainer} .rect-text-metric:not(.deploy-info-rect)`).remove();
 
       const currentChart = d3.select(currentPrometheusGraphContainer).select('g');
       currentChart.append('line')
-      .attr('class', 'selected-metric-line')
       .attr({
+        class: `${currentDeployXPos ? 'hidden' : ''} selected-metric-line`,
         x1: currentTimeCoordinate,
         y1: currentGraphProps.yScale(0),
         x2: currentTimeCoordinate,
@@ -272,33 +285,45 @@ class PrometheusGraph {
       currentChart.append('circle')
         .attr('class', 'circle-metric')
         .attr('fill', currentGraphProps.line_color)
-        .attr('cx', currentTimeCoordinate)
+        .attr('cx', currentDeployXPos || currentTimeCoordinate)
         .attr('cy', currentGraphProps.yScale(currentData.value))
         .attr('r', this.commonGraphProperties.circle_radius_metric);
 
+      if (currentDeployXPos) return;
+
       // The little box with text
-      const rectTextMetric = currentChart.append('g')
-        .attr('class', 'rect-text-metric')
-        .attr('translate', `(${currentTimeCoordinate}, ${currentGraphProps.yScale(currentData.value)})`);
+      const rectTextMetric = currentChart.append('svg')
+        .attr({
+          class: 'rect-text-metric',
+          x: currentTimeCoordinate,
+          y: 0,
+        });
 
       rectTextMetric.append('rect')
-        .attr('class', 'rect-metric')
-        .attr('x', currentTimeCoordinate + 10)
-        .attr('y', maxMetricValue)
-        .attr('width', this.commonGraphProperties.rect_text_width)
-        .attr('height', this.commonGraphProperties.rect_text_height);
+        .attr({
+          class: 'rect-metric',
+          x: 4,
+          y: 1,
+          rx: 2,
+          width: this.commonGraphProperties.rect_text_width,
+          height: this.commonGraphProperties.rect_text_height,
+        });
 
       rectTextMetric.append('text')
-        .attr('class', 'text-metric')
-        .attr('x', currentTimeCoordinate + 35)
-        .attr('y', maxMetricValue + 35)
+        .attr({
+          class: 'text-metric text-metric-bold',
+          x: 8,
+          y: 35,
+        })
         .text(timeFormat(currentData.time));
 
       rectTextMetric.append('text')
-        .attr('class', 'text-metric-date')
-        .attr('x', currentTimeCoordinate + 15)
-        .attr('y', maxMetricValue + 15)
-        .text(dayFormat(currentData.time));
+        .attr({
+          class: 'text-metric-date',
+          x: 8,
+          y: 15,
+        })
+        .text(dateFormat(currentData.time));
 
       let currentMetricValue = formatRelevantDigits(currentData.value);
       if (key === 'cpu_values') {
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/pdf/assets/img/bg.gif b/app/assets/javascripts/pdf/assets/img/bg.gif
new file mode 100644
index 00000000000..c7e98e044f5
--- /dev/null
+++ b/app/assets/javascripts/pdf/assets/img/bg.gif
diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
new file mode 100644
index 00000000000..4603859d7b0
--- /dev/null
+++ b/app/assets/javascripts/pdf/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="pdf-viewer" v-if="hasPDF">
+    <page v-for="(page, index) in pages"
+      :key="index"
+      :v-if="!loading"
+      :page="page"
+      :number="index + 1" />
+  </div>
+</template>
+
+<script>
+  import pdfjsLib from 'pdfjs-dist';
+  import workerSrc from 'vendor/pdf.worker';
+
+  import page from './page/index.vue';
+
+  export default {
+    props: {
+      pdf: {
+        type: [String, Uint8Array],
+        required: true,
+      },
+    },
+    data() {
+      return {
+        loading: false,
+        pages: [],
+      };
+    },
+    components: { page },
+    watch: { pdf: 'load' },
+    computed: {
+      document() {
+        return typeof this.pdf === 'string' ? this.pdf : { data: this.pdf };
+      },
+      hasPDF() {
+        return this.pdf && this.pdf.length > 0;
+      },
+    },
+    methods: {
+      load() {
+        this.pages = [];
+        return pdfjsLib.getDocument(this.document)
+          .then(this.renderPages)
+          .then(() => this.$emit('pdflabload'))
+          .catch(error => this.$emit('pdflaberror', error))
+          .then(() => { this.loading = false; });
+      },
+      renderPages(pdf) {
+        const pagePromises = [];
+        this.loading = true;
+        for (let num = 1; num <= pdf.numPages; num += 1) {
+          pagePromises.push(
+            pdf.getPage(num).then(p => this.pages.push(p)),
+          );
+        }
+        return Promise.all(pagePromises);
+      },
+    },
+    mounted() {
+      pdfjsLib.PDFJS.workerSrc = workerSrc;
+      if (this.hasPDF) this.load();
+    },
+  };
+</script>
+
+<style>
+  .pdf-viewer {
+    background: url('./assets/img/bg.gif');
+    display: flex;
+    flex-flow: column nowrap;
+  }
+</style>
diff --git a/app/assets/javascripts/pdf/page/index.vue b/app/assets/javascripts/pdf/page/index.vue
new file mode 100644
index 00000000000..7b74ee4eb2e
--- /dev/null
+++ b/app/assets/javascripts/pdf/page/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <canvas
+    class="pdf-page"
+    ref="canvas"
+    :data-page="number" />
+</template>
+
+<script>
+  export default {
+    props: {
+      page: {
+        type: Object,
+        required: true,
+      },
+      number: {
+        type: Number,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        scale: 4,
+        rendering: false,
+      };
+    },
+    computed: {
+      viewport() {
+        return this.page.getViewport(this.scale);
+      },
+      context() {
+        return this.$refs.canvas.getContext('2d');
+      },
+      renderContext() {
+        return {
+          canvasContext: this.context,
+          viewport: this.viewport,
+        };
+      },
+    },
+    mounted() {
+      this.$refs.canvas.height = this.viewport.height;
+      this.$refs.canvas.width = this.viewport.width;
+      this.rendering = true;
+      this.page.render(this.renderContext)
+        .then(() => { this.rendering = false; })
+        .catch(error => this.$emit('pdflaberror', error));
+    },
+  };
+</script>
+
+<style>
+.pdf-page {
+  margin: 8px auto 0 auto;
+  border-top: 1px #ddd solid;
+  border-bottom: 1px #ddd solid;
+  width: 100%;
+}
+
+.pdf-page:first-child {
+  margin-top: 0px;
+  border-top: 0px;
+}
+
+.pdf-page:last-child {
+  margin-bottom: 0px;
+  border-bottom: 0px;
+}
+</style>
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>